feat(app): UI parity with Pencil mockup — top bar, panel cards, sidebar/event-center polish

Top bar (breadcrumb + actions + account), rounded panel cards with active
accent + rich headers, sidebar count pills/collapsible groups/daemon footer,
preset chips + scrollback pill, Event Center tabs + external-notify footer,
JetBrains Mono + Inter via @fontsource, shared theme tokens. Backend-absent
pieces are mocked (search, zoom, uptime, channels) pending SP1–SP5.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/src/theme.ts

@@ -0,0 +1,36 @@
+import type { SurfaceState } from "./layoutTypes";
+
+/** Design tokens — mirror of DOCS/space-sh.pen variables. Single source for the UI. */
+export const COLORS = {
+  accent: "#4C8DFF",
+  bgApp: "#0E1116",
+  bgElevated: "#1A2029",
+  bgHover: "#222A35",
+  bgPanel: "#0A0D12",
+  bgSidebar: "#13171F",
+  borderStrong: "#323C49",
+  borderSubtle: "#232A33",
+  textPrimary: "#E6EDF3",
+  textSecondary: "#8B97A6",
+  textMuted: "#5A6573",
+  stWork: "#4C8DFF",
+  stWait: "#F2B84B",
+  stDone: "#3FB950",
+  stError: "#F4544E",
+  stIdle: "#5A6573",
+} as const;
+
+export const FONT = {
+  ui: "Inter, system-ui, sans-serif",
+  mono: "'JetBrains Mono Variable', 'JetBrains Mono', monospace",
+} as const;
+
+/** Status color by surface state, plus the stopped pseudo-state. */
+export const STATE_COLOR: Record<SurfaceState | "stopped", string> = {
+  work: COLORS.stWork,
+  wait: COLORS.stWait,
+  done: COLORS.stDone,
+  error: COLORS.stError,
+  idle: COLORS.stIdle,
+  stopped: COLORS.stIdle,
+};