@tangle-network/charts 0.21.13 → 0.21.15

package/dist/react/flow-waterfall.css

@@ -196,8 +196,10 @@
 .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; }
 /* One 16 px line that wraps its last part out of sight: when the line is full the tool count drops whole, never "7 to…". */
-.fw-root .fw-view-agents .fw-subtitle { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; height: 16px; overflow: hidden; max-width: 100%; min-width: 0; color: var(--fw-muted); font-size: 13px; line-height: 16px; }
+.fw-root .fw-view-agents .fw-subtitle { display: flex; align-items: center; column-gap: 4px; height: 16px; overflow: hidden; max-width: 100%; min-width: 0; color: var(--fw-muted); font-size: 13px; line-height: 16px; }
 .fw-root .fw-view-agents .fw-subtitle-extra { flex: none; white-space: nowrap; }
+/* Only the tail wraps, so the text is always first on its line and shrinks with an ellipsis; the tool count wraps out of sight. */
+.fw-root .fw-view-agents .fw-subtitle-tail { display: flex; flex-wrap: wrap; column-gap: 4px; height: 16px; overflow: hidden; min-width: 0; flex: 0 1 auto; }
 .fw-root .fw-view-agents .fw-subtitle-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .fw-root .fw-view-agents .fw-detail-icon { flex: none; width: 16px; height: 16px; align-items: center; justify-content: center; overflow: hidden; }
 .fw-root .fw-view-agents .fw-detail { font-size: 12px; line-height: 16px; }
@@ -224,6 +226,9 @@
 .fw-root .fw-row[data-running] .fw-bar { transition: width 120ms linear; }
 /* The chain that gates the trace's end: an accent edge under its bars, so cutting latency there is visibly what moves the end. */
 .fw-root .fw-row[data-critical] .fw-bar { box-shadow: inset 0 -2px 0 var(--fw-accent); }
+/* 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. */
 .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); opacity: var(--on); pointer-events: auto; }
@@ -284,6 +289,12 @@
    agent's own hue (the rules above), so each agent stays one color. */
 .fw-root:is(.fw-fill-muted, .fw-fill-outcome) .fw-view-agents .fw-seg-model { background: var(--fw-kind-model); box-shadow: none; }
 .fw-root:is(.fw-fill-muted, .fw-fill-outcome) .fw-view-agents .fw-seg-tool { background: var(--fw-kind-tool); box-shadow: none; }
