@tangle-network/sandbox-ui 4.0.0 → 5.0.0

package/dist/{index-CHA38az4.d.ts → index-CeZgMx53.d.ts}

@@ -26,11 +26,8 @@ interface TraceWorkspaceProps extends Omit<TraceWaterfallProps, "trace" | "marke
   events?: TraceEvent[];
   /** The time the reader moved to, in trace ms; null while following live or showing the whole run. */
   onTimeChange?: (t: number | null) => void;
-  /**
-   * The code workspace as of the cursor and scoped to the selected agent, usually a WorkspaceFilesPane: the page answers
-   * the as-of query. It spans the full width; this workspace supplies the bounded height virtual panes need. Keep its key on the commit so a scrub
-   * keeps its state.
-   */
+  /** The code workspace as of the cursor and scoped to the selected agent, usually a WorkspaceFilesPane; it spans the full width
+   *  at the bounded height virtual panes need. Keep its key on the commit so a scrub keeps its state. */
   files?: ReactNode;
   /** The scoreboard as of the cursor, under the code workspace; omitted when not given. */
   scoreboard?: ReactNode;
@@ -39,6 +36,8 @@ interface TraceWorkspaceProps extends Omit<TraceWaterfallProps, "trace" | "marke
   conversationOpen?: boolean;
   /** Called with the agent the reader selected, or undefined when they close its drawer or press Escape. */
   onSelectAgent?: (agentId: string | undefined) => void;
+  /** The host's own account of the selected agent beyond its trace facts, such as its profile: its drawer shows it under them. */
+  renderAgentDrawer?: (agentId: string) => ReactNode;
   /**
    * What the trace cannot say about a live agent, by agent id: its activity, thinking line, latest events, commits or
    * result. Timed agents follow the trace cursor. Workers without recorded timing retain their live identity and metadata.
@@ -55,5 +54,5 @@ interface TraceWorkspaceProps extends Omit<TraceWaterfallProps, "trace" | "marke
  * 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.
  */
-declare function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChange, files, scoreboard, selectedAgentId, conversationOpen, onSelectAgent, agentCards, agentGraph, className, ...waterfall }: TraceWorkspaceProps): import("react").JSX.Element;
+declare function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChange, files, scoreboard, selectedAgentId, conversationOpen, onSelectAgent, renderAgentDrawer, agentCards, agentGraph, className, ...waterfall }: TraceWorkspaceProps): import("react").JSX.Element;
 export { ToolCallData$1 as A, taskProgress as B, RunStatusIcon$1 as C, TaskListItem as D, TaskList as E, isOpen as F, TraceWorkspace as G, LatestEvents as H, parseToolEvent as I, TraceWaterfallProps as J, TraceWorkspaceProps as K, runStatus$1 as L, ToolCallFeedProps as M, ToolCallStatus as N, TaskListProps as O, ToolCallType as P, showsTaskPriority as R, RunStatus as S, StatusMeta as T, LatestEventsProps as U, taskStatus as V, TraceEvent as W, traceSpanMark as Y, RunPhaseList as _, ApprovalPlanStep as a, RunRowStatus as b, FeedSegment as c, InlineToolItem as d, InlineToolItemProps as f, RunPhase as g, RunGroupProps as h, ApprovalDiffSummary as i, ToolCallFeed as j, TaskStatus as k, InlineThinkingItem as l, RunGroup as m, ApprovalCardProps as n, ExpandedToolDetail as o, LiveDuration as p, TraceWaterfall as q, ApprovalDiffFile as r, ExpandedToolDetailProps as s, ApprovalCard as t, InlineThinkingItemProps as u, RunRowShell as v, RunStatusIconProps as w, RunRowStatusDot as x, RunRowShellProps as y, statusMeta$1 as z };

package/dist/index.d.ts

