${GraphView.escapeHtml(message)}
`); + } + + // The graph IS the data: no traversal/dedup here — nodes and edges go to the force renderer verbatim. Cycles + // are just edges that close a loop; a recursive call is a self-edge. Entry is accented, externals are amber. + const root = graph.nodes.find((node) => node.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" : ""); + return GraphView.forceGraphDoc( + { + title: `graph — ${root?.label ?? graph.entry}`, + h1: root?.label ?? graph.entry, + sub: `${root?.location.file ?? ""}${root?.location.line ? ":" + root.location.line : ""} · via ${graph.provider}`, + stats, + truncated: graph.stats.truncated ? "graph truncated — raise --depth for more, or pick a more specific entry" : undefined, + }, + { + entry: graph.entry, + nodes: graph.nodes.map((node) => ({ id: node.id, label: node.label, kind: node.kind, file: node.location.file, line: node.location.line, scope: node.scope })), + edges: graph.edges.map((edge) => ({ from: edge.from, to: edge.to, weight: edge.weight ?? 1 })), + }, + ); + } + + /** + * HTML view of the module-import graph (`deps`) — the whole repo as a graph, reusing the call-graph's + * force-directed renderer. Each module is a node, each import a directed edge (importer → imported). Module + * paths are long, so the node label is the basename and the full path lives in the hover title. madge gives no + * call counts, so every edge has weight 1. + */ + static depsHtml(trace: Trace): string { + const depGraph = trace.data.deps as DepGraph | undefined; + if (!depGraph || !depGraph.nodes?.length) { + const errorDiagnostic = trace.diagnostics.find((diagnostic) => diagnostic.level === "error"); + const message = errorDiagnostic ? `deps failed: ${errorDiagnostic.message}` : "deps — no modules"; + return GraphView.htmlDoc("trace-cli deps", `${GraphView.escapeHtml(message)}
`); + } + const stats = `${depGraph.stats.modules} modules · ${depGraph.stats.edges} imports` + (depGraph.stats.circular ? ` · ${depGraph.stats.circular} circular` : ""); + return GraphView.forceGraphDoc( + { + title: `deps — ${depGraph.stats.modules} modules`, + h1: "module graph", + sub: `${depGraph.entry ?? ""} · via madge`, + stats, + }, + { + entry: depGraph.entry ?? "", + // label = basename for a readable node; full path goes in the hover title (file). All in-repo → "local". + nodes: depGraph.nodes.map((node) => ({ id: node.id, label: node.id.split("/").pop() || node.id, kind: "module", file: node.id, line: 0, scope: "local" })), + edges: depGraph.edges.map((edge) => ({ from: edge.from, to: edge.to, weight: 1 })), + }, + ); + } + + /** HTML-escape a value for safe interpolation into page text/attributes. */ + private static escapeHtml(value: unknown): string { + return String(value).replace(/&/g, "&").replace(//g, ">").replace(/"/g, """); + } + + /** + * Shared force-graph page builder: serialize the payload safely, assemble the header/controls/SVG scaffold, and + * wrap it in the self-contained document. Both the call graph and the module-import graph render through here — + * one layout + interaction implementation, two data sources. + */ + private static forceGraphDoc(meta: ForceMeta, payload: ForcePayload): string { + // Inline JSON safely: neutralize "<" (so "" can't terminate the block) and the JS line separators. + const dataJson = JSON.stringify(payload) + .replace(/${GraphView.escapeHtml(meta.truncated)}` : ""; + const body = + `