@tangle-network/sandbox-ui 3.0.2 → 4.0.0

package/dist/styles.css

@@ -3968,6 +3968,18 @@
   .text-\[var\(--surface-warning-text\)\] {
     color: var(--surface-warning-text);
   }
+  .text-\[var\(--syntax-function\,currentColor\)\] {
+    color: var(--syntax-function,currentColor);
+  }
+  .text-\[var\(--syntax-keyword\,currentColor\)\] {
+    color: var(--syntax-keyword,currentColor);
+  }
+  .text-\[var\(--syntax-number\,currentColor\)\] {
+    color: var(--syntax-number,currentColor);
+  }
+  .text-\[var\(--syntax-string\,currentColor\)\] {
+    color: var(--syntax-string,currentColor);
+  }
   .text-\[var\(--text-dim\)\] {
     color: var(--text-dim);
   }
@@ -5991,9 +6003,6 @@
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    .sm\:p-4 {
-      padding: calc(var(--spacing) * 4);
-    }
     .sm\:p-5 {
       padding: calc(var(--spacing) * 5);
     }

package/dist/{trace-workspace-BiJbv9WQ.js → trace-workspace-B634-EcA.js}

@@ -2,13 +2,13 @@ import { t as cn } 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 { t as useFollowTail } from "./use-follow-tail-Ht7fZGQQ.js";
+import { s as timelineItems, t as useFollowTail } from "./use-follow-tail-DZFn7QDO.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useReducer, useRef, useState } from "react";
+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 { AgentTimeline } from "@tangle-network/ui/chat";
-import { InlineThinkingItem, runStatus } from "@tangle-network/ui/run";
+import { 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";
@@ -42,6 +42,16 @@ function TraceWaterfall({ renderIcon = traceSpanMark, ...props }) {
 	});
 }
 // src/run/agent-stream.ts
