@tangle-network/charts 0.21.17 → 0.21.19

package/dist/react/flow-waterfall.css

@@ -259,7 +259,8 @@
 /* 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:is(.fw-fill-muted, .fw-fill-agent) .fw-view-agents .fw-row[data-slowest], .fw-root:is(.fw-fill-muted, .fw-fill-agent) .fw-view-agents .fw-row[data-slowest] [data-tone] { --tone: var(--fw-amber); }
+/* 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); }
@@ -291,14 +292,30 @@
 .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) 75%, var(--fw-text)), 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%, var(--fw-text))); box-shadow: none; }
+   lighter step of the agent's own saturated hue; waiting stays the only pale fill. Light theme sits one step softer (round 27: the
+   saturated light bars read "heavy"). */
+.fw-root.fw-fill-agent .fw-view-agents .fw-seg-model { background: light-dark(color-mix(in oklab, var(--tone) 88%, var(--fw-text)), var(--tone)); box-shadow: none; }
+.fw-root.fw-fill-agent .fw-view-agents .fw-seg-tool { background: light-dark(color-mix(in oklab, var(--tone) 84%, var(--fw-surface)), color-mix(in oklab, var(--tone) 72%, var(--fw-text))); 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%, var(--fw-text))); 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: 12px; line-height: 16px; font-weight: 600; color: light-dark(var(--fw-surface), hsl(var(--hsl-background))); pointer-events: none; }
-@container (max-width: 56px) { .fw-root .fw-seg-name { display: none; } }
+.fw-root.fw-fill-agent .fw-view-agents .fw-seg-failed { background: light-dark(color-mix(in oklab, var(--tone) 84%, var(--fw-surface)), color-mix(in oklab, var(--tone) 72%, var(--fw-text))); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-failed) 55%, transparent); }
+.fw-root .fw-view-agents .fw-seg { container-type: inline-size; justify-content: flex-start; font-size: 12px; line-height: 16px; white-space: nowrap; color: var(--fw-seg-ink); }
+/* Label ink holds 4.5:1 on its fill: light text on the darker model step, a near-black of the agent's hue on the lighter tool step
+   (round 28: white on the pale light-theme fills failed); on dark the steps are bright, so ink is the page's dark. */
+.fw-root .fw-view-agents .fw-seg-model { --fw-seg-ink: light-dark(var(--fw-surface), hsl(var(--hsl-background))); }
+.fw-root .fw-view-agents :is(.fw-seg-tool, .fw-seg-failed) { --fw-seg-ink: light-dark(color-mix(in oklab, var(--tone) 18%, black), hsl(var(--hsl-background))); }
+.fw-root .fw-view-agents .fw-seg > * { pointer-events: none; }
+/* One line, 6 px in from each end; a part that does not fit whole wraps to the hidden second line, so trailing parts drop first. */
+.fw-root .fw-seg-label { flex: 1; min-width: 0; height: 16px; margin: 0 6px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; overflow: hidden; }
+.fw-root .fw-seg-label > * { flex: none; height: 16px; display: inline-flex; align-items: center; }
+.fw-root .fw-seg-icon svg { width: 12px; height: 12px; stroke-width: 1.75; }
+.fw-root .fw-seg-name { font-weight: 600; }
+.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. */
+.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 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); }
 /* 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. */
@@ -320,15 +337,15 @@
 .fw-root .fw-links { position: absolute; top: 0; bottom: 0; left: var(--fw-label-col); right: 0; overflow: hidden; pointer-events: none; z-index: 0; }
 .fw-root .fw-link {
   --x: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px);
-  position: absolute; width: 8px; border: 0 solid var(--line); border-bottom-width: 1.5px; translate: 0 var(--fw-bar-shift);
+  position: absolute; width: 12px; border: 0 solid var(--line); border-bottom-width: 1.5px; translate: 0 var(--fw-bar-shift);
   opacity: clamp(0, (var(--fw-t) - var(--s)) * 1000, 1);
 }
 .fw-root .fw-view-spans .fw-link { opacity: calc(clamp(0, (var(--fw-t) - var(--s)) * 1000, 1) * .7); }
 /* Agent-view connectors rest faint, one curved elbow per spawn in the agent's hue (they show who started whom), and come to
    full strength for the agent under the pointer, pinned or focused. */
-.fw-root .fw-view-agents .fw-link:not(.fw-link-hot) { opacity: calc(clamp(0, (var(--fw-t) - var(--s)) * 1000, 1) * .6); }
+.fw-root .fw-view-agents .fw-link:not(.fw-link-hot) { opacity: calc(clamp(0, (var(--fw-t) - var(--s)) * 1000, 1) * .8); }
 .fw-root .fw-link { transition: opacity 160ms var(--fw-ease); }
