@tangle-network/charts 0.21.5 → 0.21.6

package/dist/react/flow-waterfall.css

@@ -135,7 +135,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; }
@@ -265,7 +266,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 +304,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) {
@@ -3442,7 +3442,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 +3733,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 +3749,8 @@ function FlowBody(props) {
 		props.markers,
 		win.startMs,
 		msPerPx,
-		trackPx
+		trackPx,
+		view
 	]);
 	useEffect(() => {
 		const element = scroller.current;
@@ -4027,16 +4029,12 @@ function FlowBody(props) {
 							"--e": pause.endMs
 						},
 						title: pause.label,
-						children: /* @__PURE__ */ jsxs("span", {
+						children: /* @__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 +4316,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 +4427,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 +4449,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 +4503,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 +4718,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 +4885,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.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",