@wtdlee/repomap 0.6.0 → 0.8.0

package/dist/{chunk-WQANJ7IA.js → chunk-JDM7Y7PX.js}

@@ -1,19 +1,26 @@
-import {a as a$2}from'./chunk-H4YGP3GL.js';import {a as a$3}from'./chunk-VV3A3UE3.js';import {e,d as d$1,c,b as b$2}from'./chunk-BPV4UZSW.js';import {a,b as b$1}from'./chunk-XWZH2RDG.js';import {a as a$1}from'./chunk-QZWPOG5B.js';import {k}from'./chunk-PTR5IROV.js';import {simpleGit}from'simple-git';import*as d from'fs/promises';import*as m from'path';import H from'fast-glob';import*as w from'crypto';import F from'express';import {Server}from'socket.io';import*as z from'http';import {marked}from'marked';import*as P from'net';var C="1.1",x=class{cacheDir;manifest;manifestPath;dirty=false;constructor(a){this.cacheDir=m.join(a,".repomap-cache"),this.manifestPath=m.join(this.cacheDir,"manifest.json"),this.manifest={version:C,entries:{}};}async init(){try{await d.mkdir(this.cacheDir,{recursive:!0});}catch(a){console.warn(`  Warning: Could not create cache directory: ${a.message}`);return}try{let a=await d.readFile(this.manifestPath,"utf-8"),t=JSON.parse(a);t.version===C?this.manifest=t:(console.log("  Cache version mismatch, clearing cache..."),await this.clear());}catch{}}async computeFileHash(a){try{let t=await d.readFile(a,"utf-8");return w.createHash("md5").update(t).digest("hex")}catch{return ""}}async computeFilesHash(a){let t=[...a].sort(),e=50,o;t.length<=e*2?o=t:o=[...t.slice(0,e),...t.slice(-e)];let s=await Promise.all(o.map(i=>this.computeFileHash(i))),n=w.createHash("md5").update(String(t.length)).digest("hex");return w.createHash("md5").update(s.join("")+n).digest("hex")}get(a,t){let e=this.manifest.entries[a];return e&&e.hash===t?e.data:null}set(a,t,e){this.manifest.entries[a]={hash:t,timestamp:Date.now(),data:e},this.dirty=true;}async save(){if(this.dirty)try{await d.mkdir(this.cacheDir,{recursive:!0}),await d.writeFile(this.manifestPath,JSON.stringify(this.manifest,null,2)),this.dirty=!1;}catch(a){console.warn("  Warning: Failed to save cache:",a.message);}}async clear(){this.manifest={version:C,entries:{}},this.dirty=true;try{await d.rm(this.cacheDir,{recursive:!0,force:!0}),await d.mkdir(this.cacheDir,{recursive:!0});}catch{}}getStats(){let a=Object.keys(this.manifest.entries).length,t=JSON.stringify(this.manifest).length;return {entries:a,size:t>1024*1024?`${(t/1024/1024).toFixed(1)}MB`:`${(t/1024).toFixed(1)}KB`}}};var b=class{config;mermaidGenerator;markdownGenerator;noCache;constructor(a$1,t){this.config=a$1,this.mermaidGenerator=new a,this.markdownGenerator=new b$1,this.noCache=t?.noCache??false;}async generate(){console.log(`\u{1F680} Starting documentation generation...
-`);let a=[];for(let i of this.config.repositories)try{console.log(`
-\u{1F4E6} Analyzing ${i.displayName}...`);let r=await this.analyzeRepository(i);a.push(r),console.log(`\u2705 Completed ${i.displayName}`);}catch(r){console.error(`\u274C Failed to analyze ${i.name}:`,r.message);}console.log(`
-\u{1F517} Running cross-repository analysis...`);let t=this.analyzeCrossRepo(a);console.log(`
-\u{1F4CA} Generating diagrams...`);let e=a.map(i=>i.analysis),o=this.extractCrossRepoLinks(e),s=this.mermaidGenerator.generateAll(e,o),n={generatedAt:new Date().toISOString(),repositories:a,crossRepoAnalysis:t,diagrams:s};return console.log(`
-\u{1F4DD} Writing documentation...`),await this.writeDocumentation(n),console.log(`
-\u2728 Documentation generation complete!`),console.log(`\u{1F4C1} Output: ${this.config.outputDir}`),n}async analyzeRepository(a){let t=new x(a.path);await t.init();let{version:e,commitHash:o}=await this.getRepoInfo(a),s=await H(["**/*.{ts,tsx,graphql}"],{cwd:a.path,ignore:["**/node_modules/**","**/.next/**","**/dist/**","**/build/**"],absolute:true}),n=await t.computeFilesHash(s),i=`analysis_v${e}_${a.name}_${o}`;this.noCache&&console.log("  \u{1F504} Cache disabled, analyzing from scratch...");let r=this.noCache?null:t.get(i,n);if(r){console.log(`  \u26A1 Using cached analysis (hash: ${n.slice(0,8)}...)`);let c={totalPages:r.pages.length,totalComponents:r.components.length,totalGraphQLOperations:r.graphqlOperations.length,totalDataFlows:r.dataFlows.length,authRequiredPages:r.pages.filter(q=>q.authentication.required).length,publicPages:r.pages.filter(q=>!q.authentication.required).length};return {name:a.name,displayName:a.displayName,version:e,commitHash:o,analysis:r,summary:c}}let l=a.analyzers.map(c=>this.createAnalyzer(c,a)).filter(c=>c!==null);console.log(`  Running ${l.length} analyzers in parallel...`);let h=Date.now(),g=await Promise.all(l.map(c=>c.analyze()));console.log(`  Analysis completed in ${((Date.now()-h)/1e3).toFixed(1)}s`);let p=this.mergeAnalysisResults(g,a.name,e,o);t.set(i,n,p),await t.save(),console.log(`  \u{1F4BE} Analysis cached (hash: ${n.slice(0,8)}...)`);let B={totalPages:p.pages.length,totalComponents:p.components.length,totalGraphQLOperations:p.graphqlOperations.length,totalDataFlows:p.dataFlows.length,authRequiredPages:p.pages.filter(c=>c.authentication.required).length,publicPages:p.pages.filter(c=>!c.authentication.required).length};return {name:a.name,displayName:a.displayName,version:e,commitHash:o,analysis:p,summary:B}}async getRepoInfo(a){try{let o=(await simpleGit(a.path).log({n:1})).latest?.hash||"unknown",s="unknown";try{let n=m.join(a.path,"package.json");s=JSON.parse(await d.readFile(n,"utf-8")).version||"unknown";}catch{}return {version:s,commitHash:o}}catch{return {version:"unknown",commitHash:"unknown"}}}createAnalyzer(a,t){switch(a){case "pages":if(t.type==="nextjs"||t.type==="rails"||t.type==="generic")return new b$2(t);break;case "graphql":return new c(t);case "dataflow":case "components":return new d$1(t);case "rest-api":case "api":return new e(t)}return null}mergeAnalysisResults(a,t,e,o){let s={repository:t,timestamp:new Date().toISOString(),version:e,commitHash:o,pages:[],graphqlOperations:[],apiCalls:[],components:[],dataFlows:[],apiEndpoints:[],models:[],crossRepoLinks:[]};for(let n of a)n.pages&&s.pages.push(...n.pages),n.graphqlOperations&&s.graphqlOperations.push(...n.graphqlOperations),n.apiCalls&&s.apiCalls.push(...n.apiCalls),n.components&&s.components.push(...n.components),n.dataFlows&&s.dataFlows.push(...n.dataFlows),n.apiEndpoints&&s.apiEndpoints.push(...n.apiEndpoints),n.models&&s.models.push(...n.models),n.crossRepoLinks&&s.crossRepoLinks.push(...n.crossRepoLinks);return s}analyzeCrossRepo(a){let t=[],e=[],o=[],s=[],n=new Map;for(let l of a)for(let h of l.analysis.graphqlOperations){let g=n.get(h.name)||[];g.push(l.name),n.set(h.name,g);}for(let[l,h]of n)h.length>1&&t.push(l);let i=a.filter(l=>l.analysis.pages.length>0),r=a.filter(l=>l.analysis.apiEndpoints.length>0);for(let l of i)for(let h of r)for(let g of h.analysis.apiEndpoints)e.push({frontend:l.name,backend:h.name,endpoint:g.path,operations:l.analysis.graphqlOperations.filter(p=>p.usedIn.length>0).map(p=>p.name)});return {sharedTypes:t,apiConnections:e,navigationFlows:o,dataFlowAcrossRepos:s}}extractCrossRepoLinks(a){let t=[],e=new Map;for(let o of a)for(let s of o.graphqlOperations){let n=e.get(s.name)||[];n.push(o),e.set(s.name,n);}for(let[o,s]of e)s.length>1&&t.push({sourceRepo:s[0].repository,sourcePath:`graphql/${o}`,targetRepo:s[1].repository,targetPath:`graphql/${o}`,linkType:"graphql-operation",description:`Shared GraphQL operation: ${o}`});return t}async writeDocumentation(a){let t=this.config.outputDir;await d.mkdir(t,{recursive:true});let e=this.markdownGenerator.generateDocumentation(a);for(let[s,n]of e){let i=m.join(t,s),r=m.dirname(i);await d.mkdir(r,{recursive:true}),await d.writeFile(i,n,"utf-8"),console.log(`  \u{1F4C4} ${s}`);}let o=m.join(t,"report.json");await d.writeFile(o,JSON.stringify(a,null,2),"utf-8"),console.log("  \u{1F4CB} report.json");}};function Q(u){return new Promise(a=>{let t=P.createServer();t.once("error",e=>{e.code,a(false);}),t.once("listening",()=>{t.close(),a(true);}),t.listen(u);})}async function O(u,a=10){for(let t=0;t<a;t++){let e=u+t;if(await Q(e))return e}throw new Error(`No available port found between ${u} and ${u+a-1}`)}var I=class{config;port;app;server;io;engine;currentReport=null;envResult=null;railsAnalysis=null;constructor(a,t=3030,e){this.config=a,this.port=t,this.app=F(),this.server=z.createServer(this.app),this.io=new Server(this.server),this.engine=new b(a,{noCache:e?.noCache}),this.setupRoutes(),this.setupSocketIO();}setupRoutes(){this.app.use("/assets",F.static(m.join(this.config.outputDir,"assets"))),["common.css","page-map.css","docs.css","rails-map.css"].forEach(t=>{this.app.get(`/${t}`,async(e,o)=>{let s=[m.join(m.dirname(new URL(import.meta.url).pathname),"generators","assets",t),m.join(m.dirname(new URL(import.meta.url).pathname),"..","generators","assets",t),m.join(process.cwd(),"dist","generators","assets",t),m.join(process.cwd(),"src","generators","assets",t)];for(let n of s)try{let i=await d.readFile(n,"utf-8");o.type("text/css").send(i);return}catch{}o.status(404).send("CSS not found");});}),this.app.get("/",(t,e)=>{e.redirect("/page-map");}),this.app.get("/page-map",(t,e)=>{if(!this.currentReport){e.status(503).send("Documentation not ready yet");return}let o=new a$1;e.send(o.generatePageMapHtml(this.currentReport,{envResult:this.envResult,railsAnalysis:this.railsAnalysis}));}),this.app.get("/rails-map",(t,e)=>{if(!this.railsAnalysis){e.status(404).send("No Rails environment detected");return}let o=new a$2;e.send(o.generateFromResult(this.railsAnalysis));}),this.app.get("/docs",async(t,e)=>{e.send(await this.renderPage("index"));}),this.app.get("/docs/*path",async(t,e)=>{let o=t.params.path,s=Array.isArray(o)?o.join("/"):o||"index";e.send(await this.renderPage(s));}),this.app.get("/api/report",(t,e)=>{e.json(this.currentReport);}),this.app.get("/api/env",(t,e)=>{e.json(this.envResult);}),this.app.get("/api/rails",(t,e)=>{this.railsAnalysis?e.json(this.railsAnalysis):e.status(404).json({error:"No Rails analysis available"});}),this.app.get("/api/diagram/:name",(t,e)=>{let o=this.currentReport?.diagrams.find(s=>s.title.toLowerCase().replace(/\s+/g,"-")===t.params.name);o?e.json(o):e.status(404).json({error:"Diagram not found"});}),this.app.post("/api/regenerate",async(t,e)=>{try{await this.regenerate(),e.json({success:!0});}catch(o){e.status(500).json({error:o.message});}});}setupSocketIO(){this.io.on("connection",a=>{console.log("Client connected"),a.on("disconnect",()=>{console.log("Client disconnected");});});}async renderPage(a){let t=a.replace(/\.md$/,""),e=m.join(this.config.outputDir,`${t}.md`),o="";try{let s=await d.readFile(e,"utf-8"),n=await marked.parse(s);n=n.replace(/<pre><code class="language-mermaid">([\s\S]*?)<\/code><\/pre>/g,'<div class="mermaid">$1</div>'),n=n.replace(/<table>/g,'<div class="table-wrapper"><table>'),n=n.replace(/<\/table>/g,"</table></div>"),o=n;}catch(s){console.error(`Failed to render page: ${e}`,s),o=`<h1>Page not found</h1><p>Path: ${t}</p>`;}return this.getHtmlTemplate(o)}getGraphQLData(){if(!this.currentReport)return "[]";let a=[];for(let t of this.currentReport.repositories)for(let e of t.analysis?.graphqlOperations||[])a.push({name:e.name,type:e.type,returnType:e.returnType,variables:e.variables,fields:e.fields,usedIn:e.usedIn});return JSON.stringify(a)}getApiCallsData(){if(!this.currentReport)return "[]";let a=[];for(let t of this.currentReport.repositories)for(let e of t.analysis?.apiCalls||[])a.push({id:e.id,method:e.method,url:e.url,callType:e.callType,filePath:e.filePath,line:e.line,containingFunction:e.containingFunction,requiresAuth:e.requiresAuth});return JSON.stringify(a)}getHtmlTemplate(a){let t=this.getGraphQLData(),e=this.getApiCallsData();return `<!DOCTYPE html>
-<html lang="ja">
+import {a as a$2}from'./chunk-OQAXO3X2.js';import {a as a$3}from'./chunk-VV3A3UE3.js';import {B,A as A$1,z,y}from'./chunk-TNUKDIO7.js';import {a,b}from'./chunk-HPBPEGHS.js';import {a as a$1}from'./chunk-GCIRJGW3.js';import {k}from'./chunk-H7VVRHQZ.js';import {simpleGit}from'simple-git';import*as u from'fs/promises';import*as d from'path';import E from'express';import {Server}from'socket.io';import*as O from'http';import {marked}from'marked';import*as C from'net';var v=class{config;mermaidGenerator;markdownGenerator;constructor(a$1){this.config=a$1,this.mermaidGenerator=new a,this.markdownGenerator=new b;}async generate(){let a=[];for(let r of this.config.repositories)try{let i=await this.analyzeRepository(r);a.push(i);}catch(i){console.error(`\u274C ${r.name}: ${i.message}`);}let s=this.analyzeCrossRepo(a),e=a.map(r=>r.analysis),n=this.extractCrossRepoLinks(e),t=this.mermaidGenerator.generateAll(e,n),o={generatedAt:new Date().toISOString(),repositories:a,crossRepoAnalysis:s,diagrams:t};return await this.writeDocumentation(o),o}async analyzeRepository(a){let{version:s,commitHash:e}=await this.getRepoInfo(a),n=a.analyzers.map(p=>this.createAnalyzer(p,a)).filter(p=>p!==null),t=Date.now(),o=await Promise.all(n.map(p=>p.analyze())),r=((Date.now()-t)/1e3).toFixed(1);console.log(`  Analyzed ${a.displayName} in ${r}s`);let i=this.mergeAnalysisResults(o,a.name,s,e);this.enrichPagesWithHookGraphQL(i);let l={totalPages:i.pages.length,totalComponents:i.components.length,totalGraphQLOperations:i.graphqlOperations.length,totalDataFlows:i.dataFlows.length,authRequiredPages:i.pages.filter(p=>p.authentication.required).length,publicPages:i.pages.filter(p=>!p.authentication.required).length};return {name:a.name,displayName:a.displayName,version:s,commitHash:e,analysis:i,summary:l}}async getRepoInfo(a){try{let n=(await simpleGit(a.path).log({n:1})).latest?.hash||"unknown",t="unknown";try{let o=d.join(a.path,"package.json");t=JSON.parse(await u.readFile(o,"utf-8")).version||"unknown";}catch{}return {version:t,commitHash:n}}catch{return {version:"unknown",commitHash:"unknown"}}}createAnalyzer(a,s){switch(a){case "pages":if(s.type==="nextjs"||s.type==="rails"||s.type==="generic")return new y(s);break;case "graphql":return new z(s);case "dataflow":case "components":return new A$1(s);case "rest-api":case "api":return new B(s)}return null}mergeAnalysisResults(a,s,e,n){let t={repository:s,timestamp:new Date().toISOString(),version:e,commitHash:n,pages:[],graphqlOperations:[],apiCalls:[],components:[],dataFlows:[],apiEndpoints:[],models:[],crossRepoLinks:[]};for(let o of a)o.pages&&t.pages.push(...o.pages),o.graphqlOperations&&t.graphqlOperations.push(...o.graphqlOperations),o.apiCalls&&t.apiCalls.push(...o.apiCalls),o.components&&t.components.push(...o.components),o.dataFlows&&t.dataFlows.push(...o.dataFlows),o.apiEndpoints&&t.apiEndpoints.push(...o.apiEndpoints),o.models&&t.models.push(...o.models),o.crossRepoLinks&&t.crossRepoLinks.push(...o.crossRepoLinks);return t}analyzeCrossRepo(a){let s=[],e=[],n=[],t=[],o=new Map;for(let l of a)for(let p of l.analysis.graphqlOperations){let c=o.get(p.name)||[];c.push(l.name),o.set(p.name,c);}for(let[l,p]of o)p.length>1&&s.push(l);let r=a.filter(l=>l.analysis.pages.length>0),i=a.filter(l=>l.analysis.apiEndpoints.length>0);for(let l of r)for(let p of i)for(let c of p.analysis.apiEndpoints)e.push({frontend:l.name,backend:p.name,endpoint:c.path,operations:l.analysis.graphqlOperations.filter(m=>m.usedIn.length>0).map(m=>m.name)});return {sharedTypes:s,apiConnections:e,navigationFlows:n,dataFlowAcrossRepos:t}}extractCrossRepoLinks(a){let s=[],e=new Map;for(let n of a)for(let t of n.graphqlOperations){let o=e.get(t.name)||[];o.push(n),e.set(t.name,o);}for(let[n,t]of e)t.length>1&&s.push({sourceRepo:t[0].repository,sourcePath:`graphql/${n}`,targetRepo:t[1].repository,targetPath:`graphql/${n}`,linkType:"graphql-operation",description:`Shared GraphQL operation: ${n}`});return s}enrichPagesWithHookGraphQL(a){let s=new Map;for(let t of a.graphqlOperations){if(!t.filePath)continue;let r=(t.filePath.split("/").pop()||"").replace(/\.(ts|tsx|js|jsx)$/,"");r.startsWith("use")&&(s.has(r)||s.set(r,new Set),s.get(r).add(t.name));}for(let t of a.components){if(t.type!=="hook")continue;let o=[];for(let r of t.hooks){let i=r.match(/^(Query|Mutation|Subscription):\s*(.+)$/);i&&o.push(i[2]);}if(o.length>0){s.has(t.name)||s.set(t.name,new Set);for(let r of o)s.get(t.name).add(r);}}let e=new Map;for(let t of a.graphqlOperations){if(t.type!=="query"&&t.type!=="mutation"&&t.type!=="subscription"||!t.filePath)continue;let o=t.filePath.replace(/\.(ts|tsx|js|jsx)$/,"");e.has(o)||e.set(o,[]),e.get(o).push({opName:t.name,opType:t.type});}let n=new Map;for(let t of a.graphqlOperations)(t.type==="query"||t.type==="mutation"||t.type==="subscription")&&n.set(t.name,t.type);for(let t of a.pages){let o=new Set(t.dataFetching.map(l=>l.operationName?.replace(/^[→\->\s]+/,"")||"")),r=a.components.find(l=>l.filePath===`src/pages/${t.filePath}`);if(!r)continue;let i=[];i.push(...r.hooks.filter(l=>l.startsWith("use")));for(let l of r.dependencies)l.startsWith("use")&&i.push(l);for(let l of i){let p=s.get(l);if(p)for(let c of p){if(o.has(c))continue;o.add(c);let m=n.get(c)||"query";t.dataFetching.push({type:m==="mutation"?"useMutation":"useQuery",operationName:c,source:`hook:${l}`});}}if(r.imports)for(let l of r.imports){let p=d.dirname(r.filePath),c=l.path;l.path.startsWith(".")?(c=d.join(p,l.path),c=d.normalize(c)):l.path.startsWith("@/")&&(c=l.path.replace("@/","src/")),c=c.replace(/\.(ts|tsx|js|jsx)$/,"");let m=e.get(c);if(m)for(let y of m)o.has(y.opName)||(o.add(y.opName),t.dataFetching.push({type:y.opType==="mutation"?"useMutation":"useQuery",operationName:y.opName,source:`import:${l.path}`}));}}for(let t of a.components){if(t.type!=="container"&&t.type!=="page")continue;let o=a.pages.find(i=>i.component===t.name||i.filePath?.includes(t.name));if(!o)continue;let r=new Set(o.dataFetching.map(i=>i.operationName?.replace(/^[→\->\s]+/,"")||""));for(let i of t.hooks){if(!i.startsWith("use"))continue;let l=s.get(i);if(l)for(let p of l){if(r.has(p))continue;r.add(p);let c=n.get(p)||"query";o.dataFetching.push({type:c==="mutation"?"useMutation":"useQuery",operationName:p,source:`component:${t.name}`});}}for(let i of t.dependencies){if(!i.startsWith("use"))continue;let l=s.get(i);if(l)for(let p of l){if(r.has(p))continue;r.add(p);let c=n.get(p)||"query";o.dataFetching.push({type:c==="mutation"?"useMutation":"useQuery",operationName:p,source:`component:${t.name}`});}}if(t.imports)for(let i of t.imports){let l=d.dirname(t.filePath),p=i.path;i.path.startsWith(".")?p=d.normalize(d.join(l,i.path)):i.path.startsWith("@/")&&(p=i.path.replace("@/","src/")),p=p.replace(/\.(ts|tsx|js|jsx)$/,"");let c=e.get(p);if(c)for(let m of c)r.has(m.opName)||(r.add(m.opName),o.dataFetching.push({type:m.opType==="mutation"?"useMutation":"useQuery",operationName:m.opName,source:`component:${t.name}`}));}}}async writeDocumentation(a){let s=this.config.outputDir;await u.mkdir(s,{recursive:true});let e=this.markdownGenerator.generateDocumentation(a);for(let[t,o]of e){let r=d.join(s,t),i=d.dirname(r);await u.mkdir(i,{recursive:true}),await u.writeFile(r,o,"utf-8");}let n=d.join(s,"report.json");await u.writeFile(n,JSON.stringify(a,null,2),"utf-8");}};function A(f){return new Promise(a=>{let s=C.createServer();s.once("error",e=>{e.code,a(false);}),s.once("listening",()=>{s.close(),a(true);}),s.listen(f);})}async function L(f,a=10){for(let s=0;s<a;s++){let e=f+s;if(await A(e))return e}throw new Error(`No available port found between ${f} and ${f+a-1}`)}var P=class{config;port;app;server;io;engine;currentReport=null;envResult=null;railsAnalysis=null;constructor(a,s=3030){this.config=a,this.port=s,this.app=E(),this.server=O.createServer(this.app),this.io=new Server(this.server),this.engine=new v(a),this.setupRoutes(),this.setupSocketIO();}setupRoutes(){this.app.use("/assets",E.static(d.join(this.config.outputDir,"assets"))),["common.css","page-map.css","docs.css","rails-map.css"].forEach(e=>{this.app.get(`/${e}`,async(n,t)=>{let o=[d.join(d.dirname(new URL(import.meta.url).pathname),"generators","assets",e),d.join(d.dirname(new URL(import.meta.url).pathname),"..","generators","assets",e),d.join(process.cwd(),"dist","generators","assets",e),d.join(process.cwd(),"src","generators","assets",e)];for(let r of o)try{let i=await u.readFile(r,"utf-8");t.type("text/css").send(i);return}catch{}t.status(404).send("CSS not found");});}),["favicon.ico","favicon.svg","favicon-96x96.png","apple-touch-icon.png","site.webmanifest","web-app-manifest-192x192.png","web-app-manifest-512x512.png"].forEach(e=>{(e==="favicon.ico"?[`/${e}`,`/favicon/${e}`]:[`/favicon/${e}`]).forEach(t=>{this.app.get(t,async(o,r)=>{let i=[d.join(d.dirname(new URL(import.meta.url).pathname),"generators","assets","favicon",e),d.join(d.dirname(new URL(import.meta.url).pathname),"..","generators","assets","favicon",e),d.join(process.cwd(),"dist","generators","assets","favicon",e),d.join(process.cwd(),"src","generators","assets","favicon",e)];for(let l of i)try{let p=await u.readFile(l),c=e.split(".").pop(),m={ico:"image/x-icon",svg:"image/svg+xml",png:"image/png",webmanifest:"application/manifest+json"};r.type(m[c||""]||"application/octet-stream").send(p);return}catch{}r.status(404).send("File not found");});});}),this.app.get("/",(e,n)=>{n.redirect("/page-map");}),this.app.get("/page-map",(e,n)=>{if(!this.currentReport){n.status(503).send("Documentation not ready yet");return}let t=new a$1;n.send(t.generatePageMapHtml(this.currentReport,{envResult:this.envResult,railsAnalysis:this.railsAnalysis}));}),this.app.get("/rails-map",(e,n)=>{if(!this.railsAnalysis){n.status(404).send("No Rails environment detected");return}let t=new a$2;n.send(t.generateFromResult(this.railsAnalysis));}),this.app.get("/docs",async(e,n)=>{n.send(await this.renderPage("index"));}),this.app.get("/docs/*path",async(e,n)=>{let t=e.params.path,o=Array.isArray(t)?t.join("/"):t||"index";n.send(await this.renderPage(o));}),this.app.get("/api/report",(e,n)=>{n.json(this.currentReport);}),this.app.get("/api/env",(e,n)=>{n.json(this.envResult);}),this.app.get("/api/rails",(e,n)=>{this.railsAnalysis?n.json(this.railsAnalysis):n.status(404).json({error:"No Rails analysis available"});}),this.app.get("/api/diagram/:name",(e,n)=>{let t=this.currentReport?.diagrams.find(o=>o.title.toLowerCase().replace(/\s+/g,"-")===e.params.name);t?n.json(t):n.status(404).json({error:"Diagram not found"});}),this.app.post("/api/regenerate",async(e,n)=>{try{await this.regenerate(),n.json({success:!0});}catch(t){n.status(500).json({error:t.message});}});}setupSocketIO(){this.io.on("connection",a=>{a.on("disconnect",()=>{});});}async renderPage(a){let s=a.replace(/\.md$/,""),e=d.join(this.config.outputDir,`${s}.md`),n="";try{let t=await u.readFile(e,"utf-8"),o=await marked.parse(t);o=o.replace(/<pre><code class="language-mermaid">([\s\S]*?)<\/code><\/pre>/g,'<div class="mermaid">$1</div>'),o=o.replace(/<table>/g,'<div class="table-wrapper"><table>'),o=o.replace(/<\/table>/g,"</table></div>"),n=o;}catch(t){let o=t;if(o.code==="ENOENT"){let r=this.currentReport?.repositories.map(i=>i.name)||[];n=`
+          <h1>Page not found</h1>
+          <p>The requested path <code>${s}</code> does not exist.</p>
+          ${r.length>0?`
+            <p>Available repositories:</p>
+            <ul>${r.map(i=>`<li><a href="/docs/repos/${i}">${i}</a></li>`).join("")}</ul>
+          `:""}
+          <p><a href="/">\u2190 Back to home</a></p>
+        `;}else console.error(`\u26A0\uFE0F Error reading ${e}: ${o.message}`),n=`<h1>Error</h1><p>Failed to load page: ${o.message}</p>`;}return this.getHtmlTemplate(n)}getGraphQLData(){if(!this.currentReport)return "[]";let a=[];for(let s of this.currentReport.repositories)for(let e of s.analysis?.graphqlOperations||[])a.push({name:e.name,type:e.type,returnType:e.returnType,variables:e.variables,fields:e.fields,usedIn:e.usedIn});return JSON.stringify(a)}getApiCallsData(){if(!this.currentReport)return "[]";let a=[];for(let s of this.currentReport.repositories)for(let e of s.analysis?.apiCalls||[])a.push({id:e.id,method:e.method,url:e.url,callType:e.callType,filePath:e.filePath,line:e.line,containingFunction:e.containingFunction,requiresAuth:e.requiresAuth});return JSON.stringify(a)}getHtmlTemplate(a){let s=this.getGraphQLData(),e=this.getApiCallsData();return `<!DOCTYPE html>
+<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${this.config.site.title}</title>
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg">
+  <link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
+  <link rel="manifest" href="/favicon/site.webmanifest">
   <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
   <script src="/socket.io/socket.io.js"></script>
   <script>
-    window.graphqlOps = ${t};
+    window.graphqlOps = ${s};
     window.apiCalls = ${e};
     // Create multiple lookup maps for different naming conventions
     window.gqlMap = new Map();
@@ -97,18 +104,18 @@ import {a as a$2}from'./chunk-H4YGP3GL.js';import {a as a$3}from'./chunk-VV3A3UE
         <div class="nav-group">
           <span class="nav-group-title">Documentation</span>
           <div class="nav-subitems">
-            ${this.config.repositories.map(o=>`
-              <a href="/docs/repos/${o.name}/pages">Pages</a>
-              <a href="/docs/repos/${o.name}/components">Components</a>
-              <a href="/docs/repos/${o.name}/graphql">GraphQL</a>
-              <a href="/docs/repos/${o.name}/dataflow">Data Flow</a>
+            ${this.config.repositories.map(n=>`
+              <a href="/docs/repos/${n.name}/pages">Pages</a>
+              <a href="/docs/repos/${n.name}/components">Components</a>
+              <a href="/docs/repos/${n.name}/graphql">GraphQL</a>
+              <a href="/docs/repos/${n.name}/dataflow">Data Flow</a>
             `).join("")}
           </div>
         </div>
         <div class="nav-group">
           <span class="nav-group-title">Analysis</span>
           <div class="nav-subitems">
-            <a href="/docs/cross-repo">Cross Repository</a>
+            ${this.config.repositories.length>1?'<a href="/docs/cross-repo">Cross Repository</a>':""}
             <a href="/docs/diagrams">Diagrams</a>
           </div>
         </div>
@@ -157,10 +164,10 @@ import {a as a$2}from'./chunk-H4YGP3GL.js';import {a as a$3}from'./chunk-VV3A3UE
         container.className = 'mermaid-container';
         container.innerHTML = \`
           <div class="mermaid-controls">
-            <button onclick="zoomDiagram(\${idx}, 0.8)" title="\u7E2E\u5C0F">\u2796</button>
-            <button onclick="zoomDiagram(\${idx}, 1.25)" title="\u62E1\u5927">\u2795</button>
-            <button onclick="zoomDiagram(\${idx}, 'reset')" title="\u30EA\u30BB\u30C3\u30C8">\u{1F504}</button>
-            <button onclick="toggleFullscreen(\${idx})" title="\u5168\u753B\u9762">\u26F6</button>
+            <button onclick="zoomDiagram(\${idx}, 0.8)" title="Zoom Out">\u2796</button>
+            <button onclick="zoomDiagram(\${idx}, 1.25)" title="Zoom In">\u2795</button>
+            <button onclick="zoomDiagram(\${idx}, 'reset')" title="Reset">\u{1F504}</button>
+            <button onclick="toggleFullscreen(\${idx})" title="Fullscreen">\u26F6</button>
           </div>
           <div class="mermaid-wrapper" id="wrapper-\${idx}">
             <div class="mermaid-inner" id="inner-\${idx}"></div>
@@ -925,7 +932,7 @@ import {a as a$2}from'./chunk-H4YGP3GL.js';import {a as a$3}from'./chunk-VV3A3UE
     async function regenerate() {
       try {
         const btn = document.querySelector('.regenerate-btn');
-        btn.textContent = '\u23F3 \u751F\u6210\u4E2D...';
+        btn.textContent = '\u23F3 Generating...';
         btn.disabled = true;
 
         const res = await fetch('/api/regenerate', { method: 'POST' });
@@ -934,24 +941,23 @@ import {a as a$2}from'./chunk-H4YGP3GL.js';import {a as a$3}from'./chunk-VV3A3UE
         if (data.success) {
           window.location.reload();
         } else {
-          alert('\u751F\u6210\u306B\u5931\u6557\u3057\u307E\u3057\u305F: ' + data.error);
+          alert('Generation failed: ' + data.error);
         }
       } catch (e) {
-        alert('\u30A8\u30E9\u30FC: ' + e.message);
+        alert('Error: ' + e.message);
       } finally {
         const btn = document.querySelector('.regenerate-btn');
-        btn.textContent = '\u{1F504} \u518D\u751F\u6210';
+        btn.textContent = '\u{1F504} Regenerate';
         btn.disabled = false;
       }
     }
   </script>
 </body>
-</html>`}async start(a=true){let t=this.config.repositories[0]?.path||process.cwd();if(console.log("\u{1F50D} Detecting project environments..."),this.envResult=await a$3(t),this.envResult.environments.length>0){console.log(`   Found: ${this.envResult.environments.map(e=>e.type).join(", ")}`);for(let e of this.envResult.environments)e.features.length>0&&console.log(`   ${e.type} features: ${e.features.join(", ")}`);}if(console.log(`
-\u{1F4DA} Generating documentation...`),this.currentReport=await this.engine.generate(),this.envResult.hasRails){console.log(`
-\u{1F6E4}\uFE0F  Analyzing Rails application...`);try{this.railsAnalysis=await k(t),console.log("   \u2705 Rails analysis complete");}catch(e){console.error("   \u26A0\uFE0F Rails analysis failed:",e.message);}}try{let e=await O(this.port);e!==this.port&&console.log(`
+</html>`}async start(a=true){let s=this.config.repositories[0]?.path||process.cwd();this.envResult=await a$3(s),this.currentReport=await this.engine.generate(),console.log();for(let e of this.currentReport.repositories){let n=e.summary;console.log(`  \u2705 ${e.displayName}`),console.log(`     ${n.totalPages} pages \xB7 ${n.totalComponents} components \xB7 ${n.totalGraphQLOperations} GraphQL \xB7 ${n.totalDataFlows} data flows`);}if(this.envResult.hasRails){console.log(`
+  Rails...`);try{this.railsAnalysis=await k(s);let e=this.railsAnalysis.summary;console.log(`    ${e.totalRoutes} routes \xB7 ${e.totalControllers} controllers \xB7 ${e.totalModels} models \xB7 ${e.totalGrpcServices} gRPC`);}catch(e){console.error("  \u26A0\uFE0F Rails analysis failed:",e.message);}}try{let e=await L(this.port);e!==this.port&&console.log(`
 \u26A0\uFE0F  Port ${this.port} is in use, using port ${e} instead`),this.port=e;}catch(e){console.error(`
 \u274C Failed to find available port: ${e.message}`),process.exit(1);}if(this.server.listen(this.port,()=>{console.log(`
 \u{1F310} Documentation server running at http://localhost:${this.port}`),this.envResult?.hasRails&&this.envResult?.hasNextjs&&console.log("   \u{1F4CA} Multiple environments detected - use tabs to switch views"),console.log(`   Press Ctrl+C to stop
 `);}),a){let e=(await import('open')).default;await e(`http://localhost:${this.port}`);}this.config.watch.enabled&&this.watchForChanges();}async regenerate(){if(console.log(`
-\u{1F504} Regenerating documentation...`),this.currentReport=await this.engine.generate(),this.envResult?.hasRails){let a=this.config.repositories[0]?.path||process.cwd();try{this.railsAnalysis=await k(a);}catch(t){console.error("\u26A0\uFE0F Rails re-analysis failed:",t.message);}}this.io.emit("reload"),console.log("\u2705 Documentation regenerated");}async watchForChanges(){let a=this.config.repositories.map(e=>e.path),t=null;for(let e of a)try{let o=d.watch(e,{recursive:!0});(async()=>{for await(let s of o)s.filename&&(s.filename.endsWith(".ts")||s.filename.endsWith(".tsx"))&&(t&&clearTimeout(t),t=setTimeout(async()=>{await this.regenerate();},this.config.watch.debounce));})();}catch(o){console.warn(`Warning: Could not watch directory ${e}:`,o.message);}}stop(){this.server.close(),console.log(`
-\u{1F44B} Server stopped`);}};export{b as a,I as b};
+\u{1F504} Regenerating...`),this.currentReport=await this.engine.generate(),this.envResult?.hasRails){let a=this.config.repositories[0]?.path||process.cwd();try{this.railsAnalysis=await k(a);}catch(s){console.error("\u26A0\uFE0F Rails re-analysis failed:",s.message);}}for(let a of this.currentReport.repositories)console.log(`  ${a.displayName}: ${a.summary.totalPages} pages \xB7 ${a.summary.totalComponents} components \xB7 ${a.summary.totalGraphQLOperations} GraphQL`);this.io.emit("reload"),console.log("\u2705 Done");}async watchForChanges(){let a=this.config.repositories.map(e=>e.path),s=null;for(let e of a)try{let n=u.watch(e,{recursive:!0});(async()=>{for await(let t of n)t.filename&&(t.filename.endsWith(".ts")||t.filename.endsWith(".tsx"))&&(s&&clearTimeout(s),s=setTimeout(async()=>{await this.regenerate();},this.config.watch.debounce));})();}catch(n){console.warn(`Warning: Could not watch directory ${e}:`,n.message);}}stop(){this.server.close(),console.log(`
+\u{1F44B} Server stopped`);}};export{v as a,P as b};

package/dist/{chunk-H4YGP3GL.js → chunk-OQAXO3X2.js}

@@ -1,10 +1,15 @@
-import {k}from'./chunk-PTR5IROV.js';import*as r from'fs';import*as c from'path';var o=class{constructor(t){this.rootPath=t;}result=null;async generate(t={}){if(!this.rootPath)throw new Error("Root path required for analysis");let{title:e="Rails Application Map"}=t;this.result=await k(this.rootPath);let a=this.generateHTML(e);return t.outputPath&&(r.writeFileSync(t.outputPath,a),console.log(`
-\u{1F4C4} Generated: ${t.outputPath}`)),a}generateFromResult(t,e="Rails Application Map"){return this.result=t,this.generateHTML(e)}generateHTML(t){if(!this.result)throw new Error("Analysis not run");let{routes:e,controllers:a,models:s,grpc:i,summary:l}=this.result;return `<!DOCTYPE html>
+import {k}from'./chunk-H7VVRHQZ.js';import*as d from'fs';import*as c from'path';var o=class{constructor(t){this.rootPath=t;}result=null;async generate(t={}){if(!this.rootPath)throw new Error("Root path required for analysis");let{title:e="Rails Application Map"}=t;this.result=await k(this.rootPath);let s=this.generateHTML(e);return t.outputPath&&(d.writeFileSync(t.outputPath,s),console.log(`
+\u{1F4C4} Generated: ${t.outputPath}`)),s}generateFromResult(t,e="Rails Application Map"){return this.result=t,this.generateHTML(e)}generateHTML(t){if(!this.result)throw new Error("Analysis not run");let{routes:e,controllers:s,models:a,grpc:l,summary:i}=this.result;return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${t}</title>
+  <title>${t} - Repomap</title>
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg">
+  <link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
+  <link rel="manifest" href="/favicon/site.webmanifest">
   <link rel="stylesheet" href="/rails-map.css">
 </head>
 <body>
@@ -18,25 +23,25 @@ import {k}from'./chunk-PTR5IROV.js';import*as r from'fs';import*as c from'path';
     <div class="stats-bar">
       <div class="stat active" data-view="routes">
         <div>
-          <div class="stat-value">${l.totalRoutes.toLocaleString()}</div>
+          <div class="stat-value">${i.totalRoutes.toLocaleString()}</div>
           <div class="stat-label">Routes</div>
         </div>
       </div>
       <div class="stat" data-view="controllers">
         <div>
-          <div class="stat-value">${l.totalControllers}</div>
+          <div class="stat-value">${i.totalControllers}</div>
           <div class="stat-label">Controllers</div>
         </div>
       </div>
       <div class="stat" data-view="models">
         <div>
-          <div class="stat-value">${l.totalModels}</div>
+          <div class="stat-value">${i.totalModels}</div>
           <div class="stat-label">Models</div>
         </div>
       </div>
       <div class="stat" data-view="grpc">
         <div>
-          <div class="stat-value">${l.totalGrpcServices}</div>
+          <div class="stat-value">${i.totalGrpcServices}</div>
           <div class="stat-label">gRPC</div>
         </div>
       </div>
@@ -57,7 +62,7 @@ import {k}from'./chunk-PTR5IROV.js';import*as r from'fs';import*as c from'path';
       </div>
 
       <div class="sidebar-section namespaces" id="namespaceFilter">
-        <div class="sidebar-title">Namespaces (${l.namespaces.length})</div>
+        <div class="sidebar-title">Namespaces (${i.namespaces.length})</div>
         <div class="namespace-list">
           <div class="namespace-item active" data-namespace="all">
             <span>All</span>
@@ -90,9 +95,9 @@ import {k}from'./chunk-PTR5IROV.js';import*as r from'fs';import*as c from'path';
   <script>
     // Data
     const routes = ${JSON.stringify(e.routes)};
-    const controllers = ${JSON.stringify(a.controllers)};
-    const models = ${JSON.stringify(s.models)};
-    const grpcServices = ${JSON.stringify(i.services)};
+    const controllers = ${JSON.stringify(s.controllers)};
+    const models = ${JSON.stringify(a.models)};
+    const grpcServices = ${JSON.stringify(l.services)};
 
     // State
     let currentView = 'routes';
@@ -575,6 +580,7 @@ import {k}from'./chunk-PTR5IROV.js';import*as r from'fs';import*as c from'path';
           // Re-render mermaid diagram
           container.removeAttribute('data-processed');
           window.mermaid.init(undefined, container);
+          setTimeout(initDiagramPanZoom, 100);
         } catch (e) {
           console.error('Mermaid error:', e);
         }
@@ -591,11 +597,304 @@ import {k}from'./chunk-PTR5IROV.js';import*as r from'fs';import*as c from'path';
         const diagram = document.getElementById('mermaid-diagram');
         if (diagram) {
           window.mermaid.init(undefined, diagram);
+          setTimeout(initDiagramPanZoom, 100);
         }
       };
       document.head.appendChild(script);
     }
 
+    // Pan and zoom functionality for mermaid diagram
+    function initDiagramPanZoom() {
+      const container = document.getElementById('mermaid-container');
+      const svg = container?.querySelector('svg');
+      if (!svg) return;
+
+      let scale = 1;
+      let translateX = 0;
+      let translateY = 0;
+      let isDragging = false;
+      let startX = 0;
+      let startY = 0;
+
+      // Style the container
+      container.style.overflow = 'hidden';
+      container.style.cursor = 'grab';
+      container.style.position = 'relative';
+      svg.style.transformOrigin = 'center center';
+      svg.style.transition = 'none';
+
+      // Create fullscreen modal INSIDE the container (important for fullscreen mode)
+      let fsModal = container.querySelector('#fs-detail-modal');
+      if (!fsModal) {
+        fsModal = document.createElement('div');
+        fsModal.id = 'fs-detail-modal';
+        fsModal.style.cssText = 'display:none;position:absolute;top:0;right:0;width:350px;height:100%;background:#161b22;z-index:100;overflow-y:auto;border-left:1px solid #30363d;';
+        container.appendChild(fsModal);
+      }
+
+      // Make SVG and all children clickable
+      svg.style.pointerEvents = 'all';
+      
+      // Direct click on SVG
+      svg.addEventListener('click', (e) => {
+        console.log('[Diagram] Click detected on:', e.target.tagName, e.target.textContent?.substring(0, 30));
+        
+        // Don't handle if it was dragging
+        if (isDragging) return;
+        
+        // Find model name from clicked element or nearby
+        let modelName = null;
+        let searchEl = e.target;
+        
+        // First check if clicked element itself has model name
+        if (searchEl.textContent) {
+          const text = searchEl.textContent.trim();
+          if (/^[A-Z][a-zA-Z0-9_]+$/.test(text) && text.length > 2) {
+            modelName = text;
+          }
+        }
+        
+        // Search parent elements
+        if (!modelName) {
+          for (let i = 0; i < 10 && searchEl && searchEl !== svg; i++) {
+            // Look for text elements in this group
+            const texts = searchEl.querySelectorAll ? searchEl.querySelectorAll('text') : [];
+            for (const t of texts) {
+              const text = t.textContent?.trim();
+              if (text && /^[A-Z][a-zA-Z0-9_]+$/.test(text) && text.length > 2) {
+                modelName = text;
+                break;
+              }
+            }
+            if (modelName) break;
+            searchEl = searchEl.parentElement;
+          }
+        }
+
+        console.log('[Diagram] Found model:', modelName);
+        
+        if (modelName) {
+          // Show in fullscreen modal if in fullscreen, otherwise normal panel
+          if (document.fullscreenElement) {
+            console.log('[Diagram] Showing in fullscreen modal');
+            showModelDetailInModal(modelName);
+          } else {
+            console.log('[Diagram] Showing in detail panel');
+            showModelDetail(modelName);
+          }
+        }
+      });
+
+      // Function to show detail in fullscreen modal
+      window.showModelDetailInModal = (modelOrName) => {
+        let model = modelOrName;
+        if (typeof modelOrName === 'string') {
+          const normalizedName = modelOrName.replace(/_/g, '');
+          model = models.find(m => {
+            const className = (m.className || m.name || '').replace(/[^a-zA-Z0-9]/g, '');
+            return className.toLowerCase() === normalizedName.toLowerCase();
+          });
+        }
+        
+        // Find modal inside the container
+        const modal = container.querySelector('#fs-detail-modal');
+        if (!modal) {
+          console.error('[Diagram] Modal not found in container');
+          return;
+        }
+        
+        if (!model) {
+          modal.innerHTML = \`
+            <div style="padding:16px;">
+              <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
+                <strong>Model Not Found</strong>
+                <button onclick="document.getElementById('fs-detail-modal').style.display='none'" style="background:none;border:none;color:var(--text-primary);font-size:20px;cursor:pointer;">\xD7</button>
+              </div>
+              <p>Model "\${modelOrName}" not found.</p>
+            </div>
+          \`;
+          modal.style.display = 'block';
+          return;
+        }
+        
+        modal.innerHTML = \`
+          <div style="padding:16px;">
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
+              <strong>\${model.className}</strong>
+              <button onclick="document.getElementById('fs-detail-modal').style.display='none'" style="background:none;border:none;color:var(--text-primary);font-size:20px;cursor:pointer;">\xD7</button>
+            </div>
+            <div style="color:var(--text-secondary);margin-bottom:16px;">extends \${model.parentClass}</div>
+            \${model.associations.length > 0 ? \`
+              <div style="margin-bottom:16px;">
+                <div style="font-weight:600;margin-bottom:8px;">Associations (\${model.associations.length})</div>
+                \${model.associations.slice(0, 15).map(a => \`
+                  <div style="padding:4px 0;font-size:13px;">
+                    <span style="background:var(--accent-blue);padding:2px 6px;border-radius:3px;font-size:11px;margin-right:6px;">\${a.type}</span>
+                    :\${a.name}
+                    \${a.through ? \`<small style="color:var(--text-secondary);"> through: \${a.through}</small>\` : ''}
+                  </div>
+                \`).join('')}
+              </div>
+            \` : ''}
+            \${model.validations.length > 0 ? \`
+              <div style="margin-bottom:16px;">
+                <div style="font-weight:600;margin-bottom:8px;">Validations (\${model.validations.length})</div>
+                \${model.validations.slice(0, 10).map(v => \`
+                  <div style="padding:4px 0;font-size:13px;">
+                    <span style="background:var(--accent-green);padding:2px 6px;border-radius:3px;font-size:11px;margin-right:6px;">\${v.type}</span>
+                    \${v.attributes.join(', ')}
+                  </div>
+                \`).join('')}
+              </div>
+            \` : ''}
+            \${model.scopes.length > 0 ? \`
+              <div style="margin-bottom:16px;">
+                <div style="font-weight:600;margin-bottom:8px;">Scopes (\${model.scopes.length})</div>
+                \${model.scopes.map(s => \`<div style="padding:4px 0;font-size:13px;"><span style="background:var(--accent-orange);padding:2px 6px;border-radius:3px;font-size:11px;margin-right:6px;">scope</span>\${s.name}</div>\`).join('')}
+              </div>
+            \` : ''}
+          </div>
+        \`;
+        modal.style.display = 'block';
+      };
+
+      // Close modal on ESC
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+          const modal = container.querySelector('#fs-detail-modal');
+          if (modal) modal.style.display = 'none';
+        }
+      });
+
+      // Add zoom controls
+      const controls = document.createElement('div');
+      controls.className = 'diagram-controls';
+      controls.innerHTML = \`
+        <button onclick="diagramZoom(0.2)" title="Zoom In">+</button>
+        <button onclick="diagramZoom(-0.2)" title="Zoom Out">\u2212</button>
+        <button onclick="diagramReset()" title="Reset">\u27F2</button>
+        <button onclick="diagramFullscreen()" title="Fullscreen" id="fullscreen-btn">\u26F6</button>
+      \`;
+      controls.style.cssText = 'position:absolute;top:8px;right:8px;display:flex;gap:4px;z-index:10';
+      container.appendChild(controls);
+
+      // Fullscreen change handler
+      document.addEventListener('fullscreenchange', () => {
+        const btn = document.getElementById('fullscreen-btn');
+        if (document.fullscreenElement) {
+          if (btn) {
+            btn.textContent = '\u26F6';
+            btn.title = 'Exit Fullscreen';
+          }
+          container.style.background = '#1e1e1e';
+        } else {
+          if (btn) {
+            btn.textContent = '\u26F6';
+            btn.title = 'Fullscreen';
+          }
+          container.style.background = '';
+          // Hide fullscreen modal when exiting
+          const modal = container.querySelector('#fs-detail-modal');
+          if (modal) modal.style.display = 'none';
+        }
+      });
+
+      function updateTransform() {
+        svg.style.transform = \`translate(\${translateX}px, \${translateY}px) scale(\${scale})\`;
+      }
+
+      // Mouse wheel zoom
+      container.addEventListener('wheel', (e) => {
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? -0.1 : 0.1;
+        scale = Math.max(0.3, Math.min(3, scale + delta));
+        updateTransform();
+      }, { passive: false });
+
+      // Touch pinch zoom
+      let lastTouchDist = 0;
+      container.addEventListener('touchstart', (e) => {
+        if (e.touches.length === 2) {
+          lastTouchDist = Math.hypot(
+            e.touches[0].clientX - e.touches[1].clientX,
+            e.touches[0].clientY - e.touches[1].clientY
+          );
+        } else if (e.touches.length === 1) {
+          isDragging = true;
+          startX = e.touches[0].clientX - translateX;
+          startY = e.touches[0].clientY - translateY;
+        }
+      });
+
+      container.addEventListener('touchmove', (e) => {
+        if (e.touches.length === 2) {
+          e.preventDefault();
+          const dist = Math.hypot(
+            e.touches[0].clientX - e.touches[1].clientX,
+            e.touches[0].clientY - e.touches[1].clientY
+          );
+          const delta = (dist - lastTouchDist) * 0.01;
+          scale = Math.max(0.3, Math.min(3, scale + delta));
+          lastTouchDist = dist;
+          updateTransform();
+        } else if (e.touches.length === 1 && isDragging) {
+          translateX = e.touches[0].clientX - startX;
+          translateY = e.touches[0].clientY - startY;
+          updateTransform();
+        }
+      }, { passive: false });
+
+      container.addEventListener('touchend', () => { isDragging = false; });
+
+      // Mouse drag pan
+      container.addEventListener('mousedown', (e) => {
+        isDragging = true;
+        container.style.cursor = 'grabbing';
+        startX = e.clientX - translateX;
+        startY = e.clientY - translateY;
+      });
+
+      container.addEventListener('mousemove', (e) => {
+        if (!isDragging) return;
+        translateX = e.clientX - startX;
+        translateY = e.clientY - startY;
+        updateTransform();
+      });
+
+      container.addEventListener('mouseup', () => {
+        isDragging = false;
+        container.style.cursor = 'grab';
+      });
+
+      container.addEventListener('mouseleave', () => {
+        isDragging = false;
+        container.style.cursor = 'grab';
+      });
+
+      // Global functions for controls
+      window.diagramZoom = (delta) => {
+        scale = Math.max(0.3, Math.min(3, scale + delta));
+        updateTransform();
+      };
+
+      window.diagramReset = () => {
+        scale = 1;
+        translateX = 0;
+        translateY = 0;
+        updateTransform();
+      };
+
+      window.diagramFullscreen = () => {
+        if (document.fullscreenElement) {
+          document.exitFullscreen();
+        } else {
+          container.requestFullscreen().catch(err => {
+            console.error('Fullscreen error:', err);
+          });
+        }
+      };
+    }
+
     function highlightParams(path) {
       return path.replace(/:([a-zA-Z_]+)/g, '<span class="param">:$1</span>');
     }
@@ -719,7 +1018,32 @@ import {k}from'./chunk-PTR5IROV.js';import*as r from'fs';import*as c from'path';
       \`;
     }
 
-    function showModelDetail(model) {
+    function showModelDetail(modelOrName) {
+      // Support both model object and model name string
+      let model = modelOrName;
+      if (typeof modelOrName === 'string') {
+        const normalizedName = modelOrName.replace(/_/g, '');
+        model = models.find(m => {
+          const className = (m.className || m.name || '').replace(/[^a-zA-Z0-9]/g, '');
+          return className.toLowerCase() === normalizedName.toLowerCase();
+        });
+        if (!model) {
+          detailPanel.innerHTML = \`
+            <div class="detail-header">
+              <div class="detail-title">Model Not Found</div>
+              <button class="close-btn" onclick="clearDetail()">\xD7</button>
+            </div>
+            <div class="detail-content">
+              <div class="empty-state">
+                <div>Model "\${modelOrName}" not found in analysis data.</div>
+              </div>
+            </div>
+          \`;
+          detailPanel.classList.add('open');
+          return;
+        }
+      }
+      detailPanel.classList.add('open');
       detailPanel.innerHTML = \`
         <div class="detail-header">
           <div class="detail-title">Model Details</div>
@@ -791,15 +1115,15 @@ import {k}from'./chunk-PTR5IROV.js';import*as r from'fs';import*as c from'path';
     renderMainPanel();
   </script>
 </body>
-</html>`}generateNamespaceList(t){let e=new Map;for(let s of t){let i=s.namespace||"root";e.set(i,(e.get(i)||0)+1);}return [...e.entries()].sort((s,i)=>i[1]-s[1]).map(([s,i])=>`
-      <div class="namespace-item" data-namespace="${s==="root"?"":s}">
-        <span>${s}</span>
-        <span class="namespace-count">${i}</span>
+</html>`}generateNamespaceList(t){let e=new Map;for(let a of t){let l=a.namespace||"root";e.set(l,(e.get(l)||0)+1);}return [...e.entries()].sort((a,l)=>l[1]-a[1]).map(([a,l])=>`
+      <div class="namespace-item" data-namespace="${a==="root"?"":a}">
+        <span>${a}</span>
+        <span class="namespace-count">${l}</span>
       </div>
-    `).join("")}generateMethodFilters(t){let e=["GET","POST","PUT","PATCH","DELETE"],a=new Map;for(let s of t)a.set(s.method,(a.get(s.method)||0)+1);return e.map(s=>`
-      <div class="namespace-item" data-method="${s}">
-        <span class="method-badge method-${s}">${s}</span>
-        <span class="namespace-count">${a.get(s)||0}</span>
+    `).join("")}generateMethodFilters(t){let e=["GET","POST","PUT","PATCH","DELETE"],s=new Map;for(let a of t)s.set(a.method,(s.get(a.method)||0)+1);return e.map(a=>`
+      <div class="namespace-item" data-method="${a}">
+        <span class="method-badge method-${a}">${a}</span>
+        <span class="namespace-count">${s.get(a)||0}</span>
       </div>
     `).join("")}generateRoutesView(t){return `
       <div class="panel-header">
@@ -814,8 +1138,8 @@ import {k}from'./chunk-PTR5IROV.js';import*as r from'fs';import*as c from'path';
           </tr>
         </thead>
         <tbody>
-          ${t.slice(0,200).map((e,a)=>`
-            <tr data-type="route" data-index="${a}">
+          ${t.slice(0,200).map((e,s)=>`
+            <tr data-type="route" data-index="${s}">
               <td><span class="method-badge method-${e.method}">${e.method}</span></td>
               <td class="path-text">${this.highlightParams(e.path)}</td>
               <td class="controller-text">${e.controller}#${e.action}</td>