@tangle-network/charts 0.21.4 → 0.21.6

package/dist/react/flow-waterfall.css

@@ -123,14 +123,20 @@
 .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: var(--fw-label-col); 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); }
+/* An event's line is drawn behind the rows, with the gridlines, so bars and labels cover it; its label stays on top. */
+.fw-root .fw-marker { --fw-marker: var(--fw-muted); position: absolute; top: 0; bottom: 0; width: 0; left: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px); }
+.fw-root .fw-marker-line { --fw-marker: var(--fw-muted); position: absolute; top: 0; bottom: 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-line[data-tone="ok"] { --fw-marker: var(--fw-ok); }
+.fw-root .fw-marker-line[data-tone="failed"] { --fw-marker: var(--fw-failed); }
 .fw-root .fw-marker[data-tone="ok"] { --fw-marker: var(--fw-ok); }
 .fw-root .fw-marker[data-tone="failed"] { --fw-marker: var(--fw-failed); }
 /* A pause: the run stood still. A hatched band across every row with its reason on top, never blank space. */
 .fw-root .fw-pause { position: absolute; top: 0; bottom: 0; left: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px); width: calc(max(0, var(--e) - var(--s)) * var(--fw-k) * 1px);
   background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--fw-text) 9%, transparent) 0 1px, transparent 1px 6px), color-mix(in oklab, var(--fw-text) 4%, transparent);
   border-inline: 1px dashed color-mix(in oklab, var(--fw-text) 24%, transparent); }
-.fw-root .fw-pause-label { position: sticky; top: 4px; display: block; width: max-content; max-width: calc(100% - 8px); margin: 4px auto 0; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+.fw-root .fw-pause-label b { font-weight: 600; color: var(--fw-text); }
+.fw-root .fw-pause { overflow: visible; }
+.fw-root .fw-pause-label { position: sticky; top: 4px; display: block; width: max-content; margin: 4px 0 0 50%; translate: -50% 0; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   border-radius: 4px; font-size: 12px; line-height: 20px; color: var(--fw-muted); background: var(--fw-surface); box-shadow: inset 0 0 0 1px var(--fw-border); }
 /* The label alone takes the pointer, for its reason; the band stays click-through to the rows. */
 .fw-root .fw-pause-label[title] { pointer-events: auto; cursor: help; }
@@ -231,6 +237,10 @@
 .fw-root .fw-view-agents .fw-bar.fw-k-pipeline.fw-has-marks { background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--tone) 28%, transparent) 0 1px, transparent 1px 5px), color-mix(in oklab, var(--tone) 9%, transparent); }
 .fw-root .fw-view-agents .fw-bar.fw-k-pipeline:not(.fw-has-marks, .fw-has-agents) { background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
 /* A host outcome re-tones the whole lane: dot, bar and marks. */
+/* Muted agents (the default): one quiet tone for every agent bar, its steps and handoffs; the slowest agent alone takes amber, and
+   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); }
+.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); }
@@ -256,11 +266,13 @@
 .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); }
 /* In the agent view a failed turn draws like any turn; the agent's own failure shows once, by its name and its end label. */
 .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-alert { color: var(--fw-muted); }
 .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), #fff); }
-.fw-root .fw-end { z-index: 2; display: inline-flex; align-items: center; gap: 8px; top: calc(50% + var(--fw-bar-shift) - var(--fw-bar-h) / 2); height: var(--fw-bar-h); left: calc(var(--x0) + max(var(--w), 3px) + 8px); white-space: nowrap; pointer-events: none; }
+/* End labels sit on the surface, so connectors and event lines stop at them, and never run past the lane: a label that would
+   be cut at the right edge slides back over its bar's tail instead. */
+.fw-root .fw-end { z-index: 2; display: inline-flex; align-items: center; gap: 8px; top: calc(50% + var(--fw-bar-shift) - var(--fw-bar-h) / 2); height: var(--fw-bar-h);
+  left: min(calc(var(--x0) + max(var(--w), 3px) + 4px), calc(100% - var(--fw-end-w, 0px) - 4px)); padding: 0 4px; border-radius: 4px; background: var(--fw-surface); white-space: nowrap; pointer-events: none; }
 .fw-root .fw-duration { font-size: 12px; 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: 999px; font-size: 12px; line-height: 16px; 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); }
@@ -292,7 +304,10 @@
 .fw-root.fw-root-agents .fw-card, .fw-root.fw-root-agents .fw-card-above .fw-card { position: relative; left: auto !important; top: auto !important; transform: none; animation-name: fw-arrive; width: auto; max-width: 560px; }
 .fw-root .fw-seg-alt { filter: brightness(.78); }
 /* Agent view: the scrubber track shows how far the run has played, so at rest it reads full, not empty. */
