@tangle-network/charts 2.0.6 → 2.0.11

package/README.md

@@ -337,9 +337,9 @@ 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. Give an agent span an `outcome` (`{ tone, label }`) and its lane takes the outcome color and the header a legend. `detail` becomes the agent's subtitle. The card is a table of what the row recorded, every value with its unit: model, duration, tokens in, out and cached (the span's `promptTokens`, `completionTokens` and `cachedTokens`, else the sum of its children's), LLM latency (median and p95 of its model calls), cost, LLM calls, tool calls by tool (the name before " · "), failed steps, and retries and restarts (`retryOf`, `marks` of kind `restart`); a value nobody recorded is left out. `facts` (`[{ label, value }]`) adds the host's rows after it. The card opens at the pointer, above or below its row, whichever side fits the viewport. `onTimeChange` reports where the reader scrubbed (null when live), and markers double as an event track (click, N or P to jump). A partly priced trace shows its floor and coverage (`costCoverage`), and `billedUsd` shows the real charge beside the list price. 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. `detail` becomes the agent's subtitle. The card is a table of what the row recorded, every value with its unit: model, duration, tokens in, out and cached (the span's `promptTokens`, `completionTokens` and `cachedTokens`, else the sum of its children's), LLM latency (median and p95 of its model calls), cost, LLM calls, tool calls by tool (the name before " · "), failed steps, and retries and restarts (`retryOf`, `marks` of kind `restart`); a value nobody recorded is left out. `facts` (`[{ label, value }]`) supplies authoritative host rows: a matching label replaces the inferred metric, case-insensitively, including explicit unknown or zero values; additional labels append. The last explicit value wins for a repeated label. Agent lane summaries also use `Model calls` and `Tool calls` facts verbatim (`Model calls: 413`), including unknowns and zero; no count is parsed from a formatted fact. Model/Provider identity and Ran for/Cost end labels also honor facts verbatim; full values remain in the card and label title when phone metadata clips. Opaque duration/cost facts do not compete in numeric superlatives. Family lanes summarize agent and failure counts. Synthetic family cards show `Not recorded` for model identity, model/tool counts, model latency, failures or retries when any member supplies that authoritative fact: formatted counts and percentiles cannot be aggregated. Family tokens become unknown if a member supplies a Tokens fact without its own numeric usage. Cost rollups use full numeric span prices when a member supplies a Cost fact; partial known prices retain their lower bound, and an entirely opaque price is Not recorded. Strings and percentiles are never parsed or summed. The card opens at the pointer, above or below its row, whichever side fits the viewport. `onTimeChange` reports where the reader scrubbed (null when live), and markers double as an event track (click, N or P to jump). A partly priced trace shows its floor and coverage (`costCoverage`), and `billedUsd` shows the real charge beside the list price. 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. `activityAt` supplies trace-relative event times and `medianEventGapMs` preserves producer cadence before tail truncation; without it, child-step activity supplies the samples. Silence beyond five minutes and three median event gaps hatches the tail and names the quiet duration. The Errors filter expands matching agents and steps; its rug locates each error, marking unreported times separately. Containers below 600px use stacked 44px rows and a Key disclosure. Search supports Cmd/Ctrl+F and keeps ancestor context. Token totals are optional: omit unknown counts, retain measured zero, and guard optional token fields when reading a trace. Missing, partial and nonfinite usage displays a dash, including during playback. 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.
+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. `activityAt` supplies trace-relative event times and `medianEventGapMs` preserves producer cadence before tail truncation; without it, child-step activity supplies the samples. Silence beyond five minutes and three median event gaps hatches the tail and names the quiet duration. The Errors filter expands matching agents and steps; its rug locates each error, marking unreported times separately. Containers below 600px use stacked 52px rows and a Key disclosure. Search supports Cmd/Ctrl+F and keeps ancestor context. Token totals are optional: omit unknown counts, retain measured zero, and guard optional token fields when reading a trace. Missing, partial and nonfinite usage displays a dash, including during playback. 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.
 
 `scripts/flow-waterfall-demo.mjs` serves the demo routes (reference-shaped fixtures, recorded runs, a synthetic load trace and OTLP files from `FW_DATA_DIR`); `scripts/flow-waterfall-capture.mjs` captures frames, hover cards, fps, first paint and recordings, and with `FW_LIVE_RELAY` records a live session through `scripts/flow-waterfall-live-relay.mjs` with every span's event-to-pixel time.
 

package/dist/{flow-trace-CF4Q07cA.d.ts → flow-trace-VOGEAdl8.d.ts}

