@tangle-network/sandbox-ui 0.137.2 → 0.138.0

package/dist/workbench.d.ts

@@ -1,3 +1,4 @@
-import { A as SandboxArtifactTerminal, C as ChangesPane, D as ChangesPaneProps, E as ChangedFile, O as SandboxArtifact, S as PillTabsProps, T as ArtifactView, _ as DiffStats, a as PreviewView, b as PillTabItem, c as DiffViewProps, d as FileBreadcrumb, f as FileBreadcrumbProps, g as PanelHeaderProps, h as PanelHeader, i as resolveLanguage, k as SandboxArtifactPaneProps, l as CodeView, m as GitStatusBadge, n as CodeSurface, o as PreviewViewProps, p as DiffStatsBadge, r as CodeSurfaceProps, s as DiffView, t as BRAND_PRISM_THEME, u as CodeViewProps, v as buildUnifiedPatch, w as SandboxArtifactPane, x as PillTabs, y as computeDiffStats } from "./index-T4-5mWTq.js";
+import { C as ChangedFile, D as SandboxArtifactTerminal, E as SandboxArtifactPaneProps, S as ArtifactView, T as SandboxArtifact, _ as PillTabItem, a as PreviewViewProps, b as ChangesPane, c as FileBreadcrumb, d as GitStatusBadge, f as PanelHeader, g as computeDiffStats, h as buildUnifiedPatch, i as PreviewView, l as FileBreadcrumbProps, m as DiffStats, n as CodeSurface, o as CodeView, p as PanelHeaderProps, r as CodeSurfaceProps, s as CodeViewProps, t as CODE_THEME, u as DiffStatsBadge, v as PillTabs, w as ChangesPaneProps, x as SandboxArtifactPane, y as PillTabsProps } from "./index-CvtEhIpk.js";
+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";
-export { type ArtifactView, BRAND_PRISM_THEME, type ChangedFile, ChangesPane, type ChangesPaneProps, CodeSurface, type CodeSurfaceProps, CodeView, type CodeViewProps, type DiffStats, DiffStatsBadge, DiffView, type DiffViewProps, type EmbeddedApp, EmbeddedAppView, type EmbeddedAppViewProps, FileBreadcrumb, type FileBreadcrumbProps, GitStatusBadge, PanelHeader, type PanelHeaderProps, type PillTabItem, PillTabs, type PillTabsProps, type PreviewAccess, type PreviewReadiness, PreviewView, type PreviewViewProps, type SandboxArtifact, SandboxArtifactPane, type SandboxArtifactPaneProps, type SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage };
+export { type ArtifactView, CODE_THEME, type ChangedFile, ChangesPane, type ChangesPaneProps, CodeSurface, type CodeSurfaceProps, CodeView, type CodeViewProps, type DiffStats, DiffStatsBadge, DiffView, type DiffViewProps, type EmbeddedApp, EmbeddedAppView, type EmbeddedAppViewProps, FileBreadcrumb, type FileBreadcrumbProps, GitStatusBadge, PanelHeader, type PanelHeaderProps, type PillTabItem, PillTabs, type PillTabsProps, type PreviewAccess, type PreviewReadiness, PreviewView, type PreviewViewProps, type SandboxArtifact, SandboxArtifactPane, type SandboxArtifactPaneProps, type SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats };

package/dist/workbench.js

@@ -1,3 +1,4 @@
-import { a as computeDiffStats, c as BRAND_PRISM_THEME, d as DiffStatsBadge, f as GitStatusBadge, i as buildUnifiedPatch, l as CodeSurface, m as PillTabs, n as SandboxArtifactPane, o as CodeView, p as PanelHeader, r as DiffView, s as FileBreadcrumb, t as ChangesPane, u as resolveLanguage } from "./workbench-GDuy3rB5.js";
+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-B3JL1qbt.js";
+import { a as CodeSurface, i as CODE_THEME, n as buildUnifiedPatch, r as computeDiffStats, t as DiffView } from "./diff-view-A0O0Z_SR.js";
 import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-DXsoPale.js";
-export { BRAND_PRISM_THEME, ChangesPane, CodeSurface, CodeView, DiffStatsBadge, DiffView, EmbeddedAppView, FileBreadcrumb, GitStatusBadge, PanelHeader, PillTabs, PreviewView, SandboxArtifactPane, buildUnifiedPatch, computeDiffStats, resolveLanguage };
+export { CODE_THEME, ChangesPane, CodeSurface, CodeView, DiffStatsBadge, DiffView, EmbeddedAppView, FileBreadcrumb, GitStatusBadge, PanelHeader, PillTabs, PreviewView, SandboxArtifactPane, buildUnifiedPatch, computeDiffStats };

