@agimon-ai/po-template-elegant 0.0.0-alpha.2 → 0.0.0-alpha.20

package/dist/extensions/web.mjs

@@ -1,13 +1,13 @@
 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 { DEFAULT_REPOSITORY_SETTINGS_SECTION, DEFAULT_SETTINGS_SECTION, DashboardRendererProvider, HOST_SLOTS, admitDashboardWorkspace, answerLogin, cancelLogin, createPlainSession, findTransientTab, hasSessionProtocol, listDirectory, listPoFolders, listProviders, pluginActivityGroups, readLogin, refreshWebPluginCompositions, sessionsStore, setDockOpen, settingsSection, startLogin, submitComposerDraft, transientTabsStore, uiStore, updateComposerState, 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, LoginFlowDialog, 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 { useCallback, useEffect, useRef, useState } from "react";
+import { ActivityIcon, AlertIcon, ArrowRightIcon, Avatar, AvatarFallback, AvatarImage, BranchIcon, Button, Checkbox, ChevronUpIcon, CloseIcon, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Dot, Drawer, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, FolderIcon, ForkIcon, GearIcon, Input, Kbd, KebabIcon, LoaderIcon, LockIcon, NavTab, OptionRow, PlusIcon, RadioGroup, RadioGroupItem, SendIcon, ShieldIcon, Skeleton, Textarea, 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) {
+function folderName$2(path) {
 	return path.slice(path.lastIndexOf("/") + 1) || path;
 }
 /** Walks the server's folders inline: up, into a child, or pick the current folder. */
@@ -31,7 +31,7 @@ function ElegantFolderBrowser({ start, listDirectory, onSelect }) {
 	}, [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",
+		className: "flex flex-col gap-1 rounded-lg border border-po-border-soft bg-po-panel/40 p-1.5",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-1 px-1",
@@ -47,7 +47,7 @@ function ElegantFolderBrowser({ start, listDirectory, onSelect }) {
 						children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "h-3 w-3" })
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: "min-w-0 flex-1 truncate text-sm text-doom-dim",
+						className: "min-w-0 flex-1 truncate text-sm text-po-dim",
 						title: listing?.path,
 						children: listing?.path ?? "loading…"
 					}),
@@ -62,7 +62,7 @@ function ElegantFolderBrowser({ start, listDirectory, onSelect }) {
 				]
 			}),
 			error ? /* @__PURE__ */ jsx("p", {
-				className: "px-2 py-1 text-sm text-doom-red",
+				className: "px-2 py-1 text-sm text-po-red",
 				children: error
 			}) : null,
 			/* @__PURE__ */ jsxs("div", {
@@ -70,14 +70,14 @@ function ElegantFolderBrowser({ start, listDirectory, onSelect }) {
 				"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",
+					className: "px-2 py-1 text-sm text-po-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)
+					children: folderName$2(directory)
 				}, directory))]
 			})
 		]
