@monoes/monomindcli 1.6.9 → 1.7.0

package/dist/src/ui/dashboard.html

@@ -1457,18 +1457,12 @@
     width: 200px; flex-shrink: 0; border-right: 1px solid var(--border);
     padding: 16px 14px; overflow-y: auto; background: rgba(0,0,0,0.12);
   }
-  #po-knowledge-canvas-wrap {
-    flex: 1; min-width: 0; border-right: 1px solid var(--border);
-    display: flex; flex-direction: column; position: relative;
-  }
-  #po-knowledge-canvas-controls {
-    padding: 5px 12px; border-bottom: 1px solid var(--border);
-    display: flex; align-items: center; gap: 14px; flex-shrink: 0;
-    font-size: 9px; color: var(--muted); letter-spacing: 0.07em;
-  }
-  #po-knowledge-canvas-controls label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
-  #po-kg2-canvas { flex: 1; width: 100%; display: block; }
-  #po-knowledge-main { flex: 1; min-width: 240px; overflow-y: auto; padding: 16px 20px; }
+
+  .gf-tool-tab { background: none; border: 1px solid transparent; color: var(--muted); font-family: 'Azeret Mono', monospace; font-size: 8px; letter-spacing: 0.1em; padding: 3px 10px; cursor: pointer; border-radius: 2px; transition: all 0.15s; }
+  .gf-tool-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
+  .gf-tool-tab.active { color: var(--teal); border-color: rgba(0,229,200,0.3); background: rgba(0,229,200,0.06); }
+  .gf-view { display: none; }
+  .gf-view.active { display: flex; }
 
   /* Sidebar stat blocks */
   .kg-stat-group { margin-bottom: 18px; }
@@ -1550,7 +1544,7 @@
       <button class="po-tab" onclick="switchPalaceTab('routing')">ROUTING</button>
       <button class="po-tab" onclick="switchPalaceTab('swarm')">SWARM</button>
       <button class="po-tab" onclick="switchPalaceTab('graph')">AGENT GRAPH</button>
-      <button class="po-tab" onclick="switchPalaceTab('knowledge')">CODE GRAPH</button>
+      <button class="po-tab" onclick="switchPalaceTab('knowledge')">GRAPHIFY</button>
     </div>
     <div id="po-stats"></div>
   </div>
@@ -1686,15 +1680,71 @@
       <div id="po-knowledge-sidebar">
         <div id="po-knowledge-stats"><div style="color:var(--muted);font-size:10px;">Loading…</div></div>
       </div>
