@tangle-network/sandbox-ui 0.137.1 → 0.138.0

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

@@ -1,20 +1,20 @@
-import { t as cn$1 } from "./utils-DzWbktWG.js";
-import { r as ShellHeader } from "./shell-header-CTh3oV_e.js";
-import { t as MOTION_CONTROL } from "./motion-D4njYpys.js";
-import { i as VaultTree, n as filterFileNodes, t as fileTreeFromPaths } from "./tree-data-DtoCNNBJ.js";
+import { t as cn$1 } from "./utils-BER_bdgE.js";
+import { r as ShellHeader } from "./shell-header-CwqDzC4I.js";
+import { t as MOTION_CONTROL } from "./motion-Bn7ESHrj.js";
+import { i as VaultTree, n as filterFileNodes, t as fileTreeFromPaths } from "./tree-data-YXtcK6Ld.js";
 import { ArtifactPane, ArtifactPane as ArtifactPane$1, Button, EmptyState, Input, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 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";
 import { ChatContainer } from "@tangle-network/ui/chat";
 import { OpenUIArtifactRenderer } from "@tangle-network/ui/openui";
-//#region src/workspace/workspace-surface.tsx
+// src/workspace/workspace-surface.tsx
 /**
 * The raised panel every workspace page sits in: an even gutter of recessed
 * backdrop on every side, then one rounded, bordered surface. `WorkspaceLayout`
@@ -75,8 +75,7 @@ function WorkspaceSurface({ title, headingLevel, actions, header, contentClassNa
 		})
 	});
 }
-//#endregion
-//#region src/workspace/workspace-layout.tsx
+// src/workspace/workspace-layout.tsx
 /**
 * WorkspaceLayout — reusable sandbox shell with desktop resizable panels and
 * mobile overlay drawers.
@@ -693,8 +692,7 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 		]
 	}) });
 }
-//#endregion
-//#region src/workspace/directory-pane.tsx
+// src/workspace/directory-pane.tsx
 function countNodes(node) {
 	if (node.type === "file") return {
 		files: 1,
@@ -789,8 +787,7 @@ function DirectoryPane({ root, selectedPath, onSelect, onRefresh, onUpload, titl
 		}) : null
 	});
 }
-//#endregion
-//#region src/workspace/status-banner.tsx
+// src/workspace/status-banner.tsx
 /**
 * StatusBanner — inline notice for connection and provisioning states.
 */
@@ -863,8 +860,7 @@ function StatusBanner({ type, message, detail, onDismiss, className }) {
 		})]
 	});
 }
-//#endregion
-//#region src/workspace/status-bar.tsx
+// src/workspace/status-bar.tsx
 /**
 * StatusBar — compact bottom bar: connection state, file/artifact context
 * badges, credits. The active model lives in the input box, not here.
@@ -929,8 +925,7 @@ function StatusBar({ credits, contextBadges = [], onRemoveBadge, status = "conne
 		]
 	});
 }
-//#endregion
-//#region src/workspace/terminal-panel.tsx
+// src/workspace/terminal-panel.tsx
 /**
 * Terminal — read-only terminal output panel.
 *
@@ -1017,8 +1012,7 @@ function TerminalPanel({ lines, title = "Terminal", isCollapsed = false, onToggl
 		})]
 	});
 }
-//#endregion
-//#region src/workspace/runtime-pane.tsx
+// src/workspace/runtime-pane.tsx
 /**
 * RuntimePane — shared operating surface for sandbox session state, terminal
 * output, audit results, and runtime metadata.
@@ -1093,8 +1087,7 @@ function RuntimePane({ title = "Runtime", subtitle = "Session state, execution o
 		]
 	});
 }
-//#endregion
-//#region src/lib/format-relative-age.ts
+// src/lib/format-relative-age.ts
 const MINUTE = 6e4;
 const HOUR = 60 * MINUTE;
 const DAY = 24 * HOUR;
@@ -1120,8 +1113,7 @@ function formatRelativeAge(date, now = Date.now()) {
 	if (elapsed < YEAR) return `${Math.floor(elapsed / MONTH)}mo`;
 	return `${Math.floor(elapsed / YEAR)}y`;
 }
-//#endregion
-//#region src/workspace/session-optimistic.ts
+// src/workspace/session-optimistic.ts
 /**
 * Optimistic session/thread list: reflect a just-created / renamed / deleted
 * item in the sidebar INSTANTLY, before the server loader round-trips.
@@ -1199,8 +1191,7 @@ function useOptimisticSessionItems(items, options = {}) {
 		}
 	};
 }
-//#endregion
-//#region src/workspace/session-sidebar.tsx
+// src/workspace/session-sidebar.tsx
 const NO_CONTROLLER = {
 	add: () => {},
 	update: () => {},
@@ -1602,8 +1593,7 @@ function SessionSidebar({ title, subtitle, projectId = null, items, currentItemI
 		]
 	});
 }
-//#endregion
-//#region src/workspace/shell-revalidation.ts
+// src/workspace/shell-revalidation.ts
 /**
 * Build a `shouldRevalidate` function for the shell route under `appPathPrefix`.
 * Use this when the app mounts under a non-default prefix; otherwise prefer the
@@ -1629,8 +1619,7 @@ function createShellShouldRevalidate(options = {}) {
 * For a non-`/app` prefix, use {@link createShellShouldRevalidate}.
 */
 const shellShouldRevalidate = createShellShouldRevalidate();
