@tangle-network/charts 0.21.22 → 0.21.23

package/dist/{flow-trace-CSy-mQ31.d.ts → flow-trace-KGCtujbr.d.ts}

@@ -366,8 +366,11 @@ interface FlowPause {
 }
 /** A host verdict: `label` is the legend text, `tone` the status color. */
 interface FlowOutcome {
-  tone: 'ok' | 'neutral' | 'failed' | 'warn';
+  /** `live` is a running agent: the one running hue the host uses for every live mark. */
+  tone: 'ok' | 'live' | 'neutral' | 'failed' | 'warn';
   label: string;
+  /** A hollow ring in the tone instead of a filled dot: a second outcome on the same tone (Done beside Shipped, Stopped beside a plain end). */
+  ring?: boolean;
 }
 /** A labelled instant on the trace clock, such as a release or an alert; drawn as a line across the rows. */
 interface FlowMarker {

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-CSy-mQ31.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-KGCtujbr.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

@@ -21,6 +21,8 @@
   --fw-failed: var(--surface-danger-text);
   --fw-ok: var(--surface-success-text);
   --fw-amber: var(--surface-warning-text);
+  /* The running hue: a live agent's dot, outcome and pill. The host sets it to the one running ink its other pages use. */
+  --fw-live: var(--fw-accent);
   /* Step kinds inside an agent bar: the chart accent and a categorical hue, far from the outcome greens and reds. */
   --fw-kind-model: var(--chart-accent);
   --fw-kind-tool: var(--tone-cyan-icon);
@@ -85,10 +87,10 @@
 .fw-root .fw-title { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; }
 .fw-root .fw-state { display: inline-flex; align-items: center; gap: 8px; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: var(--fw-muted); background: var(--fw-well); flex-shrink: 0; }
 .fw-root .fw-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
-.fw-root .fw-state-live { color: var(--fw-accent); background: color-mix(in oklab, var(--fw-accent) 12%, transparent); }
+.fw-root .fw-state-live { color: var(--fw-live); background: color-mix(in oklab, var(--fw-live) 12%, transparent); }
 .fw-root .fw-state-live::before { animation: fw-pulse 1.6s var(--fw-ease) infinite; }
-.fw-root .fw-headline { color: var(--fw-muted); display: flex; align-items: center; gap: 8px; }
-.fw-root .fw-done-mark { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--fw-ok); color: var(--fw-ok); font-size: 12px; line-height: 1; }
+.fw-root .fw-headline { color: var(--fw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.fw-root .fw-headline::before { content: "·"; margin-right: 8px; }
 .fw-root .fw-tools { display: flex; align-items: center; gap: 8px; }
 .fw-root .fw-views { display: inline-flex; padding: 4px; border-radius: var(--radius-md); background: var(--fw-well); border: 1px solid var(--fw-border); }
 .fw-root .fw-view-button { appearance: none; border: 0; background: transparent; height: 24px; padding: 0 12px; border-radius: var(--radius-sm); font-size: 14px; color: var(--fw-muted); cursor: pointer; transition: background-color 120ms var(--fw-ease), color 120ms var(--fw-ease); }
@@ -208,6 +210,8 @@
 .fw-root .fw-agent-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--line, var(--fw-muted)); }
 /* The dot is outcome only (critique P0 #3): an agent with no recorded outcome gets a hollow ring, never its lane hue. */
 .fw-root .fw-row:not([data-outcome]) .fw-agent-dot:not([data-outcome]) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fw-muted); }
+.fw-root :is(.fw-agent-dot, .fw-legend .fw-swatch)[data-ring] { background: transparent; box-shadow: inset 0 0 0 2px var(--line, var(--fw-muted)); }
+.fw-root :is(.fw-agent-dot, .fw-legend .fw-swatch)[data-outcome="live"]:not([data-ring]) { box-shadow: 0 0 0 3px color-mix(in oklab, var(--fw-live) 22%, transparent); }
 
 /* Lanes and marks */
 .fw-root .fw-lane { position: relative; overflow: hidden; min-width: 0; }
@@ -234,9 +238,9 @@
 /* While searching, ancestors shown only for context recede and the matching names stand out. */
 .fw-root .fw-row[data-search="context"] .fw-label { opacity: 0.55; }
 .fw-root .fw-row[data-search="match"] .fw-name-text { font-weight: 600; }
