@tangle-network/charts 2.0.16 → 2.0.18

package/README.md

@@ -4,6 +4,8 @@ Benchmark figures as static SVG and HTML tables, plus optional React timing prim
 
 The React entry also exports `DayBars`, `HBars`, `Histogram`, `Lines`, `Meter`, `Spark`, and `Gantt` for live operational pages. Import `@tangle-network/charts/react/live.css` for their layout and set `--chart-live-*` theme tokens on an ancestor. Data, state colors, destination links, labels, and interpretation remain with the caller. `DayBars` accepts an `onOpen(index)` action with keyboard activation.
 
+`VersionGraph` and `layoutVersionGraph` from `@tangle-network/charts/react` render version histories with lane and merge geometry, controlled selection, filtering, keyboard navigation and bounded rows. Import `react/live.css` and Brand tokens as above. Producers supply commit identities, parents, lane labels and scored chips; Charts preserves those facts and owns drawing, arrival motion and reduced-motion behavior.
+
 `FlowWaterfall` from `@tangle-network/charts/react` is the shared live trace inspector: an agent timeline (one row per agent, elbow handoffs, hatched waiting) and a virtualized span waterfall over one clock. It owns hierarchy layout, folding, search, playback, zoom, span cards and running-span growth. Producers own identity, `parentId`, explicit `status` and observed totals. Import `@tangle-network/charts/react/flow-waterfall.css`; its `fw-*` classes and six-field summary support hosts without a Tailwind build. Every color, radius and shadow in it is a Brand role (text, card, hairline, well, chart grid, status inks, the categorical tones for agents), so the host loads `@tangle-network/brand` `tokens.css` (or `legacy-light.css`) and sets its theme; the stylesheet has no color of its own. The React-free root exports the `FlowSpan` and `FlowTrace` types.
 
 `FlowWaterfall` accepts optional `graph` and `latestEvents` React nodes. Supplying `graph` adds Graph to its existing Agents/Steps view control, including `defaultView="graph"`. The trace clock and controlled selection survive switches. Graph hides waterfall-only controls; `latestEvents` stays mounted in the header across all views.

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/{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/dist/react/index.d.ts

@@ -538,4 +538,65 @@ export declare function FlowWaterfall({ trace, live, startedAt, label, defaultCo
 /** Generic tool identity by name: a terminal, a file, a pencil, a lens, a globe or a branch, never a vendor mark. */
 export declare function toolGlyph(name: string | undefined): import("react").JSX.Element | undefined;
 //#endregion
-export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, FlowWaterfallProps, FlowWaterfallRow, ViewWindow as FlowWaterfallWindow, GapBand, GapProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };
+//#region src/react/version-graph.d.ts
+/** `muted` chips sit beside the title; any other tone gets the second line. */
+/** A status tone from `statusOf`, or a non-status chip: `accent` for a series, `info` and `muted` for plain facts. */
+type VersionGraphTone = 'pass' | 'live' | 'attention' | 'fail' | 'neutral' | 'accent' | 'info' | 'muted';
+interface VersionGraphChip {
+  readonly label: string;
+  readonly tone?: VersionGraphTone;
+  readonly title?: string;
+}
+interface VersionGraphNode {
+  readonly id: string;
+  /** Parents in the model; one that is not in it (or is hidden) is skipped, and a hidden one passes its own on. */
+  readonly parents: readonly string[];
+  readonly lane: string;
+  readonly at: string | null;
+  readonly title: string;
+  readonly detail?: string | null;
+  /** A style hook and a filter key: `write`, `integrate`, `profile`, `version`, `authored`, `ghost`. */
+  readonly kind: string;
+  readonly chips?: readonly VersionGraphChip[];
+}
+interface VersionGraphLane {
+  readonly id: string;
+  readonly label: string;
+  readonly detail?: string | null;
+}
+/** Nodes newest first, every child above its parents. */
+interface VersionGraphModel {
+  readonly lanes: readonly VersionGraphLane[];
+  readonly nodes: readonly VersionGraphNode[];
+}
+/**
+ * Rows in model order, one column per lane that holds a shown node, and one edge from each shown node to each nearest
+ * shown ancestor: a hidden node (an integration when integrations are hidden, a commit of a lane filtered out) passes
+ * its parents on, so a lane's line stays connected.
+ */
+export declare function layoutVersionGraph(model: VersionGraphModel, shown?: (node: VersionGraphNode) => boolean): {
+  rows: {
+    node: VersionGraphNode;
+    row: number;
+    column: number;
+  }[];
+  edges: {
+    from: string;
+    to: string;
+    fromRow: number;
+    fromColumn: number;
+    toRow: number;
+    toColumn: number;
+  }[];
+  lanes: VersionGraphLane[];
+};
+export declare function VersionGraph({ model, selected, onSelect, label, shown, maxHeight }: {
+  model: VersionGraphModel;
+  selected: string | null;
+  onSelect: (id: string) => void;
+  label: string;
+  shown?: (node: VersionGraphNode) => boolean;
+  maxHeight?: number;
+}): import("react").JSX.Element;
+//#endregion
+export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, FlowWaterfallProps, FlowWaterfallRow, ViewWindow as FlowWaterfallWindow, GapBand, GapProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, VersionGraphChip, VersionGraphLane, VersionGraphModel, VersionGraphNode, VersionGraphTone, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };

package/dist/react/index.js

@@ -3354,7 +3354,7 @@ function useRowMotion(rows, element) {
 		const previous = known.current;
 		let order = 0;
 		for (const row of rows) {
-			const isRunning = spanRunning(row.span);
+			const isRunning = !!row.span && spanRunning(row.span);
 			if (!previous || !previous.has(row.id)) active.current.set(row.id, {
 				enter: Math.min(order++ * stagger, cap),
 				until: now + hold + cap
@@ -3365,7 +3365,7 @@ function useRowMotion(rows, element) {
 			});
 		}
 		known.current = new Set(rows.map((row) => row.id));
-		running.current = new Set(rows.filter((row) => spanRunning(row.span)).map((row) => row.id));
+		running.current = new Set(rows.filter((row) => row.span && spanRunning(row.span)).map((row) => row.id));
 		return new Map(active.current);
 	}, [
 		rows,
@@ -5062,4 +5062,239 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	});
 }
 //#endregion
