@oh-my-pi/pi-coding-agent 16.4.4 → 16.4.5

package/src/modes/controllers/extension-ui-controller.ts

@@ -5,6 +5,9 @@ import { KeybindingsManager } from "../../config/keybindings";
 import type {
 	CompactOptions,
 	ExtensionActions,
+	ExtensionAskDialogQuestion,
+	ExtensionAskDialogResult,
+	ExtensionAskDialogResultItem,
 	ExtensionCommandContextActions,
 	ExtensionContextActions,
 	ExtensionError,
@@ -19,6 +22,7 @@ import type {
 } from "../../extensibility/extensions";
 import { getSessionSlashCommands } from "../../extensibility/extensions/get-commands-handler";
 import { createExtensionModelQuery } from "../../extensibility/extensions/model-api";
+import { AskDialogComponent, boundPromptTitle } from "../../modes/components/ask-dialog";
 import { HookEditorComponent } from "../../modes/components/hook-editor";
 import { HookInputComponent } from "../../modes/components/hook-input";
 import { HookSelectorComponent, type HookSelectorSlider } from "../../modes/components/hook-selector";
@@ -28,12 +32,26 @@ import { normalizeCustomMessagePayload, USER_INTERRUPT_LABEL } from "../../sessi
 import { setSessionTerminalTitle, setTerminalTitle } from "../../utils/title-generator";
 
 const MAX_WIDGET_LINES = 10;
+const ASK_OTHER_OPTION = "Other (type your own)";
+const ASK_CHAT_OPTION = "Chat about this";
+const ASK_NEXT_OPTION = "Next →";
 
 interface CollabDialogWinner {
 	source: "local" | "remote";
 	value: string | undefined;
 }
 
+interface CollabAskDialogWinner {
+	source: "local" | "remote";
+	value: ExtensionAskDialogResult | undefined;
+}
+/** Tagged result from a guest UI request, distinguishing a real answer (even
+ *  one whose literal value is "unavailable"), an explicit guest cancel, and a
+ *  transport-unavailable sentinel (collab teardown / abort). Replaces the old
+ *  `string | "unavailable" | undefined` channel that let a guest answer of
+ *  "unavailable" collide with the transport sentinel. */
+type GuestUiResult = { kind: "answered"; value: string } | { kind: "cancelled" } | { kind: "unavailable" };
+
 function toWireSelectOptions(options: ExtensionUISelectItem[]): CollabUiSelectItem[] {
 	return options.map(option =>
 		typeof option === "string"
@@ -65,6 +83,7 @@ export class ExtensionUiController {
 			select: (title, options, dialogOptions) => this.showCollabAwareSelector(title, options, dialogOptions),
 			confirm: (title, message, _dialogOptions) => this.showHookConfirm(title, message),
 			input: (title, placeholder, dialogOptions) => this.showHookInput(title, placeholder, dialogOptions),
+			askDialog: (questions, dialogOptions) => this.showAskDialog(questions, dialogOptions),
 			notify: (message, type) => this.showHookNotify(message, type),
 			onTerminalInput: handler => this.addExtensionTerminalInputListener(handler),
 			setStatus: (key, text) => this.setHookStatus(key, text),
@@ -558,6 +577,106 @@ export class ExtensionUiController {
 		);
 	}
 
+	async showAskDialog(
+		questions: ExtensionAskDialogQuestion[],
+		dialogOptions?: ExtensionUIDialogOptions,
+	): Promise<ExtensionAskDialogResult | undefined> {
+		const host = this.ctx.collabHost;
+		if (!host) return this.#showLocalAskDialog(questions, dialogOptions);
+		const localAbort = new AbortController();
+		const remoteAbort = new AbortController();
+		const parentSignal = dialogOptions?.signal;
+		const localSignal = parentSignal ? AbortSignal.any([parentSignal, localAbort.signal]) : localAbort.signal;
+		const remoteSignal = parentSignal ? AbortSignal.any([parentSignal, remoteAbort.signal]) : remoteAbort.signal;
+		const localWinner = this.#showLocalAskDialog(questions, { ...dialogOptions, signal: localSignal }).then(
+			(value): CollabAskDialogWinner => ({ source: "local", value }),
+		);
+		const remoteWinner: Promise<CollabAskDialogWinner> = this.#runGuestAskDialog(questions, remoteSignal).then(
+			result => (result === "unavailable" ? localWinner : { source: "remote", value: result }),
+		);
+		const winner = await Promise.race([localWinner, remoteWinner]);
+		if (winner.source === "remote") localAbort.abort();
+		else remoteAbort.abort();
+		return winner.value;
+	}
+
+	#showLocalAskDialog(
+		questions: ExtensionAskDialogQuestion[],
+		dialogOptions?: ExtensionUIDialogOptions,
+	): Promise<ExtensionAskDialogResult | undefined> {
+		return this.#presentDialog<ExtensionAskDialogResult>(dialogOptions?.signal, settle => {
+			let askDialog: AskDialogComponent | undefined;
+			let promptEditor: HookEditorComponent | undefined;
+			let promptResolve: ((value: string | undefined) => void) | undefined;
+			let closed = false;
+
+			const restoreAskDialog = (): void => {
+				if (closed || !askDialog) return;
+				this.ctx.editorContainer.clear();
+				this.ctx.editorContainer.addChild(askDialog);
+				this.ctx.ui.setFocus(askDialog);
+				this.ctx.ui.requestRender();
+			};
+
+			const finishPrompt = (value: string | undefined): void => {
+				const resolvePrompt = promptResolve;
+				promptResolve = undefined;
+				promptEditor = undefined;
+				restoreAskDialog();
+				resolvePrompt?.(value);
+			};
+
+			const promptForText = (title: string, prefill?: string): Promise<string | undefined> => {
+				if (closed) return Promise.resolve(undefined);
+				const { promise, resolve } = Promise.withResolvers<string | undefined>();
+				promptResolve = resolve;
+				promptEditor = new HookEditorComponent(
+					this.ctx.ui,
+					title,
+					prefill,
+					value => finishPrompt(value),
+					() => finishPrompt(undefined),
+					{ promptStyle: true },
+				);
+				this.ctx.editorContainer.clear();
+				this.ctx.editorContainer.addChild(promptEditor);
+				this.ctx.ui.setFocus(promptEditor);
+				this.ctx.ui.requestRender();
+				return promise;
+			};
+
+			askDialog = new AskDialogComponent(
+				questions,
+				{
+					onSubmit: result => settle(result),
+					onCancel: () => settle(undefined),
+					onPrompt: promptForText,
+				},
+				{
+					timeout: dialogOptions?.timeout,
+					onTimeout: dialogOptions?.onTimeout,
+					tui: this.ctx.ui,
+				},
+			);
+			this.ctx.editorContainer.clear();
+			this.ctx.editorContainer.addChild(askDialog);
+			this.ctx.ui.setFocus(askDialog);
+			this.ctx.ui.requestRender();
+
+			return () => {
+				closed = true;
+				askDialog?.dispose();
+				promptResolve?.(undefined);
+				promptResolve = undefined;
+				promptEditor = undefined;
+				this.ctx.editorContainer.clear();
+				this.ctx.editorContainer.addChild(this.ctx.editor);
+				this.ctx.ui.setFocus(this.ctx.editor);
+				this.ctx.ui.requestRender();
+			};
+		});
+	}
+
 	/**
 	 * Race the local hook dialog against a mirrored guest ask. First *answer*
 	 * wins and cancels the other side. A remote `unavailable` settlement
@@ -591,6 +710,134 @@ export class ExtensionUiController {
 		return winner.value;
 	}
 
+	async #runGuestAskDialog(
+		questions: ExtensionAskDialogQuestion[],
+		signal: AbortSignal,
+	): Promise<ExtensionAskDialogResult | "unavailable" | undefined> {
+		const results: ExtensionAskDialogResultItem[] = [];
+		for (const question of questions) {
+			const result = await this.#runGuestAskQuestion(question, signal);
+			if (result === "unavailable" || result === undefined) return result;
+			if (result === "chat") return { kind: "chat" };
+			results.push(result);
+		}
+		return { kind: "submit", results };
+	}
+
+	async #runGuestAskQuestion(
+		question: ExtensionAskDialogQuestion,
+		signal: AbortSignal,
+	): Promise<ExtensionAskDialogResultItem | "chat" | "unavailable" | undefined> {
+		const selected = new Set<string>();
+		let customInput: string | undefined;
+		const baseOptions: CollabUiSelectItem[] = question.options.map(option =>
+			option.description?.trim() ? { label: option.label, description: option.description.trim() } : option.label,
+		);
+		if (question.multi) {
+			while (true) {
+				const checkedIndices = question.options
+					.map((option, index) => (selected.has(option.label) ? index : -1))
+					.filter(index => index >= 0);
+				// Mirror the local dialog's Next gating: omit the Next option until
+				// at least one option is checked or a custom answer exists, so a
+				// guest cannot submit an empty multi-select result
+				// (PRRT_kwDOQxs0bc6OFbDW). The remote select has no "disabled" row
+				// concept, so we omit rather than dim it.
+				const hasAnswer = selected.size > 0 || customInput !== undefined;
+				const options = [...baseOptions, ASK_OTHER_OPTION];
+				if (hasAnswer) options.push(ASK_NEXT_OPTION);
+				options.push(ASK_CHAT_OPTION);
+				const choice = await this.#requestGuestUiString(
+					{
+						kind: "select",
+						title: question.question,
+						options,
+						selectionMarker: "checkbox",
+						checkedIndices,
+						markableCount: question.options.length,
+						helpText: hasAnswer
+							? "up/down navigate  enter toggle  Next → continue  esc cancel"
+							: "up/down navigate  enter toggle  esc cancel",
+					},
+					signal,
+				);
+				if (choice.kind === "unavailable") return "unavailable";
+				if (choice.kind === "cancelled") return undefined;
+				if (choice.value === ASK_CHAT_OPTION) return "chat";
+				if (choice.value === ASK_NEXT_OPTION) break;
+				if (choice.value === ASK_OTHER_OPTION) {
+					const input = await this.#requestGuestUiString(
+						{ kind: "editor", title: boundPromptTitle("Custom answer: ", question.question) },
+						signal,
+					);
+					if (input.kind === "unavailable") return "unavailable";
+					// Guest cancelled the Other editor: keep the ask open and
+					// return to the option list instead of cancelling the whole ask.
+					if (input.kind === "cancelled") continue;
+					customInput = input.value;
+					break;
+				}
+				if (selected.has(choice.value)) selected.delete(choice.value);
+				else selected.add(choice.value);
+			}
+		} else {
+			const recommended =
+				typeof question.recommended === "number" && Number.isInteger(question.recommended)
+					? question.recommended
+					: 0;
+			const initialIndex = Math.max(0, Math.min(recommended, Math.max(0, question.options.length - 1)));
+			while (true) {
+				const choice = await this.#requestGuestUiString(
+					{
+						kind: "select",
+						title: question.question,
+						options: [...baseOptions, ASK_OTHER_OPTION, ASK_CHAT_OPTION],
+						initialIndex,
+						selectionMarker: "radio",
+						markableCount: question.options.length,
+						helpText: "up/down navigate  enter select  esc cancel",
+					},
+					signal,
+				);
+				if (choice.kind === "unavailable") return "unavailable";
+				if (choice.kind === "cancelled") return undefined;
+				if (choice.value === ASK_CHAT_OPTION) return "chat";
+				if (choice.value === ASK_OTHER_OPTION) {
+					const input = await this.#requestGuestUiString(
+						{ kind: "editor", title: boundPromptTitle("Custom answer: ", question.question) },
+						signal,
+					);
+					if (input.kind === "unavailable") return "unavailable";
+					// Guest cancelled the Other editor: re-show the select list
+					// instead of cancelling the whole ask.
+					if (input.kind === "cancelled") continue;
+					customInput = input.value;
+				} else {
+					selected.add(choice.value);
+				}
+				break;
+			}
+		}
+		return {
+			id: question.id,
+			question: question.question,
+			options: question.options.map(option => option.label),
+			multi: question.multi ?? false,
+			selectedOptions: question.options.map(option => option.label).filter(label => selected.has(label)),
+			customInput,
+		};
+	}
+
+	async #requestGuestUiString(request: CollabUiRequestDraft, signal: AbortSignal): Promise<GuestUiResult> {
+		const host = this.ctx.collabHost;
+		if (!host) return { kind: "unavailable" };
+		const remote = host.requestGuestUi(request, signal);
+		if (!remote) return { kind: "unavailable" };
+		const result = await remote;
+		if (result.kind === "unavailable") return { kind: "unavailable" };
+		return typeof result.value === "string" ? { kind: "answered", value: result.value } : { kind: "cancelled" };
+	}
+
 	/**
 	 * Show a selector for hooks.
 	 */