package/dist/{workspace-Cpgyw5N7.js → workspace-DRhi6S3o.js}

@@ -8,7 +8,7 @@ import { Markdown } from "@tangle-network/ui/markdown";
 import { useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { AlertCircle, AlertTriangle, ArrowLeft, Binary, Bot, Boxes, CheckCircle, ChevronDown, ChevronUp, FileCode2, FileText, FolderOpen, FolderTree, LayoutPanelTop, Loader2, MessageSquareText, PanelBottomClose, PanelBottomOpen, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Plus, RefreshCw, Search, Settings, ShieldCheck, Sparkles, Terminal, TerminalSquare, Upload, Wifi, X, Zap } from "lucide-react";
+import { AlertCircle, AlertTriangle, ArrowLeft, Binary, Bot, Boxes, CheckCircle, ChevronDown, ChevronUp, FileCode2, FileText, FolderOpen, FolderTree, LayoutPanelTop, Loader2, Maximize2, MessageSquareText, Minimize2, PanelBottomClose, PanelBottomOpen, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Plus, RefreshCw, Search, Settings, ShieldCheck, Sparkles, Terminal, TerminalSquare, Upload, Wifi, X, Zap } from "lucide-react";
 import { focusField, focusRing, focusRingInset } from "@tangle-network/ui/utils";
 import { FileArtifactPane, FileTree, filterFileTree } from "@tangle-network/ui/files";
 import { useNavbarSessions } from "@tangle-network/ui/stores";
@@ -2500,6 +2500,78 @@ function ApprovalQueue({ items, className, onApprove, onReject, renderItemDetail
 	});
 }
 // src/workspace/workspace-files-pane.tsx
