@tangle-network/charts 2.0.4 → 2.0.6

package/dist/react/flow-waterfall.css

@@ -177,7 +177,7 @@
 .fw-root .fw-agent-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--fw-muted)); }
 .fw-root .fw-agent-dot:not([data-outcome]) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fw-muted); }
 .fw-root :is(.fw-agent-dot, .fw-legend .fw-swatch)[data-ring] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tone, var(--fw-muted)); }
-.fw-root :is(.fw-agent-dot, .fw-legend .fw-swatch)[data-outcome="live"]:not([data-ring]) { animation: tangle-breathe var(--motion-ambient) infinite; }
+.fw-root .fw-agent-dot[data-outcome="live"]:not([data-ring]) { animation: tangle-breathe var(--motion-ambient) infinite; }
 
 .fw-root .fw-lane { position: relative; overflow: hidden; min-width: 0; }
 .fw-root .fw-invalid { position: absolute; left: var(--fw-pad); top: 50%; transform: translateY(-50%); color: var(--fw-muted); }
@@ -221,7 +221,7 @@
 .fw-root [data-outcome], .fw-root [data-outcome] [data-tone] { --tone: var(--outcome-tone); }
 .fw-root.fw-root .fw-agent-dot[data-outcome] { --tone: var(--outcome-tone); }
 .fw-root .fw-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--fw-muted); font-size: 14px; line-height: 18px; }
-.fw-root .fw-legend li { display: inline-flex; align-items: center; gap: 8px; }
+.fw-root .fw-legend li { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 100%; overflow-wrap: anywhere; }
 .fw-root .fw-legends { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 8px; }
 .fw-root .fw-legends .fw-legend { margin: 0; }
 .fw-root .fw-kinds { margin: 0; padding: 0; justify-content: flex-start; color: var(--fw-muted); }
@@ -270,6 +270,7 @@
 .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: var(--radius-tag);
   background: linear-gradient(var(--fw-tint, transparent) 0 0), var(--fw-surface); white-space: nowrap; pointer-events: none; }
+.fw-root .fw-outcome-end { display: inline-flex; pointer-events: auto; }
 .fw-root .fw-duration { font-size: 14px; 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 { display: inline-flex; flex: none; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); font-size: 12px; line-height: 18px; font-weight: 500; color: var(--fw-muted); background: transparent; box-shadow: inset 0 0 0 1px var(--fw-border); }
@@ -374,37 +375,48 @@
 .fw-root .fw-key > summary { display: none; }
 .fw-root .fw-key > summary svg { width: 12px; height: 12px; margin-left: 6px; }
 .fw-root .fw-key[open] > summary svg { transform: rotate(90deg); }
-.fw-root .fw-row-state { display: none; font-size: 12px; font-weight: 600; }
+.fw-root .fw-row-state { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
 .fw-root .fw-error-rug { position: relative; height: 10px; margin-left: var(--fw-label-col); overflow: hidden; }
 .fw-root .fw-error-tick { position: absolute; width: 2px; height: 8px; background: var(--fw-failed); left: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px); }
 .fw-root .fw-error-tick[data-unlocated] { left: auto; right: calc(var(--error-index) * 3px); }
