@tangle-network/charts 0.15.1 → 0.17.0

package/dist/react/index.js

@@ -1,6 +1,6 @@
 import { G as hatchPath, J as markerPath, b as isRefusal, h as eventsGap, t as timeline, u as MARK_HEADS, y as markName } from "../timeline-CVXBpZzt.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 //#region src/react/sparkline.tsx
 const DEFAULT_SPARKLINE_WIDTH = 96;
 const DEFAULT_SPARKLINE_HEIGHT = 24;
@@ -652,9 +652,9 @@ const durationStyle = {
 	fontFamily: "var(--font-mono, monospace)",
 	fontVariantNumeric: "tabular-nums"
 };
-const ordered = (start, end) => Number.isFinite(start) && Number.isFinite(end) && end >= start;
+const ordered$1 = (start, end) => Number.isFinite(start) && Number.isFinite(end) && end >= start;
 function WaterfallTimeAxis({ windowMs, originMs = 0, widthPx = 208, formatDuration = formatWaterfallDuration, className, fluid = false }) {
-	if (!ordered(0, windowMs) || !Number.isFinite(originMs)) return null;
+	if (!ordered$1(0, windowMs) || !Number.isFinite(originMs)) return null;
 	const ticks = waterfallTicks(windowMs, widthPx);
 	if (windowMs === 0) return null;
 	return /* @__PURE__ */ jsx("div", {
@@ -706,7 +706,7 @@ function WaterfallBar({ startMs, endMs, window, tone = "default", formatDuration
 		minWidth: 0,
 		flex: "1 1 0%"
 	} : timingCell;
-	if (!ordered(startMs, endMs) || !ordered(window.startMs, window.endMs)) return /* @__PURE__ */ jsx("span", {
+	if (!ordered$1(startMs, endMs) || !ordered$1(window.startMs, window.endMs)) return /* @__PURE__ */ jsx("span", {
 		className,
 		"data-waterfall-track": "",
 		"data-unavailable": "true",
@@ -779,7 +779,7 @@ function WaterfallRow({ label, attribution, startMs, endMs, window, tone, format
 				"data-waterfall-duration": "",
 				className: durationClassName,
 				style: durationStyle,
-				children: durationLabel ?? (ordered(startMs, endMs) ? formatDuration(endMs - startMs) : "—")
+				children: durationLabel ?? (ordered$1(startMs, endMs) ? formatDuration(endMs - startMs) : "—")
 			})
 		]
 	});
@@ -2306,11 +2306,68 @@ function DotMap({ positions, radii, colors, palette, extent, rects, labels, dimm
 }
 //#endregion
 //#region src/react/flow-waterfall-model.ts
+/** The CSS hue slot: 0 is the root agent's neutral, then five agent hues cycle. */
+const toneKey = (tone) => tone <= 0 ? 0 : (tone - 1) % 5 + 1;
 const spanFailed = (span) => span.status === "failed";
 const spanRunning = (span) => span.status === "running";
-/** Hierarchy only; the shared timing primitives own all bar geometry.
+const ordered = (span) => Number.isFinite(span.startMs) && Number.isFinite(span.endMs) && span.endMs >= span.startMs;
+/** 542ms, 6.9s, 23s, 1m 22s, 2h 05m: the precision a reader compares at each scale. */
+function formatSpanDuration(ms) {
+	if (!Number.isFinite(ms) || ms < 0) return "—";
+	if (ms < 1e3) return `${Math.round(ms)}ms`;
+	if (ms < 1e4) return `${(ms / 1e3).toFixed(1)}s`;
+	if (ms < 6e4) return `${Math.round(ms / 1e3)}s`;
+	if (ms < 36e5) {
+		const m = Math.floor(ms / 6e4), s = Math.round(ms % 6e4 / 1e3);
+		return s === 60 ? `${m + 1}m` : s ? `${m}m ${s}s` : `${m}m`;
+	}
+	const h = Math.floor(ms / 36e5), m = Math.round(ms % 36e5 / 6e4);
+	return m === 60 ? `${h + 1}h` : `${h}h ${String(m).padStart(2, "0")}m`;
+}
+/** $0.12, $0.005, $12.40; never rounds a recorded nonzero cost to $0.00. */
+function formatCost(usd) {
+	if (usd === 0) return "$0.00";
+	if (usd < .01) return `$${usd.toPrecision(1).replace(/0+$/, "")}`;
+	return `$${usd.toFixed(2)}`;
+}
+/** 9.8k, 754.4k, 1.2M with the exact count left to a title. */
+function formatCount(n) {
+	if (n < 1e3) return String(n);
+	if (n < 1e6) return `${(n / 1e3).toFixed(1)}k`;
+	return `${(n / 1e6).toFixed(1)}M`;
+}
+/** Merge marks closer than `gapMs` so a dense row stays a readable strip of at most `cap` marks. Marks narrower
+* than the gap merge across kinds and take the kind that covers more time; failures and retries stay distinct. */
+function mergeSegments(marks, gapMs, cap = 240) {
+	marks.sort((a, b) => a.startMs - b.startMs);
+	let gap = gapMs;
+	for (let pass = 0; pass < 40; pass++, gap *= 2) {
+		const out = [];
+		const covered = /* @__PURE__ */ new Map();
+		for (const mark of marks) {
+			const last = out[out.length - 1];
+			const width = Math.min(mark.endMs, mark.startMs + gap * 4) - mark.startMs;
+			const distinct = (m) => m.retry || m.kind === "failed";
+			const small = width < gap || last !== void 0 && last.endMs - last.startMs < gap;
+			if (last && !distinct(last) && !distinct(mark) && last.tone === mark.tone && mark.startMs - last.endMs <= gap && (last.kind === mark.kind || small)) {
+				const share = covered.get(last) ?? {
+					model: last.kind === "model" ? last.endMs - last.startMs : 0,
+					tool: last.kind === "tool" ? last.endMs - last.startMs : 0
+				};
+				share[mark.kind === "model" ? "model" : "tool"] += width;
+				covered.set(last, share);
+				last.endMs = Math.max(last.endMs, mark.endMs);
+				last.count += mark.count;
+				last.kind = share.model >= share.tool ? "model" : "tool";
+			} else out.push({ ...mark });
+		}
+		if (out.length <= cap) return out;
+	}
+	return marks;
+}
+/** Hierarchy only; presentation owns geometry.
 * Orphaned parents become roots; cycles are broken without dropping any span. */
-function flowWaterfallRows(trace) {
+function flowWaterfallRows(trace, resolutionMs) {
 	const ids = /* @__PURE__ */ new Set();
 	const rows = [...trace.spans].map((span, i) => ({
 		span,
@@ -2325,12 +2382,18 @@ function flowWaterfallRows(trace) {
 			parentId: span.parentId,
 			name: span.name,
 			kind: span.kind,
-			durationLabel: Number.isFinite(span.startMs) && Number.isFinite(span.endMs) && span.endMs >= span.startMs ? `${((span.endMs - span.startMs) / 1e3).toFixed(1)}s${span.approx ? "~" : ""}` : "—",
+			durationLabel: ordered(span) ? `${formatSpanDuration(span.endMs - span.startMs)}${span.approx ? "~" : ""}` : "—",
 			approx: span.approx === true,
 			ok: !spanFailed(span),
 			depth: 0,
 			hasChildren: false,
-			span
+			span,
+			tone: -1,
+			descendants: 0,
+			segments: [],
+			own: [],
+			retry: span.retryOf !== void 0,
+			hasAgents: false
 		};
 	});
 	const byId = new Map(rows.map((row) => [row.id, row]));
@@ -2353,15 +2416,51 @@ function flowWaterfallRows(trace) {
 			children.set(row.parentId, siblings);
 		}
 	}
-	const ordered = [];
-	const visit = (row, depth) => {
+	const total = Math.max(1, Number.isFinite(trace.totalMs) ? trace.totalMs : 1);
+	const gap = resolutionMs ?? total / 900;
+	const ordered_ = [];
+	let agents = 0;
+	const visit = (row, depth, tone) => {
 		row.depth = depth;
-		row.hasChildren = children.has(row.id);
-		ordered.push(row);
-		for (const child of children.get(row.id) ?? []) visit(child, depth + 1);
+		row.tone = row.kind === "pipeline" ? agents++ : tone;
+		const kids = children.get(row.id) ?? [];
+		row.hasChildren = kids.length > 0;
+		ordered_.push(row);
+		const marks = [];
+		let cost = row.span.costUsd ?? 0;
+		let costKnown = row.span.kind !== "model" || row.span.costUsd !== void 0;
+		for (const child of kids) {
+			for (const mark of visit(child, depth + 1, row.tone)) marks.push(mark);
+			row.descendants += 1 + child.descendants;
+			if (child.kind === "pipeline") row.hasAgents = true;
+			const childCost = child.hasChildren ? child.rollupCostUsd : child.span.costUsd;
+			if (childCost === void 0) {
+				if (child.kind === "model" || child.hasChildren) costKnown = false;
+			} else cost += childCost;
+			if (child.kind !== "pipeline" && child.kind !== "waiting" && ordered(child.span)) row.own.push(segmentOf(child));
+		}
+		if (row.hasChildren && costKnown) row.rollupCostUsd = cost;
+		if (row.hasChildren) {
+			row.segments = mergeSegments(marks.map((mark) => ({ ...mark })), gap);
+			row.own = mergeSegments(row.own, gap);
+		}
+		if (row.kind === "pipeline" || row.kind === "waiting" || !ordered(row.span)) return marks;
+		marks.push(segmentOf(row));
+		return marks;
+	};
+	for (const row of rows) if (!row.parentId) visit(row, 0, -1);
+	return ordered_;
+}
+function segmentOf(row) {
+	return {
+		startMs: row.span.startMs,
+		endMs: spanRunning(row.span) ? Number.POSITIVE_INFINITY : row.span.endMs,
+		kind: !row.ok ? "failed" : row.kind === "model" ? "model" : "tool",
+		tone: row.tone,
+		id: row.id,
+		count: 1,
+		retry: row.retry
 	};
-	for (const row of rows) if (!row.parentId) visit(row, 0);
-	return ordered;
 }
 /** Search keeps ancestor context and deliberately reveals matches inside collapsed branches. */
 function visibleFlowWaterfallRows(rows, query, collapsed) {
@@ -2370,7 +2469,7 @@ function visibleFlowWaterfallRows(rows, query, collapsed) {
 	if (term) {
 		const matching = /* @__PURE__ */ new Set();
 		for (const row of rows) {
-			if (!`${row.name} ${row.kind} ${row.ok ? "" : "failed"} ${row.span.status ?? ""}`.toLowerCase().includes(term)) continue;
+			if (!`${row.name} ${row.span.detail ?? ""} ${row.kind} ${row.ok ? "" : "failed"} ${row.span.status ?? ""}`.toLowerCase().includes(term)) continue;
 			let cursor = row;
 			while (cursor && !matching.has(cursor.id)) {
 				matching.add(cursor.id);
@@ -2386,34 +2485,1066 @@ function visibleFlowWaterfallRows(rows, query, collapsed) {
 		return !isHidden;
 	});
 }
+/** The leaf a reader should look at first: the longest completed or running non-agent step. */
+function slowestRow(rows, clockMs) {
+	let best;
+	let bestMs = -1;
+	for (const row of rows) {
+		if (row.hasChildren || row.kind === "pipeline" || row.kind === "waiting" || row.durationLabel === "—") continue;
+		if (row.span.startMs > clockMs) continue;
+		const ms = (spanRunning(row.span) ? Math.max(row.span.endMs, clockMs) : Math.min(row.span.endMs, clockMs)) - row.span.startMs;
+		if (ms > bestMs) {
+			best = row;
+			bestMs = ms;
+		}
+	}
+	return best;
+}
+/** Busy time per agent row: the union of its own work. Their sum over wall time is the parallel speedup. */
+function busyMs(row, clockMs) {
+	let total = 0, end = -Infinity;
+	for (const mark of row.own) {
+		const a = Math.max(mark.startMs, end), b = Math.min(mark.endMs, clockMs);
+		if (b > a) total += b - a;
+		end = Math.max(end, Math.min(mark.endMs, clockMs));
+	}
+	return total;
+}
+/** Totals as of a playback position, from per-span records. A total the spans do not carry stays the trace's own. */
+function totalsAt(trace, clockMs) {
+	let cost = 0, tokens = 0, models = 0, tools = 0, errors = 0;
+	let costs = false, counted = false;
+	for (const span of trace.spans) {
+		if (span.startMs > clockMs) continue;
+		if (span.kind === "model") models++;
+		if (span.kind === "tool") tools++;
+		if (span.endMs > clockMs) continue;
+		if (spanFailed(span)) errors++;
+		if (span.costUsd !== void 0) {
+			cost += span.costUsd;
+			costs = true;
+		}
+		if (span.promptTokens !== void 0 || span.completionTokens !== void 0) {
+			tokens += (span.promptTokens ?? 0) + (span.completionTokens ?? 0);
+			counted = true;
+		}
+	}
+	return {
+		costUsd: trace.costUsd === void 0 ? void 0 : costs ? cost : trace.costUsd,
+		tokens: counted ? tokens : trace.promptTokens + trace.completionTokens,
+		modelCalls: trace.modelCalls === void 0 ? void 0 : models,
+		toolCalls: tools,
+		errors
+	};
+}
 //#endregion
-//#region src/react/flow-waterfall.tsx
-const TONES = {
-	pipeline: {
-		label: "Orchestrator",
-		color: "fw-orchestrator"
-	},
-	model: {
-		label: "Model call",
-		color: "fw-model"
-	},
-	tool: {
-		label: "Tool call",
-		color: "fw-tool"
-	},
-	waiting: {
-		label: "Waiting",
-		color: "fw-waiting"
-	},
-	handoff: {
-		label: "Handoff",
-		color: "fw-handoff"
-	},
-	failed: {
-		label: "Failed",
-		color: "fw-failed"
+//#region src/react/flow-waterfall-icons.tsx
+const svg = (children, label) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	width: "14",
+	height: "14",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": label ? void 0 : true,
+	role: label ? "img" : void 0,
+	"aria-label": label,
+	children
+});
+/** Kind glyphs drawn when the host supplies no `renderIcon`. Brand marks belong to the host. */
+function KindGlyph({ kind }) {
+	switch (kind) {
+		case "pipeline": return svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "8",
+				cy: "4",
+				r: "1.75"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "4",
+				cy: "12",
+				r: "1.75"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "1.75"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M8 5.75v2.5M8 8.25 4.8 10.6M8 8.25l3.2 2.35" })
+		] }));
+		case "model": return svg(/* @__PURE__ */ jsx("path", { d: "M8 2.5c.5 2.8 2.2 4.6 5 5.5-2.8.9-4.5 2.7-5 5.5-.5-2.8-2.2-4.6-5-5.5 2.8-.9 4.5-2.7 5-5.5Z" }));
+		case "waiting": return svg(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M4.5 2.5h7M4.5 13.5h7" }), /* @__PURE__ */ jsx("path", { d: "M5.5 2.5c0 3 5 3 5 5.5s-5 2.5-5 5.5M10.5 2.5c0 3-5 3-5 5.5" })] }));
+		case "handoff": return svg(/* @__PURE__ */ jsx("path", { d: "M3 3v5.5a2 2 0 0 0 2 2h8M10.5 8l2.5 2.5-2.5 2.5" }));
+		default: return svg(/* @__PURE__ */ jsx("path", { d: "M10.2 2.8a3.2 3.2 0 0 0-4 4L2.8 10.2a1.4 1.4 0 0 0 2 2l3.4-3.4a3.2 3.2 0 0 0 4-4l-1.9 1.9-1.6-.4-.4-1.6 1.9-1.9Z" }));
 	}
+}
+const ChevronGlyph = () => svg(/* @__PURE__ */ jsx("path", { d: "m6 4 4 4-4 4" }));
+const SearchGlyph = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+	cx: "7",
+	cy: "7",
+	r: "4.25"
+}), /* @__PURE__ */ jsx("path", { d: "m10.25 10.25 3.25 3.25" })] }));
+const PlayGlyph = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	width: "14",
+	height: "14",
+	"aria-hidden": true,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M4.5 3.2v9.6a.6.6 0 0 0 .9.5l7.6-4.8a.6.6 0 0 0 0-1L5.4 2.7a.6.6 0 0 0-.9.5Z",
+		fill: "currentColor"
+	})
+});
+const PauseGlyph = () => /* @__PURE__ */ jsxs("svg", {
+	viewBox: "0 0 16 16",
+	width: "14",
+	height: "14",
+	"aria-hidden": true,
+	children: [/* @__PURE__ */ jsx("rect", {
+		x: "4",
+		y: "3",
+		width: "2.75",
+		height: "10",
+		rx: ".8",
+		fill: "currentColor"
+	}), /* @__PURE__ */ jsx("rect", {
+		x: "9.25",
+		y: "3",
+		width: "2.75",
+		height: "10",
+		rx: ".8",
+		fill: "currentColor"
+	})]
+});
+const RestartGlyph = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M3 8a5 5 0 1 0 1.5-3.55" }), /* @__PURE__ */ jsx("path", { d: "M3 2.75V5.5h2.75" })] }));
+const RetryGlyph = ({ label }) => svg(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M12.5 8A4.5 4.5 0 1 1 11 4.6" }), /* @__PURE__ */ jsx("path", { d: "M11.5 2v3h-3" })] }), label);
+const FailGlyph = ({ label }) => svg(/* @__PURE__ */ jsx("path", { d: "m4.5 4.5 7 7m0-7-7 7" }), label);
+const CloseGlyph = () => svg(/* @__PURE__ */ jsx("path", { d: "m4.5 4.5 7 7m0-7-7 7" }));
+const TraceGlyph = () => svg(/* @__PURE__ */ jsx("path", { d: "M8 1.5v3M8 11.5v3M1.5 8h3M11.5 8h3M3.4 3.4l2.1 2.1M10.5 10.5l2.1 2.1M3.4 12.6l2.1-2.1M10.5 5.5l2.1-2.1" }));
+const AlertGlyph = ({ label }) => svg(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M8 2.5 14 13H2L8 2.5Z" }), /* @__PURE__ */ jsx("path", { d: "M8 6.5v3M8 11.25v.01" })] }), label);
+const ZoomInGlyph = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+	cx: "7",
+	cy: "7",
+	r: "4.25"
+}), /* @__PURE__ */ jsx("path", { d: "m10.25 10.25 3.25 3.25M5 7h4M7 5v4" })] }));
+const ZoomOutGlyph = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+	cx: "7",
+	cy: "7",
+	r: "4.25"
+}), /* @__PURE__ */ jsx("path", { d: "m10.25 10.25 3.25 3.25M5 7h4" })] }));
+const FitGlyph = () => svg(/* @__PURE__ */ jsx("path", { d: "M2.5 6V3.5a1 1 0 0 1 1-1H6M10 2.5h2.5a1 1 0 0 1 1 1V6M13.5 10v2.5a1 1 0 0 1-1 1H10M6 13.5H3.5a1 1 0 0 1-1-1V10" }));
+const ReturnGlyph = () => svg(/* @__PURE__ */ jsx("path", { d: "M6 3.5 3 6.5l3 3M3 6.5h6.5a3.5 3.5 0 0 1 3.5 3.5v2" }));
+//#endregion
+//#region src/react/flow-waterfall-card.tsx
+const KIND_LABEL = {
+	pipeline: "Agent",
+	model: "LLM call",
+	tool: "Tool call",
+	waiting: "Waiting",
+	handoff: "Handoff"
 };
