diff --git a/README.md b/README.md
index d847236..f2bec9b 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@ Paste URL / Select Files -> See Architecture -> Make Better Decisions
 ## Features
 
 ### Interactive Dependency Graph
-See how your files connect at a glance. Click any node to highlight its dependencies. Drag, zoom, and explore. The **Code** view keeps that map and shows the selected file plus its connected files beside it.
+See how your files connect at a glance. Click any node to highlight its dependencies. Drag, zoom, and explore. The **Code** view keeps that map and opens the selected file plus its connected files as full-file cards on the canvas, grouped by directory.
 
 ### Blast Radius Analysis
 *"If I change this file, what breaks?"* — CodeFlow answers this instantly. Select any file and see exactly how many files would be affected by changes.
@@ -257,7 +257,7 @@ strings and Pascal comment forms; unsupported language features fall back gracef
 | **Layer** | Color by architectural layer (UI, Services, Utils, etc.) |
 | **Churn** | Color by commit frequency (hot spots) |
 | **Blast** | Color by impact when a file is selected |
-| **Code** | Same graph, with file source and cross-file symbol highlights beside it |
+| **Code** | Same graph, with selected and connected files as full-file cards grouped by directory |
 
 ---
 
diff --git a/index.html b/index.html
index c34b722..c447aa2 100644
--- a/index.html
+++ b/index.html
@@ -69,9 +69,21 @@
 .resize-handle:hover{background:var(--acc);opacity:0.3}
 .sidebar-section{padding:12px;border-bottom:1px solid var(--border)}
 .sidebar-title{font-size:9px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
-.sidebar-scroll{flex:1;overflow-y:auto;padding:8px}
+.sidebar-scroll{flex:1;overflow-y:auto;padding:8px;min-height:0}
 .sidebar-scroll::-webkit-scrollbar{width:6px}
 .sidebar-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
+.sidebar-tabs{display:flex;flex-shrink:0;border-bottom:1px solid var(--border);background:var(--bg2)}
+.sidebar-tab{flex:1;padding:9px 4px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--t3);font-family:inherit;font-size:9px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;cursor:pointer}
+.sidebar-tab:hover{color:var(--t1)}
+.sidebar-tab.active{color:var(--acc);border-bottom-color:var(--acc)}
+.sidebar-pane{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
+.sidebar-filter{flex-shrink:0;padding:8px 10px;border-bottom:1px solid var(--border)}
+.color-by{position:absolute;top:12px;right:12px;z-index:51;display:flex;align-items:center;gap:2px;background:var(--bg1);border:1px solid var(--border);border-radius:8px;padding:3px 3px 3px 6px}
+.color-by-label{font-size:8px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:0.4px;margin-right:2px;white-space:nowrap}
+.color-by-btn{padding:3px 7px;background:transparent;border:1px solid transparent;border-radius:5px;font-size:9px;font-family:inherit;color:var(--t2);cursor:pointer}
+.color-by-btn:hover{color:var(--t0)}
+.color-by-btn.active{background:var(--accbg);border-color:var(--acc);color:var(--acc)}
+.legend.with-color-by{top:50px}
 .view-modes{display:flex;flex-direction:column;gap:2px}
 .view-mode{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:11px;color:var(--t1)}
 .view-mode:hover{background:var(--hover)}
@@ -126,10 +138,13 @@
 .legend-color{width:12px;height:12px;border-radius:3px;flex-shrink:0}
 .right-panel{width:360px;min-width:280px;max-width:500px;background:var(--bg1);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;position:relative;min-height:0}
 .right-panel .resize-handle{right:auto;left:-4px}
-.panel-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg2)}
-.panel-tab{flex:1;padding:8px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--t3);font-family:inherit;font-size:9px;font-weight:600;cursor:pointer}
+.panel-tabs{display:flex;flex-wrap:nowrap;align-items:stretch;border-bottom:1px solid var(--border);background:var(--bg2)}
+.panel-tab{flex:1 1 0;min-width:0;display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:4px;height:34px;padding:0 4px;line-height:16px;white-space:nowrap;overflow:hidden;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--t3);font-family:inherit;font-size:9px;font-weight:600;cursor:pointer}
 .panel-tab:hover{color:var(--t1)}
 .panel-tab.active{color:var(--acc);border-bottom-color:var(--acc)}
