@descryy/viz 0.1.0

package/public/app.js

@@ -0,0 +1,686 @@
+// descry viz — vanilla, no framework, no bundler, no CDN, no network call this
+// page does not itself originate against its own local server. Canvas 2D
+// rendering, chosen over SVG for legibility at the realistic working set
+// (50-200 visible nodes) with simple hand-rolled hit-testing.
+
+const NODE_TYPES = [
+  "FILE", "FUNCTION", "CLASS", "MODULE", "API_ENDPOINT", "API_ROUTE",
+  "DATABASE_TABLE", "DATABASE_COLUMN", "MODEL", "DTO", "COMPONENT", "PAGE",
+  "TEST_CASE", "INCIDENT", "FIX_PATTERN",
+];
+
+const EDGE_TYPES = [
+  "CALLS", "IMPORTS", "READS", "WRITES", "RETURNS", "IMPLEMENTS", "INHERITS",
+  "USES_API", "SERVES_API", "USES_TYPE", "PROPAGATES_TO", "TESTS", "FIXED_BY",
+  "CHANGES_WITH", "INCIDENT_CORRELATED",
+];
+
+const API_JOIN_TYPES = new Set(["USES_API", "SERVES_API"]);
+
+const NODE_COLORS = {
+  FILE: "#8890a4", FUNCTION: "#5da9ff", CLASS: "#8f7ee6", MODULE: "#5fc2c9",
+  API_ENDPOINT: "#ffb454", API_ROUTE: "#ff9f5a", DATABASE_TABLE: "#e67e9e",
+  DATABASE_COLUMN: "#e67e9e", MODEL: "#56d364", DTO: "#7ee6a8",
+  COMPONENT: "#5da9ff", PAGE: "#5da9ff", TEST_CASE: "#c9c9c9",
+  INCIDENT: "#ff6b6b", FIX_PATTERN: "#ff6b6b",
+};
+
+const state = {
+  nodes: new Map(), // id -> node (as returned by the API, includes reliability)
+  edges: [], // {from, to, type, resolution, confidence, producedBy, observedByRun, attrs}
+  seeds: [],
+  positions: new Map(), // id -> {x, y}
+  transform: { x: 0, y: 0, scale: 1 },
+  selected: null, // {kind: 'node'|'edge', id or edgeKey}
+  highlightMode: null, // 'upstream' | 'downstream' | null
+  filters: {
+    nodeTypes: new Set(NODE_TYPES),
+    edgeTypes: new Set(EDGE_TYPES),
+    languages: new Set(), // populated from the loaded subgraph; empty set = show all
+  },
+  depth: 1,
+  direction: "both",
+  drag: null,
+  hover: null,
+};
+
+const els = {};
+for (const id of [
+  "search-input", "search-results", "stamp", "node-type-filters",
+  "edge-type-filters", "language-filters", "export-btn", "notes",
+  "graph-canvas", "empty-state", "hover-tooltip", "inspector-empty",
+  "inspector-content", "depth-range", "depth-value", "direction-select",
+]) {
+  els[toCamel(id)] = document.getElementById(id);
+}
+function toCamel(kebab) {
+  return kebab.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+
+const ctx = els.graphCanvas.getContext("2d");
+
+async function fetchJson(path) {
+  const res = await fetch(path);
+  const body = await res.json();
+  if (!res.ok) throw new Error(body.error ?? `${path} failed (${res.status})`);
+  return body;
+}
+
+// ---------------------------------------------------------------------------
+// Search
+// ---------------------------------------------------------------------------
+
+let searchDebounce = null;
+els.searchInput.addEventListener("input", () => {
+  clearTimeout(searchDebounce);
+  const q = els.searchInput.value;
+  if (q.trim() === "") {
+    els.searchResults.hidden = true;
+    return;
+  }
+  searchDebounce = setTimeout(() => runSearch(q), 150);
+});
+
+document.addEventListener("click", (e) => {
+  if (!els.searchResults.contains(e.target) && e.target !== els.searchInput) {
+    els.searchResults.hidden = true;
+  }
+});
+
+async function runSearch(q) {
+  let result;
+  try {
+    result = await fetchJson(`/api/search?q=${encodeURIComponent(q)}`);
+  } catch (err) {
+    els.searchResults.innerHTML = `<div class="search-hit">${escapeHtml(err.message)}</div>`;
+    els.searchResults.hidden = false;
+    return;
+  }
+  if (result.nodes.length === 0) {
+    els.searchResults.innerHTML = `<div class="search-hit">No match for "${escapeHtml(q)}".</div>`;
+    els.searchResults.hidden = false;
+    return;
+  }
+  els.searchResults.innerHTML = "";
+  for (const node of result.nodes) {
+    const row = document.createElement("div");
+    row.className = "search-hit";
+    row.innerHTML = `
+      <div>
+        <div class="name">${escapeHtml(node.name)}</div>
+        ${node.file ? `<span class="file">${escapeHtml(node.file)}</span>` : ""}
+      </div>
+      <div class="meta">${node.type}${node.language ? " · " + node.language : ""}</div>
+    `;
+    row.addEventListener("click", () => {
+      els.searchResults.hidden = true;
+      els.searchInput.value = node.name;
+      loadSubgraph([node.id]);
+    });
+    els.searchResults.appendChild(row);
+  }
+  els.searchResults.hidden = false;
+}
+
+// ---------------------------------------------------------------------------
+// Filters
+// ---------------------------------------------------------------------------
+
+function renderTypeChips(container, allTypes, activeSet, onToggle) {
+  container.innerHTML = "";
+  for (const t of allTypes) {
+    const chip = document.createElement("span");
+    chip.className = "chip" + (activeSet.has(t) ? " active" : "");
+    chip.textContent = t;
+    chip.addEventListener("click", () => {
+      if (activeSet.has(t)) activeSet.delete(t);
+      else activeSet.add(t);
+      chip.classList.toggle("active");
+      onToggle();
+    });
+    container.appendChild(chip);
+  }
+}
+
+renderTypeChips(els.nodeTypeFilters, NODE_TYPES, state.filters.nodeTypes, applyFiltersAndRender);
+renderTypeChips(els.edgeTypeFilters, EDGE_TYPES, state.filters.edgeTypes, () => {
+  if (state.seeds.length > 0) loadSubgraph(state.seeds);
+});
+
+els.depthRange.addEventListener("input", () => {
+  state.depth = Number(els.depthRange.value);
+  els.depthValue.textContent = String(state.depth);
+});
+els.depthRange.addEventListener("change", () => {
+  if (state.seeds.length > 0) loadSubgraph(state.seeds);
+});
+els.directionSelect.addEventListener("change", () => {
+  state.direction = els.directionSelect.value;
+  if (state.seeds.length > 0) loadSubgraph(state.seeds);
+});
+
+function applyFiltersAndRender() {
+  render();
+}
+
+function visibleNodeIds() {
+  const out = new Set();
+  for (const [id, node] of state.nodes) {
+    if (!state.filters.nodeTypes.has(node.type)) continue;
+    if (state.filters.languages.size > 0 && node.language && !state.filters.languages.has(node.language)) continue;
+    out.add(id);
+  }
+  // Seeds are always shown, even if a filter would otherwise hide them —
+  // hiding the thing that was searched for is a worse failure than a filter
+  // that looks slightly inconsistent.
+  for (const s of state.seeds) out.add(s);
+  return out;
+}
+
+// ---------------------------------------------------------------------------
+// Loading a subgraph
+// ---------------------------------------------------------------------------
+
+async function loadSubgraph(seedIds) {
+  const edgeTypes = [...state.filters.edgeTypes].join(",");
+  const url =
+    `/api/subgraph?ids=${seedIds.map(encodeURIComponent).join(",")}` +
+    `&depth=${state.depth}&direction=${state.direction}` +
+    (edgeTypes ? `&edgeTypes=${encodeURIComponent(edgeTypes)}` : "");
+
+  let result;
+  try {
+    result = await fetchJson(url);
+  } catch (err) {
+    els.notes.innerHTML = `<p>${escapeHtml(err.message)}</p>`;
+    return;
+  }
+
+  state.nodes = new Map(result.nodes.map((n) => [n.id, n]));
+  state.edges = result.edges;
+  state.seeds = seedIds;
+  state.selected = null;
+
+  const languages = new Set(result.nodes.map((n) => n.language).filter(Boolean));
+  state.filters.languages = new Set(); // reset to "show all" on every fresh load
+  renderTypeChips(els.languageFilters, [...languages].sort(), state.filters.languages, applyFiltersAndRender);
+  if (languages.size === 0) {
+    els.languageFilters.innerHTML = '<span class="chip-note">No language on any node in this view (e.g. API_ENDPOINT nodes only).</span>';
+  }
+
+  els.notes.innerHTML = result.notes.map((n) => `<p>${escapeHtml(n)}</p>`).join("");
+  els.stamp.textContent = result.stamp.commitSha
+    ? `commit ${result.stamp.commitSha.slice(0, 8)} · resolution floor R${result.stamp.resolutionFloor}` +
+      (result.truncated ? " · TRUNCATED" : "")
+    : "empty graph";
+
+  computeLayout();
+  fitToView();
+  els.emptyState.style.display = state.nodes.size === 0 ? "flex" : "none";
+  els.exportBtn.disabled = state.nodes.size === 0;
+  selectNode(seedIds[0]);
+  render();
+}
+
+// ---------------------------------------------------------------------------
+// Layout — depth-ordered columns, the "legible chain" shape rather than a
+// force-directed cloud. Depth is recomputed here (a plain BFS over the
+// already-small, already-fetched node/edge set — a UI layout concern, not a
+// second traversal engine) because the API returns nodes and edges, not a
+// per-node depth; recomputing costs nothing at this size.
+// ---------------------------------------------------------------------------
+
+function computeLayout() {
+  const adjacency = new Map();
+  for (const id of state.nodes.keys()) adjacency.set(id, []);
+  for (const e of state.edges) {
+    adjacency.get(e.from)?.push(e.to);
+    adjacency.get(e.to)?.push(e.from);
+  }
+
+  const depth = new Map();
+  const queue = [];
+  for (const s of state.seeds) {
+    if (!state.nodes.has(s)) continue;
+    depth.set(s, 0);
+    queue.push(s);
+  }
+  for (let head = 0; head < queue.length; head += 1) {
+    const cur = queue[head];
+    for (const next of adjacency.get(cur) ?? []) {
+      if (depth.has(next)) continue;
+      depth.set(next, depth.get(cur) + 1);
+      queue.push(next);
+    }
+  }
+  // Anything unreached from a seed (should not happen given the API only
+  // returns the seed's own reachable set, but a defensive default keeps
+  // layout from throwing on an edge case) sits in its own trailing column.
+  for (const id of state.nodes.keys()) if (!depth.has(id)) depth.set(id, 0);
+
+  const byDepth = new Map();
+  for (const [id, d] of depth) {
+    if (!byDepth.has(d)) byDepth.set(d, []);
+    byDepth.get(d).push(id);
+  }
+
+  const COL_SPACING = 220;
+  const ROW_SPACING = 70;
+  state.positions = new Map();
+  const depths = [...byDepth.keys()].sort((a, b) => a - b);
+  for (const d of depths) {
+    const ids = byDepth.get(d).sort();
+    const totalHeight = (ids.length - 1) * ROW_SPACING;
+    ids.forEach((id, i) => {
+      state.positions.set(id, {
+        x: d * COL_SPACING,
+        y: i * ROW_SPACING - totalHeight / 2,
+      });
+    });
+  }
+}
+
+/**
+ * Frame the whole loaded subgraph inside the canvas's own visible box (the
+ * middle grid column, between the filter sidebar and the inspector — never
+ * the full window). Without this, a legible depth-1 view stays framed
+ * correctly by luck alone, and a wider one runs past the canvas's right
+ * edge with no way back short of the user finding the right scroll/zoom by
+ * hand — exactly the "pushed its own neighbours off-screen" failure a
+ * search result must not produce.
+ */
+function fitToView() {
+  if (state.positions.size === 0) return;
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const pos of state.positions.values()) {
+    minX = Math.min(minX, pos.x);
+    maxX = Math.max(maxX, pos.x);
+    minY = Math.min(minY, pos.y);
+    maxY = Math.max(maxY, pos.y);
+  }
+  const rect = els.graphCanvas.getBoundingClientRect();
+  const labelPad = 60; // room for the node radius, its label below it, and breathing room
+  const contentW = Math.max(1, maxX - minX) + NODE_RADIUS * 2 + labelPad * 2;
+  const contentH = Math.max(1, maxY - minY) + NODE_RADIUS * 2 + labelPad * 2;
+  const scale = Math.min(rect.width / contentW, rect.height / contentH);
+  state.transform.scale = Math.max(0.15, Math.min(1.5, scale));
+  state.transform.x = -(minX + maxX) / 2;
+  state.transform.y = -(minY + maxY) / 2;
+}
+
+// ---------------------------------------------------------------------------
+// Rendering
+// ---------------------------------------------------------------------------
+
+function resizeCanvas() {
+  const rect = els.graphCanvas.parentElement.getBoundingClientRect();
+  const dpr = window.devicePixelRatio || 1;
+  els.graphCanvas.width = rect.width * dpr;
+  els.graphCanvas.height = rect.height * dpr;
+  els.graphCanvas.style.width = `${rect.width}px`;
+  els.graphCanvas.style.height = `${rect.height}px`;
+  render();
+}
+window.addEventListener("resize", resizeCanvas);
+
+function worldToScreen(x, y) {
+  const rect = els.graphCanvas.getBoundingClientRect();
+  return {
+    x: rect.width / 2 + (x + state.transform.x) * state.transform.scale,
+    y: rect.height / 2 + (y + state.transform.y) * state.transform.scale,
+  };
+}
+function screenToWorld(sx, sy) {
+  const rect = els.graphCanvas.getBoundingClientRect();
+  return {
+    x: (sx - rect.width / 2) / state.transform.scale - state.transform.x,
+    y: (sy - rect.height / 2) / state.transform.scale - state.transform.y,
+  };
+}
+
+const NODE_RADIUS = 18;
+
+function highlightSet() {
+  if (state.selected?.kind !== "node" || state.highlightMode === null) return null;
+  const startId = state.selected.id;
+  const dir = state.highlightMode; // 'upstream' follows incoming edges, 'downstream' follows outgoing
+  const out = new Set([startId]);
+  const queue = [startId];
+  while (queue.length > 0) {
+    const cur = queue.shift();
+    for (const e of state.edges) {
+      if (dir === "downstream" && e.from === cur && !out.has(e.to)) { out.add(e.to); queue.push(e.to); }
+      if (dir === "upstream" && e.to === cur && !out.has(e.from)) { out.add(e.from); queue.push(e.from); }
+    }
+  }
+  return out;
+}
+
+function render() {
+  const dpr = window.devicePixelRatio || 1;
+  ctx.save();
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, els.graphCanvas.clientWidth, els.graphCanvas.clientHeight);
+
+  const shown = visibleNodeIds();
+  const hl = highlightSet();
+
+  // Edges first, under the nodes.
+  for (const e of state.edges) {
+    if (!shown.has(e.from) || !shown.has(e.to)) continue;
+    if (!state.filters.edgeTypes.has(e.type)) continue;
+    const from = state.positions.get(e.from);
+    const to = state.positions.get(e.to);
+    if (!from || !to) continue;
+    const p1 = worldToScreen(from.x, from.y);
+    const p2 = worldToScreen(to.x, to.y);
+
+    const dimmed = hl !== null && !(hl.has(e.from) && hl.has(e.to));
+    const isSelected = state.selected?.kind === "edge" && state.selected.id === edgeKey(e);
+    const isJoin = API_JOIN_TYPES.has(e.type);
+
+    ctx.beginPath();
+    ctx.moveTo(p1.x, p1.y);
+    ctx.lineTo(p2.x, p2.y);
+    ctx.lineWidth = isSelected ? 3 : isJoin ? 2.2 : 1.4;
+    ctx.strokeStyle = isSelected
+      ? "#ffffff"
+      : dimmed
+        ? "rgba(120,128,148,0.15)"
+        : isJoin
+          ? "#ffb454"
+          : "rgba(93,169,255,0.55)";
+    // Reserved visual channel for the runtime layer: resolution 4 means this
+    // edge was actually observed firing, not just statically inferred. Dashed
+    // = static-only; solid = observed. "Failed here" has no data source yet
+    // (no runtime evidence field exists) and is deliberately not drawn —
+    // inventing a look for a fact the graph does not carry would be a lie.
+    ctx.setLineDash(e.resolution === 4 ? [] : [5, 4]);
+    ctx.stroke();
+    ctx.setLineDash([]);
+
+    // Arrowhead.
+    const angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);
+    const ah = 7;
+    const ex = p2.x - Math.cos(angle) * (NODE_RADIUS + 2);
+    const ey = p2.y - Math.sin(angle) * (NODE_RADIUS + 2);
+    ctx.beginPath();
+    ctx.moveTo(ex, ey);
+    ctx.lineTo(ex - ah * Math.cos(angle - 0.4), ey - ah * Math.sin(angle - 0.4));
+    ctx.lineTo(ex - ah * Math.cos(angle + 0.4), ey - ah * Math.sin(angle + 0.4));
+    ctx.closePath();
+    ctx.fillStyle = ctx.strokeStyle;
+    ctx.fill();
+  }
+
+  // Nodes.
+  for (const [id, node] of state.nodes) {
+    if (!shown.has(id)) continue;
+    const pos = state.positions.get(id);
+    if (!pos) continue;
+    const p = worldToScreen(pos.x, pos.y);
+    const dimmed = hl !== null && !hl.has(id);
+    const isSelected = state.selected?.kind === "node" && state.selected.id === id;
+    const isSeed = state.seeds.includes(id);
+    const isJoinNode = node.type === "API_ENDPOINT";
+
+    ctx.beginPath();
+    ctx.arc(p.x, p.y, NODE_RADIUS, 0, Math.PI * 2);
+    ctx.fillStyle = dimmed ? "rgba(70,75,90,0.4)" : (NODE_COLORS[node.type] ?? "#888");
+    ctx.globalAlpha = dimmed ? 0.4 : 1;
+    ctx.fill();
+    if (isJoinNode) {
+      ctx.lineWidth = 2.5;
+      ctx.strokeStyle = "#ffb454";
+      ctx.stroke();
+    }
+    if (isSelected || isSeed) {
+      ctx.lineWidth = isSelected ? 3 : 2;
+      ctx.strokeStyle = isSelected ? "#ffffff" : "#5da9ff";
+      ctx.stroke();
+    }
+    ctx.globalAlpha = 1;
+
+    ctx.fillStyle = dimmed ? "rgba(180,186,200,0.35)" : "#e6e8ee";
+    ctx.font = "11px -apple-system, sans-serif";
+    ctx.textAlign = "center";
+    const label = node.name.length > 22 ? node.name.slice(0, 21) + "…" : node.name;
+    ctx.fillText(label, p.x, p.y + NODE_RADIUS + 13);
+  }
+
+  ctx.restore();
+}
+
+function edgeKey(e) { return `${e.from}${e.to}${e.type}`; }
+
+// ---------------------------------------------------------------------------
+// Interaction: pan, zoom, click, hover
+// ---------------------------------------------------------------------------
+
+els.graphCanvas.addEventListener("wheel", (e) => {
+  e.preventDefault();
+  const rect = els.graphCanvas.getBoundingClientRect();
+  const before = screenToWorld(e.clientX - rect.left, e.clientY - rect.top);
+  const factor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+  state.transform.scale = Math.max(0.15, Math.min(4, state.transform.scale * factor));
+  const after = screenToWorld(e.clientX - rect.left, e.clientY - rect.top);
+  state.transform.x += after.x - before.x;
+  state.transform.y += after.y - before.y;
+  render();
+}, { passive: false });
+
+els.graphCanvas.addEventListener("mousedown", (e) => {
+  state.drag = { startX: e.clientX, startY: e.clientY, origX: state.transform.x, origY: state.transform.y, moved: false };
+  els.graphCanvas.classList.add("dragging");
+});
+window.addEventListener("mousemove", (e) => {
+  if (state.drag) {
+    const dx = (e.clientX - state.drag.startX) / state.transform.scale;
+    const dy = (e.clientY - state.drag.startY) / state.transform.scale;
+    if (Math.abs(dx) + Math.abs(dy) > 2) state.drag.moved = true;
+    state.transform.x = state.drag.origX + dx;
+    state.transform.y = state.drag.origY + dy;
+    render();
+    return;
+  }
+  handleHover(e);
+});
+window.addEventListener("mouseup", (e) => {
+  const wasDrag = state.drag?.moved;
+  state.drag = null;
+  els.graphCanvas.classList.remove("dragging");
+  if (!wasDrag) handleClick(e);
+});
+
+function pointAt(e) {
+  const rect = els.graphCanvas.getBoundingClientRect();
+  return { sx: e.clientX - rect.left, sy: e.clientY - rect.top };
+}
+
+function nodeAt(sx, sy) {
+  const shown = visibleNodeIds();
+  for (const [id, _node] of state.nodes) {
+    if (!shown.has(id)) continue;
+    const pos = state.positions.get(id);
+    if (!pos) continue;
+    const p = worldToScreen(pos.x, pos.y);
+    if (Math.hypot(p.x - sx, p.y - sy) <= NODE_RADIUS + 3) return id;
+  }
+  return null;
+}
+
+function edgeAt(sx, sy) {
+  const shown = visibleNodeIds();
+  for (const e of state.edges) {
+    if (!shown.has(e.from) || !shown.has(e.to)) continue;
+    const from = state.positions.get(e.from);
+    const to = state.positions.get(e.to);
+    if (!from || !to) continue;
+    const p1 = worldToScreen(from.x, from.y);
+    const p2 = worldToScreen(to.x, to.y);
+    const dist = distanceToSegment(sx, sy, p1.x, p1.y, p2.x, p2.y);
+    if (dist <= 5) return e;
+  }
+  return null;
+}
+
+function distanceToSegment(px, py, x1, y1, x2, y2) {
+  const dx = x2 - x1, dy = y2 - y1;
+  const lenSq = dx * dx + dy * dy;
+  let t = lenSq === 0 ? 0 : ((px - x1) * dx + (py - y1) * dy) / lenSq;
+  t = Math.max(0, Math.min(1, t));
+  const cx = x1 + t * dx, cy = y1 + t * dy;
+  return Math.hypot(px - cx, py - cy);
+}
+
+function handleClick(e) {
+  const { sx, sy } = pointAt(e);
+  const hitNode = nodeAt(sx, sy);
+  if (hitNode) return selectNode(hitNode);
+  const hitEdge = edgeAt(sx, sy);
+  if (hitEdge) return selectEdge(hitEdge);
+  state.selected = null;
+  state.highlightMode = null;
+  renderInspectorEmpty();
+  render();
+}
+
+function handleHover(e) {
+  const { sx, sy } = pointAt(e);
+  const hitNode = nodeAt(sx, sy);
+  if (hitNode) {
+    const node = state.nodes.get(hitNode);
+    els.hoverTooltip.textContent = `${node.type} · ${node.name}`;
+    els.hoverTooltip.style.left = `${sx + 14}px`;
+    els.hoverTooltip.style.top = `${sy + 10}px`;
+    els.hoverTooltip.hidden = false;
+    return;
+  }
+  els.hoverTooltip.hidden = true;
+}
+
+// ---------------------------------------------------------------------------
+// Inspector — node/edge detail, "why is this connected"
+// ---------------------------------------------------------------------------
+
+function renderInspectorEmpty() {
+  els.inspectorEmpty.hidden = false;
+  els.inspectorContent.hidden = true;
+}
+
+function selectNode(id) {
+  const node = state.nodes.get(id);
+  if (!node) return;
+  state.selected = { kind: "node", id };
+  els.inspectorEmpty.hidden = true;
+  els.inspectorContent.hidden = false;
+
+  const outgoing = state.edges.filter((e) => e.from === id);
+  const incoming = state.edges.filter((e) => e.to === id);
+
+  els.inspectorContent.innerHTML = `
+    <h2>${escapeHtml(node.name)}</h2>
+    <span class="kind-badge">${node.type}</span>
+    ${fieldRow("File", node.file ?? "—")}
+    ${fieldRow("Range", node.range ? `L${node.range.startLine}–${node.range.endLine}` : "—")}
+    ${fieldRow("Language", node.language ?? "—")}
+    ${fieldRow("Resolution", `R${node.resolution}`)}
+    ${fieldRow("Reliability", `<span class="reliability-${node.reliability}">${node.reliability}</span>`, true)}
+    ${fieldRow("Produced by", node.producedBy)}
+    ${fieldRow("Node id", `<code style="font-size:10px">${escapeHtml(node.id)}</code>`, true)}
+    <div class="section-title">attrs</div>
+    <pre>${escapeHtml(JSON.stringify(node.attrs ?? {}, null, 2))}</pre>
+    <div class="section-title">Dependencies (${outgoing.length + incoming.length} edge(s) in this view)</div>
+    <div>
+      <button class="link-btn" id="hl-downstream">Highlight downstream (${outgoing.length})</button><br/>
+      <button class="link-btn" id="hl-upstream">Highlight upstream (${incoming.length})</button><br/>
+      <button class="link-btn" id="hl-clear">Clear highlight</button>
+    </div>
+  `;
+  document.getElementById("hl-downstream").addEventListener("click", () => { state.highlightMode = "downstream"; render(); });
+  document.getElementById("hl-upstream").addEventListener("click", () => { state.highlightMode = "upstream"; render(); });
+  document.getElementById("hl-clear").addEventListener("click", () => { state.highlightMode = null; render(); });
+
+  render();
+}
+
+function selectEdge(edge) {
+  state.selected = { kind: "edge", id: edgeKey(edge) };
+  els.inspectorEmpty.hidden = true;
+  els.inspectorContent.hidden = false;
+
+  const fromNode = state.nodes.get(edge.from);
+  const toNode = state.nodes.get(edge.to);
+  const isJoin = API_JOIN_TYPES.has(edge.type);
+
+  const attrsEntries = Object.entries(edge.attrs ?? {});
+  const whyKey = attrsEntries.find(([k]) => /^(why|reason|rule)$/i.test(k));
+
+  els.inspectorContent.innerHTML = `
+    <h2>${edge.type}</h2>
+    <span class="kind-badge">${isJoin ? "cross-language join edge" : "edge"}</span>
+    ${fieldRow("From", fromNode ? fromNode.name : edge.from)}
+    ${fieldRow("To", toNode ? toNode.name : edge.to)}
+    ${fieldRow("Resolution", `R${edge.resolution}`)}
+    ${fieldRow("Confidence", edge.confidence.toFixed(2))}
+    ${fieldRow("Produced by", edge.producedBy)}
+    ${fieldRow("Observed by run", edge.observedByRun ? "yes — " + edge.observedByRun : (edge.resolution === 4 ? "yes" : "no — static inference only"))}
+    <div class="section-title">Why is this connected?</div>
+    <div class="why-connected">
+      ${whyKey
+        ? escapeHtml(String(whyKey[1]))
+        : attrsEntries.length > 0
+          ? "No explicit reason field on this edge — full evidence below."
+          : "This edge carries no attrs beyond the core provenance fields above (resolution, confidence, producedBy). That is the entire evidence trail the graph stores for it."}
+    </div>
+    ${attrsEntries.length > 0 ? `<div class="section-title">Full attrs (evidence &amp; provenance)</div><pre>${escapeHtml(JSON.stringify(edge.attrs, null, 2))}</pre>` : ""}
+  `;
+  render();
+}
+
+function fieldRow(k, v, rawHtml) {
+  return `<div class="field-row"><span class="k">${k}</span><span class="v">${rawHtml ? v : escapeHtml(String(v))}</span></div>`;
+}
+
+function escapeHtml(s) {
+  return s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+}
+
+// ---------------------------------------------------------------------------
+// Export
+// ---------------------------------------------------------------------------
+
+els.exportBtn.addEventListener("click", () => {
+  const payload = {
+    seeds: state.seeds,
+    depth: state.depth,
+    direction: state.direction,
+    nodes: [...state.nodes.values()],
+    edges: state.edges,
+    exportedFrom: "descry viz",
+  };
+  const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `descry-viz-${(state.seeds[0] ?? "graph").replace(/[^a-zA-Z0-9]/g, "_").slice(0, 40)}.json`;
+  a.click();
+  URL.revokeObjectURL(url);
+});
+
+// ---------------------------------------------------------------------------
+// Boot
+// ---------------------------------------------------------------------------
+
+async function boot() {
+  try {
+    const info = await fetchJson("/api/graph-info");
+    els.stamp.textContent = info.stamp.commitSha
+      ? `commit ${info.stamp.commitSha.slice(0, 8)}`
+      : "graph has no commit recorded";
+  } catch (err) {
+    els.stamp.textContent = `graph unavailable: ${err.message}`;
+  }
+  resizeCanvas();
+}
+boot();