@wtdlee/repomap 0.3.0 → 0.3.1

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

@@ -1,142 +1,128 @@
-/**
- * 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,
+// src/generators/page-map-generator.ts
+var PageMapGenerator = class {
+  graphqlOps = [];
+  apiCalls = [];
+  components = [];
+  generatePageMapHtml(report, options) {
+    const allPages = [];
+    const envResult = options?.envResult;
+    const railsAnalysis = options?.railsAnalysis;
+    const activeTab = options?.activeTab || "pages";
+    const repoName = report.repositories[0]?.displayName || report.repositories[0]?.name || "Repository";
+    for (const repoResult of report.repositories) {
+      this.graphqlOps.push(...repoResult.analysis?.graphqlOperations || []);
+      this.apiCalls.push(...repoResult.analysis?.apiCalls || []);
+      const comps = repoResult.analysis?.components || [];
+      for (const comp of comps) {
+        this.components.push({
+          name: comp.name,
+          filePath: comp.filePath,
+          type: comp.type,
+          dependencies: comp.dependencies || []
+        });
+      }
+    }
+    for (const repoResult of report.repositories) {
+      const pages = repoResult.analysis?.pages || [];
+      for (const page of pages) {
+        allPages.push({
+          ...page,
+          repo: repoResult.name,
+          children: [],
+          parent: null,
+          depth: 0
         });
+      }
     }
-    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, relations } = this.buildHierarchy(allPages);
+    return this.renderPageMapHtml(allPages, rootPages, relations, repoName, {
+      envResult,
+      railsAnalysis,
+      activeTab
+    });
+  }
+  buildHierarchy(pages) {
+    const pathMap = /* @__PURE__ */ new Map();
+    const relations = [];
+    for (const page of pages) {
+      pathMap.set(page.path, page);
+    }
+    for (const page of pages) {
+      const segments = page.path.split("/").filter(Boolean);
+      for (let i = segments.length - 1; i >= 1; i--) {
+        const parentPath = "/" + segments.slice(0, i).join("/");
+        const parent = pathMap.get(parentPath);
+        if (parent) {
+          page.parent = parentPath;
+          page.depth = parent.depth + 1;
+          if (!parent.children.includes(page.path)) {
+            parent.children.push(page.path);
+          }
+          relations.push({
+            from: parentPath,
+            to: page.path,
+            type: "parent-child",
+            description: `Sub-page of ${parentPath}`
+          });
+          break;
+        }
+      }
+      if (!page.parent) {
+        page.depth = Math.max(0, segments.length - 1);
+      }
+      if (page.layout) {
+        for (const other of pages) {
+          if (other.path !== page.path && other.layout === page.layout) {
+            const existing = relations.find(
+              (r) => r.type === "same-layout" && (r.from === page.path && r.to === other.path || r.from === other.path && r.to === page.path)
+            );
+            if (!existing) {
+              relations.push({
+                from: page.path,
+                to: other.path,
+                type: "same-layout",
+                description: `Both use ${page.layout}`
+              });
             }
+          }
         }
-        const rootPages = pages.filter((p) => !p.parent).sort((a, b) => a.path.localeCompare(b.path));
-        return { rootPages, relations };
+      }
+    }
+    const rootPages = pages.filter((p) => !p.parent).sort((a, b) => a.path.localeCompare(b.path));
+    return { rootPages, relations };
+  }
+  renderPageMapHtml(allPages, rootPages, relations, repoName, options) {
+    const envResult = options?.envResult;
+    const railsAnalysis = options?.railsAnalysis;
+    const activeTab = options?.activeTab || "pages";
+    const graphqlOpsJson = JSON.stringify(
+      this.graphqlOps.map((op) => ({
+        name: op.name,
+        type: op.type,
+        variables: op.variables,
+        fields: op.fields,
+        returnType: op.returnType,
+        usedIn: op.usedIn
+      }))
+    );
+    const componentsJson = JSON.stringify(this.components);
+    const railsRoutesJson = railsAnalysis ? JSON.stringify(railsAnalysis.routes.routes) : "[]";
+    const railsControllersJson = railsAnalysis ? JSON.stringify(railsAnalysis.controllers.controllers) : "[]";
+    const railsModelsJson = railsAnalysis ? JSON.stringify(railsAnalysis.models.models) : "[]";
+    const railsViewsJson = railsAnalysis ? JSON.stringify(railsAnalysis.views) : '{ "views": [], "pages": [], "summary": {} }';
+    const railsReactJson = railsAnalysis ? JSON.stringify(railsAnalysis.react) : '{ "components": [], "entryPoints": [], "summary": {} }';
+    const railsGrpcJson = railsAnalysis ? JSON.stringify(railsAnalysis.grpc) : '{ "services": [] }';
+    const railsSummaryJson = railsAnalysis ? JSON.stringify(railsAnalysis.summary) : "null";
+    const hasRails = envResult?.hasRails || false;
+    const hasNextjs = envResult?.hasNextjs || false;
+    const hasReact = envResult?.hasReact || false;
+    const groups = /* @__PURE__ */ new Map();
+    for (const page of allPages) {
+      const seg = page.path.split("/").filter(Boolean)[0] || "root";
+      if (!groups.has(seg)) groups.set(seg, []);
+      groups.get(seg)?.push(page);
     }
-    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>
+    return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -147,23 +133,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} ${repoName}</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 ${activeTab === "pages" ? "active" : ""}">Page Map</a>
+        ${hasRails ? `<a href="/rails-map" class="nav-link ${activeTab === "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">
+      ${hasRails && hasNextjs ? `<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>
@@ -199,13 +183,12 @@ export class PageMapGenerator {
       <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="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="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
-            ? `
+      ${hasRails && railsAnalysis ? `
       <!-- 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">
@@ -213,25 +196,24 @@ export class PageMapGenerator {
         <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-react" onclick="showReactComponents(); this.blur();"><div class="stat-val">${railsAnalysis.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 ${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>
-        <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="${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>
       </div>
 
       <!-- Rails Routes View (dedicated) -->
-      <div class="tree-view ${activeTab === 'rails' ? 'active' : ''}" id="rails-tree-view" data-tab="rails">
+      <div class="tree-view ${activeTab === "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>'}
         </div>
@@ -254,7 +236,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 +245,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>
@@ -398,7 +380,7 @@ export class PageMapGenerator {
       let html = '<div style="max-height: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>';
         routes.slice(0, 20).forEach(r => {
@@ -416,7 +398,7 @@ export class PageMapGenerator {
       }
       html += '</div>';
 
-      showModal('🛤️ Rails Routes (' + railsRoutes.length + ')', html);
+      showModal('\u{1F6E4}\uFE0F Rails Routes (' + railsRoutes.length + ')', html);
     }
 
     function showRailsControllers() {
@@ -443,7 +425,7 @@ export class PageMapGenerator {
       });
       html += '</div>';
 
-      showModal('🎮 Rails Controllers (' + railsControllers.length + ')', html);
+      showModal('\u{1F3AE} Rails Controllers (' + railsControllers.length + ')', html);
     }
 
     function showRailsModels() {
@@ -455,10 +437,10 @@ export class PageMapGenerator {
       let html = '<div style="max-height: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="font-weight:600;margin-bottom:4px">\u{1F4E6} ' + model.className + '</div>';
         html += '<div style="display:flex;gap:16px;font-size:11px;color:var(--text2);margin-bottom:8px">';
-        html += '<span>📎 ' + (model.associations?.length || 0) + ' associations</span>';
-        html += '<span>✓ ' + (model.validations?.length || 0) + ' validations</span>';
+        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">';
@@ -473,7 +455,7 @@ export class PageMapGenerator {
       });
       html += '</div>';
 
-      showModal('📦 Rails Models (' + railsModels.length + ')', html);
+      showModal('\u{1F4E6} Rails Models (' + railsModels.length + ')', html);
     }
 
     function showReactComponents() {
@@ -503,18 +485,18 @@ export class PageMapGenerator {
 
         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 += '<div style="font-weight:600;display:flex;align-items:center"><span style="color:#61dafb;margin-right:6px">\u269B</span>' + comp.name + ssrBadge + '</div>';
         html += '<span style="font-size:11px;color:var(--text2)">' + usageCount + ' usage' + (usageCount !== 1 ? 's' : '') + '</span>';
         html += '</div>';
 
         // 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
@@ -534,7 +516,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 +526,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 +539,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 +548,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 +557,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 +582,7 @@ export class PageMapGenerator {
         html += '</div></div>';
       }
 
-      showModal('⚛ ' + comp.name, html, true);
+      showModal('\u269B ' + comp.name, html, true);
     }
 
     function showRailsGrpc() {
@@ -612,7 +594,7 @@ export class PageMapGenerator {
       let html = '<div style="max-height: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 style="font-weight:600;margin-bottom:4px">\u{1F50C} ' + svc.className + '</div>';
         if (svc.namespace) {
           html += '<div style="font-size:11px;color:var(--text2);margin-bottom:8px">namespace: ' + svc.namespace + '</div>';
         }
@@ -628,7 +610,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
@@ -674,7 +656,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 +753,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 +764,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,7 +785,7 @@ 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) + '...';
@@ -817,7 +799,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>';
@@ -846,7 +828,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>';
@@ -935,7 +917,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>');
@@ -952,7 +934,7 @@ export class PageMapGenerator {
         // Redirect destination if exists
         if (action.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">' + action.redirectsTo + '</div>';
           html += '</div>';
         }
@@ -961,7 +943,7 @@ 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-label">\u{1F4C4} View Template</div>';
         html += '<div class="detail-value" style="font-family:monospace;font-size:12px">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>';
@@ -975,7 +957,7 @@ 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 class="detail-label">\u{1F512} Filters Applied to This Action</div>';
         html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px">';
 
         // Filter before_actions that apply to this action
@@ -1023,7 +1005,7 @@ 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>';
@@ -1034,7 +1016,7 @@ 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>';
@@ -1046,7 +1028,7 @@ 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>';
@@ -1064,7 +1046,7 @@ 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) => {
@@ -1082,7 +1064,7 @@ 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) {
@@ -1111,7 +1093,7 @@ export class PageMapGenerator {
       // Controller Info Summary
       if (ctrl) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">📋 Controller Info</div>';
+        html += '<div class="detail-label">\u{1F4CB} Controller Info</div>';
         html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px">';
         html += '<div style="font-weight:600;margin-bottom:4px">' + ctrl.className + '</div>';
         html += '<div style="font-size:11px;color:var(--text2)">extends ' + ctrl.parentClass + '</div>';
@@ -1158,14 +1140,14 @@ export class PageMapGenerator {
 
       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 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>\u2022</span>';
       html += '<span style="color:#22c55e">' + ssrCount + ' SSR</span>';
-      html += '<span>•</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 +1160,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">';
@@ -1204,14 +1186,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 style="color:#61dafb;margin-right:6px">\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 +1207,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">';
@@ -1253,7 +1235,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 style="color:#61dafb;margin-right:6px">\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 +1284,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);
@@ -1364,14 +1346,14 @@ export class PageMapGenerator {
 
       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 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 +1367,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,14 +1382,14 @@ 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;
@@ -1428,7 +1410,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,7 +1428,7 @@ 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>';
       } else {
@@ -1456,7 +1438,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 +1448,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 +1469,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('');
@@ -1571,7 +1553,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,7 +1563,7 @@ 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">';
@@ -1605,7 +1587,7 @@ 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"' : '';
@@ -1613,7 +1595,7 @@ export class PageMapGenerator {
         });
         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,7 +1603,7 @@ 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>';
@@ -1632,7 +1614,7 @@ 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>';
@@ -1643,7 +1625,7 @@ 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>';
@@ -1653,7 +1635,7 @@ export class PageMapGenerator {
 
       // Controller Action info
       html += '<div class="detail-section">';
-      html += '<div class="detail-label">🎮 Controller Action</div>';
+      html += '<div class="detail-label">\u{1F3AE} Controller Action</div>';
       html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px">';
       html += '<div style="font-family:monospace;font-size:12px">' + screen.controller + '#' + screen.action + '</div>';
       if (screen.controllerInfo) {
@@ -1686,7 +1668,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 +1677,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 +1693,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, '/');
@@ -1746,7 +1728,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>');
@@ -1762,7 +1744,7 @@ export class PageMapGenerator {
 
         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,7 +1754,7 @@ 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>';
@@ -1786,7 +1768,7 @@ 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 class="detail-label">\u{1F512} Filters Applied</div>';
         html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px">';
 
         const applicableBeforeFilters = controllerInfo.beforeActions.filter(f => {
@@ -1827,7 +1809,7 @@ 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>';
@@ -1839,7 +1821,7 @@ 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>';
@@ -1851,7 +1833,7 @@ 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>';
@@ -1868,7 +1850,7 @@ 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) => {
@@ -1886,7 +1868,7 @@ 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) {
@@ -1908,7 +1890,7 @@ export class PageMapGenerator {
       // Controller Info
       if (controllerInfo) {
         html += '<div class="detail-section">';
-        html += '<div class="detail-label">📋 Controller Info</div>';
+        html += '<div class="detail-label">\u{1F4CB} Controller Info</div>';
         html += '<div style="background:var(--bg3);padding:10px;border-radius:6px;margin-top:6px">';
         html += '<div style="font-weight:600;margin-bottom:4px">' + controllerInfo.className + '</div>';
         html += '<div style="font-size:11px;color:var(--text2)">extends ' + controllerInfo.parentClass + '</div>';
@@ -1922,7 +1904,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>';
       }
 
@@ -1971,7 +1953,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 +1973,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 +2059,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 +2081,7 @@ export class PageMapGenerator {
           }
 
           // Further clean the query name
-          queryName = queryName.replace(/^[→\\s]+/, '').trim();
+          queryName = queryName.replace(/^[\u2192\\s]+/, '').trim();
 
           return {
             ...df,
@@ -2162,7 +2144,7 @@ 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
@@ -2360,7 +2342,7 @@ 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 += '<div class="detail-label" style="display:flex;align-items:center;gap:6px"><span class="group-toggle">\u25B8</span>/'+g+'</div>';
         html += '<span style="color:var(--accent)">'+groupPages.length+' pages</span></div>';
         html += '<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 => {
@@ -2386,10 +2368,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 +2416,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>';
@@ -2616,12 +2598,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 =>
@@ -2678,7 +2660,7 @@ export class PageMapGenerator {
         }
 
         // 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 +2679,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 +2691,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 +2734,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)" style="color:var(--accent);font-size:10px;cursor:pointer;padding:4px 0">\u25B8 Show ' + (queries.length - 5) + ' more queries</div>';
             }
           }
 
@@ -2764,7 +2746,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)" style="color:var(--accent);font-size:10px;cursor:pointer;padding:4px 0">\u25B8 Show ' + (mutations.length - 5) + ' more mutations</div>';
             }
           }
 
@@ -2776,7 +2758,7 @@ export class PageMapGenerator {
             });
             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)" style="color:var(--accent);font-size:10px;cursor:pointer;padding:4px 0">\u25B8 Show ' + (fragments.length - 3) + ' more fragments</div>';
             }
           }
 
@@ -2799,9 +2781,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 +2874,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)" style="color:var(--accent);font-size:10px;cursor:pointer;padding:4px 0">\u25B8 Show ' + (queries.length - 8) + ' more</div>';
             }
           }
 
@@ -2904,7 +2886,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)" style="color:var(--accent);font-size:10px;cursor:pointer;padding:4px 0">\u25B8 Show ' + (mutations.length - 5) + ' more</div>';
             }
           }
 
