npm - @wtdlee/repomap - Versions diffs - 0.9.0 → 0.10.0 - Mend

@wtdlee/repomap 0.9.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/README.md +12 -0
package/dist/analyzers/index.d.ts +8 -8
package/dist/analyzers/index.js +1 -1
package/dist/{chunk-SMN6XFMS.js → chunk-ATRSGO6O.js} +270 -196
package/dist/chunk-IGRCLYVZ.js +451 -0
package/dist/{chunk-P7MX3M5U.js → chunk-LHP2OKKA.js} +428 -76
package/dist/chunk-QBSB6BIU.js +20 -0
package/dist/{chunk-LDX6WPHR.js → chunk-YKPXOHWZ.js} +196 -37
package/dist/chunk-ZWRDP37E.js +1 -0
package/dist/cli.js +14 -14
package/dist/{dataflow-analyzer-CJ2T0cGS.d.ts → dataflow-analyzer-DIUsRpvv.d.ts} +18 -0
package/dist/{env-detector-BIWJ7OYF.js → env-detector-RVGPBVNJ.js} +1 -1
package/dist/generators/assets/docs.css +176 -1
package/dist/generators/assets/page-map.css +59 -0
package/dist/generators/assets/rails-map.css +13 -0
package/dist/generators/index.d.ts +2 -1
package/dist/generators/index.js +1 -1
package/dist/index.d.ts +11 -11
package/dist/index.js +1 -1
package/dist/page-map-generator-LTVRHSDC.js +1 -0
package/dist/{rails-3HNUFTQV.js → rails-57MNOGHR.js} +1 -1
package/dist/rails-map-generator-JNU5QHX4.js +1 -0
package/dist/server/index.js +1 -1
package/dist/types.d.ts +34 -1
package/package.json +1 -1
package/dist/chunk-HPBPEGHS.js +0 -19
package/dist/chunk-TNUKDIO7.js +0 -5
package/dist/page-map-generator-2XQB7RWO.js +0 -1
package/dist/rails-map-generator-77ATUFMP.js +0 -1

package/dist/{chunk-SMN6XFMS.js → chunk-ATRSGO6O.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let r=[],u=n?.envResult,t=n?.railsAnalysis,o=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 f=p.analysis?.components||[];for(let a of f)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 f=p.analysis?.pages||[];for(let a of f)r.push({...a,repo:p.name,children:[],parent:null,depth:0});}let{rootPages:i,relations:l}=this.buildHierarchy(r);return this.renderPageMapHtml(r,i,l,e,{envResult:u,railsAnalysis:t,activeTab:o})}buildHierarchy(s){let n=new Map,r=[];for(let t of s)n.set(t.path,t);for(let t of s){let o=t.path.split("/").filter(Boolean);for(let e=o.length-1;e>=1;e--){let i="/"+o.slice(0,e).join("/"),l=n.get(i);if(l){t.parent=i,t.depth=l.depth+1,l.children.includes(t.path)||l.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,o.length-1)),t.layout)for(let e of s)e.path!==t.path&&e.layout===t.layout&&(r.find(l=>l.type==="same-layout"&&(l.from===t.path&&l.to===e.path||l.from===e.path&&l.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,o)=>t.path.localeCompare(o.path)),relations:r}}renderPageMapHtml(s,n,r,u,t){let o=t?.envResult,e=t?.railsAnalysis,i=t?.activeTab||"pages",l=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),f=e?JSON.stringify(e.routes.routes):"[]",a=e?JSON.stringify(e.controllers.controllers):"[]",h=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",m=o?.hasRails||false,b=o?.hasNextjs||false,w=o?.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">
@@ -16,15 +16,15 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
     <div style="display:flex;align-items:center;gap:24px">
       <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>
