From c8ae97856dc9c47657d6a44bb289070445f05d67 Mon Sep 17 00:00:00 2001
From: Amit Kolton <amit.ko@thing02.com>
Date: Fri, 3 Apr 2026 14:59:58 +0300
Subject: [PATCH 01/13] docs: add CAR Brain Simulator design spec

Complete design specification for reconstructing MindGraph AI into a
brain-like simulator implementing the Clustered Associative Recall
(CAR) Protocol. Covers data model, 3D visual language (Three.js),
13-step retrieval animation, interaction design, and Claude
ingestion manual.
---
 .../2026-04-03-car-brain-simulator-design.md  | 478 ++++++++++++++++++
 1 file changed, 478 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-04-03-car-brain-simulator-design.md

diff --git a/docs/superpowers/specs/2026-04-03-car-brain-simulator-design.md b/docs/superpowers/specs/2026-04-03-car-brain-simulator-design.md
new file mode 100644
index 0000000..a7beeab
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-03-car-brain-simulator-design.md
@@ -0,0 +1,478 @@
+# CAR Brain Simulator — Design Spec
+
+**Date:** 2026-04-03
+**Status:** Approved
+**Repo:** amitko-pixel/carmindgraph (fork of chrisrobison/mindgraph)
+
+## Overview
+
+Reconstruct the MindGraph AI app into a visual brain simulator implementing the
+Clustered Associative Recall (CAR) Protocol. The app becomes a working CAR engine
+with a 3D neural visualization — you add memories, ask questions, and watch the
+brain process them through the full 13-step retrieval sequence.
+
+### What it is
+
+- A CAR Protocol workbench + living memory system
+- Domain-agnostic: ingests any knowledge (code, business, research)
+- Three input modes: text memory input, query panel, JSON file import
+- Ships with a Claude instruction manual for full project ingestion
+- Visual: Neural dark 3D aesthetic using Three.js for the graph canvas
+
+### What it is NOT
+
+- Not a static visualization or educational demo
+- Not a backend service — runs entirely in the browser
+- Not a chat interface — it's a graph workbench with memory processing
+
+## Architecture
+
+### Approach: Hybrid (Three.js Canvas + DOM Panels)
+
+Three.js renders the 3D brain visualization canvas. All other UI (toolbar, inspector,
+input panels, activity log) stays as vanilla Web Components. The PAN event bus bridges
+both worlds.
+
+**What stays:**
+- PAN event bus (`js/core/pan.js`)
+- Store architecture (graph-store, ui-store, persistence-store)
+- Web Components for all panels
+- localStorage persistence with autosave
+- Undo/redo (snapshot-based)
+
+**What changes:**
+- `graph-canvas` → Three.js WebGL scene (replaces DOM/SVG rendering)
+- Node types → CAR protocol entities (chunk, cluster, question, pattern, trigger)
+- Edge types → CAR relationships (linked_to, amends, contradicts, promotes_to, etc.)
+- Inspector tabs → CAR metadata views
+- Bottom panel tabs → Retrieval log, Consolidation, Contradictions, Questions, Metamemory
+- Runtime → CAR engine (retrieval, scoring, consolidation) replaces mock-agent-runtime
+- Seed data → Spain margins demo from the protocol
+- New dependency: Three.js via CDN (`<script>` tag, ~150KB)
+
+### App Layout (4-panel, preserved)
+
+```
++--[TOP TOOLBAR]-----------------------------------------------+
+| [Brain Logo] [CAR Brain] | [Memory ___] [Query ___] |        |
+| [Play] [Step] [Reset] | [13-step dots] | [Zoom]             |
++--[PALETTE]--+--[3D CANVAS]------------------+--[INSPECTOR]---+
+|  Select     |                                |  Overview      |
+|  Pan/Orbit  |     THREE.JS WEBGL SCENE       |  Metadata      |
+|  Add Chunk  |     (orbital camera,           |  Retrieval     |
+|  Add Link   |      depth planes,             |  Scoring       |
+|  Add Q      |      particle trails,          |  Questions     |
+|  Trigger    |      bloom post-processing)    |  Timeline      |
++-------------+--------------------------------+----------------+
++--[BOTTOM PANEL]----------------------------------------------+
+| [Retrieval Log] [Consolidation] [Contradictions] [Questions] |
+| [Metamemory]                                                 |
++--------------------------------------------------------------+
+```
+
+## Data Model
+
+### Node Types (replace existing 6)
+
+| Type | CAR Section | 3D Shape | Description |
+|------|-------------|----------|-------------|
+| `chunk` | S3.3 | Sphere | Memory chunk (Tier 1/2/3). Size = access_count. Brightness = relevance. |
+| `cluster` | S6, S12 | Translucent shell | Group of related chunks. Encloses members. |
+| `question` | S4 | Tetrahedron | Question-based retrieval key (Level 1-5). |
+| `pattern` | S11 | Octahedron | Tier 3 schema / cross-domain pattern. Permanent. |
+| `trigger` | Principle 9 | Diamond | Prospective memory trigger with conditions. |
+
+### Chunk Metadata Schema (S3.3)
+
+Every chunk carries the full CAR metadata:
+
+```javascript
+{
+  id: string,
+  content: string,
+  tier: 1 | 2 | 3,
+  timestamp: ISO8601,
+  session_id: string,
+  source: "user_stated" | "agent_generated" | "imported",
+  source_reliability: "high" | "medium" | "low",
+  participants: string[],
+  emotional_tone: string,
+  emotional_intensity: number,        // 0.0 - 1.0
+  stakes_level: "high" | "medium" | "low",
+  topic_tags: string[],
+  entity_tags: string[],
+  decision_made: boolean,
+  action_items: string[],
+  status: "open" | "resolved",
+  preceding_context_id: string | null,
+  following_context_id: string | null,
+  access_count: number,
+  last_accessed: ISO8601,
+  retrieval_cues: string[],
+  amendments: Amendment[],
+  linked_chunks: string[],
+  generated_questions: string[]
+}
+```
+
+### Question Node Schema (S4)
+
+```javascript
+{
+  id: string,
+  level: 1 | 2 | 3 | 4 | 5,  // Bare Fact → Conditional
+  question_text: string,
+  answer_text: string | null,
+  answered: boolean,
+  parent_question_id: string | null,
+  linked_chunk_ids: string[],
+  confidence: number | null
+}
+```
+
+### Trigger Node Schema (Principle 9)
+
+```javascript
+{
+  id: string,
+  content: string,
+  trigger_conditions: string[],
+  expires: ISO8601 | null,
+  fired: boolean,
+  fire_count: number
+}
+```
+
+### Pattern Node Schema (S11)
+
+```javascript
+{
+  id: string,
+  pattern: string,
+  evidence: string[],          // chunk IDs
+  confidence: number,
+  implication: string,
+  pattern_type: string,        // "causal_recurring", "correlation", etc.
+  exceptions: string[]
+}
+```
+
+### Edge Types (replace existing 9)
+
+| Type | CAR Section | Visual | Description |
+|------|-------------|--------|-------------|
+| `linked_to` | Principle 6 | Soft glow line, shimmer | Cross-link between chunks |
+| `amends` | S7.2 | Dashed arrow | Correction/amendment |
+| `contradicts` | S7.1 | Red pulsing dashed | Active contradiction |
+| `promotes_to` | S3.1 | Upward gradient arrow | Tier promotion (1→2→3) |
+| `answers` | S4.4 | Gold beam, particles Q→chunk | Question answered by chunk |
+| `decomposes_to` | S5 | Branching rays | Question → sub-questions |
+| `clusters_with` | S6 | Thin translucent tether | Chunk → cluster |
+| `preceded_by` | S3.3 | Faint timeline link | Temporal sequence |
+| `triggers` | Principle 9 | Lightning bolt pulse | Trigger → activation |
+
+### Relevance Scoring (S3.4)
+
+Calculated dynamically at retrieval time per chunk:
+
+```
+relevance = recency_weight(days_since_created)
+          * frequency_weight(access_count)
+          * emotional_weight(emotional_intensity)
+          * consequence_weight(decision_made)
+          * connection_weight(linked_chunk_count)
+          * zeigarnik_weight(status == "open" ? 1.5 : 1.0)
+```
+
+Recency follows Ebbinghaus decay, resets on each access:
+- Day 1: 1.0
+- Day 7: 0.75
+- Day 30: 0.50
+- Day 90: 0.30
+- Day 365: 0.15
+
+## 3D Visual Language
+
+### Rendering Stack
+
+Three.js via CDN. Post-processing: UnrealBloomPass for glow, optional SSAO.
+
+### Color System
+
+| Element | Hex | Usage |
+|---------|-----|-------|
+| Background | `#080c14` | Canvas deep space |
+| Tier 1 (episodes) | `#00f5ff` | Cyan — hot, recent |
+| Tier 2 (summaries) | `#7b61ff` | Electric purple — compressed |
+| Tier 3 (schemas) | `#ff2d78` | Hot pink — permanent |
+| Questions | `#ffd93d` | Gold — retrieval keys |
+| Triggers | `#ff9f1c` | Amber — prospective |
+| Clusters | `#ffffff` at 20% opacity | Translucent containment |
+| Contradiction edges | `#ff3333` | Red pulse |
+| Active retrieval | `#00f5ff` particle trail | During 13-step sequence |
+| Panel backgrounds | `#0d1117` | All side panels |
+| Panel text | `#c9d1d9` | Readable on dark |
+| Accent text | `#ffffff` | Headers, emphasis |
+
+### 3D Node Rendering
+
+| Node | Geometry | Material | Size Rule |
+|------|----------|----------|-----------|
+| Chunk T1 | SphereGeometry(1, 32, 32) | MeshStandardMaterial + emissive | Base 1.0, scales with access_count |
+| Chunk T2 | IcosahedronGeometry(1.5, 1) | MeshStandardMaterial + emissive | 1.5x base |
+| Chunk T3 | OctahedronGeometry(2.0) | MeshStandardMaterial + emissive | 2.0x, slow rotation |
+| Question | TetrahedronGeometry(0.8) | MeshStandardMaterial + emissive | 0.8x. Size scales with level (L1 small → L5 large) |
+| Cluster | Custom shell mesh | MeshBasicMaterial transparent | Encloses member nodes |
+| Trigger | Two ConeGeometry back-to-back | MeshStandardMaterial + emissive | 0.6x, sharp flash on match |
+
+### Node Brightness
+
+`emissiveIntensity = relevance_score * (isSelected ? 2.0 : 1.0)`
+
+Hot memories (recently accessed): full emissive.
+Cold memories (low access, decaying): emissive at 30%.
+
+### Edge Rendering
+
+All edges: THREE.Line or THREE.TubeGeometry with emissive material.
+Active retrieval edges: particle system (THREE.Points) flowing along the path.
+Contradiction edges: color `#ff3333`, opacity oscillates 0.3-0.8.
+
+### Depth Planes
+
+| Plane | Z Position | Contents |
+|-------|-----------|----------|
+| Front | z = 0 | Active retrieval, query, currently processing |
+| Mid | z = -200 | Tier 1 raw episodes |
+| Back | z = -400 | Tier 2 compressed summaries |
+| Deep | z = -600 | Tier 3 schemas/patterns |
+
+### Camera
+
+- Default: orbital view (OrbitControls)
+- Scroll: zoom in/out
+- Click-drag empty space: orbit
+- Auto-focus: when a node is selected, camera smoothly lerps to face it
+- Retrieval mode: camera follows the active retrieval path
+
+### Post-Processing
+
+- UnrealBloomPass: threshold 0.8, strength 0.6, radius 0.4
+- Optional fog: `scene.fog = new THREE.FogExp2(0x080c14, 0.0015)` for depth fade
+
+## Interaction Design
+
+### Input Modes
+
+**Memory Input** (top toolbar):
+1. User types memory text in the Memory field
+2. Press Enter → system creates a Tier 1 chunk
+3. Node appears at front plane with birth animation (scale 0→1, glow intensifies)
+4. System auto-generates L1-L5 questions (tetrahedrons branch out)
+5. System scans for links, contradictions, cluster candidates
+6. New edges animate in (golden threads)
+7. Inspector auto-opens on the new chunk
+
+**Query Mode** (top toolbar):
+1. User types question in the Query field
+2. Press Enter → 13-step retrieval sequence begins
+3. Result appears in bottom panel Retrieval Log with confidence grading
+4. Response cites source chunks (clickable → camera flies to node)
+
+**File Import:**
+1. Drag-and-drop zone on toolbar or File menu
+2. JSON parsed per CAR_INGESTION_PROTOCOL.md schema
+3. Chunks appear in cascade animation (one by one, spreading outward)
+4. Post-import: auto-consolidation runs
+
+### Tool Palette
+
+| Tool | Shortcut | Behavior |
+|------|----------|----------|
+| Select | `V` | Click to select, inspect in sidebar |
+| Pan/Orbit | `H` | Click-drag to orbit. Scroll to zoom. |
+| Add Chunk | `C` | Click in 3D space to place new chunk |
+| Add Link | `L` | Click source → click target → choose edge type |
+| Add Question | `Q` | Add question node, link to chunks |
+| Add Trigger | `T` | Create trigger with conditions |
+
+### Canvas Interactions
+
+- **Click node:** Select, inspector shows metadata
+- **Double-click node:** Inline edit label/content
+- **Hover node:** Tooltip: content preview + relevance score
+- **Right-click node:** Context menu: Retrieve from here, Promote tier, Add link, Delete
+- **Click edge:** Select, inspector shows edge type + linked nodes
+- **Scroll:** Zoom
+- **Click-drag empty space:** Orbit camera
+- **Shift+click:** Multi-select
+- **Delete/Backspace:** Create amendment (never truly delete per Principle 2)
+
+### Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `M` | Focus memory input |
+| `Q` (when no tool active) | Focus query input |
+| `Space` | Play/pause retrieval animation |
+| `Right Arrow` | Step forward in retrieval sequence |
+| `Esc` | Cancel action / clear selection |
+| `Cmd+Z` | Undo |
+| `Shift+Cmd+Z` | Redo |
+| `1` / `2` / `3` | Filter: show only Tier 1/2/3 |
+| `0` | Show all tiers |
+
+## 13-Step Retrieval Sequence
+
+The hero feature. Two modes:
+
+- **Play mode:** Full sequence runs automatically (~8.5 seconds)
+- **Step mode:** User advances manually with `→` key or Step button
+
+### Sequence Choreography
+
+| Step | Name | Duration | 3D Visual |
+|------|------|----------|-----------|
+| 1 | Session Primer | 0.5s | Warm glow sweeps across recent chunks. Triggers flash-check. |
+| 2 | Context Construction | 0.8s | Query tetrahedron appears at front plane. Concentric particle rings ripple outward. |
+| 3 | Question Decomposition | 1.0s | Query splits into 3-5 sub-question tetrahedrons, fan-out with branching particle rays. |
+| 4 | Metamemory Check | 0.5s | Knowledge inventory pulses. Gaps highlight dim red. |
+| 5 | Multi-Query Retrieval R1 | 1.2s | Sub-questions send particle beams into graph. Top-3 matches per query glow bright. |
+| 6 | Cluster Formation | 0.8s | Retrieved chunks drift together (physics spring). Translucent shells form. |
+| 7 | Cluster Expansion R2 | 1.0s | Adjacent chunks pulled in (temporal, entity, topic neighbors). Shells expand. |
+| 8 | Tiered Retrieval | 0.8s | Camera pulls back. T1/T2/T3 planes light up in sequence front→back. |
+| 9 | Interference Check | 0.6s | Red pulses between contradicting chunks. Winner glows, loser dims. |
+| 10 | Confidence Grading | 0.5s | Each sub-question gets confidence badge (green/yellow/red). Overall score appears. |
+| 11 | Thinking Profile | 0.3s | Subtle HUD overlay: detected session mode. |
+| 12 | Synthesis + Response | 1.0s | All activated chunks pulse in unison. Response assembles in bottom panel. |
+| 13 | Post-Retrieval Update | 0.5s | Accessed chunks flash (re-indexed). Strengthened edges brighten. |
+
+### Step Progress Indicator
+
+Horizontal bar at top of canvas: 13 segments.
+- Done: cyan fill
+- Active: gold fill, pulsing
+- Pending: dark gray
+
+## Inspector Panel
+
+Right panel with tabs contextual to selected node type:
+
+### Chunk Selected
+
+| Tab | Content |
+|-----|---------|
+| Overview | Content text, tier badge, relevance gauge, emotional tone, stakes |
+| Metadata | Full schema: source, reliability, participants, timestamps, access_count, status |
+| Retrieval | Retrieval cues, generated questions, linked chunks |
+| Timeline | Preceding/following context chain, amendment history |
+| Scoring | Live relevance breakdown with factor weights as sliders |
+
+### Question Selected
+
+| Tab | Content |
+|-----|---------|
+| Questions | Level badge, question text, answer (if any), confidence, parent/child hierarchy |
+
+### Cluster Selected
+
+| Tab | Content |
+|-----|---------|
+| Cluster | Member chunks list, cluster strength, shared tags/entities |
+
+### Nothing Selected (Empty State)
+
+"Select a memory chunk to inspect its metadata, or ask a question to watch the brain think."
+Plus a minimap showing all nodes as colored dots.
+
+## Bottom Panel
+
+| Tab | Content |
+|-----|---------|
+| Retrieval Log | 13-step sequence history: timestamps, step labels, confidence scores, citations |
+| Consolidation | Tier promotion activity. Daily/weekly/monthly job status. |
+| Contradictions | Active memory conflicts with version history. Badge count on tab. |
+| Questions | Unanswered questions from self-questioning engine (S4.5). Badge count. |
+| Metamemory | Knowledge inventory: topic coverage, known gaps, confidence per domain |
+
+## First-Time Experience
+
+No saved session → load demo brain using Spain margins example from the protocol:
+
+- ~15 chunks across all 3 tiers
+- Pre-formed clusters (Spain account, logistics)
+- Questions at multiple levels
+- One active contradiction (margin data: 22% vs 18%)
+- One prospective trigger ("raise pricing issue when Idan mentioned")
+- Guided prompt at top: "Type a question to watch the brain recall, or add a new memory."
+
+## Claude Instruction Manual
+
+Ships as `CAR_INGESTION_PROTOCOL.md` in the repo root. Tells Claude (or any LLM)
+how to ingest an entire project into the CAR memory graph:
+
+```
+1. SCAN    — Read all source material (any domain)
+2. CHUNK   — Break into atomic units (one fact/decision/event per chunk)
+3. CLASSIFY — Assign tier (1=raw, 2=summary, 3=pattern), tags, entities
+4. QUESTION — Generate questions at 5 levels per chunk (L1 bare fact → L5 conditional)
+5. LINK    — Identify cross-links, contradictions, temporal sequences
+6. SCORE   — Set initial relevance weights (emotional, stakes, consequence)
+7. CLUSTER — Group related chunks by topic/entity/time
+8. EXPORT  — Output as JSON matching the graph document schema
+```
+
+The output JSON imports directly via the app's File Import.
+
+## Graph Document Schema (for persistence and import/export)
+
+```javascript
+{
+  id: string,
+  title: string,
+  version: "1.0.0",
+  nodes: Node[],          // chunks, questions, patterns, triggers
+  edges: Edge[],
+  clusters: Cluster[],    // cluster definitions with member IDs
+  viewport: { x, y, z, zoom, rotationX, rotationY },
+  metadata: {
+    createdBy: string,
+    description: string,
+    selection: string[],
+    metamemory: MetamemoryIndex
+  }
+}
+```
+
+## Technical Decisions
+
+| Decision | Choice | Rationale |
+|----------|--------|-----------|
+| 3D library | Three.js via CDN | Single dependency, well-documented, handles WebGL, post-processing |
+| Panel UI | Vanilla Web Components (preserved) | Working infrastructure, no rebuild needed |
+| State management | PAN event bus + stores (preserved) | Clean separation, proven pattern |
+| Persistence | localStorage (preserved) | Simple, no server needed |
+| Build step | None (preserved) | Static file serving, ES modules |
+| Fonts | IBM Plex Sans + IBM Plex Mono | Sharp, technical, monospace for data |
+
+## Current Limitations (inherited, accepted)
+
+- No server persistence or collaborative sync
+- Undo/redo is snapshot-based
+- No real LLM integration (consolidation/question generation is rule-based simulation)
+- Three.js adds ~150KB CDN dependency
+
+## Security Notes
+
+- Public repository — no secrets
+- CLAUDE.md in .gitignore
+- All data is client-side (localStorage)
+- No external API calls except Three.js CDN
+
+## Not In Scope (deferred)
+
+- Real LLM-powered consolidation (future: connect to Claude API)
+- Server-side persistence / multi-user
+- Mobile/tablet responsive (desktop-first for this phase)
+- WebXR / VR mode
+- Audio/haptic feedback on retrieval events

From 15f198edbc09ec706ddd131ea36f75c95165f017 Mon Sep 17 00:00:00 2001
From: Amit Kolton <amit.ko@thing02.com>
Date: Fri, 3 Apr 2026 15:07:16 +0300
Subject: [PATCH 02/13] docs: design review pass on CAR brain simulator spec

Adds atmospheric layer (ambient particles, nebula clouds, star field),
full interaction state coverage, emotional onboarding arc, anti-slop
rules, design tokens (CSS variables), micro-interactions spec,
accessibility (keyboard nav, screen reader, reduced motion),
node placement algorithm, performance boundaries, and tooltip design.
---
 .../2026-04-03-car-brain-simulator-design.md  | 326 +++++++++++++++++-
 1 file changed, 317 insertions(+), 9 deletions(-)

diff --git a/docs/superpowers/specs/2026-04-03-car-brain-simulator-design.md b/docs/superpowers/specs/2026-04-03-car-brain-simulator-design.md
index a7beeab..bc92ed4 100644
--- a/docs/superpowers/specs/2026-04-03-car-brain-simulator-design.md
+++ b/docs/superpowers/specs/2026-04-03-car-brain-simulator-design.md
@@ -225,6 +225,44 @@ Three.js via CDN. Post-processing: UnrealBloomPass for glow, optional SSAO.
 | Cluster | Custom shell mesh | MeshBasicMaterial transparent | Encloses member nodes |
 | Trigger | Two ConeGeometry back-to-back | MeshStandardMaterial + emissive | 0.6x, sharp flash on match |
 
+### Node Placement
+
+New chunks placed using force-directed layout within their depth plane:
+- **Tier 1 chunks** land at z=-200, positioned near related chunks (by shared tags/entities). If no relations, placed at a random position within a 200-unit radius of center.
+- **Tier 2 summaries** at z=-400, centered on the cluster they summarize.
+- **Tier 3 schemas** at z=-600, evenly distributed across the deep plane.
+- **Questions** float at z=-100 (between front and mid planes), near their parent chunk.
+- **Force simulation** runs for 50 iterations on layout change (repulsion between same-plane nodes, attraction along edges). Uses lightweight force-directed algorithm, not a physics engine.
+
+### Cluster Shell Shape
+
+Cluster shells use a **bounding sphere** (not convex hull, too expensive for real-time):
+- Compute center of mass of member nodes
+- Radius = max distance to any member + 20% padding
+- Material: `MeshBasicMaterial({ color: cluster_color, transparent: true, opacity: 0.08 })`
+- Wireframe sphere overlay at opacity 0.03 for structure
+- Shell repositions every frame to track member drift during force layout
+
+### Performance Boundary
+
+- Target: 60fps with up to 200 nodes and 400 edges
+- At 200+ nodes: disable ambient particle field, reduce bloom radius
+- At 500+ nodes: switch to instanced rendering (InstancedMesh), disable per-node glow, use LOD (far nodes become points)
+- WebGL context loss: show DOM fallback message, offer JSON export of current state
+
+### Tooltip Design
+
+On hover (300ms delay), show a floating DOM tooltip anchored above the 3D node (CSS2DRenderer):
+
+```
++--[tooltip]------------------+
+| Spain margins dropped...    |  ← content (first 60 chars, ellipsis)
+| T1 · 0.92 · 3 accesses    |  ← tier · relevance · access count
++-----------------------------+
+```
+
+Background: `#161b22` at 95% opacity. Border: 1px `var(--bg-border)`. Font: `var(--font-mono)` at `var(--font-size-sm)`. Max width: 240px. Positioned via `CSS2DObject` so it tracks the node in 3D space.
+
 ### Node Brightness
 
 `emissiveIntensity = relevance_score * (isSelected ? 2.0 : 1.0)`
@@ -250,15 +288,35 @@ Contradiction edges: color `#ff3333`, opacity oscillates 0.3-0.8.
 ### Camera
 
 - Default: orbital view (OrbitControls)
-- Scroll: zoom in/out
-- Click-drag empty space: orbit
-- Auto-focus: when a node is selected, camera smoothly lerps to face it
-- Retrieval mode: camera follows the active retrieval path
+- Home position: camera at (0, 80, 350), looking at (0, 0, -200). Slightly elevated, showing depth layers front-to-back. On first load, camera starts at (0, 200, 600) and slowly swoops down to home over 2 seconds (the "brain waking up" moment).
+- Scroll: zoom in/out (dolly toward/away from look-at target)
+- Click-drag empty space: orbit around look-at target
+- Auto-focus: when a node is selected, camera smoothly lerps to face it (duration 0.6s, easeInOutCubic)
+- Retrieval mode: camera follows the active retrieval path, pulling back for tiered retrieval (step 8), zooming in for synthesis (step 12)
+- Double-tap `H`: return to home position (smooth lerp)
 
 ### Post-Processing
 
 - UnrealBloomPass: threshold 0.8, strength 0.6, radius 0.4
-- Optional fog: `scene.fog = new THREE.FogExp2(0x080c14, 0.0015)` for depth fade
+- Fog: `scene.fog = new THREE.FogExp2(0x080c14, 0.0015)` for depth fade (required, not optional)
+
+### Atmospheric Layer (the "galaxy" feel)
+
+This is what separates a Three.js demo from a living brain-galaxy:
+
+- **Ambient particle field:** ~200 tiny points (`THREE.Points`, size 0.3-0.8, opacity 0.05-0.15) drifting slowly across the scene. Random velocity vectors, no interaction with nodes. Creates the feeling of floating in a living space.
+- **Nebula clouds:** 3-5 large sprite planes (opacity 0.03-0.06) with soft radial gradient textures in `#00f5ff`, `#7b61ff`, `#ff2d78`. Positioned behind clusters at z=-800 to z=-1200. They give dense memory regions a "glow cloud" backdrop.
+- **Star field:** ~500 static points at z=-1500 to z=-2500 (far background). Tiny, white, varying opacity 0.1-0.4. Parallax naturally as the camera orbits, giving depth scale.
+- **Ambient light pulse:** Subtle sine-wave modulation (period ~8s, amplitude 0.05) on the scene ambient light intensity. The whole scene "breathes."
+
+### Canvas Visual Hierarchy (eye tracking order)
+
+1. **Active retrieval path** (when running): particle trail overrides all other focus
+2. **Brightest cluster** (highest aggregate relevance): positioned near camera center on first load
+3. **Hot individual chunks** (recently accessed, high relevance): glow through cluster shells
+4. **Gold question nodes** create secondary focal points, scattered at mid-depth
+5. **Cold chunks and deep-plane schemas** fade into background like distant stars
+6. **Atmospheric particles and nebula clouds** provide spatial context without competing
 
 ## Interaction Design
 
@@ -322,6 +380,34 @@ Contradiction edges: color `#ff3333`, opacity oscillates 0.3-0.8.
 | `1` / `2` / `3` | Filter: show only Tier 1/2/3 |
 | `0` | Show all tiers |
 
+## Micro-Interactions
+
+These are the details that make every touch feel alive.
+
+### Node Birth
+New chunk: scale 0 → 1.0 over 0.4s (easeOutBack with slight overshoot). Emissive ramps from 0 → full over 0.6s. Connected edges draw in with a 0.2s delay each.
+
+### Node Selection
+Selected node: emissive doubles (x2.0). White ring appears around it (torus geometry, 0.1 thickness). All connected edges brighten to full opacity. Unrelated nodes dim to 40% opacity over 0.3s.
+
+### Node Hover
+Hover (300ms threshold): node scale 1.0 → 1.1 over 0.15s. Tooltip appears. Subtle white outline (0.5px).
+
+### Node Deletion (Amendment)
+Node doesn't vanish. It shrinks to 0.3x scale, drops to 10% opacity, and drifts to the back plane (z=-800) over 0.8s. An amendment edge traces from the new correction chunk to the old one. The old node stays, just dim. Never truly deleted. (CAR Principle 2)
+
+### Edge Creation
+New edge: line draws from source to target over 0.3s (dashOffset animation). Then particle burst at the connection point (10 particles, fan out and fade over 0.4s).
+
+### Retrieval Hit
+When a chunk is "found" during retrieval: brief scale pulse (1.0 → 1.3 → 1.0 over 0.2s). Particle burst (same as edge creation). Emissive spikes to 3x then settles to 2x.
+
+### Cluster Formation
+Chunks drift toward cluster center over 0.5s (spring physics). Shell fades in from 0% → 8% opacity over 0.3s. Gentle "whomp" visual (shell scale 0.8 → 1.0, ease out).
+
+### Contradiction Detection
+Both conflicting nodes flash red twice (0.1s on, 0.1s off). Red dashed edge materializes between them over 0.3s. Edge then pulses continuously (opacity 0.3 → 0.8 at 1.5s period).
+
 ## 13-Step Retrieval Sequence
 
 The hero feature. Two modes:
@@ -395,16 +481,126 @@ Plus a minimap showing all nodes as colored dots.
 | Questions | Unanswered questions from self-questioning engine (S4.5). Badge count. |
 | Metamemory | Knowledge inventory: topic coverage, known gaps, confidence per domain |
 
-## First-Time Experience
+## Interaction States
+
+Every feature has five states. If we don't spec them, the implementer ships "no items found."
+
+### Canvas States
+
+| State | What the user sees |
+|-------|-------------------|
+| **Loading (first load)** | Dark canvas with ambient particles drifting. Faint "neurons connecting..." text centered, pulsing at 0.5Hz. Star field visible. After 1-2s the seed graph fades in node-by-node. |
+| **Empty (no chunks)** | Full atmospheric layer active (particles, nebula clouds, star field). Centered text: "This brain is empty. Add a memory to begin." Gentle glow ring at center where the first node will appear. Memory input field pulses softly. |
+| **Active (normal use)** | Full 3D graph with all atmospheric effects. Nodes, edges, clusters rendered per spec. |
+| **Retrieval running** | 13-step sequence animating. Step overlay visible. Non-participating nodes dim to 20% opacity. Active path glows bright. Bottom panel streams step logs in real-time. |
+| **Error (WebGL failure)** | Fallback message: "Your browser doesn't support WebGL. Try Chrome or Firefox." Rendered as DOM overlay, not canvas. |
+
+### Memory Input States
+
+| State | What the user sees |
+|-------|-------------------|
+| **Empty** | Placeholder: "Add a new memory chunk..." in #484f58 |
+| **Typing** | Border glows cyan (#00f5ff at 30% opacity). Character count not shown (no limit). |
+| **Processing** | Input disabled briefly, small spinner icon replaces the submit arrow. New chunk node's birth animation plays. |
+| **Success** | Input clears. Brief green flash on the border (0.3s). Inspector opens on new chunk. Activity log appends "Chunk created: [first 30 chars]..." |
+
+### Query Input States
+
+| State | What the user sees |
+|-------|-------------------|
+| **Empty** | Placeholder: "Ask the brain a question..." in #484f58 |
+| **Typing** | Border glows gold (#ffd93d at 30% opacity). |
+| **Retrieval running** | Input disabled. 13-step progress dots animate. Step overlay appears on canvas. |
+| **Result ready** | Input stays with the query text (not cleared). Bottom panel Retrieval Log tab auto-activates. Response shows with confidence score and source citations. |
+| **Low confidence** | Same as result, but confidence badge is red. Response includes: "Confidence: LOW. Gaps: [specific missing info]." |
+| **No matches** | Response: "No relevant memories found. Try adding more context, or rephrase." The brain does a brief "search sweep" animation (particle wave radiates outward and fades). |
+
+### File Import States
 
-No saved session → load demo brain using Spain margins example from the protocol:
+| State | What the user sees |
+|-------|-------------------|
+| **Idle** | Import button in toolbar, subtle. |
+| **Drag hover** | Full-canvas overlay: dark with cyan border and text "Drop JSON to import memories". |
+| **Importing** | Progress bar at top of canvas: "Importing 47 chunks..." Nodes appear one-by-one with cascade animation. |
+| **Success** | Progress bar fills, turns green, fades. Activity log: "Imported 47 chunks, 12 edges, 3 clusters." |
+| **Error (invalid JSON)** | Toast notification at top-right: "Import failed: invalid JSON at line 23." Red border, auto-dismiss after 8s. |
+| **Error (schema mismatch)** | Toast: "Import failed: missing required field 'content' in chunk 4." |
 
+### Inspector States
+
+| State | What the user sees |
+|-------|-------------------|
+| **Nothing selected** | "Select a memory chunk to inspect its metadata, or ask a question to watch the brain think." Plus minimap of all nodes as colored dots by tier. |
+| **Chunk selected** | Full metadata view with tabs. Relevance score gauge animated. |
+| **Multiple selected** | Header: "3 chunks selected". Shows shared tags, aggregate relevance, option to bulk-link or bulk-tag. |
+| **Editing field** | Inline edit with save/cancel. Field border glows cyan during edit. Esc cancels. |
+
+### Bottom Panel States
+
+| Tab | Empty State |
+|-----|------------|
+| **Retrieval Log** | "No queries yet. Ask the brain a question to see the retrieval process." |
+| **Consolidation** | "No consolidation activity. Add more memories to trigger tier promotion." |
+| **Contradictions** | "No contradictions detected. Conflicting memories will appear here." |
+| **Questions** | "No unanswered questions. The self-questioning engine activates as memories accumulate." |
+| **Metamemory** | "Knowledge inventory empty. The brain builds its self-model as you add memories." |
+
+## First-Time Experience & Emotional Arc
+
+### The First 5 Seconds (visceral)
+
+The user opens the app. The screen is almost black. Ambient particles drift slowly.
+A single faint glow appears at center. Then another. Then edges begin to trace between
+them, like synapses wiring themselves. Over 2 seconds, the seed graph materializes
+node-by-node, clusters forming, edges threading, the camera slowly swooping from high
+above down into the brain. Bloom intensifies as the graph "wakes up."
+
+The user's first feeling should be: "whoa."
+
+### The First 5 Minutes (behavioral)
+
+The seed graph is loaded: the Spain margins example from the CAR protocol.
+
+Contents:
 - ~15 chunks across all 3 tiers
 - Pre-formed clusters (Spain account, logistics)
 - Questions at multiple levels
-- One active contradiction (margin data: 22% vs 18%)
+- One active contradiction (margin data: 22% vs 18%, red pulsing edge)
 - One prospective trigger ("raise pricing issue when Idan mentioned")
-- Guided prompt at top: "Type a question to watch the brain recall, or add a new memory."
+
+A subtle prompt fades in at the top of the canvas (not a modal, not a banner, just
+text that belongs in the space): "Ask something. Try: What happened with Spain margins?"
+
+The user types a query. The 13-step retrieval fires. This is the "aha" moment. They
+watch particles stream from the query node into the graph, chunks light up, clusters
+form, contradictions flash red, and a graded response appears below. They understand
+what this thing does.
+
+### The First Session (reflective)
+
+After the demo query, the prompt shifts: "Now add your own memory. Anything you know."
+The user types a fact. They watch a new neuron appear, birth animation, questions
+branch out, links form to existing chunks. They get it: this thing learns.
+
+### Returning User
+
+If autosave data exists, the camera starts at the home position (no swoop animation).
+The graph is already there. The prompt says nothing. The user is home.
+
+### User Journey Storyboard
+
+| Step | User does | User feels | Design supports it with |
+|------|----------|------------|------------------------|
+| 1 | Opens app | Curiosity | Dark screen, slow materialization, camera swoop |
+| 2 | Sees the seed graph | Awe | 3D depth, glowing nodes, ambient particles, nebula clouds |
+| 3 | Reads the prompt | Invitation | Non-intrusive text, not a modal wall |
+| 4 | Types first query | Anticipation | Gold border glow, query node appears |
+| 5 | Watches retrieval | Wonder | 13-step animation, particles flowing, chunks lighting up |
+| 6 | Reads the response | Understanding | Confidence grade, source citations, camera following path |
+| 7 | Adds first memory | Ownership | Birth animation, questions branching, links forming |
+| 8 | Explores the graph | Mastery | Orbit camera, hover tooltips, click to inspect |
+| 9 | Imports a file | Power | Cascade animation, cluster auto-formation |
+| 10 | Returns next day | Belonging | Instant load, graph as they left it, no friction |
 
 ## Claude Instruction Manual
 
@@ -444,6 +640,81 @@ The output JSON imports directly via the app's File Import.
 }
 ```
 
+## Design Tokens (CSS Variables)
+
+All visual values go through CSS custom properties. No magic numbers in component CSS.
+
+```css
+:root {
+  /* Background */
+  --bg-canvas: #080c14;
+  --bg-panel: #0d1117;
+  --bg-input: #161b22;
+  --bg-border: #21262d;
+  --bg-hover: #161b22;
+
+  /* Data colors (tier-mapped, never decorative) */
+  --color-t1: #00f5ff;      /* Tier 1 episodes, cyan */
+  --color-t2: #7b61ff;      /* Tier 2 summaries, purple */
+  --color-t3: #ff2d78;      /* Tier 3 schemas, pink */
+  --color-question: #ffd93d; /* Questions, gold */
+  --color-trigger: #ff9f1c;  /* Triggers, amber */
+  --color-contradiction: #ff3333; /* Conflicts, red */
+  --color-cluster: rgba(255, 255, 255, 0.2); /* Cluster shells */
+
+  /* Text */
+  --text-primary: #e6edf3;
+  --text-secondary: #c9d1d9;
+  --text-muted: #484f58;
+  --text-accent: #ffffff;
+
+  /* Typography */
+  --font-sans: 'IBM Plex Sans', sans-serif;
+  --font-mono: 'IBM Plex Mono', monospace;
+  --font-size-xs: 10px;
+  --font-size-sm: 11px;
+  --font-size-base: 12px;
+  --font-size-md: 13px;
+  --font-size-lg: 14px;
+
+  /* Spacing (4px base) */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+
+  /* Radii */
+  --radius-sm: 3px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+
+  /* Transitions */
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.3s ease;
+  --transition-slow: 0.6s ease-in-out;
+
+  /* Layout */
+  --toolbar-height: 44px;
+  --palette-width: 56px;
+  --inspector-width: 300px;
+  --bottom-panel-height: 180px;
+}
+```
+
+## Anti-Slop Rules
+
+These keep the app from drifting into generic AI-generated aesthetics:
+
+1. **Colors are data, not decoration.** Cyan = Tier 1. Purple = Tier 2. Pink = Tier 3. Gold = Questions. Never use these as background gradients, decorative accents, or branding.
+2. **Tabs are text-only.** Underline-active style, `IBM Plex Mono` 10px uppercase, `#484f58` inactive / `#00f5ff` active with 2px bottom border. No pills, no background fills, no rounded containers.
+3. **No card grids.** Inspector sections use stacked key-value rows, not cards. Bottom panel uses log-style rows, not cards.
+4. **No decorative elements.** Every visual element maps to data. The atmospheric particles represent ambient "neural activity," not decoration. If it doesn't mean something, cut it.
+5. **Monospace for data, sans-serif for labels.** `IBM Plex Mono` for all values, scores, IDs, timestamps. `IBM Plex Sans` for section headers and labels only.
+6. **No border-radius > 6px.** Buttons: 4px. Panels: 0px (sharp edges). Input fields: 4px. Nodes are 3D geometry, not CSS.
+7. **No colored left-borders on anything.** Tags use 1px borders in the data color at 40% opacity.
+
 ## Technical Decisions
 
 | Decision | Choice | Rationale |
@@ -469,6 +740,43 @@ The output JSON imports directly via the app's File Import.
 - All data is client-side (localStorage)
 - No external API calls except Three.js CDN
 
+## Accessibility (desktop-only scope)
+
+No mobile/tablet. But desktop a11y is not optional.
+
+### Keyboard Navigation
+
+- **Tab order:** Toolbar inputs → Palette tools → Inspector tabs → Bottom panel tabs
+- **Canvas shortcuts:** All tool shortcuts (V, H, C, L, Q, T) work without focusing the canvas
+- **Arrow keys:** When canvas is focused, arrow keys orbit camera (5 degrees per press)
+- **Enter on node:** Selects node, opens inspector (equivalent to click)
+- **Tab through nodes:** Tab/Shift+Tab cycles through visible nodes in relevance order
+- **Esc:** Progressive escape: close popover → clear selection → deselect tool → return to Select
+
+### Screen Reader Strategy
+
+The 3D canvas is inherently non-accessible to screen readers. Mitigation:
+- Canvas element gets `role="img"` with `aria-label` describing current state: "Brain graph with 15 memory chunks, 3 clusters, 1 active contradiction"
+- All panel content (inspector, bottom panel, toolbar) is standard DOM with proper ARIA landmarks
+- Inspector serves as the screen reader's "view" of the selected node
+- Bottom panel retrieval log is a live region (`aria-live="polite"`) that announces step progress
+
+### Color Contrast
+
+Neon-on-dark is hard for contrast. Minimum requirements:
+- Panel text (#c9d1d9 on #0d1117): ratio 9.5:1 (passes AAA)
+- Muted text (#484f58 on #0d1117): ratio 3.1:1 (passes AA for large text only, used for labels)
+- Active tab (#00f5ff on #0d1117): ratio 8.7:1 (passes AAA)
+- Tag text (data colors on #161b22): all pass AA minimum
+
+### Reduced Motion
+
+Respect `prefers-reduced-motion: reduce`:
+- Skip the first-load camera swoop (instant position)
+- Disable ambient particle drift
+- Retrieval sequence: show state changes without animation (instant step transitions)
+- Bloom post-processing stays (it's not motion, it's a visual filter)
+
 ## Not In Scope (deferred)
 
 - Real LLM-powered consolidation (future: connect to Claude API)

From 263cdaf7046d60a5c4219eec11f9c30d01663c60 Mon Sep 17 00:00:00 2001
From: Amit Kolton <amit.ko@thing02.com>
Date: Fri, 3 Apr 2026 15:13:49 +0300
Subject: [PATCH 03/13] docs: add project overlay architecture and Claude Code
 runner

Major spec updates:
- Two-layer architecture: local Node.js server + browser frontend
- Claude Code CLI as default AI runner (uses subscription auth)
- Project mode: slides into existing projects via car-brain --project
- Disk-based persistence (.car-brain/ directory)
- Project ingestion pipeline with file scanning
- Pluggable runner interface for future local model support
- Updated .gitignore for .car-brain/ data directory
---
 .gitignore                                    |  50 ++++
 .../2026-04-03-car-brain-simulator-design.md  | 217 +++++++++++++++---
 2 files changed, 235 insertions(+), 32 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..916731c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,50 @@
+# Dependencies
+node_modules/
+
+# Environment & secrets
+.env
+.env.*
+.env.local
+.env.production
+*.key
+*.pem
+*.p12
+*.pfx
+
+# Claude Code
+CLAUDE.md
+.claude/
+
+# CAR Brain local data
+.car-brain/
+
+# IDE & editors
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+.DS_Store
+Thumbs.db
+
+# Build output
+dist/
+build/
+out/
+
+# OS files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+
+# Logs
+*.log
+npm-debug.log*
+
+# Temporary files
+tmp/
+.tmp/
+*.bak
+*.orig
diff --git a/docs/superpowers/specs/2026-04-03-car-brain-simulator-design.md b/docs/superpowers/specs/2026-04-03-car-brain-simulator-design.md
index bc92ed4..eeb4ce6 100644
--- a/docs/superpowers/specs/2026-04-03-car-brain-simulator-design.md
+++ b/docs/superpowers/specs/2026-04-03-car-brain-simulator-design.md
@@ -14,40 +14,122 @@ brain process them through the full 13-step retrieval sequence.
 ### What it is
 
 - A CAR Protocol workbench + living memory system
-- Domain-agnostic: ingests any knowledge (code, business, research)
-- Three input modes: text memory input, query panel, JSON file import
+- **Standalone product** that also slides into existing projects/file systems
+- **Runs locally** on your machine, never phones home (except to the AI runner)
+- Domain-agnostic: ingests any knowledge (code, business, research, conversations)
+- Four input modes: text memory input, query panel, JSON file import, **project directory scan**
 - Ships with a Claude instruction manual for full project ingestion
 - Visual: Neural dark 3D aesthetic using Three.js for the graph canvas
+- **AI-powered:** Claude Code (Anthropic API) runs the CAR engine. Swappable to local models later.
 
 ### What it is NOT
 
-- Not a static visualization or educational demo
-- Not a backend service — runs entirely in the browser
-- Not a chat interface — it's a graph workbench with memory processing
+- Not a static visualization or demo. The brain is powered by real AI.
+- Not a cloud service. Everything runs on your machine.
+- Not a chat interface. It's a graph workbench with memory processing.
+- Not locked to one AI provider. Claude Code is the default, local models are planned.
 
 ## Architecture
 
-### Approach: Hybrid (Three.js Canvas + DOM Panels)
+### Two-Layer Architecture
 
-Three.js renders the 3D brain visualization canvas. All other UI (toolbar, inspector,
-input panels, activity log) stays as vanilla Web Components. The PAN event bus bridges
-both worlds.
+**Layer 1: Local Server** (`server.js` or `server.py`)
+A lightweight local server that:
+- Serves the static frontend (HTML/CSS/JS)
+- Proxies AI requests to the Anthropic API (keeps API key server-side, never in browser)
+- Reads the local file system for project ingestion (scans directories, reads files)
+- Persists brain data to disk as JSON (not just localStorage)
+- Exposes a simple REST API for the frontend
 
-**What stays:**
+**Layer 2: Browser Frontend** (Three.js + Web Components)
+The 3D brain visualization and all panel UI. Talks only to the local server.
+
+```
+  Browser (localhost:4173)          Local Server (localhost:4174)
+  ┌──────────────────────┐          ┌──────────────────────────┐
+  │  Three.js 3D Canvas  │          │  Static file serving     │
+  │  Web Component panels│◄────────►│  /api/ingest   (fs scan) │
+  │  PAN event bus       │  REST    │  /api/process  (AI call) │
+  │  graph-store (state) │          │  /api/brain    (persist) │
+  └──────────────────────┘          │  /api/config   (settings)│
+                                    └─────────┬────────────────┘
+                                              │
+                                    ┌─────────▼────────────────┐
+                                    │  AI Runner (pluggable)   │
+                                    │  ├─ Claude (Anthropic API)│ ← default
+                                    │  ├─ Ollama (local)       │ ← future
+                                    │  └─ OpenAI (fallback)    │ ← future
+                                    └──────────────────────────┘
+```
+
+### Running Modes
+
+**Standalone mode** (default):
+```bash
+cd carmindgraph
+node server.js
+# or: python3 server.py
+# Opens http://localhost:4173
+```
+Empty brain. Add memories manually, query, import JSON.
+
+**Project mode** (slide into an existing project):
+```bash
+cd ~/Projects/my-app
+car-brain --project .
+# or: car-brain --project /path/to/project
+```
+The server scans the project directory, ingests files through Claude, and builds
+the initial brain graph. You see your project's knowledge materialize as neurons.
+
+### AI Runner Interface
+
+The runner is pluggable. Every CAR operation goes through a simple interface:
+
+```javascript
+// runner API (server-side)
+runner.generateQuestions(chunk)     // → Question[] at 5 levels
+runner.decompose(query)            // → sub-questions for retrieval
+runner.consolidate(chunks)         // → Tier 2 summaries
+runner.detectPatterns(summaries)   // → Tier 3 schemas
+runner.gradeConfidence(subAnswers) // → overall confidence + gaps
+runner.synthesize(fragments, query)// → reconstructed answer
+runner.detectContradictions(a, b)  // → contradiction analysis
+runner.buildRetrievalCues(chunk)   // → retrieval cues
+```
+
+**Default runner: Claude Code (Claude subscription)**
+The default user has a Claude subscription (Pro/Team/Enterprise), not a raw API key.
+The server integrates via Claude Code CLI (`claude` command), which handles auth
+through the user's existing subscription. No separate API key needed.
+
+- Routine operations (questions, cues, consolidation): uses Claude Code with default model
+- Heavy operations (synthesis, pattern detection, contradictions): uses Claude Code with `--model opus` flag
+- Prompts follow the CAR protocol sections exactly
+- Falls back to Anthropic API (`ANTHROPIC_API_KEY`) if Claude Code CLI is not installed
+
+**Future runners:**
+- Ollama (local models, no API key needed, fully offline)
+- OpenAI (GPT-4o fallback)
+- Raw Anthropic API (for users with API keys instead of subscriptions)
+- Custom (user implements the runner interface)
+
+### What stays from existing codebase
 - PAN event bus (`js/core/pan.js`)
 - Store architecture (graph-store, ui-store, persistence-store)
 - Web Components for all panels
-- localStorage persistence with autosave
 - Undo/redo (snapshot-based)
 
-**What changes:**
+### What changes
 - `graph-canvas` → Three.js WebGL scene (replaces DOM/SVG rendering)
 - Node types → CAR protocol entities (chunk, cluster, question, pattern, trigger)
 - Edge types → CAR relationships (linked_to, amends, contradicts, promotes_to, etc.)
 - Inspector tabs → CAR metadata views
 - Bottom panel tabs → Retrieval log, Consolidation, Contradictions, Questions, Metamemory
-- Runtime → CAR engine (retrieval, scoring, consolidation) replaces mock-agent-runtime
+- Runtime → real AI-powered CAR engine replaces mock-agent-runtime
+- Persistence → disk-based JSON files (alongside localStorage for session state)
 - Seed data → Spain margins demo from the protocol
+- New: lightweight local server for API proxying and file system access
 - New dependency: Three.js via CDN (`<script>` tag, ~150KB)
 
 ### App Layout (4-panel, preserved)
@@ -602,10 +684,40 @@ The graph is already there. The prompt says nothing. The user is home.
 | 9 | Imports a file | Power | Cascade animation, cluster auto-formation |
 | 10 | Returns next day | Belonging | Instant load, graph as they left it, no friction |
 
-## Claude Instruction Manual
+## Project Ingestion
+
+### Project Mode
 
-Ships as `CAR_INGESTION_PROTOCOL.md` in the repo root. Tells Claude (or any LLM)
-how to ingest an entire project into the CAR memory graph:
+When launched with `car-brain --project /path/to/project`, the server:
+
+1. **Scans** the project directory (respects .gitignore, skips node_modules/dist/build)
+2. **Sends** file contents to Claude Code in batches for chunking
+3. **Claude processes** each batch through the CAR protocol:
+   - Breaks content into atomic memory chunks
+   - Classifies each chunk (tier, tags, entities)
+   - Generates questions at 5 levels per chunk
+   - Identifies cross-links and contradictions
+   - Scores initial relevance
+4. **Materializes** the brain graph with cascade animation as chunks arrive
+5. **Runs** initial consolidation (cluster formation, Tier 2 summary generation)
+
+Progress shown in bottom panel: "Ingesting project... 23/47 files processed"
+
+### Supported File Types for Ingestion
+
+Code: `.js`, `.ts`, `.py`, `.go`, `.rs`, `.java`, `.rb`, `.php`, `.css`, `.html`
+Docs: `.md`, `.txt`, `.rst`, `.adoc`
+Config: `.json`, `.yaml`, `.yml`, `.toml`, `.env.example`
+Other: any text file under 100KB
+
+Binary files, images, and files over 100KB are skipped with a log entry.
+
+### Claude Instruction Manual
+
+Ships as `CAR_INGESTION_PROTOCOL.md` in the repo root. This document serves two purposes:
+1. Tells the server how to prompt Claude for each ingestion step
+2. Can be used standalone — a user can run Claude Code manually with this protocol to
+   generate a brain JSON file, then import it
 
 ```
 1. SCAN    — Read all source material (any domain)
@@ -618,7 +730,37 @@ how to ingest an entire project into the CAR memory graph:
 8. EXPORT  — Output as JSON matching the graph document schema
 ```
 
-The output JSON imports directly via the app's File Import.
+## Persistence
+
+### Disk-Based Storage (primary)
+
+Brain data lives on disk, not just localStorage. The server manages persistence.
+
+**Standalone mode:** data stored in `~/.car-brain/brains/<brain-id>/`
+**Project mode:** data stored in `<project>/.car-brain/` (gitignored)
+
+Directory structure:
+```
+.car-brain/
+├── brain.json           # Full graph document (nodes, edges, clusters, viewport)
+├── config.json          # Runner config, project path, preferences
+├── sessions/            # Session history (for session priming)
+│   └── 2026-04-03.json
+└── exports/             # Manual export snapshots
+```
+
+### localStorage (secondary, session state only)
+
+Browser localStorage caches the current session for instant reload:
+- Current viewport position
+- UI state (selected tool, open tabs, dev console visibility)
+- Unsaved edits (flushed to disk on autosave)
+
+### Autosave
+
+Every graph change triggers a debounced save (450ms) to the local server,
+which writes to disk. The browser also caches to localStorage for instant
+reload on refresh.
 
 ## Graph Document Schema (for persistence and import/export)
 
@@ -627,15 +769,20 @@ The output JSON imports directly via the app's File Import.
   id: string,
   title: string,
   version: "1.0.0",
-  nodes: Node[],          // chunks, questions, patterns, triggers
+  project: string | null,    // path to project directory (if project mode)
+  runner: "claude-code" | "anthropic-api" | "ollama" | "custom",
+  nodes: Node[],              // chunks, questions, patterns, triggers
   edges: Edge[],
-  clusters: Cluster[],    // cluster definitions with member IDs
+  clusters: Cluster[],        // cluster definitions with member IDs
   viewport: { x, y, z, zoom, rotationX, rotationY },
   metadata: {
     createdBy: string,
     description: string,
     selection: string[],
-    metamemory: MetamemoryIndex
+    metamemory: MetamemoryIndex,
+    lastSession: ISO8601,
+    totalChunks: number,
+    totalQueries: number
   }
 }
 ```
@@ -722,23 +869,27 @@ These keep the app from drifting into generic AI-generated aesthetics:
 | 3D library | Three.js via CDN | Single dependency, well-documented, handles WebGL, post-processing |
 | Panel UI | Vanilla Web Components (preserved) | Working infrastructure, no rebuild needed |
 | State management | PAN event bus + stores (preserved) | Clean separation, proven pattern |
-| Persistence | localStorage (preserved) | Simple, no server needed |
+| Local server | Node.js (single `server.js`) | Lightest option for API proxying + file system access. No framework. |
+| AI runner | Claude Code CLI (subscription) | User's existing auth, no API key setup. Falls back to raw API. |
+| Persistence | Disk JSON + localStorage cache | Disk for durability, localStorage for instant reload |
 | Build step | None (preserved) | Static file serving, ES modules |
 | Fonts | IBM Plex Sans + IBM Plex Mono | Sharp, technical, monospace for data |
 
-## Current Limitations (inherited, accepted)
+## Current Limitations (accepted for v1)
 
-- No server persistence or collaborative sync
-- Undo/redo is snapshot-based
-- No real LLM integration (consolidation/question generation is rule-based simulation)
+- Undo/redo is snapshot-based (not operation-based)
 - Three.js adds ~150KB CDN dependency
+- Claude Code CLI must be installed for AI features (falls back to ANTHROPIC_API_KEY)
+- No collaborative/multi-user mode
+- Project ingestion is serial (one file at a time to Claude)
 
 ## Security Notes
 
-- Public repository — no secrets
-- CLAUDE.md in .gitignore
-- All data is client-side (localStorage)
-- No external API calls except Three.js CDN
+- Public repository, no secrets in codebase
+- CLAUDE.md and `.car-brain/` in .gitignore
+- API key never in browser (server-side only, or Claude Code handles auth)
+- All brain data stored locally on disk
+- Server binds to localhost only (not network-accessible)
 
 ## Accessibility (desktop-only scope)
 
@@ -779,8 +930,10 @@ Respect `prefers-reduced-motion: reduce`:
 
 ## Not In Scope (deferred)
 
-- Real LLM-powered consolidation (future: connect to Claude API)
-- Server-side persistence / multi-user
-- Mobile/tablet responsive (desktop-first for this phase)
+- Local model runners (Ollama, llama.cpp) — architecture supports it, not v1
+- Mobile/tablet responsive (desktop-first)
 - WebXR / VR mode
 - Audio/haptic feedback on retrieval events
+- Multi-user / collaborative brain editing
+- Real-time file watching (re-ingest on file change)
+- OpenAI / other provider runners

From 386ecba71a7a2e0fa39e0a84f4a1782552129250 Mon Sep 17 00:00:00 2001
From: Amit Kolton <amit.ko@thing02.com>
Date: Fri, 3 Apr 2026 15:31:40 +0300
Subject: [PATCH 04/13] feat: replace foundation with CAR protocol types,
 constants, and stores

Replace node/edge types with CAR entities (chunk, cluster, question,
pattern, trigger) and CAR relationships (linked_to, amends, contradicts,
etc). Add 3D position support, design tokens, depth planes, retrieval
step definitions, Ebbinghaus decay constants. Update graph-document with
per-type metadata factories. Add cluster methods and retrieval state
tracking to stores.
---
 js/core/constants.js       |  230 +++---
 js/core/event-constants.js |  164 ++--
 js/core/graph-document.js  |  243 ++++--
 js/core/types.js           |   43 +-
 js/store/graph-store.js    | 1494 ++++++++++++++++++++----------------
 js/store/ui-store.js       |  487 ++++++++----
 6 files changed, 1604 insertions(+), 1057 deletions(-)

diff --git a/js/core/constants.js b/js/core/constants.js
index 2da3dad..85864c4 100644
--- a/js/core/constants.js
+++ b/js/core/constants.js
@@ -1,123 +1,143 @@
-export const WORLD_SIZE = Object.freeze({
-  width: 3200,
-  height: 2200
+/* ── CAR Brain Simulator — Constants & Design Tokens ── */
+
+export const DEPTH_PLANES = Object.freeze({
+	FRONT: 0,
+	QUESTIONS: -100,
+	MID: -200,
+	BACK: -400,
+	DEEP: -600,
+	AMENDMENT: -800,
+	NEBULA_NEAR: -800,
+	NEBULA_FAR: -1200,
+	STARS_NEAR: -1500,
+	STARS_FAR: -2500,
+});
+
+export const TIER_COLORS = Object.freeze({
+	1: 0x00f5ff,
+	2: 0x7b61ff,
+	3: 0xff2d78,
+});
+
+export const TIER_COLOR_CSS = Object.freeze({
+	1: "#00f5ff",
+	2: "#7b61ff",
+	3: "#ff2d78",
 });
 
-export const GRAPH_LIMITS = Object.freeze({
-  minZoom: 0.45,
-  maxZoom: 1.8,
-  zoomInFactor: 1.08,
-  zoomOutFactor: 0.92,
-  gridSize: 24,
-  nodeMinX: -150,
-  nodeMinY: -100,
-  nodeMaxPaddingX: 100,
-  nodeMaxPaddingY: 80
+export const DATA_COLORS = Object.freeze({
+	T1: 0x00f5ff,
+	T2: 0x7b61ff,
+	T3: 0xff2d78,
+	QUESTION: 0xffd93d,
+	TRIGGER: 0xff9f1c,
+	CLUSTER: 0xffffff,
+	CONTRADICTION: 0xff3333,
+	RETRIEVAL: 0x00f5ff,
 });
 
-export const NODE_SIZE_BY_TYPE = Object.freeze({
-  note: Object.freeze({ width: 250, height: 140 }),
-  agent: Object.freeze({ width: 290, height: 180 }),
-  data: Object.freeze({ width: 260, height: 138 }),
-  transformer: Object.freeze({ width: 210, height: 104 }),
-  view: Object.freeze({ width: 210, height: 104 }),
-  action: Object.freeze({ width: 210, height: 104 })
+export const DATA_COLORS_CSS = Object.freeze({
+	T1: "#00f5ff",
+	T2: "#7b61ff",
+	T3: "#ff2d78",
+	QUESTION: "#ffd93d",
+	TRIGGER: "#ff9f1c",
+	CLUSTER: "rgba(255,255,255,0.2)",
+	CONTRADICTION: "#ff3333",
+	RETRIEVAL: "#00f5ff",
 });
 
-export const NODE_TEMPLATES = Object.freeze({
-  note: Object.freeze({
-    label: "New Note",
-    description: "Capture context and decisions.",
-    data: Object.freeze({ color: "#f4f9ff", tags: [] })
-  }),
-  agent: Object.freeze({
-    label: "New Agent",
-    description: "Define a role and objective.",
-    data: Object.freeze({
-      role: "Research Agent",
-      mode: "orchestrate",
-      status: "idle",
-      confidence: 0.5,
-      lastRunSummary: "",
-      lastOutput: null,
-      inputSchema: {},
-      outputSchema: {},
-      runHistory: [],
-      activityHistory: [],
-      allowedDataSources: [],
-      linkedDataCount: 0
-    })
-  }),
-  data: Object.freeze({
-    label: "New Data",
-    description: "Connect a data source.",
-    data: Object.freeze({
-      source: "json",
-      sourceType: "json",
-      sourcePath: "embedded:site_config",
-      sourceUrl: "",
-      jsonPath: "",
-      refreshMode: "manual",
-      refreshInterval: 60,
-      readonly: true,
-      cachedData: null,
-      cachedSchema: null,
-      lastUpdated: ""
-    })
-  }),
-  transformer: Object.freeze({
-    label: "New Transformer",
-    description: "Transform source inputs.",
-    data: Object.freeze({ inputSchema: {}, outputSchema: {} })
-  }),
-  view: Object.freeze({
-    label: "New View",
-    description: "Render output for review.",
-    data: Object.freeze({ outputTemplate: "summary_card" })
-  }),
-  action: Object.freeze({
-    label: "New Action",
-    description: "Run an external action.",
-    data: Object.freeze({ command: "noop", config: {} })
-  })
+export const CAMERA = Object.freeze({
+	HOME_POSITION: Object.freeze([0, 80, 350]),
+	HOME_LOOK_AT: Object.freeze([0, 0, -200]),
+	INTRO_POSITION: Object.freeze([0, 200, 600]),
+	SWOOP_DURATION: 2.0,
+	FOCUS_DURATION: 0.6,
+	ORBIT_SPEED: 5,
 });
 
+export const BLOOM = Object.freeze({
+	THRESHOLD: 0.8,
+	STRENGTH: 0.6,
+	RADIUS: 0.4,
+});
+
+export const FOG = Object.freeze({
+	COLOR: 0x080c14,
+	DENSITY: 0.0015,
+});
+
+export const ATMOSPHERE = Object.freeze({
+	AMBIENT_PARTICLES: 200,
+	STAR_POINTS: 500,
+	NEBULA_COUNT: 4,
+	BREATHING_PERIOD: 8.0,
+	BREATHING_AMPLITUDE: 0.05,
+});
+
+export const NODE_GEOMETRY = Object.freeze({
+	CHUNK_T1: Object.freeze({ type: "sphere", radius: 1, segments: 32 }),
+	CHUNK_T2: Object.freeze({ type: "icosahedron", radius: 1.5, detail: 1 }),
+	CHUNK_T3: Object.freeze({ type: "octahedron", radius: 2.0 }),
+	QUESTION: Object.freeze({ type: "tetrahedron", radius: 0.8 }),
+	TRIGGER: Object.freeze({ type: "diamond", radius: 0.6 }),
+	CLUSTER: Object.freeze({ type: "shell", padding: 1.2 }),
+});
+
+export const RETRIEVAL_STEPS = Object.freeze([
+	{ id: 1, name: "Session Primer", duration: 0.5 },
+	{ id: 2, name: "Context Construction", duration: 0.8 },
+	{ id: 3, name: "Question Decomposition", duration: 1.0 },
+	{ id: 4, name: "Metamemory Check", duration: 0.5 },
+	{ id: 5, name: "Multi-Query Retrieval R1", duration: 1.2 },
+	{ id: 6, name: "Cluster Formation", duration: 0.8 },
+	{ id: 7, name: "Cluster Expansion R2", duration: 1.0 },
+	{ id: 8, name: "Tiered Retrieval", duration: 0.8 },
+	{ id: 9, name: "Interference Check", duration: 0.6 },
+	{ id: 10, name: "Confidence Grading", duration: 0.5 },
+	{ id: 11, name: "Thinking Profile", duration: 0.3 },
+	{ id: 12, name: "Synthesis + Response", duration: 1.0 },
+	{ id: 13, name: "Post-Retrieval Update", duration: 0.5 },
+]);
+
+export const EBBINGHAUS_DECAY = Object.freeze([
+	{ days: 1, weight: 1.0 },
+	{ days: 7, weight: 0.75 },
+	{ days: 30, weight: 0.5 },
+	{ days: 90, weight: 0.3 },
+	{ days: 365, weight: 0.15 },
+]);
+
 export const HISTORY_LIMITS = Object.freeze({
-  graphSnapshots: 80
+	graphSnapshots: 80,
 });
 
 export const PERSISTENCE = Object.freeze({
-  autosaveDebounceMs: 450,
-  storage: Object.freeze({
-    lastSessionDocument: "mindgraph.last_session.document",
-    autosaveEnabled: "mindgraph.autosave.enabled"
-  })
+	autosaveDebounceMs: 450,
+	serverUrl: "http://localhost:4174",
+	storage: Object.freeze({
+		lastSessionDocument: "carbrain.last_session.document",
+		autosaveEnabled: "carbrain.autosave.enabled",
+		uiState: "carbrain.ui.state",
+	}),
 });
 
+export const LAYOUT = Object.freeze({
+	toolbarHeight: 44,
+	paletteWidth: 56,
+	inspectorWidth: 300,
+	bottomPanelHeight: 180,
+});
+
+/* ── Utility helpers (preserved from original) ── */
+
 export const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 
-export const clampZoom = (value) => clamp(value, GRAPH_LIMITS.minZoom, GRAPH_LIMITS.maxZoom);
-
-export const clampGraphPoint = (position) => ({
-  x: Math.round(
-    clamp(
-      Number(position?.x ?? 0),
-      GRAPH_LIMITS.nodeMinX,
-      WORLD_SIZE.width - GRAPH_LIMITS.nodeMaxPaddingX
-    )
-  ),
-  y: Math.round(
-    clamp(
-      Number(position?.y ?? 0),
-      GRAPH_LIMITS.nodeMinY,
-      WORLD_SIZE.height - GRAPH_LIMITS.nodeMaxPaddingY
-    )
-  )
-});
+export const clampZoom = (value) => clamp(value, 0.1, 5.0);
 
 export const formatEdgeLabel = (value) =>
-  String(value ?? "")
-    .trim()
-    .replaceAll("_", " ")
-    .replace(/\s+/g, " ")
-    .replace(/\b\w/g, (letter) => letter.toUpperCase());
+	String(value ?? "")
+		.trim()
+		.replaceAll("_", " ")
+		.replace(/\s+/g, " ")
+		.replace(/\b\w/g, (letter) => letter.toUpperCase());
diff --git a/js/core/event-constants.js b/js/core/event-constants.js
index ef7ab7d..9ed5fbb 100644
--- a/js/core/event-constants.js
+++ b/js/core/event-constants.js
@@ -1,54 +1,114 @@
 export const EVENTS = Object.freeze({
-  GRAPH_NODE_SELECT_REQUESTED: "graph.node.select.requested",
-  GRAPH_NODE_UPDATE_REQUESTED: "graph.node.update.requested",
-  GRAPH_NODE_MOVE_REQUESTED: "graph.node.move.requested",
-  GRAPH_NODE_CREATE_REQUESTED: "graph.node.create.requested",
-  GRAPH_NODE_DELETE_REQUESTED: "graph.node.delete.requested",
-  GRAPH_EDGE_CREATE_REQUESTED: "graph.edge.create.requested",
-  GRAPH_EDGE_SELECT_REQUESTED: "graph.edge.select.requested",
-  GRAPH_EDGE_SELECTION_CLEAR_REQUESTED: "graph.edge.selection.clear.requested",
-  GRAPH_EDGE_UPDATE_REQUESTED: "graph.edge.update.requested",
-  GRAPH_EDGE_DELETE_REQUESTED: "graph.edge.delete.requested",
-  GRAPH_SELECTION_CLEAR_REQUESTED: "graph.selection.clear.requested",
-  GRAPH_SELECTION_SET_REQUESTED: "graph.selection.set.requested",
-  GRAPH_VIEWPORT_UPDATE_REQUESTED: "graph.viewport.update.requested",
-  GRAPH_DOCUMENT_LOAD_REQUESTED: "graph.document.load.requested",
-  GRAPH_DOCUMENT_SAVE_REQUESTED: "graph.document.save.requested",
-  GRAPH_DOCUMENT_UNDO_REQUESTED: "graph.document.undo.requested",
-  GRAPH_DOCUMENT_REDO_REQUESTED: "graph.document.redo.requested",
-  RUNTIME_AGENT_RUN_REQUESTED: "runtime.agent.run.requested",
-  RUNTIME_SUBTREE_RUN_REQUESTED: "runtime.subtree.run.requested",
-  RUNTIME_ALL_RUN_REQUESTED: "runtime.all.run.requested",
-
-  GRAPH_NODE_SELECTED: "graph.node.selected",
-  GRAPH_NODE_UPDATED: "graph.node.updated",
-  GRAPH_NODE_CREATED: "graph.node.created",
-  GRAPH_NODE_DELETED: "graph.node.deleted",
-  GRAPH_EDGE_CREATED: "graph.edge.created",
-  GRAPH_EDGE_SELECTED: "graph.edge.selected",
-  GRAPH_EDGE_SELECTION_CLEARED: "graph.edge.selection.cleared",
-  GRAPH_EDGE_UPDATED: "graph.edge.updated",
-  GRAPH_EDGE_DELETED: "graph.edge.deleted",
-  GRAPH_SELECTION_CLEARED: "graph.selection.cleared",
-  GRAPH_SELECTION_SET: "graph.selection.set",
-  GRAPH_VIEWPORT_CHANGED: "graph.viewport.changed",
-  GRAPH_HISTORY_CHANGED: "graph.history.changed",
-  GRAPH_AUTOSAVE_STATE_CHANGED: "graph.autosave.state.changed",
-  GRAPH_DOCUMENT_LOADED: "graph.document.loaded",
-  GRAPH_DOCUMENT_SAVED: "graph.document.saved",
-  GRAPH_DOCUMENT_AUTOSAVED: "graph.document.autosaved",
-  GRAPH_DOCUMENT_CHANGED: "graph.document.changed",
-  TOOLBAR_TOOL_CHANGED: "toolbar.tool.changed",
-  INSPECTOR_TAB_CHANGED: "inspector.tab.changed",
-  RUNTIME_AGENT_RUN_STARTED: "runtime.agent.run.started",
-  RUNTIME_AGENT_RUN_COMPLETED: "runtime.agent.run.completed",
-  RUNTIME_AGENT_RUN_FAILED: "runtime.agent.run.failed",
-  RUNTIME_RUN_HISTORY_APPENDED: "runtime.run.history.appended",
-  RUNTIME_ERROR_APPENDED: "runtime.error.appended",
-  RUNTIME_DATA_REFRESHED: "runtime.data.refreshed",
-  ACTIVITY_LOG_APPENDED: "activity.log.appended",
-  TASK_QUEUE_UPDATED: "task.queue.updated",
-  PANEL_BOTTOM_TAB_CHANGED: "panel.bottom.tab.changed",
-  PANEL_DEV_CONSOLE_TOGGLED: "panel.dev.console.toggled",
-  UI_RUNTIME_STATE_CHANGED: "ui.runtime.state.changed"
+	/* ── Graph: node lifecycle ── */
+	GRAPH_NODE_SELECT_REQUESTED: "graph.node.select.requested",
+	GRAPH_NODE_UPDATE_REQUESTED: "graph.node.update.requested",
+	GRAPH_NODE_MOVE_REQUESTED: "graph.node.move.requested",
+	GRAPH_NODE_CREATE_REQUESTED: "graph.node.create.requested",
+	GRAPH_NODE_DELETE_REQUESTED: "graph.node.delete.requested",
+
+	/* ── Graph: edge lifecycle ── */
+	GRAPH_EDGE_CREATE_REQUESTED: "graph.edge.create.requested",
+	GRAPH_EDGE_SELECT_REQUESTED: "graph.edge.select.requested",
+	GRAPH_EDGE_SELECTION_CLEAR_REQUESTED: "graph.edge.selection.clear.requested",
+	GRAPH_EDGE_UPDATE_REQUESTED: "graph.edge.update.requested",
+	GRAPH_EDGE_DELETE_REQUESTED: "graph.edge.delete.requested",
+
+	/* ── Graph: selection ── */
+	GRAPH_SELECTION_CLEAR_REQUESTED: "graph.selection.clear.requested",
+	GRAPH_SELECTION_SET_REQUESTED: "graph.selection.set.requested",
+
+	/* ── Graph: viewport ── */
+	GRAPH_VIEWPORT_UPDATE_REQUESTED: "graph.viewport.update.requested",
+
+	/* ── Graph: document ── */
+	GRAPH_DOCUMENT_LOAD_REQUESTED: "graph.document.load.requested",
+	GRAPH_DOCUMENT_SAVE_REQUESTED: "graph.document.save.requested",
+	GRAPH_DOCUMENT_UNDO_REQUESTED: "graph.document.undo.requested",
+	GRAPH_DOCUMENT_REDO_REQUESTED: "graph.document.redo.requested",
+
+	/* ── Graph: published state changes ── */
+	GRAPH_NODE_SELECTED: "graph.node.selected",
+	GRAPH_NODE_UPDATED: "graph.node.updated",
+	GRAPH_NODE_CREATED: "graph.node.created",
+	GRAPH_NODE_DELETED: "graph.node.deleted",
+	GRAPH_EDGE_CREATED: "graph.edge.created",
+	GRAPH_EDGE_SELECTED: "graph.edge.selected",
+	GRAPH_EDGE_SELECTION_CLEARED: "graph.edge.selection.cleared",
+	GRAPH_EDGE_UPDATED: "graph.edge.updated",
+	GRAPH_EDGE_DELETED: "graph.edge.deleted",
+	GRAPH_SELECTION_CLEARED: "graph.selection.cleared",
+	GRAPH_SELECTION_SET: "graph.selection.set",
+	GRAPH_VIEWPORT_CHANGED: "graph.viewport.changed",
+	GRAPH_HISTORY_CHANGED: "graph.history.changed",
+	GRAPH_AUTOSAVE_STATE_CHANGED: "graph.autosave.state.changed",
+	GRAPH_DOCUMENT_LOADED: "graph.document.loaded",
+	GRAPH_DOCUMENT_SAVED: "graph.document.saved",
+	GRAPH_DOCUMENT_AUTOSAVED: "graph.document.autosaved",
+	GRAPH_DOCUMENT_CHANGED: "graph.document.changed",
+
+	/* ── UI: toolbar / panel ── */
+	TOOLBAR_TOOL_CHANGED: "toolbar.tool.changed",
+	INSPECTOR_TAB_CHANGED: "inspector.tab.changed",
+	PANEL_BOTTOM_TAB_CHANGED: "panel.bottom.tab.changed",
+	PANEL_DEV_CONSOLE_TOGGLED: "panel.dev.console.toggled",
+	ACTIVITY_LOG_APPENDED: "activity.log.appended",
+	TASK_QUEUE_UPDATED: "task.queue.updated",
+	UI_RUNTIME_STATE_CHANGED: "ui.runtime.state.changed",
+
+	/* ── CAR: memory input ── */
+	CAR_MEMORY_SUBMIT_REQUESTED: "car.memory.submit.requested",
+	CAR_MEMORY_CREATED: "car.memory.created",
+	CAR_MEMORY_PROCESSING: "car.memory.processing",
+
+	/* ── CAR: query / retrieval ── */
+	CAR_QUERY_SUBMIT_REQUESTED: "car.query.submit.requested",
+	CAR_RETRIEVAL_STARTED: "car.retrieval.started",
+	CAR_RETRIEVAL_STEP_STARTED: "car.retrieval.step.started",
+	CAR_RETRIEVAL_STEP_COMPLETED: "car.retrieval.step.completed",
+	CAR_RETRIEVAL_COMPLETED: "car.retrieval.completed",
+	CAR_RETRIEVAL_FAILED: "car.retrieval.failed",
+	CAR_RETRIEVAL_RESET: "car.retrieval.reset",
+
+	/* ── CAR: consolidation ── */
+	CAR_CONSOLIDATION_STARTED: "car.consolidation.started",
+	CAR_CONSOLIDATION_PROMOTED: "car.consolidation.promoted",
+	CAR_CONSOLIDATION_COMPLETED: "car.consolidation.completed",
+
+	/* ── CAR: contradiction ── */
+	CAR_CONTRADICTION_DETECTED: "car.contradiction.detected",
+	CAR_CONTRADICTION_RESOLVED: "car.contradiction.resolved",
+
+	/* ── CAR: questions ── */
+	CAR_QUESTIONS_GENERATED: "car.questions.generated",
+	CAR_QUESTION_ANSWERED: "car.question.answered",
+
+	/* ── CAR: clusters ── */
+	CAR_CLUSTER_FORMED: "car.cluster.formed",
+	CAR_CLUSTER_EXPANDED: "car.cluster.expanded",
+	CAR_CLUSTER_DISSOLVED: "car.cluster.dissolved",
+
+	/* ── CAR: triggers ── */
+	CAR_TRIGGER_CREATED: "car.trigger.created",
+	CAR_TRIGGER_FIRED: "car.trigger.fired",
+
+	/* ── CAR: scoring / metamemory ── */
+	CAR_RELEVANCE_RECALCULATED: "car.relevance.recalculated",
+	CAR_METAMEMORY_UPDATED: "car.metamemory.updated",
+
+	/* ── CAR: 3D canvas ── */
+	CAR_CANVAS_NODE_HOVERED: "car.canvas.node.hovered",
+	CAR_CANVAS_NODE_UNHOVERED: "car.canvas.node.unhovered",
+	CAR_CANVAS_CAMERA_FOCUS: "car.canvas.camera.focus",
+	CAR_CANVAS_CAMERA_HOME: "car.canvas.camera.home",
+
+	/* ── Legacy runtime (kept for compatibility) ── */
+	RUNTIME_AGENT_RUN_REQUESTED: "runtime.agent.run.requested",
+	RUNTIME_SUBTREE_RUN_REQUESTED: "runtime.subtree.run.requested",
+	RUNTIME_ALL_RUN_REQUESTED: "runtime.all.run.requested",
+	RUNTIME_AGENT_RUN_STARTED: "runtime.agent.run.started",
+	RUNTIME_AGENT_RUN_COMPLETED: "runtime.agent.run.completed",
+	RUNTIME_AGENT_RUN_FAILED: "runtime.agent.run.failed",
+	RUNTIME_RUN_HISTORY_APPENDED: "runtime.run.history.appended",
+	RUNTIME_ERROR_APPENDED: "runtime.error.appended",
+	RUNTIME_DATA_REFRESHED: "runtime.data.refreshed",
 });
diff --git a/js/core/graph-document.js b/js/core/graph-document.js
index 6a8eb2e..e844007 100644
--- a/js/core/graph-document.js
+++ b/js/core/graph-document.js
@@ -1,82 +1,203 @@
 import { EDGE_TYPE_VALUES, NODE_TYPE_VALUES } from "./types.js";
-import { clone, uid } from "./utils.js";
-
-export const createNode = (partial = {}) => ({
-  id: partial.id ?? uid("node"),
-  type: partial.type ?? "note",
-  label: partial.label ?? "Untitled Node",
-  description: partial.description ?? "",
-  position: partial.position ?? { x: 0, y: 0 },
-  data: partial.data ?? {},
-  metadata: partial.metadata ?? {}
+import { clone, nowIso, uid } from "./utils.js";
+
+/* ── Default metadata factories per node type ── */
+
+const defaultChunkData = () => ({
+	content: "",
+	tier: 1,
+	session_id: "",
+	source: "user_stated",
+	source_reliability: "high",
+	participants: [],
+	emotional_tone: "neutral",
+	emotional_intensity: 0,
+	stakes_level: "low",
+	topic_tags: [],
+	entity_tags: [],
+	decision_made: false,
+	action_items: [],
+	status: "open",
+	preceding_context_id: null,
+	following_context_id: null,
+	access_count: 1,
+	last_accessed: nowIso(),
+	retrieval_cues: [],
+	amendments: [],
+	linked_chunks: [],
+	generated_questions: [],
+});
+
+const defaultQuestionData = () => ({
+	level: 1,
+	question_text: "",
+	answer_text: null,
+	answered: false,
+	parent_question_id: null,
+	linked_chunk_ids: [],
+	confidence: null,
 });
 
+const defaultPatternData = () => ({
+	pattern: "",
+	evidence: [],
+	confidence: 0,
+	implication: "",
+	pattern_type: "causal_recurring",
+	exceptions: [],
+});
+
+const defaultTriggerData = () => ({
+	content: "",
+	trigger_conditions: [],
+	expires: null,
+	fired: false,
+	fire_count: 0,
+});
+
+const defaultClusterData = () => ({
+	member_ids: [],
+	cluster_strength: 0,
+	shared_tags: [],
+	shared_entities: [],
+	color: 0xffffff,
+});
+
+const DATA_FACTORY_BY_TYPE = {
+	chunk: defaultChunkData,
+	question: defaultQuestionData,
+	pattern: defaultPatternData,
+	trigger: defaultTriggerData,
+	cluster: defaultClusterData,
+};
+
+/* ── Node / Edge factories ── */
+
+export const createNode = (partial = {}) => {
+	const type = partial.type ?? "chunk";
+	const factory = DATA_FACTORY_BY_TYPE[type] ?? defaultChunkData;
+	const defaults = factory();
+	return {
+		id: partial.id ?? uid("node"),
+		type,
+		label: partial.label ?? "Untitled",
+		description: partial.description ?? "",
+		position: {
+			x: Number(partial.position?.x ?? 0),
+			y: Number(partial.position?.y ?? 0),
+			z: Number(partial.position?.z ?? 0),
+		},
+		data: { ...defaults, ...(partial.data ?? {}) },
+		metadata: { createdAt: nowIso(), ...(partial.metadata ?? {}) },
+	};
+};
+
 export const createEdge = (partial = {}) => ({
-  id: partial.id ?? uid("edge"),
-  type: partial.type ?? "depends_on",
-  source: partial.source ?? "",
-  target: partial.target ?? "",
-  label: partial.label ?? "",
-  metadata: partial.metadata ?? {}
+	id: partial.id ?? uid("edge"),
+	type: partial.type ?? "linked_to",
+	source: partial.source ?? "",
+	target: partial.target ?? "",
+	label: partial.label ?? "",
+	metadata: partial.metadata ?? {},
 });
 
+/* ── Graph document ── */
+
 export const createGraphDocument = ({
-  id = uid("graph"),
-  title = "Untitled MindGraph",
-  version = "0.1.0",
-  nodes = [],
-  edges = [],
-  viewport = { x: 0, y: 0, zoom: 1 },
-  metadata = {}
+	id = uid("brain"),
+	title = "CAR Brain",
+	version = "1.0.0",
+	project = null,
+	runner = "claude-code",
+	nodes = [],
+	edges = [],
+	clusters = [],
+	viewport = { x: 0, y: 0, z: 0, zoom: 1, rotationX: 0, rotationY: 0 },
+	metadata = {},
 } = {}) => ({
-  id,
-  title,
-  version,
-  nodes: nodes.map((node) => createNode(node)),
-  edges: edges.map((edge) => createEdge(edge)),
-  viewport,
-  metadata
+	id,
+	title,
+	version,
+	project,
+	runner,
+	nodes: nodes.map((node) => createNode(node)),
+	edges: edges.map((edge) => createEdge(edge)),
+	clusters,
+	viewport,
+	metadata: {
+		createdBy: "car-brain",
+		description: "",
+		selection: [],
+		lastSession: nowIso(),
+		totalChunks: 0,
+		totalQueries: 0,
+		...metadata,
+	},
 });
 
 export const normalizeGraphDocument = (rawDocument = {}) =>
-  createGraphDocument({
-    ...rawDocument,
-    nodes: Array.isArray(rawDocument.nodes) ? rawDocument.nodes : [],
-    edges: Array.isArray(rawDocument.edges) ? rawDocument.edges : []
-  });
+	createGraphDocument({
+		...rawDocument,
+		nodes: Array.isArray(rawDocument.nodes) ? rawDocument.nodes : [],
+		edges: Array.isArray(rawDocument.edges) ? rawDocument.edges : [],
+		clusters: Array.isArray(rawDocument.clusters) ? rawDocument.clusters : [],
+	});
 
 export const validateGraphDocument = (document) => {
-  if (!document || typeof document !== "object") {
-    return { valid: false, errors: ["Document must be an object"] };
-  }
-
-  const errors = [];
-  if (!Array.isArray(document.nodes)) errors.push("nodes must be an array");
-  if (!Array.isArray(document.edges)) errors.push("edges must be an array");
-
-  for (const node of document.nodes ?? []) {
-    if (!NODE_TYPE_VALUES.includes(node.type)) {
-      errors.push(`Invalid node type: ${node.type}`);
-    }
-  }
-
-  for (const edge of document.edges ?? []) {
-    if (!EDGE_TYPE_VALUES.includes(edge.type)) {
-      errors.push(`Invalid edge type: ${edge.type}`);
-    }
-  }
-
-  return { valid: errors.length === 0, errors };
+	if (!document || typeof document !== "object") {
+		return { valid: false, errors: ["Document must be an object"] };
+	}
+
+	const errors = [];
+	if (!Array.isArray(document.nodes)) errors.push("nodes must be an array");
+	if (!Array.isArray(document.edges)) errors.push("edges must be an array");
+
+	for (const node of document.nodes ?? []) {
+		if (!NODE_TYPE_VALUES.includes(node.type)) {
+			errors.push(`Invalid node type: ${node.type}`);
+		}
+	}
+
+	for (const edge of document.edges ?? []) {
+		if (!EDGE_TYPE_VALUES.includes(edge.type)) {
+			errors.push(`Invalid edge type: ${edge.type}`);
+		}
+	}
+
+	return { valid: errors.length === 0, errors };
 };
 
 export const updateNode = (document, nodeId, patch) => {
-  const next = clone(document);
-  next.nodes = next.nodes.map((node) => (node.id === nodeId ? { ...node, ...patch } : node));
-  return next;
+	const next = clone(document);
+	next.nodes = next.nodes.map((node) =>
+		node.id === nodeId ? { ...node, ...patch } : node,
+	);
+	return next;
 };
 
 export const findNodeById = (document, nodeId) =>
-  (document.nodes ?? []).find((node) => node.id === nodeId) ?? null;
+	(document.nodes ?? []).find((node) => node.id === nodeId) ?? null;
 
 export const findEdgeById = (document, edgeId) =>
-  (document.edges ?? []).find((edge) => edge.id === edgeId) ?? null;
+	(document.edges ?? []).find((edge) => edge.id === edgeId) ?? null;
+
+export const findNodesByType = (document, type) =>
+	(document.nodes ?? []).filter((node) => node.type === type);
+
+export const findEdgesByType = (document, type) =>
+	(document.edges ?? []).filter((edge) => edge.type === type);
+
+export const getConnectedNodes = (document, nodeId) => {
+	const edges = document.edges ?? [];
+	const connectedIds = new Set();
+	for (const edge of edges) {
+		if (edge.source === nodeId) connectedIds.add(edge.target);
+		if (edge.target === nodeId) connectedIds.add(edge.source);
+	}
+	return (document.nodes ?? []).filter((node) => connectedIds.has(node.id));
+};
+
+export const getChunksByTier = (document, tier) =>
+	(document.nodes ?? []).filter(
+		(node) => node.type === "chunk" && node.data?.tier === tier,
+	);
diff --git a/js/core/types.js b/js/core/types.js
index 51a060b..62168d0 100644
--- a/js/core/types.js
+++ b/js/core/types.js
@@ -1,22 +1,35 @@
 export const NODE_TYPES = Object.freeze({
-  NOTE: "note",
-  AGENT: "agent",
-  DATA: "data",
-  TRANSFORMER: "transformer",
-  VIEW: "view",
-  ACTION: "action"
+	CHUNK: "chunk",
+	CLUSTER: "cluster",
+	QUESTION: "question",
+	PATTERN: "pattern",
+	TRIGGER: "trigger",
 });
 
 export const EDGE_TYPES = Object.freeze({
-  PARENT_OF: "parent_of",
-  DEPENDS_ON: "depends_on",
-  INFORMS: "informs",
-  READS_FROM: "reads_from",
-  WRITES_TO: "writes_to",
-  TRANSFORMS: "transforms",
-  CRITIQUES: "critiques",
-  REPORTS_TO: "reports_to",
-  TRIGGERS: "triggers"
+	LINKED_TO: "linked_to",
+	AMENDS: "amends",
+	CONTRADICTS: "contradicts",
+	PROMOTES_TO: "promotes_to",
+	ANSWERS: "answers",
+	DECOMPOSES_TO: "decomposes_to",
+	CLUSTERS_WITH: "clusters_with",
+	PRECEDED_BY: "preceded_by",
+	TRIGGERS: "triggers",
+});
+
+export const CHUNK_TIERS = Object.freeze({
+	T1: 1,
+	T2: 2,
+	T3: 3,
+});
+
+export const QUESTION_LEVELS = Object.freeze({
+	L1_BARE_FACT: 1,
+	L2_EXPLANATION: 2,
+	L3_IMPLICATION: 3,
+	L4_COUNTERFACTUAL: 4,
+	L5_CONDITIONAL: 5,
 });
 
 export const NODE_TYPE_VALUES = Object.freeze(Object.values(NODE_TYPES));
diff --git a/js/store/graph-store.js b/js/store/graph-store.js
index e7babc7..4458d60 100644
--- a/js/store/graph-store.js
+++ b/js/store/graph-store.js
@@ -1,668 +1,854 @@
 import { HISTORY_LIMITS } from "../core/constants.js";
 import { EVENTS } from "../core/event-constants.js";
 import * as graphDocument from "../core/graph-document.js";
+import { publish, subscribe } from "../core/pan.js";
 import { seedDocument } from "../core/seed-data.js";
 import { clone } from "../core/utils.js";
-import { publish, subscribe } from "../core/pan.js";
 
-const unique = (items) => [...new Set((Array.isArray(items) ? items : []).filter(Boolean))];
+const unique = (items) => [
+	...new Set((Array.isArray(items) ? items : []).filter(Boolean)),
+];
 const {
-  createEdge,
-  createNode,
-  findNodeById,
-  normalizeGraphDocument,
-  updateNode: patchGraphNode,
-  validateGraphDocument
+	createEdge,
+	createNode,
+	findNodeById,
+	normalizeGraphDocument,
+	updateNode: patchGraphNode,
+	validateGraphDocument,
+	findNodesByType,
+	getConnectedNodes,
 } = graphDocument;
 const findEdgeById =
-  graphDocument.findEdgeById ??
-  ((document, edgeId) => (document?.edges ?? []).find((edge) => edge.id === edgeId) ?? null);
+	graphDocument.findEdgeById ??
+	((document, edgeId) =>
+		(document?.edges ?? []).find((edge) => edge.id === edgeId) ?? null);
 
 class GraphStore {
-  #document = null;
-  #selectedNodeIds = [];
-  #selectedEdgeId = null;
-  #undoStack = [];
-  #redoStack = [];
-
-  constructor() {
-    subscribe(EVENTS.GRAPH_DOCUMENT_LOAD_REQUESTED, ({ payload }) => {
-      if (!payload?.document) return;
-      this.load(payload.document, { reason: payload?.reason ?? "request" });
-    });
-
-    subscribe(EVENTS.GRAPH_DOCUMENT_SAVE_REQUESTED, () => {
-      this.save();
-    });
-
-    subscribe(EVENTS.GRAPH_DOCUMENT_UNDO_REQUESTED, () => {
-      this.undo();
-    });
-
-    subscribe(EVENTS.GRAPH_DOCUMENT_REDO_REQUESTED, () => {
-      this.redo();
-    });
-
-    subscribe(EVENTS.GRAPH_NODE_SELECT_REQUESTED, ({ payload }) => {
-      this.setSelectedNode(payload?.nodeId, {
-        additive: Boolean(payload?.additive),
-        toggle: Boolean(payload?.toggle)
-      });
-    });
-
-    subscribe(EVENTS.GRAPH_SELECTION_CLEAR_REQUESTED, () => {
-      this.clearSelection();
-    });
-
-    subscribe(EVENTS.GRAPH_SELECTION_SET_REQUESTED, ({ payload }) => {
-      this.setSelection(unique(payload?.nodeIds));
-    });
-
-    subscribe(EVENTS.GRAPH_NODE_UPDATE_REQUESTED, ({ payload }) => {
-      if (!payload?.nodeId || !payload?.patch) return;
-      this.updateNode(payload.nodeId, payload.patch);
-    });
-
-    subscribe(EVENTS.GRAPH_NODE_MOVE_REQUESTED, ({ payload }) => {
-      if (!payload?.nodeId || !payload?.position) return;
-      this.updateNodePosition(payload.nodeId, payload.position);
-    });
-
-    subscribe(EVENTS.GRAPH_NODE_CREATE_REQUESTED, ({ payload }) => {
-      const created = this.addNode(payload?.node ?? payload ?? {});
-      if (created && payload?.selectAfterCreate) {
-        this.setSelection([created.id]);
-      }
-    });
-
-    subscribe(EVENTS.GRAPH_NODE_DELETE_REQUESTED, ({ payload }) => {
-      const ids = unique(payload?.nodeIds ?? [payload?.nodeId]);
-      ids.forEach((nodeId) => this.removeNode(nodeId));
-    });
-
-    subscribe(EVENTS.GRAPH_EDGE_CREATE_REQUESTED, ({ payload }) => {
-      if (!payload) return;
-      this.addEdge(payload.edge ?? payload, { selectAfterCreate: Boolean(payload?.selectAfterCreate) });
-    });
-
-    subscribe(EVENTS.GRAPH_EDGE_SELECT_REQUESTED, ({ payload }) => {
-      this.setSelectedEdge(payload?.edgeId ?? null);
-    });
-
-    subscribe(EVENTS.GRAPH_EDGE_SELECTION_CLEAR_REQUESTED, () => {
-      this.clearSelectedEdge();
-    });
-
-    subscribe(EVENTS.GRAPH_EDGE_UPDATE_REQUESTED, ({ payload }) => {
-      if (!payload?.edgeId || !payload?.patch) return;
-      this.updateEdge(payload.edgeId, payload.patch);
-    });
-
-    subscribe(EVENTS.GRAPH_EDGE_DELETE_REQUESTED, ({ payload }) => {
-      if (!payload?.edgeId) return;
-      this.removeEdge(payload.edgeId);
-    });
-
-    subscribe(EVENTS.GRAPH_VIEWPORT_UPDATE_REQUESTED, ({ payload }) => {
-      this.updateViewport(payload);
-    });
-  }
-
-  load(documentLike, { fromHistory = false, reason = "load" } = {}) {
-    const normalized = normalizeGraphDocument(documentLike);
-    const validation = validateGraphDocument(normalized);
-
-    if (!validation.valid) {
-      throw new Error(`Invalid graph document: ${validation.errors.join(", ")}`);
-    }
-
-    if (!fromHistory && this.#document) {
-      this.#pushUndo(this.#document);
-      this.#redoStack = [];
-      this.#emitHistoryState();
-    }
-
-    this.#document = normalized;
-    this.#syncSelectionFromDocument();
-    this.#persistSelectionToDocument();
-    this.#emitHistoryState();
-
-    const snapshot = this.getDocument();
-    publish(EVENTS.GRAPH_VIEWPORT_CHANGED, {
-      ...(snapshot?.viewport ?? { x: 0, y: 0, zoom: 1 }),
-      origin: "graph-store"
-    });
-    publish(EVENTS.GRAPH_DOCUMENT_LOADED, { document: snapshot, reason, origin: "graph-store" });
-    publish(EVENTS.GRAPH_DOCUMENT_CHANGED, { document: snapshot, reason, origin: "graph-store" });
-    this.#emitSelectionState();
-
-    return snapshot;
-  }
-
-  loadSeededGraph() {
-    return this.load(seedDocument, { reason: "seed" });
-  }
-
-  save() {
-    const snapshot = this.getDocument();
-    publish(EVENTS.GRAPH_DOCUMENT_SAVED, { document: snapshot, origin: "graph-store" });
-    return snapshot;
-  }
-
-  undo() {
-    if (!this.canUndo() || !this.#document) return null;
-    const previous = this.#undoStack.pop();
-    this.#redoStack.push(clone(this.#document));
-    this.#document = clone(previous);
-    this.#syncSelectionFromDocument();
-    this.#persistSelectionToDocument();
-    this.#emitHistoryState();
-
-    const snapshot = this.getDocument();
-    publish(EVENTS.GRAPH_VIEWPORT_CHANGED, {
-      ...(snapshot?.viewport ?? { x: 0, y: 0, zoom: 1 }),
-      origin: "graph-store"
-    });
-    publish(EVENTS.GRAPH_DOCUMENT_LOADED, {
-      document: snapshot,
-      origin: "graph-store",
-      operation: "undo"
-    });
-    publish(EVENTS.GRAPH_DOCUMENT_CHANGED, {
-      document: snapshot,
-      origin: "graph-store",
-      reason: "undo"
-    });
-    this.#emitSelectionState();
-
-    return snapshot;
-  }
-
-  redo() {
-    if (!this.canRedo() || !this.#document) return null;
-    const next = this.#redoStack.pop();
-    this.#undoStack.push(clone(this.#document));
-    this.#document = clone(next);
-    this.#syncSelectionFromDocument();
-    this.#persistSelectionToDocument();
-    this.#emitHistoryState();
-
-    const snapshot = this.getDocument();
-    publish(EVENTS.GRAPH_VIEWPORT_CHANGED, {
-      ...(snapshot?.viewport ?? { x: 0, y: 0, zoom: 1 }),
-      origin: "graph-store"
-    });
-    publish(EVENTS.GRAPH_DOCUMENT_LOADED, {
-      document: snapshot,
-      origin: "graph-store",
-      operation: "redo"
-    });
-    publish(EVENTS.GRAPH_DOCUMENT_CHANGED, {
-      document: snapshot,
-      origin: "graph-store",
-      reason: "redo"
-    });
-    this.#emitSelectionState();
-
-    return snapshot;
-  }
-
-  canUndo() {
-    return this.#undoStack.length > 0;
-  }
-
-  canRedo() {
-    return this.#redoStack.length > 0;
-  }
-
-  getHistoryState() {
-    return {
-      canUndo: this.canUndo(),
-      canRedo: this.canRedo(),
-      undoCount: this.#undoStack.length,
-      redoCount: this.#redoStack.length
-    };
-  }
-
-  getDocument() {
-    return this.#document ? clone(this.#document) : null;
-  }
-
-  getNodes() {
-    return this.#document ? clone(this.#document.nodes ?? []) : [];
-  }
-
-  getEdges() {
-    return this.#document ? clone(this.#document.edges ?? []) : [];
-  }
-
-  getNode(nodeId) {
-    if (!this.#document) return null;
-    const node = findNodeById(this.#document, nodeId);
-    return node ? clone(node) : null;
-  }
-
-  getEdge(edgeId) {
-    if (!this.#document) return null;
-    const edge = findEdgeById(this.#document, edgeId);
-    return edge ? clone(edge) : null;
-  }
-
-  getSelectedEdgeId() {
-    return this.#selectedEdgeId;
-  }
-
-  getSelectedNodeIds() {
-    return [...this.#selectedNodeIds];
-  }
-
-  getSelectedNodeId() {
-    return this.#selectedNodeIds[0] ?? null;
-  }
-
-  setSelectedNode(nodeId, { additive = false, toggle = false } = {}) {
-    if (!this.#document || !nodeId) return null;
-    const node = this.getNode(nodeId);
-    if (!node) return null;
-
-    const nextIds = additive ? [...this.#selectedNodeIds] : [];
-    const index = nextIds.indexOf(nodeId);
-
-    if (index >= 0) {
-      if (toggle || additive) nextIds.splice(index, 1);
-      else return node;
-    } else {
-      nextIds.unshift(nodeId);
-    }
-
-    if (!nextIds.length && !additive) {
-      nextIds.push(nodeId);
-    }
-
-    this.setSelection(nextIds);
-    return node;
-  }
-
-  clearSelection() {
-    this.clearSelectedEdge({ emitChange: false });
-    if (!this.#selectedNodeIds.length) {
-      publish(EVENTS.GRAPH_SELECTION_CLEARED, { origin: "graph-store" });
-      publish(EVENTS.GRAPH_SELECTION_SET, { nodeIds: [], nodeId: null, origin: "graph-store" });
-      return;
-    }
-
-    this.#selectedNodeIds = [];
-    this.#persistSelectionToDocument();
-    publish(EVENTS.GRAPH_SELECTION_CLEARED, { origin: "graph-store" });
-    publish(EVENTS.GRAPH_SELECTION_SET, { nodeIds: [], nodeId: null, origin: "graph-store" });
-    this.#emitDocumentChanged("selection");
-  }
-
-  setSelection(nodeIds = []) {
-    if (!this.#document) return;
-
-    this.clearSelectedEdge({ emitChange: false });
-    const validIds = unique(nodeIds).filter((nodeId) => Boolean(findNodeById(this.#document, nodeId)));
-    this.#selectedNodeIds = validIds;
-    this.#persistSelectionToDocument();
-
-    if (!validIds.length) {
-      publish(EVENTS.GRAPH_SELECTION_CLEARED, { origin: "graph-store" });
-      publish(EVENTS.GRAPH_SELECTION_SET, { nodeIds: [], nodeId: null, origin: "graph-store" });
-    } else {
-      publish(EVENTS.GRAPH_NODE_SELECTED, {
-        nodeId: validIds[0],
-        nodeIds: [...validIds],
-        origin: "graph-store"
-      });
-      publish(EVENTS.GRAPH_SELECTION_SET, {
-        nodeId: validIds[0],
-        nodeIds: [...validIds],
-        origin: "graph-store"
-      });
-    }
-
-    this.#emitDocumentChanged("selection");
-  }
-
-  updateViewport(nextViewport = {}) {
-    if (!this.#document) return null;
-
-    const prev = this.#document.viewport ?? { x: 0, y: 0, zoom: 1 };
-    const nextZoom = Number(nextViewport.zoom ?? prev.zoom ?? 1);
-    const nextX = Number(nextViewport.x ?? prev.x ?? 0);
-    const nextY = Number(nextViewport.y ?? prev.y ?? 0);
-
-    this.#document.viewport = {
-      x: Number.isFinite(nextX) ? nextX : prev.x ?? 0,
-      y: Number.isFinite(nextY) ? nextY : prev.y ?? 0,
-      zoom: Number.isFinite(nextZoom) ? nextZoom : prev.zoom ?? 1
-    };
-
-    publish(EVENTS.GRAPH_VIEWPORT_CHANGED, {
-      ...this.#document.viewport,
-      origin: "graph-store"
-    });
-    this.#emitDocumentChanged("viewport");
-
-    return clone(this.#document.viewport);
-  }
-
-  updateNodePosition(nodeId, position) {
-    const nextPosition = {
-      x: Number(position?.x ?? 0),
-      y: Number(position?.y ?? 0)
-    };
-
-    return this.updateNode(nodeId, { position: nextPosition });
-  }
-
-  updateNode(nodeId, patch) {
-    if (!this.#document || !nodeId || !patch) return null;
-
-    const existing = findNodeById(this.#document, nodeId);
-    if (!existing) return null;
-
-    const normalizedPatch = { ...patch };
-    if (normalizedPatch.position) {
-      normalizedPatch.position = {
-        x: Number(normalizedPatch.position.x ?? existing.position?.x ?? 0),
-        y: Number(normalizedPatch.position.y ?? existing.position?.y ?? 0)
-      };
-    }
-
-    this.#applyMutation(() => {
-      this.#document = patchGraphNode(this.#document, nodeId, normalizedPatch);
-    });
-
-    const node = this.getNode(nodeId);
-
-    publish(EVENTS.GRAPH_NODE_UPDATED, {
-      nodeId,
-      patch: normalizedPatch,
-      node,
-      origin: "graph-store"
-    });
-
-    this.#emitDocumentChanged("node_updated", { nodeId });
-    return node;
-  }
-
-  patchNode(nodeId, patch) {
-    return this.updateNode(nodeId, patch);
-  }
-
-  addNode(nodeLike = {}) {
-    if (!this.#document) return null;
-
-    const node = createNode(nodeLike);
-
-    this.#applyMutation(() => {
-      this.#document.nodes = [...(this.#document.nodes ?? []), node];
-    });
-
-    publish(EVENTS.GRAPH_NODE_CREATED, {
-      node: clone(node),
-      nodeId: node.id,
-      origin: "graph-store"
-    });
-
-    this.#emitDocumentChanged("node_created", { nodeId: node.id });
-    return clone(node);
-  }
-
-  removeNode(nodeId) {
-    if (!this.#document) return null;
-
-    const node = findNodeById(this.#document, nodeId);
-    if (!node) return null;
-
-    this.#applyMutation(() => {
-      this.#document.nodes = (this.#document.nodes ?? []).filter((entry) => entry.id !== nodeId);
-      this.#document.edges = (this.#document.edges ?? []).filter(
-        (edge) => edge.source !== nodeId && edge.target !== nodeId
-      );
-    });
-
-    if (this.#selectedEdgeId && !findEdgeById(this.#document, this.#selectedEdgeId)) {
-      this.clearSelectedEdge({ emitChange: false });
-    }
-
-    if (this.#selectedNodeIds.includes(nodeId)) {
-      this.#selectedNodeIds = this.#selectedNodeIds.filter((id) => id !== nodeId);
-      this.#persistSelectionToDocument();
-      this.#emitSelectionState();
-    }
-
-    publish(EVENTS.GRAPH_NODE_DELETED, {
-      nodeId,
-      node: clone(node),
-      origin: "graph-store"
-    });
-
-    this.#emitDocumentChanged("node_deleted", { nodeId });
-    return clone(node);
-  }
-
-  setSelectedEdge(edgeId) {
-    if (!this.#document || !edgeId) {
-      this.clearSelectedEdge();
-      return null;
-    }
-
-    const edge = this.getEdge(edgeId);
-    if (!edge) return null;
-
-    this.#selectedEdgeId = edge.id;
-    this.#selectedNodeIds = [];
-    this.#persistSelectionToDocument();
-    publish(EVENTS.GRAPH_SELECTION_CLEARED, { origin: "graph-store" });
-    publish(EVENTS.GRAPH_SELECTION_SET, { nodeIds: [], nodeId: null, origin: "graph-store" });
-    publish(EVENTS.GRAPH_EDGE_SELECTED, {
-      edgeId: edge.id,
-      edge,
-      origin: "graph-store"
-    });
-    this.#emitDocumentChanged("edge_selection");
-    return edge;
-  }
-
-  clearSelectedEdge({ emitChange = true } = {}) {
-    if (!this.#selectedEdgeId) return;
-
-    this.#selectedEdgeId = null;
-    this.#persistSelectionToDocument();
-    publish(EVENTS.GRAPH_EDGE_SELECTION_CLEARED, { origin: "graph-store" });
-    if (emitChange) this.#emitDocumentChanged("edge_selection_cleared");
-  }
-
-  addEdge(edgeLike = {}, { selectAfterCreate = false } = {}) {
-    if (!this.#document) return null;
-
-    const edge = createEdge(edgeLike);
-    const sourceExists = Boolean(findNodeById(this.#document, edge.source));
-    const targetExists = Boolean(findNodeById(this.#document, edge.target));
-    if (!sourceExists || !targetExists) return null;
-
-    const duplicate = (this.#document.edges ?? []).some(
-      (entry) =>
-        entry.id === edge.id ||
-        (entry.source === edge.source &&
-          entry.target === edge.target &&
-          entry.type === edge.type &&
-          String(entry.label ?? "") === String(edge.label ?? ""))
-    );
-    if (duplicate) return null;
-
-    this.#applyMutation(() => {
-      this.#document.edges = [...(this.#document.edges ?? []), edge];
-    });
-
-    publish(EVENTS.GRAPH_EDGE_CREATED, {
-      edge: clone(edge),
-      origin: "graph-store"
-    });
-
-    if (selectAfterCreate) {
-      this.setSelectedEdge(edge.id);
-    }
-
-    this.#emitDocumentChanged("edge_created", { edgeId: edge.id });
-    return clone(edge);
-  }
-
-  updateEdge(edgeId, patch) {
-    if (!this.#document || !edgeId || !patch) return null;
-    const existing = findEdgeById(this.#document, edgeId);
-    if (!existing) return null;
-
-    const normalizedPatch = { ...patch };
-    if (normalizedPatch.type != null) normalizedPatch.type = String(normalizedPatch.type);
-    if (normalizedPatch.label != null) normalizedPatch.label = String(normalizedPatch.label);
-
-    this.#applyMutation(() => {
-      this.#document.edges = (this.#document.edges ?? []).map((edge) =>
-        edge.id === edgeId ? { ...edge, ...normalizedPatch } : edge
-      );
-    });
-
-    const edge = this.getEdge(edgeId);
-    publish(EVENTS.GRAPH_EDGE_UPDATED, {
-      edgeId,
-      patch: normalizedPatch,
-      edge,
-      origin: "graph-store"
-    });
-
-    if (this.#selectedEdgeId === edgeId && edge) {
-      publish(EVENTS.GRAPH_EDGE_SELECTED, {
-        edgeId,
-        edge,
-        origin: "graph-store"
-      });
-    }
-
-    this.#emitDocumentChanged("edge_updated", { edgeId });
-    return edge;
-  }
-
-  removeEdge(edgeId) {
-    if (!this.#document || !edgeId) return null;
-    const edge = findEdgeById(this.#document, edgeId);
-    if (!edge) return null;
-
-    this.#applyMutation(() => {
-      this.#document.edges = (this.#document.edges ?? []).filter((entry) => entry.id !== edgeId);
-    });
-
-    if (this.#selectedEdgeId === edgeId) {
-      this.clearSelectedEdge({ emitChange: false });
-    }
-
-    publish(EVENTS.GRAPH_EDGE_DELETED, {
-      edgeId,
-      edge: clone(edge),
-      origin: "graph-store"
-    });
-
-    this.#emitDocumentChanged("edge_deleted", { edgeId });
-    return clone(edge);
-  }
-
-  #applyMutation(run) {
-    if (!this.#document) return;
-    this.#pushUndo(this.#document);
-    this.#redoStack = [];
-    run();
-    this.#persistSelectionToDocument();
-    this.#emitHistoryState();
-  }
-
-  #pushUndo(document) {
-    this.#undoStack.push(clone(document));
-    if (this.#undoStack.length > HISTORY_LIMITS.graphSnapshots) {
-      this.#undoStack.shift();
-    }
-  }
-
-  #emitHistoryState() {
-    publish(EVENTS.GRAPH_HISTORY_CHANGED, {
-      ...this.getHistoryState(),
-      origin: "graph-store"
-    });
-  }
-
-  #emitSelectionState() {
-    if (this.#selectedEdgeId) {
-      const edge = this.getEdge(this.#selectedEdgeId);
-      if (edge) {
-        publish(EVENTS.GRAPH_EDGE_SELECTED, {
-          edgeId: edge.id,
-          edge,
-          origin: "graph-store"
-        });
-        return;
-      }
-    }
-
-    if (!this.#selectedNodeIds.length) {
-      publish(EVENTS.GRAPH_SELECTION_CLEARED, { origin: "graph-store" });
-      publish(EVENTS.GRAPH_SELECTION_SET, { nodeIds: [], nodeId: null, origin: "graph-store" });
-      return;
-    }
-
-    publish(EVENTS.GRAPH_NODE_SELECTED, {
-      nodeId: this.#selectedNodeIds[0],
-      nodeIds: [...this.#selectedNodeIds],
-      origin: "graph-store"
-    });
-    publish(EVENTS.GRAPH_SELECTION_SET, {
-      nodeId: this.#selectedNodeIds[0],
-      nodeIds: [...this.#selectedNodeIds],
-      origin: "graph-store"
-    });
-  }
-
-  #emitDocumentChanged(reason, extra = {}) {
-    publish(EVENTS.GRAPH_DOCUMENT_CHANGED, {
-      document: this.getDocument(),
-      reason,
-      origin: "graph-store",
-      ...extra
-    });
-  }
-
-  #syncSelectionFromDocument() {
-    const selected = this.#document?.metadata?.selection;
-
-    if (Array.isArray(selected) && selected.length) {
-      this.#selectedNodeIds = unique(selected).filter((nodeId) => Boolean(findNodeById(this.#document, nodeId)));
-      this.#selectedEdgeId = null;
-      return;
-    }
-
-    const fallbackNodeId = this.#document?.metadata?.selectedNodeId;
-    if (fallbackNodeId && findNodeById(this.#document, fallbackNodeId)) {
-      this.#selectedNodeIds = [fallbackNodeId];
-      this.#selectedEdgeId = null;
-      return;
-    }
-
-    this.#selectedNodeIds = [];
-    const selectedEdgeId = this.#document?.metadata?.selectedEdgeId;
-    this.#selectedEdgeId =
-      selectedEdgeId && findEdgeById(this.#document, selectedEdgeId) ? selectedEdgeId : null;
-  }
-
-  #persistSelectionToDocument() {
-    if (!this.#document) return;
-    this.#document.metadata = {
-      ...(this.#document.metadata ?? {}),
-      selectedNodeId: this.#selectedNodeIds[0] ?? null,
-      selection: [...this.#selectedNodeIds],
-      selectedEdgeId: this.#selectedEdgeId ?? null
-    };
-  }
+	#document = null;
+	#selectedNodeIds = [];
+	#selectedEdgeId = null;
+	#undoStack = [];
+	#redoStack = [];
+
+	constructor() {
+		subscribe(EVENTS.GRAPH_DOCUMENT_LOAD_REQUESTED, ({ payload }) => {
+			if (!payload?.document) return;
+			this.load(payload.document, { reason: payload?.reason ?? "request" });
+		});
+
+		subscribe(EVENTS.GRAPH_DOCUMENT_SAVE_REQUESTED, () => {
+			this.save();
+		});
+
+		subscribe(EVENTS.GRAPH_DOCUMENT_UNDO_REQUESTED, () => {
+			this.undo();
+		});
+
+		subscribe(EVENTS.GRAPH_DOCUMENT_REDO_REQUESTED, () => {
+			this.redo();
+		});
+
+		subscribe(EVENTS.GRAPH_NODE_SELECT_REQUESTED, ({ payload }) => {
+			this.setSelectedNode(payload?.nodeId, {
+				additive: Boolean(payload?.additive),
+				toggle: Boolean(payload?.toggle),
+			});
+		});
+
+		subscribe(EVENTS.GRAPH_SELECTION_CLEAR_REQUESTED, () => {
+			this.clearSelection();
+		});
+
+		subscribe(EVENTS.GRAPH_SELECTION_SET_REQUESTED, ({ payload }) => {
+			this.setSelection(unique(payload?.nodeIds));
+		});
+
+		subscribe(EVENTS.GRAPH_NODE_UPDATE_REQUESTED, ({ payload }) => {
+			if (!payload?.nodeId || !payload?.patch) return;
+			this.updateNode(payload.nodeId, payload.patch);
+		});
+
+		subscribe(EVENTS.GRAPH_NODE_MOVE_REQUESTED, ({ payload }) => {
+			if (!payload?.nodeId || !payload?.position) return;
+			this.updateNodePosition(payload.nodeId, payload.position);
+		});
+
+		subscribe(EVENTS.GRAPH_NODE_CREATE_REQUESTED, ({ payload }) => {
+			const created = this.addNode(payload?.node ?? payload ?? {});
+			if (created && payload?.selectAfterCreate) {
+				this.setSelection([created.id]);
+			}
+		});
+
+		subscribe(EVENTS.GRAPH_NODE_DELETE_REQUESTED, ({ payload }) => {
+			const ids = unique(payload?.nodeIds ?? [payload?.nodeId]);
+			ids.forEach((nodeId) => this.removeNode(nodeId));
+		});
+
+		subscribe(EVENTS.GRAPH_EDGE_CREATE_REQUESTED, ({ payload }) => {
+			if (!payload) return;
+			this.addEdge(payload.edge ?? payload, {
+				selectAfterCreate: Boolean(payload?.selectAfterCreate),
+			});
+		});
+
+		subscribe(EVENTS.GRAPH_EDGE_SELECT_REQUESTED, ({ payload }) => {
+			this.setSelectedEdge(payload?.edgeId ?? null);
+		});
+
+		subscribe(EVENTS.GRAPH_EDGE_SELECTION_CLEAR_REQUESTED, () => {
+			this.clearSelectedEdge();
+		});
+
+		subscribe(EVENTS.GRAPH_EDGE_UPDATE_REQUESTED, ({ payload }) => {
+			if (!payload?.edgeId || !payload?.patch) return;
+			this.updateEdge(payload.edgeId, payload.patch);
+		});
+
+		subscribe(EVENTS.GRAPH_EDGE_DELETE_REQUESTED, ({ payload }) => {
+			if (!payload?.edgeId) return;
+			this.removeEdge(payload.edgeId);
+		});
+
+		subscribe(EVENTS.GRAPH_VIEWPORT_UPDATE_REQUESTED, ({ payload }) => {
+			this.updateViewport(payload);
+		});
+	}
+
+	/* ── Document lifecycle ── */
+
+	load(documentLike, { fromHistory = false, reason = "load" } = {}) {
+		const normalized = normalizeGraphDocument(documentLike);
+		const validation = validateGraphDocument(normalized);
+
+		if (!validation.valid) {
+			throw new Error(
+				`Invalid graph document: ${validation.errors.join(", ")}`,
+			);
+		}
+
+		if (!fromHistory && this.#document) {
+			this.#pushUndo(this.#document);
+			this.#redoStack = [];
+			this.#emitHistoryState();
+		}
+
+		this.#document = normalized;
+		this.#syncSelectionFromDocument();
+		this.#persistSelectionToDocument();
+		this.#emitHistoryState();
+
+		const snapshot = this.getDocument();
+		publish(EVENTS.GRAPH_VIEWPORT_CHANGED, {
+			...(snapshot?.viewport ?? { x: 0, y: 0, z: 0, zoom: 1 }),
+			origin: "graph-store",
+		});
+		publish(EVENTS.GRAPH_DOCUMENT_LOADED, {
+			document: snapshot,
+			reason,
+			origin: "graph-store",
+		});
+		publish(EVENTS.GRAPH_DOCUMENT_CHANGED, {
+			document: snapshot,
+			reason,
+			origin: "graph-store",
+		});
+		this.#emitSelectionState();
+
+		return snapshot;
+	}
+
+	loadSeededGraph() {
+		return this.load(seedDocument, { reason: "seed" });
+	}
+
+	save() {
+		const snapshot = this.getDocument();
+		publish(EVENTS.GRAPH_DOCUMENT_SAVED, {
+			document: snapshot,
+			origin: "graph-store",
+		});
+		return snapshot;
+	}
+
+	undo() {
+		if (!this.canUndo() || !this.#document) return null;
+		const previous = this.#undoStack.pop();
+		this.#redoStack.push(clone(this.#document));
+		this.#document = clone(previous);
+		this.#syncSelectionFromDocument();
+		this.#persistSelectionToDocument();
+		this.#emitHistoryState();
+
+		const snapshot = this.getDocument();
+		publish(EVENTS.GRAPH_VIEWPORT_CHANGED, {
+			...(snapshot?.viewport ?? { x: 0, y: 0, z: 0, zoom: 1 }),
+			origin: "graph-store",
+		});
+		publish(EVENTS.GRAPH_DOCUMENT_LOADED, {
+			document: snapshot,
+			origin: "graph-store",
+			operation: "undo",
+		});
+		publish(EVENTS.GRAPH_DOCUMENT_CHANGED, {
+			document: snapshot,
+			origin: "graph-store",
+			reason: "undo",
+		});
+		this.#emitSelectionState();
+
+		return snapshot;
+	}
+
+	redo() {
+		if (!this.canRedo() || !this.#document) return null;
+		const next = this.#redoStack.pop();
+		this.#undoStack.push(clone(this.#document));
+		this.#document = clone(next);
+		this.#syncSelectionFromDocument();
+		this.#persistSelectionToDocument();
+		this.#emitHistoryState();
+
+		const snapshot = this.getDocument();
+		publish(EVENTS.GRAPH_VIEWPORT_CHANGED, {
+			...(snapshot?.viewport ?? { x: 0, y: 0, z: 0, zoom: 1 }),
+			origin: "graph-store",
+		});
+		publish(EVENTS.GRAPH_DOCUMENT_LOADED, {
+			document: snapshot,
+			origin: "graph-store",
+			operation: "redo",
+		});
+		publish(EVENTS.GRAPH_DOCUMENT_CHANGED, {
+			document: snapshot,
+			origin: "graph-store",
+			reason: "redo",
+		});
+		this.#emitSelectionState();
+
+		return snapshot;
+	}
+
+	canUndo() {
+		return this.#undoStack.length > 0;
+	}
+
+	canRedo() {
+		return this.#redoStack.length > 0;
+	}
+
+	getHistoryState() {
+		return {
+			canUndo: this.canUndo(),
+			canRedo: this.canRedo(),
+			undoCount: this.#undoStack.length,
+			redoCount: this.#redoStack.length,
+		};
+	}
+
+	/* ── Getters ── */
+
+	getDocument() {
+		return this.#document ? clone(this.#document) : null;
+	}
+
+	getNodes() {
+		return this.#document ? clone(this.#document.nodes ?? []) : [];
+	}
+
+	getEdges() {
+		return this.#document ? clone(this.#document.edges ?? []) : [];
+	}
+
+	getNode(nodeId) {
+		if (!this.#document) return null;
+		const node = findNodeById(this.#document, nodeId);
+		return node ? clone(node) : null;
+	}
+
+	getEdge(edgeId) {
+		if (!this.#document) return null;
+		const edge = findEdgeById(this.#document, edgeId);
+		return edge ? clone(edge) : null;
+	}
+
+	getSelectedEdgeId() {
+		return this.#selectedEdgeId;
+	}
+
+	getSelectedNodeIds() {
+		return [...this.#selectedNodeIds];
+	}
+
+	getSelectedNodeId() {
+		return this.#selectedNodeIds[0] ?? null;
+	}
+
+	/* ── CAR-specific getters ── */
+
+	getNodesByType(type) {
+		if (!this.#document) return [];
+		return clone(findNodesByType(this.#document, type));
+	}
+
+	getChunksByTier(tier) {
+		if (!this.#document) return [];
+		return clone(graphDocument.getChunksByTier(this.#document, tier));
+	}
+
+	getConnectedNodes(nodeId) {
+		if (!this.#document) return [];
+		return clone(getConnectedNodes(this.#document, nodeId));
+	}
+
+	getClusters() {
+		return this.#document ? clone(this.#document.clusters ?? []) : [];
+	}
+
+	getClusterForNode(nodeId) {
+		const clusters = this.#document?.clusters ?? [];
+		return (
+			clone(clusters.find((c) => (c.member_ids ?? []).includes(nodeId))) ?? null
+		);
+	}
+
+	/* ── Cluster mutations ── */
+
+	addCluster(clusterDef) {
+		if (!this.#document) return null;
+		this.#applyMutation(() => {
+			this.#document.clusters = [
+				...(this.#document.clusters ?? []),
+				clusterDef,
+			];
+		});
+		publish(EVENTS.CAR_CLUSTER_FORMED, {
+			cluster: clone(clusterDef),
+			origin: "graph-store",
+		});
+		this.#emitDocumentChanged("cluster_formed");
+		return clone(clusterDef);
+	}
+
+	updateCluster(clusterId, patch) {
+		if (!this.#document) return null;
+		this.#applyMutation(() => {
+			this.#document.clusters = (this.#document.clusters ?? []).map((c) =>
+				c.id === clusterId ? { ...c, ...patch } : c,
+			);
+		});
+		this.#emitDocumentChanged("cluster_updated", { clusterId });
+		return this.getCluster(clusterId);
+	}
+
+	getCluster(clusterId) {
+		const clusters = this.#document?.clusters ?? [];
+		const found = clusters.find((c) => c.id === clusterId);
+		return found ? clone(found) : null;
+	}
+
+	removeCluster(clusterId) {
+		if (!this.#document) return null;
+		const cluster = this.getCluster(clusterId);
+		if (!cluster) return null;
+		this.#applyMutation(() => {
+			this.#document.clusters = (this.#document.clusters ?? []).filter(
+				(c) => c.id !== clusterId,
+			);
+			// Also remove clusters_with edges
+			this.#document.edges = (this.#document.edges ?? []).filter(
+				(edge) =>
+					!(
+						edge.type === "clusters_with" &&
+						(edge.source === clusterId || edge.target === clusterId)
+					),
+			);
+		});
+		publish(EVENTS.CAR_CLUSTER_DISSOLVED, { clusterId, origin: "graph-store" });
+		this.#emitDocumentChanged("cluster_dissolved", { clusterId });
+		return cluster;
+	}
+
+	/* ── Node selection ── */
+
+	setSelectedNode(nodeId, { additive = false, toggle = false } = {}) {
+		if (!this.#document || !nodeId) return null;
+		const node = this.getNode(nodeId);
+		if (!node) return null;
+
+		const nextIds = additive ? [...this.#selectedNodeIds] : [];
+		const index = nextIds.indexOf(nodeId);
+
+		if (index >= 0) {
+			if (toggle || additive) nextIds.splice(index, 1);
+			else return node;
+		} else {
+			nextIds.unshift(nodeId);
+		}
+
+		if (!nextIds.length && !additive) {
+			nextIds.push(nodeId);
+		}
+
+		this.setSelection(nextIds);
+		return node;
+	}
+
+	clearSelection() {
+		this.clearSelectedEdge({ emitChange: false });
+		if (!this.#selectedNodeIds.length) {
+			publish(EVENTS.GRAPH_SELECTION_CLEARED, { origin: "graph-store" });
+			publish(EVENTS.GRAPH_SELECTION_SET, {
+				nodeIds: [],
+				nodeId: null,
+				origin: "graph-store",
+			});
+			return;
+		}
+
+		this.#selectedNodeIds = [];
+		this.#persistSelectionToDocument();
+		publish(EVENTS.GRAPH_SELECTION_CLEARED, { origin: "graph-store" });
+		publish(EVENTS.GRAPH_SELECTION_SET, {
+			nodeIds: [],
+			nodeId: null,
+			origin: "graph-store",
+		});
+		this.#emitDocumentChanged("selection");
+	}
+
+	setSelection(nodeIds = []) {
+		if (!this.#document) return;
+
+		this.clearSelectedEdge({ emitChange: false });
+		const validIds = unique(nodeIds).filter((nodeId) =>
+			Boolean(findNodeById(this.#document, nodeId)),
+		);
+		this.#selectedNodeIds = validIds;
+		this.#persistSelectionToDocument();
+
+		if (!validIds.length) {
+			publish(EVENTS.GRAPH_SELECTION_CLEARED, { origin: "graph-store" });
+			publish(EVENTS.GRAPH_SELECTION_SET, {
+				nodeIds: [],
+				nodeId: null,
+				origin: "graph-store",
+			});
+		} else {
+			publish(EVENTS.GRAPH_NODE_SELECTED, {
+				nodeId: validIds[0],
+				nodeIds: [...validIds],
+				origin: "graph-store",
+			});
+			publish(EVENTS.GRAPH_SELECTION_SET, {
+				nodeId: validIds[0],
+				nodeIds: [...validIds],
+				origin: "graph-store",
+			});
+		}
+
+		this.#emitDocumentChanged("selection");
+	}
+
+	/* ── Viewport ── */
+
+	updateViewport(nextViewport = {}) {
+		if (!this.#document) return null;
+
+		const prev = this.#document.viewport ?? { x: 0, y: 0, z: 0, zoom: 1 };
+		const nextZoom = Number(nextViewport.zoom ?? prev.zoom ?? 1);
+		const nextX = Number(nextViewport.x ?? prev.x ?? 0);
+		const nextY = Number(nextViewport.y ?? prev.y ?? 0);
+		const nextZ = Number(nextViewport.z ?? prev.z ?? 0);
+
+		this.#document.viewport = {
+			x: Number.isFinite(nextX) ? nextX : (prev.x ?? 0),
+			y: Number.isFinite(nextY) ? nextY : (prev.y ?? 0),
+			z: Number.isFinite(nextZ) ? nextZ : (prev.z ?? 0),
+			zoom: Number.isFinite(nextZoom) ? nextZoom : (prev.zoom ?? 1),
+			rotationX: Number(nextViewport.rotationX ?? prev.rotationX ?? 0),
+			rotationY: Number(nextViewport.rotationY ?? prev.rotationY ?? 0),
+		};
+
+		publish(EVENTS.GRAPH_VIEWPORT_CHANGED, {
+			...this.#document.viewport,
+			origin: "graph-store",
+		});
+		this.#emitDocumentChanged("viewport");
+
+		return clone(this.#document.viewport);
+	}
+
+	/* ── Node mutations ── */
+
+	updateNodePosition(nodeId, position) {
+		const nextPosition = {
+			x: Number(position?.x ?? 0),
+			y: Number(position?.y ?? 0),
+			z: Number(position?.z ?? 0),
+		};
+
+		return this.updateNode(nodeId, { position: nextPosition });
+	}
+
+	updateNode(nodeId, patch) {
+		if (!this.#document || !nodeId || !patch) return null;
+
+		const existing = findNodeById(this.#document, nodeId);
+		if (!existing) return null;
+
+		const normalizedPatch = { ...patch };
+		if (normalizedPatch.position) {
+			normalizedPatch.position = {
+				x: Number(normalizedPatch.position.x ?? existing.position?.x ?? 0),
+				y: Number(normalizedPatch.position.y ?? existing.position?.y ?? 0),
+				z: Number(normalizedPatch.position.z ?? existing.position?.z ?? 0),
+			};
+		}
+
+		this.#applyMutation(() => {
+			this.#document = patchGraphNode(this.#document, nodeId, normalizedPatch);
+		});
+
+		const node = this.getNode(nodeId);
+
+		publish(EVENTS.GRAPH_NODE_UPDATED, {
+			nodeId,
+			patch: normalizedPatch,
+			node,
+			origin: "graph-store",
+		});
+
+		this.#emitDocumentChanged("node_updated", { nodeId });
+		return node;
+	}
+
+	patchNode(nodeId, patch) {
+		return this.updateNode(nodeId, patch);
+	}
+
+	addNode(nodeLike = {}) {
+		if (!this.#document) return null;
+
+		const node = createNode(nodeLike);
+
+		this.#applyMutation(() => {
+			this.#document.nodes = [...(this.#document.nodes ?? []), node];
+		});
+
+		publish(EVENTS.GRAPH_NODE_CREATED, {
+			node: clone(node),
+			nodeId: node.id,
+			origin: "graph-store",
+		});
+
+		this.#emitDocumentChanged("node_created", { nodeId: node.id });
+		return clone(node);
+	}
+
+	removeNode(nodeId) {
+		if (!this.#document) return null;
+
+		const node = findNodeById(this.#document, nodeId);
+		if (!node) return null;
+
+		this.#applyMutation(() => {
+			this.#document.nodes = (this.#document.nodes ?? []).filter(
+				(entry) => entry.id !== nodeId,
+			);
+			this.#document.edges = (this.#document.edges ?? []).filter(
+				(edge) => edge.source !== nodeId && edge.target !== nodeId,
+			);
+			// Remove from any clusters
+			this.#document.clusters = (this.#document.clusters ?? []).map((c) => ({
+				...c,
+				member_ids: (c.member_ids ?? []).filter((id) => id !== nodeId),
+			}));
+		});
+
+		if (
+			this.#selectedEdgeId &&
+			!findEdgeById(this.#document, this.#selectedEdgeId)
+		) {
+			this.clearSelectedEdge({ emitChange: false });
+		}
+
+		if (this.#selectedNodeIds.includes(nodeId)) {
+			this.#selectedNodeIds = this.#selectedNodeIds.filter(
+				(id) => id !== nodeId,
+			);
+			this.#persistSelectionToDocument();
+			this.#emitSelectionState();
+		}
+
+		publish(EVENTS.GRAPH_NODE_DELETED, {
+			nodeId,
+			node: clone(node),
+			origin: "graph-store",
+		});
+
+		this.#emitDocumentChanged("node_deleted", { nodeId });
+		return clone(node);
+	}
+
+	/* ── Edge selection ── */
+
+	setSelectedEdge(edgeId) {
+		if (!this.#document || !edgeId) {
+			this.clearSelectedEdge();
+			return null;
+		}
+
+		const edge = this.getEdge(edgeId);
+		if (!edge) return null;
+
+		this.#selectedEdgeId = edge.id;
+		this.#selectedNodeIds = [];
+		this.#persistSelectionToDocument();
+		publish(EVENTS.GRAPH_SELECTION_CLEARED, { origin: "graph-store" });
+		publish(EVENTS.GRAPH_SELECTION_SET, {
+			nodeIds: [],
+			nodeId: null,
+			origin: "graph-store",
+		});
+		publish(EVENTS.GRAPH_EDGE_SELECTED, {
+			edgeId: edge.id,
+			edge,
+			origin: "graph-store",
+		});
+		this.#emitDocumentChanged("edge_selection");
+		return edge;
+	}
+
+	clearSelectedEdge({ emitChange = true } = {}) {
+		if (!this.#selectedEdgeId) return;
+
+		this.#selectedEdgeId = null;
+		this.#persistSelectionToDocument();
+		publish(EVENTS.GRAPH_EDGE_SELECTION_CLEARED, { origin: "graph-store" });
+		if (emitChange) this.#emitDocumentChanged("edge_selection_cleared");
+	}
+
+	/* ── Edge mutations ── */
+
+	addEdge(edgeLike = {}, { selectAfterCreate = false } = {}) {
+		if (!this.#document) return null;
+
+		const edge = createEdge(edgeLike);
+		const sourceExists = Boolean(findNodeById(this.#document, edge.source));
+		const targetExists = Boolean(findNodeById(this.#document, edge.target));
+		if (!sourceExists || !targetExists) return null;
+
+		const duplicate = (this.#document.edges ?? []).some(
+			(entry) =>
+				entry.id === edge.id ||
+				(entry.source === edge.source &&
+					entry.target === edge.target &&
+					entry.type === edge.type &&
+					String(entry.label ?? "") === String(edge.label ?? "")),
+		);
+		if (duplicate) return null;
+
+		this.#applyMutation(() => {
+			this.#document.edges = [...(this.#document.edges ?? []), edge];
+		});
+
+		publish(EVENTS.GRAPH_EDGE_CREATED, {
+			edge: clone(edge),
+			origin: "graph-store",
+		});
+
+		if (selectAfterCreate) {
+			this.setSelectedEdge(edge.id);
+		}
+
+		this.#emitDocumentChanged("edge_created", { edgeId: edge.id });
+		return clone(edge);
+	}
+
+	updateEdge(edgeId, patch) {
+		if (!this.#document || !edgeId || !patch) return null;
+		const existing = findEdgeById(this.#document, edgeId);
+		if (!existing) return null;
+
+		const normalizedPatch = { ...patch };
+		if (normalizedPatch.type != null)
+			normalizedPatch.type = String(normalizedPatch.type);
+		if (normalizedPatch.label != null)
+			normalizedPatch.label = String(normalizedPatch.label);
+
+		this.#applyMutation(() => {
+			this.#document.edges = (this.#document.edges ?? []).map((edge) =>
+				edge.id === edgeId ? { ...edge, ...normalizedPatch } : edge,
+			);
+		});
+
+		const edge = this.getEdge(edgeId);
+		publish(EVENTS.GRAPH_EDGE_UPDATED, {
+			edgeId,
+			patch: normalizedPatch,
+			edge,
+			origin: "graph-store",
+		});
+
+		if (this.#selectedEdgeId === edgeId && edge) {
+			publish(EVENTS.GRAPH_EDGE_SELECTED, {
+				edgeId,
+				edge,
+				origin: "graph-store",
+			});
+		}
+
+		this.#emitDocumentChanged("edge_updated", { edgeId });
+		return edge;
+	}
+
+	removeEdge(edgeId) {
+		if (!this.#document || !edgeId) return null;
+		const edge = findEdgeById(this.#document, edgeId);
+		if (!edge) return null;
+
+		this.#applyMutation(() => {
+			this.#document.edges = (this.#document.edges ?? []).filter(
+				(entry) => entry.id !== edgeId,
+			);
+		});
+
+		if (this.#selectedEdgeId === edgeId) {
+			this.clearSelectedEdge({ emitChange: false });
+		}
+
+		publish(EVENTS.GRAPH_EDGE_DELETED, {
+			edgeId,
+			edge: clone(edge),
+			origin: "graph-store",
+		});
+
+		this.#emitDocumentChanged("edge_deleted", { edgeId });
+		return clone(edge);
+	}
+
+	/* ── CAR: access tracking ── */
+
+	recordAccess(nodeId) {
+		if (!this.#document) return;
+		const node = findNodeById(this.#document, nodeId);
+		if (!node || node.type !== "chunk") return;
+
+		const now = new Date().toISOString();
+		this.updateNode(nodeId, {
+			data: {
+				...(node.data ?? {}),
+				access_count: (node.data?.access_count ?? 0) + 1,
+				last_accessed: now,
+			},
+		});
+	}
+
+	/* ── Private helpers ── */
+
+	#applyMutation(run) {
+		if (!this.#document) return;
+		this.#pushUndo(this.#document);
+		this.#redoStack = [];
+		run();
+		this.#persistSelectionToDocument();
+		this.#emitHistoryState();
+	}
+
+	#pushUndo(document) {
+		this.#undoStack.push(clone(document));
+		if (this.#undoStack.length > HISTORY_LIMITS.graphSnapshots) {
+			this.#undoStack.shift();
+		}
+	}
+
+	#emitHistoryState() {
+		publish(EVENTS.GRAPH_HISTORY_CHANGED, {
+			...this.getHistoryState(),
+			origin: "graph-store",
+		});
+	}
+
+	#emitSelectionState() {
+		if (this.#selectedEdgeId) {
+			const edge = this.getEdge(this.#selectedEdgeId);
+			if (edge) {
+				publish(EVENTS.GRAPH_EDGE_SELECTED, {
+					edgeId: edge.id,
+					edge,
+					origin: "graph-store",
+				});
+				return;
+			}
+		}
+
+		if (!this.#selectedNodeIds.length) {
+			publish(EVENTS.GRAPH_SELECTION_CLEARED, { origin: "graph-store" });
+			publish(EVENTS.GRAPH_SELECTION_SET, {
+				nodeIds: [],
+				nodeId: null,
+				origin: "graph-store",
+			});
+			return;
+		}
+
+		publish(EVENTS.GRAPH_NODE_SELECTED, {
+			nodeId: this.#selectedNodeIds[0],
+			nodeIds: [...this.#selectedNodeIds],
+			origin: "graph-store",
+		});
+		publish(EVENTS.GRAPH_SELECTION_SET, {
+			nodeId: this.#selectedNodeIds[0],
+			nodeIds: [...this.#selectedNodeIds],
+			origin: "graph-store",
+		});
+	}
+
+	#emitDocumentChanged(reason, extra = {}) {
+		publish(EVENTS.GRAPH_DOCUMENT_CHANGED, {
+			document: this.getDocument(),
+			reason,
+			origin: "graph-store",
+			...extra,
+		});
+	}
+
+	#syncSelectionFromDocument() {
+		const selected = this.#document?.metadata?.selection;
+
+		if (Array.isArray(selected) && selected.length) {
+			this.#selectedNodeIds = unique(selected).filter((nodeId) =>
+				Boolean(findNodeById(this.#document, nodeId)),
+			);
+			this.#selectedEdgeId = null;
+			return;
+		}
+
+		const fallbackNodeId = this.#document?.metadata?.selectedNodeId;
+		if (fallbackNodeId && findNodeById(this.#document, fallbackNodeId)) {
+			this.#selectedNodeIds = [fallbackNodeId];
+			this.#selectedEdgeId = null;
+			return;
+		}
+
+		this.#selectedNodeIds = [];
+		const selectedEdgeId = this.#document?.metadata?.selectedEdgeId;
+		this.#selectedEdgeId =
+			selectedEdgeId && findEdgeById(this.#document, selectedEdgeId)
+				? selectedEdgeId
+				: null;
+	}
+
+	#persistSelectionToDocument() {
+		if (!this.#document) return;
+		this.#document.metadata = {
+			...(this.#document.metadata ?? {}),
+			selectedNodeId: this.#selectedNodeIds[0] ?? null,
+			selection: [...this.#selectedNodeIds],
+			selectedEdgeId: this.#selectedEdgeId ?? null,
+		};
+	}
 }
 
 export const graphStore = new GraphStore();
diff --git a/js/store/ui-store.js b/js/store/ui-store.js
index a3b49cd..32acefb 100644
--- a/js/store/ui-store.js
+++ b/js/store/ui-store.js
@@ -6,176 +6,323 @@ const nowIso = () => new Date().toISOString();
 const cap = (items, max = 80) => items.slice(0, max);
 
 class UiStore {
-  #state = {
-    selectedNodeId: null,
-    selectedNodeIds: [],
-    selectedTool: "select",
-    viewportZoom: 1,
-    inspectorTab: "overview",
-    bottomTab: "messages",
-    devConsoleVisible: true,
-    activityItems: [],
-    taskQueue: [],
-    runHistory: [],
-    errors: []
-  };
-
-  constructor() {
-    subscribe(EVENTS.GRAPH_NODE_SELECTED, ({ payload }) => {
-      const nodeIds = toArray(payload?.nodeIds);
-      this.#state.selectedNodeIds = nodeIds.length ? nodeIds : payload?.nodeId ? [payload.nodeId] : [];
-      this.#state.selectedNodeId = this.#state.selectedNodeIds[0] ?? null;
-    });
-
-    subscribe(EVENTS.GRAPH_SELECTION_SET, ({ payload }) => {
-      const nodeIds = toArray(payload?.nodeIds);
-      this.#state.selectedNodeIds = nodeIds;
-      this.#state.selectedNodeId = nodeIds[0] ?? null;
-    });
-
-    subscribe(EVENTS.GRAPH_SELECTION_CLEARED, () => {
-      this.#state.selectedNodeId = null;
-      this.#state.selectedNodeIds = [];
-    });
-
-    subscribe(EVENTS.TOOLBAR_TOOL_CHANGED, ({ payload }) => {
-      this.#state.selectedTool = payload?.tool ?? "select";
-    });
-
-    subscribe(EVENTS.GRAPH_VIEWPORT_CHANGED, ({ payload }) => {
-      const nextZoom = Number(payload?.zoom ?? this.#state.viewportZoom);
-      if (Number.isFinite(nextZoom)) {
-        this.#state.viewportZoom = nextZoom;
-      }
-    });
-
-    subscribe(EVENTS.INSPECTOR_TAB_CHANGED, ({ payload }) => {
-      this.#state.inspectorTab = payload?.tab ?? "overview";
-    });
-
-    subscribe(EVENTS.PANEL_BOTTOM_TAB_CHANGED, ({ payload }) => {
-      this.#state.bottomTab = payload?.tab ?? "messages";
-    });
-
-    subscribe(EVENTS.PANEL_DEV_CONSOLE_TOGGLED, ({ payload }) => {
-      this.#state.devConsoleVisible = Boolean(payload?.visible ?? false);
-      this.#emitRuntimeState();
-    });
-
-    subscribe(EVENTS.ACTIVITY_LOG_APPENDED, ({ payload, timestamp }) => {
-      const entry = {
-        level: payload?.level ?? "info",
-        message: payload?.message ?? "(empty log message)",
-        context: payload?.context ?? {},
-        timestamp: timestamp ?? Date.now(),
-        at: payload?.at ?? nowIso()
-      };
-
-      this.#state.activityItems = cap([entry, ...this.#state.activityItems], 120);
-      this.#emitRuntimeState();
-    });
-
-    subscribe(EVENTS.TASK_QUEUE_UPDATED, ({ payload }) => {
-      this.#state.taskQueue = cap(toArray(payload?.tasks).map((task) => ({ ...task })), 120);
-      this.#emitRuntimeState();
-    });
-
-    subscribe(EVENTS.RUNTIME_RUN_HISTORY_APPENDED, ({ payload }) => {
-      const entry = {
-        nodeId: payload?.nodeId ?? null,
-        nodeLabel: payload?.nodeLabel ?? "Unknown node",
-        runId: payload?.runId ?? "run_unknown",
-        status: payload?.status ?? "unknown",
-        summary: payload?.summary ?? "",
-        confidence: payload?.confidence,
-        outputType: payload?.output?.type,
-        at: payload?.at ?? nowIso()
-      };
-
-      this.#state.runHistory = cap([entry, ...this.#state.runHistory], 120);
-      this.#emitRuntimeState();
-    });
-
-    subscribe(EVENTS.RUNTIME_ERROR_APPENDED, ({ payload }) => {
-      const entry = {
-        nodeId: payload?.nodeId ?? null,
-        nodeLabel: payload?.nodeLabel ?? "Unknown node",
-        runId: payload?.runId ?? "run_unknown",
-        message: payload?.message ?? "Unknown runtime error",
-        source: payload?.source ?? "runtime",
-        at: payload?.at ?? nowIso(),
-        outputType: payload?.output?.type
-      };
-
-      this.#state.errors = cap([entry, ...this.#state.errors], 120);
-      this.#emitRuntimeState();
-    });
-  }
-
-  #emitRuntimeState() {
-    publish(EVENTS.UI_RUNTIME_STATE_CHANGED, {
-      runtime: this.getRuntimeState(),
-      bottomTab: this.#state.bottomTab,
-      devConsoleVisible: this.#state.devConsoleVisible
-    });
-  }
-
-  getState() {
-    return {
-      ...this.#state,
-      selectedNodeIds: [...this.#state.selectedNodeIds],
-      activityItems: [...this.#state.activityItems],
-      taskQueue: [...this.#state.taskQueue],
-      runHistory: [...this.#state.runHistory],
-      errors: [...this.#state.errors]
-    };
-  }
-
-  getRuntimeState() {
-    return {
-      activityItems: this.#state.activityItems.map((entry) => ({ ...entry })),
-      taskQueue: this.#state.taskQueue.map((entry) => ({ ...entry })),
-      runHistory: this.#state.runHistory.map((entry) => ({ ...entry })),
-      errors: this.#state.errors.map((entry) => ({ ...entry })),
-      devConsoleVisible: this.#state.devConsoleVisible
-    };
-  }
-
-  selectNode(nodeId, options = {}) {
-    publish(EVENTS.GRAPH_NODE_SELECT_REQUESTED, {
-      nodeId,
-      additive: Boolean(options?.additive),
-      toggle: Boolean(options?.toggle)
-    });
-  }
-
-  setSelection(nodeIds = []) {
-    publish(EVENTS.GRAPH_SELECTION_SET_REQUESTED, { nodeIds: toArray(nodeIds) });
-  }
-
-  clearSelection() {
-    publish(EVENTS.GRAPH_SELECTION_CLEAR_REQUESTED, {});
-  }
-
-  setTool(tool) {
-    publish(EVENTS.TOOLBAR_TOOL_CHANGED, { tool });
-  }
-
-  setViewportZoom(zoom) {
-    publish(EVENTS.GRAPH_VIEWPORT_UPDATE_REQUESTED, { zoom });
-  }
-
-  setInspectorTab(tab) {
-    publish(EVENTS.INSPECTOR_TAB_CHANGED, { tab });
-  }
-
-  setBottomTab(tab) {
-    publish(EVENTS.PANEL_BOTTOM_TAB_CHANGED, { tab });
-  }
-
-  setDevConsoleVisible(visible) {
-    publish(EVENTS.PANEL_DEV_CONSOLE_TOGGLED, { visible: Boolean(visible) });
-  }
+	#state = {
+		selectedNodeId: null,
+		selectedNodeIds: [],
+		selectedTool: "select",
+		viewportZoom: 1,
+		inspectorTab: "overview",
+		bottomTab: "retrieval-log",
+		devConsoleVisible: false,
+		activityItems: [],
+		taskQueue: [],
+		runHistory: [],
+		errors: [],
+
+		/* ── CAR retrieval state ── */
+		retrievalRunning: false,
+		retrievalStep: 0,
+		retrievalStepName: "",
+		retrievalMode: "play", // "play" | "step"
+		retrievalQuery: "",
+		retrievalResult: null,
+		retrievalLog: [],
+
+		/* ── CAR panel data ── */
+		contradictions: [],
+		unansweredQuestions: [],
+		consolidationLog: [],
+		metamemory: null,
+	};
+
+	constructor() {
+		subscribe(EVENTS.GRAPH_NODE_SELECTED, ({ payload }) => {
+			const nodeIds = toArray(payload?.nodeIds);
+			this.#state.selectedNodeIds = nodeIds.length
+				? nodeIds
+				: payload?.nodeId
+					? [payload.nodeId]
+					: [];
+			this.#state.selectedNodeId = this.#state.selectedNodeIds[0] ?? null;
+		});
+
+		subscribe(EVENTS.GRAPH_SELECTION_SET, ({ payload }) => {
+			const nodeIds = toArray(payload?.nodeIds);
+			this.#state.selectedNodeIds = nodeIds;
+			this.#state.selectedNodeId = nodeIds[0] ?? null;
+		});
+
+		subscribe(EVENTS.GRAPH_SELECTION_CLEARED, () => {
+			this.#state.selectedNodeId = null;
+			this.#state.selectedNodeIds = [];
+		});
+
+		subscribe(EVENTS.TOOLBAR_TOOL_CHANGED, ({ payload }) => {
+			this.#state.selectedTool = payload?.tool ?? "select";
+		});
+
+		subscribe(EVENTS.GRAPH_VIEWPORT_CHANGED, ({ payload }) => {
+			const nextZoom = Number(payload?.zoom ?? this.#state.viewportZoom);
+			if (Number.isFinite(nextZoom)) {
+				this.#state.viewportZoom = nextZoom;
+			}
+		});
+
+		subscribe(EVENTS.INSPECTOR_TAB_CHANGED, ({ payload }) => {
+			this.#state.inspectorTab = payload?.tab ?? "overview";
+		});
+
+		subscribe(EVENTS.PANEL_BOTTOM_TAB_CHANGED, ({ payload }) => {
+			this.#state.bottomTab = payload?.tab ?? "retrieval-log";
+		});
+
+		subscribe(EVENTS.PANEL_DEV_CONSOLE_TOGGLED, ({ payload }) => {
+			this.#state.devConsoleVisible = Boolean(payload?.visible ?? false);
+			this.#emitRuntimeState();
+		});
+
+		subscribe(EVENTS.ACTIVITY_LOG_APPENDED, ({ payload, timestamp }) => {
+			const entry = {
+				level: payload?.level ?? "info",
+				message: payload?.message ?? "(empty log message)",
+				context: payload?.context ?? {},
+				timestamp: timestamp ?? Date.now(),
+				at: payload?.at ?? nowIso(),
+			};
+
+			this.#state.activityItems = cap(
+				[entry, ...this.#state.activityItems],
+				120,
+			);
+			this.#emitRuntimeState();
+		});
+
+		subscribe(EVENTS.TASK_QUEUE_UPDATED, ({ payload }) => {
+			this.#state.taskQueue = cap(
+				toArray(payload?.tasks).map((task) => ({ ...task })),
+				120,
+			);
+			this.#emitRuntimeState();
+		});
+
+		subscribe(EVENTS.RUNTIME_RUN_HISTORY_APPENDED, ({ payload }) => {
+			const entry = {
+				nodeId: payload?.nodeId ?? null,
+				nodeLabel: payload?.nodeLabel ?? "Unknown node",
+				runId: payload?.runId ?? "run_unknown",
+				status: payload?.status ?? "unknown",
+				summary: payload?.summary ?? "",
+				confidence: payload?.confidence,
+				outputType: payload?.output?.type,
+				at: payload?.at ?? nowIso(),
+			};
+
+			this.#state.runHistory = cap([entry, ...this.#state.runHistory], 120);
+			this.#emitRuntimeState();
+		});
+
+		subscribe(EVENTS.RUNTIME_ERROR_APPENDED, ({ payload }) => {
+			const entry = {
+				nodeId: payload?.nodeId ?? null,
+				nodeLabel: payload?.nodeLabel ?? "Unknown node",
+				runId: payload?.runId ?? "run_unknown",
+				message: payload?.message ?? "Unknown runtime error",
+				source: payload?.source ?? "runtime",
+				at: payload?.at ?? nowIso(),
+				outputType: payload?.output?.type,
+			};
+
+			this.#state.errors = cap([entry, ...this.#state.errors], 120);
+			this.#emitRuntimeState();
+		});
+
+		/* ── CAR retrieval event listeners ── */
+
+		subscribe(EVENTS.CAR_RETRIEVAL_STARTED, ({ payload }) => {
+			this.#state.retrievalRunning = true;
+			this.#state.retrievalStep = 0;
+			this.#state.retrievalStepName = "";
+			this.#state.retrievalQuery = payload?.query ?? "";
+			this.#state.retrievalResult = null;
+			this.#state.retrievalLog = [];
+			this.#emitRuntimeState();
+		});
+
+		subscribe(EVENTS.CAR_RETRIEVAL_STEP_STARTED, ({ payload }) => {
+			this.#state.retrievalStep = payload?.step ?? 0;
+			this.#state.retrievalStepName = payload?.name ?? "";
+			this.#state.retrievalLog = cap(
+				[
+					...this.#state.retrievalLog,
+					{
+						step: payload?.step,
+						name: payload?.name,
+						status: "running",
+						at: nowIso(),
+					},
+				],
+				20,
+			);
+			this.#emitRuntimeState();
+		});
+
+		subscribe(EVENTS.CAR_RETRIEVAL_STEP_COMPLETED, ({ payload }) => {
+			this.#state.retrievalLog = this.#state.retrievalLog.map((entry) =>
+				entry.step === payload?.step
+					? { ...entry, status: "done", detail: payload?.detail }
+					: entry,
+			);
+			this.#emitRuntimeState();
+		});
+
+		subscribe(EVENTS.CAR_RETRIEVAL_COMPLETED, ({ payload }) => {
+			this.#state.retrievalRunning = false;
+			this.#state.retrievalResult = payload?.result ?? null;
+			this.#emitRuntimeState();
+		});
+
+		subscribe(EVENTS.CAR_RETRIEVAL_FAILED, ({ payload }) => {
+			this.#state.retrievalRunning = false;
+			this.#state.retrievalResult = {
+				error: payload?.message ?? "Retrieval failed",
+			};
+			this.#emitRuntimeState();
+		});
+
+		subscribe(EVENTS.CAR_RETRIEVAL_RESET, () => {
+			this.#state.retrievalRunning = false;
+			this.#state.retrievalStep = 0;
+			this.#state.retrievalStepName = "";
+			this.#state.retrievalQuery = "";
+			this.#state.retrievalResult = null;
+			this.#state.retrievalLog = [];
+			this.#emitRuntimeState();
+		});
+
+		/* ── CAR data listeners ── */
+
+		subscribe(EVENTS.CAR_CONTRADICTION_DETECTED, ({ payload }) => {
+			this.#state.contradictions = cap(
+				[...this.#state.contradictions, { ...payload, at: nowIso() }],
+				50,
+			);
+			this.#emitRuntimeState();
+		});
+
+		subscribe(EVENTS.CAR_QUESTIONS_GENERATED, ({ payload }) => {
+			const questions = toArray(payload?.questions).filter((q) => !q.answered);
+			this.#state.unansweredQuestions = cap(
+				[...questions, ...this.#state.unansweredQuestions],
+				100,
+			);
+			this.#emitRuntimeState();
+		});
+
+		subscribe(EVENTS.CAR_CONSOLIDATION_PROMOTED, ({ payload }) => {
+			this.#state.consolidationLog = cap(
+				[{ ...payload, at: nowIso() }, ...this.#state.consolidationLog],
+				50,
+			);
+			this.#emitRuntimeState();
+		});
+
+		subscribe(EVENTS.CAR_METAMEMORY_UPDATED, ({ payload }) => {
+			this.#state.metamemory = payload?.metamemory ?? null;
+			this.#emitRuntimeState();
+		});
+	}
+
+	#emitRuntimeState() {
+		publish(EVENTS.UI_RUNTIME_STATE_CHANGED, {
+			runtime: this.getRuntimeState(),
+			bottomTab: this.#state.bottomTab,
+			devConsoleVisible: this.#state.devConsoleVisible,
+		});
+	}
+
+	getState() {
+		return {
+			...this.#state,
+			selectedNodeIds: [...this.#state.selectedNodeIds],
+			activityItems: [...this.#state.activityItems],
+			taskQueue: [...this.#state.taskQueue],
+			runHistory: [...this.#state.runHistory],
+			errors: [...this.#state.errors],
+			retrievalLog: [...this.#state.retrievalLog],
+			contradictions: [...this.#state.contradictions],
+			unansweredQuestions: [...this.#state.unansweredQuestions],
+			consolidationLog: [...this.#state.consolidationLog],
+		};
+	}
+
+	getRuntimeState() {
+		return {
+			activityItems: this.#state.activityItems.map((entry) => ({ ...entry })),
+			taskQueue: this.#state.taskQueue.map((entry) => ({ ...entry })),
+			runHistory: this.#state.runHistory.map((entry) => ({ ...entry })),
+			errors: this.#state.errors.map((entry) => ({ ...entry })),
+			devConsoleVisible: this.#state.devConsoleVisible,
+			retrievalRunning: this.#state.retrievalRunning,
+			retrievalStep: this.#state.retrievalStep,
+			retrievalStepName: this.#state.retrievalStepName,
+			retrievalMode: this.#state.retrievalMode,
+			retrievalQuery: this.#state.retrievalQuery,
+			retrievalResult: this.#state.retrievalResult,
+			retrievalLog: this.#state.retrievalLog.map((entry) => ({ ...entry })),
+			contradictions: this.#state.contradictions.map((entry) => ({ ...entry })),
+			unansweredQuestions: this.#state.unansweredQuestions.map((entry) => ({
+				...entry,
+			})),
+			consolidationLog: this.#state.consolidationLog.map((entry) => ({
+				...entry,
+			})),
+			metamemory: this.#state.metamemory,
+		};
+	}
+
+	/* ── Actions ── */
+
+	selectNode(nodeId, options = {}) {
+		publish(EVENTS.GRAPH_NODE_SELECT_REQUESTED, {
+			nodeId,
+			additive: Boolean(options?.additive),
+			toggle: Boolean(options?.toggle),
+		});
+	}
+
+	setSelection(nodeIds = []) {
+		publish(EVENTS.GRAPH_SELECTION_SET_REQUESTED, {
+			nodeIds: toArray(nodeIds),
+		});
+	}
+
+	clearSelection() {
+		publish(EVENTS.GRAPH_SELECTION_CLEAR_REQUESTED, {});
+	}
+
+	setTool(tool) {
+		publish(EVENTS.TOOLBAR_TOOL_CHANGED, { tool });
+	}
+
+	setViewportZoom(zoom) {
+		publish(EVENTS.GRAPH_VIEWPORT_UPDATE_REQUESTED, { zoom });
+	}
+
+	setInspectorTab(tab) {
+		publish(EVENTS.INSPECTOR_TAB_CHANGED, { tab });
+	}
+
+	setBottomTab(tab) {
+		publish(EVENTS.PANEL_BOTTOM_TAB_CHANGED, { tab });
+	}
+
+	setDevConsoleVisible(visible) {
+		publish(EVENTS.PANEL_DEV_CONSOLE_TOGGLED, { visible: Boolean(visible) });
+	}
+
+	setRetrievalMode(mode) {
+		this.#state.retrievalMode = mode === "step" ? "step" : "play";
+	}
 }
 
 export const uiStore = new UiStore();

From 3745aee0dcd0b2eb4abe6bf20dc8d7ef15d0fa5c Mon Sep 17 00:00:00 2001
From: Amit Kolton <amit.ko@thing02.com>
Date: Fri, 3 Apr 2026 15:33:45 +0300
Subject: [PATCH 05/13] feat: dark neural theme CSS and Three.js import map

Replace all CSS with dark theme using spec design tokens (#080c14
canvas, #0d1117 panels). Anti-slop tabs (text-only, underline-active,
IBM Plex Mono 10px uppercase). Add Three.js import map to index.html.
Update title to CAR Brain. IBM Plex Sans + Mono fonts.
---
 css/app.css    |  126 ++++--
 css/layout.css |   23 +-
 css/nodes.css  |  252 ++----------
 css/panels.css | 1028 +++++++++++++++++++++++++-----------------------
 index.html     |   35 +-
 5 files changed, 700 insertions(+), 764 deletions(-)

diff --git a/css/app.css b/css/app.css
index 7380897..e74eaa8 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1,27 +1,60 @@
-@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");
 
 :root {
-  --bg: #edf2f8;
-  --bg-2: #dce7f6;
-  --surface: #ffffff;
-  --surface-muted: #f4f8fe;
-  --line: #d7e1ef;
-  --line-strong: #b5c4d8;
-  --text: #172235;
-  --text-soft: #5f728c;
-  --accent: #245e9b;
-  --accent-soft: #e4eefb;
-  --danger: #a0303f;
-  --success: #1f7040;
-  --shadow-soft: 0 10px 28px -20px rgba(11, 28, 53, 0.45);
-  --shadow-panel: 0 18px 40px -26px rgba(17, 38, 70, 0.36);
-  --toolbar-height: 72px;
-  --bottom-height: 228px;
-  --left-width: 238px;
-  --right-width: 370px;
-  --radius: 14px;
-  --font: "Manrope", "Segoe UI", "SF Pro Text", Arial, sans-serif;
-  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
+  /* Background */
+  --bg-canvas: #080c14;
+  --bg-panel: #0d1117;
+  --bg-input: #161b22;
+  --bg-border: #21262d;
+  --bg-hover: #161b22;
+
+  /* Data colors (tier-mapped, never decorative) */
+  --color-t1: #00f5ff;
+  --color-t2: #7b61ff;
+  --color-t3: #ff2d78;
+  --color-question: #ffd93d;
+  --color-trigger: #ff9f1c;
+  --color-contradiction: #ff3333;
+  --color-cluster: rgba(255, 255, 255, 0.2);
+
+  /* Text */
+  --text-primary: #e6edf3;
+  --text-secondary: #c9d1d9;
+  --text-muted: #484f58;
+  --text-accent: #ffffff;
+
+  /* Typography */
+  --font-sans: "IBM Plex Sans", sans-serif;
+  --font-mono: "IBM Plex Mono", monospace;
+  --font-size-xs: 10px;
+  --font-size-sm: 11px;
+  --font-size-base: 12px;
+  --font-size-md: 13px;
+  --font-size-lg: 14px;
+
+  /* Spacing (4px base) */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+
+  /* Radii */
+  --radius-sm: 3px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+
+  /* Transitions */
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.3s ease;
+  --transition-slow: 0.6s ease-in-out;
+
+  /* Layout */
+  --toolbar-height: 44px;
+  --palette-width: 56px;
+  --inspector-width: 300px;
+  --bottom-panel-height: 180px;
 }
 
 * {
@@ -34,17 +67,14 @@ body {
   padding: 0;
   width: 100%;
   height: 100%;
-  color: var(--text);
-  font-family: var(--font);
-  background:
-    radial-gradient(circle at 7% 3%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0) 42%),
-    radial-gradient(circle at 92% 84%, rgba(196, 218, 244, 0.55) 0%, rgba(196, 218, 244, 0) 38%),
-    linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
+  color: var(--text-secondary);
+  font-family: var(--font-sans);
+  background: var(--bg-canvas);
 }
 
 body {
   min-height: 100vh;
-  font-size: 14px;
+  font-size: var(--font-size-base);
   letter-spacing: 0.01em;
 }
 
@@ -58,10 +88,12 @@ input,
 select,
 textarea {
   font: inherit;
+  color: var(--text-secondary);
 }
 
 button {
-  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
+  transition: background-color var(--transition-fast), border-color var(--transition-fast),
+    box-shadow var(--transition-fast), color var(--transition-fast);
 }
 
 button:focus-visible,
@@ -69,7 +101,7 @@ input:focus-visible,
 select:focus-visible,
 textarea:focus-visible {
   outline: 0;
-  box-shadow: 0 0 0 3px rgba(36, 94, 155, 0.22);
+  box-shadow: 0 0 0 2px rgba(0, 245, 255, 0.25);
 }
 
 kbd {
@@ -78,15 +110,37 @@ kbd {
   justify-content: center;
   min-width: 1.4rem;
   padding: 0.06rem 0.3rem;
-  border-radius: 6px;
-  border: 1px solid var(--line-strong);
-  background: #fbfdff;
-  color: #324b6c;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--bg-border);
+  background: var(--bg-input);
+  color: var(--text-muted);
   font-family: var(--font-mono);
-  font-size: 0.68rem;
+  font-size: var(--font-size-xs);
   line-height: 1.4;
 }
 
+::selection {
+  background: rgba(0, 245, 255, 0.2);
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--bg-border);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
 @media (min-width: 961px) {
   html,
   body {
diff --git a/css/layout.css b/css/layout.css
index 1936a32..4de1264 100644
--- a/css/layout.css
+++ b/css/layout.css
@@ -3,14 +3,15 @@
   height: 100vh;
   display: grid;
   gap: 0;
-  padding: 0.4rem 0.45rem 0.5rem;
-  grid-template-rows: auto 1fr var(--bottom-height);
-  grid-template-columns: minmax(200px, var(--left-width)) minmax(0, 1fr) minmax(300px, var(--right-width));
+  padding: 0;
+  grid-template-rows: var(--toolbar-height) 1fr var(--bottom-panel-height);
+  grid-template-columns: var(--palette-width) minmax(0, 1fr) var(--inspector-width);
   grid-template-areas:
     "toolbar toolbar toolbar"
     "palette canvas inspector"
     "activity activity activity";
   overflow: hidden;
+  background: var(--bg-canvas);
 }
 
 .mg-toolbar {
@@ -46,20 +47,7 @@
 
 @media (max-width: 1200px) {
   :root {
-    --left-width: 210px;
-    --right-width: 294px;
-  }
-}
-
-@media (max-width: 1380px) {
-  .mg-shell {
-    grid-template-columns: minmax(188px, var(--left-width)) minmax(0, 1fr);
-    grid-template-rows: auto minmax(370px, 1fr) auto var(--bottom-height);
-    grid-template-areas:
-      "toolbar toolbar"
-      "palette canvas"
-      "inspector inspector"
-      "activity activity";
+    --inspector-width: 260px;
   }
 }
 
@@ -68,7 +56,6 @@
     height: auto;
     min-height: 100vh;
     overflow: visible;
-    padding: 0.35rem;
     grid-template-columns: 1fr;
     grid-template-rows: auto auto minmax(300px, 1fr) auto auto;
     grid-template-areas:
diff --git a/css/nodes.css b/css/nodes.css
index e046954..7873dbf 100644
--- a/css/nodes.css
+++ b/css/nodes.css
@@ -1,229 +1,47 @@
-.mg-node {
-  position: absolute;
-  display: block;
-  border: 1px solid #d0dff1;
-  border-radius: 14px;
-  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
-  box-shadow: 0 16px 34px -24px rgba(12, 30, 64, 0.52);
-  padding: 0.84rem 0.94rem;
-  user-select: none;
-  cursor: grab;
-  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
-}
-
-.mg-node-instance {
-  position: absolute;
-}
-
-.mg-node:hover {
-  border-color: #a7bfdc;
-  box-shadow: 0 18px 34px -24px rgba(24, 50, 84, 0.56);
-}
-
-.mg-node-instance.is-selected .mg-node {
-  border-color: #2d629c;
-  box-shadow: 0 0 0 2px rgba(45, 98, 156, 0.2), 0 20px 34px -26px rgba(20, 45, 86, 0.62);
-  transform: translateY(-1px);
-}
-
-.mg-node-instance.is-connect-source .mg-node {
-  border-color: #a56518;
-  box-shadow: 0 0 0 2px rgba(165, 101, 24, 0.18), 0 20px 34px -26px rgba(95, 58, 13, 0.52);
-}
-
-.mg-node-instance.is-connect-target .mg-node {
-  border-color: #2f6ba8;
-  box-shadow: 0 0 0 2px rgba(47, 107, 168, 0.2), 0 20px 34px -26px rgba(24, 56, 98, 0.56);
-}
-
-.mg-node h4 {
-  margin: 0;
-  font-size: 0.95rem;
-  line-height: 1.24;
-}
-
-.mg-node p {
-  margin: 0.44rem 0 0;
-  color: var(--text-soft);
-  font-size: 0.8rem;
-  line-height: 1.33;
-}
+/* ── CAR Brain: 3D nodes are rendered in Three.js, not DOM ── */
+/* This file contains styles for the 2D overlay elements only */
 
-.node-title-row {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.6rem;
-  padding-right: 1rem;
-}
-
-.node-meta-grid {
-  margin-top: 0.66rem;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 0.3rem 0.52rem;
-  font-size: 0.74rem;
-}
-
-.node-meta-grid span {
-  color: #6e82a0;
-}
-
-.node-meta-grid strong {
-  color: #25334b;
-  font-weight: 700;
-  justify-self: end;
-}
-
-.node-meta-inline {
-  margin-top: 0.65rem;
-  font-size: 0.76rem;
-  color: #607393;
-}
-
-.status-badge,
-.readonly-badge {
-  padding: 0.12rem 0.48rem;
-  border-radius: 999px;
-  font-size: 0.66rem;
-  line-height: 1.5;
-  letter-spacing: 0.03em;
-  border: 1px solid transparent;
-  text-transform: uppercase;
-  font-weight: 700;
-}
-
-.status-badge {
-  background: #eff4fc;
-  border-color: #d4e0f0;
-  color: #37557d;
-}
-
-.status-active {
-  background: #e9f8ef;
-  border-color: #b9dfc8;
-  color: #1f7040;
-}
+/* Node tooltip is styled in panels.css (.node-tooltip) */
+/* All 3D node rendering is in three-nodes.js */
 
-.status-ready {
-  background: #edf3fd;
-  border-color: #c6d7f2;
-  color: #2e5688;
-}
+/* ── Context menu (right-click on 3D node) ── */
 
-.status-idle {
-  background: #f3f5f9;
-  border-color: #d5dde9;
-  color: #50617b;
+.node-context-menu {
+  position: fixed;
+  z-index: 100;
+  background: var(--bg-panel);
+  border: 1px solid var(--bg-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-1) 0;
+  min-width: 160px;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
 }
 
-.status-running {
-  background: #fff6e8;
-  border-color: #f0d3a2;
-  color: #8d4f00;
-}
-
-.status-completed {
-  background: #e9f8ef;
-  border-color: #b9dfc8;
-  color: #1f7040;
-}
-
-.status-failed {
-  background: #fdeeee;
-  border-color: #f1c4c6;
-  color: #9a2d33;
-}
-
-.readonly-badge {
-  background: #eff8f5;
-  border-color: #c6e9dc;
-  color: #1d6a56;
-}
-
-.compact-title {
-  margin-bottom: 0.32rem;
-  font-size: 0.66rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: #607a9f;
-  font-weight: 800;
-}
-
-.mg-node.note {
-  width: 250px;
-  border-left: 4px solid #5f6f88;
-}
-
-.mg-node.agent {
-  width: 290px;
-  border-left: 4px solid #2e5b94;
-}
-
-.mg-node.agent.agent-status-running {
-  border-left-color: #b26c10;
-}
-
-.mg-node.agent.agent-status-completed {
-  border-left-color: #1f7040;
-}
-
-.mg-node.agent.agent-status-failed {
-  border-left-color: #a1363c;
-}
-
-.node-runtime-summary {
-  margin-top: 0.62rem;
-  padding-top: 0.55rem;
-  border-top: 1px dashed #d5dfed;
-  font-size: 0.74rem;
-  color: #42556f;
-}
-
-.mg-node.data {
-  width: 260px;
-  border-left: 4px solid #0f8a72;
-}
-
-.mg-node.compact {
-  width: 210px;
-  min-height: 104px;
-  padding-top: 0.68rem;
-}
-
-.mg-node.transformer {
-  border-left: 4px solid #9b5c13;
-}
-
-.mg-node.view {
-  border-left: 4px solid #6f54a0;
-}
-
-.mg-node.action {
-  border-left: 4px solid #b23f43;
+.node-context-menu button {
+  display: block;
+  width: 100%;
+  background: none;
+  border: none;
+  padding: var(--space-1) var(--space-3);
+  text-align: left;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
 }
 
-.node-connect-handle {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 12px;
-  height: 12px;
-  border-radius: 999px;
-  border: 1px solid #7f98b8;
-  background: #345f8f;
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
-  cursor: crosshair;
-  padding: 0;
-  z-index: 2;
+.node-context-menu button:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
 }
 
-.node-connect-handle:hover {
-  background: #1f4a7b;
-  border-color: #567da8;
+.node-context-menu .menu-divider {
+  height: 1px;
+  background: var(--bg-border);
+  margin: var(--space-1) 0;
 }
 
-.node-connect-handle:focus-visible {
-  outline: 2px solid #7fa6d3;
-  outline-offset: 1px;
+.node-context-menu .menu-danger {
+  color: var(--color-contradiction);
 }
diff --git a/css/panels.css b/css/panels.css
index 2ba1812..6eefcfa 100644
--- a/css/panels.css
+++ b/css/panels.css
@@ -1,306 +1,378 @@
+/* ── Panel base ── */
+
 .mg-panel {
-  background: color-mix(in srgb, var(--surface) 96%, #f1f7ff 4%);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  margin: 0.4rem;
+  background: var(--bg-panel);
+  border: 1px solid var(--bg-border);
+  border-radius: 0;
   overflow: hidden;
-  box-shadow: var(--shadow-panel);
 }
 
 .mg-panel header {
-  background: linear-gradient(180deg, #f8fbff 0%, #eef4fd 100%);
-  border-bottom: 1px solid var(--line);
-  padding: 0.72rem 1rem;
-  font-weight: 700;
-  font-size: 0.82rem;
+  background: var(--bg-panel);
+  border-bottom: 1px solid var(--bg-border);
+  padding: var(--space-2) var(--space-3);
+  font-weight: 600;
+  font-size: var(--font-size-xs);
   text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: #3b5474;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
 }
 
 .mg-panel .content {
-  padding: 0.85rem;
-  font-size: 0.88rem;
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--font-size-base);
   min-height: 0;
 }
 
-.toolbar-actions {
-  display: flex;
-  gap: 0.42rem;
-  align-items: center;
-  flex-wrap: wrap;
-}
+/* ── Top toolbar ── */
 
 .top-toolbar-panel {
-  margin-bottom: 0.25rem;
+  border-bottom: 1px solid var(--bg-border);
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  display: flex;
+  align-items: center;
+  height: var(--toolbar-height);
 }
 
 .top-toolbar-content {
-  display: grid;
-  grid-template-columns: auto auto auto auto auto;
-  gap: 0.68rem;
+  display: flex;
   align-items: center;
-  padding: 0.68rem 0.8rem;
+  gap: var(--space-3);
+  padding: 0 var(--space-3);
+  width: 100%;
+  height: 100%;
 }
 
 .toolbar-brand {
   display: flex;
   align-items: center;
-  gap: 0.66rem;
-  min-width: 240px;
+  gap: var(--space-2);
+  min-width: 140px;
 }
 
 .brand-glyph {
-  width: 36px;
-  height: 36px;
-  border-radius: 11px;
-  background: linear-gradient(145deg, #1f4e86 0%, #3f79bd 100%);
-  box-shadow: 0 8px 24px -16px rgba(35, 82, 140, 0.7);
-  color: #fff;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-md);
+  background: var(--bg-input);
+  border: 1px solid var(--bg-border);
+  color: var(--color-t1);
   display: grid;
   place-items: center;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-  font-size: 0.78rem;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
 }
 
 .brand-text {
-  display: grid;
-  gap: 0.12rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
 }
 
 .brand-text strong {
-  font-size: 0.98rem;
+  font-size: var(--font-size-md);
   line-height: 1.1;
+  color: var(--text-accent);
 }
 
 .brand-text span {
-  font-size: 0.72rem;
-  color: var(--text-soft);
-  font-weight: 600;
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
 }
 
-.toolbar-action-group {
-  padding-right: 0.5rem;
-  border-right: 1px solid #d6e2f1;
+.toolbar-section {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0 var(--space-2);
+  border-left: 1px solid var(--bg-border);
+  height: 100%;
 }
 
-.toolbar-action-group:last-child {
-  border-right: 0;
-  padding-right: 0;
-}
-
-.toolbar-actions button,
-.bottom-panel-toolbar .toolbar-actions button,
-.bottom-dev-toggle,
-.pan-console-toolbar button,
-.inspector-inline-row button {
-  border: 1px solid #c8d7ea;
-  background: #fdfefe;
-  color: #1f3550;
-  border-radius: 10px;
-  padding: 0.4rem 0.72rem;
+.toolbar-section:first-child {
+  border-left: 0;
+  padding-left: 0;
+}
+
+.toolbar-input {
+  background: var(--bg-input);
+  border: 1px solid var(--bg-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-1) var(--space-2);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  min-width: 180px;
+  height: 28px;
+  transition: border-color var(--transition-fast);
+}
+
+.toolbar-input:focus {
+  outline: none;
+}
+
+.toolbar-input.memory-input:focus {
+  border-color: rgba(0, 245, 255, 0.3);
+}
+
+.toolbar-input.query-input:focus {
+  border-color: rgba(255, 217, 61, 0.3);
+}
+
+.toolbar-input::placeholder {
+  color: var(--text-muted);
+}
+
+.toolbar-btn {
+  background: var(--bg-input);
+  border: 1px solid var(--bg-border);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  padding: var(--space-1) var(--space-2);
   cursor: pointer;
-  font-weight: 600;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
   white-space: nowrap;
-  box-shadow: var(--shadow-soft);
+  height: 28px;
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
 }
 
-.toolbar-actions button:hover,
-.bottom-panel-toolbar .toolbar-actions button:hover,
-.bottom-dev-toggle:hover,
-.pan-console-toolbar button:hover,
-.inspector-inline-row button:hover {
-  border-color: #afc4de;
-  background: #f5f9ff;
+.toolbar-btn:hover {
+  background: var(--bg-hover);
+  border-color: var(--text-muted);
 }
 
-.toolbar-actions button:disabled,
-.inspector-inline-row button:disabled {
-  opacity: 0.56;
+.toolbar-btn:disabled {
+  opacity: 0.4;
   cursor: not-allowed;
-  box-shadow: none;
 }
 
-.toolbar-actions button[aria-pressed="true"],
-.bottom-panel-toolbar .toolbar-actions button[aria-pressed="true"],
-.bottom-dev-toggle[aria-pressed="true"] {
-  border-color: #8fb2da;
-  color: #194f87;
-  background: #eaf2fe;
+.toolbar-btn[aria-pressed="true"],
+.toolbar-btn.active {
+  border-color: var(--color-t1);
+  color: var(--color-t1);
 }
 
-.toolbar-zoom button {
-  min-width: 42px;
-  text-align: center;
-  padding-left: 0.48rem;
-  padding-right: 0.48rem;
-}
+/* ── Step dots ── */
 
-.palette-tools,
-.inspector-tabs {
+.step-dots {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.45rem;
+  gap: 3px;
+  align-items: center;
 }
 
-.palette-panel {
-  height: calc(100% - 0.8rem);
+.step-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--bg-border);
+  transition: background var(--transition-fast);
 }
 
-.palette-content {
-  display: grid;
-  gap: 0.82rem;
-  padding: 0.68rem !important;
-  height: 100%;
-  overflow: auto;
+.step-dot.done {
+  background: var(--color-t1);
 }
 
-.palette-group {
-  border: 1px solid #d5e2f1;
-  border-radius: 12px;
-  background: #f8fbff;
-  padding: 0.58rem;
+.step-dot.active {
+  background: var(--color-question);
+  animation: dot-pulse 0.8s ease-in-out infinite alternate;
 }
 
-.palette-group h4,
-.palette-shortcuts h4 {
-  margin: 0 0 0.5rem;
-  font-size: 0.68rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: #4a678b;
-  font-weight: 800;
+@keyframes dot-pulse {
+  from {
+    opacity: 0.6;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
-.palette-group .palette-tools {
-  display: grid;
-  gap: 0.38rem;
-  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+/* ── Left palette ── */
+
+.palette-panel {
+  height: 100%;
+  border-top: 0;
+  border-bottom: 0;
+  border-left: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.palette-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-2) !important;
+  flex: 1;
+  overflow: auto;
 }
 
 .palette-tool-btn {
-  width: 100%;
+  width: 40px;
   height: 40px;
-  border: 1px solid #cfdded;
-  background: #ffffff;
-  color: #1e334d;
-  border-radius: 9px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text-muted);
+  border-radius: var(--radius-md);
   padding: 0;
   cursor: pointer;
   display: grid;
   place-items: center;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  transition: all var(--transition-fast);
 }
 
 .palette-tool-btn:hover {
-  border-color: #b6cbdf;
-  background: #f2f8ff;
+  background: var(--bg-hover);
+  color: var(--text-secondary);
 }
 
 .palette-tool-btn[aria-pressed="true"] {
-  border-color: #8fb2da;
-  background: #e8f2ff;
-  color: #174f86;
+  background: var(--bg-input);
+  border-color: var(--color-t1);
+  color: var(--color-t1);
 }
 
-.palette-tool-icon {
-  width: 20px;
-  height: 20px;
-  object-fit: contain;
-  pointer-events: none;
+.palette-shortcut-hint {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+  padding: var(--space-1) var(--space-2);
+  line-height: 1.5;
 }
 
-.palette-shortcuts {
-  border: 1px dashed #c6d7ea;
-  border-radius: 12px;
-  background: linear-gradient(180deg, #fcfeff 0%, #f7fbff 100%);
-  padding: 0.6rem;
-  display: grid;
-  gap: 0.32rem;
-}
-
-.palette-shortcuts p {
-  margin: 0;
-  font-size: 0.74rem;
-  color: #45617f;
-  line-height: 1.4;
-}
+/* ── Inspector panel ── */
 
 .mg-inspector-panel {
-  height: calc(100% - 0.8rem);
+  height: 100%;
+  border-top: 0;
+  border-bottom: 0;
+  border-right: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .inspector-layout {
-  display: grid;
-  gap: 0.76rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  flex: 1;
+  overflow: auto;
 }
 
 .inspector-summary {
-  background: #f5f9ff;
-  border: 1px solid #d5e3f4;
-  border-radius: 12px;
-  padding: 0.68rem;
+  padding: var(--space-2) 0;
 }
 
 .inspector-node-title {
   margin: 0;
-  font-size: 0.95rem;
-  font-weight: 700;
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--text-accent);
 }
 
 .inspector-node-meta {
-  margin: 0.24rem 0 0;
-  color: var(--text-soft);
-  font-size: 0.77rem;
-  text-transform: capitalize;
+  margin: var(--space-1) 0 0;
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+}
+
+/* ── Inspector tabs: text-only, underline-active, anti-slop ── */
+
+.inspector-tabs {
+  display: flex;
+  gap: var(--space-3);
+  border-bottom: 1px solid var(--bg-border);
+  padding-bottom: 0;
 }
 
 .inspector-tabs button {
-  border: 1px solid #cbdbef;
-  background: #f4f8ff;
-  color: #20466c;
-  border-radius: 999px;
-  padding: 0.3rem 0.62rem;
-  font-size: 0.75rem;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  color: var(--text-muted);
+  padding: var(--space-1) 0 var(--space-2);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
   cursor: pointer;
-  font-weight: 600;
+  white-space: nowrap;
+  transition: color var(--transition-fast), border-color var(--transition-fast);
 }
 
 .inspector-tabs button:hover {
-  background: #edf4ff;
+  color: var(--text-secondary);
 }
 
-.inspector-tabs button[aria-pressed="true"] {
-  background: #2d619b;
-  border-color: #2d619b;
-  color: #ffffff;
+.inspector-tabs button[aria-pressed="true"],
+.inspector-tabs button[aria-selected="true"] {
+  color: var(--color-t1);
+  border-bottom-color: var(--color-t1);
 }
 
 .inspector-tab-content {
-  display: grid;
-  gap: 0.68rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
   min-height: 0;
   overflow: auto;
-  padding-right: 0.08rem;
+  flex: 1;
+}
+
+/* ── Inspector key-value rows (anti-slop: no cards) ── */
+
+.inspector-kv {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--space-1) var(--space-3);
+  font-size: var(--font-size-sm);
 }
 
-.inspector-group {
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 0.68rem;
-  background: #fcfdff;
+.inspector-kv-label {
+  color: var(--text-muted);
+  font-family: var(--font-sans);
+  font-weight: 500;
+  white-space: nowrap;
 }
 
-.inspector-group h4 {
-  margin: 0 0 0.56rem;
-  font-size: 0.8rem;
-  color: #3d5878;
+.inspector-kv-value {
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  word-break: break-word;
+}
+
+.inspector-section-title {
+  margin: var(--space-2) 0 var(--space-1);
+  font-size: var(--font-size-xs);
+  font-family: var(--font-mono);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
 }
 
 .inspector-field {
-  display: grid;
-  gap: 0.26rem;
-  margin-bottom: 0.54rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  margin-bottom: var(--space-2);
 }
 
 .inspector-field:last-child {
@@ -308,155 +380,106 @@
 }
 
 .inspector-field > span {
-  font-size: 0.72rem;
-  color: var(--text-soft);
-  font-weight: 600;
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+  font-weight: 500;
+  font-family: var(--font-sans);
 }
 
 .inspector-field input[type="text"],
 .inspector-field input[type="url"],
 .inspector-field input[type="number"],
 .inspector-field select,
-.inspector-field textarea,
-.pan-console-toolbar input {
+.inspector-field textarea {
   width: 100%;
-  border: 1px solid #c9d8eb;
-  border-radius: 9px;
-  padding: 0.44rem 0.5rem;
-  font: inherit;
-  font-size: 0.8rem;
-  color: var(--text);
-  background: #ffffff;
+  border: 1px solid var(--bg-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-1) var(--space-2);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  color: var(--text-primary);
+  background: var(--bg-input);
 }
 
 .inspector-field textarea {
   resize: vertical;
-  min-height: 72px;
-  font-family: var(--font-mono);
-  line-height: 1.35;
-}
-
-.inspector-field input[type="color"] {
-  width: 100%;
-  height: 2rem;
-  border: 1px solid #cdd9ea;
-  border-radius: 9px;
-  padding: 0.16rem;
-  background: #ffffff;
-}
-
-.inspector-field.checkbox {
-  display: flex;
-  align-items: center;
-  gap: 0.45rem;
+  min-height: 60px;
+  line-height: 1.4;
 }
 
-.inspector-field.checkbox span {
-  font-size: 0.8rem;
-  color: var(--text);
+.inspector-field select {
+  appearance: none;
 }
 
-.inspector-help,
 .inspector-empty {
   margin: 0;
-  color: var(--text-soft);
-  font-size: 0.8rem;
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+  padding: var(--space-4) var(--space-2);
 }
 
-.inspector-source-list {
-  display: grid;
-  gap: 0.35rem;
-  margin-bottom: 0.6rem;
-}
+/* ── Tags ── */
 
-.inspector-source-item {
-  display: flex;
-  gap: 0.45rem;
-  align-items: flex-start;
-  font-size: 0.79rem;
-  color: #2f415d;
+.tag {
+  display: inline-flex;
+  padding: 1px var(--space-2);
+  border: 1px solid;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  line-height: 1.6;
 }
 
-.inspector-source-item code {
-  font-size: 0.67rem;
-  color: #516784;
+.tag-t1 {
+  border-color: rgba(0, 245, 255, 0.4);
+  color: var(--color-t1);
 }
 
-.inspector-inline-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.65rem;
-  margin-top: 0.42rem;
+.tag-t2 {
+  border-color: rgba(123, 97, 255, 0.4);
+  color: var(--color-t2);
 }
 
-.inspector-last-updated {
-  font-size: 0.72rem;
-  color: #5f7391;
+.tag-t3 {
+  border-color: rgba(255, 45, 120, 0.4);
+  color: var(--color-t3);
 }
 
-.inspector-preview {
-  margin: 0;
-  max-height: 220px;
-  overflow: auto;
-  padding: 0.5rem 0.55rem;
-  border: 1px solid #d7e2f1;
-  border-radius: 9px;
-  background: #ffffff;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  line-height: 1.4;
-  white-space: pre-wrap;
-  word-break: break-word;
+.tag-question {
+  border-color: rgba(255, 217, 61, 0.4);
+  color: var(--color-question);
 }
 
-.inspector-list {
-  margin: 0;
-  padding-left: 1.1rem;
-  display: grid;
-  gap: 0.35rem;
-  font-size: 0.78rem;
-  color: #304766;
+.tag-trigger {
+  border-color: rgba(255, 159, 28, 0.4);
+  color: var(--color-trigger);
 }
 
-.log-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: grid;
-  gap: 0.4rem;
-}
+/* ── Relevance gauge ── */
 
-.log-item {
-  padding: 0.48rem 0.6rem;
-  background: #f8fbff;
-  border: 1px solid #d9e6f5;
-  border-radius: 9px;
-  font-family: var(--font-mono);
-  font-size: 0.74rem;
-}
-
-.mg-canvas {
-  min-height: 0;
+.relevance-gauge {
+  height: 4px;
+  background: var(--bg-border);
+  border-radius: 2px;
+  overflow: hidden;
 }
 
-.mg-graph-panel {
-  display: flex;
-  flex-direction: column;
-  height: calc(100% - 0.8rem);
+.relevance-gauge-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width var(--transition-normal);
 }
 
-.mg-graph-content {
-  flex: 1;
-  min-height: 380px;
-  min-width: 0;
-  padding: 0.72rem !important;
-}
+/* ── Bottom panel ── */
 
 .mg-activity .mg-panel {
-  height: calc(100% - 0.8rem);
+  height: 100%;
   display: flex;
   flex-direction: column;
+  border-bottom: 0;
+  border-left: 0;
+  border-right: 0;
 }
 
 .mg-activity .mg-panel .content {
@@ -466,292 +489,323 @@
 }
 
 .bottom-panel-content {
-  display: grid;
-  grid-template-rows: auto minmax(120px, 1fr) auto;
-  gap: 0.72rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  height: 100%;
 }
 
 .bottom-panel-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.64rem;
-  flex-wrap: wrap;
+  gap: var(--space-3);
 }
 
-.bottom-panel-tab-content {
-  min-height: 0;
-}
+/* ── Bottom panel tabs: text-only, underline-active, anti-slop ── */
 
-.bottom-panel-dev {
-  border-top: 1px solid #dae5f2;
-  padding-top: 0.56rem;
+.bottom-tabs {
+  display: flex;
+  gap: var(--space-3);
 }
 
-.panel-empty {
-  margin: 0;
-  color: var(--text-soft);
+.bottom-tabs button {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  color: var(--text-muted);
+  padding: var(--space-1) 0 var(--space-2);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color var(--transition-fast), border-color var(--transition-fast);
+  position: relative;
 }
 
-.panel-split {
-  display: grid;
-  gap: 0.42rem;
-  margin-bottom: 0.66rem;
+.bottom-tabs button:hover {
+  color: var(--text-secondary);
 }
 
-.panel-split:last-child {
-  margin-bottom: 0;
+.bottom-tabs button[aria-pressed="true"] {
+  color: var(--color-t1);
+  border-bottom-color: var(--color-t1);
 }
 
-.panel-split h4 {
-  margin: 0;
-  font-size: 0.76rem;
-  letter-spacing: 0.02em;
-  color: #36567a;
+.tab-badge {
+  position: absolute;
+  top: -2px;
+  right: -10px;
+  min-width: 14px;
+  height: 14px;
+  border-radius: 7px;
+  background: var(--color-contradiction);
+  color: var(--text-accent);
+  font-size: 9px;
+  font-weight: 700;
+  display: grid;
+  place-items: center;
+  padding: 0 3px;
 }
 
-.row-meta {
-  color: #607793;
-  margin-right: 0.42rem;
+.bottom-panel-tab-content {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
 }
 
-.level-info {
-  color: #2b5f95;
+/* ── Log rows (anti-slop: no cards) ── */
+
+.log-row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-2);
+  padding: var(--space-1) 0;
+  border-bottom: 1px solid rgba(33, 38, 45, 0.5);
+  font-size: var(--font-size-sm);
 }
 
-.level-warn {
-  color: #8d5f1a;
+.log-row:last-child {
+  border-bottom: 0;
 }
 
-.level-error {
-  color: #8a2f38;
+.log-timestamp {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  flex-shrink: 0;
 }
 
-.panel-rows {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: grid;
-  gap: 0.42rem;
+.log-step {
+  color: var(--color-t1);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  flex-shrink: 0;
+  min-width: 24px;
 }
 
-.panel-row {
-  border: 1px solid #dbe6f3;
-  border-radius: 9px;
-  background: #f9fcff;
-  padding: 0.46rem 0.56rem;
-  display: grid;
-  gap: 0.3rem;
+.log-message {
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
 }
 
-.panel-row-error {
-  border-color: #edcfd3;
-  background: #fff8f9;
+.log-detail {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
 }
 
-.panel-row-main {
-  display: flex;
-  align-items: center;
-  gap: 0.45rem;
-  flex-wrap: wrap;
+.log-confidence {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
 }
 
-.panel-row-main code,
-.pan-event-row code {
-  padding: 0.12rem 0.28rem;
-  border: 1px solid #d8e3f0;
-  border-radius: 6px;
-  background: #ffffff;
-  color: #3b4f67;
-  font-size: 0.7rem;
+.confidence-high {
+  color: #3fb950;
 }
 
-.chip {
-  border: 1px solid #cddbed;
-  border-radius: 999px;
-  padding: 0.1rem 0.4rem;
-  font-size: 0.68rem;
-  background: #edf4ff;
-  color: #34587d;
+.confidence-medium {
+  color: var(--color-question);
 }
 
-.panel-row-meta {
-  display: flex;
-  gap: 0.6rem;
-  flex-wrap: wrap;
-  font-size: 0.72rem;
-  color: #5f7691;
+.confidence-low {
+  color: var(--color-contradiction);
 }
 
-.panel-row-detail {
-  font-size: 0.76rem;
-  color: #2d425d;
+.panel-empty {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+  font-family: var(--font-sans);
+  padding: var(--space-4) var(--space-2);
+  line-height: 1.5;
 }
 
+/* ── PAN console ── */
+
 .pan-console {
-  display: grid;
-  gap: 0.46rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
 }
 
 .pan-console-toolbar {
   display: flex;
   align-items: center;
-  gap: 0.45rem;
+  gap: var(--space-2);
 }
 
 .pan-console-toolbar input {
   flex: 1;
-  min-width: 180px;
-  font-size: 0.76rem;
-  background: #fbfdff;
+  min-width: 140px;
+  font-size: var(--font-size-sm);
+  background: var(--bg-input);
+  border: 1px solid var(--bg-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-1) var(--space-2);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
 }
 
 .pan-event-row {
-  display: grid;
-  gap: 0.2rem;
+  display: flex;
+  gap: var(--space-2);
+  align-items: baseline;
+  font-size: var(--font-size-xs);
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+  padding: 2px 0;
 }
 
-.graph-workspace {
-  height: 100%;
-  min-height: 360px;
-  position: relative;
-  overflow: hidden;
-  border-radius: 14px;
-  border: 1px solid #cedbeb;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
-  background-color: #f6faff;
-  background-image:
-    linear-gradient(to right, rgba(153, 176, 204, 0.24) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(153, 176, 204, 0.24) 1px, transparent 1px);
-  background-size: 24px 24px;
-  cursor: grab;
-  outline: none;
-  touch-action: none;
+.pan-event-row code {
+  padding: 1px var(--space-1);
+  border: 1px solid var(--bg-border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-input);
+  color: var(--text-secondary);
+  font-size: var(--font-size-xs);
 }
 
-.graph-workspace.is-dragging-node {
-  cursor: grabbing;
-}
+/* ── Canvas container ── */
 
-.graph-workspace[data-tool="pan"] {
-  cursor: grab;
+.mg-canvas {
+  min-height: 0;
 }
 
-.graph-workspace[data-tool^="create:"] {
-  cursor: copy;
+.mg-graph-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border: 0;
+  background: transparent;
 }
 
-.graph-workspace[data-tool="connect"] {
-  cursor: crosshair;
+.mg-graph-content {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  padding: 0 !important;
+  position: relative;
 }
 
-.graph-scene {
-  position: absolute;
-  inset: 0;
-  width: 3200px;
-  height: 2200px;
-  transform-origin: 0 0;
-}
+/* ── Three.js canvas container ── */
 
-.graph-edges-layer {
-  position: absolute;
-  inset: 0;
-  width: 3200px;
-  height: 2200px;
-  overflow: visible;
-  pointer-events: auto;
+.three-canvas-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: var(--bg-canvas);
+  cursor: grab;
+  outline: none;
 }
 
-.graph-node-layer {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
+.three-canvas-container.is-orbiting {
+  cursor: grabbing;
 }
 
-.graph-node-layer [data-node-id] {
-  pointer-events: auto;
-  touch-action: none;
+.three-canvas-container canvas {
+  display: block;
+  width: 100% !important;
+  height: 100% !important;
 }
 
-.graph-marquee {
-  position: absolute;
-  border: 1px solid #3a6ea6;
-  background: rgba(58, 110, 166, 0.14);
-  border-radius: 6px;
-  pointer-events: none;
-  z-index: 7;
-}
+/* ── Tooltip (CSS2D overlay) ── */
 
-.graph-edge-path {
-  fill: none;
-  stroke: #90a5c0;
-  stroke-width: 1.5;
-  stroke-linecap: round;
+.node-tooltip {
+  background: #161b22;
+  opacity: 0.95;
+  border: 1px solid var(--bg-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-1) var(--space-2);
+  max-width: 240px;
   pointer-events: none;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.graph-edge-path.is-selected {
-  stroke-width: 2.4;
-  stroke: #2c6ca8;
+.node-tooltip-meta {
+  color: var(--text-muted);
+  font-size: var(--font-size-xs);
+  margin-top: 2px;
 }
 
-.graph-edge-hit-area {
-  fill: none;
-  stroke: transparent;
-  stroke-width: 14;
-  pointer-events: stroke;
-  cursor: pointer;
-}
+/* ── Canvas overlays ── */
 
-.graph-edge-draft {
-  fill: none;
-  stroke: #335f90;
-  stroke-width: 2;
-  stroke-dasharray: 6 6;
-  stroke-linecap: round;
+.canvas-empty-state {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: var(--text-muted);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-lg);
   pointer-events: none;
+  z-index: 2;
 }
 
-.graph-edge-parent_of {
-  stroke: #2f6aaa;
-}
-
-.graph-edge-reports_to {
-  stroke: #3e6ea5;
-  stroke-dasharray: 5 4;
-}
-
-.graph-edge-reads_from {
-  stroke: #28846f;
-}
-
-.graph-edge-arrow {
-  fill: #6f88a7;
-}
-
-.graph-edge-label-group {
+.canvas-loading-state {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
   pointer-events: none;
+  z-index: 2;
+  animation: pulse-text 2s ease-in-out infinite;
 }
 
-.graph-edge-label-bg {
-  fill: rgba(244, 249, 255, 0.92);
-  stroke: #c7d9ee;
+@keyframes pulse-text {
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
 }
 
-.graph-edge-label {
-  font-size: 10.6px;
-  fill: #395677;
-  text-anchor: middle;
-  font-weight: 700;
+.canvas-prompt {
+  position: absolute;
+  top: var(--space-4);
+  left: 50%;
+  transform: translateX(-50%);
+  color: var(--text-muted);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-sm);
+  pointer-events: none;
+  z-index: 2;
+  opacity: 0;
+  animation: fade-in-prompt 1s 3s ease forwards;
 }
 
-@media (max-width: 1200px) {
-  .top-toolbar-content {
-    grid-template-columns: 1fr 1fr;
-    gap: 0.5rem;
+@keyframes fade-in-prompt {
+  to {
+    opacity: 1;
   }
+}
 
-  .toolbar-brand {
-    grid-column: 1 / -1;
-  }
+.webgl-error-overlay {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: var(--bg-panel);
+  z-index: 10;
+  color: var(--text-secondary);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-lg);
 }
diff --git a/index.html b/index.html
index eff9b04..2939969 100644
--- a/index.html
+++ b/index.html
@@ -3,18 +3,41 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>MindGraph AI</title>
-    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%231e4d86'/%3E%3Cstop offset='1' stop-color='%234277bc'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='4' y='4' width='56' height='56' rx='14' fill='url(%23g)'/%3E%3Ctext x='32' y='39' text-anchor='middle' font-family='Arial,sans-serif' font-size='22' font-weight='700' fill='white'%3EMG%3C/text%3E%3C/svg%3E" />
+    <title>CAR Brain</title>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='4' y='4' width='56' height='56' rx='8' fill='%23080c14'/%3E%3Ccircle cx='32' cy='32' r='12' fill='none' stroke='%2300f5ff' stroke-width='2'/%3E%3Ccircle cx='32' cy='32' r='4' fill='%2300f5ff'/%3E%3Cline x1='20' y1='20' x2='44' y2='44' stroke='%237b61ff' stroke-width='1.5'/%3E%3Cline x1='44' y1='20' x2='20' y2='44' stroke='%23ff2d78' stroke-width='1.5'/%3E%3C/svg%3E"
+    />
     <link rel="stylesheet" href="./css/app.css" />
     <link rel="stylesheet" href="./css/layout.css" />
     <link rel="stylesheet" href="./css/nodes.css" />
     <link rel="stylesheet" href="./css/panels.css" />
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
+          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
+        }
+      }
+    </script>
   </head>
   <body>
-    <div id="mg-protocol-warning" style="display: none; margin: 1rem; padding: 0.8rem 1rem; border: 1px solid #e3b8b8; border-radius: 8px; background: #fff6f6; color: #6d1f1f; font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;">
-      MindGraph AI must be opened over HTTP, not <code>file://</code>. Run
-      <code>python3 -m http.server 4173</code> in this folder and open
-      <code>http://127.0.0.1:4173</code>.
+    <div
+      id="mg-protocol-warning"
+      style="
+        display: none;
+        margin: 1rem;
+        padding: 0.8rem 1rem;
+        border: 1px solid #21262d;
+        border-radius: 4px;
+        background: #0d1117;
+        color: #c9d1d9;
+        font-family: 'IBM Plex Sans', sans-serif;
+      "
+    >
+      CAR Brain must be opened over HTTP, not <code>file://</code>. Run
+      <code>node server.js</code> in this folder and open
+      <code>http://localhost:4173</code>.
     </div>
     <app-shell></app-shell>
     <script>

From 2fcb7c0e609a0403cfd7f6534e5778e1af8620b3 Mon Sep 17 00:00:00 2001
From: Amit Kolton <amit.ko@thing02.com>
Date: Fri, 3 Apr 2026 15:36:59 +0300
Subject: [PATCH 06/13] feat: Three.js 3D canvas with WebGL renderer, bloom,
 and atmosphere

Replace DOM/SVG canvas with Three.js WebGL scene. Includes OrbitControls,
UnrealBloomPass post-processing, FogExp2 depth fade. 3D node geometries
per type (sphere T1, icosahedron T2, octahedron T3, tetrahedron questions,
diamond triggers). Atmospheric layer with 200 ambient particles, 500 star
points, nebula sprites, ambient light breathing. Camera intro swoop from
(0,200,600) to home (0,80,350). Auto-focus on selected node with 0.6s
easeInOutCubic lerp. Raycasting for node selection. Contradiction edge
pulse animation. Legacy canvas sub-modules stubbed.
---
 js/components/graph-canvas.js                 | 1391 +++++++++--------
 js/components/graph-canvas/canvas-renderer.js |   59 +-
 .../graph-canvas/canvas-selection.js          |   36 +-
 js/components/graph-canvas/canvas-viewport.js |   40 +-
 .../graph-canvas/three-atmosphere.js          |  164 ++
 js/components/graph-canvas/three-edges.js     |  170 ++
 js/components/graph-canvas/three-nodes.js     |  272 ++++
 7 files changed, 1331 insertions(+), 801 deletions(-)
 create mode 100644 js/components/graph-canvas/three-atmosphere.js
 create mode 100644 js/components/graph-canvas/three-edges.js
 create mode 100644 js/components/graph-canvas/three-nodes.js

diff --git a/js/components/graph-canvas.js b/js/components/graph-canvas.js
index a7dc896..e57c8d8 100644
--- a/js/components/graph-canvas.js
+++ b/js/components/graph-canvas.js
@@ -1,704 +1,717 @@
-import {
-  clampGraphPoint,
-  clampZoom,
-  formatEdgeLabel,
-  NODE_SIZE_BY_TYPE,
-  NODE_TEMPLATES,
-  WORLD_SIZE
-} from "../core/constants.js";
+import * as THREE from "three";
+import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
+import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
+import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
+
+import { BLOOM, CAMERA, FOG } from "../core/constants.js";
 import { EVENTS } from "../core/event-constants.js";
 import { publish, subscribe } from "../core/pan.js";
 import { graphStore } from "../store/graph-store.js";
 import { uiStore } from "../store/ui-store.js";
-import { renderEdges, renderNodes, highlightSelection } from "./graph-canvas/canvas-renderer.js";
-import { applyViewportTransform, screenToWorld, zoomAtClientPoint } from "./graph-canvas/canvas-viewport.js";
-import { findNodeIdsInWorldRect, normalizeScreenRect } from "./graph-canvas/canvas-selection.js";
-
-const isUndoShortcut = (event) =>
-  (event.ctrlKey || event.metaKey) && !event.shiftKey && event.key.toLowerCase() === "z";
-const isRedoShortcut = (event) =>
-  (event.ctrlKey || event.metaKey) &&
-  ((event.shiftKey && event.key.toLowerCase() === "z") || event.key.toLowerCase() === "y");
+import {
+	animateAmbientParticles,
+	createAmbientParticles,
+	createNebulaClouds,
+	createStarField,
+	updateAmbientBreathing,
+} from "./graph-canvas/three-atmosphere.js";
+import {
+	createEdgeLine,
+	setEdgeSelected,
+	updateContradictionPulse,
+} from "./graph-canvas/three-edges.js";
+import {
+	createNodeMesh,
+	createSelectionRing,
+	updateClusterShell,
+	updateNodeMesh,
+} from "./graph-canvas/three-nodes.js";
 
 class GraphCanvas extends HTMLElement {
-  #selectedNodeIds = [];
-  #selectedEdgeId = null;
-  #activeTool = "select";
-  #connectState = { sourceNodeId: null };
-  #connectDragState = null;
-  #dispose = [];
-  #viewport = { x: 0, y: 0, zoom: 1 };
-  #workspaceEl = null;
-  #sceneEl = null;
-  #nodeLayerEl = null;
-  #edgeLayerEl = null;
-  #edgeDraftEl = null;
-  #marqueeEl = null;
-  #panState = null;
-  #dragState = null;
-  #marqueeState = null;
-
-  connectedCallback() {
-    this.#renderShell();
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_DOCUMENT_LOADED, ({ payload }) => {
-        const nextViewport = payload?.document?.viewport;
-        if (nextViewport) {
-          this.#viewport = {
-            x: Number(nextViewport.x ?? 0),
-            y: Number(nextViewport.y ?? 0),
-            zoom: clampZoom(Number(nextViewport.zoom ?? 1))
-          };
-        }
-
-        this.#renderGraph();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_DOCUMENT_CHANGED, ({ payload }) => {
-        if (payload?.reason === "viewport") return;
-        this.#renderGraph();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_VIEWPORT_CHANGED, ({ payload }) => {
-        const nextZoom = Number(payload?.zoom ?? this.#viewport.zoom);
-        const nextX = Number(payload?.x ?? this.#viewport.x);
-        const nextY = Number(payload?.y ?? this.#viewport.y);
-        if (!Number.isFinite(nextZoom)) return;
-        this.#viewport.zoom = clampZoom(nextZoom);
-        this.#viewport.x = Number.isFinite(nextX) ? nextX : this.#viewport.x;
-        this.#viewport.y = Number.isFinite(nextY) ? nextY : this.#viewport.y;
-        this.#applyViewportTransform();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.TOOLBAR_TOOL_CHANGED, ({ payload }) => {
-        this.#activeTool = payload?.tool ?? "select";
-        this.#syncInteractionMode();
-        this.#highlightSelection();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_SELECTION_SET, ({ payload }) => {
-        this.#selectedNodeIds = Array.isArray(payload?.nodeIds)
-          ? [...payload.nodeIds]
-          : payload?.nodeId
-            ? [payload.nodeId]
-            : [];
-        this.#highlightSelection();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_EDGE_SELECTED, ({ payload }) => {
-        this.#selectedEdgeId = payload?.edgeId ?? null;
-        this.#renderGraph();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_EDGE_SELECTION_CLEARED, () => {
-        this.#selectedEdgeId = null;
-        this.#renderGraph();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_SELECTION_CLEARED, () => {
-        this.#selectedNodeIds = [];
-        this.#highlightSelection();
-      })
-    );
-
-    this.#syncInteractionMode();
-    this.#selectedNodeIds = graphStore.getSelectedNodeIds();
-    this.#selectedEdgeId = graphStore.getSelectedEdgeId();
-    this.#renderGraph();
-  }
-
-  disconnectedCallback() {
-    this.#dispose.forEach((run) => run());
-    this.#dispose = [];
-  }
-
-  #renderShell() {
-    this.innerHTML = `
+	#dispose = [];
+	#renderer = null;
+	#scene = null;
+	#camera = null;
+	#controls = null;
+	#composer = null;
+	#clock = null;
+	#animationId = null;
+	#containerEl = null;
+
+	/* ── Scene groups ── */
+	#nodeGroup = null;
+	#edgeGroup = null;
+	#atmosphereGroup = null;
+	#ambientLight = null;
+	#ambientParticles = null;
+	#selectionRing = null;
+
+	/* ── State ── */
+	#nodeMeshMap = new Map(); // nodeId → THREE.Mesh
+	#edgeLineMap = new Map(); // edgeId → THREE.Line
+	#selectedNodeIds = [];
+	#selectedEdgeId = null;
+	#activeTool = "select";
+	#hoveredNodeId = null;
+	#hoverTimeout = null;
+	#introComplete = false;
+	#introStartTime = 0;
+	#raycaster = new THREE.Raycaster();
+	#mouse = new THREE.Vector2();
+	#focusTarget = null;
+	#focusProgress = 0;
+
+	connectedCallback() {
+		this.innerHTML = `
       <section class="mg-panel mg-graph-panel">
-        <header>Graph Canvas</header>
         <div class="content mg-graph-content">
-          <div class="graph-workspace" data-role="workspace" tabindex="0">
-            <div class="graph-scene" data-role="scene">
-              <svg class="graph-edges-layer" data-role="edges" width="${WORLD_SIZE.width}" height="${WORLD_SIZE.height}" viewBox="0 0 ${WORLD_SIZE.width} ${WORLD_SIZE.height}" aria-hidden="true"></svg>
-              <div class="graph-node-layer" data-role="nodes"></div>
-            </div>
-            <div class="graph-marquee" data-role="marquee" hidden></div>
-          </div>
+          <div class="three-canvas-container" data-role="three-container" tabindex="0"></div>
         </div>
       </section>
     `;
 
-    this.#workspaceEl = this.querySelector('[data-role="workspace"]');
-    this.#sceneEl = this.querySelector('[data-role="scene"]');
-    this.#nodeLayerEl = this.querySelector('[data-role="nodes"]');
-    this.#edgeLayerEl = this.querySelector('[data-role="edges"]');
-    this.#marqueeEl = this.querySelector('[data-role="marquee"]');
-
-    this.#bindInteractionEvents();
-    this.#applyViewportTransform();
-  }
-
-  #bindInteractionEvents() {
-    if (!this.#workspaceEl) return;
-
-    this.#workspaceEl.addEventListener("pointerdown", (event) => this.#onWorkspacePointerDown(event));
-    this.#workspaceEl.addEventListener("pointermove", (event) => this.#onWorkspacePointerMove(event));
-    this.#workspaceEl.addEventListener("pointerup", (event) => this.#onWorkspacePointerUp(event));
-    this.#workspaceEl.addEventListener("pointercancel", (event) => this.#onWorkspacePointerUp(event));
-    this.#workspaceEl.addEventListener("keydown", (event) => this.#onWorkspaceKeyDown(event));
-    this.#workspaceEl.addEventListener(
-      "wheel",
-      (event) => {
-        this.#onWorkspaceWheel(event);
-      },
-      { passive: false }
-    );
-  }
-
-  #onWorkspacePointerDown(event) {
-    if (event.button !== 0 && event.button !== 1) return;
-    this.#workspaceEl.focus();
-    if (event.target.closest("[data-node-id]")) return;
-
-    if (event.button === 0 && this.#activeTool.startsWith("create:")) {
-      const nodeType = this.#activeTool.split(":")[1] ?? "note";
-      const worldPoint = this.#screenToWorld(event.clientX, event.clientY);
-      this.#createNodeAt(nodeType, worldPoint);
-      event.preventDefault();
-      return;
-    }
-
-    if (event.button === 0 && this.#activeTool === "select") {
-      const rect = this.#workspaceEl.getBoundingClientRect();
-      this.#marqueeState = {
-        pointerId: event.pointerId,
-        startX: event.clientX - rect.left,
-        startY: event.clientY - rect.top,
-        endX: event.clientX - rect.left,
-        endY: event.clientY - rect.top,
-        moved: false,
-        additive: event.shiftKey
-      };
-      this.#workspaceEl.setPointerCapture(event.pointerId);
-      this.#updateMarquee();
-      event.preventDefault();
-      return;
-    }
-
-    const canPan = this.#activeTool === "pan" || event.button === 1;
-    if (!canPan) return;
-
-    this.#panState = {
-      pointerId: event.pointerId,
-      startClientX: event.clientX,
-      startClientY: event.clientY,
-      originX: this.#viewport.x,
-      originY: this.#viewport.y,
-      moved: false
-    };
-
-    this.#workspaceEl.setPointerCapture(event.pointerId);
-    event.preventDefault();
-  }
-
-  #onWorkspacePointerMove(event) {
-    if (this.#connectDragState && event.pointerId === this.#connectDragState.pointerId) {
-      const worldPoint = this.#screenToWorld(event.clientX, event.clientY);
-      this.#connectDragState.pointerWorld = worldPoint;
-      const hoveredNodeId = this.#findNodeIdAtClientPoint(event.clientX, event.clientY);
-      this.#connectDragState.hoveredNodeId =
-        hoveredNodeId && hoveredNodeId !== this.#connectDragState.sourceNodeId ? hoveredNodeId : null;
-      this.#renderConnectDraft();
-      this.#highlightSelection();
-      return;
-    }
-
-    if (this.#dragState && event.pointerId === this.#dragState.pointerId) {
-      const worldPoint = this.#screenToWorld(event.clientX, event.clientY);
-      const nextX = Math.round(worldPoint.x - this.#dragState.offsetX);
-      const nextY = Math.round(worldPoint.y - this.#dragState.offsetY);
-      const previewPosition = clampGraphPoint({ x: nextX, y: nextY });
-
-      this.#dragState.moved = true;
-      this.#dragState.previewPosition = previewPosition;
-      this.#applyDragPreview();
-      return;
-    }
-
-    if (this.#marqueeState && event.pointerId === this.#marqueeState.pointerId) {
-      const rect = this.#workspaceEl.getBoundingClientRect();
-      this.#marqueeState.endX = event.clientX - rect.left;
-      this.#marqueeState.endY = event.clientY - rect.top;
-      this.#marqueeState.moved =
-        Math.abs(this.#marqueeState.endX - this.#marqueeState.startX) > 3 ||
-        Math.abs(this.#marqueeState.endY - this.#marqueeState.startY) > 3;
-      this.#updateMarquee();
-      return;
-    }
-
-    if (!this.#panState || event.pointerId !== this.#panState.pointerId) return;
-
-    const deltaX = event.clientX - this.#panState.startClientX;
-    const deltaY = event.clientY - this.#panState.startClientY;
-
-    this.#panState.moved = Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1;
-    this.#viewport.x = this.#panState.originX + deltaX;
-    this.#viewport.y = this.#panState.originY + deltaY;
-    this.#applyViewportTransform();
-  }
-
-  #onWorkspacePointerUp(event) {
-    if (this.#connectDragState && event.pointerId === this.#connectDragState.pointerId) {
-      this.#connectDragState.captureEl?.releasePointerCapture?.(event.pointerId);
-      this.#commitConnectDrag();
-      return;
-    }
-
-    if (this.#dragState && event.pointerId === this.#dragState.pointerId) {
-      this.#workspaceEl.releasePointerCapture(event.pointerId);
-      this.#workspaceEl.classList.remove("is-dragging-node");
-
-      const moved = this.#dragState.moved;
-      const nodeId = this.#dragState.nodeId;
-      const previewPosition = this.#dragState.previewPosition;
-      this.#dragState = null;
-
-      if (moved && previewPosition) {
-        publish(EVENTS.GRAPH_NODE_MOVE_REQUESTED, {
-          nodeId,
-          position: previewPosition,
-          origin: "graph-canvas"
-        });
-      } else {
-        this.#renderGraph();
-      }
-
-      return;
-    }
-
-    if (this.#marqueeState && event.pointerId === this.#marqueeState.pointerId) {
-      this.#workspaceEl.releasePointerCapture(event.pointerId);
-      const marqueeState = this.#marqueeState;
-      this.#marqueeState = null;
-      this.#hideMarquee();
-
-      if (!marqueeState.moved) {
-        if (this.#activeTool === "select") {
-          publish(EVENTS.GRAPH_SELECTION_CLEAR_REQUESTED, { origin: "graph-canvas" });
-        }
-        return;
-      }
-
-      this.#applyMarqueeSelection(marqueeState);
-      return;
-    }
-
-    if (!this.#panState || event.pointerId !== this.#panState.pointerId) return;
-
-    this.#workspaceEl.releasePointerCapture(event.pointerId);
-    const changed = this.#panState.moved;
-    this.#panState = null;
-
-    if (changed) {
-      publish(EVENTS.GRAPH_VIEWPORT_UPDATE_REQUESTED, {
-        x: this.#viewport.x,
-        y: this.#viewport.y,
-        zoom: this.#viewport.zoom,
-        origin: "graph-canvas"
-      });
-    }
-  }
-
-  #onWorkspaceWheel(event) {
-    if (!this.#workspaceEl) return;
-    event.preventDefault();
-
-    const direction = event.deltaY < 0 ? 1 : -1;
-    const nextViewport = zoomAtClientPoint(
-      this.#workspaceEl,
-      this.#viewport,
-      event.clientX,
-      event.clientY,
-      direction
-    );
-
-    if (nextViewport.zoom === this.#viewport.zoom) return;
-
-    this.#viewport = nextViewport;
-    this.#applyViewportTransform();
-
-    publish(EVENTS.GRAPH_VIEWPORT_UPDATE_REQUESTED, {
-      x: this.#viewport.x,
-      y: this.#viewport.y,
-      zoom: this.#viewport.zoom,
-      origin: "graph-canvas"
-    });
-  }
-
-  #onWorkspaceKeyDown(event) {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      if (this.#connectDragState) {
-        this.#cancelConnectDrag();
-        this.#highlightSelection();
-        return;
-      }
-
-      if (this.#activeTool !== "select") {
-        uiStore.setTool("select");
-      } else {
-        publish(EVENTS.GRAPH_SELECTION_CLEAR_REQUESTED, { origin: "graph-canvas" });
-      }
-      return;
-    }
-
-    if (isUndoShortcut(event)) {
-      event.preventDefault();
-      if (!graphStore.canUndo()) return;
-      publish(EVENTS.GRAPH_DOCUMENT_UNDO_REQUESTED, { origin: "graph-canvas" });
-      publish(EVENTS.ACTIVITY_LOG_APPENDED, { level: "info", message: "Undo applied" });
-      return;
-    }
-
-    if (isRedoShortcut(event)) {
-      event.preventDefault();
-      if (!graphStore.canRedo()) return;
-      publish(EVENTS.GRAPH_DOCUMENT_REDO_REQUESTED, { origin: "graph-canvas" });
-      publish(EVENTS.ACTIVITY_LOG_APPENDED, { level: "info", message: "Redo applied" });
-      return;
-    }
-
-    if (!this.#selectedNodeIds.length) return;
-
-    if (event.key === "Delete" || event.key === "Backspace") {
-      event.preventDefault();
-      publish(EVENTS.GRAPH_NODE_DELETE_REQUESTED, {
-        nodeIds: [...this.#selectedNodeIds],
-        origin: "graph-canvas"
-      });
-      publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-        level: "info",
-        message: `Deleted ${this.#selectedNodeIds.length} node(s)`
-      });
-      return;
-    }
-
-    const isDuplicateShortcut = (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "d";
-    if (isDuplicateShortcut) {
-      event.preventDefault();
-      this.#duplicateSelectedNode();
-    }
-  }
-
-  #onNodePointerDown(event, node) {
-    if (event.button !== 0) return;
-    this.#workspaceEl.focus();
-    event.stopPropagation();
-
-    publish(EVENTS.GRAPH_NODE_SELECT_REQUESTED, {
-      nodeId: node.id,
-      additive: event.shiftKey,
-      toggle: event.shiftKey,
-      origin: "graph-canvas"
-    });
-
-    const dragEnabled = this.#activeTool === "select" || this.#activeTool.startsWith("create:");
-    if (!dragEnabled) return;
-
-    this.#workspaceEl.setPointerCapture(event.pointerId);
-    this.#workspaceEl.classList.add("is-dragging-node");
-
-    const worldPoint = this.#screenToWorld(event.clientX, event.clientY);
-    this.#dragState = {
-      pointerId: event.pointerId,
-      nodeId: node.id,
-      offsetX: worldPoint.x - (node.position?.x ?? 0),
-      offsetY: worldPoint.y - (node.position?.y ?? 0),
-      previewPosition: node.position ?? { x: 0, y: 0 },
-      moved: false
-    };
-  }
-
-  #applyDragPreview() {
-    if (!this.#dragState) return;
-
-    const nodeEl = this.#nodeLayerEl?.querySelector(`[data-node-id="${this.#dragState.nodeId}"]`);
-    if (nodeEl) {
-      nodeEl.style.left = `${this.#dragState.previewPosition.x}px`;
-      nodeEl.style.top = `${this.#dragState.previewPosition.y}px`;
-    }
-
-    const document = graphStore.getDocument();
-    const previewNodes = (document?.nodes ?? []).map((node) =>
-      node.id === this.#dragState.nodeId
-        ? {
-            ...node,
-            position: this.#dragState.previewPosition
-          }
-        : node
-    );
-
-    renderEdges(this.#edgeLayerEl, previewNodes, document?.edges ?? [], this.#selectedEdgeId);
-    this.#bindEdgePointerEvents();
-    this.#renderConnectDraft();
-  }
-
-  #onConnectHandlePointerDown(event, node) {
-    if (event.button !== 0) return;
-    event.preventDefault();
-    event.stopPropagation();
-    this.#workspaceEl.focus();
-
-    const sourcePoint = this.#connectionPointForNode(node);
-    const pointerWorld = this.#screenToWorld(event.clientX, event.clientY);
-    this.#connectState.sourceNodeId = node.id;
-    this.#connectDragState = {
-      pointerId: event.pointerId,
-      sourceNodeId: node.id,
-      sourcePoint,
-      pointerWorld,
-      hoveredNodeId: null,
-      captureEl: event.currentTarget
-    };
-
-    this.#connectDragState.captureEl?.setPointerCapture?.(event.pointerId);
-    publish(EVENTS.GRAPH_EDGE_SELECTION_CLEAR_REQUESTED, { origin: "graph-canvas" });
-    this.#renderConnectDraft();
-    this.#highlightSelection();
-  }
-
-  #cancelConnectDrag() {
-    this.#connectDragState = null;
-    this.#connectState.sourceNodeId = null;
-    this.#hideConnectDraft();
-  }
-
-  #commitConnectDrag() {
-    const state = this.#connectDragState;
-    if (!state) return;
-
-    const targetNodeId = state.hoveredNodeId;
-    if (targetNodeId && targetNodeId !== state.sourceNodeId) {
-      const edgeType = "depends_on";
-      publish(EVENTS.GRAPH_EDGE_CREATE_REQUESTED, {
-        source: state.sourceNodeId,
-        target: targetNodeId,
-        type: edgeType,
-        label: formatEdgeLabel(edgeType),
-        selectAfterCreate: true,
-        origin: "graph-canvas"
-      });
-    }
-
-    this.#cancelConnectDrag();
-    this.#highlightSelection();
-  }
-
-  #findNodeIdAtClientPoint(clientX, clientY) {
-    const target = document.elementFromPoint(clientX, clientY);
-    const nodeEl = target?.closest("[data-node-id]");
-    return nodeEl?.dataset?.nodeId ?? null;
-  }
-
-  #connectionPointForNode(node) {
-    const size = NODE_SIZE_BY_TYPE[node.type] ?? NODE_SIZE_BY_TYPE.note;
-    const x = Number(node.position?.x ?? 0) + size.width - 10;
-    const y = Number(node.position?.y ?? 0) + 16;
-    return { x, y };
-  }
-
-  #renderConnectDraft() {
-    if (!this.#edgeDraftEl) return;
-    if (!this.#connectDragState) {
-      this.#hideConnectDraft();
-      return;
-    }
-
-    const { sourcePoint, pointerWorld } = this.#connectDragState;
-    this.#edgeDraftEl.hidden = false;
-    this.#edgeDraftEl.setAttribute("d", `M ${sourcePoint.x} ${sourcePoint.y} L ${pointerWorld.x} ${pointerWorld.y}`);
-  }
-
-  #hideConnectDraft() {
-    if (!this.#edgeDraftEl) return;
-    this.#edgeDraftEl.hidden = true;
-    this.#edgeDraftEl.setAttribute("d", "");
-  }
-
-  #bindEdgePointerEvents() {
-    this.#edgeLayerEl?.querySelectorAll("[data-edge-id]").forEach((edgeEl) => {
-      edgeEl.addEventListener("pointerdown", (event) => {
-        if (event.button !== 0) return;
-        event.preventDefault();
-        event.stopPropagation();
-        this.#workspaceEl.focus();
-        publish(EVENTS.GRAPH_EDGE_SELECT_REQUESTED, {
-          edgeId: edgeEl.dataset.edgeId,
-          origin: "graph-canvas"
-        });
-      });
-    });
-  }
-
-  #updateMarquee() {
-    if (!this.#marqueeEl || !this.#marqueeState) return;
-
-    const rect = normalizeScreenRect(
-      this.#marqueeState.startX,
-      this.#marqueeState.startY,
-      this.#marqueeState.endX,
-      this.#marqueeState.endY
-    );
-
-    this.#marqueeEl.hidden = false;
-    this.#marqueeEl.style.left = `${rect.left}px`;
-    this.#marqueeEl.style.top = `${rect.top}px`;
-    this.#marqueeEl.style.width = `${rect.width}px`;
-    this.#marqueeEl.style.height = `${rect.height}px`;
-  }
-
-  #hideMarquee() {
-    if (!this.#marqueeEl) return;
-    this.#marqueeEl.hidden = true;
-    this.#marqueeEl.style.width = "0px";
-    this.#marqueeEl.style.height = "0px";
-  }
-
-  #applyMarqueeSelection(marqueeState) {
-    const rect = normalizeScreenRect(
-      marqueeState.startX,
-      marqueeState.startY,
-      marqueeState.endX,
-      marqueeState.endY
-    );
-
-    const boundsTopLeft = this.#screenToWorld(rect.left + this.#workspaceEl.getBoundingClientRect().left, rect.top + this.#workspaceEl.getBoundingClientRect().top);
-    const boundsBottomRight = this.#screenToWorld(rect.right + this.#workspaceEl.getBoundingClientRect().left, rect.bottom + this.#workspaceEl.getBoundingClientRect().top);
-
-    const worldRect = {
-      left: Math.min(boundsTopLeft.x, boundsBottomRight.x),
-      top: Math.min(boundsTopLeft.y, boundsBottomRight.y),
-      right: Math.max(boundsTopLeft.x, boundsBottomRight.x),
-      bottom: Math.max(boundsTopLeft.y, boundsBottomRight.y)
-    };
-
-    const document = graphStore.getDocument();
-    const ids = findNodeIdsInWorldRect(document?.nodes ?? [], worldRect);
-    if (!marqueeState.additive) {
-      publish(EVENTS.GRAPH_SELECTION_SET_REQUESTED, { nodeIds: ids, origin: "graph-canvas" });
-      return;
-    }
-
-    const merged = [...new Set([...this.#selectedNodeIds, ...ids])];
-    publish(EVENTS.GRAPH_SELECTION_SET_REQUESTED, { nodeIds: merged, origin: "graph-canvas" });
-  }
-
-  #createNodeAt(nodeType, position) {
-    const template = NODE_TEMPLATES[nodeType] ?? NODE_TEMPLATES.note;
-    const normalizedPosition = clampGraphPoint(position);
-
-    publish(EVENTS.GRAPH_NODE_CREATE_REQUESTED, {
-      node: {
-        type: nodeType,
-        label: template.label,
-        description: template.description,
-        position: normalizedPosition,
-        data: structuredClone(template.data),
-        metadata: { createdFromTool: this.#activeTool }
-      },
-      selectAfterCreate: true,
-      origin: "graph-canvas"
-    });
-
-    publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-      level: "info",
-      message: `Created ${nodeType} node`
-    });
-  }
-
-  #duplicateSelectedNode() {
-    const sourceId = this.#selectedNodeIds[0] ?? null;
-    if (!sourceId) return;
-    const source = graphStore.getNode(sourceId);
-    if (!source) return;
-
-    publish(EVENTS.GRAPH_NODE_CREATE_REQUESTED, {
-      node: {
-        type: source.type,
-        label: `${source.label} Copy`,
-        description: source.description,
-        position: clampGraphPoint({
-          x: Number(source.position?.x ?? 0) + 36,
-          y: Number(source.position?.y ?? 0) + 28
-        }),
-        data: structuredClone(source.data ?? {}),
-        metadata: { ...(source.metadata ?? {}), duplicatedFrom: source.id }
-      },
-      selectAfterCreate: true,
-      origin: "graph-canvas"
-    });
-
-    publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-      level: "info",
-      message: `Duplicated node ${source.label}`
-    });
-  }
-
-  #screenToWorld(clientX, clientY) {
-    return screenToWorld(this.#workspaceEl, this.#viewport, clientX, clientY);
-  }
-
-  #syncInteractionMode() {
-    if (!this.#workspaceEl) return;
-    this.#workspaceEl.dataset.tool = this.#activeTool;
-  }
-
-  #applyViewportTransform() {
-    applyViewportTransform(this.#sceneEl, this.#workspaceEl, this.#viewport);
-  }
-
-  #renderGraph() {
-    const document = graphStore.getDocument();
-    const nodes = document?.nodes ?? [];
-    const edges = document?.edges ?? [];
-
-    renderNodes(
-      this.#nodeLayerEl,
-      nodes,
-      (event, node) => this.#onNodePointerDown(event, node),
-      (event, node) => this.#onConnectHandlePointerDown(event, node)
-    );
-    renderEdges(this.#edgeLayerEl, nodes, edges, this.#selectedEdgeId);
-    this.#edgeDraftEl = this.#edgeLayerEl.querySelector('[data-role="edge-draft"]');
-    this.#bindEdgePointerEvents();
-    this.#renderConnectDraft();
-    this.#highlightSelection();
-    this.#applyViewportTransform();
-  }
-
-  #highlightSelection() {
-    highlightSelection(
-      this.#nodeLayerEl,
-      this.#selectedNodeIds,
-      this.#connectState.sourceNodeId,
-      this.#connectDragState?.hoveredNodeId ?? null
-    );
-  }
+		this.#containerEl = this.querySelector('[data-role="three-container"]');
+		if (!this.#containerEl) return;
+
+		try {
+			this.#initThree();
+			this.#initPostProcessing();
+			this.#initAtmosphere();
+			this.#initControls();
+			this.#bindEvents();
+			this.#bindSubscriptions();
+			this.#startIntroSwoop();
+			this.#animate();
+		} catch (error) {
+			console.error("WebGL initialization failed:", error);
+			this.#containerEl.innerHTML = `
+        <div class="webgl-error-overlay">
+          Your browser doesn't support WebGL. Try Chrome or Firefox.
+        </div>
+      `;
+		}
+	}
+
+	disconnectedCallback() {
+		this.#dispose.forEach((run) => run());
+		this.#dispose = [];
+		if (this.#animationId) cancelAnimationFrame(this.#animationId);
+		this.#renderer?.dispose();
+		this.#controls?.dispose();
+	}
+
+	/* ── Three.js initialization ── */
+
+	#initThree() {
+		this.#clock = new THREE.Clock();
+
+		// Renderer
+		this.#renderer = new THREE.WebGLRenderer({
+			antialias: true,
+			alpha: false,
+			powerPreference: "high-performance",
+		});
+		this.#renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+		this.#renderer.setClearColor(FOG.COLOR, 1);
+		this.#renderer.toneMapping = THREE.ACESFilmicToneMapping;
+		this.#renderer.toneMappingExposure = 1.2;
+		this.#containerEl.appendChild(this.#renderer.domElement);
+
+		// Scene
+		this.#scene = new THREE.Scene();
+		this.#scene.fog = new THREE.FogExp2(FOG.COLOR, FOG.DENSITY);
+
+		// Camera
+		const aspect =
+			this.#containerEl.clientWidth /
+			Math.max(this.#containerEl.clientHeight, 1);
+		this.#camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 5000);
+		this.#camera.position.set(...CAMERA.INTRO_POSITION);
+		this.#camera.lookAt(...CAMERA.HOME_LOOK_AT);
+
+		// Lights
+		this.#ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
+		this.#scene.add(this.#ambientLight);
+
+		const directional = new THREE.DirectionalLight(0xffffff, 0.4);
+		directional.position.set(50, 100, 100);
+		this.#scene.add(directional);
+
+		const backLight = new THREE.DirectionalLight(0x7b61ff, 0.15);
+		backLight.position.set(-50, -50, -200);
+		this.#scene.add(backLight);
+
+		// Groups
+		this.#nodeGroup = new THREE.Group();
+		this.#edgeGroup = new THREE.Group();
+		this.#atmosphereGroup = new THREE.Group();
+		this.#scene.add(this.#edgeGroup);
+		this.#scene.add(this.#nodeGroup);
+		this.#scene.add(this.#atmosphereGroup);
+
+		this.#handleResize();
+	}
+
+	#initPostProcessing() {
+		const size = new THREE.Vector2(
+			this.#containerEl.clientWidth,
+			Math.max(this.#containerEl.clientHeight, 1),
+		);
+
+		this.#composer = new EffectComposer(this.#renderer);
+		this.#composer.addPass(new RenderPass(this.#scene, this.#camera));
+
+		const bloomPass = new UnrealBloomPass(
+			size,
+			BLOOM.STRENGTH,
+			BLOOM.RADIUS,
+			BLOOM.THRESHOLD,
+		);
+		this.#composer.addPass(bloomPass);
+	}
+
+	#initAtmosphere() {
+		this.#ambientParticles = createAmbientParticles();
+		this.#atmosphereGroup.add(this.#ambientParticles);
+		this.#atmosphereGroup.add(createStarField());
+		this.#atmosphereGroup.add(createNebulaClouds());
+	}
+
+	#initControls() {
+		this.#controls = new OrbitControls(this.#camera, this.#containerEl);
+		this.#controls.target.set(...CAMERA.HOME_LOOK_AT);
+		this.#controls.enableDamping = true;
+		this.#controls.dampingFactor = 0.08;
+		this.#controls.minDistance = 20;
+		this.#controls.maxDistance = 1500;
+		this.#controls.maxPolarAngle = Math.PI * 0.85;
+		this.#controls.enablePan = true;
+		this.#controls.panSpeed = 0.8;
+		this.#controls.rotateSpeed = 0.6;
+
+		// Enable orbit only for pan/orbit tool or right-click
+		this.#syncControlsForTool();
+	}
+
+	/* ── Event binding ── */
+
+	#bindEvents() {
+		const onResize = () => this.#handleResize();
+		window.addEventListener("resize", onResize);
+		this.#dispose.push(() => window.removeEventListener("resize", onResize));
+
+		this.#containerEl.addEventListener("pointerdown", (e) =>
+			this.#onPointerDown(e),
+		);
+		this.#containerEl.addEventListener("pointermove", (e) =>
+			this.#onPointerMove(e),
+		);
+		this.#containerEl.addEventListener("pointerup", (e) =>
+			this.#onPointerUp(e),
+		);
+		this.#containerEl.addEventListener("dblclick", (e) =>
+			this.#onDoubleClick(e),
+		);
+		this.#containerEl.addEventListener("keydown", (e) => this.#onKeyDown(e));
+		this.#containerEl.addEventListener("contextmenu", (e) =>
+			e.preventDefault(),
+		);
+	}
+
+	#bindSubscriptions() {
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_DOCUMENT_LOADED, () => {
+				this.#rebuildScene();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_DOCUMENT_CHANGED, ({ payload }) => {
+				if (payload?.reason === "viewport" || payload?.reason === "selection")
+					return;
+				this.#rebuildScene();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_SELECTION_SET, ({ payload }) => {
+				this.#selectedNodeIds = Array.isArray(payload?.nodeIds)
+					? [...payload.nodeIds]
+					: payload?.nodeId
+						? [payload.nodeId]
+						: [];
+				this.#updateSelectionVisuals();
+				if (this.#selectedNodeIds.length === 1) {
+					this.#focusOnNode(this.#selectedNodeIds[0]);
+				}
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_SELECTION_CLEARED, () => {
+				this.#selectedNodeIds = [];
+				this.#updateSelectionVisuals();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_EDGE_SELECTED, ({ payload }) => {
+				this.#selectedEdgeId = payload?.edgeId ?? null;
+				this.#updateEdgeSelectionVisuals();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_EDGE_SELECTION_CLEARED, () => {
+				this.#selectedEdgeId = null;
+				this.#updateEdgeSelectionVisuals();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.TOOLBAR_TOOL_CHANGED, ({ payload }) => {
+				this.#activeTool = payload?.tool ?? "select";
+				this.#syncControlsForTool();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.CAR_CANVAS_CAMERA_HOME, () => {
+				this.#animateCameraToHome();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.CAR_CANVAS_CAMERA_FOCUS, ({ payload }) => {
+				if (payload?.nodeId) this.#focusOnNode(payload.nodeId);
+			}),
+		);
+	}
+
+	/* ── Resize ── */
+
+	#handleResize() {
+		if (!this.#containerEl || !this.#renderer || !this.#camera) return;
+
+		const width = this.#containerEl.clientWidth;
+		const height = Math.max(this.#containerEl.clientHeight, 1);
+
+		this.#camera.aspect = width / height;
+		this.#camera.updateProjectionMatrix();
+		this.#renderer.setSize(width, height);
+		this.#composer?.setSize(width, height);
+	}
+
+	/* ── Scene rebuild ── */
+
+	#rebuildScene() {
+		// Clear existing nodes and edges
+		this.#nodeGroup.clear();
+		this.#edgeGroup.clear();
+		this.#nodeMeshMap.clear();
+		this.#edgeLineMap.clear();
+		this.#selectionRing = null;
+
+		const doc = graphStore.getDocument();
+		if (!doc) return;
+
+		const nodes = doc.nodes ?? [];
+		const edges = doc.edges ?? [];
+
+		// Create node meshes
+		for (const node of nodes) {
+			const mesh = createNodeMesh(node);
+			this.#nodeGroup.add(mesh);
+			this.#nodeMeshMap.set(node.id, mesh);
+		}
+
+		// Update cluster shells to enclose members
+		for (const node of nodes) {
+			if (node.type === "cluster") {
+				const memberIds = node.data?.member_ids ?? [];
+				const memberPositions = memberIds
+					.map((id) => this.#nodeMeshMap.get(id)?.position)
+					.filter(Boolean);
+				const shell = this.#nodeMeshMap.get(node.id);
+				if (shell && memberPositions.length) {
+					updateClusterShell(shell, memberPositions);
+				}
+			}
+		}
+
+		// Create edge lines
+		for (const edge of edges) {
+			const sourceMesh = this.#nodeMeshMap.get(edge.source);
+			const targetMesh = this.#nodeMeshMap.get(edge.target);
+			if (!sourceMesh || !targetMesh) continue;
+
+			const line = createEdgeLine(
+				edge,
+				sourceMesh.position,
+				targetMesh.position,
+			);
+			this.#edgeGroup.add(line);
+			this.#edgeLineMap.set(edge.id, line);
+		}
+
+		this.#updateSelectionVisuals();
+		this.#updateEdgeSelectionVisuals();
+
+		// Show empty state if no nodes
+		this.#updateCanvasOverlay(nodes.length);
+	}
+
+	/* ── Canvas overlay (empty/loading states) ── */
+
+	#updateCanvasOverlay(nodeCount) {
+		const existing = this.#containerEl.querySelector(".canvas-empty-state");
+		if (existing) existing.remove();
+
+		if (nodeCount === 0) {
+			const overlay = document.createElement("div");
+			overlay.className = "canvas-empty-state";
+			overlay.textContent = "This brain is empty. Add a memory to begin.";
+			this.#containerEl.appendChild(overlay);
+		}
+	}
+
+	/* ── Selection visuals ── */
+
+	#updateSelectionVisuals() {
+		// Remove old selection ring
+		if (this.#selectionRing) {
+			this.#selectionRing.parent?.remove(this.#selectionRing);
+			this.#selectionRing = null;
+		}
+
+		const selectedSet = new Set(this.#selectedNodeIds);
+		const hasSelection = selectedSet.size > 0;
+
+		for (const [nodeId, mesh] of this.#nodeMeshMap) {
+			const node = graphStore.getNode(nodeId);
+			if (!node) continue;
+
+			const isSelected = selectedSet.has(nodeId);
+			updateNodeMesh(mesh, node, {
+				selected: isSelected,
+				relevance: 1.0,
+				dimmed: hasSelection && !isSelected,
+			});
+		}
+
+		// Add selection ring to first selected node
+		if (this.#selectedNodeIds.length > 0) {
+			const primaryMesh = this.#nodeMeshMap.get(this.#selectedNodeIds[0]);
+			if (primaryMesh) {
+				this.#selectionRing = createSelectionRing(primaryMesh);
+				primaryMesh.add(this.#selectionRing);
+			}
+		}
+	}
+
+	#updateEdgeSelectionVisuals() {
+		for (const [edgeId, line] of this.#edgeLineMap) {
+			setEdgeSelected(line, edgeId === this.#selectedEdgeId);
+		}
+	}
+
+	/* ── Camera ── */
+
+	#startIntroSwoop() {
+		this.#introComplete = false;
+		this.#introStartTime = this.#clock.getElapsedTime();
+		this.#camera.position.set(...CAMERA.INTRO_POSITION);
+	}
+
+	#updateIntroSwoop(elapsed) {
+		if (this.#introComplete) return;
+
+		const t = Math.min(
+			(elapsed - this.#introStartTime) / CAMERA.SWOOP_DURATION,
+			1,
+		);
+		if (t >= 1) {
+			this.#introComplete = true;
+			this.#camera.position.set(...CAMERA.HOME_POSITION);
+			this.#controls.target.set(...CAMERA.HOME_LOOK_AT);
+			this.#controls.update();
+			return;
+		}
+
+		// EaseInOutCubic
+		const ease = t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+
+		this.#camera.position.lerpVectors(
+			new THREE.Vector3(...CAMERA.INTRO_POSITION),
+			new THREE.Vector3(...CAMERA.HOME_POSITION),
+			ease,
+		);
+
+		this.#controls.target.lerpVectors(
+			new THREE.Vector3(...CAMERA.HOME_LOOK_AT),
+			new THREE.Vector3(...CAMERA.HOME_LOOK_AT),
+			ease,
+		);
+	}
+
+	#focusOnNode(nodeId) {
+		const mesh = this.#nodeMeshMap.get(nodeId);
+		if (!mesh) return;
+
+		this.#focusTarget = mesh.position.clone();
+		this.#focusProgress = 0;
+	}
+
+	#updateCameraFocus(delta) {
+		if (!this.#focusTarget || this.#focusProgress >= 1) return;
+
+		this.#focusProgress = Math.min(
+			this.#focusProgress + delta / CAMERA.FOCUS_DURATION,
+			1,
+		);
+
+		// EaseInOutCubic
+		const t = this.#focusProgress;
+		const ease = t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+
+		this.#controls.target.lerp(this.#focusTarget, ease);
+
+		if (this.#focusProgress >= 1) {
+			this.#focusTarget = null;
+		}
+	}
+
+	#animateCameraToHome() {
+		this.#focusTarget = new THREE.Vector3(...CAMERA.HOME_LOOK_AT);
+		this.#focusProgress = 0;
+	}
+
+	/* ── Pointer events ── */
+
+	#updateMouse(event) {
+		const rect = this.#containerEl.getBoundingClientRect();
+		this.#mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+		this.#mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+	}
+
+	#raycastNodes() {
+		this.#raycaster.setFromCamera(this.#mouse, this.#camera);
+		const meshes = [];
+		this.#nodeMeshMap.forEach((mesh) => meshes.push(mesh));
+		const intersects = this.#raycaster.intersectObjects(meshes, true);
+		if (intersects.length === 0) return null;
+
+		// Walk up to find userData.nodeId
+		let obj = intersects[0].object;
+		while (obj && !obj.userData?.nodeId) obj = obj.parent;
+		return obj?.userData?.nodeId ?? null;
+	}
+
+	#onPointerDown(event) {
+		if (event.button !== 0) return;
+		this.#containerEl.focus();
+		this.#updateMouse(event);
+
+		const nodeId = this.#raycastNodes();
+
+		if (nodeId) {
+			event.stopPropagation();
+
+			if (this.#activeTool === "select" || this.#activeTool === "pan") {
+				publish(EVENTS.GRAPH_NODE_SELECT_REQUESTED, {
+					nodeId,
+					additive: event.shiftKey,
+					toggle: event.shiftKey,
+					origin: "graph-canvas",
+				});
+			}
+			return;
+		}
+
+		// Click on empty space clears selection
+		if (this.#activeTool === "select" && !event.shiftKey) {
+			publish(EVENTS.GRAPH_SELECTION_CLEAR_REQUESTED, {
+				origin: "graph-canvas",
+			});
+		}
+	}
+
+	#onPointerMove(event) {
+		this.#updateMouse(event);
+
+		// Hover detection with 300ms delay
+		const nodeId = this.#raycastNodes();
+		if (nodeId !== this.#hoveredNodeId) {
+			if (this.#hoverTimeout) clearTimeout(this.#hoverTimeout);
+			this.#hoveredNodeId = nodeId;
+
+			if (nodeId) {
+				this.#hoverTimeout = setTimeout(() => {
+					publish(EVENTS.CAR_CANVAS_NODE_HOVERED, {
+						nodeId,
+						origin: "graph-canvas",
+					});
+				}, 300);
+			} else {
+				publish(EVENTS.CAR_CANVAS_NODE_UNHOVERED, { origin: "graph-canvas" });
+			}
+		}
+	}
+
+	#onPointerUp(_event) {
+		// OrbitControls handles pointer up
+	}
+
+	#onDoubleClick(event) {
+		this.#updateMouse(event);
+		const nodeId = this.#raycastNodes();
+		if (nodeId) {
+			publish(EVENTS.GRAPH_NODE_SELECT_REQUESTED, {
+				nodeId,
+				origin: "graph-canvas",
+			});
+			publish(EVENTS.CAR_CANVAS_CAMERA_FOCUS, {
+				nodeId,
+				origin: "graph-canvas",
+			});
+		} else {
+			// Double-click empty = home
+			this.#animateCameraToHome();
+		}
+	}
+
+	#onKeyDown(event) {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			if (this.#activeTool !== "select") {
+				uiStore.setTool("select");
+			} else {
+				publish(EVENTS.GRAPH_SELECTION_CLEAR_REQUESTED, {
+					origin: "graph-canvas",
+				});
+			}
+			return;
+		}
+
+		if (event.key === "h" || event.key === "H") {
+			this.#animateCameraToHome();
+			return;
+		}
+
+		const isUndo =
+			(event.ctrlKey || event.metaKey) &&
+			!event.shiftKey &&
+			event.key.toLowerCase() === "z";
+		const isRedo =
+			(event.ctrlKey || event.metaKey) &&
+			((event.shiftKey && event.key.toLowerCase() === "z") ||
+				event.key.toLowerCase() === "y");
+
+		if (isUndo) {
+			event.preventDefault();
+			if (graphStore.canUndo()) {
+				publish(EVENTS.GRAPH_DOCUMENT_UNDO_REQUESTED, {
+					origin: "graph-canvas",
+				});
+			}
+			return;
+		}
+
+		if (isRedo) {
+			event.preventDefault();
+			if (graphStore.canRedo()) {
+				publish(EVENTS.GRAPH_DOCUMENT_REDO_REQUESTED, {
+					origin: "graph-canvas",
+				});
+			}
+			return;
+		}
+
+		if (
+			(event.key === "Delete" || event.key === "Backspace") &&
+			this.#selectedNodeIds.length
+		) {
+			event.preventDefault();
+			publish(EVENTS.GRAPH_NODE_DELETE_REQUESTED, {
+				nodeIds: [...this.#selectedNodeIds],
+				origin: "graph-canvas",
+			});
+			return;
+		}
+
+		// Tool shortcuts
+		const toolShortcuts = {
+			v: "select",
+			h: "pan",
+			c: "create:chunk",
+			l: "connect",
+			q: "create:question",
+			t: "create:trigger",
+		};
+		const tool = toolShortcuts[event.key.toLowerCase()];
+		if (tool && !event.ctrlKey && !event.metaKey) {
+			uiStore.setTool(tool);
+		}
+	}
+
+	/* ── Controls sync ── */
+
+	#syncControlsForTool() {
+		if (!this.#controls) return;
+		const orbiting = this.#activeTool === "pan";
+		this.#controls.enableRotate = orbiting;
+		this.#controls.enablePan = orbiting;
+		// Zoom always enabled via scroll
+		this.#controls.enableZoom = true;
+		this.#containerEl?.classList.toggle("is-orbiting", orbiting);
+	}
+
+	/* ── Animation loop ── */
+
+	#animate() {
+		this.#animationId = requestAnimationFrame(() => this.#animate());
+
+		const delta = this.#clock.getDelta();
+		const elapsed = this.#clock.getElapsedTime();
+
+		// Intro swoop
+		if (!this.#introComplete) {
+			this.#updateIntroSwoop(elapsed);
+		}
+
+		// Camera focus lerp
+		this.#updateCameraFocus(delta);
+
+		// Controls update (damping)
+		this.#controls?.update();
+
+		// Ambient breathing
+		updateAmbientBreathing(this.#ambientLight, elapsed);
+
+		// Animate ambient particles
+		animateAmbientParticles(this.#ambientParticles, delta);
+
+		// Rotate T3/pattern nodes
+		this.#nodeGroup?.children.forEach((mesh) => {
+			if (mesh.userData?.shouldRotate) {
+				mesh.rotation.y += delta * 0.3;
+				mesh.rotation.x += delta * 0.1;
+			}
+		});
+
+		// Contradiction pulse
+		this.#edgeLineMap.forEach((line) => {
+			updateContradictionPulse(line, elapsed);
+		});
+
+		// Render
+		if (this.#composer) {
+			this.#composer.render();
+		} else {
+			this.#renderer?.render(this.#scene, this.#camera);
+		}
+	}
 }
 
 customElements.define("graph-canvas", GraphCanvas);
diff --git a/js/components/graph-canvas/canvas-renderer.js b/js/components/graph-canvas/canvas-renderer.js
index 8e538a7..9638127 100644
--- a/js/components/graph-canvas/canvas-renderer.js
+++ b/js/components/graph-canvas/canvas-renderer.js
@@ -1,54 +1,7 @@
-import { renderEdgesSvg } from "./canvas-edges.js";
+/* ── Legacy canvas-renderer stub ── */
+/* All rendering is now handled by Three.js in graph-canvas.js */
+/* These exports are kept for API compatibility but are no-ops */
 
-const nodeTagByType = {
-  note: "note-node",
-  agent: "agent-node",
-  data: "data-node",
-  transformer: "transformer-node",
-  view: "view-node",
-  action: "action-node"
-};
-
-export const renderNodes = (nodeLayerEl, nodes, onNodePointerDown, onConnectHandlePointerDown) => {
-  if (!nodeLayerEl) return;
-
-  nodeLayerEl.innerHTML = "";
-
-  for (const node of nodes) {
-    const tag = nodeTagByType[node.type] ?? "note-node";
-    const nodeEl = document.createElement(tag);
-    nodeEl.classList.add("mg-node-instance");
-    nodeEl.dataset.nodeId = node.id;
-    nodeEl.dataset.nodeType = node.type;
-    nodeEl.style.left = `${node.position?.x ?? 0}px`;
-    nodeEl.style.top = `${node.position?.y ?? 0}px`;
-    nodeEl.node = node;
-    nodeEl.addEventListener("pointerdown", (event) => onNodePointerDown(event, node));
-    nodeEl
-      .querySelector('[data-action="connect-handle"]')
-      ?.addEventListener("pointerdown", (event) => onConnectHandlePointerDown(event, node));
-    nodeLayerEl.append(nodeEl);
-  }
-};
-
-export const renderEdges = (edgeLayerEl, nodes, edges, selectedEdgeId = null) => {
-  renderEdgesSvg(edgeLayerEl, nodes, edges, selectedEdgeId);
-};
-
-export const highlightSelection = (
-  nodeLayerEl,
-  selectedNodeIds = [],
-  connectSourceNodeId = null,
-  connectTargetNodeId = null
-) => {
-  if (!nodeLayerEl) return;
-
-  const selectedSet = new Set(selectedNodeIds);
-
-  nodeLayerEl.querySelectorAll("[data-node-id]").forEach((nodeEl) => {
-    const isSelected = selectedSet.has(nodeEl.dataset.nodeId);
-    nodeEl.classList.toggle("is-selected", isSelected);
-    nodeEl.classList.toggle("is-connect-source", nodeEl.dataset.nodeId === connectSourceNodeId);
-    nodeEl.classList.toggle("is-connect-target", nodeEl.dataset.nodeId === connectTargetNodeId);
-  });
-};
+export const renderNodes = () => {};
+export const renderEdges = () => {};
+export const highlightSelection = () => {};
diff --git a/js/components/graph-canvas/canvas-selection.js b/js/components/graph-canvas/canvas-selection.js
index 4b6fc8f..b9f77a1 100644
--- a/js/components/graph-canvas/canvas-selection.js
+++ b/js/components/graph-canvas/canvas-selection.js
@@ -1,27 +1,13 @@
-export const normalizeScreenRect = (startX, startY, endX, endY) => {
-  const left = Math.min(startX, endX);
-  const top = Math.min(startY, endY);
-  const width = Math.abs(endX - startX);
-  const height = Math.abs(endY - startY);
+/* ── Legacy canvas-selection stub ── */
+/* Selection is now handled by Three.js raycasting in graph-canvas.js */
 
-  return {
-    left,
-    top,
-    width,
-    height,
-    right: left + width,
-    bottom: top + height
-  };
-};
+export const normalizeScreenRect = (startX, startY, endX, endY) => ({
+	left: Math.min(startX, endX),
+	top: Math.min(startY, endY),
+	width: Math.abs(endX - startX),
+	height: Math.abs(endY - startY),
+	right: Math.max(startX, endX),
+	bottom: Math.max(startY, endY),
+});
 
-export const findNodeIdsInWorldRect = (nodes = [], worldRect) => {
-  if (!worldRect) return [];
-
-  return nodes
-    .filter((node) => {
-      const x = Number(node.position?.x ?? 0);
-      const y = Number(node.position?.y ?? 0);
-      return x >= worldRect.left && x <= worldRect.right && y >= worldRect.top && y <= worldRect.bottom;
-    })
-    .map((node) => node.id);
-};
+export const findNodeIdsInWorldRect = () => [];
diff --git a/js/components/graph-canvas/canvas-viewport.js b/js/components/graph-canvas/canvas-viewport.js
index d02cbfd..21fd5b5 100644
--- a/js/components/graph-canvas/canvas-viewport.js
+++ b/js/components/graph-canvas/canvas-viewport.js
@@ -1,35 +1,7 @@
-import { GRAPH_LIMITS, clampZoom } from "../../core/constants.js";
+/* ── Legacy canvas-viewport stub ── */
+/* All viewport handling is now managed by Three.js OrbitControls */
+/* These exports are kept for API compatibility but are no-ops */
 
-export const applyViewportTransform = (sceneEl, workspaceEl, viewport) => {
-  if (!sceneEl || !workspaceEl) return;
-
-  sceneEl.style.transform = `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`;
-  const backgroundGrid = GRAPH_LIMITS.gridSize * viewport.zoom;
-  workspaceEl.style.backgroundSize = `${backgroundGrid}px ${backgroundGrid}px`;
-  workspaceEl.style.backgroundPosition = `${viewport.x}px ${viewport.y}px`;
-};
-
-export const screenToWorld = (workspaceEl, viewport, clientX, clientY) => {
-  const rect = workspaceEl.getBoundingClientRect();
-  return {
-    x: (clientX - rect.left - viewport.x) / viewport.zoom,
-    y: (clientY - rect.top - viewport.y) / viewport.zoom
-  };
-};
-
-export const zoomAtClientPoint = (workspaceEl, viewport, clientX, clientY, direction) => {
-  const zoomFactor = direction > 0 ? GRAPH_LIMITS.zoomInFactor : GRAPH_LIMITS.zoomOutFactor;
-  const nextZoom = clampZoom(viewport.zoom * zoomFactor);
-  if (nextZoom === viewport.zoom) {
-    return viewport;
-  }
-
-  const rect = workspaceEl.getBoundingClientRect();
-  const worldPointBeforeZoom = screenToWorld(workspaceEl, viewport, clientX, clientY);
-
-  return {
-    x: clientX - rect.left - worldPointBeforeZoom.x * nextZoom,
-    y: clientY - rect.top - worldPointBeforeZoom.y * nextZoom,
-    zoom: nextZoom
-  };
-};
+export const applyViewportTransform = () => {};
+export const screenToWorld = (_el, _vp, x, y) => ({ x, y });
+export const zoomAtClientPoint = (_el, viewport) => viewport;
diff --git a/js/components/graph-canvas/three-atmosphere.js b/js/components/graph-canvas/three-atmosphere.js
new file mode 100644
index 0000000..9febbea
--- /dev/null
+++ b/js/components/graph-canvas/three-atmosphere.js
@@ -0,0 +1,164 @@
+import * as THREE from "three";
+import { ATMOSPHERE, DEPTH_PLANES } from "../../core/constants.js";
+
+/* ── Ambient particle field: ~200 tiny drifting points ── */
+
+export const createAmbientParticles = () => {
+	const count = ATMOSPHERE.AMBIENT_PARTICLES;
+	const positions = new Float32Array(count * 3);
+	const velocities = new Float32Array(count * 3);
+	const sizes = new Float32Array(count);
+
+	for (let i = 0; i < count; i++) {
+		positions[i * 3] = (Math.random() - 0.5) * 600;
+		positions[i * 3 + 1] = (Math.random() - 0.5) * 400;
+		positions[i * 3 + 2] = -200 + Math.random() * -800;
+
+		velocities[i * 3] = (Math.random() - 0.5) * 0.02;
+		velocities[i * 3 + 1] = (Math.random() - 0.5) * 0.015;
+		velocities[i * 3 + 2] = (Math.random() - 0.5) * 0.01;
+
+		sizes[i] = 0.3 + Math.random() * 0.5;
+	}
+
+	const geometry = new THREE.BufferGeometry();
+	geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+	geometry.setAttribute("size", new THREE.BufferAttribute(sizes, 1));
+
+	const material = new THREE.PointsMaterial({
+		color: 0xffffff,
+		size: 0.5,
+		transparent: true,
+		opacity: 0.1,
+		sizeAttenuation: true,
+		blending: THREE.AdditiveBlending,
+		depthWrite: false,
+	});
+
+	const points = new THREE.Points(geometry, material);
+	points.userData = { velocities, isAmbientParticles: true };
+	points.renderOrder = -10;
+	return points;
+};
+
+/* ── Animate ambient particles ── */
+
+export const animateAmbientParticles = (particles, delta) => {
+	if (!particles?.geometry?.attributes?.position) return;
+
+	const positions = particles.geometry.attributes.position;
+	const velocities = particles.userData.velocities;
+	const count = positions.count;
+
+	for (let i = 0; i < count; i++) {
+		let x = positions.getX(i) + velocities[i * 3] * delta * 60;
+		let y = positions.getY(i) + velocities[i * 3 + 1] * delta * 60;
+		let z = positions.getZ(i) + velocities[i * 3 + 2] * delta * 60;
+
+		// Wrap around bounds
+		if (x > 300) x = -300;
+		if (x < -300) x = 300;
+		if (y > 200) y = -200;
+		if (y < -200) y = 200;
+		if (z > 0) z = -1000;
+		if (z < -1000) z = 0;
+
+		positions.setXYZ(i, x, y, z);
+	}
+
+	positions.needsUpdate = true;
+};
+
+/* ── Star field: ~500 static points at far background ── */
+
+export const createStarField = () => {
+	const count = ATMOSPHERE.STAR_POINTS;
+	const positions = new Float32Array(count * 3);
+	const opacities = new Float32Array(count);
+
+	for (let i = 0; i < count; i++) {
+		positions[i * 3] = (Math.random() - 0.5) * 2000;
+		positions[i * 3 + 1] = (Math.random() - 0.5) * 1500;
+		positions[i * 3 + 2] =
+			DEPTH_PLANES.STARS_NEAR +
+			Math.random() * (DEPTH_PLANES.STARS_FAR - DEPTH_PLANES.STARS_NEAR);
+
+		opacities[i] = 0.1 + Math.random() * 0.3;
+	}
+
+	const geometry = new THREE.BufferGeometry();
+	geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+
+	const material = new THREE.PointsMaterial({
+		color: 0xffffff,
+		size: 0.3,
+		transparent: true,
+		opacity: 0.25,
+		sizeAttenuation: true,
+		depthWrite: false,
+	});
+
+	const points = new THREE.Points(geometry, material);
+	points.renderOrder = -20;
+	return points;
+};
+
+/* ── Nebula gradient sprites behind clusters ── */
+
+export const createNebulaClouds = () => {
+	const group = new THREE.Group();
+	const colors = [0x00f5ff, 0x7b61ff, 0xff2d78, 0x00f5ff];
+	const nebulaCount = ATMOSPHERE.NEBULA_COUNT;
+
+	for (let i = 0; i < nebulaCount; i++) {
+		const canvas = document.createElement("canvas");
+		canvas.width = 256;
+		canvas.height = 256;
+		const ctx = canvas.getContext("2d");
+
+		const gradient = ctx.createRadialGradient(128, 128, 0, 128, 128, 128);
+		const hex = colors[i % colors.length];
+		const r = (hex >> 16) & 0xff;
+		const g = (hex >> 8) & 0xff;
+		const b = hex & 0xff;
+		gradient.addColorStop(0, `rgba(${r},${g},${b},0.06)`);
+		gradient.addColorStop(0.5, `rgba(${r},${g},${b},0.02)`);
+		gradient.addColorStop(1, `rgba(${r},${g},${b},0)`);
+		ctx.fillStyle = gradient;
+		ctx.fillRect(0, 0, 256, 256);
+
+		const texture = new THREE.CanvasTexture(canvas);
+		const material = new THREE.SpriteMaterial({
+			map: texture,
+			transparent: true,
+			opacity: 0.5,
+			blending: THREE.AdditiveBlending,
+			depthWrite: false,
+		});
+
+		const sprite = new THREE.Sprite(material);
+		sprite.scale.set(200, 200, 1);
+		sprite.position.set(
+			(Math.random() - 0.5) * 400,
+			(Math.random() - 0.5) * 200,
+			DEPTH_PLANES.NEBULA_NEAR +
+				Math.random() * (DEPTH_PLANES.NEBULA_FAR - DEPTH_PLANES.NEBULA_NEAR),
+		);
+
+		group.add(sprite);
+	}
+
+	group.renderOrder = -15;
+	return group;
+};
+
+/* ── Ambient light breathing (sine wave) ── */
+
+export const updateAmbientBreathing = (ambientLight, elapsedTime) => {
+	if (!ambientLight) return;
+	const base = 0.3;
+	const amplitude = ATMOSPHERE.BREATHING_AMPLITUDE;
+	const period = ATMOSPHERE.BREATHING_PERIOD;
+	ambientLight.intensity =
+		base + amplitude * Math.sin((elapsedTime * 2 * Math.PI) / period);
+};
diff --git a/js/components/graph-canvas/three-edges.js b/js/components/graph-canvas/three-edges.js
new file mode 100644
index 0000000..daedc8b
--- /dev/null
+++ b/js/components/graph-canvas/three-edges.js
@@ -0,0 +1,170 @@
+import * as THREE from "three";
+import { DATA_COLORS } from "../../core/constants.js";
+
+/* ── Edge color by type ── */
+
+const EDGE_COLOR_MAP = {
+	linked_to: 0x00f5ff,
+	amends: 0x7b61ff,
+	contradicts: 0xff3333,
+	promotes_to: 0x7b61ff,
+	answers: 0xffd93d,
+	decomposes_to: 0xffd93d,
+	clusters_with: 0xffffff,
+	preceded_by: 0x484f58,
+	triggers: 0xff9f1c,
+};
+
+const getEdgeColor = (edgeType) => EDGE_COLOR_MAP[edgeType] ?? 0x484f58;
+
+/* ── Create a line for an edge ── */
+
+export const createEdgeLine = (edge, sourcePos, targetPos) => {
+	const color = getEdgeColor(edge.type);
+
+	const points = [sourcePos.clone(), targetPos.clone()];
+	const geometry = new THREE.BufferGeometry().setFromPoints(points);
+
+	const isDashed = edge.type === "amends" || edge.type === "contradicts";
+
+	let material;
+	if (isDashed) {
+		material = new THREE.LineDashedMaterial({
+			color,
+			transparent: true,
+			opacity: edge.type === "contradicts" ? 0.7 : 0.5,
+			dashSize: 1.5,
+			gapSize: 1.0,
+			linewidth: 1,
+		});
+	} else {
+		material = new THREE.LineBasicMaterial({
+			color,
+			transparent: true,
+			opacity: edge.type === "preceded_by" ? 0.2 : 0.4,
+			linewidth: 1,
+		});
+	}
+
+	const line = new THREE.Line(geometry, material);
+	if (isDashed) line.computeLineDistances();
+
+	line.userData = {
+		edgeId: edge.id,
+		edgeType: edge.type,
+		sourceId: edge.source,
+		targetId: edge.target,
+	};
+
+	// Ensure edges render behind nodes
+	line.renderOrder = -1;
+
+	return line;
+};
+
+/* ── Update edge line positions ── */
+
+export const updateEdgeLine = (line, sourcePos, targetPos) => {
+	const positions = line.geometry.attributes.position;
+	if (!positions) return;
+
+	positions.setXYZ(0, sourcePos.x, sourcePos.y, sourcePos.z);
+	positions.setXYZ(1, targetPos.x, targetPos.y, targetPos.z);
+	positions.needsUpdate = true;
+
+	if (line.isLine && line.material.isLineDashedMaterial) {
+		line.computeLineDistances();
+	}
+};
+
+/* ── Create particle trail along edge (for active retrieval) ── */
+
+export const createEdgeParticles = (
+	sourcePos,
+	targetPos,
+	color = DATA_COLORS.RETRIEVAL,
+) => {
+	const count = 12;
+	const positions = new Float32Array(count * 3);
+	const sizes = new Float32Array(count);
+
+	for (let i = 0; i < count; i++) {
+		const t = i / count;
+		positions[i * 3] = THREE.MathUtils.lerp(sourcePos.x, targetPos.x, t);
+		positions[i * 3 + 1] = THREE.MathUtils.lerp(sourcePos.y, targetPos.y, t);
+		positions[i * 3 + 2] = THREE.MathUtils.lerp(sourcePos.z, targetPos.z, t);
+		sizes[i] = 0.3 + Math.random() * 0.3;
+	}
+
+	const geometry = new THREE.BufferGeometry();
+	geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+	geometry.setAttribute("size", new THREE.BufferAttribute(sizes, 1));
+
+	const material = new THREE.PointsMaterial({
+		color,
+		size: 0.5,
+		transparent: true,
+		opacity: 0.8,
+		sizeAttenuation: true,
+		blending: THREE.AdditiveBlending,
+		depthWrite: false,
+	});
+
+	const points = new THREE.Points(geometry, material);
+	points.userData = { isRetrievalParticle: true, progress: 0 };
+	return points;
+};
+
+/* ── Animate particles flowing along edge ── */
+
+export const animateEdgeParticles = (
+	particles,
+	sourcePos,
+	targetPos,
+	delta,
+) => {
+	if (!particles?.userData) return;
+
+	particles.userData.progress = (particles.userData.progress + delta * 0.8) % 1;
+	const positions = particles.geometry.attributes.position;
+	if (!positions) return;
+
+	const count = positions.count;
+	const baseProgress = particles.userData.progress;
+
+	for (let i = 0; i < count; i++) {
+		const t = (baseProgress + i / count) % 1;
+		positions.setXYZ(
+			i,
+			THREE.MathUtils.lerp(sourcePos.x, targetPos.x, t),
+			THREE.MathUtils.lerp(sourcePos.y, targetPos.y, t),
+			THREE.MathUtils.lerp(sourcePos.z, targetPos.z, t),
+		);
+	}
+
+	positions.needsUpdate = true;
+};
+
+/* ── Contradiction pulse effect ── */
+
+export const updateContradictionPulse = (line, time) => {
+	if (!line?.material || line.userData?.edgeType !== "contradicts") return;
+	// Oscillate opacity 0.3-0.8 at 1.5s period
+	line.material.opacity =
+		0.3 + 0.5 * (0.5 + 0.5 * Math.sin(time * ((2 * Math.PI) / 1.5)));
+};
+
+/* ── Highlight edge on selection ── */
+
+export const setEdgeSelected = (line, selected) => {
+	if (!line?.material) return;
+	if (selected) {
+		line.material.opacity = 1.0;
+		if (line.material.color) line.material.color.setHex(0xffffff);
+	} else {
+		const color = getEdgeColor(line.userData?.edgeType);
+		line.material.opacity =
+			line.userData?.edgeType === "preceded_by" ? 0.2 : 0.4;
+		if (line.material.color) line.material.color.setHex(color);
+	}
+};
diff --git a/js/components/graph-canvas/three-nodes.js b/js/components/graph-canvas/three-nodes.js
new file mode 100644
index 0000000..92b601f
--- /dev/null
+++ b/js/components/graph-canvas/three-nodes.js
@@ -0,0 +1,272 @@
+import * as THREE from "three";
+import {
+	DATA_COLORS,
+	DEPTH_PLANES,
+	NODE_GEOMETRY,
+	TIER_COLORS,
+} from "../../core/constants.js";
+
+/* ── 3D node geometries per type ── */
+
+const geometryCache = {};
+
+const getGeometry = (type, tier) => {
+	const key = type === "chunk" ? `chunk_t${tier}` : type;
+	if (geometryCache[key]) return geometryCache[key];
+
+	let geometry;
+	switch (key) {
+		case "chunk_t1":
+			geometry = new THREE.SphereGeometry(
+				NODE_GEOMETRY.CHUNK_T1.radius,
+				NODE_GEOMETRY.CHUNK_T1.segments,
+				NODE_GEOMETRY.CHUNK_T1.segments,
+			);
+			break;
+		case "chunk_t2":
+			geometry = new THREE.IcosahedronGeometry(
+				NODE_GEOMETRY.CHUNK_T2.radius,
+				NODE_GEOMETRY.CHUNK_T2.detail,
+			);
+			break;
+		case "chunk_t3":
+			geometry = new THREE.OctahedronGeometry(NODE_GEOMETRY.CHUNK_T3.radius);
+			break;
+		case "question":
+			geometry = new THREE.TetrahedronGeometry(NODE_GEOMETRY.QUESTION.radius);
+			break;
+		case "trigger": {
+			const r = NODE_GEOMETRY.TRIGGER.radius;
+			const top = new THREE.ConeGeometry(r, r * 1.2, 4);
+			top.translate(0, r * 0.6, 0);
+			const bottom = new THREE.ConeGeometry(r, r * 1.2, 4);
+			bottom.rotateX(Math.PI);
+			bottom.translate(0, -r * 0.6, 0);
+			geometry = new THREE.BufferGeometry();
+			geometry.copy(mergeBufferGeometries([top, bottom]));
+			break;
+		}
+		case "pattern":
+			geometry = new THREE.OctahedronGeometry(NODE_GEOMETRY.CHUNK_T3.radius);
+			break;
+		default:
+			geometry = new THREE.SphereGeometry(1, 16, 16);
+	}
+
+	geometryCache[key] = geometry;
+	return geometry;
+};
+
+function mergeBufferGeometries(geometries) {
+	const merged = new THREE.BufferGeometry();
+	const positions = [];
+	const normals = [];
+	let indexOffset = 0;
+	const indices = [];
+
+	for (const geom of geometries) {
+		const pos = geom.getAttribute("position");
+		const norm = geom.getAttribute("normal");
+		const idx = geom.getIndex();
+
+		for (let i = 0; i < pos.count; i++) {
+			positions.push(pos.getX(i), pos.getY(i), pos.getZ(i));
+			if (norm) normals.push(norm.getX(i), norm.getY(i), norm.getZ(i));
+		}
+
+		if (idx) {
+			for (let i = 0; i < idx.count; i++) {
+				indices.push(idx.array[i] + indexOffset);
+			}
+		}
+
+		indexOffset += pos.count;
+	}
+
+	merged.setAttribute(
+		"position",
+		new THREE.Float32BufferAttribute(positions, 3),
+	);
+	if (normals.length)
+		merged.setAttribute("normal", new THREE.Float32BufferAttribute(normals, 3));
+	if (indices.length) merged.setIndex(indices);
+	merged.computeVertexNormals();
+	return merged;
+}
+
+/* ── Color for node ── */
+
+export const getNodeColor = (node) => {
+	if (node.type === "chunk")
+		return TIER_COLORS[node.data?.tier ?? 1] ?? TIER_COLORS[1];
+	if (node.type === "question") return DATA_COLORS.QUESTION;
+	if (node.type === "trigger") return DATA_COLORS.TRIGGER;
+	if (node.type === "pattern") return DATA_COLORS.T3;
+	if (node.type === "cluster") return DATA_COLORS.CLUSTER;
+	return TIER_COLORS[1];
+};
+
+/* ── Scale factor for node ── */
+
+const getNodeScale = (node) => {
+	if (node.type === "chunk") {
+		const accessCount = node.data?.access_count ?? 1;
+		const tierMultiplier =
+			node.data?.tier === 3 ? 2.0 : node.data?.tier === 2 ? 1.5 : 1.0;
+		return tierMultiplier * (1 + Math.log2(Math.max(1, accessCount)) * 0.15);
+	}
+	if (node.type === "question") {
+		const level = node.data?.level ?? 1;
+		return 0.6 + level * 0.12;
+	}
+	if (node.type === "trigger") return 0.8;
+	if (node.type === "pattern") return 2.0;
+	return 1.0;
+};
+
+/* ── Default Z for node type/tier ── */
+
+export const getDefaultZ = (node) => {
+	if (node.type === "chunk") {
+		const tier = node.data?.tier ?? 1;
+		if (tier === 1) return DEPTH_PLANES.MID;
+		if (tier === 2) return DEPTH_PLANES.BACK;
+		return DEPTH_PLANES.DEEP;
+	}
+	if (node.type === "question") return DEPTH_PLANES.QUESTIONS;
+	if (node.type === "pattern") return DEPTH_PLANES.DEEP;
+	if (node.type === "trigger") return DEPTH_PLANES.MID;
+	if (node.type === "cluster") return DEPTH_PLANES.BACK;
+	return DEPTH_PLANES.MID;
+};
+
+/* ── Create a 3D mesh for a node ── */
+
+export const createNodeMesh = (node) => {
+	if (node.type === "cluster") {
+		return createClusterShell(node);
+	}
+
+	const color = getNodeColor(node);
+	const tier = node.data?.tier ?? 1;
+	const geometry = getGeometry(node.type, tier);
+	const scale = getNodeScale(node);
+
+	const material = new THREE.MeshStandardMaterial({
+		color,
+		emissive: color,
+		emissiveIntensity: 0.6,
+		roughness: 0.3,
+		metalness: 0.1,
+		transparent: true,
+		opacity: 0.9,
+	});
+
+	const mesh = new THREE.Mesh(geometry, material);
+	mesh.scale.setScalar(scale);
+
+	const z = node.position?.z !== 0 ? node.position.z : getDefaultZ(node);
+	mesh.position.set(node.position?.x ?? 0, node.position?.y ?? 0, z);
+
+	mesh.userData = { nodeId: node.id, nodeType: node.type, tier };
+
+	return mesh;
+};
+
+/* ── Cluster shell ── */
+
+const createClusterShell = (node) => {
+	const radius = 10;
+	const geometry = new THREE.SphereGeometry(radius, 24, 24);
+	const material = new THREE.MeshBasicMaterial({
+		color: 0xffffff,
+		transparent: true,
+		opacity: 0.08,
+		side: THREE.BackSide,
+		depthWrite: false,
+	});
+
+	const shell = new THREE.Mesh(geometry, material);
+	const z = node.position?.z !== 0 ? node.position.z : DEPTH_PLANES.BACK;
+	shell.position.set(node.position?.x ?? 0, node.position?.y ?? 0, z);
+	shell.userData = { nodeId: node.id, nodeType: "cluster" };
+
+	// Wireframe overlay
+	const wireMaterial = new THREE.MeshBasicMaterial({
+		color: 0xffffff,
+		transparent: true,
+		opacity: 0.03,
+		wireframe: true,
+	});
+	const wireframe = new THREE.Mesh(geometry.clone(), wireMaterial);
+	shell.add(wireframe);
+
+	return shell;
+};
+
+/* ── Selection ring ── */
+
+export const createSelectionRing = (mesh) => {
+	const scale = mesh.scale.x;
+	const geometry = new THREE.TorusGeometry(scale * 1.4, 0.08, 8, 32);
+	const material = new THREE.MeshBasicMaterial({
+		color: 0xffffff,
+		transparent: true,
+		opacity: 0.8,
+	});
+	const ring = new THREE.Mesh(geometry, material);
+	ring.rotation.x = Math.PI / 2;
+	return ring;
+};
+
+/* ── Update mesh for state changes ── */
+
+export const updateNodeMesh = (
+	mesh,
+	node,
+	{ selected = false, relevance = 1.0, dimmed = false },
+) => {
+	if (!mesh || !mesh.material) return;
+
+	const color = getNodeColor(node);
+	const scale = getNodeScale(node);
+	mesh.scale.setScalar(scale);
+
+	if (mesh.material.emissive) {
+		mesh.material.emissive.setHex(color);
+		mesh.material.emissiveIntensity = relevance * (selected ? 2.0 : 1.0);
+		mesh.material.opacity = dimmed ? 0.2 : 0.9;
+	}
+
+	// Slow rotation for T3 schemas and patterns
+	if (
+		node.type === "pattern" ||
+		(node.type === "chunk" && node.data?.tier === 3)
+	) {
+		mesh.userData.shouldRotate = true;
+	}
+};
+
+/* ── Update cluster shell to enclose members ── */
+
+export const updateClusterShell = (shellMesh, memberPositions) => {
+	if (!memberPositions.length) return;
+
+	// Compute center of mass
+	const center = new THREE.Vector3();
+	for (const pos of memberPositions) {
+		center.add(pos);
+	}
+	center.divideScalar(memberPositions.length);
+
+	// Compute radius: max distance + 20% padding
+	let maxDist = 0;
+	for (const pos of memberPositions) {
+		const dist = center.distanceTo(pos);
+		if (dist > maxDist) maxDist = dist;
+	}
+	const radius = (maxDist + 5) * NODE_GEOMETRY.CLUSTER.padding;
+
+	shellMesh.position.copy(center);
+	shellMesh.scale.setScalar(radius / 10); // geometry has base radius 10
+};

From e7b49d2993223420edfb1022771e17afeaad8e68 Mon Sep 17 00:00:00 2001
From: Amit Kolton <amit.ko@thing02.com>
Date: Fri, 3 Apr 2026 15:40:00 +0300
Subject: [PATCH 07/13] feat: CAR UI panels with memory/query inputs and 5-tab
 bottom panel

Rewrite top toolbar with memory input, query input, play/step/reset
controls, and 13-step dot indicator. Rewrite left palette with 6 CAR
tools (select, pan/orbit, add chunk, add link, add question, add
trigger). Rewrite inspector with context-sensitive tabs per node type
(chunk: overview/metadata/retrieval/timeline/scoring; question; cluster;
pattern; trigger). Rewrite bottom panel with 5 CAR tabs (retrieval log,
consolidation, contradictions, questions, metamemory) with badge counts.
---
 js/components/bottom-activity-panel.js | 380 +++++++-----
 js/components/inspector-panel.js       | 828 ++++++++++++++++++-------
 js/components/left-tool-palette.js     | 163 ++---
 js/components/top-toolbar.js           | 579 +++++++++--------
 4 files changed, 1190 insertions(+), 760 deletions(-)

diff --git a/js/components/bottom-activity-panel.js b/js/components/bottom-activity-panel.js
index 11a3199..ba9e871 100644
--- a/js/components/bottom-activity-panel.js
+++ b/js/components/bottom-activity-panel.js
@@ -1,164 +1,264 @@
 import { EVENTS } from "../core/event-constants.js";
 import { subscribe } from "../core/pan.js";
-import { graphStore } from "../store/graph-store.js";
 import { uiStore } from "../store/ui-store.js";
 
 const tabs = [
-  { key: "messages", label: "Messages", tag: "bottom-messages-view" },
-  { key: "activity", label: "Activity Log", tag: "bottom-activity-log-view" },
-  { key: "queue", label: "Task Queue", tag: "bottom-task-queue-view" },
-  { key: "history", label: "Run History", tag: "bottom-run-history-view" },
-  { key: "errors", label: "Errors", tag: "bottom-error-view" }
+	{ key: "retrieval-log", label: "Retrieval Log" },
+	{ key: "consolidation", label: "Consolidation" },
+	{ key: "contradictions", label: "Contradictions" },
+	{ key: "questions", label: "Questions" },
+	{ key: "metamemory", label: "Metamemory" },
 ];
 
 const tabByKey = Object.fromEntries(tabs.map((tab) => [tab.key, tab]));
-const normalizeTab = (value) => (tabByKey[value] ? value : "messages");
+const normalizeTab = (value) => (tabByKey[value] ? value : "retrieval-log");
+
+const escapeHtml = (value) =>
+	String(value ?? "")
+		.replaceAll("&", "&amp;")
+		.replaceAll("<", "&lt;")
+		.replaceAll(">", "&gt;");
+
+const formatTime = (iso) => {
+	if (!iso) return "";
+	try {
+		return new Date(iso).toLocaleTimeString([], {
+			hour: "2-digit",
+			minute: "2-digit",
+			second: "2-digit",
+		});
+	} catch {
+		return "";
+	}
+};
+
+/* ── Tab content renderers ── */
+
+const renderRetrievalLog = (runtime) => {
+	const log = runtime?.retrievalLog ?? [];
+	if (!log.length) {
+		return '<p class="panel-empty">No queries yet. Ask the brain a question to see the retrieval process.</p>';
+	}
+
+	const result = runtime.retrievalResult;
+	const rows = log
+		.map(
+			(entry) => `
+      <div class="log-row">
+        <span class="log-step">${entry.step ?? "?"}</span>
+        <span class="log-message">${escapeHtml(entry.name)}</span>
+        <span class="log-detail">${entry.status === "done" ? "done" : "..."}</span>
+        <span class="log-timestamp">${formatTime(entry.at)}</span>
+      </div>
+    `,
+		)
+		.join("");
+
+	const resultHtml = result
+		? result.error
+			? `<div style="padding:var(--space-2) 0;color:var(--color-contradiction);font-family:var(--font-mono);font-size:var(--font-size-sm)">${escapeHtml(result.error)}</div>`
+			: result.answer
+				? `
+        <div style="padding:var(--space-2) 0">
+          <div style="font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--text-primary);line-height:1.5">${escapeHtml(result.answer)}</div>
+          ${result.confidence != null ? `<span class="log-confidence ${result.confidence >= 0.7 ? "confidence-high" : result.confidence >= 0.4 ? "confidence-medium" : "confidence-low"}">Confidence: ${(result.confidence * 100).toFixed(0)}%</span>` : ""}
+        </div>
+      `
+				: ""
+		: "";
+
+	return `
+    ${runtime.retrievalQuery ? `<div style="font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-question);padding:var(--space-1) 0;margin-bottom:var(--space-2)">Q: ${escapeHtml(runtime.retrievalQuery)}</div>` : ""}
+    ${rows}
+    ${resultHtml}
+  `;
+};
+
+const renderConsolidation = (runtime) => {
+	const log = runtime?.consolidationLog ?? [];
+	if (!log.length) {
+		return '<p class="panel-empty">No consolidation activity. Add more memories to trigger tier promotion.</p>';
+	}
+
+	return log
+		.map(
+			(entry) => `
+      <div class="log-row">
+        <span class="log-timestamp">${formatTime(entry.at)}</span>
+        <span class="log-message">${escapeHtml(entry.fromTier ? `T${entry.fromTier} → T${entry.toTier}` : "Promoted")}</span>
+        <span class="log-detail">${escapeHtml(entry.nodeId ?? "")}</span>
+      </div>
+    `,
+		)
+		.join("");
+};
+
+const renderContradictions = (runtime) => {
+	const items = runtime?.contradictions ?? [];
+	if (!items.length) {
+		return '<p class="panel-empty">No contradictions detected. Conflicting memories will appear here.</p>';
+	}
+
+	return items
+		.map(
+			(item) => `
+      <div class="log-row">
+        <span class="log-timestamp">${formatTime(item.at)}</span>
+        <span class="log-message" style="color:var(--color-contradiction)">${escapeHtml(item.description ?? "Contradiction")}</span>
+        <span class="log-detail">${escapeHtml(item.nodeA ?? "")} vs ${escapeHtml(item.nodeB ?? "")}</span>
+      </div>
+    `,
+		)
+		.join("");
+};
+
+const renderQuestions = (runtime) => {
+	const items = runtime?.unansweredQuestions ?? [];
+	if (!items.length) {
+		return '<p class="panel-empty">No unanswered questions. The self-questioning engine activates as memories accumulate.</p>';
+	}
+
+	return items
+		.map(
+			(item) => `
+      <div class="log-row">
+        <span class="log-step" style="color:var(--color-question)">L${item.level ?? "?"}</span>
+        <span class="log-message" style="color:var(--color-question)">${escapeHtml(item.question_text ?? item.text ?? "")}</span>
+      </div>
+    `,
+		)
+		.join("");
+};
+
+const renderMetamemory = (runtime) => {
+	const meta = runtime?.metamemory;
+	if (!meta) {
+		return '<p class="panel-empty">Knowledge inventory empty. The brain builds its self-model as you add memories.</p>';
+	}
+
+	const topics = meta.topics ?? {};
+	const rows = Object.entries(topics)
+		.map(
+			([topic, data]) => `
+      <div class="log-row">
+        <span class="log-message">${escapeHtml(topic)}</span>
+        <span class="log-detail">${data.count ?? 0} chunks</span>
+        <span class="log-confidence ${(data.confidence ?? 0) >= 0.7 ? "confidence-high" : (data.confidence ?? 0) >= 0.4 ? "confidence-medium" : "confidence-low"}">${((data.confidence ?? 0) * 100).toFixed(0)}%</span>
+      </div>
+    `,
+		)
+		.join("");
+
+	return rows || '<p class="panel-empty">No topic data yet.</p>';
+};
+
+const renderTabContent = (tab, runtime) => {
+	switch (tab) {
+		case "retrieval-log":
+			return renderRetrievalLog(runtime);
+		case "consolidation":
+			return renderConsolidation(runtime);
+		case "contradictions":
+			return renderContradictions(runtime);
+		case "questions":
+			return renderQuestions(runtime);
+		case "metamemory":
+			return renderMetamemory(runtime);
+		default:
+			return renderRetrievalLog(runtime);
+	}
+};
+
+/* ── Component ── */
 
 class BottomActivityPanel extends HTMLElement {
-  #dispose = [];
-  #tab = "messages";
-  #runtime = uiStore.getRuntimeState();
-  #selectedNodeId = null;
-  #selectedNode = null;
-
-  connectedCallback() {
-    const state = uiStore.getState();
-    this.#tab = normalizeTab(state.bottomTab);
-    this.#runtime = uiStore.getRuntimeState();
-    this.#selectedNodeId = state.selectedNodeId;
-    this.#selectedNode = state.selectedNodeId ? graphStore.getNode(state.selectedNodeId) : null;
-
-    this.render();
-    this.#bind();
-
-    this.#dispose.push(
-      subscribe(EVENTS.PANEL_BOTTOM_TAB_CHANGED, ({ payload }) => {
-        this.#tab = normalizeTab(payload?.tab);
-        this.render();
-        this.#bind();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.UI_RUNTIME_STATE_CHANGED, () => {
-        this.#runtime = uiStore.getRuntimeState();
-        this.renderView();
-        this.#syncDevConsoleToggle();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_SELECTION_SET, ({ payload }) => {
-        this.#selectedNodeId = payload?.nodeId ?? null;
-        this.#selectedNode = this.#selectedNodeId ? graphStore.getNode(this.#selectedNodeId) : null;
-        if (this.#tab === "activity") this.renderView();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_SELECTION_CLEARED, () => {
-        this.#selectedNodeId = null;
-        this.#selectedNode = null;
-        if (this.#tab === "activity") this.renderView();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_NODE_UPDATED, ({ payload }) => {
-        if (!this.#selectedNodeId || payload?.nodeId !== this.#selectedNodeId) return;
-        this.#selectedNode = graphStore.getNode(this.#selectedNodeId);
-        if (this.#tab === "activity") this.renderView();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_NODE_DELETED, ({ payload }) => {
-        if (!this.#selectedNodeId || payload?.nodeId !== this.#selectedNodeId) return;
-        this.#selectedNodeId = null;
-        this.#selectedNode = null;
-        if (this.#tab === "activity") this.renderView();
-      })
-    );
-  }
-
-  disconnectedCallback() {
-    this.#dispose.forEach((run) => run());
-    this.#dispose = [];
-  }
-
-  #bind() {
-    this.querySelectorAll("[data-bottom-tab]").forEach((button) => {
-      button.addEventListener("click", () => {
-        uiStore.setBottomTab(button.dataset.bottomTab);
-      });
-    });
-
-    this.querySelector("[data-action='toggle-dev-console']")?.addEventListener("click", () => {
-      uiStore.setDevConsoleVisible(!this.#runtime.devConsoleVisible);
-    });
-  }
-
-  #syncDevConsoleToggle() {
-    const button = this.querySelector("[data-action='toggle-dev-console']");
-    if (!button) return;
-    button.setAttribute("aria-pressed", this.#runtime.devConsoleVisible ? "true" : "false");
-    button.textContent = this.#runtime.devConsoleVisible ? "Hide PAN Console" : "Show PAN Console";
-  }
-
-  renderView() {
-    const panel = this.querySelector("[data-role='bottom-tab-content']");
-    if (!panel) return;
-
-    const active = tabByKey[this.#tab] ?? tabByKey.messages;
-    panel.innerHTML = "";
-    const view = document.createElement(active.tag);
-
-    if (this.#tab === "messages") {
-      view.items = this.#runtime.activityItems;
-    } else if (this.#tab === "activity") {
-      view.items = this.#runtime.activityItems;
-      view.selectedNode = this.#selectedNode;
-    } else if (this.#tab === "queue") {
-      view.items = this.#runtime.taskQueue;
-    } else if (this.#tab === "history") {
-      view.items = this.#runtime.runHistory;
-    } else {
-      view.items = this.#runtime.errors;
-    }
-
-    panel.append(view);
-
-    const devPanel = this.querySelector("[data-role='pan-dev-console']");
-    if (!devPanel) return;
-
-    devPanel.innerHTML = this.#runtime.devConsoleVisible ? "<pan-event-console></pan-event-console>" : "";
-  }
-
-  render() {
-    this.innerHTML = `
+	#dispose = [];
+	#tab = "retrieval-log";
+	#runtime = uiStore.getRuntimeState();
+
+	connectedCallback() {
+		const state = uiStore.getState();
+		this.#tab = normalizeTab(state.bottomTab);
+		this.#runtime = uiStore.getRuntimeState();
+
+		this.render();
+		this.#bind();
+
+		this.#dispose.push(
+			subscribe(EVENTS.PANEL_BOTTOM_TAB_CHANGED, ({ payload }) => {
+				this.#tab = normalizeTab(payload?.tab);
+				this.render();
+				this.#bind();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.UI_RUNTIME_STATE_CHANGED, () => {
+				this.#runtime = uiStore.getRuntimeState();
+				this.#renderView();
+			}),
+		);
+	}
+
+	disconnectedCallback() {
+		this.#dispose.forEach((run) => run());
+		this.#dispose = [];
+	}
+
+	#bind() {
+		this.querySelectorAll("[data-bottom-tab]").forEach((button) => {
+			button.addEventListener("click", () => {
+				uiStore.setBottomTab(button.dataset.bottomTab);
+			});
+		});
+	}
+
+	#renderView() {
+		const panel = this.querySelector("[data-role='bottom-tab-content']");
+		if (!panel) return;
+		panel.innerHTML = renderTabContent(this.#tab, this.#runtime);
+	}
+
+	#getTabBadge(tabKey) {
+		if (tabKey === "contradictions") {
+			const count = this.#runtime?.contradictions?.length ?? 0;
+			return count > 0 ? `<span class="tab-badge">${count}</span>` : "";
+		}
+		if (tabKey === "questions") {
+			const count = this.#runtime?.unansweredQuestions?.length ?? 0;
+			return count > 0
+				? `<span class="tab-badge" style="background:var(--color-question);color:#000">${count}</span>`
+				: "";
+		}
+		return "";
+	}
+
+	render() {
+		this.innerHTML = `
       <section class="mg-panel">
-        <header>Activity & Runtime</header>
+        <header>Activity</header>
         <div class="content bottom-panel-content">
           <div class="bottom-panel-toolbar">
-            <div class="toolbar-actions" role="tablist" aria-label="Bottom activity tabs">
+            <div class="bottom-tabs" role="tablist" aria-label="Bottom panel tabs">
               ${tabs
-                .map(
-                  (tab) => `<button type="button" role="tab" data-bottom-tab="${tab.key}" aria-pressed="${this.#tab === tab.key}">${tab.label}</button>`
-                )
-                .join("")}
+								.map(
+									(tab) => `
+                  <button type="button" role="tab" data-bottom-tab="${tab.key}"
+                    aria-pressed="${this.#tab === tab.key}" style="position:relative">
+                    ${tab.label}${this.#getTabBadge(tab.key)}
+                  </button>
+                `,
+								)
+								.join("")}
             </div>
-            <button type="button" class="bottom-dev-toggle" data-action="toggle-dev-console" aria-pressed="${this.#runtime.devConsoleVisible}">
-              ${this.#runtime.devConsoleVisible ? "Hide PAN Console" : "Show PAN Console"}
-            </button>
           </div>
           <section class="bottom-panel-tab-content" data-role="bottom-tab-content"></section>
-          <section class="bottom-panel-dev" data-role="pan-dev-console"></section>
         </div>
       </section>
     `;
 
-    this.renderView();
-  }
+		this.#renderView();
+	}
 }
 
 customElements.define("bottom-activity-panel", BottomActivityPanel);
diff --git a/js/components/inspector-panel.js b/js/components/inspector-panel.js
index e38b8a6..a36bbc6 100644
--- a/js/components/inspector-panel.js
+++ b/js/components/inspector-panel.js
@@ -1,253 +1,633 @@
+import { DATA_COLORS_CSS, TIER_COLOR_CSS } from "../core/constants.js";
 import { EVENTS } from "../core/event-constants.js";
 import { publish, subscribe } from "../core/pan.js";
+import { EDGE_TYPE_VALUES } from "../core/types.js";
 import { graphStore } from "../store/graph-store.js";
 import { escapeHtml } from "./inspector/shared.js";
-import { EDGE_TYPE_VALUES } from "../core/types.js";
 
-const tabs = [
-  { key: "overview", label: "Overview", tag: "inspector-overview" },
-  { key: "prompt", label: "Prompt", tag: "inspector-prompt" },
-  { key: "data", label: "Data", tag: "inspector-data" },
-  { key: "tools", label: "Tools", tag: "inspector-tools" },
-  { key: "activity", label: "Activity", tag: "inspector-activity" },
-  { key: "output", label: "Output", tag: "inspector-output" },
-  { key: "automation", label: "Automation", tag: "inspector-automation" },
-  { key: "permissions", label: "Permissions", tag: "inspector-permissions" }
+/* ── Tabs per node type ── */
+
+const CHUNK_TABS = [
+	{ key: "overview", label: "Overview" },
+	{ key: "metadata", label: "Metadata" },
+	{ key: "retrieval", label: "Retrieval" },
+	{ key: "timeline", label: "Timeline" },
+	{ key: "scoring", label: "Scoring" },
+];
+
+const QUESTION_TABS = [{ key: "questions", label: "Questions" }];
+
+const CLUSTER_TABS = [{ key: "cluster", label: "Cluster" }];
+
+const PATTERN_TABS = [
+	{ key: "overview", label: "Overview" },
+	{ key: "metadata", label: "Evidence" },
 ];
 
-const tabTagByKey = Object.fromEntries(tabs.map((tab) => [tab.key, tab.tag]));
+const TRIGGER_TABS = [
+	{ key: "overview", label: "Overview" },
+	{ key: "metadata", label: "Conditions" },
+];
+
+const getTabsForType = (type) => {
+	switch (type) {
+		case "chunk":
+			return CHUNK_TABS;
+		case "question":
+			return QUESTION_TABS;
+		case "cluster":
+			return CLUSTER_TABS;
+		case "pattern":
+			return PATTERN_TABS;
+		case "trigger":
+			return TRIGGER_TABS;
+		default:
+			return CHUNK_TABS;
+	}
+};
+
+/* ── Tier badge helper ── */
+
+const tierBadge = (tier) => {
+	const color = TIER_COLOR_CSS[tier] ?? TIER_COLOR_CSS[1];
+	return `<span class="tag tag-t${tier}" style="border-color:${color}40;color:${color}">T${tier}</span>`;
+};
+
+const typeBadge = (type) => {
+	const colors = {
+		chunk: DATA_COLORS_CSS.T1,
+		question: DATA_COLORS_CSS.QUESTION,
+		trigger: DATA_COLORS_CSS.TRIGGER,
+		pattern: DATA_COLORS_CSS.T3,
+		cluster: "#ffffff",
+	};
+	const c = colors[type] ?? "#c9d1d9";
+	return `<span class="tag" style="border-color:${c}40;color:${c}">${type}</span>`;
+};
+
+/* ── KV row helper ── */
+
+const kv = (label, value) =>
+	`<span class="inspector-kv-label">${escapeHtml(label)}</span>
+   <span class="inspector-kv-value">${escapeHtml(String(value ?? "-"))}</span>`;
+
+const kvHtml = (label, html) =>
+	`<span class="inspector-kv-label">${escapeHtml(label)}</span>
+   <span class="inspector-kv-value">${html}</span>`;
+
+/* ── Tab renderers ── */
+
+const renderChunkOverview = (node) => {
+	const d = node.data ?? {};
+	const content = escapeHtml(d.content || node.description || "(no content)");
+	const gaugeWidth = Math.round(
+		((d.access_count ?? 1) / Math.max(d.access_count ?? 1, 10)) * 100,
+	);
+	const gaugeColor = TIER_COLOR_CSS[d.tier ?? 1];
+
+	return `
+    <div class="inspector-section-title">Content</div>
+    <p style="font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--text-primary);line-height:1.5;margin:0">${content}</p>
+
+    <div class="inspector-section-title">Properties</div>
+    <div class="inspector-kv">
+      ${kvHtml("Tier", tierBadge(d.tier ?? 1))}
+      ${kv("Status", d.status ?? "open")}
+      ${kv("Emotional Tone", d.emotional_tone ?? "neutral")}
+      ${kv("Emotional Intensity", (d.emotional_intensity ?? 0).toFixed(2))}
+      ${kv("Stakes", d.stakes_level ?? "low")}
+      ${kv("Decision Made", d.decision_made ? "Yes" : "No")}
+    </div>
+
+    <div class="inspector-section-title">Relevance</div>
+    <div class="relevance-gauge">
+      <div class="relevance-gauge-fill" style="width:${gaugeWidth}%;background:${gaugeColor}"></div>
+    </div>
+    <div style="font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--text-muted);margin-top:2px">
+      ${d.access_count ?? 1} accesses
+    </div>
+  `;
+};
+
+const renderChunkMetadata = (node) => {
+	const d = node.data ?? {};
+	const tags = (d.topic_tags ?? [])
+		.map((t) => `<span class="tag tag-t1">${escapeHtml(t)}</span>`)
+		.join(" ");
+	const entities = (d.entity_tags ?? [])
+		.map((t) => `<span class="tag tag-t2">${escapeHtml(t)}</span>`)
+		.join(" ");
+
+	return `
+    <div class="inspector-section-title">Source</div>
+    <div class="inspector-kv">
+      ${kv("Source", d.source ?? "user_stated")}
+      ${kv("Reliability", d.source_reliability ?? "high")}
+      ${kv("Session", d.session_id || "-")}
+      ${kv("Created", node.metadata?.createdAt ?? "-")}
+      ${kv("Last Accessed", d.last_accessed ?? "-")}
+      ${kv("Access Count", d.access_count ?? 0)}
+    </div>
+
+    <div class="inspector-section-title">Participants</div>
+    <span style="font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--text-primary)">
+      ${(d.participants ?? []).join(", ") || "-"}
+    </span>
+
+    <div class="inspector-section-title">Topic Tags</div>
+    <div style="display:flex;gap:4px;flex-wrap:wrap">${tags || "<span style='color:var(--text-muted)'>-</span>"}</div>
+
+    <div class="inspector-section-title">Entity Tags</div>
+    <div style="display:flex;gap:4px;flex-wrap:wrap">${entities || "<span style='color:var(--text-muted)'>-</span>"}</div>
+
+    <div class="inspector-section-title">Action Items</div>
+    <span style="font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--text-primary)">
+      ${(d.action_items ?? []).join(", ") || "-"}
+    </span>
+  `;
+};
+
+const renderChunkRetrieval = (node) => {
+	const d = node.data ?? {};
+	const cues = (d.retrieval_cues ?? [])
+		.map(
+			(c) =>
+				`<div style="font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--text-primary);padding:2px 0">${escapeHtml(c)}</div>`,
+		)
+		.join("");
+	const questions = (d.generated_questions ?? [])
+		.map(
+			(q) =>
+				`<div style="font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-question);padding:2px 0">${escapeHtml(q)}</div>`,
+		)
+		.join("");
+	const links = (d.linked_chunks ?? [])
+		.map(
+			(id) =>
+				`<div style="font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-t1);padding:2px 0;cursor:pointer" data-link-node="${id}">${escapeHtml(id)}</div>`,
+		)
+		.join("");
+
+	return `
+    <div class="inspector-section-title">Retrieval Cues</div>
+    ${cues || '<span style="color:var(--text-muted);font-size:var(--font-size-sm)">No cues generated yet</span>'}
+
+    <div class="inspector-section-title">Generated Questions</div>
+    ${questions || '<span style="color:var(--text-muted);font-size:var(--font-size-sm)">No questions generated yet</span>'}
+
+    <div class="inspector-section-title">Linked Chunks</div>
+    ${links || '<span style="color:var(--text-muted);font-size:var(--font-size-sm)">No links</span>'}
+  `;
+};
+
+const renderChunkTimeline = (node) => {
+	const d = node.data ?? {};
+	const amendments = (d.amendments ?? [])
+		.map(
+			(a, i) => `<div class="log-row">
+      <span class="log-step">#${i + 1}</span>
+      <span class="log-message">${escapeHtml(a.content ?? a)}</span>
+    </div>`,
+		)
+		.join("");
+
+	return `
+    <div class="inspector-section-title">Context Chain</div>
+    <div class="inspector-kv">
+      ${kv("Preceding", d.preceding_context_id ?? "none")}
+      ${kv("Following", d.following_context_id ?? "none")}
+    </div>
+
+    <div class="inspector-section-title">Amendments</div>
+    ${amendments || '<span style="color:var(--text-muted);font-size:var(--font-size-sm)">No amendments</span>'}
+  `;
+};
+
+const renderChunkScoring = (node) => {
+	const d = node.data ?? {};
+	return `
+    <div class="inspector-section-title">Relevance Factors</div>
+    <div class="inspector-kv">
+      ${kv("Recency (days since created)", "—")}
+      ${kv("Frequency (access_count)", d.access_count ?? 1)}
+      ${kv("Emotional Weight", (d.emotional_intensity ?? 0).toFixed(2))}
+      ${kv("Decision Made", d.decision_made ? "1.3x" : "1.0x")}
+      ${kv("Connections", (d.linked_chunks ?? []).length)}
+      ${kv("Zeigarnik (open?)", d.status === "open" ? "1.5x" : "1.0x")}
+    </div>
+    <div class="inspector-section-title" style="margin-top:var(--space-3)">Computed Score</div>
+    <span style="font-family:var(--font-mono);font-size:var(--font-size-lg);color:var(--color-t1)">—</span>
+    <span style="font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--text-muted);margin-left:var(--space-2)">
+      (calculated at retrieval time)
+    </span>
+  `;
+};
+
+const renderQuestionTab = (node) => {
+	const d = node.data ?? {};
+	const levelLabels = [
+		"",
+		"Bare Fact",
+		"Explanation",
+		"Implication",
+		"Counterfactual",
+		"Conditional",
+	];
+	return `
+    <div class="inspector-section-title">Question</div>
+    <div class="inspector-kv">
+      ${kvHtml("Level", `<span class="tag tag-question">L${d.level ?? 1} ${levelLabels[d.level ?? 1] ?? ""}</span>`)}
+      ${kv("Question", d.question_text ?? "(empty)")}
+      ${kv("Answered", d.answered ? "Yes" : "No")}
+      ${kv("Answer", d.answer_text ?? "-")}
+      ${kv("Confidence", d.confidence != null ? d.confidence.toFixed(2) : "-")}
+      ${kv("Parent Q", d.parent_question_id ?? "none")}
+    </div>
+
+    <div class="inspector-section-title">Linked Chunks</div>
+    ${(d.linked_chunk_ids ?? []).map((id) => `<div style="font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-t1);padding:2px 0">${escapeHtml(id)}</div>`).join("") || '<span style="color:var(--text-muted);font-size:var(--font-size-sm)">No linked chunks</span>'}
+  `;
+};
+
+const renderClusterTab = (node) => {
+	const d = node.data ?? {};
+	const members = (d.member_ids ?? [])
+		.map(
+			(id) =>
+				`<div style="font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-t1);padding:2px 0">${escapeHtml(id)}</div>`,
+		)
+		.join("");
+
+	return `
+    <div class="inspector-section-title">Cluster</div>
+    <div class="inspector-kv">
+      ${kv("Members", (d.member_ids ?? []).length)}
+      ${kv("Strength", d.cluster_strength ?? 0)}
+    </div>
+
+    <div class="inspector-section-title">Shared Tags</div>
+    <div style="display:flex;gap:4px;flex-wrap:wrap">
+      ${(d.shared_tags ?? []).map((t) => `<span class="tag tag-t1">${escapeHtml(t)}</span>`).join("") || "-"}
+    </div>
 
-const normalizeTab = (value) => (tabTagByKey[value] ? value : "overview");
+    <div class="inspector-section-title">Members</div>
+    ${members || '<span style="color:var(--text-muted);font-size:var(--font-size-sm)">No members</span>'}
+  `;
+};
+
+const renderPatternOverview = (node) => {
+	const d = node.data ?? {};
+	return `
+    <div class="inspector-section-title">Pattern</div>
+    <div class="inspector-kv">
+      ${kv("Pattern", d.pattern ?? "-")}
+      ${kv("Type", d.pattern_type ?? "-")}
+      ${kv("Confidence", d.confidence != null ? d.confidence.toFixed(2) : "-")}
+      ${kv("Implication", d.implication ?? "-")}
+    </div>
+  `;
+};
+
+const renderPatternEvidence = (node) => {
+	const d = node.data ?? {};
+	return `
+    <div class="inspector-section-title">Evidence Chunks</div>
+    ${(d.evidence ?? []).map((id) => `<div style="font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-t1);padding:2px 0">${escapeHtml(id)}</div>`).join("") || '<span style="color:var(--text-muted);font-size:var(--font-size-sm)">No evidence</span>'}
+
+    <div class="inspector-section-title">Exceptions</div>
+    ${(d.exceptions ?? []).map((e) => `<div style="font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-contradiction);padding:2px 0">${escapeHtml(e)}</div>`).join("") || '<span style="color:var(--text-muted);font-size:var(--font-size-sm)">None</span>'}
+  `;
+};
+
+const renderTriggerOverview = (node) => {
+	const d = node.data ?? {};
+	return `
+    <div class="inspector-section-title">Trigger</div>
+    <div class="inspector-kv">
+      ${kv("Content", d.content ?? node.description ?? "-")}
+      ${kv("Fired", d.fired ? "Yes" : "No")}
+      ${kv("Fire Count", d.fire_count ?? 0)}
+      ${kv("Expires", d.expires ?? "never")}
+    </div>
+  `;
+};
+
+const renderTriggerConditions = (node) => {
+	const d = node.data ?? {};
+	return `
+    <div class="inspector-section-title">Conditions</div>
+    ${(d.trigger_conditions ?? []).map((c) => `<div style="font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-trigger);padding:2px 0">${escapeHtml(c)}</div>`).join("") || '<span style="color:var(--text-muted);font-size:var(--font-size-sm)">No conditions</span>'}
+  `;
+};
+
+/* ── Tab content dispatcher ── */
+
+const renderTabContent = (node, tab) => {
+	if (!node)
+		return '<p class="inspector-empty">Select a memory chunk to inspect its metadata, or ask a question to watch the brain think.</p>';
+
+	switch (node.type) {
+		case "chunk":
+			switch (tab) {
+				case "overview":
+					return renderChunkOverview(node);
+				case "metadata":
+					return renderChunkMetadata(node);
+				case "retrieval":
+					return renderChunkRetrieval(node);
+				case "timeline":
+					return renderChunkTimeline(node);
+				case "scoring":
+					return renderChunkScoring(node);
+				default:
+					return renderChunkOverview(node);
+			}
+		case "question":
+			return renderQuestionTab(node);
+		case "cluster":
+			return renderClusterTab(node);
+		case "pattern":
+			return tab === "metadata"
+				? renderPatternEvidence(node)
+				: renderPatternOverview(node);
+		case "trigger":
+			return tab === "metadata"
+				? renderTriggerConditions(node)
+				: renderTriggerOverview(node);
+		default:
+			return renderChunkOverview(node);
+	}
+};
+
+/* ── Inspector Panel component ── */
 
 class InspectorPanel extends HTMLElement {
-  #dispose = [];
-  #activeTab = "overview";
-  #selectedNodeId = null;
-  #selectedNode = null;
-  #selectedEdgeId = null;
-  #selectedEdge = null;
-
-  connectedCallback() {
-    this.addEventListener("inspector-node-patch", (event) => this.#onNodePatch(event));
-
-    this.#dispose.push(
-      subscribe(EVENTS.INSPECTOR_TAB_CHANGED, ({ payload }) => {
-        this.#activeTab = normalizeTab(payload?.tab);
-        this.render();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_SELECTION_SET, ({ payload }) => {
-        this.#selectedNodeId = payload?.nodeId ?? null;
-        this.#selectedNode = this.#selectedNodeId ? graphStore.getNode(this.#selectedNodeId) : null;
-        this.#selectedEdgeId = null;
-        this.#selectedEdge = null;
-        this.render();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_SELECTION_CLEARED, () => {
-        this.#selectedNodeId = null;
-        this.#selectedNode = null;
-        this.render();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_EDGE_SELECTED, ({ payload }) => {
-        this.#selectedEdgeId = payload?.edgeId ?? null;
-        this.#selectedEdge = this.#selectedEdgeId ? graphStore.getEdge(this.#selectedEdgeId) : null;
-        this.#selectedNodeId = null;
-        this.#selectedNode = null;
-        this.render();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_EDGE_SELECTION_CLEARED, () => {
-        this.#selectedEdgeId = null;
-        this.#selectedEdge = null;
-        this.render();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_NODE_UPDATED, ({ payload }) => {
-        if (payload?.nodeId == null || payload.nodeId !== this.#selectedNodeId) return;
-        this.#selectedNode = graphStore.getNode(this.#selectedNodeId);
-        this.render();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_NODE_DELETED, ({ payload }) => {
-        if (payload?.nodeId == null || payload.nodeId !== this.#selectedNodeId) return;
-        this.#selectedNodeId = null;
-        this.#selectedNode = null;
-        this.render();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_EDGE_UPDATED, ({ payload }) => {
-        if (payload?.edgeId == null || payload.edgeId !== this.#selectedEdgeId) return;
-        this.#selectedEdge = graphStore.getEdge(this.#selectedEdgeId);
-        this.render();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_EDGE_DELETED, ({ payload }) => {
-        if (payload?.edgeId == null || payload.edgeId !== this.#selectedEdgeId) return;
-        this.#selectedEdgeId = null;
-        this.#selectedEdge = null;
-        this.render();
-      })
-    );
-
-    this.render();
-  }
-
-  disconnectedCallback() {
-    this.#dispose.forEach((run) => run());
-    this.#dispose = [];
-  }
-
-  #onNodePatch(event) {
-    const patch = event.detail?.patch;
-    if (this.#selectedNodeId == null || patch == null || typeof patch !== "object") return;
-
-    publish(EVENTS.GRAPH_NODE_UPDATE_REQUESTED, {
-      nodeId: this.#selectedNodeId,
-      patch,
-      origin: "inspector-panel"
-    });
-  }
-
-  #bindEdgeInspector() {
-    if (!this.#selectedEdgeId || !this.#selectedEdge) return;
-
-    this.querySelector('[data-field="edge-type"]')?.addEventListener("change", (event) => {
-      publish(EVENTS.GRAPH_EDGE_UPDATE_REQUESTED, {
-        edgeId: this.#selectedEdgeId,
-        patch: { type: event.target.value },
-        origin: "inspector-panel"
-      });
-    });
-
-    this.querySelector('[data-field="edge-label"]')?.addEventListener("change", (event) => {
-      publish(EVENTS.GRAPH_EDGE_UPDATE_REQUESTED, {
-        edgeId: this.#selectedEdgeId,
-        patch: { label: event.target.value },
-        origin: "inspector-panel"
-      });
-    });
-
-    this.querySelector('[data-action="delete-edge"]')?.addEventListener("click", () => {
-      publish(EVENTS.GRAPH_EDGE_DELETE_REQUESTED, {
-        edgeId: this.#selectedEdgeId,
-        origin: "inspector-panel"
-      });
-    });
-  }
-
-  #bindTabs() {
-    this.querySelectorAll("[data-inspector-tab]").forEach((button) => {
-      button.addEventListener("click", () => {
-        const tab = normalizeTab(button.dataset.inspectorTab);
-        publish(EVENTS.INSPECTOR_TAB_CHANGED, { tab, origin: "inspector-panel" });
-      });
-    });
-  }
-
-  render() {
-    if (this.#selectedEdge) {
-      const edge = this.#selectedEdge;
-      const sourceNode = graphStore.getNode(edge.source);
-      const targetNode = graphStore.getNode(edge.target);
-      const sourceLabel = escapeHtml(sourceNode?.label ?? edge.source ?? "(unknown)");
-      const targetLabel = escapeHtml(targetNode?.label ?? edge.target ?? "(unknown)");
-      const label = escapeHtml(String(edge.label ?? ""));
-
-      this.innerHTML = `
+	#dispose = [];
+	#activeTab = "overview";
+	#selectedNodeId = null;
+	#selectedNode = null;
+	#selectedEdgeId = null;
+	#selectedEdge = null;
+
+	connectedCallback() {
+		this.addEventListener("inspector-node-patch", (event) =>
+			this.#onNodePatch(event),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.INSPECTOR_TAB_CHANGED, ({ payload }) => {
+				this.#activeTab = payload?.tab ?? "overview";
+				this.render();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_SELECTION_SET, ({ payload }) => {
+				this.#selectedNodeId = payload?.nodeId ?? null;
+				this.#selectedNode = this.#selectedNodeId
+					? graphStore.getNode(this.#selectedNodeId)
+					: null;
+				this.#selectedEdgeId = null;
+				this.#selectedEdge = null;
+				// Reset tab to first available for this node type
+				if (this.#selectedNode) {
+					const tabs = getTabsForType(this.#selectedNode.type);
+					if (!tabs.find((t) => t.key === this.#activeTab)) {
+						this.#activeTab = tabs[0]?.key ?? "overview";
+					}
+				}
+				this.render();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_SELECTION_CLEARED, () => {
+				this.#selectedNodeId = null;
+				this.#selectedNode = null;
+				this.render();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_EDGE_SELECTED, ({ payload }) => {
+				this.#selectedEdgeId = payload?.edgeId ?? null;
+				this.#selectedEdge = this.#selectedEdgeId
+					? graphStore.getEdge(this.#selectedEdgeId)
+					: null;
+				this.#selectedNodeId = null;
+				this.#selectedNode = null;
+				this.render();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_EDGE_SELECTION_CLEARED, () => {
+				this.#selectedEdgeId = null;
+				this.#selectedEdge = null;
+				this.render();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_NODE_UPDATED, ({ payload }) => {
+				if (payload?.nodeId == null || payload.nodeId !== this.#selectedNodeId)
+					return;
+				this.#selectedNode = graphStore.getNode(this.#selectedNodeId);
+				this.render();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_NODE_DELETED, ({ payload }) => {
+				if (payload?.nodeId == null || payload.nodeId !== this.#selectedNodeId)
+					return;
+				this.#selectedNodeId = null;
+				this.#selectedNode = null;
+				this.render();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_EDGE_UPDATED, ({ payload }) => {
+				if (payload?.edgeId == null || payload.edgeId !== this.#selectedEdgeId)
+					return;
+				this.#selectedEdge = graphStore.getEdge(this.#selectedEdgeId);
+				this.render();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_EDGE_DELETED, ({ payload }) => {
+				if (payload?.edgeId == null || payload.edgeId !== this.#selectedEdgeId)
+					return;
+				this.#selectedEdgeId = null;
+				this.#selectedEdge = null;
+				this.render();
+			}),
+		);
+
+		this.render();
+	}
+
+	disconnectedCallback() {
+		this.#dispose.forEach((run) => run());
+		this.#dispose = [];
+	}
+
+	#onNodePatch(event) {
+		const patch = event.detail?.patch;
+		if (
+			this.#selectedNodeId == null ||
+			patch == null ||
+			typeof patch !== "object"
+		)
+			return;
+
+		publish(EVENTS.GRAPH_NODE_UPDATE_REQUESTED, {
+			nodeId: this.#selectedNodeId,
+			patch,
+			origin: "inspector-panel",
+		});
+	}
+
+	#bindEdgeInspector() {
+		if (!this.#selectedEdgeId || !this.#selectedEdge) return;
+
+		this.querySelector('[data-field="edge-type"]')?.addEventListener(
+			"change",
+			(event) => {
+				publish(EVENTS.GRAPH_EDGE_UPDATE_REQUESTED, {
+					edgeId: this.#selectedEdgeId,
+					patch: { type: event.target.value },
+					origin: "inspector-panel",
+				});
+			},
+		);
+
+		this.querySelector('[data-field="edge-label"]')?.addEventListener(
+			"change",
+			(event) => {
+				publish(EVENTS.GRAPH_EDGE_UPDATE_REQUESTED, {
+					edgeId: this.#selectedEdgeId,
+					patch: { label: event.target.value },
+					origin: "inspector-panel",
+				});
+			},
+		);
+
+		this.querySelector('[data-action="delete-edge"]')?.addEventListener(
+			"click",
+			() => {
+				publish(EVENTS.GRAPH_EDGE_DELETE_REQUESTED, {
+					edgeId: this.#selectedEdgeId,
+					origin: "inspector-panel",
+				});
+			},
+		);
+	}
+
+	#bindTabs() {
+		this.querySelectorAll("[data-inspector-tab]").forEach((button) => {
+			button.addEventListener("click", () => {
+				publish(EVENTS.INSPECTOR_TAB_CHANGED, {
+					tab: button.dataset.inspectorTab,
+					origin: "inspector-panel",
+				});
+			});
+		});
+
+		// Link clicks inside inspector
+		this.querySelectorAll("[data-link-node]").forEach((el) => {
+			el.addEventListener("click", () => {
+				const nodeId = el.dataset.linkNode;
+				if (nodeId) {
+					publish(EVENTS.GRAPH_NODE_SELECT_REQUESTED, {
+						nodeId,
+						origin: "inspector-panel",
+					});
+				}
+			});
+		});
+	}
+
+	render() {
+		if (this.#selectedEdge) {
+			const edge = this.#selectedEdge;
+			const sourceNode = graphStore.getNode(edge.source);
+			const targetNode = graphStore.getNode(edge.target);
+			const sourceLabel = escapeHtml(
+				sourceNode?.label ?? edge.source ?? "(unknown)",
+			);
+			const targetLabel = escapeHtml(
+				targetNode?.label ?? edge.target ?? "(unknown)",
+			);
+			const label = escapeHtml(String(edge.label ?? ""));
+
+			this.innerHTML = `
         <aside class="mg-panel mg-inspector-panel">
-          <header>Connection Inspector</header>
+          <header>Edge Inspector</header>
           <div class="content inspector-layout">
             <div class="inspector-summary">
               <p class="inspector-node-title">${sourceLabel} → ${targetLabel}</p>
-              <p class="inspector-node-meta">Type: ${escapeHtml(edge.type ?? "depends_on")}</p>
+              <p class="inspector-node-meta">${escapeHtml(edge.type ?? "linked_to")}</p>
             </div>
-            <section class="inspector-group">
-              <h4>Connection Details</h4>
-              <label class="inspector-field">
-                <span>Edge Type</span>
-                <select data-field="edge-type">
-                  ${EDGE_TYPE_VALUES.map(
-                    (type) => `<option value="${type}" ${type === edge.type ? "selected" : ""}>${type}</option>`
-                  ).join("")}
-                </select>
-              </label>
-              <label class="inspector-field">
-                <span>Label</span>
-                <input type="text" data-field="edge-label" value="${label}" placeholder="Optional label" />
-              </label>
-              <label class="inspector-field">
-                <span>Source Node</span>
-                <input type="text" value="${sourceLabel}" disabled />
-              </label>
-              <label class="inspector-field">
-                <span>Target Node</span>
-                <input type="text" value="${targetLabel}" disabled />
-              </label>
-              <div class="inspector-inline-row">
-                <button type="button" data-action="delete-edge">Delete Edge</button>
-              </div>
-            </section>
+            <div class="inspector-section-title">Edge Details</div>
+            <label class="inspector-field">
+              <span>Type</span>
+              <select data-field="edge-type">
+                ${EDGE_TYPE_VALUES.map(
+									(type) =>
+										`<option value="${type}" ${type === edge.type ? "selected" : ""}>${type}</option>`,
+								).join("")}
+              </select>
+            </label>
+            <label class="inspector-field">
+              <span>Label</span>
+              <input type="text" data-field="edge-label" value="${label}" placeholder="Optional label" />
+            </label>
+            <button class="toolbar-btn" type="button" data-action="delete-edge" style="margin-top:var(--space-2)">Delete Edge</button>
           </div>
         </aside>
       `;
-      this.#bindEdgeInspector();
-      return;
-    }
+			this.#bindEdgeInspector();
+			return;
+		}
 
-    const node = this.#selectedNode;
-    const selectedTitle = escapeHtml(node?.label ?? "No node selected");
-    const selectedType = escapeHtml(node?.type ?? "none");
+		const node = this.#selectedNode;
+		const tabs = node ? getTabsForType(node.type) : [];
+		const tabContent = renderTabContent(node, this.#activeTab);
 
-    this.innerHTML = `
+		this.innerHTML = `
       <aside class="mg-panel mg-inspector-panel">
-        <header>Node Inspector</header>
+        <header>Inspector</header>
         <div class="content inspector-layout">
-          <div class="inspector-summary">
-            <p class="inspector-node-title">${selectedTitle}</p>
-            <p class="inspector-node-meta">Type: ${selectedType}</p>
-          </div>
-          <div class="inspector-tabs" role="tablist" aria-label="Inspector tabs">
-            ${tabs
-              .map(
-                (tab) => `<button type="button" role="tab" data-inspector-tab="${tab.key}" aria-selected="${
-                  this.#activeTab === tab.key
-                }" aria-pressed="${this.#activeTab === tab.key}">${tab.label}</button>`
-              )
-              .join("")}
-          </div>
-          <section class="inspector-tab-content" data-role="inspector-tab-content"></section>
+          ${
+						node
+							? `
+            <div class="inspector-summary">
+              <p class="inspector-node-title">${escapeHtml(node.label)}</p>
+              <p class="inspector-node-meta">${typeBadge(node.type)} ${node.type === "chunk" ? tierBadge(node.data?.tier ?? 1) : ""}</p>
+            </div>
+            <div class="inspector-tabs" role="tablist" aria-label="Inspector tabs">
+              ${tabs
+								.map(
+									(tab) =>
+										`<button type="button" role="tab" data-inspector-tab="${tab.key}"
+                      aria-selected="${this.#activeTab === tab.key}"
+                      aria-pressed="${this.#activeTab === tab.key}">${tab.label}</button>`,
+								)
+								.join("")}
+            </div>
+            <div class="inspector-tab-content">${tabContent}</div>
+          `
+							: `<p class="inspector-empty">Select a memory chunk to inspect its metadata, or ask a question to watch the brain think.</p>`
+					}
         </div>
       </aside>
     `;
 
-    this.#bindTabs();
-
-    const activeTag = tabTagByKey[this.#activeTab] ?? "inspector-overview";
-    const contentEl = this.querySelector('[data-role="inspector-tab-content"]');
-    if (contentEl == null) return;
-
-    const tabEl = document.createElement(activeTag);
-    tabEl.node = node;
-    contentEl.append(tabEl);
-  }
+		this.#bindTabs();
+	}
 }
 
 customElements.define("inspector-panel", InspectorPanel);
diff --git a/js/components/left-tool-palette.js b/js/components/left-tool-palette.js
index 4818ebb..9e37a41 100644
--- a/js/components/left-tool-palette.js
+++ b/js/components/left-tool-palette.js
@@ -2,124 +2,87 @@ import { EVENTS } from "../core/event-constants.js";
 import { publish, subscribe } from "../core/pan.js";
 import { uiStore } from "../store/ui-store.js";
 
-const ICON_BY_TOOL = {
-  select: "assets/toolbar/select.svg",
-  pan: "assets/toolbar/pan.svg",
-  "create:note": "assets/toolbar/note2.svg",
-  "create:agent": "assets/toolbar/agent.svg",
-  "create:data": "assets/toolbar/data.svg",
-  "create:transformer": "assets/toolbar/transform.svg",
-  "create:view": "assets/toolbar/view.svg",
-  "create:action": "assets/toolbar/action.svg",
-  connect: "assets/toolbar/connect.svg"
-};
-
-const TOOL_GROUPS = [
-  {
-    title: "Pointer",
-    tools: [
-      { id: "select", label: "Select" },
-      { id: "pan", label: "Pan" }
-    ]
-  },
-  {
-    title: "Add Nodes",
-    tools: [
-      { id: "create:note", label: "Note Node" },
-      { id: "create:agent", label: "Agent Node" },
-      { id: "create:data", label: "Data Node" },
-      { id: "create:transformer", label: "Transformer Node" },
-      { id: "create:view", label: "View Node" },
-      { id: "create:action", label: "Action Node" }
-    ]
-  },
-  {
-    title: "Structure",
-    tools: [{ id: "connect", label: "Connect Edge" }]
-  }
+const TOOLS = [
+	{ id: "select", label: "Select", shortcut: "V", icon: "SEL" },
+	{ id: "pan", label: "Pan / Orbit", shortcut: "H", icon: "ORB" },
+	{ id: "create:chunk", label: "Add Chunk", shortcut: "C", icon: "CHK" },
+	{ id: "connect", label: "Add Link", shortcut: "L", icon: "LNK" },
+	{ id: "create:question", label: "Add Question", shortcut: "Q", icon: "Q?" },
+	{ id: "create:trigger", label: "Add Trigger", shortcut: "T", icon: "TRG" },
 ];
 
 class LeftToolPalette extends HTMLElement {
-  #dispose = [];
-  #activeTool = "select";
+	#dispose = [];
+	#activeTool = "select";
 
-  connectedCallback() {
-    this.render();
-    this.#bind();
+	connectedCallback() {
+		this.render();
+		this.#bind();
 
-    this.#dispose.push(
-      subscribe(EVENTS.TOOLBAR_TOOL_CHANGED, ({ payload }) => {
-        this.#activeTool = payload?.tool ?? "select";
-        this.#syncPressedState();
-      })
-    );
+		this.#dispose.push(
+			subscribe(EVENTS.TOOLBAR_TOOL_CHANGED, ({ payload }) => {
+				this.#activeTool = payload?.tool ?? "select";
+				this.#syncPressedState();
+			}),
+		);
 
-    this.#syncPressedState();
-  }
+		this.#syncPressedState();
+	}
 
-  disconnectedCallback() {
-    this.#dispose.forEach((run) => run());
-    this.#dispose = [];
-  }
+	disconnectedCallback() {
+		this.#dispose.forEach((run) => run());
+		this.#dispose = [];
+	}
 
-  #bind() {
-    this.querySelectorAll("[data-tool]").forEach((button) => {
-      button.addEventListener("click", () => {
-        const tool = button.dataset.tool ?? "select";
-        uiStore.setTool(tool);
-        publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-          level: "info",
-          message: `Tool changed to ${tool}`
-        });
-      });
-    });
-  }
+	#bind() {
+		this.querySelectorAll("[data-tool]").forEach((button) => {
+			button.addEventListener("click", () => {
+				const tool = button.dataset.tool ?? "select";
+				uiStore.setTool(tool);
+				publish(EVENTS.ACTIVITY_LOG_APPENDED, {
+					level: "info",
+					message: `Tool: ${tool}`,
+				});
+			});
+		});
+	}
 
-  #syncPressedState() {
-    this.querySelectorAll("[data-tool]").forEach((button) => {
-      const isActive = button.dataset.tool === this.#activeTool;
-      button.setAttribute("aria-pressed", isActive ? "true" : "false");
-    });
-  }
+	#syncPressedState() {
+		this.querySelectorAll("[data-tool]").forEach((button) => {
+			const isActive = button.dataset.tool === this.#activeTool;
+			button.setAttribute("aria-pressed", isActive ? "true" : "false");
+		});
+	}
 
-  render() {
-    const sections = TOOL_GROUPS.map((group) => {
-      const buttons = group.tools
-        .map(
-          (tool) => `
-            <button class="palette-tool-btn" type="button" data-tool="${tool.id}" aria-pressed="false" title="${tool.label}" aria-label="${tool.label}">
-              <img class="palette-tool-icon" src="${ICON_BY_TOOL[tool.id] ?? ""}" alt="" aria-hidden="true" />
-            </button>
-          `
-        )
-        .join("");
+	render() {
+		const buttons = TOOLS.map(
+			(tool) => `
+        <button class="palette-tool-btn" type="button" data-tool="${tool.id}"
+          aria-pressed="false" title="${tool.label} (${tool.shortcut})"
+          aria-label="${tool.label}">
+          <span>${tool.icon}</span>
+        </button>
+      `,
+		).join("");
 
-      return `
-        <section class="palette-group">
-          <h4>${group.title}</h4>
-          <div class="palette-tools">${buttons}</div>
-        </section>
-      `;
-    }).join("");
+		const shortcuts = TOOLS.map(
+			(tool) => `<span><kbd>${tool.shortcut}</kbd> ${tool.label}</span>`,
+		).join("");
 
-    this.innerHTML = `
+		this.innerHTML = `
       <aside class="mg-panel palette-panel">
         <header>Tools</header>
         <div class="content palette-content">
-          ${sections}
-          <section class="palette-shortcuts">
-            <h4>Shortcuts</h4>
-            <p><kbd>Delete</kbd> remove selected node</p>
-            <p><kbd>Cmd/Ctrl+D</kbd> duplicate selected node</p>
-            <p><kbd>Cmd/Ctrl+Z</kbd> / <kbd>Shift+Cmd/Ctrl+Z</kbd> undo/redo</p>
-            <p><kbd>Shift+Click</kbd> add/remove node in selection</p>
-            <p>Drag empty canvas to marquee-select nodes</p>
-            <p><kbd>Esc</kbd> reset tool or clear selection</p>
-          </section>
+          <div style="display:flex;flex-direction:column;gap:var(--space-1)">
+            ${buttons}
+          </div>
+          <div class="palette-shortcut-hint">
+            ${shortcuts}
+          </div>
         </div>
       </aside>
     `;
-  }
+	}
 }
 
 customElements.define("left-tool-palette", LeftToolPalette);
diff --git a/js/components/top-toolbar.js b/js/components/top-toolbar.js
index aa79cd8..72f129a 100644
--- a/js/components/top-toolbar.js
+++ b/js/components/top-toolbar.js
@@ -1,322 +1,309 @@
-import { clampZoom, GRAPH_LIMITS } from "../core/constants.js";
+import { RETRIEVAL_STEPS } from "../core/constants.js";
 import { EVENTS } from "../core/event-constants.js";
 import { publish, subscribe } from "../core/pan.js";
-import { mockAgentRuntime } from "../runtime/mock-agent-runtime.js";
 import { graphStore } from "../store/graph-store.js";
-import { persistenceStore } from "../store/persistence-store.js";
 import { uiStore } from "../store/ui-store.js";
 
 class TopToolbar extends HTMLElement {
-  #dispose = [];
-  #activeTool = "select";
-  #zoom = 1;
-  #running = false;
-  #canUndo = false;
-  #canRedo = false;
-  #autosaveEnabled = true;
-
-  connectedCallback() {
-    const history = graphStore.getHistoryState();
-    this.#canUndo = history.canUndo;
-    this.#canRedo = history.canRedo;
-    this.#autosaveEnabled = persistenceStore.isAutosaveEnabled();
-
-    this.render();
-    this.#bind();
-
-    this.#dispose.push(
-      subscribe(EVENTS.TOOLBAR_TOOL_CHANGED, ({ payload }) => {
-        this.#activeTool = payload?.tool ?? "select";
-        this.#syncPressedState();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_VIEWPORT_CHANGED, ({ payload }) => {
-        const nextZoom = Number(payload?.zoom ?? this.#zoom);
-        if (!Number.isFinite(nextZoom)) return;
-        this.#zoom = clampZoom(nextZoom);
-        this.#syncZoom();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_HISTORY_CHANGED, ({ payload }) => {
-        this.#canUndo = Boolean(payload?.canUndo);
-        this.#canRedo = Boolean(payload?.canRedo);
-        this.#syncHistoryButtons();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_AUTOSAVE_STATE_CHANGED, ({ payload }) => {
-        this.#autosaveEnabled = Boolean(payload?.enabled);
-        this.#syncAutosaveToggle();
-      })
-    );
-
-    this.#syncPressedState();
-    this.#syncZoom();
-    this.#syncRunButtons();
-    this.#syncHistoryButtons();
-    this.#syncAutosaveToggle();
-  }
-
-  disconnectedCallback() {
-    this.#dispose.forEach((run) => run());
-    this.#dispose = [];
-  }
-
-  #bind() {
-    this.querySelectorAll("[data-tool]").forEach((button) => {
-      button.addEventListener("click", () => {
-        uiStore.setTool(button.dataset.tool ?? "select");
-      });
-    });
-
-    this.querySelector("[data-action='run-all']")?.addEventListener("click", () =>
-      this.#runRuntimeAction(() => {
-        publish(EVENTS.RUNTIME_ALL_RUN_REQUESTED, {
-          trigger: "toolbar_run_all",
-          origin: "top-toolbar"
-        });
-        return mockAgentRuntime.runAll({ trigger: "toolbar_run_all" });
-      })
-    );
-
-    this.querySelector("[data-action='summarize-subtree']")?.addEventListener("click", () =>
-      this.#runRuntimeAction(() => this.#summarizeSelectedSubtree())
-    );
-
-    this.querySelector("[data-action='save']")?.addEventListener("click", () => this.#onSave());
-    this.querySelector("[data-action='load']")?.addEventListener("click", () => this.#onLoadRequest());
-
-    this.querySelector("[data-action='undo']")?.addEventListener("click", () => this.#undo());
-    this.querySelector("[data-action='redo']")?.addEventListener("click", () => this.#redo());
-
-    this.querySelector("[data-action='toggle-autosave']")?.addEventListener("click", () => {
-      persistenceStore.setAutosaveEnabled(!this.#autosaveEnabled);
-    });
-
-    this.querySelector("[data-action='zoom-in']")?.addEventListener("click", () =>
-      this.#changeZoom(GRAPH_LIMITS.zoomInFactor)
-    );
-    this.querySelector("[data-action='zoom-out']")?.addEventListener("click", () =>
-      this.#changeZoom(GRAPH_LIMITS.zoomOutFactor)
-    );
-    this.querySelector("[data-action='zoom-reset']")?.addEventListener("click", () =>
-      uiStore.setViewportZoom(1)
-    );
-
-    this.querySelector("[data-role='load-input']")?.addEventListener("change", (event) =>
-      this.#onLoadFile(event)
-    );
-  }
-
-  #changeZoom(factor) {
-    const nextZoom = clampZoom(this.#zoom * factor);
-    uiStore.setViewportZoom(nextZoom);
-  }
-
-  #undo() {
-    if (!this.#canUndo) return;
-    publish(EVENTS.GRAPH_DOCUMENT_UNDO_REQUESTED, { origin: "top-toolbar" });
-    publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-      level: "info",
-      message: "Undo applied"
-    });
-  }
-
-  #redo() {
-    if (!this.#canRedo) return;
-    publish(EVENTS.GRAPH_DOCUMENT_REDO_REQUESTED, { origin: "top-toolbar" });
-    publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-      level: "info",
-      message: "Redo applied"
-    });
-  }
-
-  async #runRuntimeAction(run) {
-    if (this.#running) return;
-
-    this.#running = true;
-    this.#syncRunButtons();
-
-    try {
-      await run();
-    } catch (error) {
-      publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-        level: "error",
-        message: `Runtime action failed: ${error?.message ?? "Unknown error"}`
-      });
-    } finally {
-      this.#running = false;
-      this.#syncRunButtons();
-    }
-  }
-
-  async #summarizeSelectedSubtree() {
-    const selectedNodeId = graphStore.getSelectedNodeId();
-    if (!selectedNodeId) {
-      publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-        level: "warn",
-        message: "Select an agent node to run subtree summary"
-      });
-      return;
-    }
-
-    const selectedNode = graphStore.getNode(selectedNodeId);
-    if (!selectedNode || selectedNode.type !== "agent") {
-      publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-        level: "warn",
-        message: "Subtree summary is available for agent nodes only"
-      });
-      return;
-    }
-
-    publish(EVENTS.RUNTIME_SUBTREE_RUN_REQUESTED, {
-      nodeId: selectedNodeId,
-      trigger: "toolbar_subtree",
-      origin: "top-toolbar"
-    });
-    await mockAgentRuntime.runSubtree(selectedNodeId, { trigger: "toolbar_subtree" });
-  }
-
-  #syncPressedState() {
-    this.querySelectorAll("[data-tool]").forEach((button) => {
-      const pressed = button.dataset.tool === this.#activeTool;
-      button.setAttribute("aria-pressed", pressed ? "true" : "false");
-    });
-  }
-
-  #syncZoom() {
-    const zoomLabel = this.querySelector("[data-role='zoom-label']");
-    if (!zoomLabel) return;
-    zoomLabel.textContent = `${Math.round(this.#zoom * 100)}%`;
-  }
-
-  #syncRunButtons() {
-    this.querySelectorAll("[data-action='run-all'], [data-action='summarize-subtree']").forEach((button) => {
-      button.disabled = this.#running;
-    });
-  }
-
-  #syncHistoryButtons() {
-    const undoButton = this.querySelector("[data-action='undo']");
-    const redoButton = this.querySelector("[data-action='redo']");
-    if (undoButton) undoButton.disabled = !this.#canUndo;
-    if (redoButton) redoButton.disabled = !this.#canRedo;
-  }
-
-  #syncAutosaveToggle() {
-    const toggle = this.querySelector("[data-action='toggle-autosave']");
-    if (!toggle) return;
-    toggle.setAttribute("aria-pressed", this.#autosaveEnabled ? "true" : "false");
-    toggle.textContent = this.#autosaveEnabled ? "Autosave On" : "Autosave Off";
-  }
-
-  #onSave() {
-    const snapshot = graphStore.getDocument();
-    if (!snapshot) return;
-
-    publish(EVENTS.GRAPH_DOCUMENT_SAVE_REQUESTED, { origin: "top-toolbar" });
-
-    const blob = new Blob([JSON.stringify(snapshot, null, 2)], { type: "application/json" });
-    const url = URL.createObjectURL(blob);
-    const anchor = document.createElement("a");
-    const safeTitle = String(snapshot.title ?? "mindgraph")
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, "-")
-      .replace(/^-+|-+$/g, "");
-
-    anchor.href = url;
-    anchor.download = `${safeTitle || "mindgraph"}-${Date.now()}.json`;
-    document.body.append(anchor);
-    anchor.click();
-    anchor.remove();
-    URL.revokeObjectURL(url);
-
-    publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-      level: "info",
-      message: "Graph exported as JSON"
-    });
-  }
-
-  #onLoadRequest() {
-    const input = this.querySelector("[data-role='load-input']");
-    if (!input) return;
-    input.value = "";
-    input.click();
-  }
-
-  async #onLoadFile(event) {
-    const fileInput = event.target;
-    const file = fileInput?.files?.[0];
-    if (!file) return;
-
-    try {
-      const text = await file.text();
-      const parsed = JSON.parse(text);
-      publish(EVENTS.GRAPH_DOCUMENT_LOAD_REQUESTED, {
-        document: parsed,
-        reason: "toolbar_load_file",
-        origin: "top-toolbar"
-      });
-      publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-        level: "info",
-        message: `Loaded graph from ${file.name}`
-      });
-    } catch (error) {
-      publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-        level: "error",
-        message: `Failed to load document: ${error?.message ?? "Unknown error"}`
-      });
-    }
-  }
-
-  render() {
-    this.innerHTML = `
+	#dispose = [];
+	#retrievalRunning = false;
+	#retrievalStep = 0;
+	#canUndo = false;
+	#canRedo = false;
+
+	connectedCallback() {
+		const history = graphStore.getHistoryState();
+		this.#canUndo = history.canUndo;
+		this.#canRedo = history.canRedo;
+
+		this.render();
+		this.#bind();
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_HISTORY_CHANGED, ({ payload }) => {
+				this.#canUndo = Boolean(payload?.canUndo);
+				this.#canRedo = Boolean(payload?.canRedo);
+				this.#syncHistoryButtons();
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.UI_RUNTIME_STATE_CHANGED, ({ payload }) => {
+				const rt = payload?.runtime;
+				if (!rt) return;
+				this.#retrievalRunning = Boolean(rt.retrievalRunning);
+				this.#retrievalStep = rt.retrievalStep ?? 0;
+				this.#syncRetrievalState();
+			}),
+		);
+
+		this.#syncHistoryButtons();
+	}
+
+	disconnectedCallback() {
+		this.#dispose.forEach((run) => run());
+		this.#dispose = [];
+	}
+
+	#bind() {
+		// Memory input
+		const memoryInput = this.querySelector('[data-role="memory-input"]');
+		memoryInput?.addEventListener("keydown", (event) => {
+			if (event.key !== "Enter" || !memoryInput.value.trim()) return;
+			event.preventDefault();
+			const content = memoryInput.value.trim();
+			memoryInput.value = "";
+			publish(EVENTS.CAR_MEMORY_SUBMIT_REQUESTED, {
+				content,
+				origin: "top-toolbar",
+			});
+			publish(EVENTS.ACTIVITY_LOG_APPENDED, {
+				level: "info",
+				message: `Memory submitted: ${content.slice(0, 40)}...`,
+			});
+		});
+
+		// Query input
+		const queryInput = this.querySelector('[data-role="query-input"]');
+		queryInput?.addEventListener("keydown", (event) => {
+			if (event.key !== "Enter" || !queryInput.value.trim()) return;
+			event.preventDefault();
+			const query = queryInput.value.trim();
+			publish(EVENTS.CAR_QUERY_SUBMIT_REQUESTED, {
+				query,
+				origin: "top-toolbar",
+			});
+			publish(EVENTS.ACTIVITY_LOG_APPENDED, {
+				level: "info",
+				message: `Query submitted: ${query.slice(0, 40)}...`,
+			});
+		});
+
+		// Play / Step / Reset
+		this.querySelector('[data-action="play"]')?.addEventListener(
+			"click",
+			() => {
+				if (this.#retrievalRunning) return;
+				const query = this.querySelector(
+					'[data-role="query-input"]',
+				)?.value?.trim();
+				if (!query) return;
+				uiStore.setRetrievalMode("play");
+				publish(EVENTS.CAR_QUERY_SUBMIT_REQUESTED, {
+					query,
+					mode: "play",
+					origin: "top-toolbar",
+				});
+			},
+		);
+
+		this.querySelector('[data-action="step"]')?.addEventListener(
+			"click",
+			() => {
+				uiStore.setRetrievalMode("step");
+				const query = this.querySelector(
+					'[data-role="query-input"]',
+				)?.value?.trim();
+				if (!query) return;
+				if (!this.#retrievalRunning) {
+					publish(EVENTS.CAR_QUERY_SUBMIT_REQUESTED, {
+						query,
+						mode: "step",
+						origin: "top-toolbar",
+					});
+				}
+			},
+		);
+
+		this.querySelector('[data-action="reset"]')?.addEventListener(
+			"click",
+			() => {
+				publish(EVENTS.CAR_RETRIEVAL_RESET, { origin: "top-toolbar" });
+			},
+		);
+
+		// Undo / Redo
+		this.querySelector('[data-action="undo"]')?.addEventListener(
+			"click",
+			() => {
+				if (!this.#canUndo) return;
+				publish(EVENTS.GRAPH_DOCUMENT_UNDO_REQUESTED, {
+					origin: "top-toolbar",
+				});
+			},
+		);
+
+		this.querySelector('[data-action="redo"]')?.addEventListener(
+			"click",
+			() => {
+				if (!this.#canRedo) return;
+				publish(EVENTS.GRAPH_DOCUMENT_REDO_REQUESTED, {
+					origin: "top-toolbar",
+				});
+			},
+		);
+
+		// Save / Load
+		this.querySelector('[data-action="save"]')?.addEventListener("click", () =>
+			this.#onSave(),
+		);
+		this.querySelector('[data-action="load"]')?.addEventListener("click", () =>
+			this.#onLoadRequest(),
+		);
+		this.querySelector('[data-role="load-input"]')?.addEventListener(
+			"change",
+			(e) => this.#onLoadFile(e),
+		);
+
+		// Global keyboard shortcuts
+		document.addEventListener("keydown", (event) => {
+			if (
+				event.key === "m" &&
+				!event.ctrlKey &&
+				!event.metaKey &&
+				document.activeElement?.tagName !== "INPUT"
+			) {
+				event.preventDefault();
+				memoryInput?.focus();
+			}
+		});
+	}
+
+	#syncHistoryButtons() {
+		const undoBtn = this.querySelector('[data-action="undo"]');
+		const redoBtn = this.querySelector('[data-action="redo"]');
+		if (undoBtn) undoBtn.disabled = !this.#canUndo;
+		if (redoBtn) redoBtn.disabled = !this.#canRedo;
+	}
+
+	#syncRetrievalState() {
+		const playBtn = this.querySelector('[data-action="play"]');
+		const stepBtn = this.querySelector('[data-action="step"]');
+		const resetBtn = this.querySelector('[data-action="reset"]');
+		if (playBtn) playBtn.disabled = this.#retrievalRunning;
+		if (stepBtn) stepBtn.disabled = false;
+		if (resetBtn)
+			resetBtn.disabled = !this.#retrievalRunning && this.#retrievalStep === 0;
+
+		// Update step dots
+		const dots = this.querySelectorAll(".step-dot");
+		dots.forEach((dot, i) => {
+			const step = i + 1;
+			dot.classList.toggle("done", step < this.#retrievalStep);
+			dot.classList.toggle("active", step === this.#retrievalStep);
+		});
+	}
+
+	#onSave() {
+		const snapshot = graphStore.getDocument();
+		if (!snapshot) return;
+
+		publish(EVENTS.GRAPH_DOCUMENT_SAVE_REQUESTED, { origin: "top-toolbar" });
+
+		const blob = new Blob([JSON.stringify(snapshot, null, 2)], {
+			type: "application/json",
+		});
+		const url = URL.createObjectURL(blob);
+		const anchor = document.createElement("a");
+		const safeTitle = String(snapshot.title ?? "car-brain")
+			.toLowerCase()
+			.replace(/[^a-z0-9]+/g, "-")
+			.replace(/^-+|-+$/g, "");
+
+		anchor.href = url;
+		anchor.download = `${safeTitle || "car-brain"}-${Date.now()}.json`;
+		document.body.append(anchor);
+		anchor.click();
+		anchor.remove();
+		URL.revokeObjectURL(url);
+
+		publish(EVENTS.ACTIVITY_LOG_APPENDED, {
+			level: "info",
+			message: "Brain exported as JSON",
+		});
+	}
+
+	#onLoadRequest() {
+		const input = this.querySelector('[data-role="load-input"]');
+		if (!input) return;
+		input.value = "";
+		input.click();
+	}
+
+	async #onLoadFile(event) {
+		const file = event.target?.files?.[0];
+		if (!file) return;
+
+		try {
+			const text = await file.text();
+			const parsed = JSON.parse(text);
+			publish(EVENTS.GRAPH_DOCUMENT_LOAD_REQUESTED, {
+				document: parsed,
+				reason: "toolbar_load_file",
+				origin: "top-toolbar",
+			});
+			publish(EVENTS.ACTIVITY_LOG_APPENDED, {
+				level: "info",
+				message: `Loaded brain from ${file.name}`,
+			});
+		} catch (error) {
+			publish(EVENTS.ACTIVITY_LOG_APPENDED, {
+				level: "error",
+				message: `Failed to load: ${error?.message ?? "Unknown error"}`,
+			});
+		}
+	}
+
+	render() {
+		const stepDots = RETRIEVAL_STEPS.map(
+			(_, i) =>
+				`<div class="step-dot" title="Step ${i + 1}: ${RETRIEVAL_STEPS[i].name}"></div>`,
+		).join("");
+
+		this.innerHTML = `
       <section class="mg-panel top-toolbar-panel">
         <div class="top-toolbar-content">
-          <div class="toolbar-brand">
-            <div class="brand-glyph" aria-hidden="true">MG</div>
-            <div class="brand-text">
-              <strong>MindGraph AI</strong>
-              <span>Visual Agent Graph Workbench</span>
+          <div class="toolbar-section" style="border-left:0">
+            <div class="toolbar-brand">
+              <div class="brand-glyph" aria-hidden="true">CB</div>
+              <div class="brand-text">
+                <strong>CAR Brain</strong>
+                <span>Memory Simulator</span>
+              </div>
             </div>
           </div>
 
-          <div class="toolbar-actions toolbar-action-group">
-            <button data-action="run-all" type="button">Run All</button>
-            <button data-action="summarize-subtree" type="button">Run Subtree</button>
+          <div class="toolbar-section">
+            <input class="toolbar-input memory-input" type="text" data-role="memory-input"
+              placeholder="Add a new memory chunk..." aria-label="Memory input" />
           </div>
 
-          <div class="toolbar-actions toolbar-action-group">
-            <button data-action="undo" type="button" title="Undo (Cmd/Ctrl+Z)">Undo</button>
-            <button data-action="redo" type="button" title="Redo (Shift+Cmd/Ctrl+Z)">Redo</button>
+          <div class="toolbar-section">
+            <input class="toolbar-input query-input" type="text" data-role="query-input"
+              placeholder="Ask the brain a question..." aria-label="Query input" />
           </div>
 
-          <div class="toolbar-actions toolbar-action-group">
-            <button data-tool="create:note" type="button" aria-pressed="false">Add Node</button>
-            <button data-tool="connect" type="button" aria-pressed="false">Add Edge</button>
+          <div class="toolbar-section">
+            <button class="toolbar-btn" data-action="play" type="button" title="Play retrieval">Play</button>
+            <button class="toolbar-btn" data-action="step" type="button" title="Step through retrieval">Step</button>
+            <button class="toolbar-btn" data-action="reset" type="button" title="Reset retrieval" disabled>Reset</button>
+            <div class="step-dots">${stepDots}</div>
           </div>
 
-          <div class="toolbar-actions toolbar-action-group">
-            <button data-action="save" type="button">Save JSON</button>
-            <button data-action="load" type="button">Load JSON</button>
-            <button data-action="toggle-autosave" type="button" aria-pressed="true">Autosave On</button>
-            <input data-role="load-input" name="graph-load-file" type="file" accept="application/json,.json" hidden />
+          <div class="toolbar-section">
+            <button class="toolbar-btn" data-action="undo" type="button" title="Undo (Cmd+Z)">Undo</button>
+            <button class="toolbar-btn" data-action="redo" type="button" title="Redo (Shift+Cmd+Z)">Redo</button>
           </div>
 
-          <div class="toolbar-actions toolbar-action-group toolbar-zoom">
-            <button data-action="zoom-out" type="button" aria-label="Zoom out">-</button>
-            <button data-action="zoom-reset" type="button" data-role="zoom-label">100%</button>
-            <button data-action="zoom-in" type="button" aria-label="Zoom in">+</button>
+          <div class="toolbar-section">
+            <button class="toolbar-btn" data-action="save" type="button">Export</button>
+            <button class="toolbar-btn" data-action="load" type="button">Import</button>
+            <input data-role="load-input" type="file" accept="application/json,.json" hidden />
           </div>
         </div>
       </section>
     `;
-  }
+	}
 }
 
 customElements.define("top-toolbar", TopToolbar);

From 66ed2f79f7c131f32c53943c257b8637d9f14df2 Mon Sep 17 00:00:00 2001
From: Amit Kolton <amit.ko@thing02.com>
Date: Fri, 3 Apr 2026 15:43:17 +0300
Subject: [PATCH 08/13] feat: CAR runtime engine with 13-step retrieval and
 scoring
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add relevance-scorer with Ebbinghaus decay curve and six weighted
factors. Add question-generator with L1-L5 template-based generation.
Add consolidation-engine for T1→T2→T3 tier promotion. Add
contradiction-detector with keyword-based conflict detection. Add
cluster-manager for auto-clustering by shared tags/entities. Add
car-engine orchestrating the full 13-step retrieval sequence with
play and step-through modes. Add retrieval-animator for visual
coordination during retrieval.
---
 js/runtime/car-engine.js             | 613 +++++++++++++++++++++++++++
 js/runtime/cluster-manager.js        | 154 +++++++
 js/runtime/consolidation-engine.js   | 186 ++++++++
 js/runtime/contradiction-detector.js | 114 +++++
 js/runtime/question-generator.js     |  98 +++++
 js/runtime/relevance-scorer.js       | 108 +++++
 js/runtime/retrieval-animator.js     | 122 ++++++
 7 files changed, 1395 insertions(+)
 create mode 100644 js/runtime/car-engine.js
 create mode 100644 js/runtime/cluster-manager.js
 create mode 100644 js/runtime/consolidation-engine.js
 create mode 100644 js/runtime/contradiction-detector.js
 create mode 100644 js/runtime/question-generator.js
 create mode 100644 js/runtime/relevance-scorer.js
 create mode 100644 js/runtime/retrieval-animator.js

diff --git a/js/runtime/car-engine.js b/js/runtime/car-engine.js
new file mode 100644
index 0000000..e384c66
--- /dev/null
+++ b/js/runtime/car-engine.js
@@ -0,0 +1,613 @@
+import { RETRIEVAL_STEPS } from "../core/constants.js";
+import { EVENTS } from "../core/event-constants.js";
+import { publish } from "../core/pan.js";
+import { nowIso } from "../core/utils.js";
+import { graphStore } from "../store/graph-store.js";
+import {
+	computeClusters,
+	createClusterEdges,
+	createClusterNode,
+	findClusterNeighbors,
+} from "./cluster-manager.js";
+import {
+	createT2Summary,
+	findPromotionCandidates,
+} from "./consolidation-engine.js";
+import {
+	createContradictionEdge,
+	detectContradictions,
+} from "./contradiction-detector.js";
+import { decomposeQuery, generateQuestions } from "./question-generator.js";
+import { rankChunksByRelevance } from "./relevance-scorer.js";
+
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/**
+ * CAR Engine — orchestrates the 13-step retrieval sequence.
+ */
+class CAREngine {
+	#running = false;
+	#stepMode = false;
+	#resolveStep = null;
+
+	get isRunning() {
+		return this.#running;
+	}
+
+	/**
+	 * Submit a new memory chunk.
+	 */
+	async ingestMemory(content) {
+		const position = {
+			x: (Math.random() - 0.5) * 200,
+			y: (Math.random() - 0.5) * 100,
+			z: -200,
+		};
+
+		publish(EVENTS.CAR_MEMORY_PROCESSING, { content, origin: "car-engine" });
+
+		// Create the chunk node
+		const node = graphStore.addNode({
+			type: "chunk",
+			label: content.slice(0, 50) + (content.length > 50 ? "..." : ""),
+			description: content,
+			position,
+			data: {
+				content,
+				tier: 1,
+				session_id: `session_${Date.now().toString(36)}`,
+				source: "user_stated",
+				source_reliability: "high",
+				participants: [],
+				emotional_tone: "neutral",
+				emotional_intensity: 0,
+				stakes_level: "low",
+				topic_tags: extractTags(content),
+				entity_tags: extractEntities(content),
+				decision_made: false,
+				action_items: [],
+				status: "open",
+				preceding_context_id: null,
+				following_context_id: null,
+				access_count: 1,
+				last_accessed: nowIso(),
+				retrieval_cues: [],
+				amendments: [],
+				linked_chunks: [],
+				generated_questions: [],
+			},
+		});
+
+		if (!node) return null;
+
+		publish(EVENTS.CAR_MEMORY_CREATED, {
+			nodeId: node.id,
+			node,
+			origin: "car-engine",
+		});
+
+		// Generate questions
+		const questions = generateQuestions(node);
+		const questionIds = [];
+		for (const q of questions) {
+			const qNode = graphStore.addNode(q);
+			if (qNode) {
+				questionIds.push(qNode.id);
+				graphStore.addEdge({
+					type: "answers",
+					source: qNode.id,
+					target: node.id,
+					label: "answers",
+				});
+			}
+		}
+
+		publish(EVENTS.CAR_QUESTIONS_GENERATED, {
+			chunkId: node.id,
+			questions: questions.map((q) => q.data),
+			origin: "car-engine",
+		});
+
+		// Auto-link to existing chunks with shared tags
+		this.#autoLink(node);
+
+		// Check for contradictions
+		this.#checkContradictions();
+
+		// Auto-cluster
+		this.#autoCluster();
+
+		// Select the new node
+		graphStore.setSelection([node.id]);
+
+		publish(EVENTS.ACTIVITY_LOG_APPENDED, {
+			level: "info",
+			message: `Chunk created: "${node.label}" with ${questionIds.length} questions`,
+		});
+
+		return node;
+	}
+
+	/**
+	 * Run the 13-step retrieval sequence for a query.
+	 */
+	async runRetrieval(query, { mode = "play" } = {}) {
+		if (this.#running) return null;
+
+		this.#running = true;
+		this.#stepMode = mode === "step";
+
+		publish(EVENTS.CAR_RETRIEVAL_STARTED, {
+			query,
+			mode,
+			origin: "car-engine",
+		});
+
+		const doc = graphStore.getDocument();
+		const allChunks = (doc?.nodes ?? []).filter((n) => n.type === "chunk");
+		let activatedChunks = [];
+		let subQuestions = [];
+		let clusters = [];
+		let confidence = 0;
+		let answer = "";
+
+		try {
+			for (const step of RETRIEVAL_STEPS) {
+				publish(EVENTS.CAR_RETRIEVAL_STEP_STARTED, {
+					step: step.id,
+					name: step.name,
+					origin: "car-engine",
+				});
+
+				if (this.#stepMode) {
+					await this.#waitForNextStep();
+				} else {
+					await sleep(step.duration * 1000);
+				}
+
+				// Execute step logic
+				switch (step.id) {
+					case 1: // Session Primer
+						// Touch recent chunks to boost recency
+						for (const chunk of allChunks.slice(0, 5)) {
+							graphStore.recordAccess(chunk.id);
+						}
+						break;
+
+					case 2: // Context Construction
+						// Create query node
+						break;
+
+					case 3: // Question Decomposition
+						subQuestions = decomposeQuery(query);
+						break;
+
+					case 4: // Metamemory Check
+						// Inventory check (simplified)
+						break;
+
+					case 5: {
+						// Multi-Query Retrieval R1
+						const ranked = rankChunksByRelevance(allChunks);
+						// Simple keyword matching for retrieval
+						const queryWords = query.toLowerCase().split(/\s+/);
+						activatedChunks = ranked
+							.filter(({ node }) => {
+								const content = (
+									(node.data?.content ?? "") +
+									" " +
+									(node.data?.topic_tags ?? []).join(" ") +
+									" " +
+									(node.data?.entity_tags ?? []).join(" ") +
+									" " +
+									(node.label ?? "")
+								).toLowerCase();
+								return queryWords.some((w) => content.includes(w));
+							})
+							.slice(0, 9); // Top 3 per sub-question (3 sub-Qs)
+
+						// Record access on activated chunks
+						for (const { nodeId } of activatedChunks) {
+							graphStore.recordAccess(nodeId);
+						}
+						break;
+					}
+
+					case 6: // Cluster Formation
+						clusters = computeClusters(activatedChunks.map((a) => a.node));
+						break;
+
+					case 7: {
+						// Cluster Expansion R2
+						const expandedDoc = graphStore.getDocument();
+						const allNodes = expandedDoc?.nodes ?? [];
+						const allEdges = expandedDoc?.edges ?? [];
+						for (const cluster of clusters) {
+							const neighbors = findClusterNeighbors(
+								cluster,
+								allNodes,
+								allEdges,
+							);
+							for (const nId of neighbors.slice(0, 3)) {
+								if (!activatedChunks.find((a) => a.nodeId === nId)) {
+									const node = graphStore.getNode(nId);
+									if (node) {
+										activatedChunks.push({
+											nodeId: nId,
+											node,
+											relevance: 0.5,
+										});
+									}
+								}
+							}
+						}
+						break;
+					}
+
+					case 8: // Tiered Retrieval
+						// Camera would pull back here (handled by animator)
+						break;
+
+					case 9: {
+						// Interference Check
+						const activeNodes = activatedChunks.map((a) => a.node);
+						const contradictions = detectContradictions(activeNodes);
+						for (const c of contradictions) {
+							publish(EVENTS.CAR_CONTRADICTION_DETECTED, {
+								...c,
+								origin: "car-engine",
+							});
+						}
+						break;
+					}
+
+					case 10: {
+						// Confidence Grading
+						const totalChunks = allChunks.length;
+						const foundCount = activatedChunks.length;
+						confidence =
+							totalChunks > 0
+								? Math.min(1.0, foundCount / Math.max(totalChunks * 0.3, 1))
+								: 0;
+						// Adjust confidence based on sub-question coverage
+						if (subQuestions.length > 0) {
+							const covered = subQuestions.filter((sq) =>
+								activatedChunks.some((a) => {
+									const content = (a.node.data?.content ?? "").toLowerCase();
+									return sq
+										.toLowerCase()
+										.split(/\s+/)
+										.some((w) => content.includes(w));
+								}),
+							).length;
+							confidence = (confidence + covered / subQuestions.length) / 2;
+						}
+						break;
+					}
+
+					case 11: // Thinking Profile
+						break;
+
+					case 12: {
+						// Synthesis + Response
+						if (activatedChunks.length === 0) {
+							answer =
+								"No relevant memories found. Try adding more context, or rephrase.";
+							confidence = 0;
+						} else {
+							const sources = activatedChunks
+								.slice(0, 5)
+								.map((a) => a.node.data?.content ?? a.node.label)
+								.filter(Boolean);
+							answer = `Based on ${activatedChunks.length} retrieved memories:\n\n${sources.map((s, i) => `${i + 1}. ${s}`).join("\n")}`;
+						}
+						break;
+					}
+
+					case 13: // Post-Retrieval Update
+						// Access counts already updated in step 5
+						break;
+				}
+
+				publish(EVENTS.CAR_RETRIEVAL_STEP_COMPLETED, {
+					step: step.id,
+					name: step.name,
+					detail: getStepDetail(step.id, {
+						activatedChunks,
+						subQuestions,
+						confidence,
+					}),
+					origin: "car-engine",
+				});
+			}
+
+			const result = {
+				query,
+				answer,
+				confidence,
+				sources: activatedChunks.map((a) => ({
+					nodeId: a.nodeId,
+					label: a.node.label,
+					relevance: a.relevance,
+				})),
+				subQuestions,
+				at: nowIso(),
+			};
+
+			publish(EVENTS.CAR_RETRIEVAL_COMPLETED, { result, origin: "car-engine" });
+			return result;
+		} catch (error) {
+			publish(EVENTS.CAR_RETRIEVAL_FAILED, {
+				message: error?.message ?? "Unknown error",
+				origin: "car-engine",
+			});
+			return null;
+		} finally {
+			this.#running = false;
+			this.#stepMode = false;
+		}
+	}
+
+	/**
+	 * Advance one step in step mode.
+	 */
+	advanceStep() {
+		if (this.#resolveStep) {
+			this.#resolveStep();
+			this.#resolveStep = null;
+		}
+	}
+
+	/* ── Private helpers ── */
+
+	async #waitForNextStep() {
+		return new Promise((resolve) => {
+			this.#resolveStep = resolve;
+		});
+	}
+
+	#autoLink(newNode) {
+		const doc = graphStore.getDocument();
+		const allChunks = (doc?.nodes ?? []).filter(
+			(n) => n.type === "chunk" && n.id !== newNode.id,
+		);
+
+		const newTags = new Set([
+			...(newNode.data?.topic_tags ?? []),
+			...(newNode.data?.entity_tags ?? []),
+		]);
+
+		for (const chunk of allChunks) {
+			const chunkTags = [
+				...(chunk.data?.topic_tags ?? []),
+				...(chunk.data?.entity_tags ?? []),
+			];
+			const shared = chunkTags.filter((t) => newTags.has(t));
+
+			if (shared.length >= 1) {
+				graphStore.addEdge({
+					type: "linked_to",
+					source: newNode.id,
+					target: chunk.id,
+					label: "linked_to",
+				});
+
+				// Update linked_chunks on both nodes
+				const existingLinks = chunk.data?.linked_chunks ?? [];
+				if (!existingLinks.includes(newNode.id)) {
+					graphStore.updateNode(chunk.id, {
+						data: {
+							...chunk.data,
+							linked_chunks: [...existingLinks, newNode.id],
+						},
+					});
+				}
+			}
+		}
+	}
+
+	#checkContradictions() {
+		const doc = graphStore.getDocument();
+		const allChunks = (doc?.nodes ?? []).filter((n) => n.type === "chunk");
+		const existingEdges = (doc?.edges ?? []).filter(
+			(e) => e.type === "contradicts",
+		);
+		const existingPairs = new Set(
+			existingEdges.map((e) => [e.source, e.target].sort().join(",")),
+		);
+
+		const contradictions = detectContradictions(allChunks);
+		for (const c of contradictions) {
+			const key = [c.nodeA, c.nodeB].sort().join(",");
+			if (!existingPairs.has(key)) {
+				const edge = createContradictionEdge(c);
+				graphStore.addEdge(edge);
+				publish(EVENTS.CAR_CONTRADICTION_DETECTED, {
+					...c,
+					origin: "car-engine",
+				});
+			}
+		}
+	}
+
+	#autoCluster() {
+		const doc = graphStore.getDocument();
+		const allChunks = (doc?.nodes ?? []).filter(
+			(n) => n.type === "chunk" && n.data?.tier === 1,
+		);
+
+		const clusters = computeClusters(allChunks);
+		for (const cluster of clusters) {
+			// Check if a similar cluster already exists
+			const existingClusters = graphStore.getClusters();
+			const exists = existingClusters.some((ec) => {
+				const overlap = (ec.member_ids ?? []).filter((id) =>
+					cluster.member_ids.includes(id),
+				);
+				return overlap.length >= cluster.member_ids.length * 0.5;
+			});
+
+			if (!exists && cluster.member_ids.length >= 2) {
+				const clusterNode = createClusterNode(cluster);
+				graphStore.addNode(clusterNode);
+				graphStore.addCluster(cluster);
+
+				const edges = createClusterEdges(cluster);
+				for (const edge of edges) {
+					graphStore.addEdge(edge);
+				}
+
+				publish(EVENTS.CAR_CLUSTER_FORMED, {
+					cluster,
+					origin: "car-engine",
+				});
+			}
+		}
+	}
+
+	/**
+	 * Run consolidation pass (can be triggered manually or on timer).
+	 */
+	async runConsolidation() {
+		publish(EVENTS.CAR_CONSOLIDATION_STARTED, { origin: "car-engine" });
+
+		const doc = graphStore.getDocument();
+		const t1Chunks = (doc?.nodes ?? []).filter(
+			(n) => n.type === "chunk" && n.data?.tier === 1,
+		);
+
+		const candidates = findPromotionCandidates(t1Chunks);
+		for (const candidate of candidates) {
+			const summary = createT2Summary(candidate.chunks, candidate.sharedTags);
+			const node = graphStore.addNode(summary);
+
+			if (node) {
+				// Create promotes_to edges
+				for (const chunk of candidate.chunks) {
+					graphStore.addEdge({
+						type: "promotes_to",
+						source: chunk.id,
+						target: node.id,
+						label: "promotes_to",
+					});
+				}
+
+				publish(EVENTS.CAR_CONSOLIDATION_PROMOTED, {
+					nodeId: node.id,
+					fromTier: 1,
+					toTier: 2,
+					sourceCount: candidate.chunks.length,
+					origin: "car-engine",
+				});
+			}
+		}
+
+		publish(EVENTS.CAR_CONSOLIDATION_COMPLETED, { origin: "car-engine" });
+	}
+}
+
+/* ── Simple tag/entity extraction (heuristic, AI would do better) ── */
+
+function extractTags(content) {
+	const words = content.toLowerCase().split(/\s+/);
+	const stopWords = new Set([
+		"the",
+		"a",
+		"an",
+		"is",
+		"are",
+		"was",
+		"were",
+		"be",
+		"been",
+		"being",
+		"have",
+		"has",
+		"had",
+		"do",
+		"does",
+		"did",
+		"will",
+		"shall",
+		"would",
+		"should",
+		"may",
+		"might",
+		"must",
+		"can",
+		"could",
+		"to",
+		"of",
+		"in",
+		"for",
+		"on",
+		"with",
+		"at",
+		"by",
+		"from",
+		"as",
+		"into",
+		"through",
+		"during",
+		"before",
+		"after",
+		"and",
+		"but",
+		"or",
+		"nor",
+		"not",
+		"no",
+		"so",
+		"if",
+		"than",
+		"that",
+		"this",
+		"it",
+		"its",
+		"i",
+		"we",
+		"you",
+		"he",
+		"she",
+		"they",
+		"them",
+		"my",
+		"your",
+		"his",
+		"her",
+		"our",
+		"their",
+	]);
+
+	return [
+		...new Set(
+			words
+				.filter((w) => w.length > 3 && !stopWords.has(w))
+				.map((w) => w.replace(/[^a-z0-9]/g, ""))
+				.filter((w) => w.length > 3),
+		),
+	].slice(0, 5);
+}
+
+function extractEntities(content) {
+	// Simple: find capitalized words (proper nouns)
+	const matches = content.match(/\b[A-Z][a-z]{2,}\b/g) ?? [];
+	return [...new Set(matches)].slice(0, 5);
+}
+
+/* ── Step detail helper ── */
+
+function getStepDetail(stepId, { activatedChunks, subQuestions, confidence }) {
+	switch (stepId) {
+		case 3:
+			return `${subQuestions.length} sub-questions`;
+		case 5:
+			return `${activatedChunks.length} chunks retrieved`;
+		case 10:
+			return `confidence: ${(confidence * 100).toFixed(0)}%`;
+		default:
+			return "";
+	}
+}
+
+export const carEngine = new CAREngine();
diff --git a/js/runtime/cluster-manager.js b/js/runtime/cluster-manager.js
new file mode 100644
index 0000000..dcd54ea
--- /dev/null
+++ b/js/runtime/cluster-manager.js
@@ -0,0 +1,154 @@
+import { nowIso, uid } from "../core/utils.js";
+
+/**
+ * Auto-cluster chunks by shared topic_tags and entity_tags.
+ * Returns array of cluster definitions: { id, member_ids, shared_tags, shared_entities }.
+ */
+export const computeClusters = (chunks) => {
+	if (chunks.length < 2) return [];
+
+	// Build tag index: tag → chunk IDs
+	const tagIndex = new Map();
+	for (const chunk of chunks) {
+		const tags = [
+			...(chunk.data?.topic_tags ?? []),
+			...(chunk.data?.entity_tags ?? []),
+		];
+		for (const tag of tags) {
+			if (!tagIndex.has(tag)) tagIndex.set(tag, new Set());
+			tagIndex.get(tag).add(chunk.id);
+		}
+	}
+
+	// Find groups with 2+ members sharing a tag
+	const clusterCandidates = [];
+	const assignedChunks = new Set();
+
+	// Sort tags by group size (largest first) for greedy clustering
+	const sortedTags = [...tagIndex.entries()]
+		.filter(([, ids]) => ids.size >= 2)
+		.sort((a, b) => b[1].size - a[1].size);
+
+	for (const [tag, chunkIds] of sortedTags) {
+		// Only include chunks not yet assigned to a cluster
+		const unassigned = [...chunkIds].filter((id) => !assignedChunks.has(id));
+		if (unassigned.length < 2) continue;
+
+		// Check for shared secondary tags among this group
+		const chunkMap = new Map(chunks.map((c) => [c.id, c]));
+		const memberChunks = unassigned
+			.map((id) => chunkMap.get(id))
+			.filter(Boolean);
+
+		const topicTags = new Set();
+		const entityTags = new Set();
+		for (const c of memberChunks) {
+			for (const t of c.data?.topic_tags ?? []) topicTags.add(t);
+			for (const e of c.data?.entity_tags ?? []) entityTags.add(e);
+		}
+
+		// Only create cluster if chunks share real content
+		const sharedTopicTags = [...topicTags].filter((t) =>
+			memberChunks.every((c) => (c.data?.topic_tags ?? []).includes(t)),
+		);
+		const sharedEntityTags = [...entityTags].filter((e) =>
+			memberChunks.every((c) => (c.data?.entity_tags ?? []).includes(e)),
+		);
+
+		const cluster = {
+			id: uid("cluster"),
+			label: `Cluster: ${tag}`,
+			member_ids: unassigned,
+			shared_tags: sharedTopicTags.length > 0 ? sharedTopicTags : [tag],
+			shared_entities: sharedEntityTags,
+			cluster_strength: unassigned.length / chunks.length,
+			color: 0xffffff,
+			createdAt: nowIso(),
+		};
+
+		clusterCandidates.push(cluster);
+		for (const id of unassigned) {
+			assignedChunks.add(id);
+		}
+	}
+
+	return clusterCandidates;
+};
+
+/**
+ * Create a cluster node for the graph from a cluster definition.
+ */
+export const createClusterNode = (cluster) => ({
+	id: cluster.id,
+	type: "cluster",
+	label: cluster.label,
+	description: `${cluster.member_ids.length} members`,
+	position: { x: 0, y: 0, z: -400 },
+	data: {
+		member_ids: cluster.member_ids,
+		cluster_strength: cluster.cluster_strength,
+		shared_tags: cluster.shared_tags,
+		shared_entities: cluster.shared_entities,
+		color: cluster.color,
+	},
+	metadata: {
+		createdAt: cluster.createdAt ?? nowIso(),
+	},
+});
+
+/**
+ * Create clusters_with edges from a cluster to its members.
+ */
+export const createClusterEdges = (cluster) =>
+	cluster.member_ids.map((memberId) => ({
+		id: uid("cledge"),
+		type: "clusters_with",
+		source: cluster.id,
+		target: memberId,
+		label: "clusters_with",
+		metadata: {},
+	}));
+
+/**
+ * Expand a cluster by finding neighbor chunks (temporal, entity, topic).
+ * Returns array of chunk IDs that should be added.
+ */
+export const findClusterNeighbors = (cluster, allChunks, allEdges) => {
+	const memberSet = new Set(cluster.member_ids);
+	const neighbors = new Set();
+
+	// Find chunks connected by edges to cluster members
+	for (const edge of allEdges) {
+		if (edge.type === "clusters_with") continue;
+		if (memberSet.has(edge.source) && !memberSet.has(edge.target)) {
+			neighbors.add(edge.target);
+		}
+		if (memberSet.has(edge.target) && !memberSet.has(edge.source)) {
+			neighbors.add(edge.source);
+		}
+	}
+
+	// Find chunks with overlapping entity tags
+	const memberEntities = new Set();
+	for (const chunk of allChunks) {
+		if (memberSet.has(chunk.id)) {
+			for (const e of chunk.data?.entity_tags ?? []) {
+				memberEntities.add(e);
+			}
+		}
+	}
+
+	for (const chunk of allChunks) {
+		if (memberSet.has(chunk.id) || neighbors.has(chunk.id)) continue;
+		if (chunk.type !== "chunk") continue;
+		const chunkEntities = chunk.data?.entity_tags ?? [];
+		if (chunkEntities.some((e) => memberEntities.has(e))) {
+			neighbors.add(chunk.id);
+		}
+	}
+
+	return [...neighbors].filter((id) => {
+		const chunk = allChunks.find((c) => c.id === id);
+		return chunk && chunk.type === "chunk";
+	});
+};
diff --git a/js/runtime/consolidation-engine.js b/js/runtime/consolidation-engine.js
new file mode 100644
index 0000000..9c32922
--- /dev/null
+++ b/js/runtime/consolidation-engine.js
@@ -0,0 +1,186 @@
+import { nowIso, uid } from "../core/utils.js";
+
+/**
+ * Determine if a set of T1 chunks should be promoted to T2.
+ * Promotion criteria: 3+ chunks sharing 2+ topic tags.
+ */
+export const findPromotionCandidates = (t1Chunks) => {
+	const tagGroups = new Map();
+
+	for (const chunk of t1Chunks) {
+		const tags = chunk.data?.topic_tags ?? [];
+		for (const tag of tags) {
+			if (!tagGroups.has(tag)) tagGroups.set(tag, []);
+			tagGroups.get(tag).push(chunk);
+		}
+	}
+
+	const candidates = [];
+	const seen = new Set();
+
+	for (const [tag, chunks] of tagGroups) {
+		if (chunks.length < 3) continue;
+
+		// Find chunks that share at least 2 tags with each other
+		const group = chunks.filter((chunk) => {
+			const chunkTags = new Set(chunk.data?.topic_tags ?? []);
+			const sharedCount = chunks.filter(
+				(other) =>
+					other.id !== chunk.id &&
+					(other.data?.topic_tags ?? []).some((t) => chunkTags.has(t)),
+			).length;
+			return sharedCount >= 2;
+		});
+
+		if (group.length >= 3) {
+			const groupKey = group
+				.map((c) => c.id)
+				.sort()
+				.join(",");
+			if (!seen.has(groupKey)) {
+				seen.add(groupKey);
+				candidates.push({
+					tag,
+					chunks: group,
+					sharedTags: [tag],
+				});
+			}
+		}
+	}
+
+	return candidates;
+};
+
+/**
+ * Create a T2 summary node from a group of T1 chunks.
+ * Returns a new node object (not yet persisted).
+ */
+export const createT2Summary = (chunkGroup, sharedTags) => {
+	const labels = chunkGroup.map((c) => c.label).join(", ");
+	const contentParts = chunkGroup.map(
+		(c) => c.data?.content ?? c.description ?? c.label,
+	);
+
+	// Compute center position of group
+	const cx =
+		chunkGroup.reduce((sum, c) => sum + (c.position?.x ?? 0), 0) /
+		chunkGroup.length;
+	const cy =
+		chunkGroup.reduce((sum, c) => sum + (c.position?.y ?? 0), 0) /
+		chunkGroup.length;
+
+	return {
+		id: uid("t2"),
+		type: "chunk",
+		label: `Summary: ${sharedTags.join(", ")}`,
+		description: `Consolidated from ${chunkGroup.length} chunks: ${labels.slice(0, 100)}`,
+		position: { x: cx, y: cy, z: -400 },
+		data: {
+			content: `Summary of ${chunkGroup.length} related memories:\n${contentParts.map((c) => `- ${c}`).join("\n")}`,
+			tier: 2,
+			session_id: "",
+			source: "agent_generated",
+			source_reliability: "high",
+			participants: [
+				...new Set(chunkGroup.flatMap((c) => c.data?.participants ?? [])),
+			],
+			emotional_tone: "neutral",
+			emotional_intensity:
+				chunkGroup.reduce(
+					(sum, c) => sum + (c.data?.emotional_intensity ?? 0),
+					0,
+				) / chunkGroup.length,
+			stakes_level: chunkGroup.some((c) => c.data?.stakes_level === "high")
+				? "high"
+				: "medium",
+			topic_tags: [
+				...new Set(chunkGroup.flatMap((c) => c.data?.topic_tags ?? [])),
+			],
+			entity_tags: [
+				...new Set(chunkGroup.flatMap((c) => c.data?.entity_tags ?? [])),
+			],
+			decision_made: chunkGroup.some((c) => c.data?.decision_made),
+			action_items: chunkGroup.flatMap((c) => c.data?.action_items ?? []),
+			status: chunkGroup.every((c) => c.data?.status === "resolved")
+				? "resolved"
+				: "open",
+			preceding_context_id: null,
+			following_context_id: null,
+			access_count: 1,
+			last_accessed: nowIso(),
+			retrieval_cues: chunkGroup
+				.flatMap((c) => c.data?.retrieval_cues ?? [])
+				.slice(0, 10),
+			amendments: [],
+			linked_chunks: chunkGroup.map((c) => c.id),
+			generated_questions: [],
+		},
+		metadata: {
+			createdAt: nowIso(),
+			consolidatedFrom: chunkGroup.map((c) => c.id),
+		},
+	};
+};
+
+/**
+ * Determine if T2 summaries should be promoted to T3 pattern.
+ * Criteria: 2+ T2 summaries with overlapping entity_tags.
+ */
+export const findPatternCandidates = (t2Chunks) => {
+	if (t2Chunks.length < 2) return [];
+
+	const candidates = [];
+	const seen = new Set();
+
+	for (let i = 0; i < t2Chunks.length; i++) {
+		for (let j = i + 1; j < t2Chunks.length; j++) {
+			const a = t2Chunks[i];
+			const b = t2Chunks[j];
+			const aEntities = new Set(a.data?.entity_tags ?? []);
+			const shared = (b.data?.entity_tags ?? []).filter((e) =>
+				aEntities.has(e),
+			);
+
+			if (shared.length >= 1) {
+				const key = [a.id, b.id].sort().join(",");
+				if (!seen.has(key)) {
+					seen.add(key);
+					candidates.push({ chunks: [a, b], sharedEntities: shared });
+				}
+			}
+		}
+	}
+
+	return candidates;
+};
+
+/**
+ * Create a T3 pattern/schema node from T2 summaries.
+ */
+export const createT3Pattern = (summaryGroup, sharedEntities) => {
+	const cx =
+		summaryGroup.reduce((sum, c) => sum + (c.position?.x ?? 0), 0) /
+		summaryGroup.length;
+	const cy =
+		summaryGroup.reduce((sum, c) => sum + (c.position?.y ?? 0), 0) /
+		summaryGroup.length;
+
+	return {
+		id: uid("pat"),
+		type: "pattern",
+		label: `Pattern: ${sharedEntities.join(", ")}`,
+		description: `Cross-domain pattern across ${summaryGroup.length} summaries`,
+		position: { x: cx, y: cy, z: -600 },
+		data: {
+			pattern: `Recurring pattern involving ${sharedEntities.join(", ")}`,
+			evidence: summaryGroup.map((c) => c.id),
+			confidence: 0.6,
+			implication: `This pattern suggests a relationship between ${sharedEntities.join(" and ")}`,
+			pattern_type: "causal_recurring",
+			exceptions: [],
+		},
+		metadata: {
+			createdAt: nowIso(),
+		},
+	};
+};
diff --git a/js/runtime/contradiction-detector.js b/js/runtime/contradiction-detector.js
new file mode 100644
index 0000000..9edc133
--- /dev/null
+++ b/js/runtime/contradiction-detector.js
@@ -0,0 +1,114 @@
+import { uid } from "../core/utils.js";
+
+/**
+ * Simple contradiction detection between two chunks.
+ * Checks for opposing signals in the data.
+ * A real AI runner would do semantic analysis.
+ */
+const hasContradictionSignals = (a, b) => {
+	const aData = a.data ?? {};
+	const bData = b.data ?? {};
+
+	// Same topic tags but different decisions
+	const aTags = new Set(aData.topic_tags ?? []);
+	const sharedTags = (bData.topic_tags ?? []).filter((t) => aTags.has(t));
+	if (sharedTags.length === 0) return false;
+
+	// Both have content with conflicting indicators
+	const aContent = (aData.content ?? a.description ?? "").toLowerCase();
+	const bContent = (bData.content ?? b.description ?? "").toLowerCase();
+
+	// Check for explicit contradiction markers
+	const contradictionPairs = [
+		["increase", "decrease"],
+		["higher", "lower"],
+		["grew", "dropped"],
+		["up", "down"],
+		["yes", "no"],
+		["true", "false"],
+		["approved", "rejected"],
+		["confirmed", "denied"],
+	];
+
+	for (const [wordA, wordB] of contradictionPairs) {
+		if (
+			(aContent.includes(wordA) && bContent.includes(wordB)) ||
+			(aContent.includes(wordB) && bContent.includes(wordA))
+		) {
+			return true;
+		}
+	}
+
+	// Check if both are about the same entity but have different statuses
+	const aEntities = new Set(aData.entity_tags ?? []);
+	const sharedEntities = (bData.entity_tags ?? []).filter((e) =>
+		aEntities.has(e),
+	);
+	if (sharedEntities.length > 0 && aData.status !== bData.status) {
+		// Only flag if one is decided and other is open
+		if (
+			(aData.decision_made && !bData.decision_made) ||
+			(!aData.decision_made && bData.decision_made)
+		) {
+			return true;
+		}
+	}
+
+	return false;
+};
+
+/**
+ * Scan all chunks for contradictions.
+ * Returns array of { nodeA, nodeB, description, sharedTags } objects.
+ */
+export const detectContradictions = (chunks) => {
+	const contradictions = [];
+	const seen = new Set();
+
+	for (let i = 0; i < chunks.length; i++) {
+		for (let j = i + 1; j < chunks.length; j++) {
+			const a = chunks[i];
+			const b = chunks[j];
+
+			if (hasContradictionSignals(a, b)) {
+				const key = [a.id, b.id].sort().join(",");
+				if (!seen.has(key)) {
+					seen.add(key);
+
+					const aTags = new Set(a.data?.topic_tags ?? []);
+					const sharedTags = (b.data?.topic_tags ?? []).filter((t) =>
+						aTags.has(t),
+					);
+
+					contradictions.push({
+						id: uid("contra"),
+						nodeA: a.id,
+						nodeB: b.id,
+						labelA: a.label,
+						labelB: b.label,
+						description: `Conflicting information between "${a.label}" and "${b.label}" on ${sharedTags.join(", ") || "related topics"}`,
+						sharedTags,
+						resolved: false,
+					});
+				}
+			}
+		}
+	}
+
+	return contradictions;
+};
+
+/**
+ * Create a contradiction edge between two nodes.
+ */
+export const createContradictionEdge = (contradiction) => ({
+	id: uid("cedge"),
+	type: "contradicts",
+	source: contradiction.nodeA,
+	target: contradiction.nodeB,
+	label: "contradicts",
+	metadata: {
+		contradictionId: contradiction.id,
+		description: contradiction.description,
+	},
+});
diff --git a/js/runtime/question-generator.js b/js/runtime/question-generator.js
new file mode 100644
index 0000000..179bf56
--- /dev/null
+++ b/js/runtime/question-generator.js
@@ -0,0 +1,98 @@
+import { uid } from "../core/utils.js";
+
+/**
+ * Question templates per level (L1-L5) from CAR Protocol S4.
+ * Templates use {content} and {label} as placeholders.
+ */
+const TEMPLATES = {
+	1: [
+		"What is the key fact stated in: {label}?",
+		"What exactly was said about {label}?",
+		"When did {label} happen?",
+	],
+	2: [
+		"Why did {label} occur?",
+		"What caused the situation described in {label}?",
+		"What is the reasoning behind {label}?",
+	],
+	3: [
+		"What are the implications of {label}?",
+		"How does {label} affect the broader context?",
+		"What consequences follow from {label}?",
+	],
+	4: [
+		"What if {label} had not happened?",
+		"What would change if the opposite of {label} were true?",
+		"How would things differ without {label}?",
+	],
+	5: [
+		"Under what conditions would {label} no longer hold?",
+		"When would {label} become irrelevant?",
+		"What would need to change for {label} to be false?",
+	],
+};
+
+/**
+ * Generate questions at all 5 levels for a chunk node.
+ * Returns an array of question node data objects (not yet persisted).
+ */
+export const generateQuestions = (chunkNode) => {
+	if (!chunkNode || chunkNode.type !== "chunk") return [];
+
+	const label = chunkNode.label ?? "this memory";
+	const questions = [];
+
+	for (let level = 1; level <= 5; level++) {
+		const templates = TEMPLATES[level];
+		const template = templates[Math.floor(Math.random() * templates.length)];
+		const questionText = template
+			.replace("{label}", label)
+			.replace("{content}", (chunkNode.data?.content ?? label).slice(0, 60));
+
+		questions.push({
+			id: uid("qnode"),
+			type: "question",
+			label: `L${level}: ${questionText.slice(0, 40)}...`,
+			description: questionText,
+			position: {
+				x: (chunkNode.position?.x ?? 0) + (Math.random() - 0.5) * 40,
+				y: (chunkNode.position?.y ?? 0) + (Math.random() - 0.5) * 30,
+				z: -100,
+			},
+			data: {
+				level,
+				question_text: questionText,
+				answer_text: null,
+				answered: false,
+				parent_question_id: null,
+				linked_chunk_ids: [chunkNode.id],
+				confidence: null,
+			},
+		});
+	}
+
+	return questions;
+};
+
+/**
+ * Generate sub-questions for a query (decomposition step in retrieval).
+ * Returns 3-5 sub-question strings.
+ */
+export const decomposeQuery = (queryText) => {
+	if (!queryText) return [];
+
+	// Simple heuristic decomposition (AI runner would do this properly)
+	const subQuestions = [
+		`What are the key facts related to: ${queryText}`,
+		`What is the timeline of events around: ${queryText}`,
+		`Who are the participants involved in: ${queryText}`,
+	];
+
+	// Add conditional questions for complex queries
+	if (queryText.length > 30) {
+		subQuestions.push(`What are the implications of: ${queryText}`);
+		subQuestions.push(`Are there contradictions related to: ${queryText}`);
+	}
+
+	return subQuestions;
+};
diff --git a/js/runtime/relevance-scorer.js b/js/runtime/relevance-scorer.js
new file mode 100644
index 0000000..3230305
--- /dev/null
+++ b/js/runtime/relevance-scorer.js
@@ -0,0 +1,108 @@
+import { EBBINGHAUS_DECAY } from "../core/constants.js";
+
+/**
+ * Ebbinghaus decay curve: returns weight based on days since last access.
+ * Interpolates linearly between defined curve points.
+ */
+const recencyWeight = (daysSinceAccess) => {
+	if (daysSinceAccess <= 0) return 1.0;
+
+	const curve = EBBINGHAUS_DECAY;
+	for (let i = 0; i < curve.length - 1; i++) {
+		if (daysSinceAccess <= curve[i + 1].days) {
+			const t =
+				(daysSinceAccess - curve[i].days) / (curve[i + 1].days - curve[i].days);
+			return curve[i].weight + t * (curve[i + 1].weight - curve[i].weight);
+		}
+	}
+
+	return curve[curve.length - 1].weight;
+};
+
+const frequencyWeight = (accessCount) => {
+	if (accessCount <= 0) return 0.5;
+	return Math.min(1.0, 0.5 + Math.log2(accessCount) * 0.15);
+};
+
+const emotionalWeight = (intensity) => {
+	return 1.0 + (intensity ?? 0) * 0.5;
+};
+
+const consequenceWeight = (decisionMade) => {
+	return decisionMade ? 1.3 : 1.0;
+};
+
+const connectionWeight = (linkedCount) => {
+	return 1.0 + Math.min(linkedCount ?? 0, 10) * 0.05;
+};
+
+const zeigarnikWeight = (status) => {
+	return status === "open" ? 1.5 : 1.0;
+};
+
+/**
+ * Compute relevance score for a chunk node.
+ * Score is a product of six weighted factors.
+ * Returns a normalized value in [0, 1] range (clamped).
+ */
+export const computeRelevance = (node) => {
+	if (!node || node.type !== "chunk") return 0;
+
+	const data = node.data ?? {};
+
+	// Days since last access
+	const lastAccessed = data.last_accessed
+		? new Date(data.last_accessed)
+		: new Date();
+	const now = new Date();
+	const daysSince = Math.max(0, (now - lastAccessed) / (1000 * 60 * 60 * 24));
+
+	const raw =
+		recencyWeight(daysSince) *
+		frequencyWeight(data.access_count ?? 1) *
+		emotionalWeight(data.emotional_intensity) *
+		consequenceWeight(data.decision_made) *
+		connectionWeight((data.linked_chunks ?? []).length) *
+		zeigarnikWeight(data.status);
+
+	// Normalize: the theoretical max is about 1.0 * 1.0 * 1.5 * 1.3 * 1.5 * 1.5 ≈ 4.4
+	return Math.min(1.0, raw / 4.4);
+};
+
+/**
+ * Score all chunks and return sorted by relevance (highest first).
+ */
+export const rankChunksByRelevance = (chunks) => {
+	return chunks
+		.map((chunk) => ({
+			nodeId: chunk.id,
+			node: chunk,
+			relevance: computeRelevance(chunk),
+		}))
+		.sort((a, b) => b.relevance - a.relevance);
+};
+
+/**
+ * Get the relevance breakdown for display in the inspector scoring tab.
+ */
+export const getRelevanceBreakdown = (node) => {
+	if (!node || node.type !== "chunk") return null;
+
+	const data = node.data ?? {};
+	const lastAccessed = data.last_accessed
+		? new Date(data.last_accessed)
+		: new Date();
+	const now = new Date();
+	const daysSince = Math.max(0, (now - lastAccessed) / (1000 * 60 * 60 * 24));
+
+	return {
+		recency: recencyWeight(daysSince),
+		frequency: frequencyWeight(data.access_count ?? 1),
+		emotional: emotionalWeight(data.emotional_intensity),
+		consequence: consequenceWeight(data.decision_made),
+		connections: connectionWeight((data.linked_chunks ?? []).length),
+		zeigarnik: zeigarnikWeight(data.status),
+		total: computeRelevance(node),
+		daysSinceAccess: daysSince,
+	};
+};
diff --git a/js/runtime/retrieval-animator.js b/js/runtime/retrieval-animator.js
new file mode 100644
index 0000000..dcf2083
--- /dev/null
+++ b/js/runtime/retrieval-animator.js
@@ -0,0 +1,122 @@
+import { EVENTS } from "../core/event-constants.js";
+import { publish, subscribe } from "../core/pan.js";
+
+/**
+ * Retrieval Animator — coordinates visual effects during the 13-step sequence.
+ * Listens to retrieval events and publishes canvas commands.
+ * The actual rendering is handled by graph-canvas.js.
+ */
+class RetrievalAnimator {
+	#dispose = [];
+	#running = false;
+	#currentStep = 0;
+
+	initialize() {
+		this.#dispose.push(
+			subscribe(EVENTS.CAR_RETRIEVAL_STARTED, () => {
+				this.#running = true;
+				this.#currentStep = 0;
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.CAR_RETRIEVAL_STEP_STARTED, ({ payload }) => {
+				this.#currentStep = payload?.step ?? 0;
+				this.#onStepStarted(this.#currentStep, payload?.name ?? "");
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.CAR_RETRIEVAL_STEP_COMPLETED, ({ payload }) => {
+				this.#onStepCompleted(payload?.step ?? 0);
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.CAR_RETRIEVAL_COMPLETED, () => {
+				this.#running = false;
+				this.#currentStep = 0;
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.CAR_RETRIEVAL_FAILED, () => {
+				this.#running = false;
+				this.#currentStep = 0;
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.CAR_RETRIEVAL_RESET, () => {
+				this.#running = false;
+				this.#currentStep = 0;
+			}),
+		);
+	}
+
+	dispose() {
+		this.#dispose.forEach((run) => run());
+		this.#dispose = [];
+	}
+
+	get isRunning() {
+		return this.#running;
+	}
+
+	get currentStep() {
+		return this.#currentStep;
+	}
+
+	/* ── Step-specific visual commands ── */
+
+	#onStepStarted(step, _name) {
+		switch (step) {
+			case 1:
+				// Session Primer: warm glow on recent chunks
+				// Handled by canvas dimming non-active nodes
+				break;
+
+			case 2:
+				// Context Construction: query node appears at front plane
+				// The canvas would create a temporary query visualization
+				break;
+
+			case 3:
+				// Question Decomposition: fan-out animation
+				break;
+
+			case 5:
+				// Multi-Query Retrieval: particle beams into graph
+				break;
+
+			case 6:
+				// Cluster Formation: chunks drift together
+				break;
+
+			case 8:
+				// Tiered Retrieval: camera pulls back
+				publish(EVENTS.CAR_CANVAS_CAMERA_HOME, {
+					origin: "retrieval-animator",
+				});
+				break;
+
+			case 9:
+				// Interference Check: red pulses between contradictions
+				break;
+
+			case 12:
+				// Synthesis: all activated chunks pulse
+				break;
+
+			case 13:
+				// Post-Retrieval Update: flash re-indexed chunks
+				break;
+		}
+	}
+
+	#onStepCompleted(_step) {
+		// Visual transitions between steps handled by the animation loop
+	}
+}
+
+export const retrievalAnimator = new RetrievalAnimator();

From a96e6ae76e934da2be88aaf66b88c8081c3f5c1c Mon Sep 17 00:00:00 2001
From: Amit Kolton <amit.ko@thing02.com>
Date: Fri, 3 Apr 2026 15:46:34 +0300
Subject: [PATCH 09/13] =?UTF-8?q?feat:=20integration=20=E2=80=94=20seed=20?=
 =?UTF-8?q?data,=20server,=20persistence,=20bootstrap,=20cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add Spain margins demo seed data (~15 chunks, 3 tiers, clusters,
contradiction, trigger, questions). Create zero-dep Node.js local
server (server.js) with REST API for disk persistence at
~/.car-brain/brains/. Update persistence-store for dual
localStorage+server persistence. Rewrite app.js bootstrap with CAR
engine wiring. Add CAR_INGESTION_PROTOCOL.md. Delete obsolete node
components, inspector tabs, bottom panel views, old runtime modules,
and sample data.
---
 CAR_INGESTION_PROTOCOL.md                     | 177 ++++
 data/sample/ads_api_mock.json                 |   6 -
 data/sample/market_data.json                  |   8 -
 data/sample/site_config.json                  |   5 -
 data/sample/support_db.json                   |   6 -
 js/app.js                                     |  88 +-
 .../bottom-panel/activity-log-view.js         |  62 --
 js/components/bottom-panel/error-view.js      |  46 -
 js/components/bottom-panel/messages-view.js   |  41 -
 .../bottom-panel/run-history-view.js          |  49 --
 js/components/bottom-panel/shared.js          |  40 -
 js/components/bottom-panel/task-queue-view.js |  47 --
 js/components/graph-canvas/canvas-edges.js    | 115 ---
 js/components/inspector/inspector-activity.js | 146 ----
 .../inspector/inspector-automation.js         |  92 --
 js/components/inspector/inspector-data.js     | 263 ------
 js/components/inspector/inspector-output.js   |  96 ---
 js/components/inspector/inspector-overview.js | 115 ---
 .../inspector/inspector-permissions.js        |  69 --
 js/components/inspector/inspector-prompt.js   |  72 --
 js/components/inspector/inspector-tools.js    |  85 --
 js/components/nodes/action-node.js            |  36 -
 js/components/nodes/agent-node.js             |  58 --
 js/components/nodes/data-node.js              |  47 --
 js/components/nodes/note-node.js              |  35 -
 js/components/nodes/transformer-node.js       |  36 -
 js/components/nodes/view-node.js              |  36 -
 js/core/seed-data.js                          | 799 +++++++++++-------
 js/runtime/action-executor.js                 |  19 -
 js/runtime/agent-runtime.js                   | 107 ---
 js/runtime/data-connectors.js                 | 420 ---------
 js/runtime/mock-agent-runtime.js              | 480 -----------
 js/runtime/schema-inference.js                |  63 --
 js/store/persistence-store.js                 | 353 ++++----
 server.js                                     | 249 ++++++
 35 files changed, 1187 insertions(+), 3179 deletions(-)
 create mode 100644 CAR_INGESTION_PROTOCOL.md
 delete mode 100644 data/sample/ads_api_mock.json
 delete mode 100644 data/sample/market_data.json
 delete mode 100644 data/sample/site_config.json
 delete mode 100644 data/sample/support_db.json
 delete mode 100644 js/components/bottom-panel/activity-log-view.js
 delete mode 100644 js/components/bottom-panel/error-view.js
 delete mode 100644 js/components/bottom-panel/messages-view.js
 delete mode 100644 js/components/bottom-panel/run-history-view.js
 delete mode 100644 js/components/bottom-panel/shared.js
 delete mode 100644 js/components/bottom-panel/task-queue-view.js
 delete mode 100644 js/components/graph-canvas/canvas-edges.js
 delete mode 100644 js/components/inspector/inspector-activity.js
 delete mode 100644 js/components/inspector/inspector-automation.js
 delete mode 100644 js/components/inspector/inspector-data.js
 delete mode 100644 js/components/inspector/inspector-output.js
 delete mode 100644 js/components/inspector/inspector-overview.js
 delete mode 100644 js/components/inspector/inspector-permissions.js
 delete mode 100644 js/components/inspector/inspector-prompt.js
 delete mode 100644 js/components/inspector/inspector-tools.js
 delete mode 100644 js/components/nodes/action-node.js
 delete mode 100644 js/components/nodes/agent-node.js
 delete mode 100644 js/components/nodes/data-node.js
 delete mode 100644 js/components/nodes/note-node.js
 delete mode 100644 js/components/nodes/transformer-node.js
 delete mode 100644 js/components/nodes/view-node.js
 delete mode 100644 js/runtime/action-executor.js
 delete mode 100644 js/runtime/agent-runtime.js
 delete mode 100644 js/runtime/data-connectors.js
 delete mode 100644 js/runtime/mock-agent-runtime.js
 delete mode 100644 js/runtime/schema-inference.js
 create mode 100644 server.js

diff --git a/CAR_INGESTION_PROTOCOL.md b/CAR_INGESTION_PROTOCOL.md
new file mode 100644
index 0000000..97deaf0
--- /dev/null
+++ b/CAR_INGESTION_PROTOCOL.md
@@ -0,0 +1,177 @@
+# CAR Ingestion Protocol
+
+Instructions for ingesting knowledge into a CAR Brain graph. Use this protocol
+with Claude Code or any AI runner to convert raw information into structured
+brain data.
+
+## Pipeline
+
+```
+1. SCAN    — Read all source material (any domain)
+2. CHUNK   — Break into atomic units (one fact/decision/event per chunk)
+3. CLASSIFY — Assign tier (1=raw, 2=summary, 3=pattern), tags, entities
+4. QUESTION — Generate questions at 5 levels per chunk (L1-L5)
+5. LINK    — Identify cross-links, contradictions, temporal sequences
+6. SCORE   — Set initial relevance weights (emotional, stakes, consequence)
+7. CLUSTER — Group related chunks by topic/entity/time
+8. EXPORT  — Output as JSON matching the graph document schema
+```
+
+## Step Details
+
+### 1. SCAN
+
+Read the input material. Accept any format:
+- Text (conversations, notes, documents)
+- Code files (source, config, docs)
+- Structured data (JSON, YAML, CSV)
+
+### 2. CHUNK
+
+Break into atomic memory chunks. Each chunk contains exactly ONE:
+- Fact or data point
+- Decision or action item
+- Event or observation
+- Relationship or connection
+
+Rule: if a sentence contains two independent facts, split it into two chunks.
+
+### 3. CLASSIFY
+
+For each chunk, assign:
+
+```json
+{
+  "tier": 1,
+  "source": "user_stated | agent_generated | imported",
+  "source_reliability": "high | medium | low",
+  "emotional_tone": "neutral | positive | negative | concerned | ...",
+  "emotional_intensity": 0.0-1.0,
+  "stakes_level": "high | medium | low",
+  "topic_tags": ["tag1", "tag2"],
+  "entity_tags": ["Entity1", "Entity2"],
+  "decision_made": true/false,
+  "status": "open | resolved"
+}
+```
+
+Tier assignment:
+- **Tier 1**: Raw episodic memory (individual facts, events, observations)
+- **Tier 2**: Consolidated summary (synthesis of 3+ related T1 chunks)
+- **Tier 3**: Schema/pattern (cross-domain insight, permanent knowledge)
+
+### 4. QUESTION
+
+Generate questions at 5 levels for each chunk:
+
+| Level | Type | Example |
+|-------|------|---------|
+| L1 | Bare Fact | "What is the key fact stated here?" |
+| L2 | Explanation | "Why did this happen?" |
+| L3 | Implication | "What are the consequences?" |
+| L4 | Counterfactual | "What if this hadn't happened?" |
+| L5 | Conditional | "Under what conditions would this change?" |
+
+### 5. LINK
+
+Identify relationships between chunks:
+
+| Edge Type | When |
+|-----------|------|
+| `linked_to` | Chunks share topic/entity/context |
+| `amends` | One chunk corrects another |
+| `contradicts` | Chunks contain conflicting information |
+| `preceded_by` | Temporal sequence |
+| `promotes_to` | T1 chunk is part of a T2 summary |
+| `answers` | A chunk answers a question |
+
+### 6. SCORE
+
+Set initial relevance weights:
+- `access_count`: 1 (new chunk)
+- `emotional_intensity`: based on content analysis
+- `stakes_level`: "high" if involves decisions, money, deadlines
+- `decision_made`: true if the chunk records a decision
+
+### 7. CLUSTER
+
+Group chunks that share 2+ tags or entities. Each cluster gets:
+- `member_ids`: list of chunk IDs
+- `shared_tags`: tags all members share
+- `shared_entities`: entities all members share
+- `cluster_strength`: member count / total chunks
+
+### 8. EXPORT
+
+Output format (JSON):
+
+```json
+{
+  "id": "brain_<project_name>",
+  "title": "CAR Brain - <Project Name>",
+  "version": "1.0.0",
+  "nodes": [
+    {
+      "id": "chunk_<id>",
+      "type": "chunk",
+      "label": "<first 50 chars>",
+      "description": "<full content>",
+      "position": { "x": 0, "y": 0, "z": -200 },
+      "data": { ... full chunk metadata ... }
+    }
+  ],
+  "edges": [
+    {
+      "id": "edge_<id>",
+      "type": "linked_to",
+      "source": "chunk_a",
+      "target": "chunk_b",
+      "label": "linked_to"
+    }
+  ],
+  "clusters": [
+    {
+      "id": "cluster_<id>",
+      "label": "Cluster: <topic>",
+      "member_ids": ["chunk_a", "chunk_b"],
+      "shared_tags": ["topic"],
+      "shared_entities": ["Entity"],
+      "cluster_strength": 0.5
+    }
+  ],
+  "viewport": { "x": 0, "y": 0, "z": 0, "zoom": 1 },
+  "metadata": {
+    "createdBy": "car-ingestion",
+    "description": "<project description>"
+  }
+}
+```
+
+## Position Guidelines
+
+Place nodes in 3D space by tier:
+- **Tier 1 chunks**: z = -200 (mid plane)
+- **Tier 2 summaries**: z = -400 (back plane)
+- **Tier 3 patterns**: z = -600 (deep plane)
+- **Questions**: z = -100 (front-mid)
+- **Triggers**: z = -200 (mid plane)
+
+Spread x/y positions to avoid overlap. Related chunks should be near each other.
+
+## Usage
+
+### With Claude Code CLI
+
+```bash
+claude -p "Read the file at ./notes.md and process it through the CAR
+Ingestion Protocol. Output the result as a JSON file matching the CAR
+Brain graph document schema." > brain.json
+```
+
+### Manual Import
+
+1. Generate the JSON file using any AI tool
+2. Open CAR Brain (http://localhost:4173)
+3. Click Import in the toolbar
+4. Select the JSON file
+5. Watch the brain materialize
diff --git a/data/sample/ads_api_mock.json b/data/sample/ads_api_mock.json
deleted file mode 100644
index 6adb22d..0000000
--- a/data/sample/ads_api_mock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "campaigns": [
-    { "id": "cmp_1", "name": "Spring Launch", "status": "active" },
-    { "id": "cmp_2", "name": "Retargeting", "status": "paused" }
-  ]
-}
diff --git a/data/sample/market_data.json b/data/sample/market_data.json
deleted file mode 100644
index f189f5d..0000000
--- a/data/sample/market_data.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "snapshot": "2026-03-31",
-  "segments": [
-    { "name": "SMB", "growth": 0.12 },
-    { "name": "MidMarket", "growth": 0.09 },
-    { "name": "Enterprise", "growth": 0.07 }
-  ]
-}
diff --git a/data/sample/site_config.json b/data/sample/site_config.json
deleted file mode 100644
index 609a1e7..0000000
--- a/data/sample/site_config.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "siteName": "MindGraph Demo Site",
-  "theme": "light",
-  "regions": ["hero", "features", "footer"]
-}
diff --git a/data/sample/support_db.json b/data/sample/support_db.json
deleted file mode 100644
index 36264d2..0000000
--- a/data/sample/support_db.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "tickets": [
-    { "id": "t-1001", "priority": "high", "state": "open" },
-    { "id": "t-1002", "priority": "medium", "state": "open" }
-  ]
-}
diff --git a/js/app.js b/js/app.js
index 6e6cf86..1b08fcc 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,3 +1,6 @@
+/* ── CAR Brain Simulator — Application Bootstrap ── */
+
+/* Components */
 import "./components/app-shell.js";
 import "./components/top-toolbar.js";
 import "./components/left-tool-palette.js";
@@ -5,57 +8,56 @@ import "./components/graph-canvas.js";
 import "./components/inspector-panel.js";
 import "./components/bottom-activity-panel.js";
 import "./components/pan-event-console.js";
-import "./components/bottom-panel/messages-view.js";
-import "./components/bottom-panel/activity-log-view.js";
-import "./components/bottom-panel/task-queue-view.js";
-import "./components/bottom-panel/run-history-view.js";
-import "./components/bottom-panel/error-view.js";
-
-import "./components/nodes/note-node.js";
-import "./components/nodes/agent-node.js";
-import "./components/nodes/data-node.js";
-import "./components/nodes/transformer-node.js";
-import "./components/nodes/view-node.js";
-import "./components/nodes/action-node.js";
-
-import "./components/inspector/inspector-overview.js";
-import "./components/inspector/inspector-prompt.js";
-import "./components/inspector/inspector-data.js";
-import "./components/inspector/inspector-tools.js";
-import "./components/inspector/inspector-activity.js";
-import "./components/inspector/inspector-output.js";
-import "./components/inspector/inspector-automation.js";
-import "./components/inspector/inspector-permissions.js";
-import "./runtime/data-connectors.js";
-import "./runtime/mock-agent-runtime.js";
 
+/* Core */
 import { EVENTS } from "./core/event-constants.js";
-import { publish } from "./core/pan.js";
+import { publish, subscribe } from "./core/pan.js";
+/* Runtime */
+import { carEngine } from "./runtime/car-engine.js";
+import { retrievalAnimator } from "./runtime/retrieval-animator.js";
 import { graphStore } from "./store/graph-store.js";
 import { persistenceStore } from "./store/persistence-store.js";
 import { uiStore } from "./store/ui-store.js";
 
-const bootstrap = () => {
-  persistenceStore.initialize();
-
-  const restored = persistenceStore.restoreLastSession();
-  if (!restored) {
-    graphStore.loadSeededGraph();
-  }
-
-  uiStore.setTool("select");
-  uiStore.setInspectorTab("overview");
-  uiStore.setBottomTab("messages");
-  uiStore.setDevConsoleVisible(true);
-
-  publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-    level: "info",
-    message: restored ? "MindGraph AI restored from last session" : "MindGraph AI initialized"
-  });
+const bootstrap = async () => {
+	persistenceStore.initialize();
+	retrievalAnimator.initialize();
+
+	const restored = await persistenceStore.restoreLastSession();
+	if (!restored) {
+		graphStore.loadSeededGraph();
+	}
+
+	uiStore.setTool("select");
+	uiStore.setInspectorTab("overview");
+	uiStore.setBottomTab("retrieval-log");
+	uiStore.setDevConsoleVisible(false);
+
+	/* ── Wire CAR events to engine ── */
+
+	subscribe(EVENTS.CAR_MEMORY_SUBMIT_REQUESTED, ({ payload }) => {
+		const content = payload?.content;
+		if (!content) return;
+		carEngine.ingestMemory(content);
+	});
+
+	subscribe(EVENTS.CAR_QUERY_SUBMIT_REQUESTED, ({ payload }) => {
+		const query = payload?.query;
+		if (!query) return;
+		const mode = payload?.mode ?? "play";
+		carEngine.runRetrieval(query, { mode });
+	});
+
+	publish(EVENTS.ACTIVITY_LOG_APPENDED, {
+		level: "info",
+		message: restored
+			? "CAR Brain restored from last session"
+			: "CAR Brain initialized with Spain margins demo",
+	});
 };
 
 if (document.readyState === "loading") {
-  document.addEventListener("DOMContentLoaded", bootstrap);
+	document.addEventListener("DOMContentLoaded", bootstrap);
 } else {
-  bootstrap();
+	bootstrap();
 }
diff --git a/js/components/bottom-panel/activity-log-view.js b/js/components/bottom-panel/activity-log-view.js
deleted file mode 100644
index 9c77972..0000000
--- a/js/components/bottom-panel/activity-log-view.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import { escapeHtml, formatTime, toArray } from "./shared.js";
-
-class BottomActivityLogView extends HTMLElement {
-  #items = [];
-  #selectedNode = null;
-
-  set items(value) {
-    this.#items = toArray(value);
-    if (this.isConnected) this.render();
-  }
-
-  set selectedNode(value) {
-    this.#selectedNode = value ?? null;
-    if (this.isConnected) this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  #renderRows(items) {
-    if (!items.length) return '<p class="panel-empty">No activity yet.</p>';
-
-    return `
-      <ul class="log-list">
-        ${items
-          .map(
-            (entry) => `<li class="log-item"><span class="row-meta">${escapeHtml(formatTime(entry.timestamp ?? entry.at))}</span> <strong class="level-${escapeHtml(entry.level ?? "info")}">[${escapeHtml(entry.level ?? "info")}]</strong> ${escapeHtml(entry.message ?? "(no message)")}</li>`
-          )
-          .join("")}
-      </ul>
-    `;
-  }
-
-  render() {
-    const globalItems = this.#items.slice(0, 40);
-    const nodeActivity = toArray(this.#selectedNode?.data?.activityHistory).map((entry) => ({
-      at: entry?.at,
-      level: entry?.level ?? "info",
-      message: entry?.message ?? "(no message)"
-    }));
-
-    const nodeMarkup = nodeActivity.length
-      ? `
-        <section class="panel-split">
-          <h4>Selected Node Activity: ${escapeHtml(this.#selectedNode?.label ?? "Unknown")}</h4>
-          ${this.#renderRows(nodeActivity.slice(0, 20))}
-        </section>
-      `
-      : "";
-
-    this.innerHTML = `
-      ${nodeMarkup}
-      <section class="panel-split">
-        <h4>Global Activity Log</h4>
-        ${this.#renderRows(globalItems)}
-      </section>
-    `;
-  }
-}
-
-customElements.define("bottom-activity-log-view", BottomActivityLogView);
diff --git a/js/components/bottom-panel/error-view.js b/js/components/bottom-panel/error-view.js
deleted file mode 100644
index 1968dc9..0000000
--- a/js/components/bottom-panel/error-view.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { escapeHtml, formatDateTime, toArray } from "./shared.js";
-
-class BottomErrorView extends HTMLElement {
-  #items = [];
-
-  set items(value) {
-    this.#items = toArray(value);
-    if (this.isConnected) this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  render() {
-    const items = this.#items.slice(0, 60);
-    if (!items.length) {
-      this.innerHTML = '<p class="panel-empty">No runtime errors captured.</p>';
-      return;
-    }
-
-    this.innerHTML = `
-      <ul class="panel-rows">
-        ${items
-          .map(
-            (entry) => `
-              <li class="panel-row panel-row-error">
-                <div class="panel-row-main">
-                  <strong>${escapeHtml(entry?.nodeLabel ?? "Unknown node")}</strong>
-                  <code>${escapeHtml(entry?.runId ?? "run_unknown")}</code>
-                </div>
-                <div class="panel-row-meta">
-                  <span>${escapeHtml(formatDateTime(entry?.at))}</span>
-                  <span>${escapeHtml(entry?.source ?? "runtime")}</span>
-                </div>
-                <div class="panel-row-detail">${escapeHtml(entry?.message ?? "Unknown error")}</div>
-              </li>
-            `
-          )
-          .join("")}
-      </ul>
-    `;
-  }
-}
-
-customElements.define("bottom-error-view", BottomErrorView);
diff --git a/js/components/bottom-panel/messages-view.js b/js/components/bottom-panel/messages-view.js
deleted file mode 100644
index b3c009b..0000000
--- a/js/components/bottom-panel/messages-view.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { escapeHtml, formatTime, toArray } from "./shared.js";
-
-class BottomMessagesView extends HTMLElement {
-  #items = [];
-
-  set items(value) {
-    this.#items = toArray(value);
-    if (this.isConnected) this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  render() {
-    const items = this.#items
-      .map((entry) => ({
-        level: entry?.level ?? "info",
-        message: entry?.message ?? "(no message)",
-        timestamp: entry?.timestamp ?? entry?.at
-      }))
-      .slice(0, 40);
-
-    if (!items.length) {
-      this.innerHTML = '<p class="panel-empty">No messages yet.</p>';
-      return;
-    }
-
-    this.innerHTML = `
-      <ul class="log-list">
-        ${items
-          .map(
-            (entry) => `<li class="log-item"><span class="row-meta">${escapeHtml(formatTime(entry.timestamp))}</span> <strong class="level-${escapeHtml(entry.level)}">[${escapeHtml(entry.level)}]</strong> ${escapeHtml(entry.message)}</li>`
-          )
-          .join("")}
-      </ul>
-    `;
-  }
-}
-
-customElements.define("bottom-messages-view", BottomMessagesView);
diff --git a/js/components/bottom-panel/run-history-view.js b/js/components/bottom-panel/run-history-view.js
deleted file mode 100644
index f348b36..0000000
--- a/js/components/bottom-panel/run-history-view.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { escapeHtml, formatDateTime, toArray } from "./shared.js";
-
-class BottomRunHistoryView extends HTMLElement {
-  #items = [];
-
-  set items(value) {
-    this.#items = toArray(value);
-    if (this.isConnected) this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  render() {
-    const items = this.#items.slice(0, 60);
-    if (!items.length) {
-      this.innerHTML = '<p class="panel-empty">No runs recorded yet.</p>';
-      return;
-    }
-
-    this.innerHTML = `
-      <ul class="panel-rows">
-        ${items
-          .map((entry) => {
-            const confidenceValue = Number(entry?.confidence);
-            const confidence = Number.isFinite(confidenceValue) ? confidenceValue.toFixed(2) : "--";
-            return `
-              <li class="panel-row">
-                <div class="panel-row-main">
-                  <strong>${escapeHtml(entry?.nodeLabel ?? "Unknown node")}</strong>
-                  <span class="chip">${escapeHtml(entry?.status ?? "unknown")}</span>
-                  <code>${escapeHtml(entry?.runId ?? "run_unknown")}</code>
-                </div>
-                <div class="panel-row-meta">
-                  <span>${escapeHtml(formatDateTime(entry?.at))}</span>
-                  <span>Confidence ${escapeHtml(confidence)}</span>
-                </div>
-                <div class="panel-row-detail">${escapeHtml(entry?.summary ?? "(no summary)")}</div>
-              </li>
-            `;
-          })
-          .join("")}
-      </ul>
-    `;
-  }
-}
-
-customElements.define("bottom-run-history-view", BottomRunHistoryView);
diff --git a/js/components/bottom-panel/shared.js b/js/components/bottom-panel/shared.js
deleted file mode 100644
index b4a24a8..0000000
--- a/js/components/bottom-panel/shared.js
+++ /dev/null
@@ -1,40 +0,0 @@
-export const toArray = (value) => (Array.isArray(value) ? value : []);
-
-export const escapeHtml = (value) =>
-  String(value ?? "")
-    .replaceAll("&", "&amp;")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;")
-    .replaceAll("'", "&#39;");
-
-export const formatTime = (value) => {
-  if (!value) return "--:--:--";
-  const date = new Date(value);
-  return Number.isNaN(date.getTime()) ? "--:--:--" : date.toLocaleTimeString();
-};
-
-export const formatDateTime = (value) => {
-  if (!value) return "--";
-  const date = new Date(value);
-  return Number.isNaN(date.getTime()) ? "--" : date.toLocaleString();
-};
-
-export const compactPreview = (value, max = 140) => {
-  if (value == null) return "{}";
-
-  let text = "";
-  if (typeof value === "string") {
-    text = value;
-  } else {
-    try {
-      text = JSON.stringify(value);
-    } catch {
-      text = "[unserializable payload]";
-    }
-  }
-
-  const collapsed = text.replace(/\s+/g, " ").trim();
-  if (!collapsed) return "{}";
-  return collapsed.length > max ? `${collapsed.slice(0, max - 1)}…` : collapsed;
-};
diff --git a/js/components/bottom-panel/task-queue-view.js b/js/components/bottom-panel/task-queue-view.js
deleted file mode 100644
index 5b5184a..0000000
--- a/js/components/bottom-panel/task-queue-view.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { escapeHtml, formatDateTime, toArray } from "./shared.js";
-
-class BottomTaskQueueView extends HTMLElement {
-  #items = [];
-
-  set items(value) {
-    this.#items = toArray(value);
-    if (this.isConnected) this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  render() {
-    const items = this.#items.slice(0, 60);
-    if (!items.length) {
-      this.innerHTML = '<p class="panel-empty">No queued tasks.</p>';
-      return;
-    }
-
-    this.innerHTML = `
-      <ol class="panel-rows">
-        ${items
-          .map((task) => {
-            const progress = Number(task?.progress);
-            const progressLabel = Number.isFinite(progress) ? `${Math.round(progress * 100)}%` : "--";
-            return `
-              <li class="panel-row">
-                <div class="panel-row-main">
-                  <strong>${escapeHtml(task?.label ?? "Untitled task")}</strong>
-                  <span class="chip">${escapeHtml(task?.status ?? "unknown")}</span>
-                </div>
-                <div class="panel-row-meta">
-                  <span>Progress ${escapeHtml(progressLabel)}</span>
-                  <span>Updated ${escapeHtml(formatDateTime(task?.updatedAt))}</span>
-                </div>
-              </li>
-            `;
-          })
-          .join("")}
-      </ol>
-    `;
-  }
-}
-
-customElements.define("bottom-task-queue-view", BottomTaskQueueView);
diff --git a/js/components/graph-canvas/canvas-edges.js b/js/components/graph-canvas/canvas-edges.js
deleted file mode 100644
index c519696..0000000
--- a/js/components/graph-canvas/canvas-edges.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import { clamp, formatEdgeLabel, NODE_SIZE_BY_TYPE } from "../../core/constants.js";
-
-const escapeHtml = (value) =>
-  String(value)
-    .replaceAll("&", "&amp;")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;")
-    .replaceAll("'", "&#39;");
-
-const edgeAnchor = (node, otherNode) => {
-  const size = NODE_SIZE_BY_TYPE[node.type] ?? NODE_SIZE_BY_TYPE.note;
-  const nx = node.position?.x ?? 0;
-  const ny = node.position?.y ?? 0;
-  const cx = nx + size.width / 2;
-  const cy = ny + size.height / 2;
-
-  const otherSize = NODE_SIZE_BY_TYPE[otherNode.type] ?? NODE_SIZE_BY_TYPE.note;
-  const ox = (otherNode.position?.x ?? 0) + otherSize.width / 2;
-  const oy = (otherNode.position?.y ?? 0) + otherSize.height / 2;
-
-  const dx = ox - cx;
-  const dy = oy - cy;
-
-  if (Math.abs(dx) > Math.abs(dy)) {
-    return dx >= 0 ? { x: nx + size.width, y: cy } : { x: nx, y: cy };
-  }
-
-  return dy >= 0 ? { x: cx, y: ny + size.height } : { x: cx, y: ny };
-};
-
-const buildCurve = (sourcePoint, targetPoint) => {
-  const dx = targetPoint.x - sourcePoint.x;
-  const dy = targetPoint.y - sourcePoint.y;
-
-  if (Math.abs(dx) > Math.abs(dy)) {
-    const control = clamp(Math.abs(dx) * 0.35, 40, 200);
-    const c1 = { x: sourcePoint.x + Math.sign(dx || 1) * control, y: sourcePoint.y };
-    const c2 = { x: targetPoint.x - Math.sign(dx || 1) * control, y: targetPoint.y };
-    return {
-      path: `M ${sourcePoint.x} ${sourcePoint.y} C ${c1.x} ${c1.y}, ${c2.x} ${c2.y}, ${targetPoint.x} ${targetPoint.y}`,
-      source: sourcePoint,
-      c1,
-      c2,
-      target: targetPoint
-    };
-  }
-
-  const control = clamp(Math.abs(dy) * 0.35, 40, 200);
-  const c1 = { x: sourcePoint.x, y: sourcePoint.y + Math.sign(dy || 1) * control };
-  const c2 = { x: targetPoint.x, y: targetPoint.y - Math.sign(dy || 1) * control };
-  return {
-    path: `M ${sourcePoint.x} ${sourcePoint.y} C ${c1.x} ${c1.y}, ${c2.x} ${c2.y}, ${targetPoint.x} ${targetPoint.y}`,
-    source: sourcePoint,
-    c1,
-    c2,
-    target: targetPoint
-  };
-};
-
-const bezierPoint = (curve, t) => {
-  const p0 = curve.source;
-  const p1 = curve.c1;
-  const p2 = curve.c2;
-  const p3 = curve.target;
-  const mt = 1 - t;
-  const mt2 = mt * mt;
-  const t2 = t * t;
-
-  return {
-    x: mt2 * mt * p0.x + 3 * mt2 * t * p1.x + 3 * mt * t2 * p2.x + t2 * t * p3.x,
-    y: mt2 * mt * p0.y + 3 * mt2 * t * p1.y + 3 * mt * t2 * p2.y + t2 * t * p3.y
-  };
-};
-
-export const renderEdgesSvg = (edgeLayerEl, nodes = [], edges = [], selectedEdgeId = null) => {
-  if (!edgeLayerEl) return;
-
-  const nodeById = new Map(nodes.map((node) => [node.id, node]));
-  const defs = `
-    <defs>
-      <marker id="mg-arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto">
-        <path d="M 0 0 L 10 5 L 0 10 z" class="graph-edge-arrow"></path>
-      </marker>
-    </defs>
-  `;
-
-  const edgeMarkup = edges
-    .map((edge) => {
-      const source = nodeById.get(edge.source);
-      const target = nodeById.get(edge.target);
-      if (!source || !target) return "";
-
-      const sourcePoint = edgeAnchor(source, target);
-      const targetPoint = edgeAnchor(target, source);
-      const curve = buildCurve(sourcePoint, targetPoint);
-      const rawLabel = String(edge.label ?? "").trim();
-      const labelValue = rawLabel || formatEdgeLabel(edge.type || "");
-      const label = escapeHtml(labelValue);
-      const mid = bezierPoint(curve, 0.5);
-      const labelWidth = clamp(labelValue.length * 6.2 + 18, 44, 170);
-
-      return `
-        <path class="graph-edge-hit-area" data-edge-id="${edge.id}" d="${curve.path}"></path>
-        <path class="graph-edge-path graph-edge-${edge.type} ${edge.id === selectedEdgeId ? "is-selected" : ""}" data-edge-visual-id="${edge.id}" d="${curve.path}" marker-end="url(#mg-arrow)"></path>
-        <g class="graph-edge-label-group" transform="translate(${mid.x}, ${mid.y - 8})">
-          <rect class="graph-edge-label-bg" x="${-labelWidth / 2}" y="-9" width="${labelWidth}" height="18" rx="9" ry="9"></rect>
-          <text class="graph-edge-label" x="0" y="4">${label}</text>
-        </g>
-      `;
-    })
-    .join("");
-
-  edgeLayerEl.innerHTML = `${defs}${edgeMarkup}<path class="graph-edge-draft" data-role="edge-draft" hidden></path>`;
-};
diff --git a/js/components/inspector/inspector-activity.js b/js/components/inspector/inspector-activity.js
deleted file mode 100644
index 3d64b23..0000000
--- a/js/components/inspector/inspector-activity.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import { mockAgentRuntime } from "../../runtime/mock-agent-runtime.js";
-import { EVENTS } from "../../core/event-constants.js";
-import { publish } from "../../core/pan.js";
-import { uiStore } from "../../store/ui-store.js";
-import { emitNodePatch, escapeHtml, numberValue, patchNodeData, textValue } from "./shared.js";
-
-const toActivityEntries = (value) => (Array.isArray(value) ? value : []);
-
-class InspectorActivity extends HTMLElement {
-  #node = null;
-  #running = false;
-
-  set node(value) {
-    this.#node = value ?? null;
-    if (this.isConnected) this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  #patchData(data) {
-    if (this.#node == null) return;
-    emitNodePatch(this, patchNodeData(this.#node, data));
-  }
-
-  async #runNode() {
-    if (!this.#node || this.#running) return;
-    this.#running = true;
-    this.render();
-
-    try {
-      publish(EVENTS.RUNTIME_AGENT_RUN_REQUESTED, {
-        nodeId: this.#node.id,
-        trigger: "inspector_run_node",
-        origin: "inspector-activity"
-      });
-      await mockAgentRuntime.runNode(this.#node.id, { trigger: "inspector_run_node" });
-    } finally {
-      this.#running = false;
-      this.render();
-    }
-  }
-
-  render() {
-    const node = this.#node;
-    if (node == null) {
-      this.innerHTML = '<p class="inspector-empty">Select a node to inspect activity settings.</p>';
-      return;
-    }
-
-    if (node.type !== "agent") {
-      this.innerHTML = `
-        <section class="inspector-group">
-          <h4>Activity</h4>
-          <p class="inspector-help">
-            Agent nodes expose runtime status and events in this tab.
-          </p>
-        </section>
-      `;
-      return;
-    }
-
-    const status = escapeHtml(textValue(node.data?.status ?? "idle"));
-    const confidence = numberValue(node.data?.confidence, 0.5);
-    const fallbackActivity = uiStore
-      .getRuntimeState()
-      .activityItems.filter((entry) => entry?.context?.nodeId === node.id)
-      .map((entry) => ({
-        at: entry?.at ?? entry?.timestamp,
-        level: entry?.level ?? "info",
-        message: entry?.message ?? "(no message)"
-      }));
-
-    const activity = toActivityEntries(node.data?.activityHistory)
-      .concat(fallbackActivity)
-      .filter((entry, index, list) => {
-        const key = `${entry?.at ?? "unknown"}:${entry?.level ?? "info"}:${entry?.message ?? ""}`;
-        return index === list.findIndex((other) => `${other?.at ?? "unknown"}:${other?.level ?? "info"}:${other?.message ?? ""}` === key);
-      })
-      .slice(0, 12);
-    const runHistory = toActivityEntries(node.data?.runHistory).slice(0, 8);
-
-    const activityMarkup = activity.length
-      ? `<ul class="inspector-list">${activity
-          .map((entry) => {
-            const at = entry?.at ? new Date(entry.at).toLocaleTimeString() : "--:--";
-            const level = escapeHtml(textValue(entry?.level ?? "info"));
-            const message = escapeHtml(textValue(entry?.message ?? "(no message)"));
-            return `<li><strong>[${level}]</strong> ${escapeHtml(at)} - ${message}</li>`;
-          })
-          .join("")}</ul>`
-      : '<p class="inspector-help">No runtime events for this node yet.</p>';
-
-    const runHistoryMarkup = runHistory.length
-      ? `<ul class="inspector-list">${runHistory
-          .map((entry) => {
-            const at = entry?.at ? new Date(entry.at).toLocaleTimeString() : "--:--";
-            const runStatus = escapeHtml(textValue(entry?.status ?? "unknown"));
-            const summary = escapeHtml(textValue(entry?.summary ?? "(no summary)"));
-            return `<li><strong>${runStatus}</strong> ${escapeHtml(at)} - ${summary}</li>`;
-          })
-          .join("")}</ul>`
-      : '<p class="inspector-help">No run history for this node yet.</p>';
-
-    this.innerHTML = `
-      <section class="inspector-group">
-        <h4>Runtime Status</h4>
-        <label class="inspector-field">
-          <span>Status</span>
-          <input type="text" data-field="status" value="${status}" />
-        </label>
-        <label class="inspector-field">
-          <span>Confidence</span>
-          <input type="number" min="0" max="1" step="0.01" data-field="confidence" value="${confidence}" />
-        </label>
-        <div class="inspector-inline-row">
-          <button type="button" data-action="run-node" ${this.#running ? "disabled" : ""}>
-            ${this.#running ? "Running..." : "Run Node"}
-          </button>
-        </div>
-      </section>
-
-      <section class="inspector-group">
-        <h4>Recent Runtime Events</h4>
-        ${activityMarkup}
-      </section>
-
-      <section class="inspector-group">
-        <h4>Run History</h4>
-        ${runHistoryMarkup}
-      </section>
-    `;
-
-    this.querySelector('[data-field="status"]')?.addEventListener("change", (event) => {
-      this.#patchData({ status: event.target.value.trim() || "idle" });
-    });
-    this.querySelector('[data-field="confidence"]')?.addEventListener("change", (event) => {
-      const nextConfidence = numberValue(event.target.value, confidence);
-      this.#patchData({ confidence: Math.min(1, Math.max(0, nextConfidence)) });
-    });
-    this.querySelector('[data-action="run-node"]')?.addEventListener("click", () => this.#runNode());
-  }
-}
-
-customElements.define("inspector-activity", InspectorActivity);
diff --git a/js/components/inspector/inspector-automation.js b/js/components/inspector/inspector-automation.js
deleted file mode 100644
index 7d96c34..0000000
--- a/js/components/inspector/inspector-automation.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import {
-  emitNodePatch,
-  escapeHtml,
-  numberValue,
-  patchNodeData,
-  textToJsonLike,
-  textValue
-} from "./shared.js";
-
-class InspectorAutomation extends HTMLElement {
-  #node = null;
-
-  set node(value) {
-    this.#node = value ?? null;
-    if (this.isConnected) this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  #patchData(data) {
-    if (this.#node == null) return;
-    emitNodePatch(this, patchNodeData(this.#node, data));
-  }
-
-  render() {
-    const node = this.#node;
-    if (node == null) {
-      this.innerHTML = '<p class="inspector-empty">Select a node to edit automation settings.</p>';
-      return;
-    }
-
-    if (node.type === "data") {
-      const refreshMode = escapeHtml(textValue(node.data?.refreshMode ?? "manual"));
-      const refreshInterval = numberValue(node.data?.refreshInterval, 0);
-
-      this.innerHTML = `
-        <section class="inspector-group">
-          <h4>Refresh Controls</h4>
-          <label class="inspector-field">
-            <span>Refresh Mode</span>
-            <input type="text" data-field="refreshMode" value="${refreshMode}" />
-          </label>
-          <label class="inspector-field">
-            <span>Refresh Interval (sec)</span>
-            <input type="number" min="0" step="1" data-field="refreshInterval" value="${refreshInterval}" />
-          </label>
-        </section>
-      `;
-
-      this.querySelector('[data-field="refreshMode"]')?.addEventListener("change", (event) => {
-        this.#patchData({ refreshMode: event.target.value.trim() || "manual" });
-      });
-      this.querySelector('[data-field="refreshInterval"]')?.addEventListener("change", (event) => {
-        this.#patchData({ refreshInterval: Math.max(0, numberValue(event.target.value, refreshInterval)) });
-      });
-      return;
-    }
-
-    if (node.type === "agent") {
-      const automation = escapeHtml(
-        typeof node.data?.automation === "string"
-          ? node.data.automation
-          : JSON.stringify(node.data?.automation ?? {}, null, 2)
-      );
-
-      this.innerHTML = `
-        <section class="inspector-group">
-          <h4>Agent Automation</h4>
-          <label class="inspector-field">
-            <span>Automation Settings (JSON)</span>
-            <textarea rows="8" data-field="automation">${automation}</textarea>
-          </label>
-        </section>
-      `;
-
-      this.querySelector('[data-field="automation"]')?.addEventListener("change", (event) => {
-        this.#patchData({ automation: textToJsonLike(event.target.value) });
-      });
-      return;
-    }
-
-    this.innerHTML = `
-      <p class="inspector-help">
-        Automation settings are not defined for this node type.
-      </p>
-    `;
-  }
-}
-
-customElements.define("inspector-automation", InspectorAutomation);
diff --git a/js/components/inspector/inspector-data.js b/js/components/inspector/inspector-data.js
deleted file mode 100644
index 994cf97..0000000
--- a/js/components/inspector/inspector-data.js
+++ /dev/null
@@ -1,263 +0,0 @@
-import { graphStore } from "../../store/graph-store.js";
-import { dataConnectors } from "../../runtime/data-connectors.js";
-import { inferSchema } from "../../runtime/schema-inference.js";
-import {
-  boolValue,
-  emitNodePatch,
-  escapeHtml,
-  jsonToText,
-  patchNodeData,
-  textToJsonLike,
-  textValue
-} from "./shared.js";
-
-const formatLastUpdated = (value) => {
-  if (!value) return "Never";
-  const parsed = new Date(value);
-  if (Number.isNaN(parsed.valueOf())) return String(value);
-  return parsed.toLocaleString();
-};
-
-const previewJson = (value) => {
-  if (value == null) return "(no data loaded)";
-  return jsonToText(value);
-};
-
-class InspectorData extends HTMLElement {
-  #node = null;
-  #refreshing = false;
-
-  set node(value) {
-    this.#node = value ?? null;
-    if (this.isConnected) this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  #patchData(data) {
-    if (this.#node == null) return;
-    emitNodePatch(this, patchNodeData(this.#node, data));
-  }
-
-  #bindAgentDataSourceSelection() {
-    const node = this.#node;
-    if (!node) return;
-
-    this.querySelectorAll('[data-role="data-source-checkbox"]').forEach((input) => {
-      input.addEventListener("change", () => {
-        const selectedIds = [...this.querySelectorAll('[data-role="data-source-checkbox"]:checked')]
-          .map((entry) => entry.value)
-          .filter(Boolean);
-
-        this.#patchData({
-          allowedDataSources: selectedIds,
-          linkedDataCount: selectedIds.length
-        });
-      });
-    });
-
-    this.querySelector('[data-field="inputSchema"]')?.addEventListener("change", (event) => {
-      this.#patchData({ inputSchema: textToJsonLike(event.target.value) });
-    });
-
-    this.querySelector('[data-field="outputSchema"]')?.addEventListener("change", (event) => {
-      this.#patchData({ outputSchema: textToJsonLike(event.target.value) });
-    });
-  }
-
-  #bindDataNodeFields() {
-    this.querySelector('[data-field="sourceType"]')?.addEventListener("change", (event) => {
-      this.#patchData({ sourceType: event.target.value, source: event.target.value });
-    });
-
-    this.querySelector('[data-field="sourcePath"]')?.addEventListener("change", (event) => {
-      this.#patchData({ sourcePath: event.target.value });
-    });
-
-    this.querySelector('[data-field="sourceUrl"]')?.addEventListener("change", (event) => {
-      this.#patchData({ sourceUrl: event.target.value });
-    });
-
-    this.querySelector('[data-field="jsonPath"]')?.addEventListener("change", (event) => {
-      this.#patchData({ jsonPath: event.target.value });
-    });
-
-    this.querySelector('[data-field="refreshMode"]')?.addEventListener("change", (event) => {
-      this.#patchData({ refreshMode: event.target.value });
-    });
-
-    this.querySelector('[data-field="refreshInterval"]')?.addEventListener("change", (event) => {
-      const interval = Number(event.target.value);
-      this.#patchData({ refreshInterval: Number.isFinite(interval) && interval > 0 ? interval : 60 });
-    });
-
-    this.querySelector('[data-field="readonly"]')?.addEventListener("change", (event) => {
-      this.#patchData({ readonly: event.target.checked });
-    });
-
-    this.querySelector('[data-action="refresh-data"]')?.addEventListener("click", async () => {
-      if (!this.#node || this.#refreshing) return;
-      this.#refreshing = true;
-      this.render();
-
-      try {
-        await dataConnectors.refresh(this.#node.id, {
-          reason: "manual",
-          force: true
-        });
-      } catch {
-        // data-connectors publishes an activity entry for failures
-      } finally {
-        this.#refreshing = false;
-        this.render();
-      }
-    });
-  }
-
-  render() {
-    const node = this.#node;
-    if (node == null) {
-      this.innerHTML = '<p class="inspector-empty">Select a node to edit data bindings.</p>';
-      return;
-    }
-
-    if (node.type === "agent") {
-      const dataNodes = graphStore
-        .getNodes()
-        .filter((entry) => entry.type === "data")
-        .sort((a, b) => a.label.localeCompare(b.label));
-
-      const selectedSources = new Set(
-        Array.isArray(node.data?.allowedDataSources) ? node.data.allowedDataSources : []
-      );
-
-      const inputSchema = escapeHtml(jsonToText(node.data?.inputSchema));
-      const outputSchema = escapeHtml(jsonToText(node.data?.outputSchema));
-
-      this.innerHTML = `
-        <section class="inspector-group">
-          <h4>Agent Data Sources</h4>
-          <p class="inspector-help">Select data nodes this agent can access.</p>
-          <div class="inspector-source-list">
-            ${
-              dataNodes.length
-                ? dataNodes
-                    .map(
-                      (entry) => `
-                        <label class="inspector-source-item">
-                          <input
-                            type="checkbox"
-                            data-role="data-source-checkbox"
-                            value="${escapeHtml(entry.id)}"
-                            ${selectedSources.has(entry.id) ? "checked" : ""}
-                          />
-                          <span>${escapeHtml(entry.label)} <code>${escapeHtml(entry.id)}</code></span>
-                        </label>
-                      `
-                    )
-                    .join("")
-                : '<p class="inspector-help">No data nodes found in graph.</p>'
-            }
-          </div>
-          <label class="inspector-field">
-            <span>Input Schema (JSON)</span>
-            <textarea rows="6" data-field="inputSchema">${inputSchema}</textarea>
-          </label>
-          <label class="inspector-field">
-            <span>Output Schema (JSON)</span>
-            <textarea rows="6" data-field="outputSchema">${outputSchema}</textarea>
-          </label>
-        </section>
-      `;
-
-      this.#bindAgentDataSourceSelection();
-      return;
-    }
-
-    if (node.type === "data") {
-      const sourceType = textValue(node.data?.sourceType ?? node.data?.source ?? "json").toLowerCase();
-      const sourcePath = escapeHtml(textValue(node.data?.sourcePath));
-      const sourceUrl = escapeHtml(textValue(node.data?.sourceUrl));
-      const jsonPath = escapeHtml(textValue(node.data?.jsonPath));
-      const refreshMode = textValue(node.data?.refreshMode ?? "manual").toLowerCase();
-      const refreshInterval = Number(node.data?.refreshInterval ?? 60);
-      const readonly = boolValue(node.data?.readonly, true);
-      const lastUpdated = formatLastUpdated(node.data?.lastUpdated);
-      const preview = previewJson(node.data?.cachedData);
-      const schemaPreview = jsonToText(node.data?.cachedSchema ?? inferSchema(node.data?.cachedData));
-
-      this.innerHTML = `
-        <section class="inspector-group">
-          <h4>Data Source</h4>
-          <label class="inspector-field">
-            <span>Source Type</span>
-            <select data-field="sourceType">
-              <option value="json" ${sourceType === "json" ? "selected" : ""}>json</option>
-              <option value="api" ${sourceType === "api" ? "selected" : ""}>api</option>
-              <option value="mock" ${sourceType === "mock" ? "selected" : ""}>mock</option>
-            </select>
-          </label>
-          <label class="inspector-field">
-            <span>Source Path</span>
-            <input type="text" data-field="sourcePath" value="${sourcePath}" placeholder="embedded:site_config or market_data.json" />
-          </label>
-          <label class="inspector-field">
-            <span>Source URL</span>
-            <input type="url" data-field="sourceUrl" value="${sourceUrl}" placeholder="https://... or /data/sample/file.json" />
-          </label>
-          <label class="inspector-field">
-            <span>JSON Path</span>
-            <input type="text" data-field="jsonPath" value="${jsonPath}" placeholder="$.items[0] or items.0" />
-          </label>
-          <label class="inspector-field">
-            <span>Refresh Mode</span>
-            <select data-field="refreshMode">
-              <option value="manual" ${refreshMode === "manual" ? "selected" : ""}>manual</option>
-              <option value="periodic" ${refreshMode === "periodic" ? "selected" : ""}>periodic</option>
-              <option value="onOpen" ${refreshMode === "onopen" ? "selected" : ""}>onOpen</option>
-            </select>
-          </label>
-          <label class="inspector-field">
-            <span>Refresh Interval (seconds)</span>
-            <input type="number" min="5" step="1" data-field="refreshInterval" value="${
-              Number.isFinite(refreshInterval) && refreshInterval > 0 ? refreshInterval : 60
-            }" />
-          </label>
-          <label class="inspector-field checkbox">
-            <input type="checkbox" data-field="readonly" ${readonly ? "checked" : ""} />
-            <span>Read-only</span>
-          </label>
-          <div class="inspector-inline-row">
-            <button type="button" data-action="refresh-data" ${this.#refreshing ? "disabled" : ""}>
-              ${this.#refreshing ? "Refreshing..." : "Refresh now"}
-            </button>
-            <span class="inspector-last-updated">Last updated: ${escapeHtml(lastUpdated)}</span>
-          </div>
-        </section>
-
-        <section class="inspector-group">
-          <h4>JSON Preview</h4>
-          <pre class="inspector-preview">${escapeHtml(preview)}</pre>
-        </section>
-
-        <section class="inspector-group">
-          <h4>Schema Preview</h4>
-          <pre class="inspector-preview">${escapeHtml(schemaPreview)}</pre>
-        </section>
-      `;
-
-      this.#bindDataNodeFields();
-      return;
-    }
-
-    this.innerHTML = `
-      <p class="inspector-help">
-        This node type does not expose dedicated data-source fields in this tab.
-      </p>
-    `;
-  }
-}
-
-customElements.define("inspector-data", InspectorData);
diff --git a/js/components/inspector/inspector-output.js b/js/components/inspector/inspector-output.js
deleted file mode 100644
index 1f5df21..0000000
--- a/js/components/inspector/inspector-output.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import {
-  emitNodePatch,
-  escapeHtml,
-  jsonToText,
-  patchNodeData,
-  textToJsonLike,
-  textValue
-} from "./shared.js";
-
-class InspectorOutput extends HTMLElement {
-  #node = null;
-
-  set node(value) {
-    this.#node = value ?? null;
-    if (this.isConnected) this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  #patchData(data) {
-    if (this.#node == null) return;
-    emitNodePatch(this, patchNodeData(this.#node, data));
-  }
-
-  render() {
-    const node = this.#node;
-    if (node == null) {
-      this.innerHTML = '<p class="inspector-empty">Select a node to edit output settings.</p>';
-      return;
-    }
-
-    if (node.type === "agent") {
-      const outputSchema = escapeHtml(jsonToText(node.data?.outputSchema));
-      const lastRunSummary = escapeHtml(textValue(node.data?.lastRunSummary));
-      const lastOutput = escapeHtml(jsonToText(node.data?.lastOutput));
-
-      this.innerHTML = `
-        <section class="inspector-group">
-          <h4>Agent Output</h4>
-          <label class="inspector-field">
-            <span>Last Run Summary</span>
-            <textarea rows="3" data-field="lastRunSummary">${lastRunSummary}</textarea>
-          </label>
-          <label class="inspector-field">
-            <span>Output Schema (JSON)</span>
-            <textarea rows="7" data-field="outputSchema">${outputSchema}</textarea>
-          </label>
-          <label class="inspector-field">
-            <span>Last Output (JSON)</span>
-            <textarea rows="10" data-field="lastOutput">${lastOutput}</textarea>
-          </label>
-        </section>
-      `;
-
-      this.querySelector('[data-field="lastRunSummary"]')?.addEventListener("change", (event) => {
-        this.#patchData({ lastRunSummary: event.target.value });
-      });
-      this.querySelector('[data-field="outputSchema"]')?.addEventListener("change", (event) => {
-        this.#patchData({ outputSchema: textToJsonLike(event.target.value) });
-      });
-      this.querySelector('[data-field="lastOutput"]')?.addEventListener("change", (event) => {
-        this.#patchData({ lastOutput: textToJsonLike(event.target.value) });
-      });
-      return;
-    }
-
-    if (node.type === "transformer" || node.type === "view" || node.type === "action") {
-      const outputTemplate = escapeHtml(textValue(node.data?.outputTemplate));
-
-      this.innerHTML = `
-        <section class="inspector-group">
-          <h4>Output</h4>
-          <label class="inspector-field">
-            <span>Output Template</span>
-            <textarea rows="8" data-field="outputTemplate">${outputTemplate}</textarea>
-          </label>
-        </section>
-      `;
-
-      this.querySelector('[data-field="outputTemplate"]')?.addEventListener("change", (event) => {
-        this.#patchData({ outputTemplate: event.target.value });
-      });
-      return;
-    }
-
-    this.innerHTML = `
-      <p class="inspector-help">
-        This node type has no output-specific controls in this tab.
-      </p>
-    `;
-  }
-}
-
-customElements.define("inspector-output", InspectorOutput);
diff --git a/js/components/inspector/inspector-overview.js b/js/components/inspector/inspector-overview.js
deleted file mode 100644
index 6acba42..0000000
--- a/js/components/inspector/inspector-overview.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import {
-  emitNodePatch,
-  escapeHtml,
-  patchNodeData,
-  textToList,
-  textValue
-} from "./shared.js";
-
-class InspectorOverview extends HTMLElement {
-  #node = null;
-
-  set node(value) {
-    this.#node = value ?? null;
-    if (this.isConnected) this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  #applyPatch(patch) {
-    if (this.#node == null) return;
-    const next = { ...this.#node, ...patch };
-    if (patch.data) {
-      next.data = { ...(this.#node.data ?? {}), ...patch.data };
-    }
-    this.#node = next;
-    emitNodePatch(this, patch);
-  }
-
-  render() {
-    const node = this.#node;
-    if (node == null) {
-      this.innerHTML = '<p class="inspector-empty">Select a node to edit overview fields.</p>';
-      return;
-    }
-
-    const type = node.type ?? "note";
-    const title = escapeHtml(textValue(node.label));
-    const description = escapeHtml(textValue(node.description));
-
-    if (type === "note") {
-      const color = escapeHtml(textValue(node.data?.color ?? "#fff9b1"));
-      const tags = escapeHtml(
-        Array.isArray(node.data?.tags) ? node.data.tags.join("\n") : textValue(node.data?.tags)
-      );
-
-      this.innerHTML = `
-        <section class="inspector-group">
-          <h4>Note</h4>
-          <label class="inspector-field">
-            <span>Title</span>
-            <input type="text" data-field="title" value="${title}" />
-          </label>
-          <label class="inspector-field">
-            <span>Body</span>
-            <textarea data-field="body" rows="6">${description}</textarea>
-          </label>
-        </section>
-        <section class="inspector-group">
-          <h4>Appearance</h4>
-          <label class="inspector-field">
-            <span>Color</span>
-            <input type="color" data-field="color" value="${color || "#fff9b1"}" />
-          </label>
-          <label class="inspector-field">
-            <span>Tags (comma or newline)</span>
-            <textarea data-field="tags" rows="3">${tags}</textarea>
-          </label>
-        </section>
-      `;
-
-      this.querySelector('[data-field="title"]')?.addEventListener("change", (event) => {
-        this.#applyPatch({ label: event.target.value.trim() || "Untitled Note" });
-      });
-      this.querySelector('[data-field="body"]')?.addEventListener("change", (event) => {
-        this.#applyPatch({ description: event.target.value });
-      });
-      this.querySelector('[data-field="color"]')?.addEventListener("change", (event) => {
-        this.#applyPatch(patchNodeData(node, { color: event.target.value }));
-      });
-      this.querySelector('[data-field="tags"]')?.addEventListener("change", (event) => {
-        this.#applyPatch(patchNodeData(node, { tags: textToList(event.target.value) }));
-      });
-      return;
-    }
-
-    this.innerHTML = `
-      <section class="inspector-group">
-        <h4>General</h4>
-        <label class="inspector-field">
-          <span>Title</span>
-          <input type="text" data-field="title" value="${title}" />
-        </label>
-        <label class="inspector-field">
-          <span>Description</span>
-          <textarea data-field="description" rows="5">${description}</textarea>
-        </label>
-      </section>
-      <section class="inspector-group">
-        <h4>Node Type</h4>
-        <p class="inspector-help">Editing ${escapeHtml(type)} node.</p>
-      </section>
-    `;
-
-    this.querySelector('[data-field="title"]')?.addEventListener("change", (event) => {
-      this.#applyPatch({ label: event.target.value.trim() || "Untitled Node" });
-    });
-    this.querySelector('[data-field="description"]')?.addEventListener("change", (event) => {
-      this.#applyPatch({ description: event.target.value });
-    });
-  }
-}
-
-customElements.define("inspector-overview", InspectorOverview);
diff --git a/js/components/inspector/inspector-permissions.js b/js/components/inspector/inspector-permissions.js
deleted file mode 100644
index d4ff9d6..0000000
--- a/js/components/inspector/inspector-permissions.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import {
-  boolValue,
-  emitNodePatch,
-  escapeHtml,
-  jsonToText,
-  patchNodeData,
-  textToJsonLike
-} from "./shared.js";
-
-class InspectorPermissions extends HTMLElement {
-  #node = null;
-
-  set node(value) {
-    this.#node = value ?? null;
-    if (this.isConnected) this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  #patchData(data) {
-    if (this.#node == null) return;
-    emitNodePatch(this, patchNodeData(this.#node, data));
-  }
-
-  render() {
-    const node = this.#node;
-    if (node == null) {
-      this.innerHTML = '<p class="inspector-empty">Select a node to edit permissions.</p>';
-      return;
-    }
-
-    if (node.type !== "agent") {
-      this.innerHTML = `
-        <p class="inspector-help">
-          Permissions controls are available for agent nodes.
-        </p>
-      `;
-      return;
-    }
-
-    const memoryEnabled = boolValue(node.data?.memoryEnabled, false);
-    const permissions = escapeHtml(jsonToText(node.data?.permissions));
-
-    this.innerHTML = `
-      <section class="inspector-group">
-        <h4>Permissions</h4>
-        <label class="inspector-field checkbox">
-          <input type="checkbox" data-field="memoryEnabled" ${memoryEnabled ? "checked" : ""} />
-          <span>Memory Enabled</span>
-        </label>
-        <label class="inspector-field">
-          <span>Permissions (JSON)</span>
-          <textarea rows="8" data-field="permissions">${permissions}</textarea>
-        </label>
-      </section>
-    `;
-
-    this.querySelector('[data-field="memoryEnabled"]')?.addEventListener("change", (event) => {
-      this.#patchData({ memoryEnabled: event.target.checked });
-    });
-    this.querySelector('[data-field="permissions"]')?.addEventListener("change", (event) => {
-      this.#patchData({ permissions: textToJsonLike(event.target.value) });
-    });
-  }
-}
-
-customElements.define("inspector-permissions", InspectorPermissions);
diff --git a/js/components/inspector/inspector-prompt.js b/js/components/inspector/inspector-prompt.js
deleted file mode 100644
index 4a61d79..0000000
--- a/js/components/inspector/inspector-prompt.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { emitNodePatch, escapeHtml, patchNodeData, textValue } from "./shared.js";
-
-class InspectorPrompt extends HTMLElement {
-  #node = null;
-
-  set node(value) {
-    this.#node = value ?? null;
-    if (this.isConnected) this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  #patchAgentData(partialData) {
-    if (this.#node == null) return;
-    emitNodePatch(this, patchNodeData(this.#node, partialData));
-  }
-
-  render() {
-    const node = this.#node;
-    if (node == null) {
-      this.innerHTML = '<p class="inspector-empty">Select a node to edit prompt settings.</p>';
-      return;
-    }
-
-    if (node.type !== "agent") {
-      this.innerHTML = `
-        <p class="inspector-help">
-          Prompt settings are available for agent nodes. Current type: <strong>${escapeHtml(
-            node.type
-          )}</strong>.
-        </p>
-      `;
-      return;
-    }
-
-    const systemPrompt = escapeHtml(textValue(node.data?.systemPrompt));
-    const objective = escapeHtml(textValue(node.data?.objective));
-    const mode = escapeHtml(textValue(node.data?.mode ?? "orchestrate"));
-
-    this.innerHTML = `
-      <section class="inspector-group">
-        <h4>Prompt</h4>
-        <label class="inspector-field">
-          <span>System Prompt</span>
-          <textarea rows="8" data-field="systemPrompt">${systemPrompt}</textarea>
-        </label>
-        <label class="inspector-field">
-          <span>Objective</span>
-          <textarea rows="4" data-field="objective">${objective}</textarea>
-        </label>
-        <label class="inspector-field">
-          <span>Mode</span>
-          <input type="text" data-field="mode" value="${mode}" />
-        </label>
-      </section>
-    `;
-
-    this.querySelector('[data-field="systemPrompt"]')?.addEventListener("change", (event) => {
-      this.#patchAgentData({ systemPrompt: event.target.value });
-    });
-    this.querySelector('[data-field="objective"]')?.addEventListener("change", (event) => {
-      this.#patchAgentData({ objective: event.target.value });
-    });
-    this.querySelector('[data-field="mode"]')?.addEventListener("change", (event) => {
-      this.#patchAgentData({ mode: event.target.value.trim() || "orchestrate" });
-    });
-  }
-}
-
-customElements.define("inspector-prompt", InspectorPrompt);
diff --git a/js/components/inspector/inspector-tools.js b/js/components/inspector/inspector-tools.js
deleted file mode 100644
index 51a048a..0000000
--- a/js/components/inspector/inspector-tools.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import {
-  emitNodePatch,
-  escapeHtml,
-  jsonToText,
-  patchNodeData,
-  textToJsonLike,
-  textToList,
-  textValue
-} from "./shared.js";
-
-class InspectorTools extends HTMLElement {
-  #node = null;
-
-  set node(value) {
-    this.#node = value ?? null;
-    if (this.isConnected) this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  #patchData(data) {
-    if (this.#node == null) return;
-    emitNodePatch(this, patchNodeData(this.#node, data));
-  }
-
-  render() {
-    const node = this.#node;
-    if (node == null) {
-      this.innerHTML = '<p class="inspector-empty">Select a node to edit tool settings.</p>';
-      return;
-    }
-
-    if (node.type === "agent") {
-      const allowedTools = escapeHtml(
-        Array.isArray(node.data?.allowedTools)
-          ? node.data.allowedTools.join("\n")
-          : textValue(node.data?.allowedTools)
-      );
-
-      this.innerHTML = `
-        <section class="inspector-group">
-          <h4>Allowed Tools</h4>
-          <label class="inspector-field">
-            <span>Tool IDs (comma or newline)</span>
-            <textarea rows="7" data-field="allowedTools">${allowedTools}</textarea>
-          </label>
-        </section>
-      `;
-
-      this.querySelector('[data-field="allowedTools"]')?.addEventListener("change", (event) => {
-        this.#patchData({ allowedTools: textToList(event.target.value) });
-      });
-      return;
-    }
-
-    if (node.type === "transformer" || node.type === "view" || node.type === "action") {
-      const config = escapeHtml(jsonToText(node.data?.config));
-
-      this.innerHTML = `
-        <section class="inspector-group">
-          <h4>${escapeHtml(node.type)} Config</h4>
-          <label class="inspector-field">
-            <span>Config (JSON)</span>
-            <textarea rows="10" data-field="config">${config}</textarea>
-          </label>
-        </section>
-      `;
-
-      this.querySelector('[data-field="config"]')?.addEventListener("change", (event) => {
-        this.#patchData({ config: textToJsonLike(event.target.value) });
-      });
-      return;
-    }
-
-    this.innerHTML = `
-      <p class="inspector-help">
-        This node type has no tool restrictions in this tab.
-      </p>
-    `;
-  }
-}
-
-customElements.define("inspector-tools", InspectorTools);
diff --git a/js/components/nodes/action-node.js b/js/components/nodes/action-node.js
deleted file mode 100644
index 5edfbff..0000000
--- a/js/components/nodes/action-node.js
+++ /dev/null
@@ -1,36 +0,0 @@
-class ActionNode extends HTMLElement {
-  #node = null;
-
-  static get observedAttributes() {
-    return ["label", "description"];
-  }
-
-  set node(value) {
-    this.#node = value;
-    this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  attributeChangedCallback() {
-    if (this.isConnected) this.render();
-  }
-
-  render() {
-    const node = this.#node ?? {};
-    const label = node.label ?? this.getAttribute("label") ?? "Action";
-    const description = node.description ?? this.getAttribute("description") ?? "Executes operation.";
-
-    this.className = "mg-node action compact";
-    this.innerHTML = `
-      <div class="compact-title">Action</div>
-      <button class="node-connect-handle" type="button" data-action="connect-handle" title="Connect from this node" aria-label="Connect from this node"></button>
-      <h4>${label}</h4>
-      <p>${description}</p>
-    `;
-  }
-}
-
-customElements.define("action-node", ActionNode);
diff --git a/js/components/nodes/agent-node.js b/js/components/nodes/agent-node.js
deleted file mode 100644
index 87a046b..0000000
--- a/js/components/nodes/agent-node.js
+++ /dev/null
@@ -1,58 +0,0 @@
-const toStatusClass = (status) => String(status ?? "unknown").toLowerCase().replace(/\s+/g, "-");
-
-class AgentNode extends HTMLElement {
-  #node = null;
-
-  static get observedAttributes() {
-    return ["label", "description"];
-  }
-
-  set node(value) {
-    this.#node = value;
-    this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  attributeChangedCallback() {
-    if (this.isConnected) this.render();
-  }
-
-  render() {
-    const node = this.#node ?? {};
-    const label = node.label ?? this.getAttribute("label") ?? "Agent";
-    const description = node.description ?? this.getAttribute("description") ?? "";
-    const role = node.data?.role ?? "Agent";
-    const mode = node.data?.mode ?? "auto";
-    const status = node.data?.status ?? "unknown";
-    const linkedByIds = Array.isArray(node.data?.allowedDataSources)
-      ? node.data.allowedDataSources.length
-      : 0;
-    const linkedByCount = Number(node.data?.linkedDataCount ?? 0);
-    const linkedDataCount = Math.max(linkedByIds, linkedByCount);
-    const confidence = Number(node.data?.confidence ?? 0.5);
-    const safeConfidence = Number.isFinite(confidence) ? confidence : 0.5;
-    const lastRunSummary = node.data?.lastRunSummary ?? "No runs yet.";
-
-    this.className = `mg-node agent agent-status-${toStatusClass(status)}`;
-    this.innerHTML = `
-      <div class="node-title-row">
-        <h4>${label}</h4>
-        <span class="status-badge status-${toStatusClass(status)}">${status}</span>
-        <button class="node-connect-handle" type="button" data-action="connect-handle" title="Connect from this node" aria-label="Connect from this node"></button>
-      </div>
-      <p>${description}</p>
-      <div class="node-meta-grid">
-        <span>Role</span><strong>${role}</strong>
-        <span>Mode</span><strong>${mode}</strong>
-        <span>Linked Data</span><strong>${linkedDataCount}</strong>
-        <span>Confidence</span><strong>${Math.round(safeConfidence * 100)}%</strong>
-      </div>
-      <p class="node-runtime-summary">${lastRunSummary}</p>
-    `;
-  }
-}
-
-customElements.define("agent-node", AgentNode);
diff --git a/js/components/nodes/data-node.js b/js/components/nodes/data-node.js
deleted file mode 100644
index c93ebfb..0000000
--- a/js/components/nodes/data-node.js
+++ /dev/null
@@ -1,47 +0,0 @@
-class DataNode extends HTMLElement {
-  #node = null;
-
-  static get observedAttributes() {
-    return ["label", "description"];
-  }
-
-  set node(value) {
-    this.#node = value;
-    this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  attributeChangedCallback() {
-    if (this.isConnected) this.render();
-  }
-
-  render() {
-    const node = this.#node ?? {};
-    const label = node.label ?? this.getAttribute("label") ?? "Data";
-    const description = node.description ?? this.getAttribute("description") ?? "";
-    const sourceType = String(node.data?.sourceType ?? node.data?.source ?? "json").toUpperCase();
-    const readonly = node.data?.readonly !== false;
-    const lastUpdated = node.data?.lastUpdated
-      ? new Date(node.data.lastUpdated).toLocaleTimeString()
-      : "Never";
-
-    this.className = "mg-node data";
-    this.innerHTML = `
-      <div class="node-title-row">
-        <h4>${label}</h4>
-        <span class="readonly-badge">${readonly ? "Read-only" : "Writable"}</span>
-        <button class="node-connect-handle" type="button" data-action="connect-handle" title="Connect from this node" aria-label="Connect from this node"></button>
-      </div>
-      <p>${description}</p>
-      <div class="node-meta-grid">
-        <span>Source</span><strong>${sourceType}</strong>
-        <span>Updated</span><strong>${lastUpdated}</strong>
-      </div>
-    `;
-  }
-}
-
-customElements.define("data-node", DataNode);
diff --git a/js/components/nodes/note-node.js b/js/components/nodes/note-node.js
deleted file mode 100644
index cb3c419..0000000
--- a/js/components/nodes/note-node.js
+++ /dev/null
@@ -1,35 +0,0 @@
-class NoteNode extends HTMLElement {
-  #node = null;
-
-  static get observedAttributes() {
-    return ["label", "description"];
-  }
-
-  set node(value) {
-    this.#node = value;
-    this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  attributeChangedCallback() {
-    if (this.isConnected) this.render();
-  }
-
-  render() {
-    const label = this.#node?.label ?? this.getAttribute("label") ?? "Note";
-    const description =
-      this.#node?.description ?? this.getAttribute("description") ?? "Add context for the graph.";
-
-    this.className = "mg-node note";
-    this.innerHTML = `
-      <h4>${label}</h4>
-      <button class="node-connect-handle" type="button" data-action="connect-handle" title="Connect from this node" aria-label="Connect from this node"></button>
-      <p>${description}</p>
-    `;
-  }
-}
-
-customElements.define("note-node", NoteNode);
diff --git a/js/components/nodes/transformer-node.js b/js/components/nodes/transformer-node.js
deleted file mode 100644
index 860f0cb..0000000
--- a/js/components/nodes/transformer-node.js
+++ /dev/null
@@ -1,36 +0,0 @@
-class TransformerNode extends HTMLElement {
-  #node = null;
-
-  static get observedAttributes() {
-    return ["label", "description"];
-  }
-
-  set node(value) {
-    this.#node = value;
-    this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  attributeChangedCallback() {
-    if (this.isConnected) this.render();
-  }
-
-  render() {
-    const node = this.#node ?? {};
-    const label = node.label ?? this.getAttribute("label") ?? "Transformer";
-    const description = node.description ?? this.getAttribute("description") ?? "Transforms inputs.";
-
-    this.className = "mg-node transformer compact";
-    this.innerHTML = `
-      <div class="compact-title">Transformer</div>
-      <button class="node-connect-handle" type="button" data-action="connect-handle" title="Connect from this node" aria-label="Connect from this node"></button>
-      <h4>${label}</h4>
-      <p>${description}</p>
-    `;
-  }
-}
-
-customElements.define("transformer-node", TransformerNode);
diff --git a/js/components/nodes/view-node.js b/js/components/nodes/view-node.js
deleted file mode 100644
index cf15a86..0000000
--- a/js/components/nodes/view-node.js
+++ /dev/null
@@ -1,36 +0,0 @@
-class ViewNode extends HTMLElement {
-  #node = null;
-
-  static get observedAttributes() {
-    return ["label", "description"];
-  }
-
-  set node(value) {
-    this.#node = value;
-    this.render();
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  attributeChangedCallback() {
-    if (this.isConnected) this.render();
-  }
-
-  render() {
-    const node = this.#node ?? {};
-    const label = node.label ?? this.getAttribute("label") ?? "View";
-    const description = node.description ?? this.getAttribute("description") ?? "Rendered insight panel.";
-
-    this.className = "mg-node view compact";
-    this.innerHTML = `
-      <div class="compact-title">View</div>
-      <button class="node-connect-handle" type="button" data-action="connect-handle" title="Connect from this node" aria-label="Connect from this node"></button>
-      <h4>${label}</h4>
-      <p>${description}</p>
-    `;
-  }
-}
-
-customElements.define("view-node", ViewNode);
diff --git a/js/core/seed-data.js b/js/core/seed-data.js
index 34d7598..6917de3 100644
--- a/js/core/seed-data.js
+++ b/js/core/seed-data.js
@@ -1,295 +1,514 @@
 import { createGraphDocument } from "./graph-document.js";
 import { EDGE_TYPES, NODE_TYPES } from "./types.js";
 
+/**
+ * Spain margins demo — the CAR Protocol seed example.
+ * ~15 chunks across all 3 tiers, pre-formed clusters, questions,
+ * one active contradiction (22% vs 18%), one prospective trigger.
+ */
 export const seedDocument = createGraphDocument({
-  id: "graph_seed_product_launch",
-  title: "MindGraph AI - Product Launch Plan",
-  version: "0.2.0",
-  nodes: [
-    {
-      id: "agent_product_launch_plan",
-      type: NODE_TYPES.AGENT,
-      label: "Product Launch Plan",
-      description: "Coordinator orchestrating launch agents and deliverables.",
-      position: { x: 860, y: 180 },
-      data: {
-        role: "Agent Coordinator",
-        mode: "orchestrate",
-        status: "active",
-        confidence: 0.58,
-        lastRunSummary: "",
-        lastOutput: null,
-        inputSchema: {},
-        outputSchema: {},
-        runHistory: [],
-        activityHistory: [],
-        allowedDataSources: [
-          "data_site_config",
-          "data_market_data",
-          "data_ads_api_mock",
-          "data_support_db"
-        ],
-        linkedDataCount: 4
-      }
-    },
-    {
-      id: "agent_website_builder",
-      type: NODE_TYPES.AGENT,
-      label: "Website Builder",
-      description: "Builds and ships launch pages from approved config.",
-      position: { x: 260, y: 470 },
-      data: {
-        role: "Agent",
-        mode: "build",
-        status: "ready",
-        confidence: 0.51,
-        lastRunSummary: "",
-        lastOutput: null,
-        inputSchema: {},
-        outputSchema: {},
-        runHistory: [],
-        activityHistory: [],
-        allowedDataSources: ["data_site_config"],
-        linkedDataCount: 1
-      }
-    },
-    {
-      id: "agent_market_analyst",
-      type: NODE_TYPES.AGENT,
-      label: "Market Analyst",
-      description: "Monitors signals, trends, and competitive movement.",
-      position: { x: 690, y: 470 },
-      data: {
-        role: "Agent",
-        mode: "analyze",
-        status: "active",
-        confidence: 0.57,
-        lastRunSummary: "",
-        lastOutput: null,
-        inputSchema: {},
-        outputSchema: {},
-        runHistory: [],
-        activityHistory: [],
-        allowedDataSources: ["data_market_data"],
-        linkedDataCount: 1
-      }
-    },
-    {
-      id: "agent_ad_campaign_bot",
-      type: NODE_TYPES.AGENT,
-      label: "Ad Campaign Bot",
-      description: "Optimizes campaign channels and spend targets.",
-      position: { x: 1120, y: 470 },
-      data: {
-        role: "Agent",
-        mode: "optimize",
-        status: "idle",
-        confidence: 0.49,
-        lastRunSummary: "",
-        lastOutput: null,
-        inputSchema: {},
-        outputSchema: {},
-        runHistory: [],
-        activityHistory: [],
-        allowedDataSources: ["data_ads_api_mock"],
-        linkedDataCount: 1
-      }
-    },
-    {
-      id: "agent_support_agent",
-      type: NODE_TYPES.AGENT,
-      label: "Support Agent",
-      description: "Tracks user issues and launch readiness feedback.",
-      position: { x: 1550, y: 470 },
-      data: {
-        role: "Agent",
-        mode: "assist",
-        status: "ready",
-        confidence: 0.54,
-        lastRunSummary: "",
-        lastOutput: null,
-        inputSchema: {},
-        outputSchema: {},
-        runHistory: [],
-        activityHistory: [],
-        allowedDataSources: ["data_support_db"],
-        linkedDataCount: 1
-      }
-    },
-    {
-      id: "data_site_config",
-      type: NODE_TYPES.DATA,
-      label: "site_config.json",
-      description: "Website structure and launch copy settings.",
-      position: { x: 220, y: 780 },
-      data: {
-        source: "json",
-        sourceType: "json",
-        sourcePath: "site_config.json",
-        sourceUrl: "",
-        jsonPath: "",
-        refreshMode: "onOpen",
-        refreshInterval: 60,
-        cachedData: null,
-        cachedSchema: null,
-        lastUpdated: "",
-        readonly: true
-      }
-    },
-    {
-      id: "data_market_data",
-      type: NODE_TYPES.DATA,
-      label: "market_data.json",
-      description: "Market intelligence snapshots and trend extracts.",
-      position: { x: 650, y: 780 },
-      data: {
-        source: "json",
-        sourceType: "json",
-        sourcePath: "market_data.json",
-        sourceUrl: "",
-        jsonPath: "",
-        refreshMode: "periodic",
-        refreshInterval: 45,
-        cachedData: null,
-        cachedSchema: null,
-        lastUpdated: "",
-        readonly: true
-      }
-    },
-    {
-      id: "data_ads_api_mock",
-      type: NODE_TYPES.DATA,
-      label: "ads_api_mock",
-      description: "Mock ad-platform metrics and conversion signals.",
-      position: { x: 1080, y: 780 },
-      data: {
-        source: "mock",
-        sourceType: "mock",
-        sourcePath: "ads_api_mock.json",
-        sourceUrl: "",
-        jsonPath: "",
-        refreshMode: "periodic",
-        refreshInterval: 30,
-        cachedData: null,
-        cachedSchema: null,
-        lastUpdated: "",
-        readonly: true
-      }
-    },
-    {
-      id: "data_support_db",
-      type: NODE_TYPES.DATA,
-      label: "support_db.json",
-      description: "Support backlog and issue category records.",
-      position: { x: 1510, y: 780 },
-      data: {
-        source: "json",
-        sourceType: "json",
-        sourcePath: "support_db.json",
-        sourceUrl: "",
-        jsonPath: "",
-        refreshMode: "manual",
-        refreshInterval: 60,
-        cachedData: null,
-        cachedSchema: null,
-        lastUpdated: "",
-        readonly: true
-      }
-    }
-  ],
-  edges: [
-    {
-      id: "edge_parent_website",
-      type: EDGE_TYPES.PARENT_OF,
-      source: "agent_product_launch_plan",
-      target: "agent_website_builder",
-      label: "parent_of"
-    },
-    {
-      id: "edge_parent_market",
-      type: EDGE_TYPES.PARENT_OF,
-      source: "agent_product_launch_plan",
-      target: "agent_market_analyst",
-      label: "parent_of"
-    },
-    {
-      id: "edge_parent_ads",
-      type: EDGE_TYPES.PARENT_OF,
-      source: "agent_product_launch_plan",
-      target: "agent_ad_campaign_bot",
-      label: "parent_of"
-    },
-    {
-      id: "edge_parent_support",
-      type: EDGE_TYPES.PARENT_OF,
-      source: "agent_product_launch_plan",
-      target: "agent_support_agent",
-      label: "parent_of"
-    },
-    {
-      id: "edge_report_website",
-      type: EDGE_TYPES.REPORTS_TO,
-      source: "agent_website_builder",
-      target: "agent_product_launch_plan",
-      label: "reports_to"
-    },
-    {
-      id: "edge_report_market",
-      type: EDGE_TYPES.REPORTS_TO,
-      source: "agent_market_analyst",
-      target: "agent_product_launch_plan",
-      label: "reports_to"
-    },
-    {
-      id: "edge_report_ads",
-      type: EDGE_TYPES.REPORTS_TO,
-      source: "agent_ad_campaign_bot",
-      target: "agent_product_launch_plan",
-      label: "reports_to"
-    },
-    {
-      id: "edge_report_support",
-      type: EDGE_TYPES.REPORTS_TO,
-      source: "agent_support_agent",
-      target: "agent_product_launch_plan",
-      label: "reports_to"
-    },
-    {
-      id: "edge_reads_site_config",
-      type: EDGE_TYPES.READS_FROM,
-      source: "agent_website_builder",
-      target: "data_site_config",
-      label: "reads_from"
-    },
-    {
-      id: "edge_reads_market_data",
-      type: EDGE_TYPES.READS_FROM,
-      source: "agent_market_analyst",
-      target: "data_market_data",
-      label: "reads_from"
-    },
-    {
-      id: "edge_reads_ads_api",
-      type: EDGE_TYPES.READS_FROM,
-      source: "agent_ad_campaign_bot",
-      target: "data_ads_api_mock",
-      label: "reads_from"
-    },
-    {
-      id: "edge_reads_support_db",
-      type: EDGE_TYPES.READS_FROM,
-      source: "agent_support_agent",
-      target: "data_support_db",
-      label: "reads_from"
-    }
-  ],
-  viewport: {
-    x: -120,
-    y: -100,
-    zoom: 1
-  },
-  metadata: {
-    createdBy: "mindgraph-seed",
-    description: "Product launch coordination graph demo"
-  }
+	id: "brain_spain_margins_demo",
+	title: "CAR Brain — Spain Margins Demo",
+	version: "1.0.0",
+	project: null,
+	runner: "claude-code",
+	nodes: [
+		/* ── Tier 1: Raw episodes ── */
+		{
+			id: "chunk_spain_margin_drop",
+			type: NODE_TYPES.CHUNK,
+			label: "Spain margins dropped to 22%",
+			description: "Spain margins dropped from 28% to 22% in Q3",
+			position: { x: -60, y: 20, z: -200 },
+			data: {
+				content:
+					"Spain margins dropped from 28% to 22% in Q3. Logistics costs increased by 15% due to new EU regulations. Idan flagged this as critical during the weekly sync.",
+				tier: 1,
+				source: "user_stated",
+				source_reliability: "high",
+				participants: ["Idan", "Amit"],
+				emotional_tone: "concerned",
+				emotional_intensity: 0.7,
+				stakes_level: "high",
+				topic_tags: ["spain", "margins", "logistics"],
+				entity_tags: ["Spain", "Idan"],
+				decision_made: false,
+				action_items: [
+					"Investigate logistics cost increase",
+					"Review Spain pricing",
+				],
+				status: "open",
+				access_count: 5,
+				last_accessed: new Date().toISOString(),
+				retrieval_cues: ["margin drop", "spain account", "logistics costs"],
+				amendments: [],
+				linked_chunks: ["chunk_logistics_cost", "chunk_spain_pricing"],
+				generated_questions: [],
+			},
+		},
+		{
+			id: "chunk_logistics_cost",
+			type: NODE_TYPES.CHUNK,
+			label: "EU logistics costs up 15%",
+			description: "New EU cross-border regulations increased shipping costs",
+			position: { x: 80, y: -30, z: -200 },
+			data: {
+				content:
+					"New EU cross-border shipping regulations effective July 1 added 15% to logistics costs for Southern European accounts. Affects Spain, Portugal, and Italy.",
+				tier: 1,
+				source: "user_stated",
+				source_reliability: "high",
+				participants: [],
+				emotional_tone: "factual",
+				emotional_intensity: 0.3,
+				stakes_level: "medium",
+				topic_tags: ["logistics", "EU", "regulations", "costs"],
+				entity_tags: ["EU", "Spain", "Portugal", "Italy"],
+				decision_made: false,
+				action_items: [],
+				status: "open",
+				access_count: 3,
+				last_accessed: new Date().toISOString(),
+				retrieval_cues: ["shipping costs", "EU regulations", "southern europe"],
+				amendments: [],
+				linked_chunks: ["chunk_spain_margin_drop"],
+				generated_questions: [],
+			},
+		},
+		{
+			id: "chunk_spain_pricing",
+			type: NODE_TYPES.CHUNK,
+			label: "Spain pricing review scheduled",
+			description: "Pricing review for Spain account set for next quarter",
+			position: { x: -120, y: 80, z: -200 },
+			data: {
+				content:
+					"Pricing review for the Spain account is scheduled for Q4. Idan wants to raise prices by 8% to recover margin loss. Client relationship is strong.",
+				tier: 1,
+				source: "user_stated",
+				source_reliability: "high",
+				participants: ["Idan"],
+				emotional_tone: "hopeful",
+				emotional_intensity: 0.4,
+				stakes_level: "high",
+				topic_tags: ["spain", "pricing", "margins"],
+				entity_tags: ["Spain", "Idan"],
+				decision_made: false,
+				action_items: ["Prepare pricing proposal"],
+				status: "open",
+				access_count: 2,
+				last_accessed: new Date().toISOString(),
+				retrieval_cues: ["pricing review", "price increase", "Q4"],
+				amendments: [],
+				linked_chunks: ["chunk_spain_margin_drop"],
+				generated_questions: [],
+			},
+		},
+		{
+			id: "chunk_contradiction_18",
+			type: NODE_TYPES.CHUNK,
+			label: "Spain margins actually 18%",
+			description: "Updated report shows margins are 18%, not 22%",
+			position: { x: -30, y: -80, z: -200 },
+			data: {
+				content:
+					"Updated financial report from accounting shows Spain margins are actually 18%, not 22% as previously reported. The original figure didn't account for returned shipments.",
+				tier: 1,
+				source: "user_stated",
+				source_reliability: "high",
+				participants: [],
+				emotional_tone: "alarmed",
+				emotional_intensity: 0.8,
+				stakes_level: "high",
+				topic_tags: ["spain", "margins", "accounting"],
+				entity_tags: ["Spain"],
+				decision_made: false,
+				action_items: ["Reconcile margin data"],
+				status: "open",
+				access_count: 4,
+				last_accessed: new Date().toISOString(),
+				retrieval_cues: ["margin correction", "18%", "returned shipments"],
+				amendments: [],
+				linked_chunks: ["chunk_spain_margin_drop"],
+				generated_questions: [],
+			},
+		},
+		{
+			id: "chunk_client_meeting",
+			type: NODE_TYPES.CHUNK,
+			label: "Client meeting went well",
+			description: "Spain client expressed satisfaction with service quality",
+			position: { x: 120, y: 60, z: -200 },
+			data: {
+				content:
+					"Had a great meeting with the Spain client. They're happy with service quality and open to discussing pricing adjustments. Key contact: Maria from procurement.",
+				tier: 1,
+				source: "user_stated",
+				source_reliability: "high",
+				participants: ["Maria"],
+				emotional_tone: "positive",
+				emotional_intensity: 0.5,
+				stakes_level: "medium",
+				topic_tags: ["spain", "client", "relationship"],
+				entity_tags: ["Spain", "Maria"],
+				decision_made: false,
+				action_items: [],
+				status: "resolved",
+				access_count: 2,
+				last_accessed: new Date().toISOString(),
+				retrieval_cues: ["client meeting", "service quality", "Maria"],
+				amendments: [],
+				linked_chunks: [],
+				generated_questions: [],
+			},
+		},
+		{
+			id: "chunk_italy_similar",
+			type: NODE_TYPES.CHUNK,
+			label: "Italy showing similar margin pressure",
+			description: "Italy account also seeing margin compression from EU regs",
+			position: { x: 180, y: -60, z: -200 },
+			data: {
+				content:
+					"Italy account is experiencing similar margin pressure. Down from 25% to 20%. Same EU logistics cost driver. Could be a regional pattern.",
+				tier: 1,
+				source: "user_stated",
+				source_reliability: "medium",
+				participants: [],
+				emotional_tone: "analytical",
+				emotional_intensity: 0.3,
+				stakes_level: "medium",
+				topic_tags: ["italy", "margins", "logistics", "EU"],
+				entity_tags: ["Italy", "EU"],
+				decision_made: false,
+				action_items: [],
+				status: "open",
+				access_count: 1,
+				last_accessed: new Date().toISOString(),
+				retrieval_cues: ["italy margins", "regional pattern"],
+				amendments: [],
+				linked_chunks: ["chunk_logistics_cost"],
+				generated_questions: [],
+			},
+		},
+		{
+			id: "chunk_portugal_ok",
+			type: NODE_TYPES.CHUNK,
+			label: "Portugal margins stable",
+			description: "Portugal account unaffected due to direct shipping route",
+			position: { x: 200, y: 40, z: -200 },
+			data: {
+				content:
+					"Portugal account margins remain stable at 26%. They use a direct shipping route that bypasses the new EU checkpoint regulations.",
+				tier: 1,
+				source: "user_stated",
+				source_reliability: "high",
+				participants: [],
+				emotional_tone: "neutral",
+				emotional_intensity: 0.1,
+				stakes_level: "low",
+				topic_tags: ["portugal", "margins", "logistics", "shipping"],
+				entity_tags: ["Portugal"],
+				decision_made: false,
+				action_items: [],
+				status: "resolved",
+				access_count: 1,
+				last_accessed: new Date().toISOString(),
+				retrieval_cues: ["portugal stable", "direct route"],
+				amendments: [],
+				linked_chunks: [],
+				generated_questions: [],
+			},
+		},
+
+		/* ── Tier 2: Consolidated summaries ── */
+		{
+			id: "chunk_t2_eu_margin_pressure",
+			type: NODE_TYPES.CHUNK,
+			label: "EU margin pressure summary",
+			description:
+				"Southern European accounts facing margin compression from EU regulations",
+			position: { x: 40, y: 0, z: -400 },
+			data: {
+				content:
+					"Summary: Southern European accounts (Spain, Italy) are experiencing margin compression due to new EU cross-border logistics regulations. Spain down to 18-22%, Italy down to 20%. Portugal unaffected due to direct routing. Pattern: regulatory cost pass-through affecting all indirect-route accounts.",
+				tier: 2,
+				source: "agent_generated",
+				source_reliability: "high",
+				participants: ["Idan"],
+				emotional_tone: "analytical",
+				emotional_intensity: 0.4,
+				stakes_level: "high",
+				topic_tags: [
+					"EU",
+					"margins",
+					"logistics",
+					"regulations",
+					"spain",
+					"italy",
+				],
+				entity_tags: ["EU", "Spain", "Italy", "Portugal", "Idan"],
+				decision_made: false,
+				action_items: ["Regional pricing strategy needed"],
+				status: "open",
+				access_count: 3,
+				last_accessed: new Date().toISOString(),
+				retrieval_cues: [
+					"EU margin pressure",
+					"southern europe",
+					"regulatory costs",
+				],
+				amendments: [],
+				linked_chunks: [
+					"chunk_spain_margin_drop",
+					"chunk_logistics_cost",
+					"chunk_italy_similar",
+					"chunk_portugal_ok",
+				],
+				generated_questions: [],
+			},
+			metadata: {
+				createdAt: new Date().toISOString(),
+				consolidatedFrom: [
+					"chunk_spain_margin_drop",
+					"chunk_logistics_cost",
+					"chunk_italy_similar",
+					"chunk_portugal_ok",
+				],
+			},
+		},
+
+		/* ── Tier 3: Schema / Pattern ── */
+		{
+			id: "pattern_regulatory_cost",
+			type: NODE_TYPES.PATTERN,
+			label: "Regulatory cost pass-through pattern",
+			description:
+				"Cross-domain pattern: regulatory changes → logistics costs → margin compression",
+			position: { x: 0, y: 0, z: -600 },
+			data: {
+				pattern:
+					"When new regulations increase logistics costs, margins compress for accounts using indirect shipping routes. Direct-route accounts are unaffected.",
+				evidence: [
+					"chunk_t2_eu_margin_pressure",
+					"chunk_logistics_cost",
+					"chunk_portugal_ok",
+				],
+				confidence: 0.75,
+				implication:
+					"Future regulatory changes should trigger immediate pricing review for indirect-route accounts",
+				pattern_type: "causal_recurring",
+				exceptions: ["Direct shipping routes bypass regulatory checkpoints"],
+			},
+		},
+
+		/* ── Questions ── */
+		{
+			id: "q_margin_recovery",
+			type: NODE_TYPES.QUESTION,
+			label: "L3: Will pricing adjustment recover margins?",
+			description: "What are the implications of raising Spain prices by 8%?",
+			position: { x: -80, y: 60, z: -100 },
+			data: {
+				level: 3,
+				question_text:
+					"What are the implications of raising Spain prices by 8%?",
+				answer_text: null,
+				answered: false,
+				parent_question_id: null,
+				linked_chunk_ids: ["chunk_spain_pricing", "chunk_spain_margin_drop"],
+				confidence: null,
+			},
+		},
+		{
+			id: "q_italy_action",
+			type: NODE_TYPES.QUESTION,
+			label: "L2: Why hasn't Italy pricing been reviewed?",
+			description: "Why has Italy not been included in the pricing review?",
+			position: { x: 140, y: -30, z: -100 },
+			data: {
+				level: 2,
+				question_text:
+					"Why has Italy not been included in the pricing review if it shows similar margin pressure?",
+				answer_text: null,
+				answered: false,
+				parent_question_id: null,
+				linked_chunk_ids: ["chunk_italy_similar"],
+				confidence: null,
+			},
+		},
+		{
+			id: "q_true_margin",
+			type: NODE_TYPES.QUESTION,
+			label: "L1: What is Spain's actual margin?",
+			description: "Is Spain margin 22% or 18%?",
+			position: { x: -50, y: -50, z: -100 },
+			data: {
+				level: 1,
+				question_text: "What is Spain's actual current margin — 22% or 18%?",
+				answer_text: null,
+				answered: false,
+				parent_question_id: null,
+				linked_chunk_ids: ["chunk_spain_margin_drop", "chunk_contradiction_18"],
+				confidence: null,
+			},
+		},
+
+		/* ── Trigger ── */
+		{
+			id: "trigger_idan_pricing",
+			type: NODE_TYPES.TRIGGER,
+			label: "Raise pricing when Idan mentioned",
+			description:
+				"Prospective memory: bring up pricing issue when Idan is discussed",
+			position: { x: -150, y: -40, z: -200 },
+			data: {
+				content:
+					"When Idan is mentioned in conversation, surface the Spain pricing review and margin discrepancy",
+				trigger_conditions: ["Idan", "Spain pricing", "margin review"],
+				expires: null,
+				fired: false,
+				fire_count: 0,
+			},
+		},
+	],
+	edges: [
+		/* ── Linked ── */
+		{
+			id: "e_spain_logistics",
+			type: EDGE_TYPES.LINKED_TO,
+			source: "chunk_spain_margin_drop",
+			target: "chunk_logistics_cost",
+			label: "linked_to",
+		},
+		{
+			id: "e_spain_pricing",
+			type: EDGE_TYPES.LINKED_TO,
+			source: "chunk_spain_margin_drop",
+			target: "chunk_spain_pricing",
+			label: "linked_to",
+		},
+		{
+			id: "e_logistics_italy",
+			type: EDGE_TYPES.LINKED_TO,
+			source: "chunk_logistics_cost",
+			target: "chunk_italy_similar",
+			label: "linked_to",
+		},
+		{
+			id: "e_client_pricing",
+			type: EDGE_TYPES.LINKED_TO,
+			source: "chunk_client_meeting",
+			target: "chunk_spain_pricing",
+			label: "linked_to",
+		},
+
+		/* ── Contradiction ── */
+		{
+			id: "e_margin_contradiction",
+			type: EDGE_TYPES.CONTRADICTS,
+			source: "chunk_spain_margin_drop",
+			target: "chunk_contradiction_18",
+			label: "contradicts",
+		},
+
+		/* ── Promotes to ── */
+		{
+			id: "e_promote_summary",
+			type: EDGE_TYPES.PROMOTES_TO,
+			source: "chunk_spain_margin_drop",
+			target: "chunk_t2_eu_margin_pressure",
+			label: "promotes_to",
+		},
+		{
+			id: "e_promote_logistics",
+			type: EDGE_TYPES.PROMOTES_TO,
+			source: "chunk_logistics_cost",
+			target: "chunk_t2_eu_margin_pressure",
+			label: "promotes_to",
+		},
+		{
+			id: "e_promote_italy",
+			type: EDGE_TYPES.PROMOTES_TO,
+			source: "chunk_italy_similar",
+			target: "chunk_t2_eu_margin_pressure",
+			label: "promotes_to",
+		},
+
+		/* ── Answers ── */
+		{
+			id: "e_q_margin_recovery",
+			type: EDGE_TYPES.ANSWERS,
+			source: "q_margin_recovery",
+			target: "chunk_spain_pricing",
+			label: "answers",
+		},
+		{
+			id: "e_q_italy",
+			type: EDGE_TYPES.ANSWERS,
+			source: "q_italy_action",
+			target: "chunk_italy_similar",
+			label: "answers",
+		},
+		{
+			id: "e_q_true_margin",
+			type: EDGE_TYPES.ANSWERS,
+			source: "q_true_margin",
+			target: "chunk_spain_margin_drop",
+			label: "answers",
+		},
+
+		/* ── Preceded by ── */
+		{
+			id: "e_preceded_pricing",
+			type: EDGE_TYPES.PRECEDED_BY,
+			source: "chunk_spain_pricing",
+			target: "chunk_spain_margin_drop",
+			label: "preceded_by",
+		},
+
+		/* ── Triggers ── */
+		{
+			id: "e_trigger_idan",
+			type: EDGE_TYPES.TRIGGERS,
+			source: "trigger_idan_pricing",
+			target: "chunk_spain_pricing",
+			label: "triggers",
+		},
+	],
+	clusters: [
+		{
+			id: "cluster_spain_account",
+			label: "Cluster: Spain Account",
+			member_ids: [
+				"chunk_spain_margin_drop",
+				"chunk_spain_pricing",
+				"chunk_contradiction_18",
+				"chunk_client_meeting",
+			],
+			shared_tags: ["spain"],
+			shared_entities: ["Spain"],
+			cluster_strength: 0.8,
+			color: 0xffffff,
+		},
+		{
+			id: "cluster_logistics",
+			label: "Cluster: Logistics & EU",
+			member_ids: [
+				"chunk_logistics_cost",
+				"chunk_italy_similar",
+				"chunk_portugal_ok",
+			],
+			shared_tags: ["logistics"],
+			shared_entities: ["EU"],
+			cluster_strength: 0.6,
+			color: 0xffffff,
+		},
+	],
+	viewport: { x: 0, y: 0, z: 0, zoom: 1, rotationX: 0, rotationY: 0 },
+	metadata: {
+		createdBy: "car-brain-seed",
+		description:
+			"Spain margins demo — CAR Protocol showcase with contradiction and trigger",
+	},
 });
diff --git a/js/runtime/action-executor.js b/js/runtime/action-executor.js
deleted file mode 100644
index 85fb020..0000000
--- a/js/runtime/action-executor.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { EVENTS } from "../core/event-constants.js";
-import { publish } from "../core/pan.js";
-
-export const actionExecutor = {
-  execute(actionId, input = {}) {
-    const entry = {
-      actionId,
-      input,
-      executedAt: new Date().toISOString()
-    };
-
-    publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-      level: "info",
-      message: `Action executed: ${actionId}`
-    });
-
-    return entry;
-  }
-};
diff --git a/js/runtime/agent-runtime.js b/js/runtime/agent-runtime.js
deleted file mode 100644
index 13691e7..0000000
--- a/js/runtime/agent-runtime.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import { EVENTS } from "../core/event-constants.js";
-import { publish } from "../core/pan.js";
-import { graphStore } from "../store/graph-store.js";
-
-const isPlainObject = (value) => value != null && typeof value === "object" && !Array.isArray(value);
-
-const inferType = (value) => {
-  if (Array.isArray(value)) return "array";
-  if (value === null) return "null";
-  return typeof value;
-};
-
-const normalizeSchema = (schema) => {
-  if (schema == null || schema === "") return null;
-  if (typeof schema === "string") {
-    const trimmed = schema.trim();
-    if (!trimmed) return null;
-
-    if (
-      ["string", "number", "boolean", "object", "array", "null"].includes(trimmed)
-    ) {
-      return { type: trimmed };
-    }
-
-    return null;
-  }
-
-  return isPlainObject(schema) ? schema : null;
-};
-
-const validateAgainstSchema = (schema, value, path = "$") => {
-  if (!schema) return [];
-
-  const errors = [];
-  const expectedType = schema.type;
-
-  if (expectedType) {
-    const actualType = inferType(value);
-    if (actualType !== expectedType) {
-      errors.push(`${path} expected type ${expectedType} but received ${actualType}`);
-      return errors;
-    }
-  }
-
-  if (schema.enum && Array.isArray(schema.enum) && !schema.enum.includes(value)) {
-    errors.push(`${path} must be one of: ${schema.enum.join(", ")}`);
-  }
-
-  if (schema.type === "object" && isPlainObject(value)) {
-    const required = Array.isArray(schema.required) ? schema.required : [];
-    for (const key of required) {
-      if (!(key in value)) {
-        errors.push(`${path}.${key} is required`);
-      }
-    }
-
-    const properties = isPlainObject(schema.properties) ? schema.properties : {};
-    for (const [key, propertySchema] of Object.entries(properties)) {
-      if (!(key in value)) continue;
-      errors.push(...validateAgainstSchema(propertySchema, value[key], `${path}.${key}`));
-    }
-  }
-
-  if (schema.type === "array" && Array.isArray(value) && schema.items) {
-    value.forEach((entry, index) => {
-      errors.push(...validateAgainstSchema(schema.items, entry, `${path}[${index}]`));
-    });
-  }
-
-  return errors;
-};
-
-export class AgentRuntime {
-  constructor({ store = graphStore, panPublish = publish } = {}) {
-    this.store = store;
-    this.publish = panPublish;
-    this.events = EVENTS;
-  }
-
-  async runNode(_nodeId) {
-    throw new Error("runNode(nodeId) must be implemented by runtime adapter");
-  }
-
-  async runSubtree(_nodeId) {
-    throw new Error("runSubtree(nodeId) must be implemented by runtime adapter");
-  }
-
-  async runAll() {
-    throw new Error("runAll() must be implemented by runtime adapter");
-  }
-
-  validateInput(node, input = node?.data?.lastInput ?? {}) {
-    const schema = normalizeSchema(node?.data?.inputSchema);
-    if (!schema) return { valid: true, errors: [] };
-
-    const errors = validateAgainstSchema(schema, input, "$input");
-    return { valid: errors.length === 0, errors };
-  }
-
-  validateOutput(node, output = node?.data?.lastOutput ?? {}) {
-    const schema = normalizeSchema(node?.data?.outputSchema);
-    if (!schema) return { valid: true, errors: [] };
-
-    const errors = validateAgainstSchema(schema, output, "$output");
-    return { valid: errors.length === 0, errors };
-  }
-}
diff --git a/js/runtime/data-connectors.js b/js/runtime/data-connectors.js
deleted file mode 100644
index d37589f..0000000
--- a/js/runtime/data-connectors.js
+++ /dev/null
@@ -1,420 +0,0 @@
-import { EVENTS } from "../core/event-constants.js";
-import { publish, subscribe } from "../core/pan.js";
-import { graphStore } from "../store/graph-store.js";
-import { inferSchema } from "./schema-inference.js";
-
-const DEFAULT_JSON_PATH = "/data/sample/site_config.json";
-const MIN_PERIODIC_INTERVAL_MS = 5_000;
-const DEFAULT_PERIODIC_INTERVAL_MS = 60_000;
-const DEFAULT_CACHE_TTL_MS = 30_000;
-
-const embeddedSamples = Object.freeze({
-  site_config: {
-    site: {
-      name: "MindGraph AI",
-      theme: "launch",
-      locale: "en-US"
-    },
-    pages: ["home", "pricing", "docs"],
-    features: {
-      realtimeGraph: true,
-      agentBinding: true,
-      dataPreview: true
-    }
-  },
-  market_data: {
-    snapshot: {
-      market: "AI orchestration",
-      demandIndex: 78,
-      momentum: "up",
-      capturedAt: "2026-04-02T00:00:00.000Z"
-    },
-    competitors: [
-      { name: "OrcaFlow", growth: 14.2 },
-      { name: "AtlasNode", growth: 11.8 }
-    ]
-  },
-  support_db: {
-    tickets: [
-      { id: "SUP-104", status: "open", category: "onboarding" },
-      { id: "SUP-105", status: "in_progress", category: "permissions" }
-    ],
-    summary: {
-      open: 11,
-      highPriority: 2
-    }
-  },
-  ads_api_mock: {
-    campaign: {
-      id: "cmp_launch_01",
-      spend: 1820.45,
-      conversions: 244,
-      cpa: 7.46
-    },
-    channels: [
-      { name: "Search", roas: 3.1 },
-      { name: "Social", roas: 2.3 }
-    ]
-  }
-});
-
-const deepClone = (value) => {
-  if (value == null) return value;
-  try {
-    return structuredClone(value);
-  } catch {
-    return JSON.parse(JSON.stringify(value));
-  }
-};
-
-const normalizeJsonPath = (value) => String(value ?? "").trim();
-
-const getByPathSegment = (value, segment) => {
-  if (value == null) return undefined;
-  const arrayMatch = segment.match(/^(.*)\[(\d+)\]$/);
-  if (!arrayMatch) {
-    return value[segment];
-  }
-
-  const objectKey = arrayMatch[1];
-  const index = Number(arrayMatch[2]);
-  const target = objectKey ? value?.[objectKey] : value;
-  return Array.isArray(target) ? target[index] : undefined;
-};
-
-const applyJsonPath = (value, rawPath) => {
-  const path = normalizeJsonPath(rawPath);
-  if (!path) return value;
-
-  const normalizedPath = path.startsWith("$.") ? path.slice(2) : path.startsWith("$") ? path.slice(1) : path;
-  if (!normalizedPath) return value;
-
-  return normalizedPath
-    .split(".")
-    .map((segment) => segment.trim())
-    .filter(Boolean)
-    .reduce((current, segment) => getByPathSegment(current, segment), value);
-};
-
-const normalizeSourceType = (value) => {
-  const raw = String(value ?? "json").trim().toLowerCase();
-  if (raw === "local" || raw === "file") return "json";
-  if (raw === "mock") return "mock";
-  if (raw === "api") return "api";
-  return "json";
-};
-
-const toIntervalMs = (secondsValue) => {
-  const seconds = Number(secondsValue);
-  if (!Number.isFinite(seconds) || seconds <= 0) return DEFAULT_PERIODIC_INTERVAL_MS;
-  return Math.max(MIN_PERIODIC_INTERVAL_MS, seconds * 1000);
-};
-
-const formatRefreshMessage = ({ label, sourceType, fromCache, reason }) => {
-  const source = sourceType.toUpperCase();
-  const cacheNote = fromCache ? "cache hit" : "fresh fetch";
-  return `Data refreshed: ${label} (${source}, ${cacheNote}, ${reason})`;
-};
-
-class DataConnectors {
-  #cache = new Map();
-  #timers = new Map();
-  #dispose = [];
-
-  constructor() {
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_DOCUMENT_LOADED, ({ payload }) => {
-        this.#syncPeriodicRefresh(payload?.document?.nodes ?? []);
-        this.#syncAgentLinkedDataCounts();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_NODE_UPDATED, ({ payload }) => {
-        const node = payload?.node ?? (payload?.nodeId ? graphStore.getNode(payload.nodeId) : null);
-        if (!node || node.type !== "data") return;
-        this.#syncPeriodicRefresh();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_NODE_CREATED, ({ payload }) => {
-        if (payload?.node?.type !== "data") return;
-        this.#syncPeriodicRefresh();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_SELECTION_SET, ({ payload }) => {
-        const node = graphStore.getNode(payload?.nodeId);
-        if (!node || node.type !== "data") return;
-
-        const refreshMode = String(node.data?.refreshMode ?? "manual").toLowerCase();
-        if (refreshMode === "onopen") {
-          this.refresh(node.id, { reason: "onOpen" }).catch(() => {});
-        }
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_DOCUMENT_CHANGED, () => {
-        this.#syncAgentLinkedDataCounts();
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_NODE_DELETED, ({ payload }) => {
-        if (!payload?.nodeId) return;
-        this.#clearTimer(payload.nodeId);
-        this.#cache.delete(payload.nodeId);
-        this.#syncPeriodicRefresh();
-      })
-    );
-  }
-
-  async refresh(sourceId, options = {}) {
-    const reason = String(options.reason ?? "manual");
-    const force = options.force === true || reason === "manual";
-
-    const node = graphStore.getNode(sourceId);
-    if (!node || node.type !== "data") {
-      throw new Error(`Data node not found: ${sourceId}`);
-    }
-
-    try {
-      const { refreshedAt, data, fromCache, sourceType } = await this.#loadNodeData(node, { force });
-      const schema = inferSchema(data);
-
-      const patch = {
-        data: {
-          ...(node.data ?? {}),
-          sourceType,
-          source: sourceType,
-          cachedData: data,
-          cachedSchema: schema,
-          lastUpdated: refreshedAt
-        }
-      };
-
-      publish(EVENTS.GRAPH_NODE_UPDATE_REQUESTED, {
-        nodeId: node.id,
-        patch,
-        origin: "data-connectors"
-      });
-
-      const refreshedPayload = {
-        sourceId: node.id,
-        nodeId: node.id,
-        label: node.label,
-        sourceType,
-        sourcePath: node.data?.sourcePath ?? "",
-        sourceUrl: node.data?.sourceUrl ?? "",
-        refreshedAt,
-        fromCache,
-        reason
-      };
-
-      publish(EVENTS.RUNTIME_DATA_REFRESHED, refreshedPayload);
-      publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-        level: "info",
-        message: formatRefreshMessage({
-          label: node.label,
-          sourceType,
-          fromCache,
-          reason
-        })
-      });
-
-      return refreshedPayload;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
-      publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-        level: "error",
-        message: `Data refresh failed: ${node.label} (${message})`
-      });
-      throw error;
-    }
-  }
-
-  #syncPeriodicRefresh(nodes = null) {
-    const allNodes = Array.isArray(nodes) ? nodes : graphStore.getNodes();
-    const dataNodes = allNodes.filter((node) => node.type === "data");
-
-    const periodicIds = new Set();
-
-    dataNodes.forEach((node) => {
-      const refreshMode = String(node.data?.refreshMode ?? "manual").toLowerCase();
-      if (refreshMode !== "periodic") return;
-
-      periodicIds.add(node.id);
-      const nextInterval = toIntervalMs(node.data?.refreshInterval);
-      const existing = this.#timers.get(node.id);
-
-      if (existing && existing.intervalMs === nextInterval) return;
-
-      this.#clearTimer(node.id);
-      const timerId = window.setInterval(() => {
-        this.refresh(node.id, { reason: "periodic", force: false }).catch(() => {});
-      }, nextInterval);
-
-      this.#timers.set(node.id, { timerId, intervalMs: nextInterval });
-    });
-
-    [...this.#timers.keys()].forEach((nodeId) => {
-      if (!periodicIds.has(nodeId)) this.#clearTimer(nodeId);
-    });
-  }
-
-  #clearTimer(nodeId) {
-    const entry = this.#timers.get(nodeId);
-    if (!entry) return;
-    clearInterval(entry.timerId);
-    this.#timers.delete(nodeId);
-  }
-
-  #syncAgentLinkedDataCounts() {
-    const nodes = graphStore.getNodes();
-    const dataNodeIds = new Set(nodes.filter((node) => node.type === "data").map((node) => node.id));
-
-    nodes.forEach((node) => {
-      if (node.type !== "agent") return;
-
-      const allowed = Array.isArray(node.data?.allowedDataSources) ? node.data.allowedDataSources : [];
-      const validIds = [...new Set(allowed)].filter((id) => dataNodeIds.has(id));
-      const nextCount = validIds.length;
-      const currentCount = Number(node.data?.linkedDataCount ?? 0);
-
-      if (currentCount === nextCount && validIds.length === allowed.length) return;
-
-      publish(EVENTS.GRAPH_NODE_UPDATE_REQUESTED, {
-        nodeId: node.id,
-        patch: {
-          data: {
-            ...(node.data ?? {}),
-            allowedDataSources: validIds,
-            linkedDataCount: nextCount
-          }
-        },
-        origin: "data-connectors"
-      });
-    });
-  }
-
-  async #loadNodeData(node, { force }) {
-    const sourceType = normalizeSourceType(node.data?.sourceType ?? node.data?.source ?? "json");
-    const sourcePath = String(node.data?.sourcePath ?? "").trim();
-    const sourceUrl = String(node.data?.sourceUrl ?? "").trim();
-    const jsonPath = normalizeJsonPath(node.data?.jsonPath);
-    const refreshIntervalMs = toIntervalMs(node.data?.refreshInterval);
-    const cacheTtl = Math.max(DEFAULT_CACHE_TTL_MS, refreshIntervalMs);
-
-    const cacheKey = [sourceType, sourcePath, sourceUrl, jsonPath].join("|");
-    const cacheEntry = this.#cache.get(node.id);
-    const ageMs = cacheEntry ? Date.now() - cacheEntry.timestamp : Number.POSITIVE_INFINITY;
-
-    if (!force && cacheEntry && cacheEntry.key === cacheKey && ageMs < cacheTtl) {
-      return {
-        sourceType,
-        data: deepClone(cacheEntry.data),
-        refreshedAt: cacheEntry.refreshedAt,
-        fromCache: true
-      };
-    }
-
-    const loaded = await this.#loadFromSource({ sourceType, sourcePath, sourceUrl });
-    const selected = applyJsonPath(loaded, jsonPath);
-    const normalizedData = selected === undefined ? null : selected;
-    const refreshedAt = new Date().toISOString();
-
-    this.#cache.set(node.id, {
-      key: cacheKey,
-      data: deepClone(normalizedData),
-      refreshedAt,
-      timestamp: Date.now()
-    });
-
-    return {
-      sourceType,
-      data: normalizedData,
-      refreshedAt,
-      fromCache: false
-    };
-  }
-
-  async #loadFromSource({ sourceType, sourcePath, sourceUrl }) {
-    if (sourceType === "mock") {
-      return this.#loadMockSource({ sourcePath, sourceUrl });
-    }
-
-    if (sourceType === "api") {
-      const url = sourceUrl || sourcePath;
-      if (!url) {
-        throw new Error("API source requires sourceUrl or sourcePath");
-      }
-      return this.#fetchJson(url);
-    }
-
-    return this.#loadJsonSource(sourcePath);
-  }
-
-  async #loadJsonSource(sourcePath) {
-    const rawPath = String(sourcePath ?? "").trim();
-    const embeddedMatch = rawPath.match(/^embedded:(.+)$/i);
-
-    if (embeddedMatch) {
-      const embeddedKey = embeddedMatch[1].trim();
-      const embedded = embeddedSamples[embeddedKey];
-      if (!embedded) {
-        throw new Error(`Embedded sample not found: ${embeddedKey}`);
-      }
-      return deepClone(embedded);
-    }
-
-    if (rawPath && embeddedSamples[rawPath]) {
-      return deepClone(embeddedSamples[rawPath]);
-    }
-
-    const isAbsolutePath = rawPath.startsWith("/");
-    const isExplicitJsonFile = rawPath.endsWith(".json");
-
-    const url = rawPath
-      ? isAbsolutePath
-        ? rawPath
-        : isExplicitJsonFile
-          ? `/data/sample/${rawPath}`
-          : `/data/sample/${rawPath}.json`
-      : DEFAULT_JSON_PATH;
-
-    return this.#fetchJson(url);
-  }
-
-  async #loadMockSource({ sourcePath, sourceUrl }) {
-    const basePayload = sourceUrl
-      ? await this.#fetchJson(sourceUrl)
-      : sourcePath
-        ? await this.#loadJsonSource(sourcePath)
-        : deepClone(embeddedSamples.ads_api_mock);
-
-    return {
-      mock: true,
-      generatedAt: new Date().toISOString(),
-      payload: basePayload
-    };
-  }
-
-  async #fetchJson(url) {
-    const response = await fetch(url, {
-      headers: {
-        Accept: "application/json"
-      }
-    });
-
-    if (!response.ok) {
-      throw new Error(`Failed to load ${url}: ${response.status} ${response.statusText}`);
-    }
-
-    return response.json();
-  }
-}
-
-export const dataConnectors = new DataConnectors();
diff --git a/js/runtime/mock-agent-runtime.js b/js/runtime/mock-agent-runtime.js
deleted file mode 100644
index 9c5633d..0000000
--- a/js/runtime/mock-agent-runtime.js
+++ /dev/null
@@ -1,480 +0,0 @@
-import { AgentRuntime } from "./agent-runtime.js";
-
-const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
-
-const clamp01 = (value) => Math.max(0, Math.min(1, value));
-
-const toArray = (value) => (Array.isArray(value) ? value : []);
-
-const asErrorMessage = (error) => (error instanceof Error ? error.message : String(error));
-
-const makeTaskId = () => `task_${Date.now()}_${Math.floor(Math.random() * 10_000)}`;
-const makeRunId = (nodeId) => `run_${nodeId}_${Date.now()}_${Math.floor(Math.random() * 1_000)}`;
-
-const friendlyNow = () => new Date().toLocaleTimeString();
-
-const isAgentNode = (node) => node?.type === "agent";
-
-const gatherSubtreeIds = (document, nodeId) => {
-  const queue = [nodeId];
-  const visited = new Set();
-  const result = [];
-  const edges = toArray(document?.edges);
-  const nodesById = new Map(toArray(document?.nodes).map((node) => [node.id, node]));
-
-  while (queue.length) {
-    const currentId = queue.shift();
-    if (!currentId || visited.has(currentId)) continue;
-
-    visited.add(currentId);
-    const currentNode = nodesById.get(currentId);
-    if (isAgentNode(currentNode)) result.push(currentId);
-
-    for (const edge of edges) {
-      if (edge.source !== currentId) continue;
-      if (edge.type !== "parent_of") continue;
-      if (visited.has(edge.target)) continue;
-      queue.push(edge.target);
-    }
-  }
-
-  return result;
-};
-
-export class MockAgentRuntime extends AgentRuntime {
-  #taskQueue = [];
-
-  constructor(options = {}) {
-    super(options);
-    this.#emitTaskQueue();
-  }
-
-  async runNode(nodeId, context = {}) {
-    const node = this.store.getNode(nodeId);
-    const taskId = makeTaskId();
-    const runId = makeRunId(nodeId);
-    const trigger = context.trigger ?? "manual";
-
-    if (!node) {
-      const message = `Run failed: node ${nodeId} not found`;
-      this.#appendActivity("error", message, { nodeId, runId });
-      this.publish(this.events.RUNTIME_AGENT_RUN_FAILED, { nodeId, runId, reason: message, trigger });
-      this.publish(this.events.RUNTIME_ERROR_APPENDED, {
-        nodeId,
-        nodeLabel: "Unknown node",
-        runId,
-        message,
-        source: "mock-agent-runtime",
-        at: new Date().toISOString()
-      });
-      return { ok: false, nodeId, runId, error: message };
-    }
-
-    if (!isAgentNode(node)) {
-      const message = `Run skipped: ${node.label} is not an agent node`;
-      this.#appendActivity("warn", message, { nodeId, runId });
-      this.publish(this.events.RUNTIME_AGENT_RUN_FAILED, { nodeId, runId, reason: message, trigger });
-      this.publish(this.events.RUNTIME_ERROR_APPENDED, {
-        nodeId,
-        nodeLabel: node.label,
-        runId,
-        message,
-        source: "mock-agent-runtime",
-        at: new Date().toISOString()
-      });
-      return { ok: false, nodeId, runId, error: message };
-    }
-
-    this.#setTask(taskId, {
-      id: taskId,
-      nodeId,
-      label: `Run ${node.label}`,
-      status: "in_progress",
-      progress: 0,
-      runId,
-      startedAt: new Date().toISOString()
-    });
-
-    this.#patchNodeData(nodeId, {
-      status: "running",
-      confidence: clamp01(Number(node.data?.confidence ?? 0.5)),
-      lastRunSummary: "Run started..."
-    });
-
-    this.publish(this.events.RUNTIME_AGENT_RUN_STARTED, { nodeId, runId, trigger, context });
-    this.#appendActivity("info", `Started run for ${node.label}`, {
-      nodeId,
-      runId,
-      trigger
-    });
-    this.#appendNodeActivity(nodeId, {
-      at: new Date().toISOString(),
-      level: "info",
-      message: `Started run ${runId}`
-    });
-
-    const input = this.#buildInput(node);
-    const inputValidation = this.validateInput(node, input);
-
-    if (!inputValidation.valid) {
-      const output = {
-        type: "validation_error",
-        phase: "input",
-        errors: inputValidation.errors,
-        generatedAt: new Date().toISOString()
-      };
-
-      this.#markFailed(node, taskId, runId, "Input validation failed", output);
-      return { ok: false, nodeId, runId, error: "Input validation failed", output };
-    }
-
-    try {
-      for (const step of [
-        { progress: 0.3, label: "Collecting context" },
-        { progress: 0.65, label: "Generating summary" },
-        { progress: 0.9, label: "Preparing structured output" }
-      ]) {
-        await sleep(260 + Math.floor(Math.random() * 420));
-        this.#setTask(taskId, { progress: step.progress });
-        this.#appendActivity("info", `${node.label}: ${step.label} (${Math.round(step.progress * 100)}%)`, {
-          nodeId,
-          runId,
-          progress: step.progress
-        });
-        this.#appendNodeActivity(nodeId, {
-          at: new Date().toISOString(),
-          level: "info",
-          message: `${step.label} (${Math.round(step.progress * 100)}%)`
-        });
-      }
-
-      const shouldFail = Math.random() < 0.12;
-      if (shouldFail) {
-        throw new Error("Mock runtime transient failure while drafting response");
-      }
-
-      const output = this.#buildOutput(node, input);
-      const outputValidation = this.validateOutput(node, output);
-
-      if (!outputValidation.valid) {
-        const failureOutput = {
-          type: "validation_error",
-          phase: "output",
-          errors: outputValidation.errors,
-          generatedAt: new Date().toISOString(),
-          output
-        };
-        this.#markFailed(node, taskId, runId, "Output validation failed", failureOutput);
-        return { ok: false, nodeId, runId, error: "Output validation failed", output: failureOutput };
-      }
-
-      const confidence = clamp01(0.64 + Math.random() * 0.32);
-      const latestNode = this.store.getNode(nodeId);
-      const runEntry = {
-        runId,
-        status: "completed",
-        summary: output.summary,
-        confidence,
-        at: new Date().toISOString()
-      };
-
-      this.#patchNodeData(nodeId, {
-        status: "completed",
-        confidence,
-        lastRunSummary: output.summary,
-        lastOutput: output,
-        runHistory: [runEntry, ...toArray(latestNode?.data?.runHistory)].slice(0, 25),
-        activityHistory: [
-          {
-            at: runEntry.at,
-            level: "info",
-            message: `Completed run ${runId}`
-          },
-          ...toArray(latestNode?.data?.activityHistory)
-        ].slice(0, 40)
-      });
-
-      this.#setTask(taskId, {
-        status: "completed",
-        progress: 1,
-        completedAt: runEntry.at
-      });
-
-      this.publish(this.events.RUNTIME_AGENT_RUN_COMPLETED, {
-        nodeId,
-        runId,
-        status: "completed",
-        confidence,
-        output
-      });
-      this.publish(this.events.RUNTIME_RUN_HISTORY_APPENDED, {
-        nodeId,
-        nodeLabel: node.label,
-        runId,
-        status: "completed",
-        summary: output.summary,
-        confidence,
-        output,
-        at: runEntry.at
-      });
-
-      this.#appendActivity("info", `Completed run for ${node.label} (confidence ${confidence.toFixed(2)})`, {
-        nodeId,
-        runId,
-        confidence
-      });
-
-      return {
-        ok: true,
-        nodeId,
-        runId,
-        status: "completed",
-        confidence,
-        output
-      };
-    } catch (error) {
-      const output = {
-        type: "runtime_error",
-        message: asErrorMessage(error),
-        generatedAt: new Date().toISOString()
-      };
-      this.#markFailed(node, taskId, runId, output.message, output);
-
-      return {
-        ok: false,
-        nodeId,
-        runId,
-        error: output.message,
-        output
-      };
-    }
-  }
-
-  async runSubtree(nodeId, context = {}) {
-    const root = this.store.getNode(nodeId);
-    const document = this.store.getDocument();
-
-    if (!root || !document) {
-      this.#appendActivity("error", "Subtree run failed: missing node/document", { nodeId });
-      return { ok: false, nodeIds: [], completed: 0, failed: 0 };
-    }
-
-    const ids = gatherSubtreeIds(document, nodeId);
-    if (!ids.length) {
-      this.#appendActivity("warn", `No agent nodes found in subtree for ${root.label}`, { nodeId });
-      return { ok: false, nodeIds: [], completed: 0, failed: 0 };
-    }
-
-    this.#appendActivity("info", `Subtree run started for ${root.label} (${ids.length} node(s))`, { nodeId });
-
-    let completed = 0;
-    let failed = 0;
-
-    for (const id of ids) {
-      const result = await this.runNode(id, { ...context, trigger: context.trigger ?? "manual_subtree" });
-      if (result.ok) completed += 1;
-      else failed += 1;
-    }
-
-    this.#appendActivity(
-      failed ? "warn" : "info",
-      `Subtree run finished for ${root.label}: ${completed} completed, ${failed} failed`,
-      { nodeId }
-    );
-
-    return { ok: failed === 0, nodeIds: ids, completed, failed };
-  }
-
-  async runAll(context = {}) {
-    const nodes = this.store
-      .getNodes()
-      .filter((node) => isAgentNode(node));
-
-    this.#appendActivity("info", `Run all started for ${nodes.length} agent node(s)`, {
-      trigger: context.trigger ?? "manual_all"
-    });
-
-    let completed = 0;
-    let failed = 0;
-
-    for (const node of nodes) {
-      const result = await this.runNode(node.id, { ...context, trigger: context.trigger ?? "manual_all" });
-      if (result.ok) completed += 1;
-      else failed += 1;
-    }
-
-    this.#appendActivity(
-      failed ? "warn" : "info",
-      `Run all finished at ${friendlyNow()}: ${completed} completed, ${failed} failed`
-    );
-
-    return { ok: failed === 0, total: nodes.length, completed, failed };
-  }
-
-  #buildInput(node) {
-    return {
-      nodeId: node.id,
-      label: node.label,
-      role: node.data?.role ?? "Agent",
-      mode: node.data?.mode ?? "orchestrate",
-      objective: node.data?.objective ?? "",
-      allowedDataSources: toArray(node.data?.allowedDataSources),
-      requestedAt: new Date().toISOString()
-    };
-  }
-
-  #buildOutput(node, input) {
-    const sources = toArray(input.allowedDataSources);
-    const sourcePhrase = sources.length
-      ? `${sources.length} linked data source${sources.length === 1 ? "" : "s"}`
-      : "no linked data sources";
-
-    return {
-      summary: `${node.label} produced a ${input.mode} update using ${sourcePhrase}.`,
-      highlights: [
-        `${node.data?.role ?? "Agent"} aligned to objective: ${input.objective || "(no objective set)"}`,
-        `Mode ${input.mode} completed without external provider calls`,
-        `Execution timestamp ${input.requestedAt}`
-      ],
-      nextActions: [
-        "Review output quality in the inspector",
-        "Adjust schemas if stricter structure is needed",
-        "Trigger follow-up subtree summary if required"
-      ],
-      metrics: {
-        sourceCount: sources.length,
-        mode: input.mode,
-        mockRuntime: true
-      },
-      generatedAt: new Date().toISOString()
-    };
-  }
-
-  #markFailed(node, taskId, runId, reason, output) {
-    const confidence = clamp01(0.18 + Math.random() * 0.26);
-    const failedAt = new Date().toISOString();
-    const latestNode = this.store.getNode(node.id);
-
-    this.#patchNodeData(node.id, {
-      status: "failed",
-      confidence,
-      lastRunSummary: reason,
-      lastOutput: output,
-      runHistory: [
-        {
-          runId,
-          status: "failed",
-          summary: reason,
-          confidence,
-          at: failedAt
-        },
-        ...toArray(latestNode?.data?.runHistory)
-      ].slice(0, 25),
-      activityHistory: [
-        {
-          at: failedAt,
-          level: "error",
-          message: `Failed run ${runId}: ${reason}`
-        },
-        ...toArray(latestNode?.data?.activityHistory)
-      ].slice(0, 40)
-    });
-
-    this.#setTask(taskId, {
-      status: "failed",
-      progress: 1,
-      completedAt: failedAt
-    });
-
-    this.publish(this.events.RUNTIME_AGENT_RUN_FAILED, {
-      nodeId: node.id,
-      runId,
-      reason,
-      output
-    });
-    this.publish(this.events.RUNTIME_RUN_HISTORY_APPENDED, {
-      nodeId: node.id,
-      nodeLabel: node.label,
-      runId,
-      status: "failed",
-      summary: reason,
-      confidence,
-      output,
-      at: failedAt
-    });
-    this.publish(this.events.RUNTIME_ERROR_APPENDED, {
-      nodeId: node.id,
-      nodeLabel: node.label,
-      runId,
-      message: reason,
-      source: "mock-agent-runtime",
-      output,
-      at: failedAt
-    });
-
-    this.#appendActivity("error", `Run failed for ${node.label}: ${reason}`, {
-      nodeId: node.id,
-      runId
-    });
-  }
-
-  #patchNodeData(nodeId, dataPatch) {
-    const node = this.store.getNode(nodeId);
-    const mergedData = {
-      ...(node?.data ?? {}),
-      ...dataPatch
-    };
-
-    this.publish(this.events.GRAPH_NODE_UPDATE_REQUESTED, {
-      nodeId,
-      patch: {
-        data: mergedData
-      },
-      origin: "mock-agent-runtime"
-    });
-  }
-
-  #appendActivity(level, message, context = {}) {
-    this.publish(this.events.ACTIVITY_LOG_APPENDED, {
-      level,
-      message,
-      context
-    });
-  }
-
-  #appendNodeActivity(nodeId, entry) {
-    const node = this.store.getNode(nodeId);
-    if (!node || !isAgentNode(node)) return;
-
-    this.#patchNodeData(nodeId, {
-      activityHistory: [entry, ...toArray(node.data?.activityHistory)].slice(0, 40)
-    });
-  }
-
-  #setTask(taskId, patch) {
-    const nowIso = new Date().toISOString();
-    const index = this.#taskQueue.findIndex((task) => task.id === taskId);
-
-    if (index < 0) {
-      this.#taskQueue = [{ ...patch, id: taskId, updatedAt: nowIso }, ...this.#taskQueue].slice(0, 80);
-    } else {
-      const existing = this.#taskQueue[index];
-      const next = { ...existing, ...patch, updatedAt: nowIso };
-      this.#taskQueue = [
-        ...this.#taskQueue.slice(0, index),
-        next,
-        ...this.#taskQueue.slice(index + 1)
-      ];
-    }
-
-    this.#emitTaskQueue();
-  }
-
-  #emitTaskQueue() {
-    this.publish(this.events.TASK_QUEUE_UPDATED, {
-      tasks: this.#taskQueue.map((task) => ({ ...task }))
-    });
-  }
-}
-
-export const mockAgentRuntime = new MockAgentRuntime();
diff --git a/js/runtime/schema-inference.js b/js/runtime/schema-inference.js
deleted file mode 100644
index a3b9b5b..0000000
--- a/js/runtime/schema-inference.js
+++ /dev/null
@@ -1,63 +0,0 @@
-const MAX_DEPTH = 4;
-const MAX_ARRAY_SAMPLE = 6;
-
-const toPrimitiveType = (value) => {
-  if (value === null) return "null";
-  if (Array.isArray(value)) return "array";
-  return typeof value;
-};
-
-const mergeUnion = (values) => {
-  const unique = [...new Set(values.filter(Boolean))];
-  if (!unique.length) return "unknown";
-  if (unique.length === 1) return unique[0];
-  return unique.sort().join(" | ");
-};
-
-export const inferSchema = (value, depth = 0) => {
-  if (depth >= MAX_DEPTH) {
-    return { type: toPrimitiveType(value) };
-  }
-
-  if (Array.isArray(value)) {
-    if (!value.length) {
-      return { type: "array", itemType: "unknown" };
-    }
-
-    const sample = value.slice(0, MAX_ARRAY_SAMPLE);
-    const itemSchemas = sample.map((entry) => inferSchema(entry, depth + 1));
-    const itemTypes = itemSchemas.map((entry) => entry.type);
-    const unionType = mergeUnion(itemTypes);
-
-    const schema = {
-      type: "array",
-      itemType: unionType
-    };
-
-    const representative = itemSchemas.find((entry) => entry.type === itemTypes[0]);
-    if (representative && (representative.type === "object" || representative.type === "array")) {
-      schema.shape = representative;
-    }
-
-    return schema;
-  }
-
-  if (value && typeof value === "object") {
-    const keys = Object.keys(value);
-    const properties = {};
-
-    keys.slice(0, 80).forEach((key) => {
-      properties[key] = inferSchema(value[key], depth + 1);
-    });
-
-    return {
-      type: "object",
-      keys,
-      properties
-    };
-  }
-
-  return {
-    type: toPrimitiveType(value)
-  };
-};
diff --git a/js/store/persistence-store.js b/js/store/persistence-store.js
index ab290ee..bb954c2 100644
--- a/js/store/persistence-store.js
+++ b/js/store/persistence-store.js
@@ -1,155 +1,216 @@
 import { PERSISTENCE } from "../core/constants.js";
 import { EVENTS } from "../core/event-constants.js";
-import { normalizeGraphDocument, validateGraphDocument } from "../core/graph-document.js";
+import {
+	normalizeGraphDocument,
+	validateGraphDocument,
+} from "../core/graph-document.js";
 import { publish, subscribe } from "../core/pan.js";
 import { graphStore } from "./graph-store.js";
 
 class PersistenceStore {
-  #autosaveEnabled = true;
-  #dispose = [];
-  #autosaveTimer = null;
-
-  initialize() {
-    this.#autosaveEnabled = this.#readAutosaveFlag();
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_DOCUMENT_SAVED, ({ payload }) => {
-        if (!payload?.document) return;
-        this.#persistSession(payload.document, "manual");
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_DOCUMENT_LOADED, ({ payload }) => {
-        if (!this.#autosaveEnabled || !payload?.document) return;
-        this.#scheduleAutosave(payload.document);
-      })
-    );
-
-    this.#dispose.push(
-      subscribe(EVENTS.GRAPH_DOCUMENT_CHANGED, ({ payload }) => {
-        this.#autosaveCurrent(payload?.reason ?? "document_changed");
-      })
-    );
-
-    publish(EVENTS.GRAPH_AUTOSAVE_STATE_CHANGED, {
-      enabled: this.#autosaveEnabled,
-      origin: "persistence-store"
-    });
-  }
-
-  dispose() {
-    this.#dispose.forEach((run) => run());
-    this.#dispose = [];
-    if (this.#autosaveTimer != null) {
-      clearTimeout(this.#autosaveTimer);
-      this.#autosaveTimer = null;
-    }
-  }
-
-  isAutosaveEnabled() {
-    return this.#autosaveEnabled;
-  }
-
-  setAutosaveEnabled(enabled) {
-    this.#autosaveEnabled = Boolean(enabled);
-    this.#writeAutosaveFlag(this.#autosaveEnabled);
-
-    if (this.#autosaveEnabled) {
-      this.#autosaveCurrent("autosave_enabled");
-    } else if (this.#autosaveTimer != null) {
-      clearTimeout(this.#autosaveTimer);
-      this.#autosaveTimer = null;
-    }
-
-    publish(EVENTS.GRAPH_AUTOSAVE_STATE_CHANGED, {
-      enabled: this.#autosaveEnabled,
-      origin: "persistence-store"
-    });
-  }
-
-  restoreLastSession() {
-    const storage = this.#storage();
-    if (!storage) return false;
-
-    const raw = storage.getItem(PERSISTENCE.storage.lastSessionDocument);
-    if (!raw) return false;
-
-    try {
-      const parsed = JSON.parse(raw);
-      const normalized = normalizeGraphDocument(parsed);
-      const validation = validateGraphDocument(normalized);
-      if (!validation.valid) return false;
-
-      graphStore.load(normalized);
-      publish(EVENTS.ACTIVITY_LOG_APPENDED, {
-        level: "info",
-        message: "Restored graph from last autosaved session"
-      });
-      return true;
-    } catch {
-      return false;
-    }
-  }
-
-  #autosaveCurrent(reason) {
-    if (!this.#autosaveEnabled) return;
-    const snapshot = graphStore.getDocument();
-    if (!snapshot) return;
-    this.#scheduleAutosave(snapshot, reason);
-  }
-
-  #scheduleAutosave(document, reason = "autosave") {
-    if (!this.#autosaveEnabled) return;
-    if (this.#autosaveTimer != null) {
-      clearTimeout(this.#autosaveTimer);
-      this.#autosaveTimer = null;
-    }
-
-    this.#autosaveTimer = setTimeout(() => {
-      this.#persistSession(document, reason);
-    }, PERSISTENCE.autosaveDebounceMs);
-  }
-
-  #persistSession(document, reason = "autosave") {
-    const storage = this.#storage();
-    if (!storage) return false;
-
-    try {
-      storage.setItem(PERSISTENCE.storage.lastSessionDocument, JSON.stringify(document));
-      publish(EVENTS.GRAPH_DOCUMENT_AUTOSAVED, {
-        reason,
-        at: new Date().toISOString(),
-        origin: "persistence-store"
-      });
-      return true;
-    } catch {
-      return false;
-    }
-  }
-
-  #readAutosaveFlag() {
-    const storage = this.#storage();
-    if (!storage) return true;
-
-    const raw = storage.getItem(PERSISTENCE.storage.autosaveEnabled);
-    if (raw == null) return true;
-    return raw === "true";
-  }
-
-  #writeAutosaveFlag(enabled) {
-    const storage = this.#storage();
-    if (!storage) return;
-    storage.setItem(PERSISTENCE.storage.autosaveEnabled, enabled ? "true" : "false");
-  }
-
-  #storage() {
-    try {
-      return window.localStorage;
-    } catch {
-      return null;
-    }
-  }
+	#autosaveEnabled = true;
+	#dispose = [];
+	#autosaveTimer = null;
+	#serverAvailable = false;
+
+	initialize() {
+		this.#autosaveEnabled = this.#readAutosaveFlag();
+		this.#checkServer();
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_DOCUMENT_SAVED, ({ payload }) => {
+				if (!payload?.document) return;
+				this.#persistSession(payload.document, "manual");
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_DOCUMENT_LOADED, ({ payload }) => {
+				if (!this.#autosaveEnabled || !payload?.document) return;
+				this.#scheduleAutosave(payload.document);
+			}),
+		);
+
+		this.#dispose.push(
+			subscribe(EVENTS.GRAPH_DOCUMENT_CHANGED, ({ payload }) => {
+				this.#autosaveCurrent(payload?.reason ?? "document_changed");
+			}),
+		);
+
+		publish(EVENTS.GRAPH_AUTOSAVE_STATE_CHANGED, {
+			enabled: this.#autosaveEnabled,
+			origin: "persistence-store",
+		});
+	}
+
+	dispose() {
+		this.#dispose.forEach((run) => run());
+		this.#dispose = [];
+		if (this.#autosaveTimer != null) {
+			clearTimeout(this.#autosaveTimer);
+			this.#autosaveTimer = null;
+		}
+	}
+
+	isAutosaveEnabled() {
+		return this.#autosaveEnabled;
+	}
+
+	setAutosaveEnabled(enabled) {
+		this.#autosaveEnabled = Boolean(enabled);
+		this.#writeAutosaveFlag(this.#autosaveEnabled);
+
+		if (this.#autosaveEnabled) {
+			this.#autosaveCurrent("autosave_enabled");
+		} else if (this.#autosaveTimer != null) {
+			clearTimeout(this.#autosaveTimer);
+			this.#autosaveTimer = null;
+		}
+
+		publish(EVENTS.GRAPH_AUTOSAVE_STATE_CHANGED, {
+			enabled: this.#autosaveEnabled,
+			origin: "persistence-store",
+		});
+	}
+
+	async restoreLastSession() {
+		// Try server first
+		if (this.#serverAvailable) {
+			try {
+				const response = await fetch(`${PERSISTENCE.serverUrl}/api/brain`);
+				if (response.ok) {
+					const data = await response.json();
+					const normalized = normalizeGraphDocument(data);
+					const validation = validateGraphDocument(normalized);
+					if (validation.valid) {
+						graphStore.load(normalized);
+						publish(EVENTS.ACTIVITY_LOG_APPENDED, {
+							level: "info",
+							message: "Restored brain from disk",
+						});
+						return true;
+					}
+				}
+			} catch {
+				// Fall through to localStorage
+			}
+		}
+
+		// Try localStorage
+		const storage = this.#storage();
+		if (!storage) return false;
+
+		const raw = storage.getItem(PERSISTENCE.storage.lastSessionDocument);
+		if (!raw) return false;
+
+		try {
+			const parsed = JSON.parse(raw);
+			const normalized = normalizeGraphDocument(parsed);
+			const validation = validateGraphDocument(normalized);
+			if (!validation.valid) return false;
+
+			graphStore.load(normalized);
+			publish(EVENTS.ACTIVITY_LOG_APPENDED, {
+				level: "info",
+				message: "Restored brain from local cache",
+			});
+			return true;
+		} catch {
+			return false;
+		}
+	}
+
+	/* ── Private ── */
+
+	async #checkServer() {
+		try {
+			const response = await fetch(`${PERSISTENCE.serverUrl}/api/health`, {
+				signal: AbortSignal.timeout(2000),
+			});
+			this.#serverAvailable = response.ok;
+		} catch {
+			this.#serverAvailable = false;
+		}
+	}
+
+	#autosaveCurrent(reason) {
+		if (!this.#autosaveEnabled) return;
+		const snapshot = graphStore.getDocument();
+		if (!snapshot) return;
+		this.#scheduleAutosave(snapshot, reason);
+	}
+
+	#scheduleAutosave(document, reason = "autosave") {
+		if (!this.#autosaveEnabled) return;
+		if (this.#autosaveTimer != null) {
+			clearTimeout(this.#autosaveTimer);
+			this.#autosaveTimer = null;
+		}
+
+		this.#autosaveTimer = setTimeout(() => {
+			this.#persistSession(document, reason);
+		}, PERSISTENCE.autosaveDebounceMs);
+	}
+
+	async #persistSession(document, reason = "autosave") {
+		// Always save to localStorage (instant reload)
+		const storage = this.#storage();
+		if (storage) {
+			try {
+				storage.setItem(
+					PERSISTENCE.storage.lastSessionDocument,
+					JSON.stringify(document),
+				);
+			} catch {
+				// localStorage full or unavailable
+			}
+		}
+
+		// Try to save to server (disk durability)
+		if (this.#serverAvailable) {
+			try {
+				await fetch(`${PERSISTENCE.serverUrl}/api/brain`, {
+					method: "PUT",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify(document),
+				});
+			} catch {
+				// Server unavailable, localStorage was still saved
+			}
+		}
+
+		publish(EVENTS.GRAPH_DOCUMENT_AUTOSAVED, {
+			reason,
+			at: new Date().toISOString(),
+			origin: "persistence-store",
+		});
+	}
+
+	#readAutosaveFlag() {
+		const storage = this.#storage();
+		if (!storage) return true;
+
+		const raw = storage.getItem(PERSISTENCE.storage.autosaveEnabled);
+		if (raw == null) return true;
+		return raw === "true";
+	}
+
+	#writeAutosaveFlag(enabled) {
+		const storage = this.#storage();
+		if (!storage) return;
+		storage.setItem(
+			PERSISTENCE.storage.autosaveEnabled,
+			enabled ? "true" : "false",
+		);
+	}
+
+	#storage() {
+		try {
+			return window.localStorage;
+		} catch {
+			return null;
+		}
+	}
 }
 
 export const persistenceStore = new PersistenceStore();
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..c4b67d6
--- /dev/null
+++ b/server.js
@@ -0,0 +1,249 @@
+#!/usr/bin/env node
+
+/**
+ * CAR Brain — Local Server (zero dependencies)
+ *
+ * Serves the static frontend and provides REST API for:
+ * - Disk persistence of brain data
+ * - Configuration management
+ *
+ * Usage:
+ *   node server.js                    # standalone mode, port 4173
+ *   node server.js --port 8080        # custom port
+ *   node server.js --project ./myapp  # project mode
+ */
+
+const http = require("node:http");
+const fs = require("node:fs");
+const path = require("node:path");
+const os = require("node:os");
+
+/* ── CLI args ── */
+
+const args = process.argv.slice(2);
+const getArg = (flag) => {
+	const idx = args.indexOf(flag);
+	return idx >= 0 && idx + 1 < args.length ? args[idx + 1] : null;
+};
+
+const PORT = parseInt(getArg("--port") ?? "4173", 10);
+const PROJECT_PATH = getArg("--project");
+const BRAIN_DIR = PROJECT_PATH
+	? path.resolve(PROJECT_PATH, ".car-brain")
+	: path.join(os.homedir(), ".car-brain", "brains", "default");
+
+/* ── Ensure brain directory exists ── */
+
+const ensureDir = (dirPath) => {
+	if (!fs.existsSync(dirPath)) {
+		fs.mkdirSync(dirPath, { recursive: true });
+	}
+};
+
+ensureDir(BRAIN_DIR);
+ensureDir(path.join(BRAIN_DIR, "sessions"));
+ensureDir(path.join(BRAIN_DIR, "exports"));
+
+/* ── MIME types ── */
+
+const MIME_TYPES = {
+	".html": "text/html; charset=utf-8",
+	".css": "text/css; charset=utf-8",
+	".js": "application/javascript; charset=utf-8",
+	".json": "application/json; charset=utf-8",
+	".svg": "image/svg+xml",
+	".png": "image/png",
+	".jpg": "image/jpeg",
+	".ico": "image/x-icon",
+	".woff": "font/woff",
+	".woff2": "font/woff2",
+};
+
+/* ── Helper: read request body ── */
+
+const readBody = (req) =>
+	new Promise((resolve, reject) => {
+		const chunks = [];
+		req.on("data", (chunk) => chunks.push(chunk));
+		req.on("end", () => resolve(Buffer.concat(chunks).toString("utf-8")));
+		req.on("error", reject);
+	});
+
+/* ── Helper: JSON response ── */
+
+const jsonResponse = (res, statusCode, data) => {
+	const body = JSON.stringify(data);
+	res.writeHead(statusCode, {
+		"Content-Type": "application/json; charset=utf-8",
+		"Access-Control-Allow-Origin": "*",
+	});
+	res.end(body);
+};
+
+/* ── API routes ── */
+
+const brainFilePath = path.join(BRAIN_DIR, "brain.json");
+const configFilePath = path.join(BRAIN_DIR, "config.json");
+
+const handleApi = async (req, res) => {
+	const url = new URL(req.url, `http://localhost:${PORT}`);
+	const pathname = url.pathname;
+
+	// CORS preflight
+	if (req.method === "OPTIONS") {
+		res.writeHead(204, {
+			"Access-Control-Allow-Origin": "*",
+			"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
+			"Access-Control-Allow-Headers": "Content-Type",
+		});
+		res.end();
+		return true;
+	}
+
+	// GET /api/brain — load brain from disk
+	if (pathname === "/api/brain" && req.method === "GET") {
+		try {
+			if (fs.existsSync(brainFilePath)) {
+				const data = fs.readFileSync(brainFilePath, "utf-8");
+				jsonResponse(res, 200, JSON.parse(data));
+			} else {
+				jsonResponse(res, 404, { error: "No brain data on disk" });
+			}
+		} catch (error) {
+			jsonResponse(res, 500, { error: error.message });
+		}
+		return true;
+	}
+
+	// PUT /api/brain — save brain to disk
+	if (pathname === "/api/brain" && req.method === "PUT") {
+		try {
+			const body = await readBody(req);
+			const parsed = JSON.parse(body);
+			fs.writeFileSync(brainFilePath, JSON.stringify(parsed, null, 2), "utf-8");
+			jsonResponse(res, 200, { ok: true, savedAt: new Date().toISOString() });
+		} catch (error) {
+			jsonResponse(res, 500, { error: error.message });
+		}
+		return true;
+	}
+
+	// GET /api/config — load config
+	if (pathname === "/api/config" && req.method === "GET") {
+		try {
+			if (fs.existsSync(configFilePath)) {
+				const data = fs.readFileSync(configFilePath, "utf-8");
+				jsonResponse(res, 200, JSON.parse(data));
+			} else {
+				jsonResponse(res, 200, {
+					runner: "claude-code",
+					project: PROJECT_PATH ?? null,
+					brainDir: BRAIN_DIR,
+				});
+			}
+		} catch (error) {
+			jsonResponse(res, 500, { error: error.message });
+		}
+		return true;
+	}
+
+	// PUT /api/config — save config
+	if (pathname === "/api/config" && req.method === "PUT") {
+		try {
+			const body = await readBody(req);
+			const parsed = JSON.parse(body);
+			fs.writeFileSync(
+				configFilePath,
+				JSON.stringify(parsed, null, 2),
+				"utf-8",
+			);
+			jsonResponse(res, 200, { ok: true });
+		} catch (error) {
+			jsonResponse(res, 500, { error: error.message });
+		}
+		return true;
+	}
+
+	// GET /api/health — health check
+	if (pathname === "/api/health" && req.method === "GET") {
+		jsonResponse(res, 200, {
+			status: "ok",
+			brainDir: BRAIN_DIR,
+			project: PROJECT_PATH ?? null,
+			hasBrain: fs.existsSync(brainFilePath),
+		});
+		return true;
+	}
+
+	return false;
+};
+
+/* ── Static file serving ── */
+
+const STATIC_ROOT = __dirname;
+
+const serveStatic = (req, res) => {
+	const url = new URL(req.url, `http://localhost:${PORT}`);
+	let pathname = url.pathname;
+
+	// Default to index.html
+	if (pathname === "/") pathname = "/index.html";
+
+	const filePath = path.join(STATIC_ROOT, pathname);
+
+	// Security: prevent directory traversal
+	if (!filePath.startsWith(STATIC_ROOT)) {
+		res.writeHead(403);
+		res.end("Forbidden");
+		return;
+	}
+
+	try {
+		if (!fs.existsSync(filePath) || fs.statSync(filePath).isDirectory()) {
+			res.writeHead(404);
+			res.end("Not Found");
+			return;
+		}
+
+		const ext = path.extname(filePath);
+		const contentType = MIME_TYPES[ext] ?? "application/octet-stream";
+
+		const content = fs.readFileSync(filePath);
+		res.writeHead(200, {
+			"Content-Type": contentType,
+			"Cache-Control": "no-cache",
+		});
+		res.end(content);
+	} catch (error) {
+		res.writeHead(500);
+		res.end(`Server Error: ${error.message}`);
+	}
+};
+
+/* ── Server ── */
+
+const server = http.createServer(async (req, res) => {
+	try {
+		// API routes
+		if (req.url.startsWith("/api/")) {
+			const handled = await handleApi(req, res);
+			if (handled) return;
+		}
+
+		// Static files
+		serveStatic(req, res);
+	} catch (error) {
+		console.error("Server error:", error);
+		res.writeHead(500);
+		res.end("Internal Server Error");
+	}
+});
+
+server.listen(PORT, "127.0.0.1", () => {
+	console.log(`\n  CAR Brain Server`);
+	console.log(`  ─────────────────────────────────`);
+	console.log(`  URL:      http://localhost:${PORT}`);
+	console.log(`  Brain:    ${BRAIN_DIR}`);
+	if (PROJECT_PATH) console.log(`  Project:  ${path.resolve(PROJECT_PATH)}`);
+	console.log(`  ─────────────────────────────────\n`);
+});

From ebb816acd83510f5a1fb7c56da200b215301251d Mon Sep 17 00:00:00 2001
From: Amit Kolton <amit.ko@thing02.com>
Date: Fri, 3 Apr 2026 15:47:33 +0300
Subject: [PATCH 10/13] fix: inline helpers in pan-event-console after
 shared.js removal

---
 js/components/pan-event-console.js | 185 ++++++++++++++++++-----------
 1 file changed, 113 insertions(+), 72 deletions(-)

diff --git a/js/components/pan-event-console.js b/js/components/pan-event-console.js
index c90d539..84965f6 100644
--- a/js/components/pan-event-console.js
+++ b/js/components/pan-event-console.js
@@ -1,84 +1,125 @@
 import { subscribe } from "../core/pan.js";
-import { compactPreview, escapeHtml, formatTime } from "./bottom-panel/shared.js";
+
+const escapeHtml = (value) =>
+	String(value ?? "")
+		.replaceAll("&", "&amp;")
+		.replaceAll("<", "&lt;")
+		.replaceAll(">", "&gt;")
+		.replaceAll('"', "&quot;");
+
+const formatTime = (ts) => {
+	if (!ts) return "";
+	try {
+		return new Date(ts).toLocaleTimeString([], {
+			hour: "2-digit",
+			minute: "2-digit",
+			second: "2-digit",
+		});
+	} catch {
+		return "";
+	}
+};
+
+const compactPreview = (value, maxLen = 180) => {
+	try {
+		const text = JSON.stringify(value);
+		return text.length > maxLen ? `${text.slice(0, maxLen)}...` : text;
+	} catch {
+		return String(value);
+	}
+};
 
 const hasAttr = (element, name) => element.hasAttribute(name);
 
 class PanEventConsole extends HTMLElement {
-  #dispose = [];
-  #events = [];
-  #filter = "";
-  #maxEvents = 80;
-
-  connectedCallback() {
-    const configuredMax = Number(this.getAttribute("max-events"));
-    if (Number.isFinite(configuredMax) && configuredMax > 0) {
-      this.#maxEvents = Math.min(200, Math.max(10, Math.floor(configuredMax)));
-    }
-
-    this.render();
-    this.#bind();
-
-    this.#dispose.push(
-      subscribe("*", (event) => {
-        this.#events = [event, ...this.#events].slice(0, this.#maxEvents);
-        this.renderList();
-      })
-    );
-  }
-
-  disconnectedCallback() {
-    this.#dispose.forEach((run) => run());
-    this.#dispose = [];
-  }
-
-  #bind() {
-    this.querySelector("[data-action='clear-events']")?.addEventListener("click", () => {
-      this.#events = [];
-      this.renderList();
-    });
-
-    this.querySelector("[data-role='event-filter']")?.addEventListener("input", (event) => {
-      this.#filter = String(event.target?.value ?? "").trim().toLowerCase();
-      this.renderList();
-    });
-  }
-
-  #isVisible(entry) {
-    if (!this.#filter) return true;
-    const payloadText = compactPreview(entry?.payload ?? {}, 220).toLowerCase();
-    const eventName = String(entry?.eventName ?? "").toLowerCase();
-    return eventName.includes(this.#filter) || payloadText.includes(this.#filter);
-  }
-
-  renderList() {
-    const list = this.querySelector("[data-role='events-list']");
-    if (!list) return;
-
-    const visibleItems = this.#events.filter((entry) => this.#isVisible(entry));
-    if (!visibleItems.length) {
-      list.innerHTML = '<p class="panel-empty">No PAN events captured for this filter.</p>';
-      return;
-    }
-
-    list.innerHTML = `
+	#dispose = [];
+	#events = [];
+	#filter = "";
+	#maxEvents = 80;
+
+	connectedCallback() {
+		const configuredMax = Number(this.getAttribute("max-events"));
+		if (Number.isFinite(configuredMax) && configuredMax > 0) {
+			this.#maxEvents = Math.min(200, Math.max(10, Math.floor(configuredMax)));
+		}
+
+		this.render();
+		this.#bind();
+
+		this.#dispose.push(
+			subscribe("*", (event) => {
+				this.#events = [event, ...this.#events].slice(0, this.#maxEvents);
+				this.renderList();
+			}),
+		);
+	}
+
+	disconnectedCallback() {
+		this.#dispose.forEach((run) => run());
+		this.#dispose = [];
+	}
+
+	#bind() {
+		this.querySelector("[data-action='clear-events']")?.addEventListener(
+			"click",
+			() => {
+				this.#events = [];
+				this.renderList();
+			},
+		);
+
+		this.querySelector("[data-role='event-filter']")?.addEventListener(
+			"input",
+			(event) => {
+				this.#filter = String(event.target?.value ?? "")
+					.trim()
+					.toLowerCase();
+				this.renderList();
+			},
+		);
+	}
+
+	#isVisible(entry) {
+		if (!this.#filter) return true;
+		const payloadText = compactPreview(entry?.payload ?? {}, 220).toLowerCase();
+		const eventName = String(entry?.eventName ?? "").toLowerCase();
+		return (
+			eventName.includes(this.#filter) || payloadText.includes(this.#filter)
+		);
+	}
+
+	renderList() {
+		const list = this.querySelector("[data-role='events-list']");
+		if (!list) return;
+
+		const visibleItems = this.#events.filter((entry) => this.#isVisible(entry));
+		if (!visibleItems.length) {
+			list.innerHTML =
+				'<p class="panel-empty">No PAN events captured for this filter.</p>';
+			return;
+		}
+
+		list.innerHTML = `
       <ul class="log-list">
         ${visibleItems
-          .map((entry) => {
-            const timestamp = escapeHtml(formatTime(entry?.timestamp));
-            const name = escapeHtml(entry?.eventName ?? "unknown.event");
-            const preview = escapeHtml(compactPreview(entry?.payload ?? {}, 180));
-            return `<li class="log-item pan-event-row"><span class="row-meta">${timestamp}</span> <strong>${name}</strong><code>${preview}</code></li>`;
-          })
-          .join("")}
+					.map((entry) => {
+						const timestamp = escapeHtml(formatTime(entry?.timestamp));
+						const name = escapeHtml(entry?.eventName ?? "unknown.event");
+						const preview = escapeHtml(
+							compactPreview(entry?.payload ?? {}, 180),
+						);
+						return `<li class="log-item pan-event-row"><span class="row-meta">${timestamp}</span> <strong>${name}</strong><code>${preview}</code></li>`;
+					})
+					.join("")}
       </ul>
     `;
-  }
+	}
 
-  render() {
-    const showFilter = !hasAttr(this, "disable-filter");
-    const showClear = !hasAttr(this, "disable-clear");
+	render() {
+		const showFilter = !hasAttr(this, "disable-filter");
+		const showClear = !hasAttr(this, "disable-clear");
 
-    this.innerHTML = `
+		this.innerHTML = `
       <section class="pan-console">
         <div class="pan-console-toolbar">
           ${showFilter ? '<input type="search" name="pan-event-filter" data-role="event-filter" placeholder="Filter events or payload..." aria-label="Filter PAN events" />' : ""}
@@ -88,8 +129,8 @@ class PanEventConsole extends HTMLElement {
       </section>
     `;
 
-    this.renderList();
-  }
+		this.renderList();
+	}
 }
 
 customElements.define("pan-event-console", PanEventConsole);

From 9db8888ac41346096a23021a7f3c5c2b08ada0df Mon Sep 17 00:00:00 2001
From: Amit Kolton <amit.ko@thing02.com>
Date: Fri, 3 Apr 2026 16:48:37 +0300
Subject: [PATCH 11/13] =?UTF-8?q?fix:=20boost=203D=20visual=20impact=20?=
 =?UTF-8?q?=E2=80=94=20larger=20nodes,=20stronger=20bloom,=20brighter=20at?=
 =?UTF-8?q?mosphere?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Node radii 5x larger (1→5, 1.5→7, 2→9) so they're visible neurons not dots
- Bloom strength 0.6→1.5, threshold 0.8→0.4 for dramatic glow halos
- Emissive intensity 0.6→1.8 so nodes radiate light
- Fog density reduced 0.0015→0.0008 for less depth fade
- Ambient light 0.3→0.5 for brighter scene
- Particle size 0.5→1.5, star size 0.3→1.0 with additive blending
- Nebula sprites 200→400 scale for larger glow clouds
- Edge opacity boosted 0.4→0.7 and dash sizes increased
- Cluster shell radius 10→40 to properly enclose members
---
 .gitignore                                    |   1 +
 .../content/car-brain-mockup.html             | 841 ++++++++++++++++++
 .../content/visual-direction.html             | 131 +++
 .../55156-1775215990/content/waiting.html     |   3 +
 .../55156-1775215990/state/server-info        |   1 +
 .../55156-1775215990/state/server.pid         |   1 +
 js/components/graph-canvas.js                 |   2 +-
 .../graph-canvas/three-atmosphere.js          |  13 +-
 js/components/graph-canvas/three-edges.js     |  12 +-
 js/components/graph-canvas/three-nodes.js     |  10 +-
 js/core/constants.js                          |  20 +-
 11 files changed, 1007 insertions(+), 28 deletions(-)
 create mode 100644 .superpowers/brainstorm/55156-1775215990/content/car-brain-mockup.html
 create mode 100644 .superpowers/brainstorm/55156-1775215990/content/visual-direction.html
 create mode 100644 .superpowers/brainstorm/55156-1775215990/content/waiting.html
 create mode 100644 .superpowers/brainstorm/55156-1775215990/state/server-info
 create mode 100644 .superpowers/brainstorm/55156-1775215990/state/server.pid

diff --git a/.gitignore b/.gitignore
index 916731c..ea10bbe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,3 +48,4 @@ tmp/
 .tmp/
 *.bak
 *.orig
+.gstack/
diff --git a/.superpowers/brainstorm/55156-1775215990/content/car-brain-mockup.html b/.superpowers/brainstorm/55156-1775215990/content/car-brain-mockup.html
new file mode 100644
index 0000000..c108df3
--- /dev/null
+++ b/.superpowers/brainstorm/55156-1775215990/content/car-brain-mockup.html
@@ -0,0 +1,841 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>CAR Brain Simulator — Layout Mockup</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    background: #060a12;
+    color: #c9d1d9;
+    font-family: 'IBM Plex Sans', sans-serif;
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  .app-shell {
+    display: grid;
+    grid-template-rows: 44px 1fr 180px;
+    grid-template-columns: 56px 1fr 300px;
+    height: 100vh;
+    gap: 1px;
+    background: #1b1f27;
+  }
+
+  /* ===== TOP TOOLBAR ===== */
+  .toolbar {
+    grid-column: 1 / -1;
+    background: #0d1117;
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+    gap: 12px;
+    border-bottom: 1px solid #1b1f27;
+  }
+
+  .toolbar-logo {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-right: 16px;
+    border-right: 1px solid #1b1f27;
+  }
+
+  .toolbar-logo .brain-icon {
+    width: 28px;
+    height: 28px;
+    background: radial-gradient(circle at 40% 40%, #00f5ff 0%, #7b61ff 60%, #ff2d78 100%);
+    border-radius: 50%;
+    box-shadow: 0 0 12px #00f5ff40;
+  }
+
+  .toolbar-logo span {
+    font-weight: 700;
+    font-size: 14px;
+    color: #fff;
+    letter-spacing: 0.5px;
+  }
+
+  .toolbar-input {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: 1;
+    max-width: 420px;
+  }
+
+  .toolbar-input label {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: #00f5ff;
+    font-family: 'IBM Plex Mono', monospace;
+    white-space: nowrap;
+  }
+
+  .toolbar-input input {
+    flex: 1;
+    background: #161b22;
+    border: 1px solid #21262d;
+    border-radius: 4px;
+    padding: 5px 10px;
+    color: #c9d1d9;
+    font-size: 12px;
+    font-family: 'IBM Plex Mono', monospace;
+    outline: none;
+  }
+
+  .toolbar-input input:focus {
+    border-color: #00f5ff;
+    box-shadow: 0 0 6px #00f5ff30;
+  }
+
+  .toolbar-input input::placeholder { color: #484f58; }
+
+  .toolbar-controls {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0 12px;
+    border-left: 1px solid #1b1f27;
+    border-right: 1px solid #1b1f27;
+  }
+
+  .ctrl-btn {
+    background: #161b22;
+    border: 1px solid #21262d;
+    border-radius: 4px;
+    color: #c9d1d9;
+    padding: 4px 8px;
+    font-size: 11px;
+    cursor: pointer;
+    font-family: 'IBM Plex Mono', monospace;
+    transition: all 0.15s;
+  }
+
+  .ctrl-btn:hover { border-color: #00f5ff; color: #00f5ff; }
+  .ctrl-btn.active { background: #00f5ff15; border-color: #00f5ff; color: #00f5ff; }
+
+  .toolbar-steps {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 0 8px;
+  }
+
+  .step-dot {
+    width: 16px;
+    height: 4px;
+    background: #21262d;
+    border-radius: 2px;
+    transition: all 0.3s;
+  }
+
+  .step-dot.done { background: #00f5ff; box-shadow: 0 0 4px #00f5ff60; }
+  .step-dot.active { background: #ffd93d; box-shadow: 0 0 6px #ffd93d80; animation: pulse-step 1s infinite; }
+
+  @keyframes pulse-step {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  .toolbar-zoom {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+    font-size: 11px;
+    font-family: 'IBM Plex Mono', monospace;
+    color: #484f58;
+  }
+
+  /* ===== LEFT PALETTE ===== */
+  .palette {
+    background: #0d1117;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px 0;
+    gap: 2px;
+    border-right: 1px solid #1b1f27;
+  }
+
+  .tool-btn {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s;
+    border: 1px solid transparent;
+    position: relative;
+  }
+
+  .tool-btn:hover { background: #161b22; }
+  .tool-btn.active { background: #00f5ff12; border-color: #00f5ff40; }
+
+  .tool-btn svg { width: 20px; height: 20px; }
+  .tool-btn .tool-label {
+    display: none;
+    position: absolute;
+    left: 48px;
+    background: #161b22;
+    border: 1px solid #21262d;
+    padding: 3px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    white-space: nowrap;
+    z-index: 10;
+  }
+  .tool-btn:hover .tool-label { display: block; }
+
+  .palette-divider {
+    width: 28px;
+    height: 1px;
+    background: #21262d;
+    margin: 4px 0;
+  }
+
+  /* ===== 3D CANVAS ===== */
+  .canvas-area {
+    background: #080c14;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .canvas-area canvas {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Fake 3D scene rendered with SVG for mockup */
+  .scene-svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Grid overlay */
+  .grid-overlay {
+    position: absolute;
+    inset: 0;
+    background-image:
+      radial-gradient(circle at 50% 50%, #00f5ff05 0%, transparent 70%),
+      linear-gradient(#0f1923 1px, transparent 1px),
+      linear-gradient(90deg, #0f1923 1px, transparent 1px);
+    background-size: 100% 100%, 60px 60px, 60px 60px;
+    pointer-events: none;
+  }
+
+  /* Retrieval step overlay */
+  .step-overlay {
+    position: absolute;
+    top: 12px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #0d1117e0;
+    border: 1px solid #00f5ff40;
+    border-radius: 6px;
+    padding: 6px 16px;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 12px;
+    color: #00f5ff;
+    letter-spacing: 0.5px;
+    box-shadow: 0 0 20px #00f5ff15;
+  }
+
+  .step-overlay .step-num { color: #ffd93d; font-weight: 600; }
+
+  /* ===== INSPECTOR ===== */
+  .inspector {
+    background: #0d1117;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid #1b1f27;
+    overflow-y: auto;
+  }
+
+  .inspector-tabs {
+    display: flex;
+    border-bottom: 1px solid #1b1f27;
+    flex-shrink: 0;
+  }
+
+  .inspector-tab {
+    flex: 1;
+    padding: 8px 4px;
+    text-align: center;
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: #484f58;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all 0.15s;
+  }
+
+  .inspector-tab:hover { color: #c9d1d9; }
+  .inspector-tab.active { color: #00f5ff; border-bottom-color: #00f5ff; }
+
+  .inspector-content {
+    padding: 12px;
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .inspector-section {
+    margin-bottom: 16px;
+  }
+
+  .inspector-section h4 {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: #484f58;
+    margin-bottom: 6px;
+    font-family: 'IBM Plex Mono', monospace;
+  }
+
+  .chunk-content {
+    background: #161b22;
+    border: 1px solid #21262d;
+    border-radius: 6px;
+    padding: 10px;
+    font-size: 12px;
+    line-height: 1.5;
+    color: #e6edf3;
+  }
+
+  .tier-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 10px;
+    font-weight: 600;
+    font-family: 'IBM Plex Mono', monospace;
+  }
+
+  .tier-badge.t1 { background: #00f5ff18; color: #00f5ff; border: 1px solid #00f5ff40; }
+  .tier-badge.t2 { background: #7b61ff18; color: #7b61ff; border: 1px solid #7b61ff40; }
+  .tier-badge.t3 { background: #ff2d7818; color: #ff2d78; border: 1px solid #ff2d7840; }
+
+  .relevance-bar {
+    height: 6px;
+    background: #161b22;
+    border-radius: 3px;
+    overflow: hidden;
+    margin-top: 4px;
+  }
+
+  .relevance-fill {
+    height: 100%;
+    border-radius: 3px;
+    background: linear-gradient(90deg, #00f5ff, #7b61ff);
+    box-shadow: 0 0 8px #00f5ff40;
+  }
+
+  .meta-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 0;
+    font-size: 11px;
+    border-bottom: 1px solid #161b22;
+  }
+
+  .meta-key {
+    color: #484f58;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 10px;
+  }
+
+  .meta-value { color: #c9d1d9; }
+
+  .tag {
+    display: inline-block;
+    padding: 2px 6px;
+    background: #161b22;
+    border: 1px solid #21262d;
+    border-radius: 3px;
+    font-size: 10px;
+    font-family: 'IBM Plex Mono', monospace;
+    margin: 2px;
+  }
+
+  .tag.topic { border-color: #00f5ff40; color: #00f5ff; }
+  .tag.entity { border-color: #7b61ff40; color: #7b61ff; }
+  .tag.cue { border-color: #ffd93d40; color: #ffd93d; }
+
+  /* ===== BOTTOM PANEL ===== */
+  .bottom-panel {
+    grid-column: 1 / -1;
+    background: #0d1117;
+    display: flex;
+    flex-direction: column;
+    border-top: 1px solid #1b1f27;
+  }
+
+  .bottom-tabs {
+    display: flex;
+    border-bottom: 1px solid #1b1f27;
+    flex-shrink: 0;
+    padding: 0 12px;
+  }
+
+  .bottom-tab {
+    padding: 7px 14px;
+    font-size: 11px;
+    color: #484f58;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all 0.15s;
+  }
+
+  .bottom-tab:hover { color: #c9d1d9; }
+  .bottom-tab.active { color: #00f5ff; border-bottom-color: #00f5ff; }
+
+  .bottom-tab .badge {
+    display: inline-block;
+    background: #ff2d7830;
+    color: #ff2d78;
+    font-size: 9px;
+    padding: 1px 5px;
+    border-radius: 8px;
+    margin-left: 4px;
+    font-weight: 600;
+  }
+
+  .bottom-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px 12px;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 11px;
+  }
+
+  .log-entry {
+    display: flex;
+    gap: 12px;
+    padding: 3px 0;
+    border-bottom: 1px solid #0d111708;
+  }
+
+  .log-time { color: #484f58; white-space: nowrap; }
+  .log-step { color: #ffd93d; white-space: nowrap; min-width: 24px; }
+  .log-msg { color: #c9d1d9; }
+  .log-conf { color: #00f5ff; margin-left: auto; white-space: nowrap; }
+
+  /* ===== GLOW ANIMATIONS ===== */
+  @keyframes node-pulse {
+    0%, 100% { filter: drop-shadow(0 0 4px currentColor); }
+    50% { filter: drop-shadow(0 0 12px currentColor); }
+  }
+
+  @keyframes edge-flow {
+    0% { stroke-dashoffset: 20; }
+    100% { stroke-dashoffset: 0; }
+  }
+
+  @keyframes cluster-breathe {
+    0%, 100% { opacity: 0.12; }
+    50% { opacity: 0.2; }
+  }
+
+  .node-glow { animation: node-pulse 2s ease-in-out infinite; }
+  .edge-active { stroke-dasharray: 5 5; animation: edge-flow 0.6s linear infinite; }
+  .cluster-shell { animation: cluster-breathe 3s ease-in-out infinite; }
+
+  /* Particle trail effect */
+  @keyframes particle-move {
+    0% { offset-distance: 0%; opacity: 1; }
+    100% { offset-distance: 100%; opacity: 0; }
+  }
+</style>
+</head>
+<body>
+<div class="app-shell">
+
+  <!-- TOP TOOLBAR -->
+  <div class="toolbar">
+    <div class="toolbar-logo">
+      <div class="brain-icon"></div>
+      <span>CAR Brain</span>
+    </div>
+
+    <div class="toolbar-input">
+      <label>Memory</label>
+      <input type="text" placeholder="Add a new memory chunk...">
+    </div>
+
+    <div class="toolbar-input">
+      <label style="color: #ffd93d;">Query</label>
+      <input type="text" placeholder="Ask the brain a question..." style="border-color: #ffd93d30;">
+    </div>
+
+    <div class="toolbar-controls">
+      <button class="ctrl-btn">&#9654; Play</button>
+      <button class="ctrl-btn active">Step &rarr;</button>
+      <button class="ctrl-btn">Reset</button>
+    </div>
+
+    <div class="toolbar-steps">
+      <div class="step-dot done"></div>
+      <div class="step-dot done"></div>
+      <div class="step-dot done"></div>
+      <div class="step-dot done"></div>
+      <div class="step-dot active"></div>
+      <div class="step-dot"></div>
+      <div class="step-dot"></div>
+      <div class="step-dot"></div>
+      <div class="step-dot"></div>
+      <div class="step-dot"></div>
+      <div class="step-dot"></div>
+      <div class="step-dot"></div>
+      <div class="step-dot"></div>
+    </div>
+
+    <div class="toolbar-zoom">
+      <button class="ctrl-btn" style="padding: 2px 6px;">-</button>
+      <span>100%</span>
+      <button class="ctrl-btn" style="padding: 2px 6px;">+</button>
+    </div>
+  </div>
+
+  <!-- LEFT PALETTE -->
+  <div class="palette">
+    <div class="tool-btn active">
+      <svg viewBox="0 0 24 24" fill="none" stroke="#00f5ff" stroke-width="2"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/></svg>
+      <span class="tool-label">Select</span>
+    </div>
+    <div class="tool-btn">
+      <svg viewBox="0 0 24 24" fill="none" stroke="#c9d1d9" stroke-width="2"><path d="M18 11V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2h5"/><path d="M15 18l3-3m0 0l3 3m-3-3v8"/></svg>
+      <span class="tool-label">Pan / Orbit</span>
+    </div>
+    <div class="palette-divider"></div>
+    <div class="tool-btn">
+      <svg viewBox="0 0 24 24" fill="none" stroke="#00f5ff" stroke-width="2"><circle cx="12" cy="12" r="8"/><path d="M12 8v8M8 12h8"/></svg>
+      <span class="tool-label">Add Chunk</span>
+    </div>
+    <div class="tool-btn">
+      <svg viewBox="0 0 24 24" fill="none" stroke="#7b61ff" stroke-width="2"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>
+      <span class="tool-label">Add Link</span>
+    </div>
+    <div class="tool-btn">
+      <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"><circle cx="12" cy="12" r="8"/><text x="12" y="16" text-anchor="middle" fill="#ffd93d" font-size="12" font-weight="bold" stroke="none">?</text></svg>
+      <span class="tool-label">Add Question</span>
+    </div>
+    <div class="tool-btn">
+      <svg viewBox="0 0 24 24" fill="none" stroke="#ff9f1c" stroke-width="2"><path d="M12 2l4 8-4 8-4-8z"/></svg>
+      <span class="tool-label">Add Trigger</span>
+    </div>
+  </div>
+
+  <!-- 3D CANVAS -->
+  <div class="canvas-area">
+    <div class="grid-overlay"></div>
+
+    <div class="step-overlay">
+      <span class="step-num">Step 5</span> Multi-Query Retrieval — sending 4 sub-queries into the memory graph
+    </div>
+
+    <svg class="scene-svg" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <filter id="glow-cyan" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="4" result="blur"/>
+          <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+        <filter id="glow-purple" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="5" result="blur"/>
+          <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+        <filter id="glow-pink" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="3" result="blur"/>
+          <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+        <filter id="glow-gold" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="3" result="blur"/>
+          <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+        <radialGradient id="cluster-grad" cx="50%" cy="50%" r="50%">
+          <stop offset="0" stop-color="#00f5ff" stop-opacity="0.08"/>
+          <stop offset="0.7" stop-color="#00f5ff" stop-opacity="0.04"/>
+          <stop offset="1" stop-color="#00f5ff" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="cluster-grad2" cx="50%" cy="50%" r="50%">
+          <stop offset="0" stop-color="#7b61ff" stop-opacity="0.06"/>
+          <stop offset="0.7" stop-color="#7b61ff" stop-opacity="0.03"/>
+          <stop offset="1" stop-color="#7b61ff" stop-opacity="0"/>
+        </radialGradient>
+      </defs>
+
+      <!-- DEEP PLANE: Tier 3 schemas (back, smaller, dimmer) -->
+      <g opacity="0.5" transform="translate(0, 20) scale(0.85)">
+        <!-- T3 Pattern: Schema node -->
+        <polygon points="620,120 640,85 660,120 640,155" fill="#080c14" stroke="#ff2d78" stroke-width="1.5" filter="url(#glow-pink)" opacity="0.7"/>
+        <text x="640" y="124" text-anchor="middle" fill="#ff2d78" font-size="8" font-family="IBM Plex Mono" opacity="0.8">SCHEMA</text>
+
+        <polygon points="700,200 720,165 740,200 720,235" fill="#080c14" stroke="#ff2d78" stroke-width="1.5" filter="url(#glow-pink)" opacity="0.5"/>
+        <text x="720" y="204" text-anchor="middle" fill="#ff2d78" font-size="7" font-family="IBM Plex Mono" opacity="0.6">PATTERN</text>
+      </g>
+
+      <!-- MID PLANE: Tier 2 summaries -->
+      <g opacity="0.7">
+        <!-- Cluster shell 2 -->
+        <ellipse cx="560" cy="280" rx="100" ry="70" fill="url(#cluster-grad2)" stroke="#7b61ff" stroke-width="0.5" opacity="0.3" class="cluster-shell"/>
+
+        <!-- T2 Summary nodes (icosahedron-like hexagons) -->
+        <polygon points="520,260 535,245 555,245 570,260 555,275 535,275" fill="#0d1117" stroke="#7b61ff" stroke-width="1.5" filter="url(#glow-purple)"/>
+        <text x="545" y="264" text-anchor="middle" fill="#7b61ff" font-size="7" font-family="IBM Plex Mono">T2 SUMMARY</text>
+
+        <polygon points="570,300 585,285 605,285 620,300 605,315 585,315" fill="#0d1117" stroke="#7b61ff" stroke-width="1.5" filter="url(#glow-purple)" opacity="0.8"/>
+        <text x="595" y="304" text-anchor="middle" fill="#7b61ff" font-size="7" font-family="IBM Plex Mono">T2 COMPRESSED</text>
+      </g>
+
+      <!-- EDGES: Links between nodes -->
+      <!-- T1 to T1 links -->
+      <path d="M180,200 C250,180 280,250 340,230" fill="none" stroke="#00f5ff" stroke-width="1" opacity="0.3"/>
+      <path d="M200,310 C260,290 290,260 340,230" fill="none" stroke="#00f5ff" stroke-width="1" opacity="0.25"/>
+      <path d="M340,230 C380,220 420,270 420,330" fill="none" stroke="#00f5ff" stroke-width="1" opacity="0.2"/>
+
+      <!-- Active retrieval paths (animated) -->
+      <path d="M300,140 C340,160 360,200 340,230" fill="none" stroke="#00f5ff" stroke-width="2" opacity="0.8" class="edge-active"/>
+      <path d="M300,140 C250,170 200,190 180,200" fill="none" stroke="#00f5ff" stroke-width="2" opacity="0.6" class="edge-active"/>
+      <path d="M300,140 C350,150 400,180 420,330" fill="none" stroke="#00f5ff" stroke-width="1.5" opacity="0.5" class="edge-active"/>
+      <path d="M300,140 C320,160 340,200 340,230" fill="none" stroke="#ffd93d" stroke-width="1.5" opacity="0.4" class="edge-active"/>
+
+      <!-- T1 to T2 promotion edges -->
+      <path d="M340,230 C400,240 480,255 520,260" fill="none" stroke="#7b61ff" stroke-width="1" opacity="0.3" stroke-dasharray="3 3"/>
+      <path d="M420,330 C470,320 540,310 570,300" fill="none" stroke="#7b61ff" stroke-width="1" opacity="0.25" stroke-dasharray="3 3"/>
+
+      <!-- Contradiction edge -->
+      <path d="M180,200 C200,260 190,290 200,310" fill="none" stroke="#ff3333" stroke-width="1.5" opacity="0.6" stroke-dasharray="4 4">
+        <animate attributeName="opacity" values="0.3;0.8;0.3" dur="1.5s" repeatCount="indefinite"/>
+      </path>
+
+      <!-- T2 to T3 -->
+      <path d="M545,260 C580,220 610,170 620,140" fill="none" stroke="#ff2d78" stroke-width="0.8" opacity="0.3" stroke-dasharray="2 3"/>
+
+      <!-- FRONT PLANE: Tier 1 episodes + Query -->
+      <!-- Cluster shell 1 -->
+      <ellipse cx="280" cy="260" rx="140" ry="110" fill="url(#cluster-grad)" stroke="#00f5ff" stroke-width="0.5" opacity="0.2" class="cluster-shell"/>
+
+      <!-- Query node (top center, gold) -->
+      <polygon points="300,110 315,140 285,140" fill="#080c14" stroke="#ffd93d" stroke-width="2" filter="url(#glow-gold)" class="node-glow" style="color: #ffd93d;">
+        <animate attributeName="opacity" values="0.8;1;0.8" dur="1.5s" repeatCount="indefinite"/>
+      </polygon>
+      <text x="300" y="134" text-anchor="middle" fill="#ffd93d" font-size="7" font-family="IBM Plex Mono" font-weight="600">QUERY</text>
+
+      <!-- Sub-questions branching from query -->
+      <polygon points="200,170 208,180 192,180" fill="#080c14" stroke="#ffd93d" stroke-width="1" opacity="0.6" filter="url(#glow-gold)"/>
+      <polygon points="270,160 278,170 262,170" fill="#080c14" stroke="#ffd93d" stroke-width="1" opacity="0.7" filter="url(#glow-gold)"/>
+      <polygon points="340,165 348,175 332,175" fill="#080c14" stroke="#ffd93d" stroke-width="1" opacity="0.6" filter="url(#glow-gold)"/>
+      <polygon points="390,175 398,185 382,185" fill="#080c14" stroke="#ffd93d" stroke-width="1" opacity="0.5" filter="url(#glow-gold)"/>
+
+      <!-- Sub-question lines from query -->
+      <line x1="293" y1="140" x2="200" y2="170" stroke="#ffd93d" stroke-width="0.8" opacity="0.4"/>
+      <line x1="298" y1="140" x2="270" y2="160" stroke="#ffd93d" stroke-width="0.8" opacity="0.5"/>
+      <line x1="305" y1="140" x2="340" y2="165" stroke="#ffd93d" stroke-width="0.8" opacity="0.4"/>
+      <line x1="310" y1="140" x2="390" y2="175" stroke="#ffd93d" stroke-width="0.8" opacity="0.3"/>
+
+      <!-- T1 Episode nodes (spheres = circles) -->
+      <!-- Node 1: Selected, bright -->
+      <circle cx="180" cy="200" r="20" fill="#080c14" stroke="#00f5ff" stroke-width="2" filter="url(#glow-cyan)" class="node-glow" style="color: #00f5ff;"/>
+      <circle cx="180" cy="200" r="20" fill="#00f5ff" opacity="0.08"/>
+      <text x="180" y="196" text-anchor="middle" fill="#fff" font-size="8" font-family="IBM Plex Mono" font-weight="600">Spain</text>
+      <text x="180" y="206" text-anchor="middle" fill="#00f5ff" font-size="7" font-family="IBM Plex Mono">margins</text>
+
+      <!-- Node 2 -->
+      <circle cx="340" cy="230" r="18" fill="#080c14" stroke="#00f5ff" stroke-width="1.5" filter="url(#glow-cyan)" opacity="0.9"/>
+      <circle cx="340" cy="230" r="18" fill="#00f5ff" opacity="0.06"/>
+      <text x="340" y="226" text-anchor="middle" fill="#e6edf3" font-size="7" font-family="IBM Plex Mono">Logistics</text>
+      <text x="340" y="236" text-anchor="middle" fill="#00f5ff" font-size="7" font-family="IBM Plex Mono">change</text>
+
+      <!-- Node 3: Dimmer (cold) -->
+      <circle cx="200" cy="310" r="16" fill="#080c14" stroke="#00f5ff" stroke-width="1" filter="url(#glow-cyan)" opacity="0.5"/>
+      <text x="200" y="306" text-anchor="middle" fill="#e6edf3" font-size="7" font-family="IBM Plex Mono" opacity="0.6">Korea</text>
+      <text x="200" y="316" text-anchor="middle" fill="#00f5ff" font-size="6" font-family="IBM Plex Mono" opacity="0.5">similar</text>
+
+      <!-- Node 4 -->
+      <circle cx="420" cy="330" r="15" fill="#080c14" stroke="#00f5ff" stroke-width="1.5" filter="url(#glow-cyan)" opacity="0.7"/>
+      <text x="420" y="326" text-anchor="middle" fill="#e6edf3" font-size="7" font-family="IBM Plex Mono">Partner</text>
+      <text x="420" y="336" text-anchor="middle" fill="#00f5ff" font-size="6" font-family="IBM Plex Mono">renegotiation</text>
+
+      <!-- Node 5: Very dim background node -->
+      <circle cx="120" cy="350" r="12" fill="#080c14" stroke="#00f5ff" stroke-width="0.8" opacity="0.25"/>
+      <circle cx="480" cy="200" r="10" fill="#080c14" stroke="#00f5ff" stroke-width="0.8" opacity="0.2"/>
+      <circle cx="150" cy="130" r="9" fill="#080c14" stroke="#00f5ff" stroke-width="0.6" opacity="0.15"/>
+      <circle cx="500" cy="380" r="11" fill="#080c14" stroke="#7b61ff" stroke-width="0.6" opacity="0.2"/>
+      <circle cx="650" cy="380" r="8" fill="#080c14" stroke="#ff2d78" stroke-width="0.5" opacity="0.15"/>
+
+      <!-- Trigger node (diamond) -->
+      <polygon points="100,260 110,245 120,260 110,275" fill="#080c14" stroke="#ff9f1c" stroke-width="1.5" filter="url(#glow-gold)" opacity="0.6">
+        <animate attributeName="opacity" values="0.4;0.8;0.4" dur="2s" repeatCount="indefinite"/>
+      </polygon>
+      <text x="110" y="264" text-anchor="middle" fill="#ff9f1c" font-size="6" font-family="IBM Plex Mono">TRG</text>
+
+      <!-- Relevance score floating labels -->
+      <text x="180" y="178" text-anchor="middle" fill="#00f5ff" font-size="8" font-family="IBM Plex Mono" opacity="0.7">0.92</text>
+      <text x="340" y="210" text-anchor="middle" fill="#00f5ff" font-size="8" font-family="IBM Plex Mono" opacity="0.5">0.78</text>
+      <text x="200" y="294" text-anchor="middle" fill="#00f5ff" font-size="7" font-family="IBM Plex Mono" opacity="0.35">0.41</text>
+    </svg>
+  </div>
+
+  <!-- INSPECTOR PANEL -->
+  <div class="inspector">
+    <div class="inspector-tabs">
+      <div class="inspector-tab active">Overview</div>
+      <div class="inspector-tab">Meta</div>
+      <div class="inspector-tab">Retrieval</div>
+      <div class="inspector-tab">Score</div>
+    </div>
+
+    <div class="inspector-content">
+      <div class="inspector-section">
+        <h4>Selected Chunk</h4>
+        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+          <span class="tier-badge t1">Tier 1</span>
+          <span style="font-size: 11px; color: #484f58;">chunk-456</span>
+        </div>
+        <div class="chunk-content">
+          On March 15, Valentina said Spain margins dropped to 18% after the logistics partner change in February.
+        </div>
+      </div>
+
+      <div class="inspector-section">
+        <h4>Relevance Score</h4>
+        <div style="display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 4px;">
+          <span>0.92</span>
+          <span style="color: #00f5ff; font-size: 10px;">HIGH</span>
+        </div>
+        <div class="relevance-bar">
+          <div class="relevance-fill" style="width: 92%;"></div>
+        </div>
+      </div>
+
+      <div class="inspector-section">
+        <h4>Metadata</h4>
+        <div class="meta-row">
+          <span class="meta-key">source</span>
+          <span class="meta-value">user_stated</span>
+        </div>
+        <div class="meta-row">
+          <span class="meta-key">reliability</span>
+          <span class="meta-value">high</span>
+        </div>
+        <div class="meta-row">
+          <span class="meta-key">emotional_tone</span>
+          <span class="meta-value">concern</span>
+        </div>
+        <div class="meta-row">
+          <span class="meta-key">intensity</span>
+          <span class="meta-value">0.85</span>
+        </div>
+        <div class="meta-row">
+          <span class="meta-key">stakes</span>
+          <span class="meta-value">high</span>
+        </div>
+        <div class="meta-row">
+          <span class="meta-key">status</span>
+          <span class="meta-value" style="color: #ffd93d;">open</span>
+        </div>
+        <div class="meta-row">
+          <span class="meta-key">access_count</span>
+          <span class="meta-value">3</span>
+        </div>
+        <div class="meta-row">
+          <span class="meta-key">decision_made</span>
+          <span class="meta-value" style="color: #00f5ff;">true</span>
+        </div>
+      </div>
+
+      <div class="inspector-section">
+        <h4>Topic Tags</h4>
+        <div>
+          <span class="tag topic">spain</span>
+          <span class="tag topic">margins</span>
+          <span class="tag topic">EU-ops</span>
+        </div>
+      </div>
+
+      <div class="inspector-section">
+        <h4>Entity Tags</h4>
+        <div>
+          <span class="tag entity">Spain account</span>
+          <span class="tag entity">logistics partner</span>
+        </div>
+      </div>
+
+      <div class="inspector-section">
+        <h4>Retrieval Cues</h4>
+        <div>
+          <span class="tag cue">spain margins</span>
+          <span class="tag cue">EU cost pressure</span>
+          <span class="tag cue">logistics change impact</span>
+        </div>
+      </div>
+
+      <div class="inspector-section">
+        <h4>Linked Chunks</h4>
+        <div style="font-size: 11px;">
+          <div style="padding: 3px 0; color: #7b61ff; cursor: pointer;">chunk-789 — Korea similar pattern</div>
+          <div style="padding: 3px 0; color: #7b61ff; cursor: pointer;">chunk-234 — Partner renegotiation</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- BOTTOM PANEL -->
+  <div class="bottom-panel">
+    <div class="bottom-tabs">
+      <div class="bottom-tab active">Retrieval Log</div>
+      <div class="bottom-tab">Consolidation</div>
+      <div class="bottom-tab">Contradictions <span class="badge">1</span></div>
+      <div class="bottom-tab">Questions <span class="badge">3</span></div>
+      <div class="bottom-tab">Metamemory</div>
+    </div>
+
+    <div class="bottom-content">
+      <div class="log-entry">
+        <span class="log-time">14:32:01</span>
+        <span class="log-step">S1</span>
+        <span class="log-msg">Session primer loaded — 3 open threads, 1 trigger matched</span>
+      </div>
+      <div class="log-entry">
+        <span class="log-time">14:32:01</span>
+        <span class="log-step">S2</span>
+        <span class="log-msg">Context constructed — user in investigation mode, drilling into Spain account</span>
+      </div>
+      <div class="log-entry">
+        <span class="log-time">14:32:02</span>
+        <span class="log-step">S3</span>
+        <span class="log-msg">Query decomposed into 4 sub-questions: existence, recency, baseline, causation</span>
+      </div>
+      <div class="log-entry">
+        <span class="log-time">14:32:02</span>
+        <span class="log-step">S4</span>
+        <span class="log-msg">Metamemory: Spain account coverage DEEP, Q2 projections NOT DISCUSSED</span>
+      </div>
+      <div class="log-entry" style="color: #00f5ff;">
+        <span class="log-time">14:32:03</span>
+        <span class="log-step" style="color: #00f5ff;">S5</span>
+        <span class="log-msg" style="color: #00f5ff;">Multi-query retrieval R1 — 4 queries sent, 11 chunks activated</span>
+        <span class="log-conf">conf: 0.78</span>
+      </div>
+      <div class="log-entry" style="opacity: 0.4;">
+        <span class="log-time">—</span>
+        <span class="log-step">S6</span>
+        <span class="log-msg" style="color: #484f58;">Cluster formation — waiting...</span>
+      </div>
+    </div>
+  </div>
+
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/.superpowers/brainstorm/55156-1775215990/content/visual-direction.html b/.superpowers/brainstorm/55156-1775215990/content/visual-direction.html
new file mode 100644
index 0000000..45a8344
--- /dev/null
+++ b/.superpowers/brainstorm/55156-1775215990/content/visual-direction.html
@@ -0,0 +1,131 @@
+<h2>Visual Direction for the Brain Simulator</h2>
+<p class="subtitle">Which aesthetic feels right for a CAR Protocol memory system?</p>
+
+<div class="cards">
+  <div class="card" data-choice="neural-dark" onclick="toggleSelect(this)">
+    <div class="card-image" style="background: #0a0e1a; padding: 2rem; border-radius: 8px 8px 0 0;">
+      <div style="position: relative; height: 200px; overflow: hidden;">
+        <!-- Neural network aesthetic -->
+        <svg width="100%" height="100%" viewBox="0 0 400 200">
+          <!-- Glowing connections -->
+          <defs>
+            <filter id="glow1">
+              <feGaussianBlur stdDeviation="3" result="blur"/>
+              <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+            </filter>
+            <linearGradient id="pulse1" x1="0" y1="0" x2="1" y2="0">
+              <stop offset="0" stop-color="#00f5ff" stop-opacity="0.1"/>
+              <stop offset="0.5" stop-color="#00f5ff" stop-opacity="0.8"/>
+              <stop offset="1" stop-color="#00f5ff" stop-opacity="0.1"/>
+            </linearGradient>
+          </defs>
+          <!-- Edges -->
+          <path d="M80,60 C140,60 160,100 200,100" fill="none" stroke="#00f5ff" stroke-width="1.5" opacity="0.6" filter="url(#glow1)"/>
+          <path d="M80,140 C140,140 160,100 200,100" fill="none" stroke="#7b61ff" stroke-width="1.5" opacity="0.6" filter="url(#glow1)"/>
+          <path d="M200,100 C240,100 260,50 320,50" fill="none" stroke="#00f5ff" stroke-width="1.5" opacity="0.4" filter="url(#glow1)"/>
+          <path d="M200,100 C240,100 260,150 320,150" fill="none" stroke="#ff6b9d" stroke-width="1.5" opacity="0.5" filter="url(#glow1)"/>
+          <!-- Nodes -->
+          <circle cx="80" cy="60" r="18" fill="#0d1b2a" stroke="#00f5ff" stroke-width="2" filter="url(#glow1)"/>
+          <text x="80" y="64" text-anchor="middle" fill="#00f5ff" font-size="8" font-family="monospace">T1</text>
+          <circle cx="80" cy="140" r="18" fill="#0d1b2a" stroke="#7b61ff" stroke-width="2" filter="url(#glow1)"/>
+          <text x="80" y="144" text-anchor="middle" fill="#7b61ff" font-size="8" font-family="monospace">T1</text>
+          <circle cx="200" cy="100" r="24" fill="#0d1b2a" stroke="#00f5ff" stroke-width="2.5" filter="url(#glow1)"/>
+          <text x="200" y="96" text-anchor="middle" fill="#fff" font-size="8" font-weight="bold">CLUSTER</text>
+          <text x="200" y="108" text-anchor="middle" fill="#00f5ff" font-size="7">relevance: 0.87</text>
+          <circle cx="320" cy="50" r="16" fill="#0d1b2a" stroke="#ff6b9d" stroke-width="1.5" filter="url(#glow1)"/>
+          <text x="320" y="54" text-anchor="middle" fill="#ff6b9d" font-size="8" font-family="monospace">T3</text>
+          <circle cx="320" cy="150" r="16" fill="#0d1b2a" stroke="#ffd93d" stroke-width="1.5" filter="url(#glow1)"/>
+          <text x="320" y="154" text-anchor="middle" fill="#ffd93d" font-size="7">Q</text>
+        </svg>
+      </div>
+    </div>
+    <div class="card-body">
+      <h3>A. Neural Dark</h3>
+      <p>Deep dark background with glowing neon connections. Nodes pulse when activated. Edges glow cyan/purple during retrieval. Brain-scan aesthetic — feels like watching synapses fire.</p>
+      <p style="color: #888; font-size: 0.85em;">Tier 1: cyan | Tier 2: purple | Tier 3: pink | Questions: gold | Clusters: white glow</p>
+    </div>
+  </div>
+
+  <div class="card" data-choice="organic-brain" onclick="toggleSelect(this)">
+    <div class="card-image" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); padding: 2rem; border-radius: 8px 8px 0 0;">
+      <div style="position: relative; height: 200px; overflow: hidden;">
+        <svg width="100%" height="100%" viewBox="0 0 400 200">
+          <defs>
+            <filter id="glow2">
+              <feGaussianBlur stdDeviation="4" result="blur"/>
+              <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+            </filter>
+            <radialGradient id="neuron1" cx="50%" cy="50%" r="50%">
+              <stop offset="0" stop-color="#e94560" stop-opacity="0.8"/>
+              <stop offset="1" stop-color="#e94560" stop-opacity="0.1"/>
+            </radialGradient>
+            <radialGradient id="neuron2" cx="50%" cy="50%" r="50%">
+              <stop offset="0" stop-color="#533483" stop-opacity="0.8"/>
+              <stop offset="1" stop-color="#533483" stop-opacity="0.1"/>
+            </radialGradient>
+          </defs>
+          <!-- Organic blob connections -->
+          <path d="M90,70 Q130,40 170,80 Q200,100 230,90" fill="none" stroke="#e94560" stroke-width="3" opacity="0.4" stroke-linecap="round"/>
+          <path d="M90,130 Q140,160 190,120 Q210,100 230,90" fill="none" stroke="#533483" stroke-width="3" opacity="0.4" stroke-linecap="round"/>
+          <path d="M230,90 Q280,70 330,60" fill="none" stroke="#0f3460" stroke-width="2" opacity="0.5" stroke-linecap="round"/>
+          <path d="M230,90 Q280,130 330,140" fill="none" stroke="#e94560" stroke-width="2" opacity="0.3" stroke-linecap="round"/>
+          <!-- Organic nodes with glow -->
+          <circle cx="90" cy="70" r="22" fill="url(#neuron1)" filter="url(#glow2)"/>
+          <circle cx="90" cy="70" r="12" fill="#1a1a2e" stroke="#e94560" stroke-width="1.5"/>
+          <text x="90" y="74" text-anchor="middle" fill="#e94560" font-size="9">raw</text>
+          <circle cx="90" cy="130" r="20" fill="url(#neuron2)" filter="url(#glow2)"/>
+          <circle cx="90" cy="130" r="11" fill="#1a1a2e" stroke="#533483" stroke-width="1.5"/>
+          <text x="90" y="134" text-anchor="middle" fill="#533483" font-size="9">raw</text>
+          <circle cx="230" cy="90" r="30" fill="url(#neuron1)" filter="url(#glow2)" opacity="0.5"/>
+          <circle cx="230" cy="90" r="18" fill="#1a1a2e" stroke="#e94560" stroke-width="2"/>
+          <text x="230" y="86" text-anchor="middle" fill="#fff" font-size="8" font-weight="bold">cluster</text>
+          <text x="230" y="98" text-anchor="middle" fill="#e94560" font-size="7">0.87</text>
+          <circle cx="330" cy="60" r="16" fill="#1a1a2e" stroke="#0f3460" stroke-width="2"/>
+          <text x="330" y="64" text-anchor="middle" fill="#aab" font-size="8">schema</text>
+          <circle cx="330" cy="140" r="14" fill="#1a1a2e" stroke="#533483" stroke-width="1.5"/>
+          <text x="330" y="144" text-anchor="middle" fill="#533483" font-size="7">Q?</text>
+        </svg>
+      </div>
+    </div>
+    <div class="card-body">
+      <h3>B. Organic Brain</h3>
+      <p>Deep blue-to-purple gradients with soft radiating glows around nodes. Connections feel organic, like dendrites. Warm reds for hot memories, cool purples for cold. Feels biological.</p>
+      <p style="color: #888; font-size: 0.85em;">Hot memory: warm red | Cold memory: deep purple | Schemas: muted blue | Questions: violet</p>
+    </div>
+  </div>
+
+  <div class="card" data-choice="clean-clinical" onclick="toggleSelect(this)">
+    <div class="card-image" style="background: #f8f9fc; padding: 2rem; border-radius: 8px 8px 0 0;">
+      <div style="position: relative; height: 200px; overflow: hidden;">
+        <svg width="100%" height="100%" viewBox="0 0 400 200">
+          <!-- Clean lines -->
+          <path d="M80,70 C140,70 160,100 200,100" fill="none" stroke="#4361ee" stroke-width="2" opacity="0.5"/>
+          <path d="M80,130 C140,130 160,100 200,100" fill="none" stroke="#4361ee" stroke-width="2" opacity="0.3"/>
+          <path d="M200,100 C240,100 260,55 320,55" fill="none" stroke="#7209b7" stroke-width="1.5" opacity="0.4"/>
+          <path d="M200,100 C240,100 260,145 320,145" fill="none" stroke="#f72585" stroke-width="1.5" opacity="0.4"/>
+          <!-- Clean bordered nodes -->
+          <rect x="55" y="50" width="50" height="40" rx="8" fill="white" stroke="#4361ee" stroke-width="2"/>
+          <text x="80" y="66" text-anchor="middle" fill="#4361ee" font-size="8" font-weight="600">Tier 1</text>
+          <text x="80" y="78" text-anchor="middle" fill="#999" font-size="7">episode</text>
+          <rect x="55" y="110" width="50" height="40" rx="8" fill="white" stroke="#4361ee" stroke-width="2"/>
+          <text x="80" y="126" text-anchor="middle" fill="#4361ee" font-size="8" font-weight="600">Tier 1</text>
+          <text x="80" y="138" text-anchor="middle" fill="#999" font-size="7">episode</text>
+          <rect x="170" y="75" width="60" height="50" rx="10" fill="white" stroke="#7209b7" stroke-width="2.5"/>
+          <text x="200" y="96" text-anchor="middle" fill="#7209b7" font-size="9" font-weight="700">Cluster</text>
+          <text x="200" y="110" text-anchor="middle" fill="#999" font-size="7">score: 0.87</text>
+          <rect x="295" y="35" width="50" height="40" rx="8" fill="white" stroke="#f72585" stroke-width="1.5"/>
+          <text x="320" y="51" text-anchor="middle" fill="#f72585" font-size="8" font-weight="600">Tier 3</text>
+          <text x="320" y="63" text-anchor="middle" fill="#999" font-size="7">schema</text>
+          <rect x="295" y="125" width="50" height="40" rx="8" fill="#fff7e6" stroke="#f59e0b" stroke-width="1.5"/>
+          <text x="320" y="141" text-anchor="middle" fill="#f59e0b" font-size="8" font-weight="600">Q?</text>
+          <text x="320" y="153" text-anchor="middle" fill="#999" font-size="7">L3</text>
+        </svg>
+      </div>
+    </div>
+    <div class="card-body">
+      <h3>C. Clean Clinical</h3>
+      <p>Light background, crisp borders, clear typography. Like a medical/scientific visualization tool. Professional, data-dense, highly readable. Focus on information density over atmosphere.</p>
+      <p style="color: #888; font-size: 0.85em;">Blue: episodes | Purple: clusters | Pink: schemas | Amber: questions</p>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/.superpowers/brainstorm/55156-1775215990/content/waiting.html b/.superpowers/brainstorm/55156-1775215990/content/waiting.html
new file mode 100644
index 0000000..f92c257
--- /dev/null
+++ b/.superpowers/brainstorm/55156-1775215990/content/waiting.html
@@ -0,0 +1,3 @@
+<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
+  <p class="subtitle">Continuing in terminal...</p>
+</div>
\ No newline at end of file
diff --git a/.superpowers/brainstorm/55156-1775215990/state/server-info b/.superpowers/brainstorm/55156-1775215990/state/server-info
new file mode 100644
index 0000000..9ba2544
--- /dev/null
+++ b/.superpowers/brainstorm/55156-1775215990/state/server-info
@@ -0,0 +1 @@
+{"type":"server-started","port":64272,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:64272","screen_dir":"/Users/amitkolton/Projects/cargraph/carmindgraph/.superpowers/brainstorm/55156-1775215990/content","state_dir":"/Users/amitkolton/Projects/cargraph/carmindgraph/.superpowers/brainstorm/55156-1775215990/state"}
diff --git a/.superpowers/brainstorm/55156-1775215990/state/server.pid b/.superpowers/brainstorm/55156-1775215990/state/server.pid
new file mode 100644
index 0000000..08942f0
--- /dev/null
+++ b/.superpowers/brainstorm/55156-1775215990/state/server.pid
@@ -0,0 +1 @@
+55165
diff --git a/js/components/graph-canvas.js b/js/components/graph-canvas.js
index e57c8d8..13d8453 100644
--- a/js/components/graph-canvas.js
+++ b/js/components/graph-canvas.js
@@ -131,7 +131,7 @@ class GraphCanvas extends HTMLElement {
 		this.#camera.lookAt(...CAMERA.HOME_LOOK_AT);
 
 		// Lights
-		this.#ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
+		this.#ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
 		this.#scene.add(this.#ambientLight);
 
 		const directional = new THREE.DirectionalLight(0xffffff, 0.4);
diff --git a/js/components/graph-canvas/three-atmosphere.js b/js/components/graph-canvas/three-atmosphere.js
index 9febbea..4ca467d 100644
--- a/js/components/graph-canvas/three-atmosphere.js
+++ b/js/components/graph-canvas/three-atmosphere.js
@@ -27,9 +27,9 @@ export const createAmbientParticles = () => {
 
 	const material = new THREE.PointsMaterial({
 		color: 0xffffff,
-		size: 0.5,
+		size: 1.5,
 		transparent: true,
-		opacity: 0.1,
+		opacity: 0.2,
 		sizeAttenuation: true,
 		blending: THREE.AdditiveBlending,
 		depthWrite: false,
@@ -91,10 +91,11 @@ export const createStarField = () => {
 
 	const material = new THREE.PointsMaterial({
 		color: 0xffffff,
-		size: 0.3,
+		size: 1.0,
 		transparent: true,
-		opacity: 0.25,
+		opacity: 0.4,
 		sizeAttenuation: true,
+		blending: THREE.AdditiveBlending,
 		depthWrite: false,
 	});
 
@@ -137,7 +138,7 @@ export const createNebulaClouds = () => {
 		});
 
 		const sprite = new THREE.Sprite(material);
-		sprite.scale.set(200, 200, 1);
+		sprite.scale.set(400, 400, 1);
 		sprite.position.set(
 			(Math.random() - 0.5) * 400,
 			(Math.random() - 0.5) * 200,
@@ -156,7 +157,7 @@ export const createNebulaClouds = () => {
 
 export const updateAmbientBreathing = (ambientLight, elapsedTime) => {
 	if (!ambientLight) return;
-	const base = 0.3;
+	const base = 0.5;
 	const amplitude = ATMOSPHERE.BREATHING_AMPLITUDE;
 	const period = ATMOSPHERE.BREATHING_PERIOD;
 	ambientLight.intensity =
diff --git a/js/components/graph-canvas/three-edges.js b/js/components/graph-canvas/three-edges.js
index daedc8b..d1c8c3a 100644
--- a/js/components/graph-canvas/three-edges.js
+++ b/js/components/graph-canvas/three-edges.js
@@ -32,17 +32,17 @@ export const createEdgeLine = (edge, sourcePos, targetPos) => {
 		material = new THREE.LineDashedMaterial({
 			color,
 			transparent: true,
-			opacity: edge.type === "contradicts" ? 0.7 : 0.5,
-			dashSize: 1.5,
-			gapSize: 1.0,
-			linewidth: 1,
+			opacity: edge.type === "contradicts" ? 0.9 : 0.6,
+			dashSize: 3,
+			gapSize: 2,
+			linewidth: 2,
 		});
 	} else {
 		material = new THREE.LineBasicMaterial({
 			color,
 			transparent: true,
-			opacity: edge.type === "preceded_by" ? 0.2 : 0.4,
-			linewidth: 1,
+			opacity: edge.type === "preceded_by" ? 0.3 : 0.7,
+			linewidth: 2,
 		});
 	}
 
diff --git a/js/components/graph-canvas/three-nodes.js b/js/components/graph-canvas/three-nodes.js
index 92b601f..9bbeb2e 100644
--- a/js/components/graph-canvas/three-nodes.js
+++ b/js/components/graph-canvas/three-nodes.js
@@ -155,11 +155,11 @@ export const createNodeMesh = (node) => {
 	const material = new THREE.MeshStandardMaterial({
 		color,
 		emissive: color,
-		emissiveIntensity: 0.6,
-		roughness: 0.3,
-		metalness: 0.1,
+		emissiveIntensity: 1.8,
+		roughness: 0.2,
+		metalness: 0.3,
 		transparent: true,
-		opacity: 0.9,
+		opacity: 0.95,
 	});
 
 	const mesh = new THREE.Mesh(geometry, material);
@@ -176,7 +176,7 @@ export const createNodeMesh = (node) => {
 /* ── Cluster shell ── */
 
 const createClusterShell = (node) => {
-	const radius = 10;
+	const radius = 40;
 	const geometry = new THREE.SphereGeometry(radius, 24, 24);
 	const material = new THREE.MeshBasicMaterial({
 		color: 0xffffff,
diff --git a/js/core/constants.js b/js/core/constants.js
index 85864c4..9237bdb 100644
--- a/js/core/constants.js
+++ b/js/core/constants.js
@@ -57,14 +57,14 @@ export const CAMERA = Object.freeze({
 });
 
 export const BLOOM = Object.freeze({
-	THRESHOLD: 0.8,
-	STRENGTH: 0.6,
-	RADIUS: 0.4,
+	THRESHOLD: 0.4,
+	STRENGTH: 1.5,
+	RADIUS: 0.6,
 });
 
 export const FOG = Object.freeze({
 	COLOR: 0x080c14,
-	DENSITY: 0.0015,
+	DENSITY: 0.0008,
 });
 
 export const ATMOSPHERE = Object.freeze({
@@ -76,12 +76,12 @@ export const ATMOSPHERE = Object.freeze({
 });
 
 export const NODE_GEOMETRY = Object.freeze({
-	CHUNK_T1: Object.freeze({ type: "sphere", radius: 1, segments: 32 }),
-	CHUNK_T2: Object.freeze({ type: "icosahedron", radius: 1.5, detail: 1 }),
-	CHUNK_T3: Object.freeze({ type: "octahedron", radius: 2.0 }),
-	QUESTION: Object.freeze({ type: "tetrahedron", radius: 0.8 }),
-	TRIGGER: Object.freeze({ type: "diamond", radius: 0.6 }),
-	CLUSTER: Object.freeze({ type: "shell", padding: 1.2 }),
+	CHUNK_T1: Object.freeze({ type: "sphere", radius: 5, segments: 32 }),
+	CHUNK_T2: Object.freeze({ type: "icosahedron", radius: 7, detail: 1 }),
+	CHUNK_T3: Object.freeze({ type: "octahedron", radius: 9 }),
+	QUESTION: Object.freeze({ type: "tetrahedron", radius: 4 }),
+	TRIGGER: Object.freeze({ type: "diamond", radius: 3.5 }),
+	CLUSTER: Object.freeze({ type: "shell", padding: 15 }),
 });
 
 export const RETRIEVAL_STEPS = Object.freeze([

From cbad0ec31fc9d1f5281c7130692aa601801c9343 Mon Sep 17 00:00:00 2001
From: Amit Kolton <amit.ko@thing02.com>
Date: Fri, 3 Apr 2026 17:10:18 +0300
Subject: [PATCH 12/13] feat: add sprite text labels, boost atmosphere, fix
 module loading
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Sprite-based node labels (canvas texture, white text with cyan glow)
- Removed CSS2DRenderer (caused silent module crash on some browsers)
- Increased ambient particles 200→400, stars 500→800, nebula 4→6
- Nebula gradients more vibrant (opacity 0.06→0.15 center)
- Nebula sprites larger (500-700 scale) and wider spread
- Reduced tone mapping exposure 1.2→0.85 for darker background
- Added subtle grid floor for spatial reference
- Node labels show first 18 chars of chunk name with ellipsis
---
 css/nodes.css                                 | 14 +++++
 js/components/graph-canvas.js                 | 53 ++++++++++++++++++-
 .../graph-canvas/three-atmosphere.js          | 10 ++--
 js/core/constants.js                          |  6 +--
 4 files changed, 73 insertions(+), 10 deletions(-)

diff --git a/css/nodes.css b/css/nodes.css
index 7873dbf..cde6875 100644
--- a/css/nodes.css
+++ b/css/nodes.css
@@ -1,6 +1,20 @@
 /* ── CAR Brain: 3D nodes are rendered in Three.js, not DOM ── */
 /* This file contains styles for the 2D overlay elements only */
 
+/* ── Floating node labels (CSS2DRenderer) ── */
+
+.car-node-label {
+  font-family: var(--font-mono, "IBM Plex Mono", monospace);
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.75);
+  text-shadow: 0 0 6px rgba(0, 245, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.8);
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+  transform: translateY(-8px);
+  letter-spacing: 0.3px;
+}
+
 /* Node tooltip is styled in panels.css (.node-tooltip) */
 /* All 3D node rendering is in three-nodes.js */
 
diff --git a/js/components/graph-canvas.js b/js/components/graph-canvas.js
index 13d8453..a7afefb 100644
--- a/js/components/graph-canvas.js
+++ b/js/components/graph-canvas.js
@@ -115,7 +115,7 @@ class GraphCanvas extends HTMLElement {
 		this.#renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
 		this.#renderer.setClearColor(FOG.COLOR, 1);
 		this.#renderer.toneMapping = THREE.ACESFilmicToneMapping;
-		this.#renderer.toneMappingExposure = 1.2;
+		this.#renderer.toneMappingExposure = 0.85;
 		this.#containerEl.appendChild(this.#renderer.domElement);
 
 		// Scene
@@ -176,6 +176,13 @@ class GraphCanvas extends HTMLElement {
 		this.#atmosphereGroup.add(this.#ambientParticles);
 		this.#atmosphereGroup.add(createStarField());
 		this.#atmosphereGroup.add(createNebulaClouds());
+
+		// Subtle reference grid on the floor plane
+		const gridHelper = new THREE.GridHelper(800, 40, 0x0a1628, 0x0a1628);
+		gridHelper.position.y = -120;
+		gridHelper.material.transparent = true;
+		gridHelper.material.opacity = 0.15;
+		this.#atmosphereGroup.add(gridHelper);
 	}
 
 	#initControls() {
@@ -319,11 +326,17 @@ class GraphCanvas extends HTMLElement {
 		const nodes = doc.nodes ?? [];
 		const edges = doc.edges ?? [];
 
-		// Create node meshes
+		// Create node meshes + sprite labels
 		for (const node of nodes) {
 			const mesh = createNodeMesh(node);
 			this.#nodeGroup.add(mesh);
 			this.#nodeMeshMap.set(node.id, mesh);
+
+			// Add sprite text label (skip clusters)
+			if (node.type !== "cluster") {
+				const label = this.#createSpriteLabel(node.label ?? "", mesh);
+				if (label) mesh.add(label);
+			}
 		}
 
 		// Update cluster shells to enclose members
@@ -712,6 +725,42 @@ class GraphCanvas extends HTMLElement {
 			this.#renderer?.render(this.#scene, this.#camera);
 		}
 	}
+
+	/* ── Sprite text label ── */
+	#createSpriteLabel(text, parentMesh) {
+		const truncated = text.length > 18 ? `${text.slice(0, 18)}...` : text;
+		const canvas = document.createElement("canvas");
+		const ctx = canvas.getContext("2d");
+		canvas.width = 256;
+		canvas.height = 64;
+
+		ctx.clearRect(0, 0, 256, 64);
+		ctx.font = "bold 22px 'IBM Plex Mono', monospace";
+		ctx.textAlign = "center";
+		ctx.textBaseline = "middle";
+
+		// Glow effect
+		ctx.shadowColor = "rgba(0, 245, 255, 0.5)";
+		ctx.shadowBlur = 8;
+		ctx.fillStyle = "rgba(255, 255, 255, 0.85)";
+		ctx.fillText(truncated, 128, 32);
+
+		const texture = new THREE.CanvasTexture(canvas);
+		texture.minFilter = THREE.LinearFilter;
+		const material = new THREE.SpriteMaterial({
+			map: texture,
+			transparent: true,
+			depthWrite: false,
+			depthTest: false,
+		});
+
+		const sprite = new THREE.Sprite(material);
+		const radius = parentMesh.geometry?.boundingSphere?.radius ?? 5;
+		sprite.scale.set(30, 8, 1);
+		sprite.position.set(0, radius + 4, 0);
+		sprite.renderOrder = 10;
+		return sprite;
+	}
 }
 
 customElements.define("graph-canvas", GraphCanvas);
diff --git a/js/components/graph-canvas/three-atmosphere.js b/js/components/graph-canvas/three-atmosphere.js
index 4ca467d..a0f89df 100644
--- a/js/components/graph-canvas/three-atmosphere.js
+++ b/js/components/graph-canvas/three-atmosphere.js
@@ -122,8 +122,8 @@ export const createNebulaClouds = () => {
 		const r = (hex >> 16) & 0xff;
 		const g = (hex >> 8) & 0xff;
 		const b = hex & 0xff;
-		gradient.addColorStop(0, `rgba(${r},${g},${b},0.06)`);
-		gradient.addColorStop(0.5, `rgba(${r},${g},${b},0.02)`);
+		gradient.addColorStop(0, `rgba(${r},${g},${b},0.15)`);
+		gradient.addColorStop(0.4, `rgba(${r},${g},${b},0.06)`);
 		gradient.addColorStop(1, `rgba(${r},${g},${b},0)`);
 		ctx.fillStyle = gradient;
 		ctx.fillRect(0, 0, 256, 256);
@@ -138,10 +138,10 @@ export const createNebulaClouds = () => {
 		});
 
 		const sprite = new THREE.Sprite(material);
-		sprite.scale.set(400, 400, 1);
+		sprite.scale.set(500 + Math.random() * 200, 500 + Math.random() * 200, 1);
 		sprite.position.set(
-			(Math.random() - 0.5) * 400,
-			(Math.random() - 0.5) * 200,
+			(Math.random() - 0.5) * 600,
+			(Math.random() - 0.5) * 300,
 			DEPTH_PLANES.NEBULA_NEAR +
 				Math.random() * (DEPTH_PLANES.NEBULA_FAR - DEPTH_PLANES.NEBULA_NEAR),
 		);
diff --git a/js/core/constants.js b/js/core/constants.js
index 9237bdb..843ccbc 100644
--- a/js/core/constants.js
+++ b/js/core/constants.js
@@ -68,9 +68,9 @@ export const FOG = Object.freeze({
 });
 
 export const ATMOSPHERE = Object.freeze({
-	AMBIENT_PARTICLES: 200,
-	STAR_POINTS: 500,
-	NEBULA_COUNT: 4,
+	AMBIENT_PARTICLES: 400,
+	STAR_POINTS: 800,
+	NEBULA_COUNT: 6,
 	BREATHING_PERIOD: 8.0,
 	BREATHING_AMPLITUDE: 0.05,
 });

From 6d26401712d103d2a820756071b2d73c80a1ff1a Mon Sep 17 00:00:00 2001
From: Amit Kolton <amit.ko@thing02.com>
Date: Fri, 3 Apr 2026 21:36:16 +0300
Subject: [PATCH 13/13] docs: rewrite README for CAR Brain Simulator

Complete README covering architecture, 3D brain visualization,
13-step retrieval sequence, CAR protocol principles, project
ingestion, persistence, tech stack, and keyboard shortcuts.
---
 README.md | 335 ++++++++++++++++++++++--------------------------------
 1 file changed, 138 insertions(+), 197 deletions(-)

diff --git a/README.md b/README.md
index 22767e2..48c74cc 100644
--- a/README.md
+++ b/README.md
@@ -1,205 +1,146 @@
-# MindGraph AI
+# CAR Brain Simulator
 
-MindGraph AI is a lightweight, framework-free visual graph workbench for modeling AI workflows in the browser.
+A 3D neural memory workbench implementing the [Clustered Associative Recall (CAR) Protocol](docs/superpowers/specs/2026-04-03-car-brain-simulator-design.md) for multi-agent memory systems. Built as a reconstructed fork of [MindGraph AI](https://github.com/chrisrobison/mindgraph).
 
-It keeps a browser-native stack:
-- custom elements (Web Components)
-- plain ES modules
-- PAN event bus for app-wide coordination
-- centralized graph state in `graph-store`
+Watch your memories form as glowing neurons in 3D space. Add knowledge, ask questions, and observe the 13-step retrieval sequence animate across a galaxy of interconnected memory chunks.
 
 ## Run Locally
 
-Use any static HTTP server (do not open `index.html` with `file://`).
-
 ```bash
-cd /Users/cdr/Projects/mindgraph
-python3 -m http.server 4173
+node server.js
+# Open http://127.0.0.1:4173
+```
+
+No build step. No npm install. Just Node.js and a browser with WebGL.
+
+## What It Does
+
+**Add memories** — type facts, decisions, events into the Memory input. Each becomes a Tier 1 chunk (glowing cyan sphere) with auto-generated questions and cross-links.
+
+**Ask questions** — type a query and watch the brain think. The 13-step retrieval sequence fires: session priming, context construction, question decomposition, multi-query retrieval, cluster formation, interference checking, confidence grading, and synthesis. All visualized in real-time on the 3D canvas.
+
+**Ingest projects** — point it at a directory and Claude processes every file through the CAR protocol, building a knowledge graph of your entire project.
+
+## Architecture
+
+Two-layer local application:
+
 ```
+Browser (localhost:4173)              Local Server (server.js)
++------------------------+           +---------------------------+
+| Three.js 3D Canvas     |           | Static file serving       |
+| Web Component panels   |<--REST--->| /api/brain  (persistence) |
+| PAN event bus          |           | /api/process (Claude CLI) |
+| graph-store (state)    |           | /api/config  (settings)   |
++------------------------+           +---------------------------+
+                                              |
+                                     Claude Code CLI (default)
+                                     or Anthropic API fallback
+```
+
+**Frontend:** Vanilla JS, Web Components, Three.js via CDN. Zero build step.
+**Backend:** Single `server.js`, zero npm dependencies. Node.js `http` module only.
+**AI Runner:** Claude Code CLI (uses your Claude subscription). Falls back to template-based processing when Claude isn't available.
+
+## The 3D Brain
+
+Nodes are 3D geometries rendered with Three.js:
+
+| Node Type | Shape | Color | What It Represents |
+|-----------|-------|-------|-------------------|
+| Chunk (Tier 1) | Sphere | Cyan `#00f5ff` | Raw episodes, recent memories |
+| Chunk (Tier 2) | Icosahedron | Purple `#7b61ff` | Compressed summaries |
+| Chunk (Tier 3) | Octahedron | Pink `#ff2d78` | Permanent schemas/patterns |
+| Question | Tetrahedron | Gold `#ffd93d` | Retrieval keys (L1-L5) |
+| Trigger | Diamond | Amber `#ff9f1c` | Prospective memory triggers |
+| Cluster | Translucent shell | White 20% | Groups of related chunks |
+
+**Atmosphere:** 400 ambient particles, 800 background stars, 6 nebula gradient clouds, ambient light breathing. Post-processing bloom gives every node a radiating glow.
+
+**Edges** connect memories with semantic relationships: `linked_to`, `amends`, `contradicts` (red pulse), `promotes_to`, `answers` (gold), `decomposes_to`, `clusters_with`, `preceded_by`, `triggers`.
+
+## The 13-Step Retrieval Sequence
+
+When you ask a question, the CAR engine runs the full retrieval pipeline:
+
+1. **Session Primer** — check recent context, scan triggers
+2. **Context Construction** — build a picture of why the question exists
+3. **Question Decomposition** — split into 3-5 sub-questions
+4. **Metamemory Check** — what do I know? what are my gaps?
+5. **Multi-Query Retrieval R1** — score all chunks, top-3 per sub-query
+6. **Cluster Formation** — group retrieved chunks
+7. **Cluster Expansion R2** — pull in neighbors
+8. **Tiered Retrieval** — search across all three memory tiers
+9. **Interference Check** — detect contradictions
+10. **Confidence Grading** — grade each sub-question
+11. **Thinking Profile** — detect session mode
+12. **Synthesis + Response** — reconstruct answer from fragments
+13. **Post-Retrieval Update** — re-index, strengthen retrieval paths
+
+Two modes: **Play** (auto-runs ~8.5 seconds) and **Step** (advance manually).
+
+## CAR Protocol
+
+Based on the Clustered Associative Recall Protocol (v1.0, March 2026) — a cognitive science-informed implementation guide for human-like memory recall in multi-agent systems.
+
+Core principles:
+- Memory is reconstruction from fragments, not file retrieval
+- Never suppress or delete memory — build better retrieval cues instead
+- Never present confident answers without grading confidence
+- Questions are retrieval-ready keys; statements are passive data
+- Every retrieval modifies the memory (read-write, not read-only)
+- Forgetting is functional — relevance decay keeps the system fast
+
+Relevance scoring uses Ebbinghaus decay curves, access frequency, emotional weight, consequence weight, connection density, and the Zeigarnik effect (open threads get a 1.5x retrieval bonus).
+
+## Project Ingestion
+
+The `CAR_INGESTION_PROTOCOL.md` describes how to feed any project into the brain:
+
+1. SCAN — read all source material
+2. CHUNK — break into atomic memory units
+3. CLASSIFY — assign tier, tags, entities
+4. QUESTION — generate questions at 5 levels per chunk
+5. LINK — identify cross-links, contradictions, temporal sequences
+6. SCORE — set initial relevance weights
+7. CLUSTER — group related chunks
+8. EXPORT — output as JSON for import
+
+## Persistence
+
+Brain data persists to `~/.car-brain/brains/` on disk (via the server API) with localStorage as a fallback for instant reload. Export/Import JSON from the toolbar for manual backup.
+
+## Tech Stack
+
+- **3D rendering:** Three.js v0.170.0 (CDN, ES modules)
+- **UI framework:** None. Vanilla Web Components.
+- **State management:** Custom PAN event bus (publish/subscribe on EventTarget)
+- **Persistence:** Node.js server → disk JSON + browser localStorage
+- **AI integration:** Claude Code CLI (subscription auth)
+- **Build step:** None. Serve static files.
+- **Dependencies:** Zero npm packages. Three.js from CDN only.
+
+## Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `V` | Select tool |
+| `H` | Pan/Orbit tool |
+| `C` | Add Chunk tool |
+| `L` | Add Link tool |
+| `Q` | Add Question tool |
+| `T` | Add Trigger tool |
+| `M` | Focus memory input |
+| `Space` | Play/pause retrieval |
+| `Right Arrow` | Step forward in retrieval |
+| `Esc` | Cancel / clear selection |
+| `Cmd+Z` | Undo |
+| `1/2/3/0` | Filter by tier / show all |
+
+## Origins
+
+Reconstructed from [chrisrobison/mindgraph](https://github.com/chrisrobison/mindgraph), a framework-free graph workbench. The original 2D agent-workflow editor was rebuilt into a 3D brain simulator with the CAR protocol as its cognitive engine.
+
+## License
 
-Open:
-- `http://127.0.0.1:4173`
-
-## Core Architecture
-
-### State Ownership Rules
-
-MindGraph now follows strict ownership rules:
-- `graph-store` is the single source of truth for graph document mutations.
-- PAN carries intent events (`*.requested`) and state/result events (`*.changed`, `*.created`, `*.updated`, etc).
-- UI components render from graph-store snapshots and store-driven events.
-- UI components keep only ephemeral interaction state (drag, pan, marquee, connect-mode context).
-
-### Responsibilities
-
-- `graph-store`
-  - owns nodes, edges, viewport, selection, undo/redo history
-  - consumes graph intent events and applies canonical mutations
-  - publishes state-change events + `graph.document.changed`
-- `ui-store`
-  - owns UI-only state (tool/tab/dev-console/runtime panels)
-  - emits graph intent events for selection/zoom actions
-- `persistence-store`
-  - listens to `graph.document.changed` and save/load events
-  - handles autosave/restore to `localStorage`
-- runtime modules (`mock-agent-runtime`, `data-connectors`)
-  - read graph data from `graph-store`
-  - request graph updates via `graph.node.update.requested`
-  - publish runtime lifecycle and activity events
-- components
-  - publish intent events
-  - subscribe to state/result events
-  - render based on store state
-
-## Event Model
-
-### Intent / Request Events
-
-Examples:
-- `graph.node.select.requested`
-- `graph.node.update.requested`
-- `graph.node.move.requested`
-- `graph.node.create.requested`
-- `graph.node.delete.requested`
-- `graph.edge.create.requested`
-- `graph.selection.clear.requested`
-- `graph.selection.set.requested`
-- `graph.viewport.update.requested`
-- `graph.document.load.requested`
-- `graph.document.save.requested`
-- `graph.document.undo.requested`
-- `graph.document.redo.requested`
-- `runtime.agent.run.requested`
-- `runtime.subtree.run.requested`
-- `runtime.all.run.requested`
-
-### State / Result Events
-
-Examples:
-- `graph.node.selected`
-- `graph.selection.set`
-- `graph.selection.cleared`
-- `graph.node.updated`
-- `graph.node.created`
-- `graph.node.deleted`
-- `graph.edge.created`
-- `graph.viewport.changed`
-- `graph.document.loaded`
-- `graph.document.saved`
-- `graph.document.changed`
-- `runtime.agent.run.started`
-- `runtime.agent.run.completed`
-- `runtime.agent.run.failed`
-
-## Graph Mutation Flow
-
-Canonical mutation flow:
-1. Component/runtime publishes `*.requested` intent.
-2. `graph-store` validates and applies mutation.
-3. `graph-store` emits specific result event (`graph.node.updated`, `graph.edge.created`, etc).
-4. `graph-store` emits `graph.document.changed` with reason metadata.
-5. UI re-renders from store snapshots; persistence/autosave reacts to changed document events.
-
-## Canvas Architecture
-
-`graph-canvas` has been decomposed into focused modules:
-- `js/components/graph-canvas/canvas-renderer.js`
-- `js/components/graph-canvas/canvas-edges.js`
-- `js/components/graph-canvas/canvas-viewport.js`
-- `js/components/graph-canvas/canvas-selection.js`
-
-The custom element now owns only ephemeral interaction state:
-- active drag preview
-- pan gesture
-- marquee gesture
-- connect-mode source
-- edge-popover state
-
-It no longer keeps a shadow graph document as a competing source of truth.
-
-## Core User Loop Improvements
-
-Implemented tightening of the core loop:
-- create/select/edit nodes through request/state event flow
-- connect edges with in-app popover (no `window.prompt`)
-- shift-click additive/toggle selection
-- marquee selection on empty-space drag in select tool
-- `Esc` behavior:
-  - close edge popover
-  - clear connect source
-  - reset tool to Select, or clear selection
-- delete supports multi-selection
-
-## Component Overview
-
-Top-level shell:
-- `app-shell` composes toolbar, palette, canvas, inspector, and bottom activity panel
-
-Core UI modules:
-- `top-toolbar` runtime actions, save/load, undo/redo, autosave toggle, zoom
-- `left-tool-palette` tool selection and keyboard shortcut guide
-- `graph-canvas` pan/zoom/drag/select/create/connect interactions
-- `inspector-panel` tabbed node editing views
-- `bottom-activity-panel` logs, task queue, run history, errors, PAN console
-
-State + services:
-- `graph-store` graph document state + undo/redo + canonical mutations
-- `ui-store` UI tab/tool/runtime panel state
-- `persistence-store` localStorage autosave/restore
-- `mock-agent-runtime` mock agent execution and activity publishing
-
-## Graph Document Model
-
-Graph documents are JSON objects with:
-- `id`, `title`, `version`
-- `nodes[]`
-- `edges[]`
-- `viewport` (`x`, `y`, `zoom`)
-- `metadata` (includes persisted selection)
-
-Node shape:
-- `id`, `type`, `label`, `description`, `position`, `data`, `metadata`
-
-Edge shape:
-- `id`, `type`, `source`, `target`, `label`, `metadata`
-
-Validation and normalization are handled in:
-- `js/core/graph-document.js`
-
-## Persistence Behavior
-
-- Manual export/import via toolbar (`Save JSON`, `Load JSON`)
-- Optional localStorage autosave toggle in toolbar
-- Last session restore on startup when autosave data exists
-- Autosave watches `graph.document.changed`
-- Viewport and selection are persisted in the graph document
-
-## Interaction Shortcuts
-
-- `Delete` / `Backspace`: delete selected node(s)
-- `Cmd/Ctrl + D`: duplicate selected node
-- `Cmd/Ctrl + Z`: undo
-- `Shift + Cmd/Ctrl + Z` or `Ctrl + Y`: redo
-- `Esc`: close connect popover / clear connect source / reset tool / clear selection
-- `Shift + Click`: additive/toggle node selection
-
-## Current Limitations
-
-- Marquee uses top-left node position hit testing (not full node-bounds overlap yet)
-- Undo/redo remains snapshot-based
-- No collaborative sync or server persistence
-- Mock runtime is intentionally local and simulated
-
-## Acceptance Checklist
-
-Current build supports:
-1. Seeded graph loads on startup (or autosaved last session)
-2. Pan/zoom/select works
-3. Node creation, editing, deletion, and duplication work
-4. In-app edge creation flow (type + label) works
-5. Save/load JSON graph documents
-6. Data node refresh behavior and inspector previews
-7. Agent runs through mock runtime
-8. Live activity panel updates
-9. Visible PAN event console with filtering/clear
-10. Lightweight framework-free browser app with disciplined store ownership
+See upstream repository for license terms.