Furnic/graph view

.gitignore

@@ -1,6 +1,7 @@
 target
 .fastembed_cache/
 .claude/worktrees/
+.claude/settings.local.json
 *.db
 *.db-shm
 *.db-wal
@@ -9,4 +10,4 @@ web/playwright-report/
 web/e2e/ux-audit/ux-audit-results/
 web/ux-audit-results/
 macos/.build
-macos/.build-output
+macos/.build-output

docs/plans/2026-04-02-graph-view-design.md

@@ -0,0 +1,71 @@
+# Graph View Design
+
+## Goal
+
+Add an interactive graph visualization to the Workspace that shows the full DAG (nodes and edges) as a zoomable, filterable dot-based view. Toggled via a button in the Workspace header, replacing SimpleFocusView in the center area.
+
+## Architecture
+
+New `GraphView.tsx` component renders in the Workspace center area when `centerView === "graph"`. A toggle button in the header switches between `"focus"` (SimpleFocusView) and `"graph"` (GraphView). The outliner and all side panels remain available in both modes.
+
+**Dependencies**: `@xyflow/react` (React Flow v12) for the canvas, `elkjs` for auto-layout. Both lazy-imported to avoid bloating the initial bundle.
+
+**Data flow**: Workspace already has `nodeMap` and `edges`. These are transformed into React Flow `Node[]` and `Edge[]`, passed through ELK layout for positioning, then rendered.
+
+## Node Rendering
+
+- **Dots only by default** — circles, no text at rest
+- **Size proportional to entropy** — high entropy = larger dot (24px), low = smaller (12px), no data = default (16px). Linear mapping across the visible set's min/max entropy.
+- **Color by state** — green (answered), amber (unanswered), blue (needs_review), gray (deleted). Subtle glow on hover.
+- **Adaptive labels** — when zoom level > 1.5, a short label fades in below the dot (first ~30 chars of the question). Below that zoom, dots only.
+
+## Edges
+
+- Thin lines (1-2px), `gray-600`, small arrowheads at child end
+- Edges connected to the selected node highlight in `gray-400`
+
+## Interactions
+
+- **Hover**: Tooltip with question text (~100 chars), state, entropy score
+- **Click**: Node selected — a floating detail card appears near the node showing question, answer preview, entropy, and an **"Open in Focus View"** button
+- **"Open in Focus View"**: Sets `focusNodeId` and switches `centerView` to `"focus"` — same as clicking a node in the outliner
+
+## Filtering & Search
+
+Slim filter bar docked at the top of the graph area:
+
+- **Search input**: Debounced (200ms) text filter on question/answer content. Non-matching nodes fade to low opacity (not removed — preserves spatial context). Matching nodes get a highlight ring.
+- **State filter pills**: Toggle pills for answered, unanswered, needs_review. All active by default. Toggling off fades those nodes.
+- **Entropy range**: Min/max slider when entropy data exists.
+- **Re-layout button**: Recomputes ELK positions using only the visible (non-faded) nodes for a compact filtered view.
+- **Fit-to-view button**: Zooms/pans to fit all visible nodes (`fitView()`).
+
+Fade-not-remove keeps the spatial map stable — nodes don't shift when you filter.
+
+## Layout
+
+**ELK layered layout** (Sugiyama-style), top-to-bottom:
+
+- Roots at top, leaves at bottom, edges flow downward
+- Spacing adapts to node count — generous for small graphs (<30), tighter for large (100+)
+- Feature roots placed in distinct horizontal lanes via ELK partitioning (independent subtrees don't overlap)
+- Layout runs in a **web worker** to avoid blocking the UI thread
+- Recomputes when node/edge set changes or when "Re-layout" is clicked after filtering
+
+**Pan & zoom**: React Flow built-in — scroll to zoom, drag to pan. Minimap in bottom-right corner with dots colored to match node state.
+
+**Initial view**: `fitView()` on mount centers the entire graph.
+
+## Integration Points
+
+- **Workspace.tsx**: New `centerView` state (`"focus" | "graph"`), toggle button in header, conditional render of GraphView vs SimpleFocusView
+- **Outliner sync**: Selecting a node in the outliner highlights it in the graph; selecting in the graph highlights in the outliner
+- **Existing data**: Reuses `nodeMap`, `edges`, `computeSubtreeEntropy()` from `graph-utils.ts`
+
+## Files
+
+- Create: `web/src/GraphView.tsx` — main graph component
+- Create: `web/src/DotNode.tsx` — custom React Flow node component
+- Create: `web/src/graph-layout.ts` — ELK layout helper (web worker wrapper)
+- Modify: `web/src/Workspace.tsx` — toggle state, conditional render, header button
+- Modify: `web/package.json` — add `@xyflow/react`, `elkjs`