@tangle-network/charts 1.0.1 → 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-DBdQtcQe.d.ts → flow-trace-CF4Q07cA.d.ts}

@@ -368,7 +368,7 @@ interface FlowPause {
   /** The full reason, shown on hover and focus of the label rather than printed across the rows. */
   detail?: string;
 }
-/** A host verdict: `label` is the legend text, `tone` the status color. */
+/** An optional host outcome; absent outcomes use the canonical lifecycle status. */
 interface FlowOutcome {
   /** `live` is a running agent: the one running hue the host uses for every live mark. */
   tone: 'ok' | 'live' | 'neutral' | 'failed' | 'warn';
@@ -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-DBdQtcQe.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.
@@ -1138,7 +1138,7 @@ function plot$1(costed, unplaced, drawLine, o) {
 /** The figure block and mark styles (src/figure.css), for documents that inline their CSS. */
 const figureCss = "/* @tangle-network/charts — figure block and mark styles.\n *\n * Every colour is a --chart-* token from @tangle-network/brand tokens.css, so a\n * figure follows the page theme. A standalone document without brand tokens\n * embeds `chartTokensCss` first. Fonts fall back to Inter and JetBrains Mono.\n *\n * Each figure carries a 720 px and a 358 px render. The swap follows the\n * figure's own width (a container query), so a narrow column shows the phone\n * render even on a wide screen. */\n\n.tgc-figure {\n  margin: 32px 0 0;\n  padding: 0;\n  max-width: 720px;\n  color: var(--chart-ink);\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n\n.tgc-finding {\n  margin: 0 0 8px;\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 600;\n  color: var(--chart-ink);\n}\n\n.tgc-noteref {\n  margin-left: 2px;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n}\n.tgc-noteref:hover,\n.tgc-noteref:focus-visible {\n  color: var(--chart-accent);\n  text-decoration: underline;\n}\n\n.tgc-lede {\n  margin: 0 0 16px;\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--text-secondary, var(--chart-ink));\n}\n\n.tgc-plot {\n  container-type: inline-size;\n}\n.tgc-wide svg,\n.tgc-narrow svg {\n  display: block;\n  overflow: visible;\n}\n.tgc-narrow {\n  display: none;\n}\n.tgc-narrow svg {\n  max-width: 100%;\n  height: auto;\n}\n@container (max-width: 719.98px) {\n  .tgc-wide {\n    display: none;\n  }\n  .tgc-narrow {\n    display: block;\n  }\n}\n\n.tgc-read {\n  margin: 8px 0 0;\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--chart-ink-muted);\n}\n\n.tgc-data {\n  margin: 8px 0 0;\n  font-size: 14px;\n  line-height: 20px;\n}\n.tgc-data > summary {\n  cursor: pointer;\n  color: var(--chart-ink-muted);\n  width: fit-content;\n}\n.tgc-data > summary:hover {\n  color: var(--chart-ink);\n}\n.tgc-data[open] > summary {\n  margin-bottom: 8px;\n}\n\n.tgc-scroll {\n  overflow-x: auto;\n}\n.tgc-scroll:focus-visible {\n  outline: 2px solid var(--chart-accent);\n  outline-offset: 2px;\n}\n\n.tgc-table {\n  border-collapse: collapse;\n  min-width: 100%;\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--chart-ink);\n  /* A host page's table rules must not restyle the figure's table. */\n  border: 0;\n  border-radius: 0;\n  background: none;\n}\n.tgc-table caption {\n  text-align: left;\n  padding: 0 0 8px;\n  color: var(--chart-ink-muted);\n}\n.tgc-table th,\n.tgc-table td {\n  padding: 8px 12px 8px 0;\n  border-bottom: 1px solid var(--chart-rule);\n  text-align: left;\n  vertical-align: top;\n  font-weight: 400;\n  font-size: inherit;\n  color: inherit;\n  background: none;\n  text-transform: none;\n  letter-spacing: normal;\n}\n.tgc-table thead th {\n  color: var(--chart-ink-muted);\n  white-space: nowrap;\n}\n.tgc-table tbody th {\n  position: sticky;\n  left: 0;\n  background: var(--chart-canvas, var(--depth-1, transparent));\n}\n.tgc-table .tgc-n {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.tgc-table thead .tgc-n {\n  font-family: inherit;\n}\n.tgc-table tbody tr:hover {\n  background: var(--chart-shade);\n}\n.tgc-narrow-table .tgc-table {\n  display: block;\n  overflow-x: auto;\n}\n\n.tgc-notes {\n  margin: 16px 0 0;\n  padding-left: 20px;\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--chart-ink-muted);\n}\n.tgc-notes li {\n  margin: 0 0 8px;\n  padding-left: 4px;\n}\n.tgc-notes li:target {\n  color: var(--chart-ink);\n}\n.tgc-backlink {\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n}\n\n.tgc-refusals {\n  margin: 8px 0 0;\n  padding-left: 20px;\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--chart-ink-muted);\n}\n\n/* Marks */\n.tgc-svg {\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n.tgc-svg .tgc-num {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n}\n.tgc-ink {\n  fill: var(--chart-ink);\n}\n.tgc-ink-muted {\n  fill: var(--chart-ink-muted);\n}\n.tgc-bar,\n.tgc-ci,\n.tgc-pt-front {\n  fill: var(--chart-accent);\n}\n.tgc-gridline {\n  stroke: var(--chart-grid);\n  stroke-width: 1;\n}\n.tgc-rule {\n  stroke: var(--chart-rule);\n  stroke-width: 1;\n}\n.tgc-axis,\n.tgc-zero {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-whisker,\n.tgc-tick {\n  stroke: var(--chart-ink);\n  stroke-width: 2;\n  stroke-linecap: round;\n}\n.tgc-threshold {\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-dasharray: 3 3;\n}\n.tgc-front-line {\n  fill: none;\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-linejoin: round;\n}\n.tgc-pt,\n.tgc-open {\n  fill: none;\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-pt-est {\n  fill: none;\n  stroke: var(--chart-accent);\n  stroke-width: 2;\n}\n.tgc-pt-ci,\n.tgc-strike {\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-leader {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-ci-exact,\n.tgc-dot {\n  fill: var(--chart-muted);\n}\n.tgc-dashed {\n  stroke-dasharray: 2 2;\n}\n.tgc-tier-c {\n  fill: var(--chart-tier-c);\n}\n.tgc-tier-b {\n  fill: var(--chart-tier-b);\n}\n.tgc-tier-a {\n  fill: var(--chart-tier-a);\n}\n.tgc-tier-s {\n  fill: var(--chart-tier-s);\n}\n/* Neutral tint for counts: never the accent, capped at half strength so ink keeps 6:1. */\n.tgc-tint {\n  fill: color-mix(in srgb, var(--chart-muted) calc(var(--s, 0) * 50%), transparent);\n}\n\n@media print {\n  .tgc-plot {\n    container-type: normal;\n  }\n  .tgc-wide {\n    display: block;\n  }\n  .tgc-narrow {\n    display: none;\n  }\n  .tgc-wide svg {\n    width: 100%;\n    height: auto;\n  }\n  .tgc-figure {\n    break-inside: avoid;\n  }\n}\n\n/* Chart-led surfaces keep supporting text in the native disclosure. */\n.tgc-figure-chart { max-width: none; margin: 0; }\n.tgc-figure-chart .tgc-wide svg { width: 100%; height: auto; }\n.tgc-wide:has(.tgc-vertical), .tgc-narrow:has(.tgc-vertical) { overflow-x: auto; }\n.tgc-vertical { width: 100%; }\n.tgc-narrow .tgc-vertical { max-width: none; }\n.tgc-column-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-column:focus-visible { outline: none; }\n.tgc-column:focus-visible .tgc-column-hit { stroke: var(--chart-accent); }\n.tgc-vertical-bar { fill: var(--chart-accent); }\n/* Identity assets keep their approved colors on a white plate in either theme. */\n.tgc-logo-plate { fill: #fff; stroke: var(--chart-rule); }\n.tgc-column-tip { opacity: 0; pointer-events: none; }\n.tgc-tip-bg { fill: var(--chart-ink); }\n.tgc-tip-ink { fill: var(--chart-canvas); }\n\n.tgc-series-line { fill: none; stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 2; stroke-linejoin: round; }\n.tgc-series-point, .tgc-series-key { fill: var(--tgc-series, var(--chart-accent)); stroke: var(--chart-canvas); stroke-width: 2; }\n\n/* Semantic states stay tied to Brand status tokens. No-data has its own neutral mark. */\n.tgc-heat-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 19%, var(--chart-canvas)); stroke: var(--chart-pass, var(--status-running)); stroke-width: .8; }\n.tgc-heat-breach { fill: color-mix(in srgb, var(--chart-breach, var(--status-error)) 17%, var(--chart-canvas)); stroke: var(--chart-breach, var(--status-error)); stroke-width: .8; }\n.tgc-heat-no-data { fill: var(--chart-grid); stroke: var(--chart-rule); stroke-width: .8; }\n.tgc-heat-label { fill: var(--chart-ink); }\n.tgc-heat-missing { fill: var(--chart-ink-muted); }\n.tgc-wide:has(.tgc-heat-pass), .tgc-wide:has(.tgc-heat-breach) { overflow-x: auto; }\n.tgc-range-pass { fill: var(--chart-pass, var(--status-running)); }\n.tgc-range-breach { fill: var(--chart-breach, var(--status-error)); }\n.tgc-range-dot-pass { fill: var(--chart-canvas); stroke: var(--chart-pass, var(--status-running)); stroke-width: 3; }\n.tgc-range-dot-breach { fill: var(--chart-canvas); stroke: var(--chart-breach, var(--status-error)); stroke-width: 3; }\n.tgc-waterfall-bar { fill: var(--chart-accent); }\n.tgc-series-hit { fill: transparent; stroke: transparent; }\n.tgc-series-observation:focus-visible { outline: none; }\n.tgc-series-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-series-tip { opacity: 0; pointer-events: none; }\n\n.tgc-scalar-table { min-width: 620px; }\n.tgc-scalar-table tbody th { min-width: 180px; max-width: 260px; }\n\n/* Plot presentation keeps the same complete data available to assistive technology. */\n.tgc-accessible-data { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }\n.tgc-figure-plot .tgc-wide svg { box-sizing: content-box; width: calc(100% - 48px); padding: 0 24px; }\n/* One plot text size on the 12/14/18/32 scale; numbers differ by tabular figures, not size. */\n.tgc-figure-plot svg text { font-size: 14px; }\n/* Larger tooltip text needs padding outside the original report backdrop. */\n.tgc-figure-plot .tgc-tip-bg { stroke: var(--chart-ink); stroke-width: 24px; }\n.tgc-figure-plot .tgc-phone-plot svg { min-width: var(--tgc-phone-width); }\n.tgc-figure-plot .tgc-wide, .tgc-figure-plot .tgc-narrow { overflow-x: auto; }\n\n.tgc-figure-plot .tgc-wide-fallback svg { min-width: var(--tgc-fallback-width); }\n.tgc-phone-plot:focus-visible, .tgc-wide-fallback:focus-visible { outline: 2px solid var(--chart-accent); outline-offset: 2px; }\n\n/* Recorded events and spans. Kinds differ by stroke pattern as well as token, so they read without colour. */\n.tgc-mark { stroke-width: 1.5; }\n.tgc-mark-pass { stroke: var(--chart-pass, var(--status-running)); }\n.tgc-mark-deadline { stroke: var(--chart-ink); stroke-dasharray: 5 3; }\n.tgc-mark-died { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }\n.tgc-mark-event { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-release { stroke: var(--chart-ink-muted); }\n.tgc-mark-steer { stroke: var(--chart-accent); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-ruling { stroke: var(--chart-ink); stroke-dasharray: 6 2 1 2; }\n.tgc-mark-wake { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-head { fill: var(--chart-ink-muted); stroke: var(--chart-canvas); stroke-width: 1; }\n[data-mark=\"steer\"] .tgc-mark-head { fill: var(--chart-accent); }\n[data-mark=\"ruling\"] .tgc-mark-head { fill: var(--chart-ink); }\n/* A recorded verdict colours the rule and head: pass and fail take the status tones, unknown the muted tone. */\n.tgc-verdict-pass .tgc-mark { stroke: var(--chart-pass, var(--status-running)); }\n.tgc-verdict-pass .tgc-mark-head { fill: var(--chart-pass, var(--status-running)); }\n.tgc-verdict-fail .tgc-mark { stroke: var(--chart-breach, var(--status-error)); }\n.tgc-verdict-fail .tgc-mark-head { fill: var(--chart-breach, var(--status-error)); }\n.tgc-verdict-unknown .tgc-mark { stroke: var(--chart-muted); }\n.tgc-verdict-unknown .tgc-mark-head { fill: var(--chart-muted); }\n.tgc-mark-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n.tgc-mark-edge { fill: var(--chart-ink-muted); }\n.tgc-band-after-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 12%, transparent); }\n.tgc-band-idle { fill: var(--chart-shade); }\n/* A system-wide wall, such as a quota window: a breach wash across every lane, topped by a solid edge. */\n.tgc-band-blocked { fill: color-mix(in srgb, var(--chart-breach, var(--status-error)) 9%, transparent); }\n.tgc-band-wall { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }\n/* Missing data: a neutral wash under hatch lines, never a zero-height mark. */\n.tgc-hatch-bg { fill: color-mix(in srgb, var(--chart-muted) 10%, transparent); }\n.tgc-hatch { fill: none; stroke: var(--chart-muted); stroke-width: 1; }\n.tgc-span { fill: var(--chart-accent); }\n.tgc-span-muted { fill: var(--chart-muted); }\n.tgc-span-open { stroke: var(--chart-ink); stroke-width: 1.5; stroke-dasharray: 3 2; }\n.tgc-now { stroke: var(--chart-ink); stroke-width: 1.5; }\n/* Timeline trees and attempts. Ok ticks rise above the bar and failed ticks drop below it, so they read without colour. */\n.tgc-tree { fill: none; stroke: var(--chart-muted); stroke-width: 1; }\n.tgc-caret { fill: var(--chart-ink-muted); }\n.tgc-lane-toggle { cursor: pointer; }\n.tgc-lane-toggle:focus-visible { outline: none; }\n.tgc-lane-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-lane-toggle:hover .tgc-lane-hit { fill: var(--chart-shade); }\n.tgc-lane-toggle:focus-visible .tgc-lane-hit { stroke: var(--chart-accent); }\n.tgc-tick { stroke-width: 1.5; }\n.tgc-tick-ok { stroke: var(--chart-outcome-ok); }\n.tgc-tick-quota { stroke: var(--chart-outcome-quota); }\n.tgc-tick-lost { stroke: var(--chart-outcome-lost); }\n.tgc-tick-rate-limit { stroke: var(--chart-outcome-rate-limit); }\n.tgc-tick-oom { stroke: var(--chart-outcome-oom); }\n.tgc-tick-refused { stroke: var(--chart-outcome-refused); }\n.tgc-tick-aborted { stroke: var(--chart-outcome-neutral); }\n.tgc-tick-other { stroke: var(--chart-outcome-other); }\n/* Lane labels and counts keep a canvas halo, so rules and ticks under them never strike through the text. */\n.tgc-lane-label, .tgc-count { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n.tgc-count { fill: var(--chart-ink); }\n.tgc-count-ok { fill: var(--chart-pass, var(--status-running)); }\n.tgc-count-failed { fill: var(--chart-breach, var(--status-error)); }\n\n/* FigureView (React) picks the render by measured width; the wide plot fills its container. */\n.tgc-figure-view { max-width: none; margin: 0; }\n.tgc-view-plot svg { display: block; overflow: visible; }\n.tgc-view-wide svg { width: 100%; height: auto; }\n.tgc-view-narrow svg { max-width: 100%; height: auto; }\n\n/*\n * One fixed palette in every view (src/outcomes.ts names them), each a light-dark() pair picked by the page's\n * color-scheme. Green, red and amber are status colours and mean one thing everywhere: green is a turn or run that\n * worked (an `ok` attempt, a solved run), red a run that died, amber a run stalled or a turn rate-limited. Outcomes\n * pass the dataviz colour-vision checks as adjacent pairs in stack order (ok, quota, lost, rate-limit, oom, refused) on\n * the light surface and on #161616; `aborted` and `other` are two distinct greys. Checkers take hues no status uses\n * (blue for the current checker, then magenta, cyan and violet for older ones) and pass as adjacent series; their\n * marks also carry a vN label. Run endings reuse those colours. `scripts/palette-check.mjs` re-runs the validator. A\n * page may override any of these properties; :where() keeps them at zero specificity.\n */\n:where(:root) {\n  --chart-outcome-ok: light-dark(#1baf7a, #199e70);\n  --chart-outcome-quota: light-dark(#eb6834, #d95926);\n  --chart-outcome-lost: light-dark(#0f9fb8, #1a9cb3);\n  --chart-outcome-rate-limit: light-dark(#eda100, #c98500);\n  --chart-outcome-oom: light-dark(#e87ba4, #d55181);\n  --chart-outcome-refused: light-dark(#6250d6, #9085e9);\n  --chart-outcome-neutral: #898781;\n  --chart-outcome-other: #b5b3ac;\n  --chart-checker-0: light-dark(#2a78d6, #3987e5);\n  --chart-checker-1: light-dark(#b8478f, #c2408f);\n  --chart-checker-2: light-dark(#0f9fb8, #1a9cb3);\n  --chart-checker-3: light-dark(#6250d6, #8c7ce6);\n  /* How a run ended: solved green, died red, stalled amber, live blue; not solved and cancelled are neutral. */\n  --chart-ending-solved: var(--chart-outcome-ok);\n  --chart-ending-died: light-dark(#d03b3b, #e05252);\n  --chart-ending-stalled: var(--chart-outcome-rate-limit);\n  --chart-ending-live: var(--chart-checker-0);\n  --chart-ending-not-solved: light-dark(#6b7a90, #8494ab);\n  --chart-ending-cancelled: var(--chart-outcome-neutral);\n  --chart-ending-never-started: color-mix(in srgb, var(--chart-outcome-other) 45%, transparent);\n}\n/* A series drawn in a checker's hue; past the fourth hue it is muted and named by its label. */\n.tgc-checker-0 { --tgc-series: var(--chart-checker-0); }\n.tgc-checker-1 { --tgc-series: var(--chart-checker-1); }\n.tgc-checker-2 { --tgc-series: var(--chart-checker-2); }\n.tgc-checker-3 { --tgc-series: var(--chart-checker-3); }\n.tgc-checker-other { --tgc-series: var(--chart-muted); }\n/* Recorded verdicts: a pass is filled, a fail or an incomparable value is an outline, an undecided one dashed. */\n.tgc-series-point.tgc-point-outline { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.75; }\n.tgc-series-point.tgc-point-undecided { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.5; stroke-dasharray: 2 1.5; }\n.tgc-strip-hatch .tgc-hatch { stroke: var(--tgc-series, var(--chart-muted)); }\n/* A failing verdict without a value is a neutral ring: in its checker's hue it read as that checker passing. */\n.tgc-series-point.tgc-point-outline.tgc-strip-fail { stroke: var(--chart-ink-muted); }\n.tgc-strip-edge { fill: none; stroke: var(--tgc-series, var(--chart-muted)); stroke-width: 1.25; }\n.tgc-strip-observation:focus-visible { outline: none; }\n.tgc-strip-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-point-badge { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace); }\n.tgc-point-label { fill: var(--chart-ink-muted); }\n.tgc-glyph-note { fill: var(--chart-ink); font-weight: 600; }\n/* Status colours appear only on these glyphs. */\n.tgc-glyph-check { fill: var(--chart-pass, var(--status-running)); font-weight: 600; }\n.tgc-glyph-cross { fill: var(--chart-breach, var(--status-error)); font-weight: 600; }\n/* Recorded targets sit under the data: a target is a soft band between solid edges, a stretch a dashed outline. */\n.tgc-target-target { fill: color-mix(in srgb, var(--chart-ink) 7%, transparent); }\n.tgc-target-stretch { fill: none; }\n.tgc-target-target-edge, .tgc-target-target.tgc-target-line { stroke: var(--chart-ink-muted); stroke-width: 1; }\n.tgc-target-stretch-edge, .tgc-target-stretch.tgc-target-line { stroke: var(--chart-ink-muted); stroke-width: 1; stroke-dasharray: 4 3; }\n.tgc-target-label { fill: var(--chart-ink-muted); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n/* Group headers: a labelled bracket above the plot and a light rule at each inner edge. */\n.tgc-group-rule { stroke: var(--chart-ink-muted); stroke-width: 1.5; }\n.tgc-group-edge { stroke: var(--chart-rule); stroke-width: 1; }\n.tgc-group-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n/* The verdict key: glyphs in the neutral ink, so they describe a mark's form, not a series. */\n.tgc-key-mark { stroke-width: 1.5; }\n.tgc-key-filled { fill: var(--chart-ink-muted); stroke: none; }\n.tgc-key-outline { fill: none; stroke: var(--chart-ink-muted); }\n.tgc-key-dashed { fill: none; stroke: var(--chart-ink-muted); stroke-dasharray: 2 1.5; }\n";
 /** --chart-* resolved per theme, for documents without brand tokens: light, dark by preference or [data-theme="dark"], light in print. */
-const chartTokensCss = ":root{--chart-ink:hsl(0 0% 17.6471%);--chart-ink-muted:#686868;--chart-muted:#787878;--chart-grid:hsl(228 25% 94.5%);--chart-rule:hsl(244 16% 81%);--chart-shade:color-mix(in srgb, hsl(246 54% 51%) 5%, transparent);--chart-accent:hsl(246 54% 51%);--chart-tier-c:#9b9ef0;--chart-tier-b:#7c7fe3;--chart-tier-a:#5b5bd6;--chart-tier-s:#272962;--chart-pass:hsl(162.9 93.5% 24.3%);--chart-breach:hsl(0 73.7% 41.8%);--chart-canvas:hsl(0 0% 100%);color-scheme:light}\n@media (prefers-color-scheme: dark){:root:not([data-theme=\"light\"]){--chart-ink:hsl(0 0% 90.1961%);--chart-ink-muted:#a5a5a5;--chart-muted:#8e8e8e;--chart-grid:hsl(249 24% 17.5%);--chart-rule:hsl(244 16% 25%);--chart-shade:color-mix(in srgb, #A5B4FC 7%, transparent);--chart-accent:#818CF8;--chart-tier-c:#4a4a95;--chart-tier-b:#5b5bd6;--chart-tier-a:#8b87f0;--chart-tier-s:#b1a9ff;--chart-pass:hsl(154.7 60.2% 60.6%);--chart-breach:hsl(2.8 100% 83.1%);--chart-canvas:hsl(240 33% 6%);color-scheme:dark}}\n:root[data-theme=\"dark\"]{--chart-ink:hsl(0 0% 90.1961%);--chart-ink-muted:#a5a5a5;--chart-muted:#8e8e8e;--chart-grid:hsl(249 24% 17.5%);--chart-rule:hsl(244 16% 25%);--chart-shade:color-mix(in srgb, #A5B4FC 7%, transparent);--chart-accent:#818CF8;--chart-tier-c:#4a4a95;--chart-tier-b:#5b5bd6;--chart-tier-a:#8b87f0;--chart-tier-s:#b1a9ff;--chart-pass:hsl(154.7 60.2% 60.6%);--chart-breach:hsl(2.8 100% 83.1%);--chart-canvas:hsl(240 33% 6%);color-scheme:dark}\n@media print{:root,:root:not([data-theme=\"light\"]),:root[data-theme=\"dark\"]{--chart-ink:hsl(0 0% 17.6471%);--chart-ink-muted:#686868;--chart-muted:#787878;--chart-grid:hsl(228 25% 94.5%);--chart-rule:hsl(244 16% 81%);--chart-shade:color-mix(in srgb, hsl(246 54% 51%) 5%, transparent);--chart-accent:hsl(246 54% 51%);--chart-tier-c:#9b9ef0;--chart-tier-b:#7c7fe3;--chart-tier-a:#5b5bd6;--chart-tier-s:#272962;--chart-pass:hsl(162.9 93.5% 24.3%);--chart-breach:hsl(0 73.7% 41.8%);--chart-canvas:hsl(0 0% 100%);color-scheme:light}}";
+const chartTokensCss = ":root{--chart-ink:hsl(0 0% 24.7059%);--chart-ink-muted:hsl(0 0% 41.9608%);--chart-muted:hsl(0 0% 36.4706%);--chart-grid:hsl(225 28.5714% 94.5098%);--chart-rule:hsl(222.8571 6.6667% 79.4118%);--chart-shade:color-mix(in srgb, hsl(246.2264 92.1739% 54.902%) 7%, transparent);--chart-accent:hsl(245.9504 54.2601% 56.2745%);--chart-tier-c:hsl(246.2687 54.4715% 75.8824%);--chart-tier-b:hsl(246.055 54.7739% 60.9804%);--chart-tier-a:hsl(246.0465 54.8936% 46.0784%);--chart-tier-s:hsl(245.5172 54.717% 31.1765%);--chart-pass:hsl(154.8148 64.8% 24.5098%);--chart-breach:hsl(0 75.1244% 39.4118%);--chart-canvas:hsl(0 0% 100%);color-scheme:light}\n@media (prefers-color-scheme: dark){:root:not([data-theme=\"light\"]){--chart-ink:hsl(0 0% 84.3137%);--chart-ink-muted:hsl(0 0% 60.3922%);--chart-muted:hsl(0 0% 67.0588%);--chart-grid:hsl(243.3333 20.4545% 17.2549%);--chart-rule:hsl(245 18.4615% 25.4902%);--chart-shade:color-mix(in srgb, hsl(245.5556 93.1034% 88.6275%) 7%, transparent);--chart-accent:hsl(246.0465 85.4305% 70.3922%);--chart-tier-c:hsl(246.1017 55.1402% 41.9608%);--chart-tier-b:hsl(246.1905 54.7826% 54.902%);--chart-tier-a:hsl(245.3933 54.6012% 68.0392%);--chart-tier-s:hsl(245.6604 54.6392% 80.9804%);--chart-pass:hsl(155.1429 64.8148% 78.8235%);--chart-breach:hsl(0 74.4681% 90.7843%);--chart-canvas:hsl(246.6667 31.0345% 5.6863%);color-scheme:dark}}\n:root[data-theme=\"dark\"]{--chart-ink:hsl(0 0% 84.3137%);--chart-ink-muted:hsl(0 0% 60.3922%);--chart-muted:hsl(0 0% 67.0588%);--chart-grid:hsl(243.3333 20.4545% 17.2549%);--chart-rule:hsl(245 18.4615% 25.4902%);--chart-shade:color-mix(in srgb, hsl(245.5556 93.1034% 88.6275%) 7%, transparent);--chart-accent:hsl(246.0465 85.4305% 70.3922%);--chart-tier-c:hsl(246.1017 55.1402% 41.9608%);--chart-tier-b:hsl(246.1905 54.7826% 54.902%);--chart-tier-a:hsl(245.3933 54.6012% 68.0392%);--chart-tier-s:hsl(245.6604 54.6392% 80.9804%);--chart-pass:hsl(155.1429 64.8148% 78.8235%);--chart-breach:hsl(0 74.4681% 90.7843%);--chart-canvas:hsl(246.6667 31.0345% 5.6863%);color-scheme:dark}\n@media print{:root,:root:not([data-theme=\"light\"]),:root[data-theme=\"dark\"]{--chart-ink:hsl(0 0% 24.7059%);--chart-ink-muted:hsl(0 0% 41.9608%);--chart-muted:hsl(0 0% 36.4706%);--chart-grid:hsl(225 28.5714% 94.5098%);--chart-rule:hsl(222.8571 6.6667% 79.4118%);--chart-shade:color-mix(in srgb, hsl(246.2264 92.1739% 54.902%) 7%, transparent);--chart-accent:hsl(245.9504 54.2601% 56.2745%);--chart-tier-c:hsl(246.2687 54.4715% 75.8824%);--chart-tier-b:hsl(246.055 54.7739% 60.9804%);--chart-tier-a:hsl(246.0465 54.8936% 46.0784%);--chart-tier-s:hsl(245.5172 54.717% 31.1765%);--chart-pass:hsl(154.8148 64.8% 24.5098%);--chart-breach:hsl(0 75.1244% 39.4118%);--chart-canvas:hsl(0 0% 100%);color-scheme:light}}";
 //#endregion
 //#region src/vertical-columns.ts
 function image(mark, x, y, size) {
@@ -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

@@ -13,15 +13,15 @@
   --fw-ok: var(--surface-success-text);
   --fw-amber: var(--surface-warning-text);
   --fw-live: var(--fw-accent);
-  --fw-kind-model: var(--chart-accent);
-  --fw-kind-tool: var(--tone-cyan-icon);
+  --fw-kind-model: light-dark(oklch(from var(--chart-accent) .50 min(c, .10) h), oklch(from var(--chart-accent) .72 min(c, .10) h));
+  --fw-kind-tool: light-dark(oklch(from var(--tone-cyan-icon) .80 min(c, .10) h), oklch(from var(--tone-cyan-icon) .46 min(c, .10) h));
   --fw-neutral-bar: color-mix(in oklab, var(--fw-text) 15%, var(--fw-surface));
   --fw-hatch: color-mix(in oklab, var(--fw-text) 22%, transparent);
   --fw-h0: var(--chart-muted);
   --fw-h1: light-dark(oklch(from var(--tone-blue-icon) .58 .11 calc(h + 39)), oklch(from var(--tone-blue-icon) .67 .11 calc(h + 39)));
   --fw-h2: light-dark(oklch(from var(--tone-violet-icon) .55 .11 h), oklch(from var(--tone-violet-icon) .70 .11 h));
   --fw-h3: light-dark(oklch(from var(--tone-pink-icon) .55 .11 h), oklch(from var(--tone-pink-icon) .67 .11 calc(h - 16)));
-  --fw-h4: light-dark(oklch(from var(--tone-cyan-icon) .58 .11 calc(h - 16.256)), oklch(from var(--tone-cyan-icon) .669 .11 calc(h - 26.148)));
+  --fw-h4: light-dark(oklch(from var(--tone-cyan-icon) .60 .11 calc(h - 16.256)), oklch(from var(--tone-cyan-icon) .67 .11 calc(h - 26.148)));
   --fw-h5: light-dark(oklch(from var(--tone-blue-icon) .58 .03 calc(h + 37.6)), oklch(from var(--tone-blue-icon) .67 .03 calc(h + 29.5)));
   --fw-ease: var(--ease-standard, cubic-bezier(.2,.8,.2,1));
   --fw-bar-h: 20px;
@@ -260,9 +260,8 @@
 .fw-root .fw-view-agents .fw-seg .fw-glyph { flex: none; margin-left: 0; display: grid; place-items: center; width: min(14px, 100%); height: 14px; border-radius: 50%; background: var(--fw-failed); color: light-dark(var(--fw-surface), var(--bg-root)); }
 .fw-root .fw-view-agents .fw-seg .fw-glyph[data-glyph="retry"] { background: var(--fw-muted); }
 .fw-root .fw-view-agents .fw-seg .fw-glyph svg { width: min(9px, 100%); height: 9px; stroke-width: 2.5; }
-.fw-root:is(.fw-fill-muted, .fw-fill-outcome) .fw-view-agents :is(.fw-seg-alt.fw-seg-model, .fw-seg-alt.fw-seg-tool) { filter: brightness(.88); }
 .fw-root .fw-seg-failed { background: color-mix(in oklab, var(--fw-failed) 18%, var(--fw-surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-failed) 70%, transparent); color: var(--fw-failed); }
-.fw-root .fw-view-agents .fw-seg-failed { background: var(--dim); box-shadow: inset 0 0 0 1px var(--dim-line); }
+.fw-root .fw-view-agents .fw-seg-failed { background: var(--tool-fill); box-shadow: inset 0 0 0 1px var(--dim-line); }
 .fw-root .fw-glyph { display: inline-flex; color: currentColor; }
 .fw-root .fw-glyph svg { width: 11px; height: 11px; stroke-width: 2; }
 .fw-root .fw-seg-model .fw-glyph, .fw-root .fw-k-model .fw-glyph { color: light-dark(var(--tone), var(--fw-text)); }
@@ -371,6 +370,9 @@
 .fw-root .fw-legend button[aria-pressed="true"] { color: var(--fw-text); text-decoration: underline; text-underline-offset: 4px; }
 .fw-root .fw-summary button { appearance: none; background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit; }
 .fw-root .fw-key > summary { display: none; }
+.fw-root .fw-key > summary svg { width: 12px; height: 12px; margin-left: 6px; }
+.fw-root .fw-key[open] > summary svg { transform: rotate(90deg); }
+.fw-root .fw-row-state { display: none; font-size: 12px; font-weight: 600; }
 .fw-root .fw-error-rug { position: relative; height: 10px; margin-left: var(--fw-label-col); overflow: hidden; }
 .fw-root .fw-error-tick { position: absolute; width: 2px; height: 8px; background: var(--fw-failed); left: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px); }
 .fw-root .fw-error-tick[data-unlocated] { left: auto; right: calc(var(--error-index) * 3px); }
@@ -387,12 +389,15 @@
   .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 :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; }
   .fw-root .fw-key:not([open]) .fw-legends { display: none; }
   .fw-root .fw-heading { padding: 12px 8px; }
   .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; }