+const textOf = (value) => value == null ? void 0 : typeof value === "string" ? value : JSON.stringify(value);
+const failed = (value) => typeof value === "object" && value !== null && ("error" in value || value.is_error === true || value.isError === true);
+const recorded = (text) => {
+	try {
+		const value = JSON.parse(text);
+		return value && typeof value === "object" ? `\`\`\`json\n${text}\n\`\`\`` : text;
+	} catch {
+		return text;
+	}
+};
 const TOOL_TYPES = /* @__PURE__ */ new Set([
 	"bash",
 	"read",
@@ -54,215 +64,330 @@ const TOOL_TYPES = /* @__PURE__ */ new Set([
 	"inspect",
 	"audit"
 ]);
-const toolType = (name) => {
-	const key = (name ?? "").toLowerCase();
-	return TOOL_TYPES.has(key) ? key : "unknown";
-};
-const toolText = (value) => {
-	if (value === void 0 || value === null) return void 0;
-	return typeof value === "string" ? value : JSON.stringify(value);
-};
-const failed = (result) => typeof result === "object" && result !== null && ("error" in result || result.is_error === true);
-const recorded = (text) => {
-	try {
-		const value = JSON.parse(text);
-		return typeof value === "object" && value !== null ? `\`\`\`json\n${text}\n\`\`\`` : text;
-	} catch {
-		return text;
-	}
-};
-/** Fold stream rows into transcript entries: text of one turn merges, a tool call becomes a row its result completes. */
 function foldAgentRows(entries, rows) {
 	const next = [...entries];
 	for (const row of rows) {
-		const at = Date.parse(row.at);
-		const { event } = row;
-		const last = next[next.length - 1];
-		if (event.kind === "text" && event.text) {
-			if (last?.kind === "message" && last.role === "assistant" && !last.sealed) next[next.length - 1] = {
+		const event = row.event;
+		if (!event) continue;
+		const at = Date.parse(row.at ?? ""), scope = JSON.stringify([row.stream ?? null, row.attempt ?? null]);
+		const base = {
+			id: event.id ?? `${scope}:${row.seq}`,
+			at,
+			scope,
+			attempt: row.attempt,
+			provenance: event.provenance,
+			isError: event.isError
+		}, last = next.at(-1);
+		const kind = event.kind.replaceAll("_", "-").replace(/-delta$/, "");
+		if ((kind === "text" || kind === "reasoning") && event.text) {
+			if (kind === "text") {
+				if (last?.kind === "message" && last.role === "assistant" && !last.sealed && last.scope === scope && !event.sealed) next[next.length - 1] = {
+					...last,
+					content: last.content + event.text
+				};
+				else next.push({
+					...base,
+					kind: "message",
+					role: "assistant",
+					content: event.text,
+					sealed: event.sealed ? true : void 0
+				});
+			} else if (last?.kind === "reasoning" && last.scope === scope) next[next.length - 1] = {
 				...last,
-				content: last.content + event.text
+				text: last.text + event.text
 			};
 			else next.push({
-				id: `m-${row.seq}`,
-				at,
-				kind: "message",
-				role: "assistant",
-				content: event.text
+				...base,
+				kind: "reasoning",
+				text: event.text
 			});
-		} else if (event.kind === "user" && event.text) next.push({
-			id: `u-${row.seq}`,
-			at,
+		} else if (kind === "user" && event.text) next.push({
+			...base,
 			kind: "message",
 			role: "user",
 			content: event.text
 		});
-		else if (event.kind === "notice" && event.text) {
-			if (event.provenance === "delegated-input") next.push({
-				id: `u-${row.seq}`,
-				at,
+		else if (kind === "notice" && event.text) {
+			if (event.provenance === "delegated-input" || event.provenance === "recorded-result") next.push({
+				...base,
 				kind: "message",
-				role: "user",
-				content: recorded(event.text)
-			});
-			else if (event.provenance === "recorded-result") next.push({
-				id: `m-${row.seq}`,
-				at,
-				kind: "message",
-				role: "assistant",
+				role: event.provenance === "delegated-input" ? "user" : "assistant",
 				content: recorded(event.text),
 				sealed: true
 			});
 			else next.push({
-				id: `n-${row.seq}`,
-				at,
+				...base,
 				kind: "notice",
 				text: event.text
 			});
-		} else if (event.kind === "reasoning" && event.text) {
-			if (last?.kind === "reasoning") next[next.length - 1] = {
-				...last,
-				text: last.text + event.text
+		} else if (kind === "tool-call" || kind === "tool-result") {
+			const id = JSON.stringify([
+				row.stream ?? null,
+				row.attempt ?? null,
+				event.toolCallId ?? row.seq
+			]);
+			const index = next.findIndex((entry) => entry.kind === "tool" && entry.call.id === id), prior = next[index];
+			if (kind === "tool-call") {
+				const name = event.toolName ?? "tool", type = name.toLowerCase();
+				next.push({
+					...base,
+					id,
+					kind: "tool",
+					name,
+					input: event.args,
+					call: {
+						id,
+						type: TOOL_TYPES.has(type) ? type : "unknown",
+						label: name,
+						status: "running",
+						detail: textOf(event.args)
+					}
+				});
+			} else if (prior?.kind === "tool") next[index] = {
+				...prior,
+				costUsd: event.costUsd ?? prior.costUsd,
+				call: {
+					...prior.call,
+					status: event.isError || failed(event.result) ? "error" : "success",
+					output: textOf(event.result),
+					...event.durationMs !== void 0 ? { duration: event.durationMs } : event.atBasis !== "carried" && Number.isFinite(at) && Number.isFinite(prior.at) ? { duration: Math.max(0, at - prior.at) } : {}
+				}
 			};
 			else next.push({
-				id: `r-${row.seq}`,
-				at,
-				kind: "reasoning",
-				text: event.text
-			});
-		} else if (event.kind === "tool-call") {
-			const id = event.toolCallId ?? `t-${row.seq}`;
-			next.push({
+				...base,
 				id,
-				at,
 				kind: "tool",
 				call: {
 					id,
-					type: toolType(event.toolName),
-					label: event.toolName ?? "tool",
-					status: "running",
-					detail: toolText(event.args)
+					type: "unknown",
+					label: event.toolName ?? "Tool result",
+					status: event.isError || failed(event.result) ? "error" : "success",
+					output: textOf(event.result)
 				}
 			});
-		} else if (event.kind === "tool-result") {
-			const index = next.findIndex((entry) => entry.kind === "tool" && entry.call.id === event.toolCallId);
-			const entry = next[index];
-			if (entry?.kind === "tool") next[index] = {
-				...entry,
-				call: {
-					...entry.call,
-					status: failed(event.result) ? "error" : "success",
-					output: toolText(event.result),
-					duration: Math.max(0, at - entry.at)
-				}
-			};
-		}
+		} else if (event.text) next.push({
+			...base,
+			kind: "notice",
+			text: event.text
+		});
 	}
 	return next;
 }
-function reduce(state, action) {
-	switch (action.type) {
-		case "reset": return {
-			generation: action.generation,
-			entries: [],
-			lastSeq: 0,
-			alive: true
-		};
-		case "rows": {
-			const base = action.generation !== void 0 && action.generation !== state.generation ? {
-				entries: [],
-				lastSeq: 0
-			} : state;
-			const fresh = action.rows.filter((row) => row.seq > base.lastSeq);
-			return {
-				generation: action.generation ?? state.generation,
-				entries: foldAgentRows(base.entries, fresh),
-				lastSeq: fresh.reduce((max, row) => Math.max(max, row.seq), base.lastSeq),
-				alive: action.alive ?? state.alive,
-				error: void 0
-			};
+const empty = (identity, history) => ({
+	identity,
+	rows: [],
+	first: null,
+	lastSeq: -1,
+	alive: !!identity && (history?.alive ?? true),
+	ended: false,
+	loading: !!history,
+	ready: !history,
+	earlier: false,
+	more: false,
+	reading: false
+});
+function receive(prior, page, direction, fromHead) {
+	if (!Array.isArray(page.events)) throw new Error("Invalid agent rows stream");
+	const fresh = direction === "tail" || direction === "head" || page.reset || page.generation !== void 0 && page.generation !== prior.generation;
+	const merged = fresh ? page.events : direction === "before" ? [...page.events, ...prior.rows] : [...prior.rows, ...page.events];
+	let rows = [...new Map(merged.map((row) => [row.seq, row])).values()].sort((a, b) => a.seq - b.seq);
+	const trimmed = rows.length > 2e3;
+	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;
+	return {
+		...prior,
+		rows,
+		first,
+		lastSeq,
+		generation: page.generation ?? prior.generation,
+		alive: page.alive ?? prior.alive,
+		ended: page.alive === false,
+		loading: false,
+		ready: true,
+		error: void 0,
+		earlier: trimmed && direction !== "before" || (direction !== "after" || fresh ? page.hasEarlier ?? (first !== null && first > 0) : prior.earlier),
+		more: direction === "before" ? prior.more : fromHead && !!page.hasMore
+	};
+}
+async function readPage(url, direction, before, signal) {
+	const query = new URL(url, location.href), cursor = direction === "head" ? 200 : direction === "after" ? before.lastSeq : direction === "before" ? before.first : null;
+	query.searchParams.set("limit", "200");
+	if (cursor !== null && cursor >= 0) query.searchParams.set(direction === "head" ? "before" : direction, String(cursor));
+	if (before.generation !== void 0 && cursor !== null) query.searchParams.set("generation", String(before.generation));
+	const response = await fetch(query, {
+		credentials: "same-origin",
+		signal
+	});
+	if (!response.ok) throw new Error(`Transcript unavailable (HTTP ${response.status})`);
+	return response.json();
+}
+function useAgentWindow(url, history) {
+	const identity = url ? JSON.stringify([url, history?.url]) : void 0;
+	const [stored, put] = useState(() => empty(identity, history)), current = useRef(stored);
+	const state = stored.identity === identity ? stored : empty(identity, history);
+	const [head, begin] = useState(), [revision, reload] = useState(0);
+	const beginning = identity !== void 0 && head === identity;
+	const pageReader = useRef(() => {}), previous = useRef({
+		identity,
+		alive: history?.alive
+	});
+	const update = (value) => {
+		if (value.identity === identity) {
+			current.current = value;
+			put(value);
 		}
-		case "end": return {
-			...state,
-			alive: false,
-			error: void 0
+	};
+	useEffect(() => {
+		const retain = previous.current.identity === identity && previous.current.alive && history?.alive === false;
+		previous.current = {
+			identity,
+			alive: history?.alive
 		};
-		case "error": return {
-			...state,
-			error: action.message
+		if (!retain) update(empty(identity, history));
+		if (!url || !history) return;
+		const controller = new AbortController(), fromHead = beginning || !history.alive && !retain;
+		let cancelled = false, pending = false;
+		const load = async (direction) => {
+			if (cancelled || pending) return;
+			pending = true;
+			const cursor = current.current.lastSeq;
+			try {
+				const page = await readPage(history.url, direction, current.current, controller.signal);
+				if (cancelled) return;
+				if (direction === "head" && !page.events.length) {
+					queueMicrotask(() => void load("tail"));
+					return;
+				}
+				update(receive(current.current, page, direction, fromHead));
+				if (!fromHead && direction !== "before" && !history.alive && page.hasMore && current.current.lastSeq !== cursor) queueMicrotask(() => void load("after"));
+			} catch (cause) {
+				if (!cancelled && !controller.signal.aborted) update({
+					...current.current,
+					loading: false,
+					error: cause instanceof Error ? cause.message : String(cause)
+				});
+			} finally {
+				pending = false;
+			}
 		};
-		case "unreachable": return {
-			...state,
-			error: "The agent stream is unreachable; the viewer may be closed."
+		pageReader.current = (direction) => {
+			if (direction === "before") update({
+				...current.current,
+				reading: true
+			});
+			load(direction);
 		};
-	}
+		load(retain && current.current.lastSeq >= 0 ? "after" : fromHead ? "head" : "tail");
+		return () => {
+			cancelled = true;
+			controller.abort();
+			pageReader.current = () => {};
+		};
+	}, [
+		identity,
+		history?.alive,
+		beginning,
+		revision
+	]);
+	return {
+		state,
+		current,
+		update,
+		beginning,
+		begin,
+		reload,
+		pageReader
+	};
 }
-/**
-* Follow one agent's message stream over Server-Sent Events: `rows`, `reset` and `end` events, reconnecting with
-* `?after=<lastSeq>` when the server closes the connection, so a long turn streams without gaps or repeats.
-*/
-function useAgentStream(url, openEventSource) {
-	const [state, dispatch] = useReducer(reduce, {
-		entries: [],
-		lastSeq: 0,
-		alive: false
-	});
-	const cursor = useRef({ lastSeq: 0 });
-	useEventStream(url, {
+/** Same named SSE lifecycle for every consumer; the actual history endpoint owns bounded bootstrap/pages. */
+function useAgentStream(url, openEventSource, history) {
+	const { state, current, update, beginning, begin, reload, pageReader } = useAgentWindow(url, history);
+	const streamUrl = useCallback(() => {
+		const target = new URL(url, location.href);
+		if (history && current.current.generation !== void 0) target.searchParams.set("generation", String(current.current.generation));
+		return target.toString();
+	}, [url, !!history]);
+	useEventStream(!url || history && (!state.ready || state.ended || state.reading || beginning || !history.alive) ? void 0 : streamUrl, {
 		opener: openEventSource,
-		after: () => cursor.current.lastSeq,
-		onStart: () => {
-			cursor.current = { lastSeq: 0 };
-			dispatch({ type: "reset" });
-		},
+		after: () => current.current.lastSeq,
 		onLiveChange: (live) => {
-			if (!live) dispatch({ type: "unreachable" });
+			if (!live && !current.current.ended) update({
+				...current.current,
+				error: current.current.error ?? "The agent stream is unreachable; the viewer may be closed."
+			});
 		},
 		events: {
 			rows: (message) => {
 				try {
-					const data = JSON.parse(message.data);
-					if (!Array.isArray(data.events)) throw new Error("Invalid agent rows stream");
-					if (data.generation !== void 0 && data.generation !== cursor.current.generation) cursor.current = {
-						lastSeq: 0,
-						generation: data.generation
-					};
-					cursor.current.lastSeq = Math.max(cursor.current.lastSeq, data.lastSeq ?? 0, ...data.events.map((row) => row.seq));
-					dispatch({
-						type: "rows",
-						generation: data.generation,
-						rows: data.events,
-						alive: data.alive
-					});
+					update(receive(current.current, JSON.parse(message.data), "after", false));
 				} catch (cause) {
-					dispatch({
-						type: "error",
-						message: String(cause)
+					update({
+						...current.current,
+						error: String(cause)
 					});
 				}
 			},
 			reset: (message) => {
 				try {
-					const { generation } = JSON.parse(message.data);
-					cursor.current = {
-						lastSeq: 0,
-						generation
-					};
-					dispatch({
-						type: "reset",
-						generation
+					update({
+						...empty(state.identity, history),
+						generation: JSON.parse(message.data).generation,
+						ready: true,
+						loading: false
 					});
 				} catch (cause) {
-					dispatch({
-						type: "error",
-						message: String(cause)
+					update({
+						...current.current,
+						error: String(cause)
 					});
 				}
 			},
-			end: () => dispatch({ type: "end" })
+			end: () => update({
+				...current.current,
+				alive: false,
+				ended: true,
+				loading: false,
+				error: void 0
+			}),
+			unavailable: () => update({
+				...current.current,
+				error: "Live updates are temporarily unavailable"
+			})
 		}
 	});
-	return state;
+	let entries = [], error = state.error;
+	try {
+		entries = foldAgentRows([], history?.projectRows?.(state.rows) ?? state.rows);
+	} catch (cause) {
+		error = cause instanceof Error ? cause.message : String(cause);
+	}
+	return {
+		generation: state.generation,
+		entries,
+		lastSeq: state.lastSeq,
+		alive: state.alive,
+		error,
+		...history ? { history: {
+			loading: state.loading,
+			earlier: state.earlier,
+			more: state.more,
+			reading: state.reading,
+			beginning,
+			emptyTail: state.ended && !state.rows.length && state.first === null && state.lastSeq < 0,
+			older: () => {
+				if (current.current.identity === state.identity) pageReader.current("before");
+			},
+			newer: () => {
+				if (current.current.identity === state.identity) pageReader.current("after");
+			},
+			latest: () => {
+				begin(void 0);
+				reload((value) => value + 1);
+			},
+			beginningPage: () => begin(state.identity)
+		} } : {}
+	};
 }
 // src/run/trace-workspace.tsx
 /** The agent that owns a span: the span itself when it is an agent, else its nearest agent ancestor. */
@@ -352,48 +477,6 @@ function agentGraphAt(spans, byId, at, epoch, cards, extraEdges = []) {
 		edges
 	};
 }
-function timelineItems(entries, streaming) {
-	return entries.map((entry, index) => {
-		if (entry.kind === "message") return {
-			id: entry.id,
-			kind: "message",
-			role: entry.role,
-			content: entry.content,
-			isStreaming: streaming && index === entries.length - 1
-		};
-		if (entry.kind === "tool") return {
-			id: entry.id,
-			kind: "tool",
-			call: entry.call
-		};
-		if (entry.kind === "notice") return {
-			id: entry.id,
-			kind: "custom",
-			content: /* @__PURE__ */ jsx("p", {
-				className: "text-xs text-muted-foreground",
-				children: entry.text
-			})
-		};
-		return {
-			id: entry.id,
-			kind: "custom",
-			content: /* @__PURE__ */ jsx(InlineThinkingItem, {
-				part: {
-					type: "reasoning",
-					text: entry.text
-				},
-				defaultOpen: false,
-				openWhileActive: false
-			})
-		};
-	});
-}
-function NotTimeIndexed({ label }) {
-	return /* @__PURE__ */ jsxs("p", {
-		className: "p-4 text-sm text-muted-foreground",
-		children: [label, ": not time-indexed"]
-	});
-}
 /**
 * 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:
@@ -585,7 +668,10 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 								className: "p-4 text-sm text-muted-foreground",
 								children: stream.error ?? "No messages yet."
 							})
-						}) : /* @__PURE__ */ jsx(NotTimeIndexed, { label: "Conversation" })
+						}) : /* @__PURE__ */ jsx("p", {
+							className: "p-4 text-sm text-muted-foreground",
+							children: "Conversation: not time-indexed"
+						})
 					}),
 					unseen && /* @__PURE__ */ jsx("button", {
 						type: "button",

package/dist/{tree-data-9D309DqD.js → tree-data-rg5voiY8.js}

@@ -1,5 +1,5 @@
 import { t as revealInScroller } from "./reveal-in-scroller-CzKwuqCG.js";
-import { t as VirtualList } from "./VirtualList-CMynqkkh.js";
+import { t as VirtualList } from "./VirtualList-DcSGbEtA.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { BookOpen, Braces, ChevronRight, File, FileCode, FileCog, FileImage, FileLock, FileSpreadsheet, FileTerminal, FileText, Folder, FolderOpen, GitBranch, Package, Scale } from "lucide-react";