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

@@ -1,18 +1,21 @@
-export function PulseMark() {
+export function PulseMark({ size = 30 }: { size?: number }) {
   return (
-    <svg
-      width="30"
-      height="16"
-      viewBox="0 0 60 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      className="text-accent"
-    >
-      <path
-        d="M0 12H11L15 5L20 19L24 12H33L37 8L41 12H60"
-        stroke="currentColor"
-        strokeWidth="2.5"
+    <svg width={size} height={size} viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <rect
+        x="1"
+        y="1"
+        width="28"
+        height="28"
+        rx="8"
+        fill="var(--pn-surface-raised)"
+        stroke="color-mix(in srgb, var(--pn-accent) 45%, transparent)"
+      />
+      <circle cx="15" cy="15" r="8" stroke="var(--pn-accent)" strokeWidth="1.5" />
+      <polyline
+        points="8,15 12,15 14,9 17,21 19,15 22,15"
+        fill="none"
+        stroke="var(--pn-accent)"
+        strokeWidth="1.6"
         strokeLinecap="round"
         strokeLinejoin="round"
       />