@tangle-network/sandbox-ui 2.0.17 → 2.0.18

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

@@ -2,13 +2,12 @@ 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 "./record-Bqt1kE_Q.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, 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 { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail as ExpandedToolDetail$1, InlineThinkingItem, InlineThinkingItem as InlineThinkingItem$1, InlineToolItem, LiveDuration, RunGroup, RunPhaseList, 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 { InlineThinkingItem, runStatus } from "@tangle-network/ui/run";
 import { FlowWaterfall, toolGlyph } from "@tangle-network/charts/react";
 import { LatestEvents } from "@tangle-network/charts/react/agent-graph";
 // src/run/trace-waterfall.tsx
@@ -613,4 +612,4 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 		]
 	});
 }
-export { useAgentStream as C, foldAgentRows as S, traceSpanMark as T, statusMeta$1 as _, InlineToolItem as a, TraceWorkspace 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$1 as r, RunGroup as s, ApprovalCard as t, RunRowStatusDot as u, taskProgress as v, TraceWaterfall as w, LatestEvents as x, taskStatus as y };
+export { TraceWaterfall as a, useAgentStream as i, LatestEvents as n, traceSpanMark as o, foldAgentRows as r, TraceWorkspace as t };

package/dist/use-document-D6Z9oFLm.js

@@ -0,0 +1,120 @@
+import { useEffect, useRef, useState } from "react";
+// src/hooks/use-document.ts
+/** How soon a document the server marked stale (X-Workspace-Stale) is fetched again, backing off by half each time:
+* about a minute in all, the longest a plays index takes to recompose on a loaded host. */
+const STALE_RETRY_MS = 2500;
+const STALE_RETRIES = 6;
+const NETWORK_RETRIES = 4;
+/**
+* Same-origin JSON with ETag revalidation. `poll` refetches every `poll` ms while set; turning polling on or off keeps
+* the document. With `keepPrevious`, a new URL (a record's next digest) keeps showing the previous document until the
+* new one arrives, so a run being written never blanks between versions. A response marked stale is refetched until it is current.
+*/
+function useDocument(url, poll, keepPrevious = false, fetcher = globalThis.fetch) {
+	const [state, setState] = useState({
+		url,
+		loading: !!url
+	});
+	const etag = useRef(null);
+	const shown = useRef(void 0);
+	useEffect(() => {
+		if (shown.current !== url) {
+			shown.current = url;
+			etag.current = null;
+			setState((current) => keepPrevious && url && current.data !== void 0 ? {
+				...current,
+				url,
+				loading: true,
+				error: void 0
+			} : {
+				url,
+				loading: !!url
+			});
+		}
+		if (!url) return;
+		let alive = true;
+		let timer = 0;
+		let stale = false;
+		let retries = 0;
+		let dropped = 0;
+		let lost = false;
+		const controller = new AbortController();
+		const load = async () => {
+			lost = false;
+			try {
+				const response = await fetcher(url, {
+					credentials: "same-origin",
+					signal: controller.signal,
+					headers: etag.current ? { "If-None-Match": etag.current } : {}
+				});
+				if (!alive) return;
+				dropped = 0;
+				stale = response.headers.get("X-Workspace-Stale") === "1";
+				const failing = response.headers.get("X-Workspace-Compose-Error") ?? void 0;
+				if (!stale && (response.ok || response.status === 304)) retries = 0;
+				if (response.status === 304) {
+					setState((current) => current.stale === stale && current.failing === failing ? current : {
+						...current,
+						stale,
+						failing
+					});
+					return;
+				}
+				if (!response.ok) {
+					let reason = `HTTP ${response.status}`;
+					try {
+						const body = await response.json();
+						if (body && typeof body === "object" && typeof body.reason === "string") reason = body.reason;
+					} catch {}
+					setState((current) => ({
+						...current,
+						loading: false,
+						error: reason,
+						status: response.status
+					}));
+					return;
+				}
+				etag.current = response.headers.get("ETag");
+				const data = await response.json();
+				if (alive) setState({
+					url,
+					data,
+					loading: false,
+					status: response.status,
+					stale,
+					failing
+				});
+			} catch (error) {
+				if (alive && !controller.signal.aborted && dropped < NETWORK_RETRIES) lost = true;
+				else if (alive && !controller.signal.aborted) setState((current) => ({
+					...current,
+					loading: false,
+					error: error instanceof Error ? error.message : "Request failed"
+				}));
+			} finally {
+				if (alive && lost) {
+					timer = window.setTimeout(load, 1e3 * 2 ** dropped);
+					dropped += 1;
+				} else if (alive && stale && retries < STALE_RETRIES) {
+					timer = window.setTimeout(load, STALE_RETRY_MS * 1.5 ** retries);
+					retries += 1;
+				} else if (alive && poll) timer = window.setTimeout(load, poll);
+			}
+		};
+		load();
+		return () => {
+			alive = false;
+			controller.abort();
+			window.clearTimeout(timer);
+		};
+	}, [
+		url,
+		poll,
+		fetcher
+	]);
+	return keepPrevious || state.url === url ? state : {
+		url,
+		loading: !!url
+	};
+}
+export { useDocument as t };

