@tangle-network/sandbox-ui 4.0.1 → 6.0.0

package/dist/{trace-workspace-BULdFHrf.js → trace-workspace-CTMV8zw_.js}

@@ -3,7 +3,7 @@ import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-BQlarCIo
 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 { jsx, jsxs } from "react/jsx-runtime";
+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";
@@ -176,6 +176,7 @@ function foldAgentRows(entries, rows) {
 const empty = (identity, history) => ({
 	identity,
 	rows: [],
+	entries: [],
 	first: null,
 	lastSeq: -1,
 	alive: !!identity && (history?.alive ?? true),
@@ -195,9 +196,11 @@ function receive(prior, page, direction, fromHead) {
 	if (trimmed) rows = prior.reading ? rows.slice(0, 2e3) : rows.slice(-2e3);
 	const first = fresh ? page.firstSeq ?? rows[0]?.seq ?? null : direction === "before" ? page.firstSeq ?? prior.first : trimmed && !prior.reading ? rows[0]?.seq ?? prior.first : prior.first;
 	const lastSeq = fresh ? page.lastSeq ?? rows.at(-1)?.seq ?? -1 : direction === "before" ? prior.lastSeq : page.lastSeq ?? rows.at(-1)?.seq ?? prior.lastSeq;
+	const entries = fresh ? foldAgentRows([], rows) : direction === "after" ? foldAgentRows(prior.entries, page.events) : foldAgentRows([], rows);
 	return {
 		...prior,
 		rows,
+		entries,
 		first,
 		lastSeq,
 		generation: page.generation ?? prior.generation,
@@ -356,9 +359,9 @@ function useAgentStream(url, openEventSource, history) {
 			})
 		}
 	});
-	let entries = [], error = state.error;
-	try {
-		entries = foldAgentRows([], history?.projectRows?.(state.rows) ?? state.rows);
+	let entries = state.entries, error = state.error;
+	if (history?.projectRows) try {
+		entries = foldAgentRows([], history.projectRows(state.rows) ?? state.rows);
 	} catch (cause) {
 		error = cause instanceof Error ? cause.message : String(cause);
 	}
@@ -482,7 +485,7 @@ function agentGraphAt(spans, byId, at, epoch, cards, extraEdges = []) {
 * streaming in a right-hand drawer, 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, agentCards, agentGraph, className, ...waterfall }) {
+function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChange, files, scoreboard, selectedAgentId, conversationOpen, onSelectAgent, renderAgentDrawer, 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;
@@ -493,6 +496,7 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 	const agent = selected ? byId.get(selected) : void 0, card = selected ? agentCards?.[selected] : void 0;
 	const agentId = agent?.id ?? (card ? selected : void 0), agentName = agent?.name ?? card?.label ?? agentId, agentModel = agent?.detail ?? card?.model;
 	const showConversation = !!agentId && conversationOpen !== false;
+	const detail = showConversation && agentId ? renderAgentDrawer?.(agentId) : void 0;
 	const { defaultLayout = "tree", ...graphOptions } = agentGraph ?? {};
 	const [graphLayout, setGraphLayout] = useState(defaultLayout);
 	const [cursor, setCursor] = useState(null);
@@ -523,165 +527,181 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 	const graphNow = cursor !== null && waterfall.startedAt !== void 0 ? waterfall.startedAt + cursor : void 0;
 	const shown = cursor === null || origin === void 0 ? stream.entries : stream.entries.filter((entry) => entry.at - origin <= cursor);
 	const live = stream.alive && !stream.error && cursor === null;
+	const ended = !stream.alive && !stream.error;
 	const items = useMemo(() => timelineItems(shown, live), [shown, live]);
 	const scroller = useRef(null);
 	const { unseen, jump } = useFollowTail(scroller, {
 		identity: showConversation ? selected : void 0,
 		content: items
 	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("sandbox-trace-workspace flex min-h-0 flex-col gap-3", className),
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: showConversation ? "min-w-0 lg:mr-[420px]" : "min-w-0",
-				children: /* @__PURE__ */ jsx(TraceWaterfall, {
-					...waterfall,
-					trace,
-					markers: events,
+	const left = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: showConversation && !docked ? "min-w-0 lg:mr-[420px]" : "min-w-0",
+			children: /* @__PURE__ */ jsx(TraceWaterfall, {
+				...waterfall,
+				trace,
+				markers: events,
+				selectedId: agentId,
+				onDeselect: () => select(void 0),
+				onSelect: (span) => {
+					const owner = agentOf(span, byId);
+					if (owner?.id) select(owner.id);
+				},
+				onTimeChange: (time) => {
+					setCursor(time);
+					onTimeChange?.(time);
+				},
+				latestEvents: /* @__PURE__ */ jsx(LatestEvents, {
+					agents: graph.nodes,
+					now: graphNow,
+					live: cursor === null,
 					selectedId: agentId,
-					onDeselect: () => select(void 0),
-					onSelect: (span) => {
-						const owner = agentOf(span, byId);
-						if (owner?.id) select(owner.id);
-					},
-					onTimeChange: (time) => {
-						setCursor(time);
-						onTimeChange?.(time);
-					},
-					latestEvents: /* @__PURE__ */ jsx(LatestEvents, {
-						agents: graph.nodes,
-						now: graphNow,
-						live: cursor === null,
-						selectedId: agentId,
-						onSelect: select
-					}),
-					graph: /* @__PURE__ */ jsxs("section", {
-						className: "flex h-[60vh] min-h-[480px] flex-col",
-						"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"
-								})]
+					onSelect: select
+				}),
+				graph: /* @__PURE__ */ jsxs("section", {
+					className: "flex h-[60vh] min-h-[480px] flex-col",
+					"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"
 							})]
-						}), /* @__PURE__ */ jsx(AgentGraph$1, {
-							...graphOptions,
-							layout: graphLayout,
-							renderEventIcon: (event) => toolGlyph(event.label),
-							nodes: graph.nodes,
-							edges: graph.edges,
-							selectedId: agentId ?? null,
-							onSelect: select,
-							showLatestEvents: false,
-							now: graphNow,
-							live: cursor === null && graph.nodes.some((node) => [
-								"running",
-								"waiting",
-								"needs-you",
-								"failed"
-							].includes(node.status)),
-							className: cn("min-h-0 flex-1", graphOptions.className)
 						})]
-					})
+					}), /* @__PURE__ */ jsx(AgentGraph$1, {
+						...graphOptions,
+						layout: graphLayout,
+						renderEventIcon: (event) => toolGlyph(event.label),
+						nodes: graph.nodes,
+						edges: graph.edges,
+						selectedId: agentId ?? null,
+						onSelect: select,
+						showLatestEvents: false,
+						now: graphNow,
+						live: cursor === null && graph.nodes.some((node) => [
+							"running",
+							"waiting",
+							"needs-you",
+							"failed"
+						].includes(node.status)),
+						className: cn("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",
-				children: files
-			}),
-			scoreboard && /* @__PURE__ */ jsx("section", {
-				"aria-label": "Scoreboard at the cursor",
-				className: "overflow-hidden rounded-xl border border-border bg-card",
-				children: scoreboard
-			}),
-			showConversation && /* @__PURE__ */ jsxs("aside", {
-				"aria-label": `${agentName} conversation`,
-				onKeyDown: (event) => {
-					if (event.key === "Escape") select(void 0);
-				},
-				className: "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"),
+			})
+		}),
+		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",
+			children: files
+		}),
+		scoreboard && /* @__PURE__ */ jsx("section", {
+			"aria-label": "Scoreboard at the cursor",
+			className: "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",
+			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,
-								"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"
-								})
+								className: "h-4 w-4"
 							})
-						]
-					}),
-					facts.length > 0 && /* @__PURE__ */ jsx("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: /* @__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))
 						})
-					}),
-					/* @__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",
-								children: stream.error ?? "No messages yet."
-							})
-						}) : /* @__PURE__ */ jsx("p", {
+					]
+				}),
+				(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",
-							children: "Conversation: not time-indexed"
+							"data-stream": stream.error ? "reconnecting" : ended ? "ended" : "empty",
+							children: stream.error ? ended ? stream.error : `Reconnecting… ${stream.error}` : ended ? "The conversation ended." : "No messages yet."
 						})
-					}),
-					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"
+					}) : /* @__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"
+				})
+			]
+		})]
 	});
 }
 export { useEventStream as a, useAgentStream as i, LatestEvents as n, TraceWaterfall as o, foldAgentRows as r, traceSpanMark as s, TraceWorkspace as t };