@@ -87,9 +87,9 @@ function ElegantFolderBrowser({ start, listDirectory, onSelect }) {
 //#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, "");
+const TRAILING_SEPARATORS$1 = /\/+$/u;
+function folderName$1(path) {
+	const trimmed = path.trim().replace(TRAILING_SEPARATORS$1, "");
 	return trimmed.slice(trimmed.lastIndexOf("/") + 1);
 }
 /** Adds a workspace by name, by folder, or both; a name alone gets a new default folder. */
@@ -104,7 +104,7 @@ function ElegantAddWorkspaceDialog({ suggestedPaths, actions }) {
 	const [suggestions, setSuggestions] = useState([]);
 	const [highlight, setHighlight] = useState(NO_HIGHLIGHT);
 	const pathInput = useRef(null);
-	const shownName = nameEdited ? name : folderName(path);
+	const shownName = nameEdited ? name : folderName$1(path);
 	useEffect(() => {
 		const typed = path.trim();
 		if (typed === "") return;
@@ -128,7 +128,7 @@ function ElegantAddWorkspaceDialog({ suggestedPaths, actions }) {
 		changePath(`${directory}/`);
 		pathInput.current?.focus();
 	};
-	const trimmedPath = path.trim().replace(TRAILING_SEPARATORS, "") || (path.trim() === "" ? "" : "/");
+	const trimmedPath = path.trim().replace(TRAILING_SEPARATORS$1, "") || (path.trim() === "" ? "" : "/");
 	const canSubmit = !busy && (trimmedPath !== "" || shownName.trim() !== "");
 	const submit = async () => {
 		if (!canSubmit) return;
@@ -149,7 +149,7 @@ function ElegantAddWorkspaceDialog({ suggestedPaths, actions }) {
 					htmlFor: "add-workspace-name",
 					className: "flex flex-col gap-1",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: "text-base font-medium text-doom-dim",
+						className: "text-base font-medium text-po-dim",
 						children: "name"
 					}), /* @__PURE__ */ jsx(Input, {
 						id: "add-workspace-name",
@@ -170,9 +170,9 @@ function ElegantAddWorkspaceDialog({ suggestedPaths, actions }) {
 					htmlFor: "add-workspace-root",
 					className: "flex flex-col gap-1",
 					children: [/* @__PURE__ */ jsxs("span", {
-						className: "text-base font-medium text-doom-dim",
+						className: "text-base font-medium text-po-dim",
 						children: ["folder ", /* @__PURE__ */ jsx("span", {
-							className: "text-doom-dim",
+							className: "text-po-dim",
 							children: "(optional; type a path or browse)"
 						})]
 					}), /* @__PURE__ */ jsxs("span", {
@@ -219,7 +219,7 @@ function ElegantAddWorkspaceDialog({ suggestedPaths, actions }) {
 					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",
+					className: "max-h-40 overflow-y-auto rounded-lg border border-po-border-soft bg-po-panel/40 p-1.5",
 					children: suggestions.map((directory, index) => /* @__PURE__ */ jsx(OptionRow, {
 						density: "compact",
 						active: index === highlight,
@@ -242,11 +242,11 @@ function ElegantAddWorkspaceDialog({ suggestedPaths, actions }) {
 				}) : null,
 				trimmedPath === "" && shownName.trim() !== "" ? /* @__PURE__ */ jsxs("p", {
 					"data-testid": "add-workspace-default-hint",
-					className: "text-sm text-doom-dim",
+					className: "text-sm text-po-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",
+					className: "max-h-28 overflow-y-auto rounded border border-po-edge-red bg-po-tint-red/40 px-2.5 py-2 text-sm whitespace-pre-wrap text-po-red",
 					children: error
 				}) : null,
 				/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
@@ -286,12 +286,12 @@ function ElegantPendingSetup({ sessionId, setup, actions }) {
 	};
 	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",
+		className: "ml-9 flex flex-col gap-0.5 rounded-lg border border-dashed border-po-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",
+					className: "truncate text-base font-semibold text-po-hi",
 					children: setup.name
 				}), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 					asChild: true,
@@ -310,17 +310,17 @@ function ElegantPendingSetup({ sessionId, setup, actions }) {
 				}) })] })]
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: setup.failed ? "text-sm text-doom-red" : "text-sm text-doom-dim",
+				className: setup.failed ? "text-sm text-po-red" : "text-sm text-po-dim",
 				children: setup.status
 			}),
 			setup.recovery ? /* @__PURE__ */ jsx("p", {
 				role: setup.failed ? "alert" : void 0,
-				className: "text-sm text-doom-dim",
+				className: "text-sm text-po-dim",
 				children: setup.recovery
 			}) : null,
 			error ? /* @__PURE__ */ jsx("p", {
 				role: "alert",
-				className: "text-sm text-doom-red",
+				className: "text-sm text-po-red",
 				children: error
 			}) : null
 		]
@@ -342,7 +342,7 @@ function ElegantSessionCard({ session, actions }) {
 	};
 	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 tileClass = active ? "rounded-lg border border-po-edge-green bg-po-tint-green px-3 hover:bg-po-tint-green" : "rounded-lg border border-transparent px-3 hover:bg-po-panel";
 	const failed = session.status.startsWith("failed") || session.status.includes(" failed");
 	const running = session.status.startsWith("running");
 	const commitRename = () => {
@@ -370,7 +370,7 @@ function ElegantSessionCard({ session, actions }) {
 					src: session.profile.avatarUrl,
 					alt: ""
 				}) : null, /* @__PURE__ */ jsx(AvatarFallback, {
-					className: "bg-doom-tint-green text-xs font-semibold text-doom-green",
+					className: "bg-po-tint-green text-xs font-semibold text-po-green",
 					children: session.profile?.initials ?? "PO"
 				})]
 			}), /* @__PURE__ */ jsxs("span", {
@@ -380,27 +380,27 @@ function ElegantSessionCard({ session, actions }) {
 					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"}`
+							className: `mt-1 size-3 shrink-0 ${active ? "text-po-green" : "text-po-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"}`
+							className: `mt-1 size-3 shrink-0 ${active ? "text-po-green" : "text-po-faint"}`
 						}) : null,
 						/* @__PURE__ */ jsx("span", {
-							className: "min-w-0 flex-1 text-base font-semibold break-words text-doom-hi",
+							className: "min-w-0 flex-1 text-base font-semibold break-words text-po-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",
+							className: "grid size-5 shrink-0 place-items-center rounded-full bg-po-panel text-2xs text-po-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"}`,
+					className: `flex min-w-0 items-start gap-1.5 text-sm leading-snug ${failed ? "text-po-red" : running ? "text-po-yellow" : active ? "text-po-text" : "text-po-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"
+						className: "mt-0.5 size-3 shrink-0 text-po-magenta"
 					}) : running ? /* @__PURE__ */ jsx(LoaderIcon, {
 						"aria-hidden": true,
 						className: "mt-0.5 size-3 shrink-0 animate-spin"
@@ -417,22 +417,22 @@ function ElegantSessionCard({ session, actions }) {
 		}),
 		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",
+			className: "flex min-w-0 items-center gap-1.5 pl-10.5 text-sm text-po-dim",
 			children: [
-				/* @__PURE__ */ jsx(BranchIcon, { className: `size-3 shrink-0 ${active ? "text-doom-green" : ""}` }),
+				/* @__PURE__ */ jsx(BranchIcon, { className: `size-3 shrink-0 ${active ? "text-po-green" : ""}` }),
 				/* @__PURE__ */ jsx("span", {
 					className: "truncate font-mono",
 					children: session.git.branch
 				}),
 				session.git.dirty ? /* @__PURE__ */ jsx("span", {
-					className: "shrink-0 text-doom-yellow",
+					className: "shrink-0 text-po-yellow",
 					children: "modified"
 				}) : null
 			]
 		}) : null,
 		error ? /* @__PURE__ */ jsx("span", {
 			"data-testid": "session-error",
-			className: "line-clamp-3 text-sm break-words text-doom-red",
+			className: "line-clamp-3 text-sm break-words text-po-red",
 			children: error
 		}) : null
 	] });