-      <div id="po-knowledge-canvas-wrap">
-        <div id="po-knowledge-canvas-controls">
-          <span id="po-kg2-info">—</span>
-          <label><input type="checkbox" id="po-kg2-labels" checked onchange="kgCodeGraph.toggleLabels(this.checked)"> LABELS</label>
+      <div id="po-knowledge-main-area" style="flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;">
+        <div id="po-graphify-toolbar" style="display:flex;align-items:center;gap:8px;padding:6px 14px;border-bottom:1px solid var(--border);flex-shrink:0;">
+          <button class="gf-tool-tab active" data-gftab="graph" onclick="switchGraphifyView('graph')">GRAPH</button>
+          <button class="gf-tool-tab" data-gftab="query" onclick="switchGraphifyView('query')">QUERY</button>
+          <button class="gf-tool-tab" data-gftab="explain" onclick="switchGraphifyView('explain')">EXPLAIN</button>
+          <button class="gf-tool-tab" data-gftab="path" onclick="switchGraphifyView('path')">PATH</button>
+          <button class="gf-tool-tab" data-gftab="benchmark" onclick="switchGraphifyView('benchmark')">BENCHMARK</button>
+          <button class="gf-tool-tab" data-gftab="report" onclick="switchGraphifyView('report')">REPORT</button>
+          <span style="flex:1;"></span>
+          <span id="gf-watch-indicator" style="font-size:8px;letter-spacing:0.06em;"></span>
+          <button id="gf-watch-btn" class="kg-action-btn" style="width:auto;padding:3px 10px;margin:0;" onclick="toggleGraphifyWatch()">WATCH</button>
+        </div>
+
+        <!-- GRAPH sub-view (embedded graphify interactive HTML) -->
+        <div id="gf-view-graph" class="gf-view active" style="flex:1;display:flex;flex-direction:column;">
+          <iframe id="gf-graph-iframe" style="flex:1;width:100%;border:none;background:#0f0f1a;"></iframe>
+        </div>
+
+        <!-- QUERY sub-view -->
+        <div id="gf-view-query" class="gf-view" style="flex:1;overflow-y:auto;padding:16px 20px;">
+          <div style="display:flex;gap:8px;align-items:center;margin-bottom:12px;">
+            <input id="gf-query-input" type="text" placeholder="Ask about the codebase…" style="flex:1;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:3px;padding:7px 10px;color:var(--text);font-family:'Azeret Mono',monospace;font-size:11px;outline:none;" onkeydown="if(event.key==='Enter')runGraphifyQuery()">
+            <select id="gf-query-mode" style="background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:3px;padding:5px 8px;color:var(--text);font-family:'Azeret Mono',monospace;font-size:9px;">
+              <option value="dfs">DFS</option>
+              <option value="bfs">BFS</option>
+            </select>
+            <input id="gf-query-budget" type="number" value="2000" min="100" max="50000" step="500" style="width:70px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:3px;padding:5px 6px;color:var(--text);font-family:'Azeret Mono',monospace;font-size:9px;" title="Token budget">
+            <button class="kg-action-btn" style="width:auto;padding:5px 14px;margin:0;" onclick="runGraphifyQuery()">ASK</button>
+          </div>
+          <div id="gf-query-result" style="font-size:10px;color:var(--dim);line-height:1.7;white-space:pre-wrap;word-break:break-word;"></div>
+        </div>
+
+        <!-- EXPLAIN sub-view -->
+        <div id="gf-view-explain" class="gf-view" style="flex:1;overflow-y:auto;padding:16px 20px;">
+          <div style="display:flex;gap:8px;align-items:center;margin-bottom:12px;">
+            <input id="gf-explain-input" type="text" placeholder="Node name (e.g. UserService, auth.ts)…" style="flex:1;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:3px;padding:7px 10px;color:var(--text);font-family:'Azeret Mono',monospace;font-size:11px;outline:none;" onkeydown="if(event.key==='Enter')runGraphifyExplain()">
+            <button class="kg-action-btn" style="width:auto;padding:5px 14px;margin:0;" onclick="runGraphifyExplain()">EXPLAIN</button>
+          </div>
+          <div id="gf-explain-result" style="font-size:10px;color:var(--dim);line-height:1.7;white-space:pre-wrap;word-break:break-word;"></div>
+        </div>
+
+        <!-- PATH sub-view -->
+        <div id="gf-view-path" class="gf-view" style="flex:1;overflow-y:auto;padding:16px 20px;">
+          <div style="display:flex;gap:8px;align-items:center;margin-bottom:12px;">
+            <input id="gf-path-from" type="text" placeholder="From node…" style="flex:1;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:3px;padding:7px 10px;color:var(--text);font-family:'Azeret Mono',monospace;font-size:11px;outline:none;">
+            <span style="color:var(--muted);font-size:10px;">→</span>
+            <input id="gf-path-to" type="text" placeholder="To node…" style="flex:1;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:3px;padding:7px 10px;color:var(--text);font-family:'Azeret Mono',monospace;font-size:11px;outline:none;" onkeydown="if(event.key==='Enter')runGraphifyPath()">
+            <button class="kg-action-btn" style="width:auto;padding:5px 14px;margin:0;" onclick="runGraphifyPath()">FIND PATH</button>
+          </div>
+          <div id="gf-path-result" style="font-size:10px;color:var(--dim);line-height:1.7;white-space:pre-wrap;word-break:break-word;"></div>
+        </div>
+
+        <!-- BENCHMARK sub-view -->
+        <div id="gf-view-benchmark" class="gf-view" style="flex:1;overflow-y:auto;padding:16px 20px;">
+          <div style="display:flex;gap:8px;align-items:center;margin-bottom:12px;">
+            <button class="kg-action-btn" style="width:auto;padding:5px 14px;margin:0;" onclick="runGraphifyBenchmark()">RUN BENCHMARK</button>
+            <span id="gf-bench-status" style="font-size:9px;color:var(--muted);"></span>
+          </div>
+          <div id="gf-benchmark-result" style="font-size:10px;color:var(--dim);line-height:1.7;white-space:pre-wrap;word-break:break-word;"></div>
+        </div>
+
+        <!-- REPORT sub-view -->
+        <div id="gf-view-report" class="gf-view" style="flex:1;overflow-y:auto;padding:16px 20px;">
+          <div id="po-knowledge-body"><div style="color:var(--muted);font-size:10px;padding:16px;">Loading…</div></div>
         </div>
