Add zoom-out color blocks for Graph and Code

[braedonsaunders]

Follow-up to the deferred item in #82. On 2026-08-22 eorroe asked for CodeCanvas-style color-coded sections when zoomed out, with a name on hover. Braedon deferred that along with the mini-map and a root-file gate. Mini-map is already in open #94 (untouched here). Thickness from #93 is already on main. This PR ships the zoom-out color blocks only.

A later test of this PR on a 110-file clone of this repo confirmed the chunks work, but asked that red and green be avoided so they are not confused with diffs. Zoom-out fills now use a non-red/green palette. Normal node circles, symbol chips, and the churn legend are unchanged.

What this PR does

At low zoom, Graph and Code drop fine chrome so the map stays readable.

Thresholds (CodeCanvas-aligned):

• k ≤ 0.4 — color blocks on
• k < 0.22 — Code cards hide source text (existing code-far) so only the chunks remain

Graph

• Circles and labels hide
• Each file becomes a filled rounded rectangle tinted by the current Color mode (folder / layer / churn)
• Zoom-out fills remap red/green (and close hues) so folder, layer, and churn chunks cannot be read as diffs
• Blocks keep a ~16px screen floor so they do not shrink back into noise
• Hover still uses the existing node tooltip (name, functions, layer, churn)
• Selection / blast-radius highlight applies to the rectangles too

Code

• Open cards overlay colored chunks for functions, imports, exports, and leftover file regions
• Chunk fills stay off the red/green diff palette: fn blue, import purple, export teal, leftover amber
• Hover on a chunk shows the section name (tooltip + title)
• In the 0.4–0.22 band the chunks sit over still-visible source; past 0.22 the text hides
• Leftover Graph nodes on the same canvas use the same rectangle switch and remapped fills

3D Graph, Treemap, Matrix, Tree, Flow, Cluster, Bundle, and Block Diagram are unchanged.

Out of scope

Not in this PR, as requested:

• Mini-map (open Add a bottom-right canvas mini-map for Graph and Code #94 — do not touch that branch)
• Root-file-count gate before rendering cards
• Thickness slider (already shipped in Add a line-thickness slider for Graph, Code, and other link views #93)
• Splitting the public app out of the single HTML file

How to verify

1. Open index.html locally, or run npx codeflow tests/fixtures/golden-world.
2. Analyze a small tree (tests/fixtures/golden-world is enough).
3. On Graph, zoom out with the − toolbar button or the wheel until scale is 0.4 or below (about two − clicks from 1.0). Circles and labels should become folder-tinted rectangles that stay large enough to read as tiles. No chunk should look red or green. Hover a rectangle for the file name. Zoom back in and the usual chrome returns.
4. Switch to Code. Zoom out past 0.4: cards keep their titles and show colored section chunks (blue / purple / teal / amber — not red or green). Hover a chunk for the function / import name. Keep going past 0.22: source text hides and only the chunks remain.
5. Confirm 3D / Treemap / other views are unchanged, and that Add a bottom-right canvas mini-map for Graph and Code #94’s mini-map is not in this diff.

Tests

• Local npm test: 178 pass / 0 fail
• Threshold helpers, section layout, screen-scale floor, and code-blocks / code-far class toggling
• Palette test: Code kind fills and remapped Graph/churn fills are not red or green
• Existing Code canvas / thickness assertions still pass

Please review 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 30, 2026 12:24pm

[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.