feat(observer): M-Obs 4-7 — widgets, dashboard, docs, integration example

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>

packages/shade-widgets/README.md

@@ -0,0 +1,89 @@
+# @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.