From 46ada38d7f31b3c2fa314dc43a0ee2d06be69037 Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 01:31:44 +0530
Subject: [PATCH 01/23] Create .gitignore

---
 .gitignore | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5af33c4
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,36 @@
+# Dependencies and build output
+node_modules/
+dist/
+build/
+.next/
+target/
+__pycache__/
+
+# Temp, coverage, and cache files
+*.log
+*.tmp
+*.pid
+.cache/
+coverage/
+.nyc_output/
+
+# OS and IDE noise
+.DS_Store
+Thumbs.db
+.idea/
+.vscode/settings.json
+
+# Secrets and local credentials
+.env
+.env.*
+*.pem
+*.key
+*credentials*.json
+*adminsdk*.json
+
+# Backup and editor swap files
+*.bak
+*.orig
+*_old.*
+*_copy.*
+*.swp

From 262477679f6e0d12710b25e3f8bd4f0351509b63 Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 01:32:25 +0530
Subject: [PATCH 02/23] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6ae345a..6a51979 100644
--- a/README.md
+++ b/README.md
@@ -317,7 +317,7 @@ If you're editing the markdown / wiki-link parser, Node.js unit tests live under
 node --test tests/
 ```
 
-`tests/verify-brain-vault.mjs` is an optional end-to-end script that runs the extractor pipeline against a local markdown vault (set `BRAIN_VAULT=/path/to/vault` or edit the default).
+`tests/verify-brain-vault.mjs` is an optional end-to-end script that always verifies the bundled fixtures and will also scan a real local vault when you set `BRAIN_VAULT=/path/to/vault`.
 
 ### Ideas for Contributions
 - [ ] Add support for more languages

From 778a48e316e89e2d71207bdce9a27b1356d9eee2 Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 01:33:22 +0530
Subject: [PATCH 03/23] Update index.html

---
 index.html | 209 +++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 156 insertions(+), 53 deletions(-)

diff --git a/index.html b/index.html
index 0bca0bd..8530bf2 100644
--- a/index.html
+++ b/index.html
@@ -11,19 +11,20 @@
     <meta property="og:title" content="CodeFlow — Visualize Your Codebase Architecture">
     <meta property="og:description" content="Turn any GitHub repo into an interactive architecture map in seconds. Zero setup, privacy-first, runs in your browser.">
     <meta property="og:type" content="website">
-    <meta property="og:image" content="https://via.placeholder.com/1200x630?text=CodeFlow">
+    <meta property="og:image" content="codeflow-social.png">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="CodeFlow — Visualize Your Codebase Architecture">
     <meta name="twitter:description" content="Turn any GitHub repo into an interactive architecture map in seconds. Zero setup, privacy-first.">
+    <meta name="twitter:image" content="codeflow-social.png">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-sankey/0.12.3/d3-sankey.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/acorn/8.11.3/acorn.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/web-tree-sitter@0.25.10/tree-sitter.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrsasign/11.1.0/jsrsasign-all-min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha384-tMH8h3BGESGckSAVGZ82T9n90ztNXxvdwvdM6UoR56cYcf+0iGXBliJ29D+wZ/x8" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha384-bm7MnzvK++ykSwVJ2tynSE5TRdN+xL418osEVF2DE/L/gfWHj91J2Sphe582B1Bh" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js" integrity="sha384-1qlE7MZPM2pHD/pBZCU/yB8UCP52RYL8bge/qNdfNBCWToySp8/M+JL2waXU4hjJ" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js" integrity="sha384-su5kReKyYlIFrI62mbQRKXHzFobMa7BHp1cK6julLPbnYcCW9NIZKJiTODjLPeDh" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-sankey/0.12.3/d3-sankey.min.js" integrity="sha384-SM54CE5h+qdDI046d2Y5ym7wq1kq4uxcQ1cqGq5/+5jrE5tPLeDJSq711Q8sIska" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/acorn/8.11.3/acorn.min.js" integrity="sha384-UBJ+PIHbfQXlHY8kyExQw89exInn6mDymPpZpWLkUC+MahGs78lUVsoZHVkJK8t+" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/web-tree-sitter@0.25.10/tree-sitter.js" integrity="sha384-LfjKw5UCDh/URIW4R0LSwbzUivo6kO5rgvIuZyfttG3piadg6I20g6UQvL4eX50v" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jsrsasign@11.1.1/lib/jsrsasign-all-min.js" integrity="sha384-sMx1zfVaYRSSPMxNRfS2XV69ojCeVbHPdzV4o8lwAusXr06jd8U+LnYaIj45c5cm" crossorigin="anonymous"></script>
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
     <style>
 :root{--bg0:#0a0a0c;--bg1:#0f0f12;--bg2:#161619;--bg3:#1c1c21;--bg4:#252529;--hover:#2a2a30;--border:#2d2d35;--border2:#222228;--t0:#f0f0f2;--t1:#c8c8cd;--t2:#8b8b95;--t3:#5c5c66;--acc:#00ff9d;--acc2:#00cc7d;--accbg:rgba(0,255,157,0.08);--blue:#4d9fff;--purple:#a78bfa;--orange:#ff9f43;--red:#ff5f5f;--cyan:#22d3ee;--pink:#ec4899;--green:#22c55e}
@@ -541,6 +542,56 @@
            content.includes("dangerouslySetInnerHTML:{__html:lineHtml||' '}");
 }
 
+function escapeHtml(value){
+    return String(value===undefined||value===null?'':value)
+        .replace(/&/g,'&amp;')
+        .replace(/</g,'&lt;')
+        .replace(/>/g,'&gt;')
+        .replace(/"/g,'&quot;')
+        .replace(/'/g,'&#39;');
+}
+
+function renderTooltipHtml(title,stats){
+    var html='<div class="treemap-tooltip-title">'+escapeHtml(title)+'</div>';
+    (stats||[]).forEach(function(stat){
+        html+='<div class="treemap-tooltip-stat"><span>'+escapeHtml(stat[0])+'</span><span>'+escapeHtml(stat[1])+'</span></div>';
+    });
+    return html;
+}
+
+function splitGitHubPath(path){
+    return String(path||'').split('/').filter(Boolean);
+}
+
+function decodeBase64Utf8(value){
+    if(!value)return'';
+    var normalized=String(value).replace(/\s+/g,'');
+    var binary=atob(normalized);
+    var bytes=new Uint8Array(binary.length);
+    for(var i=0;i<binary.length;i++)bytes[i]=binary.charCodeAt(i);
+    if(typeof TextDecoder!=='undefined'){
+        return new TextDecoder('utf-8').decode(bytes);
+    }
+    try{
+        var encoded='';
+        for(var j=0;j<bytes.length;j++){
+            encoded+='%'+bytes[j].toString(16).padStart(2,'0');
+        }
+        return decodeURIComponent(encoded);
+    }catch(e){
+        return binary;
+    }
+}
+
+function downloadBlob(filename,blob){
+    var url=URL.createObjectURL(blob);
+    var a=document.createElement('a');
+    a.href=url;
+    a.download=filename;
+    a.click();
+    setTimeout(function(){URL.revokeObjectURL(url);},0);
+}
+
 const Parser={
     // tree-sitter Python parser (real AST parser, loaded async via WASM)
     _tsParser:null,
@@ -2452,6 +2503,49 @@
     installationToken:null,
     installationTokenExpiry:null,
     rateLimit:{remaining:60,limit:60,reset:0},
+    requestTimeoutMs:15000,
+
+    buildRepoUrl:function(o,r,segments,query){
+        var url='https://api.github.com/repos/'+encodeURIComponent(o)+'/'+encodeURIComponent(r);
+        if(segments&&segments.length){
+            url+='/'+segments.map(function(seg){return encodeURIComponent(String(seg));}).join('/');
+        }
+        if(query){
+            var params=new URLSearchParams();
+            Object.keys(query).forEach(function(key){
+                if(query[key]!==undefined&&query[key]!==null&&query[key]!==''){
+                    params.append(key,String(query[key]));
+                }
+            });
+            var qs=params.toString();
+            if(qs)url+='?'+qs;
+        }
+        return url;
+    },
+
+    request:function(url,options){
+        var self=this;
+        var opts=options?Object.assign({},options):{};
+        var headers=opts.headers?Object.assign({},opts.headers):{};
+        if(!headers.Accept)headers.Accept='application/vnd.github.v3+json';
+        opts.headers=headers;
+        var controller=typeof AbortController!=='undefined'?new AbortController():null;
+        var timeoutId=null;
+        if(controller){
+            timeoutId=setTimeout(function(){controller.abort();},this.requestTimeoutMs);
+            opts.signal=controller.signal;
+        }
+        return fetch(url,opts).then(function(response){
+            if(timeoutId!==null)clearTimeout(timeoutId);
+            return response;
+        }).catch(function(error){
+            if(timeoutId!==null)clearTimeout(timeoutId);
+            if(error&&error.name==='AbortError'){
+                throw new Error('GitHub API request timed out after '+Math.round(self.requestTimeoutMs/1000)+' seconds');
+            }
+            throw error;
+        });
+    },
     
     // Generate JWT for GitHub App authentication
     generateJWT:function(){
@@ -2474,17 +2568,22 @@
         }
     },
     
-    // Get installations for the GitHub App
-    getInstallations:function(){
+    // Get the installation for a specific repository
+    getRepoInstallation:function(owner,repo){
         var jwt=this.generateJWT();
         if(!jwt)return Promise.reject(new Error('Failed to generate JWT'));
-        return fetch('https://api.github.com/app/installations',{
+        return this.request(this.buildRepoUrl(owner,repo,['installation']),{
             headers:{
-                'Accept':'application/vnd.github.v3+json',
+                'Accept':'application/vnd.github+json',
                 'Authorization':'Bearer '+jwt
             }
         }).then(function(r){
-            if(!r.ok)throw new Error(r.status===401?'Invalid App credentials':'Error '+r.status);
+            if(!r.ok)throw new Error(
+                r.status===401?'Invalid App credentials':
+                r.status===404?'GitHub App is not installed on this repository':
+                r.status===403?'GitHub App does not have access to this repository':
+                'Error '+r.status
+            );
             return r.json();
         });
     },
@@ -2494,10 +2593,10 @@
         var self=this;
         var jwt=this.generateJWT();
         if(!jwt)return Promise.reject(new Error('Failed to generate JWT'));
-        return fetch('https://api.github.com/app/installations/'+installationId+'/access_tokens',{
+        return this.request('https://api.github.com/app/installations/'+encodeURIComponent(String(installationId))+'/access_tokens',{
             method:'POST',
             headers:{
-                'Accept':'application/vnd.github.v3+json',
+                'Accept':'application/vnd.github+json',
                 'Authorization':'Bearer '+jwt
             }
         }).then(function(r){
@@ -2519,17 +2618,7 @@
             this.token=this.installationToken;
             return Promise.resolve(this.installationToken);
         }
-        // Get installations and find the one for this repo
-        return this.getInstallations().then(function(installations){
-            if(!installations||!installations.length){
-                throw new Error('No installations found for this GitHub App');
-            }
-            // Try to find installation that has access to this repo
-            // For simplicity, we'll use the first installation
-            // In production, you'd want to match by account/owner
-            var installation=installations.find(function(i){
-                return i.account&&i.account.login&&i.account.login.toLowerCase()===owner.toLowerCase();
-            })||installations[0];
+        return this.getRepoInstallation(owner,repo).then(function(installation){
             return self.getInstallationToken(installation.id);
         });
     },
@@ -2538,7 +2627,7 @@
         var self=this;
         var h={'Accept':'application/vnd.github.v3+json'};
         if(this.token)h['Authorization']='Bearer '+this.token;
-        return fetch(url,{headers:h}).then(function(r){
+        return this.request(url,{headers:h}).then(function(r){
             // Track rate limit from headers
             var rem=r.headers.get('x-ratelimit-remaining');
             var lim=r.headers.get('x-ratelimit-limit');
@@ -2546,7 +2635,13 @@
             if(rem!==null)self.rateLimit.remaining=parseInt(rem,10);
             if(lim!==null)self.rateLimit.limit=parseInt(lim,10);
             if(rst!==null)self.rateLimit.reset=parseInt(rst,10);
-            if(!r.ok)throw new Error(r.status===401?'Invalid token':r.status===403?'Rate limited - add a GitHub token for 5000 req/hour':r.status===404?'Repository not found':r.status===429?'Rate limited (429) - add a GitHub token':'Error '+r.status);
+            if(!r.ok)throw new Error(
+                r.status===401?'Invalid token':
+                r.status===403?(self.rateLimit.remaining===0?'Rate limited - add a GitHub token for 5000 req/hour':'Access denied or rate limited'):
+                r.status===404?'Repository not found':
+                r.status===429?'Rate limited (429) - add a GitHub token':
+                'Error '+r.status
+            );
             return r.json();
         });
     },
@@ -2554,7 +2649,7 @@
         var self=this;
         var h={'Accept':'application/vnd.github.v3+json'};
         if(this.token)h['Authorization']='Bearer '+this.token;
-        return fetch('https://api.github.com/rate_limit',{headers:h}).then(function(r){return r.json();}).then(function(d){
+        return this.request('https://api.github.com/rate_limit',{headers:h}).then(function(r){return r.json();}).then(function(d){
             if(d.resources&&d.resources.core){
                 self.rateLimit.remaining=d.resources.core.remaining;
                 self.rateLimit.limit=d.resources.core.limit;
@@ -2564,11 +2659,13 @@
         }).catch(function(){return self.rateLimit;});
     },
     getFile:function(o,r,p){
-        return this.fetch('https://api.github.com/repos/'+o+'/'+r+'/contents/'+p).then(function(d){return d.content?atob(d.content):null;}).catch(function(){return null;});
+        return this.fetch(this.buildRepoUrl(o,r,['contents'].concat(splitGitHubPath(p)))).then(function(d){
+            return d.content?decodeBase64Utf8(d.content):null;
+        }).catch(function(){return null;});
     },
     getCommits:function(o,r,path,limit){
         if(this.rateLimit.remaining<20&&!this.token)return Promise.resolve([]);// Skip when rate limited
-        return this.fetch('https://api.github.com/repos/'+o+'/'+r+'/commits?per_page='+(limit||30)+(path?'&path='+path:'')).catch(function(){return[];});
+        return this.fetch(this.buildRepoUrl(o,r,['commits'],{per_page:limit||30,path:path||undefined})).catch(function(){return[];});
     },
     getBlame:function(o,r,path){
         return this.getCommits(o,r,path,50).then(function(commits){
@@ -2579,8 +2676,8 @@
     },
     getPR:function(o,r,prNum){
         var self=this;
-        return this.fetch('https://api.github.com/repos/'+o+'/'+r+'/pulls/'+prNum).then(function(pr){
-            return self.fetch('https://api.github.com/repos/'+o+'/'+r+'/pulls/'+prNum+'/files').then(function(files){
+        return this.fetch(this.buildRepoUrl(o,r,['pulls',String(prNum)])).then(function(pr){
+            return self.fetch(self.buildRepoUrl(o,r,['pulls',String(prNum),'files'])).then(function(files){
                 pr.files=files;return pr;
             });
         }).catch(function(){return null;});
@@ -2590,11 +2687,11 @@
         var self=this;
         if(cb)cb('Fetching repository tree...');
         // First get repo info to find default branch
-        return this.fetch('https://api.github.com/repos/'+o+'/'+r).then(function(repo){
+        return this.fetch(this.buildRepoUrl(o,r)).then(function(repo){
             var branch=repo.default_branch||'main';
             if(cb)cb('Loading file tree ('+branch+')...');
             // Get full tree in one request with recursive flag
-            return self.fetch('https://api.github.com/repos/'+o+'/'+r+'/git/trees/'+branch+'?recursive=1');
+            return self.fetch(self.buildRepoUrl(o,r,['git','trees',branch],{recursive:1}));
         }).then(function(tree){
             if(!tree.tree)throw new Error('Invalid tree response');
             var f=[];
@@ -2619,7 +2716,7 @@
     scanRecursive:function(o,r,cb,p,d,compiledPatterns){
         var self=this;p=p||'';d=d||0;
         if(d>10)return Promise.resolve([]);
-        return this.fetch('https://api.github.com/repos/'+o+'/'+r+'/contents/'+p).then(function(c){
+        return this.fetch(this.buildRepoUrl(o,r,['contents'].concat(splitGitHubPath(p)))).then(function(c){
             var f=[];
             var promises=[];
             c.forEach(function(i){
@@ -2972,10 +3069,12 @@
     var nodesRef=useRef(null);
     var linksRef=useRef(null);
     var selectFileRef=useRef(null);
+    var toastTimeoutRef=useRef(null);
     var activeExcludePatterns=useMemo(function(){return compileExcludePatterns(excludePatternInput);},[excludePatternInput]);
     var customExcludeCount=activeExcludePatterns.length;
 
     useEffect(function(){document.body.className=theme==='light'?'light':'';},[theme]);
+    useEffect(function(){return function(){if(toastTimeoutRef.current)clearTimeout(toastTimeoutRef.current);};},[]);
 
     useEffect(function(){
         var params=new URLSearchParams(window.location.search);
@@ -3995,7 +4094,7 @@
             .text(function(d){return d.data.value+' lines';});
         var tooltip=container.append('div').attr('class','treemap-tooltip').style('display','none').style('position','absolute');
         cells.on('mouseenter',function(e,d){
-            tooltip.html('<div class="treemap-tooltip-title">'+d.data.name+'</div><div class="treemap-tooltip-stat"><span>Lines:</span><span>'+d.data.value+'</span></div><div class="treemap-tooltip-stat"><span>Functions:</span><span>'+(d.data.fns||0)+'</span></div><div class="treemap-tooltip-stat"><span>Layer:</span><span>'+(d.data.layer||'—')+'</span></div><div class="treemap-tooltip-stat"><span>Folder:</span><span>'+(d.data.folder||'root')+'</span></div>')
+            tooltip.html(renderTooltipHtml(d.data.name,[['Lines',d.data.value],['Functions',d.data.fns||0],['Layer',d.data.layer||'—'],['Folder',d.data.folder||'root']]))
                 .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             d3.select(this).select('rect').transition().duration(150).attr('opacity',1).attr('stroke','var(--acc)').attr('stroke-width',2);
         }).on('mousemove',function(e){tooltip.style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');})
@@ -4065,7 +4164,7 @@
             .attr('fill',function(d){return d.value>0?'rgba(0,255,157,'+Math.max(0.15,d.value/maxVal)+')':'var(--bg2)';})
             .attr('stroke','var(--bg0)').attr('stroke-width',0.5).style('cursor','pointer');
         cells.on('mouseenter',function(e,d){
-            tooltip.html('<div class="treemap-tooltip-title">'+d.source.name+' → '+d.target.name+'</div><div class="treemap-tooltip-stat"><span>Connections:</span><span>'+d.value+'</span></div>')
+            tooltip.html(renderTooltipHtml(d.source.name+' → '+d.target.name,[['Connections',d.value]]))
                 .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             g.selectAll('rect.matrix-cell-rect').attr('opacity',function(c){return c.row===d.row||c.col===d.col?1:0.3;});
             colLabels.attr('fill',function(f,i){return i===d.col?'var(--acc)':'var(--t2)';}).attr('font-weight',function(f,i){return i===d.col?'600':'400';});
@@ -4120,7 +4219,7 @@
             .attr('fill','var(--t2)').attr('font-size','10px').attr('font-weight','600').text(function(d){return d.data.name;});
         node.on('mouseenter',function(e,d){
             if(!d.data.path)return;
-            tooltip.html('<div class="treemap-tooltip-title">'+d.data.name+'</div><div class="treemap-tooltip-stat"><span>Lines:</span><span>'+(d.data.lines||0)+'</span></div><div class="treemap-tooltip-stat"><span>Functions:</span><span>'+(d.data.fns||0)+'</span></div><div class="treemap-tooltip-stat"><span>Layer:</span><span>'+(d.data.layer||'—')+'</span></div>')
+            tooltip.html(renderTooltipHtml(d.data.name,[['Lines',d.data.lines||0],['Functions',d.data.fns||0],['Layer',d.data.layer||'—']]))
                 .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             d3.select(this).select('circle').transition().duration(150).attr('r',12).attr('stroke','var(--acc)').attr('stroke-width',3);
         }).on('mousemove',function(e){tooltip.style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');})
@@ -4198,7 +4297,7 @@
             .attr('stroke-width',function(d){return Math.max(2,d.width);}).attr('stroke-opacity',0.4)
             .on('mouseenter',function(e,d){
                 d3.select(this).attr('stroke-opacity',0.8);
-                tooltip.html('<div class="treemap-tooltip-title">'+d.source.name+' → '+d.target.name+'</div><div class="treemap-tooltip-stat"><span>Connections:</span><span>'+d.value+'</span></div>')
+                tooltip.html(renderTooltipHtml(d.source.name+' → '+d.target.name,[['Connections',d.value]]))
                     .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             }).on('mouseleave',function(){d3.select(this).attr('stroke-opacity',0.4);tooltip.style('display','none');});
         var node=g.selectAll('g.sankey-node').data(graph.nodes).join('g').attr('class','sankey-node').style('cursor','pointer');
@@ -4209,7 +4308,7 @@
             .attr('dy','0.35em').attr('text-anchor',function(d){return d.x0<w/2?'start':'end';})
             .attr('fill','var(--t1)').attr('font-size','10px').attr('font-weight','500').text(function(d){return d.name+' ('+d.fileCount+')';});
         node.on('mouseenter',function(e,d){
-            tooltip.html('<div class="treemap-tooltip-title">'+d.fullPath+'</div><div class="treemap-tooltip-stat"><span>Files:</span><span>'+d.fileCount+'</span></div>')
+            tooltip.html(renderTooltipHtml(d.fullPath,[['Files',d.fileCount]]))
                 .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             g.selectAll('path.sankey-link').attr('stroke-opacity',function(l){return l.source.id===d.id||l.target.id===d.id?0.8:0.1;});
         }).on('mouseleave',function(){tooltip.style('display','none');g.selectAll('path.sankey-link').attr('stroke-opacity',0.4);})
@@ -4264,7 +4363,7 @@
         node.append('circle').attr('class','disjoint-circle').attr('r',function(d){return Math.max(6,Math.min(14,4+d.fns));})
             .attr('fill',function(d){return colorMap[d.folder]||COLORS[0];}).attr('stroke','var(--bg0)').attr('stroke-width',1.5);
         node.on('mouseenter',function(e,d){
-            tooltip.html('<div class="treemap-tooltip-title">'+d.name+'</div><div class="treemap-tooltip-stat"><span>Lines:</span><span>'+(d.lines||0)+'</span></div><div class="treemap-tooltip-stat"><span>Functions:</span><span>'+(d.fns||0)+'</span></div><div class="treemap-tooltip-stat"><span>Folder:</span><span>'+d.folder+'</span></div>')
+            tooltip.html(renderTooltipHtml(d.name,[['Lines',d.lines||0],['Functions',d.fns||0],['Folder',d.folder]]))
                 .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             link.attr('stroke-opacity',function(l){return l.source.id===d.id||l.target.id===d.id?0.8:0.05;}).attr('stroke',function(l){return l.source.id===d.id||l.target.id===d.id?'var(--acc)':'var(--border)';});
             d3.select(this).select('circle').transition().duration(150).attr('r',14).attr('stroke','var(--acc)').attr('stroke-width',2);
@@ -4389,7 +4488,7 @@
         }
         node.on('mouseenter',function(e,d){
             var rect=bundleRef.current.getBoundingClientRect();
-            tooltip.html('<div class="treemap-tooltip-title">'+d.name+'</div><div class="treemap-tooltip-stat"><span>Lines:</span><span>'+(d.lines||0)+'</span></div><div class="treemap-tooltip-stat"><span>Functions:</span><span>'+(d.fns||0)+'</span></div><div class="treemap-tooltip-stat"><span>Folder:</span><span>'+(d.folder||'root')+'</span></div>')
+            tooltip.html(renderTooltipHtml(d.name,[['Lines',d.lines||0],['Functions',d.fns||0],['Folder',d.folder||'root']]))
                 .style('display','block').style('left',(e.clientX-rect.left+15)+'px').style('top',(e.clientY-rect.top+15)+'px');
             applyBundleHoverState(d.id);
         }).on('mousemove',function(e){var rect=bundleRef.current.getBoundingClientRect();tooltip.style('left',(e.clientX-rect.left+15)+'px').style('top',(e.clientY-rect.top+15)+'px');})
@@ -4447,8 +4546,8 @@
         var scale=0.8/Math.max((maxX-minX+100)/w,(maxY-minY+100)/h);
         d3.select(svgRef.current).transition().duration(400).call(zoomRef.current.transform,d3.zoomIdentity.translate(w/2-scale*(minX+maxX)/2,h/2-scale*(minY+maxY)/2).scale(Math.min(scale,2)));
     }
-    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='text{font-family:JetBrains Mono,monospace;pointer-events:none}';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 exportJSON(){if(!data)return;var blob=new Blob([JSON.stringify({stats:data.stats,files:data.files.map(function(f){return{path:f.path,fns:f.functions.length,layer:f.layer,lines:f.lines,dependencies:f.dependencies||[]};}),connections:data.connections,issues:data.issues,patterns:data.patterns,security:data.securityIssues},null,2)],{type:'application/json'});var url=URL.createObjectURL(blob);var a=document.createElement('a');a.href=url;a.download='codeflow-analysis.json';a.click();}
+    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='text{font-family:JetBrains Mono,monospace;pointer-events:none}';svgClone.insertBefore(style,svgClone.firstChild);downloadBlob('codeflow-'+Date.now()+'.svg',new Blob([new XMLSerializer().serializeToString(svgClone)],{type:'image/svg+xml'}));}
+    function exportJSON(){if(!data)return;downloadBlob('codeflow-analysis.json',new Blob([JSON.stringify({stats:data.stats,files:data.files.map(function(f){return{path:f.path,fns:f.functions.length,layer:f.layer,lines:f.lines,dependencies:f.dependencies||[]};}),connections:data.connections,issues:data.issues,patterns:data.patterns,security:data.securityIssues},null,2)],{type:'application/json'}));}
     function generateReport(format){
         if(!data)return;
         var repo=repoInfo?(localDirHandle?'Local Folder':repoInfo.owner+'/'+repoInfo.repo):'Unknown Repository';
@@ -4535,8 +4634,7 @@
             })
         };
         if(format==='json'){
-            var blob=new Blob([JSON.stringify(report,null,2)],{type:'application/json'});
-            var url=URL.createObjectURL(blob);var a=document.createElement('a');a.href=url;a.download='codeflow-report.json';a.click();URL.revokeObjectURL(url);
+            downloadBlob('codeflow-report.json',new Blob([JSON.stringify(report,null,2)],{type:'application/json'}));
         }else if(format==='md'){
             var md='# CodeFlow Analysis Report\n\n';
             md+='**Repository:** '+repo+'\n';
@@ -4605,8 +4703,7 @@
                 md+='| `'+f.name+'` | '+f.folder+' | '+f.layer+' | '+f.lines+' | '+f.functions.length+' |\n';
             });
             if(data.files.length>100)md+='\n*...and '+(data.files.length-100)+' more files*\n';
-            var blob=new Blob([md],{type:'text/markdown'});
-            var url=URL.createObjectURL(blob);var a=document.createElement('a');a.href=url;a.download='codeflow-report.md';a.click();URL.revokeObjectURL(url);
+            downloadBlob('codeflow-report.md',new Blob([md],{type:'text/markdown'}));
         }else if(format==='txt'){
             var txt='CODEFLOW ANALYSIS REPORT\n';
             txt+='========================\n\n';
@@ -4669,12 +4766,18 @@
                 txt+=src.split('/').pop()+' -> '+tgt.split('/').pop()+' ('+c.fn+': '+c.count+' calls)\n';
             });
             if(data.connections.length>100)txt+='\n...and '+(data.connections.length-100)+' more dependencies\n';
-            var blob=new Blob([txt],{type:'text/plain'});
-            var url=URL.createObjectURL(blob);var a=document.createElement('a');a.href=url;a.download='codeflow-report.txt';a.click();URL.revokeObjectURL(url);
+            downloadBlob('codeflow-report.txt',new Blob([txt],{type:'text/plain'}));
         }
         showNotification('Report exported as '+format.toUpperCase(),'success');
     }
-    function showNotification(msg,type){setToast({msg:msg,type:type||'success'});setTimeout(function(){setToast(null);},3000);}
+    function showNotification(msg,type){
+        if(toastTimeoutRef.current)clearTimeout(toastTimeoutRef.current);
+        setToast({msg:msg,type:type||'success'});
+        toastTimeoutRef.current=setTimeout(function(){
+            setToast(null);
+            toastTimeoutRef.current=null;
+        },3000);
+    }
     function copyLink(){
         if(localDirHandle){
             showNotification('Share links are not available for local folders','warning');

From 489cd70120b732636135f57764846a0af585a0c3 Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 01:35:33 +0530
Subject: [PATCH 04/23] Update verify-brain-vault.mjs

---
 tests/verify-brain-vault.mjs | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/tests/verify-brain-vault.mjs b/tests/verify-brain-vault.mjs
index 7788970..fa175b6 100644
--- a/tests/verify-brain-vault.mjs
+++ b/tests/verify-brain-vault.mjs
@@ -2,8 +2,9 @@
 // index.html, against the real Brain vault, and emit the same export shape
 // that exportJSON produces. Proves the parser works on the real-world fixture.
 
-import { readFileSync, writeFileSync, readdirSync, statSync } from 'node:fs';
+import { readFileSync, writeFileSync, readdirSync, statSync, existsSync } from 'node:fs';
 import { join, relative, sep } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { extractMarkdownLinks, resolveMarkdownLink } from './md-extractors.mjs';
 
 const IGNORE = new Set(['node_modules', '.git', '.obsidian', '__pycache__', '.DS_Store']);
@@ -65,10 +66,25 @@ function exportShape(analyzed, conns) {
   };
 }
 
-const targets = [
-  { label: 'Brain vault', path: process.env.BRAIN_VAULT || '/Users/malcolm/Documents/Claude/Projects/Brain' },
-  { label: 'Test fixtures', path: new URL('./fixtures/vault', import.meta.url).pathname },
-];
+const DEFAULT_BRAIN_VAULT = '/Users/malcolm/Documents/Claude/Projects/Brain';
+const FIXTURE_VAULT = fileURLToPath(new URL('./fixtures/vault', import.meta.url));
+
+function resolveTargets() {
+  const targets = [{ label: 'Test fixtures', path: FIXTURE_VAULT }];
+  if (process.env.BRAIN_VAULT) {
+    if (!existsSync(process.env.BRAIN_VAULT)) {
+      throw new Error(`BRAIN_VAULT does not exist: ${process.env.BRAIN_VAULT}`);
+    }
+    targets.unshift({ label: 'Brain vault', path: process.env.BRAIN_VAULT });
+    return targets;
+  }
+  if (existsSync(DEFAULT_BRAIN_VAULT)) {
+    targets.unshift({ label: 'Brain vault', path: DEFAULT_BRAIN_VAULT });
+  }
+  return targets;
+}
+
+const targets = resolveTargets();
 
 let outPath = process.env.OUT || '/tmp/codeflow-verify.json';
 const results = {};

From f158def338a7e6af2dce2a041ede01ff8ed5fce3 Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 01:36:46 +0530
Subject: [PATCH 05/23] Update index.html

---
 index.html | 216 ++++++++++++++---------------------------------------
 1 file changed, 58 insertions(+), 158 deletions(-)

diff --git a/index.html b/index.html
index 8530bf2..a2a12fa 100644
--- a/index.html
+++ b/index.html
@@ -11,20 +11,19 @@
     <meta property="og:title" content="CodeFlow — Visualize Your Codebase Architecture">
     <meta property="og:description" content="Turn any GitHub repo into an interactive architecture map in seconds. Zero setup, privacy-first, runs in your browser.">
     <meta property="og:type" content="website">
-    <meta property="og:image" content="codeflow-social.png">
+    <meta property="og:image" content="https://via.placeholder.com/1200x630?text=CodeFlow">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="CodeFlow — Visualize Your Codebase Architecture">
     <meta name="twitter:description" content="Turn any GitHub repo into an interactive architecture map in seconds. Zero setup, privacy-first.">
-    <meta name="twitter:image" content="codeflow-social.png">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha384-tMH8h3BGESGckSAVGZ82T9n90ztNXxvdwvdM6UoR56cYcf+0iGXBliJ29D+wZ/x8" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha384-bm7MnzvK++ykSwVJ2tynSE5TRdN+xL418osEVF2DE/L/gfWHj91J2Sphe582B1Bh" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js" integrity="sha384-1qlE7MZPM2pHD/pBZCU/yB8UCP52RYL8bge/qNdfNBCWToySp8/M+JL2waXU4hjJ" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js" integrity="sha384-su5kReKyYlIFrI62mbQRKXHzFobMa7BHp1cK6julLPbnYcCW9NIZKJiTODjLPeDh" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-sankey/0.12.3/d3-sankey.min.js" integrity="sha384-SM54CE5h+qdDI046d2Y5ym7wq1kq4uxcQ1cqGq5/+5jrE5tPLeDJSq711Q8sIska" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/acorn/8.11.3/acorn.min.js" integrity="sha384-UBJ+PIHbfQXlHY8kyExQw89exInn6mDymPpZpWLkUC+MahGs78lUVsoZHVkJK8t+" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/web-tree-sitter@0.25.10/tree-sitter.js" integrity="sha384-LfjKw5UCDh/URIW4R0LSwbzUivo6kO5rgvIuZyfttG3piadg6I20g6UQvL4eX50v" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/jsrsasign@11.1.1/lib/jsrsasign-all-min.js" integrity="sha384-sMx1zfVaYRSSPMxNRfS2XV69ojCeVbHPdzV4o8lwAusXr06jd8U+LnYaIj45c5cm" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-sankey/0.12.3/d3-sankey.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/acorn/8.11.3/acorn.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/web-tree-sitter@0.25.10/tree-sitter.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrsasign/11.1.0/jsrsasign-all-min.js"></script>
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
     <style>
 :root{--bg0:#0a0a0c;--bg1:#0f0f12;--bg2:#161619;--bg3:#1c1c21;--bg4:#252529;--hover:#2a2a30;--border:#2d2d35;--border2:#222228;--t0:#f0f0f2;--t1:#c8c8cd;--t2:#8b8b95;--t3:#5c5c66;--acc:#00ff9d;--acc2:#00cc7d;--accbg:rgba(0,255,157,0.08);--blue:#4d9fff;--purple:#a78bfa;--orange:#ff9f43;--red:#ff5f5f;--cyan:#22d3ee;--pink:#ec4899;--green:#22c55e}
@@ -232,8 +231,11 @@
 .graph-config-title{font-size:9px;font-weight:600;color:var(--t3);text-transform:uppercase;margin-bottom:10px}
 .config-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
 .config-label{font-size:10px;color:var(--t2);min-width:60px}
-.config-slider{flex:1;height:4px;-webkit-appearance:none;background:var(--bg3);border-radius:2px;outline:none}
-.config-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--acc);border-radius:50%;cursor:pointer}
+.config-slider{flex:1;height:4px;appearance:none;-webkit-appearance:none;background:var(--bg3);border:0;border-radius:2px;cursor:pointer;outline:none}
+.config-slider:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
+.config-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;background:var(--acc);border:0;border-radius:50%;cursor:pointer}
+.config-slider::-moz-range-track{height:4px;background:var(--bg3);border:0;border-radius:2px}
+.config-slider::-moz-range-thumb{width:12px;height:12px;background:var(--acc);border:0;border-radius:50%;cursor:pointer}
 .config-value{font-size:9px;color:var(--t3);min-width:28px;text-align:right}
 .view-toggle{display:flex;gap:4px;margin-bottom:10px}
 .view-btn{flex:1;padding:6px 8px;background:var(--bg0);border:1px solid var(--border);border-radius:4px;font-size:9px;color:var(--t2);cursor:pointer;text-align:center}
@@ -542,56 +544,6 @@
            content.includes("dangerouslySetInnerHTML:{__html:lineHtml||' '}");
 }
 
-function escapeHtml(value){
-    return String(value===undefined||value===null?'':value)
-        .replace(/&/g,'&amp;')
-        .replace(/</g,'&lt;')
-        .replace(/>/g,'&gt;')
-        .replace(/"/g,'&quot;')
-        .replace(/'/g,'&#39;');
-}
-
-function renderTooltipHtml(title,stats){
-    var html='<div class="treemap-tooltip-title">'+escapeHtml(title)+'</div>';
-    (stats||[]).forEach(function(stat){
-        html+='<div class="treemap-tooltip-stat"><span>'+escapeHtml(stat[0])+'</span><span>'+escapeHtml(stat[1])+'</span></div>';
-    });
-    return html;
-}
-
-function splitGitHubPath(path){
-    return String(path||'').split('/').filter(Boolean);
-}
-
-function decodeBase64Utf8(value){
-    if(!value)return'';
-    var normalized=String(value).replace(/\s+/g,'');
-    var binary=atob(normalized);
-    var bytes=new Uint8Array(binary.length);
-    for(var i=0;i<binary.length;i++)bytes[i]=binary.charCodeAt(i);
-    if(typeof TextDecoder!=='undefined'){
-        return new TextDecoder('utf-8').decode(bytes);
-    }
-    try{
-        var encoded='';
-        for(var j=0;j<bytes.length;j++){
-            encoded+='%'+bytes[j].toString(16).padStart(2,'0');
-        }
-        return decodeURIComponent(encoded);
-    }catch(e){
-        return binary;
-    }
-}
-
-function downloadBlob(filename,blob){
-    var url=URL.createObjectURL(blob);
-    var a=document.createElement('a');
-    a.href=url;
-    a.download=filename;
-    a.click();
-    setTimeout(function(){URL.revokeObjectURL(url);},0);
-}
-
 const Parser={
     // tree-sitter Python parser (real AST parser, loaded async via WASM)
     _tsParser:null,
@@ -2503,49 +2455,6 @@
     installationToken:null,
     installationTokenExpiry:null,
     rateLimit:{remaining:60,limit:60,reset:0},
-    requestTimeoutMs:15000,
-
-    buildRepoUrl:function(o,r,segments,query){
-        var url='https://api.github.com/repos/'+encodeURIComponent(o)+'/'+encodeURIComponent(r);
-        if(segments&&segments.length){
-            url+='/'+segments.map(function(seg){return encodeURIComponent(String(seg));}).join('/');
-        }
-        if(query){
-            var params=new URLSearchParams();
-            Object.keys(query).forEach(function(key){
-                if(query[key]!==undefined&&query[key]!==null&&query[key]!==''){
-                    params.append(key,String(query[key]));
-                }
-            });
-            var qs=params.toString();
-            if(qs)url+='?'+qs;
-        }
-        return url;
-    },
-
-    request:function(url,options){
-        var self=this;
-        var opts=options?Object.assign({},options):{};
-        var headers=opts.headers?Object.assign({},opts.headers):{};
-        if(!headers.Accept)headers.Accept='application/vnd.github.v3+json';
-        opts.headers=headers;
-        var controller=typeof AbortController!=='undefined'?new AbortController():null;
-        var timeoutId=null;
-        if(controller){
-            timeoutId=setTimeout(function(){controller.abort();},this.requestTimeoutMs);
-            opts.signal=controller.signal;
-        }
-        return fetch(url,opts).then(function(response){
-            if(timeoutId!==null)clearTimeout(timeoutId);
-            return response;
-        }).catch(function(error){
-            if(timeoutId!==null)clearTimeout(timeoutId);
-            if(error&&error.name==='AbortError'){
-                throw new Error('GitHub API request timed out after '+Math.round(self.requestTimeoutMs/1000)+' seconds');
-            }
-            throw error;
-        });
-    },
     
     // Generate JWT for GitHub App authentication
     generateJWT:function(){
@@ -2568,22 +2477,17 @@
         }
     },
     
-    // Get the installation for a specific repository
-    getRepoInstallation:function(owner,repo){
+    // Get installations for the GitHub App
+    getInstallations:function(){
         var jwt=this.generateJWT();
         if(!jwt)return Promise.reject(new Error('Failed to generate JWT'));
-        return this.request(this.buildRepoUrl(owner,repo,['installation']),{
+        return fetch('https://api.github.com/app/installations',{
             headers:{
-                'Accept':'application/vnd.github+json',
+                'Accept':'application/vnd.github.v3+json',
                 'Authorization':'Bearer '+jwt
             }
         }).then(function(r){
-            if(!r.ok)throw new Error(
-                r.status===401?'Invalid App credentials':
-                r.status===404?'GitHub App is not installed on this repository':
-                r.status===403?'GitHub App does not have access to this repository':
-                'Error '+r.status
-            );
+            if(!r.ok)throw new Error(r.status===401?'Invalid App credentials':'Error '+r.status);
             return r.json();
         });
     },
@@ -2593,10 +2497,10 @@
         var self=this;
         var jwt=this.generateJWT();
         if(!jwt)return Promise.reject(new Error('Failed to generate JWT'));
-        return this.request('https://api.github.com/app/installations/'+encodeURIComponent(String(installationId))+'/access_tokens',{
+        return fetch('https://api.github.com/app/installations/'+installationId+'/access_tokens',{
             method:'POST',
             headers:{
-                'Accept':'application/vnd.github+json',
+                'Accept':'application/vnd.github.v3+json',
                 'Authorization':'Bearer '+jwt
             }
         }).then(function(r){
@@ -2618,7 +2522,17 @@
             this.token=this.installationToken;
             return Promise.resolve(this.installationToken);
         }
-        return this.getRepoInstallation(owner,repo).then(function(installation){
+        // Get installations and find the one for this repo
+        return this.getInstallations().then(function(installations){
+            if(!installations||!installations.length){
+                throw new Error('No installations found for this GitHub App');
+            }
+            // Try to find installation that has access to this repo
+            // For simplicity, we'll use the first installation
+            // In production, you'd want to match by account/owner
+            var installation=installations.find(function(i){
+                return i.account&&i.account.login&&i.account.login.toLowerCase()===owner.toLowerCase();
+            })||installations[0];
             return self.getInstallationToken(installation.id);
         });
     },
@@ -2627,7 +2541,7 @@
         var self=this;
         var h={'Accept':'application/vnd.github.v3+json'};
         if(this.token)h['Authorization']='Bearer '+this.token;
-        return this.request(url,{headers:h}).then(function(r){
+        return fetch(url,{headers:h}).then(function(r){
             // Track rate limit from headers
             var rem=r.headers.get('x-ratelimit-remaining');
             var lim=r.headers.get('x-ratelimit-limit');
@@ -2635,13 +2549,7 @@
             if(rem!==null)self.rateLimit.remaining=parseInt(rem,10);
             if(lim!==null)self.rateLimit.limit=parseInt(lim,10);
             if(rst!==null)self.rateLimit.reset=parseInt(rst,10);
-            if(!r.ok)throw new Error(
-                r.status===401?'Invalid token':
-                r.status===403?(self.rateLimit.remaining===0?'Rate limited - add a GitHub token for 5000 req/hour':'Access denied or rate limited'):
-                r.status===404?'Repository not found':
-                r.status===429?'Rate limited (429) - add a GitHub token':
-                'Error '+r.status
-            );
+            if(!r.ok)throw new Error(r.status===401?'Invalid token':r.status===403?'Rate limited - add a GitHub token for 5000 req/hour':r.status===404?'Repository not found':r.status===429?'Rate limited (429) - add a GitHub token':'Error '+r.status);
             return r.json();
         });
     },
@@ -2649,7 +2557,7 @@
         var self=this;
         var h={'Accept':'application/vnd.github.v3+json'};
         if(this.token)h['Authorization']='Bearer '+this.token;
-        return this.request('https://api.github.com/rate_limit',{headers:h}).then(function(r){return r.json();}).then(function(d){
+        return fetch('https://api.github.com/rate_limit',{headers:h}).then(function(r){return r.json();}).then(function(d){
             if(d.resources&&d.resources.core){
                 self.rateLimit.remaining=d.resources.core.remaining;
                 self.rateLimit.limit=d.resources.core.limit;
@@ -2659,13 +2567,11 @@
         }).catch(function(){return self.rateLimit;});
     },
     getFile:function(o,r,p){
-        return this.fetch(this.buildRepoUrl(o,r,['contents'].concat(splitGitHubPath(p)))).then(function(d){
-            return d.content?decodeBase64Utf8(d.content):null;
-        }).catch(function(){return null;});
+        return this.fetch('https://api.github.com/repos/'+o+'/'+r+'/contents/'+p).then(function(d){return d.content?atob(d.content):null;}).catch(function(){return null;});
     },
     getCommits:function(o,r,path,limit){
         if(this.rateLimit.remaining<20&&!this.token)return Promise.resolve([]);// Skip when rate limited
-        return this.fetch(this.buildRepoUrl(o,r,['commits'],{per_page:limit||30,path:path||undefined})).catch(function(){return[];});
+        return this.fetch('https://api.github.com/repos/'+o+'/'+r+'/commits?per_page='+(limit||30)+(path?'&path='+path:'')).catch(function(){return[];});
     },
     getBlame:function(o,r,path){
         return this.getCommits(o,r,path,50).then(function(commits){
@@ -2676,8 +2582,8 @@
     },
     getPR:function(o,r,prNum){
         var self=this;
-        return this.fetch(this.buildRepoUrl(o,r,['pulls',String(prNum)])).then(function(pr){
-            return self.fetch(self.buildRepoUrl(o,r,['pulls',String(prNum),'files'])).then(function(files){
+        return this.fetch('https://api.github.com/repos/'+o+'/'+r+'/pulls/'+prNum).then(function(pr){
+            return self.fetch('https://api.github.com/repos/'+o+'/'+r+'/pulls/'+prNum+'/files').then(function(files){
                 pr.files=files;return pr;
             });
         }).catch(function(){return null;});
@@ -2687,11 +2593,11 @@
         var self=this;
         if(cb)cb('Fetching repository tree...');
         // First get repo info to find default branch
-        return this.fetch(this.buildRepoUrl(o,r)).then(function(repo){
+        return this.fetch('https://api.github.com/repos/'+o+'/'+r).then(function(repo){
             var branch=repo.default_branch||'main';
             if(cb)cb('Loading file tree ('+branch+')...');
             // Get full tree in one request with recursive flag
-            return self.fetch(self.buildRepoUrl(o,r,['git','trees',branch],{recursive:1}));
+            return self.fetch('https://api.github.com/repos/'+o+'/'+r+'/git/trees/'+branch+'?recursive=1');
         }).then(function(tree){
             if(!tree.tree)throw new Error('Invalid tree response');
             var f=[];
@@ -2716,7 +2622,7 @@
     scanRecursive:function(o,r,cb,p,d,compiledPatterns){
         var self=this;p=p||'';d=d||0;
         if(d>10)return Promise.resolve([]);
-        return this.fetch(this.buildRepoUrl(o,r,['contents'].concat(splitGitHubPath(p)))).then(function(c){
+        return this.fetch('https://api.github.com/repos/'+o+'/'+r+'/contents/'+p).then(function(c){
             var f=[];
             var promises=[];
             c.forEach(function(i){
@@ -3069,12 +2975,10 @@
     var nodesRef=useRef(null);
     var linksRef=useRef(null);
     var selectFileRef=useRef(null);
-    var toastTimeoutRef=useRef(null);
     var activeExcludePatterns=useMemo(function(){return compileExcludePatterns(excludePatternInput);},[excludePatternInput]);
     var customExcludeCount=activeExcludePatterns.length;
 
     useEffect(function(){document.body.className=theme==='light'?'light':'';},[theme]);
-    useEffect(function(){return function(){if(toastTimeoutRef.current)clearTimeout(toastTimeoutRef.current);};},[]);
 
     useEffect(function(){
         var params=new URLSearchParams(window.location.search);
@@ -4094,7 +3998,7 @@
             .text(function(d){return d.data.value+' lines';});
         var tooltip=container.append('div').attr('class','treemap-tooltip').style('display','none').style('position','absolute');
         cells.on('mouseenter',function(e,d){
-            tooltip.html(renderTooltipHtml(d.data.name,[['Lines',d.data.value],['Functions',d.data.fns||0],['Layer',d.data.layer||'—'],['Folder',d.data.folder||'root']]))
+            tooltip.html('<div class="treemap-tooltip-title">'+d.data.name+'</div><div class="treemap-tooltip-stat"><span>Lines:</span><span>'+d.data.value+'</span></div><div class="treemap-tooltip-stat"><span>Functions:</span><span>'+(d.data.fns||0)+'</span></div><div class="treemap-tooltip-stat"><span>Layer:</span><span>'+(d.data.layer||'—')+'</span></div><div class="treemap-tooltip-stat"><span>Folder:</span><span>'+(d.data.folder||'root')+'</span></div>')
                 .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             d3.select(this).select('rect').transition().duration(150).attr('opacity',1).attr('stroke','var(--acc)').attr('stroke-width',2);
         }).on('mousemove',function(e){tooltip.style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');})
@@ -4164,7 +4068,7 @@
             .attr('fill',function(d){return d.value>0?'rgba(0,255,157,'+Math.max(0.15,d.value/maxVal)+')':'var(--bg2)';})
             .attr('stroke','var(--bg0)').attr('stroke-width',0.5).style('cursor','pointer');
         cells.on('mouseenter',function(e,d){
-            tooltip.html(renderTooltipHtml(d.source.name+' → '+d.target.name,[['Connections',d.value]]))
+            tooltip.html('<div class="treemap-tooltip-title">'+d.source.name+' → '+d.target.name+'</div><div class="treemap-tooltip-stat"><span>Connections:</span><span>'+d.value+'</span></div>')
                 .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             g.selectAll('rect.matrix-cell-rect').attr('opacity',function(c){return c.row===d.row||c.col===d.col?1:0.3;});
             colLabels.attr('fill',function(f,i){return i===d.col?'var(--acc)':'var(--t2)';}).attr('font-weight',function(f,i){return i===d.col?'600':'400';});
@@ -4219,7 +4123,7 @@
             .attr('fill','var(--t2)').attr('font-size','10px').attr('font-weight','600').text(function(d){return d.data.name;});
         node.on('mouseenter',function(e,d){
             if(!d.data.path)return;
-            tooltip.html(renderTooltipHtml(d.data.name,[['Lines',d.data.lines||0],['Functions',d.data.fns||0],['Layer',d.data.layer||'—']]))
+            tooltip.html('<div class="treemap-tooltip-title">'+d.data.name+'</div><div class="treemap-tooltip-stat"><span>Lines:</span><span>'+(d.data.lines||0)+'</span></div><div class="treemap-tooltip-stat"><span>Functions:</span><span>'+(d.data.fns||0)+'</span></div><div class="treemap-tooltip-stat"><span>Layer:</span><span>'+(d.data.layer||'—')+'</span></div>')
                 .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             d3.select(this).select('circle').transition().duration(150).attr('r',12).attr('stroke','var(--acc)').attr('stroke-width',3);
         }).on('mousemove',function(e){tooltip.style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');})
@@ -4297,7 +4201,7 @@
             .attr('stroke-width',function(d){return Math.max(2,d.width);}).attr('stroke-opacity',0.4)
             .on('mouseenter',function(e,d){
                 d3.select(this).attr('stroke-opacity',0.8);
-                tooltip.html(renderTooltipHtml(d.source.name+' → '+d.target.name,[['Connections',d.value]]))
+                tooltip.html('<div class="treemap-tooltip-title">'+d.source.name+' → '+d.target.name+'</div><div class="treemap-tooltip-stat"><span>Connections:</span><span>'+d.value+'</span></div>')
                     .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             }).on('mouseleave',function(){d3.select(this).attr('stroke-opacity',0.4);tooltip.style('display','none');});
         var node=g.selectAll('g.sankey-node').data(graph.nodes).join('g').attr('class','sankey-node').style('cursor','pointer');
@@ -4308,7 +4212,7 @@
             .attr('dy','0.35em').attr('text-anchor',function(d){return d.x0<w/2?'start':'end';})
             .attr('fill','var(--t1)').attr('font-size','10px').attr('font-weight','500').text(function(d){return d.name+' ('+d.fileCount+')';});
         node.on('mouseenter',function(e,d){
-            tooltip.html(renderTooltipHtml(d.fullPath,[['Files',d.fileCount]]))
+            tooltip.html('<div class="treemap-tooltip-title">'+d.fullPath+'</div><div class="treemap-tooltip-stat"><span>Files:</span><span>'+d.fileCount+'</span></div>')
                 .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             g.selectAll('path.sankey-link').attr('stroke-opacity',function(l){return l.source.id===d.id||l.target.id===d.id?0.8:0.1;});
         }).on('mouseleave',function(){tooltip.style('display','none');g.selectAll('path.sankey-link').attr('stroke-opacity',0.4);})
@@ -4363,7 +4267,7 @@
         node.append('circle').attr('class','disjoint-circle').attr('r',function(d){return Math.max(6,Math.min(14,4+d.fns));})
             .attr('fill',function(d){return colorMap[d.folder]||COLORS[0];}).attr('stroke','var(--bg0)').attr('stroke-width',1.5);
         node.on('mouseenter',function(e,d){
-            tooltip.html(renderTooltipHtml(d.name,[['Lines',d.lines||0],['Functions',d.fns||0],['Folder',d.folder]]))
+            tooltip.html('<div class="treemap-tooltip-title">'+d.name+'</div><div class="treemap-tooltip-stat"><span>Lines:</span><span>'+(d.lines||0)+'</span></div><div class="treemap-tooltip-stat"><span>Functions:</span><span>'+(d.fns||0)+'</span></div><div class="treemap-tooltip-stat"><span>Folder:</span><span>'+d.folder+'</span></div>')
                 .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             link.attr('stroke-opacity',function(l){return l.source.id===d.id||l.target.id===d.id?0.8:0.05;}).attr('stroke',function(l){return l.source.id===d.id||l.target.id===d.id?'var(--acc)':'var(--border)';});
             d3.select(this).select('circle').transition().duration(150).attr('r',14).attr('stroke','var(--acc)').attr('stroke-width',2);
@@ -4488,7 +4392,7 @@
         }
         node.on('mouseenter',function(e,d){
             var rect=bundleRef.current.getBoundingClientRect();
-            tooltip.html(renderTooltipHtml(d.name,[['Lines',d.lines||0],['Functions',d.fns||0],['Folder',d.folder||'root']]))
+            tooltip.html('<div class="treemap-tooltip-title">'+d.name+'</div><div class="treemap-tooltip-stat"><span>Lines:</span><span>'+(d.lines||0)+'</span></div><div class="treemap-tooltip-stat"><span>Functions:</span><span>'+(d.fns||0)+'</span></div><div class="treemap-tooltip-stat"><span>Folder:</span><span>'+(d.folder||'root')+'</span></div>')
                 .style('display','block').style('left',(e.clientX-rect.left+15)+'px').style('top',(e.clientY-rect.top+15)+'px');
             applyBundleHoverState(d.id);
         }).on('mousemove',function(e){var rect=bundleRef.current.getBoundingClientRect();tooltip.style('left',(e.clientX-rect.left+15)+'px').style('top',(e.clientY-rect.top+15)+'px');})
@@ -4546,8 +4450,8 @@
         var scale=0.8/Math.max((maxX-minX+100)/w,(maxY-minY+100)/h);
         d3.select(svgRef.current).transition().duration(400).call(zoomRef.current.transform,d3.zoomIdentity.translate(w/2-scale*(minX+maxX)/2,h/2-scale*(minY+maxY)/2).scale(Math.min(scale,2)));
     }
-    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='text{font-family:JetBrains Mono,monospace;pointer-events:none}';svgClone.insertBefore(style,svgClone.firstChild);downloadBlob('codeflow-'+Date.now()+'.svg',new Blob([new XMLSerializer().serializeToString(svgClone)],{type:'image/svg+xml'}));}
-    function exportJSON(){if(!data)return;downloadBlob('codeflow-analysis.json',new Blob([JSON.stringify({stats:data.stats,files:data.files.map(function(f){return{path:f.path,fns:f.functions.length,layer:f.layer,lines:f.lines,dependencies:f.dependencies||[]};}),connections:data.connections,issues:data.issues,patterns:data.patterns,security:data.securityIssues},null,2)],{type:'application/json'}));}
+    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='text{font-family:JetBrains Mono,monospace;pointer-events:none}';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 exportJSON(){if(!data)return;var blob=new Blob([JSON.stringify({stats:data.stats,files:data.files.map(function(f){return{path:f.path,fns:f.functions.length,layer:f.layer,lines:f.lines,dependencies:f.dependencies||[]};}),connections:data.connections,issues:data.issues,patterns:data.patterns,security:data.securityIssues},null,2)],{type:'application/json'});var url=URL.createObjectURL(blob);var a=document.createElement('a');a.href=url;a.download='codeflow-analysis.json';a.click();}
     function generateReport(format){
         if(!data)return;
         var repo=repoInfo?(localDirHandle?'Local Folder':repoInfo.owner+'/'+repoInfo.repo):'Unknown Repository';
@@ -4634,7 +4538,8 @@
             })
         };
         if(format==='json'){
-            downloadBlob('codeflow-report.json',new Blob([JSON.stringify(report,null,2)],{type:'application/json'}));
+            var blob=new Blob([JSON.stringify(report,null,2)],{type:'application/json'});
+            var url=URL.createObjectURL(blob);var a=document.createElement('a');a.href=url;a.download='codeflow-report.json';a.click();URL.revokeObjectURL(url);
         }else if(format==='md'){
             var md='# CodeFlow Analysis Report\n\n';
             md+='**Repository:** '+repo+'\n';
@@ -4703,7 +4608,8 @@
                 md+='| `'+f.name+'` | '+f.folder+' | '+f.layer+' | '+f.lines+' | '+f.functions.length+' |\n';
             });
             if(data.files.length>100)md+='\n*...and '+(data.files.length-100)+' more files*\n';
-            downloadBlob('codeflow-report.md',new Blob([md],{type:'text/markdown'}));
+            var blob=new Blob([md],{type:'text/markdown'});
+            var url=URL.createObjectURL(blob);var a=document.createElement('a');a.href=url;a.download='codeflow-report.md';a.click();URL.revokeObjectURL(url);
         }else if(format==='txt'){
             var txt='CODEFLOW ANALYSIS REPORT\n';
             txt+='========================\n\n';
@@ -4766,18 +4672,12 @@
                 txt+=src.split('/').pop()+' -> '+tgt.split('/').pop()+' ('+c.fn+': '+c.count+' calls)\n';
             });
             if(data.connections.length>100)txt+='\n...and '+(data.connections.length-100)+' more dependencies\n';
-            downloadBlob('codeflow-report.txt',new Blob([txt],{type:'text/plain'}));
+            var blob=new Blob([txt],{type:'text/plain'});
+            var url=URL.createObjectURL(blob);var a=document.createElement('a');a.href=url;a.download='codeflow-report.txt';a.click();URL.revokeObjectURL(url);
         }
         showNotification('Report exported as '+format.toUpperCase(),'success');
     }
-    function showNotification(msg,type){
-        if(toastTimeoutRef.current)clearTimeout(toastTimeoutRef.current);
-        setToast({msg:msg,type:type||'success'});
-        toastTimeoutRef.current=setTimeout(function(){
-            setToast(null);
-            toastTimeoutRef.current=null;
-        },3000);
-    }
+    function showNotification(msg,type){setToast({msg:msg,type:type||'success'});setTimeout(function(){setToast(null);},3000);}
     function copyLink(){
         if(localDirHandle){
             showNotification('Share links are not available for local folders','warning');

From 563ec7b08edb23c4d329f7e22897c61b2855ddc5 Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 01:45:43 +0530
Subject: [PATCH 06/23] Create codeql.yml

---
 .github/workflows/codeql.yml | 99 ++++++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 .github/workflows/codeql.yml

diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
new file mode 100644
index 0000000..33c5f9f
--- /dev/null
+++ b/.github/workflows/codeql.yml
@@ -0,0 +1,99 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL Advanced"
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  schedule:
+    - cron: '41 12 * * 0'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+        - language: javascript-typescript
+          build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'rust', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Add any setup steps before running the `github/codeql-action/init` action.
+    # This includes steps like installing compilers or runtimes (`actions/setup-node`
+    # or others). This is typically only required for manual builds.
+    # - name: Setup runtime (example)
+    #   uses: actions/setup-example@v1
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v4
+      with:
+        languages: ${{ matrix.language }}
+        build-mode: ${{ matrix.build-mode }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+    # If the analyze step fails for one of the languages you are analyzing with
+    # "We were unable to automatically build your code", modify the matrix above
+    # to set the build mode to "manual" for that language. Then modify this step
+    # to build your code.
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+    - name: Run manual build steps
+      if: matrix.build-mode == 'manual'
+      shell: bash
+      run: |
+        echo 'If you are using a "manual" build mode for one or more of the' \
+          'languages you are analyzing, replace this with the commands to build' \
+          'your code, for example:'
+        echo '  make bootstrap'
+        echo '  make release'
+        exit 1
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v4
+      with:
+        category: "/language:${{matrix.language}}"

From 86ee21cc2545167613b0d202409860c86b9efd8f Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 01:54:14 +0530
Subject: [PATCH 07/23] Update index.html

---
 index.html | 558 +++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 412 insertions(+), 146 deletions(-)

diff --git a/index.html b/index.html
index a2a12fa..d02cf2a 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="CodeFlow — Visualize Your Codebase Architecture">
     <meta name="twitter:description" content="Turn any GitHub repo into an interactive architecture map in seconds. Zero setup, privacy-first.">
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ff9d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2 4 14h6l-1 8 9-12h-6l1-8z'/></svg>">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js"></script>
@@ -33,8 +33,16 @@
 .app{display:flex;height:100vh;flex-direction:column}
 .topbar{height:48px;background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:16px;flex-shrink:0}
 .logo{display:flex;align-items:center;gap:10px;cursor:pointer}
-.logo-mark{width:28px;height:28px;background:linear-gradient(135deg,var(--acc),var(--cyan));border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px}
+.logo-mark{width:28px;height:28px;background:linear-gradient(135deg,var(--acc),var(--cyan));border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--bg0)}
 .logo-text{font-size:14px;font-weight:700;color:var(--acc)}
+.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;color:currentColor}
+.icon svg{display:block;width:100%;height:100%}
+.icon-s{width:12px;height:12px}
+.icon-m{width:14px;height:14px}
+.icon-l{width:16px;height:16px}
+.icon-xl{width:20px;height:20px}
+.icon-xxl{width:48px;height:48px}
+.status-dot{display:inline-block;width:8px;height:8px;border-radius:999px;flex-shrink:0}
 .repo-input-group{display:flex;gap:8px;flex:1;max-width:500px}
 .repo-input{flex:1;padding:6px 12px;background:var(--bg0);border:1px solid var(--border);border-radius:6px;color:var(--t0);font-family:inherit;font-size:11px}
 .repo-input:focus{outline:none;border-color:var(--acc)}
@@ -57,7 +65,7 @@
 .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)}
 .view-mode.active{background:var(--accbg);color:var(--acc)}
-.view-mode-icon{font-size:14px}
+.view-mode-icon{color:currentColor}
 .view-mode-badge{margin-left:auto;font-size:9px;background:var(--red);color:white;padding:2px 6px;border-radius:8px}
 .stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
 .stat-card{background:var(--bg0);border:1px solid var(--border2);border-radius:6px;padding:10px;text-align:center}
@@ -139,7 +147,7 @@
 .pattern-item{padding:12px;background:var(--bg0);border-radius:8px;margin-bottom:8px;border-left:3px solid var(--green)}
 .pattern-item.anti{border-color:var(--red)}
 .pattern-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
-.pattern-icon{font-size:20px}
+.pattern-icon{color:currentColor}
 .pattern-name{font-size:12px;color:var(--t0);font-weight:600}
 .pattern-desc{font-size:10px;color:var(--t2);margin-bottom:8px;line-height:1.4}
 .pattern-files{font-size:9px;color:var(--t3)}
@@ -180,7 +188,7 @@
 .form-input{width:100%;padding:8px 10px;background:var(--bg0);border:1px solid var(--border);border-radius:6px;color:var(--t0);font-family:inherit;font-size:11px}
 .form-input:focus{outline:none;border-color:var(--acc)}
 .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:40px}
-.empty-icon{font-size:48px;margin-bottom:16px;opacity:0.3}
+.empty-icon{margin-bottom:16px;opacity:0.3;color:var(--t2)}
 .empty-title{font-size:16px;font-weight:600;color:var(--t1);margin-bottom:8px}
 .empty-desc{font-size:12px;color:var(--t3);max-width:300px}
 .loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
@@ -194,7 +202,7 @@
 .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-icon{font-size:24px;margin-bottom:8px}
+.export-option-icon{margin-bottom:8px;color:var(--acc)}
 .export-option-label{font-size:11px;color:var(--t1)}
 .pr-header{padding:12px;background:var(--bg0);border-radius:8px;margin-bottom:12px}
 .pr-title{font-size:12px;color:var(--t0);font-weight:500}
@@ -220,7 +228,7 @@
 .loading-owner::before{content:'';width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--acc);border-radius:50%;animation:spin 0.6s linear infinite}
 .privacy-modal{max-width:450px}
 .privacy-item{display:flex;align-items:flex-start;gap:10px;padding:10px;background:var(--bg0);border-radius:8px;margin-bottom:8px}
-.privacy-icon{font-size:20px;flex-shrink:0}
+.privacy-icon{flex-shrink:0;color:var(--acc)}
 .privacy-text{font-size:11px;color:var(--t1);line-height:1.5}
 .privacy-title{font-weight:600;color:var(--t0);margin-bottom:4px}
 .fn-callers{margin-top:8px;padding:8px;background:var(--bg0);border-radius:6px;border:1px solid var(--border)}
@@ -357,7 +365,7 @@
 .conn-item:last-child{border-bottom:none}
 .conn-header{display:flex;align-items:center;gap:6px;padding:8px 12px;cursor:pointer;transition:background 0.15s}
 .conn-header:hover{background:var(--bg2)}
-.conn-file-icon{font-size:12px}
+.conn-file-icon{color:var(--t3)}
 .conn-file-name{font-size:10px;font-weight:500;color:var(--t1)}
 .conn-fns{padding:6px 12px 10px 28px;background:var(--bg2);border-top:1px solid var(--border2)}
 .conn-fn{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;margin:2px 0;background:var(--bg1);border-radius:4px;font-size:9px}
@@ -369,7 +377,7 @@
 .file-preview-modal{background:var(--bg0);border:1px solid var(--border);border-radius:12px;width:90vw;max-width:1000px;height:85vh;display:flex;flex-direction:column;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5)}
 .file-preview-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg1);border-bottom:1px solid var(--border);border-radius:12px 12px 0 0}
 .file-preview-title{display:flex;align-items:center;gap:10px}
-.file-preview-icon{font-size:18px}
+.file-preview-icon{color:var(--acc)}
 .file-preview-name{font-size:13px;font-weight:600;color:var(--t0)}
 .file-preview-path{font-size:10px;color:var(--t3);margin-left:8px;font-family:'JetBrains Mono',monospace}
 .file-preview-actions{display:flex;align-items:center;gap:8px}
@@ -811,47 +819,47 @@
     detectPatterns:function(files){
         var patterns=[];
         var singletons=files.filter(function(f){return f.content&&(f.content.includes('getInstance')||f.content.match(/let\s+instance\s*=/)||f.content.match(/private\s+static\s+instance/));});
-        if(singletons.length)patterns.push({name:'Singleton',icon:'🔒',desc:'Ensures a class has only one instance. Common for configuration, logging, or connection pools.',severity:'info',files:singletons.map(function(f){return{name:f.name,path:f.path};}),metrics:{instances:singletons.length}});
+        if(singletons.length)patterns.push({name:'Singleton',icon:'lock',desc:'Ensures a class has only one instance. Common for configuration, logging, or connection pools.',severity:'info',files:singletons.map(function(f){return{name:f.name,path:f.path};}),metrics:{instances:singletons.length}});
         var factories=files.filter(function(f){return f.content&&(f.name.toLowerCase().includes('factory')||f.content.match(/create[A-Z]\w*\s*\(/)||f.content.includes('return new'));});
-        if(factories.length)patterns.push({name:'Factory',icon:'🏭',desc:'Creates objects without specifying exact class. Enables loose coupling and extensibility.',severity:'info',files:factories.map(function(f){return{name:f.name,path:f.path};}),metrics:{factories:factories.length}});
+        if(factories.length)patterns.push({name:'Factory',icon:'factory',desc:'Creates objects without specifying exact class. Enables loose coupling and extensibility.',severity:'info',files:factories.map(function(f){return{name:f.name,path:f.path};}),metrics:{factories:factories.length}});
         var observers=files.filter(function(f){return f.content&&(f.content.includes('subscribe')||f.content.includes('addEventListener')||f.content.includes('.on(')||f.content.includes('emit('));});
-        if(observers.length)patterns.push({name:'Observer/Event',icon:'👁️',desc:'Defines a subscription mechanism for event-driven architecture. Great for decoupling.',severity:'info',files:observers.map(function(f){return{name:f.name,path:f.path};}),metrics:{emitters:observers.length}});
+        if(observers.length)patterns.push({name:'Observer/Event',icon:'eye',desc:'Defines a subscription mechanism for event-driven architecture. Great for decoupling.',severity:'info',files:observers.map(function(f){return{name:f.name,path:f.path};}),metrics:{emitters:observers.length}});
         var hooks=files.filter(function(f){return f.content&&f.content.match(/export\s+(?:const|function)\s+use[A-Z]/);});
-        if(hooks.length)patterns.push({name:'Custom Hooks',icon:'🪝',desc:'React hooks for reusable stateful logic. Promotes code reuse and separation of concerns.',severity:'info',files:hooks.map(function(f){return{name:f.name,path:f.path};}),metrics:{hooks:hooks.length}});
+        if(hooks.length)patterns.push({name:'Custom Hooks',icon:'hook',desc:'React hooks for reusable stateful logic. Promotes code reuse and separation of concerns.',severity:'info',files:hooks.map(function(f){return{name:f.name,path:f.path};}),metrics:{hooks:hooks.length}});
         var hocs=files.filter(function(f){return f.content&&(f.content.match(/with[A-Z]\w*\s*=\s*\(/)||f.content.match(/export\s+default\s+connect/));});
-        if(hocs.length)patterns.push({name:'Higher-Order Component',icon:'🎁',desc:'Functions that take a component and return an enhanced component.',severity:'info',files:hocs.map(function(f){return{name:f.name,path:f.path};}),metrics:{hocs:hocs.length}});
+        if(hocs.length)patterns.push({name:'Higher-Order Component',icon:'spark',desc:'Functions that take a component and return an enhanced component.',severity:'info',files:hocs.map(function(f){return{name:f.name,path:f.path};}),metrics:{hocs:hocs.length}});
         var providers=files.filter(function(f){return f.content&&(f.content.includes('createContext')||f.content.includes('Provider')||f.content.includes('useContext'));});
-        if(providers.length)patterns.push({name:'Context Provider',icon:'🌐',desc:'React Context for global state. Alternative to prop drilling.',severity:'info',files:providers.map(function(f){return{name:f.name,path:f.path};}),metrics:{contexts:providers.length}});
+        if(providers.length)patterns.push({name:'Context Provider',icon:'globe',desc:'React Context for global state. Alternative to prop drilling.',severity:'info',files:providers.map(function(f){return{name:f.name,path:f.path};}),metrics:{contexts:providers.length}});
         // VBA-specific patterns
         var vbaUserForms=files.filter(function(f){return f.content&&(f.content.match(/Attribute\s+VB_Name\s*=\s*["']UserForm/i)||f.name.match(/UserForm/i));});
-        if(vbaUserForms.length)patterns.push({name:'UserForms',icon:'🖼️',desc:'VBA UserForms for UI components. Common in Excel/Access automation.',severity:'info',files:vbaUserForms.map(function(f){return{name:f.name,path:f.path};}),metrics:{forms:vbaUserForms.length}});
+        if(vbaUserForms.length)patterns.push({name:'UserForms',icon:'layout',desc:'VBA UserForms for UI components. Common in Excel/Access automation.',severity:'info',files:vbaUserForms.map(function(f){return{name:f.name,path:f.path};}),metrics:{forms:vbaUserForms.length}});
         var vbaModules=files.filter(function(f){return f.content&&(f.content.match(/Attribute\s+VB_Name\s*=\s*["']Module/i)||f.name.match(/Module/i));});
-        if(vbaModules.length)patterns.push({name:'Modules',icon:'📦',desc:'VBA Modules for reusable code and business logic.',severity:'info',files:vbaModules.map(function(f){return{name:f.name,path:f.path};}),metrics:{modules:vbaModules.length}});
+        if(vbaModules.length)patterns.push({name:'Modules',icon:'box',desc:'VBA Modules for reusable code and business logic.',severity:'info',files:vbaModules.map(function(f){return{name:f.name,path:f.path};}),metrics:{modules:vbaModules.length}});
         var vbaClasses=files.filter(function(f){return f.content&&(f.content.match(/Attribute\s+VB_Name\s*=\s*["']Class/i)||f.name.match(/Class/i));});
-        if(vbaClasses.length)patterns.push({name:'Class Modules',icon:'🏛️',desc:'VBA Class Modules for object-oriented programming patterns.',severity:'info',files:vbaClasses.map(function(f){return{name:f.name,path:f.path};}),metrics:{classes:vbaClasses.length}});
+        if(vbaClasses.length)patterns.push({name:'Class Modules',icon:'building',desc:'VBA Class Modules for object-oriented programming patterns.',severity:'info',files:vbaClasses.map(function(f){return{name:f.name,path:f.path};}),metrics:{classes:vbaClasses.length}});
         // Python-specific patterns
         var decoratorFiles=files.filter(function(f){return f.content&&f.name.endsWith('.py')&&f.content.match(/@\w+\s*(?:\(.*\))?\s*\n\s*(?:def|class)/);});
         var pyDecorators=decoratorFiles.filter(function(f){return f.content.match(/@(?:app\.route|router\.|blueprint\.|get|post|put|delete|patch)\s*\(/);});
-        if(pyDecorators.length)patterns.push({name:'Route Decorators',icon:'🛤️',desc:'Flask/FastAPI/Django route decorators for URL routing. Common in Python web frameworks.',severity:'info',files:pyDecorators.map(function(f){return{name:f.name,path:f.path};}),metrics:{routes:pyDecorators.length}});
+        if(pyDecorators.length)patterns.push({name:'Route Decorators',icon:'route',desc:'Flask/FastAPI/Django route decorators for URL routing. Common in Python web frameworks.',severity:'info',files:pyDecorators.map(function(f){return{name:f.name,path:f.path};}),metrics:{routes:pyDecorators.length}});
         var dataclasses=files.filter(function(f){return f.content&&f.name.endsWith('.py')&&f.content.match(/@dataclass/);});
-        if(dataclasses.length)patterns.push({name:'Dataclasses',icon:'📋',desc:'Python dataclasses for structured data. Reduces boilerplate for data-holding classes.',severity:'info',files:dataclasses.map(function(f){return{name:f.name,path:f.path};}),metrics:{dataclasses:dataclasses.length}});
+        if(dataclasses.length)patterns.push({name:'Dataclasses',icon:'database',desc:'Python dataclasses for structured data. Reduces boilerplate for data-holding classes.',severity:'info',files:dataclasses.map(function(f){return{name:f.name,path:f.path};}),metrics:{dataclasses:dataclasses.length}});
         var abcFiles=files.filter(function(f){return f.content&&f.name.endsWith('.py')&&(f.content.match(/\bABC\b/)||f.content.match(/@abstractmethod/)||f.content.match(/ABCMeta/));});
-        if(abcFiles.length)patterns.push({name:'Abstract Base Classes',icon:'🏗️',desc:'Python ABCs enforce interface contracts. Ensures subclasses implement required methods.',severity:'info',files:abcFiles.map(function(f){return{name:f.name,path:f.path};}),metrics:{abcs:abcFiles.length}});
+        if(abcFiles.length)patterns.push({name:'Abstract Base Classes',icon:'layers',desc:'Python ABCs enforce interface contracts. Ensures subclasses implement required methods.',severity:'info',files:abcFiles.map(function(f){return{name:f.name,path:f.path};}),metrics:{abcs:abcFiles.length}});
         var ctxManagers=files.filter(function(f){return f.content&&f.name.endsWith('.py')&&(f.content.match(/@contextmanager/)||f.content.match(/def\s+__enter__/));});
-        if(ctxManagers.length)patterns.push({name:'Context Managers',icon:'🔄',desc:'Python context managers for resource management (with statement). Ensures proper cleanup.',severity:'info',files:ctxManagers.map(function(f){return{name:f.name,path:f.path};}),metrics:{managers:ctxManagers.length}});
+        if(ctxManagers.length)patterns.push({name:'Context Managers',icon:'refresh',desc:'Python context managers for resource management (with statement). Ensures proper cleanup.',severity:'info',files:ctxManagers.map(function(f){return{name:f.name,path:f.path};}),metrics:{managers:ctxManagers.length}});
         var pyMixins=files.filter(function(f){return f.content&&f.name.endsWith('.py')&&f.content.match(/class\s+\w*Mixin\w*\s*[\(:]?/);});
-        if(pyMixins.length)patterns.push({name:'Mixins',icon:'🧩',desc:'Python mixins for reusable behavior through multiple inheritance.',severity:'info',files:pyMixins.map(function(f){return{name:f.name,path:f.path};}),metrics:{mixins:pyMixins.length}});
+        if(pyMixins.length)patterns.push({name:'Mixins',icon:'puzzle',desc:'Python mixins for reusable behavior through multiple inheritance.',severity:'info',files:pyMixins.map(function(f){return{name:f.name,path:f.path};}),metrics:{mixins:pyMixins.length}});
         var pySignals=files.filter(function(f){return f.content&&f.name.endsWith('.py')&&(f.content.match(/Signal\s*\(/)||f.content.match(/@receiver\s*\(/)||f.content.match(/\.connect\s*\(/));});
-        if(pySignals.length)patterns.push({name:'Django Signals',icon:'📡',desc:'Django signals for decoupled event-driven communication between components.',severity:'info',files:pySignals.map(function(f){return{name:f.name,path:f.path};}),metrics:{signals:pySignals.length}});
+        if(pySignals.length)patterns.push({name:'Django Signals',icon:'radio',desc:'Django signals for decoupled event-driven communication between components.',severity:'info',files:pySignals.map(function(f){return{name:f.name,path:f.path};}),metrics:{signals:pySignals.length}});
         var pyMiddleware=files.filter(function(f){return f.content&&f.name.endsWith('.py')&&(f.content.match(/class\s+\w*Middleware/)||f.content.match(/def\s+middleware\s*\(/)||f.name.toLowerCase().includes('middleware'));});
-        if(pyMiddleware.length)patterns.push({name:'Middleware',icon:'🔗',desc:'Request/response middleware for cross-cutting concerns (auth, logging, CORS).',severity:'info',files:pyMiddleware.map(function(f){return{name:f.name,path:f.path};}),metrics:{middleware:pyMiddleware.length}});
+        if(pyMiddleware.length)patterns.push({name:'Middleware',icon:'link',desc:'Request/response middleware for cross-cutting concerns (auth, logging, CORS).',severity:'info',files:pyMiddleware.map(function(f){return{name:f.name,path:f.path};}),metrics:{middleware:pyMiddleware.length}});
         var godFiles=files.filter(function(f){return f.isCode!==false&&f.functions&&f.functions.length>15;});
-        if(godFiles.length)patterns.push({name:'God Object',icon:'⚠️',desc:'Files with too many responsibilities (15+ functions). Consider splitting into smaller modules.',severity:'warning',isAnti:true,files:godFiles.map(function(f){return{name:f.name,path:f.path,fns:f.functions.length};}),metrics:{files:godFiles.length,avgFns:Math.round(godFiles.reduce(function(s,f){return s+f.functions.length;},0)/godFiles.length)}});
+        if(godFiles.length)patterns.push({name:'God Object',icon:'warning',desc:'Files with too many responsibilities (15+ functions). Consider splitting into smaller modules.',severity:'warning',isAnti:true,files:godFiles.map(function(f){return{name:f.name,path:f.path,fns:f.functions.length};}),metrics:{files:godFiles.length,avgFns:Math.round(godFiles.reduce(function(s,f){return s+f.functions.length;},0)/godFiles.length)}});
         var longFiles=files.filter(function(f){return f.isCode!==false&&f.lines&&f.lines>500;});
-        if(longFiles.length)patterns.push({name:'Long File',icon:'📜',desc:'Files over 500 lines are harder to maintain. Consider breaking into smaller modules.',severity:'warning',isAnti:true,files:longFiles.map(function(f){return{name:f.name,path:f.path,lines:f.lines};}),metrics:{files:longFiles.length,avgLines:Math.round(longFiles.reduce(function(s,f){return s+f.lines;},0)/longFiles.length)}});
+        if(longFiles.length)patterns.push({name:'Long File',icon:'scroll',desc:'Files over 500 lines are harder to maintain. Consider breaking into smaller modules.',severity:'warning',isAnti:true,files:longFiles.map(function(f){return{name:f.name,path:f.path,lines:f.lines};}),metrics:{files:longFiles.length,avgLines:Math.round(longFiles.reduce(function(s,f){return s+f.lines;},0)/longFiles.length)}});
         // VBA-specific anti-patterns
         var vbaGodFiles=files.filter(function(f){return f.isCode!==false&&f.functions&&f.functions.length>20;});
-        if(vbaGodFiles.length)patterns.push({name:'VBA God Module',icon:'⚠️',desc:'VBA modules with 20+ procedures. Consider splitting into smaller modules.',severity:'warning',isAnti:true,files:vbaGodFiles.map(function(f){return{name:f.name,path:f.path,fns:f.functions.length,lines:f.lines};}),metrics:{files:vbaGodFiles.length,avgFns:Math.round(vbaGodFiles.reduce(function(s,f){return s+f.functions.length;},0)/vbaGodFiles.length)}});
+        if(vbaGodFiles.length)patterns.push({name:'VBA God Module',icon:'warning',desc:'VBA modules with 20+ procedures. Consider splitting into smaller modules.',severity:'warning',isAnti:true,files:vbaGodFiles.map(function(f){return{name:f.name,path:f.path,fns:f.functions.length,lines:f.lines};}),metrics:{files:vbaGodFiles.length,avgFns:Math.round(vbaGodFiles.reduce(function(s,f){return s+f.functions.length;},0)/vbaGodFiles.length)}});
         return patterns;
     },
     detectDuplicates:function(files,allFns){
@@ -1109,48 +1117,48 @@
         var suggestions=[];
         // Based on dead functions
         if(data.stats.dead>10){
-            suggestions.push({priority:'high',icon:'🧹',title:'Remove Dead Code',desc:data.stats.dead+' unused functions detected. Removing them will improve maintainability and reduce bundle size.',action:'Review unused functions in the Issues panel',impact:'Reduces codebase by ~'+(data.stats.dead*15)+' lines'});
+            suggestions.push({priority:'high',icon:'broom',title:'Remove Dead Code',desc:data.stats.dead+' unused functions detected. Removing them will improve maintainability and reduce bundle size.',action:'Review unused functions in the Issues panel',impact:'Reduces codebase by ~'+(data.stats.dead*15)+' lines'});
         }
         // Based on circular dependencies
         var circular=data.issues.filter(function(i){return i.title&&i.title.includes('Circular');});
         if(circular.length){
-            suggestions.push({priority:'critical',icon:'🔄',title:'Break Circular Dependencies',desc:circular.length+' circular dependencies found. These cause tight coupling and make testing difficult.',action:'Extract shared code to a new module or use dependency injection',impact:'Improves testability and modularity'});
+            suggestions.push({priority:'critical',icon:'refresh',title:'Break Circular Dependencies',desc:circular.length+' circular dependencies found. These cause tight coupling and make testing difficult.',action:'Extract shared code to a new module or use dependency injection',impact:'Improves testability and modularity'});
         }
         // Based on god files
         var godFiles=data.issues.filter(function(i){return i.title&&i.title.includes('Large');});
         if(godFiles.length){
-            suggestions.push({priority:'high',icon:'✂️',title:'Split Large Files',desc:godFiles.length+' files have too many functions. Split by responsibility.',action:'Group related functions and extract to separate modules',impact:'Improves code navigation and testing'});
+            suggestions.push({priority:'high',icon:'split',title:'Split Large Files',desc:godFiles.length+' files have too many functions. Split by responsibility.',action:'Group related functions and extract to separate modules',impact:'Improves code navigation and testing'});
         }
         // Based on high coupling
         var coupling=data.issues.filter(function(i){return i.title&&i.title.includes('Coupled');});
         if(coupling.length){
-            suggestions.push({priority:'medium',icon:'🔗',title:'Reduce Coupling',desc:coupling.length+' files are imported by many others. Consider if this is intentional.',action:'Review if these should be split or if importers should be consolidated',impact:'Reduces blast radius of changes'});
+            suggestions.push({priority:'medium',icon:'link',title:'Reduce Coupling',desc:coupling.length+' files are imported by many others. Consider if this is intentional.',action:'Review if these should be split or if importers should be consolidated',impact:'Reduces blast radius of changes'});
         }
         // Based on duplicates
         if(data.duplicates&&data.duplicates.length>0){
             var nameDups=data.duplicates.filter(function(d){return d.type==='name';});
             var codeDups=data.duplicates.filter(function(d){return d.type==='code';});
             if(nameDups.length){
-                suggestions.push({priority:'medium',icon:'📛',title:'Resolve Naming Conflicts',desc:nameDups.length+' function names are duplicated across files. This can cause confusion.',action:'Rename functions to be more specific or consolidate into shared module',impact:'Prevents bugs from importing wrong function'});
+                suggestions.push({priority:'medium',icon:'copy',title:'Resolve Naming Conflicts',desc:nameDups.length+' function names are duplicated across files. This can cause confusion.',action:'Rename functions to be more specific or consolidate into shared module',impact:'Prevents bugs from importing wrong function'});
             }
             if(codeDups.length){
-                suggestions.push({priority:'high',icon:'📋',title:'Extract Duplicated Code',desc:codeDups.length+' instances of similar code found. DRY principle violation.',action:'Create shared utility functions',impact:'Reduces maintenance burden and potential bugs'});
+                suggestions.push({priority:'high',icon:'box',title:'Extract Duplicated Code',desc:codeDups.length+' instances of similar code found. DRY principle violation.',action:'Create shared utility functions',impact:'Reduces maintenance burden and potential bugs'});
             }
         }
         // Based on layer violations
         if(data.layerViolations&&data.layerViolations.length>0){
-            suggestions.push({priority:'high',icon:'🏗️',title:'Fix Architecture Violations',desc:data.layerViolations.length+' layer violations found. Lower layers should not depend on higher layers.',action:'Invert dependencies or use interfaces/events',impact:'Improves architecture and testability'});
+            suggestions.push({priority:'high',icon:'layers',title:'Fix Architecture Violations',desc:data.layerViolations.length+' layer violations found. Lower layers should not depend on higher layers.',action:'Invert dependencies or use interfaces/events',impact:'Improves architecture and testability'});
         }
         // Based on security
         var highSec=data.securityIssues?data.securityIssues.filter(function(s){return s.severity==='high';}):[];
         if(highSec.length){
-            suggestions.push({priority:'critical',icon:'🔐',title:'Fix Security Issues',desc:highSec.length+' high-severity security issues found.',action:'Address hardcoded secrets, injection risks immediately',impact:'Prevents potential security breaches'});
+            suggestions.push({priority:'critical',icon:'shield',title:'Fix Security Issues',desc:highSec.length+' high-severity security issues found.',action:'Address hardcoded secrets, injection risks immediately',impact:'Prevents potential security breaches'});
         }
         // Test coverage hint
         var testFiles=data.files.filter(function(f){return f.name.includes('.test.')||f.name.includes('.spec.')||f.path.includes('__tests__');});
         var testRatio=data.files.length>0?(testFiles.length/data.files.length*100):0;
         if(testRatio<10&&data.files.length>10){
-            suggestions.push({priority:'medium',icon:'🧪',title:'Add Test Coverage',desc:'Only '+testFiles.length+' test files found ('+Math.round(testRatio)+'%). Consider adding more tests.',action:'Focus on testing critical paths and high-complexity files',impact:'Prevents regressions and improves confidence'});
+            suggestions.push({priority:'medium',icon:'beaker',title:'Add Test Coverage',desc:'Only '+testFiles.length+' test files found ('+Math.round(testRatio)+'%). Consider adding more tests.',action:'Focus on testing critical paths and high-complexity files',impact:'Prevents regressions and improves confidence'});
         }
         return suggestions.sort(function(a,b){var p={critical:0,high:1,medium:2,low:3};return p[a.priority]-p[b.priority];});
     },
@@ -2866,6 +2874,210 @@
     return chains;
 }
 
+function Icon(props){
+    var name=props.name||'file';
+    var size=props.size||'m';
+    var className='icon icon-'+size+(props.className?' '+props.className:'');
+    var common={fill:'none',stroke:'currentColor',strokeWidth:1.8,strokeLinecap:'round',strokeLinejoin:'round'};
+    var children;
+    switch(name){
+        case 'logo':
+        case 'bolt':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M13 2 4 14h6l-1 8 9-12h-6l1-8z'},common))];
+            break;
+        case 'search':
+            children=[React.createElement('circle',Object.assign({key:'c1',cx:'11',cy:'11',r:'7'},common)),React.createElement('line',Object.assign({key:'l1',x1:'20',y1:'20',x2:'16.65',y2:'16.65'},common))];
+            break;
+        case 'folder':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M3 7.5A1.5 1.5 0 0 1 4.5 6H9l2 2h8.5A1.5 1.5 0 0 1 21 9.5v8A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z'},common))];
+            break;
+        case 'folder-open':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M3 9.5A1.5 1.5 0 0 1 4.5 8H9l2 2h8.5A1.5 1.5 0 0 1 21 11.5V12'},common)),React.createElement('path',Object.assign({key:'p2',d:'M4 12.5h17l-1.5 5A2 2 0 0 1 17.58 19H5.92A2 2 0 0 1 4 17.5z'},common))];
+            break;
+        case 'file':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'},common)),React.createElement('polyline',Object.assign({key:'p2',points:'14 3 14 8 19 8'},common))];
+            break;
+        case 'layers':
+            children=[React.createElement('polygon',Object.assign({key:'p1',points:'12 3 3 8 12 13 21 8 12 3'},common)),React.createElement('polyline',Object.assign({key:'p2',points:'3 12 12 17 21 12'},common)),React.createElement('polyline',Object.assign({key:'p3',points:'3 16 12 21 21 16'},common))];
+            break;
+        case 'activity':
+            children=[React.createElement('polyline',Object.assign({key:'p1',points:'3 12 8 12 11 6 14 18 17 12 21 12'},common))];
+            break;
+        case 'shield':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M12 3l7 3v6c0 5-3.5 8-7 9-3.5-1-7-4-7-9V6z'},common))];
+            break;
+        case 'lock':
+            children=[React.createElement('rect',Object.assign({key:'r1',x:'5',y:'11',width:'14',height:'10',rx:'2'},common)),React.createElement('path',Object.assign({key:'p1',d:'M8 11V8a4 4 0 0 1 8 0v3'},common))];
+            break;
+        case 'factory':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M3 21h18'},common)),React.createElement('path',Object.assign({key:'p2',d:'M5 21V9l5 3V9l5 3V6l4 2v13'},common)),React.createElement('path',Object.assign({key:'p3',d:'M15 6V3h3v5'},common))];
+            break;
+        case 'eye':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12z'},common)),React.createElement('circle',Object.assign({key:'c1',cx:'12',cy:'12',r:'3'},common))];
+            break;
+        case 'hook':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M9 10V7a3 3 0 0 1 6 0v7a4 4 0 1 1-8 0v-1'},common))];
+            break;
+        case 'spark':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M12 3l1.8 4.2L18 9l-4.2 1.8L12 15l-1.8-4.2L6 9l4.2-1.8z'},common)),React.createElement('path',Object.assign({key:'p2',d:'M19 15l.8 1.7L21.5 18l-1.7.8L19 20.5l-.8-1.7L16.5 18l1.7-.8z'},common))];
+            break;
+        case 'globe':
+            children=[React.createElement('circle',Object.assign({key:'c1',cx:'12',cy:'12',r:'9'},common)),React.createElement('path',Object.assign({key:'p1',d:'M3 12h18'},common)),React.createElement('path',Object.assign({key:'p2',d:'M12 3a15 15 0 0 1 0 18'},common)),React.createElement('path',Object.assign({key:'p3',d:'M12 3a15 15 0 0 0 0 18'},common))];
+            break;
+        case 'layout':
+            children=[React.createElement('rect',Object.assign({key:'r1',x:'3',y:'4',width:'18',height:'16',rx:'2'},common)),React.createElement('path',Object.assign({key:'p1',d:'M9 4v16'},common)),React.createElement('path',Object.assign({key:'p2',d:'M9 10h12'},common))];
+            break;
+        case 'box':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M21 8.5 12 3 3 8.5 12 14z'},common)),React.createElement('path',Object.assign({key:'p2',d:'M3 8.5V16l9 5 9-5V8.5'},common)),React.createElement('path',Object.assign({key:'p3',d:'M12 14v7'},common))];
+            break;
+        case 'building':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M4 21h16'},common)),React.createElement('path',Object.assign({key:'p2',d:'M7 21V8l5-5 5 5v13'},common)),React.createElement('path',Object.assign({key:'p3',d:'M9 12h.01M12 12h.01M15 12h.01M9 16h.01M12 16h.01M15 16h.01'},common))];
+            break;
+        case 'route':
+            children=[React.createElement('circle',Object.assign({key:'c1',cx:'6',cy:'18',r:'2'},common)),React.createElement('circle',Object.assign({key:'c2',cx:'18',cy:'6',r:'2'},common)),React.createElement('path',Object.assign({key:'p1',d:'M8 18h4a4 4 0 0 0 4-4V8'},common))];
+            break;
+        case 'database':
+            children=[React.createElement('ellipse',Object.assign({key:'e1',cx:'12',cy:'5',rx:'7',ry:'3'},common)),React.createElement('path',Object.assign({key:'p1',d:'M5 5v10c0 1.7 3.1 3 7 3s7-1.3 7-3V5'},common)),React.createElement('path',Object.assign({key:'p2',d:'M5 10c0 1.7 3.1 3 7 3s7-1.3 7-3'},common)),React.createElement('path',Object.assign({key:'p3',d:'M5 15c0 1.7 3.1 3 7 3s7-1.3 7-3'},common))];
+            break;
+        case 'refresh':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M20 11a8 8 0 0 0-14.9-3'},common)),React.createElement('polyline',Object.assign({key:'p2',points:'4 4 5 8 9 7'},common)),React.createElement('path',Object.assign({key:'p3',d:'M4 13a8 8 0 0 0 14.9 3'},common)),React.createElement('polyline',Object.assign({key:'p4',points:'20 20 19 16 15 17'},common))];
+            break;
+        case 'puzzle':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M10 4H6a2 2 0 0 0-2 2v4h2a2 2 0 1 1 0 4H4v4a2 2 0 0 0 2 2h4v-2a2 2 0 1 1 4 0v2h4a2 2 0 0 0 2-2v-4h-2a2 2 0 1 1 0-4h2V6a2 2 0 0 0-2-2h-4v2a2 2 0 1 1-4 0z'},common))];
+            break;
+        case 'radio':
+            children=[React.createElement('circle',Object.assign({key:'c1',cx:'12',cy:'12',r:'2'},common)),React.createElement('path',Object.assign({key:'p1',d:'M16.24 7.76a6 6 0 0 1 0 8.48'},common)),React.createElement('path',Object.assign({key:'p2',d:'M7.76 16.24a6 6 0 0 1 0-8.48'},common)),React.createElement('path',Object.assign({key:'p3',d:'M19.07 4.93a10 10 0 0 1 0 14.14'},common)),React.createElement('path',Object.assign({key:'p4',d:'M4.93 19.07a10 10 0 0 1 0-14.14'},common))];
+            break;
+        case 'link':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M10 13a5 5 0 0 1 0-7l1.5-1.5a5 5 0 0 1 7 7L17 13'},common)),React.createElement('path',Object.assign({key:'p2',d:'M14 11a5 5 0 0 1 0 7L12.5 19.5a5 5 0 0 1-7-7L7 11'},common))];
+            break;
+        case 'warning':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M12 4 3 20h18L12 4z'},common)),React.createElement('path',Object.assign({key:'p2',d:'M12 9v5'},common)),React.createElement('path',Object.assign({key:'p3',d:'M12 17h.01'},common))];
+            break;
+        case 'scroll':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M7 3h10a2 2 0 0 1 2 2v12a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4V5a2 2 0 0 1 2-2z'},common)),React.createElement('path',Object.assign({key:'p2',d:'M9 8h6M9 12h6M9 16h4'},common))];
+            break;
+        case 'broom':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M14 4 6 12'},common)),React.createElement('path',Object.assign({key:'p2',d:'m11 7 6 6'},common)),React.createElement('path',Object.assign({key:'p3',d:'M3 14h7l3 7H6z'},common))];
+            break;
+        case 'split':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M8 4H5a2 2 0 0 0-2 2v3'},common)),React.createElement('path',Object.assign({key:'p2',d:'M16 20h3a2 2 0 0 0 2-2v-3'},common)),React.createElement('path',Object.assign({key:'p3',d:'M12 4v16'},common)),React.createElement('path',Object.assign({key:'p4',d:'M9 8 12 5 15 8'},common)),React.createElement('path',Object.assign({key:'p5',d:'M15 16 12 19 9 16'},common))];
+            break;
+        case 'copy':
+            children=[React.createElement('rect',Object.assign({key:'r1',x:'9',y:'9',width:'11',height:'11',rx:'2'},common)),React.createElement('path',Object.assign({key:'p1',d:'M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'},common))];
+            break;
+        case 'beaker':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M10 3v5l-5 8a3 3 0 0 0 2.57 4.5h8.86A3 3 0 0 0 19 16l-5-8V3'},common)),React.createElement('path',Object.assign({key:'p2',d:'M8 13h8'},common))];
+            break;
+        case 'ban':
+            children=[React.createElement('circle',Object.assign({key:'c1',cx:'12',cy:'12',r:'9'},common)),React.createElement('path',Object.assign({key:'p1',d:'M5 19 19 5'},common))];
+            break;
+        case 'key':
+            children=[React.createElement('circle',Object.assign({key:'c1',cx:'8',cy:'15',r:'4'},common)),React.createElement('path',Object.assign({key:'p1',d:'M12 15h9'},common)),React.createElement('path',Object.assign({key:'p2',d:'M18 12v6'},common)),React.createElement('path',Object.assign({key:'p3',d:'M21 13v4'},common))];
+            break;
+        case 'pull-request':
+            children=[React.createElement('circle',Object.assign({key:'c1',cx:'6',cy:'5',r:'2'},common)),React.createElement('circle',Object.assign({key:'c2',cx:'18',cy:'7',r:'2'},common)),React.createElement('circle',Object.assign({key:'c3',cx:'18',cy:'19',r:'2'},common)),React.createElement('path',Object.assign({key:'p1',d:'M8 5h4a4 4 0 0 1 4 4v8'},common)),React.createElement('path',Object.assign({key:'p2',d:'M16 9V7'},common))];
+            break;
+        case 'export':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M12 3v12'},common)),React.createElement('polyline',Object.assign({key:'p2',points:'8 7 12 3 16 7'},common)),React.createElement('path',Object.assign({key:'p3',d:'M5 14v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5'},common))];
+            break;
+        case 'share':
+            children=[React.createElement('circle',Object.assign({key:'c1',cx:'18',cy:'5',r:'2'},common)),React.createElement('circle',Object.assign({key:'c2',cx:'6',cy:'12',r:'2'},common)),React.createElement('circle',Object.assign({key:'c3',cx:'18',cy:'19',r:'2'},common)),React.createElement('path',Object.assign({key:'p1',d:'M8 12 16 6'},common)),React.createElement('path',Object.assign({key:'p2',d:'M8 12 16 18'},common))];
+            break;
+        case 'close':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M6 6l12 12'},common)),React.createElement('path',Object.assign({key:'p2',d:'M18 6 6 18'},common))];
+            break;
+        case 'settings':
+            children=[
+                React.createElement('circle',Object.assign({key:'c1',cx:'12',cy:'12',r:'3.2'},common)),
+                React.createElement('path',Object.assign({key:'p1',d:'M19.4 15a1.7 1.7 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.7 1.7 0 0 0-1.82-.33 1.7 1.7 0 0 0-1.02 1.53V21a2 2 0 1 1-4 0v-.09a1.7 1.7 0 0 0-1.02-1.53 1.7 1.7 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.53-1.02H3a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 4.6 8.98a1.7 1.7 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 8.92 4.6 1.7 1.7 0 0 0 9.94 3.08V3a2 2 0 1 1 4 0v.09a1.7 1.7 0 0 0 1.02 1.53 1.7 1.7 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 8.98c.22.31.36.66.4 1.02H20a2 2 0 1 1 0 4h-.09c-.04.36-.18.71-.4 1.02z'},common))
+            ];
+            break;
+        case 'sun':
+            children=[React.createElement('circle',Object.assign({key:'c1',cx:'12',cy:'12',r:'4'},common)),React.createElement('path',Object.assign({key:'p1',d:'M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'},common))];
+            break;
+        case 'moon':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z'},common))];
+            break;
+        case 'graph':
+            children=[React.createElement('circle',Object.assign({key:'c1',cx:'5',cy:'17',r:'2'},common)),React.createElement('circle',Object.assign({key:'c2',cx:'12',cy:'7',r:'2'},common)),React.createElement('circle',Object.assign({key:'c3',cx:'19',cy:'14',r:'2'},common)),React.createElement('path',Object.assign({key:'p1',d:'M6.7 15.6 10.3 8.4M13.8 8.1l3.4 4.8'},common))];
+            break;
+        case 'treemap':
+            children=[React.createElement('rect',Object.assign({key:'r1',x:'3',y:'3',width:'18',height:'18',rx:'2'},common)),React.createElement('path',Object.assign({key:'p1',d:'M10 3v18M10 10h11M3 14h7'},common))];
+            break;
+        case 'matrix':
+            children=[React.createElement('rect',Object.assign({key:'r1',x:'4',y:'4',width:'16',height:'16',rx:'2'},common)),React.createElement('path',Object.assign({key:'p1',d:'M4 10h16M4 14h16M10 4v16M14 4v16'},common))];
+            break;
+        case 'tree':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M12 3v18'},common)),React.createElement('path',Object.assign({key:'p2',d:'M12 7 7 12M12 9l5 5M12 14l-4 5M12 16l4 5'},common)),React.createElement('circle',Object.assign({key:'c1',cx:'12',cy:'3',r:'2'},common)),React.createElement('circle',Object.assign({key:'c2',cx:'7',cy:'12',r:'2'},common)),React.createElement('circle',Object.assign({key:'c3',cx:'17',cy:'14',r:'2'},common)),React.createElement('circle',Object.assign({key:'c4',cx:'8',cy:'19',r:'2'},common)),React.createElement('circle',Object.assign({key:'c5',cx:'16',cy:'21',r:'2'},common))];
+            break;
+        case 'flow':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M4 7h10'},common)),React.createElement('polyline',Object.assign({key:'p2',points:'11 4 14 7 11 10'},common)),React.createElement('path',Object.assign({key:'p3',d:'M4 17h16'},common)),React.createElement('polyline',Object.assign({key:'p4',points:'17 14 20 17 17 20'},common))];
+            break;
+        case 'cluster':
+            children=[React.createElement('circle',Object.assign({key:'c1',cx:'8',cy:'8',r:'3'},common)),React.createElement('circle',Object.assign({key:'c2',cx:'16',cy:'8',r:'3'},common)),React.createElement('circle',Object.assign({key:'c3',cx:'12',cy:'16',r:'3'},common)),React.createElement('path',Object.assign({key:'p1',d:'M10.5 10.5 11.5 13.5M13.5 13.5l1-3'},common))];
+            break;
+        case 'target':
+            children=[React.createElement('circle',Object.assign({key:'c1',cx:'12',cy:'12',r:'8'},common)),React.createElement('circle',Object.assign({key:'c2',cx:'12',cy:'12',r:'4'},common)),React.createElement('circle',Object.assign({key:'c3',cx:'12',cy:'12',r:'1'},common))];
+            break;
+        case 'impact':
+            children=[React.createElement('circle',Object.assign({key:'c1',cx:'12',cy:'12',r:'3'},common)),React.createElement('path',Object.assign({key:'p1',d:'M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M19.1 4.9l-2.8 2.8M7.7 16.3l-2.8 2.8'},common))];
+            break;
+        case 'users':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2'},common)),React.createElement('circle',Object.assign({key:'c1',cx:'9.5',cy:'8',r:'3'},common)),React.createElement('path',Object.assign({key:'p2',d:'M20 21v-2a4 4 0 0 0-3-3.87'},common)),React.createElement('path',Object.assign({key:'p3',d:'M14.5 5.2a3 3 0 0 1 0 5.6'},common))];
+            break;
+        case 'action':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M12 3v6M12 15v6M3 12h6M15 12h6M5.6 5.6l4.2 4.2M14.2 14.2l4.2 4.2M18.4 5.6l-4.2 4.2M9.8 14.2l-4.2 4.2'},common))];
+            break;
+        case 'image':
+            children=[React.createElement('rect',Object.assign({key:'r1',x:'3',y:'5',width:'18',height:'14',rx:'2'},common)),React.createElement('circle',Object.assign({key:'c1',cx:'9',cy:'10',r:'1.5'},common)),React.createElement('path',Object.assign({key:'p1',d:'M21 16l-5-5-5 6-2-2-6 5'},common))];
+            break;
+        case 'note':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M6 3h9l4 4v14H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'},common)),React.createElement('path',Object.assign({key:'p2',d:'M15 3v4h4'},common)),React.createElement('path',Object.assign({key:'p3',d:'M8 12h8M8 16h6'},common))];
+            break;
+        case 'code':
+            children=[React.createElement('polyline',Object.assign({key:'p1',points:'8 8 4 12 8 16'},common)),React.createElement('polyline',Object.assign({key:'p2',points:'16 8 20 12 16 16'},common)),React.createElement('path',Object.assign({key:'p3',d:'M13 6 11 18'},common))];
+            break;
+        case 'brush':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M18 3a3 3 0 0 1 3 3c0 4-3 6-6 9l-6-6c3-3 5-6 9-6z'},common)),React.createElement('path',Object.assign({key:'p2',d:'M9 15c-3 0-5 2-5 5 3 0 5-2 5-5z'},common))];
+            break;
+        case 'chart':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M4 20V10'},common)),React.createElement('path',Object.assign({key:'p2',d:'M10 20V4'},common)),React.createElement('path',Object.assign({key:'p3',d:'M16 20v-6'},common)),React.createElement('path',Object.assign({key:'p4',d:'M22 20H2'},common))];
+            break;
+        case 'security':
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M12 3l7 3v6c0 5-3.5 8-7 9-3.5-1-7-4-7-9V6z'},common)),React.createElement('path',Object.assign({key:'p2',d:'M9 12l2 2 4-4'},common))];
+            break;
+        default:
+            children=[React.createElement('path',Object.assign({key:'p1',d:'M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'},common)),React.createElement('polyline',Object.assign({key:'p2',points:'14 3 14 8 19 8'},common))];
+    }
+    return React.createElement('span',{className:className,'aria-hidden':'true'},React.createElement('svg',{viewBox:'0 0 24 24'},children));
+}
+
+function StatusDot(props){
+    return React.createElement('span',{className:'status-dot',style:{background:props.color||'currentColor'}});
+}
+
+function iconLabel(name,label,size,className){
+    return React.createElement(React.Fragment,null,
+        React.createElement(Icon,{name:name,size:size||'s',className:className}),
+        ' ',
+        label
+    );
+}
+
+function getSeverityColor(level){
+    return level==='critical'||level==='high'?'var(--red)':level==='medium'?'var(--orange)':'var(--blue)';
+}
+
+function getFilePreviewIconName(filename){
+    if(!Parser.isCode(filename))return'file';
+    if(Parser.isVBA(filename))return'chart';
+    if(Parser.isHTML(filename))return'globe';
+    if(Parser.isCSS(filename))return'brush';
+    if(Parser.isJSON(filename))return'note';
+    return'code';
+}
+
 // Error boundary to prevent white screen crashes on large codebases
 class ErrorBoundary extends React.Component{
     constructor(props){super(props);this.state={hasError:false,error:null};}
@@ -2875,7 +3087,7 @@
         if(this.state.hasError){
             var self=this;
             return React.createElement('div',{style:{display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',height:'100vh',background:'var(--bg0)',color:'var(--t0)',fontFamily:'JetBrains Mono, monospace',padding:40,textAlign:'center'}},
-                React.createElement('div',{style:{fontSize:48,marginBottom:16}},'⚡'),
+                React.createElement(Icon,{name:'logo',size:'xxl',className:'empty-icon'}),
                 React.createElement('h2',{style:{marginBottom:12,color:'var(--acc)'}},'CodeFlow ran into an issue'),
                 React.createElement('p',{style:{color:'var(--t2)',marginBottom:8,maxWidth:500}},'The codebase may be too large for your browser\'s available memory. Try analyzing a subfolder instead, or close other browser tabs to free memory.'),
                 React.createElement('p',{style:{color:'var(--t3)',fontSize:11,marginBottom:20}},String(this.state.error)),
@@ -2894,13 +3106,13 @@
     return React.createElement('div',null,
         React.createElement('div',{className:'tree-folder'+(isFiltered?' filtered':''),onClick:function(){if(node.path==='')filterFolder(null);else filterFolder(node.path);}},
             React.createElement('span',{className:'tree-toggle'+(isOpen?' open':''),onClick:function(e){e.stopPropagation();toggle(node.path);}},children.length>0||node.files.length>0?'▶':''),
-            React.createElement('span',null,isOpen?'📂':'📁'),
+            React.createElement(Icon,{name:isOpen?'folder-open':'folder',size:'m',className:'tree-entry-icon'}),
             React.createElement('span',{className:'tree-name'},node.name),
             React.createElement('span',{className:'tree-count'},countFiles(node))
         ),
         isOpen&&React.createElement('div',{className:'tree-children'},
             children.map(function(c){return React.createElement(TreeNode,{key:c.path,node:c,selected:selected,onSelect:onSelect,expanded:expanded,toggle:toggle,filterFolder:filterFolder,activeFilter:activeFilter});}),
-            node.files.map(function(f){return React.createElement('div',{key:f.path,className:'tree-file'+(selected&&selected.path===f.path?' active':''),onClick:function(){onSelect(f.path);}},React.createElement('span',null,'📄'),React.createElement('span',{className:'tree-name'},f.name));})
+            node.files.map(function(f){return React.createElement('div',{key:f.path,className:'tree-file'+(selected&&selected.path===f.path?' active':''),onClick:function(){onSelect(f.path);}},React.createElement(Icon,{name:'file',size:'s',className:'tree-entry-icon'}),React.createElement('span',{className:'tree-name'},f.name));})
         )
     );
 }
@@ -3090,7 +3302,7 @@
             if(!hasAuth&&rl.remaining<estimatedRequests){
                 var resetTime=new Date(rl.reset*1000).toLocaleTimeString();
                 var proceed=window.confirm(
-                    '⚠️ GitHub API Rate Limit Low\n\n'+
+                    'GitHub API Rate Limit Low\n\n'+
                     'Remaining requests: '+rl.remaining+'/'+rl.limit+'\n'+
                     'Resets at: '+resetTime+'\n\n'+
                     'Without authentication, you only get 60 requests/hour.\n'+
@@ -4579,7 +4791,7 @@
             if(data.patterns.length>0){
                 md+='## Design Patterns\n\n';
                 data.patterns.filter(function(p){return!p.isAnti;}).forEach(function(p){
-                    md+='### '+p.icon+' '+p.name+'\n';
+                    md+='### '+p.name+'\n';
                     md+=p.desc+'\n\n';
                     md+='**Files:** '+p.files.slice(0,5).map(function(f){return'`'+f.name+'`';}).join(', ')+(p.files.length>5?' (+'+p.files.length-5+' more)':'')+'\n\n';
                 });
@@ -4587,7 +4799,7 @@
                 if(antiPatterns.length>0){
                     md+='## Anti-Patterns\n\n';
                     antiPatterns.forEach(function(p){
-                        md+='### '+p.icon+' '+p.name+'\n';
+                        md+='### '+p.name+'\n';
                         md+=p.desc+'\n\n';
                         md+='**Affected files:** '+p.files.slice(0,5).map(function(f){return'`'+f.name+'`';}).join(', ')+'\n\n';
                     });
@@ -4693,7 +4905,7 @@
     return React.createElement('div',{className:'app'},
         React.createElement('div',{className:'topbar'},
             React.createElement('div',{className:'logo',onClick:function(){setShowPrivacy(true);}},
-                React.createElement('div',{className:'logo-mark'},'⚡'),
+                React.createElement('div',{className:'logo-mark'},React.createElement(Icon,{name:'logo',size:'l'})),
                 React.createElement('span',{className:'logo-text'},'CODEFLOW')
             ),
             React.createElement('div',{className:'repo-input-group'},
@@ -4707,20 +4919,39 @@
                     authMethod==='pat'&&React.createElement('input',{className:'repo-input',type:'password','aria-label':'GitHub Token',placeholder:'Personal Access Token',value:token,onChange:function(e){setToken(e.target.value);},onKeyDown:function(e){if(e.key==='Enter'&&!loading)analyze();},style:{minWidth:140}}),
                     authMethod==='github_app'&&React.createElement(React.Fragment,null,
                         React.createElement('input',{className:'repo-input','aria-label':'App ID',placeholder:'App ID',value:appId,onChange:function(e){setAppId(e.target.value);},onKeyDown:function(e){if(e.key==='Enter'&&!loading)analyze();},style:{width:80}}),
-                        React.createElement('button',{className:'private-key-btn'+(privateKey?' has-key':''),'aria-label':'Set Private Key',onClick:function(){setShowKeyModal(true);},type:'button'},privateKey?'🔑 Key Set':'🔐 Private Key')
+                        React.createElement('button',{className:'private-key-btn'+(privateKey?' has-key':''),'aria-label':'Set Private Key',onClick:function(){setShowKeyModal(true);},type:'button'},
+                            React.createElement(Icon,{name:privateKey?'key':'shield',size:'m'}),
+                            privateKey?'Key Set':'Private Key'
+                        )
                     )
                 ),
-                React.createElement('button',{className:'top-btn','aria-label':'Edit exclude patterns',onClick:function(){openExcludeModal(false);},disabled:loading,style:customExcludeCount?{borderColor:'var(--acc)',color:'var(--acc)'}:null},'🚫 Excludes',customExcludeCount>0?' ('+customExcludeCount+')':''),
-                React.createElement('button',{id:'analyze-btn',className:'top-btn primary','aria-label':'Analyze repository',onClick:analyze,disabled:loading||!repoUrl},loading?'⏳':'🔍',' Analyze'),
-                React.createElement('button',{className:'top-btn','aria-label':'Open local folder',onClick:function(){openLocalFolder();},disabled:loading},'📁 Open Folder'),
-                data&&React.createElement('button',{className:'refresh-btn','aria-label':'Refresh analysis',onClick:refreshAnalysis,disabled:loading,title:'Refresh Analysis'},'↻ Refresh'),
-                data&&React.createElement('button',{className:'reset-btn','aria-label':'Reset analysis',onClick:resetAnalysis,title:'Clear & Reset'},'✕ Reset')
+                React.createElement('button',{className:'top-btn','aria-label':'Edit exclude patterns',onClick:function(){openExcludeModal(false);},disabled:loading,style:customExcludeCount?{borderColor:'var(--acc)',color:'var(--acc)'}:null},
+                    React.createElement(Icon,{name:'ban',size:'m'}),
+                    'Excludes',
+                    customExcludeCount>0?' ('+customExcludeCount+')':''
+                ),
+                React.createElement('button',{id:'analyze-btn',className:'top-btn primary','aria-label':'Analyze repository',onClick:analyze,disabled:loading||!repoUrl},
+                    React.createElement(Icon,{name:loading?'activity':'search',size:'m'}),
+                    'Analyze'
+                ),
+                React.createElement('button',{className:'top-btn','aria-label':'Open local folder',onClick:function(){openLocalFolder();},disabled:loading},
+                    React.createElement(Icon,{name:'folder',size:'m'}),
+                    'Open Folder'
+                ),
+                data&&React.createElement('button',{className:'refresh-btn','aria-label':'Refresh analysis',onClick:refreshAnalysis,disabled:loading,title:'Refresh Analysis'},
+                    React.createElement(Icon,{name:'refresh',size:'m'}),
+                    'Refresh'
+                ),
+                data&&React.createElement('button',{className:'reset-btn','aria-label':'Reset analysis',onClick:resetAnalysis,title:'Clear & Reset'},
+                    React.createElement(Icon,{name:'close',size:'m'}),
+                    ' Reset'
+                )
             ),
             React.createElement('div',{className:'topbar-actions'},
-                React.createElement('button',{className:'top-btn','aria-label':'Analyze Pull Request',onClick:function(){setShowPR(true);},disabled:!data||localDirHandle},'📊 PR'),
-                React.createElement('button',{className:'top-btn','aria-label':'Export analysis',onClick:function(){setShowExport(true);},disabled:!data},'📤'),
-                React.createElement('button',{className:'top-btn','aria-label':'Copy share link',onClick:copyLink,disabled:!data||localDirHandle},'🔗'),
-                React.createElement('button',{className:'top-btn','aria-label':'Toggle theme',onClick:function(){setTheme(function(t){return t==='dark'?'light':'dark';});}},theme==='dark'?'☀️':'🌙')
+                React.createElement('button',{className:'top-btn','aria-label':'Analyze Pull Request',onClick:function(){setShowPR(true);},disabled:!data||localDirHandle},React.createElement(Icon,{name:'pull-request',size:'m'}),'PR'),
+                React.createElement('button',{className:'top-btn','aria-label':'Export analysis',onClick:function(){setShowExport(true);},disabled:!data},React.createElement(Icon,{name:'export',size:'m'}),'Export'),
+                React.createElement('button',{className:'top-btn','aria-label':'Copy share link',onClick:copyLink,disabled:!data||localDirHandle},React.createElement(Icon,{name:'share',size:'m'}),'Share'),
+                React.createElement('button',{className:'top-btn','aria-label':'Toggle theme',onClick:function(){setTheme(function(t){return t==='dark'?'light':'dark';});}},React.createElement(Icon,{name:theme==='dark'?'sun':'moon',size:'m'}),theme==='dark'?'Light':'Dark')
             )
         ),
         React.createElement('div',{className:'main'},
@@ -4745,9 +4976,9 @@
                     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('span',{className:'view-mode-icon'},'📁'),'Folder'),
-                            React.createElement('div',{className:'view-mode'+(colorMode==='layer'?' active':''),onClick:function(){setColorMode('layer');}},React.createElement('span',{className:'view-mode-icon'},'🏗️'),'Layer'),
-                            React.createElement('div',{className:'view-mode'+(colorMode==='churn'?' active':''),onClick:function(){setColorMode('churn');}},React.createElement('span',{className:'view-mode-icon'},'🔥'),'Churn')
+                            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')
                         )
                     ),
                     React.createElement('div',{className:'sidebar-section'},
@@ -4775,23 +5006,35 @@
                     ),
                     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);}},'✕ Clear Filter: ',folderFilter)
+                        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('div',{className:'empty-state'},React.createElement('div',{className:'empty-icon'},'🔍'),React.createElement('div',{className:'empty-title'},'No Repository'),React.createElement('div',{className:'empty-desc'},'Enter a GitHub URL or click "Open Folder" to analyze a local directory'))
+                ):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 or click "Open Folder" to analyze a local directory')
+                )
             ),
             React.createElement('div',{className:'canvas-area'},
                 loading?React.createElement('div',{className:'loading'},React.createElement('div',{className:'spinner'}),React.createElement('div',{className:'loading-text'},'Analyzing...'),React.createElement('div',{className:'loading-progress'},progress)):
-                !data?React.createElement('div',{className:'empty-state'},React.createElement('div',{className:'empty-icon'},'⚡'),React.createElement('div',{className:'empty-title'},'CodeFlow'),React.createElement('div',{className:'empty-desc'},'Visualize architecture, blast radius, ownership, patterns & security\n\nEnter a GitHub URL or click "Open Folder" to analyze a local directory')):
+                !data?React.createElement('div',{className:'empty-state'},
+                    React.createElement(Icon,{name:'logo',size:'xxl',className:'empty-icon'}),
+                    React.createElement('div',{className:'empty-title'},'CodeFlow'),
+                    React.createElement('div',{className:'empty-desc'},'Visualize architecture, blast radius, ownership, patterns & security\n\nEnter a GitHub URL or click "Open Folder" to analyze a local directory')
+                ):
                 React.createElement(React.Fragment,null,
                     React.createElement('div',{className:'viz-selector'},
-                        React.createElement('button',{className:'viz-selector-btn'+(graphConfig.vizType==='graph'?' active':''),onClick:function(){setGraphConfig(Object.assign({},graphConfig,{vizType:'graph'}));}},'🕸️ Graph'),
-                        React.createElement('button',{className:'viz-selector-btn'+(graphConfig.vizType==='treemap'?' active':''),onClick:function(){setGraphConfig(Object.assign({},graphConfig,{vizType:'treemap'}));}},'📦 Treemap'),
-                        React.createElement('button',{className:'viz-selector-btn'+(graphConfig.vizType==='matrix'?' active':''),onClick:function(){setGraphConfig(Object.assign({},graphConfig,{vizType:'matrix'}));}},'📊 Matrix'),
-                        React.createElement('button',{className:'viz-selector-btn'+(graphConfig.vizType==='dendro'?' active':''),onClick:function(){setGraphConfig(Object.assign({},graphConfig,{vizType:'dendro'}));}},'🌳 Tree'),
-                        React.createElement('button',{className:'viz-selector-btn'+(graphConfig.vizType==='sankey'?' active':''),onClick:function(){setGraphConfig(Object.assign({},graphConfig,{vizType:'sankey'}));}},'🌊 Flow'),
-                        React.createElement('button',{className:'viz-selector-btn'+(graphConfig.vizType==='disjoint'?' active':''),onClick:function(){setGraphConfig(Object.assign({},graphConfig,{vizType:'disjoint'}));}},'🔮 Cluster'),
-                        React.createElement('button',{className:'viz-selector-btn'+(graphConfig.vizType==='bundle'?' active':''),onClick:function(){setGraphConfig(Object.assign({},graphConfig,{vizType:'bundle'}));}},'🎯 Bundle')
+                        React.createElement('button',{className:'viz-selector-btn'+(graphConfig.vizType==='graph'?' active':''),onClick:function(){setGraphConfig(Object.assign({},graphConfig,{vizType:'graph'}));}},iconLabel('graph','Graph')),
+                        React.createElement('button',{className:'viz-selector-btn'+(graphConfig.vizType==='treemap'?' active':''),onClick:function(){setGraphConfig(Object.assign({},graphConfig,{vizType:'treemap'}));}},iconLabel('treemap','Treemap')),
+                        React.createElement('button',{className:'viz-selector-btn'+(graphConfig.vizType==='matrix'?' active':''),onClick:function(){setGraphConfig(Object.assign({},graphConfig,{vizType:'matrix'}));}},iconLabel('matrix','Matrix')),
+                        React.createElement('button',{className:'viz-selector-btn'+(graphConfig.vizType==='dendro'?' active':''),onClick:function(){setGraphConfig(Object.assign({},graphConfig,{vizType:'dendro'}));}},iconLabel('tree','Tree')),
+                        React.createElement('button',{className:'viz-selector-btn'+(graphConfig.vizType==='sankey'?' active':''),onClick:function(){setGraphConfig(Object.assign({},graphConfig,{vizType:'sankey'}));}},iconLabel('flow','Flow')),
+                        React.createElement('button',{className:'viz-selector-btn'+(graphConfig.vizType==='disjoint'?' active':''),onClick:function(){setGraphConfig(Object.assign({},graphConfig,{vizType:'disjoint'}));}},iconLabel('cluster','Cluster')),
+                        React.createElement('button',{className:'viz-selector-btn'+(graphConfig.vizType==='bundle'?' active':''),onClick:function(){setGraphConfig(Object.assign({},graphConfig,{vizType:'bundle'}));}},iconLabel('target','Bundle'))
                     ),
                     graphConfig.vizType==='graph'&&React.createElement('svg',{ref:svgRef}),
                     graphConfig.vizType==='treemap'&&React.createElement('div',{ref:treemapRef,className:'treemap-container'}),
@@ -4805,7 +5048,9 @@
                         React.createElement('button',{className:'tool-btn',onClick:zoomOut,'aria-label':'Zoom out'},'−'),
                         React.createElement('button',{className:'tool-btn',onClick:resetZoom,'aria-label':'Reset zoom'},'⟲'),
                         React.createElement('button',{className:'tool-btn',onClick:fitView,'aria-label':'Fit view'},'⊡'),
-                        React.createElement('button',{className:'tool-btn'+(showGraphConfig?' active':''),onClick:function(){setShowGraphConfig(!showGraphConfig);},'aria-label':'Graph settings',style:showGraphConfig?{background:'var(--accbg)',borderColor:'var(--acc)'}:{}},'⚙')
+                        React.createElement('button',{className:'tool-btn'+(showGraphConfig?' active':''),onClick:function(){setShowGraphConfig(!showGraphConfig);},'aria-label':'Graph settings',style:showGraphConfig?{background:'var(--accbg)',borderColor:'var(--acc)'}:{}},
+                            React.createElement(Icon,{name:'settings',size:'m'})
+                        )
                     ),
                     graphConfig.vizType==='graph'&&showGraphConfig&&React.createElement('div',{className:'graph-config'},
                         React.createElement('div',{className:'graph-config-title'},'Layout'),
@@ -4840,8 +5085,19 @@
                     React.createElement('div',{className:'canvas-info'},
                         React.createElement('div',{className:'info-chip'},React.createElement('strong',null,folderFilter?data.files.filter(function(f){return f.folder===folderFilter||f.folder.startsWith(folderFilter+'/');}).length:data.files.length),' files'),
                         React.createElement('div',{className:'info-chip'},React.createElement('strong',null,data.connections.length),' links'),
-                        data.excludePatterns&&data.excludePatterns.length>0&&React.createElement('div',{className:'info-chip'},'🚫 ',React.createElement('strong',null,data.excludePatterns.length),' custom excludes'),
-                        selected&&blastRadius&&React.createElement('div',{className:'info-chip'},'💥 ',React.createElement('strong',null,blastRadius.count),' dependents',blastRadius.fnsUsed>0?' • '+blastRadius.fnsUsed+' fns used':'')
+                        data.excludePatterns&&data.excludePatterns.length>0&&React.createElement('div',{className:'info-chip'},
+                            React.createElement(Icon,{name:'ban',size:'s'}),
+                            ' ',
+                            React.createElement('strong',null,data.excludePatterns.length),
+                            ' custom excludes'
+                        ),
+                        selected&&blastRadius&&React.createElement('div',{className:'info-chip'},
+                            React.createElement(Icon,{name:'impact',size:'s'}),
+                            ' ',
+                            React.createElement('strong',null,blastRadius.count),
+                            ' dependents',
+                            blastRadius.fnsUsed>0?' • '+blastRadius.fnsUsed+' fns used':''
+                        )
                     ),
                     React.createElement('div',{className:'legend'+(legendCollapsed?' collapsed':'')},
                         React.createElement('div',{className:'legend-header',onClick:function(){setLegendCollapsed(!legendCollapsed);}},
@@ -4868,10 +5124,10 @@
                 }}),
                 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?'📄 FILE':'🔍 ISSUES'),
-                        React.createElement('button',{className:'panel-tab'+(rightTab==='patterns'?' active':''),onClick:function(){setRightTab('patterns');setDrillDown(null);}},'🧩 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);}},'🔐 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);}},'💡 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==='details'?' active':''),onClick:function(){setRightTab('details');setDrillDown(null);}},selected?iconLabel('file','FILE'):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('div',{className:'panel-content'},
                         rightTab==='details'&&(selected?React.createElement(React.Fragment,null,
@@ -4879,14 +5135,14 @@
                             React.createElement('div',{className:'panel-header',style:{margin:'0 -12px 12px',padding:12}},
                                 React.createElement('div',{style:{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}},
                                     React.createElement('div',null,
-                                        React.createElement('div',{className:'panel-title'},'📄 ',selected.name),
+                                        React.createElement('div',{className:'panel-title'},React.createElement(Icon,{name:'file',size:'m'}),' ',selected.name),
                                         React.createElement('div',{className:'panel-subtitle'},selected.folder||'root',' • ',selected.layer,' • ',selected.lines,' lines',selected.complexity&&selected.complexity.score>0?' • Complexity: '+selected.complexity.score:'')
                                     ),
-                                    React.createElement('button',{className:'view-file-btn',onClick:function(){openFilePreview(selected.path);}},'👁️ View Source')
+                                    React.createElement('button',{className:'view-file-btn',onClick:function(){openFilePreview(selected.path);}},iconLabel('eye','View Source'))
                                 )
                             ),
                             blastRadius&&React.createElement('div',{className:'card',style:{marginBottom:12}},
-                                React.createElement('div',{className:'card-header',onClick:function(){toggleCard('blast');}},React.createElement('div',{className:'card-title'},React.createElement('span',{className:'card-toggle'+(expandedCards.has('blast')?' open':'')},'▶'),'💥 Impact Analysis'),React.createElement('span',{className:'badge badge-'+(blastRadius.level==='low'?'success':blastRadius.level==='medium'?'warning':'danger')},blastRadius.level.toUpperCase())),
+                                React.createElement('div',{className:'card-header',onClick:function(){toggleCard('blast');}},React.createElement('div',{className:'card-title'},React.createElement('span',{className:'card-toggle'+(expandedCards.has('blast')?' open':'')},'▶'),React.createElement(Icon,{name:'impact',size:'s'}),' Impact Analysis'),React.createElement('span',{className:'badge badge-'+(blastRadius.level==='low'?'success':blastRadius.level==='medium'?'warning':'danger')},blastRadius.level.toUpperCase())),
                                 expandedCards.has('blast')&&React.createElement('div',{className:'card-body'},
                                     React.createElement('div',{style:{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginBottom:10}},
                                         React.createElement('div',{style:{background:'var(--bg0)',padding:8,borderRadius:6,textAlign:'center'}},
@@ -4907,18 +5163,18 @@
                                         )
                                     ),
                                     (blastRadius.count>0||blastRadius.fnsUsed>0)&&React.createElement('div',{style:{fontSize:9,color:'var(--t3)',marginBottom:8,padding:'6px 8px',background:'var(--bg0)',borderRadius:4}},
-                                        blastRadius.count>0?'⚡ '+blastRadius.count+' file'+(blastRadius.count>1?'s':'')+' directly depend on this file':'',
+                                        blastRadius.count>0?blastRadius.count+' file'+(blastRadius.count>1?'s':'')+' directly depend on this file':'',
                                         blastRadius.count>0&&blastRadius.fnsUsed>0?' • ':'',
                                         blastRadius.fnsUsed>0?blastRadius.fnsUsed+' function'+(blastRadius.fnsUsed>1?'s':'')+' used '+blastRadius.totalCalls+' times':''
                                     ),
                                     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);}},'📄 ',path.split('/').pop());}),
+                                        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.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);}},'📄 ',path.split('/').pop());}),
+                                        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.length>5&&React.createElement('div',{style:{fontSize:9,color:'var(--t3)',marginTop:4}},'+',blastRadius.dependencies.length-5,' more')
                                     )
                                 )
@@ -4942,16 +5198,16 @@
                                 incoming=Object.values(connByFile.in).sort(function(a,b){return b.fns.length-a.fns.length;});
                                 var totalConns=outgoing.length+incoming.length;
                                 return totalConns>0&&React.createElement('div',{className:'card',style:{marginBottom:12}},
-                                    React.createElement('div',{className:'card-header',onClick:function(){toggleCard('conns');}},React.createElement('div',{className:'card-title'},React.createElement('span',{className:'card-toggle'+(expandedCards.has('conns')?' open':'')},'▶'),'🔗 Connections'),React.createElement('span',{className:'badge badge-default'},totalConns)),
+                                    React.createElement('div',{className:'card-header',onClick:function(){toggleCard('conns');}},React.createElement('div',{className:'card-title'},React.createElement('span',{className:'card-toggle'+(expandedCards.has('conns')?' open':'')},'▶'),React.createElement(Icon,{name:'link',size:'s'}),' Connections'),React.createElement('span',{className:'badge badge-default'},totalConns)),
                                     expandedCards.has('conns')&&React.createElement('div',{className:'card-body',style:{padding:0}},
                                         outgoing.length>0&&React.createElement(React.Fragment,null,
-                                            React.createElement('div',{style:{fontSize:9,fontWeight:600,color:'var(--t3)',padding:'8px 12px',background:'var(--bg2)',borderBottom:'1px solid var(--border)'}},'⬆️ Uses (',outgoing.length,' files)'),
+                                            React.createElement('div',{style:{fontSize:9,fontWeight:600,color:'var(--t3)',padding:'8px 12px',background:'var(--bg2)',borderBottom:'1px solid var(--border)'}},'Uses (',outgoing.length,' files)'),
                                             outgoing.slice(0,15).map(function(conn){
                                                 var isOpen=expandedCards.has('conn-out-'+conn.file);
                                                 return React.createElement('div',{key:conn.file,className:'conn-item'},
                                                     React.createElement('div',{className:'conn-header',onClick:function(e){e.stopPropagation();toggleCard('conn-out-'+conn.file);}},
                                                         React.createElement('span',{className:'card-toggle'+(isOpen?' open':''),style:{fontSize:8,marginRight:6}},'▶'),
-                                                        React.createElement('span',{className:'conn-file-icon'},'📄'),
+                                                        React.createElement('span',{className:'conn-file-icon'},React.createElement(Icon,{name:'file',size:'s'})),
                                                         React.createElement('span',{className:'conn-file-name'},conn.file.split('/').pop()),
                                                         React.createElement('span',{className:'badge badge-default',style:{marginLeft:'auto'}},conn.fns.length,' fn',conn.fns.length!==1?'s':'')
                                                     ),
@@ -4967,13 +5223,13 @@
                                             outgoing.length>15&&React.createElement('div',{style:{fontSize:9,color:'var(--t3)',padding:8,textAlign:'center'}},'+',outgoing.length-15,' more files')
                                         ),
                                         incoming.length>0&&React.createElement(React.Fragment,null,
-                                            React.createElement('div',{style:{fontSize:9,fontWeight:600,color:'var(--t3)',padding:'8px 12px',background:'var(--bg2)',borderBottom:'1px solid var(--border)',borderTop:outgoing.length>0?'1px solid var(--border)':'none'}},'⬇️ Used by (',incoming.length,' files)'),
+                                            React.createElement('div',{style:{fontSize:9,fontWeight:600,color:'var(--t3)',padding:'8px 12px',background:'var(--bg2)',borderBottom:'1px solid var(--border)',borderTop:outgoing.length>0?'1px solid var(--border)':'none'}},'Used by (',incoming.length,' files)'),
                                             incoming.slice(0,15).map(function(conn){
                                                 var isOpen=expandedCards.has('conn-in-'+conn.file);
                                                 return React.createElement('div',{key:conn.file,className:'conn-item'},
                                                     React.createElement('div',{className:'conn-header',onClick:function(e){e.stopPropagation();toggleCard('conn-in-'+conn.file);}},
                                                         React.createElement('span',{className:'card-toggle'+(isOpen?' open':''),style:{fontSize:8,marginRight:6}},'▶'),
-                                                        React.createElement('span',{className:'conn-file-icon'},'📄'),
+                                                        React.createElement('span',{className:'conn-file-icon'},React.createElement(Icon,{name:'file',size:'s'})),
                                                         React.createElement('span',{className:'conn-file-name'},conn.file.split('/').pop()),
                                                         React.createElement('span',{className:'badge badge-default',style:{marginLeft:'auto'}},conn.fns.length,' fn',conn.fns.length!==1?'s':'')
                                                     ),
@@ -4992,7 +5248,7 @@
                                 );
                             })(),
                             React.createElement('div',{className:'card',style:{marginBottom:12}},
-                                React.createElement('div',{className:'card-header',onClick:function(){toggleCard('own');}},React.createElement('div',{className:'card-title'},React.createElement('span',{className:'card-toggle'+(expandedCards.has('own')?' open':'')},'▶'),'👥 Ownership')),
+                                React.createElement('div',{className:'card-header',onClick:function(){toggleCard('own');}},React.createElement('div',{className:'card-title'},React.createElement('span',{className:'card-toggle'+(expandedCards.has('own')?' open':'')},'▶'),React.createElement(Icon,{name:'users',size:'s'}),' Ownership')),
                                 expandedCards.has('own')&&React.createElement('div',{className:'card-body'},
                                     ownerLoading?React.createElement('div',{className:'loading-owner'},'Loading ownership data...'):
                                     ownership&&ownership.length>0?React.createElement(React.Fragment,null,
@@ -5002,7 +5258,7 @@
                                 )
                             ),
                             React.createElement('div',{className:'card'},
-                                React.createElement('div',{className:'card-header',onClick:function(){toggleCard('fns');}},React.createElement('div',{className:'card-title'},React.createElement('span',{className:'card-toggle'+(expandedCards.has('fns')?' open':'')},'▶'),'⚡ Functions (',selected.functions.length,')')),
+                                React.createElement('div',{className:'card-header',onClick:function(){toggleCard('fns');}},React.createElement('div',{className:'card-title'},React.createElement('span',{className:'card-toggle'+(expandedCards.has('fns')?' open':'')},'▶'),React.createElement(Icon,{name:'bolt',size:'s'}),' Functions (',selected.functions.length,')')),
                                 expandedCards.has('fns')&&React.createElement('div',{className:'card-body',style:{padding:8}},
                                     selected.functions.length===0?React.createElement('div',{style:{fontSize:10,color:'var(--t3)',padding:8,textAlign:'center'}},'No functions detected'):
                                     selected.functions.map(function(fn){
@@ -5013,7 +5269,7 @@
                                             React.createElement('div',{className:'fn-header',onClick:function(){toggleFn(fn.name);}},
                                                 React.createElement('span',{className:'fn-name'},fn.name,'()'),
                                                 React.createElement('span',{style:{display:'flex',alignItems:'center',gap:4}},
-                                                    React.createElement('button',{className:'view-file-btn',onClick:function(e){e.stopPropagation();openFilePreview(selected.path,fn.line);},title:'View source'},'👁️'),
+                                                    React.createElement('button',{className:'view-file-btn',onClick:function(e){e.stopPropagation();openFilePreview(selected.path,fn.line);},title:'View source'},React.createElement(Icon,{name:'eye',size:'s'})),
                                                     React.createElement('span',{className:'fn-line'},'L',fn.line),
                                                     React.createElement('span',{className:'badge badge-default',title:'Internal calls (same file)'},intCalls,' int'),
                                                     React.createElement('span',{className:'badge '+(extCalls>10?'badge-danger':extCalls>0?'badge-warning':'badge-default'),title:'External calls (other files)'},extCalls,' ext')
@@ -5024,24 +5280,27 @@
                                                 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);}},
-                                                        React.createElement('span',null,'📄'),
+                                                        React.createElement(Icon,{name:'file',size:'s'}),
                                                         React.createElement('span',null,c.name),
                                                         React.createElement('span',{style:{marginLeft:'auto',color:'var(--t3)'}},c.count,'×')
                                                     );}),
                                                     st.callers.length>8&&React.createElement('div',{style:{fontSize:9,color:'var(--t3)',padding:'4px 6px'}},'+',st.callers.length-8,' more')
                                                 ),
-                                                intCalls===0&&extCalls===0&&React.createElement('div',{style:{fontSize:9,color:'var(--orange)',padding:8,textAlign:'center',background:'rgba(255,159,67,0.1)',borderRadius:4}},'⚠️ This function is never called')
+                                                intCalls===0&&extCalls===0&&React.createElement('div',{style:{fontSize:9,color:'var(--orange)',padding:8,textAlign:'center',background:'rgba(255,159,67,0.1)',borderRadius:4}},
+                                                    React.createElement(Icon,{name:'warning',size:'s'}),
+                                                    ' This function is never called'
+                                                )
                                             )
                                         );
                                     })
                                 )
                             )
                         ):React.createElement(React.Fragment,null,
-                            React.createElement('div',{style:{fontSize:12,fontWeight:600,marginBottom:12}},'🔍 Architecture Issues (',data.issues.length,')'),
-                            data.issues.length===0?React.createElement('div',{style:{textAlign:'center',padding:20}},React.createElement('div',{style:{fontSize:32,marginBottom:8}},'✨'),React.createElement('div',{style:{color:'var(--green)'}},'No issues detected!')):
+                            React.createElement('div',{style:{fontSize:12,fontWeight:600,marginBottom:12}},React.createElement(Icon,{name:'search',size:'m'}),' Architecture Issues (',data.issues.length,')'),
+                            data.issues.length===0?React.createElement('div',{style:{textAlign:'center',padding:20}},React.createElement(Icon,{name:'spark',size:'xxl',className:'empty-icon'}),React.createElement('div',{style:{color:'var(--green)'}},'No issues detected!')):
                             data.issues.map(function(issue,i){return React.createElement('div',{key:i,className:'security-item '+(issue.type==='critical'?'high':'medium'),style:{cursor:'pointer'},onClick:function(){setDrillDown({type:'issue',data:issue});}},
                                 React.createElement('div',{className:'security-header'},
-                                    React.createElement('span',null,issue.type==='critical'?'🔴':'🟡'),
+                                    React.createElement(StatusDot,{color:issue.type==='critical'?'var(--red)':'var(--orange)'}),
                                     React.createElement('span',{className:'security-title'},issue.title)
                                 ),
                                 React.createElement('div',{className:'security-desc'},issue.desc),
@@ -5049,11 +5308,11 @@
                             );})
                         )),
                         rightTab==='patterns'&&React.createElement(React.Fragment,null,
-                            React.createElement('div',{style:{fontSize:12,fontWeight:600,marginBottom:12}},'🧩 Design Patterns & Anti-Patterns'),
-                            data.patterns.length===0?React.createElement('div',{style:{textAlign:'center',padding:20,color:'var(--t3)'}},React.createElement('div',{style:{fontSize:32,marginBottom:8}},'🔍'),React.createElement('div',null,'No patterns detected'),React.createElement('div',{style:{fontSize:10,marginTop:8}},'Patterns are detected based on code structure')):
+                            React.createElement('div',{style:{fontSize:12,fontWeight:600,marginBottom:12}},React.createElement(Icon,{name:'puzzle',size:'m'}),' Design Patterns & Anti-Patterns'),
+                            data.patterns.length===0?React.createElement('div',{style:{textAlign:'center',padding:20,color:'var(--t3)'}},React.createElement(Icon,{name:'puzzle',size:'xxl',className:'empty-icon'}),React.createElement('div',null,'No patterns detected'),React.createElement('div',{style:{fontSize:10,marginTop:8}},'Patterns are detected based on code structure')):
                             data.patterns.map(function(p,i){return React.createElement('div',{key:i,className:'pattern-item'+(p.isAnti?' anti':''),style:{cursor:'pointer'},onClick:function(){setDrillDown({type:'pattern',data:p});}},
                                 React.createElement('div',{className:'pattern-header'},
-                                    React.createElement('span',{className:'pattern-icon'},p.icon),
+                                    React.createElement(Icon,{name:p.icon,size:'m',className:'pattern-icon'}),
                                     React.createElement('span',{className:'pattern-name'},p.name),
                                     p.isAnti&&React.createElement('span',{className:'badge badge-danger',style:{marginLeft:8}},'Anti-pattern')
                                 ),
@@ -5062,8 +5321,8 @@
                             );})
                         ),
                         rightTab==='security'&&React.createElement(React.Fragment,null,
-                            React.createElement('div',{style:{fontSize:12,fontWeight:600,marginBottom:12}},'🔐 Security Analysis'),
-                            data.securityIssues.length===0?React.createElement('div',{style:{textAlign:'center',padding:20}},React.createElement('div',{style:{fontSize:32,marginBottom:8}},'✅'),React.createElement('div',{style:{color:'var(--green)',fontWeight:600}},'No security issues found!'),React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginTop:8}},'Your code passed all security checks')):
+                            React.createElement('div',{style:{fontSize:12,fontWeight:600,marginBottom:12}},React.createElement(Icon,{name:'security',size:'m'}),' Security Analysis'),
+                            data.securityIssues.length===0?React.createElement('div',{style:{textAlign:'center',padding:20}},React.createElement(Icon,{name:'security',size:'xxl',className:'empty-icon'}),React.createElement('div',{style:{color:'var(--green)',fontWeight:600}},'No security issues found!'),React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginTop:8}},'Your code passed all security checks')):
                             React.createElement(React.Fragment,null,
                                 React.createElement('div',{style:{display:'flex',gap:8,marginBottom:12}},
                                     React.createElement('div',{className:'badge badge-danger'},data.securityIssues.filter(function(i){return i.severity==='high';}).length,' High'),
@@ -5072,7 +5331,7 @@
                                 ),
                                 data.securityIssues.map(function(issue,i){return React.createElement('div',{key:i,className:'security-item '+issue.severity,style:{cursor:'pointer'},onClick:function(){setDrillDown({type:'security',data:issue});}},
                                     React.createElement('div',{className:'security-header'},
-                                        React.createElement('span',null,issue.severity==='high'?'🔴':issue.severity==='medium'?'🟡':'🔵'),
+                                        React.createElement(StatusDot,{color:getSeverityColor(issue.severity)}),
                                         React.createElement('span',{className:'security-title'},issue.title)
                                     ),
                                     React.createElement('div',{className:'security-desc'},issue.desc),
@@ -5082,13 +5341,13 @@
                             )
                         ),
                         rightTab==='suggestions'&&React.createElement(React.Fragment,null,
-                            React.createElement('div',{style:{fontSize:12,fontWeight:600,marginBottom:12}},'💡 Actionable Suggestions'),
-                            (!data.suggestions||data.suggestions.length===0)?React.createElement('div',{style:{textAlign:'center',padding:20}},React.createElement('div',{style:{fontSize:32,marginBottom:8}},'🎉'),React.createElement('div',{style:{color:'var(--green)',fontWeight:600}},'No issues to address!'),React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginTop:8}},'Your codebase looks healthy')):
+                            React.createElement('div',{style:{fontSize:12,fontWeight:600,marginBottom:12}},React.createElement(Icon,{name:'action',size:'m'}),' Actionable Suggestions'),
+                            (!data.suggestions||data.suggestions.length===0)?React.createElement('div',{style:{textAlign:'center',padding:20}},React.createElement(Icon,{name:'spark',size:'xxl',className:'empty-icon'}),React.createElement('div',{style:{color:'var(--green)',fontWeight:600}},'No issues to address!'),React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginTop:8}},'Your codebase looks healthy')):
                             React.createElement(React.Fragment,null,
                                 React.createElement('div',{style:{fontSize:9,color:'var(--t3)',marginBottom:12}},'Prioritized recommendations based on your codebase analysis'),
                                 data.suggestions.map(function(s,i){return React.createElement('div',{key:i,className:'suggestion-card',style:{background:'var(--bg0)',borderRadius:8,padding:12,marginBottom:10,borderLeft:'3px solid '+(s.priority==='critical'?'var(--red)':s.priority==='high'?'var(--orange)':'var(--acc)')}},
                                     React.createElement('div',{style:{display:'flex',alignItems:'center',gap:8,marginBottom:6}},
-                                        React.createElement('span',{style:{fontSize:18}},s.icon),
+                                        React.createElement(Icon,{name:s.icon,size:'l'}),
                                         React.createElement('span',{style:{fontWeight:600,fontSize:11}},s.title),
                                         React.createElement('span',{className:'badge badge-'+(s.priority==='critical'?'danger':s.priority==='high'?'warning':'info'),style:{marginLeft:'auto',fontSize:8}},s.priority.toUpperCase())
                                     ),
@@ -5097,10 +5356,10 @@
                                         React.createElement('span',{style:{color:'var(--t3)'}},'Action: '),
                                         React.createElement('span',{style:{color:'var(--t1)'}},s.action)
                                     ),
-                                    React.createElement('div',{style:{fontSize:9,color:'var(--green)'}},'✓ ',s.impact)
+                                    React.createElement('div',{style:{fontSize:9,color:'var(--green)'}},React.createElement(Icon,{name:'spark',size:'s'}),' ',s.impact)
                                 );}),
                                 data.duplicates&&data.duplicates.length>0&&React.createElement('div',{style:{marginTop:16}},
-                                    React.createElement('div',{style:{fontSize:11,fontWeight:600,marginBottom:8}},'📋 Duplicate Functions (',data.duplicates.length,')'),
+                                    React.createElement('div',{style:{fontSize:11,fontWeight:600,marginBottom:8}},React.createElement(Icon,{name:'copy',size:'m'}),' Duplicate Functions (',data.duplicates.length,')'),
                                     data.duplicates.slice(0,10).map(function(d,i){return React.createElement('div',{key:i,style:{background:'var(--bg0)',borderRadius:6,padding:8,marginBottom:6,fontSize:10,cursor:'pointer'},onClick:function(){setDrillDown({type:'duplicate',data:d});}},
                                         React.createElement('div',{style:{fontWeight:600,color:d.type==='code'?'var(--purple)':'var(--orange)'}},d.type==='code'?'Similar Code':'Same Name',': ',d.name),
                                         React.createElement('div',{style:{fontSize:9,color:'var(--acc)',marginTop:4}},'Click for details (',d.files.length,' locations) →')
@@ -5109,28 +5368,32 @@
                             )
                         )
                     )
-                ):React.createElement('div',{className:'empty-state'},React.createElement('div',{className:'empty-icon'},'📊'),React.createElement('div',{className:'empty-title'},'Analysis'),React.createElement('div',{className:'empty-desc'},'Analyze a GitHub repo or local folder to see insights'))
+                ):React.createElement('div',{className:'empty-state'},
+                    React.createElement(Icon,{name:'chart',size:'xxl',className:'empty-icon'}),
+                    React.createElement('div',{className:'empty-title'},'Analysis'),
+                    React.createElement('div',{className:'empty-desc'},'Analyze a GitHub repo or local folder to see insights')
+                )
             )
         ),
         showExport&&React.createElement('div',{className:'modal-overlay',onClick:function(){setShowExport(false);}},
             React.createElement('div',{className:'modal',onClick:function(e){e.stopPropagation();},style:{maxWidth:480}},
-                React.createElement('div',{className:'modal-header'},React.createElement('div',{className:'modal-title'},'📤 Export'),React.createElement('button',{className:'modal-close',onClick:function(){setShowExport(false);}},'×')),
+                React.createElement('div',{className:'modal-header'},React.createElement('div',{className:'modal-title'},iconLabel('export','Export','m')),React.createElement('button',{className:'modal-close',onClick:function(){setShowExport(false);}},'×')),
                 React.createElement('div',{className:'modal-body'},
                     React.createElement('div',{style:{fontSize:10,fontWeight:600,color:'var(--t3)',textTransform:'uppercase',marginBottom:8}},'Visualization'),
                     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('div',{className:'export-option-label'},'SVG Image')),
-                        React.createElement('div',{className:'export-option',onClick:function(){copyLink();setShowExport(false);}},React.createElement('div',{className:'export-option-icon'},'🔗'),React.createElement('div',{className:'export-option-label'},'Share Link'))
+                        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(){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'))
                     ),
                     React.createElement('div',{style:{fontSize:10,fontWeight:600,color:'var(--t3)',textTransform:'uppercase',marginBottom:8,marginTop:16}},'Analysis Report'),
                     React.createElement('div',{style:{fontSize:9,color:'var(--t2)',marginBottom:10}},'Complete analysis with files, functions, patterns, security issues, and dependencies'),
                     React.createElement('div',{className:'export-options'},
-                        React.createElement('div',{className:'export-option',onClick:function(){generateReport('json');setShowExport(false);}},React.createElement('div',{className:'export-option-icon'},'📋'),React.createElement('div',{className:'export-option-label'},'JSON Report')),
-                        React.createElement('div',{className:'export-option',onClick:function(){generateReport('md');setShowExport(false);}},React.createElement('div',{className:'export-option-icon'},'📝'),React.createElement('div',{className:'export-option-label'},'Markdown')),
-                        React.createElement('div',{className:'export-option',onClick:function(){generateReport('txt');setShowExport(false);}},React.createElement('div',{className:'export-option-icon'},'📄'),React.createElement('div',{className:'export-option-label'},'Plain Text'))
+                        React.createElement('div',{className:'export-option',onClick:function(){generateReport('json');setShowExport(false);}},React.createElement('div',{className:'export-option-icon'},React.createElement(Icon,{name:'code',size:'xl'})),React.createElement('div',{className:'export-option-label'},'JSON Report')),
+                        React.createElement('div',{className:'export-option',onClick:function(){generateReport('md');setShowExport(false);}},React.createElement('div',{className:'export-option-icon'},React.createElement(Icon,{name:'note',size:'xl'})),React.createElement('div',{className:'export-option-label'},'Markdown')),
+                        React.createElement('div',{className:'export-option',onClick:function(){generateReport('txt');setShowExport(false);}},React.createElement('div',{className:'export-option-icon'},React.createElement(Icon,{name:'file',size:'xl'})),React.createElement('div',{className:'export-option-label'},'Plain Text'))
                     ),
                     React.createElement('div',{style:{fontSize:10,fontWeight:600,color:'var(--t3)',textTransform:'uppercase',marginBottom:8,marginTop:16}},'Raw Data'),
                     React.createElement('div',{className:'export-options'},
-                        React.createElement('div',{className:'export-option',onClick:function(){exportJSON();setShowExport(false);}},React.createElement('div',{className:'export-option-icon'},'⚙️'),React.createElement('div',{className:'export-option-label'},'Raw JSON'))
+                        React.createElement('div',{className:'export-option',onClick:function(){exportJSON();setShowExport(false);}},React.createElement('div',{className:'export-option-icon'},React.createElement(Icon,{name:'settings',size:'xl'})),React.createElement('div',{className:'export-option-label'},'Raw JSON'))
                     )
                 )
             )
@@ -5138,7 +5401,7 @@
         showExcludeModal&&React.createElement('div',{className:'modal-overlay',onClick:closeExcludeModal},
             React.createElement('div',{className:'modal',onClick:function(e){e.stopPropagation();},style:{maxWidth:540}},
                 React.createElement('div',{className:'modal-header'},
-                    React.createElement('div',{className:'modal-title'},'🚫 Exclude Patterns'),
+                    React.createElement('div',{className:'modal-title'},iconLabel('ban','Exclude Patterns','m')),
                     React.createElement('div',{style:{display:'flex',alignItems:'center',gap:12}},
                         React.createElement('div',{className:'exclude-count'},parseExcludePatterns(excludePatternDraft).length,' custom'),
                         React.createElement('button',{className:'modal-close',onClick:closeExcludeModal},'×')
@@ -5174,10 +5437,10 @@
         ),
         showPR&&React.createElement('div',{className:'modal-overlay',onClick:function(){setShowPR(false);}},
             React.createElement('div',{className:'modal pr-modal',onClick:function(e){e.stopPropagation();}},
-                React.createElement('div',{className:'modal-header'},React.createElement('div',{className:'modal-title'},'📊 PR Impact Analyzer'),React.createElement('button',{className:'modal-close',onClick:function(){setShowPR(false);}},'×')),
+                React.createElement('div',{className:'modal-header'},React.createElement('div',{className:'modal-title'},iconLabel('chart','PR Impact Analyzer','m')),React.createElement('button',{className:'modal-close',onClick:function(){setShowPR(false);}},'×')),
                 React.createElement('div',{className:'modal-body',style:{maxHeight:'75vh',overflowY:'auto'}},
                     React.createElement('div',{className:'form-group'},React.createElement('label',{className:'form-label'},'Pull Request URL'),React.createElement('input',{className:'form-input','aria-label':'Pull Request URL',placeholder:'https://github.com/owner/repo/pull/123',value:prUrl,onChange:function(e){setPrUrl(e.target.value);},onKeyDown:function(e){if(e.key==='Enter')analyzePR();}})),
-                    React.createElement('button',{className:'top-btn primary','aria-label':'Analyze Pull Request',onClick:analyzePR,style:{marginBottom:16,width:'100%'}},'🔍 Analyze PR Impact'),
+                    React.createElement('button',{className:'top-btn primary','aria-label':'Analyze Pull Request',onClick:analyzePR,style:{marginBottom:16,width:'100%'}},iconLabel('search','Analyze PR Impact')),
                     prData&&(function(){
                         var risk = calcPRRisk(prData, data);
                         var reviewers = findSuggestedReviewers(prData, data);
@@ -5207,14 +5470,14 @@
                                     )
                                 ),
                                 React.createElement('div',{className:'pr-impact-card'},
-                                    React.createElement('div',{className:'pr-impact-card-title'},'📈 Impact Metrics'),
+                                    React.createElement('div',{className:'pr-impact-card-title'},iconLabel('impact','Impact Metrics')),
                                     React.createElement('div',{className:'pr-metric-row'},React.createElement('span',{className:'pr-metric-label'},'Total Blast Radius'),React.createElement('span',{className:'pr-metric-value'},risk.totalBlast,' files')),
                                     React.createElement('div',{className:'pr-metric-row'},React.createElement('span',{className:'pr-metric-label'},'Files Changed'),React.createElement('span',{className:'pr-metric-value'},prData.files?prData.files.length:0)),
                                     React.createElement('div',{className:'pr-metric-row'},React.createElement('span',{className:'pr-metric-label'},'Lines Modified'),React.createElement('span',{className:'pr-metric-value'},(prData.additions||0)+(prData.deletions||0))),
                                     React.createElement('div',{className:'pr-metric-row'},React.createElement('span',{className:'pr-metric-label'},'Net Change'),React.createElement('span',{className:'pr-metric-value',style:{color:(prData.additions||0)-(prData.deletions||0)>=0?'var(--green)':'var(--red)'}},(prData.additions||0)-(prData.deletions||0)>0?'+':'',(prData.additions||0)-(prData.deletions||0)))
                                 ),
                                 reviewers.length > 0 && React.createElement('div',{className:'pr-impact-card'},
-                                    React.createElement('div',{className:'pr-impact-card-title'},'👥 Suggested Reviewers'),
+                                    React.createElement('div',{className:'pr-impact-card-title'},iconLabel('users','Suggested Reviewers')),
                                     reviewers.map(function(r,i) { return React.createElement('div',{key:i,className:'pr-reviewer-card'},
                                         React.createElement('div',{className:'pr-reviewer-avatar',style:{background:r.avatar}},r.name[0]),
                                         React.createElement('div',{className:'pr-reviewer-info'},
@@ -5224,10 +5487,10 @@
                                     ); })
                                 ),
                                 testImpact.length > 0 && React.createElement('div',{className:'pr-impact-card'},
-                                    React.createElement('div',{className:'pr-impact-card-title'},'🧪 Test Impact'),
+                                    React.createElement('div',{className:'pr-impact-card-title'},iconLabel('beaker','Test Impact')),
                                     React.createElement('div',{className:'pr-test-impact'},
                                         testImpact.slice(0,5).map(function(t,i) { return React.createElement('div',{key:i,className:'pr-test-file'},
-                                            React.createElement('span',{className:'pr-test-icon'},t.suggested?'💡':'✅'),
+                                            React.createElement('span',{className:'pr-test-icon'},React.createElement(Icon,{name:t.suggested?'spark':'security',size:'s'})),
                                             React.createElement('span',{style:{flex:1}},t.file),
                                             t.suggested && React.createElement('span',{className:'badge badge-info'},'suggested')
                                         ); })
@@ -5235,7 +5498,7 @@
                                 )
                             ),
                             chains.length > 0 && React.createElement('div',{className:'pr-impact-card',style:{marginTop:16}},
-                                React.createElement('div',{className:'pr-impact-card-title'},'🔗 Dependency Chains'),
+                                React.createElement('div',{className:'pr-impact-card-title'},iconLabel('link','Dependency Chains')),
                                 React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginBottom:12}},'Files that import modified files (downstream impact)'),
                                 chains.map(function(chain,i) { return React.createElement('div',{key:i,className:'pr-dependency-chain',style:{marginBottom:8}},
                                     chain.map(function(node,j) { return React.createElement(React.Fragment,{key:j},
@@ -5245,7 +5508,7 @@
                                 ); })
                             ),
                             risk.hotspots.length > 0 && React.createElement('div',{className:'pr-impact-card',style:{marginTop:16}},
-                                React.createElement('div',{className:'pr-impact-card-title'},'🔥 Hotspots'),
+                                React.createElement('div',{className:'pr-impact-card-title'},iconLabel('activity','Hotspots')),
                                 React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginBottom:12}},'Files with highest blast radius'),
                                 risk.hotspots.map(function(h,i) {
                                     var maxBlast = Math.max.apply(null, risk.hotspots.map(function(x){return x.blast;})) || 1;
@@ -5259,7 +5522,7 @@
                                 })
                             ),
                             React.createElement('div',{className:'pr-impact-card',style:{marginTop:16}},
-                                React.createElement('div',{className:'pr-impact-card-title'},'📁 Changed Files'),
+                                React.createElement('div',{className:'pr-impact-card-title'},iconLabel('folder','Changed Files')),
                                 React.createElement('div',{className:'pr-files-list'},
                                     prData.files&&prData.files.slice(0,20).map(function(f,i){
                                         var existing=data&&data.files.find(function(df){return df.path===f.filename;});
@@ -5274,7 +5537,7 @@
                                             React.createElement('div',{className:'pr-file-badges'},
                                                 f.additions>0&&React.createElement('span',{className:'pr-mini-badge',style:{background:'rgba(34,197,94,0.2)',color:'var(--green)'}},'+',f.additions),
                                                 f.deletions>0&&React.createElement('span',{className:'pr-mini-badge',style:{background:'rgba(255,95,95,0.2)',color:'var(--red)'}},'-',f.deletions),
-                                                blast&&React.createElement('span',{className:'pr-mini-badge',style:{background:blast.level==='low'?'rgba(34,197,94,0.2)':blast.level==='medium'?'rgba(255,159,67,0.2)':'rgba(255,95,95,0.2)',color:blast.level==='low'?'var(--green)':blast.level==='medium'?'var(--orange)':'var(--red)'}},blast.count,' ⚡')
+                                                blast&&React.createElement('span',{className:'pr-mini-badge',style:{background:blast.level==='low'?'rgba(34,197,94,0.2)':blast.level==='medium'?'rgba(255,159,67,0.2)':'rgba(255,95,95,0.2)',color:blast.level==='low'?'var(--green)':blast.level==='medium'?'var(--orange)':'var(--red)'}},React.createElement(Icon,{name:'impact',size:'s'}),' ',blast.count)
                                             )
                                         );
                                     }),
@@ -5290,10 +5553,10 @@
             React.createElement('div',{className:'modal',onClick:function(e){e.stopPropagation();},style:{maxWidth:600,maxHeight:'85vh',display:'flex',flexDirection:'column'}},
                 React.createElement('div',{className:'modal-header'},
                     React.createElement('div',{className:'modal-title'},
-                        drillDown.type==='issue'?(drillDown.data.type==='critical'?'🔴 ':'🟡 ')+drillDown.data.title:
-                        drillDown.type==='pattern'?drillDown.data.icon+' '+drillDown.data.name:
-                        drillDown.type==='security'?(drillDown.data.severity==='high'?'🔴':drillDown.data.severity==='medium'?'🟡':'🔵')+' '+drillDown.data.title:
-                        drillDown.type==='duplicate'?(drillDown.data.type==='code'?'📋 Similar Code':'📛 Duplicate Name')+': '+drillDown.data.name:
+                        drillDown.type==='issue'?React.createElement(React.Fragment,null,React.createElement(StatusDot,{color:drillDown.data.type==='critical'?'var(--red)':'var(--orange)'}),' ',drillDown.data.title):
+                        drillDown.type==='pattern'?iconLabel(drillDown.data.icon,drillDown.data.name,'m'):
+                        drillDown.type==='security'?React.createElement(React.Fragment,null,React.createElement(StatusDot,{color:getSeverityColor(drillDown.data.severity)}),' ',drillDown.data.title):
+                        drillDown.type==='duplicate'?iconLabel(drillDown.data.type==='code'?'copy':'note',(drillDown.data.type==='code'?'Similar Code':'Duplicate Name')+': '+drillDown.data.name,'m'):
                         'Details'
                     ),
                     React.createElement('button',{className:'modal-close',onClick:function(){setDrillDown(null);}},'×')
@@ -5309,7 +5572,7 @@
                             React.createElement('div',{style:{display:'flex',justifyContent:'space-between',alignItems:'center'}},
                                 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);}},'👁️ View'),
+                                    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 →')
                                 )
                             ),
@@ -5321,14 +5584,14 @@
                                 item.score&&React.createElement('span',{style:{fontSize:9,color:'var(--red)'}},'Complexity: ',item.score)
                             ),
                             item.code&&React.createElement('pre',{style:{fontSize:9,background:'var(--bg2)',padding:8,borderRadius:4,marginTop:8,overflow:'auto',maxHeight:100,fontFamily:'monospace'}},item.code),
-                            item.suggestion&&React.createElement('div',{style:{fontSize:10,color:'var(--acc)',marginTop:8,padding:'6px 8px',background:'var(--bg2)',borderRadius:4}},'💡 ',item.suggestion),
+                            item.suggestion&&React.createElement('div',{style:{fontSize:10,color:'var(--acc)',marginTop:8,padding:'6px 8px',background:'var(--bg2)',borderRadius:4}},React.createElement(Icon,{name:'spark',size:'s'}),' ',item.suggestion),
                             // For items with nested files (like duplicates)
                             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('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('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);}},'→')
                                     )
                                 );})
@@ -5351,7 +5614,7 @@
                         drillDown.data.files.map(function(f,j){return React.createElement('div',{key:j,style:{background:'var(--bg0)',padding:12,borderRadius:8,marginBottom:8,borderLeft:'3px solid var(--acc)'}},
                             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('button',{className:'view-file-btn',onClick:function(e){e.stopPropagation();openFilePreview(f.path);}},'👁️ View')
+                                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),
                             f.fns&&React.createElement('div',{style:{fontSize:10,color:'var(--orange)',marginTop:4}},f.fns,' functions'),
@@ -5368,7 +5631,7 @@
                         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('button',{className:'view-file-btn',onClick:function(e){e.stopPropagation();openFilePreview(drillDown.data.path,drillDown.data.line);}},'👁️ View')
+                                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),
                             drillDown.data.line&&React.createElement('div',{style:{fontSize:10,color:'var(--orange)',marginTop:4}},'Line ',drillDown.data.line)
@@ -5395,7 +5658,7 @@
                         drillDown.data.files.map(function(f,j){return React.createElement('div',{key:j,style:{background:'var(--bg0)',padding:12,borderRadius:8,marginBottom:8,borderLeft:'3px solid '+(drillDown.data.type==='code'?'var(--purple)':'var(--orange)')}},
                             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('button',{className:'view-file-btn',onClick:function(e){e.stopPropagation();openFilePreview(f.file,f.line);}},'👁️ View')
+                                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),
                             f.line&&React.createElement('div',{style:{fontSize:10,color:'var(--orange)',marginTop:4}},'Line ',f.line)
@@ -5411,26 +5674,29 @@
         ),
         showPrivacy&&React.createElement('div',{className:'modal-overlay',onClick:function(){setShowPrivacy(false);}},
             React.createElement('div',{className:'modal privacy-modal',onClick:function(e){e.stopPropagation();}},
-                React.createElement('div',{className:'modal-header'},React.createElement('div',{className:'modal-title'},'🔒 Privacy & Security'),React.createElement('button',{className:'modal-close',onClick:function(){setShowPrivacy(false);}},'×')),
+                React.createElement('div',{className:'modal-header'},React.createElement('div',{className:'modal-title'},iconLabel('lock','Privacy & Security','m')),React.createElement('button',{className:'modal-close',onClick:function(){setShowPrivacy(false);}},'×')),
                 React.createElement('div',{className:'modal-body'},
                     React.createElement('div',{className:'privacy-item'},
-                        React.createElement('div',{className:'privacy-icon'},'🌐'),
+                        React.createElement('div',{className:'privacy-icon'},React.createElement(Icon,{name:'globe',size:'l'})),
                         React.createElement('div',null,React.createElement('div',{className:'privacy-title'},'100% Browser-Based'),React.createElement('div',{className:'privacy-text'},'CodeFlow runs entirely in your browser. No backend servers, no data collection.'))
                     ),
                     React.createElement('div',{className:'privacy-item'},
-                        React.createElement('div',{className:'privacy-icon'},'🔑'),
+                        React.createElement('div',{className:'privacy-icon'},React.createElement(Icon,{name:'key',size:'l'})),
                         React.createElement('div',null,React.createElement('div',{className:'privacy-title'},'Your Token Stays Local'),React.createElement('div',{className:'privacy-text'},'Your GitHub token is stored only in your browser\'s memory. It\'s never saved, logged, or transmitted anywhere except directly to GitHub\'s API.'))
                     ),
                     React.createElement('div',{className:'privacy-item'},
-                        React.createElement('div',{className:'privacy-icon'},'📡'),
+                        React.createElement('div',{className:'privacy-icon'},React.createElement(Icon,{name:'share',size:'l'})),
                         React.createElement('div',null,React.createElement('div',{className:'privacy-title'},'Direct API Calls'),React.createElement('div',{className:'privacy-text'},'All GitHub API calls go directly from your browser to api.github.com. We have no proxy, no middleware, no way to intercept your data.'))
                     ),
                     React.createElement('div',{className:'privacy-item'},
-                        React.createElement('div',{className:'privacy-icon'},'🗑️'),
+                        React.createElement('div',{className:'privacy-icon'},React.createElement(Icon,{name:'ban',size:'l'})),
                         React.createElement('div',null,React.createElement('div',{className:'privacy-title'},'Nothing Persisted'),React.createElement('div',{className:'privacy-text'},'Close the tab and everything is gone. No cookies, no local storage, no tracking. Check the source code - it\'s all in one HTML file!'))
                     ),
                     React.createElement('div',{style:{marginTop:16,padding:12,background:'var(--accbg)',borderRadius:8,fontSize:10,color:'var(--t1)'}},
-                        '💡 Tip: Create a ',React.createElement('a',{href:'https://github.com/settings/tokens',target:'_blank',rel:'noopener',style:{color:'var(--acc)'}},'Personal Access Token'),' with only "public_repo" scope for extra peace of mind when analyzing public repositories.'
+                        React.createElement(Icon,{name:'spark',size:'s'}),
+                        ' Tip: Create a ',
+                        React.createElement('a',{href:'https://github.com/settings/tokens',target:'_blank',rel:'noopener',style:{color:'var(--acc)'}},'Personal Access Token'),
+                        ' with only "public_repo" scope for extra peace of mind when analyzing public repositories.'
                     )
                 ),
                 React.createElement('div',{className:'modal-footer'},
@@ -5440,7 +5706,7 @@
         ),
         showKeyModal&&React.createElement('div',{className:'modal-overlay',onClick:function(){setShowKeyModal(false);}},
             React.createElement('div',{className:'modal key-modal',onClick:function(e){e.stopPropagation();}},
-                React.createElement('div',{className:'modal-header'},React.createElement('div',{className:'modal-title'},'🔐 GitHub App Private Key'),React.createElement('button',{className:'modal-close',onClick:function(){setShowKeyModal(false);}},'×')),
+                React.createElement('div',{className:'modal-header'},React.createElement('div',{className:'modal-title'},iconLabel('key','GitHub App Private Key','m')),React.createElement('button',{className:'modal-close',onClick:function(){setShowKeyModal(false);}},'×')),
                 React.createElement('div',{className:'modal-body'},
                     React.createElement('div',{className:'key-info'},
                         'Paste the private key from your GitHub App. This key is stored only in memory and never leaves your browser.',
@@ -5464,7 +5730,7 @@
         ),
         showUnused&&data&&data.deadFunctions&&React.createElement('div',{className:'modal-overlay',onClick:function(){setShowUnused(false);}},
             React.createElement('div',{className:'modal',style:{maxWidth:650,maxHeight:'85vh'},onClick:function(e){e.stopPropagation();}},
-                React.createElement('div',{className:'modal-header'},React.createElement('div',{className:'modal-title'},'⚠️ Unused Functions'),React.createElement('button',{className:'modal-close',onClick:function(){setShowUnused(false);}},'×')),
+                React.createElement('div',{className:'modal-header'},React.createElement('div',{className:'modal-title'},iconLabel('warning','Unused Functions','m')),React.createElement('button',{className:'modal-close',onClick:function(){setShowUnused(false);}},'×')),
                 React.createElement('div',{className:'modal-body',style:{maxHeight:'70vh',overflowY:'auto'}},
                     React.createElement('div',{className:'unused-summary'},
                         React.createElement('div',{className:'unused-summary-item'},
@@ -5480,7 +5746,7 @@
                             React.createElement('div',{className:'unused-summary-label'},'Files Affected')
                         )
                     ),
-                    React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginBottom:12,padding:'8px 12px',background:'var(--bg0)',borderRadius:6,borderLeft:'3px solid var(--orange)'}},'These functions have zero calls — neither from other files nor internally within their own file. They are likely dead code that can be safely removed.'),
+                    React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginBottom:12,padding:'8px 12px',background:'var(--bg0)',borderRadius:6,borderLeft:'3px solid var(--orange)'}},'These functions have zero calls from other files or within their own file. They are likely dead code that can be safely removed.'),
                     data.deadFunctions.map(function(fn,i){
                         var isExpanded=expandedFns.has('dead-'+fn.name);
                         return React.createElement('div',{key:i,className:'unused-fn'},
@@ -5488,13 +5754,13 @@
                                 React.createElement('div',null,
                                     React.createElement('span',{className:'unused-fn-name'},fn.name,'()'),
                                     React.createElement('div',{className:'unused-fn-path'},
-                                        React.createElement('span',null,'📁 ',fn.folder||'root'),
+                                        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('div',{className:'unused-fn-meta'},
-                                    React.createElement('button',{className:'view-file-btn',onClick:function(e){e.stopPropagation();openFilePreview(fn.file,fn.line);},title:'View source'},'👁️'),
+                                    React.createElement('button',{className:'view-file-btn',onClick:function(e){e.stopPropagation();openFilePreview(fn.file,fn.line);},title:'View source'},React.createElement(Icon,{name:'eye',size:'s'})),
                                     React.createElement('span',{className:'unused-fn-lines'},fn.codeLines,' lines'),
                                     fn.line&&React.createElement('span',{className:'unused-fn-loc'},'L',fn.line),
                                     React.createElement('span',{style:{fontSize:10,color:'var(--t3)'}},isExpanded?'▼':'▶')
@@ -5518,7 +5784,7 @@
             React.createElement('div',{className:'file-preview-modal',onClick:function(e){e.stopPropagation();}},
                 React.createElement('div',{className:'file-preview-header'},
                     React.createElement('div',{className:'file-preview-title'},
-                        React.createElement('span',{className:'file-preview-icon'},Parser.isCode(filePreview.filename)?(Parser.isVBA(filePreview.filename)?'📊':Parser.isHTML(filePreview.filename)?'🌐':Parser.isCSS(filePreview.filename)?'🎨':Parser.isJSON(filePreview.filename)?'📋':'📝'):null),
+                        React.createElement('span',{className:'file-preview-icon'},React.createElement(Icon,{name:getFilePreviewIconName(filePreview.filename),size:'l'})),
                         React.createElement('span',{className:'file-preview-name'},filePreview.filename),
                         React.createElement('span',{className:'file-preview-path'},filePreview.path)
                     ),
@@ -5532,7 +5798,7 @@
                         React.createElement('div',{className:'spinner'}),
                         React.createElement('div',{className:'file-preview-loading-text'},'Loading file...')
                     ):filePreview.error?React.createElement('div',{className:'file-preview-error'},
-                        React.createElement('div',{className:'file-preview-error-icon'},'⚠️'),
+                        React.createElement(Icon,{name:'warning',size:'xxl',className:'file-preview-error-icon'}),
                         React.createElement('div',null,filePreview.error)
                     ):filePreview.content?React.createElement('pre',{className:'file-preview-code'},
                         highlightSyntax(filePreview.content,filePreview.filename).map(function(lineHtml,i){

From a7fe32211c8ba9f25506e9abf78b911fb0e35f3d Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 01:56:58 +0530
Subject: [PATCH 08/23] Update README.md

---
 README.md | 68 +++++++++++++++++++++++++++----------------------------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/README.md b/README.md
index 6a51979..4cdbf9c 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 <div align="center">
 
-# ⚡ CodeFlow
+# CodeFlow
 
 ### Visualize Your Codebase Architecture in Seconds
 
@@ -27,30 +27,30 @@ Ever opened a new codebase and felt completely lost? **CodeFlow** turns any GitH
 - **Works offline** — analyze local files without internet
 
 ```
