@tangle-network/sandbox-ui 7.0.0 → 7.0.1

package/dist/runtime-viewer/AgentGraphCanvas-xHVW-YRV-Ch1fnK9k.js

@@ -0,0 +1,957 @@
+import { i as e } from "./rolldown-runtime-CwxnZyOB.js";
+import { $ as t, A as n, C as r, D as i, Dt as a, E as o, Et as s, F as c, L as l, M as u, P as d, S as ee, T as te, Wt as f, _ as p, a as m, at as h, b as g, d as ne, f as _, g as re, h as ie, i as v, j as y, k as b, l as x, lt as S, n as C, p as ae, pt as oe, r as w, s as T, st as E, t as se, u as ce, ut as le, v as ue, w as de, x as D, y as fe, z as pe, zt as O } from "./latest-events-CMbdBLcT-uhVN4JLh.js";
+// node_modules/.pnpm/@tangle-network+charts@4.0.15_@tangle-network+brand@1.31.3_react@19.3.1__@tangle-networ_73d1ae3d4127e224bdd384365224d35e/node_modules/@tangle-network/charts/dist/AgentGraphCanvas-xHVW-YRV.js
+var k = O(), A = /* @__PURE__ */ e(f(), 1), j = {
+	name: "book-open",
+	size: 24,
+	node: [["path", {
+		d: "M12 5v16",
+		key: "1f6ucr"
+	}], ["path", {
+		d: "M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z",
+		key: "1fyvmf"
+	}]]
+};
+j.node;
+var me = g(j), M = {
+	name: "brain",
+	size: 24,
+	node: [
+		["path", {
+			d: "M12 18V5",
+			key: "adv99a"
+		}],
+		["path", {
+			d: "M15 13a4.17 4.17 0 01-3-4 4.17 4.17 0 01-3 4",
+			key: "5nuw1p"
+		}],
+		["path", {
+			d: "M17.707 6.294A3 3 0 1012 5a3 3 0 10-5.707 1.294",
+			key: "18ldcf"
+		}],
+		["path", {
+			d: "M17.996 5.125a4 4 0 012.526 5.77",
+			key: "1sdu8q"
+		}],
+		["path", {
+			d: "M18 18a4 4 0 002-7.465",
+			key: "7xqqvr"
+		}],
+		["path", {
+			d: "M19.967 17.482a4 4 0 11-7.967.517 4 4 0 11-7.967-.517",
+			key: "t46ysz"
+		}],
+		["path", {
+			d: "M6 18a4 4 0 01-2-7.465",
+			key: "1y2m15"
+		}],
+		["path", {
+			d: "M6.004 5.125a4 4 0 00-2.526 5.77",
+			key: "3cw1ss"
+		}]
+	]
+};
+M.node;
+var N = g(M), P = {
+	name: "flask-conical",
+	size: 24,
+	node: [
+		["path", {
+			d: "M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2",
+			key: "18mbvz"
+		}],
+		["path", {
+			d: "M6.453 15h11.094",
+			key: "3shlmq"
+		}],
+		["path", {
+			d: "M8.5 2h7",
+			key: "csnxdl"
+		}]
+	]
+};
+P.node;
+var he = g(P), F = {
+	name: "hammer",
+	size: 24,
+	node: [
+		["path", {
+			d: "m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9",
+			key: "1hayfq"
+		}],
+		["path", {
+			d: "m18 15 4-4",
+			key: "16gjal"
+		}],
+		["path", {
+			d: "m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5",
+			key: "15ts47"
+		}]
+	]
+};
+F.node;
+var I = g(F), L = {
+	name: "hourglass",
+	size: 24,
+	node: [
+		["path", {
+			d: "M5 22h14",
+			key: "ehvnwv"
+		}],
+		["path", {
+			d: "M5 2h14",
+			key: "pdyrp9"
+		}],
+		["path", {
+			d: "M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22",
+			key: "1d314k"
+		}],
+		["path", {
+			d: "M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2",
+			key: "1vvvr6"
+		}]
+	]
+};
+L.node;
+var ge = g(L), R = {
+	name: "message-square",
+	size: 24,
+	node: [["path", {
+		d: "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z",
+		key: "18887p"
+	}]]
+};
+R.node;
+var z = g(R), B = {
+	name: "pen-line",
+	size: 24,
+	node: [["path", {
+		d: "M13 21h8",
+		key: "1jsn5i"
+	}], ["path", {
+		d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
+		key: "1a8usu"
+	}]],
+	aliases: ["edit-3"]
+};
+B.node;
+var V = g(B), H = {
+	name: "repeat",
+	size: 24,
+	node: [
+		["path", {
+			d: "m17 2 4 4-4 4",
+			key: "nntrym"
+		}],
+		["path", {
+			d: "M3 11v-1a4 4 0 0 1 4-4h14",
+			key: "84bu3i"
+		}],
+		["path", {
+			d: "m7 22-4-4 4-4",
+			key: "1wqhfi"
+		}],
+		["path", {
+			d: "M21 13v1a4 4 0 0 1-4 4H3",
+			key: "1rx37r"
+		}]
+	]
+};
+H.node;
+var _e = g(H), U = {
+	name: "rotate-ccw",
+	size: 24,
+	node: [["path", {
+		d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
+		key: "1357e3"
+	}], ["path", {
+		d: "M3 3v5h5",
+		key: "1xhq8a"
+	}]]
+};
+U.node;
+var W = g(U), G = {
+	name: "scan-search",
+	size: 24,
+	node: [
+		["path", {
+			d: "M3 7V5a2 2 0 0 1 2-2h2",
+			key: "aa7l1z"
+		}],
+		["path", {
+			d: "M17 3h2a2 2 0 0 1 2 2v2",
+			key: "4qcy5o"
+		}],
+		["path", {
+			d: "M21 17v2a2 2 0 0 1-2 2h-2",
+			key: "6vwrx8"
+		}],
+		["path", {
+			d: "M7 21H5a2 2 0 0 1-2-2v-2",
+			key: "ioqczr"
+		}],
+		["circle", {
+			cx: "12",
+			cy: "12",
+			r: "3",
+			key: "1v7zrd"
+		}],
+		["path", {
+			d: "m16 16-1.9-1.9",
+			key: "1dq9hf"
+		}]
+	]
+};
+G.node;
+var ve = g(G), ye = {
+	name: "test-tubes",
+	size: 24,
+	node: [
+		["path", {
+			d: "M9 2v17.5A2.5 2.5 0 0 1 6.5 22A2.5 2.5 0 0 1 4 19.5V2",
+			key: "1hjrqt"
+		}],
+		["path", {
+			d: "M20 2v17.5a2.5 2.5 0 0 1-2.5 2.5a2.5 2.5 0 0 1-2.5-2.5V2",
+			key: "16lc8n"
+		}],
+		["path", {
+			d: "M3 2h7",
+			key: "7s29d5"
+		}],
+		["path", {
+			d: "M14 2h7",
+			key: "7sicin"
+		}],
+		["path", {
+			d: "M9 16H4",
+			key: "1bfye3"
+		}],
+		["path", {
+			d: "M20 16h-5",
+			key: "ddnjpe"
+		}]
+	]
+};
+ye.node;
+var K = g(ye), q = {
+	thinking: {
+		label: "Thinking",
+		icon: N
+	},
+	reading: {
+		label: "Reading",
+		icon: me
+	},
+	building: {
+		label: "Building",
+		icon: I
+	},
+	proving: {
+		label: "Proving",
+		icon: he
+	},
+	writing: {
+		label: "Writing",
+		icon: V
+	},
+	waiting: {
+		label: "Waiting",
+		icon: ge
+	},
+	restarting: {
+		label: "Restarting",
+		icon: W
+	},
+	testing: {
+		label: "Testing",
+		icon: K
+	},
+	messaging: {
+		label: "Messaging",
+		icon: z
+	},
+	reviewing: {
+		label: "Reviewing",
+		icon: ve
+	},
+	looping: {
+		label: "Looping",
+		icon: _e
+	}
+};
+function J({ agent: e }) {
+	let t = e.activity && q[e.activity], n = e.activityCalibrated === !1;
+	return t ? /* @__PURE__ */ (0, k.jsxs)("span", {
+		className: "ag-live-activity",
+		"data-calibrated": n ? "false" : void 0,
+		"data-serious": !n && e.activity === "looping" ? "" : void 0,
+		title: `${t.label}${n ? " · uncalibrated classifier" : ""}`,
+		children: [
+			/* @__PURE__ */ (0, k.jsx)(t.icon, {
+				size: 12,
+				strokeWidth: 1.75,
+				"aria-hidden": !0
+			}),
+			t.label,
+			n && /* @__PURE__ */ (0, k.jsx)("small", {
+				className: "ag-live-badge",
+				children: "uncalibrated"
+			})
+		]
+	}) : null;
+}
+function be({ agent: e, selected: r, direction: i = "TB", now: a, handles: o = !1, onOpen: s, parentLabel: c, renderEventIcon: l }) {
+	let u = oe(a), te = (0, A.useRef)(null);
+	S(te, e.status);
+	let f = e.status === "failed", m = f || e.status === "done" || e.status === "stopped", h = pe(e, u), g = p(e.status), ne = [e.model ? t(e.model) : void 0, e.effort].filter(Boolean).join(" · "), _ = (e.events ?? []).slice(-1), v = ee(e.costUsd), y = [
+		v,
+		e.startedAt == null ? void 0 : `${d(e.startedAt, u, !1)} elapsed`,
+		Number.isFinite(e.commits) ? `${e.commits} ${e.commits === 1 ? "commit" : "commits"}` : void 0
+	].filter(Boolean).join(" · "), C = f ? D(e) : m ? e.result ?? void 0 : e.turn ?? void 0;
+	return /* @__PURE__ */ (0, k.jsxs)("div", {
+		className: "ag-live-slot",
+		children: [o && /* @__PURE__ */ (0, k.jsx)(x, { direction: i }), /* @__PURE__ */ (0, k.jsxs)("div", {
+			ref: te,
+			className: `ag-live-card${m ? " ag-live-chip" : ""}`,
+			"data-status": e.status,
+			"data-sparse": _.length === 0 || void 0,
+			"data-activity": h ? "quiet" : e.activity ?? void 0,
+			"data-selected": r || void 0,
+			title: re(e),
+			style: {
+				boxShadow: b,
+				...fe(e.status),
+				...r ? n : {},
+				"--ag-status": g.color
+			},
+			children: [
+				/* @__PURE__ */ (0, k.jsxs)("div", {
+					className: "ag-live-head",
+					children: [
+						/* @__PURE__ */ (0, k.jsx)("span", {
+							className: "ag-live-glyph",
+							title: h?.label ?? g.label,
+							children: /* @__PURE__ */ (0, k.jsx)(ae, {
+								status: e.status,
+								size: 14
+							})
+						}),
+						/* @__PURE__ */ (0, k.jsxs)("span", {
+							className: "ag-live-name",
+							children: [c && /* @__PURE__ */ (0, k.jsxs)("span", {
+								className: "ag-parent-label",
+								children: [c, " / "]
+							}), e.label]
+						}),
+						m ? v && /* @__PURE__ */ (0, k.jsx)("span", {
+							className: "ag-live-chip-cost",
+							title: "Cost",
+							children: v
+						}) : h && /* @__PURE__ */ (0, k.jsx)("span", {
+							className: "ag-live-quiet",
+							children: h.label
+						})
+					]
+				}),
+				!m && (ne || y) && /* @__PURE__ */ (0, k.jsx)("span", {
+					className: "ag-live-meta",
+					title: [ne, y].filter(Boolean).join(" · "),
+					children: [ne, y].filter(Boolean).join(" · ")
+				}),
+				(C || !m) && /* @__PURE__ */ (0, k.jsxs)("div", {
+					className: "ag-live-thinking-row",
+					children: [
+						C && /* @__PURE__ */ (0, k.jsx)("p", {
+							className: `ag-live-thinking${f ? " ag-live-failure" : ""}`,
+							title: C,
+							children: E(C)
+						}),
+						!m && /* @__PURE__ */ (0, k.jsx)(J, { agent: e }),
+						e.status === "needs-you" && /* @__PURE__ */ (0, k.jsx)("button", {
+							type: "button",
+							className: "ag-live-respond nodrag nopan",
+							disabled: !s,
+							title: s ? void 0 : "Responses unavailable in this view",
+							onClick: (e) => {
+								e.stopPropagation(), s?.();
+							},
+							children: "Respond"
+						})
+					]
+				}),
+				!m && _.length > 0 && /* @__PURE__ */ (0, k.jsx)("ol", {
+					className: "ag-live-events",
+					"aria-label": "Latest events",
+					children: _.map((e) => /* @__PURE__ */ (0, k.jsxs)("li", {
+						title: e.label,
+						children: [
+							l?.(e) ?? /* @__PURE__ */ (0, k.jsx)(ie, {
+								size: 12,
+								strokeWidth: 1.75,
+								"aria-hidden": !0
+							}),
+							/* @__PURE__ */ (0, k.jsx)("span", {
+								className: "ag-live-event-label",
+								children: E(e.label)
+							}),
+							/* @__PURE__ */ (0, k.jsx)("time", {
+								className: "ag-live-event-at",
+								dateTime: Number.isFinite(e.at) ? new Date(e.at).toISOString() : void 0,
+								children: d(e.at, u)
+							})
+						]
+					}, e.id))
+				})
+			]
+		})]
+	});
+}
+function xe({ data: e }) {
+	return /* @__PURE__ */ (0, k.jsx)(be, {
+		...e,
+		handles: !0
+	});
+}
+var Se = {
+	agent: w,
+	liveAgent: xe,
+	agentFrame: m
+}, Ce = { agentMessage: T }, Y = 16, X = 24, we = .8;
+function Te() {
+	let [e, t] = (0, A.useState)(null), n = (0, A.useRef)(null);
+	return [e, (0, A.useCallback)((e) => {
+		if (n.current?.disconnect(), n.current = null, !e || typeof ResizeObserver > "u") return;
+		let r = e.querySelector(".ag-graph-viewport") ?? e, i = () => {
+			let e = r.getBoundingClientRect();
+			e.width !== 0 && e.height !== 0 && t((t) => t && Math.abs(t.width - e.width) < 1 && Math.abs(t.height - e.height) < 1 ? t : {
+				width: e.width,
+				height: e.height
+			});
+		};
+		n.current = new ResizeObserver(i), n.current.observe(r), i();
+	}, [])];
+}
+function Ee(e, t, n) {
+	let r = e.getInternalNode(n), i = t?.querySelector(".ag-graph-viewport")?.getBoundingClientRect(), a = r?.measured.width ?? r?.width, o = r?.measured.height ?? r?.height;
+	if (!r || !i || !a || !o) return;
+	let s = e.getViewport(), c = r.internals.positionAbsolute, l = s.zoom, u = Math.max(Y - c.x * l, Math.min(i.width - Y - (c.x + a) * l, s.x)), d = Math.max(Y - c.y * l, Math.min(i.height - Y - (c.y + o) * l, s.y));
+	(u !== s.x || d !== s.y || l !== s.zoom) && e.setViewport({
+		x: u,
+		y: d,
+		zoom: l
+	});
+}
+function De({ nodes: e, edges: t, selectedId: n, onSelect: a, direction: c = "TB", className: d, emptyState: ee, live: f = !1, renderEventIcon: m, showLatestEvents: g = !0, now: ie }) {
+	let b = f ? ce : se, x = oe(ie), S = le(), w = (0, A.useId)(), T = (0, A.useRef)(null), E = (0, A.useRef)(!1), [D, fe] = (0, A.useState)(null), O = () => fe(null), [j, me] = (0, A.useState)(/* @__PURE__ */ new Set()), [M, N] = (0, A.useState)(0), [P, he] = (0, A.useState)(null), F = (0, A.useRef)(null), I = (0, A.useMemo)(() => D && y(D.anchor, F.current?.querySelector(".ag-graph-viewport") ?? null), [D]), [L, ge] = Te(), R = l(F, e.length > 0), z = L !== null && L.width < 600, B = ue(e, t), V = (0, A.useRef)(B);
+	V.current.key !== B.key && (V.current = B);
+	let H = V.current, _e = `${c}:${f}:${H.key}`, U = (0, A.useRef)(null);
+	L && !z && U.current?.key !== _e && (U.current = {
+		key: _e,
+		columns: Math.max(1, Math.min(6, Math.floor((L.width - 32 - (!f && c === "LR" ? b.width + 70 : 0)) / (b.width + 10))))
+	});
+	let W = U.current?.columns ?? 1, G = JSON.stringify([
+		c,
+		f,
+		H.key,
+		W,
+		[...j]
+	]), [ve, ye] = (0, A.useState)(null);
+	(0, A.useEffect)(() => {
+		if (z) return;
+		let e = !0;
+		return (async () => {
+			let t = await r(H, c, W, b, j, f);
+			for (let e = W - 1; e >= 2 && L && t.width * we > L.width - 32; e--) t = await r(H, c, e, b, j, f);
+			e && ye({
+				key: G,
+				layout: t
+			});
+		})(), () => {
+			e = !1;
+		};
+	}, [G, z]);
+	let K = ve?.key === G ? ve.layout : null;
+	(0, A.useEffect)(() => {
+		let e = n && H.groupOf.get(n);
+		e && me((t) => {
+			if (!t.has(e)) return t;
+			let n = new Set(t);
+			return n.delete(e), n;
+		});
+	}, [n, H.key]);
+	let q = (0, A.useMemo)(() => new Map(e.map((e) => [e.id, e])), [e]), J = (0, A.useRef)(null), xe = (0, A.useMemo)(() => {
+		if (!K) return [];
+		let e = K.frames.map((e) => ({
+			id: e.group.id,
+			type: "agentFrame",
+			position: {
+				x: e.x,
+				y: e.y
+			},
+			width: e.width,
+			height: e.height,
+			measured: J.current?.getInternalNode(e.group.id)?.measured,
+			zIndex: -1,
+			selectable: !1,
+			focusable: !1,
+			draggable: !1,
+			data: {
+				frame: e,
+				direction: c,
+				groupParents: f,
+				label: q.get(e.group.parentId)?.label ?? "Agent",
+				onToggle: () => {
+					!e.collapsed && n && e.group.memberIds.includes(n) && a?.(e.group.parentId), me((t) => {
+						let n = new Set(t);
+						return n.has(e.group.id) ? n.delete(e.group.id) : n.add(e.group.id), n;
+					});
+				}
+			}
+		})), t = [];
+		for (let e of H.agentIds) {
+			let r = q.get(e), i = K.positions.get(e);
+			if (!r || !i) continue;
+			let o = n === e, s = f && K.frames.find((t) => t.group.parentId === e), l = s ? s.width - 64 : b.width, u = s ? 64 : b.height, d = J.current?.getInternalNode(e)?.measured;
+			t.push({
+				id: e,
+				type: f ? "liveAgent" : "agent",
+				position: i,
+				width: l,
+				height: u,
+				measured: d?.width === l && d.height === u ? d : void 0,
+				className: `${C}${s ? " ag-frame-owner" : ""}`,
+				draggable: !1,
+				ariaRole: "button",
+				ariaLabel: re(r),
+				domAttributes: {
+					"aria-pressed": o,
+					"aria-describedby": D?.id === e ? w : void 0
+				},
+				data: {
+					agent: r,
+					selected: o,
+					direction: c,
+					now: x,
+					onOpen: a ? () => a(r.id) : void 0,
+					renderEventIcon: m
+				}
+			});
+		}
+		return [...e, ...t];
+	}, [
+		K,
+		H,
+		q,
+		n,
+		c,
+		f,
+		b,
+		x,
+		a,
+		m,
+		D
+	]), De = (0, A.useMemo)(() => {
+		if (!K) return [];
+		let e = [], r = /* @__PURE__ */ new Set();
+		for (let t of H.spawns) {
+			let n = f && H.groups.find((e) => e.parentId === t.from)?.id || t.from, i = H.groupOf.get(t.to) ?? t.to;
+			if (n === i) continue;
+			let a = `spawn:${n}:${i}`;
+			r.has(a) || (r.add(a), e.push({
+				id: a,
+				source: n,
+				target: i,
+				type: "smoothstep",
+				pathOptions: { borderRadius: 14 },
+				selectable: !1,
+				focusable: !1,
+				style: {
+					stroke: u(void 0),
+					strokeWidth: 1.5
+				}
+			}));
+		}
+		let a = new Set(K.positions.keys()), o = /* @__PURE__ */ new Map();
+		for (let e of t) {
+			if (e.kind === "spawn" || e.from === e.to || !a.has(e.from) || !a.has(e.to) || ![n, D?.id].some((t) => t === e.from || t === e.to)) continue;
+			let t = `${e.kind}:${e.from}:${e.to}`, r = o.get(t), s = (r?.data?.count ?? 0) + Math.max(1, e.count ?? 1), c = _[e.kind] ?? _.message;
+			o.set(t, {
+				id: t,
+				source: e.from,
+				target: e.to,
+				type: "agentMessage",
+				selectable: !1,
+				focusable: !1,
+				zIndex: 0,
+				markerEnd: {
+					type: i.ArrowClosed,
+					width: 12,
+					height: 12,
+					color: c
+				},
+				ariaLabel: `${e.kind === "delegation" ? "Delegation" : "Message"} from ${q.get(e.from)?.label ?? e.from} to ${q.get(e.to)?.label ?? e.to}${s > 1 ? `, ${s} times` : ""}`,
+				data: {
+					kind: e.kind,
+					count: s,
+					label: e.label ?? r?.data?.label
+				}
+			});
+		}
+		return [...e, ...o.values()];
+	}, [
+		K,
+		H,
+		t,
+		q,
+		n,
+		D
+	]), [ke, Ae] = (0, A.useState)(!1), [je, Me] = (0, A.useState)(!1), Ne = (0, A.useRef)(n);
+	Ne.current = n;
+	let Pe = (0, A.useRef)(null);
+	(0, A.useEffect)(() => {
+		z && (J.current = null, Ae(!1), Me(!1), Pe.current = null);
+	}, [z]);
+	let Fe = K ? `${G}:${K.columns}` : null, Ie = `${c}:${H.key}`, Le = K && L ? Math.max(.02, Math.min(1, (L.width - 32) / K.width, (L.height - 32) / K.height)) : .2;
+	(0, A.useEffect)(() => {
+		let e = J.current;
+		if (!ke || !e || !Fe || !L) return;
+		let t = Pe.current !== Ie, n = !t;
+		if (n && !Ne.current) return;
+		let r = Pe.current !== null && t && S;
+		Pe.current = Ie;
+		let i = requestAnimationFrame(() => {
+			n ? Ee(e, F.current, Ne.current) : e.fitView({
+				padding: `${Y}px`,
+				minZoom: Math.max(Le, we),
+				maxZoom: 1,
+				duration: r ? h("--duration-base", F.current) : 0
+			}), Me(!0);
+		});
+		return () => cancelAnimationFrame(i);
+	}, [
+		ke,
+		Fe,
+		Ie,
+		L,
+		Le,
+		S,
+		n
+	]);
+	let Z = (0, A.useCallback)((e) => {
+		q.has(e) && (a?.(e), F.current?.querySelector(`[data-agent-id="${CSS.escape(e)}"]`)?.scrollIntoView({ block: "nearest" }));
+	}, [q, a]), Re = (0, A.useCallback)((e, t) => Z(t.id), [Z]), ze = (0, A.useCallback)((e) => {
+		if (!(e.target instanceof HTMLElement)) return;
+		let t = e.target.closest(".react-flow__node")?.getAttribute("data-id");
+		if (!t || !q.has(t)) return;
+		if (e.key === "Escape") {
+			e.preventDefault(), e.stopPropagation(), F.current?.focus();
+			return;
+		}
+		if (!e.target.classList.contains("react-flow__node")) return;
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault(), e.stopPropagation(), Z(t);
+			return;
+		}
+		let n = K?.positions.get(t), r = {
+			ArrowLeft: [-1, 0],
+			ArrowRight: [1, 0],
+			ArrowUp: [0, -1],
+			ArrowDown: [0, 1]
+		}[e.key], i = e.key === "Home" ? H.agentIds[0] : n && r ? [...K?.positions ?? []].filter(([e, i]) => q.has(e) && e !== t && (i.x - n.x) * r[0] + (i.y - n.y) * r[1] > 0).sort((e, t) => Math.hypot(e[1].x - n.x, e[1].y - n.y) - Math.hypot(t[1].x - n.x, t[1].y - n.y))[0]?.[0] : null;
+		if (!i) return;
+		e.preventDefault(), e.stopPropagation();
+		let a = K?.positions.get(i), o = J.current?.getInternalNode(i)?.measured;
+		a && J.current?.setCenter(a.x + (o?.width ?? b.width) / 2, a.y + (o?.height ?? b.height) / 2, { zoom: 1 });
+		let s = () => F.current?.querySelector(`.react-flow__node[data-id="${CSS.escape(i)}"]`), c = s();
+		c ? c.focus() : requestAnimationFrame(() => requestAnimationFrame(() => s()?.focus()));
+	}, [
+		q,
+		Z,
+		K,
+		H,
+		b,
+		S
+	]), Be = (e) => e.status === "needs-you" ? 0 : e.status === "failed" ? 1 : pe(e, x) ? 2 : e.status === "waiting" ? 3 : e.status === "running" ? 4 : 5, Q = new Map(t.filter((e) => e.kind === "spawn").map((e) => [e.to, e.from])), Ve = (e) => {
+		let t = /* @__PURE__ */ new Set([e]), n = 0;
+		for (; Q.has(e) && !t.has(Q.get(e));) e = Q.get(e), t.add(e), n++;
+		return n;
+	}, He = (0, A.useRef)([]), Ue = new Set(He.current);
+	He.current = [...He.current.filter((e) => q.has(e)), ...e.filter((e) => !Ue.has(e.id)).sort((e, t) => Be(e) - Be(t)).map((e) => e.id)];
+	let We = He.current.map((e) => q.get(e));
+	(0, A.useEffect)(() => {
+		let e = We.findIndex((e) => e.id === n);
+		e >= 0 && N(Math.floor(e / X));
+	}, [n]), (0, A.useEffect)(() => {
+		if (!z || !n) return;
+		let e = requestAnimationFrame(() => F.current?.querySelector(`[data-agent-id="${CSS.escape(n)}"]`)?.scrollIntoView({ block: "nearest" }));
+		return () => cancelAnimationFrame(e);
+	}, [
+		n,
+		M,
+		z
+	]);
+	let $ = Math.min(M * X, Math.max(0, Math.ceil(e.length / X) - 1) * X), Ge = [
+		"needs-you",
+		"failed",
+		"quiet"
+	].map((t) => ({
+		status: t,
+		count: e.filter((e) => t === "quiet" ? pe(e, x) : e.status === t).length
+	})).filter((e) => e.count), Ke = /* @__PURE__ */ (0, k.jsxs)("div", {
+		className: "flex min-h-10 shrink-0 flex-wrap items-center gap-x-3 gap-y-1 px-3 py-1 text-xs text-muted-foreground",
+		"aria-label": "Run status",
+		children: [/* @__PURE__ */ (0, k.jsxs)("span", {
+			className: "shrink-0 whitespace-nowrap",
+			children: [e.length, " agents"]
+		}), Ge.map((e) => /* @__PURE__ */ (0, k.jsxs)("button", {
+			type: "button",
+			"aria-pressed": P === e.status,
+			className: "ag-status-button rounded-full border border-border px-2 py-1",
+			style: { color: e.status === "quiet" ? "var(--surface-warning-text)" : p(e.status).color },
+			onClick: () => he((t) => t === e.status ? null : e.status),
+			children: [
+				/* @__PURE__ */ (0, k.jsx)(ae, {
+					status: e.status === "quiet" ? "waiting" : e.status,
+					size: 14
+				}),
+				e.count,
+				" ",
+				e.status === "needs-you" ? "need you" : e.status
+			]
+		}, e.status))]
+	});
+	return e.length === 0 ? /* @__PURE__ */ (0, k.jsx)("div", {
+		className: `agent-graph flex items-center justify-center rounded-lg border border-border border-dashed p-4 text-center text-muted-foreground text-xs ${d ?? ""}`,
+		children: ee ?? "No agents yet"
+	}) : /* @__PURE__ */ (0, k.jsx)(s, {
+		anchor: I?.anchor,
+		open: !!D,
+		onOpenChange: (e) => {
+			e || O();
+		},
+		children: /* @__PURE__ */ (0, k.jsxs)("div", {
+			ref: (e) => {
+				F.current = e, ge(e);
+			},
+			className: `agent-graph ag-live${f ? "" : " ag-topology"} relative flex flex-col ${d ?? ""}`,
+			tabIndex: -1,
+			onKeyDownCapture: (e) => {
+				e.target instanceof HTMLElement && e.target.closest("[data-agent-metrics]") || (e.key === "Tab" && !e.shiftKey && D ? (e.preventDefault(), document.getElementById(w)?.focus()) : (e.key === "Escape" && O(), ze(e)));
+			},
+			onFocusCapture: (e) => {
+				if (!(e.target instanceof HTMLElement) || E.current || e.target.closest("[data-agent-metrics]")) return;
+				if (!e.target.matches(":focus-visible")) {
+					O();
+					return;
+				}
+				let t = e.target.closest(".react-flow__node, [data-agent-id]"), n = t?.dataset.id ?? t?.dataset.agentId;
+				T.current = t ?? null, fe(n && q.has(n) ? {
+					id: n,
+					anchor: t
+				} : null);
+			},
+			onBlurCapture: (e) => {
+				!e.currentTarget.contains(e.relatedTarget) && e.relatedTarget?.id !== w && O();
+			},
+			"data-layout": z ? "list" : K && je ? "ready" : "pending",
+			"data-highlight": P ?? void 0,
+			"data-columns": K?.columns,
+			children: [
+				Ke,
+				g && f && /* @__PURE__ */ (0, k.jsx)(ne, {
+					agents: e,
+					now: ie,
+					live: f,
+					selectedId: n,
+					onSelect: a ? Z : void 0
+				}),
+				z ? /* @__PURE__ */ (0, k.jsxs)("ul", {
+					className: "ag-graph-viewport ag-phone-list overflow-auto",
+					"aria-label": "Agents by attention",
+					children: [We.slice($, $ + X).map((e) => /* @__PURE__ */ (0, k.jsx)("li", {
+						style: { "--depth": Ve(e.id) },
+						children: /* @__PURE__ */ (0, k.jsx)("div", {
+							role: "button",
+							tabIndex: 0,
+							"aria-pressed": n === e.id,
+							"aria-label": re(e),
+							"data-agent-id": e.id,
+							className: "ag-phone-select",
+							onClick: () => Z(e.id),
+							onKeyDown: (t) => {
+								(t.key === "Enter" || t.key === " ") && t.target === t.currentTarget && (t.preventDefault(), Z(e.id));
+							},
+							children: f ? /* @__PURE__ */ (0, k.jsx)(be, {
+								agent: e,
+								parentLabel: q.get(Q.get(e.id) ?? "")?.label,
+								selected: n === e.id,
+								now: x,
+								renderEventIcon: m,
+								onOpen: a ? () => Z(e.id) : void 0
+							}) : /* @__PURE__ */ (0, k.jsx)(v, {
+								agent: e,
+								parentLabel: q.get(Q.get(e.id) ?? "")?.label,
+								selected: n === e.id,
+								now: x,
+								direction: c,
+								onOpen: a ? () => Z(e.id) : void 0
+							})
+						})
+					}, e.id)), e.length > X && /* @__PURE__ */ (0, k.jsxs)("li", {
+						className: "flex items-center justify-between gap-2 border-t border-border pt-3 text-sm",
+						"aria-label": "Agent pages",
+						children: [
+							/* @__PURE__ */ (0, k.jsx)("button", {
+								type: "button",
+								className: "rounded px-2 py-1 hover:bg-muted disabled:opacity-40 focus-visible:outline",
+								disabled: !$,
+								onClick: () => {
+									N((e) => e - 1), F.current?.querySelector(".ag-phone-list")?.scrollTo({ top: 0 });
+								},
+								children: "Previous"
+							}),
+							/* @__PURE__ */ (0, k.jsxs)("span", { children: [
+								$ + 1,
+								"–",
+								Math.min(e.length, $ + X),
+								" of ",
+								e.length
+							] }),
+							/* @__PURE__ */ (0, k.jsx)("button", {
+								type: "button",
+								className: "rounded px-2 py-1 hover:bg-muted disabled:opacity-40 focus-visible:outline",
+								disabled: $ + X >= e.length,
+								onClick: () => {
+									N((e) => e + 1), F.current?.querySelector(".ag-phone-list")?.scrollTo({ top: 0 });
+								},
+								children: "Next"
+							})
+						]
+					})]
+				}) : /* @__PURE__ */ (0, k.jsx)("div", {
+					className: "ag-graph-viewport min-h-0 flex-1",
+					style: { opacity: +!!je },
+					children: /* @__PURE__ */ (0, k.jsxs)(o, {
+						nodes: xe,
+						edges: De,
+						nodeTypes: Se,
+						edgeTypes: Ce,
+						colorMode: R,
+						onInit: (e) => {
+							J.current = e, Ae(!0);
+						},
+						onNodeClick: Re,
+						onNodeMouseEnter: (e, t) => {
+							T.current = e.target.closest(".react-flow__node"), T.current && fe({
+								id: t.id,
+								anchor: T.current
+							});
+						},
+						proOptions: { hideAttribution: !0 },
+						onlyRenderVisibleElements: !0,
+						nodesDraggable: !1,
+						nodesConnectable: !1,
+						elementsSelectable: !1,
+						nodesFocusable: !0,
+						edgesFocusable: !1,
+						deleteKeyCode: null,
+						panOnScroll: !0,
+						zoomOnScroll: !1,
+						zoomOnPinch: !0,
+						zoomOnDoubleClick: !1,
+						panOnDrag: !0,
+						minZoom: Le,
+						maxZoom: 1.75,
+						"aria-label": "Agent topology",
+						children: [/* @__PURE__ */ (0, k.jsx)(de, {
+							bgColor: "var(--bg-root)",
+							gap: 16,
+							size: 1,
+							color: "hsl(var(--foreground) / 0.06)"
+						}), /* @__PURE__ */ (0, k.jsx)(te, {
+							showInteractive: !1,
+							position: "bottom-right",
+							fitViewOptions: {
+								padding: `${Y}px`,
+								minZoom: Le,
+								maxZoom: 1
+							}
+						})]
+					})
+				}),
+				D && I && q.has(D.id) && /* @__PURE__ */ (0, k.jsx)(Oe, {
+					container: F.current,
+					place: I,
+					mode: R,
+					id: w,
+					agent: q.get(D.id),
+					onClose: () => {
+						O(), E.current = !0, T.current?.focus({ preventScroll: !0 }), E.current = !1;
+					}
+				})
+			]
+		})
+	});
+}
+function Oe({ container: e, place: n, mode: r, id: i, agent: o, onClose: s }) {
+	let l = [
+		o.model ? t(o.model) : void 0,
+		ee(o.costUsd),
+		c(o.tokens)
+	].filter(Boolean).join(" · "), u = o.status === "failed" ? D(o) : void 0, d = u ? void 0 : o.turn ?? o.events?.at(-1)?.label;
+	return /* @__PURE__ */ (0, k.jsxs)(a, {
+		container: e,
+		side: n.side,
+		align: n.align,
+		sideOffset: 0,
+		avoidCollisions: !1,
+		id: i,
+		"data-agent-metrics": !0,
+		role: "tooltip",
+		tabIndex: 0,
+		onWheel: (e) => e.stopPropagation(),
+		onEscapeKeyDown: (e) => {
+			e.preventDefault(), s();
+		},
+		className: `${r} rounded-xl border border-border bg-card px-3 py-2 text-sm text-foreground shadow-xl`,
+		style: {
+			colorScheme: r,
+			width: "min(320px, calc(100vw - 24px))"
+		},
+		children: [
+			/* @__PURE__ */ (0, k.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ (0, k.jsx)("span", {
+						className: "flex shrink-0",
+						style: { color: p(o.status).color },
+						children: /* @__PURE__ */ (0, k.jsx)(ae, {
+							status: o.status,
+							size: 14
+						})
+					}),
+					/* @__PURE__ */ (0, k.jsx)("strong", {
+						className: "min-w-0 flex-1 truncate",
+						children: o.label
+					}),
+					/* @__PURE__ */ (0, k.jsx)("span", {
+						className: "sr-only",
+						children: p(o.status).label
+					})
+				]
+			}),
+			l && /* @__PURE__ */ (0, k.jsx)("p", {
+				className: "m-0 truncate text-[13px] text-muted-foreground",
+				children: l
+			}),
+			(u || d) && /* @__PURE__ */ (0, k.jsx)("p", {
+				className: "m-0 truncate text-[13px]",
+				style: u ? { color: p("failed").color } : { color: "hsl(var(--muted-foreground))" },
+				title: u ?? d,
+				children: E(u ?? d)
+			})
+		]
+	});
+}
+export { De as AgentGraphCanvas };