@pablopunk/webr 0.2.1 → 0.3.2

package/dist/server/chunks/{App_C2vmjHiY.mjs → App_DlKdj0Cm.mjs}

@@ -1,7 +1,7 @@
 import { S as createAstro, f as renderHead, i as renderComponent, m as createRenderInstruction, p as addAttribute, s as renderSlot, u as renderTemplate } from "./server_CnGYDmxV.mjs";
 import { t as createComponent } from "./compiler_BiU10Vds.mjs";
-import { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Archive, ArchiveRestore, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Check, ChevronDown, ChevronRight, Circle, CircleAlert, CircleCheck, CircleHelp, Command, Copy, Cpu, Folder, FolderTree, GitBranch, ImagePlus, LayoutList, LoaderCircle, MessageCircleQuestion, Mic, Monitor, Moon, PanelBottom, PanelLeft, PanelLeftClose, PanelLeftOpen, PanelRight, Pencil, Plus, Search, Server, Settings2, Square, SquarePen, SquareTerminal, Sun, TerminalSquare, Trash2, TriangleAlert, X } from "lucide-react";
+import { ViewTransition, createContext, memo, useCallback, useContext, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Archive, ArchiveRestore, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bot, Check, ChevronDown, ChevronRight, Circle, CircleAlert, CircleCheck, CircleHelp, Command, Copy, Cpu, Folder, FolderTree, GitBranch, ImagePlus, LayoutList, LoaderCircle, MessageCircleQuestion, Mic, Monitor, Moon, PanelLeft, PanelLeftClose, PanelLeftOpen, Pencil, Plus, Search, Server, Settings2, Square, SquarePen, SquareTerminal, Sun, TerminalSquare, Trash2, TriangleAlert, X } from "lucide-react";
 import { createRoot } from "react-dom/client";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -184,7 +184,8 @@ var shortcutLabels = {
 	previousPane: "Previous pane",
 	toggleSidebar: "Toggle sidebar",
 	newThread: "New thread",
-	toggleTerminal: "Toggle terminal"
+	openTerminal: "New terminal",
+	closePane: "Close pane"
 };
 var defaultShortcuts = {
 	nextThread: "ctrl+j",
@@ -193,14 +194,15 @@ var defaultShortcuts = {
 	previousPane: "ctrl+h",
 	toggleSidebar: "meta+b",
 	newThread: "ctrl+x",
-	toggleTerminal: "ctrl+q"
+	openTerminal: "ctrl+e",
+	closePane: "ctrl+q"
 };
 function getShortcuts() {
 	try {
 		const saved = JSON.parse(localStorage.getItem("webr-shortcuts") ?? "{}");
 		return {
 			...defaultShortcuts,
-			...saved
+			...Object.fromEntries(Object.entries(saved).filter(([action]) => Object.hasOwn(defaultShortcuts, action)))
 		};
 	} catch {
 		return defaultShortcuts;
@@ -335,11 +337,15 @@ var renameProject = (project, name) => post$1("/api/projects/rename", {
 	logicalId: project.logicalId ?? project.id,
 	name
 });
-var toggleThreadTerminal = (thread, direction) => post$1(`/api/threads/${encodeURIComponent(thread.id)}/terminal`, {
+var openThreadTerminal = (thread, afterPaneId) => post$1(`/api/threads/${encodeURIComponent(thread.id)}/panes/terminal`, {
 	machineId: thread.machineId,
-	direction
+	afterPaneId
+});
+var closeThreadPane = (thread, paneId, force) => post$1(`/api/threads/${encodeURIComponent(thread.id)}/panes/close`, {
+	machineId: thread.machineId,
+	paneId,
+	force
 });
-var closeThreadTerminal = (thread) => post$1(`/api/threads/${encodeURIComponent(thread.id)}/terminal/close`, { machineId: thread.machineId });
 var deleteThreadPermanently = (thread) => post$1(`/api/threads/${encodeURIComponent(thread.id)}/delete`, { machineId: thread.machineId });
 var deleteArchivedThreads = () => post$1("/api/archive/delete");
 var plural = (count, one, many) => count === 1 ? one : many;
@@ -351,32 +357,15 @@ function deleteWarning(threads) {
 	if (!worktrees) return `${subject} permanently? This closes ${closes}. Your project files stay untouched.`;
 	return `${subject} permanently? This closes ${closes} and removes ${worktrees === count ? plural(count, "its worktree", "their worktrees") : `${worktrees} ${plural(worktrees, "worktree", "worktrees")}`}, including uncommitted changes.`;
 }
-//#endregion
-//#region src/lib/terminal-split.ts
-var threadAgent = (thread) => thread.panes.find((pane) => pane.kind === "agent") ?? thread.panes[0];
-var threadShell = (thread) => {
-	const main = threadAgent(thread);
-	return thread.panes.find((pane) => pane.kind === "shell" && pane.id !== main?.id);
-};
-var peekSide = (shell, area) => shell.x > area.x && shell.y === area.y ? "right" : "bottom";
-var terminalDirection = (side) => side === "right" ? "right" : "down";
-function hiddenTerminalLayout(thread, layout) {
-	const shell = threadShell(thread);
-	const agent = threadAgent(thread);
-	const shellRect = shell && layout.panes.find((rect) => rect.paneId === shell.id)?.rect;
-	const otherPanes = thread.panes.filter((pane) => pane.id !== shell?.id && pane.id !== agent?.id);
-	if (!thread.terminalHidden || !shell || !agent || !shellRect || otherPanes.length) return void 0;
-	return {
-		shell,
-		agent,
-		side: peekSide(shellRect, layout.area)
-	};
+var canClosePane = (thread, paneId) => thread.panes.length > 1 && thread.panes.some((pane) => pane.id === paneId && pane.kind !== "agent");
+var neighbourPane = (panes, at) => panes[at - 1] ?? panes[at + 1];
+function paneToFocusAfterClosing(panes, windowStart, paneId) {
+	const at = panes.findIndex((pane) => pane.id === paneId);
+	return panes.slice(windowStart, windowStart + 2).find((pane) => pane.id !== paneId) ?? neighbourPane(panes, at);
 }
-function currentTerminalDirection(thread, layouts, narrow) {
-	const shell = threadShell(thread);
-	const layout = layouts.find((layout) => layout.panes.some((rect) => rect.paneId === shell?.id));
-	const rect = layout?.panes.find((rect) => rect.paneId === shell?.id)?.rect;
-	return rect && layout ? terminalDirection(peekSide(rect, layout.area)) : narrow ? "down" : "right";
+function windowStartShowing(count, start, index, size = 2) {
+	const shown = index < 0 ? start : index < start ? index : index >= start + size ? index - size + 1 : start;
+	return Math.max(0, Math.min(shown, count - size));
 }
 function span(name) {
 	const start = performance.now();
@@ -389,7 +378,7 @@ function startPerf() {}
 //#endregion
 //#region src/components/CommandPalette.tsx
 var reportFailure$1 = (error) => alertDialog(error instanceof Error ? error.message : "Herdr could not complete this action.");
-function CommandPalette({ open, onClose, projects, threads, thread, focusedPane, mode, onModeChange, onToggleSidebar, onFocusPane, onTerminalAction, onToggleTerminal, onCloseTerminal }) {
+function CommandPalette({ open, onClose, projects, threads, thread, focusedPane, mode, onModeChange, onToggleSidebar, onFocusPane, onTerminalAction, onOpenTerminal, onClosePane }) {
 	const [query, setQuery] = useState("");
 	const [selected, setSelected] = useState(0);
 	const [shortcuts, setShortcuts] = useState(defaultShortcuts);
@@ -483,26 +472,17 @@ function CommandPalette({ open, onClose, projects, threads, thread, focusedPane,
 					navigator.clipboard.writeText(location.href);
 				}
 			},
-			...thread.bindingState === "attached" ? threadShell(thread) ? [{
-				label: "Toggle terminal",
+			...thread.bindingState === "attached" ? [{
+				label: "New terminal",
 				icon: /* @__PURE__ */ jsx(SquareTerminal, { size: 16 }),
-				shortcut: "toggleTerminal",
-				run: () => onToggleTerminal()
-			}, {
-				label: "Close terminal",
+				shortcut: "openTerminal",
+				run: onOpenTerminal
+			}, ...canClosePane(thread, focusedPane) ? [{
+				label: "Close pane",
 				icon: /* @__PURE__ */ jsx(X, { size: 16 }),
-				detail: "Stops its shell",
-				run: onCloseTerminal
-			}] : [{
-				label: "Toggle terminal (side)",
-				icon: /* @__PURE__ */ jsx(PanelRight, { size: 16 }),
-				shortcut: "toggleTerminal",
-				run: () => onToggleTerminal("right")
-			}, {
-				label: "Toggle terminal (below)",
-				icon: /* @__PURE__ */ jsx(PanelBottom, { size: 16 }),
-				run: () => onToggleTerminal("down")
-			}] : [],
+				shortcut: "closePane",
+				run: onClosePane
+			}] : []] : [],
 			...thread.bindingState === "attached" ? [
 				{
 					label: "Request terminal control",
@@ -565,8 +545,8 @@ function CommandPalette({ open, onClose, projects, threads, thread, focusedPane,
 		onToggleSidebar,
 		onFocusPane,
 		onTerminalAction,
-		onToggleTerminal,
-		onCloseTerminal
+		onOpenTerminal,
+		onClosePane
 	]).filter((command) => `${command.label} ${command.detail ?? ""}`.toLowerCase().includes(query.toLowerCase().trim()));
 	if (!open) return null;
 	const run = (command) => {
@@ -1345,7 +1325,10 @@ var behaviorKey = "webr-new-session-behavior";
 var legacyWorktreeKey = "webr-new-worktree";
 var lastWorktreeKey = (machineId, projectId) => `webr-last-worktree:${machineId}:${projectId}`;
 var isBehavior = (value) => value === "main" || value === "worktree" || value === "remember";
-var behaviorFromLegacySetting = () => localStorage.getItem(legacyWorktreeKey) === "false" ? "main" : "worktree";
+var behaviorFromLegacySetting = () => {
+	const legacy = localStorage.getItem(legacyWorktreeKey);
+	return legacy === null ? "remember" : legacy === "false" ? "main" : "worktree";
+};
 function readNewSessionBehavior() {
 	const stored = localStorage.getItem(behaviorKey);
 	return isBehavior(stored) ? stored : behaviorFromLegacySetting();
@@ -2795,7 +2778,6 @@ function createRuntimeStore(bootstrap) {
 				threads: Object.fromEntries(Object.entries(state.threads).map(([id, thread]) => [id, {
 					...thread,
 					status: "unknown",
-					panes: [],
 					bindingState: "detached"
 				}]))
 			};
@@ -2836,9 +2818,14 @@ function createRuntimeStore(bootstrap) {
 }
 var createUiStore = () => createStore((set) => ({
 	focusedPanes: {},
+	paneWindows: {},
 	focus: (scope, paneId) => set((state) => ({ focusedPanes: {
 		...state.focusedPanes,
 		[scope]: paneId
+	} })),
+	showWindow: (scope, start) => set((state) => ({ paneWindows: {
+		...state.paneWindows,
+		[scope]: start
 	} }))
 }));
 function decodeFrame(packet) {
@@ -3914,7 +3901,7 @@ function themeColors() {
 	};
 }
 var TERMINAL_FONT_FAMILY = "\"JetBrains Mono\", \"Webr Symbols\", ui-monospace, Menlo, monospace";
-var TERMINAL_FONT_SIZE = 13;
+var TERMINAL_FONT_SIZE = 15;
 var loadTerminalFonts = () => typeof document === "undefined" || !document.fonts ? Promise.resolve() : Promise.all([
 	document.fonts.load(`400 ${TERMINAL_FONT_SIZE}px "JetBrains Mono"`),
 	document.fonts.load(`700 ${TERMINAL_FONT_SIZE}px "JetBrains Mono"`),
@@ -3922,6 +3909,7 @@ var loadTerminalFonts = () => typeof document === "undefined" || !document.fonts
 ]).then(() => void 0, () => void 0);
 var FOCUS_IN = "\x1B[I";
 var FOCUS_OUT = "\x1B[O";
+var finiteSize = (size) => size && Number.isFinite(size.cols) && Number.isFinite(size.rows) ? size : void 0;
 function TerminalPane({ pane, machineId, threadId, active, canControl, onFocus }) {
 	const host = useRef(null);
 	const section = useRef(null);
@@ -4000,11 +3988,12 @@ function TerminalPane({ pane, machineId, threadId, active, canControl, onFocus }
 			});
 			const measuredViewport = () => {
 				try {
-					return fit.proposeDimensions();
+					return finiteSize(fit.proposeDimensions());
 				} catch {
 					return;
 				}
 			};
+			const hostIsLaidOut = () => !!host.current?.isConnected && host.current.clientWidth > 0 && host.current.clientHeight > 0;
 			const viewport = () => {
 				const { cols, rows } = measuredViewport() ?? estimatedViewport();
 				return {
@@ -4034,13 +4023,14 @@ function TerminalPane({ pane, machineId, threadId, active, canControl, onFocus }
 			const resize = new ResizeObserver(() => {
 				clearTimeout(timer);
 				timer = setTimeout(() => {
+					if (!hostIsLaidOut()) return;
 					const { cols, rows } = viewport();
 					control.current?.resize(cols, rows);
 				}, 150);
 			});
 			resize.observe(host.current);
 			const claimSize = () => {
-				if (document.visibilityState !== "visible" || !document.hasFocus()) return;
+				if (document.visibilityState !== "visible" || !document.hasFocus() || !hostIsLaidOut()) return;
 				const { cols, rows } = viewport();
 				control.current?.resize(cols, rows, true);
 			};
@@ -4216,70 +4206,6 @@ function TerminalPane({ pane, machineId, threadId, active, canControl, onFocus }
 	});
 }
 //#endregion
-//#region src/components/AdoptTab.tsx
-function AdoptTab({ thread, tabs }) {
-	const [tabId, setTabId] = useState("");
-	const [error, setError] = useState("");
-	const [busy, setBusy] = useState(false);
-	const selected = tabs.find((tab) => tab.tabId === tabId && !tab.bound);
-	return /* @__PURE__ */ jsxs("form", {
-		className: "adoption-picker",
-		onSubmit: async (event) => {
-			event.preventDefault();
-			if (!selected || busy) return;
-			setBusy(true);
-			if (!await confirmDialog(`Bind this thread to ${selected.label} (${selected.tabId}) and its ${selected.panes.length} current terminals without sending the old prompt?`, { confirmLabel: "Bind" })) {
-				setBusy(false);
-				return;
-			}
-			setError("");
-			try {
-				if (!(await fetch(`/api/threads/${encodeURIComponent(thread.id)}/adopt`, {
-					method: "POST",
-					headers: { "Content-Type": "application/json" },
-					body: JSON.stringify({
-						machineId: thread.machineId,
-						terminalIds: selected.panes.map((pane) => pane.terminalId)
-					})
-				})).ok) throw new Error("The tab changed or is already bound; select it again after refresh.");
-			} catch (error) {
-				setError(error instanceof Error ? error.message : "Adoption failed.");
-			} finally {
-				setBusy(false);
-			}
-		},
-		children: [
-			/* @__PURE__ */ jsxs("label", { children: ["Select the current native tab to adopt ", /* @__PURE__ */ jsxs("select", {
-				"aria-label": "Native tab to adopt",
-				value: tabId,
-				onChange: (event) => setTabId(event.target.value),
-				children: [/* @__PURE__ */ jsx("option", {
-					value: "",
-					children: "Select a tab…"
-				}), tabs.map((tab) => /* @__PURE__ */ jsxs("option", {
-					value: tab.tabId,
-					disabled: tab.bound || !tab.panes.length,
-					children: [
-						tab.label,
-						" · ",
-						tab.tabId,
-						tab.bound ? " · Already bound" : ""
-					]
-				}, tab.tabId))]
-			})] }),
-			selected && /* @__PURE__ */ jsx("p", { children: selected.panes.map((pane) => `${pane.title} (${pane.terminalId})`).join(", ") }),
-			/* @__PURE__ */ jsx("button", {
-				disabled: !selected || busy,
-				children: "Adopt without restarting"
-			}),
-			error && /* @__PURE__ */ jsx("p", {
-				role: "alert",
-				children: error
-			})
-		]
-	});
-}
-//#endregion
 //#region src/components/LaunchProgress.tsx
 function LaunchProgress({ thread }) {
 	const failed = launchFailed(thread);
@@ -4327,51 +4253,109 @@ function LaunchProgress({ thread }) {
 	});
 }
 //#endregion
-//#region src/components/ThreadView.tsx
-var PEEK_SIZE = "28px";
-var besidePeek = (side) => side === "right" ? {
-	left: 0,
-	top: 0,
-	width: `calc(100% - ${PEEK_SIZE})`,
-	height: "100%"
-} : {
-	left: 0,
-	top: 0,
-	width: "100%",
-	height: `calc(100% - ${PEEK_SIZE})`
-};
-function TerminalPeek({ side, onOpen }) {
+//#region src/components/PaneStrip.tsx
+var PaneIcon = ({ pane }) => pane.kind === "agent" ? /* @__PURE__ */ jsx(Bot, {
+	size: 14,
+	strokeWidth: 1.8,
+	"aria-hidden": "true"
+}) : /* @__PURE__ */ jsx(TerminalSquare, {
+	size: 14,
+	strokeWidth: 1.8,
+	"aria-hidden": "true"
+});
+function CollapsedPane({ pane, side, onOpen }) {
 	return /* @__PURE__ */ jsx(Tooltip$1, {
-		label: "Show terminal",
-		side: side === "right" ? "left" : "top",
+		label: `Show ${pane.title}`,
+		side: side === "left" ? "right" : "left",
 		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: `terminal-peek is-${side}`,
-			"aria-label": "Show terminal",
+			className: "pane-collapsed",
+			"aria-label": `Show ${pane.title}`,
 			onClick: onOpen,
-			children: [/* @__PURE__ */ jsx(TerminalSquare, {
-				size: 14,
-				strokeWidth: 1.8,
-				"aria-hidden": "true"
-			}), /* @__PURE__ */ jsx("span", { children: "Terminal" })]
+			children: [/* @__PURE__ */ jsx(PaneIcon, { pane }), /* @__PURE__ */ jsx("span", { children: pane.title })]
 		})
 	});
 }
-function ThreadView({ thread, layouts, tabs, connected, canControl, onFocusPane, focusedPane, onToggleTerminal }) {
-	const pane = (item, style) => /* @__PURE__ */ jsx("div", {
-		className: "native-pane-position",
-		style,
-		children: /* @__PURE__ */ jsx(TerminalPane, {
-			pane: item,
-			machineId: thread.machineId,
-			threadId: thread.id,
-			active: focusedPane === item.id,
-			canControl,
-			onFocus: () => onFocusPane(item.id)
-		})
-	}, `${item.id}:${item.terminalId}`);
+var stripShape = (panes, windowStart) => JSON.stringify([windowStart, panes.map((pane) => pane.id)]);
+var panesInShape = (shape, panes) => {
+	const [start, ids] = JSON.parse(shape);
+	return {
+		start,
+		panes: ids.flatMap((id) => panes.filter((pane) => pane.id === id))
+	};
+};
+/** Only a change of order or window runs as a transition, because a view transition covers the live terminals with snapshots while it animates. */
+var useAnimatedShape = (panes, windowStart) => panesInShape(useDeferredValue(stripShape(panes, windowStart)), panes);
+function PaneStrip({ panes: livePanes, windowStart: liveStart, onFocusPane, renderPane }) {
+	const { panes, start } = useAnimatedShape(livePanes, liveStart);
+	const isVisible = (index) => index >= start && index < start + 2;
+	return /* @__PURE__ */ jsx("div", {
+		className: `pane-strip ${panes.length > 1 ? "is-split" : ""}`,
+		children: panes.map((pane, index) => /* @__PURE__ */ jsx(ViewTransition, {
+			default: "pane-move",
+			enter: "pane-enter",
+			exit: "pane-exit",
+			children: isVisible(index) ? /* @__PURE__ */ jsx("div", {
+				className: "pane-slot",
+				children: renderPane(pane)
+			}) : /* @__PURE__ */ jsx(CollapsedPane, {
+				pane,
+				side: index < start ? "left" : "right",
+				onOpen: () => onFocusPane(pane.id)
+			})
+		}, pane.id))
+	});
+}
+function PaneTabs({ panes, focusedPane, onFocusPane, renderPane }) {
+	const shownId = useDeferredValue(focusedPane);
+	const shown = panes.find((pane) => pane.id === shownId) ?? panes[0];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pane-tabbed",
+		children: [panes.length > 1 && /* @__PURE__ */ jsx("div", {
+			className: "pane-tabs",
+			role: "tablist",
+			"aria-label": "Panes",
+			children: panes.map((pane) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				role: "tab",
+				"aria-selected": pane.id === shown?.id,
+				className: "pane-tab",
+				onClick: () => onFocusPane(pane.id),
+				children: [/* @__PURE__ */ jsx(PaneIcon, { pane }), /* @__PURE__ */ jsx("span", { children: pane.title })]
+			}, pane.id))
+		}), shown && /* @__PURE__ */ jsx(ViewTransition, {
+			enter: "pane-enter",
+			exit: "pane-exit",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "pane-slot",
+				role: "tabpanel",
+				children: renderPane(shown)
+			})
+		}, shown.id)]
+	});
+}
+//#endregion
+//#region src/components/ThreadView.tsx
+function ThreadView({ thread, connected, canControl, onFocusPane, focusedPane, windowStart, narrow }) {
+	const detached = connected && thread.bindingState === "detached";
+	useEffect(() => {
+		if (detached) navigate(`/new?project=${encodeURIComponent(thread.projectId)}`);
+	}, [detached, thread.projectId]);
+	const renderPane = (pane) => pane.terminalId ? /* @__PURE__ */ jsx(TerminalPane, {
+		pane,
+		machineId: thread.machineId,
+		threadId: thread.id,
+		active: focusedPane === pane.id,
+		canControl,
+		onFocus: () => onFocusPane(pane.id)
+	}, pane.terminalId) : null;
 	if (connected && (isLaunching(thread) || launchFailed(thread))) return /* @__PURE__ */ jsx(LaunchProgress, { thread });
-	const visibleLayouts = layouts.filter((layout) => layout.panes.some((rect) => thread.panes.some((pane) => pane.id === rect.paneId)));
+	const strip = {
+		panes: thread.panes,
+		focusedPane,
+		onFocusPane,
+		renderPane
+	};
 	return /* @__PURE__ */ jsxs("main", {
 		className: "native-thread-layout",
 		"aria-label": `${thread.title} tab`,
@@ -4379,37 +4363,17 @@ function ThreadView({ thread, layouts, tabs, connected, canControl, onFocusPane,
 			(!connected || thread.bindingState !== "attached") && /* @__PURE__ */ jsx("p", {
 				className: "runtime-notice",
 				role: "status",
-				children: !connected ? "Disconnected; input is disabled." : thread.bindingState === "detached" ? "The saved terminal is not present; explicit adoption is required." : "Waiting for the terminal to attach…"
+				children: !connected ? "Disconnected; input is disabled." : "Waiting for the terminal to attach…"
 			}),
 			connected && thread.bindingState === "attached" && !canControl && /* @__PURE__ */ jsx("p", {
 				className: "runtime-notice",
 				role: "status",
 				children: "Terminal input is unavailable because this Herdr version is not supported."
 			}),
-			connected && thread.bindingState === "detached" && /* @__PURE__ */ jsx(AdoptTab, {
-				thread,
-				tabs
-			}, thread.id),
-			connected && thread.bindingState === "attached" && visibleLayouts.map((layout) => {
-				const hidden = hiddenTerminalLayout(thread, layout);
-				const split = !hidden && layout.panes.filter((rect) => thread.panes.some((item) => item.id === rect.paneId)).length > 1;
-				return /* @__PURE__ */ jsx("div", {
-					className: `native-pane-layout ${split ? "is-split" : ""}`,
-					children: hidden ? [pane(hidden.agent, besidePeek(hidden.side)), /* @__PURE__ */ jsx(TerminalPeek, {
-						side: hidden.side,
-						onOpen: onToggleTerminal
-					}, "terminal-peek")] : thread.panes.map((item) => {
-						const rect = layout.panes.find((rect) => rect.paneId === item.id)?.rect;
-						if (!rect || !layout.area.width || !layout.area.height) return null;
-						return pane(item, {
-							left: `${(rect.x - layout.area.x) / layout.area.width * 100}%`,
-							top: `${(rect.y - layout.area.y) / layout.area.height * 100}%`,
-							width: `${rect.width / layout.area.width * 100}%`,
-							height: `${rect.height / layout.area.height * 100}%`
-						});
-					})
-				}, `${layout.workspaceId}:${layout.tabId}`);
-			})
+			connected && thread.bindingState === "attached" && (narrow ? /* @__PURE__ */ jsx(PaneTabs, { ...strip }) : /* @__PURE__ */ jsx(PaneStrip, {
+				...strip,
+				windowStart
+			}))
 		]
 	});
 }
@@ -4423,6 +4387,30 @@ function appShortcutAction(event, shortcuts) {
 	return Object.entries(shortcuts).find(([, combo]) => combo === keyCombo(event))?.[0];
 }
 //#endregion
+//#region src/client/pane-window.ts
+var NARROW_SCREEN = "(max-width: 760px)";
+function usePaneWindowStart(ui, scope, paneIds, focusedPane) {
+	const stored = useStore(ui, (state) => state.paneWindows[scope] ?? 0);
+	const start = windowStartShowing(paneIds.length, stored, paneIds.indexOf(focusedPane));
+	useEffect(() => {
+		if (start !== stored) ui.getState().showWindow(scope, start);
+	}, [
+		ui,
+		scope,
+		start,
+		stored
+	]);
+	return start;
+}
+var subscribeToNarrowScreen = (onChange) => {
+	if (typeof matchMedia !== "function") return () => {};
+	const media = matchMedia(NARROW_SCREEN);
+	media.addEventListener("change", onChange);
+	return () => media.removeEventListener("change", onChange);
+};
+var isNarrowScreen = () => typeof matchMedia === "function" && matchMedia(NARROW_SCREEN).matches;
+var useNarrowScreen = () => useSyncExternalStore(subscribeToNarrowScreen, isNarrowScreen, () => false);
+//#endregion
 //#region src/client/clear-done-on-visit.ts
 function useClearDoneOnVisit(thread, paneId, enabled) {
 	const isDone = thread?.status === "done";
@@ -4515,32 +4503,37 @@ function RuntimeApp({ page, bootstrap, threadId, projectId }) {
 			window.removeEventListener("popstate", syncCollapsedFromUrl);
 		};
 	}, []);
-	const layouts = thread ? projections[thread.machineId]?.layouts ?? [] : [];
-	const reportTerminalFailure = (error) => void alertDialog(error instanceof Error ? error.message : "Herdr could not change the terminal.");
-	const toggleTerminal = useCallback((direction) => {
-		if (!thread) return;
-		const chosen = direction ?? currentTerminalDirection(thread, layouts, window.matchMedia("(max-width: 760px)").matches);
-		toggleThreadTerminal(thread, chosen).then(({ paneId, hidden }) => setFocusedPane(hidden ? threadAgent(thread)?.id ?? paneId : paneId), reportTerminalFailure);
+	const reportPaneFailure = (error) => void alertDialog(error instanceof Error ? error.message : "Herdr could not change the pane.");
+	const windowStart = usePaneWindowStart(ui, scope, thread?.panes.map((pane) => pane.id) ?? [], focusedPane);
+	const narrow = useNarrowScreen();
+	const openTerminal = useCallback(() => {
+		if (!thread || !focusedPane) return;
+		openThreadTerminal(thread, focusedPane).then(({ paneId }) => setFocusedPane(paneId), reportPaneFailure);
 	}, [
 		thread,
-		layouts,
+		focusedPane,
 		setFocusedPane
 	]);
-	const focusPane = useCallback((paneId) => {
-		if (thread?.terminalHidden && threadShell(thread)?.id === paneId) toggleTerminal();
-		else setFocusedPane(paneId);
+	const closePane = useCallback(async (paneId = focusedPane) => {
+		if (!thread || !canClosePane(thread, paneId)) return;
+		const pane = thread.panes.find((pane) => pane.id === paneId);
+		const next = paneToFocusAfterClosing(thread.panes, windowStart, paneId);
+		try {
+			let result = await closeThreadPane(thread, paneId, false);
+			if (result.busy && await confirmDialog(`${pane.title} is running a process. Close it anyway?`, {
+				confirmLabel: "Close",
+				danger: true
+			})) result = await closeThreadPane(thread, paneId, true);
+			if (result.closed && next) setFocusedPane(next.id);
+		} catch (error) {
+			reportPaneFailure(error);
+		}
 	}, [
 		thread,
-		toggleTerminal,
+		focusedPane,
+		windowStart,
 		setFocusedPane
 	]);
-	const closeTerminal = useCallback(() => {
-		if (!thread) return;
-		closeThreadTerminal(thread).then(() => {
-			const agent = threadAgent(thread);
-			if (agent) setFocusedPane(agent.id);
-		}, reportTerminalFailure);
-	}, [thread, setFocusedPane]);
 	const toggleSidebar = useCallback(() => {
 		if (window.matchMedia("(max-width: 760px)").matches) {
 			setMobileOpen((value) => !value);
@@ -4573,11 +4566,12 @@ function RuntimeApp({ page, bootstrap, threadId, projectId }) {
 			if (!action) return;
 			event.preventDefault();
 			if (action === "toggleSidebar") toggleSidebar();
-			if (action === "toggleTerminal") toggleTerminal();
+			if (action === "openTerminal") openTerminal();
+			if (action === "closePane") closePane();
 			if (action === "newThread") navigate(`/new${thread ? `?project=${encodeURIComponent(thread.projectId)}` : ""}`);
 			if ((action === "nextPane" || action === "previousPane") && thread?.panes.length) {
 				const index = thread.panes.findIndex((pane) => pane.id === focusedPane);
-				focusPane(thread.panes[(index + (action === "nextPane" ? 1 : -1) + thread.panes.length) % thread.panes.length].id);
+				setFocusedPane(thread.panes[(index + (action === "nextPane" ? 1 : -1) + thread.panes.length) % thread.panes.length].id);
 			}
 			if ((action === "nextThread" || action === "previousThread") && threads.length) {
 				const index = threads.findIndex((item) => item.id === thread?.id);
@@ -4592,8 +4586,8 @@ function RuntimeApp({ page, bootstrap, threadId, projectId }) {
 		threads,
 		paletteOpen,
 		toggleSidebar,
-		toggleTerminal,
-		focusPane,
+		openTerminal,
+		closePane,
 		focusedPane,
 		setFocusedPane
 	]);
@@ -4619,13 +4613,12 @@ function RuntimeApp({ page, bootstrap, threadId, projectId }) {
 				children: [
 					page === "thread" && thread && /* @__PURE__ */ jsx(ThreadView, {
 						thread,
-						layouts: projections[thread.machineId]?.layouts ?? [],
-						tabs: projections[thread.machineId]?.availableTabs ?? [],
 						connected: gatewayConnected && !!projections[thread.machineId]?.connected,
 						canControl: !!machines.find((machine) => machine.id === thread.machineId)?.writable,
 						focusedPane,
-						onFocusPane: focusPane,
-						onToggleTerminal: () => toggleTerminal()
+						onFocusPane: setFocusedPane,
+						windowStart,
+						narrow
 					}),
 					page === "new" && /* @__PURE__ */ jsx(NewThreadView, {
 						projects,
@@ -4669,13 +4662,13 @@ function RuntimeApp({ page, bootstrap, threadId, projectId }) {
 				mode,
 				onModeChange: changeMode,
 				onToggleSidebar: toggleSidebar,
-				onFocusPane: focusPane,
+				onFocusPane: setFocusedPane,
 				onTerminalAction: (action) => {
 					const pane = thread?.panes.find((pane) => pane.id === focusedPane);
 					if (thread && pane?.terminalId) terminals.command(thread.machineId, thread.id, pane.terminalId, action);
 				},
-				onToggleTerminal: toggleTerminal,
-				onCloseTerminal: closeTerminal
+				onOpenTerminal: openTerminal,
+				onClosePane: () => void closePane()
 			})
 		]
 	});

package/dist/server/chunks/{_id__BimjoFCd.mjs → _id__yn5rOSmn.mjs}

@@ -1,7 +1,7 @@
 import { r as __exportAll } from "./rolldown-runtime_BMI-E3GI.mjs";
 import { S as createAstro, i as renderComponent, u as renderTemplate } from "./server_CnGYDmxV.mjs";
 import { t as createComponent } from "./compiler_BiU10Vds.mjs";
-import { n as $$Base, t as App } from "./App_C2vmjHiY.mjs";
+import { n as $$Base, t as App } from "./App_DlKdj0Cm.mjs";
 //#region src/pages/threads/[id].astro
 var _id__exports = /* @__PURE__ */ __exportAll({
 	default: () => $$Id,