@tangle-network/charts 2.0.0 → 2.0.1

package/README.md

@@ -6,6 +6,8 @@ The React entry also exports `DayBars`, `HBars`, `Histogram`, `Lines`, `Meter`,
 
 `FlowWaterfall` from `@tangle-network/charts/react` is the shared live trace inspector: an agent timeline (one row per agent, elbow handoffs, hatched waiting) and a virtualized span waterfall over one clock. It owns hierarchy layout, folding, search, playback, zoom, span cards and running-span growth. Producers own identity, `parentId`, explicit `status` and observed totals. Import `@tangle-network/charts/react/flow-waterfall.css`; its `fw-*` classes and six-field summary support hosts without a Tailwind build. Every color, radius and shadow in it is a Brand role (text, card, hairline, well, chart grid, status inks, the categorical tones for agents), so the host loads `@tangle-network/brand` `tokens.css` (or `legacy-light.css`) and sets its theme; the stylesheet has no color of its own. The React-free root exports the `FlowSpan` and `FlowTrace` types.
 
+`FlowWaterfall` accepts optional `graph` and `latestEvents` React nodes. Supplying `graph` adds Graph to its existing Agents/Steps view control, including `defaultView="graph"`. The trace clock and controlled selection survive switches. Graph hides waterfall-only controls; `latestEvents` stays mounted in the header across all views.
+
 `WaterfallHeader`, `WaterfallTimeAxis`, `WaterfallBar` and `WaterfallRow` remain available for existing consumers that own their own hierarchy and selection. All use the same `waterfallSpanGeometry` and `waterfallTicks`. Existing fixed-width cells, tones, formatting, attribution slots and unordered-time `—` marks are preserved. Optional fluid tracks, inner-bar colour/class, overlay and clipping fields support the shared inspector without changing existing calls. The primitives were extracted from Intelligence under [brand #211](https://github.com/tangle-network/brand/pull/211); the shared inspector extends that presentation ownership while leaving failure interpretation with producers.
 
 Five figures cover the decisions a benchmark reader makes:
@@ -350,3 +352,4 @@ CHARTS_REACT_VERSION=19 CHARTS_PROOF_DIR=/tmp/charts-react19 node scripts/charts
 ```
 
 Consumers: agent-record adapts record provenance; agent-app supplies application trace producers; Creative consumes both. Intelligence already uses the row/axis primitives with its controlled virtualized tree. Tangle Website’s `RecordedRunWaterfall` uses the Header/Row primitives; Blueprint Agent’s execution timeline is a separately owned follow-up. Keep these existing primitives exported. Agent-record’s earlier agent-app dependency increased its installed graph from 134 to 256 package versions (tangle-tools #1674); adopting the lower chart owner removes that framework dependency, with the actual new graph measured by the deployment owner.
+

package/dist/react/flow-waterfall.css

@@ -83,11 +83,13 @@
 .fw-root .fw-search-input::placeholder { color: var(--fw-muted); }
 .fw-root .fw-search-input::-webkit-search-cancel-button { display: none; }
 
-.fw-root .fw-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--fw-border); }
+.fw-root .fw-summary { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--fw-border); }
 .fw-root .fw-summary > div { padding: 12px 16px; min-width: 0; }
-.fw-root .fw-summary > div + div { border-left: 1px solid var(--fw-border); }
-.fw-root .fw-summary dt { font-size: 14px; line-height: 18px; color: var(--fw-muted); }
-.fw-root .fw-value { margin-top: 4px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.fw-root .fw-summary > div:nth-child(-n+2) { flex: 1; }
+.fw-root .fw-summary > div:nth-child(n+3) { display: flex; align-items: baseline; gap: 4px; padding: 8px 6px; color: var(--fw-muted); }
+.fw-root .fw-summary dt { font-size: 14px; line-height: 20px; color: var(--fw-muted); }
+.fw-root .fw-value { margin-top: 4px; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.fw-root .fw-summary > div:nth-child(n+3) .fw-value { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: normal; }
 .fw-root .fw-has-errors .fw-value { color: var(--fw-failed); }
 
 .fw-root .fw-axis { display: grid; grid-template-columns: var(--fw-label-col) minmax(0, 1fr); height: 32px; color: var(--fw-muted); font-size: 14px; }
@@ -203,7 +205,7 @@
 .fw-root :is(.fw-bar, .fw-seg):hover { filter: brightness(1.18); box-shadow: inset 0 0 0 1px var(--line), 0 0 0 2px color-mix(in oklab, var(--line) 55%, transparent); z-index: 1; }
 .fw-root .fw-bar.fw-k-tool { background: var(--dim); box-shadow: inset 0 0 0 1px var(--dim-line); }
 .fw-root .fw-bar.fw-k-handoff { background: var(--line); height: 8px; top: calc(50% + var(--fw-bar-shift) - 4px); box-shadow: none; }
-.fw-root .fw-bar.fw-k-waiting { background: repeating-linear-gradient(-45deg, var(--fw-hatch) 0 1px, transparent 1px 5px); box-shadow: inset 0 0 0 1px var(--fw-hatch); }
+.fw-root .fw-bar.fw-k-waiting, .fw-root .fw-kinds .fw-swatch-wait { background: repeating-linear-gradient(-45deg, var(--fw-hatch) 0 1px, transparent 1px 5px); box-shadow: inset 0 0 0 1px var(--fw-hatch); }
 .fw-root .fw-bar.fw-k-failed { background: color-mix(in oklab, var(--fw-failed) 22%, var(--fw-surface)); box-shadow: inset 0 0 0 1px var(--fw-failed); color: var(--fw-failed); }
 .fw-root .fw-bar.fw-k-pipeline { background: linear-gradient(90deg, var(--fw-neutral-bar), color-mix(in oklab, var(--fw-neutral-bar) 55%, var(--fw-surface))); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-text) 12%, transparent); }
 .fw-root .fw-bar.fw-k-pipeline.fw-has-marks { background: repeating-linear-gradient(-45deg, var(--fw-hatch) 0 1px, transparent 1px 5px); box-shadow: inset 0 0 0 1px var(--fw-hatch); }
@@ -227,7 +229,7 @@
 .fw-root.fw-fill-agent .fw-kinds .fw-swatch-model { background: var(--model-fill); }
 .fw-root.fw-fill-agent .fw-kinds .fw-swatch-tool { background: var(--tool-fill); }
 .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-wait { width: 12px; height: 8px; border-radius: 2px; }
 .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; }
@@ -384,10 +386,7 @@
 .fw-root .fw-card .fw-agent-dot:not([data-outcome]) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fw-muted); }
 @container flow-waterfall (max-width: 599px) {
   .fw-root > * { --fw-label-col: 0px; --fw-bar-shift: 8px; --fw-bar-h: 8px; --fw-row-h: 44px; }
-  .fw-root .fw-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-  .fw-root .fw-summary > div { padding: 8px; }
-  .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 .fw-summary > div:nth-child(-n+2) { flex-basis: 50%; padding: 6px 8px; }
   .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; }

package/dist/react/index.d.ts

@@ -459,7 +459,7 @@ export declare function flowWaterfallRows(trace: FlowTrace, resolutionMs?: numbe
 export declare function criticalPathIds(rows: readonly FlowWaterfallRow[]): ReadonlySet<string>;
 //#endregion
 //#region src/react/flow-waterfall-row.d.ts
-type FlowView = 'spans' | 'agents';
+type FlowView = 'spans' | 'agents' | 'graph';
 //#endregion
 //#region src/react/flow-waterfall-time.d.ts
 interface ViewWindow {
@@ -480,6 +480,10 @@ interface FlowWaterfallProps {
   defaultCollapsed?: boolean;
   /** `agents` shows one row per agent (the agent timeline); expanding a row opens the full span tree. */
   defaultView?: FlowView;
+  /** Host graph rendered by the same view control, retaining the trace clock and selection. */
+  graph?: ReactNode;
+  /** Shared header feed, kept mounted across Agents, Steps and Graph. */
+  latestEvents?: ReactNode;
   /** Host brand marks by span; the inspector draws kind glyphs without it. */
   renderIcon?: (span: FlowSpan) => ReactNode;
   /** Scroll height of the rows; the tree is virtualized beyond it. Defaults to 20 agent rows, or 640 px of steps. */
@@ -519,7 +523,7 @@ 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: fillProp, selectedId, onDeselect, description, summary: showSummary, criticalPath, query: queryProp, onQueryChange, collapsed: collapsedProp, onCollapsedChange, zoom: zoomProp, onZoomChange, matchSpan }: FlowWaterfallProps): import("react").JSX.Element;
+export declare function FlowWaterfall({ trace, live, startedAt, label, defaultCollapsed, defaultView, graph, latestEvents, renderIcon, maxHeight, onSelect, markers, onTimeChange, agentFill: fillProp, selectedId, onDeselect, description, summary: showSummary, criticalPath, query: queryProp, onQueryChange, collapsed: collapsedProp, onCollapsedChange, zoom: zoomProp, onZoomChange, matchSpan }: FlowWaterfallProps): import("react").JSX.Element;
 //#endregion
 //#region src/react/flow-waterfall-icons.d.ts
 /** Kind glyphs drawn when the host supplies no `renderIcon`. Brand marks belong to the host. */

package/dist/react/index.js

@@ -6934,10 +6934,15 @@ function agentFamilies(agents, open) {
 	const hue = (row) => row.tone <= 0 || ++next > 5 ? 0 : 1 + [...roleOf(row.name)].reduce((hash, c) => hash * 31 + c.charCodeAt(0) >>> 0, 0) % 5;
 	for (const [role, members] of groups) {
 		if (members.length < 2) {
-			out.push(...members.map((row) => ({
+			const row = members[0], tone = hue(row);
+			out.push({
 				...row,
-				tone: hue(row)
-			})));
+				tone,
+				own: row.own.map((mark) => ({
+					...mark,
+					tone
+				}))
+			});
 			continue;
 		}
 		const tone = hue(members[0]);
@@ -7960,7 +7965,8 @@ function clampWindow(view, limitMs) {
 //#region src/react/flow-waterfall-body.tsx
 const ROW_HEIGHT = {
 	spans: 36,
-	agents: 40
+	agents: 40,
+	graph: 40
 };
 const OVERSCAN = 8;
 /** Rows re-render once per CHUNK rows scrolled; overscan covers the rows in between. */
@@ -8690,11 +8696,13 @@ const AGENT_ROWS = 20;
 const UNFOLD_ROWS = 12;
 const END_LABEL_GUTTER = {
 	spans: 120,
-	agents: 176
+	agents: 176,
+	graph: 176
 };
 const NAME_WIDTH = {
 	spans: 320,
-	agents: 240
+	agents: 240,
+	graph: 240
 };
 /** State the host may own: its value wins when given, and every change is reported either way. */
 function useHostable(value, onChange, initial) {
@@ -8771,7 +8779,7 @@ const TONE_ORDER = [
 	"ok"
 ];
 /** What each mark means, as the agent view draws it; a key only for kinds the run has. */
-function KindLegend({ rows }) {
+function KindLegend({ rows, fill }) {
 	const has = (kind) => rows.some((row) => row.own.some((mark) => mark.kind === kind) || row.span.kind === kind);
 	const shown = [
 		["model", "Model call"],
@@ -8780,13 +8788,19 @@ function KindLegend({ rows }) {
 		["handoff", "Handoff"]
 	].filter(([kind]) => kind === "waiting" ? rows.some((row) => row.kind === "pipeline") : kind === "handoff" ? rows.some((row) => row.span.handoffTo || row.hasAgents) : has(kind));
 	if (shown.length === 0) return null;
-	return /* @__PURE__ */ jsx("ul", {
+	const example = rows.find((row) => toneKey(row.tone) > 0 && row.own.some((mark) => mark.kind === "model")) ?? rows.find((row) => row.own.length);
+	return /* @__PURE__ */ jsxs("ul", {
 		className: "fw-legend fw-kinds",
 		"aria-label": "Key",
-		children: shown.map(([kind, name]) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", {
+		"data-tone": fill === "agent" ? toneKey(example?.tone ?? 0) : void 0,
+		"data-example": example?.id,
+		children: [shown.map(([kind, name]) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", {
 			className: `fw-swatch-${kind === "waiting" ? "wait" : kind}`,
 			"aria-hidden": true
-		}), name] }, kind))
+		}), name] }, kind)), /* @__PURE__ */ jsx("li", {
+			className: "fw-kind-rule",
+			children: fill === "agent" ? "Bar color identifies family; shade identifies work." : "Shade identifies work."
+		})]
 	});
 }
 /** The axis dots and the dashed lines they drop: one key naming what they mark (a release, or the kinds the host gave). */
@@ -8886,17 +8900,37 @@ function OutcomeLegend({ agents, selected, onFilter, neutral }) {
 		]
 	});
 }
+function ViewControl({ view, graph, onChange }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "fw-views",
+		role: "radiogroup",
+		"aria-label": "Trace view",
+		children: [
+			"agents",
+			"spans",
+			...graph ? ["graph"] : []
+		].map((option) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			role: "radio",
+			"aria-checked": view === option,
+			disabled: view === option,
+			className: "fw-view-button",
+			onClick: () => onChange(option),
+			children: option === "agents" ? "Agents" : option === "spans" ? "Steps" : "Graph"
+		}, option))
+	});
+}
 /** 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: fillProp, selectedId, onDeselect, description, summary: showSummary = true, criticalPath = false, query: queryProp, onQueryChange, collapsed: collapsedProp, onCollapsedChange, zoom: zoomProp, onZoomChange, matchSpan }) {
+function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defaultCollapsed = false, defaultView = "spans", graph, latestEvents, renderIcon, maxHeight, onSelect, markers, onTimeChange, agentFill: fillProp, selectedId, onDeselect, description, summary: showSummary = true, criticalPath = false, query: queryProp, onQueryChange, collapsed: collapsedProp, onCollapsedChange, zoom: zoomProp, onZoomChange, matchSpan }) {
 	const root = useRef(null);
 	const search = useRef(null);
 	const slider = useRef(null);
 	const timeOutput = useRef(null);
 	const hideTimer = useRef(void 0);
-	const searchId = useId();
-	const cardId = useId();
-	const [view, setView] = useState(defaultView);
+	const searchId = useId(), cardId = useId();
+	const [requestedView, setView] = useState(defaultView);
+	const view = requestedView === "graph" && graph == null ? "agents" : requestedView;
 	const [query, setQuery] = useHostable(queryProp, onQueryChange, "");
 	const [collapsed, setCollapsed] = useHostable(collapsedProp, onCollapsedChange, () => new Set(defaultCollapsed ? trace.spans.flatMap((span) => span.parentId ? [span.parentId] : []) : []));
 	const [speed, setSpeed] = useState(1);
@@ -9012,6 +9046,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	}, [view, agents]);
 	useEffect(() => {
 		const keydown = (event) => {
+			if (view === "graph") return;
 			const active = document.activeElement;
 			const ownsFocus = root.current?.contains(active);
 			if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "f") {
@@ -9326,7 +9361,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 									done && speedup >= 1.05 ? ` · ${speedup.toFixed(1)}x parallel` : ""
 								]
 							}),
-							failedAgents > 0 && /* @__PURE__ */ jsxs("button", {
+							view !== "graph" && failedAgents > 0 && /* @__PURE__ */ jsxs("button", {
 								type: "button",
 								className: "fw-text-button fw-alert",
 								"aria-pressed": filter === "__errors",
@@ -9338,7 +9373,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 									" failed"
 								]
 							}),
-							quietAgents > 0 && /* @__PURE__ */ jsxs("button", {
+							view !== "graph" && quietAgents > 0 && /* @__PURE__ */ jsxs("button", {
 								type: "button",
 								className: "fw-text-button fw-quiet",
 								"aria-pressed": filter === "__quiet",
@@ -9351,7 +9386,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 								children: "Live"
 							})
 						]
-					}), /* @__PURE__ */ jsxs("details", {
+					}), view !== "graph" && /* @__PURE__ */ jsxs("details", {
 						className: "fw-key",
 						open: root.current ? root.current.clientWidth >= 600 : true,
 						children: [/* @__PURE__ */ jsxs("summary", { children: ["Key", /* @__PURE__ */ jsx(ChevronGlyph, {})] }), /* @__PURE__ */ jsxs("div", {
@@ -9363,30 +9398,24 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 									selected: filter,
 									onFilter: applyFilter
 								}),
-								view === "agents" && /* @__PURE__ */ jsx(KindLegend, { rows }),
+								view === "agents" && /* @__PURE__ */ jsx(KindLegend, {
+									rows: visible,
+									fill: agentFill
+								}),
 								/* @__PURE__ */ jsx(MarkerLegend, { markers })
 							]
 						})]
 					})]
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "fw-tools",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "fw-views",
-						role: "radiogroup",
-						"aria-label": "Trace view",
-						children: ["agents", "spans"].map((option) => /* @__PURE__ */ jsx("button", {
-							type: "button",
-							role: "radio",
-							"aria-checked": view === option,
-							disabled: view === option,
-							className: "fw-view-button",
-							onClick: () => {
-								setView(option);
-								setNameWidth(NAME_WIDTH[option]);
-								setCard(null);
-							},
-							children: option === "agents" ? "Agents" : "Steps"
-						}, option))
+					children: [/* @__PURE__ */ jsx(ViewControl, {
+						view,
+						graph: graph != null,
+						onChange: (option) => {
+							setView(option);
+							setNameWidth(NAME_WIDTH[option]);
+							setCard(null);
+						}
 					}), view === "spans" && /* @__PURE__ */ jsxs("div", {
 						className: "fw-search",
 						children: [
@@ -9420,91 +9449,94 @@ 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 !== void 0 && errors > 0 ? "fw-has-errors" : void 0,
-					children: [/* @__PURE__ */ jsx("dt", { children: name }), /* @__PURE__ */ jsx("dd", {
-						className: "fw-value",
-						title,
-						children: name === "Errors" ? /* @__PURE__ */ jsx("button", {
-							type: "button",
-							"aria-pressed": filter === "__errors",
-							onClick: () => applyFilter("__errors"),
-							children: value
-						}) : value
-					})]
-				}, name))
-			}),
-			view === "agents" && playback,
-			/* @__PURE__ */ jsx(FlowBody, {
-				rows: visible,
-				byId,
-				totalRows: rows.length,
-				view,
-				maxHeight: rowsHeight,
-				collapsed,
-				searching: Boolean(query.trim()),
-				query,
-				matchSpan,
-				pauses: trace.pauses,
-				errorTimes,
-				cursorLine: isLive || position !== null || playing,
-				sharedDetail,
-				sharedOutcome,
-				expandedIds: view === "agents" ? /* @__PURE__ */ new Set([...openFamilies, ...openSteps]) : void 0,
-				holdHeight: isLive,
-				slowestId: slowest?.id ?? callouts.slowestId,
-				costliestId: callouts.costliestId,
-				criticalIds: criticalPath && view === "spans" ? critical : void 0,
-				activeId,
-				selectedId: selection,
-				focusId: cardAgent?.id ?? (view === "agents" ? activeId : void 0),
-				clockMs,
-				window: win,
-				trackPx,
-				showCursor,
-				markers,
-				fillByAgent: agentFill !== "outcome",
-				zoomed: zoom !== null,
-				renderIcon,
-				emptyText: rows.length === 0 ? "No spans yet. Waiting for trace events." : `No matching steps for “${query}”.`,
-				onToggle: toggle,
-				onInspect: inspect,
-				onLeave: leave,
-				onPin: pin,
-				onActivate: (row) => setActiveId(row.id),
-				onActiveChange: setActiveId,
-				onScrub: scrubTo,
-				onZoom: zoomBy,
-				onPan: pan,
-				nameWidth,
-				onNameWidth: (px) => {
-					resized.current = true;
-					setNameWidth(Math.max(140, Math.min(560, px)));
-				},
-				onTrack: setLaneElement,
-				onExpandAll: rows.some((row) => row.hasChildren) ? () => setCollapsed(/* @__PURE__ */ new Set()) : void 0,
-				onCollapseAll: () => setCollapsed(new Set(rows.filter((row) => row.hasChildren).map((row) => row.id)))
-			}),
-			card && cardRow && /* @__PURE__ */ jsx("div", {
-				className: `fw-card-anchor${card.above && card.top === void 0 ? " fw-card-above" : ""}`,
-				onPointerEnter: () => clearTimeout(hideTimer.current),
-				onPointerLeave: card.pinned ? void 0 : leave,
-				children: /* @__PURE__ */ jsx(SpanCard, {
-					id: cardId,
-					row: cardRow,
-					agent: cardAgent,
+			latestEvents,
+			view === "graph" ? graph : /* @__PURE__ */ jsxs(Fragment, { children: [
+				showSummary && /* @__PURE__ */ jsx("dl", {
+					className: "fw-summary",
+					children: summary.map(([name, value, title]) => /* @__PURE__ */ jsxs("div", {
+						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,
+							children: name === "Errors" ? /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-pressed": filter === "__errors",
+								onClick: () => applyFilter("__errors"),
+								children: value
+							}) : value
+						})]
+					}, name))
+				}),
+				view === "agents" && playback,
+				/* @__PURE__ */ jsx(FlowBody, {
+					rows: visible,
+					byId,
+					totalRows: rows.length,
+					view,
+					maxHeight: rowsHeight,
+					collapsed,
+					searching: Boolean(query.trim()),
+					query,
+					matchSpan,
+					pauses: trace.pauses,
+					errorTimes,
+					cursorLine: isLive || position !== null || playing,
+					sharedDetail,
+					sharedOutcome,
+					expandedIds: view === "agents" ? /* @__PURE__ */ new Set([...openFamilies, ...openSteps]) : void 0,
+					holdHeight: isLive,
+					slowestId: slowest?.id ?? callouts.slowestId,
+					costliestId: callouts.costliestId,
+					criticalIds: criticalPath && view === "spans" ? critical : void 0,
+					activeId,
+					selectedId: selection,
+					focusId: cardAgent?.id ?? (view === "agents" ? activeId : void 0),
 					clockMs,
-					left: card.left,
-					top: card.top ?? (card.above ? card.anchorTop - 8 : card.anchorBottom + 8),
-					pinned: card.pinned,
-					onClose: closeCard,
+					window: win,
+					trackPx,
+					showCursor,
+					markers,
+					fillByAgent: agentFill !== "outcome",
+					zoomed: zoom !== null,
 					renderIcon,
-					compact: view === "agents"
-				})
-			}),
-			view === "spans" && playback
+					emptyText: rows.length === 0 ? "No spans yet. Waiting for trace events." : `No matching steps for “${query}”.`,
+					onToggle: toggle,
+					onInspect: inspect,
+					onLeave: leave,
+					onPin: pin,
+					onActivate: (row) => setActiveId(row.id),
+					onActiveChange: setActiveId,
+					onScrub: scrubTo,
+					onZoom: zoomBy,
+					onPan: pan,
+					nameWidth,
+					onNameWidth: (px) => {
+						resized.current = true;
+						setNameWidth(Math.max(140, Math.min(560, px)));
+					},
+					onTrack: setLaneElement,
+					onExpandAll: rows.some((row) => row.hasChildren) ? () => setCollapsed(/* @__PURE__ */ new Set()) : void 0,
+					onCollapseAll: () => setCollapsed(new Set(rows.filter((row) => row.hasChildren).map((row) => row.id)))
+				}),
+				card && cardRow && /* @__PURE__ */ jsx("div", {
+					className: `fw-card-anchor${card.above && card.top === void 0 ? " fw-card-above" : ""}`,
+					onPointerEnter: () => clearTimeout(hideTimer.current),
+					onPointerLeave: card.pinned ? void 0 : leave,
+					children: /* @__PURE__ */ jsx(SpanCard, {
+						id: cardId,
+						row: cardRow,
+						agent: cardAgent,
+						clockMs,
+						left: card.left,
+						top: card.top ?? (card.above ? card.anchorTop - 8 : card.anchorBottom + 8),
+						pinned: card.pinned,
+						onClose: closeCard,
+						renderIcon,
+						compact: view === "agents"
+					})
+				}),
+				view === "spans" && playback
+			] })
 		]
 	});
 }

package/package.json

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