@tangle-network/charts 2.0.1 → 2.0.3

package/dist/react/flow-waterfall.css

@@ -21,8 +21,8 @@
   --fw-h1: light-dark(oklch(from var(--tone-blue-icon) .58 .11 calc(h + 39)), oklch(from var(--tone-blue-icon) .67 .11 calc(h + 39)));
   --fw-h2: light-dark(oklch(from var(--tone-violet-icon) .55 .11 h), oklch(from var(--tone-violet-icon) .70 .11 h));
   --fw-h3: light-dark(oklch(from var(--tone-pink-icon) .55 .11 h), oklch(from var(--tone-pink-icon) .67 .11 calc(h - 16)));
-  --fw-h4: light-dark(oklch(from var(--tone-cyan-icon) .60 .11 calc(h - 16.256)), oklch(from var(--tone-cyan-icon) .67 .11 calc(h - 26.148)));
-  --fw-h5: light-dark(oklch(from var(--tone-blue-icon) .58 .03 calc(h + 37.6)), oklch(from var(--tone-blue-icon) .67 .03 calc(h + 29.5)));
+  --fw-h4: light-dark(oklch(from var(--tone-cyan-icon) .578 .11 calc(h - 22.894)), oklch(from var(--tone-cyan-icon) .67 .11 calc(h - 26.148)));
+  --fw-h5: light-dark(oklch(from var(--tone-blue-icon) .58 .11 calc(h + 37.6)), oklch(from var(--tone-blue-icon) .67 .11 calc(h + 29.5)));
   --fw-ease: var(--ease-standard, cubic-bezier(.2,.8,.2,1));
   --fw-bar-h: 20px;
   --fw-label-col: min(var(--fw-name-w), 42%);
@@ -268,11 +268,11 @@
 .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), var(--fw-text)); }
 .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) - var(--fw-badge-w, 0px) - 4px)); padding: 0 4px; border-radius: var(--radius-tag);
+  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-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 { height: 20px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fw-muted); background: transparent; box-shadow: inset 0 0 0 1px var(--fw-border); }
+.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); }
 
 .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 {
@@ -352,7 +352,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   .fw-root *, .fw-root *::before { animation: none !important; transition: opacity var(--duration-fast) !important; }
-  .fw-root [data-motion="essential"], .fw-root [data-motion="essential"]::before { animation: tangle-breathe var(--motion-ambient) infinite !important; }
+  .fw-root :is(.fw-agent-dot, .fw-spinner)[data-motion="essential"], .fw-root .fw-state-live[data-motion="essential"]::before { animation: tangle-breathe var(--motion-ambient) infinite !important; }
 }
 
 .fw-root-agents .fw-heading { border-bottom: 0; padding: 20px 24px 12px; }

package/dist/react/index.js

@@ -6822,17 +6822,15 @@ function criticalPathIds(rows) {
 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 || 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) {
-				slowest = row;
-				slowestMs = ms;
-			}
+		if (row.durationLabel === "—" || row.span.startMs > clockMs || row.kind !== "pipeline" || row.hasAgents || row.id.startsWith("family:") || row.id.startsWith("run:")) continue;
+		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) {
+			slowest = row;
+			slowestMs = ms;
 		}
 		const cost = row.span.costUsd ?? row.rollupCostUsd;
-		if (cost === void 0) continue;
+		if (typeof cost !== "number" || !Number.isFinite(cost)) continue;
 		priced += 1;
 		if (cost > top) {
 			costliest = row;
@@ -7366,6 +7364,7 @@ function Table({ rows }) {
 /** The span card: what ran, for how long, on what tokens and at what recorded cost, then its input and output. */
 function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderIcon, compact }) {
 	const span = row.span;
+	const failure = span.facts?.find((fact) => fact.label.toLowerCase() === "failure")?.value;
 	const state = runStatus(span.status ?? "unknown");
 	const meta = statusMeta(state);
 	const status = meta.label;
@@ -7438,14 +7437,14 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 						close
 					]
 				}),
-				/* @__PURE__ */ jsx(Table, { rows: metrics(who, clockMs, false) }),
+				/* @__PURE__ */ jsx(Table, { rows: metrics(who, clockMs, false).filter(([label]) => label.toLowerCase() !== "failure") }),
 				step && /* @__PURE__ */ jsx("p", {
 					className: "fw-card-step",
 					children: step
 				}),
