@tangle-network/sandbox-ui 2.0.7 → 2.0.9

package/dist/{run-BgllNBrW.js → record-CzsY5-Mv.js}

@@ -1,616 +1,9 @@
 import { t as __exportAll } from "./rolldown-runtime-D8jQpDG7.js";
-import { t as cn$1 } from "./utils-BER_bdgE.js";
-import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
-import { t as ProviderIcon } from "./provider-logo-CPKRPHcS.js";
-import { f as syncAmbient, l as activityTiming, t as AgentGraph, u as ambientStyle } from "./AgentGraph-CFlI9qta.js";
-import { t as LatestEvents } from "./latest-events-v_vXRyd7.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
-import { X } from "lucide-react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { getToolDisplayMetadata } from "@tangle-network/ui/utils";
-import { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, SpeakerHeader, agentTimelineStepKind } from "@tangle-network/ui/chat";
-import { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail, InlineThinkingItem, InlineThinkingItem as InlineThinkingItem$1, InlineToolItem, LiveDuration, RunGroup, RunPhaseList, RunRowShell, RunRowShell as RunRowShell$1, RunRowStatusDot, RunStatusIcon as RunStatusIcon$1, TaskList, ToolCallFeed, parseToolEvent, runStatus, runStatus as runStatus$1, showsTaskPriority, statusMeta as statusMeta$1, taskProgress, taskStatus } from "@tangle-network/ui/run";
-import { FlowWaterfall, toolGlyph } from "@tangle-network/charts/react";
-// src/run/trace-waterfall.tsx
-/** Agent and model spans show their lab/host mark; tool spans show their provider's mark. Unknown keeps the kind glyph. */
-function traceSpanMark(span) {
-	if (span.kind === "pipeline" || span.kind === "model") {
-		const identity = span.detail ? modelBrandFor(span.detail) : null;
-		return identity ? /* @__PURE__ */ jsx(ModelBrandStack, {
-			identity,
-			size: "sm"
-		}) : void 0;
-	}
-	const provider = span.icon ?? (span.kind === "tool" ? span.detail : void 0);
-	return provider ? /* @__PURE__ */ jsx(ProviderIcon, {
-		id: provider,
-		displayName: provider,
-		size: 14,
-		className: "rounded-[3px]"
-	}) : void 0;
-}
-/**
-* The run inspector: the agent timeline (`defaultView="agents"`) and the span waterfall over one clock, from
-* `@tangle-network/charts`, with Sandbox UI's brand marks. Feed it `otlpFlowTrace(spans)` from the
-* `traces convert` contract. Import `@tangle-network/charts/react/flow-waterfall.css` once.
-*/
-function TraceWaterfall({ renderIcon = traceSpanMark, ...props }) {
-	return /* @__PURE__ */ jsx(FlowWaterfall, {
-		renderIcon,
-		...props
-	});
-}
-// src/run/agent-stream.ts
-const TOOL_TYPES = /* @__PURE__ */ new Set([
-	"bash",
-	"read",
-	"write",
-	"edit",
-	"glob",
-	"grep",
-	"list",
-	"download",
-	"inspect",
-	"audit"
-]);
-const toolType = (name) => {
-	const key = (name ?? "").toLowerCase();
-	return TOOL_TYPES.has(key) ? key : "unknown";
-};
-const brief = (value, max = 240) => {
-	if (value === void 0 || value === null) return void 0;
-	const text = typeof value === "string" ? value : JSON.stringify(value);
-	return text.length > max ? `${text.slice(0, max - 1)}…` : text;
-};
-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] = {
-				...last,
-				content: last.content + event.text
-			};
-			else next.push({
-				id: `m-${row.seq}`,
-				at,
-				kind: "message",
-				role: "assistant",
-				content: event.text
-			});
-		} else if (event.kind === "user" && event.text) next.push({
-			id: `u-${row.seq}`,
-			at,
-			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,
-				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",
-				content: recorded(event.text),
-				sealed: true
-			});
-			else next.push({
-				id: `n-${row.seq}`,
-				at,
-				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 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({
-				id,
-				at,
-				kind: "tool",
-				call: {
-					id,
-					type: toolType(event.toolName),
-					label: event.toolName ?? "tool",
-					status: "running",
-					detail: brief(event.args, 120)
-				}
-			});
-		} 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: brief(event.result),
-					duration: Math.max(0, at - entry.at)
-				}
-			};
-		}
-	}
-	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
-			};
-		}
-		case "end": return {
-			...state,
-			alive: false,
-			error: void 0
-		};
-		case "error": return {
-			...state,
-			error: action.message
-		};
-		case "unreachable": return {
-			...state,
-			error: "The agent stream is unreachable; the viewer may be closed."
-		};
-	}
-}
-/**
-* 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) {
-	const [state, dispatch] = useReducer(reduce, {
-		entries: [],
-		lastSeq: 0,
-		alive: false
-	});
-	useEffect(() => {
-		if (!url || typeof EventSource === "undefined") return;
-		dispatch({ type: "reset" });
-		let lastSeq = 0;
-		let closed = false;
-		let source;
-		let retry;
-		const open = () => {
-			const target = new URL(url, globalThis.location?.href);
-			if (lastSeq > 0) target.searchParams.set("after", String(lastSeq));
-			source = new EventSource(target.toString());
-			let opened = false;
-			source.onopen = () => {
-				opened = true;
-			};
-			source.addEventListener("rows", (message) => {
-				const data = JSON.parse(message.data);
-				lastSeq = Math.max(lastSeq, data.lastSeq ?? 0, ...data.events.map((row) => row.seq));
-				dispatch({
-					type: "rows",
-					generation: data.generation,
-					rows: data.events,
-					alive: data.alive
-				});
-			});
-			source.addEventListener("reset", (message) => {
-				lastSeq = 0;
-				dispatch({
-					type: "reset",
-					generation: JSON.parse(message.data).generation
-				});
-			});
-			source.addEventListener("end", () => {
-				closed = true;
-				source?.close();
-				dispatch({ type: "end" });
-			});
-			source.onerror = () => {
-				source?.close();
-				if (closed) return;
-				if (!opened) dispatch({ type: "unreachable" });
-				retry = setTimeout(open, 1e3);
-			};
-		};
-		open();
-		return () => {
-			closed = true;
-			clearTimeout(retry);
-			source?.close();
-		};
-	}, [url]);
-	return state;
-}
-// 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) {
-	for (let cursor = span; cursor; cursor = cursor.parentId ? byId.get(cursor.parentId) : void 0) if (cursor.kind === "pipeline") return cursor;
-}
-/** The trace's agents as a spawn tree at the cursor: an agent not started by then is left out, one that ends after it is
-*  still running, so the Graph and the Timeline always show the same moment. */
-function agentGraphAt(spans, byId, at, epoch, cards, extraEdges = []) {
-	const nodes = [], edges = [], seen = /* @__PURE__ */ new Set();
-	const timed = new Set(spans.flatMap((span) => span.kind === "pipeline" && span.id ? [span.id] : []));
-	const recorded = /* @__PURE__ */ new Map();
-	for (const [index, span] of spans.entries()) {
-		if (span.kind === "pipeline" || at !== null && span.startMs > at) continue;
-		const owner = agentOf(span, byId);
-		if (!owner?.id) continue;
-		const events = recorded.get(owner.id) ?? [];
-		const endpoints = [{
-			suffix: "start",
-			label: "Started ",
-			time: span.startMs
-		}];
-		if (span.status !== "running" && span.endMs !== span.startMs && (at === null || span.endMs <= at)) endpoints.push({
-			suffix: "end",
-			label: "Recorded ",
-			time: span.endMs
-		});
-		for (const endpoint of endpoints) events.push({
-			id: (span.id ?? String(index)) + ":" + endpoint.suffix,
-			label: endpoint.label + span.name,
-			at: epoch == null || !Number.isFinite(epoch) ? void 0 : epoch + endpoint.time
-		});
-		recorded.set(owner.id, events);
-	}
-	for (const span of spans) {
-		if (span.kind !== "pipeline" || !span.id || seen.has(span.id) || at !== null && span.startMs > at) continue;
-		seen.add(span.id);
-		const card = cards?.[span.id];
-		const state = at !== null && (span.endMs > at || span.status === "running") ? "running" : runStatus(span.status ?? "unknown");
-		const activity = (span.activityAt ?? []).reduce((last, time) => Number.isFinite(time) && (at === null || time <= at) ? Math.max(last, time) : last, -Infinity);
-		const events = (card?.events ?? recorded.get(span.id) ?? []).filter((event) => at === null || epoch != null && event.at != null && event.at <= epoch + at).sort((a, b) => (a.at ?? 0) - (b.at ?? 0));
-		const timing = activityTiming({
-			events,
-			lastActivityAt: epoch != null && Number.isFinite(epoch) && Number.isFinite(activity) ? epoch + activity : at === null ? card?.lastActivityAt : void 0,
-			medianEventGapMs: span.medianEventGapMs ?? (at === null ? card?.medianEventGapMs : void 0)
-		});
-		nodes.push({
-			...card,
-			id: span.id,
-			label: card?.label ?? span.name,
-			model: card?.model ?? span.detail,
-			status: at === null && card?.status ? card.status : state === "done" ? "succeeded" : state,
-			costUsd: at === null ? card?.costUsd ?? span.costUsd : span.endMs <= at ? span.costUsd : void 0,
-			startedAt: epoch == null || !Number.isFinite(epoch) ? at === null ? card?.startedAt : void 0 : epoch + span.startMs,
-			...timing,
-			events: events.slice(-4),
-			turn: at === null ? card?.turn : void 0,
-			result: at === null ? card?.result ?? span.output : span.endMs <= at ? span.output : void 0,
-			commits: at === null ? card?.commits : void 0,
-			tokens: at === null ? card?.tokens : void 0
-		});
-		const parent = span.parentId ? byId.get(span.parentId) : void 0, spawner = parent && agentOf(parent, byId);
-		if (spawner?.id) edges.push({
-			from: spawner.id,
-			to: span.id,
-			kind: "spawn"
-		});
-	}
-	for (const [id, card] of Object.entries(cards ?? {})) if (!timed.has(id)) nodes.push(at === null ? {
-		...card,
-		id,
-		label: card.label ?? id,
-		status: card.status ?? "unknown"
-	} : {
-		id,
-		label: card.label ?? id,
-		model: card.model,
-		harness: card.harness,
-		role: card.role,
-		status: "unknown",
-		turn: "Timing unavailable at this cursor"
-	});
-	const ids = new Set(nodes.map((node) => node.id));
-	for (const edge of extraEdges) if (ids.has(edge.from) && ids.has(edge.to) && (edge.kind !== "spawn" || !edges.some((prior) => prior.kind === "spawn" && prior.from === edge.from && prior.to === edge.to))) edges.push(edge);
-	return {
-		nodes,
-		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:
-* every panel shows what was true at the cursor, and the conversation shows what had been said by then.
-*/
-function TraceWorkspace({ trace, streamUrl, events, onTimeChange, files, scoreboard, selectedAgentId, onSelectAgent, 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;
-	const select = (agentId) => {
-		setOwnSelection(agentId);
-		onSelectAgent?.(agentId);
-	};
-	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 { defaultLayout = "tree", ...graphOptions } = agentGraph ?? {};
-	const [graphLayout, setGraphLayout] = useState(defaultLayout);
-	const [cursor, setCursor] = useState(null);
-	const stream = useAgentStream(selected && streamUrl ? streamUrl(selected) : void 0);
-	const origin = useMemo(() => {
-		if (waterfall.startedAt !== void 0) return waterfall.startedAt;
-		const first = stream.entries[0]?.at;
-		return agent && first !== void 0 ? first - agent.startMs : void 0;
-	}, [
-		waterfall.startedAt,
-		agent,
-		stream.entries
-	]);
-	const graph = useMemo(() => agentGraphAt(trace.spans, byId, cursor, waterfall.startedAt, agentCards, agentGraph?.edges), [
-		trace,
-		byId,
-		cursor,
-		waterfall.startedAt,
-		agentCards,
-		agentGraph?.edges
-	]);
-	const selectedNode = graph.nodes.find((node) => node.id === agentId);
-	const facts = cursor === null || agent && agent.endMs <= cursor ? [...agent?.facts ?? []] : [];
-	for (const [label, value] of [["Recorded result", selectedNode?.result], ["Activity", selectedNode?.turn]]) if (value && !facts.some((fact) => fact.value === value)) facts.push({
-		label,
-		value
-	});
-	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 items = useMemo(() => timelineItems(shown, live), [shown, live]);
-	const scroller = useRef(null);
-	const pinned = useRef(true);
-	const [unseen, setUnseen] = useState(false);
-	useLayoutEffect(() => {
-		const element = scroller.current;
-		if (!element) return;
-		if (pinned.current) element.scrollTop = element.scrollHeight;
-		else setUnseen(true);
-	}, [items.length, items[items.length - 1]]);
-	useEffect(() => {
-		pinned.current = true;
-		setUnseen(false);
-	}, [selected]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn$1("sandbox-trace-workspace flex min-h-0 flex-col gap-3", className),
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: agentId ? "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,
-						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, {
-							...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$1("min-h-0 flex-1", graphOptions.className)
-						})]
-					})
-				})
-			}),
-			files && /* @__PURE__ */ jsx("section", {
-				"aria-label": "Code at the cursor",
-				className: "flex min-h-[70vh] 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
-			}),
-			agentId && /* @__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$1("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 && /* @__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,
-						onScroll: (event) => {
-							const element = event.currentTarget;
-							pinned.current = element.scrollHeight - element.scrollTop - element.clientHeight < 48;
-							if (pinned.current) setUnseen(false);
-						},
-						"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(NotTimeIndexed, { label: "Conversation" })
-					}),
-					unseen && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: () => {
-							const element = scroller.current;
-							if (element) element.scrollTop = element.scrollHeight;
-							pinned.current = true;
-							setUnseen(false);
-						},
-						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"
-					})
-				]
-			})
-		]
-	});
-}
+import { AgentTimelineColumn, AgentTimelineStep, SpeakerHeader, agentTimelineStepKind } from "@tangle-network/ui/chat";
+import { InlineThinkingItem, RunRowShell } from "@tangle-network/ui/run";
 // src/run/record/VirtualList.tsx
 /**
 * Renders only the rows near the viewport of `scroller`. Row heights are measured as they render; unmeasured
@@ -788,6 +181,7 @@ function VirtualList({ items, keyOf, render, scroller, estimate = 96, overscan =
 			return /* @__PURE__ */ jsx("div", {
 				ref: bind(key),
 				className: "virtual-row",
+				style: { display: "flow-root" },
 				children: render(item, start + i)
 			}, key);
 		}),