-export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DOT_MAP_CATEGORIES, DayBars, DotMap, Events, FigureView, FlowWaterfall, Gantt, Gap, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, TimelineView, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, criticalPathIds, flowWaterfallRows, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, toolGlyph, waterfallSpanGeometry, waterfallTicks };
+//#region src/react/version-graph.tsx
+/** Recorded version lanes; callers supply their domain model, filters and selection. */
+/**
+* Rows in model order, one column per lane that holds a shown node, and one edge from each shown node to each nearest
+* shown ancestor: a hidden node (an integration when integrations are hidden, a commit of a lane filtered out) passes
+* its parents on, so a lane's line stays connected.
+*/
+function layoutVersionGraph(model, shown = () => true) {
+	const byId = new Map(model.nodes.map((node) => [node.id, node]));
+	const visible = model.nodes.filter(shown);
+	const visibleIds = new Set(visible.map((node) => node.id));
+	const lanes = model.lanes.filter((lane) => visible.some((node) => node.lane === lane.id));
+	for (const node of visible) if (!lanes.some((lane) => lane.id === node.lane)) lanes.push({
+		id: node.lane,
+		label: node.lane
+	});
+	const column = new Map(lanes.map((lane, i) => [lane.id, i]));
+	const rowOf = new Map(visible.map((node, i) => [node.id, i]));
+	const nearest = (id, seen) => {
+		if (seen.has(id)) return [];
+		seen.add(id);
+		if (visibleIds.has(id)) return [id];
+		const node = byId.get(id);
+		return node ? node.parents.flatMap((parent) => nearest(parent, seen)) : [];
+	};
+	const edges = [];
+	for (const node of visible) {
+		const seen = /* @__PURE__ */ new Set([node.id]);
+		const targets = [...new Set(node.parents.flatMap((parent) => nearest(parent, seen)))];
+		for (const target of targets) {
+			const toRow = rowOf.get(target);
+			if (toRow <= rowOf.get(node.id)) continue;
+			edges.push({
+				from: node.id,
+				to: target,
+				fromRow: rowOf.get(node.id),
+				fromColumn: column.get(node.lane),
+				toRow,
+				toColumn: column.get(byId.get(target).lane)
+			});
+		}
+	}
+	return {
+		rows: visible.map((node, i) => ({
+			node,
+			row: i,
+			column: column.get(node.lane)
+		})),
+		edges,
+		lanes
+	};
+}
+const WIDE = {
+	column: 16,
+	gutter: 14
+};
+const NARROW = {
+	column: 5,
+	gutter: 4
+};
+const LINE = 30;
+const TALL = 54;
+const BEND = 22;
+const COLORS = 8;
+const tall = (node) => (node.chips ?? []).some((chip) => chip.tone && chip.tone !== "muted");
+function VersionGraph({ model, selected, onSelect, label, shown, maxHeight = 600 }) {
+	const laid = useMemo(() => layoutVersionGraph(model, shown), [model, shown]);
+	const tops = useMemo(() => {
+		const out = [];
+		let y = 0;
+		for (const row of laid.rows) {
+			out.push(y);
+			y += tall(row.node) ? TALL : LINE;
+		}
+		out.push(y);
+		return out;
+	}, [laid]);
+	const height = tops.at(-1) ?? 0;
+	const [measure, measuredWidth] = useWidth();
+	const { column: COLUMN, gutter: GUTTER } = measuredWidth < 700 ? NARROW : WIDE;
+	const width = GUTTER + laid.lanes.length * COLUMN;
+	const x = (column) => GUTTER / 2 + column * COLUMN + COLUMN / 2;
+	const y = (row) => tops[row] + LINE / 2;
+	const path = (fromRow, fromColumn, toRow, toColumn) => {
+		const [x1, y1, x2, y2] = [
+			x(fromColumn),
+			y(fromRow),
+			x(toColumn),
+			y(toRow)
+		];
+		if (x1 === x2) return `M${x1},${y1} V${y2}`;
+		const bend = Math.min(BEND, y2 - y1);
+		return `M${x1},${y1} C${x1},${y1 + bend * .7} ${x2},${y1 + bend * .3} ${x2},${y1 + bend} V${y2}`;
+	};
+	const pane = useRef(null);
+	const focusTarget = useRef(null);
+	const arrived = useRef(/* @__PURE__ */ new Set());
+	const motion = useRowMotion(model.nodes, pane.current);
+	const [scrollTop, setScrollTop] = useState(0);
+	const first = Math.max(0, tops.findIndex((top) => top >= scrollTop) - 7);
+	const after = tops.findIndex((top) => top > scrollTop + maxHeight);
+	const end = after < 0 ? laid.rows.length : Math.min(laid.rows.length, after + 7);
+	const visible = laid.rows.slice(first, end);
+	const focusRow = (index) => {
+		const at = Math.max(0, Math.min(laid.rows.length - 1, index)), top = tops[at] ?? 0;
+		focusTarget.current = laid.rows[at]?.node.id ?? null;
+		if (pane.current) pane.current.scrollTop = top;
+		setScrollTop(top);
+		const target = pane.current?.querySelector(`[data-row="${at}"]`);
+		if (target) {
+			focusTarget.current = null;
+			target.focus();
+		}
+	};
+	useEffect(() => {
+		const at = laid.rows.findIndex((row) => row.node.id === selected), element = pane.current;
+		if (at < 0 || !element) return;
+		const top = tops[at], bottom = tops[at + 1];
+		if (top < element.scrollTop) element.scrollTop = Math.max(0, top - 8);
+		else if (bottom > element.scrollTop + element.clientHeight) element.scrollTop = bottom - element.clientHeight + 8;
+		setScrollTop(element.scrollTop);
+	}, [selected]);
+	const allLanes = useMemo(() => layoutVersionGraph(model).lanes, [model]);
+	const colorOf = new Map(allLanes.map((item, i) => [item.id, i % COLORS]));
+	return /* @__PURE__ */ jsx("div", {
+		ref: measure,
+		className: "tgc-version-graph",
+		"data-version-graph": label,
+		children: laid.rows.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "ov-empty",
+			children: "Nothing to show with these filters."
+		}) : /* @__PURE__ */ jsx("div", {
+			ref: pane,
+			className: "vg-scroll",
+			style: {
+				maxHeight,
+				overflow: "auto"
+			},
+			onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+			onKeyDown: (event) => {
+				const at = Number(event.target.closest("[data-row]")?.getAttribute("data-row"));
+				const next = event.key === "Home" ? 0 : event.key === "End" ? laid.rows.length - 1 : event.key === "ArrowDown" ? at + 1 : event.key === "ArrowUp" ? at - 1 : null;
+				if (next !== null) {
+					event.preventDefault();
+					focusRow(next);
+				}
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "vg-host",
+				style: { height },
+				children: [/* @__PURE__ */ jsxs("svg", {
+					className: "vg-lines",
+					width,
+					height,
+					"aria-hidden": "true",
+					children: [laid.edges.filter((edge) => y(edge.fromRow) <= scrollTop + maxHeight + TALL && y(edge.toRow) >= scrollTop - TALL).map((edge) => /* @__PURE__ */ jsx("path", {
+						"data-from": edge.from,
+						"data-to": edge.to,
+						className: `vg-c${colorOf.get(laid.lanes[edge.toColumn].id)} ${selected === edge.from || selected === edge.to ? "hot" : ""}`,
+						d: path(edge.fromRow, edge.fromColumn, edge.toRow, edge.toColumn)
+					}, `${edge.from}>${edge.to}`)), visible.map((row) => /* @__PURE__ */ jsx("circle", {
+						className: `vg-dot vg-c${colorOf.get(row.node.lane)} kind-${row.node.kind} ${selected === row.node.id ? "on" : ""}`,
+						cx: x(row.column),
+						cy: y(row.row),
+						r: row.node.kind === "integrate" ? 3 : 5
+					}, row.node.id))]
+				}), /* @__PURE__ */ jsx("ol", {
+					className: "vg-rows",
+					"aria-label": label,
+					style: {
+						paddingLeft: width,
+						paddingTop: tops[first]
+					},
+					children: visible.map((row) => {
+						const node = row.node;
+						const on = selected === node.id;
+						const arriving = motion.get(node.id)?.enter !== void 0 && !arrived.current.has(node.id);
+						const loud = (node.chips ?? []).filter((chip) => chip.tone && chip.tone !== "muted");
+						const quiet = (node.chips ?? []).filter((chip) => !chip.tone || chip.tone === "muted");
+						return /* @__PURE__ */ jsx("li", {
+							"aria-posinset": row.row + 1,
+							"aria-setsize": laid.rows.length,
+							style: { height: tops[row.row + 1] - tops[row.row] },
+							children: /* @__PURE__ */ jsxs("button", {
+								ref: (element) => {
+									if (!element) return;
+									if (arriving) arrived.current.add(node.id);
+									if (focusTarget.current === node.id) {
+										focusTarget.current = null;
+										element.focus();
+									}
+								},
+								type: "button",
+								className: `vg-row kind-${node.kind} ${on ? "on" : ""}`,
+								"aria-pressed": on,
+								disabled: node.kind === "ghost",
+								"data-node": node.id,
+								"data-row": row.row,
+								"data-arriving": arriving || void 0,
+								onClick: () => onSelect(node.id),
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "vg-line",
+									children: [
+										/* @__PURE__ */ jsx("b", {
+											className: "vg-title",
+											title: node.title,
+											children: node.title
+										}),
+										node.detail && /* @__PURE__ */ jsx("span", {
+											className: "vg-detail",
+											children: node.detail
+										}),
+										quiet.map((chip, i) => /* @__PURE__ */ jsx("span", {
+											className: "vg-chip tone-muted",
+											title: chip.title,
+											children: chip.label
+										}, i))
+									]
+								}), loud.length > 0 && /* @__PURE__ */ jsx("span", {
+									className: "vg-line vg-tags",
+									children: loud.map((chip, i) => /* @__PURE__ */ jsx("span", {
+										className: `vg-chip tone-${chip.tone}`,
+										title: chip.title,
+										children: chip.label
+									}, i))
+								})]
+							})
+						}, node.id);
+					})
+				})]
+			})
+		})
+	});
+}
+//#endregion
+export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DOT_MAP_CATEGORIES, DayBars, DotMap, Events, FigureView, FlowWaterfall, Gantt, Gap, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, TimelineView, VersionGraph, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, criticalPathIds, flowWaterfallRows, formatCompact, formatSparklineValue, formatWaterfallDuration, layoutVersionGraph, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, toolGlyph, waterfallSpanGeometry, waterfallTicks };