@@ -466,7 +466,7 @@ function ElegantSessionCard({ session, actions }) {
 							size: "icon",
 							"data-testid": `session-menu-${session.id}`,
 							title: "session actions",
-							className: "text-doom-dim hover:text-doom-hi",
+							className: "text-po-dim hover:text-po-hi",
 							children: /* @__PURE__ */ jsx(KebabIcon, { className: "h-3 w-3" })
 						})
 					}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
@@ -552,7 +552,7 @@ function ElegantSessionCard({ session, actions }) {
 					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",
+							className: "font-semibold text-po-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."
@@ -603,19 +603,19 @@ function ElegantWorkspaceGroup({ workspace, actions }) {
 		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",
+				className: "flex min-w-0 items-start gap-2.5 rounded-md px-2 py-1 transition-colors hover:bg-po-panel/60",
 				children: [
 					/* @__PURE__ */ jsx(FolderIcon, {
 						"aria-hidden": true,
-						className: "mt-0.5 size-4 shrink-0 text-doom-dim"
+						className: "mt-0.5 size-4 shrink-0 text-po-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",
+							className: "truncate text-base font-semibold text-po-hi",
 							children: name
 						}), /* @__PURE__ */ jsx("p", {
-							className: "truncate font-mono text-sm text-doom-dim",
+							className: "truncate font-mono text-sm text-po-dim",
 							title: root,
 							children: root
 						})]
@@ -630,7 +630,7 @@ function ElegantWorkspaceGroup({ workspace, actions }) {
 							"aria-label": `New session in ${name}`,
 							disabled: !available,
 							onClick: () => actions.createSession(id),
-							className: "text-doom-faint hover:text-doom-hi",
+							className: "text-po-faint hover:text-po-hi",
 							children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" })
 						}), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 							asChild: true,
@@ -640,7 +640,7 @@ function ElegantWorkspaceGroup({ workspace, actions }) {
 								"data-testid": `workspace-menu-${id}`,
 								title: "Workspace actions",
 								"aria-label": `${name} actions`,
-								className: "text-doom-faint hover:text-doom-hi",
+								className: "text-po-faint hover:text-po-hi",
 								children: /* @__PURE__ */ jsx(KebabIcon, { className: "size-3.5" })
 							})
 						}), /* @__PURE__ */ jsxs(DropdownMenuContent, { children: [
@@ -668,7 +668,7 @@ function ElegantWorkspaceGroup({ workspace, actions }) {
 				]
 			}),
 			!available ? /* @__PURE__ */ jsx("p", {
-				className: "px-9 text-sm text-doom-red",
+				className: "px-9 text-sm text-po-red",
 				children: "Workspace unavailable"
 			}) : null,
 			workspace.sessions.length > 0 ? /* @__PURE__ */ jsx("div", {
@@ -678,7 +678,7 @@ function ElegantWorkspaceGroup({ workspace, actions }) {
 					actions
 				}, session.id))
 			}) : available ? /* @__PURE__ */ jsx("p", {
-				className: "px-9 pb-1 text-sm text-doom-dim",
+				className: "px-9 pb-1 text-sm text-po-dim",
 				children: "No sessions yet. Start or resume one."
 			}) : null,
 			/* @__PURE__ */ jsx(Dialog, {
@@ -692,7 +692,7 @@ function ElegantWorkspaceGroup({ workspace, actions }) {
 						/* @__PURE__ */ jsxs(DialogDescription, { children: [
 							"this unregisters ",
 							/* @__PURE__ */ jsx("span", {
-								className: "font-semibold text-doom-hi",
+								className: "font-semibold text-po-hi",
 								children: name
 							}),
 							" from Po only. files at",
@@ -702,7 +702,7 @@ function ElegantWorkspaceGroup({ workspace, actions }) {
 						] }),
 						removeError ? /* @__PURE__ */ jsx("p", {
 							"data-testid": `workspace-delete-error-${id}`,
-							className: "text-sm text-doom-red",
+							className: "text-sm text-po-red",
 							children: removeError
 						}) : null,
 						/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
@@ -748,7 +748,7 @@ function ElegantRail({ rail, onClose }) {
 						className: "size-9 rounded-lg"
 					}), /* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",
-						className: "text-2xl font-semibold text-doom-hi",
+						className: "text-2xl font-semibold text-po-hi",
 						children: "Po"
 					})]
 				}), /* @__PURE__ */ jsxs("span", {
@@ -759,7 +759,7 @@ function ElegantRail({ rail, onClose }) {
 						"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"}`,
+						className: `gap-1.5 rounded-md ${remote.status === "failed" ? "" : "bg-po-panel"}`,
 						children: [live ? /* @__PURE__ */ jsx(Dot, {
 							tone: "yellow",
 							pulse: true,
@@ -772,7 +772,7 @@ function ElegantRail({ rail, onClose }) {
 						title: "Hide sessions",
 						"aria-label": "Hide sessions",
 						onClick: onClose,
-						className: "text-doom-dim",
+						className: "text-po-dim",
 						children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-3.5" })
 					})]
 				})]
@@ -780,7 +780,7 @@ function ElegantRail({ rail, onClose }) {
 			/* @__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",
+					className: "text-lg font-semibold text-po-hi",
 					children: "Workspaces"
 				}), /* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
@@ -789,7 +789,7 @@ function ElegantRail({ rail, onClose }) {
 					title: "Add workspace",
 					"aria-label": "Add workspace",
 					onClick: actions.openAddWorkspace,
-					className: "text-doom-faint hover:text-doom-hi",
+					className: "text-po-faint hover:text-po-hi",
 					children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" })
 				})]
 			}),
@@ -799,16 +799,16 @@ function ElegantRail({ rail, onClose }) {
 					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",
+					className: "flex flex-col gap-3 rounded-lg border border-dashed border-po-border px-4 py-5",
 					children: [/* @__PURE__ */ jsx("p", {
-						className: "text-sm text-doom-dim",
+						className: "text-sm text-po-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",
+						className: "justify-start gap-2 bg-po-panel",
 						children: [/* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" }), "Add workspace"]
 					})]
 				}) : null]
@@ -816,10 +816,10 @@ function ElegantRail({ rail, onClose }) {
 			rail.pluginContent,
 			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
 			/* @__PURE__ */ jsxs("div", {
-				className: "sticky bottom-0 mt-auto shrink-0 bg-doom-rail",
+				className: "sticky bottom-0 mt-auto shrink-0 bg-po-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"}`,
+					className: `flex items-center gap-2 border-t border-po-border-soft px-4 py-2 text-sm ${remote.status === "failed" ? "bg-po-tint-red text-po-red" : "bg-po-tint-yellow text-po-yellow"}`,
 					children: [
 						/* @__PURE__ */ jsx(Dot, { tone: remote.status === "failed" ? "red" : "yellow" }),
 						/* @__PURE__ */ jsx("span", {
@@ -842,24 +842,24 @@ function ElegantRail({ rail, onClose }) {
 						})
 					]
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-1 border-t border-doom-border-soft px-3 py-3",
+					className: "flex flex-col gap-1 border-t border-po-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"]
+						className: "justify-start gap-2.5 px-2 text-po-text",
+						children: [/* @__PURE__ */ jsx(GearIcon, { className: "size-4 text-po-dim" }), "Settings"]
 					}), /* @__PURE__ */ jsxs("span", {
-						className: "px-2 text-sm text-doom-dim max-sm:hidden",
+						className: "px-2 text-sm text-po-dim max-sm:hidden",
 						children: [
 							/* @__PURE__ */ jsx(Kbd, {
-								className: "bg-doom-panel",
+								className: "bg-po-panel",
 								children: "ctrl+k"
 							}),
 							" commands · ",
 							/* @__PURE__ */ jsx(Kbd, {
-								className: "bg-doom-panel",
+								className: "bg-po-panel",
 								children: "ctrl+t"
 							}),
 							" new session"
@@ -876,7 +876,7 @@ function ElegantRail({ rail, onClose }) {
 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",
+		className: "relative flex h-full min-w-0 flex-col overflow-hidden bg-po-bg",
 		children: [
 			/* @__PURE__ */ jsx(Drawer, {
 				open: navigationOpen,
@@ -886,7 +886,7 @@ function ElegantLayout({ view, slots, rail, navigationOpen, mobileActivityOpen,
 				showHeader: false,
 				"data-testid": "session-rail-panel",
 				backdropTestId: "mobile-drawer-backdrop",
-				className: "w-[min(340px,calc(100vw-48px))] border-doom-border-soft",
+				className: "w-[min(340px,calc(100vw-48px))] border-po-border-soft",
 				children: /* @__PURE__ */ jsx(ElegantRail, {
 					rail,
 					onClose: () => onNavigationOpenChange(false)
@@ -909,10 +909,10 @@ function ElegantLayout({ view, slots, rail, navigationOpen, mobileActivityOpen,
 							children: slots.composer
 						}),
 						slots.controls == null ? null : /* @__PURE__ */ jsxs("details", {
-							className: "shrink-0 px-3 pb-3 text-sm text-doom-dim",
+							className: "shrink-0 px-3 pb-3 text-sm text-po-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",
+								className: "cursor-pointer rounded-sm px-1 py-1 focus-visible:outline focus-visible:outline-po-blue",
 								children: "Session controls"
 							}), slots.controls]
 						})
@@ -937,6 +937,576 @@ function ElegantLayout({ view, slots, rail, navigationOpen, mobileActivityOpen,
 	});
 }
 //#endregion
+//#region src/extensions/(frontend)/template/_components/ElegantOnboarding.tsx
+function StepFrame({ step, pending, children, testId }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": testId,
+		className: "flex min-h-0 flex-1 items-center justify-center overflow-y-auto px-4 py-10",
+		children: /* @__PURE__ */ jsxs("section", {
+			className: "flex w-full max-w-xl flex-col gap-6",
+			children: [children, pending.length > 1 ? /* @__PURE__ */ jsx("ol", {
+				"aria-label": "Setup steps",
+				className: "flex justify-center gap-2",
+				children: pending.map((entry) => /* @__PURE__ */ jsx("li", {
+					"aria-current": entry === step ? "step" : void 0,
+					className: `size-1.5 rounded-full ${entry === step ? "bg-po-selected" : "bg-po-border-soft"}`
+				}, entry))
+			}) : null]
+		})
+	});
+}
+function Heading({ title, description }) {
+	return /* @__PURE__ */ jsxs("header", {
+		className: "flex flex-col gap-1.5 text-center",
+		children: [/* @__PURE__ */ jsx("h1", {
+			className: "text-xl font-semibold text-po-hi",
+			children: title
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-base text-po-dim",
+			children: description
+		})]
+	});
+}
+function ErrorLine({ error }) {
+	return error ? /* @__PURE__ */ jsx("p", {
+		role: "alert",
+		className: "text-sm text-po-red",
+		children: error
+	}) : null;
+}
+const STEP_COUNT_WORDS = [
+	"",
+	"One quick step",
+	"Two quick steps"
+];
+/** The first thing a new person sees, only while a setup step is still missing. */
+function ElegantOnboardingWelcome({ pending, onBegin }) {
+	return /* @__PURE__ */ jsx(StepFrame, {
+		pending: [],
+		testId: "onboarding-welcome",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-5 py-4 text-center",
+			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-10 rounded-lg"
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "text-2xl font-semibold text-po-hi",
+						children: "Po"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1.5",
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: "text-2xl font-semibold text-po-hi",
+						children: "Hi, I'm Po. I'll handle the busywork."
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "text-base text-po-dim",
+						children: [STEP_COUNT_WORDS[pending.length] ?? `${pending.length} quick steps`, " and you can hand me your first task."]
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					variant: "primary",
+					size: "lg",
+					"data-testid": "onboarding-begin",
+					onClick: onBegin,
+					className: "px-6",
+					children: ["Let's begin", /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-3.5" })]
+				})
+			]
+		})
+	});
+}
+/** Choose and sign in to the provider that runs the models. */
+function ElegantOnboardingModel({ pending, providers, selectedId, busy, error, onSelect, onConnect, onShowAll }) {
+	return /* @__PURE__ */ jsxs(StepFrame, {
+		step: "model",
+		pending,
+		testId: "onboarding-model",
+		children: [
+			/* @__PURE__ */ jsx(Heading, {
+				title: "Choose who does the thinking",
+				description: "You can connect more providers later in settings."
+			}),
+			/* @__PURE__ */ jsx(RadioGroup, {
+				"aria-label": "Model provider",
+				value: selectedId ?? "",
+				onValueChange: onSelect,
+				className: "flex flex-col gap-2",
+				children: providers.map((provider) => /* @__PURE__ */ jsxs("label", {
+					htmlFor: `onboarding-provider-${provider.id}`,
+					"data-testid": `onboarding-provider-${provider.id}`,
+					className: `flex cursor-pointer items-center gap-3 rounded-lg border px-4 py-3 transition-colors ${provider.id === selectedId ? "border-po-selected bg-po-selected/5" : "border-po-border-soft hover:border-po-green/50"}`,
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 flex-1 flex-col",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-base font-semibold text-po-hi",
+							children: provider.name
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-sm text-po-dim",
+							children: provider.note
+						})]
+					}), /* @__PURE__ */ jsx(RadioGroupItem, {
+						id: `onboarding-provider-${provider.id}`,
+						value: provider.id
+					})]
+				}, provider.id))
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				onClick: onShowAll,
+				className: "self-start",
+				children: "Show every provider"
+			}),
+			/* @__PURE__ */ jsx(ErrorLine, { error }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-1.5 text-sm text-po-dim",
+					children: [/* @__PURE__ */ jsx(LockIcon, { className: "size-3.5" }), "Your keys stay on this machine."]
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					size: "lg",
+					"data-testid": "onboarding-connect",
+					disabled: selectedId === null || busy,
+					onClick: onConnect,
+					children: busy ? "Connecting…" : "Connect"
+				})]
+			})
+		]
+	});
+}
+function addLabel(count) {
+	if (count === 0) return "Add workspace";
+	return count === 1 ? "Add 1 workspace" : `Add ${count} workspaces`;
+}
+/** Admit folders Po found, a new named workspace, or a browsed folder. */
+function ElegantOnboardingWorkspace({ pending, scanning, found, name, busy, error, browser, onToggle, onNameChange, onBrowse, onAdd }) {
+	const count = found.filter((folder) => folder.checked).length + (name.trim() === "" ? 0 : 1);
+	const showFound = scanning || found.length > 0;
+	return /* @__PURE__ */ jsxs(StepFrame, {
+		step: "workspace",
+		pending,
+		testId: "onboarding-workspace",
+		children: [
+			/* @__PURE__ */ jsx(Heading, {
+				title: "Where should I work?",
+				description: found.length > 0 ? "I found these folders with Po settings on this machine." : "Name a new workspace, or pick a folder you already have."
+			}),
+			showFound ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col rounded-lg border border-po-border-soft",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "border-b border-po-border-soft px-4 py-2 text-sm text-po-dim",
+					children: scanning ? "Looking for folders with Po settings…" : "Found on this machine"
+				}), scanning ? /* @__PURE__ */ jsxs("output", {
+					"aria-busy": true,
+					className: "flex flex-col gap-3 px-4 py-3",
+					children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-56" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-44" })]
+				}) : /* @__PURE__ */ jsx("ul", {
+					"data-testid": "onboarding-found",
+					children: found.map((folder) => /* @__PURE__ */ jsx("li", {
+						className: "border-b border-po-border-soft last:border-b-0",
+						children: /* @__PURE__ */ jsxs("label", {
+							className: "flex cursor-pointer items-center gap-3 px-4 py-2.5",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 flex-1 truncate font-mono text-sm text-po-text",
+								children: folder.path
+							}), /* @__PURE__ */ jsx(Checkbox, {
+								"aria-label": `Add ${folder.path}`,
+								checked: folder.checked,
+								onCheckedChange: (checked) => onToggle(folder.path, checked === true)
+							})]
+						})
+					}, folder.path))
+				})]
+			}) : null,
+			showFound ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3 text-sm text-po-dim",
+				children: [
+					/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-po-border-soft" }),
+					"or",
+					/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-po-border-soft" })
+				]
+			}) : null,
+			/* @__PURE__ */ jsxs("label", {
+				htmlFor: "onboarding-workspace-name",
+				className: "flex flex-col gap-1.5",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-base font-medium text-po-text",
+						children: "Name a new workspace"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(Input, {
+							id: "onboarding-workspace-name",
+							"data-testid": "onboarding-workspace-name",
+							value: name,
+							placeholder: "Notes",
+							onChange: (event) => onNameChange(event.target.value),
+							className: "min-w-0 flex-1"
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "md",
+							"data-testid": "onboarding-browse",
+							onClick: onBrowse,
+							children: "Browse folders"
+						})]
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "font-mono text-sm text-po-dim",
+						children: ["~/.po/workspace/", name.trim() || "Notes"]
+					})
+				]
+			}),
+			browser,
+			/* @__PURE__ */ jsx(ErrorLine, { error }),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				size: "lg",
+				"data-testid": "onboarding-add-workspaces",
+				disabled: count === 0 || busy,
+				onClick: onAdd,
+				className: "self-end",
+				children: busy ? "Adding…" : addLabel(count)
+			})
+		]
+	});
+}
+/** Setup is done and nothing has started yet: the first task goes straight into a new session. */
+function ElegantOnboardingReady({ model, root, draft, busy, error, suggestions, onDraftChange, onSend }) {
+	return /* @__PURE__ */ jsxs(StepFrame, {
+		pending: [],
+		testId: "welcome",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("h1", {
+					className: "text-2xl font-semibold text-po-hi",
+					children: "Ready when you are."
+				}), /* @__PURE__ */ jsxs("p", {
+					className: "text-base text-po-dim",
+					children: [
+						"Po is connected to ",
+						model,
+						" and working in ",
+						/* @__PURE__ */ jsx("span", {
+							className: "font-mono text-po-text",
+							children: root
+						}),
+						"."
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2 rounded-lg border border-po-border bg-po-bg p-3 focus-within:border-po-green/60",
+				children: [/* @__PURE__ */ jsx(Textarea, {
+					"data-testid": "onboarding-first-task",
+					"aria-label": "Your first task",
+					value: draft,
+					placeholder: "Tell Po what you'd like done…",
+					onChange: (event) => onDraftChange(event.target.value),
+					onKeyDown: (event) => {
+						if (event.key === "Enter" && !event.shiftKey && draft.trim() !== "") {
+							event.preventDefault();
+							onSend();
+						}
+					},
+					className: "min-h-20 resize-none border-0 bg-transparent p-1 text-lg focus-visible:ring-0"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					size: "icon-md",
+					"aria-label": "Start this task",
+					"data-testid": "onboarding-send",
+					disabled: draft.trim() === "" || busy,
+					onClick: onSend,
+					className: "self-end",
+					children: /* @__PURE__ */ jsx(SendIcon, { className: "size-4" })
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "grid gap-2 sm:grid-cols-3",
+				children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "card",
+					onClick: () => onDraftChange(suggestion),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "text-base text-po-text",
+						children: suggestion
+					})
+				}, suggestion))
+			}),
+			/* @__PURE__ */ jsx(ErrorLine, { error }),
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex flex-wrap items-center justify-end gap-1.5 border-t border-po-border-soft pt-4 text-sm text-po-dim",
+				children: [
+					/* @__PURE__ */ jsx(Kbd, { children: "ctrl+t" }),
+					" new session · ",
+					/* @__PURE__ */ jsx(Kbd, { children: "ctrl+k" }),
+					" commands"
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/extensions/(frontend)/template/_components/ElegantOnboardingFlow.tsx
+/** Shown first, in this order; every other provider waits behind "Show every provider". */
+const FEATURED_PROVIDERS = [
+	"anthropic",
+	"openai-codex",
+	"github-copilot",
+	"google",
+	"openrouter"
+];
+const SUGGESTIONS = [
+	"Tour this codebase for me",
+	"Find and fix failing tests",
+	"Draft a README update"
+];
+const FLOW_POLL_MS = 500;
+const ATTACH_TIMEOUT_MS = 3e4;
+const TRAILING_SEPARATORS = /\/+$/u;
+function folderName(path) {
+	const trimmed = path.trim().replace(TRAILING_SEPARATORS, "");
+	return trimmed.slice(trimmed.lastIndexOf("/") + 1);
+}
+/**
+* Sends the session's composer draft once the session is attached and its protocol is bound,
+* which only happens after the session page takes focus. Sends once, never retries, so an
+* unacknowledged send cannot repeat. A session that never gets ready keeps the text in its
+* composer for the person to send.
+*/
+function submitWhenReady(sessionId) {
+	const started = Date.now();
+	const timer = setInterval(() => {
+		const ready = sessionsStore.state.byId[sessionId]?.attach === "attached" && hasSessionProtocol(sessionId);
+		if (!ready && Date.now() - started < ATTACH_TIMEOUT_MS) return;
+		clearInterval(timer);
+		if (ready) submitComposerDraft(sessionId, "submit");
+	}, FLOW_POLL_MS);
+}
+function ModelStep({ pending, models, onConnected }) {
+	const [showAll, setShowAll] = useState(false);
+	const signable = models.filter((provider) => provider.methods.length > 0);
+	const featured = FEATURED_PROVIDERS.flatMap((id) => signable.filter((provider) => provider.id === id));
+	const shown = showAll || featured.length === 0 ? signable : featured;
+	const [selectedId, setSelectedId] = useState(shown[0]?.id ?? null);
+	const [flow, setFlow] = useState(null);
+	const [starting, setStarting] = useState(false);
+	const [error, setError] = useState("");
+	const flowId = flow?.id;
+	const running = flow?.status === "running";
+	useEffect(() => {
+		if (flowId === void 0 || !running) return;
+		let stopped = false;
+		let timer;
+		const poll = async () => {
+			const result = await readLogin(flowId);
+			if (stopped) return;
+			if ("error" in result) {
+				setFlow((current) => current?.id === flowId ? {
+					...current,
+					status: "failed",
+					error: result.error
+				} : current);
+				return;
+			}
+			setFlow(result.flow);
+			if (result.flow.status === "succeeded") onConnected();
+			else if (result.flow.status === "running") timer = setTimeout(() => void poll(), FLOW_POLL_MS);
+		};
+		timer = setTimeout(() => void poll(), FLOW_POLL_MS);
+		return () => {
+			stopped = true;
+			if (timer !== void 0) clearTimeout(timer);
+		};
+	}, [
+		flowId,
+		running,
+		onConnected
+	]);
+	const connect = async () => {
+		const provider = signable.find((candidate) => candidate.id === selectedId);
+		const method = provider?.methods.find((candidate) => candidate.type === "oauth") ?? provider?.methods[0];
+		if (provider === void 0 || method === void 0 || starting || running) return;
+		setError("");
+		setStarting(true);
+		const result = await startLogin(provider.id, method.type);
+		setStarting(false);
+		if ("flow" in result) setFlow(result.flow);
+		else setError(result.error);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ElegantOnboardingModel, {
+		pending,
+		providers: shown.map((provider) => ({
+			id: provider.id,
+			name: provider.name,
+			note: provider.methods.map((method) => method.label).join(" or ")
+		})),
+		selectedId,
+		busy: starting || running,
+		...error === "" ? {} : { error },
+		onSelect: setSelectedId,
+		onConnect: () => void connect(),
+		onShowAll: () => setShowAll(true)
+	}), flow ? /* @__PURE__ */ jsx(LoginFlowDialog, {
+		flow,
+		onAnswer: (promptId, value) => void answerLogin(flow.id, promptId, value).then((result) => {
+			if ("flow" in result) setFlow(result.flow);
+			else setError(result.error);
+		}),
+		onCancel: () => void cancelLogin(flow.id).then((result) => setFlow("flow" in result ? result.flow : null)),
+		onClose: () => {
+			if (flow.status === "failed") setError(flow.error ?? "The sign-in did not finish. Try again whenever you like.");
+			setFlow(null);
+		}
+	}) : null] });
+}
+function WorkspaceStep({ pending }) {
+	const [scanning, setScanning] = useState(true);
+	const [found, setFound] = useState([]);
+	const [name, setName] = useState("");
+	const [browsing, setBrowsing] = useState(false);
+	const [error, setError] = useState("");
+	const busy = useStore(workspaceAdmissionStore, (state) => state.pending);
+	useEffect(() => {
+		let stale = false;
+		listPoFolders().then((paths) => {
+			if (stale) return;
+			setFound(paths.map((path, index) => ({
+				path,
+				checked: index === 0
+			})));
+			setScanning(false);
+		});
+		return () => {
+			stale = true;
+		};
+	}, []);
+	const pick = (path) => {
+		setFound((current) => current.some((folder) => folder.path === path) ? current.map((folder) => folder.path === path ? {
+			...folder,
+			checked: true
+		} : folder) : [...current, {
+			path,
+			checked: true
+		}]);
+		setBrowsing(false);
+	};
+	const add = async () => {
+		setError("");
+		const admissions = [...found.filter((folder) => folder.checked).map((folder) => ({
+			name: folderName(folder.path),
+			path: folder.path
+		})), ...name.trim() === "" ? [] : [{ name: name.trim() }]];
+		for (const admission of admissions) {
+			const result = await admitDashboardWorkspace(admission);
+			if (result !== void 0) {
+				setError(result.error);
+				return;
+			}
+		}
+	};
+	return /* @__PURE__ */ jsx(ElegantOnboardingWorkspace, {
+		pending,
+		scanning,
+		found,
+		name,
+		busy,
+		...error === "" ? {} : { error },
+		...browsing ? { browser: /* @__PURE__ */ jsx(ElegantFolderBrowser, {
+			listDirectory,
+			onSelect: pick
+		}) } : {},
+		onToggle: (path, checked) => setFound((current) => current.map((folder) => folder.path === path ? {
+			...folder,
+			checked
+		} : folder)),
+		onNameChange: setName,
+		onBrowse: () => setBrowsing((open) => !open),
+		onAdd: () => void add()
+	});
+}
+function ReadyStep({ model }) {
+	const navigate = useNavigate();
+	const workspace = useStore(workspacesStore, (state) => state.byId[state.selectedId ?? state.order[0] ?? ""]);
+	const [draft, setDraft] = useState("");
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState("");
+	if (workspace === void 0) return null;
+	const send = async () => {
+		const text = draft.trim();
+		if (text === "" || busy) return;
+		setError("");
+		setBusy(true);
+		const outcome = await createPlainSession(workspace.id);
+		if (!("sessionId" in outcome)) {
+			setBusy(false);
+			setError(outcome.error);
+			return;
+		}
+		updateComposerState(outcome.sessionId, (state) => ({
+			...state,
+			draft: text,
+			caret: text.length
+		}));
+		submitWhenReady(outcome.sessionId);
+		await navigate({
+			to: "/session/$sessionId",
+			params: { sessionId: outcome.sessionId }
+		});
+	};
+	return /* @__PURE__ */ jsx(ElegantOnboardingReady, {
+		model,
+		root: workspace.root,
+		draft,
+		busy,
+		...error === "" ? {} : { error },
+		suggestions: SUGGESTIONS,
+		onDraftChange: setDraft,
+		onSend: () => void send()
+	});
+}
+/**
+* First run in place of the empty welcome: only the setup steps still missing, then the
+* first task. Finished steps are read from the hub, so nothing new is persisted.
+*/
+function ElegantOnboardingFlow() {
+	const updateRequired = useStore(sessionsStore, (state) => state.updateRequired);
+	const hydrated = useStore(workspacesStore, (state) => state.hydrated);
+	const hasWorkspace = useStore(workspacesStore, (state) => state.order.length > 0);
+	const [providers, setProviders] = useState(null);
+	const [steps, setSteps] = useState(null);
+	const reload = useCallback(() => {
+		listProviders().then((result) => setProviders("providers" in result ? result.providers : "unavailable"));
+	}, []);
+	useEffect(reload, [reload]);
+	if (updateRequired) return /* @__PURE__ */ jsx(WelcomePanel, {});
+	if (providers === null || !hydrated) return null;
+	const models = providers === "unavailable" ? [] : providers.filter((provider) => provider.kind !== "po-feature");
+	const connected = models.find((provider) => provider.authenticated !== void 0);
+	const pending = [...providers === "unavailable" || connected !== void 0 ? [] : ["model"], ...hasWorkspace ? [] : ["workspace"]];
+	if (steps === null && pending.length > 0) return /* @__PURE__ */ jsx(ElegantOnboardingWelcome, {
+		pending,
+		onBegin: () => setSteps(pending)
+	});
+	if (pending[0] === "model") return /* @__PURE__ */ jsx(ModelStep, {
+		pending: steps ?? pending,
+		models,
+		onConnected: reload
+	});
+	if (pending[0] === "workspace") return /* @__PURE__ */ jsx(WorkspaceStep, { pending: steps ?? pending });
+	return /* @__PURE__ */ jsx(ReadyStep, { model: connected?.name ?? "your model" });
+}
+//#endregion
 //#region src/extensions/(frontend)/template/_components/ElegantConversation.tsx
 function ElegantConversation() {
 	useWebPluginRegistry();
@@ -1010,18 +1580,19 @@ function ElegantConversation() {
 				}),
 				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",