@@ -401,15 +406,12 @@
   .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)); }
 
 .fw-root.fw-root.fw-root-agents[data-selection] .fw-row:not([aria-selected="true"]) .fw-seg { opacity: var(--on); background: color-mix(in oklab, var(--fw-surface) 80%, var(--tone)); --fw-seg-ink: var(--fw-text); }
-
-.fw-root:is(.fw-fill-muted, .fw-fill-outcome) .fw-view-agents .fw-seg-tool { --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-DBdQtcQe.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`;
@@ -6560,10 +6562,22 @@ function mergeSegments(marks, gapMs, cap = 240) {
 * Orphaned parents become roots; cycles are broken without dropping any span. */
 function flowWaterfallRows(trace, resolutionMs) {
 	const ids = /* @__PURE__ */ new Set();
-	const rows = [...trace.spans].map((span, i) => ({
-		span,
-		key: span.id ?? `span-${i}`
-	})).sort((a, b) => a.span.startMs - b.span.startMs).map(({ span, key }, index) => {
+	const rows = [...trace.spans].map((recorded, i) => {
+		const state = runStatus(recorded.status ?? "unknown");
+		const outcome = {
+			label: statusMeta(state).label,
+			tone: state === "running" ? "live" : state === "done" ? "ok" : state === "needs-you" ? "warn" : state === "failed" ? "failed" : "neutral",
+			...state === "unknown" ? { ring: true } : {}
+		};
+		const span = recorded.outcome ? recorded : {
+			...recorded,
+			outcome
+		};
+		return {
+			span,
+			key: span.id ?? `span-${i}`
+		};
+	}).sort((a, b) => a.span.startMs - b.span.startMs).map(({ span, key }, index) => {
 		let id = key;
 		let suffix = index;
 		while (ids.has(id)) id = `${key}:${suffix++}`;
@@ -6634,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;
@@ -6709,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;
 }
@@ -6839,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
 	} : {
@@ -6883,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
 	};
@@ -7106,17 +7122,17 @@ const rowCostText = (row, cost) => `${row.costFloor ? "≥" : ""}${formatCost(co
 /** 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);
-	const last = times.at(-1) ?? row.span.startMs;
-	const gaps = times.slice(1).map((at, i) => at - times[i]).filter((gap) => gap > 0).sort((a, b) => a - b);
+	const last = times.at(-1) ?? NaN;
+	const gaps = times.slice(1).map((at, i) => at - times[i]).sort((a, b) => a - b);
 	const middle = Math.floor(gaps.length / 2);
 	const observedMedian = gaps.length ? gaps.length % 2 ? gaps[middle] : (gaps[middle - 1] + gaps[middle]) / 2 : 0;
 	const supplied = row.span.medianEventGapMs;
 	const median = typeof supplied === "number" && Number.isFinite(supplied) && supplied >= 0 ? supplied : observedMedian;
-	const quietMs = Math.max(0, now - last);
+	const quietMs = Number.isFinite(last) ? Math.max(0, now - last) : 0;
 	return {
 		last,
 		quietMs,
-		quiet: spanRunning(row.span) && quietMs > Math.max(3e5, 3 * median)
+		quiet: spanRunning(row.span) && Number.isFinite(last) && quietMs > Math.max(3e5, 3 * median)
 	};
 }
 //#endregion
@@ -7303,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;
@@ -7561,6 +7580,8 @@ function endLabel(row, clockMs) {
 const FlowRow = memo(function FlowRow(props) {
 	const { row, view, top, collapsed, searching, slowest, costliest, critical, matched, active, focusable, selected, sticky, clockMs, renderIcon, fillByAgent, motion } = props;
 	const span = row.span;
+	const state = runStatus(span.status ?? "unknown");
+	const meta = statusMeta(state);
 	const running = spanRunning(span);
 	const agentView = view === "agents";
 	const folded = row.hasChildren && collapsed && !searching;
@@ -7687,6 +7708,11 @@ const FlowRow = memo(function FlowRow(props) {
 								className: "fw-name-text",
 								children: row.name
 							}),
+							(state === "failed" || state === "needs-you") && /* @__PURE__ */ jsx("span", {
+								className: "fw-row-state",
+								style: { color: `var(${meta.token})` },
+								children: meta.label
+							}),
 							activity.quiet && /* @__PURE__ */ jsxs("span", {
 								className: "fw-quiet",
 								children: ["Quiet ", formatSpanDuration(activity.quietMs)]
@@ -8697,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
+			]
 		]
 	};
 }
@@ -9204,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);
@@ -9322,7 +9354,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 					}), /* @__PURE__ */ jsxs("details", {
 						className: "fw-key",
 						open: root.current ? root.current.clientWidth >= 600 : true,
-						children: [/* @__PURE__ */ jsx("summary", { children: "Key" }), /* @__PURE__ */ jsxs("div", {
+						children: [/* @__PURE__ */ jsxs("summary", { children: ["Key", /* @__PURE__ */ jsx(ChevronGlyph, {})] }), /* @__PURE__ */ jsxs("div", {
 							className: "fw-legends",
 							children: [
 								/* @__PURE__ */ jsx(OutcomeLegend, {
@@ -9391,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.1",
+  "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.0",
+    "@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.50.3"
+    "@tangle-network/ui": "^11.51.1"
   },
   "keywords": [
     "tangle",