-				!row.ok && /* @__PURE__ */ jsxs("p", {
+				!row.ok && /* @__PURE__ */ jsx("p", {
 					className: "fw-card-error",
-					children: ["Error: ", span.output ?? who.span.output ?? "No error detail reported"]
+					children: failure ? `Failure: ${failure}` : span.output ? `Recorded output: ${span.output}` : "Failure detail not reported"
 				}),
 				sentence && row.ok && /* @__PURE__ */ jsx("p", {
 					className: "fw-card-result",
@@ -7492,6 +7491,10 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 				]
 			}),
 			/* @__PURE__ */ jsx(Table, { rows: metrics(row, clockMs, true) }),
+			!row.ok && !span.output && !failure && /* @__PURE__ */ jsx("p", {
+				className: "fw-card-error",
+				children: "Failure detail not reported"
+			}),
 			span.input && /* @__PURE__ */ jsxs("div", {
 				className: "fw-card-text",
 				children: [/* @__PURE__ */ jsx("div", {
@@ -7503,7 +7506,7 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 				className: "fw-card-text",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "fw-card-label",
-					children: row.ok ? "Output" : "Error"
+					children: row.ok ? "Output" : "Recorded output"
 				}), /* @__PURE__ */ jsx("p", { children: span.output })]
 			})
 		]
@@ -7602,6 +7605,15 @@ const FlowRow = memo(function FlowRow(props) {
 	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 callouts = /* @__PURE__ */ jsxs(Fragment, { children: [slowest && /* @__PURE__ */ jsx("span", {
+		className: "fw-badge",
+		title: agentView ? "Longest elapsed leaf agent" : "Longest elapsed leaf step",
+		children: agentView ? "Longest leaf" : "Longest step"
+	}), costliest && /* @__PURE__ */ jsx("span", {
+		className: "fw-badge",
+		title: "Highest reported cost among priced leaf agents",
+		children: "Costliest leaf"
+	})] });
 	return /* @__PURE__ */ jsxs("div", {
 		role: "row",
 		"data-span-id": row.id,
@@ -7621,8 +7633,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-badge-w": `${(slowest ? 80 : 0) + (costliest ? 90 : 0)}px`
+			"--fw-end-w": `${endLabelWidth(label)}px`
 		},
 		onFocus: (event) => {
 			if (event.target === event.currentTarget) props.onActivate(row);
@@ -7713,7 +7724,8 @@ const FlowRow = memo(function FlowRow(props) {
 								className: "fw-name-text",
 								children: row.name
 							}),
-							(state === "failed" || state === "needs-you") && /* @__PURE__ */ jsx("span", {
+							!agentView && callouts,
+							state !== "unknown" && !activity.quiet && /* @__PURE__ */ jsx("span", {
 								className: "fw-row-state",
 								style: { color: `var(${meta.token})` },
 								children: meta.label
@@ -7731,13 +7743,17 @@ const FlowRow = memo(function FlowRow(props) {
 							children: renderIcon(span)
 						}), /* @__PURE__ */ jsxs("span", {
 							className: "fw-subtitle-tail",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "fw-subtitle-text",
-								children: summary[0]
-							}), summary.slice(1).map((part) => /* @__PURE__ */ jsxs("span", {
-								className: "fw-subtitle-extra",
-								children: ["· ", part]
-							}, part))]
+							children: [
+								callouts,
+								/* @__PURE__ */ jsx("span", {
+									className: "fw-subtitle-text",
+									children: summary[0]
+								}),
+								summary.slice(1).map((part) => /* @__PURE__ */ jsxs("span", {
+									className: "fw-subtitle-extra",
+									children: ["· ", part]
+								}, part))
+							]
 						})]
 					})]
 				}),
@@ -7755,7 +7771,7 @@ const FlowRow = memo(function FlowRow(props) {
 			role: "gridcell",
 			className: "fw-lane",
 			"data-waterfall-track": true,
-			"aria-label": `${KIND_LABEL[span.kind]}, ${label}${slowest ? `, slowest ${agentView ? "agent" : "step"}` : ""}${costliest ? ", costliest agent" : ""}${critical ? ", critical path" : ""}`,
+			"aria-label": `${KIND_LABEL[span.kind]}, ${label}${slowest ? `, longest leaf ${agentView ? "agent" : "step"}` : ""}${costliest ? ", highest reported leaf-agent cost" : ""}${critical ? ", critical path" : ""}`,
 			children: invalid ? /* @__PURE__ */ jsx("span", {
 				className: "fw-invalid",
 				children: "—"
@@ -7797,23 +7813,13 @@ const FlowRow = memo(function FlowRow(props) {
 					events: props,
 					agentView
 				}, `${mark.id}-${i}`)),
-				/* @__PURE__ */ jsxs("span", {
+				/* @__PURE__ */ jsx("span", {
 					className: "fw-end",
 					style: at(span.startMs, running ? OPEN_END : span.endMs),
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "fw-duration",
-							children: label
-						}),
-						slowest && /* @__PURE__ */ jsx("span", {
-							className: "fw-badge",
-							children: "Slowest"
-						}),
-						costliest && /* @__PURE__ */ jsx("span", {
-							className: "fw-badge",
-							children: "Costliest"
-						})
-					]
+					children: /* @__PURE__ */ jsx("span", {
+						className: "fw-duration",
+						children: label
+					})
 				})
 			] })
 		})]

package/package.json

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