@tangle-network/sandbox-ui 0.113.6 → 0.114.0

package/dist/workspace-B6AtI6ld.js

@@ -0,0 +1,2510 @@
+import { t as cn$1 } from "./utils-DzWbktWG.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 { 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 { 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";
+import { ChatContainer } from "@tangle-network/ui/chat";
+import { OpenUIArtifactRenderer } from "@tangle-network/ui/openui";
+//#region src/workspace/workspace-pane-header.tsx
+/**
+* The shared 56px header row for top-level workspace panes and drawers.
+* Bottom runtime panels intentionally use their own compact header.
+*/
+function WorkspacePaneHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1("flex h-14 shrink-0 items-center border-b border-[var(--md3-outline-variant)] bg-surface-container-high px-3", className),
+		...props
+	});
+}
+//#endregion
+//#region src/workspace/workspace-layout.tsx
+/**
+* WorkspaceLayout — reusable sandbox shell with desktop resizable panels and
+* mobile overlay drawers.
+*
+* Left: navigation / files / context
+* Center: chat, timeline, or primary workspace
+* Right: artifacts / previews / inspectors
+* Bottom: optional runtime panel
+*/
+const DESKTOP_BREAKPOINT = "(min-width: 1024px)";
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+/**
+* True while a keystroke belongs to a text field. `isContentEditable` is
+* missing from jsdom, so the attribute is checked too — through `closest`,
+* because the target inside an editable region is usually a descendant.
+*/
+function isEditableTarget(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	if (target.isContentEditable) return true;
+	const tag = target.tagName;
+	if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+	const editable = target.closest("[contenteditable]");
+	return editable !== null && editable.getAttribute("contenteditable") !== "false";
+}
+function readStoredLayout(key) {
+	if (typeof window === "undefined") return null;
+	try {
+		const raw = window.localStorage.getItem(key);
+		if (!raw) return null;
+		const parsed = JSON.parse(raw);
+		return parsed && typeof parsed === "object" ? parsed : null;
+	} catch {
+		return null;
+	}
+}
+function useDesktopMediaQuery(query) {
+	const [matches, setMatches] = useState(() => {
+		if (typeof window === "undefined") return true;
+		return window.matchMedia(query).matches;
+	});
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const media = window.matchMedia(query);
+		const handleChange = (event) => {
+			setMatches(event.matches);
+		};
+		setMatches(media.matches);
+		media.addEventListener("change", handleChange);
+		return () => media.removeEventListener("change", handleChange);
+	}, [query]);
+	return matches;
+}
+function ResizeHandle({ label, onDragStart, onStep, className }) {
+	const handlePointerDown = (event) => {
+		event.preventDefault();
+		onDragStart(event.clientX);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			onStep(-24);
+		}
+		if (event.key === "ArrowRight") {
+			event.preventDefault();
+			onStep(24);
+		}
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-label": label,
+		role: "separator",
+		"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" })]
+	});
+}
+function HorizontalResizeHandle({ label, onDragStart, onStep, className }) {
+	const handlePointerDown = (event) => {
+		event.preventDefault();
+		onDragStart(event.clientY);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			onStep(24);
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			onStep(-24);
+		}
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-label": label,
+		role: "separator",
+		"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" })]
+	});
+}
+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 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 }) {
+	const desktop = useDesktopMediaQuery(DESKTOP_BREAKPOINT);
+	const dragStateRef = useRef(null);
+	const storedLayout = useMemo(() => persistenceKey ? readStoredLayout(persistenceKey) : null, [persistenceKey]);
+	const [uncontrolledLeftOpen, setUncontrolledLeftOpen] = useState(storedLayout?.leftOpen ?? defaultLeftOpen);
+	const [uncontrolledRightOpen, setUncontrolledRightOpen] = useState(storedLayout?.rightOpen ?? defaultRightOpen);
+	const leftControlled = leftOpenProp !== void 0;
+	const rightControlled = rightOpenProp !== void 0;
+	const leftOpen = leftControlled ? leftOpenProp : uncontrolledLeftOpen;
+	const rightOpen = rightControlled ? rightOpenProp : uncontrolledRightOpen;
+	const setLeftOpen = useCallback((open) => {
+		if (!leftControlled) setUncontrolledLeftOpen(open);
+		onLeftOpenChange?.(open);
+	}, [leftControlled, onLeftOpenChange]);
+	const setRightOpen = useCallback((open) => {
+		if (!rightControlled) setUncontrolledRightOpen(open);
+		onRightOpenChange?.(open);
+	}, [rightControlled, onRightOpenChange]);
+	const hasLeft = Boolean(left);
+	const hasRight = Boolean(right);
+	const [bottomOpen, setBottomOpen] = useState(storedLayout?.bottomOpen ?? defaultBottomOpen);
+	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);
+	useEffect(() => {
+		if (!persistenceKey || typeof window === "undefined") return;
+		const payload = {
+			leftOpen,
+			rightOpen,
+			bottomOpen,
+			leftWidth,
+			rightWidth,
+			bottomHeight
+		};
+		window.localStorage.setItem(persistenceKey, JSON.stringify(payload));
+	}, [
+		bottomHeight,
+		bottomOpen,
+		leftOpen,
+		leftWidth,
+		persistenceKey,
+		rightOpen,
+		rightWidth
+	]);
+	useEffect(() => {
+		if (!keyboardShortcuts || typeof window === "undefined") return;
+		const handleKeyDown = (event) => {
+			if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return;
+			if (isEditableTarget(event.target)) return;
+			const key = event.key.toLowerCase();
+			if (key === "b" && hasLeft) {
+				event.preventDefault();
+				setLeftOpen(!leftOpen);
+			} else if (key === "e" && hasRight) {
+				event.preventDefault();
+				setRightOpen(!rightOpen);
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [
+		hasLeft,
+		hasRight,
+		keyboardShortcuts,
+		leftOpen,
+		rightOpen,
+		setLeftOpen,
+		setRightOpen
+	]);
+	useEffect(() => {
+		if (!desktop) return;
+		const handlePointerMove = (event) => {
+			const dragState = dragStateRef.current;
+			if (!dragState) return;
+			if (dragState.side === "bottom") {
+				const delta = dragState.pointerStartY - event.clientY;
+				setBottomHeight(clamp(dragState.heightStart + delta, minBottomHeight, maxBottomHeight));
+			} else if (dragState.side === "left") {
+				const delta = event.clientX - dragState.pointerStartX;
+				setLeftWidth(clamp(dragState.widthStart + delta, minLeftWidth, maxLeftWidth));
+			} else {
+				const delta = dragState.pointerStartX - event.clientX;
+				setRightWidth(clamp(dragState.widthStart + delta, minRightWidth, maxRightWidth));
+			}
+		};
+		const handlePointerUp = () => {
+			dragStateRef.current = null;
+		};
+		window.addEventListener("pointermove", handlePointerMove);
+		window.addEventListener("pointerup", handlePointerUp);
+		window.addEventListener("pointercancel", handlePointerUp);
+		return () => {
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", handlePointerUp);
+			window.removeEventListener("pointercancel", handlePointerUp);
+		};
+	}, [
+		desktop,
+		maxBottomHeight,
+		maxLeftWidth,
+		maxRightWidth,
+		minBottomHeight,
+		minLeftWidth,
+		minRightWidth
+	]);
+	const shellRef = useRef(null);
+	const [shellWidth, setShellWidth] = useState(null);
+	useEffect(() => {
+		const shell = shellRef.current;
+		if (!shell || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver((entries) => {
+			const width = entries[0]?.contentRect.width;
+			if (typeof width === "number") setShellWidth(width);
+		});
+		observer.observe(shell);
+		return () => observer.disconnect();
+	}, []);
+	const { leftPx, rightPx } = useMemo(() => {
+		const leftShown = desktop && hasLeft && leftOpen;
+		const rightShown = desktop && hasRight && rightOpen;
+		let leftPx = leftWidth;
+		let rightPx = rightWidth;
+		if (shellWidth === null) return {
+			leftPx,
+			rightPx
+		};
+		const room = () => shellWidth - (leftShown ? leftPx : 0) - (rightShown ? rightPx : 0);
+		if (rightShown && room() < minCenterWidth) rightPx = Math.max(minRightWidth, rightPx - (minCenterWidth - room()));
+		if (leftShown && room() < minCenterWidth) leftPx = Math.max(minLeftWidth, leftPx - (minCenterWidth - room()));
+		return {
+			leftPx,
+			rightPx
+		};
+	}, [
+		desktop,
+		hasLeft,
+		hasRight,
+		leftOpen,
+		leftWidth,
+		minCenterWidth,
+		minLeftWidth,
+		minRightWidth,
+		rightOpen,
+		rightWidth,
+		shellWidth
+	]);
+	const leftStyle = useMemo(() => ({ width: `${leftPx}px` }), [leftPx]);
+	const rightStyle = useMemo(() => ({ width: `${rightPx}px` }), [rightPx]);
+	const startResize = (side, pointerStartX) => {
+		dragStateRef.current = {
+			side,
+			pointerStartX,
+			pointerStartY: 0,
+			widthStart: side === "left" ? leftWidth : rightWidth,
+			heightStart: 0
+		};
+	};
+	const startBottomResize = (pointerStartY) => {
+		dragStateRef.current = {
+			side: "bottom",
+			pointerStartX: 0,
+			pointerStartY,
+			widthStart: 0,
+			heightStart: bottomHeight
+		};
+	};
+	const stepLeftWidth = (delta) => {
+		setLeftWidth((current) => clamp(current + delta, minLeftWidth, maxLeftWidth));
+	};
+	const stepRightWidth = (delta) => {
+		setRightWidth((current) => clamp(current + delta, minRightWidth, maxRightWidth));
+	};
+	const stepBottomHeight = (delta) => {
+		setBottomHeight((current) => clamp(current + delta, minBottomHeight, maxBottomHeight));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...theme ? {
+			"data-sandbox-ui": "true",
+			"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),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: shellRef,
+				className: "flex min-h-0 flex-1",
+				children: [
+					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",
+						children: [leftHeader && /* @__PURE__ */ jsxs(WorkspacePaneHeader, {
+							className: "justify-between gap-2",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "min-w-0 flex-1",
+								children: leftHeader
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": "Collapse left panel",
+								onClick: () => setLeftOpen(false),
+								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" })
+							})]
+						}), /* @__PURE__ */ jsx("div", {
+							className: cn$1("min-h-0 flex-1 overflow-auto py-1", leftContentClassName),
+							children: left
+						})]
+					}), resizable && /* @__PURE__ */ jsx(ResizeHandle, {
+						label: "Resize left panel",
+						onDragStart: (clientX) => startResize("left", clientX),
+						onStep: stepLeftWidth
+					})] }),
+					/* @__PURE__ */ jsxs("main", {
+						className: "flex min-w-0 flex-1 flex-col",
+						children: [
+							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" })
+									})),
+									/* @__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" })
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "min-h-0 flex-1 overflow-auto",
+								children: center
+							}),
+							bottom && bottomOpen && /* @__PURE__ */ jsxs(Fragment, { children: [resizable && /* @__PURE__ */ jsx(HorizontalResizeHandle, {
+								label: "Resize bottom panel",
+								onDragStart: startBottomResize,
+								onStep: stepBottomHeight
+							}), /* @__PURE__ */ jsx("section", {
+								"aria-label": bottomLabel,
+								className: "border-t border-[var(--md3-outline-variant)] bg-surface-container shrink-0",
+								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",
+										children: [/* @__PURE__ */ jsx("div", {
+											className: "min-w-0 flex-1",
+											children: bottomHeader ?? /* @__PURE__ */ jsx("span", {
+												className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground",
+												children: "Runtime"
+											})
+										}), /* @__PURE__ */ jsx("button", {
+											type: "button",
+											"aria-label": "Collapse bottom panel",
+											onClick: () => setBottomOpen(false),
+											className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
+											children: /* @__PURE__ */ jsx(PanelBottomClose, { className: "h-4 w-4" })
+										})]
+									}), /* @__PURE__ */ jsx("div", {
+										className: "min-h-0 flex-1 overflow-auto",
+										children: bottom
+									})]
+								})
+							})] }),
+							centerFooter && /* @__PURE__ */ jsx("div", {
+								className: "shrink-0 border-t border-[var(--md3-outline-variant)] bg-surface-container-low",
+								children: centerFooter
+							})
+						]
+					}),
+					desktop && right && rightOpen && /* @__PURE__ */ jsxs(Fragment, { children: [resizable && /* @__PURE__ */ jsx(ResizeHandle, {
+						label: "Resize right panel",
+						onDragStart: (clientX) => startResize("right", clientX),
+						onStep: stepRightWidth
+					}), /* @__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",
+						children: [/* @__PURE__ */ jsxs(WorkspacePaneHeader, {
+							className: "justify-between gap-2",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "min-w-0 flex-1",
+								children: rightHeader ?? /* @__PURE__ */ jsx("span", {
+									className: "text-[13px] font-medium text-foreground",
+									children: "Artifacts"
+								})
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": "Collapse right panel",
+								onClick: () => setRightOpen(false),
+								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" })
+							})]
+						}), /* @__PURE__ */ jsx("div", {
+							className: cn$1("min-h-0 flex-1 overflow-auto", rightContentClassName),
+							children: right
+						})]
+					})] })
+				]
+			}),
+			!desktop && left && leftOpen && /* @__PURE__ */ jsx(MobileDrawer, {
+				side: "left",
+				title: leftLabel,
+				header: leftHeader,
+				onClose: () => setLeftOpen(false),
+				children: left
+			}),
+			!desktop && right && rightOpen && /* @__PURE__ */ jsx(MobileDrawer, {
+				side: "right",
+				title: rightLabel,
+				header: rightHeader,
+				onClose: () => setRightOpen(false),
+				children: right
+			})
+		]
+	});
+}
+//#endregion
+//#region src/workspace/directory-pane.tsx
+function countNodes(node) {
+	if (node.type === "file") return {
+		files: 1,
+		directories: 0
+	};
+	return (node.children ?? []).reduce((totals, child) => {
+		const counts = countNodes(child);
+		return {
+			files: totals.files + counts.files,
+			directories: totals.directories + counts.directories
+		};
+	}, {
+		files: 0,
+		directories: 1
+	});
+}
+function filterTree(node, query) {
+	if (!query) return node;
+	const normalized = query.trim().toLowerCase();
+	const matches = node.name.toLowerCase().includes(normalized) || node.path.toLowerCase().includes(normalized);
+	if (node.type === "file") return matches ? node : null;
+	const filteredChildren = (node.children ?? []).map((child) => filterTree(child, normalized)).filter((child) => child !== null);
+	if (matches || filteredChildren.length > 0) return {
+		...node,
+		children: filteredChildren
+	};
+	return null;
+}
+/**
+* DirectoryPane — searchable file-system navigation surface for sandbox
+* sessions.
+*/
+function DirectoryPane({ root, selectedPath, onSelect, onRefresh, onUpload, title = "Directory", subtitle, defaultExpanded = true, searchPlaceholder = "Search files and folders…", visibility, className }) {
+	const [query, setQuery] = useState("");
+	const visibleRoot = useMemo(() => filterFileTree(root, visibility), [root, visibility]);
+	const filteredRoot = useMemo(() => visibleRoot ? filterTree(visibleRoot, query) : null, [query, visibleRoot]);
+	const counts = useMemo(() => visibleRoot ? countNodes(visibleRoot) : {
+		files: 0,
+		directories: 0
+	}, [visibleRoot]);
+	return /* @__PURE__ */ jsx(ArtifactPane, {
+		eyebrow: "Workspace",
+		title,
+		subtitle: subtitle ?? root.path,
+		className,
+		toolbar: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "flex-1",
+					children: /* @__PURE__ */ jsx(Input, {
+						value: query,
+						onChange: (event) => setQuery(event.target.value),
+						placeholder: searchPlaceholder,
+						className: "h-7 text-xs rounded-[2px]"
+					})
+				}),
+				onRefresh && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Refresh directory",
+					onClick: onRefresh,
+					className: `rounded-[2px] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
+					children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" })
+				}),
+				onUpload && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Upload files",
+					onClick: onUpload,
+					className: `rounded-[2px] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
+					children: /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4" })
+				})
+			]
+		}),
+		footer: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between text-xs text-muted-foreground",
+			children: [/* @__PURE__ */ jsxs("span", { children: [counts.files, " files"] }), /* @__PURE__ */ jsxs("span", { children: [Math.max(counts.directories - 1, 0), " folders"] })]
+		}),
+		emptyState: /* @__PURE__ */ jsx(EmptyState, {
+			icon: /* @__PURE__ */ jsx(Search, { className: "h-8 w-8" }),
+			title: "No matching files",
+			description: "Try a different search or clear the current filter."
+		}),
+		children: filteredRoot ? /* @__PURE__ */ jsx("div", {
+			className: "py-2",
+			children: /* @__PURE__ */ jsx(FileTree, {
+				root: filteredRoot,
+				selectedPath,
+				onSelect,
+				defaultExpanded,
+				visibility
+			})
+		}) : null
+	});
+}
+//#endregion
+//#region src/workspace/status-banner.tsx
+/**
+* StatusBanner — full-width notification banner for connection/provisioning states.
+*/
+const BANNER_STYLES = {
+	provisioning: {
+		bg: "bg-primary/5",
+		border: "border-primary/20",
+		text: "text-primary",
+		icon: Loader2
+	},
+	connecting: {
+		bg: "bg-[var(--code-number)]/5",
+		border: "border-[var(--code-number)]/20",
+		text: "text-[var(--code-number)]",
+		icon: Wifi
+	},
+	error: {
+		bg: "bg-[var(--code-error)]/5",
+		border: "border-[var(--code-error)]/20",
+		text: "text-[var(--code-error)]",
+		icon: AlertCircle
+	},
+	warning: {
+		bg: "bg-[var(--surface-warning-bg)]",
+		border: "border-[var(--surface-warning-border)]",
+		text: "text-[var(--surface-warning-text)]",
+		icon: AlertTriangle
+	},
+	success: {
+		bg: "bg-[var(--code-success)]/5",
+		border: "border-[var(--code-success)]/20",
+		text: "text-[var(--code-success)]",
+		icon: CheckCircle
+	},
+	info: {
+		bg: "bg-surface-container-high",
+		border: "border-[var(--md3-outline-variant)]",
+		text: "text-muted-foreground",
+		icon: AlertCircle
+	}
+};
+function StatusBanner({ type, message, detail, onDismiss, className }) {
+	const style = BANNER_STYLES[type];
+	const Icon = style.icon;
+	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),
+		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",
+					children: message
+				}),
+				detail && /* @__PURE__ */ jsx("span", {
+					className: "font-mono text-xs text-muted-foreground tabular-nums",
+					children: detail
+				})
+			]
+		}), onDismiss && /* @__PURE__ */ jsx("button", {
+			onClick: onDismiss,
+			className: "ml-auto font-sans text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+			children: "Dismiss"
+		})]
+	});
+}
+//#endregion
+//#region 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.
+*/
+const STATUS_LABELS = {
+	connected: {
+		label: "Connected",
+		color: "bg-[var(--code-success)]"
+	},
+	connecting: {
+		label: "Connecting…",
+		color: "bg-[var(--code-number)]"
+	},
+	disconnected: {
+		label: "Disconnected",
+		color: "bg-[var(--code-error)]"
+	},
+	provisioning: {
+		label: "Provisioning…",
+		color: "bg-[var(--code-number)]"
+	}
+};
+function StatusBar({ credits, contextBadges = [], onRemoveBadge, status = "connected", className }) {
+	const statusInfo = STATUS_LABELS[status];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn$1("flex flex-wrap items-center gap-3 px-3 py-1 border-t border-[var(--md3-outline-variant)] bg-surface-container-high font-sans text-[12px]", className),
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-1.5 text-muted-foreground",
+				children: [/* @__PURE__ */ jsx("span", { className: cn$1("w-1.5 h-1.5 rounded-full", statusInfo.color) }), statusInfo.label]
+			}),
+			contextBadges.map((badge) => /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-[2px] border border-[var(--md3-outline-variant)] text-foreground bg-[var(--border-accent)]/5",
+				children: [
+					/* @__PURE__ */ jsx(FileText, { className: "h-3 w-3" }),
+					badge.label,
+					badge.count !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: badge.count
+					}),
+					onRemoveBadge && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `Remove ${badge.label} from context`,
+						onClick: () => onRemoveBadge(badge.id),
+						className: "hover:text-foreground transition-colors",
+						children: /* @__PURE__ */ jsx(X, { className: "h-2.5 w-2.5" })
+					})
+				]
+			}, badge.id)),
+			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+			credits !== void 0 && /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-1 text-muted-foreground",
+				children: [
+					/* @__PURE__ */ jsx(Zap, { className: "h-3 w-3 shrink-0" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-mono tabular-nums",
+						children: credits.toLocaleString()
+					}),
+					/* @__PURE__ */ jsx("span", { children: "credits" })
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/workspace/terminal-panel.tsx
+/**
+* Terminal — read-only terminal output panel.
+*
+* Shows agent's bash command output with basic ANSI color support.
+* Collapsible, auto-scrolls to bottom.
+*/
+const LINE_COLORS = {
+	command: "text-[var(--code-function)]",
+	stdout: "text-foreground",
+	stderr: "text-[var(--code-error)]",
+	system: "text-muted-foreground"
+};
+const LINE_PREFIXES = {
+	command: "$ ",
+	stdout: "",
+	stderr: "",
+	system: "# "
+};
+function TerminalPanel({ lines, title = "Terminal", isCollapsed = false, onToggle, onClose, maxHeight = 200, className }) {
+	const scrollRef = useRef(null);
+	const contentId = useId();
+	useEffect(() => {
+		if (!isCollapsed && scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+	}, [lines, isCollapsed]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn$1("border-t border-[var(--md3-outline-variant)] bg-surface-container", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center px-1",
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: onToggle,
+				disabled: !onToggle,
+				"aria-expanded": !isCollapsed,
+				"aria-controls": contentId,
+				className: `flex min-w-0 flex-1 items-center gap-2 rounded px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-default ${focusRing}`,
+				children: [
+					/* @__PURE__ */ jsx(Terminal, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: title
+					}),
+					lines.length > 0 && /* @__PURE__ */ jsx("span", {
+						className: "rounded-full bg-surface-container-high px-1.5 py-0.5 text-[10px] tabular-nums",
+						children: lines.length
+					}),
+					/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					isCollapsed ? /* @__PURE__ */ jsx(ChevronUp, {
+						className: "h-3 w-3",
+						"aria-hidden": "true"
+					}) : /* @__PURE__ */ jsx(ChevronDown, {
+						className: "h-3 w-3",
+						"aria-hidden": "true"
+					})
+				]
+			}), onClose && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `Close ${title}`,
+				onClick: onClose,
+				className: `rounded p-1.5 text-muted-foreground transition-colors hover:text-foreground ${focusRing}`,
+				children: /* @__PURE__ */ jsx(X, {
+					className: "h-3 w-3",
+					"aria-hidden": "true"
+				})
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			id: contentId,
+			hidden: isCollapsed,
+			ref: scrollRef,
+			className: "overflow-auto px-3 pb-2 font-mono text-xs leading-[1.6] bg-surface-container-lowest",
+			style: { maxHeight },
+			children: [lines.map((line) => /* @__PURE__ */ jsxs("div", {
+				className: cn$1("whitespace-pre-wrap", LINE_COLORS[line.type]),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground select-none",
+					children: LINE_PREFIXES[line.type]
+				}), line.text]
+			}, line.id)), lines.length === 0 && /* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground py-2",
+				children: "No output yet"
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/workspace/runtime-pane.tsx
+/**
+* RuntimePane — shared operating surface for sandbox session state, terminal
+* output, audit results, and runtime metadata.
+*/
+function RuntimePane({ title = "Runtime", subtitle = "Session state, execution output, and inspection surfaces", statusBanner, statusBar, content, terminal, audit, inspector, footer, className }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn$1("flex h-full min-h-0 flex-col overflow-hidden bg-surface-container text-foreground", className),
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "border-b border-[var(--md3-outline-variant)] bg-surface-container-high bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent)] px-4 py-3",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "mb-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground",
+						children: "Sandbox"
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "text-sm font-semibold text-foreground",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "mt-1 text-xs text-muted-foreground",
+						children: subtitle
+					})
+				]
+			}),
+			statusBanner && /* @__PURE__ */ jsx(StatusBanner, { ...statusBanner }),
+			statusBar && /* @__PURE__ */ jsx(StatusBar, { ...statusBar }),
+			content ? /* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1 overflow-hidden",
+				children: content
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "grid min-h-0 flex-1 gap-px bg-[var(--md3-outline-variant)] lg:grid-cols-[minmax(0,1.35fr)_minmax(20rem,0.9fr)]",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "min-h-0 overflow-auto bg-surface-container",
+					children: terminal ? /* @__PURE__ */ jsx(TerminalPanel, {
+						...terminal,
+						className: cn$1("border-t-0 bg-transparent", terminal.className)
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "flex h-full items-center justify-center p-6 text-sm text-muted-foreground",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(TerminalSquare, { className: "h-4 w-4" }), "No terminal activity yet"]
+						})
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "grid min-h-0 gap-px bg-[var(--md3-outline-variant)]",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "min-h-0 overflow-auto bg-surface-container",
+						children: audit ? audit : /* @__PURE__ */ jsx("div", {
+							className: "flex h-full items-center justify-center p-6 text-sm text-muted-foreground",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx(ShieldCheck, { className: "h-4 w-4" }), "No audit data available"]
+							})
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "min-h-0 overflow-auto bg-surface-container",
+						children: inspector ? inspector : /* @__PURE__ */ jsx("div", {
+							className: "flex h-full items-center justify-center p-6 text-sm text-muted-foreground",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx(Binary, { className: "h-4 w-4" }), "No runtime inspector attached"]
+							})
+						})
+					})]
+				})]
+			}),
+			footer && /* @__PURE__ */ jsx("footer", {
+				className: "shrink-0 border-t border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2",
+				children: footer
+			})
+		]
+	});
+}
+//#endregion
+//#region src/lib/format-relative-age.ts
+const MINUTE = 6e4;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+const MONTH = 30 * DAY;
+const YEAR = 365 * DAY;
+/**
+* Compact age for a session rail: `now`, `5m`, `3h`, `2d`, `3w`, `4mo`, `1y`.
+* Unlike `timeAgo` from `@tangle-network/ui/utils` it accepts any date input,
+* rolls past hours into days and beyond, and carries no "ago" suffix, so it
+* fits a "codex · 2h" meta line. A future or unparseable date reads `now` /
+* empty rather than a negative count. `now` is injectable for deterministic tests.
+*/
+function formatRelativeAge(date, now = Date.now()) {
+	const timestamp = date instanceof Date ? date.getTime() : new Date(date).getTime();
+	if (Number.isNaN(timestamp)) return "";
+	const elapsed = Math.max(0, now - timestamp);
+	if (elapsed < MINUTE) return "now";
+	if (elapsed < HOUR) return `${Math.floor(elapsed / MINUTE)}m`;
+	if (elapsed < DAY) return `${Math.floor(elapsed / HOUR)}h`;
+	if (elapsed < WEEK) return `${Math.floor(elapsed / DAY)}d`;
+	if (elapsed < MONTH) return `${Math.floor(elapsed / WEEK)}w`;
+	if (elapsed < YEAR) return `${Math.floor(elapsed / MONTH)}mo`;
+	return `${Math.floor(elapsed / YEAR)}y`;
+}
+//#endregion
+//#region 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.
+*
+* The shell loader is the source of truth and reconciles in the background
+* (typically the app calls `useRevalidator().revalidate()` after its mutation
+* fetch settles). Until that lands, a local mirror of the loader items carries
+* the optimistic edit so a delete / rename / new-thread does not feel broken
+* for the duration of a D1 round-trip.
+*
+* Two ways to drive it, usable together:
+*   1. A window `CustomEvent` (default name {@link SESSION_CREATED_EVENT}) — the
+*      surface that creates a thread (often a different route from the sidebar's
+*      route) dispatches it; the sidebar prepends the item with no prop wiring.
+*   2. The imperative {@link SessionOptimisticController} returned here — the
+*      sidebar's own action handlers (rename / delete / pin) call it directly.
+*/
+/** Default window-event name for "a session/thread was just created". */
+const SESSION_CREATED_EVENT = "sandbox-thread-created";
+/** Dispatch the shared "session created" event so any mounted sidebar updates. */
+function dispatchSessionCreated(detail, eventName = SESSION_CREATED_EVENT) {
+	if (typeof window === "undefined") return;
+	window.dispatchEvent(new CustomEvent(eventName, { detail }));
+}
+function toItem(detail) {
+	return {
+		updatedAt: /* @__PURE__ */ new Date(),
+		...detail
+	};
+}
+/**
+* Mirror `items` with optimistic add/update/remove on top. The mirror re-syncs
+* whenever `items` changes (the loader is authoritative), so an optimistic edit
+* is naturally superseded once the server result arrives.
+*/
+function useOptimisticSessionItems(items, options = {}) {
+	const { listenForCreate = true, eventName = SESSION_CREATED_EVENT } = options;
+	const [optimisticItems, setOptimisticItems] = useState(items);
+	useEffect(() => {
+		setOptimisticItems(items);
+	}, [items]);
+	const add = useCallback((detail) => {
+		const next = toItem(detail);
+		setOptimisticItems((prev) => [next, ...prev.filter((item) => item.id !== next.id)]);
+	}, []);
+	const update = useCallback((id, patch) => {
+		setOptimisticItems((prev) => prev.map((item) => item.id === id ? {
+			...item,
+			...patch
+		} : item));
+	}, []);
+	const remove = useCallback((id) => {
+		setOptimisticItems((prev) => prev.filter((item) => item.id !== id));
+	}, []);
+	const reset = useCallback(() => setOptimisticItems(items), [items]);
+	const addRef = useRef(add);
+	addRef.current = add;
+	useEffect(() => {
+		if (!listenForCreate || typeof window === "undefined") return;
+		function onCreated(event) {
+			const detail = event.detail;
+			if (!detail?.id || !detail.title) return;
+			addRef.current(detail);
+		}
+		window.addEventListener(eventName, onCreated);
+		return () => window.removeEventListener(eventName, onCreated);
+	}, [listenForCreate, eventName]);
+	return {
+		items: optimisticItems,
+		controller: {
+			add,
+			update,
+			remove,
+			reset
+		}
+	};
+}
+//#endregion
+//#region src/workspace/session-sidebar.tsx
+const NO_CONTROLLER = {
+	add: () => {},
+	update: () => {},
+	remove: () => {},
+	reset: () => {}
+};
+const STATUS_GROUPS = [
+	{
+		key: "attention",
+		label: "Needs input"
+	},
+	{
+		key: "failed",
+		label: "Failed"
+	},
+	{
+		key: "working",
+		label: "Working"
+	},
+	{
+		key: "done",
+		label: "Done"
+	}
+];
+function groupKeyForStatus(status) {
+	switch (status) {
+		case "attention-needed": return "attention";
+		case "error": return "failed";
+		case "running": return "working";
+		default: return "done";
+	}
+}
+function statusDot(status) {
+	switch (status) {
+		case "running": return "bg-[var(--status-running)]";
+		case "error": return "bg-[var(--surface-danger-text)]";
+		case "attention-needed": return "bg-[var(--surface-warning-text)]";
+		default: return "bg-muted-foreground/40";
+	}
+}
+function iconForLink(icon) {
+	switch (icon) {
+		case "vault": return FolderTree;
+		case "settings": return Settings;
+		case "back": return ArrowLeft;
+		default: return Sparkles;
+	}
+}
+function toDate(value) {
+	if (value === void 0) return null;
+	const date = value instanceof Date ? value : new Date(value);
+	return Number.isNaN(date.getTime()) ? null : date;
+}
+function sortItems(items, sessionStatusById) {
+	return [...items].sort((left, right) => {
+		if (Boolean(left.isPinned) !== Boolean(right.isPinned)) return left.isPinned ? -1 : 1;
+		const leftSession = sessionStatusById.get(left.id);
+		const rightSession = sessionStatusById.get(right.id);
+		if (Boolean(leftSession) !== Boolean(rightSession)) return leftSession ? -1 : 1;
+		if (leftSession && rightSession) {
+			if (leftSession.isForeground !== rightSession.isForeground) return Number(rightSession.isForeground) - Number(leftSession.isForeground);
+			const leftRunning = Number(leftSession.status === "running");
+			const rightRunning = Number(rightSession.status === "running");
+			if (leftRunning !== rightRunning) return rightRunning - leftRunning;
+			if (leftSession.lastActivityAt !== rightSession.lastActivityAt) return rightSession.lastActivityAt - leftSession.lastActivityAt;
+		}
+		const leftUpdated = left.updatedAt ? new Date(left.updatedAt).getTime() : 0;
+		return (right.updatedAt ? new Date(right.updatedAt).getTime() : 0) - leftUpdated;
+	});
+}
+function badgeTone(tone = "neutral") {
+	switch (tone) {
+		case "accent": return "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary";
+		case "success": return "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]";
+		case "warning": return "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]";
+		case "danger": return "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]";
+		default: return "border-[var(--md3-outline-variant)] bg-surface-container-high text-muted-foreground";
+	}
+}
+function navigateToHref(href) {
+	if (!href || typeof window === "undefined") return;
+	window.location.assign(href);
+}
+function useResizable(defaultWidth, min, max, onChange) {
+	const [width, setWidth] = useState(defaultWidth);
+	const dragging = useRef(false);
+	const startX = useRef(0);
+	const startW = useRef(0);
+	return {
+		width,
+		onPointerDown: useCallback((e) => {
+			dragging.current = true;
+			startX.current = e.clientX;
+			startW.current = width;
+			e.currentTarget.setPointerCapture(e.pointerId);
+		}, [width]),
+		onPointerMove: useCallback((e) => {
+			if (!dragging.current) return;
+			const delta = e.clientX - startX.current;
+			const next = Math.min(max, Math.max(min, startW.current + delta));
+			setWidth(next);
+			onChange?.(next);
+		}, [
+			min,
+			max,
+			onChange
+		]),
+		onPointerUp: useCallback(() => {
+			dragging.current = false;
+		}, [])
+	};
+}
+function SessionSidebar({ title, subtitle, projectId = null, items, currentItemId, createLabel = "New Session", onCreate, onSelectItem, onSelectLink, links = [], className, emptyMessage = "No sessions yet. Start a conversation.", searchPlaceholder = "Search sessions", enableSearch = true, activityMonitor, filters = [], defaultFilterId, resizable = false, defaultWidth = 256, minWidth = 200, maxWidth = 400, onWidthChange, renderItemActions, optimistic = false, optimisticRef, variant = "default", groupBy = "none", showUpdatedAt = false, onCollapse, fill = false }) {
+	const quiet = variant === "quiet";
+	const [query, setQuery] = useState("");
+	const [activeFilterId, setActiveFilterId] = useState(defaultFilterId ?? filters[0]?.id ?? "all");
+	const optimisticState = useOptimisticSessionItems(items, optimistic === false ? { listenForCreate: false } : typeof optimistic === "object" ? optimistic : void 0);
+	const optimisticEnabled = optimistic !== false;
+	const effectiveItems = optimisticEnabled ? optimisticState.items : items;
+	useImperativeHandle(optimisticRef, () => optimisticEnabled ? optimisticState.controller : NO_CONTROLLER, [optimisticEnabled, optimisticState.controller]);
+	const activeSessions = useNavbarSessions(projectId);
+	const sessionsById = useMemo(() => new Map(activeSessions.map((session) => [session.sessionId, session])), [activeSessions]);
+	const orderedItems = useMemo(() => sortItems(effectiveItems, sessionsById), [effectiveItems, sessionsById]);
+	const visibleItems = useMemo(() => {
+		const normalizedQuery = query.trim().toLowerCase();
+		const selectedFilter = filters.find((filter) => filter.id === activeFilterId) ?? null;
+		return orderedItems.filter((item) => {
+			const session = sessionsById.get(item.id) ?? null;
+			const isActive = currentItemId === item.id;
+			if (selectedFilter && !selectedFilter.matches(item, {
+				session,
+				isActive
+			})) return false;
+			if (!normalizedQuery) return true;
+			return `${item.title} ${item.subtitle ?? ""} ${item.category ?? ""} ${(item.badges ?? []).map((badge) => badge.label).join(" ")}`.toLowerCase().includes(normalizedQuery);
+		});
+	}, [
+		activeFilterId,
+		currentItemId,
+		filters,
+		orderedItems,
+		query,
+		sessionsById
+	]);
+	const groups = useMemo(() => {
+		if (groupBy !== "status") return [{
+			key: "all",
+			label: null,
+			items: visibleItems
+		}];
+		return STATUS_GROUPS.map((group) => ({
+			key: group.key,
+			label: group.label,
+			items: visibleItems.filter((item) => groupKeyForStatus(sessionsById.get(item.id)?.status ?? item.status) === group.key)
+		})).filter((group) => group.items.length > 0);
+	}, [
+		groupBy,
+		sessionsById,
+		visibleItems
+	]);
+	const showGroupLabels = groups.length > 1;
+	const runningCount = activeSessions.filter((session) => session.status === "running").length;
+	const filterCounts = useMemo(() => Object.fromEntries(filters.map((filter) => [filter.id, orderedItems.filter((item) => filter.matches(item, {
+		session: sessionsById.get(item.id) ?? null,
+		isActive: currentItemId === item.id
+	})).length])), [
+		currentItemId,
+		filters,
+		orderedItems,
+		sessionsById
+	]);
+	const resize = useResizable(defaultWidth, minWidth, maxWidth, onWidthChange);
+	const fillsParent = fill && !resizable;
+	const renderRow = (item, index) => {
+		const session = sessionsById.get(item.id) ?? null;
+		const isActive = currentItemId === item.id;
+		const status = session?.status ?? item.status;
+		const isWorking = status === "running";
+		const visibleBadges = [...item.isPinned ? [{
+			id: `${item.id}-pinned`,
+			label: "Pinned",
+			tone: "neutral"
+		}] : [], ...item.badges ?? []].filter((badge) => !quiet || (badge.tone ?? "neutral") !== "neutral");
+		const updatedAt = showUpdatedAt && item.meta === void 0 ? toDate(item.updatedAt) : null;
+		const metaLine = item.meta ?? (updatedAt ? /* @__PURE__ */ jsx("time", {
+			dateTime: updatedAt.toISOString(),
+			title: updatedAt.toLocaleString(),
+			children: formatRelativeAge(updatedAt)
+		}) : null);
+		return /* @__PURE__ */ jsx("li", {
+			className: "agent-arrive",
+			style: { "--stagger-index": index },
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn$1(quiet ? "group relative flex items-center gap-2 rounded-lg py-2 pl-2 pr-3 transition-colors" : "group relative flex items-center gap-2 rounded-[var(--radius-sm)] px-2.5 py-1.5 transition-colors", MOTION_CONTROL, quiet ? isActive ? "bg-surface-container-high" : "hover:bg-surface-container" : isActive ? "bg-accent font-medium text-foreground" : "text-muted-foreground hover:bg-accent/30"),
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => {
+						if (onSelectItem) {
+							onSelectItem(item);
+							return;
+						}
+						navigateToHref(item.href);
+					},
+					"aria-current": isActive ? "page" : void 0,
+					className: "min-w-0 flex flex-1 items-center gap-2 text-left",
+					children: [item.icon ? /* @__PURE__ */ jsxs("span", {
+						className: "relative flex h-5 w-4 shrink-0 items-center justify-center",
+						"aria-hidden": "true",
+						children: [item.icon, /* @__PURE__ */ jsx("span", { className: cn$1("absolute -bottom-0.5 -right-0.5 h-1.5 w-1.5 rounded-full", statusDot(status)) })]
+					}) : /* @__PURE__ */ jsx("span", { className: cn$1("h-1.5 w-1.5 shrink-0 rounded-full", statusDot(status)) }), /* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: cn$1(quiet ? "truncate text-sm leading-5 text-foreground/75 group-hover:text-foreground" : "truncate text-sm font-medium", isActive && "text-foreground", isWorking && "agent-shimmer"),
+								...isWorking ? { "data-motion": "essential" } : {},
+								children: item.title
+							}),
+							item.subtitle && /* @__PURE__ */ jsx("div", {
+								className: "truncate text-xs leading-tight text-muted-foreground",
+								children: item.subtitle
+							}),
+							metaLine && /* @__PURE__ */ jsx("div", {
+								className: "truncate text-xs leading-tight text-muted-foreground",
+								children: metaLine
+							})
+						]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-1",
+					children: [
+						visibleBadges.length > 0 && visibleBadges.slice(0, 1).map((badge) => /* @__PURE__ */ jsx("span", {
+							className: cn$1("rounded-full border px-1.5 py-px text-[8px] font-semibold uppercase", badgeTone(badge.tone)),
+							children: badge.label
+						}, badge.id)),
+						session?.isForeground && /* @__PURE__ */ jsx("span", {
+							className: "h-1.5 w-1.5 rounded-full bg-[var(--status-running)]",
+							title: "Live"
+						}),
+						renderItemActions ? /* @__PURE__ */ jsx("div", {
+							className: cn$1("opacity-0 transition-opacity group-hover:opacity-100", MOTION_CONTROL),
+							onClick: (event) => event.stopPropagation(),
+							children: renderItemActions(item, {
+								session,
+								isActive
+							})
+						}) : null
+					]
+				})]
+			})
+		}, item.id);
+	};
+	let rowIndex = 0;
+	return /* @__PURE__ */ jsxs("aside", {
+		className: cn$1("relative flex shrink-0 flex-col border-r border-[var(--md3-outline-variant)] bg-surface-container-low", fillsParent && "h-full w-full", className),
+		style: fillsParent ? void 0 : { width: resizable ? resize.width : defaultWidth },
+		children: [
+			quiet ? /* @__PURE__ */ jsxs("div", {
+				className: "flex h-14 shrink-0 items-center justify-between gap-2 px-3",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: title
+					}),
+					onCreate ? /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: onCreate,
+						className: cn$1("flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm text-muted-foreground transition-colors hover:text-foreground", MOTION_CONTROL),
+						children: [/* @__PURE__ */ jsx(Plus, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ jsx("span", { children: createLabel })]
+					}) : /* @__PURE__ */ jsx("span", {}),
+					onCollapse && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onCollapse,
+						"aria-label": "Hide chats",
+						className: cn$1("flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-surface-container hover:text-foreground", "duration-[var(--duration-fast)] ease-[var(--ease-standard)]"),
+						children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
+					})
+				]
+			}) : /* @__PURE__ */ jsx(WorkspacePaneHeader, { children: /* @__PURE__ */ jsxs("div", {
+				className: "flex w-full items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-center gap-2",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary",
+						children: /* @__PURE__ */ jsx(MessageSquareText, { className: "h-3.5 w-3.5" })
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "truncate text-sm font-semibold text-foreground",
+							children: title
+						}), subtitle && /* @__PURE__ */ jsx("div", {
+							className: "truncate text-xs text-muted-foreground",
+							children: subtitle
+						})]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-1.5",
+					children: [runningCount > 0 && /* @__PURE__ */ jsx("span", {
+						className: "rounded-full border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-1.5 py-px text-xs font-medium text-primary",
+						children: runningCount
+					}), onCreate && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onCreate,
+						title: createLabel,
+						className: cn$1("flex h-7 w-7 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--md3-outline-variant)] text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground", "duration-[var(--duration-fast)] ease-[var(--ease-standard)]"),
+						children: /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" })
+					})]
+				})]
+			}) }),
+			(enableSearch && items.length > 0 || filters.length > 0) && /* @__PURE__ */ jsxs("div", {
+				className: cn$1("shrink-0", quiet ? "px-3 pb-1" : "border-b border-[var(--md3-outline-variant)] px-3 py-2.5"),
+				children: [enableSearch && effectiveItems.length > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ jsx("input", {
+						value: query,
+						onChange: (event) => setQuery(event.target.value),
+						placeholder: searchPlaceholder,
+						"aria-label": searchPlaceholder,
+						className: cn$1(quiet ? `h-8 w-full rounded-md border-0 bg-transparent pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:bg-surface-container ${focusRing}` : `h-8 w-full rounded-[var(--radius-sm)] border bg-surface-container-lowest pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground ${focusField}`, "duration-[var(--duration-fast)] ease-[var(--ease-standard)]")
+					})]
+				}), filters.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: cn$1("flex flex-wrap gap-1", enableSearch && items.length > 0 && "mt-2"),
+					children: filters.map((filter) => {
+						const isSelected = activeFilterId === filter.id;
+						return /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => setActiveFilterId(filter.id),
+							className: cn$1("inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors", "duration-[var(--duration-fast)] ease-[var(--ease-standard)]", isSelected ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary" : "border-[var(--md3-outline-variant)] text-muted-foreground hover:text-foreground"),
+							children: [/* @__PURE__ */ jsx("span", { children: filter.label }), /* @__PURE__ */ jsx("span", {
+								className: "text-[11px] opacity-60",
+								children: filterCounts[filter.id] ?? 0
+							})]
+						}, filter.id);
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("nav", {
+				"aria-label": "Sessions",
+				className: "flex-1 overflow-y-auto px-1.5 py-1.5",
+				children: visibleItems.length === 0 ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center justify-center gap-2 px-4 py-10 text-center text-sm text-muted-foreground",
+					children: [/* @__PURE__ */ jsx(MessageSquareText, {
+						className: "h-5 w-5 opacity-50",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("p", { children: query.trim() ? `No sessions match "${query.trim()}".` : emptyMessage })]
+				}) : showGroupLabels ? groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("section", {
+					"aria-label": group.label ?? void 0,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: cn$1("px-2 pb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground", groupIndex === 0 ? "pt-1" : "pt-3"),
+						children: group.label
+					}), /* @__PURE__ */ jsx("ul", {
+						className: "space-y-px",
+						children: group.items.map((item) => renderRow(item, rowIndex++))
+					})]
+				}, group.key)) : /* @__PURE__ */ jsx("ul", {
+					className: "space-y-px",
+					children: visibleItems.map((item) => renderRow(item, rowIndex++))
+				})
+			}),
+			activityMonitor && /* @__PURE__ */ jsx("div", {
+				className: "border-t border-[var(--md3-outline-variant)] px-2 py-1.5",
+				children: activityMonitor
+			}),
+			links.length > 0 && /* @__PURE__ */ jsx("nav", {
+				"aria-label": "Workspace sections",
+				className: "border-t border-[var(--md3-outline-variant)] px-1.5 py-1.5",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "space-y-px",
+					children: links.map((link) => {
+						const Icon = iconForLink(link.icon);
+						return /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => {
+								if (onSelectLink) {
+									onSelectLink(link);
+									return;
+								}
+								navigateToHref(link.href);
+							},
+							className: cn$1("flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-accent/30 hover:text-foreground", "duration-[var(--duration-fast)] ease-[var(--ease-standard)]"),
+							children: [/* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: link.label
+							})]
+						}, link.id);
+					})
+				})
+			}),
+			resizable && /* @__PURE__ */ jsx("div", {
+				className: cn$1("absolute top-0 right-0 bottom-0 w-1 cursor-col-resize hover:bg-[var(--accent-surface-soft)] active:bg-[var(--border-accent)] transition-colors", "duration-[var(--duration-fast)] ease-[var(--ease-standard)]"),
+				onPointerDown: resize.onPointerDown,
+				onPointerMove: resize.onPointerMove,
+				onPointerUp: resize.onPointerUp,
+				title: "Drag to resize"
+			})
+		]
+	});
+}
+//#endregion
+//#region 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
+* ready-made {@link shellShouldRevalidate} export.
+*/
+function createShellShouldRevalidate(options = {}) {
+	const appPathPrefix = options.appPathPrefix ?? "/app";
+	return function shouldRevalidate(args) {
+		const { currentUrl, nextUrl, formMethod, defaultShouldRevalidate } = args;
+		if (formMethod && formMethod !== "GET") return true;
+		if (currentUrl.pathname !== nextUrl.pathname && currentUrl.pathname.startsWith(appPathPrefix) && nextUrl.pathname.startsWith(appPathPrefix)) return false;
+		return defaultShouldRevalidate;
+	};
+}
+/**
+* Ready-made shell `shouldRevalidate` for apps mounted under `/app`. Wire it as
+* a one-line route export:
+*
+* ```ts
+* export const shouldRevalidate = shellShouldRevalidate;
+* ```
+*
+* For a non-`/app` prefix, use {@link createShellShouldRevalidate}.
+*/
+const shellShouldRevalidate = createShellShouldRevalidate();
+//#endregion
+//#region src/workspace/session-activity-monitor.tsx
+function SessionStatusDot({ session }) {
+	if (session.status === "error") return /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 text-[var(--surface-danger-text)]" });
+	if (session.status === "running") return /* @__PURE__ */ jsx(LoaderCircle, {
+		className: "h-3 w-3 animate-spin text-primary",
+		"data-motion": "essential"
+	});
+	if (session.status === "attention-needed") return /* @__PURE__ */ jsx(Activity, { className: "h-3 w-3 text-[var(--surface-warning-text)]" });
+	return /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-muted-foreground/40" });
+}
+function navigateToSession(session) {
+	if (!session.href || typeof window === "undefined") return;
+	window.location.assign(session.href);
+}
+function SessionActivityMonitor({ className, compact = false, sessionsById = {}, emptyMessage = "No active sessions", resolveProjectLabel, onSelectSession }) {
+	const trackedSessions = useActiveSessions();
+	const projectActivity = useProjectActivity();
+	const totalRunning = useTotalRunningSessions();
+	const sessionLookup = Object.keys(sessionsById).length > 0 ? sessionsById : Object.fromEntries(trackedSessions.map((session) => [session.sessionId, session]));
+	if (projectActivity.length === 0) {
+		if (compact) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: cn$1("rounded-[var(--radius-lg)] border border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2.5 text-xs text-muted-foreground", className),
+			children: emptyMessage
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn$1("space-y-1.5", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground",
+				children: [/* @__PURE__ */ jsx(Activity, { className: "h-3 w-3" }), "Active"]
+			}), totalRunning > 0 && /* @__PURE__ */ jsx("span", {
+				className: "rounded-full border border-primary/30 bg-[var(--accent-surface-soft)] px-1.5 py-px text-[10px] font-medium text-primary",
+				children: totalRunning
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "space-y-1",
+			children: projectActivity.map((project) => {
+				const label = resolveProjectLabel?.(project.projectId, project.projectLabel) ?? project.projectLabel ?? String(project.projectId);
+				return /* @__PURE__ */ jsxs("div", {
+					className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--md3-outline-variant)] bg-surface-container",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-2 px-2.5 py-1.5",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "truncate text-xs font-medium text-foreground",
+								children: label
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "text-[10px] text-muted-foreground",
+								children: [
+									project.activeSessionCount,
+									" session",
+									project.activeSessionCount === 1 ? "" : "s"
+								]
+							})]
+						}), project.runningSessionIds.length > 0 && /* @__PURE__ */ jsxs("span", {
+							className: "shrink-0 text-[10px] text-muted-foreground",
+							children: [project.runningSessionIds.length, " live"]
+						})]
+					}), !compact && project.runningSessionIds.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: "border-t border-[var(--md3-outline-variant)] bg-surface-container-high px-1 py-0.5",
+						children: project.runningSessionIds.map((sessionId) => {
+							const session = sessionLookup[sessionId];
+							if (!session) return null;
+							return /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => {
+									if (onSelectSession) {
+										onSelectSession(session);
+										return;
+									}
+									navigateToSession(session);
+								},
+								className: "flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1 text-left transition-colors hover:bg-[var(--accent-surface-soft)]",
+								children: [
+									/* @__PURE__ */ jsx(SessionStatusDot, { session }),
+									/* @__PURE__ */ jsx("span", {
+										className: "min-w-0 truncate text-xs text-muted-foreground",
+										children: session.title ?? "Untitled"
+									}),
+									/* @__PURE__ */ jsx(MessageSquareText, { className: "ml-auto h-3 w-3 shrink-0 text-muted-foreground" })
+								]
+							}, sessionId);
+						})
+					})]
+				}, String(project.projectId));
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/workspace/sandbox-workbench.tsx
+function getArtifactTabIcon(kind) {
+	switch (kind) {
+		case "file": return FileCode2;
+		case "markdown": return FileText;
+		case "openui": return LayoutPanelTop;
+		case "custom": return Boxes;
+	}
+}
+function artifactTabLabel(artifact) {
+	if (typeof artifact.title === "string") return artifact.title;
+	if (artifact.kind === "file") return artifact.filename;
+	return "Artifact";
+}
+function sortPinnedFirst(artifacts) {
+	if (!artifacts.some((artifact) => artifact.pinned)) return artifacts;
+	return [...artifacts.filter((artifact) => artifact.pinned), ...artifacts.filter((artifact) => !artifact.pinned)];
+}
+function ArtifactTabs({ artifacts, activeArtifactId, onSelect, onClose, tabIdPrefix, panelId }) {
+	const tabRefs = useRef(/* @__PURE__ */ new Map());
+	if (artifacts.length === 0) return null;
+	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",
+		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"),
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					ref: (element) => {
+						if (element) tabRefs.current.set(artifact.id, element);
+						else tabRefs.current.delete(artifact.id);
+					},
+					id: `${tabIdPrefix}-${artifact.id}`,
+					role: "tab",
+					"aria-controls": panelId,
+					"aria-selected": isActive,
+					tabIndex: isActive ? 0 : -1,
+					onClick: () => onSelect(artifact.id),
+					onKeyDown: (event) => {
+						const index = artifacts.findIndex((entry) => entry.id === artifact.id);
+						let nextIndex;
+						switch (event.key) {
+							case "ArrowRight":
+								nextIndex = (index + 1) % artifacts.length;
+								break;
+							case "ArrowLeft":
+								nextIndex = (index - 1 + artifacts.length) % artifacts.length;
+								break;
+							case "Home":
+								nextIndex = 0;
+								break;
+							case "End":
+								nextIndex = artifacts.length - 1;
+								break;
+							default: return;
+						}
+						event.preventDefault();
+						const next = artifacts[nextIndex];
+						onSelect(next.id);
+						tabRefs.current.get(next.id)?.focus();
+					},
+					className: `flex min-w-0 items-center gap-2 px-3 py-2 text-[12px] uppercase tracking-wider font-medium transition-colors hover:text-foreground ${focusRingInset}`,
+					children: [/* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
+						className: "max-w-[14rem] truncate",
+						children: artifactTabLabel(artifact)
+					})]
+				}), onClose && !artifact.pinned && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": `Close ${artifactTabLabel(artifact)}`,
+					tabIndex: isActive ? 0 : -1,
+					onClick: () => onClose(artifact.id),
+					className: `mr-1 rounded-[2px] p-1 opacity-0 transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100 ${focusRing}`,
+					children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+				})]
+			}, artifact.id);
+		})
+	});
+}
+function renderArtifact(artifact) {
+	switch (artifact.kind) {
+		case "file": return /* @__PURE__ */ jsx(FileArtifactPane, {
+			path: artifact.path,
+			filename: artifact.filename,
+			content: artifact.content,
+			blobUrl: artifact.blobUrl,
+			mimeType: artifact.mimeType,
+			onDownload: artifact.onDownload,
+			tabs: artifact.tabs,
+			activeTabId: artifact.activeTabId,
+			onTabSelect: artifact.onTabSelect,
+			onTabClose: artifact.onTabClose,
+			eyebrow: artifact.eyebrow,
+			meta: artifact.meta,
+			toolbar: artifact.toolbar,
+			footer: artifact.footer
+		});
+		case "markdown": return /* @__PURE__ */ jsx(ArtifactPane, {
+			eyebrow: artifact.eyebrow ?? "Document",
+			title: artifact.title,
+			subtitle: artifact.subtitle,
+			meta: artifact.meta,
+			headerActions: artifact.headerActions,
+			toolbar: artifact.toolbar,
+			footer: artifact.footer,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "p-5",
+				children: /* @__PURE__ */ jsx(Markdown, {
+					className: "prose-sm max-w-none",
+					children: artifact.content
+				})
+			})
+		});
+		case "openui": return /* @__PURE__ */ jsx(ArtifactPane, {
+			eyebrow: artifact.eyebrow ?? "Structured Artifact",
+			title: artifact.title,
+			subtitle: artifact.subtitle,
+			meta: artifact.meta,
+			headerActions: artifact.headerActions,
+			toolbar: artifact.toolbar,
+			footer: artifact.footer,
+			children: /* @__PURE__ */ jsx(OpenUIArtifactRenderer, {
+				schema: artifact.schema,
+				onAction: artifact.onAction
+			})
+		});
+		case "custom": return /* @__PURE__ */ jsx(ArtifactPane, {
+			eyebrow: artifact.eyebrow ?? "Artifact",
+			title: artifact.title,
+			subtitle: artifact.subtitle,
+			meta: artifact.meta,
+			headerActions: artifact.headerActions,
+			toolbar: artifact.toolbar,
+			footer: artifact.footer,
+			children: artifact.content
+		});
+	}
+}
+function regionHeader(sections, fallback) {
+	if (sections.length !== 1) return fallback;
+	switch (sections[0]?.key) {
+		case "rail": return;
+		case "directory": return /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-muted-foreground",
+			children: [/* @__PURE__ */ jsx(FolderTree, { className: "h-3.5 w-3.5" }), "Directory"]
+		});
+		case "artifacts": return /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-muted-foreground",
+			children: [/* @__PURE__ */ jsx(LayoutPanelTop, { className: "h-3.5 w-3.5" }), "Artifacts"]
+		});
+		case "runtime": return /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-muted-foreground",
+			children: [/* @__PURE__ */ jsx(Bot, { className: "h-3.5 w-3.5" }), "Runtime"]
+		});
+		default: return fallback;
+	}
+}
+function renderRegion(sections, region) {
+	if (sections.length === 0) return void 0;
+	if (sections.length === 1) return sections[0]?.content;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1("flex min-h-0 h-full gap-3 p-3", region === "bottom" ? "flex-col" : "flex-col"),
+		children: sections.map((section) => /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1 overflow-hidden",
+			children: section.content
+		}, section.key))
+	});
+}
+/**
+* SandboxWorkbench — high-level composition that turns sandbox-ui primitives
+* 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 }) {
+	const artifacts = useMemo(() => sortPinnedFirst(artifactsProp), [artifactsProp]);
+	const artifactTabsId = useId();
+	const artifactPanelId = `${artifactTabsId}-panel`;
+	const [uncontrolledArtifactId, setUncontrolledArtifactId] = useState(activeArtifactId ?? artifacts[0]?.id);
+	useEffect(() => {
+		if (activeArtifactId !== void 0) return;
+		setUncontrolledArtifactId((current) => {
+			if (artifacts.length === 0) return void 0;
+			if (current && artifacts.some((artifact) => artifact.id === current)) return current;
+			return artifacts[0]?.id;
+		});
+	}, [activeArtifactId, artifacts]);
+	const resolvedArtifactId = activeArtifactId ?? uncontrolledArtifactId;
+	const activeArtifact = useMemo(() => artifacts.find((artifact) => artifact.id === resolvedArtifactId), [artifacts, resolvedArtifactId]);
+	const handleArtifactChange = (artifactId) => {
+		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 { 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
+				})
+			})
+		]
+	});
+	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 artifactPanel = artifacts.length > 0 || emptyArtifactState ? /* @__PURE__ */ jsxs("section", {
+		className: "flex h-full min-h-0 flex-col bg-surface-container",
+		children: [/* @__PURE__ */ jsx(ArtifactTabs, {
+			artifacts,
+			activeArtifactId: resolvedArtifactId,
+			onSelect: handleArtifactChange,
+			onClose: onArtifactClose,
+			tabIdPrefix: artifactTabsId,
+			panelId: artifactPanelId
+		}), /* @__PURE__ */ jsx("div", {
+			id: artifactPanelId,
+			role: "tabpanel",
+			"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}`,
+			children: activeArtifact ? renderArtifact(activeArtifact) : /* @__PURE__ */ jsx("div", {
+				className: "flex h-full items-center justify-center p-6",
+				children: emptyArtifactState ?? /* @__PURE__ */ jsx(EmptyState, {
+					icon: /* @__PURE__ */ jsx(Boxes, { className: "h-8 w-8" }),
+					title: "No artifact selected",
+					description: "Select a generated artifact, file preview, or OpenUI panel to inspect it here."
+				})
+			})
+		})]
+	}) : null;
+	const directoryPlacement = layout?.directoryPlacement ?? (directory ? "left" : "hidden");
+	const artifactPlacement = layout?.artifactPlacement ?? (artifactPanel ? "right" : "hidden");
+	const runtimePlacement = layout?.runtimePlacement ?? (runtime ? "bottom" : "hidden");
+	const regionSections = {
+		left: [],
+		right: [],
+		bottom: []
+	};
+	if (rail) regionSections.left.push({
+		key: "rail",
+		content: rail
+	});
+	if (directory && directoryPlacement !== "hidden") regionSections[directoryPlacement].push({
+		key: "directory",
+		content: /* @__PURE__ */ jsx(DirectoryPane, {
+			...directory,
+			className: "h-full"
+		})
+	});
+	if (artifactPanel && artifactPlacement !== "hidden") regionSections[artifactPlacement].push({
+		key: "artifacts",
+		content: artifactPanel
+	});
+	if (runtime && runtimePlacement !== "hidden") regionSections[runtimePlacement].push({
+		key: "runtime",
+		content: /* @__PURE__ */ jsx(RuntimePane, {
+			...runtime,
+			className: "h-full"
+		})
+	});
+	const left = renderRegion(regionSections.left, "left");
+	const right = renderRegion(regionSections.right, "right");
+	const bottom = renderRegion(regionSections.bottom, "bottom");
+	const railOnly = regionSections.left.length === 1 && regionSections.left[0]?.key === "rail";
+	const genericPanelsHeader = /* @__PURE__ */ jsx("span", {
+		className: "text-xs font-semibold uppercase tracking-[0.12em] text-muted-foreground",
+		children: "Workspace Panels"
+	});
+	return /* @__PURE__ */ jsx(WorkspaceLayout, {
+		left,
+		leftHeader: left ? regionHeader(regionSections.left, genericPanelsHeader) : void 0,
+		center,
+		centerHeader,
+		right,
+		rightHeader: right ? regionHeader(regionSections.right, genericPanelsHeader) : void 0,
+		bottom,
+		bottomHeader: bottom ? regionHeader(regionSections.bottom, genericPanelsHeader) : void 0,
+		theme: layout?.theme,
+		density: layout?.density ?? "comfortable",
+		persistenceKey: layout?.persistenceKey,
+		defaultLeftOpen: layout?.defaultLeftOpen ?? Boolean(left),
+		defaultRightOpen: layout?.defaultRightOpen ?? Boolean(right),
+		defaultBottomOpen: layout?.defaultBottomOpen ?? Boolean(bottom),
+		defaultLeftWidth: layout?.defaultLeftWidth,
+		defaultRightWidth: layout?.defaultRightWidth,
+		minLeftWidth: layout?.minLeftWidth,
+		maxLeftWidth: layout?.maxLeftWidth,
+		minRightWidth: layout?.minRightWidth,
+		maxRightWidth: layout?.maxRightWidth,
+		resizable: layout?.resizable,
+		leftOpen: layout?.leftOpen,
+		onLeftOpenChange: layout?.onLeftOpenChange,
+		rightOpen: layout?.rightOpen,
+		onRightOpenChange: layout?.onRightOpenChange,
+		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)
+	});
+}
+function AgentWorkbench(props) {
+	return /* @__PURE__ */ jsx(SandboxWorkbench, {
+		...props,
+		session: {
+			...props.session,
+			eyebrow: props.session.eyebrow ?? "Agent Session",
+			title: props.session.title ?? /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Bot, { className: "h-4 w-4 text-primary" }), "Execution timeline"]
+			})
+		}
+	});
+}
+//#endregion
+//#region src/workspace/audit-results.tsx
+/**
+* AuditResults — structured pass/fail display for form audits.
+*/
+function AuditResults({ forms, crossFormChecks = [], overallScore, className }) {
+	const totalPassed = forms.reduce((s, f) => s + f.passed, 0);
+	const totalChecks = forms.reduce((s, f) => s + f.passed + f.failed, 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn$1("space-y-3 p-3", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3 px-3 py-2 rounded-[var(--radius-md)] bg-surface-container-high border border-[var(--md3-outline-variant)]",
+				children: [/* @__PURE__ */ jsx(Shield, { className: cn$1("h-5 w-5", totalChecks === totalPassed ? "text-[var(--code-success)]" : "text-[var(--code-number)]") }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+					className: "text-sm font-semibold text-foreground",
+					children: [
+						totalPassed,
+						"/",
+						totalChecks,
+						" checks passed"
+					]
+				}), overallScore !== void 0 && /* @__PURE__ */ jsxs("div", {
+					className: "text-xs text-muted-foreground",
+					children: [
+						"Score: ",
+						overallScore,
+						"/100"
+					]
+				})] })]
+			}),
+			forms.map((form) => /* @__PURE__ */ jsx(FormAuditCard, { form }, form.formId)),
+			crossFormChecks.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+				className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-1",
+				children: "Cross-Form Checks"
+			}), crossFormChecks.map((check, i) => /* @__PURE__ */ jsx(CheckRow, { check }, i))] })
+		]
+	});
+}
+function FormAuditCard({ form }) {
+	const [expanded, setExpanded] = useState(form.failed > 0);
+	const allPassed = form.failed === 0 && form.found;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-high overflow-hidden",
+		children: [/* @__PURE__ */ jsxs("button", {
+			onClick: () => setExpanded(!expanded),
+			className: "flex items-center gap-2 w-full px-3 py-2 text-left hover:bg-accent transition-colors",
+			children: [
+				allPassed ? /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-[var(--code-success)] shrink-0" }) : !form.found ? /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4 text-[var(--code-error)] shrink-0" }) : /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4 text-[var(--code-number)] shrink-0" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium text-foreground flex-1",
+					children: form.formName || form.formId
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: cn$1("text-xs tabular-nums", allPassed ? "text-[var(--code-success)]" : "text-muted-foreground"),
+					children: [
+						form.passed,
+						"/",
+						form.passed + form.failed
+					]
+				}),
+				/* @__PURE__ */ jsx(ChevronRight, { className: cn$1("h-3 w-3 text-muted-foreground transition-transform", expanded && "rotate-90") })
+			]
+		}), expanded && /* @__PURE__ */ jsx("div", {
+			className: "border-t border-[var(--md3-outline-variant)] px-3 py-1.5 space-y-0.5",
+			children: form.checks.map((check, i) => /* @__PURE__ */ jsx(CheckRow, { check }, i))
+		})]
+	});
+}
+function CheckRow({ check }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 py-1 text-xs",
+		children: [
+			check.passed ? /* @__PURE__ */ jsx(CheckCircle, { className: "h-3 w-3 text-[var(--code-success)] shrink-0" }) : /* @__PURE__ */ jsx(XCircle, { className: "h-3 w-3 text-[var(--code-error)] shrink-0" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-foreground flex-1 truncate",
+				children: check.label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground tabular-nums shrink-0",
+				children: check.passed ? String(check.actual ?? check.expected) : `${check.actual ?? "missing"} ≠ ${check.expected}`
+			})
+		]
+	});
+}
+//#endregion
+//#region 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(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const col of columns) map.set(col.id, []);
+		for (const item of items) {
+			const list = map.get(item.status);
+			if (list) list.push(item);
+			else map.get(columns[columns.length - 1]?.id)?.push(item);
+		}
+		return map;
+	}, [items, columns]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn$1("flex flex-1 flex-col overflow-hidden", className),
+		children: [header, /* @__PURE__ */ jsx("div", {
+			className: "flex flex-1 gap-3 overflow-x-auto p-4",
+			children: columns.map((col) => {
+				const colItems = grouped.get(col.id) ?? [];
+				const itemCards = /* @__PURE__ */ jsxs(Fragment, { children: [colItems.length === 0 && columnEmptyState, colItems.map((item, index) => {
+					const card = /* @__PURE__ */ jsxs("div", {
+						role: onClickItem ? "button" : void 0,
+						tabIndex: onClickItem ? 0 : void 0,
+						onClick: (event) => {
+							if (!onClickItem) return;
+							const interactive = event.target.closest(INTERACTIVE_SELECTOR);
+							if (interactive && interactive !== event.currentTarget) return;
+							onClickItem(item);
+						},
+						onKeyDown: (event) => {
+							if (!onClickItem || event.currentTarget !== event.target) return;
+							if (event.key !== "Enter" && event.key !== " ") return;
+							if (event.repeat) return;
+							event.preventDefault();
+							onClickItem(item);
+						},
+						className: "group w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-high p-3 text-left transition-colors hover:border-accent/50",
+						children: [
+							/* @__PURE__ */ jsx("p", {
+								className: "text-sm font-medium text-foreground",
+								children: item.title
+							}),
+							item.description && /* @__PURE__ */ jsx("p", {
+								className: "mt-1 text-xs text-muted-foreground line-clamp-2",
+								children: item.description
+							}),
+							(item.priority || item.tags?.length) && /* @__PURE__ */ jsxs("div", {
+								className: "mt-2 flex flex-wrap gap-1.5",
+								children: [item.priority && (renderBadge ? renderBadge(item.priority, "priority") : /* @__PURE__ */ jsx("span", {
+									className: "rounded-full border border-[var(--md3-outline-variant)] px-2 py-0.5 text-[10px] font-medium text-muted-foreground",
+									children: item.priority
+								})), item.tags?.map((tag) => renderBadge ? /* @__PURE__ */ jsx("span", { children: renderBadge(tag, "tag") }, tag) : /* @__PURE__ */ jsx("span", {
+									className: "rounded-full border border-[var(--md3-outline-variant)] px-2 py-0.5 text-[10px] text-muted-foreground",
+									children: tag
+								}, tag))]
+							}),
+							renderItemMeta?.(item)
+						]
+					}, item.id);
+					return renderItemWrapper ? /* @__PURE__ */ jsx("span", { children: renderItemWrapper(item, index, card) }, item.id) : card;
+				})] });
+				const columnBody = /* @__PURE__ */ jsx("div", {
+					className: "flex flex-1 flex-col gap-2 overflow-y-auto px-2 pb-2 min-h-[80px]",
+					children: renderColumnBody ? renderColumnBody(col.id, itemCards, colItems) : itemCards
+				});
+				return /* @__PURE__ */ jsxs("div", {
+					className: cn$1("flex w-72 shrink-0 flex-col rounded-xl border border-[var(--md3-outline-variant)] bg-surface-container border-t-2", col.accent ?? "border-t-muted-foreground/30"),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between px-4 py-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx("h3", {
+								className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground",
+								children: col.label
+							}), /* @__PURE__ */ jsx("span", {
+								className: "inline-flex h-5 min-w-[20px] items-center justify-center rounded-full border border-[var(--md3-outline-variant)] px-1.5 text-[10px] font-medium text-muted-foreground",
+								children: colItems.length
+							})]
+						}), renderColumnAction?.(col)]
+					}), columnBody]
+				}, col.id);
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/workspace/calendar-view.tsx
+function toDateKey(d) {
+	return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function getMonthDays(year, month) {
+	const startDay = new Date(year, month, 1).getDay();
+	const days = [];
+	for (let i = startDay - 1; i >= 0; i--) {
+		const d = new Date(year, month, -i);
+		days.push({
+			date: d,
+			key: toDateKey(d),
+			inMonth: false
+		});
+	}
+	const daysInMonth = new Date(year, month + 1, 0).getDate();
+	for (let i = 1; i <= daysInMonth; i++) {
+		const d = new Date(year, month, i);
+		days.push({
+			date: d,
+			key: toDateKey(d),
+			inMonth: true
+		});
+	}
+	const remaining = 7 - days.length % 7;
+	if (remaining < 7) for (let i = 1; i <= remaining; i++) {
+		const d = new Date(year, month + 1, i);
+		days.push({
+			date: d,
+			key: toDateKey(d),
+			inMonth: false
+		});
+	}
+	return days;
+}
+/**
+* CalendarView — month grid calendar with event chips and optional day detail panel.
+*
+* Stateless by default (controlled month/selectedDay). Falls back to internal
+* state when uncontrolled. All rendering is customizable via render props.
+*/
+function CalendarView({ events, className, month: controlledMonth, year: controlledYear, onMonthChange, selectedDay: controlledSelectedDay, onSelectDay, onDoubleClickDay, renderEventChip, renderDayDetail, headerLeft, headerRight, showDayPanel = true }) {
+	const today = /* @__PURE__ */ new Date();
+	const todayKey = toDateKey(today);
+	const [internalMonth, setInternalMonth] = useState({
+		year: today.getFullYear(),
+		month: today.getMonth()
+	});
+	const [internalSelectedDay, setInternalSelectedDay] = useState(todayKey);
+	const viewYear = controlledYear ?? internalMonth.year;
+	const viewMonth = controlledMonth ?? internalMonth.month;
+	const selectedDay = controlledSelectedDay ?? internalSelectedDay;
+	function setMonth(y, m) {
+		if (onMonthChange) onMonthChange(y, m);
+		else setInternalMonth({
+			year: y,
+			month: m
+		});
+	}
+	function selectDay(key) {
+		if (onSelectDay) onSelectDay(key);
+		else setInternalSelectedDay(key);
+	}
+	function prevMonth() {
+		const m = viewMonth === 0 ? 11 : viewMonth - 1;
+		setMonth(viewMonth === 0 ? viewYear - 1 : viewYear, m);
+	}
+	function nextMonth() {
+		const m = viewMonth === 11 ? 0 : viewMonth + 1;
+		setMonth(viewMonth === 11 ? viewYear + 1 : viewYear, m);
+	}
+	const eventsByDate = useMemo(() => {
+		const map = {};
+		for (const evt of events) {
+			const d = typeof evt.startAt === "string" ? evt.startAt.slice(0, 10) : toDateKey(evt.startAt);
+			if (!map[d]) map[d] = [];
+			map[d].push(evt);
+		}
+		return map;
+	}, [events]);
+	const monthDays = useMemo(() => getMonthDays(viewYear, viewMonth), [viewYear, viewMonth]);
+	const monthLabel = new Date(viewYear, viewMonth).toLocaleString("en-US", {
+		month: "long",
+		year: "numeric"
+	});
+	const selectedDayEvents = selectedDay ? eventsByDate[selectedDay] ?? [] : [];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn$1("flex flex-1 min-h-0 overflow-hidden", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex-1 flex flex-col overflow-hidden border-r border-[var(--md3-outline-variant)]",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between border-b border-[var(--md3-outline-variant)] px-4 py-2.5 shrink-0",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							headerLeft,
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: prevMonth,
+								className: "h-7 w-7 rounded-md hover:bg-surface-container-high flex items-center justify-center text-muted-foreground",
+								children: /* @__PURE__ */ jsx("svg", {
+									width: "16",
+									height: "16",
+									viewBox: "0 0 24 24",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: "2",
+									children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-sm font-semibold text-foreground min-w-[160px] text-center",
+								children: monthLabel
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: nextMonth,
+								className: "h-7 w-7 rounded-md hover:bg-surface-container-high flex items-center justify-center text-muted-foreground",
+								children: /* @__PURE__ */ jsx("svg", {
+									width: "16",
+									height: "16",
+									viewBox: "0 0 24 24",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: "2",
+									children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+								})
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => {
+									setMonth(today.getFullYear(), today.getMonth());
+									selectDay(todayKey);
+								},
+								className: "h-7 px-2 rounded-md border border-[var(--md3-outline-variant)] text-xs font-medium text-muted-foreground hover:text-foreground",
+								children: "Today"
+							})
+						]
+					}), headerRight]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "grid grid-cols-7 border-b border-[var(--md3-outline-variant)] shrink-0",
+					children: [
+						"Sun",
+						"Mon",
+						"Tue",
+						"Wed",
+						"Thu",
+						"Fri",
+						"Sat"
+					].map((d) => /* @__PURE__ */ jsx("div", {
+						className: "px-2 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground text-center",
+						children: d
+					}, d))
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex-1 grid grid-cols-7 auto-rows-fr overflow-y-auto",
+					children: monthDays.map(({ date, key, inMonth }) => {
+						const dayEvents = eventsByDate[key] ?? [];
+						const isToday = key === todayKey;
+						const isSelected = key === selectedDay;
+						return /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => selectDay(key),
+							onDoubleClick: () => onDoubleClickDay?.(key),
+							className: cn$1("flex flex-col items-start p-1.5 border-b border-r border-[var(--md3-outline-variant)] text-left transition-colors min-h-[72px]", !inMonth && "bg-muted/30", isSelected && "bg-primary/5 ring-1 ring-inset ring-primary/20", !isSelected && "hover:bg-surface-container-high"),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: cn$1("text-xs font-medium w-6 h-6 flex items-center justify-center rounded-full mb-0.5", isToday && "bg-primary text-primary-foreground", !isToday && !inMonth && "text-muted-foreground/50", !isToday && inMonth && "text-foreground"),
+								children: date.getDate()
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-0.5 w-full min-w-0",
+								children: [dayEvents.slice(0, 3).map((evt) => renderEventChip ? /* @__PURE__ */ jsx("div", {
+									className: "w-full min-w-0",
+									children: renderEventChip(evt)
+								}, evt.id) : /* @__PURE__ */ jsx("div", {
+									className: "w-full truncate text-[9px] px-1 py-0.5 rounded bg-primary/10 text-primary",
+									title: evt.title,
+									children: evt.title
+								}, evt.id)), dayEvents.length > 3 && /* @__PURE__ */ jsxs("span", {
+									className: "text-[9px] text-muted-foreground px-1",
+									children: [
+										"+",
+										dayEvents.length - 3,
+										" more"
+									]
+								})]
+							})]
+						}, key);
+					})
+				})
+			]
+		}), showDayPanel && /* @__PURE__ */ jsx("div", {
+			className: "w-80 shrink-0 flex flex-col overflow-hidden",
+			children: renderDayDetail ? renderDayDetail(selectedDay ?? todayKey, selectedDayEvents) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "px-4 py-3 border-b border-[var(--md3-outline-variant)] shrink-0",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-sm font-semibold text-foreground",
+					children: selectedDay === todayKey ? "Today" : selectedDay ? (/* @__PURE__ */ new Date(selectedDay + "T00:00:00")).toLocaleDateString("en-US", {
+						weekday: "long",
+						month: "long",
+						day: "numeric"
+					}) : "Select a day"
+				}), /* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-muted-foreground",
+					children: [
+						selectedDayEvents.length,
+						" event",
+						selectedDayEvents.length !== 1 ? "s" : ""
+					]
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 overflow-y-auto p-2 space-y-2",
+				children: [selectedDayEvents.length === 0 && /* @__PURE__ */ jsx("div", {
+					className: "px-2 py-8 text-center",
+					children: /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground",
+						children: "No events this day"
+					})
+				}), selectedDayEvents.map((evt) => /* @__PURE__ */ jsxs("div", {
+					className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-3",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-medium text-foreground",
+						children: evt.title
+					}), evt.type && /* @__PURE__ */ jsx("span", {
+						className: "mt-1 inline-block rounded-full border border-[var(--md3-outline-variant)] px-2 py-0.5 text-[10px] text-muted-foreground",
+						children: evt.type
+					})]
+				}, evt.id))]
+			})] })
+		})]
+	});
+}
+//#endregion
+//#region src/workspace/approval-queue.tsx
+/**
+* ApprovalQueue — review queue for agent-proposed actions.
+*
+* Shows pending items with approve/reject controls, confidence stats per type,
+* and a collapsible resolved history. Designed for the agent approval feedback
+* loop: agent proposes → user approves/rejects → rejection reasons feed back.
+*/
+function ApprovalQueue({ items, className, onApprove, onReject, renderItemDetail, renderTypeBadge, renderStats, canResolve = true, header, emptyState, showResolved: controlledShowResolved }) {
+	const [rejectingId, setRejectingId] = useState(null);
+	const [rejectReason, setRejectReason] = useState("");
+	const [showResolved, setShowResolved] = useState(controlledShowResolved ?? false);
+	const pending = useMemo(() => items.filter((a) => a.status === "pending"), [items]);
+	const resolved = useMemo(() => items.filter((a) => a.status !== "pending"), [items]);
+	const stats = useMemo(() => {
+		const map = {};
+		for (const item of items) {
+			if (!map[item.type]) map[item.type] = {
+				type: item.type,
+				approved: 0,
+				rejected: 0,
+				total: 0,
+				rate: 0
+			};
+			map[item.type].total++;
+			if (item.status === "approved" || item.status === "executed") map[item.type].approved++;
+			if (item.status === "rejected") map[item.type].rejected++;
+		}
+		for (const s of Object.values(map)) s.rate = s.total > 0 ? Math.round(s.approved / s.total * 100) : 0;
+		return Object.values(map);
+	}, [items]);
+	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: cn$1("flex-1 flex items-center justify-center", className),
+		children: emptyState ?? /* @__PURE__ */ jsx("div", {
+			className: "text-center py-20",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: "No proposals yet"
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1("flex-1 overflow-y-auto", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "max-w-3xl mx-auto p-6",
+			children: [
+				header,
+				stats.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "flex gap-3 mb-6 flex-wrap",
+					children: renderStats ? renderStats(stats) : stats.map((s) => /* @__PURE__ */ jsxs("div", {
+						className: "flex-1 min-w-[120px] rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-3",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "flex items-center gap-2 mb-1",
+								children: renderTypeBadge ? renderTypeBadge(s.type) : /* @__PURE__ */ jsx("span", {
+									className: "rounded-full border border-[var(--md3-outline-variant)] px-2 py-0.5 text-[10px] font-medium text-muted-foreground",
+									children: s.type
+								})
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "flex items-baseline gap-1",
+								children: /* @__PURE__ */ jsxs("span", {
+									className: "text-xl font-semibold text-foreground",
+									children: [s.rate, "%"]
+								})
+							}),
+							/* @__PURE__ */ jsxs("p", {
+								className: "text-[10px] text-muted-foreground",
+								children: [
+									s.approved,
+									"/",
+									s.total,
+									" approved"
+								]
+							})
+						]
+					}, s.type))
+				}),
+				pending.length > 0 && /* @__PURE__ */ jsxs("section", {
+					className: "mb-8",
+					children: [/* @__PURE__ */ jsxs("h3", {
+						className: "text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3",
+						children: [
+							"Pending (",
+							pending.length,
+							")"
+						]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "space-y-3",
+						children: pending.map((item) => /* @__PURE__ */ jsxs("div", {
+							className: "rounded-lg border border-primary/20 bg-surface-container p-4",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-start gap-3",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex-1 min-w-0",
+									children: [
+										/* @__PURE__ */ jsxs("div", {
+											className: "flex items-center gap-2 mb-1",
+											children: [/* @__PURE__ */ jsx("h4", {
+												className: "text-sm font-medium text-foreground",
+												children: item.title
+											}), renderTypeBadge ? renderTypeBadge(item.type) : /* @__PURE__ */ jsx("span", {
+												className: "rounded-full border border-[var(--md3-outline-variant)] px-2 py-0.5 text-[10px] text-muted-foreground",
+												children: item.type
+											})]
+										}),
+										item.description && /* @__PURE__ */ jsx("p", {
+											className: "text-xs text-muted-foreground line-clamp-2",
+											children: item.description
+										}),
+										renderItemDetail?.(item)
+									]
+								}), canResolve && /* @__PURE__ */ jsxs("div", {
+									className: "flex gap-1.5 shrink-0",
+									children: [/* @__PURE__ */ jsx("button", {
+										type: "button",
+										onClick: () => onApprove?.(item),
+										className: "h-8 px-3 rounded-md border border-[var(--md3-outline-variant)] text-xs font-medium text-emerald-500 hover:bg-emerald-500/10 hover:border-emerald-500/30 transition-colors",
+										children: "Approve"
+									}), /* @__PURE__ */ jsx("button", {
+										type: "button",
+										onClick: () => {
+											setRejectingId(rejectingId === item.id ? null : item.id);
+											setRejectReason("");
+										},
+										className: "h-8 px-3 rounded-md border border-[var(--md3-outline-variant)] text-xs font-medium text-destructive hover:bg-destructive/10 hover:border-destructive/30 transition-colors",
+										children: "Reject"
+									})]
+								})]
+							}), rejectingId === item.id && /* @__PURE__ */ jsxs("div", {
+								className: "mt-3 border-t border-[var(--md3-outline-variant)] pt-3",
+								children: [/* @__PURE__ */ jsx("textarea", {
+									placeholder: "Why are you rejecting this?",
+									value: rejectReason,
+									onChange: (e) => setRejectReason(e.target.value),
+									className: `w-full rounded-md border bg-surface-container-low px-3 py-2 text-sm placeholder:text-muted-foreground mb-2 ${focusField}`,
+									rows: 2
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "flex gap-2 justify-end",
+									children: [/* @__PURE__ */ jsx("button", {
+										type: "button",
+										onClick: () => {
+											setRejectingId(null);
+											setRejectReason("");
+										},
+										className: "h-7 px-3 rounded-md text-xs text-muted-foreground hover:text-foreground",
+										children: "Cancel"
+									}), /* @__PURE__ */ jsx("button", {
+										type: "button",
+										onClick: () => {
+											onReject?.(item, rejectReason.trim() || void 0);
+											setRejectingId(null);
+											setRejectReason("");
+										},
+										className: "h-7 px-3 rounded-md bg-destructive text-destructive-foreground text-xs font-medium",
+										children: "Submit Rejection"
+									})]
+								})]
+							})]
+						}, item.id))
+					})]
+				}),
+				resolved.length > 0 && /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => setShowResolved(!showResolved),
+					className: "flex items-center gap-2 text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3 hover:text-foreground transition-colors",
+					children: [
+						/* @__PURE__ */ jsx("svg", {
+							width: "12",
+							height: "12",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							className: cn$1("transition-transform", showResolved && "rotate-180"),
+							children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+						}),
+						"Resolved (",
+						resolved.length,
+						")"
+					]
+				}), showResolved && /* @__PURE__ */ jsx("div", {
+					className: "space-y-2",
+					children: resolved.map((item) => /* @__PURE__ */ jsxs("div", {
+						className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-4 opacity-60",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 mb-1",
+							children: [
+								/* @__PURE__ */ jsx("h4", {
+									className: "text-sm font-medium text-foreground",
+									children: item.title
+								}),
+								renderTypeBadge?.(item.type),
+								/* @__PURE__ */ jsx("span", {
+									className: cn$1("rounded-full px-2 py-0.5 text-[10px] font-medium", item.status === "approved" && "bg-emerald-500/10 text-emerald-500", item.status === "rejected" && "bg-destructive/10 text-destructive", item.status === "executed" && "bg-primary/10 text-primary"),
+									children: item.status
+								})
+							]
+						}), item.meta?.rejectionReason != null && /* @__PURE__ */ jsxs("p", {
+							className: "mt-1 text-xs text-destructive",
+							children: ["Reason: ", String(item.meta.rejectionReason)]
+						})]
+					}, item.id))
+				})] })
+			]
+		})
+	});
+}
+//#endregion
+export { WorkspacePaneHeader as S, TerminalPanel as _, AuditResults as a, DirectoryPane as b, SessionActivityMonitor as c, SessionSidebar as d, SESSION_CREATED_EVENT as f, RuntimePane as g, formatRelativeAge as h, TaskBoard as i, createShellShouldRevalidate as l, useOptimisticSessionItems as m, ApprovalQueue as n, AgentWorkbench as o, dispatchSessionCreated as p, CalendarView as r, SandboxWorkbench as s, ArtifactPane$1 as t, shellShouldRevalidate as u, StatusBar as v, WorkspaceLayout as x, StatusBanner as y };