@tangle-network/charts 0.21.6 → 0.21.8

package/dist/react/flow-waterfall.css

@@ -47,7 +47,8 @@
   font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);
   font-size: 14px;
   line-height: 20px;
-  font-feature-settings: "tnum" 1, "cv11" 1;
+  /* Tabular figures only on numeric cells: on names they widen hyphens ("v6 - battery", "glm - 5.3"). */
+  font-feature-settings: "cv11" 1;
   -webkit-font-smoothing: antialiased;
 }
 .fw-root-agents { --fw-bar-h: 24px; --fw-label-col: min(var(--fw-name-w), 28%); border-radius: 16px; }
@@ -81,7 +82,7 @@
 .fw-root .fw-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
 .fw-root .fw-state-live { color: var(--fw-accent); background: color-mix(in oklab, var(--fw-accent) 12%, transparent); }
 .fw-root .fw-state-live::before { animation: fw-pulse 1.6s var(--fw-ease) infinite; }
-.fw-root .fw-headline { color: var(--fw-muted); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; }
+.fw-root .fw-headline { color: var(--fw-muted); display: flex; align-items: center; gap: 8px; }
 .fw-root .fw-done-mark { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--fw-ok); color: var(--fw-ok); font-size: 12px; line-height: 1; }
 .fw-root .fw-tools { display: flex; align-items: center; gap: 8px; }
 .fw-root .fw-views { display: inline-flex; padding: 4px; border-radius: 8px; background: var(--fw-well); border: 1px solid var(--fw-border); }
@@ -135,10 +136,9 @@
   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 { 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;
+.fw-root .fw-pause-label { position: absolute; z-index: 2; top: 50%; left: calc(var(--fw-pad) + ((var(--s) + var(--e)) / 2 - var(--fw-v0)) * var(--fw-k) * 1px); translate: -50% -50%; width: max-content; padding: 0 8px; 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. */
+/* The label 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; }
 .fw-root .fw-marker-label { position: absolute; top: 2px; left: 3px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; border-radius: 4px; font-size: 12px; line-height: 16px; color: var(--fw-marker); background: var(--fw-surface); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-marker) 40%, transparent); }
 .fw-root .fw-marker-label-left { left: auto; right: 3px; }
@@ -235,7 +235,11 @@
 /* An agent bar with no child marks says who it is by its lane color, never a neutral grey. */
 /* In the agent view the bar's own extent between steps is waiting: hatched in the outcome tone, under the step segments. */
 .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); }
+/* An agent lane is a tint of its color; full saturation is kept for its model and tool segments and its status dot, so a run never
+   reads as a wall of colored slabs. */
+.fw-root .fw-view-agents .fw-bar.fw-k-pipeline:not(.fw-has-marks, .fw-has-agents) { background: color-mix(in oklab, var(--tone) 30%, var(--fw-surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 55%, transparent); }
+/* A family row without one shared outcome is neutral when bars mean outcomes, not a hue of its own. */
+.fw-root.fw-fill-outcome .fw-view-agents .fw-row[data-span-id^="family:"]:not([data-outcome]), .fw-root.fw-fill-outcome .fw-view-agents .fw-row[data-span-id^="family:"]:not([data-outcome]) [data-tone] { --tone: var(--fw-h0); }
 /* 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. */

package/dist/react/index.js

@@ -2755,6 +2755,7 @@ function agentFamilies(agents, open) {
 		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 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),
 			id,
@@ -2784,6 +2785,7 @@ function agentFamilies(agents, open) {
 				startMs,
 				endMs,
 				status: running ? "running" : failed ? "failed" : "done",
+				...outcome ? { outcome } : {},
 				detail: members[0].span.detail,
 				meta: {
 					failedAgents: failed,
@@ -3752,6 +3754,22 @@ function FlowBody(props) {
 		trackPx,
 		view
 	]);
+	const pauseLabels = useMemo(() => {
+		const shown = /* @__PURE__ */ new Set();
+		let freeFrom = -Infinity;
+		for (const pause of [...props.pauses ?? []].sort((a, b) => a.startMs - b.startMs)) {
+			const width = duration(pause.endMs - pause.startMs).length * 7 + 24;
+			const centre = ((pause.startMs + pause.endMs) / 2 - win.startMs) / msPerPx;
+			if (centre - width / 2 < freeFrom) continue;
+			shown.add(pause);
+			freeFrom = centre + width / 2 + 8;
+		}
+		return shown;
+	}, [
+		props.pauses,
+		win.startMs,
+		msPerPx
+	]);
 	useEffect(() => {
 		const element = scroller.current;
 		if (!element) return;
@@ -3922,6 +3940,18 @@ function FlowBody(props) {
 						props.onScrub(marker.at);
 					}
 				}, `e-${marker.at}-${marker.label}`)),
+				props.pauses?.filter((pause) => pauseLabels.has(pause)).map((pause) => /* @__PURE__ */ jsx("span", {
+					className: "fw-pause-label",
+					style: {
+						"--s": pause.startMs,
+						"--e": pause.endMs
+					},
+					title: pause.detail ? `${pause.label}: ${pause.detail}` : pause.label,
+					tabIndex: 0,
+					"aria-label": `${pause.label}, ${duration(pause.endMs - pause.startMs)}${pause.detail ? `: ${pause.detail}` : ""}`,
+					onPointerDown: (event) => event.stopPropagation(),
+					children: /* @__PURE__ */ jsx("b", { children: duration(pause.endMs - pause.startMs) })
+				}, `pl-${pause.startMs}`)),
 				jumped && /* @__PURE__ */ jsx("span", {
 					className: "fw-event-label",
 					"data-tone": jumped.tone ?? "neutral",
@@ -4028,14 +4058,7 @@ function FlowBody(props) {
 							"--s": pause.startMs,
 							"--e": pause.endMs
 						},
-						title: pause.label,
-						children: /* @__PURE__ */ jsx("span", {
-							className: "fw-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) })
-						})
+						title: `${pause.label}, ${duration(pause.endMs - pause.startMs)}`
 					}, `p-${pause.startMs}`)), props.markers?.map((marker) => /* @__PURE__ */ jsx("span", {
 						className: "fw-marker",
 						"data-tone": marker.tone ?? "neutral",

package/package.json

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