@tangle-network/charts 0.21.0 → 0.21.2

package/dist/{flow-trace-DfSefpBM.d.ts → flow-trace-DBJY1YAA.d.ts}

@@ -323,6 +323,8 @@ interface FlowSpan {
   icon?: string;
   /** Recorded values only. Absent means unknown and is shown as Unknown, never as zero. */
   costUsd?: number;
+  /** `lower`: `costUsd` is a floor and prints "≥". Spans inherit a trace's `costBound: 'lower'`. */
+  costBound?: 'lower' | 'upper';
   promptTokens?: number;
   completionTokens?: number;
   /** Short producer summaries shown in the span card. */
@@ -354,7 +356,10 @@ interface FlowSpanMark {
 interface FlowPause {
   startMs: number;
   endMs: number;
+  /** A few words on the band, such as 'Paused 4 h 40 m'. */
   label: string;
+  /** The full reason, shown on hover and focus of the label rather than printed across the rows. */
+  detail?: string;
 }
 /** A host verdict: `label` is the legend text, `tone` the status color. */
 interface FlowOutcome {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { A as BreakdownInput, B as Refusal, C as MarkKind, D as YScale, E as XCategory, F as Figure, H as Tier, I as Interval, L as IntervalMethod, M as CostBasis, N as Estimate, O as YTarget, P as Exclusion, R as MatrixCell, S as ChartMark, T as MarkerShape, U as TierCounts, V as Setup, W as isRefusal, _ as checkerColor, a as TimelineLane, b as BandKind, c as TimelineTick, d as ENDING_COLORS, f as ENDING_ORDER, g as TickOutcome, h as RunEnding, i as FlowTrace, j as ComparisonRow, k as YTick, l as timeline, m as OUTCOME_ORDER, n as FlowOutcome, o as TimelineOptions, p as OUTCOME_COLORS, r as FlowSpan, s as TimelineSpan, t as FlowMarker, u as CHECKER_HUES, v as PointFields, w as MarkVerdict, x as ChartBand, y as PointGlyph, z as RateRow } from "./flow-trace-DfSefpBM.js";
+import { A as BreakdownInput, B as Refusal, C as MarkKind, D as YScale, E as XCategory, F as Figure, H as Tier, I as Interval, L as IntervalMethod, M as CostBasis, N as Estimate, O as YTarget, P as Exclusion, R as MatrixCell, S as ChartMark, T as MarkerShape, U as TierCounts, V as Setup, W as isRefusal, _ as checkerColor, a as TimelineLane, b as BandKind, c as TimelineTick, d as ENDING_COLORS, f as ENDING_ORDER, g as TickOutcome, h as RunEnding, i as FlowTrace, j as ComparisonRow, k as YTick, l as timeline, m as OUTCOME_ORDER, n as FlowOutcome, o as TimelineOptions, p as OUTCOME_COLORS, r as FlowSpan, s as TimelineSpan, t as FlowMarker, u as CHECKER_HUES, v as PointFields, w as MarkVerdict, x as ChartBand, y as PointGlyph, z as RateRow } from "./flow-trace-DBJY1YAA.js";
 //#region src/block.d.ts
 interface RenderFigureOptions {
   /** Chart uses a closed data disclosure; plot keeps only the SVG and accessible data. */

package/dist/react/flow-waterfall.css

@@ -132,6 +132,8 @@
   border-inline: 1px dashed color-mix(in oklab, var(--fw-text) 24%, transparent); }
 .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;
   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; }
 .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; }
 .fw-root .fw-marker[data-tone="warn"], .fw-root .fw-event[data-tone="warn"] { --fw-marker: var(--fw-amber); }

package/dist/react/index.d.ts

@@ -1,4 +1,4 @@
-import { B as Refusal, C as MarkKind, D as YScale, E as XCategory, F as Figure, O as YTarget, S as ChartMark, T as MarkerShape, a as TimelineLane, b as BandKind, c as TimelineTick, g as TickOutcome, i as FlowTrace, k as YTick, o as TimelineOptions, r as FlowSpan, s as TimelineSpan, t as FlowMarker, v as PointFields, w as MarkVerdict, x as ChartBand, y as PointGlyph } from "../flow-trace-DfSefpBM.js";
+import { B as Refusal, C as MarkKind, D as YScale, E as XCategory, F as Figure, O as YTarget, S as ChartMark, T as MarkerShape, a as TimelineLane, b as BandKind, c as TimelineTick, g as TickOutcome, i as FlowTrace, k as YTick, o as TimelineOptions, r as FlowSpan, s as TimelineSpan, t as FlowMarker, v as PointFields, w as MarkVerdict, x as ChartBand, y as PointGlyph } from "../flow-trace-DBJY1YAA.js";
 import { CSSProperties, ReactElement, ReactNode } from "react";
 //#region src/react/sparkline.d.ts
 type SparklineDirection = "rising" | "falling" | "flat";

package/dist/react/index.js

@@ -2509,7 +2509,8 @@ function flowWaterfallRows(trace, resolutionMs) {
 			segments: [],
 			own: [],
 			retry: span.retryOf !== void 0,
-			hasAgents: false
+			hasAgents: false,
+			...span.costBound === "lower" || span.costBound === void 0 && trace.costBound === "lower" ? { costFloor: true } : {}
 		};
 	});
 	const byId = new Map(rows.map((row) => [row.id, row]));
