@tangle-network/sandbox-ui 7.0.3 → 7.0.5

package/dist/runtime-viewer/AgentGraphCanvas-P_PFS2Ko-XoCELgxL.js

@@ -0,0 +1,563 @@
+import { i as e } from "./rolldown-runtime-CwxnZyOB.js";
+import { A as t, C as n, Ct as r, D as i, E as a, I as o, It as s, M as c, P as l, S as u, T as d, Vt as f, X as p, _ as ee, a as te, d as m, f as ne, h, i as re, it as ie, k as ae, l as oe, m as se, n as ce, nt as le, p as ue, r as g, s as _, st as de, t as fe, u as pe, ut as me, v, w as he, wt as y, x as b, y as ge } from "./latest-events-wofY6ifW-4IMNEe7c.js";
+// node_modules/.pnpm/@tangle-network+charts@4.0.21_@tangle-network+brand@1.31.3_react@19.3.1__@tangle-networ_60b8ccd982157f40d51e28cd98298320/node_modules/@tangle-network/charts/dist/AgentGraphCanvas-P_PFS2Ko.js
+var x = s(), S = /* @__PURE__ */ e(f(), 1), _e = {
+	agent: g,
+	liveAgent: m,
+	agentFrame: te
+}, ve = { agentMessage: _ }, C = 16, w = 24, T = .8;
+function ye() {
+	let [e, t] = (0, S.useState)(null), n = (0, S.useRef)(null);
+	return [e, (0, S.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 be(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(C - c.x * l, Math.min(i.width - C - (c.x + a) * l, s.x)), d = Math.max(C - c.y * l, Math.min(i.height - C - (c.y + o) * l, s.y));
+	(u !== s.x || d !== s.y || l !== s.zoom) && e.setViewport({
+		x: u,
+		y: d,
+		zoom: l
+	});
+}
+function E({ nodes: e, edges: s, selectedId: c, onSelect: u, direction: f = "TB", className: p, emptyState: te, live: m = !1, renderEventIcon: h, showLatestEvents: ie = !0, now: g }) {
+	let _ = me(g), v = de(), y = (0, S.useId)(), b = (0, S.useRef)(null), E = (0, S.useRef)(!1), [D, O] = (0, S.useState)(null), k = () => O(null), [A, j] = (0, S.useState)(/* @__PURE__ */ new Set()), [Se, M] = (0, S.useState)(0), [N, Ce] = (0, S.useState)(null), P = (0, S.useRef)(null), F = (0, S.useMemo)(() => D && ae(D.anchor, P.current?.querySelector(".ag-graph-viewport") ?? null), [D]), [I, we] = ye(), Te = l(P, e.length > 0), L = I !== null && I.width < 600, R = ge(e, s), z = (0, S.useRef)(R);
+	z.current.key !== R.key && (z.current = R);
+	let B = z.current, Ee = (0, S.useRef)(!1);
+	(0, S.useEffect)(() => {
+		if (Ee.current || !e.length) return;
+		Ee.current = !0;
+		let t = new Set(e.filter((e) => e.status === "done").map((e) => e.id));
+		j(new Set(B.groups.filter((e) => e.memberIds.every((e) => t.has(e))).map((e) => e.id)));
+	}, [B]);
+	let De = `${m}:${B.key}`, Oe = (0, S.useRef)({
+		key: "",
+		size: m ? oe : fe
+	});
+	Oe.current.key !== De && (Oe.current = {
+		key: De,
+		size: m && e.every((e) => [
+			"done",
+			"stopped",
+			"failed"
+		].includes(e.status)) ? {
+			width: 256,
+			height: 88
+		} : m ? oe : fe
+	});
+	let V = Oe.current.size, ke = `${f}:${m}:${B.key}`, H = (0, S.useRef)(null);
+	I && !L && H.current?.key !== ke && (H.current = {
+		key: ke,
+		columns: Math.max(1, Math.min(6, Math.floor((I.width - 32 - (!m && f === "LR" ? V.width + 70 : 0)) / (V.width + 10))))
+	});
+	let U = H.current?.columns ?? 1, W = JSON.stringify([
+		f,
+		m,
+		B.key,
+		U,
+		[...A]
+	]), [Ae, je] = (0, S.useState)(null);
+	(0, S.useEffect)(() => {
+		if (L) return;
+		let e = !0;
+		return (async () => {
+			let t = await n(B, f, U, V, A, m);
+			for (let e = U - 1; f === "TB" && e >= 2 && I && t.width * T > I.width - 32; e--) t = await n(B, f, e, V, A, m);
+			e && je({
+				key: W,
+				layout: t
+			});
+		})(), () => {
+			e = !1;
+		};
+	}, [W, L]);
+	let G = Ae?.key === W ? Ae.layout : null;
+	(0, S.useEffect)(() => {
+		let e = c && B.groupOf.get(c);
+		e && j((t) => {
+			if (!t.has(e)) return t;
+			let n = new Set(t);
+			return n.delete(e), n;
+		});
+	}, [c, B.key]);
+	let K = (0, S.useMemo)(() => new Map(e.map((e) => [e.id, e])), [e]), q = (0, S.useRef)(null), Me = (0, S.useMemo)(() => {
+		if (!G) return [];
+		let e = G.frames.map((e) => ({
+			id: e.group.id,
+			type: "agentFrame",
+			position: {
+				x: e.x,
+				y: e.y
+			},
+			width: e.width,
+			height: e.height,
+			measured: q.current?.getInternalNode(e.group.id)?.measured,
+			zIndex: -1,
+			selectable: !1,
+			focusable: !1,
+			draggable: !1,
+			data: {
+				frame: e,
+				direction: f,
+				groupParents: m,
+				label: K.get(e.group.parentId)?.label ?? "Agent",
+				onToggle: () => {
+					!e.collapsed && c && e.group.memberIds.includes(c) && u?.(e.group.parentId), j((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 B.agentIds) {
+			let n = K.get(e), r = G.positions.get(e);
+			if (!n || !r) continue;
+			let i = c === e, a = m && G.frames.find((t) => t.group.parentId === e), o = a ? a.width - 64 : V.width, s = a ? 64 : V.height, l = q.current?.getInternalNode(e)?.measured;
+			t.push({
+				id: e,
+				type: m ? "liveAgent" : "agent",
+				position: r,
+				width: o,
+				height: s,
+				measured: l?.width === o && l.height === s ? l : void 0,
+				className: `${ce}${a ? " ag-frame-owner" : ""}`,
+				draggable: !1,
+				ariaRole: "button",
+				ariaLabel: ee(n),
+				domAttributes: {
+					"aria-pressed": i,
+					"aria-describedby": D?.id === e ? y : void 0
+				},
+				data: {
+					agent: n,
+					selected: i,
+					direction: f,
+					now: _,
+					onOpen: u ? () => u(n.id) : void 0,
+					renderEventIcon: h
+				}
+			});
+		}
+		return [...e, ...t];
+	}, [
+		G,
+		B,
+		K,
+		c,
+		f,
+		m,
+		V,
+		_,
+		u,
+		h,
+		D
+	]), Ne = (0, S.useMemo)(() => {
+		if (!G) return [];
+		let e = [], n = /* @__PURE__ */ new Set();
+		for (let r of B.spawns) {
+			let i = m && B.groups.find((e) => e.parentId === r.from)?.id || r.from, a = B.groupOf.get(r.to) ?? r.to;
+			if (i === a) continue;
+			let o = `spawn:${i}:${a}`;
+			n.has(o) || (n.add(o), e.push({
+				id: o,
+				source: i,
+				target: a,
+				type: "smoothstep",
+				pathOptions: { borderRadius: 14 },
+				selectable: !1,
+				focusable: !1,
+				style: {
+					stroke: t(void 0),
+					strokeWidth: 1.5
+				}
+			}));
+		}
+		let r = new Set(G.positions.keys()), a = /* @__PURE__ */ new Map();
+		for (let e of s) {
+			if (e.kind === "spawn" || e.from === e.to || !r.has(e.from) || !r.has(e.to) || ![c, D?.id].some((t) => t === e.from || t === e.to)) continue;
+			let t = `${e.kind}:${e.from}:${e.to}`, n = a.get(t), o = (n?.data?.count ?? 0) + Math.max(1, e.count ?? 1), s = ue[e.kind] ?? ue.message;
+			a.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: s
+				},
+				ariaLabel: `${e.kind === "delegation" ? "Delegation" : "Message"} from ${K.get(e.from)?.label ?? e.from} to ${K.get(e.to)?.label ?? e.to}${o > 1 ? `, ${o} times` : ""}`,
+				data: {
+					kind: e.kind,
+					count: o,
+					label: e.label ?? n?.data?.label
+				}
+			});
+		}
+		return [...e, ...a.values()];
+	}, [
+		G,
+		B,
+		s,
+		K,
+		c,
+		D
+	]), [Pe, Fe] = (0, S.useState)(!1), [Ie, Le] = (0, S.useState)(!1), J = (0, S.useRef)(c);
+	J.current = c;
+	let Y = (0, S.useRef)(null);
+	(0, S.useEffect)(() => {
+		L && (q.current = null, Fe(!1), Le(!1), Y.current = null);
+	}, [L]);
+	let Re = G ? `${W}:${G.columns}` : null, ze = `${f}:${B.key}`, Be = G && I ? Math.max(.02, Math.min(1, (I.width - 32) / G.width, (I.height - 32) / G.height)) : .2;
+	(0, S.useEffect)(() => {
+		let e = q.current;
+		if (!Pe || !e || !Re || !I) return;
+		let t = Y.current !== ze, n = !t;
+		if (n && !J.current) return;
+		let r = Y.current !== null && t && v;
+		Y.current = ze;
+		let i = requestAnimationFrame(() => {
+			if (n) be(e, P.current, J.current);
+			else {
+				let t = Math.min(1, Math.max(T, Math.min((I.width - 32) / G.width, (I.height - 32) / G.height))), n = G.width * t, i = G.height * t;
+				e.setViewport({
+					x: n <= I.width - 32 ? (I.width - n) / 2 : C,
+					y: i <= I.height - 32 ? (I.height - i) / 2 : C,
+					zoom: t
+				}, { duration: r ? le("--duration-base", P.current) : 0 });
+			}
+			Le(!0);
+		});
+		return () => cancelAnimationFrame(i);
+	}, [
+		Pe,
+		Re,
+		ze,
+		I,
+		Be,
+		v,
+		c
+	]);
+	let X = (0, S.useCallback)((e) => {
+		K.has(e) && (u?.(e), P.current?.querySelector(`[data-agent-id="${CSS.escape(e)}"]`)?.scrollIntoView({ block: "nearest" }));
+	}, [K, u]), Ve = (0, S.useCallback)((e, t) => X(t.id), [X]), He = (0, S.useCallback)((e) => {
+		if (!(e.target instanceof HTMLElement)) return;
+		let t = e.target.closest(".react-flow__node")?.getAttribute("data-id");
+		if (!t || !K.has(t)) return;
+		if (e.key === "Escape") {
+			e.preventDefault(), e.stopPropagation(), P.current?.focus();
+			return;
+		}
+		if (!e.target.classList.contains("react-flow__node")) return;
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault(), e.stopPropagation(), X(t);
+			return;
+		}
+		let n = G?.positions.get(t), r = {
+			ArrowLeft: [-1, 0],
+			ArrowRight: [1, 0],
+			ArrowUp: [0, -1],
+			ArrowDown: [0, 1]
+		}[e.key], i = e.key === "Home" ? B.agentIds[0] : n && r ? [...G?.positions ?? []].filter(([e, i]) => K.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 = G?.positions.get(i), o = q.current?.getInternalNode(i)?.measured;
+		a && q.current?.setCenter(a.x + (o?.width ?? V.width) / 2, a.y + (o?.height ?? V.height) / 2, { zoom: 1 });
+		let s = () => P.current?.querySelector(`.react-flow__node[data-id="${CSS.escape(i)}"]`), c = s();
+		c ? c.focus() : requestAnimationFrame(() => requestAnimationFrame(() => s()?.focus()));
+	}, [
+		K,
+		X,
+		G,
+		B,
+		V,
+		v
+	]), Ue = (e) => e.status === "needs-you" ? 0 : e.status === "failed" ? 1 : o(e, _) ? 2 : e.status === "waiting" ? 3 : e.status === "running" ? 4 : 5, Z = new Map(s.filter((e) => e.kind === "spawn").map((e) => [e.to, e.from])), We = (e) => {
+		let t = /* @__PURE__ */ new Set([e]), n = 0;
+		for (; Z.has(e) && !t.has(Z.get(e));) e = Z.get(e), t.add(e), n++;
+		return n;
+	}, Q = (0, S.useRef)([]), Ge = new Set(Q.current);
+	Q.current = [...Q.current.filter((e) => K.has(e)), ...e.filter((e) => !Ge.has(e.id)).sort((e, t) => Ue(e) - Ue(t)).map((e) => e.id)];
+	let Ke = Q.current.map((e) => K.get(e));
+	(0, S.useEffect)(() => {
+		let e = Ke.findIndex((e) => e.id === c);
+		e >= 0 && M(Math.floor(e / w));
+	}, [c]), (0, S.useEffect)(() => {
+		if (!L || !c) return;
+		let e = requestAnimationFrame(() => P.current?.querySelector(`[data-agent-id="${CSS.escape(c)}"]`)?.scrollIntoView({ block: "nearest" }));
+		return () => cancelAnimationFrame(e);
+	}, [
+		c,
+		Se,
+		L
+	]);
+	let $ = Math.min(Se * w, Math.max(0, Math.ceil(e.length / w) - 1) * w), qe = /* @__PURE__ */ (0, x.jsx)(se, {
+		nodes: e,
+		now: _,
+		highlight: N,
+		onHighlight: (t) => {
+			if (N === t) {
+				Ce(null);
+				return;
+			}
+			Ce(t);
+			let n = e.filter((e) => t === "quiet" ? o(e, _) : e.status === t).map((e) => e.id), r = new Set(n.flatMap((e) => B.groupOf.get(e) ?? []));
+			r.size && j((e) => [...r].some((t) => e.has(t)) ? new Set([...e].filter((e) => !r.has(e))) : e), requestAnimationFrame(() => requestAnimationFrame(() => {
+				L ? P.current?.querySelector(`[data-agent-id="${CSS.escape(n[0] ?? "")}"]`)?.scrollIntoView({ block: "nearest" }) : q.current?.fitView({
+					nodes: n.map((e) => ({ id: e })),
+					padding: "64px",
+					minZoom: T,
+					maxZoom: 1,
+					duration: v ? le("--duration-base", P.current) : 0
+				});
+			}));
+		}
+	});
+	return e.length === 0 ? /* @__PURE__ */ (0, x.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 ${p ?? ""}`,
+		children: te ?? "No agents yet"
+	}) : /* @__PURE__ */ (0, x.jsx)(r, {
+		anchor: F?.anchor,
+		open: !!D,
+		onOpenChange: (e) => {
+			e || k();
+		},
+		children: /* @__PURE__ */ (0, x.jsxs)("div", {
+			ref: (e) => {
+				P.current = e, we(e);
+			},
+			className: `agent-graph ag-live${m ? "" : " ag-topology"} relative flex flex-col ${p ?? ""}`,
+			tabIndex: -1,
+			onKeyDownCapture: (e) => {
+				e.target instanceof HTMLElement && e.target.closest("[data-agent-metrics]") || (e.key === "Tab" && !e.shiftKey && D ? (e.preventDefault(), document.getElementById(y)?.focus()) : (e.key === "Escape" && k(), He(e)));
+			},
+			onFocusCapture: (e) => {
+				if (!(e.target instanceof HTMLElement) || E.current || e.target.closest("[data-agent-metrics]")) return;
+				if (!e.target.matches(":focus-visible")) {
+					k();
+					return;
+				}
+				let t = e.target.closest(".react-flow__node, [data-agent-id]"), n = t?.dataset.id ?? t?.dataset.agentId;
+				b.current = t ?? null, O(n && K.has(n) ? {
+					id: n,
+					anchor: t
+				} : null);
+			},
+			onBlurCapture: (e) => {
+				!e.currentTarget.contains(e.relatedTarget) && e.relatedTarget?.id !== y && k();
+			},
+			"data-layout": L ? "list" : G && Ie ? "ready" : "pending",
+			"data-highlight": N ?? void 0,
+			"data-columns": G?.columns,
+			children: [
+				qe,
+				ie && m && /* @__PURE__ */ (0, x.jsx)(pe, {
+					agents: e,
+					now: g,
+					live: m,
+					selectedId: c,
+					onSelect: u ? X : void 0
+				}),
+				L ? /* @__PURE__ */ (0, x.jsxs)("ul", {
+					className: "ag-graph-viewport ag-phone-list overflow-auto",
+					"aria-label": "Agents by attention",
+					children: [Ke.slice($, $ + w).map((e) => /* @__PURE__ */ (0, x.jsx)("li", {
+						style: { "--depth": We(e.id) },
+						children: /* @__PURE__ */ (0, x.jsx)("div", {
+							role: "button",
+							tabIndex: 0,
+							"aria-pressed": c === e.id,
+							"aria-label": ee(e),
+							"data-agent-id": e.id,
+							className: "ag-phone-select",
+							onClick: () => X(e.id),
+							onKeyDown: (t) => {
+								(t.key === "Enter" || t.key === " ") && t.target === t.currentTarget && (t.preventDefault(), X(e.id));
+							},
+							children: m ? /* @__PURE__ */ (0, x.jsx)(ne, {
+								agent: e,
+								parentLabel: K.get(Z.get(e.id) ?? "")?.label,
+								selected: c === e.id,
+								now: _,
+								renderEventIcon: h,
+								onOpen: u ? () => X(e.id) : void 0
+							}) : /* @__PURE__ */ (0, x.jsx)(re, {
+								agent: e,
+								parentLabel: K.get(Z.get(e.id) ?? "")?.label,
+								selected: c === e.id,
+								now: _,
+								direction: f,
+								onOpen: u ? () => X(e.id) : void 0
+							})
+						})
+					}, e.id)), e.length > w && /* @__PURE__ */ (0, x.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, x.jsx)("button", {
+								type: "button",
+								className: "rounded px-2 py-1 hover:bg-muted disabled:opacity-40 focus-visible:outline",
+								disabled: !$,
+								onClick: () => {
+									M((e) => e - 1), P.current?.querySelector(".ag-phone-list")?.scrollTo({ top: 0 });
+								},
+								children: "Previous"
+							}),
+							/* @__PURE__ */ (0, x.jsxs)("span", { children: [
+								$ + 1,
+								"–",
+								Math.min(e.length, $ + w),
+								" of ",
+								e.length
+							] }),
+							/* @__PURE__ */ (0, x.jsx)("button", {
+								type: "button",
+								className: "rounded px-2 py-1 hover:bg-muted disabled:opacity-40 focus-visible:outline",
+								disabled: $ + w >= e.length,
+								onClick: () => {
+									M((e) => e + 1), P.current?.querySelector(".ag-phone-list")?.scrollTo({ top: 0 });
+								},
+								children: "Next"
+							})
+						]
+					})]
+				}) : /* @__PURE__ */ (0, x.jsx)("div", {
+					className: "ag-graph-viewport min-h-0 flex-1",
+					style: { opacity: +!!Ie },
+					children: /* @__PURE__ */ (0, x.jsxs)(a, {
+						nodes: Me,
+						edges: Ne,
+						nodeTypes: _e,
+						edgeTypes: ve,
+						colorMode: Te,
+						onInit: (e) => {
+							q.current = e, Fe(!0);
+						},
+						onNodeClick: Ve,
+						onNodeMouseEnter: (e, t) => {
+							b.current = e.target.closest(".react-flow__node"), b.current && O({
+								id: t.id,
+								anchor: b.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: Be,
+						maxZoom: 1.75,
+						"aria-label": "Agent topology",
+						children: [/* @__PURE__ */ (0, x.jsx)(he, {
+							bgColor: "var(--bg-root)",
+							gap: 16,
+							size: 1,
+							color: "hsl(var(--foreground) / 0.06)"
+						}), /* @__PURE__ */ (0, x.jsx)(d, {
+							showInteractive: !1,
+							position: "bottom-right",
+							fitViewOptions: {
+								padding: `${C}px`,
+								minZoom: Be,
+								maxZoom: 1
+							}
+						})]
+					})
+				}),
+				D && F && K.has(D.id) && /* @__PURE__ */ (0, x.jsx)(xe, {
+					container: P.current,
+					place: F,
+					mode: Te,
+					id: y,
+					agent: K.get(D.id),
+					onClose: () => {
+						k(), E.current = !0, b.current?.focus({ preventScroll: !0 }), E.current = !1;
+					}
+				})
+			]
+		})
+	});
+}
+function xe({ container: e, place: t, mode: n, id: r, agent: i, onClose: a }) {
+	let o = [
+		i.model ? p(i.model) : void 0,
+		u(i.costUsd),
+		c(i.tokens)
+	].filter(Boolean).join(" · "), s = i.status === "failed" ? b(i) : void 0, l = s ? void 0 : i.turn ?? i.events?.at(-1)?.label;
+	return /* @__PURE__ */ (0, x.jsxs)(y, {
+		container: e,
+		side: t.side,
+		align: t.align,
+		sideOffset: 0,
+		avoidCollisions: !1,
+		id: r,
+		"data-agent-metrics": !0,
+		role: "tooltip",
+		tabIndex: 0,
+		onWheel: (e) => e.stopPropagation(),
+		onEscapeKeyDown: (e) => {
+			e.preventDefault(), a();
+		},
+		className: `${n} rounded-xl border border-border bg-card px-3 py-2 text-sm text-foreground shadow-xl`,
+		style: {
+			colorScheme: n,
+			width: "min(320px, calc(100vw - 24px))"
+		},
+		children: [
+			/* @__PURE__ */ (0, x.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ (0, x.jsx)("span", {
+						className: "flex shrink-0",
+						style: { color: v(i.status).color },
+						children: /* @__PURE__ */ (0, x.jsx)(h, {
+							status: i.status,
+							size: 14
+						})
+					}),
+					/* @__PURE__ */ (0, x.jsx)("strong", {
+						className: "min-w-0 flex-1 truncate",
+						children: i.label
+					}),
+					/* @__PURE__ */ (0, x.jsx)("span", {
+						className: "sr-only",
+						children: v(i.status).label
+					})
+				]
+			}),
+			o && /* @__PURE__ */ (0, x.jsx)("p", {
+				className: "m-0 truncate text-[13px] text-muted-foreground",
+				children: o
+			}),
+			(s || l) && /* @__PURE__ */ (0, x.jsx)("p", {
+				className: "m-0 truncate text-[13px]",
+				style: s ? { color: v("failed").color } : { color: "hsl(var(--muted-foreground))" },
+				title: s ?? l,
+				children: ie(s ?? l)
+			})
+		]
+	});
+}
+export { E as AgentGraphCanvas };