@tangle-network/sandbox-ui 0.115.7 → 0.116.1

package/dist/{workspace-DoEZpkfF.js → workspace-Pq-koOTW.js}

@@ -1,11 +1,12 @@
 import { t as cn$1 } from "./utils-DzWbktWG.js";
-import { t as WorkspacePaneHeader } from "./workspace-pane-header-C5e7sPaS.js";
+import { t as WorkspacePaneHeader } from "./workspace-pane-header-Bg1cCcHX.js";
 import { t as MOTION_CONTROL } from "./motion-DkyBRJb9.js";
-import { ArtifactPane, ArtifactPane as ArtifactPane$1, Badge, EmptyState, Input } from "@tangle-network/ui/primitives";
+import { ArtifactPane, ArtifactPane as ArtifactPane$1, EmptyState, Input } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { focusField, focusRing, focusRingInset } from "@tangle-network/ui/utils";
 import { Markdown } from "@tangle-network/ui/markdown";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Activity, AlertCircle, AlertTriangle, ArrowLeft, Binary, Bot, Boxes, CheckCircle, ChevronDown, ChevronRight, ChevronUp, FileCode2, FileText, FolderTree, LayoutPanelTop, Loader2, LoaderCircle, MessageSquareText, PanelBottomClose, PanelBottomOpen, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Plus, RefreshCw, Search, Settings, Shield, ShieldCheck, Sparkles, Terminal, TerminalSquare, Upload, Wifi, X, XCircle, Zap } from "lucide-react";
 import { FileArtifactPane, FileTree, filterFileTree } from "@tangle-network/ui/files";
 import { useActiveSessions, useNavbarSessions, useProjectActivity, useTotalRunningSessions } from "@tangle-network/ui/stores";
@@ -88,8 +89,14 @@ function ResizeHandle({ label, onDragStart, onStep, className }) {
 		"aria-orientation": "vertical",
 		onPointerDown: handlePointerDown,
 		onKeyDown: handleKeyDown,
-		className: cn$1("relative hidden w-3 shrink-0 cursor-col-resize lg:flex", "items-stretch justify-center bg-transparent touch-none", focusRing, className),
-		children: [/* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-[var(--md3-outline-variant)] transition-colors" }), /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-1/2 w-[3px] -translate-x-1/2 rounded-full bg-transparent hover:bg-primary/30 focus-visible:bg-primary/40" })]
+		className: cn$1("group relative z-10 hidden w-px shrink-0 cursor-col-resize overflow-visible bg-transparent p-0 touch-none lg:flex", focusRing, className),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "absolute inset-y-0 left-1/2 z-10 w-[9px] -translate-x-1/2 cursor-col-resize bg-transparent"
+		}), /* @__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/20 group-focus-visible:bg-primary/30"
+		})]
 	});
 }
 function HorizontalResizeHandle({ label, onDragStart, onStep, className }) {
@@ -114,46 +121,65 @@ function HorizontalResizeHandle({ label, onDragStart, onStep, className }) {
 		"aria-orientation": "horizontal",
 		onPointerDown: handlePointerDown,
 		onKeyDown: handleKeyDown,
-		className: cn$1("relative hidden h-3 shrink-0 cursor-row-resize lg:flex", "items-center justify-center bg-transparent touch-none w-full", focusRing, className),
-		children: [/* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-[var(--md3-outline-variant)] transition-colors" }), /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-1/2 h-[3px] -translate-y-1/2 rounded-full bg-transparent hover:bg-primary/30 focus-visible:bg-primary/40" })]
+		className: cn$1("group relative z-10 hidden h-px w-full shrink-0 cursor-row-resize overflow-visible bg-transparent p-0 touch-none lg:flex", focusRing, className),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "absolute inset-x-0 top-1/2 z-10 h-[9px] w-full -translate-y-1/2 cursor-row-resize bg-transparent"
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-border transition-colors group-hover:bg-primary/20 group-focus-visible:bg-primary/30"
+		})]
 	});
 }
-function MobileDrawer({ side, title, header, onClose, children }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "fixed inset-0 z-50 flex lg:hidden",
-		"aria-modal": "true",
-		role: "dialog",
-		"aria-label": title,
-		children: [/* @__PURE__ */ jsx("button", {
-			type: "button",
-			"aria-label": `Close ${title}`,
-			onClick: onClose,
-			className: "absolute inset-0 bg-black/80 backdrop-blur-sm"
-		}), /* @__PURE__ */ jsxs("aside", {
-			className: cn$1("relative flex h-full w-[min(88vw,24rem)] flex-col border-[var(--md3-outline-variant)] bg-surface-container-highest shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]", side === "left" ? "border-r" : "ml-auto border-l"),
-			children: [/* @__PURE__ */ jsxs(WorkspacePaneHeader, {
-				className: "justify-between gap-3",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "min-w-0 flex-1",
-					children: header ?? /* @__PURE__ */ jsx("span", {
-						className: "text-[13px] font-medium text-foreground",
-						children: title
-					})
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					"aria-label": `Close ${title}`,
-					onClick: onClose,
-					className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
-					children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-				})]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "flex-1 overflow-auto",
-				children
-			})]
-		})]
+function MobileDrawer({ side, title, header, onClose, onReturnFocus, theme, density, children }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
+		open: true,
+		onOpenChange: (open) => {
+			if (!open) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm lg:hidden" }), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+			...theme ? {
+				"data-sandbox-ui": "true",
+				"data-sandbox-theme": theme
+			} : {},
+			"data-density": density,
+			onCloseAutoFocus: (event) => {
+				event.preventDefault();
+				requestAnimationFrame(onReturnFocus);
+			},
+			className: cn$1("fixed inset-y-0 z-50 flex h-full w-[min(88vw,24rem)] flex-col border-border bg-card shadow-[0_8px_30px_rgba(0,0,0,0.18)] lg:hidden", side === "left" ? "left-0 border-r" : "right-0 border-l"),
+			children: [
+				/* @__PURE__ */ jsx(DialogPrimitive.Title, {
+					className: "sr-only",
+					children: title
+				}),
+				/* @__PURE__ */ jsxs(WorkspacePaneHeader, {
+					className: "justify-between gap-3",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "min-w-0 flex-1",
+						children: header ?? /* @__PURE__ */ jsx("span", {
+							className: "text-[13px] font-medium text-foreground",
+							children: title
+						})
+					}), /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": `Close ${title}`,
+							className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
+							children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "min-h-0 flex-1 overflow-auto",
+					children
+				})
+			]
+		})] })
 	});
 }
