@tangle-network/charts 0.21.5 → 0.21.7

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,7 +136,8 @@
   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;
+.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;
   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. */
 .fw-root .fw-pause-label[title] { pointer-events: auto; cursor: help; }
@@ -234,7 +236,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. */
@@ -265,7 +271,6 @@
 .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. */
 .fw-root .fw-view-agents .fw-seg-failed { background: var(--dim); box-shadow: inset 0 0 0 1px var(--dim-line); }
-.fw-root .fw-view-agents .fw-alert { color: var(--fw-muted); }
 .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); }
@@ -304,7 +309,10 @@
 .fw-root.fw-root-agents .fw-card, .fw-root.fw-root-agents .fw-card-above .fw-card { position: relative; left: auto !important; top: auto !important; transform: none; animation-name: fw-arrive; width: auto; max-width: 560px; }
 .fw-root .fw-seg-alt { filter: brightness(.78); }
 /* Agent view: the scrubber track shows how far the run has played, so at rest it reads full, not empty. */
-.fw-root-agents .fw-slider { background: linear-gradient(90deg, color-mix(in oklab, var(--fw-accent) 45%, transparent) var(--fw-progress), var(--fw-well) var(--fw-progress)) 0 50% / 100% 4px no-repeat; }
+.fw-root.fw-root-agents .fw-slider { background: linear-gradient(90deg, var(--fw-accent) var(--fw-progress), var(--fw-well) var(--fw-progress)) 0 50% / 100% 6px no-repeat; }
+/* The playhead: a round knob on a filled track, visible at rest as the references show it. */
+.fw-root.fw-root-agents .fw-slider::-webkit-slider-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--fw-text); box-shadow: 0 0 0 3px var(--fw-surface); }
+.fw-root.fw-root-agents .fw-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--fw-text); box-shadow: 0 0 0 3px var(--fw-surface); }
 .fw-root .fw-card { position: absolute; z-index: 20; width: 320px; padding: 12px; border-radius: 12px; background: var(--fw-raised); border: 1px solid var(--fw-border);
   box-shadow: 0 12px 32px -8px rgb(0 0 0 / .28), 0 2px 6px rgb(0 0 0 / .08); animation: fw-arrive 140ms var(--fw-ease); }
 /* A hover card never covers the next mark: only a pinned card (a dialog) takes the pointer. */

package/dist/react/index.d.ts

