@tangle-network/charts 0.20.0 → 0.20.1

package/dist/{flow-trace-Sr8GtLm0.d.ts → flow-trace-DqCMrnTs.d.ts}

@@ -382,6 +382,8 @@ interface FlowTrace {
   costUsd?: number;
   /** `list`: priced from a model catalog's list prices, not a bill; the summary says so. */
   costBasis?: 'billed' | 'list';
+  /** The list cost is at most this: the input counts include cached tokens priced as fresh input. */
+  costUpperBound?: boolean;
   /** How many model calls `costUsd` covers; when `priced < total` the total is a lower bound and shown as one. */
   costCoverage?: {
     priced: number;

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-Sr8GtLm0.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-DqCMrnTs.js";
 //#region src/block.d.ts
 interface RenderFigureOptions {
   /** Chart uses a closed data disclosure; plot keeps only the SVG and accessible data. */

package/dist/index.js

@@ -3337,6 +3337,13 @@ function unitDotLayout(groups, width, height, o = {}) {
 }
 //#endregion
 //#region src/otlp-trace.ts
+/** Attributes that carry cached input apart from fresh input (OpenTelemetry GenAI and Anthropic-style names). */
+const CACHE_KEYS = [
+	"gen_ai.usage.cache_read_input_tokens",
+	"gen_ai.usage.cache_creation_input_tokens",
+	"gen_ai.usage.input_tokens.cached",
+	"tangle.llm.cache_read_tokens"
+];
 /** Price model calls from an OpenAI-compatible model catalog (`data[].pricing.prompt|completion`, USD per token), such as
 * the Router's `/v1/models`. Read the catalog at runtime; never copy its numbers. */
 function catalogPrice(catalog) {
@@ -3475,6 +3482,7 @@ function otlpFlowTrace(input, options = {}) {
 	let cost = 0;
 	let unpriced = 0;
 	let priced = 0;
+	let cacheSplit = false;
 	const offset = (iso) => time(iso) - origin;
 	const isSpawn = (span) => span.kind === "TOOL" && (attrs(span)["traces.agent.spawn"] === true || /spawn/i.test(str(attrs(span)["gen_ai.tool.name"]) ?? span.name));
 	const groupOfSpan = (span) => groupOf.get(rootOf(span).span_id);
@@ -3541,6 +3549,7 @@ function otlpFlowTrace(input, options = {}) {
 		if (listPrice !== void 0) {
 			cost += listPrice;
 			priced++;
+			if (CACHE_KEYS.some((key) => a[key] !== void 0)) cacheSplit = true;
 		} else if (kind === "model" && !aggregate && (prompt || completion)) unpriced++;
 		out.push({
 			id: span.span_id,
@@ -3574,7 +3583,8 @@ function otlpFlowTrace(input, options = {}) {
 			costCoverage: {
 				priced,
 				total: priced + unpriced
-			}
+			},
+			...cacheSplit ? {} : { costUpperBound: true }
 		} : {}
 	};
 }

package/dist/react/flow-waterfall.css

@@ -62,12 +62,12 @@
 .fw-root [data-tone="3"] { --tone: var(--fw-h3); }
 .fw-root [data-tone="4"] { --tone: var(--fw-h4); }
 .fw-root [data-tone="5"] { --tone: var(--fw-h5); }
-/* Light fills carry enough of the hue to tell agents apart on white (round 8: 24% read as "pale mint on gray"); the outline is
+/* Light fills carry enough of the hue to tell agents apart on white (24% and 42% both read as "pastel, washed out"); the outline is
    the full hue, which passes 3:1 against the surface, so every mark keeps its edge. */
 .fw-root [data-tone] {
-  --fill: light-dark(color-mix(in oklab, var(--tone) 42%, #fff), color-mix(in oklab, var(--tone) 86%, #000));
+  --fill: light-dark(color-mix(in oklab, var(--tone) 58%, #fff), color-mix(in oklab, var(--tone) 86%, #000));
   --line: light-dark(var(--tone), var(--tone));
-  --dim: light-dark(color-mix(in oklab, var(--tone) 22%, #fff), color-mix(in oklab, var(--tone) 40%, #17171d));
+  --dim: light-dark(color-mix(in oklab, var(--tone) 30%, #fff), color-mix(in oklab, var(--tone) 40%, #17171d));
   --dim-line: light-dark(color-mix(in oklab, var(--tone) 70%, #fff), color-mix(in oklab, var(--tone) 55%, #17171d));
 }
 
@@ -231,6 +231,13 @@
 .fw-root [data-outcome="neutral"], .fw-root [data-outcome="neutral"] [data-tone] { --tone: var(--fw-muted); }
 .fw-root .fw-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--fw-muted); font-size: 12px; line-height: 16px; }
 .fw-root .fw-legend li { display: inline-flex; align-items: center; gap: 8px; }
+.fw-root .fw-kinds { margin: 0; padding: 8px 24px 12px; justify-content: flex-end; }
+.fw-root .fw-kinds .fw-swatch-model { width: 12px; height: 8px; border-radius: 2px; background: color-mix(in oklab, var(--fw-text) 40%, var(--fw-surface)); }
+.fw-root .fw-kinds .fw-swatch-tool { width: 12px; height: 8px; border-radius: 2px; background: color-mix(in oklab, var(--fw-text) 16%, var(--fw-surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-text) 30%, transparent); }
+.fw-root .fw-kinds .fw-swatch-wait { width: 12px; height: 8px; border-radius: 2px; background: repeating-linear-gradient(-45deg, var(--fw-hatch) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px var(--fw-hatch); }
+.fw-root .fw-kinds .fw-swatch-handoff { width: 10px; height: 8px; border-left: 1.5px solid var(--fw-muted); border-bottom: 1.5px solid var(--fw-muted); border-bottom-left-radius: 3px; }
+.fw-root .fw-kinds .fw-swatch-failed { width: 12px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--fw-failed); }
+.fw-root .fw-description { margin: 0; color: var(--fw-muted); font-size: 14px; line-height: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .fw-root .fw-legend .fw-swatch { width: 12px; height: 8px; border-radius: 2px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
 .fw-root .fw-legend b { color: var(--fw-text); font-weight: 600; font-variant-numeric: tabular-nums; }
 .fw-root .fw-legend .fw-swatch-step { display: inline-grid; place-items: center; width: 12px; height: 12px; border-radius: 3px; background: var(--fw-well); color: var(--fw-failed); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-failed) 50%, transparent); }

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-Sr8GtLm0.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-DqCMrnTs.js";
 import { CSSProperties, ReactElement, ReactNode } from "react";
 //#region src/react/sparkline.d.ts
 type SparklineDirection = "rising" | "falling" | "flat";
@@ -175,6 +175,7 @@ export declare function HBars({ rows, format, color, max, limit }: {
     note?: string;
     color?: string;
     href?: string;
+    title?: string;
   }[];
   format?: (v: number) => string;
   color?: string;
@@ -376,6 +377,8 @@ interface FlowWaterfallProps {
   /** What a bar's color means: the agent (default), whose hue its steps and handoffs share, with the outcome on the row dot, legend and
    * crash glyph; or its `outcome`. */
   agentFill?: 'outcome' | 'agent';
+  /** One line beside the title saying what the run was for, such as its goal. */
+  description?: string;
   /** The row the host has selected, such as the agent whose transcript is open: it lifts and, in the agent view, its peers dim.
    * A pinned card alone only highlights its row, so the rest of the run stays readable around it. */
   selectedId?: string;
@@ -384,6 +387,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 }: FlowWaterfallProps): import("react").JSX.Element;
+export declare function FlowWaterfall({ trace, live, startedAt, label, defaultCollapsed, defaultView, renderIcon, maxHeight, onSelect, markers, onTimeChange, agentFill, selectedId, onDeselect, description }: FlowWaterfallProps): import("react").JSX.Element;
 //#endregion
 export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, FlowWaterfallProps, 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

@@ -1001,10 +1001,10 @@ function HBars({ rows, format = formatCompact, color = LIVE_SERIES[0], max, limi
 	return /* @__PURE__ */ jsxs("ol", {
 		className: "ov-hbars",
 		children: [rows.slice(0, limit).map((row) => {
+			const title = row.title ?? `${row.label}: ${format(row.value)}`;
 			const content = /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx("span", {
 					className: "ov-hbar-label",
-					title: row.label,
 					children: row.label
 				}),
 				/* @__PURE__ */ jsx("span", {
@@ -1025,8 +1025,12 @@ function HBars({ rows, format = formatCompact, color = LIVE_SERIES[0], max, limi
 			] });
 			return /* @__PURE__ */ jsx("li", { children: row.href ? /* @__PURE__ */ jsx("a", {
 				href: row.href,
+				title,
 				children: content
-			}) : /* @__PURE__ */ jsx("div", { children: content }) }, row.label);
+			}) : /* @__PURE__ */ jsx("div", {
+				title,
+				children: content
+			}) }, row.label);
 		}), rest.length > 0 && /* @__PURE__ */ jsxs("li", {
 			className: "ov-hbars-more",
 			children: [
@@ -2575,11 +2579,13 @@ function costSummary(costUsd, trace) {
 	};
 	const coverage = trace.costCoverage;
 	const partial = coverage !== void 0 && coverage.priced < coverage.total;
+	const upper = !partial && trace.costUpperBound === true;
 	return {
-		value: `${partial ? "≥" : list ? "≈" : ""}${formatCost(costUsd)}${trace.billedUsd !== void 0 ? ` · ${formatCost(trace.billedUsd)} billed` : ""}`,
+		value: `${partial ? "≥" : upper ? "≤" : list ? "≈" : ""}${formatCost(costUsd)}${trace.billedUsd !== void 0 ? ` · ${formatCost(trace.billedUsd)} billed` : ""}`,
 		title: [
 			partial ? `${coverage.priced} of ${coverage.total} model calls priced` : coverage ? `all ${coverage.total} model calls priced` : "",
 			list ? "at the model catalog list price; not a bill" : "",
+			upper ? "cached input is not split out, so it is priced as fresh input: at most this" : "",
 			trace.billedUsd !== void 0 ? `billed ${formatCost(trace.billedUsd)} (the seat charge)` : ""
 		].filter(Boolean).join("; "),
 		label
@@ -2684,6 +2690,8 @@ const ZoomOutGlyph = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [/* @_
 const FitGlyph = () => svg(/* @__PURE__ */ jsx("path", { d: "M2.5 6V3.5a1 1 0 0 1 1-1H6M10 2.5h2.5a1 1 0 0 1 1 1V6M13.5 10v2.5a1 1 0 0 1-1 1H10M6 13.5H3.5a1 1 0 0 1-1-1V10" }));
 //#endregion
 //#region src/react/flow-waterfall-card.tsx
+/** Names wrap between words, never at their hyphens ("memscale-engineer-" / "2" read as two names). */
+const keepWords = (name) => name.replace(/-/g, "‑");
 const KIND_LABEL = {
 	pipeline: "Agent",
 	model: "LLM call",
@@ -2753,7 +2761,7 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 						}),
 						/* @__PURE__ */ jsx("span", {
 							className: "fw-card-who",
-							children: who.name
+							children: keepWords(who.name)
 						}),
 						outcome ? /* @__PURE__ */ jsx("span", {
 							className: "fw-pill fw-pill-outcome",
@@ -2840,7 +2848,7 @@ function SpanCard({ id, row, agent, clockMs, left, top, pinned, onClose, renderI
 						className: "fw-card-title",
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "fw-card-name",
-							children: span.name
+							children: keepWords(span.name)
 						}), span.detail && /* @__PURE__ */ jsx("div", {
 							className: "fw-muted",
 							children: span.detail
@@ -2898,7 +2906,7 @@ const at = (startMs, endMs) => ({
 	"--e": Number.isFinite(endMs) ? endMs : OPEN_END
 });
 function Segment({ mark, events, agentView }) {
-	const glyph = mark.kind === "failed" ? /* @__PURE__ */ jsx(FailGlyph, {}) : mark.retry ? /* @__PURE__ */ jsx(RetryGlyph, {}) : null;
+	const glyph = mark.kind === "failed" ? agentView ? null : /* @__PURE__ */ jsx(FailGlyph, {}) : mark.retry ? /* @__PURE__ */ jsx(RetryGlyph, {}) : null;
 	return /* @__PURE__ */ jsx("span", {
 		className: `fw-seg fw-seg-${mark.kind}`,
 		"data-tone": toneKey(mark.tone),
@@ -3924,6 +3932,26 @@ const TONE_ORDER = [
 	"failed",
 	"neutral"
 ];
+/** What each mark means, as the agent view draws it; a key only for kinds the run has. */
+function KindLegend({ rows }) {
+	const has = (kind) => rows.some((row) => row.own.some((mark) => mark.kind === kind) || row.span.kind === kind);
+	const shown = [
+		["model", "Model call"],
+		["tool", "Tool call"],
+		["waiting", "Waiting"],
+		["handoff", "Handoff"],
+		["failed", "Failed turn"]
+	].filter(([kind]) => kind === "waiting" ? rows.some((row) => row.kind === "pipeline") : kind === "handoff" ? rows.some((row) => row.span.handoffTo || row.hasAgents) : has(kind));
+	if (shown.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		className: "fw-legend fw-kinds",
+		"aria-label": "Key",
+		children: shown.map(([kind, name]) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", {
+			className: `fw-swatch-${kind === "waiting" ? "wait" : kind}`,
+			"aria-hidden": true
+		}), name] }, kind))
+	});
+}
 function OutcomeLegend({ agents }) {
 	const items = /* @__PURE__ */ new Map();
 	for (const row of agents) {
@@ -3964,7 +3992,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 = "agent", selectedId, onDeselect }) {
+function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defaultCollapsed = false, defaultView = "spans", renderIcon, maxHeight, onSelect, markers, onTimeChange, agentFill = "agent", selectedId, onDeselect, description }) {
 	const root = useRef(null);
 	const search = useRef(null);
 	const slider = useRef(null);
@@ -4305,6 +4333,11 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 									className: "fw-title",
 									children: label
 								}),
+								description && /* @__PURE__ */ jsx("p", {
+									className: "fw-description",
+									title: description,
+									children: description
+								}),
 								isLive && /* @__PURE__ */ jsx("span", {
 									className: "fw-state fw-state-live",
 									children: "Live"
@@ -4450,6 +4483,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 					compact: view === "agents"
 				})
 			}),
+			view === "agents" && /* @__PURE__ */ jsx(KindLegend, { rows }),
 			view === "spans" && playback
 		]
 	});

package/dist/react/live.css

@@ -1,30 +1,31 @@
-/* Shared live charts. Consumers may set --chart-live-* tokens on an ancestor. */
-.ov-empty { margin: 0; color: var(--chart-live-faint, #777); font-size: .9em; }
+/* Shared live charts. Consumers may set --chart-live-* tokens on an ancestor. Sizes are px on the 12/14 type scale and a
+   4 px grid, so a host's font size never rescales them. */
+.ov-empty { margin: 0; color: var(--chart-live-faint, #777); font-size: 12px; }
 .ov-plot { position: relative; min-width: 0; }
 .ov-plot svg { display: block; overflow: visible; }
 line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%, transparent); stroke-width: 1; }
-.ov-axis { fill: var(--chart-live-muted, #666); font: .8em var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; }
+.ov-axis { fill: var(--chart-live-muted, #666); font: 12px/16px var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; }
 .ov-crosshair { stroke: var(--chart-live-faint, #777); stroke-dasharray: 3 3; }
-.ov-tip { position: absolute; z-index: 4; display: grid; gap: .25em; min-width: 12em; max-width: 18em; padding: .6em .75em; background: var(--chart-live-raised, #fff); border: 1px solid var(--chart-live-border, #aaa); border-radius: 8px; box-shadow: 0 10px 24px -12px #000; font-size: .85em; pointer-events: none; }
-.ov-tip-line { display: grid; grid-template-columns: auto 1fr auto; gap: .6em; align-items: center; color: var(--chart-live-muted, #666); }
+.ov-tip { position: absolute; z-index: 4; display: grid; gap: 4px; min-width: 160px; max-width: 240px; padding: 8px 12px; background: var(--chart-live-raised, #fff); border: 1px solid var(--chart-live-border, #aaa); border-radius: 8px; box-shadow: 0 10px 24px -12px #000; font-size: 12px; line-height: 16px; pointer-events: none; }
+.ov-tip-line { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; color: var(--chart-live-muted, #666); }
 .ov-tip-line b { color: var(--chart-live-fg, #222); font-variant-numeric: tabular-nums; }
-.ov-hbars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, max-content) minmax(33%, 1fr) max-content; gap: .25em .7em; }
+.ov-hbars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, max-content) minmax(33%, 1fr) max-content; gap: 4px 12px; }
 .ov-hbars li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
-.ov-hbars li > a, .ov-hbars li > div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; row-gap: .15em; align-items: center; padding: .3em .4em; border-radius: 6px; color: inherit; text-decoration: none; }
-.ov-hbars-more { grid-column: 1 / -1; padding: .1em .4em; font-size: .8em; color: var(--chart-live-faint, #777); }
+.ov-hbars li > a, .ov-hbars li > div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; row-gap: 0; align-items: center; padding: 4px; border-radius: 6px; color: inherit; text-decoration: none; }
+.ov-hbars-more { grid-column: 1 / -1; padding: 0 4px; font-size: 12px; color: var(--chart-live-faint, #777); }
 .ov-hbars li > a:hover, .ov-hbars li > div:hover { background: var(--chart-live-hover, #eee); text-decoration: none; }
-.ov-hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95em; color: var(--chart-live-fg, #222); }
-.ov-hbar-track { height: .7em; border-radius: 3px; background: color-mix(in srgb, var(--chart-live-faint, #777) 14%, transparent); overflow: hidden; }
+.ov-hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; color: var(--chart-live-fg, #222); }
+.ov-hbar-track { height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--chart-live-faint, #777) 14%, transparent); overflow: hidden; }
 .ov-hbar-track > span { display: block; height: 100%; border-radius: 3px; }
-.ov-hbar-value { font: .9em var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; text-align: right; color: var(--chart-live-fg, #222); }
-.ov-hbar-note { grid-column: 1 / -1; font-size: .78em; color: var(--chart-live-faint, #777); }
-.ov-meter { display: grid; gap: .3em; min-width: 0; }
-.ov-meter-track { display: block; height: .7em; border-radius: 3px; background: color-mix(in srgb, var(--chart-live-faint, #777) 14%, transparent); overflow: hidden; }
+.ov-hbar-value { font: 12px/16px var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; text-align: right; color: var(--chart-live-fg, #222); }
+.ov-hbar-note { grid-column: 1 / -1; font-size: 12px; color: var(--chart-live-faint, #777); }
+.ov-meter { display: grid; gap: 4px; min-width: 0; }
+.ov-meter-track { display: block; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--chart-live-faint, #777) 14%, transparent); overflow: hidden; }
 .ov-meter-track > span { display: block; height: 100%; border-radius: 3px; }
-.ov-meter-text { font: .85em var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; color: var(--chart-live-muted, #666); }
-.ov-spark { display: block; width: 8em; height: 1.6em; }
-.ov-spark-empty { font-size: .8em; color: var(--chart-live-faint, #777); }
-.ov-tip-line i { display: inline-block; width: .7em; height: .7em; border-radius: 3px; margin-right: .4em; vertical-align: -.05em; }
+.ov-meter-text { font: 12px/16px var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; color: var(--chart-live-muted, #666); }
+.ov-spark { display: block; width: 112px; height: 24px; }
+.ov-spark-empty { font-size: 12px; color: var(--chart-live-faint, #777); }
+.ov-tip-line i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 0; }
 /* Recorded events and spans. Colours come from Brand tokens; kinds also differ by stroke pattern and glyph. */
 .ov-mark { stroke-width: 1.5; fill: none; }
 .ov-mark-pass { stroke: var(--chart-live-pass, var(--chart-pass, var(--status-running))); }
@@ -44,7 +45,7 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 .ov-verdict-fail .ov-mark-head { fill: var(--chart-live-danger, var(--chart-breach, var(--status-error))); }
 .ov-verdict-unknown .ov-mark { stroke: var(--chart-live-faint, var(--chart-muted)); }
 .ov-verdict-unknown .ov-mark-head { fill: var(--chart-live-faint, var(--chart-muted)); }
-.ov-mark-label { fill: var(--chart-live-fg, var(--chart-ink)); font-size: .75em; paint-order: stroke; stroke: var(--chart-live-surface, var(--chart-canvas)); stroke-width: 3px; stroke-linejoin: round; }
+.ov-mark-label { fill: var(--chart-live-fg, var(--chart-ink)); font-size: 12px; paint-order: stroke; stroke: var(--chart-live-surface, var(--chart-canvas)); stroke-width: 3px; stroke-linejoin: round; }
 .ov-band-after-pass { fill: color-mix(in srgb, var(--chart-live-pass, var(--chart-pass, var(--status-running))) 12%, transparent); }
 .ov-band-idle { fill: var(--chart-live-hover, var(--chart-shade)); }
 .ov-band-blocked { fill: color-mix(in srgb, var(--chart-live-danger, var(--chart-breach, var(--status-error))) 9%, transparent); }
@@ -56,10 +57,10 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 .ov-hatched { background: repeating-linear-gradient(135deg, var(--chart-live-faint, var(--chart-muted)) 0 1px, transparent 1px 5px), color-mix(in srgb, var(--chart-live-faint, var(--chart-muted)) 10%, transparent); }
 .ov-now { stroke: var(--chart-live-fg, var(--chart-ink)); stroke-width: 1.5; }
 .ov-gantt-open { stroke: var(--chart-live-fg, var(--chart-ink)); stroke-width: 1.5; stroke-dasharray: 3 2; }
-.ov-events, .ov-key, .ov-meter-key { list-style: none; margin: .4em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2em 1em; font-size: .8em; color: var(--chart-live-muted, var(--chart-ink-muted)); }
-.ov-key li, .ov-events li, .ov-meter-key li { display: inline-flex; align-items: center; gap: .4em; }
+.ov-events, .ov-key, .ov-meter-key { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; line-height: 16px; color: var(--chart-live-muted, var(--chart-ink-muted)); }
+.ov-key li, .ov-events li, .ov-meter-key li { display: inline-flex; align-items: center; gap: 8px; }
 .ov-meter-key b { font-weight: 500; color: var(--chart-live-fg, var(--chart-ink)); font-family: var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; }
-.ov-meter-key i, .ov-event-swatch { display: inline-block; width: .8em; height: .8em; border-radius: 2px; }
+.ov-meter-key i, .ov-event-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
 [data-segmented] > .ov-meter-track { display: flex; }
 [data-segmented] > .ov-meter-track > span { flex: none; border-radius: 0; }
 .ov-event-pass { border-left: 2px solid var(--chart-live-pass, var(--chart-pass, var(--status-running))); border-radius: 0; width: 0; }
@@ -72,7 +73,7 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 .ov-event-after-pass { background: color-mix(in srgb, var(--chart-live-pass, var(--chart-pass, var(--status-running))) 25%, transparent); }
 .ov-event-idle { background: var(--chart-live-hover, var(--chart-shade)); }
 .ov-event-missing { background: repeating-linear-gradient(135deg, var(--chart-live-faint, var(--chart-muted)) 0 1px, transparent 1px 4px); }
-.ov-refusal { margin: 0; color: var(--chart-live-muted, var(--chart-ink-muted)); font-size: .9em; }
+.ov-refusal { margin: 0; color: var(--chart-live-muted, var(--chart-ink-muted)); font-size: 12px; }
 
 /*
  * DotMap: thousands of dots on one canvas. A categorical lens names at most three categories in colour, the first

package/package.json

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