+.panel-tab .icon{flex-shrink:0}
+.panel-tab-pill{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:14px;min-width:14px;padding:0 5px;margin:0;border-radius:8px;font-size:8px;font-weight:600;line-height:14px;background:var(--bg3);color:var(--t2)}
+.panel-tab-pill.alert{background:var(--red);color:#fff}
 .panel-content{flex:1;overflow-y:auto;padding:12px}
 .panel-content::-webkit-scrollbar{width:6px}
 .panel-content::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
@@ -221,8 +236,12 @@
 .export-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
 .export-option{padding:16px;background:var(--bg0);border:1px solid var(--border);border-radius:8px;cursor:pointer;text-align:center}
 .export-option:hover{border-color:var(--acc);background:var(--accbg)}
+.export-option.disabled{opacity:0.55;cursor:not-allowed}
+.export-option.disabled:hover{border-color:var(--border);background:var(--bg0)}
 .export-option-icon{margin-bottom:8px;color:var(--acc)}
+.export-option.disabled .export-option-icon{color:var(--t3)}
 .export-option-label{font-size:11px;color:var(--t1)}
+.export-option.disabled .export-option-label{color:var(--t3)}
 .pr-header{padding:12px;background:var(--bg0);border-radius:8px;margin-bottom:12px}
 .pr-title{font-size:12px;color:var(--t0);font-weight:500}
 .pr-stats{display:flex;gap:12px;margin-top:8px;font-size:11px}
@@ -454,37 +473,51 @@
 .light .syn-tag{color:#e45649}
 .light .syn-attr{color:#986801}
 .light .syn-punct{color:#383a42}
-.code-split{display:flex;width:100%;height:100%;min-width:0;min-height:0}
-.code-split-graph{flex:1 1 48%;min-width:180px;position:relative;overflow:hidden}
-.code-split-graph svg{width:100%;height:100%;display:block}
-.code-split-resize{width:8px;flex-shrink:0;cursor:col-resize;background:var(--border);position:relative;z-index:20;touch-action:none}
-.code-split-resize:hover,.code-split-resize.active{background:var(--acc)}
-.code-split-pane{flex:1 1 52%;min-width:220px;max-width:70%;display:flex;flex-direction:column;background:var(--bg1);border-left:1px solid var(--border);min-height:0}
-.code-split-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
-.code-split-title{font-size:10px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:0.6px}
-.code-split-hint{font-size:9px;color:var(--t3)}
-.code-sym-row{display:flex;flex-wrap:wrap;gap:4px;padding:6px 10px;border-bottom:1px solid var(--border2);flex-shrink:0;max-height:72px;overflow:auto}
-.code-sym-chip{font-size:9px;padding:3px 7px;border-radius:999px;border:1px solid var(--border);background:var(--bg0);color:var(--t2);cursor:pointer;font-family:inherit}
+.code-canvas{position:relative;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
+.code-canvas svg{width:100%;height:100%;display:block}
+.code-canvas-cards{position:absolute;inset:0;pointer-events:none;transform-origin:0 0;z-index:4}
+.code-canvas-hud{position:absolute;top:56px;left:12px;z-index:51;display:flex;flex-direction:column;align-items:stretch;gap:6px;width:168px;max-width:calc(100% - 24px);pointer-events:none}
+.code-canvas-hint{font-size:10px;color:var(--t3);background:var(--bg1);border:1px solid var(--border);border-radius:8px;padding:6px 8px;line-height:1.4}
+.code-sym-list{display:flex;flex-direction:column;gap:2px;padding:6px;border:1px solid var(--border);border-radius:8px;background:var(--bg1);max-height:min(420px,calc(100% - 140px));overflow-x:hidden;overflow-y:auto;pointer-events:auto}
+.code-sym-chip{display:block;width:100%;box-sizing:border-box;font-size:9px;padding:4px 7px;border-radius:6px;border:1px solid var(--border);background:var(--bg0);color:var(--t2);cursor:pointer;font-family:inherit;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .code-sym-chip:hover{border-color:var(--acc);color:var(--acc)}
 .code-sym-chip.active{background:var(--accbg);border-color:var(--acc);color:var(--acc)}
 .code-sym-chip.fn{box-shadow:inset 3px 0 0 #61afef}
 .code-sym-chip.import{box-shadow:inset 3px 0 0 #c678dd}
 .code-sym-chip.export{box-shadow:inset 3px 0 0 #98c379}
 .code-sym-chip.var{box-shadow:inset 3px 0 0 #e06c75}
-.code-file-tabs{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid var(--border2);overflow-x:auto;flex-shrink:0}
-.code-file-tab{font-size:9px;padding:4px 8px;border-radius:6px;border:1px solid var(--border);background:var(--bg0);color:var(--t2);cursor:pointer;white-space:nowrap;font-family:inherit}
-.code-file-tab:hover{color:var(--t0);border-color:var(--acc)}
-.code-file-tab.active{background:var(--accbg);border-color:var(--acc);color:var(--acc)}
-.code-file-tab.connected{opacity:0.95}
-.code-cards{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:8px;min-height:0}
-.code-card{border:1px solid var(--border);border-radius:8px;background:var(--bg0);overflow:hidden;display:flex;flex-direction:column;min-height:120px}
-.code-card.primary{flex:1 1 55%;min-height:180px}
-.code-card.linked{flex:0 1 28%;min-height:110px;max-height:240px}
-.code-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;background:var(--bg2);border-bottom:1px solid var(--border2);cursor:pointer}
-.code-card-name{font-size:11px;font-weight:600;color:var(--t0)}
-.code-card-path{font-size:9px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.code-card-body{flex:1;overflow:auto;min-height:0}
+.code-card{position:absolute;border:1px solid var(--border);border-radius:8px;background:var(--bg0);overflow:visible;display:flex;flex-direction:column;pointer-events:auto;box-shadow:0 10px 28px rgba(0,0,0,0.28);visibility:hidden;user-select:none}
+.code-line-pill{position:absolute;left:100%;margin-left:8px;transform:translateY(-50%);z-index:2;font-size:8px;line-height:14px;padding:0 6px;border-radius:8px;border:1px solid var(--border);background:var(--bg1);color:var(--t1);white-space:nowrap;cursor:pointer;font-family:inherit}
+.code-line-pill:hover,.code-line-pill.active{border-color:var(--acc);color:var(--acc);background:var(--accbg)}
+.code-card.primary{border-color:var(--acc);box-shadow:0 12px 32px rgba(0,0,0,0.34),0 0 0 1px var(--acc)}
+.code-card.linked{opacity:0.98}
+.code-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;background:var(--bg2);border-bottom:1px solid var(--border2);cursor:grab;touch-action:none;flex-shrink:0}
+.code-card-head:active{cursor:grabbing}
+.code-card-name{font-size:11px;font-weight:600;color:var(--t0);transform-origin:left center;display:inline-block;white-space:nowrap}
+.code-card-path{font-size:9px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
+.code-card-body{flex:1;overflow:hidden;min-height:0;user-select:text}
+.code-card-source-status{padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
+.code-card-retry{background:transparent;border:1px solid var(--border);color:var(--t2);padding:4px 8px;border-radius:4px;font-size:10px;cursor:pointer}
+.code-card-retry:hover{border-color:var(--acc);color:var(--acc)}
+.code-card.clipped .code-card-body{overflow:auto;touch-action:pan-x pan-y}
+.code-card.expand:not(.wrap) .code-card-body{overflow-x:auto;overflow-y:hidden;touch-action:pan-x}
+.code-card.expand.wrap .code-card-body{overflow:hidden}
+.code-card.wrap:not(.expand) .code-card-body{overflow-x:hidden;overflow-y:auto}
+.code-card.wrap .file-preview-line{align-items:flex-start;height:auto}
+.code-card.wrap .file-preview-text{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;min-width:0}
 .code-card-body .file-preview-code{padding:8px 0;font-size:11px}
+.color-by.code-view-prefs{flex-direction:row;align-items:center;gap:2px;padding:3px 3px 3px 6px}
+.code-card-resize{position:absolute;z-index:3;background:transparent}
+.code-card-resize-e{top:14px;right:-4px;width:10px;bottom:14px;cursor:ew-resize}
+.code-card-resize-s{left:14px;right:14px;bottom:-4px;height:10px;cursor:ns-resize}
+.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 .code-line-pill{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}
 .sym-mark.fn{background:rgba(97,175,239,0.16)}
 .sym-mark.import{background:rgba(198,120,221,0.16)}
@@ -502,16 +535,14 @@
 .recent-mini-btn{font-size:8px;padding:3px 6px;border-radius:4px;border:1px solid var(--border);background:var(--bg2);color:var(--t2);cursor:pointer;font-family:inherit}
 .recent-mini-btn:hover{border-color:var(--acc);color:var(--acc)}
 .recent-mini-btn.danger:hover{border-color:var(--red);color:var(--red)}
+.recent-mini-btn.danger.armed{background:var(--red);border-color:var(--red);color:#fff}
 .recent-empty{font-size:10px;color:var(--t3);line-height:1.4;padding:4px 0}
 .stale-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:var(--accbg);border:1px solid var(--acc);border-radius:6px;margin:0 0 8px;font-size:10px;color:var(--t1)}
 .github-hint{font-size:9px;color:var(--t3);line-height:1.45;margin-top:6px;max-width:420px}
 .github-hint button{background:none;border:none;color:var(--acc);cursor:pointer;font-family:inherit;font-size:9px;padding:0;text-decoration:underline}
 .cli-chip{padding:4px 8px;background:var(--accbg);border:1px solid var(--acc);border-radius:6px;font-size:9px;color:var(--acc)}
 @media(max-width:980px){
-.code-split{flex-direction:column}
-.code-split-graph{flex:1 1 42%;min-height:180px}
-.code-split-resize{width:100%;height:8px;cursor:row-resize}
-.code-split-pane{flex:1 1 58%;max-width:none;min-height:200px;border-left:0;border-top:1px solid var(--border)}
+.code-canvas-hud{top:56px;left:10px;width:140px}
 }
 .auth-select{padding:6px 10px;background:var(--bg0);border:1px solid var(--border);border-radius:6px;color:var(--t0);font-family:inherit;font-size:10px;cursor:pointer;min-width:100px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8b95' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:28px}
 .auth-select:focus{outline:none;border-color:var(--acc)}
@@ -575,7 +606,9 @@
 .canvas-toolbar{top:68px;left:12px;right:12px;gap:8px;overflow-x:auto;padding-bottom:2px}
 .tool-btn{width:40px;height:40px;font-size:15px;flex:0 0 auto}
 .graph-config{top:120px;left:12px;right:12px;width:auto;max-width:none}
+.color-by{top:auto;bottom:118px;right:12px}
 .legend{top:auto;bottom:68px;right:12px;max-width:calc(100vw - 24px)}
+.legend.with-color-by{top:auto;bottom:68px}
 .canvas-info{left:12px;right:12px;bottom:12px;overflow-x:auto;padding-bottom:calc(2px + env(safe-area-inset-bottom))}
 .info-chip{white-space:nowrap;flex:0 0 auto}
 .export-options,.pr-grid,.pr-impact-grid,.unused-summary{grid-template-columns:1fr}
@@ -602,7 +635,9 @@
 .health-score{align-items:flex-start}
 .canvas-toolbar{top:64px}
 .graph-config{top:116px}
+.color-by{bottom:122px}
 .legend{bottom:72px;right:12px}
+.legend.with-color-by{bottom:72px}
 .panel-tabs{position:sticky;top:0;z-index:2}
 .file-preview-modal{width:100vw;height:100dvh;border-radius:0;border:none}
 .file-preview-header{border-radius:0;padding:12px}
@@ -658,7 +693,9 @@
 .graph-config{top:52px;left:10px;right:10px;width:auto;max-width:none}
 .architecture-view{padding:0}
 .architecture-shell{min-width:0;padding:0}
+.color-by{top:auto;bottom:118px;right:10px}
 .legend{top:auto;bottom:72px;right:10px;max-width:calc(100vw - 20px)}
+.legend.with-color-by{top:auto;bottom:72px}
 .canvas-info{left:10px;right:10px;bottom:10px;overflow-x:auto;padding-bottom:0}
 .info-chip{white-space:nowrap;flex:0 0 auto}
 }
@@ -668,7 +705,9 @@
 .mobile-secondary-row .auth-select{width:106px}
 .mobile-secondary-row .top-btn,.mobile-secondary-row .refresh-btn,.mobile-secondary-row .reset-btn{padding:0 9px}
 .canvas-toolbar{bottom:70px}
+.color-by{bottom:116px}
 .legend{bottom:70px}
+.legend.with-color-by{bottom:70px}
 }
     </style>
 </head>
@@ -686,7 +725,7 @@
  * 4. Shared analysis pipeline plus inline Web Worker fallback.
  * 5. React UI, local folder/ZIP ingestion, visualization, and modals.
  */
-const{useState,useEffect,useRef,useMemo,useCallback}=React;
+const{useState,useEffect,useLayoutEffect,useRef,useMemo,useCallback}=React;
 const COLORS=['#4d9fff','#a78bfa','#22d3ee','#00ff9d','#ff9f43','#ec4899','#ff5f5f','#84cc16'];
 const LAYER_COLORS={ui:'#4d9fff',components:'#22d3ee',services:'#a78bfa',utils:'#00ff9d',data:'#ff9f43',config:'#ec4899',test:'#f59e0b',modules:'#a78bfa',forms:'#22d3ee',classes:'#ff9f43',note:'#c084fc'};
 const IGNORE=new Set(['node_modules','.git','vendor','dist','build','out','coverage','.next','.nuxt','.cache','.parcel-cache','.turbo','.vercel','.local','.artifacts','.playwright-cli','playwright-report','test-results','.claude','.codex','.idea','.vscode','.pnpm-store','.yarn','tmp','temp','target','bin','obj','__pycache__','.venv','venv','env','.env','.tox','.mypy_cache','.pytest_cache','.ruff_cache','__pypackages__','.eggs','__macosx']);
@@ -5693,6 +5732,11 @@
     return excl?base+'|excl:'+excl:base;
 }
 
+function githubSourceKeyForLoadedAnalysis(owner,repo,data,pendingPatterns){
+    var patterns=data&&data.excludePatterns!=null?data.excludePatterns:pendingPatterns;
+    return githubCacheSourceKey(owner,repo,patterns);
+}
+
 function cachedAnalysisMatchesExcludes(record,patterns){
     if(!record)return false;
     var wanted=normalizeExcludeKey(patterns);
@@ -5714,6 +5758,45 @@
     return Math.min(8,1/zoom);
 }
 
+function nodeReplacedByCard(path,cardPaths){
+    return !!(cardPaths&&cardPaths.has(path));
+}
+
+function unburyNodesFromCards(nodes,cardPaths,sizesByPath,pad){
+    pad=pad==null?36:pad;
+    var list=nodes||[];
+    var cards=[];
+    list.forEach(function(node){
+        if(!node||!cardPaths||!cardPaths.has(node.id)||!isFinite(node.x)||!isFinite(node.y))return;
+        cards.push(node);
+    });
+    if(!cards.length)return list;
+    var pass;
+    for(pass=0;pass<4;pass++){
+        var moved=false;
+        list.forEach(function(node){
+            if(!node||(cardPaths&&cardPaths.has(node.id))||!isFinite(node.x)||!isFinite(node.y))return;
+            cards.forEach(function(card){
+                var size=(sizesByPath&&sizesByPath[card.id])||codeCardSize(null);
+                var hw=size.width/2+pad,hh=size.height/2+pad;
+                var dx=node.x-card.x,dy=node.y-card.y;
+                if(Math.abs(dx)>=hw||Math.abs(dy)>=hh)return;
+                var left=hw+dx,right=hw-dx,top=hh+dy,bottom=hh-dy;
+                var min=Math.min(left,right,top,bottom);
+                if(min===left)node.x=card.x-hw;
+                else if(min===right)node.x=card.x+hw;
+                else if(min===top)node.y=card.y-hh;
+                else node.y=card.y+hh;
+                if(node.fx!=null)node.fx=node.x;
+                if(node.fy!=null)node.fy=node.y;
+                moved=true;
+            });
+        });
+        if(!moved)break;
+    }
+    return list;
+}
+
 function githubZipDownloadUrl(owner,repo){
     return 'https://github.com/'+encodeURIComponent(owner)+'/'+encodeURIComponent(repo)+'/archive/HEAD.zip';
 }
@@ -5743,9 +5826,78 @@
     return Array.from(linked);
 }
 
+var CODE_CARD_MAX=12;
+
+function defaultCodeViewSeed(data,folderFilter){
+    if(!data||!data.files||!data.files.length)return null;
+    var filtered=folderFilter?data.files.filter(function(f){return f.folder===folderFilter||f.folder.startsWith(folderFilter+'/');}):data.files;
+    if(!filtered.length)return null;
+    var byPath=Object.create(null);
+    filtered.forEach(function(f){byPath[f.path]=f;});
+    var counts=Object.create(null);
+    (data.connections||[]).forEach(function(c){
+        var src=typeof c.source==='object'?c.source.id:c.source;
+        var tgt=typeof c.target==='object'?c.target.id:c.target;
+        if(byPath[src])counts[src]=(counts[src]||0)+1;
+        if(byPath[tgt])counts[tgt]=(counts[tgt]||0)+1;
+    });
+    var best=filtered[0];
+    var bestN=counts[best.path]||0;
+    filtered.forEach(function(file){
+        var n=counts[file.path]||0;
+        if(n>bestN){best=file;bestN=n;}
+    });
+    return best.path;
+}
+
+function fileMatchesFolderFilter(file,folderFilter){
+    if(!folderFilter)return true;
+    if(!file)return false;
+    return file.folder===folderFilter||(!!file.folder&&file.folder.startsWith(folderFilter+'/'));
+}
+
+function pathMatchesFolderFilter(path,data,folderFilter){
+    if(!folderFilter)return true;
+    if(!data||!data.files||!path)return false;
+    for(var i=0;i<data.files.length;i++){
+        if(data.files[i].path===path)return fileMatchesFolderFilter(data.files[i],folderFilter);
+    }
+    return false;
+}
+
+function folderFilterAfterCodeNav(path,data,folderFilter){
+    if(pathMatchesFolderFilter(path,data,folderFilter))return folderFilter||null;
+    return null;
+}
+
+function codeViewSeedPath(selectedPath,data,folderFilter){
+    if(!data||!data.files||!data.files.length)return null;
+    if(selectedPath){
+        var selected=null;
+        for(var i=0;i<data.files.length;i++){
+            if(data.files[i].path===selectedPath){selected=data.files[i];break;}
+        }
+        if(selected&&fileMatchesFolderFilter(selected,folderFilter))return selectedPath;
+    }
+    return defaultCodeViewSeed(data,folderFilter);
+}
+
+function shouldSeedOpenedCodeCards(inCode,sessionActive,openedPaths){
+    if(!inCode)return false;
+    if(!sessionActive)return true;
+    return !(openedPaths&&openedPaths.length);
+}
+
+function codeFileNavOpensCard(vizType){
+    return vizType==='code';
+}
+
+function graphSvgExportEnabled(vizType){
+    return vizType!=='code';
+}
+
 function collectVisibleCodeFiles(selectedPath,data,folderFilter,limit){
     if(!data||!data.files)return[];
-    var max=limit==null?4:limit;
     var filtered=folderFilter?data.files.filter(function(f){return f.folder===folderFilter||f.folder.startsWith(folderFilter+'/');}):data.files;
     var byPath=Object.create(null);
     filtered.forEach(function(f){byPath[f.path]=f;});
@@ -5755,10 +5907,846 @@
         if(!file||ordered.some(function(f){return f.path===path;}))return;
         ordered.push(file);
     }
+    if(!selectedPath||!byPath[selectedPath])selectedPath=defaultCodeViewSeed(data,folderFilter);
     if(selectedPath)add(selectedPath);
-    getConnectedFilePaths(selectedPath,data.connections).forEach(add);
-    if(!ordered.length&&filtered.length)add(filtered[0].path);
-    return ordered.slice(0,max);
+    getConnectedFilePaths(selectedPath,data.connections).slice().sort(function(a,b){
+        var loadedA=fileHasLoadedSource(byPath[a])?0:1;
+        var loadedB=fileHasLoadedSource(byPath[b])?0:1;
+        return loadedA-loadedB;
+    }).forEach(add);
+    var max=limit==null?CODE_CARD_MAX:Number(limit);
+    if(!isFinite(max))return ordered;
+    return ordered.slice(0,Math.max(0,max));
+}
+
+function countVisibleCodeFiles(selectedPath,data,folderFilter){
+    return collectVisibleCodeFiles(selectedPath,data,folderFilter,Infinity).length;
+}
+
+function noteCodeCardPointerEnd(moved){
+    return {select:!moved,ignoreNextClick:!!moved};
+}
+
+function consumeCodeCardClick(ignoreNextClick){
+    return {ignore:!!ignoreNextClick,ignoreNextClick:false};
+}
+
+function codeCardDragDelta(clientX,clientY,startX,startY,scale,threshold){
+    var screenX=(Number(clientX)||0)-(Number(startX)||0);
+    var screenY=(Number(clientY)||0)-(Number(startY)||0);
+    var k=Number(scale);
+    if(!isFinite(k)||k<=0)k=1;
+    var limit=threshold==null?3:Number(threshold);
+    if(!isFinite(limit))limit=3;
+    return{
+        x:screenX/k,
+        y:screenY/k,
+        screenX:screenX,
+        screenY:screenY,
+        moved:Math.abs(screenX)+Math.abs(screenY)>limit
+    };
+}
+
+var CODE_CARD_MIN_WIDTH=320;
+var CODE_CARD_MAX_WIDTH=720;
+var CODE_CARD_MIN_HEIGHT=160;
+var CODE_CARD_MAX_HEIGHT=1840;
+var CODE_CARD_LINE_HEIGHT=19;
+var CODE_CARD_CHAR_WIDTH=7;
+var CODE_CARD_HEAD_HEIGHT=42;
+var CODE_CARD_BODY_PAD=16;
+var CODE_CARD_GUTTER=72;
+
+function codeCardContentMetrics(file){
+    var content=file&&typeof file.content==='string'?file.content:'';
+    var lines=content?content.split('\n'):[''];
+    var maxLineChars=0;
+    var lineChars=[];
+    for(var i=0;i<lines.length;i++){
+        var n=String(lines[i]).length;
+        lineChars.push(n);
+        if(n>maxLineChars)maxLineChars=n;
+    }
+    return{lines:Math.max(1,lines.length),maxLineChars:maxLineChars,lineChars:lineChars};
+}
+
+var CODE_CARD_WIDTH=440;
+
+function normalizeCodeCardPrefs(prefs){
+    prefs=prefs||{};
+    return{expand:!!prefs.expand,wrap:!!prefs.wrap};
+}
+
+function codeCardWrapColumns(){
+    return Math.max(1,Math.floor((CODE_CARD_WIDTH-CODE_CARD_GUTTER-CODE_CARD_BODY_PAD)/CODE_CARD_CHAR_WIDTH));
+}
+
+function codeCardWrappedLineCount(metrics,prefs){
+    metrics=metrics||codeCardContentMetrics(null);
+    prefs=normalizeCodeCardPrefs(prefs);
+    if(!prefs.wrap)return Math.max(1,metrics.lines||1);
+    var cols=codeCardWrapColumns();
+    var chars=metrics.lineChars||[];
+    var count=0;
+    if(!chars.length)return Math.max(1,metrics.lines||1);
+    for(var i=0;i<chars.length;i++){
+        count+=Math.max(1,Math.ceil((chars[i]||0)/cols)||1);
+    }
+    return Math.max(1,count);
+}
+
+function codeCardVisualLineIndex(file,line,prefs){
+    var n=Math.max(1,Number(line)||1);
+    prefs=normalizeCodeCardPrefs(prefs);
+    if(!prefs.wrap)return n;
+    var metrics=codeCardContentMetrics(file);
+    var cols=codeCardWrapColumns();
+    var chars=metrics.lineChars||[];
+    var visual=0;
+    var lim=Math.min(chars.length,n-1);
+    for(var i=0;i<lim;i++){
+        visual+=Math.max(1,Math.ceil((chars[i]||0)/cols)||1);
+    }
+    return visual+1;
+}
+
+function codeCardNaturalWidth(metrics){
+    metrics=metrics||{maxLineChars:0};
+    return CODE_CARD_GUTTER+CODE_CARD_BODY_PAD+(metrics.maxLineChars||0)*CODE_CARD_CHAR_WIDTH;
+}
+
+function codeCardSize(file,prefs){
+    prefs=normalizeCodeCardPrefs(prefs);
+    var metrics=codeCardContentMetrics(file);
+    var width=CODE_CARD_WIDTH;
+    var naturalWidth=codeCardNaturalWidth(metrics);
+    var visualLines=codeCardWrappedLineCount(metrics,prefs);
+    var naturalHeight=CODE_CARD_HEAD_HEIGHT+CODE_CARD_BODY_PAD+visualLines*CODE_CARD_LINE_HEIGHT;
+    var height=Math.max(CODE_CARD_MIN_HEIGHT,prefs.expand?naturalHeight:Math.min(CODE_CARD_MAX_HEIGHT,naturalHeight));
+    var heightClipped=!prefs.expand&&naturalHeight>CODE_CARD_MAX_HEIGHT;
+    var widthClipped=!prefs.wrap&&naturalWidth>width;
+    return{width:width,height:height,clipped:heightClipped||widthClipped,expand:prefs.expand,wrap:prefs.wrap,naturalHeight:naturalHeight,naturalWidth:naturalWidth};
+}
+
+var CODE_CARD_RESIZE_MAX_WIDTH=1200;
+
+function clampCodeCardResize(width,height,prefs){
+    prefs=normalizeCodeCardPrefs(prefs);
+    var w=Math.max(CODE_CARD_MIN_WIDTH,Math.min(CODE_CARD_RESIZE_MAX_WIDTH,Number(width)||CODE_CARD_WIDTH));
+    var h=Math.max(CODE_CARD_MIN_HEIGHT,Number(height)||CODE_CARD_MIN_HEIGHT);
+    if(!prefs.expand)h=Math.min(CODE_CARD_MAX_HEIGHT,h);
+    return{width:w,height:h};
+}
+
+function applyCodeCardUserSize(base,override){
+    base=base||codeCardSize(null);
+    if(!override)return base;
+    var next=clampCodeCardResize(override.width!=null?override.width:base.width,override.height!=null?override.height:base.height,base);
+    var heightClipped=!base.expand&&(base.naturalHeight||0)>next.height;
+    var widthClipped=!base.wrap&&(base.naturalWidth||0)>next.width;
+    return Object.assign({},base,{width:next.width,height:next.height,clipped:heightClipped||widthClipped});
+}
+
+function codeCardResizeDelta(clientX,clientY,startX,startY,startW,startH,scale,edge){
+    var k=Number(scale);
+    if(!isFinite(k)||k<=0)k=1;
+    var dx=((Number(clientX)||0)-(Number(startX)||0))/k;
+    var dy=((Number(clientY)||0)-(Number(startY)||0))/k;
+    var width=Number(startW)||CODE_CARD_WIDTH;
+    var height=Number(startH)||CODE_CARD_MIN_HEIGHT;
+    if(edge==='e'||edge==='se')width+=dx;
+    if(edge==='s'||edge==='se')height+=dy;
+    return{width:width,height:height,dx:dx,dy:dy};
+}
+
+function graphFolderCenters(folders,width,height,options){
+    options=options||{};
+    var list=[];
+    (folders||[]).forEach(function(f){if(f!=null&&list.indexOf(f)<0)list.push(f);});
+    var out=Object.create(null);
+    if(!list.length)return out;
+    var cols=Math.max(2,Math.ceil(Math.sqrt(list.length)));
+    var rows=Math.max(1,Math.ceil(list.length/cols));
+    var minW=options.minCellW==null?0:Number(options.minCellW)||0;
+    var minH=options.minCellH==null?0:Number(options.minCellH)||0;
+    var cw=Math.max(minW,(Number(width)||800)/(cols+1));
+    var ch=Math.max(minH,(Number(height)||600)/(rows+1));
+    list.forEach(function(f,i){
+        out[f]={x:(i%cols+1)*cw,y:(Math.floor(i/cols)+1)*ch};
+    });
+    return out;
+}
+
+function parkLeftoverCodeNodes(nodes,cardPaths,centers){
+    (nodes||[]).forEach(function(node){
+        if(!node)return;
+        if(cardPaths&&cardPaths.has(node.id))return;
+        if(node.fx!=null&&isFinite(Number(node.fx)))return;
+        var c=centers&&centers[node.folder||'root'];
+        if(!c||!isFinite(c.x)||!isFinite(c.y))return;
+        node.x=c.x;
+        node.y=c.y;
+    });
+    return nodes;
+}
+
+function boxesOverlap(a,b,gap){
+    if(!a||!b)return false;
+    gap=gap==null?0:Number(gap)||0;
+    return !(a.x>b.x+b.width+gap||a.x+a.width<b.x-gap||a.y>b.y+b.height+gap||a.y+a.height<b.y-gap);
+}
+
+function codeCardCollisionRadius(size){
+    size=size||codeCardSize(null);
+    return Math.round(Math.hypot(size.width,size.height)/2)+18;
+}
+
+function liveCodeCollideRadius(node,size){
+    if(size)return codeCardCollisionRadius(size);
+    return Math.max(8,Math.min(24,5+((node&&node.fnCount)||0)*0.8))+12;
+}
+
+function layoutCodeCardsByFolder(files,sizesByPath,options){
+    options=options||{};
+    var gapX=options.gapX==null?56:options.gapX;
+    var gapY=options.gapY==null?48:options.gapY;
+    var groupGapX=options.groupGapX==null?96:options.groupGapX;
+    var groupGapY=options.groupGapY==null?120:options.groupGapY;
+    var originX=options.originX==null?80:options.originX;
+    var originY=options.originY==null?80:options.originY;
+    var maxRowWidth=options.maxRowWidth==null?2400:options.maxRowWidth;
+    var groups=Object.create(null);
+    var folderOrder=[];
+    (files||[]).forEach(function(file){
+        var folder=file&&file.folder?file.folder:'root';
+        if(!groups[folder]){groups[folder]=[];folderOrder.push(folder);}
+        groups[folder].push(file);
+    });
+    var placed=Object.create(null);
+    var gx=originX,gy=originY,rowH=0;
+    folderOrder.forEach(function(folder){
+        var items=groups[folder];
+        var cols=Math.max(1,Math.ceil(Math.sqrt(items.length)));
+        var colWidths=[],rowHeights=[];
+        items.forEach(function(file,i){
+            var size=(sizesByPath&&sizesByPath[file.path])||codeCardSize(file);
+            var col=i%cols,row=Math.floor(i/cols);
+            colWidths[col]=Math.max(colWidths[col]||0,size.width);
+            rowHeights[row]=Math.max(rowHeights[row]||0,size.height);
+        });
+        var colX=[],x=0;
+        colWidths.forEach(function(w){colX.push(x);x+=w+gapX;});
+        var rowY=[],y=36;
+        rowHeights.forEach(function(h){rowY.push(y);y+=h+gapY;});
+        var groupW=Math.max(0,x-gapX);
+        var groupH=Math.max(0,y-gapY);
+        if(gx>originX&&gx+groupW>originX+maxRowWidth){
+            gx=originX;
+            gy+=rowH+groupGapY;
+            rowH=0;
+        }
+        items.forEach(function(file,i){
+            var size=(sizesByPath&&sizesByPath[file.path])||codeCardSize(file);
+            var col=i%cols,row=Math.floor(i/cols);
+            placed[file.path]={
+                x:gx+colX[col]+size.width/2,
+                y:gy+rowY[row]+size.height/2,
+                folder:folder
+            };
+        });
+        gx+=groupW+groupGapX;
+        rowH=Math.max(rowH,groupH);
+    });
+    return placed;
+}
+
+function pathIsFlagged(map,path){
+    if(!path||!map)return false;
+    if(typeof map.has==='function')return map.has(path);
+    return !!map[path];
+}
+
+function hiddenOpenedCodePaths(paths,data,folderFilter){
+    var hidden=Object.create(null);
+    if(!folderFilter)return hidden;
+    var visible=Object.create(null);
+    filesForOpenedCodePaths(paths,data,folderFilter).forEach(function(file){
+        if(file&&file.path)visible[file.path]=true;
+    });
+    (paths||[]).forEach(function(path){
+        if(path&&!visible[path])hidden[path]=true;
+    });
+    return hidden;
+}
+
+function codeCardPlacementKeepSet(openedPaths,visibleFiles){
+    var keep=Object.create(null);
+    (openedPaths||[]).forEach(function(path){if(path)keep[path]=true;});
+    (visibleFiles||[]).forEach(function(file){if(file&&file.path)keep[file.path]=true;});
+    return keep;
+}
+
+function pruneCodeCardPlacements(placements,keep){
+    var departed=Object.create(null);
+    Object.keys(placements||{}).forEach(function(path){
+        if(keep&&keep[path])return;
+        departed[path]=true;
+        delete placements[path];
+    });
+    return departed;
+}
+
+function evictHiddenCodeCards(list,hidden,count){
+    var need=Number(count);
+    if(!isFinite(need)||need<=0)return (list||[]).slice();
+    var removed=0;
+    return (list||[]).filter(function(path){
+        if(removed>=need)return true;
+        if(pathIsFlagged(hidden,path)){
+            removed++;
+            return false;
+        }
+        return true;
+    });
+}
+
+function openCodeCardPaths(prev,path,limit,replace,hidden){
+    var list=(prev||[]).slice();
+    if(!path)return list;
+    if(list.indexOf(path)>=0)return list;
+    var max=limit==null?CODE_CARD_MAX:Number(limit);
+    if(isFinite(max)&&list.length>=max){
+        var need=list.length-max+1;
+        if(hidden)list=evictHiddenCodeCards(list,hidden,need);
+        if(list.length>=max){
+            if(!replace)return list;
+            list=list.slice(Math.max(0,list.length-max+1));
+        }
+    }
+    list.push(path);
+    return list;
+}
+
+function resolveOpenCodeCard(prev,path,limit,replace,hidden){
+    var before=prev||[];
+    var next=openCodeCardPaths(before,path,limit,replace,hidden);
+    var already=!!(path&&before.indexOf(path)>=0);
+    var inserted=!!(path&&!already&&next.indexOf(path)>=0);
+    return{paths:next,already:already,inserted:inserted,opened:already||inserted};
+}
+
+function ensureCodeViewOpenedPaths(openedPaths,selectedPath,data,folderFilter){
+    var seed=codeViewSeedPath(selectedPath,data,folderFilter);
+    if(!seed)return{paths:openedPaths||[],seed:null,opened:false,inserted:false};
+    var resolved=resolveOpenCodeCard(openedPaths,seed,null,true,hiddenOpenedCodePaths(openedPaths,data,folderFilter));
+    return{paths:resolved.paths,seed:seed,opened:resolved.opened,inserted:resolved.inserted};
+}
+
+function filesForOpenedCodePaths(paths,data,folderFilter){
+    if(!data||!data.files)return[];
+    var filtered=folderFilter?data.files.filter(function(f){return f.folder===folderFilter||f.folder.startsWith(folderFilter+'/');}):data.files;
+    var byPath=Object.create(null);
+    filtered.forEach(function(file){byPath[file.path]=file;});
+    return(paths||[]).map(function(path){return byPath[path];}).filter(Boolean);
+}
+
+function appendCodeCardPlacement(placements,file,size,options){
+    options=options||{};
+    var gapX=options.gapX==null?88:options.gapX;
+    var gapY=options.gapY==null?36:options.gapY;
+    var originX=options.originX==null?80:options.originX;
+    var originY=options.originY==null?72:options.originY;
+    var next=Object.assign(Object.create(null),placements||{});
+    if(!file||!file.path)return next;
+    size=size||codeCardSize(file);
+    var folder=file.folder||'root';
+    var prev=next[file.path];
+    if(prev){
+        next[file.path]={
+            left:prev.left,
+            top:prev.top,
+            x:prev.left+size.width/2,
+            y:prev.top+size.height/2,
+            width:size.width,
+            height:size.height,
+            folder:prev.folder||folder
+        };
+        return reflowUnpinnedCodeCards(next,options.pinnedPaths,options);
+    }
+    var same=[];
+    var folderLeft=null;
+    Object.keys(next).forEach(function(id){
+        var item=next[id];
+        if(!item||item.folder!==folder)return;
+        same.push(item);
+        folderLeft=folderLeft==null?item.left:Math.min(folderLeft,item.left);
+    });
+    var left,top;
+    if(!same.length){
+        var center=options.centers&&options.centers[folder];
+        if(center&&isFinite(center.x)&&isFinite(center.y)){
+            left=center.x-size.width/2;
+            top=center.y-size.height/2;
+        }else{
+            var maxRight=originX;
+            Object.keys(next).forEach(function(id){
+                var item=next[id];
+                if(!item)return;
+                maxRight=Math.max(maxRight,item.left+item.width+gapX);
+            });
+            left=Object.keys(next).length?maxRight:originX;
+            top=originY;
+        }
+    }else{
+        left=folderLeft;
+        var maxBottom=originY;
+        same.forEach(function(item){maxBottom=Math.max(maxBottom,item.top+item.height+gapY);});
+        top=maxBottom;
+    }
+    next[file.path]={
+        left:left,
+        top:top,
+        x:left+size.width/2,
+        y:top+size.height/2,
+        width:size.width,
+        height:size.height,
+        folder:folder
+    };
+    return reflowUnpinnedCodeCards(next,options.pinnedPaths,options);
+}
+
+function codePathIsPinned(pinnedPaths,path){
+    if(!path||!pinnedPaths)return false;
+    if(typeof pinnedPaths.has==='function')return pinnedPaths.has(path);
+    return !!pinnedPaths[path];
+}
+
+function reflowUnpinnedCodeCards(placements,pinnedPaths,options){
+    options=options||{};
+    var gapY=options.gapY==null?36:options.gapY;
+    var originY=options.originY==null?72:options.originY;
+    var next=placements||Object.create(null);
+    var byFolder=Object.create(null);
+    Object.keys(next).forEach(function(path){
+        var item=next[path];
+        if(!item)return;
+        var folder=item.folder||'root';
+        if(!byFolder[folder])byFolder[folder]=[];
+        byFolder[folder].push(path);
+    });
+    Object.keys(byFolder).forEach(function(folder){
+        var paths=byFolder[folder];
+        paths.sort(function(a,b){
+            var dy=(next[a].top||0)-(next[b].top||0);
+            if(dy)return dy;
+            return a<b?-1:a>b?1:0;
+        });
+        var center=options.centers&&options.centers[folder];
+        var startY=originY;
+        if(center&&isFinite(center.y)){
+            var firstH=next[paths[0]]&&next[paths[0]].height;
+            startY=center.y-((firstH||CODE_CARD_MIN_HEIGHT)/2);
+        }
+        var cursor=startY;
+        paths.forEach(function(path){
+            var item=Object.assign({},next[path]);
+            next[path]=item;
+            if(codePathIsPinned(pinnedPaths,path)){
+                item.x=item.left+item.width/2;
+                item.y=item.top+item.height/2;
+                cursor=Math.max(cursor,item.top+item.height+gapY);
+                return;
+            }
+            item.top=cursor;
+            item.x=item.left+item.width/2;
+            item.y=item.top+item.height/2;
+            cursor=item.top+item.height+gapY;
+        });
+    });
+    return next;
+}
+
+function codeCardSymbolLine(file,name){
+    if(!file||!name)return null;
+    var fns=file.functions||[];
+    var i;
+    for(i=0;i<fns.length;i++){
+        if(fns[i]&&fns[i].name===name&&fns[i].line)return fns[i].line;
+    }
+    var content=String(file.content||'');
+    if(!content)return null;
+    var escaped=String(name).replace(/[.*+?^${}()|[\]\\]/g,'\\$&');
+    var re=new RegExp('(?:^|[^A-Za-z0-9_$])'+escaped+'(?:[^A-Za-z0-9_$]|$)');
+    var lines=content.split('\n');
+    for(i=0;i<lines.length;i++){
+        if(re.test(lines[i]))return i+1;
+    }
+    return null;
+}
+
+function codeCardLineY(size,line,file,prefs){
+    var n=Math.max(1,Number(line)||1);
+    var visual=file?codeCardVisualLineIndex(file,n,prefs):n;
+    return CODE_CARD_HEAD_HEIGHT+8+(visual-0.5)*CODE_CARD_LINE_HEIGHT;
+}
+
+function codeLinkPrefersVertical(src,tgt){
+    if(!src||!tgt||!isFinite(src.x)||!isFinite(tgt.x))return false;
+    return Math.abs(src.x-tgt.x)<1;
+}
+
+function codeEdgeBezier(x1,y1,x2,y2){
+    var dxAbs=Math.abs(x2-x1);
+    var dyAbs=Math.abs(y2-y1);
+    if(dxAbs<1&&dyAbs>0){
+        var vspan=Math.max(80,dyAbs*0.45);
+        var dy=(y2<y1?-1:1)*vspan;
+        return 'M'+x1+','+y1+'C'+x1+','+(y1+dy)+' '+x2+','+(y2-dy)+' '+x2+','+y2;
+    }
+    var span=Math.max(80,dxAbs*0.45);
+    var dx=(x2<x1?-1:1)*span;
+    return 'M'+x1+','+y1+'C'+(x1+dx)+','+y1+' '+(x2-dx)+','+y2+' '+x2+','+y2;
+}
+
+function layoutOpenedCodeCards(files,prev,sizesByPath,options){
+    var placements=Object.assign(Object.create(null),prev||{});
+    (files||[]).forEach(function(file){
+        placements=appendCodeCardPlacement(placements,file,sizesByPath&&file?sizesByPath[file.path]:null,options);
+    });
+    return placements;
+}
+
+function codeViewWheelAction(event){
+    if(event&&(event.ctrlKey||event.metaKey))return 'zoom';
+    return 'pan';
+}
+
+function codeViewWheelPanDelta(deltaX,deltaY,scale){
+    var k=Number(scale);
+    if(!isFinite(k)||k<=0)k=1;
+    return{x:-(Number(deltaX)||0)/k,y:-(Number(deltaY)||0)/k};
+}
+
+function nextCodeSourceReads(neededPaths,inFlight,failed){
+    inFlight=inFlight||Object.create(null);
+    return(neededPaths||[]).filter(function(path){
+        return !!path&&!inFlight[path]&&!pathIsFlagged(failed,path);
+    });
+}
+
+function codeCardAnchorY(node,size,line){
+    size=size||codeCardSize(null);
+    var y=line?codeCardLineY(size,line):CODE_CARD_HEAD_HEIGHT+(size.height-CODE_CARD_HEAD_HEIGHT)/2;
+    if(!isFinite(y))y=size.height/2;
+    y=Math.max(CODE_CARD_HEAD_HEIGHT+6,Math.min(size.height-8,y));
+    return (node&&isFinite(node.y)?node.y:0)-size.height/2+y;
+}
+
+function codeCardLinkEndpoint(node,size,file,other,fn,isCard,vertical){
+    if(!isCard)return{x:node.x,y:node.y};
+    size=size||codeCardSize(file);
+    if(vertical){
+        var top=node.y-size.height/2;
+        var bottom=node.y+size.height/2;
+        var towardY=other&&isFinite(other.y)?other.y:bottom+1;
+        return{x:node.x,y:towardY<node.y?top:bottom};
+    }
+    var line=fn?codeCardSymbolLine(file,fn):null;
+    var y=codeCardAnchorY(node,size,line);
+    var left=node.x-size.width/2;
+    var right=node.x+size.width/2;
+    var toward=other&&isFinite(other.x)?other.x:right+1;
+    return{x:toward<node.x?left:right,y:y};
+}
+
+function codeCardLinkPath(link,sizesByPath,filesByPath,cardPaths){
+    var src=link&&link.source;
+    var tgt=link&&link.target;
+    if(!src||!tgt||typeof src!=='object'||typeof tgt!=='object')return null;
+    var srcIsCard=!!(cardPaths&&cardPaths.has(src.id));
+    var tgtIsCard=!!(cardPaths&&cardPaths.has(tgt.id));
+    if(!srcIsCard&&!tgtIsCard)return null;
+    if(!isFinite(src.x)||!isFinite(src.y)||!isFinite(tgt.x)||!isFinite(tgt.y))return null;
+    var srcFile=filesByPath&&filesByPath[src.id];
+    var tgtFile=filesByPath&&filesByPath[tgt.id];
+    var srcSize=(sizesByPath&&sizesByPath[src.id])||codeCardSize(srcFile);
+    var tgtSize=(sizesByPath&&sizesByPath[tgt.id])||codeCardSize(tgtFile);
+    var fn=link.fn;
+    var vertical=codeLinkPrefersVertical(src,tgt);
+    var p1=codeCardLinkEndpoint(src,srcSize,srcFile,tgt,fn,srcIsCard,vertical);
+    var p2=codeCardLinkEndpoint(tgt,tgtSize,tgtFile,src,fn,tgtIsCard,vertical);
+    return codeEdgeBezier(p1.x,p1.y,p2.x,p2.y);
+}
+
+function liveGraphNodeXY(node){
+    if(!node)return null;
+    var x=node.fx!=null&&isFinite(Number(node.fx))?Number(node.fx):Number(node.x);
+    var y=node.fy!=null&&isFinite(Number(node.fy))?Number(node.fy):Number(node.y);
+    if(!isFinite(x)||!isFinite(y))return null;
+    return{x:x,y:y};
+}
+
+function readCodeCardWorldBox(card){
+    if(!card||!card.style)return null;
+    var x=parseFloat(card.style.left);
+    var y=parseFloat(card.style.top);
+    var width=parseFloat(card.style.width);
+    var height=parseFloat(card.style.height);
+    if(!isFinite(x)||!isFinite(y)||!isFinite(width)||!isFinite(height)||width<=0||height<=0)return null;
+    return{x:x,y:y,width:width,height:height};
+}
+
+function readCodeCardWorldBoxes(layer){
+    var out=Object.create(null);
+    if(!layer||!layer.querySelectorAll)return out;
+    var cards=layer.querySelectorAll('[data-code-card]');
+    Array.prototype.forEach.call(cards,function(card){
+        var path=card.getAttribute('data-code-card');
+        var box=readCodeCardWorldBox(card);
+        if(path&&box)out[path]=box;
+    });
+    return out;
+}
+
+function codeFolderMemberBox(node,sizesByPath,boxesByPath,fallbackR){
+    if(!node)return null;
+    if(boxesByPath&&boxesByPath[node.id])return boxesByPath[node.id];
+    var xy=liveGraphNodeXY(node);
+    if(!xy)return null;
+    var size=sizesByPath&&sizesByPath[node.id];
+    if(size&&isFinite(size.width)&&isFinite(size.height)){
+        return{x:xy.x-size.width/2,y:xy.y-size.height/2,width:size.width,height:size.height};
+    }
+    if(fallbackR){
+        return{x:xy.x-fallbackR,y:xy.y-fallbackR,width:fallbackR*2,height:fallbackR*2};
+    }
+    size=codeCardSize(null);
+    return{x:xy.x-size.width/2,y:xy.y-size.height/2,width:size.width,height:size.height};
+}
+
+function unionPaddedBoxes(boxes,pad,labelExtra){
+    pad=pad==null?24:pad;
+    labelExtra=labelExtra==null?22:labelExtra;
+    var minX=Infinity,minY=Infinity,maxX=-Infinity,maxY=-Infinity;
+    (boxes||[]).forEach(function(box){
+        if(!box||!isFinite(box.x)||!isFinite(box.y)||!isFinite(box.width)||!isFinite(box.height))return;
+        minX=Math.min(minX,box.x);
+        minY=Math.min(minY,box.y);
+        maxX=Math.max(maxX,box.x+box.width);
+        maxY=Math.max(maxY,box.y+box.height);
+    });
+    if(!isFinite(minX))return null;
+    return{x:minX-pad,y:minY-pad-labelExtra,width:maxX-minX+pad*2,height:maxY-minY+pad*2+labelExtra};
+}
+
+function codeFolderCardBounds(nodes,sizesByPath,pad,boxesByPath){
+    var boxes=[];
+    (nodes||[]).forEach(function(node){
+        var box=codeFolderMemberBox(node,sizesByPath,boxesByPath,0);
+        if(box)boxes.push(box);
+    });
+    return unionPaddedBoxes(boxes,pad,22);
+}
+
+function codeFolderHullsByFolder(groups,sizesByPath,pad,boxesByPath){
+    var out=Object.create(null);
+    Object.keys(groups||{}).forEach(function(folder){
+        var group=groups[folder]||{};
+        out[folder]=codeFolderHullBounds(group.cards||[],group.leftover||[],sizesByPath,pad,boxesByPath);
+    });
+    return out;
+}
+
+function codeFolderHullBounds(cardNodes,leftoverNodes,sizesByPath,pad,boxesByPath){
+    var boxes=[];
+    (cardNodes||[]).forEach(function(node){
+        var box=codeFolderMemberBox(node,sizesByPath,boxesByPath,0);
+        if(box)boxes.push(box);
+    });
+    var cardUnion=unionPaddedBoxes(boxes,0,0);
+    (leftoverNodes||[]).forEach(function(node){
+        var box=codeFolderMemberBox(node,sizesByPath,null,30);
+        if(!box)return;
+        if(cardUnion&&!boxesOverlap(box,cardUnion,240))return;
+        boxes.push(box);
+    });
+    return unionPaddedBoxes(boxes,pad==null?40:pad,22);
+}
+
+function codeCanvasTransformStyle(transform){
+    var t=transform||{};
+    var k=Number(t.k);
+    if(!isFinite(k)||k<=0)k=1;
+    var x=Number(t.x);
+    if(!isFinite(x))x=0;
+    var y=Number(t.y);
+    if(!isFinite(y))y=0;
+    return 'translate('+x+'px,'+y+'px) scale('+k+')';
+}
+
+function codeCardAnchorStyle(node,size){
+    size=size||codeCardSize(null);
+    var xy=liveGraphNodeXY(node);
+    if(!xy)return{visibility:'hidden',left:'0px',top:'0px'};
+    return{
+        visibility:'visible',
+        left:(xy.x-size.width/2)+'px',
+        top:(xy.y-size.height/2)+'px'
+    };
+}
+
+var CODE_VIEW_MIN_FIT_SCALE=0.4;
+var CODE_VIEW_MAX_FIT_SCALE=1.15;
+
+function connectionIdentity(connection){
+    var src=connection&&(typeof connection.source==='object'?connection.source.id:connection.source);
+    var tgt=connection&&(typeof connection.target==='object'?connection.target.id:connection.target);
+    var count=connection&&connection.count!=null?connection.count:1;
+    return String(src||'')+'\t'+String(tgt||'')+'\t'+String((connection&&connection.fn)||'')+'\t'+String(count);
+}
+
+function fileGraphIdentity(file){
+    if(!file)return '';
+    var fnCount=file.functions&&file.functions.length?file.functions.length:0;
+    return [file.path||'',file.name||'',file.folder||'',file.layer||'',file.churn||0,fnCount].join('\t');
+}
+
+function analysisGraphKey(data){
+    if(!data||!data.files)return '';
+    var files=data.files.map(fileGraphIdentity).join('\n');
+    var connections=(data.connections||[]).map(connectionIdentity).sort().join('\n');
+    return files+'\n'+connections;
+}
+
+function graphStructureKey(data,folderFilter){
+    var graph=analysisGraphKey(data);
+    if(!graph)return '';
+    return String(folderFilter||'')+'\n'+graph;
+}
+
+function codeViewSceneKey(data,folderFilter,vizType,source){
+    return analysisHydrationId(source,data)+'|'+String(folderFilter||'')+'|'+String(vizType||'');
+}
+
+function analysisHydrationIdFromParts(source,graphKey){
+    source=source||{};
+    return [source.sourceType||'',source.sourceKey||'',graphKey||''].join('\0');
+}
+
+function analysisHydrationId(source,data){
+    return analysisHydrationIdFromParts(source,analysisGraphKey(data));
+}
+
+function loadedAnalysisSourceIdentity(options){
+    options=options||{};
+    if(options.localSourceKind==='folder')return{sourceType:'folder',sourceKey:options.folderKey||'local-folder'};
+    if(options.localSourceKind==='zip')return{sourceType:'zip',sourceKey:options.zipKey||'zip'};
+    if(options.localSourceKind==='cli')return{sourceType:'cli',sourceKey:options.cliRoot||'cli'};
+    if(options.githubOwner&&options.githubRepo)return{sourceType:'github',sourceKey:options.githubKey||(options.githubOwner+'/'+options.githubRepo)};
+    if(options.cliOk)return{sourceType:'cli',sourceKey:options.cliRoot||'cli'};
+    return null;
+}
+
+function hydrationRequestIsCurrent(hydrationId,currentId){
+    if(hydrationId==null||currentId==null)return true;
+    return hydrationId===currentId;
+}
+
+function hydratedSourceIsCurrent(update,currentId){
+    if(!update||!update.path||typeof update.content!=='string')return false;
+    return hydrationRequestIsCurrent(update.hydrationId,currentId);
+}
+
+function preserveGraphNodeState(nodes,prevById){
+    (nodes||[]).forEach(function(node){
+        var prev=prevById&&prevById[node.id];
+        if(!prev)return;
+        if(isFinite(prev.x))node.x=prev.x;
+        if(isFinite(prev.y))node.y=prev.y;
+        if(isFinite(prev.vx))node.vx=prev.vx;
+        if(isFinite(prev.vy))node.vy=prev.vy;
+        if(prev.fx!=null&&isFinite(prev.fx))node.fx=prev.fx;
+        if(prev.fy!=null&&isFinite(prev.fy))node.fy=prev.fy;
+    });
+    return nodes;
+}
+
+function snapshotZoomTransform(transform){
+    var t=transform||{};
+    var k=Number(t.k);
+    if(!isFinite(k)||k<=0)k=1;
+    var x=Number(t.x);
+    if(!isFinite(x))x=0;
+    var y=Number(t.y);
+    if(!isFinite(y))y=0;
+    return {k:k,x:x,y:y};
+}
+
+function shouldFitCodeCamera(cameraReady,vizType){
+    return vizType==='code'&&!cameraReady;
+}
+
+function clampCodeViewFitScale(scale){
+    var value=Number(scale);
+    if(!isFinite(value)||value<=0)return CODE_VIEW_MIN_FIT_SCALE;
+    if(value<CODE_VIEW_MIN_FIT_SCALE)return CODE_VIEW_MIN_FIT_SCALE;
+    if(value>CODE_VIEW_MAX_FIT_SCALE)return CODE_VIEW_MAX_FIT_SCALE;
+    return value;
+}
+
+function codeCardFitBounds(nodes,sizesByPath,cardPaths){
+    var minX=Infinity,minY=Infinity,maxX=-Infinity,maxY=-Infinity;
+    (nodes||[]).forEach(function(node){
+        if(!node||!cardPaths||!cardPaths.has(node.id)||!isFinite(node.x)||!isFinite(node.y))return;
+        var size=(sizesByPath&&sizesByPath[node.id])||codeCardSize(null);
+        minX=Math.min(minX,node.x-size.width/2);
+        minY=Math.min(minY,node.y-size.height/2);
+        maxX=Math.max(maxX,node.x+size.width/2);
+        maxY=Math.max(maxY,node.y+size.height/2);
+    });
+    if(!isFinite(minX))return null;
+    return {minX:minX,minY:minY,maxX:maxX,maxY:maxY,cx:(minX+maxX)/2,cy:(minY+maxY)/2};
+}
+
+function applyCodeCardLayout(layer,nodesById,transform,sizesByPath){
+    if(!layer)return{placed:0,titleScale:1};
+    layer.style.transform=codeCanvasTransformStyle(transform);
+    var k=transform&&isFinite(Number(transform.k))?Number(transform.k):1;
+    var titleScale=readableLabelScale(k);
+    var cards=layer.querySelectorAll?layer.querySelectorAll('[data-code-card]'):[];
+    var placed=0;
+    Array.prototype.forEach.call(cards,function(card){
+        var path=card.getAttribute('data-code-card');
+        var size=(sizesByPath&&sizesByPath[path])||codeCardSize(null);
+        var style=codeCardAnchorStyle(nodesById&&nodesById[path],size);
+        card.style.visibility=style.visibility;
+        card.style.left=style.left;
+        card.style.top=style.top;
+        card.style.width=size.width+'px';
+        card.style.height=size.height+'px';
+        if(card.classList){
+            if(size.clipped&&card.classList.add)card.classList.add('clipped');
+            else if(card.classList.remove)card.classList.remove('clipped');
+            if(size.expand&&card.classList.add)card.classList.add('expand');
+            else if(card.classList.remove)card.classList.remove('expand');
+            if(size.wrap&&card.classList.add)card.classList.add('wrap');
+            else if(card.classList.remove)card.classList.remove('wrap');
+        }
+        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');
+            else if(card.classList.remove)card.classList.remove('code-far');
+        }
+        if(style.visibility==='visible')placed++;
+    });
+    return{placed:placed,titleScale:titleScale};
+}
+
+function armRecentDelete(armedId,clickedId){
+    clickedId=clickedId||null;
+    if(clickedId&&armedId===clickedId)return{confirm:true,armedId:null};
+    return{confirm:false,armedId:clickedId};
 }
 
 function extractFileSymbols(file,connections){
@@ -5816,6 +6804,55 @@
     return symbols;
 }
 
+function codeCardSymbolPills(file,connections,prefs){
+    var size=codeCardSize(file,prefs);
+    return extractFileSymbols(file,connections).map(function(sym){
+        var line=codeCardSymbolLine(file,sym.name);
+        if(!line)return null;
+        return{name:sym.name,kind:sym.kind,line:line,top:codeCardLineY(size,line,file,prefs)};
+    }).filter(Boolean);
+}
+
+function codeCardPillViewTop(lineTop,scrollTop,cardHeight,headHeight){
+    var y=Number(lineTop)-(Number(scrollTop)||0);
+    var min=headHeight==null?CODE_CARD_HEAD_HEIGHT:Number(headHeight);
+    var max=Number(cardHeight);
+    if(!isFinite(y)||!isFinite(min)||!isFinite(max))return null;
+    if(y<min||y>max)return null;
+    return y;
+}
+
+function readCodeCardBodyScroll(layer,path){
+    if(!layer||!path)return 0;
+    var cards=layer.querySelectorAll?layer.querySelectorAll('[data-code-card]'):[];
+    for(var i=0;i<cards.length;i++){
+        if(cards[i].getAttribute('data-code-card')!==path)continue;
+        var body=cards[i].querySelector?cards[i].querySelector('.code-card-body'):null;
+        var top=body?Number(body.scrollTop):0;
+        return isFinite(top)?top:0;
+    }
+    return 0;
+}
+
+function isCodeCanvasDeselectTarget(target,svg){
+    if(!target||!svg)return false;
+    if(target===svg)return true;
+    if(target.getAttribute&&target.getAttribute('data-code-bg')==='1')return true;
+    return !!(target.closest&&target.closest('[data-code-bg="1"]'));
+}
+
+function isCodeCanvasNativeScrollTarget(target){
+    if(!target||!target.closest)return false;
+    if(target.closest('.code-sym-list'))return true;
+    if(!target.closest('.code-card.clipped .code-card-body'))return false;
+    return !target.closest('.code-card.code-far');
+}
+
+function codeViewWheelUsesNativeScroll(event,target){
+    if(codeViewWheelAction(event)==='zoom')return false;
+    return isCodeCanvasNativeScrollTarget(target);
+}
+
 function collectCrossFileSymbols(files,connections){
     var byName=Object.create(null);
     (files||[]).forEach(function(file){
@@ -5903,10 +6940,33 @@
     return !!(file&&!file.analysisSkipped&&!fileHasLoadedSource(file));
 }
 
-function fileSourceDisplayState(file,canFetch){
+function recordCodeSourceFailure(prev,path){
+    var next=Object.assign(Object.create(null),prev||{});
+    if(path)next[path]=true;
+    return next;
+}
+
+function clearCodeSourceFailure(prev,path){
+    var next=Object.assign(Object.create(null),prev||{});
+    if(path)delete next[path];
+    return next;
+}
+
+function recordCodeSourceFailureIfCurrent(prev,path,hydrationId,currentId){
+    if(!hydrationRequestIsCurrent(hydrationId,currentId))return prev||Object.create(null);
+    return recordCodeSourceFailure(prev,path);
+}
+
+function clearCodeSourceFailureIfCurrent(prev,path,hydrationId,currentId){
+    if(!hydrationRequestIsCurrent(hydrationId,currentId))return prev||Object.create(null);
+    return clearCodeSourceFailure(prev,path);
+}
+
+function fileSourceDisplayState(file,canFetch,failed){
     if(!file)return 'empty';
     if(file.analysisSkipped)return 'skipped';
     if(fileHasLoadedSource(file))return 'ready';
+    if(canFetch&&pathIsFlagged(failed,file.path))return 'failed';
     return canFetch?'loading':'unavailable';
 }
 
@@ -5914,11 +6974,12 @@
     return (files||[]).filter(analysisFileNeedsSource);
 }
 
-function mergeHydratedFileSources(data,updates){
+function mergeHydratedFileSources(data,updates,currentId){
     if(!data||!data.files||!updates||!updates.length)return data;
     var byPath=Object.create(null);
     updates.forEach(function(update){
-        if(update&&update.path&&typeof update.content==='string')byPath[update.path]=update.content;
+        if(!hydratedSourceIsCurrent(update,currentId))return;
+        byPath[update.path]=update.content;
     });
     var changed=false;
     var files=data.files.map(function(file){
@@ -5962,29 +7023,6 @@
     return copy;
 }
 
-function codeSplitIsStacked(wrap){
-    if(!wrap||typeof getComputedStyle!=='function')return false;
-    try{
-        return getComputedStyle(wrap).flexDirection==='column';
-    }catch(e){
-        return false;
-    }
-}
-
-function codeSplitPanePercent(rect,point,stacked){
-    if(!rect||!point)return 42;
-    var next;
-    if(stacked){
-        var height=rect.height||1;
-        next=((rect.bottom-point.clientY)/height)*100;
-    }else{
-        var width=rect.width||1;
-        next=((rect.right-point.clientX)/width)*100;
-    }
-    if(!isFinite(next))return 42;
-    return Math.max(28,Math.min(72,next));
-}
-
 function openAnalysisCacheDb(){
     if(typeof indexedDB==='undefined')return Promise.reject(new Error('IndexedDB is not available'));
     return new Promise(function(resolve,reject){
@@ -6482,6 +7520,7 @@
     var _j=useState(null),selected=_j[0],setSelected=_j[1];
     var _k=useState(new Set([''])),expandedPaths=_k[0],setExpandedPaths=_k[1];
     var _l=useState(new Set(['blast','fns'])),expandedCards=_l[0],setExpandedCards=_l[1];
+    var _leftRail=useState('overview'),leftTab=_leftRail[0],setLeftTab=_leftRail[1];
     var _m=useState('details'),rightTab=_m[0],setRightTab=_m[1];
     var _m2=useState(null),drillDown=_m2[0],setDrillDown=_m2[1];// {type:'issue'|'pattern'|'security'|'suggestion'|'duplicate', data:...}
     var _n=useState(null),blastRadius=_n[0],setBlastRadius=_n[1];
@@ -6519,7 +7558,7 @@
     var _recents=useState([]),recentAnalyses=_recents[0],setRecentAnalyses=_recents[1];
     var _cachedId=useState(null),cachedFromId=_cachedId[0],setCachedFromId=_cachedId[1];
     var _activeSym=useState(null),activeSymbol=_activeSym[0],setActiveSymbol=_activeSym[1];
-    var _codeWidth=useState(52),codePanePercent=_codeWidth[0],setCodePanePercent=_codeWidth[1];
+    var _pendingDel=useState(null),pendingRecentDelete=_pendingDel[0],setPendingRecentDelete=_pendingDel[1];
     var _cli=useState(null),cliStatus=_cli[0],setCliStatus=_cli[1];
     var _cliDirty=useState([]),cliDirty=_cliDirty[0],setCliDirty=_cliDirty[1];
     var isMobile=viewportWidth<=980;
@@ -6541,6 +7580,35 @@
     var nodesRef=useRef(null);
     var linksRef=useRef(null);
     var selectFileRef=useRef(null);
+    var codeCardsLayerRef=useRef(null);
+    var codeCardPathsRef=useRef(new Set());
+    var codeZoomTransformRef=useRef({k:1,x:0,y:0});
+    var graphNodesByIdRef=useRef(Object.create(null));
+    var selectedPathRef=useRef(null);
+    var codeCardSizesRef=useRef(Object.create(null));
+    var codeCardUserPinnedRef=useRef(new Set());
+    var codeCardLayoutKeyRef=useRef('');
+    var codeViewCameraReadyRef=useRef(false);
+    var codeViewSceneRef=useRef('');
+    var codeCardIgnoreClickRef=useRef(false);
+    var codeCardPlacementRef=useRef(Object.create(null));
+    var openedSceneRef=useRef('');
+    var codeViewSessionRef=useRef(false);
+    var pendingFlyToRef=useRef(null);
+    var openCodeFileRef=useRef(null);
+    var codeFilesByPathRef=useRef(Object.create(null));
+    var codeCanvasRef=useRef(null);
+    var codeSourceInFlightRef=useRef(Object.create(null));
+    var updateHullsRef=useRef(null);
+    var codeFolderCentersRef=useRef(Object.create(null));
+    var codeCardUserSizeRef=useRef(Object.create(null));
+    var analysisHydrationIdRef=useRef('');
+    var _openedCards=useState([]),openedCodePaths=_openedCards[0],setOpenedCodePaths=_openedCards[1];
+    var _sourceFailed=useState(Object.create(null)),codeSourceFailed=_sourceFailed[0],setCodeSourceFailed=_sourceFailed[1];
+    var _pillScroll=useState(0),codePillScroll=_pillScroll[0],setCodePillScroll=_pillScroll[1];
+    var _codeExpand=useState(false),codeViewExpand=_codeExpand[0],setCodeViewExpand=_codeExpand[1];
+    var _codeWrap=useState(true),codeViewWrap=_codeWrap[0],setCodeViewWrap=_codeWrap[1];
+    var pendingRecentDeleteTimerRef=useRef(null);
     var zipInputRef=useRef(null);
     var zipArchiveRef=useRef(null);
     var zipFileRef=useRef(null);
@@ -6680,6 +7748,10 @@
                 confirmResolverRef.current(false);
                 confirmResolverRef.current=null;
             }
+            if(pendingRecentDeleteTimerRef.current){
+                clearTimeout(pendingRecentDeleteTimerRef.current);
+                pendingRecentDeleteTimerRef.current=null;
+            }
         };
     },[]);
 
@@ -6695,6 +7767,18 @@
         return function(){document.removeEventListener('keydown',onKeyDown);};
     },[confirmDialog]);
 
+    useEffect(function(){
+        if(!pendingRecentDelete)return;
+        function onKeyDown(e){
+            if(e.key==='Escape'){
+                e.preventDefault();
+                clearPendingRecentDelete();
+            }
+        }
+        document.addEventListener('keydown',onKeyDown);
+        return function(){document.removeEventListener('keydown',onKeyDown);};
+    },[pendingRecentDelete]);
+
     useEffect(function(){
         var params=new URLSearchParams(window.location.search);
         var repo=params.get('repo');
@@ -6721,14 +7805,35 @@
     }
 
     function currentAnalysisSource(){
-        if(cliStatus&&cliStatus.ok)return{sourceType:'cli',sourceKey:cliStatus.root||'cli',title:cliStatus.name||'Local watch',repoUrl:'',localSourceKind:'cli'};
         if(localSourceKind==='folder')return{sourceType:'folder',sourceKey:(repoInfo&&(repoInfo.folderKey||repoInfo.name))||'local-folder',title:(repoInfo&&repoInfo.name)||'Local Folder',repoUrl:'',localSourceKind:'folder'};
         if(localSourceKind==='zip')return{sourceType:'zip',sourceKey:(repoInfo&&(repoInfo.zipKey||repoInfo.name))||'zip',title:(repoInfo&&repoInfo.name)||'ZIP Archive',repoUrl:'',localSourceKind:'zip'};
-        if(repoInfo&&repoInfo.owner&&repoInfo.repo&&repoInfo.owner!=='local')return{sourceType:'github',sourceKey:githubCacheSourceKey(repoInfo.owner,repoInfo.repo,activeExcludePatterns),title:repoInfo.owner+'/'+repoInfo.repo,repoUrl:repoInfo.owner+'/'+repoInfo.repo,localSourceKind:null};
+        if(localSourceKind==='cli')return{sourceType:'cli',sourceKey:(repoInfo&&repoInfo.cliRoot)||(cliStatus&&cliStatus.root)||'cli',title:(cliStatus&&cliStatus.name)||(repoInfo&&repoInfo.name)||'Local watch',repoUrl:'',localSourceKind:'cli'};
+        if(repoInfo&&repoInfo.owner&&repoInfo.repo&&repoInfo.owner!=='local')return{sourceType:'github',sourceKey:githubSourceKeyForLoadedAnalysis(repoInfo.owner,repoInfo.repo,data,activeExcludePatterns),title:repoInfo.owner+'/'+repoInfo.repo,repoUrl:repoInfo.owner+'/'+repoInfo.repo,localSourceKind:null};
         var parsed=parseUrl(repoUrl);
-        if(parsed)return{sourceType:'github',sourceKey:githubCacheSourceKey(parsed.owner,parsed.repo,activeExcludePatterns),title:parsed.owner+'/'+parsed.repo,repoUrl:parsed.owner+'/'+parsed.repo,localSourceKind:null};
+        if(parsed)return{sourceType:'github',sourceKey:githubSourceKeyForLoadedAnalysis(parsed.owner,parsed.repo,data,activeExcludePatterns),title:parsed.owner+'/'+parsed.repo,repoUrl:parsed.owner+'/'+parsed.repo,localSourceKind:null};
+        if(cliStatus&&cliStatus.ok)return{sourceType:'cli',sourceKey:cliStatus.root||'cli',title:cliStatus.name||'Local watch',repoUrl:'',localSourceKind:'cli'};
         return null;
     }
+    var analysisGraphIdentity=useMemo(function(){return analysisGraphKey(data);},[data]);
+    var loadedSourceIdentity=useMemo(function(){
+        var parsed=parseUrl(repoUrl);
+        var githubOwner=repoInfo&&repoInfo.owner&&repoInfo.owner!=='local'?repoInfo.owner:(parsed&&parsed.owner);
+        var githubRepo=repoInfo&&repoInfo.owner&&repoInfo.owner!=='local'?repoInfo.repo:(parsed&&parsed.repo);
+        return loadedAnalysisSourceIdentity({
+            localSourceKind:localSourceKind,
+            folderKey:repoInfo&&(repoInfo.folderKey||repoInfo.name),
+            zipKey:repoInfo&&(repoInfo.zipKey||repoInfo.name),
+            cliRoot:(repoInfo&&repoInfo.cliRoot)||(cliStatus&&cliStatus.root),
+            cliOk:!!(cliStatus&&cliStatus.ok),
+            githubOwner:githubOwner,
+            githubRepo:githubRepo,
+            githubKey:githubOwner&&githubRepo?githubSourceKeyForLoadedAnalysis(githubOwner,githubRepo,data,activeExcludePatterns):null
+        });
+    },[localSourceKind,repoInfo,repoUrl,data,cliStatus]);
+    var currentHydrationId=useMemo(function(){
+        return analysisHydrationIdFromParts(loadedSourceIdentity,analysisGraphIdentity);
+    },[loadedSourceIdentity,analysisGraphIdentity]);
+    analysisHydrationIdRef.current=currentHydrationId;
 
     function refreshRecentList(){
         listRecentAnalyses().then(function(rows){
@@ -6804,6 +7909,7 @@
     }
 
     function loadRecentAnalysis(id){
+        clearPendingRecentDelete();
         return getRecentAnalysis(id).then(function(record){
             if(!record){showNotification('That analysis is no longer cached.','warning');refreshRecentList();return null;}
             applyCachedAnalysis(record);
@@ -6818,14 +7924,34 @@
         }).catch(function(){showNotification('Could not open cached analysis.','error');});
     }
 
-    function removeRecentAnalysis(id,e){
-        if(e)e.stopPropagation();
+    function clearPendingRecentDelete(){
+        if(pendingRecentDeleteTimerRef.current){
+            clearTimeout(pendingRecentDeleteTimerRef.current);
+            pendingRecentDeleteTimerRef.current=null;
+        }
+        setPendingRecentDelete(null);
+    }
+
+    function removeRecentAnalysis(id){
         deleteRecentAnalysis(id).then(function(){
             if(cachedFromId===id)setCachedFromId(null);
             refreshRecentList();
         }).catch(function(){});
     }
 
+    function requestRecentDelete(id,e){
+        if(e)e.stopPropagation();
+        var next=armRecentDelete(pendingRecentDelete,id);
+        if(next.confirm){
+            clearPendingRecentDelete();
+            removeRecentAnalysis(id);
+            return;
+        }
+        setPendingRecentDelete(next.armedId);
+        if(pendingRecentDeleteTimerRef.current)clearTimeout(pendingRecentDeleteTimerRef.current);
+        pendingRecentDeleteTimerRef.current=setTimeout(function(){setPendingRecentDelete(null);},4000);
+    }
+
     function startGithubZipDownload(owner,repo){
         var url=githubZipDownloadUrl(owner,repo);
         var a=document.createElement('a');
@@ -7742,10 +8868,32 @@
                 setOwnerLoading(false);
                 setOwnership([]);
             }
-            updateGraphHighlight(path,blast);
+            if(graphConfig.vizType!=='code')updateGraphHighlight(path,blast);
         }
-    },[data,repoInfo,localSourceKind,isMobile]);
+    },[data,repoInfo,localSourceKind,isMobile,graphConfig.vizType]);
     selectFileRef.current=selectFile;
+    function openCodeFile(path,replace){
+        var nextFilter=folderFilterAfterCodeNav(path,data,folderFilter);
+        var reveal=nextFilter!==folderFilter;
+        if(reveal)setFolderFilter(nextFilter);
+        var hidden=hiddenOpenedCodePaths(openedCodePaths,data,nextFilter);
+        var allowReplace=!!(replace||reveal);
+        var resolved=resolveOpenCodeCard(openedCodePaths,path,null,allowReplace,hidden);
+        if(!resolved.opened)return;
+        setOpenedCodePaths(function(prev){return openCodeCardPaths(prev,path,null,allowReplace,hiddenOpenedCodePaths(prev,data,nextFilter));});
+        if(resolved.inserted)pendingFlyToRef.current=path;
+        selectFile(path);
+    }
+    function retryCodeSource(path){
+        if(!path)return;
+        delete codeSourceInFlightRef.current[path];
+        setCodeSourceFailed(function(prev){return clearCodeSourceFailure(prev,path);});
+    }
+    openCodeFileRef.current=openCodeFile;
+    function goToFile(path){
+        if(codeFileNavOpensCard(graphConfig.vizType))openCodeFile(path);
+        else selectFile(path);
+    }
 
     function updateGraphHighlight(path,blast){
         if(!nodesRef.current||!linksRef.current)return;
@@ -7874,7 +9022,7 @@
 
     function rememberHydratedSources(updates){
         if(!updates||!updates.length)return;
-        setData(function(prev){return mergeHydratedFileSources(prev,updates);});
+        setData(function(prev){return mergeHydratedFileSources(prev,updates,analysisHydrationIdRef.current);});
     }
 
     // Open file preview
@@ -7891,10 +9039,12 @@
             setFilePreview({path:path,filename:filename,content:existingFile.content,line:line||null,loading:false,error:null});
             return;
         }
+        var previewId=analysisHydrationIdRef.current;
         readLiveFileSource(path).then(function(content){
+            if(analysisHydrationIdRef.current!==previewId)return;
             if(typeof content==='string'){
                 setFilePreview({path:path,filename:filename,content:content,line:line||null,loading:false,error:null});
-                rememberHydratedSources([{path:path,content:content}]);
+                rememberHydratedSources([{path:path,content:content,hydrationId:previewId}]);
                 return;
             }
             setFilePreview({path:path,filename:filename,content:null,line:line||null,loading:false,error:canReadLiveFileSource()?'Could not load file content':'Reopen this project to preview source'});
@@ -7923,10 +9073,220 @@
         return m;
     },[data,colorMode]);
 
+    var graphRebuildKey=useMemo(function(){
+        return [
+            currentHydrationId,
+            graphStructureKey(data,folderFilter),
+            colorMode,
+            theme,
+            graphConfig.vizType,
+            graphConfig.viewMode,
+            graphConfig.spacing,
+            graphConfig.linkDist,
+            graphConfig.showLabels,
+            graphConfig.curvedLinks
+        ].join('\0');
+    },[currentHydrationId,data,folderFilter,colorMode,theme,graphConfig]);
     var codeViewFiles=useMemo(function(){
         if(!data)return[];
-        return collectVisibleCodeFiles(selected&&selected.path,data,folderFilter,4);
-    },[data,selected,folderFilter]);
+        var paths=openedCodePaths;
+        var files=filesForOpenedCodePaths(paths,data,folderFilter);
+        if((!files.length)&&graphConfig.vizType==='code'){
+            var seed=codeViewSeedPath(selected&&selected.path,data,folderFilter);
+            if(seed)files=filesForOpenedCodePaths([seed],data,folderFilter);
+        }
+        return files;
+    },[data,openedCodePaths,folderFilter,graphConfig.vizType,selected&&selected.path]);
+    useEffect(function(){
+        if(currentHydrationId===openedSceneRef.current)return;
+        openedSceneRef.current=currentHydrationId;
+        codeCardPlacementRef.current=Object.create(null);
+        codeSourceInFlightRef.current=Object.create(null);
+        setCodeSourceFailed(Object.create(null));
+        setOpenedCodePaths([]);
+        pendingFlyToRef.current=null;
+    },[currentHydrationId]);
+    useEffect(function(){
+        var inCode=graphConfig.vizType==='code'&&!!data;
+        if(!inCode){
+            codeViewSessionRef.current=false;
+            return;
+        }
+        if(!shouldSeedOpenedCodeCards(true,codeViewSessionRef.current,openedCodePaths)){
+            codeViewSessionRef.current=true;
+            return;
+        }
+        codeViewSessionRef.current=true;
+        var seed=codeViewSeedPath(selected&&selected.path,data,folderFilter);
+        if(!seed)return;
+        if(openCodeFileRef.current)openCodeFileRef.current(seed,true);
+    },[graphConfig.vizType,data,folderFilter,openedCodePaths.length,selected&&selected.path]);
+    useEffect(function(){
+        var el=codeCanvasRef.current;
+        if(!el||graphConfig.vizType!=='code')return;
+        function onWheel(e){
+            if(!zoomRef.current||!svgRef.current)return;
+            if(codeViewWheelUsesNativeScroll(e,e.target))return;
+            var action=codeViewWheelAction(e);
+            e.preventDefault();
+            var svg=d3.select(svgRef.current);
+            if(action==='zoom'){
+                var rect=svgRef.current.getBoundingClientRect();
+                var factor=e.deltaY<0?1.08:1/1.08;
+                zoomRef.current.scaleBy(svg,factor,[e.clientX-rect.left,e.clientY-rect.top]);
+                return;
+            }
+            var pan=codeViewWheelPanDelta(e.deltaX,e.deltaY,snapshotZoomTransform(codeZoomTransformRef.current).k);
+            zoomRef.current.translateBy(svg,pan.x,pan.y);
+        }
+        el.addEventListener('wheel',onWheel,{passive:false});
+        return function(){el.removeEventListener('wheel',onWheel);};
+    },[graphConfig.vizType]);
+    useLayoutEffect(function(){
+        if(graphConfig.vizType!=='code'||!selected||!selected.path){
+            setCodePillScroll(0);
+            return;
+        }
+        setCodePillScroll(readCodeCardBodyScroll(codeCardsLayerRef.current,selected.path));
+    },[graphConfig.vizType,selected&&selected.path]);
+    var hadAnalysisRef=useRef(false);
+    useEffect(function(){
+        if(data&&!hadAnalysisRef.current)setLeftTab('overview');
+        hadAnalysisRef.current=!!data;
+    },[data]);
+    selectedPathRef.current=selected&&selected.path;
+    codeCardPathsRef.current=new Set(codeViewFiles.map(function(file){return file.path;}));
+    var filesByPath=Object.create(null);
+    if(data&&data.files)data.files.forEach(function(file){filesByPath[file.path]=file;});
+    codeFilesByPathRef.current=filesByPath;
+
+    function currentCodeCardPrefs(){
+        return normalizeCodeCardPrefs({expand:codeViewExpand,wrap:codeViewWrap});
+    }
+    function currentCodeCardSizes(){
+        var prefs=currentCodeCardPrefs();
+        var overrides=codeCardUserSizeRef.current;
+        var sizes=Object.create(null);
+        codeViewFiles.forEach(function(file){
+            sizes[file.path]=applyCodeCardUserSize(codeCardSize(file,prefs),overrides[file.path]);
+        });
+        codeCardSizesRef.current=sizes;
+        return sizes;
+    }
+
+    function syncCodeCards(){
+        applyCodeCardLayout(codeCardsLayerRef.current,graphNodesByIdRef.current,codeZoomTransformRef.current,codeCardSizesRef.current);
+    }
+
+    function graphLinkPath(d){
+        if(graphConfig.vizType==='code'){
+            var cardPath=codeCardLinkPath(d,codeCardSizesRef.current,codeFilesByPathRef.current,codeCardPathsRef.current);
+            if(cardPath)return cardPath;
+        }
+        if(graphConfig.curvedLinks){
+            var dx=d.target.x-d.source.x,dy=d.target.y-d.source.y,dr=Math.sqrt(dx*dx+dy*dy);
+            return 'M'+d.source.x+','+d.source.y+'A'+dr+','+dr+' 0 0,1 '+d.target.x+','+d.target.y;
+        }
+        return 'M'+d.source.x+','+d.source.y+'L'+d.target.x+','+d.target.y;
+    }
+    function redrawGraphLinksAndNodes(){
+        if(nodesRef.current)nodesRef.current.attr('transform',function(d){return'translate('+d.x+','+d.y+')';});
+        if(linksRef.current)linksRef.current.attr('d',graphLinkPath);
+    }
+    function flyToOpenedCodeCard(place){
+        if(!svgRef.current||!zoomRef.current||!place||!isFinite(place.x)||!isFinite(place.y))return;
+        var w=svgRef.current.clientWidth||800;
+        var h=svgRef.current.clientHeight||600;
+        var t=snapshotZoomTransform(codeZoomTransformRef.current);
+        var next=d3.zoomIdentity.translate(w/2-place.x*t.k,h/2-place.y*t.k).scale(t.k);
+        d3.select(svgRef.current).transition().duration(260).call(zoomRef.current.transform,next);
+    }
+    function applyOpenedCardPlacements(opts){
+        opts=opts||{};
+        var sim=simRef.current;
+        if(!sim||graphConfig.vizType!=='code')return;
+        var sizes=currentCodeCardSizes();
+        var placements=codeCardPlacementRef.current||Object.create(null);
+        var centers=codeFolderCentersRef.current||Object.create(null);
+        var placeOpts={pinnedPaths:codeCardUserPinnedRef.current,centers:centers,gapY:64};
+        codeViewFiles.forEach(function(file){
+            if(codeCardUserPinnedRef.current.has(file.path)&&placements[file.path]){
+                var live=graphNodesByIdRef.current[file.path];
+                var size=sizes[file.path]||applyCodeCardUserSize(codeCardSize(file,currentCodeCardPrefs()),codeCardUserSizeRef.current[file.path]);
+                if(live&&isFinite(live.fx)&&isFinite(live.fy)){
+                    placements[file.path]={
+                        left:live.fx-size.width/2,
+                        top:live.fy-size.height/2,
+                        x:live.fx,
+                        y:live.fy,
+                        width:size.width,
+                        height:size.height,
+                        folder:file.folder||placements[file.path].folder||'root'
+                    };
+                    return;
+                }
+            }
+            placements=appendCodeCardPlacement(placements,file,sizes[file.path]||applyCodeCardUserSize(codeCardSize(file,currentCodeCardPrefs()),codeCardUserSizeRef.current[file.path]),placeOpts);
+        });
+        var keep=codeCardPlacementKeepSet(openedCodePaths,codeViewFiles);
+        var departed=pruneCodeCardPlacements(placements,keep);
+        placements=reflowUnpinnedCodeCards(placements,codeCardUserPinnedRef.current,placeOpts);
+        codeCardPlacementRef.current=placements;
+        sim.nodes().forEach(function(node){
+            var pos=placements[node.id];
+            if(!pos){
+                if(departed[node.id]&&!codeCardUserPinnedRef.current.has(node.id)){
+                    node.fx=null;node.fy=null;
+                }
+                return;
+            }
+            if(codeCardUserPinnedRef.current.has(node.id)&&isFinite(node.fx)&&isFinite(node.fy)){
+                node.x=node.fx;node.y=node.fy;
+                return;
+            }
+            node.fx=pos.x;node.fy=pos.y;node.x=pos.x;node.y=pos.y;
+        });
+        var flyPath=pendingFlyToRef.current;
+        if(flyPath&&codeViewCameraReadyRef.current&&!opts.skipFly){
+            var place=placements[flyPath];
+            if(place)flyToOpenedCodeCard(place);
+            pendingFlyToRef.current=null;
+        }
+    }
+    function placeRemainingCodeNodes(){
+        var sim=simRef.current;
+        if(!sim)return;
+        parkLeftoverCodeNodes(sim.nodes(),codeCardPathsRef.current,codeFolderCentersRef.current);
+        unburyNodesFromCards(sim.nodes(),codeCardPathsRef.current,codeCardSizesRef.current);
+        refreshCodeCardForces();
+        redrawGraphLinksAndNodes();
+    }
+
+    function refreshCodeCardForces(){
+        var sim=simRef.current;
+        if(!sim)return;
+        var collide=sim.force('collision');
+        if(collide&&typeof collide.radius==='function'){
+            collide.radius(function(d){return liveCodeCollideRadius(d,codeCardPathsRef.current.has(d.id)?codeCardSizesRef.current[d.id]:null);});
+        }
+        var linkForce=sim.force('link');
+        if(linkForce&&typeof linkForce.distance==='function'){
+            linkForce.distance(function(d){
+                var src=typeof d.source==='object'?d.source.id:d.source;
+                var tgt=typeof d.target==='object'?d.target.id:d.target;
+                var extra=(codeCardPathsRef.current.has(src)||codeCardPathsRef.current.has(tgt))?240:0;
+                return (graphConfig.linkDist||70)+extra;
+            });
+        }
+        if(nodesRef.current){
+            var markScale=readableLabelScale((codeZoomTransformRef.current||{}).k);
+            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+')';});
+        }
+    }
 
     var codeViewSymbols=useMemo(function(){
         return collectCrossFileSymbols(codeViewFiles,data?data.connections:[]);
@@ -7935,17 +9295,23 @@
     useEffect(function(){
         var missing=filesNeedingSource(codeViewFiles);
         if(!missing.length||!canReadLiveFileSource())return;
-        var cancelled=false;
-        Promise.all(missing.map(function(file){
-            return readLiveFileSource(file.path).then(function(content){
-                return {path:file.path,content:content};
+        var inflight=codeSourceInFlightRef.current;
+        var hydrationId=analysisHydrationIdRef.current;
+        nextCodeSourceReads(missing.map(function(file){return file.path;}),inflight,codeSourceFailed).forEach(function(path){
+            inflight[path]=true;
+            readLiveFileSource(path).then(function(content){
+                if(typeof content==='string'){
+                    rememberHydratedSources([{path:path,content:content,hydrationId:hydrationId}]);
+                    setCodeSourceFailed(function(prev){return clearCodeSourceFailureIfCurrent(prev,path,hydrationId,analysisHydrationIdRef.current);});
+                    return;
+                }
+                setCodeSourceFailed(function(prev){return recordCodeSourceFailureIfCurrent(prev,path,hydrationId,analysisHydrationIdRef.current);});
+            }).then(function(){delete inflight[path];},function(){
+                delete inflight[path];
+                setCodeSourceFailed(function(prev){return recordCodeSourceFailureIfCurrent(prev,path,hydrationId,analysisHydrationIdRef.current);});
             });
-        })).then(function(updates){
-            if(cancelled)return;
-            rememberHydratedSources(updates.filter(function(update){return update&&typeof update.content==='string';}));
         });
-        return function(){cancelled=true;};
-    },[codeViewFiles,localSourceKind,cliStatus,repoInfo,localDirHandle]);
+    },[codeViewFiles,localSourceKind,cliStatus,repoInfo,localDirHandle,codeSourceFailed]);
 
     useEffect(function(){
         if(!data||!svgRef.current)return;
@@ -7962,8 +9328,9 @@
             if(!fileIds.has(c.source)||!fileIds.has(c.target))return;
             if(c.source===c.target)return;// Skip self-links
             var k=c.source+'|'+c.target;
-            if(!linkMap.has(k))linkMap.set(k,{source:c.source,target:c.target,count:0});
+            if(!linkMap.has(k))linkMap.set(k,{source:c.source,target:c.target,count:0,fn:c.fn||null});
             linkMap.get(k).count+=c.count;
+            if(!linkMap.get(k).fn&&c.fn)linkMap.get(k).fn=c.fn;
         });
         var links=Array.from(linkMap.values());
         function getR(d){return Math.max(8,Math.min(24,5+d.fnCount*0.8));}
@@ -7980,29 +9347,67 @@
         var centers={};
         folders.forEach(function(f,i){centers[f]={x:(i%cols+1)*cw,y:(Math.floor(i/cols)+1)*ch};});
         var keepReadable=graphConfig.vizType==='code';
+        if(keepReadable){
+            codeFolderCentersRef.current=graphFolderCenters(folders,w,h,{minCellW:CODE_CARD_WIDTH+220,minCellH:360});
+        }
+        var sceneKey=codeViewSceneKey(data,folderFilter,graphConfig.vizType,currentAnalysisSource());
+        if(sceneKey!==codeViewSceneRef.current){
+            codeViewSceneRef.current=sceneKey;
+            codeViewCameraReadyRef.current=false;
+        }
+        var savedZoom=snapshotZoomTransform(codeZoomTransformRef.current);
+        var prevNodesById=Object.create(null);
+        if(simRef.current){
+            simRef.current.nodes().forEach(function(n){if(n&&n.id)prevNodesById[n.id]=n;});
+        }
+        if(keepReadable&&codeViewCameraReadyRef.current)preserveGraphNodeState(nodes,prevNodesById);
+        if(!keepReadable){
+            codeZoomTransformRef.current={k:1,x:0,y:0};
+            codeViewCameraReadyRef.current=false;
+        }
+        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 applyReadableLabels(k){
             if(!keepReadable)return;
             var s=readableLabelScale(k);
-            nodeLayer.selectAll('text.node-label').attr('transform','scale('+s+')');
+            nodeLayer.selectAll('g').each(function(d){
+                var hidden=nodeReplacedByCard(d&&d.id,codeCardPathsRef.current);
+                var sel=d3.select(this);
+                sel.classed('has-code-card',hidden);
+                sel.classed('code-faded',false);
+                sel.attr('display',hidden?'none':null);
+                if(hidden)return;
+                sel.select('circle.nc').attr('transform','scale('+s+')');
+                sel.select('text.node-label').attr('transform','scale('+s+')');
+            });
             hullLayer.selectAll('text.hull-label').attr('font-size',(11*s)+'px');
         }
-        var zoom=d3.zoom().scaleExtent([keepReadable?0.08:0.2,5]).on('zoom',function(e){
+        var zoom=d3.zoom().scaleExtent([keepReadable?0.08:0.2,5]).filter(function(event){
+            if(keepReadable){
+                if(event.type==='wheel')return false;
+                return !event.button;
+            }
+            return !event.ctrlKey&&!event.button;
+        }).on('zoom',function(e){
             container.attr('transform',e.transform);
+            codeZoomTransformRef.current=e.transform;
             applyReadableLabels(e.transform.k);
+            if(keepReadable)syncCodeCards();
         });
         svg.call(zoom);
         zoomRef.current=zoom;
         var container=svg.append('g');
         var defs=svg.append('defs');
         defs.append('marker').attr('id','arr').attr('viewBox','0 -5 10 10').attr('refX',14).attr('markerWidth',4).attr('markerHeight',4).attr('orient','auto').append('path').attr('d','M0,-4L10,0L0,4').attr('fill',theme==='light'?'#aaa':'#444');
-        var hullLayer=container.append('g');
+        var hullLayer=container.append('g').attr('data-code-bg','1').attr('pointer-events','none');
         var linkLayer=container.append('g');
         var nodeLayer=container.append('g');
         var sim=d3.forceSimulation(nodes);
         if(graphConfig.viewMode==='force'){
             sim.force('link',d3.forceLink(links).id(function(d){return d.id;}).distance(graphConfig.linkDist).strength(0.3))
                .force('charge',d3.forceManyBody().strength(-graphConfig.spacing).distanceMax(400))
-               .force('collision',d3.forceCollide().radius(function(d){return getR(d)+12;}))
+               .force('collision',d3.forceCollide().radius(collideR))
                .force('x',d3.forceX(function(d){return centers[d.folder]?centers[d.folder].x:w/2;}).strength(0.15))
                .force('y',d3.forceY(function(d){return centers[d.folder]?centers[d.folder].y:h/2;}).strength(0.15));
         }else if(graphConfig.viewMode==='radial'){
@@ -8010,7 +9415,7 @@
             nodes.forEach(function(n,i){n.angle=i/nodes.length*2*Math.PI;n.targetX=w/2+Math.cos(n.angle)*r;n.targetY=h/2+Math.sin(n.angle)*r;});
             sim.force('link',d3.forceLink(links).id(function(d){return d.id;}).distance(graphConfig.linkDist*0.5).strength(0.05))
                .force('charge',d3.forceManyBody().strength(-graphConfig.spacing*0.3))
-               .force('collision',d3.forceCollide().radius(function(d){return getR(d)+8;}))
+               .force('collision',d3.forceCollide().radius(collideR))
                .force('x',d3.forceX(function(d){return d.targetX;}).strength(0.8))
                .force('y',d3.forceY(function(d){return d.targetY;}).strength(0.8));
         }else if(graphConfig.viewMode==='hierarchical'){
@@ -8021,7 +9426,7 @@
             sortedLayers.forEach(function(l,li){var g=layerGroups[l];var colW=w/(sortedLayers.length+1);g.forEach(function(n,ni){n.targetX=(li+1)*colW;n.targetY=(ni+1)*h/(g.length+1);});});
             sim.force('link',d3.forceLink(links).id(function(d){return d.id;}).distance(graphConfig.linkDist).strength(0.1))
                .force('charge',d3.forceManyBody().strength(-graphConfig.spacing*0.5).distanceMax(200))
-               .force('collision',d3.forceCollide().radius(function(d){return getR(d)+10;}))
+               .force('collision',d3.forceCollide().radius(collideR))
                .force('x',d3.forceX(function(d){return d.targetX||w/2;}).strength(0.9))
                .force('y',d3.forceY(function(d){return d.targetY||h/2;}).strength(0.3));
         }else if(graphConfig.viewMode==='grid'){
@@ -8030,7 +9435,7 @@
             var cellH=h/(Math.ceil(nodes.length/gridCols)+1);
             nodes.forEach(function(n,i){n.targetX=(i%gridCols+1)*cellW;n.targetY=(Math.floor(i/gridCols)+1)*cellH;});
             sim.force('link',d3.forceLink(links).id(function(d){return d.id;}).distance(graphConfig.linkDist*1.5).strength(0.02))
-               .force('collision',d3.forceCollide().radius(function(d){return getR(d)+15;}))
+               .force('collision',d3.forceCollide().radius(collideR))
                .force('x',d3.forceX(function(d){return d.targetX;}).strength(1))
                .force('y',d3.forceY(function(d){return d.targetY;}).strength(1));
         }else if(graphConfig.viewMode==='metro'){
@@ -8050,7 +9455,7 @@
             });
             nodes.filter(function(n){return!n.targetX;}).forEach(function(n,i){n.targetX=80+i*50;n.targetY=h-80;n.metroLine=roots.length;});
             sim.force('link',d3.forceLink(links).id(function(d){return d.id;}).distance(graphConfig.linkDist).strength(0.05))
-               .force('collision',d3.forceCollide().radius(function(d){return getR(d)+12;}))
+               .force('collision',d3.forceCollide().radius(collideR))
                .force('x',d3.forceX(function(d){return d.targetX||w/2;}).strength(0.95))
                .force('y',d3.forceY(function(d){return d.targetY||h/2;}).strength(0.95));
         }
@@ -8064,31 +9469,88 @@
         linksRef.current=link;
         var node=nodeLayer.selectAll('g').data(nodes).join('g').style('cursor','pointer');
         nodesRef.current=node;
-        node.call(d3.drag().on('start',function(e,d){if(!e.active)sim.alphaTarget(0.1).restart();d.fx=d.x;d.fy=d.y;}).on('drag',function(e,d){d.fx=e.x;d.fy=e.y;}).on('end',function(e,d){if(!e.active)sim.alphaTarget(0);d.fx=null;d.fy=null;}));
-        node.on('click',function(e,d){e.stopPropagation();if(selectFileRef.current)selectFileRef.current(d.id);});
-        node.on('mouseenter',function(e,d){var r=svgRef.current.getBoundingClientRect();setTooltip({x:e.clientX-r.left+10,y:e.clientY-r.top,title:d.name,content:d.fnCount+' functions\n'+d.layer+' layer\n'+d.churn+' recent commits'});}).on('mouseleave',function(){setTooltip(null);});
-        svg.on('click',function(e){if(e.target===svgRef.current){setSelected(null);setBlastRadius(null);link.attr('stroke',theme==='light'?'#ccc':'#333').attr('stroke-opacity',0.4);node.selectAll('.nc').attr('opacity',1).attr('fill',getC);}});
+        node.call(d3.drag().on('start',function(e,d){
+            d.fx=d.x;d.fy=d.y;
+            if(keepReadable)return;
+            if(!e.active)sim.alphaTarget(0.1).restart();
+        }).on('drag',function(e,d){
+            d.fx=e.x;d.fy=e.y;d.x=e.x;d.y=e.y;
+            if(keepReadable){
+                redrawGraphLinksAndNodes();
+                if(updateHullsRef.current)updateHullsRef.current();
+            }
+        }).on('end',function(e,d){
+            if(!keepReadable){
+                if(!e.active)sim.alphaTarget(0);
+                d.fx=null;d.fy=null;
+                return;
+            }
+            d.fx=d.x;d.fy=d.y;
+            if(codeCardPathsRef.current.has(d.id))codeCardUserPinnedRef.current.add(d.id);
+            if(updateHullsRef.current)updateHullsRef.current();
+        }));
+        node.on('click',function(e,d){
+            e.stopPropagation();
+            if(keepReadable&&openCodeFileRef.current)openCodeFileRef.current(d.id);
+            else if(selectFileRef.current)selectFileRef.current(d.id);
+        });
+        node.classed('has-code-card',function(d){return keepReadable&&nodeReplacedByCard(d.id,codeCardPathsRef.current);});
+        node.attr('display',function(d){return keepReadable&&nodeReplacedByCard(d.id,codeCardPathsRef.current)?'none':null;});
+        node.on('mouseenter',function(e,d){if(keepReadable&&codeCardPathsRef.current.has(d.id))return;var r=svgRef.current.getBoundingClientRect();setTooltip({x:e.clientX-r.left+10,y:e.clientY-r.top,title:d.name,content:d.fnCount+' functions\n'+d.layer+' layer\n'+d.churn+' recent commits'});}).on('mouseleave',function(){setTooltip(null);});
+        svg.on('click',function(e){
+            if(!isCodeCanvasDeselectTarget(e.target,svgRef.current))return;
+            setSelected(null);
+            setBlastRadius(null);
+            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.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);
         // 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;});
         }
-        // Pre-index nodes by folder for faster hull computation
-        var nodesByFolder={};
-        folders.forEach(function(f){nodesByFolder[f]=nodes.filter(function(n){return n.folder===f;});});
+        function liveNodesByFolder(){
+            var live=(simRef.current&&simRef.current.nodes())||nodes;
+            var grouped=Object.create(null);
+            (live||[]).forEach(function(n){
+                if(!n)return;
+                var folder=n.folder||'root';
+                if(!grouped[folder])grouped[folder]=[];
+                grouped[folder].push(n);
+            });
+            return grouped;
+        }
         function updateHulls(){
             hullLayer.selectAll('*').remove();
-            folders.forEach(function(f){
-                var fn=nodesByFolder[f];
+            var grouped=liveNodesByFolder();
+            var boxesByPath=keepReadable?readCodeCardWorldBoxes(codeCardsLayerRef.current):null;
+            Object.keys(grouped).forEach(function(f){
+                var fn=grouped[f];
                 if(!fn||fn.length<1)return;
-                var pad=30,pts=[];
-                fn.forEach(function(n){if(n.x&&n.y)pts.push([n.x-pad,n.y-pad],[n.x+pad,n.y-pad],[n.x-pad,n.y+pad],[n.x+pad,n.y+pad]);});
+                var cardNodes=keepReadable?fn.filter(function(n){return codeCardPathsRef.current.has(n.id);}):[];
+                var leftover=keepReadable?fn.filter(function(n){return !codeCardPathsRef.current.has(n.id);}):fn;
+                var color=colorMap[f]||COLORS[folders.indexOf(f)%COLORS.length];
+                if(cardNodes.length){
+                    var bounds=codeFolderHullBounds(cardNodes,leftover,codeCardSizesRef.current,28,boxesByPath);
+                    if(bounds){
+                        hullLayer.append('rect').attr('x',bounds.x).attr('y',bounds.y).attr('width',bounds.width).attr('height',bounds.height).attr('rx',14).attr('fill',color).attr('fill-opacity',0.06).attr('stroke',color).attr('stroke-width',2).attr('stroke-opacity',0.35);
+                        hullLayer.append('text').attr('class','hull-label').attr('x',bounds.x+12).attr('y',bounds.y+16).attr('text-anchor','start').attr('fill',color).attr('font-size',keepReadable?'12px':'10px').attr('font-family','JetBrains Mono').attr('font-weight','600').attr('opacity',0.9).text(f||'root');
+                    }
+                    return;
+                }
+                var pts=[];
+                leftover.forEach(function(n){
+                    var xy=liveGraphNodeXY(n);
+                    if(!xy)return;
+                    pts.push([xy.x-30,xy.y-30],[xy.x+30,xy.y-30],[xy.x-30,xy.y+30],[xy.x+30,xy.y+30]);
+                });
                 if(pts.length<3)return;
                 var hull=d3.polygonHull(pts);
                 if(hull){
-                    var color=colorMap[f]||COLORS[folders.indexOf(f)%COLORS.length];
                     hullLayer.append('path').attr('d','M'+hull.join('L')+'Z').attr('fill',color).attr('fill-opacity',0.04).attr('stroke',color).attr('stroke-width',2).attr('stroke-opacity',0.25).attr('rx',8);
-                    var cx=d3.mean(fn,function(n){return n.x;}),cy=d3.min(fn,function(n){return n.y;})-pad-8;
+                    var cx=d3.mean(leftover,function(n){var xy=liveGraphNodeXY(n);return xy?xy.x:null;}),cy=d3.min(leftover,function(n){var xy=liveGraphNodeXY(n);return xy?xy.y:null;})-38;
                     hullLayer.append('text').attr('class','hull-label').attr('x',cx).attr('y',cy).attr('text-anchor','middle').attr('fill',color).attr('font-size',keepReadable?'11px':'10px').attr('font-family','JetBrains Mono').attr('font-weight','600').attr('opacity',0.85).text(f||'root');
                 }
             });
@@ -8097,19 +9559,49 @@
         var hullInterval=isLargeGraph?5:1;
         var tickCount=0;
         sim.on('tick',function(){
-            if(graphConfig.curvedLinks){
-                link.attr('d',function(d){var dx=d.target.x-d.source.x,dy=d.target.y-d.source.y,dr=Math.sqrt(dx*dx+dy*dy);return'M'+d.source.x+','+d.source.y+'A'+dr+','+dr+' 0 0,1 '+d.target.x+','+d.target.y;});
-            }else{
-                link.attr('d',function(d){return'M'+d.source.x+','+d.source.y+'L'+d.target.x+','+d.target.y;});
-            }
+            link.attr('d',graphLinkPath);
             node.attr('transform',function(d){return'translate('+d.x+','+d.y+')';});
+            if(keepReadable){
+                nodes.forEach(function(n){graphNodesByIdRef.current[n.id]=n;});
+                syncCodeCards();
+            }
             tickCount++;
             if(tickCount%hullInterval===0)updateHulls();
         });
         node.selectAll('text').attr('opacity',(keepReadable||graphConfig.showLabels)?1:0);
+        if(keepReadable){
+            applyOpenedCardPlacements({skipFly:true});
+            placeRemainingCodeNodes();
+            syncCodeCards();
+            applyReadableLabels((codeZoomTransformRef.current&&codeZoomTransformRef.current.k)||1);
+            updateHulls();
+            if(shouldFitCodeCamera(codeViewCameraReadyRef.current,graphConfig.vizType)){
+                var fit=computeGraphFitTransform();
+                if(fit)svg.call(zoom.transform,fit);
+                codeViewCameraReadyRef.current=true;
+            }else{
+                svg.call(zoom.transform,d3.zoomIdentity.translate(savedZoom.x,savedZoom.y).scale(savedZoom.k));
+            }
+            sim.alpha(0);
+        }
+        updateHullsRef.current=updateHulls;
         }catch(e){console.error('Force graph error:',e);svg.selectAll('*').remove();svg.append('text').attr('x',20).attr('y',30).attr('fill','var(--t3)').text('Graph rendering error: '+e.message);}
-        return function(){if(simRef.current)simRef.current.stop();};
-    },[data,colorMap,colorMode,theme,folderFilter,graphConfig]);
+        return function(){if(simRef.current)simRef.current.stop();updateHullsRef.current=null;};
+    },[graphRebuildKey]);
+
+    useLayoutEffect(function(){
+        if(graphConfig.vizType!=='code'){
+            codeCardLayoutKeyRef.current='';
+            codeViewCameraReadyRef.current=false;
+            return;
+        }
+        var layoutKey=codeViewFiles.map(function(file){return file.path;}).join('|');
+        if(layoutKey!==codeCardLayoutKeyRef.current)codeCardLayoutKeyRef.current=layoutKey;
+        applyOpenedCardPlacements();
+        placeRemainingCodeNodes();
+        syncCodeCards();
+        if(updateHullsRef.current)updateHullsRef.current();
+    },[codeViewFiles,graphConfig.vizType,graphConfig.linkDist,codeViewExpand,codeViewWrap]);
 
     // 3D Force Graph Hook
     useEffect(function(){
@@ -9012,10 +10504,19 @@
         if(!zoomRef.current||!svgRef.current||!simRef.current)return null;
         var nodes=simRef.current.nodes();
         if(!nodes.length)return null;
-        var xs=nodes.map(function(n){return n.x;}),ys=nodes.map(function(n){return n.y;});
-        var minX=Math.min.apply(null,xs),maxX=Math.max.apply(null,xs),minY=Math.min.apply(null,ys),maxY=Math.max.apply(null,ys);
         var w=svgRef.current.clientWidth,h=svgRef.current.clientHeight;
         if(w<1||h<1)return null;
+        if(graphConfig.vizType==='code'&&codeCardPathsRef.current&&codeCardPathsRef.current.size){
+            var cardBounds=codeCardFitBounds(nodes,codeCardSizesRef.current,codeCardPathsRef.current);
+            if(cardBounds){
+                var cardW=Math.max(1,cardBounds.maxX-cardBounds.minX+80);
+                var cardH=Math.max(1,cardBounds.maxY-cardBounds.minY+80);
+                var cardScale=clampCodeViewFitScale(0.88/Math.max(cardW/w,cardH/h));
+                return d3.zoomIdentity.translate(w/2-cardScale*cardBounds.cx,h/2-cardScale*cardBounds.cy).scale(cardScale);
+            }
+        }
+        var xs=nodes.map(function(n){return n.x;}),ys=nodes.map(function(n){return n.y;});
+        var minX=Math.min.apply(null,xs),maxX=Math.max.apply(null,xs),minY=Math.min.apply(null,ys),maxY=Math.max.apply(null,ys);
         var scale=0.8/Math.max((maxX-minX+paddingSlack)/w,(maxY-minY+paddingSlack)/h);
         return d3.zoomIdentity.translate(w/2-scale*(minX+maxX)/2,h/2-scale*(minY+maxY)/2).scale(Math.min(scale,2));
     }
@@ -9036,7 +10537,27 @@
         root+='}';
         return root+'text{font-family:JetBrains Mono,monospace;pointer-events:none}';
     }
-    function exportSVG(){if(!svgRef.current)return;var svgClone=svgRef.current.cloneNode(true);svgClone.setAttribute('xmlns','http://www.w3.org/2000/svg');svgClone.setAttribute('width',svgRef.current.clientWidth);svgClone.setAttribute('height',svgRef.current.clientHeight);var style=document.createElementNS('http://www.w3.org/2000/svg','style');style.textContent=getEmbeddedSvgStyle();svgClone.insertBefore(style,svgClone.firstChild);var blob=new Blob([new XMLSerializer().serializeToString(svgClone)],{type:'image/svg+xml'});var url=URL.createObjectURL(blob);var a=document.createElement('a');a.href=url;a.download='codeflow-'+Date.now()+'.svg';a.click();URL.revokeObjectURL(url);}
+    function exportSVG(){
+        if(!graphSvgExportEnabled(graphConfig.vizType)){
+            showNotification('Switch to Graph view to export SVG. Code cards are HTML overlays.','error');
+            return;
+        }
+        if(!svgRef.current)return;
+        var svgClone=svgRef.current.cloneNode(true);
+        svgClone.setAttribute('xmlns','http://www.w3.org/2000/svg');
+        svgClone.setAttribute('width',svgRef.current.clientWidth);
+        svgClone.setAttribute('height',svgRef.current.clientHeight);
+        var style=document.createElementNS('http://www.w3.org/2000/svg','style');
+        style.textContent=getEmbeddedSvgStyle();
+        svgClone.insertBefore(style,svgClone.firstChild);
+        var blob=new Blob([new XMLSerializer().serializeToString(svgClone)],{type:'image/svg+xml'});
+        var url=URL.createObjectURL(blob);
+        var a=document.createElement('a');
+        a.href=url;
+        a.download='codeflow-'+Date.now()+'.svg';
+        a.click();
+        URL.revokeObjectURL(url);
+    }
     function copyText(text,successMessage){
         if(!text){showNotification('Nothing to copy.','error');return;}
         if(navigator.clipboard&&navigator.clipboard.writeText){
@@ -9525,10 +11046,9 @@
     function resetAnalysis(){setData(null);setSelected(null);setBlastRadius(null);setOwnership(null);setRepoInfo(null);setRepoUrl('');setPrData(null);setFolderFilter(null);setLocalDirHandle(null);setLocalSourceKind(null);setArchitectureIncludeTests(false);setArchitectureIncludeBuildOutput(false);setCachedFromId(null);setActiveSymbol(null);setCliDirty([]);localFolderKeyRef.current=null;localFolderSelectionRef.current=null;localFilesRef.current=null;zipKeyRef.current=null;zipArchiveRef.current=null;zipFileRef.current=null;window.history.replaceState({},'',window.location.pathname);}
     function filterByFolder(path){setFolderFilter(function(prev){return prev===path?null:path;});}
     function renderRecentsList(){
-        return React.createElement('div',{className:'sidebar-section'},
-            React.createElement('div',{className:'sidebar-title'},iconLabel('clock','Recent analyses')),
+        return React.createElement('div',{className:'sidebar-scroll'},
             recentAnalyses.length?React.createElement('div',{className:'recent-list'},
-                recentAnalyses.slice(0,8).map(function(item){
+                recentAnalyses.map(function(item){
                     var active=cachedFromId===item.id||(data&&currentAnalysisSource()&&analysisCacheKey(currentAnalysisSource().sourceType,currentAnalysisSource().sourceKey)===item.id);
                     return React.createElement('div',{key:item.id,className:'recent-item'+(active?' active':''),onClick:function(){loadRecentAnalysis(item.id);}},
                         React.createElement('div',{className:'recent-item-main'},
@@ -9537,16 +11057,206 @@
                         ),
                         React.createElement('div',{className:'recent-item-actions'},
                             React.createElement('button',{className:'recent-mini-btn',title:'Re-analyze',onClick:function(e){e.stopPropagation();reanalyzeRecent(item.id);}},'Re-analyze'),
-                            React.createElement('button',{className:'recent-mini-btn danger',title:'Delete cached analysis',onClick:function(e){removeRecentAnalysis(item.id,e);}},'Delete')
+                            React.createElement('button',{className:'recent-mini-btn danger'+(pendingRecentDelete===item.id?' armed':''),title:pendingRecentDelete===item.id?'Click again to delete':'Delete cached analysis',onClick:function(e){requestRecentDelete(item.id,e);}},pendingRecentDelete===item.id?'Confirm?':'Delete')
                         )
                     );
                 })
             ):React.createElement('div',{className:'recent-empty'},'Analyses you run are cached here so the same tree is not fetched twice.')
         );
     }
+    function renderColorByControl(){
+        if(graphConfig.vizType!=='graph'&&graphConfig.vizType!=='graph3d')return null;
+        return React.createElement('div',{className:'color-by',role:'group','aria-label':'Color graph by'},
+            React.createElement('span',{className:'color-by-label'},'Color'),
+            React.createElement('button',{type:'button',className:'color-by-btn'+(colorMode==='folder'?' active':''),onClick:function(){setColorMode('folder');}},'Folder'),
+            React.createElement('button',{type:'button',className:'color-by-btn'+(colorMode==='layer'?' active':''),onClick:function(){setColorMode('layer');}},'Layer'),
+            React.createElement('button',{type:'button',className:'color-by-btn'+(colorMode==='churn'?' active':''),onClick:function(){setColorMode('churn');}},'Churn')
+        );
+    }
+    function renderCodeViewPrefs(){
+        if(graphConfig.vizType!=='code')return null;
+        return React.createElement('div',{className:'color-by code-view-prefs',role:'toolbar','aria-label':'Code view options'},
+            React.createElement('button',{type:'button',className:'color-by-btn'+(codeViewExpand?' active':''),'aria-pressed':codeViewExpand?'true':'false',onClick:function(){setCodeViewExpand(!codeViewExpand);}},'Expand All'),
+            React.createElement('button',{type:'button',className:'color-by-btn'+(codeViewWrap?' active':''),'aria-pressed':codeViewWrap?'true':'false',onClick:function(){setCodeViewWrap(!codeViewWrap);}},'Wrap Text')
+        );
+    }
+    function renderSidebarEmpty(title,desc){
+        return React.createElement('div',{className:'empty-state'},
+            React.createElement(Icon,{name:'search',size:'xxl',className:'empty-icon'}),
+            React.createElement('div',{className:'empty-title'},title),
+            React.createElement('div',{className:'empty-desc'},desc)
+        );
+    }
+    function renderOverviewPane(){
+        if(!data)return renderSidebarEmpty('No Repository','Enter a GitHub URL, open a folder, or load a ZIP archive');
+        return React.createElement('div',{className:'sidebar-scroll'},
+            React.createElement('div',{className:'health-score',style:{marginBottom:10}},
+                React.createElement(HealthRing,{score:health.score,grade:health.grade}),
+                React.createElement('div',{className:'health-info'},
+                    React.createElement('div',{className:'health-grade',style:{color:health.score>=80?'var(--green)':health.score>=60?'var(--orange)':'var(--red)'}},health.score,'/100'),
+                    React.createElement('div',{className:'health-label'},'Health Score')
+                )
+            ),
+            (cachedFromId||cliDirty.length>0)&&React.createElement('div',{className:'stale-banner'},
+                React.createElement('span',null,cliDirty.length?'Watched files changed. Re-analyze to refresh.':'Cached analysis. Re-analyze to refresh.'),
+                React.createElement('button',{className:'top-btn primary',onClick:refreshAnalysis,disabled:loading},'Re-analyze')
+            ),
+            React.createElement('div',{className:'stats-grid'},
+                React.createElement('div',{className:'stat-card'},React.createElement('div',{className:'stat-value'},data.stats.files),React.createElement('div',{className:'stat-label'},'Files')),
+                React.createElement('div',{className:'stat-card'},React.createElement('div',{className:'stat-value'},data.stats.functions),React.createElement('div',{className:'stat-label'},'Functions')),
+                React.createElement('div',{className:'stat-card'},React.createElement('div',{className:'stat-value'},data.stats.connections),React.createElement('div',{className:'stat-label'},'Links')),
+                React.createElement('div',{className:'stat-card'+(data.stats.dead>10?' warn':''),style:{cursor:data.stats.dead>0?'pointer':'default'},onClick:function(){if(data.stats.dead>0)setShowUnused(true);}},React.createElement('div',{className:'stat-value'},data.stats.dead),React.createElement('div',{className:'stat-label'},'Unused'))
+            ),
+            React.createElement('div',{className:'loc-stat'},
+                React.createElement('div',{className:'loc-value'},data.stats.loc?data.stats.loc.toLocaleString():'0'),
+                React.createElement('div',{className:'loc-label'},'Lines of Code')
+            ),
+            data.stats.languages&&data.stats.languages.length>0&&React.createElement(React.Fragment,null,
+                React.createElement('div',{className:'lang-bar'},
+                    data.stats.languages.slice(0,6).map(function(l,i){return React.createElement('div',{key:l.ext,className:'lang-bar-segment',style:{width:l.pct+'%',background:COLORS[i%COLORS.length]}});})
+                ),
+                React.createElement('div',{className:'lang-legend'},
+                    data.stats.languages.slice(0,6).map(function(l,i){return React.createElement('div',{key:l.ext,className:'lang-item'},
+                        React.createElement('div',{className:'lang-dot',style:{background:COLORS[i%COLORS.length]}}),
+                        React.createElement('span',null,l.ext,' ',l.pct,'%')
+                    );})
+                )
+            )
+        );
+    }
+    function renderFilesPane(){
+        if(!data)return renderSidebarEmpty('No Files','Analyze a repository to browse its folder tree');
+        return React.createElement(React.Fragment,null,
+            folderFilter&&React.createElement('div',{className:'sidebar-filter'},
+                React.createElement('button',{className:'top-btn',style:{width:'100%'},onClick:function(){setFolderFilter(null);}},
+                    React.createElement(Icon,{name:'close',size:'s'}),
+                    ' Clear Filter: ',
+                    folderFilter
+                )
+            ),
+            React.createElement('div',{className:'sidebar-scroll'},React.createElement(TreeNode,{node:data.tree,selected:selected,onSelect:goToFile,expanded:expandedPaths,toggle:togglePath,filterFolder:filterByFolder,activeFilter:folderFilter}))
+        );
+    }
+    function beginCodeCardDrag(e,file){
+        if(e.pointerType==='mouse'&&e.button!==0)return;
+        e.stopPropagation();
+        var node=graphNodesByIdRef.current[file.path];
+        var transform=codeZoomTransformRef.current||{k:1,x:0,y:0};
+        var k=Number(transform.k);
+        if(!isFinite(k)||k<=0)k=1;
+        if(!node){
+            selectFile(file.path);
+            return;
+        }
+        var startX=e.clientX,startY=e.clientY,originX=node.x,originY=node.y,moved=false;
+        node.fx=node.x;node.fy=node.y;
+        function writePlacement(){
+            var size=codeCardSizesRef.current[file.path]||codeCardSize(file,currentCodeCardPrefs());
+            var prev=codeCardPlacementRef.current[file.path]||{};
+            codeCardPlacementRef.current[file.path]={
+                left:node.fx-size.width/2,
+                top:node.fy-size.height/2,
+                x:node.fx,
+                y:node.fy,
+                width:size.width,
+                height:size.height,
+                folder:file.folder||prev.folder||'root'
+            };
+        }
+        function onMove(ev){
+            var delta=codeCardDragDelta(ev.clientX,ev.clientY,startX,startY,k,3);
+            if(delta.moved){
+                moved=true;
+                codeCardUserPinnedRef.current.add(file.path);
+            }
+            node.x=node.fx=originX+delta.x;
+            node.y=node.fy=originY+delta.y;
+            writePlacement();
+            syncCodeCards();
+            redrawGraphLinksAndNodes();
+            if(updateHullsRef.current)updateHullsRef.current();
+        }
+        function onUp(){
+            window.removeEventListener('pointermove',onMove);
+            window.removeEventListener('pointerup',onUp);
+            window.removeEventListener('pointercancel',onUp);
+            var end=noteCodeCardPointerEnd(moved);
+            if(end.ignoreNextClick){
+                codeCardIgnoreClickRef.current=true;
+                setTimeout(function(){codeCardIgnoreClickRef.current=false;},400);
+            }
+            if(moved){
+                codeCardUserPinnedRef.current.add(file.path);
+                node.x=node.fx;node.y=node.fy;
+                writePlacement();
+                syncCodeCards();
+                redrawGraphLinksAndNodes();
+                if(updateHullsRef.current)updateHullsRef.current();
+            }
+            if(end.select)selectFile(file.path);
+        }
+        window.addEventListener('pointermove',onMove);
+        window.addEventListener('pointerup',onUp);
+        window.addEventListener('pointercancel',onUp);
+    }
+    function beginCodeCardResize(e,file,edge){
+        if(e.pointerType==='mouse'&&e.button!==0)return;
+        e.stopPropagation();
+        e.preventDefault();
+        var node=graphNodesByIdRef.current[file.path];
+        var size=codeCardSizesRef.current[file.path]||applyCodeCardUserSize(codeCardSize(file,currentCodeCardPrefs()),codeCardUserSizeRef.current[file.path]);
+        if(!node)return;
+        var transform=codeZoomTransformRef.current||{k:1,x:0,y:0};
+        var k=Number(transform.k);
+        if(!isFinite(k)||k<=0)k=1;
+        var startX=e.clientX,startY=e.clientY,startW=size.width,startH=size.height;
+        var left=node.x-size.width/2,top=node.y-size.height/2,moved=false;
+        function writeSize(nextSize){
+            codeCardUserSizeRef.current[file.path]={width:nextSize.width,height:nextSize.height};
+            codeCardSizesRef.current[file.path]=applyCodeCardUserSize(codeCardSize(file,currentCodeCardPrefs()),nextSize);
+            var live=codeCardSizesRef.current[file.path];
+            node.x=node.fx=left+live.width/2;
+            node.y=node.fy=top+live.height/2;
+            var prev=codeCardPlacementRef.current[file.path]||{};
+            codeCardPlacementRef.current[file.path]={
+                left:left,
+                top:top,
+                x:node.fx,
+                y:node.fy,
+                width:live.width,
+                height:live.height,
+                folder:file.folder||prev.folder||'root'
+            };
+        }
+        function onMove(ev){
+            var delta=codeCardResizeDelta(ev.clientX,ev.clientY,startX,startY,startW,startH,k,edge);
+            if(Math.abs(delta.dx)+Math.abs(delta.dy)>2){
+                moved=true;
+                codeCardUserPinnedRef.current.add(file.path);
+            }
+            writeSize(clampCodeCardResize(delta.width,delta.height,currentCodeCardPrefs()));
+            syncCodeCards();
+            redrawGraphLinksAndNodes();
+            if(updateHullsRef.current)updateHullsRef.current();
+        }
+        function onUp(){
+            window.removeEventListener('pointermove',onMove);
+            window.removeEventListener('pointerup',onUp);
+            window.removeEventListener('pointercancel',onUp);
+            if(moved){
+                codeCardUserPinnedRef.current.add(file.path);
+                syncCodeCards();
+                redrawGraphLinksAndNodes();
+                if(updateHullsRef.current)updateHullsRef.current();
+            }
+        }
+        window.addEventListener('pointermove',onMove);
+        window.addEventListener('pointerup',onUp);
+        window.addEventListener('pointercancel',onUp);
+    }
     function renderCodeFileCard(file,isPrimary){
         if(!file)return null;
-        var sourceState=fileSourceDisplayState(file,canReadLiveFileSource());
+        var sourceState=fileSourceDisplayState(file,canReadLiveFileSource(),codeSourceFailed);
         var body;
         if(sourceState==='ready'){
             var lines=asCodeLines(highlightSyntax(file.content||'',file.name));
@@ -9558,19 +11268,35 @@
                     );
                 })
             );
+        }else if(sourceState==='failed'){
+            body=React.createElement('div',{className:'code-card-source-status'},
+                React.createElement('div',{className:'empty-desc'},'Source unavailable'),
+                React.createElement('button',{className:'code-card-retry',type:'button',onClick:function(e){
+                    e.stopPropagation();
+                    retryCodeSource(file.path);
+                }},'Retry')
+            );
         }else{
             var message=sourceState==='skipped'
                 ?(file.analysisSkipped==='oversized'?'Skipped during analysis (file too large)':'File was not fetched during analysis')
                 :(sourceState==='loading'?'Loading source...':'Reopen this project to read source');
             body=React.createElement('div',{className:'empty-desc',style:{padding:'12px'}},message);
         }
-        return React.createElement('div',{key:file.path,className:'code-card'+(isPrimary?' primary':' linked'),onClick:function(){if(selected&&selected.path!==file.path)selectFile(file.path);}},
-            React.createElement('div',{className:'code-card-head',onClick:function(e){e.stopPropagation();selectFile(file.path);}},
+        var cardPrefs=currentCodeCardPrefs();
+        var cardSize=applyCodeCardUserSize(codeCardSize(file,cardPrefs),codeCardUserSizeRef.current[file.path]);
+        var pills=isPrimary?codeCardSymbolPills(file,data?data.connections:[],cardPrefs):[];
+        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;
+            if(taken.ignore){e.stopPropagation();return;}
+            if(!selected||selected.path!==file.path)selectFile(file.path);
+        }},
+            React.createElement('div',{className:'code-card-head',onPointerDown:function(e){beginCodeCardDrag(e,file);}},
                 React.createElement('div',null,
                     React.createElement('div',{className:'code-card-name'},file.name),
                     React.createElement('div',{className:'code-card-path'},file.path)
                 ),
-                React.createElement('span',{className:'badge badge-default'},isPrimary?'selected':'linked')
+                React.createElement('span',{className:'badge badge-default'},isPrimary?'selected':'open')
             ),
             React.createElement('div',{className:'code-card-body',onClick:function(e){
                 var mark=e.target.closest?e.target.closest('[data-sym]'):null;
@@ -9579,59 +11305,39 @@
                     var name=mark.getAttribute('data-sym');
                     setActiveSymbol(function(prev){return prev===name?null:name;});
                 }
-            }},body)
+            },onScroll:isPrimary&&cardSize.clipped?function(e){setCodePillScroll(e.currentTarget.scrollTop);}:undefined},body),
+            pills.map(function(pill){
+                var top=codeCardPillViewTop(pill.top,isPrimary?codePillScroll:0,cardSize.height,CODE_CARD_HEAD_HEIGHT);
+                if(top==null)return null;
+                return React.createElement('button',{
+                    key:pill.name+':'+pill.line,
+                    className:'code-line-pill '+pill.kind+(activeSymbol===pill.name?' active':''),
+                    style:{top:top+'px'},
+                    title:pill.name,
+                    onClick:function(e){
+                        e.stopPropagation();
+                        setActiveSymbol(function(prev){return prev===pill.name?null:pill.name;});
+                    }
+                },pill.name);
+            }),
+            React.createElement('div',{className:'code-card-resize code-card-resize-e','data-code-resize':'e',onPointerDown:function(e){beginCodeCardResize(e,file,'e');}}),
+            React.createElement('div',{className:'code-card-resize code-card-resize-s','data-code-resize':'s',onPointerDown:function(e){beginCodeCardResize(e,file,'s');}}),
+            React.createElement('div',{className:'code-card-resize code-card-resize-se','data-code-resize':'se',onPointerDown:function(e){beginCodeCardResize(e,file,'se');}})
         );
     }
     function renderCodeView(){
-        var primary=codeViewFiles[0]||null;
-        var linked=codeViewFiles.slice(1);
-        return React.createElement('div',{className:'code-split'},
-            React.createElement('div',{className:'code-split-graph',style:{flexBasis:(100-codePanePercent)+'%'}},
-                React.createElement('svg',{ref:svgRef})
+        var primaryPath=selected&&selected.path;
+        return React.createElement('div',{className:'code-canvas',ref:codeCanvasRef},
+            React.createElement('svg',{ref:svgRef}),
+            React.createElement('div',{className:'code-canvas-cards',ref:codeCardsLayerRef},
+                codeViewFiles.map(function(file){return renderCodeFileCard(file,file.path===primaryPath);})
             ),
-            React.createElement('div',{className:'code-split-resize',onPointerDown:function(e){
-                if(e.pointerType==='mouse'&&e.button!==0)return;
-                e.preventDefault();
-                var handle=e.currentTarget;
-                var wrap=handle.parentNode;
-                var stacked=codeSplitIsStacked(wrap);
-                handle.classList.add('active');
-                try{if(handle.setPointerCapture)handle.setPointerCapture(e.pointerId);}catch(err){}
-                function onMove(ev){
-                    if(!wrap)return;
-                    setCodePanePercent(codeSplitPanePercent(wrap.getBoundingClientRect(),ev,stacked));
-                }
-                function onUp(){
-                    handle.classList.remove('active');
-                    window.removeEventListener('pointermove',onMove);
-                    window.removeEventListener('pointerup',onUp);
-                    window.removeEventListener('pointercancel',onUp);
-                }
-                window.addEventListener('pointermove',onMove);
-                window.addEventListener('pointerup',onUp);
-                window.addEventListener('pointercancel',onUp);
-            }}),
-            React.createElement('div',{className:'code-split-pane',style:{flexBasis:codePanePercent+'%'}},
-                React.createElement('div',{className:'code-split-head'},
-                    React.createElement('div',{className:'code-split-title'},'Code'),
-                    React.createElement('div',{className:'code-split-hint'},selected?'Click a symbol to highlight it across these files':'Click a node to read it next to the graph')
-                ),
-                codeViewSymbols.length>0&&React.createElement('div',{className:'code-sym-row'},
-                    codeViewSymbols.slice(0,24).map(function(sym){
-                        return React.createElement('button',{key:sym.name,className:'code-sym-chip '+sym.kind+(activeSymbol===sym.name?' active':''),onClick:function(){setActiveSymbol(function(prev){return prev===sym.name?null:sym.name;});}},sym.name);
+            React.createElement('div',{className:'code-canvas-hud'},
+                React.createElement('div',{className:'code-canvas-hint'},codeViewFiles.length?'Open files from leftover nodes or the Files tree. Open cards stay put. Wheel pans · Ctrl+wheel zooms.':'No files to open as cards.'),
+                codeViewSymbols.length>0&&React.createElement('div',{className:'code-sym-list'},
+                    codeViewSymbols.map(function(sym){
+                        return React.createElement('button',{key:sym.name,className:'code-sym-chip '+sym.kind+(activeSymbol===sym.name?' active':''),title:sym.name,onClick:function(){setActiveSymbol(function(prev){return prev===sym.name?null:sym.name;});}},sym.name);
                     })
-                ),
-                React.createElement('div',{className:'code-file-tabs'},
-                    codeViewFiles.map(function(file,idx){
-                        return React.createElement('button',{key:file.path,className:'code-file-tab'+(primary&&file.path===primary.path?' active':'')+(idx>0?' connected':''),onClick:function(){selectFile(file.path);}},file.name);
-                    })
-                ),
-                React.createElement('div',{className:'code-cards'},
-                    primary?renderCodeFileCard(primary,true):React.createElement('div',{className:'empty-state'},
-                        React.createElement('div',{className:'empty-title'},'Select a file'),
-                        React.createElement('div',{className:'empty-desc'},'Click a node on the map to read its code and connected files.')
-                    ),
-                    linked.map(function(file){return renderCodeFileCard(file,false);})
                 )
             )
         );
@@ -9875,8 +11581,8 @@
             React.createElement('div',{className:'sidebar'+(isMobile&&mobilePanel==='explorer'?' mobile-visible':''),style:{width:isMobile?'100vw':sidebarWidth}},
                 isMobile&&React.createElement('div',{className:'mobile-panel-header'},
                     React.createElement('div',{className:'mobile-panel-meta'},
-                        React.createElement('div',{className:'mobile-panel-title'},'Explorer'),
-                        React.createElement('div',{className:'mobile-panel-subtitle'},data?(folderFilter?'Filtered by '+folderFilter:data.files.length+' files ready to browse'):'Analyze a repo or open a folder')
+                        React.createElement('div',{className:'mobile-panel-title'},leftTab==='overview'?'Overview':leftTab==='files'?'Files':'Recents'),
+                        React.createElement('div',{className:'mobile-panel-subtitle'},leftTab==='recents'?(recentAnalyses.length?recentAnalyses.length+' cached analyses':'No cached analyses'):data?(folderFilter?'Filtered by '+folderFilter:data.files.length+' files ready to browse'):'Analyze a repo or open a folder')
                     ),
                     React.createElement('button',{className:'mobile-panel-close',type:'button','aria-label':'Close explorer panel',onClick:function(){setMobilePanel(null);}},
                         React.createElement(Icon,{name:'close',size:'m'})
@@ -9889,70 +11595,15 @@
                     function onUp(){document.removeEventListener('mousemove',onMove);document.removeEventListener('mouseup',onUp);}
                     document.addEventListener('mousemove',onMove);document.addEventListener('mouseup',onUp);
                 }}),
-                data?React.createElement(React.Fragment,null,
-                    React.createElement('div',{className:'sidebar-section'},
-                        React.createElement('div',{className:'health-score'},
-                            React.createElement(HealthRing,{score:health.score,grade:health.grade}),
-                            React.createElement('div',{className:'health-info'},
-                                React.createElement('div',{className:'health-grade',style:{color:health.score>=80?'var(--green)':health.score>=60?'var(--orange)':'var(--red)'}},health.score,'/100'),
-                                React.createElement('div',{className:'health-label'},'Health Score')
-                            )
-                        )
-                    ),
-                    React.createElement('div',{className:'sidebar-section'},
-                        React.createElement('div',{className:'sidebar-title'},'Color By'),
-                        React.createElement('div',{className:'view-modes'},
-                            React.createElement('div',{className:'view-mode'+(colorMode==='folder'?' active':''),onClick:function(){setColorMode('folder');}},React.createElement(Icon,{name:'folder',size:'m',className:'view-mode-icon'}),'Folder'),
-                            React.createElement('div',{className:'view-mode'+(colorMode==='layer'?' active':''),onClick:function(){setColorMode('layer');}},React.createElement(Icon,{name:'layers',size:'m',className:'view-mode-icon'}),'Layer'),
-                            React.createElement('div',{className:'view-mode'+(colorMode==='churn'?' active':''),onClick:function(){setColorMode('churn');}},React.createElement(Icon,{name:'activity',size:'m',className:'view-mode-icon'}),'Churn')
-                        )
-                    ),
-                    (cachedFromId||cliDirty.length>0)&&React.createElement('div',{className:'sidebar-section'},
-                        React.createElement('div',{className:'stale-banner'},
-                            React.createElement('span',null,cliDirty.length?'Watched files changed. Re-analyze to refresh.':'Cached analysis. Re-analyze to refresh.'),
-                            React.createElement('button',{className:'top-btn primary',onClick:refreshAnalysis,disabled:loading},'Re-analyze')
-                        )
-                    ),
-                    renderRecentsList(),
-                    React.createElement('div',{className:'sidebar-section'},
-                        React.createElement('div',{className:'stats-grid'},
-                            React.createElement('div',{className:'stat-card'},React.createElement('div',{className:'stat-value'},data.stats.files),React.createElement('div',{className:'stat-label'},'Files')),
-                            React.createElement('div',{className:'stat-card'},React.createElement('div',{className:'stat-value'},data.stats.functions),React.createElement('div',{className:'stat-label'},'Functions')),
-                            React.createElement('div',{className:'stat-card'},React.createElement('div',{className:'stat-value'},data.stats.connections),React.createElement('div',{className:'stat-label'},'Links')),
-                            React.createElement('div',{className:'stat-card'+(data.stats.dead>10?' warn':''),style:{cursor:data.stats.dead>0?'pointer':'default'},onClick:function(){if(data.stats.dead>0)setShowUnused(true);}},React.createElement('div',{className:'stat-value'},data.stats.dead),React.createElement('div',{className:'stat-label'},'Unused'))
-                        ),
-                        React.createElement('div',{className:'loc-stat'},
-                            React.createElement('div',{className:'loc-value'},data.stats.loc?data.stats.loc.toLocaleString():'0'),
-                            React.createElement('div',{className:'loc-label'},'Lines of Code')
-                        ),
-                        data.stats.languages&&data.stats.languages.length>0&&React.createElement(React.Fragment,null,
-                            React.createElement('div',{className:'lang-bar'},
-                                data.stats.languages.slice(0,6).map(function(l,i){return React.createElement('div',{key:l.ext,className:'lang-bar-segment',style:{width:l.pct+'%',background:COLORS[i%COLORS.length]}});})
-                            ),
-                            React.createElement('div',{className:'lang-legend'},
-                                data.stats.languages.slice(0,6).map(function(l,i){return React.createElement('div',{key:l.ext,className:'lang-item'},
-                                    React.createElement('div',{className:'lang-dot',style:{background:COLORS[i%COLORS.length]}}),
-                                    React.createElement('span',null,l.ext,' ',l.pct,'%')
-                                );})
-                            )
-                        )
-                    ),
-                    React.createElement('div',{className:'sidebar-section',style:{paddingBottom:8}},
-                        React.createElement('div',{className:'sidebar-title'},'Explorer'),
-                        folderFilter&&React.createElement('button',{className:'top-btn',style:{width:'100%',marginTop:8},onClick:function(){setFolderFilter(null);}},
-                            React.createElement(Icon,{name:'close',size:'s'}),
-                            ' Clear Filter: ',
-                            folderFilter
-                        )
-                    ),
-                    React.createElement('div',{className:'sidebar-scroll'},React.createElement(TreeNode,{node:data.tree,selected:selected,onSelect:selectFile,expanded:expandedPaths,toggle:togglePath,filterFolder:filterByFolder,activeFilter:folderFilter}))
-                ):React.createElement(React.Fragment,null,
-                    renderRecentsList(),
-                    React.createElement('div',{className:'empty-state'},
-                        React.createElement(Icon,{name:'search',size:'xxl',className:'empty-icon'}),
-                        React.createElement('div',{className:'empty-title'},'No Repository'),
-                        React.createElement('div',{className:'empty-desc'},'Enter a GitHub URL, open a folder, or load a ZIP archive')
-                    )
+                React.createElement('div',{className:'sidebar-tabs',role:'tablist','aria-label':'Left rail'},
+                    React.createElement('button',{type:'button',role:'tab','aria-selected':leftTab==='overview',className:'sidebar-tab'+(leftTab==='overview'?' active':''),onClick:function(){setLeftTab('overview');}},'Overview'),
+                    React.createElement('button',{type:'button',role:'tab','aria-selected':leftTab==='files',className:'sidebar-tab'+(leftTab==='files'?' active':''),onClick:function(){setLeftTab('files');}},'Files'),
+                    React.createElement('button',{type:'button',role:'tab','aria-selected':leftTab==='recents',className:'sidebar-tab'+(leftTab==='recents'?' active':''),onClick:function(){setLeftTab('recents');}},'Recents')
+                ),
+                React.createElement('div',{className:'sidebar-pane'},
+                    leftTab==='overview'&&renderOverviewPane(),
+                    leftTab==='files'&&renderFilesPane(),
+                    leftTab==='recents'&&renderRecentsList()
                 )
             ),
             React.createElement('div',{className:'canvas-area'},
@@ -10053,7 +11704,9 @@
                             blastRadius.fnsUsed>0?' • '+blastRadius.fnsUsed+' fns used':''
                         )
                     ),
-                    graphConfig.vizType!=='architecture'&&graphConfig.vizType!=='code'&&React.createElement('div',{className:'legend'+(legendCollapsed?' collapsed':'')},
+                    renderColorByControl(),
+                    renderCodeViewPrefs(),
+                    graphConfig.vizType!=='architecture'&&graphConfig.vizType!=='code'&&React.createElement('div',{className:'legend'+(legendCollapsed?' collapsed':'')+((graphConfig.vizType==='graph'||graphConfig.vizType==='graph3d')?' with-color-by':'')},
                         React.createElement('div',{className:'legend-header',onClick:function(){setLegendCollapsed(!legendCollapsed);}},
                             React.createElement('div',{className:'legend-title',style:{margin:0}},colorMode==='folder'?'Folders':colorMode==='layer'?'Layers':'Churn'),
                             React.createElement('span',{className:'legend-toggle'},'▼')
@@ -10088,9 +11741,9 @@
                 data?React.createElement(React.Fragment,null,
                     React.createElement('div',{className:'panel-tabs'},
                         React.createElement('button',{className:'panel-tab'+(rightTab==='details'?' active':''),onClick:function(){setRightTab('details');setDrillDown(null);}},selected?iconLabel('file','FILE'):(graphConfig.vizType==='architecture'?iconLabel('layers','ARCH'):iconLabel('search','ISSUES'))),
-                        React.createElement('button',{className:'panel-tab'+(rightTab==='patterns'?' active':''),onClick:function(){setRightTab('patterns');setDrillDown(null);}},iconLabel('puzzle','PATTERNS'),' ',React.createElement('span',{className:'badge badge-default'},data.patterns.length)),
-                        React.createElement('button',{className:'panel-tab'+(rightTab==='security'?' active':''),onClick:function(){setRightTab('security');setDrillDown(null);}},iconLabel('security','SECURITY'),data.stats.security>0&&React.createElement('span',{className:'view-mode-badge',style:{marginLeft:4}},data.stats.security)),
-                        React.createElement('button',{className:'panel-tab'+(rightTab==='suggestions'?' active':''),onClick:function(){setRightTab('suggestions');setDrillDown(null);}},iconLabel('action','ACTIONS'),data.suggestions&&data.suggestions.length>0&&React.createElement('span',{className:'view-mode-badge',style:{marginLeft:4}},data.suggestions.length))
+                        React.createElement('button',{className:'panel-tab'+(rightTab==='patterns'?' active':''),onClick:function(){setRightTab('patterns');setDrillDown(null);}},iconLabel('puzzle','PATTERNS'),React.createElement('span',{className:'panel-tab-pill'},data.patterns.length)),
+                        React.createElement('button',{className:'panel-tab'+(rightTab==='security'?' active':''),onClick:function(){setRightTab('security');setDrillDown(null);}},iconLabel('security','SECURITY'),data.stats.security>0&&React.createElement('span',{className:'panel-tab-pill alert'},data.stats.security)),
+                        React.createElement('button',{className:'panel-tab'+(rightTab==='suggestions'?' active':''),onClick:function(){setRightTab('suggestions');setDrillDown(null);}},iconLabel('action','ACTIONS'),data.suggestions&&data.suggestions.length>0&&React.createElement('span',{className:'panel-tab-pill alert'},data.suggestions.length))
                     ),
                     React.createElement('div',{className:'panel-content'},
                         rightTab==='details'&&(selected?React.createElement(React.Fragment,null,
@@ -10132,12 +11785,12 @@
                                     ),
                                     blastRadius.affected.length>0&&React.createElement('div',{className:'blast-detail'},
                                         React.createElement('div',{style:{fontSize:9,fontWeight:600,marginBottom:6}},'Files that import from this:'),
-                                        blastRadius.affected.slice(0,8).map(function(path){return React.createElement('div',{key:path,className:'blast-file',onClick:function(){selectFile(path);}},React.createElement(Icon,{name:'file',size:'s'}),' ',path.split('/').pop());}),
+                                        blastRadius.affected.slice(0,8).map(function(path){return React.createElement('div',{key:path,className:'blast-file',onClick:function(){goToFile(path);}},React.createElement(Icon,{name:'file',size:'s'}),' ',path.split('/').pop());}),
                                         blastRadius.affected.length>8&&React.createElement('div',{style:{fontSize:9,color:'var(--t3)',marginTop:4}},'+',blastRadius.affected.length-8,' more')
                                     ),
                                     (blastRadius.dependencies||[]).length>0&&React.createElement('div',{className:'blast-detail',style:{marginTop:8}},
                                         React.createElement('div',{style:{fontSize:9,fontWeight:600,marginBottom:6,color:'var(--orange)'}},'Dependencies (risk if these change):'),
-                                        blastRadius.dependencies.slice(0,5).map(function(path){return React.createElement('div',{key:path,className:'blast-file',onClick:function(){selectFile(path);}},React.createElement(Icon,{name:'file',size:'s'}),' ',path.split('/').pop());}),
+                                        blastRadius.dependencies.slice(0,5).map(function(path){return React.createElement('div',{key:path,className:'blast-file',onClick:function(){goToFile(path);}},React.createElement(Icon,{name:'file',size:'s'}),' ',path.split('/').pop());}),
                                         blastRadius.dependencies.length>5&&React.createElement('div',{style:{fontSize:9,color:'var(--t3)',marginTop:4}},'+',blastRadius.dependencies.length-5,' more')
                                     )
                                 )
@@ -10179,7 +11832,7 @@
                                                             React.createElement('span',{className:'conn-fn-name'},fn.name,'()'),
                                                             React.createElement('span',{className:'conn-fn-count'},fn.count,'×')
                                                         );}),
-                                                        React.createElement('div',{className:'conn-goto',onClick:function(){selectFile(conn.file);}},'→ View ',conn.file.split('/').pop())
+                                                        React.createElement('div',{className:'conn-goto',onClick:function(){goToFile(conn.file);}},'→ View ',conn.file.split('/').pop())
                                                     )
                                                 );
                                             }),
@@ -10201,7 +11854,7 @@
                                                             React.createElement('span',{className:'conn-fn-name'},fn.name,'()'),
                                                             React.createElement('span',{className:'conn-fn-count'},fn.count,'×')
                                                         );}),
-                                                        React.createElement('div',{className:'conn-goto',onClick:function(){selectFile(conn.file);}},'→ View ',conn.file.split('/').pop())
+                                                        React.createElement('div',{className:'conn-goto',onClick:function(){goToFile(conn.file);}},'→ View ',conn.file.split('/').pop())
                                                     )
                                                 );
                                             }),
