@tangle-network/charts 0.17.1 → 0.18.1

package/README.md

@@ -335,7 +335,7 @@ const trace = otlpFlowTrace(spans, { price: catalogPrice(await (await fetch(cata
 <FlowWaterfall trace={trace} live={running} defaultView="agents" renderIcon={brandMark} />;
 ```
 
-`defaultView="agents"` opens the agent timeline: one row per agent with its model, thinking and tool marks, hatched waiting while it delegates, elbow connectors to each agent it spawned and back, retry and failure glyphs, and a headline with the measured speedup over sequential (agent busy time over wall time). Expanding an agent opens the span view with that agent unfolded. The span view virtualizes rows (5,000 spans scroll at 58+ fps in headless Chromium), pins ancestors while their children scroll, and labels each bar with its duration and recorded cost. Hover shows a span card; click pins it and zooms the axis to a span too narrow to read. `onSelect(span)` hears each opened row and pinned bar, so a host can open its own drill-down; `markers={[{ at, label, tone }]}` draws labelled instants, such as releases, across the rows. Ctrl/Cmd+wheel or `+`/`-`/`0` zoom, Shift+wheel pans, the scrub track under the controls shows the whole trace, and arrow keys walk the tree.
+`defaultView="agents"` opens the agent timeline: one row per agent with its model, thinking and tool marks, hatched waiting while it delegates, elbow connectors to each agent it spawned and back, retry and failure glyphs, and a headline with the measured speedup over sequential (agent busy time over wall time). Expanding an agent opens the span view with that agent unfolded. The span view virtualizes rows (5,000 spans scroll at 58+ fps in headless Chromium), pins ancestors while their children scroll, and labels each bar with its duration and recorded cost. Hover shows a span card; click pins it and zooms the axis to a span too narrow to read. `onSelect(span)` hears each opened row and pinned bar, so a host can open its own drill-down; `markers={[{ at, label, tone }]}` draws labelled instants, such as releases, across the rows. Give an agent span an `outcome` (`{ tone, label }`) and its lane takes the outcome color and the header a legend. Ctrl/Cmd+wheel or `+`/`-`/`0` zoom, Shift+wheel pans, the scrub track under the controls shows the whole trace, and arrow keys walk the tree.
 
 Live views append spans as they arrive: `traces watch <id|run-dir> --format jsonl --spans` emits a `traces.stream.span` event per new or changed span, and `otlpFlowTrace` keeps the last span per `span_id`. Running agent spans grow to the clock between deltas without React renders (CSS variables carry the clock). Search supports Cmd/Ctrl+F and keeps ancestor context. Missing cost and authoritative LLM counts stay Unknown; a cost priced from a catalog is labelled list price. Invalid intervals retain a per-row `—` timing mark. The static phase waterfall remains a separate chart for disjoint phases.
 

package/dist/{flow-trace-Cti_6fZP.d.ts → flow-trace-BYKE-PMb.d.ts}

@@ -332,8 +332,15 @@ interface FlowSpan {
   retryOf?: string;
   /** For a handoff, the span that received the work; a connector joins the two rows. */
   handoffTo?: string;
+  /** The host's verdict on an agent span, such as shipped or crashed: colors its lane and joins the legend. */
+  outcome?: FlowOutcome;
   meta?: Record<string, unknown>;
 }
+/** A host verdict: `label` is the legend text, `tone` the status color. */
+interface FlowOutcome {
+  tone: 'ok' | 'neutral' | 'failed' | 'warn';
+  label: string;
+}
 /** A labelled instant on the trace clock, such as a release or an alert; drawn as a line across the rows. */
 interface FlowMarker {
   /** Trace-relative milliseconds, on the same clock as span startMs. */
@@ -357,4 +364,4 @@ interface FlowTrace {
   errors?: number;
 }
 //#endregion
-export { ComparisonRow as A, Setup as B, MarkVerdict as C, YTarget as D, YScale as E, Interval as F, TierCounts as H, IntervalMethod as I, MatrixCell as L, Estimate as M, Exclusion as N, YTick as O, Figure as P, RateRow as R, MarkKind as S, XCategory as T, isRefusal as U, Tier as V, PointFields as _, TimelineOptions as a, ChartBand as b, timeline as c, ENDING_ORDER as d, OUTCOME_COLORS as f, checkerColor as g, TickOutcome as h, TimelineLane as i, CostBasis as j, BreakdownInput as k, CHECKER_HUES as l, RunEnding as m, FlowSpan as n, TimelineSpan as o, OUTCOME_ORDER as p, FlowTrace as r, TimelineTick as s, FlowMarker as t, ENDING_COLORS as u, PointGlyph as v, MarkerShape as w, ChartMark as x, BandKind as y, Refusal as z };
+export { BreakdownInput as A, Refusal as B, MarkKind as C, YScale as D, XCategory as E, Figure as F, Tier as H, Interval as I, IntervalMethod as L, CostBasis as M, Estimate as N, YTarget as O, Exclusion as P, MatrixCell as R, ChartMark as S, MarkerShape as T, TierCounts as U, Setup as V, isRefusal as W, checkerColor as _, TimelineLane as a, BandKind as b, TimelineTick as c, ENDING_COLORS as d, ENDING_ORDER as f, TickOutcome as g, RunEnding as h, FlowTrace as i, ComparisonRow as j, YTick as k, timeline as l, OUTCOME_ORDER as m, FlowOutcome as n, TimelineOptions as o, OUTCOME_COLORS as p, FlowSpan as r, TimelineSpan as s, FlowMarker as t, CHECKER_HUES as u, PointFields as v, MarkVerdict as w, ChartBand as x, PointGlyph as y, RateRow as z };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { A as ComparisonRow, B as Setup, C as MarkVerdict, D as YTarget, E as YScale, F as Interval, H as TierCounts, I as IntervalMethod, L as MatrixCell, M as Estimate, N as Exclusion, O as YTick, P as Figure, R as RateRow, S as MarkKind, T as XCategory, U as isRefusal, V as Tier, _ as PointFields, a as TimelineOptions, b as ChartBand, c as timeline, d as ENDING_ORDER, f as OUTCOME_COLORS, g as checkerColor, h as TickOutcome, i as TimelineLane, j as CostBasis, k as BreakdownInput, l as CHECKER_HUES, m as RunEnding, n as FlowSpan, o as TimelineSpan, p as OUTCOME_ORDER, r as FlowTrace, s as TimelineTick, t as FlowMarker, u as ENDING_COLORS, v as PointGlyph, w as MarkerShape, x as ChartMark, y as BandKind, z as Refusal } from "./flow-trace-Cti_6fZP.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-BYKE-PMb.js";
 //#region src/block.d.ts
 interface RenderFigureOptions {
   /** Chart uses a closed data disclosure; plot keeps only the SVG and accessible data. */
@@ -398,4 +398,4 @@ export declare function otlpFlowTrace(input: OtlpSpan[], options?: OtlpTraceOpti
   omitted: number;
 };
 //#endregion
-export { type BandKind, type BreakdownInput, type BreakdownOptions, CHECKER_HUES, type ChartBand, type ChartMark, type ComparisonIntervalsOptions, type ComparisonRow, type CostBasis, type CostFrontierOptions, type DotGroup, type DotGroupRect, ENDING_COLORS, ENDING_ORDER, type Estimate, type Exclusion, type Figure, type FlowMarker, type FlowSpan, type FlowTrace, type HeatmapCell, type HeatmapColumn, type HeatmapOptions, type HeatmapRow, type HeatmapStatus, type Interval, type IntervalMethod, type LatencyRangeOptions, type LatencyRangeRow, type MarkKind, type MarkVerdict, type MatrixCell, type MetricBarsOptions, type MetricRow, type MultiplePanel, OUTCOME_COLORS, OUTCOME_ORDER, type Observations, type OtlpSpan, type OtlpTraceOptions, type PhaseWaterfallOptions, type PointFields, type PointGlyph, type RankedRatesOptions, type RateIdentity, type RateRow, type Refusal, type RenderFigureOptions, type RunEnding, type Setup, type SmallMultiplesOptions, type TaskMatrixOptions, type TickOutcome, type Tier, type TierCounts, type TimePoint, type TimeSeriesOptions, type TimeSeriesRow, type TimelineLane, type TimelineOptions, type TimelineSpan, type TimelineTick, type UnitDotLayout, type UnitDotOptions, type WaterfallPhase, type XCategory, type YScale, type YTarget, type YTick, checkerColor, isRefusal, timeline };
+export { type BandKind, type BreakdownInput, type BreakdownOptions, CHECKER_HUES, type ChartBand, type ChartMark, type ComparisonIntervalsOptions, type ComparisonRow, type CostBasis, type CostFrontierOptions, type DotGroup, type DotGroupRect, ENDING_COLORS, ENDING_ORDER, type Estimate, type Exclusion, type Figure, type FlowMarker, type FlowOutcome, type FlowSpan, type FlowTrace, type HeatmapCell, type HeatmapColumn, type HeatmapOptions, type HeatmapRow, type HeatmapStatus, type Interval, type IntervalMethod, type LatencyRangeOptions, type LatencyRangeRow, type MarkKind, type MarkVerdict, type MatrixCell, type MetricBarsOptions, type MetricRow, type MultiplePanel, OUTCOME_COLORS, OUTCOME_ORDER, type Observations, type OtlpSpan, type OtlpTraceOptions, type PhaseWaterfallOptions, type PointFields, type PointGlyph, type RankedRatesOptions, type RateIdentity, type RateRow, type Refusal, type RenderFigureOptions, type RunEnding, type Setup, type SmallMultiplesOptions, type TaskMatrixOptions, type TickOutcome, type Tier, type TierCounts, type TimePoint, type TimeSeriesOptions, type TimeSeriesRow, type TimelineLane, type TimelineOptions, type TimelineSpan, type TimelineTick, type UnitDotLayout, type UnitDotOptions, type WaterfallPhase, type XCategory, type YScale, type YTarget, type YTick, checkerColor, isRefusal, timeline };

package/dist/react/flow-waterfall.css

@@ -122,12 +122,13 @@
 .fw-root .fw-marker[data-tone="ok"] { --fw-marker: var(--fw-ok); }
 .fw-root .fw-marker[data-tone="failed"] { --fw-marker: var(--fw-failed); }
 .fw-root .fw-marker-label { position: absolute; top: 2px; left: 3px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; border-radius: 4px; font-size: 12px; line-height: 16px; color: var(--fw-marker); background: var(--fw-surface); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-marker) 40%, transparent); }
+.fw-root .fw-marker-label-left { left: auto; right: 3px; }
 .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); }
 .fw-root .fw-empty { padding: 40px 16px; text-align: center; color: var(--fw-muted); }
 .fw-root .fw-sticky { position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: var(--fw-surface); box-shadow: 0 1px 0 var(--fw-border), 0 6px 12px -8px rgb(0 0 0 / .35); }
 
 /* Rows */
-.fw-root .fw-row { position: absolute; top: 0; left: 0; right: 0; height: var(--fw-row-h); display: grid; grid-template-columns: var(--fw-label-col) minmax(0, 1fr); outline: 0; contain: layout style; }
+.fw-root .fw-row { position: absolute; top: 0; left: 0; right: 0; transform: translateY(var(--row-y)); height: var(--fw-row-h); display: grid; grid-template-columns: var(--fw-label-col) minmax(0, 1fr); outline: 0; contain: layout style; }
 .fw-root .fw-row:hover { background: var(--fw-hover); }
 .fw-root .fw-row.fw-active { background: color-mix(in oklab, var(--fw-accent) 7%, transparent); }
 .fw-root .fw-row[aria-selected="true"] { background: color-mix(in oklab, var(--fw-accent) 11%, transparent); }
@@ -186,6 +187,19 @@
 .fw-root .fw-bar.fw-k-pipeline { background: linear-gradient(90deg, var(--fw-neutral-bar), color-mix(in oklab, var(--fw-neutral-bar) 55%, var(--fw-surface))); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-text) 12%, transparent); }
 .fw-root .fw-bar.fw-k-pipeline.fw-has-marks { background: color-mix(in oklab, var(--tone) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 18%, transparent); }
 .fw-root .fw-bar.fw-k-pipeline.fw-has-agents { background: repeating-linear-gradient(-45deg, var(--fw-hatch) 0 1px, transparent 1px 5px), color-mix(in oklab, var(--fw-text) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-text) 12%, transparent); }
+/* An agent bar with no child marks says who it is by its lane color, never a neutral grey. */
+.fw-root .fw-view-agents .fw-bar.fw-k-pipeline:not(.fw-has-marks, .fw-has-agents) { background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
+/* A host outcome re-tones the whole lane: dot, bar and marks. */
+.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); }
+.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-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); }
+.fw-root .fw-legend .fw-swatch-step svg { width: 8px; height: 8px; }
 .fw-root .fw-bar.fw-approx { opacity: calc(var(--on) * .7); }
 .fw-root .fw-seg { width: max(calc(var(--w) - 2px), calc(var(--on) * 3px)); pointer-events: none; }
 .fw-root .fw-view-agents .fw-seg { pointer-events: auto; }
@@ -315,12 +329,12 @@
 @container (max-width: 899px) {
   /* The root is the queried container, so the variables go on its children. */
   .fw-root-agents > * { --fw-label-col: 0px; --fw-bar-shift: 8px; }
-  .fw-root-agents .fw-view-agents .fw-label { position: absolute; z-index: 2; top: 4px; left: 0; right: 0; height: 18px; padding: 0 var(--fw-pad); gap: 8px; align-items: center; pointer-events: none; overflow: hidden; }
   .fw-root-agents .fw-view-agents .fw-names { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }
   .fw-root-agents .fw-view-agents .fw-agent-dot { align-self: center; margin-top: 0; }
   /* The label leaves the grid flow, so the lane must claim the track column itself. */
   .fw-root-agents .fw-view-agents .fw-lane { grid-column: 2; }
-  /* Elbows pass behind the name, not through its letters. */
-  .fw-root-agents .fw-view-agents .fw-names { padding-right: 4px; border-radius: 4px; background: var(--fw-surface); }
-  .fw-root-agents .fw-view-agents .fw-row:hover .fw-names { background: transparent; }
+  /* Elbows pass behind the name, not through its letters. A transform or layout containment would make each row
+     its own stacking context and trap the name under the connector layer, so stacked rows place by top instead. */
+  .fw-root-agents .fw-view-agents .fw-row { transform: none; top: var(--row-y); contain: style; }
+  .fw-root-agents .fw-view-agents .fw-label { position: absolute; z-index: 3; top: 4px; left: 0; height: 18px; max-width: calc(100% - var(--fw-pad)); padding: 0 8px 0 var(--fw-pad); gap: 8px; align-items: center; pointer-events: none; overflow: hidden; border-radius: 0 4px 4px 0; background: var(--fw-surface); }
 }

package/dist/react/index.d.ts

@@ -1,4 +1,4 @@
-import { C as MarkVerdict, D as YTarget, E as YScale, O as YTick, P as Figure, S as MarkKind, T as XCategory, _ as PointFields, a as TimelineOptions, b as ChartBand, h as TickOutcome, i as TimelineLane, n as FlowSpan, o as TimelineSpan, r as FlowTrace, s as TimelineTick, t as FlowMarker, v as PointGlyph, w as MarkerShape, x as ChartMark, y as BandKind, z as Refusal } from "../flow-trace-Cti_6fZP.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-BYKE-PMb.js";
 import { CSSProperties, ReactElement, ReactNode } from "react";
 //#region src/react/sparkline.d.ts
 type SparklineDirection = "rising" | "falling" | "flat";
@@ -365,7 +365,7 @@ interface FlowWaterfallProps {
   defaultView?: FlowView;
   /** Host brand marks by span; the inspector draws kind glyphs without it. */
   renderIcon?: (span: FlowSpan) => ReactNode;
-  /** Scroll height of the rows; the tree is virtualized beyond it. */
+  /** Scroll height of the rows; the tree is virtualized beyond it. Defaults to 20 agent rows, or 640 px of steps. */
   maxHeight?: number;
   /** Called when a row is opened or a bar is pinned, with that row's span; the built-in behavior still runs. */
   onSelect?: (span: FlowSpan) => void;

package/dist/react/index.js

@@ -2874,8 +2874,9 @@ const FlowRow = memo(function FlowRow(props) {
 		"aria-selected": selected,
 		tabIndex: focusable ? 0 : -1,
 		"data-tone": toneKey(row.tone),
+		"data-outcome": span.outcome?.tone,
 		className: `fw-row${active ? " fw-active" : ""}${sticky ? " fw-sticky-row" : ""}${isAgent ? " fw-agent-row" : ""}`,
-		style: { transform: `translateY(${top}px)` },
+		style: { "--row-y": `${top}px` },
 		onFocus: (event) => {
 			if (event.target === event.currentTarget) props.onActivate(row);
 		},
@@ -3161,6 +3162,25 @@ function FlowBody(props) {
 	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)));
+	const markerLabels = useMemo(() => {
+		const shown = /* @__PURE__ */ new Map();
+		let freeFrom = -Infinity;
+		for (const marker of [...props.markers ?? []].sort((a, b) => a.at - b.at)) {
+			const x = (marker.at - win.startMs) / msPerPx;
+			const width = marker.label.length * 7 + 16;
+			const side = x + width > trackPx ? "left" : "right";
+			const left = side === "right" ? x : x - width;
+			if (x < 0 || x > trackPx || left < freeFrom) continue;
+			shown.set(marker, side);
+			freeFrom = left + width + 8;
+		}
+		return shown;
+	}, [
+		props.markers,
+		win.startMs,
+		msPerPx,
+		trackPx
+	]);
 	useEffect(() => {
 		const element = scroller.current;
 		if (!element) return;
@@ -3399,8 +3419,9 @@ function FlowBody(props) {
 							className: "fw-marker",
 							"data-tone": marker.tone ?? "neutral",
 							style: { "--s": marker.at },
-							children: /* @__PURE__ */ jsx("span", {
-								className: "fw-marker-label",
+							title: marker.label,
+							children: markerLabels.has(marker) && /* @__PURE__ */ jsx("span", {
+								className: `fw-marker-label${markerLabels.get(marker) === "left" ? " fw-marker-label-left" : ""}`,
 								children: marker.label
 							})
 						}, `${marker.at}-${marker.label}`))
@@ -3683,10 +3704,49 @@ const NAME_WIDTH = {
 	spans: 320,
 	agents: 240
 };
+/** One legend item per outcome label the agents carry, with its count; nothing when no agent has an outcome. */
+function OutcomeLegend({ agents }) {
+	const items = /* @__PURE__ */ new Map();
+	for (const row of agents) {
+		const outcome = row.span.outcome;
+		if (!outcome) continue;
+		const item = items.get(outcome.label) ?? {
+			tone: outcome.tone,
+			count: 0
+		};
+		item.count += 1;
+		items.set(outcome.label, item);
+	}
+	if (items.size === 0) return null;
+	const failedSteps = agents.reduce((sum, row) => sum + row.own.reduce((n, mark) => n + (mark.kind === "failed" ? mark.count : 0), 0), 0);
+	return /* @__PURE__ */ jsxs("ul", {
+		className: "fw-legend",
+		"aria-label": "Outcomes",
+		children: [[...items].map(([label, item]) => /* @__PURE__ */ jsxs("li", { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "fw-swatch",
+				"data-tone": "0",
+				"data-outcome": item.tone,
+				"aria-hidden": true
+			}),
+			label,
+			" ",
+			/* @__PURE__ */ jsx("b", { children: item.count })
+		] }, label)), failedSteps > 0 && /* @__PURE__ */ jsxs("li", { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "fw-swatch-step",
+				"aria-hidden": true,
+				children: /* @__PURE__ */ jsx(FailGlyph, {})
+			}),
+			"Failed step ",
+			/* @__PURE__ */ jsx("b", { children: failedSteps })
+		] })]
+	});
+}
 const headlineSeconds = (ms) => ms < 6e4 ? `${(ms / 1e3).toFixed(1)}s` : formatSpanDuration(ms);
 /** Shared trace inspector: the agent timeline and the span waterfall over one clock.
 * Data remains producer-owned; playback, zoom and folding change presentation only. */
-function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defaultCollapsed = false, defaultView = "spans", renderIcon, maxHeight = 640, onSelect, markers }) {
+function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defaultCollapsed = false, defaultView = "spans", renderIcon, maxHeight, onSelect, markers }) {
 	const root = useRef(null);
 	const search = useRef(null);
 	const slider = useRef(null);
@@ -3767,6 +3827,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		collapsed
 	]);
 	const slowest = view === "spans" ? slowestRow(rows, clockMs) : void 0;
+	const rowsHeight = maxHeight ?? (view === "agents" ? ROW_HEIGHT.agents * 20 : 640);
 	const resized = useRef(false);
 	useLayoutEffect(() => {
 		if (view !== "agents" || resized.current || !root.current) return;
@@ -3990,47 +4051,51 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 				className: "fw-heading",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "fw-title-block",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "fw-title-line",
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "fw-title-glyph",
-								"aria-hidden": true,
-								children: /* @__PURE__ */ jsx(TraceGlyph, {})
-							}),
-							/* @__PURE__ */ jsx("h3", {
-								className: "fw-title",
-								children: label
-							}),
-							isLive && /* @__PURE__ */ jsx("span", {
-								className: "fw-state fw-state-live",
-								children: "Live"
-							})
-						]
-					}), view === "agents" && /* @__PURE__ */ jsx("p", {
-						className: "fw-headline",
-						"aria-live": "polite",
-						children: done ? /* @__PURE__ */ jsxs(Fragment, { children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "fw-done-mark",
-								"aria-label": "done",
-								children: "✓"
-							}),
-							agents.length,
-							" ",
-							agents.length === 1 ? "agent" : "agents",
-							" · ",
-							headlineSeconds(limit),
-							speedup >= 1.05 ? ` · ${speedup.toFixed(1)}x parallel` : "",
-							trace.costUsd !== void 0 ? ` · ${formatCost(trace.costUsd)}` : ""
-						] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-							headlineSeconds(clockMs),
-							" · ",
-							tokens.toLocaleString(),
-							" tokens",
-							trace.costUsd !== void 0 ? ` · ${formatCost(trace.costUsd)}` : ""
-						] })
-					})]
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "fw-title-line",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "fw-title-glyph",
+									"aria-hidden": true,
+									children: /* @__PURE__ */ jsx(TraceGlyph, {})
+								}),
+								/* @__PURE__ */ jsx("h3", {
+									className: "fw-title",
+									children: label
+								}),
+								isLive && /* @__PURE__ */ jsx("span", {
+									className: "fw-state fw-state-live",
+									children: "Live"
+								})
+							]
+						}),
+						view === "agents" && /* @__PURE__ */ jsx("p", {
+							className: "fw-headline",
+							"aria-live": "polite",
+							children: done ? /* @__PURE__ */ jsxs(Fragment, { children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "fw-done-mark",
+									"aria-label": "done",
+									children: "✓"
+								}),
+								agents.length,
+								" ",
+								agents.length === 1 ? "agent" : "agents",
+								" · ",
+								headlineSeconds(limit),
+								speedup >= 1.05 ? ` · ${speedup.toFixed(1)}x parallel` : "",
+								trace.costUsd !== void 0 ? ` · ${formatCost(trace.costUsd)}` : ""
+							] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+								headlineSeconds(clockMs),
+								" · ",
+								tokens.toLocaleString(),
+								" tokens",
+								trace.costUsd !== void 0 ? ` · ${formatCost(trace.costUsd)}` : ""
+							] })
+						}),
+						/* @__PURE__ */ jsx(OutcomeLegend, { agents })
+					]
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "fw-tools",
 					children: [/* @__PURE__ */ jsx("div", {
@@ -4098,7 +4163,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 				byId,
 				totalRows: rows.length,
 				view,
-				maxHeight,
+				maxHeight: rowsHeight,
 				collapsed,
 				searching: Boolean(query.trim()),
 				slowestId: slowest?.id,

package/package.json

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