From 83c6357c8151e9add8112dbd6d4d7c84cc8bdadf Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 28 Aug 2026 20:15:34 +0000
Subject: [PATCH 1/3] Add zoom-out color blocks on Graph and Code canvases

When zoom drops below 0.4, Graph nodes swap circle/label chrome for
folder-tinted rectangles, and Code cards overlay function/import
sections. Past 0.22 the card source hides so only the chunks remain.
Hover still names the section. Mini-map and the root-file gate stay out
of this change.

Co-authored-by: Braedon Saunders <braedonsaunders@users.noreply.github.com>
---
 index.html                 | 155 ++++++++++++++++++++++++++++++++++---
 tests/code-canvas.test.mjs |  98 +++++++++++++++++++++++
 2 files changed, 243 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 244c3a5..47f55a8 100644
--- a/index.html
+++ b/index.html
@@ -514,9 +514,17 @@
 .code-card-resize-se{right:-3px;bottom:-3px;width:14px;height:14px;cursor:nwse-resize}
 .code-card.code-far .code-card-body{overflow:hidden}
 .code-card.code-far .file-preview-linenum{display:none}
-.code-card.code-far .file-preview-line{min-height:3px;height:3px;overflow:hidden}
-.code-card.code-far .file-preview-text{font-size:3px;line-height:3px;letter-spacing:-0.5px}
+.code-card.code-far .file-preview-text{visibility:hidden}
 .code-card.code-far .code-line-pill{display:none}
+.code-card-source{position:relative;min-height:100%}
+.code-color-blocks{display:none;position:absolute;inset:0;pointer-events:none;z-index:1}
+.code-card.code-blocks .code-color-blocks{display:block}
+.code-color-block{position:absolute;left:8px;right:8px;border-radius:3px;min-height:4px;pointer-events:auto;cursor:default}
+.code-card.code-blocks:not(.code-far) .code-color-block{opacity:0.38}
+.code-card.code-far .code-color-block{opacity:0.88}
+.code-color-block:hover{outline:1px solid var(--acc);opacity:1}
+svg.color-blocks circle.nc{display:none}
+svg.color-blocks text.node-label{display:none}
 .has-code-card{display:none!important}
 .has-code-card .nc,.has-code-card .node-label{pointer-events:none}
 .sym-mark{border-radius:3px;padding:0 1px;cursor:pointer}
@@ -5847,6 +5855,34 @@
     return Math.min(8,1/zoom);
 }
 
+var COLOR_BLOCK_ZOOM=0.4;
+var CODE_FAR_ZOOM=0.22;
+
+function zoomShowsColorBlocks(k){
+    var zoom=Number(k);
+    if(!isFinite(zoom)||zoom<=0)return false;
+    return zoom<COLOR_BLOCK_ZOOM;
+}
+
+function zoomHidesCodeText(k){
+    var zoom=Number(k);
+    if(!isFinite(zoom)||zoom<=0)return false;
+    return zoom<CODE_FAR_ZOOM;
+}
+
+function graphColorBlockSize(d){
+    var r=Math.max(8,Math.min(24,5+((d&&d.fnCount)||0)*0.8));
+    return Math.max(18,r*2);
+}
+
+function codeColorBlockKindColor(kind){
+    if(kind==='import')return '#c678dd';
+    if(kind==='export')return '#98c379';
+    if(kind==='var'||kind==='file')return '#e06c75';
+    if(kind==='class')return '#e5c07b';
+    return '#61afef';
+}
+
 function nodeReplacedByCard(path,cardPaths){
     return !!(cardPaths&&cardPaths.has(path));
 }
@@ -5993,6 +6029,10 @@
     return vizType==='graph'||vizType==='code'||vizType==='graph3d';
 }
 
+function vizHasZoomColorBlocks(vizType){
+    return vizType==='graph'||vizType==='code';
+}
+
 function collectVisibleCodeFiles(selectedPath,data,folderFilter,limit){
     if(!data||!data.files)return[];
     var filtered=folderFilter?data.files.filter(function(f){return f.folder===folderFilter||f.folder.startsWith(folderFilter+'/');}):data.files;
@@ -6832,12 +6872,14 @@
         var title=card.querySelector?card.querySelector('.code-card-name'):null;
         if(title)title.style.transform='scale('+titleScale+')';
         if(card.classList){
-            if(k<0.22&&card.classList.add)card.classList.add('code-far');
+            if(zoomHidesCodeText(k)&&card.classList.add)card.classList.add('code-far');
             else if(card.classList.remove)card.classList.remove('code-far');
+            if(zoomShowsColorBlocks(k)&&card.classList.add)card.classList.add('code-blocks');
+            else if(card.classList.remove)card.classList.remove('code-blocks');
         }
         if(style.visibility==='visible')placed++;
     });
-    return{placed:placed,titleScale:titleScale};
+    return{placed:placed,titleScale:titleScale,colorBlocks:zoomShowsColorBlocks(k),codeFar:zoomHidesCodeText(k)};
 }
 
 function armRecentDelete(armedId,clickedId){
@@ -6901,6 +6943,59 @@
     return symbols;
 }
 
