@tangle-network/charts 0.21.16 → 0.21.18

package/dist/react/flow-waterfall.css

@@ -259,7 +259,8 @@
 /* Muted agents (the default): one quiet tone for every agent bar, its steps and handoffs; the slowest agent alone takes amber, and
    failure keeps its red glyph, so color only ever means state. */
 .fw-root.fw-fill-muted .fw-view-agents [data-tone] { --tone: var(--fw-h0); }
-.fw-root:is(.fw-fill-muted, .fw-fill-agent) .fw-view-agents .fw-row[data-slowest], .fw-root:is(.fw-fill-muted, .fw-fill-agent) .fw-view-agents .fw-row[data-slowest] [data-tone] { --tone: var(--fw-amber); }
+/* With per-agent hues the slowest agent keeps its own hue and says so with the amber pill (round 27: an amber-brown bar read "muddy"). */
+.fw-root.fw-fill-muted .fw-view-agents .fw-row[data-slowest], .fw-root.fw-fill-muted .fw-view-agents .fw-row[data-slowest] [data-tone] { --tone: var(--fw-amber); }
 .fw-root [data-outcome="ok"], .fw-root [data-outcome="ok"] [data-tone] { --tone: var(--fw-ok); }
 .fw-root [data-outcome="failed"], .fw-root [data-outcome="failed"] [data-tone] { --tone: var(--fw-failed); }
 .fw-root [data-outcome="warn"], .fw-root [data-outcome="warn"] [data-tone] { --tone: var(--fw-amber); }
@@ -291,14 +292,30 @@
 .fw-root:is(.fw-fill-muted, .fw-fill-outcome) .fw-view-agents .fw-seg-model { background: var(--fw-kind-model); box-shadow: none; }
 .fw-root:is(.fw-fill-muted, .fw-fill-outcome) .fw-view-agents .fw-seg-tool { background: var(--fw-kind-tool); box-shadow: none; }
 /* Per-agent hues at full saturation (blind round 26: muted per-agent bars "blur together", "wash out on white"): kind is a darker or
-   lighter step of the agent's own saturated hue, every solid segment at least 3:1 against the card; waiting stays the only pale fill. */
-.fw-root.fw-fill-agent .fw-view-agents .fw-seg-model { background: light-dark(color-mix(in oklab, var(--tone) 75%, var(--fw-text)), var(--tone)); box-shadow: none; }
-.fw-root.fw-fill-agent .fw-view-agents .fw-seg-tool { background: light-dark(var(--tone), color-mix(in oklab, var(--tone) 72%, var(--fw-text))); box-shadow: none; }
+   lighter step of the agent's own saturated hue; waiting stays the only pale fill. Light theme sits one step softer (round 27: the
+   saturated light bars read "heavy"). */
+.fw-root.fw-fill-agent .fw-view-agents .fw-seg-model { background: light-dark(color-mix(in oklab, var(--tone) 88%, var(--fw-text)), var(--tone)); box-shadow: none; }
+.fw-root.fw-fill-agent .fw-view-agents .fw-seg-tool { background: light-dark(color-mix(in oklab, var(--tone) 84%, var(--fw-surface)), color-mix(in oklab, var(--tone) 72%, var(--fw-text))); box-shadow: none; }
 /* A failed turn is still the agent's work: it keeps the agent's saturated hue, and the red cross on the ending turn says it failed. */
