feat: apply imported design (bento grid, real elevation tokens, live indicator)

Imports the visual direction from a claude.ai/design session ("PulseNode
Dashboard.dc.html") and reconciles it with the app's existing choices
rather than a wholesale swap: kept the IBM Plex Sans/Mono + Space
Grotesk typography and the pulse-green accent concept from the earlier
pass, adopted the imported design's structural ideas - a real
tonal/elevation token system (derived divider/muted colors via
color-mix instead of hardcoded per-theme duplicates, actual box-shadow
elevation), a 12-column bento grid with per-widget-type column spans
instead of uniform equal-width cards, fading-edge section dividers,
and a shared WidgetCard/MetricBar/StatusTag vocabulary so every widget
type stops repeating its own card markup.

Icons come from @phosphor-icons/react's /ssr entrypoint (bundled at
build time) rather than the imported design's unpkg.com CDN script -
that script is fine for the standalone design-tool preview, but a
runtime third-party call would break the self-hosted-only principle
already established (fonts self-hosted via next/font, no external
requests). New app/icon.svg reuses the same nav badge mark as the
favicon, replacing the never-touched create-next-app default.

Two new pieces of real functionality prompted by the design's mockup
toast/live-indicator, not just decoration: a "live" WebSocket
connection-status indicator (lib/ws/client.ts now tracks and exposes
real connection state), and a toast that fires on actual config:update
and config:error events - the latter finally surfaces config validation
failures in the browser, previously visible only in server logs despite
being designed for exactly this back in M1.

lib/ws/client.ts

@@ -12,14 +12,23 @@ interface Envelope {
 }
 
 type TopicListener = (envelope: Envelope) => void;
+export type ConnectionStatus = "connecting" | "connected" | "reconnecting";
+type ConnectionListener = (status: ConnectionStatus) => void;
 
 let sharedSocket: WebSocket | null = null;
 let refCount = 0;
 let reconnectAttempts = 0;
 let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+let connectionStatus: ConnectionStatus = "connecting";
 const topicListeners = new Map<string, Set<TopicListener>>();
+const connectionListeners = new Set<ConnectionListener>();
 const pendingWidgetSubscriptions = new Set<string>();
 
+function setConnectionStatus(status: ConnectionStatus): void {
+  connectionStatus = status;
+  for (const listener of connectionListeners) listener(status);
+}
+
 function getSocketUrl(): string {
   const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
   return `${protocol}//${window.location.host}/ws`;
@@ -27,6 +36,7 @@ function getSocketUrl(): string {
 
 function scheduleReconnect(): void {
   if (reconnectTimer || refCount === 0) return;
+  setConnectionStatus("reconnecting");
   const delay = Math.min(30_000, 1_000 * 2 ** reconnectAttempts);
   reconnectAttempts += 1;
   reconnectTimer = setTimeout(() => {
@@ -45,6 +55,7 @@ function ensureSocket(): WebSocket {
 
   socket.addEventListener("open", () => {
     reconnectAttempts = 0;
+    setConnectionStatus("connected");
     for (const widgetId of pendingWidgetSubscriptions) {
       socket.send(JSON.stringify({ action: "subscribe", widgetId }));
     }
@@ -134,3 +145,65 @@ export function useConfigSubscription(initial: Config): Config {
 
   return config;
 }
+
+export function useConnectionStatus(): ConnectionStatus {
+  const [status, setStatus] = useState<ConnectionStatus>(connectionStatus);
+
+  useEffect(() => {
+    refCount += 1;
+    // ensureSocket() can synchronously open a connection another component
+    // already established, so the module-level status may have moved past
+    // what this hook's initial useState captured - reconcile once before
+    // subscribing to future changes.
+    ensureSocket();
+    connectionListeners.add(setStatus);
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setStatus(connectionStatus);
+
+    return () => {
+      refCount -= 1;
+      connectionListeners.delete(setStatus);
+    };
+  }, []);
+
+  return status;
+}
+
+export interface ConfigToast {
+  id: number;
+  tone: "ok" | "error";
+  message: string;
+}
+
+let toastCounter = 0;
+
+export function useConfigToasts(): ConfigToast[] {
+  const [toasts, setToasts] = useState<ConfigToast[]>([]);
+
+  useEffect(() => {
+    refCount += 1;
+    ensureSocket();
+
+    const removeListener = addTopicListener("config", (envelope) => {
+      let toast: Omit<ConfigToast, "id"> | null = null;
+      if (envelope.type === "config:update") {
+        toast = { tone: "ok", message: "config.yml reloaded" };
+      } else if (envelope.type === "config:error") {
+        toast = { tone: "error", message: "config.yml has an error — showing last valid config" };
+      }
+      if (!toast) return;
+
+      toastCounter += 1;
+      const id = toastCounter;
+      setToasts((prev) => [...prev, { ...toast!, id }]);
+      setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 4000);
+    });
+
+    return () => {
+      refCount -= 1;
+      removeListener();
+    };
+  }, []);
+
+  return toasts;
+}