@tangle-network/charts 0.16.0 → 0.17.0

package/README.md

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

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

@@ -334,6 +334,13 @@ interface FlowSpan {
   handoffTo?: string;
   meta?: Record<string, unknown>;
 }
+/** A labelled instant on the trace clock, such as a release or an alert; drawn as a line across the rows. */
+interface FlowMarker {
+  /** Trace-relative milliseconds, on the same clock as span startMs. */
+  at: number;
+  label: string;
+  tone?: 'neutral' | 'ok' | 'failed';
+}
 /** Describe the structure of a flow trace including spans, timing, tokens, cost, and tool calls */
 interface FlowTrace {
   spans: FlowSpan[];
@@ -350,4 +357,4 @@ interface FlowTrace {
   errors?: number;
 }
 //#endregion
-export { CostBasis as A, Tier as B, MarkerShape as C, YTick as D, YTarget as E, IntervalMethod as F, isRefusal as H, MatrixCell as I, RateRow as L, Exclusion as M, Figure as N, BreakdownInput as O, Interval as P, Refusal as R, MarkVerdict as S, YScale as T, TierCounts as V, PointGlyph as _, TimelineSpan as a, ChartMark as b, CHECKER_HUES as c, OUTCOME_COLORS as d, OUTCOME_ORDER as f, PointFields as g, checkerColor as h, TimelineOptions as i, Estimate as j, ComparisonRow as k, ENDING_COLORS as l, TickOutcome as m, FlowTrace as n, TimelineTick as o, RunEnding as p, TimelineLane as r, timeline as s, FlowSpan as t, ENDING_ORDER as u, BandKind as v, XCategory as w, MarkKind as x, ChartBand as y, Setup as z };
+export { ComparisonRow as A, Setup as B, MarkVerdict as C, YTarget as D, YScale as E, Interval as F, TierCounts as H, IntervalMethod as I, MatrixCell as L, Estimate as M, Exclusion as N, YTick as O, Figure as P, RateRow as R, MarkKind as S, XCategory as T, isRefusal as U, Tier as V, PointFields as _, TimelineOptions as a, ChartBand as b, timeline as c, ENDING_ORDER as d, OUTCOME_COLORS as f, checkerColor as g, TickOutcome as h, TimelineLane as i, CostBasis as j, BreakdownInput as k, CHECKER_HUES as l, RunEnding as m, FlowSpan as n, TimelineSpan as o, OUTCOME_ORDER as p, FlowTrace as r, TimelineTick as s, FlowMarker as t, ENDING_COLORS as u, PointGlyph as v, MarkerShape as w, ChartMark as x, BandKind as y, Refusal as z };

package/dist/index.d.ts

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

package/dist/react/flow-waterfall.css

@@ -114,6 +114,11 @@
 .fw-root .fw-gridlayer, .fw-root .fw-cursor-layer { position: absolute; top: 0; bottom: 0; left: min(var(--fw-name-w), 42%); right: 0; overflow: hidden; pointer-events: none; }
 .fw-root .fw-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--fw-grid); left: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px); }
 .fw-root .fw-cursor-layer { z-index: 3; }
+.fw-root .fw-marker-layer { position: absolute; top: 0; bottom: 0; left: min(var(--fw-name-w), 42%); right: 0; overflow: hidden; pointer-events: none; z-index: 2; }
+.fw-root .fw-marker { --fw-marker: var(--fw-muted); position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--fw-marker); left: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px); }
+.fw-root .fw-marker[data-tone="ok"] { --fw-marker: var(--fw-ok); }
+.fw-root .fw-marker[data-tone="failed"] { --fw-marker: var(--fw-failed); }
+.fw-root .fw-marker-label { position: absolute; top: 2px; left: 3px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 5px; border-radius: 4px; font-size: 11px; line-height: 16px; color: var(--fw-marker); background: var(--fw-surface); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-marker) 40%, transparent); }
 .fw-root .fw-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in oklab, var(--fw-text) 70%, transparent); left: calc(var(--fw-pad) + (var(--fw-t) - var(--fw-v0)) * var(--fw-k) * 1px); }
 .fw-root .fw-empty { padding: 40px 16px; text-align: center; color: var(--fw-muted); }
 .fw-root .fw-sticky { position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: var(--fw-surface); box-shadow: 0 1px 0 var(--fw-border), 0 6px 12px -8px rgb(0 0 0 / .35); }

package/dist/react/index.d.ts