+function codeColorBlockLineCount(file){
+    if(file&&typeof file.content==='string'&&file.content)return Math.max(1,file.content.split('\n').length);
+    var lines=Number(file&&file.lines);
+    if(isFinite(lines)&&lines>0)return Math.max(1,lines);
+    var max=1;
+    (file&&file.functions||[]).forEach(function(fn){
+        var line=Number(fn&&fn.line);
+        if(isFinite(line)&&line>max)max=line;
+    });
+    return max;
+}
+
+function codeColorBlockSections(file,connections,prefs){
+    prefs=normalizeCodeCardPrefs(prefs);
+    var total=codeColorBlockLineCount(file);
+    var byLine=Object.create(null);
+    (file&&file.functions||[]).forEach(function(fn){
+        if(!fn||!fn.name||!fn.line)return;
+        var kind=fn.type==='class'||fn.type==='dataclass'||fn.type==='abstract_class'?'class':(fn.isExported?'export':'fn');
+        byLine[fn.line]={name:fn.name,kind:kind,startLine:fn.line};
+    });
+    extractFileSymbols(file,connections).forEach(function(sym){
+        var line=codeCardSymbolLine(file,sym.name);
+        if(!line||byLine[line])return;
+        byLine[line]={name:sym.name,kind:sym.kind||'var',startLine:line};
+    });
+    var starts=Object.keys(byLine).map(Number).filter(isFinite).sort(function(a,b){return a-b;});
+    var sections=[];
+    if(!starts.length){
+        sections.push({name:(file&&(file.name||file.path))||'file',kind:'file',startLine:1,endLine:total});
+    }else{
+        if(starts[0]>1){
+            sections.push({name:(file&&(file.name||file.path))||'file',kind:'file',startLine:1,endLine:starts[0]-1});
+        }
+        starts.forEach(function(start,i){
+            var item=byLine[start];
+            var end=i+1<starts.length?starts[i+1]-1:total;
+            if(end<start)end=start;
+            sections.push({name:item.name,kind:item.kind,startLine:start,endLine:end});
+        });
+    }
+    return sections.map(function(section){
+        var startVisual=file?codeCardVisualLineIndex(file,section.startLine,prefs):section.startLine;
+        var endVisual=file?codeCardVisualLineIndex(file,section.endLine,prefs):section.endLine;
+        if(endVisual<startVisual)endVisual=startVisual;
+        return Object.assign({},section,{
+            color:codeColorBlockKindColor(section.kind),
+            top:8+(startVisual-1)*CODE_CARD_LINE_HEIGHT,
+            height:Math.max(6,(endVisual-startVisual+1)*CODE_CARD_LINE_HEIGHT)
+        });
+    });
+}
+
 function codeCardSymbolPills(file,connections,prefs){
     var size=codeCardSize(file,prefs);
     return extractFileSymbols(file,connections).map(function(sym){
@@ -8998,7 +9093,7 @@
     function updateGraphHighlight(path,blast){
         if(!nodesRef.current||!linksRef.current)return;
         var affectedSet=new Set(blast?blast.affected:[]);
-        nodesRef.current.selectAll('.nc').transition().duration(200)
+        nodesRef.current.selectAll('.nc,.nb').transition().duration(200)
             .attr('opacity',function(n){if(n.id===path)return 1;if(affectedSet.has(n.id))return 1;return path?0.2:1;})
             .attr('fill',function(n){if(n.id===path)return'#ff5f5f';if(affectedSet.has(n.id))return'#ff9f43';return getNodeColor(n);});
         linksRef.current.transition().duration(200)
@@ -9393,12 +9488,14 @@
             });
         }
         if(nodesRef.current){
-            var markScale=readableLabelScale((codeZoomTransformRef.current||{}).k);
+            var zoomK=(codeZoomTransformRef.current||{}).k;
+            var markScale=readableLabelScale(zoomK);
+            var hideChrome=zoomShowsColorBlocks(zoomK);
             nodesRef.current.classed('has-code-card',function(d){return nodeReplacedByCard(d.id,codeCardPathsRef.current);});
             nodesRef.current.classed('code-faded',false);
             nodesRef.current.attr('display',function(d){return nodeReplacedByCard(d.id,codeCardPathsRef.current)?'none':null;});
-            nodesRef.current.selectAll('circle.nc').attr('transform',function(d){return nodeReplacedByCard(d.id,codeCardPathsRef.current)?'':'scale('+markScale+')';});
-            nodesRef.current.selectAll('text.node-label').attr('transform',function(d){return nodeReplacedByCard(d.id,codeCardPathsRef.current)?'':'scale('+markScale+')';});
+            nodesRef.current.selectAll('circle.nc').attr('transform',function(d){return nodeReplacedByCard(d.id,codeCardPathsRef.current)||hideChrome?'':'scale('+markScale+')';});
+            nodesRef.current.selectAll('text.node-label').attr('transform',function(d){return nodeReplacedByCard(d.id,codeCardPathsRef.current)||hideChrome?'':'scale('+markScale+')';});
         }
     }
 
@@ -9482,9 +9579,21 @@
         graphNodesByIdRef.current=Object.create(null);
         nodes.forEach(function(n){graphNodesByIdRef.current[n.id]=n;});
         function collideR(d){return liveCodeCollideRadius(d,keepReadable&&codeCardPathsRef.current.has(d.id)?codeCardSizesRef.current[d.id]:null);}
