@tangle-network/sandbox-ui 6.0.1 → 7.0.0

package/dist/{trace-workspace-Cfil2Ma9.js → trace-workspace-WJTjp2Id.js}

@@ -1,14 +1,16 @@
-import { t as cn } from "./utils-BER_bdgE.js";
+import { t as cn$1 } from "./utils-BER_bdgE.js";
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-BQlarCIo.js";
 import { t as ProviderIcon } from "./provider-logo-CPKRPHcS.js";
 import { t as AgentGraph$1 } from "./AgentGraph-BGWx9hhS.js";
-import { s as timelineItems, t as useFollowTail } from "./use-follow-tail-DZFn7QDO.js";
+import { s as timelineItems, t as useFollowTail } from "./use-follow-tail-Di1zlndg.js";
+import { SegmentedControl } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { X } from "lucide-react";
-import { activityTiming, ambientStyle, syncAmbient } from "@tangle-network/charts/react/agent-graph/presentation";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { ArrowLeft, ChevronRight, X } from "lucide-react";
+import { formatCost, formatCount, formatSpanDuration } from "@tangle-network/ui/utils";
+import { activityTiming } from "@tangle-network/charts/react/agent-graph/presentation";
 import { AgentTimeline } from "@tangle-network/ui/chat";
-import { runStatus } from "@tangle-network/ui/run";
+import { RunStatusIcon, runStatus } from "@tangle-network/ui/run";
 import { FlowWaterfall, toolGlyph } from "@tangle-network/charts/react";
 import { LatestEvents } from "@tangle-network/charts/react/agent-graph";
 import { useEventStream } from "@tangle-network/ui/hooks";
@@ -426,6 +428,370 @@ function useAgentStream(url, openEventSource, history) {
 		} } : {}
 	};
 }
