();
+
+ const label = (n: GraphNode, weight?: number): string => {
+ const w = weight && weight > 1 ? ` ×${weight}` : "";
+ if (n.scope !== "local") return `${n.label} ⊗ ${n.scope}${w}`;
+ return `${n.label} ${n.loc.file}:${n.loc.line}${w}`;
+ };
+
+ const walk = (id: string, prefix: string, connector: string, weight: number | undefined): void => {
+ const n = byId.get(id);
+ if (!n) return;
+ const cycle = onPath.has(id);
+ const kids = adj.get(id) ?? [];
+ const shared = emitted.has(id) && kids.length > 0;
+ const tag = cycle ? " ↻ cycle" : shared ? " → shared" : "";
+ lines.push(`${prefix}${connector}${label(n, weight)}${tag}`);
+ if (cycle || shared) return; // back-edge / already-expanded: reference only, don't recurse
+ emitted.add(id);
+ onPath.add(id);
+ const childPrefix = connector ? prefix + (connector.startsWith("└") ? " " : "│ ") : prefix;
+ kids.forEach((e, i) => {
+ const last = i === kids.length - 1;
+ walk(e.to, childPrefix, last ? "└─ " : "├─ ", e.weight);
+ });
+ onPath.delete(id);
+ };
+
+ walk(graph.entry, "", "", undefined);
+ return head.concat(lines).join("\n");
+}
+
+/**
+ * HTML view: the call graph drawn as an actual node-and-edge diagram — a self-contained, zero-dependency
+ * interactive page. Every `graph.nodes` entry is a circle, every `graph.edges` entry a directed arrow, laid
+ * out by an inline force-directed simulation (SVG + vanilla JS). Pan (drag background), zoom (wheel), drag a
+ * node to pin it, hover to spotlight a node's callers/callees, and filter by name/file. This is the whole
+ * point of `--html`: see the codebase as a graph of calls, not a list of collapsible rows. The entry is
+ * accented, externals are amber, hubs scale with degree, and recursion shows as a self-loop. Returns a
+ * complete HTML document (no external assets) ready to write to a file.
+ */
+export function renderGraphHtml(trace: Trace): string {
+ const graph = trace.data.graph as CodeGraph | undefined;
+ if (!graph || !graph.nodes?.length) {
+ const err = trace.diagnostics.find((d) => d.level === "error");
+ const msg = err ? `graph failed: ${err.message}` : "graph — no nodes";
+ return htmlDoc("trace-cli graph", `${esc(msg)}
`);
+ }
+
+ // The graph IS the data: no traversal/dedup here — nodes and edges go to the page verbatim and the
+ // force layout positions them. Cycles are just edges that close a loop; a recursive call is a self-edge.
+ const payload = {
+ entry: graph.entry,
+ nodes: graph.nodes.map((n) => ({ id: n.id, label: n.label, kind: n.kind, file: n.loc.file, line: n.loc.line, scope: n.scope })),
+ edges: graph.edges.map((e) => ({ from: e.from, to: e.to, weight: e.weight ?? 1 })),
+ };
+ // Inline JSON safely: neutralize "<" (so "" can't terminate the block) and the JS line separators.
+ const dataJson = JSON.stringify(payload)
+ .replace(/ n.id === graph.entry);
+ const stats =
+ `${graph.stats.nodes} nodes · ${graph.stats.edges} edges · depth≤${graph.stats.maxDepth}` +
+ (graph.stats.external ? ` · ${graph.stats.external} external` : "") +
+ (graph.stats.truncated ? " · truncated" : "");
+ const truncated = graph.stats.truncated
+ ? `graph truncated — raise --depth for more, or pick a more specific entry
`
+ : "";
+
+ const body =
+ `` +
+ `` +
+ `` +
+ `` +
+ `` +
+ `` +
+ `entrylocalexternaldrag · scroll-zoom · hover` +
+ `
` +
+ ``;
+
+ return htmlDoc(`graph — ${root?.label ?? graph.entry}`, body, {
+ style: GRAPH_CSS,
+ script: GRAPH_JS.replace("__DATA__", () => dataJson),
+ });
+}
+
+/**
+ * Wrap a rendered body in a complete, self-contained HTML document. `extra.style` is appended after the base
+ * chrome CSS and `extra.script` injected before