-.fw-root.fw-fill-agent .fw-view-agents .fw-seg-failed { background: light-dark(var(--tone), color-mix(in oklab, var(--tone) 72%, var(--fw-text))); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-failed) 55%, transparent); }
-.fw-root .fw-view-agents .fw-seg-tool { container-type: inline-size; justify-content: flex-start; }
-.fw-root .fw-seg-name { padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 16px; font-weight: 600; color: light-dark(var(--fw-surface), hsl(var(--hsl-background))); pointer-events: none; }
-@container (max-width: 56px) { .fw-root .fw-seg-name { display: none; } }
+.fw-root.fw-fill-agent .fw-view-agents .fw-seg-failed { background: light-dark(color-mix(in oklab, var(--tone) 84%, var(--fw-surface)), color-mix(in oklab, var(--tone) 72%, var(--fw-text))); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-failed) 55%, transparent); }
+.fw-root .fw-view-agents .fw-seg { container-type: inline-size; justify-content: flex-start; gap: 4px; white-space: nowrap; font-size: 12px; line-height: 16px; color: light-dark(var(--fw-surface), hsl(var(--hsl-background))); }
+.fw-root .fw-view-agents .fw-seg > * { pointer-events: none; }
+/* The inset is the first part's margin, not the segment's padding, so a short step keeps its true width (padding set a 12 px floor). */
+.fw-root .fw-view-agents .fw-seg > :first-child { margin-left: 6px; }
+.fw-root .fw-seg-icon { display: inline-flex; flex: none; }
+.fw-root .fw-seg-icon svg { width: 12px; height: 12px; stroke-width: 1.75; }
+.fw-root .fw-seg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
+.fw-root .fw-seg-chip { flex: none; padding: 0 4px; border-radius: var(--radius-pill); background: color-mix(in oklab, currentColor 24%, transparent); font-weight: 600; font-variant-numeric: tabular-nums; }
+.fw-root .fw-seg-meta { flex: none; opacity: .85; font-variant-numeric: tabular-nums; }
+/* A narrowing step drops its cost first, then its duration, then its name and count, then its icon. */
+@container (max-width: 180px) { .fw-root .fw-seg-cost { display: none; } }
+@container (max-width: 96px) { .fw-root .fw-seg-meta { display: none; } }
+@container (max-width: 56px) { .fw-root :is(.fw-seg-name, .fw-seg-chip) { display: none; } }
+@container (max-width: 24px) { .fw-root :is(.fw-seg-icon, .fw-view-agents .fw-seg .fw-glyph) { display: none; } }
+/* Fail and retry read as filled chips inside the bar, red and amber, as the references draw them. */
+.fw-root .fw-view-agents .fw-seg .fw-glyph { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--fw-failed); color: light-dark(var(--fw-surface), hsl(var(--hsl-background))); }
+.fw-root .fw-view-agents .fw-seg .fw-glyph[data-glyph="retry"] { background: var(--fw-amber); }
+.fw-root .fw-view-agents .fw-seg .fw-glyph svg { width: 9px; height: 9px; stroke-width: 2.5; }
 .fw-root:is(.fw-fill-muted, .fw-fill-outcome) .fw-view-agents :is(.fw-seg-alt.fw-seg-model, .fw-seg-alt.fw-seg-tool) { filter: brightness(.88); }
 .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); }
 /* 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. */
@@ -320,15 +337,15 @@
 .fw-root .fw-links { position: absolute; top: 0; bottom: 0; left: var(--fw-label-col); right: 0; overflow: hidden; pointer-events: none; z-index: 0; }
 .fw-root .fw-link {
   --x: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px);
-  position: absolute; width: 8px; border: 0 solid var(--line); border-bottom-width: 1.5px; translate: 0 var(--fw-bar-shift);
+  position: absolute; width: 12px; border: 0 solid var(--line); border-bottom-width: 1.5px; translate: 0 var(--fw-bar-shift);
   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 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-view-agents .fw-link:not(.fw-link-hot) { opacity: calc(clamp(0, (var(--fw-t) - var(--s)) * 1000, 1) * .8); }
 .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: 12px; }
+.fw-root .fw-link-down { left: calc(var(--x) - 12px); 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; }

package/dist/react/index.d.ts

