@tangle-network/charts 1.0.2 → 2.0.0

package/README.md

@@ -337,7 +337,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.
 

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

@@ -396,6 +396,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 +406,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";

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
 	};
@@ -7315,9 +7319,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;
@@ -8716,36 +8723,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
+			]
 		]
 	};
 }
@@ -9223,7 +9236,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);
@@ -9410,7 +9423,7 @@ 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,
+					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,

package/package.json

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