-.fw-root .fw-quiet { color: var(--fw-amber); font-size: 12px; font-weight: 500; white-space: nowrap; }
+.fw-root .fw-quiet { display: inline-flex; align-items: center; gap: 4px; color: var(--fw-amber); font-size: 13px; font-weight: 500; white-space: nowrap; }
+.fw-root .fw-quiet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
+.fw-root [data-activity="quiet"] :is(.fw-agent-dot[data-outcome="live"], .fw-spinner) { display: none; }
 .fw-root [data-activity="quiet"] :is(.fw-agent-dot, .fw-spinner) { animation: none !important; }
 .fw-root .fw-quiet-tail { position: absolute; top: calc(50% + var(--fw-bar-shift) - var(--fw-bar-h) / 2); height: var(--fw-bar-h); left: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px); width: calc(max(0, var(--fw-t) - var(--s)) * var(--fw-k) * 1px); background: repeating-linear-gradient(-45deg, var(--fw-hatch) 0 1px, transparent 1px 5px); pointer-events: none; }
 .fw-root .fw-now { background: color-mix(in oklab, var(--fw-text) 28%, transparent); }
 .fw-root .fw-card-error { margin-top: 8px; color: var(--fw-failed); font-size: 13px; line-height: 18px; }
 .fw-root .fw-card .fw-agent-dot:not([data-outcome]) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fw-muted); }
 @container flow-waterfall (max-width: 599px) {
-  .fw-root > * { --fw-label-col: 0px; --fw-bar-shift: 8px; --fw-bar-h: 8px; --fw-row-h: 44px; }
-  .fw-root .fw-summary > div:nth-child(-n+2) { flex-basis: 50%; padding: 6px 8px; }
+  .fw-root > * { --fw-label-col: 0px; --fw-bar-shift: 18px; --fw-bar-h: 8px; --fw-row-h: 52px; }
+  .fw-root .fw-summary > div:nth-child(-n+2) { flex: 1 0 auto; display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; }
+  .fw-root .fw-summary > div:nth-child(-n+2) .fw-value { margin: 0; font-size: 20px; line-height: 28px; }
+  .fw-root .fw-summary::after { content: ""; flex-basis: 100%; }
+  .fw-root .fw-summary > div:nth-child(n+3) { order: 1; }
   .fw-root :is(.fw-zoom, .fw-branch-controls, .fw-resize, .fw-links, .fw-gridlayer, .fw-marker-layer, .fw-subtitle, .fw-badge, .fw-icon-tile) { display: none; }
-  .fw-root .fw-row-state { display: inline; }
-  .fw-root .fw-key > summary { display: flex; align-items: center; min-height: 32px; cursor: pointer; }
+  .fw-root .fw-key > summary { display: flex; align-items: center; min-height: 32px; cursor: pointer; grid-area: 2 / 2; }
   .fw-root .fw-key:not([open]) .fw-legends { display: none; }
-  .fw-root .fw-heading { padding: 12px 8px; }
-  .fw-root .fw-title-line { flex-wrap: wrap; }
+  .fw-root .fw-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px; }
+  .fw-root .fw-title-block, .fw-root .fw-key { display: contents; }
+  .fw-root .fw-title-line { grid-column: 1 / -1; flex-wrap: wrap; }
+  .fw-root .fw-legends { grid-area: 3 / 1 / auto / -1; margin: 4px 0; }
+  .fw-root .fw-tools { grid-area: 2 / 1; flex-wrap: wrap; }
+  .fw-root .fw-segmented { padding: 2px; }
+  .fw-root .fw-segmented button { min-width: 28px; padding: 0 6px; }
+  .fw-root.fw-root-agents .fw-playback { padding: 8px; }
+  .fw-root.fw-root-agents .fw-overview { margin-top: 0; }
   .fw-root .fw-search-input { width: 120px; }
   .fw-root .fw-axis-label { border: 0; padding: 0; }
   .fw-root .fw-tick:is(:nth-child(2), :nth-child(3)) { transform: translate(-50%, -50%); }
   .fw-root .fw-tick:nth-child(4) { transform: translate(calc(-100% - 4px), -50%); }
   .fw-root .fw-row { transform: none; top: var(--row-y); contain: style; }
-  .fw-root .fw-label { position: absolute; z-index: 3; height: 20px; top: 0; left: 0; right: 0; padding: 0 calc(var(--fw-end-w, 0px) + 8px) 0 calc(8px + var(--depth) * 12px); border: 0; gap: 4px; background: transparent; pointer-events: none; }
+  .fw-root .fw-label { position: absolute; z-index: 3; height: 20px; top: 0; left: 0; right: 0; padding: 0 8px 0 calc(8px + var(--depth) * 12px); border: 0; gap: 4px; background: transparent; pointer-events: none; }
+  .fw-root .fw-row :is(.fw-row-state, .fw-quiet) { position: absolute; top: 20px; left: calc(28px + var(--depth) * 12px); height: 18px; }
   .fw-root .fw-view-agents .fw-names { flex-direction: row; font-size: 14px; line-height: 20px; }
   .fw-root .fw-view-agents :is(.fw-subtitle, .fw-seg-label) { display: none; }
   .fw-root .fw-view-agents .fw-label { padding-left: calc(8px + var(--depth) * 12px); }
   .fw-root .fw-lane { grid-column: 2; }
