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/ThemeToggle.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { MoonStars, Sun } from "@phosphor-icons/react/ssr";
 
 const STORAGE_KEY = "pulsenode-theme";
 
@@ -34,17 +35,19 @@ export function ThemeToggle() {
   }
 
   if (theme === null) {
-    return <div className="h-7 w-16 rounded-[var(--radius-widget)] border border-border bg-surface" />;
+    return <div className="h-9 w-9 rounded-md border border-border bg-surface" />;
   }
 
   return (
     <button
       type="button"
       onClick={toggle}
-      className="rounded-[var(--radius-widget)] border border-border bg-surface px-3 py-1.5 text-xs text-fg-muted transition-colors hover:text-fg"
+      className="flex h-9 w-9 items-center justify-center rounded-md border border-border bg-surface text-fg-muted transition-colors hover:text-fg"
       aria-label="Toggle color theme"
     >
-      {theme === "light" ? "Light" : "Dark"}
+      <span key={theme} className="pn-spin-in flex">
+        {theme === "dark" ? <MoonStars size={17} /> : <Sun size={17} />}
+      </span>
     </button>
   );
 }