-⚡ Paste URL / Select Files → See Architecture → Make Better Decisions
+Paste URL / Select Files -> See Architecture -> Make Better Decisions
 ```
 
 ---
 
 ## Features
 
-### 🗺️ **Interactive Dependency Graph**
+### Interactive Dependency Graph
 See how your files connect at a glance. Click any node to highlight its dependencies. Drag, zoom, and explore.
 
-### 💥 **Blast Radius Analysis**
+### 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.
 
-### 👥 **Code Ownership**
+### Code Ownership
 Know who owns what. See the top contributors for any file based on git history. Perfect for code reviews and knowing who to ask.
 
-### 🔐 **Security Scanner**
+### Security Scanner
 Automatic detection of:
 - Hardcoded secrets & API keys
 - SQL injection vulnerabilities
 - Dangerous `eval()` usage
 - Debug statements in production code
 
-### 🧩 **Pattern Detection**
+### Pattern Detection
 Automatically identifies:
 - Singleton patterns
 - Factory patterns
@@ -58,23 +58,23 @@ Automatically identifies:
 - React custom hooks
 - Anti-patterns (God Objects, high coupling)
 
-### 📊 **Health Score**
+### Health Score
 Get an instant A-F grade for your codebase based on:
 - Dead code percentage
 - Circular dependencies
 - Coupling metrics
 - Security issues
 
-### 🔥 **Activity Heatmap**
+### Activity Heatmap
 Color files by commit frequency to see which parts of your codebase are most actively developed.
 
-### 📋 **PR Impact Analysis**
+### PR Impact Analysis
 Paste a PR URL to see exactly which files it affects and calculate the blast radius of proposed changes.
 
-### 📝 **Markdown & Wiki-Link Graph**
+### Markdown & Wiki-Link Graph
 Point CodeFlow at an Obsidian vault or any markdown directory to see notes as a connected graph. Both `[[wiki-links]]` and `[text](./relative.md)` links become edges; each note is a `note`-layer node (distinct color) with a `dependencies[]` array in the JSON export.
 
-### 💻 **Local File Analysis**
+### Local File Analysis
 Analyze code directly from your computer without uploading to GitHub:
 - **Privacy First:** Your code never leaves your machine
 - **Offline Support:** Works without internet connection
@@ -89,11 +89,11 @@ Analyze code directly from your computer without uploading to GitHub:
 
 **Your code stays on your machine.** CodeFlow:
 
-- ✅ Runs 100% in the browser
-- ✅ Makes API calls directly from your browser to GitHub
-- ✅ Never stores your code or tokens
-- ✅ Works with private repos (just add your token locally)
-- ✅ No analytics or tracking
+- Runs 100% in the browser
+- Makes API calls directly from your browser to GitHub
+- Never stores your code or tokens
+- Works with private repos (just add your token locally)
+- No analytics or tracking
 
 Your GitHub token (if used) is only stored in your browser's memory and is cleared when you close the tab.
 
@@ -119,7 +119,7 @@ No build process. No dependencies. No npm install. **It's just one HTML file.**
 You can now analyze code directly from your local machine without uploading to GitHub:
 
 1. Open CodeFlow in your browser
-2. Click the "📁 Local Files" button
+2. Click the "Open Folder" button
 3. Select the folder or files you want to analyze
 4. CodeFlow will process them entirely in your browser
 
@@ -145,7 +145,7 @@ Or full URL: https://github.com/facebook/react
 3. Analyze your private repos
 
 ### Local Files
-Click the "📁 Local Files" button to analyze code from your computer:
+Click the "Open Folder" button to analyze code from your computer:
 - **Folder Analysis:** Select a folder to analyze all supported files recursively
 - **File Selection:** Choose specific files to analyze
 - **Drag & Drop:** Drag files or folders directly onto the page
@@ -154,9 +154,9 @@ Click the "📁 Local Files" button to analyze code from your computer:
 All processing happens locally in your browser - nothing is uploaded.
 
 ### Shareable Links
-After analysis, click 🔗 to copy a shareable link. Anyone can re-run the same analysis.
+After analysis, click the "Share" button to copy a shareable link. Anyone can re-run the same analysis.
 
-### 📤 **Export Reports**
+### Export Reports
 Export your analysis in multiple formats for further processing:
 
 - **JSON Report** - Complete analysis data including:
@@ -175,7 +175,7 @@ Export your analysis in multiple formats for further processing:
 - **SVG Image** - Export the dependency graph visualization
 - **Raw JSON** - Simplified data export
 
-Click the 📤 Export button in the top bar after analysis to access all export options.
+Click the "Export" button in the top bar after analysis to access all export options.
 
 ---
 
@@ -225,10 +225,10 @@ CodeFlow extracts functions and analyzes dependencies for:
 
 | Mode | Description |
 |------|-------------|
-| 📁 **Folder** | Color by directory structure |
-| 🏗️ **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 |
+| **Folder** | Color by directory structure |
+| **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 |
 
 ---
 
@@ -265,11 +265,11 @@ For teams and organizations, GitHub App provides better security and higher rate
 4. Paste the token in the Token field
 
 **Benefits of GitHub App:**
-- ✅ Fine-grained permissions control
-- ✅ Revocable access per installation
-- ✅ Higher rate limits (5,000 requests/hour)
-- ✅ Audit logging and security monitoring
-- ✅ No need to share personal credentials
+- Fine-grained permissions control
+- Revocable access per installation
+- Higher rate limits (5,000 requests/hour)
+- Audit logging and security monitoring
+- No need to share personal credentials
 
 For larger repositories or team usage, we recommend using GitHub App authentication.
 
@@ -337,7 +337,7 @@ node --test tests/
 > Yes. Your code is fetched directly from GitHub to your browser. Nothing is sent to any server we control. Check the source — it's one file!
 
 **Q: Can I use it offline?**
-> Yes! With the new Local Files feature, you can analyze code from your computer without any internet connection. Just click the "📁 Local Files" button and select your files. All processing happens entirely in your browser.
+> Yes. With the local file analysis feature, you can analyze code from your computer without any internet connection. Click the "Open Folder" button and select your files. All processing happens entirely in your browser.
 
 **Q: Why is analysis slow?**
 > We make individual API calls for each file to get content. With a token, you get higher rate limits and faster analysis.
@@ -349,7 +349,7 @@ node --test tests/
 
 ## Star History
 
-If you find CodeFlow useful, please ⭐ the repo!
+If you find CodeFlow useful, please star the repo.
 
 ---
 
@@ -361,7 +361,7 @@ MIT License — use it however you want.
 
 <div align="center">
 
-**Built with ⚡ by developers, for developers**
+**Built by developers, for developers**
 
 *Stop guessing. Start seeing.*
 

From 6196cf955357e4c00bc2ee3e1de88ce976e85a3e Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 02:12:56 +0530
Subject: [PATCH 09/23] Update index.html

---
 index.html | 47 ++++++++++++++++++++++++++++++++++-------------
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index d02cf2a..9a570a7 100644
--- a/index.html
+++ b/index.html
@@ -144,8 +144,9 @@
 .owner-avatar{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;color:white}
 .owner-name{flex:1;color:var(--t1)}
 .owner-percent{color:var(--t3)}
-.pattern-item{padding:12px;background:var(--bg0);border-radius:8px;margin-bottom:8px;border-left:3px solid var(--green)}
-.pattern-item.anti{border-color:var(--red)}
+.pattern-item{padding:12px;background:linear-gradient(180deg,rgba(34,197,94,0.08) 0%,var(--bg0) 55%);border-radius:8px;margin-bottom:8px;border:1px solid rgba(34,197,94,0.32);transition:transform 0.15s ease,border-color 0.15s ease,box-shadow 0.15s ease}
+.pattern-item:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,0.18)}
+.pattern-item.anti{background:linear-gradient(180deg,rgba(255,95,95,0.08) 0%,var(--bg0) 55%);border-color:rgba(255,95,95,0.34)}
 .pattern-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
 .pattern-icon{color:currentColor}
 .pattern-name{font-size:12px;color:var(--t0);font-weight:600}
@@ -156,11 +157,11 @@
 .pattern-metric{text-align:center}
 .pattern-metric-value{font-size:14px;font-weight:600;color:var(--acc)}
 .pattern-metric-label{font-size:8px;color:var(--t3);text-transform:uppercase}
-.security-item{padding:12px;background:var(--bg0);border-radius:8px;margin-bottom:8px;border-left:3px solid;cursor:pointer}
-.security-item:hover{background:var(--hover)}
-.security-item.high{border-color:var(--red)}
-.security-item.medium{border-color:var(--orange)}
-.security-item.low{border-color:var(--blue)}
+.security-item{padding:12px;background:var(--bg0);border-radius:8px;margin-bottom:8px;border:1px solid transparent;cursor:pointer;transition:transform 0.15s ease,border-color 0.15s ease,box-shadow 0.15s ease}
+.security-item:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,0.18)}
+.security-item.high{background:linear-gradient(180deg,rgba(255,95,95,0.08) 0%,var(--bg0) 55%);border-color:rgba(255,95,95,0.36)}
+.security-item.medium{background:linear-gradient(180deg,rgba(255,159,67,0.08) 0%,var(--bg0) 55%);border-color:rgba(255,159,67,0.34)}
+.security-item.low{background:linear-gradient(180deg,rgba(77,159,255,0.08) 0%,var(--bg0) 55%);border-color:rgba(77,159,255,0.34)}
 .security-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
 .security-title{font-size:11px;color:var(--t0);font-weight:500}
 .security-desc{font-size:10px;color:var(--t2);margin-bottom:6px;line-height:1.4}
@@ -3078,6 +3079,14 @@
     return'code';
 }
 
+function getAccentBlockStyle(borderColor,tint,extra){
+    return Object.assign({
+        background:'linear-gradient(180deg, '+tint+' 0%, var(--bg0) 55%)',
+        border:'1px solid '+borderColor,
+        borderRadius:8
+    },extra||{});
+}
+
 // Error boundary to prevent white screen crashes on large codebases
 class ErrorBoundary extends React.Component{
     constructor(props){super(props);this.state={hasError:false,error:null};}
@@ -5345,7 +5354,13 @@
                             (!data.suggestions||data.suggestions.length===0)?React.createElement('div',{style:{textAlign:'center',padding:20}},React.createElement(Icon,{name:'spark',size:'xxl',className:'empty-icon'}),React.createElement('div',{style:{color:'var(--green)',fontWeight:600}},'No issues to address!'),React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginTop:8}},'Your codebase looks healthy')):
                             React.createElement(React.Fragment,null,
                                 React.createElement('div',{style:{fontSize:9,color:'var(--t3)',marginBottom:12}},'Prioritized recommendations based on your codebase analysis'),
-                                data.suggestions.map(function(s,i){return React.createElement('div',{key:i,className:'suggestion-card',style:{background:'var(--bg0)',borderRadius:8,padding:12,marginBottom:10,borderLeft:'3px solid '+(s.priority==='critical'?'var(--red)':s.priority==='high'?'var(--orange)':'var(--acc)')}},
+                                data.suggestions.map(function(s,i){
+                                    var suggestionTone=s.priority==='critical'
+                                        ? getAccentBlockStyle('rgba(255,95,95,0.36)','rgba(255,95,95,0.08)',{padding:12,marginBottom:10})
+                                        : s.priority==='high'
+                                            ? getAccentBlockStyle('rgba(255,159,67,0.34)','rgba(255,159,67,0.08)',{padding:12,marginBottom:10})
+                                            : getAccentBlockStyle('rgba(0,255,157,0.28)','rgba(0,255,157,0.08)',{padding:12,marginBottom:10});
+                                    return React.createElement('div',{key:i,className:'suggestion-card',style:suggestionTone},
                                     React.createElement('div',{style:{display:'flex',alignItems:'center',gap:8,marginBottom:6}},
                                         React.createElement(Icon,{name:s.icon,size:'l'}),
                                         React.createElement('span',{style:{fontWeight:600,fontSize:11}},s.title),
@@ -5568,7 +5583,7 @@
                             React.createElement('div',{style:{fontSize:11,color:'var(--t2)'}},drillDown.data.desc)
                         ),
                         React.createElement('div',{style:{fontSize:12,fontWeight:600,marginBottom:12}},'All Affected Items (',drillDown.data.items?drillDown.data.items.length:0,')'),
-                        drillDown.data.items&&drillDown.data.items.map(function(item,j){return React.createElement('div',{key:j,style:{background:'var(--bg0)',padding:12,borderRadius:8,marginBottom:8,borderLeft:'3px solid var(--acc)'}},
+                        drillDown.data.items&&drillDown.data.items.map(function(item,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}},item.name),
                                 item.file&&React.createElement('div',{style:{display:'flex',gap:6}},
@@ -5611,7 +5626,7 @@
                             );})
                         ),
                         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:{background:'var(--bg0)',padding:12,borderRadius:8,marginBottom:8,borderLeft:'3px solid var(--acc)'}},
+                        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('button',{className:'view-file-btn',onClick:function(e){e.stopPropagation();openFilePreview(f.path);}},iconLabel('eye','View'))
@@ -5623,7 +5638,11 @@
                     ),
                     // Security drill-down
                     drillDown.type==='security'&&React.createElement(React.Fragment,null,
-                        React.createElement('div',{style:{background:drillDown.data.severity==='high'?'rgba(255,100,100,0.1)':drillDown.data.severity==='medium'?'rgba(255,180,100,0.1)':'rgba(100,180,255,0.1)',padding:12,borderRadius:8,marginBottom:16,borderLeft:'3px solid '+(drillDown.data.severity==='high'?'var(--red)':drillDown.data.severity==='medium'?'var(--orange)':'var(--blue)')}},
+                        React.createElement('div',{style:drillDown.data.severity==='high'
+                            ? getAccentBlockStyle('rgba(255,95,95,0.36)','rgba(255,95,95,0.1)',{padding:12,marginBottom:16})
+                            : drillDown.data.severity==='medium'
+                                ? getAccentBlockStyle('rgba(255,159,67,0.34)','rgba(255,180,100,0.1)',{padding:12,marginBottom:16})
+                                : getAccentBlockStyle('rgba(77,159,255,0.34)','rgba(100,180,255,0.1)',{padding:12,marginBottom:16})},
                             React.createElement('div',{style:{fontSize:11,fontWeight:600,marginBottom:4}},drillDown.data.severity.toUpperCase()+' Severity'),
                             React.createElement('div',{style:{fontSize:11,color:'var(--t2)'}},drillDown.data.desc)
                         ),
@@ -5655,7 +5674,9 @@
                             React.createElement('div',{style:{fontSize:11,color:'var(--t2)'}},drillDown.data.suggestion)
                         ),
                         React.createElement('div',{style:{fontSize:12,fontWeight:600,marginBottom:12}},'All Locations (',drillDown.data.files.length,')'),
-                        drillDown.data.files.map(function(f,j){return React.createElement('div',{key:j,style:{background:'var(--bg0)',padding:12,borderRadius:8,marginBottom:8,borderLeft:'3px solid '+(drillDown.data.type==='code'?'var(--purple)':'var(--orange)')}},
+                        drillDown.data.files.map(function(f,j){return React.createElement('div',{key:j,style:drillDown.data.type==='code'
+                            ? 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('button',{className:'view-file-btn',onClick:function(e){e.stopPropagation();openFilePreview(f.file,f.line);}},iconLabel('eye','View'))
@@ -5746,7 +5767,7 @@
                             React.createElement('div',{className:'unused-summary-label'},'Files Affected')
                         )
                     ),
-                    React.createElement('div',{style:{fontSize:10,color:'var(--t3)',marginBottom:12,padding:'8px 12px',background:'var(--bg0)',borderRadius:6,borderLeft:'3px solid var(--orange)'}},'These functions have zero calls from other files or within their own file. They are likely dead code that can be safely removed.'),
+                    React.createElement('div',{style:Object.assign(getAccentBlockStyle('rgba(255,159,67,0.34)','rgba(255,159,67,0.08)'),{fontSize:10,color:'var(--t3)',marginBottom:12,padding:'8px 12px',borderRadius:6})},'These functions have zero calls from other files or within their own file. They are likely dead code that can be safely removed.'),
                     data.deadFunctions.map(function(fn,i){
                         var isExpanded=expandedFns.has('dead-'+fn.name);
                         return React.createElement('div',{key:i,className:'unused-fn'},

From 831f778169b6f1b033af90c483fe672be73baf9f Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 02:24:36 +0530
Subject: [PATCH 10/23] Update index.html

---
 index.html | 283 ++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 214 insertions(+), 69 deletions(-)

diff --git a/index.html b/index.html
index 9a570a7..86d6aec 100644
--- a/index.html
+++ b/index.html
@@ -184,6 +184,12 @@
 .modal-close{background:none;border:none;color:var(--t3);font-size:18px;cursor:pointer}
 .modal-body{flex:1;overflow-y:auto;padding:16px}
 .modal-footer{padding:16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
+.confirm-modal{max-width:460px}
+.confirm-content{display:flex;align-items:flex-start;gap:12px}
+.confirm-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
+.confirm-copy{display:flex;flex-direction:column;gap:10px;min-width:0}
+.confirm-title{font-size:14px;font-weight:600;color:var(--t0)}
+.confirm-message{font-size:11px;line-height:1.6;color:var(--t2);white-space:pre-line}
 .form-group{margin-bottom:12px}
 .form-label{display:block;font-size:10px;color:var(--t2);margin-bottom:6px}
 .form-input{width:100%;padding:8px 10px;background:var(--bg0);border:1px solid var(--border);border-radius:6px;color:var(--t0);font-family:inherit;font-size:11px}
@@ -3079,12 +3085,38 @@
     return'code';
 }
 
-function getAccentBlockStyle(borderColor,tint,extra){
-    return Object.assign({
-        background:'linear-gradient(180deg, '+tint+' 0%, var(--bg0) 55%)',
-        border:'1px solid '+borderColor,
-        borderRadius:8
-    },extra||{});
+    function getAccentBlockStyle(borderColor,tint,extra){
+        return Object.assign({
+            background:'linear-gradient(180deg, '+tint+' 0%, var(--bg0) 55%)',
+            border:'1px solid '+borderColor,
+            borderRadius:8
+        },extra||{});
+    }
+
+function buildAppUrl(repo,autoRun){
+    var url=new URL(window.location.href);
+    url.search='';
+    if(repo)url.searchParams.set('repo',repo);
+    if(autoRun&&repo)url.searchParams.set('run','1');
+    return url.toString();
+}
+
+function getDialogTone(tone){
+    if(tone==='danger')return{
+        color:'var(--red)',
+        borderColor:'rgba(255,95,95,0.34)',
+        background:'rgba(255,95,95,0.12)'
+    };
+    if(tone==='info')return{
+        color:'var(--blue)',
+        borderColor:'rgba(77,159,255,0.34)',
+        background:'rgba(77,159,255,0.12)'
+    };
+    return{
+        color:'var(--orange)',
+        borderColor:'rgba(255,159,67,0.34)',
+        background:'rgba(255,159,67,0.12)'
+    };
 }
 
 // Error boundary to prevent white screen crashes on large codebases
@@ -3183,6 +3215,7 @@
     var _ai=useState(''),excludePatternInput=_ai[0],setExcludePatternInput=_ai[1];
     var _aj=useState(''),excludePatternDraft=_aj[0],setExcludePatternDraft=_aj[1];
     var _ak=useState(false),launchFolderAfterExcludeSave=_ak[0],setLaunchFolderAfterExcludeSave=_ak[1];
+    var _al=useState(null),confirmDialog=_al[0],setConfirmDialog=_al[1];
     var svgRef=useRef(null);
     var filePreviewRef=useRef(null);
     var treemapRef=useRef(null);
@@ -3196,17 +3229,42 @@
     var nodesRef=useRef(null);
     var linksRef=useRef(null);
     var selectFileRef=useRef(null);
+    var confirmResolverRef=useRef(null);
     var activeExcludePatterns=useMemo(function(){return compileExcludePatterns(excludePatternInput);},[excludePatternInput]);
     var customExcludeCount=activeExcludePatterns.length;
 
     useEffect(function(){document.body.className=theme==='light'?'light':'';},[theme]);
 
+    useEffect(function(){
+        return function(){
+            if(confirmResolverRef.current){
+                confirmResolverRef.current(false);
+                confirmResolverRef.current=null;
+            }
+        };
+    },[]);
+
+    useEffect(function(){
+        if(!confirmDialog)return;
+        function onKeyDown(e){
+            if(e.key==='Escape'){
+                e.preventDefault();
+                closeConfirmDialog(false);
+            }
+        }
+        document.addEventListener('keydown',onKeyDown);
+        return function(){document.removeEventListener('keydown',onKeyDown);};
+    },[confirmDialog]);
+
     useEffect(function(){
         var params=new URLSearchParams(window.location.search);
         var repo=params.get('repo');
+        var shouldAutoRun=params.get('run')==='1';
         if(repo&&repo.length<200&&!repo.includes('{')&&/^[a-zA-Z0-9_.\/-]+$/.test(repo)){
             setRepoUrl(repo);
-            setTimeout(function(){var btn=document.getElementById('analyze-btn');if(btn)btn.click();},500);
+            if(shouldAutoRun){
+                setTimeout(function(){var btn=document.getElementById('analyze-btn');if(btn)btn.click();},500);
+            }
         }
     },[]);
 
@@ -3255,6 +3313,32 @@
         }
     }
 
+    function closeConfirmDialog(result){
+        setConfirmDialog(null);
+        if(confirmResolverRef.current){
+            var resolve=confirmResolverRef.current;
+            confirmResolverRef.current=null;
+            resolve(!!result);
+        }
+    }
+
+    function requestConfirm(options){
+        return new Promise(function(resolve){
+            if(confirmResolverRef.current){
+                confirmResolverRef.current(false);
+            }
+            confirmResolverRef.current=resolve;
+            setConfirmDialog(Object.assign({
+                tone:'warning',
+                icon:'warning',
+                title:'Please confirm',
+                message:'',
+                confirmLabel:'Continue',
+                cancelLabel:'Cancel'
+            },options||{}));
+        });
+    }
+
     function analyze(){
         var p=parseUrl(repoUrl);
         if(!p){setError('Invalid URL. Use format: owner/repo');return;}
@@ -3310,18 +3394,27 @@
             // Warn if rate limit is very low and no authentication
             if(!hasAuth&&rl.remaining<estimatedRequests){
                 var resetTime=new Date(rl.reset*1000).toLocaleTimeString();
-                var proceed=window.confirm(
-                    'GitHub API Rate Limit Low\n\n'+
-                    'Remaining requests: '+rl.remaining+'/'+rl.limit+'\n'+
-                    'Resets at: '+resetTime+'\n\n'+
-                    'Without authentication, you only get 60 requests/hour.\n'+
-                    'Adding a token or GitHub App gives you 5000 requests/hour.\n\n'+
-                    'Authentication options:\n'+
-                    '• Token (PAT): GitHub Settings → Developer Settings → Personal access tokens\n'+
-                    '• GitHub App: Use App ID + Private Key for organization access\n\n'+
-                    'Continue anyway with '+rl.remaining+' requests?'
-                );
-                if(!proceed){setLoading(false);return Promise.reject('cancelled');}
+                return requestConfirm({
+                    tone:'warning',
+                    icon:'warning',
+                    title:'GitHub API rate limit is low',
+                    message:
+                        'Remaining requests: '+rl.remaining+'/'+rl.limit+'\n'+
+                        'Resets at: '+resetTime+'\n\n'+
+                        'Without authentication, you only get 60 requests per hour.\n'+
+                        'Adding a token or GitHub App raises that to 5,000 requests per hour.\n\n'+
+                        'Token (PAT): GitHub Settings -> Developer Settings -> Personal access tokens\n'+
+                        'GitHub App: use App ID + Private Key for organization access\n\n'+
+                        'Continue anyway with the remaining requests?',
+                    confirmLabel:'Continue anyway'
+                }).then(function(proceed){
+                    if(!proceed){
+                        setLoading(false);
+                        return Promise.reject('cancelled');
+                    }
+                    setProgress('Scanning repository...');
+                    return GitHub.scan(p.owner,p.repo,setProgress,currentExcludePatterns);
+                });
             }
 
             setProgress('Scanning repository...');
@@ -3330,54 +3423,52 @@
             if(!files)return;// Cancelled
             if(!files.length)throw new Error(currentExcludePatterns.length?'No code files found after applying exclude patterns':'No code files found');
             var SOFT_LIMIT=300,HARD_LIMIT=750;
-            if(files.length>SOFT_LIMIT&&files.length<=HARD_LIMIT){
-                var proceed=window.confirm('This repository has '+files.length+' files.\n\nAnalyzing large repos may be slow and could hit GitHub API rate limits.\n\nTip: Add a GitHub token for higher rate limits (5000/hour vs 60/hour).\n\nProceed with all '+files.length+' files?');
-                if(!proceed){setLoading(false);return;}
-            }else if(files.length>HARD_LIMIT){
-                showNotification('Found '+files.length+' files. Limiting to '+HARD_LIMIT+' for performance.','warning');
-            }
-            var max=Math.min(files.length,HARD_LIMIT);
-            var analyzed=[];
-            var allFns=[];
-
-            function processFile(i){
-                if(i>=max){finishAnalysis();return;}
-                var f=files[i];
-                setProgress('Analyzing '+(i+1)+'/'+max+': '+f.name);
-                var isCodeFile=f.isCode!==false&&Parser.isCode(f.name);
-                if(isCodeFile){
-                    Promise.all([
-                        GitHub.getFile(p.owner,p.repo,f.path),
-                        GitHub.getCommits(p.owner,p.repo,f.path,10).catch(function(){return[];})
-                    ]).then(function(results){
-                        var content=results[0];
-                        var commits=results[1];
-                        if(content){
-                            var layer=Parser.detectLayer(f.path);
-                            var actualIsCode=!Parser.isScriptContainer(f.path)||Parser.hasEmbeddedCode(content,f.path);
-                            var fns=actualIsCode?Parser.extract(content,f.path):[];
-                            analyzed.push({path:f.path,name:f.name,folder:f.folder,content:content,functions:fns,lines:content.split('\n').length,layer:layer,churn:Array.isArray(commits)?commits.length:0,isCode:actualIsCode});
-                            if(actualIsCode){
-                                fns.forEach(function(fn){allFns.push(Object.assign({},fn,{folder:f.folder,layer:layer}));});
+            function beginRepoAnalysis(){
+                if(files.length>HARD_LIMIT){
+                    showNotification('Found '+files.length+' files. Limiting to '+HARD_LIMIT+' for performance.','warning');
+                }
+                var max=Math.min(files.length,HARD_LIMIT);
+                var analyzed=[];
+                var allFns=[];
+
+                function processFile(i){
+                    if(i>=max){finishAnalysis();return;}
+                    var f=files[i];
+                    setProgress('Analyzing '+(i+1)+'/'+max+': '+f.name);
+                    var isCodeFile=f.isCode!==false&&Parser.isCode(f.name);
+                    if(isCodeFile){
+                        Promise.all([
+                            GitHub.getFile(p.owner,p.repo,f.path),
+                            GitHub.getCommits(p.owner,p.repo,f.path,10).catch(function(){return[];})
+                        ]).then(function(results){
+                            var content=results[0];
+                            var commits=results[1];
+                            if(content){
+                                var layer=Parser.detectLayer(f.path);
+                                var actualIsCode=!Parser.isScriptContainer(f.path)||Parser.hasEmbeddedCode(content,f.path);
+                                var fns=actualIsCode?Parser.extract(content,f.path):[];
+                                analyzed.push({path:f.path,name:f.name,folder:f.folder,content:content,functions:fns,lines:content.split('\n').length,layer:layer,churn:Array.isArray(commits)?commits.length:0,isCode:actualIsCode});
+                                if(actualIsCode){
+                                    fns.forEach(function(fn){allFns.push(Object.assign({},fn,{folder:f.folder,layer:layer}));});
+                                }
                             }
-                        }
-                        processFile(i+1);
-                    }).catch(function(){processFile(i+1);});
-                }else{
-                    GitHub.getFile(p.owner,p.repo,f.path).then(function(content){
-                        var layer=Parser.detectLayer(f.path);
-                        var lines=content?content.split('\n').length:0;
-                        analyzed.push({path:f.path,name:f.name,folder:f.folder,content:content||'',functions:[],lines:lines,layer:layer,churn:0,isCode:false});
-                        processFile(i+1);
-                    }).catch(function(){
-                        analyzed.push({path:f.path,name:f.name,folder:f.folder,content:'',functions:[],lines:0,layer:Parser.detectLayer(f.path),churn:0,isCode:false});
-                        processFile(i+1);
-                    });
+                            processFile(i+1);
+                        }).catch(function(){processFile(i+1);});
+                    }else{
+                        GitHub.getFile(p.owner,p.repo,f.path).then(function(content){
+                            var layer=Parser.detectLayer(f.path);
+                            var lines=content?content.split('\n').length:0;
+                            analyzed.push({path:f.path,name:f.name,folder:f.folder,content:content||'',functions:[],lines:lines,layer:layer,churn:0,isCode:false});
+                            processFile(i+1);
+                        }).catch(function(){
+                            analyzed.push({path:f.path,name:f.name,folder:f.folder,content:'',functions:[],lines:0,layer:Parser.detectLayer(f.path),churn:0,isCode:false});
+                            processFile(i+1);
+                        });
+                    }
                 }
-            }
 
-            async function finishAnalysis(){
-                try{
+                async function finishAnalysis(){
+                    try{
                 // Initialize tree-sitter Python parser (async WASM load, runs in parallel)
                 Parser.initTreeSitter();
                 // Phase 1: Build function stats index
@@ -3553,16 +3644,38 @@
                 dataObj.suggestions=Parser.generateSuggestions(dataObj);
                 setData(dataObj);
                 setExpandedPaths(new Set(['']));
-                var newUrl=window.location.pathname+'?repo='+encodeURIComponent(p.owner+'/'+p.repo);
-                window.history.replaceState({},'',newUrl);
+                window.history.replaceState({},'',buildAppUrl(p.owner+'/'+p.repo,false));
                 setLoading(false);
                 }catch(err){
                     setError('Analysis failed: '+(err.message||err)+'. Try a smaller repository.');
                     setLoading(false);
                 }
+                }
+
+                processFile(0);
+                return null;
             }
 
-            processFile(0);
+            if(files.length>SOFT_LIMIT&&files.length<=HARD_LIMIT){
+                return requestConfirm({
+                    tone:'warning',
+                    icon:'warning',
+                    title:'Analyze a large repository?',
+                    message:
+                        'This repository has '+files.length+' files.\n\n'+
+                        'Analyzing larger repositories can take longer and may hit GitHub API rate limits.\n\n'+
+                        'Tip: add a token or GitHub App for higher limits.',
+                    confirmLabel:'Analyze repository'
+                }).then(function(proceed){
+                    if(!proceed){
+                        setLoading(false);
+                        return Promise.reject('cancelled');
+                    }
+                    return beginRepoAnalysis();
+                });
+            }
+
+            return beginRepoAnalysis();
         }).catch(function(e){if(e!=='cancelled'){setError(e.message||e);setLoading(false);}});
     }
 
@@ -3626,7 +3739,16 @@
         await readDirectory(dirHandle,'');
         
         if(files.length>SOFT_LIMIT&&files.length<=HARD_LIMIT){
-            var proceed=window.confirm('This folder has '+files.length+' files.\n\nAnalyzing large folders may be slow.\n\nProceed with all '+files.length+' files?');
+            var proceed=await requestConfirm({
+                tone:'warning',
+                icon:'folder',
+                title:'Analyze a large folder?',
+                message:
+                    'This folder has '+files.length+' files.\n\n'+
+                    'Analyzing larger folders can take longer.\n\n'+
+                    'Continue with all '+files.length+' files?',
+                confirmLabel:'Analyze folder'
+            });
             if(!proceed){setLoading(false);return;}
         }else if(files.length>HARD_LIMIT){
             showNotification('Found '+files.length+' files. Limiting to '+HARD_LIMIT+' for performance.','warning');
@@ -4904,7 +5026,8 @@
             showNotification('Share links are not available for local folders','warning');
             return;
         }
-        navigator.clipboard.writeText(window.location.href).then(function(){showNotification('Link copied to clipboard!');}).catch(function(){showNotification('Failed to copy link','error');});
+        var shareUrl=buildAppUrl(repoInfo?repoInfo.owner+'/'+repoInfo.repo:repoUrl,true);
+        navigator.clipboard.writeText(shareUrl).then(function(){showNotification('Link copied to clipboard!');}).catch(function(){showNotification('Failed to copy link','error');});
     }
     function analyzePR(){if(!prUrl||!repoInfo)return;var m=prUrl.match(/\/pull\/(\d+)/);if(!m){showNotification('Invalid PR URL','error');return;}GitHub.getPR(repoInfo.owner,repoInfo.repo,m[1]).then(function(pr){if(pr)setPrData(pr);else showNotification('Could not load PR','error');});}
     function resetAnalysis(){setData(null);setSelected(null);setBlastRadius(null);setOwnership(null);setRepoInfo(null);setRepoUrl('');setPrData(null);setFolderFilter(null);setLocalDirHandle(null);window.history.replaceState({},'',window.location.pathname);}
@@ -5800,6 +5923,28 @@
                 )
             )
         ),
+        confirmDialog&&(function(){
+            var tone=getDialogTone(confirmDialog.tone);
+            return React.createElement('div',{className:'modal-overlay',style:{zIndex:1200},onClick:function(){closeConfirmDialog(false);}},
+                React.createElement('div',{className:'modal confirm-modal',onClick:function(e){e.stopPropagation();}},
+                    React.createElement('div',{className:'modal-body'},
+                        React.createElement('div',{className:'confirm-content'},
+                            React.createElement('div',{className:'confirm-icon',style:{color:tone.color,background:tone.background,border:'1px solid '+tone.borderColor}},
+                                React.createElement(Icon,{name:confirmDialog.icon||'warning',size:'l'})
+                            ),
+                            React.createElement('div',{className:'confirm-copy'},
+                                React.createElement('div',{className:'confirm-title'},confirmDialog.title),
+                                React.createElement('div',{className:'confirm-message'},confirmDialog.message)
+                            )
+                        )
+                    ),
+                    React.createElement('div',{className:'modal-footer'},
+                        React.createElement('button',{className:'top-btn',onClick:function(){closeConfirmDialog(false);}},confirmDialog.cancelLabel||'Cancel'),
+                        React.createElement('button',{className:'top-btn primary',style:{background:tone.color,borderColor:tone.color,color:'var(--bg0)'},onClick:function(){closeConfirmDialog(true);}},confirmDialog.confirmLabel||'Continue')
+                    )
+                )
+            );
+        })(),
         toast&&React.createElement('div',{className:'toast '+(toast.type||'success'),'role':'alert'},toast.msg),
         filePreview&&React.createElement('div',{className:'file-preview-overlay',onClick:function(){setFilePreview(null);}},
             React.createElement('div',{className:'file-preview-modal',onClick:function(e){e.stopPropagation();}},

From 97140185136961ea0ef8ac8025602a8c83094924 Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 02:36:08 +0530
Subject: [PATCH 11/23] Update index.html

---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 86d6aec..4bc12c1 100644
--- a/index.html
+++ b/index.html
@@ -1330,13 +1330,13 @@
         var scriptContent=content;
         var scriptOffset=0;
         if(isVue||isSvelte){
-            var scriptMatch=content.match(/<script[^>]*>([\s\S]*?)<\/script>/i);
+            var scriptMatch=content.match(/<script\b[^>]*>([\s\S]*?)<\/script\b[^>]*>/i);
             if(scriptMatch){
                 scriptContent=scriptMatch[1];
                 scriptOffset=content.substring(0,content.indexOf(scriptMatch[1])).split('\n').length-1;
                 isJS=true;  // Treat extracted script as JS
                 // Check if it's TypeScript
-                if(content.match(/<script[^>]*lang=["']ts["'][^>]*>/i)){
+                if(content.match(/<script\b[^>]*\blang=["']ts["'][^>]*>/i)){
                     isTS=true;
                     isJS=false;
                 }

From 764f710715c4d11d44d8e06ab5b5b2b69dec5061 Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 02:39:20 +0530
Subject: [PATCH 12/23] Update index.html

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 4bc12c1..c383104 100644
--- a/index.html
+++ b/index.html
@@ -663,7 +663,7 @@
     getEmbeddedCodeBlocks:function(content,filename,options){
         if(!content||!Parser.isScriptContainer(filename))return[];
         var blocks=[];
-        var scriptRegex=/<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
+        var scriptRegex=/<script\b([^>]*)>([\s\S]*?)<\/script\b[^>]*>/gi;
         var match;
         var scriptRanges=[];
         while((match=scriptRegex.exec(content))){

From ab378d1422e5fc45dfe5d0e032915641f39ce79e Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 02:41:38 +0530
Subject: [PATCH 13/23] Update index.html

---
 index.html | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index c383104..420acb2 100644
--- a/index.html
+++ b/index.html
@@ -1753,7 +1753,12 @@
             // Variable types: let x: Type = -> let x =
             line=line.replace(/(let|const|var)\s+(\w+)\s*:\s*[A-Za-z_$<>[\]|&\s]+\s*=/g,'$1 $2 =');
             // Generic type params: func<T>( -> func(
-            line=line.replace(/<[A-Za-z_$,\s]+>(?=\s*\()/g,'');
+            // Apply repeatedly to handle nested or multiple occurrences
+            var prevLine;
+            do{
+                prevLine=line;
+                line=line.replace(/<[A-Za-z_$,\s]+>(?=\s*\()/g,'');
+            }while(line!==prevLine);
             // As casts: x as Type -> x
             line=line.replace(/\s+as\s+[A-Za-z_$<>[\]|&\s]+(?=[,;\)\]\}]|$)/g,'');
             // Non-null assertions: x! -> x

From c9f0c7fb7235f136b36af451b576eb26bb1579d0 Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 02:55:52 +0530
Subject: [PATCH 14/23] Update index.html

---
 index.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 420acb2..21c3573 100644
--- a/index.html
+++ b/index.html
@@ -16,14 +16,14 @@
     <meta name="twitter:title" content="CodeFlow — Visualize Your Codebase Architecture">
     <meta name="twitter:description" content="Turn any GitHub repo into an interactive architecture map in seconds. Zero setup, privacy-first.">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ff9d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2 4 14h6l-1 8 9-12h-6l1-8z'/></svg>">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-sankey/0.12.3/d3-sankey.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/acorn/8.11.3/acorn.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/web-tree-sitter@0.25.10/tree-sitter.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrsasign/11.1.0/jsrsasign-all-min.js"></script>
+    <script src="vendor/react.production.min.js"></script>
+    <script src="vendor/react-dom.production.min.js"></script>
+    <script src="vendor/babel.min.js"></script>
+    <script src="vendor/d3.min.js"></script>
+    <script src="vendor/d3-sankey.min.js"></script>
+    <script src="vendor/acorn.min.js"></script>
+    <script src="vendor/tree-sitter.js"></script>
+    <script src="vendor/jsrsasign-all-min.js"></script>
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
     <style>
 :root{--bg0:#0a0a0c;--bg1:#0f0f12;--bg2:#161619;--bg3:#1c1c21;--bg4:#252529;--hover:#2a2a30;--border:#2d2d35;--border2:#222228;--t0:#f0f0f2;--t1:#c8c8cd;--t2:#8b8b95;--t3:#5c5c66;--acc:#00ff9d;--acc2:#00cc7d;--accbg:rgba(0,255,157,0.08);--blue:#4d9fff;--purple:#a78bfa;--orange:#ff9f43;--red:#ff5f5f;--cyan:#22d3ee;--pink:#ec4899;--green:#22c55e}
@@ -571,12 +571,12 @@
             try{
                 await TreeSitter.init({
                     locateFile:function(scriptName){
-                        return 'https://cdn.jsdelivr.net/npm/web-tree-sitter@0.25.10/'+scriptName;
+                        return 'vendor/'+scriptName;
                     }
                 });
                 var parser=new TreeSitter();
                 var Python=await TreeSitter.Language.load(
-                    'https://cdn.jsdelivr.net/npm/tree-sitter-wasms@0.1.13/out/tree-sitter-python.wasm'
+                    'vendor/tree-sitter-python.wasm'
                 );
                 parser.setLanguage(Python);
                 this._tsParser=parser;

From 16a515a9a8319ba061ac645cd5f42923634fbc9b Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 02:56:13 +0530
Subject: [PATCH 15/23] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 4cdbf9c..8f24a80 100644
--- a/README.md
+++ b/README.md
@@ -113,7 +113,7 @@ git clone https://github.com/braedonsaunders/codeflow.git
 open index.html
 ```
 
