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

@@ -1,8 +1,10 @@
 "use client";
 
+import { Lock } from "@phosphor-icons/react/ssr";
 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";
 
 type TraefikWidget = Extract<Widget, { type: "traefik" }>;
 
@@ -12,11 +14,11 @@ export function TraefikWidget({ widget, widgetId }: { widget: TraefikWidget; wid
   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">
+    <WidgetCard span={4}>
       <div className="flex items-center justify-between">
-        <span className="text-sm font-medium text-fg">{widget.name}</span>
+        <span className="text-[15px] font-medium text-fg">{widget.name}</span>
         {data && (
-          <span className="font-mono text-xs tabular-nums text-fg-muted">
+          <span className="font-mono text-[11px] tabular-nums text-fg-muted">
             {data.entrypoints.map((ep) => ep.address).join(" · ") || `${data.entrypoints.length} entrypoints`}
           </span>
         )}
@@ -24,27 +26,28 @@ export function TraefikWidget({ widget, widgetId }: { widget: TraefikWidget; wid
       {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
       {!result && !errorMessage && <SkeletonLines count={3} />}
       {data && (
-        <div className="flex flex-col gap-1">
+        <div className="flex flex-col">
           {data.routers.map((router) => (
-            <div key={router.name} className="flex items-center justify-between gap-2 text-xs">
+            <div key={router.name} className="flex items-center justify-between gap-2 border-t border-border py-1.5 text-[13px] first:border-t-0">
               <span className="truncate text-fg" title={router.rule}>
                 {router.name.replace(/@.*$/, "")}
               </span>
-              <span className="flex items-center gap-1 text-fg-muted">
-                {router.tls && <span title="TLS enabled">🔒</span>}
+              <span className="flex items-center gap-1.5 text-[11px] text-fg-muted">
+                {router.tls && <Lock size={11} aria-label="TLS enabled" />}
                 <span
-                  className={router.status === "enabled" ? "text-status-up" : "text-status-down"}
+                  className={`flex items-center gap-1.5 ${router.status === "enabled" ? "text-status-up" : "text-status-down"}`}
                 >
+                  <span className="h-1.5 w-1.5 rounded-full bg-current" />
                   {router.status}
                 </span>
               </span>
             </div>
           ))}
-          <span className="pt-1 text-xs text-fg-muted">
+          <span className="pt-2 text-[11px] text-fg-muted">
             <span className="font-mono tabular-nums">{data.middlewaresCount}</span> middlewares
           </span>
         </div>
       )}
-    </div>
+    </WidgetCard>
   );
 }