-.fw-root-agents .fw-slider { background: linear-gradient(90deg, color-mix(in oklab, var(--fw-accent) 45%, transparent) var(--fw-progress), var(--fw-well) var(--fw-progress)) 0 50% / 100% 4px no-repeat; }
+.fw-root.fw-root-agents .fw-slider { background: linear-gradient(90deg, var(--fw-accent) var(--fw-progress), var(--fw-well) var(--fw-progress)) 0 50% / 100% 6px no-repeat; }
+/* The playhead: a round knob on a filled track, visible at rest as the references show it. */
+.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: 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. */

package/dist/react/index.d.ts

@@ -399,9 +399,10 @@ interface FlowWaterfallProps {
   markers?: FlowMarker[];
   /** The time the reader moved to, in trace ms; `null` when following live or showing the whole trace. */
   onTimeChange?: (t: number | null) => void;
-  /** What a bar's color means: the agent (default), whose hue its steps and handoffs share, with the outcome on the row dot, legend and
-   * crash glyph; or its `outcome`. */
-  agentFill?: 'outcome' | 'agent';
+  /** What an agent bar's color means. Default: `outcome` when any agent carries one, so bars match the outcome legend, else `muted`.
+   * `muted`: every agent one quiet tone, color spent on state only (red for failure, amber for the slowest). `agent`: each agent its
+   * own hue, shared by its steps and handoffs. `outcome`: the bar takes its outcome's color. */
+  agentFill?: 'muted' | 'outcome' | 'agent';
   /** One line beside the title saying what the run was for, such as its goal. */
   description?: string;
   /** The row the host has selected, such as the agent whose transcript is open: it lifts and, in the agent view, its peers dim.
@@ -414,6 +415,6 @@ interface FlowWaterfallProps {
 }
 /** 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, onSelect, markers, onTimeChange, agentFill, selectedId, onDeselect, description, summary: showSummary }: FlowWaterfallProps): import("react").JSX.Element;
+export declare function FlowWaterfall({ trace, live, startedAt, label, defaultCollapsed, defaultView, renderIcon, maxHeight, onSelect, markers, onTimeChange, agentFill: fillProp, selectedId, onDeselect, description, summary: showSummary }: FlowWaterfallProps): import("react").JSX.Element;
 //#endregion
 export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, FlowWaterfallProps, GapBand, GapProps, 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

@@ -1,4 +1,4 @@
-import { G as hatchPath, J as markerPath, b as isRefusal, h as eventsGap, t as timeline, u as MARK_HEADS, y as markName } from "../timeline-B7c-cede.js";
+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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 //#region src/react/sparkline.tsx
@@ -2631,8 +2631,8 @@ function slowestRow(rows, clockMs) {
 function agentCallouts(agents, clockMs) {
 	let slowest, slowestMs = -1, costliest, top = -1, priced = 0, timed = 0;
 	for (const row of agents) {
-		if (row.durationLabel === "—" || row.span.startMs > clockMs) continue;
-		if (row.kind === "pipeline" && row.parentId !== void 0) {
+		if (row.durationLabel === "—" || row.span.startMs > clockMs || row.kind !== "pipeline" || row.id.startsWith("family:") || row.id.startsWith("run:")) continue;
+		if (row.parentId !== void 0) {
 			const ms = (spanRunning(row.span) ? Math.max(row.span.endMs, clockMs) : Math.min(row.span.endMs, clockMs)) - row.span.startMs;
 			timed += 1;
 			if (ms > slowestMs) {
@@ -2724,6 +2724,13 @@ const roleOf = (name) => name.replace(/[-\s]\d+$/, "");
 * Agents sharing a role fold into one family row until opened: a 17-agent run reads as its few roles, and the bar of a
 * family carries every member's work in each member's hue. Members follow their opened family, marked with `family`.
 */
+/** The families open by default: all of them when every agent fits in `rows`, so a reader sees each agent and its steps (the
+*  blind reviews preferred agent rows to `role ×N`); none on bigger runs. `flipped` holds the families the reader toggled. */
+function defaultOpenFamilies(agents, rows, flipped) {
+	const unfold = agents.length <= rows;
+	const ids = agentFamilies(agents, /* @__PURE__ */ new Set()).filter((row) => row.id.startsWith("family:")).map((row) => row.id);
+	return new Set(ids.filter((id) => unfold !== flipped.has(id)));
+}
 function agentFamilies(agents, open) {
 	const groups = /* @__PURE__ */ new Map();
 	for (const row of agents) {
@@ -3272,6 +3279,7 @@ const at = (startMs, endMs) => ({
 	"--s": startMs,
 	"--e": Number.isFinite(endMs) ? endMs : OPEN_END
 });
+const endLabelWidth = (label, slowest, costliest) => label.length * 7 + 8 + (slowest ? 74 : 0) + (costliest ? 84 : 0);
 function Segment({ mark, events, agentView, ending }) {
 	const glyph = mark.kind === "failed" ? agentView && !ending ? null : /* @__PURE__ */ jsx(FailGlyph, {}) : mark.retry ? /* @__PURE__ */ jsx(RetryGlyph, {}) : null;
 	return /* @__PURE__ */ jsx("span", {
@@ -3434,7 +3442,7 @@ const FlowRow = memo(function FlowRow(props) {
 					"aria-label": `${row.descendants} hidden steps`,
 					children: ["+", row.descendants]
 				}),
-				!row.ok && /* @__PURE__ */ jsx("span", {
+				!row.ok && !agentView && /* @__PURE__ */ jsx("span", {
 					className: "fw-alert",
 					children: /* @__PURE__ */ jsx(AlertGlyph, { label: "failed" })
 				})
@@ -3483,7 +3491,10 @@ const FlowRow = memo(function FlowRow(props) {
 				}, `${mark.id}-${i}`)),
 				/* @__PURE__ */ jsxs("span", {
 					className: "fw-end",
-					style: at(span.startMs, running ? OPEN_END : span.endMs),
+					style: {
+						...at(span.startMs, running ? OPEN_END : span.endMs),
+						"--fw-end-w": `${endLabelWidth(label, slowest, costliest)}px`
+					},
 					children: [
 						/* @__PURE__ */ jsx("span", {
 							className: "fw-duration",
@@ -3722,6 +3733,7 @@ function FlowBody(props) {
 	const ticks = clockTicks(win.startMs, tickEnd, Math.max(1, trackPx + (view === "spans" ? 72 : 0)));
 	const markerLabels = useMemo(() => {
 		const shown = /* @__PURE__ */ new Map();
+		if (view === "agents") return shown;
 		let freeFrom = -Infinity;
 		for (const marker of [...props.markers ?? []].sort((a, b) => a.at - b.at)) {
 			const x = (marker.at - win.startMs) / msPerPx;
@@ -3737,7 +3749,8 @@ function FlowBody(props) {
 		props.markers,
 		win.startMs,
 		msPerPx,
-		trackPx
+		trackPx,
+		view
 	]);
 	useEffect(() => {
 		const element = scroller.current;
@@ -3952,13 +3965,17 @@ function FlowBody(props) {
 		children: [axis, /* @__PURE__ */ jsxs("div", {
 			className: "fw-viewport",
 			children: [
-				/* @__PURE__ */ jsx("div", {
+				/* @__PURE__ */ jsxs("div", {
 					className: "fw-gridlayer",
 					"aria-hidden": true,
-					children: ticks.map((tick) => /* @__PURE__ */ jsx("span", {
+					children: [ticks.map((tick) => /* @__PURE__ */ jsx("span", {
 						className: "fw-gridline",
 						style: { "--s": tick }
-					}, tick))
+					}, tick)), props.markers?.map((marker) => /* @__PURE__ */ jsx("span", {
+						className: "fw-marker-line",
+						"data-tone": marker.tone ?? "neutral",
+						style: { "--s": marker.at }
+					}, `l-${marker.at}-${marker.label}`))]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					ref: scroller,
@@ -4014,10 +4031,10 @@ function FlowBody(props) {
 						title: pause.label,
 						children: /* @__PURE__ */ jsx("span", {
 							className: "fw-pause-label",
-							title: pause.detail,
-							tabIndex: pause.detail ? 0 : void 0,
-							"aria-label": pause.detail ? `${pause.label}: ${pause.detail}` : void 0,
-							children: pause.label
+							title: pause.detail ? `${pause.label}: ${pause.detail}` : pause.label,
+							tabIndex: 0,
+							"aria-label": `${pause.label}, ${duration(pause.endMs - pause.startMs)}${pause.detail ? `: ${pause.detail}` : ""}`,
+							children: /* @__PURE__ */ jsx("b", { children: duration(pause.endMs - pause.startMs) })
 						})
 					}, `p-${pause.startMs}`)), props.markers?.map((marker) => /* @__PURE__ */ jsx("span", {
 						className: "fw-marker",
@@ -4298,6 +4315,8 @@ function PlaybackBar({ view, playing, limit, clockMs, speed, zoom, marks, slider
 //#endregion
 //#region src/react/flow-waterfall.tsx
 const LANE_PAD = 12;
+const AGENT_ROWS = 20;
+const UNFOLD_ROWS = 12;
 const END_LABEL_GUTTER = {
 	spans: 120,
 	agents: 176
@@ -4408,7 +4427,7 @@ function OutcomeLegend({ agents }) {
 }
 /** 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, onSelect, markers, onTimeChange, agentFill = "agent", selectedId, onDeselect, description, summary: showSummary = true }) {
+function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defaultCollapsed = false, defaultView = "spans", renderIcon, maxHeight, onSelect, markers, onTimeChange, agentFill: fillProp, selectedId, onDeselect, description, summary: showSummary = true }) {
 	const root = useRef(null);
 	const search = useRef(null);
 	const slider = useRef(null);
@@ -4430,6 +4449,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	const [laneElement, setLaneElement] = useState(null);
 	const observedTotal = Number.isFinite(trace.totalMs) && trace.totalMs >= 0 ? trace.totalMs : 0;
 	const isLive = live ?? trace.spans.some(spanRunning);
+	const agentFill = fillProp ?? (trace.spans.some((span) => span.kind === "pipeline" && span.outcome) ? "outcome" : "muted");
 	const dataEnd = useMemo(() => Math.max(observedTotal, ...trace.spans.map((span) => Number.isFinite(span.endMs) ? span.endMs : 0)), [trace, observedTotal]);
 	const trackPx = Math.max(40, laneWidth - LANE_PAD - Math.min(END_LABEL_GUTTER[view], laneWidth * .3));
 	useEffect(() => {
@@ -4482,7 +4502,8 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		return pipelines.length ? pipelines : rows.filter((row) => !row.parentId);
 	}, [rows]);
 	const sharedDetail = agents.length > 1 && agents.every((row) => row.span.detail && row.span.detail === agents[0]?.span.detail) ? agents[0]?.span.detail : void 0;
-	const [openFamilies, setOpenFamilies] = useState(/* @__PURE__ */ new Set());
+	const [flippedFamilies, setFlippedFamilies] = useState(/* @__PURE__ */ new Set());
+	const openFamilies = useMemo(() => defaultOpenFamilies(agents, UNFOLD_ROWS, flippedFamilies), [agents, flippedFamilies]);
 	const [openSteps, setOpenSteps] = useState(/* @__PURE__ */ new Set());
 	const visible = useMemo(() => view === "agents" ? agentViewRows(agents, rows, openFamilies, openSteps) : visibleFlowWaterfallRows(rows, query, collapsed), [
 		view,
@@ -4499,7 +4520,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		visible,
 		clockMs
 	]);
-	const rowsHeight = maxHeight ?? (view === "agents" ? ROW_HEIGHT.agents * 20 : 640);
+	const rowsHeight = maxHeight ?? (view === "agents" ? ROW_HEIGHT.agents * AGENT_ROWS : 640);
 	const resized = useRef(false);
 	useLayoutEffect(() => {
 		if (view !== "agents" || resized.current || !root.current) return;
@@ -4600,7 +4621,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	const toggleNow = (row) => {
 		const flip = (open) => new Set(open.has(row.id) ? [...open].filter((id) => id !== row.id) : [...open, row.id]);
 		if (row.id.startsWith("family:")) {
-			setOpenFamilies(flip);
+			setFlippedFamilies(flip);
 			return;
 		}
 		onSelect?.(row.span);
@@ -4697,8 +4718,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	const cardAgent = cardRow && (() => {
 		for (let cursor = cardRow; cursor; cursor = cursor.parentId ? byId.get(cursor.parentId) : void 0) if (cursor.kind === "pipeline") return shown(cursor);
 	})();
-	const moving = isLive || position !== null || playing;
-	const showCursor = moving || view === "agents";
+	const showCursor = isLive || position !== null || playing || view === "agents";
 	const overviewMarks = useMemo(() => rows.filter((row) => !row.parentId).flatMap((row) => row.hasChildren ? row.segments : row.kind === "pipeline" ? [] : [{
 		startMs: row.span.startMs,
 		endMs: row.span.endMs,
@@ -4737,7 +4757,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		ref: root,
 		"data-flow-waterfall": true,
 		"aria-label": label,
-		className: `fw-root fw-root-${view}`,
+		className: `fw-root fw-root-${view} fw-fill-${agentFill}`,
 		"data-selection": selectedId ? "" : void 0,
 		style: {
 			"--fw-name-w": `${nameWidth}px`,
@@ -4865,7 +4885,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 				collapsed,
 				searching: Boolean(query.trim()),
 				pauses: trace.pauses,
-				cursorLine: moving,
+				cursorLine: position !== null || playing,
 				sharedDetail,
 				expandedIds: view === "agents" ? /* @__PURE__ */ new Set([...openFamilies, ...openSteps]) : void 0,
 				holdHeight: isLive,
@@ -4879,7 +4899,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 				trackPx,
 				showCursor,
 				markers,
-				fillByAgent: agentFill === "agent",
+				fillByAgent: agentFill !== "outcome",
 				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.21.4",
+  "version": "0.21.6",
   "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",