@mishasinitcyn/betterrank 0.1.6 → 0.1.8

package/src/ui.html

@@ -4,6 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>betterrank</title>
+<script src="https://d3js.org/d3.v7.min.js"></script>
 <style>
   :root {
     --bg: #0c0c0c;
@@ -475,6 +476,180 @@
     border-color: var(--accent);
     background: rgba(37, 99, 235, 0.08);
   }
+
+  /* Expandable map cards */
+  .map-card {
+    border-bottom: 1px solid var(--border);
+  }
+  .map-card-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px 4px;
+    cursor: pointer;
+    border-radius: 6px 6px 0 0;
+    transition: background 0.1s;
+  }
+  .map-card-header:hover { background: var(--bg-raised); }
+  .map-chevron {
+    font-size: 10px;
+    color: var(--text-faint);
+    transition: transform 0.2s ease;
+    flex-shrink: 0;
+    width: 14px;
+    text-align: center;
+    user-select: none;
+  }
+  .map-card.expanded .map-chevron { transform: rotate(90deg); }
+  .map-symbols {
+    padding: 2px 16px 10px 38px;
+  }
+  .map-expand {
+    display: none;
+    padding: 10px 16px 14px 38px;
+    background: var(--bg-raised);
+    margin: 0 8px 8px;
+    border-radius: 6px;
+  }
+  .map-card.expanded .map-expand { display: block; }
+  .map-expand-section {
+    margin-bottom: 10px;
+  }
+  .map-expand-section:last-child { margin-bottom: 0; }
+  .map-expand-title {
+    font-family: var(--mono);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+    color: var(--text-dim);
+    margin-bottom: 4px;
+  }
+  .map-expand-title .arrow { margin-right: 2px; }
+  .map-dep-item {
+    font-family: var(--mono);
+    font-size: 12px;
+    padding: 2px 0;
+    color: var(--accent);
+    cursor: pointer;
+    transition: color 0.1s;
+  }
+  .map-dep-item:hover { text-decoration: underline; }
+  .map-expand-empty {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--text-faint);
+    font-style: italic;
+    padding: 2px 0;
+  }
+  .map-expand-loading {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--text-dim);
+    padding: 4px 0;
+  }
+  .map-sym-item {
+    font-family: var(--mono);
+    font-size: 12px;
+    padding: 2px 0;
+    color: var(--text-dim);
+    cursor: pointer;
+    transition: color 0.1s;
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+  }
+  .map-sym-item:hover { color: var(--text); }
+  .map-sym-item .result-kind {
+    opacity: 0.55;
+    font-size: 9px;
+    flex-shrink: 0;
+  }
+  .map-sym-item .sym-line {
+    color: var(--text-faint);
+    min-width: 32px;
+    text-align: right;
+    flex-shrink: 0;
+  }
+
+  /* Graph view — inline within results area */
+  .graph-wrap {
+    position: relative;
+    height: calc(100vh - 280px);
+    min-height: 400px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+  }
+  .graph-wrap svg { width: 100%; height: 100%; display: block; }
+  .graph-filters {
+    position: absolute; top: 12px; right: 12px; z-index: 10;
+    background: rgba(22,22,22,0.9); backdrop-filter: blur(8px);
+    border: 1px solid var(--border); border-radius: 10px;
+    padding: 10px 12px; max-width: 240px;
+  }
+  .graph-filters-title { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
+  .graph-filter-badges { display: flex; flex-wrap: wrap; gap: 5px; }
+  .graph-badge {
+    display: inline-flex; align-items: center; gap: 5px;
+    padding: 3px 10px; border-radius: 999px;
+    font-size: 11px; font-weight: 500; cursor: pointer;
+    border: 1px solid var(--border); background: transparent;
+    color: var(--text-dim); transition: all 0.15s; user-select: none;
+  }
+  .graph-badge.active { background: var(--bg-raised); color: var(--text); }
+  .graph-badge .dot { width: 7px; height: 7px; border-radius: 50%; }
+  .graph-badge:hover { border-color: #3f3f46; }
+  .graph-detail {
+    position: absolute; bottom: 12px; left: 12px; z-index: 10;
+    background: rgba(22,22,22,0.95); backdrop-filter: blur(8px);
+    border: 1px solid var(--border); border-radius: 10px;
+    padding: 14px 18px; min-width: 260px; max-width: 340px;
+    display: none;
+  }
+  .graph-detail.visible { display: block; }
+  .graph-detail-cat { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
+  .graph-detail-name { font-size: 15px; font-weight: 600; margin-bottom: 2px; color: var(--text); }
+  .graph-detail-path { font-size: 11px; color: var(--text-faint); font-family: var(--mono); margin-bottom: 10px; cursor: pointer; }
+  .graph-detail-path:hover { color: var(--accent); text-decoration: underline; }
+  .graph-detail-section { margin-top: 8px; }
+  .graph-detail-section-title { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
+  .graph-detail-item { font-size: 11px; color: var(--text-dim); padding: 2px 0; display: flex; align-items: center; gap: 6px; }
+  .graph-detail-item .dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
+  .graph-tooltip {
+    position: fixed; z-index: 70; pointer-events: none;
+    background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px;
+    padding: 6px 10px; font-size: 11px; font-family: var(--mono); display: none;
+    color: var(--text); box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+  }
+  .graph-search {
+    position: absolute; bottom: 12px; right: 12px; z-index: 10;
+    background: rgba(22,22,22,0.95); backdrop-filter: blur(8px);
+    border: 1px solid var(--border); border-radius: 10px;
+    padding: 10px 12px; width: 280px;
+  }
+  .graph-search input {
+    width: 100%; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px;
+    padding: 7px 10px; font-size: 13px; color: var(--text); outline: none;
+    font-family: var(--mono);
+  }
+  .graph-search input::placeholder { color: var(--text-faint); }
+  .graph-search input:focus { border-color: var(--accent-dim); }
+  .graph-search-results { max-height: 200px; overflow-y: auto; margin-top: 8px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
+  .graph-search-results:empty { display: none; }
+  .graph-search-result {
+    padding: 6px 8px; border-radius: 6px; cursor: pointer;
+    transition: background 0.1s; font-size: 12px; font-family: var(--mono);
+    color: var(--text-dim);
+  }
+  .graph-search-result:hover { background: var(--bg-hover); color: var(--text); }
+  .graph-link { stroke-opacity: 0.15; }
+  .graph-link.highlighted { stroke-opacity: 0.7; stroke-width: 2px !important; }
+  .graph-node circle { stroke-width: 1.5; cursor: pointer; transition: r 0.15s; }
+  .graph-node text { fill: var(--text-dim); font-size: 9px; pointer-events: none; font-family: var(--mono); }
+  .graph-node.dimmed circle { opacity: 0.15; }
+  .graph-node.dimmed text { opacity: 0.1; }
+  .graph-node.highlighted circle { stroke-width: 3; }
 </style>
 </head>
 <body>
@@ -503,9 +678,9 @@
     </div>
   </div>
 
-  <!-- Recent repos -->
+  <!-- Indexed repos -->
   <div class="recent-repos" id="recentRepos" style="display:none">
-    <div class="recent-label">Recent</div>
+    <div class="recent-label">Indexed</div>
     <div class="recent-list" id="recentList"></div>
   </div>
 
@@ -531,6 +706,7 @@
     <button class="tab" data-tool="dependents">Dependents</button>
     <button class="tab" data-tool="neighborhood">Neighborhood</button>
     <button class="tab" data-tool="structure">Structure</button>
+    <button class="tab" data-tool="graph">Graph</button>
   </div>
 
   <!-- Search area -->
@@ -559,9 +735,9 @@
 
   <!-- Results -->
   <div class="results" id="results">
-    <div class="empty-state">
+    <div class="empty-state" id="emptyState">
       <div class="icon">&#x1F4C2;</div>
-      <p>Drop a folder here, click <strong>Browse</strong>, or type a path above.<br>
+      <p id="emptyMsg">Drop a folder here, click <strong>Browse</strong>, or type a path above.<br>
       Then search symbols, explore the map, or trace callers.<br><br>
       <kbd>&#8984;O</kbd> browse &nbsp; <kbd>&#8984;K</kbd> focus search</p>
     </div>
@@ -576,6 +752,9 @@
 
 </div>
 
+<!-- Graph tooltip (needs to be outside .app for fixed positioning) -->
+<div class="graph-tooltip" id="graphTooltip"></div>
+
 <script>
 const $ = s => document.querySelector(s);
 const $$ = s => document.querySelectorAll(s);
@@ -588,6 +767,7 @@ let pageSize = 20;
 let totalResults = 0;
 let indexed = false;
 let loading = false;
+const expandCache = new Map(); // file -> { dependents, deps } for map expansion
 
 // Elements
 const repoInput = $('#repoPath');
@@ -627,11 +807,13 @@ function removeRecentRepo(path) {
   const recent = getRecentRepos().filter(r => r !== path);
   localStorage.setItem(RECENT_KEY, JSON.stringify(recent));
   renderRecentRepos();
+  updateEmptyState();
 }
 
 function clearRecentRepos() {
   localStorage.removeItem(RECENT_KEY);
   renderRecentRepos();
+  updateEmptyState();
 }
 
 function renderRecentRepos() {
@@ -786,10 +968,11 @@ btnIndex.onclick = async () => {
 
     addRecentRepo(root);
     indexed = true;
+    expandCache.clear();
     showStats(data.stats, data.elapsed);
     await loadPickerData();
-    resultsEl.innerHTML = `<div class="empty-state"><p>Indexed <strong>${data.stats.files}</strong> files, <strong>${data.stats.symbols}</strong> symbols in ${data.elapsed}ms.<br>Start typing to search.</p></div>`;
-    queryInput.focus();
+    // Auto-switch to Map tab to show the ranked overview
+    document.querySelector('[data-tool="map"]').click();
   } catch (e) {
     resultsEl.innerHTML = `<div class="error-msg">${esc(e.message)}</div>`;
   } finally {
@@ -917,9 +1100,15 @@ $$('.tab').forEach(tab => {
     tab.classList.add('active');
     currentTool = tab.dataset.tool;
     currentPage = 0;
+
+    // Stop any running graph simulation when leaving graph tab
+    if (currentTool !== 'graph' && graphSimulation) {
+      graphSimulation.stop();
+    }
+
     updateSearchUI();
-    // Auto-run: map/structure run server query, others show pickers or run
-    if (['map', 'structure', 'symbols'].includes(currentTool)) {
+    // Auto-run: map/structure/graph run server query, others show pickers or run
+    if (['map', 'structure', 'symbols', 'graph'].includes(currentTool)) {
       runQuery();
     } else {
       queryInput.value = '';
@@ -934,6 +1123,7 @@ function updateSearchUI() {
   const needsKind = ['search', 'symbols'].includes(currentTool);
 
   $('#searchArea').style.display = needsQuery ? 'block' : 'none';
+  pagination.style.display = currentTool === 'graph' ? 'none' : pagination.style.display;
   kindFilter.style.display = needsKind ? 'inline-block' : 'none';
 
   const placeholders = {
@@ -991,7 +1181,7 @@ async function runQuery() {
         if (kindFilter.value) url += `&kind=${kindFilter.value}`;
         break;
       case 'map':
-        url = `${API}/api/map?offset=${offset}&limit=${pageSize}`;
+        url = `${API}/api/map?offset=${offset}&limit=${pageSize}&format=structured`;
         if (query) url += `&focus=${enc(query)}`;
         break;
       case 'symbols':
@@ -1022,6 +1212,9 @@ async function runQuery() {
       case 'structure':
         url = `${API}/api/structure?depth=4`;
         break;
+      case 'graph':
+        url = `${API}/api/graph?limit=500`;
+        break;
     }
 
     const res = await fetch(url);
@@ -1048,6 +1241,7 @@ function render(data) {
     case 'dependents': return renderFileList(data.results, data.total);
     case 'neighborhood': return renderNeighborhood(data);
     case 'structure': return renderPre(data.content);
+    case 'graph': return renderGraph(data);
   }
 }
 
@@ -1098,34 +1292,138 @@ function renderMap(data) {
   totalResults = data.totalSymbols || 0;
   resultCount.textContent = `${data.shownSymbols} of ${data.totalSymbols} symbols across ${data.shownFiles} of ${data.totalFiles} files`;
 
-  if (!data.content || data.content === '(empty index)') {
+  if (!data.files || data.files.length === 0) {
     resultsEl.innerHTML = '<div class="empty-state"><p>Empty index.</p></div>';
     pagination.style.display = 'none';
     return;
   }
 
-  // Parse map output into structured cards
-  const lines = data.content.split('\n');
+  resultsEl.innerHTML = data.files.map(f => {
+    const symsHtml = f.symbols.map(s =>
+      `<div class="result-sig" style="font-size:12px">` +
+        `<span class="result-kind kind-${s.kind || 'variable'}" style="font-size:9px">${s.kind || '?'}</span>` +
+        `<span class="result-line">${s.lineStart}</span> ${highlightSig(s.signature || s.name)}` +
+      `</div>`
+    ).join('');
+
+    return `<div class="map-card" data-file="${esc(f.path)}">` +
+      `<div class="map-card-header">` +
+        `<span class="map-chevron">&#x25B8;</span>` +
+        `<a class="result-file" href="#" onclick="openFile('${escJs(f.path)}'); event.stopPropagation(); return false" title="Open in editor">${esc(f.path)}</a>` +
+      `</div>` +
+      `<div class="map-symbols">${symsHtml}</div>` +
+      `<div class="map-expand"></div>` +
+    `</div>`;
+  }).join('');
+
+  // Attach expand/collapse handlers via delegation
+  resultsEl.querySelectorAll('.map-card-header').forEach(header => {
+    header.onclick = (e) => {
+      if (e.target.closest('.result-file')) return;
+      const card = header.closest('.map-card');
+      toggleMapExpand(card);
+    };
+  });
+
+  updatePagination();
+}
+
+async function toggleMapExpand(card) {
+  const file = card.dataset.file;
+  const expandEl = card.querySelector('.map-expand');
+  const isExpanded = card.classList.contains('expanded');
+
+  if (isExpanded) {
+    card.classList.remove('expanded');
+    return;
+  }
+
+  card.classList.add('expanded');
+
+  // Check cache
+  if (expandCache.has(file)) {
+    renderExpandContent(expandEl, expandCache.get(file));
+    return;
+  }
+
+  expandEl.innerHTML = '<div class="map-expand-loading">Loading dependencies...</div>';
+
+  try {
+    const [depsRes, dependentsRes, symbolsRes] = await Promise.all([
+      fetch(`${API}/api/deps?file=${enc(file)}&limit=15`).then(r => r.json()),
+      fetch(`${API}/api/dependents?file=${enc(file)}&limit=15`).then(r => r.json()),
+      fetch(`${API}/api/symbols?file=${enc(file)}&limit=500`).then(r => r.json()),
+    ]);
+
+    const data = {
+      dependents: dependentsRes.results || [],
+      dependentsTotal: dependentsRes.total || 0,
+      deps: depsRes.results || [],
+      depsTotal: depsRes.total || 0,
+      symbols: (symbolsRes.results || []).sort((a, b) => a.lineStart - b.lineStart),
+    };
+    expandCache.set(file, data);
+    renderExpandContent(expandEl, data);
+  } catch (e) {
+    expandEl.innerHTML = `<div class="error-msg">${esc(e.message)}</div>`;
+  }
+}
+
+function renderExpandContent(el, data) {
   let html = '';
-  let currentFile = null;
-
-  for (const line of lines) {
-    if (line.endsWith(':') && !line.startsWith(' ')) {
-      currentFile = line.slice(0, -1);
-      html += `<div class="result-card" style="padding-bottom:4px"><a class="result-file" href="#" onclick="openFile('${currentFile}'); return false" title="Open in editor">${esc(currentFile)}</a>`;
-    } else if (line.trim() === '') {
-      if (currentFile) { html += '</div>'; currentFile = null; }
-    } else if (currentFile) {
-      const match = line.match(/^\s*(\d+)\│\s*(.*)$/);
-      if (match) {
-        html += `<div class="result-sig" style="margin-left:12px;font-size:12px"><span class="result-line">${match[1]}</span> ${highlightSig(match[2])}</div>`;
-      }
+
+  // Imported by (dependents)
+  html += '<div class="map-expand-section">';
+  html += `<div class="map-expand-title"><span class="arrow">&larr;</span> Imported by (${data.dependentsTotal})</div>`;
+  if (data.dependents.length === 0) {
+    html += '<div class="map-expand-empty">No dependents</div>';
+  } else {
+    for (const f of data.dependents) {
+      const fp = typeof f === 'string' ? f : f.file;
+      html += `<div class="map-dep-item" onclick="openFile('${escJs(fp)}')">${esc(fp)}</div>`;
+    }
+    if (data.dependentsTotal > data.dependents.length) {
+      html += `<div class="map-expand-empty">...and ${data.dependentsTotal - data.dependents.length} more</div>`;
     }
   }
-  if (currentFile) html += '</div>';
+  html += '</div>';
 
-  resultsEl.innerHTML = html;
-  updatePagination();
+  // Depends on (deps)
+  html += '<div class="map-expand-section">';
+  html += `<div class="map-expand-title"><span class="arrow">&rarr;</span> Depends on (${data.depsTotal})</div>`;
+  if (data.deps.length === 0) {
+    html += '<div class="map-expand-empty">No dependencies</div>';
+  } else {
+    for (const f of data.deps) {
+      const fp = typeof f === 'string' ? f : f.file;
+      html += `<div class="map-dep-item" onclick="openFile('${escJs(fp)}')">${esc(fp)}</div>`;
+    }
+    if (data.depsTotal > data.deps.length) {
+      html += `<div class="map-expand-empty">...and ${data.depsTotal - data.deps.length} more</div>`;
+    }
+  }
+  html += '</div>';
+
+  // All symbols in source order
+  if (data.symbols && data.symbols.length > 0) {
+    html += '<div class="map-expand-section">';
+    html += `<div class="map-expand-title">All symbols (${data.symbols.length})</div>`;
+    for (const s of data.symbols) {
+      html += `<div class="map-sym-item" onclick="openFile('${escJs(s.file)}', ${s.lineStart})">` +
+        `<span class="result-kind kind-${s.kind || 'variable'}">${s.kind || '?'}</span>` +
+        `<span class="sym-line">${s.lineStart}</span> ${esc(s.signature || s.name)}` +
+      `</div>`;
+    }
+    html += '</div>';
+  }
+
+  el.innerHTML = html;
+}
+
+// Escape for use in JS string literals (single-quoted onclick handlers)
+function escJs(s) {
+  if (!s) return '';
+  return s.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
 }
 
 function renderNeighborhood(data) {
@@ -1244,6 +1542,332 @@ document.addEventListener('keydown', (e) => {
 repoInput.onkeydown = (e) => {
   if (e.key === 'Enter') btnIndex.click();
 };
+
+// --- Graph visualization (inline) ---
+const graphTooltip = $('#graphTooltip');
+
+const GRAPH_PALETTE = [
+  '#3b82f6', '#a855f7', '#06b6d4', '#22c55e', '#f59e0b',
+  '#14b8a6', '#ec4899', '#eab308', '#f97316', '#f43f5e',
+  '#6366f1', '#84cc16', '#0ea5e9', '#d946ef', '#fb7185',
+];
+let graphCategoryColors = {};
+let graphData = null;
+let graphSimulation = null;
+let graphActiveCategories = new Set();
+let graphG = null;
+let graphZoom = null;
+let graphLinkGroup = null;
+let graphNodeGroup = null;
+
+function getCategoryColor(cat) {
+  if (!graphCategoryColors[cat]) {
+    const idx = Object.keys(graphCategoryColors).length % GRAPH_PALETTE.length;
+    graphCategoryColors[cat] = GRAPH_PALETTE[idx];
+  }
+  return graphCategoryColors[cat];
+}
+
+function renderGraph(data) {
+  totalResults = 0;
+  pagination.style.display = 'none';
+  graphData = data;
+
+  if (!data.nodes || data.nodes.length === 0) {
+    resultsEl.innerHTML = '<div class="empty-state"><p>No graph data. Index a repository first.</p></div>';
+    resultCount.textContent = '';
+    return;
+  }
+
+  resultCount.textContent = `${data.nodes.length} modules, ${data.edges.length} edges`;
+
+  // Assign category colors
+  graphCategoryColors = {};
+  const categories = [...new Set(data.nodes.map(n => n.category))].sort();
+  categories.forEach(c => getCategoryColor(c));
+  graphActiveCategories = new Set(categories);
+
+  // Build the inline graph HTML
+  resultsEl.innerHTML = `
+    <div class="graph-wrap" id="graphWrap">
+      <div class="graph-filters">
+        <div class="graph-filters-title">Categories</div>
+        <div class="graph-filter-badges" id="graphFilterBadges"></div>
+      </div>
+      <div class="graph-detail" id="graphDetail">
+        <div class="graph-detail-cat" id="graphDetailCat"></div>
+        <div class="graph-detail-name" id="graphDetailName"></div>
+        <div class="graph-detail-path" id="graphDetailPath"></div>
+        <div class="graph-detail-section">
+          <div class="graph-detail-section-title">Imports (<span id="graphDetailImportsCount">0</span>)</div>
+          <div id="graphDetailImports"></div>
+        </div>
+        <div class="graph-detail-section">
+          <div class="graph-detail-section-title">Imported By (<span id="graphDetailImportedByCount">0</span>)</div>
+          <div id="graphDetailImportedBy"></div>
+        </div>
+      </div>
+      <div class="graph-search">
+        <input type="text" id="graphSearchInput" placeholder="Search files..." autocomplete="off" spellcheck="false" />
+        <div class="graph-search-results" id="graphSearchResults"></div>
+      </div>
+      <svg id="graphSvg"></svg>
+    </div>
+  `;
+
+  // Build filter badges
+  const badgeContainer = $('#graphFilterBadges');
+  categories.forEach(cat => {
+    const badge = document.createElement('div');
+    badge.className = 'graph-badge active';
+    badge.dataset.cat = cat;
+    badge.innerHTML = `<span class="dot" style="background:${getCategoryColor(cat)}"></span>${esc(cat)}`;
+    badge.addEventListener('click', () => {
+      if (graphActiveCategories.has(cat)) {
+        graphActiveCategories.delete(cat);
+        badge.classList.remove('active');
+      } else {
+        graphActiveCategories.add(cat);
+        badge.classList.add('active');
+      }
+      updateGraphViz();
+    });
+    badgeContainer.appendChild(badge);
+  });
+
+  // SVG setup
+  const wrap = $('#graphWrap');
+  const width = wrap.clientWidth;
+  const height = wrap.clientHeight;
+  const svg = d3.select('#graphSvg').attr('width', width).attr('height', height);
+
+  graphG = svg.append('g');
+  graphZoom = d3.zoom()
+    .scaleExtent([0.05, 5])
+    .on('zoom', (e) => graphG.attr('transform', e.transform));
+  svg.call(graphZoom);
+
+  svg.append('defs').append('marker')
+    .attr('id', 'graph-arrow')
+    .attr('viewBox', '0 -3 6 6')
+    .attr('refX', 16).attr('refY', 0)
+    .attr('markerWidth', 5).attr('markerHeight', 5)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M0,-3L6,0L0,3')
+    .attr('fill', '#555');
+
+  graphLinkGroup = graphG.append('g');
+  graphNodeGroup = graphG.append('g');
+
+  // Click empty space to dismiss detail
+  svg.on('click', () => {
+    const detail = $('#graphDetail');
+    if (detail) detail.classList.remove('visible');
+  });
+
+  updateGraphViz();
+
+  // Fit to view after simulation settles
+  setTimeout(() => {
+    if (!graphG || !graphG.node()) return;
+    const bounds = graphG.node().getBBox();
+    if (bounds.width === 0) return;
+    const dx = bounds.width, dy = bounds.height, x = bounds.x, y = bounds.y;
+    const scale = 0.85 / Math.max(dx / width, dy / height);
+    const translate = [width / 2 - scale * (x + dx / 2), height / 2 - scale * (y + dy / 2)];
+    svg.transition().duration(750).call(
+      graphZoom.transform,
+      d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale)
+    );
+  }, 3000);
+
+  // Wire up inline search
+  const searchInput = $('#graphSearchInput');
+  const searchResultsEl = $('#graphSearchResults');
+  if (searchInput) {
+    searchInput.oninput = () => {
+      const q = searchInput.value.trim().toLowerCase();
+      if (!q || !graphData) {
+        searchResultsEl.innerHTML = '';
+        graphNodeGroup.selectAll('g.graph-node').classed('dimmed', false);
+        return;
+      }
+      const matches = graphData.nodes.filter(n => n.id.toLowerCase().includes(q)).slice(0, 20);
+      const matchIds = new Set(matches.map(m => m.id));
+      graphNodeGroup.selectAll('g.graph-node').classed('dimmed', n => !matchIds.has(n.id));
+      searchResultsEl.innerHTML = matches.map(m =>
+        `<div class="graph-search-result" data-id="${esc(m.id)}">${esc(m.id)}</div>`
+      ).join('');
+      searchResultsEl.querySelectorAll('.graph-search-result').forEach(el => {
+        el.onclick = () => {
+          const node = graphData.nodes.find(n => n.id === el.dataset.id);
+          if (!node || node.x == null) return;
+          const s = 1.5;
+          const t = [width / 2 - s * node.x, height / 2 - s * node.y];
+          svg.transition().duration(500).call(
+            graphZoom.transform, d3.zoomIdentity.translate(t[0], t[1]).scale(s)
+          );
+          onGraphNodeClick({ stopPropagation: () => {} }, node);
+        };
+      });
+    };
+  }
+}
+
+function updateGraphViz() {
+  if (!graphData) return;
+  const wrap = $('#graphWrap');
+  if (!wrap) return;
+  const width = wrap.clientWidth;
+  const height = wrap.clientHeight;
+
+  const nodes = graphData.nodes.filter(n => graphActiveCategories.has(n.category));
+  const nodeIds = new Set(nodes.map(n => n.id));
+  const edges = graphData.edges.filter(e =>
+    nodeIds.has(e.source?.id || e.source) && nodeIds.has(e.target?.id || e.target)
+  );
+
+  resultCount.textContent = `${nodes.length} modules, ${edges.length} edges`;
+
+  // In-degree for sizing
+  const inDegree = {};
+  edges.forEach(e => {
+    const tid = e.target?.id || e.target;
+    inDegree[tid] = (inDegree[tid] || 0) + 1;
+  });
+
+  // Links
+  const links = graphLinkGroup.selectAll('line').data(edges, d => `${d.source?.id||d.source}-${d.target?.id||d.target}`);
+  links.exit().remove();
+  links.enter().append('line')
+    .attr('class', 'graph-link')
+    .attr('stroke', '#555')
+    .attr('stroke-width', 1)
+    .attr('marker-end', 'url(#graph-arrow)');
+
+  // Nodes
+  const nodeData = graphNodeGroup.selectAll('g.graph-node').data(nodes, d => d.id);
+  nodeData.exit().remove();
+  const nodeEnter = nodeData.enter().append('g').attr('class', 'graph-node');
+
+  nodeEnter.append('circle')
+    .attr('r', d => Math.max(5, Math.min(14, 4 + (inDegree[d.id] || 0) * 1.5)))
+    .attr('fill', d => getCategoryColor(d.category))
+    .attr('stroke', d => d3.color(getCategoryColor(d.category)).brighter(0.5))
+    .on('mouseover', onGraphNodeHover)
+    .on('mouseout', onGraphNodeOut)
+    .on('click', onGraphNodeClick);
+
+  nodeEnter.append('text')
+    .attr('dx', d => Math.max(5, Math.min(14, 4 + (inDegree[d.id] || 0) * 1.5)) + 4)
+    .attr('dy', 3)
+    .text(d => d.label);
+
+  nodeData.select('circle')
+    .attr('r', d => Math.max(5, Math.min(14, 4 + (inDegree[d.id] || 0) * 1.5)))
+    .attr('fill', d => getCategoryColor(d.category));
+
+  nodeEnter.call(d3.drag()
+    .on('start', (e, d) => { if (!e.active) graphSimulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; })
+    .on('drag', (e, d) => { d.fx = e.x; d.fy = e.y; })
+    .on('end', (e, d) => { if (!e.active) graphSimulation.alphaTarget(0); d.fx = null; d.fy = null; })
+  );
+
+  const allLinks = graphLinkGroup.selectAll('line');
+  const allNodes = graphNodeGroup.selectAll('g.graph-node');
+
+  if (graphSimulation) graphSimulation.stop();
+  graphSimulation = d3.forceSimulation(nodes)
+    .force('link', d3.forceLink(edges).id(d => d.id).distance(80))
+    .force('charge', d3.forceManyBody().strength(-200))
+    .force('center', d3.forceCenter(width / 2, height / 2))
+    .force('collision', d3.forceCollide(25))
+    .on('tick', () => {
+      allLinks
+        .attr('x1', d => d.source.x).attr('y1', d => d.source.y)
+        .attr('x2', d => d.target.x).attr('y2', d => d.target.y);
+      allNodes.attr('transform', d => `translate(${d.x},${d.y})`);
+    });
+}
+
+function onGraphNodeHover(event, d) {
+  graphTooltip.style.display = 'block';
+  graphTooltip.style.left = (event.clientX + 12) + 'px';
+  graphTooltip.style.top = (event.clientY - 8) + 'px';
+  graphTooltip.textContent = d.id;
+
+  const connected = new Set([d.id]);
+  graphData.edges.forEach(e => {
+    const sid = e.source?.id || e.source;
+    const tid = e.target?.id || e.target;
+    if (sid === d.id) connected.add(tid);
+    if (tid === d.id) connected.add(sid);
+  });
+
+  graphNodeGroup.selectAll('g.graph-node')
+    .classed('dimmed', n => !connected.has(n.id))
+    .classed('highlighted', n => n.id === d.id);
+  graphLinkGroup.selectAll('line').classed('highlighted', e => {
+    const sid = e.source?.id || e.source;
+    const tid = e.target?.id || e.target;
+    return sid === d.id || tid === d.id;
+  });
+}
+
+function onGraphNodeOut() {
+  graphTooltip.style.display = 'none';
+  graphNodeGroup.selectAll('g.graph-node').classed('dimmed', false).classed('highlighted', false);
+  graphLinkGroup.selectAll('line').classed('highlighted', false);
+}
+
+function onGraphNodeClick(event, d) {
+  event.stopPropagation();
+  const detail = $('#graphDetail');
+  if (!detail) return;
+  detail.classList.add('visible');
+  $('#graphDetailCat').textContent = d.category;
+  $('#graphDetailCat').style.color = getCategoryColor(d.category);
+  $('#graphDetailName').textContent = d.label;
+  const pathEl = $('#graphDetailPath');
+  pathEl.textContent = d.id;
+  pathEl.onclick = () => openFile(d.id);
+
+  const imports = graphData.edges
+    .filter(e => (e.source?.id || e.source) === d.id)
+    .map(e => graphData.nodes.find(n => n.id === (e.target?.id || e.target)))
+    .filter(Boolean);
+  const importedBy = graphData.edges
+    .filter(e => (e.target?.id || e.target) === d.id)
+    .map(e => graphData.nodes.find(n => n.id === (e.source?.id || e.source)))
+    .filter(Boolean);
+
+  $('#graphDetailImportsCount').textContent = imports.length;
+  $('#graphDetailImports').innerHTML = imports.map(n =>
+    `<div class="graph-detail-item"><span class="dot" style="background:${getCategoryColor(n.category)}"></span>${esc(n.label)}</div>`
+  ).join('');
+  $('#graphDetailImportedByCount').textContent = importedBy.length;
+  $('#graphDetailImportedBy').innerHTML = importedBy.map(n =>
+    `<div class="graph-detail-item"><span class="dot" style="background:${getCategoryColor(n.category)}"></span>${esc(n.label)}</div>`
+  ).join('');
+}
+
+// --- Context-aware empty state ---
+function updateEmptyState() {
+  const emptyMsg = $('#emptyMsg');
+  if (!emptyMsg) return;
+  const hasRecent = getRecentRepos().length > 0;
+  if (hasRecent) {
+    emptyMsg.innerHTML = `Select an indexed repository above, or add a new one.<br>
+      Drop a folder, click <strong>Browse</strong>, or type a path.<br><br>
+      <kbd>&#8984;O</kbd> browse &nbsp; <kbd>&#8984;K</kbd> focus search`;
+  } else {
+    emptyMsg.innerHTML = `Drop a folder here, click <strong>Browse</strong>, or type a path above.<br>
+      Then search symbols, explore the map, or trace callers.<br><br>
+      <kbd>&#8984;O</kbd> browse &nbsp; <kbd>&#8984;K</kbd> focus search`;
+  }
+}
+updateEmptyState();
 </script>
 </body>
 </html>