+/* Per-agent hues at full saturation (blind round 26: muted per-agent bars "blur together", "wash out on white"): kind is a darker or
+   lighter step of the agent's own saturated hue, every solid segment at least 3:1 against the card; waiting stays the only pale fill. */
+.fw-root.fw-fill-agent .fw-view-agents .fw-seg-model { background: light-dark(color-mix(in oklab, var(--tone) 78%, #000), var(--tone)); box-shadow: none; }
+.fw-root.fw-fill-agent .fw-view-agents .fw-seg-tool { background: light-dark(var(--tone), color-mix(in oklab, var(--tone) 72%, #fff)); box-shadow: none; }
+/* A failed turn is still the agent's work: it keeps the agent's saturated hue, and the red cross on the ending turn says it failed. */
+.fw-root.fw-fill-agent .fw-view-agents .fw-seg-failed { background: light-dark(var(--tone), color-mix(in oklab, var(--tone) 72%, #fff)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-failed) 55%, transparent); }
 .fw-root .fw-view-agents .fw-seg-tool { container-type: inline-size; justify-content: flex-start; }
 .fw-root .fw-seg-name { padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; line-height: 16px; font-weight: 600; color: light-dark(#fff, #06222b); pointer-events: none; }
 @container (max-width: 56px) { .fw-root .fw-seg-name { display: none; } }

package/dist/react/index.js

@@ -2422,6 +2422,7 @@ function DotMap({ positions, radii, colors, palette, extent, rects, labels, dimm
 }
 //#endregion
 //#region src/react/flow-waterfall-model.ts
+const toolOf = (name) => name?.split(" · ")[0];
 /** The CSS hue slot: 0 is the root agent's neutral, then five agent hues cycle. */
 const toneKey = (tone) => tone <= 0 ? 0 : (tone - 1) % 5 + 1;
 const spanFailed = (span) => span.status === "failed";
@@ -2474,6 +2475,7 @@ function mergeSegments(marks, gapMs, cap = 240) {
 				covered.set(last, share);
 				last.endMs = Math.max(last.endMs, mark.endMs);
 				last.count += mark.count;
+				if (last.tool !== mark.tool) last.tool = void 0;
 				last.kind = share.model >= share.tool ? "model" : "tool";
 			} else out.push({ ...mark });
 		}
@@ -2587,18 +2589,23 @@ function segmentOf(row) {
 		id: row.id,
 		count: 1,
 		retry: row.retry,
-		name: row.name
+		name: row.name,
+		tool: toolOf(row.name)
 	};
 }
+/** The rows a search term matches by themselves, before ancestor context is added. */
+function searchMatchIds(rows, query, matchSpan) {
+	const term = query.trim();
+	const lower = term.toLowerCase();
+	return new Set(rows.filter((row) => matchSpan ? matchSpan(row.span, term) : `${row.name} ${row.span.detail ?? ""} ${row.kind} ${row.ok ? "" : "failed"} ${row.span.status ?? ""}`.toLowerCase().includes(lower)).map((row) => row.id));
+}
 /** Search keeps ancestor context and deliberately reveals matches inside collapsed branches. */
 function visibleFlowWaterfallRows(rows, query, collapsed, matchSpan) {
 	const byId = new Map(rows.map((row) => [row.id, row]));
-	const term = query.trim().toLowerCase();
-	if (term) {
+	if (query.trim()) {
 		const matching = /* @__PURE__ */ new Set();
-		for (const row of rows) {
-			if (matchSpan ? !matchSpan(row.span, query.trim()) : !`${row.name} ${row.span.detail ?? ""} ${row.kind} ${row.ok ? "" : "failed"} ${row.span.status ?? ""}`.toLowerCase().includes(term)) continue;
-			let cursor = row;
+		for (const id of searchMatchIds(rows, query, matchSpan)) {
+			let cursor = byId.get(id);
 			while (cursor && !matching.has(cursor.id)) {
 				matching.add(cursor.id);
 				cursor = cursor.parentId ? byId.get(cursor.parentId) : void 0;
@@ -2632,7 +2639,12 @@ function slowestRow(rows, clockMs) {
 * chain ends last wins. Cutting latency anywhere else leaves the trace's end unchanged. */
 function criticalPathIds(rows) {
 	const children = /* @__PURE__ */ new Map();
-	for (const row of rows) if (row.parentId) children.set(row.parentId, [...children.get(row.parentId) ?? [], row]);
+	for (const row of rows) {
+		if (!row.parentId) continue;
+		const siblings = children.get(row.parentId);
+		if (siblings) siblings.push(row);
+		else children.set(row.parentId, [row]);
+	}
 	let best;
 	for (const root of rows) {
 		if (root.parentId) continue;
@@ -2777,7 +2789,7 @@ function agentFamilies(agents, open) {
 		const endMs = Math.max(...members.map((row) => row.span.endMs));
 		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.ok).length;
+		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;
 		out.push({
 			costFloor: known.length < members.length || members.some((row) => row.costFloor),
@@ -2848,7 +2860,7 @@ function agentSummary(row) {
 	};
 	const turns = counts.model + counts.failed;
 	const tools = counts.tool;
-	const state = row.span.outcome?.label ?? (spanRunning(row.span) ? "running" : row.ok ? "done" : "failed");
+	const state = row.span.outcome?.label ?? (spanRunning(row.span) ? "running" : !row.ok ? "failed" : row.kind === "pipeline" ? "" : "done");
 	const unit = row.kind === "pipeline" ? ["turn", "turns"] : ["model call", "model calls"];
 	return [
 		state,
@@ -2919,7 +2931,8 @@ function stepRuns(steps) {
 				id: step.id,
 				count: 1,
 				retry: step.retry,
-				name: step.name
+				name: step.name,
+				tool: toolOf(step.name)
 			})),
 			...costs.length ? { rollupCostUsd: costs.reduce((sum, cost) => sum + cost, 0) } : {},
 			span: {
@@ -3313,7 +3326,7 @@ const at = (startMs, endMs) => ({
 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;
-	const named = agentView && mark.kind === "tool" && mark.count === 1 && mark.name;
+	const named = agentView && mark.kind === "tool" && (mark.count === 1 ? mark.name : mark.tool && `${mark.tool} ×${mark.count}`);
 	return /* @__PURE__ */ jsx("span", {
 		className: `fw-seg fw-seg-${mark.kind}${mark.alt ? " fw-seg-alt" : ""}`,
 		"data-tone": toneKey(mark.tone),
@@ -3329,7 +3342,7 @@ function Segment({ mark, events, agentView, ending }) {
 			children: glyph
 		}) : named && /* @__PURE__ */ jsx("span", {
 			className: "fw-seg-name",
-			children: mark.name
+			children: named
 		})
 	});
 }
@@ -3346,7 +3359,7 @@ function endLabel(row, clockMs) {
 }
 /** One trace row. Geometry comes from CSS variables, so a row re-renders only when its own state changes. */
 const FlowRow = memo(function FlowRow(props) {
-	const { row, view, top, collapsed, searching, slowest, costliest, critical, active, focusable, selected, sticky, clockMs, renderIcon, fillByAgent, motion } = props;
+	const { row, view, top, collapsed, searching, slowest, costliest, critical, matched, active, focusable, selected, sticky, clockMs, renderIcon, fillByAgent, motion } = props;
 	const span = row.span;
 	const running = spanRunning(span);
 	const agentView = view === "agents";
@@ -3368,6 +3381,7 @@ const FlowRow = memo(function FlowRow(props) {
 		"data-span-kind": kind,
 		"data-slowest": slowest || void 0,
 		"data-critical": critical || void 0,
+		"data-search": searching ? matched ? "match" : "context" : void 0,
 		"data-running": running || void 0,
 		"aria-level": agentView ? void 0 : row.depth + 1,
 		"aria-expanded": row.hasChildren && !agentView ? !folded : void 0,
@@ -3469,21 +3483,20 @@ const FlowRow = memo(function FlowRow(props) {
 						]
 					}), agentView && /* @__PURE__ */ jsxs("span", {
 						className: "fw-subtitle",
-						children: [
-							renderIcon && /* @__PURE__ */ jsx("span", {
-								className: "fw-detail-icon",
-								"aria-hidden": true,
-								children: renderIcon(span)
-							}),
-							/* @__PURE__ */ jsx("span", {
+						children: [renderIcon && /* @__PURE__ */ jsx("span", {
+							className: "fw-detail-icon",
+							"aria-hidden": true,
+							children: renderIcon(span)
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "fw-subtitle-tail",
+							children: [/* @__PURE__ */ jsx("span", {
 								className: "fw-subtitle-text",
 								children: span.detail && span.detail !== props.sharedDetail ? `${span.detail} · ${summary[0]}` : summary[0]
-							}),
-							summary[1] && /* @__PURE__ */ jsxs("span", {
+							}), summary[1] && /* @__PURE__ */ jsxs("span", {
 								className: "fw-subtitle-extra",
 								children: ["· ", summary[1]]
-							})
-						]
+							})]
+						})]
 					})]
 				}),
 				folded && /* @__PURE__ */ jsxs("span", {
@@ -3562,7 +3575,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.costliest === b.costliest && a.critical === b.critical && a.active === b.active && a.focusable === b.focusable && a.selected === b.selected && a.sticky === b.sticky && a.motion === b.motion && a.renderIcon === b.renderIcon && a.fillByAgent === b.fillByAgent && a.sharedDetail === b.sharedDetail && a.expanded === b.expanded && (a.clockMs === b.clockMs || !open(a.row, a.clockMs) && !open(b.row, b.clockMs)));
+}, (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.costliest === b.costliest && a.critical === b.critical && a.matched === b.matched && a.active === b.active && a.focusable === b.focusable && a.selected === b.selected && a.sticky === b.sticky && a.motion === b.motion && a.renderIcon === b.renderIcon && a.fillByAgent === b.fillByAgent && a.sharedDetail === b.sharedDetail && a.expanded === b.expanded && (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, hot }) {
 	const upper = Math.min(link.from, link.to), lower = Math.max(link.from, link.to);
@@ -3774,6 +3787,12 @@ function FlowBody(props) {
 		props.byId,
 		view
 	]);
+	const matched = useMemo(() => searching ? searchMatchIds(rows, props.query, props.matchSpan) : void 0, [
+		searching,
+		rows,
+		props.query,
+		props.matchSpan
+	]);
 	const index = useMemo(() => new Map(rows.map((row, i) => [row.id, i])), [rows]);
 	const motion = useRowMotion(rows);
 	const [jumped, setJumped] = useState();
@@ -3847,13 +3866,24 @@ function FlowBody(props) {
 	}, []);
 	const first = Math.max(0, chunk * CHUNK - OVERSCAN);
 	const last = Math.min(rows.length, chunk * CHUNK + Math.ceil(viewport / rowHeight) + CHUNK + OVERSCAN);
+	const scrollToRow = (i, element) => {
+		const offset = (view === "spans" ? Math.min(STICKY_LEVELS, rows[i].depth) : 0) * rowHeight;
+		if (i * rowHeight - offset < element.scrollTop) element.scrollTop = Math.max(0, i * rowHeight - offset);
+		else if ((i + 1) * rowHeight > element.scrollTop + element.clientHeight) element.scrollTop = (i + 1) * rowHeight - element.clientHeight;
+	};
+	const shownSelection = useRef(void 0);
+	useEffect(() => {
+		if (!selectedId || selectedId === shownSelection.current) return;
+		const i = index.get(selectedId);
+		if (i === void 0 || !scroller.current) return;
+		shownSelection.current = selectedId;
+		scrollToRow(i, scroller.current);
+	});
 	const focusRow = (id) => {
 		const i = index.get(id);
 		const element = scroller.current;
 		if (i === void 0 || !element) return;
-		const offset = (view === "spans" ? Math.min(STICKY_LEVELS, rows[i].depth) : 0) * rowHeight;
-		if (i * rowHeight - offset < element.scrollTop) element.scrollTop = Math.max(0, i * rowHeight - offset);
-		else if ((i + 1) * rowHeight > element.scrollTop + element.clientHeight) element.scrollTop = (i + 1) * rowHeight - element.clientHeight;
+		scrollToRow(i, element);
 		props.onActiveChange(id);
 		requestAnimationFrame(() => element.querySelector(`.fw-canvas [data-span-id="${CSS.escape(id)}"]`)?.focus({ preventScroll: true }));
 	};
@@ -4021,6 +4051,7 @@ function FlowBody(props) {
 		slowest: item.id === slowestId,
 		costliest: item.id === props.costliestId,
 		critical: props.criticalIds?.has(item.id),
+		matched: matched?.has(item.id),
 		active: item.id === activeId,
 		focusable: !isSticky && (item.id === activeId || (activeId === void 0 || !index.has(activeId)) && i === 0),
 		selected: item.id === selectedId,
@@ -4975,6 +5006,8 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 				maxHeight: rowsHeight,
 				collapsed,
 				searching: Boolean(query.trim()),
+				query,
+				matchSpan,
 				pauses: trace.pauses,
 				cursorLine: position !== null || playing,
 				sharedDetail,

package/package.json

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