@@ -2628,13 +2629,16 @@ function slowestRow(rows, clockMs) {
 }
 /** The agents a reader should look at first: the longest one by the clock, and the costliest when two or more are priced. */
 function agentCallouts(agents, clockMs) {
-	let slowest, slowestMs = -1, costliest, top = -1, priced = 0;
+	let slowest, slowestMs = -1, costliest, top = -1, priced = 0, timed = 0;
 	for (const row of agents) {
 		if (row.durationLabel === "—" || row.span.startMs > clockMs) continue;
-		const ms = (spanRunning(row.span) ? Math.max(row.span.endMs, clockMs) : Math.min(row.span.endMs, clockMs)) - row.span.startMs;
-		if (ms > slowestMs) {
-			slowest = row;
-			slowestMs = ms;
+		if (row.kind === "pipeline" && 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;
+			}
 		}
 		const cost = row.span.costUsd ?? row.rollupCostUsd;
 		if (cost === void 0) continue;
@@ -2645,7 +2649,7 @@ function agentCallouts(agents, clockMs) {
 		}
 	}
 	return {
-		slowestId: agents.length > 1 ? slowest?.id : void 0,
+		slowestId: timed > 1 ? slowest?.id : void 0,
 		costliestId: priced > 1 && top > 0 ? costliest?.id : void 0
 	};
 }
