@tangle-network/charts 0.18.1 → 0.20.0

package/dist/react/index.js

@@ -1,4 +1,4 @@
-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 { G as hatchPath, J as markerPath, b as isRefusal, h as eventsGap, t as timeline, u as MARK_HEADS, y as markName } from "../timeline-B7c-cede.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 //#region src/react/sparkline.tsx
@@ -2500,6 +2500,29 @@ function slowestRow(rows, clockMs) {
 	}
 	return best;
 }
+/** The agents a reader should look at first: the longest one by the clock, and the costliest when two or more are priced. */
+function agentCallouts(agents, clockMs) {
+	let slowest, slowestMs = -1, costliest, top = -1, priced = 0;
+	for (const row of agents) {
+		if (row.durationLabel === "—" || 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 > slowestMs) {
+			slowest = row;
+			slowestMs = ms;
+		}
+		const cost = row.span.costUsd ?? row.rollupCostUsd;
+		if (cost === void 0) continue;
+		priced += 1;
+		if (cost > top) {
+			costliest = row;
+			top = cost;
+		}
+	}
+	return {
+		slowestId: agents.length > 1 ? slowest?.id : void 0,
+		costliestId: priced > 1 && top > 0 ? costliest?.id : void 0
+	};
+}
 /** 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;
@@ -2537,6 +2560,31 @@ function totalsAt(trace, clockMs) {
 		errors
 	};
 }
+/** The cost a reader can rely on: a lower bound when some calls are unpriced, a dash only when nothing is priced. */
+function costSummary(costUsd, trace) {
+	const list = trace.costBasis === "list";
+	const label = list ? "Cost · list price" : "Cost";
+	if (costUsd === void 0) return trace.billedUsd !== void 0 ? {
+		value: `${formatCost(trace.billedUsd)} billed`,
+		title: "No list price for these calls; billed is the seat charge",
+		label
+	} : {
+		value: "—",
+		title: "No cost source: the harness recorded no cost and no price catalog was given",
+		label
+	};
+	const coverage = trace.costCoverage;
+	const partial = coverage !== void 0 && coverage.priced < coverage.total;
+	return {
+		value: `${partial ? "≥" : list ? "≈" : ""}${formatCost(costUsd)}${trace.billedUsd !== void 0 ? ` · ${formatCost(trace.billedUsd)} billed` : ""}`,
+		title: [
+			partial ? `${coverage.priced} of ${coverage.total} model calls priced` : coverage ? `all ${coverage.total} model calls priced` : "",
+			list ? "at the model catalog list price; not a bill" : "",
+			trace.billedUsd !== void 0 ? `billed ${formatCost(trace.billedUsd)} (the seat charge)` : ""
+		].filter(Boolean).join("; "),
+		label
+	};
+}
 //#endregion
 //#region src/react/flow-waterfall-icons.tsx
 const svg = (children, label) => /* @__PURE__ */ jsx("svg", {
@@ -2646,7 +2694,7 @@ const KIND_LABEL = {
 const unknown = /* @__PURE__ */ jsx("span", {
 	className: "fw-unknown",
 	title: "Not recorded by the harness",
-	children: "Unknown"
+	children: "—"
 });
 const count = (n) => n === void 0 ? unknown : /* @__PURE__ */ jsx("span", {
 	title: n.toLocaleString(),
@@ -2655,24 +2703,36 @@ const count = (n) => n === void 0 ? unknown : /* @__PURE__ */ jsx("span", {
 /** 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 status = spanRunning(span) ? "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) : "—";
+	const lasted = (s) => {
+		const stop = spanRunning(s) ? Math.max(s.endMs, clockMs) : s.endMs;
+		return Number.isFinite(stop - s.startMs) && stop >= s.startMs ? formatSpanDuration(stop - s.startMs) : "—";
+	};
+	const duration = lasted(span);
 	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 cells = [[span.kind === "model" ? "Thinking" : KIND_LABEL[span.kind], duration]];
+		const subject = who.span;
+		const outcome = subject.outcome;
+		const tokenCount = subject.promptTokens !== void 0 || subject.completionTokens !== void 0 ? (subject.promptTokens ?? 0) + (subject.completionTokens ?? 0) : void 0;
+		const cost = subject.costUsd ?? who.rollupCostUsd;
+		const cells = [[subject.kind === "model" ? "Thinking" : KIND_LABEL[subject.kind], lasted(subject)]];
+		for (const fact of (subject.facts ?? []).slice(0, 3)) cells.push([fact.label, fact.value]);
+		cells.push(["Started", `+${formatSpanDuration(Math.max(0, subject.startMs))}`]);
 		if (tokenCount !== void 0) cells.push(["Tokens", count(tokenCount)]);
-		if (span.costUsd !== void 0) cells.push(["Cost", formatCost(span.costUsd)]);
+		if (cost !== void 0) cells.push(["Cost", formatCost(cost)]);
+		cells.splice(6);
+		const kind = span.kind === "model" ? "Thinking" : KIND_LABEL[span.kind];
+		const step = owner ? `${kind}${span.name && span.name !== kind && span.name.toLowerCase() !== span.kind ? ` ${span.name}` : ""} · ${duration}${row.ok ? "" : " · failed"}` : void 0;
+		const sentence = !owner && span.output && span.output !== who.name ? span.output : 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),
+			"data-outcome": outcome?.tone,
 			style: {
 				left,
 				top
@@ -2695,7 +2755,12 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 							className: "fw-card-who",
 							children: who.name
 						}),
-						/* @__PURE__ */ jsx("span", {
+						outcome ? /* @__PURE__ */ jsx("span", {
+							className: "fw-pill fw-pill-outcome",
+							"data-tone": "0",
+							"data-outcome": outcome.tone,
+							children: outcome.label
+						}) : /* @__PURE__ */ jsx("span", {
 							className: `fw-pill fw-pill-${status.toLowerCase()}`,
 							children: status
 						}),
@@ -2713,13 +2778,21 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 						})
 					]
 				}),
+				who.span.detail && /* @__PURE__ */ jsx("p", {
+					className: "fw-card-detail",
+					children: who.span.detail
+				}),
 				/* @__PURE__ */ jsx("dl", {
 					className: "fw-card-cells",
 					children: cells.map(([name, value]) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: name }), /* @__PURE__ */ jsx("dd", { children: value })] }, name))
 				}),
