diffninja 0.1.0

package/dist/review/call-context.js

@@ -0,0 +1,446 @@
+import { buildCallSitesFromInfo } from "../calltree.js";
+import { allContextDefinitions } from "../extract.js";
+import { resolveDispatchContext } from "../languages/typescript-dispatch.js";
+import { resolveTypeContracts } from "../languages/typescript-contracts.js";
+import { formatSourceLoc } from "../loc.js";
+import { CALL_FLOW_MAX_DEPTH } from "./call-flow.js";
+function locationKey(loc) {
+    return `${loc.file}\0${loc.line}\0${loc.endLine ?? loc.line}`;
+}
+/** Expand each body once, rather than building the same descendant tree per caller. */
+function contextGraph(index) {
+    const infos = allContextDefinitions(index);
+    const definitions = infos.map(info => ({ info, outgoing: [], incoming: [] }));
+    const locations = new Map();
+    for (const definition of definitions) {
+        const { file, line, endLine } = definition.info;
+        if (line === undefined)
+            continue;
+        const key = locationKey({ file, line, endLine });
+        // Line-only engine locations cannot distinguish two definitions on one line.
+        locations.set(key, locations.has(key) ? null : definition);
+    }
+    const edges = [];
+    for (const owner of definitions) {
+        if (owner.info.review?.kind)
+            continue;
+        for (const node of buildCallSitesFromInfo(owner.info, index)) {
+            const target = node.definition ? locations.get(locationKey(node.definition)) ?? undefined : undefined;
+            const edge = { node, owner, target };
+            owner.outgoing.push(edge);
+            target?.incoming.push(edge);
+            edges.push(edge);
+        }
+    }
+    const byInfo = new Map(definitions.map(definition => [definition.info, definition]));
+    for (const relation of [...resolveDispatchContext(infos), ...resolveTypeContracts(infos)]) {
+        const owner = byInfo.get(relation.owner), target = byInfo.get(relation.target);
+        if (!owner || !target || target.info.line === undefined)
+            continue;
+        const edge = {
+            owner, target,
+            relation: { kind: relation.kind, evidence: relation.evidence },
+            node: {
+                key: target.info.key, label: target.info.label, children: [],
+                file: owner.info.file, line: relation.line,
+                definition: { file: target.info.file, line: target.info.line, endLine: target.info.endLine },
+            },
+        };
+        owner.outgoing.push(edge);
+        target.incoming.push(edge);
+        edges.push(edge);
+    }
+    return { definitions, edges };
+}
+/** Use changed lines, not the surrounding unchanged lines in a unified hunk. */
+function changedLines(unit, side) {
+    let line = side === "before" ? unit.oldStart : unit.newStart;
+    const changed = [];
+    for (const text of unit.diff.split("\n").slice(1)) {
+        const prefix = text[0];
+        if (prefix === (side === "before" ? "-" : "+"))
+            changed.push(line++);
+        else if (prefix === " ")
+            line++;
+    }
+    // An insertion/deletion still has a boundary on the other snapshot.
+    return changed.length ? changed : [side === "before" ? unit.oldStart : unit.newStart];
+}
+function hunkDefinitions(graph, unit, side) {
+    const inFile = graph.definitions.filter(({ info }) => info.file === unit.file && info.line !== undefined);
+    const selected = new Set();
+    for (const line of changedLines(unit, side)) {
+        const containing = inFile.filter(({ info }) => info.line <= line && (info.endLine ?? info.line) >= line);
+        // A nested definition's hunk should not pull in all of its enclosing body's siblings.
+        let smallest = Infinity;
+        for (const { info } of containing)
+            smallest = Math.min(smallest, info.end - info.start);
+        for (const definition of containing) {
+            if (definition.info.end - definition.info.start === smallest)
+                selected.add(definition);
+        }
+    }
+    return [...selected];
+}
+function location(node) {
+    return node.file !== undefined && node.line !== undefined
+        ? formatSourceLoc({ file: node.file, line: node.line, endLine: node.endLine })
+        : "unavailable";
+}
+function renderEdge({ edge, side, repeated }) {
+    const { node, target } = edge;
+    if (edge.relation)
+        return [
+            `${edge.relation.kind} relation ${edge.owner.info.key} -> ${target?.info.key} @ ${location(node)}`,
+            `  snapshot=${side} target=candidate mapping=unknown`,
+            `  evidence=${edge.relation.evidence}`,
+            `  definition=${location(node.definition ?? {})}`,
+            "  static syntax relation; not a runtime call or proof of delivery",
+        ].join("\n");
+    const context = node.context;
+    const lines = [
+        `call ${context?.callee ?? node.key} @ ${location(node)}`,
+        `  snapshot=${side} target=${context?.target ?? "unresolved"}`,
+        `  definition=${context?.parameters ?? "unavailable"}${node.definition ? ` @ ${location(node.definition)}` : ""}`,
+        `  mapping=${context?.mapping ?? "unknown"}`,
+    ];
+    if (context?.arguments === undefined)
+        lines.push("  arguments=unavailable");
+    else if (context.arguments.length === 0)
+        lines.push("  arguments=[]");
+    else {
+        for (const arg of context.arguments) {
+            const cut = arg.truncated ? ` truncated=true originalLength=${arg.originalLength}` : "";
+            lines.push(`  arg[${arg.position}] -> ${arg.parameter ?? "?"}: ${JSON.stringify(arg.expression)}${cut}`);
+        }
+    }
+    if (context?.omittedArguments)
+        lines.push(`  omitted arguments=${context.omittedArguments} reason=argument-limit`);
+    if (repeated)
+        lines.push("  omitted expansion=repeated-definition (distinct call site retained)");
+    // Known bodies are expanded through the flat graph, not through this depth-one node.
+    if (!target && context?.omittedChildren)
+        lines.push(`  omitted children=${context.omittedChildren} reason=unavailable-expansion`);
+    if (target && context?.omittedInlineChildren)
+        lines.push(`  omitted children=${context.omittedInlineChildren} reason=inline-expansion-limit`);
+    lines.push(`  completeness=${context?.completeness ?? "unavailable"} reason=${context?.reasons.join(",") || (context ? "none" : "unavailable-extraction")}`);
+    return lines.join("\n");
+}
+function selectContext(graph, unit, side) {
+    const seeds = hunkDefinitions(graph, unit, side);
+    if (seeds.length === 0)
+        return { selected: [], omissions: [], seeds };
+    const lines = changedLines(unit, side);
+    const seedSet = new Set(seeds);
+    const selected = new Map();
+    // Outgoing descendants and incoming callers have separate visited sets. Walking
+    // upstream must not expand unrelated sibling calls in the caller's body.
+    for (const direction of ["outgoing", "incoming"]) {
+        const seen = new Set(seeds);
+        const queue = seeds.map(definition => ({ definition, distance: 0, anchor: definition }));
+        for (let cursor = 0; cursor < queue.length; cursor++) {
+            const { definition, distance, anchor } = queue[cursor];
+            if (distance >= CALL_FLOW_MAX_DEPTH)
+                continue;
+            for (const edge of definition[direction]) {
+                const next = direction === "outgoing" ? edge.target : edge.owner;
+                const repeated = direction === "outgoing" && next !== undefined && seen.has(next) && next.outgoing.length > 0;
+                const previous = selected.get(edge);
+                if (!previous || previous.distance > distance + 1) {
+                    const atHunk = edge.node.file === unit.file && edge.node.line !== undefined &&
+                        lines.some(line => line >= edge.node.line && line <= (edge.node.endLine ?? edge.node.line));
+                    const priority = atHunk ? 0 : edge.target && seedSet.has(edge.target) ? 1 : distance + 2;
+                    selected.set(edge, { edge, side, distance: distance + 1, priority, repeated, anchor, direction });
+                }
+                else if (repeated)
+                    previous.repeated = true;
+                if (next && !seen.has(next)) {
+                    seen.add(next);
+                    queue.push({ definition: next, distance: distance + 1, anchor });
+                }
+            }
+        }
+    }
+    if (selected.size === 0)
+        return { selected: [], omissions: [], seeds };
+    // Count omitted components separately from connected but distant/sibling edges.
+    const connected = new Set(seeds);
+    const queue = [...seeds];
+    for (let cursor = 0; cursor < queue.length; cursor++) {
+        const definition = queue[cursor];
+        for (const edge of [...definition.outgoing, ...definition.incoming]) {
+            const next = edge.owner === definition ? edge.target : edge.owner;
+            if (next && !connected.has(next)) {
+                connected.add(next);
+                queue.push(next);
+            }
+        }
+    }
+    let unrelated = 0, distant = 0;
+    for (const edge of graph.edges) {
+        if (selected.has(edge))
+            continue;
+        if (!connected.has(edge.owner))
+            unrelated++;
+        else
+            distant++;
+    }
+    const omissions = [];
+    if (unrelated)
+        omissions.push(`omitted context edges=${unrelated} snapshot=${side} reason=unrelated-to-hunk`);
+    if (distant)
+        omissions.push(`omitted context edges=${distant} snapshot=${side} reason=distant-descendants-or-siblings depth-limit=${CALL_FLOW_MAX_DEPTH}`);
+    return { selected: [...selected.values()], omissions, seeds };
+}
+/** Distinct, readable key for one node; a repeated symbol key keeps its own location. */
+function nodeKey(info, side, taken) {
+    const symbol = `${side}:${info.key}`;
+    if (!taken.has(symbol)) {
+        taken.add(symbol);
+        return symbol;
+    }
+    const located = `${symbol}@${info.line ?? "?"}`;
+    let key = located;
+    for (let nth = 2; taken.has(key); nth += 1)
+        key = `${located}#${nth}`;
+    taken.add(key);
+    return key;
+}
+/**
+ * The nodes one hunk's selection describes: the changed definition in each
+ * snapshot, the definitions that call it, then the definitions its calls
+ * resolve to, each carrying the call sites and bindings the selection already
+ * extracted. A selected edge is attached to its owner's node and, when the edge
+ * resolved into a node as well, to that node's caller evidence, so no existing
+ * evidence is dropped on the way here.
+ */
+function nodePlans(sides) {
+    const plans = [];
+    const byDefinition = new Map();
+    const keys = new Set();
+    const add = (definition, side, role) => {
+        const existing = byDefinition.get(definition);
+        if (existing)
+            return existing;
+        // A definition without a line has no location to address, so it never becomes a node.
+        if (definition.info.line === undefined)
+            return undefined;
+        const plan = {
+            definition, key: nodeKey(definition.info, side, keys), side, role,
+            calls: [], reachedBy: [], calleeReach: [], callerReach: [],
+        };
+        byDefinition.set(definition, plan);
+        plans.push(plan);
+        return plan;
+    };
+    // Hunk definitions of both snapshots lead — the resulting snapshot first,
+    // because it is the code under review — then the definitions that call them,
+    // which are the caller contracts a hunk alone cannot show, then the
+    // definitions their selected calls resolve to, nearest first, which are the
+    // callee bodies a call signature alone cannot show.
+    const distances = new Map();
+    const boundaries = new Set();
+    for (const { selection } of sides) {
+        for (const seed of selection.seeds)
+            distances.set(seed, 0);
+        for (const entry of selection.selected) {
+            const near = entry.direction === "incoming" ? entry.edge.target : entry.edge.owner;
+            const far = entry.direction === "incoming" ? entry.edge.owner : entry.edge.target;
+            if (near)
+                distances.set(near, Math.min(distances.get(near) ?? Infinity, entry.distance - 1));
+            if (far)
+                distances.set(far, Math.min(distances.get(far) ?? Infinity, entry.distance));
+            if (entry.edge.relation) {
+                if (entry.edge.relation.kind !== "contract")
+                    boundaries.add(entry.edge.owner);
+                if (entry.edge.target)
+                    boundaries.add(entry.edge.target);
+            }
+        }
+    }
+    for (const { side, selection } of sides)
+        for (const seed of selection.seeds)
+            add(seed, side, "changed-definition");
+    for (const { side, selection } of sides) {
+        for (const entry of selection.selected) {
+            if (entry.direction !== "incoming")
+                continue;
+            add(entry.edge.owner, side, "caller");
+        }
+    }
+    for (const { side, selection } of sides) {
+        // The walk already holds one entry per selected edge at the shortest
+        // distance it was reached, so a stable sort by distance orders a callee
+        // before the definitions that callee in turn reaches.
+        const callees = selection.selected
+            .filter(entry => entry.direction === "outgoing" && entry.edge.target !== undefined)
+            .sort((left, right) => left.distance - right.distance);
+        for (const entry of callees)
+            add(entry.edge.target, side, "callee");
+    }
+    for (const { selection } of sides) {
+        for (const entry of selection.selected) {
+            const owner = byDefinition.get(entry.edge.owner);
+            const target = entry.edge.target === undefined ? undefined : byDefinition.get(entry.edge.target);
+            // A selected edge is the owner's own call site and, when it resolved into
+            // a node, that node's caller evidence too: a definition whose body does
+            // not contain the call would otherwise carry no binding at all.
+            if (owner)
+                owner.calls.push(entry);
+            if (target && target !== owner)
+                target.reachedBy.push(entry);
+            if (owner || target)
+                continue;
+            // A definition the snapshot gave no line never became a node, so its
+            // edges stay with the hunk definition whose walk found them.
+            const anchor = byDefinition.get(entry.anchor);
+            if (!anchor)
+                continue;
+            if (entry.direction === "incoming")
+                anchor.callerReach.push(entry);
+            else
+                anchor.calleeReach.push(entry);
+        }
+    }
+    // Prefer resulting-code evidence to prior-snapshot duplicates. A contract's
+    // target is the boundary, not every method that happens to mention a type:
+    // promoting both lets those methods crowd the declarations out again.
+    const tier = (plan) => plan.role === "changed-definition" ? 0
+        : boundaries.has(plan.definition) ? 1 : 2;
+    return plans.sort((a, b) => Number(a.side === "before") - Number(b.side === "before")
+        || tier(a) - tier(b)
+        || (distances.get(a.definition) ?? Infinity) - (distances.get(b.definition) ?? Infinity)
+        || Number(a.role === "caller") - Number(b.role === "caller"));
+}
+/** Section headers of a node detail, in the order the evidence is shown. */
+const EVIDENCE_SECTIONS = [
+    { label: "call-sites-in-this-definition", of: "calls", depth: false },
+    { label: "call-sites-reaching-this-definition", of: "reachedBy", depth: false },
+    { label: "callee-reach-from-this-definition", of: "calleeReach", depth: true },
+    { label: "caller-reach-from-this-definition", of: "callerReach", depth: true },
+];
+/**
+ * Whole node text: identity, the snapshot's own definition source between
+ * explicit markers, and the selected call/binding evidence for this node. The
+ * source is never re-indented or excerpted, so the text between the markers is
+ * exactly what the snapshot holds.
+ */
+function nodeDetail(plan, unit, source) {
+    const info = plan.definition.info;
+    const loc = formatSourceLoc({ file: info.file, line: info.line, endLine: info.endLine });
+    const lines = [
+        `context node ${plan.key}`,
+        `  label=${info.label}`,
+        `  location=${loc} snapshot=${plan.side} role=${plan.role} hunk=${unit.id} file=${unit.file}`,
+        info.review?.kind ? `  declaration-kind=${info.review.kind} (non-callable)` : `  declared-parameters=${info.params?.text ?? "unavailable"}`,
+    ];
+    if (source === null)
+        lines.push(`  source=${loc} snapshot=${plan.side} unavailable reason=whole-definition-not-readable`);
+    else
+        lines.push(`  source=${loc} snapshot=${plan.side} begin`, source, "  source-end");
+    let evidence = 0;
+    for (const section of EVIDENCE_SECTIONS) {
+        // With whole source present, unresolved own-call expressions are already
+        // verbatim in that body. Their unknown-binding boilerplate adds no target
+        // evidence. Keep it when source is absent, and keep every resolved relation.
+        const supplied = plan[section.of];
+        const edges = source !== null && section.of === "calls"
+            ? supplied.filter(entry => entry.edge.target !== undefined || entry.edge.relation !== undefined)
+            : supplied;
+        if (edges.length < supplied.length) {
+            lines.push(`  unresolved own-call evidence=${supplied.length - edges.length} source-only; targets and argument mappings unknown`);
+        }
+        if (edges.length === 0)
+            continue;
+        evidence += edges.length;
+        lines.push(`  evidence=${section.label} count=${edges.length}`);
+        for (const entry of edges) {
+            if (section.depth)
+                lines.push(`  depth=${entry.distance}`);
+            lines.push(renderEdge(entry));
+        }
+    }
+    if (evidence === 0)
+        lines.push("  evidence=none-selected reason=no-selected-call-site-touches-this-definition");
+    return lines.join("\n");
+}
+function contextNodeOf(plan, unit, source) {
+    const info = plan.definition.info;
+    const roles = new Set();
+    for (const { edge } of plan.calls) {
+        if (edge.relation?.kind === "event")
+            roles.add("event publisher");
+        if (edge.relation?.kind === "queue")
+            roles.add("queue producer");
+    }
+    for (const { edge } of plan.reachedBy) {
+        if (edge.relation?.kind === "event")
+            roles.add("event listener");
+        if (edge.relation?.kind === "queue")
+            roles.add("queue consumer");
+    }
+    return {
+        key: plan.key,
+        label: roles.size ? `${info.label} [${[...roles].join(", ")}]` : info.label,
+        file: info.file,
+        // Every node was admitted with a location, so this is the same line the
+        // descriptor and the detail report.
+        line: info.line,
+        detail: nodeDetail(plan, unit, source),
+    };
+}
+/** Exact source lines already visible on each side of the untruncated hunk. */
+function hunkSources(unit) {
+    const before = [], after = [];
+    for (const line of unit.diff.split("\n").slice(1)) {
+        if (line[0] === " " || line[0] === "-")
+            before.push(line.slice(1));
+        if (line[0] === " " || line[0] === "+")
+            after.push(line.slice(1));
+    }
+    return {
+        before: { text: before.join("\n"), start: unit.oldStart, end: unit.oldStart + before.length - 1 },
+        after: { text: after.join("\n"), start: unit.newStart, end: unit.newStart + after.length - 1 },
+    };
+}
+/**
+ * Per-hunk context: the standalone report blocks, adjacent to the hunk first
+ * with snapshot-local bindings, and the structured nodes those blocks were
+ * derived from. A hunk with neither gets no entry rather than an empty one.
+ */
+export function buildCallContext(units, before, after, sources = {}) {
+    const beforeGraph = contextGraph(before), afterGraph = contextGraph(after);
+    const result = new Map();
+    for (const unit of units) {
+        if (unit.special || !unit.header.startsWith("@@"))
+            continue;
+        const prior = selectContext(beforeGraph, unit, "before");
+        const current = selectContext(afterGraph, unit, "after");
+        // Keep both sides of an adjacent edge before any farther descendant.
+        const selected = [...current.selected, ...prior.selected].sort((left, right) => left.priority - right.priority);
+        const blocks = selected.map(renderEdge);
+        const omissions = [...prior.omissions, ...current.omissions];
+        if (omissions.length)
+            blocks.push(omissions.join("\n"));
+        const shown = hunkSources(unit);
+        const nodes = [], redundant = [];
+        for (const plan of nodePlans([{ side: "after", selection: current }, { side: "before", selection: prior }])) {
+            const info = plan.definition.info;
+            const source = sources[plan.side]?.({ file: info.file, line: info.line, endLine: info.endLine }) ?? null;
+            const node = contextNodeOf(plan, unit, source);
+            const snapshot = shown[plan.side];
+            // Do not let whole definitions already present in the diff consume the
+            // addressable-node cap before external contracts. Keep them, with all
+            // their call evidence, after definitions whose bodies the hunk cannot show.
+            const fullyShown = info.file === unit.file && info.line >= snapshot.start &&
+                (info.endLine ?? info.line) <= snapshot.end && source !== null && source.length > 0 &&
+                snapshot.text.includes(source);
+            (fullyShown ? redundant : nodes).push(node);
+        }
+        nodes.push(...redundant);
+        if (blocks.length === 0 && nodes.length === 0)
+            continue;
+        result.set(unit.id, { entries: blocks, nodes });
+    }
+    return result;
+}

