@tangle-network/charts 2.0.13 → 2.0.14

package/dist/latest-events-iiWwpIck.js

@@ -0,0 +1,491 @@
+import { D as statusMeta, O as createLucideIcon, T as RunStatusIcon } from "./flow-waterfall-model-DvrgPLGS.js";
+import { T as fmtEventTime, d as loadElk, v as tokenMilliseconds, x as useRunNow } from "./graph-style-fealnLLn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+//#region node_modules/lucide-react/dist/esm/icons/bot.mjs
+/**
+* @license lucide-react v1.63.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData$1 = {
+	name: "bot",
+	size: 24,
+	node: [
+		["path", {
+			d: "M12 8V4H8",
+			key: "hb8ula"
+		}],
+		["rect", {
+			width: "16",
+			height: "12",
+			x: "4",
+			y: "8",
+			rx: "2",
+			key: "enze0r"
+		}],
+		["path", {
+			d: "M2 14h2",
+			key: "vft8re"
+		}],
+		["path", {
+			d: "M20 14h2",
+			key: "4cs60a"
+		}],
+		["path", {
+			d: "M15 13v2",
+			key: "1xurst"
+		}],
+		["path", {
+			d: "M9 13v2",
+			key: "rq6x2g"
+		}]
+	]
+};
+__iconData$1.node;
+const Bot = createLucideIcon(__iconData$1);
+//#endregion
+//#region node_modules/lucide-react/dist/esm/icons/wrench.mjs
+/**
+* @license lucide-react v1.63.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData = {
+	name: "wrench",
+	size: 24,
+	node: [["path", {
+		d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z",
+		key: "1ngwbx"
+	}]]
+};
+__iconData.node;
+const Wrench = createLucideIcon(__iconData);
+//#endregion
+//#region src/react/agent-graph/marks.tsx
+const Marks = createContext({});
+const GraphMarksProvider = Marks.Provider;
+function AgentMark({ agent, layout, size }) {
+	const { renderAgentMark } = useContext(Marks);
+	return agent && renderAgentMark ? renderAgentMark(agent, layout, size) : /* @__PURE__ */ jsx(Bot, {
+		size: layout === "tree" ? size : 16,
+		"aria-hidden": true
+	});
+}
+function ToolMark({ tool, label, size }) {
+	const { renderToolMark } = useContext(Marks);
+	return renderToolMark ? renderToolMark(tool, label, size) : /* @__PURE__ */ jsx(Wrench, {
+		size: size * .4,
+		"aria-hidden": true
+	});
+}
+//#endregion
+//#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
+};
+/** 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 = {
+	width: 296,
+	height: 164
+};
+/** A parent with at least this many leaf workers draws them as a grid. */
+const GRID_MIN_LEAVES = 4;
+const GRID_GAP = 10;
+const FRAME_PAD = 12;
+/** The manager stays with its workers instead of reserving an otherwise empty tree layer. */
+const FRAME_CAPTION = 80;
+const LAYER_GAP = 56;
+const SIBLING_GAP = 24;
+function buildAgentTopology(nodes, edges) {
+	const ids = /* @__PURE__ */ new Set();
+	const agentIds = [];
+	for (const n of nodes) {
+		if (ids.has(n.id)) continue;
+		ids.add(n.id);
+		agentIds.push(n.id);
+	}
+	const seen = /* @__PURE__ */ new Set();
+	const spawns = [];
+	const children = /* @__PURE__ */ new Map();
+	const parentCount = /* @__PURE__ */ new Map();
+	for (const e of edges) {
+		if (e.kind !== "spawn" || e.from === e.to) continue;
+		if (!ids.has(e.from) || !ids.has(e.to)) continue;
+		const key = `${e.from}\u0000${e.to}`;
+		if (seen.has(key)) continue;
+		seen.add(key);
+		spawns.push({
+			from: e.from,
+			to: e.to
+		});
+		children.set(e.from, [...children.get(e.from) ?? [], e.to]);
+		parentCount.set(e.to, (parentCount.get(e.to) ?? 0) + 1);
+	}
+	const groups = [];
+	const groupOf = /* @__PURE__ */ new Map();
+	for (const parentId of agentIds) {
+		const leaves = (children.get(parentId) ?? []).filter((c) => !children.has(c) && parentCount.get(c) === 1);
+		if (leaves.length < 4) continue;
+		const id = `agent-group:${parentId}`;
+		groups.push({
+			id,
+			parentId,
+			memberIds: leaves
+		});
+		for (const leaf of leaves) groupOf.set(leaf, id);
+	}
+	return {
+		key: JSON.stringify([agentIds, spawns.map((s) => [s.from, s.to])]),
+		agentIds,
+		spawns,
+		groups,
+		groupOf
+	};
+}
+function gridSize(members, columns, card, collapsed = false) {
+	if (collapsed) return {
+		width: card.width + 24,
+		height: 80
+	};
+	const cols = Math.max(1, Math.min(columns, members));
+	const rows = Math.ceil(members / cols);
+	return {
+		width: cols * card.width + (cols - 1) * GRID_GAP + 24,
+		height: 80 + rows * card.height + (rows - 1) * GRID_GAP + FRAME_PAD
+	};
+}
+/** 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({
+		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))
+	});
+	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
+	};
+}
+async function placeWithElk(units, links, direction) {
+	const elk = await loadElk();
+	if (!elk) return null;
+	const graph = {
+		id: "root",
+		layoutOptions: {
+			"elk.algorithm": "layered",
+			"elk.direction": direction === "LR" ? "RIGHT" : "DOWN",
+			"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
+			"elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
+			"elk.layered.nodePlacement.bk.fixedAlignment": "BALANCED",
+			"elk.layered.spacing.nodeNodeBetweenLayers": String(LAYER_GAP),
+			"elk.spacing.nodeNode": String(SIBLING_GAP),
+			"elk.spacing.componentComponent": String(48),
+			"elk.separateConnectedComponents": "true",
+			"elk.padding": "[top=0,left=0,bottom=0,right=0]"
+		},
+		children: units.map((u) => ({
+			id: u.id,
+			width: u.width,
+			height: u.height
+		})),
+		edges: links.map((l, i) => ({
+			id: `e${i}`,
+			sources: [l.from],
+			targets: [l.to]
+		}))
+	};
+	try {
+		const out = await elk.layout(graph);
+		const at = /* @__PURE__ */ new Map();
+		for (const c of out.children ?? []) at.set(c.id, {
+			x: c.x ?? 0,
+			y: c.y ?? 0
+		});
+		return at;
+	} catch {
+		return null;
+	}
+}
+/** Without ELK: one row (TB) or column (LR) per spawn depth, each centred. */
+function placeByDepth(units, links, direction) {
+	const parents = /* @__PURE__ */ new Map();
+	for (const l of links) parents.set(l.to, [...parents.get(l.to) ?? [], l.from]);
+	const depth = /* @__PURE__ */ new Map();
+	const depthOf = (id, path) => {
+		const known = depth.get(id);
+		if (known !== void 0) return known;
+		if (path.has(id)) return 0;
+		path.add(id);
+		const d = Math.max(-1, ...(parents.get(id) ?? []).map((p) => depthOf(p, path))) + 1;
+		path.delete(id);
+		depth.set(id, d);
+		return d;
+	};
+	const layers = [];
+	for (const u of units) (layers[depthOf(u.id, /* @__PURE__ */ new Set())] ??= []).push(u);
+	const along = (u) => direction === "TB" ? u.width : u.height;
+	const across = (u) => direction === "TB" ? u.height : u.width;
+	const extents = layers.map((l) => l.reduce((sum, u) => sum + along(u), 0) + (l.length - 1) * SIBLING_GAP);
+	const widest = Math.max(...extents);
+	const at = /* @__PURE__ */ new Map();
+	let offset = 0;
+	layers.forEach((layer, i) => {
+		let cursor = (widest - extents[i]) / 2;
+		for (const u of layer) {
+			at.set(u.id, direction === "TB" ? {
+				x: cursor,
+				y: offset
+			} : {
+				x: offset,
+				y: cursor
+			});
+			cursor += along(u) + SIBLING_GAP;
+		}
+		offset += Math.max(...layer.map(across)) + LAYER_GAP;
+	});
+	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);
+	const placed = await placeWithElk(units, links, direction) ?? placeByDepth(units, links, direction);
+	const positions = /* @__PURE__ */ new Map();
+	const frames = [];
+	let width = 0;
+	let height = 0;
+	for (const u of units) {
+		const p = placed.get(u.id) ?? {
+			x: 0,
+			y: 0
+		};
+		width = Math.max(width, p.x + u.width);
+		height = Math.max(height, p.y + u.height);
+		positions.set(u.id, p);
+	}
+	for (const g of topology.groups) {
+		const origin = positions.get(g.id) ?? {
+			x: 0,
+			y: 0
+		};
+		positions.delete(g.id);
+		const closed = collapsed.has(g.id);
+		const size = gridSize(g.memberIds.length, columns, card, closed);
+		frames.push({
+			group: g,
+			...origin,
+			...size,
+			collapsed: closed
+		});
+		positions.set(g.parentId, {
+			x: origin.x + FRAME_PAD,
+			y: origin.y + 8
+		});
+		if (closed) continue;
+		const cols = Math.max(1, Math.min(columns, g.memberIds.length));
+		g.memberIds.forEach((id, i) => {
+			positions.set(id, {
+				x: origin.x + FRAME_PAD + i % cols * (card.width + GRID_GAP),
+				y: origin.y + 80 + Math.floor(i / cols) * (card.height + GRID_GAP)
+			});
+		});
+	}
+	return {
+		columns,
+		positions,
+		frames,
+		width,
+		height
+	};
+}
+//#endregion
+//#region src/react/agent-graph/latest-events.tsx
+function EventRow({ entry, now, onSelect }) {
+	const meta = statusMeta(entry.observed ? entry.status : "unknown"), age = fmtEventTime(entry.at, now);
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		disabled: !onSelect,
+		onClick: () => onSelect?.(entry),
+		title: entry.name + ": " + entry.label,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "ag-latest-dot",
+				style: {
+					background: entry.observed ? "var(" + meta.token + ")" : "transparent",
+					border: entry.observed ? void 0 : "1.5px solid var(" + meta.token + ")"
+				},
+				"aria-hidden": true
+			}),
+			/* @__PURE__ */ jsx("strong", { children: entry.name }),
+			entry.observed && /* @__PURE__ */ jsxs("span", {
+				className: "ag-latest-state",
+				style: { color: "var(" + meta.token + ")" },
+				children: [entry.status !== "running" && /* @__PURE__ */ jsx(RunStatusIcon, {
+					status: entry.status,
+					size: 14,
+					"aria-hidden": true
+				}), meta.label]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "ag-latest-label",
+				children: entry.label
+			}),
+			/* @__PURE__ */ jsxs("time", { children: [
+				entry.observed ? "Observed " : "",
+				age,
+				age !== "now" && age !== "—" ? " ago" : ""
+			] })
+		]
+	}) });
+}
+/** Recorded events and locally observed state changes. Hover or focus holds the reading position. */
+function LatestEvents({ agents, n = 5, now, live = now === void 0, selectedId, onSelect }) {
+	const clock = useRunNow(now), limit = Number.isFinite(n) ? Math.max(1, Math.trunc(n)) : 5;
+	const latest = useMemo(() => agents.flatMap((agent) => (agent.events ?? []).map((event) => ({
+		id: agent.id + ":" + event.id,
+		agentId: agent.id,
+		name: agent.label,
+		label: event.label,
+		at: event.at,
+		status: agent.status
+	}))).sort((a, b) => (Number.isFinite(b.at) ? b.at : -Infinity) - (Number.isFinite(a.at) ? a.at : -Infinity) || a.id.localeCompare(b.id)).slice(0, limit), [agents, limit]);
+	const [rows, setRows] = useState(latest), [pins, setPins] = useState([]), [announcement, setAnnouncement] = useState("");
+	const [hovered, setHovered] = useState(false), [focused, setFocused] = useState(false), paused = hovered || focused;
+	const source = useRef(latest), pending = useRef(void 0);
+	const announce = useRef(void 0), messages = useRef(/* @__PURE__ */ new Map());
+	source.current = latest;
+	const previous = useRef(new Map(agents.map((agent) => [agent.id, agent.status])));
+	useEffect(() => {
+		const changes = agents.filter((agent) => previous.current.has(agent.id) && previous.current.get(agent.id) !== agent.status).map((agent) => ({
+			id: agent.id + ":status:" + clock,
+			agentId: agent.id,
+			name: agent.label,
+			status: agent.status,
+			label: agent.result ?? agent.turn ?? "Status changed",
+			at: clock,
+			observed: true
+		}));
+		previous.current = new Map(agents.map((agent) => [agent.id, agent.status]));
+		if (!live) {
+			setPins((old) => old.length ? [] : old);
+			messages.current.clear();
+			clearTimeout(announce.current);
+			announce.current = void 0;
+			return;
+		}
+		const ids = new Set(agents.map((agent) => agent.id));
+		setPins((old) => {
+			const next = [...changes, ...old.filter((entry) => ids.has(entry.agentId) && !changes.some((change) => change.agentId === entry.agentId))].slice(0, limit);
+			return !changes.length && next.length === old.length ? old : next;
+		});
+		if (!changes.length) return;
+		for (const entry of changes) messages.current.set(entry.agentId, entry.name + ": " + statusMeta(entry.status).label);
+		if (announce.current === void 0) announce.current = setTimeout(() => {
+			setAnnouncement([...messages.current.values()].join("; "));
+			messages.current.clear();
+			announce.current = void 0;
+		}, tokenMilliseconds("--duration-ambient"));
+	}, [
+		agents,
+		clock,
+		limit,
+		live
+	]);
+	useEffect(() => {
+		if (selectedId) setPins((old) => old.filter((entry) => entry.agentId !== selectedId));
+	}, [selectedId]);
+	useEffect(() => {
+		if (paused) {
+			clearTimeout(pending.current);
+			pending.current = void 0;
+			return;
+		}
+		if (pending.current === void 0) pending.current = setTimeout(() => {
+			setRows(source.current);
+			pending.current = void 0;
+		}, tokenMilliseconds("--duration-ambient") / 2);
+	}, [latest, paused]);
+	useEffect(() => () => {
+		clearTimeout(pending.current);
+		clearTimeout(announce.current);
+	}, []);
+	const current = [...pins, ...rows.filter((entry) => !pins.some((pin) => pin.agentId === entry.agentId))].slice(0, limit);
+	const held = useRef(current);
+	useLayoutEffect(() => {
+		if (!paused) held.current = current;
+	}, [current, paused]);
+	const visible = paused ? held.current : current;
+	const refresh = () => {
+		setRows([...source.current]);
+		held.current = [...pins, ...source.current.filter((entry) => !pins.some((pin) => pin.agentId === entry.agentId))].slice(0, limit);
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: "ag-latest",
+		"aria-label": "Latest activity",
+		tabIndex: 0,
+		onPointerEnter: () => setHovered(true),
+		onPointerLeave: () => setHovered(false),
+		onFocusCapture: () => setFocused(true),
+		onBlurCapture: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
+		},
+		children: [
+			/* @__PURE__ */ jsxs("header", { children: [
+				/* @__PURE__ */ jsx("strong", { children: "Latest activity" }),
+				/* @__PURE__ */ jsx("span", { children: paused ? "Paused while reading" : "Recorded events · age" }),
+				paused && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: refresh,
+					children: "Show latest"
+				})
+			] }),
+			/* @__PURE__ */ jsx("ol", {
+				tabIndex: 0,
+				"aria-label": "Recorded activity events",
+				children: visible.length ? visible.map((entry) => /* @__PURE__ */ jsx(EventRow, {
+					entry,
+					now: clock,
+					onSelect: onSelect ? (item) => {
+						setPins((old) => old.filter((pin) => pin.agentId !== item.agentId));
+						onSelect(item.agentId);
+					} : void 0
+				}, entry.id)) : /* @__PURE__ */ jsx("li", {
+					className: "ag-latest-empty",
+					children: "No activity events were reported."
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				role: "status",
+				"aria-live": "polite",
+				children: announcement
+			})
+		]
+	});
+}
+//#endregion
+export { LIVE_AGENT_CARD as a, AgentMark as c, Wrench as d, GRID_MIN_LEAVES as i, GraphMarksProvider as l, AGENT_CARD as n, buildAgentTopology as o, FRAME_CAPTION as r, layoutAgents as s, LatestEvents as t, ToolMark as u };

