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

@@ -1,4 +1,6 @@
+import { ArrowUpRight } from "@phosphor-icons/react/ssr";
 import type { Widget } from "@/lib/config/schema";
+import { PN_CARD_CLASS } from "@/components/widgets/WidgetCard";
 
 type BookmarkWidget = Extract<Widget, { type: "bookmark" }>;
 
@@ -8,12 +10,14 @@ export function BookmarkWidget({ widget }: { widget: BookmarkWidget }) {
       href={widget.href}
       target="_blank"
       rel="noreferrer"
-      className="flex flex-col gap-1 rounded-[var(--radius-widget)] border border-border bg-surface p-4 transition-colors hover:border-accent"
+      className={`${PN_CARD_CLASS} text-inherit no-underline`}
+      style={{ gridColumn: "span 3" }}
     >
-      <span className="text-sm font-medium text-fg">{widget.name}</span>
-      {widget.description && (
-        <span className="text-xs text-fg-muted">{widget.description}</span>
-      )}
+      <div className="flex items-center gap-2">
+        <span className="flex-1 text-[15px] font-medium text-fg">{widget.name}</span>
+        <ArrowUpRight size={16} className="text-accent" aria-hidden />
+      </div>
+      {widget.description && <span className="text-xs text-fg-muted">{widget.description}</span>}
     </a>
   );
 }