# @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.