package/dist/motion-DILryczn.js

@@ -0,0 +1,7 @@
+//#region src/react/agent-graph/motion.ts
+/** Brand owns complete duration/easing roles. Keep properties explicit. */
+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";
+/** Technical floating surfaces may change opacity/transform, never layout. */
+const MOTION_SURFACE = "[transition:opacity_var(--motion-surface),transform_var(--motion-surface)] motion-reduce:transition-none";
+//#endregion
+export { MOTION_SURFACE as n, MOTION_CONTROL as t };

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

@@ -0,0 +1,157 @@
+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 { 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. */
+export interface AgentGraphTool {
+  id: string;
+  label: string;
+  /** Brand id for `ProviderIcon` ("github", "slack", "postgres"…). */
+  provider?: string | null;
+  /** One line under the name in its popover, e.g. "Postgres, read-only". */
+  detail?: string | null;
+}
+export type AgentGraphCallKind = "call" | "answer" | "needs-you" | "failed";
+/** One recorded call between two nodes ("you", an agent id or a tool id). */
+export interface AgentGraphCall {
+  id: string;
+  from: string;
+  to: string;
+  kind: AgentGraphCallKind;
+  /** What was asked or answered, one line. */
+  label?: string | null;
+  /** Epoch ms. */
+  startedAt: number;
+  /** Absent while it runs. */
+  durationMs?: number | null;
+}
+/** The id the "You" node takes in `calls`. */
+export declare const YOU_ID = "you";
+export type HubNodeKind = "you" | "hub" | "agent" | "tool";
+export interface HubNodePlacement {
+  id: string;
+  kind: HubNodeKind;
+  /** Grid cell; the hub is (0, 0). */
+  col: number;
+  row: number;
+}
+export interface HubLink {
+  from: string;
+  to: string;
+}
+export interface HubMetrics {
+  cellX: number;
+  cellY: number;
+  tile: number;
+  hubTile: number;
+  /** Room under a tile for its two label lines. */
+  label: number;
+}
+export declare const HUB_METRICS: HubMetrics;
+/** The orchestrator: the agent nobody spawned, else the first. */
+export declare function hubAgentId(nodes: readonly AgentGraphNode[], edges: readonly AgentGraphEdge[]): string | undefined;
+export interface HubLayout {
+  placements: HubNodePlacement[];
+  links: HubLink[];
+  minCol: number;
+  maxCol: number;
+  minRow: number;
+  maxRow: number;
+}
+/**
+ * Place every node on the grid. Agents take ring cells in order; each tool takes
+ * the first free cell outward from the first agent that called it (beside, then
+ * above or below, then diagonal), so it sits next to its user.
+ */
+export declare function layoutHub(input: {
+  nodes: readonly AgentGraphNode[];
+  edges: readonly AgentGraphEdge[];
+  tools: readonly AgentGraphTool[];
+  calls: readonly AgentGraphCall[];
+  you: boolean;
+}): HubLayout;
+export interface Point {
+  x: number;
+  y: number;
+}
+export interface HubBounds {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}
+/**
+ * A short rounded Manhattan route around tile and label bounds. Departure lanes
+ * separate parallel calls; the path length keeps finite trips at a consistent speed.
+ */
+export declare function orthogonalPath(a: Point, b: Point, verticalFirst: boolean, lane?: number, radius?: number, obstacles?: readonly HubBounds[]): {
+  d: string;
+  length: number;
+};
+//#endregion
+//#region src/react/agent-graph/marks.d.ts
+/** Identity comes from the host; the diagram never guesses a provider or model mark. */
+interface GraphMarks {
+  renderAgentMark?: (agent: AgentGraphNode, layout: "tree" | "hub", size: number) => ReactNode;
+  renderToolMark?: (tool: AgentGraphTool | undefined, label: string, size: number) => ReactNode;
+}
+//#endregion
+//#region src/react/agent-graph/AgentGraph.d.ts
+export interface AgentGraphProps extends GraphMarks {
+  nodes: readonly AgentGraphNode[];
+  /** `spawn` edges shape the tree; `message` and `delegation` edges are drawn
+   *  over it as dashed curves and never move a card. */
+  edges: readonly AgentGraphEdge[];
+  selectedId?: string | null;
+  onSelect?: (id: string) => void;
+  /** Tree direction. Default `TB` (root at the top). */
+  direction?: AgentGraphDirection;
+  /** Sizes the canvas; the graph fills it. Give it a height. */
+  className?: string;
+  /** Shown instead of the canvas when there are no agents. */
+  emptyState?: ReactNode;
+  /**
+   * `tree` (default) lays out a spawn tree of cards for large runs. `hub` draws
+   * the run around its orchestrator: You, the agents, the tools they call, and
+   * each call travelling along its edge in its kind's colour.
+   */
+  layout?: "tree" | "hub";
+  /** Hub tools/services. Omit unreported inventory; [] records no tools. */
+  tools?: readonly AgentGraphTool[];
+  /** Hub calls, newest last. Omit unreported history; [] records no calls. They colour edges and fill popovers. */
+  calls?: readonly AgentGraphCall[];
+  /** Hub layout: draw the person who asked as "You". */
+  you?: {
+    label?: string;
+    summary?: string;
+  } | boolean;
+  /** Hub layout and live cards: epoch ms to draw at (a replay position); defaults to now, ticking. */
+  now?: number;
+  /** Hub layout: the header title. Default "Agent graph". */
+  title?: ReactNode;
+  /**
+   * Tree layout: readable task summaries, the latest three events and model/accounting details. Desktop slots stay
+   * fixed through status updates; completed results compact while failures retain their evidence. Phones preserve
+   * their initial attention order. Only the running dot breathes; commands update without routine sliding.
+   */
+  live?: boolean;
+  /** Optional host tool identity for a recorded event. */
+  renderEventIcon?: (event: AgentGraphEvent) => ReactNode;
+  /** Live tree activity; false when a shared workspace already supplies its strip. */
+  showLatestEvents?: boolean;
+}
+export declare function AgentGraph(props: AgentGraphProps): import("react").JSX.Element;
+//#endregion
+//#region src/react/agent-graph/latest-events.d.ts
+export interface LatestEventsProps {
+  agents: readonly AgentGraphNode[];
+  n?: number;
+  now?: number;
+  /** Observe incoming status changes. Disable when scrubbing a trace without an epoch. */
+  live?: boolean;
+  selectedId?: string | null;
+  onSelect?: (id: string) => void;
+}
+/** Recorded events and locally observed state changes. Hover or focus holds the reading position. */
+export declare function LatestEvents({ agents, n, now, live, selectedId, onSelect }: LatestEventsProps): import("react").JSX.Element;
+//#endregion
+export { AGENT_CARD, ActionPathParts, AgentFrame, AgentGraphActivity, AgentGraphDirection, AgentGraphEdge, AgentGraphEdgeKind, AgentGraphEvent, AgentGraphNode, AgentGraphStatus, AgentLayout, AgentLeafGroup, AgentTopology, CardSize, FRAME_CAPTION, GRID_MIN_LEAVES, GraphErrorBoundary, type GraphMarks, LIVE_AGENT_CARD, LeadCase, RESTING_BORDER, RESTING_SHADOW, SELECTION_OUTLINE, actionPathLabel, activityTiming, agentQuietActivity, ambientStyle, buildAgentTopology, clampPreview, edgeColor, fmtCost, fmtDuration, fmtEventTime, fmtTokenTotal, fmtTokens, humanizeIdentifier, layoutAgents, loadElk, motionAllowed, parseActionPath, retryImport, shortModel, syncAmbient, tokenMilliseconds, useAttention, useColorMode, useMotionAllowed, useRunNow };