@tangle-network/charts 0.21.4 → 0.21.5

package/dist/react/flow-waterfall.css

@@ -123,13 +123,18 @@
 .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 b { font-weight: 600; color: var(--fw-text); }
 .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;
   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. */
@@ -231,6 +236,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); }
@@ -260,7 +269,10 @@
 .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); }

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. `muted` (default): every agent one quiet tone, with color spent on state only: the outcome on
+   * the row dot, 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.

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
@@ -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", {
@@ -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",
@@ -3952,13 +3963,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,
@@ -4012,12 +4027,16 @@ function FlowBody(props) {
 							"--e": pause.endMs
 						},
 						title: pause.label,
-						children: /* @__PURE__ */ jsx("span", {
+						children: /* @__PURE__ */ jsxs("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
+							children: [
+								/* @__PURE__ */ jsx("b", { children: duration(pause.endMs - pause.startMs) }),
+								" ",
+								pause.label
+							]
 						})
 					}, `p-${pause.startMs}`)), props.markers?.map((marker) => /* @__PURE__ */ jsx("span", {
 						className: "fw-marker",
@@ -4298,6 +4317,7 @@ 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 END_LABEL_GUTTER = {
 	spans: 120,
 	agents: 176
@@ -4408,7 +4428,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 = "muted", selectedId, onDeselect, description, summary: showSummary = true }) {
 	const root = useRef(null);
 	const search = useRef(null);
 	const slider = useRef(null);
@@ -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, AGENT_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);
@@ -4737,7 +4758,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`,
@@ -4879,7 +4900,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.5",
   "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",