+const unknown = /* @__PURE__ */ jsx("span", {
+	className: "fw-unknown",
+	title: "Not recorded by the harness",
+	children: "Unknown"
+});
+const count = (n) => n === void 0 ? unknown : /* @__PURE__ */ jsx("span", {
+	title: n.toLocaleString(),
+	children: formatCount(n)
+});
+/** The span card: what ran, for how long, at what recorded cost, on what input. */
+function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderIcon, compact }) {
+	const span = row.span;
+	const running = spanRunning(span);
+	const end = running ? Math.max(span.endMs, clockMs) : span.endMs;
+	const status = running ? "Running" : row.ok ? "Done" : "Failed";
+	const tokens = span.kind === "model" || span.kind === "pipeline" || span.promptTokens !== void 0;
+	const owner = agent && agent.id !== row.id ? agent : void 0;
+	const duration = Number.isFinite(end - span.startMs) && end >= span.startMs ? formatSpanDuration(end - span.startMs) : "—";
+	if (compact) {
+		const who = owner ?? row;
+		const tokenCount = span.promptTokens !== void 0 || span.completionTokens !== void 0 ? (span.promptTokens ?? 0) + (span.completionTokens ?? 0) : void 0;
+		const meta = [
+			span.kind === "model" ? "Thinking" : KIND_LABEL[span.kind],
+			duration,
+			tokenCount !== void 0 ? `${tokenCount.toLocaleString()} tokens` : void 0,
+			span.costUsd !== void 0 ? formatCost(span.costUsd) : void 0
+		];
+		return /* @__PURE__ */ jsxs("div", {
+			id,
+			role: pinned ? "dialog" : "tooltip",
+			"aria-label": pinned ? `${span.name} details` : void 0,
+			className: "fw-card fw-card-compact",
+			"data-tone": toneKey(who.tone),
+			style: {
+				left,
+				top
+			},
+			onKeyDown: (event) => {
+				if (event.key === "Escape") {
+					event.stopPropagation();
+					onClose();
+				}
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "fw-card-agent",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "fw-agent-dot",
+							"aria-hidden": true
+						}),
+						who.name,
+						who.span.detail && /* @__PURE__ */ jsxs("span", {
+							className: "fw-muted",
+							children: [" ", who.span.detail]
+						}),
+						!row.ok && /* @__PURE__ */ jsx("span", {
+							className: "fw-pill fw-pill-failed",
+							style: { marginLeft: "auto" },
+							children: "Failed"
+						}),
+						pinned && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "fw-icon-button",
+							style: {
+								marginLeft: row.ok ? "auto" : 0,
+								width: 20,
+								height: 20
+							},
+							"aria-label": "Close details",
+							onClick: onClose,
+							autoFocus: true,
+							children: /* @__PURE__ */ jsx(CloseGlyph, {})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "fw-card-result",
+					children: span.output ?? span.name
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "fw-card-meta",
+					children: meta.filter(Boolean).join(" · ")
+				}),
+				span.input && /* @__PURE__ */ jsxs("div", {
+					className: "fw-card-message",
+					children: [/* @__PURE__ */ jsx(ReturnGlyph, {}), /* @__PURE__ */ jsx("span", { children: span.input })]
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		role: pinned ? "dialog" : "tooltip",
+		"aria-label": pinned ? `${span.name} details` : void 0,
+		className: "fw-card",
+		"data-tone": toneKey(row.tone),
+		style: {
+			left,
+			top
+		},
+		onKeyDown: (event) => {
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				onClose();
+			}
+		},
+		children: [
+			owner && /* @__PURE__ */ jsxs("div", {
+				className: "fw-card-agent",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "fw-agent-dot",
+						"aria-hidden": true
+					}),
+					owner.name,
+					owner.span.detail && /* @__PURE__ */ jsxs("span", {
+						className: "fw-muted",
+						children: [" ", owner.span.detail]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "fw-card-head",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "fw-icon-tile",
+						"aria-hidden": true,
+						children: renderIcon?.(span) ?? /* @__PURE__ */ jsx(KindGlyph, { kind: span.kind })
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "fw-card-title",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "fw-card-name",
+							children: span.name
+						}), span.detail && /* @__PURE__ */ jsx("div", {
+							className: "fw-muted",
+							children: span.detail
+						})]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: `fw-pill fw-pill-${status.toLowerCase()}`,
+						children: status
+					}),
+					pinned && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "fw-icon-button",
+						"aria-label": "Close details",
+						onClick: onClose,
+						autoFocus: true,
+						children: /* @__PURE__ */ jsx(CloseGlyph, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("dl", {
+				className: "fw-card-stats",
+				children: [
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Duration" }), /* @__PURE__ */ jsx("dd", { children: duration })] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Started" }), /* @__PURE__ */ jsxs("dd", { children: ["+", formatSpanDuration(Math.max(0, span.startMs))] })] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Cost" }), /* @__PURE__ */ jsx("dd", { children: span.costUsd === void 0 ? unknown : formatCost(span.costUsd) })] }),
+					tokens && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Tokens in" }), /* @__PURE__ */ jsx("dd", { children: count(span.promptTokens) })] }),
+					tokens && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Tokens out" }), /* @__PURE__ */ jsx("dd", { children: count(span.completionTokens) })] }),
+					row.hasChildren && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Steps" }), /* @__PURE__ */ jsx("dd", { children: row.descendants })] })
+				]
+			}),
+			span.input && /* @__PURE__ */ jsxs("div", {
+				className: "fw-card-text",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "fw-card-label",
+					children: "Input"
+				}), /* @__PURE__ */ jsx("p", { children: span.input })]
+			}),
+			span.output && /* @__PURE__ */ jsxs("div", {
+				className: "fw-card-text",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "fw-card-label",
+					children: row.ok ? "Output" : "Error"
+				}), /* @__PURE__ */ jsx("p", { children: span.output })]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/react/flow-waterfall-row.tsx
+/** Running ends are drawn to the clock; CSS clips with min(), so a far-future end stands in for "still open". */
+const OPEN_END = 0x9184e72a000;
+const at = (startMs, endMs) => ({
+	"--s": startMs,
+	"--e": Number.isFinite(endMs) ? endMs : OPEN_END
+});
+function Segment({ mark, events, agentView }) {
+	const glyph = mark.kind === "failed" ? /* @__PURE__ */ jsx(FailGlyph, {}) : mark.retry ? /* @__PURE__ */ jsx(RetryGlyph, {}) : null;
+	return /* @__PURE__ */ jsx("span", {
+		className: `fw-seg fw-seg-${mark.kind}`,
+		"data-tone": toneKey(mark.tone),
+		style: at(mark.startMs, mark.endMs),
+		onPointerEnter: agentView ? (event) => events.onInspect(mark.id, event.currentTarget) : void 0,
+		onClick: agentView ? (event) => {
+			event.stopPropagation();
+			events.onPin(mark.id, event.currentTarget);
+		} : void 0,
+		children: glyph && /* @__PURE__ */ jsx("span", {
+			className: "fw-glyph",
+			children: glyph
+		})
+	});
+}
+/** A span the clock is inside: it grows live, or playback has not reached its end. */
+const open = (row, clockMs) => spanRunning(row.span) || row.span.startMs <= clockMs && clockMs < row.span.endMs;
+function endLabel(row, clockMs) {
+	const span = row.span;
+	if (row.durationLabel === "—") return "—";
+	if (row.approx && span.endMs === span.startMs && !spanRunning(span)) return span.costUsd === void 0 ? "" : formatCost(span.costUsd);
+	if (!spanRunning(span) && clockMs < span.endMs) return `${formatSpanDuration(Math.max(0, clockMs - span.startMs))}${row.approx ? "~" : ""}`;
+	const duration = spanRunning(span) ? `${formatSpanDuration(Math.max(span.endMs, clockMs) - span.startMs)}${row.approx ? "~" : ""}` : row.durationLabel;
+	const cost = span.costUsd ?? (row.rollupCostUsd ? row.rollupCostUsd : void 0);
+	return cost === void 0 ? duration : `${duration} · ${formatCost(cost)}`;
+}
+/** One trace row. Geometry comes from CSS variables, so a row re-renders only when its own state changes. */
+const FlowRow = memo(function FlowRow(props) {
+	const { row, view, top, collapsed, searching, slowest, active, focusable, selected, sticky, clockMs, renderIcon } = props;
+	const span = row.span;
+	const running = spanRunning(span);
+	const agentView = view === "agents";
+	const folded = row.hasChildren && collapsed && !searching;
+	const invalid = row.durationLabel === "—";
+	const isAgent = row.kind === "pipeline";
+	const kind = !row.ok ? "failed" : row.kind;
+	const marks = isAgent || row.hasChildren ? folded && !agentView ? row.segments : row.own : [];
+	const label = endLabel(row, clockMs);
+	const inspect = (event) => props.onInspect(row.id, event.currentTarget);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "row",
+		"data-span-id": row.id,
+		"data-span-kind": kind,
+		"data-slowest": slowest || void 0,
+		"aria-level": agentView ? void 0 : row.depth + 1,
+		"aria-expanded": row.hasChildren && !agentView ? !folded : void 0,
+		"aria-selected": selected,
+		tabIndex: focusable ? 0 : -1,
+		"data-tone": toneKey(row.tone),
+		className: `fw-row${active ? " fw-active" : ""}${sticky ? " fw-sticky-row" : ""}${isAgent ? " fw-agent-row" : ""}`,
+		style: { transform: `translateY(${top}px)` },
+		onFocus: (event) => {
+			if (event.target === event.currentTarget) props.onActivate(row);
+		},
+		onClick: () => props.onActivate(row),
+		children: [/* @__PURE__ */ jsxs("div", {
+			role: "gridcell",
+			className: "fw-label",
+			style: { "--depth": agentView ? 0 : row.depth },
+			children: [
+				!agentView && /* @__PURE__ */ jsx("span", {
+					className: "fw-guides",
+					"aria-hidden": true
+				}),
+				!agentView && (row.hasChildren ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: -1,
+					className: `fw-toggle${folded ? "" : " fw-open"}`,
+					disabled: searching,
+					"aria-label": `${folded ? "Expand" : "Collapse"} ${row.name}`,
+					"aria-expanded": !folded,
+					onClick: (event) => {
+						event.stopPropagation();
+						props.onToggle(row);
+					},
+					children: /* @__PURE__ */ jsx(ChevronGlyph, {})
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "fw-toggle-space",
+					"aria-hidden": true
+				})),
+				agentView && /* @__PURE__ */ jsx("span", {
+					className: "fw-agent-dot",
+					"aria-hidden": true
+				}),
+				!agentView && /* @__PURE__ */ jsx("span", {
+					className: "fw-icon-tile",
+					"aria-hidden": true,
+					children: renderIcon?.(span) ?? /* @__PURE__ */ jsx(KindGlyph, { kind: span.kind })
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "fw-names",
+					title: `${row.name}${span.detail ? ` · ${span.detail}` : ""} · ${KIND_LABEL[span.kind]}${running ? " · running" : ""}${row.ok ? "" : " · failed"}`,
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: `fw-span-name${isAgent || row.hasChildren ? " fw-strong" : ""}`,
+						children: [running && /* @__PURE__ */ jsx("span", {
+							className: "fw-spinner",
+							role: "status",
+							"aria-label": "running"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "fw-name-text",
+							children: row.name
+						})]
+					}), agentView && renderIcon && /* @__PURE__ */ jsx("span", {
+						className: "fw-detail-icon",
+						"aria-hidden": true,
+						children: renderIcon(span)
+					})]
+				}),
+				folded && /* @__PURE__ */ jsxs("span", {
+					className: "fw-count",
+					"aria-label": `${row.descendants} hidden steps`,
+					children: ["+", row.descendants]
+				}),
+				!row.ok && /* @__PURE__ */ jsx("span", {
+					className: "fw-alert",
+					children: /* @__PURE__ */ jsx(AlertGlyph, { label: "failed" })
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			role: "gridcell",
+			className: "fw-lane",
+			"data-waterfall-track": true,
+			"aria-label": `${KIND_LABEL[span.kind]}, ${label}${slowest ? ", slowest step" : ""}`,
+			children: invalid ? /* @__PURE__ */ jsx("span", {
+				className: "fw-invalid",
+				children: "—"
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: `fw-bar fw-k-${isAgent ? "pipeline" : kind}${row.approx ? " fw-approx" : ""}${marks.length ? " fw-has-marks" : ""}${row.hasAgents ? " fw-has-agents" : ""}`,
+					"data-tone": toneKey(row.tone),
+					style: at(span.startMs, running ? OPEN_END : span.endMs),
+					onPointerEnter: inspect,
+					onPointerLeave: props.onLeave,
+					onClick: (event) => {
+						event.stopPropagation();
+						props.onPin(row.id, event.currentTarget);
+					},
+					children: [!isAgent && !row.ok && /* @__PURE__ */ jsx("span", {
+						className: "fw-glyph",
+						children: /* @__PURE__ */ jsx(FailGlyph, {})
+					}), !isAgent && row.ok && row.retry && /* @__PURE__ */ jsx("span", {
+						className: "fw-glyph",
+						children: /* @__PURE__ */ jsx(RetryGlyph, {})
+					})]
+				}),
+				marks.map((mark, i) => /* @__PURE__ */ jsx(Segment, {
+					mark,
+					events: props,
+					agentView
+				}, `${mark.id}-${i}`)),
+				!agentView && /* @__PURE__ */ jsxs("span", {
+					className: "fw-end",
+					style: at(span.startMs, running ? 0x9184e72a000 : span.endMs),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "fw-duration",
+						children: label
+					}), slowest && /* @__PURE__ */ jsx("span", {
+						className: "fw-badge",
+						children: "Slowest"
+					})]
+				})
+			] })
+		})]
+	});
+}, (a, b) => a.row === b.row && a.view === b.view && a.top === b.top && a.collapsed === b.collapsed && a.searching === b.searching && a.slowest === b.slowest && a.active === b.active && a.focusable === b.focusable && a.selected === b.selected && a.sticky === b.sticky && a.renderIcon === b.renderIcon && (a.clockMs === b.clockMs || !open(a.row, a.clockMs) && !open(b.row, b.clockMs)));
+/** An elbow connector between two rows at one moment, drawn in the row's tone; appears when the clock reaches it. */
+function LinkMark({ link, rowHeight }) {
+	const upper = Math.min(link.from, link.to), lower = Math.max(link.from, link.to);
+	const style = {
+		...at(link.atMs, link.atMs),
+		top: upper * rowHeight + rowHeight / 2 + 5,
+		height: (lower - upper) * rowHeight - 5
+	};
+	return /* @__PURE__ */ jsx("span", {
+		className: `fw-link fw-link-${link.dir}`,
+		"data-tone": toneKey(link.tone),
+		style,
+		"aria-hidden": true
+	});
+}
+//#endregion
+//#region src/react/flow-waterfall-time.ts
+/** Time-axis geometry for the trace inspector: clock-aligned steps, labels and the zoom window. */
+const STEPS = [
+	1,
+	2,
+	5,
+	10,
+	20,
+	50,
+	100,
+	200,
+	500,
+	1e3,
+	2e3,
+	5e3,
+	1e4,
+	15e3,
+	3e4,
+	6e4,
+	12e4,
+	3e5,
+	6e5,
+	9e5,
+	18e5,
+	36e5,
+	72e5,
+	108e5,
+	216e5,
+	432e5,
+	864e5
+];
+/** The smallest clock-aligned step that keeps labels at least `minGapPx` apart. */
+function clockStepMs(msPerPx, minGapPx = 72) {
+	const want = msPerPx * minGapPx;
+	return STEPS.find((step) => step >= want) ?? Math.ceil(want / 864e5) * 864e5;
+}
+/** Tick positions covering [startMs, endMs]. */
+function clockTicks(startMs, endMs, widthPx, minGapPx = 72) {
+	if (!(widthPx > 0) || !(endMs > startMs)) return [0];
+	const step = clockStepMs((endMs - startMs) / widthPx, minGapPx);
+	const ticks = [];
+	for (let t = Math.ceil(startMs / step) * step; t <= endMs && ticks.length < 400; t += step) ticks.push(t);
+	return ticks;
+}
+/** 0s, 500ms, 20s, 1m 30s, 2h, 1h 15m: an axis label at the step's own precision. */
+function formatClock(ms) {
+	if (ms === 0) return "0s";
+	if (ms < 1e3) return `${Math.round(ms)}ms`;
+	if (ms < 6e4) return `${+(ms / 1e3).toFixed(1)}s`;
+	if (ms < 36e5) {
+		const m = Math.floor(ms / 6e4), s = Math.round(ms % 6e4 / 1e3);
+		return s ? `${m}m ${s}s` : `${m}m`;
+	}
+	const h = Math.floor(ms / 36e5), m = Math.round(ms % 36e5 / 6e4);
+	return m ? `${h}h ${m}m` : `${h}h`;
+}
+/** Zoom about an anchor time; the window never inverts, never narrows below 50 ms and never leaves [0, limit]. */
+function zoomWindow(view, factor, anchorMs, limitMs) {
+	const span = view.endMs - view.startMs;
+	const next = Math.min(Math.max(50, span * factor), Math.max(limitMs, 50));
+	const ratio = span > 0 ? (anchorMs - view.startMs) / span : .5;
+	return clampWindow({
+		startMs: anchorMs - ratio * next,
+		endMs: anchorMs - ratio * next + next
+	}, limitMs);
+}
+function clampWindow(view, limitMs) {
+	const span = view.endMs - view.startMs;
+	let start = Math.max(0, view.startMs);
+	if (start + span > limitMs) start = Math.max(0, limitMs - span);
+	return {
+		startMs: start,
+		endMs: start + span
+	};
+}
+//#endregion
+//#region src/react/flow-waterfall-body.tsx
+const ROW_HEIGHT = {
+	spans: 36,
+	agents: 52
+};
+const OVERSCAN = 8;
+/** Rows re-render once per CHUNK rows scrolled; overscan covers the rows in between. */
+const CHUNK = 4;
+const STICKY_LEVELS = 3;
+/** Spawn links from each agent to its parent agent, and explicit handoffs to their targets; agent view adds returns. */
+function linksFor(rows, byId, view) {
+	const index = new Map(rows.map((row, i) => [row.id, i]));
+	const owner = (row) => {
+		let id = row.parentId;
+		while (id !== void 0) {
+			const i = index.get(id);
+			if (i !== void 0 && (view === "spans" || rows[i].kind === "pipeline")) return i;
+			id = byId.get(id)?.parentId;
+		}
+	};
+	const links = [];
+	const explicit = /* @__PURE__ */ new Set();
+	for (const row of rows) {
+		const target = row.span.handoffTo !== void 0 ? index.get(row.span.handoffTo) : void 0;
+		const from = row.kind === "pipeline" ? index.get(row.id) : owner(row);
+		if (target === void 0 || from === void 0 || target === from) continue;
+		explicit.add(rows[target].id);
+		links.push({
+			id: `h-${row.id}`,
+			from,
+			to: target,
+			atMs: row.span.startMs,
+			tone: rows[target].tone,
+			dir: target > from ? "down" : "up"
+		});
+	}
+	for (const [i, row] of rows.entries()) {
+		if (row.kind !== "pipeline" || row.parentId === void 0) continue;
+		const parent = owner(row);
+		if (parent === void 0) continue;
+		if (!explicit.has(row.id)) links.push({
+			id: `s-${row.id}`,
+			from: parent,
+			to: i,
+			atMs: row.span.startMs,
+			tone: row.tone,
+			dir: "down"
+		});
+		if (view === "agents" && !spanRunning(row.span) && Number.isFinite(row.span.endMs)) links.push({
+			id: `r-${row.id}`,
+			from: i,
+			to: parent,
+			atMs: row.span.endMs,
+			tone: row.tone,
+			dir: "up"
+		});
+	}
+	return links;
+}
+/** The scrolling tree: rows are virtualized, ancestors stay pinned, the axis and cursor stay in view. */
+function FlowBody(props) {
+	const { rows, view, maxHeight, collapsed, searching, slowestId, activeId, selectedId, clockMs, window: win, trackPx, showCursor, zoomed } = props;
+	const rowHeight = ROW_HEIGHT[view];
+	const scroller = useRef(null);
+	const surface = useRef(null);
+	const [chunk, setChunk] = useState(0);
+	const [viewport, setViewport] = useState(maxHeight);
+	const latest = useRef(props);
+	latest.current = props;
+	const height = Math.min(maxHeight, Math.max(rows.length, 1) * rowHeight);
+	const links = useMemo(() => linksFor(rows, props.byId, view), [
+		rows,
+		props.byId,
+		view
+	]);
+	const index = useMemo(() => new Map(rows.map((row, i) => [row.id, i])), [rows]);
+	const msPerPx = (win.endMs - win.startMs) / Math.max(1, trackPx);
+	const tickEnd = win.startMs + (trackPx + (view === "spans" ? 72 : 0)) * msPerPx;
+	const ticks = clockTicks(win.startMs, tickEnd, Math.max(1, trackPx + (view === "spans" ? 72 : 0)));
+	useEffect(() => {
+		const element = scroller.current;
+		if (!element) return;
+		const observer = new ResizeObserver(() => setViewport(element.clientHeight));
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+	useEffect(() => {
+		const element = surface.current;
+		if (!element) return;
+		const wheel = (event) => {
+			const { window: w, trackPx: px, zoomed: isZoomed } = latest.current;
+			const lane = element.querySelector("[data-fw-track]");
+			if (!lane) return;
+			const rect = lane.getBoundingClientRect();
+			const msPerPx = (w.endMs - w.startMs) / Math.max(1, px);
+			if (event.ctrlKey || event.metaKey) {
+				event.preventDefault();
+				const anchor = w.startMs + (event.clientX - rect.left - 12) * msPerPx;
+				latest.current.onZoom(Math.exp(event.deltaY * .0025), anchor);
+			} else if (isZoomed && (event.shiftKey || Math.abs(event.deltaX) > Math.abs(event.deltaY))) {
+				event.preventDefault();
+				latest.current.onPan((event.shiftKey ? event.deltaY : event.deltaX) * msPerPx);
+			}
+		};
+		element.addEventListener("wheel", wheel, { passive: false });
+		return () => element.removeEventListener("wheel", wheel);
+	}, []);
+	const first = Math.max(0, chunk * CHUNK - OVERSCAN);
+	const last = Math.min(rows.length, chunk * CHUNK + Math.ceil(viewport / rowHeight) + CHUNK + OVERSCAN);
+	const focusRow = (id) => {
+		const i = index.get(id);
+		const element = scroller.current;
+		if (i === void 0 || !element) return;
+		const offset = (view === "spans" ? Math.min(STICKY_LEVELS, rows[i].depth) : 0) * rowHeight;
+		if (i * rowHeight - offset < element.scrollTop) element.scrollTop = Math.max(0, i * rowHeight - offset);
+		else if ((i + 1) * rowHeight > element.scrollTop + element.clientHeight) element.scrollTop = (i + 1) * rowHeight - element.clientHeight;
+		props.onActiveChange(id);
+		requestAnimationFrame(() => element.querySelector(`.fw-canvas [data-span-id="${CSS.escape(id)}"]`)?.focus({ preventScroll: true }));
+	};
+	const keydown = (event) => {
+		const current = index.get(activeId ?? "") ?? 0;
+		const row = rows[current];
+		if (!row) return;
+		const page = Math.max(1, Math.floor(viewport / rowHeight) - 1);
+		const move = (i) => {
+			event.preventDefault();
+			focusRow(rows[Math.max(0, Math.min(rows.length - 1, i))].id);
+		};
+		const folded = collapsed.has(row.id) && !searching;
+		switch (event.key) {
+			case "ArrowDown": return move(current + 1);
+			case "ArrowUp": return move(current - 1);
+			case "PageDown": return move(current + page);
+			case "PageUp": return move(current - page);
+			case "Home": return move(0);
+			case "End": return move(rows.length - 1);
+			case "ArrowRight":
+				if (view === "spans" && row.hasChildren && folded) {
+					event.preventDefault();
+					props.onToggle(row);
+				} else if (view === "agents" && row.hasChildren) {
+					event.preventDefault();
+					props.onToggle(row);
+				} else if (row.hasChildren) move(current + 1);
+				return;
+			case "ArrowLeft":
+				if (view === "spans" && row.hasChildren && !folded) {
+					event.preventDefault();
+					props.onToggle(row);
+				} else if (row.parentId !== void 0 && index.has(row.parentId)) move(index.get(row.parentId));
+				return;
+			case "Enter":
+			case " ": {
+				event.preventDefault();
+				const bar = scroller.current?.querySelector(`[data-span-id="${CSS.escape(row.id)}"] .fw-bar`);
+				if (bar) props.onPin(row.id, bar);
+			}
+		}
+	};
+	const scrub = (event) => {
+		const lane = event.currentTarget;
+		const rect = lane.getBoundingClientRect();
+		const toMs = (x) => Math.max(0, win.startMs + (x - rect.left - 12) * (win.endMs - win.startMs) / Math.max(1, trackPx));
+		props.onScrub(toMs(event.clientX));
+		lane.setPointerCapture(event.pointerId);
+		const moveScrub = (e) => props.onScrub(toMs(e.clientX));
+		const up = () => {
+			lane.removeEventListener("pointermove", moveScrub);
+			lane.removeEventListener("pointerup", up);
+		};
+		lane.addEventListener("pointermove", moveScrub);
+		lane.addEventListener("pointerup", up);
+	};
+	const resize = (event) => {
+		const handle = event.currentTarget;
+		const startX = event.clientX, startW = props.nameWidth;
+		handle.setPointerCapture(event.pointerId);
+		const moveResize = (e) => props.onNameWidth(startW + e.clientX - startX);
+		const up = () => {
+			handle.removeEventListener("pointermove", moveResize);
+			handle.removeEventListener("pointerup", up);
+		};
+		handle.addEventListener("pointermove", moveResize);
+		handle.addEventListener("pointerup", up);
+	};
+	const axis = /* @__PURE__ */ jsxs("div", {
+		className: `fw-axis fw-axis-${view === "agents" ? "bottom" : "top"}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "fw-axis-label",
+			children: [view === "spans" && /* @__PURE__ */ jsx(Fragment, { children: props.onExpandAll && /* @__PURE__ */ jsxs("span", {
+				className: "fw-branch-controls",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "fw-text-button",
+					onClick: props.onExpandAll,
+					children: "Expand all"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "fw-text-button",
+					onClick: props.onCollapseAll,
+					children: "Collapse all"
+				})]
+			}) }), /* @__PURE__ */ jsx("span", {
+				role: "separator",
+				"aria-orientation": "vertical",
+				"aria-label": "Resize the step column",
+				tabIndex: 0,
+				className: "fw-resize",
+				"aria-valuenow": Math.round(props.nameWidth),
+				"aria-valuemin": 140,
+				"aria-valuemax": 560,
+				onPointerDown: resize,
+				onKeyDown: (event) => {
+					if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+						event.preventDefault();
+						props.onNameWidth(props.nameWidth + (event.key === "ArrowLeft" ? -16 : 16));
+					}
+				}
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "fw-axis-track",
+			"data-fw-track": true,
+			ref: props.onTrack,
+			onPointerDown: scrub,
+			title: "Drag to scrub",
+			children: [ticks.map((tick) => /* @__PURE__ */ jsx("span", {
+				className: "fw-tick",
+				style: { "--s": tick },
+				children: formatClock(tick)
+			}, tick)), showCursor && /* @__PURE__ */ jsx("span", {
+				className: "fw-cursor-handle",
+				"aria-hidden": true
+			})]
+		})]
+	});
+	const row = (item, i, isSticky = false) => /* @__PURE__ */ jsx(FlowRow, {
+		row: item,
+		view,
+		top: i * rowHeight,
+		collapsed: collapsed.has(item.id),
+		searching,
+		slowest: item.id === slowestId,
+		active: item.id === activeId,
+		focusable: !isSticky && (item.id === activeId || (activeId === void 0 || !index.has(activeId)) && i === 0),
+		selected: item.id === selectedId,
+		sticky: isSticky,
+		clockMs,
+		renderIcon: props.renderIcon,
+		onToggle: props.onToggle,
+		onInspect: props.onInspect,
+		onLeave: props.onLeave,
+		onPin: props.onPin,
+		onActivate: (item) => props.onActiveChange(item.id)
+	}, isSticky ? `sticky-${item.id}` : item.id);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `fw-body fw-view-${view}${zoomed ? " fw-zoomed" : ""}`,
+		ref: surface,
+		children: [
+			view === "spans" && axis,
+			/* @__PURE__ */ jsxs("div", {
+				className: "fw-viewport",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "fw-gridlayer",
+						"aria-hidden": true,
+						children: ticks.map((tick) => /* @__PURE__ */ jsx("span", {
+							className: "fw-gridline",
+							style: { "--s": tick }
+						}, tick))
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						ref: scroller,
+						role: "treegrid",
+						"aria-label": "Trace timeline",
+						"aria-rowcount": rows.length,
+						"aria-multiselectable": false,
+						tabIndex: -1,
+						className: "fw-scroller",
+						style: {
+							height,
+							maxHeight
+						},
+						onKeyDown: keydown,
+						onScroll: (event) => {
+							const next = Math.floor(event.currentTarget.scrollTop / rowHeight / CHUNK);
+							if (next !== chunk) setChunk(next);
+						},
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "fw-canvas",
+							style: { height: rows.length * rowHeight },
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "fw-links",
+								"aria-hidden": true,
+								children: links.filter((link) => Math.max(link.from, link.to) >= first && Math.min(link.from, link.to) <= last).map((link) => /* @__PURE__ */ jsx(LinkMark, {
+									link,
+									rowHeight
+								}, link.id))
+							}), rows.slice(first, last).map((item, offset) => row(item, first + offset))]
+						}), rows.length === 0 && /* @__PURE__ */ jsx("p", {
+							role: "status",
+							className: "fw-empty",
+							children: props.emptyText
+						})]
+					}),
+					view === "spans" && /* @__PURE__ */ jsx(StickyRows, {
+						scroller,
+						rows,
+						index,
+						rowHeight,
+						render: row
+					}),
+					props.markers?.length ? /* @__PURE__ */ jsx("div", {
+						className: "fw-marker-layer",
+						children: props.markers.map((marker) => /* @__PURE__ */ jsx("span", {
+							className: "fw-marker",
+							"data-tone": marker.tone ?? "neutral",
+							style: { "--s": marker.at },
+							children: /* @__PURE__ */ jsx("span", {
+								className: "fw-marker-label",
+								children: marker.label
+							})
+						}, `${marker.at}-${marker.label}`))
+					}) : null,
+					showCursor && /* @__PURE__ */ jsx("div", {
+						className: "fw-cursor-layer",
+						"aria-hidden": true,
+						children: /* @__PURE__ */ jsx("span", { className: "fw-cursor" })
+					})
+				]
+			}),
+			view === "agents" && axis
+		]
+	});
+}
+/** Ancestors of the first visible row stay pinned while their children scroll beneath them. This layer follows
+* scroll per row on its own, so the virtualized rows below re-render only per chunk. */
+function StickyRows({ scroller, rows, index, rowHeight, render }) {
+	const [top, setTop] = useState(0);
+	useEffect(() => {
+		const element = scroller.current;
+		if (!element) return;
+		const scroll = () => setTop(element.scrollTop > 0 ? Math.floor(element.scrollTop / rowHeight) : -1);
+		scroll();
+		element.addEventListener("scroll", scroll, { passive: true });
+		return () => element.removeEventListener("scroll", scroll);
+	}, [scroller, rowHeight]);
+	const sticky = [];
+	if (top >= 0) {
+		const chain = [];
+		let cursor = rows[Math.min(rows.length - 1, top + 1)];
+		while (cursor?.parentId !== void 0) {
+			const parentIndex = index.get(cursor.parentId);
+			if (parentIndex === void 0) break;
+			cursor = rows[parentIndex];
+			if (cursor) chain.unshift(cursor);
+		}
+		for (const [level, row] of chain.slice(-3).entries()) if ((index.get(row.id) ?? 0) < top + level + 1) sticky.push(row);
+	}
+	if (!sticky.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "fw-sticky",
+		style: { height: sticky.length * rowHeight },
+		children: sticky.map((item, level) => render(item, level, true))
+	});
+}
+//#endregion
+//#region src/react/flow-waterfall-clock.ts
+const TEXT_INTERVAL_MS = 100;
+/** Drives the trace clock. Bars, the cursor and the axis read CSS variables written here every frame,
+* so live growth and playback cost no React render per frame; text updates at 10 Hz. */
+function useTraceClock(input) {
+	const { root, slider, timeOutput, observedTotal, live, startedAt, snapshot, playing, speed, position, onPlaybackEnd, view, trackPx } = input;
+	const [clockMs, setClockMs] = useState(position ?? observedTotal);
+	const receivedAt = useRef(Date.now());
+	const playhead = useRef(position ?? observedTotal);
+	const latest = useRef(input);
+	latest.current = input;
+	useEffect(() => {
+		receivedAt.current = Date.now();
+	}, [snapshot]);
+	const liveNow = () => {
+		const { observedTotal: total, startedAt: origin, live: isLive } = latest.current;
+		if (!isLive) return total;
+		return Math.max(total, origin === void 0 ? total + Date.now() - receivedAt.current : Date.now() - origin);
+	};
+	const paint = (t, limit = liveNow()) => {
+		const element = root.current;
+		if (!element) return;
+		const { startMs, endMs } = latest.current.view(t);
+		const k = Math.max(1e-9, latest.current.trackPx / Math.max(1, endMs - startMs));
+		element.style.setProperty("--fw-t", String(t));
+		element.style.setProperty("--fw-v0", String(startMs));
+		element.style.setProperty("--fw-k", String(k));
+		if (slider.current) {
+			slider.current.max = String(Math.max(1, limit, t));
+			slider.current.value = String(t);
+		}
+		if (timeOutput.current) timeOutput.current.textContent = formatSpanDuration(t);
+	};
+	useLayoutEffect(() => {
+		if (position !== null) playhead.current = position;
+		if (!(live || playing)) {
+			const t = position ?? observedTotal;
+			paint(t);
+			setClockMs(t);
+			return;
+		}
+		let frame = 0;
+		let last = performance.now();
+		let lastText = 0;
+		const step = (now) => {
+			const delta = now - last;
+			last = now;
+			let t;
+			const limit = liveNow();
+			if (playing) {
+				playhead.current = Math.min(limit, playhead.current + delta * latest.current.speed);
+				t = playhead.current;
+				if (t >= limit && !latest.current.live) {
+					paint(t, limit);
+					setClockMs(t);
+					latest.current.onPlaybackEnd(t);
+					return;
+				}
+			} else t = latest.current.position ?? limit;
+			paint(t, limit);
+			if (now - lastText >= TEXT_INTERVAL_MS) {
+				lastText = now;
+				setClockMs(t);
+			}
+			frame = requestAnimationFrame(step);
+		};
+		frame = requestAnimationFrame(step);
+		return () => cancelAnimationFrame(frame);
+	}, [
+		live,
+		playing,
+		position,
+		observedTotal,
+		snapshot
+	]);
+	useLayoutEffect(() => {
+		paint(playing ? playhead.current : position ?? (live ? liveNow() : observedTotal));
+	}, [view, trackPx]);
+	return {
+		clockMs,
+		limitMs: liveNow,
+		positionMs: () => playhead.current
+	};
+}
+//#endregion
+//#region src/react/flow-waterfall-playback.tsx
 const SPEEDS = [
 	.5,
 	1,
@@ -2421,375 +3552,623 @@ const SPEEDS = [
 	2,
 	4
 ];
-const controlClass = "fw-control";
-const seconds = (ms) => `${(ms / 1e3).toFixed(1)}s`;
-/** Shared trace inspector. Data remains producer-owned; playback only clips its presentation. */
-function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defaultCollapsed = false }) {
+/** Play, restart, speed, a scrub track over the trace's own activity, zoom and the legend. */
+function PlaybackBar({ view, playing, limit, clockMs, speed, zoom, marks, slider, timeOutput, followLabel, onTogglePlay, onRestart, onSpeed, onScrub, onFollow, onZoom, onFit }) {
+	return /* @__PURE__ */ jsxs("footer", {
+		className: "fw-playback",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "fw-round-button",
+				"aria-label": playing ? "Pause" : "Play",
+				disabled: limit === 0,
+				onClick: onTogglePlay,
+				children: playing ? /* @__PURE__ */ jsx(PauseGlyph, {}) : /* @__PURE__ */ jsx(PlayGlyph, {})
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "fw-icon-button",
+				"aria-label": "Restart",
+				title: "Replay from the start",
+				disabled: limit === 0,
+				onClick: onRestart,
+				children: /* @__PURE__ */ jsx(RestartGlyph, {})
+			}),
+			view === "agents" ? /* @__PURE__ */ jsx("div", {
+				className: "fw-segmented",
+				role: "radiogroup",
+				"aria-label": "Playback speed",
+				children: [
+					1,
+					2,
+					4
+				].map((value) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "radio",
+					"aria-checked": speed === value,
+					onClick: () => onSpeed(value),
+					children: [value, "x"]
+				}, value))
+			}) : /* @__PURE__ */ jsxs("label", {
+				className: "fw-speed",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "fw-sr-only",
+					children: "Playback speed"
+				}), /* @__PURE__ */ jsx("select", {
+					"aria-label": "Playback speed",
+					value: speed,
+					onChange: (event) => onSpeed(Number(event.target.value)),
+					children: SPEEDS.map((value) => /* @__PURE__ */ jsxs("option", {
+						value,
+						children: [value, "x"]
+					}, value))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "fw-overview",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "fw-overview-marks",
+					"aria-hidden": true,
+					children: [marks.map((mark, i) => /* @__PURE__ */ jsx("span", {
+						className: `fw-ov fw-seg-${mark.kind}`,
+						"data-tone": toneKey(mark.tone),
+						style: {
+							left: `${mark.startMs / Math.max(1, limit) * 100}%`,
+							width: `${Math.max(.15, (Math.min(mark.endMs, limit) - mark.startMs) / Math.max(1, limit) * 100)}%`
+						}
+					}, i)), zoom && /* @__PURE__ */ jsx("span", {
+						className: "fw-brush",
+						style: {
+							left: `${zoom.startMs / limit * 100}%`,
+							width: `${(zoom.endMs - zoom.startMs) / limit * 100}%`
+						}
+					})]
+				}), /* @__PURE__ */ jsx("input", {
+					ref: slider,
+					"aria-label": "Playback position",
+					type: "range",
+					min: 0,
+					max: Math.max(1, limit),
+					step: "any",
+					defaultValue: clockMs,
+					disabled: limit === 0,
+					className: "fw-slider",
+					style: { "--fw-progress": `${clockMs / Math.max(1, limit) * 100}%` },
+					onChange: (event) => onScrub(Number(event.target.value))
+				})]
+			}),
+			/* @__PURE__ */ jsx("output", {
+				ref: timeOutput,
+				className: "fw-time",
+				"aria-label": "Playback time",
+				children: formatSpanDuration(clockMs)
+			}),
+			followLabel && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "fw-text-button",
+				onClick: onFollow,
+				children: followLabel
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "fw-zoom",
+				role: "group",
+				"aria-label": "Zoom",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "fw-icon-button",
+						"aria-label": "Zoom out",
+						disabled: !zoom,
+						onClick: () => onZoom(2),
+						children: /* @__PURE__ */ jsx(ZoomOutGlyph, {})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "fw-icon-button",
+						"aria-label": "Zoom in",
+						disabled: limit === 0,
+						onClick: () => onZoom(.5),
+						children: /* @__PURE__ */ jsx(ZoomInGlyph, {})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "fw-icon-button",
+						"aria-label": "Fit the whole trace",
+						disabled: !zoom,
+						onClick: onFit,
+						children: /* @__PURE__ */ jsx(FitGlyph, {})
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/react/flow-waterfall.tsx
+const LANE_PAD = 12;
+const END_LABEL_GUTTER = {
+	spans: 120,
+	agents: 16
+};
+const NAME_WIDTH = {
+	spans: 320,
+	agents: 240
+};
+const headlineSeconds = (ms) => ms < 6e4 ? `${(ms / 1e3).toFixed(1)}s` : formatSpanDuration(ms);
+/** Shared trace inspector: the agent timeline and the span waterfall over one clock.
+* Data remains producer-owned; playback, zoom and folding change presentation only. */
+function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defaultCollapsed = false, defaultView = "spans", renderIcon, maxHeight = 640, onSelect, markers }) {
 	const root = useRef(null);
 	const search = useRef(null);
+	const slider = useRef(null);
+	const timeOutput = useRef(null);
+	const hideTimer = useRef(void 0);
 	const searchId = useId();
+	const cardId = useId();
+	const [view, setView] = useState(defaultView);
 	const [query, setQuery] = useState("");
 	const [collapsed, setCollapsed] = useState(() => new Set(defaultCollapsed ? trace.spans.flatMap((span) => span.parentId ? [span.parentId] : []) : []));
 	const [speed, setSpeed] = useState(1);
 	const [playing, setPlaying] = useState(false);
 	const [position, setPosition] = useState(null);
+	const [zoom, setZoom] = useState(null);
+	const [nameWidth, setNameWidth] = useState(NAME_WIDTH[defaultView]);
+	const [laneWidth, setLaneWidth] = useState(0);
+	const [card, setCard] = useState(null);
+	const [activeId, setActiveId] = useState();
+	const [laneElement, setLaneElement] = useState(null);
 	const observedTotal = Number.isFinite(trace.totalMs) && trace.totalMs >= 0 ? trace.totalMs : 0;
-	const [elapsed, setElapsed] = useState(observedTotal);
 	const isLive = live ?? trace.spans.some(spanRunning);
+	const dataEnd = useMemo(() => Math.max(observedTotal, ...trace.spans.map((span) => Number.isFinite(span.endMs) ? span.endMs : 0)), [trace, observedTotal]);
+	const trackPx = Math.max(40, laneWidth - LANE_PAD - Math.min(END_LABEL_GUTTER[view], laneWidth * .3));
 	useEffect(() => {
-		setElapsed(observedTotal);
-		if (!isLive) return;
-		const receivedAt = Date.now();
-		const tick = () => setElapsed(Math.max(observedTotal, startedAt === void 0 ? observedTotal + Date.now() - receivedAt : Date.now() - startedAt));
-		tick();
-		const timer = setInterval(tick, 100);
-		return () => clearInterval(timer);
-	}, [
-		trace,
-		observedTotal,
-		isLive,
-		startedAt
-	]);
-	const currentTrace = useMemo(() => {
-		const totalMs = Math.max(observedTotal, isLive ? elapsed : 0, ...trace.spans.map((span) => Number.isFinite(span.endMs) ? span.endMs : 0));
-		return {
-			...trace,
-			totalMs,
-			spans: trace.spans.map((span) => isLive && spanRunning(span) && Number.isFinite(span.endMs) && span.endMs >= span.startMs ? {
-				...span,
-				endMs: Math.max(span.endMs, totalMs)
-			} : span)
-		};
+		if (!laneElement) return;
+		const observer = new ResizeObserver(([entry]) => setLaneWidth(entry.contentRect.width));
+		observer.observe(laneElement);
+		return () => observer.disconnect();
+	}, [laneElement]);
+	const viewAt = useCallback((t) => zoom ?? {
+		startMs: 0,
+		endMs: Math.max(dataEnd, isLive ? t : 0, 1)
 	}, [
-		trace,
-		observedTotal,
-		elapsed,
+		zoom,
+		dataEnd,
 		isLive
 	]);
-	const totalMs = currentTrace.totalMs;
-	const playhead = Math.min(position ?? totalMs, totalMs);
-	const playbackLimit = useRef(totalMs);
-	useEffect(() => {
-		playbackLimit.current = totalMs;
-	}, [totalMs]);
-	useEffect(() => {
-		if (!playing) return;
-		let last = performance.now();
-		const timer = setInterval(() => {
-			const now = performance.now();
-			const delta = (now - last) * speed;
-			last = now;
-			setPosition((previous) => Math.min(playbackLimit.current, (previous ?? 0) + delta));
-		}, 50);
-		return () => clearInterval(timer);
-	}, [playing, speed]);
-	useEffect(() => {
-		if (playing && position !== null && position >= totalMs) setPlaying(false);
-	}, [
-		position,
+	const clock = useTraceClock({
+		root,
+		slider,
+		timeOutput,
+		observedTotal: dataEnd,
+		live: isLive,
+		startedAt,
+		snapshot: trace,
 		playing,
-		totalMs
+		speed,
+		position,
+		onPlaybackEnd: (end) => {
+			setPlaying(false);
+			setPosition(end);
+		},
+		view: viewAt,
+		trackPx
+	});
+	const clockMs = clock.clockMs;
+	const win = viewAt(clockMs);
+	const limit = Math.max(dataEnd, isLive ? clockMs : 0);
+	const resolution = 2 ** Math.round(Math.log2(Math.max(1, (win.endMs - win.startMs) / Math.max(200, trackPx) * 1.5)));
+	const rows = useMemo(() => flowWaterfallRows({
+		...trace,
+		totalMs: dataEnd
+	}, resolution), [
+		trace,
+		dataEnd,
+		resolution
 	]);
+	const byId = useMemo(() => new Map(rows.map((row) => [row.id, row])), [rows]);
+	const agents = useMemo(() => {
+		const pipelines = rows.filter((row) => row.kind === "pipeline");
+		return pipelines.length ? pipelines : rows.filter((row) => !row.parentId);
+	}, [rows]);
+	const visible = useMemo(() => view === "agents" ? agents : visibleFlowWaterfallRows(rows, query, collapsed), [
+		view,
+		agents,
+		rows,
+		query,
+		collapsed
+	]);
+	const slowest = view === "spans" ? slowestRow(rows, clockMs) : void 0;
 	useEffect(() => {
 		const keydown = (event) => {
-			if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "f") return;
 			const active = document.activeElement;
 			const ownsFocus = root.current?.contains(active);
-			const first = Array.from(document.querySelectorAll("[data-flow-waterfall]")).find((element) => element.getClientRects().length > 0);
-			if (!ownsFocus && (active !== document.body || first !== root.current)) return;
-			event.preventDefault();
-			search.current?.focus();
-			search.current?.select();
+			if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "f") {
+				const first = Array.from(document.querySelectorAll("[data-flow-waterfall]")).find((element) => element.getClientRects().length > 0);
+				if (!ownsFocus && (active !== document.body || first !== root.current)) return;
+				event.preventDefault();
+				if (view === "agents") setView("spans");
+				requestAnimationFrame(() => {
+					search.current?.focus();
+					search.current?.select();
+				});
+				return;
+			}
+			if (!ownsFocus || active instanceof HTMLInputElement || active instanceof HTMLSelectElement || event.metaKey || event.ctrlKey || event.altKey) return;
+			if (event.key === "+" || event.key === "=") zoomBy(.5);
+			else if (event.key === "-" || event.key === "_") zoomBy(2);
+			else if (event.key === "0") setZoom(null);
+			else if (event.key === "Escape" && card) closeCard();
 		};
 		document.addEventListener("keydown", keydown);
 		return () => document.removeEventListener("keydown", keydown);
+	});
+	useEffect(() => {
+		if (!card?.pinned) return;
+		const down = (event) => {
+			const target = event.target;
+			if (target?.closest(".fw-card") || target?.closest(".fw-bar, .fw-seg")) return;
+			setCard(null);
+		};
+		document.addEventListener("pointerdown", down);
+		return () => document.removeEventListener("pointerdown", down);
+	}, [card?.pinned]);
+	const zoomBy = (factor, anchor) => setZoom((previous) => {
+		const current = previous ?? viewAt(clockMs);
+		const next = zoomWindow(current, factor, anchor ?? (current.startMs + current.endMs) / 2, limit);
+		return next.endMs - next.startMs >= limit - 1 ? null : next;
+	});
+	const zoomFrame = useRef(0);
+	const zoomTo = (row) => {
+		const span = row.span;
+		const current = viewAt(clockMs);
+		const width = current.endMs - current.startMs;
+		const end = spanRunning(span) ? Math.max(span.endMs, clockMs) : span.endMs;
+		if (view !== "spans" || !Number.isFinite(end) || (end - span.startMs) / Math.max(1, width) > .25) return;
+		const pad = Math.max((end - span.startMs) * .15, 500);
+		const target = clampWindow({
+			startMs: span.startMs - pad,
+			endMs: end + pad
+		}, limit);
+		cancelAnimationFrame(zoomFrame.current);
+		if (globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+			setZoom(target);
+			return;
+		}
+		const began = performance.now();
+		const step = (now) => {
+			const t = Math.min(1, (now - began) / 320);
+			const e = 1 - (1 - t) ** 3;
+			setZoom({
+				startMs: current.startMs + (target.startMs - current.startMs) * e,
+				endMs: current.endMs + (target.endMs - current.endMs) * e
+			});
+			if (t < 1) zoomFrame.current = requestAnimationFrame(step);
+		};
+		zoomFrame.current = requestAnimationFrame(step);
+	};
+	const pan = (deltaMs) => setZoom((previous) => previous && clampWindow({
+		startMs: previous.startMs + deltaMs,
+		endMs: previous.endMs + deltaMs
+	}, limit));
+	const latest = useRef({
+		toggle: (_row) => {},
+		pin: (_target, _element) => {},
+		inspect: (_target, _element) => {}
+	});
+	const toggleNow = (row) => {
+		onSelect?.(row.span);
+		if (view === "agents") {
+			const keep = /* @__PURE__ */ new Set();
+			for (let cursor = row; cursor; cursor = cursor.parentId ? byId.get(cursor.parentId) : void 0) keep.add(cursor.id);
+			setCollapsed(new Set(rows.filter((item) => item.hasChildren && !keep.has(item.id) && item.kind === "pipeline").map((item) => item.id)));
+			setView("spans");
+			setActiveId(row.id);
+			return;
+		}
+		if (collapsed.has(row.id)) zoomTo(row);
+		setCollapsed((previous) => {
+			const next = new Set(previous);
+			if (next.has(row.id)) next.delete(row.id);
+			else next.add(row.id);
+			return next;
+		});
+	};
+	latest.current.toggle = toggleNow;
+	const toggle = useCallback((row) => latest.current.toggle(row), []);
+	const place = (target, element, pinned) => {
+		const host = root.current?.getBoundingClientRect();
+		if (!host) return;
+		const rect = element.getBoundingClientRect();
+		const above = view === "agents" ? rect.top - host.top > 150 : globalThis.innerHeight - rect.bottom < 260 && rect.top - host.top > 260;
+		const left = Math.max(8, Math.min(rect.left - host.left, host.width - 328));
+		clearTimeout(hideTimer.current);
+		setCard({
+			target,
+			pinned,
+			left,
+			top: above ? rect.top - host.top - 8 : rect.bottom - host.top + 8,
+			above
+		});
+	};
+	latest.current.inspect = (target, element) => {
+		if (!card?.pinned) place(target, element, false);
+	};
+	const inspect = useCallback((target, element) => latest.current.inspect(target, element), []);
+	const leave = useCallback(() => {
+		clearTimeout(hideTimer.current);
+		hideTimer.current = setTimeout(() => setCard((previous) => previous?.pinned ? previous : null), 140);
 	}, []);
-	const rows = useMemo(() => flowWaterfallRows(currentTrace), [currentTrace]);
-	const visible = visibleFlowWaterfallRows(rows, query, collapsed);
-	const slowest = rows.filter((row) => !row.hasChildren && row.kind !== "pipeline" && row.durationLabel !== "—").reduce((best, row) => !best || row.span.endMs - row.span.startMs > best.span.endMs - best.span.startMs ? row : best, void 0);
+	useEffect(() => {
+		if (!card || card.pinned) return;
+		const move = (event) => {
+			if (!event.target?.closest(".fw-bar, .fw-seg, .fw-card")) leave();
+		};
+		document.addEventListener("pointermove", move);
+		return () => document.removeEventListener("pointermove", move);
+	}, [card, leave]);
+	latest.current.pin = (target, element) => {
+		place(target, element, true);
+		const row = byId.get(target);
+		if (row) {
+			onSelect?.(row.span);
+			zoomTo(row);
+		}
+	};
+	const pin = useCallback((target, element) => latest.current.pin(target, element), []);
+	const closeCard = () => {
+		const target = card?.target;
+		setCard(null);
+		if (target) root.current?.querySelector(`.fw-canvas [data-span-id="${CSS.escape(target)}"]`)?.focus({ preventScroll: true });
+	};
+	const scrubTo = useCallback((ms) => {
+		setPlaying(false);
+		setPosition(Math.min(ms, clock.limitMs()));
+	}, [clock]);
+	const togglePlay = () => {
+		if (playing) {
+			setPosition(clock.positionMs());
+			setPlaying(false);
+			return;
+		}
+		if (position === null || position >= limit - 1) setPosition(0);
+		setPlaying(true);
+	};
+	const scrubbing = position !== null || playing;
+	const at = scrubbing ? totalsAt(trace, clockMs) : void 0;
+	const costUsd = at ? at.costUsd : trace.costUsd;
+	const tokens = at ? at.tokens : trace.promptTokens + trace.completionTokens;
+	const modelCalls = at ? at.modelCalls : trace.modelCalls;
+	const errors = at ? at.errors : trace.errors ?? trace.spans.filter(spanFailed).length;
 	const summary = [
-		["Duration", seconds(totalMs)],
-		["Cost", trace.costUsd === void 0 ? "Unknown" : `$${trace.costUsd.toFixed(trace.costUsd < .01 ? 6 : 4)}`],
-		["Tokens", (trace.promptTokens + trace.completionTokens).toLocaleString()],
-		["LLM calls", trace.modelCalls === void 0 ? "Unknown" : String(trace.modelCalls)],
-		["Tool calls", String(trace.toolCalls)],
-		["Errors", String(trace.errors ?? trace.spans.filter(spanFailed).length)]
+		["Duration", formatSpanDuration(scrubbing ? clockMs : limit)],
+		[
+			trace.costBasis === "list" ? "Cost · list price" : "Cost",
+			costUsd === void 0 ? "Unknown" : formatCost(costUsd),
+			costUsd === void 0 ? "The harness recorded no cost for this trace" : trace.costBasis === "list" ? "Input and output tokens at the model catalog list price; not a bill" : void 0
+		],
+		[
+			"Tokens",
+			formatCount(tokens),
+			`${tokens.toLocaleString()} tokens`
+		],
+		[
+			"LLM calls",
+			modelCalls === void 0 ? "Unknown" : modelCalls.toLocaleString(),
+			modelCalls === void 0 ? "Model output windows do not establish the number of LLM requests" : void 0
+		],
+		["Tool calls", (at ? at.toolCalls : trace.toolCalls).toLocaleString()],
+		["Errors", errors.toLocaleString()]
 	];
-	const toggle = (id) => setCollapsed((previous) => {
-		const next = new Set(previous);
-		if (next.has(id)) next.delete(id);
-		else next.add(id);
-		return next;
-	});
+	const busy = agents.reduce((sum, row) => sum + busyMs(row, limit), 0);
+	const speedup = limit > 0 ? busy / limit : 0;
+	const done = !isLive && !trace.spans.some(spanRunning);
+	const cardRow = card ? byId.get(card.target) : void 0;
+	const cardAgent = cardRow && (() => {
+		for (let cursor = cardRow; cursor; cursor = cursor.parentId ? byId.get(cursor.parentId) : void 0) if (cursor.kind === "pipeline") return cursor;
+	})();
+	const showCursor = isLive || position !== null || playing;
+	const overviewMarks = useMemo(() => rows.filter((row) => !row.parentId).flatMap((row) => row.hasChildren ? row.segments : row.kind === "pipeline" ? [] : [{
+		startMs: row.span.startMs,
+		endMs: row.span.endMs,
+		kind: row.ok ? "tool" : "failed",
+		tone: row.tone,
+		id: row.id,
+		count: 1,
+		retry: false
+	}]), [rows]);
 	return /* @__PURE__ */ jsxs("section", {
 		ref: root,
 		"data-flow-waterfall": true,
 		"aria-label": label,
-		className: "fw-root",
+		className: `fw-root fw-root-${view}`,
+		style: {
+			"--fw-name-w": `${nameWidth}px`,
+			"--fw-pad": `${LANE_PAD}px`,
+			"--fw-row-h": `${ROW_HEIGHT[view]}px`
+		},
 		children: [
-			/* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsxs("header", {
 				className: "fw-heading",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "fw-title",
-					children: [label, isLive && /* @__PURE__ */ jsx("span", {
-						className: "fw-muted",
-						children: "Live"
+					className: "fw-title-block",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "fw-title-line",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "fw-title-glyph",
+								"aria-hidden": true,
+								children: /* @__PURE__ */ jsx(TraceGlyph, {})
+							}),
+							/* @__PURE__ */ jsx("h3", {
+								className: "fw-title",
+								children: label
+							}),
+							isLive && /* @__PURE__ */ jsx("span", {
+								className: "fw-state fw-state-live",
+								children: "Live"
+							})
+						]
+					}), view === "agents" && /* @__PURE__ */ jsx("p", {
+						className: "fw-headline",
+						"aria-live": "polite",
+						children: done ? /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "fw-done-mark",
+								"aria-label": "done",
+								children: "✓"
+							}),
+							agents.length,
+							" ",
+							agents.length === 1 ? "agent" : "agents",
+							" · ",
+							headlineSeconds(limit),
+							speedup >= 1.05 ? ` · ${speedup.toFixed(1)}x parallel` : "",
+							trace.costUsd !== void 0 ? ` · ${formatCost(trace.costUsd)}` : ""
+						] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+							headlineSeconds(clockMs),
+							" · ",
+							tokens.toLocaleString(),
+							" tokens",
+							trace.costUsd !== void 0 ? ` · ${formatCost(trace.costUsd)}` : ""
+						] })
 					})]
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "fw-search",
-					children: [
-						/* @__PURE__ */ jsx("label", {
-							htmlFor: searchId,
-							className: "fw-sr-only",
-							children: "Search trace"
-						}),
-						/* @__PURE__ */ jsx("input", {
-							ref: search,
-							id: searchId,
-							type: "search",
-							value: query,
-							placeholder: "Search trace…",
-							"aria-keyshortcuts": "Meta+f Control+f",
-							onChange: (event) => setQuery(event.target.value),
-							onKeyDown: (event) => {
-								if (event.key === "Escape") {
-									setQuery("");
-									event.stopPropagation();
-								}
-							},
-							className: `${controlClass} fw-search-input`
-						}),
-						/* @__PURE__ */ jsx("button", {
+					className: "fw-tools",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "fw-views",
+						role: "radiogroup",
+						"aria-label": "Trace view",
+						children: ["agents", "spans"].map((option) => /* @__PURE__ */ jsx("button", {
 							type: "button",
-							"aria-label": "Focus trace search",
-							title: "Search trace (⌘F / Ctrl+F)",
-							onClick: () => search.current?.focus(),
-							className: controlClass,
-							children: "⌘F"
-						})
-					]
+							role: "radio",
+							"aria-checked": view === option,
+							className: "fw-view-button",
+							onClick: () => {
+								setView(option);
+								setNameWidth(NAME_WIDTH[option]);
+								setCard(null);
+							},
+							children: option === "agents" ? "Agents" : "Steps"
+						}, option))
+					}), view === "spans" && /* @__PURE__ */ jsxs("div", {
+						className: "fw-search",
+						children: [
+							/* @__PURE__ */ jsx("label", {
+								htmlFor: searchId,
+								className: "fw-sr-only",
+								children: "Search trace"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "fw-search-glyph",
+								"aria-hidden": true,
+								children: /* @__PURE__ */ jsx(SearchGlyph, {})
+							}),
+							/* @__PURE__ */ jsx("input", {
+								ref: search,
+								id: searchId,
+								type: "search",
+								value: query,
+								placeholder: "Search",
+								"aria-keyshortcuts": "Meta+f Control+f",
+								onChange: (event) => setQuery(event.target.value),
+								onKeyDown: (event) => {
+									if (event.key === "Escape") {
+										setQuery("");
+										event.stopPropagation();
+									}
+								},
+								className: "fw-search-input"
+							})
+						]
+					})]
 				})]
 			}),
-			/* @__PURE__ */ jsx("dl", {
+			view === "spans" && /* @__PURE__ */ jsx("dl", {
 				className: "fw-summary",
-				children: summary.map(([name, value]) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
-					className: "fw-muted",
-					children: name
-				}), /* @__PURE__ */ jsx("dd", {
-					className: "fw-value",
-					title: name === "LLM calls" && trace.modelCalls === void 0 ? "Model output windows do not establish the number of LLM requests" : void 0,
-					children: value
-				})] }, name))
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "fw-legend",
-				"aria-label": "Span types",
-				children: Object.entries(TONES).map(([kind, tone]) => /* @__PURE__ */ jsxs("span", {
-					className: "fw-legend-item",
-					children: [/* @__PURE__ */ jsx("span", {
-						"aria-hidden": true,
-						className: `fw-dot ${tone.color}`
-					}), tone.label]
-				}, kind))
+				children: summary.map(([name, value, title]) => /* @__PURE__ */ jsxs("div", {
+					className: name === "Errors" && errors > 0 ? "fw-has-errors" : void 0,
+					children: [/* @__PURE__ */ jsx("dt", { children: name }), /* @__PURE__ */ jsx("dd", {
+						className: "fw-value",
+						title,
+						children: value
+					})]
+				}, name))
 			}),
-			rows.some((row) => row.hasChildren) && /* @__PURE__ */ jsxs("div", {
-				className: "fw-branches",
-				children: [/* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: controlClass,
-					onClick: () => setCollapsed(/* @__PURE__ */ new Set()),
-					children: "Expand all"
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: controlClass,
-					onClick: () => setCollapsed(new Set(rows.filter((row) => row.hasChildren).map((row) => row.id))),
-					children: "Collapse all"
-				})]
+			/* @__PURE__ */ jsx(FlowBody, {
+				rows: visible,
+				byId,
+				totalRows: rows.length,
+				view,
+				maxHeight,
+				collapsed,
+				searching: Boolean(query.trim()),
+				slowestId: slowest?.id,
+				activeId,
+				selectedId: card?.pinned ? card.target : void 0,
+				clockMs,
+				window: win,
+				trackPx,
+				showCursor,
+				markers,
+				zoomed: zoom !== null,
+				renderIcon,
+				emptyText: rows.length === 0 ? "No spans yet. Waiting for trace events." : `No matching steps for “${query}”.`,
+				onToggle: toggle,
+				onInspect: inspect,
+				onLeave: leave,
+				onPin: pin,
+				onActivate: (row) => setActiveId(row.id),
+				onActiveChange: setActiveId,
+				onScrub: scrubTo,
+				onZoom: zoomBy,
+				onPan: pan,
+				nameWidth,
+				onNameWidth: (px) => setNameWidth(Math.max(140, Math.min(560, px))),
+				onTrack: setLaneElement,
+				onExpandAll: rows.some((row) => row.hasChildren) ? () => setCollapsed(/* @__PURE__ */ new Set()) : void 0,
+				onCollapseAll: () => setCollapsed(new Set(rows.filter((row) => row.hasChildren).map((row) => row.id)))
 			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "fw-timeline",
-				role: "region",
-				"aria-label": "Trace timeline",
-				tabIndex: 0,
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "fw-track",
-					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "fw-axis fw-grid",
-							children: [
-								/* @__PURE__ */ jsxs("span", { children: [
-									"Steps · ",
-									visible.length,
-									"/",
-									rows.length
-								] }),
-								/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(WaterfallTimeAxis, {
-									fluid: true,
-									windowMs: totalMs,
-									widthPx: 240,
-									formatDuration: seconds
-								}) }),
-								/* @__PURE__ */ jsx("span", {
-									className: "fw-align-right",
-									children: "Duration"
-								})
-							]
-						}),
-						visible.length === 0 && /* @__PURE__ */ jsx("p", {
-							role: "status",
-							className: "fw-empty",
-							children: rows.length === 0 ? "No spans yet. Waiting for trace events." : `No matching steps for “${query}”.`
-						}),
-						visible.map((row) => {
-							const tone = !row.ok ? TONES.failed : TONES[row.kind];
-							const pending = row.span.startMs > playhead;
-							const running = spanRunning(row.span);
-							return /* @__PURE__ */ jsx("div", {
-								"data-span-id": row.id,
-								"data-span-kind": !row.ok ? "failed" : row.kind,
-								"data-slowest": row.id === slowest?.id || void 0,
-								className: `fw-row ${row.id === slowest?.id ? "fw-slowest" : ""} ${pending ? "fw-pending" : ""}`,
-								children: /* @__PURE__ */ jsx(WaterfallRow, {
-									className: "fw-grid",
-									style: { display: "grid" },
-									startMs: row.span.startMs,
-									endMs: row.span.endMs,
-									window: {
-										startMs: 0,
-										endMs: totalMs
-									},
-									fluid: true,
-									color: "var(--fw-bar-color)",
-									barClassName: `fw-bar ${tone.color} ${row.approx ? "fw-approx" : ""}`,
-									timingClassName: "fw-bar-track",
-									durationClassName: "fw-duration",
-									durationLabel: row.durationLabel,
-									formatDuration: seconds,
-									clipAtMs: position === null ? void 0 : playhead,
-									overlay: position !== null && /* @__PURE__ */ jsx("span", {
-										className: "fw-playhead",
-										style: { left: `${playhead / (totalMs || 1) * 100}%` }
-									}),
-									label: /* @__PURE__ */ jsxs("div", {
-										className: "fw-name",
-										style: { paddingLeft: Math.min(row.depth, 8) * 12 },
-										children: [row.hasChildren ? /* @__PURE__ */ jsx("button", {
-											type: "button",
-											"aria-label": `${collapsed.has(row.id) && !query ? "Expand" : "Collapse"} ${row.name}`,
-											"aria-expanded": query ? true : !collapsed.has(row.id),
-											onClick: () => toggle(row.id),
-											disabled: Boolean(query.trim()),
-											className: "fw-toggle",
-											children: collapsed.has(row.id) && !query ? "›" : "⌄"
-										}) : /* @__PURE__ */ jsx("span", {
-											className: "fw-leaf",
-											"aria-hidden": true,
-											children: "·"
-										}), /* @__PURE__ */ jsxs("span", {
-											title: `${row.name} · ${tone.label}${running ? " · running" : ""}`,
-											className: "fw-span-name",
-											children: [
-												row.name,
-												!row.ok && /* @__PURE__ */ jsx("span", {
-													className: "fw-error-text",
-													children: " · failed"
-												}),
-												running && /* @__PURE__ */ jsx("span", {
-													className: "fw-muted",
-													children: " · running"
-												})
-											]
-										})]
-									})
-								})
-							}, row.id);
-						})
-					]
+			card && cardRow && /* @__PURE__ */ jsx("div", {
+				className: `fw-card-anchor${card.above ? " fw-card-above" : ""}`,
+				onPointerEnter: () => clearTimeout(hideTimer.current),
+				onPointerLeave: card.pinned ? void 0 : leave,
+				children: /* @__PURE__ */ jsx(SpanCard, {
+					id: cardId,
+					row: cardRow,
+					agent: cardAgent,
+					clockMs,
+					left: card.left,
+					top: card.top,
+					pinned: card.pinned,
+					onClose: closeCard,
+					renderIcon,
+					compact: view === "agents"
 				})
 			}),
-			slowest && /* @__PURE__ */ jsxs("p", {
-				className: "fw-slowest-caption",
-				children: [
-					"Slowest step: ",
-					/* @__PURE__ */ jsx("span", {
-						className: "fw-text",
-						children: slowest.name
-					}),
-					" · ",
-					slowest.durationLabel
-				]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "fw-playback",
-				children: [
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: controlClass,
-						disabled: totalMs === 0,
-						onClick: () => {
-							if (playing) setPlaying(false);
-							else {
-								if (position === null || position >= totalMs) setPosition(0);
-								setPlaying(true);
-							}
-						},
-						children: playing ? "Pause" : "Play"
-					}),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: controlClass,
-						disabled: totalMs === 0,
-						onClick: () => {
-							setPosition(0);
-							setPlaying(false);
-						},
-						children: "Restart"
-					}),
-					/* @__PURE__ */ jsxs("label", {
-						className: "fw-speed",
-						children: ["Speed", /* @__PURE__ */ jsx("select", {
-							"aria-label": "Playback speed",
-							className: controlClass,
-							value: speed,
-							onChange: (event) => setSpeed(Number(event.target.value)),
-							children: SPEEDS.map((value) => /* @__PURE__ */ jsxs("option", {
-								value,
-								children: [value, "x"]
-							}, value))
-						})]
-					}),
-					/* @__PURE__ */ jsxs("label", {
-						className: "fw-position",
-						children: ["Position", /* @__PURE__ */ jsx("input", {
-							"aria-label": "Playback position",
-							type: "range",
-							min: 0,
-							max: totalMs || 1,
-							step: "any",
-							value: playhead,
-							disabled: totalMs === 0,
-							onChange: (event) => {
-								setPosition(Number(event.target.value));
-								setPlaying(false);
-							},
-							className: "fw-slider"
-						})]
-					}),
-					/* @__PURE__ */ jsx("output", {
-						className: "fw-time",
-						"aria-label": "Playback time",
-						children: seconds(playhead)
-					}),
-					position !== null && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: controlClass,
-						onClick: () => {
-							setPosition(null);
-							setPlaying(false);
-						},
-						children: isLive ? "Follow live" : "Show full trace"
-					})
-				]
+			/* @__PURE__ */ jsx(PlaybackBar, {
+				view,
+				playing,
+				limit,
+				clockMs,
+				speed,
+				zoom,
+				marks: overviewMarks,
+				slider,
+				timeOutput,
+				followLabel: position === null ? void 0 : isLive ? "Follow live" : "Show full trace",
+				onTogglePlay: togglePlay,
+				onRestart: () => {
+					setPosition(0);
+					setPlaying(false);
+				},
+				onSpeed: setSpeed,
+				onScrub: scrubTo,
+				onFollow: () => {
+					setPosition(null);
+					setPlaying(false);
+				},
+				onZoom: zoomBy,
+				onFit: () => setZoom(null)
 			})
 		]
 	});