-  .fw-root .fw-end { top: 0; height: 20px; left: auto; right: 4px; }
-  .fw-root .fw-duration { font-size: 12px; }
+  .fw-root .fw-end { top: 20px; height: 18px; left: auto; right: 4px; }
   .fw-root .fw-time { display: block; grid-column: 2; position: absolute; top: -12px; left: var(--fw-progress); transform: translateX(calc(-1 * var(--fw-progress))); width: max-content; max-width: 100%; background: var(--fw-surface); }
   .fw-root .fw-playback { position: relative; padding: 12px 8px 8px; }
   .fw-root .fw-overview { margin-top: 12px; grid-template-columns: 0 minmax(0, 1fr); column-gap: 0; }

package/dist/react/index.d.ts

@@ -482,7 +482,7 @@ interface FlowWaterfallProps {
   defaultView?: FlowView;
   /** Host graph rendered by the same view control, retaining the trace clock and selection. */
   graph?: ReactNode;
-  /** Shared header feed, kept mounted across Agents, Steps and Graph. */
+  /** Shared feed after the active view, kept mounted across Agents, Steps and Graph. */
   latestEvents?: ReactNode;
   /** Host brand marks by span; the inspector draws kind glyphs without it. */
   renderIcon?: (span: FlowSpan) => ReactNode;

package/dist/react/index.js

@@ -6494,6 +6494,7 @@ function RunStatusIcon({ status, className, style, ...props }) {
 }
 //#endregion
 //#region src/react/flow-waterfall-model.ts
+const workKind = (mark) => mark.kind === "model" || mark.modelCall ? "model" : "tool";
 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 && tone <= 5 ? tone : 0;
@@ -7085,15 +7086,8 @@ function stepRuns(steps) {
 			...stepStats(run),
 			tokens: sumTokens(run),
 			own: run.map((step) => ({
-				startMs: step.span.startMs,
-				endMs: step.span.endMs,
-				kind: step.ok ? step.kind === "model" ? "model" : "tool" : "failed",
-				tone: first.tone,
-				id: step.id,
-				count: 1,
-				retry: step.retry,
-				name: step.name,
-				tool: toolOf(step.name)
+				...segmentOf(step),
+				tone: first.tone
 			})),
 			...costs.length ? { rollupCostUsd: costs.reduce((sum, cost) => sum + cost, 0) } : {},
 			span: {
@@ -7523,7 +7517,7 @@ const at = (startMs, endMs) => ({
 const endLabelWidth = (label) => label.length * 7 + 8;
 function Segment({ mark, events, agentView }) {
 	const glyph = mark.kind === "failed" ? "fail" : mark.retry ? "retry" : null;
-	const model = mark.kind === "model" || mark.modelCall;
+	const model = workKind(mark) === "model";
 	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(" · ");
@@ -7599,12 +7593,13 @@ const FlowRow = memo(function FlowRow(props) {
 	const marks = isAgent || row.hasChildren || row.id.startsWith("run:") ? folded && !agentView ? row.segments : row.own : [];
 	const label = endLabel(row, clockMs);
 	const activity = quietActivity(row, clockMs);
-	const summary = [...span.detail && span.detail !== props.sharedDetail ? [span.detail] : [], ...agentSummary(row).filter((part) => part !== props.sharedOutcome)];
+	const summary = [...span.detail && span.detail !== props.sharedDetail ? [span.detail] : [], ...agentSummary(row).filter((part) => part !== props.sharedOutcome && (state === "unknown" || part !== meta.label))];
 	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;
 	const opens = family || agentView && isAgent && row.own.length > 0;
 	const outcomes = row.outcomes ?? (span.outcome ? [span.outcome] : []);
+	const failedEnd = isAgent && !family && state === "failed" && Number.isFinite(span.endMs) && span.endMs <= clockMs;
 	const callouts = /* @__PURE__ */ jsxs(Fragment, { children: [slowest && /* @__PURE__ */ jsx("span", {
 		className: "fw-badge",
 		title: agentView ? "Longest elapsed leaf agent" : "Longest elapsed leaf step",
@@ -7633,7 +7628,7 @@ const FlowRow = memo(function FlowRow(props) {
 		style: {
 			"--row-y": `${top}px`,
 			"--fw-enter-delay": `${motion?.enter ?? 0}ms`,
-			"--fw-end-w": `${endLabelWidth(label)}px`
+			"--fw-end-w": `${endLabelWidth(label) + (failedEnd ? 20 : 0)}px`
 		},
 		onFocus: (event) => {
 			if (event.target === event.currentTarget) props.onActivate(row);
@@ -7725,13 +7720,19 @@ const FlowRow = memo(function FlowRow(props) {
 								children: row.name
 							}),
 							!agentView && callouts,
-							state !== "unknown" && !activity.quiet && /* @__PURE__ */ jsx("span", {
+							state !== "unknown" && !activity.quiet && /* @__PURE__ */ jsxs("span", {
 								className: "fw-row-state",
 								style: { color: `var(${meta.token})` },
-								children: meta.label
+								children: [state !== "running" && /* @__PURE__ */ jsx(RunStatusIcon, {
+									status: state,
+									size: 16,
+									"aria-hidden": true
+								}), meta.label]
 							}),
 							activity.quiet && /* @__PURE__ */ jsxs("span", {
 								className: "fw-quiet",
+								title: "Running; no recorded activity during this interval",
+								"aria-label": `Running; Quiet ${formatSpanDuration(activity.quietMs)} since last recorded activity`,
 								children: ["Quiet ", formatSpanDuration(activity.quietMs)]
 							})
 						]
@@ -7813,13 +7814,20 @@ const FlowRow = memo(function FlowRow(props) {
 					events: props,
 					agentView
 				}, `${mark.id}-${i}`)),
-				/* @__PURE__ */ jsx("span", {
+				/* @__PURE__ */ jsxs("span", {
 					className: "fw-end",
 					style: at(span.startMs, running ? OPEN_END : span.endMs),
-					children: /* @__PURE__ */ jsx("span", {
+					children: [failedEnd && /* @__PURE__ */ jsx("span", {
+						className: "fw-outcome-end",
+						title: "Recorded end of failed agent; failure instant not reported",
+						children: /* @__PURE__ */ jsx(RunStatusIcon, {
+							status: "failed",
+							size: 12
+						})
+					}), /* @__PURE__ */ jsx("span", {
 						className: "fw-duration",
 						children: label
-					})
+					})]
 				})
 			] })
 		})]
@@ -8032,7 +8040,7 @@ function linksFor(rows, byId, view) {
 function FlowBody(props) {
 	const { rows, view, maxHeight, collapsed, searching, slowestId, activeId, selectedId, clockMs, window: win, trackPx, showCursor, zoomed } = props;
 	const [narrow, setNarrow] = useState(false);
-	const rowHeight = narrow ? 44 : ROW_HEIGHT[view];
+	const rowHeight = narrow ? 52 : ROW_HEIGHT[view];
 	const scroller = useRef(null);
 	const surface = useRef(null);
 	useEffect(() => {
@@ -8327,17 +8335,17 @@ function FlowBody(props) {
 		ref: surface,
 		children: [
 			axis,
-			Boolean(props.errorTimes?.length) && /* @__PURE__ */ jsx("div", {
+			Boolean(props.errorEnds?.length) && /* @__PURE__ */ jsx("div", {
 				className: "fw-error-rug",
-				"aria-label": `${props.errorTimes.length} errors`,
-				children: props.errorTimes.map((at, index) => /* @__PURE__ */ jsx("span", {
+				"aria-label": `${props.errorEnds.length} errors`,
+				children: props.errorEnds.map((at, index) => /* @__PURE__ */ jsx("span", {
 					className: "fw-error-tick",
 					"data-unlocated": at === void 0 || void 0,
 					style: {
 						"--s": at,
 						"--error-index": index
 					},
-					title: at === void 0 ? "Error time not reported" : `Error at ${formatClock(at)}`
+					title: at === void 0 ? "Error time not reported" : `Recorded end of failed span at ${formatClock(at)}; failure instant not reported`
 				}, index))
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -8776,7 +8784,6 @@ function summaryCells(trace, at, durationMs) {
 		]
 	};
 }
-/** One legend item per outcome label the agents carry, with its count; nothing when no agent has an outcome. */
 const TONE_ORDER = [
 	"failed",
 	"warn",
@@ -8784,32 +8791,46 @@ const TONE_ORDER = [
 	"neutral",
 	"ok"
 ];
-/** What each mark means, as the agent view draws it; a key only for kinds the run has. */
 function KindLegend({ rows, fill }) {
-	const has = (kind) => rows.some((row) => row.own.some((mark) => mark.kind === kind) || row.span.kind === kind);
+	const has = (kind) => rows.some((row) => row.own.some((mark) => workKind(mark) === kind) || row.span.kind === kind);
 	const shown = [
 		["model", "Model call"],
 		["tool", "Tool call"],
-		["waiting", "Waiting"],
+		["waiting", "No recorded work"],
 		["handoff", "Handoff"]
 	].filter(([kind]) => kind === "waiting" ? rows.some((row) => row.kind === "pipeline") : kind === "handoff" ? rows.some((row) => row.span.handoffTo || row.hasAgents) : has(kind));
 	if (shown.length === 0) return null;
-	const example = rows.find((row) => toneKey(row.tone) > 0 && row.own.some((mark) => mark.kind === "model")) ?? rows.find((row) => row.own.length);
 	return /* @__PURE__ */ jsxs("ul", {
 		className: "fw-legend fw-kinds",
 		"aria-label": "Key",
-		"data-tone": fill === "agent" ? toneKey(example?.tone ?? 0) : void 0,
-		"data-example": example?.id,
-		children: [shown.map(([kind, name]) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", {
-			className: `fw-swatch-${kind === "waiting" ? "wait" : kind}`,
-			"aria-hidden": true
-		}), name] }, kind)), /* @__PURE__ */ jsx("li", {
+		children: [shown.map(([kind, name]) => {
+			const examples = rows.flatMap((owner) => owner.own.flatMap((mark) => workKind(mark) === kind ? [{
+				owner,
+				mark
+			}] : []));
+			const example = examples.find(({ mark }) => toneKey(mark.tone) > 0) ?? examples[0];
+			return /* @__PURE__ */ jsxs("li", {
+				"data-tone": fill === "agent" ? toneKey(example?.mark.tone ?? 0) : void 0,
+				"data-example": example?.owner.id,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: `fw-swatch-${kind === "waiting" ? "wait" : kind}`,
+						"aria-hidden": true
+					}),
+					name,
+					example && /* @__PURE__ */ jsxs("span", { children: [
+						"(",
+						example.owner.name,
+						")"
+					] })
+				]
+			}, kind);
+		}), /* @__PURE__ */ jsx("li", {
 			className: "fw-kind-rule",
-			children: fill === "agent" ? "Bar color identifies family; shade identifies work." : "Shade identifies work."
+			children: fill === "agent" ? "Hue identifies family; shade identifies work. Rail: recorded elapsed time." : "Shade identifies work. Rail: recorded elapsed time."
 		})]
 	});
 }
-/** The axis dots and the dashed lines they drop: one key naming what they mark (a release, or the kinds the host gave). */
 function MarkerLegend({ markers }) {
 	if (!markers?.length) return null;
 	const kinds = [...new Set(markers.map((marker) => marker.kind ?? "event"))];
@@ -9277,7 +9298,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	const quietAgents = agents.filter((row) => quietActivity(row, clockMs).quiet).length;
 	const recordedErrors = trace.spans.filter((span) => spanFailed(span) && span.kind !== "pipeline");
 	const errorSpans = recordedErrors.length ? recordedErrors : trace.spans.filter(spanFailed);
-	const errorTimes = Array.from({ length: errors ?? 0 }, (_, index) => errorSpans[index]?.endMs);
+	const errorEnds = Array.from({ length: errors ?? 0 }, (_, index) => Number.isFinite(errorSpans[index]?.endMs) ? errorSpans[index].endMs : void 0);
 	const done = !isLive && !trace.spans.some(spanRunning);
 	const shown = (row) => row && drawnRow(row, visible);
 	const cardRow = shown(card ? byId.get(card.target) : void 0);
@@ -9455,7 +9476,6 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 					})]
 				})]
 			}),
-			latestEvents,
 			view === "graph" ? graph : /* @__PURE__ */ jsxs(Fragment, { children: [
 				showSummary && /* @__PURE__ */ jsx("dl", {
 					className: "fw-summary",
@@ -9485,7 +9505,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 					query,
 					matchSpan,
 					pauses: trace.pauses,
-					errorTimes,
+					errorEnds,
 					cursorLine: isLive || position !== null || playing,
 					sharedDetail,
 					sharedOutcome,
@@ -9542,7 +9562,8 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 					})
 				}),
 				view === "spans" && playback
-			] })
+			] }),
+			latestEvents
 		]
 	});
 }

package/package.json

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