+// src/run/agent-inspector.tsx
+/** Below the tablet breakpoint the inspector is a full-screen sheet over the run, never a squeezed side pane. */
+const PHONE = "(max-width: 767px)";
+function usePhone() {
+	return useSyncExternalStore((notify) => {
+		const query = matchMedia(PHONE);
+		query.addEventListener("change", notify);
+		return () => query.removeEventListener("change", notify);
+	}, () => matchMedia(PHONE).matches, () => false);
+}
+const WIDTH_KEY = "sandbox-ui:trace-inspector-width";
+const MIN_PX = 360;
+const MIN_LEFT_PX = 320;
+const STEP = .02;
+const readWidth = () => {
+	try {
+		const value = Number(localStorage.getItem(WIDTH_KEY));
+		return value > 0 && value < 1 ? value : .4;
+	} catch {
+		return .4;
+	}
+};
+/** The docked inspector's share of the workspace: dragged or arrowed, remembered for this viewer, never under 360px. */
+function useSplit(root) {
+	const [fraction, setFraction] = useState(.4), [total, setTotal] = useState(0);
+	useEffect(() => setFraction(readWidth()), []);
+	useEffect(() => {
+		const element = root.current;
+		if (!element) return;
+		const observer = new ResizeObserver(([entry]) => requestAnimationFrame(() => setTotal(entry.contentRect.width)));
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [root]);
+	const max = total ? Math.max(MIN_PX, total - MIN_LEFT_PX) : Infinity;
+	const width = Math.round(Math.min(max, Math.max(MIN_PX, fraction * (total || 1e3))));
+	const commit = (next) => {
+		const value = Math.min(.85, Math.max(.1, next));
+		setFraction(value);
+		try {
+			localStorage.setItem(WIDTH_KEY, String(value));
+		} catch {}
+	};
+	return {
+		width,
+		separator: {
+			role: "separator",
+			tabIndex: 0,
+			"aria-orientation": "vertical",
+			"aria-label": "Resize agent inspector",
+			"aria-valuemin": total ? Math.round(MIN_PX / total * 100) : 0,
+			"aria-valuemax": total ? Math.round(max / total * 100) : 100,
+			"aria-valuenow": total ? Math.round(width / total * 100) : Math.round(fraction * 100),
+			onKeyDown: (event) => {
+				const by = event.key === "ArrowLeft" ? STEP : event.key === "ArrowRight" ? -.02 : 0;
+				if (by) {
+					event.preventDefault();
+					commit(width / (total || 1e3) + by);
+				}
+			},
+			onPointerDown: (event) => {
+				const box = root.current?.getBoundingClientRect();
+				if (!box) return;
+				event.preventDefault();
+				const handle = event.currentTarget;
+				handle.setPointerCapture(event.pointerId);
+				const move = (next) => commit((box.right - next.clientX) / box.width);
+				const stop = () => {
+					handle.removeEventListener("pointermove", move);
+					handle.removeEventListener("pointerup", stop);
+					handle.removeEventListener("pointercancel", stop);
+				};
+				handle.addEventListener("pointermove", move);
+				handle.addEventListener("pointerup", stop);
+				handle.addEventListener("pointercancel", stop);
+			}
+		}
+	};
+}
+/**
+* The height the waterfall rows or graph may take so the run fills its pane: their own height plus the room left under
+* the chart's last row (toolbar, axis and latest activity keep theirs). FlowWaterfall sizes its virtualized rows by `maxHeight`, so it is measured, not styled.
+*/
+function useFillHeight(pane) {
+	const [height, setHeight] = useState();
+	useEffect(() => {
+		const element = pane.current;
+		if (!element) return;
+		let frame = 0;
+		const measure = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				const root = element.querySelector(".fw-root");
+				const target = [...element.querySelectorAll("[data-trace-graph], .fw-scroller")].find((candidate) => candidate.offsetHeight > 0);
+				if (!root || !target) return;
+				const style = getComputedStyle(root), bottom = Math.max(...[...root.children].map((child) => child.getBoundingClientRect().bottom));
+				const slack = root.getBoundingClientRect().bottom - parseFloat(style.paddingBottom) - parseFloat(style.borderBottomWidth) - bottom;
+				const next = Math.floor(target.offsetHeight + slack);
+				if (next > 160) setHeight((prior) => prior !== void 0 && Math.abs(prior - next) < 2 ? prior : next);
+			});
+		};
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		const watch = new MutationObserver(() => {
+			const root = element.querySelector(".fw-root");
+			if (root) observer.observe(root);
+			measure();
+		});
+		watch.observe(element, {
+			childList: true,
+			subtree: true
+		});
+		const root = element.querySelector(".fw-root");
+		if (root) observer.observe(root);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+			watch.disconnect();
+		};
+	}, [pane]);
+	return height;
+}
+/** Text held to a few lines with a control to read the rest; the control appears only when lines are hidden. */
+function Clamped({ text, lines, className }) {
+	const [open, setOpen] = useState(false), [over, setOver] = useState(false), ref = useRef(null);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element || open) return;
+		const measure = () => setOver(element.scrollHeight > element.clientHeight + 1);
+		measure();
+		const observer = new ResizeObserver(() => requestAnimationFrame(measure));
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [
+		text,
+		open,
+		lines
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsx("p", {
+			ref,
+			className: cn$1("m-0 whitespace-pre-wrap break-words", !open && (lines === 2 ? "line-clamp-2" : "line-clamp-3"), className),
+			children: text
+		}), (over || open) && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-expanded": open,
+			onClick: () => setOpen(!open),
+			className: "mt-0.5 rounded-sm text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-[hsl(var(--ring))]",
+			children: open ? "Show less" : "Show all"
+		})]
+	});
+}
+/** Fresh input, cached input and output as one stacked bar, so the split reads at a glance and its numbers stay in the line. */
+function TokenBar({ fresh, cached, out }) {
+	const total = fresh + cached + out;
+	if (!total) return null;
+	const parts = [
+		[
+			"fresh in",
+			fresh,
+			"var(--chart-series-1)"
+		],
+		[
+			"cached in",
+			cached,
+			"var(--chart-muted)"
+		],
+		[
+			"out",
+			out,
+			"var(--chart-series-2)"
+		]
+	];
+	const label = parts.filter(([, value]) => value).map(([name, value]) => `${formatCount(value)} ${name}`).join(", ");
+	return /* @__PURE__ */ jsx("span", {
+		role: "img",
+		"aria-label": `Tokens: ${label}`,
+		title: label,
+		className: "flex h-1 w-full overflow-hidden rounded-full bg-muted",
+		children: parts.map(([name, value, color]) => value ? /* @__PURE__ */ jsx("span", { style: {
+			width: `${value / total * 100}%`,
+			background: color
+		} }, name) : null)
+	});
+}
+/** The header's one line of numbers, from the agent's own span: duration, cost and tokens; unknowns are left out. */
+function metaOf(span) {
+	if (!span) return {
+		line: [],
+		tokens: void 0
+	};
+	const line = [];
+	if (span.endMs > span.startMs) line.push(formatSpanDuration(span.endMs - span.startMs));
+	if (span.costUsd) line.push((span.costBound === "lower" ? "≥" : "") + formatCost(span.costUsd));
+	const input = span.promptTokens ?? 0, out = span.completionTokens ?? 0, cached = Math.min(span.cachedTokens ?? 0, input);
+	if (input) line.push(`${formatCount(input)} in`);
+	if (out) line.push(`${formatCount(out)} out`);
+	return {
+		line,
+		tokens: input || out ? {
+			fresh: input - cached,
+			cached,
+			out
+		} : void 0
+	};
+}
+/** Facts the header already states are not repeated in Details. */
+const IN_HEADER = /^(tokens|cost|duration|failure|model)$/i;
+/** The selected agent: a compact header, its failure, its commission, then its conversation; recorded facts wait in Details. */
+function AgentInspector({ name, model, status, span, live, failure, commission, facts, detail, children, scroller, unseen, onJump, onClose, mode, style }) {
+	const brand = model ? modelBrandFor(model) : null, meta = metaOf(span);
+	const details = facts.filter((fact) => !IN_HEADER.test(fact.label) && fact.value !== failure);
+	const back = useRef(null);
+	const sheet = mode === "sheet";
+	useEffect(() => {
+		if (!sheet) return;
+		const opener = document.activeElement, overflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		back.current?.focus();
+		return () => {
+			document.body.style.overflow = overflow;
+			if (opener?.isConnected) opener.focus();
+		};
+	}, [sheet]);
+	return /* @__PURE__ */ jsxs("aside", {
+		role: sheet ? "dialog" : void 0,
+		"aria-modal": sheet || void 0,
+		"aria-label": `${name} conversation`,
+		style,
+		onKeyDown: (event) => {
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				onClose();
+			}
+		},
+		className: cn$1("relative flex min-h-0 flex-col overflow-hidden bg-card text-foreground", mode === "docked" && "shrink-0 rounded-xl border border-border", mode === "overlay" && "fixed inset-y-0 right-0 z-40 w-full max-w-[420px] border-l border-border shadow-2xl", sheet && "fixed inset-0 z-[1100] bg-background"),
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex shrink-0 items-start gap-2 border-b border-border px-3 py-2.5",
+				children: [
+					sheet && /* @__PURE__ */ jsxs("button", {
+						ref: back,
+						type: "button",
+						onClick: onClose,
+						"aria-label": "Back to the run",
+						className: "-ml-1 flex h-9 shrink-0 items-center gap-1 rounded-md px-1.5 text-sm text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-[hsl(var(--ring))]",
+						children: [/* @__PURE__ */ jsx(ArrowLeft, {
+							"aria-hidden": true,
+							className: "h-4 w-4"
+						}), "Back"]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cn$1("min-w-0 flex-1", sheet && "pt-2"),
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 items-start gap-2",
+								children: [
+									/* @__PURE__ */ jsx(RunStatusIcon, {
+										status,
+										className: "mt-0.5 size-4 shrink-0"
+									}),
+									/* @__PURE__ */ jsx("h3", {
+										className: "m-0 min-w-0 flex-1 break-words text-sm font-semibold leading-5",
+										children: name
+									}),
+									live && /* @__PURE__ */ jsxs("span", {
+										className: "flex shrink-0 items-center gap-1 text-xs font-medium text-[var(--surface-info-text)]",
+										children: [/* @__PURE__ */ jsx("span", {
+											"aria-hidden": true,
+											className: "h-1.5 w-1.5 rounded-full bg-current"
+										}), "Live"]
+									})
+								]
+							}),
+							(model || meta.line.length > 0) && /* @__PURE__ */ jsxs("p", {
+								className: "m-0 mt-1 min-w-0 text-xs tabular-nums text-muted-foreground",
+								children: [brand && /* @__PURE__ */ jsx("span", {
+									className: "mr-1.5 inline-flex align-[-3px]",
+									children: /* @__PURE__ */ jsx(ModelBrandStack, {
+										identity: brand,
+										size: "sm"
+									})
+								}), [model, ...meta.line].filter(Boolean).join(" · ")]
+							}),
+							meta.tokens && /* @__PURE__ */ jsx("div", {
+								className: "mt-1.5 max-w-[240px]",
+								children: /* @__PURE__ */ jsx(TokenBar, { ...meta.tokens })
+							})
+						]
+					}),
+					!sheet && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Close conversation",
+						title: "Close (Esc)",
+						onClick: onClose,
+						className: "shrink-0 rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-[hsl(var(--ring))]",
+						children: /* @__PURE__ */ jsx(X, {
+							"aria-hidden": true,
+							className: "h-4 w-4"
+						})
+					})
+				]
+			}),
+			failure && /* @__PURE__ */ jsx("section", {
+				"aria-label": "Failure",
+				className: "shrink-0 border-b border-border px-3 py-2 text-sm text-[var(--surface-danger-text)]",
+				children: /* @__PURE__ */ jsx(Clamped, {
+					text: failure,
+					lines: 3
+				})
+			}),
+			commission && (commission.text || commission.by) && /* @__PURE__ */ jsxs("section", {
+				"aria-label": "Commission",
+				className: "shrink-0 border-b border-border px-3 py-2 text-sm",
+				children: [commission.by && /* @__PURE__ */ jsxs("p", {
+					className: "m-0 text-xs text-muted-foreground",
+					children: ["from ", commission.by]
+				}), commission.text && /* @__PURE__ */ jsx(Clamped, {
+					text: commission.text,
+					lines: 2
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: scroller,
+				"data-primary-content": "",
+				className: "min-h-0 flex-1 overflow-y-auto px-3 py-2",
+				children
+			}),
+			unseen && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onJump,
+				className: "absolute bottom-14 left-1/2 -translate-x-1/2 rounded-full border border-border bg-background px-3 py-1 text-xs shadow-sm",
+				children: "New output"
+			}),
+			(details.length > 0 || detail) && /* @__PURE__ */ jsxs("details", {
+				className: "group max-h-[45%] shrink-0 overflow-y-auto border-t border-border text-sm",
+				children: [/* @__PURE__ */ jsxs("summary", {
+					className: "flex cursor-pointer list-none items-center gap-1.5 px-3 py-2 text-xs font-medium text-muted-foreground hover:text-foreground [&::-webkit-details-marker]:hidden",
+					children: [/* @__PURE__ */ jsx(ChevronRight, {
+						"aria-hidden": true,
+						className: "h-3.5 w-3.5 transition-transform group-open:rotate-90"
+					}), "Details"]
+				}), /* @__PURE__ */ jsxs("section", {
+					"aria-label": "Recorded agent details",
+					tabIndex: 0,
+					className: "px-3 pb-3",
+					children: [details.length > 0 && /* @__PURE__ */ jsx("dl", {
+						className: "m-0 grid grid-cols-[minmax(0,auto)_minmax(0,1fr)] gap-x-3 gap-y-1",
+						children: details.map((fact, index) => /* @__PURE__ */ jsxs("div", {
+							className: "contents",
+							children: [/* @__PURE__ */ jsx("dt", {
+								className: "text-xs text-muted-foreground",
+								children: fact.label
+							}), /* @__PURE__ */ jsx("dd", {
+								className: "m-0 whitespace-pre-wrap break-words text-xs",
+								children: fact.value
+							})]
+						}, index))
+					}), detail]
+				})]
+			})
+		]
+	});
+}
 // src/run/trace-workspace.tsx
 /** The agent that owns a span: the span itself when it is an agent, else its nearest agent ancestor. */
 function agentOf(span, byId) {
@@ -515,11 +881,11 @@ function agentGraphAt(spans, byId, at, epoch, cards, extraEdges = []) {
 	};
 }
 /**
-* The run workspace: the agent timeline and span waterfall over one clock, the selected agent's conversation
-* streaming in a right-hand drawer, and the page's code workspace and scoreboard following the time cursor. Scrubbing is time travel:
+* The run workspace: the agent timeline and span waterfall over one clock, filling its parent's height, with the selected
+* agent's conversation at the center of its inspector, and the page's code workspace and scoreboard following the time cursor. Scrubbing is time travel:
 * every panel shows what was true at the cursor, and the conversation shows what had been said by then.
 */
