@tangle-network/charts 0.21.2 → 0.21.4

package/dist/react/flow-waterfall.css

@@ -185,7 +185,9 @@
 .fw-root .fw-view-agents .fw-label { padding-left: 16px; gap: 12px; border-right: 0; }
 .fw-root .fw-view-agents .fw-names { flex-direction: column; align-items: flex-start; gap: 0; }
 .fw-root .fw-view-agents .fw-span-name { font-weight: 600; line-height: 18px; }
-.fw-root .fw-view-agents .fw-subtitle { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fw-muted); font-size: 12px; line-height: 16px; }
+.fw-root .fw-view-agents .fw-subtitle { display: flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; color: var(--fw-muted); font-size: 12px; line-height: 16px; }
+.fw-root .fw-view-agents .fw-subtitle-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fw-root .fw-view-agents .fw-detail-icon { flex: none; width: 16px; height: 16px; align-items: center; justify-content: center; overflow: hidden; }
 .fw-root .fw-view-agents .fw-detail { font-size: 12px; line-height: 16px; }
 .fw-root .fw-agent-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--line, var(--fw-muted)); }
 

package/dist/react/index.js

@@ -3394,41 +3394,40 @@ const FlowRow = memo(function FlowRow(props) {
 				/* @__PURE__ */ jsxs("span", {
 					className: "fw-names",
 					title: `${row.name}${span.detail ? ` · ${span.detail}` : ""} · ${KIND_LABEL[span.kind]}${running ? " · running" : ""}${row.ok ? "" : " · failed"}`,
-					children: [
-						/* @__PURE__ */ jsxs("span", {
-							className: `fw-span-name${isAgent || row.hasChildren ? " fw-strong" : ""}`,
-							children: [
-								fillByAgent && isAgent && span.outcome ? /* @__PURE__ */ jsx("span", {
-									className: "fw-agent-dot",
-									"data-tone": "0",
-									"data-outcome": span.outcome.tone,
-									title: span.outcome.label,
-									"aria-hidden": true
-								}) : agentView && !step && /* @__PURE__ */ jsx("span", {
-									className: "fw-agent-dot",
-									"aria-hidden": true
-								}),
-								running && /* @__PURE__ */ jsx("span", {
-									className: "fw-spinner",
-									role: "status",
-									"aria-label": "running"
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "fw-name-text",
-									children: row.name
-								})
-							]
-						}),
-						agentView && /* @__PURE__ */ jsx("span", {
-							className: "fw-subtitle",
-							children: span.detail && span.detail !== props.sharedDetail ? `${span.detail} · ${agentSummary(row)}` : agentSummary(row)
-						}),
-						agentView && renderIcon && /* @__PURE__ */ jsx("span", {
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: `fw-span-name${isAgent || row.hasChildren ? " fw-strong" : ""}`,
+						children: [
+							fillByAgent && isAgent && span.outcome ? /* @__PURE__ */ jsx("span", {
+								className: "fw-agent-dot",
+								"data-tone": "0",
+								"data-outcome": span.outcome.tone,
+								title: span.outcome.label,
+								"aria-hidden": true
+							}) : agentView && !step && /* @__PURE__ */ jsx("span", {
+								className: "fw-agent-dot",
+								"aria-hidden": true
+							}),
+							running && /* @__PURE__ */ jsx("span", {
+								className: "fw-spinner",
+								role: "status",
+								"aria-label": "running"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "fw-name-text",
+								children: row.name
+							})
+						]
+					}), agentView && /* @__PURE__ */ jsxs("span", {
+						className: "fw-subtitle",
+						children: [renderIcon && /* @__PURE__ */ jsx("span", {
 							className: "fw-detail-icon",
 							"aria-hidden": true,
 							children: renderIcon(span)
-						})
-					]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "fw-subtitle-text",
+							children: span.detail && span.detail !== props.sharedDetail ? `${span.detail} · ${agentSummary(row)}` : agentSummary(row)
+						})]
+					})]
 				}),
 				folded && /* @__PURE__ */ jsxs("span", {
 					className: "fw-count",
@@ -3707,7 +3706,9 @@ function FlowBody(props) {
 	const [viewport, setViewport] = useState(maxHeight);
 	const latest = useRef(props);
 	latest.current = props;
-	const height = props.fixedHeight ? maxHeight : Math.min(maxHeight, Math.max(rows.length, 1) * rowHeight);
+	const tallest = useRef(0);
+	if (!props.holdHeight) tallest.current = 0;
+	const height = tallest.current = Math.max(tallest.current, Math.min(maxHeight, Math.max(rows.length, 1) * rowHeight));
 	const links = useMemo(() => linksFor(rows, props.byId, view), [
 		rows,
 		props.byId,
@@ -4867,7 +4868,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 				cursorLine: moving,
 				sharedDetail,
 				expandedIds: view === "agents" ? /* @__PURE__ */ new Set([...openFamilies, ...openSteps]) : void 0,
-				fixedHeight: isLive,
+				holdHeight: isLive,
 				slowestId: slowest?.id ?? callouts.slowestId,
 				costliestId: callouts.costliestId,
 				activeId,

package/package.json

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