@@ -399,9 +399,9 @@ 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 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. */
+  /** What an agent bar's color means. Default: `outcome` when any agent carries one, so bars match the outcome legend, else `muted`.
+   * `muted`: every agent one quiet tone, color spent on state only (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;
@@ -415,6 +415,6 @@ 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, selectedId, onDeselect, description, summary: showSummary }: FlowWaterfallProps): import("react").JSX.Element;
+export declare function FlowWaterfall({ trace, live, startedAt, label, defaultCollapsed, defaultView, renderIcon, maxHeight, onSelect, markers, onTimeChange, agentFill: fillProp, selectedId, onDeselect, description, summary: showSummary }: FlowWaterfallProps): import("react").JSX.Element;
 //#endregion
 export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, FlowWaterfallProps, GapBand, GapProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };

package/dist/react/index.js

@@ -2631,8 +2631,8 @@ function slowestRow(rows, clockMs) {
 function agentCallouts(agents, clockMs) {
 	let slowest, slowestMs = -1, costliest, top = -1, priced = 0, timed = 0;
 	for (const row of agents) {
-		if (row.durationLabel === "—" || row.span.startMs > clockMs) continue;
-		if (row.kind === "pipeline" && row.parentId !== void 0) {
+		if (row.durationLabel === "—" || row.span.startMs > clockMs || row.kind !== "pipeline" || row.id.startsWith("family:") || row.id.startsWith("run:")) continue;
+		if (row.parentId !== void 0) {
 			const ms = (spanRunning(row.span) ? Math.max(row.span.endMs, clockMs) : Math.min(row.span.endMs, clockMs)) - row.span.startMs;
 			timed += 1;
 			if (ms > slowestMs) {
@@ -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,
@@ -3442,7 +3444,7 @@ const FlowRow = memo(function FlowRow(props) {
 					"aria-label": `${row.descendants} hidden steps`,
 					children: ["+", row.descendants]
 				}),
-				!row.ok && /* @__PURE__ */ jsx("span", {
+				!row.ok && !agentView && /* @__PURE__ */ jsx("span", {
 					className: "fw-alert",
 					children: /* @__PURE__ */ jsx(AlertGlyph, { label: "failed" })
 				})
@@ -3733,6 +3735,7 @@ function FlowBody(props) {
 	const ticks = clockTicks(win.startMs, tickEnd, Math.max(1, trackPx + (view === "spans" ? 72 : 0)));
 	const markerLabels = useMemo(() => {
 		const shown = /* @__PURE__ */ new Map();
+		if (view === "agents") return shown;
 		let freeFrom = -Infinity;
 		for (const marker of [...props.markers ?? []].sort((a, b) => a.at - b.at)) {
 			const x = (marker.at - win.startMs) / msPerPx;
@@ -3748,7 +3751,24 @@ function FlowBody(props) {
 		props.markers,
 		win.startMs,
 		msPerPx,
-		trackPx
+		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;
@@ -4026,17 +4046,13 @@ function FlowBody(props) {
 							"--s": pause.startMs,
 							"--e": pause.endMs
 						},
-						title: pause.label,
-						children: /* @__PURE__ */ jsxs("span", {
+						title: `${pause.label}, ${duration(pause.endMs - pause.startMs)}`,
+						children: pauseLabels.has(pause) && /* @__PURE__ */ jsx("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: [
-								/* @__PURE__ */ jsx("b", { children: duration(pause.endMs - pause.startMs) }),
-								" ",
-								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) })
 						})
 					}, `p-${pause.startMs}`)), props.markers?.map((marker) => /* @__PURE__ */ jsx("span", {
 						className: "fw-marker",
@@ -4318,6 +4334,7 @@ function PlaybackBar({ view, playing, limit, clockMs, speed, zoom, marks, slider
 //#region src/react/flow-waterfall.tsx
 const LANE_PAD = 12;
 const AGENT_ROWS = 20;
+const UNFOLD_ROWS = 12;
 const END_LABEL_GUTTER = {
 	spans: 120,
 	agents: 176
@@ -4428,7 +4445,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 = "muted", selectedId, onDeselect, description, summary: showSummary = true }) {
+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 }) {
 	const root = useRef(null);
 	const search = useRef(null);
 	const slider = useRef(null);
@@ -4450,6 +4467,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	const [laneElement, setLaneElement] = useState(null);
 	const observedTotal = Number.isFinite(trace.totalMs) && trace.totalMs >= 0 ? trace.totalMs : 0;
 	const isLive = live ?? trace.spans.some(spanRunning);
+	const agentFill = fillProp ?? (trace.spans.some((span) => span.kind === "pipeline" && span.outcome) ? "outcome" : "muted");
 	const dataEnd = useMemo(() => Math.max(observedTotal, ...trace.spans.map((span) => Number.isFinite(span.endMs) ? span.endMs : 0)), [trace, observedTotal]);
 	const trackPx = Math.max(40, laneWidth - LANE_PAD - Math.min(END_LABEL_GUTTER[view], laneWidth * .3));
 	useEffect(() => {
@@ -4503,7 +4521,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	}, [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 [flippedFamilies, setFlippedFamilies] = useState(/* @__PURE__ */ new Set());
-	const openFamilies = useMemo(() => defaultOpenFamilies(agents, AGENT_ROWS, flippedFamilies), [agents, flippedFamilies]);
+	const openFamilies = useMemo(() => defaultOpenFamilies(agents, UNFOLD_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,
@@ -4718,8 +4736,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	const cardAgent = cardRow && (() => {
 		for (let cursor = cardRow; cursor; cursor = cursor.parentId ? byId.get(cursor.parentId) : void 0) if (cursor.kind === "pipeline") return shown(cursor);
 	})();
-	const moving = isLive || position !== null || playing;
-	const showCursor = moving || view === "agents";
+	const showCursor = isLive || position !== null || playing || view === "agents";
 	const overviewMarks = useMemo(() => rows.filter((row) => !row.parentId).flatMap((row) => row.hasChildren ? row.segments : row.kind === "pipeline" ? [] : [{
 		startMs: row.span.startMs,
 		endMs: row.span.endMs,
@@ -4886,7 +4903,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 				collapsed,
 				searching: Boolean(query.trim()),
 				pauses: trace.pauses,
-				cursorLine: moving,
+				cursorLine: position !== null || playing,
 				sharedDetail,
 				expandedIds: view === "agents" ? /* @__PURE__ */ new Set([...openFamilies, ...openSteps]) : void 0,
 				holdHeight: isLive,

package/package.json

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