-No build process. No dependencies. No npm install. **It's just one HTML file.**
+No build process. No npm install. The app is served from `index.html` with vendored browser runtime assets in `vendor/`.
 
 ### Option 3: Analyze Local Files
 You can now analyze code directly from your local machine without uploading to GitHub:
@@ -295,7 +295,7 @@ For larger repositories or team usage, we recommend using GitHub App authenticat
 └─────────────────────────────────────────────────┘
 ```
 
-**Zero dependencies to install.** Everything runs from CDNs:
+**Zero build dependencies to install.** Runtime libraries are vendored in this repo:
 - React 18
 - D3.js 7
 - Babel (for JSX)

From 14282d05415bd9337ae4696d249f233fc15aeb87 Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 03:05:58 +0530
Subject: [PATCH 16/23] Update index.html

---
 index.html | 180 +++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 135 insertions(+), 45 deletions(-)

diff --git a/index.html b/index.html
index 21c3573..182243d 100644
--- a/index.html
+++ b/index.html
@@ -11,10 +11,11 @@
     <meta property="og:title" content="CodeFlow — Visualize Your Codebase Architecture">
     <meta property="og:description" content="Turn any GitHub repo into an interactive architecture map in seconds. Zero setup, privacy-first, runs in your browser.">
     <meta property="og:type" content="website">
-    <meta property="og:image" content="https://via.placeholder.com/1200x630?text=CodeFlow">
+    <meta property="og:image" content="codeflow-social.png">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="CodeFlow — Visualize Your Codebase Architecture">
     <meta name="twitter:description" content="Turn any GitHub repo into an interactive architecture map in seconds. Zero setup, privacy-first.">
+    <meta name="twitter:image" content="codeflow-social.png">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ff9d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2 4 14h6l-1 8 9-12h-6l1-8z'/></svg>">
     <script src="vendor/react.production.min.js"></script>
     <script src="vendor/react-dom.production.min.js"></script>
@@ -2468,6 +2469,60 @@
     }
 };
 
+function escapeHtml(value){
+    return String(value==null?'':value)
+        .replace(/&/g,'&amp;')
+        .replace(/</g,'&lt;')
+        .replace(/>/g,'&gt;')
+        .replace(/"/g,'&quot;')
+        .replace(/'/g,'&#39;');
+}
+
+function renderTooltipHtml(title,stats){
+    return '<div class="treemap-tooltip-title">'+escapeHtml(title)+'</div>'+stats.map(function(stat){
+        return '<div class="treemap-tooltip-stat"><span>'+escapeHtml(stat.label)+':</span><span>'+escapeHtml(stat.value)+'</span></div>';
+    }).join('');
+}
+
+function buildGitHubApiUrl(segments,query){
+    var path=segments.filter(function(segment){return segment!==undefined&&segment!==null&&segment!=='';}).map(function(segment){
+        return encodeURIComponent(String(segment));
+    }).join('/');
+    var url='https://api.github.com/'+path;
+    if(!query)return url;
+    var params=new URLSearchParams();
+    Object.keys(query).forEach(function(key){
+        var value=query[key];
+        if(value===undefined||value===null||value==='')return;
+        params.set(key,String(value));
+    });
+    var queryString=params.toString();
+    return queryString?url+'?'+queryString:url;
+}
+
+function buildRepoApiUrl(owner,repo,segments,query){
+    return buildGitHubApiUrl(['repos',owner,repo].concat(segments||[]),query);
+}
+
+function splitRepoPath(path){
+    return (path||'').split('/').filter(Boolean);
+}
+
+function decodeBase64Utf8(content){
+    var normalized=String(content||'').replace(/\s+/g,'');
+    if(!normalized)return null;
+    var binary=atob(normalized);
+    var bytes=new Uint8Array(binary.length);
+    for(var i=0;i<binary.length;i++)bytes[i]=binary.charCodeAt(i);
+    try{
+        return new TextDecoder('utf-8').decode(bytes);
+    }catch(e){
+        var text='';
+        for(var j=0;j<bytes.length;j++)text+=String.fromCharCode(bytes[j]);
+        return text;
+    }
+}
+
 var GitHub={
     token:null,
     appId:null,
@@ -2475,6 +2530,7 @@
     installationToken:null,
     installationTokenExpiry:null,
     rateLimit:{remaining:60,limit:60,reset:0},
+    requestTimeoutMs:15000,
     
     // Generate JWT for GitHub App authentication
     generateJWT:function(){
@@ -2497,19 +2553,15 @@
         }
     },
     
-    // Get installations for the GitHub App
-    getInstallations:function(){
+    getRepoInstallation:function(owner,repo){
         var jwt=this.generateJWT();
         if(!jwt)return Promise.reject(new Error('Failed to generate JWT'));
-        return fetch('https://api.github.com/app/installations',{
+        return this.request(buildGitHubApiUrl(['repos',owner,repo,'installation']),{
             headers:{
                 'Accept':'application/vnd.github.v3+json',
                 'Authorization':'Bearer '+jwt
             }
-        }).then(function(r){
-            if(!r.ok)throw new Error(r.status===401?'Invalid App credentials':'Error '+r.status);
-            return r.json();
-        });
+        },{401:'Invalid App credentials',404:'This GitHub App is not installed on the selected repository'});
     },
     
     // Get installation access token
@@ -2517,16 +2569,13 @@
         var self=this;
         var jwt=this.generateJWT();
         if(!jwt)return Promise.reject(new Error('Failed to generate JWT'));
-        return fetch('https://api.github.com/app/installations/'+installationId+'/access_tokens',{
+        return this.request(buildGitHubApiUrl(['app','installations',String(installationId),'access_tokens']),{
             method:'POST',
             headers:{
                 'Accept':'application/vnd.github.v3+json',
                 'Authorization':'Bearer '+jwt
             }
-        }).then(function(r){
-            if(!r.ok)throw new Error(r.status===401?'Invalid App credentials':r.status===404?'Installation not found':'Error '+r.status);
-            return r.json();
-        }).then(function(data){
+        },{401:'Invalid App credentials',404:'Installation not found'}).then(function(data){
             self.installationToken=data.token;
             self.installationTokenExpiry=new Date(data.expires_at).getTime();
             self.token=data.token;// Use installation token for API calls
@@ -2542,26 +2591,22 @@
             this.token=this.installationToken;
             return Promise.resolve(this.installationToken);
         }
-        // Get installations and find the one for this repo
-        return this.getInstallations().then(function(installations){
-            if(!installations||!installations.length){
-                throw new Error('No installations found for this GitHub App');
+        return this.getRepoInstallation(owner,repo).then(function(installation){
+            if(!installation||!installation.id){
+                throw new Error('No installation found for this repository');
             }
-            // Try to find installation that has access to this repo
-            // For simplicity, we'll use the first installation
-            // In production, you'd want to match by account/owner
-            var installation=installations.find(function(i){
-                return i.account&&i.account.login&&i.account.login.toLowerCase()===owner.toLowerCase();
-            })||installations[0];
             return self.getInstallationToken(installation.id);
         });
     },
     
-    fetch:function(url){
+    request:function(url,options,errorMap){
         var self=this;
-        var h={'Accept':'application/vnd.github.v3+json'};
-        if(this.token)h['Authorization']='Bearer '+this.token;
-        return fetch(url,{headers:h}).then(function(r){
+        var h=Object.assign({'Accept':'application/vnd.github.v3+json'},options&&options.headers?options.headers:{});
+        if(this.token&&!h.Authorization)h.Authorization='Bearer '+this.token;
+        var controller=new AbortController();
+        var timeoutId=setTimeout(function(){controller.abort();},this.requestTimeoutMs);
+        var requestOptions=Object.assign({},options||{},{headers:h,signal:controller.signal});
+        return fetch(url,requestOptions).then(function(r){
             // Track rate limit from headers
             var rem=r.headers.get('x-ratelimit-remaining');
             var lim=r.headers.get('x-ratelimit-limit');
@@ -2569,15 +2614,37 @@
             if(rem!==null)self.rateLimit.remaining=parseInt(rem,10);
             if(lim!==null)self.rateLimit.limit=parseInt(lim,10);
             if(rst!==null)self.rateLimit.reset=parseInt(rst,10);
-            if(!r.ok)throw new Error(r.status===401?'Invalid token':r.status===403?'Rate limited - add a GitHub token for 5000 req/hour':r.status===404?'Repository not found':r.status===429?'Rate limited (429) - add a GitHub token':'Error '+r.status);
+            if(!r.ok){
+                throw new Error(
+                    errorMap&&errorMap[r.status]
+                        ? errorMap[r.status]
+                        : r.status===401
+                            ? 'Invalid token'
+                            : r.status===403
+                                ? 'Rate limited - add a GitHub token for 5000 req/hour'
+                                : r.status===404
+                                    ? 'Repository not found'
+                                    : r.status===429
+                                        ? 'Rate limited (429) - add a GitHub token'
+                                        : 'Error '+r.status
+                );
+            }
             return r.json();
+        }).catch(function(err){
+            if(err&&err.name==='AbortError'){
+                throw new Error('GitHub request timed out. Please try again.');
+            }
+            throw err;
+        }).finally(function(){
+            clearTimeout(timeoutId);
         });
     },
+    fetch:function(url,options,errorMap){
+        return this.request(url,options,errorMap);
+    },
     getRateLimit:function(){
         var self=this;
-        var h={'Accept':'application/vnd.github.v3+json'};
-        if(this.token)h['Authorization']='Bearer '+this.token;
-        return fetch('https://api.github.com/rate_limit',{headers:h}).then(function(r){return r.json();}).then(function(d){
+        return this.request(buildGitHubApiUrl(['rate_limit'])).then(function(d){
             if(d.resources&&d.resources.core){
                 self.rateLimit.remaining=d.resources.core.remaining;
                 self.rateLimit.limit=d.resources.core.limit;
@@ -2587,11 +2654,11 @@
         }).catch(function(){return self.rateLimit;});
     },
     getFile:function(o,r,p){
-        return this.fetch('https://api.github.com/repos/'+o+'/'+r+'/contents/'+p).then(function(d){return d.content?atob(d.content):null;}).catch(function(){return null;});
+        return this.fetch(buildRepoApiUrl(o,r,['contents'].concat(splitRepoPath(p)))).then(function(d){return d.content?decodeBase64Utf8(d.content):null;}).catch(function(){return null;});
     },
     getCommits:function(o,r,path,limit){
         if(this.rateLimit.remaining<20&&!this.token)return Promise.resolve([]);// Skip when rate limited
-        return this.fetch('https://api.github.com/repos/'+o+'/'+r+'/commits?per_page='+(limit||30)+(path?'&path='+path:'')).catch(function(){return[];});
+        return this.fetch(buildRepoApiUrl(o,r,['commits'],{per_page:limit||30,path:path||undefined})).catch(function(){return[];});
     },
     getBlame:function(o,r,path){
         return this.getCommits(o,r,path,50).then(function(commits){
@@ -2602,8 +2669,8 @@
     },
     getPR:function(o,r,prNum){
         var self=this;
-        return this.fetch('https://api.github.com/repos/'+o+'/'+r+'/pulls/'+prNum).then(function(pr){
-            return self.fetch('https://api.github.com/repos/'+o+'/'+r+'/pulls/'+prNum+'/files').then(function(files){
+        return this.fetch(buildRepoApiUrl(o,r,['pulls',String(prNum)])).then(function(pr){
+            return self.fetch(buildRepoApiUrl(o,r,['pulls',String(prNum),'files'])).then(function(files){
                 pr.files=files;return pr;
             });
         }).catch(function(){return null;});
@@ -2613,11 +2680,11 @@
         var self=this;
         if(cb)cb('Fetching repository tree...');
         // First get repo info to find default branch
-        return this.fetch('https://api.github.com/repos/'+o+'/'+r).then(function(repo){
+        return this.fetch(buildRepoApiUrl(o,r)).then(function(repo){
             var branch=repo.default_branch||'main';
             if(cb)cb('Loading file tree ('+branch+')...');
             // Get full tree in one request with recursive flag
-            return self.fetch('https://api.github.com/repos/'+o+'/'+r+'/git/trees/'+branch+'?recursive=1');
+            return self.fetch(buildRepoApiUrl(o,r,['git','trees',branch],{recursive:1}));
         }).then(function(tree){
             if(!tree.tree)throw new Error('Invalid tree response');
             var f=[];
@@ -2642,7 +2709,7 @@
     scanRecursive:function(o,r,cb,p,d,compiledPatterns){
         var self=this;p=p||'';d=d||0;
         if(d>10)return Promise.resolve([]);
-        return this.fetch('https://api.github.com/repos/'+o+'/'+r+'/contents/'+p).then(function(c){
+        return this.fetch(buildRepoApiUrl(o,r,['contents'].concat(splitRepoPath(p)))).then(function(c){
             var f=[];
             var promises=[];
             c.forEach(function(i){
@@ -4346,7 +4413,12 @@
             .text(function(d){return d.data.value+' lines';});
         var tooltip=container.append('div').attr('class','treemap-tooltip').style('display','none').style('position','absolute');
         cells.on('mouseenter',function(e,d){
-            tooltip.html('<div class="treemap-tooltip-title">'+d.data.name+'</div><div class="treemap-tooltip-stat"><span>Lines:</span><span>'+d.data.value+'</span></div><div class="treemap-tooltip-stat"><span>Functions:</span><span>'+(d.data.fns||0)+'</span></div><div class="treemap-tooltip-stat"><span>Layer:</span><span>'+(d.data.layer||'—')+'</span></div><div class="treemap-tooltip-stat"><span>Folder:</span><span>'+(d.data.folder||'root')+'</span></div>')
+            tooltip.html(renderTooltipHtml(d.data.name,[
+                {label:'Lines',value:d.data.value},
+                {label:'Functions',value:d.data.fns||0},
+                {label:'Layer',value:d.data.layer||'—'},
+                {label:'Folder',value:d.data.folder||'root'}
+            ]))
                 .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             d3.select(this).select('rect').transition().duration(150).attr('opacity',1).attr('stroke','var(--acc)').attr('stroke-width',2);
         }).on('mousemove',function(e){tooltip.style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');})
@@ -4416,7 +4488,9 @@
             .attr('fill',function(d){return d.value>0?'rgba(0,255,157,'+Math.max(0.15,d.value/maxVal)+')':'var(--bg2)';})
             .attr('stroke','var(--bg0)').attr('stroke-width',0.5).style('cursor','pointer');
         cells.on('mouseenter',function(e,d){
-            tooltip.html('<div class="treemap-tooltip-title">'+d.source.name+' → '+d.target.name+'</div><div class="treemap-tooltip-stat"><span>Connections:</span><span>'+d.value+'</span></div>')
+            tooltip.html(renderTooltipHtml(d.source.name+' → '+d.target.name,[
+                {label:'Connections',value:d.value}
+            ]))
                 .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             g.selectAll('rect.matrix-cell-rect').attr('opacity',function(c){return c.row===d.row||c.col===d.col?1:0.3;});
             colLabels.attr('fill',function(f,i){return i===d.col?'var(--acc)':'var(--t2)';}).attr('font-weight',function(f,i){return i===d.col?'600':'400';});
@@ -4471,7 +4545,11 @@
             .attr('fill','var(--t2)').attr('font-size','10px').attr('font-weight','600').text(function(d){return d.data.name;});
         node.on('mouseenter',function(e,d){
             if(!d.data.path)return;
-            tooltip.html('<div class="treemap-tooltip-title">'+d.data.name+'</div><div class="treemap-tooltip-stat"><span>Lines:</span><span>'+(d.data.lines||0)+'</span></div><div class="treemap-tooltip-stat"><span>Functions:</span><span>'+(d.data.fns||0)+'</span></div><div class="treemap-tooltip-stat"><span>Layer:</span><span>'+(d.data.layer||'—')+'</span></div>')
+            tooltip.html(renderTooltipHtml(d.data.name,[
+                {label:'Lines',value:d.data.lines||0},
+                {label:'Functions',value:d.data.fns||0},
+                {label:'Layer',value:d.data.layer||'—'}
+            ]))
                 .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             d3.select(this).select('circle').transition().duration(150).attr('r',12).attr('stroke','var(--acc)').attr('stroke-width',3);
         }).on('mousemove',function(e){tooltip.style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');})
@@ -4549,7 +4627,9 @@
             .attr('stroke-width',function(d){return Math.max(2,d.width);}).attr('stroke-opacity',0.4)
             .on('mouseenter',function(e,d){
                 d3.select(this).attr('stroke-opacity',0.8);
-                tooltip.html('<div class="treemap-tooltip-title">'+d.source.name+' → '+d.target.name+'</div><div class="treemap-tooltip-stat"><span>Connections:</span><span>'+d.value+'</span></div>')
+                tooltip.html(renderTooltipHtml(d.source.name+' → '+d.target.name,[
+                    {label:'Connections',value:d.value}
+                ]))
                     .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             }).on('mouseleave',function(){d3.select(this).attr('stroke-opacity',0.4);tooltip.style('display','none');});
         var node=g.selectAll('g.sankey-node').data(graph.nodes).join('g').attr('class','sankey-node').style('cursor','pointer');
@@ -4560,7 +4640,9 @@
             .attr('dy','0.35em').attr('text-anchor',function(d){return d.x0<w/2?'start':'end';})
             .attr('fill','var(--t1)').attr('font-size','10px').attr('font-weight','500').text(function(d){return d.name+' ('+d.fileCount+')';});
         node.on('mouseenter',function(e,d){
-            tooltip.html('<div class="treemap-tooltip-title">'+d.fullPath+'</div><div class="treemap-tooltip-stat"><span>Files:</span><span>'+d.fileCount+'</span></div>')
+            tooltip.html(renderTooltipHtml(d.fullPath,[
+                {label:'Files',value:d.fileCount}
+            ]))
                 .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             g.selectAll('path.sankey-link').attr('stroke-opacity',function(l){return l.source.id===d.id||l.target.id===d.id?0.8:0.1;});
         }).on('mouseleave',function(){tooltip.style('display','none');g.selectAll('path.sankey-link').attr('stroke-opacity',0.4);})
@@ -4615,7 +4697,11 @@
         node.append('circle').attr('class','disjoint-circle').attr('r',function(d){return Math.max(6,Math.min(14,4+d.fns));})
             .attr('fill',function(d){return colorMap[d.folder]||COLORS[0];}).attr('stroke','var(--bg0)').attr('stroke-width',1.5);
         node.on('mouseenter',function(e,d){
-            tooltip.html('<div class="treemap-tooltip-title">'+d.name+'</div><div class="treemap-tooltip-stat"><span>Lines:</span><span>'+(d.lines||0)+'</span></div><div class="treemap-tooltip-stat"><span>Functions:</span><span>'+(d.fns||0)+'</span></div><div class="treemap-tooltip-stat"><span>Folder:</span><span>'+d.folder+'</span></div>')
+            tooltip.html(renderTooltipHtml(d.name,[
+                {label:'Lines',value:d.lines||0},
+                {label:'Functions',value:d.fns||0},
+                {label:'Folder',value:d.folder}
+            ]))
                 .style('display','block').style('left',(e.offsetX+15)+'px').style('top',(e.offsetY+15)+'px');
             link.attr('stroke-opacity',function(l){return l.source.id===d.id||l.target.id===d.id?0.8:0.05;}).attr('stroke',function(l){return l.source.id===d.id||l.target.id===d.id?'var(--acc)':'var(--border)';});
             d3.select(this).select('circle').transition().duration(150).attr('r',14).attr('stroke','var(--acc)').attr('stroke-width',2);
@@ -4740,7 +4826,11 @@
         }
         node.on('mouseenter',function(e,d){
             var rect=bundleRef.current.getBoundingClientRect();
-            tooltip.html('<div class="treemap-tooltip-title">'+d.name+'</div><div class="treemap-tooltip-stat"><span>Lines:</span><span>'+(d.lines||0)+'</span></div><div class="treemap-tooltip-stat"><span>Functions:</span><span>'+(d.fns||0)+'</span></div><div class="treemap-tooltip-stat"><span>Folder:</span><span>'+(d.folder||'root')+'</span></div>')
+            tooltip.html(renderTooltipHtml(d.name,[
+                {label:'Lines',value:d.lines||0},
+                {label:'Functions',value:d.fns||0},
+                {label:'Folder',value:d.folder||'root'}
+            ]))
                 .style('display','block').style('left',(e.clientX-rect.left+15)+'px').style('top',(e.clientY-rect.top+15)+'px');
             applyBundleHoverState(d.id);
         }).on('mousemove',function(e){var rect=bundleRef.current.getBoundingClientRect();tooltip.style('left',(e.clientX-rect.left+15)+'px').style('top',(e.clientY-rect.top+15)+'px');})

From 0a5fff33008bfa6e1d630c63138f01e7229d649b Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 03:06:22 +0530
Subject: [PATCH 17/23] Update .gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 5af33c4..d77d9d7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,6 +18,7 @@ coverage/
 .DS_Store
 Thumbs.db
 .idea/
+.vscode/
 .vscode/settings.json
 
 # Secrets and local credentials

From 4d65fc85435633802c535d9e02d787527d045933 Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 03:06:48 +0530
Subject: [PATCH 18/23] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 8f24a80..36b1f06 100644
--- a/README.md
+++ b/README.md
@@ -317,7 +317,7 @@ If you're editing the markdown / wiki-link parser, Node.js unit tests live under
 node --test tests/
 ```
 
