feat: Brain tab — neural network visualization (neurons, pulses, connecting thoughts)

[vivekchand]

Brain Tab — Neural Network Visualization

Current State

The Brain tab currently shows a linear event stream (list of tool calls, text events, thinking blocks) with a density bar chart at the top and filter pills per agent. Functional but hard to read at a glance — it looks like a log, not a mind.

Vision

Transform the Brain tab into an animated neural network visualization that makes AI thinking feel alive and intuitive.

Core idea: Each active thought/event is a neuron. Connections between related events (same session, tool call chains, reasoning → action) are synapses. Activity pulses along the connections in real time.

---

Visual Design

Nodes (neurons)

• Each agent/session = a large central neuron (glowing orb, color-coded per agent)
• Each event type = a smaller satellite neuron orbiting its parent:
  • 🔵 Tool calls — medium size, labeled with tool name
  • 🟣 Thinking/reasoning — smaller, slightly transparent, pulsing
  • 🟡 Text output — warm color, larger when long response
  • 🔴 Errors — red, visually distinct
  • ⚪ Token updates — tiny, fast-moving

Connections (synapses)

• Lines between neurons show event flow: reasoning → tool call → result
• Line thickness = token weight / importance
• Animated dots travel along the line (like electrical pulses) to show direction and recency

Animation

• New events: neuron fades in from center with a ripple effect
• Active thinking: center neuron breathes (slow scale pulse)
• Tool in progress: connection line glows and pulses faster
• Completed chains: connection fades to 50% opacity (history)
• Idle: slow ambient pulse on all neurons

Layout

• Force-directed graph — neurons self-organize by connection strength
• Main session in center, sub-agents orbit around it
• Pan + zoom to explore
• Click a neuron to expand detail panel on the right (shows full event content)

---

UI Structure

┌─────────────────────────────────────────────────────┐
│  [Filter pills: main · agent:abc123 · All]    [Live] │
├─────────────────────────────────────────────────────┤
│                                                     │
│         ○ ─── ● ─── ○                              │
│        /    (main)    \                             │
│       ○               ○──○                         │
│      sub-agent     tool chain                       │
│                                                     │
│  [Pulse animation running]                          │
├─────────────────────────────────────────────────────┤
│  Detail panel (on click): full event content        │
└─────────────────────────────────────────────────────┘

Implementation Notes

• Use D3.js force simulation or plain Canvas API (no heavy deps — dashboard.py is self-contained)
• Event data already available via /api/brain-history and /api/brain-stream (SSE)
• SSE stream drives live updates — new events add neurons in real time
• Fallback to current list view for users who prefer it (toggle button: "Graph / List")
• Should work without WebGL — pure SVG or Canvas 2D

Acceptance Criteria

• Force-directed graph renders with real data from /api/brain-history
• New events animate in via SSE stream (no page reload)
• Pulse animation runs on active connections
• Click any neuron to see full event detail
• Filter pills still work (hide/show by agent)
• Toggle between Graph view and current List view
• Renders smoothly at 60fps with up to 200 nodes
• Works on dark background (existing dark theme)