@wtdlee/repomap 0.3.1 → 0.3.2

package/dist/{chunk-3YFXZAP7.js → chunk-MOEA75XK.js}

@@ -1,128 +1,4 @@
-// src/generators/page-map-generator.ts
-var PageMapGenerator = class {
-  graphqlOps = [];
-  apiCalls = [];
-  components = [];
-  generatePageMapHtml(report, options) {
-    const allPages = [];
-    const envResult = options?.envResult;
-    const railsAnalysis = options?.railsAnalysis;
-    const activeTab = options?.activeTab || "pages";
-    const repoName = report.repositories[0]?.displayName || report.repositories[0]?.name || "Repository";
-    for (const repoResult of report.repositories) {
-      this.graphqlOps.push(...repoResult.analysis?.graphqlOperations || []);
-      this.apiCalls.push(...repoResult.analysis?.apiCalls || []);
-      const comps = repoResult.analysis?.components || [];
-      for (const comp of comps) {
-        this.components.push({
-          name: comp.name,
-          filePath: comp.filePath,
-          type: comp.type,
-          dependencies: comp.dependencies || []
-        });
-      }
-    }
-    for (const repoResult of report.repositories) {
-      const pages = repoResult.analysis?.pages || [];
-      for (const page of pages) {
-        allPages.push({
-          ...page,
-          repo: repoResult.name,
-          children: [],
-          parent: null,
-          depth: 0
-        });
-      }
-    }
-    const { rootPages, relations } = this.buildHierarchy(allPages);
-    return this.renderPageMapHtml(allPages, rootPages, relations, repoName, {
-      envResult,
-      railsAnalysis,
-      activeTab
-    });
-  }
-  buildHierarchy(pages) {
-    const pathMap = /* @__PURE__ */ new Map();
-    const relations = [];
-    for (const page of pages) {
-      pathMap.set(page.path, page);
-    }
-    for (const page of pages) {
-      const segments = page.path.split("/").filter(Boolean);
-      for (let i = segments.length - 1; i >= 1; i--) {
-        const parentPath = "/" + segments.slice(0, i).join("/");
-        const parent = pathMap.get(parentPath);
-        if (parent) {
-          page.parent = parentPath;
-          page.depth = parent.depth + 1;
-          if (!parent.children.includes(page.path)) {
-            parent.children.push(page.path);
-          }
-          relations.push({
-            from: parentPath,
-            to: page.path,
-            type: "parent-child",
-            description: `Sub-page of ${parentPath}`
-          });
-          break;
-        }
-      }
-      if (!page.parent) {
-        page.depth = Math.max(0, segments.length - 1);
-      }
-      if (page.layout) {
-        for (const other of pages) {
-          if (other.path !== page.path && other.layout === page.layout) {
-            const existing = relations.find(
-              (r) => r.type === "same-layout" && (r.from === page.path && r.to === other.path || r.from === other.path && r.to === page.path)
-            );
-            if (!existing) {
-              relations.push({
-                from: page.path,
-                to: other.path,
-                type: "same-layout",
-                description: `Both use ${page.layout}`
-              });
-            }
-          }
-        }
-      }
-    }
-    const rootPages = pages.filter((p) => !p.parent).sort((a, b) => a.path.localeCompare(b.path));
-    return { rootPages, relations };
-  }
-  renderPageMapHtml(allPages, rootPages, relations, repoName, options) {
-    const envResult = options?.envResult;
-    const railsAnalysis = options?.railsAnalysis;
-    const activeTab = options?.activeTab || "pages";
-    const graphqlOpsJson = JSON.stringify(
-      this.graphqlOps.map((op) => ({
-        name: op.name,
-        type: op.type,
-        variables: op.variables,
-        fields: op.fields,
-        returnType: op.returnType,
-        usedIn: op.usedIn
-      }))
-    );
-    const componentsJson = JSON.stringify(this.components);
-    const railsRoutesJson = railsAnalysis ? JSON.stringify(railsAnalysis.routes.routes) : "[]";
-    const railsControllersJson = railsAnalysis ? JSON.stringify(railsAnalysis.controllers.controllers) : "[]";
-    const railsModelsJson = railsAnalysis ? JSON.stringify(railsAnalysis.models.models) : "[]";
-    const railsViewsJson = railsAnalysis ? JSON.stringify(railsAnalysis.views) : '{ "views": [], "pages": [], "summary": {} }';
-    const railsReactJson = railsAnalysis ? JSON.stringify(railsAnalysis.react) : '{ "components": [], "entryPoints": [], "summary": {} }';
-    const railsGrpcJson = railsAnalysis ? JSON.stringify(railsAnalysis.grpc) : '{ "services": [] }';
-    const railsSummaryJson = railsAnalysis ? JSON.stringify(railsAnalysis.summary) : "null";
-    const hasRails = envResult?.hasRails || false;
-    const hasNextjs = envResult?.hasNextjs || false;
-    const hasReact = envResult?.hasReact || false;
-    const groups = /* @__PURE__ */ new Map();
-    for (const page of allPages) {
-      const seg = page.path.split("/").filter(Boolean)[0] || "root";
-      if (!groups.has(seg)) groups.set(seg, []);
-      groups.get(seg)?.push(page);
-    }
-    return `<!DOCTYPE html>
+var S=class{graphqlOps=[];apiCalls=[];components=[];generatePageMapHtml(s,r){let c=[],v=r?.envResult,t=r?.railsAnalysis,l=r?.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||[]});}for(let p of s.repositories){let f=p.analysis?.pages||[];for(let a of f)c.push({...a,repo:p.name,children:[],parent:null,depth:0});}let{rootPages:i,relations:o}=this.buildHierarchy(c);return this.renderPageMapHtml(c,i,o,e,{envResult:v,railsAnalysis:t,activeTab:l})}buildHierarchy(s){let r=new Map,c=[];for(let t of s)r.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=r.get(i);if(o){t.parent=i,t.depth=o.depth+1,o.children.includes(t.path)||o.children.push(t.path),c.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&&(c.find(o=>o.type==="same-layout"&&(o.from===t.path&&o.to===e.path||o.from===e.path&&o.to===t.path))||c.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:c}}renderPageMapHtml(s,r,c,v,t){let l=t?.envResult,e=t?.railsAnalysis,i=t?.activeTab||"pages",o=JSON.stringify(this.graphqlOps.map(d=>({name:d.name,type:d.type,variables:d.variables,fields:d.fields,returnType:d.returnType,usedIn:d.usedIn}))),p=JSON.stringify(this.components),f=e?JSON.stringify(e.routes.routes):"[]",a=e?JSON.stringify(e.controllers.controllers):"[]",m=e?JSON.stringify(e.models.models):"[]",u=e?JSON.stringify(e.views):'{ "views": [], "pages": [], "summary": {} }',h=e?JSON.stringify(e.react):'{ "components": [], "entryPoints": [], "summary": {} }',y=e?JSON.stringify(e.grpc):'{ "services": [] }',P=e?JSON.stringify(e.summary):"null",n=l?.hasRails||false,w=l?.hasNextjs||false,C=l?.hasReact||false,x=new Map;for(let d of s){let b=d.path.split("/").filter(Boolean)[0]||"root";x.has(b)||x.set(b,[]),x.get(b)?.push(d);}return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -133,21 +9,21 @@ var PageMapGenerator = class {
 <body>
   <header class="header">
     <div style="display:flex;align-items:center;gap:24px">
-      <h1 style="cursor:pointer" onclick="location.href='/'">\u{1F4CA} ${repoName}</h1>
+      <h1 style="cursor:pointer" onclick="location.href='/'">\u{1F4CA} ${v}</h1>
       <nav style="display:flex;gap:4px">
-        <a href="/page-map" class="nav-link ${activeTab === "pages" ? "active" : ""}">Page Map</a>
-        ${hasRails ? `<a href="/rails-map" class="nav-link ${activeTab === "rails" ? "active" : ""}">Rails Map</a>` : ""}
+        <a href="/page-map" class="nav-link ${i==="pages"?"active":""}">Page Map</a>
+        ${n?`<a href="/rails-map" class="nav-link ${i==="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 -->
-      ${hasRails && hasNextjs ? `<div class="env-filters" style="display:flex;gap:4px;margin-right:8px">
+      ${n&&w?`<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>
-        </div>` : ""}
+        </div>`:""}
       <input class="search" type="text" placeholder="Search pages, queries..." oninput="filter(this.value)">
       <div class="tabs">
         <button class="tab active" onclick="setView('tree')">List</button>
@@ -182,40 +58,40 @@ var PageMapGenerator = class {
       <!-- 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">${allPages.length}</div><div class="stat-label">Pages</div></div>
-        <div class="stat" data-filter="hierarchies"><div class="stat-val">${relations.filter((r) => r.type === "parent-child").length}</div><div class="stat-label">Hierarchies</div></div>
+        <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="hierarchies"><div class="stat-val">${c.filter(d=>d.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>
 
-      ${hasRails && railsAnalysis ? `
+      ${n&&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">
-        <div class="stat" data-filter="rails-routes" onclick="switchToRailsTab()"><div class="stat-val">${railsAnalysis.summary.totalRoutes}</div><div class="stat-label">Routes</div></div>
-        <div class="stat" data-filter="rails-controllers" onclick="showRailsControllers(); this.blur();"><div class="stat-val">${railsAnalysis.summary.totalControllers}</div><div class="stat-label">Controllers</div></div>
-        <div class="stat" data-filter="rails-models" onclick="showRailsModels(); this.blur();"><div class="stat-val">${railsAnalysis.summary.totalModels}</div><div class="stat-label">Models</div></div>
-        <div class="stat" data-filter="rails-grpc" onclick="showRailsGrpc(); this.blur();"><div class="stat-val">${railsAnalysis.summary.totalGrpcServices}</div><div class="stat-label">gRPC</div></div>
-        <div class="stat" data-filter="rails-react" onclick="showReactComponents(); this.blur();"><div class="stat-val">${railsAnalysis.summary.totalReactComponents}</div><div class="stat-label">\u269B React</div></div>
+        <div class="stat" data-filter="rails-routes" onclick="switchToRailsTab()"><div class="stat-val">${e.summary.totalRoutes}</div><div class="stat-label">Routes</div></div>
+        <div class="stat" data-filter="rails-controllers" onclick="showRailsControllers(); this.blur();"><div class="stat-val">${e.summary.totalControllers}</div><div class="stat-label">Controllers</div></div>
+        <div class="stat" data-filter="rails-models" onclick="showRailsModels(); this.blur();"><div class="stat-val">${e.summary.totalModels}</div><div class="stat-label">Models</div></div>
+        <div class="stat" data-filter="rails-grpc" onclick="showRailsGrpc(); this.blur();"><div class="stat-val">${e.summary.totalGrpcServices}</div><div class="stat-label">gRPC</div></div>
+        <div class="stat" data-filter="rails-react" onclick="showReactComponents(); this.blur();"><div class="stat-val">${e.summary.totalReactComponents}</div><div class="stat-label">\u269B React</div></div>
       </div>
-      ` : ""}
+      `:""}
     </aside>
 
     <div class="content">
       <!-- Pages Tree View (for all screens - Next.js/React/Rails) -->
-      <div class="tree-view ${activeTab === "pages" ? "active" : ""}" id="tree-view" data-tab="pages">
-        ${allPages.length > 0 ? this.buildTreeHtml(groups, allPages) : ""}
-        <div id="page-map-react-components-section" style="${hasRails ? "margin-top:20px;border-top:1px solid var(--bg3);padding-top:20px" : ""}">
+      <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="${n?"margin-top:20px;border-top:1px solid var(--bg3);padding-top:20px":""}">
         </div>
-        <div id="page-map-rails-section" style="${allPages.length > 0 && hasRails ? "margin-top:20px;border-top:1px solid var(--bg3);padding-top:20px" : ""}">
-          ${hasRails && allPages.length === 0 ? '<div style="padding:20px;color:var(--text2)">Loading screens...</div>' : ""}
+        <div id="page-map-rails-section" style="${s.length>0&&n?"margin-top:20px;border-top:1px solid var(--bg3);padding-top:20px":""}">
+          ${n&&s.length===0?'<div class="empty-state-sm">Loading screens...</div>':""}
         </div>
       </div>
 
       <!-- Rails Routes View (dedicated) -->
-      <div class="tree-view ${activeTab === "rails" ? "active" : ""}" id="rails-tree-view" data-tab="rails">
+      <div class="tree-view ${i==="rails"?"active":""}" id="rails-tree-view" data-tab="rails">
         <div id="rails-routes-container">
-          ${hasRails ? '<div style="padding:20px;color:var(--text2)">Loading Rails routes...</div>' : '<div style="padding:40px;text-align:center;color:var(--text2)">No Rails environment detected</div>'}
+          ${n?'<div class="empty-state-sm">Loading Rails routes...</div>':'<div class="empty-state">No Rails environment detected</div>'}
         </div>
       </div>
 
@@ -257,16 +133,16 @@ var PageMapGenerator = class {
   <script>
     // Environment detection results
     const envInfo = {
-      hasRails: ${hasRails},
-      hasNextjs: ${hasNextjs},
-      hasReact: ${hasReact}
+      hasRails: ${n},
+      hasNextjs: ${w},
+      hasReact: ${C}
     };
 
     // Frontend data
-    const pages = ${JSON.stringify(allPages)};
-    const relations = ${JSON.stringify(relations)};
-    const graphqlOps = ${graphqlOpsJson};
-    const components = ${componentsJson};
+    const pages = ${JSON.stringify(s)};
+    const relations = ${JSON.stringify(c)};
+    const graphqlOps = ${o};
+    const components = ${p};
     const apiCallsData = ${JSON.stringify(this.apiCalls)};
     window.apiCalls = apiCallsData;
     const pageMap = new Map(pages.map(p => [p.path, p]));
@@ -274,16 +150,16 @@ var PageMapGenerator = class {
     const compMap = new Map(components.map(c => [c.name, c]));
 
     // Rails data (if available)
-    const railsRoutes = ${railsRoutesJson};
-    const railsControllers = ${railsControllersJson};
-    const railsModels = ${railsModelsJson};
-    const railsViews = ${railsViewsJson};
-    const railsReact = ${railsReactJson};
-    const railsGrpc = ${railsGrpcJson};
-    const railsSummary = ${railsSummaryJson};
+    const railsRoutes = ${f};
+    const railsControllers = ${a};
+    const railsModels = ${m};
+    const railsViews = ${u};
+    const railsReact = ${h};
+    const railsGrpc = ${y};
+    const railsSummary = ${P};
 
     // Current active tab state
-    let currentMainTab = '${activeTab}';
+    let currentMainTab = '${i}';
 
     // Modal history stack for back navigation
     const modalHistory = [];
@@ -377,17 +253,17 @@ var PageMapGenerator = class {
         routesByNamespace.get(ns).push(r);
       });
 
-      let html = '<div style="max-height:60vh;overflow-y:auto">';
+      let html = '<div class="max-h-60vh overflow-y-auto">';
       for (const [ns, routes] of routesByNamespace) {
         html += '<div style="margin-bottom:16px">';
         html += '<div style="font-weight:600;margin-bottom:8px;color:var(--accent)">\u{1F4C2} ' + ns + ' (' + routes.length + ')</div>';
         html += '<table style="width:100%;border-collapse:collapse;font-size:12px">';
-        html += '<tr style="background:var(--bg3)"><th style="padding:6px;text-align:left">Method</th><th style="padding:6px;text-align:left">Path</th><th style="padding:6px;text-align:left">Controller#Action</th></tr>';
+        html += '<tr class="bg-surface"><th class="cell">Method</th><th class="cell">Path</th><th class="cell">Controller#Action</th></tr>';
         routes.slice(0, 20).forEach(r => {
           const methodColor = {GET:'#22c55e',POST:'#3b82f6',PUT:'#f59e0b',PATCH:'#f59e0b',DELETE:'#ef4444'}[r.method] || '#888';
           html += '<tr style="border-bottom:1px solid var(--border)">';
           html += '<td style="padding:6px"><span style="background:' + methodColor + ';color:white;padding:2px 6px;border-radius:3px;font-size:10px">' + r.method + '</span></td>';
-          html += '<td style="padding:6px;font-family:monospace">' + r.path.replace(/:([a-z_]+)/g, '<span style="color:#f59e0b">:$1</span>') + '</td>';
+          html += '<td style="padding:6px;font-family:monospace">' + r.path.replace(/:([a-z_]+)/g, '<span class="text-warning">:$1</span>') + '</td>';
           html += '<td style="padding:6px;color:var(--text2)">' + r.controller + '#' + r.action + '</td>';
           html += '</tr>';
         });
@@ -407,13 +283,13 @@ var PageMapGenerator = class {
         return;
       }
 
-      let html = '<div style="max-height:60vh;overflow-y:auto">';
+      let html = '<div class="max-h-60vh overflow-y-auto">';
       railsControllers.forEach(ctrl => {
-        html += '<div style="background:var(--bg3);padding:12px;border-radius:6px;margin-bottom:8px">';
-        html += '<div style="font-weight:600;margin-bottom:4px">' + ctrl.className + '</div>';
-        html += '<div style="font-size:11px;color:var(--text2);margin-bottom:8px">extends ' + ctrl.parentClass + '</div>';
+        html += '<div class="info-box">';
+        html += '<div class="section-title">' + ctrl.className + '</div>';
+        html += '<div class="hint mb-3">extends ' + ctrl.parentClass + '</div>';
         if (ctrl.actions && ctrl.actions.length > 0) {
-          html += '<div style="display:flex;flex-wrap:wrap;gap:4px">';
+          html += '<div class="flex flex-wrap gap-1">';
           ctrl.actions.slice(0, 10).forEach(action => {
             const color = action.visibility === 'public' ? '#22c55e' : action.visibility === 'private' ? '#ef4444' : '#f59e0b';
             html += '<span style="background:rgba(255,255,255,0.1);padding:2px 8px;border-radius:4px;font-size:11px;border-left:2px solid ' + color + '">' + action.name + '</span>';
@@ -434,16 +310,16 @@ var PageMapGenerator = class {
         return;
       }
 
-      let html = '<div style="max-height:60vh;overflow-y:auto">';
+      let html = '<div class="max-h-60vh overflow-y-auto">';
       railsModels.forEach(model => {
-        html += '<div style="background:var(--bg3);padding:12px;border-radius:6px;margin-bottom:8px">';
-        html += '<div style="font-weight:600;margin-bottom:4px">\u{1F4E6} ' + model.className + '</div>';
-        html += '<div style="display:flex;gap:16px;font-size:11px;color:var(--text2);margin-bottom:8px">';
+        html += '<div class="info-box">';
+        html += '<div class="section-title">\u{1F4E6} ' + model.className + '</div>';
+        html += '<div class="flex gap-3 hint mb-3">';
         html += '<span>\u{1F4CE} ' + (model.associations?.length || 0) + ' associations</span>';
         html += '<span>\u2713 ' + (model.validations?.length || 0) + ' validations</span>';
         html += '</div>';
         if (model.associations && model.associations.length > 0) {
-          html += '<div style="display:flex;flex-wrap:wrap;gap:4px">';
+          html += '<div class="flex flex-wrap gap-1">';
           model.associations.slice(0, 8).forEach(assoc => {
             const typeColor = {belongs_to:'#3b82f6',has_many:'#22c55e',has_one:'#f59e0b'}[assoc.type] || '#888';
             html += '<span style="background:rgba(255,255,255,0.1);padding:2px 8px;border-radius:4px;font-size:10px"><span style="color:' + typeColor + '">' + assoc.type + '</span> :' + assoc.name + '</span>';
@@ -469,24 +345,24 @@ var PageMapGenerator = class {
         (b.usedIn?.length || 0) - (a.usedIn?.length || 0)
       );
 
-      let html = '<div style="max-height:60vh;overflow-y:auto">';
+      let html = '<div class="max-h-60vh overflow-y-auto">';
 
       // Stats
       html += '<div style="display:flex;gap:16px;margin-bottom:16px;padding:12px;background:var(--bg3);border-radius:8px">';
-      html += '<div style="text-align:center"><div style="font-size:20px;font-weight:bold;color:var(--accent)">' + railsReact.summary.totalComponents + '</div><div style="font-size:10px;color:var(--text2)">Components</div></div>';
-      html += '<div style="text-align:center"><div style="font-size:20px;font-weight:bold;color:#22c55e">' + railsReact.summary.ssrComponents + '</div><div style="font-size:10px;color:var(--text2)">SSR</div></div>';
-      html += '<div style="text-align:center"><div style="font-size:20px;font-weight:bold;color:#3b82f6">' + railsReact.summary.clientComponents + '</div><div style="font-size:10px;color:var(--text2)">Client</div></div>';
-      html += '<div style="text-align:center"><div style="font-size:20px;font-weight:bold;color:#f59e0b">' + railsReact.summary.totalEntryPoints + '</div><div style="font-size:10px;color:var(--text2)">Entry Points</div></div>';
+      html += '<div class="text-center"><div style="font-size:20px;font-weight:bold;color:var(--accent)">' + railsReact.summary.totalComponents + '</div><div style="font-size:10px;color:var(--text2)">Components</div></div>';
+      html += '<div class="text-center"><div style="font-size:20px;font-weight:bold;color:#22c55e">' + railsReact.summary.ssrComponents + '</div><div style="font-size:10px;color:var(--text2)">SSR</div></div>';
+      html += '<div class="text-center"><div style="font-size:20px;font-weight:bold;color:#3b82f6">' + railsReact.summary.clientComponents + '</div><div style="font-size:10px;color:var(--text2)">Client</div></div>';
+      html += '<div class="text-center"><div style="font-size:20px;font-weight:bold;color:#f59e0b">' + railsReact.summary.totalEntryPoints + '</div><div style="font-size:10px;color:var(--text2)">Entry Points</div></div>';
       html += '</div>';
 
       sortedComponents.forEach(comp => {
         const usageCount = comp.usedIn?.length || 0;
-        const ssrBadge = comp.ssr ? '<span style="margin-left:6px;font-size:9px;background:#22c55e;color:white;padding:1px 4px;border-radius:2px">SSR</span>' : '';
+        const ssrBadge = comp.ssr ? '<span class="badge-success">SSR</span>' : '';
 
         html += '<div style="background:var(--bg3);padding:12px;border-radius:6px;margin-bottom:8px;cursor:pointer" onclick="showReactComponentDetail(\\'' + encodeURIComponent(JSON.stringify(comp)) + '\\')">';
         html += '<div style="display:flex;align-items:center;justify-content:space-between">';
-        html += '<div style="font-weight:600;display:flex;align-items:center"><span style="color:#61dafb;margin-right:6px">\u269B</span>' + comp.name + ssrBadge + '</div>';
-        html += '<span style="font-size:11px;color:var(--text2)">' + usageCount + ' usage' + (usageCount !== 1 ? 's' : '') + '</span>';
+        html += '<div style="font-weight:600;display:flex;align-items:center"><span class="text-react mr-2">\u269B</span>' + comp.name + ssrBadge + '</div>';
+        html += '<span class="hint">' + usageCount + ' usage' + (usageCount !== 1 ? 's' : '') + '</span>';
         html += '</div>';
 
         // Entry point info
@@ -507,7 +383,7 @@ var PageMapGenerator = class {
             html += '<span style="background:rgba(255,255,255,0.1);padding:2px 6px;border-radius:3px;font-size:10px;border-left:2px solid ' + patternColor + '">' + usage.controller + '/' + usage.action + '</span>';
           });
           if (comp.usedIn.length > 3) {
-            html += '<span style="font-size:10px;color:var(--text2)">+' + (comp.usedIn.length - 3) + ' more</span>';
+            html += '<span class="hint-sm">+' + (comp.usedIn.length - 3) + ' more</span>';
           }
           html += '</div>';
         }
@@ -591,17 +467,17 @@ var PageMapGenerator = class {
         return;
       }
 
-      let html = '<div style="max-height:60vh;overflow-y:auto">';
+      let html = '<div class="max-h-60vh overflow-y-auto">';
       railsGrpc.services.forEach(svc => {
-        html += '<div style="background:var(--bg3);padding:12px;border-radius:6px;margin-bottom:8px">';
-        html += '<div style="font-weight:600;margin-bottom:4px">\u{1F50C} ' + svc.className + '</div>';
+        html += '<div class="info-box">';
+        html += '<div class="section-title">\u{1F50C} ' + svc.className + '</div>';
         if (svc.namespace) {
-          html += '<div style="font-size:11px;color:var(--text2);margin-bottom:8px">namespace: ' + svc.namespace + '</div>';
+          html += '<div class="hint mb-3">namespace: ' + svc.namespace + '</div>';
         }
         if (svc.rpcs && svc.rpcs.length > 0) {
-          html += '<div style="display:flex;flex-wrap:wrap;gap:4px">';
+          html += '<div class="flex flex-wrap gap-1">';
           svc.rpcs.slice(0, 15).forEach(rpc => {
-            html += '<span class="tag" style="background:var(--accent);font-size:10px">' + rpc.name + '</span>';
+            html += '<span class="tag tag-rpc tag-sm">' + rpc.name + '</span>';
           });
           if (svc.rpcs.length > 15) html += '<span style="color:var(--text2);font-size:11px">+' + (svc.rpcs.length - 15) + ' more</span>';
           html += '</div>';
@@ -623,7 +499,7 @@ var PageMapGenerator = class {
       const routes = railsRoutes || [];
 
       if (pages.length === 0 && routes.length === 0) {
-        container.innerHTML = '<div style="padding:40px;text-align:center;color:var(--text2)">No Rails pages or routes found</div>';
+        container.innerHTML = '<div class="empty-state">No Rails pages or routes found</div>';
         return;
       }
 
@@ -790,7 +666,7 @@ var PageMapGenerator = class {
           if (displayPath.length > 80) {
             displayPath = displayPath.slice(0, 77) + '...';
           }
-          const pathHighlighted = displayPath.replace(/:([a-z_]+)/g, '<span style="color:#f59e0b">:$1</span>');
+          const pathHighlighted = displayPath.replace(/:([a-z_]+)/g, '<span class="text-warning">:$1</span>');
 
           // Indicators for view, API, and response types
           let indicators = '';
@@ -820,7 +696,7 @@ var PageMapGenerator = class {
 
           html += '<div class="page-item rails-route-item" data-path="' + searchPath + '"' + hiddenAttr + ' ' + filterAttrs.join(' ') + ' onclick="showRailsRouteDetail(\\''+encodeURIComponent(JSON.stringify(route))+'\\', true)" style="cursor:pointer;' + hiddenStyle + '">';
           html += '<span class="page-type" style="background:' + methodColor + ';min-width:50px;text-align:center">' + route.method + '</span>';
-          html += '<span class="page-path" style="font-family:monospace;font-size:12px;flex:1">' + pathHighlighted + '</span>';
+          html += '<span class="page-path">' + pathHighlighted + '</span>';
           html += indicators;
           html += '</div>';
         });
@@ -906,7 +782,7 @@ var PageMapGenerator = class {
 
       html += '<div class="detail-section">';
       html += '<div class="detail-label">Path</div>';
-      html += '<div class="detail-value" style="font-family:monospace">' + route.path.replace(/:([a-z_]+)/g, '<span style="color:#f59e0b">:$1</span>') + '</div>';
+      html += '<div class="detail-value" style="font-family:monospace">' + route.path.replace(/:([a-z_]+)/g, '<span class="text-warning">:$1</span>') + '</div>';
       html += '</div>';
 
       html += '<div class="detail-section">';
@@ -928,14 +804,14 @@ var PageMapGenerator = class {
             responseTypes.push('<span style="background:#8b5cf6;color:white;padding:2px 8px;border-radius:4px;font-size:11px;margin-right:4px">' + f.toUpperCase() + '</span>');
           });
         }
-        html += responseTypes.length > 0 ? responseTypes.join('') : '<span style="color:var(--text2)">Unknown</span>';
+        html += responseTypes.length > 0 ? responseTypes.join('') : '<span class="text-muted">Unknown</span>';
         html += '</div></div>';
 
         // Redirect destination if exists
         if (action.redirectsTo) {
           html += '<div class="detail-section">';
           html += '<div class="detail-label">\u21AA\uFE0F Redirects To</div>';
-          html += '<div class="detail-value" style="font-family:monospace;font-size:12px;background:var(--bg3);padding:8px;border-radius:4px">' + action.redirectsTo + '</div>';
+          html += '<div class="detail-value-block">' + action.redirectsTo + '</div>';
           html += '</div>';
         }
       }
@@ -944,9 +820,9 @@ var PageMapGenerator = class {
       if (route.hasView && route.view) {
         html += '<div class="detail-section">';
         html += '<div class="detail-label">\u{1F4C4} View Template</div>';
-        html += '<div class="detail-value" style="font-family:monospace;font-size:12px">app/views/' + route.view.path + '</div>';
+        html += '<div class="detail-value">app/views/' + route.view.path + '</div>';
         if (route.view.partials && route.view.partials.length > 0) {
-          html += '<div style="margin-top:6px;font-size:11px;color:var(--text2)">Partials: ' + route.view.partials.slice(0, 5).join(', ') + (route.view.partials.length > 5 ? '...' : '') + '</div>';
+          html += '<div class="subtext">Partials: ' + route.view.partials.slice(0, 5).join(', ') + (route.view.partials.length > 5 ? '...' : '') + '</div>';
         }
         if (route.view.instanceVars && route.view.instanceVars.length > 0) {
           html += '<div style="margin-top:4px;font-size:11px;color:var(--text2)">Instance vars: @' + route.view.instanceVars.slice(0, 5).join(', @') + (route.view.instanceVars.length > 5 ? '...' : '') + '</div>';
@@ -958,7 +834,7 @@ var PageMapGenerator = class {
       if (ctrl && (ctrl.beforeActions.length > 0 || ctrl.afterActions.length > 0)) {
         html += '<div class="detail-section">';
         html += '<div class="detail-label">\u{1F512} Filters Applied to This Action</div>';
-        html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px">';
+        html += '<div class="code-block">';
 
         // Filter before_actions that apply to this action
         const applicableBeforeFilters = ctrl.beforeActions.filter(f => {
@@ -971,7 +847,7 @@ var PageMapGenerator = class {
           html += '<div style="font-size:11px;margin-bottom:6px"><span style="color:#22c55e;font-weight:600">Before:</span></div>';
           html += '<div class="detail-items" style="margin-left:8px">';
           applicableBeforeFilters.forEach(f => {
-            let filterInfo = '<span class="tag" style="background:#22c55e;font-size:10px">before</span><span class="name">' + f.name + '</span>';
+            let filterInfo = '<span class="tag tag-before tag-sm">before</span><span class="name">' + f.name + '</span>';
             if (f.if) filterInfo += '<span style="font-size:10px;color:var(--text2);margin-left:4px">if: ' + f.if + '</span>';
             if (f.unless) filterInfo += '<span style="font-size:10px;color:var(--text2);margin-left:4px">unless: ' + f.unless + '</span>';
             html += '<div class="detail-item">' + filterInfo + '</div>';
@@ -989,7 +865,7 @@ var PageMapGenerator = class {
           html += '<div style="font-size:11px;margin-top:8px;margin-bottom:6px"><span style="color:#f59e0b;font-weight:600">After:</span></div>';
           html += '<div class="detail-items" style="margin-left:8px">';
           applicableAfterFilters.forEach(f => {
-            let filterInfo = '<span class="tag" style="background:#f59e0b;font-size:10px">after</span><span class="name">' + f.name + '</span>';
+            let filterInfo = '<span class="tag tag-after tag-sm">after</span><span class="name">' + f.name + '</span>';
             html += '<div class="detail-item">' + filterInfo + '</div>';
           });
           html += '</div>';
@@ -1008,7 +884,7 @@ var PageMapGenerator = class {
         html += '<div class="detail-label">\u2699\uFE0F Services Called</div>';
         html += '<div class="detail-items">';
         services.forEach(s => {
-          html += '<div class="detail-item"><span class="tag" style="background:#8b5cf6">Service</span><span class="name" style="font-family:monospace">' + s + '</span></div>';
+          html += '<div class="detail-item"><span class="tag tag-service">Service</span><span class="name">' + s + '</span></div>';
         });
         html += '</div></div>';
       }
@@ -1019,7 +895,7 @@ var PageMapGenerator = class {
         html += '<div class="detail-label">\u{1F50C} gRPC Calls</div>';
         html += '<div class="detail-items">';
         route.grpcCalls.forEach(g => {
-          html += '<div class="detail-item"><span class="tag" style="background:#06b6d4">gRPC</span><span class="name" style="font-family:monospace">' + g + '</span></div>';
+          html += '<div class="detail-item"><span class="tag tag-grpc">gRPC</span><span class="name">' + g + '</span></div>';
         });
         html += '</div></div>';
       }
@@ -1031,7 +907,7 @@ var PageMapGenerator = class {
         html += '<div class="detail-label">\u{1F4BE} Models Accessed</div>';
         html += '<div class="detail-items">';
         models.forEach(m => {
-          html += '<div class="detail-item"><span class="tag" style="background:#f59e0b">Model</span><span class="name" style="font-family:monospace">' + m + '</span></div>';
+          html += '<div class="detail-item"><span class="tag tag-model">Model</span><span class="name">' + m + '</span></div>';
         });
         html += '</div></div>';
       }
@@ -1050,13 +926,13 @@ var PageMapGenerator = class {
           html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px;max-height:150px;overflow-y:auto">';
           html += '<div style="font-family:monospace;font-size:11px;line-height:1.6">';
           meaningfulCalls.forEach((call, i) => {
-            html += '<div style="padding:2px 0;border-bottom:1px solid var(--bg1)">';
+            html += '<div class="accordion-item">';
             html += '<span style="color:var(--text2);margin-right:8px">' + (i+1) + '.</span>';
-            html += '<span style="color:var(--accent)">' + call + '</span>';
+            html += '<span class="text-accent">' + call + '</span>';
             html += '</div>';
           });
           if (action.methodCalls.length > 15) {
-            html += '<div style="padding:4px 0;color:var(--text2);font-style:italic">...and ' + (action.methodCalls.length - 15) + ' more calls</div>';
+            html += '<div class="note">...and ' + (action.methodCalls.length - 15) + ' more calls</div>';
           }
           html += '</div></div></div>';
         }
@@ -1068,23 +944,23 @@ var PageMapGenerator = class {
       html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px;font-family:monospace;font-size:11px">';
 
       if (route.line > 0) {
-        html += '<div style="padding:4px 0;display:flex;align-items:center">';
-        html += '<span style="color:var(--text2);width:80px">Route:</span>';
-        html += '<span>config/routes.rb:<span style="color:#22c55e">' + route.line + '</span></span>';
+        html += '<div class="detail-item flex items-center py-1">';
+        html += '<span class="text-muted w-20">Route:</span>';
+        html += '<span>config/routes.rb:<span class="text-success">' + route.line + '</span></span>';
         html += '</div>';
       }
 
       if (ctrl) {
-        html += '<div style="padding:4px 0;display:flex;align-items:center">';
-        html += '<span style="color:var(--text2);width:80px">Controller:</span>';
+        html += '<div class="detail-item flex items-center py-1">';
+        html += '<span class="text-muted w-20">Controller:</span>';
         html += '<span>app/controllers/' + ctrl.filePath;
-        if (action && action.line) html += ':<span style="color:#22c55e">' + action.line + '</span>';
+        if (action && action.line) html += ':<span class="text-success">' + action.line + '</span>';
         html += '</span></div>';
       }
 
       if (route.hasView && route.view) {
-        html += '<div style="padding:4px 0;display:flex;align-items:center">';
-        html += '<span style="color:var(--text2);width:80px">View:</span>';
+        html += '<div class="detail-item flex items-center py-1">';
+        html += '<span class="text-muted w-20">View:</span>';
         html += '<span>app/views/' + route.view.path + '</span>';
         html += '</div>';
       }
@@ -1094,12 +970,12 @@ var PageMapGenerator = class {
       if (ctrl) {
         html += '<div class="detail-section">';
         html += '<div class="detail-label">\u{1F4CB} Controller Info</div>';
-        html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px">';
-        html += '<div style="font-weight:600;margin-bottom:4px">' + ctrl.className + '</div>';
+        html += '<div class="code-block">';
+        html += '<div class="section-title">' + ctrl.className + '</div>';
         html += '<div style="font-size:11px;color:var(--text2)">extends ' + ctrl.parentClass + '</div>';
         if (ctrl.concerns && ctrl.concerns.length > 0) {
           html += '<div style="margin-top:6px;font-size:11px">';
-          html += '<span style="color:var(--text2)">Concerns:</span> ' + ctrl.concerns.join(', ');
+          html += '<span class="text-muted">Concerns:</span> ' + ctrl.concerns.join(', ');
           html += '</div>';
         }
         html += '</div></div>';
@@ -1139,12 +1015,12 @@ var PageMapGenerator = class {
       const withUsageCount = components.filter(c => c.usedIn && c.usedIn.length > 0).length;
 
       let html = '';
-      html += '<div style="padding:12px;background:var(--bg3);border-radius:8px;margin-bottom:12px">';
+      html += '<div class="info-box mb-3">';
       html += '<div style="font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px"><span style="color:#61dafb">\u269B</span> React Components (from Rails)</div>';
       html += '<div style="display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text2)">';
       html += '<span>' + components.length + ' components</span>';
       html += '<span>\u2022</span>';
-      html += '<span style="color:#22c55e">' + ssrCount + ' SSR</span>';
+      html += '<span class="text-success">' + ssrCount + ' SSR</span>';
       html += '<span>\u2022</span>';
       html += '<span style="color:#3b82f6">' + (components.length - ssrCount) + ' client</span>';
       html += '<span>\u2022</span>';
@@ -1169,9 +1045,9 @@ var PageMapGenerator = class {
         withEntry.forEach(comp => {
           const usageCount = comp.usedIn?.length || 0;
           const tags = [];
-          if (comp.ssr) tags.push('<span class="tag" style="background:#166534;color:#86efac" title="Server-Side Rendering">SSR</span>');
-          if (usageCount > 0) tags.push('<span class="tag" style="background:#5b21b6;color:#c4b5fd" title="Used in ' + usageCount + ' view(s)">View:' + usageCount + '</span>');
-          if (comp.sourceFile) tags.push('<span class="tag" style="background:#1e3a5f;color:#93c5fd" title="Has source file">SRC</span>');
+          if (comp.ssr) tags.push('<span class="tag tag-ssr" title="Server-Side Rendering">SSR</span>');
+          if (usageCount > 0) tags.push('<span class="tag tag-view" title="Used in ' + usageCount + ' view(s)">View:' + usageCount + '</span>');
+          if (comp.sourceFile) tags.push('<span class="tag tag-src" title="Has source file">SRC</span>');
 
           // Find URL from routes based on controller/action OR infer from entry file
           let urlInfo = '';
@@ -1193,7 +1069,7 @@ var PageMapGenerator = class {
 
           html += '<div class="page-item" data-path="' + comp.name.toLowerCase() + '" onclick="showReactComponentDetail(\\'' + encodeURIComponent(JSON.stringify(comp)) + '\\')">';
           html += '<div class="page-info">';
-          html += '<span class="page-name" style="display:flex;align-items:center"><span style="color:#61dafb;margin-right:6px">\u269B</span>' + comp.name + '</span>';
+          html += '<span class="page-name" style="display:flex;align-items:center"><span class="text-react mr-2">\u269B</span>' + comp.name + '</span>';
           html += '<span class="page-path" style="font-size:10px;color:var(--accent)">' + urlInfo + '</span>';
           html += '</div>';
           html += '<div class="page-tags">' + tags.join('') + '</div>';
@@ -1216,8 +1092,8 @@ var PageMapGenerator = class {
         withoutEntry.forEach(comp => {
           const usageCount = comp.usedIn?.length || 0;
           const tags = [];
-          if (comp.ssr) tags.push('<span class="tag" style="background:#166534;color:#86efac" title="Server-Side Rendering">SSR</span>');
-          if (usageCount > 0) tags.push('<span class="tag" style="background:#5b21b6;color:#c4b5fd" title="Used in ' + usageCount + ' view(s)">View:' + usageCount + '</span>');
+          if (comp.ssr) tags.push('<span class="tag tag-ssr" title="Server-Side Rendering">SSR</span>');
+          if (usageCount > 0) tags.push('<span class="tag tag-view" title="Used in ' + usageCount + ' view(s)">View:' + usageCount + '</span>');
 
           // Find URL from routes based on controller/action
           let urlInfo = '';
@@ -1235,7 +1111,7 @@ var PageMapGenerator = class {
 
           html += '<div class="page-item" data-path="' + comp.name.toLowerCase() + '" onclick="showReactComponentDetail(\\'' + encodeURIComponent(JSON.stringify(comp)) + '\\')">';
           html += '<div class="page-info">';
-          html += '<span class="page-name" style="display:flex;align-items:center"><span style="color:#61dafb;margin-right:6px">\u269B</span>' + comp.name + '</span>';
+          html += '<span class="page-name" style="display:flex;align-items:center"><span class="text-react mr-2">\u269B</span>' + comp.name + '</span>';
           html += '<span class="page-path" style="font-size:10px;color:var(--accent)">' + (urlInfo || 'View-only') + '</span>';
           html += '</div>';
           html += '<div class="page-tags">' + tags.join('') + '</div>';
@@ -1345,7 +1221,7 @@ var PageMapGenerator = class {
       const totalWithPartials = enrichedViews.filter(v => v.partials.length > 0).length;
 
       let html = '';
-      html += '<div style="padding:12px;background:var(--bg3);border-radius:8px;margin-bottom:12px">';
+      html += '<div class="info-box mb-3">';
       html += '<div style="font-weight:600;margin-bottom:8px">\u{1F5BC}\uFE0F Rails Screens (View Templates)</div>';
       html += '<div style="display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text2)">';
       html += '<span>' + enrichedViews.length + ' screens</span>';
@@ -1392,7 +1268,7 @@ var PageMapGenerator = class {
           if (!view.hasRoute) indicators += '<span class="route-tag route-tag-warn" title="No matching route found">\u26A0\uFE0F</span>';
 
           // Display: URL path (if route exists) or controller/action
-          const displayName = view.hasRoute ? view.path.replace(/:([a-z_]+)/g, '<span style="color:#f59e0b">:$1</span>') : view.controller + '#' + view.action;
+          const displayName = view.hasRoute ? view.path.replace(/:([a-z_]+)/g, '<span class="text-warning">:$1</span>') : view.controller + '#' + view.action;
 
           // Search-friendly data-path includes path, controller, action
           const searchPath = [view.path || '', view.controller || '', view.action || '', view.viewPath || ''].join(' ').toLowerCase();
@@ -1430,7 +1306,7 @@ var PageMapGenerator = class {
       html += '<div class="detail-section">';
       html += '<div class="detail-label">\u{1F310} URL Path</div>';
       if (screen.hasRoute) {
-        html += '<div class="detail-value" style="font-family:monospace">' + screen.path.replace(/:([a-z_]+)/g, '<span style="color:#f59e0b">:$1</span>') + '</div>';
+        html += '<div class="detail-value" style="font-family:monospace">' + screen.path.replace(/:([a-z_]+)/g, '<span class="text-warning">:$1</span>') + '</div>';
       } else {
         html += '<div class="detail-value" style="color:var(--text2)">No route defined (orphan view)</div>';
       }
@@ -1523,7 +1399,7 @@ var PageMapGenerator = class {
 
           const tooltip = assignment && assignment.assignedValue ? assignment.assignedValue.replace(/"/g, '&quot;') : '';
           html += '<div class="detail-item"' + hiddenClass + ' title="' + tooltip + '">';
-          html += '<span class="tag" style="background:#8b5cf6;font-size:10px">@</span>';
+          html += '<span class="tag tag-var tag-sm">@</span>';
           html += '<span class="name" style="font-family:monospace;font-weight:500">' + v + '</span>';
 
           if (linkedModel) {
@@ -1567,10 +1443,10 @@ var PageMapGenerator = class {
         html += '<div class="detail-items">';
         screen.reactComponents.forEach(rc => {
           html += '<div class="detail-item">';
-          html += '<span class="tag" style="background:#61dafb;color:#222;font-size:10px;font-weight:600">React</span>';
+          html += '<span class="tag tag-react tag-sm" style="font-weight:600">React</span>';
           html += '<span class="name" style="font-family:monospace;font-weight:500">' + rc.name + '</span>';
           if (rc.ssr) {
-            html += '<span style="margin-left:6px;font-size:9px;background:#22c55e;color:white;padding:1px 4px;border-radius:2px">SSR</span>';
+            html += '<span class="badge-success">SSR</span>';
           }
           if (rc.propsVar) {
             html += '<span style="margin-left:auto;font-size:10px;color:var(--text2);font-family:monospace">props: ' + rc.propsVar + '</span>';
@@ -1591,7 +1467,7 @@ var PageMapGenerator = class {
         html += '<div class="detail-items" id="' + partialListId + '">';
         screen.partials.forEach((p, idx) => {
           const hiddenClass = idx >= partialLimit ? ' style="display:none" data-hidden="true"' : '';
-          html += '<div class="detail-item"' + hiddenClass + '><span class="tag" style="background:#06b6d4;font-size:10px">PARTIAL</span><span class="name" style="font-family:monospace;font-size:11px">' + p + '</span></div>';
+          html += '<div class="detail-item"' + hiddenClass + '><span class="tag tag-partial tag-sm">PARTIAL</span><span class="name" style="font-family:monospace;font-size:11px">' + p + '</span></div>';
         });
         html += '</div>';
         if (hasMorePartials) {
@@ -1606,7 +1482,7 @@ var PageMapGenerator = class {
         html += '<div class="detail-label">\u2699\uFE0F Services Called</div>';
         html += '<div class="detail-items">';
         screen.services.forEach(s => {
-          html += '<div class="detail-item"><span class="tag" style="background:#8b5cf6">Service</span><span class="name" style="font-family:monospace">' + s + '</span></div>';
+          html += '<div class="detail-item"><span class="tag tag-service">Service</span><span class="name">' + s + '</span></div>';
         });
         html += '</div></div>';
       }
@@ -1617,7 +1493,7 @@ var PageMapGenerator = class {
         html += '<div class="detail-label">\u{1F50C} gRPC Calls</div>';
         html += '<div class="detail-items">';
         screen.grpcCalls.forEach(g => {
-          html += '<div class="detail-item"><span class="tag" style="background:#06b6d4">gRPC</span><span class="name" style="font-family:monospace">' + g + '</span></div>';
+          html += '<div class="detail-item"><span class="tag tag-grpc">gRPC</span><span class="name">' + g + '</span></div>';
         });
         html += '</div></div>';
       }
@@ -1628,7 +1504,7 @@ var PageMapGenerator = class {
         html += '<div class="detail-label">\u{1F4BE} Models Used</div>';
         html += '<div class="detail-items">';
         screen.modelAccess.forEach(m => {
-          html += '<div class="detail-item"><span class="tag" style="background:#f59e0b">Model</span><span class="name" style="font-family:monospace">' + m + '</span></div>';
+          html += '<div class="detail-item"><span class="tag tag-model">Model</span><span class="name">' + m + '</span></div>';
         });
         html += '</div></div>';
       }
@@ -1636,10 +1512,10 @@ var PageMapGenerator = class {
       // Controller Action info
       html += '<div class="detail-section">';
       html += '<div class="detail-label">\u{1F3AE} Controller Action</div>';
-      html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px">';
+      html += '<div class="code-block">';
       html += '<div style="font-family:monospace;font-size:12px">' + screen.controller + '#' + screen.action + '</div>';
       if (screen.controllerInfo) {
-        html += '<div style="margin-top:6px;font-size:11px;color:var(--text2)">app/controllers/' + screen.controllerInfo.filePath;
+        html += '<div class="subtext">app/controllers/' + screen.controllerInfo.filePath;
         if (screen.actionLine) html += ':' + screen.actionLine;
         html += '</div>';
 
@@ -1652,7 +1528,7 @@ var PageMapGenerator = class {
           });
           if (applicableFilters.length > 0) {
             html += '<div style="margin-top:8px;font-size:11px">';
-            html += '<span style="color:#22c55e">Before filters:</span> ' + applicableFilters.map(f => f.name).join(', ');
+            html += '<span class="text-success">Before filters:</span> ' + applicableFilters.map(f => f.name).join(', ');
             html += '</div>';
           }
         }
@@ -1717,7 +1593,7 @@ var PageMapGenerator = class {
       html += '<div class="detail-label">Method & Path</div>';
       html += '<div class="detail-value">';
       html += '<span style="background:' + methodColor + ';color:white;padding:2px 8px;border-radius:4px;font-weight:600;margin-right:8px">' + (route.method || 'GET') + '</span>';
-      html += '<span style="font-family:monospace">' + route.path.replace(/:([a-z_]+)/g, '<span style="color:#f59e0b">:$1</span>') + '</span>';
+      html += '<span class="mono">' + route.path.replace(/:([a-z_]+)/g, '<span class="text-warning">:$1</span>') + '</span>';
       html += '</div></div>';
 
       html += '<div class="detail-section">';
@@ -1739,7 +1615,7 @@ var PageMapGenerator = class {
             responseTypes.push('<span style="background:#8b5cf6;color:white;padding:2px 8px;border-radius:4px;font-size:11px;margin-right:4px">' + f.toUpperCase() + '</span>');
           });
         }
-        html += responseTypes.length > 0 ? responseTypes.join('') : '<span style="color:var(--text2)">Unknown</span>';
+        html += responseTypes.length > 0 ? responseTypes.join('') : '<span class="text-muted">Unknown</span>';
         html += '</div></div>';
 
         if (actionDetails.redirectsTo) {
@@ -1757,7 +1633,7 @@ var PageMapGenerator = class {
         html += '<div class="detail-label">\u{1F4C4} View Template</div>';
         html += '<div class="detail-value" style="font-family:monospace;font-size:12px">app/views/' + view.path + '</div>';
         if (view.partials && view.partials.length > 0) {
-          html += '<div style="margin-top:6px;font-size:11px;color:var(--text2)">Partials: ' + view.partials.slice(0, 5).join(', ') + '</div>';
+          html += '<div class="subtext">Partials: ' + view.partials.slice(0, 5).join(', ') + '</div>';
         }
         if (view.instanceVars && view.instanceVars.length > 0) {
           html += '<div style="margin-top:4px;font-size:11px;color:var(--text2)">Instance vars: @' + view.instanceVars.slice(0, 5).join(', @') + '</div>';
@@ -1769,7 +1645,7 @@ var PageMapGenerator = class {
       if (controllerInfo && (controllerInfo.beforeActions.length > 0 || controllerInfo.afterActions.length > 0)) {
         html += '<div class="detail-section">';
         html += '<div class="detail-label">\u{1F512} Filters Applied</div>';
-        html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px">';
+        html += '<div class="code-block">';
 
         const applicableBeforeFilters = controllerInfo.beforeActions.filter(f => {
           if (f.only && f.only.length > 0) return f.only.includes(route.action);
@@ -1781,7 +1657,7 @@ var PageMapGenerator = class {
           html += '<div style="font-size:11px;margin-bottom:4px"><span style="color:#22c55e;font-weight:600">Before:</span> ';
           html += applicableBeforeFilters.map(f => {
             let info = f.name;
-            if (f.if) info += ' <span style="color:var(--text2)">(if: ' + f.if + ')</span>';
+            if (f.if) info += ' <span class="text-muted">(if: ' + f.if + ')</span>';
             return info;
           }).join(', ');
           html += '</div>';
@@ -1812,7 +1688,7 @@ var PageMapGenerator = class {
         html += '<div class="detail-label">\u2699\uFE0F Services Called</div>';
         html += '<div class="detail-items">';
         services.forEach(s => {
-          html += '<div class="detail-item"><span class="tag" style="background:#8b5cf6">Service</span><span class="name" style="font-family:monospace">' + s + '</span></div>';
+          html += '<div class="detail-item"><span class="tag tag-service">Service</span><span class="name">' + s + '</span></div>';
         });
         html += '</div></div>';
       }
@@ -1824,7 +1700,7 @@ var PageMapGenerator = class {
         html += '<div class="detail-label">\u{1F50C} gRPC Calls</div>';
         html += '<div class="detail-items">';
         grpcCalls.forEach(g => {
-          html += '<div class="detail-item"><span class="tag" style="background:#06b6d4">gRPC</span><span class="name" style="font-family:monospace">' + g + '</span></div>';
+          html += '<div class="detail-item"><span class="tag tag-grpc">gRPC</span><span class="name">' + g + '</span></div>';
         });
         html += '</div></div>';
       }
@@ -1836,7 +1712,7 @@ var PageMapGenerator = class {
         html += '<div class="detail-label">\u{1F4BE} Models Accessed</div>';
         html += '<div class="detail-items">';
         models.forEach(m => {
-          html += '<div class="detail-item"><span class="tag" style="background:#f59e0b">Model</span><span class="name" style="font-family:monospace">' + m + '</span></div>';
+          html += '<div class="detail-item"><span class="tag tag-model">Model</span><span class="name">' + m + '</span></div>';
         });
         html += '</div></div>';
       }
@@ -1854,13 +1730,13 @@ var PageMapGenerator = class {
           html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px;max-height:150px;overflow-y:auto">';
           html += '<div style="font-family:monospace;font-size:11px;line-height:1.6">';
           meaningfulCalls.forEach((call, i) => {
-            html += '<div style="padding:2px 0;border-bottom:1px solid var(--bg1)">';
+            html += '<div class="accordion-item">';
             html += '<span style="color:var(--text2);margin-right:8px">' + (i+1) + '.</span>';
-            html += '<span style="color:var(--accent)">' + call + '</span>';
+            html += '<span class="text-accent">' + call + '</span>';
             html += '</div>';
           });
           if (actionDetails.methodCalls.length > 15) {
-            html += '<div style="padding:4px 0;color:var(--text2);font-style:italic">...and ' + (actionDetails.methodCalls.length - 15) + ' more</div>';
+            html += '<div class="note">...and ' + (actionDetails.methodCalls.length - 15) + ' more</div>';
           }
           html += '</div></div></div>';
         }
@@ -1872,16 +1748,16 @@ var PageMapGenerator = class {
       html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px;font-family:monospace;font-size:11px">';
 
       if (controllerInfo) {
-        html += '<div style="padding:4px 0;display:flex;align-items:center">';
-        html += '<span style="color:var(--text2);width:80px">Controller:</span>';
+        html += '<div class="detail-item flex items-center py-1">';
+        html += '<span class="text-muted w-20">Controller:</span>';
         html += '<span>app/controllers/' + controllerInfo.filePath;
-        if (actionDetails && actionDetails.line) html += ':<span style="color:#22c55e">' + actionDetails.line + '</span>';
+        if (actionDetails && actionDetails.line) html += ':<span class="text-success">' + actionDetails.line + '</span>';
         html += '</span></div>';
       }
 
       if (view) {
-        html += '<div style="padding:4px 0;display:flex;align-items:center">';
-        html += '<span style="color:var(--text2);width:80px">View:</span>';
+        html += '<div class="detail-item flex items-center py-1">';
+        html += '<span class="text-muted w-20">View:</span>';
         html += '<span>app/views/' + view.path + '</span>';
         html += '</div>';
       }
@@ -1891,12 +1767,12 @@ var PageMapGenerator = class {
       if (controllerInfo) {
         html += '<div class="detail-section">';
         html += '<div class="detail-label">\u{1F4CB} Controller Info</div>';
-        html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px">';
-        html += '<div style="font-weight:600;margin-bottom:4px">' + controllerInfo.className + '</div>';
+        html += '<div class="code-block">';
+        html += '<div class="section-title">' + controllerInfo.className + '</div>';
         html += '<div style="font-size:11px;color:var(--text2)">extends ' + controllerInfo.parentClass + '</div>';
         if (controllerInfo.concerns && controllerInfo.concerns.length > 0) {
           html += '<div style="margin-top:6px;font-size:11px">';
-          html += '<span style="color:var(--text2)">Concerns:</span> ' + controllerInfo.concerns.join(', ');
+          html += '<span class="text-muted">Concerns:</span> ' + controllerInfo.concerns.join(', ');
           html += '</div>';
         }
         html += '</div></div>';
@@ -1935,7 +1811,7 @@ var PageMapGenerator = class {
         html += '<div class="detail-label">Partials Used</div>';
         html += '<div class="detail-items">';
         view.partials.forEach(p => {
-          html += '<div class="detail-item"><span class="tag" style="background:#6b7280">PARTIAL</span><span class="name">' + p + '</span></div>';
+          html += '<div class="detail-item"><span class="tag tag-partial">PARTIAL</span><span class="name">' + p + '</span></div>';
         });
         html += '</div></div>';
       }
@@ -1945,7 +1821,7 @@ var PageMapGenerator = class {
         html += '<div class="detail-label">Instance Variables</div>';
         html += '<div class="detail-items">';
         view.instanceVars.slice(0, 10).forEach(v => {
-          html += '<div class="detail-item"><span class="tag" style="background:#f59e0b">@</span><span class="name">' + v + '</span></div>';
+          html += '<div class="detail-item"><span class="tag tag-var">@</span><span class="name">' + v + '</span></div>';
         });
         if (view.instanceVars.length > 10) {
           html += '<div style="padding:4px 8px;color:var(--text2);font-size:11px">...and ' + (view.instanceVars.length - 10) + ' more</div>';
@@ -2150,7 +2026,7 @@ var PageMapGenerator = class {
             // Path header with depth visual
             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:'+(ops[0]?.depth * 8)+'px">' +
-              depthIndicator + '<span style="color:var(--accent)">' + pathLabel + '</span> (' + ops.length + ')' +
+              depthIndicator + '<span class="text-accent">' + pathLabel + '</span> (' + ops.length + ')' +
               '</div>';
 
             ops.forEach(op => {
@@ -2171,7 +2047,7 @@ var PageMapGenerator = class {
           dataHtml += '<div class="detail-section"><h4>Used Components</h4>';
           uniqueComponentRefs.forEach(df => {
             const name = df.operationName || '';
-            dataHtml += '<div class="detail-item" style="cursor:default"><span class="tag" style="background:var(--text2);color:var(--bg)">COMPONENT</span> '+name+'</div>';
+            dataHtml += '<div class="detail-item" style="cursor:default"><span class="tag tag-default">COMPONENT</span> '+name+'</div>';
           });
           dataHtml += '</div>';
         }
@@ -2196,7 +2072,7 @@ var PageMapGenerator = class {
           const methodColors = {GET:'#22c55e',POST:'#3b82f6',PUT:'#f59e0b',DELETE:'#ef4444',PATCH:'#8b5cf6'};
           const color = methodColors[api.method] || '#6b7280';
           restApiHtml += '<div class="detail-item api-item" onclick="event.stopPropagation(); showApiDetail(\\''+api.id.replace(/'/g, "\\\\'")+'\\')">' +
-            '<div class="api-row"><span class="tag" style="background:'+color+'">'+api.method+'</span><span class="api-url">'+api.url+'</span></div>' +
+            '<div class="api-row"><span class="tag" style="background:'+color+';color:white">'+api.method+'</span><span class="api-url">'+api.url+'</span></div>' +
             (api.filePath ? '<div class="api-route">'+api.callType+' in '+api.filePath+'</div>' : '') +
             '</div>';
         });
@@ -2343,7 +2219,7 @@ var PageMapGenerator = class {
         html += '<div style="margin-bottom:12px">';
         html += '<div class="detail-item" style="cursor:pointer;background:var(--bg3);border-radius:4px" onclick="toggleGroupList(this)">';
         html += '<div class="detail-label" style="display:flex;align-items:center;gap:6px"><span class="group-toggle">\u25B8</span>/'+g+'</div>';
-        html += '<span style="color:var(--accent)">'+groupPages.length+' pages</span></div>';
+        html += '<span class="text-accent">'+groupPages.length+' pages</span></div>';
         html += '<div class="group-page-list" style="display:none;margin-left:16px;margin-top:4px">';
         groupPages.sort((a,b) => a.path.localeCompare(b.path)).forEach(p => {
           const isAuth = p.authentication?.required;
@@ -2351,7 +2227,7 @@ var PageMapGenerator = class {
           html += '<div class="detail-item rel-item" style="cursor:pointer;padding:6px 8px" onclick="event.stopPropagation(); selectPage(\\''+p.path+'\\')">'+
             '<span style="font-family:monospace;font-size:11px;color:var(--text)">'+p.path+'</span>'+
             (isAuth ? '<span class="tag tag-auth" style="margin-left:6px;font-size:9px">AUTH</span>' : '')+
-            (isDynamic ? '<span class="tag" style="margin-left:6px;font-size:9px;background:#6366f1">DYNAMIC</span>' : '')+
+            (isDynamic ? '<span class="tag tag-info" style="margin-left:6px" title="Dynamic Route">DYNAMIC</span>' : '')+
             '</div>';
         });
         html += '</div></div>';
@@ -2464,7 +2340,7 @@ var PageMapGenerator = class {
       const fragments = Array.from(gqlMap.values()).filter(o => o.type === 'fragment');
 
       if (queries.length > 0) {
-        html += '<div style="margin:8px 0;font-size:11px;color:var(--accent)">Queries ('+queries.length+')</div>';
+        html += '<div class="subtext-accent">Queries ('+queries.length+')</div>';
         queries.slice(0, 20).forEach(op => {
           html += '<div class="detail-item data-op" onclick="event.stopPropagation(); showDataDetail(\\''+op.name.replace(/'/g, "\\\\'")+'\\')">' +
             '<span class="tag tag-query">QUERY</span> '+op.name+'</div>';
@@ -2475,7 +2351,7 @@ var PageMapGenerator = class {
       }
 
       if (mutations.length > 0) {
-        html += '<div style="margin:8px 0;font-size:11px;color:var(--accent)">Mutations ('+mutations.length+')</div>';
+        html += '<div class="subtext-accent">Mutations ('+mutations.length+')</div>';
         mutations.slice(0, 10).forEach(op => {
           html += '<div class="detail-item data-op" onclick="event.stopPropagation(); showDataDetail(\\''+op.name.replace(/'/g, "\\\\'")+'\\')">' +
             '<span class="tag tag-mutation">MUTATION</span> '+op.name+'</div>';
@@ -2486,10 +2362,10 @@ var PageMapGenerator = class {
       }
 
       if (fragments.length > 0) {
-        html += '<div style="margin:8px 0;font-size:11px;color:var(--accent)">Fragments ('+fragments.length+')</div>';
+        html += '<div class="subtext-accent">Fragments ('+fragments.length+')</div>';
         fragments.slice(0, 5).forEach(op => {
           html += '<div class="detail-item data-op" onclick="event.stopPropagation(); showDataDetail(\\''+op.name.replace(/'/g, "\\\\'")+'\\')">' +
-            '<span class="tag" style="background:#6b7280">FRAGMENT</span> '+op.name+'</div>';
+            '<span class="tag tag-default">FRAGMENT</span> '+op.name+'</div>';
         });
         if (fragments.length > 5) {
           html += '<div style="color:var(--text2);font-size:10px;padding:4px">... and '+(fragments.length-5)+' more fragments</div>';
@@ -2514,7 +2390,7 @@ var PageMapGenerator = class {
           const methodColors = {GET:'#22c55e',POST:'#3b82f6',PUT:'#f59e0b',DELETE:'#ef4444',PATCH:'#8b5cf6'};
           const color = methodColors[api.method] || '#6b7280';
           html += '<div class="detail-item api-item" onclick="event.stopPropagation(); showApiDetail(\\''+api.id.replace(/'/g, "\\\\'")+'\\')">' +
-            '<div class="api-row"><span class="tag" style="background:'+color+'">'+api.method+'</span><span class="api-url">'+api.url+'</span></div>' +
+            '<div class="api-row"><span class="tag" style="background:'+color+';color:white">'+api.method+'</span><span class="api-url">'+api.url+'</span></div>' +
             '<div class="api-route">'+api.callType+' in '+api.filePath+'</div>' +
             '</div>';
         });
@@ -2549,7 +2425,7 @@ var PageMapGenerator = class {
 
       if (api.category && api.category !== 'internal') {
         html += '<div class="detail-section"><h4>Category</h4>' +
-          '<span class="tag" style="background:var(--accent);color:white">'+api.category.toUpperCase()+'</span></div>';
+          '<span class="tag tag-accent">'+api.category.toUpperCase()+'</span></div>';
       }
 
       // Show in modal
@@ -2656,7 +2532,7 @@ var PageMapGenerator = class {
         // 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 style="color:var(--accent)">'+sourcePath+'</span></div></div>';
+          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>';
         }
 
         // Operation Name with copy button
@@ -2734,7 +2610,7 @@ var PageMapGenerator = class {
             });
             if (queries.length > 5) {
               const remaining = queries.slice(5).map(o => ({name: o.name}));
-              html += '<div class="expand-more" onclick="expandMore(\\'query\\', '+JSON.stringify(remaining).replace(/"/g, '&quot;')+', this)" style="color:var(--accent);font-size:10px;cursor:pointer;padding:4px 0">\u25B8 Show ' + (queries.length - 5) + ' more queries</div>';
+              html += '<div class="expand-more" onclick="expandMore(\\'query\\', '+JSON.stringify(remaining).replace(/"/g, '&quot;')+', this)" class="expand-more">\u25B8 Show ' + (queries.length - 5) + ' more queries</div>';
             }
           }
 
@@ -2746,7 +2622,7 @@ var PageMapGenerator = class {
             });
             if (mutations.length > 5) {
               const remaining = mutations.slice(5).map(o => ({name: o.name}));
-              html += '<div class="expand-more" onclick="expandMore(\\'mutation\\', '+JSON.stringify(remaining).replace(/"/g, '&quot;')+', this)" style="color:var(--accent);font-size:10px;cursor:pointer;padding:4px 0">\u25B8 Show ' + (mutations.length - 5) + ' more mutations</div>';
+              html += '<div class="expand-more" onclick="expandMore(\\'mutation\\', '+JSON.stringify(remaining).replace(/"/g, '&quot;')+', this)" class="expand-more">\u25B8 Show ' + (mutations.length - 5) + ' more mutations</div>';
             }
           }
 
@@ -2754,11 +2630,11 @@ var PageMapGenerator = class {
             html += '<div style="margin:8px 0;font-size:10px;color:var(--text2)">Fragments ('+fragments.length+')</div>';
             fragments.slice(0,3).forEach(op => {
               html += '<div class="detail-item data-op" onclick="showDataDetail(\\''+op.name.replace(/'/g, "\\\\'")+'\\')">' +
-                '<span class="tag" style="background:#6b7280">FRAGMENT</span> '+op.name+'</div>';
+                '<span class="tag tag-default">FRAGMENT</span> '+op.name+'</div>';
             });
             if (fragments.length > 3) {
               const remaining = fragments.slice(3).map(o => ({name: o.name}));
-              html += '<div class="expand-more" onclick="expandMore(\\'fragment\\', '+JSON.stringify(remaining).replace(/"/g, '&quot;')+', this)" style="color:var(--accent);font-size:10px;cursor:pointer;padding:4px 0">\u25B8 Show ' + (fragments.length - 3) + ' more fragments</div>';
+              html += '<div class="expand-more" onclick="expandMore(\\'fragment\\', '+JSON.stringify(remaining).replace(/"/g, '&quot;')+', this)" class="expand-more">\u25B8 Show ' + (fragments.length - 3) + ' more fragments</div>';
             }
           }
 
@@ -2874,7 +2750,7 @@ var PageMapGenerator = class {
             });
             if (queries.length > 8) {
               const remaining = queries.slice(8).map(o => ({name: o.name}));
-              html += '<div class="expand-more" onclick="expandMore(\\'query\\', '+JSON.stringify(remaining).replace(/"/g, '&quot;')+', this)" style="color:var(--accent);font-size:10px;cursor:pointer;padding:4px 0">\u25B8 Show ' + (queries.length - 8) + ' more</div>';
+              html += '<div class="expand-more" onclick="expandMore(\\'query\\', '+JSON.stringify(remaining).replace(/"/g, '&quot;')+', this)" class="expand-more">\u25B8 Show ' + (queries.length - 8) + ' more</div>';
             }
           }
 
@@ -2886,7 +2762,7 @@ var PageMapGenerator = class {
             });
             if (mutations.length > 5) {
               const remaining = mutations.slice(5).map(o => ({name: o.name}));
-              html += '<div class="expand-more" onclick="expandMore(\\'mutation\\', '+JSON.stringify(remaining).replace(/"/g, '&quot;')+', this)" style="color:var(--accent);font-size:10px;cursor:pointer;padding:4px 0">\u25B8 Show ' + (mutations.length - 5) + ' more</div>';
+              html += '<div class="expand-more" onclick="expandMore(\\'mutation\\', '+JSON.stringify(remaining).replace(/"/g, '&quot;')+', this)" class="expand-more">\u25B8 Show ' + (mutations.length - 5) + ' more</div>';
             }
           }
 
@@ -2894,11 +2770,11 @@ var PageMapGenerator = class {
             html += '<div style="margin:8px 0 6px;font-size:10px;color:var(--text2)">Fragments ('+fragments.length+')</div>';
             fragments.slice(0, 3).forEach(op => {
               html += '<div class="detail-item data-op" onclick="showDataDetail(\\''+op.name.replace(/'/g, "\\\\'")+'\\')">' +
-                '<span class="tag" style="background:#6b7280">FRAGMENT</span> '+op.name+'</div>';
+                '<span class="tag tag-default">FRAGMENT</span> '+op.name+'</div>';
             });
             if (fragments.length > 3) {
               const remaining = fragments.slice(3).map(o => ({name: o.name}));
-              html += '<div class="expand-more" onclick="expandMore(\\'fragment\\', '+JSON.stringify(remaining).replace(/"/g, '&quot;')+', this)" style="color:var(--accent);font-size:10px;cursor:pointer;padding:4px 0">\u25B8 Show ' + (fragments.length - 3) + ' more</div>';
+              html += '<div class="expand-more" onclick="expandMore(\\'fragment\\', '+JSON.stringify(remaining).replace(/"/g, '&quot;')+', this)" class="expand-more">\u25B8 Show ' + (fragments.length - 3) + ' more</div>';
             }
           }
 
@@ -3441,86 +3317,21 @@ var PageMapGenerator = class {
     }
   </script>
 </body>
-</html>`;
-  }
-  buildTreeHtml(groups, allPages) {
-    const colors = [
-      "#ef4444",
-      "#f97316",
-      "#eab308",
-      "#22c55e",
-      "#14b8a6",
-      "#3b82f6",
-      "#8b5cf6",
-      "#ec4899"
-    ];
-    let idx = 0;
-    return Array.from(groups.entries()).sort((a, b) => a[0].localeCompare(b[0])).map(([name, pages]) => {
-      const color = colors[idx++ % colors.length];
-      const sorted = pages.sort((a, b) => a.path.localeCompare(b.path));
-      const pathSet = new Set(sorted.map((p) => p.path));
-      const depthMap = /* @__PURE__ */ new Map();
-      for (const p of sorted) {
-        const segments = p.path.split("/").filter(Boolean);
-        let depth = 0;
-        for (let i = segments.length - 1; i >= 1; i--) {
-          const ancestorPath = "/" + segments.slice(0, i).join("/");
-          if (pathSet.has(ancestorPath)) {
-            depth = (depthMap.get(ancestorPath) ?? 0) + 1;
-            break;
-          }
-        }
-        depthMap.set(p.path, depth);
-      }
-      const pagesHtml = sorted.map((p) => {
-        const type = this.getPageType(p.path);
-        const queries = (p.dataFetching || []).filter(
-          (d) => !d.type?.includes("Mutation")
-        ).length;
-        const mutations = (p.dataFetching || []).filter(
-          (d) => d.type?.includes("Mutation")
-        ).length;
-        const depth = depthMap.get(p.path) ?? 0;
-        const pageNode = p;
-        const repoName = pageNode.repo || "";
-        const showRepoTag = allPages.some(
-          (pg) => pg.repo && pg.repo !== repoName
-        );
-        const shortRepoName = repoName.split("/").pop()?.split("-").map((s) => s.substring(0, 4)).join("-") || repoName.substring(0, 8);
-        const repoTag = showRepoTag && repoName ? `<span class="tag tag-repo" title="${repoName}">${shortRepoName}</span>` : "";
-        const isSpaComponent = /^\/[A-Z]/.test(p.path) || p.filePath && p.filePath.includes("components/pages");
-        const displayPath = isSpaComponent && p.filePath ? p.filePath.replace(/\.tsx?$/, "").replace(/^(frontend\/src\/|src\/)/, "") : p.path;
-        const spaTag = isSpaComponent ? '<span class="tag" style="background:#6366f1;color:white" title="SPA Component Page">SPA</span>' : "";
-        return `<div class="page-item" data-path="${p.path}" data-repo="${repoName}" onclick="selectPage('${p.path}')" style="--depth:${depth}">
-              <span class="page-type" style="--type-color:${type.color}">${type.label}</span>
-              <span class="page-path">${displayPath}</span>
+</html>`}buildTreeHtml(s,r){let c=["#ef4444","#f97316","#eab308","#22c55e","#14b8a6","#3b82f6","#8b5cf6","#ec4899"],v=0;return Array.from(s.entries()).sort((t,l)=>t[0].localeCompare(l[0])).map(([t,l])=>{let e=c[v++%c.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),u=0;for(let h=m.length-1;h>=1;h--){let y="/"+m.slice(0,h).join("/");if(o.has(y)){u=(p.get(y)??0)+1;break}}p.set(a.path,u);}let f=i.map(a=>{let m=this.getPageType(a.path),u=(a.dataFetching||[]).filter(g=>!g.type?.includes("Mutation")).length,h=(a.dataFetching||[]).filter(g=>g.type?.includes("Mutation")).length,y=p.get(a.path)??0,n=a.repo||"",w=r.some(g=>g.repo&&g.repo!==n),C=n.split("/").pop()?.split("-").map(g=>g.substring(0,4)).join("-")||n.substring(0,8),x=w&&n?`<span class="tag tag-repo" title="${n}">${C}</span>`:"",d=/^\/[A-Z]/.test(a.path)||a.filePath&&a.filePath.includes("components/pages"),b=d&&a.filePath?a.filePath.replace(/\.tsx?$/,"").replace(/^(frontend\/src\/|src\/)/,""):a.path,R=d?'<span class="tag tag-info" title="SPA Component Page">SPA</span>':"";return `<div class="page-item" data-path="${a.path}" data-repo="${n}" onclick="selectPage('${a.path}')" style="--depth:${y}">
+              <span class="page-type" style="--type-color:${m.color}">${m.label}</span>
+              <span class="page-path">${b}</span>
               <div class="page-tags">
-                ${repoTag}
-                ${spaTag}
-                ${p.authentication?.required ? '<span class="tag tag-auth">AUTH</span>' : ""}
-                ${queries > 0 ? `<span class="tag tag-query">Q:${queries}</span>` : ""}
-                ${mutations > 0 ? `<span class="tag tag-mutation">M:${mutations}</span>` : ""}
+                ${x}
+                ${R}
+                ${a.authentication?.required?'<span class="tag tag-auth">AUTH</span>':""}
+                ${u>0?`<span class="tag tag-query">Q:${u}</span>`:""}
+                ${h>0?`<span class="tag tag-mutation">M:${h}</span>`:""}
               </div>
-            </div>`;
-      }).join("");
-      return `<div class="group">
-          <div class="group-header" onclick="toggleGroup(this)" style="--group-color:${color}">
+            </div>`}).join("");return `<div class="group">
+          <div class="group-header" onclick="toggleGroup(this)" style="--group-color:${e}">
             <span class="group-arrow">\u25BC</span>
-            <span class="group-name">/${name}</span>
-            <span class="group-count">${pages.length}</span>
+            <span class="group-name">/${t}</span>
+            <span class="group-count">${l.length}</span>
           </div>
-          <div class="group-content">${pagesHtml}</div>
-        </div>`;
-    }).join("");
-  }
-  getPageType(path) {
-    const last = path.split("/").filter(Boolean).pop() || "";
-    if (last === "new" || path.endsWith("/new")) return { label: "CREATE", color: "#22c55e" };
-    if (last === "edit" || path.includes("/edit")) return { label: "EDIT", color: "#f59e0b" };
-    if (last.startsWith("[") || last.startsWith(":")) return { label: "DETAIL", color: "#3b82f6" };
-    if (path.includes("setting")) return { label: "SETTINGS", color: "#6b7280" };
-    return { label: "LIST", color: "#06b6d4" };
-  }
-};
-
-export { PageMapGenerator };
+          <div class="group-content">${f}</div>
+        </div>`}).join("")}getPageType(s){let r=s.split("/").filter(Boolean).pop()||"";return r==="new"||s.endsWith("/new")?{label:"CREATE",color:"#22c55e"}:r==="edit"||s.includes("/edit")?{label:"EDIT",color:"#f59e0b"}:r.startsWith("[")||r.startsWith(":")?{label:"DETAIL",color:"#3b82f6"}:s.includes("setting")?{label:"SETTINGS",color:"#6b7280"}:{label:"LIST",color:"#06b6d4"}}};export{S as a};