@tangle-network/charts 0.20.0 → 0.20.2

package/dist/{flow-trace-Sr8GtLm0.d.ts → flow-trace-DfSefpBM.d.ts}

@@ -382,6 +382,9 @@ interface FlowTrace {
   costUsd?: number;
   /** `list`: priced from a model catalog's list prices, not a bill; the summary says so. */
   costBasis?: 'billed' | 'list';
+  /** `costUsd` is a bound, not a count: `lower` prints "≥" (a floor, such as the larger of usage and meter per agent),
+   * `upper` prints "≤" (list price on inputs that include cached tokens priced as fresh). */
+  costBound?: 'lower' | 'upper';
   /** How many model calls `costUsd` covers; when `priced < total` the total is a lower bound and shown as one. */
   costCoverage?: {
     priced: number;
@@ -389,7 +392,8 @@ interface FlowTrace {
   };
   /** The real charge when the producer knows it (for example $0 on a subscription seat), shown beside a list price. */
   billedUsd?: number;
-  toolCalls: number;
+  /** Tool calls the producer counted; absent means unknown and is shown as a dash, never as zero. */
+  toolCalls?: number;
   /** Authoritative LLM request count when supplied; absent means unknown. */
   modelCalls?: number;
   errors?: number;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { A as BreakdownInput, B as Refusal, C as MarkKind, D as YScale, E as XCategory, F as Figure, H as Tier, I as Interval, L as IntervalMethod, M as CostBasis, N as Estimate, O as YTarget, P as Exclusion, R as MatrixCell, S as ChartMark, T as MarkerShape, U as TierCounts, V as Setup, W as isRefusal, _ as checkerColor, a as TimelineLane, b as BandKind, c as TimelineTick, d as ENDING_COLORS, f as ENDING_ORDER, g as TickOutcome, h as RunEnding, i as FlowTrace, j as ComparisonRow, k as YTick, l as timeline, m as OUTCOME_ORDER, n as FlowOutcome, o as TimelineOptions, p as OUTCOME_COLORS, r as FlowSpan, s as TimelineSpan, t as FlowMarker, u as CHECKER_HUES, v as PointFields, w as MarkVerdict, x as ChartBand, y as PointGlyph, z as RateRow } from "./flow-trace-Sr8GtLm0.js";
+import { A as BreakdownInput, B as Refusal, C as MarkKind, D as YScale, E as XCategory, F as Figure, H as Tier, I as Interval, L as IntervalMethod, M as CostBasis, N as Estimate, O as YTarget, P as Exclusion, R as MatrixCell, S as ChartMark, T as MarkerShape, U as TierCounts, V as Setup, W as isRefusal, _ as checkerColor, a as TimelineLane, b as BandKind, c as TimelineTick, d as ENDING_COLORS, f as ENDING_ORDER, g as TickOutcome, h as RunEnding, i as FlowTrace, j as ComparisonRow, k as YTick, l as timeline, m as OUTCOME_ORDER, n as FlowOutcome, o as TimelineOptions, p as OUTCOME_COLORS, r as FlowSpan, s as TimelineSpan, t as FlowMarker, u as CHECKER_HUES, v as PointFields, w as MarkVerdict, x as ChartBand, y as PointGlyph, z as RateRow } from "./flow-trace-DfSefpBM.js";
 //#region src/block.d.ts
 interface RenderFigureOptions {
   /** Chart uses a closed data disclosure; plot keeps only the SVG and accessible data. */

package/dist/index.js

@@ -3337,6 +3337,13 @@ function unitDotLayout(groups, width, height, o = {}) {
 }
 //#endregion
 //#region src/otlp-trace.ts
+/** Attributes that carry cached input apart from fresh input (OpenTelemetry GenAI and Anthropic-style names). */
+const CACHE_KEYS = [
+	"gen_ai.usage.cache_read_input_tokens",
+	"gen_ai.usage.cache_creation_input_tokens",
+	"gen_ai.usage.input_tokens.cached",
+	"tangle.llm.cache_read_tokens"
+];
 /** Price model calls from an OpenAI-compatible model catalog (`data[].pricing.prompt|completion`, USD per token), such as
 * the Router's `/v1/models`. Read the catalog at runtime; never copy its numbers. */
 function catalogPrice(catalog) {
@@ -3475,6 +3482,7 @@ function otlpFlowTrace(input, options = {}) {
 	let cost = 0;
 	let unpriced = 0;
 	let priced = 0;
+	let cacheSplit = false;
 	const offset = (iso) => time(iso) - origin;
 	const isSpawn = (span) => span.kind === "TOOL" && (attrs(span)["traces.agent.spawn"] === true || /spawn/i.test(str(attrs(span)["gen_ai.tool.name"]) ?? span.name));
 	const groupOfSpan = (span) => groupOf.get(rootOf(span).span_id);
@@ -3541,6 +3549,7 @@ function otlpFlowTrace(input, options = {}) {
 		if (listPrice !== void 0) {
 			cost += listPrice;
 			priced++;
+			if (CACHE_KEYS.some((key) => a[key] !== void 0)) cacheSplit = true;
 		} else if (kind === "model" && !aggregate && (prompt || completion)) unpriced++;
 		out.push({
 			id: span.span_id,
@@ -3574,7 +3583,8 @@ function otlpFlowTrace(input, options = {}) {
 			costCoverage: {
 				priced,
 				total: priced + unpriced
-			}
+			},
+			...cacheSplit ? {} : { costBound: "upper" }
 		} : {}
 	};
 }

package/dist/react/flow-waterfall.css

@@ -62,12 +62,12 @@
 .fw-root [data-tone="3"] { --tone: var(--fw-h3); }
 .fw-root [data-tone="4"] { --tone: var(--fw-h4); }
 .fw-root [data-tone="5"] { --tone: var(--fw-h5); }
-/* Light fills carry enough of the hue to tell agents apart on white (round 8: 24% read as "pale mint on gray"); the outline is
+/* Light fills carry enough of the hue to tell agents apart on white (24% and 42% both read as "pastel, washed out"); the outline is
    the full hue, which passes 3:1 against the surface, so every mark keeps its edge. */
 .fw-root [data-tone] {
-  --fill: light-dark(color-mix(in oklab, var(--tone) 42%, #fff), color-mix(in oklab, var(--tone) 86%, #000));
+  --fill: light-dark(var(--tone), color-mix(in oklab, var(--tone) 94%, #000));
   --line: light-dark(var(--tone), var(--tone));
-  --dim: light-dark(color-mix(in oklab, var(--tone) 22%, #fff), color-mix(in oklab, var(--tone) 40%, #17171d));
+  --dim: light-dark(color-mix(in oklab, var(--tone) 62%, #fff), color-mix(in oklab, var(--tone) 40%, #17171d));
   --dim-line: light-dark(color-mix(in oklab, var(--tone) 70%, #fff), color-mix(in oklab, var(--tone) 55%, #17171d));
 }
 
@@ -138,6 +138,8 @@
 /* The event track: one dot per marker on the axis; click or N/P moves the cursor there. */
 .fw-root .fw-event { --fw-marker: var(--fw-muted); position: absolute; bottom: 2px; width: 8px; height: 8px; margin-left: -4px; padding: 0; border: 0; border-radius: 50%; background: var(--fw-marker); box-shadow: 0 0 0 2px var(--fw-surface); cursor: pointer; z-index: 4; left: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px); }
 .fw-root .fw-event[data-tone="ok"] { --fw-marker: var(--fw-ok); }
+.fw-root .fw-event[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fw-surface), 0 0 0 4px var(--fw-marker); }
+.fw-root .fw-event-label { position: absolute; bottom: 14px; z-index: 5; transform: translateX(-50%); left: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px); padding: 0 8px; border-radius: 4px; background: var(--fw-surface); box-shadow: inset 0 0 0 1px var(--fw-border); color: var(--fw-text); font-size: 12px; line-height: 20px; white-space: nowrap; pointer-events: none; }
 .fw-root .fw-event[data-tone="failed"] { --fw-marker: var(--fw-failed); }
 .fw-root .fw-event:hover, .fw-root .fw-event:focus-visible { transform: scale(1.4); outline: 0; }
 .fw-root .fw-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in oklab, var(--fw-text) 70%, transparent); left: calc(var(--fw-pad) + (var(--fw-t) - var(--fw-v0)) * var(--fw-k) * 1px); }
@@ -231,6 +233,13 @@
 .fw-root [data-outcome="neutral"], .fw-root [data-outcome="neutral"] [data-tone] { --tone: var(--fw-muted); }
 .fw-root .fw-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--fw-muted); font-size: 12px; line-height: 16px; }
 .fw-root .fw-legend li { display: inline-flex; align-items: center; gap: 8px; }
+.fw-root .fw-kinds { margin: 0; padding: 4px 24px 8px; justify-content: flex-start; color: var(--fw-text); }
+.fw-root .fw-kinds .fw-swatch-model { width: 12px; height: 8px; border-radius: 2px; background: color-mix(in oklab, var(--fw-text) 40%, var(--fw-surface)); }
+.fw-root .fw-kinds .fw-swatch-tool { width: 12px; height: 8px; border-radius: 2px; background: color-mix(in oklab, var(--fw-text) 16%, var(--fw-surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-text) 30%, transparent); }
+.fw-root .fw-kinds .fw-swatch-wait { width: 12px; height: 8px; border-radius: 2px; background: repeating-linear-gradient(-45deg, var(--fw-hatch) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px var(--fw-hatch); }
+.fw-root .fw-kinds .fw-swatch-handoff { width: 10px; height: 8px; border-left: 1.5px solid var(--fw-muted); border-bottom: 1.5px solid var(--fw-muted); border-bottom-left-radius: 3px; }
+.fw-root .fw-kinds .fw-swatch-failed { width: 12px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--fw-failed); }
+.fw-root .fw-description { margin: 0; color: var(--fw-muted); font-size: 14px; line-height: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .fw-root .fw-legend .fw-swatch { width: 12px; height: 8px; border-radius: 2px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
 .fw-root .fw-legend b { color: var(--fw-text); font-weight: 600; font-variant-numeric: tabular-nums; }
 .fw-root .fw-legend .fw-swatch-step { display: inline-grid; place-items: center; width: 12px; height: 12px; border-radius: 3px; background: var(--fw-well); color: var(--fw-failed); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-failed) 50%, transparent); }
@@ -241,11 +250,13 @@
 .fw-root .fw-seg-model { background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
 .fw-root .fw-seg-tool { background: var(--dim); box-shadow: inset 0 0 0 1px var(--dim-line); }
 .fw-root .fw-seg-failed { background: color-mix(in oklab, var(--fw-failed) 18%, var(--fw-surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-failed) 70%, transparent); color: var(--fw-failed); }
-.fw-root .fw-view-agents .fw-seg-failed { background: var(--dim); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-failed) 60%, var(--dim-line)); }
+/* In the agent view a failed turn draws like any turn; the agent's own failure shows once, by its name and its end label. */
+.fw-root .fw-view-agents .fw-seg-failed { background: var(--dim); box-shadow: inset 0 0 0 1px var(--dim-line); }
+.fw-root .fw-view-agents .fw-alert { color: var(--fw-muted); }
 .fw-root .fw-glyph { display: inline-flex; color: currentColor; }
 .fw-root .fw-glyph svg { width: 11px; height: 11px; stroke-width: 2; }
 .fw-root .fw-seg-model .fw-glyph, .fw-root .fw-k-model .fw-glyph { color: light-dark(var(--tone), #fff); }
-.fw-root .fw-end { display: inline-flex; align-items: center; gap: 8px; top: calc(50% + var(--fw-bar-shift) - var(--fw-bar-h) / 2); height: var(--fw-bar-h); left: calc(var(--x0) + max(var(--w), 3px) + 8px); white-space: nowrap; pointer-events: none; }
+.fw-root .fw-end { z-index: 2; display: inline-flex; align-items: center; gap: 8px; top: calc(50% + var(--fw-bar-shift) - var(--fw-bar-h) / 2); height: var(--fw-bar-h); left: calc(var(--x0) + max(var(--w), 3px) + 8px); white-space: nowrap; pointer-events: none; }
 .fw-root .fw-duration { font-size: 12px; color: var(--fw-muted); font-variant-numeric: tabular-nums; }
 .fw-root .fw-k-failed ~ .fw-end .fw-duration { color: var(--fw-failed); }
 .fw-root .fw-badge { height: 18px; padding: 0 8px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--fw-amber); background: color-mix(in oklab, var(--fw-amber) 13%, transparent); border: 1px solid color-mix(in oklab, var(--fw-amber) 28%, transparent); }
@@ -258,17 +269,25 @@
   opacity: clamp(0, (var(--fw-t) - var(--s)) * 1000, 1);
 }
 .fw-root .fw-view-spans .fw-link { opacity: calc(clamp(0, (var(--fw-t) - var(--s)) * 1000, 1) * .7); }
-/* Agent-view connectors stay quiet at 30% until their agent is hovered, pinned or focused. */
-.fw-root .fw-view-agents .fw-link:not(.fw-link-hot) { opacity: calc(clamp(0, (var(--fw-t) - var(--s)) * 1000, 1) * .3); }
+/* Agent-view connectors rest faint, one curved elbow per spawn in the agent's hue (they show who started whom), and come to
+   full strength for the agent under the pointer, pinned or focused. */
+.fw-root .fw-view-agents .fw-link:not(.fw-link-hot) { opacity: calc(clamp(0, (var(--fw-t) - var(--s)) * 1000, 1) * .6); }
 .fw-root .fw-link { transition: opacity 160ms var(--fw-ease); }
-.fw-root .fw-link-down { left: calc(var(--x) - 8px); border-left-width: 1.5px; border-bottom-left-radius: 6px; }
-.fw-root .fw-link-up { left: var(--x); border-right-width: 1.5px; border-bottom-right-radius: 6px; }
+.fw-root .fw-link-down { left: calc(var(--x) - 8px); border-left-width: 1.5px; border-bottom-left-radius: 12px; }
+.fw-root .fw-link-up { left: var(--x); border-right-width: 1.5px; border-bottom-right-radius: 12px; }
 .fw-root .fw-link::before { content: ""; position: absolute; top: -3.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--line); box-shadow: 0 0 0 1.5px var(--fw-surface); }
 .fw-root .fw-link-down::before { left: -3.25px; }
 .fw-root .fw-link-up::before { right: -3.25px; }
 
 /* Span card */
 .fw-root .fw-card-anchor { display: contents; }
+/* Agent view: the card docks under the lanes instead of floating over the plot (judges: "covers the data it describes"). */
+/* Two classes on the root so these win over the base .fw-root .fw-card rule that follows. */
+.fw-root.fw-root-agents .fw-card-anchor { display: block; padding: 0 24px 12px; }
+.fw-root.fw-root-agents .fw-card, .fw-root.fw-root-agents .fw-card-above .fw-card { position: relative; left: auto !important; top: auto !important; transform: none; animation-name: fw-arrive; width: auto; max-width: 560px; }
+.fw-root .fw-seg-alt { filter: brightness(.78); }
+/* Agent view: the scrubber track shows how far the run has played, so at rest it reads full, not empty. */
+.fw-root-agents .fw-slider { background: linear-gradient(90deg, color-mix(in oklab, var(--fw-accent) 45%, transparent) var(--fw-progress), var(--fw-well) var(--fw-progress)) 0 50% / 100% 4px no-repeat; }
 .fw-root .fw-card { position: absolute; z-index: 20; width: 320px; padding: 12px; border-radius: 12px; background: var(--fw-raised); border: 1px solid var(--fw-border);
   box-shadow: 0 12px 32px -8px rgb(0 0 0 / .28), 0 2px 6px rgb(0 0 0 / .08); animation: fw-arrive 140ms var(--fw-ease); }
 /* A hover card never covers the next mark: only a pinned card (a dialog) takes the pointer. */

package/dist/react/index.d.ts

@@ -1,4 +1,4 @@
-import { B as Refusal, C as MarkKind, D as YScale, E as XCategory, F as Figure, O as YTarget, S as ChartMark, T as MarkerShape, a as TimelineLane, b as BandKind, c as TimelineTick, g as TickOutcome, i as FlowTrace, k as YTick, o as TimelineOptions, r as FlowSpan, s as TimelineSpan, t as FlowMarker, v as PointFields, w as MarkVerdict, x as ChartBand, y as PointGlyph } from "../flow-trace-Sr8GtLm0.js";
+import { B as Refusal, C as MarkKind, D as YScale, E as XCategory, F as Figure, O as YTarget, S as ChartMark, T as MarkerShape, a as TimelineLane, b as BandKind, c as TimelineTick, g as TickOutcome, i as FlowTrace, k as YTick, o as TimelineOptions, r as FlowSpan, s as TimelineSpan, t as FlowMarker, v as PointFields, w as MarkVerdict, x as ChartBand, y as PointGlyph } from "../flow-trace-DfSefpBM.js";
 import { CSSProperties, ReactElement, ReactNode } from "react";
 //#region src/react/sparkline.d.ts
 type SparklineDirection = "rising" | "falling" | "flat";
@@ -175,6 +175,7 @@ export declare function HBars({ rows, format, color, max, limit }: {
     note?: string;
     color?: string;
     href?: string;
+    title?: string;
   }[];
   format?: (v: number) => string;
   color?: string;
@@ -376,14 +377,18 @@ interface FlowWaterfallProps {
   /** What a bar's color means: the agent (default), whose hue its steps and handoffs share, with the outcome on the row dot, legend and
    * crash glyph; or its `outcome`. */
   agentFill?: 'outcome' | 'agent';
+  /** One line beside the title saying what the run was for, such as its goal. */
+  description?: string;
   /** The row the host has selected, such as the agent whose transcript is open: it lifts and, in the agent view, its peers dim.
    * A pinned card alone only highlights its row, so the rest of the run stays readable around it. */
   selectedId?: string;
   /** Escape clears the host's selection, after closing any open card. */
   onDeselect?: () => void;
+  /** Show the stat strip (default); a page with its own stat row passes false. */
+  summary?: boolean;
 }
 /** Shared trace inspector: the agent timeline and the span waterfall over one clock.
  * Data remains producer-owned; playback, zoom and folding change presentation only. */
-export declare function FlowWaterfall({ trace, live, startedAt, label, defaultCollapsed, defaultView, renderIcon, maxHeight, onSelect, markers, onTimeChange, agentFill, selectedId, onDeselect }: FlowWaterfallProps): import("react").JSX.Element;
+export declare function FlowWaterfall({ trace, live, startedAt, label, defaultCollapsed, defaultView, renderIcon, maxHeight, onSelect, markers, onTimeChange, agentFill, selectedId, onDeselect, description, summary: showSummary }: FlowWaterfallProps): import("react").JSX.Element;
 //#endregion
 export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, FlowWaterfallProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };

package/dist/react/index.js

@@ -1001,10 +1001,10 @@ function HBars({ rows, format = formatCompact, color = LIVE_SERIES[0], max, limi
 	return /* @__PURE__ */ jsxs("ol", {
 		className: "ov-hbars",
 		children: [rows.slice(0, limit).map((row) => {
+			const title = row.title ?? `${row.label}: ${format(row.value)}`;
 			const content = /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx("span", {
 					className: "ov-hbar-label",
-					title: row.label,
 					children: row.label
 				}),
 				/* @__PURE__ */ jsx("span", {
@@ -1025,8 +1025,12 @@ function HBars({ rows, format = formatCompact, color = LIVE_SERIES[0], max, limi
 			] });
 			return /* @__PURE__ */ jsx("li", { children: row.href ? /* @__PURE__ */ jsx("a", {
 				href: row.href,
+				title,
 				children: content
-			}) : /* @__PURE__ */ jsx("div", { children: content }) }, row.label);
+			}) : /* @__PURE__ */ jsx("div", {
+				title,
+				children: content
+			}) }, row.label);
 		}), rest.length > 0 && /* @__PURE__ */ jsxs("li", {
 			className: "ov-hbars-more",
 			children: [
@@ -2437,7 +2441,17 @@ 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));
+			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 (row.hasChildren && costKnown) row.rollupCostUsd = cost;
 		if (row.hasChildren) {
@@ -2556,7 +2570,7 @@ function totalsAt(trace, clockMs) {
 		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,
+		toolCalls: trace.toolCalls === void 0 ? void 0 : tools,
 		errors
 	};
 }
@@ -2575,16 +2589,197 @@ function costSummary(costUsd, trace) {
 	};
 	const coverage = trace.costCoverage;
 	const partial = coverage !== void 0 && coverage.priced < coverage.total;
+	const upper = !partial && trace.costBound === "upper";
 	return {
-		value: `${partial ? "≥" : list ? "≈" : ""}${formatCost(costUsd)}${trace.billedUsd !== void 0 ? ` · ${formatCost(trace.billedUsd)} billed` : ""}`,
+		value: `${partial || trace.costBound === "lower" ? "≥" : upper ? "≤" : 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" : "",
+			upper ? "cached input is not split out, so it is priced as fresh input: at most this" : "",
+			trace.costBound === "lower" ? "a floor: the producer reports at least this" : "",
 			trace.billedUsd !== void 0 ? `billed ${formatCost(trace.billedUsd)} (the seat charge)` : ""
 		].filter(Boolean).join("; "),
 		label
 	};
 }
+/** The role an agent plays: its name without a trailing counter ("memscale-engineer-3", "Subagent 2"). */
+const roleOf = (name) => name.replace(/[-\s]\d+$/, "");
+/**
+* Agents sharing a role fold into one family row until opened: a 17-agent run reads as its few roles, and the bar of a
+* family carries every member's work in each member's hue. Members follow their opened family, marked with `family`.
+*/
+function agentFamilies(agents, open) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const row of agents) {
+		const key = row.parentId === void 0 ? `root:${row.id}` : roleOf(row.name);
+		groups.set(key, [...groups.get(key) ?? [], row]);
+	}
+	const out = [];
+	let next = 0;
+	const hue = (row) => row.tone <= 0 ? row.tone : ++next;
+	for (const [role, members] of groups) {
+		if (members.length < 2) {
+			out.push(...members.map((row) => ({
+				...row,
+				tone: hue(row)
+			})));
+			continue;
+		}
+		const tone = hue(members[0]);
+		const id = `family:${role}`;
+		const startMs = Math.min(...members.map((row) => row.span.startMs));
+		const endMs = Math.max(...members.map((row) => row.span.endMs));
+		const running = members.some((row) => spanRunning(row.span));
+		const known = members.map((row) => row.span.costUsd ?? row.rollupCostUsd).filter((cost) => cost !== void 0);
+		const failed = members.filter((row) => !row.ok).length;
+		out.push({
+			id,
+			parentId: members[0].parentId,
+			name: `${role} ×${members.length}`,
+			kind: "pipeline",
+			durationLabel: formatSpanDuration(endMs - startMs),
+			approx: members.some((row) => row.approx),
+			ok: failed === 0,
+			depth: 0,
+			hasChildren: true,
+			tone,
+			descendants: members.length,
+			segments: [],
+			retry: false,
+			hasAgents: false,
+			own: members.flatMap((row, i) => row.own.map((mark) => ({
+				...mark,
+				tone,
+				alt: i % 2 === 1
+			}))).sort((a, b) => a.startMs - b.startMs),
+			...known.length ? { rollupCostUsd: known.reduce((sum, cost) => sum + cost, 0) } : {},
+			span: {
+				id,
+				kind: "pipeline",
+				name: role,
+				startMs,
+				endMs,
+				status: running ? "running" : failed ? "failed" : "done",
+				detail: members[0].span.detail,
+				meta: {
+					failedAgents: failed,
+					costPartial: known.length < members.length
+				}
+			}
+		});
+		if (open.has(id)) out.push(...members.map((row, i) => ({
+			...row,
+			family: id,
+			inset: 1,
+			tone,
+			own: row.own.map((mark) => ({
+				...mark,
+				tone,
+				alt: i % 2 === 1
+			}))
+		})));
+	}
+	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"). */
+function agentSummary(row) {
+	if (row.id.startsWith("family:")) {
+		const failed = Number(row.span.meta?.failedAgents ?? 0);
+		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";
+	}
+	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 ? "done" : "failed");
+	const unit = row.kind === "pipeline" ? ["turn", "turns"] : ["model call", "model calls"];
+	return [
+		state,
+		turns ? `${turns} ${turns === 1 ? unit[0] : unit[1]}` : "",
+		tools ? `${tools} tool ${tools === 1 ? "call" : "calls"}` : ""
+	].filter(Boolean).join(" · ");
+}
+/**
+* The agent view's rows: families folded until opened, and an opened agent's own steps (its turns and tool calls, not its
+* child agents) nested beneath it with their icons, durations and costs, as a reader drills from the run into one agent.
+*/
+function agentViewRows(agents, rows, openFamilies, openSteps) {
+	const base = agentFamilies(agents, openFamilies);
+	if (openSteps.size === 0) return base;
+	const steps = /* @__PURE__ */ new Map();
+	for (const row of rows) {
+		if (row.parentId === void 0 || !openSteps.has(row.parentId) || row.kind === "pipeline") continue;
+		steps.set(row.parentId, [...steps.get(row.parentId) ?? [], row]);
+	}
+	return base.flatMap((row) => openSteps.has(row.id) ? [row, ...stepRuns(steps.get(row.id) ?? []).map((step) => ({
+		...step,
+		stepOf: row.id,
+		inset: (row.inset ?? 0) + 1,
+		tone: row.tone,
+		own: step.own.map((mark) => ({
+			...mark,
+			tone: row.tone
+		}))
+	}))] : [row]);
+}
+/** Three or more consecutive steps of one kind and name read as one row ("15 model calls · 4h"), each a mark in its bar. */
+function stepRuns(steps) {
+	const out = [];
+	for (let i = 0; i < steps.length;) {
+		let j = i;
+		while (j < steps.length && steps[j].kind === steps[i].kind && steps[j].name === steps[i].name) j++;
+		const run = steps.slice(i, j);
+		if (run.length < 3) {
+			out.push(...run);
+			i = j;
+			continue;
+		}
+		const first = run[0];
+		const startMs = Math.min(...run.map((step) => step.span.startMs));
+		const endMs = Math.max(...run.map((step) => step.span.endMs));
+		const failed = run.filter((step) => !step.ok).length;
+		const costs = run.map((step) => step.span.costUsd ?? step.rollupCostUsd).filter((cost) => cost !== void 0);
+		const noun = first.kind === "model" ? "model calls" : first.kind === "tool" ? `${first.name} calls` : `${first.name} steps`;
+		out.push({
+			...first,
+			id: `run:${first.id}`,
+			name: `${run.length} ${noun}`,
+			durationLabel: formatSpanDuration(endMs - startMs),
+			ok: failed === 0,
+			hasChildren: false,
+			descendants: 0,
+			segments: [],
+			own: run.map((step) => ({
+				startMs: step.span.startMs,
+				endMs: step.span.endMs,
+				kind: step.ok ? step.kind === "model" ? "model" : "tool" : "failed",
+				tone: first.tone,
+				id: step.id,
+				count: 1,
+				retry: step.retry
+			})),
+			...costs.length ? { rollupCostUsd: costs.reduce((sum, cost) => sum + cost, 0) } : {},
+			span: {
+				...first.span,
+				id: `run:${first.id}`,
+				name: `${run.length} ${noun}`,
+				startMs,
+				endMs,
+				status: failed ? "failed" : first.span.status,
+				costUsd: void 0
+			}
+		});
+		i = j;
+	}
+	return out;
+}
 //#endregion
 //#region src/react/flow-waterfall-icons.tsx
 const svg = (children, label) => /* @__PURE__ */ jsx("svg", {
@@ -2602,7 +2797,52 @@ const svg = (children, label) => /* @__PURE__ */ jsx("svg", {
 	children
 });
 /** Kind glyphs drawn when the host supplies no `renderIcon`. Brand marks belong to the host. */
-function KindGlyph({ kind }) {
+/** Generic tool identity by name: a terminal, a file, a pencil, a lens, a globe or a branch, never a vendor mark. */
+function toolGlyph(name) {
+	const n = (name ?? "").toLowerCase();
+	if (/bash|shell|exec|terminal|command|run/.test(n)) return svg(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+		x: "2",
+		y: "3",
+		width: "12",
+		height: "10",
+		rx: "2"
+	}), /* @__PURE__ */ jsx("path", { d: "m5 7 2 1.5L5 10M8.5 10.5h2.5" })] }));
+	if (/edit|write|patch|apply/.test(n)) return svg(/* @__PURE__ */ jsx("path", { d: "M3 13l1-3.5L10.5 3a1.4 1.4 0 0 1 2 2L6 11.5 3 13ZM9.5 4l2 2" }));
+	if (/grep|search|find|query/.test(n)) return 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" })] }));
+	if (/read|glob|list|ls|cat|file|view/.test(n)) return svg(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M4 2.5h5l3 3v8H4z" }), /* @__PURE__ */ jsx("path", { d: "M9 2.5v3h3M6 9h4M6 11h3" })] }));
+	if (/web|fetch|http|browser|url/.test(n)) return svg(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+		cx: "8",
+		cy: "8",
+		r: "5.5"
+	}), /* @__PURE__ */ jsx("path", { d: "M2.5 8h11M8 2.5c2 2 2 9 0 11M8 2.5c-2 2-2 9 0 11" })] }));
+	if (/git|commit|branch|merge/.test(n)) return svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: "5",
+			cy: "4",
+			r: "1.5"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "5",
+			cy: "12",
+			r: "1.5"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "11",
+			cy: "6",
+			r: "1.5"
+		}),
+		/* @__PURE__ */ jsx("path", { d: "M5 5.5v5M11 7.5c0 2-3 2-6 3" })
+	] }));
+}
+function KindGlyph({ kind, name }) {
+	if (kind === "tool") {
+		const glyph = toolGlyph(name);
+		if (glyph) return glyph;
+	}
 	switch (kind) {
 		case "pipeline": return svg(/* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx("circle", {
@@ -2684,6 +2924,8 @@ const ZoomOutGlyph = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [/* @_
 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" }));
 //#endregion
 //#region src/react/flow-waterfall-card.tsx
+/** Names wrap between words, never at their hyphens ("memscale-engineer-" / "2" read as two names). */
+const keepWords = (name) => name.replace(/-/g, "‑");
 const KIND_LABEL = {
 	pipeline: "Agent",
 	model: "LLM call",
@@ -2724,7 +2966,7 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 		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 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 sentence = !owner && span.output && span.output !== who.name ? span.output : void 0;
 		return /* @__PURE__ */ jsxs("div", {
 			id,
@@ -2753,7 +2995,7 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 						}),
 						/* @__PURE__ */ jsx("span", {
 							className: "fw-card-who",
-							children: who.name
+							children: keepWords(who.name)
 						}),
 						outcome ? /* @__PURE__ */ jsx("span", {
 							className: "fw-pill fw-pill-outcome",
@@ -2834,13 +3076,16 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 					/* @__PURE__ */ jsx("span", {
 						className: "fw-icon-tile",
 						"aria-hidden": true,
-						children: renderIcon?.(span) ?? /* @__PURE__ */ jsx(KindGlyph, { kind: span.kind })
+						children: renderIcon?.(span) ?? /* @__PURE__ */ jsx(KindGlyph, {
+							kind: span.kind,
+							name: span.name
+						})
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "fw-card-title",
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "fw-card-name",
-							children: span.name
+							children: keepWords(span.name)
 						}), span.detail && /* @__PURE__ */ jsx("div", {
 							className: "fw-muted",
 							children: span.detail
@@ -2897,10 +3142,10 @@ 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;
+function Segment({ mark, events, agentView, ending }) {
+	const glyph = mark.kind === "failed" ? agentView && !ending ? null : /* @__PURE__ */ jsx(FailGlyph, {}) : mark.retry ? /* @__PURE__ */ jsx(RetryGlyph, {}) : null;
 	return /* @__PURE__ */ jsx("span", {
-		className: `fw-seg fw-seg-${mark.kind}`,
+		className: `fw-seg fw-seg-${mark.kind}${mark.alt ? " fw-seg-alt" : ""}`,
 		"data-tone": toneKey(mark.tone),
 		style: at(mark.startMs, mark.endMs),
 		onPointerEnter: agentView ? (event) => events.onInspect(mark.id, event.currentTarget) : void 0,
@@ -2923,7 +3168,7 @@ function endLabel(row, clockMs) {
 	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)}`;
+	return cost === void 0 ? duration : `${duration} · ${span.meta?.costPartial ? "≥" : ""}${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) {
@@ -2935,9 +3180,13 @@ const FlowRow = memo(function FlowRow(props) {
 	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 marks = isAgent || row.hasChildren || row.id.startsWith("run:") ? folded && !agentView ? row.segments : row.own : [];
 	const label = endLabel(row, clockMs);
 	const inspect = (event) => props.onInspect(row.id, event.currentTarget);
+	const family = agentView && row.id.startsWith("family:");
+	const step = agentView && row.stepOf !== void 0;
+	const opens = family || agentView && isAgent && row.own.length > 0;
+	const ending = agentView && !row.ok ? marks.map((mark) => mark.kind).lastIndexOf("failed") : -1;
 	return /* @__PURE__ */ jsxs("div", {
 		role: "row",
 		"data-span-id": row.id,
@@ -2950,7 +3199,7 @@ const FlowRow = memo(function FlowRow(props) {
 		tabIndex: focusable ? 0 : -1,
 		"data-tone": toneKey(row.tone),
 		"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" : ""}`,
+		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`
@@ -2960,14 +3209,30 @@ const FlowRow = memo(function FlowRow(props) {
 		},
 		onClick: (event) => {
 			props.onActivate(row);
+			if (family) {
+				props.onToggle(row);
+				return;
+			}
 			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",
-			style: { "--depth": agentView ? 0 : row.depth },
+			style: { "--depth": agentView ? row.inset ?? 0 : row.depth },
 			children: [
+				opens && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: -1,
+					className: `fw-toggle${props.expanded ? " fw-open" : ""}`,
+					"aria-label": `${props.expanded ? "Collapse" : "Expand"} ${row.name}`,
+					"aria-expanded": Boolean(props.expanded),
+					onClick: (event) => {
+						event.stopPropagation();
+						props.onToggle(row);
+					},
+					children: /* @__PURE__ */ jsx(ChevronGlyph, {})
+				}),
 				!agentView && /* @__PURE__ */ jsx("span", {
 					className: "fw-guides",
 					"aria-hidden": true
@@ -2988,10 +3253,13 @@ const FlowRow = memo(function FlowRow(props) {
 					className: "fw-toggle-space",
 					"aria-hidden": true
 				})),
-				!agentView && /* @__PURE__ */ jsx("span", {
+				(!agentView || step) && /* @__PURE__ */ jsx("span", {
 					className: "fw-icon-tile",
 					"aria-hidden": true,
-					children: renderIcon?.(span) ?? /* @__PURE__ */ jsx(KindGlyph, { kind: span.kind })
+					children: renderIcon?.(span) ?? /* @__PURE__ */ jsx(KindGlyph, {
+						kind: span.kind,
+						name: span.name
+					})
 				}),
 				/* @__PURE__ */ jsxs("span", {
 					className: "fw-names",
@@ -3006,7 +3274,7 @@ const FlowRow = memo(function FlowRow(props) {
 									"data-outcome": span.outcome.tone,
 									title: span.outcome.label,
 									"aria-hidden": true
-								}) : agentView && /* @__PURE__ */ jsx("span", {
+								}) : agentView && !step && /* @__PURE__ */ jsx("span", {
 									className: "fw-agent-dot",
 									"aria-hidden": true
 								}),
@@ -3021,9 +3289,9 @@ const FlowRow = memo(function FlowRow(props) {
 								})
 							]
 						}),
-						agentView && span.detail && /* @__PURE__ */ jsx("span", {
+						agentView && /* @__PURE__ */ jsx("span", {
 							className: "fw-subtitle",
-							children: span.detail
+							children: span.detail && span.detail !== props.sharedDetail ? `${span.detail} · ${agentSummary(row)}` : agentSummary(row)
 						}),
 						agentView && renderIcon && /* @__PURE__ */ jsx("span", {
 							className: "fw-detail-icon",
@@ -3067,7 +3335,8 @@ const FlowRow = memo(function FlowRow(props) {
 					onPointerLeave: props.onLeave,
 					onClick: (event) => {
 						event.stopPropagation();
-						props.onPin(row.id, event.currentTarget);
+						if (family) props.onToggle(row);
+						else props.onPin(row.id, event.currentTarget);
 					},
 					children: [!isAgent && !row.ok && /* @__PURE__ */ jsx("span", {
 						className: "fw-glyph",
@@ -3080,7 +3349,8 @@ const FlowRow = memo(function FlowRow(props) {
 				marks.map((mark, i) => /* @__PURE__ */ jsx(Segment, {
 					mark,
 					events: props,
-					agentView
+					agentView,
+					ending: i === ending
 				}, `${mark.id}-${i}`)),
 				/* @__PURE__ */ jsxs("span", {
 					className: "fw-end",
@@ -3103,7 +3373,7 @@ const FlowRow = memo(function FlowRow(props) {
 			] })
 		})]
 	});
-}, (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)));
+}, (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.sharedDetail === b.sharedDetail && a.expanded === b.expanded && (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, hot }) {
 	const upper = Math.min(link.from, link.to), lower = Math.max(link.from, link.to);
@@ -3307,7 +3577,7 @@ function FlowBody(props) {
 	const [viewport, setViewport] = useState(maxHeight);
 	const latest = useRef(props);
 	latest.current = props;
-	const height = Math.min(maxHeight, Math.max(rows.length, 1) * rowHeight);
+	const height = props.fixedHeight ? maxHeight : Math.min(maxHeight, Math.max(rows.length, 1) * rowHeight);
 	const links = useMemo(() => linksFor(rows, props.byId, view), [
 		rows,
 		props.byId,
@@ -3315,6 +3585,7 @@ function FlowBody(props) {
 	]);
 	const index = useMemo(() => new Map(rows.map((row, i) => [row.id, i])), [rows]);
 	const motion = useRowMotion(rows);
+	const [jumped, setJumped] = useState();
 	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)));
@@ -3496,9 +3767,19 @@ function FlowBody(props) {
 					style: { "--s": marker.at },
 					title: marker.kind ? `${marker.kind}: ${marker.label}` : marker.label,
 					"aria-label": `Jump to ${marker.kind ? `${marker.kind} ` : ""}${marker.label}`,
+					"aria-pressed": jumped === marker,
 					onPointerDown: (event) => event.stopPropagation(),
-					onClick: () => props.onScrub(marker.at)
+					onClick: () => {
+						setJumped(marker);
+						props.onScrub(marker.at);
+					}
 				}, `e-${marker.at}-${marker.label}`)),
+				jumped && /* @__PURE__ */ jsx("span", {
+					className: "fw-event-label",
+					"data-tone": jumped.tone ?? "neutral",
+					style: { "--s": jumped.at },
+					children: jumped.label
+				}),
 				showCursor && /* @__PURE__ */ jsx("span", {
 					className: "fw-cursor-handle",
 					"aria-hidden": true
@@ -3522,6 +3803,8 @@ function FlowBody(props) {
 		clockMs,
 		renderIcon: props.renderIcon,
 		fillByAgent: props.fillByAgent,
+		sharedDetail: props.sharedDetail,
+		expanded: props.expandedIds?.has(item.id),
 		onToggle: props.onToggle,
 		onInspect: props.onInspect,
 		onLeave: props.onLeave,
@@ -3609,7 +3892,7 @@ function FlowBody(props) {
 						})
 					}, `${marker.at}-${marker.label}`))]
 				}) : null,
-				showCursor && /* @__PURE__ */ jsx("div", {
+				showCursor && props.cursorLine !== false && /* @__PURE__ */ jsx("div", {
 					className: "fw-cursor-layer",
 					"aria-hidden": true,
 					children: /* @__PURE__ */ jsx("span", { className: "fw-cursor" })
@@ -3897,11 +4180,11 @@ function summaryCells(trace, at, durationMs) {
 		errors,
 		summary: [
 			["Duration", formatSpanDuration(durationMs)],
-			[
+			...cost.value === "—" ? [] : [[
 				cost.label,
 				cost.value,
 				cost.title
-			],
+			]],
 			[
 				"Tokens",
 				formatCount(tokens),
@@ -3912,7 +4195,11 @@ function summaryCells(trace, at, durationMs) {
 				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()],
+			[
+				"Tool calls",
+				(at ? at.toolCalls : trace.toolCalls)?.toLocaleString() ?? "—",
+				(at ? at.toolCalls : trace.toolCalls) === void 0 ? "The producer did not count tool calls" : void 0
+			],
 			["Errors", errors.toLocaleString()]
 		]
 	};
@@ -3924,6 +4211,25 @@ const TONE_ORDER = [
 	"failed",
 	"neutral"
 ];
+/** What each mark means, as the agent view draws it; a key only for kinds the run has. */
+function KindLegend({ rows }) {
+	const has = (kind) => rows.some((row) => row.own.some((mark) => mark.kind === kind) || row.span.kind === kind);
+	const shown = [
+		["model", "Model call"],
+		["tool", "Tool call"],
+		["waiting", "Waiting"],
+		["handoff", "Handoff"]
+	].filter(([kind]) => kind === "waiting" ? rows.some((row) => row.kind === "pipeline") : kind === "handoff" ? rows.some((row) => row.span.handoffTo || row.hasAgents) : has(kind));
+	if (shown.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		className: "fw-legend fw-kinds",
+		"aria-label": "Key",
+		children: shown.map(([kind, name]) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", {
+			className: `fw-swatch-${kind === "waiting" ? "wait" : kind}`,
+			"aria-hidden": true
+		}), name] }, kind))
+	});
+}
 function OutcomeLegend({ agents }) {
 	const items = /* @__PURE__ */ new Map();
 	for (const row of agents) {
@@ -3964,7 +4270,7 @@ function OutcomeLegend({ agents }) {
 }
 /** 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, onTimeChange, agentFill = "agent", selectedId, onDeselect }) {
+function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defaultCollapsed = false, defaultView = "spans", renderIcon, maxHeight, onSelect, markers, onTimeChange, agentFill = "agent", selectedId, onDeselect, description, summary: showSummary = true }) {
 	const root = useRef(null);
 	const search = useRef(null);
 	const slider = useRef(null);
@@ -4037,17 +4343,22 @@ 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 visible = useMemo(() => view === "agents" ? agents : visibleFlowWaterfallRows(rows, query, collapsed), [
+	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 [openFamilies, setOpenFamilies] = useState(/* @__PURE__ */ new Set());
+	const [openSteps, setOpenSteps] = useState(/* @__PURE__ */ new Set());
+	const visible = useMemo(() => view === "agents" ? agentViewRows(agents, rows, openFamilies, openSteps) : visibleFlowWaterfallRows(rows, query, collapsed), [
 		view,
 		agents,
 		rows,
+		openFamilies,
+		openSteps,
 		query,
 		collapsed
 	]);
 	const slowest = view === "spans" ? slowestRow(rows, clockMs) : void 0;
-	const callouts = useMemo(() => view === "agents" ? agentCallouts(agents, clockMs) : {}, [
+	const callouts = useMemo(() => view === "agents" ? agentCallouts(visible, clockMs) : {}, [
 		view,
-		agents,
+		visible,
 		clockMs
 	]);
 	const rowsHeight = maxHeight ?? (view === "agents" ? ROW_HEIGHT.agents * 20 : 640);
@@ -4149,12 +4460,14 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		inspect: (_target, _element) => {}
 	});
 	const toggleNow = (row) => {
+		const flip = (open) => new Set(open.has(row.id) ? [...open].filter((id) => id !== row.id) : [...open, row.id]);
+		if (row.id.startsWith("family:")) {
+			setOpenFamilies(flip);
+			return;
+		}
 		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");
+			setOpenSteps(flip);
 			setActiveId(row.id);
 			return;
 		}
@@ -4237,11 +4550,13 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	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 shown = (row) => row && (visible.find((item) => item.id === row.id) ?? row);
+	const cardRow = shown(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;
+		for (let cursor = cardRow; cursor; cursor = cursor.parentId ? byId.get(cursor.parentId) : void 0) if (cursor.kind === "pipeline") return shown(cursor);
 	})();
-	const showCursor = isLive || position !== null || playing;
+	const moving = isLive || position !== null || playing;
+	const showCursor = moving || view === "agents";
 	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,
@@ -4305,6 +4620,11 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 									className: "fw-title",
 									children: label
 								}),
+								description && /* @__PURE__ */ jsx("p", {
+									className: "fw-description",
+									title: description,
+									children: description
+								}),
 								isLive && /* @__PURE__ */ jsx("span", {
 									className: "fw-state fw-state-live",
 									children: "Live"
@@ -4323,6 +4643,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 								agents.length,
 								" ",
 								agents.length === 1 ? "agent" : "agents",
+								sharedDetail ? ` · ${sharedDetail}` : "",
 								done && speedup >= 1.05 ? ` · ${speedup.toFixed(1)}x parallel` : ""
 							]
 						}),
@@ -4380,7 +4701,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 					})]
 				})]
 			}),
-			/* @__PURE__ */ jsx("dl", {
+			showSummary && /* @__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,
@@ -4392,6 +4713,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 				}, name))
 			}),
 			view === "agents" && playback,
+			view === "agents" && /* @__PURE__ */ jsx(KindLegend, { rows }),
 			/* @__PURE__ */ jsx(FlowBody, {
 				rows: visible,
 				byId,
@@ -4401,6 +4723,10 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 				collapsed,
 				searching: Boolean(query.trim()),
 				pauses: trace.pauses,
+				cursorLine: moving,
+				sharedDetail,
+				expandedIds: view === "agents" ? /* @__PURE__ */ new Set([...openFamilies, ...openSteps]) : void 0,
+				fixedHeight: isLive,
 				slowestId: slowest?.id ?? callouts.slowestId,
 				costliestId: callouts.costliestId,
 				activeId,

package/dist/react/live.css

@@ -1,30 +1,31 @@
-/* Shared live charts. Consumers may set --chart-live-* tokens on an ancestor. */
-.ov-empty { margin: 0; color: var(--chart-live-faint, #777); font-size: .9em; }
+/* Shared live charts. Consumers may set --chart-live-* tokens on an ancestor. Sizes are px on the 12/14 type scale and a
+   4 px grid, so a host's font size never rescales them. */
+.ov-empty { margin: 0; color: var(--chart-live-faint, #777); font-size: 12px; }
 .ov-plot { position: relative; min-width: 0; }
 .ov-plot svg { display: block; overflow: visible; }
 line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%, transparent); stroke-width: 1; }
-.ov-axis { fill: var(--chart-live-muted, #666); font: .8em var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; }
+.ov-axis { fill: var(--chart-live-muted, #666); font: 12px/16px var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; }
 .ov-crosshair { stroke: var(--chart-live-faint, #777); stroke-dasharray: 3 3; }
-.ov-tip { position: absolute; z-index: 4; display: grid; gap: .25em; min-width: 12em; max-width: 18em; padding: .6em .75em; background: var(--chart-live-raised, #fff); border: 1px solid var(--chart-live-border, #aaa); border-radius: 8px; box-shadow: 0 10px 24px -12px #000; font-size: .85em; pointer-events: none; }
-.ov-tip-line { display: grid; grid-template-columns: auto 1fr auto; gap: .6em; align-items: center; color: var(--chart-live-muted, #666); }
+.ov-tip { position: absolute; z-index: 4; display: grid; gap: 4px; min-width: 160px; max-width: 240px; padding: 8px 12px; background: var(--chart-live-raised, #fff); border: 1px solid var(--chart-live-border, #aaa); border-radius: 8px; box-shadow: 0 10px 24px -12px #000; font-size: 12px; line-height: 16px; pointer-events: none; }
+.ov-tip-line { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; color: var(--chart-live-muted, #666); }
 .ov-tip-line b { color: var(--chart-live-fg, #222); font-variant-numeric: tabular-nums; }
-.ov-hbars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, max-content) minmax(33%, 1fr) max-content; gap: .25em .7em; }
+.ov-hbars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, max-content) minmax(33%, 1fr) max-content; gap: 4px 12px; }
 .ov-hbars li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
-.ov-hbars li > a, .ov-hbars li > div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; row-gap: .15em; align-items: center; padding: .3em .4em; border-radius: 6px; color: inherit; text-decoration: none; }
-.ov-hbars-more { grid-column: 1 / -1; padding: .1em .4em; font-size: .8em; color: var(--chart-live-faint, #777); }
+.ov-hbars li > a, .ov-hbars li > div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; row-gap: 0; align-items: center; padding: 4px; border-radius: 6px; color: inherit; text-decoration: none; }
+.ov-hbars-more { grid-column: 1 / -1; padding: 0 4px; font-size: 12px; color: var(--chart-live-faint, #777); }
 .ov-hbars li > a:hover, .ov-hbars li > div:hover { background: var(--chart-live-hover, #eee); text-decoration: none; }
-.ov-hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95em; color: var(--chart-live-fg, #222); }
-.ov-hbar-track { height: .7em; border-radius: 3px; background: color-mix(in srgb, var(--chart-live-faint, #777) 14%, transparent); overflow: hidden; }
+.ov-hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; color: var(--chart-live-fg, #222); }
+.ov-hbar-track { height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--chart-live-faint, #777) 14%, transparent); overflow: hidden; }
 .ov-hbar-track > span { display: block; height: 100%; border-radius: 3px; }
-.ov-hbar-value { font: .9em var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; text-align: right; color: var(--chart-live-fg, #222); }
-.ov-hbar-note { grid-column: 1 / -1; font-size: .78em; color: var(--chart-live-faint, #777); }
-.ov-meter { display: grid; gap: .3em; min-width: 0; }
-.ov-meter-track { display: block; height: .7em; border-radius: 3px; background: color-mix(in srgb, var(--chart-live-faint, #777) 14%, transparent); overflow: hidden; }
+.ov-hbar-value { font: 12px/16px var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; text-align: right; color: var(--chart-live-fg, #222); }
+.ov-hbar-note { grid-column: 1 / -1; font-size: 12px; color: var(--chart-live-faint, #777); }
+.ov-meter { display: grid; gap: 4px; min-width: 0; }
+.ov-meter-track { display: block; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--chart-live-faint, #777) 14%, transparent); overflow: hidden; }
 .ov-meter-track > span { display: block; height: 100%; border-radius: 3px; }
-.ov-meter-text { font: .85em var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; color: var(--chart-live-muted, #666); }
-.ov-spark { display: block; width: 8em; height: 1.6em; }
-.ov-spark-empty { font-size: .8em; color: var(--chart-live-faint, #777); }
-.ov-tip-line i { display: inline-block; width: .7em; height: .7em; border-radius: 3px; margin-right: .4em; vertical-align: -.05em; }
+.ov-meter-text { font: 12px/16px var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; color: var(--chart-live-muted, #666); }
+.ov-spark { display: block; width: 112px; height: 24px; }
+.ov-spark-empty { font-size: 12px; color: var(--chart-live-faint, #777); }
+.ov-tip-line i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 0; }
 /* Recorded events and spans. Colours come from Brand tokens; kinds also differ by stroke pattern and glyph. */
 .ov-mark { stroke-width: 1.5; fill: none; }
 .ov-mark-pass { stroke: var(--chart-live-pass, var(--chart-pass, var(--status-running))); }
@@ -44,7 +45,7 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 .ov-verdict-fail .ov-mark-head { fill: var(--chart-live-danger, var(--chart-breach, var(--status-error))); }
 .ov-verdict-unknown .ov-mark { stroke: var(--chart-live-faint, var(--chart-muted)); }
 .ov-verdict-unknown .ov-mark-head { fill: var(--chart-live-faint, var(--chart-muted)); }
-.ov-mark-label { fill: var(--chart-live-fg, var(--chart-ink)); font-size: .75em; paint-order: stroke; stroke: var(--chart-live-surface, var(--chart-canvas)); stroke-width: 3px; stroke-linejoin: round; }
+.ov-mark-label { fill: var(--chart-live-fg, var(--chart-ink)); font-size: 12px; paint-order: stroke; stroke: var(--chart-live-surface, var(--chart-canvas)); stroke-width: 3px; stroke-linejoin: round; }
 .ov-band-after-pass { fill: color-mix(in srgb, var(--chart-live-pass, var(--chart-pass, var(--status-running))) 12%, transparent); }
 .ov-band-idle { fill: var(--chart-live-hover, var(--chart-shade)); }
 .ov-band-blocked { fill: color-mix(in srgb, var(--chart-live-danger, var(--chart-breach, var(--status-error))) 9%, transparent); }
@@ -56,10 +57,10 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 .ov-hatched { background: repeating-linear-gradient(135deg, var(--chart-live-faint, var(--chart-muted)) 0 1px, transparent 1px 5px), color-mix(in srgb, var(--chart-live-faint, var(--chart-muted)) 10%, transparent); }
 .ov-now { stroke: var(--chart-live-fg, var(--chart-ink)); stroke-width: 1.5; }
 .ov-gantt-open { stroke: var(--chart-live-fg, var(--chart-ink)); stroke-width: 1.5; stroke-dasharray: 3 2; }
-.ov-events, .ov-key, .ov-meter-key { list-style: none; margin: .4em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2em 1em; font-size: .8em; color: var(--chart-live-muted, var(--chart-ink-muted)); }
-.ov-key li, .ov-events li, .ov-meter-key li { display: inline-flex; align-items: center; gap: .4em; }
-.ov-meter-key b { font-weight: 500; color: var(--chart-live-fg, var(--chart-ink)); font-family: var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; }
-.ov-meter-key i, .ov-event-swatch { display: inline-block; width: .8em; height: .8em; border-radius: 2px; }
+.ov-events, .ov-key, .ov-meter-key { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; line-height: 16px; color: var(--chart-live-muted, var(--chart-ink-muted)); }
+.ov-key li, .ov-events li, .ov-meter-key li { display: inline-flex; align-items: center; gap: 8px; }
+.ov-meter-key b { font-weight: 600; color: var(--chart-live-fg, var(--chart-ink)); font-family: var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; }
+.ov-meter-key i, .ov-event-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
 [data-segmented] > .ov-meter-track { display: flex; }
 [data-segmented] > .ov-meter-track > span { flex: none; border-radius: 0; }
 .ov-event-pass { border-left: 2px solid var(--chart-live-pass, var(--chart-pass, var(--status-running))); border-radius: 0; width: 0; }
@@ -72,7 +73,7 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 .ov-event-after-pass { background: color-mix(in srgb, var(--chart-live-pass, var(--chart-pass, var(--status-running))) 25%, transparent); }
 .ov-event-idle { background: var(--chart-live-hover, var(--chart-shade)); }
 .ov-event-missing { background: repeating-linear-gradient(135deg, var(--chart-live-faint, var(--chart-muted)) 0 1px, transparent 1px 4px); }
-.ov-refusal { margin: 0; color: var(--chart-live-muted, var(--chart-ink-muted)); font-size: .9em; }
+.ov-refusal { margin: 0; color: var(--chart-live-muted, var(--chart-ink-muted)); font-size: 12px; }
 
 /*
  * DotMap: thousands of dots on one canvas. A categorical lens names at most three categories in colour, the first

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "description": "Static SVG and HTML figures for benchmarks and operational timing. Draws from producer data and refuses what it cannot draw honestly.",
   "type": "module",
   "license": "MIT",