-`tests/verify-brain-vault.mjs` is an optional end-to-end script that always verifies the bundled fixtures and will also scan a real local vault when you set `BRAIN_VAULT=/path/to/vault`.
+`tests/verify-brain-vault.mjs` is an optional end-to-end script that always verifies the bundled fixtures and will also scan a real local vault when you explicitly set `BRAIN_VAULT=/path/to/vault`.
 
 ### Ideas for Contributions
 - [ ] Add support for more languages

From 423479a0e34d046d29891bf455b64ccee325b741 Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 03:07:11 +0530
Subject: [PATCH 19/23] Update verify-brain-vault.mjs

---
 tests/verify-brain-vault.mjs | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/tests/verify-brain-vault.mjs b/tests/verify-brain-vault.mjs
index fa175b6..7bbbeb6 100644
--- a/tests/verify-brain-vault.mjs
+++ b/tests/verify-brain-vault.mjs
@@ -66,7 +66,6 @@ function exportShape(analyzed, conns) {
   };
 }
 
-const DEFAULT_BRAIN_VAULT = '/Users/malcolm/Documents/Claude/Projects/Brain';
 const FIXTURE_VAULT = fileURLToPath(new URL('./fixtures/vault', import.meta.url));
 
 function resolveTargets() {
@@ -76,10 +75,6 @@ function resolveTargets() {
       throw new Error(`BRAIN_VAULT does not exist: ${process.env.BRAIN_VAULT}`);
     }
     targets.unshift({ label: 'Brain vault', path: process.env.BRAIN_VAULT });
-    return targets;
-  }
-  if (existsSync(DEFAULT_BRAIN_VAULT)) {
-    targets.unshift({ label: 'Brain vault', path: DEFAULT_BRAIN_VAULT });
   }
   return targets;
 }

