Sterister
9ceab037ca
Some checks failed
Test / test (push) Has been cancelled
M-Obs 4: @shade/widgets React library - ShadeProvider context with observer URL + token + theme - useShadeState (polling) + useShadeEvents (SSE) hooks - 7 widgets: IdentityCard, SessionList, PrekeyStock, RecentActivity, ServerStatus, FingerprintCompare, WidgetCatalog (meta-widget for user-selectable layout with localStorage persistence) - Self-contained CSS via inline styles, no external CSS conflicts - Light/dark/auto theme via tokens M-Obs 5: @shade/dashboard standalone SPA - Vite + React app composing all widgets into a full debugger layout - Login screen with token persistence to localStorage - Build script copies dist/ to @shade/observer/dist/ for embedded serving - 211 KB JS bundle (66 KB gzipped) M-Obs 6: Documentation + integration example - READMEs for @shade/observer and @shade/widgets - examples/06-observer-dashboard runnable demo: spins up prekey server + observer, runs Alice ↔ Bob conversation loop, dashboard at :3901 - Updated root README and docker-compose.yml with observer integration M-Obs 7: End-to-end verification - StateAggregator now drains buffered events on subscription, so identity.initialized fires before observer construction are still seen - Verified live: snapshot endpoint returns full state, dashboard serves, 401 without auth, sessions/messages/ratchet steps all tracked 220 tests passing, 0 failures. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
90 lines
2.6 KiB
Markdown
90 lines
2.6 KiB
Markdown
# @shade/widgets
|
|
|
|
Embeddable React widgets for live Shade observability. Drop them into any React dashboard (Nova, Orchestrator, your own apps) to show what's happening in your Shade deployment.
|
|
|
|
## Install
|
|
|
|
```bash
|
|
bun add @shade/widgets react react-dom
|
|
```
|
|
|
|
## Quick start
|
|
|
|
```tsx
|
|
import { ShadeProvider, IdentityCard, SessionList, RecentActivity } from '@shade/widgets';
|
|
|
|
function MyDashboard() {
|
|
return (
|
|
<ShadeProvider
|
|
observerUrl="https://shade.example.com/shade-observer"
|
|
token={process.env.SHADE_TOKEN!}
|
|
>
|
|
<IdentityCard />
|
|
<SessionList />
|
|
<RecentActivity />
|
|
</ShadeProvider>
|
|
);
|
|
}
|
|
```
|
|
|
|
You need a running [`@shade/observer`](../shade-observer/README.md) endpoint for the widgets to talk to.
|
|
|
|
## Components
|
|
|
|
| Component | Description |
|
|
|-----------|-------------|
|
|
| `<IdentityCard />` | Your fingerprint, registration ID, init/rotation timestamps |
|
|
| `<SessionList />` | Active Shade sessions with per-session message counts and DH ratchet steps |
|
|
| `<PrekeyStock lowThreshold={5} />` | Gauge of remaining one-time prekeys with low-stock warning |
|
|
| `<RecentActivity limit={50} />` | Live SSE feed of events flowing through the system |
|
|
| `<ServerStatus />` | Prekey server stats (registered identities, fetches, replenishes, rate limits) |
|
|
| `<FingerprintCompare />` | Paste a safety number to verify it matches your identity |
|
|
| `<WidgetCatalog />` | Meta-widget letting users pick which widgets to display |
|
|
|
|
## Letting users pick widgets
|
|
|
|
```tsx
|
|
<ShadeProvider observerUrl="..." token="...">
|
|
<WidgetCatalog
|
|
available={['identity', 'sessions', 'prekeys', 'activity', 'server']}
|
|
defaultLayout={['identity', 'sessions', 'activity']}
|
|
/>
|
|
</ShadeProvider>
|
|
```
|
|
|
|
User selections persist to `localStorage`. Pass `onLayoutChange` to override with your own persistence.
|
|
|
|
## Theming
|
|
|
|
```tsx
|
|
<ShadeProvider observerUrl="..." token="..." themeMode="auto">
|
|
```
|
|
|
|
Modes: `dark` (default), `light`, `auto` (matches `prefers-color-scheme`).
|
|
|
|
Each widget renders self-contained CSS via inline styles — no Tailwind, no external CSS file, no conflicts with your host app.
|
|
|
|
## Hooks
|
|
|
|
For custom layouts, use the underlying hooks directly:
|
|
|
|
```tsx
|
|
import { useShadeState, useShadeEvents } from '@shade/widgets';
|
|
|
|
function CustomWidget() {
|
|
const { state, loading } = useShadeState();
|
|
const { events, connected } = useShadeEvents();
|
|
// ... render whatever you want
|
|
}
|
|
```
|
|
|
|
## Polling interval
|
|
|
|
Default poll for `/api/state` is 5 seconds. Override:
|
|
|
|
```tsx
|
|
<ShadeProvider observerUrl="..." token="..." pollIntervalMs={2000}>
|
|
```
|
|
|
|
The SSE event stream updates instantly regardless of poll interval.
|