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/src/theme.ts

@@ -0,0 +1,72 @@
+/**
+ * Theme tokens for Shade widgets.
+ *
+ * Self-contained — no external CSS required. Each widget reads tokens
+ * from the active theme via context.
+ */
+
+export interface ShadeTheme {
+  bg: string;
+  bgElevated: string;
+  border: string;
+  text: string;
+  textMuted: string;
+  textDim: string;
+  accent: string;
+  accentMuted: string;
+  success: string;
+  warning: string;
+  danger: string;
+  font: string;
+  fontMono: string;
+  radius: string;
+  shadow: string;
+}
+
+export const darkTheme: ShadeTheme = {
+  bg: '#0a0a0a',
+  bgElevated: '#161616',
+  border: '#262626',
+  text: '#e5e5e5',
+  textMuted: '#a3a3a3',
+  textDim: '#525252',
+  accent: '#f7c948',
+  accentMuted: 'rgba(247, 201, 72, 0.15)',
+  success: '#22c55e',
+  warning: '#eab308',
+  danger: '#ef4444',
+  font: 'system-ui, -apple-system, Segoe UI, Roboto, sans-serif',
+  fontMono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+  radius: '8px',
+  shadow: '0 4px 12px rgba(0, 0, 0, 0.4)',
+};
+
+export const lightTheme: ShadeTheme = {
+  bg: '#ffffff',
+  bgElevated: '#f5f5f5',
+  border: '#e5e5e5',
+  text: '#0a0a0a',
+  textMuted: '#525252',
+  textDim: '#a3a3a3',
+  accent: '#ca8a04',
+  accentMuted: 'rgba(202, 138, 4, 0.1)',
+  success: '#16a34a',
+  warning: '#ca8a04',
+  danger: '#dc2626',
+  font: 'system-ui, -apple-system, Segoe UI, Roboto, sans-serif',
+  fontMono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+  radius: '8px',
+  shadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+};
+
+export type ThemeMode = 'dark' | 'light' | 'auto';
+
+export function resolveTheme(mode: ThemeMode): ShadeTheme {
+  if (mode === 'dark') return darkTheme;
+  if (mode === 'light') return lightTheme;
+  // auto: use prefers-color-scheme
+  if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: light)').matches) {
+    return lightTheme;
+  }
+  return darkTheme;
+}