@@ -914,12 +308,14 @@ function preview(call) {
 }
 /** Identity is established by the importer, never inferred from labels or timestamps. */
 function indexRecord(record) {
-	const nodes = new Map(record.nodes.map((node) => [node.id, node]));
+	const inputNodes = record.nodes;
+	const inputEvents = record.events;
+	const nodes = new Map(inputNodes.map((node) => [node.id, node]));
 	const canonical = (id) => nodes.get(id)?.agentId ?? id;
-	const actors = record.nodes.filter((node) => node.kind !== "session" || !node.agentId);
-	const events = record.events.map(withoutHostPaths).sort((a, b) => ms(a.at) - ms(b.at));
+	const actors = inputNodes.filter((node) => node.kind !== "session" || !node.agentId);
+	const events = inputEvents.map((event) => withoutHostPaths(event)).sort((a, b) => ms(a.at) - ms(b.at));
 	const byEvent = new Map(events.map((event) => [event.id, event]));
-	const recordedOrder = new Map(record.events.map((event, i) => [event.id, i]));
+	const recordedOrder = new Map(inputEvents.map((event, i) => [event.id, i]));
 	const byActor = /* @__PURE__ */ new Map();
 	const results = /* @__PURE__ */ new Map();
 	const calls = /* @__PURE__ */ new Map();
@@ -2033,4 +1429,4 @@ function withPrompts(record) {
 		events
 	};
 }