package/dist/{workbench-BozOdGCX.js → workbench-Z9wbei53.js}

@@ -1,13 +1,13 @@
 import { t as cn$1 } from "./utils-BER_bdgE.js";
 import { a as PortsList } from "./dashboard-exTS8tta.js";
 import { n as TerminalView } from "./terminal-nUCznZRj.js";
-import { RichFileTree } from "./files.js";
-import { a as CodeSurface, n as buildUnifiedPatch, r as computeDiffStats, t as DiffView } from "./diff-view-B9mNeTLF.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";
 import { Button, Skeleton, Textarea } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
-import { Check, ChevronRight, Code2, Copy, FileCode2, GitBranch, GitCompare, Globe, Network, RefreshCw, SquareTerminal, WrapText } from "lucide-react";
+import { Check, Code2, Copy, GitBranch, GitCompare, Globe, Network, RefreshCw, SquareTerminal } from "lucide-react";
 import { focusRing, focusRingInset } from "@tangle-network/ui/utils";
 // src/workbench/pill-tabs.tsx
 /**
@@ -218,174 +218,6 @@ function PanelHeader({ filename, gitStatus, stats, copyText, children, className
 		]
 	});
 }
-// src/workbench/file-breadcrumb.tsx
-/**
-* Slim path breadcrumb for the code panel. Reimplemented (not ported) from
-* blueprint-agent's `FileBreadcrumb` — that one nests a `FileTree` dropdown per
-* segment and couples to the workbench store + framer-motion. Here the rail
-* already owns navigation, so this is a read-only trail: caret-separated parent
-* segments with a file-icon leaf.
-*/
-function FileBreadcrumb({ path, className }) {
-	const segments = path.split("/").filter(Boolean);
-	const leaf = segments[segments.length - 1] ?? path;
-	const parents = segments.slice(0, -1);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn$1("flex min-h-[30px] items-center gap-1 overflow-hidden border-b border-[var(--md3-outline-variant)] bg-surface-container-lowest px-3 text-xs text-muted-foreground", className),
-		children: [
-			/* @__PURE__ */ jsx(FileCode2, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-			parents.map((seg, i) => /* @__PURE__ */ jsxs(React$1.Fragment, { children: [/* @__PURE__ */ jsx("span", {
-				className: "truncate font-mono",
-				children: seg
-			}), /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 shrink-0 opacity-50" })] }, `${seg}-${i}`)),
-			/* @__PURE__ */ jsx("span", {
-				className: "truncate font-mono text-foreground",
-				children: leaf
-			})
-		]
-	});
-}
-// src/workbench/code-view.tsx
-/**
-* Code surface: a fixed-width `RichFileTree` rail (with git-status
-* decorations) beside a breadcrumb-topped, syntax-highlighted read-only file
-* view. The rail owns navigation; selecting a path fans out to `onFileSelect`
-* so the host can swap the active artifact.
-*/
-function CodeView({ path, filename, content, language, paths, gitStatus, onFileSelect, showTree = true, defaultWrap = false, themeType, className }) {
-	const [narrowPane, setNarrowPane] = React$1.useState("code");
-	const [wrap, setWrap] = React$1.useState(defaultWrap);
-	const [copied, setCopied] = React$1.useState(false);
-	const [line, setLine] = React$1.useState();
-	const lineInput = React$1.useRef(null);
-	const lineCount = React$1.useMemo(() => content.split("\n").length, [content]);
-	React$1.useEffect(() => {
-		setLine(void 0);
-	}, [path]);
-	React$1.useEffect(() => {
-		if (!copied) return;
-		const timer = setTimeout(() => setCopied(false), 1500);
-		return () => clearTimeout(timer);
-	}, [copied]);
-	const copy = () => {
-		navigator.clipboard?.writeText(content).then(() => setCopied(true));
-	};
-	const goToLine = (event) => {
-		event.preventDefault();
-		const value = Math.round(Number(lineInput.current?.value));
-		if (Number.isFinite(value) && value >= 1) setLine(Math.min(value, lineCount));
-	};
-	const treePaths = React$1.useMemo(() => {
-		const list = paths && paths.length > 0 ? paths : [path];
-		return list.includes(path) ? list : [...list, path];
-	}, [paths, path]);
-	return /* @__PURE__ */ jsx("div", {
-		className: cn$1("sandbox-code-view h-full min-h-0 w-full", className),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "sandbox-code-view-layout flex h-full min-h-0 w-full",
-			children: [
-				showTree && /* @__PURE__ */ jsxs("div", {
-					className: "sandbox-code-view-mobile-toolbar",
-					role: "group",
-					"aria-label": "Code view pane",
-					children: [/* @__PURE__ */ jsx("button", {
-						type: "button",
-						"aria-pressed": narrowPane === "files",
-						onClick: () => setNarrowPane("files"),
-						className: focusRing,
-						children: "Files"
-					}), /* @__PURE__ */ jsx("button", {
-						type: "button",
-						"aria-pressed": narrowPane === "code",
-						onClick: () => setNarrowPane("code"),
-						className: focusRing,
-						children: "Code"
-					})]
-				}),
-				showTree && /* @__PURE__ */ jsx("div", {
-					className: "sandbox-code-view-tree sandbox-tree-surface flex w-60 shrink-0 flex-col border-r border-[var(--md3-outline-variant)] bg-surface-container-lowest",
-					"data-mobile-open": narrowPane === "files",
-					children: /* @__PURE__ */ jsx(RichFileTree, {
-						paths: treePaths,
-						selectedPath: path,
-						onSelect: (next) => {
-							onFileSelect?.(next);
-							setNarrowPane("code");
-						},
-						gitStatus,
-						search: treePaths.length > 12,
-						height: "100%"
-					})
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "sandbox-code-view-editor flex min-w-0 flex-1 flex-col bg-surface-container",
-					"data-mobile-hidden": showTree && narrowPane === "files",
-					onKeyDown: (event) => {
-						if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "g") {
-							event.preventDefault();
-							lineInput.current?.focus();
-							lineInput.current?.select();
-						}
-					},
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex shrink-0 items-center border-b border-[var(--md3-outline-variant)] bg-surface-container-lowest",
-						children: [/* @__PURE__ */ jsx(FileBreadcrumb, {
-							path,
-							className: "min-w-0 flex-1 border-b-0"
-						}), /* @__PURE__ */ jsxs("form", {
-							onSubmit: goToLine,
-							className: "flex shrink-0 items-center gap-0.5 pr-1",
-							children: [
-								/* @__PURE__ */ jsx("input", {
-									ref: lineInput,
-									type: "number",
-									min: 1,
-									max: lineCount,
-									inputMode: "numeric",
-									placeholder: "Line",
-									"aria-label": "Go to line",
-									"aria-keyshortcuts": "Control+g Meta+g",
-									className: cn$1("h-6 w-14 rounded border border-transparent bg-transparent px-1.5 font-mono text-xs text-foreground placeholder:text-muted-foreground hover:border-border", focusRing)
-								}),
-								/* @__PURE__ */ jsx(Button, {
-									type: "button",
-									variant: "ghost",
-									size: "sm",
-									"aria-pressed": wrap,
-									"aria-label": "Wrap lines",
-									title: "Wrap lines",
-									onClick: () => setWrap((value) => !value),
-									className: cn$1("h-6 w-6 p-0", wrap && "text-foreground bg-surface-container-high"),
-									children: /* @__PURE__ */ jsx(WrapText, { className: "h-3.5 w-3.5" })
-								}),
-								/* @__PURE__ */ jsx(Button, {
-									type: "button",
-									variant: "ghost",
-									size: "sm",
-									"aria-label": copied ? "Copied" : "Copy file",
-									title: copied ? "Copied" : "Copy file",
-									onClick: copy,
-									className: "h-6 w-6 p-0",
-									children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
-								})
-							]
-						})]
-					}), /* @__PURE__ */ jsx("div", {
-						className: "min-h-0 flex-1",
-						children: /* @__PURE__ */ jsx(CodeSurface, {
-							code: content,
-							filename,
-							language,
-							wrap,
-							line,
-							themeType
-						})
-					})]
-				})
-			]
-		})
-	});
-}
 // src/workbench/sandbox-artifact-pane.tsx
 const VIEW_ORDER = [
 	"code",
@@ -889,4 +721,4 @@ function ChangesPane({ branch, ahead = 0, behind = 0, files, selectedPath, onSel
 		]
 	});
 }
-export { DiffStatsBadge as a, PillTabs as c, FileBreadcrumb as i, SandboxArtifactPane as n, GitStatusBadge as o, CodeView as r, PanelHeader as s, ChangesPane as t };
+export { PanelHeader as a, GitStatusBadge as i, SandboxArtifactPane as n, PillTabs as o, DiffStatsBadge as r, ChangesPane as t };

package/dist/workbench.js

@@ -1,4 +1,5 @@
-import { a as DiffStatsBadge, c as PillTabs, i as FileBreadcrumb, n as SandboxArtifactPane, o as GitStatusBadge, r as CodeView, s as PanelHeader, t as ChangesPane } from "./workbench-BozOdGCX.js";
+import { a as PanelHeader, i as GitStatusBadge, n as SandboxArtifactPane, o as PillTabs, r as DiffStatsBadge, t as ChangesPane } from "./workbench-Z9wbei53.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";
 export { CODE_THEME, ChangesPane, CodeSurface, CodeView, DiffStatsBadge, DiffView, EmbeddedAppView, FileBreadcrumb, GitStatusBadge, PanelHeader, PillTabs, PreviewView, SandboxArtifactPane, buildUnifiedPatch, computeDiffStats };