From 9d28ab9fa442d145dd2327c5ff844a9ad534f362 Mon Sep 17 00:00:00 2001
From: Braedon Saunders <braedonsaunders@Braedons-MacBook-Pro.local>
Date: Thu, 23 Apr 2026 02:01:06 -0400
Subject: [PATCH 20/23] Restore CDN runtimes for single-file app

---
 README.md  |  4 ++--
 index.html | 27 +++++++++------------------
 2 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index 36b1f06..ffd22f5 100644
--- a/README.md
+++ b/README.md
@@ -113,7 +113,7 @@ git clone https://github.com/braedonsaunders/codeflow.git
 open index.html
 ```
 
-No build process. No npm install. The app is served from `index.html` with vendored browser runtime assets in `vendor/`.
+No build process. No npm install. It is a single `index.html` app that loads pinned browser dependencies from CDNs.
 
 ### Option 3: Analyze Local Files
 You can now analyze code directly from your local machine without uploading to GitHub:
@@ -295,7 +295,7 @@ For larger repositories or team usage, we recommend using GitHub App authenticat
 └─────────────────────────────────────────────────┘
 ```
 
-**Zero build dependencies to install.** Runtime libraries are vendored in this repo:
+**Zero build dependencies to install.** Everything runs from pinned CDNs:
 - React 18
 - D3.js 7
 - Babel (for JSX)
