@tangle-network/sandbox-cli 0.21.23 → 0.21.24

package/dist/graph-viewer/Topology-CyhuK6XW.js

@@ -0,0 +1,550 @@
+import { S as e, a as t, b as n, c as r, d as i, f as a, g as o, l as s, m as c, n as l, o as u, s as d, t as f, u as p, v as m, w as h } from "./ui-CEhDqce8.js";
+import { agentParam as g } from "./RunPage-nJwCsArn.js";
+import { useEffect as _, useLayoutEffect as v, useMemo as y, useRef as b, useState as x } from "react";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
+//#region src/workspace/run/Topology.tsx
+function T(e, t, n, r, i) {
+	let a = new Set(e.teams.map((e) => e.id)), o = i ? Math.min(280, t - 32) : a.size ? 216 : 272, s = o + (a.size ? 56 : 72), c = /* @__PURE__ */ new Map(), l = [], u = (i, d, f) => {
+		let p = 24 + d * s;
+		if (i.children.length > 8 && a.has(i.id)) {
+			let e = 24 + (d + 1) * s, n = Math.max(1, Math.floor((t - e - 48 + 8) / 218)), a = r.has(i.id), u = Math.ceil(i.children.length / n), m = a ? 48 + u * 52 - 8 + 12 : 48;
+			return l.push({
+				id: i.id,
+				x: e,
+				y: f,
+				w: n * 218 - 8 + 24,
+				h: m,
+				open: a
+			}), a && i.children.forEach((t, r) => c.set(t, {
+				x: e + 12 + r % n * 218,
+				y: f + 48 + Math.floor(r / n) * 52,
+				w: 210,
+				h: 44,
+				sm: !0,
+				team: i.id
+			})), c.set(i.id, {
+				x: p,
+				y: f + 24 - 29 + 4,
+				w: o,
+				h: 58
+			}), Math.max(m, 58) + 16;
+		}
+		if (!i.children.length) return c.set(i.id, {
+			x: p,
+			y: f,
+			w: o,
+			h: 58
+		}), 68;
+		let m = f;
+		for (let t of i.children) m += u(e.byId.get(t), d + 1, m);
+		let h = m - f - 10, g = c.get(i.children[0]);
+		return c.set(i.id, {
+			x: p,
+			y: h > n - 48 ? g.y : f + Math.max(0, h / 2 - 29),
+			w: o,
+			h: 58
+		}), Math.max(m - f, 68);
+	};
+	if (i) {
+		let t = 16;
+		for (let n of e.tree) c.set(n.id, {
+			x: 12 + Math.min(n.depth, 4) * 20,
+			y: t,
+			w: o - Math.min(n.depth, 4) * 20,
+			h: 58
+		}), t += 66;
+	} else {
+		let t = 24;
+		for (let n of e.agents.filter((e) => !e.parent)) t += u(n, 0, t);
+	}
+	let d = [...c.values(), ...l], f = Math.max(0, ...d.map((e) => e.x + e.w)) + 24, p = Math.max(0, ...d.map((e) => e.y + e.h)) + 24, m = i ? 0 : Math.max(0, (t - f) / 2), h = i ? 0 : Math.max(0, (n - p) / 2);
+	for (let e of d) e.x += m, e.y += h;
+	return {
+		pos: c,
+		frames: l,
+		W: Math.max(t, f + m),
+		H: Math.max(n, p + h),
+		over: p > n + 160 || f > t + 160
+	};
+}
+function E({ m: n, agent: s, selectAgent: l, route: h, doc: S }) {
+	let E = b(null), k = o(), [A, j] = x({
+		w: 1e3,
+		h: 700
+	}), [M, N] = x({
+		top: 0,
+		left: 0
+	}), [P, F] = x(() => new Set(n.teams.length === 1 ? [n.teams[0].id] : [])), I = c();
+	v(() => {
+		let e = E.current;
+		if (!e) return;
+		let t = () => j({
+			w: e.clientWidth,
+			h: e.clientHeight
+		});
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, []);
+	let L = y(() => T(n, A.w, A.h, P, k), [
+		n,
+		A,
+		P,
+		k
+	]), R = s ?? n.root?.id ?? null, { anc: z, desc: B } = y(() => {
+		let e = /* @__PURE__ */ new Set(), t = /* @__PURE__ */ new Set();
+		for (let t = R ? n.byId.get(R)?.parent : null; t; t = n.byId.get(t)?.parent ?? null) e.add(t);
+		let r = (e) => {
+			for (let i of n.byId.get(e)?.children ?? []) t.add(i), r(i);
+		};
+		return R && r(R), {
+			anc: e,
+			desc: t
+		};
+	}, [n, R]), V = R !== null && R !== n.root?.id, H = (e) => !V || e === R || z.has(e) || B.has(e), U = (e) => {
+		let t = L.pos.get(e);
+		t && E.current && E.current.scrollTo({
+			left: t.x + t.w / 2 - A.w / 2,
+			top: t.y + t.h / 2 - A.h / 2,
+			behavior: "smooth"
+		});
+	};
+	_(() => {
+		if (R) {
+			let e = n.byId.get(R)?.team;
+			e && e !== R && !P.has(e) && F(/* @__PURE__ */ new Set([...P, e]));
+		}
+	}, [R]);
+	let W = (e) => [e.x + e.w, e.y + e.h / 2], G = (e) => [e.x, e.y + e.h / 2], K = (e, t, n, r) => {
+		if (k) {
+			let [i, a] = G(t);
+			return /* @__PURE__ */ C("path", {
+				d: `M${e.x + 16} ${e.y + e.h} V${a - 8} q0 8 8 8 H${i}`,
+				className: n ? "hot" : ""
+			}, r);
+		}
+		let [i, a] = W(e), [o, s] = G(t), c = (i + o) / 2;
+		return /* @__PURE__ */ C("path", {
+			d: `M${i} ${a} C${c} ${a} ${c} ${s} ${o} ${s}`,
+			className: n ? "hot" : V ? "fade" : ""
+		}, r);
+	}, q = [];
+	for (let e of n.agents) {
+		let t = L.pos.get(e.id), n = e.parent ? L.pos.get(e.parent) : null;
+		t && n && !t.team && q.push(K(n, t, e.id === R || e.parent === R || z.has(e.id) && (z.has(e.parent) || e.parent === R), e.id));
+	}
+	for (let e of L.frames) {
+		let t = L.pos.get(e.id);
+		t && q.push(K(t, {
+			x: e.x,
+			y: e.y,
+			w: e.w,
+			h: 48
+		}, e.id === R || L.pos.get(R ?? "")?.team === e.id, `f:${e.id}`));
+	}
+	let J = n.agents.filter((e) => {
+		let t = L.pos.get(e.id);
+		return t && t.y + t.h >= M.top - 400 && t.y <= M.top + A.h + 400 && t.x + t.w >= M.left - 400 && t.x <= M.left + A.w + 400;
+	}), Y = () => E.current?.getBoundingClientRect(), X = R ? n.byId.get(R) ?? null : null;
+	return /* @__PURE__ */ w("div", {
+		className: "rp-topo",
+		children: [/* @__PURE__ */ w("section", {
+			className: "rp-card",
+			"aria-label": "Spawn tree",
+			children: [/* @__PURE__ */ w("div", {
+				className: "rp-hd",
+				children: [/* @__PURE__ */ w("div", {
+					className: "rp-legend",
+					children: [
+						/* @__PURE__ */ w("span", {
+							className: "rp-key",
+							children: [/* @__PURE__ */ C(d, { tone: "ok" }), "Done"]
+						}),
+						/* @__PURE__ */ w("span", {
+							className: "rp-key",
+							children: [/* @__PURE__ */ C(d, { tone: "live" }), "Running"]
+						}),
+						/* @__PURE__ */ w("span", {
+							className: "rp-key",
+							children: [/* @__PURE__ */ C(d, { tone: "" }), "Stopped"]
+						}),
+						/* @__PURE__ */ w("span", {
+							className: "rp-key",
+							children: [/* @__PURE__ */ C(d, { tone: "none" }), "Never ran"]
+						})
+					]
+				}), /* @__PURE__ */ w("span", {
+					className: "end",
+					children: [n.teams.length > 0 && /* @__PURE__ */ w("span", {
+						className: "rp-group",
+						role: "group",
+						"aria-label": "Teams",
+						children: [/* @__PURE__ */ C("button", {
+							type: "button",
+							className: "rp-btn",
+							onClick: () => F(new Set(n.teams.map((e) => e.id))),
+							children: "Expand all"
+						}), /* @__PURE__ */ C("button", {
+							type: "button",
+							className: "rp-btn",
+							onClick: () => F(/* @__PURE__ */ new Set()),
+							children: "Collapse all"
+						})]
+					}), /* @__PURE__ */ C(u, {
+						label: "Go to agent",
+						options: i(n),
+						groups: p(n),
+						value: R,
+						placeholder: `Search ${n.agents.length} agents`,
+						width: 340,
+						style: { width: 220 },
+						onChange: (e) => {
+							e && (l(e), window.setTimeout(() => U(e), 60));
+						},
+						children: /* @__PURE__ */ C("span", {
+							className: "dim",
+							children: "Go to agent"
+						})
+					})]
+				})]
+			}), /* @__PURE__ */ w("div", {
+				className: "rp-topo-wrap",
+				children: [/* @__PURE__ */ w("div", {
+					className: "rp-topo-canvas",
+					ref: E,
+					onScroll: (e) => N({
+						top: e.currentTarget.scrollTop,
+						left: e.currentTarget.scrollLeft
+					}),
+					children: [
+						/* @__PURE__ */ C("svg", {
+							className: "edges",
+							width: L.W,
+							height: L.H,
+							"aria-hidden": "true",
+							children: q
+						}),
+						L.frames.map((e) => {
+							let i = n.teams.find((t) => t.id === e.id), a = i.members.map((e) => n.byId.get(e)), o = a.filter((e) => e.state.tone === "live").length, s = a.filter((e) => e.state.tone === "ok").length, c = V && !(e.id === R || z.has(e.id) || L.pos.get(R ?? "")?.team === e.id);
+							return /* @__PURE__ */ C("div", {
+								className: `rp-team${c ? " fade" : ""}`,
+								style: {
+									left: e.x,
+									top: e.y,
+									width: e.w,
+									height: e.h
+								},
+								children: /* @__PURE__ */ w("button", {
+									type: "button",
+									className: "rp-team-h",
+									"aria-expanded": e.open,
+									onClick: () => F((t) => {
+										let n = new Set(t);
+										return n.has(e.id) ? n.delete(e.id) : n.add(e.id), n;
+									}),
+									onPointerEnter: (e) => I.show({
+										content: /* @__PURE__ */ C(r, {
+											m: n,
+											team: i
+										}),
+										rect: e.currentTarget.getBoundingClientRect(),
+										bounds: Y(),
+										vertical: !0,
+										wide: !0
+									}),
+									onPointerLeave: () => I.hide(),
+									children: [
+										/* @__PURE__ */ C("span", {
+											className: "cv",
+											children: /* @__PURE__ */ C(t, { name: "chevron" })
+										}),
+										/* @__PURE__ */ C("b", { children: i.label }),
+										/* @__PURE__ */ C("span", {
+											className: "ct",
+											children: a.length
+										}),
+										/* @__PURE__ */ w("span", {
+											className: "st",
+											children: [
+												/* @__PURE__ */ w("span", {
+													className: "mb",
+													children: [/* @__PURE__ */ C("i", {
+														className: "ok",
+														style: { width: `${s / a.length * 100}%` }
+													}), /* @__PURE__ */ C("i", {
+														className: "live",
+														style: { width: `${o / a.length * 100}%` }
+													})]
+												}),
+												o ? `${o} running · ` : "",
+												m(a.reduce((e, t) => e + (t.tokens ?? 0), 0))
+											]
+										})
+									]
+								})
+							}, e.id);
+						}),
+						J.map((t) => {
+							let r = L.pos.get(t.id), i = `rp-node${r.sm ? " sm" : ""}${t.id === R ? " sel" : ""}${H(t.id) || r.team && L.pos.get(R ?? "")?.team === r.team ? "" : " fade"}${t.state.tone === "none" ? " ghost" : ""}`;
+							return /* @__PURE__ */ w("button", {
+								type: "button",
+								className: i,
+								style: {
+									left: r.x,
+									top: r.y,
+									width: r.w
+								},
+								"aria-pressed": t.id === R,
+								onClick: () => l(t.id),
+								onPointerEnter: (e) => I.show({
+									content: /* @__PURE__ */ C(f, {
+										m: n,
+										a: t
+									}),
+									rect: e.currentTarget.getBoundingClientRect(),
+									bounds: Y(),
+									vertical: !0,
+									wide: t.tools.length > 0
+								}),
+								onPointerLeave: () => I.hide(),
+								onFocus: (e) => I.show({
+									content: /* @__PURE__ */ C(f, {
+										m: n,
+										a: t
+									}),
+									rect: e.currentTarget.getBoundingClientRect(),
+									bounds: Y(),
+									vertical: !0,
+									wide: t.tools.length > 0
+								}),
+								onBlur: () => I.hide(),
+								children: [/* @__PURE__ */ w("span", {
+									className: "r1",
+									children: [
+										/* @__PURE__ */ C(d, { tone: t.state.tone }),
+										/* @__PURE__ */ C("span", {
+											className: "nm",
+											title: t.name,
+											children: a(r.sm && t.parent && t.name.startsWith(`${n.byId.get(t.parent)?.name}-`) ? t.name.slice((n.byId.get(t.parent)?.name.length ?? 0) + 1) : t.name.length <= (r.sm ? 20 : 30) ? t.name : t.short, r.sm ? 20 : 30)
+										}),
+										/* @__PURE__ */ C("span", {
+											className: "dim",
+											children: r.sm ? m(t.tokens) : t.state.label
+										})
+									]
+								}), !r.sm && /* @__PURE__ */ C("span", {
+									className: "r2",
+									children: t.tokens === null ? "no usage recorded" : `${m(t.tokens)} tokens · ${e(t.steps.length)} steps${t.failedSteps ? ` · ${t.failedSteps} failed` : ""}`
+								})]
+							}, t.id);
+						}),
+						/* @__PURE__ */ C("div", { style: {
+							position: "absolute",
+							left: 0,
+							top: L.H - 1,
+							width: L.W,
+							height: 1
+						} })
+					]
+				}), L.over && !k && /* @__PURE__ */ C(D, {
+					m: n,
+					L,
+					view: M,
+					size: A,
+					selected: R,
+					onJump: (e, t) => E.current?.scrollTo({
+						left: e - A.w / 2,
+						top: t - A.h / 2
+					})
+				})]
+			})]
+		}), X && /* @__PURE__ */ C(O, {
+			m: n,
+			a: X,
+			onSelect: (e) => {
+				l(e), window.setTimeout(() => U(e), 60);
+			},
+			href: h.href("conversations", { agent: g(S.run.id, X.id) })
+		})]
+	});
+}
+function D({ m: e, L: t, view: n, size: r, selected: i, onJump: a }) {
+	let o = 184 / t.W, s = Math.min(160, t.H * o);
+	return /* @__PURE__ */ w("div", {
+		className: "rp-mm",
+		onClick: (e) => {
+			let t = e.currentTarget.querySelector("svg").getBoundingClientRect();
+			a((e.clientX - t.left) / o, (e.clientY - t.top) / o);
+		},
+		children: [/* @__PURE__ */ w("div", {
+			className: "mm-h",
+			children: [/* @__PURE__ */ C("span", { children: "Map" }), /* @__PURE__ */ w("span", { children: [e.agents.length, " agents"] })]
+		}), /* @__PURE__ */ w("svg", {
+			viewBox: `0 0 184 ${s}`,
+			style: { height: s },
+			"aria-hidden": "true",
+			children: [
+				t.frames.map((e) => /* @__PURE__ */ C("rect", {
+					x: e.x * o,
+					y: e.y * o,
+					width: e.w * o,
+					height: e.h * o,
+					rx: "1.5",
+					className: "fr"
+				}, e.id)),
+				[...t.pos].map(([t, n]) => /* @__PURE__ */ C("rect", {
+					x: n.x * o,
+					y: n.y * o,
+					width: Math.max(1.5, n.w * o),
+					height: Math.max(1.5, n.h * o),
+					rx: "1.5",
+					className: t === i ? "sel" : e.byId.get(t)?.state.tone === "live" ? "live" : ""
+				}, t)),
+				/* @__PURE__ */ C("rect", {
+					x: n.left * o,
+					y: n.top * o,
+					width: r.w * o,
+					height: r.h * o,
+					rx: "2",
+					className: "vp"
+				})
+			]
+		})]
+	});
+}
+function O({ m: r, a: i, onSelect: a, href: o }) {
+	let c = n(r.t0), u = Math.max(1, ...i.tools.map((e) => e.calls)), f = i.parent ? r.byId.get(i.parent) : null, p = [[
+		i.model ?? "model",
+		i.latency.p50,
+		i.latency.p90,
+		i.latency.p99,
+		i.modelCalls
+	], ...i.tools.slice(0, 5).map((e) => [
+		e.name,
+		e.p50,
+		e.p90,
+		e.p99,
+		e.calls
+	])];
+	return /* @__PURE__ */ w("aside", {
+		className: "rp-card",
+		"aria-label": i.name,
+		children: [/* @__PURE__ */ w("div", {
+			className: "rp-hd",
+			children: [/* @__PURE__ */ w("h2", { children: [/* @__PURE__ */ C(d, { tone: i.state.tone }), i.name] }), /* @__PURE__ */ C("span", {
+				className: "end",
+				children: /* @__PURE__ */ C("span", {
+					className: `rp-pill ${i.state.tone}`,
+					children: i.state.label
+				})
+			})]
+		}), /* @__PURE__ */ w("div", {
+			className: "rp-scroll rp-tinsp",
+			children: [
+				/* @__PURE__ */ w("dl", {
+					className: "rp-kv",
+					children: [
+						/* @__PURE__ */ C("dt", { children: "Model" }),
+						/* @__PURE__ */ C("dd", { children: [i.model, i.harness].filter(Boolean).join(" · ") || "—" }),
+						/* @__PURE__ */ C("dt", { children: "Spawned" }),
+						/* @__PURE__ */ w("dd", { children: [f ? `by ${f.name} · ` : "", i.start === null ? "—" : `${c(Math.max(0, i.start))} UTC`] }),
+						/* @__PURE__ */ C("dt", { children: "Ended" }),
+						/* @__PURE__ */ C("dd", { children: i.state.tone === "live" ? "running" : i.end === null ? "—" : `${c(i.end)} UTC` }),
+						/* @__PURE__ */ C("dt", { children: "Cost" }),
+						/* @__PURE__ */ C("dd", { children: s(i) })
+					]
+				}),
+				/* @__PURE__ */ w("div", {
+					className: "rp-stat3",
+					children: [
+						/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("b", { children: m(i.tokens) }), /* @__PURE__ */ C("span", { children: "tokens" })] }),
+						/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("b", { children: e(i.modelCalls) }), /* @__PURE__ */ C("span", { children: "model calls" })] }),
+						/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("b", { children: e(i.toolCalls) }), /* @__PURE__ */ C("span", { children: "tool calls" })] }),
+						/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("b", { children: i.failedSteps }), /* @__PURE__ */ C("span", { children: "failed steps" })] }),
+						/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("b", { children: i.restarts.length }), /* @__PURE__ */ C("span", { children: "restarts" })] }),
+						/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("b", { children: i.commits ?? "—" }), /* @__PURE__ */ C("span", { children: "commits" })] })
+					]
+				}),
+				i.modelCalls > 0 && /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C("h5", {
+					className: "rp-subh",
+					children: "Latency"
+				}), /* @__PURE__ */ w("table", {
+					className: "rp-lt",
+					children: [/* @__PURE__ */ C("thead", { children: /* @__PURE__ */ w("tr", { children: [
+						/* @__PURE__ */ C("th", {}),
+						/* @__PURE__ */ C("th", { children: "calls" }),
+						/* @__PURE__ */ C("th", { children: "p50" }),
+						/* @__PURE__ */ C("th", { children: "p90" }),
+						/* @__PURE__ */ C("th", { children: "p99" })
+					] }) }), /* @__PURE__ */ C("tbody", { children: p.map(([t, n, r, i, a]) => /* @__PURE__ */ w("tr", { children: [
+						/* @__PURE__ */ C("td", {
+							title: t,
+							children: t
+						}),
+						/* @__PURE__ */ C("td", { children: e(a) }),
+						/* @__PURE__ */ C("td", { children: h(n) }),
+						/* @__PURE__ */ C("td", { children: h(r) }),
+						/* @__PURE__ */ C("td", { children: h(i) })
+					] }, t)) })]
+				})] }),
+				i.tools.length > 0 && /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C("h5", {
+					className: "rp-subh",
+					children: "Tool calls"
+				}), /* @__PURE__ */ C("div", {
+					className: "rp-tbars four",
+					children: i.tools.slice(0, 8).map((t) => /* @__PURE__ */ w("div", {
+						className: "row",
+						children: [
+							/* @__PURE__ */ C("span", {
+								className: "l",
+								title: t.name,
+								children: t.name
+							}),
+							/* @__PURE__ */ C(l, {
+								ok: t.calls - t.failures,
+								failed: t.failures,
+								max: u
+							}),
+							/* @__PURE__ */ C("span", {
+								className: "n",
+								children: e(t.calls)
+							}),
+							/* @__PURE__ */ C("span", {
+								className: "n f",
+								children: t.failures ? `${t.failures} ✕` : ""
+							})
+						]
+					}, t.name))
+				})] }),
+				i.children.length > 0 && /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ w("h5", {
+					className: "rp-subh",
+					children: ["Spawned · ", i.children.length]
+				}), /* @__PURE__ */ w("div", {
+					className: "rp-chips",
+					children: [i.children.slice(0, 14).map((e) => {
+						let t = r.byId.get(e);
+						return /* @__PURE__ */ w("button", {
+							type: "button",
+							className: "rp-chip",
+							onClick: () => a(e),
+							children: [/* @__PURE__ */ C(d, { tone: t.state.tone }), t.name]
+						}, e);
+					}), i.children.length > 14 && /* @__PURE__ */ w("span", {
+						className: "rp-chip dim",
+						children: [i.children.length - 14, " more"]
+					})]
+				})] }),
+				/* @__PURE__ */ C("p", { children: /* @__PURE__ */ w("a", {
+					className: "rp-btn sm framed",
+					href: o,
+					children: ["Conversation", /* @__PURE__ */ C(t, {
+						name: "arrow",
+						size: 14
+					})]
+				}) })
+			]
+		})]
+	});
+}
+//#endregion
+export { E as Topology };