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

@@ -4,6 +4,8 @@ import type { Widget } from "@/lib/config/schema";
 import { useWidgetSubscription } from "@/lib/ws/client";
 import { StatusDot } from "@/components/widgets/StatusDot";
 import { SkeletonLines } from "@/components/widgets/Skeleton";
+import { WidgetCard } from "@/components/widgets/WidgetCard";
+import { MetricBar } from "@/components/widgets/MetricBar";
 import { formatBytes, formatUptime } from "@/lib/format";
 
 type DockerWidget = Extract<Widget, { type: "docker" }>;
@@ -12,54 +14,44 @@ export function DockerWidget({ widget, widgetId }: { widget: DockerWidget; widge
   const result = useWidgetSubscription(widgetId);
   const data = result?.type === "docker" ? result.data : null;
   const errorMessage = result?.type === "error" ? result.message : null;
+  const memPercent = data?.memUsageBytes != null && data.memLimitBytes ? (data.memUsageBytes / data.memLimitBytes) * 100 : null;
 
   return (
-    <div className="flex flex-col gap-2 rounded-[var(--radius-widget)] border border-border bg-surface p-4">
+    <WidgetCard span={4}>
       <div className="flex items-center justify-between gap-2">
         {widget.href ? (
           <a
             href={widget.href}
             target="_blank"
             rel="noreferrer"
-            className="text-sm font-medium text-fg hover:text-accent"
+            className="text-[15px] font-medium text-fg hover:text-accent"
           >
             {widget.name}
           </a>
         ) : (
-          <span className="text-sm font-medium text-fg">{widget.name}</span>
+          <span className="text-[15px] font-medium text-fg">{widget.name}</span>
         )}
         <StatusDot status={data?.status} health={data?.health} />
       </div>
       {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
       {!result && !errorMessage && <SkeletonLines />}
       {data && (
-        <dl className="flex flex-col gap-1 text-xs text-fg-muted">
-          {data.uptimeSeconds !== null && (
-            <div>
-              Uptime: <span className="font-mono tabular-nums text-fg">{formatUptime(data.uptimeSeconds)}</span>
+        <>
+          {widget.showStats && data.cpuPercent !== null && memPercent !== null && (
+            <div className="mt-0.5 flex gap-4">
+              <MetricBar label="CPU" percent={data.cpuPercent} detail={`${data.cpuPercent.toFixed(1)}%`} />
+              <MetricBar label="MEM" percent={memPercent} detail={`${memPercent.toFixed(0)}%`} />
             </div>
           )}
-          {widget.showStats && data.cpuPercent !== null && (
-            <div>
-              CPU: <span className="font-mono tabular-nums text-fg">{data.cpuPercent.toFixed(1)}%</span>
-            </div>
-          )}
-          {widget.showStats && data.memUsageBytes !== null && (
-            <div>
-              Mem:{" "}
-              <span className="font-mono tabular-nums text-fg">
-                {formatBytes(data.memUsageBytes)}
-                {data.memLimitBytes ? ` / ${formatBytes(data.memLimitBytes)}` : ""}
-              </span>
-            </div>
-          )}
-          {data.restartCount > 0 && (
-            <div>
-              Restarts: <span className="font-mono tabular-nums text-fg">{data.restartCount}</span>
-            </div>
-          )}
-        </dl>
+          <div className="flex items-center gap-3 text-[11px] text-fg-muted">
+            {data.uptimeSeconds !== null && <span>up {formatUptime(data.uptimeSeconds)}</span>}
+            {widget.showStats && data.memUsageBytes !== null && memPercent === null && (
+              <span className="font-mono tabular-nums">{formatBytes(data.memUsageBytes)}</span>
+            )}
+            {data.restartCount > 0 && <span>{data.restartCount} restarts</span>}
+          </div>
+        </>
       )}
-    </div>
+    </WidgetCard>
   );
 }