@tangle-network/charts 0.21.7 → 0.21.9

package/dist/react/flow-waterfall.css

@@ -136,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; }
@@ -192,7 +191,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 { display: flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; color: var(--fw-muted); font-size: 12px; line-height: 16px; }
+/* One 16 px line that wraps its last part out of sight: when the line is full the tool count drops whole, never "7 to…". */
+.fw-root .fw-view-agents .fw-subtitle { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; height: 16px; overflow: hidden; max-width: 100%; min-width: 0; color: var(--fw-muted); font-size: 12px; line-height: 16px; }
+.fw-root .fw-view-agents .fw-subtitle-extra { flex: none; white-space: nowrap; }
 .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; }
@@ -234,8 +235,8 @@
 .fw-root .fw-bar.fw-k-pipeline.fw-has-marks { background: color-mix(in oklab, var(--tone) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 18%, transparent); }
 .fw-root .fw-bar.fw-k-pipeline.fw-has-agents { background: repeating-linear-gradient(-45deg, var(--fw-hatch) 0 1px, transparent 1px 5px), color-mix(in oklab, var(--fw-text) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-text) 12%, transparent); }
 /* 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); }
+/* In the agent view the bar's own extent between steps is waiting: a flat faint fill under the step segments (long hatching read muddy). */
+.fw-root .fw-view-agents .fw-bar.fw-k-pipeline.fw-has-marks { background: color-mix(in oklab, var(--tone) 12%, transparent); }
 /* 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); }
@@ -309,8 +310,8 @@
 .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.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 { background: linear-gradient(90deg, color-mix(in oklab, var(--fw-text) 32%, transparent) var(--fw-progress), var(--fw-well) var(--fw-progress)) 0 50% / 100% 4px no-repeat; }
+/* The playhead: a round knob on a thin neutral track, visible at rest without outweighing the chart. */
 .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);

package/dist/react/index.js

@@ -2833,6 +2833,11 @@ function agentSummary(row) {
 		tools ? `${tools} tool ${tools === 1 ? "call" : "calls"}` : ""
 	].filter(Boolean).join(" · ");
 }
+/** The summary split where it may be cut: the tool count goes first when the line does not fit, never half a word. */
+function agentSummaryParts(row) {
+	const tools = / · (\d+ tool calls?)$/.exec(agentSummary(row));
+	return tools ? [agentSummary(row).slice(0, tools.index), tools[1]] : [agentSummary(row)];
+}
 /**
 * The agent view's rows: families folded until opened, and an opened agent's own steps (its turns and tool calls, not its
 * child agents) nested beneath it with their icons, durations and costs, as a reader drills from the run into one agent.
@@ -3322,6 +3327,7 @@ const FlowRow = memo(function FlowRow(props) {
 	const kind = !row.ok ? "failed" : row.kind;
 	const marks = isAgent || row.hasChildren || row.id.startsWith("run:") ? folded && !agentView ? row.segments : row.own : [];
 	const label = endLabel(row, clockMs);
+	const summary = agentSummaryParts(row);
 	const inspect = (event) => props.onInspect(row.id, event.currentTarget);
 	const family = agentView && row.id.startsWith("family:");
 	const step = agentView && row.stepOf !== void 0;
@@ -3393,6 +3399,10 @@ const FlowRow = memo(function FlowRow(props) {
 					className: "fw-toggle-space",
 					"aria-hidden": true
 				})),
+				agentView && !opens && /* @__PURE__ */ jsx("span", {
+					className: "fw-toggle-space",
+					"aria-hidden": true
+				}),
 				(!agentView || step) && /* @__PURE__ */ jsx("span", {
 					className: "fw-icon-tile",
 					"aria-hidden": true,
@@ -3429,14 +3439,21 @@ const FlowRow = memo(function FlowRow(props) {
 						]
 					}), 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)
-						})]
+						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} · ${summary[0]}` : summary[0]
+							}),
+							summary[1] && /* @__PURE__ */ jsxs("span", {
+								className: "fw-subtitle-extra",
+								children: ["· ", summary[1]]
+							})
+						]
 					})]
 				}),
 				folded && /* @__PURE__ */ jsxs("span", {
@@ -3940,6 +3957,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",
@@ -4046,14 +4075,7 @@ function FlowBody(props) {
 							"--s": pause.startMs,
 							"--e": pause.endMs
 						},
-						title: `${pause.label}, ${duration(pause.endMs - pause.startMs)}`,
-						children: pauseLabels.has(pause) && /* @__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.7",
+  "version": "0.21.9",
   "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",