diff --git a/index.html b/index.html
index 182243d..70576a9 100644
--- a/index.html
+++ b/index.html
@@ -17,14 +17,13 @@
     <meta name="twitter:description" content="Turn any GitHub repo into an interactive architecture map in seconds. Zero setup, privacy-first.">
     <meta name="twitter:image" content="codeflow-social.png">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ff9d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2 4 14h6l-1 8 9-12h-6l1-8z'/></svg>">
-    <script src="vendor/react.production.min.js"></script>
-    <script src="vendor/react-dom.production.min.js"></script>
-    <script src="vendor/babel.min.js"></script>
-    <script src="vendor/d3.min.js"></script>
-    <script src="vendor/d3-sankey.min.js"></script>
-    <script src="vendor/acorn.min.js"></script>
-    <script src="vendor/tree-sitter.js"></script>
-    <script src="vendor/jsrsasign-all-min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-sankey/0.12.3/d3-sankey.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/acorn/8.11.3/acorn.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrsasign/11.1.0/jsrsasign-all-min.js"></script>
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
     <style>
 :root{--bg0:#0a0a0c;--bg1:#0f0f12;--bg2:#161619;--bg3:#1c1c21;--bg4:#252529;--hover:#2a2a30;--border:#2d2d35;--border2:#222228;--t0:#f0f0f2;--t1:#c8c8cd;--t2:#8b8b95;--t3:#5c5c66;--acc:#00ff9d;--acc2:#00cc7d;--accbg:rgba(0,255,157,0.08);--blue:#4d9fff;--purple:#a78bfa;--orange:#ff9f43;--red:#ff5f5f;--cyan:#22d3ee;--pink:#ec4899;--green:#22c55e}
@@ -572,12 +571,12 @@
             try{
                 await TreeSitter.init({
                     locateFile:function(scriptName){
-                        return 'vendor/'+scriptName;
+                        return 'https://cdn.jsdelivr.net/npm/web-tree-sitter@0.25.10/'+scriptName;
                     }
                 });
                 var parser=new TreeSitter();
                 var Python=await TreeSitter.Language.load(
-                    'vendor/tree-sitter-python.wasm'
+                    'https://cdn.jsdelivr.net/npm/tree-sitter-wasms@0.1.13/out/tree-sitter-python.wasm'
                 );
                 parser.setLanguage(Python);
                 this._tsParser=parser;
@@ -3541,8 +3540,6 @@
 
                 async function finishAnalysis(){
                     try{
-                // Initialize tree-sitter Python parser (async WASM load, runs in parallel)
-                Parser.initTreeSitter();
                 // Phase 1: Build function stats index
                 setProgress('Building dependency graph (1/5)...');
                 await new Promise(function(r){setTimeout(r,0);});
@@ -3570,8 +3567,6 @@
                     }
                 });
 
-                // Wait for tree-sitter to finish loading (started in parallel during Phase 1)
-                await Parser.initTreeSitter();
                 // Phase 2: Find calls in batches with yielding to prevent UI freeze
                 var CALL_BATCH=30;
                 for(var bi=0;bi<analyzed.length;bi+=CALL_BATCH){
@@ -3884,8 +3879,6 @@
 
         async function finishAnalysis(){
             try{
-            // Initialize tree-sitter Python parser (async WASM load, runs in parallel)
-            Parser.initTreeSitter();
             // Phase 1: Build function stats index
             setProgress('Building dependency graph (1/5)...');
             await new Promise(function(r){setTimeout(r,0);});
@@ -3912,8 +3905,6 @@
                 }
             });
 
-            // Wait for tree-sitter to finish loading (started in parallel during Phase 1)
-            await Parser.initTreeSitter();
             // Phase 2: Find calls in batches with yielding to prevent UI freeze
             var CALL_BATCH=30;
             for(var bi=0;bi<analyzed.length;bi+=CALL_BATCH){

From 1340836b897c87fc6e33768dc369ef717bdaca4a Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 19:58:13 +0530
Subject: [PATCH 21/23] Add files via upload

---
 index.html | 198 ++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 181 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 70576a9..6df8ca6 100644
--- a/index.html
+++ b/index.html
@@ -29,9 +29,9 @@
 :root{--bg0:#0a0a0c;--bg1:#0f0f12;--bg2:#161619;--bg3:#1c1c21;--bg4:#252529;--hover:#2a2a30;--border:#2d2d35;--border2:#222228;--t0:#f0f0f2;--t1:#c8c8cd;--t2:#8b8b95;--t3:#5c5c66;--acc:#00ff9d;--acc2:#00cc7d;--accbg:rgba(0,255,157,0.08);--blue:#4d9fff;--purple:#a78bfa;--orange:#ff9f43;--red:#ff5f5f;--cyan:#22d3ee;--pink:#ec4899;--green:#22c55e}
 .light{--bg0:#fff;--bg1:#f8f9fa;--bg2:#f1f3f4;--bg3:#e8eaed;--bg4:#dadce0;--hover:#e2e4e8;--border:#dadce0;--border2:#e8eaed;--t0:#1a1a1a;--t1:#3c3c3c;--t2:#6c6c6c;--t3:#9c9c9c;--acc:#00a86b;--acc2:#008f5b;--accbg:rgba(0,168,107,0.08)}
 *{margin:0;padding:0;box-sizing:border-box}
-body{font-family:'JetBrains Mono',monospace;background:var(--bg0);color:var(--t0);height:100vh;overflow:hidden}
-.app{display:flex;height:100vh;flex-direction:column}
-.topbar{height:48px;background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:16px;flex-shrink:0}
+body{font-family:'JetBrains Mono',monospace;background:var(--bg0);color:var(--t0);height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;overflow:hidden}
+.app{display:flex;height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;flex-direction:column}
+.topbar{min-height:48px;background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:16px;flex-shrink:0;position:relative;z-index:120}
 .logo{display:flex;align-items:center;gap:10px;cursor:pointer}
 .logo-mark{width:28px;height:28px;background:linear-gradient(135deg,var(--acc),var(--cyan));border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--bg0)}
 .logo-text{font-size:14px;font-weight:700;color:var(--acc)}
@@ -43,17 +43,18 @@
 .icon-xl{width:20px;height:20px}
 .icon-xxl{width:48px;height:48px}
 .status-dot{display:inline-block;width:8px;height:8px;border-radius:999px;flex-shrink:0}
-.repo-input-group{display:flex;gap:8px;flex:1;max-width:500px}
-.repo-input{flex:1;padding:6px 12px;background:var(--bg0);border:1px solid var(--border);border-radius:6px;color:var(--t0);font-family:inherit;font-size:11px}
+.repo-input-group{display:flex;gap:8px;flex:1;max-width:500px;min-width:0}
+.repo-input-group>*{min-width:0}
+.repo-input{flex:1;padding:6px 12px;background:var(--bg0);border:1px solid var(--border);border-radius:6px;color:var(--t0);font-family:inherit;font-size:11px;min-width:0}
 .repo-input:focus{outline:none;border-color:var(--acc)}
-.topbar-actions{display:flex;gap:6px;margin-left:auto}
-.top-btn{padding:6px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--t1);font-family:inherit;font-size:10px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap}
+.topbar-actions{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
+.top-btn{padding:6px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--t1);font-family:inherit;font-size:10px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;min-height:32px;touch-action:manipulation}
 .top-btn:hover{background:var(--bg4);border-color:var(--acc);color:var(--acc)}
 .top-btn.primary{background:var(--acc);color:var(--bg0);border-color:var(--acc)}
 .top-btn.primary:hover{background:var(--acc2)}
 .top-btn:disabled{opacity:0.5;cursor:not-allowed}
-.main{display:flex;flex:1;overflow:hidden}
-.sidebar{width:260px;min-width:180px;max-width:400px;background:var(--bg1);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;position:relative}
+.main{display:flex;flex:1;overflow:hidden;min-height:0;position:relative}
+.sidebar{width:260px;min-width:180px;max-width:400px;background:var(--bg1);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;position:relative;min-height:0}
 .resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;z-index:10}
 .resize-handle:hover{background:var(--acc);opacity:0.3}
 .sidebar-section{padding:12px;border-bottom:1px solid var(--border)}
@@ -90,13 +91,13 @@
 .tree-file{display:flex;align-items:center;gap:6px;padding:4px 8px;margin-left:18px;border-radius:4px;cursor:pointer;font-size:10px;color:var(--t2)}
 .tree-file:hover{background:var(--hover);color:var(--t0)}
 .tree-file.active{background:var(--accbg);color:var(--acc)}
-.canvas-area{flex:1;position:relative;background:var(--bg0);overflow:hidden}
+.canvas-area{flex:1;position:relative;background:var(--bg0);overflow:hidden;min-width:0}
 .canvas-area svg{width:100%;height:100%;display:block}
 .canvas-toolbar{position:absolute;top:12px;left:12px;display:flex;gap:4px;z-index:50}
 .canvas-info{position:absolute;bottom:12px;left:12px;display:flex;gap:8px;z-index:50}
 .info-chip{padding:6px 10px;background:var(--bg1);border:1px solid var(--border);border-radius:6px;font-size:10px;color:var(--t2)}
 .info-chip strong{color:var(--acc)}
-.tool-btn{width:32px;height:32px;background:var(--bg1);border:1px solid var(--border);border-radius:6px;color:var(--t2);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center}
+.tool-btn{width:32px;height:32px;background:var(--bg1);border:1px solid var(--border);border-radius:6px;color:var(--t2);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:manipulation}
 .tool-btn:hover{background:var(--bg2);color:var(--t0);border-color:var(--acc)}
 .legend{position:absolute;top:12px;right:12px;background:var(--bg1);border:1px solid var(--border);border-radius:8px;z-index:50;min-width:140px;max-height:300px;overflow-y:auto;transition:all 0.2s}
 .legend.collapsed{padding:8px;min-width:auto;max-height:none;overflow:hidden}
@@ -113,7 +114,7 @@
 .legend-item:hover{background:var(--hover)}
 .legend-item.active{background:var(--accbg);color:var(--acc)}
 .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}
