@tangle-network/charts 2.0.17 → 2.0.19

package/README.md

@@ -138,9 +138,12 @@ const figure = metricBars([
 const html = isRefusal(figure) ? renderRefusals([figure]) : renderFigure(figure, 1, { presentation: "chart" });
 ```
 
-`timeSeries` draws recorded scalar values at strictly increasing, finite positions.
+`timeSeries` draws recorded scalar values at finite positions in order; equal positions, such as two runs recorded at one time, share a place and are never shifted.
 The caller includes every configured position, with null for a missing observation.
 Null breaks the line; the library never interpolates a missing value.
+`secondary: true` de-emphasises a series beside a primary in the same `colorIndex`, such as a max beside its p50.
+`crosshair: true` draws a vertical rule at the point whose tip shows.
+A host with its own pointer rule, such as nearest point within 48 px, sets `data-near` on that `[data-point]` group to show its tip, and sets `pointer-events: none` on `.tgc-series-observation` so hover does not show a second one; keyboard focus still shows each tip.
 
 ```ts
 import { isRefusal, renderFigure, renderRefusals, timeSeries } from "@tangle-network/charts";

package/dist/{AgentGraphCanvas-B74GN1o6.js → AgentGraphCanvas-C5Ee8Z6q.js}

@@ -1,5 +1,5 @@
 import { D as statusMeta, O as createLucideIcon, T as RunStatusIcon } from "./flow-waterfall-model-DvrgPLGS.js";
-import { a as LIVE_AGENT_CARD, c as AgentMark, d as Wrench, n as AGENT_CARD, o as buildAgentTopology, s as layoutAgents, t as LatestEvents } from "./latest-events-iiWwpIck.js";
+import { a as LIVE_AGENT_CARD, c as AgentMark, d as Wrench, n as AGENT_CARD, o as buildAgentTopology, s as layoutAgents, t as LatestEvents } from "./latest-events-CmbyqEIe.js";
 import { C as fmtCost, E as fmtTokenTotal, T as fmtEventTime, _ as syncAmbient, b as useMotionAllowed, g as ambientStyle, h as agentQuietActivity, i as SELECTION_OUTLINE, n as RESTING_SHADOW, o as useColorMode, r as edgeColor, t as RESTING_BORDER, u as shortModel, v as tokenMilliseconds, x as useRunNow, y as useAttention } from "./graph-style-fealnLLn.js";
 import { t as MOTION_CONTROL } from "./motion-DILryczn.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -116,13 +116,10 @@ function AgentCardView({ agent, selected, direction, now: fixed, onOpen, parentL
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 items-center gap-2",
 				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "grayscale hover:grayscale-0",
-						children: /* @__PURE__ */ jsx(AgentMark, {
-							agent,
-							layout: "tree",
-							size: 18
-						})
+					/* @__PURE__ */ jsx(AgentMark, {
+						agent,
+						layout: "tree",
+						size: 24
 					}),
 					/* @__PURE__ */ jsxs("span", {
 						className: "min-w-0 flex-1 truncate text-sm font-semibold leading-[18px]",
@@ -132,35 +129,50 @@ function AgentCardView({ agent, selected, direction, now: fixed, onOpen, parentL
 						}), agent.label]
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: "text-xs text-muted-foreground tabular-nums",
+						className: "text-[13px] text-muted-foreground tabular-nums",
 						title: agent.costUsd == null ? "Cost not reported" : "Cost",
 						children: fmtCost(agent.costUsd ?? void 0) ?? "—"
 					})
 				]
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "m-0 line-clamp-2 min-h-4 text-xs text-foreground leading-4",
-				children: (agent.status === "failed" ? agent.result ?? agent.turn : agent.turn) || "—"
+				"data-agent-identity": "",
+				className: "m-0 truncate text-[13px] leading-[18px] text-muted-foreground",
+				title: [agent.harness, agent.model].filter(Boolean).join(" · "),
+				children: [agent.harness, agent.model ? shortModel(agent.model) : null].filter(Boolean).join(" · ") || "Identity not recorded"
+			}),
+			agent.status === "failed" && /* @__PURE__ */ jsx("p", {
+				className: "m-0 line-clamp-2 text-[13px] leading-4",
+				children: agent.result ?? agent.turn ?? "Failure cause not recorded"
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "mt-auto flex items-center justify-between gap-1 text-xs",
+				className: "mt-auto flex items-center justify-between gap-1 text-[13px]",
 				style: { color: quiet ? "var(--surface-warning-text)" : s.color },
-				children: [/* @__PURE__ */ jsxs("span", {
-					className: "flex items-center gap-1",
-					children: [/* @__PURE__ */ jsx(StatusGlyph, {
-						status: agent.status,
-						size: 16
-					}), quiet?.label ?? s.label]
-				}), agent.status === "needs-you" && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "ag-live-respond nodrag nopan",
-					disabled: !onOpen,
-					onClick: (event) => {
-						event.stopPropagation();
-						onOpen?.();
-					},
-					children: "Respond"
-				})]
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ jsx(StatusGlyph, {
+							status: agent.status,
+							size: 16
+						}), quiet?.label ?? s.label]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-agent-tokens": "",
+						title: agent.tokens == null ? "Tokens not recorded" : "Tokens",
+						className: "text-muted-foreground tabular-nums whitespace-nowrap",
+						children: fmtTokenTotal(agent.tokens) ?? "—"
+					}),
+					agent.status === "needs-you" && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "ag-live-respond nodrag nopan",
+						disabled: !onOpen,
+						onClick: (event) => {
+							event.stopPropagation();
+							onOpen?.();
+						},
+						children: "Respond"
+					})
+				]
 			})
 		]
 	});
@@ -174,14 +186,14 @@ function AgentCard({ data }) {
 function AgentFrameBox({ data }) {
 	const { frame, direction } = data;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "relative h-full w-full rounded-2xl border",
+		className: "ag-team-frame relative h-full w-full rounded-2xl border",
 		style: {
 			background: "color-mix(in srgb, hsl(var(--muted-foreground)) 7%, transparent)",
 			borderColor: "hsl(var(--foreground) / 0.08)"
 		},
 		children: [/* @__PURE__ */ jsx(Handles, { direction }), /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: "nodrag nopan absolute right-3 top-2 flex h-16 w-8 flex-col items-center justify-center gap-1 rounded text-sm text-muted-foreground hover:bg-muted focus-visible:outline",
+			className: `nodrag nopan absolute top-2 flex h-16 items-center justify-center gap-2 rounded text-sm text-muted-foreground hover:bg-muted focus-visible:outline ${data.groupParents ? "right-3 w-8 flex-col" : "left-3 right-3 justify-start"}`,
 			"aria-label": `${frame.collapsed ? "Expand" : "Collapse"} ${data.label} team`,
 			"aria-expanded": !frame.collapsed,
 			title: `${data.label} · ${frame.group.memberIds.length} agents`,
@@ -189,10 +201,14 @@ function AgentFrameBox({ data }) {
 				event.stopPropagation();
 				data.onToggle();
 			},
-			children: [/* @__PURE__ */ jsx(ChevronDown, {
-				size: 16,
-				className: frame.collapsed ? "-rotate-90" : void 0
-			}), /* @__PURE__ */ jsx("span", { children: frame.group.memberIds.length })]
+			children: [
+				/* @__PURE__ */ jsx(ChevronDown, {
+					size: 16,
+					className: frame.collapsed ? "-rotate-90" : void 0
+				}),
+				!data.groupParents && /* @__PURE__ */ jsxs("strong", { children: [data.label, " team"] }),
+				/* @__PURE__ */ jsx("span", { children: frame.group.memberIds.length })
+			]
 		})]
 	});
 }