-function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChange, files, scoreboard, selectedAgentId, conversationOpen, onSelectAgent, renderAgentDrawer, docked, commission, agentCards, agentGraph, className, ...waterfall }) {
+function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChange, files, scoreboard, selectedAgentId, conversationOpen, onSelectAgent, renderAgentDrawer, transcriptNote, docked, commission, agentCards, agentGraph, className, ...waterfall }) {
 	const byId = useMemo(() => new Map(trace.spans.flatMap((span) => span.id ? [[span.id, span]] : [])), [trace]);
 	const [ownSelection, setOwnSelection] = useState();
 	const selected = selectedAgentId ?? ownSelection;
@@ -568,11 +934,35 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 		identity: showConversation ? selected : void 0,
 		content: items
 	});
+	const root = useRef(null), pane = useRef(null);
+	const phone = usePhone(), split = useSplit(root), fill = useFillHeight(pane);
+	const mode = phone ? "sheet" : docked ? "docked" : "overlay";
+	const status = live ? "running" : selectedNode?.status ?? runStatus(agent?.status ?? "unknown");
+	const failure = facts.find((fact) => fact.label === "Failure")?.value ?? (status === "failed" ? selectedNode?.result ?? void 0 : void 0);
+	const said = (text) => !!text && shown.some((entry) => entry.kind === "message" && entry.role === "user" && entry.content.trim() === text.trim());
+	const silent = agentId && transcriptNote?.(agentId) || "No conversation was recorded for this agent.";
+	const conversation = !streamUrl ? /* @__PURE__ */ jsx("p", {
+		className: "p-4 text-sm text-muted-foreground",
+		children: silent
+	}) : cursor !== null && origin === void 0 ? /* @__PURE__ */ jsx("p", {
+		className: "p-4 text-sm text-muted-foreground",
+		children: "This conversation has no timestamps to replay at the cursor."
+	}) : /* @__PURE__ */ jsx(AgentTimeline, {
+		items,
+		isThinking: live && items.length === 0,
+		emptyState: /* @__PURE__ */ jsx("p", {
+			className: "p-4 text-sm text-muted-foreground",
+			"data-stream": stream.error ? "reconnecting" : ended ? "ended" : "empty",
+			children: stream.error ? ended ? stream.error : `Reconnecting… ${stream.error}` : ended ? silent : "No messages yet."
+		})
+	});
 	const left = /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
