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

@@ -0,0 +1,23 @@
+import { Search } from "lucide-react";
+import { COLORS, FONT } from "./theme";
+import { PresetPicker } from "./PresetPicker";
+
+/** Top-of-grid toolbar: layout presets on the left, scrollback search on the right (search is a mock). */
+export function CenterToolbar({ selected, onSelect }: { selected: string; onSelect: (id: string) => void }) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "0 12px", height: 46, borderBottom: `1px solid ${COLORS.borderSubtle}` }}>
+      <PresetPicker selected={selected} onSelect={onSelect} />
+      <div style={{ flex: 1 }} />
+      <div
+        title="Search scrollback (mock)"
+        style={{
+          display: "flex", alignItems: "center", gap: 6, height: 24, padding: "0 8px", borderRadius: 6,
+          background: COLORS.bgPanel, border: `1px solid ${COLORS.borderSubtle}`, cursor: "pointer",
+        }}>
+        <Search size={12} color={COLORS.textMuted} />
+        <span style={{ fontFamily: FONT.ui, fontSize: 11, color: COLORS.textMuted }}>Search scrollback</span>
+        <span style={{ fontFamily: FONT.mono, fontSize: 11, color: COLORS.textMuted }}>⌘F</span>
+      </div>
+    </div>
+  );
+}