engramx 1.0.1 → 2.0.1

package/dist/server-6AOI7NQP.js

@@ -0,0 +1,1370 @@
+import {
+  ContextCache,
+  getContextCache
+} from "./chunk-CIQQ5Y3S.js";
+import {
+  getComponentStatus,
+  summarizeHookLog
+} from "./chunk-533LR4I7.js";
+import {
+  readHookLog
+} from "./chunk-KL6NSPVA.js";
+import {
+  getStore,
+  learn,
+  query,
+  stats
+} from "./chunk-SJT7VS2G.js";
+import "./chunk-PEH54LYC.js";
+
+// src/server/http.ts
+import { createServer } from "http";
+import { writeFileSync, unlinkSync, mkdirSync, existsSync, statSync } from "fs";
+import { join } from "path";
+
+// src/intelligence/token-tracker.ts
+var COST_PER_MILLION_TOKENS = 3;
+function getCumulativeStats(store) {
+  const totalSessions = store.getStatNum("total_sessions");
+  const totalNaiveTokens = store.getStatNum("total_naive_tokens");
+  const totalGraphTokens = store.getStatNum("total_graph_tokens");
+  const totalSaved = store.getStatNum("total_tokens_saved");
+  const avgReduction = totalNaiveTokens > 0 ? Math.round(totalSaved / totalNaiveTokens * 1e3) / 10 : 0;
+  const estimatedCostSaved = Math.round(totalSaved / 1e6 * COST_PER_MILLION_TOKENS * 100) / 100;
+  return { totalSessions, totalNaiveTokens, totalGraphTokens, totalSaved, avgReduction, estimatedCostSaved };
+}
+
+// src/server/ui-components.ts
+function buildComponents() {
+  return `
+// Colors pulled from CSS custom properties via getComputedStyle would
+// hit a FOUC at load \u2014 inline them to match the CSS :root values.
+const COLOR_ACCENT = "#10b981";
+const COLOR_ACCENT_DIM = "#047857";
+const COLOR_BLUE = "#3b82f6";
+const COLOR_PURPLE = "#a855f7";
+const COLOR_DIM = "#71717a";
+const COLOR_BG_HOVER = "#1a1a1c";
+
+/**
+ * Donut chart showing hit rate as a ratio (0-1).
+ * Renders a SVG ring with the percentage centered.
+ */
+function renderDonut(ratio) {
+  const safe = Math.max(0, Math.min(1, Number(ratio) || 0));
+  const r = 60;
+  const circumference = 2 * Math.PI * r;
+  const dashArray = safe * circumference;
+  const gapArray = circumference - dashArray;
+  const pct = (safe * 100).toFixed(1);
+
+  return '<svg viewBox="0 0 160 160" width="100%" style="max-width: 200px; display: block; margin: 0 auto;">' +
+    '<circle cx="80" cy="80" r="' + r + '" fill="none" stroke="' + COLOR_BG_HOVER + '" stroke-width="14" />' +
+    '<circle cx="80" cy="80" r="' + r + '" fill="none" stroke="' + COLOR_ACCENT + '" stroke-width="14" ' +
+    'stroke-dasharray="' + dashArray.toFixed(2) + ' ' + gapArray.toFixed(2) + '" ' +
+    'stroke-linecap="round" transform="rotate(-90 80 80)" />' +
+    '<text x="80" y="80" text-anchor="middle" dominant-baseline="central" ' +
+    'fill="' + COLOR_ACCENT + '" font-size="24" font-weight="700" ' +
+    'font-family="SF Mono, Monaco, monospace">' + pct + '%</text>' +
+    '<text x="80" y="105" text-anchor="middle" fill="' + COLOR_DIM + '" font-size="10" ' +
+    'font-family="SF Mono, Monaco, monospace" letter-spacing="1">HIT RATE</text>' +
+    '</svg>';
+}
+
+/**
+ * Horizontal stacked bar showing decision distribution.
+ * Input: { deny: number, allow: number, passthrough: number }
+ */
+function renderDecisionBars(byDecision) {
+  const d = Number(byDecision.deny) || 0;
+  const a = Number(byDecision.allow) || 0;
+  const p = Number(byDecision.passthrough) || 0;
+  const total = d + a + p;
+
+  if (total === 0) {
+    return '<div style="color: ' + COLOR_DIM + '; font-family: SF Mono, Monaco, monospace; font-size: 12px; text-align: center; padding: 24px;">No events yet</div>';
+  }
+
+  const dPct = (d / total) * 100;
+  const aPct = (a / total) * 100;
+  const pPct = (p / total) * 100;
+
+  return '<div style="margin-bottom: 16px;">' +
+    '<div style="display: flex; height: 32px; border-radius: 4px; overflow: hidden; background: ' + COLOR_BG_HOVER + ';">' +
+    '<div style="background: ' + COLOR_ACCENT + '; width: ' + dPct + '%;" title="deny"></div>' +
+    '<div style="background: ' + COLOR_BLUE + '; width: ' + aPct + '%;" title="allow"></div>' +
+    '<div style="background: ' + COLOR_DIM + '; width: ' + pPct + '%;" title="passthrough"></div>' +
+    '</div></div>' +
+    '<div style="display: flex; justify-content: space-between; font-family: SF Mono, Monaco, monospace; font-size: 11px;">' +
+    '<div><span style="display:inline-block; width:10px; height:10px; background:' + COLOR_ACCENT + '; border-radius:2px; vertical-align: middle; margin-right: 6px;"></span>deny <span style="color: ' + COLOR_DIM + '">' + d + '</span></div>' +
+    '<div><span style="display:inline-block; width:10px; height:10px; background:' + COLOR_BLUE + '; border-radius:2px; vertical-align: middle; margin-right: 6px;"></span>allow <span style="color: ' + COLOR_DIM + '">' + a + '</span></div>' +
+    '<div><span style="display:inline-block; width:10px; height:10px; background:' + COLOR_DIM + '; border-radius:2px; vertical-align: middle; margin-right: 6px;"></span>passthrough <span style="color: ' + COLOR_DIM + '">' + p + '</span></div>' +
+    '</div>';
+}
+
+/**
+ * Sparkline SVG path from numeric array. Handles single-point gracefully.
+ */
+function renderSparkline(values) {
+  const nums = (values || []).map(Number).filter((n) => !isNaN(n));
+  if (nums.length === 0) {
+    return '<div style="color: ' + COLOR_DIM + '; font-family: SF Mono, Monaco, monospace; font-size: 12px; text-align: center; padding: 24px;">No data yet</div>';
+  }
+
+  const width = 800;
+  const height = 120;
+  const padding = 10;
+  const max = Math.max(...nums, 1);
+  const min = 0;
+  const range = max - min;
+
+  const innerW = width - padding * 2;
+  const innerH = height - padding * 2;
+
+  const points = nums.length === 1
+    ? [[width / 2, height / 2]]
+    : nums.map((n, i) => {
+        const x = padding + (i / (nums.length - 1)) * innerW;
+        const y = padding + innerH - ((n - min) / range) * innerH;
+        return [x, y];
+      });
+
+  const pathD = nums.length === 1
+    ? 'M' + points[0][0] + ' ' + points[0][1] + ' l 0 0'
+    : 'M' + points.map((p) => p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' L ');
+
+  // Fill area under curve
+  const fillD = nums.length === 1
+    ? ''
+    : pathD + ' L ' + points[points.length - 1][0].toFixed(1) + ' ' + (height - padding) +
+      ' L ' + points[0][0].toFixed(1) + ' ' + (height - padding) + ' Z';
+
+  return '<svg viewBox="0 0 ' + width + ' ' + height + '" width="100%" style="height: 120px;">' +
+    (fillD ? '<path d="' + fillD + '" fill="' + COLOR_ACCENT + '" fill-opacity="0.1" />' : '') +
+    '<path d="' + pathD + '" stroke="' + COLOR_ACCENT + '" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />' +
+    points.map((p) => '<circle cx="' + p[0].toFixed(1) + '" cy="' + p[1].toFixed(1) + '" r="3" fill="' + COLOR_ACCENT + '" />').join('') +
+    '</svg>';
+}
+
+/**
+ * Cache performance block. Input shape from /api/cache/stats.
+ * All values are numbers from our own DB \u2014 no escape needed.
+ */
+function renderCacheStats(stats) {
+  const hitRate = Number(stats.hitRate) || 0;
+  const total = (Number(stats.totalHits) || 0) + (Number(stats.totalMisses) || 0);
+  const queryEntries = Number(stats.queryEntries) || 0;
+  const patternEntries = Number(stats.patternEntries) || 0;
+  const hotFiles = Number(stats.hotFileCount) || 0;
+
+  return '<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-family: SF Mono, Monaco, monospace; font-size: 12px;">' +
+    '<div><div style="color: ' + COLOR_DIM + '; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px;">Hit Rate</div>' +
+    '<div style="font-size: 20px; font-weight: 600; color: ' + COLOR_ACCENT + ';">' + (hitRate * 100).toFixed(1) + '%</div></div>' +
+    '<div><div style="color: ' + COLOR_DIM + '; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px;">Total Ops</div>' +
+    '<div style="font-size: 20px; font-weight: 600;">' + total + '</div></div>' +
+    '<div><div style="color: ' + COLOR_DIM + '; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px;">Query Entries</div>' +
+    '<div style="font-size: 20px; font-weight: 600;">' + queryEntries + '</div></div>' +
+    '<div><div style="color: ' + COLOR_DIM + '; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px;">Pattern Entries</div>' +
+    '<div style="font-size: 20px; font-weight: 600;">' + patternEntries + '</div></div>' +
+    '<div style="grid-column: span 2;"><div style="color: ' + COLOR_DIM + '; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px;">Hot Files Warmed</div>' +
+    '<div style="font-size: 20px; font-weight: 600;">' + hotFiles + '</div></div>' +
+    '</div>';
+}
+
+/**
+ * Graph stats block. Input from /stats endpoint.
+ * All values numeric from our DB.
+ */
+function renderGraphStats(stats) {
+  // The /stats API returns { nodes, edges, extractedPct, inferredPct, ambiguousPct, ... }
+  const nodes = Number(stats.nodes ?? stats.nodeCount) || 0;
+  const edges = Number(stats.edges ?? stats.edgeCount) || 0;
+  const extracted = Number(stats.extractedPct) || 0;
+  const inferred = Number(stats.inferredPct) || 0;
+  const ambiguous = Number(stats.ambiguousPct) || 0;
+
+  return '<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-family: SF Mono, Monaco, monospace; font-size: 12px;">' +
+    '<div><div style="color: ' + COLOR_DIM + '; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px;">Nodes</div>' +
+    '<div style="font-size: 20px; font-weight: 600; color: ' + COLOR_BLUE + ';">' + nodes + '</div></div>' +
+    '<div><div style="color: ' + COLOR_DIM + '; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px;">Edges</div>' +
+    '<div style="font-size: 20px; font-weight: 600; color: ' + COLOR_PURPLE + ';">' + edges + '</div></div>' +
+    '<div style="grid-column: span 2; margin-top: 8px;">' +
+    '<div style="color: ' + COLOR_DIM + '; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px;">Confidence Distribution</div>' +
+    '<div style="display: flex; gap: 8px; font-size: 11px;">' +
+    '<span>extracted: <b style="color: ' + COLOR_ACCENT + '">' + extracted + '%</b></span>' +
+    '<span>inferred: <b style="color: ' + COLOR_BLUE + '">' + inferred + '%</b></span>' +
+    '<span>ambiguous: <b style="color: ' + COLOR_PURPLE + '">' + ambiguous + '%</b></span>' +
+    '</div></div>' +
+    '</div>';
+}
+`;
+}
+
+// src/server/ui-graph.ts
+function buildGraphScript() {
+  return `
+// \u2500\u2500\u2500 Node color by kind (match the graph schema) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+const NODE_COLORS = {
+  file: "#3b82f6",
+  function: "#10b981",
+  class: "#a855f7",
+  concept: "#f59e0b",
+  mistake: "#ef4444",
+  decision: "#eab308",
+  default: "#71717a",
+};
+
+/**
+ * Main entry point. Given a canvas element and node/edge data from
+ * /api/graph/nodes and /api/graph/god-nodes, starts the simulation.
+ */
+function renderGraph(canvas, nodes, godNodes) {
+  const ctx = canvas.getContext("2d");
+  const rect = canvas.getBoundingClientRect();
+  canvas.width = rect.width * window.devicePixelRatio;
+  canvas.height = rect.height * window.devicePixelRatio;
+  ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+
+  const W = rect.width;
+  const H = rect.height;
+
+  // God node IDs (for emphasis). godNodes shape: [{node, degree}]
+  const godIds = new Set((godNodes || []).map((g) => g.node?.id).filter(Boolean));
+
+  // Build simulation nodes with random starting positions near center
+  const sim = (nodes || []).slice(0, 300).map((n) => ({
+    id: n.id,
+    label: n.label || n.id,
+    kind: n.kind || "default",
+    isGod: godIds.has(n.id),
+    x: W / 2 + (Math.random() - 0.5) * 400,
+    y: H / 2 + (Math.random() - 0.5) * 400,
+    vx: 0, vy: 0,
+  }));
+
+  if (sim.length === 0) {
+    ctx.fillStyle = "#71717a";
+    ctx.font = "13px SF Mono, Monaco, monospace";
+    ctx.textAlign = "center";
+    ctx.fillText("No graph data yet", W / 2, H / 2);
+    return;
+  }
+
+  // Viewport transform (pan + zoom)
+  let viewX = 0, viewY = 0, zoom = 1;
+  let draggingView = false, dragStartX = 0, dragStartY = 0;
+  let selectedId = null;
+
+  // \u2500\u2500\u2500 Physics step \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 REPULSION = 1200;
+  const SPRING_K = 0.02;
+  const SPRING_LENGTH = 80;
+  const DAMPING = 0.85;
+  const CENTER_GRAVITY = 0.003;
+
+  function step() {
+    // Pairwise repulsion (O(n^2) but fine up to ~500 nodes)
+    for (let i = 0; i < sim.length; i++) {
+      const a = sim[i];
+      for (let j = i + 1; j < sim.length; j++) {
+        const b = sim[j];
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        const dist2 = dx * dx + dy * dy + 1;
+        const force = REPULSION / dist2;
+        const dist = Math.sqrt(dist2);
+        const fx = (dx / dist) * force;
+        const fy = (dy / dist) * force;
+        a.vx -= fx; a.vy -= fy;
+        b.vx += fx; b.vy += fy;
+      }
+    }
+
+    // Gravity toward viewport center \u2014 keeps disconnected components visible
+    for (const n of sim) {
+      n.vx += (W / 2 - n.x) * CENTER_GRAVITY;
+      n.vy += (H / 2 - n.y) * CENTER_GRAVITY;
+    }
+
+    // Apply velocity with damping
+    for (const n of sim) {
+      n.vx *= DAMPING;
+      n.vy *= DAMPING;
+      n.x += n.vx;
+      n.y += n.vy;
+    }
+  }
+
+  // \u2500\u2500\u2500 Render \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 draw() {
+    ctx.clearRect(0, 0, W, H);
+    ctx.save();
+    ctx.translate(viewX, viewY);
+    ctx.scale(zoom, zoom);
+
+    // Draw nodes
+    for (const n of sim) {
+      const radius = n.isGod ? 7 : 4;
+      const color = NODE_COLORS[n.kind] || NODE_COLORS.default;
+
+      ctx.beginPath();
+      ctx.arc(n.x, n.y, radius, 0, Math.PI * 2);
+      ctx.fillStyle = color;
+      ctx.globalAlpha = n.id === selectedId ? 1.0 : (n.isGod ? 0.95 : 0.75);
+      ctx.fill();
+
+      if (n.id === selectedId) {
+        ctx.strokeStyle = "#ffffff";
+        ctx.lineWidth = 2 / zoom;
+        ctx.stroke();
+      }
+    }
+
+    // Labels for god nodes and selected
+    ctx.globalAlpha = 1.0;
+    ctx.fillStyle = "#e4e4e7";
+    ctx.font = (11 / zoom) + "px SF Mono, Monaco, monospace";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "top";
+
+    for (const n of sim) {
+      if (n.isGod || n.id === selectedId) {
+        const label = n.label.length > 30 ? n.label.slice(0, 27) + "..." : n.label;
+        ctx.fillText(label, n.x, n.y + 10);
+      }
+    }
+
+    ctx.restore();
+  }
+
+  // \u2500\u2500\u2500 Animation loop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 frames = 0;
+  let running = true;
+
+  function tick() {
+    if (!running) return;
+    if (frames < 300) step();  // run physics until settled
+    draw();
+    frames++;
+    requestAnimationFrame(tick);
+  }
+  tick();
+
+  // \u2500\u2500\u2500 Interaction: pan \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  canvas.addEventListener("mousedown", (e) => {
+    const x = e.offsetX;
+    const y = e.offsetY;
+
+    // Hit test for node click (world coords)
+    const worldX = (x - viewX) / zoom;
+    const worldY = (y - viewY) / zoom;
+    let clicked = null;
+    for (const n of sim) {
+      const dx = n.x - worldX;
+      const dy = n.y - worldY;
+      const radius = n.isGod ? 7 : 4;
+      if (dx * dx + dy * dy < (radius + 3) * (radius + 3)) {
+        clicked = n;
+        break;
+      }
+    }
+
+    if (clicked) {
+      selectedId = clicked.id;
+      const info = document.getElementById("graph-info");
+      if (info) {
+        info.textContent = clicked.kind + " \xB7 " + clicked.label + (clicked.isGod ? " (god node)" : "");
+      }
+    } else {
+      draggingView = true;
+      dragStartX = x - viewX;
+      dragStartY = y - viewY;
+    }
+  });
+
+  canvas.addEventListener("mousemove", (e) => {
+    if (draggingView) {
+      viewX = e.offsetX - dragStartX;
+      viewY = e.offsetY - dragStartY;
+    }
+  });
+
+  canvas.addEventListener("mouseup", () => { draggingView = false; });
+  canvas.addEventListener("mouseleave", () => { draggingView = false; });
+
+  // \u2500\u2500\u2500 Interaction: zoom \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  canvas.addEventListener("wheel", (e) => {
+    e.preventDefault();
+    const zoomDelta = e.deltaY > 0 ? 0.9 : 1.1;
+    const newZoom = Math.max(0.2, Math.min(3, zoom * zoomDelta));
+
+    // Anchor zoom on cursor
+    const mx = e.offsetX;
+    const my = e.offsetY;
+    viewX = mx - ((mx - viewX) * newZoom) / zoom;
+    viewY = my - ((my - viewY) * newZoom) / zoom;
+    zoom = newZoom;
+  }, { passive: false });
+}
+`;
+}
+
+// src/server/ui.ts
+var CSS = `
+:root {
+  --bg: #0a0a0b;
+  --bg-panel: #121214;
+  --bg-hover: #1a1a1c;
+  --border: #2a2a2e;
+  --text: #e4e4e7;
+  --text-dim: #71717a;
+  --accent: #10b981;
+  --accent-dim: #047857;
+  --warn: #f59e0b;
+  --error: #ef4444;
+  --blue: #3b82f6;
+  --purple: #a855f7;
+  --mono: "SF Mono", "Monaco", "Menlo", monospace;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  min-height: 100vh;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 32px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-panel);
+}
+
+header .brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--mono);
+  font-weight: 600;
+  font-size: 16px;
+}
+
+header .brand .diamond { color: var(--accent); font-size: 18px; }
+header .brand .version { color: var(--text-dim); font-size: 12px; font-weight: 400; }
+
+header .status {
+  display: flex; align-items: center; gap: 16px;
+  font-family: var(--mono); font-size: 12px; color: var(--text-dim);
+}
+
+header .status .dot {
+  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
+  background: var(--accent); margin-right: 6px;
+}
+
+nav {
+  display: flex;
+  padding: 0 32px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-panel);
+}
+
+nav button {
+  background: none; border: none; color: var(--text-dim);
+  padding: 14px 20px; cursor: pointer;
+  font-size: 13px; font-family: var(--mono);
+  border-bottom: 2px solid transparent;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+nav button:hover { color: var(--text); }
+
+nav button.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+main { padding: 32px; max-width: 1400px; margin: 0 auto; }
+
+.tab { display: none; }
+.tab.active { display: block; }
+
+.grid { display: grid; gap: 16px; margin-bottom: 24px; }
+.grid-2 { grid-template-columns: repeat(2, 1fr); }
+.grid-3 { grid-template-columns: repeat(3, 1fr); }
+.grid-4 { grid-template-columns: repeat(4, 1fr); }
+
+@media (max-width: 900px) {
+  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
+  .grid-2 { grid-template-columns: 1fr; }
+}
+
+.card {
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.card h3 {
+  font-size: 11px; font-weight: 500;
+  text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--text-dim); margin-bottom: 12px;
+  font-family: var(--mono);
+}
+
+.card h2 { font-size: 14px; font-weight: 600; margin-bottom: 16px; }
+
+.big-number {
+  font-size: 32px; font-weight: 700;
+  font-family: var(--mono); color: var(--text); line-height: 1;
+}
+
+.big-number.accent { color: var(--accent); }
+
+.subtext {
+  font-size: 12px; color: var(--text-dim);
+  margin-top: 6px; font-family: var(--mono);
+}
+
+table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
+
+th, td {
+  text-align: left; padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+th {
+  color: var(--text-dim); font-weight: 500;
+  text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em;
+}
+
+tr:hover td { background: var(--bg-hover); }
+
+td.num { text-align: right; color: var(--accent); }
+td.dim { color: var(--text-dim); }
+
+.activity-row {
+  display: flex; align-items: center;
+  padding: 8px 0; border-bottom: 1px solid var(--border);
+  font-family: var(--mono); font-size: 12px; gap: 10px;
+}
+
+.activity-row .badge {
+  padding: 2px 6px; border-radius: 3px;
+  font-size: 10px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.05em;
+}
+
+.badge.deny { background: var(--accent-dim); color: var(--accent); }
+.badge.allow { background: #1e3a8a; color: var(--blue); }
+.badge.passthrough { background: var(--bg-hover); color: var(--text-dim); }
+
+.empty-state {
+  text-align: center; padding: 48px 24px;
+  color: var(--text-dim); font-family: var(--mono); font-size: 13px;
+}
+
+.provider-card {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 14px 16px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  margin-bottom: 8px;
+  font-family: var(--mono); font-size: 12px;
+}
+
+.provider-card .name { color: var(--text); font-weight: 500; }
+
+.provider-card .indicator {
+  display: inline-block; width: 8px; height: 8px;
+  border-radius: 50%; margin-right: 8px;
+}
+
+.provider-card .indicator.ok { background: var(--accent); }
+.provider-card .indicator.down { background: var(--error); }
+
+#graph-canvas {
+  width: 100%; height: 600px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  cursor: grab;
+}
+
+#graph-canvas:active { cursor: grabbing; }
+`;
+var HTML_HEAD = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; connect-src 'self'; img-src 'self' data:;" />
+  <title>engram dashboard</title>
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%230a0a0b'/%3E%3Ctext x='50' y='62' font-size='56' text-anchor='middle' fill='%2310b981' font-family='Menlo,monospace'%3E%E2%97%86%3C/text%3E%3C/svg%3E" />
+  <style>${CSS}</style>
+</head>`;
+var HTML_BODY = `
+<body>
+  <header>
+    <div class="brand">
+      <span class="diamond">&#9670;</span>
+      <span>engram</span>
+      <span class="version" id="version">loading...</span>
+    </div>
+    <div class="status">
+      <span><span class="dot"></span>connected</span>
+      <span id="uptime">&mdash;</span>
+    </div>
+  </header>
+
+  <nav>
+    <button class="tab-btn active" data-tab="overview">Overview</button>
+    <button class="tab-btn" data-tab="sessions">Sessions</button>
+    <button class="tab-btn" data-tab="activity">Activity</button>
+    <button class="tab-btn" data-tab="files">Files</button>
+    <button class="tab-btn" data-tab="graph">Graph</button>
+    <button class="tab-btn" data-tab="providers">Providers</button>
+  </nav>
+
+  <main>
+    <section class="tab active" id="tab-overview">
+      <div class="grid grid-4">
+        <div class="card"><h3>Tokens Saved</h3><div class="big-number accent" id="ov-tokens">&mdash;</div><div class="subtext" id="ov-tokens-sub">cumulative</div></div>
+        <div class="card"><h3>Cost Saved</h3><div class="big-number" id="ov-cost">&mdash;</div><div class="subtext">at $3/M tokens</div></div>
+        <div class="card"><h3>Hit Rate</h3><div class="big-number" id="ov-hitrate">&mdash;</div><div class="subtext" id="ov-hitrate-sub">hook interceptions</div></div>
+        <div class="card"><h3>Sessions</h3><div class="big-number" id="ov-sessions">&mdash;</div><div class="subtext">tracked</div></div>
+      </div>
+      <div class="grid grid-2">
+        <div class="card"><h2>Decision Distribution</h2><div id="ov-decisions-chart"></div></div>
+        <div class="card"><h2>Hit Rate</h2><div id="ov-donut"></div></div>
+      </div>
+      <div class="grid grid-2">
+        <div class="card"><h2>Cache Performance</h2><div id="ov-cache"></div></div>
+        <div class="card"><h2>Graph Health</h2><div id="ov-graph-stats"></div></div>
+      </div>
+    </section>
+
+    <section class="tab" id="tab-sessions">
+      <div class="card"><h2>Token Savings Over Time</h2><div id="sessions-sparkline"></div></div>
+      <div class="card" style="margin-top: 16px;"><h2>Session Breakdown</h2><div id="sessions-table"></div></div>
+    </section>
+
+    <section class="tab" id="tab-activity">
+      <div class="grid grid-2">
+        <div class="card">
+          <h2>Live Hook Events</h2>
+          <div id="activity-stream" style="max-height: 500px; overflow-y: auto;">
+            <div class="empty-state">Listening for events...</div>
+          </div>
+        </div>
+        <div class="card"><h2>Per-Tool Breakdown</h2><div id="activity-tools"></div></div>
+      </div>
+    </section>
+
+    <section class="tab" id="tab-files">
+      <div class="card"><h2>Most-Intercepted Files</h2><div id="files-table"></div></div>
+    </section>
+
+    <section class="tab" id="tab-graph">
+      <div class="card">
+        <h2>Knowledge Graph Visualization</h2>
+        <div class="subtext" style="margin-bottom: 12px;">Drag to pan &middot; Scroll to zoom &middot; Click nodes for details</div>
+        <canvas id="graph-canvas"></canvas>
+        <div id="graph-info" class="subtext" style="margin-top: 10px;"></div>
+      </div>
+    </section>
+
+    <section class="tab" id="tab-providers">
+      <div class="card"><h2>Component Health</h2><div id="providers-list"></div></div>
+    </section>
+  </main>
+
+  <script>
+  __APP_JS__
+  </script>
+</body>
+</html>
+`;
+var APP_JS = `
+// \u2500\u2500\u2500 HTML escape (single source of truth for XSS defense) \u2500\u2500\u2500\u2500\u2500
+function esc(s) {
+  if (s === null || s === undefined) return "";
+  return String(s)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+function setText(id, value) {
+  const el = document.getElementById(id);
+  if (el) el.textContent = value;
+}
+
+// \u2500\u2500\u2500 Tab navigation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 tabs = document.querySelectorAll(".tab-btn");
+const panels = document.querySelectorAll(".tab");
+
+tabs.forEach((btn) => {
+  btn.addEventListener("click", () => {
+    const target = btn.dataset.tab;
+    tabs.forEach((b) => b.classList.toggle("active", b === btn));
+    panels.forEach((p) => p.classList.toggle("active", p.id === "tab-" + target));
+    if (target === "graph") loadGraph();
+    if (target === "sessions") loadSessions();
+    if (target === "files") loadFiles();
+    if (target === "providers") loadProviders();
+    if (target === "activity") loadActivity();
+  });
+});
+
+// \u2500\u2500\u2500 API 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
+async function api(path) {
+  try {
+    const r = await fetch(path);
+    if (!r.ok) return null;
+    return await r.json();
+  } catch { return null; }
+}
+
+function formatNumber(n) {
+  if (n === null || n === undefined) return "\u2014";
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + "K";
+  return String(Math.round(n));
+}
+
+function formatCost(tokens) {
+  return "$" + ((tokens / 1_000_000) * 3).toFixed(2);
+}
+
+function formatPercent(n) { return (n * 100).toFixed(1) + "%"; }
+
+function formatUptime(seconds) {
+  if (seconds < 60) return seconds + "s";
+  if (seconds < 3600) return Math.floor(seconds / 60) + "m";
+  return Math.floor(seconds / 3600) + "h " + Math.floor((seconds % 3600) / 60) + "m";
+}
+
+// \u2500\u2500\u2500 Components library (SVG charts \u2014 data-agnostic) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+__COMPONENTS__
+
+// \u2500\u2500\u2500 Graph canvas module \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+__GRAPH__
+
+// \u2500\u2500\u2500 Tab: Overview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 loadOverview() {
+  const [tokens, summary, cache, graphStats, health] = await Promise.all([
+    api("/api/tokens"),
+    api("/api/hook-log/summary"),
+    api("/api/cache/stats"),
+    api("/stats"),
+    api("/health"),
+  ]);
+
+  if (tokens) {
+    setText("ov-tokens", formatNumber(tokens.totalSaved ?? 0));
+    setText("ov-cost", formatCost(tokens.totalSaved ?? 0));
+    setText("ov-sessions", formatNumber(tokens.totalSessions ?? 0));
+    setText("ov-tokens-sub", (Number(tokens.avgReduction ?? 0).toFixed(1) + "%") + " avg reduction");
+  }
+
+  if (summary) {
+    const d = summary.byDecision ?? {};
+    const total = (d.deny ?? 0) + (d.allow ?? 0) + (d.passthrough ?? 0);
+    const deny = d.deny ?? 0;
+    const hitRate = total > 0 ? deny / total : 0;
+    setText("ov-hitrate", formatPercent(hitRate));
+    setText("ov-hitrate-sub", deny + " / " + total + " intercepted");
+    // Safe: renderDonut/renderDecisionBars output is SVG with numeric values only
+    const donut = document.getElementById("ov-donut");
+    if (donut) donut.innerHTML = renderDonut(hitRate);
+    const bars = document.getElementById("ov-decisions-chart");
+    if (bars) bars.innerHTML = renderDecisionBars(d);
+  }
+
+  if (cache) {
+    const el = document.getElementById("ov-cache");
+    if (el) el.innerHTML = renderCacheStats(cache);
+  }
+
+  if (graphStats) {
+    const el = document.getElementById("ov-graph-stats");
+    if (el) el.innerHTML = renderGraphStats(graphStats);
+  }
+
+  if (health) {
+    setText("version", "v" + health.version);
+    setText("uptime", formatUptime(health.uptime));
+  }
+}
+
+// \u2500\u2500\u2500 Tab: Sessions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 loadSessions() {
+  const tokens = await api("/api/tokens");
+  if (!tokens) return;
+
+  const sparkline = document.getElementById("sessions-sparkline");
+  if (sparkline) sparkline.innerHTML = renderSparkline([tokens.totalSaved ?? 0]);
+
+  // Build table with data from trusted source (our own DB)
+  // Still using esc() for numbers to be defensive about type assumptions
+  const rows = [
+    ["Total Sessions", formatNumber(tokens.totalSessions)],
+    ["Total Naive Tokens", formatNumber(tokens.totalNaiveTokens)],
+    ["Total Graph Tokens", formatNumber(tokens.totalGraphTokens)],
+    ["Total Saved", formatNumber(tokens.totalSaved)],
+    ["Avg Reduction", (Number(tokens.avgReduction ?? 0).toFixed(1) + "%")],
+    ["Estimated Cost Saved", formatCost(tokens.totalSaved ?? 0)],
+  ];
+
+  const html = '<table><thead><tr><th>Metric</th><th style="text-align:right">Value</th></tr></thead><tbody>' +
+    rows.map(([k, v]) => '<tr><td>' + esc(k) + '</td><td class="num">' + esc(v) + '</td></tr>').join('') +
+    '</tbody></table>';
+
+  const table = document.getElementById("sessions-table");
+  if (table) table.innerHTML = html;
+}
+
+// \u2500\u2500\u2500 Tab: Activity (live via SSE) \u2500\u2500\u2500\u2500\u2500\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 sseSource = null;
+
+async function loadActivity() {
+  if (sseSource) return;
+
+  const log = await api("/api/hook-log?limit=20");
+  const streamEl = document.getElementById("activity-stream");
+  if (streamEl) {
+    if (log && log.entries && log.entries.length > 0) {
+      streamEl.innerHTML = log.entries.slice().reverse().map(renderActivityRow).join("");
+    } else {
+      streamEl.innerHTML = '<div class="empty-state">No events yet</div>';
+    }
+  }
+
+  const summary = await api("/api/hook-log/summary");
+  const toolsEl = document.getElementById("activity-tools");
+  if (toolsEl) {
+    toolsEl.innerHTML = renderToolBreakdown((summary && summary.byTool) || {});
+  }
+
+  try {
+    sseSource = new EventSource("/api/sse");
+    sseSource.addEventListener("message", async () => {
+      const fresh = await api("/api/hook-log?limit=20");
+      if (fresh && fresh.entries && streamEl) {
+        streamEl.innerHTML = fresh.entries.slice().reverse().map(renderActivityRow).join("");
+      }
+    });
+  } catch (e) {
+    console.warn("SSE failed", e);
+  }
+}
+
+function renderActivityRow(entry) {
+  const decision = esc(entry.decision || "passthrough");
+  const tool = esc(entry.tool || "?");
+  const path = entry.path || "";
+  const shortPath = path.length > 60 ? "..." + path.slice(-57) : path;
+  return '<div class="activity-row">' +
+    '<span class="badge ' + decision + '">' + decision + '</span>' +
+    '<span style="color: var(--text)">' + tool + '</span>' +
+    '<span style="color: var(--text-dim); flex: 1;">' + esc(shortPath) + '</span>' +
+    '</div>';
+}
+
+function renderToolBreakdown(byTool) {
+  const total = Object.values(byTool).reduce((a, b) => a + b, 0);
+  if (total === 0) return '<div class="empty-state">No tool events yet</div>';
+  return Object.entries(byTool)
+    .sort((a, b) => b[1] - a[1])
+    .map(([tool, count]) => {
+      const pct = ((count / total) * 100).toFixed(1);
+      return '<div style="margin-bottom: 10px;">' +
+        '<div style="display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; margin-bottom: 4px;">' +
+        '<span>' + esc(tool) + '</span><span style="color: var(--accent)">' + count + ' (' + pct + '%)</span></div>' +
+        '<div style="background: var(--bg-hover); height: 6px; border-radius: 3px; overflow: hidden;">' +
+        '<div style="background: var(--accent); height: 100%; width: ' + pct + '%;"></div></div></div>';
+    })
+    .join("");
+}
+
+// \u2500\u2500\u2500 Tab: Files \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 loadFiles() {
+  const heatmap = await api("/api/files/heatmap?limit=30");
+  const tableEl = document.getElementById("files-table");
+  if (!tableEl) return;
+
+  if (!heatmap || heatmap.length === 0) {
+    tableEl.innerHTML = '<div class="empty-state">No file interceptions yet</div>';
+    return;
+  }
+
+  const rows = heatmap.map((f) =>
+    '<tr>' +
+    '<td class="dim">' + esc(f.path) + '</td>' +
+    '<td class="num">' + formatNumber(f.count) + '</td>' +
+    '<td class="num">' + formatNumber(f.tokensSaved) + '</td>' +
+    '</tr>'
+  ).join("");
+
+  tableEl.innerHTML =
+    '<table><thead><tr><th>File</th><th style="text-align:right">Interceptions</th>' +
+    '<th style="text-align:right">Tokens Saved</th></tr></thead><tbody>' + rows + '</tbody></table>';
+}
+
+// \u2500\u2500\u2500 Tab: 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
+let graphLoaded = false;
+
+async function loadGraph() {
+  if (graphLoaded) return;
+  const [nodes, godNodes] = await Promise.all([
+    api("/api/graph/nodes?limit=300"),
+    api("/api/graph/god-nodes"),
+  ]);
+  if (!nodes) return;
+  graphLoaded = true;
+  const canvas = document.getElementById("graph-canvas");
+  if (canvas) renderGraph(canvas, nodes.nodes ?? [], godNodes ?? []);
+  setText("graph-info", (nodes.nodes?.length ?? 0) + " of " + (nodes.total ?? 0) + " nodes shown");
+}
+
+// \u2500\u2500\u2500 Tab: Providers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 loadProviders() {
+  const [health, cache] = await Promise.all([
+    api("/api/providers/health"),
+    api("/api/cache/stats"),
+  ]);
+
+  let html = "";
+  if (health) {
+    const rows = [
+      ["HTTP Server", !!health.httpRunning, health.httpRunning ? "active" : "down"],
+      ["LSP Provider", !!health.lspAvailable, health.lspAvailable ? "active" : "down"],
+      ["AST Provider", !!health.astAvailable, health.astAvailable ? "active" : "down"],
+      ["IDE Integrations", (health.ideCount || 0) > 0, (health.ideCount || 0) + " active"],
+    ];
+    html = rows.map((r) =>
+      '<div class="provider-card">' +
+      '<div><span class="indicator ' + (r[1] ? "ok" : "down") + '"></span>' + esc(r[0]) + '</div>' +
+      '<div style="color: var(--text-dim)">' + esc(r[2]) + '</div>' +
+      '</div>'
+    ).join("");
+  }
+
+  if (cache) {
+    html += '<h3 style="margin-top: 24px; margin-bottom: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-family: var(--mono);">Cache</h3>';
+    html += '<div class="provider-card"><div>Query Cache</div><div style="color: var(--text-dim)">' +
+      cache.queryEntries + ' entries &middot; ' + cache.queryHits + ' hits</div></div>';
+    html += '<div class="provider-card"><div>Pattern Cache</div><div style="color: var(--text-dim)">' +
+      cache.patternEntries + ' entries &middot; ' + cache.patternHits + ' hits</div></div>';
+    html += '<div class="provider-card"><div>Hot Files</div><div style="color: var(--text-dim)">' +
+      cache.hotFileCount + ' warmed</div></div>';
+  }
+
+  const listEl = document.getElementById("providers-list");
+  if (listEl) listEl.innerHTML = html;
+}
+
+// \u2500\u2500\u2500 Initial load \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+loadOverview();
+setInterval(loadOverview, 5000);
+`;
+function buildDashboardHtml() {
+  const fullJs = APP_JS.replace("__COMPONENTS__", buildComponents()).replace("__GRAPH__", buildGraphScript());
+  const body = HTML_BODY.replace("__APP_JS__", fullJs);
+  return HTML_HEAD + body;
+}
+
+// src/server/http.ts
+import { createRequire } from "module";
+var require2 = createRequire(import.meta.url);
+var PKG_VERSION = (() => {
+  for (const p of ["../package.json", "../../package.json"]) {
+    try {
+      return require2(p).version;
+    } catch {
+    }
+  }
+  return "0.0.0";
+})();
+var PROVIDERS = [
+  "structure",
+  "mistakes",
+  "git",
+  "mempalace",
+  "context7",
+  "obsidian"
+];
+function parseUrl(req) {
+  return new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+}
+async function readBody(req) {
+  const chunks = [];
+  for await (const chunk of req) chunks.push(chunk);
+  return Buffer.concat(chunks).toString("utf-8");
+}
+function json(res, status, data) {
+  res.writeHead(status, {
+    "Content-Type": "application/json",
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+    "Access-Control-Allow-Headers": "Authorization, Content-Type"
+  });
+  res.end(JSON.stringify(data));
+}
+function checkAuth(req, res) {
+  const token = process.env.ENGRAM_API_TOKEN;
+  if (!token) return true;
+  const header = req.headers.authorization ?? "";
+  if (header === `Bearer ${token}`) return true;
+  json(res, 401, { error: "Unauthorized" });
+  return false;
+}
+function handleHealth(_req, res, startedAt) {
+  json(res, 200, {
+    ok: true,
+    version: PKG_VERSION,
+    uptime: Math.floor((Date.now() - startedAt) / 1e3)
+  });
+}
+async function handleQuery(req, res, projectRoot) {
+  const url = parseUrl(req);
+  const q = url.searchParams.get("q");
+  if (!q) {
+    json(res, 400, { error: "Missing query parameter 'q'" });
+    return;
+  }
+  const budget = parseInt(url.searchParams.get("budget") ?? "2000", 10);
+  try {
+    const result = await query(projectRoot, q, { tokenBudget: isNaN(budget) ? 2e3 : budget });
+    json(res, 200, {
+      text: result.text,
+      estimatedTokens: result.estimatedTokens,
+      providers: [...PROVIDERS]
+    });
+  } catch (err) {
+    json(res, 500, { error: "Query failed", detail: String(err) });
+  }
+}
+async function handleStats(_req, res, projectRoot) {
+  try {
+    const result = await stats(projectRoot);
+    json(res, 200, result);
+  } catch (err) {
+    json(res, 500, { error: "Stats failed", detail: String(err) });
+  }
+}
+function handleProviders(_req, res) {
+  const list = PROVIDERS.map((name) => ({ name, available: true }));
+  json(res, 200, list);
+}
+async function handleLearn(req, res, projectRoot) {
+  let body;
+  try {
+    body = await readBody(req);
+  } catch {
+    json(res, 400, { error: "Failed to read request body" });
+    return;
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(body);
+  } catch {
+    json(res, 400, { error: "Invalid JSON body" });
+    return;
+  }
+  if (!parsed.content || typeof parsed.content !== "string") {
+    json(res, 400, { error: "Missing 'content' in request body" });
+    return;
+  }
+  try {
+    await learn(projectRoot, parsed.content, parsed.file ?? "http-api");
+    json(res, 201, { ok: true });
+  } catch (err) {
+    json(res, 500, { error: "Learn failed", detail: String(err) });
+  }
+}
+async function handleHookLog(req, res, projectRoot) {
+  try {
+    const url = parseUrl(req);
+    const limit = parseInt(url.searchParams.get("limit") ?? "100", 10);
+    const offset = parseInt(url.searchParams.get("offset") ?? "0", 10);
+    const entries = readHookLog(projectRoot);
+    const paginated = entries.slice(offset, offset + limit);
+    json(res, 200, { entries: paginated, total: entries.length });
+  } catch (err) {
+    json(res, 500, { error: "Hook log read failed", detail: String(err) });
+  }
+}
+function handleHookLogSummary(_req, res, projectRoot) {
+  try {
+    const entries = readHookLog(projectRoot);
+    const summary = summarizeHookLog(entries);
+    json(res, 200, summary);
+  } catch (err) {
+    json(res, 500, { error: "Summary failed", detail: String(err) });
+  }
+}
+async function handleTokens(_req, res, projectRoot) {
+  try {
+    const store = await getStore(projectRoot);
+    try {
+      const tokenStats = getCumulativeStats(store);
+      json(res, 200, tokenStats);
+    } finally {
+      store.close();
+    }
+  } catch (err) {
+    json(res, 500, { error: "Token stats failed", detail: String(err) });
+  }
+}
+async function handleFilesHeatmap(req, res, projectRoot) {
+  try {
+    const url = parseUrl(req);
+    const limit = parseInt(url.searchParams.get("limit") ?? "20", 10);
+    const entries = readHookLog(projectRoot);
+    const fileMap = /* @__PURE__ */ new Map();
+    for (const entry of entries) {
+      if (!entry.path) continue;
+      const existing = fileMap.get(entry.path) ?? { count: 0, tokensSaved: 0 };
+      fileMap.set(entry.path, {
+        count: existing.count + 1,
+        tokensSaved: existing.tokensSaved + (entry.tokensSaved ?? 0)
+      });
+    }
+    const sorted = [...fileMap.entries()].sort((a, b) => b[1].count - a[1].count).slice(0, limit).map(([path, data]) => ({ path, ...data }));
+    json(res, 200, sorted);
+  } catch (err) {
+    json(res, 500, { error: "Heatmap failed", detail: String(err) });
+  }
+}
+function handleProvidersHealth(_req, res, projectRoot) {
+  try {
+    const status = getComponentStatus(projectRoot);
+    const httpComp = status.components.find((c) => c.name === "http");
+    const lspComp = status.components.find((c) => c.name === "lsp");
+    const astComp = status.components.find((c) => c.name === "ast");
+    json(res, 200, {
+      httpRunning: true,
+      // we're literally responding — it's up
+      lspAvailable: !!lspComp?.available,
+      astAvailable: !!astComp?.available,
+      ideCount: status.ideCount,
+      // Also expose the raw report for advanced consumers
+      components: status.components,
+      generatedAt: status.generatedAt,
+      // Expose the httpComp flag separately in case callers want to know
+      // whether the PID file was found (vs inferred from this response)
+      httpPidDetected: !!httpComp?.available
+    });
+  } catch (err) {
+    json(res, 500, { error: "Provider health failed", detail: String(err) });
+  }
+}
+async function handleCacheStats(_req, res, projectRoot) {
+  try {
+    const store = await getStore(projectRoot);
+    try {
+      ContextCache.ensureTables(store);
+      const cache = getContextCache();
+      const cacheStats = cache.getStats(store);
+      json(res, 200, cacheStats);
+    } finally {
+      store.close();
+    }
+  } catch (err) {
+    json(res, 500, { error: "Cache stats failed", detail: String(err) });
+  }
+}
+async function handleGraphNodes(req, res, projectRoot) {
+  try {
+    const url = parseUrl(req);
+    const limit = parseInt(url.searchParams.get("limit") ?? "100", 10);
+    const offset = parseInt(url.searchParams.get("offset") ?? "0", 10);
+    const store = await getStore(projectRoot);
+    try {
+      const allNodes = store.getAllNodes();
+      const paginated = allNodes.slice(offset, offset + limit);
+      json(res, 200, { nodes: paginated, total: allNodes.length });
+    } finally {
+      store.close();
+    }
+  } catch (err) {
+    json(res, 500, { error: "Graph nodes failed", detail: String(err) });
+  }
+}
+async function handleGraphGodNodes(_req, res, projectRoot) {
+  try {
+    const store = await getStore(projectRoot);
+    try {
+      const godNodes = store.getGodNodes(10);
+      json(res, 200, godNodes);
+    } finally {
+      store.close();
+    }
+  } catch (err) {
+    json(res, 500, { error: "God nodes failed", detail: String(err) });
+  }
+}
+var sseClients = /* @__PURE__ */ new Set();
+var hookLogWatcher = null;
+function handleSSE(_req, res, projectRoot) {
+  res.writeHead(200, {
+    "Content-Type": "text/event-stream",
+    "Cache-Control": "no-cache",
+    "Connection": "keep-alive",
+    "Access-Control-Allow-Origin": "*"
+  });
+  res.write('data: {"type":"connected"}\n\n');
+  sseClients.add(res);
+  if (!hookLogWatcher) {
+    const logPath = join(projectRoot, ".engram", "hook-log.jsonl");
+    if (existsSync(logPath)) {
+      let lastSize = statSync(logPath).size;
+      const checkFile = () => {
+        try {
+          const currentSize = statSync(logPath).size;
+          if (currentSize > lastSize) {
+            lastSize = currentSize;
+            const msg = JSON.stringify({ type: "hook-event", timestamp: Date.now() });
+            for (const client of sseClients) {
+              try {
+                client.write(`data: ${msg}
+
+`);
+              } catch {
+                sseClients.delete(client);
+              }
+            }
+          }
+        } catch {
+        }
+      };
+      const interval = setInterval(checkFile, 1e3);
+      hookLogWatcher = () => clearInterval(interval);
+    }
+  }
+  res.on("close", () => {
+    sseClients.delete(res);
+    if (sseClients.size === 0 && hookLogWatcher) {
+      hookLogWatcher();
+      hookLogWatcher = null;
+    }
+  });
+}
+function writePid(projectRoot) {
+  const dir = join(projectRoot, ".engram");
+  if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
+  writeFileSync(join(dir, "http-server.pid"), String(process.pid), "utf-8");
+}
+function removePid(projectRoot) {
+  try {
+    unlinkSync(join(projectRoot, ".engram", "http-server.pid"));
+  } catch {
+  }
+}
+function createHttpServer(projectRoot, port) {
+  return new Promise((resolve, reject) => {
+    const startedAt = Date.now();
+    const server = createServer(async (req, res) => {
+      if (req.method === "OPTIONS") {
+        res.writeHead(204, {
+          "Access-Control-Allow-Origin": "*",
+          "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+          "Access-Control-Allow-Headers": "Authorization, Content-Type"
+        });
+        res.end();
+        return;
+      }
+      if (!checkAuth(req, res)) return;
+      const url = parseUrl(req);
+      const path = url.pathname;
+      try {
+        if (req.method === "GET" && path === "/health") {
+          handleHealth(req, res, startedAt);
+        } else if (req.method === "GET" && path === "/query") {
+          await handleQuery(req, res, projectRoot);
+        } else if (req.method === "GET" && path === "/stats") {
+          await handleStats(req, res, projectRoot);
+        } else if (req.method === "GET" && path === "/providers") {
+          handleProviders(req, res);
+        } else if (req.method === "POST" && path === "/learn") {
+          await handleLearn(req, res, projectRoot);
+        } else if (req.method === "GET" && path === "/api/hook-log") {
+          await handleHookLog(req, res, projectRoot);
+        } else if (req.method === "GET" && path === "/api/hook-log/summary") {
+          handleHookLogSummary(req, res, projectRoot);
+        } else if (req.method === "GET" && path === "/api/tokens") {
+          await handleTokens(req, res, projectRoot);
+        } else if (req.method === "GET" && path === "/api/files/heatmap") {
+          await handleFilesHeatmap(req, res, projectRoot);
+        } else if (req.method === "GET" && path === "/api/providers/health") {
+          handleProvidersHealth(req, res, projectRoot);
+        } else if (req.method === "GET" && path === "/api/cache/stats") {
+          await handleCacheStats(req, res, projectRoot);
+        } else if (req.method === "GET" && path === "/api/graph/nodes") {
+          await handleGraphNodes(req, res, projectRoot);
+        } else if (req.method === "GET" && path === "/api/graph/god-nodes") {
+          await handleGraphGodNodes(req, res, projectRoot);
+        } else if (req.method === "GET" && path === "/api/sse") {
+          handleSSE(req, res, projectRoot);
+        } else if (req.method === "GET" && (path === "/ui" || path === "/ui/")) {
+          res.writeHead(200, {
+            "Content-Type": "text/html; charset=utf-8",
+            "Cache-Control": "no-cache"
+          });
+          res.end(buildDashboardHtml());
+        } else if (req.method === "GET" && path === "/favicon.ico") {
+          const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" rx="20" fill="#0a0a0b"/><text x="50" y="62" font-size="56" text-anchor="middle" fill="#10b981" font-family="Menlo,monospace">&#9670;</text></svg>';
+          res.writeHead(200, {
+            "Content-Type": "image/svg+xml",
+            "Cache-Control": "public, max-age=86400"
+          });
+          res.end(svg);
+        } else {
+          json(res, 404, { error: "Not found" });
+        }
+      } catch (err) {
+        json(res, 500, { error: "Internal server error", detail: String(err) });
+      }
+    });
+    server.on("error", (err) => {
+      removePid(projectRoot);
+      reject(err);
+    });
+    server.listen(port, "127.0.0.1", () => {
+      writePid(projectRoot);
+      const cleanup = () => {
+        removePid(projectRoot);
+        server.close(() => process.exit(0));
+      };
+      process.on("SIGINT", cleanup);
+      process.on("SIGTERM", cleanup);
+      resolve();
+    });
+  });
+}
+
+// src/server/index.ts
+var DEFAULT_PORT = 7337;
+async function startHttpServer(projectRoot, port = DEFAULT_PORT) {
+  await createHttpServer(projectRoot, port);
+  process.stdout.write(
+    `engram HTTP server listening on http://127.0.0.1:${port}
+`
+  );
+}
+export {
+  startHttpServer
+};