@@ -2916,7 +2898,7 @@ export class PageMapGenerator {
             });
             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)" style="color:var(--accent);font-size:10px;cursor:pointer;padding:4px 0">\u25B8 Show ' + (fragments.length - 3) + ' more</div>';
             }
           }
 
@@ -2973,7 +2955,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;
@@ -3460,103 +3442,85 @@ 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}">
+  }
+  buildTreeHtml(groups, allPages) {
+    const colors = [
+      "#ef4444",
+      "#f97316",
+      "#eab308",
+      "#22c55e",
+      "#14b8a6",
+      "#3b82f6",
+      "#8b5cf6",
+      "#ec4899"
+    ];
+    let idx = 0;
+    return Array.from(groups.entries()).sort((a, b) => a[0].localeCompare(b[0])).map(([name, pages]) => {
+      const color = colors[idx++ % colors.length];
+      const sorted = pages.sort((a, b) => a.path.localeCompare(b.path));
+      const pathSet = new Set(sorted.map((p) => p.path));
+      const depthMap = /* @__PURE__ */ new Map();
+      for (const p of sorted) {
+        const segments = p.path.split("/").filter(Boolean);
+        let depth = 0;
+        for (let i = segments.length - 1; i >= 1; i--) {
+          const ancestorPath = "/" + segments.slice(0, i).join("/");
+          if (pathSet.has(ancestorPath)) {
+            depth = (depthMap.get(ancestorPath) ?? 0) + 1;
+            break;
+          }
+        }
+        depthMap.set(p.path, depth);
+      }
+      const pagesHtml = sorted.map((p) => {
+        const type = this.getPageType(p.path);
+        const queries = (p.dataFetching || []).filter(
+          (d) => !d.type?.includes("Mutation")
+        ).length;
+        const mutations = (p.dataFetching || []).filter(
+          (d) => d.type?.includes("Mutation")
+        ).length;
+        const depth = depthMap.get(p.path) ?? 0;
+        const pageNode = p;
+        const repoName = pageNode.repo || "";
+        const showRepoTag = allPages.some(
+          (pg) => pg.repo && pg.repo !== repoName
+        );
+        const shortRepoName = repoName.split("/").pop()?.split("-").map((s) => s.substring(0, 4)).join("-") || repoName.substring(0, 8);
+        const repoTag = showRepoTag && repoName ? `<span class="tag tag-repo" title="${repoName}">${shortRepoName}</span>` : "";
+        const isSpaComponent = /^\/[A-Z]/.test(p.path) || p.filePath && p.filePath.includes("components/pages");
+        const displayPath = isSpaComponent && p.filePath ? p.filePath.replace(/\.tsx?$/, "").replace(/^(frontend\/src\/|src\/)/, "") : p.path;
+        const spaTag = isSpaComponent ? '<span class="tag" style="background:#6366f1;color:white" title="SPA Component Page">SPA</span>' : "";
+        return `<div class="page-item" data-path="${p.path}" data-repo="${repoName}" onclick="selectPage('${p.path}')" style="--depth:${depth}">
               <span class="page-type" style="--type-color:${type.color}">${type.label}</span>
               <span class="page-path">${displayPath}</span>
               <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>` : ''}
+                ${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>` : ""}
               </div>
             </div>`;
-            })
-                .join('');
-            return `<div class="group">
+      }).join("");
+      return `<div class="group">
           <div class="group-header" onclick="toggleGroup(this)" style="--group-color:${color}">
-            <span class="group-arrow">▼</span>
+            <span class="group-arrow">\u25BC</span>
             <span class="group-name">/${name}</span>
             <span class="group-count">${pages.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' };
-    }
-}
+    }).join("");
+  }
+  getPageType(path) {
+    const last = path.split("/").filter(Boolean).pop() || "";
+    if (last === "new" || path.endsWith("/new")) return { label: "CREATE", color: "#22c55e" };
+    if (last === "edit" || path.includes("/edit")) return { label: "EDIT", color: "#f59e0b" };
+    if (last.startsWith("[") || last.startsWith(":")) return { label: "DETAIL", color: "#3b82f6" };
+    if (path.includes("setting")) return { label: "SETTINGS", color: "#6b7280" };
+    return { label: "LIST", color: "#06b6d4" };
+  }
+};
+
+export { PageMapGenerator };