-/* A restart: an amber notch through the bar at that moment; the bar keeps its own state. */
+/* A restart: a notch in the failure ink through the bar at that moment (the run overview's ✕); the bar keeps its own state. */
 .fw-root .fw-mark { position: absolute; z-index: 2; left: calc(var(--x0) - 1px); width: 2px; top: calc(50% + var(--fw-bar-shift) - var(--fw-bar-h) / 2 - 4px); height: calc(var(--fw-bar-h) + 8px);
-  border-radius: 2px; background: var(--fw-amber); box-shadow: 0 0 0 1px var(--fw-surface); pointer-events: auto; }
+  border-radius: 2px; background: var(--fw-failed); box-shadow: 0 0 0 1px var(--fw-surface); pointer-events: auto; }
 /* Centered by top, not a negative margin, so measured spacing stays on the grid. */
 .fw-root :is(.fw-bar, .fw-seg) { top: calc(50% + var(--fw-bar-shift) - var(--fw-bar-h) / 2); height: var(--fw-bar-h); width: max(var(--w), calc(var(--on) * 3px)); border-radius: var(--radius-tag); cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; }
 .fw-root .fw-bar { background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
@@ -263,10 +267,10 @@
    failure keeps its red glyph, so color only ever means state. */
 .fw-root.fw-fill-muted .fw-view-agents [data-tone] { --tone: var(--fw-h0); }
 /* With per-agent hues the slowest agent keeps its own hue and says so with the amber pill (round 27: an amber-brown bar read "muddy"). */
-.fw-root.fw-fill-muted .fw-view-agents .fw-row[data-slowest], .fw-root.fw-fill-muted .fw-view-agents .fw-row[data-slowest] [data-tone] { --tone: var(--fw-amber); }
 .fw-root [data-outcome="ok"], .fw-root [data-outcome="ok"] [data-tone] { --tone: var(--fw-ok); }
 .fw-root [data-outcome="failed"], .fw-root [data-outcome="failed"] [data-tone] { --tone: var(--fw-failed); }
 .fw-root [data-outcome="warn"], .fw-root [data-outcome="warn"] [data-tone] { --tone: var(--fw-amber); }
+.fw-root [data-outcome="live"], .fw-root [data-outcome="live"] [data-tone] { --tone: var(--fw-live); }
 .fw-root [data-outcome="neutral"], .fw-root [data-outcome="neutral"] [data-tone] { --tone: var(--fw-muted); }
 .fw-root .fw-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--fw-muted); font-size: 14px; line-height: 18px; }
 .fw-root .fw-legend li { display: inline-flex; align-items: center; gap: 8px; }
@@ -279,6 +283,7 @@
 .fw-root.fw-fill-agent .fw-kinds .fw-swatch-tool { background: light-dark(oklch(0.80 0 0), oklch(0.64 0 0)); }
 .fw-root .fw-kinds .fw-swatch-tool { width: 12px; height: 8px; border-radius: 2px; background: var(--fw-kind-tool); }
 .fw-root .fw-kinds .fw-swatch-wait { width: 12px; height: 8px; border-radius: 2px; background: color-mix(in oklab, var(--fw-text) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-text) 18%, transparent); }
+.fw-root .fw-kinds .fw-swatch-event { width: 8px; height: 8px; border-radius: 50%; background: var(--fw-muted); box-shadow: 0 0 0 2px var(--fw-surface); }
 .fw-root .fw-kinds .fw-swatch-handoff { width: 10px; height: 8px; border-left: 1.5px solid var(--fw-muted); border-bottom: 1.5px solid var(--fw-muted); border-bottom-left-radius: 3px; }
 .fw-root .fw-description { margin: 0; color: var(--fw-muted); font-size: 14px; line-height: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .fw-root .fw-legend .fw-swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
@@ -317,9 +322,9 @@
 .fw-root .fw-seg-chip { padding: 0 4px; border-radius: var(--radius-pill); background: color-mix(in oklab, currentColor 18%, transparent); font-weight: 600; font-variant-numeric: tabular-nums; }
 .fw-root .fw-seg-meta { font-variant-numeric: tabular-nums; }
 @container (max-width: 24px) { .fw-root :is(.fw-seg-label, .fw-view-agents .fw-seg .fw-glyph) { display: none; } }
-/* Fail and retry read as filled chips inside the bar, red and amber, as the references draw them. */
+/* Fail and retry read as filled chips inside the bar: red, and a quiet grey for a retry that recovered. */
 .fw-root .fw-view-agents .fw-seg .fw-glyph { flex: none; margin-left: 6px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--fw-failed); color: light-dark(var(--fw-surface), hsl(var(--hsl-background))); }
