@agimon-ai/po-template-elegant 0.0.0-alpha.0

package/dist/extensions/web.mjs

@@ -0,0 +1,1264 @@
+import { defineWebPlugin, defineWebTemplate } from "@agimon-ai/po-core/web";
+import { DEFAULT_REPOSITORY_SETTINGS_SECTION, DEFAULT_SETTINGS_SECTION, DashboardRendererProvider, HOST_SLOTS, findTransientTab, pluginActivityGroups, refreshWebPluginCompositions, sessionsStore, setDockOpen, settingsSection, transientTabsStore, uiStore, updateWorkspaceAdmission, useActiveSession, useActiveSessionMeta, useDashboardRoute, useDashboardState, useNoSessions, usePluginSlotProps, useSessionMcp, useWebPluginRegistry, watchDashboardTranscript, webTabs, workspaceAdmissionStore, workspacesStore } from "@agimon-ai/po-web-dashboard";
+import { ActivityDock, AppearanceSettings, CommandPalette, Composer, ContributedSettings, DialogOverlay, ImageSettings, NotificationSettings, PairingApprovalDialog, PluginSettings, PluginSurface, ProviderSettings, RefusedCard, RemoteAccessDialog, RemoteControlSettings, RepositoryWorkspace, SelectionBar, SessionActivity, SessionMcp, SessionRailDialogs, SessionTranscriptView, SettingsMenu, SettingsPanelHost, ThreadView, Timeline, TopBar, WelcomePanel, useSessionRail } from "@agimon-ai/po-web-dashboard/views";
+import { useStore } from "@tanstack/react-store";
+import { useEffect, useRef, useState } from "react";
+import { ActivityIcon, AlertIcon, Avatar, AvatarFallback, AvatarImage, BranchIcon, Button, ChevronUpIcon, CloseIcon, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Dot, Drawer, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, FolderIcon, ForkIcon, GearIcon, Input, Kbd, KebabIcon, LoaderIcon, NavTab, OptionRow, PlusIcon, ShieldIcon, cn } from "@agimon-ai/po-web-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Link, useNavigate } from "@tanstack/react-router";
+//#region src/extensions/(frontend)/template/_components/ElegantFolderBrowser.tsx
+function folderName$1(path) {
+	return path.slice(path.lastIndexOf("/") + 1) || path;
+}
+/** Walks the server's folders inline: up, into a child, or pick the current folder. */
+function ElegantFolderBrowser({ start, listDirectory, onSelect }) {
+	const [target, setTarget] = useState(start);
+	const [listing, setListing] = useState(null);
+	const [error, setError] = useState("");
+	useEffect(() => {
+		let stale = false;
+		listDirectory(target).then((result) => {
+			if (stale) return;
+			if ("error" in result) setError(result.error);
+			else {
+				setError("");
+				setListing(result);
+			}
+		});
+		return () => {
+			stale = true;
+		};
+	}, [target, listDirectory]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "folder-browser",
+		className: "flex flex-col gap-1 rounded-lg border border-doom-border-soft bg-doom-panel/40 p-1.5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1 px-1",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon",
+						"data-testid": "folder-browser-up",
+						title: "parent folder",
+						"aria-label": "parent folder",
+						disabled: listing?.parent === void 0,
+						onClick: () => listing?.parent !== void 0 && setTarget(listing.parent),
+						children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "h-3 w-3" })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate text-sm text-doom-dim",
+						title: listing?.path,
+						children: listing?.path ?? "loading…"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "xs",
+						"data-testid": "folder-browser-select",
+						disabled: listing === null,
+						onClick: () => listing !== null && onSelect(listing.path),
+						children: "use this folder"
+					})
+				]
+			}),
+			error ? /* @__PURE__ */ jsx("p", {
+				className: "px-2 py-1 text-sm text-doom-red",
+				children: error
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				role: "listbox",
+				"aria-label": "folders",
+				className: "max-h-40 overflow-y-auto",
+				children: [listing !== null && listing.directories.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "px-2 py-1 text-sm text-doom-dim",
+					children: "no folders here"
+				}) : null, listing?.directories.map((directory) => /* @__PURE__ */ jsx(OptionRow, {
+					density: "compact",
+					"data-testid": "folder-browser-entry",
+					onClick: () => setTarget(directory),
+					className: "w-full px-2.5 py-1 ",
+					children: folderName$1(directory)
+				}, directory))]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/template/_components/ElegantAddWorkspaceDialog.tsx
+const SUGGESTION_DEBOUNCE_MS = 120;
+const NO_HIGHLIGHT = -1;
+const TRAILING_SEPARATORS = /\/+$/u;
+function folderName(path) {
+	const trimmed = path.trim().replace(TRAILING_SEPARATORS, "");
+	return trimmed.slice(trimmed.lastIndexOf("/") + 1);
+}
+/** Adds a workspace by name, by folder, or both; a name alone gets a new default folder. */
+function ElegantAddWorkspaceDialog({ suggestedPaths, actions }) {
+	const draft = useStore(workspaceAdmissionStore, (state) => state);
+	const { name, nameEdited, pending: busy, error } = draft;
+	const path = draft.path ?? suggestedPaths[0] ?? "";
+	const setName = (name) => updateWorkspaceAdmission({ name });
+	const setNameEdited = (nameEdited) => updateWorkspaceAdmission({ nameEdited });
+	const setPath = (path) => updateWorkspaceAdmission({ path });
+	const [browsing, setBrowsing] = useState(false);
+	const [suggestions, setSuggestions] = useState([]);
+	const [highlight, setHighlight] = useState(NO_HIGHLIGHT);
+	const pathInput = useRef(null);
+	const shownName = nameEdited ? name : folderName(path);
+	useEffect(() => {
+		const typed = path.trim();
+		if (typed === "") return;
+		let stale = false;
+		const timer = setTimeout(async () => {
+			const found = await actions.searchDirectories(typed);
+			if (stale) return;
+			setSuggestions(found.filter((directory) => directory !== typed));
+			setHighlight(NO_HIGHLIGHT);
+		}, SUGGESTION_DEBOUNCE_MS);
+		return () => {
+			stale = true;
+			clearTimeout(timer);
+		};
+	}, [path, actions]);
+	const changePath = (next) => {
+		setPath(next);
+		if (next.trim() === "") setSuggestions([]);
+	};
+	const pick = (directory) => {
+		changePath(`${directory}/`);
+		pathInput.current?.focus();
+	};
+	const trimmedPath = path.trim().replace(TRAILING_SEPARATORS, "") || (path.trim() === "" ? "" : "/");
+	const canSubmit = !busy && (trimmedPath !== "" || shownName.trim() !== "");
+	const submit = async () => {
+		if (!canSubmit) return;
+		await actions.addWorkspace({
+			name: shownName.trim(),
+			...trimmedPath === "" ? {} : { path: trimmedPath }
+		});
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: true,
+		onOpenChange: (next) => !next && !busy && actions.closeAddWorkspace(),
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			width: "md",
+			"data-testid": "add-workspace-dialog",
+			"aria-describedby": void 0,
+			children: [/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "add workspace" }) }), /* @__PURE__ */ jsxs(DialogBody, { children: [
+				/* @__PURE__ */ jsxs("label", {
+					htmlFor: "add-workspace-name",
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-base font-medium text-doom-dim",
+						children: "name"
+					}), /* @__PURE__ */ jsx(Input, {
+						id: "add-workspace-name",
+						"data-testid": "add-workspace-name",
+						value: shownName,
+						autoFocus: true,
+						onChange: (event) => {
+							setNameEdited(true);
+							setName(event.target.value);
+						},
+						onKeyDown: (event) => {
+							if (event.key === "Enter") submit();
+						},
+						placeholder: "my-project"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					htmlFor: "add-workspace-root",
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "text-base font-medium text-doom-dim",
+						children: ["folder ", /* @__PURE__ */ jsx("span", {
+							className: "text-doom-dim",
+							children: "(optional; type a path or browse)"
+						})]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ jsx(Input, {
+							id: "add-workspace-root",
+							ref: pathInput,
+							"data-testid": "add-workspace-root",
+							value: path,
+							onChange: (event) => changePath(event.target.value),
+							onKeyDown: (event) => {
+								if (event.key === "ArrowDown" && suggestions.length > 0) {
+									event.preventDefault();
+									setHighlight((current) => (current + 1) % suggestions.length);
+								} else if (event.key === "ArrowUp" && suggestions.length > 0) {
+									event.preventDefault();
+									setHighlight((current) => current <= 0 ? suggestions.length - 1 : current - 1);
+								} else if (event.key === "Enter") {
+									const chosen = highlight === NO_HIGHLIGHT ? void 0 : suggestions[highlight];
+									if (chosen === void 0) submit();
+									else pick(chosen);
+								}
+							},
+							placeholder: "~/workspace/my-project",
+							className: "min-w-0 flex-1"
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: browsing ? "subtle" : "outline",
+							size: "md",
+							"data-testid": "add-workspace-browse",
+							"aria-pressed": browsing,
+							onClick: () => setBrowsing((open) => !open),
+							children: "browse"
+						})]
+					})]
+				}),
+				browsing ? /* @__PURE__ */ jsx(ElegantFolderBrowser, {
+					...trimmedPath.startsWith("/") ? { start: trimmedPath } : {},
+					listDirectory: actions.listDirectory,
+					onSelect: (selected) => {
+						changePath(selected);
+						setBrowsing(false);
+					}
+				}) : suggestions.length > 0 ? /* @__PURE__ */ jsx("div", {
+					role: "listbox",
+					"aria-label": "matching directories",
+					"data-testid": "add-workspace-suggestions",
+					className: "max-h-40 overflow-y-auto rounded-lg border border-doom-border-soft bg-doom-panel/40 p-1.5",
+					children: suggestions.map((directory, index) => /* @__PURE__ */ jsx(OptionRow, {
+						density: "compact",
+						active: index === highlight,
+						"data-testid": "add-workspace-suggestion",
+						onMouseDown: (event) => event.preventDefault(),
+						onMouseEnter: () => setHighlight(index),
+						onClick: () => pick(directory),
+						className: "w-full px-2.5 py-1 ",
+						children: directory
+					}, directory))
+				}) : null,
+				suggestedPaths.length > 0 ? /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-1",
+					children: suggestedPaths.slice(0, 4).map((suggested) => /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "xs",
+						onClick: () => changePath(suggested),
+						children: suggested
+					}, suggested))
+				}) : null,
+				trimmedPath === "" && shownName.trim() !== "" ? /* @__PURE__ */ jsxs("p", {
+					"data-testid": "add-workspace-default-hint",
+					className: "text-sm text-doom-dim",
+					children: ["creates ~/.po/workspace/", shownName.trim()]
+				}) : null,
+				error ? /* @__PURE__ */ jsx("pre", {
+					className: "max-h-28 overflow-y-auto rounded border border-doom-edge-red bg-doom-tint-red/40 px-2.5 py-2 text-sm whitespace-pre-wrap text-doom-red",
+					children: error
+				}) : null,
+				/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					onClick: () => actions.closeAddWorkspace(),
+					disabled: busy,
+					children: "cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					"data-testid": "add-workspace-confirm",
+					onClick: () => void submit(),
+					disabled: !canSubmit,
+					children: busy ? "adding…" : "add workspace"
+				})] })
+			] })]
+		})
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/template/_components/ElegantPendingSetup.tsx
+/** A setup-only reservation: no runtime, so it offers removal and nothing else. */
+function ElegantPendingSetup({ sessionId, setup, actions }) {
+	const key = JSON.stringify([
+		"rail/setup",
+		sessionId,
+		setup.id
+	]);
+	const [busy, setBusy, busyState] = useDashboardState(`${key}/busy`, false);
+	const [error, setError] = useDashboardState(`${key}/error`, "");
+	const remove = async () => {
+		if (busyState.state) return;
+		setBusy(true);
+		setError("");
+		const result = await actions.removePendingSetup(sessionId, setup.id);
+		setBusy(false);
+		if (result !== void 0) setError(result.error);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": `pending-session-${setup.id}`,
+		className: "ml-9 flex flex-col gap-0.5 rounded-lg border border-dashed border-doom-border-soft px-3 py-2",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate text-base font-semibold text-doom-hi",
+					children: setup.name
+				}), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon",
+						title: "session setup actions",
+						disabled: busy,
+						"data-testid": `pending-session-menu-${setup.id}`,
+						children: /* @__PURE__ */ jsx(KebabIcon, { className: "h-3 w-3" })
+					})
+				}), /* @__PURE__ */ jsx(DropdownMenuContent, { children: /* @__PURE__ */ jsx(DropdownMenuItem, {
+					variant: "destructive",
+					onSelect: () => void remove(),
+					children: "remove setup"
+				}) })] })]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: setup.failed ? "text-sm text-doom-red" : "text-sm text-doom-dim",
+				children: setup.status
+			}),
+			setup.recovery ? /* @__PURE__ */ jsx("p", {
+				role: setup.failed ? "alert" : void 0,
+				className: "text-sm text-doom-dim",
+				children: setup.recovery
+			}) : null,
+			error ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-sm text-doom-red",
+				children: error
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/template/_components/ElegantSessionCard.tsx
+/** A soft tile led by the persona avatar, with the branch as a quiet caption. */
+function ElegantSessionCard({ session, actions }) {
+	const key = `rail/session/${session.id}`;
+	const [mode, setMode] = useDashboardState(`${key}/mode`, "view");
+	const [draft, setDraft] = useDashboardState(`${key}/draft`, "");
+	const [removeError, setRemoveError] = useDashboardState(`${key}/error`, "");
+	const [, setRemoving, removingState] = useDashboardState(`${key}/removing`, false);
+	const modeRef = useRef(mode);
+	const enterMode = (next) => {
+		modeRef.current = next;
+		setMode(next);
+	};
+	const { active } = session;
+	const error = removeError || session.error;
+	const tileClass = active ? "rounded-lg border border-doom-edge-green bg-doom-tint-green px-3 hover:bg-doom-tint-green" : "rounded-lg border border-transparent px-3 hover:bg-doom-panel";
+	const failed = session.status.startsWith("failed") || session.status.includes(" failed");
+	const running = session.status.startsWith("running");
+	const commitRename = () => {
+		actions.renameSession(session.id, draft);
+		enterMode("view");
+	};
+	const remove = async () => {
+		if (removingState.state) return;
+		setRemoving(true);
+		enterMode("view");
+		setRemoveError("");
+		const result = await actions.removeSession(session.id);
+		setRemoving(false);
+		if (result !== void 0) setRemoveError(result.error);
+	};
+	const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("span", {
+			className: "flex w-full min-w-0 items-start gap-2.5",
+			children: [/* @__PURE__ */ jsxs(Avatar, {
+				"data-testid": session.profile ? "session-avatar" : void 0,
+				"aria-label": session.profile?.label ?? "Po",
+				title: session.profile?.label,
+				className: "size-8 shrink-0 rounded-full",
+				children: [session.profile?.avatarUrl ? /* @__PURE__ */ jsx(AvatarImage, {
+					src: session.profile.avatarUrl,
+					alt: ""
+				}) : null, /* @__PURE__ */ jsx(AvatarFallback, {
+					className: "bg-doom-tint-green text-xs font-semibold text-doom-green",
+					children: session.profile?.initials ?? "PO"
+				})]
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 items-start gap-2",
+					children: [
+						session.nested && session.provenance === "workflow-session" ? /* @__PURE__ */ jsx(ActivityIcon, {
+							"aria-label": "workflow session",
+							className: `mt-1 size-3 shrink-0 ${active ? "text-doom-green" : "text-doom-faint"}`
+						}) : session.nested && session.provenance ? /* @__PURE__ */ jsx(ForkIcon, {
+							"aria-label": session.provenance === "worktree" ? "automatic per-conversation worktree" : session.provenance,
+							className: `mt-1 size-3 shrink-0 ${active ? "text-doom-green" : "text-doom-faint"}`
+						}) : null,
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 text-base font-semibold break-words text-doom-hi",
+							children: session.name || "Untitled"
+						}),
+						session.ordinal <= 9 ? /* @__PURE__ */ jsx("span", {
+							title: `press ${String(session.ordinal)} to focus`,
+							className: "grid size-5 shrink-0 place-items-center rounded-full bg-doom-panel text-2xs text-doom-dim transition-opacity group-focus-within:opacity-0 group-hover:opacity-0",
+							children: session.ordinal
+						}) : null
+					]
+				}), /* @__PURE__ */ jsxs("span", {
+					className: `flex min-w-0 items-start gap-1.5 text-sm leading-snug ${failed ? "text-doom-red" : running ? "text-doom-yellow" : active ? "text-doom-text" : "text-doom-dim"}`,
+					children: [session.awaitingInput ? /* @__PURE__ */ jsx(AlertIcon, {
+						"data-testid": "session-awaiting-input",
+						"aria-label": "Waiting for your input",
+						className: "mt-0.5 size-3 shrink-0 text-doom-magenta"
+					}) : running ? /* @__PURE__ */ jsx(LoaderIcon, {
+						"aria-hidden": true,
+						className: "mt-0.5 size-3 shrink-0 animate-spin"
+					}) : failed ? /* @__PURE__ */ jsx(AlertIcon, {
+						"aria-hidden": true,
+						className: "mt-0.5 size-3 shrink-0"
+					}) : null, /* @__PURE__ */ jsx("span", {
+						"data-testid": "session-status",
+						className: active ? "line-clamp-2" : "truncate",
+						children: session.status
+					})]
+				})]
+			})]
+		}),
+		session.git ? /* @__PURE__ */ jsxs("span", {
+			"data-testid": "session-branch",
+			className: "flex min-w-0 items-center gap-1.5 pl-10.5 text-sm text-doom-dim",
+			children: [
+				/* @__PURE__ */ jsx(BranchIcon, { className: `size-3 shrink-0 ${active ? "text-doom-green" : ""}` }),
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate font-mono",
+					children: session.git.branch
+				}),
+				session.git.dirty ? /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 text-doom-yellow",
+					children: "modified"
+				}) : null
+			]
+		}) : null,
+		error ? /* @__PURE__ */ jsx("span", {
+			"data-testid": "session-error",
+			className: "line-clamp-3 text-sm break-words text-doom-red",
+			children: error
+		}) : null
+	] });
+	const menuOpen = mode === "menu";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: cn("group relative", session.nested && "pl-5"),
+		"data-testid": `session-card-${session.id}`,
+		"data-active": active,
+		"data-nested": session.nested,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "card",
+				"data-testid": `session-open-${session.id}`,
+				onClick: () => actions.openSession(session.id),
+				className: tileClass,
+				children: body
+			}),
+			mode === "view" || menuOpen ? /* @__PURE__ */ jsx("div", {
+				className: `absolute top-2 right-2 transition-opacity ${menuOpen ? "opacity-100" : "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"}`,
+				children: /* @__PURE__ */ jsxs(DropdownMenu, {
+					open: menuOpen,
+					onOpenChange: (next) => {
+						const current = modeRef.current;
+						enterMode(next ? "menu" : current === "menu" ? "view" : current);
+					},
+					children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "icon",
+							"data-testid": `session-menu-${session.id}`,
+							title: "session actions",
+							className: "text-doom-dim hover:text-doom-hi",
+							children: /* @__PURE__ */ jsx(KebabIcon, { className: "h-3 w-3" })
+						})
+					}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+						"data-testid": `session-menu-list-${session.id}`,
+						onCloseAutoFocus: (event) => {
+							if (modeRef.current !== "view") event.preventDefault();
+						},
+						children: [
+							actions.renderSessionMenuItems(session.id),
+							/* @__PURE__ */ jsx(DropdownMenuItem, {
+								"data-testid": `session-rename-${session.id}`,
+								onSelect: () => {
+									setDraft(session.name);
+									enterMode("rename");
+								},
+								children: "rename"
+							}),
+							/* @__PURE__ */ jsx(DropdownMenuItem, {
+								"data-testid": `session-resume-${session.id}`,
+								onSelect: () => actions.resumeSession(session.id),
+								children: "resume"
+							}),
+							/* @__PURE__ */ jsx(DropdownMenuItem, {
+								"data-testid": `session-restart-${session.id}`,
+								disabled: session.restarting || session.restartBlocked === true,
+								onSelect: () => actions.restartSession(session.id),
+								children: "restart"
+							}),
+							/* @__PURE__ */ jsx(DropdownMenuItem, {
+								variant: "destructive",
+								"data-testid": `session-stop-${session.id}`,
+								onSelect: () => enterMode("confirm"),
+								children: "remove"
+							})
+						]
+					})]
+				})
+			}) : null,
+			/* @__PURE__ */ jsx(Dialog, {
+				open: mode === "rename",
+				onOpenChange: (next) => !next && enterMode("view"),
+				children: /* @__PURE__ */ jsxs(DialogContent, {
+					width: "sm",
+					"data-testid": `session-rename-dialog-${session.id}`,
+					"aria-describedby": void 0,
+					children: [/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "rename session" }) }), /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsxs("form", {
+						className: "flex flex-col gap-3",
+						onSubmit: (event) => {
+							event.preventDefault();
+							commitRename();
+						},
+						children: [/* @__PURE__ */ jsx(Input, {
+							"data-testid": `session-name-input-${session.id}`,
+							"aria-label": "session name",
+							value: draft,
+							autoFocus: true,
+							onChange: (event) => setDraft(event.target.value)
+						}), /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "outline",
+							size: "md",
+							"data-testid": `session-rename-cancel-${session.id}`,
+							onClick: () => enterMode("view"),
+							children: "cancel"
+						}), /* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							variant: "primary",
+							size: "md",
+							"data-testid": `session-rename-confirm-${session.id}`,
+							disabled: draft.trim() === "",
+							children: "rename"
+						})] })]
+					}) })]
+				})
+			}),
+			/* @__PURE__ */ jsx(Dialog, {
+				open: mode === "confirm",
+				onOpenChange: (next) => !next && enterMode("view"),
+				children: /* @__PURE__ */ jsxs(DialogContent, {
+					width: "sm",
+					"data-testid": `session-stop-dialog-${session.id}`,
+					"aria-describedby": void 0,
+					children: [/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "remove session" }) }), /* @__PURE__ */ jsxs(DialogBody, { children: [/* @__PURE__ */ jsxs(DialogDescription, { children: [
+						"this stops ",
+						/* @__PURE__ */ jsx("span", {
+							className: "font-semibold text-doom-hi",
+							children: session.name || "untitled"
+						}),
+						" and removes it from the list. anything it is running ends now, but its saved history remains available to resume."
+					] }), /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "md",
+						"data-testid": `session-stop-cancel-${session.id}`,
+						autoFocus: true,
+						onClick: () => enterMode("view"),
+						children: "cancel"
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "danger",
+						size: "md",
+						"data-testid": `session-stop-confirm-${session.id}`,
+						onClick: () => void remove(),
+						children: "remove"
+					})] })] })]
+				})
+			})
+		]
+	}), session.pendingSetups.map((setup) => /* @__PURE__ */ jsx(ElegantPendingSetup, {
+		sessionId: session.id,
+		setup,
+		actions
+	}, `setup:${setup.id}`))] });
+}
+//#endregion
+//#region src/extensions/(frontend)/template/_components/ElegantWorkspaceGroup.tsx
+/** A folder heading over its sessions; only a hover tint marks the row. */
+function ElegantWorkspaceGroup({ workspace, actions }) {
+	const key = `rail/workspace/${workspace.id}`;
+	const [removeOpen, setRemoveOpen] = useDashboardState(`${key}/open`, false);
+	const [removeError, setRemoveError] = useDashboardState(`${key}/error`, "");
+	const [removing, setRemoving, removingState] = useDashboardState(`${key}/removing`, false);
+	const { id, name, root, available, legacy } = workspace;
+	const unregister = async () => {
+		if (removingState.state) return;
+		setRemoving(true);
+		setRemoveError("");
+		const result = await actions.deleteWorkspace(id);
+		setRemoving(false);
+		if (result !== void 0) setRemoveError(result.error);
+		else setRemoveOpen(false);
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		"data-testid": `workspace-group-${id}`,
+		"data-available": available,
+		className: "flex flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-start gap-2.5 rounded-md px-2 py-1 transition-colors hover:bg-doom-panel/60",
+				children: [
+					/* @__PURE__ */ jsx(FolderIcon, {
+						"aria-hidden": true,
+						className: "mt-0.5 size-4 shrink-0 text-doom-dim"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-1 flex-col",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "truncate text-base font-semibold text-doom-hi",
+							children: name
+						}), /* @__PURE__ */ jsx("p", {
+							className: "truncate font-mono text-sm text-doom-dim",
+							title: root,
+							children: root
+						})]
+					}),
+					legacy ? null : /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-0.5",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "icon",
+							"data-testid": `workspace-new-session-${id}`,
+							title: "New session",
+							"aria-label": `New session in ${name}`,
+							disabled: !available,
+							onClick: () => actions.createSession(id),
+							className: "text-doom-faint hover:text-doom-hi",
+							children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" })
+						}), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "icon",
+								"data-testid": `workspace-menu-${id}`,
+								title: "Workspace actions",
+								"aria-label": `${name} actions`,
+								className: "text-doom-faint hover:text-doom-hi",
+								children: /* @__PURE__ */ jsx(KebabIcon, { className: "size-3.5" })
+							})
+						}), /* @__PURE__ */ jsxs(DropdownMenuContent, { children: [
+							/* @__PURE__ */ jsx(DropdownMenuItem, {
+								disabled: !available,
+								onSelect: () => actions.resumeInWorkspace(id),
+								children: "resume session"
+							}),
+							/* @__PURE__ */ jsx(DropdownMenuItem, {
+								disabled: !available,
+								onSelect: () => actions.openWorkspaceSettings(id),
+								children: "workspace settings"
+							}),
+							/* @__PURE__ */ jsx(DropdownMenuItem, {
+								variant: "destructive",
+								"data-testid": `workspace-delete-${id}`,
+								onSelect: () => {
+									setRemoveError("");
+									setRemoveOpen(true);
+								},
+								children: "delete workspace"
+							})
+						] })] })]
+					})
+				]
+			}),
+			!available ? /* @__PURE__ */ jsx("p", {
+				className: "px-9 text-sm text-doom-red",
+				children: "Workspace unavailable"
+			}) : null,
+			workspace.sessions.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-1",
+				children: workspace.sessions.map((session) => /* @__PURE__ */ jsx(ElegantSessionCard, {
+					session,
+					actions
+				}, session.id))
+			}) : available ? /* @__PURE__ */ jsx("p", {
+				className: "px-9 pb-1 text-sm text-doom-dim",
+				children: "No sessions yet. Start or resume one."
+			}) : null,
+			/* @__PURE__ */ jsx(Dialog, {
+				open: removeOpen,
+				onOpenChange: (next) => !next && !removing && setRemoveOpen(false),
+				children: /* @__PURE__ */ jsxs(DialogContent, {
+					width: "sm",
+					"data-testid": `workspace-delete-dialog-${id}`,
+					"aria-describedby": void 0,
+					children: [/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "delete workspace" }) }), /* @__PURE__ */ jsxs(DialogBody, { children: [
+						/* @__PURE__ */ jsxs(DialogDescription, { children: [
+							"this unregisters ",
+							/* @__PURE__ */ jsx("span", {
+								className: "font-semibold text-doom-hi",
+								children: name
+							}),
+							" from Po only. files at",
+							" ",
+							/* @__PURE__ */ jsx("code", { children: root }),
+							" stay on disk. its sessions must be removed first."
+						] }),
+						removeError ? /* @__PURE__ */ jsx("p", {
+							"data-testid": `workspace-delete-error-${id}`,
+							className: "text-sm text-doom-red",
+							children: removeError
+						}) : null,
+						/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "md",
+							"data-testid": `workspace-delete-cancel-${id}`,
+							disabled: removing,
+							autoFocus: true,
+							onClick: () => setRemoveOpen(false),
+							children: "cancel"
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "danger",
+							size: "md",
+							"data-testid": `workspace-delete-confirm-${id}`,
+							disabled: removing,
+							onClick: () => void unregister(),
+							children: removing ? "deleting…" : "delete"
+						})] })
+					] })]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/template/_components/ElegantRail.tsx
+/** The drawer's session list: brand, workspaces with their sessions, remote access, and settings. */
+function ElegantRail({ rail, onClose }) {
+	const { remote, actions } = rail;
+	const live = remote.status === "on" || remote.status === "starting";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-full flex-col",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2 px-5 pt-4 pb-3",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-2.5",
+					"aria-label": "Po",
+					children: [/* @__PURE__ */ jsx("img", {
+						src: "/favicon.svg",
+						alt: "",
+						"aria-hidden": "true",
+						className: "size-9 rounded-lg"
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "text-2xl font-semibold text-doom-hi",
+						children: "Po"
+					})]
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ jsxs(Button, {
+						variant: remote.status === "failed" ? "danger-outline" : "outline",
+						size: "sm",
+						"data-testid": "remote-access-open",
+						"aria-label": `Remote access is ${remote.status}`,
+						onClick: actions.openRemoteAccess,
+						className: `gap-1.5 rounded-md ${remote.status === "failed" ? "" : "bg-doom-panel"}`,
+						children: [live ? /* @__PURE__ */ jsx(Dot, {
+							tone: "yellow",
+							pulse: true,
+							"data-testid": "remote-access-live"
+						}) : /* @__PURE__ */ jsx(ShieldIcon, { className: "size-3.5" }), "Remote access"]
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon",
+						"data-testid": "mobile-sessions-close",
+						title: "Hide sessions",
+						"aria-label": "Hide sessions",
+						onClick: onClose,
+						className: "text-doom-dim",
+						children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-3.5" })
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between px-5 pt-3 pb-2",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-lg font-semibold text-doom-hi",
+					children: "Workspaces"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon",
+					"data-testid": "add-workspace-open",
+					title: "Add workspace",
+					"aria-label": "Add workspace",
+					onClick: actions.openAddWorkspace,
+					className: "text-doom-faint hover:text-doom-hi",
+					children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" })
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-4 px-3 pb-3",
+				children: [rail.workspaces.map((workspace) => /* @__PURE__ */ jsx(ElegantWorkspaceGroup, {
+					workspace,
+					actions
+				}, workspace.id)), rail.workspaces.length === 0 ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-3 rounded-lg border border-dashed border-doom-border px-4 py-5",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-doom-dim",
+						children: "Add a folder to start working with Po."
+					}), /* @__PURE__ */ jsxs(Button, {
+						variant: "outline",
+						size: "md",
+						"data-testid": "add-workspace-empty",
+						onClick: actions.openAddWorkspace,
+						className: "justify-start gap-2 bg-doom-panel",
+						children: [/* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" }), "Add workspace"]
+					})]
+				}) : null]
+			}),
+			rail.pluginContent,
+			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "sticky bottom-0 mt-auto shrink-0 bg-doom-rail",
+				children: [remote.status === "off" ? null : /* @__PURE__ */ jsxs("div", {
+					"data-testid": "remote-banner",
+					className: `flex items-center gap-2 border-t border-doom-border-soft px-4 py-2 text-sm ${remote.status === "failed" ? "bg-doom-tint-red text-doom-red" : "bg-doom-tint-yellow text-doom-yellow"}`,
+					children: [
+						/* @__PURE__ */ jsx(Dot, { tone: remote.status === "failed" ? "red" : "yellow" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: remote.status === "failed" ? `Remote access failed: ${remote.error ?? "the tunnel stopped"}` : `Remote access ${remote.status === "starting" ? "starting" : "on"}${remote.host === void 0 ? "" : ` · ${remote.host}`} · ${String(remote.deviceCount)} device${remote.deviceCount === 1 ? "" : "s"}`
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "xs",
+							"data-testid": "remote-banner-open",
+							onClick: actions.openRemoteAccess,
+							children: "Manage"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "xs",
+							"data-testid": "remote-banner-off",
+							onClick: actions.turnRemoteAccessOff,
+							children: "Turn off"
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1 border-t border-doom-border-soft px-3 py-3",
+					children: [/* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "md",
+						"data-testid": "settings-open",
+						onClick: actions.openSettings,
+						className: "justify-start gap-2.5 px-2 text-doom-text",
+						children: [/* @__PURE__ */ jsx(GearIcon, { className: "size-4 text-doom-dim" }), "Settings"]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "px-2 text-sm text-doom-dim max-sm:hidden",
+						children: [
+							/* @__PURE__ */ jsx(Kbd, {
+								className: "bg-doom-panel",
+								children: "ctrl+k"
+							}),
+							" commands · ",
+							/* @__PURE__ */ jsx(Kbd, {
+								className: "bg-doom-panel",
+								children: "ctrl+t"
+							}),
+							" new session"
+						]
+					})]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/template/_components/ElegantLayout.tsx
+/** A conversation-first frame, with the same host capabilities available on demand. */
+function ElegantLayout({ view, slots, rail, navigationOpen, mobileActivityOpen, onNavigationOpenChange, onMobileActivityOpenChange }) {
+	const conversation = view === "conversation" || view === "welcome";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex h-full min-w-0 flex-col overflow-hidden bg-doom-bg",
+		children: [
+			/* @__PURE__ */ jsx(Drawer, {
+				open: navigationOpen,
+				onOpenChange: onNavigationOpenChange,
+				side: "left",
+				title: "Sessions",
+				showHeader: false,
+				"data-testid": "session-rail-panel",
+				backdropTestId: "mobile-drawer-backdrop",
+				className: "w-[min(340px,calc(100vw-48px))] border-doom-border-soft",
+				children: /* @__PURE__ */ jsx(ElegantRail, {
+					rail,
+					onClose: () => onNavigationOpenChange(false)
+				})
+			}),
+			slots.notices,
+			slots.header({
+				navigationToggle: "always",
+				activityToggle: "always"
+			}),
+			/* @__PURE__ */ jsx("main", {
+				className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
+				children: /* @__PURE__ */ jsxs("div", {
+					"data-testid": "template-content",
+					className: conversation ? "mx-auto flex min-h-0 w-full max-w-[960px] flex-1 flex-col overflow-hidden px-2 sm:px-6" : "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
+					children: [
+						slots.content,
+						slots.composer == null ? null : /* @__PURE__ */ jsx("div", {
+							className: "mb-2 shrink-0 sm:mb-4",
+							children: slots.composer
+						}),
+						slots.controls == null ? null : /* @__PURE__ */ jsxs("details", {
+							className: "shrink-0 px-3 pb-3 text-sm text-doom-dim",
+							children: [/* @__PURE__ */ jsx("summary", {
+								"data-testid": "template-controls-toggle",
+								className: "cursor-pointer rounded-sm px-1 py-1 focus-visible:outline focus-visible:outline-doom-blue",
+								children: "Session controls"
+							}), slots.controls]
+						})
+					]
+				})
+			}),
+			slots.activity == null ? null : /* @__PURE__ */ jsx(Drawer, {
+				open: mobileActivityOpen,
+				onOpenChange: onMobileActivityOpenChange,
+				side: "right",
+				title: "Activity",
+				showHeader: false,
+				backdropTestId: "mobile-activity-backdrop",
+				className: "w-auto max-w-[calc(100vw-48px)]",
+				children: slots.activity
+			}),
+			rail.addWorkspace ? /* @__PURE__ */ jsx(ElegantAddWorkspaceDialog, {
+				suggestedPaths: rail.addWorkspace.suggestedPaths,
+				actions: rail.actions
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/template/_components/ElegantConversation.tsx
+function ElegantConversation() {
+	useWebPluginRegistry();
+	const dockOpen = useStore(uiStore, (state) => state.dockOpen);
+	const [railOpen, setRailOpen] = useState(false);
+	const [mobileActivityOpen, setMobileActivityOpen] = useState(false);
+	const { sessionId, tabId } = useDashboardRoute();
+	const slotProps = usePluginSlotProps(sessionId ?? null);
+	const sessionWorkspaceId = useStore(sessionsStore, (state) => sessionId === void 0 ? void 0 : state.byId[sessionId]?.summary.workspaceId);
+	const selectedWorkspaceId = useStore(workspacesStore, (state) => state.selectedId);
+	const mcp = useSessionMcp(sessionId === void 0 ? selectedWorkspaceId ?? void 0 : sessionWorkspaceId, sessionId);
+	const mcpView = tabId === "mcp";
+	const mcpEnabled = mcp.snapshot?.enabled === true || mcpView;
+	const transferLabel = useStore(sessionsStore, (state) => {
+		if (state.transferringToId === null) return null;
+		return state.byId[state.transferringToId]?.summary.name ?? "destination session";
+	});
+	const noSessions = useNoSessions();
+	const activeMeta = useActiveSessionMeta();
+	const dormantMeta = activeMeta?.summary.dormant === true ? activeMeta : null;
+	const dialogId = useActiveSession((state) => state.dialog?.id ?? null);
+	const storedTransientTab = useStore(transientTabsStore, (state) => findTransientTab(state, sessionId, tabId));
+	const transientTab = storedTransientTab === void 0 ? void 0 : pluginActivityGroups().map((group) => group.transientTab?.()).find((candidate) => candidate?.id === storedTransientTab.id) ?? storedTransientTab;
+	const tab = (tabId === void 0 ? void 0 : webTabs().find((entry) => entry.id === tabId)) ?? transientTab;
+	const composerContext = tab === transientTab ? transientTab?.composerContext : void 0;
+	const routeKey = `${sessionId ?? ""}\u0000${tabId ?? ""}`;
+	const [lastRouteKey, setLastRouteKey] = useState(routeKey);
+	if (lastRouteKey !== routeKey) {
+		setLastRouteKey(routeKey);
+		setRailOpen(false);
+		setMobileActivityOpen(false);
+	}
+	const [lastDialogId, setLastDialogId] = useState(dialogId);
+	if (lastDialogId !== dialogId) {
+		setLastDialogId(dialogId);
+		if (dialogId !== null) {
+			setMobileActivityOpen(false);
+			setRailOpen(false);
+		}
+	}
+	const rail = useSessionRail({ onDismiss: () => setRailOpen(false) });
+	const closeActivity = () => {
+		if (mobileActivityOpen) setMobileActivityOpen(false);
+		else setDockOpen(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "cockpit",
+		className: "h-full min-w-0 overflow-hidden",
+		children: [/* @__PURE__ */ jsx(ElegantLayout, {
+			view: mcpView || tab ? "panel" : noSessions ? "welcome" : "conversation",
+			navigationOpen: railOpen,
+			desktopActivityOpen: dockOpen,
+			mobileActivityOpen,
+			onNavigationOpenChange: setRailOpen,
+			onDesktopActivityOpenChange: setDockOpen,
+			onMobileActivityOpenChange: setMobileActivityOpen,
+			rail,
+			slots: {
+				header: (options) => /* @__PURE__ */ jsx(TopBar, {
+					...options,
+					view: mcpView ? "mcp" : tab?.id ?? "conversation",
+					mcpEnabled,
+					onShowSessions: () => {
+						setMobileActivityOpen(false);
+						setRailOpen(true);
+					},
+					onShowActivity: () => {
+						setRailOpen(false);
+						setMobileActivityOpen(true);
+					}
+				}),
+				notices: transferLabel === null ? null : /* @__PURE__ */ jsxs("output", {
+					"data-testid": "voice-transfer-transition",
+					className: "border-b border-doom-cyan/30 bg-doom-cyan/10 px-4 py-2 text-center text-base font-medium text-doom-cyan",
+					children: [
+						"Transferring voice to ",
+						transferLabel,
+						"..."
+					]
+				}),
+				content: mcpView ? /* @__PURE__ */ jsx(SessionMcp, { state: mcp }, sessionId) : tab ? /* @__PURE__ */ jsx(tab.panel, { ...slotProps }) : noSessions ? /* @__PURE__ */ jsx(WelcomePanel, {}) : /* @__PURE__ */ jsx(Timeline, {}),
+				composer: mcpView ? null : tab ? tab.retainComposer === true ? /* @__PURE__ */ jsx(Composer, { composerContext }) : null : noSessions ? null : /* @__PURE__ */ jsx(Composer, {}),
+				controls: !mcpView && !tab && !noSessions && dormantMeta === null ? /* @__PURE__ */ jsx(SelectionBar, {}) : null,
+				activity: /* @__PURE__ */ jsx(ActivityDock, {
+					mcp,
+					onClose: closeActivity,
+					onOpenContent: () => setMobileActivityOpen(false)
+				})
+			}
+		}), /* @__PURE__ */ jsx(SessionRailDialogs, {})]
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/template/_components/ElegantSettings.tsx
+/** Settings have their own page frame, independent of session navigation. */
+function ElegantSettings() {
+	useWebPluginRegistry();
+	const { section, workspaceId } = useDashboardRoute();
+	const navigate = useNavigate();
+	const activeId = useStore(sessionsStore, (state) => state.activeId);
+	const [loadError, setLoadError] = useState();
+	const [repositoryReady, setRepositoryReady] = useState(false);
+	const [templateTarget, setTemplateTarget] = useDashboardState("settings/template-target", "global");
+	const current = settingsSection(section);
+	const workspace = current?.workspace ?? (section?.startsWith("repository-") ? "repository" : "general");
+	useEffect(() => {
+		if (current) return;
+		if (workspace === "repository" && !repositoryReady) return;
+		let cancelled = false;
+		refreshWebPluginCompositions().then(() => {
+			if (cancelled || settingsSection(section)) return;
+			navigate({
+				to: "/settings/$section",
+				params: { section: DEFAULT_SETTINGS_SECTION },
+				search: { workspace: workspaceId },
+				replace: true
+			});
+		}).catch((error) => {
+			if (!cancelled) setLoadError(error instanceof Error ? error.message : String(error));
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		current,
+		section,
+		navigate,
+		workspace,
+		workspaceId,
+		repositoryReady
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "settings",
+		className: "flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-doom-bg",
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "grid shrink-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-2 gap-y-2 border-b border-doom-border px-3 py-2 sm:h-14 sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] sm:px-6 sm:py-0",
+			children: [
+				/* @__PURE__ */ jsx("h1", {
+					className: "order-1 min-w-0 truncate text-xl font-semibold text-doom-hi sm:order-none",
+					children: "Settings"
+				}),
+				/* @__PURE__ */ jsxs("nav", {
+					className: "order-3 col-span-2 flex w-full items-center gap-1 rounded-lg bg-doom-panel p-1 sm:order-none sm:col-span-1 sm:w-auto",
+					"aria-label": "settings workspace",
+					children: [/* @__PURE__ */ jsx(NavTab, {
+						asChild: true,
+						active: workspace === "general",
+						className: "min-h-8 flex-1 justify-center rounded-md px-4 focus-visible:ring-2 focus-visible:ring-doom-green sm:flex-none",
+						"aria-current": workspace === "general" ? "true" : void 0,
+						children: /* @__PURE__ */ jsx(Link, {
+							to: "/settings/$section",
+							params: { section: DEFAULT_SETTINGS_SECTION },
+							search: { workspace: workspaceId },
+							"data-testid": "settings-workspace-general",
+							children: "General"
+						})
+					}), /* @__PURE__ */ jsx(NavTab, {
+						asChild: true,
+						active: workspace === "repository",
+						className: "min-h-8 flex-1 justify-center rounded-md px-4 focus-visible:ring-2 focus-visible:ring-doom-green sm:flex-none",
+						"aria-current": workspace === "repository" ? "true" : void 0,
+						children: /* @__PURE__ */ jsx(Link, {
+							to: "/settings/$section",
+							params: { section: DEFAULT_REPOSITORY_SETTINGS_SECTION },
+							search: { workspace: workspaceId },
+							"data-testid": "settings-workspace-repository",
+							children: "Workspaces"
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					asChild: true,
+					variant: "ghost",
+					size: "sm",
+					className: "order-2 sm:order-none sm:justify-self-end",
+					children: activeId !== null ? /* @__PURE__ */ jsxs(Link, {
+						to: "/session/$sessionId",
+						params: { sessionId: activeId },
+						"data-testid": "settings-close",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "sm:hidden",
+							children: "Back"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "hidden sm:inline",
+							children: "Back to session"
+						})]
+					}) : /* @__PURE__ */ jsx(Link, {
+						to: "/",
+						"data-testid": "settings-close",
+						children: "Back"
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx("main", {
+			className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
+			children: workspace === "repository" ? /* @__PURE__ */ jsx(RepositoryWorkspace, {
+				current: current ?? {
+					id: section ?? "",
+					label: "",
+					detail: "",
+					workspace: "repository"
+				},
+				initialRepositoryId: workspaceId,
+				onRepositoryChange: (nextWorkspaceId) => {
+					navigate({
+						to: "/settings/$section",
+						params: { section: current?.id ?? section ?? DEFAULT_REPOSITORY_SETTINGS_SECTION },
+						search: { workspace: nextWorkspaceId },
+						replace: true
+					});
+				},
+				onReady: setRepositoryReady
+			}, workspaceId ?? "remembered-workspace") : /* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-0 flex-1 flex-col lg:flex-row",
+				children: [/* @__PURE__ */ jsx(SettingsMenu, {
+					active: current?.id,
+					workspace: "general",
+					repositoryId: workspaceId
+				}), /* @__PURE__ */ jsx("section", {
+					"data-testid": "settings-content",
+					className: "min-w-0 flex-1 overflow-y-auto px-4 py-6 sm:px-6 sm:py-8 lg:px-8 lg:py-10",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "mx-auto flex w-full max-w-[720px] flex-col gap-8",
+						children: [
+							!current && loadError ? /* @__PURE__ */ jsx("p", {
+								role: "alert",
+								children: loadError
+							}) : null,
+							current?.id === "providers" ? /* @__PURE__ */ jsx(ProviderSettings, {}) : null,
+							current?.id === "appearance" ? /* @__PURE__ */ jsx(AppearanceSettings, {
+								templateTarget,
+								onTemplateTargetChange: setTemplateTarget
+							}) : null,
+							current?.id === "notifications" ? /* @__PURE__ */ jsx(NotificationSettings, {}) : null,
+							current?.id === "images" ? /* @__PURE__ */ jsx(ImageSettings, {}) : null,
+							current?.id === "remote" ? /* @__PURE__ */ jsx(RemoteControlSettings, {}) : null,
+							current?.id === "plugins" ? /* @__PURE__ */ jsx(PluginSettings, {}) : null,
+							current?.contribution === void 0 ? null : /* @__PURE__ */ jsx(ContributedSettings, {
+								section: current.contribution,
+								scope: "global"
+							}),
+							current?.panel === void 0 ? null : /* @__PURE__ */ jsx(SettingsPanelHost, { panel: current.panel })
+						]
+					})
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/template/_components/ElegantDashboard.tsx
+const renderers = {
+	thread: (id, threadId, options) => /* @__PURE__ */ jsx(ThreadView, {
+		sessionId: id,
+		threadId,
+		options
+	}),
+	activity: (id, open) => /* @__PURE__ */ jsx(SessionActivity, {
+		sessionId: id,
+		onOpenConversation: open
+	}),
+	transcript: (id, options) => /* @__PURE__ */ jsx(SessionTranscriptView, {
+		sessionId: id,
+		options,
+		watch: watchDashboardTranscript
+	})
+};
+function ElegantDashboard() {
+	const route = useDashboardRoute();
+	const sessionId = useStore(sessionsStore, (state) => state.activeId);
+	return /* @__PURE__ */ jsxs(DashboardRendererProvider, {
+		value: renderers,
+		children: [
+			route.kind === "settings" ? /* @__PURE__ */ jsx(ElegantSettings, {}) : /* @__PURE__ */ jsx(ElegantConversation, {}),
+			/* @__PURE__ */ jsx(DialogOverlay, {}),
+			/* @__PURE__ */ jsx(RefusedCard, {}),
+			/* @__PURE__ */ jsx(CommandPalette, {}),
+			/* @__PURE__ */ jsx(PluginSurface, {
+				slot: HOST_SLOTS.overlay,
+				sessionId
+			}),
+			/* @__PURE__ */ jsx(RemoteAccessDialog, {}),
+			/* @__PURE__ */ jsx(PairingApprovalDialog, {})
+		]
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/template/_lib/definition.ts
+const elegantTemplate = {
+	label: "Elegant",
+	description: "A focused conversation with collapsible navigation, session controls, and activity.",
+	contractVersion: 2,
+	app: ElegantDashboard
+};
+//#endregion
+//#region src/extensions/(frontend)/template/po-template-elegant.web.ts
+var po_template_elegant_web_default$2 = defineWebTemplate(elegantTemplate);
+//#endregion
+//#region src/extensions/workspaces/(frontend)/template/po-template-elegant.web.ts
+var po_template_elegant_web_default$1 = defineWebTemplate(elegantTemplate);
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/template/po-template-elegant.web.ts
+var po_template_elegant_web_default = defineWebTemplate(elegantTemplate);
+//#endregion
+//#region generated/web.ts
+const via = (identity, value) => value === void 0 ? void 0 : {
+	...identity,
+	...value
+};
+const webPlugin = defineWebPlugin({
+	id: "template-elegant",
+	global: { get templates() {
+		return [via({ id: "po-template-elegant" }, po_template_elegant_web_default$2)];
+	} },
+	workspace: { get templates() {
+		return [via({ id: "po-template-elegant" }, po_template_elegant_web_default$1)];
+	} },
+	session: { get templates() {
+		return [via({ id: "po-template-elegant" }, po_template_elegant_web_default)];
+	} }
+});
+//#endregion
+export { webPlugin };
+
+//# sourceMappingURL=web.mjs.map