@kopikocappu/mycelium 0.2.0 → 0.2.2

package/dist/cli.js

@@ -7157,9 +7157,9 @@ var require_nodefs_handler = __commonJS({
         if (this.fsw.closed) {
           return;
         }
-        const dirname2 = sysPath.dirname(file);
+        const dirname3 = sysPath.dirname(file);
         const basename2 = sysPath.basename(file);
-        const parent = this.fsw._getWatchedDir(dirname2);
+        const parent = this.fsw._getWatchedDir(dirname3);
         let prevStats = stats;
         if (parent.has(basename2)) return;
         const listener = async (path9, newStats) => {
@@ -7181,7 +7181,7 @@ var require_nodefs_handler = __commonJS({
                 prevStats = newStats2;
               }
             } catch (error) {
-              this.fsw._remove(dirname2, basename2);
+              this.fsw._remove(dirname3, basename2);
             }
           } else if (parent.has(basename2)) {
             const at = newStats.atimeMs;
@@ -15727,9 +15727,10 @@ var CbmAdapter = class {
   }
   /** Run cbm index on a project */
   async index(repoPath) {
+    const fwdPath = import_path2.default.resolve(repoPath).replace(/\\/g, "/");
     const result = (0, import_child_process.spawnSync)(
       this.cbmBin,
-      ["cli", "index_repository", JSON.stringify({ repo_path: import_path2.default.resolve(repoPath) })],
+      ["cli", "index_repository", JSON.stringify({ repo_path: fwdPath })],
       { timeout: 3e5, stdio: "pipe", encoding: "utf-8" }
     );
     if (result.status !== 0) {
@@ -15739,18 +15740,19 @@ var CbmAdapter = class {
   /** Pull the full graph from cbm and convert to Mycelium format */
   async getGraph(repoPath) {
     const absPath = import_path2.default.resolve(repoPath);
+    const slug = this.slugifyPath(absPath);
     const fnResult = this.runCbmCli("search_graph", {
       label: "Function",
-      project: absPath,
+      project: slug,
       limit: 1e4
     });
     const fileResult = this.runCbmCli("search_graph", {
       label: "File",
-      project: absPath,
+      project: slug,
       limit: 1e4
     });
     const archResult = this.runCbmCli("get_architecture", {
-      repo_path: absPath
+      repo_path: absPath.replace(/\\/g, "/")
     });
     const fnNodes = fnResult?.results ?? [];
     const fileNodes = fileResult?.results ?? [];
@@ -15815,15 +15817,29 @@ var CbmAdapter = class {
     }));
   }
   // ─── Private helpers ────────────────────────────────────────────────────────
+  /**
+   * cbm stores projects as slugified absolute paths.
+   * e.g. C:\Users\Minh Tran\Desktop\pakky → C-Users-Minh-Tran-Desktop-pakky
+   * This is what the 'project' field expects in search_graph, trace_path, etc.
+   */
+  slugifyPath(absPath) {
+    return absPath.replace(/\\/g, "-").replace(/\//g, "-").replace(/:/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+  }
   runCbmCli(tool, args) {
     try {
+      const normalizedArgs = {};
+      for (const [k, v] of Object.entries(args)) {
+        normalizedArgs[k] = typeof v === "string" ? v.replace(/\\/g, "/") : v;
+      }
       const result = (0, import_child_process.spawnSync)(
         this.cbmBin,
-        ["cli", tool, JSON.stringify(args)],
+        ["cli", tool, JSON.stringify(normalizedArgs)],
         { timeout: 3e4, stdio: "pipe", encoding: "utf-8" }
       );
-      if (result.status !== 0 || !result.stdout) return null;
-      return JSON.parse(result.stdout.trim());
+      if (!result.stdout?.trim()) return null;
+      const parsed = JSON.parse(result.stdout.trim());
+      if (parsed?.error) return null;
+      return parsed;
     } catch {
       return null;
     }
@@ -15869,7 +15885,7 @@ var CbmAdapter = class {
     for (const fn of sample) {
       const result = this.runCbmCli("trace_path", {
         function_name: fn.qualified_name ?? fn.name,
-        project: import_path2.default.resolve(repoPath),
+        project: this.slugifyPath(import_path2.default.resolve(repoPath)),
         direction: "outbound",
         depth: 1
       });
@@ -15896,6 +15912,1295 @@ var CbmAdapter = class {
 var cbmAdapter = new CbmAdapter();
 
 // src/mcp/server.ts
+var EMBEDDED_VIEWER = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Mycelium Graph</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
+<style>
+  :root {
+    --bg: #0e0e12;
+    --surface: #16161e;
+    --surface2: #1e1e2a;
+    --border: #2a2a3a;
+    --text: #e0e0f0;
+    --text-dim: #7878a0;
+    --accent: #7c6af7;
+    --accent2: #f7916a;
+    --accent3: #6af7c4;
+    --import-edge: #4a8fff;
+    --call-edge: #ff8c42;
+    --file-node: #7c6af7;
+    --fn-node: #6af7c4;
+    --class-node: #f7916a;
+    --cluster-hull: rgba(124, 106, 247, 0.07);
+    --sidebar-w: 340px;
+  }
+
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: 'SF Mono', 'Fira Code', monospace;
+    overflow: hidden;
+    height: 100vh;
+    display: flex;
+  }
+
+  /* \u2500\u2500 Sidebar \u2500\u2500 */
+  #sidebar {
+    width: var(--sidebar-w);
+    min-width: var(--sidebar-w);
+    background: var(--surface);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    z-index: 10;
+    overflow: hidden;
+  }
+
+  #sidebar-header {
+    padding: 16px;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .logo {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--accent);
+    letter-spacing: -0.5px;
+  }
+
+  .logo span { color: var(--text-dim); font-weight: 400; }
+
+  #search-wrap {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border);
+    position: relative;
+  }
+
+  #search {
+    width: 100%;
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text);
+    font-family: inherit;
+    font-size: 12px;
+    padding: 7px 10px 7px 30px;
+    outline: none;
+    transition: border-color 0.15s;
+  }
+
+  #search:focus { border-color: var(--accent); }
+
+  .search-icon {
+    position: absolute;
+    left: 26px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-dim);
+    font-size: 12px;
+    pointer-events: none;
+  }
+
+  /* \u2500\u2500 Controls \u2500\u2500 */
+  #controls {
+    padding: 10px 16px;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .control-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 11px;
+    color: var(--text-dim);
+  }
+
+  .toggle-btn {
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-dim);
+    font-family: inherit;
+    font-size: 11px;
+    padding: 3px 8px;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .toggle-btn.active {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: white;
+  }
+
+  .zoom-level-btns { display: flex; gap: 4px; }
+
+  /* \u2500\u2500 Node info panel \u2500\u2500 */
+  #node-info {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+  }
+
+  .node-info-empty {
+    color: var(--text-dim);
+    font-size: 12px;
+    text-align: center;
+    margin-top: 40px;
+  }
+
+  .node-detail { animation: fadeIn 0.2s ease; }
+
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .node-kind-badge {
+    display: inline-block;
+    font-size: 10px;
+    padding: 2px 6px;
+    border-radius: 3px;
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .kind-file { background: rgba(124,106,247,0.2); color: var(--accent); }
+  .kind-function { background: rgba(106,247,196,0.2); color: var(--fn-node); }
+  .kind-class { background: rgba(247,145,106,0.2); color: var(--class-node); }
+
+  .node-name {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 6px;
+    word-break: break-all;
+  }
+
+  .node-description {
+    font-size: 12px;
+    color: var(--text-dim);
+    line-height: 1.6;
+    margin-bottom: 12px;
+  }
+
+  .tags-wrap { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
+
+  .tag {
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: 3px;
+    font-size: 10px;
+    padding: 2px 6px;
+    color: var(--text-dim);
+  }
+
+  .section-title {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: var(--text-dim);
+    margin-bottom: 6px;
+    margin-top: 14px;
+  }
+
+  .dep-list { display: flex; flex-direction: column; gap: 3px; }
+
+  .dep-item {
+    font-size: 11px;
+    color: var(--text);
+    padding: 4px 8px;
+    background: var(--surface2);
+    border-radius: 4px;
+    border-left: 2px solid;
+    cursor: pointer;
+    transition: background 0.1s;
+    word-break: break-all;
+  }
+
+  .dep-item:hover { background: #252535; }
+  .dep-import { border-left-color: var(--import-edge); }
+  .dep-call { border-left-color: var(--call-edge); }
+  .dep-calledby { border-left-color: var(--fn-node); }
+
+  .dep-label {
+    font-size: 9px;
+    color: var(--text-dim);
+    display: block;
+    margin-bottom: 1px;
+  }
+
+  .stat-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: 11px;
+    padding: 3px 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .stat-val { color: var(--accent); }
+
+  /* \u2500\u2500 Legend \u2500\u2500 */
+  #legend {
+    padding: 12px 16px;
+    border-top: 1px solid var(--border);
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 10px;
+    color: var(--text-dim);
+  }
+
+  .legend-dot {
+    width: 8px; height: 8px;
+    border-radius: 50%;
+  }
+
+  .legend-line {
+    width: 16px; height: 2px;
+    border-radius: 1px;
+  }
+
+  /* \u2500\u2500 Main canvas area \u2500\u2500 */
+  #canvas-wrap {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+  }
+
+  #graph-svg { width: 100%; height: 100%; }
+
+  /* \u2500\u2500 Top bar \u2500\u2500 */
+  #topbar {
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 44px;
+    background: rgba(14,14,18,0.9);
+    backdrop-filter: blur(8px);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    gap: 12px;
+    z-index: 5;
+  }
+
+  .stats-chip {
+    font-size: 11px;
+    color: var(--text-dim);
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 3px 8px;
+  }
+
+  .stats-chip strong { color: var(--text); }
+
+  #task-input-wrap {
+    flex: 1;
+    max-width: 400px;
+    position: relative;
+  }
+
+  #task-input {
+    width: 100%;
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text);
+    font-family: inherit;
+    font-size: 12px;
+    padding: 6px 36px 6px 10px;
+    outline: none;
+    transition: border-color 0.15s;
+  }
+
+  #task-input:focus { border-color: var(--accent); }
+  #task-input::placeholder { color: var(--text-dim); }
+
+  #task-submit {
+    position: absolute;
+    right: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: var(--accent);
+    border: none;
+    border-radius: 4px;
+    color: white;
+    font-family: inherit;
+    font-size: 10px;
+    padding: 3px 7px;
+    cursor: pointer;
+  }
+
+  /* \u2500\u2500 Minimap \u2500\u2500 */
+  #minimap {
+    position: absolute;
+    bottom: 16px;
+    right: 16px;
+    width: 160px;
+    height: 100px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    overflow: hidden;
+    z-index: 5;
+  }
+
+  #minimap-svg { width: 100%; height: 100%; }
+  #minimap-viewport {
+    fill: rgba(124,106,247,0.15);
+    stroke: var(--accent);
+    stroke-width: 1;
+  }
+
+  /* \u2500\u2500 Zoom buttons \u2500\u2500 */
+  #zoom-btns {
+    position: absolute;
+    bottom: 130px;
+    right: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    z-index: 5;
+  }
+
+  .zoom-btn {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text);
+    width: 32px; height: 32px;
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background 0.1s;
+  }
+
+  .zoom-btn:hover { background: var(--surface2); }
+
+  /* \u2500\u2500 Loading \u2500\u2500 */
+  #loading {
+    position: absolute;
+    inset: 0;
+    background: var(--bg);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    z-index: 100;
+  }
+
+  .spinner {
+    width: 40px; height: 40px;
+    border: 3px solid var(--border);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.7s linear infinite;
+  }
+
+  @keyframes spin { to { transform: rotate(360deg); } }
+
+  #loading-text { font-size: 13px; color: var(--text-dim); }
+
+  /* \u2500\u2500 Tooltip \u2500\u2500 */
+  #tooltip {
+    position: absolute;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 12px 14px;
+    font-size: 12px;
+    pointer-events: none;
+    z-index: 20;
+    max-width: 320px;
+    display: none;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+  }
+
+  #tooltip .tip-name { font-weight: 700; font-size: 13px; margin-bottom: 4px; color: var(--text); }
+  #tooltip .tip-desc { color: var(--text-dim); font-size: 11px; line-height: 1.6; margin-top: 4px; }
+  #tooltip .tip-tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 3px; }
+  #tooltip .tip-tag { background: rgba(124,106,247,0.15); color: var(--accent); font-size: 10px; padding: 2px 6px; border-radius: 3px; }
+
+  /* \u2500\u2500 SVG styles \u2500\u2500 */
+  .node circle { cursor: pointer; }
+  .node text {
+    font-family: 'SF Mono', 'Fira Code', monospace;
+    font-size: 10px;
+    fill: var(--text-dim);
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .node.selected circle { filter: drop-shadow(0 0 6px var(--accent)); }
+  .node.highlighted circle { opacity: 1 !important; }
+  .node.dimmed circle { opacity: 0.15 !important; }
+  .node.dimmed text { opacity: 0.15; }
+
+  .link {
+    fill: none;
+    stroke: rgba(255,255,255,0.4);
+    stroke-opacity: 0.7;
+  }
+
+  .link.imports-edge { stroke: rgba(255,255,255,0.35); stroke-width: 1; }
+  .link.calls-edge { stroke: rgba(255,255,255,0.18); stroke-width: 1; stroke-dasharray: 4,4; }
+  .link.contains-edge { stroke: #333344; stroke-width: 0.5; stroke-dasharray: 3,3; }
+
+  .link.highlighted { stroke-opacity: 1 !important; stroke-width: 3 !important; }
+  .link.dimmed { stroke-opacity: 0.04 !important; }
+
+  .hull {
+    fill: none;
+    stroke-width: 1.5;
+    stroke-dasharray: 6,4;
+    opacity: 0.5;
+  }
+
+  .cluster-label {
+    font-family: 'SF Mono', monospace;
+    font-size: 11px;
+    fill: rgba(124,106,247,0.5);
+    font-weight: 600;
+    pointer-events: none;
+  }
+</style>
+</head>
+<body>
+
+<!-- Sidebar -->
+<div id="sidebar">
+  <div id="sidebar-header">
+    <div class="logo">mycelium<span>.dev</span></div>
+  </div>
+  <div id="search-wrap">
+    <span class="search-icon">\u2315</span>
+    <input id="search" type="text" placeholder="Search files, functions, tags\u2026" autocomplete="off">
+  </div>
+  <div id="controls">
+    <div class="control-row">
+      <span>Edges:</span>
+      <button class="toggle-btn active" id="toggle-imports">Imports</button>
+      <button class="toggle-btn active" id="toggle-calls">Calls</button>
+      <button class="toggle-btn" id="toggle-fns">Functions</button>
+    </div>
+    <div class="control-row">
+      <span>Zoom level:</span>
+      <div class="zoom-level-btns">
+        <button class="toggle-btn active" id="zoom-files">Files</button>
+        <button class="toggle-btn" id="zoom-symbols">Symbols</button>
+      </div>
+    </div>
+    <div class="control-row">
+      <button class="toggle-btn" id="toggle-clusters">Directory clusters</button>
+    </div>
+  </div>
+  <div id="node-info">
+    <div class="node-info-empty" style="line-height:1.8">Click any dot to see<br>what it imports, exports,<br>and connects to</div>
+  </div>
+  <div id="legend">
+    <div id="dir-legend"></div>
+    <div class="legend-item">
+      <div class="legend-line" style="background:rgba(255,255,255,0.35)"></div>Import
+    </div>
+    <div class="legend-item">
+      <div class="legend-line" style="background:rgba(255,255,255,0.25)"></div>Call
+    </div>
+  </div>
+</div>
+
+<!-- Canvas -->
+<div id="canvas-wrap">
+  <div id="topbar">
+    <span class="stats-chip"><strong id="stat-nodes">\u2013</strong> files</span>
+    <span class="stats-chip"><strong id="stat-edges">\u2013</strong> connections</span>
+    <span class="stats-chip"><strong id="stat-fns">\u2013</strong> functions mapped</span>
+    <div id="task-input-wrap">
+      <input id="task-input" type="text" placeholder="e.g. add stripe checkout, fix auth bug, add new page\u2026">
+      <button id="task-submit">\u2192</button>
+    </div>
+  </div>
+  <svg id="graph-svg"></svg>
+
+  <div id="zoom-btns">
+    <div class="zoom-btn" id="btn-zoom-in">+</div>
+    <div class="zoom-btn" id="btn-zoom-fit">\u22A1</div>
+    <div class="zoom-btn" id="btn-zoom-out">\u2212</div>
+  </div>
+
+  <div id="minimap">
+    <svg id="minimap-svg">
+      <rect id="minimap-viewport" x="0" y="0" width="0" height="0"/>
+    </svg>
+  </div>
+</div>
+
+<div id="loading">
+  <div class="spinner"></div>
+  <div id="loading-text">Loading graph\u2026</div>
+</div>
+
+<div id="help-overlay" style="
+  position:absolute; inset:0; background:rgba(14,14,18,0.85);
+  display:flex; align-items:center; justify-content:center;
+  z-index:50; cursor:pointer; backdrop-filter:blur(2px);
+" onclick="this.style.display='none'">
+  <div style="text-align:center; max-width:420px; padding:40px">
+    <div style="font-size:32px; margin-bottom:16px">\u{1F344}</div>
+    <div style="font-size:20px; font-weight:700; color:#e0e0f0; margin-bottom:12px">
+      Your codebase, mapped
+    </div>
+    <div style="font-size:13px; color:#7878a0; line-height:1.8; margin-bottom:24px">
+      Each <span style="color:#7c6af7">\u25CF</span> dot is a file.<br>
+      Color shows which folder it belongs to.<br>
+      <span style="color:#5b9fff">Blue lines</span> show imports \u2014 file A uses file B.<br>
+      <span style="color:#ff8c42">Orange lines</span> show function calls across files.<br><br>
+      Click any dot to see what it connects to.<br>
+      Type a task above to find relevant files instantly.
+    </div>
+    <div style="font-size:11px; color:#7878a0; background:#16161e; padding:8px 16px; border-radius:6px; border:1px solid #2a2a3a">
+      Click anywhere to dismiss
+    </div>
+  </div>
+</div>
+
+<div id="tooltip">
+  <div class="tip-name"></div>
+  <div class="tip-desc"></div>
+  <div class="tip-tags"></div>
+</div>
+
+<script>
+// \u2500\u2500\u2500 Config \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+const API_BASE = '';   // same origin
+// Directory-based color palette \u2014 same folder = same color
+// Much more intuitive than spatial hulls
+const DIR_PALETTE = [
+  '#6B8AFF', // soft blue      \u2014 app/
+  '#4ECDC4', // muted teal     \u2014 lib/
+  '#F7B267', // warm amber     \u2014 components/
+  '#C5A3FF', // soft lavender  \u2014 src/
+  '#7ECBA1', // sage green     \u2014 hooks/
+  '#F28B82', // dusty rose     \u2014 context/
+  '#93C5FD', // sky blue       \u2014 utils/
+  '#FCD34D', // muted gold     \u2014 other
+];
+
+const dirColorMap = new Map();
+let dirColorIdx = 0;
+
+function getDirColor(nodeId) {
+  const parts = (nodeId || '').split('/');
+  const dir = parts.length > 1 ? parts[0] : 'root';
+  if (!dirColorMap.has(dir)) {
+    dirColorMap.set(dir, DIR_PALETTE[dirColorIdx % DIR_PALETTE.length]);
+    dirColorIdx++;
+  }
+  return dirColorMap.get(dir);
+}
+
+const COLORS = {
+  file:     '#6B8AFF',       // fallback \u2014 uses getDirColor normally
+  function: 'rgba(255,255,255,0.55)',  // subtle white \u2014 secondary nodes
+  class:    'rgba(255,255,255,0.45)',
+  import:   'rgba(255,255,255,0.35)',
+  call:     'rgba(255,255,255,0.25)',
+  contains: 'rgba(255,255,255,0.08)',
+};
+
+// \u2500\u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+let allNodes = [], allLinks = [];
+let visNodes = [], visLinks = [];
+let selectedNode = null;
+let simulation, zoom, svg, gMain, gHulls, gLinks, gNodes;
+let showImports = true, showCalls = true, showFunctions = false, showClusters = false;
+let zoomLevel = 'files'; // 'files' | 'symbols'
+let preflight = new Set();
+let _initialFitDone = false; // prevents fitToScreen on every simulation restart
+
+// \u2500\u2500\u2500 Load graph \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+async function loadGraph() {
+  try {
+    setLoading('Fetching graph\u2026');
+    const r = await fetch(\`\${API_BASE}/graph\`);
+    const data = await r.json();
+    allNodes = data.nodes || [];
+    allLinks = data.edges || [];
+    setLoading('Building simulation\u2026');
+    buildVis();
+  } catch (e) {
+    document.getElementById('loading-text').textContent = 'Failed to load graph. Is the server running?';
+  }
+}
+
+// \u2500\u2500\u2500 Build visualization \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function buildVis() {
+  const svgEl = document.getElementById('graph-svg');
+  const W = svgEl.clientWidth, H = svgEl.clientHeight;
+
+  // Filter nodes/links based on current view settings
+  visNodes = allNodes.filter(n => {
+    if (n.kind === 'file') return true;
+    if ((n.kind === 'function' || n.kind === 'class') && zoomLevel === 'symbols') return showFunctions;
+    return false;
+  });
+
+  const nodeIds = new Set(visNodes.map(n => n.id));
+  visLinks = allLinks.filter(l => {
+    if (!nodeIds.has(l.from) || !nodeIds.has(l.to)) return false;
+    if (l.kind === 'imports' && !showImports) return false;
+    if (l.kind === 'calls' && !showCalls) return false;
+    if (l.kind === 'contains') return zoomLevel === 'symbols';
+    return true;
+  });
+
+  // Update stats
+  const fnCount = allNodes.filter(n => n.kind === 'function').length;
+  document.getElementById('stat-nodes').textContent = visNodes.length;
+  document.getElementById('stat-edges').textContent = visLinks.length;
+  document.getElementById('stat-fns').textContent = fnCount;
+
+  // Clear SVG
+  d3.select('#graph-svg').selectAll('*').remove();
+
+  svg = d3.select('#graph-svg');
+  _initialFitDone = false; // reset on each rebuild
+
+  // Zoom behavior
+  zoom = d3.zoom()
+    .scaleExtent([0.05, 8])
+    .filter(event => event.type !== 'dblclick')
+    .on('zoom', ({ transform }) => {
+      gMain.attr('transform', transform);
+      updateMinimap(transform, W, H);
+    });
+
+  svg.call(zoom);
+
+  gMain = svg.append('g').attr('class', 'main-group');
+  gHulls = gMain.append('g').attr('class', 'hulls');
+  gLinks = gMain.append('g').attr('class', 'links');
+  gNodes = gMain.append('g').attr('class', 'nodes');
+
+  // \u2500\u2500 Cluster hulls by directory \u2500\u2500
+  const dirGroups = groupByDirectory(visNodes.filter(n => n.kind === 'file'));
+
+  // \u2500\u2500 Build link objects \u2500\u2500
+  const nodeMap = new Map(visNodes.map(n => [n.id, n]));
+  const linkObjs = visLinks.map(l => ({
+    ...l,
+    source: nodeMap.get(l.from),
+    target: nodeMap.get(l.to),
+  })).filter(l => l.source && l.target);
+
+  // \u2500\u2500 Simulation \u2500\u2500
+  simulation = d3.forceSimulation(visNodes)
+    .force('link', d3.forceLink(linkObjs)
+      .id(d => d.id)
+      .distance(d => d.kind === 'contains' ? 40 : d.kind === 'calls' ? 80 : 100)
+      .strength(d => d.kind === 'contains' ? 0.8 : 0.3))
+    .force('charge', d3.forceManyBody().strength(d => d.kind === 'file' ? -250 : -80))
+    .force('center', d3.forceCenter(W / 2, H / 2))
+    .force('collision', d3.forceCollide().radius(d => nodeRadius(d) + 8))
+    .force('cluster', clusterForce(dirGroups, 0.08))
+    .alphaDecay(0.02)
+    .on('tick', ticked)
+    .on('end', () => {
+      if (!_initialFitDone) {
+        hideLoading();
+        if (showClusters) renderHulls(dirGroups);
+        fitToScreen();
+        updateDirLegend();
+        _initialFitDone = true;
+      }
+    });
+
+  // \u2500\u2500 Links \u2500\u2500
+  const link = gLinks.selectAll('.link')
+    .data(linkObjs)
+    .join('line')
+    .attr('class', d => \`link \${d.kind}-edge\`)
+    .attr('marker-end', d => d.kind === 'calls' ? 'url(#arrow-call)' : null);
+
+  // Arrow markers
+  svg.append('defs').html(\`
+    <marker id="arrow-call" viewBox="0 -4 8 8" refX="8" refY="0"
+            markerWidth="6" markerHeight="6" orient="auto">
+      <path d="M0,-4L8,0L0,4" fill="\${COLORS.call}" opacity="0.6"/>
+    </marker>
+  \`);
+
+  // \u2500\u2500 Nodes \u2500\u2500
+  const node = gNodes.selectAll('.node')
+    .data(visNodes)
+    .join('g')
+    .attr('class', 'node')
+    .attr('data-id', d => d.id)
+    .call(d3.drag()
+      .clickDistance(8)
+      .on('start', (event, d) => {
+        if (!event.active) simulation.alphaTarget(0.3).restart();
+        d.fx = d.x; d.fy = d.y;
+      })
+      .on('drag', (event, d) => { d.fx = event.x; d.fy = event.y; })
+      .on('end', (event, d) => {
+        if (!event.active) simulation.alphaTarget(0);
+        d.fx = null; d.fy = null;
+      }))
+    .on('click', (event, d) => {
+      event.stopPropagation();
+      // Smoothly pan to clicked node, preserving current zoom level
+      if (d.x !== undefined && d.y !== undefined) {
+        const svgEl = document.getElementById('graph-svg');
+        const W = svgEl.clientWidth, H = svgEl.clientHeight;
+        const currentT = d3.zoomTransform(svg.node());
+        const s = currentT.k; // keep current zoom level
+        svg.transition().duration(400).call(
+          zoom.transform,
+          d3.zoomIdentity.translate(W / 2 - d.x * s, H / 2 - d.y * s).scale(s)
+        );
+      }
+      selectNode(d, linkObjs);
+    })
+    .on('mouseenter', (event, d) => showTooltip(event, d))
+    .on('mousemove', (event) => moveTooltip(event))
+    .on('mouseleave', hideTooltip);
+
+  node.append('circle')
+    .attr('r', d => nodeRadius(d))
+    .attr('fill', d => d.kind === 'file' ? getDirColor(d.id) : (COLORS[d.kind] ?? COLORS.file))
+    .attr('fill-opacity', 0.9)
+    .attr('stroke', d => d.kind === 'file' ? getDirColor(d.id) : (COLORS[d.kind] ?? COLORS.file))
+    .attr('stroke-width', 2)
+    .attr('stroke-opacity', 0.35);
+
+  node.append('text')
+    .attr('dy', d => nodeRadius(d) + 11)
+    .attr('text-anchor', 'middle')
+    .text(d => shortName(d.name || d.id));
+
+  // Click background to deselect
+  svg.on('click', () => {
+    selectNode(null, linkObjs);
+  });
+
+  function ticked() {
+    link
+      .attr('x1', d => d.source.x)
+      .attr('y1', d => d.source.y)
+      .attr('x2', d => d.target.x)
+      .attr('y2', d => d.target.y);
+
+    node.attr('transform', d => \`translate(\${d.x},\${d.y})\`);
+
+    // Update minimap nodes
+    updateMinimapNodes(visNodes);
+  }
+}
+
+// \u2500\u2500\u2500 Cluster force \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function clusterForce(groups, strength) {
+  // Gentle force pulling nodes toward their directory centroid
+  const centroids = new Map();
+
+  for (const [dir, nodes] of Object.entries(groups)) {
+    centroids.set(dir, { x: 0, y: 0 });
+  }
+
+  return function(alpha) {
+    for (const [dir, nodes] of Object.entries(groups)) {
+      if (nodes.length < 2) continue;
+      let cx = 0, cy = 0;
+      for (const n of nodes) { cx += n.x || 0; cy += n.y || 0; }
+      cx /= nodes.length; cy /= nodes.length;
+      centroids.set(dir, { x: cx, y: cy });
+      for (const n of nodes) {
+        n.vx = (n.vx || 0) + (cx - n.x) * strength * alpha;
+        n.vy = (n.vy || 0) + (cy - n.y) * strength * alpha;
+      }
+    }
+  };
+}
+
+// \u2500\u2500\u2500 Hull rendering \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function renderHulls(dirGroups) {
+  gHulls.selectAll('*').remove();
+
+  for (const [dir, nodes] of Object.entries(dirGroups)) {
+    if (nodes.length < 3) continue;
+    const points = nodes.map(n => [n.x, n.y]);
+    const hull = d3.polygonHull(points);
+    if (!hull) continue;
+
+    // Expand hull
+    const centroid = d3.polygonCentroid(hull);
+    const expanded = hull.map(([px, py]) => {
+      const dx = px - centroid[0], dy = py - centroid[1];
+      const dist = Math.sqrt(dx*dx + dy*dy) || 1;
+      return [px + dx/dist * 30, py + dy/dist * 30];
+    });
+
+    const hullColor = getDirColor(nodes[0]?.id ?? dir);
+    gHulls.append('path')
+      .attr('class', 'hull')
+      .attr('d', \`M\${expanded.join('L')}Z\`)
+      .attr('stroke', hullColor);
+
+    gHulls.append('text')
+      .attr('class', 'cluster-label')
+      .attr('x', centroid[0])
+      .attr('y', centroid[1] - (Math.max(...nodes.map(n => Math.abs(n.y - centroid[1]))) + 40))
+      .attr('text-anchor', 'middle')
+      .attr('fill', hullColor)
+      .text(dir);
+  }
+}
+
+// \u2500\u2500\u2500 Node selection \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function selectNode(nodeData, linkObjs) {
+  selectedNode = nodeData;
+
+  if (!nodeData) {
+    // Deselect all
+    d3.selectAll('.node').classed('selected highlighted dimmed', false);
+    d3.selectAll('.link').classed('highlighted dimmed', false);
+    d3.selectAll('.node circle').attr('fill-opacity', 0.85);
+    renderNodeInfo(null, linkObjs);
+    return;
+  }
+
+  const connectedIds = new Set([nodeData.id]);
+  const connectedLinks = new Set();
+
+  for (const l of linkObjs) {
+    const fromId = l.source?.id ?? l.from;
+    const toId = l.target?.id ?? l.to;
+    if (fromId === nodeData.id || toId === nodeData.id) {
+      connectedIds.add(fromId);
+      connectedIds.add(toId);
+      connectedLinks.add(l);
+    }
+  }
+
+  d3.selectAll('.node')
+    .classed('selected', d => d.id === nodeData.id)
+    .classed('highlighted', d => connectedIds.has(d.id))
+    .classed('dimmed', d => !connectedIds.has(d.id));
+
+  d3.selectAll('.link')
+    .classed('highlighted', l => connectedLinks.has(l))
+    .classed('dimmed', l => !connectedLinks.has(l));
+
+  renderNodeInfo(nodeData, linkObjs);
+}
+
+// \u2500\u2500\u2500 Sidebar info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function renderNodeInfo(nodeData, linkObjs) {
+  const panel = document.getElementById('node-info');
+
+  if (!nodeData) {
+    panel.innerHTML = '<div class="node-info-empty" style="line-height:1.8">Click any dot to see<br>what it imports, exports,<br>and connects to</div>';
+    return;
+  }
+
+  const imports = linkObjs.filter(l => {
+    const from = l.source?.id ?? l.from;
+    return from === nodeData.id && l.kind === 'imports';
+  });
+
+  const importedBy = linkObjs.filter(l => {
+    const to = l.target?.id ?? l.to;
+    return to === nodeData.id && l.kind === 'imports';
+  });
+
+  const calls = linkObjs.filter(l => {
+    const from = l.source?.id ?? l.from;
+    return from === nodeData.id && l.kind === 'calls';
+  });
+
+  const calledBy = linkObjs.filter(l => {
+    const to = l.target?.id ?? l.to;
+    return to === nodeData.id && l.kind === 'calls';
+  });
+
+  const tags = (nodeData.tags || []).map(t => \`<span class="tag">\${t}</span>\`).join('');
+  const tagsHtml = tags ? \`<div class="tags-wrap">\${tags}</div>\` : '';
+
+  function depList(items, cssClass, labelText, key) {
+    if (!items.length) return '';
+    return \`
+      <div class="section-title">\${labelText} (\${items.length})</div>
+      <div class="dep-list">
+        \${items.slice(0, 12).map(l => {
+          const id = key === 'to' ? (l.target?.id ?? l.to) : (l.source?.id ?? l.from);
+          const shortId = id.split('/').pop();
+          const extra = l.callCount ? \`<span class="dep-label">called \${l.callCount}\xD7</span>\` : '';
+          return \`<div class="dep-item \${cssClass}" onclick="focusNode('\${id}')">\${extra}\${shortId}</div>\`;
+        }).join('')}
+        \${items.length > 12 ? \`<div style="font-size:10px;color:var(--text-dim);padding:4px 8px">+\${items.length - 12} more</div>\` : ''}
+      </div>\`;
+  }
+
+  panel.innerHTML = \`
+    <div class="node-detail">
+      <div class="node-kind-badge kind-\${nodeData.kind}">\${nodeData.kind}</div>
+      <div class="node-name">\${nodeData.name || nodeData.id}</div>
+      \${nodeData.description ? \`<div class="node-description">\${nodeData.description}</div>\` : ''}
+      \${tagsHtml}
+
+      <div class="section-title">Stats</div>
+      <div class="stat-row"><span>Lines</span><span class="stat-val">\${nodeData.lineCount ?? '\u2013'}</span></div>
+      <div class="stat-row"><span>Imports</span><span class="stat-val">\${imports.length}</span></div>
+      <div class="stat-row"><span>Imported by</span><span class="stat-val">\${importedBy.length}</span></div>
+      \${calls.length || calledBy.length ? \`
+      <div class="stat-row"><span>Calls</span><span class="stat-val">\${calls.length}</span></div>
+      <div class="stat-row"><span>Called by</span><span class="stat-val">\${calledBy.length}</span></div>\` : ''}
+
+      \${depList(imports, 'dep-import', 'Imports', 'to')}
+      \${depList(importedBy, 'dep-import', 'Imported by', 'from')}
+      \${depList(calls, 'dep-call', 'Calls', 'to')}
+      \${depList(calledBy, 'dep-calledby', 'Called by', 'from')}
+    </div>\`;
+}
+
+// \u2500\u2500\u2500 Focus a node by ID \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function focusNode(nodeId) {
+  const nodeData = allNodes.find(n => n.id === nodeId);
+  if (!nodeData) return;
+
+  // Pan to node
+  const svgEl = document.getElementById('graph-svg');
+  const W = svgEl.clientWidth, H = svgEl.clientHeight;
+
+  const linkObjs = visLinks.map(l => ({
+    ...l,
+    source: allNodes.find(n => n.id === l.from),
+    target: allNodes.find(n => n.id === l.to),
+  })).filter(l => l.source && l.target);
+
+  if (nodeData.x !== undefined) {
+    const currentT = d3.zoomTransform(svg.node());
+    const s = currentT.k; // never change the zoom level, only pan
+    svg.transition().duration(400).call(
+      zoom.transform,
+      d3.zoomIdentity.translate(W / 2 - nodeData.x * s, H / 2 - nodeData.y * s).scale(s)
+    );
+  }
+
+  selectNode(nodeData, linkObjs);
+}
+
+// \u2500\u2500\u2500 Search \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+document.getElementById('search').addEventListener('input', function() {
+  const q = this.value.toLowerCase().trim();
+  if (!q) {
+    d3.selectAll('.node').classed('highlighted dimmed', false);
+    return;
+  }
+
+  const matched = new Set(
+    allNodes
+      .filter(n =>
+        (n.id || '').toLowerCase().includes(q) ||
+        (n.name || '').toLowerCase().includes(q) ||
+        (n.description || '').toLowerCase().includes(q) ||
+        (n.tags || []).some(t => t.toLowerCase().includes(q))
+      )
+      .map(n => n.id)
+  );
+
+  d3.selectAll('.node')
+    .classed('highlighted', d => matched.has(d.id))
+    .classed('dimmed', d => !matched.has(d.id));
+});
+
+// \u2500\u2500\u2500 Preflight \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+document.getElementById('task-submit').addEventListener('click', async () => {
+  const task = document.getElementById('task-input').value.trim();
+  if (!task) return;
+
+  const btn = document.getElementById('task-submit');
+  btn.textContent = '\u2026';
+
+  try {
+    const r = await fetch(\`\${API_BASE}/preflight?task=\${encodeURIComponent(task)}\`);
+    const data = await r.json();
+    const fileIds = new Set((data.files || []).map(f => f.nodeId || f.id));
+    preflight = fileIds;
+
+    // Highlight preflight results
+    d3.selectAll('.node')
+      .classed('highlighted', d => fileIds.has(d.id))
+      .classed('dimmed', d => !fileIds.has(d.id));
+
+    d3.selectAll('.link')
+      .classed('dimmed', l => {
+        const from = l.source?.id ?? l.from;
+        const to = l.target?.id ?? l.to;
+        return !fileIds.has(from) && !fileIds.has(to);
+      });
+
+    // Show results in sidebar
+    const panel = document.getElementById('node-info');
+    const saved = data.tokensSaved ?? 0;
+    panel.innerHTML = \`
+      <div class="node-detail">
+        <div class="node-kind-badge kind-file">Preflight</div>
+        <div class="node-name">"\${task}"</div>
+        <div class="node-description">
+          \${fileIds.size} files \xB7 ~\${saved} tokens saved vs reading everything
+        </div>
+        <div class="section-title">Relevant Files</div>
+        <div class="dep-list">
+          \${(data.files || []).map(f => \`
+            <div class="dep-item dep-import" onclick="focusNode('\${f.nodeId || f.id}')">
+              <span class="dep-label">\${f.reason || ''} \xB7 \${Math.round((f.score||0)*100)}% match</span>
+              \${(f.nodeId || f.id).split('/').pop()}
+            </div>
+          \`).join('')}
+        </div>
+      </div>\`;
+  } catch (e) {
+    console.error('Preflight failed:', e);
+  }
+
+  btn.textContent = '\u2192';
+});
+
+document.getElementById('task-input').addEventListener('keydown', e => {
+  if (e.key === 'Enter') document.getElementById('task-submit').click();
+});
+
+// \u2500\u2500\u2500 Toggle controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function makeToggle(btnId, getter, setter) {
+  document.getElementById(btnId).addEventListener('click', function() {
+    setter(!getter());
+    this.classList.toggle('active', getter());
+    rebuildVis();
+  });
+}
+
+makeToggle('toggle-imports', () => showImports, v => showImports = v);
+makeToggle('toggle-calls',   () => showCalls,   v => showCalls = v);
+makeToggle('toggle-fns',     () => showFunctions, v => showFunctions = v);
+
+document.getElementById('toggle-clusters').addEventListener('click', function() {
+  showClusters = !showClusters;
+  this.classList.toggle('active', showClusters);
+  if (showClusters) {
+    renderHulls(groupByDirectory(visNodes.filter(n => n.kind === 'file')));
+  } else {
+    gHulls.selectAll('*').remove();
+  }
+});
+
+document.getElementById('zoom-files').addEventListener('click', function() {
+  zoomLevel = 'files';
+  this.classList.add('active');
+  document.getElementById('zoom-symbols').classList.remove('active');
+  rebuildVis();
+});
+
+document.getElementById('zoom-symbols').addEventListener('click', function() {
+  zoomLevel = 'symbols';
+  this.classList.add('active');
+  document.getElementById('zoom-files').classList.remove('active');
+  rebuildVis();
+});
+
+function rebuildVis() {
+  if (simulation) simulation.stop();
+  document.getElementById('loading').style.display = 'flex';
+  document.getElementById('loading-text').textContent = 'Rebuilding\u2026';
+  setTimeout(() => buildVis(), 50);
+}
+
+// \u2500\u2500\u2500 Zoom controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+document.getElementById('btn-zoom-in').onclick = () =>
+  svg.transition().duration(300).call(zoom.scaleBy, 1.5);
+document.getElementById('btn-zoom-out').onclick = () =>
+  svg.transition().duration(300).call(zoom.scaleBy, 0.667);
+document.getElementById('btn-zoom-fit').onclick = fitToScreen;
+
+function fitToScreen() {
+  if (!visNodes.length) return;
+  const svgEl = document.getElementById('graph-svg');
+  const W = svgEl.clientWidth, H = svgEl.clientHeight;
+
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const n of visNodes) {
+    if (n.x < minX) minX = n.x;
+    if (n.y < minY) minY = n.y;
+    if (n.x > maxX) maxX = n.x;
+    if (n.y > maxY) maxY = n.y;
+  }
+
+  const pad = 60;
+  const scale = Math.min(
+    (W - pad * 2) / (maxX - minX || 1),
+    (H - pad * 2) / (maxY - minY || 1),
+    2.5
+  );
+  const tx = W / 2 - ((minX + maxX) / 2) * scale;
+  const ty = H / 2 - ((minY + maxY) / 2) * scale;
+
+  svg.transition().duration(700).call(
+    zoom.transform,
+    d3.zoomIdentity.translate(tx, ty).scale(scale)
+  );
+}
+
+// \u2500\u2500\u2500 Minimap \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+let minimapSvg;
+
+function initMinimap() {
+  minimapSvg = d3.select('#minimap-svg');
+}
+
+function updateMinimapNodes(nodes) {
+  if (!minimapSvg || !nodes.length) return;
+  const mm = document.getElementById('minimap');
+  const W = mm.clientWidth, H = mm.clientHeight;
+
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const n of nodes) {
+    if (n.x < minX) minX = n.x;
+    if (n.y < minY) minY = n.y;
+    if (n.x > maxX) maxX = n.x;
+    if (n.y > maxY) maxY = n.y;
+  }
+
+  const scaleX = (W - 8) / (maxX - minX || 1);
+  const scaleY = (H - 8) / (maxY - minY || 1);
+  const scale = Math.min(scaleX, scaleY);
+
+  minimapSvg.selectAll('.mm-node').remove();
+
+  minimapSvg.selectAll('.mm-node')
+    .data(nodes.filter(n => n.kind === 'file'))
+    .join('circle')
+    .attr('class', 'mm-node')
+    .attr('cx', d => 4 + (d.x - minX) * scale)
+    .attr('cy', d => 4 + (d.y - minY) * scale)
+    .attr('r', 2)
+    .attr('fill', d => COLORS[d.kind] ?? '#7c6af7')
+    .attr('opacity', 0.7);
+}
+
+function updateMinimap(transform, svgW, svgH) {
+  if (!minimapSvg) return;
+  const mm = document.getElementById('minimap');
+  const W = mm.clientWidth, H = mm.clientHeight;
+
+  // Minimap scale is roughly W/svgW * transform.k
+  const vW = (W / transform.k) * (W / svgW);
+  const vH = (H / transform.k) * (H / svgH);
+  const vX = -transform.x * (W / svgW) / transform.k;
+  const vY = -transform.y * (H / svgH) / transform.k;
+
+  d3.select('#minimap-viewport')
+    .attr('x', Math.max(0, vX))
+    .attr('y', Math.max(0, vY))
+    .attr('width', Math.min(W, vW))
+    .attr('height', Math.min(H, vH));
+}
+
+// \u2500\u2500\u2500 Tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function showTooltip(event, d) {
+  const tip = document.getElementById('tooltip');
+  const name = (d.id || '').split('/').pop() || d.name || d.id;
+  const dir  = (d.id || '').split('/').slice(0, -1).join('/');
+  tip.querySelector('.tip-name').textContent = name;
+  tip.querySelector('.tip-path').textContent = dir ? dir + '/' : '';
+  tip.querySelector('.tip-desc').textContent = d.description || 'No description yet \u2014 run mycelium init to summarize';
+  tip.style.display = 'block';
+  moveTooltip(event);
+}
+
+function moveTooltip(event) {
+  const tip = document.getElementById('tooltip');
+  const sidebar = document.getElementById('sidebar');
+  const x = event.clientX - sidebar.clientWidth;
+  const y = event.clientY - 44; // topbar height
+  tip.style.left = (x + 12) + 'px';
+  tip.style.top = (y - tip.offsetHeight - 8) + 'px';
+}
+
+function hideTooltip() {
+  document.getElementById('tooltip').style.display = 'none';
+}
+
+// \u2500\u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function nodeRadius(d) {
+  if (d.kind === 'file') return Math.max(5, Math.min(14, Math.sqrt((d.lineCount || 100) / 10)));
+  if (d.kind === 'function') return 4;
+  if (d.kind === 'class') return 6;
+  return 5;
+}
+
+function shortName(name) {
+  if (!name) return '';
+  const parts = name.split('/');
+  const last = parts[parts.length - 1];
+  return last.length > 20 ? last.slice(0, 18) + '\u2026' : last;
+}
+
+function groupByDirectory(fileNodes) {
+  const groups = {};
+  for (const n of fileNodes) {
+    const parts = (n.id || '').split('/');
+    const dir = parts.length > 1 ? parts.slice(0, -1).join('/') : '.';
+    if (!groups[dir]) groups[dir] = [];
+    groups[dir].push(n);
+  }
+  return groups;
+}
+
+function setLoading(text) {
+  document.getElementById('loading').style.display = 'flex';
+  document.getElementById('loading-text').textContent = text;
+}
+
+function hideLoading() {
+  document.getElementById('loading').style.display = 'none';
+}
+
+// \u2500\u2500\u2500 Init \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+initMinimap();
+loadGraph();
+
+function updateDirLegend() {
+  const el = document.getElementById('dir-legend');
+  if (!el) return;
+  el.innerHTML = Array.from(dirColorMap.entries()).map(([dir, color]) =>
+    \`<div class="legend-item"><div class="legend-dot" style="background:\${color}"></div>\${dir}/</div>\`
+  ).join('');
+}
+</script>
+</body>
+</html>
+`;
 var RateLimiter = class {
   constructor() {
     this.counts = /* @__PURE__ */ new Map();
@@ -16233,25 +17538,32 @@ var McpServer = class {
     const candidates = [
       path4.join(__dirname, "..", "..", "ui", "index.html"),
       path4.join(__dirname, "..", "ui", "index.html"),
-      path4.join(process.cwd(), "ui", "index.html")
+      path4.join(__dirname, "ui", "index.html"),
+      path4.join(process.cwd(), "ui", "index.html"),
+      // npm global install location
+      path4.join(path4.dirname(process.execPath), "..", "lib", "node_modules", "@kopikocappu", "mycelium", "ui", "index.html")
     ];
     for (const candidate of candidates) {
       if (fs3.existsSync(candidate)) {
         try {
           const html = fs3.readFileSync(candidate, "utf-8");
-          const injected = html.replace(
+          const injected2 = html.replace(
             "const API_BASE = '';",
             `const API_BASE = 'http://localhost:${this.config.mcp.port}';`
           );
           res.writeHead(200, { "Content-Type": "text/html" });
-          res.end(injected);
+          res.end(injected2);
           return;
         } catch {
         }
       }
     }
     res.writeHead(200, { "Content-Type": "text/html" });
-    res.end('<html><head><title>Mycelium</title></head><body style="background:#0e0e12;color:#e0e0f0;font-family:monospace;padding:40px"><h2>Mycelium Graph Viewer</h2><p>Graph viewer file not found. Make sure ui/index.html exists next to dist/.</p><p>API endpoints: /graph /status /preflight /search /history</p></body></html>');
+    const injected = EMBEDDED_VIEWER.replace(
+      "const API_BASE = '';",
+      `const API_BASE = 'http://localhost:${this.config.mcp.port}';`
+    );
+    res.end(injected);
   }
   handleDebug(res) {
     const stats = this.store.getStats();
@@ -16501,19 +17813,29 @@ function detectSourceGlobs(workspaceRoot) {
     try {
       const raw = fs5.readFileSync(tsconfigPath, "utf8").replace(/\/\/[^\n]*/g, "").replace(/\/\*[\s\S]*?\*\//g, "");
       const tsconfig = JSON.parse(raw);
-      if (Array.isArray(tsconfig.include) && tsconfig.include.length > 0) {
-        const globs = tsconfig.include.map((p) => {
+      const hasExtends = !!tsconfig.extends;
+      if (!hasExtends && Array.isArray(tsconfig.include) && tsconfig.include.length > 0) {
+        const globs = tsconfig.include.filter((p) => {
+          const hasLeadingDir = /^[^*]+\//.test(p);
+          const isFileGlob = p.startsWith("*") && !hasLeadingDir;
+          const isDeclarationFile = p.endsWith(".d.ts");
+          return !isFileGlob && !isDeclarationFile;
+        }).map((p) => {
           const base = p.replace(/\/\*\*\/\*(\.\w+)?$/, "").replace(/\/\*(\.\w+)?$/, "").replace(/\.$/, "").replace(/\*$/, "").replace(/\/$/, "");
           return base ? `${base}/**/*.${exts}` : `**/*.${exts}`;
         }).filter((v, i, a) => a.indexOf(v) === i);
-        console.log(`[GraphMem] Detected source globs from tsconfig.include:`, globs);
-        return globs;
-      }
-      const rootDir = tsconfig.compilerOptions?.rootDir;
-      if (rootDir && rootDir !== ".") {
-        const glob2 = `${rootDir.replace(/^\.\//, "")}/**/*.${exts}`;
-        console.log(`[GraphMem] Detected source glob from tsconfig.rootDir:`, glob2);
-        return [glob2];
+        if (globs.length > 0) {
+          console.log(`[GraphMem] Detected source globs from tsconfig.include:`, globs);
+          return globs;
+        }
+      }
+      if (!hasExtends) {
+        const rootDir = tsconfig.compilerOptions?.rootDir;
+        if (rootDir && rootDir !== ".") {
+          const glob2 = `${rootDir.replace(/^\.\//, "")}/**/*.${exts}`;
+          console.log(`[GraphMem] Detected source glob from tsconfig.rootDir:`, glob2);
+          return [glob2];
+        }
       }
     } catch (e) {
       console.warn("[GraphMem] Could not parse tsconfig.json, falling back to directory detection");