-				/* @__PURE__ */ jsx("p", {
+				step && /* @__PURE__ */ jsx("p", {
+					className: "fw-card-step",
+					children: step
+				}),
+				sentence && /* @__PURE__ */ jsx("p", {
 					className: "fw-card-result",
-					children: span.output ?? span.name
+					children: sentence
 				})
 			]
 		});
@@ -2792,9 +2865,10 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 				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) })] }),
+					span.costUsd !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Cost" }), /* @__PURE__ */ jsx("dd", { children: formatCost(span.costUsd) })] }),
+					tokens && span.promptTokens !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Tokens in" }), /* @__PURE__ */ jsx("dd", { children: count(span.promptTokens) })] }),
+					tokens && span.completionTokens !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Tokens out" }), /* @__PURE__ */ jsx("dd", { children: count(span.completionTokens) })] }),
+					(span.facts ?? []).slice(0, 3).map((fact) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: fact.label }), /* @__PURE__ */ jsx("dd", { children: fact.value })] }, fact.label)),
 					row.hasChildren && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Steps" }), /* @__PURE__ */ jsx("dd", { children: row.descendants })] })
 				]
 			}),
@@ -2853,7 +2927,7 @@ function endLabel(row, clockMs) {
 }
 /** 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 { row, view, top, collapsed, searching, slowest, costliest, active, focusable, selected, sticky, clockMs, renderIcon, fillByAgent, motion } = props;
 	const span = row.span;
 	const running = spanRunning(span);
 	const agentView = view === "agents";
@@ -2869,18 +2943,26 @@ const FlowRow = memo(function FlowRow(props) {
 		"data-span-id": row.id,
 		"data-span-kind": kind,
 		"data-slowest": slowest || void 0,
+		"data-running": running || 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),
-		"data-outcome": span.outcome?.tone,
-		className: `fw-row${active ? " fw-active" : ""}${sticky ? " fw-sticky-row" : ""}${isAgent ? " fw-agent-row" : ""}`,
-		style: { "--row-y": `${top}px` },
+		"data-outcome": fillByAgent ? void 0 : span.outcome?.tone,
+		className: `fw-row${active ? " fw-active" : ""}${sticky ? " fw-sticky-row" : ""}${isAgent ? " fw-agent-row" : ""}${motion?.enter !== void 0 ? " fw-enter" : ""}${motion?.settle ? " fw-settle" : ""}`,
+		style: {
+			"--row-y": `${top}px`,
+			"--fw-enter-delay": `${motion?.enter ?? 0}ms`
+		},
 		onFocus: (event) => {
 			if (event.target === event.currentTarget) props.onActivate(row);
 		},
-		onClick: () => props.onActivate(row),
+		onClick: (event) => {
+			props.onActivate(row);
+			const bar = agentView ? event.currentTarget.querySelector(".fw-bar") : null;
+			if (bar) props.onPin(row.id, bar);
+		},
 		children: [/* @__PURE__ */ jsxs("div", {
 			role: "gridcell",
 			className: "fw-label",
@@ -2906,10 +2988,6 @@ const FlowRow = memo(function FlowRow(props) {
 					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,
@@ -2918,21 +2996,41 @@ const FlowRow = memo(function FlowRow(props) {
 				/* @__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)
-					})]
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: `fw-span-name${isAgent || row.hasChildren ? " fw-strong" : ""}`,
+							children: [
+								fillByAgent && isAgent && span.outcome ? /* @__PURE__ */ jsx("span", {
+									className: "fw-agent-dot",
+									"data-tone": "0",
+									"data-outcome": span.outcome.tone,
+									title: span.outcome.label,
+									"aria-hidden": true
+								}) : agentView && /* @__PURE__ */ jsx("span", {
+									className: "fw-agent-dot",
+									"aria-hidden": true
+								}),
+								running && /* @__PURE__ */ jsx("span", {
+									className: "fw-spinner",
+									role: "status",
+									"aria-label": "running"
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "fw-name-text",
+									children: row.name
+								})
+							]
+						}),
+						agentView && span.detail && /* @__PURE__ */ jsx("span", {
+							className: "fw-subtitle",
+							children: span.detail
+						}),
+						agentView && renderIcon && /* @__PURE__ */ jsx("span", {
+							className: "fw-detail-icon",
+							"aria-hidden": true,
+							children: renderIcon(span)
+						})
+					]
 				}),
 				folded && /* @__PURE__ */ jsxs("span", {
 					className: "fw-count",
@@ -2948,11 +3046,19 @@ const FlowRow = memo(function FlowRow(props) {
 			role: "gridcell",
 			className: "fw-lane",
 			"data-waterfall-track": true,
-			"aria-label": `${KIND_LABEL[span.kind]}, ${label}${slowest ? ", slowest step" : ""}`,
+			"aria-label": `${KIND_LABEL[span.kind]}, ${label}${slowest ? `, slowest ${agentView ? "agent" : "step"}` : ""}${costliest ? ", costliest agent" : ""}`,
 			children: invalid ? /* @__PURE__ */ jsx("span", {
 				className: "fw-invalid",
 				children: "—"
 			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				span.marks?.map((mark) => /* @__PURE__ */ jsx("span", {
+					className: "fw-mark",
+					"data-mark": mark.kind,
+					style: at(mark.at, mark.at),
+					title: mark.label,
+					"aria-label": mark.label,
+					role: "img"
+				}, `m-${mark.at}-${mark.label}`)),
 				/* @__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),
@@ -2976,23 +3082,30 @@ const FlowRow = memo(function FlowRow(props) {
 					events: props,
 					agentView
 				}, `${mark.id}-${i}`)),
-				!agentView && /* @__PURE__ */ jsxs("span", {
+				/* @__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"
-					})]
+					style: at(span.startMs, running ? OPEN_END : span.endMs),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "fw-duration",
+							children: label
+						}),
+						slowest && /* @__PURE__ */ jsx("span", {
+							className: "fw-badge",
+							children: "Slowest"
+						}),
+						costliest && /* @__PURE__ */ jsx("span", {
+							className: "fw-badge",
+							children: "Costliest"
+						})
+					]
 				})
 			] })
 		})]
 	});