-.fw-root .fw-link-down { left: calc(var(--x) - 8px); border-left-width: 1.5px; border-bottom-left-radius: 12px; }
+.fw-root .fw-link-down { left: calc(var(--x) - 12px); border-left-width: 1.5px; border-bottom-left-radius: 12px; }
 .fw-root .fw-link-up { left: var(--x); border-right-width: 1.5px; border-bottom-right-radius: 12px; }
 .fw-root .fw-link::before { content: ""; position: absolute; top: -3.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--line); box-shadow: 0 0 0 1.5px var(--fw-surface); }
 .fw-root .fw-link-down::before { left: -3.25px; }

package/dist/react/index.d.ts

@@ -391,6 +391,10 @@ interface FlowSegment {
   name?: string;
   /** The tool every merged step shares (the name before " · "); undefined once the merged steps differ. */
   tool?: string;
+  /** What the merged steps cost, when any of them recorded a cost. */
+  costUsd?: number;
+  /** A failed mark that was a model call, so it draws the model's icon and no tool name. */
+  modelCall?: boolean;
 }
 /** A row's direct steps: model and tool calls (failed ones included), the failed and retrying ones, and tool calls by tool. */
 interface StepCounts {

package/dist/react/index.js

@@ -2476,6 +2476,7 @@ function mergeSegments(marks, gapMs, cap = 240) {
 				last.endMs = Math.max(last.endMs, mark.endMs);
 				last.count += mark.count;
 				if (last.tool !== mark.tool) last.tool = void 0;
+				if (mark.costUsd !== void 0) last.costUsd = (last.costUsd ?? 0) + mark.costUsd;
 				last.kind = share.model >= share.tool ? "model" : "tool";
 			} else out.push({ ...mark });
 		}
@@ -2656,7 +2657,9 @@ function segmentOf(row) {
 		count: 1,
 		retry: row.retry,
 		name: row.name,
-		tool: toolOf(row.name)
+		tool: toolOf(row.name),
+		...row.span.costUsd === void 0 ? {} : { costUsd: row.span.costUsd },
+		...!row.ok && row.kind === "model" ? { modelCall: true } : {}
 	};
 }
 /** The rows a search term matches by themselves, before ancestor context is added. */
@@ -3374,25 +3377,54 @@ const at = (startMs, endMs) => ({
 });
 const endLabelWidth = (label, slowest, costliest) => label.length * 7 + 8 + (slowest ? 80 : 0) + (costliest ? 90 : 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 : mark.tool && `${mark.tool} ×${mark.count}`);
-	return /* @__PURE__ */ jsx("span", {
+	const glyph = mark.kind === "failed" ? agentView && !ending ? null : "fail" : mark.retry ? "retry" : null;
+	const model = mark.kind === "model" || mark.modelCall;
+	const name = model ? void 0 : mark.count === 1 ? mark.name : mark.tool;
+	const duration = Number.isFinite(mark.endMs) ? formatSpanDuration(mark.endMs - mark.startMs) : "";
+	const meta = [duration, mark.costUsd ? formatCost(mark.costUsd) : ""].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ jsxs("span", {
 		className: `fw-seg fw-seg-${mark.kind}${mark.alt ? " fw-seg-alt" : ""}`,
 		"data-tone": toneKey(mark.tone),
 		style: at(mark.startMs, mark.endMs),
-		title: mark.name ? `${mark.name}${mark.count > 1 ? ` +${mark.count - 1} more` : ""}` : void 0,
+		title: mark.name ? `${mark.name}${mark.count > 1 ? ` +${mark.count - 1} more` : ""}${meta ? ` · ${meta}` : ""}` : void 0,
 		onPointerEnter: agentView ? (event) => events.onInspect(mark.id, event.currentTarget, event.clientX) : void 0,
 		onClick: agentView ? (event) => {
 			event.stopPropagation();
 			events.onPin(mark.id, event.currentTarget, event.clientX);
 		} : void 0,
-		children: glyph ? /* @__PURE__ */ jsx("span", {
+		children: [glyph && /* @__PURE__ */ jsx("span", {
 			className: "fw-glyph",
-			children: glyph
-		}) : named && /* @__PURE__ */ jsx("span", {
-			className: "fw-seg-name",
-			children: named
-		})
+			"data-glyph": glyph,
+			children: glyph === "fail" ? /* @__PURE__ */ jsx(FailGlyph, {}) : /* @__PURE__ */ jsx(RetryGlyph, {})
+		}), agentView && /* @__PURE__ */ jsxs("span", {
+			className: "fw-seg-label",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "fw-seg-icon",
+					"aria-hidden": true,
+					children: /* @__PURE__ */ jsx(KindGlyph, {
+						kind: model ? "model" : "tool",
+						name: mark.tool ?? mark.name
+					})
+				}),
+				name && /* @__PURE__ */ jsx("span", {
+					className: "fw-seg-name",
+					children: name
+				}),
+				mark.count > 1 && /* @__PURE__ */ jsxs("span", {
+					className: "fw-seg-chip",
+					children: ["×", mark.count]
+				}),
+				duration && /* @__PURE__ */ jsx("span", {
+					className: "fw-seg-meta",
+					children: duration
+				}),
+				mark.costUsd ? /* @__PURE__ */ jsx("span", {
+					className: "fw-seg-meta",
+					children: formatCost(mark.costUsd)
+				}) : null
+			]
+		})]
 	});
 }
 /** A span the clock is inside: it grows live, or playback has not reached its end. */