@@ -373,6 +373,90 @@ interface DotMapProps {
 export declare const DOT_MAP_CATEGORIES: readonly string[];
 export declare function DotMap({ positions, radii, colors, palette, extent, rects, labels, dimmed, selected, minPixelRadius, onHover, onSelect, describe, height, ariaLabel }: DotMapProps): import("react").JSX.Element;
 //#endregion
+//#region src/react/flow-waterfall-model.d.ts
+/** A minimap mark on a parent row: merged descendant activity of one kind. */
+interface FlowSegment {
+  startMs: number;
+  /** Infinity while running; the presentation clips it at the clock. */
+  endMs: number;
+  kind: 'model' | 'tool' | 'failed';
+  tone: number;
+  /** The first span merged into this mark, and how many were merged. */
+  id: string;
+  count: number;
+  retry: boolean;
+  /** In a family row, every other member's marks take a darker shade of the family's one hue. */
+  alt?: boolean;
+  /** The first merged span's name, e.g. a tool's: shown in the segment's tooltip, and in the bar when one step fits it. */
+  name?: string;
+  /** The tool every merged step shares (the name before " · "); undefined once the merged steps differ. */
+  tool?: string;
+  /** What the merged steps cost, when any of them recorded a cost. */
+  costUsd?: number;
+  /** A failed mark that was a model call, so it draws the model's icon and no tool name. */
+  modelCall?: boolean;
+}
+/** A row's direct steps: model and tool calls (failed ones included), the failed and retrying ones, and tool calls by tool. */
+interface StepCounts {
+  model: number;
+  tool: number;
+  failed: number;
+  retried: number;
+  tools: Record<string, number>;
+}
+/** Tokens in, out and cached; a field nobody recorded stays undefined. */
+interface TokenCounts {
+  prompt?: number;
+  completion?: number;
+  cached?: number;
+}
+interface FlowWaterfallRow {
+  id: string;
+  parentId?: string;
+  name: string;
+  kind: FlowSpan['kind'];
+  durationLabel: string;
+  approx: boolean;
+  ok: boolean;
+  depth: number;
+  hasChildren: boolean;
+  span: FlowSpan;
+  /** Agent hue: the index of the nearest pipeline ancestor (or self), in first-start order. */
+  tone: number;
+  /** All descendants, for the collapsed "+N" count. */
+  descendants: number;
+  /** Parent rows only: merged descendant activity, drawn as the row's minimap. */
+  segments: FlowSegment[];
+  /** Direct non-agent children: the row's own thinking and tool work, drawn over its waiting extent. */
+  own: FlowSegment[];
+  /** Direct steps counted from the spans, before marks merge for display (merging depends on zoom). */
+  counts?: StepCounts;
+  /** Durations of its finished direct model calls, ascending: the card's latency. */
+  modelMs?: number[];
+  /** The span's own tokens, else the sum of its children's, as its cost rolls up. */
+  tokens?: TokenCounts;
+  /** Its cost is a floor ("≥"): its own bound, its trace's, or a family with unpriced members. */
+  costFloor?: boolean;
+  /** The span retries a failed one; its bar carries a retry glyph. */
+  retry: boolean;
+  /** The row delegates to child agents, so the gaps in its own work are waiting. */
+  hasAgents: boolean;
+  /** Recorded cost of the row and its descendants, only when every model call below it has a recorded cost. */
+  rollupCostUsd?: number;
+  /** Agent view: the family row this agent belongs to, when agents sharing a role are folded together. */
+  family?: string;
+  /** Agent view: the agent whose steps this row is, shown nested under it. */
+  stepOf?: string;
+  /** Agent view: indent level (members under a family, steps under an agent). */
+  inset?: number;
+}
+/** Hierarchy only; presentation owns geometry.
+ * Orphaned parents become roots; cycles are broken without dropping any span. */
+export declare function flowWaterfallRows(trace: FlowTrace, resolutionMs?: number): FlowWaterfallRow[];
+/** The chain of steps that gates the trace's end: from each root, descend into the latest-ending child until a leaf; the root whose
+ * chain ends last wins. Cutting latency anywhere else leaves the trace's end unchanged. */
+export declare function criticalPathIds(rows: readonly FlowWaterfallRow[]): ReadonlySet<string>;
+//#endregion
 //#region src/react/flow-waterfall-row.d.ts
 type FlowView = 'spans' | 'agents';
 //#endregion
@@ -436,4 +520,4 @@ interface FlowWaterfallProps {
  * 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: fillProp, selectedId, onDeselect, description, summary: showSummary, criticalPath, query: queryProp, onQueryChange, collapsed: collapsedProp, onCollapsedChange, zoom: zoomProp, onZoomChange, matchSpan }: FlowWaterfallProps): import("react").JSX.Element;
 //#endregion
