@tangle-network/sandbox-ui 2.0.20 → 2.0.21

package/dist/{record-Cwyo2oHb.js → record-CnxPRyxC.js}

@@ -1,4 +1,6 @@
 import { t as __exportAll } from "./rolldown-runtime-D8jQpDG7.js";
+import { t as VirtualList } from "./VirtualList-DLh2JE0F.js";
+import { t as useFollowTail } from "./use-follow-tail-Ckx5ZSV2.js";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -6,212 +8,6 @@ import { Brain, Settings, Timer } from "lucide-react";
 import { formatDuration, getToolCategory, getToolDisplayMetadata } from "@tangle-network/ui/utils";
 import { AgentTimelineColumn, AgentTimelineStep, SpeakerHeader, agentTimelineStepKind } from "@tangle-network/ui/chat";
 import { ExpandedToolDetail, InlineThinkingItem, RunRowShell, RunStatusIcon, runStatus } 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
-* rows use `estimate`. Spacers keep the scroll height, so the browser's scroll anchoring holds the reading place.
-*/
-function VirtualList({ items, keyOf, render, scroller, estimate = 96, overscan = 900, target }) {
-	const heights = useRef(/* @__PURE__ */ new Map());
-	const [version, setVersion] = useState(0);
-	const [viewport, setViewport] = useState({
-		top: 0,
-		height: 900
-	});
-	const observer = useRef(null);
-	const nodes = useRef(/* @__PURE__ */ new Map());
-	const frame = useRef(0);
-	const observe = (element) => {
-		if (!observer.current && typeof ResizeObserver !== "undefined") observer.current = new ResizeObserver((entries) => {
-			let changed = false;
-			for (const entry of entries) {
-				const key = nodes.current.get(entry.target);
-				if (!key) continue;
-				const height = Math.ceil(entry.borderBoxSize?.[0]?.blockSize ?? entry.target.offsetHeight);
-				if (height > 0 && heights.current.get(key) !== height) {
-					heights.current.set(key, height);
-					changed = true;
-				}
-			}
-			if (changed && !frame.current) frame.current = requestAnimationFrame(() => {
-				frame.current = 0;
-				setVersion((value) => value + 1);
-			});
-		});
-		observer.current?.observe(element);
-	};
-	useEffect(() => () => {
-		cancelAnimationFrame(frame.current);
-		observer.current?.disconnect();
-		observer.current = null;
-		nodes.current.clear();
-	}, []);
-	useEffect(() => {
-		const element = scroller.current;
-		if (!element) return;
-		let frame = 0;
-		const update = () => {
-			frame = 0;
-			setViewport((current) => current.top === element.scrollTop && current.height === element.clientHeight ? current : {
-				top: element.scrollTop,
-				height: element.clientHeight
-			});
-		};
-		const schedule = () => {
-			if (!frame) frame = requestAnimationFrame(update);
-		};
-		update();
-		element.addEventListener("scroll", schedule, { passive: true });
-		const resize = new ResizeObserver(schedule);
-		resize.observe(element);
-		return () => {
-			cancelAnimationFrame(frame);
-			element.removeEventListener("scroll", schedule);
-			resize.disconnect();
-		};
-	}, [scroller]);
-	const offsets = useMemo(() => {
-		const result = new Float64Array(items.length + 1);
-		const guess = typeof estimate === "function" ? estimate : () => estimate;
-		for (let i = 0; i < items.length; i++) result[i + 1] = result[i] + (heights.current.get(keyOf(items[i])) ?? guess(items[i]));
-		return result;
-	}, [
-		items,
-		keyOf,
-		estimate,
-		version
-	]);
-	const find = (y) => {
-		let low = 0;
-		let high = items.length;
-		while (low < high) {
-			const mid = low + high >> 1;
-			if (offsets[mid + 1] <= y) low = mid + 1;
-			else high = mid;
-		}
-		return low;
-	};
-	const start = Math.max(0, find(viewport.top - overscan));
-	const end = Math.min(items.length, find(viewport.top + viewport.height + overscan) + 1);
-	const scrollTo = useCallback((key, align) => {
-		const element = scroller.current;
-		const index = items.findIndex((item) => keyOf(item) === key);
-		if (!element || index < 0) return false;
-		const top = offsets[index];
-		const bottom = offsets[index + 1];
-		if (align || top < element.scrollTop || bottom > element.scrollTop + element.clientHeight) element.scrollTop = Math.max(0, top - 8);
-		return true;
-	}, [
-		items,
-		keyOf,
-		offsets,
-		scroller
-	]);
-	const pending = useRef(null);
-	const rows = useRef(/* @__PURE__ */ new Map());
-	const settle = () => {
-		const goal = pending.current;
-		if (!goal) return;
-		if (performance.now() > goal.until) {
-			pending.current = null;
-			return;
-		}
-		if (!scrollTo(goal.key, true)) return;
-		const row = rows.current.get(goal.key);
-		if (row?.isConnected) {
-			const box = row.getBoundingClientRect();
-			if (box.top < 72 || box.top > window.innerHeight - 96) window.scrollBy({ top: box.top - 120 });
-		}
-	};
-	useLayoutEffect(() => {
-		pending.current = target ? {
-			key: target,
-			until: performance.now() + 2e3
-		} : null;
-		settle();
-	}, [target]);
-	useLayoutEffect(settle, [
-		version,
-		viewport,
-		items
-	]);
-	useEffect(() => {
-		const element = scroller.current;
-		if (!element) return;
-		const release = (event) => {
-			const key = event instanceof KeyboardEvent && event.target === element && !event.defaultPrevented ? event.key : "";
-			pending.current = items.length && (key === "Home" || key === "End") ? {
-				key: keyOf(items[key === "Home" ? 0 : items.length - 1]),
-				until: performance.now() + 2e3
-			} : null;
-			if (pending.current) {
-				event.preventDefault();
-				settle();
-			}
-		};
-		element.addEventListener("wheel", release, { passive: true });
-		element.addEventListener("touchstart", release, { passive: true });
-		element.addEventListener("pointerdown", release);
-		element.addEventListener("keydown", release);
-		return () => {
-			element.removeEventListener("wheel", release);
-			element.removeEventListener("touchstart", release);
-			element.removeEventListener("pointerdown", release);
-			element.removeEventListener("keydown", release);
-		};
-	}, [
-		scroller,
-		items,
-		keyOf,
-		offsets
-	]);
-	const bind = (key) => (element) => {
-		if (!element) {
-			rows.current.delete(key);
-			return;
-		}
-		rows.current.set(key, element);
-		for (const [node, value] of nodes.current) if (value === key && node !== element) {
-			observer.current?.unobserve(node);
-			nodes.current.delete(node);
-		}
-		if (!nodes.current.has(element)) {
-			nodes.current.set(element, key);
-			observe(element);
-		}
-	};
-	useEffect(() => {
-		for (const node of [...nodes.current.keys()]) if (!node.isConnected) {
-			observer.current?.unobserve(node);
-			nodes.current.delete(node);
-		}
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("div", {
-			style: {
-				height: offsets[start],
-				transitionProperty: "none"
-			},
-			"aria-hidden": "true"
-		}),
-		items.slice(start, end).map((item, i) => {
-			const key = keyOf(item);
-			return /* @__PURE__ */ jsx("div", {
-				ref: bind(key),
-				className: "virtual-row",
-				style: { display: "flow-root" },
-				children: render(item, start + i)
-			}, key);
-		}),
-		/* @__PURE__ */ jsx("div", {
-			style: {
-				height: offsets[items.length] - offsets[end],
-				transitionProperty: "none"
-			},
-			"aria-hidden": "true"
-		})
-	] });
-}
 // src/run/record/model.ts
 var model_exports = /* @__PURE__ */ __exportAll({
 	agentState: () => agentState,
@@ -1330,27 +1126,12 @@ function Conversation({ index, actor, cutoff, query, category, selected, openSou
 		return map;
 	}, [rows]);
 	const retained = (index.byActor.get(actor) ?? []).some((item) => !isLifecycle(item) && (item.detail.role || textOf(item) || callsOf(item).length));
-	const targetRef = useRef(target);
-	targetRef.current = target;
-	const following = useRef(false);
-	const followRef = useRef(follow);
-	followRef.current = follow;
-	useLayoutEffect(() => {
-		following.current = follow && !targetRef.current;
-		if (scroll.current && !targetRef.current) scroll.current.scrollTop = follow ? scroll.current.scrollHeight : 0;
-	}, [actor]);
-	useLayoutEffect(() => {
-		if (!follow) following.current = false;
-	}, [follow]);
-	useEffect(() => {
-		const element = scroll.current;
-		if (!element) return;
-		const track = () => {
-			following.current = followRef.current && element.scrollHeight - element.scrollTop - element.clientHeight < 24;
-		};
-		element.addEventListener("scroll", track, { passive: true });
-		return () => element.removeEventListener("scroll", track);
-	}, []);
+	const { following } = useFollowTail(scroll, {
+		identity: actor,
+		content: rows,
+		follow,
+		target
+	});
 	const arrival = useRef({ actor });
 	useLayoutEffect(() => {
 		const tail = rows.at(-1), event = tail?.kind === "event" ? tail.event : tail?.events.at(-1), entry = tail?.kind === "event" ? tail.event.id : tail?.events[0]?.id;
@@ -1361,11 +1142,8 @@ function Conversation({ index, actor, cutoff, query, category, selected, openSou
 		};
 		const element = scroll.current;
 		if (!element || !following.current) return;
-		element.scrollTop = element.scrollHeight;
-		let frames = 0;
-		let frame = requestAnimationFrame(function pin() {
+		const frame = requestAnimationFrame(() => {
 			if (!following.current) return;
-			element.scrollTop = element.scrollHeight;
 			const row = entry && element.querySelector(`[data-entry="${CSS.escape(entry)}"]`);
 			if (animate && row) {
 				animate = false;
@@ -1375,7 +1153,6 @@ function Conversation({ index, actor, cutoff, query, category, selected, openSou
 					easing: style.getPropertyValue("--ease-expo").trim() || "linear"
 				});
 			}
-			if (++frames < 20) frame = requestAnimationFrame(pin);
 		});
 		return () => cancelAnimationFrame(frame);
 	}, [rows]);
@@ -1594,4 +1371,4 @@ function AgentTree({ index, actor, cutoff, select }) {
 		})
 	});
 }
-export { model_exports as a, indexRecord as i, withPrompts as n, VirtualList as o, Conversation as r, AgentTree as t };
+export { model_exports as a, indexRecord as i, withPrompts as n, Conversation as r, AgentTree as t };

package/dist/run/live.d.ts

@@ -1,4 +1,4 @@
-import { t as AgentStreamOpener } from "../agent-stream-CBZ2fXJ2.js";
+import { t as AgentStreamOpener } from "../event-stream-DNEbvx4s.js";
 /** Keep one transport identity per authenticated account; changing it discards the previous view. */
 export interface LiveRunTransport {
   fetch?: typeof globalThis.fetch;

package/dist/run/live.js

@@ -1,7 +1,7 @@
-import { t as WorkspaceFilesPane } from "../workspace-files-pane-DB9Nvwh4.js";
+import { t as WorkspaceFilesPane } from "../workspace-files-pane-C0PeY6rY.js";
 import { t as DiffView } from "../diff-view-B9mNeTLF.js";
 import { t as CodeView } from "../code-view-BlhCS1SD.js";
-import { t as TraceWorkspace } from "../trace-workspace-C8dHRBDV.js";
+import { a as useEventStream, t as TraceWorkspace } from "../trace-workspace-DkakKRLV.js";
 import { useDocument } from "../hooks/use-document.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -180,32 +180,30 @@ function LiveRunView({ api, transport }) {
 	const [rendered, setRendered] = useState(0);
 	const [agent, setAgent] = useState();
 	const [conversationOpen, setConversationOpen] = useState(true);
-	useEffect(() => {
-		const source = transport?.openEventSource ? transport.openEventSource(`${api}/events`, setConnected) : new EventSource(`${api}/events`);
-		source.addEventListener("snapshot", (message) => {
-			try {
-				const frame = JSON.parse(message.data);
-				if (!Array.isArray(frame.snapshots)) throw new Error("Invalid snapshot stream");
-				setSnapshots((prior) => {
-					const byRoot = new Map((frame.reset ? [] : prior).map((snapshot) => [snapshot.root, snapshot]));
-					for (const snapshot of frame.snapshots) byRoot.set(snapshot.root, snapshot);
-					return [...byRoot.values()];
-				});
-				setRendered(frame.sequence);
-				setError(null);
-				setConnected(true);
-			} catch (cause) {
-				setError(String(cause));
-			}
-		});
-		source.addEventListener("unavailable", () => setError("The run snapshot is unavailable"));
-		source.addEventListener("end", () => {
-			source.close();
-			setEnded(true);
-		});
-		if (!transport?.openEventSource) source.onerror = () => setConnected(false);
-		return () => source.close();
-	}, [api, transport?.openEventSource]);
+	useEventStream(`${api}/events`, {
+		opener: transport?.openEventSource,
+		onLiveChange: setConnected,
+		events: {
+			snapshot: (message) => {
+				try {
+					const frame = JSON.parse(message.data);
+					if (!Array.isArray(frame.snapshots)) throw new Error("Invalid snapshot stream");
+					setSnapshots((prior) => {
+						const byRoot = new Map((frame.reset ? [] : prior).map((snapshot) => [snapshot.root, snapshot]));
+						for (const snapshot of frame.snapshots) byRoot.set(snapshot.root, snapshot);
+						return [...byRoot.values()];
+					});
+					setRendered(frame.sequence);
+					setError(null);
+					setConnected(true);
+				} catch (cause) {
+					setError(String(cause));
+				}
+			},
+			unavailable: () => setError("The run snapshot is unavailable"),
+			end: () => setEnded(true)
+		}
+	});
 	const runs = snapshots.flatMap((snapshot, root) => snapshot.supervisors.map((run) => ({
 		snapshot,
 		root,

package/dist/run/record.d.ts

@@ -1,2 +1,2 @@
-import { a as ConversationProps, c as ToolCall, d as ConversationEvent, f as ConversationNode, i as Conversation, l as indexRecord, n as VirtualList, o as EventFlag, p as ConversationRecord, r as withPrompts, s as RecordIndex, t as AgentTree, u as model_d_exports } from "../index-BYkigpIM.js";
+import { a as ConversationProps, c as ToolCall, d as ConversationEvent, f as ConversationNode, i as Conversation, l as indexRecord, n as VirtualList, o as EventFlag, p as ConversationRecord, r as withPrompts, s as RecordIndex, t as AgentTree, u as model_d_exports } from "../index-1qlc9-S2.js";
 export { AgentTree, 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

@@ -1 +1,3 @@
-export { t as AgentTree, r as Conversation, o as VirtualList, i as indexRecord, a as recordModel, n as withPrompts } from "../record-Cwyo2oHb.js";
+import { t as VirtualList } from "../VirtualList-DLh2JE0F.js";
+import { a as model_exports, i as indexRecord, n as withPrompts, r as Conversation, t as AgentTree } from "../record-CnxPRyxC.js";
+export { AgentTree, Conversation, VirtualList, indexRecord, model_exports as recordModel, withPrompts };

package/dist/run.d.ts

@@ -1,4 +1,4 @@
-import { A as ToolCallData, B as taskStatus, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as parseToolEvent, G as TraceWorkspaceProps, H as LatestEventsProps, I as runStatus, J as traceSpanMark, K as TraceWaterfall, L as showsTaskPriority, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, R as statusMeta, S as RunStatus, T as StatusMeta, U as TraceEvent, V as LatestEvents, W as TraceWorkspace, _ as RunPhaseList, a as ApprovalPlanStep, b as RunRowStatus, c as FeedSegment, d as InlineToolItem, f as InlineToolItemProps, g as RunPhase, h as RunGroupProps, i as ApprovalDiffSummary, j as ToolCallFeed, k as TaskStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, q as TraceWaterfallProps, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as RunStatusIconProps, x as RunRowStatusDot, y as RunRowShellProps, z as taskProgress } from "./index-ByNsP4VC.js";
-import { a as AgentTranscriptEntry, i as AgentStreamState, n as AgentStreamRow, o as foldAgentRows, r as AgentStreamSource, s as useAgentStream, t as AgentStreamOpener } from "./agent-stream-CBZ2fXJ2.js";
-import { a as ConversationProps, c as ToolCall, d as ConversationEvent, f as ConversationNode, i as Conversation, l as indexRecord, n as VirtualList, o as EventFlag, p as ConversationRecord, r as withPrompts, s as RecordIndex, t as AgentTree, u as model_d_exports } from "./index-BYkigpIM.js";
-export { type AgentStreamOpener, type AgentStreamRow, type AgentStreamSource, type AgentStreamState, type AgentTranscriptEntry, AgentTree, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, Conversation, type ConversationEvent, type ConversationNode, type ConversationProps, type ConversationRecord, type EventFlag, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LatestEvents, type LatestEventsProps, LiveDuration, type RecordIndex, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, type RunStatus, RunStatusIcon, type RunStatusIconProps, type StatusMeta, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, type ToolCall, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, type TraceEvent, TraceWaterfall, type TraceWaterfallProps, TraceWorkspace, type TraceWorkspaceProps, VirtualList, foldAgentRows, indexRecord, parseToolEvent, model_d_exports as recordModel, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus, traceSpanMark, useAgentStream, withPrompts };
+import { $ as traceSpanMark, A as ToolCallData, B as taskStatus, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as parseToolEvent, G as TraceWorkspaceProps, H as LatestEventsProps, I as runStatus, J as AgentTranscriptEntry, K as AgentStreamRow, L as showsTaskPriority, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, Q as TraceWaterfallProps, R as statusMeta, S as RunStatus, T as StatusMeta, U as TraceEvent, V as LatestEvents, W as TraceWorkspace, X as useAgentStream, Y as foldAgentRows, Z as TraceWaterfall, _ as RunPhaseList, a as ApprovalPlanStep, b as RunRowStatus, c as FeedSegment, d as InlineToolItem, f as InlineToolItemProps, g as RunPhase, h as RunGroupProps, i as ApprovalDiffSummary, j as ToolCallFeed, k as TaskStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, q as AgentStreamState, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as RunStatusIconProps, x as RunRowStatusDot, y as RunRowShellProps, z as taskProgress } from "./index-DxMX-DlX.js";
+import { i as useEventStream, n as AgentStreamSource, r as EventStreamHandlers, t as AgentStreamOpener } from "./event-stream-DNEbvx4s.js";
+import { a as ConversationProps, c as ToolCall, d as ConversationEvent, f as ConversationNode, i as Conversation, l as indexRecord, n as VirtualList, o as EventFlag, p as ConversationRecord, r as withPrompts, s as RecordIndex, t as AgentTree, u as model_d_exports } from "./index-1qlc9-S2.js";
+export { type AgentStreamOpener, type AgentStreamRow, type AgentStreamSource, type AgentStreamState, type AgentTranscriptEntry, AgentTree, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, Conversation, type ConversationEvent, type ConversationNode, type ConversationProps, type ConversationRecord, type EventFlag, type EventStreamHandlers, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LatestEvents, type LatestEventsProps, LiveDuration, type RecordIndex, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, type RunStatus, RunStatusIcon, type RunStatusIconProps, type StatusMeta, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, type ToolCall, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, type TraceEvent, TraceWaterfall, type TraceWaterfallProps, TraceWorkspace, type TraceWorkspaceProps, VirtualList, foldAgentRows, indexRecord, parseToolEvent, model_d_exports as recordModel, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus, traceSpanMark, useAgentStream, useEventStream, withPrompts };

package/dist/run.js

@@ -1,4 +1,5 @@
-import { a as TraceWaterfall, i as useAgentStream, n as LatestEvents, o as traceSpanMark, r as foldAgentRows, t as TraceWorkspace } from "./trace-workspace-C8dHRBDV.js";
-import { a as model_exports, i as indexRecord, n as withPrompts, o as VirtualList, r as Conversation, t as AgentTree } from "./record-Cwyo2oHb.js";
+import { t as VirtualList } from "./VirtualList-DLh2JE0F.js";
+import { a as useEventStream, i as useAgentStream, n as LatestEvents, o as TraceWaterfall, r as foldAgentRows, s as traceSpanMark, t as TraceWorkspace } from "./trace-workspace-DkakKRLV.js";
+import { a as model_exports, i as indexRecord, n as withPrompts, r as Conversation, t as AgentTree } from "./record-CnxPRyxC.js";
 import { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LiveDuration, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon, TaskList, ToolCallFeed, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus } from "@tangle-network/ui/run";
-export { AgentTree, ApprovalCard, ApprovalDiffSummary, Conversation, ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LatestEvents, LiveDuration, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon, TaskList, ToolCallFeed, TraceWaterfall, TraceWorkspace, VirtualList, foldAgentRows, indexRecord, parseToolEvent, model_exports as recordModel, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus, traceSpanMark, useAgentStream, withPrompts };
+export { AgentTree, ApprovalCard, ApprovalDiffSummary, Conversation, ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LatestEvents, LiveDuration, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon, TaskList, ToolCallFeed, TraceWaterfall, TraceWorkspace, VirtualList, foldAgentRows, indexRecord, parseToolEvent, model_exports as recordModel, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus, traceSpanMark, useAgentStream, useEventStream, withPrompts };

package/dist/{trace-workspace-C8dHRBDV.js → trace-workspace-DkakKRLV.js}

@@ -2,14 +2,16 @@ 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-Ckx5ZSV2.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { useMemo, useReducer, 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 { FlowWaterfall, toolGlyph } from "@tangle-network/charts/react";
 import { LatestEvents } from "@tangle-network/charts/react/agent-graph";
+import { useEventStream } from "@tangle-network/ui/hooks";
 // 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) {
@@ -205,59 +207,61 @@ function useAgentStream(url, openEventSource) {
 		lastSeq: 0,
 		alive: false
 	});
-	useEffect(() => {
-		if (!url || !openEventSource && 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 = openEventSource ? openEventSource(target.toString(), (live) => {
-				if (!closed && !live) dispatch({ type: "unreachable" });
-			}) : new EventSource(target.toString());
-			let opened = false;
-			if (!openEventSource) 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" });
-			});
-			if (!openEventSource) 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, openEventSource]);
+	const cursor = useRef({ lastSeq: 0 });
+	useEventStream(url, {
+		opener: openEventSource,
+		after: () => cursor.current.lastSeq,
+		onStart: () => {
+			cursor.current = { lastSeq: 0 };
+			dispatch({ type: "reset" });
+		},
+		onLiveChange: (live) => {
+			if (!live) dispatch({ type: "unreachable" });
+		},
+		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
+					});
+				} catch (cause) {
+					dispatch({
+						type: "error",
+						message: String(cause)
+					});
+				}
+			},
+			reset: (message) => {
+				try {
+					const { generation } = JSON.parse(message.data);
+					cursor.current = {
+						lastSeq: 0,
+						generation
+					};
+					dispatch({
+						type: "reset",
+						generation
+					});
+				} catch (cause) {
+					dispatch({
+						type: "error",
+						message: String(cause)
+					});
+				}
+			},
+			end: () => dispatch({ type: "end" })
+		}
+	});
 	return state;
 }
 // src/run/trace-workspace.tsx
@@ -438,18 +442,10 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 	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]);
+	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: [
@@ -580,11 +576,6 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 					}),
 					/* @__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, {
@@ -598,12 +589,7 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 					}),
 					unseen && /* @__PURE__ */ jsx("button", {
 						type: "button",
-						onClick: () => {
-							const element = scroller.current;
-							if (element) element.scrollTop = element.scrollHeight;
-							pinned.current = true;
-							setUnseen(false);
-						},
+						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"
 					})
@@ -612,4 +598,4 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 		]
 	});
 }
-export { TraceWaterfall as a, useAgentStream as i, LatestEvents as n, traceSpanMark as o, foldAgentRows as r, TraceWorkspace as t };
+export { useEventStream as a, useAgentStream as i, LatestEvents as n, TraceWaterfall as o, foldAgentRows as r, traceSpanMark as s, TraceWorkspace as t };