+.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}
@@ -448,6 +449,84 @@
 .exclude-textarea{min-height:180px;font-family:'JetBrains Mono',monospace;font-size:10px;resize:vertical}
 .exclude-help{font-size:9px;color:var(--t3);line-height:1.5;margin-top:8px}
 .exclude-count{font-size:9px;color:var(--t3);margin-left:auto}
+.mobile-panel-actions{display:none}
+.mobile-panel-actions .top-btn.active{background:var(--accbg);border-color:var(--acc);color:var(--acc)}
+.mobile-panel-backdrop{display:none}
+.mobile-panel-header{display:none}
+.mobile-panel-meta{min-width:0}
+.mobile-panel-title{font-size:12px;font-weight:600;color:var(--t0)}
+.mobile-panel-subtitle{font-size:10px;color:var(--t3);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.mobile-panel-close{width:36px;height:36px;background:var(--bg0);border:1px solid var(--border);border-radius:8px;color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;touch-action:manipulation}
+.mobile-panel-close:hover{border-color:var(--acc);color:var(--acc)}
+@media (max-width:980px){
+body{height:100dvh;min-height:100dvh}
+.topbar{height:auto;padding:calc(10px + env(safe-area-inset-top)) 12px 12px;gap:10px;align-items:flex-start;flex-wrap:wrap}
+.topbar>*{min-width:0}
+.logo{min-height:40px}
+.logo-mark{width:32px;height:32px}
+.logo-text{font-size:15px}
+.repo-input-group{order:2;flex:1 1 100%;max-width:none;flex-wrap:wrap}
+.repo-input-group>.repo-input:first-child{flex:1 1 100%}
+.repo-input,.auth-select,.private-key-btn,.top-btn,.refresh-btn,.reset-btn,.view-file-btn{min-height:40px;font-size:11px}
+.auth-select{flex:1 1 150px}
+.auth-inputs{display:flex;gap:8px;align-items:stretch;flex:1 1 100%;flex-wrap:wrap}
+.auth-inputs .repo-input{flex:1 1 180px}
+.private-key-btn{flex:1 1 160px;justify-content:center}
+.repo-input-group .top-btn,.repo-input-group .refresh-btn,.repo-input-group .reset-btn{flex:1 1 calc(50% - 4px);justify-content:center}
+.mobile-panel-actions{display:flex;order:3;gap:8px;flex:1 1 100%}
+.mobile-panel-actions .top-btn{flex:1 1 0;justify-content:center}
+.topbar-actions{order:4;width:100%;margin-left:0;justify-content:flex-start}
+.topbar-actions .top-btn{flex:1 1 calc(50% - 4px);justify-content:center}
+.mobile-panel-backdrop{position:fixed;inset:var(--topbar-height,0) 0 0 0;background:rgba(0,0,0,0.45);border:0;padding:0;display:block;z-index:89;opacity:0;pointer-events:none;transition:opacity 0.2s ease}
+.mobile-panel-backdrop.visible{opacity:1;pointer-events:auto}
+.sidebar,.right-panel{position:fixed;top:var(--topbar-height,0);bottom:0;max-width:calc(100vw - 12px);box-shadow:0 18px 40px rgba(0,0,0,0.45);z-index:90;transition:transform 0.24s ease;overflow:hidden}
+.sidebar{left:0;transform:translateX(-105%)}
+.right-panel{right:0;transform:translateX(105%)}
+.sidebar.mobile-visible,.right-panel.mobile-visible{transform:translateX(0)}
+.resize-handle{display:none}
+.mobile-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--border);background:var(--bg2)}
+.sidebar-scroll,.panel-content{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
+.viz-selector{top:12px;left:12px;right:12px;transform:none;overflow-x:auto;justify-content:flex-start;padding:6px}
+.viz-selector-btn{flex:0 0 auto;min-height:34px;font-size:10px}
+.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}
+.legend{top:auto;bottom:68px;right:12px;max-width:calc(100vw - 24px)}
+.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}
+.pr-risk{flex-direction:column;align-items:flex-start}
+.file-preview-modal{width:calc(100vw - 12px);height:min(88dvh,760px)}
+.file-preview-header{flex-wrap:wrap;align-items:flex-start;gap:10px}
+.file-preview-actions{width:100%;justify-content:space-between}
+.file-preview-path{margin-left:0;display:block}
+.file-preview-code{font-size:11px}
+.file-preview-linenum{min-width:42px;padding:0 10px}
+.file-preview-text{padding:0 12px}
+.modal{width:calc(100vw - 20px);max-height:min(88dvh,800px)}
+.modal-footer{flex-wrap:wrap}
+.modal-footer .top-btn{flex:1 1 calc(50% - 4px);justify-content:center}
+.confirm-content{flex-direction:column}
+.confirm-icon{width:36px;height:36px}
+.tooltip{max-width:min(240px,calc(100vw - 24px))}
+.toast{width:calc(100vw - 24px);padding:12px 16px}
+}
+@media (max-width:640px){
+.topbar{padding-left:10px;padding-right:10px}
+.repo-input-group .top-btn,.repo-input-group .refresh-btn,.repo-input-group .reset-btn,.topbar-actions .top-btn{flex:1 1 calc(50% - 4px)}
+.repo-input-group .top-btn.primary{flex:1 1 100%}
+.health-score{align-items:flex-start}
+.canvas-toolbar{top:64px}
+.graph-config{top:116px}
+.legend{bottom:72px;right:12px}
+.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}
+.file-preview-content{padding-bottom:env(safe-area-inset-bottom)}
+.file-preview-text{font-size:10px}
+.modal,.pr-modal{width:100vw;max-width:none;max-height:100dvh;border-radius:0}
+.modal-header,.modal-body,.modal-footer{padding-left:14px;padding-right:14px}
+}
     </style>
 </head>
 <body>