+const SPLIT_MIN_PX = 640;
+const SIDEBAR_DEFAULT_PX = 280;
+const SIDEBAR_MIN_PX = 200;
+/** The sidebar's width, clamped to 200 px .. half the pane, remembered per viewer under `expansionKey` when given. */
+function useSidebarWidth(key, containerWidth) {
+	const storageKey = key ? `${key}:sidebar-width` : void 0;
+	const [stored, setStored] = useState(() => {
+		if (!storageKey) return SIDEBAR_DEFAULT_PX;
+		try {
+			const value = Number(globalThis.localStorage?.getItem(storageKey));
+			return Number.isFinite(value) && value > 0 ? value : SIDEBAR_DEFAULT_PX;
+		} catch {
+			return SIDEBAR_DEFAULT_PX;
+		}
+	});
+	const max = Math.max(SIDEBAR_MIN_PX, containerWidth > 0 ? Math.floor(containerWidth / 2) : 560);
+	const width = Math.min(max, Math.max(SIDEBAR_MIN_PX, stored));
+	const save = (px) => {
+		const next = Math.min(max, Math.max(SIDEBAR_MIN_PX, Math.round(px)));
+		setStored(next);
+		if (storageKey) try {
+			globalThis.localStorage?.setItem(storageKey, String(next));
+		} catch {}
+	};
+	return {
+		width,
+		min: SIDEBAR_MIN_PX,
+		max,
+		set: save,
+		reset: () => save(SIDEBAR_DEFAULT_PX)
+	};
+}
+/** Drag, arrow keys (Shift for larger steps), Home/End, or double-click to reset the sidebar width. */
+function SidebarResizer({ sidebar, label }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "vertical",
+		"aria-label": `Resize ${label.toLowerCase()} sidebar`,
+		"aria-valuenow": sidebar.width,
+		"aria-valuemin": sidebar.min,
+		"aria-valuemax": sidebar.max,
+		tabIndex: 0,
+		onDoubleClick: sidebar.reset,
+		onKeyDown: (event) => {
+			const step = event.shiftKey ? 64 : 16;
+			if (event.key === "ArrowLeft") sidebar.set(sidebar.width - step);
+			else if (event.key === "ArrowRight") sidebar.set(sidebar.width + step);
+			else if (event.key === "Home") sidebar.set(sidebar.min);
+			else if (event.key === "End") sidebar.set(sidebar.max);
+			else return;
+			event.preventDefault();
+		},
+		onPointerDown: (event) => {
+			const handle = event.currentTarget;
+			const startX = event.clientX;
+			const startWidth = sidebar.width;
+			handle.setPointerCapture(event.pointerId);
+			const move = (next) => sidebar.set(startWidth + next.clientX - startX);
+			const up = () => {
+				handle.removeEventListener("pointermove", move);
+				handle.removeEventListener("pointerup", up);
+			};
+			handle.addEventListener("pointermove", move);
+			handle.addEventListener("pointerup", up);
+		},
+		className: "group relative w-1.5 shrink-0 cursor-col-resize touch-none outline-none",
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-border transition-colors group-hover:bg-primary group-focus-visible:bg-primary"
+		})
+	});
+}
 function indexNodes(nodes) {
 	const index = /* @__PURE__ */ new Map();
 	const visit = (node) => {
@@ -2520,8 +2592,30 @@ function activeElementWithin(element) {
 * The tree sits in its own surface: folders start collapsed, expansion is
 * remembered under `expansionKey`, and a preview replaces the tree until Back.
 */
-function WorkspaceFilesPane({ root, paths, selectedPath, onSelect, preview, onBack, emptyState, expansionKey, search = true, label = "Files", headerActions, surface = "card", className, style }) {
+function WorkspaceFilesPane({ root, paths, selectedPath, onSelect, preview, onBack, emptyState, expansionKey, search = true, label = "Files", headerActions, surface = "card", layout = "split", tabs = true, expandable = true, className, style }) {
 	const plain = surface === "plain";
+	const rootRef = useRef(null);
+	const [containerWidth, setContainerWidth] = useState(0);
+	useEffect(() => {
+		const element = rootRef.current;
+		if (!element || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(([entry]) => setContainerWidth(entry.contentRect.width));
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+	const split = layout === "split" && (containerWidth === 0 || containerWidth >= SPLIT_MIN_PX);
+	const sidebar = useSidebarWidth(expansionKey, containerWidth);
+	const [expanded, setExpanded] = useState(false);
+	useEffect(() => {
+		if (!expanded) return;
+		const keydown = (event) => {
+			if (event.key !== "Escape" || event.defaultPrevented) return;
+			event.preventDefault();
+			setExpanded(false);
+		};
+		document.addEventListener("keydown", keydown);
+		return () => document.removeEventListener("keydown", keydown);
+	}, [expanded]);
 	const nodes = useMemo(() => root ? root.path ? [root] : root.children ?? [] : fileTreeFromPaths(paths ?? []), [root, paths]);
 	const index = useMemo(() => indexNodes(nodes), [nodes]);
 	const [query, setQuery] = useState("");
@@ -2548,6 +2642,10 @@ function WorkspaceFilesPane({ root, paths, selectedPath, onSelect, preview, onBa
 			wasPreviewRef.current = hasPreview;
 			return;
 		}
+		if (split) {
+			wasPreviewRef.current = hasPreview;
+			return;
+		}
 		if (hasPreview && !wasPreviewRef.current && openedByReaderRef.current) backRef.current?.focus({ preventScroll: true });
 		openedByReaderRef.current = false;
 		if (!hasPreview && wasPreviewRef.current) {
@@ -2556,118 +2654,221 @@ function WorkspaceFilesPane({ root, paths, selectedPath, onSelect, preview, onBa
 			else treeRef.current?.focus({ preventScroll: true });
 		}
 		wasPreviewRef.current = hasPreview;
-	}, [hasPreview]);
+	}, [hasPreview, split]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$1("flex h-full min-h-0 min-w-0 flex-col", className),
-		style,
-		children: [/* @__PURE__ */ jsx("div", {
-			ref: treeRef,
-			hidden: hasPreview,
-			tabIndex: -1,
-			role: "region",
-			"aria-label": "Workspace files",
-			className: cn$1("flex min-h-0 flex-1 flex-col", !plain && "p-2", hasPreview && "hidden"),
-			children: /* @__PURE__ */ jsxs("section", {
-				"aria-labelledby": headingId,
-				"data-workspace-files-surface": surface,
-				className: cn$1("flex min-h-0 flex-1 flex-col overflow-hidden", !plain && "rounded-xl border border-border bg-card text-card-foreground shadow-sm"),
-				children: [
-					plain ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("h2", {
-						id: headingId,
-						className: "sr-only",
-						children: label
-					}), headerActions && /* @__PURE__ */ jsx("div", {
-						className: "flex shrink-0 items-center justify-end gap-1 px-3 pt-3",
-						children: headerActions
-					})] }) : /* @__PURE__ */ jsxs("div", {
-						className: "flex shrink-0 items-center gap-2 px-3 pb-2 pt-3",
-						children: [/* @__PURE__ */ jsx("h2", {
+		ref: rootRef,
+		"data-workspace-files-layout": split ? "split" : "stack",
+		"data-expanded": expanded ? "" : void 0,
+		className: cn$1("flex h-full min-h-0 min-w-0", split ? "flex-row" : "flex-col", expanded && "fixed inset-0 z-50 h-auto bg-background p-2", className),
+		style: expanded ? void 0 : style,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: treeRef,
+				hidden: !split && hasPreview,
+				tabIndex: -1,
+				role: "region",
+				"aria-label": "Workspace files",
+				style: split ? { width: sidebar.width } : void 0,
+				className: cn$1("flex min-h-0 flex-col", split ? "shrink-0" : "flex-1", !plain && "p-2", !split && hasPreview && "hidden"),
+				children: /* @__PURE__ */ jsxs("section", {
+					"aria-labelledby": headingId,
+					"data-workspace-files-surface": surface,
+					className: cn$1("flex min-h-0 flex-1 flex-col overflow-hidden", !plain && "rounded-xl border border-border bg-card text-card-foreground shadow-sm"),
+					children: [
+						plain ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("h2", {
 							id: headingId,
-							className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground",
+							className: "sr-only",
 							children: label
 						}), headerActions && /* @__PURE__ */ jsx("div", {
-							className: "flex shrink-0 items-center gap-1",
+							className: "flex shrink-0 items-center justify-end gap-1 px-3 pt-3",
 							children: headerActions
-						})]
-					}),
-					search && !isEmpty && /* @__PURE__ */ jsx("div", {
-						className: cn$1("shrink-0 px-3 pb-2", plain && "pt-3"),
-						children: /* @__PURE__ */ jsx(Input, {
-							type: "search",
-							size: "sm",
-							value: query,
-							onChange: (event) => setQuery(event.target.value),
-							placeholder: `Search ${label.toLowerCase()}…`,
-							"aria-label": `Search ${label.toLowerCase()}`
+						})] }) : /* @__PURE__ */ jsxs("div", {
+							className: "flex shrink-0 items-center gap-2 px-3 pb-2 pt-3",
+							children: [/* @__PURE__ */ jsx("h2", {
+								id: headingId,
+								className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground",
+								children: label
+							}), headerActions && /* @__PURE__ */ jsx("div", {
+								className: "flex shrink-0 items-center gap-1",
+								children: headerActions
+							})]
+						}),
+						search && !isEmpty && /* @__PURE__ */ jsx("div", {
+							className: cn$1("shrink-0 px-3 pb-2", plain && "pt-3"),
+							children: /* @__PURE__ */ jsx(Input, {
+								type: "search",
+								size: "sm",
+								value: query,
+								onChange: (event) => setQuery(event.target.value),
+								placeholder: `Search ${label.toLowerCase()}…`,
+								"aria-label": `Search ${label.toLowerCase()}`
+							})
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: cn$1("min-h-0 flex-1 overflow-y-auto px-1.5 py-1.5", (!plain || search && !isEmpty) && "border-t border-border"),
+							children: isEmpty ? emptyState !== void 0 ? emptyState : /* @__PURE__ */ jsx(EmptyState, {
+								icon: /* @__PURE__ */ jsx(FolderOpen, { className: "h-6 w-6" }),
+								title: "No files yet"
+							}) : visible.length === 0 ? /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col items-center gap-3 p-6 text-center",
+								children: [/* @__PURE__ */ jsxs("p", {
+									className: "max-w-xs break-words text-xs text-muted-foreground",
+									children: [
+										"No files match “",
+										query.trim(),
+										"”."
+									]
+								}), /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "outline",
+									size: "sm",
+									onClick: () => setQuery(""),
+									children: "Clear search"
+								})]
+							}) : /* @__PURE__ */ jsx(VaultTree, {
+								root: treeRoot,
+								selectedPath: normalizedSelection,
+								onSelect: (path) => {
+									if (treeRef.current) returnFocusRef.current = activeElementWithin(treeRef.current);
+									openedByReaderRef.current = true;
+									onSelect?.(path, index.get(path));
+								},
+								onFolderSelect: (path) => onSelect?.(`${path}/`, index.get(path)),
+								storageKey: expansionKey,
+								expandAll: query.trim().length > 0,
+								label
+							})
 						})
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: cn$1("min-h-0 flex-1 overflow-y-auto px-1.5 py-1.5", (!plain || search && !isEmpty) && "border-t border-border"),
-						children: isEmpty ? emptyState !== void 0 ? emptyState : /* @__PURE__ */ jsx(EmptyState, {
-							icon: /* @__PURE__ */ jsx(FolderOpen, { className: "h-6 w-6" }),
-							title: "No files yet"
-						}) : visible.length === 0 ? /* @__PURE__ */ jsxs("div", {
-							className: "flex flex-col items-center gap-3 p-6 text-center",
-							children: [/* @__PURE__ */ jsxs("p", {
-								className: "max-w-xs break-words text-xs text-muted-foreground",
-								children: [
-									"No files match “",
-									query.trim(),
-									"”."
-								]
-							}), /* @__PURE__ */ jsx(Button, {
+					]
+				})
+			}),
+			split && /* @__PURE__ */ jsx(SidebarResizer, {
+				sidebar,
+				label
+			}),
+			(split || preview) && /* @__PURE__ */ jsx(FilesViewer, {
+				preview,
+				split,
+				tabs: split && tabs,
+				empty: isEmpty,
+				backRef,
+				onBack,
+				onOpen: (path) => onSelect?.(path, index.get(path)),
+				expand: expandable ? {
+					expanded,
+					toggle: () => setExpanded((value) => !value)
+				} : void 0
+			})
+		]
+	});
+}
+const baseName = (path) => path.replace(/\/+$/, "").split("/").pop() || path;
+/** The editor side of the pane: open-file tabs, a File | Diff toggle, the full-screen control, and the open file. */
+function FilesViewer({ preview, split, tabs, empty, backRef, onBack, onOpen, expand }) {
+	const path = preview?.path;
+	const [open, setOpen] = useState(() => path ? [path] : []);
+	useEffect(() => {
+		if (path) setOpen((paths) => paths.includes(path) ? paths : [...paths, path]);
+	}, [path]);
+	const [mode, setMode] = useState("file");
+	useEffect(() => setMode("file"), [path]);
+	const close = (target) => {
+		const at = open.indexOf(target);
+		const rest = open.filter((entry) => entry !== target);
+		setOpen(rest);
+		if (target !== path) return;
+		const neighbour = rest[Math.min(at, rest.length - 1)];
+		if (neighbour) onOpen(neighbour);
+		else onBack?.();
+	};
+	const compare = preview?.compare;
+	const ExpandIcon = expand?.expanded ? Minimize2 : Maximize2;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 min-w-0 flex-1 flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "sticky top-0 z-10 flex min-h-10 shrink-0 items-center gap-2 border-b border-border bg-background px-2",
+			children: [
+				onBack && !split && preview && /* @__PURE__ */ jsxs(Button, {
+					ref: backRef,
+					type: "button",
+					variant: "bare",
+					onClick: onBack,
+					className: "inline-flex shrink-0 items-center gap-1 rounded-md px-1 py-1 text-sm text-muted-foreground hover:text-foreground",
+					children: [/* @__PURE__ */ jsx(ArrowLeft, {
+						"aria-hidden": "true",
+						className: "h-3.5 w-3.5"
+					}), "Back to files"]
+				}),
+				tabs && open.length > 0 ? /* @__PURE__ */ jsx("div", {
+					role: "tablist",
+					"aria-label": "Open files",
+					className: "flex min-w-0 flex-1 items-end self-stretch overflow-x-auto",
+					children: open.map((entry) => {
+						const selected = entry === path;
+						return /* @__PURE__ */ jsxs("div", {
+							title: entry,
+							className: cn$1("group flex h-full shrink-0 items-center border-b-2 text-sm", selected ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"),
+							children: [/* @__PURE__ */ jsx("button", {
 								type: "button",
-								variant: "outline",
-								size: "sm",
-								onClick: () => setQuery(""),
-								children: "Clear search"
+								role: "tab",
+								"aria-selected": selected,
+								onClick: () => onOpen(entry),
+								className: "max-w-48 truncate py-2 pl-3 pr-1 outline-none focus-visible:underline",
+								children: baseName(entry)
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": `Close ${baseName(entry)}`,
+								onClick: () => close(entry),
+								className: cn$1("mr-1 rounded p-1 hover:bg-muted", !selected && "opacity-0 group-hover:opacity-100 focus-visible:opacity-100"),
+								children: /* @__PURE__ */ jsx(X, {
+									"aria-hidden": true,
+									className: "h-3 w-3"
+								})
 							})]
-						}) : /* @__PURE__ */ jsx(VaultTree, {
-							root: treeRoot,
-							selectedPath: normalizedSelection,
-							onSelect: (path) => {
-								if (treeRef.current) returnFocusRef.current = activeElementWithin(treeRef.current);
-								openedByReaderRef.current = true;
-								onSelect?.(path, index.get(path));
-							},
-							onFolderSelect: (path) => onSelect?.(`${path}/`, index.get(path)),
-							storageKey: expansionKey,
-							expandAll: query.trim().length > 0,
-							label
-						})
+						}, entry);
 					})
-				]
-			})
-		}), preview && /* @__PURE__ */ jsxs("div", {
-			className: "flex min-h-0 flex-1 flex-col",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex min-h-10 shrink-0 flex-wrap items-center gap-2 border-b border-border px-3 py-2",
-				children: [
-					onBack && /* @__PURE__ */ jsxs(Button, {
-						ref: backRef,
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate px-1 text-sm text-muted-foreground",
+					title: path,
+					children: path
+				}),
+				compare && /* @__PURE__ */ jsx("div", {
+					role: "group",
+					"aria-label": "View",
+					className: "flex shrink-0 rounded-md border border-border p-0.5 text-xs",
+					children: ["file", "diff"].map((value) => /* @__PURE__ */ jsx("button", {
 						type: "button",
-						variant: "bare",
-						onClick: onBack,
-						className: "inline-flex shrink-0 items-center gap-1 rounded-md px-1 py-1 text-sm text-muted-foreground hover:text-foreground",
-						children: [/* @__PURE__ */ jsx(ArrowLeft, {
-							"aria-hidden": "true",
-							className: "h-3.5 w-3.5"
-						}), "Back to files"]
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "min-w-0 flex-1 truncate text-sm text-muted-foreground",
-						title: preview.path,
-						children: preview.path
-					}),
-					preview.actions && /* @__PURE__ */ jsx("div", {
-						className: "flex shrink-0 items-center gap-2",
-						children: preview.actions
+						"aria-pressed": mode === value,
+						onClick: () => setMode(value),
+						className: cn$1("rounded px-2 py-1", mode === value ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"),
+						children: value === "file" ? "File" : `Diff vs ${compare.label}`
+					}, value))
+				}),
+				preview?.actions && /* @__PURE__ */ jsx("div", {
+					className: "flex shrink-0 items-center gap-2",
+					children: preview.actions
+				}),
+				expand && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "bare",
+					onClick: expand.toggle,
+					"aria-pressed": expand.expanded,
+					"aria-label": expand.expanded ? "Exit full screen" : "Full screen",
+					title: expand.expanded ? "Exit full screen (Esc)" : "Full screen",
+					className: "shrink-0 rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground",
+					children: /* @__PURE__ */ jsx(ExpandIcon, {
+						"aria-hidden": true,
+						className: "h-4 w-4"
 					})
-				]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "min-h-0 flex-1 overflow-auto",
-				children: preview.content
-			})]
+				})
+			]
+		}), preview ? /* @__PURE__ */ jsx("div", {
+			"data-primary-content": "",
+			className: "flex min-h-0 flex-1 flex-col overflow-auto [&>*]:min-h-full",
+			children: mode === "diff" && compare ? compare.content : preview.content
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-0 min-w-0 flex-1 items-center justify-center p-6 text-sm text-muted-foreground",
+			children: empty ? null : "Select a file to open it here."
 		})]
 	});
 }