-//#endregion
-//#region src/workspace/workspace-artifact-view.tsx
+// src/workspace/workspace-artifact-view.tsx
 /** The shared technical renderer for workspace files and generated artifacts. */
 function WorkspaceArtifactView({ artifact, hideTitleBlock }) {
 	switch (artifact.kind) {
@@ -1695,8 +1684,7 @@ function WorkspaceArtifactView({ artifact, hideTitleBlock }) {
 		});
 	}
 }
-//#endregion
-//#region src/workspace/sandbox-workbench.tsx
+// src/workspace/sandbox-workbench.tsx
 function getArtifactTabIcon(kind) {
 	switch (kind) {
 		case "file": return FileCode2;
@@ -1985,8 +1973,7 @@ function SandboxWorkbench({ title, subtitle, status, centerHeader: centerHeaderP
 		className: cn$1("p-2", className)
 	});
 }
-//#endregion
-//#region src/workspace/task-board.tsx
+// src/workspace/task-board.tsx
 const INTERACTIVE_SELECTOR = "button, a, input, textarea, select, [role=\"button\"], [role=\"link\"]";
 function TaskBoard({ items, columns, className, onMoveItem, onClickItem, renderItemMeta, renderColumnAction, renderBadge, columnEmptyState, header, renderColumnBody, renderItemWrapper }) {
 	const grouped = useMemo(() => {
@@ -2071,8 +2058,7 @@ function TaskBoard({ items, columns, className, onMoveItem, onClickItem, renderI
 		})]
 	});
 }
-//#endregion
-//#region src/workspace/calendar-view.tsx
+// src/workspace/calendar-view.tsx
 function toDateKey(d) {
 	return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
 }
@@ -2305,8 +2291,7 @@ function CalendarView({ events, className, month: controlledMonth, year: control
 		})]
 	});
 }
-//#endregion
-//#region src/workspace/approval-queue.tsx
+// src/workspace/approval-queue.tsx
 /**
 * ApprovalQueue — review queue for agent-proposed actions.
 *
@@ -2514,8 +2499,79 @@ function ApprovalQueue({ items, className, onApprove, onReject, renderItemDetail
 		})
 	});
 }
-//#endregion
-//#region src/workspace/workspace-files-pane.tsx
+// 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) => {
@@ -2536,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("");
@@ -2564,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) {
@@ -2572,120 +2654,222 @@ 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."
 		})]
 	});
 }
-//#endregion
 export { WorkspaceSurfaceTitle as C, WorkspaceSurfaceFrame as S, StatusBar as _, TaskBoard as a, WorkspaceLayout as b, createShellShouldRevalidate as c, SESSION_CREATED_EVENT as d, dispatchSessionCreated as f, TerminalPanel as g, RuntimePane as h, CalendarView as i, shellShouldRevalidate as l, formatRelativeAge as m, WorkspaceFilesPane as n, SandboxWorkbench as o, useOptimisticSessionItems as p, ApprovalQueue as r, WorkspaceArtifactView as s, ArtifactPane$1 as t, SessionSidebar as u, StatusBanner as v, WorkspaceSurface as x, DirectoryPane as y };

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-C61CTrhx.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-CTh3oV_e.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-cjk0axyT.js";
+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-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 };