@wtdlee/repomap 0.3.0 → 0.3.2

package/dist/{generators/page-map-generator.js → chunk-MOEA75XK.js}

@@ -1,142 +1,4 @@
-/**
- * Interactive page map generator
- */
-export class PageMapGenerator {
-    graphqlOps = [];
-    apiCalls = [];
-    components = [];
-    generatePageMapHtml(report, options) {
-        const allPages = [];
-        const envResult = options?.envResult;
-        const railsAnalysis = options?.railsAnalysis;
-        const activeTab = options?.activeTab || 'pages';
-        // Get repository name for display
-        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 || []));
-            // Collect component information
-            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 = 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) {
-                // Use segment count for depth when no parent page exists
-                // This ensures proper indentation based on URL structure
-                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);
-        // Rails data for integrated view
-        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';
-        // Environment info
-        const hasRails = envResult?.hasRails || false;
-        const hasNextjs = envResult?.hasNextjs || false;
-        const hasReact = envResult?.hasReact || false;
-        // Group by first path segment
-        const groups = 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">
@@ -147,23 +9,21 @@ export class PageMapGenerator {
 <body>
   <header class="header">
     <div style="display:flex;align-items:center;gap:24px">
-      <h1 style="cursor:pointer" onclick="location.href='/'">📊 ${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')">⚛️ Next.js</button>
-          <button class="env-badge" data-env="rails" onclick="filterByEnv('rails')">🛤️ Rails</button>
-        </div>`
-            : ''}
+          <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>`:""}
       <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>
@@ -198,42 +58,40 @@ export class PageMapGenerator {
       <!-- 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">⚛ 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>
 
@@ -254,7 +112,7 @@ export class PageMapGenerator {
   <div class="detail" id="detail">
     <div class="detail-header">
       <div class="detail-title" id="detail-title"></div>
-      <button class="detail-close" onclick="closeDetail()">×</button>
+      <button class="detail-close" onclick="closeDetail()">\xD7</button>
     </div>
     <div class="detail-body" id="detail-body"></div>
   </div>
@@ -263,10 +121,10 @@ export class PageMapGenerator {
     <div class="modal-box">
       <div class="modal-head">
         <div style="display:flex;align-items:center;gap:8px">
-          <button id="modal-back" class="modal-back" onclick="modalBack()" style="display:none">←</button>
+          <button id="modal-back" class="modal-back" onclick="modalBack()" style="display:none">\u2190</button>
           <h3 id="modal-title"></h3>
         </div>
-        <button class="modal-close" onclick="closeModal()">×</button>
+        <button class="modal-close" onclick="closeModal()">\xD7</button>
       </div>
       <div class="modal-body" id="modal-body"></div>
     </div>
@@ -275,16 +133,16 @@ export class PageMapGenerator {
   <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]));
@@ -292,16 +150,16 @@ export class PageMapGenerator {
     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 = [];
@@ -395,17 +253,17 @@ export class PageMapGenerator {
         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)">📂 ' + ns + ' (' + routes.length + ')</div>';
+        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>';
         });
@@ -416,7 +274,7 @@ export class PageMapGenerator {
       }
       html += '</div>';
 
-      showModal('🛤️ Rails Routes (' + railsRoutes.length + ')', html);
+      showModal('\u{1F6E4}\uFE0F Rails Routes (' + railsRoutes.length + ')', html);
     }
 
     function showRailsControllers() {
@@ -425,13 +283,13 @@ export class PageMapGenerator {
         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>';
@@ -443,7 +301,7 @@ export class PageMapGenerator {
       });
       html += '</div>';
 
-      showModal('🎮 Rails Controllers (' + railsControllers.length + ')', html);
+      showModal('\u{1F3AE} Rails Controllers (' + railsControllers.length + ')', html);
     }
 
     function showRailsModels() {
@@ -452,16 +310,16 @@ export class PageMapGenerator {
         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">📦 ' + model.className + '</div>';
-        html += '<div style="display:flex;gap:16px;font-size:11px;color:var(--text2);margin-bottom:8px">';
-        html += '<span>📎 ' + (model.associations?.length || 0) + ' associations</span>';
-        html += '<span>✓ ' + (model.validations?.length || 0) + ' validations</span>';
+        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>';
@@ -473,7 +331,7 @@ export class PageMapGenerator {
       });
       html += '</div>';
 
-      showModal('📦 Rails Models (' + railsModels.length + ')', html);
+      showModal('\u{1F4E6} Rails Models (' + railsModels.length + ')', html);
     }
 
     function showReactComponents() {
@@ -487,34 +345,34 @@ export class PageMapGenerator {
         (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">⚛</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
         if (comp.entryFile) {
-          html += '<div style="font-size:10px;color:var(--text2);margin-top:4px;font-family:monospace">📥 entries/' + comp.entryFile + '</div>';
+          html += '<div style="font-size:10px;color:var(--text2);margin-top:4px;font-family:monospace">\u{1F4E5} entries/' + comp.entryFile + '</div>';
         }
 
         // Source file info
         if (comp.sourceFile) {
-          html += '<div style="font-size:10px;color:var(--accent);margin-top:2px;font-family:monospace">📄 ' + comp.sourceFile + '</div>';
+          html += '<div style="font-size:10px;color:var(--accent);margin-top:2px;font-family:monospace">\u{1F4C4} ' + comp.sourceFile + '</div>';
         }
 
         // Usage preview
@@ -525,7 +383,7 @@ export class PageMapGenerator {
             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>';
         }
@@ -534,7 +392,7 @@ export class PageMapGenerator {
       });
 
       html += '</div>';
-      showModal('⚛ React Components (' + railsReact.components.length + ')', html);
+      showModal('\u269B React Components (' + railsReact.components.length + ')', html);
     }
 
     function showReactComponentDetail(encodedData) {
@@ -544,7 +402,7 @@ export class PageMapGenerator {
 
       // Component Info
       html += '<div class="detail-section">';
-      html += '<div class="detail-label">⚛ Component Name</div>';
+      html += '<div class="detail-label">\u269B Component Name</div>';
       html += '<div style="display:flex;align-items:center;gap:8px">';
       html += '<span style="font-family:monospace;font-size:16px;font-weight:600">' + comp.name + '</span>';
       if (comp.ssr) {
@@ -557,7 +415,7 @@ export class PageMapGenerator {
       // Entry Point
       if (comp.entryFile) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">📥 Entry Point</div>';
+        html += '<div class="detail-label">\u{1F4E5} Entry Point</div>';
         html += '<div class="code-path">';
         html += comp.entryFile;
         html += '</div></div>';
@@ -566,7 +424,7 @@ export class PageMapGenerator {
       // Source File
       if (comp.sourceFile || comp.importPath) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">📄 Source File</div>';
+        html += '<div class="detail-label">\u{1F4C4} Source File</div>';
         html += '<div class="code-path" style="color:var(--accent)">';
         html += comp.sourceFile || comp.importPath;
         html += '</div></div>';
@@ -575,7 +433,7 @@ export class PageMapGenerator {
       // Usage in Views
       if (comp.usedIn && comp.usedIn.length > 0) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">📍 Used in Views (' + comp.usedIn.length + ')</div>';
+        html += '<div class="detail-label">\u{1F4CD} Used in Views (' + comp.usedIn.length + ')</div>';
         html += '<div class="detail-items">';
 
         comp.usedIn.forEach(usage => {
@@ -600,7 +458,7 @@ export class PageMapGenerator {
         html += '</div></div>';
       }
 
-      showModal('⚛ ' + comp.name, html, true);
+      showModal('\u269B ' + comp.name, html, true);
     }
 
     function showRailsGrpc() {
@@ -609,17 +467,17 @@ export class PageMapGenerator {
         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">🔌 ' + 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>';
@@ -628,7 +486,7 @@ export class PageMapGenerator {
       });
       html += '</div>';
 
-      showModal('🔌 gRPC Services (' + railsGrpc.services.length + ')', html);
+      showModal('\u{1F50C} gRPC Services (' + railsGrpc.services.length + ')', html);
     }
 
     // Render Rails routes in tree view
@@ -641,7 +499,7 @@ export class PageMapGenerator {
       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;
       }
 
@@ -674,7 +532,7 @@ export class PageMapGenerator {
           controllerInfo = railsControllers.find(c => {
             // Strategy 1: Match by filePath (most accurate)
             // filePath: "api/v1/users_controller.rb" or "users_controller.rb"
-            const filePathNormalized = c.filePath.replace(/_controller\.rb$/, '').replace(/_/g, '');
+            const filePathNormalized = c.filePath.replace(/_controller.rb$/, '').replace(/_/g, '');
             if (filePathNormalized === routeCtrl.replace(/_/g, '')) return true;
 
             // Strategy 2: Match by controller name (without namespace)
@@ -771,7 +629,7 @@ export class PageMapGenerator {
         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';
         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) ℹ️</div>';
+        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>';
       }
       html += '</div>';
@@ -782,8 +640,8 @@ export class PageMapGenerator {
 
         html += '<div class="group">';
         html += '<div class="group-header" onclick="toggleGroup(this)" style="border-left-color:' + color + '">';
-        html += '<span class="group-toggle">▼</span>';
-        html += '<span class="group-name">📂 ' + ns + '</span>';
+        html += '<span class="group-toggle">\u25BC</span>';
+        html += '<span class="group-name">\u{1F4C2} ' + ns + '</span>';
         html += '<span class="group-count">' + routes.length + '</span>';
         html += '</div>';
         const routeListId = 'routes-' + ns.replace(/[^a-zA-Z0-9]/g, '-');
@@ -803,12 +661,12 @@ export class PageMapGenerator {
           if (displayPath.includes('=>') || displayPath.includes('redirect')) {
             // Extract just the route pattern before any redirect logic
             const match = displayPath.match(/^([^"]+)"/);
-            displayPath = match ? match[1].trim() + ' → redirect' : displayPath.slice(0, 60) + '...';
+            displayPath = match ? match[1].trim() + ' \u2192 redirect' : displayPath.slice(0, 60) + '...';
           }
           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 = '';
@@ -817,7 +675,7 @@ export class PageMapGenerator {
           if (action) {
             if (action.rendersJson) indicators += '<span class="route-tag route-tag-json" title="Returns JSON">JSON</span>';
             if (action.rendersHtml && !action.rendersJson) indicators += '<span class="route-tag route-tag-html" title="Returns HTML">HTML</span>';
-            if (action.redirectsTo) indicators += '<span class="route-tag route-tag-redirect" title="Redirects">→</span>';
+            if (action.redirectsTo) indicators += '<span class="route-tag route-tag-redirect" title="Redirects">\u2192</span>';
           }
           if (route.hasView) indicators += '<span class="route-tag route-tag-view" title="Has View Template">View</span>';
           if (route.services.length > 0) indicators += '<span class="route-tag route-tag-svc" title="Uses Services: ' + route.services.join(', ') + '">Svc</span>';
@@ -838,7 +696,7 @@ export class PageMapGenerator {
 
           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>';
         });
@@ -846,7 +704,7 @@ export class PageMapGenerator {
         html += '</div>';
 
         if (hasMoreRoutes) {
-          html += '<div id="' + routeListId + '-more" style="padding:8px 12px;cursor:pointer;color:var(--accent);font-size:11px" onclick="toggleMoreItems(\\'' + routeListId + '\\', ' + routes.length + ')">▼ Show ' + (routes.length - routeLimit) + ' more routes</div>';
+          html += '<div id="' + routeListId + '-more" style="padding:8px 12px;cursor:pointer;color:var(--accent);font-size:11px" onclick="toggleMoreItems(\\'' + routeListId + '\\', ' + routes.length + ')">\u25BC Show ' + (routes.length - routeLimit) + ' more routes</div>';
         }
 
         html += '</div>';
@@ -924,7 +782,7 @@ export class PageMapGenerator {
 
       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">';
@@ -935,7 +793,7 @@ export class PageMapGenerator {
       // Response Type - NEW
       if (action) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">📡 Response Type</div>';
+        html += '<div class="detail-label">\u{1F4E1} Response Type</div>';
         html += '<div class="detail-value">';
         const responseTypes = [];
         if (action.rendersJson) responseTypes.push('<span style="background:#3b82f6;color:white;padding:2px 8px;border-radius:4px;font-size:11px;margin-right:4px">JSON</span>');
@@ -946,14 +804,14 @@ export class PageMapGenerator {
             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">↪️ 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-label">\u21AA\uFE0F Redirects To</div>';
+          html += '<div class="detail-value-block">' + action.redirectsTo + '</div>';
           html += '</div>';
         }
       }
@@ -961,10 +819,10 @@ export class PageMapGenerator {
       // View info
       if (route.hasView && route.view) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">📄 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-label">\u{1F4C4} View Template</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>';
@@ -975,8 +833,8 @@ export class PageMapGenerator {
       // Before/After Filters - NEW
       if (ctrl && (ctrl.beforeActions.length > 0 || ctrl.afterActions.length > 0)) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">🔒 Filters Applied to This Action</div>';
-        html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px">';
+        html += '<div class="detail-label">\u{1F512} Filters Applied to This Action</div>';
+        html += '<div class="code-block">';
 
         // Filter before_actions that apply to this action
         const applicableBeforeFilters = ctrl.beforeActions.filter(f => {
@@ -989,7 +847,7 @@ export class PageMapGenerator {
           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>';
@@ -1007,7 +865,7 @@ export class PageMapGenerator {
           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>';
@@ -1023,10 +881,10 @@ export class PageMapGenerator {
       const services = route.services && route.services.length > 0 ? route.services : (action?.servicesCalled || []);
       if (services.length > 0) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">⚙️ Services Called</div>';
+        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>';
       }
@@ -1034,10 +892,10 @@ export class PageMapGenerator {
       // gRPC Calls
       if (route.grpcCalls && route.grpcCalls.length > 0) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">🔌 gRPC Calls</div>';
+        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>';
       }
@@ -1046,10 +904,10 @@ export class PageMapGenerator {
       const models = route.modelAccess && route.modelAccess.length > 0 ? route.modelAccess : (action?.modelsCalled || []);
       if (models.length > 0) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">💾 Models Accessed</div>';
+        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>';
       }
@@ -1064,17 +922,17 @@ export class PageMapGenerator {
 
         if (meaningfulCalls.length > 0) {
           html += '<div class="detail-section">';
-          html += '<div class="detail-label">🔗 Method Calls in Action</div>';
+          html += '<div class="detail-label">\u{1F517} Method Calls in Action</div>';
           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>';
         }
@@ -1082,27 +940,27 @@ export class PageMapGenerator {
 
       // Source Files - NEW
       html += '<div class="detail-section">';
-      html += '<div class="detail-label">📁 Source Files</div>';
+      html += '<div class="detail-label">\u{1F4C1} Source Files</div>';
       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>';
       }
@@ -1111,13 +969,13 @@ export class PageMapGenerator {
       // Controller Info Summary
       if (ctrl) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">📋 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="detail-label">\u{1F4CB} Controller Info</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>';
@@ -1157,15 +1015,15 @@ export class PageMapGenerator {
       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 style="font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px"><span style="color:#61dafb">⚛</span> React Components (from Rails)</div>';
+      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>•</span>';
-      html += '<span style="color:#22c55e">' + ssrCount + ' SSR</span>';
-      html += '<span>•</span>';
+      html += '<span>\u2022</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>•</span>';
+      html += '<span>\u2022</span>';
       html += '<span style="color:#8b5cf6">' + withUsageCount + ' with usage</span>';
       html += '</div></div>';
 
@@ -1178,8 +1036,8 @@ export class PageMapGenerator {
       if (withEntry.length > 0) {
         html += '<div class="group" data-group="react-with-entry">';
         html += '<div class="group-header" onclick="toggleGroup(this)">';
-        html += '<span class="group-toggle">▼</span>';
-        html += '<span style="color:#61dafb;margin-right:4px">📥</span>';
+        html += '<span class="group-toggle">\u25BC</span>';
+        html += '<span style="color:#61dafb;margin-right:4px">\u{1F4E5}</span>';
         html += '<span class="group-name">With Entry Points (' + withEntry.length + ')</span>';
         html += '</div>';
         html += '<div class="group-items">';
@@ -1187,9 +1045,9 @@ export class PageMapGenerator {
         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 = '';
@@ -1204,14 +1062,14 @@ export class PageMapGenerator {
               urlInfo = '/' + usage.controller.replace(/_/g, '/') + '/' + usage.action;
             }
           } else if (comp.entryFile) {
-            // Infer URL from entry file name (e.g., tickets.tsx → /tickets)
+            // Infer URL from entry file name (e.g., tickets.tsx \u2192 /tickets)
             const fileName = comp.entryFile.split('/').pop().replace(/\\.(tsx?|jsx?)$/, '');
             urlInfo = '/' + fileName.replace(/_/g, '-');
           }
 
           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">⚛</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>';
@@ -1225,8 +1083,8 @@ export class PageMapGenerator {
       if (withoutEntry.length > 0) {
         html += '<div class="group" data-group="react-view-only">';
         html += '<div class="group-header" onclick="toggleGroup(this)">';
-        html += '<span class="group-toggle">▼</span>';
-        html += '<span style="color:#f59e0b;margin-right:4px">👁️</span>';
+        html += '<span class="group-toggle">\u25BC</span>';
+        html += '<span style="color:#f59e0b;margin-right:4px">\u{1F441}\uFE0F</span>';
         html += '<span class="group-name">View-only Components (' + withoutEntry.length + ')</span>';
         html += '</div>';
         html += '<div class="group-items">';
@@ -1234,8 +1092,8 @@ export class PageMapGenerator {
         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 = '';
@@ -1253,7 +1111,7 @@ export class PageMapGenerator {
 
           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">⚛</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>';
@@ -1302,7 +1160,7 @@ export class PageMapGenerator {
         const ctrlName = view.controller.split('/').pop().replace(/_/g, '');
         const ctrl = railsControllers?.find(c => {
           if (c.name === view.controller || c.name === ctrlName) return true;
-          const filePathNormalized = c.filePath.replace(/_controller\.rb$/, '').replace(/_/g, '');
+          const filePathNormalized = c.filePath.replace(/_controller.rb$/, '').replace(/_/g, '');
           return filePathNormalized === view.controller.replace(/_/g, '');
         });
         const action = ctrl?.actions?.find(a => a.name === view.action);
@@ -1363,15 +1221,15 @@ export class PageMapGenerator {
       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 style="font-weight:600;margin-bottom:8px">🖼️ Rails Screens (View Templates)</div>';
+      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>';
-      html += '<span>•</span>';
+      html += '<span>\u2022</span>';
       html += '<span>' + sortedControllers.length + ' sections</span>';
-      html += '<span>•</span>';
+      html += '<span>\u2022</span>';
       html += '<span style="color:#8b5cf6">' + totalWithServices + ' with services</span>';
-      html += '<span>•</span>';
+      html += '<span>\u2022</span>';
       html += '<span style="color:#06b6d4">' + totalWithPartials + ' with partials</span>';
       html += '</div></div>';
 
@@ -1385,8 +1243,8 @@ export class PageMapGenerator {
 
         html += '<div class="group">';
         html += '<div class="group-header" onclick="toggleGroup(this)" style="border-left-color:' + color + '">';
-        html += '<span class="group-toggle">▼</span>';
-        html += '<span class="group-name">📁 ' + ctrl + '</span>';
+        html += '<span class="group-toggle">\u25BC</span>';
+        html += '<span class="group-name">\u{1F4C1} ' + ctrl + '</span>';
         html += '<span class="group-count">' + controllerViews.length + ' screens</span>';
         html += '</div>';
         html += '<div class="group-items" id="' + screenListId + '">';
@@ -1400,17 +1258,17 @@ export class PageMapGenerator {
           indicators += '<span class="route-tag route-tag-template" title="' + view.template.toUpperCase() + ' template">' + view.template.toUpperCase() + '</span>';
           if (view.reactComponents && view.reactComponents.length > 0) {
             const rcNames = view.reactComponents.map(rc => rc.name).slice(0, 2).join(', ') + (view.reactComponents.length > 2 ? '...' : '');
-            indicators += '<span class="route-tag route-tag-react" title="React: ' + rcNames + '">⚛ ' + view.reactComponents.length + '</span>';
+            indicators += '<span class="route-tag route-tag-react" title="React: ' + rcNames + '">\u269B ' + view.reactComponents.length + '</span>';
           }
-          if (view.partials.length > 0) indicators += '<span class="route-tag route-tag-partials" title="Uses partials: ' + view.partials.slice(0,3).join(', ') + (view.partials.length > 3 ? '...' : '') + '">🧩 ' + view.partials.length + '</span>';
-          if (view.instanceVars.length > 0) indicators += '<span class="route-tag route-tag-vars" title="Instance vars: @' + view.instanceVars.slice(0,5).join(', @') + '">📦 ' + view.instanceVars.length + '</span>';
+          if (view.partials.length > 0) indicators += '<span class="route-tag route-tag-partials" title="Uses partials: ' + view.partials.slice(0,3).join(', ') + (view.partials.length > 3 ? '...' : '') + '">\u{1F9E9} ' + view.partials.length + '</span>';
+          if (view.instanceVars.length > 0) indicators += '<span class="route-tag route-tag-vars" title="Instance vars: @' + view.instanceVars.slice(0,5).join(', @') + '">\u{1F4E6} ' + view.instanceVars.length + '</span>';
           if (view.services.length > 0) indicators += '<span class="route-tag route-tag-svc" title="Services: ' + view.services.join(', ') + '">Svc</span>';
           if (view.grpcCalls.length > 0) indicators += '<span class="route-tag route-tag-grpc" title="gRPC: ' + view.grpcCalls.join(', ') + '">gRPC</span>';
           if (view.modelAccess.length > 0) indicators += '<span class="route-tag route-tag-db" title="Models: ' + view.modelAccess.join(', ') + '">DB</span>';
-          if (!view.hasRoute) indicators += '<span class="route-tag route-tag-warn" title="No matching route found">⚠️</span>';
+          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();
@@ -1428,7 +1286,7 @@ export class PageMapGenerator {
 
         if (hasMoreScreens) {
           html += '<div id="' + screenListId + '-more" style="padding:8px 12px;cursor:pointer;color:var(--accent);font-size:11px" onclick="toggleMoreItems(\\'' + screenListId + '\\', ' + controllerViews.length + ')">';
-          html += '▼ Show ' + (controllerViews.length - screenLimit) + ' more screens';
+          html += '\u25BC Show ' + (controllerViews.length - screenLimit) + ' more screens';
           html += '</div>';
         }
 
@@ -1446,9 +1304,9 @@ export class PageMapGenerator {
 
       // URL/Route info
       html += '<div class="detail-section">';
-      html += '<div class="detail-label">🌐 URL Path</div>';
+      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>';
       }
@@ -1456,7 +1314,7 @@ export class PageMapGenerator {
 
       // View Template info
       html += '<div class="detail-section">';
-      html += '<div class="detail-label">📄 View Template</div>';
+      html += '<div class="detail-label">\u{1F4C4} View Template</div>';
       html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px;font-family:monospace;font-size:12px">';
       html += '<div style="color:var(--accent)">app/views/' + screen.viewPath + '</div>';
       html += '<div style="margin-top:6px;display:flex;gap:8px">';
@@ -1466,7 +1324,7 @@ export class PageMapGenerator {
       // Instance Variables (data passed to view) with type info
       if (screen.instanceVars && screen.instanceVars.length > 0) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">📦 Data Available in View (@variables)</div>';
+        html += '<div class="detail-label">\u{1F4E6} Data Available in View (@variables)</div>';
 
         // Build assignment map from controller analysis
         const assignmentMap = {};
@@ -1487,16 +1345,16 @@ export class PageMapGenerator {
 
         // Function to find matching model for a variable name
         function findModelForVar(varName) {
-          // Direct match: @company → Company
+          // Direct match: @company \u2192 Company
           const pascalCase = varName.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('');
           if (modelNames.has(pascalCase)) return { model: pascalCase, confidence: 'exact' };
 
-          // Singular form: @companies → Company
+          // Singular form: @companies \u2192 Company
           const singular = varName.replace(/ies$/, 'y').replace(/s$/, '');
           const singularPascal = singular.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('');
           if (modelNames.has(singularPascal)) return { model: singularPascal, confidence: 'plural' };
 
-          // current_X pattern: @current_user → User
+          // current_X pattern: @current_user \u2192 User
           if (varName.startsWith('current_')) {
             const rest = varName.replace('current_', '');
             const restPascal = rest.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('');
@@ -1541,7 +1399,7 @@ export class PageMapGenerator {
 
           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) {
@@ -1571,7 +1429,7 @@ export class PageMapGenerator {
         // "Show more" button
         if (hasMore) {
           html += '<div id="' + listId + '-more" style="margin-top:8px;cursor:pointer;color:var(--accent);font-size:11px" onclick="toggleMoreItems(\\'' + listId + '\\', ' + screen.instanceVars.length + ')">';
-          html += '▼ Show ' + (screen.instanceVars.length - initialLimit) + ' more variables';
+          html += '\u25BC Show ' + (screen.instanceVars.length - initialLimit) + ' more variables';
           html += '</div>';
         }
 
@@ -1581,14 +1439,14 @@ export class PageMapGenerator {
       // React Components loaded in this view
       if (screen.reactComponents && screen.reactComponents.length > 0) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">⚛️ React Components</div>';
+        html += '<div class="detail-label">\u269B\uFE0F React Components</div>';
         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>';
@@ -1605,15 +1463,15 @@ export class PageMapGenerator {
         const partialListId = 'partials-' + Math.random().toString(36).substr(2, 9);
 
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">🧩 Partials Used (' + screen.partials.length + ')</div>';
+        html += '<div class="detail-label">\u{1F9E9} Partials Used (' + screen.partials.length + ')</div>';
         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) {
-          html += '<div id="' + partialListId + '-more" style="margin-top:6px;cursor:pointer;color:var(--accent);font-size:11px" onclick="toggleMoreItems(\\'' + partialListId + '\\', ' + screen.partials.length + ')">▼ Show ' + (screen.partials.length - partialLimit) + ' more</div>';
+          html += '<div id="' + partialListId + '-more" style="margin-top:6px;cursor:pointer;color:var(--accent);font-size:11px" onclick="toggleMoreItems(\\'' + partialListId + '\\', ' + screen.partials.length + ')">\u25BC Show ' + (screen.partials.length - partialLimit) + ' more</div>';
         }
         html += '</div>';
       }
@@ -1621,10 +1479,10 @@ export class PageMapGenerator {
       // Services Called
       if (screen.services && screen.services.length > 0) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">⚙️ Services Called</div>';
+        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>';
       }
@@ -1632,10 +1490,10 @@ export class PageMapGenerator {
       // gRPC Calls
       if (screen.grpcCalls && screen.grpcCalls.length > 0) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">🔌 gRPC Calls</div>';
+        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>';
       }
@@ -1643,21 +1501,21 @@ export class PageMapGenerator {
       // Model Access
       if (screen.modelAccess && screen.modelAccess.length > 0) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">💾 Models Used</div>';
+        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>';
       }
 
       // Controller Action info
       html += '<div class="detail-section">';
-      html += '<div class="detail-label">🎮 Controller Action</div>';
-      html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px">';
+      html += '<div class="detail-label">\u{1F3AE} Controller Action</div>';
+      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>';
 
@@ -1670,7 +1528,7 @@ export class PageMapGenerator {
           });
           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>';
           }
         }
@@ -1686,7 +1544,7 @@ export class PageMapGenerator {
 
         if (meaningfulCalls.length > 0) {
           html += '<div class="detail-section">';
-          html += '<div class="detail-label">🔗 Method Calls</div>';
+          html += '<div class="detail-label">\u{1F517} Method Calls</div>';
           html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px;font-family:monospace;font-size:11px;max-height:120px;overflow-y:auto">';
           meaningfulCalls.forEach((call, i) => {
             html += '<div style="padding:2px 0;color:var(--accent)">' + (i+1) + '. ' + call + '</div>';
@@ -1695,7 +1553,7 @@ export class PageMapGenerator {
         }
       }
 
-      showModal('🖼️ ' + screen.controller + '/' + screen.action, html);
+      showModal('\u{1F5BC}\uFE0F ' + screen.controller + '/' + screen.action, html);
     }
 
     // Show Rails page detail with API info
@@ -1711,7 +1569,7 @@ export class PageMapGenerator {
         const routeCtrlName = routeCtrlParts.pop().replace(/_/g, '');
 
         controllerInfo = railsControllers.find(c => {
-          const filePathNormalized = c.filePath.replace(/_controller\.rb$/, '').replace(/_/g, '');
+          const filePathNormalized = c.filePath.replace(/_controller.rb$/, '').replace(/_/g, '');
           if (filePathNormalized === routeCtrl.replace(/_/g, '')) return true;
           if (c.name === routeCtrlName || c.name.replace(/_/g, '') === routeCtrlName) return true;
           const className = c.className.toLowerCase().replace('controller', '').replace(/::/g, '/');
@@ -1735,7 +1593,7 @@ export class PageMapGenerator {
       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">';
@@ -1746,7 +1604,7 @@ export class PageMapGenerator {
       // Response Type
       if (actionDetails) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">📡 Response Type</div>';
+        html += '<div class="detail-label">\u{1F4E1} Response Type</div>';
         html += '<div class="detail-value">';
         const responseTypes = [];
         if (actionDetails.rendersJson) responseTypes.push('<span style="background:#3b82f6;color:white;padding:2px 8px;border-radius:4px;font-size:11px;margin-right:4px">JSON</span>');
@@ -1757,12 +1615,12 @@ export class PageMapGenerator {
             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) {
           html += '<div class="detail-section">';
-          html += '<div class="detail-label">↪️ Redirects To</div>';
+          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">' + actionDetails.redirectsTo + '</div>';
           html += '</div>';
         }
@@ -1772,10 +1630,10 @@ export class PageMapGenerator {
       const view = pageInfo?.view || route.view;
       if (view) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">📄 View Template</div>';
+        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>';
@@ -1786,8 +1644,8 @@ export class PageMapGenerator {
       // Before/After Filters
       if (controllerInfo && (controllerInfo.beforeActions.length > 0 || controllerInfo.afterActions.length > 0)) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">🔒 Filters Applied</div>';
-        html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px">';
+        html += '<div class="detail-label">\u{1F512} Filters Applied</div>';
+        html += '<div class="code-block">';
 
         const applicableBeforeFilters = controllerInfo.beforeActions.filter(f => {
           if (f.only && f.only.length > 0) return f.only.includes(route.action);
@@ -1799,7 +1657,7 @@ export class PageMapGenerator {
           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>';
@@ -1827,10 +1685,10 @@ export class PageMapGenerator {
       const services = pageInfo?.services || actionDetails?.servicesCalled || [];
       if (services.length > 0) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">⚙️ Services Called</div>';
+        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>';
       }
@@ -1839,10 +1697,10 @@ export class PageMapGenerator {
       const grpcCalls = pageInfo?.grpcCalls || [];
       if (grpcCalls.length > 0) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">🔌 gRPC Calls</div>';
+        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>';
       }
@@ -1851,10 +1709,10 @@ export class PageMapGenerator {
       const models = pageInfo?.modelAccess || actionDetails?.modelsCalled || [];
       if (models.length > 0) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">💾 Models Accessed</div>';
+        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>';
       }
@@ -1868,17 +1726,17 @@ export class PageMapGenerator {
 
         if (meaningfulCalls.length > 0) {
           html += '<div class="detail-section">';
-          html += '<div class="detail-label">🔗 Method Calls in Action</div>';
+          html += '<div class="detail-label">\u{1F517} Method Calls in Action</div>';
           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>';
         }
@@ -1886,20 +1744,20 @@ export class PageMapGenerator {
 
       // Source Files
       html += '<div class="detail-section">';
-      html += '<div class="detail-label">📁 Source Files</div>';
+      html += '<div class="detail-label">\u{1F4C1} Source Files</div>';
       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>';
       }
@@ -1908,13 +1766,13 @@ export class PageMapGenerator {
       // Controller Info
       if (controllerInfo) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">📋 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="detail-label">\u{1F4CB} Controller Info</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>';
@@ -1922,7 +1780,7 @@ export class PageMapGenerator {
 
       if (!pageInfo && !actionDetails) {
         html += '<div style="padding:12px;color:var(--text2);font-size:12px;background:var(--bg3);border-radius:6px;margin-top:8px">';
-        html += '⚠️ No detailed action information found. The controller or action may not be analyzed yet.';
+        html += '\u26A0\uFE0F No detailed action information found. The controller or action may not be analyzed yet.';
         html += '</div>';
       }
 
@@ -1953,7 +1811,7 @@ export class PageMapGenerator {
         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>';
       }
@@ -1963,7 +1821,7 @@ export class PageMapGenerator {
         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>';
@@ -1971,7 +1829,7 @@ export class PageMapGenerator {
         html += '</div></div>';
       }
 
-      showModal('📄 ' + view.controller + '/' + view.action, html);
+      showModal('\u{1F4C4} ' + view.controller + '/' + view.action, html);
     }
 
     function toggleGroup(el) {
@@ -1991,14 +1849,14 @@ export class PageMapGenerator {
         hiddenItems.forEach(item => {
           item.style.display = 'none';
         });
-        moreBtn.innerHTML = '▼ Show ' + hiddenItems.length + ' more variables';
+        moreBtn.innerHTML = '\u25BC Show ' + hiddenItems.length + ' more variables';
         moreBtn.setAttribute('data-expanded', 'false');
       } else {
         // Expand: show all items
         hiddenItems.forEach(item => {
           item.style.display = '';
         });
-        moreBtn.innerHTML = '▲ Show less';
+        moreBtn.innerHTML = '\u25B2 Show less';
         moreBtn.setAttribute('data-expanded', 'true');
       }
     }
@@ -2077,11 +1935,11 @@ export class PageMapGenerator {
         // Parse operations to extract path info and depth
         const parsedOps = graphqlOps.map(df => {
           const rawName = df.operationName || '';
-          // Pattern: "→ QueryName (via HookA)" or "→ → QueryName (via HookA)" etc.
-          const arrowCount = (rawName.match(/→/g) || []).length;
+          // Pattern: "\u2192 QueryName (via HookA)" or "\u2192 \u2192 QueryName (via HookA)" etc.
+          const arrowCount = (rawName.match(/\u2192/g) || []).length;
 
           // Extract query name and path
-          let queryName = rawName.replace(/^[→\\s]+/, '').replace(/^\\u2192\\s*/g, '');
+          let queryName = rawName.replace(/^[\u2192\\s]+/, '').replace(/^\\u2192\\s*/g, '');
           let sourcePath = '';
 
           // Extract "(via X)" for hook
@@ -2099,7 +1957,7 @@ export class PageMapGenerator {
           }
 
           // Further clean the query name
-          queryName = queryName.replace(/^[→\\s]+/, '').trim();
+          queryName = queryName.replace(/^[\u2192\\s]+/, '').trim();
 
           return {
             ...df,
@@ -2162,13 +2020,13 @@ export class PageMapGenerator {
 
           sortedPaths.forEach(pathName => {
             const ops = groupedByPath.get(pathName);
-            const depthIndicator = pathName === 'Direct' ? '' : '↳ ';
+            const depthIndicator = pathName === 'Direct' ? '' : '\u21B3 ';
             const pathLabel = pathName === 'Direct' ? 'Direct (this page)' : pathName;
 
             // 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 => {
@@ -2189,7 +2047,7 @@ export class PageMapGenerator {
           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>';
         }
@@ -2214,7 +2072,7 @@ export class PageMapGenerator {
           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>';
         });
@@ -2360,8 +2218,8 @@ export class PageMapGenerator {
         const groupPages = groups[g];
         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">▸</span>/'+g+'</div>';
-        html += '<span style="color:var(--accent)">'+groupPages.length+' pages</span></div>';
+        html += '<div class="detail-label" style="display:flex;align-items:center;gap:6px"><span class="group-toggle">\u25B8</span>/'+g+'</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;
@@ -2369,7 +2227,7 @@ export class PageMapGenerator {
           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>';
@@ -2386,10 +2244,10 @@ export class PageMapGenerator {
       const toggle = el.querySelector('.group-toggle');
       if (list.style.display === 'none') {
         list.style.display = 'block';
-        toggle.textContent = '▾';
+        toggle.textContent = '\u25BE';
       } else {
         list.style.display = 'none';
-        toggle.textContent = '▸';
+        toggle.textContent = '\u25B8';
       }
     };
 
@@ -2434,7 +2292,7 @@ export class PageMapGenerator {
       const indent = depth * 12;
       let html = '<div class="rel-item" style="padding-left:'+(10+indent)+'px" onclick="event.stopPropagation(); selectPage(\\''+page.path+'\\')">';
       html += '<div class="rel-header">';
-      html += '<span style="color:var(--text2);font-size:10px">'+'─'.repeat(depth > 0 ? 1 : 0)+(depth > 0 ? ' ' : '')+'</span>';
+      html += '<span style="color:var(--text2);font-size:10px">'+'\u2500'.repeat(depth > 0 ? 1 : 0)+(depth > 0 ? ' ' : '')+'</span>';
       html += '<span class="rel-path">'+page.path+'</span>';
       if (page.children && page.children.length > 0) {
         html += '<span style="color:var(--text2);font-size:9px;margin-left:auto">'+page.children.length+' children</span>';
@@ -2482,7 +2340,7 @@ export class PageMapGenerator {
       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>';
@@ -2493,7 +2351,7 @@ export class PageMapGenerator {
       }
 
       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>';
@@ -2504,10 +2362,10 @@ export class PageMapGenerator {
       }
 
       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>';
@@ -2532,7 +2390,7 @@ export class PageMapGenerator {
           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>';
         });
@@ -2567,7 +2425,7 @@ export class PageMapGenerator {
 
       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
@@ -2616,12 +2474,12 @@ export class PageMapGenerator {
     };
 
     function showDataDetail(rawName, sourcePath) {
-      // Clean up name: remove "→ " prefix and " (ComponentName)" suffix
+      // Clean up name: remove "\u2192 " prefix and " (ComponentName)" suffix
       const name = rawName
-        .replace(/^[→\\->\\s]+/, '')
+        .replace(/^[\u2192\\->\\s]+/, '')
         .replace(/\\s*\\([^)]+\\)\\s*$/, '');
 
-      // Convert SCREAMING_CASE to PascalCase (e.g., COMPANY_QUERY → CompanyQuery)
+      // Convert SCREAMING_CASE to PascalCase (e.g., COMPANY_QUERY \u2192 CompanyQuery)
       const toPascalCase = (str) => {
         if (!/^[A-Z][A-Z0-9_]*$/.test(str)) return str;
         return str.toLowerCase().split('_').map(word =>
@@ -2674,11 +2532,11 @@ export class PageMapGenerator {
         // 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
-        html += '<div class="detail-section"><h4 style="display:flex;justify-content:space-between;align-items:center">Operation Name<button class="copy-btn" onclick="copyToClipboard(\\''+op.name+'\\', this)" title="Copy operation name">📋</button></h4>';
+        html += '<div class="detail-section"><h4 style="display:flex;justify-content:space-between;align-items:center">Operation Name<button class="copy-btn" onclick="copyToClipboard(\\''+op.name+'\\', this)" title="Copy operation name">\u{1F4CB}</button></h4>';
         html += '<code style="background:#0f172a;color:#93c5fd;padding:4px 8px;border-radius:4px;font-family:monospace">'+op.name+'</code></div>';
 
         if (op.returnType) {
@@ -2697,7 +2555,7 @@ export class PageMapGenerator {
           // Escape for data attribute
           const gqlCodeEscaped = gqlCode.replace(/'/g, "\\\\'").replace(/"/g, '&quot;');
 
-          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">📋</button></h4>';
+          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>';
         } else if (op.variables?.length) {
           html += '<div class="detail-section"><h4>Variables</h4>';
@@ -2709,7 +2567,7 @@ export class PageMapGenerator {
           op.usedIn.slice(0,8).forEach(f => { html += '<div class="detail-item">'+f+'</div>'; });
           if (op.usedIn.length > 8) {
             const remaining = op.usedIn.slice(8);
-            html += '<div class="expand-more" onclick="expandMore(\\'usedIn\\', '+JSON.stringify(remaining).replace(/"/g, '&quot;')+', this)" style="color:var(--accent);font-size:11px;cursor:pointer;padding:4px 0">▸ Show '+(op.usedIn.length-8)+' more files</div>';
+            html += '<div class="expand-more" onclick="expandMore(\\'usedIn\\', '+JSON.stringify(remaining).replace(/"/g, '&quot;')+', this)" style="color:var(--accent);font-size:11px;cursor:pointer;padding:4px 0">\u25B8 Show '+(op.usedIn.length-8)+' more files</div>';
           }
           html += '</div>';
         }
@@ -2752,7 +2610,7 @@ export class PageMapGenerator {
             });
             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">▸ 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>';
             }
           }
 
@@ -2764,7 +2622,7 @@ export class PageMapGenerator {
             });
             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">▸ 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>';
             }
           }
 
@@ -2772,11 +2630,11 @@ export class PageMapGenerator {
             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">▸ 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>';
             }
           }
 
@@ -2799,9 +2657,9 @@ export class PageMapGenerator {
           html += '</div>';
         }
       } else {
-        // Clean up the name: remove "→ " prefix and " (ComponentName)" suffix
+        // Clean up the name: remove "\u2192 " prefix and " (ComponentName)" suffix
         let cleanName = name
-          .replace(/^[→\\->\\s]+/, '')  // Remove arrow prefix
+          .replace(/^[\u2192\\->\\s]+/, '')  // Remove arrow prefix
           .replace(/\\s*\\([^)]+\\)\\s*$/, '');  // Remove parenthetical component reference
 
         // Extract the core component name - remove ALL common suffixes iteratively
@@ -2892,7 +2750,7 @@ export class PageMapGenerator {
             });
             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">▸ 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>';
             }
           }
 
@@ -2904,7 +2762,7 @@ export class PageMapGenerator {
             });
             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">▸ 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>';
             }
           }
 
@@ -2912,11 +2770,11 @@ export class PageMapGenerator {
             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">▸ 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>';
             }
           }
 
@@ -2973,7 +2831,7 @@ export class PageMapGenerator {
     window.copyToClipboard = function(text, btn) {
       navigator.clipboard.writeText(text).then(() => {
         const originalText = btn.textContent;
-        btn.textContent = '✓';
+        btn.textContent = '\u2713';
         btn.classList.add('copied');
         setTimeout(() => {
           btn.textContent = originalText;
@@ -3459,104 +3317,21 @@ export class PageMapGenerator {
     }
   </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));
-            // Build depth map based on actual parent-child relationships
-            const pathSet = new Set(sorted.map((p) => p.path));
-            const depthMap = new Map();
-            // Calculate depth for each page based on closest existing ancestor
-            for (const p of sorted) {
-                const segments = p.path.split('/').filter(Boolean);
-                let depth = 0;
-                // Find closest existing ancestor
-                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 || '';
-                // Only show repo tag if there are multiple repositories
-                const showRepoTag = allPages.some((pg) => pg.repo && pg.repo !== repoName);
-                // Create short name: take last part or abbreviate long names
-                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>`
-                    : '';
-                // Detect SPA component pages (PascalCase path or in components/pages)
-                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}">
-            <span class="group-arrow">▼</span>
-            <span class="group-name">/${name}</span>
-            <span class="group-count">${pages.length}</span>
+            </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">/${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' };
-    }
-}
+          <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};