-			className: showConversation && !docked ? "min-w-0 lg:mr-[420px]" : "min-w-0",
+			ref: pane,
+			className: cn$1("flex min-h-[320px] min-w-0 flex-1 flex-col", showConversation && mode === "overlay" && "lg:mr-[420px]"),
 			children: /* @__PURE__ */ jsx(TraceWaterfall, {
 				...waterfall,
+				maxHeight: fill ?? waterfall.maxHeight,
 				trace,
 				markers: events,
 				selectedId: agentId,
@@ -593,23 +983,22 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 					onSelect: select
 				}),
 				graph: /* @__PURE__ */ jsxs("section", {
-					className: "flex h-[60vh] min-h-[480px] flex-col",
+					"data-trace-graph": "",
+					className: "relative flex min-h-[320px] flex-col",
+					style: { height: fill ?? "max(60vh, 480px)" },
 					"aria-label": "Agent graph",
-					children: [/* @__PURE__ */ jsxs("label", {
-						className: "flex h-8 shrink-0 items-center justify-end gap-2 px-3 text-xs text-muted-foreground",
-						children: ["Layout", /* @__PURE__ */ jsxs("select", {
-							"aria-label": "Graph layout",
-							value: graphLayout,
-							onChange: (event) => setGraphLayout(event.currentTarget.value),
-							className: "rounded-[var(--radius-control)] border border-border bg-card px-2 py-1 text-foreground",
-							children: [/* @__PURE__ */ jsx("option", {
-								value: "tree",
-								children: "Tree"
-							}), /* @__PURE__ */ jsx("option", {
-								value: "hub",
-								children: "Hub"
-							})]
-						})]
+					children: [/* @__PURE__ */ jsx(SegmentedControl, {
+						"aria-label": "Graph layout",
+						value: graphLayout,
+						onValueChange: setGraphLayout,
+						className: "absolute right-2 top-1 z-10",
+						options: [{
+							value: "tree",
+							label: "Tree"
+						}, {
+							value: "hub",
+							label: "Hub"
+						}]
 					}), /* @__PURE__ */ jsx(AgentGraph$1, {
 						...graphOptions,
 						layout: graphLayout,
@@ -626,116 +1015,53 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 							"needs-you",
 							"failed"
 						].includes(node.status)),
-						className: cn("min-h-0 flex-1", graphOptions.className)
+						className: cn$1("min-h-0 flex-1", graphOptions.className)
 					})]
 				})
 			})
 		}),
 		files && /* @__PURE__ */ jsx("section", {
 			"aria-label": "Code at the cursor",
-			className: "flex h-[70vh] min-h-0 flex-col overflow-hidden rounded-xl border border-border bg-card",
+			className: "flex h-[70vh] min-h-0 shrink-0 flex-col overflow-hidden rounded-xl border border-border bg-card",
 			children: files
 		}),
 		scoreboard && /* @__PURE__ */ jsx("section", {
 			"aria-label": "Scoreboard at the cursor",
-			className: "overflow-hidden rounded-xl border border-border bg-card",
+			className: "shrink-0 overflow-hidden rounded-xl border border-border bg-card",
 			children: scoreboard
 		})
 	] });
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("sandbox-trace-workspace flex min-h-0 gap-3", docked && showConversation ? "flex-row" : "flex-col", className),
-		children: [docked && showConversation ? /* @__PURE__ */ jsx("div", {
-			className: "flex min-w-0 flex-1 flex-col gap-3",
+		ref: root,
+		className: cn$1("sandbox-trace-workspace flex h-full min-h-0 flex-row", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn$1("flex min-h-0 min-w-0 flex-1 flex-col gap-3", (files || scoreboard) && "overflow-y-auto"),
 			children: left
-		}) : left, showConversation && /* @__PURE__ */ jsxs("aside", {
-			"aria-label": `${agentName} conversation`,
-			onKeyDown: (event) => {
-				if (event.key === "Escape") select(void 0);
-			},
-			className: docked ? "flex min-h-0 w-[clamp(320px,32vw,560px)] shrink-0 resize-x flex-col overflow-hidden rounded-xl border border-border bg-card" : "fixed inset-y-0 right-0 z-40 flex w-full max-w-[420px] flex-col border-l border-border bg-card shadow-2xl",
-			children: [
-				/* @__PURE__ */ jsxs("header", {
-					className: "flex shrink-0 items-center gap-2 border-b border-border px-3 py-2",
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: cn("h-1.5 w-1.5 shrink-0 rounded-full", live ? "bg-[var(--surface-info-text)]" : "bg-muted-foreground"),
-							"aria-hidden": true,
-							"data-motion": live ? "essential" : void 0,
-							style: live ? ambientStyle : void 0,
-							onAnimationStart: syncAmbient
-						}),
-						/* @__PURE__ */ jsx("h3", {
-							className: "min-w-0 flex-1 truncate text-sm font-semibold",
-							children: agentName
-						}),
-						agentModel && /* @__PURE__ */ jsx("span", {
-							className: "truncate text-xs text-muted-foreground",
-							children: agentModel
-						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							"aria-label": "Close conversation",
-							title: "Close (Esc)",
-							onClick: () => select(void 0),
-							className: "shrink-0 rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
-							children: /* @__PURE__ */ jsx(X, {
-								"aria-hidden": true,
-								className: "h-4 w-4"
-							})
-						})
-					]
-				}),
-				(facts.length > 0 || detail) && /* @__PURE__ */ jsxs("section", {
-					"aria-label": "Recorded agent details",
-					tabIndex: 0,
-					className: "max-h-[35vh] shrink-0 overflow-y-auto border-b border-border px-3 py-2 text-sm",
-					children: [facts.length > 0 && /* @__PURE__ */ jsx("dl", {
-						className: "space-y-2",
-						children: facts.map((fact, index) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
-							className: "text-xs text-muted-foreground",
-							children: fact.label
-						}), /* @__PURE__ */ jsx("dd", {
-							className: "m-0 whitespace-pre-wrap break-words",
-							children: fact.value
-						})] }, index))
-					}), detail]
-				}),
-				commission && (commission.text || commission.by) && /* @__PURE__ */ jsxs("section", {
-					"aria-label": "Commission",
-					className: "shrink-0 border-b border-border bg-muted/40 px-3 py-2 text-sm",
-					children: [commission.by && /* @__PURE__ */ jsxs("p", {
-						className: "m-0 mb-1 text-xs text-muted-foreground",
-						children: ["commissioned by ", commission.by]
-					}), commission.text && /* @__PURE__ */ jsx("p", {
-						className: "m-0 line-clamp-6 whitespace-pre-wrap break-words",
-						children: commission.text
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					ref: scroller,
-					"data-primary-content": "",
-					className: "min-h-0 flex-1 overflow-y-auto px-3 py-2",
-					children: streamUrl && (cursor === null || origin !== void 0) ? /* @__PURE__ */ jsx(AgentTimeline, {
-						items,
-						isThinking: live && items.length === 0,
-						emptyState: /* @__PURE__ */ jsx("p", {
-							className: "p-4 text-sm text-muted-foreground",
-							"data-stream": stream.error ? "reconnecting" : ended ? "ended" : "empty",
-							children: stream.error ? ended ? stream.error : `Reconnecting… ${stream.error}` : ended ? "The conversation ended." : "No messages yet."
-						})
-					}) : /* @__PURE__ */ jsx("p", {
-						className: "p-4 text-sm text-muted-foreground",
-						children: "Conversation: not time-indexed"
-					})
-				}),
-				unseen && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: () => jump(),
-					className: "absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full border border-border bg-background px-3 py-1 text-xs shadow-sm",
-					children: "New output"
-				})
-			]
-		})]
+		}), showConversation && agentId && /* @__PURE__ */ jsxs(Fragment, { children: [mode === "docked" && /* @__PURE__ */ jsx("div", {
+			...split.separator,
+			className: "group relative w-3 shrink-0 cursor-col-resize touch-none outline-none",
+			children: /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-border transition-colors group-hover:bg-[hsl(var(--ring))] group-focus-visible:w-0.5 group-focus-visible:bg-[hsl(var(--ring))]"
+			})
+		}), /* @__PURE__ */ jsx(AgentInspector, {
+			name: agentName ?? agentId,
+			model: agentModel && !/^not recorded$/i.test(agentModel) ? agentModel : void 0,
+			status,
+			span: agent,
+			live,
+			failure,
+			commission: said(commission?.text) ? { by: commission?.by } : commission,
+			facts,
+			detail,
+			scroller,
+			unseen,
+			onJump: () => jump(),
+			onClose: () => select(void 0),
+			mode,
+			style: mode === "docked" ? { width: split.width } : void 0,
+			children: conversation
+		})] })]
 	});
 }
 export { useEventStream as a, useAgentStream as i, LatestEvents as n, TraceWaterfall as o, foldAgentRows as r, traceSpanMark as s, TraceWorkspace as t };