-        <canvas id="po-kg2-canvas"></canvas>
-      </div>
-      <div id="po-knowledge-main">
-        <div id="po-knowledge-body"><div style="color:var(--muted);font-size:10px;padding:16px;">Loading…</div></div>
       </div>
     </div>
   </div>
@@ -3530,7 +3580,7 @@ window.switchPalaceTab = function(tab) {
   const paneIds = { drawers: 'po-drawers-tab', sessions: 'po-sessions-tab', chunks: 'po-chunks-tab', routing: 'po-routing-tab', swarm: 'po-swarm-tab', graph: 'po-graph-tab', knowledge: 'po-knowledge-tab' };
   const pane = document.getElementById(paneIds[tab]);
   if (pane) pane.classList.add('active');
-  if (tab !== 'knowledge') kgCodeGraph.stop();
+  if (tab !== 'knowledge' && typeof kgCodeGraph !== 'undefined' && kgCodeGraph.stop) kgCodeGraph.stop();
   if (palaceData) renderPalaceTab(tab);
 };
 
@@ -3628,7 +3678,7 @@ function renderPalaceTab(tab) {
   else if (tab === 'routing') renderHooks(appData || {});
   else if (tab === 'swarm') renderPalaceSwarm();
   else if (tab === 'graph') { renderAgentGraph(palaceData.graph || { nodes: [], edges: [] }); }
-  else if (tab === 'knowledge') { renderPalaceKnowledge(); renderPalaceCodeGraph(); }
+  else if (tab === 'knowledge') { renderPalaceKnowledge(); loadGraphifyIframe(); refreshWatchStatus(); }
 }
 
 let _allChunks = [];
@@ -4312,28 +4362,15 @@ async function renderPalaceKnowledge() {
   }
 }
 