-export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, FlowWaterfallProps, ViewWindow as FlowWaterfallWindow, GapBand, GapProps, 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 };
+export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, FlowWaterfallProps, FlowWaterfallRow, ViewWindow as FlowWaterfallWindow, GapBand, GapProps, 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

@@ -2476,6 +2476,7 @@ function mergeSegments(marks, gapMs, cap = 240) {
 				last.endMs = Math.max(last.endMs, mark.endMs);
 				last.count += mark.count;
 				if (last.tool !== mark.tool) last.tool = void 0;
+				if (mark.costUsd !== void 0) last.costUsd = (last.costUsd ?? 0) + mark.costUsd;
 				last.kind = share.model >= share.tool ? "model" : "tool";
 			} else out.push({ ...mark });
 		}
@@ -2656,7 +2657,9 @@ function segmentOf(row) {
 		count: 1,
 		retry: row.retry,
 		name: row.name,
-		tool: toolOf(row.name)
+		tool: toolOf(row.name),
+		...row.span.costUsd === void 0 ? {} : { costUsd: row.span.costUsd },
+		...!row.ok && row.kind === "model" ? { modelCall: true } : {}
 	};
 }
 /** The rows a search term matches by themselves, before ancestor context is added. */
@@ -3374,25 +3377,51 @@ const at = (startMs, endMs) => ({
 });
 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}`);
-	return /* @__PURE__ */ jsx("span", {
+	const glyph = mark.kind === "failed" ? agentView && !ending ? null : "fail" : mark.retry ? "retry" : null;
+	const model = mark.kind === "model" || mark.modelCall;
+	const name = model ? void 0 : mark.count === 1 ? mark.name : mark.tool;
+	const duration = Number.isFinite(mark.endMs) ? formatSpanDuration(mark.endMs - mark.startMs) : "";
+	const meta = [duration, mark.costUsd ? formatCost(mark.costUsd) : ""].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ jsxs("span", {
 		className: `fw-seg fw-seg-${mark.kind}${mark.alt ? " fw-seg-alt" : ""}`,
 		"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,
+		title: mark.name ? `${mark.name}${mark.count > 1 ? ` +${mark.count - 1} more` : ""}${meta ? ` · ${meta}` : ""}` : 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, event.clientX);
 		} : void 0,
-		children: glyph ? /* @__PURE__ */ jsx("span", {
+		children: [glyph && /* @__PURE__ */ jsx("span", {
 			className: "fw-glyph",
-			children: glyph
-		}) : named && /* @__PURE__ */ jsx("span", {
-			className: "fw-seg-name",
-			children: named
-		})
+			"data-glyph": glyph,
+			children: glyph === "fail" ? /* @__PURE__ */ jsx(FailGlyph, {}) : /* @__PURE__ */ jsx(RetryGlyph, {})
+		}), agentView && /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "fw-seg-icon",
+				"aria-hidden": true,
+				children: /* @__PURE__ */ jsx(KindGlyph, {
+					kind: model ? "model" : "tool",
+					name: mark.tool ?? mark.name
+				})
+			}),
+			name && /* @__PURE__ */ jsx("span", {
+				className: "fw-seg-name",
+				children: name
+			}),
+			mark.count > 1 && /* @__PURE__ */ jsxs("span", {
+				className: "fw-seg-chip",
+				children: ["×", mark.count]
+			}),
+			duration && /* @__PURE__ */ jsx("span", {
+				className: "fw-seg-meta",
+				children: duration
+			}),
+			mark.costUsd ? /* @__PURE__ */ jsx("span", {
+				className: "fw-seg-meta fw-seg-cost",
+				children: formatCost(mark.costUsd)
+			}) : null
+		] })]
 	});
 }
 /** A span the clock is inside: it grows live, or playback has not reached its end. */
@@ -3418,7 +3447,7 @@ 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 = [...span.detail && span.detail !== props.sharedDetail ? [span.detail] : [], ...agentSummary(row)];
+	const summary = [...span.detail && span.detail !== props.sharedDetail ? [span.detail] : [], ...agentSummary(row).filter((part) => part !== props.sharedOutcome)];
 	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;
@@ -3554,6 +3583,11 @@ const FlowRow = memo(function FlowRow(props) {
 					"aria-label": `${row.descendants} hidden steps`,
 					children: ["+", row.descendants]
 				}),
+				family && !props.expanded && /* @__PURE__ */ jsxs("span", {
+					className: "fw-count",
+					"aria-label": `${row.descendants} agents folded`,
+					children: ["+", row.descendants]
+				}),
 				!row.ok && !agentView && /* @__PURE__ */ jsx("span", {
 					className: "fw-alert",
 					children: /* @__PURE__ */ jsx(AlertGlyph, { label: "failed" })
@@ -3622,7 +3656,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.critical === b.critical && a.matched === b.matched && 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)));
+}, (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.critical === b.critical && a.matched === b.matched && 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.sharedOutcome === b.sharedOutcome && 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);
@@ -4095,6 +4129,7 @@ function FlowBody(props) {
 		renderIcon: props.renderIcon,
 		fillByAgent: props.fillByAgent,
 		sharedDetail: props.sharedDetail,
+		sharedOutcome: props.sharedOutcome,
 		expanded: props.expandedIds?.has(item.id),
 		onToggle: props.onToggle,
 		onInspect: props.onInspect,
@@ -4481,6 +4516,13 @@ function useHostable(value, onChange, initial) {
 	}, [controlled])];
 }
 const CARD_WIDTH = 320;
+/** The value at least half of several agents share, if one does. */
+function usual(values) {
+	const counts = /* @__PURE__ */ new Map();
+	for (const value of values) if (value) counts.set(value, (counts.get(value) ?? 0) + 1);
+	const [top, n] = [...counts].sort((a, b) => b[1] - a[1])[0] ?? [];
+	return values.length > 1 && n !== void 0 && n >= 2 && n * 2 >= values.length ? top : void 0;
+}
 /** 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);
@@ -4658,8 +4700,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 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 sharedDetail = usual(agents.map((row) => row.span.detail));
+	const sharedOutcome = usual(agents.map((row) => row.span.outcome?.label));
 	const [flippedFamilies, setFlippedFamilies] = useState(/* @__PURE__ */ new Set());
 	const openFamilies = useMemo(() => defaultOpenFamilies(agents, UNFOLD_ROWS, flippedFamilies), [agents, flippedFamilies]);
 	const [openSteps, setOpenSteps] = useState(/* @__PURE__ */ new Set());
@@ -4982,7 +5024,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 								agents.length,
 								" ",
 								agents.length === 1 ? "agent" : "agents",
-								sharedDetail ? ` · ${sharedDetail}` : "",
+								sharedDetail ? ` · ${agents.every((row) => row.span.detail === sharedDetail) ? "" : "mostly "}${sharedDetail}` : "",
 								done && speedup >= 1.05 ? ` · ${speedup.toFixed(1)}x parallel` : ""
 							]
 						}),
@@ -5068,6 +5110,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 				pauses: trace.pauses,
 				cursorLine: position !== null || playing,
 				sharedDetail,
+				sharedOutcome,
 				expandedIds: view === "agents" ? /* @__PURE__ */ new Set([...openFamilies, ...openSteps]) : void 0,
 				holdHeight: isLive,
 				slowestId: slowest?.id ?? callouts.slowestId,
@@ -5125,4 +5168,4 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	});
 }
 //#endregion
-export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DOT_MAP_CATEGORIES, DayBars, DotMap, Events, FigureView, FlowWaterfall, Gantt, Gap, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, TimelineView, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };
+export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DOT_MAP_CATEGORIES, DayBars, DotMap, Events, FigureView, FlowWaterfall, Gantt, Gap, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, TimelineView, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, criticalPathIds, flowWaterfallRows, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "0.21.16",
+  "version": "0.21.18",
   "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",