@tangle-network/charts 1.0.2 → 2.0.1

package/README.md

@@ -6,6 +6,8 @@ The React entry also exports `DayBars`, `HBars`, `Histogram`, `Lines`, `Meter`,
 
 `FlowWaterfall` from `@tangle-network/charts/react` is the shared live trace inspector: an agent timeline (one row per agent, elbow handoffs, hatched waiting) and a virtualized span waterfall over one clock. It owns hierarchy layout, folding, search, playback, zoom, span cards and running-span growth. Producers own identity, `parentId`, explicit `status` and observed totals. Import `@tangle-network/charts/react/flow-waterfall.css`; its `fw-*` classes and six-field summary support hosts without a Tailwind build. Every color, radius and shadow in it is a Brand role (text, card, hairline, well, chart grid, status inks, the categorical tones for agents), so the host loads `@tangle-network/brand` `tokens.css` (or `legacy-light.css`) and sets its theme; the stylesheet has no color of its own. The React-free root exports the `FlowSpan` and `FlowTrace` types.
 
+`FlowWaterfall` accepts optional `graph` and `latestEvents` React nodes. Supplying `graph` adds Graph to its existing Agents/Steps view control, including `defaultView="graph"`. The trace clock and controlled selection survive switches. Graph hides waterfall-only controls; `latestEvents` stays mounted in the header across all views.
+
 `WaterfallHeader`, `WaterfallTimeAxis`, `WaterfallBar` and `WaterfallRow` remain available for existing consumers that own their own hierarchy and selection. All use the same `waterfallSpanGeometry` and `waterfallTicks`. Existing fixed-width cells, tones, formatting, attribution slots and unordered-time `—` marks are preserved. Optional fluid tracks, inner-bar colour/class, overlay and clipping fields support the shared inspector without changing existing calls. The primitives were extracted from Intelligence under [brand #211](https://github.com/tangle-network/brand/pull/211); the shared inspector extends that presentation ownership while leaving failure interpretation with producers.
 
 Five figures cover the decisions a benchmark reader makes:
@@ -337,7 +339,7 @@ const trace = otlpFlowTrace(spans, { price: catalogPrice(await (await fetch(cata
 
 `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.
 
-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. 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 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.
 
 `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.
 
@@ -350,3 +352,4 @@ CHARTS_REACT_VERSION=19 CHARTS_PROOF_DIR=/tmp/charts-react19 node scripts/charts
 ```
 
 Consumers: agent-record adapts record provenance; agent-app supplies application trace producers; Creative consumes both. Intelligence already uses the row/axis primitives with its controlled virtualized tree. Tangle Website’s `RecordedRunWaterfall` uses the Header/Row primitives; Blueprint Agent’s execution timeline is a separately owned follow-up. Keep these existing primitives exported. Agent-record’s earlier agent-app dependency increased its installed graph from 134 to 256 package versions (tangle-tools #1674); adopting the lower chart owner removes that framework dependency, with the actual new graph measured by the deployment owner.
+

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

@@ -391,8 +391,9 @@ interface FlowMarker {
 interface FlowTrace {
   spans: FlowSpan[];
   totalMs: number;
-  promptTokens: number;
-  completionTokens: number;
+  /** Recorded totals only; absent or invalid values remain unknown, including during playback. */
+  promptTokens?: number;
+  completionTokens?: number;
   /** Computed when per-token pricing is supplied. */
   costUsd?: number;
   /** `list`: priced from a model catalog's list prices, not a bill; the summary says so. */

package/dist/{timeline-B7c-cede.js → flow-trace-k097Ukvs.js}

@@ -1198,4 +1198,13 @@ function axisTicks(t0, t1, px, left, right, label) {
 	return fit([t0, t1]) ? [t0, t1] : [t0];
 }
 //#endregion
-export { titled as $, pct as A, usdTick as B, costText as C, intervalGap as D, estimateNote as E, rateOrder as F, hatchPath as G, MARKER_SHAPES as H, tierAtLeast as I, markerPath as J, hbar as K, tierSummary as L, pts as M, rateDataGap as N, intervalName as O, rateIntervalGap as P, text as Q, tierTotal as R, TIERS_BEST_FIRST as S, duration as T, circle as U, table as V, hatch as W, rect as X, polyline as Y, svgRoot as Z, groupRowHeight as _, OUTCOME_COLORS as a, plural as at, isRefusal as b, checkerColor as c, wrap as ct, MARK_VERDICTS as d, wideWidth as et, drawBands as f, eventsTable as g, eventsGap as h, ENDING_ORDER as i, listJoin as it, perPass as j, kn as k, EVENTS_READ as l, drawMarks as m, CHECKER_HUES as n, esc as nt, OUTCOME_ORDER as o, textBlock as ot, drawGroups as p, line as q, ENDING_COLORS as r, fitLines as rt, checkerClass as s, textWidth as st, timeline as t, capitalize as tt, MARK_HEADS as u, markLabelRows as v, drawable as w, METHOD_NAME as x, markName as y, usd as z };
+//#region src/flow-trace.ts
+/** Internal quantity boundaries shared by construction, aggregation and presentation. */
+const finiteNumber = (value) => typeof value === "number" && Number.isFinite(value) ? value : void 0;
+const reportedCount = (value) => typeof value === "number" && Number.isSafeInteger(value) && value >= 0 ? value : void 0;
+function sumReportedCounts(values) {
+	if (!values.length || values.some((value) => reportedCount(value) === void 0)) return void 0;
+	return reportedCount(values.reduce((sum, value) => sum + value, 0));
+}
+//#endregion
+export { rect as $, intervalGap as A, tierSummary as B, isRefusal as C, drawable as D, costText as E, pts as F, MARKER_SHAPES as G, usd as H, rateDataGap as I, hatchPath as J, circle as K, rateIntervalGap as L, kn as M, pct as N, duration as O, perPass as P, polyline as Q, rateOrder as R, markName as S, TIERS_BEST_FIRST as T, usdTick as U, tierTotal as V, table as W, line as X, hbar as Y, markerPath as Z, drawMarks as _, CHECKER_HUES as a, esc as at, groupRowHeight as b, OUTCOME_COLORS as c, plural as ct, checkerColor as d, wrap as dt, svgRoot as et, EVENTS_READ as f, drawGroups as g, drawBands as h, timeline as i, capitalize as it, intervalName as j, estimateNote as k, OUTCOME_ORDER as l, textBlock as lt, MARK_VERDICTS as m, reportedCount as n, titled as nt, ENDING_COLORS as o, fitLines as ot, MARK_HEADS as p, hatch as q, sumReportedCounts as r, wideWidth as rt, ENDING_ORDER as s, listJoin as st, finiteNumber as t, text as tt, checkerClass as u, textWidth as ut, eventsGap as v, METHOD_NAME as w, markLabelRows as x, eventsTable as y, tierAtLeast as z };

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

package/dist/index.js

@@ -1,4 +1,4 @@
-import { $ as titled, A as pct, B as usdTick, C as costText, D as intervalGap, E as estimateNote, F as rateOrder, H as MARKER_SHAPES, I as tierAtLeast, J as markerPath, K as hbar, L as tierSummary, M as pts, N as rateDataGap, O as intervalName, P as rateIntervalGap, Q as text, R as tierTotal, S as TIERS_BEST_FIRST, T as duration, U as circle, V as table, W as hatch, X as rect, Y as polyline, Z as svgRoot, _ as groupRowHeight, a as OUTCOME_COLORS, at as plural, b as isRefusal, c as checkerColor, ct as wrap, d as MARK_VERDICTS, et as wideWidth, f as drawBands, g as eventsTable, h as eventsGap, i as ENDING_ORDER, it as listJoin, j as perPass, k as kn, l as EVENTS_READ, m as drawMarks, n as CHECKER_HUES, nt as esc, o as OUTCOME_ORDER, ot as textBlock, p as drawGroups, q as line, r as ENDING_COLORS, rt as fitLines, s as checkerClass, st as textWidth, t as timeline, tt as capitalize, v as markLabelRows, w as drawable, x as METHOD_NAME, z as usd } from "./timeline-B7c-cede.js";
+import { $ as rect, A as intervalGap, B as tierSummary, C as isRefusal, D as drawable, E as costText, F as pts, G as MARKER_SHAPES, H as usd, I as rateDataGap, K as circle, L as rateIntervalGap, M as kn, N as pct, O as duration, P as perPass, Q as polyline, R as rateOrder, T as TIERS_BEST_FIRST, U as usdTick, V as tierTotal, W as table, X as line, Y as hbar, Z as markerPath, _ as drawMarks, a as CHECKER_HUES, at as esc, b as groupRowHeight, c as OUTCOME_COLORS, ct as plural, d as checkerColor, dt as wrap, et as svgRoot, f as EVENTS_READ, g as drawGroups, h as drawBands, i as timeline, it as capitalize, j as intervalName, k as estimateNote, l as OUTCOME_ORDER, lt as textBlock, m as MARK_VERDICTS, n as reportedCount, nt as titled, o as ENDING_COLORS, ot as fitLines, q as hatch, r as sumReportedCounts, rt as wideWidth, s as ENDING_ORDER, st as listJoin, t as finiteNumber, tt as text, u as checkerClass, ut as textWidth, v as eventsGap, w as METHOD_NAME, x as markLabelRows, y as eventsTable, z as tierAtLeast } from "./flow-trace-k097Ukvs.js";
 //#region src/block.ts
 /**
 * The figure block: one markup for every figure on every surface.
@@ -3349,8 +3349,9 @@ const CACHE_KEYS = [...CACHE_READ_KEYS, "gen_ai.usage.cache_creation_input_token
 function catalogPrice(catalog) {
 	const rates = /* @__PURE__ */ new Map();
 	for (const model of catalog.data ?? []) {
-		const input = Number(model.pricing?.prompt), output = Number(model.pricing?.completion);
-		if (model.id && Number.isFinite(input) && Number.isFinite(output)) rates.set(model.id, {
+		const rate = (value) => typeof value === "string" ? value.trim() ? finiteNumber(Number(value)) : void 0 : finiteNumber(value);
+		const input = rate(model.pricing?.prompt), output = rate(model.pricing?.completion);
+		if (model.id && input !== void 0 && output !== void 0) rates.set(model.id, {
 			input,
 			output
 		});
@@ -3391,7 +3392,6 @@ function parseOtlpJsonl(text) {
 	};
 }
 const str = (value) => typeof value === "string" && value ? value : void 0;
-const num = (value) => typeof value === "number" && Number.isFinite(value) ? value : void 0;
 const pick = (attributes, keys) => {
 	for (const key of keys) {
 		const value = str(attributes[key]);
@@ -3474,8 +3474,7 @@ function otlpFlowTrace(input, options = {}) {
 	const topModel = (key) => [...models.get(key)?.entries() ?? []].sort((a, b) => b[1] - a[1])[0]?.[0];
 	const out = [];
 	let omitted = 0;
-	let promptTokens = 0;
-	let completionTokens = 0;
+	const usage = [];
 	let toolCalls = 0;
 	let modelCalls = 0;
 	let errors = 0;
@@ -3530,9 +3529,9 @@ function otlpFlowTrace(input, options = {}) {
 		if (open) endMs = Math.max(endMs, last - origin);
 		const parentId = span.parent_span_id && byId.has(span.parent_span_id) ? span.parent_span_id : groupOf.has(span.span_id) ? `group:${groupOf.get(span.span_id)}` : void 0;
 		const model = pick(a, MODEL_KEYS);
-		const prompt = num(a["gen_ai.usage.input_tokens"]);
-		const completion = num(a["gen_ai.usage.output_tokens"]);
-		const cached = CACHE_READ_KEYS.map((key) => num(a[key])).find((n) => n !== void 0);
+		const prompt = reportedCount(a["gen_ai.usage.input_tokens"]);
+		const completion = reportedCount(a["gen_ai.usage.output_tokens"]);
+		const cached = CACHE_READ_KEYS.map((key) => reportedCount(a[key])).find((n) => n !== void 0);
 		let kind = span.kind === "LLM" ? "model" : span.kind === "TOOL" ? "tool" : "pipeline";
 		if (kind === "tool" && (a["traces.agent.spawn"] === true || spawnTarget.has(span.span_id) || handoffTo.has(span.span_id))) kind = "handoff";
 		let name = str(a["gen_ai.tool.name"]) ?? span.name;
@@ -3542,16 +3541,13 @@ function otlpFlowTrace(input, options = {}) {
 		if (kind === "model" && !aggregate) modelCalls++;
 		if (kind === "tool" || kind === "handoff") toolCalls++;
 		if (failed) errors++;
-		if (!aggregate) {
-			promptTokens += prompt ?? 0;
-			completionTokens += completion ?? 0;
-		}
-		const listPrice = kind === "model" && !aggregate && model && options.price && (prompt !== void 0 || completion !== void 0) ? options.price(model, prompt ?? 0, completion ?? 0) : void 0;
+		if (!aggregate && (kind === "model" || prompt !== void 0 || completion !== void 0)) usage.push([prompt, completion]);
+		const listPrice = finiteNumber(kind === "model" && !aggregate && model && options.price && prompt !== void 0 && completion !== void 0 ? options.price(model, prompt, completion) : void 0);
 		if (listPrice !== void 0) {
 			cost += listPrice;
 			priced++;
 			if (CACHE_KEYS.some((key) => a[key] !== void 0)) cacheSplit = true;
-		} else if (kind === "model" && !aggregate && (prompt || completion)) unpriced++;
+		} else if (kind === "model" && !aggregate) unpriced++;
 		out.push({
 			id: span.span_id,
 			...parentId ? { parentId } : {},
@@ -3559,6 +3555,7 @@ function otlpFlowTrace(input, options = {}) {
 			name,
 			startMs,
 			endMs,
+			...aggregate ? { meta: { "cli_bridge.usage.scope": "sum_of_children" } } : {},
 			status: open ? "running" : failed ? "failed" : "done",
 			...endMs === startMs && kind !== "pipeline" ? { approx: true } : {},
 			...isAgent(span) ? { detail: topModel(span.span_id) } : kind === "model" && model ? { detail: shortModel(model) } : {},
@@ -3573,8 +3570,8 @@ function otlpFlowTrace(input, options = {}) {
 	return {
 		spans: out,
 		totalMs: Number.isFinite(last - origin) ? last - origin : 0,
-		promptTokens,
-		completionTokens,
+		promptTokens: sumReportedCounts(usage.map(([value]) => value)),
+		completionTokens: sumReportedCounts(usage.map(([, value]) => value)),
 		toolCalls,
 		modelCalls,
 		errors,

package/dist/react/flow-waterfall.css

@@ -83,11 +83,13 @@
 .fw-root .fw-search-input::placeholder { color: var(--fw-muted); }
 .fw-root .fw-search-input::-webkit-search-cancel-button { display: none; }
 
-.fw-root .fw-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--fw-border); }
+.fw-root .fw-summary { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--fw-border); }
 .fw-root .fw-summary > div { padding: 12px 16px; min-width: 0; }
-.fw-root .fw-summary > div + div { border-left: 1px solid var(--fw-border); }
-.fw-root .fw-summary dt { font-size: 14px; line-height: 18px; color: var(--fw-muted); }
-.fw-root .fw-value { margin-top: 4px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.fw-root .fw-summary > div:nth-child(-n+2) { flex: 1; }
+.fw-root .fw-summary > div:nth-child(n+3) { display: flex; align-items: baseline; gap: 4px; padding: 8px 6px; color: var(--fw-muted); }
+.fw-root .fw-summary dt { font-size: 14px; line-height: 20px; color: var(--fw-muted); }
+.fw-root .fw-value { margin-top: 4px; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.fw-root .fw-summary > div:nth-child(n+3) .fw-value { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: normal; }
 .fw-root .fw-has-errors .fw-value { color: var(--fw-failed); }
 
 .fw-root .fw-axis { display: grid; grid-template-columns: var(--fw-label-col) minmax(0, 1fr); height: 32px; color: var(--fw-muted); font-size: 14px; }
@@ -203,7 +205,7 @@
 .fw-root :is(.fw-bar, .fw-seg):hover { filter: brightness(1.18); box-shadow: inset 0 0 0 1px var(--line), 0 0 0 2px color-mix(in oklab, var(--line) 55%, transparent); z-index: 1; }
 .fw-root .fw-bar.fw-k-tool { background: var(--dim); box-shadow: inset 0 0 0 1px var(--dim-line); }
 .fw-root .fw-bar.fw-k-handoff { background: var(--line); height: 8px; top: calc(50% + var(--fw-bar-shift) - 4px); box-shadow: none; }
-.fw-root .fw-bar.fw-k-waiting { background: repeating-linear-gradient(-45deg, var(--fw-hatch) 0 1px, transparent 1px 5px); box-shadow: inset 0 0 0 1px var(--fw-hatch); }
+.fw-root .fw-bar.fw-k-waiting, .fw-root .fw-kinds .fw-swatch-wait { background: repeating-linear-gradient(-45deg, var(--fw-hatch) 0 1px, transparent 1px 5px); box-shadow: inset 0 0 0 1px var(--fw-hatch); }
 .fw-root .fw-bar.fw-k-failed { background: color-mix(in oklab, var(--fw-failed) 22%, var(--fw-surface)); box-shadow: inset 0 0 0 1px var(--fw-failed); color: var(--fw-failed); }
 .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: repeating-linear-gradient(-45deg, var(--fw-hatch) 0 1px, transparent 1px 5px); box-shadow: inset 0 0 0 1px var(--fw-hatch); }
@@ -227,7 +229,7 @@
 .fw-root.fw-fill-agent .fw-kinds .fw-swatch-model { background: var(--model-fill); }
 .fw-root.fw-fill-agent .fw-kinds .fw-swatch-tool { background: var(--tool-fill); }
 .fw-root .fw-kinds .fw-swatch-tool { width: 12px; height: 8px; border-radius: 2px; background: var(--fw-kind-tool); }
-.fw-root .fw-kinds .fw-swatch-wait { width: 12px; height: 8px; border-radius: 2px; background: color-mix(in oklab, var(--fw-text) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-text) 18%, transparent); }
+.fw-root .fw-kinds .fw-swatch-wait { width: 12px; height: 8px; border-radius: 2px; }
 .fw-root .fw-kinds .fw-swatch-event { width: 8px; height: 8px; border-radius: 50%; background: var(--fw-muted); box-shadow: 0 0 0 2px var(--fw-surface); }
 .fw-root .fw-kinds .fw-swatch-handoff { width: 10px; height: 8px; border-left: 1.5px solid var(--fw-muted); border-bottom: 1.5px solid var(--fw-muted); border-bottom-left-radius: 3px; }
 .fw-root .fw-description { margin: 0; color: var(--fw-muted); font-size: 14px; line-height: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -384,10 +386,7 @@
 .fw-root .fw-card .fw-agent-dot:not([data-outcome]) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fw-muted); }
 @container flow-waterfall (max-width: 599px) {
   .fw-root > * { --fw-label-col: 0px; --fw-bar-shift: 8px; --fw-bar-h: 8px; --fw-row-h: 44px; }
-  .fw-root .fw-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-  .fw-root .fw-summary > div { padding: 8px; }
-  .fw-root .fw-summary > div:nth-child(4) { border-left: 0; }
-  .fw-root .fw-summary > div:nth-child(n+4) { border-top: 1px solid var(--fw-border); }
+  .fw-root .fw-summary > div:nth-child(-n+2) { flex-basis: 50%; padding: 6px 8px; }
   .fw-root :is(.fw-zoom, .fw-branch-controls, .fw-resize, .fw-links, .fw-gridlayer, .fw-marker-layer, .fw-subtitle, .fw-badge, .fw-icon-tile) { display: none; }
   .fw-root .fw-row-state { display: inline; }
   .fw-root .fw-key > summary { display: flex; align-items: center; min-height: 32px; cursor: pointer; }
@@ -396,6 +395,8 @@
   .fw-root .fw-title-line { flex-wrap: wrap; }
   .fw-root .fw-search-input { width: 120px; }
   .fw-root .fw-axis-label { border: 0; padding: 0; }
+  .fw-root .fw-tick:is(:nth-child(2), :nth-child(3)) { transform: translate(-50%, -50%); }
+  .fw-root .fw-tick:nth-child(4) { transform: translate(calc(-100% - 4px), -50%); }
   .fw-root .fw-row { transform: none; top: var(--row-y); contain: style; }
   .fw-root .fw-label { position: absolute; z-index: 3; height: 20px; top: 0; left: 0; right: 0; padding: 0 calc(var(--fw-end-w, 0px) + 8px) 0 calc(8px + var(--depth) * 12px); border: 0; gap: 4px; background: transparent; pointer-events: none; }
   .fw-root .fw-view-agents .fw-names { flex-direction: row; font-size: 14px; line-height: 20px; }
@@ -404,12 +405,11 @@
   .fw-root .fw-lane { grid-column: 2; }
   .fw-root .fw-end { top: 0; height: 20px; left: auto; right: 4px; }
   .fw-root .fw-duration { font-size: 12px; }
-  .fw-root .fw-time { display: block; position: absolute; top: -12px; left: clamp(0px, var(--fw-progress), calc(100% - 48px)); background: var(--fw-surface); }
+  .fw-root .fw-time { display: block; position: absolute; top: -12px; left: var(--fw-progress); transform: translateX(calc(-1 * var(--fw-progress))); width: max-content; max-width: 100%; white-space: nowrap; background: var(--fw-surface); }
   .fw-root .fw-playback { position: relative; padding: 12px 8px 8px; }
   .fw-root .fw-overview { margin-top: 12px; }
 }
 
-@container flow-waterfall (max-width: 599px) { .fw-root .fw-tick:nth-child(4) { transform: translate(calc(-100% - 4px), -50%); } }
 
 .fw-root.fw-fill-agent .fw-view-agents .fw-seg-failed[data-model] { background: var(--model-fill); --fw-seg-ink: light-dark(var(--fw-surface), var(--bg-root)); }
 

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-CKk85dAV.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-CF4Q07cA.js";
 import { CSSProperties, ReactElement, ReactNode } from "react";
 //#region src/react/sparkline.d.ts
 type SparklineDirection = "rising" | "falling" | "flat";
@@ -459,7 +459,7 @@ export declare function flowWaterfallRows(trace: FlowTrace, resolutionMs?: numbe
 export declare function criticalPathIds(rows: readonly FlowWaterfallRow[]): ReadonlySet<string>;
 //#endregion
 //#region src/react/flow-waterfall-row.d.ts
-type FlowView = 'spans' | 'agents';
+type FlowView = 'spans' | 'agents' | 'graph';
 //#endregion
 //#region src/react/flow-waterfall-time.d.ts
 interface ViewWindow {
@@ -480,6 +480,10 @@ interface FlowWaterfallProps {
   defaultCollapsed?: boolean;
   /** `agents` shows one row per agent (the agent timeline); expanding a row opens the full span tree. */
   defaultView?: FlowView;
+  /** Host graph rendered by the same view control, retaining the trace clock and selection. */
+  graph?: ReactNode;
+  /** Shared header feed, kept mounted across Agents, Steps and Graph. */
+  latestEvents?: ReactNode;
   /** 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. Defaults to 20 agent rows, or 640 px of steps. */
@@ -519,7 +523,7 @@ interface FlowWaterfallProps {
 }
 /** Shared trace inspector: the agent timeline and the span waterfall over one clock.
  * Data remains producer-owned; playback, zoom and folding change presentation only. */
-export declare function FlowWaterfall({ trace, live, startedAt, label, defaultCollapsed, defaultView, renderIcon, maxHeight, onSelect, markers, onTimeChange, agentFill: fillProp, selectedId, onDeselect, description, summary: showSummary, criticalPath, query: queryProp, onQueryChange, collapsed: collapsedProp, onCollapsedChange, zoom: zoomProp, onZoomChange, matchSpan }: FlowWaterfallProps): import("react").JSX.Element;
+export declare function FlowWaterfall({ trace, live, startedAt, label, defaultCollapsed, defaultView, graph, latestEvents, 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
 //#region src/react/flow-waterfall-icons.d.ts
 /** Kind glyphs drawn when the host supplies no `renderIcon`. Brand marks belong to the host. */

package/dist/react/index.js

@@ -1,4 +1,4 @@
-import { G as hatchPath, J as markerPath, T as duration, b as isRefusal, h as eventsGap, t as timeline, u as MARK_HEADS, y as markName } from "../timeline-B7c-cede.js";
+import { C as isRefusal, J as hatchPath, O as duration, S as markName, Z as markerPath, i as timeline, n as reportedCount, p as MARK_HEADS, r as sumReportedCounts, t as finiteNumber, v as eventsGap } from "../flow-trace-k097Ukvs.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, createContext, createElement, forwardRef, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 //#region src/react/sparkline.tsx
@@ -6515,12 +6515,14 @@ function formatSpanDuration(ms) {
 }
 /** $0.12, $0.005, $12.40; never rounds a recorded nonzero cost to $0.00. */
 function formatCost(usd) {
+	if (finiteNumber(usd) === void 0) return "—";
 	if (usd === 0) return "$0.00";
 	if (usd < .01) return `$${usd.toPrecision(1).replace(/0+$/, "")}`;
 	return `$${usd.toFixed(2)}`;
 }
 /** 9.8k, 754.4k, 1.2M with the exact count left to a title. */
 function formatCount(n) {
+	if (reportedCount(n) === void 0) return "—";
 	if (n < 1e3) return String(n);
 	if (n < 1e6) return `${(n / 1e3).toFixed(1)}K`;
 	return `${(n / 1e6).toFixed(1)}M`;
@@ -6646,9 +6648,9 @@ function flowWaterfallRows(trace, resolutionMs) {
 		}
 		Object.assign(row, stepStats(kids));
 		const tokens = own ? {
-			prompt: row.span.promptTokens,
-			completion: row.span.completionTokens,
-			cached: row.span.cachedTokens
+			prompt: reportedCount(row.span.promptTokens),
+			completion: reportedCount(row.span.completionTokens),
+			cached: reportedCount(row.span.cachedTokens)
 		} : sumTokens(kids);
 		if (tokens) row.tokens = tokens;
 		if (row.hasChildren && costKnown) row.rollupCostUsd = cost;
@@ -6721,13 +6723,14 @@ function mergeStats(rows) {
 }
 function sumTokens(rows) {
 	let out;
-	for (const row of rows) for (const key of [
+	const sources = rows.filter((row) => row.kind === "model" || row.tokens !== void 0);
+	for (const key of [
 		"prompt",
 		"completion",
 		"cached"
 	]) {
-		const n = row.tokens?.[key];
-		if (n !== void 0) (out ??= {})[key] = (out[key] ?? 0) + n;
+		const total = sumReportedCounts(sources.map((row) => row.tokens?.[key]));
+		if (total !== void 0) (out ??= {})[key] = total;
 	}
 	return out;
 }
@@ -6851,39 +6854,40 @@ function busyMs(row, clockMs) {
 	}
 	return total;
 }
-/** Totals as of a playback position, from per-span records. A total the spans do not carry stays the trace's own. */
+/** Complete per-span usage drives playback; authoritative call/error counts remain trace totals. */
 function totalsAt(trace, clockMs) {
-	let cost = 0, tokens = 0, models = 0, tools = 0, errors = 0;
+	let cost = 0;
 	let costs = false, counted = false;
+	const tokens = [];
 	for (const span of trace.spans) {
 		if (span.startMs > clockMs) continue;
-		if (span.kind === "model") models++;
-		if (span.kind === "tool") tools++;
+		const aggregate = span.meta?.["cli_bridge.usage.scope"] === "sum_of_children";
 		if (span.endMs > clockMs) continue;
-		if (spanFailed(span)) errors++;
 		if (span.costUsd !== void 0) {
 			cost += span.costUsd;
 			costs = true;
 		}
-		if (span.promptTokens !== void 0 || span.completionTokens !== void 0) {
-			tokens += (span.promptTokens ?? 0) + (span.completionTokens ?? 0);
-			counted = true;
+		if (!aggregate && (span.kind === "model" || span.promptTokens !== void 0 || span.completionTokens !== void 0)) {
+			tokens.push(sumReportedCounts([span.promptTokens, span.completionTokens]));
+			counted ||= span.promptTokens !== void 0 || span.completionTokens !== void 0;
 		}
 	}
 	return {
 		costUsd: trace.costUsd === void 0 ? void 0 : costs ? cost : trace.costUsd,
-		tokens: counted ? tokens : trace.promptTokens + trace.completionTokens,
-		modelCalls: trace.modelCalls === void 0 ? void 0 : models,
-		toolCalls: trace.toolCalls === void 0 ? void 0 : tools,
-		errors
+		tokens: counted ? sumReportedCounts(tokens) : sumReportedCounts([trace.promptTokens, trace.completionTokens]),
+		modelCalls: reportedCount(trace.modelCalls),
+		toolCalls: reportedCount(trace.toolCalls),
+		errors: reportedCount(trace.errors)
 	};
 }
 /** The cost a reader can rely on: a lower bound when some calls are unpriced, a dash only when nothing is priced. */
 function costSummary(costUsd, trace) {
+	costUsd = finiteNumber(costUsd);
+	const billedUsd = finiteNumber(trace.billedUsd);
 	const list = trace.costBasis === "list";
 	const label = list ? "Cost · list price" : "Cost";
-	if (costUsd === void 0) return trace.billedUsd !== void 0 ? {
-		value: `${formatCost(trace.billedUsd)} billed`,
+	if (costUsd === void 0) return billedUsd !== void 0 ? {
+		value: `${formatCost(billedUsd)} billed`,
 		title: "No list price for these calls; billed is the seat charge",
 		label
 	} : {
@@ -6895,13 +6899,13 @@ function costSummary(costUsd, trace) {
 	const partial = coverage !== void 0 && coverage.priced < coverage.total;
 	const upper = !partial && trace.costBound === "upper";
 	return {
-		value: `${partial || trace.costBound === "lower" ? "≥" : upper ? "≤" : list ? "≈" : ""}${formatCost(costUsd)}${trace.billedUsd !== void 0 ? ` · ${formatCost(trace.billedUsd)} billed` : ""}`,
+		value: `${partial || trace.costBound === "lower" ? "≥" : upper ? "≤" : list ? "≈" : ""}${formatCost(costUsd)}${billedUsd !== void 0 ? ` · ${formatCost(billedUsd)} billed` : ""}`,
 		title: [
 			partial ? `${coverage.priced} of ${coverage.total} model calls priced` : coverage ? `all ${coverage.total} model calls priced` : "",
 			list ? "at the model catalog list price; not a bill" : "",
 			upper ? "cached input is not split out, so it is priced as fresh input: at most this" : "",
 			trace.costBound === "lower" ? "a floor: the producer reports at least this" : "",
-			trace.billedUsd !== void 0 ? `billed ${formatCost(trace.billedUsd)} (the seat charge)` : ""
+			billedUsd !== void 0 ? `billed ${formatCost(billedUsd)} (the seat charge)` : ""
 		].filter(Boolean).join("; "),
 		label
 	};
@@ -6930,10 +6934,15 @@ function agentFamilies(agents, open) {
 	const hue = (row) => row.tone <= 0 || ++next > 5 ? 0 : 1 + [...roleOf(row.name)].reduce((hash, c) => hash * 31 + c.charCodeAt(0) >>> 0, 0) % 5;
 	for (const [role, members] of groups) {
 		if (members.length < 2) {
-			out.push(...members.map((row) => ({
+			const row = members[0], tone = hue(row);
+			out.push({
 				...row,
-				tone: hue(row)
-			})));
+				tone,
+				own: row.own.map((mark) => ({
+					...mark,
+					tone
+				}))
+			});
 			continue;
 		}
 		const tone = hue(members[0]);
@@ -7315,9 +7324,12 @@ function metrics(row, clockMs, full) {
 			["completion", "out"],
 			["cached", "cached"]
 		].flatMap(([key, unit]) => tokens[key] === void 0 ? [] : [count(tokens[key], unit)]);
-		out.push(["Tokens", /* @__PURE__ */ jsx("span", {
+		out.push(["Tokens", parts.length ? /* @__PURE__ */ jsx("span", {
 			className: `fw-card-parts${parts.length > 2 ? " fw-card-stack" : ""}`,
 			children: parts.map((part, i) => /* @__PURE__ */ jsx("span", { children: part }, i))
+		}) : /* @__PURE__ */ jsx("span", {
+			title: "Tokens not reported",
+			children: "—"
 		})]);
 	}
 	const latency = row.modelMs;
@@ -7953,7 +7965,8 @@ function clampWindow(view, limitMs) {
 //#region src/react/flow-waterfall-body.tsx
 const ROW_HEIGHT = {
 	spans: 36,
-	agents: 40
+	agents: 40,
+	graph: 40
 };
 const OVERSCAN = 8;
 /** Rows re-render once per CHUNK rows scrolled; overscan covers the rows in between. */
@@ -8683,11 +8696,13 @@ const AGENT_ROWS = 20;
 const UNFOLD_ROWS = 12;
 const END_LABEL_GUTTER = {
 	spans: 120,
-	agents: 176
+	agents: 176,
+	graph: 176
 };
 const NAME_WIDTH = {
 	spans: 320,
-	agents: 240
+	agents: 240,
+	graph: 240
 };
 /** State the host may own: its value wins when given, and every change is reported either way. */
 function useHostable(value, onChange, initial) {
@@ -8716,36 +8731,42 @@ function usual(values) {
 /** 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);
-	const tokens = at ? at.tokens : trace.promptTokens + trace.completionTokens;
-	const modelCalls = at ? at.modelCalls : trace.modelCalls;
-	const errors = at ? at.errors : trace.errors ?? (trace.spans.filter((span) => spanFailed(span) && span.kind !== "pipeline").length || trace.spans.filter(spanFailed).length);
+	const tokens = at ? at.tokens : sumReportedCounts([trace.promptTokens, trace.completionTokens]);
+	const modelCalls = reportedCount(at ? at.modelCalls : trace.modelCalls);
+	const toolCalls = reportedCount(at ? at.toolCalls : trace.toolCalls);
+	const observedErrors = trace.spans.filter((span) => spanFailed(span) && span.kind !== "pipeline").length || trace.spans.filter(spanFailed).length;
+	const errors = at ? at.errors : trace.errors === void 0 ? observedErrors || void 0 : reportedCount(trace.errors);
 	return {
 		cost,
 		tokens,
 		errors,
 		summary: [
 			["Duration", formatSpanDuration(durationMs)],
-			...cost.value === "—" ? [] : [[
+			[
 				cost.label,
 				cost.value,
 				cost.title
-			]],
+			],
 			[
 				"Tokens",
-				formatCount(tokens),
-				`${tokens.toLocaleString()} tokens`
+				tokens === void 0 ? "—" : formatCount(tokens),
+				tokens === void 0 ? "Tokens not reported" : `${tokens.toLocaleString()} tokens`
 			],
 			[
 				"Model calls",
 				modelCalls === void 0 ? "—" : modelCalls.toLocaleString(),
-				modelCalls === void 0 ? "Model output windows do not establish the number of model requests" : void 0
+				modelCalls === void 0 ? "Model calls not reported" : at ? "Reported trace total" : void 0
 			],
 			[
 				"Tool calls",
-				(at ? at.toolCalls : trace.toolCalls)?.toLocaleString() ?? "—",
-				(at ? at.toolCalls : trace.toolCalls) === void 0 ? "The producer did not count tool calls" : void 0
+				toolCalls?.toLocaleString() ?? "—",
+				toolCalls === void 0 ? "Tool calls not reported" : at ? "Reported trace total" : void 0
 			],
-			["Errors", errors.toLocaleString()]
+			[
+				"Errors",
+				errors?.toLocaleString() ?? "—",
+				errors === void 0 ? "Errors not reported" : at ? "Reported trace total" : void 0
+			]
 		]
 	};
 }
@@ -8758,7 +8779,7 @@ const TONE_ORDER = [
 	"ok"
 ];
 /** What each mark means, as the agent view draws it; a key only for kinds the run has. */
-function KindLegend({ rows }) {
+function KindLegend({ rows, fill }) {
 	const has = (kind) => rows.some((row) => row.own.some((mark) => mark.kind === kind) || row.span.kind === kind);
 	const shown = [
 		["model", "Model call"],
@@ -8767,13 +8788,19 @@ function KindLegend({ rows }) {
 		["handoff", "Handoff"]
 	].filter(([kind]) => kind === "waiting" ? rows.some((row) => row.kind === "pipeline") : kind === "handoff" ? rows.some((row) => row.span.handoffTo || row.hasAgents) : has(kind));
 	if (shown.length === 0) return null;
-	return /* @__PURE__ */ jsx("ul", {
+	const example = rows.find((row) => toneKey(row.tone) > 0 && row.own.some((mark) => mark.kind === "model")) ?? rows.find((row) => row.own.length);
+	return /* @__PURE__ */ jsxs("ul", {
 		className: "fw-legend fw-kinds",
 		"aria-label": "Key",
-		children: shown.map(([kind, name]) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", {
+		"data-tone": fill === "agent" ? toneKey(example?.tone ?? 0) : void 0,
+		"data-example": example?.id,
+		children: [shown.map(([kind, name]) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", {
 			className: `fw-swatch-${kind === "waiting" ? "wait" : kind}`,
 			"aria-hidden": true
-		}), name] }, kind))
+		}), name] }, kind)), /* @__PURE__ */ jsx("li", {
+			className: "fw-kind-rule",
+			children: fill === "agent" ? "Bar color identifies family; shade identifies work." : "Shade identifies work."
+		})]
 	});
 }
 /** The axis dots and the dashed lines they drop: one key naming what they mark (a release, or the kinds the host gave). */
@@ -8873,17 +8900,37 @@ function OutcomeLegend({ agents, selected, onFilter, neutral }) {
 		]
 	});
 }
+function ViewControl({ view, graph, onChange }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "fw-views",
+		role: "radiogroup",
+		"aria-label": "Trace view",
+		children: [
+			"agents",
+			"spans",
+			...graph ? ["graph"] : []
+		].map((option) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			role: "radio",
+			"aria-checked": view === option,
+			disabled: view === option,
+			className: "fw-view-button",
+			onClick: () => onChange(option),
+			children: option === "agents" ? "Agents" : option === "spans" ? "Steps" : "Graph"
+		}, option))
+	});
+}
 /** Shared trace inspector: the agent timeline and the span waterfall over one clock.
 * Data remains producer-owned; playback, zoom and folding change presentation only. */
-function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defaultCollapsed = false, defaultView = "spans", renderIcon, maxHeight, onSelect, markers, onTimeChange, agentFill: fillProp, selectedId, onDeselect, description, summary: showSummary = true, criticalPath = false, query: queryProp, onQueryChange, collapsed: collapsedProp, onCollapsedChange, zoom: zoomProp, onZoomChange, matchSpan }) {
+function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defaultCollapsed = false, defaultView = "spans", graph, latestEvents, renderIcon, maxHeight, onSelect, markers, onTimeChange, agentFill: fillProp, selectedId, onDeselect, description, summary: showSummary = true, criticalPath = false, query: queryProp, onQueryChange, collapsed: collapsedProp, onCollapsedChange, zoom: zoomProp, onZoomChange, matchSpan }) {
 	const root = useRef(null);
 	const search = useRef(null);
 	const slider = useRef(null);
 	const timeOutput = useRef(null);
 	const hideTimer = useRef(void 0);
-	const searchId = useId();
-	const cardId = useId();
-	const [view, setView] = useState(defaultView);
+	const searchId = useId(), cardId = useId();
+	const [requestedView, setView] = useState(defaultView);
+	const view = requestedView === "graph" && graph == null ? "agents" : requestedView;
 	const [query, setQuery] = useHostable(queryProp, onQueryChange, "");
 	const [collapsed, setCollapsed] = useHostable(collapsedProp, onCollapsedChange, () => new Set(defaultCollapsed ? trace.spans.flatMap((span) => span.parentId ? [span.parentId] : []) : []));
 	const [speed, setSpeed] = useState(1);
@@ -8999,6 +9046,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	}, [view, agents]);
 	useEffect(() => {
 		const keydown = (event) => {
+			if (view === "graph") return;
 			const active = document.activeElement;
 			const ownsFocus = root.current?.contains(active);
 			if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "f") {
@@ -9223,7 +9271,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	const quietAgents = agents.filter((row) => quietActivity(row, clockMs).quiet).length;
 	const recordedErrors = trace.spans.filter((span) => spanFailed(span) && span.kind !== "pipeline");
 	const errorSpans = recordedErrors.length ? recordedErrors : trace.spans.filter(spanFailed);
-	const errorTimes = Array.from({ length: errors }, (_, index) => errorSpans[index]?.endMs);
+	const errorTimes = Array.from({ length: errors ?? 0 }, (_, index) => errorSpans[index]?.endMs);
 	const done = !isLive && !trace.spans.some(spanRunning);
 	const shown = (row) => row && drawnRow(row, visible);
 	const cardRow = shown(card ? byId.get(card.target) : void 0);
@@ -9313,7 +9361,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 									done && speedup >= 1.05 ? ` · ${speedup.toFixed(1)}x parallel` : ""
 								]
 							}),
-							failedAgents > 0 && /* @__PURE__ */ jsxs("button", {
+							view !== "graph" && failedAgents > 0 && /* @__PURE__ */ jsxs("button", {
 								type: "button",
 								className: "fw-text-button fw-alert",
 								"aria-pressed": filter === "__errors",
@@ -9325,7 +9373,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 									" failed"
 								]
 							}),
-							quietAgents > 0 && /* @__PURE__ */ jsxs("button", {
+							view !== "graph" && quietAgents > 0 && /* @__PURE__ */ jsxs("button", {
 								type: "button",
 								className: "fw-text-button fw-quiet",
 								"aria-pressed": filter === "__quiet",
@@ -9338,7 +9386,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 								children: "Live"
 							})
 						]
-					}), /* @__PURE__ */ jsxs("details", {
+					}), view !== "graph" && /* @__PURE__ */ jsxs("details", {
 						className: "fw-key",
 						open: root.current ? root.current.clientWidth >= 600 : true,
 						children: [/* @__PURE__ */ jsxs("summary", { children: ["Key", /* @__PURE__ */ jsx(ChevronGlyph, {})] }), /* @__PURE__ */ jsxs("div", {
@@ -9350,30 +9398,24 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 									selected: filter,
 									onFilter: applyFilter
 								}),
-								view === "agents" && /* @__PURE__ */ jsx(KindLegend, { rows }),
+								view === "agents" && /* @__PURE__ */ jsx(KindLegend, {
+									rows: visible,
+									fill: agentFill
+								}),
 								/* @__PURE__ */ jsx(MarkerLegend, { markers })
 							]
 						})]
 					})]
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "fw-tools",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "fw-views",
-						role: "radiogroup",
-						"aria-label": "Trace view",
-						children: ["agents", "spans"].map((option) => /* @__PURE__ */ jsx("button", {
-							type: "button",
-							role: "radio",
-							"aria-checked": view === option,
-							disabled: view === option,
-							className: "fw-view-button",
-							onClick: () => {
-								setView(option);
-								setNameWidth(NAME_WIDTH[option]);
-								setCard(null);
-							},
-							children: option === "agents" ? "Agents" : "Steps"
-						}, option))
+					children: [/* @__PURE__ */ jsx(ViewControl, {
+						view,
+						graph: graph != null,
+						onChange: (option) => {
+							setView(option);
+							setNameWidth(NAME_WIDTH[option]);
+							setCard(null);
+						}
 					}), view === "spans" && /* @__PURE__ */ jsxs("div", {
 						className: "fw-search",
 						children: [
@@ -9407,91 +9449,94 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 					})]
 				})]
 			}),
-			showSummary && /* @__PURE__ */ jsx("dl", {
-				className: "fw-summary",
-				children: summary.map(([name, value, title]) => /* @__PURE__ */ jsxs("div", {
-					className: name === "Errors" && errors > 0 ? "fw-has-errors" : void 0,
-					children: [/* @__PURE__ */ jsx("dt", { children: name }), /* @__PURE__ */ jsx("dd", {
-						className: "fw-value",
-						title,
-						children: name === "Errors" ? /* @__PURE__ */ jsx("button", {
-							type: "button",
-							"aria-pressed": filter === "__errors",
-							onClick: () => applyFilter("__errors"),
-							children: value
-						}) : value
-					})]
-				}, name))
-			}),
-			view === "agents" && playback,
-			/* @__PURE__ */ jsx(FlowBody, {
-				rows: visible,
-				byId,
-				totalRows: rows.length,
-				view,
-				maxHeight: rowsHeight,
-				collapsed,
-				searching: Boolean(query.trim()),
-				query,
-				matchSpan,
-				pauses: trace.pauses,
-				errorTimes,
-				cursorLine: isLive || position !== null || playing,
-				sharedDetail,
-				sharedOutcome,
-				expandedIds: view === "agents" ? /* @__PURE__ */ new Set([...openFamilies, ...openSteps]) : void 0,
-				holdHeight: isLive,
-				slowestId: slowest?.id ?? callouts.slowestId,
-				costliestId: callouts.costliestId,
-				criticalIds: criticalPath && view === "spans" ? critical : void 0,
-				activeId,
-				selectedId: selection,
-				focusId: cardAgent?.id ?? (view === "agents" ? activeId : void 0),
-				clockMs,
-				window: win,
-				trackPx,
-				showCursor,
-				markers,
-				fillByAgent: agentFill !== "outcome",
-				zoomed: zoom !== null,
-				renderIcon,
-				emptyText: rows.length === 0 ? "No spans yet. Waiting for trace events." : `No matching steps for “${query}”.`,
-				onToggle: toggle,
-				onInspect: inspect,
-				onLeave: leave,
-				onPin: pin,
-				onActivate: (row) => setActiveId(row.id),
-				onActiveChange: setActiveId,
-				onScrub: scrubTo,
-				onZoom: zoomBy,
-				onPan: pan,
-				nameWidth,
-				onNameWidth: (px) => {
-					resized.current = true;
-					setNameWidth(Math.max(140, Math.min(560, px)));
-				},
-				onTrack: setLaneElement,
-				onExpandAll: rows.some((row) => row.hasChildren) ? () => setCollapsed(/* @__PURE__ */ new Set()) : void 0,
-				onCollapseAll: () => setCollapsed(new Set(rows.filter((row) => row.hasChildren).map((row) => row.id)))
-			}),
-			card && cardRow && /* @__PURE__ */ jsx("div", {
-				className: `fw-card-anchor${card.above && card.top === void 0 ? " fw-card-above" : ""}`,
-				onPointerEnter: () => clearTimeout(hideTimer.current),
-				onPointerLeave: card.pinned ? void 0 : leave,
-				children: /* @__PURE__ */ jsx(SpanCard, {
-					id: cardId,
-					row: cardRow,
-					agent: cardAgent,
+			latestEvents,
+			view === "graph" ? graph : /* @__PURE__ */ jsxs(Fragment, { children: [
+				showSummary && /* @__PURE__ */ jsx("dl", {
+					className: "fw-summary",
+					children: summary.map(([name, value, title]) => /* @__PURE__ */ jsxs("div", {
+						className: name === "Errors" && errors !== void 0 && errors > 0 ? "fw-has-errors" : void 0,
+						children: [/* @__PURE__ */ jsx("dt", { children: name }), /* @__PURE__ */ jsx("dd", {
+							className: "fw-value",
+							title,
+							children: name === "Errors" ? /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-pressed": filter === "__errors",
+								onClick: () => applyFilter("__errors"),
+								children: value
+							}) : value
+						})]
+					}, name))
+				}),
+				view === "agents" && playback,
+				/* @__PURE__ */ jsx(FlowBody, {
+					rows: visible,
+					byId,
+					totalRows: rows.length,
+					view,
+					maxHeight: rowsHeight,
+					collapsed,
+					searching: Boolean(query.trim()),
+					query,
+					matchSpan,
+					pauses: trace.pauses,
+					errorTimes,
+					cursorLine: isLive || position !== null || playing,
+					sharedDetail,
+					sharedOutcome,
+					expandedIds: view === "agents" ? /* @__PURE__ */ new Set([...openFamilies, ...openSteps]) : void 0,
+					holdHeight: isLive,
+					slowestId: slowest?.id ?? callouts.slowestId,
+					costliestId: callouts.costliestId,
+					criticalIds: criticalPath && view === "spans" ? critical : void 0,
+					activeId,
+					selectedId: selection,
+					focusId: cardAgent?.id ?? (view === "agents" ? activeId : void 0),
 					clockMs,
-					left: card.left,
-					top: card.top ?? (card.above ? card.anchorTop - 8 : card.anchorBottom + 8),
-					pinned: card.pinned,
-					onClose: closeCard,
+					window: win,
+					trackPx,
+					showCursor,
+					markers,
+					fillByAgent: agentFill !== "outcome",
+					zoomed: zoom !== null,
 					renderIcon,
-					compact: view === "agents"
-				})
-			}),
-			view === "spans" && playback
+					emptyText: rows.length === 0 ? "No spans yet. Waiting for trace events." : `No matching steps for “${query}”.`,
+					onToggle: toggle,
+					onInspect: inspect,
+					onLeave: leave,
+					onPin: pin,
+					onActivate: (row) => setActiveId(row.id),
+					onActiveChange: setActiveId,
+					onScrub: scrubTo,
+					onZoom: zoomBy,
+					onPan: pan,
+					nameWidth,
+					onNameWidth: (px) => {
+						resized.current = true;
+						setNameWidth(Math.max(140, Math.min(560, px)));
+					},
+					onTrack: setLaneElement,
+					onExpandAll: rows.some((row) => row.hasChildren) ? () => setCollapsed(/* @__PURE__ */ new Set()) : void 0,
+					onCollapseAll: () => setCollapsed(new Set(rows.filter((row) => row.hasChildren).map((row) => row.id)))
+				}),
+				card && cardRow && /* @__PURE__ */ jsx("div", {
+					className: `fw-card-anchor${card.above && card.top === void 0 ? " fw-card-above" : ""}`,
+					onPointerEnter: () => clearTimeout(hideTimer.current),
+					onPointerLeave: card.pinned ? void 0 : leave,
+					children: /* @__PURE__ */ jsx(SpanCard, {
+						id: cardId,
+						row: cardRow,
+						agent: cardAgent,
+						clockMs,
+						left: card.left,
+						top: card.top ?? (card.above ? card.anchorTop - 8 : card.anchorBottom + 8),
+						pinned: card.pinned,
+						onClose: closeCard,
+						renderIcon,
+						compact: view === "agents"
+					})
+				}),
+				view === "spans" && playback
+			] })
 		]
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "1.0.2",
+  "version": "2.0.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",
@@ -52,7 +52,7 @@
     "check:run-tokens": "node scripts/check-run-tokens.mjs"
   },
   "devDependencies": {
-    "@tangle-network/brand": "1.31.1",
+    "@tangle-network/brand": "^1.31.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
     "@types/node": "^26.6.3",
@@ -66,7 +66,7 @@
     "tsdown": "^0.23.0",
     "typescript": "^7.0.2",
     "vitest": "^5.0.2",
-    "@tangle-network/ui": "11.51.1"
+    "@tangle-network/ui": "^11.51.1"
   },
   "keywords": [
     "tangle",