Improve OAuth login UI with consistent dialog component

- Add LoginDialogComponent with proper borders (top/bottom DynamicBorder)
- Refactor all OAuth providers to use racing approach (browser callback vs manual paste)
- Add onEscape handler to Input component for cancellation
- Add abortable sleep for GitHub Copilot polling (instant cancel on Escape)
- Show OS-specific click hint (Cmd+click on macOS, Ctrl+click elsewhere)
- Clear content between login phases (fixes GitHub Copilot two-phase flow)
- Use InteractiveMode's showStatus/showError for result messages
- Reorder providers: Anthropic, ChatGPT, GitHub Copilot, Gemini CLI, Antigravity

packages/ai/src/utils/oauth/github-copilot.ts

@@ -136,17 +136,45 @@ async function startDeviceFlow(domain: string): Promise<DeviceCodeResponse> {
 	};
 }
 
+/**
+ * Sleep that can be interrupted by an AbortSignal
+ */
+function abortableSleep(ms: number, signal?: AbortSignal): Promise<void> {
+	return new Promise((resolve, reject) => {
+		if (signal?.aborted) {
+			reject(new Error("Login cancelled"));
+			return;
+		}
+
+		const timeout = setTimeout(resolve, ms);
+
+		signal?.addEventListener(
+			"abort",
+			() => {
+				clearTimeout(timeout);
+				reject(new Error("Login cancelled"));
+			},
+			{ once: true },
+		);
+	});
+}
+
 async function pollForGitHubAccessToken(
 	domain: string,
 	deviceCode: string,
 	intervalSeconds: number,
 	expiresIn: number,
+	signal?: AbortSignal,
 ) {
 	const urls = getUrls(domain);
 	const deadline = Date.now() + expiresIn * 1000;
 	let intervalMs = Math.max(1000, Math.floor(intervalSeconds * 1000));
 
 	while (Date.now() < deadline) {
+		if (signal?.aborted) {
+			throw new Error("Login cancelled");
+		}
+
 		const raw = await fetchJson(urls.accessTokenUrl, {
 			method: "POST",
 			headers: {
@@ -168,20 +196,20 @@ async function pollForGitHubAccessToken(
 		if (raw && typeof raw === "object" && typeof (raw as DeviceTokenErrorResponse).error === "string") {
 			const err = (raw as DeviceTokenErrorResponse).error;
 			if (err === "authorization_pending") {
-				await new Promise((resolve) => setTimeout(resolve, intervalMs));
+				await abortableSleep(intervalMs, signal);
 				continue;
 			}
 
 			if (err === "slow_down") {
 				intervalMs += 5000;
-				await new Promise((resolve) => setTimeout(resolve, intervalMs));
+				await abortableSleep(intervalMs, signal);
 				continue;
 			}
 
 			throw new Error(`Device flow failed: ${err}`);
 		}
 
-		await new Promise((resolve) => setTimeout(resolve, intervalMs));
+		await abortableSleep(intervalMs, signal);
 	}
 
 	throw new Error("Device flow timed out");
@@ -274,11 +302,13 @@ async function enableAllGitHubCopilotModels(
  * @param options.onAuth - Callback with URL and optional instructions (user code)
  * @param options.onPrompt - Callback to prompt user for input
  * @param options.onProgress - Optional progress callback
+ * @param options.signal - Optional AbortSignal for cancellation
  */
 export async function loginGitHubCopilot(options: {
 	onAuth: (url: string, instructions?: string) => void;
 	onPrompt: (prompt: { message: string; placeholder?: string; allowEmpty?: boolean }) => Promise<string>;
 	onProgress?: (message: string) => void;
+	signal?: AbortSignal;
 }): Promise<OAuthCredentials> {
 	const input = await options.onPrompt({
 		message: "GitHub Enterprise URL/domain (blank for github.com)",
@@ -286,6 +316,10 @@ export async function loginGitHubCopilot(options: {
 		allowEmpty: true,
 	});
 
+	if (options.signal?.aborted) {
+		throw new Error("Login cancelled");
+	}
+
 	const trimmed = input.trim();
 	const enterpriseDomain = normalizeDomain(input);
 	if (trimmed && !enterpriseDomain) {
@@ -301,6 +335,7 @@ export async function loginGitHubCopilot(options: {
 		device.device_code,
 		device.interval,
 		device.expires_in,
+		options.signal,
 	);
 	const credentials = await refreshGitHubCopilotToken(githubAccessToken, enterpriseDomain ?? undefined);
 

packages/ai/src/utils/oauth/google-antigravity.ts

@@ -33,23 +33,21 @@ const TOKEN_URL = "https://oauth2.googleapis.com/token";
 // Fallback project ID when discovery fails
 const DEFAULT_PROJECT_ID = "rising-fact-p41fc";
 
+type CallbackServerInfo = {
+	server: Server;
+	cancelWait: () => void;
+	waitForCode: () => Promise<{ code: string; state: string } | null>;
+};
+
 /**
  * Start a local HTTP server to receive the OAuth callback
  */
-async function startCallbackServer(): Promise<{
-	server: Server;
-	getCode: () => Promise<{ code: string; state: string }>;
-}> {
+async function startCallbackServer(): Promise<CallbackServerInfo> {
 	const { createServer } = await import("http");
 
 	return new Promise((resolve, reject) => {
-		let codeResolve: (value: { code: string; state: string }) => void;
-		let codeReject: (error: Error) => void;
-
-		const codePromise = new Promise<{ code: string; state: string }>((res, rej) => {
-			codeResolve = res;
-			codeReject = rej;
-		});
+		let result: { code: string; state: string } | null = null;
+		let cancelled = false;
 
 		const server = createServer((req, res) => {
 			const url = new URL(req.url || "", `http://localhost:51121`);
@@ -64,7 +62,6 @@ async function startCallbackServer(): Promise<{
 					res.end(
 						`<html><body><h1>Authentication Failed</h1><p>Error: ${error}</p><p>You can close this window.</p></body></html>`,
 					);
-					codeReject(new Error(`OAuth error: ${error}`));
 					return;
 				}
 
@@ -73,13 +70,12 @@ async function startCallbackServer(): Promise<{
 					res.end(
 						`<html><body><h1>Authentication Successful</h1><p>You can close this window and return to the terminal.</p></body></html>`,
 					);
-					codeResolve({ code, state });
+					result = { code, state };
 				} else {
 					res.writeHead(400, { "Content-Type": "text/html" });
 					res.end(
 						`<html><body><h1>Authentication Failed</h1><p>Missing code or state parameter.</p></body></html>`,
 					);
-					codeReject(new Error("Missing code or state in callback"));
 				}
 			} else {
 				res.writeHead(404);
@@ -94,12 +90,40 @@ async function startCallbackServer(): Promise<{
 		server.listen(51121, "127.0.0.1", () => {
 			resolve({
 				server,
-				getCode: () => codePromise,
+				cancelWait: () => {
+					cancelled = true;
+				},
+				waitForCode: async () => {
+					const sleep = () => new Promise((r) => setTimeout(r, 100));
+					while (!result && !cancelled) {
+						await sleep();
+					}
+					return result;
+				},
 			});
 		});
 	});
 }
 
+/**
+ * Parse redirect URL to extract code and state
+ */
+function parseRedirectUrl(input: string): { code?: string; state?: string } {
+	const value = input.trim();
+	if (!value) return {};
+
+	try {
+		const url = new URL(value);
+		return {
+			code: url.searchParams.get("code") ?? undefined,
+			state: url.searchParams.get("state") ?? undefined,
+		};
+	} catch {
+		// Not a URL, return empty
+		return {};
+	}
+}
+
 interface LoadCodeAssistPayload {
 	cloudaicompanionProject?: string | { id?: string };
 	currentTier?: { id?: string };
@@ -226,16 +250,21 @@ export async function refreshAntigravityToken(refreshToken: string, projectId: s
  *
  * @param onAuth - Callback with URL and optional instructions
  * @param onProgress - Optional progress callback
+ * @param onManualCodeInput - Optional promise that resolves with user-pasted redirect URL.
+ *                            Races with browser callback - whichever completes first wins.
  */
 export async function loginAntigravity(
 	onAuth: (info: { url: string; instructions?: string }) => void,
 	onProgress?: (message: string) => void,
+	onManualCodeInput?: () => Promise<string>,
 ): Promise<OAuthCredentials> {
 	const { verifier, challenge } = await generatePKCE();
 
 	// Start local server for callback
 	onProgress?.("Starting local server for OAuth callback...");
-	const { server, getCode } = await startCallbackServer();
+	const server = await startCallbackServer();
+
+	let code: string | undefined;
 
 	try {
 		// Build authorization URL
@@ -256,16 +285,75 @@ export async function loginAntigravity(
 		// Notify caller with URL to open
 		onAuth({
 			url: authUrl,
-			instructions: "Complete the sign-in in your browser. The callback will be captured automatically.",
+			instructions: "Complete the sign-in in your browser.",
 		});
 
-		// Wait for the callback
+		// Wait for the callback, racing with manual input if provided
 		onProgress?.("Waiting for OAuth callback...");
-		const { code, state } = await getCode();
 
-		// Verify state matches
-		if (state !== verifier) {
-			throw new Error("OAuth state mismatch - possible CSRF attack");
+		if (onManualCodeInput) {
+			// Race between browser callback and manual input
+			let manualInput: string | undefined;
+			let manualError: Error | undefined;
+			const manualPromise = onManualCodeInput()
+				.then((input) => {
+					manualInput = input;
+					server.cancelWait();
+				})
+				.catch((err) => {
+					manualError = err instanceof Error ? err : new Error(String(err));
+					server.cancelWait();
+				});
+
+			const result = await server.waitForCode();
+
+			// If manual input was cancelled, throw that error
+			if (manualError) {
+				throw manualError;
+			}
+
+			if (result?.code) {
+				// Browser callback won - verify state
+				if (result.state !== verifier) {
+					throw new Error("OAuth state mismatch - possible CSRF attack");
+				}
+				code = result.code;
+			} else if (manualInput) {
+				// Manual input won
+				const parsed = parseRedirectUrl(manualInput);
+				if (parsed.state && parsed.state !== verifier) {
+					throw new Error("OAuth state mismatch - possible CSRF attack");
+				}
+				code = parsed.code;
+			}
+
+			// If still no code, wait for manual promise and try that
+			if (!code) {
+				await manualPromise;
+				if (manualError) {
+					throw manualError;
+				}
+				if (manualInput) {
+					const parsed = parseRedirectUrl(manualInput);
+					if (parsed.state && parsed.state !== verifier) {
+						throw new Error("OAuth state mismatch - possible CSRF attack");
+					}
+					code = parsed.code;
+				}
+			}
+		} else {
+			// Original flow: just wait for callback
+			const result = await server.waitForCode();
+			if (result?.code) {
+				if (result.state !== verifier) {
+					throw new Error("OAuth state mismatch - possible CSRF attack");
+				}
+				code = result.code;
+			}
+		}
+
+		if (!code) {
+			throw new Error("No authorization code received");
 		}
 
 		// Exchange code for tokens
@@ -320,6 +408,6 @@ export async function loginAntigravity(
 
 		return credentials;
 	} finally {
-		server.close();
+		server.server.close();
 	}
 }

packages/ai/src/utils/oauth/google-gemini-cli.ts

@@ -25,23 +25,21 @@ const AUTH_URL = "https://accounts.google.com/o/oauth2/v2/auth";
 const TOKEN_URL = "https://oauth2.googleapis.com/token";
 const CODE_ASSIST_ENDPOINT = "https://cloudcode-pa.googleapis.com";
 
+type CallbackServerInfo = {
+	server: Server;
+	cancelWait: () => void;
+	waitForCode: () => Promise<{ code: string; state: string } | null>;
+};
+
 /**
  * Start a local HTTP server to receive the OAuth callback
  */
-async function startCallbackServer(): Promise<{
-	server: Server;
-	getCode: () => Promise<{ code: string; state: string }>;
-}> {
+async function startCallbackServer(): Promise<CallbackServerInfo> {
 	const { createServer } = await import("http");
 
 	return new Promise((resolve, reject) => {
-		let codeResolve: (value: { code: string; state: string }) => void;
-		let codeReject: (error: Error) => void;
-
-		const codePromise = new Promise<{ code: string; state: string }>((res, rej) => {
-			codeResolve = res;
-			codeReject = rej;
-		});
+		let result: { code: string; state: string } | null = null;
+		let cancelled = false;
 
 		const server = createServer((req, res) => {
 			const url = new URL(req.url || "", `http://localhost:8085`);
@@ -56,7 +54,6 @@ async function startCallbackServer(): Promise<{
 					res.end(
 						`<html><body><h1>Authentication Failed</h1><p>Error: ${error}</p><p>You can close this window.</p></body></html>`,
 					);
-					codeReject(new Error(`OAuth error: ${error}`));
 					return;
 				}
 
@@ -65,13 +62,12 @@ async function startCallbackServer(): Promise<{
 					res.end(
 						`<html><body><h1>Authentication Successful</h1><p>You can close this window and return to the terminal.</p></body></html>`,
 					);
-					codeResolve({ code, state });
+					result = { code, state };
 				} else {
 					res.writeHead(400, { "Content-Type": "text/html" });
 					res.end(
 						`<html><body><h1>Authentication Failed</h1><p>Missing code or state parameter.</p></body></html>`,
 					);
-					codeReject(new Error("Missing code or state in callback"));
 				}
 			} else {
 				res.writeHead(404);
@@ -86,12 +82,40 @@ async function startCallbackServer(): Promise<{
 		server.listen(8085, "127.0.0.1", () => {
 			resolve({
 				server,
-				getCode: () => codePromise,
+				cancelWait: () => {
+					cancelled = true;
+				},
+				waitForCode: async () => {
+					const sleep = () => new Promise((r) => setTimeout(r, 100));
+					while (!result && !cancelled) {
+						await sleep();
+					}
+					return result;
+				},
 			});
 		});
 	});
 }
 
+/**
+ * Parse redirect URL to extract code and state
+ */
+function parseRedirectUrl(input: string): { code?: string; state?: string } {
+	const value = input.trim();
+	if (!value) return {};
+
+	try {
+		const url = new URL(value);
+		return {
+			code: url.searchParams.get("code") ?? undefined,
+			state: url.searchParams.get("state") ?? undefined,
+		};
+	} catch {
+		// Not a URL, return empty
+		return {};
+	}
+}
+
 interface LoadCodeAssistPayload {
 	cloudaicompanionProject?: string;
 	currentTier?: { id?: string };
@@ -257,16 +281,21 @@ export async function refreshGoogleCloudToken(refreshToken: string, projectId: s
  *
  * @param onAuth - Callback with URL and optional instructions
  * @param onProgress - Optional progress callback
+ * @param onManualCodeInput - Optional promise that resolves with user-pasted redirect URL.
+ *                            Races with browser callback - whichever completes first wins.
  */
 export async function loginGeminiCli(
 	onAuth: (info: { url: string; instructions?: string }) => void,
 	onProgress?: (message: string) => void,
+	onManualCodeInput?: () => Promise<string>,
 ): Promise<OAuthCredentials> {
 	const { verifier, challenge } = await generatePKCE();
 
 	// Start local server for callback
 	onProgress?.("Starting local server for OAuth callback...");
-	const { server, getCode } = await startCallbackServer();
+	const server = await startCallbackServer();
+
+	let code: string | undefined;
 
 	try {
 		// Build authorization URL
@@ -287,16 +316,75 @@ export async function loginGeminiCli(
 		// Notify caller with URL to open
 		onAuth({
 			url: authUrl,
-			instructions: "Complete the sign-in in your browser. The callback will be captured automatically.",
+			instructions: "Complete the sign-in in your browser.",
 		});
 
-		// Wait for the callback
+		// Wait for the callback, racing with manual input if provided
 		onProgress?.("Waiting for OAuth callback...");
-		const { code, state } = await getCode();
 
-		// Verify state matches
-		if (state !== verifier) {
-			throw new Error("OAuth state mismatch - possible CSRF attack");
+		if (onManualCodeInput) {
+			// Race between browser callback and manual input
+			let manualInput: string | undefined;
+			let manualError: Error | undefined;
+			const manualPromise = onManualCodeInput()
+				.then((input) => {
+					manualInput = input;
+					server.cancelWait();
+				})
+				.catch((err) => {
+					manualError = err instanceof Error ? err : new Error(String(err));
+					server.cancelWait();
+				});
+
+			const result = await server.waitForCode();
+
+			// If manual input was cancelled, throw that error
+			if (manualError) {
+				throw manualError;
+			}
+
+			if (result?.code) {
+				// Browser callback won - verify state
+				if (result.state !== verifier) {
+					throw new Error("OAuth state mismatch - possible CSRF attack");
+				}
+				code = result.code;
+			} else if (manualInput) {
+				// Manual input won
+				const parsed = parseRedirectUrl(manualInput);
+				if (parsed.state && parsed.state !== verifier) {
+					throw new Error("OAuth state mismatch - possible CSRF attack");
+				}
+				code = parsed.code;
+			}
+
+			// If still no code, wait for manual promise and try that
+			if (!code) {
+				await manualPromise;
+				if (manualError) {
+					throw manualError;
+				}
+				if (manualInput) {
+					const parsed = parseRedirectUrl(manualInput);
+					if (parsed.state && parsed.state !== verifier) {
+						throw new Error("OAuth state mismatch - possible CSRF attack");
+					}
+					code = parsed.code;
+				}
+			}
+		} else {
+			// Original flow: just wait for callback
+			const result = await server.waitForCode();
+			if (result?.code) {
+				if (result.state !== verifier) {
+					throw new Error("OAuth state mismatch - possible CSRF attack");
+				}
+				code = result.code;
+			}
+		}
+
+		if (!code) {
+			throw new Error("No authorization code received");
 		}
 
 		// Exchange code for tokens
@@ -351,6 +439,6 @@ export async function loginGeminiCli(
 
 		return credentials;
 	} finally {
-		server.close();
+		server.server.close();
 	}
 }

packages/ai/src/utils/oauth/index.ts

@@ -133,6 +133,11 @@ export function getOAuthProviders(): OAuthProviderInfo[] {
 			name: "Anthropic (Claude Pro/Max)",
 			available: true,
 		},
+		{
+			id: "openai-codex",
+			name: "ChatGPT Plus/Pro (Codex Subscription)",
+			available: true,
+		},
 		{
 			id: "github-copilot",
 			name: "GitHub Copilot",
@@ -148,10 +153,5 @@ export function getOAuthProviders(): OAuthProviderInfo[] {
 			name: "Antigravity (Gemini 3, Claude, GPT-OSS)",
 			available: true,
 		},
-		{
-			id: "openai-codex",
-			name: "ChatGPT Plus/Pro (Codex Subscription)",
-			available: true,
-		},
 	];
 }

packages/ai/src/utils/oauth/openai-codex.ts

@@ -296,15 +296,25 @@ export async function loginOpenAICodex(options: {
 		if (options.onManualCodeInput) {
 			// Race between browser callback and manual input
 			let manualCode: string | undefined;
+			let manualError: Error | undefined;
 			const manualPromise = options
 				.onManualCodeInput()
 				.then((input) => {
 					manualCode = input;
 					server.cancelWait();
 				})
-				.catch(() => {}); // Ignore rejection
+				.catch((err) => {
+					manualError = err instanceof Error ? err : new Error(String(err));
+					server.cancelWait();
+				});
 
 			const result = await server.waitForCode();
+
+			// If manual input was cancelled, throw that error
+			if (manualError) {
+				throw manualError;
+			}
+
 			if (result?.code) {
 				// Browser callback won
 				code = result.code;
@@ -320,6 +330,9 @@ export async function loginOpenAICodex(options: {
 			// If still no code, wait for manual promise to complete and try that
 			if (!code) {
 				await manualPromise;
+				if (manualError) {
+					throw manualError;
+				}
 				if (manualCode) {
 					const parsed = parseAuthorizationInput(manualCode);
 					if (parsed.state && parsed.state !== state) {