@@ -343,7 +343,7 @@ interface FlowSpan {
   handoffTo?: string;
   /** The host's verdict on an agent span, such as shipped or crashed: colors its lane and joins the legend. */
   outcome?: FlowOutcome;
-  /** Host facts shown as extra rows of the card's table, such as releases or commits; a label the table already has is skipped. */
+  /** Authoritative host rows: replace same-label inferred card metrics and lane model/count/duration/cost labels, case-insensitively; unknowns stay unknown. */
   facts?: readonly {
     label: string;
     value: string;

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-CF4Q07cA.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-VOGEAdl8.js";
 //#region src/block.d.ts
 interface RenderFigureOptions {
   /** Chart uses a closed data disclosure; plot keeps only the SVG and accessible data. */

package/dist/react/flow-waterfall.css

@@ -271,7 +271,7 @@
   left: min(calc(var(--x0) + max(var(--w), 3px) + 4px), calc(100% - var(--fw-end-w, 0px) - 4px)); padding: 0 4px; border-radius: var(--radius-tag);
   background: linear-gradient(var(--fw-tint, transparent) 0 0), var(--fw-surface); white-space: nowrap; pointer-events: none; }
 .fw-root .fw-outcome-end { display: inline-flex; pointer-events: auto; }
-.fw-root .fw-duration { font-size: 14px; color: var(--fw-muted); font-variant-numeric: tabular-nums; }
+.fw-root .fw-duration { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; 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 { display: inline-flex; flex: none; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); font-size: 12px; line-height: 18px; font-weight: 500; color: var(--fw-muted); background: transparent; box-shadow: inset 0 0 0 1px var(--fw-border); }
 
@@ -416,7 +416,7 @@
   .fw-root .fw-view-agents :is(.fw-subtitle, .fw-seg-label) { display: none; }
   .fw-root .fw-view-agents .fw-label { padding-left: calc(8px + var(--depth) * 12px); }
   .fw-root .fw-lane { grid-column: 2; }
-  .fw-root .fw-end { top: 20px; height: 18px; left: auto; right: 4px; }
+  .fw-root .fw-end { top: 20px; height: 18px; left: auto; right: 4px; max-width: calc(100% - 144px); }
   .fw-root .fw-time { display: block; grid-column: 2; position: absolute; top: -12px; left: var(--fw-progress); transform: translateX(calc(-1 * var(--fw-progress))); width: max-content; max-width: 100%; background: var(--fw-surface); }
   .fw-root .fw-playback { position: relative; padding: 12px 8px 8px; }
   .fw-root .fw-overview { margin-top: 12px; grid-template-columns: 0 minmax(0, 1fr); column-gap: 0; }

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, n as FlowOutcome, 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-CF4Q07cA.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, n as FlowOutcome, 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-VOGEAdl8.js";
 import { CSSProperties, ReactElement, ReactNode } from "react";
 //#region src/react/sparkline.d.ts
 type SparklineDirection = "rising" | "falling" | "flat";
@@ -223,7 +223,11 @@ interface MeterSegment {
 }
 /** A used-of-total meter with its numbers. With `segments` it is a part-of-whole bar: the remainder of `total` that no
  * segment accounts for is drawn hatched and labelled `untraced`, and a missing total hatches the whole track. */
-export declare function Meter({ used, total, format, tone, text, segments, untraced }: {
+export declare function Meter({ used, total, format, tone, text, segments, steps, untraced }: {
+  steps?: {
+    label: string;
+    state: 'pass' | 'fail' | 'undecided' | 'unrun';
+  }[];
   used?: number | null | undefined;
   total: number | null | undefined;
   format?: (v: number) => string;
@@ -260,7 +264,11 @@ export declare function Events({ at, from, to, label, color, ticks, axis, time }
  * state; hovering a span names it, its state and its span. Times are epoch ms; `axis` labels the time axis.
  * `lanes` give a row several spans (the same shape as the static `timeline`); a span with `end: null` is open and runs
  * to `now`. `marks` draw recorded events across every lane, and states in `hatch` are drawn hatched (no data). */
-export declare function Gantt({ rows, lanes: laneInput, colors, axis, span, marks, now, hatch }: {
+export declare function Gantt({ rows, lanes: laneInput, colors, axis, span, marks, now, hatch, selectedId, onSelect, bestMark, maxHeight }: {
+  selectedId?: string;
+  onSelect?: (id: string) => void;
+  bestMark?: string;
+  maxHeight?: number;
   rows?: {
     label: string;
     start: number;

package/dist/react/index.js

@@ -1385,7 +1385,19 @@ const SEGMENT_TONES = [
 ];
 /** A used-of-total meter with its numbers. With `segments` it is a part-of-whole bar: the remainder of `total` that no
 * segment accounts for is drawn hatched and labelled `untraced`, and a missing total hatches the whole track. */
-function Meter({ used, total, format = formatCompact, tone, text, segments, untraced = "untraced" }) {
+function Meter({ used, total, format = formatCompact, tone, text, segments, steps, untraced = "untraced" }) {
+	if (steps) {
+		const current = steps.findIndex((step) => step.state !== "pass");
+		return /* @__PURE__ */ jsx("ol", {
+			className: "ov-meter-steps",
+			"aria-label": text ?? "Check steps",
+			children: steps.map((step, i) => /* @__PURE__ */ jsxs("li", {
+				"data-state": step.state,
+				"aria-current": i === current ? "step" : void 0,
+				children: [/* @__PURE__ */ jsx("strong", { children: i + 1 }), /* @__PURE__ */ jsx("span", { children: step.label })]
+			}, i))
+		});
+	}
 	if (segments) return /* @__PURE__ */ jsx(SegmentMeter, {
 		segments,
 		total,
@@ -1586,9 +1598,11 @@ function Events({ at, from, to, label, color = LIVE_SERIES[0], ticks = 7, axis =
 * state; hovering a span names it, its state and its span. Times are epoch ms; `axis` labels the time axis.
 * `lanes` give a row several spans (the same shape as the static `timeline`); a span with `end: null` is open and runs
 * to `now`. `marks` draw recorded events across every lane, and states in `hatch` are drawn hatched (no data). */
-function Gantt({ rows, lanes: laneInput, colors, axis, span, marks = [], now, hatch = ["missing", "untraced"] }) {
+function Gantt({ rows, lanes: laneInput, colors, axis, span, marks = [], now, hatch = ["missing", "untraced"], selectedId, onSelect, bestMark, maxHeight }) {
 	const [ref, width, em] = useWidth();
 	const [tip, setTip] = useState(null);
+	const scroller = useRef(null);
+	const [scrollTop, setScrollTop] = useState(0);
 	const lanes = laneInput ?? (rows ?? []).map((row, i) => ({
 		id: `${row.label}-${i}`,
 		label: row.label,
@@ -1612,9 +1626,21 @@ function Gantt({ rows, lanes: laneInput, colors, axis, span, marks = [], now, ha
 		children: "No agent has started."
 	});
 	const ends = (s) => s.end ?? now;
-	const rowH = Math.round(1.25 * em);
-	const labelW = Math.min(Math.round(13 * em), Math.round(width * .32));
-	const top = marks.length ? 4 + Math.round(Math.min(3, marks.length) * em + .3 * em) : 4;
+	const phone = width < 600;
+	const rowH = Math.round((phone ? 2.8 : 2.2) * em);
+	const labelW = phone ? 8 : Math.min(Math.round(16 * em), Math.round(width * .28));
+	const top = maxHeight ? 4 : marks.length ? 48 : 8;
+	const fractions = phone ? [
+		0,
+		.5,
+		1
+	] : [
+		0,
+		.25,
+		.5,
+		.75,
+		1
+	];
 	const bottom = Math.round(1.8 * em);
 	const height = top + lanes.length * rowH + bottom;
 	const times = [
@@ -1629,131 +1655,233 @@ function Gantt({ rows, lanes: laneInput, colors, axis, span, marks = [], now, ha
 	const fallback = colors.unknown ?? "var(--chart-live-faint, var(--chart-muted))";
 	const hatched = new Set(hatch);
 	const plotBottom = top + lanes.length * rowH;
+	const first = maxHeight && lanes.length > 100 ? Math.max(0, Math.floor((scrollTop - top) / rowH) - 6) : 0;
+	const visible = maxHeight && lanes.length > 100 ? lanes.slice(first, first + Math.ceil(maxHeight / rowH) + 14) : lanes;
+	const select = (id) => onSelect?.(id);
+	const focusLane = (index) => {
+		const at = Math.max(0, Math.min(lanes.length - 1, index));
+		const position = at === 0 ? 0 : top + at * rowH - rowH;
+		if (scroller.current) scroller.current.scrollTop = position;
+		setScrollTop(Math.max(0, position));
+		requestAnimationFrame(() => scroller.current?.querySelector(`[data-lane-index="${at}"]`)?.focus());
+	};
+	const tipY = (y) => Math.max(0, y - (maxHeight ? scrollTop - 52 : 0) - em);
+	const tipX = (x) => Math.max(0, Math.min(x + 8, width - Math.min(240, width)));
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: "ov-plot",
+		className: "ov-plot ov-gantt",
+		"data-featured": bestMark ? true : void 0,
 		onMouseLeave: () => setTip(null),
 		children: [
-			width > 0 && /* @__PURE__ */ jsxs("svg", {
+			maxHeight && width > 0 && /* @__PURE__ */ jsxs("svg", {
 				width,
-				height,
-				role: "img",
-				"aria-label": `${lanes.length} ${laneInput ? "lanes" : "agents"} over time`,
-				children: [
-					[
-						0,
-						.25,
-						.5,
-						.75,
-						1
-					].map((f) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
-						x1: labelW + f * plotW,
-						x2: labelW + f * plotW,
-						y1: top,
-						y2: plotBottom,
-						className: "ov-gridline"
-					}), /* @__PURE__ */ jsx("text", {
-						x: labelW + f * plotW,
-						y: height - em * .35,
-						className: "ov-axis",
-						textAnchor: f === 0 ? "start" : f === 1 ? "end" : "middle",
-						children: axis(t0 + f * (t1 - t0))
-					})] }, f)),
-					lanes.map((lane, i) => {
-						const y = top + i * rowH;
-						return /* @__PURE__ */ jsxs("g", {
-							"data-lane": lane.id,
-							children: [
-								/* @__PURE__ */ jsx("rect", {
-									x: 0,
-									y,
-									width,
-									height: rowH,
-									fill: "transparent",
-									onMouseEnter: () => setTip({
-										x: Math.min(x(ends(lane.spans.at(-1) ?? { end: t1 })) + 8, width - em * 16),
-										y: Math.max(0, y - em),
-										title: lane.label,
-										lines: lane.spans.flatMap((s) => [{
-											label: s.end === null ? `${s.state} (open)` : s.state,
-											value: span(s.start, ends(s)),
-											color: hatched.has(s.state) ? void 0 : colors[s.state] ?? fallback
-										}, ...s.note ? [{
-											label: s.note,
-											value: ""
-										}] : []])
-									})
-								}),
-								/* @__PURE__ */ jsx("text", {
-									x: labelW - em * .5,
-									y: y + rowH / 2,
-									dominantBaseline: "middle",
-									textAnchor: "end",
-									className: "ov-axis ov-gantt-label",
-									children: lane.label.length > 26 ? `${lane.label.slice(0, 25)}…` : lane.label
-								}),
-								lane.spans.map((s, j) => {
-									const color = colors[s.state] ?? fallback;
-									const bx = x(s.start), bw = Math.max(2, x(ends(s)) - bx), by = y + rowH * .18, bh = rowH * .64;
-									const open = s.end === null;
-									return /* @__PURE__ */ jsx("g", {
-										"data-state": s.state,
-										"data-open": open ? "true" : void 0,
-										"data-hatched": hatched.has(s.state) ? "true" : void 0,
+				height: 52,
+				"aria-label": "Releases and time axis",
+				children: [marks.map((mark, i) => /* @__PURE__ */ jsxs("g", {
+					"data-best": mark.label === bestMark || void 0,
+					children: [/* @__PURE__ */ jsx(Mark, {
+						mark,
+						x: x(mark.at),
+						top: 10,
+						bottom: 28,
+						row: 0,
+						em,
+						flip: x(mark.at) > width * .62
+					}), mark.label === bestMark && /* @__PURE__ */ jsx("circle", {
+						cx: x(mark.at),
+						cy: 14,
+						r: 8,
+						fill: "none",
+						stroke: "var(--accent-text)",
+						strokeWidth: 2
+					})]
+				}, i)), fractions.map((f) => /* @__PURE__ */ jsx("text", {
+					x: labelW + f * plotW,
+					y: 46,
+					className: "ov-axis",
+					textAnchor: f === 0 ? "start" : f === 1 ? "end" : "middle",
+					children: axis(t0 + f * (t1 - t0))
+				}, f))]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: scroller,
+				className: "ov-gantt-scroll",
+				style: {
+					maxHeight,
+					overflow: maxHeight ? "auto" : void 0
+				},
+				onScroll: (event) => {
+					setScrollTop(event.currentTarget.scrollTop);
+					setTip(null);
+				},
+				children: width > 0 && /* @__PURE__ */ jsxs("svg", {
+					width,
+					height,
+					role: onSelect ? "group" : "img",
+					"aria-label": `${lanes.length} ${laneInput ? "lanes" : "agents"} over time`,
+					children: [
+						fractions.map((f) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+							x1: labelW + f * plotW,
+							x2: labelW + f * plotW,
+							y1: top,
+							y2: plotBottom,
+							className: "ov-gridline"
+						}), !maxHeight && /* @__PURE__ */ jsx("text", {
+							x: labelW + f * plotW,
+							y: height - em * .35,
+							className: "ov-axis",
+							textAnchor: f === 0 ? "start" : f === 1 ? "end" : "middle",
+							children: axis(t0 + f * (t1 - t0))
+						})] }, f)),
+						visible.map((lane, offset) => {
+							const i = first + offset, y = top + i * rowH;
+							return /* @__PURE__ */ jsxs("g", {
+								"data-lane": lane.id,
+								"data-lane-index": i,
+								role: onSelect ? "button" : void 0,
+								tabIndex: onSelect ? 0 : void 0,
+								"aria-label": lane.label,
+								"aria-pressed": onSelect ? selectedId === lane.id : void 0,
+								onClick: () => select(lane.id),
+								onKeyDown: (event) => {
+									if (event.key === "Enter" || event.key === " ") {
+										event.preventDefault();
+										select(lane.id);
+									}
+									const next = {
+										ArrowDown: i + 1,
+										ArrowUp: i - 1,
+										Home: 0,
+										End: lanes.length - 1
+									}[event.key];
+									if (next !== void 0) {
+										event.preventDefault();
+										focusLane(next);
+									}
+								},
+								children: [
+									selectedId === lane.id && /* @__PURE__ */ jsx("rect", {
+										x: 0,
+										y,
+										width,
+										height: rowH,
+										fill: "var(--ix-sel-bg)",
+										rx: 4
+									}),
+									/* @__PURE__ */ jsx("rect", {
+										x: 0,
+										y,
+										width,
+										height: rowH,
+										fill: "transparent",
 										onMouseEnter: () => setTip({
-											x: Math.min(bx + bw + 8, width - em * 16),
-											y: Math.max(0, y - em),
+											x: tipX(x(ends(lane.spans.at(-1) ?? { end: t1 }))),
+											y: tipY(y),
 											title: lane.label,
-											lines: [{
-												label: open ? `${s.state} (open)` : s.state,
+											lines: lane.spans.flatMap((s) => [{
+												label: s.end === null ? `${s.state} (open)` : s.state,
 												value: span(s.start, ends(s)),
-												color: hatched.has(s.state) ? void 0 : color
+												color: hatched.has(s.state) ? void 0 : colors[s.state] ?? fallback
 											}, ...s.note ? [{
 												label: s.note,
 												value: ""
-											}] : []]
-										}),
-										children: hatched.has(s.state) ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
-											x: bx,
-											y: by,
-											width: bw,
-											height: bh,
-											className: "ov-hatch-bg"
-										}), /* @__PURE__ */ jsx("path", {
-											d: hatchPath(bx, by, bw, bh, 4),
-											className: "ov-hatch"
-										})] }) : /* @__PURE__ */ jsx("rect", {
-											x: bx,
-											y: by,
-											width: bw,
-											height: bh,
-											rx: 2,
-											fill: color,
-											className: open ? "ov-gantt-open" : void 0
+											}] : []])
 										})
-									}, j);
+									}),
+									/* @__PURE__ */ jsxs("text", {
+										x: phone ? 8 : labelW - em * .5,
+										y: phone ? y + 13 : y + rowH / 2,
+										dominantBaseline: "middle",
+										textAnchor: phone ? "start" : "end",
+										className: "ov-axis ov-gantt-label",
+										children: [/* @__PURE__ */ jsx("title", { children: lane.label }), lane.label.length > 26 ? `${lane.label.slice(0, 25)}…` : lane.label]
+									}),
+									lane.spans.map((s, j) => {
+										const color = colors[s.state] ?? fallback;
+										const bx = x(s.start), bw = Math.max(2, x(ends(s)) - bx), by = y + (phone ? 24 : rowH * .25), bh = rowH * .5;
+										const open = s.end === null;
+										return /* @__PURE__ */ jsx("g", {
+											"data-state": s.state,
+											"data-open": open ? "true" : void 0,
+											"data-hatched": hatched.has(s.state) ? "true" : void 0,
+											onMouseEnter: () => setTip({
+												x: tipX(bx + bw),
+												y: tipY(y),
+												title: lane.label,
+												lines: [{
+													label: open ? `${s.state} (open)` : s.state,
+													value: span(s.start, ends(s)),
+													color: hatched.has(s.state) ? void 0 : color
+												}, ...s.note ? [{
+													label: s.note,
+													value: ""
+												}] : []]
+											}),
+											children: hatched.has(s.state) ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+												x: bx,
+												y: by,
+												width: bw,
+												height: bh,
+												className: "ov-hatch-bg"
+											}), /* @__PURE__ */ jsx("path", {
+												d: hatchPath(bx, by, bw, bh, 4),
+												className: "ov-hatch"
+											})] }) : /* @__PURE__ */ jsx("rect", {
+												x: bx,
+												y: by,
+												width: bw,
+												height: bh,
+												rx: 2,
+												fill: color,
+												className: open ? "ov-gantt-open" : void 0
+											})
+										}, j);
+									})
+								]
+							}, lane.id);
+						}),
+						now !== void 0 && /* @__PURE__ */ jsx("line", {
+							x1: x(now),
+							x2: x(now),
+							y1: top,
+							y2: plotBottom,
+							className: "ov-now",
+							"data-now": "true"
+						}),
+						[...marks].sort((a, b) => a.at - b.at).map((mark, i) => /* @__PURE__ */ jsxs("g", {
+							className: mark.verdict ? `ov-verdict-${mark.verdict}` : void 0,
+							"data-best": mark.label === bestMark || void 0,
+							style: maxHeight ? { pointerEvents: "none" } : void 0,
+							children: [
+								maxHeight && /* @__PURE__ */ jsx("line", {
+									x1: x(mark.at),
+									x2: x(mark.at),
+									y1: top,
+									y2: plotBottom,
+									className: `ov-mark ov-mark-${mark.kind}`,
+									style: { opacity: mark.label === bestMark ? .8 : .3 }
+								}),
+								!maxHeight && /* @__PURE__ */ jsx(Mark, {
+									mark,
+									x: x(mark.at),
+									top: 4,
+									bottom: plotBottom,
+									row: i % 2,
+									em,
+									flip: x(mark.at) > labelW + plotW * .62
+								}),
+								!maxHeight && mark.label === bestMark && /* @__PURE__ */ jsx("circle", {
+									cx: x(mark.at),
+									cy: 4 + Math.max(3, em / 4),
+									r: 8,
+									fill: "none",
+									stroke: "var(--accent-text)",
+									strokeWidth: 2
 								})
 							]
-						}, lane.id);
-					}),
-					now !== void 0 && /* @__PURE__ */ jsx("line", {
-						x1: x(now),
-						x2: x(now),
-						y1: top,
-						y2: plotBottom,
-						className: "ov-now",
-						"data-now": "true"
-					}),
-					[...marks].sort((a, b) => a.at - b.at).map((mark, i) => /* @__PURE__ */ jsx(Mark, {
-						mark,
-						x: x(mark.at),
-						top: 4,
-						bottom: plotBottom,
-						row: i % 3,
-						em,
-						flip: x(mark.at) > labelW + plotW * .62
-					}, `mark-${i}`))
-				]
+						}, `mark-${i}`))
+					]
+				})
 			}),
 			/* @__PURE__ */ jsx(Tooltip, { tip }),
 			/* @__PURE__ */ jsx(EventList, {
@@ -6500,6 +6628,7 @@ const toolOf = (name) => name?.split(" · ")[0];
 const toneKey = (tone) => tone > 0 && tone <= 5 ? tone : 0;
 const spanFailed = (span) => span.status === "failed";
 const spanRunning = (span) => span.status === "running";
+const spanFact = (span, label) => new Map((span.facts ?? []).map((fact) => [fact.label.toLowerCase(), fact.value])).get(label.toLowerCase());
 const ordered = (span) => Number.isFinite(span.startMs) && Number.isFinite(span.endMs) && span.endMs >= span.startMs;
 /** 542ms, 6.9s, 23s, 1m 22s, 2h 05m: the precision a reader compares at each scale. */
 function formatSpanDuration(ms) {
@@ -6570,9 +6699,10 @@ function flowWaterfallRows(trace, resolutionMs) {
 			tone: state === "running" ? "live" : state === "done" ? "ok" : state === "needs-you" ? "warn" : state === "failed" ? "failed" : "neutral",
 			...state === "unknown" ? { ring: true } : {}
 		};
-		const span = recorded.outcome ? recorded : {
+		const span = {
 			...recorded,
-			outcome
+			outcome: recorded.outcome ?? outcome,
+			detail: spanFact(recorded, recorded.kind === "tool" ? "Provider" : "Model") ?? recorded.detail
 		};
 		return {
 			span,
@@ -6825,12 +6955,14 @@ function agentCallouts(agents, clockMs) {
 	for (const row of agents) {
 		if (row.durationLabel === "—" || row.span.startMs > clockMs || row.kind !== "pipeline" || row.hasAgents || row.id.startsWith("family:") || row.id.startsWith("run:")) continue;
 		const ms = (spanRunning(row.span) ? Math.max(row.span.endMs, clockMs) : Math.min(row.span.endMs, clockMs)) - row.span.startMs;
-		timed += 1;
-		if (ms > slowestMs) {
-			slowest = row;
-			slowestMs = ms;
+		if (spanFact(row.span, "Ran for") === void 0) {
+			timed += 1;
+			if (ms > slowestMs) {
+				slowest = row;
+				slowestMs = ms;
+			}
 		}
-		const cost = row.span.costUsd ?? row.rollupCostUsd;
+		const cost = spanFact(row.span, "Cost") === void 0 ? row.span.costUsd ?? row.rollupCostUsd : void 0;
 		if (typeof cost !== "number" || !Number.isFinite(cost)) continue;
 		priced += 1;
 		if (cost > top) {
@@ -6949,9 +7081,24 @@ function agentFamilies(agents, open) {
 		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 known = members.map((row) => row.span.costUsd ?? (spanFact(row.span, "Cost") === void 0 ? row.rollupCostUsd : void 0)).filter((cost) => cost !== void 0 && Number.isFinite(cost));
 		const failed = members.filter((row) => row.span.outcome ? row.span.outcome.tone === "failed" : !row.ok).length;
 		const outcome = members.every((row) => row.span.outcome && row.span.outcome.tone === members[0].span.outcome?.tone && !row.span.outcome.ring === !members[0].span.outcome?.ring) ? members[0].span.outcome : void 0;
+		const facts = members.flatMap((row) => (row.span.facts ?? []).filter(({ label }) => [
+			"model",
+			"model calls",
+			"tool calls",
+			"model latency",
+			"failures",
+			"retries"
+		].includes(label.toLowerCase()) || label.toLowerCase() === "tokens" && ![
+			row.span.promptTokens,
+			row.span.completionTokens,
+			row.span.cachedTokens
+		].some(Number.isFinite) || label.toLowerCase() === "cost" && known.length === 0)).map(({ label }) => ({
+			label,
+			value: "Not recorded"
+		}));
 		out.push({
 			costFloor: known.length < members.length || members.some((row) => row.costFloor),
 			id,
@@ -6992,7 +7139,8 @@ function agentFamilies(agents, open) {
 				activityAt: members.flatMap((row) => row.span.activityAt ?? row.own.flatMap((mark) => [mark.startMs, mark.endMs])),
 				status: running ? "running" : failed ? "failed" : "done",
 				...outcome ? { outcome } : {},
-				detail: members[0].span.detail,
+				detail: members.every((row) => row.span.detail === members[0].span.detail) ? members[0].span.detail : void 0,
+				facts,
 				meta: {
 					failedAgents: failed,
 					costPartial: known.length < members.length,
@@ -7025,13 +7173,17 @@ function agentSummary(row) {
 		const failed = row.own.filter((mark) => mark.kind === "failed").length;
 		return [failed ? `${failed} failed` : "all done"];
 	}
-	const calls = row.counts?.model ?? 0;
-	const tools = row.counts?.tool ?? 0;
-	return [
-		row.span.outcome?.label ?? (spanRunning(row.span) ? "running" : !row.ok ? "failed" : row.kind === "pipeline" ? "" : "done"),
-		calls ? `${calls} model ${calls === 1 ? "call" : "calls"}` : "",
-		tools ? `${tools} tool ${tools === 1 ? "call" : "calls"}` : ""
-	].filter(Boolean);
+	const facts = new Map((row.span.facts ?? []).map(({ label, value }) => [label.toLowerCase(), value]));
+	const calls = [[
+		"Model calls",
+		row.counts?.model,
+		"model"
+	], [
+		"Tool calls",
+		row.counts?.tool,
+		"tool"
+	]].map(([label, count, kind]) => facts.has(label.toLowerCase()) ? `${label}: ${facts.get(label.toLowerCase())}` : count ? `${count} ${kind} ${count === 1 ? "call" : "calls"}` : "");
+	return [row.span.outcome?.label ?? (spanRunning(row.span) ? "running" : !row.ok ? "failed" : row.kind === "pipeline" ? "" : "done"), ...calls].filter(Boolean);
 }
 /**
 * The agent view's rows: families folded until opened, and an opened agent's own steps (its turns and tool calls, not its
@@ -7115,7 +7267,7 @@ function drawnRow(row, visible) {
 	} : row;
 }
 /** A row's cost as printed: "≥" when it is a floor. */
-const rowCostText = (row, cost) => `${row.costFloor ? "≥" : ""}${formatCost(cost)}`;
+const rowCostText = (row, cost) => spanFact(row.span, "Cost") ?? (cost === void 0 ? "" : `${row.costFloor ? "≥" : ""}${formatCost(cost)}`);
 /** Quiet is elapsed silence beyond both five minutes and three median event gaps. */
 function quietActivity(row, now) {
 	const times = [...row.span.activityAt ?? row.own.flatMap((mark) => [mark.startMs, mark.endMs])].filter(Number.isFinite).sort((a, b) => a - b);
@@ -7346,8 +7498,8 @@ function metrics(row, clockMs, full) {
 	const restarts = span.marks?.filter((mark) => mark.kind === "restart").length ?? 0;
 	if (counts?.retried || restarts) out.push(["Retries", [counts?.retried ? plural(counts.retried, "step retried", "steps retried") : "", restarts ? plural(restarts, "restart") : ""].filter(Boolean).join(" · ")]);
 	if (full && row.hasChildren) out.push(["Steps", row.descendants.toLocaleString()]);
-	for (const fact of span.facts ?? []) if (!out.some(([label]) => label.toLowerCase() === fact.label.toLowerCase())) out.push([fact.label, fact.value]);
-	return out;
+	const facts = (span.facts ?? []).map(({ label, value }) => [label, value]);
+	return [...new Map([...out, ...facts].map((row) => [row[0].toLowerCase(), row])).values()];
 }
 function Table({ rows }) {
 	return /* @__PURE__ */ jsx("dl", {
@@ -7358,7 +7510,7 @@ function Table({ rows }) {
 /** The span card: what ran, for how long, on what tokens and at what recorded cost, then its input and output. */
 function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderIcon, compact }) {
 	const span = row.span;
-	const failure = span.facts?.find((fact) => fact.label.toLowerCase() === "failure")?.value;
+	const failure = spanFact(span, "Failure");
 	const state = runStatus(span.status ?? "unknown");
 	const meta = statusMeta(state);
 	const status = meta.label;
@@ -7572,11 +7724,8 @@ const open = (row, clockMs) => spanRunning(row.span) || row.span.startMs <= cloc
 function endLabel(row, clockMs) {
 	const span = row.span;
 	if (row.durationLabel === "—") return "—";
-	if (row.approx && span.endMs === span.startMs && !spanRunning(span)) return span.costUsd === void 0 ? "" : rowCostText(row, span.costUsd);
-	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} · ${rowCostText(row, cost)}`;
+	if (row.approx && span.endMs === span.startMs && !spanRunning(span)) return rowCostText(row, span.costUsd);
+	return [spanFact(span, "Ran for") ?? (!spanRunning(span) && clockMs < span.endMs ? `${formatSpanDuration(Math.max(0, clockMs - span.startMs))}${row.approx ? "~" : ""}` : spanRunning(span) ? `${formatSpanDuration(Math.max(span.endMs, clockMs) - span.startMs)}${row.approx ? "~" : ""}` : row.durationLabel), !spanRunning(span) && clockMs < span.endMs && spanFact(span, "Cost") === void 0 ? "" : rowCostText(row, span.costUsd ?? row.rollupCostUsd)].filter(Boolean).join(" · ");
 }
 /** 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) {
@@ -7826,6 +7975,7 @@ const FlowRow = memo(function FlowRow(props) {
 						})
 					}), /* @__PURE__ */ jsx("span", {
 						className: "fw-duration",
+						title: label,
 						children: label
 					})]
 				})
@@ -9301,7 +9451,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	const errorEnds = Array.from({ length: errors ?? 0 }, (_, index) => Number.isFinite(errorSpans[index]?.endMs) ? errorSpans[index].endMs : void 0);
 	const done = !isLive && !trace.spans.some(spanRunning);
 	const shown = (row) => row && drawnRow(row, visible);
-	const cardRow = shown(card ? byId.get(card.target) : void 0);
+	const cardRow = shown(card ? byId.get(card.target) ?? visible.find((row) => row.id === 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 shown(cursor);
 	})();

package/dist/react/live.css

@@ -97,3 +97,28 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 .ov-gap-stretch { fill: none; stroke: var(--chart-live-pass, #2f9e6e); stroke-width: 1; stroke-dasharray: 3 3; }
 .ov-gap-span { stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
 .ov-gap-value { cursor: default; }
+
+.ov-gantt { font: 14px/20px var(--font-sans, sans-serif); }
+.ov-gantt .ov-axis { fill: var(--chart-live-muted, var(--text-muted, #666)); font-size: 13px; }
+.ov-gantt .ov-mark-label { fill: var(--chart-live-fg, var(--text-primary, currentColor)); font-size: 13px; }
+.ov-gantt .ov-tip { background: var(--chart-live-raised, var(--bg-elevated, #fff)); border-color: var(--chart-live-border, var(--border-color, #aaa)); max-width: min(240px, 100%); box-sizing: border-box; }
+.ov-gantt-scroll { overscroll-behavior: contain; }
+.ov-gantt [role='button'] { cursor: pointer; outline: none; }
+.ov-gantt [role='button']:hover > rect:first-child { fill: var(--ix-hover-bg); }
+.ov-gantt [role='button']:focus-visible > rect:first-child { stroke: var(--accent-text); stroke-width: 2; }
+.ov-gantt [data-state] rect { transition: width var(--motion-stream), fill var(--motion-control); }
+.ov-gantt [data-open='true'] rect { animation: ov-gantt-live var(--motion-ambient) infinite; }
+.ov-gantt[data-featured] [data-mark] text { display: none; }
+.ov-gantt[data-featured] [data-best] text { display: block; }
+.ov-gantt[data-featured] .ov-events { display: none; }
+@keyframes ov-gantt-live { 50% { opacity: .55; } }
+@media (prefers-reduced-motion: reduce) { .ov-gantt [data-state] rect { transition: none; animation: none; } }
+
+.ov-meter-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; padding: 0; margin: 0; list-style: none; }
+.ov-meter-steps li { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 104px; padding: 16px; border-radius: var(--radius-lg); background: var(--bg-elevated); }
+.ov-meter-steps strong { font-size: 26px; line-height: 30px; }
+.ov-meter-steps [data-state='pass'] { background: var(--surface-success-bg); }
+.ov-meter-steps [aria-current='step'] { background: var(--surface-warning-bg); color: var(--surface-warning-text); }
+
+.ov-meter-steps span { overflow-wrap: anywhere; }
+@media (max-width: 720px) { .ov-meter-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ov-meter-steps li { padding: 12px; min-height: 94px; } }

package/package.json

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