@tangle-network/charts 0.21.15 → 0.21.16

package/dist/react/index.js

@@ -2546,6 +2546,7 @@ function flowWaterfallRows(trace, resolutionMs) {
 		row.hasChildren = kids.length > 0;
 		ordered_.push(row);
 		const marks = [];
+		const own = row.span.promptTokens !== void 0 || row.span.completionTokens !== void 0 || row.span.cachedTokens !== void 0;
 		let cost = row.span.costUsd ?? 0;
 		let costKnown = row.span.kind !== "model" || row.span.costUsd !== void 0;
 		for (const child of kids) {
@@ -2556,18 +2557,15 @@ function flowWaterfallRows(trace, resolutionMs) {
 			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));
-				const counts = row.counts ??= {
-					model: 0,
-					tool: 0,
-					failed: 0
-				};
-				if (!child.ok) counts.failed++;
-				else if (child.kind === "model") counts.model++;
-				else counts.tool++;
-			}
+			if (child.kind !== "pipeline" && child.kind !== "waiting" && ordered(child.span)) row.own.push(segmentOf(child));
 		}
+		Object.assign(row, stepStats(kids));
+		const tokens = own ? {
+			prompt: row.span.promptTokens,
+			completion: row.span.completionTokens,
+			cached: row.span.cachedTokens
+		} : sumTokens(kids);
+		if (tokens) row.tokens = tokens;
 		if (row.hasChildren && costKnown) row.rollupCostUsd = cost;
 		if (row.hasChildren) {
 			row.segments = mergeSegments(marks.map((mark) => ({ ...mark })), gap);
@@ -2580,6 +2578,74 @@ function flowWaterfallRows(trace, resolutionMs) {
 	for (const row of rows) if (!row.parentId) visit(row, 0, -1);
 	return ordered_;
 }
+/** What a row's direct steps add up to; nothing when it has none. */
+function stepStats(steps) {
+	let counts;
+	const modelMs = [];
+	for (const step of steps) {
+		if (step.kind === "pipeline" || step.kind === "waiting" || !ordered(step.span)) continue;
+		counts ??= {
+			model: 0,
+			tool: 0,
+			failed: 0,
+			retried: 0,
+			tools: {}
+		};
+		if (!step.ok) counts.failed++;
+		if (step.retry) counts.retried++;
+		if (step.kind === "model") {
+			counts.model++;
+			if (!spanRunning(step.span)) modelMs.push(step.span.endMs - step.span.startMs);
+		} else {
+			counts.tool++;
+			const tool = toolOf(step.name) || step.kind;
+			counts.tools[tool] = (counts.tools[tool] ?? 0) + 1;
+		}
+	}
+	return counts ? {
+		counts,
+		modelMs: modelMs.sort((a, b) => a - b)
+	} : {};
+}
+/** Several rows' steps as one: a family's members or a folded run. */
+function mergeStats(rows) {
+	let counts;
+	for (const row of rows) {
+		if (!row.counts) continue;
+		counts ??= {
+			model: 0,
+			tool: 0,
+			failed: 0,
+			retried: 0,
+			tools: {}
+		};
+		counts.model += row.counts.model;
+		counts.tool += row.counts.tool;
+		counts.failed += row.counts.failed;
+		counts.retried += row.counts.retried;
+		for (const [tool, n] of Object.entries(row.counts.tools)) counts.tools[tool] = (counts.tools[tool] ?? 0) + n;
+	}
+	const tokens = sumTokens(rows);
+	return {
+		...counts ? {
+			counts,
+			modelMs: rows.flatMap((row) => row.modelMs ?? []).sort((a, b) => a - b)
+		} : {},
+		...tokens ? { tokens } : {}
+	};
+}
+function sumTokens(rows) {
+	let out;
+	for (const row of rows) for (const key of [
+		"prompt",
+		"completion",
+		"cached"
+	]) {
+		const n = row.tokens?.[key];
+		if (n !== void 0) (out ??= {})[key] = (out[key] ?? 0) + n;
+	}
+	return out;
+}
 function segmentOf(row) {
 	return {
 		startMs: row.span.startMs,
@@ -2813,6 +2879,7 @@ function agentFamilies(agents, open) {
 				alt: i % 2 === 1
 			}))).sort((a, b) => a.startMs - b.startMs),
 			...known.length ? { rollupCostUsd: known.reduce((sum, cost) => sum + cost, 0) } : {},