package/dist/workspace.d.ts

@@ -1,2 +1,2 @@
-import { $ as StatusBar, A as createShellShouldRevalidate, B as SessionSidebarVariant, C as SandboxWorkbenchLayoutOptions, D as SandboxWorkbenchSessionProps, E as SandboxWorkbenchProps, F as SessionSidebarFilter, G as dispatchSessionCreated, H as SessionCreatedDetail, I as SessionSidebarGroupBy, J as RuntimePaneProps, K as useOptimisticSessionItems, L as SessionSidebarItem, M as formatRelativeAge, N as SessionSidebar, O as ShellShouldRevalidateArgs, P as SessionSidebarBadge, Q as ContextBadge, R as SessionSidebarLink, S as SandboxWorkbenchFileArtifact, T as SandboxWorkbenchOpenUIArtifact, U as SessionOptimisticController, V as SESSION_CREATED_EVENT, W as UseOptimisticSessionItemsOptions, X as TerminalPanel, Y as TerminalLine, Z as TerminalProps, _ as TaskBoardItem, _t as WorkspaceSurfaceTitle, a as WorkspaceFilesPane, at as DirectoryPaneProps, b as SandboxWorkbenchArtifact, bt as WorkspaceLayoutProps, c as ApprovalConfidenceStat, ct as ShellHeader, d as ApprovalQueueProps, dt as WorkspacePaneHeaderProps, et as StatusBarProps, f as CalendarEvent, ft as WorkspaceSurface, g as TaskBoardColumn, gt as WorkspaceSurfaceProps, h as TaskBoard, ht as WorkspaceSurfaceHeadingLevel, i as WorkspaceArtifactViewProps, it as DirectoryPane, j as shellShouldRevalidate, k as ShellShouldRevalidateOptions, l as ApprovalItem, lt as ShellHeaderProps, m as CalendarViewProps, mt as WorkspaceSurfaceFrameProps, n as ArtifactPaneProps, nt as StatusBanner, o as WorkspaceFilesPaneProps, ot as SHELL_HEADER_HEIGHT, p as CalendarView, pt as WorkspaceSurfaceFrame, q as RuntimePane, r as WorkspaceArtifactView, rt as StatusBannerProps, s as WorkspaceFilesPreview, st as SHELL_INSET_GUTTER, t as ArtifactPane, tt as BannerType, u as ApprovalQueue, ut as WorkspacePaneHeader, v as TaskBoardProps, vt as WorkspaceSurfaceTitleProps, w as SandboxWorkbenchMarkdownArtifact, x as SandboxWorkbenchCustomArtifact, y as SandboxWorkbench, yt as WorkspaceLayout, z as SessionSidebarProps } from "./index-B1oEiBks.js";
+import { $ as StatusBar, A as createShellShouldRevalidate, B as SessionSidebarVariant, C as SandboxWorkbenchLayoutOptions, D as SandboxWorkbenchSessionProps, E as SandboxWorkbenchProps, F as SessionSidebarFilter, G as dispatchSessionCreated, H as SessionCreatedDetail, I as SessionSidebarGroupBy, J as RuntimePaneProps, K as useOptimisticSessionItems, L as SessionSidebarItem, M as formatRelativeAge, N as SessionSidebar, O as ShellShouldRevalidateArgs, P as SessionSidebarBadge, Q as ContextBadge, R as SessionSidebarLink, S as SandboxWorkbenchFileArtifact, T as SandboxWorkbenchOpenUIArtifact, U as SessionOptimisticController, V as SESSION_CREATED_EVENT, W as UseOptimisticSessionItemsOptions, X as TerminalPanel, Y as TerminalLine, Z as TerminalProps, _ as TaskBoardItem, _t as WorkspaceSurfaceTitle, a as WorkspaceFilesPane, at as DirectoryPaneProps, b as SandboxWorkbenchArtifact, bt as WorkspaceLayoutProps, c as ApprovalConfidenceStat, ct as ShellHeader, d as ApprovalQueueProps, dt as WorkspacePaneHeaderProps, et as StatusBarProps, f as CalendarEvent, ft as WorkspaceSurface, g as TaskBoardColumn, gt as WorkspaceSurfaceProps, h as TaskBoard, ht as WorkspaceSurfaceHeadingLevel, i as WorkspaceArtifactViewProps, it as DirectoryPane, j as shellShouldRevalidate, k as ShellShouldRevalidateOptions, l as ApprovalItem, lt as ShellHeaderProps, m as CalendarViewProps, mt as WorkspaceSurfaceFrameProps, n as ArtifactPaneProps, nt as StatusBanner, o as WorkspaceFilesPaneProps, ot as SHELL_HEADER_HEIGHT, p as CalendarView, pt as WorkspaceSurfaceFrame, q as RuntimePane, r as WorkspaceArtifactView, rt as StatusBannerProps, s as WorkspaceFilesPreview, st as SHELL_INSET_GUTTER, t as ArtifactPane, tt as BannerType, u as ApprovalQueue, ut as WorkspacePaneHeader, v as TaskBoardProps, vt as WorkspaceSurfaceTitleProps, w as SandboxWorkbenchMarkdownArtifact, x as SandboxWorkbenchCustomArtifact, y as SandboxWorkbench, yt as WorkspaceLayout, z as SessionSidebarProps } from "./index-F42BOxUM.js";
 export { type ApprovalConfidenceStat, type ApprovalItem, ApprovalQueue, type ApprovalQueueProps, ArtifactPane, type ArtifactPaneProps, type BannerType, type CalendarEvent, CalendarView, type CalendarViewProps, type ContextBadge, DirectoryPane, type DirectoryPaneProps, RuntimePane, type RuntimePaneProps, SESSION_CREATED_EVENT, SHELL_HEADER_HEIGHT, SHELL_INSET_GUTTER, SandboxWorkbench, type SandboxWorkbenchArtifact, type SandboxWorkbenchCustomArtifact, type SandboxWorkbenchFileArtifact, type SandboxWorkbenchLayoutOptions, type SandboxWorkbenchMarkdownArtifact, type SandboxWorkbenchOpenUIArtifact, type SandboxWorkbenchProps, type SandboxWorkbenchSessionProps, type SessionCreatedDetail, type SessionOptimisticController, SessionSidebar, type SessionSidebarBadge, type SessionSidebarFilter, type SessionSidebarGroupBy, type SessionSidebarItem, type SessionSidebarLink, type SessionSidebarProps, type SessionSidebarVariant, ShellHeader, type ShellHeaderProps, type ShellShouldRevalidateArgs, type ShellShouldRevalidateOptions, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, TaskBoard, type TaskBoardColumn, type TaskBoardItem, type TaskBoardProps, type TerminalLine, TerminalPanel, type TerminalProps, type UseOptimisticSessionItemsOptions, WorkspaceArtifactView, type WorkspaceArtifactViewProps, WorkspaceFilesPane, type WorkspaceFilesPaneProps, type WorkspaceFilesPreview, WorkspaceLayout, type WorkspaceLayoutProps, WorkspacePaneHeader, type WorkspacePaneHeaderProps, WorkspaceSurface, WorkspaceSurfaceFrame, type WorkspaceSurfaceFrameProps, type WorkspaceSurfaceHeadingLevel, type WorkspaceSurfaceProps, WorkspaceSurfaceTitle, type WorkspaceSurfaceTitleProps, createShellShouldRevalidate, dispatchSessionCreated, formatRelativeAge, shellShouldRevalidate, useOptimisticSessionItems };