@@ -528,7 +544,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 	const columnRef = useRef(null);
 	if (canvas && !narrow && columnRef.current?.key !== columnKey) columnRef.current = {
 		key: columnKey,
-		columns: Math.max(1, Math.min(6, Math.floor((canvas.width - 32) / (card.width + 10))))
+		columns: Math.max(1, Math.min(6, Math.floor((canvas.width - 32 - (!live && direction === "LR" ? card.width + 70 : 0)) / (card.width + 10))))
 	};
 	const columns = columnRef.current?.columns ?? 1;
 	const layoutKey = JSON.stringify([
@@ -542,7 +558,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 	useEffect(() => {
 		if (narrow) return;
 		let active = true;
-		layoutAgents(topology, direction, columns, card, collapsed).then((layout) => {
+		layoutAgents(topology, direction, columns, card, collapsed, live).then((layout) => {
 			if (active) setPlaced({
 				key: layoutKey,
 				layout
@@ -583,6 +599,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 			data: {
 				frame,
 				direction,
+				groupParents: live,
 				label: byId.get(frame.group.parentId)?.label ?? "Agent",
 				onToggle: () => {
 					if (!frame.collapsed && selectedId && frame.group.memberIds.includes(selectedId)) onSelect?.(frame.group.parentId);
@@ -599,7 +616,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 			const agent = byId.get(id);
 			const position = layout.positions.get(id);
 			if (!agent || !position) continue;
-			const selected = selectedId === id, owned = layout.frames.find((frame) => frame.group.parentId === id);
+			const selected = selectedId === id, owned = live && layout.frames.find((frame) => frame.group.parentId === id);
 			const width = owned ? owned.width - 64 : card.width, height = owned ? 64 : card.height;
 			const measured = rfRef.current?.getInternalNode(id)?.measured;
 			cards.push({
@@ -646,7 +663,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 		const out = [];
 		const seen = /* @__PURE__ */ new Set();
 		for (const s of topology.spawns) {
-			const source = topology.groups.find((group) => group.parentId === s.from)?.id ?? s.from, target = topology.groupOf.get(s.to) ?? s.to;
+			const source = live && topology.groups.find((group) => group.parentId === s.from)?.id || s.from, target = topology.groupOf.get(s.to) ?? s.to;
 			if (source === target) continue;
 			const id = `spawn:${source}:${target}`;
 			if (seen.has(id)) continue;
@@ -720,7 +737,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 	}, [narrow]);
 	const layoutIdentity = layout ? `${layoutKey}:${layout.columns}` : null;
 	const cameraKey = `${direction}:${topology.key}`;
-	const minZoom = layout && canvas ? Math.max(.02, Math.min(.2, (canvas.width - 32) / layout.width, (canvas.height - 32) / layout.height)) : .2;
+	const minZoom = !live ? 1 : layout && canvas ? Math.max(.02, Math.min(.2, (canvas.width - 32) / layout.width, (canvas.height - 32) / layout.height)) : .2;
 	useEffect(() => {
 		const inst = rfRef.current;
 		if (!ready || !inst || !layoutIdentity || !canvas) return;
@@ -888,7 +905,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 			wrapperRef.current = el;
 			measureCanvas(el);
 		},
-		className: `agent-graph ag-live relative flex flex-col ${className ?? ""}`,
+		className: `agent-graph ag-live${live ? "" : " ag-topology"} relative flex flex-col ${className ?? ""}`,
 		tabIndex: -1,
 		onKeyDownCapture: (event) => {
 			if (event.target instanceof HTMLElement && event.target.closest("[data-agent-metrics]")) return;
@@ -949,7 +966,7 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 								select(agent.id);
 							}
 						},
-						children: live || agent.status === "succeeded" || agent.status === "stopped" ? /* @__PURE__ */ jsx(LiveAgentCardView, {
+						children: live ? /* @__PURE__ */ jsx(LiveAgentCardView, {
 							agent,
 							parentLabel: byId.get(parentOf.get(agent.id) ?? "")?.label,
 							selected: selectedId === agent.id,
@@ -1060,7 +1077,9 @@ function AgentGraphCanvas({ nodes, edges, selectedId, onSelect, direction = "TB"
 							position: "bottom-right",
 							fitViewOptions: {
 								padding: `${FIT_PADDING}px`,
-								maxZoom: 1
+								minZoom,
+								maxZoom: 1,
+								nodes: live ? void 0 : topology.agentIds.slice(0, 2).map((id) => ({ id }))
 							}
 						})
 					]

package/dist/{elk-loader-CrLO557o.d.ts → elk-loader-uOcDmUG_.d.ts}

@@ -67,8 +67,8 @@ interface AgentGraphEdge {
 type AgentGraphDirection = "TB" | "LR";
 /** Every agent card's size. Fixed, so a status or turn update never moves a card. */
 declare const AGENT_CARD: {
-  readonly width: 240;
-  readonly height: 88;
+  readonly width: 232;
+  readonly height: 120;
 };
 /** A live card: room for the header, a two-line thinking line and the last three events. Fixed for the same reason. */
 declare const LIVE_AGENT_CARD: {
@@ -125,7 +125,7 @@ interface AgentLayout {
   height: number;
 }
 /** Lay the run out with every grid `columns` wide. */
-declare function layoutAgents(topology: AgentTopology, direction: AgentGraphDirection, columns: number, card?: CardSize, collapsed?: ReadonlySet<string>): Promise<AgentLayout>;
+declare function layoutAgents(topology: AgentTopology, direction: AgentGraphDirection, columns: number, card?: CardSize, collapsed?: ReadonlySet<string>, groupParents?: boolean): Promise<AgentLayout>;
 //#endregion
 //#region src/react/agent-graph/format.d.ts
 /**

package/dist/figure.css

@@ -329,6 +329,8 @@
 .tgc-series-observation:focus-visible { outline: none; }
 .tgc-series-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }
 .tgc-series-tip { opacity: 0; pointer-events: none; }
+.tgc-series-secondary { opacity: .45; }
+.tgc-crosshair { stroke: var(--chart-rule); stroke-width: 1; }
 
 .tgc-scalar-table { min-width: 620px; }
 .tgc-scalar-table tbody th { min-width: 180px; max-width: 260px; }

package/dist/index.d.ts

@@ -199,6 +199,8 @@ interface TimeSeriesRow {
   points: TimePoint[];
   /** Draw this series in checker `colorIndex`'s hue (0 is the current checker); past the fourth hue it is muted. */
   colorIndex?: number;
+  /** De-emphasise this series beside a primary in the same hue, such as a max beside its p50. */
+  secondary?: boolean;
 }
 interface TimeSeriesOptions {
   x: {
@@ -236,6 +238,8 @@ interface TimeSeriesOptions {
   width?: number;
   /** false leaves out the series legend under the plot, for a caller that names its series itself. The verdict key stays. */
   legend?: boolean;
+  /** Draw a vertical rule at the x of the point whose tip shows. */
+  crosshair?: boolean;
   id?: string;
 }
 export declare function timeSeries(rows: TimeSeriesRow[], o: TimeSeriesOptions): Figure | Refusal;

package/dist/index.js

@@ -1137,7 +1137,7 @@ function plot$1(costed, unplaced, drawLine, o) {
 //#endregion
 //#region src/css.generated.ts
 /** The figure block and mark styles (src/figure.css), for documents that inline their CSS. */
-const figureCss = "/* @tangle-network/charts — figure block and mark styles.\n *\n * Every colour is a --chart-* token from @tangle-network/brand tokens.css, so a\n * figure follows the page theme. A standalone document without brand tokens\n * embeds `chartTokensCss` first. Fonts fall back to Inter and JetBrains Mono.\n *\n * Each figure carries a 720 px and a 358 px render. The swap follows the\n * figure's own width (a container query), so a narrow column shows the phone\n * render even on a wide screen. */\n\n.tgc-figure {\n  margin: 32px 0 0;\n  padding: 0;\n  max-width: 720px;\n  color: var(--chart-ink);\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n\n.tgc-finding {\n  margin: 0 0 8px;\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 600;\n  color: var(--chart-ink);\n}\n\n.tgc-noteref {\n  margin-left: 2px;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n}\n.tgc-noteref:hover,\n.tgc-noteref:focus-visible {\n  color: var(--chart-accent);\n  text-decoration: underline;\n}\n\n.tgc-lede {\n  margin: 0 0 16px;\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--text-secondary, var(--chart-ink));\n}\n\n.tgc-plot {\n  container-type: inline-size;\n}\n.tgc-wide svg,\n.tgc-narrow svg {\n  display: block;\n  overflow: visible;\n}\n.tgc-narrow {\n  display: none;\n}\n.tgc-narrow svg {\n  max-width: 100%;\n  height: auto;\n}\n@container (max-width: 719.98px) {\n  .tgc-wide {\n    display: none;\n  }\n  .tgc-narrow {\n    display: block;\n  }\n}\n\n.tgc-read {\n  margin: 8px 0 0;\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--chart-ink-muted);\n}\n\n.tgc-data {\n  margin: 8px 0 0;\n  font-size: 14px;\n  line-height: 20px;\n}\n.tgc-data > summary {\n  cursor: pointer;\n  color: var(--chart-ink-muted);\n  width: fit-content;\n}\n.tgc-data > summary:hover {\n  color: var(--chart-ink);\n}\n.tgc-data[open] > summary {\n  margin-bottom: 8px;\n}\n\n.tgc-scroll {\n  overflow-x: auto;\n}\n.tgc-scroll:focus-visible {\n  outline: 2px solid var(--chart-accent);\n  outline-offset: 2px;\n}\n\n.tgc-table {\n  border-collapse: collapse;\n  min-width: 100%;\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--chart-ink);\n  /* A host page's table rules must not restyle the figure's table. */\n  border: 0;\n  border-radius: 0;\n  background: none;\n}\n.tgc-table caption {\n  text-align: left;\n  padding: 0 0 8px;\n  color: var(--chart-ink-muted);\n}\n.tgc-table th,\n.tgc-table td {\n  padding: 8px 12px 8px 0;\n  border-bottom: 1px solid var(--chart-rule);\n  text-align: left;\n  vertical-align: top;\n  font-weight: 400;\n  font-size: inherit;\n  color: inherit;\n  background: none;\n  text-transform: none;\n  letter-spacing: normal;\n}\n.tgc-table thead th {\n  color: var(--chart-ink-muted);\n  white-space: nowrap;\n}\n.tgc-table tbody th {\n  position: sticky;\n  left: 0;\n  background: var(--chart-canvas, var(--depth-1, transparent));\n}\n.tgc-table .tgc-n {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.tgc-table thead .tgc-n {\n  font-family: inherit;\n}\n.tgc-table tbody tr:hover {\n  background: var(--chart-shade);\n}\n.tgc-narrow-table .tgc-table {\n  display: block;\n  overflow-x: auto;\n}\n\n.tgc-notes {\n  margin: 16px 0 0;\n  padding-left: 20px;\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--chart-ink-muted);\n}\n.tgc-notes li {\n  margin: 0 0 8px;\n  padding-left: 4px;\n}\n.tgc-notes li:target {\n  color: var(--chart-ink);\n}\n.tgc-backlink {\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n}\n\n.tgc-refusals {\n  margin: 8px 0 0;\n  padding-left: 20px;\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--chart-ink-muted);\n}\n\n/* Marks */\n.tgc-svg {\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n.tgc-svg .tgc-num {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n}\n.tgc-ink {\n  fill: var(--chart-ink);\n}\n.tgc-ink-muted {\n  fill: var(--chart-ink-muted);\n}\n.tgc-bar,\n.tgc-ci,\n.tgc-pt-front {\n  fill: var(--chart-accent);\n}\n.tgc-gridline {\n  stroke: var(--chart-grid);\n  stroke-width: 1;\n}\n.tgc-rule {\n  stroke: var(--chart-rule);\n  stroke-width: 1;\n}\n.tgc-axis,\n.tgc-zero {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-whisker,\n.tgc-tick {\n  stroke: var(--chart-ink);\n  stroke-width: 2;\n  stroke-linecap: round;\n}\n.tgc-threshold {\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-dasharray: 3 3;\n}\n.tgc-front-line {\n  fill: none;\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-linejoin: round;\n}\n.tgc-pt,\n.tgc-open {\n  fill: none;\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-pt-est {\n  fill: none;\n  stroke: var(--chart-accent);\n  stroke-width: 2;\n}\n.tgc-pt-ci,\n.tgc-strike {\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-leader {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-ci-exact,\n.tgc-dot {\n  fill: var(--chart-muted);\n}\n.tgc-dashed {\n  stroke-dasharray: 2 2;\n}\n.tgc-tier-c {\n  fill: var(--chart-tier-c);\n}\n.tgc-tier-b {\n  fill: var(--chart-tier-b);\n}\n.tgc-tier-a {\n  fill: var(--chart-tier-a);\n}\n.tgc-tier-s {\n  fill: var(--chart-tier-s);\n}\n/* Neutral tint for counts: never the accent, capped at half strength so ink keeps 6:1. */\n.tgc-tint {\n  fill: color-mix(in srgb, var(--chart-muted) calc(var(--s, 0) * 50%), transparent);\n}\n\n@media print {\n  .tgc-plot {\n    container-type: normal;\n  }\n  .tgc-wide {\n    display: block;\n  }\n  .tgc-narrow {\n    display: none;\n  }\n  .tgc-wide svg {\n    width: 100%;\n    height: auto;\n  }\n  .tgc-figure {\n    break-inside: avoid;\n  }\n}\n\n/* Chart-led surfaces keep supporting text in the native disclosure. */\n.tgc-figure-chart { max-width: none; margin: 0; }\n.tgc-figure-chart .tgc-wide svg { width: 100%; height: auto; }\n.tgc-wide:has(.tgc-vertical), .tgc-narrow:has(.tgc-vertical) { overflow-x: auto; }\n.tgc-vertical { width: 100%; }\n.tgc-narrow .tgc-vertical { max-width: none; }\n.tgc-column-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-column:focus-visible { outline: none; }\n.tgc-column:focus-visible .tgc-column-hit { stroke: var(--chart-accent); }\n.tgc-vertical-bar { fill: var(--chart-accent); }\n/* Identity assets keep their approved colors on a white plate in either theme. */\n.tgc-logo-plate { fill: #fff; stroke: var(--chart-rule); }\n.tgc-column-tip { opacity: 0; pointer-events: none; }\n.tgc-tip-bg { fill: var(--chart-ink); }\n.tgc-tip-ink { fill: var(--chart-canvas); }\n\n.tgc-series-line { fill: none; stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 2; stroke-linejoin: round; }\n.tgc-series-point, .tgc-series-key { fill: var(--tgc-series, var(--chart-accent)); stroke: var(--chart-canvas); stroke-width: 2; }\n\n/* Semantic states stay tied to Brand status tokens. No-data has its own neutral mark. */\n.tgc-heat-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 19%, var(--chart-canvas)); stroke: var(--chart-pass, var(--status-running)); stroke-width: .8; }\n.tgc-heat-breach { fill: color-mix(in srgb, var(--chart-breach, var(--status-error)) 17%, var(--chart-canvas)); stroke: var(--chart-breach, var(--status-error)); stroke-width: .8; }\n.tgc-heat-no-data { fill: var(--chart-grid); stroke: var(--chart-rule); stroke-width: .8; }\n.tgc-heat-label { fill: var(--chart-ink); }\n.tgc-heat-missing { fill: var(--chart-ink-muted); }\n.tgc-wide:has(.tgc-heat-pass), .tgc-wide:has(.tgc-heat-breach) { overflow-x: auto; }\n.tgc-range-pass { fill: var(--chart-pass, var(--status-running)); }\n.tgc-range-breach { fill: var(--chart-breach, var(--status-error)); }\n.tgc-range-dot-pass { fill: var(--chart-canvas); stroke: var(--chart-pass, var(--status-running)); stroke-width: 3; }\n.tgc-range-dot-breach { fill: var(--chart-canvas); stroke: var(--chart-breach, var(--status-error)); stroke-width: 3; }\n.tgc-waterfall-bar { fill: var(--chart-accent); }\n.tgc-series-hit { fill: transparent; stroke: transparent; }\n.tgc-series-observation:focus-visible { outline: none; }\n.tgc-series-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-series-tip { opacity: 0; pointer-events: none; }\n\n.tgc-scalar-table { min-width: 620px; }\n.tgc-scalar-table tbody th { min-width: 180px; max-width: 260px; }\n\n/* Plot presentation keeps the same complete data available to assistive technology. */\n.tgc-accessible-data { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }\n.tgc-figure-plot .tgc-wide svg { box-sizing: content-box; width: calc(100% - 48px); padding: 0 24px; }\n/* One plot text size on the 12/14/18/32 scale; numbers differ by tabular figures, not size. */\n.tgc-figure-plot svg text { font-size: 14px; }\n/* Larger tooltip text needs padding outside the original report backdrop. */\n.tgc-figure-plot .tgc-tip-bg { stroke: var(--chart-ink); stroke-width: 24px; }\n.tgc-figure-plot .tgc-phone-plot svg { min-width: var(--tgc-phone-width); }\n.tgc-figure-plot .tgc-wide, .tgc-figure-plot .tgc-narrow { overflow-x: auto; }\n\n.tgc-figure-plot .tgc-wide-fallback svg { min-width: var(--tgc-fallback-width); }\n.tgc-phone-plot:focus-visible, .tgc-wide-fallback:focus-visible { outline: 2px solid var(--chart-accent); outline-offset: 2px; }\n\n/* Recorded events and spans. Kinds differ by stroke pattern as well as token, so they read without colour. */\n.tgc-mark { stroke-width: 1.5; }\n.tgc-mark-pass { stroke: var(--chart-pass, var(--status-running)); }\n.tgc-mark-deadline { stroke: var(--chart-ink); stroke-dasharray: 5 3; }\n.tgc-mark-died { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }\n.tgc-mark-event { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-release { stroke: var(--chart-ink-muted); }\n.tgc-mark-steer { stroke: var(--chart-accent); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-ruling { stroke: var(--chart-ink); stroke-dasharray: 6 2 1 2; }\n.tgc-mark-wake { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-head { fill: var(--chart-ink-muted); stroke: var(--chart-canvas); stroke-width: 1; }\n[data-mark=\"steer\"] .tgc-mark-head { fill: var(--chart-accent); }\n[data-mark=\"ruling\"] .tgc-mark-head { fill: var(--chart-ink); }\n/* A recorded verdict colours the rule and head: pass and fail take the status tones, unknown the muted tone. */\n.tgc-verdict-pass .tgc-mark { stroke: var(--chart-pass, var(--status-running)); }\n.tgc-verdict-pass .tgc-mark-head { fill: var(--chart-pass, var(--status-running)); }\n.tgc-verdict-fail .tgc-mark { stroke: var(--chart-breach, var(--status-error)); }\n.tgc-verdict-fail .tgc-mark-head { fill: var(--chart-breach, var(--status-error)); }\n.tgc-verdict-unknown .tgc-mark { stroke: var(--chart-muted); }\n.tgc-verdict-unknown .tgc-mark-head { fill: var(--chart-muted); }\n.tgc-mark-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n.tgc-mark-edge { fill: var(--chart-ink-muted); }\n.tgc-band-after-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 12%, transparent); }\n.tgc-band-idle { fill: var(--chart-shade); }\n/* A system-wide wall, such as a quota window: a breach wash across every lane, topped by a solid edge. */\n.tgc-band-blocked { fill: color-mix(in srgb, var(--chart-breach, var(--status-error)) 9%, transparent); }\n.tgc-band-wall { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }\n/* Missing data: a neutral wash under hatch lines, never a zero-height mark. */\n.tgc-hatch-bg { fill: color-mix(in srgb, var(--chart-muted) 10%, transparent); }\n.tgc-hatch { fill: none; stroke: var(--chart-muted); stroke-width: 1; }\n.tgc-span { fill: var(--chart-accent); }\n.tgc-span-muted { fill: var(--chart-muted); }\n.tgc-span-open { stroke: var(--chart-ink); stroke-width: 1.5; stroke-dasharray: 3 2; }\n.tgc-now { stroke: var(--chart-ink); stroke-width: 1.5; }\n/* Timeline trees and attempts. Ok ticks rise above the bar and failed ticks drop below it, so they read without colour. */\n.tgc-tree { fill: none; stroke: var(--chart-muted); stroke-width: 1; }\n.tgc-caret { fill: var(--chart-ink-muted); }\n.tgc-lane-toggle { cursor: pointer; }\n.tgc-lane-toggle:focus-visible { outline: none; }\n.tgc-lane-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-lane-toggle:hover .tgc-lane-hit { fill: var(--chart-shade); }\n.tgc-lane-toggle:focus-visible .tgc-lane-hit { stroke: var(--chart-accent); }\n.tgc-tick { stroke-width: 1.5; }\n.tgc-tick-ok { stroke: var(--chart-outcome-ok); }\n.tgc-tick-quota { stroke: var(--chart-outcome-quota); }\n.tgc-tick-lost { stroke: var(--chart-outcome-lost); }\n.tgc-tick-rate-limit { stroke: var(--chart-outcome-rate-limit); }\n.tgc-tick-oom { stroke: var(--chart-outcome-oom); }\n.tgc-tick-refused { stroke: var(--chart-outcome-refused); }\n.tgc-tick-aborted { stroke: var(--chart-outcome-neutral); }\n.tgc-tick-other { stroke: var(--chart-outcome-other); }\n/* Lane labels and counts keep a canvas halo, so rules and ticks under them never strike through the text. */\n.tgc-lane-label, .tgc-count { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n.tgc-count { fill: var(--chart-ink); }\n.tgc-count-ok { fill: var(--chart-pass, var(--status-running)); }\n.tgc-count-failed { fill: var(--chart-breach, var(--status-error)); }\n\n/* FigureView (React) picks the render by measured width; the wide plot fills its container. */\n.tgc-figure-view { max-width: none; margin: 0; }\n.tgc-view-plot svg { display: block; overflow: visible; }\n.tgc-view-wide svg { width: 100%; height: auto; }\n.tgc-view-narrow svg { max-width: 100%; height: auto; }\n\n/*\n * One fixed palette in every view (src/outcomes.ts names them), each a light-dark() pair picked by the page's\n * color-scheme. Green, red and amber are status colours and mean one thing everywhere: green is a turn or run that\n * worked (an `ok` attempt, a solved run), red a run that died, amber a run stalled or a turn rate-limited. Outcomes\n * pass the dataviz colour-vision checks as adjacent pairs in stack order (ok, quota, lost, rate-limit, oom, refused) on\n * the light surface and on #161616; `aborted` and `other` are two distinct greys. Checkers take hues no status uses\n * (blue for the current checker, then magenta, cyan and violet for older ones) and pass as adjacent series; their\n * marks also carry a vN label. Run endings reuse those colours. `scripts/palette-check.mjs` re-runs the validator. A\n * page may override any of these properties; :where() keeps them at zero specificity.\n */\n:where(:root) {\n  --chart-outcome-ok: light-dark(#1baf7a, #199e70);\n  --chart-outcome-quota: light-dark(#eb6834, #d95926);\n  --chart-outcome-lost: light-dark(#0f9fb8, #1a9cb3);\n  --chart-outcome-rate-limit: light-dark(#eda100, #c98500);\n  --chart-outcome-oom: light-dark(#e87ba4, #d55181);\n  --chart-outcome-refused: light-dark(#6250d6, #9085e9);\n  --chart-outcome-neutral: #898781;\n  --chart-outcome-other: #b5b3ac;\n  --chart-checker-0: light-dark(#2a78d6, #3987e5);\n  --chart-checker-1: light-dark(#b8478f, #c2408f);\n  --chart-checker-2: light-dark(#0f9fb8, #1a9cb3);\n  --chart-checker-3: light-dark(#6250d6, #8c7ce6);\n  /* How a run ended: solved green, died red, stalled amber, live blue; not solved and cancelled are neutral. */\n  --chart-ending-solved: var(--chart-outcome-ok);\n  --chart-ending-died: light-dark(#d03b3b, #e05252);\n  --chart-ending-stalled: var(--chart-outcome-rate-limit);\n  --chart-ending-live: var(--chart-checker-0);\n  --chart-ending-not-solved: light-dark(#6b7a90, #8494ab);\n  --chart-ending-cancelled: var(--chart-outcome-neutral);\n  --chart-ending-never-started: color-mix(in srgb, var(--chart-outcome-other) 45%, transparent);\n}\n/* A series drawn in a checker's hue; past the fourth hue it is muted and named by its label. */\n.tgc-checker-0 { --tgc-series: var(--chart-checker-0); }\n.tgc-checker-1 { --tgc-series: var(--chart-checker-1); }\n.tgc-checker-2 { --tgc-series: var(--chart-checker-2); }\n.tgc-checker-3 { --tgc-series: var(--chart-checker-3); }\n.tgc-checker-other { --tgc-series: var(--chart-muted); }\n/* Recorded verdicts: a pass is filled, a fail or an incomparable value is an outline, an undecided one dashed. */\n.tgc-series-point.tgc-point-outline { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.75; }\n.tgc-series-point.tgc-point-undecided { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.5; stroke-dasharray: 2 1.5; }\n.tgc-strip-hatch .tgc-hatch { stroke: var(--tgc-series, var(--chart-muted)); }\n/* A failing verdict without a value is a neutral ring: in its checker's hue it read as that checker passing. */\n.tgc-series-point.tgc-point-outline.tgc-strip-fail { stroke: var(--chart-ink-muted); }\n.tgc-strip-edge { fill: none; stroke: var(--tgc-series, var(--chart-muted)); stroke-width: 1.25; }\n.tgc-strip-observation:focus-visible { outline: none; }\n.tgc-strip-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-point-badge { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace); }\n.tgc-point-label { fill: var(--chart-ink-muted); }\n.tgc-glyph-note { fill: var(--chart-ink); font-weight: 600; }\n/* Status colours appear only on these glyphs. */\n.tgc-glyph-check { fill: var(--chart-pass, var(--status-running)); font-weight: 600; }\n.tgc-glyph-cross { fill: var(--chart-breach, var(--status-error)); font-weight: 600; }\n/* Recorded targets sit under the data: a target is a soft band between solid edges, a stretch a dashed outline. */\n.tgc-target-target { fill: color-mix(in srgb, var(--chart-ink) 7%, transparent); }\n.tgc-target-stretch { fill: none; }\n.tgc-target-target-edge, .tgc-target-target.tgc-target-line { stroke: var(--chart-ink-muted); stroke-width: 1; }\n.tgc-target-stretch-edge, .tgc-target-stretch.tgc-target-line { stroke: var(--chart-ink-muted); stroke-width: 1; stroke-dasharray: 4 3; }\n.tgc-target-label { fill: var(--chart-ink-muted); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n/* Group headers: a labelled bracket above the plot and a light rule at each inner edge. */\n.tgc-group-rule { stroke: var(--chart-ink-muted); stroke-width: 1.5; }\n.tgc-group-edge { stroke: var(--chart-rule); stroke-width: 1; }\n.tgc-group-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n/* The verdict key: glyphs in the neutral ink, so they describe a mark's form, not a series. */\n.tgc-key-mark { stroke-width: 1.5; }\n.tgc-key-filled { fill: var(--chart-ink-muted); stroke: none; }\n.tgc-key-outline { fill: none; stroke: var(--chart-ink-muted); }\n.tgc-key-dashed { fill: none; stroke: var(--chart-ink-muted); stroke-dasharray: 2 1.5; }\n";
+const figureCss = "/* @tangle-network/charts — figure block and mark styles.\n *\n * Every colour is a --chart-* token from @tangle-network/brand tokens.css, so a\n * figure follows the page theme. A standalone document without brand tokens\n * embeds `chartTokensCss` first. Fonts fall back to Inter and JetBrains Mono.\n *\n * Each figure carries a 720 px and a 358 px render. The swap follows the\n * figure's own width (a container query), so a narrow column shows the phone\n * render even on a wide screen. */\n\n.tgc-figure {\n  margin: 32px 0 0;\n  padding: 0;\n  max-width: 720px;\n  color: var(--chart-ink);\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n\n.tgc-finding {\n  margin: 0 0 8px;\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 600;\n  color: var(--chart-ink);\n}\n\n.tgc-noteref {\n  margin-left: 2px;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n}\n.tgc-noteref:hover,\n.tgc-noteref:focus-visible {\n  color: var(--chart-accent);\n  text-decoration: underline;\n}\n\n.tgc-lede {\n  margin: 0 0 16px;\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--text-secondary, var(--chart-ink));\n}\n\n.tgc-plot {\n  container-type: inline-size;\n}\n.tgc-wide svg,\n.tgc-narrow svg {\n  display: block;\n  overflow: visible;\n}\n.tgc-narrow {\n  display: none;\n}\n.tgc-narrow svg {\n  max-width: 100%;\n  height: auto;\n}\n@container (max-width: 719.98px) {\n  .tgc-wide {\n    display: none;\n  }\n  .tgc-narrow {\n    display: block;\n  }\n}\n\n.tgc-read {\n  margin: 8px 0 0;\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--chart-ink-muted);\n}\n\n.tgc-data {\n  margin: 8px 0 0;\n  font-size: 14px;\n  line-height: 20px;\n}\n.tgc-data > summary {\n  cursor: pointer;\n  color: var(--chart-ink-muted);\n  width: fit-content;\n}\n.tgc-data > summary:hover {\n  color: var(--chart-ink);\n}\n.tgc-data[open] > summary {\n  margin-bottom: 8px;\n}\n\n.tgc-scroll {\n  overflow-x: auto;\n}\n.tgc-scroll:focus-visible {\n  outline: 2px solid var(--chart-accent);\n  outline-offset: 2px;\n}\n\n.tgc-table {\n  border-collapse: collapse;\n  min-width: 100%;\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--chart-ink);\n  /* A host page's table rules must not restyle the figure's table. */\n  border: 0;\n  border-radius: 0;\n  background: none;\n}\n.tgc-table caption {\n  text-align: left;\n  padding: 0 0 8px;\n  color: var(--chart-ink-muted);\n}\n.tgc-table th,\n.tgc-table td {\n  padding: 8px 12px 8px 0;\n  border-bottom: 1px solid var(--chart-rule);\n  text-align: left;\n  vertical-align: top;\n  font-weight: 400;\n  font-size: inherit;\n  color: inherit;\n  background: none;\n  text-transform: none;\n  letter-spacing: normal;\n}\n.tgc-table thead th {\n  color: var(--chart-ink-muted);\n  white-space: nowrap;\n}\n.tgc-table tbody th {\n  position: sticky;\n  left: 0;\n  background: var(--chart-canvas, var(--depth-1, transparent));\n}\n.tgc-table .tgc-n {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.tgc-table thead .tgc-n {\n  font-family: inherit;\n}\n.tgc-table tbody tr:hover {\n  background: var(--chart-shade);\n}\n.tgc-narrow-table .tgc-table {\n  display: block;\n  overflow-x: auto;\n}\n\n.tgc-notes {\n  margin: 16px 0 0;\n  padding-left: 20px;\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--chart-ink-muted);\n}\n.tgc-notes li {\n  margin: 0 0 8px;\n  padding-left: 4px;\n}\n.tgc-notes li:target {\n  color: var(--chart-ink);\n}\n.tgc-backlink {\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n}\n\n.tgc-refusals {\n  margin: 8px 0 0;\n  padding-left: 20px;\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--chart-ink-muted);\n}\n\n/* Marks */\n.tgc-svg {\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n.tgc-svg .tgc-num {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n}\n.tgc-ink {\n  fill: var(--chart-ink);\n}\n.tgc-ink-muted {\n  fill: var(--chart-ink-muted);\n}\n.tgc-bar,\n.tgc-ci,\n.tgc-pt-front {\n  fill: var(--chart-accent);\n}\n.tgc-gridline {\n  stroke: var(--chart-grid);\n  stroke-width: 1;\n}\n.tgc-rule {\n  stroke: var(--chart-rule);\n  stroke-width: 1;\n}\n.tgc-axis,\n.tgc-zero {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-whisker,\n.tgc-tick {\n  stroke: var(--chart-ink);\n  stroke-width: 2;\n  stroke-linecap: round;\n}\n.tgc-threshold {\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-dasharray: 3 3;\n}\n.tgc-front-line {\n  fill: none;\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-linejoin: round;\n}\n.tgc-pt,\n.tgc-open {\n  fill: none;\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-pt-est {\n  fill: none;\n  stroke: var(--chart-accent);\n  stroke-width: 2;\n}\n.tgc-pt-ci,\n.tgc-strike {\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-leader {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-ci-exact,\n.tgc-dot {\n  fill: var(--chart-muted);\n}\n.tgc-dashed {\n  stroke-dasharray: 2 2;\n}\n.tgc-tier-c {\n  fill: var(--chart-tier-c);\n}\n.tgc-tier-b {\n  fill: var(--chart-tier-b);\n}\n.tgc-tier-a {\n  fill: var(--chart-tier-a);\n}\n.tgc-tier-s {\n  fill: var(--chart-tier-s);\n}\n/* Neutral tint for counts: never the accent, capped at half strength so ink keeps 6:1. */\n.tgc-tint {\n  fill: color-mix(in srgb, var(--chart-muted) calc(var(--s, 0) * 50%), transparent);\n}\n\n@media print {\n  .tgc-plot {\n    container-type: normal;\n  }\n  .tgc-wide {\n    display: block;\n  }\n  .tgc-narrow {\n    display: none;\n  }\n  .tgc-wide svg {\n    width: 100%;\n    height: auto;\n  }\n  .tgc-figure {\n    break-inside: avoid;\n  }\n}\n\n/* Chart-led surfaces keep supporting text in the native disclosure. */\n.tgc-figure-chart { max-width: none; margin: 0; }\n.tgc-figure-chart .tgc-wide svg { width: 100%; height: auto; }\n.tgc-wide:has(.tgc-vertical), .tgc-narrow:has(.tgc-vertical) { overflow-x: auto; }\n.tgc-vertical { width: 100%; }\n.tgc-narrow .tgc-vertical { max-width: none; }\n.tgc-column-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-column:focus-visible { outline: none; }\n.tgc-column:focus-visible .tgc-column-hit { stroke: var(--chart-accent); }\n.tgc-vertical-bar { fill: var(--chart-accent); }\n/* Identity assets keep their approved colors on a white plate in either theme. */\n.tgc-logo-plate { fill: #fff; stroke: var(--chart-rule); }\n.tgc-column-tip { opacity: 0; pointer-events: none; }\n.tgc-tip-bg { fill: var(--chart-ink); }\n.tgc-tip-ink { fill: var(--chart-canvas); }\n\n.tgc-series-line { fill: none; stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 2; stroke-linejoin: round; }\n.tgc-series-point, .tgc-series-key { fill: var(--tgc-series, var(--chart-accent)); stroke: var(--chart-canvas); stroke-width: 2; }\n\n/* Semantic states stay tied to Brand status tokens. No-data has its own neutral mark. */\n.tgc-heat-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 19%, var(--chart-canvas)); stroke: var(--chart-pass, var(--status-running)); stroke-width: .8; }\n.tgc-heat-breach { fill: color-mix(in srgb, var(--chart-breach, var(--status-error)) 17%, var(--chart-canvas)); stroke: var(--chart-breach, var(--status-error)); stroke-width: .8; }\n.tgc-heat-no-data { fill: var(--chart-grid); stroke: var(--chart-rule); stroke-width: .8; }\n.tgc-heat-label { fill: var(--chart-ink); }\n.tgc-heat-missing { fill: var(--chart-ink-muted); }\n.tgc-wide:has(.tgc-heat-pass), .tgc-wide:has(.tgc-heat-breach) { overflow-x: auto; }\n.tgc-range-pass { fill: var(--chart-pass, var(--status-running)); }\n.tgc-range-breach { fill: var(--chart-breach, var(--status-error)); }\n.tgc-range-dot-pass { fill: var(--chart-canvas); stroke: var(--chart-pass, var(--status-running)); stroke-width: 3; }\n.tgc-range-dot-breach { fill: var(--chart-canvas); stroke: var(--chart-breach, var(--status-error)); stroke-width: 3; }\n.tgc-waterfall-bar { fill: var(--chart-accent); }\n.tgc-series-hit { fill: transparent; stroke: transparent; }\n.tgc-series-observation:focus-visible { outline: none; }\n.tgc-series-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-series-tip { opacity: 0; pointer-events: none; }\n.tgc-series-secondary { opacity: .45; }\n.tgc-crosshair { stroke: var(--chart-rule); stroke-width: 1; }\n\n.tgc-scalar-table { min-width: 620px; }\n.tgc-scalar-table tbody th { min-width: 180px; max-width: 260px; }\n\n/* Plot presentation keeps the same complete data available to assistive technology. */\n.tgc-accessible-data { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }\n.tgc-figure-plot .tgc-wide svg { box-sizing: content-box; width: calc(100% - 48px); padding: 0 24px; }\n/* One plot text size on the 12/14/18/32 scale; numbers differ by tabular figures, not size. */\n.tgc-figure-plot svg text { font-size: 14px; }\n/* Larger tooltip text needs padding outside the original report backdrop. */\n.tgc-figure-plot .tgc-tip-bg { stroke: var(--chart-ink); stroke-width: 24px; }\n.tgc-figure-plot .tgc-phone-plot svg { min-width: var(--tgc-phone-width); }\n.tgc-figure-plot .tgc-wide, .tgc-figure-plot .tgc-narrow { overflow-x: auto; }\n\n.tgc-figure-plot .tgc-wide-fallback svg { min-width: var(--tgc-fallback-width); }\n.tgc-phone-plot:focus-visible, .tgc-wide-fallback:focus-visible { outline: 2px solid var(--chart-accent); outline-offset: 2px; }\n\n/* Recorded events and spans. Kinds differ by stroke pattern as well as token, so they read without colour. */\n.tgc-mark { stroke-width: 1.5; }\n.tgc-mark-pass { stroke: var(--chart-pass, var(--status-running)); }\n.tgc-mark-deadline { stroke: var(--chart-ink); stroke-dasharray: 5 3; }\n.tgc-mark-died { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }\n.tgc-mark-event { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-release { stroke: var(--chart-ink-muted); }\n.tgc-mark-steer { stroke: var(--chart-accent); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-ruling { stroke: var(--chart-ink); stroke-dasharray: 6 2 1 2; }\n.tgc-mark-wake { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-head { fill: var(--chart-ink-muted); stroke: var(--chart-canvas); stroke-width: 1; }\n[data-mark=\"steer\"] .tgc-mark-head { fill: var(--chart-accent); }\n[data-mark=\"ruling\"] .tgc-mark-head { fill: var(--chart-ink); }\n/* A recorded verdict colours the rule and head: pass and fail take the status tones, unknown the muted tone. */\n.tgc-verdict-pass .tgc-mark { stroke: var(--chart-pass, var(--status-running)); }\n.tgc-verdict-pass .tgc-mark-head { fill: var(--chart-pass, var(--status-running)); }\n.tgc-verdict-fail .tgc-mark { stroke: var(--chart-breach, var(--status-error)); }\n.tgc-verdict-fail .tgc-mark-head { fill: var(--chart-breach, var(--status-error)); }\n.tgc-verdict-unknown .tgc-mark { stroke: var(--chart-muted); }\n.tgc-verdict-unknown .tgc-mark-head { fill: var(--chart-muted); }\n.tgc-mark-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n.tgc-mark-edge { fill: var(--chart-ink-muted); }\n.tgc-band-after-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 12%, transparent); }\n.tgc-band-idle { fill: var(--chart-shade); }\n/* A system-wide wall, such as a quota window: a breach wash across every lane, topped by a solid edge. */\n.tgc-band-blocked { fill: color-mix(in srgb, var(--chart-breach, var(--status-error)) 9%, transparent); }\n.tgc-band-wall { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }\n/* Missing data: a neutral wash under hatch lines, never a zero-height mark. */\n.tgc-hatch-bg { fill: color-mix(in srgb, var(--chart-muted) 10%, transparent); }\n.tgc-hatch { fill: none; stroke: var(--chart-muted); stroke-width: 1; }\n.tgc-span { fill: var(--chart-accent); }\n.tgc-span-muted { fill: var(--chart-muted); }\n.tgc-span-open { stroke: var(--chart-ink); stroke-width: 1.5; stroke-dasharray: 3 2; }\n.tgc-now { stroke: var(--chart-ink); stroke-width: 1.5; }\n/* Timeline trees and attempts. Ok ticks rise above the bar and failed ticks drop below it, so they read without colour. */\n.tgc-tree { fill: none; stroke: var(--chart-muted); stroke-width: 1; }\n.tgc-caret { fill: var(--chart-ink-muted); }\n.tgc-lane-toggle { cursor: pointer; }\n.tgc-lane-toggle:focus-visible { outline: none; }\n.tgc-lane-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-lane-toggle:hover .tgc-lane-hit { fill: var(--chart-shade); }\n.tgc-lane-toggle:focus-visible .tgc-lane-hit { stroke: var(--chart-accent); }\n.tgc-tick { stroke-width: 1.5; }\n.tgc-tick-ok { stroke: var(--chart-outcome-ok); }\n.tgc-tick-quota { stroke: var(--chart-outcome-quota); }\n.tgc-tick-lost { stroke: var(--chart-outcome-lost); }\n.tgc-tick-rate-limit { stroke: var(--chart-outcome-rate-limit); }\n.tgc-tick-oom { stroke: var(--chart-outcome-oom); }\n.tgc-tick-refused { stroke: var(--chart-outcome-refused); }\n.tgc-tick-aborted { stroke: var(--chart-outcome-neutral); }\n.tgc-tick-other { stroke: var(--chart-outcome-other); }\n/* Lane labels and counts keep a canvas halo, so rules and ticks under them never strike through the text. */\n.tgc-lane-label, .tgc-count { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n.tgc-count { fill: var(--chart-ink); }\n.tgc-count-ok { fill: var(--chart-pass, var(--status-running)); }\n.tgc-count-failed { fill: var(--chart-breach, var(--status-error)); }\n\n/* FigureView (React) picks the render by measured width; the wide plot fills its container. */\n.tgc-figure-view { max-width: none; margin: 0; }\n.tgc-view-plot svg { display: block; overflow: visible; }\n.tgc-view-wide svg { width: 100%; height: auto; }\n.tgc-view-narrow svg { max-width: 100%; height: auto; }\n\n/*\n * One fixed palette in every view (src/outcomes.ts names them), each a light-dark() pair picked by the page's\n * color-scheme. Green, red and amber are status colours and mean one thing everywhere: green is a turn or run that\n * worked (an `ok` attempt, a solved run), red a run that died, amber a run stalled or a turn rate-limited. Outcomes\n * pass the dataviz colour-vision checks as adjacent pairs in stack order (ok, quota, lost, rate-limit, oom, refused) on\n * the light surface and on #161616; `aborted` and `other` are two distinct greys. Checkers take hues no status uses\n * (blue for the current checker, then magenta, cyan and violet for older ones) and pass as adjacent series; their\n * marks also carry a vN label. Run endings reuse those colours. `scripts/palette-check.mjs` re-runs the validator. A\n * page may override any of these properties; :where() keeps them at zero specificity.\n */\n:where(:root) {\n  --chart-outcome-ok: light-dark(#1baf7a, #199e70);\n  --chart-outcome-quota: light-dark(#eb6834, #d95926);\n  --chart-outcome-lost: light-dark(#0f9fb8, #1a9cb3);\n  --chart-outcome-rate-limit: light-dark(#eda100, #c98500);\n  --chart-outcome-oom: light-dark(#e87ba4, #d55181);\n  --chart-outcome-refused: light-dark(#6250d6, #9085e9);\n  --chart-outcome-neutral: #898781;\n  --chart-outcome-other: #b5b3ac;\n  --chart-checker-0: light-dark(#2a78d6, #3987e5);\n  --chart-checker-1: light-dark(#b8478f, #c2408f);\n  --chart-checker-2: light-dark(#0f9fb8, #1a9cb3);\n  --chart-checker-3: light-dark(#6250d6, #8c7ce6);\n  /* How a run ended: solved green, died red, stalled amber, live blue; not solved and cancelled are neutral. */\n  --chart-ending-solved: var(--chart-outcome-ok);\n  --chart-ending-died: light-dark(#d03b3b, #e05252);\n  --chart-ending-stalled: var(--chart-outcome-rate-limit);\n  --chart-ending-live: var(--chart-checker-0);\n  --chart-ending-not-solved: light-dark(#6b7a90, #8494ab);\n  --chart-ending-cancelled: var(--chart-outcome-neutral);\n  --chart-ending-never-started: color-mix(in srgb, var(--chart-outcome-other) 45%, transparent);\n}\n/* A series drawn in a checker's hue; past the fourth hue it is muted and named by its label. */\n.tgc-checker-0 { --tgc-series: var(--chart-checker-0); }\n.tgc-checker-1 { --tgc-series: var(--chart-checker-1); }\n.tgc-checker-2 { --tgc-series: var(--chart-checker-2); }\n.tgc-checker-3 { --tgc-series: var(--chart-checker-3); }\n.tgc-checker-other { --tgc-series: var(--chart-muted); }\n/* Recorded verdicts: a pass is filled, a fail or an incomparable value is an outline, an undecided one dashed. */\n.tgc-series-point.tgc-point-outline { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.75; }\n.tgc-series-point.tgc-point-undecided { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.5; stroke-dasharray: 2 1.5; }\n.tgc-strip-hatch .tgc-hatch { stroke: var(--tgc-series, var(--chart-muted)); }\n/* A failing verdict without a value is a neutral ring: in its checker's hue it read as that checker passing. */\n.tgc-series-point.tgc-point-outline.tgc-strip-fail { stroke: var(--chart-ink-muted); }\n.tgc-strip-edge { fill: none; stroke: var(--tgc-series, var(--chart-muted)); stroke-width: 1.25; }\n.tgc-strip-observation:focus-visible { outline: none; }\n.tgc-strip-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-point-badge { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace); }\n.tgc-point-label { fill: var(--chart-ink-muted); }\n.tgc-glyph-note { fill: var(--chart-ink); font-weight: 600; }\n/* Status colours appear only on these glyphs. */\n.tgc-glyph-check { fill: var(--chart-pass, var(--status-running)); font-weight: 600; }\n.tgc-glyph-cross { fill: var(--chart-breach, var(--status-error)); font-weight: 600; }\n/* Recorded targets sit under the data: a target is a soft band between solid edges, a stretch a dashed outline. */\n.tgc-target-target { fill: color-mix(in srgb, var(--chart-ink) 7%, transparent); }\n.tgc-target-stretch { fill: none; }\n.tgc-target-target-edge, .tgc-target-target.tgc-target-line { stroke: var(--chart-ink-muted); stroke-width: 1; }\n.tgc-target-stretch-edge, .tgc-target-stretch.tgc-target-line { stroke: var(--chart-ink-muted); stroke-width: 1; stroke-dasharray: 4 3; }\n.tgc-target-label { fill: var(--chart-ink-muted); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n/* Group headers: a labelled bracket above the plot and a light rule at each inner edge. */\n.tgc-group-rule { stroke: var(--chart-ink-muted); stroke-width: 1.5; }\n.tgc-group-edge { stroke: var(--chart-rule); stroke-width: 1; }\n.tgc-group-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n/* The verdict key: glyphs in the neutral ink, so they describe a mark's form, not a series. */\n.tgc-key-mark { stroke-width: 1.5; }\n.tgc-key-filled { fill: var(--chart-ink-muted); stroke: none; }\n.tgc-key-outline { fill: none; stroke: var(--chart-ink-muted); }\n.tgc-key-dashed { fill: none; stroke: var(--chart-ink-muted); stroke-dasharray: 2 1.5; }\n";
 /** --chart-* resolved per theme, for documents without brand tokens: light, dark by preference or [data-theme="dark"], light in print. */
 const chartTokensCss = ":root{--chart-ink:hsl(0 0% 24.7059%);--chart-ink-muted:hsl(0 0% 41.9608%);--chart-muted:hsl(0 0% 36.4706%);--chart-grid:hsl(225 28.5714% 94.5098%);--chart-rule:hsl(222.8571 6.6667% 79.4118%);--chart-shade:color-mix(in srgb, hsl(246.2264 92.1739% 54.902%) 7%, transparent);--chart-accent:hsl(245.9504 54.2601% 56.2745%);--chart-tier-c:hsl(246.2687 54.4715% 75.8824%);--chart-tier-b:hsl(246.055 54.7739% 60.9804%);--chart-tier-a:hsl(246.0465 54.8936% 46.0784%);--chart-tier-s:hsl(245.5172 54.717% 31.1765%);--chart-pass:hsl(154.8148 64.8% 24.5098%);--chart-breach:hsl(0 75.1244% 39.4118%);--chart-canvas:hsl(0 0% 100%);color-scheme:light}\n@media (prefers-color-scheme: dark){:root:not([data-theme=\"light\"]){--chart-ink:hsl(0 0% 84.3137%);--chart-ink-muted:hsl(0 0% 60.3922%);--chart-muted:hsl(0 0% 67.0588%);--chart-grid:hsl(243.3333 20.4545% 17.2549%);--chart-rule:hsl(245 18.4615% 25.4902%);--chart-shade:color-mix(in srgb, hsl(245.5556 93.1034% 88.6275%) 7%, transparent);--chart-accent:hsl(246.0465 85.4305% 70.3922%);--chart-tier-c:hsl(246.1017 55.1402% 41.9608%);--chart-tier-b:hsl(246.1905 54.7826% 54.902%);--chart-tier-a:hsl(245.3933 54.6012% 68.0392%);--chart-tier-s:hsl(245.6604 54.6392% 80.9804%);--chart-pass:hsl(155.1429 64.8148% 78.8235%);--chart-breach:hsl(0 74.4681% 90.7843%);--chart-canvas:hsl(246.6667 31.0345% 5.6863%);color-scheme:dark}}\n:root[data-theme=\"dark\"]{--chart-ink:hsl(0 0% 84.3137%);--chart-ink-muted:hsl(0 0% 60.3922%);--chart-muted:hsl(0 0% 67.0588%);--chart-grid:hsl(243.3333 20.4545% 17.2549%);--chart-rule:hsl(245 18.4615% 25.4902%);--chart-shade:color-mix(in srgb, hsl(245.5556 93.1034% 88.6275%) 7%, transparent);--chart-accent:hsl(246.0465 85.4305% 70.3922%);--chart-tier-c:hsl(246.1017 55.1402% 41.9608%);--chart-tier-b:hsl(246.1905 54.7826% 54.902%);--chart-tier-a:hsl(245.3933 54.6012% 68.0392%);--chart-tier-s:hsl(245.6604 54.6392% 80.9804%);--chart-pass:hsl(155.1429 64.8148% 78.8235%);--chart-breach:hsl(0 74.4681% 90.7843%);--chart-canvas:hsl(246.6667 31.0345% 5.6863%);color-scheme:dark}\n@media print{:root,:root:not([data-theme=\"light\"]),:root[data-theme=\"dark\"]{--chart-ink:hsl(0 0% 24.7059%);--chart-ink-muted:hsl(0 0% 41.9608%);--chart-muted:hsl(0 0% 36.4706%);--chart-grid:hsl(225 28.5714% 94.5098%);--chart-rule:hsl(222.8571 6.6667% 79.4118%);--chart-shade:color-mix(in srgb, hsl(246.2264 92.1739% 54.902%) 7%, transparent);--chart-accent:hsl(245.9504 54.2601% 56.2745%);--chart-tier-c:hsl(246.2687 54.4715% 75.8824%);--chart-tier-b:hsl(246.055 54.7739% 60.9804%);--chart-tier-a:hsl(246.0465 54.8936% 46.0784%);--chart-tier-s:hsl(245.5172 54.717% 31.1765%);--chart-pass:hsl(154.8148 64.8% 24.5098%);--chart-breach:hsl(0 75.1244% 39.4118%);--chart-canvas:hsl(0 0% 100%);color-scheme:light}}";
 //#endregion
@@ -2617,16 +2617,11 @@ function verdictKey(points, markers, x, y, width) {
 /** Recorded trajectories. Explicit null observations break lines without interpolation. */
 function timeSeries(rows, o) {
 	const id = o.id ?? "time-series";
-	const gap = domainGap(o.x.domain) ?? domainGap(o.y.domain) ?? categoriesGap(o.x.categories, o.x.domain) ?? yAxisGap(o.y);
+	const gap = domainGap(o.x.domain) ?? domainGap(o.y.domain) ?? categoriesGap(o.x.categories, o.x.domain) ?? yAxisGap(o.y) ?? eventsGap(o.marks, o.bands, o.x.domain);
 	if (gap) return {
 		id,
 		refused: gap
 	};
-	const events = eventsGap(o.marks, o.bands, o.x.domain);
-	if (events) return {
-		id,
-		refused: events
-	};
 	if (!rows.length || rows.every((row) => !row.points.length)) return {
 		id,
 		refused: "No trajectory observations recorded."
@@ -2635,26 +2630,16 @@ function timeSeries(rows, o) {
 		id,
 		refused: "Duplicate trajectory ids."
 	};
-	const columns = o.x.categories?.length ? new Set(o.x.categories.map((c) => c.at)) : null;
 	for (const row of rows) {
 		if (row.colorIndex !== void 0 && (!Number.isInteger(row.colorIndex) || row.colorIndex < 0)) return {
 			id,
 			refused: `${row.label}: a colour index is a whole number of at least 0.`
 		};
-		let previous = -Infinity;
-		for (const point of row.points) {
-			const ordered = columns ? point.x >= previous && columns.has(point.x) : point.x > previous;
-			if (!Number.isFinite(point.x) || !ordered || point.x < o.x.domain[0] || point.x > o.x.domain[1]) return {
-				id,
-				refused: columns ? `${row.label}: x values must be categories, in order.` : `${row.label}: x values must be finite, strictly increasing and inside the axis domain.`
-			};
-			previous = point.x;
-			const problem = scalarGap(point.y, point.interval, point.observations, o.y.domain) ?? logValueGap(point.y, o.y.scale) ?? logValueGap(point.interval?.lower ?? null, o.y.scale) ?? pointFieldsGap(point);
-			if (problem) return {
-				id,
-				refused: `${row.label} at ${point.x}: ${problem}`
-			};
-		}
+		const problem = pointsGap(row.label, row.points, o.x, o.y.domain, o.y.scale);
+		if (problem) return {
+			id,
+			refused: problem
+		};
 	}
 	const category = new Map((o.x.categories ?? []).map((c) => [c.at, c.label]));
 	const xLabel = (x) => o.formatX ? o.formatX(x) : category.get(x) ?? String(x);
@@ -2664,12 +2649,9 @@ function timeSeries(rows, o) {
 		row,
 		point
 	})));
-	const measured = flat.filter(({ point }) => point.y !== null);
 	const stripped = flat.filter(({ point }) => point.y === null && point.verdict !== void 0);
 	const recorded = hasPointFields(flat.map(({ point }) => point));
 	const marks = o.marks ?? [], bands = o.bands ?? [];
-	const hasEvents = marks.length + bands.length > 0;
-	const groups = bands.some((band) => band.kind === "group");
 	const stripName = o.y.strip?.trim() || "no value";
 	if (axisGutter(grid) >= 270) return {
 		id,
@@ -2717,8 +2699,8 @@ function timeSeries(rows, o) {
 	return {
 		id,
 		finding: `${capitalize(o.y.label)} by ${o.x.label}.`,
-		lede: `${measured.length} of ${flat.length} positions have a recorded value.${stripped.length ? ` ${stripped.length} recorded ${plural(stripped.length, "verdict")} without a value ${stripped.length === 1 ? "sits" : "sit"} in the strip under the plot.` : ""}`,
-		read: `Points show recorded values. Lines connect adjacent measured positions; missing positions break the line. Whiskers show recorded intervals.${recorded ? " A filled mark is a pass, an outline a fail, a dashed outline undecided; * is not comparable with the goal and ? of unknown comparability; ×n counts the recorded rows a mark stands for." : ""}${stripped.length ? ` Hatched squares under the plot are verdicts recorded without a value (${stripName}).` : ""}${o.y.targets?.length ? " Shaded bands are recorded targets; dashed bands are stretch targets." : ""}${groups ? " Brackets above the plot group positions, such as one run's releases." : ""}${hasEvents ? ` ${EVENTS_READ}` : ""}`,
+		lede: `${flat.filter(({ point }) => point.y !== null).length} of ${flat.length} positions have a recorded value.${stripped.length ? ` ${stripped.length} recorded ${plural(stripped.length, "verdict")} without a value ${stripped.length === 1 ? "sits" : "sit"} in the strip under the plot.` : ""}`,
+		read: `Points show recorded values. Lines connect adjacent measured positions; missing positions break the line. Whiskers show recorded intervals.${recorded ? " A filled mark is a pass, an outline a fail, a dashed outline undecided; * is not comparable with the goal and ? of unknown comparability; ×n counts the recorded rows a mark stands for." : ""}${stripped.length ? ` Hatched squares under the plot are verdicts recorded without a value (${stripName}).` : ""}${o.y.targets?.length ? " Shaded bands are recorded targets; dashed bands are stretch targets." : ""}${bands.some((band) => band.kind === "group") ? " Brackets above the plot group positions, such as one run's releases." : ""}${marks.length + bands.length ? ` ${EVENTS_READ}` : ""}`,
 		svg: {
 			wide: plot(rows, o, wideWidth(o.width), xLabel, yLabel, grid, facts, stripName),
 			narrow: plot(rows, o, 358, xLabel, yLabel, grid, facts, stripName),
@@ -2772,18 +2754,8 @@ function plot(rows, o, width, xLabel, yLabel, grid, facts, stripName) {
 		cls: "tgc-ink-muted",
 		size: 12
 	}) + line(left, bottom + strip, right, bottom + strip, "tgc-gridline");
-	const spread = (inStrip) => {
-		const byX = /* @__PURE__ */ new Map();
-		for (const row of rows) for (const point of row.points) if (point.y === null === inStrip && (!inStrip || point.verdict !== void 0)) byX.set(point.x, [...byX.get(point.x) ?? [], point]);
-		const at = /* @__PURE__ */ new Map();
-		for (const [x, list] of byX) {
-			const room = axis.column(x);
-			const step = room === null ? 0 : Math.min(10, room / (list.length + 1));
-			list.forEach((point, k) => at.set(point, px(x) + (k - (list.length - 1) / 2) * step));
-		}
-		return at;
-	};
-	const plotX = spread(false), stripX = spread(true);
+	const all = rows.flatMap((row) => row.points);
+	const plotX = spreadX(all.filter((point) => point.y !== null), axis, 10), stripX = spreadX(all.filter((point) => point.y === null && point.verdict !== void 0), axis, 10);
 	let legendY = bottom + strip + turn + 72;
 	let points = "", tips = "", rules = "";
 	const placed = [];
@@ -2793,7 +2765,7 @@ function plot(rows, o, width, xLabel, yLabel, grid, facts, stripName) {
 	for (const [seriesIndex, row] of rows.entries()) {
 		const ord = row.colorIndex ?? seriesIndex;
 		const dash = ord === 0 ? "" : `${2 + ord * 2} 3`;
-		const group = checkerClass(row.colorIndex);
+		const group = `${checkerClass(row.colorIndex)}${row.secondary ? " tgc-series-secondary" : ""}`.trim();
 		const wrapSeries = (inner) => group ? `<g class="${group}">${inner}</g>` : inner;
 		let segment = [];
 		let lines = "";
@@ -2846,9 +2818,9 @@ function plot(rows, o, width, xLabel, yLabel, grid, facts, stripName) {
 				point
 			});
 			const tipWidth = Math.min(280, width - 24), tipX = Math.max(12, Math.min(width - tipWidth - 12, x - tipWidth / 2));
-			const tipLines = pointFacts.flatMap((fact) => wrap(fact, tipWidth - 24, 12, "sans", 8).lines);
-			tips += `<g class="tgc-series-tip" data-series-tip="${key}" aria-hidden="true">${rect(tipX, top, tipWidth, tipLines.length * 17 + 24, "tgc-tip-bg", "rx=\"7\"")}${textBlock(tipLines, tipX + 12, top + 20, 17, "class=\"tgc-tip-ink\" font-size=\"12\"")}</g>`;
-			rules += `.tgc-trajectories:has([data-point="${key}"]:hover) [data-series-tip="${key}"],.tgc-trajectories:not(:has(.tgc-series-observation:hover)):has([data-point="${key}"]:focus-visible) [data-series-tip="${key}"]{opacity:1}`;
+			const tipLines = pointFacts.flatMap((fact) => wrap(fact, tipWidth - 24, 14, "sans", 8).lines);
+			tips += `<g class="tgc-series-tip" data-series-tip="${key}" aria-hidden="true">${o.crosshair ? line(x, top, x, bottom, "tgc-crosshair") : ""}${rect(tipX, top, tipWidth, tipLines.length * 17 + 24, "tgc-tip-bg", "rx=\"7\"")}${textBlock(tipLines, tipX + 12, top + 20, 17, "class=\"tgc-tip-ink\" font-size=\"12\"")}</g>`;
+			rules += `.tgc-trajectories:has([data-point="${key}"]:is(:hover,[data-near])) [data-series-tip="${key}"],.tgc-trajectories:not(:has(.tgc-series-observation:hover)):has([data-point="${key}"]:focus-visible) [data-series-tip="${key}"]{opacity:1}`;
 		}
 		flush();
 		marks += wrapSeries(lines);
@@ -2867,6 +2839,29 @@ function plot(rows, o, width, xLabel, yLabel, grid, facts, stripName) {
 	const events = drawMarks(o.marks ?? [], px, top - groupRowHeight(o.bands), bottom, left, right, xLabel, 22);
 	return `<svg class="tgc-svg tgc-trajectories" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${legendY + 12}" viewBox="0 0 ${width} ${legendY + 12}" role="group" aria-label="${esc(o.y.label)} by ${esc(o.x.label)}"><style>${rules}</style>${marks}${events}${groups}${points}${badges}${tips}</svg>`;
 }
+/** Several points in one column (a check and a gate, two checkers) are spread across it in input order. */
+function spreadX(points, axis, maxStep) {
+	const byX = /* @__PURE__ */ new Map();
+	for (const point of points) byX.set(point.x, [...byX.get(point.x) ?? [], point]);
+	const at = /* @__PURE__ */ new Map();
+	for (const [x, list] of byX) {
+		const room = axis.column(x), step = room === null ? 0 : Math.min(maxStep, room / (list.length + 1));
+		list.forEach((point, k) => at.set(point, axis.px(x) + (k - (list.length - 1) / 2) * step));
+	}
+	return at;
+}
+/** Why recorded points cannot be drawn on these axes, or null; `timeSeries` and `smallMultiples` refuse alike. */
+function pointsGap(label, points, x, domain, scale) {
+	const columns = x.categories?.length ? new Set(x.categories.map((c) => c.at)) : null;
+	let previous = -Infinity;
+	for (const point of points) {
+		if (!Number.isFinite(point.x) || point.x < previous || columns && !columns.has(point.x) || point.x < x.domain[0] || point.x > x.domain[1]) return columns ? `${label}: x values must be categories, in order.` : `${label}: x values must be finite, in order and inside the axis domain.`;
+		previous = point.x;
+		const problem = scalarGap(point.y, point.interval, point.observations, domain) ?? logValueGap(point.y, scale) ?? logValueGap(point.interval?.lower ?? null, scale) ?? pointFieldsGap(point);
+		if (problem) return `${label} at ${point.x}: ${problem}`;
+	}
+	return null;
+}
 function axisGutter(ticks, stripName) {
 	return Math.max(64, ...ticks.map((tick) => Math.ceil(textWidth(tick.label, 12, "mono")) + 20), stripName ? Math.ceil(textWidth(stripName, 12)) + 14 : 0);
 }
@@ -2892,7 +2887,6 @@ function smallMultiples(panels, o) {
 		id,
 		refused: "Columns must be a whole number of at least 1."
 	};
-	const columns = o.x.categories?.length ? new Set(o.x.categories.map((c) => c.at)) : null;
 	if (!panels.length) return {
 		id,
 		refused: "No panels recorded."
@@ -2952,20 +2946,11 @@ function smallMultiples(panels, o) {
 			id,
 			refused: `${panel.label}: ${own}`
 		};
-		let previous = -Infinity;
-		for (const point of panel.points) {
-			const ordered = columns ? point.x >= previous && columns.has(point.x) : point.x > previous;
-			if (!Number.isFinite(point.x) || !ordered || point.x < o.x.domain[0] || point.x > o.x.domain[1]) return {
-				id,
-				refused: columns ? `${panel.label}: x values must be categories, in order.` : `${panel.label}: x values must be finite, strictly increasing and inside the shared domain.`
-			};
-			previous = point.x;
-			const problem = scalarGap(point.y, point.interval, point.observations, domain) ?? logValueGap(point.y, panel.scale) ?? pointFieldsGap(point);
-			if (problem) return {
-				id,
-				refused: `${panel.label} at ${point.x}: ${problem}`
-			};
-		}
+		const problem = pointsGap(panel.label, panel.points, o.x, domain, panel.scale);
+		if (problem) return {
+			id,
+			refused: problem
+		};
 		if (panel.end) {
 			const endGap = eventsGap([{
 				at: panel.end.at,
@@ -2976,7 +2961,7 @@ function smallMultiples(panels, o) {
 				id,
 				refused: `${panel.label}: ${endGap}`
 			};
-			if (previous > panel.end.at) return {
+			if (panel.points.at(-1).x > panel.end.at) return {
 				id,
 				refused: `${panel.label}: points are recorded after the panel's end.`
 			};
@@ -3144,13 +3129,7 @@ function draw(panels, o, width, xLabel, yLabelOf, marksOf) {
 			anchor: "end",
 			cls: "tgc-ink-muted tgc-num"
 		});
-		const shared = /* @__PURE__ */ new Map();
-		for (const point of panel.points) if (point.y !== null) shared.set(point.x, [...shared.get(point.x) ?? [], point]);
-		const xOf = (point) => {
-			const list = shared.get(point.x), room = axis.column(point.x);
-			const step = room === null ? 0 : Math.min(9, room / (list.length + 1));
-			return px(point.x) + (list.indexOf(point) - (list.length - 1) / 2) * step;
-		};
+		const xOf = spreadX(panel.points.filter((point) => point.y !== null), axis, 9);
 		const placed = [];
 		const pending = [];
 		let segment = [];
@@ -3163,7 +3142,7 @@ function draw(panels, o, width, xLabel, yLabelOf, marksOf) {
 				flush();
 				continue;
 			}
-			const x = xOf(point), y = py(point.y);
+			const x = xOf.get(point), y = py(point.y);
 			segment.push([x, y]);
 			if (!hasPointFields([point]) && point.marker === void 0) {
 				body += titled(`${panel.label} · ${o.x.label} ${xLabel(point.x)} · ${yLabel(point.y)} · ${observationLabel(point.observations)}`, circle(x, y, 2.5, "tgc-series-point"));

package/dist/{latest-events-iiWwpIck.js → latest-events-CmbyqEIe.js}

@@ -85,8 +85,8 @@ function ToolMark({ tool, label, size }) {
 //#region src/react/agent-graph/agent-graph-layout.ts
 /** Every agent card's size. Fixed, so a status or turn update never moves a card. */
 const AGENT_CARD = {
-	width: 240,
-	height: 88
+	width: 232,
+	height: 120
 };
 /** A live card: room for the header, a two-line thinking line and the last three events. Fixed for the same reason. */
 const LIVE_AGENT_CARD = {
@@ -160,35 +160,29 @@ function gridSize(members, columns, card, collapsed = false) {
 	};
 }
 /** The boxes the layouter places: each ungrouped agent, and each grid as one block. */
-function layoutUnits(topology, columns, card, collapsed) {
-	const units = [];
-	const ownerGroup = new Map(topology.groups.map((group) => [group.parentId, group.id]));
-	for (const id of topology.agentIds) if (!topology.groupOf.has(id) && !ownerGroup.has(id)) units.push({
+function layoutUnits(topology, columns, card, collapsed, groupParents) {
+	const ownerGroup = new Map(groupParents ? topology.groups.map((group) => [group.parentId, group.id]) : []);
+	const units = topology.agentIds.filter((id) => !topology.groupOf.has(id) && !ownerGroup.has(id)).map((id) => ({
 		id,
-		width: card.width,
-		height: card.height
-	});
-	for (const g of topology.groups) units.push({
-		id: g.id,
-		...gridSize(g.memberIds.length, columns, card, collapsed.has(g.id))
-	});
+		...card
+	}));
+	units.push(...topology.groups.map((group) => ({
+		id: group.id,
+		...gridSize(group.memberIds.length, columns, card, collapsed.has(group.id))
+	})));
 	const unitOf = (id) => topology.groupOf.get(id) ?? ownerGroup.get(id) ?? id;
 	const seen = /* @__PURE__ */ new Set();
-	const links = [];
-	for (const s of topology.spawns) {
-		const from = unitOf(s.from);
-		const to = unitOf(s.to);
-		const key = `${from}\u0000${to}`;
-		if (from === to || seen.has(key)) continue;
-		seen.add(key);
-		links.push({
-			from,
-			to
-		});
-	}
 	return {
 		units,
-		links
+		links: topology.spawns.flatMap((spawn) => {
+			const from = unitOf(spawn.from), to = unitOf(spawn.to), key = `${from}\u0000${to}`;
+			if (from === to || seen.has(key)) return [];
+			seen.add(key);
+			return [{
+				from,
+				to
+			}];
+		})
 	};
 }
 async function placeWithElk(units, links, direction) {
@@ -271,8 +265,8 @@ function placeByDepth(units, links, direction) {
 	return at;
 }
 /** Lay the run out with every grid `columns` wide. */
-async function layoutAgents(topology, direction, columns, card = AGENT_CARD, collapsed = /* @__PURE__ */ new Set()) {
-	const { units, links } = layoutUnits(topology, columns, card, collapsed);
+async function layoutAgents(topology, direction, columns, card = AGENT_CARD, collapsed = /* @__PURE__ */ new Set(), groupParents = true) {
+	const { units, links } = layoutUnits(topology, columns, card, collapsed, groupParents);
 	const placed = await placeWithElk(units, links, direction) ?? placeByDepth(units, links, direction);
 	const positions = /* @__PURE__ */ new Map();
 	const frames = [];
@@ -301,9 +295,12 @@ async function layoutAgents(topology, direction, columns, card = AGENT_CARD, col
 			...size,
 			collapsed: closed
 		});
-		positions.set(g.parentId, {
+		positions.set(g.parentId, groupParents ? {
 			x: origin.x + FRAME_PAD,
 			y: origin.y + 8
+		} : {
+			...positions.get(g.parentId),
+			y: origin.y
 		});
 		if (closed) continue;
 		const cols = Math.max(1, Math.min(columns, g.memberIds.length));

package/dist/react/agent-graph/index.d.ts

@@ -1,4 +1,4 @@
-import { A as AGENT_CARD, B as AgentLeafGroup, C as shortModel, D as fmtEventTime, E as fmtDuration, F as AgentGraphEdgeKind, G as LIVE_AGENT_CARD, H as CardSize, I as AgentGraphEvent, K as buildAgentTopology, L as AgentGraphNode, M as AgentGraphActivity, N as AgentGraphDirection, O as fmtTokenTotal, P as AgentGraphEdge, R as AgentGraphStatus, S as parseActionPath, T as fmtCost, U as FRAME_CAPTION, V as AgentTopology, W as GRID_MIN_LEAVES, _ as useRunNow, a as RESTING_SHADOW, b as actionPathLabel, c as motionAllowed, d as agentQuietActivity, f as ambientStyle, g as useMotionAllowed, h as useAttention, i as RESTING_BORDER, j as AgentFrame, k as fmtTokens, l as useColorMode, m as tokenMilliseconds, n as GraphErrorBoundary, o as edgeColor, p as syncAmbient, q as layoutAgents, r as retryImport, s as SELECTION_OUTLINE, t as loadElk, u as activityTiming, v as ActionPathParts, w as clampPreview, x as humanizeIdentifier, y as LeadCase, z as AgentLayout } from "../../elk-loader-CrLO557o.js";
+import { A as AGENT_CARD, B as AgentLeafGroup, C as shortModel, D as fmtEventTime, E as fmtDuration, F as AgentGraphEdgeKind, G as LIVE_AGENT_CARD, H as CardSize, I as AgentGraphEvent, K as buildAgentTopology, L as AgentGraphNode, M as AgentGraphActivity, N as AgentGraphDirection, O as fmtTokenTotal, P as AgentGraphEdge, R as AgentGraphStatus, S as parseActionPath, T as fmtCost, U as FRAME_CAPTION, V as AgentTopology, W as GRID_MIN_LEAVES, _ as useRunNow, a as RESTING_SHADOW, b as actionPathLabel, c as motionAllowed, d as agentQuietActivity, f as ambientStyle, g as useMotionAllowed, h as useAttention, i as RESTING_BORDER, j as AgentFrame, k as fmtTokens, l as useColorMode, m as tokenMilliseconds, n as GraphErrorBoundary, o as edgeColor, p as syncAmbient, q as layoutAgents, r as retryImport, s as SELECTION_OUTLINE, t as loadElk, u as activityTiming, v as ActionPathParts, w as clampPreview, x as humanizeIdentifier, y as LeadCase, z as AgentLayout } from "../../elk-loader-uOcDmUG_.js";
 import { ReactNode } from "react";
 //#region src/react/agent-graph/agent-hub-layout.d.ts
 /** A tool or service an agent calls: drawn as an outer node with its brand mark. */

package/dist/react/agent-graph/index.js

@@ -1,5 +1,5 @@
 import { D as statusMeta, E as runStatus, O as createLucideIcon, T as RunStatusIcon } from "../../flow-waterfall-model-DvrgPLGS.js";
-import { a as LIVE_AGENT_CARD, c as AgentMark, i as GRID_MIN_LEAVES, l as GraphMarksProvider, n as AGENT_CARD, o as buildAgentTopology, r as FRAME_CAPTION, s as layoutAgents, t as LatestEvents, u as ToolMark } from "../../latest-events-iiWwpIck.js";
+import { a as LIVE_AGENT_CARD, c as AgentMark, i as GRID_MIN_LEAVES, l as GraphMarksProvider, n as AGENT_CARD, o as buildAgentTopology, r as FRAME_CAPTION, s as layoutAgents, t as LatestEvents, u as ToolMark } from "../../latest-events-CmbyqEIe.js";
 import { C as fmtCost, D as fmtTokens, E as fmtTokenTotal, S as clampPreview, T as fmtEventTime, _ as syncAmbient, a as motionAllowed, b as useMotionAllowed, c as humanizeIdentifier, d as loadElk, f as GraphErrorBoundary, g as ambientStyle, h as agentQuietActivity, i as SELECTION_OUTLINE, l as parseActionPath, m as activityTiming, n as RESTING_SHADOW, o as useColorMode, p as retryImport, r as edgeColor, s as actionPathLabel, t as RESTING_BORDER, u as shortModel, v as tokenMilliseconds, w as fmtDuration, x as useRunNow, y as useAttention } from "../../graph-style-fealnLLn.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -1122,7 +1122,7 @@ function AgentHubCanvas(props) {
 * taking the pane down.
 */
 function lazyCanvas() {
-	return lazy(() => retryImport(() => import("../../AgentGraphCanvas-B74GN1o6.js").then((m) => ({ default: m.AgentGraphCanvas }))));
+	return lazy(() => retryImport(() => import("../../AgentGraphCanvas-C5Ee8Z6q.js").then((m) => ({ default: m.AgentGraphCanvas }))));
 }
 /** The agents as a list, for when the canvas cannot load. */
 function AgentListFallback({ nodes, selectedId, onSelect, className, onRetry }) {
@@ -1131,12 +1131,12 @@ function AgentListFallback({ nodes, selectedId, onSelect, className, onRetry })
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "mb-1 flex items-center justify-between gap-2",
 			children: [/* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground text-xs",
+				className: "text-muted-foreground text-[13px]",
 				children: "Couldn't draw the graph — showing the agents."
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: onRetry,
-				className: "shrink-0 rounded border border-border px-1.5 py-0.5 text-muted-foreground text-xs transition hover:text-foreground",
+				className: "shrink-0 rounded border border-border px-1.5 py-0.5 text-muted-foreground text-[13px] transition hover:text-foreground",
 				children: "Retry"
 			})]
 		}), /* @__PURE__ */ jsx("ul", {
@@ -1145,7 +1145,7 @@ function AgentListFallback({ nodes, selectedId, onSelect, className, onRetry })
 				type: "button",
 				"aria-pressed": selectedId === n.id,
 				onClick: () => onSelect?.(n.id),
-				className: "flex w-full items-center justify-between gap-2 rounded px-2 py-1 text-left text-foreground text-xs hover:bg-muted aria-pressed:bg-muted",
+				className: "flex w-full items-center justify-between gap-2 rounded px-2 py-1 text-left text-foreground text-[13px] hover:bg-muted aria-pressed:bg-muted",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "truncate",
 					children: n.label
@@ -1174,7 +1174,7 @@ function AgentGraphTree(props) {
 		}),
 		children: /* @__PURE__ */ jsx(Suspense, {
 			fallback: /* @__PURE__ */ jsx("div", {
-				className: `agent-graph flex items-center justify-center rounded-lg border border-border border-dashed text-muted-foreground text-xs ${props.className ?? ""}`,
+				className: `agent-graph flex items-center justify-center rounded-lg border border-border border-dashed text-muted-foreground text-[13px] ${props.className ?? ""}`,
 				children: "Loading graph…"
 			}),
 			children: /* @__PURE__ */ jsx(Canvas, { ...props })

package/dist/react/agent-graph/presentation.d.ts

@@ -1,4 +1,4 @@
-import { C as shortModel, D as fmtEventTime, E as fmtDuration, O as fmtTokenTotal, S as parseActionPath, T as fmtCost, _ as useRunNow, a as RESTING_SHADOW, b as actionPathLabel, c as motionAllowed, d as agentQuietActivity, f as ambientStyle, g as useMotionAllowed, h as useAttention, i as RESTING_BORDER, k as fmtTokens, l as useColorMode, m as tokenMilliseconds, n as GraphErrorBoundary, o as edgeColor, p as syncAmbient, r as retryImport, s as SELECTION_OUTLINE, t as loadElk, u as activityTiming, v as ActionPathParts, w as clampPreview, x as humanizeIdentifier, y as LeadCase } from "../../elk-loader-CrLO557o.js";
+import { C as shortModel, D as fmtEventTime, E as fmtDuration, O as fmtTokenTotal, S as parseActionPath, T as fmtCost, _ as useRunNow, a as RESTING_SHADOW, b as actionPathLabel, c as motionAllowed, d as agentQuietActivity, f as ambientStyle, g as useMotionAllowed, h as useAttention, i as RESTING_BORDER, k as fmtTokens, l as useColorMode, m as tokenMilliseconds, n as GraphErrorBoundary, o as edgeColor, p as syncAmbient, r as retryImport, s as SELECTION_OUTLINE, t as loadElk, u as activityTiming, v as ActionPathParts, w as clampPreview, x as humanizeIdentifier, y as LeadCase } from "../../elk-loader-uOcDmUG_.js";
 //#region src/react/agent-graph/motion.d.ts
 /** Brand owns complete duration/easing roles. Keep properties explicit. */
 export declare const MOTION_CONTROL = "[transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none";

package/dist/react/agent-graph.css

@@ -23,7 +23,7 @@
     --radius-full: 999px;
   }
 }
-@layer base {
+@layer utilities.agent-graph-base {
   @scope (.agent-graph, .ag-root, .ag-latest, [data-agent-metrics]) {
     *, :scope:is(*), ::after, :scope:is(::after), ::before, :scope:is(::before), ::backdrop, :scope:is(::backdrop), ::file-selector-button, :scope:is(::file-selector-button) {
       box-sizing: border-box;
@@ -173,7 +173,7 @@
     }
   }
 }
-@layer utilities {
+@layer utilities.agent-graph-utilities {
   @scope (.agent-graph, .ag-root, .ag-latest, [data-agent-metrics]) {
     .pointer-events-auto, :scope:is(.pointer-events-auto) {
       pointer-events: auto;
@@ -210,6 +210,9 @@
     .right-3, :scope:is(.right-3) {
       right: calc(var(--spacing) * 3);
     }
+    .left-3, :scope:is(.left-3) {
+      left: calc(var(--spacing) * 3);
+    }
     .container, :scope:is(.container) {
       width: 100%;
       @media (width >= 40rem) {
@@ -279,9 +282,6 @@
     .min-h-0, :scope:is(.min-h-0) {
       min-height: 0px;
     }
-    .min-h-4, :scope:is(.min-h-4) {
-      min-height: calc(var(--spacing) * 4);
-    }
     .min-h-10, :scope:is(.min-h-10) {
       min-height: calc(var(--spacing) * 10);
     }
@@ -336,6 +336,9 @@
     .justify-center, :scope:is(.justify-center) {
       justify-content: center;
     }
+    .justify-start, :scope:is(.justify-start) {
+      justify-content: flex-start;
+    }
     .gap-0\.5, :scope:is(.gap-0\.5) {
       gap: calc(var(--spacing) * 0.5);
     }
@@ -466,6 +469,9 @@
     .text-\[10px\], :scope:is(.text-\[10px\]) {
       font-size: 10px;
     }
+    .text-\[13px\], :scope:is(.text-\[13px\]) {
+      font-size: 13px;
+    }
     .leading-4, :scope:is(.leading-4) {
       --tw-leading: calc(var(--spacing) * 4);
       line-height: calc(var(--spacing) * 4);
@@ -1568,6 +1574,26 @@ svg.react-flow__connectionline {
     min-width: 44px;
   }
 }
+.ag-topology {
+  --ag-surface: hsl(var(--hsl-raised));
+  --font-size-xs: 13px;
+  --text-xs: 13px;
+}
+.ag-topology :is(.text-xs, .ag-parent-label) {
+  font-size: 13px;
+}
+.ag-topology .ag-team-frame {
+  background: hsl(var(--hsl-card)) !important;
+}
+.ag-topology .ag-agent-card {
+  background: var(--ag-surface);
+}
+.ag-topology .ag-agent-card[data-selected] {
+  background: hsl(var(--hsl-raised-2));
+}
+.ag-topology .react-flow__node-agentFrame .react-flow__handle-left {
+  top: 40px;
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;

package/package.json

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