+			...mergeStats(members),
 			span: {
 				id,
 				kind: "pipeline",
@@ -2843,35 +2910,24 @@ function agentFamilies(agents, open) {
 	}
 	return out;
 }
-/** The second line of an agent row: how it ended and how much it did ("failed · 3 turns · 412 tool calls", "6 agents · 4 failed"). */
+/** The second line of an agent row in parts: how it ended and how much it did (failed, 3 LLM calls, 412 tool calls; 6 agents, 4 failed).
+* The row shows the parts in order and drops the last ones whole when the line is full, never half a word. */
 function agentSummary(row) {
 	if (row.id.startsWith("family:")) {
 		const failed = Number(row.span.meta?.failedAgents ?? 0);
-		return `${row.descendants} agents${failed ? ` · ${failed} failed` : ""}`;
+		return [`${row.descendants} agents`, ...failed ? [`${failed} failed`] : []];
 	}
 	if (row.id.startsWith("run:")) {
 		const failed = row.own.filter((mark) => mark.kind === "failed").length;
-		return failed ? `${failed} failed` : "all done";
+		return [failed ? `${failed} failed` : "all done"];
 	}
-	const counts = row.counts ?? {
-		model: 0,
-		tool: 0,
-		failed: 0
-	};
-	const turns = counts.model + counts.failed;
-	const tools = counts.tool;
-	const state = row.span.outcome?.label ?? (spanRunning(row.span) ? "running" : !row.ok ? "failed" : row.kind === "pipeline" ? "" : "done");
-	const unit = row.kind === "pipeline" ? ["turn", "turns"] : ["model call", "model calls"];
+	const calls = row.counts?.model ?? 0;
+	const tools = row.counts?.tool ?? 0;
 	return [
-		state,
-		turns ? `${turns} ${turns === 1 ? unit[0] : unit[1]}` : "",
+		row.span.outcome?.label ?? (spanRunning(row.span) ? "running" : !row.ok ? "failed" : row.kind === "pipeline" ? "" : "done"),
+		calls ? `${calls} LLM ${calls === 1 ? "call" : "calls"}` : "",
 		tools ? `${tools} tool ${tools === 1 ? "call" : "calls"}` : ""
-	].filter(Boolean).join(" · ");
-}
-/** The summary split where it may be cut: the tool count goes first when the line does not fit, never half a word. */
-function agentSummaryParts(row) {
-	const tools = / · (\d+ tool calls?)$/.exec(agentSummary(row));
-	return tools ? [agentSummary(row).slice(0, tools.index), tools[1]] : [agentSummary(row)];
+	].filter(Boolean);
 }
 /**
 * The agent view's rows: families folded until opened, and an opened agent's own steps (its turns and tool calls, not its
@@ -2923,6 +2979,8 @@ function stepRuns(steps) {
 			hasChildren: false,
 			descendants: 0,
 			segments: [],
+			...stepStats(run),
+			tokens: sumTokens(run),
 			own: run.map((step) => ({
 				startMs: step.span.startMs,
 				endMs: step.span.endMs,
@@ -3114,58 +3172,110 @@ const KIND_LABEL = {
 	waiting: "Waiting",
 	handoff: "Handoff"
 };
-const unknown = /* @__PURE__ */ jsx("span", {
-	className: "fw-unknown",
-	title: "Not recorded by the harness",
-	children: "—"
-});
-const count = (n) => n === void 0 ? unknown : /* @__PURE__ */ jsx("span", {
-	title: n.toLocaleString(),
-	children: formatCount(n)
+const count = (n, unit) => /* @__PURE__ */ jsxs("span", {
+	title: `${n.toLocaleString()} ${unit}`,
+	children: [
+		formatCount(n),
+		" ",
+		unit
+	]
 });
-/** The span card: what ran, for how long, at what recorded cost, on what input. */
+const plural = (n, one, many = `${one}s`) => `${n.toLocaleString()} ${n === 1 ? one : many}`;
+/** Nearest-rank percentile of ascending values. */
+const percentile = (sorted, p) => sorted[Math.min(sorted.length - 1, Math.ceil(p * sorted.length) - 1)];
+const TOOLS_SHOWN = 4;
+/** The card's table: what the row recorded, every value with its unit. A value nobody recorded is left out, never printed as zero. */
+function metrics(row, clockMs, full) {
+	const span = row.span;
+	const out = [];
+	if (span.detail) out.push([span.kind === "tool" ? "Provider" : "Model", span.detail]);
+	const stop = spanRunning(span) ? Math.max(span.endMs, clockMs) : span.endMs;
+	out.push(["Duration", Number.isFinite(stop - span.startMs) && stop >= span.startMs ? formatSpanDuration(stop - span.startMs) : "—"]);
+	if (full) out.push(["Started", `+${formatSpanDuration(Math.max(0, span.startMs))}`]);
+	const tokens = row.tokens;
+	if (tokens) {
+		const parts = [
+			["prompt", "in"],
+			["completion", "out"],
+			["cached", "cached"]
+		].flatMap(([key, unit]) => tokens[key] === void 0 ? [] : [count(tokens[key], unit)]);
+		out.push(["Tokens", /* @__PURE__ */ jsx("span", {
+			className: "fw-card-parts",
+			children: parts.map((part, i) => /* @__PURE__ */ jsx("span", { children: part }, i))
+		})]);
+	}
+	const latency = row.modelMs;
+	if (latency?.length) out.push(["LLM latency", /* @__PURE__ */ jsxs("span", {
+		className: "fw-card-parts",
+		children: [/* @__PURE__ */ jsxs("span", { children: [formatSpanDuration(percentile(latency, .5)), " median"] }), latency.length >= 10 && /* @__PURE__ */ jsxs("span", { children: [formatSpanDuration(percentile(latency, .95)), " p95"] })]
+	})]);
+	const cost = span.costUsd ?? row.rollupCostUsd;
+	if (cost !== void 0) out.push(["Cost", rowCostText(row, cost)]);
+	const counts = row.counts;
+	if (counts?.model) out.push(["LLM calls", counts.model.toLocaleString()]);
+	if (counts?.tool) {
+		const tools = Object.entries(counts.tools).sort(([a, x], [b, y]) => y - x || a.localeCompare(b));
+		const rest = tools.length - TOOLS_SHOWN;
+		out.push(["Tool calls", /* @__PURE__ */ jsxs(Fragment, { children: [counts.tool.toLocaleString(), /* @__PURE__ */ jsxs("span", {
+			className: "fw-card-tools",
+			title: tools.map(([tool, n]) => `${tool} ${n}`).join(", "),
+			children: [tools.slice(0, rest > 1 ? TOOLS_SHOWN : tools.length).map(([tool, n]) => /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", { children: tool }), /* @__PURE__ */ jsx("span", { children: n.toLocaleString() })] }, tool)), rest > 1 && /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", { children: [rest, " more tools"] }), /* @__PURE__ */ jsx("span", { children: tools.slice(TOOLS_SHOWN).reduce((sum, [, n]) => sum + n, 0).toLocaleString() })] })]
+		})] })]);
+	}
+	if (counts?.failed) out.push(["Failures", plural(counts.failed, "failed step")]);
+	const restarts = span.marks?.filter((mark) => mark.kind === "restart").length ?? 0;
+	if (counts?.retried || restarts) out.push(["Retries", [counts?.retried ? plural(counts.retried, "step retried", "steps retried") : "", restarts ? plural(restarts, "restart") : ""].filter(Boolean).join(" · ")]);
+	if (full && row.hasChildren) out.push(["Steps", row.descendants.toLocaleString()]);
+	for (const fact of span.facts ?? []) if (!out.some(([label]) => label.toLowerCase() === fact.label.toLowerCase())) out.push([fact.label, fact.value]);
+	return out;
+}
+function Table({ rows }) {
+	return /* @__PURE__ */ jsx("dl", {
+		className: "fw-card-table",
+		children: rows.map(([name, value]) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: name }), /* @__PURE__ */ jsx("dd", { children: value })] }, name))
+	});
+}
+/** The span card: what ran, for how long, on what tokens and at what recorded cost, then its input and output. */
 function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderIcon, compact }) {
 	const span = row.span;
 	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 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 frame = {
+		id,
+		role: pinned ? "dialog" : "tooltip",
+		"aria-label": pinned ? `${span.name} details` : void 0,
+		style: {
+			left,
+			top
+		},
+		onKeyDown: (event) => {
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				onClose();
+			}
+		}
 	};