package/dist/workspace.js

@@ -1,3 +1,3 @@
 import { i as WorkspacePaneHeader, n as SHELL_INSET_GUTTER, r as ShellHeader, t as SHELL_HEADER_HEIGHT } from "./shell-header-CwqDzC4I.js";
-import { C as WorkspaceSurfaceTitle, S as WorkspaceSurfaceFrame, _ as StatusBar, a as TaskBoard, b as WorkspaceLayout, c as createShellShouldRevalidate, d as SESSION_CREATED_EVENT, f as dispatchSessionCreated, g as TerminalPanel, h as RuntimePane, i as CalendarView, l as shellShouldRevalidate, m as formatRelativeAge, n as WorkspaceFilesPane, o as SandboxWorkbench, p as useOptimisticSessionItems, r as ApprovalQueue, s as WorkspaceArtifactView, t as ArtifactPane, u as SessionSidebar, v as StatusBanner, x as WorkspaceSurface, y as DirectoryPane } from "./workspace-Cpgyw5N7.js";
+import { C as WorkspaceSurfaceTitle, S as WorkspaceSurfaceFrame, _ as StatusBar, a as TaskBoard, b as WorkspaceLayout, c as createShellShouldRevalidate, d as SESSION_CREATED_EVENT, f as dispatchSessionCreated, g as TerminalPanel, h as RuntimePane, i as CalendarView, l as shellShouldRevalidate, m as formatRelativeAge, n as WorkspaceFilesPane, o as SandboxWorkbench, p as useOptimisticSessionItems, r as ApprovalQueue, s as WorkspaceArtifactView, t as ArtifactPane, u as SessionSidebar, v as StatusBanner, x as WorkspaceSurface, y as DirectoryPane } from "./workspace-DRhi6S3o.js";
 export { ApprovalQueue, ArtifactPane, CalendarView, DirectoryPane, RuntimePane, SESSION_CREATED_EVENT, SHELL_HEADER_HEIGHT, SHELL_INSET_GUTTER, SandboxWorkbench, SessionSidebar, ShellHeader, StatusBanner, StatusBar, TaskBoard, TerminalPanel, WorkspaceArtifactView, WorkspaceFilesPane, WorkspaceLayout, WorkspacePaneHeader, WorkspaceSurface, WorkspaceSurfaceFrame, WorkspaceSurfaceTitle, createShellShouldRevalidate, dispatchSessionCreated, formatRelativeAge, shellShouldRevalidate, useOptimisticSessionItems };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.137.2",