package/dist/review/call-flow-html.d.ts

@@ -0,0 +1,32 @@
+import type { ReviewReport } from "./types.js";
+/**
+ * Call-flow navigation for a review report: Tree, Graph and Sequence views of
+ * the syntactic call trees that touch each changed file.
+ *
+ * Everything is server-rendered. Tree mode is live markup, so calls, call
+ * sites and each resolved definition are readable with JavaScript disabled; the
+ * Graph and Sequence renderings of the same calls ship inside templates and are
+ * instantiated the first time their mode is opened, which costs no live nodes
+ * until then, and the page states that plainly where it matters. Tree nodes fold
+ * with native `<details>`, and the resolved definition of a call —
+ * line-numbered and escaped — sits in its own `<details>` under the call. The
+ * appended script switches modes, keeps an explicit trail of the functions the
+ * reviewer visited, limits the graph to a depth below the focused call, and
+ * repeats one node's server-rendered source in a single panel; it reads every
+ * label from the escaped DOM and never receives report text.
+ *
+ * Node identity is an occurrence path (`0-2-1`), never a key or a name, so
+ * duplicate and hostile keys stay distinct, and trail entries carry the file
+ * section as well, so the same path in two files stays two entries. Status
+ * reaches the reviewer as a glyph plus color for a call that was added,
+ * removed, or contains a change, and plain dimmed text for an unchanged call.
+ */
+export declare function renderCallFlows(report: ReviewReport): string;
+export declare const CALL_FLOW_STYLES = "\n.cf {\n  display: flex; flex-direction: column; gap: 12px; margin-top: 18px;\n  --cf-add: #1a7f37; --cf-add-soft: #dafbe1;\n  --cf-del: #cf222e; --cf-del-soft: #ffebe9;\n  --cf-chg: #9a6700; --cf-chg-soft: #fff8c5;\n  --cf-quiet: var(--ink-soft);\n}\n@media (prefers-color-scheme: dark) {\n  .cf {\n    --cf-add: #3fb950; --cf-add-soft: rgba(46, 160, 67, 0.15);\n    --cf-del: #f85149; --cf-del-soft: rgba(248, 81, 73, 0.12);\n    --cf-chg: #d29922; --cf-chg-soft: rgba(187, 128, 9, 0.15);\n  }\n}\n/* Mode sections, folded files and the breadcrumb are toggled with the hidden\n   attribute, so the module carries that rule itself instead of relying on the page. */\n.cf [hidden] { display: none !important; }\n.cf-head { display: flex; flex-direction: column; gap: 4px; }\n.cf-prov { font-size: 12px; color: var(--ink-soft); }\n.cf-note { font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }\n.cf-absence { padding: 16px 0; }\n.cf-bounds {\n  margin: 10px 0 0;\n  padding: 2px 0 2px 10px;\n  border-left: 2px solid var(--cf-chg);\n  color: var(--ink-soft);\n  font-size: 12px;\n  overflow-wrap: anywhere;\n}\n.cf-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }\n.cf-ready .cf-controls { position: sticky; top: var(--toolbar-height, 0px); z-index: 4; background: var(--bg); padding: 8px 0; }\n.cf, .cf-files, .cf-file-body, .cf-mode { min-width: 0; }\n.cf-modes {\n  display: inline-flex;\n  align-items: stretch;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  overflow: hidden;\n  background: var(--panel);\n}\n.cf-mode-link {\n  display: inline-flex;\n  align-items: center;\n  padding: 5px 14px;\n  font-size: 12px;\n  color: var(--ink-soft);\n  text-decoration: none;\n  border-right: 1px solid var(--line);\n}\n.cf-mode-link:last-child { border-right: 0; }\n.cf-mode-link:hover, .cf-mode-link:focus-visible { color: var(--ink); background: var(--sunken); }\n.js .cf-mode-link[aria-current] { color: var(--ink); background: var(--sunken); font-weight: 600; }\n.cf-jump ul {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  max-height: 22vh;\n  overflow-y: auto;\n}\n.cf-jump-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  max-width: 100%;\n  min-width: 0;\n  padding: 4px 10px 4px 9px;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--panel);\n  color: var(--ink);\n  font-size: 12px;\n  text-decoration: none;\n}\n.cf-jump-link:hover, .cf-jump-link:focus-visible { border-color: var(--cursor); }\n.cf-jump-path { min-width: 0; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.cf-jump-count { color: var(--ink-soft); white-space: nowrap; }\n.cf-crumbs {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: 6px;\n  font-size: 12.5px;\n  padding-bottom: 3px;\n  overflow-x: auto;\n  overscroll-behavior-x: contain;\n}\n.cf-crumb {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  flex: 0 0 auto;\n  max-width: 34ch;\n  font: inherit;\n  font-size: 12px;\n  padding: 3px 10px;\n  border: 1px solid var(--line-strong);\n  border-radius: 999px;\n  background: var(--panel);\n  color: var(--ink);\n  cursor: pointer;\n  white-space: nowrap;\n}\n.cf-crumb[aria-current] { border-color: var(--cursor); font-weight: 600; }\n.cf-crumb-label { overflow: hidden; text-overflow: ellipsis; }\n.cf-crumb-file {\n  flex: 0 0 auto;\n  max-width: 22ch;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 11px;\n  color: var(--ink-soft);\n}\n.cf-sep { flex: 0 0 auto; color: var(--ink-soft); }\n.cf-files { display: flex; flex-direction: column; gap: 12px; }\n.cf-file {\n  background: var(--panel);\n  border: 1px solid var(--line);\n  border-left: 3px solid var(--line-strong);\n  border-radius: 6px;\n  overflow: hidden;\n}\n.cf-file { --cf-color: var(--ink-soft); --cf-fill: var(--sunken); }\n.cf-file-attention { border-left-color: var(--alarm); --cf-color: var(--alarm); --cf-fill: var(--alarm-bg); }\n.cf-file-uncertain { border-left-color: var(--warn); --cf-color: var(--warn); --cf-fill: var(--warn-bg); }\n.cf-file-low { border-left-color: var(--line-strong); }\n.cf-file-passed { border-left-color: var(--teal); --cf-color: var(--teal); --cf-fill: var(--teal-bg); }\n.cf-file-head {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n  padding: 8px 12px;\n  background: var(--sunken);\n  cursor: pointer;\n  list-style: none;\n}\n.cf-file-head::-webkit-details-marker { display: none; }\n.cf-file-head::after {\n  content: \"\u25B8\";\n  margin-left: auto;\n  font-size: 11px;\n  color: var(--ink-soft);\n  transition: transform 0.15s ease;\n}\n.cf-file[open] > .cf-file-head::after { transform: rotate(90deg); }\n.cf-file-head:focus-visible { outline: 2px solid var(--cursor); outline-offset: -2px; }\n.cf-file-path { flex: 1 1 260px; min-width: 0; font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }\n.cf-file-count { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }\n.cf-diff-link { font-size: 12px; white-space: nowrap; }\n.cf-file-body { border-top: 1px solid var(--line); padding: 0 12px 12px; }\n.cf-mode { padding-top: 12px; }\n.cf-noscript { display: block; }\n.cf-noscript .cf-note { margin: 6px 0 0; }\n.cf-mode + .cf-mode { margin-top: 12px; border-top: 1px dashed var(--line); }\n.cf-mode-head {\n  margin: 0 0 8px;\n  font-size: 11.5px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--ink-soft);\n}\n.cf-ready .cf-mode-head { display: none; }\n.cf-ready .cf-mode + .cf-mode { margin-top: 0; border-top: 0; }\n.cf-tree, .cf-children { list-style: none; margin: 0; padding: 0; }\n.cf-children { margin-left: 15px; padding-left: 10px; border-left: 1px dashed var(--line); }\n.cf-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; padding: 2px 6px; border-radius: 6px; min-width: 0; }\n.cf-row:hover { background: var(--sunken); }\n.cf-fold > .cf-row { cursor: pointer; list-style: none; }\n.cf-fold > .cf-row::-webkit-details-marker { display: none; }\n.cf-fold > .cf-row::before { content: \"\u25B8\"; font-size: 10px; color: var(--ink-soft); transition: transform 0.15s ease; }\n.cf-fold[open] > .cf-row::before { transform: rotate(90deg); }\n.cf-badge, .cf-chip-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  min-width: 16px;\n  height: 16px;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 700;\n}\n.cf-badge, .cf-chip-badge { color: var(--cf-node-color); background: var(--cf-node-fill); }\n.cf-label {\n  font: 400 12.5px/1.5 var(--mono);\n  padding: 0 2px;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  background: none;\n  text-align: left;\n  /* Capped so a long call never pushes its row onto a second line; the\n     location takes what is left and truncates first. */\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: 62%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.js .cf-label { cursor: pointer; }\n.js .cf-label:hover, .cf-label:focus-visible { text-decoration: underline; }\n.cf-label:focus-visible { outline: 2px solid var(--cursor); outline-offset: 1px; }\n.cf-loc { flex: 1 1 0; min-width: 0; font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.cf-loc-none { font-style: italic; }\n.cf-node, .cf-gnode, .cf-chip { --cf-node-color: var(--cf-chg); --cf-node-fill: var(--cf-chg-soft); --cf-node-weight: 600; --cf-node-decoration: none; }\n.cf-st-added { --cf-node-color: var(--cf-add); --cf-node-fill: var(--cf-add-soft); }\n.cf-st-removed { --cf-node-color: var(--cf-del); --cf-node-fill: var(--cf-del-soft); --cf-node-decoration: line-through; }\n.cf-node.cf-st-same, .cf-gnode.cf-st-same, .cf-chip.cf-st-same { --cf-node-color: var(--ink-soft); --cf-node-fill: var(--sunken); --cf-node-weight: 400; }\n.cf-label { color: var(--cf-node-color); font-weight: var(--cf-node-weight); text-decoration: var(--cf-node-decoration); }\n.cf-node.cf-ancestor > .cf-fold > .cf-row { display: none; }\n.cf-node.cf-ancestor > .cf-fold > .cf-children { margin: 0; padding: 0; border: 0; }\n.cf-svg-wrap {\n  max-width: 100%;\n  overflow: auto;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--sunken);\n  overscroll-behavior: contain;\n}\n.cf-svg { display: block; max-width: none; }\n.cf-ready .cf-svg-wrap { height: clamp(220px, 42vh, 400px); overflow: hidden; touch-action: none; cursor: grab; }\n.cf-diagram-btn, .cf-diagram-close {\n  display: inline-flex; align-items: center; gap: 6px; height: 29px; padding: 0 12px;\n  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);\n  font: 500 12px/1 var(--sans, inherit); color: var(--ink); cursor: pointer;\n}\n.cf-diagram-btn { color: var(--cursor); border-color: var(--cursor); }\n.cf-diagram-btn::after { content: \"\\2197\"; font-size: 12px; }\n.cf-diagram-btn:hover, .cf-diagram-close:hover { background: var(--sunken); }\n.cf-diagram-close { margin-left: auto; }\n.cf-diagram-hint { margin: 0 0 0 auto; font-size: 12px; color: var(--ink-soft); }\n.cf-diagram-hint + .cf-diagram-close { margin-left: 12px; }\n.cf.cf-diagram-open .cf-head { display: none; }\n/* The diagram view fills the browser window, and the graph gets nearly all of its height. */\n.cf.cf-diagram-open {\n  position: fixed; inset: 0; z-index: 50; margin: 0; padding: 12px 20px 20px;\n  background: var(--bg); overflow: auto; overscroll-behavior: contain;\n}\n.cf.cf-diagram-open .cf-controls { position: sticky; top: -12px; z-index: 5; background: var(--bg); padding: 10px 0; }\n.cf.cf-diagram-open .cf-modes, .cf.cf-diagram-open .cf-diagram-btn { display: none !important; }\n.cf.cf-diagram-open { padding-left: 292px; }\n.cf.cf-diagram-open .cf-svg-wrap { height: calc(100vh - 150px); min-height: 320px; }\n/* One canvas at a time: the entry point picked in the list, in its own file. */\n.cf.cf-diagram-open .cf-jump, .cf.cf-diagram-open .cf-bounds, .cf.cf-diagram-open .cf-omitted { display: none !important; }\n.cf.cf-diagram-open .cf-file:not(.cf-file-current) { display: none; }\n.cf.cf-diagram-open .cf-graph-frame:not(.cf-frame-current) { display: none; }\n.cf.cf-diagram-open .cf-file-body { padding-bottom: 0; }\n.cf-diagram-nav {\n  position: fixed; top: 0; bottom: 0; left: 0; width: 276px; overflow-y: auto; z-index: 6;\n  padding: 16px 12px; background: var(--sunken); border-right: 1px solid var(--line);\n}\n.cf-diagram-nav-head { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink); }\n.cf-diagram-nav-file {\n  margin: 14px 0 4px; font: 600 12px var(--mono); color: var(--ink-soft);\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n.cf-diagram-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }\n.cf-diagram-nav button {\n  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;\n  padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--ink); text-align: left; cursor: pointer;\n}\n.cf-diagram-nav button:hover { background: var(--panel); }\n.cf-diagram-nav button[aria-current] { background: var(--panel); box-shadow: inset 3px 0 0 var(--cursor); }\n.cf-diagram-nav-name { max-width: 100%; font: 600 12px/1.35 var(--mono); overflow-wrap: anywhere; }\n.cf-diagram-nav-count { max-width: 100%; font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n@media (max-width: 760px) {\n  .cf.cf-diagram-open { padding-left: 12px; padding-top: 12px; }\n  .cf-diagram-nav { position: static; width: auto; max-height: 30vh; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 6px; }\n}\n.cf-ready .cf-svg-wrap:focus-visible { outline: 2px solid var(--cursor); outline-offset: 2px; }\n.cf-ready .cf-svg-wrap.cf-dragging { cursor: grabbing; user-select: none; }\n.cf-ready .cf-svg { width: 100%; height: 100%; }\n.cf-graph-frame + .cf-graph-frame { margin-top: 14px; }\n.cf-camera-tools { align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }\n.cf-camera-tools button { min-height: 28px; padding: 0 10px; font-size: 12px; }\n.cf-scale { min-width: 4ch; text-align: center; font: 11px var(--mono); color: var(--ink-soft); }\n.cf-omitted { display: none; }\n.cf-ready .cf-omitted { display: block; }\n.cf-node.cf-selected > .cf-row, .cf-node.cf-selected > .cf-fold > .cf-row,\n.cf-chip.cf-selected { outline: 2px solid var(--cursor); outline-offset: 1px; border-radius: 5px; }\n.cf-edge { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }\n.cf-gnode rect { fill: var(--panel); stroke: var(--line-strong); stroke-width: 1.5; }\n.cf-gnode:focus-visible { outline: none; }\n.cf-gzoom circle { fill: var(--panel); stroke: var(--line-strong); }\n.cf-gzoom text { fill: var(--ink); font: 14px var(--mono); }\n.cf-gzoom:hover circle, .cf-gzoom:focus-visible circle { stroke: var(--cursor); stroke-width: 2; }\n.cf-gzoom:focus-visible { outline: none; }\n.cf-glabel { font-family: var(--mono); font-size: 12px; fill: var(--ink); }\n.cf-gloc { font-family: var(--mono); font-size: 10px; fill: var(--ink-soft); }\n.cf-gnode.cf-st-same rect { stroke: var(--line); fill: transparent; }\n.cf-gnode.cf-st-same .cf-glabel { fill: var(--ink-soft); }\n.cf-gnode:not(.cf-st-same) rect { stroke: var(--cf-node-color); fill: var(--panel); }\n.cf-gnode:not(.cf-st-same) .cf-glabel { fill: var(--cf-node-color); font-weight: 600; }\n.cf-gnode:hover rect, .cf-gnode:focus-visible rect { stroke: var(--cursor); stroke-width: 2.5; }\n.cf-gnode.cf-selected rect { stroke: var(--cursor); stroke-width: 3; }\n.cf-paths { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; }\n.cf-path {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 4px 6px;\n  padding: 6px 8px;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--panel);\n}\n.cf-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 100%;\n  min-width: 0;\n  padding: 2px 8px 2px 4px;\n  border: 1px solid var(--line);\n  border-left: 3px solid var(--cf-node-color);\n  border-radius: 6px;\n  background: var(--panel);\n  color: var(--ink);\n}\n.cf-chip:hover, .cf-chip:focus-within { border-color: var(--cursor); }\n.cf-chip-zoom {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 100%;\n  min-width: 0;\n  color: inherit;\n  text-decoration: none;\n}\n.cf-chip-label { min-width: 0; max-width: 36ch; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.cf-chip-loc { min-width: 0; max-width: 28ch; font-size: 10.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.cf-chip.cf-st-same .cf-chip-label { color: var(--ink-soft); }\n.cf-chip:not(.cf-st-same) .cf-chip-label { color: var(--cf-node-color); font-weight: 600; }\n.cf-chip .cf-desc { max-width: 28ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.cf-arrow { color: var(--ink-soft); font-size: 12px; }\n/* One description line per call, only when the backend attached one. */\n.cf-desc { font-size: 11.5px; color: var(--ink-soft); font-style: italic; overflow-wrap: anywhere; }\n.cf-row > .cf-desc { flex: 1 0 100%; order: 5; padding-left: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.cf-row > .cf-src-link { order: 4; }\n.cf-depth { align-items: center; gap: 4px; }\n.cf-depth-label { font-size: 12px; color: var(--ink-soft); }\n.cf-depth-btn { padding: 3px 9px; font-size: 12px; }\n.cf-depth-btn[aria-pressed=\"true\"] { border-color: var(--cursor); color: var(--cursor); font-weight: 600; }\n/* Numbered, clickable call order on the graph edges. */\n.cf-edge-num circle { fill: var(--panel); stroke: var(--line-strong); stroke-width: 1.5; }\n.cf-edge-num text { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-soft); }\n.cf-edge-num:hover circle, .cf-edge-num:focus-visible circle { stroke: var(--cursor); stroke-width: 2; }\n.cf-edge-num:hover text, .cf-edge-num:focus-visible text { fill: var(--cursor); font-weight: 700; }\n.cf-edge-num:focus-visible { outline: none; }\n.cf-gdesc { font-family: var(--mono); font-size: 10px; font-style: italic; fill: var(--ink-soft); }\n/* Resolved definition of one call: a native disclosure without the script, and\n   the body the script clones into its single shared panel. */\n.cf-source { margin: 3px 0 3px 24px; }\n.cf-ready .cf-source { display: none; }\n.cf-src-sum { width: fit-content; cursor: pointer; list-style: none; font-size: 11.5px; color: var(--ink-soft); }\n.cf-src-sum::-webkit-details-marker { display: none; }\n.cf-src-sum::before { content: \"\u25B8\"; margin-right: 6px; font-size: 10px; transition: transform 0.15s ease; display: inline-block; }\n.cf-source[open] > .cf-src-sum::before { transform: rotate(90deg); }\n.cf-src-sum:hover, .cf-src-sum:focus-visible { color: var(--cursor); }\n.cf-src-body { padding: 6px 0 4px; }\n.cf-src-ref { margin: 0 0 5px; font-size: 11.5px; color: var(--ink-soft); overflow-wrap: anywhere; }\n.cf-src-code {\n  margin: 0;\n  padding: 6px 9px;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--sunken);\n  font-family: var(--mono);\n  font-size: 11.5px;\n  line-height: 1.5;\n  overflow-x: auto;\n}\n.cf-src-line { display: block; white-space: pre; }\n.cf-src-no {\n  display: inline-block;\n  width: 4ch;\n  margin-right: 10px;\n  text-align: right;\n  color: var(--ink-soft);\n  user-select: none;\n}\n.cf-src-note { margin: 0; font-size: 11.5px; color: var(--ink-soft); font-style: italic; }\n.cf-src-panel {\n  padding: 8px 12px 10px;\n  border: 1px solid var(--line-strong);\n  border-radius: 6px;\n  background: var(--panel);\n}\n.cf-src-panel-sum { width: fit-content; cursor: pointer; font-size: 12.5px; font-weight: 600; }\n.cf-src-panel-body { padding-top: 6px; }\n.cf-src-panel-body { max-height: 40vh; overflow: auto; }\n.cf-src-head-line { margin: 0 0 6px; font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }\n.cf-src-missing { margin: 0; }\n.cf-src-link {\n  flex: 0 0 auto;\n  font-size: 11px;\n  color: var(--ink-soft);\n  text-decoration: none;\n  white-space: nowrap;\n  padding: 0 6px;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n}\n.cf-src-link:hover { text-decoration: none; }\n.cf-src-link:hover, .cf-src-link:focus-visible { color: var(--cursor); }\n@media (max-width: 680px) {\n  .cf-jump ul { max-height: 38vh; }\n  .cf-jump-link { width: 100%; }\n  .cf-jump-path { max-width: none; flex: 1 1 auto; }\n  .cf-file-body { padding: 0 11px 12px; }\n  .cf-crumb { max-width: 24ch; }\n  .cf-crumb-file { max-width: 12ch; }\n  .cf-source { margin-left: 10px; }\n  .cf-src-no { width: 3ch; margin-right: 7px; }\n  .cf-chip, .cf-chip-zoom { min-width: 0; flex-wrap: wrap; }\n  .cf-chip-loc { overflow-wrap: anywhere; }\n}\n";
+/**
+ * Progressive enhancement for the rendered call flow. Nothing here is
+ * interpolated: the visited trail, mode, depth and the source text all come from
+ * attributes and text already escaped in the DOM, and the navigation state
+ * machine is the module the unit tests call (see CALL_FLOW_NAV_SOURCE).
+ */
+export declare const CALL_FLOW_SCRIPT: string;