-}, (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)));
+}, (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.costliest === b.costliest && a.active === b.active && a.focusable === b.focusable && a.selected === b.selected && a.sticky === b.sticky && a.motion === b.motion && a.renderIcon === b.renderIcon && a.fillByAgent === b.fillByAgent && (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 }) {
+function LinkMark({ link, rowHeight, hot }) {
 	const upper = Math.min(link.from, link.to), lower = Math.max(link.from, link.to);
 	const style = {
 		...at(link.atMs, link.atMs),
@@ -3000,13 +3113,55 @@ function LinkMark({ link, rowHeight }) {
 		height: (lower - upper) * rowHeight - 5
 	};
 	return /* @__PURE__ */ jsx("span", {
-		className: `fw-link fw-link-${link.dir}`,
+		className: `fw-link fw-link-${link.dir}${hot ? " fw-link-hot" : ""}`,
 		"data-tone": toneKey(link.tone),
 		style,
 		"aria-hidden": true
 	});
 }
 //#endregion
+//#region src/react/flow-waterfall-motion.ts
+const HOLD_MS = 700;
+const STAGGER_MS = 20;
+const STAGGER_CAP_MS = 200;
+/**
+* Grow, unfold and settle. Rows that arrived since the last change (a live span, an unfolded branch, the first paint) grow
+* from their start in a short stagger; a row that stops running settles. Motion is keyed to the row set, not to what is
+* mounted, so scrolling a virtualized tree never replays it; an entry expires after its animation so a remount stays still.
+*/
+function useRowMotion(rows) {
+	const known = useRef(null);
+	const running = useRef(/* @__PURE__ */ new Set());
+	const active = useRef(/* @__PURE__ */ new Map());
+	const [expiry, setExpiry] = useState(0);
+	const motion = useMemo(() => {
+		const now = Date.now();
+		for (const [id, entry] of active.current) if (entry.until <= now) active.current.delete(id);
+		const previous = known.current;
+		let order = 0;
+		for (const row of rows) {
+			const isRunning = spanRunning(row.span);
+			if (!previous || !previous.has(row.id)) active.current.set(row.id, {
+				enter: Math.min(order++ * STAGGER_MS, STAGGER_CAP_MS),
+				until: now + HOLD_MS + STAGGER_CAP_MS
+			});
+			else if (running.current.has(row.id) && !isRunning) active.current.set(row.id, {
+				settle: true,
+				until: now + HOLD_MS
+			});
+		}
+		known.current = new Set(rows.map((row) => row.id));
+		running.current = new Set(rows.filter((row) => spanRunning(row.span)).map((row) => row.id));
+		return new Map(active.current);
+	}, [rows, expiry]);
+	useEffect(() => {
+		if (motion.size === 0) return;
+		const timer = setTimeout(() => setExpiry((value) => value + 1), 920);
+		return () => clearTimeout(timer);
+	}, [motion]);
+	return motion;
+}
+//#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 = [
@@ -3086,7 +3241,7 @@ function clampWindow(view, limitMs) {
 //#region src/react/flow-waterfall-body.tsx
 const ROW_HEIGHT = {
 	spans: 36,
-	agents: 52
+	agents: 40
 };
 const OVERSCAN = 8;
 /** Rows re-render once per CHUNK rows scrolled; overscan covers the rows in between. */
@@ -3159,6 +3314,7 @@ function FlowBody(props) {
 		view
 	]);
 	const index = useMemo(() => new Map(rows.map((row, i) => [row.id, i])), [rows]);
+	const motion = useRowMotion(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)));
@@ -3288,7 +3444,7 @@ function FlowBody(props) {
 		handle.addEventListener("pointerup", up);
 	};
 	const axis = /* @__PURE__ */ jsxs("div", {
-		className: `fw-axis fw-axis-${view === "agents" ? "bottom" : "top"}`,
+		className: "fw-axis fw-axis-top",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "fw-axis-label",
 			children: [view === "spans" && /* @__PURE__ */ jsx(Fragment, { children: props.onExpandAll && /* @__PURE__ */ jsxs("span", {
@@ -3327,14 +3483,27 @@ function FlowBody(props) {
 			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
-			})]
+			children: [
+				ticks.map((tick) => /* @__PURE__ */ jsx("span", {
+					className: "fw-tick",
+					style: { "--s": tick },
+					children: formatClock(tick)
+				}, tick)),
+				props.markers?.map((marker) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "fw-event",
+					"data-tone": marker.tone ?? "neutral",
+					style: { "--s": marker.at },
+					title: marker.kind ? `${marker.kind}: ${marker.label}` : marker.label,
+					"aria-label": `Jump to ${marker.kind ? `${marker.kind} ` : ""}${marker.label}`,
+					onPointerDown: (event) => event.stopPropagation(),
+					onClick: () => props.onScrub(marker.at)
+				}, `e-${marker.at}-${marker.label}`)),
+				showCursor && /* @__PURE__ */ jsx("span", {
+					className: "fw-cursor-handle",
+					"aria-hidden": true
+				})
+			]
 		})]
 	});
 	const row = (item, i, isSticky = false) => /* @__PURE__ */ jsx(FlowRow, {
@@ -3344,12 +3513,15 @@ function FlowBody(props) {
 		collapsed: collapsed.has(item.id),
 		searching,
 		slowest: item.id === slowestId,
+		costliest: item.id === props.costliestId,
 		active: item.id === activeId,
 		focusable: !isSticky && (item.id === activeId || (activeId === void 0 || !index.has(activeId)) && i === 0),
 		selected: item.id === selectedId,
 		sticky: isSticky,
+		motion: isSticky ? void 0 : motion.get(item.id),
 		clockMs,
 		renderIcon: props.renderIcon,
+		fillByAgent: props.fillByAgent,
 		onToggle: props.onToggle,
 		onInspect: props.onInspect,
 		onLeave: props.onLeave,
@@ -3359,82 +3531,91 @@ function FlowBody(props) {
 	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",
+		children: [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",
+					"data-primary-content": "",
+					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,
+								hot: props.focusId !== void 0 && (rows[link.from]?.id === props.focusId || rows[link.to]?.id === props.focusId)
+							}, 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 || props.pauses?.length ? /* @__PURE__ */ jsxs("div", {
+					className: "fw-marker-layer",
+					children: [props.pauses?.map((pause) => /* @__PURE__ */ jsx("span", {
+						className: "fw-pause",
 						style: {
-							height,
-							maxHeight
-						},
-						onKeyDown: keydown,
-						onScroll: (event) => {
-							const next = Math.floor(event.currentTarget.scrollTop / rowHeight / CHUNK);
-							if (next !== chunk) setChunk(next);
+							"--s": pause.startMs,
+							"--e": pause.endMs
 						},
-						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 },
-							title: marker.label,
-							children: markerLabels.has(marker) && /* @__PURE__ */ jsx("span", {
-								className: `fw-marker-label${markerLabels.get(marker) === "left" ? " fw-marker-label-left" : ""}`,
-								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
-		]
+						title: pause.label,
+						children: /* @__PURE__ */ jsx("span", {
+							className: "fw-pause-label",
+							children: pause.label
+						})
+					}, `p-${pause.startMs}`)), props.markers?.map((marker) => /* @__PURE__ */ jsx("span", {
+						className: "fw-marker",
+						"data-tone": marker.tone ?? "neutral",
+						style: { "--s": marker.at },
+						title: marker.label,
+						children: markerLabels.has(marker) && /* @__PURE__ */ jsx("span", {
+							className: `fw-marker-label${markerLabels.get(marker) === "left" ? " fw-marker-label-left" : ""}`,
+							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" })
+				})
+			]
+		})]
 	});
 }
 /** Ancestors of the first visible row stay pinned while their children scroll beneath them. This layer follows
@@ -3698,13 +3879,51 @@ function PlaybackBar({ view, playing, limit, clockMs, speed, zoom, marks, slider
 const LANE_PAD = 12;
 const END_LABEL_GUTTER = {
 	spans: 120,
-	agents: 16
+	agents: 176
 };
 const NAME_WIDTH = {
 	spans: 320,
 	agents: 240
 };
+/** The summary strip: as of the playhead while scrubbing, the producer's totals otherwise. */
+function summaryCells(trace, at, durationMs) {
+	const cost = costSummary(at ? at.costUsd : trace.costUsd, trace);
+	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;
+	return {
+		cost,
+		tokens,
+		errors,
+		summary: [
+			["Duration", formatSpanDuration(durationMs)],
+			[
+				cost.label,
+				cost.value,
+				cost.title
+			],
+			[
+				"Tokens",
+				formatCount(tokens),
+				`${tokens.toLocaleString()} tokens`
+			],
+			[
+				"LLM calls",
+				modelCalls === void 0 ? "—" : 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()]
+		]
+	};
+}
 /** One legend item per outcome label the agents carry, with its count; nothing when no agent has an outcome. */
+const TONE_ORDER = [
+	"ok",
+	"warn",
+	"failed",
+	"neutral"
+];
 function OutcomeLegend({ agents }) {
 	const items = /* @__PURE__ */ new Map();
 	for (const row of agents) {
@@ -3722,7 +3941,7 @@ function OutcomeLegend({ agents }) {
 	return /* @__PURE__ */ jsxs("ul", {
 		className: "fw-legend",
 		"aria-label": "Outcomes",
-		children: [[...items].map(([label, item]) => /* @__PURE__ */ jsxs("li", { children: [
+		children: [[...items].sort(([a, x], [b, y]) => TONE_ORDER.indexOf(x.tone) - TONE_ORDER.indexOf(y.tone) || a.localeCompare(b)).map(([label, item]) => /* @__PURE__ */ jsxs("li", { children: [
 			/* @__PURE__ */ jsx("span", {
 				className: "fw-swatch",
 				"data-tone": "0",
@@ -3743,10 +3962,9 @@ function OutcomeLegend({ agents }) {
 		] })]
 	});
 }
-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, onSelect, markers }) {
+function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defaultCollapsed = false, defaultView = "spans", renderIcon, maxHeight, onSelect, markers, onTimeChange, agentFill = "agent", selectedId, onDeselect }) {
 	const root = useRef(null);
 	const search = useRef(null);
 	const slider = useRef(null);
@@ -3827,6 +4045,11 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		collapsed
 	]);
 	const slowest = view === "spans" ? slowestRow(rows, clockMs) : void 0;
+	const callouts = useMemo(() => view === "agents" ? agentCallouts(agents, clockMs) : {}, [
+		view,
+		agents,
+		clockMs
+	]);
 	const rowsHeight = maxHeight ?? (view === "agents" ? ROW_HEIGHT.agents * 20 : 640);
 	const resized = useRef(false);
 	useLayoutEffect(() => {
@@ -3857,7 +4080,17 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 			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();
+			else if (event.key === "Escape" && (card || selectedId)) {
+				if (card) closeCard();
+				onDeselect?.();
+			} else if ((event.key === "n" || event.key === "p") && markers?.length) {
+				const ats = markers.map((marker) => marker.at).sort((a, b) => a - b);
+				const next = event.key === "n" ? ats.find((at) => at > clockMs + 1) : [...ats].reverse().find((at) => at < clockMs - 1);
+				if (next !== void 0) {
+					event.preventDefault();
+					scrubTo(next);
+				}
+			}
 		};
 		document.addEventListener("keydown", keydown);
 		return () => document.removeEventListener("keydown", keydown);
@@ -3884,7 +4117,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		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 pad = Math.max((end - span.startMs) * .15, 500, (width / 8 - (end - span.startMs)) / 2);
 		const target = clampWindow({
 			startMs: span.startMs - pad,
 			endMs: end + pad
@@ -3975,6 +4208,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		}
 	};
 	const pin = useCallback((target, element) => latest.current.pin(target, element), []);
+	const selection = selectedId ?? (card?.pinned ? card.target : void 0);
 	const closeCard = () => {
 		const target = card?.target;
 		setCard(null);
@@ -3984,6 +4218,11 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		setPlaying(false);
 		setPosition(Math.min(ms, clock.limitMs()));
 	}, [clock]);
+	const timeListener = useRef(onTimeChange);
+	timeListener.current = onTimeChange;
+	useEffect(() => {
+		timeListener.current?.(position);
+	}, [position]);
 	const togglePlay = () => {
 		if (playing) {
 			setPosition(clock.positionMs());
@@ -3994,31 +4233,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		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", 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 { errors, summary } = summaryCells(trace, scrubbing ? totalsAt(trace, clockMs) : void 0, scrubbing ? clockMs : limit);
 	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);
@@ -4036,11 +4251,37 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		count: 1,
 		retry: false
 	}]), [rows]);
+	const playback = /* @__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)
+	});
 	return /* @__PURE__ */ jsxs("section", {
 		ref: root,
 		"data-flow-waterfall": true,
 		"aria-label": label,
 		className: `fw-root fw-root-${view}`,
+		"data-selection": selectedId ? "" : void 0,
 		style: {
 			"--fw-name-w": `${nameWidth}px`,
 			"--fw-pad": `${LANE_PAD}px`,
@@ -4070,11 +4311,11 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 								})
 							]
 						}),
-						view === "agents" && /* @__PURE__ */ jsx("p", {
+						view === "agents" && /* @__PURE__ */ jsxs("p", {
 							className: "fw-headline",
 							"aria-live": "polite",
-							children: done ? /* @__PURE__ */ jsxs(Fragment, { children: [
-								/* @__PURE__ */ jsx("span", {
+							children: [
+								done && /* @__PURE__ */ jsx("span", {
 									className: "fw-done-mark",
 									"aria-label": "done",
 									children: "✓"
@@ -4082,17 +4323,8 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 								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)}` : ""
-							] })
+								done && speedup >= 1.05 ? ` · ${speedup.toFixed(1)}x parallel` : ""
+							]
 						}),
 						/* @__PURE__ */ jsx(OutcomeLegend, { agents })
 					]
@@ -4106,6 +4338,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 							type: "button",
 							role: "radio",
 							"aria-checked": view === option,
+							disabled: view === option,
 							className: "fw-view-button",
 							onClick: () => {
 								setView(option);
@@ -4147,7 +4380,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 					})]
 				})]
 			}),
-			view === "spans" && /* @__PURE__ */ jsx("dl", {
+			/* @__PURE__ */ jsx("dl", {
 				className: "fw-summary",
 				children: summary.map(([name, value, title]) => /* @__PURE__ */ jsxs("div", {
 					className: name === "Errors" && errors > 0 ? "fw-has-errors" : void 0,
@@ -4158,6 +4391,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 					})]
 				}, name))
 			}),
+			view === "agents" && playback,
 			/* @__PURE__ */ jsx(FlowBody, {
 				rows: visible,
 				byId,
@@ -4166,14 +4400,18 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 				maxHeight: rowsHeight,
 				collapsed,
 				searching: Boolean(query.trim()),
-				slowestId: slowest?.id,
+				pauses: trace.pauses,
+				slowestId: slowest?.id ?? callouts.slowestId,
+				costliestId: callouts.costliestId,
 				activeId,
-				selectedId: card?.pinned ? card.target : void 0,
+				selectedId: selection,
+				focusId: cardAgent?.id ?? (view === "agents" ? activeId : void 0),
 				clockMs,
 				window: win,
 				trackPx,
 				showCursor,
 				markers,
+				fillByAgent: agentFill === "agent",
 				zoomed: zoom !== null,
 				renderIcon,
 				emptyText: rows.length === 0 ? "No spans yet. Waiting for trace events." : `No matching steps for “${query}”.`,
@@ -4212,31 +4450,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 					compact: view === "agents"
 				})
 			}),
-			/* @__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)
-			})
+			view === "spans" && playback
 		]
 	});
 }