@tangle-network/charts 2.0.17 → 2.0.18

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/package.json

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