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.

components/layout/Dashboard.tsx

@@ -1,28 +1,48 @@
 "use client";
 
+import { Broadcast } from "@phosphor-icons/react/ssr";
 import type { Config } from "@/lib/config/schema";
-import { useConfigSubscription } from "@/lib/ws/client";
+import { useConfigSubscription, useConnectionStatus } from "@/lib/ws/client";
 import { GroupSection } from "./GroupSection";
 import { ThemeToggle } from "./ThemeToggle";
 import { PulseMark } from "./PulseMark";
+import { ToastStack } from "./Toast";
+
+function LiveIndicator() {
+  const status = useConnectionStatus();
+  const label = status === "connected" ? "live" : status === "reconnecting" ? "reconnecting…" : "connecting…";
+
+  return (
+    <div className="pn-live-label flex items-center gap-1.5 text-xs text-fg-muted">
+      <Broadcast size={15} className={status === "connected" ? "text-accent" : "text-status-degraded"} aria-hidden />
+      <span>{label}</span>
+    </div>
+  );
+}
 
 export function Dashboard({ config: initialConfig }: { config: Config }) {
   const config = useConfigSubscription(initialConfig);
 
   return (
-    <main className="mx-auto flex max-w-6xl flex-col gap-8 px-6 py-10">
-      <header className="flex items-center justify-between gap-4">
-        <div className="flex items-center gap-3">
-          <PulseMark />
-          <h1 className="font-display text-lg font-semibold tracking-tight text-fg">
-            {config.settings.title}
-          </h1>
+    <div className="relative min-h-screen">
+      <div className="sticky top-0 z-20 border-b border-border bg-bg/70 backdrop-blur-lg">
+        <div className="mx-auto flex max-w-6xl items-center gap-4 px-6 py-3">
+          <div className="mr-auto flex items-center gap-2.5">
+            <PulseMark size={30} />
+            <span className="font-display text-lg font-semibold tracking-tight text-fg">
+              {config.settings.title}
+            </span>
+          </div>
+          <LiveIndicator />
+          <ThemeToggle />
         </div>
-        <ThemeToggle />
-      </header>
-      {config.groups.map((group, groupIndex) => (
-        <GroupSection key={group.name} group={group} groupIndex={groupIndex} />
-      ))}
-    </main>
+      </div>
+      <main className="mx-auto max-w-6xl px-6 pt-2 pb-20">
+        {config.groups.map((group, groupIndex) => (
+          <GroupSection key={group.name} group={group} groupIndex={groupIndex} />
+        ))}
+      </main>
+      <ToastStack />
+    </div>
   );
 }