+        function applyCanvasColorBlocks(k){
+            var on=zoomShowsColorBlocks(k);
+            if(svgRef.current&&svgRef.current.classList){
+                if(on)svgRef.current.classList.add('color-blocks');
+                else svgRef.current.classList.remove('color-blocks');
+            }
+            if(nodesRef.current){
+                nodesRef.current.selectAll('rect.nb').attr('display',on?null:'none');
+            }
+        }
         function applyReadableLabels(k){
+            applyCanvasColorBlocks(k);
             if(!keepReadable)return;
             var s=readableLabelScale(k);
+            var blocks=zoomShowsColorBlocks(k);
             nodeLayer.selectAll('g').each(function(d){
                 var hidden=nodeReplacedByCard(d&&d.id,codeCardPathsRef.current);
                 var sel=d3.select(this);
@@ -9492,6 +9601,11 @@
                 sel.classed('code-faded',false);
                 sel.attr('display',hidden?'none':null);
                 if(hidden)return;
+                if(blocks){
+                    sel.select('circle.nc').attr('transform',null);
+                    sel.select('text.node-label').attr('transform',null);
+                    return;
+                }
                 sel.select('circle.nc').attr('transform','scale('+s+')');
                 sel.select('text.node-label').attr('transform','scale('+s+')');
             });
@@ -9618,9 +9732,10 @@
             setActiveSymbol(null);
             if(keepReadable)return;
             link.attr('stroke',theme==='light'?'#ccc':'#333').attr('stroke-opacity',0.4);
-            node.selectAll('.nc').attr('opacity',1).attr('fill',getC);
+            node.selectAll('.nc,.nb').attr('opacity',1).attr('fill',getC);
         });
         node.append('circle').attr('class','nc').attr('r',getR).attr('fill',getC).attr('stroke',function(d){var c=d3.color(getC(d));return c?c.brighter(0.3):'#fff';}).attr('stroke-width',1.5);
+        node.append('rect').attr('class','nb').attr('x',function(d){return -graphColorBlockSize(d)/2;}).attr('y',function(d){return -graphColorBlockSize(d)/2;}).attr('width',graphColorBlockSize).attr('height',graphColorBlockSize).attr('rx',4).attr('fill',getC).attr('display','none');
         // Hide labels for large graphs to reduce DOM overhead. Code view keeps titles readable.
         if(keepReadable||!isLargeGraph||graphConfig.showLabels){
             node.append('text').attr('class','node-label').attr('text-anchor','middle').attr('dy',0).attr('fill',theme==='light'?'#333':'#eee').attr('font-size',function(d){return (keepReadable?Math.max(9,Math.min(12,getR(d)*0.7)):Math.max(6,Math.min(10,getR(d)*0.6)))+'px';}).attr('font-family','JetBrains Mono').attr('font-weight','600').attr('pointer-events','none').text(function(d){var n=d.name.replace(/\.[^.]+$/,'');if(keepReadable)return n.length>18?n.slice(0,17)+'…':n;var maxLen=Math.max(4,Math.floor(getR(d)/2));return n.length>maxLen+1?n.slice(0,maxLen)+'…':n;});
@@ -9683,6 +9798,7 @@
             if(tickCount%hullInterval===0)updateHulls();
         });
         node.selectAll('text').attr('opacity',(keepReadable||graphConfig.showLabels)?1:0);