-.fw-root .fw-view-agents .fw-seg .fw-glyph[data-glyph="retry"] { background: var(--fw-amber); }
+.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: 9px; 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); }
@@ -335,7 +340,7 @@
   background: linear-gradient(var(--fw-tint, transparent) 0 0), var(--fw-surface); white-space: nowrap; pointer-events: none; }
 .fw-root .fw-duration { font-size: 14px; color: var(--fw-muted); font-variant-numeric: tabular-nums; }
 .fw-root .fw-k-failed ~ .fw-end .fw-duration { color: var(--fw-failed); }
-.fw-root .fw-badge { height: 18px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 14px; line-height: 18px; font-weight: 600; color: var(--fw-amber); background: color-mix(in oklab, var(--fw-amber) 13%, transparent); border: 1px solid color-mix(in oklab, var(--fw-amber) 28%, transparent); }
+.fw-root .fw-badge { height: 20px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fw-muted); background: transparent; box-shadow: inset 0 0 0 1px var(--fw-border); }
 
 /* Handoff elbows: 1.5 px stroke, 6 px radius, a 5 px dot where the handoff leaves its sender. */
 /* Under the rows (which follow it), so end labels and badges always sit above the connectors. */
@@ -364,7 +369,7 @@
 /* The playhead: a round knob on a thin neutral track, visible at rest without outweighing the chart. */
 .fw-root.fw-root-agents .fw-slider::-webkit-slider-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--fw-text); box-shadow: 0 0 0 3px var(--fw-surface); }
 .fw-root.fw-root-agents .fw-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--fw-text); box-shadow: 0 0 0 3px var(--fw-surface); }
