feat: Interactive Canvas — Blueprint, Guided Tour, Corkboard & Stack Studio

[New1Direction]

Interactive Canvas — turn a scan into a draggable, shareable map

Adds RepoLens's visual layer: one zero-build canvas engine powering three scopes, plus narrated tours and .excalidraw/SVG export. The goal is the "fun, addictive, must-have" surface — make evaluations something you see and arrange, not just read.

Stacked PR. Base is feat/scan-ledger (this work builds on the ledger's idb v4 + backup v2). It reaches main once the ledger merges. The 37 commits here are all additive — mostly new files; the few existing-file edits are additive (idb v4→v5, store.js/backup.js round-trip, output-tab/library/stack-tab view wiring, themes.css).

What's included

Phase 1 — Blueprint + Guided Tour + export

• A new Canvas tab: a repo's Deep Dive (atoms/lineage) → an interactive, pan/zoom/draggable architecture map, color-coded by kind, roots highlighted.
• Guided Tour: spotlights the architecture node-by-node in dependency order with narration (Back/Next/auto-play, keyboard ←/→/Esc, reduced-motion safe).
• Export: .excalidraw (opens hand-drawn in excalidraw.com / Obsidian / VS Code) and SVG.
• Arrangements persist in a new scenes IndexedDB store (v4→v5, additive) and round-trip through the backup envelope.

Phase 2 — Corkboard

• A Corkboard view toggle in the Library: every scanned repo a draggable manila card, related repos joined by colored "red string" (alternatives / synergies / head-to-heads / combined ideas), shaded by fit, filterable by Collection, arrangement saved.

Phase 3 — Stack Studio

• A View on canvas toggle in the existing Tech-Stack Builder: repos laid out in adoption order, joined by their integrations, gaps shown as dashed cards. Reuses the existing STACK_BUILD generation — no new AI path.

Architecture

• One pure scene model (scene.js) + a vanilla Pointer-Events SVG engine (canvas-engine.js). Each scope is a small data adapter (blueprint-adapter.js, library-scene.js, stack-scene.js) + a layout (canvas-layout.js: layoutBlueprint/layoutCorkboard/layoutStack).
• Key invariant: layout is pure + memoized; visual state (selection/tour/spotlight) is a separate overlay pass — no relayout on interaction.
• A repair-graph.js pass normalizes messy LLM graph data. Exporters in canvas-export.js. Zero new dependencies; MV3-CSP-safe; theme-aware across all 13 themes.
• Design spec + per-phase plans under docs/superpowers/specs/ and docs/superpowers/plans/. Inspired by Egonex-AI/Understand-Anything (concepts only — no React/ELK).

Testing

• 800 tests passing. Pure logic is unit-tested (scene, repair-graph, layouts, all three adapters, tour, exporters, store scenes, backup scenes, library-graph, engine geometry/nodeClass).
• Per the repo's no-DOM-test-env convention, the DOM glue (engine, tour-runner, view wiring) is verified live in a browser — each scope was driven end-to-end through its real pipeline and screenshotted.
• Built subagent-driven: spec → plan → TDD → spec/quality review per task.

Notable fixes caught during review / live verification

• Exporter XSS: coordinates are now numerically coerced before reaching SVG attributes.
• Corkboard edge-join: store edges key by hashed node-ids (nodeIdFor); the adapter now joins them back to repoIds, so the red string actually connects (was silently dropping).
• Collection filter: idea nodes with empty sources no longer leak past the filter.
• Dropped a DOM-shim test-infra misstep in favor of pure-geometry tests + live verification.

Test plan

• Load the unpacked extension; scan a repo; run Deep Dive; open the Canvas tab → nodes render, drag persists across a tab switch, Guided Tour spotlights step-by-step, .excalidraw downloads and opens in excalidraw.com.
• Open the Library → Corkboard: cards render with fit colors, string connects related repos (after running Alternatives/Synergies/Versus), drag persists across reload, the Collection filter narrows the board.
• Multi-select 2–6 repos → Tech-Stack Builder → View on canvas: layer-colored cards in adoption order, integration string, dashed gap cards.
• npx vitest run is green (800).

Out of scope (follow-ups)

• Phase 1.5: search-to-focus over the canvas (BM25) + Scan-Ledger diff overlay (changed repos light up on re-scan).
• Persisting/sharing the stack scene; force-directed Corkboard layout for very large libraries.

🤖 Generated with Claude Code