@@ -1,4 +1,4 @@
-import { C as MarkerShape, D as YTick, E as YTarget, N as Figure, R as Refusal, S as MarkVerdict, T as YScale, _ as PointGlyph, a as TimelineSpan, b as ChartMark, g as PointFields, i as TimelineOptions, m as TickOutcome, n as FlowTrace, o as TimelineTick, r as TimelineLane, t as FlowSpan, v as BandKind, w as XCategory, x as MarkKind, y as ChartBand } from "../flow-trace-DTyBgPp8.js";
+import { C as MarkVerdict, D as YTarget, E as YScale, O as YTick, P as Figure, S as MarkKind, T as XCategory, _ as PointFields, a as TimelineOptions, b as ChartBand, h as TickOutcome, i as TimelineLane, n as FlowSpan, o as TimelineSpan, r as FlowTrace, s as TimelineTick, t as FlowMarker, v as PointGlyph, w as MarkerShape, x as ChartMark, y as BandKind, z as Refusal } from "../flow-trace-Cti_6fZP.js";
 import { CSSProperties, ReactElement, ReactNode } from "react";
 //#region src/react/sparkline.d.ts
 type SparklineDirection = "rising" | "falling" | "flat";
@@ -367,9 +367,13 @@ interface FlowWaterfallProps {
   renderIcon?: (span: FlowSpan) => ReactNode;
   /** Scroll height of the rows; the tree is virtualized beyond it. */
   maxHeight?: number;
+  /** Called when a row is opened or a bar is pinned, with that row's span; the built-in behavior still runs. */
+  onSelect?: (span: FlowSpan) => void;
+  /** Labelled instants, such as releases, drawn across the rows on the trace clock. */
+  markers?: FlowMarker[];
 }
 /** Shared trace inspector: the agent timeline and the span waterfall over one clock.
  * Data remains producer-owned; playback, zoom and folding change presentation only. */
-export declare function FlowWaterfall({ trace, live, startedAt, label, defaultCollapsed, defaultView, renderIcon, maxHeight }: FlowWaterfallProps): import("react").JSX.Element;
+export declare function FlowWaterfall({ trace, live, startedAt, label, defaultCollapsed, defaultView, renderIcon, maxHeight, onSelect, markers }: FlowWaterfallProps): import("react").JSX.Element;
 //#endregion
 export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, FlowWaterfallProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };

package/dist/react/index.js

@@ -3404,6 +3404,18 @@ function FlowBody(props) {
 						rowHeight,
 						render: row
 					}),
+					props.markers?.length ? /* @__PURE__ */ jsx("div", {
+						className: "fw-marker-layer",
+						children: props.markers.map((marker) => /* @__PURE__ */ jsx("span", {
+							className: "fw-marker",
+							"data-tone": marker.tone ?? "neutral",
+							style: { "--s": marker.at },
+							children: /* @__PURE__ */ jsx("span", {
+								className: "fw-marker-label",
+								children: marker.label
+							})
+						}, `${marker.at}-${marker.label}`))
+					}) : null,
 					showCursor && /* @__PURE__ */ jsx("div", {
 						className: "fw-cursor-layer",
 						"aria-hidden": true,
@@ -3685,7 +3697,7 @@ const NAME_WIDTH = {
 const headlineSeconds = (ms) => ms < 6e4 ? `${(ms / 1e3).toFixed(1)}s` : formatSpanDuration(ms);
 /** Shared trace inspector: the agent timeline and the span waterfall over one clock.
 * Data remains producer-owned; playback, zoom and folding change presentation only. */
-function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defaultCollapsed = false, defaultView = "spans", renderIcon, maxHeight = 640 }) {
+function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defaultCollapsed = false, defaultView = "spans", renderIcon, maxHeight = 640, onSelect, markers }) {
 	const root = useRef(null);
 	const search = useRef(null);
 	const slider = useRef(null);
@@ -3844,6 +3856,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		inspect: (_target, _element) => {}
 	});
 	const toggleNow = (row) => {
+		onSelect?.(row.span);
 		if (view === "agents") {
 			const keep = /* @__PURE__ */ new Set();
 			for (let cursor = row; cursor; cursor = cursor.parentId ? byId.get(cursor.parentId) : void 0) keep.add(cursor.id);
@@ -3896,7 +3909,10 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	latest.current.pin = (target, element) => {
 		place(target, element, true);
 		const row = byId.get(target);
-		if (row) zoomTo(row);
+		if (row) {
+			onSelect?.(row.span);
+			zoomTo(row);
+		}
 	};
 	const pin = useCallback((target, element) => latest.current.pin(target, element), []);
 	const closeCard = () => {
@@ -4093,6 +4109,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 				window: win,
 				trackPx,
 				showCursor,
+				markers,
 				zoomed: zoom !== null,
 				renderIcon,
 				emptyText: rows.length === 0 ? "No spans yet. Waiting for trace events." : `No matching steps for “${query}”.`,

package/package.json

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