Add a bottom-right canvas mini-map for Graph and Code

[braedonsaunders]

Follow-up to the Code canvas notes in #82. On 2026-08-22 eorroe asked for a bottom-right mini-map like https://v2.codecanvas.app, where you can click and drag to move the focus of the canvas. They said a draggable mini-map widget with a top-left drag handle is unnecessary. Braedon deferred that (along with zoom-out color blocks and a root-file gate). Thickness from #93 is already on main. This PR ships the mini-map only.

What this PR does

Adds a compact mini-map in the bottom-right of the canvas for Graph and Code. Those two views share the same SVG camera (d3-zoom) and the same node/hull positions, so one overview covers both.

The map is light chrome: a small panel, no drag handle, no extra settings.

• Simplified overview of folder hulls plus nodes (Graph) or leftover nodes and open code cards (Code)
• Viewport rectangle for the current camera
• Click or drag on the mini-map pans the main canvas so that region is centered. Zoom level is unchanged.
• Updates as the force layout ticks, cards move, or you pan/zoom the canvas

3D Graph, Treemap, Matrix, Tree, Flow, Cluster, Bundle, and Block Diagram keep their own cameras and do not show this map.

Out of scope

Not in this PR, as requested:

• Thickness slider (already shipped in Add a line-thickness slider for Graph, Code, and other link views #93; gear + 1-6 prefs are untouched)
• Relocating the mini-map widget itself
• 3D moving links
• Zoom-out color blocks
• Root-file-count gate before rendering cards

Still one HTML file. No extra pages or Node runtime for the browser app.

How to verify

1. Open index.html locally, or the Vercel preview: https://codeflow-git-cursor-canvas-mini-f2f4a8-braedonsaunders-projects.vercel.app
2. Analyze a small repo (the tests/fixtures/golden-world tree is enough, or any small GitHub URL).
3. On Graph, confirm a mini-map appears in the bottom-right. It should show hulls, dots for files, and a rectangle for the current view.
4. Click a corner of the mini-map. The main canvas should pan so that region is centered. Drag across the mini-map and the viewport rectangle should follow.
5. Switch to Code. The mini-map should still be there, now including open file cards. Click/drag still pans.
6. Open the gear. Thickness 1-6 should still be there and still change edge width. Reload should keep the last thickness.

Tests

• Local npm test: 177 pass / 0 fail
• GitHub Actions Tests + CodeQL on this PR: passed
• Mini-map helpers cover world bounds, viewport math, and click-to-center camera
• vizHasCanvasMinimap is true only for Graph and Code
• Existing thickness / gear wiring assertions still pass

Please review and merge when ready. No Codex review ping.

  

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
codeflow	Ready	Preview	Aug 28, 2026 4:17pm

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.

[braedonsaunders]

@codex review

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.