-.fw-root .fw-card { position: absolute; z-index: 20; width: min(320px, calc(100% - 16px)); padding: 12px; border-radius: var(--radius-xl); background: var(--fw-raised); border: 1px solid var(--fw-border);
+.fw-root .fw-card { position: absolute; z-index: 20; width: min(320px, calc(100% - 16px)); max-height: min(60vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: 12px; border-radius: var(--radius-xl); background: var(--fw-raised); border: 1px solid var(--fw-border);
   box-shadow: var(--shadow-dropdown); 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; }
@@ -377,7 +382,7 @@
 .fw-root .fw-card-name { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
 .fw-root .fw-pill { flex-shrink: 0; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 14px; line-height: 20px; font-weight: 600; }
 .fw-root .fw-pill-done { color: var(--fw-ok); background: color-mix(in oklab, var(--fw-ok) 13%, transparent); }
-.fw-root .fw-pill-running { color: var(--fw-accent); background: color-mix(in oklab, var(--fw-accent) 13%, transparent); }
+.fw-root .fw-pill-running { color: var(--fw-live); background: color-mix(in oklab, var(--fw-live) 13%, transparent); }
 .fw-root .fw-pill-failed { color: var(--fw-failed); background: color-mix(in oklab, var(--fw-failed) 13%, transparent); }
 .fw-root .fw-icon-button { appearance: none; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--fw-muted); cursor: pointer; flex-shrink: 0; }
 .fw-root .fw-icon-button:hover:not(:disabled) { background: var(--fw-hover); color: var(--fw-text); }
@@ -390,7 +395,8 @@
 /* A value of several parts wraps between parts, never inside one ("4.0M" / "cached"). */
 .fw-root .fw-card-parts { display: flex; flex-wrap: wrap; column-gap: 4px; }
 .fw-root .fw-card-parts > * { white-space: nowrap; }
-.fw-root .fw-card-parts > * + *::before { content: "· "; color: var(--fw-muted); }
+.fw-root .fw-card-parts:not(.fw-card-stack) > * + *::before { content: "· "; color: var(--fw-muted); }
+.fw-root .fw-card-stack { flex-direction: column; }
 .fw-root .fw-card-tools { display: grid; grid-template-columns: minmax(0, max-content) max-content; justify-content: start; column-gap: 16px; margin-top: 4px; color: var(--fw-muted); font-weight: 400; }
 .fw-root .fw-card-tools > span { display: contents; }
 .fw-root .fw-card-tools > span > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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

package/dist/react/index.js

@@ -2450,7 +2450,7 @@ function formatCost(usd) {
 /** 9.8k, 754.4k, 1.2M with the exact count left to a title. */
 function formatCount(n) {
 	if (n < 1e3) return String(n);
-	if (n < 1e6) return `${(n / 1e3).toFixed(1)}k`;
+	if (n < 1e6) return `${(n / 1e3).toFixed(1)}K`;
 	return `${(n / 1e6).toFixed(1)}M`;
 }
 /** Merge marks closer than `gapMs` so a dense row stays a readable strip of at most `cap` marks. Marks narrower
@@ -2859,7 +2859,7 @@ function agentFamilies(agents, open) {
 		const running = members.some((row) => spanRunning(row.span));
 		const known = members.map((row) => row.span.costUsd ?? row.rollupCostUsd).filter((cost) => cost !== void 0);
 		const failed = members.filter((row) => row.span.outcome ? row.span.outcome.tone === "failed" : !row.ok).length;
-		const outcome = members.every((row) => row.span.outcome && row.span.outcome.tone === members[0].span.outcome?.tone) ? members[0].span.outcome : void 0;
+		const outcome = members.every((row) => row.span.outcome && row.span.outcome.tone === members[0].span.outcome?.tone && !row.span.outcome.ring === !members[0].span.outcome?.ring) ? members[0].span.outcome : void 0;
 		out.push({
 			costFloor: known.length < members.length || members.some((row) => row.costFloor),
 			id,
@@ -2913,7 +2913,7 @@ function agentFamilies(agents, open) {
 	}
 	return out;
 }
-/** The second line of an agent row in parts: how it ended and how much it did (failed, 3 LLM calls, 412 tool calls; 6 agents, 4 failed).
+/** The second line of an agent row in parts: how it ended and how much it did (failed, 3 model calls, 412 tool calls; 6 agents, 4 failed).
 * The row shows the parts in order and drops the last ones whole when the line is full, never half a word. */
 function agentSummary(row) {
 	if (row.id.startsWith("family:")) {
@@ -2928,7 +2928,7 @@ function agentSummary(row) {
 	const tools = row.counts?.tool ?? 0;
 	return [
 		row.span.outcome?.label ?? (spanRunning(row.span) ? "running" : !row.ok ? "failed" : row.kind === "pipeline" ? "" : "done"),
-		calls ? `${calls} LLM ${calls === 1 ? "call" : "calls"}` : "",
+		calls ? `${calls} model ${calls === 1 ? "call" : "calls"}` : "",
 		tools ? `${tools} tool ${tools === 1 ? "call" : "calls"}` : ""
 	].filter(Boolean);
 }
@@ -3170,7 +3170,7 @@ const FitGlyph = () => svg(/* @__PURE__ */ jsx("path", { d: "M2.5 6V3.5a1 1 0 0
 const keepWords = (name) => name.replace(/-/g, "‑");
 const KIND_LABEL = {
 	pipeline: "Agent",
-	model: "LLM call",
+	model: "Model call",
 	tool: "Tool call",
 	waiting: "Waiting",
 	handoff: "Handoff"
@@ -3203,19 +3203,19 @@ function metrics(row, clockMs, full) {
 			["cached", "cached"]
 		].flatMap(([key, unit]) => tokens[key] === void 0 ? [] : [count(tokens[key], unit)]);
 		out.push(["Tokens", /* @__PURE__ */ jsx("span", {
-			className: "fw-card-parts",
+			className: `fw-card-parts${parts.length > 2 ? " fw-card-stack" : ""}`,
 			children: parts.map((part, i) => /* @__PURE__ */ jsx("span", { children: part }, i))
 		})]);
 	}
 	const latency = row.modelMs;
-	if (latency?.length) out.push(["LLM latency", /* @__PURE__ */ jsxs("span", {
+	if (latency?.length) out.push(["Model latency", /* @__PURE__ */ jsxs("span", {
 		className: "fw-card-parts",
 		children: [/* @__PURE__ */ jsxs("span", { children: [formatSpanDuration(percentile(latency, .5)), " median"] }), latency.length >= 10 && /* @__PURE__ */ jsxs("span", { children: [formatSpanDuration(percentile(latency, .95)), " p95"] })]
 	})]);
 	const cost = span.costUsd ?? row.rollupCostUsd;
 	if (cost !== void 0) out.push(["Cost", rowCostText(row, cost)]);
 	const counts = row.counts;
-	if (counts?.model) out.push(["LLM calls", counts.model.toLocaleString()]);
+	if (counts?.model) out.push(["Model calls", counts.model.toLocaleString()]);
 	if (counts?.tool) {
 		const tools = Object.entries(counts.tools).sort(([a, x], [b, y]) => y - x || a.localeCompare(b));
 		const rest = tools.length - TOOLS_SHOWN;
@@ -3285,6 +3285,7 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 					children: [
 						/* @__PURE__ */ jsx("span", {
 							className: "fw-agent-dot",
+							"data-ring": outcome?.ring || void 0,
 							"aria-hidden": true
 						}),
 						/* @__PURE__ */ jsx("span", {
@@ -3547,13 +3548,14 @@ const FlowRow = memo(function FlowRow(props) {
 								className: "fw-agent-dot",
 								"data-tone": "0",
 								"data-outcome": span.outcome.tone,
+								"data-ring": span.outcome.ring || void 0,
 								title: span.outcome.label,
 								"aria-hidden": true
 							}) : agentView && !step && /* @__PURE__ */ jsx("span", {
 								className: "fw-agent-dot",
 								"aria-hidden": true
 							}),
-							running && /* @__PURE__ */ jsx("span", {
+							running && !(fillByAgent && isAgent && span.outcome) && /* @__PURE__ */ jsx("span", {
 								className: "fw-spinner",
 								role: "status",
 								"aria-label": "running"
@@ -4550,9 +4552,9 @@ function summaryCells(trace, at, durationMs) {
 				`${tokens.toLocaleString()} tokens`
 			],
 			[
-				"LLM calls",
+				"Model calls",
 				modelCalls === void 0 ? "—" : modelCalls.toLocaleString(),
-				modelCalls === void 0 ? "Model output windows do not establish the number of LLM requests" : void 0
+				modelCalls === void 0 ? "Model output windows do not establish the number of model requests" : void 0
 			],
 			[
 				"Tool calls",
@@ -4565,6 +4567,7 @@ function summaryCells(trace, at, durationMs) {
 }
 /** One legend item per outcome label the agents carry, with its count; nothing when no agent has an outcome. */
 const TONE_ORDER = [
+	"live",
 	"ok",
 	"warn",
 	"failed",
@@ -4589,6 +4592,25 @@ function KindLegend({ rows }) {
 		}), name] }, kind))
 	});
 }
+/** The axis dots and the dashed lines they drop: one key naming what they mark (a release, or the kinds the host gave). */
+function MarkerLegend({ markers }) {
+	if (!markers?.length) return null;
+	const kinds = [...new Set(markers.map((marker) => marker.kind ?? "event"))];
+	const name = kinds.length === 1 ? `${kinds[0][0].toUpperCase()}${kinds[0].slice(1)}` : "Event";
+	return /* @__PURE__ */ jsx("ul", {
+		className: "fw-legend fw-kinds",
+		"aria-label": "Markers",
+		children: /* @__PURE__ */ jsxs("li", { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "fw-swatch-event",
+				"aria-hidden": true
+			}),
+			name,
+			" ",
+			/* @__PURE__ */ jsx("b", { children: markers.length })
+		] })
+	});
+}
 function OutcomeLegend({ agents }) {
 	const items = /* @__PURE__ */ new Map();
 	for (const row of agents) {
@@ -4596,6 +4618,7 @@ function OutcomeLegend({ agents }) {
 		if (!outcome) continue;
 		const item = items.get(outcome.label) ?? {
 			tone: outcome.tone,
+			ring: outcome.ring,
 			count: 0
 		};
 		item.count += 1;
@@ -4611,6 +4634,7 @@ function OutcomeLegend({ agents }) {
 				className: "fw-swatch",
 				"data-tone": "0",
 				"data-outcome": item.tone,
+				"data-ring": item.ring || void 0,
 				"aria-hidden": true
 			}),
 			label,
@@ -4873,11 +4897,13 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		const preferred = card.above ? room.above : room.below;
 		const other = card.above ? room.below : room.above;
 		const above = box.height <= preferred || box.height > other && preferred >= other ? card.above : !card.above;
+		const floor = globalThis.innerHeight - hostTop - 8 - box.height;
+		const top = Math.max(Math.min(above ? card.anchorTop - 8 - box.height : card.anchorBottom + 8, floor), Math.max(8, 8 - hostTop));
 		setCard({
 			...card,
 			fitted: true,
 			above,
-			top: above ? Math.max(8, card.anchorTop - 8 - box.height) : card.anchorBottom + 8
+			top
 		});
 	}, [card, cardId]);
 	latest.current.inspect = (target, element, x) => {
@@ -4994,51 +5020,47 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 				className: "fw-heading",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "fw-title-block",
-					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "fw-title-line",
-							children: [
-								/* @__PURE__ */ jsx("span", {
-									className: "fw-title-glyph",
-									"aria-hidden": true,
-									children: /* @__PURE__ */ jsx(TraceGlyph, {})
-								}),
-								/* @__PURE__ */ jsx("h3", {
-									className: "fw-title",
-									children: label
-								}),
-								description && /* @__PURE__ */ jsx("p", {
-									className: "fw-description",
-									title: description,
-									children: description
-								}),
-								isLive && /* @__PURE__ */ jsx("span", {
-									className: "fw-state fw-state-live",
-									children: "Live"
-								})
-							]
-						}),
-						view === "agents" && /* @__PURE__ */ jsxs("p", {
-							className: "fw-headline",
-							"aria-live": "polite",
-							children: [
-								done && /* @__PURE__ */ jsx("span", {
-									className: "fw-done-mark",
-									"aria-label": "done",
-									children: "✓"
-								}),
-								agents.length,
-								" ",
-								agents.length === 1 ? "agent" : "agents",
-								sharedDetail ? ` · ${agents.every((row) => row.span.detail === sharedDetail) ? "" : "mostly "}${sharedDetail}` : "",
-								done && speedup >= 1.05 ? ` · ${speedup.toFixed(1)}x parallel` : ""
-							]
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "fw-legends",
-							children: [/* @__PURE__ */ jsx(OutcomeLegend, { agents }), view === "agents" && /* @__PURE__ */ jsx(KindLegend, { rows })]
-						})
-					]
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "fw-title-line",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "fw-title-glyph",
+								"aria-hidden": true,
+								children: /* @__PURE__ */ jsx(TraceGlyph, {})
+							}),
+							/* @__PURE__ */ jsx("h3", {
+								className: "fw-title",
+								children: label
+							}),
+							description && /* @__PURE__ */ jsx("p", {
+								className: "fw-description",
+								title: description,
+								children: description
+							}),
+							view === "agents" && /* @__PURE__ */ jsxs("p", {
+								className: "fw-headline",
+								"aria-live": "polite",
+								children: [
+									agents.length,
+									" ",
+									agents.length === 1 ? "agent" : "agents",
+									sharedDetail ? ` · ${agents.every((row) => row.span.detail === sharedDetail) ? "" : "mostly "}${sharedDetail}` : "",
+									done && speedup >= 1.05 ? ` · ${speedup.toFixed(1)}x parallel` : ""
+								]
+							}),
+							isLive && /* @__PURE__ */ jsx("span", {
+								className: "fw-state fw-state-live",
+								children: "Live"
+							})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "fw-legends",
+						children: [
+							/* @__PURE__ */ jsx(OutcomeLegend, { agents }),
+							view === "agents" && /* @__PURE__ */ jsx(KindLegend, { rows }),
+							/* @__PURE__ */ jsx(MarkerLegend, { markers })
+						]
+					})]
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "fw-tools",
 					children: [/* @__PURE__ */ jsx("div", {

package/package.json

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