@@ -10244,7 +11897,7 @@
                                                 fn.code&&React.createElement('div',{className:'fn-code'},fn.code),
                                                 st&&st.callers&&st.callers.length>0&&React.createElement('div',{className:'fn-callers'},
                                                     React.createElement('div',{className:'fn-callers-title'},'External callers:'),
-                                                    st.callers.slice(0,8).map(function(c,i){return React.createElement('div',{key:i,className:'fn-caller',onClick:function(){selectFile(c.file);}},
+                                                    st.callers.slice(0,8).map(function(c,i){return React.createElement('div',{key:i,className:'fn-caller',onClick:function(){goToFile(c.file);}},
                                                         React.createElement(Icon,{name:'file',size:'s'}),
                                                         React.createElement('span',null,c.name),
                                                         React.createElement('span',{style:{marginLeft:'auto',color:'var(--t3)'}},c.count,'×')
@@ -10361,9 +12014,10 @@
                     ),
                     graphConfig.vizType!=='architecture'&&React.createElement(React.Fragment,null,
                         React.createElement('div',{style:{fontSize:10,fontWeight:600,color:'var(--t3)',textTransform:'uppercase',marginBottom:8,marginTop:data&&data.architectureDiagram?16:0}},'Graph Visualization'),
+                        !graphSvgExportEnabled(graphConfig.vizType)&&React.createElement('div',{style:{fontSize:9,color:'var(--t2)',marginBottom:10,lineHeight:1.4}},'Code cards are HTML overlays, not SVG. Switch to Graph to export an image.'),
                         React.createElement('div',{className:'export-options'},
-                            React.createElement('div',{className:'export-option',onClick:function(){exportSVG();setShowExport(false);}},React.createElement('div',{className:'export-option-icon'},React.createElement(Icon,{name:'image',size:'xl'})),React.createElement('div',{className:'export-option-label'},'SVG Image')),
-                            React.createElement('div',{className:'export-option',onClick:function(){exportPDF();setShowExport(false);}},React.createElement('div',{className:'export-option-icon'},React.createElement(Icon,{name:'file-pdf',size:'xl'})),React.createElement('div',{className:'export-option-label'},'PDF Document')),
+                            React.createElement('div',{className:'export-option'+(graphSvgExportEnabled(graphConfig.vizType)?'':' disabled'),'aria-disabled':graphSvgExportEnabled(graphConfig.vizType)?undefined:'true',onClick:function(){if(!graphSvgExportEnabled(graphConfig.vizType))return;exportSVG();setShowExport(false);}},React.createElement('div',{className:'export-option-icon'},React.createElement(Icon,{name:'image',size:'xl'})),React.createElement('div',{className:'export-option-label'},'SVG Image')),
+                            React.createElement('div',{className:'export-option'+(graphConfig.vizType==='graph'?'':' disabled'),'aria-disabled':graphConfig.vizType==='graph'?undefined:'true',onClick:function(){if(graphConfig.vizType!=='graph')return;exportPDF();setShowExport(false);}},React.createElement('div',{className:'export-option-icon'},React.createElement(Icon,{name:'file-pdf',size:'xl'})),React.createElement('div',{className:'export-option-label'},'PDF Document')),
                             React.createElement('div',{className:'export-option',onClick:function(){copyLink();setShowExport(false);}},React.createElement('div',{className:'export-option-icon'},React.createElement(Icon,{name:'link',size:'xl'})),React.createElement('div',{className:'export-option-label'},'Share Link'))
                         )
                     ),
@@ -10570,7 +12224,7 @@
                                 React.createElement('div',{style:{fontWeight:600,fontSize:11}},item.name),
                                 item.file&&React.createElement('div',{style:{display:'flex',gap:6}},
                                     React.createElement('button',{className:'view-file-btn',onClick:function(e){e.stopPropagation();openFilePreview(item.file,item.line);}},iconLabel('eye','View')),
-                                    React.createElement('button',{style:{fontSize:9,padding:'4px 8px',background:'var(--acc)',color:'var(--bg0)',border:'none',borderRadius:4,cursor:'pointer'},onClick:function(e){e.stopPropagation();selectFile(item.file);setDrillDown(null);}},'Go to file →')
+                                    React.createElement('button',{style:{fontSize:9,padding:'4px 8px',background:'var(--acc)',color:'var(--bg0)',border:'none',borderRadius:4,cursor:'pointer'},onClick:function(e){e.stopPropagation();goToFile(item.file);setDrillDown(null);}},'Go to file →')
                                 )
                             ),
                             item.file&&React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginTop:4,fontFamily:'monospace'}},item.file,item.line?' : '+item.line:''),
@@ -10586,10 +12240,10 @@
                             item.files&&React.createElement('div',{style:{marginTop:8}},
                                 React.createElement('div',{style:{fontSize:9,color:'var(--t3)',marginBottom:4}},'Locations:'),
                                 item.files.map(function(f,k){return React.createElement('div',{key:k,style:{fontSize:9,color:'var(--t2)',padding:'4px 8px',background:'var(--bg2)',borderRadius:4,marginBottom:4,display:'flex',justifyContent:'space-between',alignItems:'center'}},
-                                    React.createElement('span',{style:{fontFamily:'monospace',cursor:'pointer',flex:1},onClick:function(){selectFile(f.file||f);setDrillDown(null);}},typeof f==='string'?f.split('/').pop():(f.file||'').split('/').pop(),f.line?' :'+f.line:''),
+                                    React.createElement('span',{style:{fontFamily:'monospace',cursor:'pointer',flex:1},onClick:function(){goToFile(f.file||f);setDrillDown(null);}},typeof f==='string'?f.split('/').pop():(f.file||'').split('/').pop(),f.line?' :'+f.line:''),
                                     React.createElement('div',{style:{display:'flex',gap:4}},
                                         React.createElement('button',{className:'view-file-btn',onClick:function(e){e.stopPropagation();openFilePreview(f.file||f,f.line);}},React.createElement(Icon,{name:'eye',size:'s'})),
-                                        React.createElement('span',{style:{color:'var(--acc)',cursor:'pointer'},onClick:function(){selectFile(f.file||f);setDrillDown(null);}},'→')
+                                        React.createElement('span',{style:{color:'var(--acc)',cursor:'pointer'},onClick:function(){goToFile(f.file||f);setDrillDown(null);}},'→')
                                     )
                                 );})
                             )
@@ -10610,10 +12264,10 @@
                         React.createElement('div',{style:{fontSize:12,fontWeight:600,marginBottom:12}},'All Files (',drillDown.data.files.length,')'),
                         drillDown.data.files.map(function(f,j){return React.createElement('div',{key:j,style:getAccentBlockStyle('rgba(0,255,157,0.28)','rgba(0,255,157,0.08)',{padding:12,marginBottom:8})},
                             React.createElement('div',{style:{display:'flex',justifyContent:'space-between',alignItems:'center'}},
-                                React.createElement('div',{style:{fontWeight:600,fontSize:11,cursor:'pointer'},onClick:function(){selectFile(f.path);setDrillDown(null);}},f.name),
+                                React.createElement('div',{style:{fontWeight:600,fontSize:11,cursor:'pointer'},onClick:function(){goToFile(f.path);setDrillDown(null);}},f.name),
                                 React.createElement('button',{className:'view-file-btn',onClick:function(e){e.stopPropagation();openFilePreview(f.path);}},iconLabel('eye','View'))
                             ),
-                            React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginTop:4,fontFamily:'monospace',cursor:'pointer'},onClick:function(){selectFile(f.path);setDrillDown(null);}},f.path),
+                            React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginTop:4,fontFamily:'monospace',cursor:'pointer'},onClick:function(){goToFile(f.path);setDrillDown(null);}},f.path),
                             f.fns&&React.createElement('div',{style:{fontSize:10,color:'var(--orange)',marginTop:4}},f.fns,' functions'),
                             f.lines&&React.createElement('div',{style:{fontSize:10,color:'var(--purple)',marginTop:4}},f.lines,' lines')
                         );})