-export { model_exports as C, TraceWaterfall as D, useAgentStream as E, traceSpanMark as O, indexRecord as S, foldAgentRows as T, statusMeta$1 as _, InlineToolItem as a, withPrompts as b, RunPhaseList as c, RunStatusIcon$1 as d, TaskList as f, showsTaskPriority as g, runStatus$1 as h, InlineThinkingItem$1 as i, RunRowShell$1 as l, parseToolEvent as m, ApprovalDiffSummary as n, LiveDuration as o, ToolCallFeed as p, ExpandedToolDetail as r, RunGroup as s, ApprovalCard as t, RunRowStatusDot as u, taskProgress as v, TraceWorkspace as w, Conversation as x, taskStatus as y };
+export { VirtualList as a, model_exports as i, Conversation as n, indexRecord as r, withPrompts as t };

package/dist/run/record.d.ts

@@ -0,0 +1,2 @@
+import { a as EventFlag, c as indexRecord, d as ConversationNode, f as ConversationRecord, i as ConversationProps, l as model_d_exports, n as withPrompts, o as RecordIndex, r as Conversation, s as ToolCall, t as VirtualList, u as ConversationEvent } from "../index-DRLVHl-o.js";
+export { Conversation, type ConversationEvent, type ConversationNode, type ConversationProps, type ConversationRecord, type EventFlag, type RecordIndex, type ToolCall, VirtualList, indexRecord, model_d_exports as recordModel, withPrompts };

package/dist/run/record.js

@@ -0,0 +1 @@
+export { n as Conversation, a as VirtualList, r as indexRecord, i as recordModel, t as withPrompts } from "../record-CzsY5-Mv.js";