@@ -3418,7 +3450,7 @@ const FlowRow = memo(function FlowRow(props) {
 	const kind = !row.ok ? "failed" : row.kind;
 	const marks = isAgent || row.hasChildren || row.id.startsWith("run:") ? folded && !agentView ? row.segments : row.own : [];
 	const label = endLabel(row, clockMs);
-	const summary = [...span.detail && span.detail !== props.sharedDetail ? [span.detail] : [], ...agentSummary(row)];
+	const summary = [...span.detail && span.detail !== props.sharedDetail ? [span.detail] : [], ...agentSummary(row).filter((part) => part !== props.sharedOutcome)];
 	const inspect = (event) => props.onInspect(row.id, event.currentTarget, event.clientX);
 	const family = agentView && row.id.startsWith("family:");
 	const step = agentView && row.stepOf !== void 0;
@@ -3554,6 +3586,11 @@ const FlowRow = memo(function FlowRow(props) {
 					"aria-label": `${row.descendants} hidden steps`,
 					children: ["+", row.descendants]
 				}),
+				family && !props.expanded && /* @__PURE__ */ jsxs("span", {
+					className: "fw-count",
+					"aria-label": `${row.descendants} agents folded`,
+					children: ["+", row.descendants]
+				}),
 				!row.ok && !agentView && /* @__PURE__ */ jsx("span", {
 					className: "fw-alert",
 					children: /* @__PURE__ */ jsx(AlertGlyph, { label: "failed" })
@@ -3622,7 +3659,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.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)));
+}, (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.sharedOutcome === b.sharedOutcome && 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);
@@ -4095,6 +4132,7 @@ function FlowBody(props) {
 		renderIcon: props.renderIcon,
 		fillByAgent: props.fillByAgent,
 		sharedDetail: props.sharedDetail,
+		sharedOutcome: props.sharedOutcome,
 		expanded: props.expandedIds?.has(item.id),
 		onToggle: props.onToggle,
 		onInspect: props.onInspect,
@@ -4481,6 +4519,13 @@ function useHostable(value, onChange, initial) {
 	}, [controlled])];
 }
 const CARD_WIDTH = 320;
+/** The value at least half of several agents share, if one does. */
+function usual(values) {
+	const counts = /* @__PURE__ */ new Map();
+	for (const value of values) if (value) counts.set(value, (counts.get(value) ?? 0) + 1);
+	const [top, n] = [...counts].sort((a, b) => b[1] - a[1])[0] ?? [];
+	return values.length > 1 && n !== void 0 && n >= 2 && n * 2 >= values.length ? top : void 0;
+}
 /** The summary strip: as of the playhead while scrubbing, the producer's totals otherwise. */
 function summaryCells(trace, at, durationMs) {
 	const cost = costSummary(at ? at.costUsd : trace.costUsd, trace);
@@ -4658,8 +4703,8 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		const pipelines = rows.filter((row) => row.kind === "pipeline");
 		return pipelines.length ? pipelines : rows.filter((row) => !row.parentId);
 	}, [rows]);
-	const details = new Set(agents.flatMap((row) => row.span.detail ? [row.span.detail] : []));
-	const sharedDetail = agents.length > 1 && details.size === 1 ? [...details][0] : void 0;
+	const sharedDetail = usual(agents.map((row) => row.span.detail));
+	const sharedOutcome = usual(agents.map((row) => row.span.outcome?.label));
 	const [flippedFamilies, setFlippedFamilies] = useState(/* @__PURE__ */ new Set());
 	const openFamilies = useMemo(() => defaultOpenFamilies(agents, UNFOLD_ROWS, flippedFamilies), [agents, flippedFamilies]);
 	const [openSteps, setOpenSteps] = useState(/* @__PURE__ */ new Set());
@@ -4982,7 +5027,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 								agents.length,
 								" ",
 								agents.length === 1 ? "agent" : "agents",
-								sharedDetail ? ` · ${sharedDetail}` : "",
+								sharedDetail ? ` · ${agents.every((row) => row.span.detail === sharedDetail) ? "" : "mostly "}${sharedDetail}` : "",
 								done && speedup >= 1.05 ? ` · ${speedup.toFixed(1)}x parallel` : ""
 							]
 						}),
@@ -5068,6 +5113,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 				pauses: trace.pauses,
 				cursorLine: position !== null || playing,
 				sharedDetail,
+				sharedOutcome,
 				expandedIds: view === "agents" ? /* @__PURE__ */ new Set([...openFamilies, ...openSteps]) : void 0,
 				holdHeight: isLive,
 				slowestId: slowest?.id ?? callouts.slowestId,

package/package.json

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