@@ -2745,6 +2749,7 @@ function agentFamilies(agents, open) {
 		const known = members.map((row) => row.span.costUsd ?? row.rollupCostUsd).filter((cost) => cost !== void 0);
 		const failed = members.filter((row) => !row.ok).length;
 		out.push({
+			costFloor: known.length < members.length || members.some((row) => row.costFloor),
 			id,
 			parentId: members[0].parentId,
 			name: `${role} ×${members.length}`,
@@ -2903,6 +2908,8 @@ function drawnRow(row, visible) {
 		tone: family.tone
 	} : row;
 }
+/** A row's cost as printed: "≥" when it is a floor. */
+const rowCostText = (row, cost) => `${row.costFloor ? "≥" : ""}${formatCost(cost)}`;
 //#endregion
 //#region src/react/flow-waterfall-icons.tsx
 const svg = (children, label) => /* @__PURE__ */ jsx("svg", {
@@ -3086,7 +3093,7 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 		for (const fact of (subject.facts ?? []).slice(0, 3)) cells.push([fact.label, fact.value]);
 		cells.push(["Started", `+${formatSpanDuration(Math.max(0, subject.startMs))}`]);
 		if (tokenCount !== void 0) cells.push(["Tokens", count(tokenCount)]);
-		if (cost !== void 0) cells.push(["Cost", formatCost(cost)]);
+		if (cost !== void 0) cells.push(["Cost", rowCostText(who, cost)]);
 		cells.splice(6);
 		const kind = span.kind === "model" ? "Thinking" : KIND_LABEL[span.kind];
 		const step = owner && span.endMs > span.startMs ? `${kind}${span.name && span.name !== kind && span.name.toLowerCase() !== span.kind ? ` ${span.name}` : ""} · ${duration}${row.ok ? "" : " · failed"}` : void 0;
@@ -3233,7 +3240,7 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 				children: [
 					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Duration" }), /* @__PURE__ */ jsx("dd", { children: duration })] }),
 					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Started" }), /* @__PURE__ */ jsxs("dd", { children: ["+", formatSpanDuration(Math.max(0, span.startMs))] })] }),
-					span.costUsd !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Cost" }), /* @__PURE__ */ jsx("dd", { children: formatCost(span.costUsd) })] }),
+					span.costUsd !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Cost" }), /* @__PURE__ */ jsx("dd", { children: rowCostText(row, span.costUsd) })] }),
 					tokens && span.promptTokens !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Tokens in" }), /* @__PURE__ */ jsx("dd", { children: count(span.promptTokens) })] }),
 					tokens && span.completionTokens !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Tokens out" }), /* @__PURE__ */ jsx("dd", { children: count(span.completionTokens) })] }),
 					(span.facts ?? []).slice(0, 3).map((fact) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: fact.label }), /* @__PURE__ */ jsx("dd", { children: fact.value })] }, fact.label)),
@@ -3287,11 +3294,11 @@ const open = (row, clockMs) => spanRunning(row.span) || row.span.startMs <= cloc
 function endLabel(row, clockMs) {
 	const span = row.span;
 	if (row.durationLabel === "—") return "—";
-	if (row.approx && span.endMs === span.startMs && !spanRunning(span)) return span.costUsd === void 0 ? "" : formatCost(span.costUsd);
+	if (row.approx && span.endMs === span.startMs && !spanRunning(span)) return span.costUsd === void 0 ? "" : rowCostText(row, span.costUsd);
 	if (!spanRunning(span) && clockMs < span.endMs) return `${formatSpanDuration(Math.max(0, clockMs - span.startMs))}${row.approx ? "~" : ""}`;
 	const duration = spanRunning(span) ? `${formatSpanDuration(Math.max(span.endMs, clockMs) - span.startMs)}${row.approx ? "~" : ""}` : row.durationLabel;
 	const cost = span.costUsd ?? (row.rollupCostUsd ? row.rollupCostUsd : void 0);
-	return cost === void 0 ? duration : `${duration} · ${span.meta?.costPartial ? "≥" : ""}${formatCost(cost)}`;
+	return cost === void 0 ? duration : `${duration} · ${rowCostText(row, cost)}`;
 }
 /** One trace row. Geometry comes from CSS variables, so a row re-renders only when its own state changes. */
 const FlowRow = memo(function FlowRow(props) {
@@ -3893,6 +3900,10 @@ function FlowBody(props) {
 					"aria-pressed": jumped === marker,
 					onPointerDown: (event) => event.stopPropagation(),
 					onClick: () => {
+						if (jumped === marker) {
+							setJumped(void 0);
+							return;
+						}
 						setJumped(marker);
 						props.onScrub(marker.at);
 					}
@@ -4002,6 +4013,9 @@ function FlowBody(props) {
 						title: pause.label,
 						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: pause.label
 						})
 					}, `p-${pause.startMs}`)), props.markers?.map((marker) => /* @__PURE__ */ jsx("span", {
@@ -4636,6 +4650,10 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		return () => document.removeEventListener("pointermove", move);
 	}, [card, leave]);
 	latest.current.pin = (target, element) => {
+		if (card?.pinned && card.target === target) {
+			closeCard();
+			return;
+		}
 		place(target, element, true);
 		const row = byId.get(target);
 		if (row) {

package/package.json

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