@workerdeck/ui 0.7.0 → 0.11.0

package/build/workspace.mjs

@@ -0,0 +1,849 @@
+import { $ as TooltipProvider, Ct as cn, J as Spinner, K as Splitter, Z as Tip, t as SessionPanel, vt as Input, xt as Button } from "./SessionPanel-_U8tjX29.mjs";
+import { n as formatBytes } from "./format-DqR56Y8l.mjs";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, File, FileWarning, Folder, FolderOpen, Link2, PanelLeftClose, PanelLeftOpen, RefreshCw, Search, TriangleAlert, X } from "lucide-react";
+import { currentText, isDirty, useHostFileRoots, useHostFileSearch, useHostFileTree, useOpenFiles, useSessionInfo } from "@workerdeck/react";
+import { createPortal } from "react-dom";
+//#region src/components/agent/EditorTabs.tsx
+/**
+* The open-file tab strip.
+*
+* Hand-rolled rather than built on `@base-ui/react`'s `Tabs`: a VS Code tab
+* carries a close button, and a `<button>` inside a `<button>` is invalid HTML —
+* getting the primitive to render something else costs more than the roving
+* tabindex it would have provided. So that part is here, explicitly, along with
+* the two affordances that actually make a tab strip feel right: middle-click to
+* close, and the active tab scrolling itself into view.
+*
+* Deliberately state-free. Which files are open, which is focused and what
+* closing does are all decided by `useOpenFiles`.
+*/
+function EditorTabs({ files, activePath, onActivate, onClose, className }) {
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		delay: 500,
+		closeDelay: 0,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "editor-tabs",
+			role: "tablist",
+			"aria-label": "Open files",
+			className: cn("flex shrink-0 items-stretch overflow-x-auto border-b border-border bg-surface", className),
+			children: files.map((file) => /* @__PURE__ */ jsx(Tab, {
+				file,
+				active: file.path === activePath,
+				onActivate: () => onActivate(file.path),
+				onClose: () => onClose(file.path),
+				onArrow: (direction) => {
+					const next = files[files.findIndex((f) => f.path === file.path) + direction];
+					if (next) onActivate(next.path);
+				}
+			}, file.path))
+		})
+	});
+}
+function Tab({ file, active, onActivate, onClose, onArrow }) {
+	const dirty = isDirty(file);
+	const ref = useRef(null);
+	useEffect(() => {
+		if (active) ref.current?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [active]);
+	const onAuxClick = (event) => {
+		if (event.button !== 1) return;
+		event.preventDefault();
+		onClose();
+	};
+	return /* @__PURE__ */ jsxs(Tip, {
+		side: "bottom",
+		render: /* @__PURE__ */ jsx("div", {
+			ref,
+			role: "tab",
+			tabIndex: active ? 0 : -1,
+			"aria-selected": active,
+			onClick: onActivate,
+			onAuxClick,
+			onKeyDown: (event) => {
+				if (event.key === "ArrowRight") onArrow(1);
+				else if (event.key === "ArrowLeft") onArrow(-1);
+				else if (event.key === "Enter" || event.key === " ") onActivate();
+				else return;
+				event.preventDefault();
+			},
+			className: cn("group flex min-w-0 shrink-0 cursor-pointer items-center gap-1.5 border-r border-border px-3 py-1.5 transition-colors", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent focus-visible:ring-inset", active ? "bg-bg text-fg-1" : "text-fg-3 hover:bg-surface-hover hover:text-fg-2")
+		}),
+		content: /* @__PURE__ */ jsxs("span", {
+			className: "flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "font-mono break-all",
+				children: file.path
+			}), file.bytes !== void 0 ? /* @__PURE__ */ jsx("span", {
+				className: "text-fg-4",
+				children: formatBytes(file.bytes)
+			}) : null]
+		}),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("max-w-40 truncate font-mono text-label", dirty && "italic"),
+				children: file.name
+			}),
+			file.status === "error" ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-danger",
+				children: "!"
+			}) : null,
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-label": dirty ? `Close ${file.name} (unsaved changes)` : `Close ${file.name}`,
+				onClick: (event) => {
+					event.stopPropagation();
+					onClose();
+				},
+				className: cn("shrink-0 rounded p-0.5 text-fg-4 transition-opacity hover:bg-surface-hover hover:text-fg-1", active || dirty ? "opacity-70" : "opacity-0 group-hover:opacity-70 focus-visible:opacity-100"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("block", dirty && "group-hover:hidden"),
+					children: dirty ? /* @__PURE__ */ jsx("span", { className: "block size-3 rounded-full bg-fg-2" }) : /* @__PURE__ */ jsx(X, { className: "size-3" })
+				}), dirty ? /* @__PURE__ */ jsx("span", {
+					className: "hidden group-hover:block",
+					children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+				}) : null]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/agent/FileTree.tsx
+/** How far one level of nesting indents, in pixels. Inline rather than a Tailwind
+* class because depth is a number at runtime and `pl-${n}` is not a class. */
+const INDENT = 12;
+/**
+* The workspace's left rail: an expandable tree of the session's project,
+* with a search box over the same fuzzy route `@file` completion uses.
+*
+* Presentational by construction — every piece of state it renders comes from
+* the hooks in `@workerdeck/react`, and the only thing it owns is the search
+* query, which is the text in its own input.
+*
+* Searching replaces the tree with matches rather than filtering it: the route
+* answers with paths from all over the project, and threading those back into
+* tree positions would mean expanding a dozen directories to show six results.
+*/
+function FileTree({ tree, search, activePath, onOpenFile, onCollapse, style, className }) {
+	const [query, setQuery] = useState("");
+	const [matches, setMatches] = useState();
+	const searching = query.trim().length > 0;
+	useEffect(() => {
+		if (!search?.available) return;
+		const q = query.trim();
+		if (!q) {
+			setMatches(void 0);
+			return;
+		}
+		const controller = new AbortController();
+		const timer = setTimeout(() => {
+			search.search(q, {
+				limit: 60,
+				signal: controller.signal
+			}).then((found) => {
+				if (!controller.signal.aborted) setMatches(found);
+			});
+		}, 150);
+		return () => {
+			controller.abort();
+			clearTimeout(timer);
+		};
+	}, [search, query]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "file-tree",
+		style,
+		className: cn("flex min-h-0 min-w-0 flex-col bg-surface", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1 px-2 pt-2",
+			children: [
+				search?.available ? /* @__PURE__ */ jsxs("div", {
+					className: "relative min-w-0 flex-1",
+					children: [
+						/* @__PURE__ */ jsx(Search, { className: "absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-fg-4" }),
+						/* @__PURE__ */ jsx(Input, {
+							value: query,
+							onChange: (e) => setQuery(e.target.value),
+							placeholder: "Search files…",
+							className: "h-7 pr-7 pl-7 text-label",
+							spellCheck: false
+						}),
+						searching ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setQuery(""),
+							"aria-label": "Clear search",
+							className: "absolute top-1/2 right-1.5 -translate-y-1/2 text-fg-4 transition-colors hover:text-fg-2",
+							children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+						}) : null
+					]
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate px-1 font-mono text-label text-fg-4",
+					children: tree.root
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon-sm",
+					"aria-label": "Refresh the file tree",
+					onClick: () => tree.refresh(),
+					children: /* @__PURE__ */ jsx(RefreshCw, { className: "size-3.5 text-fg-3" })
+				}),
+				onCollapse ? /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon-sm",
+					"aria-label": "Hide project files",
+					onClick: onCollapse,
+					children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-3.5 text-fg-3" })
+				}) : null
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1 overflow-auto px-1 py-1",
+			children: tree.error ? /* @__PURE__ */ jsx("p", {
+				className: "px-2 py-3 text-body-sm text-danger",
+				children: tree.error
+			}) : searching ? matches === void 0 ? /* @__PURE__ */ jsx("div", {
+				className: "py-6 text-center",
+				children: /* @__PURE__ */ jsx(Spinner, { className: "size-4 text-fg-4" })
+			}) : matches.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "px-2 py-6 text-center text-body-sm text-fg-4",
+				children: "No matching files."
+			}) : /* @__PURE__ */ jsx("ul", { children: matches.map((match) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Row, {
+				label: fileName(match.relative),
+				detail: directoryOf(match.relative),
+				title: match.relative,
+				icon: /* @__PURE__ */ jsx(File, { className: "size-3.5 shrink-0 text-fg-4" }),
+				active: match.path === activePath,
+				onClick: () => onOpenFile(match.path)
+			}) }, match.path)) }) : tree.loading ? /* @__PURE__ */ jsx("div", {
+				className: "py-6 text-center",
+				children: /* @__PURE__ */ jsx(Spinner, { className: "size-4 text-fg-4" })
+			}) : tree.rows.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "px-2 py-6 text-center text-body-sm text-fg-4",
+				children: "This project is empty."
+			}) : /* @__PURE__ */ jsx("ul", {
+				role: "tree",
+				"aria-label": "Project files",
+				children: tree.rows.map((row) => /* @__PURE__ */ jsxs("li", {
+					role: "treeitem",
+					"aria-expanded": row.expanded,
+					"aria-level": row.depth + 1,
+					children: [/* @__PURE__ */ jsx(Row, {
+						label: row.entry.name,
+						indent: row.depth,
+						active: row.entry.path === activePath,
+						icon: row.entry.type === "dir" ? row.loading ? /* @__PURE__ */ jsx(Spinner, { className: "size-3.5 shrink-0 text-fg-4" }) : row.expanded ? /* @__PURE__ */ jsx(FolderOpen, { className: "size-3.5 shrink-0 text-accent" }) : /* @__PURE__ */ jsx(Folder, { className: "size-3.5 shrink-0 text-accent" }) : /* @__PURE__ */ jsx(EntryIcon, { type: row.entry.type }),
+						chevron: row.entry.type === "dir" ? /* @__PURE__ */ jsx(ChevronRight, { className: cn("size-3 shrink-0 text-fg-4 transition-transform", row.expanded && "rotate-90") }) : void 0,
+						onClick: () => row.entry.type === "dir" ? tree.toggle(row.entry.path) : onOpenFile(row.entry.path)
+					}), row.truncated ? /* @__PURE__ */ jsx("p", {
+						className: "truncate py-0.5 text-label text-fg-4",
+						style: { paddingLeft: (row.depth + 1) * INDENT + 22 },
+						children: "More entries than the server will return — use search."
+					}) : null]
+				}, row.entry.path))
+			})
+		})]
+	});
+}
+/** One clickable line. A directory and a file differ only in what the click does
+* and whether there is a chevron — visually they are the same row. */
+function Row({ label, detail, title, icon, chevron, indent = 0, active, onClick }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (active) ref.current?.scrollIntoView({ block: "nearest" });
+	}, [active]);
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: "button",
+		onClick,
+		title: title ?? label,
+		style: { paddingLeft: indent * INDENT + 4 },
+		className: cn("flex w-full items-center gap-1 rounded py-1 pr-2 text-left transition-colors", active ? "bg-surface-hover text-fg-1" : "text-fg-2 hover:bg-surface-hover"),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "flex size-3 shrink-0 items-center justify-center",
+				children: chevron
+			}),
+			icon,
+			/* @__PURE__ */ jsx("span", {
+				className: "shrink-0 truncate font-mono text-label",
+				children: label
+			}),
+			detail ? /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate font-mono text-label text-fg-4",
+				children: detail
+			}) : null
+		]
+	});
+}
+/** Last segment of a relative match. */
+function fileName(relative) {
+	return relative.slice(relative.lastIndexOf("/") + 1);
+}
+/** Everything before it, or `undefined` for a file at the search root. */
+function directoryOf(relative) {
+	const cut = relative.lastIndexOf("/");
+	return cut === -1 ? void 0 : relative.slice(0, cut);
+}
+/** A symlink is reported as itself and never silently resolved — following it is
+* the next request's problem, and that request is refused if it escapes the roots. */
+function EntryIcon({ type }) {
+	if (type === "symlink") return /* @__PURE__ */ jsx(Link2, { className: "size-3.5 shrink-0 text-fg-4" });
+	return /* @__PURE__ */ jsx(File, { className: "size-3.5 shrink-0 text-fg-4" });
+}
+//#endregion
+//#region src/components/agent/CodeEditor.tsx
+/**
+* Monaco — VS Code's own editor — behind a small React surface.
+*
+* Two deliberate choices, both about `@workerdeck/ui` being a **published
+* library** rather than an app:
+*
+* 1. **Loaded on demand.** The `import()` is inside an effect, so Monaco is a
+*    separate chunk that arrives when someone first opens a file. A dashboard
+*    that never opens one never pays for it, and Monaco's ~90 language grammars
+*    are themselves lazy (each `registerLanguage` carries an `import()` loader),
+*    so opening a `.ts` file fetches the TypeScript grammar and nothing else.
+* 2. **No `MonacoEnvironment` is configured here, and none is needed.** Workers
+*    in a library become every embedder's bootstrapping problem, and
+*    `packages/web` ships prebuilt static files at a domain root, which is
+*    exactly where hardcoded worker URLs break. The editor is configured so it
+*    never asks for one: `wordBasedSuggestions` and `quickSuggestions` off,
+*    no diff editor. A host that wants the worker-backed language services
+*    (TypeScript IntelliSense, JSON schema validation) sets `MonacoEnvironment`
+*    itself before the first file is opened — Monaco is a singleton and nothing
+*    here fights that.
+*
+* One model per path, kept across tab switches, so undo history and view state
+* survive clicking away and back — which is most of what makes tabs feel like
+* tabs rather than like re-opening a file.
+*/
+function CodeEditor({ path, value, onChange, onSave, readOnly, className }) {
+	const host = useRef(null);
+	const editor = useRef(null);
+	const monaco = useRef(null);
+	const [ready, setReady] = useState(false);
+	const theme = useDocumentTheme();
+	const handlers = useRef({
+		onChange,
+		onSave
+	});
+	handlers.current = {
+		onChange,
+		onSave
+	};
+	useEffect(() => {
+		let disposed = false;
+		loadMonaco().then((api) => {
+			if (disposed || !host.current) return;
+			monaco.current = api;
+			const instance = api.editor.create(host.current, {
+				value,
+				language: languageOf(path),
+				readOnly,
+				automaticLayout: true,
+				theme: monacoTheme(document.documentElement.getAttribute("data-theme")),
+				minimap: { enabled: false },
+				scrollBeyondLastLine: false,
+				fontSize: 12,
+				lineHeight: 20,
+				fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+				renderLineHighlight: "line",
+				smoothScrolling: true,
+				padding: {
+					top: 8,
+					bottom: 8
+				},
+				scrollbar: {
+					verticalScrollbarSize: 10,
+					horizontalScrollbarSize: 10
+				},
+				wordBasedSuggestions: "off",
+				quickSuggestions: false
+			});
+			editor.current = instance;
+			instance.onDidChangeModelContent(() => {
+				handlers.current.onChange?.(instance.getValue());
+			});
+			instance.addCommand(api.KeyMod.CtrlCmd | api.KeyCode.KeyS, () => {
+				handlers.current.onSave?.();
+			});
+			setReady(true);
+		});
+		return () => {
+			disposed = true;
+			editor.current?.dispose();
+			editor.current = null;
+			setReady(false);
+		};
+	}, []);
+	useEffect(() => {
+		const api = monaco.current;
+		const instance = editor.current;
+		if (!api || !instance || !ready) return;
+		const uri = api.Uri.parse(`workerdeck://host${path}`);
+		const model = api.editor.getModel(uri) ?? api.editor.createModel(value, languageOf(path), uri);
+		if (instance.getModel() !== model) instance.setModel(model);
+	}, [
+		path,
+		ready,
+		value
+	]);
+	useEffect(() => {
+		const instance = editor.current;
+		if (!instance || !ready) return;
+		const model = instance.getModel();
+		if (!model || model.getValue() === value) return;
+		model.pushEditOperations([], [{
+			range: model.getFullModelRange(),
+			text: value
+		}], () => null);
+	}, [value, ready]);
+	useEffect(() => {
+		if (ready) editor.current?.updateOptions({ readOnly });
+	}, [readOnly, ready]);
+	useEffect(() => {
+		if (ready) monaco.current?.editor.setTheme(monacoTheme(theme));
+	}, [theme, ready]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative min-h-0 min-w-0 flex-1", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: host,
+			className: "absolute inset-0"
+		}), !ready ? /* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0 flex items-center justify-center bg-bg",
+			children: /* @__PURE__ */ jsx(Spinner, { className: "size-4 text-fg-4" })
+		}) : null]
+	});
+}
+/**
+* Follow the `data-theme` the design tokens already swap on, so the editor is
+* never the one light rectangle in a dark app (or the reverse). An attribute
+* observer rather than a media query: the app has a manual toggle, and the
+* attribute is what that toggle writes.
+*/
+function useDocumentTheme() {
+	const [theme, setTheme] = useState(() => typeof document === "undefined" ? null : document.documentElement.getAttribute("data-theme"));
+	useEffect(() => {
+		const root = document.documentElement;
+		const sync = () => setTheme(root.getAttribute("data-theme"));
+		sync();
+		const observer = new MutationObserver(sync);
+		observer.observe(root, {
+			attributes: true,
+			attributeFilter: ["data-theme"]
+		});
+		return () => observer.disconnect();
+	}, []);
+	return theme;
+}
+/** An unset attribute means the host never opted into the token themes, in which
+* case dark matches this package's default surface. */
+function monacoTheme(theme) {
+	return theme === "light" ? "wd-light" : "wd-dark";
+}
+/**
+* Load Monaco once, register the themes, and hand back the API.
+*
+* Cached as a promise rather than a value so that several editors mounting in
+* the same frame share one load instead of racing three of them.
+*/
+let monacoPromise;
+function loadMonaco() {
+	monacoPromise ??= (async () => {
+		const api = await import("monaco-editor");
+		api.editor.defineTheme("wd-dark", {
+			base: "vs-dark",
+			inherit: true,
+			rules: [],
+			colors: { "editor.background": "#00000000" }
+		});
+		api.editor.defineTheme("wd-light", {
+			base: "vs",
+			inherit: true,
+			rules: [],
+			colors: { "editor.background": "#00000000" }
+		});
+		return api;
+	})();
+	return monacoPromise;
+}
+/**
+* Monaco's language id for a path.
+*
+* By extension, with a short table for the files that have none — Monaco's own
+* registry is keyed on extensions it knows, and an unmatched file falls through
+* to `plaintext`, which is the honest answer rather than a guess.
+*/
+function languageOf(path) {
+	const name = path.slice(path.lastIndexOf("/") + 1);
+	const byName = FILENAME_LANGUAGES[name.toLowerCase()];
+	if (byName) return byName;
+	return EXTENSION_LANGUAGES[name.slice(name.lastIndexOf(".") + 1).toLowerCase()] ?? "plaintext";
+}
+/** Files whose type is their whole name. */
+const FILENAME_LANGUAGES = {
+	dockerfile: "dockerfile",
+	makefile: "plaintext",
+	".gitignore": "plaintext",
+	".env": "shell"
+};
+/** Extension → Monaco language id. Only where the id differs from the extension
+* or the extension is ambiguous; everything else Monaco resolves itself. */
+const EXTENSION_LANGUAGES = {
+	ts: "typescript",
+	tsx: "typescript",
+	mts: "typescript",
+	cts: "typescript",
+	js: "javascript",
+	jsx: "javascript",
+	mjs: "javascript",
+	cjs: "javascript",
+	json: "json",
+	jsonc: "json",
+	md: "markdown",
+	mdx: "markdown",
+	css: "css",
+	scss: "scss",
+	less: "less",
+	html: "html",
+	htm: "html",
+	xml: "xml",
+	svg: "xml",
+	yml: "yaml",
+	yaml: "yaml",
+	toml: "plaintext",
+	sh: "shell",
+	bash: "shell",
+	zsh: "shell",
+	fish: "shell",
+	py: "python",
+	rb: "ruby",
+	rs: "rust",
+	go: "go",
+	swift: "swift",
+	java: "java",
+	kt: "kotlin",
+	c: "c",
+	h: "c",
+	cpp: "cpp",
+	cc: "cpp",
+	hpp: "cpp",
+	cs: "csharp",
+	php: "php",
+	sql: "sql",
+	graphql: "graphql",
+	gql: "graphql",
+	lua: "lua",
+	r: "r",
+	pl: "perl",
+	dart: "dart",
+	scala: "scala",
+	ini: "ini",
+	cfg: "ini",
+	conf: "ini",
+	txt: "plaintext",
+	log: "plaintext"
+};
+//#endregion
+//#region src/components/agent/FileViewer.tsx
+/**
+* The focused file: Monaco, plus the states a file can be in that are not
+* "here is some text".
+*
+* No path row — the tab's tooltip carries the path and the size, and a line of
+* monospace above every file is chrome that never earns its height.
+*/
+function FileViewer({ file, canWrite, onChange, onSave, onRevert, onReload, onOverwrite, onDismissConflict, className }) {
+	if (!file) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "file-viewer",
+		className: cn("flex min-h-0 min-w-0 flex-1 flex-col bg-bg", className),
+		children: [
+			file.conflict ? /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 flex-wrap items-center gap-2 border-b border-warning/40 bg-warning-bg px-3 py-2",
+				children: [
+					/* @__PURE__ */ jsx(TriangleAlert, { className: "size-3.5 shrink-0 text-warning" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 text-body-sm text-warning",
+						children: "This file changed on disk since you opened it."
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "xs",
+						onClick: () => onReload?.(file.path),
+						children: "Use the version on disk"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "xs",
+						onClick: () => onOverwrite?.(file.path),
+						children: "Keep mine"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "xs",
+						onClick: () => onDismissConflict?.(file.path),
+						children: "Dismiss"
+					})
+				]
+			}) : file.saveError ? /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-2 border-b border-danger/40 bg-danger-bg px-3 py-2",
+				children: [
+					/* @__PURE__ */ jsx(TriangleAlert, { className: "size-3.5 shrink-0 text-danger" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 text-body-sm text-danger",
+						children: file.saveError
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "xs",
+						onClick: () => onDismissConflict?.(file.path),
+						children: "Dismiss"
+					})
+				]
+			}) : null,
+			file.status === "loading" ? /* @__PURE__ */ jsx(Centred, { children: /* @__PURE__ */ jsx(Spinner, { className: "size-4 text-fg-4" }) }) : file.status === "error" ? /* @__PURE__ */ jsxs(Centred, { children: [/* @__PURE__ */ jsx(TriangleAlert, { className: "size-4 text-danger" }), /* @__PURE__ */ jsx("p", {
+				className: "text-body-sm text-danger",
+				children: file.error
+			})] }) : file.status === "binary" ? /* @__PURE__ */ jsxs(Centred, { children: [
+				/* @__PURE__ */ jsx(FileWarning, { className: "size-4 text-fg-4" }),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-body-sm text-fg-4",
+					children: "This file isn’t text."
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-label text-fg-4",
+					children: "It can’t be edited here without corrupting it."
+				})
+			] }) : /* @__PURE__ */ jsx(CodeEditor, {
+				path: file.path,
+				value: currentText(file),
+				readOnly: !canWrite,
+				onChange: onChange ? (content) => onChange(file.path, content) : void 0,
+				onSave: onSave ? () => onSave(file.path) : void 0
+			}),
+			file.status === "ready" && (file.saving || isDirty(file) || !canWrite) ? /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-2 border-t border-border px-3 py-1",
+				children: file.saving ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Spinner, { className: "size-3 text-fg-4" }), /* @__PURE__ */ jsx("span", {
+					className: "text-label text-fg-4",
+					children: "Saving…"
+				})] }) : !canWrite ? /* @__PURE__ */ jsx("span", {
+					className: "text-label text-fg-4",
+					children: "Read-only — this gateway doesn’t allow writes."
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-label text-fg-3",
+						children: "Unsaved changes"
+					}),
+					/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "xs",
+						onClick: () => onRevert?.(file.path),
+						children: "Revert"
+					}),
+					/* @__PURE__ */ jsxs(Button, {
+						variant: "outline",
+						size: "xs",
+						onClick: () => onSave?.(file.path),
+						children: ["Save", /* @__PURE__ */ jsx("span", {
+							className: "ml-1 text-fg-4",
+							children: "⌘S"
+						})]
+					})
+				] })
+			}) : null
+		]
+	});
+}
+function Centred({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-h-0 flex-1 flex-col items-center justify-center gap-2 p-6",
+		children
+	});
+}
+//#endregion
+//#region src/components/agent/SessionWorkspace.tsx
+const RAIL_MIN = 180;
+const RAIL_MAX = 520;
+/** How little of the agent column the editor may leave. Below this the composer
+* and a line of transcript stop fitting together, which is the point at which the
+* agent has stopped being usable rather than merely small. */
+const AGENT_MIN = 220;
+const EDITOR_MIN = 120;
+/**
+* A VS Code-shaped workspace around a live session: file tree on the left, open
+* files above, the agent below.
+*
+* **Strictly additive.** {@link SessionPanel} is untouched and still the whole
+* session surface on its own — an embedder picks one or the other, and one that
+* has its own file tree keeps using the panel.
+*
+* Two things here are load-bearing and easy to break:
+*
+* 1. **The editor region is absent from the layout when nothing is open**, not
+*    collapsed to zero height. A zero-height pane leaves a draggable splitter and
+*    parks the composer at an odd offset; absence is what makes the agent's
+*    "claims the full column" state actually look like the panel alone.
+* 2. **`SessionPanel` keeps its position in the tree across that transition.** It
+*    holds the WebSocket attach and the entire transcript, so moving it between
+*    parents — or wrapping it conditionally — would remount it and drop the
+*    session's rendered history on the floor the first time someone opens a file.
+*    The conditional children before it are `? :` expressions that leave a null in
+*    their slot, which is exactly what keeps its index stable.
+*/
+function SessionWorkspace({ client, sessionId, header, defaultRailWidth = 260, defaultRailCollapsed, className }) {
+	const { info } = useSessionInfo(client, sessionId);
+	const cwd = info?.cwd;
+	const tree = useHostFileTree(client, cwd);
+	const search = useHostFileSearch(client, cwd);
+	const files = useOpenFiles(client);
+	const { canWrite } = useHostFileRoots(client);
+	useEffect(() => {
+		if (!files.hasUnsaved) return;
+		const warn = (event) => event.preventDefault();
+		window.addEventListener("beforeunload", warn);
+		return () => window.removeEventListener("beforeunload", warn);
+	}, [files.hasUnsaved]);
+	const wide = useIsWide();
+	const [railCollapsed, setRailCollapsed] = useState(defaultRailCollapsed ?? false);
+	const [railWidth, setRailWidth] = useState(defaultRailWidth);
+	const [editorHeight, setEditorHeight] = useState(360);
+	const hasFiles = files.files.length > 0;
+	const overlayRail = !wide;
+	const railOpen = tree.available && !railCollapsed;
+	useEffect(() => {
+		if (overlayRail) setRailCollapsed(true);
+	}, [overlayRail]);
+	const closeTab = useCallback((path) => {
+		const file = files.files.find((f) => f.path === path);
+		if (file && isDirty(file)) {
+			const name = file.name;
+			if (!window.confirm(`${name} has unsaved changes. Close it and lose them?`)) return;
+		}
+		files.close(path);
+	}, [files]);
+	const column = useRef(null);
+	const columnHeight = useElementHeight(column);
+	const editorMax = Math.max(EDITOR_MIN, columnHeight - AGENT_MIN);
+	const [topBar, setTopBar] = useState(null);
+	const hoisted = header === void 0 || topBar === null ? void 0 : typeof header === "function" ? (slots) => createPortal(header(slots), topBar) : createPortal(header, topBar);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "session-workspace",
+		className: cn("flex h-full min-h-0 w-full flex-col overflow-hidden bg-bg", className),
+		children: [header !== void 0 ? /* @__PURE__ */ jsx("div", {
+			ref: setTopBar,
+			className: "shrink-0"
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: "relative flex min-h-0 flex-1",
+			children: [
+				railOpen ? /* @__PURE__ */ jsx(FileTree, {
+					tree,
+					search,
+					activePath: files.activePath,
+					onOpenFile: files.open,
+					onCollapse: () => setRailCollapsed(true),
+					style: { width: overlayRail ? Math.min(railWidth, 320) : railWidth },
+					className: cn("shrink-0 border-r border-border", overlayRail && "absolute inset-y-0 left-0 z-20 shadow-lg")
+				}) : tree.available ? /* @__PURE__ */ jsx("div", {
+					className: "flex w-8 shrink-0 flex-col items-center border-r border-border bg-surface pt-1.5",
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-label": "Show project files",
+						onClick: () => setRailCollapsed(false),
+						children: /* @__PURE__ */ jsx(PanelLeftOpen, { className: "size-4 text-fg-3" })
+					})
+				}) : null,
+				railOpen && !overlayRail ? /* @__PURE__ */ jsx(Splitter, {
+					orientation: "vertical",
+					value: railWidth,
+					onValueChange: setRailWidth,
+					min: RAIL_MIN,
+					max: RAIL_MAX,
+					"aria-label": "Resize the file tree"
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					ref: column,
+					className: "flex min-h-0 min-w-0 flex-1 flex-col",
+					children: [
+						hasFiles ? /* @__PURE__ */ jsxs("div", {
+							className: "flex min-h-0 shrink-0 flex-col overflow-hidden",
+							style: { height: Math.min(editorHeight, editorMax || editorHeight) },
+							children: [/* @__PURE__ */ jsx(EditorTabs, {
+								files: files.files,
+								activePath: files.activePath,
+								onActivate: files.activate,
+								onClose: closeTab
+							}), /* @__PURE__ */ jsx(FileViewer, {
+								file: files.active,
+								canWrite,
+								onChange: files.edit,
+								onSave: (path) => void files.save(path),
+								onRevert: files.revert,
+								onReload: files.reload,
+								onOverwrite: (path) => void files.overwrite(path),
+								onDismissConflict: files.dismissConflict
+							})]
+						}) : null,
+						hasFiles ? /* @__PURE__ */ jsx(Splitter, {
+							orientation: "horizontal",
+							value: Math.min(editorHeight, editorMax || editorHeight),
+							onValueChange: setEditorHeight,
+							min: EDITOR_MIN,
+							max: editorMax,
+							"aria-label": "Resize the open file"
+						}) : null,
+						/* @__PURE__ */ jsx(SessionPanel, {
+							client,
+							sessionId,
+							header: hoisted,
+							className: "min-h-0 flex-1"
+						})
+					]
+				}),
+				overlayRail && railOpen ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Close the file tree",
+					onClick: () => setRailCollapsed(true),
+					className: "absolute inset-0 z-10 bg-black/30"
+				}) : null
+			]
+		})]
+	});
+}
+/** Live height of an element, for a splitter that needs to know how much room it
+* is dividing. Zero until the first observation, which callers treat as
+* "unmeasured" rather than as a real bound. */
+function useElementHeight(ref) {
+	const [height, setHeight] = useState(0);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const observer = new ResizeObserver(([entry]) => {
+			if (entry) setHeight(entry.contentRect.height);
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [ref]);
+	return height;
+}
+/** Whether there is room for a rail beside the content. Presentation only — the
+* workspace's actual state lives in the hooks from `@workerdeck/react`. */
+function useIsWide() {
+	const [wide, setWide] = useState(true);
+	useEffect(() => {
+		const query = window.matchMedia("(min-width: 768px)");
+		const sync = () => setWide(query.matches);
+		sync();
+		query.addEventListener("change", sync);
+		return () => query.removeEventListener("change", sync);
+	}, []);
+	return wide;
+}
+//#endregion
+export { CodeEditor, EditorTabs, FileTree, FileViewer, SessionWorkspace };
+
+//# sourceMappingURL=workspace.mjs.map