@tangle-network/sandbox-ui 7.0.4 → 7.0.6

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

@@ -1,957 +0,0 @@
-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 };