@wtdlee/repomap 0.9.1 → 0.10.0

package/README.md

@@ -50,6 +50,7 @@ Powered by [SWC](https://swc.rs/) for blazing-fast AST parsing. Analyze large-sc
 - **Field details** - View all fields with types and arguments
 - **Usage tracking** - See where operations are used in components
 - **Component integration** - Track GraphQL usage through component dependencies
+- **Custom wrapper hooks** - Configurable hook presets/patterns (Apollo/urql/Relay/custom)
 
 ### 📊 Data Flow
 - **Visual diagrams** - Mermaid-generated flowcharts
@@ -425,6 +426,7 @@ export default config;
 - Auto-generated markdown documentation
 - Navigation sidebar
 - Syntax-highlighted code blocks
+- Coverage metrics (parse failures, codegen detection) to prevent silent omissions
 
 ## Supported Frameworks
 
@@ -466,6 +468,7 @@ interface AnalysisResult {
   timestamp: string;
   version: string;
   commitHash: string;
+  coverage?: CoverageMetrics;
   pages: PageInfo[];
   graphqlOperations: GraphQLOperation[];
   apiCalls: APICall[];
@@ -476,6 +479,15 @@ interface AnalysisResult {
   crossRepoLinks: CrossRepoLink[];
 }
 
+interface CoverageMetrics {
+  tsFilesScanned: number;
+  tsParseFailures: number;
+  graphqlParseFailures: number;
+  codegenFilesDetected: number;
+  codegenFilesParsed: number;
+  codegenExportsFound: number;
+}
+
 // Report
 interface DocumentationReport {
   generatedAt: string;

package/dist/analyzers/index.d.ts

@@ -1,5 +1,5 @@
-import { B as BaseAnalyzer } from '../dataflow-analyzer-CJ2T0cGS.js';
-export { D as DataFlowAnalyzer, G as GraphQLAnalyzer, P as PagesAnalyzer } from '../dataflow-analyzer-CJ2T0cGS.js';
+import { B as BaseAnalyzer } from '../dataflow-analyzer-DIUsRpvv.js';
+export { D as DataFlowAnalyzer, G as GraphQLAnalyzer, P as PagesAnalyzer } from '../dataflow-analyzer-DIUsRpvv.js';
 import { Module, CallExpression } from '@swc/core';
 import { DataFetchingInfo, RepositoryConfig, AnalysisResult } from '../types.js';
 
@@ -33,7 +33,7 @@ declare const HOOK_TYPE_MAP: Record<string, DataFetchingInfo['type']>;
 /**
  * Keywords that indicate GraphQL usage in a file
  */
-declare const GRAPHQL_INDICATORS: readonly ["Document", "useQuery", "useMutation", "useLazyQuery", "useSuspenseQuery", "useBackgroundQuery", "useSubscription", "Query", "Mutation", "gql", "graphql", "GET_", "FETCH_", "SEARCH_", "CREATE_", "UPDATE_", "DELETE_", "SUBSCRIBE_", "@apollo", "ApolloClient"];
+declare const GRAPHQL_INDICATORS: readonly ["Document", "useQuery", "useMutation", "useLazyQuery", "useSuspenseQuery", "useBackgroundQuery", "useSubscription", "Query", "Mutation", "gql", "graphql", "GET_", "FETCH_", "SEARCH_", "CREATE_", "UPDATE_", "DELETE_", "SUBSCRIBE_", "@apollo", "ApolloClient", "@urql", "urql", "react-relay", "Relay"];
 /**
  * Context extracted from a file for GraphQL operation resolution
  */
@@ -62,23 +62,23 @@ interface ExtractedGraphQLOperation {
 /**
  * Check if a hook name is a GraphQL query hook
  */
-declare function isQueryHook(hookName: string): boolean;
+declare function isQueryHook(hookName: string, extraHookPatterns?: string[]): boolean;
 /**
  * Check if a hook name is a GraphQL mutation hook
  */
-declare function isMutationHook(hookName: string): boolean;
+declare function isMutationHook(hookName: string, extraHookPatterns?: string[]): boolean;
 /**
  * Check if a hook name is a GraphQL subscription hook
  */
-declare function isSubscriptionHook(hookName: string): boolean;
+declare function isSubscriptionHook(hookName: string, extraHookPatterns?: string[]): boolean;
 /**
  * Check if a hook name is any GraphQL hook
  */
-declare function isGraphQLHook(hookName: string): boolean;
+declare function isGraphQLHook(hookName: string, extraHookPatterns?: string[]): boolean;
 /**
  * Get the data fetching type for a hook
  */
-declare function getHookType(hookName: string): DataFetchingInfo['type'];
+declare function getHookType(hookName: string, extraHookPatterns?: string[]): DataFetchingInfo['type'];
 /**
  * Check if content has any GraphQL indicators
  */

package/dist/analyzers/index.js

@@ -1 +1 @@
-export{e as ALL_GRAPHQL_HOOKS,a as BaseAnalyzer,A as DataFlowAnalyzer,g as GRAPHQL_INDICATORS,c as GRAPHQL_MUTATION_HOOKS,d as GRAPHQL_OTHER_HOOKS,b as GRAPHQL_QUERY_HOOKS,z as GraphQLAnalyzer,f as HOOK_TYPE_MAP,y as PagesAnalyzer,B as RestApiAnalyzer,n as cleanOperationName,r as extractGraphQLContext,w as extractGraphQLOperationsFromFile,s as extractOperationNameFromGqlCall,t as extractOperationNameFromTemplate,p as getCalleeName,x as getHookInfoString,l as getHookType,u as hasGraphQLArgument,m as hasGraphQLIndicators,k as isGraphQLHook,i as isMutationHook,h as isQueryHook,j as isSubscriptionHook,o as parseToAst,v as resolveOperationName,q as traverseAst}from'../chunk-QDVE7MT3.js';
+export{f as ALL_GRAPHQL_HOOKS,a as BaseAnalyzer,B as DataFlowAnalyzer,h as GRAPHQL_INDICATORS,d as GRAPHQL_MUTATION_HOOKS,e as GRAPHQL_OTHER_HOOKS,c as GRAPHQL_QUERY_HOOKS,A as GraphQLAnalyzer,g as HOOK_TYPE_MAP,z as PagesAnalyzer,C as RestApiAnalyzer,o as cleanOperationName,s as extractGraphQLContext,x as extractGraphQLOperationsFromFile,t as extractOperationNameFromGqlCall,u as extractOperationNameFromTemplate,q as getCalleeName,y as getHookInfoString,m as getHookType,v as hasGraphQLArgument,n as hasGraphQLIndicators,l as isGraphQLHook,j as isMutationHook,i as isQueryHook,k as isSubscriptionHook,p as parseToAst,w as resolveOperationName,r as traverseAst}from'../chunk-IGRCLYVZ.js';import'../chunk-ZWRDP37E.js';

package/dist/{chunk-WZAAA7DS.js → chunk-ATRSGO6O.js}

@@ -1,4 +1,4 @@
-var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let r=[],f=n?.envResult,t=n?.railsAnalysis,l=n?.activeTab||"pages",e=s.repositories[0]?.displayName||s.repositories[0]?.name||"Repository";for(let p of s.repositories){this.graphqlOps.push(...p.analysis?.graphqlOperations||[]),this.apiCalls.push(...p.analysis?.apiCalls||[]);let u=p.analysis?.components||[];for(let a of u)this.components.push({name:a.name,filePath:a.filePath,type:a.type,dependencies:a.dependencies||[],hooks:a.hooks||[]});}for(let p of s.repositories){let u=p.analysis?.pages||[];for(let a of u)r.push({...a,repo:p.name,children:[],parent:null,depth:0});}let{rootPages:i,relations:o}=this.buildHierarchy(r);return this.renderPageMapHtml(r,i,o,e,{envResult:f,railsAnalysis:t,activeTab:l})}buildHierarchy(s){let n=new Map,r=[];for(let t of s)n.set(t.path,t);for(let t of s){let l=t.path.split("/").filter(Boolean);for(let e=l.length-1;e>=1;e--){let i="/"+l.slice(0,e).join("/"),o=n.get(i);if(o){t.parent=i,t.depth=o.depth+1,o.children.includes(t.path)||o.children.push(t.path),r.push({from:i,to:t.path,type:"parent-child",description:`Sub-page of ${i}`});break}}if(t.parent||(t.depth=Math.max(0,l.length-1)),t.layout)for(let e of s)e.path!==t.path&&e.layout===t.layout&&(r.find(o=>o.type==="same-layout"&&(o.from===t.path&&o.to===e.path||o.from===e.path&&o.to===t.path))||r.push({from:t.path,to:e.path,type:"same-layout",description:`Both use ${t.layout}`}));}return {rootPages:s.filter(t=>!t.parent).sort((t,l)=>t.path.localeCompare(l.path)),relations:r}}renderPageMapHtml(s,n,r,f,t){let l=t?.envResult,e=t?.railsAnalysis,i=t?.activeTab||"pages",o=JSON.stringify(this.graphqlOps.map(c=>({name:c.name,type:c.type,variables:c.variables,fields:c.fields,returnType:c.returnType,usedIn:c.usedIn}))),p=JSON.stringify(this.components),u=e?JSON.stringify(e.routes.routes):"[]",a=e?JSON.stringify(e.controllers.controllers):"[]",m=e?JSON.stringify(e.models.models):"[]",v=e?JSON.stringify(e.views):'{ "views": [], "pages": [], "summary": {} }',y=e?JSON.stringify(e.react):'{ "components": [], "entryPoints": [], "summary": {} }',d=e?JSON.stringify(e.grpc):'{ "services": [] }',C=e?JSON.stringify(e.summary):"null",h=l?.hasRails||false,b=l?.hasNextjs||false,w=l?.hasReact||false,x=new Map;for(let c of s){let g=c.path.split("/").filter(Boolean)[0]||"root";x.has(g)||x.set(g,[]),x.get(g)?.push(c);}return `<!DOCTYPE html>
+var E=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(i,n){let r=[],u=n?.envResult,t=n?.railsAnalysis,o=n?.activeTab||"pages",e=i.repositories[0]?.displayName||i.repositories[0]?.name||"Repository";for(let p of i.repositories){this.graphqlOps.push(...p.analysis?.graphqlOperations||[]),this.apiCalls.push(...p.analysis?.apiCalls||[]);let g=p.analysis?.components||[];for(let a of g)this.components.push({name:a.name,filePath:a.filePath,type:a.type,dependencies:a.dependencies||[],hooks:a.hooks||[]});}for(let p of i.repositories){let g=p.analysis?.pages||[];for(let a of g)r.push({...a,repo:p.name,children:[],parent:null,depth:0});}let{rootPages:l,relations:s}=this.buildHierarchy(r);return this.renderPageMapHtml(r,l,s,e,{envResult:u,railsAnalysis:t,activeTab:o})}buildHierarchy(i){let n=new Map,r=[];for(let t of i)n.set(t.path,t);for(let t of i){let o=t.path.split("/").filter(Boolean);for(let e=o.length-1;e>=1;e--){let l="/"+o.slice(0,e).join("/"),s=n.get(l);if(s){t.parent=l,t.depth=s.depth+1,s.children.includes(t.path)||s.children.push(t.path),r.push({from:l,to:t.path,type:"parent-child",description:`Sub-page of ${l}`});break}}if(t.parent||(t.depth=Math.max(0,o.length-1)),t.layout)for(let e of i)e.path!==t.path&&e.layout===t.layout&&(r.find(s=>s.type==="same-layout"&&(s.from===t.path&&s.to===e.path||s.from===e.path&&s.to===t.path))||r.push({from:t.path,to:e.path,type:"same-layout",description:`Both use ${t.layout}`}));}return {rootPages:i.filter(t=>!t.parent).sort((t,o)=>t.path.localeCompare(o.path)),relations:r}}renderPageMapHtml(i,n,r,u,t){let o=t?.envResult,e=t?.railsAnalysis,l=t?.activeTab||"pages",s=c=>JSON.stringify(c).replace(/</g,"\\u003c"),p=s(this.graphqlOps.map(c=>({name:c.name,type:c.type,variables:c.variables,fields:c.fields,returnType:c.returnType,usedIn:c.usedIn}))),g=s(this.components),a=s(i),h=s(r),v=s(this.apiCalls),y=e?s(e.routes.routes):"[]",d=e?s(e.controllers.controllers):"[]",w=e?s(e.models.models):"[]",C=e?s(e.views):'{ "views": [], "pages": [], "summary": {} }',P=e?s(e.react):'{ "components": [], "entryPoints": [], "summary": {} }',x=e?s(e.grpc):'{ "services": [] }',S=e?s(e.summary):"null",m=o?.hasRails||false,f=o?.hasNextjs||false,R=o?.hasReact||false,b=new Map;for(let c of i){let k=c.path.split("/").filter(Boolean)[0]||"root";b.has(k)||b.set(k,[]),b.get(k)?.push(c);}return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -14,17 +14,17 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
 <body>
   <header class="header">
     <div style="display:flex;align-items:center;gap:24px">
-      <h1 style="cursor:pointer" onclick="location.href='/'">\u{1F4CA} ${f}</h1>
+      <h1 style="cursor:pointer" onclick="location.href='/'">\u{1F4CA} ${u}</h1>
       <nav style="display:flex;gap:4px">
-        <a href="/page-map" class="nav-link ${i==="pages"?"active":""}">Page Map</a>
-        ${h?`<a href="/rails-map" class="nav-link ${i==="rails"?"active":""}">Rails Map</a>`:""}
+        <a href="/page-map" class="nav-link ${l==="pages"?"active":""}">Page Map</a>
+        ${m?`<a href="/rails-map" class="nav-link ${l==="rails"?"active":""}">Rails Map</a>`:""}
         <a href="/docs" class="nav-link">Docs</a>
         <a href="/api/report" class="nav-link" target="_blank">API</a>
       </nav>
     </div>
     <div style="display:flex;gap:12px;align-items:center">
       <!-- Environment filter badges -->
-      ${h&&b?`<div class="env-filters" style="display:flex;gap:4px;margin-right:8px">
+      ${m&&f?`<div class="env-filters" style="display:flex;gap:4px;margin-right:8px">
           <button class="env-badge env-badge-active" data-env="all" onclick="filterByEnv('all')">All</button>
           <button class="env-badge" data-env="nextjs" onclick="filterByEnv('nextjs')">\u269B\uFE0F Next.js</button>
           <button class="env-badge" data-env="rails" onclick="filterByEnv('rails')">\u{1F6E4}\uFE0F Rails</button>
@@ -63,13 +63,13 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
       <!-- Frontend Stats -->
       <h3 style="margin-top:16px;font-size:10px;text-transform:uppercase;color:var(--text2);letter-spacing:1px">Frontend</h3>
       <div class="stats" id="stats-container">
-        <div class="stat" data-filter="pages"><div class="stat-val">${s.length}</div><div class="stat-label">Pages</div></div>
+        <div class="stat" data-filter="pages"><div class="stat-val">${i.length}</div><div class="stat-label">Pages</div></div>
         <div class="stat" data-filter="hierarchies"><div class="stat-val">${r.filter(c=>c.type==="parent-child").length}</div><div class="stat-label">Hierarchies</div></div>
         <div class="stat" data-filter="graphql"><div class="stat-val">${this.graphqlOps.length}</div><div class="stat-label">GraphQL</div></div>
         <div class="stat" data-filter="restapi"><div class="stat-val">${this.apiCalls.length}</div><div class="stat-label">REST API</div></div>
       </div>
 
-      ${h&&e?`
+      ${m&&e?`
       <!-- Rails Stats -->
       <h3 style="margin-top:16px;font-size:10px;text-transform:uppercase;color:var(--text2);letter-spacing:1px;cursor:pointer" onclick="switchToRailsTab()">Rails Backend</h3>
       <div class="stats" id="rails-stats">
@@ -84,19 +84,19 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
 
     <div class="content">
       <!-- Pages Tree View (for all screens - Next.js/React/Rails) -->
-      <div class="tree-view ${i==="pages"?"active":""}" id="tree-view" data-tab="pages">
-        ${s.length>0?this.buildTreeHtml(x,s):""}
-        <div id="page-map-react-components-section" style="${h?"margin-top:20px;border-top:1px solid var(--bg3);padding-top:20px":""}">
+      <div class="tree-view ${l==="pages"?"active":""}" id="tree-view" data-tab="pages">
+        ${i.length>0?this.buildTreeHtml(b,i):""}
+        <div id="page-map-react-components-section" style="${m?"margin-top:20px;border-top:1px solid var(--bg3);padding-top:20px":""}">
         </div>
-        <div id="page-map-rails-section" style="${s.length>0&&h?"margin-top:20px;border-top:1px solid var(--bg3);padding-top:20px":""}">
-          ${h&&s.length===0?'<div class="empty-state-sm">Loading screens...</div>':""}
+        <div id="page-map-rails-section" style="${i.length>0&&m?"margin-top:20px;border-top:1px solid var(--bg3);padding-top:20px":""}">
+          ${m&&i.length===0?'<div class="empty-state-sm">Loading screens...</div>':""}
         </div>
       </div>
 
       <!-- Rails Routes View (dedicated) -->
-      <div class="tree-view ${i==="rails"?"active":""}" id="rails-tree-view" data-tab="rails">
+      <div class="tree-view ${l==="rails"?"active":""}" id="rails-tree-view" data-tab="rails">
         <div id="rails-routes-container">
-          ${h?'<div class="empty-state-sm">Loading Rails routes...</div>':'<div class="empty-state">No Rails environment detected</div>'}
+          ${m?'<div class="empty-state-sm">Loading Rails routes...</div>':'<div class="empty-state">No Rails environment detected</div>'}
         </div>
       </div>
 
@@ -138,33 +138,35 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
   <script>
     // Environment detection results
     const envInfo = {
-      hasRails: ${h},
-      hasNextjs: ${b},
-      hasReact: ${w}
+      hasRails: ${m},
+      hasNextjs: ${f},
+      hasReact: ${R}
     };
 
     // Frontend data
-    const pages = ${JSON.stringify(s)};
-    const relations = ${JSON.stringify(r)};
-    const graphqlOps = ${o};
-    const components = ${p};
-    const apiCallsData = ${JSON.stringify(this.apiCalls)};
+    const pages = ${a};
+    const relations = ${h};
+    const graphqlOps = ${p};
+    const components = ${g};
+    const apiCallsData = ${v};
     window.apiCalls = apiCallsData;
     const pageMap = new Map(pages.map(p => [p.path, p]));
     const gqlMap = new Map(graphqlOps.map(op => [op.name, op]));
     const compMap = new Map(components.map(c => [c.name, c]));
+    // Mapping metadata for UI debugging (key -> {confidence, evidence})
+    const opMetaMap = new Map();
 
     // Rails data (if available)
-    const railsRoutes = ${u};
-    const railsControllers = ${a};
-    const railsModels = ${m};
-    const railsViews = ${v};
-    const railsReact = ${y};
-    const railsGrpc = ${d};
-    const railsSummary = ${C};
+    const railsRoutes = ${y};
+    const railsControllers = ${d};
+    const railsModels = ${w};
+    const railsViews = ${C};
+    const railsReact = ${P};
+    const railsGrpc = ${x};
+    const railsSummary = ${S};
 
     // Current active tab state
-    let currentMainTab = '${i}';
+    let currentMainTab = '${l}';
 
     // Modal history stack for back navigation
     const modalHistory = [];
@@ -629,12 +631,18 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
       html += '<div class="route-stat" data-filter="grpc"><div class="route-stat-val cyan">' + totalWithGrpc + '</div><div class="route-stat-label">gRPC</div></div>';
       html += '</div>';
       // Analysis coverage indicator
-      if (totalWithActionInfo > 0) {
-        const coverage = Math.round((totalWithActionInfo / combinedData.length) * 100);
-        const coverageTooltip = 'Percentage of routes successfully matched with controller actions to extract details (JSON/HTML rendering, redirects, etc). This is a tool analysis metric, not a code quality indicator.';
-        const coverageClass = coverage > 70 ? 'coverage-high' : coverage > 40 ? 'coverage-mid' : 'coverage-low';
+      {
+        const totalRoutesAnalyzed = combinedData.length;
+        const totalWithControllerMatch = combinedData.filter(r => r.controllerInfo).length;
+        const overallCoverage = totalRoutesAnalyzed > 0 ? Math.round((totalWithActionInfo / totalRoutesAnalyzed) * 100) : 0;
+        const matchedCoverage = totalWithControllerMatch > 0 ? Math.round((totalWithActionInfo / totalWithControllerMatch) * 100) : 0;
+        const overallTooltip = 'Percentage of routes that were successfully matched with controller actions to extract details. This includes routes pointing to external controllers (gems/engines) which are not analyzable from app/controllers.';
+        const matchedTooltip = 'Percentage of routes with a matched app controller (app/controllers) where the target action method was found and parsed.';
+        const overallClass = overallCoverage > 70 ? 'coverage-high' : overallCoverage > 40 ? 'coverage-mid' : 'coverage-low';
+        const matchedClass = matchedCoverage > 70 ? 'coverage-high' : matchedCoverage > 40 ? 'coverage-mid' : 'coverage-low';
         html += '<div class="coverage-info">';
-        html += '<div class="coverage-text" title="' + coverageTooltip + '">Action Details Coverage: <span class="' + coverageClass + '">' + coverage + '%</span> (' + totalWithActionInfo + '/' + combinedData.length + ' routes analyzed) \u2139\uFE0F</div>';
+        html += '<div class="coverage-text" title="' + overallTooltip + '">Action Details Coverage (overall): <span class="' + overallClass + '">' + overallCoverage + '%</span> (' + totalWithActionInfo + '/' + totalRoutesAnalyzed + ' routes analyzed) \u2139\uFE0F</div>';
+        html += '<div class="coverage-text" title="' + matchedTooltip + '">Action Details Coverage (matched controllers): <span class="' + matchedClass + '">' + matchedCoverage + '%</span> (' + totalWithActionInfo + '/' + totalWithControllerMatch + ' matched) \u2139\uFE0F</div>';
         html += '</div>';
       }
       html += '</div>';
@@ -2140,10 +2148,17 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
                 const isQ = !op.type?.includes('Mutation');
                 const sourceForModal = op.sourceDetail || op.sourcePath;
                 const srcArg = op.sourcePath !== 'Direct' && sourceForModal
-                  ? ",\\'"+sourceForModal.replace(/'/g, "\\\\'")+"\\'"
-                  : '';
+                  ? "\\'"+sourceForModal.replace(/'/g, "\\\\'")+"\\'"
+                  : 'null';
+
+                // Store mapping metadata in a global map and pass only a key to onclick.
+                const metaKey = op.queryName + '|' + (sourceForModal || '') + '|' + (op.type || '');
+                if (op.confidence || (op.evidence && op.evidence.length)) {
+                  opMetaMap.set(metaKey, { confidence: op.confidence, evidence: op.evidence });
+                }
+                const metaArg = ",\\'"+metaKey.replace(/'/g, "\\\\'")+"\\'";
                 // detail-item keeps base padding, adds indent
-                dataHtml += '<div class="detail-item data-op" style="padding:8px 10px 8px '+totalPadding+'px" onclick="showDataDetail(\\''+op.queryName.replace(/'/g, "\\\\'")+"\\'"+srcArg+')">' +
+                dataHtml += '<div class="detail-item data-op" style="padding:8px 10px 8px '+totalPadding+'px" onclick="showDataDetail(\\''+op.queryName.replace(/'/g, "\\\\'")+"\\',"+srcArg+metaArg+')">' +
                   '<span class="tag '+(isQ?'tag-query':'tag-mutation')+'" style="font-size:10px">'+(isQ?'Q':'M')+'</span> '+op.queryName+'</div>';
               });
 
@@ -2649,12 +2664,28 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
       btn.remove();
     };
 
-    function showDataDetail(rawName, sourcePath) {
+    function showDataDetail(rawName, sourcePath, metaKeyOrJson) {
       // Clean up name: remove "\u2192 " prefix and " (ComponentName)" suffix
       const name = rawName
         .replace(/^[\u2192\\->\\s]+/, '')
         .replace(/\\s*\\([^)]+\\)\\s*$/, '');
 
+      let meta = null;
+      try {
+        // New: lookup by meta key
+        if (metaKeyOrJson && typeof metaKeyOrJson === 'string' && opMetaMap.has(metaKeyOrJson)) {
+          meta = opMetaMap.get(metaKeyOrJson);
+        }
+        // Backward compatibility: if someone passes raw JSON string
+        else if (metaKeyOrJson && typeof metaKeyOrJson === 'string' && metaKeyOrJson.trim().startsWith('{')) {
+          meta = JSON.parse(metaKeyOrJson);
+        } else if (metaKeyOrJson && typeof metaKeyOrJson === 'object') {
+          meta = metaKeyOrJson;
+        }
+      } catch {
+        meta = null;
+      }
+
       // Convert SCREAMING_CASE to PascalCase (e.g., COMPANY_QUERY \u2192 CompanyQuery)
       const toPascalCase = (str) => {
         if (!/^[A-Z][A-Z0-9_]*$/.test(str)) return str;
@@ -2726,7 +2757,90 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
 
       if (op) {
         // Found GraphQL operation
-        html = '<div class="detail-section"><h4>Type</h4><span class="tag '+(op.type==='mutation'?'tag-mutation':'tag-query')+'">'+op.type.toUpperCase()+'</span></div>';
+        const confidence = meta?.confidence || '';
+        const confidenceTheme = (level) => {
+          if (level === 'certain') {
+            return {
+              label: 'CERTAIN',
+              bg: '#22c55e',
+              title: 'Certain: reached via a very close import path from the page (0\u20132 steps)',
+            };
+          }
+          if (level === 'likely') {
+            return {
+              label: 'LIKELY',
+              bg: '#f59e0b',
+              title: 'Likely: reachable via the import graph, but indirect (3+ steps)',
+            };
+          }
+          if (level === 'unknown') {
+            return {
+              label: 'COMMON',
+              bg: '#64748b',
+              title: 'Common: reached via widely shared modules across many pages',
+            };
+          }
+          return null;
+        };
+
+        const conf = confidenceTheme(confidence);
+        const confidenceBadge =
+          confidence === 'likely' && conf
+            ? '<span class="tag" title="' +
+              conf.title +
+              '" style="cursor:help;font-size:10px;display:inline-flex;align-items:center;justify-content:center;height:18px;line-height:18px;padding:0 8px;border-radius:999px;background:' +
+              conf.bg +
+              ';color:white;opacity:0.95">' +
+              conf.label +
+              '</span>'
+            : '';
+
+        html =
+          '<div class="detail-section"><h4>Type</h4><div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap">' +
+          '<span class="tag ' +
+          (op.type === 'mutation' ? 'tag-mutation' : 'tag-query') +
+          '" style="display:inline-flex;align-items:center;justify-content:center;height:18px;line-height:18px;padding:0 8px;border-radius:999px">' +
+          op.type.toUpperCase() +
+          '</span>' +
+          confidenceBadge +
+          '</div></div>';
+
+        const escapeHtml = (s) => String(s ?? '')
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#39;');
+
+        // Prepare Evidence section HTML (render later, after GraphQL section)
+        let evidenceSectionHtml = '';
+        if (meta && meta.evidence && Array.isArray(meta.evidence) && meta.evidence.length > 0) {
+          evidenceSectionHtml += '<div class="detail-section"><h4>Evidence</h4>';
+          meta.evidence.slice(0, 12).forEach(ev => {
+            const file = ev.file || '';
+            const line = ev.line ? ':' + ev.line : '';
+            const detailRaw = ev.detail ? String(ev.detail) : '';
+
+            // Escape then enhance arrows for readability
+            const detailEsc = escapeHtml(detailRaw);
+            const detailPretty = detailEsc.replace(/-&gt;|->/g, '<span style="color:#60a5fa;font-weight:700;padding:0 4px">\u2192</span>');
+
+            evidenceSectionHtml += '<div class="detail-item" style="font-size:11px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;max-width:100%;overflow:hidden">' +
+              '<code style="background:#0f172a;color:#93c5fd;padding:2px 6px;border-radius:3px;font-size:10px;display:block;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word">' +
+                escapeHtml(file + line) +
+              '</code>' +
+              (detailRaw
+                ? '<div style="opacity:0.92;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word">' + detailPretty + '</div>'
+                : '') +
+              '</div>';
+          });
+          if (meta.evidence.length > 12) {
+            evidenceSectionHtml += '<div class="detail-item" style="font-size:11px;opacity:0.8">... '+(meta.evidence.length - 12)+' more</div>';
+          }
+          evidenceSectionHtml += '</div>';
+        }
+
+        // Confidence is shown as a small badge next to Type to avoid taking extra vertical space.
 
         // Source info
         if (sourcePath) {
@@ -2738,7 +2852,15 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
             sourcePath.endsWith('.jsx');
           const isHook = !looksLikeFile && sourcePath.startsWith('use');
           const label = looksLikeFile ? 'File' : isHook ? 'Hook' : 'Component';
-          html += '<div class="detail-section"><h4>Source</h4><div class="detail-item" style="font-size:12px">via '+label+': <span class="text-accent">'+sourcePath+'</span></div></div>';
+          html += '<div class="detail-section">' +
+            '<h4 style="display:flex;justify-content:space-between;align-items:center">' +
+              'Source' +
+              '<span class="tag tag-default" style="font-size:10px">via ' + label + '</span>' +
+            '</h4>' +
+            '<code style="background:#0f172a;color:#93c5fd;padding:8px 10px;border-radius:6px;font-family:monospace;font-size:11px;display:block;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word">' +
+              escapeHtml(sourcePath) +
+            '</code>' +
+          '</div>';
         }
 
         // Operation Name with copy button
@@ -2763,10 +2885,14 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
 
           html += '<div class="detail-section"><h4 style="display:flex;justify-content:space-between;align-items:center">GraphQL<button class="copy-btn" onclick="copyGqlCode(this)" data-code="'+gqlCodeEscaped+'" title="Copy GraphQL">\u{1F4CB}</button></h4>';
           html += '<pre style="background:#0f172a;color:#e2e8f0;padding:12px;border-radius:6px;font-size:11px;overflow-x:auto;white-space:pre;max-height:300px;overflow-y:auto">' + gqlCode + '</pre></div>';
+          // Evidence should appear right after GraphQL section
+          if (evidenceSectionHtml) html += evidenceSectionHtml;
         } else if (op.variables?.length) {
           html += '<div class="detail-section"><h4>Variables</h4>';
           op.variables.forEach(v => { html += '<div class="detail-item">'+v.name+': <code style="background:#0f172a;color:#93c5fd;padding:2px 6px;border-radius:3px;font-family:monospace">'+v.type+'</code>'+(v.required?' (required)':'')+'</div>'; });
           html += '</div>';
+          // Evidence should appear right after Variables section (when GraphQL block is absent)
+          if (evidenceSectionHtml) html += evidenceSectionHtml;
         }
         if (op.usedIn?.length) {
           html += '<div class="detail-section"><h4>Used In ('+op.usedIn.length+' files)</h4>';
@@ -3569,12 +3695,12 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
     setTimeout(updatePageGqlCounts, 100);
   </script>
 </body>
-</html>`}buildTreeHtml(s,n){let r=["#ef4444","#f97316","#eab308","#22c55e","#14b8a6","#3b82f6","#8b5cf6","#ec4899"],f=0;return Array.from(s.entries()).sort((t,l)=>t[0].localeCompare(l[0])).map(([t,l])=>{let e=r[f++%r.length],i=l.sort((a,m)=>a.path.localeCompare(m.path)),o=new Set(i.map(a=>a.path)),p=new Map;for(let a of i){let m=a.path.split("/").filter(Boolean),v=0;for(let y=m.length-1;y>=1;y--){let d="/"+m.slice(0,y).join("/");if(o.has(d)){v=(p.get(d)??0)+1;break}}p.set(a.path,v);}let u=i.map(a=>{let m=this.getPageType(a.path),v=p.get(a.path)??0,d=a.repo||"",C=n.some(g=>g.repo&&g.repo!==d),h=d.split("/").pop()?.split("-").map(g=>g.substring(0,4)).join("-")||d.substring(0,8),b=C&&d?`<span class="tag tag-repo" title="${d}">${h}</span>`:"",w=/^\/[A-Z]/.test(a.path)||a.filePath&&a.filePath.includes("components/pages"),x=w&&a.filePath?a.filePath.replace(/\.tsx?$/,"").replace(/^(frontend\/src\/|src\/)/,""):a.path,c=w?'<span class="tag tag-info" title="SPA Component Page">SPA</span>':"";return `<div class="page-item" data-path="${a.path}" data-repo="${d}" onclick="selectPage('${a.path}')" style="--depth:${v}">
-              <span class="page-type" style="--type-color:${m.color}">${m.label}</span>
-              <span class="page-path">${x}</span>
+</html>`}buildTreeHtml(i,n){let r=["#ef4444","#f97316","#eab308","#22c55e","#14b8a6","#3b82f6","#8b5cf6","#ec4899"],u=0;return Array.from(i.entries()).sort((t,o)=>t[0].localeCompare(o[0])).map(([t,o])=>{let e=r[u++%r.length],l=o.sort((a,h)=>a.path.localeCompare(h.path)),s=new Set(l.map(a=>a.path)),p=new Map;for(let a of l){let h=a.path.split("/").filter(Boolean),v=0;for(let y=h.length-1;y>=1;y--){let d="/"+h.slice(0,y).join("/");if(s.has(d)){v=(p.get(d)??0)+1;break}}p.set(a.path,v);}let g=l.map(a=>{let h=this.getPageType(a.path),v=p.get(a.path)??0,d=a.repo||"",w=n.some(f=>f.repo&&f.repo!==d),C=d.split("/").pop()?.split("-").map(f=>f.substring(0,4)).join("-")||d.substring(0,8),P=w&&d?`<span class="tag tag-repo" title="${d}">${C}</span>`:"",x=/^\/[A-Z]/.test(a.path)||a.filePath&&a.filePath.includes("components/pages"),S=x&&a.filePath?a.filePath.replace(/\.tsx?$/,"").replace(/^(frontend\/src\/|src\/)/,""):a.path,m=x?'<span class="tag tag-info" title="SPA Component Page">SPA</span>':"";return `<div class="page-item" data-path="${a.path}" data-repo="${d}" onclick="selectPage('${a.path}')" style="--depth:${v}">
+              <span class="page-type" style="--type-color:${h.color}">${h.label}</span>
+              <span class="page-path">${S}</span>
               <div class="page-tags">
-                ${b}
-                ${c}
+                ${P}
+                ${m}
                 ${a.authentication?.required?'<span class="tag tag-auth">AUTH</span>':""}
                 <span class="tag tag-query gql-count" data-page-path="${a.path}" style="display:none">Q:0</span>
                 <span class="tag tag-mutation gql-count-m" data-page-path="${a.path}" style="display:none">M:0</span>
@@ -3583,7 +3709,7 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
           <div class="group-header" onclick="toggleGroup(this)" style="--group-color:${e}">
             <span class="group-arrow">\u25BC</span>
             <span class="group-name">/${t}</span>
-            <span class="group-count">${l.length}</span>
+            <span class="group-count">${o.length}</span>
           </div>
-          <div class="group-content">${u}</div>
-        </div>`}).join("")}getPageType(s){let n=s.split("/").filter(Boolean).pop()||"";return n==="new"||s.endsWith("/new")?{label:"CREATE",color:"#22c55e"}:n==="edit"||s.includes("/edit")?{label:"EDIT",color:"#f59e0b"}:n.startsWith("[")||n.startsWith(":")?{label:"DETAIL",color:"#3b82f6"}:s.includes("setting")?{label:"SETTINGS",color:"#6b7280"}:{label:"LIST",color:"#06b6d4"}}};export{P as a};
+          <div class="group-content">${g}</div>
+        </div>`}).join("")}getPageType(i){let n=i.split("/").filter(Boolean).pop()||"";return n==="new"||i.endsWith("/new")?{label:"CREATE",color:"#22c55e"}:n==="edit"||i.includes("/edit")?{label:"EDIT",color:"#f59e0b"}:n.startsWith("[")||n.startsWith(":")?{label:"DETAIL",color:"#3b82f6"}:i.includes("setting")?{label:"SETTINGS",color:"#6b7280"}:{label:"LIST",color:"#06b6d4"}}};export{E as a};