@tangle-network/charts 0.18.1 → 0.19.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. `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. Ctrl/Cmd+wheel or `+`/`-`/`0` zoom, Shift+wheel pans, the scrub track under the controls shows the whole trace, and arrow keys walk the tree.
+`defaultView="agents"` opens the agent timeline: one row per agent with its model, thinking and tool marks, hatched waiting while it delegates, elbow connectors to each agent it spawned and back, retry and failure glyphs, and a headline with the measured speedup over sequential (agent busy time over wall time). Expanding an agent opens the span view with that agent unfolded. The span view virtualizes rows (5,000 spans scroll at 58+ fps in headless Chromium), pins ancestors while their children scroll, and labels each bar with its duration and recorded cost. Hover shows a span card; click pins it and zooms the axis to a span too narrow to read. `onSelect(span)` hears each opened row and pinned bar, so a host can open its own drill-down; `markers={[{ at, label, tone }]}` draws labelled instants, such as releases, across the rows. Give an agent span an `outcome` (`{ tone, label }`) and its lane takes the outcome color and the header a legend. `detail` becomes the agent's subtitle, and `facts` (`[{ label, value }]`) adds cells to its card. 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-BYKE-PMb.d.ts → flow-trace-D6RDkVrJ.d.ts}

@@ -334,6 +334,11 @@ interface FlowSpan {
   handoffTo?: string;
   /** The host's verdict on an agent span, such as shipped or crashed: colors its lane and joins the legend. */
   outcome?: FlowOutcome;
+  /** Up to three host facts shown as extra key/value cells in the span card, such as releases or commits. */
+  facts?: readonly {
+    label: string;
+    value: string;
+  }[];
   meta?: Record<string, unknown>;
 }
 /** A host verdict: `label` is the legend text, `tone` the status color. */

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

package/dist/react/flow-waterfall.css

@@ -160,6 +160,7 @@
 .fw-root .fw-view-agents .fw-label { padding-left: 16px; gap: 12px; border-right: 0; }
 .fw-root .fw-view-agents .fw-names { flex-direction: column; align-items: flex-start; gap: 0; }
 .fw-root .fw-view-agents .fw-span-name { font-weight: 600; line-height: 18px; }
+.fw-root .fw-view-agents .fw-subtitle { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fw-muted); font-size: 12px; line-height: 16px; }
 .fw-root .fw-view-agents .fw-detail { font-size: 12px; line-height: 16px; }
 .fw-root .fw-agent-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--line, var(--fw-muted)); align-self: flex-start; margin-top: calc((var(--fw-row-h) - 34px) / 2 + 8px); }
 
@@ -223,6 +224,9 @@
   opacity: clamp(0, (var(--fw-t) - var(--s)) * 1000, 1);
 }
 .fw-root .fw-view-spans .fw-link { opacity: calc(clamp(0, (var(--fw-t) - var(--s)) * 1000, 1) * .7); }
+/* Agent-view connectors stay quiet at 30% until their agent is hovered, pinned or focused. */
+.fw-root .fw-view-agents .fw-link:not(.fw-link-hot) { opacity: calc(clamp(0, (var(--fw-t) - var(--s)) * 1000, 1) * .3); }
+.fw-root .fw-link { transition: opacity 160ms var(--fw-ease); }
 .fw-root .fw-link-down { left: calc(var(--x) - 8px); border-left-width: 1.5px; border-bottom-left-radius: 6px; }
 .fw-root .fw-link-up { left: var(--x); border-right-width: 1.5px; border-bottom-right-radius: 6px; }
 .fw-root .fw-link::before { content: ""; position: absolute; top: -3.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--line); box-shadow: 0 0 0 1.5px var(--fw-surface); }
@@ -233,6 +237,8 @@
 .fw-root .fw-card-anchor { display: contents; }
 .fw-root .fw-card { position: absolute; z-index: 20; width: 320px; padding: 12px; border-radius: 12px; background: var(--fw-raised); border: 1px solid var(--fw-border);
   box-shadow: 0 12px 32px -8px rgb(0 0 0 / .28), 0 2px 6px rgb(0 0 0 / .08); animation: fw-arrive 140ms var(--fw-ease); }
+/* A hover card never covers the next mark: only a pinned card (a dialog) takes the pointer. */
+.fw-root .fw-card[role="tooltip"] { pointer-events: none; }
 .fw-root .fw-card-above .fw-card { transform: translateY(-100%); animation-name: fw-arrive-above; }
 .fw-root .fw-card-agent { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
 .fw-root .fw-card-agent .fw-agent-dot { margin-top: 0; align-self: center; }
@@ -257,7 +263,9 @@
 .fw-root .fw-card-compact { width: 280px; padding: 12px; }
 .fw-root .fw-card-compact .fw-card-agent { margin-bottom: 8px; font-size: 14px; line-height: 20px; }
 .fw-root .fw-card-who { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.fw-root .fw-card-cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--fw-well); }
+.fw-root .fw-card-detail { margin: -4px 0 8px 16px; color: var(--fw-muted); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
+.fw-root .fw-pill-outcome { color: var(--line); background: color-mix(in oklab, var(--tone) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 35%, transparent); }
+.fw-root .fw-card-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--fw-well); }
 .fw-root .fw-card-cells dt { font-size: 12px; line-height: 16px; color: var(--fw-muted); }
 .fw-root .fw-card-cells dd { font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
 .fw-root .fw-card-result { margin-top: 8px; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

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, 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-BYKE-PMb.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, 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-D6RDkVrJ.js";
 import { CSSProperties, ReactElement, ReactNode } from "react";
 //#region src/react/sparkline.d.ts
 type SparklineDirection = "rising" | "falling" | "flat";

package/dist/react/index.js

@@ -2663,16 +2663,22 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 	const duration = Number.isFinite(end - span.startMs) && end >= span.startMs ? formatSpanDuration(end - span.startMs) : "—";
 	if (compact) {
 		const who = owner ?? row;
+		const outcome = who.span.outcome;
 		const tokenCount = span.promptTokens !== void 0 || span.completionTokens !== void 0 ? (span.promptTokens ?? 0) + (span.completionTokens ?? 0) : void 0;
 		const cells = [[span.kind === "model" ? "Thinking" : KIND_LABEL[span.kind], duration]];
+		for (const fact of (span.facts ?? who.span.facts ?? []).slice(0, 3)) cells.push([fact.label, fact.value]);
+		cells.push(["Started", `+${formatSpanDuration(Math.max(0, span.startMs))}`]);
 		if (tokenCount !== void 0) cells.push(["Tokens", count(tokenCount)]);
 		if (span.costUsd !== void 0) cells.push(["Cost", formatCost(span.costUsd)]);
+		cells.splice(6);
+		const sentence = [span.output, span.id === who.id ? void 0 : span.name].find((text) => text && text !== who.name);
 		return /* @__PURE__ */ jsxs("div", {
 			id,
 			role: pinned ? "dialog" : "tooltip",
 			"aria-label": pinned ? `${span.name} details` : void 0,
 			className: "fw-card fw-card-compact",
 			"data-tone": toneKey(who.tone),
+			"data-outcome": outcome?.tone,
 			style: {
 				left,
 				top
@@ -2695,7 +2701,12 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 							className: "fw-card-who",
 							children: who.name
 						}),
-						/* @__PURE__ */ jsx("span", {
+						outcome ? /* @__PURE__ */ jsx("span", {
+							className: "fw-pill fw-pill-outcome",
+							"data-tone": "0",
+							"data-outcome": outcome.tone,
+							children: outcome.label
+						}) : /* @__PURE__ */ jsx("span", {
 							className: `fw-pill fw-pill-${status.toLowerCase()}`,
 							children: status
 						}),
@@ -2713,13 +2724,17 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 						})
 					]
 				}),
+				who.span.detail && /* @__PURE__ */ jsx("p", {
+					className: "fw-card-detail",
+					children: who.span.detail
+				}),
 				/* @__PURE__ */ jsx("dl", {
 					className: "fw-card-cells",
 					children: cells.map(([name, value]) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: name }), /* @__PURE__ */ jsx("dd", { children: value })] }, name))
 				}),
-				/* @__PURE__ */ jsx("p", {
+				sentence && /* @__PURE__ */ jsx("p", {
 					className: "fw-card-result",
-					children: span.output ?? span.name
+					children: sentence
 				})
 			]
 		});
@@ -2918,21 +2933,28 @@ const FlowRow = memo(function FlowRow(props) {
 				/* @__PURE__ */ jsxs("span", {
 					className: "fw-names",
 					title: `${row.name}${span.detail ? ` · ${span.detail}` : ""} · ${KIND_LABEL[span.kind]}${running ? " · running" : ""}${row.ok ? "" : " · failed"}`,
-					children: [/* @__PURE__ */ jsxs("span", {
-						className: `fw-span-name${isAgent || row.hasChildren ? " fw-strong" : ""}`,
-						children: [running && /* @__PURE__ */ jsx("span", {
-							className: "fw-spinner",
-							role: "status",
-							"aria-label": "running"
-						}), /* @__PURE__ */ jsx("span", {
-							className: "fw-name-text",
-							children: row.name
-						})]
-					}), agentView && renderIcon && /* @__PURE__ */ jsx("span", {
-						className: "fw-detail-icon",
-						"aria-hidden": true,
-						children: renderIcon(span)
-					})]
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: `fw-span-name${isAgent || row.hasChildren ? " fw-strong" : ""}`,
+							children: [running && /* @__PURE__ */ jsx("span", {
+								className: "fw-spinner",
+								role: "status",
+								"aria-label": "running"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "fw-name-text",
+								children: row.name
+							})]
+						}),
+						agentView && span.detail && /* @__PURE__ */ jsx("span", {
+							className: "fw-subtitle",
+							children: span.detail
+						}),
+						agentView && renderIcon && /* @__PURE__ */ jsx("span", {
+							className: "fw-detail-icon",
+							"aria-hidden": true,
+							children: renderIcon(span)
+						})
+					]
 				}),
 				folded && /* @__PURE__ */ jsxs("span", {
 					className: "fw-count",
@@ -2992,7 +3014,7 @@ const FlowRow = memo(function FlowRow(props) {
 	});
 }, (a, b) => a.row === b.row && a.view === b.view && a.top === b.top && a.collapsed === b.collapsed && a.searching === b.searching && a.slowest === b.slowest && a.active === b.active && a.focusable === b.focusable && a.selected === b.selected && a.sticky === b.sticky && a.renderIcon === b.renderIcon && (a.clockMs === b.clockMs || !open(a.row, a.clockMs) && !open(b.row, b.clockMs)));
 /** An elbow connector between two rows at one moment, drawn in the row's tone; appears when the clock reaches it. */
-function LinkMark({ link, rowHeight }) {
+function LinkMark({ link, rowHeight, hot }) {
 	const upper = Math.min(link.from, link.to), lower = Math.max(link.from, link.to);
 	const style = {
 		...at(link.atMs, link.atMs),
@@ -3000,7 +3022,7 @@ function LinkMark({ link, rowHeight }) {
 		height: (lower - upper) * rowHeight - 5
 	};
 	return /* @__PURE__ */ jsx("span", {
-		className: `fw-link fw-link-${link.dir}`,
+		className: `fw-link fw-link-${link.dir}${hot ? " fw-link-hot" : ""}`,
 		"data-tone": toneKey(link.tone),
 		style,
 		"aria-hidden": true
@@ -3397,7 +3419,8 @@ function FlowBody(props) {
 								"aria-hidden": true,
 								children: links.filter((link) => Math.max(link.from, link.to) >= first && Math.min(link.from, link.to) <= last).map((link) => /* @__PURE__ */ jsx(LinkMark, {
 									link,
-									rowHeight
+									rowHeight,
+									hot: props.focusId !== void 0 && (rows[link.from]?.id === props.focusId || rows[link.to]?.id === props.focusId)
 								}, link.id))
 							}), rows.slice(first, last).map((item, offset) => row(item, first + offset))]
 						}), rows.length === 0 && /* @__PURE__ */ jsx("p", {
@@ -4169,6 +4192,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 				slowestId: slowest?.id,
 				activeId,
 				selectedId: card?.pinned ? card.target : void 0,
+				focusId: cardAgent?.id ?? (view === "agents" ? activeId : void 0),
 				clockMs,
 				window: win,
 				trackPx,

package/package.json

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