-        ${m?`<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 -->
-      ${m&&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,7 +63,7 @@ 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>
@@ -84,17 +84,17 @@ 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 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&&m?"margin-top:20px;border-top:1px solid var(--bg3);padding-top:20px":""}">
-          ${m&&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">
           ${m?'<div class="empty-state-sm">Loading Rails routes...</div>':'<div class="empty-state">No Rails environment detected</div>'}
         </div>
@@ -139,32 +139,34 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
     // Environment detection results
     const envInfo = {
       hasRails: ${m},
-      hasNextjs: ${b},
-      hasReact: ${w}
+      hasNextjs: ${f},
+      hasReact: ${R}
     };
     // Frontend data
-    const pages = ${JSON.stringify(s)};
-    const relations = ${JSON.stringify(r)};
-    const graphqlOps = ${l};
-    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 = ${f};
-    const railsControllers = ${a};
-    const railsModels = ${h};
-    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>';
@@ -1930,61 +1938,12 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
         stepsHtml += '</div></div>';
       }
-      // Data operations - show grouped by source path, sorted by depth
-      // Also include GraphQL from related components (including their dependencies)
+      // Data operations - use page.dataFetching from engine.ts only
+      // (engine.ts already enriches pages with GraphQL from components via enrichPagesWithHookGraphQL)
       let dataHtml = '';
-      // Recursively extract GraphQL from component and its dependencies
-      function extractComponentGraphQL(comp, visited = new Set(), depth = 0) {
-        const results = [];
-        if (!comp || visited.has(comp.name) || depth > 10) return results;
-        visited.add(comp.name);
-        // Extract GraphQL from this component's hooks
-        if (comp.hooks) {
-          comp.hooks.forEach(hook => {
-            // Only match hooks with "Query: " or "Mutation: " prefix (from dataflow analyzer)
-            // This avoids matching unrelated hooks like useQueryParams
-            if (hook.startsWith('Query: ') || hook.startsWith('Mutation: ') || hook.startsWith('Subscription: ')) {
-              let queryName = hook.replace('Query: ', '').replace('Mutation: ', '').replace('Subscription: ', '').trim();
-              // Skip empty names or hooks without actual operation names
-              if (!queryName) {
-                return;
-              }
-              const isM = hook.includes('Mutation');
-              const depthArrows = '\u2192 '.repeat(depth + 1);
-              results.push({
-                type: isM ? 'useMutation' : 'useQuery',
-                operationName: depthArrows + queryName + ' (via ' + comp.name + ')',
-                variables: []
-              });
-            }
-          });
-        }
-        // Recursively check dependencies
-        if (comp.dependencies) {
-          comp.dependencies.forEach(depName => {
-            const depComp = componentByName.get(depName);
-            if (depComp) {
-              results.push(...extractComponentGraphQL(depComp, visited, depth + 1));
-            }
-          });
-        }
-        return results;
-      }
-      // Get GraphQL from page's components (including dependencies)
-      const pageComps = getPageComponents(page);
-      const componentGraphQL = [];
-      const visited = new Set();
-      pageComps.forEach(comp => {
-        componentGraphQL.push(...extractComponentGraphQL(comp, visited, 0));
-      });
-      // Combine direct dataFetching with component GraphQL
-      const allDataFetching = [...(page.dataFetching || []), ...componentGraphQL];
+      // Use dataFetching directly from engine.ts analysis
+      const allDataFetching = [...(page.dataFetching || [])];
       if (allDataFetching.length > 0) {
         // Separate actual GraphQL operations from component references
@@ -2002,6 +1961,7 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
           // Extract query name - remove arrows and (via xxx) pattern
           let queryName = rawName.replace(/^[\u2192\\s]+/, '').trim();
           let sourcePath = 'Direct';
+          let sourceDetail = '';
           let depth = 0;
           // Method 1: Extract from (via xxx) pattern in operationName (from extractComponentGraphQL)
@@ -2011,13 +1971,35 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
             queryName = queryName.replace(viaMatch[0], '').trim();
             depth = arrowCount || 1;
           }
-          // Method 2: Use df.source field (from engine.ts enrichPagesWithHookGraphQL)
+          // Method 2: Use df.source field
           else if (source.startsWith('component:')) {
             sourcePath = source.replace('component:', '');
             depth = 1;
           } else if (source.startsWith('hook:')) {
             sourcePath = source.replace('hook:', '');
             depth = 1;
+          } else if (source.startsWith('usedIn:')) {
+            // Evidence-based source (file where the operation reference was found)
+            sourcePath = 'Indirect';
+            // Keep detail for modal
+            sourceDetail = source.replace('usedIn:', '');
+            depth = 1;
+          } else if (source.startsWith('import:')) {
+            sourcePath = 'Import';
+            sourceDetail = source.replace('import:', '');
+            depth = 1;
+          } else if (source.startsWith('common:')) {
+            sourcePath = 'Common (shared)';
+            sourceDetail = source.replace('common:', '');
+            depth = 1;
+          } else if (source.startsWith('close:')) {
+            sourcePath = 'Close (related)';
+            sourceDetail = source.replace('close:', '');
+            depth = 1;
+          } else if (source.startsWith('indirect:')) {
+            sourcePath = 'Indirect';
+            sourceDetail = source.replace('indirect:', '');
+            depth = 1;
           }
           // "import:xxx" or no source stays as Direct
@@ -2025,15 +2007,27 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
             ...df,
             queryName,
             sourcePath,
-            depth
+            sourceDetail: sourceDetail || undefined,
+            depth,
           };
         });
-        // Sort by depth (lower first) then by source path
+        // Sort by depth (lower first) then by source category priority
+        const sourcePriority = (src) => {
+          if (src === 'Direct') return 0;
+          if (src === 'Close (related)') return 1;
+          if (src === 'Import') return 2;
+          if (src === 'Indirect') return 3;
+          if (src === 'Common (shared)') return 4;
+          return 5;
+        };
         parsedOps.sort((a, b) => {
           if (a.depth !== b.depth) return a.depth - b.depth;
           if (a.sourcePath === 'Direct') return -1;
           if (b.sourcePath === 'Direct') return 1;
+          const ap = sourcePriority(a.sourcePath);
+          const bp = sourcePriority(b.sourcePath);
+          if (ap !== bp) return ap - bp;
           return a.sourcePath.localeCompare(b.sourcePath);
         });
@@ -2104,7 +2098,7 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
           sortedPaths.forEach(pathName => {
             const ops = groupedByPath.get(pathName);
             const isDirect = pathName === 'Direct';
-            const depthIndicator = isDirect ? '' : '\u21B3 ';
+            // Remove the "\u21B3" prefix (UI becomes cleaner with <details>/<summary>)
             const pathLabel = isDirect ? 'Direct (this page)' : pathName;
             // UI indent: 4px per level added to base padding (10px)
             const uiLevel = pathToUiLevel.get(pathName) || 0;
@@ -2112,20 +2106,68 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
             const totalPadding = 10 + uiIndent;
             // Group container, header aligned with detail-item content
-            dataHtml += '<div class="data-path-group" style="margin:8px 0">' +
-              '<div class="data-path-header" style="font-size:11px;color:var(--text2);margin-bottom:4px;padding-left:'+totalPadding+'px">' +
-              depthIndicator + '<span class="text-accent">' + pathLabel + '</span> (' + ops.length + ')' +
-              '</div>';
+            // Non-direct groups are collapsed by default to reduce noise from shared/common operations.
+            const isClose = pathName === 'Close (related)';
+            const isCollapsedByDefault = !(isDirect || isClose);
+            const detailsOpenAttr = isCollapsedByDefault ? '' : ' open';
+            dataHtml += '<details class="data-path-group" style="margin:8px 0"' + detailsOpenAttr + '>' +
+              '<summary class="data-path-header" style="--pad-left:'+totalPadding+'px">' +
+              '<span class="text-accent">' + pathLabel + '</span> (' + ops.length + ')' +
+              '</summary>';
+            // Secondary grouping inside the group by concrete source file (sourceDetail).
+            // This reduces noise when a group contains operations from many files.
+            const bySource = new Map();
             ops.forEach(op => {
-              const isQ = !op.type?.includes('Mutation');
-              const srcArg = op.sourcePath !== 'Direct' ? ",\\'"+op.sourcePath.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+')">' +
-                '<span class="tag '+(isQ?'tag-query':'tag-mutation')+'" style="font-size:10px">'+(isQ?'Q':'M')+'</span> '+op.queryName+'</div>';
+              const key = op.sourceDetail || '';
+              if (!bySource.has(key)) bySource.set(key, []);
+              bySource.get(key).push(op);
             });
-            dataHtml += '</div>';
+            const sourceKeys = Array.from(bySource.keys()).sort((a, b) => {
+              // Put "unknown/empty" at the end
+              if (!a && b) return 1;
+              if (a && !b) return -1;
+              return String(a).localeCompare(String(b));
+            });
+            sourceKeys.forEach(sourceKey => {
+              const sourceOps = bySource.get(sourceKey) || [];
+              const hasSourceHeader = !!sourceKey && sourceKeys.length > 1;
+              if (hasSourceHeader) {
+                const sourceFileName = String(sourceKey).split(/[\\/]/).pop() || String(sourceKey);
+                dataHtml += '<div class="data-source-group" style="margin:6px 0">' +
+                  '<div class="data-source-header" style="padding-left:'+totalPadding+'px">' +
+                  '<span style="opacity:0.9">' + sourceFileName + '</span> (' + sourceOps.length + ')' +
+                  '</div>';
+              }
+              sourceOps.forEach(op => {
+                const isQ = !op.type?.includes('Mutation');
+                const sourceForModal = op.sourceDetail || op.sourcePath;
+                const srcArg = op.sourcePath !== 'Direct' && sourceForModal
+                  ? "\\'"+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+metaArg+')">' +
+                  '<span class="tag '+(isQ?'tag-query':'tag-mutation')+'" style="font-size:10px">'+(isQ?'Q':'M')+'</span> '+op.queryName+'</div>';
+              });
+              if (hasSourceHeader) {
+                dataHtml += '</div>';
+              }
+            });
+            dataHtml += '</details>';
           });
           dataHtml += '</div>';
@@ -2202,75 +2244,7 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
       if (c.name) componentByName.set(c.name, c);
     });
-    // Check if a component (or its dependencies) uses GraphQL
-    function componentUsesGraphQL(comp, visited = new Set()) {
-      if (!comp || visited.has(comp.name)) return false;
-      visited.add(comp.name);
-      // Check hooks for GraphQL queries (only match "Query: X" or "Mutation: X" format)
-      if (comp.hooks && comp.hooks.some(h =>
-        h.startsWith('Query: ') || h.startsWith('Mutation: ') || h.startsWith('Subscription: ')
-      )) {
-        return true;
-      }
-      // Check dependencies recursively (limit depth to avoid infinite loops)
-      if (comp.dependencies && visited.size < 20) {
-        for (const dep of comp.dependencies) {
-          const depComp = componentByName.get(dep);
-          if (depComp && componentUsesGraphQL(depComp, visited)) {
-            return true;
-          }
-        }
-      }
-      return false;
-    }
-    // Find components related to a page (strict matching only)
-    function getPageComponents(page) {
-      const relatedComps = [];
-      // 1. Find by page file path (exact match)
-      if (page.filePath) {
-        const pageComp = componentByFile.get(page.filePath);
-        if (pageComp) relatedComps.push(pageComp);
-        // Check for PageContainer pattern based on file name
-        const baseName = page.filePath.split('/').pop()?.replace(/\\.(tsx?|jsx?)$/, '') || '';
-        const containerName = baseName.charAt(0).toUpperCase() + baseName.slice(1) + 'PageContainer';
-        const container = componentByName.get(containerName);
-        if (container) relatedComps.push(container);
-        // Check for feature-based container: /pages/app/agencies \u2192 AgenciesPageContainer
-        const pathParts = page.filePath.split('/');
-        const pageIndex = pathParts.indexOf('pages');
-        if (pageIndex >= 0 && pathParts.length > pageIndex + 2) {
-          // Get the main feature segment (e.g., 'agencies' from '/pages/app/agencies/...')
-          const featureSegment = pathParts[pageIndex + 2];
-          if (featureSegment && !featureSegment.startsWith('[')) {
-            const featurePascal = featureSegment.split(/[-_]/).map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('');
-            const featureContainer = componentByName.get(featurePascal + 'PageContainer');
-            if (featureContainer) relatedComps.push(featureContainer);
-          }
-        }
-      }
-      // 2. Find by component name from page data
-      if (page.component) {
-        const comp = componentByName.get(page.component);
-        if (comp) relatedComps.push(comp);
-        // Also check for Container pattern
-        const containerName = page.component + 'Container';
-        const container = componentByName.get(containerName);
-        if (container) relatedComps.push(container);
-      }
-      return relatedComps;
-    }
-    // Include pages with direct GraphQL usage OR pages whose components use GraphQL
+    // Include pages with direct GraphQL usage (from engine.ts enrichPagesWithHookGraphQL)
     const pagesWithGraphQL = new Set([
       // Pages with direct dataFetching
       ...pages.filter(p =>
@@ -2279,11 +2253,6 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
           df.type === 'getServerSideProps' || df.type === 'getStaticProps'
         )
       ).map(p => p.path),
-      // Pages whose components (or dependencies) use GraphQL
-      ...pages.filter(p => {
-        const pageComps = getPageComponents(p);
-        return pageComps.some(comp => componentUsesGraphQL(comp));
-      }).map(p => p.path),
       // Pages whose files are referenced in GraphQL operation usedIn
       ...pages.filter(p => {
         if (!p.filePath) return false;
@@ -2695,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;
@@ -2772,12 +2757,110 @@ 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) {
-          const isHook = sourcePath.startsWith('use');
-          html += '<div class="detail-section"><h4>Source</h4><div class="detail-item" style="font-size:12px">via '+(isHook?'Hook':'Component')+': <span class="text-accent">'+sourcePath+'</span></div></div>';
+          const looksLikeFile =
+            sourcePath.includes('/') ||
+            sourcePath.endsWith('.ts') ||
+            sourcePath.endsWith('.tsx') ||
+            sourcePath.endsWith('.js') ||
+            sourcePath.endsWith('.jsx');
+          const isHook = !looksLikeFile && sourcePath.startsWith('use');
+          const label = looksLikeFile ? 'File' : isHook ? 'Hook' : 'Component';
+          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
@@ -2802,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>';
@@ -3568,13 +3655,10 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
         const page = pageMap.get(pagePath);
         if (!page) return;
-        // Get page's components and calculate total GraphQL
-        const pageComps = getPageComponents(page);
-        const visited = new Set();
+        // Count GraphQL from dataFetching only (already enriched by engine.ts)
         let queries = 0;
         let mutations = 0;
-        // Count from direct dataFetching
         (page.dataFetching || []).forEach(df => {
           if (df.type?.includes('Mutation')) {
             mutations++;
@@ -3583,16 +3667,6 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
           }
         });
-        // Count from component hooks (simplified - just count hooks)
-        pageComps.forEach(comp => {
-          if (!comp || visited.has(comp.name)) return;
-          visited.add(comp.name);
-          (comp.hooks || []).forEach(hook => {
-            if (hook.includes('Mutation:')) mutations++;
-            else if (hook.includes('Query:')) queries++;
-          });
-        });
         // Update Q tag
         const qTag = item.querySelector('.tag-query');
         if (qTag) {
@@ -3621,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"],u=0;return Array.from(s.entries()).sort((t,o)=>t[0].localeCompare(o[0])).map(([t,o])=>{let e=r[u++%r.length],i=o.sort((a,h)=>a.path.localeCompare(h.path)),l=new Set(i.map(a=>a.path)),p=new Map;for(let a of i){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(l.has(d)){v=(p.get(d)??0)+1;break}}p.set(a.path,v);}let f=i.map(a=>{let h=this.getPageType(a.path),v=p.get(a.path)??0,d=a.repo||"",C=n.some(g=>g.repo&&g.repo!==d),m=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}">${m}</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}">
+</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">${x}</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>
@@ -3637,5 +3711,5 @@ var P=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,n){let
             <span class="group-name">/${t}</span>
             <span class="group-count">${o.length}</span>
           </div>
-          <div class="group-content">${f}</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};