-let _codeGraphPending = false;
-let _codeGraphLoaded = false;
-async function renderPalaceCodeGraph(force = false) {
-  if (_codeGraphPending) return;
-  if (_codeGraphLoaded && !force) return;
-  _codeGraphPending = true;
+let _graphifyIframeLoaded = false;
+function loadGraphifyIframe(force) {
+  const iframe = document.getElementById('gf-graph-iframe');
+  if (!iframe) return;
   const dir = selectedProjectDir || '';
-  let gd;
-  try {
-    const r = await fetch(`/api/graphify-graph${dir ? '?dir=' + encodeURIComponent(dir) : ''}`);
-    gd = r.ok ? await r.json() : null;
-  } catch { gd = null; }
-  _codeGraphPending = false;
-  if ((selectedProjectDir || '') !== dir) return;
-  if (palaceCurrentTab !== 'knowledge') return;
-  const info = document.getElementById('po-kg2-info');
-  if (!gd || !gd.nodes || !gd.nodes.length) {
-    if (info) info.textContent = gd && gd.tooLarge ? 'Graph too large to display' : 'No graph data';
-    return;
-  }
-  kgCodeGraph.init();
-  kgCodeGraph.render(gd, () => { _codeGraphLoaded = true; });
+  const src = `/api/graphify-html${dir ? '?dir=' + encodeURIComponent(dir) : ''}`;
+  if (!force && _graphifyIframeLoaded && iframe.src && iframe.src.includes('/api/graphify-html')) return;
+  iframe.src = src;
+  _graphifyIframeLoaded = true;
 }
 
 window.triggerPalaceGraphBuild = async function() {
@@ -4350,7 +4387,7 @@ window.triggerPalaceGraphBuild = async function() {
       try {
         const r = await fetch(`/api/graphify-report${dir ? '?dir=' + encodeURIComponent(dir) : ''}`);
         const d = await r.json();
-        if (d.stats || d.exists) { clearInterval(poll); renderPalaceKnowledge(); _codeGraphLoaded = false; kgCodeGraph.reset(); renderPalaceCodeGraph(); }
+        if (d.stats || d.exists) { clearInterval(poll); renderPalaceKnowledge(); _graphifyIframeLoaded = false; loadGraphifyIframe(true); }
         else if (attempts >= 36) { clearInterval(poll); if (bodyEl) bodyEl.innerHTML = '<div style="color:var(--amber);font-size:10px;">Build timed out — check server logs.</div>'; }
       } catch {}
     }, 5000);
@@ -4360,6 +4397,143 @@ window.triggerPalaceGraphBuild = async function() {
   }
 };
 