@@ -15,7 +15,7 @@ import { C as SandboxArtifactPane, D as SandboxArtifact, E as ChangesPaneProps,
 import { n as DiffViewProps, t as DiffView } from "./diff-view-DDHWtR6X.js";
 import { a as PreviewReadiness, i as PreviewAccess, n as EmbeddedAppView, r as EmbeddedAppViewProps, t as EmbeddedApp } from "./embedded-app-view-Ta5GI4hx.js";
 import { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISchemaIssue, OpenUISchemaValidation, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode, findUnsupportedOpenUINode, validateOpenUIJsonArtifact, validateOpenUIJsonNode } from "./openui.js";
-import { A as ToolCallData, B as taskProgress, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as isOpen, G as TraceWorkspace, H as LatestEvents, I as parseToolEvent, J as TraceWaterfallProps, K as TraceWorkspaceProps, L as runStatus, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, R as showsTaskPriority, S as RunStatus, T as StatusMeta, U as LatestEventsProps, V as taskStatus, W as TraceEvent, Y as traceSpanMark, _ 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 TraceWaterfall, 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 statusMeta } from "./index-CHA38az4.js";
+import { A as ToolCallData, B as taskProgress, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as isOpen, G as TraceWorkspace, H as LatestEvents, I as parseToolEvent, J as TraceWaterfallProps, K as TraceWorkspaceProps, L as runStatus, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, R as showsTaskPriority, S as RunStatus, T as StatusMeta, U as LatestEventsProps, V as taskStatus, W as TraceEvent, Y as traceSpanMark, _ 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 TraceWaterfall, 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 statusMeta } from "./index-CeZgMx53.js";
 import { i as useEventStream, n as AgentStreamSource, r as EventStreamHandlers, t as AgentStreamOpener } from "./event-stream-DNEbvx4s.js";
 import { C as foldAgentRows, S as AgentTranscriptEntry, _ as ConversationRecord, a as VirtualList, b as AgentStreamRow, c as ConversationProps, d as ToolCall, f as indexRecord, g as ConversationNode, h as ConversationEvent, i as AgentTree, l as EventFlag, m as recordFlowTrace, n as ToolStep, o as withPrompts, p as model_d_exports, r as timelineItems, s as Conversation, t as PromptMore, u as RecordIndex, v as AgentStreamHistory, w as useAgentStream, x as AgentStreamState, y as AgentStreamPage } from "./index-Bv2iiZaN.js";
 import { n as filterFileNodes, t as fileTreeFromPaths } from "./index-CrN4d8gd.js";

package/dist/index.js

@@ -15,7 +15,7 @@ import { n as FileBreadcrumb, t as CodeView } from "./code-view-BlhCS1SD.js";
 import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-DXsoPale.js";
 import { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, findUnsupportedOpenUINode, validateOpenUIJsonArtifact, validateOpenUIJsonNode } from "./openui.js";
 import { S as ReasoningLevelPicker, _ as modelProvider, a as ChatMessage, b as DEFAULT_REASONING_LEVEL_OPTIONS, c as SpeakerHeader, d as UserMessage, f as agentTimelineStepKind, g as ArtifactAgentDock, h as partitionBySpeaker, i as ChatContainer, l as TRANSCRIPT_TEXT, m as isViewerMessage, n as AgentTimelineColumn, o as MessageAuthor, p as foldSummary, r as AgentTimelineStep, s as MessageList, t as AgentTimeline, u as ThinkingIndicator, v as snapHarnessToModel, x as HARNESS_REASONING_OPTIONS, y as AgentProfilePicker } from "./chat-BrlLa4rg.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-B634-EcA.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-DtoQ3tio.js";
 import { S as model_exports, i as ToolStep, r as PromptMore, s as timelineItems, w as recordFlowTrace, y as indexRecord } from "./use-follow-tail-DZFn7QDO.js";
 import { n as Conversation, t as AgentTree } from "./AgentTree-D4d06rfH.js";
 import { t as withPrompts } from "./record-C-EUpK-n.js";

package/dist/run/live.js

@@ -1,7 +1,7 @@
 import { t as WorkspaceFilesPane } from "../workspace-files-pane-D24G7H_Z.js";
 import { t as DiffView } from "../diff-view-B9mNeTLF.js";
 import { t as CodeView } from "../code-view-BlhCS1SD.js";
-import { a as useEventStream, t as TraceWorkspace } from "../trace-workspace-B634-EcA.js";
+import { a as useEventStream, t as TraceWorkspace } from "../trace-workspace-DtoQ3tio.js";
 import { useDocument } from "../hooks/use-document.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";

package/dist/run.d.ts

@@ -1,4 +1,4 @@
-import { A as ToolCallData, B as taskProgress, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as isOpen, G as TraceWorkspace, H as LatestEvents, I as parseToolEvent, J as TraceWaterfallProps, K as TraceWorkspaceProps, L as runStatus, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, R as showsTaskPriority, S as RunStatus, T as StatusMeta, U as LatestEventsProps, V as taskStatus, W as TraceEvent, Y as traceSpanMark, _ 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 TraceWaterfall, 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 statusMeta } from "./index-CHA38az4.js";
+import { A as ToolCallData, B as taskProgress, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as isOpen, G as TraceWorkspace, H as LatestEvents, I as parseToolEvent, J as TraceWaterfallProps, K as TraceWorkspaceProps, L as runStatus, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, R as showsTaskPriority, S as RunStatus, T as StatusMeta, U as LatestEventsProps, V as taskStatus, W as TraceEvent, Y as traceSpanMark, _ 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 TraceWaterfall, 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 statusMeta } from "./index-CeZgMx53.js";
 import { i as useEventStream, n as AgentStreamSource, r as EventStreamHandlers, t as AgentStreamOpener } from "./event-stream-DNEbvx4s.js";
 import { C as foldAgentRows, S as AgentTranscriptEntry, _ as ConversationRecord, a as VirtualList, b as AgentStreamRow, c as ConversationProps, d as ToolCall, f as indexRecord, g as ConversationNode, h as ConversationEvent, i as AgentTree, l as EventFlag, m as recordFlowTrace, n as ToolStep, o as withPrompts, p as model_d_exports, r as timelineItems, s as Conversation, t as PromptMore, u as RecordIndex, v as AgentStreamHistory, w as useAgentStream, x as AgentStreamState, y as AgentStreamPage } from "./index-Bv2iiZaN.js";
 export { type AgentStreamHistory, type AgentStreamOpener, type AgentStreamPage, 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, PromptMore, 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, ToolStep, type TraceEvent, TraceWaterfall, type TraceWaterfallProps, TraceWorkspace, type TraceWorkspaceProps, VirtualList, foldAgentRows, indexRecord, isOpen, parseToolEvent, recordFlowTrace, model_d_exports as recordModel, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus, timelineItems, traceSpanMark, useAgentStream, useEventStream, withPrompts };

package/dist/run.js

@@ -1,5 +1,5 @@
 import { t as VirtualList } from "./VirtualList-DcSGbEtA.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-B634-EcA.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-DtoQ3tio.js";
 import { S as model_exports, i as ToolStep, r as PromptMore, s as timelineItems, w as recordFlowTrace, y as indexRecord } from "./use-follow-tail-DZFn7QDO.js";
 import { n as Conversation, t as AgentTree } from "./AgentTree-D4d06rfH.js";
 import { t as withPrompts } from "./record-C-EUpK-n.js";

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

@@ -305,9 +305,9 @@ 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));
+		if (current.current.generation !== void 0) target.searchParams.set("generation", String(current.current.generation));
 		return target.toString();
