@tangle-network/sandbox-cli 0.21.22 → 0.21.24

package/dist/graph-viewer/viewer/Traces-BWBulSPE.js

@@ -0,0 +1,232 @@
+import { i as e } from "./rolldown-runtime-DArdT4gl.js";
+import { i as t, t as n } from "./jsx-runtime-BSzbUOFc.js";
+import { t as r } from "./segmented-control-ChhLMa6h.js";
+import { E as i, S as a, _ as o, d as s, l as c, o as l, p as u, u as d, v as f, w as p, x as m } from "./ui-DZiGjPwl.js";
+import { agentParam as h } from "./RunPage-ChipoSdO.js";
+//#region src/workspace/run/Traces.tsx
+var g = /* @__PURE__ */ e(t(), 1), _ = n(), v = 34;
+function y({ m: e, doc: t, agent: n, route: y }) {
+	let b = y.params.get("agent") ? n : null, [x, S] = (0, g.useState)("all"), [C, w] = (0, g.useState)(0), T = (0, g.useMemo)(() => e.steps.filter((e) => !b || e.agent.id === b), [e, b]), E = (0, g.useMemo)(() => ({
+		all: T.length,
+		model: T.filter((e) => e.step.kind === "model").length,
+		tool: T.filter((e) => e.step.kind === "tool").length,
+		failed: T.filter((e) => e.step.failed).length
+	}), [T]), D = (0, g.useMemo)(() => T.filter(({ step: e }) => x === "all" || (x === "failed" ? e.failed : e.kind === x)), [T, x]), O = (0, g.useMemo)(() => Math.log10(Math.max(10, ...D.map((e) => e.step.d))), [D]), k = (0, g.useRef)(null), A = o(k, D.length, v, 8);
+	(0, g.useEffect)(() => {
+		w(0), k.current && (k.current.scrollTop = 0);
+	}, [x, b]);
+	let j = m(e.t0), M = (e, t = !1) => {
+		let n = Math.max(0, Math.min(D.length - 1, e));
+		w(n);
+		let r = k.current;
+		if (r && t) {
+			let e = n * v;
+			e < r.scrollTop ? r.scrollTop = e : e + v + 36 > r.scrollTop + r.clientHeight && (r.scrollTop = e + v + 36 - r.clientHeight), requestAnimationFrame(() => r.querySelector(`[data-i="${n}"]`)?.focus());
+		}
+	}, N = (e) => {
+		(e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), M(C + (e.key === "ArrowDown" ? 1 : -1), !0));
+	}, P = D[C], F = s(e, (e) => e.steps.length > 0, (e) => `${a(e.steps.length)} steps`);
+	return /* @__PURE__ */ (0, _.jsxs)("section", {
+		className: "rp-card rp-traces",
+		"aria-label": "Traces",
+		children: [/* @__PURE__ */ (0, _.jsxs)("div", {
+			className: "rp-hd",
+			style: { paddingLeft: 8 },
+			children: [/* @__PURE__ */ (0, _.jsx)(l, {
+				label: "Agent",
+				options: F,
+				groups: d(e),
+				all: {
+					label: "All agents",
+					meta: `${a(e.totals.steps)} steps`
+				},
+				value: b,
+				width: 340,
+				placeholder: `Search ${F.length} agents`,
+				style: { width: 260 },
+				onChange: (e) => y.go("traces", { agent: e ? h(t.run.id, e) : null }),
+				children: b ? e.byId.get(b)?.name : "All agents"
+			}), /* @__PURE__ */ (0, _.jsx)(r, {
+				"aria-label": "Kind",
+				value: x,
+				onValueChange: S,
+				options: [
+					"all",
+					"model",
+					"tool",
+					"failed"
+				].map((e) => ({
+					value: e,
+					label: e === "all" ? "All" : e[0].toUpperCase() + e.slice(1),
+					adornment: /* @__PURE__ */ (0, _.jsx)("span", {
+						className: "ct",
+						children: a(E[e])
+					})
+				}))
+			})]
+		}), /* @__PURE__ */ (0, _.jsxs)("div", {
+			className: "rp-trw",
+			children: [/* @__PURE__ */ (0, _.jsxs)("div", {
+				className: "rp-tbl",
+				ref: k,
+				role: "grid",
+				"aria-label": "Spans",
+				"aria-rowcount": D.length,
+				onKeyDown: N,
+				children: [
+					/* @__PURE__ */ (0, _.jsxs)("div", {
+						className: "rp-tr th",
+						role: "row",
+						children: [
+							/* @__PURE__ */ (0, _.jsx)("span", {
+								role: "columnheader",
+								children: "Start (UTC)"
+							}),
+							/* @__PURE__ */ (0, _.jsx)("span", {
+								role: "columnheader",
+								children: "Offset"
+							}),
+							/* @__PURE__ */ (0, _.jsx)("span", {
+								role: "columnheader",
+								children: "Agent"
+							}),
+							/* @__PURE__ */ (0, _.jsx)("span", {
+								role: "columnheader",
+								children: "Kind"
+							}),
+							/* @__PURE__ */ (0, _.jsx)("span", {
+								role: "columnheader",
+								children: "Name"
+							}),
+							/* @__PURE__ */ (0, _.jsx)("span", {
+								role: "columnheader",
+								className: "r",
+								children: "Duration"
+							}),
+							/* @__PURE__ */ (0, _.jsx)("span", {
+								role: "columnheader",
+								children: "Status"
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, _.jsx)("div", { style: { height: A.before } }),
+					D.slice(A.first, A.last).map(({ agent: e, step: t }, n) => {
+						let r = A.first + n;
+						return /* @__PURE__ */ (0, _.jsxs)("div", {
+							"data-i": r,
+							className: "rp-tr",
+							role: "row",
+							"aria-selected": r === C,
+							tabIndex: r === C ? 0 : -1,
+							onClick: () => M(r),
+							children: [
+								/* @__PURE__ */ (0, _.jsx)("span", {
+									className: "m",
+									children: j(t.t)
+								}),
+								/* @__PURE__ */ (0, _.jsx)("span", {
+									className: "m muted",
+									children: i(t.t)
+								}),
+								/* @__PURE__ */ (0, _.jsx)("span", {
+									title: e.name,
+									children: u(e, 30)
+								}),
+								/* @__PURE__ */ (0, _.jsxs)("span", {
+									className: "kind",
+									children: [/* @__PURE__ */ (0, _.jsx)("i", { className: t.kind }), t.kind]
+								}),
+								/* @__PURE__ */ (0, _.jsx)("span", {
+									className: "m nm",
+									title: t.kind === "tool" ? `${t.tool}${t.target ? ` ${t.target}` : ""}` : void 0,
+									children: t.kind === "model" ? t.model?.split("/").pop() ?? e.model ?? "model" : t.kind === "tool" ? /* @__PURE__ */ (0, _.jsxs)(_.Fragment, { children: [t.tool, t.target && /* @__PURE__ */ (0, _.jsxs)("span", {
+										className: "muted",
+										children: [" ", t.target]
+									})] }) : /* @__PURE__ */ (0, _.jsx)("span", {
+										className: "muted",
+										children: "waiting on a spawned agent"
+									})
+								}),
+								/* @__PURE__ */ (0, _.jsxs)("span", {
+									className: "m r dur",
+									children: [/* @__PURE__ */ (0, _.jsx)("b", { style: { width: Math.max(2, Math.log10(Math.max(t.d, 1)) / O * 56) } }), p(t.d)]
+								}),
+								/* @__PURE__ */ (0, _.jsx)("span", { children: t.failed ? /* @__PURE__ */ (0, _.jsx)("span", {
+									className: "f",
+									children: "✕ failed"
+								}) : /* @__PURE__ */ (0, _.jsx)("span", {
+									className: "dim",
+									children: "ok"
+								}) })
+							]
+						}, r);
+					}),
+					/* @__PURE__ */ (0, _.jsx)("div", { style: { height: A.after } })
+				]
+			}), /* @__PURE__ */ (0, _.jsxs)("aside", {
+				className: "rp-trd",
+				"aria-label": "Span",
+				children: [/* @__PURE__ */ (0, _.jsx)("div", {
+					className: "rp-trd-h",
+					children: "Span"
+				}), /* @__PURE__ */ (0, _.jsx)("div", {
+					className: "rp-scroll",
+					children: P ? /* @__PURE__ */ (0, _.jsxs)(_.Fragment, { children: [
+						/* @__PURE__ */ (0, _.jsx)("pre", {
+							className: "rp-json",
+							children: JSON.stringify({
+								run: t.run.id,
+								agent: P.agent.name,
+								agentId: P.agent.id,
+								kind: P.step.kind,
+								...P.step.kind === "tool" ? { tool: P.step.tool } : P.step.kind === "model" ? { model: P.step.model ?? P.agent.node.model } : {},
+								...P.step.target ? { target: P.step.target } : {},
+								startedAt: new Date(e.t0 + P.step.t).toISOString(),
+								durationMs: P.step.d,
+								failed: P.step.failed,
+								...P.step.latency === null ? {} : { latencyMs: P.step.latency },
+								tokens: P.step.tokens,
+								...P.step.usd === null ? {} : { billedUsd: P.step.usd }
+							}, null, 2)
+						}),
+						/* @__PURE__ */ (0, _.jsxs)("h5", {
+							className: "rp-subh",
+							children: [P.agent.name, " · whole run"]
+						}),
+						/* @__PURE__ */ (0, _.jsxs)("dl", {
+							className: "rp-kv",
+							children: [
+								/* @__PURE__ */ (0, _.jsx)("dt", { children: "Tokens" }),
+								/* @__PURE__ */ (0, _.jsxs)("dd", { children: [f(P.agent.tokens), P.agent.byClass ? ` · ${f(P.agent.byClass.input)} in · ${f(P.agent.byClass.output)} out · ${f(P.agent.byClass.cacheRead)} cached` : ""] }),
+								/* @__PURE__ */ (0, _.jsx)("dt", { children: "Cost" }),
+								/* @__PURE__ */ (0, _.jsx)("dd", { children: c(P.agent) }),
+								/* @__PURE__ */ (0, _.jsx)("dt", { children: "Model calls" }),
+								/* @__PURE__ */ (0, _.jsxs)("dd", { children: [
+									a(P.agent.modelCalls),
+									" · p50 ",
+									p(P.agent.latency.p50),
+									" · p99 ",
+									p(P.agent.latency.p99)
+								] }),
+								/* @__PURE__ */ (0, _.jsx)("dt", { children: "Tool calls" }),
+								/* @__PURE__ */ (0, _.jsxs)("dd", { children: [
+									a(P.agent.toolCalls),
+									" · ",
+									P.agent.toolFailures,
+									" failed"
+								] }),
+								/* @__PURE__ */ (0, _.jsx)("dt", { children: "Restarts" }),
+								/* @__PURE__ */ (0, _.jsx)("dd", { children: P.agent.restarts.length })
+							]
+						})
+					] }) : /* @__PURE__ */ (0, _.jsx)("p", {
+						className: "ws-status",
+						children: "No span matches."
+					})
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { y as Traces };