+// ═══════════════════════════════════════════════════════════════════
+// GRAPHIFY INTERACTIVE VIEWS
+// ═══════════════════════════════════════════════════════════════════
+let _currentGraphifyView = 'graph';
+
+window.switchGraphifyView = function(view) {
+  _currentGraphifyView = view;
+  document.querySelectorAll('.gf-tool-tab').forEach(b => {
+    b.classList.toggle('active', b.getAttribute('data-gftab') === view);
+  });
+  document.querySelectorAll('.gf-view').forEach(v => v.classList.remove('active'));
+  const pane = document.getElementById('gf-view-' + view);
+  if (pane) pane.classList.add('active');
+  if (view === 'graph') { loadGraphifyIframe(); }
+  if (view === 'report') { renderPalaceKnowledge(); }
+};
+
+window.runGraphifyQuery = async function() {
+  const input = document.getElementById('gf-query-input');
+  const mode = document.getElementById('gf-query-mode');
+  const budget = document.getElementById('gf-query-budget');
+  const result = document.getElementById('gf-query-result');
+  const q = (input && input.value || '').trim();
+  if (!q) { if (result) result.textContent = 'Type a question first.'; return; }
+  if (result) result.innerHTML = '<span style="color:var(--teal);">Querying…</span>';
+  const dir = selectedProjectDir || '';
+  try {
+    const params = new URLSearchParams({ q, mode: mode.value, budget: budget.value });
+    if (dir) params.set('dir', dir);
+    const r = await fetch('/api/graphify-query?' + params);
+    const d = await r.json();
+    if (d.error) { result.innerHTML = `<span style="color:var(--red);">${escHtml(d.error)}</span>`; return; }
+    result.innerHTML = `<div class="kg-card kg-card-wide" style="margin-bottom:10px;">
+      <div class="kg-card-title"><span class="kg-card-title-icon">🔍</span>QUERY RESULT</div>
+      <div class="kg-card-body">${escHtml(d.output || d.result || JSON.stringify(d, null, 2))}</div>
+    </div>`;
+  } catch (e) { result.innerHTML = `<span style="color:var(--red);">${escHtml(e.message)}</span>`; }
+};
+
+window.runGraphifyExplain = async function() {
+  const input = document.getElementById('gf-explain-input');
+  const result = document.getElementById('gf-explain-result');
+  const node = (input && input.value || '').trim();
+  if (!node) { if (result) result.textContent = 'Enter a node name first.'; return; }
+  if (result) result.innerHTML = '<span style="color:var(--teal);">Explaining…</span>';
+  const dir = selectedProjectDir || '';
+  try {
+    const params = new URLSearchParams({ node });
+    if (dir) params.set('dir', dir);
+    const r = await fetch('/api/graphify-explain?' + params);
+    const d = await r.json();
+    if (d.error) { result.innerHTML = `<span style="color:var(--red);">${escHtml(d.error)}</span>`; return; }
+    result.innerHTML = `<div class="kg-card kg-card-wide" style="margin-bottom:10px;">
+      <div class="kg-card-title"><span class="kg-card-title-icon">📖</span>EXPLAIN: ${escHtml(node.toUpperCase())}</div>
+      <div class="kg-card-body">${escHtml(d.output || d.result || JSON.stringify(d, null, 2))}</div>
+    </div>`;
+  } catch (e) { result.innerHTML = `<span style="color:var(--red);">${escHtml(e.message)}</span>`; }
+};
+
+window.runGraphifyPath = async function() {
+  const fromEl = document.getElementById('gf-path-from');
+  const toEl = document.getElementById('gf-path-to');
+  const result = document.getElementById('gf-path-result');
+  const from = (fromEl && fromEl.value || '').trim();
+  const to = (toEl && toEl.value || '').trim();
+  if (!from || !to) { if (result) result.textContent = 'Enter both source and target nodes.'; return; }
+  if (result) result.innerHTML = '<span style="color:var(--teal);">Finding shortest path…</span>';
+  const dir = selectedProjectDir || '';
+  try {
+    const params = new URLSearchParams({ from, to });
+    if (dir) params.set('dir', dir);
+    const r = await fetch('/api/graphify-path?' + params);
+    const d = await r.json();
+    if (d.error) { result.innerHTML = `<span style="color:var(--red);">${escHtml(d.error)}</span>`; return; }
+    result.innerHTML = `<div class="kg-card kg-card-wide" style="margin-bottom:10px;">
+      <div class="kg-card-title"><span class="kg-card-title-icon">🛤</span>PATH: ${escHtml(from)} → ${escHtml(to)}</div>
+      <div class="kg-card-body">${escHtml(d.output || d.result || JSON.stringify(d, null, 2))}</div>
+    </div>`;
+  } catch (e) { result.innerHTML = `<span style="color:var(--red);">${escHtml(e.message)}</span>`; }
+};
+
+window.runGraphifyBenchmark = async function() {
+  const result = document.getElementById('gf-benchmark-result');
+  const status = document.getElementById('gf-bench-status');
+  if (result) result.innerHTML = '<span style="color:var(--teal);">Running benchmark…</span>';
+  if (status) status.textContent = 'Running…';
+  const dir = selectedProjectDir || '';
+  try {
+    const params = dir ? '?dir=' + encodeURIComponent(dir) : '';
+    const r = await fetch('/api/graphify-benchmark' + params);
+    const d = await r.json();
+    if (status) status.textContent = '';
+    if (d.error) { result.innerHTML = `<span style="color:var(--red);">${escHtml(d.error)}</span>`; return; }
+    result.innerHTML = `<div class="kg-card kg-card-wide">
+      <div class="kg-card-title"><span class="kg-card-title-icon">⚡</span>BENCHMARK RESULTS</div>
+      <div class="kg-card-body">${escHtml(d.output || d.result || JSON.stringify(d, null, 2))}</div>
+    </div>`;
+  } catch (e) { if (status) status.textContent = ''; result.innerHTML = `<span style="color:var(--red);">${escHtml(e.message)}</span>`; }
+};
+
+window.toggleGraphifyWatch = async function() {
+  const btn = document.getElementById('gf-watch-btn');
+  const indicator = document.getElementById('gf-watch-indicator');
+  const dir = selectedProjectDir || '';
+  const params = dir ? '?dir=' + encodeURIComponent(dir) : '';
+  try {
+    const r = await fetch('/api/graphify-watch-toggle' + params, { method: 'POST' });
+    const d = await r.json();
+    updateWatchIndicator(d);
+  } catch (e) {
+    if (indicator) indicator.innerHTML = `<span style="color:var(--red);">Error</span>`;
+  }
+};
+
+async function refreshWatchStatus() {
+  const dir = selectedProjectDir || '';
+  const params = dir ? '?dir=' + encodeURIComponent(dir) : '';
+  try {
+    const r = await fetch('/api/graphify-watch-status' + params);
+    const d = await r.json();
+    updateWatchIndicator(d);
+  } catch {}
+}
+
+function updateWatchIndicator(d) {
+  const indicator = document.getElementById('gf-watch-indicator');
+  const btn = document.getElementById('gf-watch-btn');
+  if (!indicator) return;
+  if (d.running) {
+    indicator.innerHTML = '<span style="color:var(--green);">● WATCHING</span>';
+    if (btn) btn.textContent = 'STOP';
+  } else {
+    indicator.innerHTML = '<span style="color:var(--muted);">○ IDLE</span>';
+    if (btn) btn.textContent = 'WATCH';
+  }
+}
+
 let _palaceSelectedSession = null;
 
 function renderPalaceSessions() {

package/dist/src/ui/server.mjs

@@ -594,6 +594,23 @@ export async function startServer({ port = 4242, projectDir, openBrowser = true
       return;
     }
 
+    // ------------------------------------------------------- GET /api/graphify-html
+    if (req.method === 'GET' && url === '/api/graphify-html') {
+      try {
+        const qs = new URL(req.url, 'http://localhost').searchParams;
+        const dir = qs.get('dir') || projectDir;
+        const d = path.resolve(dir || process.cwd());
+        const htmlPath = path.join(d, '.monomind', 'graph', 'graph.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8', 'Access-Control-Allow-Origin': '*', 'Cache-Control': 'no-cache' });
+        res.end(html);
+      } catch (err) {
+        res.writeHead(404, { 'Content-Type': 'text/html' });
+        res.end('<html><body style="background:#0f0f1a;color:#888;font-family:monospace;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;"><div style="text-align:center;"><h3 style="color:#4E79A7;">No Graph Built Yet</h3><p>Run <code style="color:#00E5C8;">graphify update .</code> or click BUILD in the sidebar.</p></div></body></html>');
+      }
+      return;
+    }
+
     // ------------------------------------------------------- GET /api/graphify-report
     if (req.method === 'GET' && url === '/api/graphify-report') {
       try {
@@ -693,25 +710,193 @@ export async function startServer({ port = 4242, projectDir, openBrowser = true
         const qs = new URL(req.url, 'http://localhost').searchParams;
         const dir = qs.get('dir') || projectDir;
         const d = path.resolve(dir || process.cwd());
-        const outputDir = path.join(d, '.monomind', 'graph');
 
-        // Start build in background, respond immediately so UI can show progress state
         res.writeHead(202, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
-        res.end(JSON.stringify({ status: 'building', dir: d, outputDir }));
+        res.end(JSON.stringify({ status: 'building', dir: d }));
 
-        (async () => {
-          try {
-            const { buildGraph } = await import('@monoes/graph');
-            const r = await buildGraph(d, { codeOnly: true, outputDir });
-            console.log(`[graph] built for ${d}: ${r.filesProcessed} files`);
-            // Run enrichment after build
-            try {
-              const { enrichGraph } = await import('file://' + new URL('../graph/enrich.mjs', import.meta.url).pathname);
-              const er = await enrichGraph(d, { graphDir: outputDir });
-              console.log(`[graph] enriched: ${er.metrics.enrichedNodes}/${er.metrics.totalNodes} nodes, PageRank: ${er.metrics.pageRankComputed}`);
-            } catch (ee) { console.error('[graph] enrichment failed:', ee.message); }
-          } catch (e) { console.error(`[graph] build failed for ${d}:`, e.message); }
-        })();
+        // Build via graphify CLI in background
+        const { spawn: sp } = await import('child_process');
+        const child = sp('graphify', ['update', d], { stdio: 'ignore', detached: true, cwd: d });
+        child.unref();
+        console.log(`[graph] build started for ${d} via graphify update`);
+      } catch (err) {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: err.message }));
+      }
+      return;
+    }
+
+    // -------------------------------------------------- GET /api/graphify-query
+    if (req.method === 'GET' && url === '/api/graphify-query') {
+      try {
+        const qs = new URL(req.url, 'http://localhost').searchParams;
+        const dir = qs.get('dir') || projectDir;
+        const q = qs.get('q') || '';
+        const mode = qs.get('mode') === 'dfs' ? '--dfs' : '';
+        const budget = qs.get('budget') || '2000';
+        const d = path.resolve(dir || process.cwd());
+        const graphPath = path.join(d, '.monomind', 'graph', 'graph.json');
+        const legacyPath = path.join(d, 'graphify-out', 'graph.json');
+        const gp = fs.existsSync(graphPath) ? graphPath : (fs.existsSync(legacyPath) ? legacyPath : null);
+
+        if (!q) {
+          res.writeHead(400, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ error: 'Missing ?q= parameter' }));
+          return;
+        }
+
+        const { execSync: ex } = await import('child_process');
+        const args = ['query', JSON.stringify(q), '--budget', budget];
+        if (mode) args.push(mode);
+        if (gp) args.push('--graph', gp);
+        const out = ex(`graphify ${args.join(' ')}`, { encoding: 'utf8', cwd: d, timeout: 30000, stdio: ['pipe', 'pipe', 'pipe'] });
+        res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
+        res.end(JSON.stringify({ success: true, query: q, result: out }));
+      } catch (err) {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: err.message }));
+      }
+      return;
+    }
+
+    // -------------------------------------------------- GET /api/graphify-explain
+    if (req.method === 'GET' && url === '/api/graphify-explain') {
+      try {
+        const qs = new URL(req.url, 'http://localhost').searchParams;
+        const dir = qs.get('dir') || projectDir;
+        const node = qs.get('node') || '';
+        const d = path.resolve(dir || process.cwd());
+        const graphPath = path.join(d, '.monomind', 'graph', 'graph.json');
+        const legacyPath = path.join(d, 'graphify-out', 'graph.json');
+        const gp = fs.existsSync(graphPath) ? graphPath : (fs.existsSync(legacyPath) ? legacyPath : null);
+
+        if (!node) {
+          res.writeHead(400, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ error: 'Missing ?node= parameter' }));
+          return;
+        }
+
+        const { execSync: ex } = await import('child_process');
+        const args = ['explain', JSON.stringify(node)];
+        if (gp) args.push('--graph', gp);
+        const out = ex(`graphify ${args.join(' ')}`, { encoding: 'utf8', cwd: d, timeout: 15000, stdio: ['pipe', 'pipe', 'pipe'] });
+        res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
+        res.end(JSON.stringify({ success: true, node, explanation: out }));
+      } catch (err) {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: err.message }));
+      }
+      return;
+    }
+
+    // -------------------------------------------------- GET /api/graphify-path
+    if (req.method === 'GET' && url === '/api/graphify-path') {
+      try {
+        const qs = new URL(req.url, 'http://localhost').searchParams;
+        const dir = qs.get('dir') || projectDir;
+        const from = qs.get('from') || '';
+        const to = qs.get('to') || '';
+        const d = path.resolve(dir || process.cwd());
+        const graphPath = path.join(d, '.monomind', 'graph', 'graph.json');
+        const legacyPath = path.join(d, 'graphify-out', 'graph.json');
+        const gp = fs.existsSync(graphPath) ? graphPath : (fs.existsSync(legacyPath) ? legacyPath : null);
+
+        if (!from || !to) {
+          res.writeHead(400, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ error: 'Missing ?from= and ?to= parameters' }));
+          return;
+        }
+
+        const { execSync: ex } = await import('child_process');
+        const args = ['path', JSON.stringify(from), JSON.stringify(to)];
+        if (gp) args.push('--graph', gp);
+        const out = ex(`graphify ${args.join(' ')}`, { encoding: 'utf8', cwd: d, timeout: 15000, stdio: ['pipe', 'pipe', 'pipe'] });
+        res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
+        res.end(JSON.stringify({ success: true, from, to, path: out }));
+      } catch (err) {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: err.message }));
+      }
+      return;
+    }
+
+    // -------------------------------------------------- GET /api/graphify-watch-status
+    if (req.method === 'GET' && url === '/api/graphify-watch-status') {
+      try {
+        const qs = new URL(req.url, 'http://localhost').searchParams;
+        const dir = qs.get('dir') || projectDir;
+        const d = path.resolve(dir || process.cwd());
+        const pidPath = path.join(d, '.monomind', 'graph', 'watch.pid');
+        let running = false, pid = null;
+        try {
+          pid = parseInt(fs.readFileSync(pidPath, 'utf-8').trim(), 10);
+          process.kill(pid, 0);
+          running = true;
+        } catch {}
+        res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
+        res.end(JSON.stringify({ running, pid }));
+      } catch (err) {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: err.message }));
+      }
+      return;
+    }
+
+    // -------------------------------------------------- POST /api/graphify-watch-toggle
+    if (req.method === 'POST' && url === '/api/graphify-watch-toggle') {
+      try {
+        const qs = new URL(req.url, 'http://localhost').searchParams;
+        const dir = qs.get('dir') || projectDir;
+        const d = path.resolve(dir || process.cwd());
+        const pidPath = path.join(d, '.monomind', 'graph', 'watch.pid');
+        let wasRunning = false;
+        try {
+          const pid = parseInt(fs.readFileSync(pidPath, 'utf-8').trim(), 10);
+          process.kill(pid, 0);
+          wasRunning = true;
+          process.kill(pid, 'SIGTERM');
+          try { fs.unlinkSync(pidPath); } catch {}
+        } catch {}
+
+        if (wasRunning) {
+          res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
+          res.end(JSON.stringify({ running: false, action: 'stopped' }));
+        } else {
+          const { spawn: sp } = await import('child_process');
+          const child = sp('graphify', ['watch', d], { stdio: 'ignore', detached: true, cwd: d });
+          child.unref();
+          try { fs.mkdirSync(path.join(d, '.monomind', 'graph'), { recursive: true }); } catch {}
+          try { fs.writeFileSync(pidPath, String(child.pid)); } catch {}
+          res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
+          res.end(JSON.stringify({ running: true, pid: child.pid, action: 'started' }));
+        }
+      } catch (err) {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: err.message }));
+      }
+      return;
+    }
+
+    // -------------------------------------------------- GET /api/graphify-benchmark
+    if (req.method === 'GET' && url === '/api/graphify-benchmark') {
+      try {
+        const qs = new URL(req.url, 'http://localhost').searchParams;
+        const dir = qs.get('dir') || projectDir;
+        const d = path.resolve(dir || process.cwd());
+        const graphPath = path.join(d, '.monomind', 'graph', 'graph.json');
+        const legacyPath = path.join(d, 'graphify-out', 'graph.json');
+        const gp = fs.existsSync(graphPath) ? graphPath : (fs.existsSync(legacyPath) ? legacyPath : null);
+
+        if (!gp) {
+          res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
+          res.end(JSON.stringify({ available: false }));
+          return;
+        }
+
+        const { execSync: ex } = await import('child_process');
+        const out = ex(`graphify benchmark ${gp}`, { encoding: 'utf8', cwd: d, timeout: 30000, stdio: ['pipe', 'pipe', 'pipe'] });
+        res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
+        res.end(JSON.stringify({ available: true, result: out }));
       } catch (err) {
         res.writeHead(500, { 'Content-Type': 'application/json' });
         res.end(JSON.stringify({ error: err.message }));