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/PresetPicker.tsx

@@ -11,20 +11,25 @@ export const PRESETS: { id: string; label: string; slots: number }[] = [
   { id: "2x4", label: "2×4", slots: 8 },
 ];
 
+import { COLORS, FONT } from "./theme";
+
 export function PresetPicker({ selected, onSelect }: { selected: string; onSelect: (id: string) => void }) {
   return (
-    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
-      {PRESETS.map((p) => (
-        <button key={p.id} onClick={() => onSelect(p.id)}
-          style={{
-            padding: "6px 10px", borderRadius: 6, fontFamily: "monospace", fontSize: 12,
-            background: p.id === selected ? "#1A2029" : "transparent",
-            border: p.id === selected ? "1px solid #4C8DFF" : "1px solid #232A33",
-            color: p.id === selected ? "#E6EDF3" : "#8B97A6", cursor: "pointer",
-          }}>
-          {p.label}
-        </button>
-      ))}
+    <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
+      {PRESETS.map((p) => {
+        const on = p.id === selected;
+        return (
+          <button key={p.id} onClick={() => onSelect(p.id)}
+            style={{
+              display: "flex", alignItems: "center", height: 24, padding: "0 8px", borderRadius: 6, fontFamily: FONT.mono, fontSize: 12,
+              background: on ? COLORS.bgElevated : "transparent",
+              border: `1px solid ${on ? COLORS.borderStrong : "transparent"}`,
+              color: on ? COLORS.textPrimary : COLORS.textSecondary,
+            }}>
+            {p.label}
+          </button>
+        );
+      })}
     </div>
   );
 }