@@ -894,11 +1141,11 @@ export class ExtensionUiController {
 	 * the current dialog and hands the surface to the next queued request. A request
 	 * whose signal aborts before its turn resolves `undefined` and is never shown.
 	 */
-	#presentDialog(
+	#presentDialog<T = string>(
 		signal: AbortSignal | undefined,
-		present: (settle: (value: string | undefined) => void) => () => void,
-	): Promise<string | undefined> {
-		const { promise, resolve, reject } = Promise.withResolvers<string | undefined>();
+		present: (settle: (value: T | undefined) => void) => () => void,
+	): Promise<T | undefined> {
+		const { promise, resolve, reject } = Promise.withResolvers<T | undefined>();
 		let settled = false;
 		let started = false;
 		let hide: (() => void) | undefined;
@@ -907,7 +1154,7 @@ export class ExtensionUiController {
 			settle(undefined);
 		}
 
-		const settle = (value: string | undefined): void => {
+		const settle = (value: T | undefined): void => {
 			if (settled) return;
 			settled = true;
 			signal?.removeEventListener("abort", onAbort);

package/src/modes/controllers/selector-controller.ts

@@ -3,7 +3,7 @@ import { PASTE_CODE_LOGIN_PROVIDERS } from "@oh-my-pi/pi-ai";
 import { getOAuthProviders } from "@oh-my-pi/pi-ai/oauth";
 import type { OAuthProvider } from "@oh-my-pi/pi-ai/oauth/types";
 import type { Component, OverlayHandle } from "@oh-my-pi/pi-tui";
-import { Input, Loader, Spacer, setTuiTight, Text } from "@oh-my-pi/pi-tui";
+import { Loader, Spacer, setTuiTight, Text } from "@oh-my-pi/pi-tui";
 import { getAgentDbPath, getAgentDir, getProjectDir, normalizePathForComparison } from "@oh-my-pi/pi-utils";
 import {
 	type AdvisorConfigScope,
@@ -65,8 +65,9 @@ import { AssistantMessageComponent } from "../components/assistant-message";
 import { CopySelectorComponent } from "../components/copy-selector";
 import { ExtensionDashboard } from "../components/extensions";
 import { HistorySearchComponent } from "../components/history-search";
+import { LoginDialogComponent } from "../components/login-dialog";
 import { LogoutAccountSelectorComponent } from "../components/logout-account-selector";
-import { ModelSelectorComponent } from "../components/model-selector";
+import { ModelHubComponent, type ModelHubMode } from "../components/model-hub";
 import { OAuthSelectorComponent } from "../components/oauth-selector";
 import { PluginSelectorComponent } from "../components/plugin-selector";
 import { ResetUsageSelectorComponent } from "../components/reset-usage-selector";
@@ -585,23 +586,45 @@ export class SelectorController {
 	}
 
 	showModelSelector(options?: { temporaryOnly?: boolean }): void {
+		this.#showModelHub({ mode: options?.temporaryOnly ? "pick" : "roles" });
+	}
+
+	/**
+	 * Fullscreen model hub on the alternate screen (the /settings idiom): the
+	 * overlay enables mouse tracking for its lifetime and the transcript stays
+	 * untouched underneath. `initialProviderId` preselects a provider's sidebar
+	 * entry — used when reopening the hub after a /login round-trip.
+	 */
+	#showModelHub(hubOptions: { mode: ModelHubMode; initialProviderId?: string }): void {
 		const currentContextTokens = this.ctx.session.getContextUsage()?.tokens ?? 0;
-		this.showSelector(done => {
-			const selector = new ModelSelectorComponent(
-				this.ctx.ui,
-				this.ctx.session.model,
-				this.ctx.settings,
-				this.ctx.session.modelRegistry,
-				this.ctx.session.scopedModels,
-				async (model, role, thinkingLevel, selector, action) => {
+		let overlayHandle: OverlayHandle | undefined;
+		let hub: ModelHubComponent | undefined;
+		let closed = false;
+		const done = () => {
+			// Re-entrant guard: cancel paths (Esc, pick, login forward) may race;
+			// the overlay must hide exactly once.
+			if (closed) return;
+			closed = true;
+			hub?.dispose();
+			overlayHandle?.hide();
+			this.focusActiveEditorArea();
+			this.ctx.ui.requestRender();
+		};
+		hub = new ModelHubComponent(
+			this.ctx.ui,
+			this.ctx.settings,
+			this.ctx.session.modelRegistry,
+			this.ctx.session.scopedModels,
+			{
+				onAssign: async (model, role, thinkingLevel, selector, action) => {
 					// `auto` is session-global: never baked into a per-role model value
 					// (it can't round-trip through `model:<level>`). Apply it to the session
 					// separately and persist via `defaultThinkingLevel`.
 					const isAuto = thinkingLevel === AUTO_THINKING;
-					const concreteThinking = isAuto ? undefined : thinkingLevel;
+					const concreteThinking = isAuto || thinkingLevel === undefined ? undefined : thinkingLevel;
 					const selectorValue = selector ?? `${model.provider}/${model.id}`;
 					try {
-						if (action === "retryFallback" && role !== null) {
+						if (action === "retryFallback") {
 							const fallbackSelector = formatModelSelectorValue(selectorValue, concreteThinking);
 							const fallbackChains = this.ctx.settings.get("retry.fallbackChains");
 							const chain = Array.isArray(fallbackChains[role]) ? fallbackChains[role] : [];
@@ -610,25 +633,10 @@ export class SelectorController {
 								[role]: [fallbackSelector, ...chain.filter(existing => existing !== fallbackSelector)],
 							});
 							const roleInfo = getRoleInfo(role, settings);
-							const roleLabel = roleInfo?.name ?? role;
-							this.ctx.showStatus(`${roleLabel} fallback model: ${fallbackSelector}`);
+							this.ctx.showStatus(`${roleInfo?.name ?? role} fallback model: ${fallbackSelector}`);
 							return;
 						}
-						if (role === null) {
-							// Temporary: update agent state but don't persist the model to settings
-							await this.ctx.session.setModelTemporary(model);
-							if (isAuto) {
-								this.ctx.session.setThinkingLevel(AUTO_THINKING, true);
-							}
-							this.ctx.statusLine.invalidate();
-							this.ctx.updateEditorBorderColor();
-							const roleSelectorHint = this.ctx.keybindings.getKeys("app.model.select")[0] ?? "Alt+M";
-							this.ctx.showStatus(
-								`Session-only model: ${selector ?? model.id}. Use ${roleSelectorHint} or /model for roles.`,
-							);
-							done();
-							this.ctx.ui.requestRender();
-						} else if (role === "default") {
+						if (role === "default") {
 							const { switched } = await this.ctx.session.setModel(model, role, {
 								selector,
 								thinkingLevel: concreteThinking,
@@ -649,33 +657,82 @@ export class SelectorController {
 								this.ctx.updateEditorBorderColor();
 							}
 							this.ctx.showStatus(`Default model: ${selector ?? model.id}`);
-							// Don't call done() - selector stays open for role assignment
 						} else {
-							// Other roles (smol, slow): just update settings, not current model
-							this.ctx.settings.setModelRole(
-								role,
-								formatModelSelectorValue(selector ?? `${model.provider}/${model.id}`, concreteThinking),
-							);
+							// Other roles (smol, slow, custom): update settings, not the current model.
+							this.ctx.settings.setModelRole(role, formatModelSelectorValue(selectorValue, concreteThinking));
 							if (isAuto) {
 								this.ctx.session.setThinkingLevel(AUTO_THINKING, true);
 							}
 							const roleInfo = getRoleInfo(role, settings);
-							const roleLabel = roleInfo?.name ?? role;
-							this.ctx.showStatus(`${roleLabel} model: ${selector ?? model.id}`);
-							// Don't call done() - selector stays open
+							this.ctx.showStatus(`${roleInfo?.name ?? role} model: ${selector ?? model.id}`);
 						}
 					} catch (error) {
 						this.ctx.showError(error instanceof Error ? error.message : String(error));
 					}
 				},
-				() => {
+				onUnassign: role => {
+					try {
+						this.ctx.settings.setModelRole(role, undefined);
+						const roleInfo = getRoleInfo(role, settings);
+						this.ctx.showStatus(`${roleInfo?.name ?? role} role cleared — auto-selection applies`);
+					} catch (error) {
+						this.ctx.showError(error instanceof Error ? error.message : String(error));
+					}
+				},
+				onPick: async (model, selector) => {
+					try {
+						// Session-only: update agent state but don't persist the model to settings.
+						await this.ctx.session.setModelTemporary(model);
+						this.ctx.statusLine.invalidate();
+						this.ctx.updateEditorBorderColor();
+						const roleSelectorHint = this.ctx.keybindings.getKeys("app.model.select")[0] ?? "Alt+M";
+						this.ctx.showStatus(
+							`Session-only model: ${selector ?? model.id}. Use ${roleSelectorHint} or /model for roles.`,
+						);
+						done();
+					} catch (error) {
+						this.ctx.showError(error instanceof Error ? error.message : String(error));
+					}
+				},
+				onLoginRequest: providerId => {
 					done();
-					this.ctx.ui.requestRender();
+					void this.#loginThenReopenModelHub(providerId);
 				},
-				{ ...options, currentContextTokens },
-			);
-			return { component: selector, focus: selector };
+				onCycleOrderChange: order => {
+					try {
+						this.ctx.settings.set("cycleOrder", order);
+						this.ctx.showStatus(
+							order.length > 0 ? `Quick-switch cycle: ${order.join(" → ")}` : "Quick-switch cycle cleared",
+						);
+					} catch (error) {
+						this.ctx.showError(error instanceof Error ? error.message : String(error));
+					}
+				},
+				onCancel: () => done(),
+			},
+			{
+				mode: hubOptions.mode,
+				currentContextTokens,
+				initialProviderId: hubOptions.initialProviderId,
+			},
+		);
+		overlayHandle = this.ctx.ui.showOverlay(hub, {
+			anchor: "bottom-center",
+			width: "100%",
+			maxHeight: "100%",
+			margin: 0,
+			fullscreen: true,
 		});
+		this.ctx.ui.setFocus(hub);
+		this.ctx.ui.requestRender();
+	}
+
+	/** /login round-trip for a locked provider; reopen the hub on that provider only after a successful login. */
+	async #loginThenReopenModelHub(providerId: string): Promise<void> {
+		const succeeded = await this.#handleOAuthLogin(providerId);
+		if (succeeded) {
+			this.#showModelHub({ mode: "roles", initialProviderId: providerId });
+		}
 	}
 
 	async showPluginSelector(mode: "install" | "uninstall" = "install"): Promise<void> {
@@ -1122,60 +1179,51 @@ export class SelectorController {
 		await this.showSessionSelector();
 	}
 
-	async #handleOAuthLogin(providerId: string): Promise<void> {
+	/**
+	 * Run the OAuth login flow for `providerId` inside a cancellable
+	 * {@link LoginDialogComponent} that replaces the editor slot. Esc aborts:
+	 * the dialog's abort signal reaches the provider flow, any pending prompt
+	 * rejects, and the editor is restored immediately. Returns true when
+	 * credentials were stored.
+	 */
+	async #handleOAuthLogin(providerId: string): Promise<boolean> {
 		this.ctx.showStatus(`Logging in to ${providerId}…`);
 		const manualInput = this.ctx.oauthManualInput;
 		const useManualInput = PASTE_CODE_LOGIN_PROVIDERS.has(providerId);
+		let restored = false;
+		const restoreEditor = () => {
+			if (restored) return;
+			restored = true;
+			this.ctx.editorContainer.clear();
+			this.ctx.editorContainer.addChild(this.ctx.editor);
+			this.ctx.ui.setFocus(this.ctx.editor);
+			this.ctx.ui.requestRender();
+		};
+		const dialog = new LoginDialogComponent(this.ctx.ui, providerId, (_success, message) => {
+			// Fires on Esc: unblock the editor immediately; the aborted flow's
+			// rejection settles the awaited login below.
+			restoreEditor();
+			if (message) this.ctx.showStatus(message);
+		});
+		this.ctx.editorContainer.clear();
+		this.ctx.editorContainer.addChild(dialog);
+		this.ctx.ui.setFocus(dialog);
+		this.ctx.ui.requestRender();
 		try {
 			await this.ctx.session.modelRegistry.authStorage.login(providerId as OAuthProvider, {
+				signal: dialog.signal,
 				onAuth: (info: { url: string; launchUrl?: string; instructions?: string }) => {
-					const block = new TranscriptBlock();
-					// Full URL first: works from any machine, including SSH boxes
-					// where the OMP-hosted `launchUrl` would resolve against the
-					// user's local browser and fail.
-					block.addChild(new Text(theme.fg("dim", info.url), 1, 0));
-					const hyperlink = `\x1b]8;;${info.url}\x07Click here to login\x1b]8;;\x07`;
-					block.addChild(new Text(theme.fg("accent", hyperlink), 1, 0));
-					if (info.launchUrl && info.launchUrl !== info.url) {
-						block.addChild(
-							new Text(theme.fg("dim", `Local shortcut (this machine only): ${info.launchUrl}`), 1, 0),
-						);
-					}
-					if (info.instructions) {
-						block.addChild(new Spacer(1));
-						block.addChild(new Text(theme.fg("warning", info.instructions), 1, 0));
-					}
+					// The dialog renders the full URL (SSH-safe copy target) and
+					// opens the browser best-effort.
+					dialog.showAuth(info.url, info.instructions, info.launchUrl);
 					if (useManualInput) {
-						block.addChild(new Spacer(1));
-						block.addChild(new Text(theme.fg("dim", MANUAL_LOGIN_TIP), 1, 0));
+						dialog.showProgress(MANUAL_LOGIN_TIP);
 					}
-					this.ctx.present(block);
-					this.ctx.openInBrowser(info.url);
-				},
-				onPrompt: async (prompt: { message: string; placeholder?: string }) => {
-					const promptBlock = new TranscriptBlock();
-					promptBlock.addChild(new Text(theme.fg("warning", prompt.message), 1, 0));
-					if (prompt.placeholder) {
-						promptBlock.addChild(new Text(theme.fg("dim", prompt.placeholder), 1, 0));
-					}
-					this.ctx.present(promptBlock);
-					const { promise, resolve } = Promise.withResolvers<string>();
-					const codeInput = new Input();
-					codeInput.onSubmit = () => {
-						const code = codeInput.getValue();
-						this.ctx.editorContainer.clear();
-						this.ctx.editorContainer.addChild(this.ctx.editor);
-						this.ctx.ui.setFocus(this.ctx.editor);
-						resolve(code);
-					};
-					this.ctx.editorContainer.clear();
-					this.ctx.editorContainer.addChild(codeInput);
-					this.ctx.ui.setFocus(codeInput);
-					this.ctx.ui.requestRender();
-					return promise;
 				},
+				onPrompt: (prompt: { message: string; placeholder?: string }) =>
+					dialog.showPrompt(prompt.message, prompt.placeholder),
 				onProgress: (message: string) => {
-					this.ctx.present(new Text(theme.fg("dim", message), 1, 0));
+					dialog.showProgress(message);
 				},
 				onManualCodeInput: useManualInput ? () => manualInput.waitForInput(providerId) : undefined,
 			});
@@ -1186,12 +1234,20 @@ export class SelectorController {
 			);
 			block.addChild(new Text(theme.fg("dim", `Credentials saved to ${getAgentDbPath()}`), 1, 0));
 			this.ctx.present(block);
+			return true;
 		} catch (error: unknown) {
+			if (dialog.signal.aborted) {
+				// User-cancelled: the dialog already restored the editor and
+				// surfaced "Login cancelled".
+				return false;
+			}
 			this.ctx.showError(`Login failed: ${error instanceof Error ? error.message : String(error)}`);
+			return false;
 		} finally {
 			if (useManualInput) {
 				manualInput.clear(`Manual OAuth input cleared for ${providerId}`);
 			}
+			restoreEditor();
 		}
 	}
 

package/src/modes/controllers/tan-command-controller.ts

@@ -160,7 +160,7 @@ export class TanCommandController {
 						}
 					}
 				},
-				{ ownerId },
+				{ ownerId, agentId: cloneId },
 			);
 		} catch (error) {
 			if (cloneFile) await removeCloneSession(cloneFile);

package/src/modes/interactive-mode.ts

@@ -566,6 +566,9 @@ export class InteractiveMode implements InteractiveModeContext {
 	get focusedAgentId(): string | undefined {
 		return this.#focusController.focusedAgentId;
 	}
+	get sessionName(): string | undefined {
+		return this.session.sessionName;
+	}
 	focusAgentSession(id: string): Promise<void> {
 		return this.#focusController.focusAgent(id);
 	}

package/src/modes/shared.ts

@@ -18,7 +18,7 @@ export function sanitizeStatusText(text: string): string {
 // Tab Bar Theme
 // ═══════════════════════════════════════════════════════════════════════════
 
-/** Shared tab bar theme used by model-selector and settings-selector. */
+/** Shared tab bar theme used by fullscreen overlays (settings, agent hub). */
 export function getTabBarTheme(): TabBarTheme {
 	return {
 		label: (text: string) => theme.bold(theme.fg("accent", text)),