-	const duration = lasted(span);
+	const close = pinned && /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "fw-icon-button fw-card-close",
+		"aria-label": "Close details",
+		onClick: onClose,
+		autoFocus: true,
+		children: /* @__PURE__ */ jsx(CloseGlyph, {})
+	});
 	if (compact) {
 		const who = owner ?? row;
-		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 (cost !== void 0) cells.push(["Cost", rowCostText(who, cost)]);
-		cells.splice(6);
+		const outcome = who.span.outcome;
 		const kind = span.kind === "model" ? "Thinking" : KIND_LABEL[span.kind];
-		const step = owner && span.endMs > span.startMs ? `${kind}${span.name && span.name !== kind && span.name.toLowerCase() !== span.kind ? ` ${span.name}` : ""} · ${duration}${row.ok ? "" : " · failed"}` : void 0;
+		const named = span.name && span.name.toLowerCase() !== kind.toLowerCase() && span.name.toLowerCase() !== span.kind ? ` ${span.name}` : "";
+		const stop = spanRunning(span) ? Math.max(span.endMs, clockMs) : span.endMs;
+		const step = owner && span.endMs > span.startMs ? `${kind}${named} · ${formatSpanDuration(stop - span.startMs)}${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,
+			...frame,
 			className: "fw-card fw-card-compact",
 			"data-tone": toneKey(who.tone),
 			"data-outcome": outcome?.tone,
-			style: {
-				left,
-				top
-			},
-			onKeyDown: (event) => {
-				if (event.key === "Escape") {
-					event.stopPropagation();
-					onClose();
-				}
-			},
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "fw-card-agent",
@@ -3187,28 +3297,10 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 							className: `fw-pill fw-pill-${status.toLowerCase()}`,
 							children: status
 						}),
-						pinned && /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: "fw-icon-button",
-							style: {
-								width: 20,
-								height: 20
-							},
-							"aria-label": "Close details",
-							onClick: onClose,
-							autoFocus: true,
-							children: /* @__PURE__ */ jsx(CloseGlyph, {})
-						})
+						close
 					]
 				}),
-				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(Table, { rows: metrics(who, clockMs, false) }),
 				step && /* @__PURE__ */ jsx("p", {
 					className: "fw-card-step",
 					children: step
@@ -3221,35 +3313,16 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 		});
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		id,
-		role: pinned ? "dialog" : "tooltip",
-		"aria-label": pinned ? `${span.name} details` : void 0,
+		...frame,
 		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]
-					})
-				]
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "fw-agent-dot",
+					"aria-hidden": true
+				}), owner.name]
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "fw-card-head",
@@ -3262,42 +3335,18 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 							name: span.name
 						})
 					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "fw-card-title",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "fw-card-name",
-							children: keepWords(span.name)
-						}), span.detail && /* @__PURE__ */ jsx("div", {
-							className: "fw-muted",
-							children: span.detail
-						})]
+					/* @__PURE__ */ jsx("div", {
+						className: "fw-card-name",
+						children: keepWords(span.name)
 					}),
 					/* @__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))] })] }),
-					span.costUsd !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Cost" }), /* @__PURE__ */ jsx("dd", { children: rowCostText(row, 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 })] })
+					close
 				]
 			}),
+			/* @__PURE__ */ jsx(Table, { rows: metrics(row, clockMs, true) }),
 			span.input && /* @__PURE__ */ jsxs("div", {
 				className: "fw-card-text",
 				children: [/* @__PURE__ */ jsx("div", {
@@ -3323,7 +3372,7 @@ const at = (startMs, endMs) => ({
 	"--s": startMs,
 	"--e": Number.isFinite(endMs) ? endMs : OPEN_END
 });
-const endLabelWidth = (label, slowest, costliest) => label.length * 7 + 8 + (slowest ? 74 : 0) + (costliest ? 84 : 0);
+const endLabelWidth = (label, slowest, costliest) => label.length * 7 + 8 + (slowest ? 80 : 0) + (costliest ? 90 : 0);
 function Segment({ mark, events, agentView, ending }) {
 	const glyph = mark.kind === "failed" ? agentView && !ending ? null : /* @__PURE__ */ jsx(FailGlyph, {}) : mark.retry ? /* @__PURE__ */ jsx(RetryGlyph, {}) : null;
 	const named = agentView && mark.kind === "tool" && (mark.count === 1 ? mark.name : mark.tool && `${mark.tool} ×${mark.count}`);
@@ -3332,10 +3381,10 @@ function Segment({ mark, events, agentView, ending }) {
 		"data-tone": toneKey(mark.tone),
 		style: at(mark.startMs, mark.endMs),
 		title: mark.name ? `${mark.name}${mark.count > 1 ? ` +${mark.count - 1} more` : ""}` : void 0,
-		onPointerEnter: agentView ? (event) => events.onInspect(mark.id, event.currentTarget) : void 0,
+		onPointerEnter: agentView ? (event) => events.onInspect(mark.id, event.currentTarget, event.clientX) : void 0,
 		onClick: agentView ? (event) => {
 			event.stopPropagation();
-			events.onPin(mark.id, event.currentTarget);
+			events.onPin(mark.id, event.currentTarget, event.clientX);
 		} : void 0,
 		children: glyph ? /* @__PURE__ */ jsx("span", {
 			className: "fw-glyph",
@@ -3369,8 +3418,8 @@ const FlowRow = memo(function FlowRow(props) {
 	const kind = !row.ok ? "failed" : row.kind;
 	const marks = isAgent || row.hasChildren || row.id.startsWith("run:") ? folded && !agentView ? row.segments : row.own : [];
 	const label = endLabel(row, clockMs);
-	const summary = agentSummaryParts(row);
-	const inspect = (event) => props.onInspect(row.id, event.currentTarget);
+	const summary = [...span.detail && span.detail !== props.sharedDetail ? [span.detail] : [], ...agentSummary(row)];
+	const inspect = (event) => props.onInspect(row.id, event.currentTarget, event.clientX);
 	const family = agentView && row.id.startsWith("family:");
 	const step = agentView && row.stepOf !== void 0;
 	const opens = family || agentView && isAgent && row.own.length > 0;
@@ -3392,7 +3441,8 @@ const FlowRow = memo(function FlowRow(props) {
 		className: `fw-row${active ? " fw-active" : ""}${sticky ? " fw-sticky-row" : ""}${isAgent ? " fw-agent-row" : ""}${step ? " fw-step" : ""}${motion?.enter !== void 0 ? " fw-enter" : ""}${motion?.settle ? " fw-settle" : ""}`,
 		style: {
 			"--row-y": `${top}px`,
-			"--fw-enter-delay": `${motion?.enter ?? 0}ms`
+			"--fw-enter-delay": `${motion?.enter ?? 0}ms`,
+			"--fw-end-w": `${endLabelWidth(label, slowest, costliest)}px`
 		},
 		onFocus: (event) => {
 			if (event.target === event.currentTarget) props.onActivate(row);
@@ -3404,7 +3454,7 @@ const FlowRow = memo(function FlowRow(props) {
 				return;
 			}
 			const bar = agentView ? event.currentTarget.querySelector(".fw-bar") : null;
-			if (bar) props.onPin(row.id, bar);
+			if (bar) props.onPin(row.id, bar, event.target instanceof Element && event.target.closest(".fw-lane") ? event.clientX : void 0);
 		},
 		children: [/* @__PURE__ */ jsxs("div", {
 			role: "gridcell",
@@ -3491,11 +3541,11 @@ const FlowRow = memo(function FlowRow(props) {
 							className: "fw-subtitle-tail",
 							children: [/* @__PURE__ */ jsx("span", {
 								className: "fw-subtitle-text",
-								children: span.detail && span.detail !== props.sharedDetail ? `${span.detail} · ${summary[0]}` : summary[0]
-							}), summary[1] && /* @__PURE__ */ jsxs("span", {
+								children: summary[0]
+							}), summary.slice(1).map((part) => /* @__PURE__ */ jsxs("span", {
 								className: "fw-subtitle-extra",
-								children: ["· ", summary[1]]
-							})]
+								children: ["· ", part]
+							}, part))]
 						})]
 					})]
 				}),
@@ -3535,7 +3585,7 @@ const FlowRow = memo(function FlowRow(props) {
 					onClick: (event) => {
 						event.stopPropagation();
 						if (family) props.onToggle(row);
-						else props.onPin(row.id, event.currentTarget);
+						else props.onPin(row.id, event.currentTarget, event.clientX);
 					},
 					children: [!isAgent && !row.ok && /* @__PURE__ */ jsx("span", {
 						className: "fw-glyph",
@@ -3553,10 +3603,7 @@ const FlowRow = memo(function FlowRow(props) {
 				}, `${mark.id}-${i}`)),
 				/* @__PURE__ */ jsxs("span", {
 					className: "fw-end",
-					style: {
-						...at(span.startMs, running ? OPEN_END : span.endMs),
-						"--fw-end-w": `${endLabelWidth(label, slowest, costliest)}px`
-					},
+					style: at(span.startMs, running ? OPEN_END : span.endMs),
 					children: [
 						/* @__PURE__ */ jsx("span", {
 							className: "fw-duration",
@@ -3820,22 +3867,6 @@ function FlowBody(props) {
 		trackPx,
 		view
 	]);
-	const pauseLabels = useMemo(() => {
-		const shown = /* @__PURE__ */ new Set();
-		let freeFrom = -Infinity;
-		for (const pause of [...props.pauses ?? []].sort((a, b) => a.startMs - b.startMs)) {
-			const width = duration(pause.endMs - pause.startMs).length * 7 + 24;
-			const centre = ((pause.startMs + pause.endMs) / 2 - win.startMs) / msPerPx;
-			if (centre - width / 2 < freeFrom) continue;
-			shown.add(pause);
-			freeFrom = centre + width / 2 + 8;
-		}
-		return shown;
-	}, [
-		props.pauses,
-		win.startMs,
-		msPerPx
-	]);
 	useEffect(() => {
 		const element = scroller.current;
 		if (!element) return;
@@ -4017,18 +4048,21 @@ function FlowBody(props) {
 						props.onScrub(marker.at);
 					}
 				}, `e-${marker.at}-${marker.label}`)),
-				props.pauses?.filter((pause) => pauseLabels.has(pause)).map((pause) => /* @__PURE__ */ jsx("span", {
-					className: "fw-pause-label",
-					style: {
-						"--s": pause.startMs,
-						"--e": pause.endMs
-					},
-					title: pause.detail ? `${pause.label}: ${pause.detail}` : pause.label,
-					tabIndex: 0,
-					"aria-label": `${pause.label}, ${duration(pause.endMs - pause.startMs)}${pause.detail ? `: ${pause.detail}` : ""}`,
-					onPointerDown: (event) => event.stopPropagation(),
-					children: /* @__PURE__ */ jsx("b", { children: duration(pause.endMs - pause.startMs) })
-				}, `pl-${pause.startMs}`)),
+				props.pauses?.map((pause) => {
+					const said = `${pause.label} ${duration(pause.endMs - pause.startMs)}${pause.detail ? `: ${pause.detail}` : ""}`;
+					return /* @__PURE__ */ jsx("span", {
+						className: "fw-pause-mark",
+						style: {
+							"--s": pause.startMs,
+							"--e": pause.endMs
+						},
+						title: said,
+						"aria-label": said,
+						role: "img",
+						tabIndex: 0,
+						onPointerDown: (event) => event.stopPropagation()
+					}, `pm-${pause.startMs}`);
+				}),
 				jumped && /* @__PURE__ */ jsx("span", {
 					className: "fw-event-label",
 					"data-tone": jumped.tone ?? "neutral",
@@ -4077,14 +4111,24 @@ function FlowBody(props) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "fw-gridlayer",
 					"aria-hidden": true,
-					children: [ticks.map((tick) => /* @__PURE__ */ jsx("span", {
-						className: "fw-gridline",
-						style: { "--s": tick }
-					}, tick)), props.markers?.map((marker) => /* @__PURE__ */ jsx("span", {
-						className: "fw-marker-line",
-						"data-tone": marker.tone ?? "neutral",
-						style: { "--s": marker.at }
-					}, `l-${marker.at}-${marker.label}`))]
+					children: [
+						props.pauses?.map((pause) => /* @__PURE__ */ jsx("span", {
+							className: "fw-pause",
+							style: {
+								"--s": pause.startMs,
+								"--e": pause.endMs
+							}
+						}, `p-${pause.startMs}`)),
+						ticks.map((tick) => /* @__PURE__ */ jsx("span", {
+							className: "fw-gridline",
+							style: { "--s": tick }
+						}, tick)),
+						props.markers?.map((marker) => /* @__PURE__ */ jsx("span", {
+							className: "fw-marker-line",
+							"data-tone": marker.tone ?? "neutral",
+							style: { "--s": marker.at }
+						}, `l-${marker.at}-${marker.label}`))
+					]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					ref: scroller,
@@ -4129,16 +4173,9 @@ function FlowBody(props) {
 					rowHeight,
 					render: row
 				}),
-				props.markers?.length || props.pauses?.length ? /* @__PURE__ */ jsxs("div", {
+				props.markers?.length ? /* @__PURE__ */ jsx("div", {
 					className: "fw-marker-layer",
-					children: [props.pauses?.map((pause) => /* @__PURE__ */ jsx("span", {
-						className: "fw-pause",
-						style: {
-							"--s": pause.startMs,
-							"--e": pause.endMs
-						},
-						title: `${pause.label}, ${duration(pause.endMs - pause.startMs)}`
-					}, `p-${pause.startMs}`)), props.markers?.map((marker) => /* @__PURE__ */ jsx("span", {
+					children: props.markers.map((marker) => /* @__PURE__ */ jsx("span", {
 						className: "fw-marker",
 						"data-tone": marker.tone ?? "neutral",
 						style: { "--s": marker.at },
@@ -4147,7 +4184,7 @@ function FlowBody(props) {
 							className: `fw-marker-label${markerLabels.get(marker) === "left" ? " fw-marker-label-left" : ""}`,
 							children: marker.label
 						})
-					}, `${marker.at}-${marker.label}`))]
+					}, `${marker.at}-${marker.label}`))
 				}) : null,
 				showCursor && props.cursorLine !== false && /* @__PURE__ */ jsx("div", {
 					className: "fw-cursor-layer",
@@ -4443,6 +4480,7 @@ function useHostable(value, onChange, initial) {
 		report.current?.(resolved);
 	}, [controlled])];
 }
+const CARD_WIDTH = 320;
 /** 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);
@@ -4620,7 +4658,8 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		const pipelines = rows.filter((row) => row.kind === "pipeline");
 		return pipelines.length ? pipelines : rows.filter((row) => !row.parentId);
 	}, [rows]);
-	const sharedDetail = agents.length > 1 && agents.every((row) => row.span.detail && row.span.detail === agents[0]?.span.detail) ? agents[0]?.span.detail : void 0;
+	const details = new Set(agents.flatMap((row) => row.span.detail ? [row.span.detail] : []));
+	const sharedDetail = agents.length > 1 && details.size === 1 ? [...details][0] : void 0;
 	const [flippedFamilies, setFlippedFamilies] = useState(/* @__PURE__ */ new Set());
 	const openFamilies = useMemo(() => defaultOpenFamilies(agents, UNFOLD_ROWS, flippedFamilies), [agents, flippedFamilies]);
 	const [openSteps, setOpenSteps] = useState(/* @__PURE__ */ new Set());
@@ -4735,8 +4774,8 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	}, limit));
 	const latest = useRef({
 		toggle: (_row) => {},
-		pin: (_target, _element) => {},
-		inspect: (_target, _element) => {}
+		pin: (_target, _element, _x) => {},
+		inspect: (_target, _element, _x) => {}
 	});
 	const toggleNow = (row) => {
 		const flip = (open) => new Set(open.has(row.id) ? [...open].filter((id) => id !== row.id) : [...open, row.id]);
@@ -4760,25 +4799,43 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	};
 	latest.current.toggle = toggleNow;
 	const toggle = useCallback((row) => latest.current.toggle(row), []);
-	const place = (target, element, pinned) => {
+	const place = (target, element, pinned, x) => {
 		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));
+		const width = Math.min(CARD_WIDTH, host.width - 16);
+		const left = Math.max(8, Math.min((x ?? rect.left + 24) - host.left - 24, host.width - width - 8));
 		clearTimeout(hideTimer.current);
 		setCard({
 			target,
 			pinned,
 			left,
-			top: above ? rect.top - host.top - 8 : rect.bottom - host.top + 8,
-			above
+			anchorTop: rect.top - host.top,
+			anchorBottom: rect.bottom - host.top,
+			above: view === "agents"
 		});
 	};
-	latest.current.inspect = (target, element) => {
-		if (!card?.pinned) place(target, element, false);
+	useLayoutEffect(() => {
+		if (!card || card.fitted || !root.current) return;
+		const box = document.getElementById(cardId)?.getBoundingClientRect();
+		if (!box) return;
+		const hostTop = root.current.getBoundingClientRect().top;
+		const room = {
+			above: hostTop + card.anchorTop - 16,
+			below: globalThis.innerHeight - (hostTop + card.anchorBottom) - 16
+		};
+		const preferred = card.above ? room.above : room.below;
+		const other = card.above ? room.below : room.above;
+		setCard({
+			...card,
+			fitted: true,
+			above: box.height <= preferred || box.height > other && preferred >= other ? card.above : !card.above
+		});
+	}, [card, cardId]);
+	latest.current.inspect = (target, element, x) => {
+		if (!card?.pinned) place(target, element, false, x);
 	};
-	const inspect = useCallback((target, element) => latest.current.inspect(target, element), []);
+	const inspect = useCallback((target, element, x) => latest.current.inspect(target, element, x), []);
 	const leave = useCallback(() => {
 		clearTimeout(hideTimer.current);
 		hideTimer.current = setTimeout(() => setCard((previous) => previous?.pinned ? previous : null), 140);
@@ -4791,19 +4848,19 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		document.addEventListener("pointermove", move);
 		return () => document.removeEventListener("pointermove", move);
 	}, [card, leave]);
-	latest.current.pin = (target, element) => {
+	latest.current.pin = (target, element, x) => {
 		if (card?.pinned && card.target === target) {
 			closeCard();
 			return;
 		}
-		place(target, element, true);
+		place(target, element, true, x);
 		const row = byId.get(target);
 		if (row) {
 			onSelect?.(row.span);
 			zoomTo(row);
 		}
 	};
-	const pin = useCallback((target, element) => latest.current.pin(target, element), []);
+	const pin = useCallback((target, element, x) => latest.current.pin(target, element, x), []);
 	const selection = selectedId ?? (card?.pinned ? card.target : void 0);
 	const closeCard = () => {
 		const target = card?.target;
@@ -5056,7 +5113,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 					agent: cardAgent,
 					clockMs,
 					left: card.left,
-					top: card.top,
+					top: card.above ? card.anchorTop - 8 : card.anchorBottom + 8,
 					pinned: card.pinned,
 					onClose: closeCard,
 					renderIcon,