+					className: "border-b border-po-cyan/30 bg-po-cyan/10 px-4 py-2 text-center text-base font-medium text-po-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, {}),
+				content: mcpView ? /* @__PURE__ */ jsx(SessionMcp, { state: mcp }, sessionId) : tab ? /* @__PURE__ */ jsx(tab.panel, { ...slotProps }) : noSessions ? /* @__PURE__ */ jsx(ElegantOnboardingFlow, {}) : /* @__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,
+					tabId,
 					onClose: closeActivity,
 					onOpenContent: () => setMobileActivityOpen(false)
 				})
@@ -1070,21 +1641,21 @@ function ElegantSettings() {
 	]);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": "settings",
-		className: "flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-doom-bg",
+		className: "flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-po-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",
+			className: "grid shrink-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-2 gap-y-2 border-b border-po-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",
+					className: "order-1 min-w-0 truncate text-xl font-semibold text-po-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",
+					className: "order-3 col-span-2 flex w-full items-center gap-1 rounded-lg bg-po-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",
+						className: "min-h-8 flex-1 justify-center rounded-md px-4 focus-visible:ring-2 focus-visible:ring-po-green sm:flex-none",
 						"aria-current": workspace === "general" ? "true" : void 0,
 						children: /* @__PURE__ */ jsx(Link, {
 							to: "/settings/$section",
@@ -1096,7 +1667,7 @@ function ElegantSettings() {
 					}), /* @__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",
+						className: "min-h-8 flex-1 justify-center rounded-md px-4 focus-visible:ring-2 focus-visible:ring-po-green sm:flex-none",
 						"aria-current": workspace === "repository" ? "true" : void 0,
 						children: /* @__PURE__ */ jsx(Link, {
 							to: "/settings/$section",