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.

app/globals.css

@@ -1,44 +1,43 @@
 @import "tailwindcss";
 
 :root {
-  --pn-bg: #0a0e13;
-  --pn-surface: #10151c;
-  --pn-surface-raised: #161d27;
-  --pn-border: #232b38;
-  --pn-fg: #e8ecf1;
-  --pn-fg-muted: #7c8798;
-  --pn-accent: #3ee8a8;
-  --pn-radius: 0.75rem;
-  --pn-status-up: #3ee8a8;
+  --pn-bg: #1a1d1f;
+  --pn-surface: #24282b;
+  --pn-surface-raised: #2b3033;
+  --pn-fg: #f2f4f5;
+  --pn-fg-muted: color-mix(in srgb, var(--pn-fg) 55%, transparent);
+  --pn-border: color-mix(in srgb, var(--pn-fg) 14%, transparent);
+  --pn-accent: #5ee08c;
+  --pn-status-up: #5ee08c;
   --pn-status-down: #ff5f6d;
   --pn-status-degraded: #ffb84c;
+  --pn-shadow-sm: 0 0 0 1px var(--pn-border);
+  --pn-shadow-md: 0 0 0 1px var(--pn-border), 0 6px 18px rgba(0, 0, 0, 0.45);
 }
 
 :root[data-theme="light"] {
-  --pn-bg: #f6f7f5;
-  --pn-surface: #ffffff;
-  --pn-surface-raised: #eef1ef;
-  --pn-border: #dde1de;
-  --pn-fg: #12181a;
-  --pn-fg-muted: #5c6b66;
-  --pn-accent: #0e9f6e;
-  --pn-status-up: #0e9f6e;
+  --pn-bg: #e9ebec;
+  --pn-surface: #f6f7f7;
+  --pn-surface-raised: #eceded;
+  --pn-fg: #1e2224;
+  --pn-accent: #339a5a;
+  --pn-status-up: #339a5a;
   --pn-status-down: #dc2626;
   --pn-status-degraded: #d97706;
+  --pn-shadow-md: 0 0 0 1px var(--pn-border), 0 6px 18px rgba(30, 32, 45, 0.1);
 }
 
 @media (prefers-color-scheme: light) {
   :root:not([data-theme]) {
-    --pn-bg: #f6f7f5;
-    --pn-surface: #ffffff;
-    --pn-surface-raised: #eef1ef;
-    --pn-border: #dde1de;
-    --pn-fg: #12181a;
-    --pn-fg-muted: #5c6b66;
-    --pn-accent: #0e9f6e;
-    --pn-status-up: #0e9f6e;
+    --pn-bg: #e9ebec;
+    --pn-surface: #f6f7f7;
+    --pn-surface-raised: #eceded;
+    --pn-fg: #1e2224;
+    --pn-accent: #339a5a;
+    --pn-status-up: #339a5a;
     --pn-status-down: #dc2626;
     --pn-status-degraded: #d97706;
+    --pn-shadow-md: 0 0 0 1px var(--pn-border), 0 6px 18px rgba(30, 32, 45, 0.1);
   }
 }
 
@@ -53,7 +52,8 @@
   --color-status-up: var(--pn-status-up);
   --color-status-down: var(--pn-status-down);
   --color-status-degraded: var(--pn-status-degraded);
-  --radius-widget: var(--pn-radius);
+  --radius-md: 0.625rem;
+  --radius-lg: 1rem;
   --font-sans: var(--font-plex-sans);
   --font-mono: var(--font-plex-mono);
   --font-display: var(--font-space-grotesk);
@@ -64,6 +64,62 @@ body {
   color: var(--pn-fg);
 }
 
+/* Rules fade to transparent at both ends instead of stopping cleanly. */
+.pn-hr {
+  height: 1px;
+  flex: 1;
+  background: linear-gradient(
+    to right,
+    transparent,
+    var(--pn-border) 32px,
+    var(--pn-border) calc(100% - 32px),
+    transparent
+  );
+}
+
+.pn-card {
+  transition:
+    box-shadow 0.18s ease,
+    transform 0.18s ease,
+    background 0.3s ease,
+    border-color 0.3s ease;
+  box-shadow: var(--pn-shadow-sm);
+}
+.pn-card:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    var(--pn-shadow-md),
+    0 0 0 1px color-mix(in srgb, var(--pn-accent) 35%, transparent);
+}
+
+@keyframes pn-toast-in {
+  from {
+    transform: translateY(12px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.pn-toast {
+  animation: pn-toast-in 0.28s ease;
+}
+
+@keyframes pn-spin-in {
+  from {
+    transform: rotate(-60deg) scale(0.6);
+    opacity: 0;
+  }
+  to {
+    transform: rotate(0) scale(1);
+    opacity: 1;
+  }
+}
+.pn-spin-in {
+  animation: pn-spin-in 0.35s ease;
+}
+
 @keyframes pulse-glow {
   0%,
   100% {
@@ -73,13 +129,32 @@ body {
     box-shadow: 0 0 0 4px color-mix(in srgb, var(--pn-status-up) 0%, transparent);
   }
 }
-
 .status-pulse {
   animation: pulse-glow 2s ease-in-out infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .status-pulse {
+  .status-pulse,
+  .pn-toast,
+  .pn-spin-in {
     animation: none;
   }
 }
+
+.pn-bento {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+@media (max-width: 860px) {
+  .pn-bento {
+    grid-template-columns: repeat(6, 1fr) !important;
+  }
+  .pn-bento > * {
+    grid-column: 1 / -1 !important;
+    grid-row: auto !important;
+  }
+  .pn-live-label {
+    display: none !important;
+  }
+}

app/icon.svg

@@ -0,0 +1,12 @@
+<svg width="32" height="32" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1" y="1" width="28" height="28" rx="8" fill="#2b3033" stroke="rgba(94,224,140,0.45)" />
+  <circle cx="15" cy="15" r="8" stroke="#5ee08c" stroke-width="1.5" />
+  <polyline
+    points="8,15 12,15 14,9 17,21 19,15 22,15"
+    fill="none"
+    stroke="#5ee08c"
+    stroke-width="1.6"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

app/page.tsx

@@ -12,8 +12,8 @@ export default function Home() {
     const message = err instanceof ConfigError ? err.message : "Unknown configuration error";
     return (
       <main className="mx-auto flex max-w-2xl flex-col gap-4 px-6 py-16">
-        <h1 className="text-lg font-semibold text-status-down">Configuration Error</h1>
-        <pre className="rounded-[var(--radius-widget)] border border-status-down bg-surface p-4 text-sm whitespace-pre-wrap text-fg">
+        <h1 className="font-display text-lg font-semibold text-status-down">Configuration Error</h1>
+        <pre className="rounded-lg border border-status-down bg-surface p-4 text-sm whitespace-pre-wrap text-fg">
           {message}
         </pre>
       </main>