+        applyCanvasColorBlocks((codeZoomTransformRef.current&&codeZoomTransformRef.current.k)||1);
         if(keepReadable){
             applyOpenedCardPlacements({skipFly:true});
             placeRemainingCodeNodes();
@@ -11396,6 +11512,25 @@
         var cardPrefs=currentCodeCardPrefs();
         var cardSize=applyCodeCardUserSize(codeCardSize(file,cardPrefs),codeCardUserSizeRef.current[file.path]);
         var pills=isPrimary?codeCardSymbolPills(file,data?data.connections:[],cardPrefs):[];
+        var colorBlocks=codeColorBlockSections(file,data?data.connections:[],cardPrefs);
+        var blockLayer=colorBlocks.length?React.createElement('div',{className:'code-color-blocks'},
+            colorBlocks.map(function(block){
+                return React.createElement('div',{
+                    key:block.name+':'+block.startLine,
+                    className:'code-color-block '+block.kind,
+                    title:block.name,
+                    style:{top:block.top+'px',height:block.height+'px',background:block.color},
+                    onMouseEnter:function(e){
+                        var host=codeCanvasRef.current;
+                        if(!host)return;
+                        var r=host.getBoundingClientRect();
+                        setTooltip({x:e.clientX-r.left+10,y:e.clientY-r.top,title:block.name,content:block.kind+(block.startLine?' · L'+block.startLine:'')});
+                    },
+                    onMouseLeave:function(){setTooltip(null);}
+                });
+            })
+        ):null;
+        body=React.createElement('div',{className:'code-card-source'},body,blockLayer);
         return React.createElement('div',{key:file.path,'data-code-card':file.path,className:'code-card'+(isPrimary?' primary':' linked')+(cardSize.clipped?' clipped':'')+(cardSize.expand?' expand':'')+(cardSize.wrap?' wrap':''),onClick:function(e){
             var taken=consumeCodeCardClick(codeCardIgnoreClickRef.current);
             codeCardIgnoreClickRef.current=taken.ignoreNextClick;
@@ -11863,7 +11998,7 @@
                     ),
                     React.createElement('div',{className:'panel-content'},
                         rightTab==='details'&&(selected?React.createElement(React.Fragment,null,
-                            React.createElement('button',{className:'top-btn',style:{width:'100%',marginBottom:12},onClick:function(){setSelected(null);setBlastRadius(null);if(nodesRef.current){nodesRef.current.selectAll('.nc').transition().duration(200).attr('opacity',1).attr('fill',getNodeColor);}if(linksRef.current){linksRef.current.transition().duration(200).attr('stroke-opacity',0.4).attr('stroke',theme==='light'?'#ccc':'#333');}}},'← Back to Issues'),
+                            React.createElement('button',{className:'top-btn',style:{width:'100%',marginBottom:12},onClick:function(){setSelected(null);setBlastRadius(null);if(nodesRef.current){nodesRef.current.selectAll('.nc,.nb').transition().duration(200).attr('opacity',1).attr('fill',getNodeColor);}if(linksRef.current){linksRef.current.transition().duration(200).attr('stroke-opacity',0.4).attr('stroke',theme==='light'?'#ccc':'#333');}}},'← Back to Issues'),
                             React.createElement('div',{className:'panel-header',style:{margin:'0 -12px 12px',padding:12}},
                                 React.createElement('div',{style:{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}},
                                     React.createElement('div',null,
diff --git a/tests/code-canvas.test.mjs b/tests/code-canvas.test.mjs
index 885c50e..3c5dbd5 100644
--- a/tests/code-canvas.test.mjs
+++ b/tests/code-canvas.test.mjs
@@ -25,6 +25,92 @@ test('readable labels grow only when zoomed out', () => {
   assert.ok(context.readableLabelScale(0.1) > 2);
 });
 
+test('color blocks replace fine chrome below the CodeCanvas zoom threshold', () => {
+  assert.equal(context.COLOR_BLOCK_ZOOM, 0.4);
+  assert.equal(context.CODE_FAR_ZOOM, 0.22);
+  assert.equal(context.zoomShowsColorBlocks(1), false);
+  assert.equal(context.zoomShowsColorBlocks(0.4), false);
+  assert.equal(context.zoomShowsColorBlocks(0.39), true);
+  assert.equal(context.zoomShowsColorBlocks(0.2), true);
+  assert.equal(context.zoomHidesCodeText(0.4), false);
+  assert.equal(context.zoomHidesCodeText(0.22), false);
+  assert.equal(context.zoomHidesCodeText(0.21), true);
+  assert.equal(context.vizHasZoomColorBlocks('graph'), true);
+  assert.equal(context.vizHasZoomColorBlocks('code'), true);
+  assert.equal(context.vizHasZoomColorBlocks('graph3d'), false);
+  assert.equal(context.vizHasZoomColorBlocks('treemap'), false);
+  assert.ok(context.graphColorBlockSize({ fnCount: 0 }) >= 18);
+  assert.ok(context.graphColorBlockSize({ fnCount: 20 }) > context.graphColorBlockSize({ fnCount: 0 }));
+});
+
+test('code color blocks cover functions and leftover file regions', () => {
+  const file = {
+    path: 'src/app.js',
+    name: 'app.js',
+    content: 'import { add } from "./math.js";\n\nexport function render(){\n  return add(1, 2);\n}\n\nfunction helper(){\n  return 1;\n}\n',
+    functions: [
+      { name: 'render', line: 3, isExported: true },
+      { name: 'helper', line: 7, isExported: false }
+    ]
+  };
+  const sections = context.codeColorBlockSections(file, [{ source: 'src/math.js', target: 'src/app.js', fn: 'add' }]);
+  const names = J(sections).map((s) => s.name);
+  assert.ok(names.includes('render'));
+  assert.ok(names.includes('helper'));
+  assert.ok(names.includes('add') || names.includes('app.js'));
+  const render = sections.find((s) => s.name === 'render');
+  assert.equal(render.kind, 'export');
+  assert.equal(render.startLine, 3);
+  assert.ok(render.endLine >= 3);
+  assert.ok(render.height >= 6);
+  assert.equal(render.color, context.codeColorBlockKindColor('export'));
+  const helper = sections.find((s) => s.name === 'helper');
+  assert.equal(helper.kind, 'fn');
+  assert.ok(helper.top > render.top);
+  const empty = context.codeColorBlockSections({ name: 'notes.md', path: 'notes.md', content: '# hi\n' }, []);
+  assert.equal(empty.length, 1);
+  assert.equal(empty[0].name, 'notes.md');
+  assert.equal(empty[0].kind, 'file');
+});
+
+test('card layout toggles color-block and far-zoom classes at the thresholds', () => {
+  function trackingCard(path) {
+    const classes = new Set();
+    return {
+      path,
+      classes,
+      getAttribute(name) { return name === 'data-code-card' ? path : null; },
+      style: {},
+      classList: {
+        add(name) { classes.add(name); },
+        remove(name) { classes.delete(name); }
+      },
+      querySelector() { return { style: {} }; }
+    };
+  }
+  const near = trackingCard('a.js');
+  const mid = trackingCard('b.js');
+  const far = trackingCard('c.js');
+  const layerFor = (card) => ({ style: {}, querySelectorAll() { return [card]; } });
+  const nodes = { 'a.js': { x: 10, y: 10 }, 'b.js': { x: 10, y: 10 }, 'c.js': { x: 10, y: 10 } };
+  const sizes = { 'a.js': { width: 100, height: 80 }, 'b.js': { width: 100, height: 80 }, 'c.js': { width: 100, height: 80 } };
+  const nearLaid = context.applyCodeCardLayout(layerFor(near), nodes, { k: 1, x: 0, y: 0 }, sizes);
+  assert.equal(nearLaid.colorBlocks, false);
+  assert.equal(nearLaid.codeFar, false);
+  assert.equal(near.classes.has('code-blocks'), false);
+  assert.equal(near.classes.has('code-far'), false);
+  const midLaid = context.applyCodeCardLayout(layerFor(mid), { 'b.js': { x: 10, y: 10 } }, { k: 0.3, x: 0, y: 0 }, sizes);
+  assert.equal(midLaid.colorBlocks, true);
+  assert.equal(midLaid.codeFar, false);
+  assert.equal(mid.classes.has('code-blocks'), true);
+  assert.equal(mid.classes.has('code-far'), false);
+  const farLaid = context.applyCodeCardLayout(layerFor(far), { 'c.js': { x: 10, y: 10 } }, { k: 0.1, x: 0, y: 0 }, sizes);
+  assert.equal(farLaid.colorBlocks, true);
+  assert.equal(farLaid.codeFar, true);
+  assert.equal(far.classes.has('code-blocks'), true);
+  assert.equal(far.classes.has('code-far'), true);
+});
+
 test('open Code cards replace their nodes', () => {
   const cards = new Set(['src/app.js']);
   assert.equal(context.nodeReplacedByCard('src/app.js', cards), true);
@@ -1142,6 +1228,18 @@ test('index.html ships a working Code view, not a stub', () => {
   assert.match(htmlSource, /pruneCodeCardPlacements/);
   assert.match(htmlSource, /codeCardPlacementKeepSet\(openedCodePaths,codeViewFiles\)/);
   assert.match(htmlSource, /code-card\.code-far/);
+  assert.match(htmlSource, /zoomShowsColorBlocks/);
+  assert.match(htmlSource, /zoomHidesCodeText/);
+  assert.match(htmlSource, /codeColorBlockSections/);
+  assert.match(htmlSource, /vizHasZoomColorBlocks/);
+  assert.match(htmlSource, /applyCanvasColorBlocks/);
+  assert.match(htmlSource, /graphColorBlockSize/);
+  assert.match(htmlSource, /className:'code-color-blocks'/);
+  assert.match(htmlSource, /className:'code-color-block /);
+  assert.match(htmlSource, /attr\('class','nb'\)/);
+  assert.match(htmlSource, /svg\.color-blocks/);
+  assert.match(htmlSource, /COLOR_BLOCK_ZOOM/);
+  assert.match(htmlSource, /selectAll\('\.nc,\.nb'\)/);
   assert.match(htmlSource, /evictHiddenCodeCards/);
   assert.match(htmlSource, /updateHullsRef\.current/);
   assert.match(htmlSource, /codeViewWheelPanDelta/);

From 619e59552095c22bc2c2de9e934533dfb4e97abc Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 28 Aug 2026 20:39:29 +0000
Subject: [PATCH 2/3] Keep zoom-out color blocks readable on screen

Graph rectangles were the same world size as the circles they replace,
so at k<=0.4 they shrank into noise. Counter-scale them to a 16px
floor, turn blocks on at 0.4 inclusive, and give the tiles a stroke.

Co-authored-by: Braedon Saunders <braedonsaunders@users.noreply.github.com>
---
 index.html                 | 18 ++++++++++++++----
 tests/code-canvas.test.mjs |  7 ++++++-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 47f55a8..29902d8 100644
--- a/index.html
+++ b/index.html
@@ -5861,7 +5861,7 @@
 function zoomShowsColorBlocks(k){
     var zoom=Number(k);
     if(!isFinite(zoom)||zoom<=0)return false;
-    return zoom<COLOR_BLOCK_ZOOM;
+    return zoom<=COLOR_BLOCK_ZOOM;
 }
 
 function zoomHidesCodeText(k){
@@ -5872,7 +5872,16 @@
 
 function graphColorBlockSize(d){
     var r=Math.max(8,Math.min(24,5+((d&&d.fnCount)||0)*0.8));
-    return Math.max(18,r*2);
+    return Math.max(22,r*2+4);
+}
+
+function graphColorBlockScale(k){
+    var zoom=Number(k);
+    if(!isFinite(zoom)||zoom<=0)return 1;
+    var minScreen=16;
+    var screen=22*zoom;
+    if(screen>=minScreen)return 1;
+    return Math.min(6,minScreen/screen);
 }
 
 function codeColorBlockKindColor(kind){
@@ -9581,12 +9590,13 @@
         function collideR(d){return liveCodeCollideRadius(d,keepReadable&&codeCardPathsRef.current.has(d.id)?codeCardSizesRef.current[d.id]:null);}
         function applyCanvasColorBlocks(k){
             var on=zoomShowsColorBlocks(k);
+            var s=on?graphColorBlockScale(k):1;
             if(svgRef.current&&svgRef.current.classList){
                 if(on)svgRef.current.classList.add('color-blocks');
                 else svgRef.current.classList.remove('color-blocks');
             }
             if(nodesRef.current){
-                nodesRef.current.selectAll('rect.nb').attr('display',on?null:'none');
+                nodesRef.current.selectAll('rect.nb').attr('display',on?null:'none').attr('transform',on?'scale('+s+')':null);
             }
         }
         function applyReadableLabels(k){
@@ -9735,7 +9745,7 @@
             node.selectAll('.nc,.nb').attr('opacity',1).attr('fill',getC);
         });
         node.append('circle').attr('class','nc').attr('r',getR).attr('fill',getC).attr('stroke',function(d){var c=d3.color(getC(d));return c?c.brighter(0.3):'#fff';}).attr('stroke-width',1.5);
-        node.append('rect').attr('class','nb').attr('x',function(d){return -graphColorBlockSize(d)/2;}).attr('y',function(d){return -graphColorBlockSize(d)/2;}).attr('width',graphColorBlockSize).attr('height',graphColorBlockSize).attr('rx',4).attr('fill',getC).attr('display','none');
+        node.append('rect').attr('class','nb').attr('x',function(d){return -graphColorBlockSize(d)/2;}).attr('y',function(d){return -graphColorBlockSize(d)/2;}).attr('width',graphColorBlockSize).attr('height',graphColorBlockSize).attr('rx',3).attr('fill',getC).attr('stroke',function(d){var c=d3.color(getC(d));return c?c.darker(0.35):'#000';}).attr('stroke-width',1).attr('display','none');
         // Hide labels for large graphs to reduce DOM overhead. Code view keeps titles readable.
         if(keepReadable||!isLargeGraph||graphConfig.showLabels){
             node.append('text').attr('class','node-label').attr('text-anchor','middle').attr('dy',0).attr('fill',theme==='light'?'#333':'#eee').attr('font-size',function(d){return (keepReadable?Math.max(9,Math.min(12,getR(d)*0.7)):Math.max(6,Math.min(10,getR(d)*0.6)))+'px';}).attr('font-family','JetBrains Mono').attr('font-weight','600').attr('pointer-events','none').text(function(d){var n=d.name.replace(/\.[^.]+$/,'');if(keepReadable)return n.length>18?n.slice(0,17)+'…':n;var maxLen=Math.max(4,Math.floor(getR(d)/2));return n.length>maxLen+1?n.slice(0,maxLen)+'…':n;});
diff --git a/tests/code-canvas.test.mjs b/tests/code-canvas.test.mjs
index 3c5dbd5..6d2b2b4 100644
--- a/tests/code-canvas.test.mjs
+++ b/tests/code-canvas.test.mjs
@@ -29,9 +29,13 @@ test('color blocks replace fine chrome below the CodeCanvas zoom threshold', ()
   assert.equal(context.COLOR_BLOCK_ZOOM, 0.4);
   assert.equal(context.CODE_FAR_ZOOM, 0.22);
   assert.equal(context.zoomShowsColorBlocks(1), false);
-  assert.equal(context.zoomShowsColorBlocks(0.4), false);
+  assert.equal(context.zoomShowsColorBlocks(0.41), false);
+  assert.equal(context.zoomShowsColorBlocks(0.4), true);
   assert.equal(context.zoomShowsColorBlocks(0.39), true);
   assert.equal(context.zoomShowsColorBlocks(0.2), true);
+  assert.equal(context.graphColorBlockScale(1), 1);
+  assert.ok(context.graphColorBlockScale(0.4) >= 1);
+  assert.ok(context.graphColorBlockScale(0.2) > context.graphColorBlockScale(0.4));
   assert.equal(context.zoomHidesCodeText(0.4), false);
   assert.equal(context.zoomHidesCodeText(0.22), false);
   assert.equal(context.zoomHidesCodeText(0.21), true);
@@ -1234,6 +1238,7 @@ test('index.html ships a working Code view, not a stub', () => {
   assert.match(htmlSource, /vizHasZoomColorBlocks/);
   assert.match(htmlSource, /applyCanvasColorBlocks/);
   assert.match(htmlSource, /graphColorBlockSize/);
+  assert.match(htmlSource, /graphColorBlockScale/);
   assert.match(htmlSource, /className:'code-color-blocks'/);
   assert.match(htmlSource, /className:'code-color-block /);
   assert.match(htmlSource, /attr\('class','nb'\)/);

From 7436a3880679fa6a7a553e57c15e60b87b28552b Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 30 Aug 2026 12:24:35 +0000
Subject: [PATCH 3/3] Keep zoom-out color blocks off the red/green diff palette

eorroe tested #95 on a 110-file clone and asked that chunks not look
like diffs. Code export/file fills move to teal/amber, and Graph
folder/layer/churn tiles remap red and green to blue/cyan/purple/orange.
Hover names and the 0.4 / 0.22 zoom switch are unchanged.

Co-authored-by: Braedon Saunders <braedonsaunders@users.noreply.github.com>
---
 index.html                 | 63 ++++++++++++++++++++++++++++++++++----
 tests/code-canvas.test.mjs | 23 ++++++++++++++
 2 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 29902d8..1a3b6aa 100644
--- a/index.html
+++ b/index.html
@@ -5884,10 +5884,57 @@
     return Math.min(6,minScreen/screen);
 }
 
+function parseCssHex(color){
+    var raw=String(color||'').trim();
+    var m=raw.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+    if(!m)return null;
+    var h=m[1];
+    if(h.length===3)h=h[0]+h[0]+h[1]+h[1]+h[2]+h[2];
+    return{r:parseInt(h.slice(0,2),16),g:parseInt(h.slice(2,4),16),b:parseInt(h.slice(4,6),16)};
+}
+
+function cssHexHue(color){
+    var rgb=parseCssHex(color);
+    if(!rgb)return NaN;
+    var r=rgb.r/255,g=rgb.g/255,b=rgb.b/255;
+    var max=Math.max(r,g,b),min=Math.min(r,g,b),d=max-min;
+    if(d===0)return 0;
+    var h=max===r?((g-b)/d)%6:max===g?(b-r)/d+2:(r-g)/d+4;
+    h=h*60;
+    if(h<0)h+=360;
+    return h;
+}
+
+function colorBlockLooksLikeDiff(color){
+    var h=cssHexHue(color);
+    if(!isFinite(h))return false;
+    return h<=25||h>=335||(h>=70&&h<=165);
+}
+
+function graphColorBlockFill(color){
+    var hex=String(color||'').trim();
+    var known={
+        '#00ff9d':'#22d3ee',
+        '#00cc7d':'#22d3ee',
+        '#00a86b':'#4d9fff',
+        '#22c55e':'#4d9fff',
+        '#84cc16':'#ff9f43',
+        '#98c379':'#56b6c2',
+        '#ff5f5f':'#a78bfa',
+        '#e06c75':'#d19a66',
+        '#ff6b6b':'#a78bfa'
+    };
+    var key=hex.toLowerCase();
+    if(known[key])return known[key];
+    if(!colorBlockLooksLikeDiff(hex))return hex||'#4d9fff';
+    var h=cssHexHue(hex);
+    return (h<=25||h>=335)?'#a78bfa':'#22d3ee';
+}
+
 function codeColorBlockKindColor(kind){
     if(kind==='import')return '#c678dd';
-    if(kind==='export')return '#98c379';
-    if(kind==='var'||kind==='file')return '#e06c75';
+    if(kind==='export')return '#56b6c2';
+    if(kind==='var'||kind==='file')return '#d19a66';
     if(kind==='class')return '#e5c07b';
     return '#61afef';
 }
@@ -9104,7 +9151,10 @@
         var affectedSet=new Set(blast?blast.affected:[]);
         nodesRef.current.selectAll('.nc,.nb').transition().duration(200)
             .attr('opacity',function(n){if(n.id===path)return 1;if(affectedSet.has(n.id))return 1;return path?0.2:1;})
-            .attr('fill',function(n){if(n.id===path)return'#ff5f5f';if(affectedSet.has(n.id))return'#ff9f43';return getNodeColor(n);});
+            .attr('fill',function(n){
+                var fill=n.id===path?'#ff5f5f':affectedSet.has(n.id)?'#ff9f43':getNodeColor(n);
+                return d3.select(this).classed('nb')?graphColorBlockFill(fill):fill;
+            });
         linksRef.current.transition().duration(200)
             .attr('stroke-opacity',function(l){var src=l.source.id||l.source;var tgt=l.target.id||l.target;if(src===path||tgt===path)return 0.8;return path?0.05:0.4;})
             .attr('stroke',function(l){var src=l.source.id||l.source;var tgt=l.target.id||l.target;if(src===path||tgt===path)return'var(--acc)';return theme==='light'?'#ccc':'#333';});
@@ -9742,10 +9792,11 @@
             setActiveSymbol(null);
             if(keepReadable)return;
             link.attr('stroke',theme==='light'?'#ccc':'#333').attr('stroke-opacity',0.4);
-            node.selectAll('.nc,.nb').attr('opacity',1).attr('fill',getC);
+            node.selectAll('.nc').attr('opacity',1).attr('fill',getC);
+            node.selectAll('.nb').attr('opacity',1).attr('fill',function(d){return graphColorBlockFill(getC(d));});
         });
         node.append('circle').attr('class','nc').attr('r',getR).attr('fill',getC).attr('stroke',function(d){var c=d3.color(getC(d));return c?c.brighter(0.3):'#fff';}).attr('stroke-width',1.5);
-        node.append('rect').attr('class','nb').attr('x',function(d){return -graphColorBlockSize(d)/2;}).attr('y',function(d){return -graphColorBlockSize(d)/2;}).attr('width',graphColorBlockSize).attr('height',graphColorBlockSize).attr('rx',3).attr('fill',getC).attr('stroke',function(d){var c=d3.color(getC(d));return c?c.darker(0.35):'#000';}).attr('stroke-width',1).attr('display','none');
+        node.append('rect').attr('class','nb').attr('x',function(d){return -graphColorBlockSize(d)/2;}).attr('y',function(d){return -graphColorBlockSize(d)/2;}).attr('width',graphColorBlockSize).attr('height',graphColorBlockSize).attr('rx',3).attr('fill',function(d){return graphColorBlockFill(getC(d));}).attr('stroke',function(d){var c=d3.color(graphColorBlockFill(getC(d)));return c?c.darker(0.35):'#000';}).attr('stroke-width',1).attr('display','none');
         // Hide labels for large graphs to reduce DOM overhead. Code view keeps titles readable.
         if(keepReadable||!isLargeGraph||graphConfig.showLabels){
             node.append('text').attr('class','node-label').attr('text-anchor','middle').attr('dy',0).attr('fill',theme==='light'?'#333':'#eee').attr('font-size',function(d){return (keepReadable?Math.max(9,Math.min(12,getR(d)*0.7)):Math.max(6,Math.min(10,getR(d)*0.6)))+'px';}).attr('font-family','JetBrains Mono').attr('font-weight','600').attr('pointer-events','none').text(function(d){var n=d.name.replace(/\.[^.]+$/,'');if(keepReadable)return n.length>18?n.slice(0,17)+'…':n;var maxLen=Math.max(4,Math.floor(getR(d)/2));return n.length>maxLen+1?n.slice(0,maxLen)+'…':n;});
@@ -12008,7 +12059,7 @@
                     ),
                     React.createElement('div',{className:'panel-content'},
                         rightTab==='details'&&(selected?React.createElement(React.Fragment,null,
-                            React.createElement('button',{className:'top-btn',style:{width:'100%',marginBottom:12},onClick:function(){setSelected(null);setBlastRadius(null);if(nodesRef.current){nodesRef.current.selectAll('.nc,.nb').transition().duration(200).attr('opacity',1).attr('fill',getNodeColor);}if(linksRef.current){linksRef.current.transition().duration(200).attr('stroke-opacity',0.4).attr('stroke',theme==='light'?'#ccc':'#333');}}},'← Back to Issues'),
+                            React.createElement('button',{className:'top-btn',style:{width:'100%',marginBottom:12},onClick:function(){setSelected(null);setBlastRadius(null);if(nodesRef.current){nodesRef.current.selectAll('.nc,.nb').transition().duration(200).attr('opacity',1).attr('fill',function(n){return d3.select(this).classed('nb')?graphColorBlockFill(getNodeColor(n)):getNodeColor(n);});}if(linksRef.current){linksRef.current.transition().duration(200).attr('stroke-opacity',0.4).attr('stroke',theme==='light'?'#ccc':'#333');}}},'← Back to Issues'),
                             React.createElement('div',{className:'panel-header',style:{margin:'0 -12px 12px',padding:12}},
                                 React.createElement('div',{style:{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}},
                                     React.createElement('div',null,
diff --git a/tests/code-canvas.test.mjs b/tests/code-canvas.test.mjs
index 6d2b2b4..421be05 100644
--- a/tests/code-canvas.test.mjs
+++ b/tests/code-canvas.test.mjs
@@ -47,6 +47,24 @@ test('color blocks replace fine chrome below the CodeCanvas zoom threshold', ()
   assert.ok(context.graphColorBlockSize({ fnCount: 20 }) > context.graphColorBlockSize({ fnCount: 0 }));
 });
 
+test('zoom-out color blocks avoid red and green diff colors', () => {
+  ['fn', 'import', 'export', 'var', 'file', 'class'].forEach((kind) => {
+    const fill = context.codeColorBlockKindColor(kind);
+    assert.equal(context.colorBlockLooksLikeDiff(fill), false, kind + ' ' + fill);
+  });
+  ['#00ff9d', '#22c55e', '#84cc16', '#98c379', '#ff5f5f', '#e06c75'].forEach((hex) => {
+    assert.equal(context.colorBlockLooksLikeDiff(hex), true, hex);
+    assert.equal(context.colorBlockLooksLikeDiff(context.graphColorBlockFill(hex)), false, hex);
+  });
+  ['#4d9fff', '#a78bfa', '#22d3ee', '#ff9f43', '#61afef'].forEach((hex) => {
+    assert.equal(context.graphColorBlockFill(hex).toLowerCase(), hex.toLowerCase());
+  });
+  const churnHigh = context.graphColorBlockFill('#ff5f5f');
+  const churnLow = context.graphColorBlockFill('#22c55e');
+  assert.notEqual(churnHigh.toLowerCase(), '#ff5f5f');
+  assert.notEqual(churnLow.toLowerCase(), '#22c55e');
+});
+
 test('code color blocks cover functions and leftover file regions', () => {
   const file = {
     path: 'src/app.js',
@@ -1239,6 +1257,11 @@ test('index.html ships a working Code view, not a stub', () => {
   assert.match(htmlSource, /applyCanvasColorBlocks/);
   assert.match(htmlSource, /graphColorBlockSize/);
   assert.match(htmlSource, /graphColorBlockScale/);
+  assert.match(htmlSource, /graphColorBlockFill/);
+  assert.match(htmlSource, /colorBlockLooksLikeDiff/);
+  assert.match(htmlSource, /graphColorBlockFill\(getC\(d\)\)/);
+  assert.doesNotMatch(htmlSource, /function codeColorBlockKindColor[\s\S]*#98c379/);
+  assert.doesNotMatch(htmlSource, /function codeColorBlockKindColor[\s\S]*#e06c75/);
   assert.match(htmlSource, /className:'code-color-blocks'/);
   assert.match(htmlSource, /className:'code-color-block /);
   assert.match(htmlSource, /attr\('class','nb'\)/);