+  "version": "0.138.0",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
@@ -47,6 +47,10 @@
       "import": "./dist/workbench/embedded-app.js",
       "types": "./dist/workbench/embedded-app.d.ts"
     },
+    "./workbench/diff": {
+      "import": "./dist/workbench/diff.js",
+      "types": "./dist/workbench/diff.d.ts"
+    },
     "./openui": {
       "import": "./dist/openui.js",
       "types": "./dist/openui.d.ts"
@@ -134,6 +138,7 @@
     "@nanostores/react": ">=0.8.4 <2.0.0",
     "@tangle-network/agent-interface": "^1.0.0 || ^2.0.0 || ^3.0.0 || ^5.2.0",
     "@tangle-network/brand": "^1.26.2",
+    "@tangle-network/charts": "^0.20.3",
     "@tangle-network/ui": "^11.42.0",
     "@tanstack/react-query": "^5.0.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
@@ -153,6 +158,9 @@
     "yjs": "^13.6.0"
   },
   "peerDependenciesMeta": {
+    "@tangle-network/charts": {
+      "optional": true
+    },
     "@hocuspocus/provider": {
       "optional": true
     },
@@ -229,6 +237,7 @@
     "@tailwindcss/postcss": "^4.3.3",
     "@tangle-network/agent-interface": "5.7.1",
     "@tangle-network/brand": "1.26.2",
+    "@tangle-network/charts": "^0.20.3",
     "@tangle-network/ui": "11.42.0",
     "@tanstack/react-query": "^5.104.5",
     "@testing-library/dom": "^10.4.2",
@@ -256,7 +265,6 @@
     "postcss": "^8.5.31",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
-    "react-syntax-highlighter": "^16.1.2",
     "storybook": "^10.6.3",
     "tailwindcss": "^4.3.3",
     "tsdown": "0.23.1",