-function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, bottomHeader, defaultLeftOpen = true, defaultRightOpen = false, defaultBottomOpen = false, defaultLeftWidth = 280, defaultRightWidth = 480, defaultBottomHeight = 224, minLeftWidth = 220, maxLeftWidth = 420, minRightWidth = 320, maxRightWidth = 720, minCenterWidth = 400, minBottomHeight = 100, maxBottomHeight = 500, persistenceKey, resizable = true, theme, density = "comfortable", leftLabel = "Left workspace panel", rightLabel = "Right workspace panel", bottomLabel = "Bottom runtime panel", leftOpen: leftOpenProp, onLeftOpenChange, rightOpen: rightOpenProp, onRightOpenChange, keyboardShortcuts = false, leftCollapsedControl, leftContentClassName, rightContentClassName, centerHeaderVisibility = "always", className }) {
+function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, bottomHeader, defaultLeftOpen = true, defaultRightOpen = false, defaultBottomOpen = false, defaultLeftWidth = 280, defaultRightWidth = 480, defaultBottomHeight = 224, minLeftWidth = 220, maxLeftWidth = 420, minRightWidth = 320, maxRightWidth = 720, minCenterWidth = 400, minBottomHeight = 100, maxBottomHeight = 500, persistenceKey, resizable = true, theme, density = "comfortable", leftLabel = "Left workspace panel", rightLabel = "Right workspace panel", bottomLabel = "Bottom runtime panel", leftOpen: leftOpenProp, onLeftOpenChange, rightOpen: rightOpenProp, onRightOpenChange, keyboardShortcuts = false, leftCollapsedControl, leftContentClassName, rightContentClassName, centerHeaderVisibility = "auto", className }) {
 	const desktop = useDesktopMediaQuery(DESKTOP_BREAKPOINT);
 	const dragStateRef = useRef(null);
 	const storedLayout = useMemo(() => persistenceKey ? readStoredLayout(persistenceKey) : null, [persistenceKey]);
@@ -177,7 +203,31 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 	const [leftWidth, setLeftWidth] = useState(clamp(storedLayout?.leftWidth ?? defaultLeftWidth, minLeftWidth, maxLeftWidth));
 	const [rightWidth, setRightWidth] = useState(clamp(storedLayout?.rightWidth ?? defaultRightWidth, minRightWidth, maxRightWidth));
 	const [bottomHeight, setBottomHeight] = useState(clamp(storedLayout?.bottomHeight ?? defaultBottomHeight, minBottomHeight, maxBottomHeight));
-	const showCenterHeader = centerHeaderVisibility === "auto" ? Boolean(centerHeader) || hasLeft && !leftOpen || hasRight && !rightOpen || Boolean(bottom) && !bottomOpen : Boolean(centerHeader || left || right || bottom);
+	const showCenterHeader = centerHeaderVisibility === "auto" ? Boolean(centerHeader) : Boolean(centerHeader || left || right || bottom);
+	const reopenClassName = showCenterHeader ? `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}` : `flex h-10 w-8 items-center justify-center rounded-md border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground ${focusRing}`;
+	const leftReopenControl = left && !leftOpen ? leftCollapsedControl ?? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Open left panel",
+		onClick: () => setLeftOpen(true),
+		className: reopenClassName,
+		children: /* @__PURE__ */ jsx(PanelLeftOpen, { className: "h-4 w-4" })
+	}) : null;
+	const bottomReopenControl = bottom && !bottomOpen ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Open bottom panel",
+		onClick: () => setBottomOpen(true),
+		className: reopenClassName,
+		children: /* @__PURE__ */ jsx(PanelBottomOpen, { className: "h-4 w-4" })
+	}) : null;
+	const rightReopenControl = right && !rightOpen ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Open right panel",
+		onClick: () => setRightOpen(true),
+		className: reopenClassName,
+		children: /* @__PURE__ */ jsx(PanelRightOpen, { className: "h-4 w-4" })
+	}) : null;
+	const leftReopenRef = useRef(null);
+	const rightReopenRef = useRef(null);
 	useEffect(() => {
 		if (!persistenceKey || typeof window === "undefined") return;
 		const payload = {
@@ -260,6 +310,14 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 		minRightWidth
 	]);
 	const shellRef = useRef(null);
+	const focusSideControl = (side) => {
+		const target = (side === "left" ? leftReopenRef : rightReopenRef).current?.querySelector("button, a[href], [tabindex]:not([tabindex=\"-1\"])");
+		if (target) {
+			target.focus();
+			return;
+		}
+		shellRef.current?.querySelector(`[aria-label="Collapse ${side} panel"]`)?.focus();
+	};
 	const [shellWidth, setShellWidth] = useState(null);
 	useEffect(() => {
 		const shell = shellRef.current;
@@ -335,7 +393,7 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 			"data-sandbox-theme": theme
 		} : {},
 		"data-density": density,
-		className: cn$1("flex h-screen flex-col overflow-hidden bg-[var(--bg-root)] text-foreground font-sans", className),
+		className: cn$1("flex h-screen flex-col overflow-hidden bg-background text-foreground font-sans", className),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				ref: shellRef,
@@ -344,7 +402,7 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 					desktop && left && leftOpen && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("aside", {
 						"aria-label": leftLabel,
 						style: leftStyle,
-						className: "hidden shrink-0 border-r border-[var(--md3-outline-variant)] bg-surface-container-low lg:flex lg:flex-col",
+						className: cn$1("hidden shrink-0 bg-card lg:flex lg:flex-col", !resizable && "border-r border-border"),
 						children: [leftHeader && /* @__PURE__ */ jsxs(WorkspacePaneHeader, {
 							className: "justify-between gap-2",
 							children: [/* @__PURE__ */ jsx("div", {
@@ -353,7 +411,10 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 							}), /* @__PURE__ */ jsx("button", {
 								type: "button",
 								"aria-label": "Collapse left panel",
-								onClick: () => setLeftOpen(false),
+								onClick: () => {
+									setLeftOpen(false);
+									requestAnimationFrame(() => focusSideControl("left"));
+								},
 								className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
 								children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
 							})]
@@ -372,36 +433,43 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 							showCenterHeader && /* @__PURE__ */ jsxs(WorkspacePaneHeader, {
 								className: "gap-2",
 								children: [
-									left && !leftOpen && (leftCollapsedControl ?? /* @__PURE__ */ jsx("button", {
-										type: "button",
-										"aria-label": "Open left panel",
-										onClick: () => setLeftOpen(true),
-										className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
-										children: /* @__PURE__ */ jsx(PanelLeftOpen, { className: "h-4 w-4" })
-									})),
+									leftReopenControl && /* @__PURE__ */ jsx("div", {
+										ref: leftReopenRef,
+										className: "shrink-0",
+										children: leftReopenControl
+									}),
 									/* @__PURE__ */ jsx("div", {
 										className: "min-w-0 flex-1",
 										children: centerHeader
 									}),
-									bottom && !bottomOpen && /* @__PURE__ */ jsx("button", {
-										type: "button",
-										"aria-label": "Open bottom panel",
-										onClick: () => setBottomOpen(true),
-										className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
-										children: /* @__PURE__ */ jsx(PanelBottomOpen, { className: "h-4 w-4" })
-									}),
-									right && !rightOpen && /* @__PURE__ */ jsx("button", {
-										type: "button",
-										"aria-label": "Open right panel",
-										onClick: () => setRightOpen(true),
-										className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
-										children: /* @__PURE__ */ jsx(PanelRightOpen, { className: "h-4 w-4" })
+									bottomReopenControl,
+									rightReopenControl && /* @__PURE__ */ jsx("div", {
+										ref: rightReopenRef,
+										className: "shrink-0",
+										children: rightReopenControl
 									})
 								]
 							}),
-							/* @__PURE__ */ jsx("div", {
-								className: "min-h-0 flex-1 overflow-auto",
-								children: center
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex min-h-0 flex-1",
+								children: [
+									!showCenterHeader && leftReopenControl && /* @__PURE__ */ jsx("div", {
+										ref: leftReopenRef,
+										className: "shrink-0 pt-2",
+										children: leftReopenControl
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "min-w-0 flex-1 overflow-auto",
+										children: center
+									}),
+									!showCenterHeader && (bottomReopenControl || rightReopenControl) && /* @__PURE__ */ jsxs("div", {
+										className: "flex shrink-0 flex-col gap-1 pt-2",
+										children: [bottomReopenControl, rightReopenControl && /* @__PURE__ */ jsx("div", {
+											ref: rightReopenRef,
+											children: rightReopenControl
+										})]
+									})
+								]
 							}),
 							bottom && bottomOpen && /* @__PURE__ */ jsxs(Fragment, { children: [resizable && /* @__PURE__ */ jsx(HorizontalResizeHandle, {
 								label: "Resize bottom panel",
@@ -409,12 +477,12 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 								onStep: stepBottomHeight
 							}), /* @__PURE__ */ jsx("section", {
 								"aria-label": bottomLabel,
-								className: "border-t border-[var(--md3-outline-variant)] bg-surface-container shrink-0",
+								className: cn$1("shrink-0 bg-card", !resizable && "border-t border-border"),
 								style: { height: `${bottomHeight}px` },
 								children: /* @__PURE__ */ jsxs("div", {
 									className: "flex h-full flex-col",
 									children: [/* @__PURE__ */ jsxs("div", {
-										className: "flex items-center justify-between gap-2 border-b border-[var(--md3-outline-variant)] px-3 py-1.5 bg-surface-container-high shrink-0",
+										className: "flex items-center justify-between gap-2 border-b border-border bg-background px-3 py-1.5 shrink-0",
 										children: [/* @__PURE__ */ jsx("div", {
 											className: "min-w-0 flex-1",
 											children: bottomHeader ?? /* @__PURE__ */ jsx("span", {
@@ -435,7 +503,7 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 								})
 							})] }),
 							centerFooter && /* @__PURE__ */ jsx("div", {
-								className: "shrink-0 border-t border-[var(--md3-outline-variant)] bg-surface-container-low",
+								className: "shrink-0 border-t border-border bg-card",
 								children: centerFooter
 							})
 						]
@@ -447,7 +515,7 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 					}), /* @__PURE__ */ jsxs("aside", {
 						"aria-label": rightLabel,
 						style: rightStyle,
-						className: "hidden shrink-0 border-l border-[var(--md3-outline-variant)] bg-surface-container-low lg:flex lg:flex-col",
+						className: cn$1("hidden shrink-0 bg-card lg:flex lg:flex-col", !resizable && "border-l border-border"),
 						children: [/* @__PURE__ */ jsxs(WorkspacePaneHeader, {
 							className: "justify-between gap-2",
 							children: [/* @__PURE__ */ jsx("div", {
@@ -459,7 +527,10 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 							}), /* @__PURE__ */ jsx("button", {
 								type: "button",
 								"aria-label": "Collapse right panel",
-								onClick: () => setRightOpen(false),
+								onClick: () => {
+									setRightOpen(false);
+									requestAnimationFrame(() => focusSideControl("right"));
+								},
 								className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
 								children: /* @__PURE__ */ jsx(PanelRightClose, { className: "h-4 w-4" })
 							})]
@@ -470,11 +541,14 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 					})] })
 				]
 			}),
-			!desktop && left && leftOpen && /* @__PURE__ */ jsx(MobileDrawer, {
+			!desktop && left && leftOpen && !(right && rightOpen) && /* @__PURE__ */ jsx(MobileDrawer, {
 				side: "left",
 				title: leftLabel,
 				header: leftHeader,
 				onClose: () => setLeftOpen(false),
+				onReturnFocus: () => focusSideControl("left"),
+				theme,
+				density,
 				children: left
 			}),
 			!desktop && right && rightOpen && /* @__PURE__ */ jsx(MobileDrawer, {
@@ -482,6 +556,9 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
 				title: rightLabel,
 				header: rightHeader,
 				onClose: () => setRightOpen(false),
+				onReturnFocus: () => focusSideControl("right"),
+				theme,
+				density,
 				children: right
 			})
 		]
@@ -586,7 +663,7 @@ function DirectoryPane({ root, selectedPath, onSelect, onRefresh, onUpload, titl
 //#endregion
 //#region src/workspace/status-banner.tsx
 /**
-* StatusBanner — full-width notification banner for connection/provisioning states.
+* StatusBanner — inline notice for connection and provisioning states.
 */
 const BANNER_STYLES = {
 	provisioning: {
@@ -602,9 +679,9 @@ const BANNER_STYLES = {
 		icon: Wifi
 	},
 	error: {
-		bg: "bg-[var(--code-error)]/5",
-		border: "border-[var(--code-error)]/20",
-		text: "text-[var(--code-error)]",
+		bg: "bg-[var(--surface-danger-bg)]",
+		border: "border-[var(--surface-danger-border)]",
+		text: "text-[var(--surface-danger-text)]",
 		icon: AlertCircle
 	},
 	warning: {
@@ -620,8 +697,8 @@ const BANNER_STYLES = {
 		icon: CheckCircle
 	},
 	info: {
-		bg: "bg-surface-container-high",
-		border: "border-[var(--md3-outline-variant)]",
+		bg: "bg-background",
+		border: "border-border",
 		text: "text-muted-foreground",
 		icon: AlertCircle
 	}
@@ -632,27 +709,27 @@ function StatusBanner({ type, message, detail, onDismiss, className }) {
 	const isAnimated = type === "provisioning" || type === "connecting";
 	const role = type === "error" ? "alert" : "status";
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$1("flex items-center gap-2.5 px-4 py-2 border-b font-sans text-sm", style.bg, style.border, className),
+		className: cn$1("flex items-start gap-3 rounded-lg border px-3 py-2.5 font-sans text-sm", style.bg, style.border, className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			role,
-			className: "flex min-w-0 items-center gap-2.5",
-			children: [
-				/* @__PURE__ */ jsx(Icon, {
-					className: cn$1("h-4 w-4 shrink-0", style.text, isAnimated && "animate-spin"),
-					...isAnimated ? { "data-motion": "essential" } : {}
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "font-medium text-foreground",
+			className: "flex min-w-0 flex-1 items-start gap-2.5",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				className: cn$1("mt-0.5 h-4 w-4 shrink-0", style.text, isAnimated && "animate-spin"),
+				...isAnimated ? { "data-motion": "essential" } : {}
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "break-words font-medium text-foreground",
 					children: message
-				}),
-				detail && /* @__PURE__ */ jsx("span", {
-					className: "font-mono text-xs text-muted-foreground tabular-nums",
+				}), detail && /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 break-words font-mono text-xs text-muted-foreground tabular-nums",
 					children: detail
-				})
-			]
+				})]
+			})]
 		}), onDismiss && /* @__PURE__ */ jsx("button", {
+			type: "button",
 			onClick: onDismiss,
-			className: "ml-auto font-sans text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+			className: `ml-auto mt-0.5 shrink-0 font-sans text-xs font-medium text-muted-foreground transition-colors hover:text-foreground ${focusRing}`,
 			children: "Dismiss"
 		})]
 	});
@@ -1541,12 +1618,12 @@ function ArtifactTabs({ artifacts, activeArtifactId, onSelect, onClose, tabIdPre
 	return /* @__PURE__ */ jsx("div", {
 		role: "tablist",
 		"aria-label": "Artifacts",
-		className: "flex items-center overflow-x-auto border-b border-[var(--md3-outline-variant)] bg-surface-container-high",
+		className: "flex items-center overflow-x-auto border-b border-border bg-background",
 		children: artifacts.map((artifact) => {
 			const Icon = artifact.icon ?? getArtifactTabIcon(artifact.kind);
 			const isActive = artifact.id === activeArtifactId;
 			return /* @__PURE__ */ jsxs("div", {
-				className: cn$1("group flex shrink-0 items-center border-r border-[var(--md3-outline-variant)] bg-surface-container relative", isActive ? "text-foreground after:absolute after:top-0 after:left-0 after:right-0 after:h-[2px] after:bg-primary" : "text-muted-foreground hover:bg-surface-container-high cursor-pointer"),
+				className: cn$1("group relative flex shrink-0 items-center border-r border-border bg-card", isActive ? "text-foreground after:absolute after:top-0 after:left-0 after:right-0 after:h-[2px] after:bg-primary" : "cursor-pointer text-muted-foreground hover:bg-muted"),
 				children: [/* @__PURE__ */ jsxs("button", {
 					type: "button",
 					ref: (element) => {
@@ -1602,7 +1679,7 @@ function ArtifactTabs({ artifacts, activeArtifactId, onSelect, onClose, tabIdPre
 function renderArtifact(artifact) {
 	switch (artifact.kind) {
 		case "file": return /* @__PURE__ */ jsx(FileArtifactPane, {
-			path: artifact.path,
+			path: artifact.path === artifact.filename ? void 0 : artifact.path,
 			filename: artifact.filename,
 			content: artifact.content,
 			blobUrl: artifact.blobUrl,
@@ -1612,10 +1689,11 @@ function renderArtifact(artifact) {
 			activeTabId: artifact.activeTabId,
 			onTabSelect: artifact.onTabSelect,
 			onTabClose: artifact.onTabClose,
-			eyebrow: artifact.eyebrow,
+			eyebrow: artifact.eyebrow ?? null,
 			meta: artifact.meta,
 			toolbar: artifact.toolbar,
-			footer: artifact.footer
+			footer: artifact.footer,
+			hideTitleBlock: typeof artifact.title === "string" && artifact.title === artifact.filename && artifact.path === artifact.filename && !artifact.eyebrow && !artifact.meta
 		});
 		case "markdown": return /* @__PURE__ */ jsx(ArtifactPane, {
 			eyebrow: artifact.eyebrow ?? "Document",
@@ -1693,7 +1771,7 @@ function renderRegion(sections, region) {
 * into a complete session surface: directory, agent timeline, artifacts, and
 * runtime in one reusable shell.
 */
-function SandboxWorkbench({ title = "Sandbox session", subtitle, status, centerHeader: centerHeaderProp, composer, rail, directory, session, artifacts: artifactsProp = [], activeArtifactId, onArtifactChange, onArtifactClose, runtime, layout, emptyArtifactState, className }) {
+function SandboxWorkbench({ title, subtitle, status, centerHeader: centerHeaderProp, composer, rail, directory, session, artifacts: artifactsProp = [], activeArtifactId, onArtifactChange, onArtifactClose, runtime, layout, emptyArtifactState, className }) {
 	const artifacts = useMemo(() => sortPinnedFirst(artifactsProp), [artifactsProp]);
 	const artifactTabsId = useId();
 	const artifactPanelId = `${artifactTabsId}-panel`;
@@ -1712,68 +1790,64 @@ function SandboxWorkbench({ title = "Sandbox session", subtitle, status, centerH
 		if (activeArtifactId === void 0) setUncontrolledArtifactId(artifactId);
 		onArtifactChange?.(artifactId);
 	};
-	const brandedHeader = /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 items-start justify-between gap-4 rounded-[var(--radius-xl)] border border-[var(--md3-outline-variant)] bg-surface-container px-4 py-3.5",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "min-w-0",
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "text-[10px] font-semibold uppercase tracking-[0.18em] text-primary",
-					children: "Tangle Sandbox"
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "truncate text-[17px] font-semibold tracking-[0.01em] text-foreground",
-					children: title
-				}),
-				subtitle && /* @__PURE__ */ jsx("div", {
-					className: "truncate text-sm text-muted-foreground",
-					children: subtitle
-				})
-			]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex shrink-0 flex-wrap items-center justify-end gap-2",
-			children: [status, artifacts.length > 0 && /* @__PURE__ */ jsxs(Badge, {
-				variant: "outline",
-				children: [artifacts.length, " artifacts"]
-			})]
-		})]
-	});
 	const quiet = centerHeaderProp === null;
-	const centerHeader = centerHeaderProp === void 0 ? brandedHeader : centerHeaderProp ?? void 0;
+	const centerHeader = centerHeaderProp ?? void 0;
 	const { composerControls, ...chatSession } = session;
 	const transcript = /* @__PURE__ */ jsxs("div", {
-		className: cn$1("flex h-full min-h-0 flex-col", quiet && "bg-surface"),
-		children: [
-			/* @__PURE__ */ jsx(ChatContainer, {
-				...chatSession,
-				className: "min-h-0 flex-1",
-				presentation: session.presentation ?? "timeline"
-			}),
-			composerControls && /* @__PURE__ */ jsx("div", {
-				className: "shrink-0 border-t border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2",
-				children: composerControls
-			}),
-			composer && /* @__PURE__ */ jsx("div", {
-				className: "shrink-0",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "mx-auto w-full max-w-3xl px-3 pb-3",
-					children: composer
-				})
-			})
-		]
+		className: cn$1("flex h-full min-h-0 flex-col", quiet && "bg-background"),
+		children: [/* @__PURE__ */ jsx(ChatContainer, {
+			...chatSession,
+			className: "min-h-0 flex-1",
+			presentation: session.presentation ?? "timeline"
+		}), (composerControls || composer) && /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto flex w-full max-w-3xl shrink-0 flex-col gap-2 px-3 py-3",
+			children: [composerControls, composer]
+		})]
 	});
-	const center = quiet ? transcript : /* @__PURE__ */ jsx(ArtifactPane, {
-		eyebrow: session.eyebrow ?? "Agent Session",
-		title: session.title ?? "Execution timeline",
-		subtitle: session.subtitle,
-		meta: session.meta,
-		headerActions: session.headerActions,
-		className: "h-full",
-		contentClassName: "bg-surface-container",
-		children: transcript
+	const paneSubtitle = subtitle ?? session.subtitle;
+	const center = quiet ? transcript : /* @__PURE__ */ jsxs("section", {
+		className: "flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground",
+		children: [/* @__PURE__ */ jsxs(WorkspacePaneHeader, {
+			className: "gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-center gap-2",
+					children: [session.eyebrow && /* @__PURE__ */ jsx("span", {
+						className: "max-w-[35%] shrink-0 truncate text-[10px] font-semibold uppercase tracking-wider text-muted-foreground",
+						children: session.eyebrow
+					}), /* @__PURE__ */ jsx("div", {
+						className: "min-w-0 flex-1 truncate text-[13px] font-medium text-foreground",
+						children: title ?? session.title ?? "Execution timeline"
+					})]
+				}), (paneSubtitle || session.meta || status) && /* @__PURE__ */ jsxs("div", {
+					className: "mt-0.5 flex min-w-0 items-center gap-2 overflow-hidden text-xs text-muted-foreground",
+					children: [
+						paneSubtitle && /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 truncate",
+							children: paneSubtitle
+						}),
+						session.meta && /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 truncate",
+							children: session.meta
+						}),
+						status && /* @__PURE__ */ jsx("span", {
+							className: "shrink-0",
+							children: status
+						})
+					]
+				})]
+			}), session.headerActions && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-1.5",
+				children: session.headerActions
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1 overflow-auto bg-background",
+			children: transcript
+		})]
 	});
 	const artifactPanel = artifacts.length > 0 || emptyArtifactState ? /* @__PURE__ */ jsxs("section", {
-		className: "flex h-full min-h-0 flex-col bg-surface-container",
+		className: "flex h-full min-h-0 flex-col bg-background",
 		children: [/* @__PURE__ */ jsx(ArtifactTabs, {
 			artifacts,
 			activeArtifactId: resolvedArtifactId,
@@ -1787,7 +1861,7 @@ function SandboxWorkbench({ title = "Sandbox session", subtitle, status, centerH
 			"aria-labelledby": activeArtifact ? `${artifactTabsId}-${activeArtifact.id}` : void 0,
 			"aria-label": activeArtifact ? void 0 : "Artifact content",
 			tabIndex: 0,
-			className: `min-h-0 flex-1 overflow-auto bg-surface-container ${focusRingInset}`,
+			className: `min-h-0 flex-1 overflow-auto bg-background ${focusRingInset}`,
 			children: activeArtifact ? renderArtifact(activeArtifact) : /* @__PURE__ */ jsx("div", {
 				className: "flex h-full items-center justify-center p-6",
 				children: emptyArtifactState ?? /* @__PURE__ */ jsx(EmptyState, {
@@ -1865,8 +1939,8 @@ function SandboxWorkbench({ title = "Sandbox session", subtitle, status, centerH
 		keyboardShortcuts: layout?.keyboardShortcuts,
 		leftCollapsedControl: layout?.leftCollapsedControl,
 		leftContentClassName: railOnly ? "py-0" : void 0,
-		centerHeaderVisibility: quiet ? "auto" : "always",
-		className: cn$1("p-3 lg:p-4", className)
+		centerHeaderVisibility: "auto",
+		className: cn$1("p-2", className)
 	});
 }
 function AgentWorkbench(props) {

package/dist/{workspace-pane-header-C5e7sPaS.js → workspace-pane-header-Bg1cCcHX.js}

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function WorkspacePaneHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex h-14 shrink-0 items-center border-b border-[var(--md3-outline-variant)] bg-surface-container-high px-3", className),
+		className: cn("flex h-14 shrink-0 items-center border-b border-border bg-card px-3", className),
 		...props
 	});
 }

package/dist/workspace.d.ts

@@ -1,2 +1,2 @@
-import { $ as TerminalProps, A as ShellShouldRevalidateArgs, B as SessionSidebarLink, C as SandboxWorkbenchLayoutOptions, D as SandboxWorkbenchSessionProps, E as SandboxWorkbenchProps, F as SessionSidebar, G as SessionOptimisticController, H as SessionSidebarVariant, I as SessionSidebarBadge, J as useOptimisticSessionItems, K as UseOptimisticSessionItemsOptions, L as SessionSidebarFilter, M as createShellShouldRevalidate, N as shellShouldRevalidate, O as SessionActivityMonitor, P as formatRelativeAge, Q as TerminalPanel, R as SessionSidebarGroupBy, S as SandboxWorkbenchFileArtifact, T as SandboxWorkbenchOpenUIArtifact, U as SESSION_CREATED_EVENT, V as SessionSidebarProps, W as SessionCreatedDetail, X as RuntimePaneProps, Y as RuntimePane, Z as TerminalLine, _ as FormAudit, a as ApprovalQueue, at as StatusBannerProps, b as SandboxWorkbenchArtifact, c as CalendarView, ct as WorkspacePaneHeader, d as TaskBoardColumn, dt as WorkspaceLayoutProps, et as ContextBadge, f as TaskBoardItem, g as AuditResultsProps, h as AuditResults, i as ApprovalItem, it as StatusBanner, j as ShellShouldRevalidateOptions, k as SessionActivityMonitorProps, l as CalendarViewProps, lt as WorkspacePaneHeaderProps, m as AuditCheck, n as ArtifactPaneProps, nt as StatusBarProps, o as ApprovalQueueProps, ot as DirectoryPane, p as TaskBoardProps, q as dispatchSessionCreated, r as ApprovalConfidenceStat, rt as BannerType, s as CalendarEvent, st as DirectoryPaneProps, t as ArtifactPane, tt as StatusBar, u as TaskBoard, ut as WorkspaceLayout, v as AgentWorkbench, w as SandboxWorkbenchMarkdownArtifact, x as SandboxWorkbenchCustomArtifact, y as SandboxWorkbench, z as SessionSidebarItem } from "./index-CKRaj1pM.js";
+import { $ as TerminalProps, A as ShellShouldRevalidateArgs, B as SessionSidebarLink, C as SandboxWorkbenchLayoutOptions, D as SandboxWorkbenchSessionProps, E as SandboxWorkbenchProps, F as SessionSidebar, G as SessionOptimisticController, H as SessionSidebarVariant, I as SessionSidebarBadge, J as useOptimisticSessionItems, K as UseOptimisticSessionItemsOptions, L as SessionSidebarFilter, M as createShellShouldRevalidate, N as shellShouldRevalidate, O as SessionActivityMonitor, P as formatRelativeAge, Q as TerminalPanel, R as SessionSidebarGroupBy, S as SandboxWorkbenchFileArtifact, T as SandboxWorkbenchOpenUIArtifact, U as SESSION_CREATED_EVENT, V as SessionSidebarProps, W as SessionCreatedDetail, X as RuntimePaneProps, Y as RuntimePane, Z as TerminalLine, _ as FormAudit, a as ApprovalQueue, at as StatusBannerProps, b as SandboxWorkbenchArtifact, c as CalendarView, ct as WorkspacePaneHeader, d as TaskBoardColumn, dt as WorkspaceLayoutProps, et as ContextBadge, f as TaskBoardItem, g as AuditResultsProps, h as AuditResults, i as ApprovalItem, it as StatusBanner, j as ShellShouldRevalidateOptions, k as SessionActivityMonitorProps, l as CalendarViewProps, lt as WorkspacePaneHeaderProps, m as AuditCheck, n as ArtifactPaneProps, nt as StatusBarProps, o as ApprovalQueueProps, ot as DirectoryPane, p as TaskBoardProps, q as dispatchSessionCreated, r as ApprovalConfidenceStat, rt as BannerType, s as CalendarEvent, st as DirectoryPaneProps, t as ArtifactPane, tt as StatusBar, u as TaskBoard, ut as WorkspaceLayout, v as AgentWorkbench, w as SandboxWorkbenchMarkdownArtifact, x as SandboxWorkbenchCustomArtifact, y as SandboxWorkbench, z as SessionSidebarItem } from "./index-iDiLnSoo.js";
 export { AgentWorkbench, type ApprovalConfidenceStat, type ApprovalItem, ApprovalQueue, type ApprovalQueueProps, ArtifactPane, type ArtifactPaneProps, type AuditCheck, AuditResults, type AuditResultsProps, type BannerType, type CalendarEvent, CalendarView, type CalendarViewProps, type ContextBadge, DirectoryPane, type DirectoryPaneProps, type FormAudit, RuntimePane, type RuntimePaneProps, SESSION_CREATED_EVENT, SandboxWorkbench, type SandboxWorkbenchArtifact, type SandboxWorkbenchCustomArtifact, type SandboxWorkbenchFileArtifact, type SandboxWorkbenchLayoutOptions, type SandboxWorkbenchMarkdownArtifact, type SandboxWorkbenchOpenUIArtifact, type SandboxWorkbenchProps, type SandboxWorkbenchSessionProps, SessionActivityMonitor, type SessionActivityMonitorProps, type SessionCreatedDetail, type SessionOptimisticController, SessionSidebar, type SessionSidebarBadge, type SessionSidebarFilter, type SessionSidebarGroupBy, type SessionSidebarItem, type SessionSidebarLink, type SessionSidebarProps, type SessionSidebarVariant, type ShellShouldRevalidateArgs, type ShellShouldRevalidateOptions, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, TaskBoard, type TaskBoardColumn, type TaskBoardItem, type TaskBoardProps, type TerminalLine, TerminalPanel, type TerminalProps, type UseOptimisticSessionItemsOptions, WorkspaceLayout, type WorkspaceLayoutProps, WorkspacePaneHeader, type WorkspacePaneHeaderProps, createShellShouldRevalidate, dispatchSessionCreated, formatRelativeAge, shellShouldRevalidate, useOptimisticSessionItems };