@@ -10633,10 +12287,10 @@
                         React.createElement('div',{style:{fontSize:12,fontWeight:600,marginBottom:12}},'Location'),
                         React.createElement('div',{style:{background:'var(--bg0)',padding:12,borderRadius:8,marginBottom:16}},
                             React.createElement('div',{style:{display:'flex',justifyContent:'space-between',alignItems:'center'}},
-                                React.createElement('div',{style:{fontWeight:600,fontSize:11,cursor:'pointer'},onClick:function(){selectFile(drillDown.data.path);setDrillDown(null);}},drillDown.data.file),
+                                React.createElement('div',{style:{fontWeight:600,fontSize:11,cursor:'pointer'},onClick:function(){goToFile(drillDown.data.path);setDrillDown(null);}},drillDown.data.file),
                                 React.createElement('button',{className:'view-file-btn',onClick:function(e){e.stopPropagation();openFilePreview(drillDown.data.path,drillDown.data.line);}},iconLabel('eye','View'))
                             ),
-                            React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginTop:4,fontFamily:'monospace',cursor:'pointer'},onClick:function(){selectFile(drillDown.data.path);setDrillDown(null);}},drillDown.data.path),
+                            React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginTop:4,fontFamily:'monospace',cursor:'pointer'},onClick:function(){goToFile(drillDown.data.path);setDrillDown(null);}},drillDown.data.path),
                             drillDown.data.line&&React.createElement('div',{style:{fontSize:10,color:'var(--orange)',marginTop:4}},'Line ',drillDown.data.line)
                         ),
                         drillDown.data.code&&React.createElement(React.Fragment,null,
@@ -10662,10 +12316,10 @@
                             ? getAccentBlockStyle('rgba(167,139,250,0.34)','rgba(167,139,250,0.08)',{padding:12,marginBottom:8})
                             : getAccentBlockStyle('rgba(255,159,67,0.34)','rgba(255,159,67,0.08)',{padding:12,marginBottom:8})},
                             React.createElement('div',{style:{display:'flex',justifyContent:'space-between',alignItems:'center'}},
-                                React.createElement('div',{style:{fontWeight:600,fontSize:11,cursor:'pointer'},onClick:function(){selectFile(f.file);setDrillDown(null);}},f.name||drillDown.data.name),
+                                React.createElement('div',{style:{fontWeight:600,fontSize:11,cursor:'pointer'},onClick:function(){goToFile(f.file);setDrillDown(null);}},f.name||drillDown.data.name),
                                 React.createElement('button',{className:'view-file-btn',onClick:function(e){e.stopPropagation();openFilePreview(f.file,f.line);}},iconLabel('eye','View'))
                             ),