@@ -3287,7 +3366,12 @@
     var _aj=useState(''),excludePatternDraft=_aj[0],setExcludePatternDraft=_aj[1];
     var _ak=useState(false),launchFolderAfterExcludeSave=_ak[0],setLaunchFolderAfterExcludeSave=_ak[1];
     var _al=useState(null),confirmDialog=_al[0],setConfirmDialog=_al[1];
+    var _am=useState(window.innerWidth),viewportWidth=_am[0],setViewportWidth=_am[1];
+    var _an=useState(null),mobilePanel=_an[0],setMobilePanel=_an[1];
+    var _ao=useState(48),topbarHeight=_ao[0],setTopbarHeight=_ao[1];
+    var isMobile=viewportWidth<=980;
     var svgRef=useRef(null);
+    var topbarRef=useRef(null);
     var filePreviewRef=useRef(null);
     var treemapRef=useRef(null);
     var matrixRef=useRef(null);
@@ -3306,6 +3390,45 @@
 
     useEffect(function(){document.body.className=theme==='light'?'light':'';},[theme]);
 
+    useEffect(function(){
+        function onResize(){setViewportWidth(window.innerWidth);}
+        window.addEventListener('resize',onResize);
+        onResize();
+        return function(){window.removeEventListener('resize',onResize);};
+    },[]);
+
+    useEffect(function(){
+        if(!topbarRef.current)return;
+        function measureTopbar(){
+            if(topbarRef.current){
+                setTopbarHeight(topbarRef.current.offsetHeight||48);
+            }
+        }
+        measureTopbar();
+        if(typeof ResizeObserver==='undefined'){
+            window.addEventListener('resize',measureTopbar);
+            return function(){window.removeEventListener('resize',measureTopbar);};
+        }
+        var observer=new ResizeObserver(measureTopbar);
+        observer.observe(topbarRef.current);
+        return function(){observer.disconnect();};
+    },[]);
+
+    useEffect(function(){
+        if(!isMobile){
+            setMobilePanel(null);
+            return;
+        }
+        setLegendCollapsed(true);
+        setShowGraphConfig(false);
+    },[isMobile]);
+
+    useEffect(function(){
+        if(!data){
+            setMobilePanel(null);
+        }
+    },[data]);
+
     useEffect(function(){
         return function(){
             if(confirmResolverRef.current){
@@ -3359,6 +3482,8 @@
         setFolderFilter(null);
         setPrData(null);
         setFilePreview(null);
+        setMobilePanel(null);
+        setShowGraphConfig(false);
     }
 
     function openExcludeModal(continueToFolder){
@@ -3410,6 +3535,10 @@
         });
     }
 
+    function toggleMobilePanel(panel){
+        setMobilePanel(function(prev){return prev===panel?null:panel;});
+    }
+
     function analyze(){
         var p=parseUrl(repoUrl);
         if(!p){setError('Invalid URL. Use format: owner/repo');return;}
@@ -4062,6 +4191,10 @@
         if(file){
             setSelected(file);
             setRightTab('details');
+            if(isMobile){
+                setMobilePanel('details');
+                setLegendCollapsed(true);
+            }
             var blast=calcBlast(path,data.connections,data.files);
             setBlastRadius(blast);
             setOwnership(null);
@@ -4075,7 +4208,7 @@
             }
             updateGraphHighlight(path,blast);
         }
-    },[data,repoInfo,localDirHandle]);
+    },[data,repoInfo,localDirHandle,isMobile]);
     selectFileRef.current=selectFile;
 
     function updateGraphHighlight(path,blast){
@@ -5119,9 +5252,11 @@
     function resetAnalysis(){setData(null);setSelected(null);setBlastRadius(null);setOwnership(null);setRepoInfo(null);setRepoUrl('');setPrData(null);setFolderFilter(null);setLocalDirHandle(null);window.history.replaceState({},'',window.location.pathname);}
     function filterByFolder(path){setFolderFilter(function(prev){return prev===path?null:path;});}
     var health=useMemo(function(){return calcHealth(data);},[data]);
+    var mobileSidebarWidth=Math.min(Math.max(viewportWidth-16,240),380);
+    var mobileRightPanelWidth=Math.min(Math.max(viewportWidth-16,240),460);
 
-    return React.createElement('div',{className:'app'},
-        React.createElement('div',{className:'topbar'},
+    return React.createElement('div',{className:'app',style:{'--topbar-height':topbarHeight+'px'}},
+        React.createElement('div',{className:'topbar',ref:topbarRef},
             React.createElement('div',{className:'logo',onClick:function(){setShowPrivacy(true);}},
                 React.createElement('div',{className:'logo-mark'},React.createElement(Icon,{name:'logo',size:'l'})),
                 React.createElement('span',{className:'logo-text'},'CODEFLOW')
@@ -5165,6 +5300,16 @@
                     ' Reset'
                 )
             ),
+            isMobile&&React.createElement('div',{className:'mobile-panel-actions'},
+                React.createElement('button',{className:'top-btn'+(mobilePanel==='explorer'?' active':''),'aria-label':'Toggle explorer panel',onClick:function(){toggleMobilePanel('explorer');},type:'button'},
+                    React.createElement(Icon,{name:'folder',size:'m'}),
+                    'Explorer'
+                ),
+                React.createElement('button',{className:'top-btn'+(mobilePanel==='details'?' active':''),'aria-label':'Toggle details panel',onClick:function(){toggleMobilePanel('details');},disabled:!data,type:'button'},
+                    React.createElement(Icon,{name:selected?'file':'layout',size:'m'}),
+                    selected?'Inspector':'Insights'
+                )
+            ),
             React.createElement('div',{className:'topbar-actions'},
                 React.createElement('button',{className:'top-btn','aria-label':'Analyze Pull Request',onClick:function(){setShowPR(true);},disabled:!data||localDirHandle},React.createElement(Icon,{name:'pull-request',size:'m'}),'PR'),
                 React.createElement('button',{className:'top-btn','aria-label':'Export analysis',onClick:function(){setShowExport(true);},disabled:!data},React.createElement(Icon,{name:'export',size:'m'}),'Export'),
@@ -5173,7 +5318,17 @@
             )
         ),
         React.createElement('div',{className:'main'},
-            React.createElement('div',{className:'sidebar',style:{width:sidebarWidth}},
+            isMobile&&React.createElement('button',{type:'button',className:'mobile-panel-backdrop'+(mobilePanel?' visible':''),'aria-label':'Close mobile panel',onClick:function(){setMobilePanel(null);}}),
+            React.createElement('div',{className:'sidebar'+(isMobile&&mobilePanel==='explorer'?' mobile-visible':''),style:{width:isMobile?mobileSidebarWidth: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('button',{className:'mobile-panel-close',type:'button','aria-label':'Close explorer panel',onClick:function(){setMobilePanel(null);}},
+                        React.createElement(Icon,{name:'close',size:'m'})
+                    )
+                ),
                 React.createElement('div',{className:'resize-handle',onMouseDown:function(e){
                     e.preventDefault();
                     var startX=e.clientX,startW=sidebarWidth;
@@ -5332,7 +5487,16 @@
                     tooltip&&React.createElement('div',{className:'tooltip',style:{left:tooltip.x,top:tooltip.y}},React.createElement('div',{className:'tooltip-title'},tooltip.title),React.createElement('div',{className:'tooltip-content'},tooltip.content))
                 )
             ),
-            React.createElement('div',{className:'right-panel',style:{width:rightPanelWidth}},
+            React.createElement('div',{className:'right-panel'+(isMobile&&mobilePanel==='details'?' mobile-visible':''),style:{width:isMobile?mobileRightPanelWidth:rightPanelWidth}},
+                isMobile&&React.createElement('div',{className:'mobile-panel-header'},
+                    React.createElement('div',{className:'mobile-panel-meta'},
+                        React.createElement('div',{className:'mobile-panel-title'},selected?selected.name:'Insights'),
+                        React.createElement('div',{className:'mobile-panel-subtitle'},selected?selected.path:(data?'Browse issues, patterns, and security findings':'Select a file to inspect it'))
+                    ),
+                    React.createElement('button',{className:'mobile-panel-close',type:'button','aria-label':'Close details panel',onClick:function(){setMobilePanel(null);}},
+                        React.createElement(Icon,{name:'close',size:'m'})
+                    )
+                ),
                 React.createElement('div',{className:'resize-handle',onMouseDown:function(e){
                     e.preventDefault();
                     var startX=e.clientX,startW=rightPanelWidth;

From 1332387e35517ef19f36566212ee2ee72f839909 Mon Sep 17 00:00:00 2001
From: Mohammad Faiz <mohdfaiz2k9@gmail.com>
Date: Thu, 23 Apr 2026 21:46:33 +0530
Subject: [PATCH 22/23] Update index.html

---
 index.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 6df8ca6..a659104 100644
--- a/index.html
+++ b/index.html
@@ -17,13 +17,13 @@
     <meta name="twitter:description" content="Turn any GitHub repo into an interactive architecture map in seconds. Zero setup, privacy-first.">
     <meta name="twitter:image" content="codeflow-social.png">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ff9d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2 4 14h6l-1 8 9-12h-6l1-8z'/></svg>">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-sankey/0.12.3/d3-sankey.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/acorn/8.11.3/acorn.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrsasign/11.1.0/jsrsasign-all-min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js" integrity="sha512-9/DBzqmxH9p1YcT+G+l3FRzK/OSB8f0ZQeYf3NL0PHEqPLW5S3/+qJqTlYQlEqZBLCKapqYxq+0ZAf+BqPQ5Aw==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js" integrity="sha512-M7nHCiNUOwFt6Us3r8alutZLm9qMt4s9951uo8jqO4UwJ1hziseL6O3ndFyigx6+LREfZqnhHxYjKRJ8ZQ69DQ==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-sankey/0.12.3/d3-sankey.min.js" integrity="sha512-KK1bkbLDo84axnLjMoHZvXD/bP+MgTVTLM8m1bqJlqVFRXdNvHMJqVDlqN5n0p1NVNVOgO+doLx7L0+XGVGQBA==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/acorn/8.11.3/acorn.min.js" integrity="sha512-9gvJLxBsK6TDJlN/lHjFxoLZJJZ0WcYJJYlBuKXQNFsKXNqpCisfxz+WzEfqXe0KsJSZM7SXoLhLvJV+hOhgYg==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrsasign/11.1.0/jsrsasign-all-min.js" integrity="sha512-JUyqPIuBVhT0O0c8iFMoZW1hzQFv0J0FKLuP0bjJGD+vpZxPKgtMuIhw+tRmKMVKPKxvCMVTLyxg10Lw6d6OHw==" crossorigin="anonymous"></script>
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
     <style>
 :root{--bg0:#0a0a0c;--bg1:#0f0f12;--bg2:#161619;--bg3:#1c1c21;--bg4:#252529;--hover:#2a2a30;--border:#2d2d35;--border2:#222228;--t0:#f0f0f2;--t1:#c8c8cd;--t2:#8b8b95;--t3:#5c5c66;--acc:#00ff9d;--acc2:#00cc7d;--accbg:rgba(0,255,157,0.08);--blue:#4d9fff;--purple:#a78bfa;--orange:#ff9f43;--red:#ff5f5f;--cyan:#22d3ee;--pink:#ec4899;--green:#22c55e}

From 5b2285d068b30f2695fe453e5e292271e928e205 Mon Sep 17 00:00:00 2001
From: Braedon Saunders <braedonsaunders@Braedons-MacBook-Pro.local>
Date: Thu, 23 Apr 2026 20:32:17 -0400
Subject: [PATCH 23/23] Fix PR 49 SRI hashes and topbar sizing

---
 index.html | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index a659104..fba5c8d 100644
--- a/index.html
+++ b/index.html
@@ -19,11 +19,11 @@
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ff9d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2 4 14h6l-1 8 9-12h-6l1-8z'/></svg>">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js" integrity="sha512-9/DBzqmxH9p1YcT+G+l3FRzK/OSB8f0ZQeYf3NL0PHEqPLW5S3/+qJqTlYQlEqZBLCKapqYxq+0ZAf+BqPQ5Aw==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js" integrity="sha512-BfcEFQ1SddlO+7JRhcagE5aEc/jc+KUtCsMGjzwkM4WHPgdHmGaYQPmW9snfgfU73cGW7+9sjdk70YErPPVi0w==" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js" integrity="sha512-M7nHCiNUOwFt6Us3r8alutZLm9qMt4s9951uo8jqO4UwJ1hziseL6O3ndFyigx6+LREfZqnhHxYjKRJ8ZQ69DQ==" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-sankey/0.12.3/d3-sankey.min.js" integrity="sha512-KK1bkbLDo84axnLjMoHZvXD/bP+MgTVTLM8m1bqJlqVFRXdNvHMJqVDlqN5n0p1NVNVOgO+doLx7L0+XGVGQBA==" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/acorn/8.11.3/acorn.min.js" integrity="sha512-9gvJLxBsK6TDJlN/lHjFxoLZJJZ0WcYJJYlBuKXQNFsKXNqpCisfxz+WzEfqXe0KsJSZM7SXoLhLvJV+hOhgYg==" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrsasign/11.1.0/jsrsasign-all-min.js" integrity="sha512-JUyqPIuBVhT0O0c8iFMoZW1hzQFv0J0FKLuP0bjJGD+vpZxPKgtMuIhw+tRmKMVKPKxvCMVTLyxg10Lw6d6OHw==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-sankey/0.12.3/d3-sankey.min.js" integrity="sha512-KK15oKpabNDaLpWinMtNfTqy/V7pzlc2FRG174PfASes7RRx6TAsua8HJdRTKo8+BLvPBKNIkL7kXWcz5HoqqA==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/acorn/8.11.3/acorn.min.js" integrity="sha512-qsbZzESFnMN1Zz5cujkpYFK7wysw2sDerv2/OUYiMMfEJY6h4h7o8vWytbAnPFUUpLhKfqmF+4BixPBBnbVUyg==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrsasign/11.1.0/jsrsasign-all-min.js" integrity="sha512-Eu9j+HZBor7muHf6IDWoWZ8FKVr6nKe9eIIVR28NEte4Y4GiYRlke26XGdR/re81XE/FfLoLYYVkvNk5GY9RvQ==" crossorigin="anonymous"></script>
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
     <style>
 :root{--bg0:#0a0a0c;--bg1:#0f0f12;--bg2:#161619;--bg3:#1c1c21;--bg4:#252529;--hover:#2a2a30;--border:#2d2d35;--border2:#222228;--t0:#f0f0f2;--t1:#c8c8cd;--t2:#8b8b95;--t3:#5c5c66;--acc:#00ff9d;--acc2:#00cc7d;--accbg:rgba(0,255,157,0.08);--blue:#4d9fff;--purple:#a78bfa;--orange:#ff9f43;--red:#ff5f5f;--cyan:#22d3ee;--pink:#ec4899;--green:#22c55e}
@@ -43,9 +43,11 @@
 .icon-xl{width:20px;height:20px}
 .icon-xxl{width:48px;height:48px}
 .status-dot{display:inline-block;width:8px;height:8px;border-radius:999px;flex-shrink:0}
-.repo-input-group{display:flex;gap:8px;flex:1;max-width:500px;min-width:0}
+.repo-input-group{display:flex;gap:8px;flex:1;max-width:860px;min-width:0}
 .repo-input-group>*{min-width:0}
 .repo-input{flex:1;padding:6px 12px;background:var(--bg0);border:1px solid var(--border);border-radius:6px;color:var(--t0);font-family:inherit;font-size:11px;min-width:0}
+.repo-input-group>.repo-input:first-child{min-width:220px}
+.repo-input-group>.top-btn,.repo-input-group>.refresh-btn,.repo-input-group>.reset-btn,.auth-select,.private-key-btn{flex-shrink:0}
 .repo-input:focus{outline:none;border-color:var(--acc)}
 .topbar-actions{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
 .top-btn{padding:6px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--t1);font-family:inherit;font-size:10px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;min-height:32px;touch-action:manipulation}