@tangle-network/sandbox-ui 2.0.20 → 2.0.22

package/dist/runtime-viewer/{AgentGraphCanvas-B74GN1o6-DC3EH_ss.js → AgentGraphCanvas-DDvaU9Rg-DlNZxJ20.js}

@@ -1,7 +1,7 @@
 import { i as e, t } from "./rolldown-runtime-CwxnZyOB.js";
-import { A as n, C as r, D as i, E as a, I as o, O as s, Q as c, T as l, _ as u, a as d, at as f, b as p, c as m, d as h, f as g, g as _, h as v, i as y, k as b, l as x, n as S, ot as C, p as w, s as T, st as E, t as D, v as O, w as k, y as A } from "./latest-events-iiWwpIck-BTK0vSlR.js";
-// node_modules/.pnpm/@tangle-network+charts@2.0.17_@xyflow+react@12.12.0_@types+react-dom@19.3.0_@types+reac_8e3190d6d56297d136c67efaea3d6d83/node_modules/@tangle-network/charts/dist/motion-DILryczn.js
-var j = "[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", M = /* @__PURE__ */ e(E(), 1), N = /* @__PURE__ */ e(C()), P = f();
+import { G as n, K as r, O as i, S as a, T as o, W as s, X as c, Y as l, Z as u, _ as d, a as f, b as p, c as m, ct as h, d as g, f as _, g as v, h as y, i as b, j as x, l as S, lt as C, m as w, n as T, p as E, s as D, st as O, t as k, x as A } from "./latest-events-CabhXynX-Dp_vs0Px.js";
+// node_modules/.pnpm/@tangle-network+charts@3.0.3_@tangle-network+brand@1.31.3_react@19.3.1__@xyflow+react@1_0426ef703f5a4daff255264764f45251/node_modules/@tangle-network/charts/dist/motion-DILryczn.js
+var j = "[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", M = /* @__PURE__ */ e(C(), 1), N = /* @__PURE__ */ e(h()), P = O();
 function F(e) {
 	if (typeof e == "string" || typeof e == "number") return "" + e;
 	let t = "";
@@ -4093,7 +4093,7 @@ function lc({ domNode: e, nodeId: t, getStoreItems: n, onChange: r, onEnd: i })
 }
 // node_modules/.pnpm/use-sync-external-store@1.7.0_react@19.3.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
 var uc = /* @__PURE__ */ t(((e) => {
-	var t = E();
+	var t = C();
 	function n(e, t) {
 		return e === t && (e !== 0 || 1 / e == 1 / t) || e !== e && t !== t;
 	}
@@ -4133,7 +4133,7 @@ var uc = /* @__PURE__ */ t(((e) => {
 })), dc = /* @__PURE__ */ t(((e, t) => {
 	t.exports = uc();
 })), fc = /* @__PURE__ */ t(((e) => {
-	var t = E(), n = dc();
+	var t = C(), n = dc();
 	function r(e, t) {
 		return e === t && (e !== 0 || 1 / e == 1 / t) || e !== e && t !== t;
 	}
@@ -7582,7 +7582,7 @@ function mf({ nodeId: e, position: t, variant: n = Qs.Handle, className: r, styl
 	});
 }
 (0, M.memo)(mf);
-// node_modules/.pnpm/@tangle-network+charts@2.0.17_@xyflow+react@12.12.0_@types+react-dom@19.3.0_@types+reac_8e3190d6d56297d136c67efaea3d6d83/node_modules/@tangle-network/charts/dist/AgentGraphCanvas-B74GN1o6.js
+// node_modules/.pnpm/@tangle-network+charts@3.0.3_@tangle-network+brand@1.31.3_react@19.3.1__@xyflow+react@1_0426ef703f5a4daff255264764f45251/node_modules/@tangle-network/charts/dist/AgentGraphCanvas-DDvaU9Rg.js
 var hf = {
 	name: "chevron-down",
 	size: 24,
@@ -7592,9 +7592,9 @@ var hf = {
 	}]]
 };
 hf.node;
-var gf = o(hf);
+var gf = x(hf);
 function _f(e) {
-	let t = c(e), n = e === "needs-you" ? "waiting" : e === "waiting" || e === "idle" || e === "unknown" ? "queued" : e === "stopped" ? "succeeded" : e;
+	let t = s(e), n = e === "needs-you" ? "waiting" : e === "waiting" || e === "idle" || e === "unknown" ? "queued" : e === "stopped" ? "succeeded" : e;
 	return {
 		...t,
 		color: `var(${t.token})`,
@@ -7606,9 +7606,9 @@ function vf({ status: e, size: t }) {
 		"aria-hidden": !0,
 		"data-motion": "essential",
 		className: "ag-running-dot",
-		style: _,
-		onAnimationStart: k
-	}) : /* @__PURE__ */ (0, P.jsx)(n, {
+		style: i,
+		onAnimationStart: n
+	}) : /* @__PURE__ */ (0, P.jsx)(a, {
 		status: e,
 		size: t,
 		"aria-hidden": !0
@@ -7618,10 +7618,10 @@ function yf(e) {
 	return e === "needs-you" || e === "failed" ? {
 		borderColor: _f(e).color,
 		borderWidth: e === "needs-you" ? 1.5 : 1
-	} : { borderColor: h };
+	} : { borderColor: g };
 }
 function bf(e) {
-	let t = O(e.costUsd ?? void 0), n = p(e.tokens);
+	let t = y(e.costUsd ?? void 0), n = d(e.tokens);
 	return [
 		e.label,
 		e.role,
@@ -7648,31 +7648,28 @@ function Cf({ direction: e, source: t = !0 }) {
 		className: Sf
 	})] });
 }
-function wf({ agent: e, selected: t, direction: n, now: r, onOpen: i, parentLabel: a, handles: o = !1 }) {
-	let s = b(r), c = v(e, s), l = _f(e.status);
+function wf({ agent: e, selected: t, direction: n, now: r, onOpen: i, parentLabel: a, handles: s = !1 }) {
+	let c = u(r), l = o(e, c), f = _f(e.status);
 	return /* @__PURE__ */ (0, P.jsxs)("div", {
 		"data-status": e.status,
-		"data-activity": c ? "quiet" : void 0,
+		"data-activity": l ? "quiet" : void 0,
 		"data-selected": t || void 0,
 		title: bf(e),
 		className: `ag-agent-card relative flex h-full w-full flex-col gap-0.5 rounded-[var(--radius-card)] border bg-card px-3 py-2 text-left ${j}`,
 		style: {
-			boxShadow: g,
+			boxShadow: _,
 			...yf(e.status),
-			...t ? w : {}
+			...t ? E : {}
 		},
 		children: [
-			o && /* @__PURE__ */ (0, P.jsx)(Cf, { direction: n }),
+			s && /* @__PURE__ */ (0, P.jsx)(Cf, { direction: n }),
 			/* @__PURE__ */ (0, P.jsxs)("div", {
 				className: "flex min-w-0 items-center gap-2",
 				children: [
-					/* @__PURE__ */ (0, P.jsx)("span", {
-						className: "grayscale hover:grayscale-0",
-						children: /* @__PURE__ */ (0, P.jsx)(S, {
-							agent: e,
-							layout: "tree",
-							size: 18
-						})
+					/* @__PURE__ */ (0, P.jsx)(T, {
+						agent: e,
+						layout: "tree",
+						size: 24
 					}),
 					/* @__PURE__ */ (0, P.jsxs)("span", {
 						className: "min-w-0 flex-1 truncate text-sm font-semibold leading-[18px]",
@@ -7682,34 +7679,49 @@ function wf({ agent: e, selected: t, direction: n, now: r, onOpen: i, parentLabe
 						}), e.label]
 					}),
 					/* @__PURE__ */ (0, P.jsx)("span", {
-						className: "text-xs text-muted-foreground tabular-nums",
+						className: "text-[13px] text-muted-foreground tabular-nums",
 						title: e.costUsd == null ? "Cost not reported" : "Cost",
-						children: O(e.costUsd ?? void 0) ?? "—"
+						children: y(e.costUsd ?? void 0) ?? "—"
 					})
 				]
 			}),
 			/* @__PURE__ */ (0, P.jsx)("p", {
-				className: "m-0 line-clamp-2 min-h-4 text-xs text-foreground leading-4",
-				children: (e.status === "failed" ? e.result ?? e.turn : e.turn) || "—"
+				"data-agent-identity": "",
+				className: "m-0 truncate text-[13px] leading-[18px] text-muted-foreground",
+				title: [e.harness, e.model].filter(Boolean).join(" · "),
+				children: [e.harness, e.model ? p(e.model) : null].filter(Boolean).join(" · ") || "Identity not recorded"
+			}),
+			e.status === "failed" && /* @__PURE__ */ (0, P.jsx)("p", {
+				className: "m-0 line-clamp-2 text-[13px] leading-4",
+				children: e.result ?? e.turn ?? "Failure cause not recorded"
 			}),
 			/* @__PURE__ */ (0, P.jsxs)("div", {
-				className: "mt-auto flex items-center justify-between gap-1 text-xs",
-				style: { color: c ? "var(--surface-warning-text)" : l.color },
-				children: [/* @__PURE__ */ (0, P.jsxs)("span", {
-					className: "flex items-center gap-1",
-					children: [/* @__PURE__ */ (0, P.jsx)(vf, {
-						status: e.status,
-						size: 16
-					}), c?.label ?? l.label]
-				}), e.status === "needs-you" && /* @__PURE__ */ (0, P.jsx)("button", {
-					type: "button",
-					className: "ag-live-respond nodrag nopan",
-					disabled: !i,
-					onClick: (e) => {
-						e.stopPropagation(), i?.();
-					},
-					children: "Respond"
-				})]
+				className: "mt-auto flex items-center justify-between gap-1 text-[13px]",
+				style: { color: l ? "var(--surface-warning-text)" : f.color },
+				children: [
+					/* @__PURE__ */ (0, P.jsxs)("span", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ (0, P.jsx)(vf, {
+							status: e.status,
+							size: 16
+						}), l?.label ?? f.label]
+					}),
+					/* @__PURE__ */ (0, P.jsx)("span", {
+						"data-agent-tokens": "",
+						title: e.tokens == null ? "Tokens not recorded" : "Tokens",
+						className: "text-muted-foreground tabular-nums whitespace-nowrap",
+						children: d(e.tokens) ?? "—"
+					}),
+					e.status === "needs-you" && /* @__PURE__ */ (0, P.jsx)("button", {
+						type: "button",
+						className: "ag-live-respond nodrag nopan",
+						disabled: !i,
+						onClick: (e) => {
+							e.stopPropagation(), i?.();
+						},
+						children: "Respond"
+					})
+				]
 			})
 		]
 	});
@@ -7723,24 +7735,28 @@ function Tf({ data: e }) {
 function Ef({ data: e }) {
 	let { frame: t, direction: n } = e;
 	return /* @__PURE__ */ (0, P.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__ */ (0, P.jsx)(Cf, { direction: n }), /* @__PURE__ */ (0, P.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 ${e.groupParents ? "right-3 w-8 flex-col" : "left-3 right-3 justify-start"}`,
 			"aria-label": `${t.collapsed ? "Expand" : "Collapse"} ${e.label} team`,
 			"aria-expanded": !t.collapsed,
 			title: `${e.label} · ${t.group.memberIds.length} agents`,
 			onClick: (t) => {
 				t.stopPropagation(), e.onToggle();
 			},
-			children: [/* @__PURE__ */ (0, P.jsx)(gf, {
-				size: 16,
-				className: t.collapsed ? "-rotate-90" : void 0
-			}), /* @__PURE__ */ (0, P.jsx)("span", { children: t.group.memberIds.length })]
+			children: [
+				/* @__PURE__ */ (0, P.jsx)(gf, {
+					size: 16,
+					className: t.collapsed ? "-rotate-90" : void 0
+				}),
+				!e.groupParents && /* @__PURE__ */ (0, P.jsxs)("strong", { children: [e.label, " team"] }),
+				/* @__PURE__ */ (0, P.jsx)("span", { children: t.group.memberIds.length })
+			]
 		})]
 	});
 }
@@ -7815,44 +7831,44 @@ var Mf = /* @__PURE__ */ new Set(["succeeded", "stopped"]);
 function Nf(e) {
 	return e.length <= 52 ? e : `${e.slice(0, 32)} … ${e.slice(-17)}`;
 }
-function Pf({ agent: e, selected: t, direction: n = "TB", now: i, handles: o = !1, onOpen: s, parentLabel: c, renderEventIcon: l }) {
-	let u = b(i), d = (0, M.useRef)(null);
-	a(d, e.status);
-	let f = Mf.has(e.status), p = e.status === "failed", m = v(e, u), h = _f(e.status), _ = [e.model ? r(e.model) : void 0, e.effort].filter(Boolean).join(" · "), y = (e.events ?? []).slice(-3), x = Number.isFinite(e.costUsd) ? O(e.costUsd) : void 0, C = [
-		x,
-		!p && e.startedAt != null ? `${A(e.startedAt, u, !1)} elapsed` : void 0,
+function Pf({ agent: e, selected: t, direction: n = "TB", now: r, handles: i = !1, onOpen: a, parentLabel: s, renderEventIcon: c }) {
+	let d = u(r), f = (0, M.useRef)(null);
+	l(f, e.status);
+	let m = Mf.has(e.status), h = e.status === "failed", g = o(e, d), b = _f(e.status), x = [e.model ? p(e.model) : void 0, e.effort].filter(Boolean).join(" · "), S = (e.events ?? []).slice(-3), C = Number.isFinite(e.costUsd) ? y(e.costUsd) : void 0, w = [
+		C,
+		!h && e.startedAt != null ? `${v(e.startedAt, d, !1)} elapsed` : void 0,
 		Number.isFinite(e.commits) ? `${e.commits} ${e.commits === 1 ? "commit" : "commits"}` : void 0
 	].filter(Boolean).join(" · ") || "—";
 	return /* @__PURE__ */ (0, P.jsxs)("div", {
 		className: "ag-live-slot",
-		children: [o && /* @__PURE__ */ (0, P.jsx)(Cf, { direction: n }), /* @__PURE__ */ (0, P.jsxs)("div", {
-			ref: d,
-			className: `ag-live-card${f ? " ag-live-chip" : ""}`,
+		children: [i && /* @__PURE__ */ (0, P.jsx)(Cf, { direction: n }), /* @__PURE__ */ (0, P.jsxs)("div", {
+			ref: f,
+			className: `ag-live-card${m ? " ag-live-chip" : ""}`,
 			"data-status": e.status,
-			"data-sparse": y.length === 0 || void 0,
-			"data-activity": m ? "quiet" : e.activity ?? void 0,
+			"data-sparse": S.length === 0 || void 0,
+			"data-activity": g ? "quiet" : e.activity ?? void 0,
 			"data-selected": t || void 0,
 			title: bf(e),
 			style: {
-				boxShadow: g,
+				boxShadow: _,
 				...yf(e.status),
-				...t ? w : {},
-				"--ag-status": h.color
+				...t ? E : {},
+				"--ag-status": b.color
 			},
 			children: [
-				f && /* @__PURE__ */ (0, P.jsxs)(P.Fragment, { children: [/* @__PURE__ */ (0, P.jsx)(vf, {
+				m && /* @__PURE__ */ (0, P.jsxs)(P.Fragment, { children: [/* @__PURE__ */ (0, P.jsx)(vf, {
 					status: e.status,
 					size: 16
 				}), /* @__PURE__ */ (0, P.jsx)("span", {
 					className: "ag-live-chip-status",
-					children: h.label
+					children: b.label
 				})] }),
 				/* @__PURE__ */ (0, P.jsxs)("div", {
 					className: "ag-live-head",
 					children: [
 						/* @__PURE__ */ (0, P.jsx)("span", {
 							className: "grayscale hover:grayscale-0",
-							children: /* @__PURE__ */ (0, P.jsx)(S, {
+							children: /* @__PURE__ */ (0, P.jsx)(T, {
 								agent: e,
 								layout: "tree",
 								size: 18
@@ -7862,76 +7878,76 @@ function Pf({ agent: e, selected: t, direction: n = "TB", now: i, handles: o = !
 							className: "ag-live-names",
 							children: [/* @__PURE__ */ (0, P.jsxs)("span", {
 								className: "ag-live-name",
-								children: [c && /* @__PURE__ */ (0, P.jsxs)("span", {
+								children: [s && /* @__PURE__ */ (0, P.jsxs)("span", {
 									className: "ag-parent-label",
-									children: [c, " / "]
+									children: [s, " / "]
 								}), e.label]
-							}), !f && _ && /* @__PURE__ */ (0, P.jsx)("span", {
+							}), !m && x && /* @__PURE__ */ (0, P.jsx)("span", {
 								className: "ag-live-meta",
-								children: _
+								children: x
 							})]
 						}),
 						/* @__PURE__ */ (0, P.jsxs)("div", {
 							className: "ag-live-stats",
-							children: [p && s ? /* @__PURE__ */ (0, P.jsxs)("button", {
+							children: [h && a ? /* @__PURE__ */ (0, P.jsxs)("button", {
 								type: "button",
 								className: "ag-live-pill ag-live-inspect nodrag nopan",
 								onClick: (e) => {
-									e.stopPropagation(), s();
+									e.stopPropagation(), a();
 								},
 								children: [
 									/* @__PURE__ */ (0, P.jsx)(vf, {
 										status: e.status,
 										size: 16
 									}),
-									h.label,
+									b.label,
 									/* @__PURE__ */ (0, P.jsx)("span", { children: "Inspect" })
 								]
 							}) : /* @__PURE__ */ (0, P.jsxs)("span", {
-								className: `ag-live-pill${m ? " ag-live-quiet" : ""}`,
+								className: `ag-live-pill${g ? " ag-live-quiet" : ""}`,
 								children: [/* @__PURE__ */ (0, P.jsx)(vf, {
 									status: e.status,
 									size: 16
-								}), m?.label ?? h.label]
-							}), !f && /* @__PURE__ */ (0, P.jsx)("span", {
+								}), g?.label ?? b.label]
+							}), !m && /* @__PURE__ */ (0, P.jsx)("span", {
 								className: "ag-live-accounting",
-								title: C,
-								children: C
+								title: w,
+								children: w
 							})]
 						})
 					]
 				}),
-				f ? /* @__PURE__ */ (0, P.jsxs)(P.Fragment, { children: [/* @__PURE__ */ (0, P.jsx)("span", {
+				m ? /* @__PURE__ */ (0, P.jsxs)(P.Fragment, { children: [/* @__PURE__ */ (0, P.jsx)("span", {
 					className: "ag-live-chip-result",
-					children: e.result ?? e.turn ?? h.label
-				}), x && /* @__PURE__ */ (0, P.jsx)("span", {
+					children: e.result ?? e.turn ?? b.label
+				}), C && /* @__PURE__ */ (0, P.jsx)("span", {
 					className: "ag-live-chip-cost",
 					title: "Cost",
-					children: x
+					children: C
 				})] }) : /* @__PURE__ */ (0, P.jsxs)(P.Fragment, { children: [/* @__PURE__ */ (0, P.jsxs)("div", {
 					className: "ag-live-thinking-row",
 					children: [/* @__PURE__ */ (0, P.jsx)("p", {
-						className: `ag-live-thinking${p ? " ag-live-failure" : ""}`,
-						children: p ? e.result ?? y.at(-1)?.label ?? e.turn ?? h.label : e.turn || "—"
+						className: `ag-live-thinking${h ? " ag-live-failure" : ""}`,
+						children: h ? e.result ?? S.at(-1)?.label ?? e.turn ?? b.label : e.turn || "—"
 					}), e.status === "needs-you" && /* @__PURE__ */ (0, P.jsx)("button", {
 						type: "button",
 						className: "ag-live-respond nodrag nopan",
-						disabled: !s,
-						title: s ? void 0 : "Responses unavailable in this view",
+						disabled: !a,
+						title: a ? void 0 : "Responses unavailable in this view",
 						onClick: (e) => {
-							e.stopPropagation(), s?.();
+							e.stopPropagation(), a?.();
 						},
 						children: "Respond"
 					})]
-				}), y.length > 0 && /* @__PURE__ */ (0, P.jsx)("div", {
+				}), S.length > 0 && /* @__PURE__ */ (0, P.jsx)("div", {
 					className: "ag-live-events-clip",
 					children: /* @__PURE__ */ (0, P.jsx)("ol", {
 						className: "ag-live-events",
 						"aria-label": "Latest events",
-						children: y.map((e) => /* @__PURE__ */ (0, P.jsxs)("li", {
+						children: S.map((e) => /* @__PURE__ */ (0, P.jsxs)("li", {
 							title: e.label,
 							children: [
-								l?.(e) ?? /* @__PURE__ */ (0, P.jsx)(T, {
+								c?.(e) ?? /* @__PURE__ */ (0, P.jsx)(D, {
 									size: 12,
 									strokeWidth: 1.75,
 									"aria-hidden": !0
@@ -7943,7 +7959,7 @@ function Pf({ agent: e, selected: t, direction: n = "TB", now: i, handles: o = !
 								/* @__PURE__ */ (0, P.jsxs)("time", {
 									className: "ag-live-event-at",
 									dateTime: Number.isFinite(e.at) ? new Date(e.at).toISOString() : void 0,
-									children: [p && e.at != null ? "at " : "", A(e.at, u, p)]
+									children: [h && e.at != null ? "at " : "", v(e.at, d, h)]
 								})
 							]
 						}, e.id))
@@ -7988,23 +8004,23 @@ function Vf(e, t, n) {
 		zoom: l
 	});
 }
-function Hf({ nodes: e, edges: t, selectedId: n, onSelect: r, direction: a = "TB", className: o, emptyState: c, live: f = !1, renderEventIcon: p, showLatestEvents: h = !0, now: g }) {
-	let _ = f ? y : D, S = b(g), C = s(), w = (0, M.useId)(), T = (0, M.useRef)(void 0), E = (0, M.useRef)(null), O = (0, M.useRef)(!1), k = () => clearTimeout(T.current), A = () => {
-		k(), F(null);
+function Hf({ nodes: e, edges: t, selectedId: n, onSelect: i, direction: a = "TB", className: s, emptyState: l, live: d = !1, renderEventIcon: p, showLatestEvents: h = !0, now: g }) {
+	let _ = d ? b : k, v = u(g), y = c(), x = (0, M.useId)(), C = (0, M.useRef)(void 0), T = (0, M.useRef)(null), E = (0, M.useRef)(!1), D = () => clearTimeout(C.current), O = () => {
+		D(), F(null);
 	}, j = () => {
-		k(), T.current = setTimeout(() => F(null), l("--duration-fast", B.current));
+		D(), C.current = setTimeout(() => F(null), r("--duration-fast", B.current));
 	};
-	(0, M.useEffect)(() => () => clearTimeout(T.current), []);
-	let [N, F] = (0, M.useState)(null), [I, L] = (0, M.useState)(/* @__PURE__ */ new Set()), [R, z] = (0, M.useState)(0), B = (0, M.useRef)(null), [V, H] = Bf(), U = i(B, e.length > 0), W = V !== null && V.width < 600, G = m(e, t), ee = (0, M.useRef)(G);
+	(0, M.useEffect)(() => () => clearTimeout(C.current), []);
+	let [N, F] = (0, M.useState)(null), [I, L] = (0, M.useState)(/* @__PURE__ */ new Set()), [R, z] = (0, M.useState)(0), B = (0, M.useRef)(null), [V, H] = Bf(), U = A(B, e.length > 0), W = V !== null && V.width < 600, G = m(e, t), ee = (0, M.useRef)(G);
 	ee.current.key !== G.key && (ee.current = G);
-	let K = ee.current, te = `${a}:${f}:${K.key}`, ne = (0, M.useRef)(null);
+	let K = ee.current, te = `${a}:${d}:${K.key}`, ne = (0, M.useRef)(null);
 	V && !W && ne.current?.key !== te && (ne.current = {
 		key: te,
-		columns: Math.max(1, Math.min(6, Math.floor((V.width - 32) / (_.width + 10))))
+		columns: Math.max(1, Math.min(6, Math.floor((V.width - 32 - (!d && a === "LR" ? _.width + 70 : 0)) / (_.width + 10))))
 	});
 	let re = ne.current?.columns ?? 1, ie = JSON.stringify([
 		a,
-		f,
+		d,
 		K.key,
 		re,
 		[...I]
@@ -8012,7 +8028,7 @@ function Hf({ nodes: e, edges: t, selectedId: n, onSelect: r, direction: a = "TB
 	(0, M.useEffect)(() => {
 		if (W) return;
 		let e = !0;
-		return x(K, a, re, _, I).then((t) => {
+		return S(K, a, re, _, I, d).then((t) => {
 			e && oe({
 				key: ie,
 				layout: t
@@ -8049,9 +8065,10 @@ function Hf({ nodes: e, edges: t, selectedId: n, onSelect: r, direction: a = "TB
 			data: {
 				frame: e,
 				direction: a,
+				groupParents: d,
 				label: J.get(e.group.parentId)?.label ?? "Agent",
 				onToggle: () => {
-					!e.collapsed && n && e.group.memberIds.includes(n) && r?.(e.group.parentId), L((t) => {
+					!e.collapsed && n && e.group.memberIds.includes(n) && i?.(e.group.parentId), L((t) => {
 						let n = new Set(t);
 						return n.has(e.group.id) ? n.delete(e.group.id) : n.add(e.group.id), n;
 					});
@@ -8059,30 +8076,30 @@ function Hf({ nodes: e, edges: t, selectedId: n, onSelect: r, direction: a = "TB
 			}
 		})), t = [];
 		for (let e of K.agentIds) {
-			let i = J.get(e), o = q.positions.get(e);
-			if (!i || !o) continue;
-			let s = n === e, c = q.frames.find((t) => t.group.parentId === e), l = c ? c.width - 64 : _.width, u = c ? 64 : _.height, d = se.current?.getInternalNode(e)?.measured;
+			let r = J.get(e), o = q.positions.get(e);
+			if (!r || !o) continue;
+			let s = n === e, c = d && q.frames.find((t) => t.group.parentId === e), l = c ? c.width - 64 : _.width, u = c ? 64 : _.height, f = se.current?.getInternalNode(e)?.measured;
 			t.push({
 				id: e,
-				type: f ? "liveAgent" : "agent",
+				type: d ? "liveAgent" : "agent",
 				position: o,
 				width: l,
 				height: u,
-				measured: d?.width === l && d.height === u ? d : void 0,
+				measured: f?.width === l && f.height === u ? f : void 0,
 				className: `${xf}${c ? " ag-frame-owner" : ""}`,
 				draggable: !1,
 				ariaRole: "button",
-				ariaLabel: bf(i),
+				ariaLabel: bf(r),
 				domAttributes: {
 					"aria-pressed": s,
-					"aria-describedby": N?.id === e ? w : void 0
+					"aria-describedby": N?.id === e ? x : void 0
 				},
 				data: {
-					agent: i,
+					agent: r,
 					selected: s,
 					direction: a,
-					now: S,
-					onOpen: r ? () => r(i.id) : void 0,
+					now: v,
+					onOpen: i ? () => i(r.id) : void 0,
 					renderEventIcon: p
 				}
 			});
@@ -8094,17 +8111,17 @@ function Hf({ nodes: e, edges: t, selectedId: n, onSelect: r, direction: a = "TB
 		J,
 		n,
 		a,
-		f,
+		d,
 		_,
-		S,
-		r,
+		v,
+		i,
 		p,
 		N
 	]), le = (0, M.useMemo)(() => {
 		if (!q) return [];
 		let e = [], r = /* @__PURE__ */ new Set();
 		for (let t of K.spawns) {
-			let n = K.groups.find((e) => e.parentId === t.from)?.id ?? t.from, i = K.groupOf.get(t.to) ?? t.to;
+			let n = d && K.groups.find((e) => e.parentId === t.from)?.id || t.from, i = K.groupOf.get(t.to) ?? t.to;
 			if (n === i) continue;
 			let a = `spawn:${n}:${i}`;
 			r.has(a) || (r.add(a), e.push({
@@ -8116,7 +8133,7 @@ function Hf({ nodes: e, edges: t, selectedId: n, onSelect: r, direction: a = "TB
 				selectable: !1,
 				focusable: !1,
 				style: {
-					stroke: u(void 0),
+					stroke: w(void 0),
 					strokeWidth: 1.5
 				}
 			}));
@@ -8161,39 +8178,39 @@ function Hf({ nodes: e, edges: t, selectedId: n, onSelect: r, direction: a = "TB
 	(0, M.useEffect)(() => {
 		W && (se.current = null, de(!1), pe(!1), he.current = null);
 	}, [W]);
-	let ge = q ? `${ie}:${q.columns}` : null, _e = `${a}:${K.key}`, ve = q && V ? Math.max(.02, Math.min(.2, (V.width - 32) / q.width, (V.height - 32) / q.height)) : .2;
+	let ge = q ? `${ie}:${q.columns}` : null, _e = `${a}:${K.key}`, ve = d ? q && V ? Math.max(.02, Math.min(.2, (V.width - 32) / q.width, (V.height - 32) / q.height)) : .2 : 1;
 	(0, M.useEffect)(() => {
 		let e = se.current;
 		if (!ue || !e || !ge || !V) return;
 		let t = he.current !== _e, n = !t;
 		if (n && !me.current) return;
-		let r = he.current !== null && t && C;
+		let i = he.current !== null && t && y;
 		he.current = _e;
-		let i = requestAnimationFrame(() => {
+		let a = requestAnimationFrame(() => {
 			if (n) Vf(e, B.current, me.current);
 			else {
-				let t = me.current ?? K.agentIds[0], n = q?.positions.get(t), i = e.getInternalNode(t)?.width ?? _.width, a = q.width + 32 <= V.width ? (V.width - q.width) / 2 : n ? Math.max(Rf - n.x, V.width / 2 - n.x - i / 2) : Rf, o = q.height + 32 <= V.height ? Rf : Rf - (n?.y ?? 0);
+				let t = me.current ?? K.agentIds[0], n = q?.positions.get(t), a = e.getInternalNode(t)?.width ?? _.width, o = q.width + 32 <= V.width ? (V.width - q.width) / 2 : n ? Math.max(Rf - n.x, V.width / 2 - n.x - a / 2) : Rf, s = q.height + 32 <= V.height ? Rf : Rf - (n?.y ?? 0);
 				e.setViewport({
-					x: a,
-					y: o,
+					x: o,
+					y: s,
 					zoom: 1
-				}, { duration: r ? l("--duration-base", B.current) : 0 });
+				}, { duration: i ? r("--duration-base", B.current) : 0 });
 			}
 			pe(!0);
 		});
-		return () => cancelAnimationFrame(i);
+		return () => cancelAnimationFrame(a);
 	}, [
 		ue,
 		ge,
 		_e,
 		V,
 		ve,
-		C,
+		y,
 		n
 	]);
 	let Y = (0, M.useCallback)((e) => {
-		J.has(e) && (r?.(e), B.current?.querySelector(`[data-agent-id="${CSS.escape(e)}"]`)?.scrollIntoView({ block: "nearest" }));
-	}, [J, r]), ye = (0, M.useCallback)((e, t) => Y(t.id), [Y]), be = (0, M.useCallback)((e) => {
+		J.has(e) && (i?.(e), B.current?.querySelector(`[data-agent-id="${CSS.escape(e)}"]`)?.scrollIntoView({ block: "nearest" }));
+	}, [J, i]), ye = (0, M.useCallback)((e, t) => Y(t.id), [Y]), be = (0, M.useCallback)((e) => {
 		if (!(e.target instanceof HTMLElement)) return;
 		let t = e.target.closest(".react-flow__node")?.getAttribute("data-id");
 		if (!t || !J.has(t)) return;
@@ -8224,8 +8241,8 @@ function Hf({ nodes: e, edges: t, selectedId: n, onSelect: r, direction: a = "TB
 		q,
 		K,
 		_,
-		C
-	]), xe = (e) => e.status === "needs-you" ? 0 : e.status === "failed" ? 1 : v(e, S) ? 2 : e.status === "waiting" ? 3 : e.status === "running" ? 4 : 5, Se = new Map(t.filter((e) => e.kind === "spawn").map((e) => [e.to, e.from])), Ce = (e) => {
+		y
+	]), xe = (e) => e.status === "needs-you" ? 0 : e.status === "failed" ? 1 : o(e, v) ? 2 : e.status === "waiting" ? 3 : e.status === "running" ? 4 : 5, Se = new Map(t.filter((e) => e.kind === "spawn").map((e) => [e.to, e.from])), Ce = (e) => {
 		let t = /* @__PURE__ */ new Set([e]), n = 0;
 		for (; Se.has(e) && !t.has(Se.get(e));) e = Se.get(e), t.add(e), n++;
 		return n;
@@ -8249,7 +8266,7 @@ function Hf({ nodes: e, edges: t, selectedId: n, onSelect: r, direction: a = "TB
 		"failed",
 		"quiet"
 	].map((t) => {
-		let r = e.filter((e) => t === "quiet" ? v(e, S) : e.status === t);
+		let r = e.filter((e) => t === "quiet" ? o(e, v) : e.status === t);
 		return {
 			status: t,
 			matches: r,
@@ -8266,12 +8283,12 @@ function Hf({ nodes: e, edges: t, selectedId: n, onSelect: r, direction: a = "TB
 			className: "ag-status-button rounded-full border border-border px-2 py-1",
 			style: { color: e.status === "quiet" ? "var(--surface-warning-text)" : _f(e.status).color },
 			onClick: () => {
-				let t = e.matches.findIndex((e) => e.id === n), r = e.matches[(t + 1) % e.matches.length];
-				Y(r.id);
-				let i = q?.positions.get(r.id), a = se.current?.getInternalNode(r.id)?.measured;
-				i && se.current?.setCenter(i.x + (a?.width ?? _.width) / 2, i.y + (a?.height ?? _.height) / 2, {
+				let t = e.matches.findIndex((e) => e.id === n), i = e.matches[(t + 1) % e.matches.length];
+				Y(i.id);
+				let a = q?.positions.get(i.id), o = se.current?.getInternalNode(i.id)?.measured;
+				a && se.current?.setCenter(a.x + (o?.width ?? _.width) / 2, a.y + (o?.height ?? _.height) / 2, {
 					zoom: 1,
-					duration: C ? l("--duration-base", B.current) : 0
+					duration: y ? r("--duration-base", B.current) : 0
 				});
 			},
 			children: [/* @__PURE__ */ (0, P.jsxs)("span", {
@@ -8291,42 +8308,42 @@ function Hf({ nodes: e, edges: t, selectedId: n, onSelect: r, direction: a = "TB
 		}, e.status))]
 	});
 	return e.length === 0 ? /* @__PURE__ */ (0, P.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 ${o ?? ""}`,
-		children: c ?? "No agents yet"
+		className: `agent-graph flex items-center justify-center rounded-lg border border-border border-dashed p-4 text-center text-muted-foreground text-xs ${s ?? ""}`,
+		children: l ?? "No agents yet"
 	}) : /* @__PURE__ */ (0, P.jsxs)("div", {
 		ref: (e) => {
 			B.current = e, H(e);
 		},
-		className: `agent-graph ag-live relative flex flex-col ${o ?? ""}`,
+		className: `agent-graph ag-live${d ? "" : " ag-topology"} relative flex flex-col ${s ?? ""}`,
 		tabIndex: -1,
 		onKeyDownCapture: (e) => {
-			e.target instanceof HTMLElement && e.target.closest("[data-agent-metrics]") || (e.key === "Tab" && !e.shiftKey && N ? (e.preventDefault(), document.getElementById(w)?.focus()) : (e.key === "Escape" && A(), be(e)));
+			e.target instanceof HTMLElement && e.target.closest("[data-agent-metrics]") || (e.key === "Tab" && !e.shiftKey && N ? (e.preventDefault(), document.getElementById(x)?.focus()) : (e.key === "Escape" && O(), be(e)));
 		},
 		onFocusCapture: (e) => {
-			if (!(e.target instanceof HTMLElement) || O.current || (k(), e.target.closest("[data-agent-metrics]"))) return;
+			if (!(e.target instanceof HTMLElement) || E.current || (D(), e.target.closest("[data-agent-metrics]"))) return;
 			if (!e.target.matches(":focus-visible")) {
-				A();
+				O();
 				return;
 			}
 			let t = e.target.closest(".react-flow__node, [data-agent-id]"), n = t?.dataset.id ?? t?.dataset.agentId;
-			E.current = t ?? null, F(n && J.has(n) ? {
+			T.current = t ?? null, F(n && J.has(n) ? {
 				id: n,
 				rect: t.getBoundingClientRect()
 			} : null);
 		},
 		onBlurCapture: (e) => {
-			!e.currentTarget.contains(e.relatedTarget) && e.relatedTarget?.id !== w && A();
+			!e.currentTarget.contains(e.relatedTarget) && e.relatedTarget?.id !== x && O();
 		},
 		"data-layout": W ? "list" : q && fe ? "ready" : "pending",
 		"data-columns": q?.columns,
 		children: [
 			ke,
-			h && f && /* @__PURE__ */ (0, P.jsx)(d, {
+			h && d && /* @__PURE__ */ (0, P.jsx)(f, {
 				agents: e,
 				now: g,
-				live: f,
+				live: d,
 				selectedId: n,
-				onSelect: r ? Y : void 0
+				onSelect: i ? Y : void 0
 			}),
 			W ? /* @__PURE__ */ (0, P.jsxs)("ul", {
 				className: "ag-graph-viewport ag-phone-list overflow-auto",
@@ -8344,20 +8361,20 @@ function Hf({ nodes: e, edges: t, selectedId: n, onSelect: r, direction: a = "TB
 						onKeyDown: (t) => {
 							(t.key === "Enter" || t.key === " ") && t.target === t.currentTarget && (t.preventDefault(), Y(e.id));
 						},
-						children: f || e.status === "succeeded" || e.status === "stopped" ? /* @__PURE__ */ (0, P.jsx)(Pf, {
+						children: d ? /* @__PURE__ */ (0, P.jsx)(Pf, {
 							agent: e,
 							parentLabel: J.get(Se.get(e.id) ?? "")?.label,
 							selected: n === e.id,
-							now: S,
+							now: v,
 							renderEventIcon: p,
-							onOpen: r ? () => Y(e.id) : void 0
+							onOpen: i ? () => Y(e.id) : void 0
 						}) : /* @__PURE__ */ (0, P.jsx)(wf, {
 							agent: e,
 							parentLabel: J.get(Se.get(e.id) ?? "")?.label,
 							selected: n === e.id,
-							now: S,
+							now: v,
 							direction: a,
-							onOpen: r ? () => Y(e.id) : void 0
+							onOpen: i ? () => Y(e.id) : void 0
 						})
 					})
 				}, e.id)), e.length > zf && /* @__PURE__ */ (0, P.jsxs)("li", {
@@ -8405,9 +8422,9 @@ function Hf({ nodes: e, edges: t, selectedId: n, onSelect: r, direction: a = "TB
 					},
 					onNodeClick: ye,
 					onNodeMouseEnter: (e, t) => {
-						k(), E.current = e.target.closest(".react-flow__node"), E.current && F({
+						D(), T.current = e.target.closest(".react-flow__node"), T.current && F({
 							id: t.id,
-							rect: E.current.getBoundingClientRect()
+							rect: T.current.getBoundingClientRect()
 						});
 					},
 					onNodeMouseLeave: j,
@@ -8450,7 +8467,9 @@ function Hf({ nodes: e, edges: t, selectedId: n, onSelect: r, direction: a = "TB
 							position: "bottom-right",
 							fitViewOptions: {
 								padding: `${Rf}px`,
-								maxZoom: 1
+								minZoom: ve,
+								maxZoom: 1,
+								nodes: d ? void 0 : K.agentIds.slice(0, 2).map((e) => ({ id: e }))
 							}
 						})
 					]
@@ -8459,13 +8478,13 @@ function Hf({ nodes: e, edges: t, selectedId: n, onSelect: r, direction: a = "TB
 			N && J.has(N.id) && /* @__PURE__ */ (0, P.jsx)(Uf, {
 				anchor: B.current,
 				mode: U,
-				id: w,
+				id: x,
 				agent: J.get(N.id),
 				rect: N.rect,
-				onEnter: k,
+				onEnter: D,
 				onLeave: j,
 				onClose: () => {
-					A(), O.current = !0, E.current?.focus({ preventScroll: !0 }), O.current = !1;
+					O(), E.current = !0, T.current?.focus({ preventScroll: !0 }), E.current = !1;
 				}
 			})
 		]
@@ -8495,14 +8514,14 @@ function Uf({ anchor: e, mode: t, id: n, agent: r, rect: i, onEnter: a, onLeave:
 	let u = new Map([
 		{
 			label: "Tokens",
-			value: p(r.tokens) ?? "Not recorded"
+			value: d(r.tokens) ?? "Not recorded"
 		},
 		{
 			label: "Cost",
-			value: O(r.costUsd ?? void 0) ?? "Not recorded"
+			value: y(r.costUsd ?? void 0) ?? "Not recorded"
 		},
 		...r.facts ?? []
-	].map((e) => [e.label.toLowerCase(), e])), d = Math.min(420, window.innerWidth - 24), f = Math.min(560, window.innerHeight - 24), m = Math.max(12, Math.min(i.right + 12 + d <= window.innerWidth ? i.right + 12 : i.left - d - 12, window.innerWidth - d - 12));
+	].map((e) => [e.label.toLowerCase(), e])), f = Math.min(420, window.innerWidth - 24), p = Math.min(560, window.innerHeight - 24), m = Math.max(12, Math.min(i.right + 12 + f <= window.innerWidth ? i.right + 12 : i.left - f - 12, window.innerWidth - f - 12));
 	return (0, N.createPortal)(/* @__PURE__ */ (0, P.jsxs)("div", {
 		id: n,
 		"data-agent-metrics": !0,
@@ -8522,11 +8541,11 @@ function Uf({ anchor: e, mode: t, id: n, agent: r, rect: i, onEnter: a, onLeave:
 			colorScheme: t,
 			position: "fixed",
 			zIndex: 1e3,
-			width: d,
-			maxHeight: f,
+			width: f,
+			maxHeight: p,
 			overflow: "auto",
 			left: m,
-			top: Math.max(12, Math.min(i.top, window.innerHeight - f - 12))
+			top: Math.max(12, Math.min(i.top, window.innerHeight - p - 12))
 		},
 		children: [
 			/* @__PURE__ */ (0, P.jsxs)("div", {