-                            React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginTop:4,fontFamily:'monospace',cursor:'pointer'},onClick:function(){selectFile(f.file);setDrillDown(null);}},f.file),
+                            React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginTop:4,fontFamily:'monospace',cursor:'pointer'},onClick:function(){goToFile(f.file);setDrillDown(null);}},f.file),
                             f.line&&React.createElement('div',{style:{fontSize:10,color:'var(--orange)',marginTop:4}},'Line ',f.line)
                         );}),
                         React.createElement('div',{style:{fontSize:12,fontWeight:600,marginBottom:12,marginTop:16}},'Suggested Action'),
@@ -10761,7 +12415,7 @@
                                     React.createElement('div',{className:'unused-fn-path'},
                                         React.createElement('span',null,React.createElement(Icon,{name:'folder',size:'s'}),' ',fn.folder||'root'),
                                         React.createElement('span',null,'→'),
-                                        React.createElement('span',{className:'unused-fn-file',onClick:function(e){e.stopPropagation();selectFile(fn.file);setShowUnused(false);}},fn.file.split('/').pop())
+                                        React.createElement('span',{className:'unused-fn-file',onClick:function(e){e.stopPropagation();goToFile(fn.file);setShowUnused(false);}},fn.file.split('/').pop())
                                     )
                                 ),
                                 React.createElement('div',{className:'unused-fn-meta'},
diff --git a/tests/code-canvas.test.mjs b/tests/code-canvas.test.mjs
index a428f98..8cd647c 100644
--- a/tests/code-canvas.test.mjs
+++ b/tests/code-canvas.test.mjs
@@ -25,6 +25,28 @@ test('readable labels grow only when zoomed out', () => {
   assert.ok(context.readableLabelScale(0.1) > 2);
 });
 
+test('open Code cards replace their nodes', () => {
+  const cards = new Set(['src/app.js']);
+  assert.equal(context.nodeReplacedByCard('src/app.js', cards), true);
+  assert.equal(context.nodeReplacedByCard('src/math.js', cards), false);
+  assert.equal(context.nodeReplacedByCard('src/app.js', null), false);
+});
+
+test('remaining Code nodes are pushed out from under cards', () => {
+  const cards = new Set(['src/app.js']);
+  const sizes = { 'src/app.js': { width: 400, height: 200 } };
+  const nodes = [
+    { id: 'src/app.js', x: 100, y: 100 },
+    { id: 'src/math.js', x: 110, y: 105 }
+  ];
+  context.unburyNodesFromCards(nodes, cards, sizes, 20);
+  assert.equal(nodes[0].x, 100);
+  assert.equal(nodes[0].y, 100);
+  const buried = Math.abs(nodes[1].x - 100) < 220 && Math.abs(nodes[1].y - 100) < 120;
+  assert.equal(buried, false);
+  assert.ok(Math.abs(nodes[1].x - 100) >= 220 || Math.abs(nodes[1].y - 100) >= 120);
+});
+
 test('connected files include both directions', () => {
   const paths = context.getConnectedFilePaths('src/app.js', [
     { source: 'src/math.js', target: 'src/app.js', fn: 'add' },
@@ -73,10 +95,663 @@ test('visible code files prefer the selection and its neighbors', () => {
     ],
     connections: [{ source: 'a.js', target: 'b.js', fn: 'a' }]
   };
-  const visible = context.collectVisibleCodeFiles('a.js', data, 'src', 4);
+  const visible = context.collectVisibleCodeFiles('a.js', data, 'src');
   assert.deepEqual(J(visible).map((f) => f.path), ['a.js', 'b.js']);
 });
 
+test('visible code files are not capped at four', () => {
+  const files = ['a.js', 'b.js', 'c.js', 'd.js', 'e.js', 'f.js'].map((name) => ({
+    path: name,
+    folder: 'src',
+    name,
+    content: '',
+    functions: []
+  }));
+  const connections = files.slice(1).map((file) => ({ source: 'a.js', target: file.path, fn: 'a' }));
+  const visible = context.collectVisibleCodeFiles('a.js', { files, connections }, 'src');
+  assert.deepEqual(J(visible).map((f) => f.path), ['a.js', 'b.js', 'c.js', 'd.js', 'e.js', 'f.js']);
+  const seeded = context.collectVisibleCodeFiles(null, { files, connections }, 'src');
+  assert.equal(seeded[0].path, 'a.js');
+  assert.equal(seeded.length, 6);
+});
+
+test('Code view seeds the filtered folder when the selection is outside it', () => {
+  const data = {
+    files: [
+      { path: 'src/hub.js', folder: 'src', name: 'hub.js', functions: [] },
+      { path: 'src/leaf.js', folder: 'src', name: 'leaf.js', functions: [] },
+      { path: 'lib/out.js', folder: 'lib', name: 'out.js', functions: [] }
+    ],
+    connections: [
+      { source: 'src/hub.js', target: 'src/leaf.js', fn: 'h' },
+      { source: 'lib/out.js', target: 'src/hub.js', fn: 'o' }
+    ]
+  };
+  const visible = context.collectVisibleCodeFiles('lib/out.js', data, 'src');
+  assert.equal(visible[0].path, 'src/hub.js');
+  assert.ok(visible.every((file) => file.folder === 'src'));
+  assert.equal(visible.some((file) => file.path === 'lib/out.js'), false);
+});
+
+test('Code view seeds cards without waiting for a click', () => {
+  const files = [
+    { path: 'leaf.js', folder: 'src', name: 'leaf.js', functions: [] },
+    { path: 'hub.js', folder: 'src', name: 'hub.js', functions: [] },
+    { path: 'other.js', folder: 'lib', name: 'other.js', functions: [] }
+  ];
+  const connections = [
+    { source: 'hub.js', target: 'leaf.js', fn: 'h' },
+    { source: 'hub.js', target: 'other.js', fn: 'h' }
+  ];
+  const data = { files, connections };
+  assert.equal(context.defaultCodeViewSeed(data, 'src'), 'hub.js');
+  assert.equal(context.codeViewSeedPath(null, data, 'src'), 'hub.js');
+  assert.equal(context.codeViewSeedPath('leaf.js', data, 'src'), 'leaf.js');
+  assert.equal(context.codeViewSeedPath('other.js', data, 'src'), 'hub.js');
+  const visible = context.collectVisibleCodeFiles(null, data, 'src');
+  assert.deepEqual(J(visible).map((f) => f.path), ['hub.js', 'leaf.js']);
+  assert.equal(context.defaultCodeViewSeed({ files: [], connections: [] }, null), null);
+  assert.equal(context.codeViewSeedPath('leaf.js', { files: [], connections: [] }, null), null);
+  assert.equal(context.codeFileNavOpensCard('code'), true);
+  assert.equal(context.codeFileNavOpensCard('graph'), false);
+  assert.equal(context.codeFileNavOpensCard(null), false);
+  assert.equal(context.graphSvgExportEnabled('graph'), true);
+  assert.equal(context.graphSvgExportEnabled('graph3d'), true);
+  assert.equal(context.graphSvgExportEnabled('code'), false);
+});
+
+test('out-of-filter Code nav clears the folder filter so the target card can render', () => {
+  const files = [
+    { path: 'src/a.js', folder: 'src', name: 'a.js' },
+    { path: 'src/b.js', folder: 'src', name: 'b.js' },
+    { path: 'lib/out.js', folder: 'lib', name: 'out.js' }
+  ];
+  const data = { files };
+  assert.equal(context.fileMatchesFolderFilter(files[0], 'src'), true);
+  assert.equal(context.fileMatchesFolderFilter(files[2], 'src'), false);
+  assert.equal(context.pathMatchesFolderFilter('src/a.js', data, 'src'), true);
+  assert.equal(context.pathMatchesFolderFilter('lib/out.js', data, 'src'), false);
+  assert.equal(context.folderFilterAfterCodeNav('src/a.js', data, 'src'), 'src');
+  assert.equal(context.folderFilterAfterCodeNav('lib/out.js', data, 'src'), null);
+  assert.equal(context.folderFilterAfterCodeNav('lib/out.js', data, null), null);
+  assert.deepEqual(
+    J(context.filesForOpenedCodePaths(['src/a.js', 'lib/out.js'], data, 'src')).map((f) => f.path),
+    ['src/a.js']
+  );
+  assert.deepEqual(
+    J(context.filesForOpenedCodePaths(['src/a.js', 'lib/out.js'], data, null)).map((f) => f.path),
+    ['src/a.js', 'lib/out.js']
+  );
+});
+
+test('returning to Code opens the current selection without dropping old cards', () => {
+  const data = {
+    files: [
+      { path: 'leaf.js', folder: 'src', name: 'leaf.js', functions: [] },
+      { path: 'hub.js', folder: 'src', name: 'hub.js', functions: [] },
+      { path: 'other.js', folder: 'src', name: 'other.js', functions: [] }
+    ],
+    connections: [
+      { source: 'hub.js', target: 'leaf.js', fn: 'h' },
+      { source: 'hub.js', target: 'other.js', fn: 'h' }
+    ]
+  };
+  assert.equal(context.shouldSeedOpenedCodeCards(false, false, ['hub.js']), false);
+  assert.equal(context.shouldSeedOpenedCodeCards(true, false, ['hub.js']), true);
+  assert.equal(context.shouldSeedOpenedCodeCards(true, true, ['hub.js']), false);
+  assert.equal(context.shouldSeedOpenedCodeCards(true, true, []), true);
+  const reenter = context.ensureCodeViewOpenedPaths(['hub.js'], 'leaf.js', data, 'src');
+  assert.deepEqual(J(reenter.paths), ['hub.js', 'leaf.js']);
+  assert.equal(reenter.seed, 'leaf.js');
+  assert.equal(reenter.inserted, true);
+  assert.equal(reenter.opened, true);
+  const already = context.ensureCodeViewOpenedPaths(['hub.js', 'leaf.js'], 'leaf.js', data, 'src');
+  assert.deepEqual(J(already.paths), ['hub.js', 'leaf.js']);
+  assert.equal(already.inserted, false);
+  assert.equal(already.opened, true);
+  const empty = context.ensureCodeViewOpenedPaths([], null, data, 'src');
+  assert.deepEqual(J(empty.paths), ['hub.js']);
+  assert.equal(empty.seed, 'hub.js');
+  const capped = Array.from({ length: context.CODE_CARD_MAX }, (_, i) => 'f' + i + '.js');
+  const replaced = context.ensureCodeViewOpenedPaths(capped, 'leaf.js', data, 'src');
+  assert.equal(replaced.opened, true);
+  assert.equal(replaced.inserted, true);
+  assert.equal(replaced.paths.length, context.CODE_CARD_MAX);
+  assert.equal(replaced.paths[replaced.paths.length - 1], 'leaf.js');
+  assert.equal(replaced.paths.indexOf('f0.js'), -1);
+  assert.equal(replaced.paths.indexOf('f1.js'), 0);
+});
+
+test('high-degree neighborhoods stay within the card cap', () => {
+  const files = Array.from({ length: 30 }, (_, i) => ({
+    path: i === 0 ? 'hub.js' : 'n' + i + '.js',
+    folder: 'src',
+    name: i === 0 ? 'hub.js' : 'n' + i + '.js',
+    functions: []
+  }));
+  files[20].content = 'export const kept = 1;\n';
+  const connections = files.slice(1).map((file) => ({ source: 'hub.js', target: file.path, fn: 'hub' }));
+  const visible = context.collectVisibleCodeFiles('hub.js', { files, connections }, 'src');
+  assert.equal(visible.length, context.CODE_CARD_MAX);
+  assert.equal(visible[0].path, 'hub.js');
+  assert.ok(visible.some((file) => file.path === 'n20.js'));
+  assert.equal(context.countVisibleCodeFiles('hub.js', { files, connections }, 'src'), 30);
+  assert.ok(context.countVisibleCodeFiles('hub.js', { files, connections }, 'src') > visible.length);
+});
+
+test('a drag does not select the card on the leftover click', () => {
+  assert.deepEqual(J(context.noteCodeCardPointerEnd(true)), { select: false, ignoreNextClick: true });
+  assert.deepEqual(J(context.noteCodeCardPointerEnd(false)), { select: true, ignoreNextClick: false });
+  assert.deepEqual(J(context.consumeCodeCardClick(true)), { ignore: true, ignoreNextClick: false });
+  assert.deepEqual(J(context.consumeCodeCardClick(false)), { ignore: false, ignoreNextClick: false });
+});
+
+test('card drag activation uses screen pixels, not zoomed graph units', () => {
+  const far = context.codeCardDragDelta(101, 100, 100, 100, 0.08, 3);
+  assert.equal(far.moved, false);
+  assert.ok(Math.abs(far.x) > 3);
+  const near = context.codeCardDragDelta(104, 100, 100, 100, 5, 3);
+  assert.equal(near.moved, true);
+  assert.ok(Math.abs(near.x) < 3);
+  const still = context.codeCardDragDelta(100, 100, 100, 100, 1, 3);
+  assert.equal(still.moved, false);
+  assert.equal(still.x, 0);
+});
+
+test('code cards use a uniform width and grow with line count', () => {
+  const empty = context.codeCardSize(null);
+  assert.equal(empty.width, context.CODE_CARD_WIDTH);
+  assert.equal(empty.height, context.CODE_CARD_MIN_HEIGHT);
+  assert.equal(empty.clipped, false);
+  const short = context.codeCardSize({ content: 'const x = 1;\n' });
+  const tall = context.codeCardSize({ content: Array(40).fill('const value = 1;').join('\n') });
+  assert.equal(short.width, context.CODE_CARD_WIDTH);
+  assert.equal(tall.width, context.CODE_CARD_WIDTH);
+  assert.ok(tall.height > short.height);
+  const huge = context.codeCardSize({ content: Array(400).fill('x'.repeat(120)).join('\n') });
+  assert.equal(huge.width, context.CODE_CARD_WIDTH);
+  assert.equal(huge.height, context.CODE_CARD_MAX_HEIGHT);
+  assert.equal(huge.clipped, true);
+  const wide = context.codeCardSize({ content: 'x'.repeat(200) });
+  assert.equal(wide.width, context.CODE_CARD_WIDTH);
+  assert.ok(wide.height < context.CODE_CARD_MAX_HEIGHT);
+  assert.equal(wide.clipped, true);
+  const expanded = context.codeCardSize({ content: Array(400).fill('x'.repeat(120)).join('\n') }, { expand: true });
+  assert.ok(expanded.height > context.CODE_CARD_MAX_HEIGHT);
+  assert.equal(expanded.expand, true);
+  assert.equal(expanded.clipped, true);
+  const expandedWrap = context.codeCardSize({ content: Array(400).fill('x'.repeat(120)).join('\n') }, { expand: true, wrap: true });
+  assert.ok(expandedWrap.height > context.CODE_CARD_MAX_HEIGHT);
+  assert.equal(expandedWrap.clipped, false);
+  const wrapped = context.codeCardSize({ content: 'x'.repeat(200) }, { wrap: true });
+  assert.equal(wrapped.clipped, false);
+  assert.equal(wrapped.wrap, true);
+  const manyWide = context.codeCardSize({ content: Array(8).fill('x'.repeat(200)).join('\n') });
+  const manyWrapped = context.codeCardSize({ content: Array(8).fill('x'.repeat(200)).join('\n') }, { wrap: true });
+  assert.ok(manyWrapped.height > manyWide.height);
+  const wrapCols = context.codeCardWrapColumns();
+  assert.ok(wrapCols >= 20);
+  assert.equal(context.codeCardWrappedLineCount({ lines: 1, lineChars: [200] }, { wrap: true }), Math.ceil(200 / wrapCols));
+  assert.equal(context.codeCardVisualLineIndex({ content: 'short\n' + 'x'.repeat(200) }, 2, { wrap: true }), 2);
+});
+
+test('opened code paths append without reshuffling the set', () => {
+  assert.deepEqual(J(context.openCodeCardPaths(['a.js'], 'b.js')), ['a.js', 'b.js']);
+  assert.deepEqual(J(context.openCodeCardPaths(['a.js', 'b.js'], 'a.js')), ['a.js', 'b.js']);
+  const capped = Array.from({ length: context.CODE_CARD_MAX }, (_, i) => 'f' + i + '.js');
+  assert.deepEqual(J(context.openCodeCardPaths(capped, 'extra.js')), capped);
+  const rejected = context.resolveOpenCodeCard(capped, 'extra.js');
+  assert.equal(rejected.opened, false);
+  assert.equal(rejected.inserted, false);
+  assert.deepEqual(J(rejected.paths), capped);
+  const already = context.resolveOpenCodeCard(['a.js', 'b.js'], 'a.js');
+  assert.equal(already.opened, true);
+  assert.equal(already.inserted, false);
+  const added = context.resolveOpenCodeCard(['a.js'], 'b.js');
+  assert.equal(added.opened, true);
+  assert.equal(added.inserted, true);
+  assert.deepEqual(J(added.paths), ['a.js', 'b.js']);
+  const evicted = context.openCodeCardPaths(capped, 'extra.js', null, true);
+  assert.equal(evicted.length, context.CODE_CARD_MAX);
+  assert.equal(evicted[0], 'f1.js');
+  assert.equal(evicted[evicted.length - 1], 'extra.js');
+  const replaced = context.resolveOpenCodeCard(capped, 'extra.js', null, true);
+  assert.equal(replaced.opened, true);
+  assert.equal(replaced.inserted, true);
+  assert.deepEqual(J(replaced.paths), evicted);
+});
+
+test('opened code files ignore the current selection', () => {
+  const data = {
+    files: [
+      { path: 'a.js', folder: 'src' },
+      { path: 'b.js', folder: 'src' },
+      { path: 'c.js', folder: 'lib' }
+    ]
+  };
+  const opened = context.filesForOpenedCodePaths(['a.js', 'c.js'], data, null);
+  assert.deepEqual(J(opened).map((f) => f.path), ['a.js', 'c.js']);
+  const still = context.filesForOpenedCodePaths(['a.js', 'c.js'], data, null);
+  assert.deepEqual(J(still).map((f) => f.path), ['a.js', 'c.js']);
+});
+
+test('appending a code card keeps existing cards in place', () => {
+  const a = { path: 'src/a.js', folder: 'src' };
+  const b = { path: 'src/b.js', folder: 'src' };
+  const c = { path: 'lib/c.js', folder: 'lib' };
+  const size = { width: 440, height: 200 };
+  const opts = { originX: 80, originY: 72, gapX: 88, gapY: 36 };
+  let placed = context.appendCodeCardPlacement({}, a, size, opts);
+  const first = J(placed['src/a.js']);
+  placed = context.appendCodeCardPlacement(placed, b, size, opts);
+  assert.deepEqual(J(placed['src/a.js']), first);
+  assert.equal(placed['src/b.js'].left, first.left);
+  assert.ok(placed['src/b.js'].top >= first.top + first.height);
+  const beforeLib = J(placed['src/a.js']);
+  const beforeB = J(placed['src/b.js']);
+  placed = context.appendCodeCardPlacement(placed, c, size, opts);
+  assert.deepEqual(J(placed['src/a.js']), beforeLib);
+  assert.deepEqual(J(placed['src/b.js']), beforeB);
+  assert.ok(placed['lib/c.js'].left >= beforeLib.left + beforeLib.width);
+  assert.equal(placed['lib/c.js'].top, opts.originY);
+  const grown = context.appendCodeCardPlacement(placed, a, { width: 440, height: 400 }, opts);
+  assert.equal(grown['src/a.js'].left, first.left);
+  assert.equal(grown['src/a.js'].top, first.top);
+  assert.ok(grown['src/b.js'].top >= grown['src/a.js'].top + grown['src/a.js'].height);
+  assert.ok(grown['src/b.js'].top > beforeB.top);
+  const pinned = context.appendCodeCardPlacement(placed, a, { width: 440, height: 400 }, Object.assign({ pinnedPaths: { 'src/b.js': true } }, opts));
+  assert.equal(pinned['src/b.js'].top, beforeB.top);
+});
+
+test('hidden-but-open cards keep their placements across folder filters', () => {
+  const placements = {
+    'src/a.js': { left: 12, top: 40, x: 232, y: 140, width: 440, height: 200, folder: 'src' },
+    'lib/b.js': { left: 540, top: 40, x: 760, y: 140, width: 440, height: 200, folder: 'lib' }
+  };
+  const keep = context.codeCardPlacementKeepSet(['src/a.js', 'lib/b.js'], [{ path: 'lib/b.js' }]);
+  assert.equal(keep['src/a.js'], true);
+  assert.equal(keep['lib/b.js'], true);
+  const departed = context.pruneCodeCardPlacements(placements, keep);
+  assert.equal(departed['src/a.js'], undefined);
+  assert.deepEqual(J(placements['src/a.js']).top, 40);
+  assert.deepEqual(J(placements['lib/b.js']).left, 540);
+  const closed = context.pruneCodeCardPlacements(placements, context.codeCardPlacementKeepSet(['lib/b.js'], [{ path: 'lib/b.js' }]));
+  assert.equal(closed['src/a.js'], true);
+  assert.equal(placements['src/a.js'], undefined);
+  assert.ok(placements['lib/b.js']);
+});
+
+test('hydration height growth reflows unpinned cards in the same folder', () => {
+  const a = { path: 'src/a.js', folder: 'src' };
+  const b = { path: 'src/b.js', folder: 'src' };
+  const opts = { originY: 72, gapY: 36 };
+  let placed = context.appendCodeCardPlacement({}, a, { width: 440, height: 160 }, opts);
+  placed = context.appendCodeCardPlacement(placed, b, { width: 440, height: 160 }, opts);
+  const beforeB = placed['src/b.js'].top;
+  placed = context.reflowUnpinnedCodeCards(
+    context.appendCodeCardPlacement(placed, a, { width: 440, height: 400 }, opts),
+    null,
+    opts
+  );
+  assert.equal(placed['src/a.js'].top, 72);
+  assert.equal(placed['src/b.js'].top, 72 + 400 + 36);
+  assert.ok(placed['src/b.js'].top > beforeB);
+});
+
+test('source reads skip paths that are already in flight', () => {
+  assert.deepEqual(J(context.nextCodeSourceReads(['a.js', 'b.js', 'a.js'], { 'a.js': true })), ['b.js']);
+  assert.deepEqual(J(context.nextCodeSourceReads(['a.js'], { 'a.js': true })), []);
+});
+
+test('failed source reads leave a retryable state instead of loading forever', () => {
+  const file = { path: 'src/a.js', name: 'a.js' };
+  assert.equal(context.fileSourceDisplayState(file, true), 'loading');
+  const failed = context.recordCodeSourceFailure(null, 'src/a.js');
+  assert.equal(context.fileSourceDisplayState(file, true, failed), 'failed');
+  assert.equal(context.fileSourceDisplayState(file, false, failed), 'unavailable');
+  assert.deepEqual(J(context.nextCodeSourceReads(['src/a.js', 'src/b.js'], {}, failed)), ['src/b.js']);
+  const cleared = context.clearCodeSourceFailure(failed, 'src/a.js');
+  assert.equal(context.fileSourceDisplayState(file, true, cleared), 'loading');
+  assert.deepEqual(J(context.nextCodeSourceReads(['src/a.js'], {}, cleared)), ['src/a.js']);
+});
+
+test('filtered-out cards do not consume the open-card cap', () => {
+  const files = Array.from({ length: context.CODE_CARD_MAX }, (_, i) => ({
+    path: 'src/f' + i + '.js',
+    folder: 'src',
+    name: 'f' + i + '.js'
+  }));
+  files.push({ path: 'lib/new.js', folder: 'lib', name: 'new.js' });
+  files.push({ path: 'src/extra.js', folder: 'src', name: 'extra.js' });
+  const data = { files };
+  const capped = files.slice(0, context.CODE_CARD_MAX).map((file) => file.path);
+  const hidden = context.hiddenOpenedCodePaths(capped, data, 'lib');
+  assert.equal(Object.keys(hidden).length, context.CODE_CARD_MAX);
+  const opened = context.resolveOpenCodeCard(capped, 'lib/new.js', null, false, hidden);
+  assert.equal(opened.opened, true);
+  assert.equal(opened.inserted, true);
+  assert.equal(opened.paths.length, context.CODE_CARD_MAX);
+  assert.equal(opened.paths[opened.paths.length - 1], 'lib/new.js');
+  assert.equal(opened.paths.indexOf('src/f0.js'), -1);
+  const visibleHidden = context.hiddenOpenedCodePaths(capped, data, 'src');
+  assert.equal(Object.keys(visibleHidden).length, 0);
+  const refused = context.resolveOpenCodeCard(capped, 'src/extra.js', null, false, visibleHidden);
+  assert.equal(refused.opened, false);
+  assert.deepEqual(J(refused.paths), capped);
+});
+
+test('out-of-filter Code nav at the card cap replaces so the target opens', () => {
+  const files = Array.from({ length: context.CODE_CARD_MAX }, (_, i) => ({
+    path: 'src/f' + i + '.js',
+    folder: 'src',
+    name: 'f' + i + '.js'
+  }));
+  files.push({ path: 'lib/new.js', folder: 'lib', name: 'new.js' });
+  const data = { files };
+  const capped = files.slice(0, context.CODE_CARD_MAX).map((file) => file.path);
+  const nextFilter = context.folderFilterAfterCodeNav('lib/new.js', data, 'src');
+  assert.equal(nextFilter, null);
+  const keptHidden = context.hiddenOpenedCodePaths(capped, data, 'src');
+  const refused = context.resolveOpenCodeCard(capped, 'lib/new.js', null, false, keptHidden);
+  assert.equal(refused.opened, false);
+  const hidden = context.hiddenOpenedCodePaths(capped, data, nextFilter);
+  const opened = context.resolveOpenCodeCard(capped, 'lib/new.js', null, true, hidden);
+  assert.equal(opened.opened, true);
+  assert.equal(opened.inserted, true);
+  assert.equal(opened.paths[opened.paths.length - 1], 'lib/new.js');
+  assert.equal(
+    context.filesForOpenedCodePaths(opened.paths, data, nextFilter).some((file) => file.path === 'lib/new.js'),
+    true
+  );
+});
+
+test('wheel pan deltas stay screen-pixel based across zoom', () => {
+  assert.deepEqual(J(context.codeViewWheelPanDelta(40, 80, 1)), { x: -40, y: -80 });
+  assert.deepEqual(J(context.codeViewWheelPanDelta(40, 80, 2)), { x: -20, y: -40 });
+  assert.deepEqual(J(context.codeViewWheelPanDelta(40, 80, 0.5)), { x: -80, y: -160 });
+  assert.equal(context.codeViewWheelAction({}), 'pan');
+});
+
+test('line-level code edges use bezier anchors, not card centers', () => {
+  const file = {
+    path: 'src/a.js',
+    content: 'export function shared(){}\n',
+    functions: [{ name: 'shared', line: 1, isExported: true }]
+  };
+  assert.equal(context.codeCardSymbolLine(file, 'shared'), 1);
+  const d = context.codeEdgeBezier(0, 10, 200, 40);
+  assert.equal(d, 'M0,10C90,10 110,40 200,40');
+  const reverse = context.codeEdgeBezier(200, 10, 0, 40);
+  assert.equal(reverse, 'M200,10C110,10 90,40 0,40');
+  const src = { id: 'src/a.js', x: 220, y: 200 };
+  const tgt = { id: 'src/b.js', x: 800, y: 240 };
+  const sizes = {
+    'src/a.js': { width: 440, height: 200 },
+    'src/b.js': { width: 440, height: 200 }
+  };
+  const files = {
+    'src/a.js': file,
+    'src/b.js': { path: 'src/b.js', content: 'import { shared } from "./a.js";\n', functions: [] }
+  };
+  const cards = new Set(['src/a.js', 'src/b.js']);
+  const path = context.codeCardLinkPath({ source: src, target: tgt, fn: 'shared' }, sizes, files, cards);
+  assert.match(path, /^M/);
+  assert.ok(!path.includes(String(src.x) + ',' + String(src.y)));
+  const leftover = { id: 'src/c.js', x: 1100, y: 260 };
+  const fromCard = context.codeCardLinkPath({ source: src, target: leftover, fn: 'shared' }, sizes, files, new Set(['src/a.js']));
+  assert.match(fromCard, /^M440,/);
+  assert.match(fromCard, / 1100,260$/);
+  assert.ok(!fromCard.includes('220,200'));
+  const toCard = context.codeCardLinkPath({ source: leftover, target: tgt, fn: 'shared' }, sizes, files, new Set(['src/b.js']));
+  assert.match(toCard, /^M1100,260C/);
+  assert.ok(!toCard.includes('800,240'));
+  assert.equal(context.codeCardLinkPath({ source: src, target: leftover, fn: 'shared' }, sizes, files, new Set()), null);
+  assert.equal(context.codeViewWheelAction({ ctrlKey: true }), 'zoom');
+  assert.equal(context.codeViewWheelAction({}), 'pan');
+});
+
+test('same-folder stacked cards route links through top and bottom edges', () => {
+  const upper = { id: 'src/a.js', x: 300, y: 200 };
+  const lower = { id: 'src/b.js', x: 300, y: 500 };
+  const sizes = {
+    'src/a.js': { width: 440, height: 200 },
+    'src/b.js': { width: 440, height: 200 }
+  };
+  const files = {
+    'src/a.js': { path: 'src/a.js', content: 'export function shared(){}\n', functions: [{ name: 'shared', line: 1 }] },
+    'src/b.js': { path: 'src/b.js', content: 'import { shared } from "./a.js";\n', functions: [] }
+  };
+  const cards = new Set(['src/a.js', 'src/b.js']);
+  assert.equal(context.codeLinkPrefersVertical(upper, lower), true);
+  assert.equal(context.codeLinkPrefersVertical({ x: 220, y: 200 }, { x: 800, y: 240 }), false);
+  const stacked = context.codeEdgeBezier(300, 300, 300, 400);
+  assert.equal(stacked, 'M300,300C300,380 300,320 300,400');
+  const path = context.codeCardLinkPath({ source: upper, target: lower, fn: 'shared' }, sizes, files, cards);
+  assert.equal(path, 'M300,300C300,380 300,320 300,400');
+  const reverse = context.codeCardLinkPath({ source: lower, target: upper, fn: 'shared' }, sizes, files, cards);
+  assert.equal(reverse, 'M300,400C300,320 300,380 300,300');
+  assert.ok(!path.includes('520,'));
+  assert.ok(!reverse.includes('80,'));
+});
+
+test('opened code cards auto-align by directory', () => {
+  const files = [
+    { path: 'src/a.js', folder: 'src' },
+    { path: 'src/b.js', folder: 'src' },
+    { path: 'lib/c.js', folder: 'lib' }
+  ];
+  const sizes = {
+    'src/a.js': { width: 320, height: 200 },
+    'src/b.js': { width: 320, height: 200 },
+    'lib/c.js': { width: 320, height: 200 }
+  };
+  const layout = context.layoutCodeCardsByFolder(files, sizes, { originX: 0, originY: 0, gapX: 40, groupGapX: 80 });
+  assert.ok(layout['src/a.js']);
+  assert.ok(layout['src/b.js']);
+  assert.ok(layout['lib/c.js']);
+  assert.equal(layout['src/a.js'].folder, 'src');
+  assert.equal(layout['lib/c.js'].folder, 'lib');
+  assert.ok(Math.abs(layout['src/a.js'].x - layout['src/b.js'].x) >= 320 || Math.abs(layout['src/a.js'].y - layout['src/b.js'].y) >= 200);
+  assert.ok(layout['lib/c.js'].x !== layout['src/a.js'].x);
+  const bounds = context.codeFolderCardBounds([
+    { id: 'src/a.js', x: layout['src/a.js'].x, y: layout['src/a.js'].y },
+    { id: 'src/b.js', x: layout['src/b.js'].x, y: layout['src/b.js'].y }
+  ], sizes, 10);
+  assert.ok(bounds.width >= 320);
+  assert.ok(bounds.height >= 200);
+  const before = context.codeFolderCardBounds([{ id: 'src/a.js', x: 220, y: 100 }], sizes, 10);
+  const after = context.codeFolderCardBounds([{ id: 'src/a.js', x: 800, y: 400 }], sizes, 10);
+  assert.ok(after.x > before.x);
+  assert.ok(after.y > before.y);
+  const stale = context.codeFolderCardBounds([{ id: 'src/a.js', x: 220, y: 100, fx: 800, fy: 400 }], sizes, 10);
+  assert.ok(Math.abs(stale.x - after.x) < 1);
+  assert.ok(Math.abs(stale.y - after.y) < 1);
+  const xy = context.liveGraphNodeXY({ x: 10, y: 20, fx: 90, fy: 40 });
+  assert.equal(xy.x, 90);
+  assert.equal(xy.y, 40);
+  const layer = {
+    querySelectorAll: () => [{
+      getAttribute: () => 'src/a.js',
+      style: { left: '580px', top: '240px', width: '320px', height: '200px' }
+    }]
+  };
+  const boxes = context.readCodeCardWorldBoxes(layer);
+  assert.equal(boxes['src/a.js'].x, 580);
+  const fromBox = context.codeFolderCardBounds([{ id: 'src/a.js', x: 0, y: 0 }], sizes, 10, boxes);
+  assert.ok(fromBox.x > 500);
+  const nearUnion = context.codeFolderHullBounds(
+    [{ id: 'src/a.js', x: 800, y: 400 }],
+    [{ id: 'src/near.js', x: 820, y: 390 }],
+    sizes,
+    10
+  );
+  assert.ok(nearUnion.width > 320);
+  const farUnion = context.codeFolderHullBounds(
+    [{ id: 'src/a.js', x: 800, y: 400 }],
+    [{ id: 'src/old.js', x: 220, y: 100 }],
+    sizes,
+    10
+  );
+  assert.ok(farUnion.x > 400);
+  const dragged = context.codeFolderHullBounds([{ id: 'src/a.js', x: 1400, y: 900 }], [], sizes, 10);
+  assert.ok(dragged.x > farUnion.x);
+  assert.ok(dragged.y > farUnion.y);
+  const hullsBefore = context.codeFolderHullsByFolder({
+    src: { cards: [{ id: 'src/a.js', x: 800, y: 400 }], leftover: [] },
+    lib: { cards: [{ id: 'lib/c.js', x: 200, y: 100 }], leftover: [] }
+  }, sizes, 10);
+  const hullsAfter = context.codeFolderHullsByFolder({
+    src: { cards: [{ id: 'src/a.js', x: 1400, y: 900 }], leftover: [] },
+    lib: { cards: [{ id: 'lib/c.js', x: 200, y: 100 }], leftover: [] }
+  }, sizes, 10);
+  assert.ok(hullsAfter.src.x > hullsBefore.src.x);
+  assert.equal(hullsAfter.lib.x, hullsBefore.lib.x);
+  assert.equal(hullsAfter.lib.y, hullsBefore.lib.y);
+});
+
+test('Code folder centers space hulls like Graph and park leftover nodes', () => {
+  const centers = context.graphFolderCenters(['src', 'lib', 'test', 'docs'], 800, 600, { minCellW: 660, minCellH: 360 });
+  assert.ok(centers.src);
+  assert.ok(centers.lib);
+  assert.ok(Math.abs(centers.src.x - centers.lib.x) >= 200 || Math.abs(centers.src.y - centers.lib.y) >= 200);
+  const nodes = [
+    { id: 'src/a.js', folder: 'src', x: 10, y: 10 },
+    { id: 'lib/b.js', folder: 'lib', x: 10, y: 10 }
+  ];
+  context.parkLeftoverCodeNodes(nodes, new Set(), centers);
+  assert.equal(nodes[0].x, centers.src.x);
+  assert.equal(nodes[1].x, centers.lib.x);
+  const pinned = { id: 'src/c.js', folder: 'src', x: 12, y: 14, fx: 12, fy: 14 };
+  context.parkLeftoverCodeNodes([pinned], new Set(), centers);
+  assert.equal(pinned.x, 12);
+});
+
+test('Code cards can be resized from the right or bottom edge', () => {
+  const base = context.codeCardSize({ content: 'const x = 1;\n' });
+  const grown = context.applyCodeCardUserSize(base, { width: 620, height: 280 });
+  assert.equal(grown.width, 620);
+  assert.equal(grown.height, 280);
+  const clamped = context.clampCodeCardResize(80, 40, {});
+  assert.equal(clamped.width, context.CODE_CARD_MIN_WIDTH);
+  assert.equal(clamped.height, context.CODE_CARD_MIN_HEIGHT);
+  const delta = context.codeCardResizeDelta(140, 160, 100, 100, 440, 200, 1, 'se');
+  assert.equal(delta.width, 480);
+  assert.equal(delta.height, 260);
+  const east = context.codeCardResizeDelta(140, 160, 100, 100, 440, 200, 1, 'e');
+  assert.equal(east.width, 480);
+  assert.equal(east.height, 200);
+});
+
+test('Code camera fits only when it has not been armed yet', () => {
+  assert.equal(context.shouldFitCodeCamera(false, 'code'), true);
+  assert.equal(context.shouldFitCodeCamera(true, 'code'), false);
+  assert.equal(context.shouldFitCodeCamera(false, 'graph'), false);
+  assert.equal(context.clampCodeViewFitScale(0.05), context.CODE_VIEW_MIN_FIT_SCALE);
+  assert.equal(context.clampCodeViewFitScale(8), context.CODE_VIEW_MAX_FIT_SCALE);
+  assert.equal(context.clampCodeViewFitScale(0.7), 0.7);
+});
+
+test('hydrating file contents does not change the graph structure key', () => {
+  const before = {
+    files: [{ path: 'a.js' }, { path: 'b.js' }],
+    connections: [{ source: 'a.js', target: 'b.js' }]
+  };
+  const after = {
+    files: [{ path: 'a.js', content: 'export function a(){}' }, { path: 'b.js', content: 'import { a } from "./a.js"' }],
+    connections: [{ source: 'a.js', target: 'b.js' }]
+  };
+  assert.equal(context.graphStructureKey(before, null), context.graphStructureKey(after, null));
+  assert.notEqual(context.graphStructureKey(before, null), context.graphStructureKey(before, 'src'));
+  const swapped = {
+    files: [{ path: 'a.js' }, { path: 'b.js' }],
+    connections: [{ source: 'b.js', target: 'a.js' }]
+  };
+  const heavier = {
+    files: [{ path: 'a.js' }, { path: 'b.js' }],
+    connections: [{ source: 'a.js', target: 'b.js', count: 4 }]
+  };
+  assert.notEqual(context.graphStructureKey(before, null), context.graphStructureKey(swapped, null));
+  assert.notEqual(context.graphStructureKey(before, null), context.graphStructureKey(heavier, null));
+  assert.equal(
+    context.codeViewSceneKey(before, null, 'code'),
+    context.codeViewSceneKey(after, null, 'code')
+  );
+  assert.notEqual(
+    context.codeViewSceneKey(before, null, 'code'),
+    context.codeViewSceneKey(swapped, null, 'code')
+  );
+  assert.notEqual(
+    context.codeViewSceneKey(before, null, 'code', { sourceType: 'github', sourceKey: 'owner/alpha' }),
+    context.codeViewSceneKey(before, null, 'code', { sourceType: 'github', sourceKey: 'owner/beta' })
+  );
+  assert.notEqual(
+    context.analysisHydrationId({ sourceType: 'github', sourceKey: 'owner/alpha' }, before, null),
+    context.analysisHydrationId({ sourceType: 'github', sourceKey: 'owner/beta' }, before, null)
+  );
+  const source = { sourceType: 'github', sourceKey: 'owner/repo' };
+  assert.equal(context.analysisHydrationId(source, before, null), context.analysisHydrationId(source, before, 'src'));
+  assert.equal(context.analysisGraphKey(before), context.analysisGraphKey(after));
+  assert.notEqual(
+    context.codeViewSceneKey(before, null, 'code', source),
+    context.codeViewSceneKey(before, 'src', 'code', source)
+  );
+  const moved = {
+    files: [{ path: 'a.js', folder: 'src', layer: 'utils', churn: 0, functions: [] }, { path: 'b.js' }],
+    connections: [{ source: 'a.js', target: 'b.js' }]
+  };
+  const restyled = {
+    files: [{ path: 'a.js', folder: 'lib', layer: 'ui', churn: 3, functions: [{ name: 'a' }] }, { path: 'b.js' }],
+    connections: [{ source: 'a.js', target: 'b.js' }]
+  };
+  assert.notEqual(context.graphStructureKey(moved, null), context.graphStructureKey(restyled, null));
+  assert.equal(
+    context.fileGraphIdentity({ path: 'a.js', content: 'x', folder: 'src', layer: 'utils', functions: [] }),
+    context.fileGraphIdentity({ path: 'a.js', content: 'y', folder: 'src', layer: 'utils', functions: [] })
+  );
+});
+
+test('preserved graph nodes keep the user camera positions', () => {
+  const nodes = [{ id: 'a.js', x: 0, y: 0 }, { id: 'b.js', x: 1, y: 1 }];
+  context.preserveGraphNodeState(nodes, { 'a.js': { x: 40, y: 80, fx: 40, fy: 80 } });
+  assert.equal(nodes[0].x, 40);
+  assert.equal(nodes[0].fx, 40);
+  assert.equal(nodes[1].x, 1);
+});
+
+test('code cards sit on the canvas transform, not a split pane', () => {
+  assert.ok(context.codeCardCollisionRadius({ width: 320, height: 220 }) > 100);
+  assert.equal(context.codeCanvasTransformStyle({ k: 0.5, x: 10, y: 20 }), 'translate(10px,20px) scale(0.5)');
+  assert.deepEqual(J(context.codeCardAnchorStyle({ x: 400, y: 300 }, { width: 320, height: 220 })), {
+    visibility: 'visible',
+    left: '240px',
+    top: '190px'
+  });
+  const title = { style: {} };
+  const card = {
+    getAttribute(name) { return name === 'data-code-card' ? 'a.js' : null; },
+    style: {},
+    classList: { add() {}, remove() {} },
+    querySelector() { return title; }
+  };
+  const layer = {
+    style: {},
+    querySelectorAll() { return [card]; }
+  };
+  const sizes = { 'a.js': { width: 380, height: 280 } };
+  const placed = context.applyCodeCardLayout(layer, { 'a.js': { x: 400, y: 300 } }, { k: 0.5, x: 12, y: 8 }, sizes);
+  assert.equal(placed.placed, 1);
+  assert.equal(placed.titleScale, 2);
+  assert.equal(layer.style.transform, 'translate(12px,8px) scale(0.5)');
+  assert.equal(card.style.left, '210px');
+  assert.equal(title.style.transform, 'scale(2)');
+});
+
+test('recent delete requires a second confirm click', () => {
+  assert.deepEqual(J(context.armRecentDelete(null, 'github:owner/repo')), { confirm: false, armedId: 'github:owner/repo' });
+  assert.deepEqual(J(context.armRecentDelete('github:owner/repo', 'github:owner/repo')), { confirm: true, armedId: null });
+  assert.deepEqual(J(context.armRecentDelete('github:owner/repo', 'zip:other')), { confirm: false, armedId: 'zip:other' });
+});
+
 test('cache keys and records stay stable', () => {
   assert.equal(context.analysisCacheKey('github', 'braedonsaunders/codeflow'), 'github:braedonsaunders/codeflow');
   const record = context.buildRecentAnalysisRecord({
@@ -141,6 +816,37 @@ test('GitHub cache keys include the exclude pattern set', () => {
   assert.equal(context.analysisCacheKey('github', tests), 'github:' + tests);
 });
 
+test('loaded GitHub identity uses applied exclusions, not pending edits', () => {
+  const loaded = { files: [{ path: 'src/a.js', name: 'a.js' }], connections: [], excludePatterns: ['tests/**'] };
+  const pending = ['vendor/**'];
+  const fromLoaded = context.githubSourceKeyForLoadedAnalysis('owner', 'repo', loaded, pending);
+  const fromPending = context.githubSourceKeyForLoadedAnalysis('owner', 'repo', null, pending);
+  const appliedKey = context.githubCacheSourceKey('owner', 'repo', ['tests/**']);
+  const pendingKey = context.githubCacheSourceKey('owner', 'repo', pending);
+  assert.equal(fromLoaded, appliedKey);
+  assert.notEqual(fromLoaded, pendingKey);
+  assert.equal(fromPending, pendingKey);
+  assert.equal(
+    context.githubSourceKeyForLoadedAnalysis('owner', 'repo', { excludePatterns: [] }, pending),
+    context.githubCacheSourceKey('owner', 'repo', [])
+  );
+  const graph = context.analysisGraphKey(loaded);
+  const before = context.loadedAnalysisSourceIdentity({
+    githubOwner: 'owner',
+    githubRepo: 'repo',
+    githubKey: fromLoaded
+  });
+  const afterEdit = context.loadedAnalysisSourceIdentity({
+    githubOwner: 'owner',
+    githubRepo: 'repo',
+    githubKey: context.githubSourceKeyForLoadedAnalysis('owner', 'repo', loaded, ['docs/**'])
+  });
+  assert.equal(
+    context.analysisHydrationIdFromParts(before, graph),
+    context.analysisHydrationIdFromParts(afterEdit, graph)
+  );
+});
+
 test('CLI cache keys use the watched root instead of a shared fallback', () => {
   const a = context.cliWatchCacheMeta({ ok: true, root: '/tmp/alpha', name: 'alpha' });
   const b = context.cliWatchCacheMeta({ ok: true, root: '/tmp/beta', name: 'beta' });
@@ -215,6 +921,7 @@ test('hydrated sources stay in memory and are not treated as cached source', ()
   assert.equal(context.fileSourceDisplayState(merged.files[0], true), 'ready');
   assert.equal(context.fileSourceDisplayState({ path: 'big.js', analysisSkipped: 'oversized' }, false), 'skipped');
   assert.equal(context.fileSourceDisplayState({ path: 'src/a.js' }, false), 'unavailable');
+  assert.equal(context.fileSourceDisplayState(cached.files[0], true, { 'src/a.js': true }), 'failed');
 });
 
 test('empty source files count as loaded after hydration', () => {
@@ -228,11 +935,166 @@ test('empty source files count as loaded after hydration', () => {
   assert.equal(context.fileSourceDisplayState(merged.files[0], true), 'ready');
 });
 
-test('code split percent uses the stacked axis', () => {
-  const rect = { width: 1000, height: 800, right: 1000, bottom: 800 };
-  assert.equal(context.codeSplitPanePercent(rect, { clientX: 400, clientY: 200 }, false), 60);
-  assert.equal(context.codeSplitPanePercent(rect, { clientX: 400, clientY: 200 }, true), 72);
-  assert.equal(context.codeSplitPanePercent(rect, { clientX: 900, clientY: 600 }, true), 28);
+test('obsolete hydration results do not replace a new analysis file', () => {
+  const repoA = { sourceType: 'github', sourceKey: 'owner/alpha' };
+  const repoB = { sourceType: 'github', sourceKey: 'owner/beta' };
+  const data = { files: [{ path: 'src/index.js', name: 'index.js' }], connections: [] };
+  const idA = context.analysisHydrationId(repoA, data, null);
+  const idB = context.analysisHydrationId(repoB, data, null);
+  assert.notEqual(idA, idB);
+  assert.equal(context.hydratedSourceIsCurrent({ path: 'src/index.js', content: 'A', hydrationId: idA }, idB), false);
+  const rejected = context.mergeHydratedFileSources(data, [{ path: 'src/index.js', content: 'from-alpha', hydrationId: idA }], idB);
+  assert.equal(Object.prototype.hasOwnProperty.call(rejected.files[0], 'content'), false);
+  const accepted = context.mergeHydratedFileSources(data, [{ path: 'src/index.js', content: 'from-beta', hydrationId: idB }], idB);
+  assert.equal(accepted.files[0].content, 'from-beta');
+});
+
+test('obsolete source failures do not mark a new analysis path as failed', () => {
+  const repoA = { sourceType: 'github', sourceKey: 'owner/alpha' };
+  const repoB = { sourceType: 'github', sourceKey: 'owner/beta' };
+  const data = { files: [{ path: 'src/index.js', name: 'index.js' }], connections: [] };
+  const idA = context.analysisHydrationId(repoA, data);
+  const idB = context.analysisHydrationId(repoB, data);
+  assert.equal(context.hydrationRequestIsCurrent(idA, idB), false);
+  assert.equal(context.hydrationRequestIsCurrent(idB, idB), true);
+  const stale = context.recordCodeSourceFailureIfCurrent(null, 'src/index.js', idA, idB);
+  assert.equal(Object.keys(stale).length, 0);
+  const current = context.recordCodeSourceFailureIfCurrent(null, 'src/index.js', idB, idB);
+  assert.equal(current['src/index.js'], true);
+  const kept = context.clearCodeSourceFailureIfCurrent(current, 'src/index.js', idA, idB);
+  assert.equal(kept['src/index.js'], true);
+  const cleared = context.clearCodeSourceFailureIfCurrent(current, 'src/index.js', idB, idB);
+  assert.equal(Object.prototype.hasOwnProperty.call(cleared, 'src/index.js'), false);
+});
+
+test('symbol pills track scroll and hide when clipped away', () => {
+  const visible = context.codeCardPillViewTop(80, 0, 400, 42);
+  assert.equal(visible, 80);
+  assert.equal(context.codeCardPillViewTop(80, 20, 400, 42), 60);
+  assert.equal(context.codeCardPillViewTop(2000, 0, 1840, 42), null);
+  assert.equal(context.codeCardPillViewTop(2000, 1600, 1840, 42), 400);
+  assert.equal(context.codeCardPillViewTop(30, 0, 400, 42), null);
+});
+
+test('selection reads the live body scrollTop of a previously scrolled card', () => {
+  const layer = {
+    querySelectorAll(sel) {
+      if (sel !== '[data-code-card]') return [];
+      return [
+        {
+          getAttribute(name) { return name === 'data-code-card' ? 'src/other.js' : null; },
+          querySelector() { return { scrollTop: 999 }; }
+        },
+        {
+          getAttribute(name) { return name === 'data-code-card' ? 'src/app.js' : null; },
+          querySelector(sel) { return sel === '.code-card-body' ? { scrollTop: 240 } : null; }
+        }
+      ];
+    }
+  };
+  assert.equal(context.readCodeCardBodyScroll(layer, 'src/app.js'), 240);
+  assert.equal(context.readCodeCardBodyScroll(layer, 'src/missing.js'), 0);
+  assert.equal(context.readCodeCardBodyScroll(null, 'src/app.js'), 0);
+  assert.equal(context.readCodeCardBodyScroll(layer, ''), 0);
+});
+
+test('hydration IDs follow the loaded analysis, not a live CLI session', () => {
+  const data = { files: [{ path: 'src/index.js', name: 'index.js' }], connections: [] };
+  const graph = context.analysisGraphKey(data);
+  const watchingGithub = {
+    localSourceKind: null,
+    cliOk: true,
+    cliRoot: '/watch',
+    githubOwner: 'owner',
+    githubRepo: 'alpha',
+    githubKey: 'owner/alpha'
+  };
+  const alpha = context.loadedAnalysisSourceIdentity(watchingGithub);
+  const beta = context.loadedAnalysisSourceIdentity(Object.assign({}, watchingGithub, {
+    githubRepo: 'beta',
+    githubKey: 'owner/beta'
+  }));
+  assert.equal(alpha.sourceType, 'github');
+  assert.equal(alpha.sourceKey, 'owner/alpha');
+  assert.equal(beta.sourceKey, 'owner/beta');
+  assert.notEqual(
+    context.analysisHydrationIdFromParts(alpha, graph),
+    context.analysisHydrationIdFromParts(beta, graph)
+  );
+  const cli = context.loadedAnalysisSourceIdentity({
+    localSourceKind: 'cli',
+    cliOk: true,
+    cliRoot: '/watch',
+    githubOwner: 'owner',
+    githubRepo: 'alpha',
+    githubKey: 'owner/alpha'
+  });
+  assert.equal(cli.sourceType, 'cli');
+  assert.equal(cli.sourceKey, '/watch');
+});
+
+test('symbol list wheel stays native instead of panning the canvas', () => {
+  const list = { closest(sel) { return sel === '.code-sym-list' ? this : null; } };
+  const chip = { closest(sel) { return sel === '.code-sym-list' ? list : null; } };
+  const body = { closest(sel) { return sel === '.code-card.clipped .code-card-body' ? this : null; } };
+  const canvas = { closest() { return null; } };
+  assert.equal(context.isCodeCanvasNativeScrollTarget(list), true);
+  assert.equal(context.isCodeCanvasNativeScrollTarget(chip), true);
+  assert.equal(context.isCodeCanvasNativeScrollTarget(body), true);
+  assert.equal(context.isCodeCanvasNativeScrollTarget(canvas), false);
+  assert.equal(context.isCodeCanvasNativeScrollTarget(null), false);
+});
+
+test('modifier-wheel over a clipped card still zooms the canvas', () => {
+  const body = { closest(sel) { return sel === '.code-card.clipped .code-card-body' ? this : null; } };
+  const list = { closest(sel) { return sel === '.code-sym-list' ? this : null; } };
+  const canvas = { closest() { return null; } };
+  assert.equal(context.codeViewWheelUsesNativeScroll({}, body), true);
+  assert.equal(context.codeViewWheelUsesNativeScroll({ ctrlKey: true }, body), false);
+  assert.equal(context.codeViewWheelUsesNativeScroll({ metaKey: true }, body), false);
+  assert.equal(context.codeViewWheelUsesNativeScroll({}, list), true);
+  assert.equal(context.codeViewWheelUsesNativeScroll({ ctrlKey: true }, list), false);
+  assert.equal(context.codeViewWheelUsesNativeScroll({ ctrlKey: true }, canvas), false);
+  assert.equal(context.codeViewWheelUsesNativeScroll({}, canvas), false);
+  assert.equal(context.codeViewWheelAction({ ctrlKey: true }), 'zoom');
+  assert.equal(context.codeViewWheelAction({ metaKey: true }), 'zoom');
+});
+
+test('far-zoom clipped cards let unmodified wheel pan the canvas', () => {
+  const farBody = {
+    closest(sel) {
+      if (sel === '.code-card.clipped .code-card-body') return this;
+      if (sel === '.code-card.code-far') return this;
+      return null;
+    }
+  };
+  const nearBody = { closest(sel) { return sel === '.code-card.clipped .code-card-body' ? this : null; } };
+  assert.equal(context.isCodeCanvasNativeScrollTarget(farBody), false);
+  assert.equal(context.codeViewWheelUsesNativeScroll({}, farBody), false);
+  assert.equal(context.codeViewWheelUsesNativeScroll({}, nearBody), true);
+  assert.equal(context.codeViewWheelAction({}), 'pan');
+});
+
+test('folder frames count as canvas background for deselect', () => {
+  const svg = { id: 'svg' };
+  const hull = {
+    getAttribute(name) { return name === 'data-code-bg' ? '1' : null; },
+    closest(sel) { return sel === '[data-code-bg="1"]' ? this : null; }
+  };
+  const hullChild = {
+    getAttribute() { return null; },
+    closest(sel) { return sel === '[data-code-bg="1"]' ? hull : null; }
+  };
+  const node = {
+    getAttribute() { return null; },
+    closest() { return null; }
+  };
+  assert.equal(context.isCodeCanvasDeselectTarget(svg, svg), true);
+  assert.equal(context.isCodeCanvasDeselectTarget(hull, svg), true);
+  assert.equal(context.isCodeCanvasDeselectTarget(hullChild, svg), true);
+  assert.equal(context.isCodeCanvasDeselectTarget(node, svg), false);
+  assert.equal(context.isCodeCanvasDeselectTarget(null, svg), false);
+  assert.equal(context.isCodeCanvasDeselectTarget(svg, null), false);
 });
 
 test('empty code cards always render from an array of lines', () => {
@@ -254,23 +1116,161 @@ test('HTML attribute sanitizer encodes quotes before they reach data-sym', () =>
 test('index.html ships a working Code view, not a stub', () => {
   assert.match(htmlSource, /value:'code'/);
   assert.match(htmlSource, /function renderCodeView\(/);
-  assert.match(htmlSource, /className:'code-split'/);
+  assert.match(htmlSource, /className:'code-canvas'/);
+  assert.doesNotMatch(htmlSource, /className:'code-split'/);
+  assert.match(htmlSource, /data-code-card/);
+  assert.match(htmlSource, /applyCodeCardLayout/);
+  assert.match(htmlSource, /layoutCodeCardsByFolder/);
+  assert.match(htmlSource, /appendCodeCardPlacement/);
+  assert.match(htmlSource, /reflowUnpinnedCodeCards/);
+  assert.match(htmlSource, /nextCodeSourceReads/);
+  assert.match(htmlSource, /recordCodeSourceFailure/);
+  assert.match(htmlSource, /recordCodeSourceFailureIfCurrent/);
+  assert.match(htmlSource, /hydrationRequestIsCurrent/);
+  assert.match(htmlSource, /analysisGraphKey/);
+  assert.match(htmlSource, /analysisGraphIdentity/);
+  assert.match(htmlSource, /analysisHydrationIdFromParts/);
+  assert.match(htmlSource, /loadedAnalysisSourceIdentity/);
+  assert.match(htmlSource, /isCodeCanvasNativeScrollTarget/);
+  assert.match(htmlSource, /codeViewWheelUsesNativeScroll/);
+  assert.match(htmlSource, /codeViewWheelUsesNativeScroll\(e,e\.target\)/);
+  assert.doesNotMatch(htmlSource, /analysisHydrationId\(currentAnalysisSource\(\),data\)/);
+  assert.match(htmlSource, /retryCodeSource/);
+  assert.match(htmlSource, /sourceState==='failed'/);
+  assert.match(htmlSource, /hiddenOpenedCodePaths/);
+  assert.match(htmlSource, /codeCardPlacementKeepSet/);
+  assert.match(htmlSource, /pruneCodeCardPlacements/);
+  assert.match(htmlSource, /codeCardPlacementKeepSet\(openedCodePaths,codeViewFiles\)/);
+  assert.match(htmlSource, /code-card\.code-far/);
+  assert.match(htmlSource, /evictHiddenCodeCards/);
+  assert.match(htmlSource, /updateHullsRef\.current/);
+  assert.match(htmlSource, /codeViewWheelPanDelta/);
+  assert.match(htmlSource, /codeSourceInFlightRef/);
+  assert.match(htmlSource, /analysisHydrationId/);
+  assert.match(htmlSource, /currentHydrationId/);
+  assert.match(htmlSource, /openedSceneRef\.current=currentHydrationId/);
+  assert.match(htmlSource, /hydratedSourceIsCurrent/);
+  assert.match(htmlSource, /codeCardDragDelta/);
+  assert.match(htmlSource, /openCodeFileRef\.current\(seed,true\)/);
+  assert.match(htmlSource, /codeCardPillViewTop/);
+  assert.match(htmlSource, /readCodeCardBodyScroll/);
+  assert.match(htmlSource, /readCodeCardBodyScroll\(codeCardsLayerRef\.current/);
+  assert.match(htmlSource, /isCodeCanvasDeselectTarget/);
+  assert.match(htmlSource, /isCodeCanvasDeselectTarget\(e\.target/);
+  assert.match(htmlSource, /data-code-bg/);
+  assert.match(htmlSource, /attr\('pointer-events','none'\)/);
+  assert.match(htmlSource, /openCodeCardPaths/);
+  assert.match(htmlSource, /filesForOpenedCodePaths/);
+  assert.match(htmlSource, /applyOpenedCardPlacements/);
+  assert.match(htmlSource, /codeCardLinkPath/);
+  assert.match(htmlSource, /codeCardLinkEndpoint/);
+  assert.match(htmlSource, /codeLinkPrefersVertical/);
+  assert.match(htmlSource, /code-line-pill/);
+  assert.match(htmlSource, /defaultCodeViewSeed/);
+  assert.match(htmlSource, /codeViewSeedPath/);
+  assert.match(htmlSource, /codeViewSeedPath\(selected&&selected\.path/);
+  assert.match(htmlSource, /codeFileNavOpensCard/);
+  assert.match(htmlSource, /graphSvgExportEnabled/);
+  assert.match(htmlSource, /if\(!graphSvgExportEnabled\(graphConfig\.vizType\)\)/);
+  assert.match(htmlSource, /Code cards are HTML overlays, not SVG/);
+  assert.match(htmlSource, /export-option.*disabled/);
+  assert.match(htmlSource, /function goToFile\(/);
+  assert.match(htmlSource, /React\.createElement\(TreeNode,\{node:data\.tree,selected:selected,onSelect:goToFile,expanded:expandedPaths,toggle:togglePath,filterFolder:filterByFolder,activeFilter:folderFilter\}\)/);
+  assert.doesNotMatch(htmlSource, /onSelect:goToFile\},expanded/);
+  assert.match(htmlSource, /className:'blast-file',onClick:function\(\)\{goToFile\(path\);\}/);
+  assert.match(htmlSource, /className:'conn-goto',onClick:function\(\)\{goToFile\(conn\.file\);\}/);
+  assert.match(htmlSource, /currentHydrationId,/);
+  assert.match(htmlSource, /shouldSeedOpenedCodeCards/);
+  assert.match(htmlSource, /ensureCodeViewOpenedPaths/);
+  assert.match(htmlSource, /codeViewSessionRef/);
+  assert.match(htmlSource, /x2<x1/);
+  assert.match(htmlSource, /shouldFitCodeCamera/);
+  assert.match(htmlSource, /codeViewCameraReadyRef/);
+  assert.match(htmlSource, /graphRebuildKey/);
+  assert.match(htmlSource, /connectionIdentity/);
+  assert.match(htmlSource, /fileGraphIdentity/);
+  assert.match(htmlSource, /resolveOpenCodeCard/);
+  assert.match(htmlSource, /codeViewSceneKey/);
+  assert.match(htmlSource, /naturalWidth>width/);
+  assert.match(htmlSource, /!byPath\[selectedPath\]/);
+  assert.match(htmlSource, /nodeReplacedByCard/);
+  assert.match(htmlSource, /unburyNodesFromCards/);
+  assert.match(htmlSource, /\.has-code-card\{display:none/);
+  assert.doesNotMatch(htmlSource, /\.code-faded \.nc\{opacity:0\.18/);
+  assert.doesNotMatch(htmlSource, /if\(firstOpen&&codeViewFiles\.length/);
+  assert.match(htmlSource, /className:'code-sym-list'/);
+  assert.doesNotMatch(htmlSource, /className:'code-sym-row'/);
+  assert.match(htmlSource, /CODE_CARD_MAX/);
+  assert.match(htmlSource, /CODE_CARD_WIDTH/);
+  assert.match(htmlSource, /consumeCodeCardClick/);
+  assert.match(htmlSource, /Open cards stay put/);
+  assert.doesNotMatch(htmlSource, /shift the set/);
   assert.match(htmlSource, /vizType==='code'/);
   assert.match(htmlSource, /readableLabelScale/);
   assert.match(htmlSource, /listRecentAnalyses/);
+  assert.match(htmlSource, /armRecentDelete/);
+  assert.match(htmlSource, /Confirm\?/);
   assert.match(htmlSource, /__codeflow\/status/);
   assert.match(htmlSource, /analyzeFromCli\(false,status\)/);
   assert.match(htmlSource, /retainedFolderMatchesRecord/);
   assert.match(htmlSource, /retainedZipMatchesRecord/);
   assert.match(htmlSource, /cliRecordMatchesStatus/);
   assert.match(htmlSource, /githubCacheSourceKey/);
+  assert.match(htmlSource, /githubSourceKeyForLoadedAnalysis/);
+  assert.match(htmlSource, /folderFilterAfterCodeNav/);
+  assert.match(htmlSource, /setFolderFilter\(nextFilter\)/);
+  assert.match(htmlSource, /allowReplace=!!\(replace\|\|reveal\)/);
   assert.match(htmlSource, /filterAnalyzableLocalFiles\(/);
   assert.match(htmlSource, /asCodeLines\(highlightSyntax/);
   assert.match(htmlSource, /zipArchiveCacheMeta/);
   assert.match(htmlSource, /compactAnalysisForCache/);
   assert.match(htmlSource, /fileHasLoadedSource/);
-  assert.match(htmlSource, /codeSplitPanePercent/);
   assert.match(htmlSource, /onPointerDown/);
   assert.match(htmlSource, /__codeflow\/file\?path=/);
   assert.match(htmlSource, /The folder picker is faster when the API is rate-limited/);
+  assert.match(htmlSource, /className:'panel-tab-pill'/);
+  assert.match(htmlSource, /\.panel-tab\{[^}]*flex-wrap:nowrap/);
+  assert.match(htmlSource, /\.panel-tabs\{[^}]*flex-wrap:nowrap/);
+  assert.match(htmlSource, /className:'sidebar-tabs'/);
+  assert.match(htmlSource, /className:'sidebar-tab'/);
+  assert.match(htmlSource, /useState\('overview'\),leftTab=/);
+  assert.match(htmlSource, /setLeftTab\('overview'\)/);
+  assert.match(htmlSource, /setLeftTab\('files'\)/);
+  assert.match(htmlSource, /setLeftTab\('recents'\)/);
+  assert.doesNotMatch(htmlSource, /if\(data&&!hadAnalysisRef\.current\)setLeftTab\('files'\)/);
+  assert.match(htmlSource, /function renderColorByControl\(/);
+  assert.match(htmlSource, /className:'color-by'/);
+  assert.match(htmlSource, /function renderCodeViewPrefs\(/);
+  assert.match(htmlSource, /className:'color-by code-view-prefs'/);
+  assert.match(htmlSource, /Expand All/);
+  assert.match(htmlSource, /Wrap Text/);
+  assert.match(htmlSource, /setCodeViewExpand\(!codeViewExpand\)/);
+  assert.match(htmlSource, /setCodeViewWrap\(!codeViewWrap\)/);
+  assert.match(htmlSource, /'aria-pressed':codeViewExpand/);
+  assert.match(htmlSource, /'aria-pressed':codeViewWrap/);
+  assert.match(htmlSource, /normalizeCodeCardPrefs/);
+  assert.match(htmlSource, /codeCardWrapColumns/);
+  assert.match(htmlSource, /liveGraphNodeXY/);
+  assert.match(htmlSource, /readCodeCardWorldBoxes/);
+  assert.match(htmlSource, /codeFolderHullBounds/);
+  assert.match(htmlSource, /codeFolderHullsByFolder/);
+  assert.match(htmlSource, /graphFolderCenters/);
+  assert.match(htmlSource, /parkLeftoverCodeNodes/);
+  assert.match(htmlSource, /beginCodeCardResize/);
+  assert.match(htmlSource, /data-code-resize/);
+  assert.match(htmlSource, /code-card-resize-e/);
+  assert.match(htmlSource, /code-card-resize-s/);
+  assert.match(htmlSource, /applyCodeCardUserSize/);
+  assert.match(htmlSource, /liveNodesByFolder/);
+  assert.match(htmlSource, /readCodeCardWorldBoxes\(codeCardsLayerRef\.current\)/);
+  assert.match(htmlSource, /codeFolderHullBounds\(cardNodes,leftover/);
+  assert.match(htmlSource, /if\(updateHullsRef\.current\)updateHullsRef\.current\(\)/);
+  assert.match(htmlSource, /codeViewExpand,codeViewWrap/);
+  assert.match(htmlSource, /cardSize\.expand\?' expand'/);
+  assert.match(htmlSource, /cardSize\.wrap\?' wrap'/);
+  assert.match(htmlSource, /\.code-card\.wrap \.file-preview-text/);
+  assert.match(htmlSource, /white-space:pre-wrap/);
+  assert.match(htmlSource, /\.code-card\.expand:not\(\.wrap\) \.code-card-body\{overflow-x:auto/);
+  assert.doesNotMatch(htmlSource, /sidebar-title'\},'Color By'/);
+  assert.doesNotMatch(htmlSource, /sidebar-title'\},'Explorer'/);
 });
diff --git a/tests/inline-babel-parse.smoke.js b/tests/inline-babel-parse.smoke.js
new file mode 100644
index 0000000..b2d7a14
--- /dev/null
+++ b/tests/inline-babel-parse.smoke.js
@@ -0,0 +1,21 @@
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const test = require('node:test');
+const vm = require('node:vm');
+
+test('index.html inline Babel script parses', () => {
+  const html = fs.readFileSync(path.join(__dirname, '..', 'index.html'), 'utf8');
+  const startMark = '<script type="text/babel">';
+  const start = html.indexOf(startMark);
+  const end = html.lastIndexOf('</script>');
+  assert.ok(start >= 0 && end > start, 'inline Babel script should exist');
+  const script = html.slice(start + startMark.length, end);
+  assert.match(script, /onSelect:goToFile,expanded:expandedPaths/);
+  assert.doesNotMatch(script, /onSelect:goToFile\},expanded/);
+  assert.doesNotThrow(function () {
+    // The page is createElement, not JSX. Node's parser catches the same
+    // blank-screen syntax errors without loading vendor/babel in CI.
+    new vm.Script(script, { filename: 'index.html' });
+  });
+});