@tangle-network/sandbox-ui 7.0.4 → 7.0.5

package/dist/styles.css

@@ -548,6 +548,9 @@
   .m-0 {
     margin: 0px;
   }
+  .m-1 {
+    margin: var(--spacing);
+  }
   .m-4 {
     margin: calc(var(--spacing) * 4);
   }
@@ -4437,6 +4440,10 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .grayscale {
+    --tw-grayscale: grayscale(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .\!filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;
   }
@@ -5273,6 +5280,10 @@
       --tw-brightness: brightness(110%);
       filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
     }
+    .hover\:grayscale-0:hover {
+      --tw-grayscale: grayscale(0%);
+      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+    }
   }
   .focus\:border-\[var\(--focus-border\)\]:focus {
     border-color: var(--focus-border);
@@ -5943,6 +5954,9 @@
     .sm\:\!block {
       display: block !important;
     }
+    .sm\:block {
+      display: block;
+    }
     .sm\:flex {
       display: flex;
     }

package/dist/terminal.js

@@ -1 +1 @@
-export { t as DEFAULT_TERMINAL_THEME, n as TerminalView } from "./terminal-nUCznZRj.js";
+export { t as DEFAULT_TERMINAL_THEME, n as TerminalView } from "./terminal-view-nUCznZRj.js";

package/dist/{trace-workspace-EArXc0uP.js → trace-workspace-HCTpp-qw.js}

@@ -2,7 +2,7 @@ import { t as cn$1 } 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 } from "./AgentGraph-BGWx9hhS.js";
-import { s as timelineItems, t as useFollowTail } from "./use-follow-tail-Df965WQi.js";
+import { O as useFollowTail, o as timelineItems } from "./ConversationRowView-C4TXICBT.js";
 import { Button, SegmentedControl } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
@@ -427,6 +427,59 @@ function useAgentStream(url, openEventSource, history) {
 		} } : {}
 	};
 }
+/** One agent's conversation as of a cursor: its stream, the entries said by then, and the sentence shown when none are. */
+function useAgentConversation(url, openEventSource, { cursor = null, startedAt, agentStartMs, silent: why } = {}) {
+	const stream = useAgentStream(url, openEventSource);
+	const origin = useMemo(() => {
+		if (startedAt !== void 0) return startedAt;
+		const first = stream.entries[0]?.at;
+		return agentStartMs !== void 0 && first !== void 0 ? first - agentStartMs : void 0;
+	}, [
+		startedAt,
+		agentStartMs,
+		stream.entries
+	]);
+	const shown = cursor === null || origin === void 0 ? stream.entries : stream.entries.filter((entry) => entry.at - origin <= cursor);
+	const live = stream.alive && !stream.error && cursor === null;
+	const ended = !stream.alive && !stream.error;
+	const items = useMemo(() => timelineItems(shown, live), [shown, live]);
+	const silent = why || "No conversation was recorded for this agent.";
+	return {
+		stream,
+		shown,
+		items,
+		live,
+		ended,
+		note: !url ? silent : cursor !== null && origin === void 0 ? "This conversation has no timestamps to replay at the cursor." : items.length > 0 || live ? void 0 : stream.error ? ended ? stream.error : `Reconnecting… ${stream.error}` : ended ? silent : "No messages yet.",
+		silent
+	};
+}
+/** The conversation's rows, or the one sentence that stands in for them. */
+function AgentConversationView({ conversation, className }) {
+	const { items, live, note, stream, ended } = conversation;
+	if (note === void 0) return /* @__PURE__ */ jsx(AgentTimelineColumn, {
+		className: className ?? "max-w-[46rem] p-0",
+		children: /* @__PURE__ */ jsx(AgentTimeline, {
+			items,
+			isThinking: live && items.length === 0
+		})
+	});
+	return /* @__PURE__ */ jsx("p", {
+		className: "m-0 py-1 text-sm text-muted-foreground",
+		"data-stream": stream.error ? "reconnecting" : ended ? "ended" : "empty",
+		children: note
+	});
+}
+/** The pill that offers the newest output after the reader scrolled up. */
+function NewOutputPill({ unseen, onJump }) {
+	if (!unseen) return null;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onJump,
+		className: "absolute bottom-14 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"
+	});
+}
 // src/run/agent-inspector.tsx
 /** Below the tablet breakpoint the inspector is a full-screen sheet over the run, never a squeezed side pane. */
 const PHONE = "(max-width: 767px)";
@@ -859,16 +912,13 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 	const { defaultLayout = "tree", ...graphOptions } = agentGraph ?? {};
 	const [graphLayout, setGraphLayout] = useState(defaultLayout);
 	const [cursor, setCursor] = useState(null);
