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/widgets/system/Widget.tsx

@@ -3,6 +3,8 @@
 import type { Widget } from "@/lib/config/schema";
 import { useWidgetSubscription } from "@/lib/ws/client";
 import { SkeletonLines } from "@/components/widgets/Skeleton";
+import { WidgetCard } from "@/components/widgets/WidgetCard";
+import { MetricBar } from "@/components/widgets/MetricBar";
 import { formatBytes } from "@/lib/format";
 
 type SystemWidget = Extract<Widget, { type: "system" }>;
@@ -11,51 +13,39 @@ function usagePercent(used: number, total: number): number {
   return total > 0 ? Math.min(100, (used / total) * 100) : 0;
 }
 
-function UsageBar({ label, percent, detail }: { label: string; percent: number; detail: string }) {
-  return (
-    <div className="flex flex-col gap-1">
-      <div className="flex items-center justify-between text-xs text-fg-muted">
-        <span>{label}</span>
-        <span className="font-mono tabular-nums text-fg">{detail}</span>
-      </div>
-      <div className="h-1.5 w-full overflow-hidden rounded-full bg-surface-raised">
-        <div className="h-full rounded-full bg-accent" style={{ width: `${percent}%` }} />
-      </div>
-    </div>
-  );
-}
-
 export function SystemWidget({ widget, widgetId }: { widget: SystemWidget; widgetId: string }) {
   const result = useWidgetSubscription(widgetId);
   const data = result?.type === "system" ? result.data : null;
   const errorMessage = result?.type === "error" ? result.message : null;
 
   return (
-    <div className="flex flex-col gap-3 rounded-[var(--radius-widget)] border border-border bg-surface p-4 sm:col-span-2">
-      <span className="text-sm font-medium text-fg">{widget.name}</span>
+    <WidgetCard span={5} rowSpan={2}>
+      <div className="text-[10px] tracking-[0.1em] text-accent uppercase">System</div>
+      <span className="text-[15px] font-medium text-fg">{widget.name}</span>
       {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
       {!result && !errorMessage && <SkeletonLines count={3} />}
       {data && (
-        <div className="flex flex-col gap-2">
-          <UsageBar label="CPU" percent={data.cpuPercent} detail={`${data.cpuPercent.toFixed(1)}%`} />
-          <UsageBar
-            label="Memory"
-            percent={usagePercent(data.memUsedBytes, data.memTotalBytes)}
-            detail={`${formatBytes(data.memUsedBytes)} / ${formatBytes(data.memTotalBytes)}`}
-          />
-          <UsageBar
-            label="Disk"
-            percent={usagePercent(data.diskUsedBytes, data.diskTotalBytes)}
-            detail={`${formatBytes(data.diskUsedBytes)} / ${formatBytes(data.diskTotalBytes)}`}
-          />
-          <div className="flex items-center justify-between text-xs text-fg-muted">
-            <span>Network</span>
+        <div className="mt-1 flex flex-1 flex-col justify-between gap-3">
+          <div className="flex flex-col gap-3">
+            <MetricBar label="CPU" percent={data.cpuPercent} detail={`${data.cpuPercent.toFixed(1)}%`} />
+            <MetricBar
+              label="Memory"
+              percent={usagePercent(data.memUsedBytes, data.memTotalBytes)}
+              detail={`${formatBytes(data.memUsedBytes)} / ${formatBytes(data.memTotalBytes)}`}
+            />
+            <MetricBar
+              label="Disk"
+              percent={usagePercent(data.diskUsedBytes, data.diskTotalBytes)}
+              detail={`${formatBytes(data.diskUsedBytes)} / ${formatBytes(data.diskTotalBytes)}`}
+            />
+          </div>
+          <div className="flex items-center gap-1.5 text-[11px] text-fg-muted">
             <span className="font-mono tabular-nums text-fg">
               ↓ {formatBytes(data.netRxBytesPerSec)}/s · ↑ {formatBytes(data.netTxBytesPerSec)}/s
             </span>
           </div>
         </div>
       )}
-    </div>
+    </WidgetCard>
   );
 }