-	}, [url, !!history]);
+	}, [url]);
 	useEventStream(!url || history && (!state.ready || state.ended || state.reading || beginning || !history.alive) ? void 0 : streamUrl, {
 		opener: openEventSource,
 		after: () => current.current.lastSeq,
@@ -482,7 +482,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, 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 +493,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);
@@ -642,11 +643,11 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 							})
 						]
 					}),
-					facts.length > 0 && /* @__PURE__ */ jsx("section", {
+					(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: /* @__PURE__ */ jsx("dl", {
+						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",
@@ -655,7 +656,7 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 								className: "m-0 whitespace-pre-wrap break-words",
 								children: fact.value
 							})] }, index))
-						})
+						}), detail]
 					}),
 					/* @__PURE__ */ jsx("div", {
 						ref: scroller,

package/dist/workspace-viewer.js

@@ -41358,7 +41358,7 @@ function SB(e, t) {
 		r
 	]);
 }
-// dist/trace-workspace-B634-EcA.js
+// dist/trace-workspace-DtoQ3tio.js
 function CB(e) {
 	if (e.kind === "pipeline" || e.kind === "model") {
 		let t = e.detail ? SP(e.detail) : null;
@@ -41602,8 +41602,8 @@ function NB(e, t) {
 function PB(e, t, n) {
 	let { state: r, current: i, update: a, beginning: o, begin: s, reload: c, pageReader: l } = NB(e, n), u = (0, V.useCallback)(() => {
 		let t = new URL(e, location.href);
-		return n && i.current.generation !== void 0 && t.searchParams.set("generation", String(i.current.generation)), t.toString();
-	}, [e, !!n]);
+		return i.current.generation !== void 0 && t.searchParams.set("generation", String(i.current.generation)), t.toString();
+	}, [e]);
 	SB(!e || n && (!r.ready || r.ended || r.reading || o || !n.alive) ? void 0 : u, {
 		opener: t,
 		after: () => i.current.lastSeq,
@@ -41761,57 +41761,57 @@ function IB(e, t, n, i, a, s = []) {
 		edges: l
 	};
 }
-function LB({ trace: e, streamUrl: t, openEventSource: n, events: r, onTimeChange: i, files: a, scoreboard: o, selectedAgentId: c, conversationOpen: l, onSelectAgent: u, agentCards: d, agentGraph: f, className: p, ...h }) {
-	let g = (0, V.useMemo)(() => new Map(e.spans.flatMap((e) => e.id ? [[e.id, e]] : [])), [e]), [_, v] = (0, V.useState)(), y = c ?? _, b = (e) => {
-		v(e), u?.(e);
-	}, S = y ? g.get(y) : void 0, C = y ? d?.[y] : void 0, w = S?.id ?? (C ? y : void 0), T = S?.name ?? C?.label ?? w, E = S?.detail ?? C?.model, D = !!w && l !== !1, { defaultLayout: O = "tree", ...k } = f ?? {}, [A, ee] = (0, V.useState)(O), [j, te] = (0, V.useState)(null), M = PB(y && t ? t(y) : void 0, n), P = (0, V.useMemo)(() => {
-		if (h.startedAt !== void 0) return h.startedAt;
-		let e = M.entries[0]?.at;
-		return S && e !== void 0 ? e - S.startMs : void 0;
+function LB({ trace: e, streamUrl: t, openEventSource: n, events: r, onTimeChange: i, files: a, scoreboard: o, selectedAgentId: c, conversationOpen: l, onSelectAgent: u, renderAgentDrawer: d, agentCards: f, agentGraph: p, className: h, ...g }) {
+	let _ = (0, V.useMemo)(() => new Map(e.spans.flatMap((e) => e.id ? [[e.id, e]] : [])), [e]), [v, y] = (0, V.useState)(), b = c ?? v, S = (e) => {
+		y(e), u?.(e);
+	}, C = b ? _.get(b) : void 0, w = b ? f?.[b] : void 0, T = C?.id ?? (w ? b : void 0), E = C?.name ?? w?.label ?? T, D = C?.detail ?? w?.model, O = !!T && l !== !1, k = O && T ? d?.(T) : void 0, { defaultLayout: A = "tree", ...ee } = p ?? {}, [j, te] = (0, V.useState)(A), [M, P] = (0, V.useState)(null), F = PB(b && t ? t(b) : void 0, n), ne = (0, V.useMemo)(() => {
+		if (g.startedAt !== void 0) return g.startedAt;
+		let e = F.entries[0]?.at;
+		return C && e !== void 0 ? e - C.startMs : void 0;
 	}, [
-		h.startedAt,
-		S,
-		M.entries
-	]), F = (0, V.useMemo)(() => IB(e.spans, g, j, h.startedAt, d, f?.edges), [
+		g.startedAt,
+		C,
+		F.entries
+	]), re = (0, V.useMemo)(() => IB(e.spans, _, M, g.startedAt, f, p?.edges), [
 		e,
-		g,
-		j,
-		h.startedAt,
-		d,
-		f?.edges
-	]), ne = F.nodes.find((e) => e.id === w), re = j === null || S && S.endMs <= j ? [...S?.facts ?? []] : [];
-	for (let [e, t] of [["Recorded result", ne?.result], ["Activity", ne?.turn]]) t && !re.some((e) => e.value === t) && re.push({
+		_,
+		M,
+		g.startedAt,
+		f,
+		p?.edges
+	]), ie = re.nodes.find((e) => e.id === T), ae = M === null || C && C.endMs <= M ? [...C?.facts ?? []] : [];
+	for (let [e, t] of [["Recorded result", ie?.result], ["Activity", ie?.turn]]) t && !ae.some((e) => e.value === t) && ae.push({
 		label: e,
 		value: t
 	});
-	let ie = j !== null && h.startedAt !== void 0 ? h.startedAt + j : void 0, ae = j === null || P === void 0 ? M.entries : M.entries.filter((e) => e.at - P <= j), oe = M.alive && !M.error && j === null, se = (0, V.useMemo)(() => sz(ae, oe), [ae, oe]), ce = (0, V.useRef)(null), { unseen: I, jump: le } = GR(ce, {
-		identity: D ? y : void 0,
-		content: se
+	let oe = M !== null && g.startedAt !== void 0 ? g.startedAt + M : void 0, se = M === null || ne === void 0 ? F.entries : F.entries.filter((e) => e.at - ne <= M), ce = F.alive && !F.error && M === null, I = (0, V.useMemo)(() => sz(se, ce), [se, ce]), le = (0, V.useRef)(null), { unseen: ue, jump: de } = GR(le, {
+		identity: O ? b : void 0,
+		content: I
 	});
 	return /* @__PURE__ */ (0, U.jsxs)("div", {
-		className: s("sandbox-trace-workspace flex min-h-0 flex-col gap-3", p),
+		className: s("sandbox-trace-workspace flex min-h-0 flex-col gap-3", h),
 		children: [
 			/* @__PURE__ */ (0, U.jsx)("div", {
-				className: D ? "min-w-0 lg:mr-[420px]" : "min-w-0",
+				className: O ? "min-w-0 lg:mr-[420px]" : "min-w-0",
 				children: /* @__PURE__ */ (0, U.jsx)(wB, {
-					...h,
+					...g,
 					trace: e,
 					markers: r,
-					selectedId: w,
-					onDeselect: () => b(void 0),
+					selectedId: T,
+					onDeselect: () => S(void 0),
 					onSelect: (e) => {
-						let t = FB(e, g);
-						t?.id && b(t.id);
+						let t = FB(e, _);
+						t?.id && S(t.id);
 					},
 					onTimeChange: (e) => {
-						te(e), i?.(e);
+						P(e), i?.(e);
 					},
 					latestEvents: /* @__PURE__ */ (0, U.jsx)(N, {
-						agents: F.nodes,
-						now: ie,
-						live: j === null,
-						selectedId: w,
-						onSelect: b
+						agents: re.nodes,
+						now: oe,
+						live: M === null,
+						selectedId: T,
+						onSelect: S
 					}),
 					graph: /* @__PURE__ */ (0, U.jsxs)("section", {
 						className: "flex h-[60vh] min-h-[480px] flex-col",
@@ -41820,8 +41820,8 @@ function LB({ trace: e, streamUrl: t, openEventSource: n, events: r, onTimeChang
 							className: "flex h-8 shrink-0 items-center justify-end gap-2 px-3 text-xs text-muted-foreground",
 							children: ["Layout", /* @__PURE__ */ (0, U.jsxs)("select", {
 								"aria-label": "Graph layout",
-								value: A,
-								onChange: (e) => ee(e.currentTarget.value),
+								value: j,
+								onChange: (e) => te(e.currentTarget.value),
 								className: "rounded-[var(--radius-control)] border border-border bg-card px-2 py-1 text-foreground",
 								children: [/* @__PURE__ */ (0, U.jsx)("option", {
 									value: "tree",
@@ -41832,22 +41832,22 @@ function LB({ trace: e, streamUrl: t, openEventSource: n, events: r, onTimeChang
 								})]
 							})]
 						}), /* @__PURE__ */ (0, U.jsx)(bR, {
-							...k,
-							layout: A,
+							...ee,
+							layout: j,
 							renderEventIcon: (e) => uz(e.label),
-							nodes: F.nodes,
-							edges: F.edges,
-							selectedId: w ?? null,
-							onSelect: b,
+							nodes: re.nodes,
+							edges: re.edges,
+							selectedId: T ?? null,
+							onSelect: S,
 							showLatestEvents: !1,
-							now: ie,
-							live: j === null && F.nodes.some((e) => [
+							now: oe,
+							live: M === null && re.nodes.some((e) => [
 								"running",
 								"waiting",
 								"needs-you",
 								"failed"
 							].includes(e.status)),
-							className: s("min-h-0 flex-1", k.className)
+							className: s("min-h-0 flex-1", ee.className)
 						})]
 					})
 				})
@@ -41862,10 +41862,10 @@ function LB({ trace: e, streamUrl: t, openEventSource: n, events: r, onTimeChang
 				className: "overflow-hidden rounded-xl border border-border bg-card",
 				children: o
 			}),
-			D && /* @__PURE__ */ (0, U.jsxs)("aside", {
-				"aria-label": `${T} conversation`,
+			O && /* @__PURE__ */ (0, U.jsxs)("aside", {
+				"aria-label": `${E} conversation`,
 				onKeyDown: (e) => {
-					e.key === "Escape" && b(void 0);
+					e.key === "Escape" && S(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: [
@@ -41873,25 +41873,25 @@ function LB({ trace: e, streamUrl: t, openEventSource: n, events: r, onTimeChang
 						className: "flex shrink-0 items-center gap-2 border-b border-border px-3 py-2",
 						children: [
 							/* @__PURE__ */ (0, U.jsx)("span", {
-								className: s("h-1.5 w-1.5 shrink-0 rounded-full", oe ? "bg-[var(--surface-info-text)]" : "bg-muted-foreground"),
+								className: s("h-1.5 w-1.5 shrink-0 rounded-full", ce ? "bg-[var(--surface-info-text)]" : "bg-muted-foreground"),
 								"aria-hidden": !0,
-								"data-motion": oe ? "essential" : void 0,
-								style: oe ? x : void 0,
+								"data-motion": ce ? "essential" : void 0,
+								style: ce ? x : void 0,
 								onAnimationStart: m
 							}),
 							/* @__PURE__ */ (0, U.jsx)("h3", {
 								className: "min-w-0 flex-1 truncate text-sm font-semibold",
-								children: T
+								children: E
 							}),
-							E && /* @__PURE__ */ (0, U.jsx)("span", {
+							D && /* @__PURE__ */ (0, U.jsx)("span", {
 								className: "truncate text-xs text-muted-foreground",
-								children: E
+								children: D
 							}),
 							/* @__PURE__ */ (0, U.jsx)("button", {
 								type: "button",
 								"aria-label": "Close conversation",
 								title: "Close (Esc)",
-								onClick: () => b(void 0),
+								onClick: () => S(void 0),
 								className: "shrink-0 rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
 								children: /* @__PURE__ */ (0, U.jsx)(Wr, {
 									"aria-hidden": !0,
@@ -41900,40 +41900,40 @@ function LB({ trace: e, streamUrl: t, openEventSource: n, events: r, onTimeChang
 							})
 						]
 					}),
-					re.length > 0 && /* @__PURE__ */ (0, U.jsx)("section", {
+					(ae.length > 0 || k) && /* @__PURE__ */ (0, U.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: /* @__PURE__ */ (0, U.jsx)("dl", {
+						children: [ae.length > 0 && /* @__PURE__ */ (0, U.jsx)("dl", {
 							className: "space-y-2",
-							children: re.map((e, t) => /* @__PURE__ */ (0, U.jsxs)("div", { children: [/* @__PURE__ */ (0, U.jsx)("dt", {
+							children: ae.map((e, t) => /* @__PURE__ */ (0, U.jsxs)("div", { children: [/* @__PURE__ */ (0, U.jsx)("dt", {
 								className: "text-xs text-muted-foreground",
 								children: e.label
 							}), /* @__PURE__ */ (0, U.jsx)("dd", {
 								className: "m-0 whitespace-pre-wrap break-words",
 								children: e.value
 							})] }, t))
-						})
+						}), k]
 					}),
 					/* @__PURE__ */ (0, U.jsx)("div", {
-						ref: ce,
+						ref: le,
 						"data-primary-content": "",
 						className: "min-h-0 flex-1 overflow-y-auto px-3 py-2",
-						children: t && (j === null || P !== void 0) ? /* @__PURE__ */ (0, U.jsx)(WR, {
-							items: se,
-							isThinking: oe && se.length === 0,
+						children: t && (M === null || ne !== void 0) ? /* @__PURE__ */ (0, U.jsx)(WR, {
+							items: I,
+							isThinking: ce && I.length === 0,
 							emptyState: /* @__PURE__ */ (0, U.jsx)("p", {
 								className: "p-4 text-sm text-muted-foreground",
-								children: M.error ?? "No messages yet."
+								children: F.error ?? "No messages yet."
 							})
 						}) : /* @__PURE__ */ (0, U.jsx)("p", {
 							className: "p-4 text-sm text-muted-foreground",
 							children: "Conversation: not time-indexed"
 						})
 					}),
-					I && /* @__PURE__ */ (0, U.jsx)("button", {
+					ue && /* @__PURE__ */ (0, U.jsx)("button", {
 						type: "button",
-						onClick: () => le(),
+						onClick: () => de(),
 						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"
 					})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
@@ -234,7 +234,7 @@
   },
   "dependencies": {
     "@lobehub/icons-static-svg": "^1.98.0",
-    "@pierre/diffs": "^1.6.1",
+    "@pierre/diffs": ">=1.6.1 <1.6.3",
     "@radix-ui/react-dialog": "^1.3.1",
     "@radix-ui/react-dropdown-menu": "^2.2.1",
     "@radix-ui/react-select": "^2.4.1",