-	const stream = useAgentStream(selected && streamUrl ? streamUrl(selected) : void 0, openEventSource);
-	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 conversation = useAgentConversation(selected && streamUrl ? streamUrl(selected) : void 0, openEventSource, {
+		cursor,
+		startedAt: waterfall.startedAt,
+		agentStartMs: agent?.startMs,
+		silent: agentId ? transcriptNote?.(agentId) : void 0
+	});
+	const { shown, items, live, note, silent } = conversation;
 	const graph = useMemo(() => agentGraphAt(trace.spans, byId, cursor, waterfall.startedAt, agentCards, agentGraph?.edges), [
 		trace,
 		byId,
@@ -884,10 +934,6 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 		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 ended = !stream.alive && !stream.error;
-	const items = useMemo(() => timelineItems(shown, live), [shown, live]);
 	const scroller = useRef(null);
 	const { unseen, jump } = useFollowTail(scroller, {
 		identity: showConversation ? selected : void 0,
@@ -899,19 +945,6 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 	const status = live ? "running" : selectedNode?.status ?? runStatus(agent?.status ?? "unknown");
 	const failure = facts.find((fact) => fact.label === "Failure")?.value ?? (status === "failed" ? selectedNode?.result ?? void 0 : void 0);
 	const said = (text) => !!text && shown.some((entry) => entry.kind === "message" && entry.role === "user" && entry.content.trim() === text.trim());
-	const silent = agentId && transcriptNote?.(agentId) || "No conversation was recorded for this agent.";
-	const note = !streamUrl ? silent : cursor !== null && origin === void 0 ? "This conversation has no timestamps to replay at the cursor." : items.length > 0 || live ? void 0 : stream.error ? ended ? stream.error : `Reconnecting… ${stream.error}` : ended ? silent : "No messages yet.";
-	const conversation = note === void 0 ? /* @__PURE__ */ jsx(AgentTimelineColumn, {
-		className: "max-w-[46rem] p-0",
-		children: /* @__PURE__ */ jsx(AgentTimeline, {
-			items,
-			isThinking: live && items.length === 0
-		})
-	}) : /* @__PURE__ */ jsx("p", {
-		className: "m-0 py-1 text-sm text-muted-foreground",
-		"data-stream": stream.error ? "reconnecting" : ended ? "ended" : "empty",
-		children: note
-	});
 	const left = /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: cn$1("flex min-h-[320px] min-w-0 flex-1 flex-col", showConversation && mode === "overlay" && "lg:mr-[420px]"),
@@ -939,13 +972,20 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 						value: graphLayout,
 						onValueChange: setGraphLayout,
 						className: "absolute right-2 top-1 z-10",
-						options: [{
-							value: "tree",
-							label: "Tree"
-						}, {
-							value: "hub",
-							label: "Hub"
-						}]
+						options: [
+							{
+								value: "grid",
+								label: "Grid"
+							},
+							{
+								value: "tree",
+								label: "Tree"
+							},
+							{
+								value: "hub",
+								label: "Hub"
+							}
+						]
 					}), /* @__PURE__ */ jsx(AgentGraph, {
 						...graphOptions,
 						layout: graphLayout,
@@ -1008,8 +1048,8 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 			onClose: () => select(void 0),
 			mode,
 			style: mode === "docked" ? { width: split.width } : void 0,
-			children: conversation
+			children: /* @__PURE__ */ jsx(AgentConversationView, { conversation })
 		})] })]
 	});
 }
-export { TraceWaterfall as a, useEventStream as i, foldAgentRows as n, traceSpanMark as o, useAgentStream as r, TraceWorkspace as t };
+export { useAgentConversation as a, useEventStream as c, NewOutputPill as i, TraceWaterfall as l, usePhone as n, foldAgentRows as o, AgentConversationView as r, useAgentStream as s, TraceWorkspace as t, traceSpanMark as u };

package/dist/{workbench-D0ALR40M.js → workbench-CugraIbl.js}

@@ -2,7 +2,8 @@ import { t as cn$1 } from "./utils-BER_bdgE.js";
 import { t as revealInScroller } from "./reveal-in-scroller-CzKwuqCG.js";
 import { t as VirtualList } from "./VirtualList-DcSGbEtA.js";
 import { a as PortsList } from "./dashboard-C7QJJw7-.js";
-import { n as TerminalView } from "./terminal-nUCznZRj.js";
+import { n as TerminalView } from "./terminal-view-nUCznZRj.js";
+import "./terminal.js";
 import { n as buildUnifiedPatch, r as computeDiffStats, t as DiffView } from "./diff-view-B9mNeTLF.js";
 import { t as CodeView } from "./code-view-BlhCS1SD.js";
 import { n as PreviewView } from "./embedded-app-view-DXsoPale.js";

package/dist/workbench.js

@@ -1,4 +1,4 @@
-import { a as GitStatusBadge, i as DiffStatsBadge, n as ChangesPane, o as PanelHeader, r as SandboxArtifactPane, s as PillTabs, t as JsonView } from "./workbench-D0ALR40M.js";
+import { a as GitStatusBadge, i as DiffStatsBadge, n as ChangesPane, o as PanelHeader, r as SandboxArtifactPane, s as PillTabs, t as JsonView } from "./workbench-CugraIbl.js";
 import { a as CodeSurface, i as CODE_THEME, n as buildUnifiedPatch, r as computeDiffStats, t as DiffView } from "./diff-view-B9mNeTLF.js";
 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";