package/dist/react/live.css

@@ -129,3 +129,42 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 
 .ov-meter-steps span { overflow-wrap: anywhere; }
 @media (max-width: 720px) { .ov-meter-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ov-meter-steps li { padding: 12px; min-height: 94px; } }
+
+/* Recorded version history shares chart/Brand roles with the live timeline. */
+.tgc-version-graph { min-width: 0; font: 14px/1.4 var(--font-sans, sans-serif); color: var(--chart-live-fg, var(--text-primary));
+  --vg-c0: var(--chart-live-accent, var(--accent-text)); --vg-c1: light-dark(#2a7fa8, #6cc0e8); --vg-c2: light-dark(#7b4fc0, #b99af0); --vg-c3: light-dark(#1f7f88, #5fc2c9); --vg-c4: light-dark(#a8418f, #e58ccf); --vg-c5: light-dark(#5a6ad8, #8fa4ff); --vg-c6: light-dark(#45507a, #c0c4dc); --vg-c7: var(--chart-live-muted, var(--text-muted));
+}
+.tgc-version-graph .vg-host { position: relative; min-width: max-content; }
+.tgc-version-graph .vg-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
+.tgc-version-graph .vg-lines path { fill: none; stroke: currentColor; stroke-width: 2; opacity: .55; }
+.tgc-version-graph .vg-lines path.hot { opacity: 1; stroke-width: 2.5; }
+.tgc-version-graph .vg-lines .vg-dot { fill: currentColor; stroke: var(--chart-live-surface, var(--bg-surface)); stroke-width: 2; }
+.tgc-version-graph .vg-lines .vg-dot.kind-profile, .tgc-version-graph .vg-lines .vg-dot.kind-authored { fill: var(--chart-live-surface, var(--bg-surface)); stroke: currentColor; stroke-width: 2.5; }
+.tgc-version-graph .vg-lines .vg-dot.kind-ghost { fill: var(--chart-live-surface, var(--bg-surface)); stroke: var(--chart-live-faint, var(--text-muted)); stroke-dasharray: 2 2; }
+.tgc-version-graph .vg-lines .vg-dot.on { stroke: var(--chart-live-fg, var(--text-primary)); stroke-width: 3; }
+.tgc-version-graph .vg-c0 { color: var(--vg-c0); } .tgc-version-graph .vg-c1 { color: var(--vg-c1); } .tgc-version-graph .vg-c2 { color: var(--vg-c2); } .tgc-version-graph .vg-c3 { color: var(--vg-c3); }
+.tgc-version-graph .vg-c4 { color: var(--vg-c4); } .tgc-version-graph .vg-c5 { color: var(--vg-c5); } .tgc-version-graph .vg-c6 { color: var(--vg-c6); } .tgc-version-graph .vg-c7 { color: var(--vg-c7); }
+.tgc-version-graph .vg-rows { list-style: none; margin: 0; padding-right: 8px; }
+.tgc-version-graph .vg-rows > li { display: flex; }
+.tgc-version-graph .vg-row { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; width: 100%; min-width: 0; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--chart-live-fg, var(--text-primary)); font: inherit; text-align: left; cursor: pointer; }
+.tgc-version-graph .vg-row:hover, .tgc-version-graph .vg-row:focus-visible { background: var(--chart-live-raised, var(--bg-elevated)); }
+.tgc-version-graph .vg-row:focus-visible { outline: 2px solid var(--chart-live-accent, var(--accent-text)); outline-offset: -2px; }
+.tgc-version-graph .vg-row.on { background: color-mix(in srgb, var(--chart-live-accent, var(--accent-text)) 13%, var(--chart-live-surface, var(--bg-surface))); box-shadow: inset 2px 0 var(--chart-live-border, var(--border-color)); }
+.tgc-version-graph .vg-row:disabled { cursor: default; opacity: .8; }
+.tgc-version-graph .vg-line { display: flex; align-items: center; gap: 8px; min-width: 0; height: 30px; flex: none; }
+.tgc-version-graph .vg-line.vg-tags { height: 22px; flex-wrap: nowrap; overflow: hidden; }
+.tgc-version-graph .vg-title { font-weight: 600; max-width: 46ch; }
+.tgc-version-graph .vg-row.kind-integrate .vg-title { font-weight: 400; color: var(--chart-live-muted, var(--text-muted)); }
+.tgc-version-graph .vg-row.kind-ghost .vg-title { font-weight: 400; color: var(--chart-live-faint, var(--text-muted)); }
+.tgc-version-graph .vg-detail { font-size: var(--font-size-sm, 13px); color: var(--chart-live-muted, var(--text-muted)); }
+.tgc-version-graph .vg-chip { display: inline-block; flex: none; margin-left: 4px; padding: 0 8px; border-radius: 4px; font: 600 var(--font-size-sm, 13px)/1.6 var(--font-sans); white-space: nowrap; background: var(--chart-live-raised, var(--bg-elevated)); color: var(--chart-live-muted, var(--text-muted)); }
+.tgc-version-graph .vg-chip.tone-neutral { background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-live-muted, var(--text-muted)) 55%, transparent); }
+.tgc-version-graph .vg-chip.tone-accent { color: var(--chart-live-accent, var(--accent-text)); background: color-mix(in srgb, var(--chart-live-accent, var(--accent-text)) 14%, transparent); }
+.tgc-version-graph .vg-chip.tone-info { color: var(--chart-live-fg, var(--text-primary)); background: var(--chart-live-raised, var(--bg-elevated)); font-weight: 400; }
+
+.tgc-version-graph :is(.vg-title,.vg-detail) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (forced-colors: active) { .tgc-version-graph .vg-chip { forced-color-adjust: none; border: 1px solid CanvasText; } }
+
+.tgc-version-graph .vg-row[data-arriving] { transition: opacity var(--motion-arrive); }
+@starting-style { .tgc-version-graph .vg-row[data-arriving] { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .tgc-version-graph .vg-row[data-arriving] { transition: none; } }

package/package.json

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