feat(oauth): add Qwen OAuth integration

packages/cli/src/ui/App.tsx

@@ -22,6 +22,7 @@ import { useGeminiStream } from './hooks/useGeminiStream.js';
 import { useLoadingIndicator } from './hooks/useLoadingIndicator.js';
 import { useThemeCommand } from './hooks/useThemeCommand.js';
 import { useAuthCommand } from './hooks/useAuthCommand.js';
+import { useQwenAuth } from './hooks/useQwenAuth.js';
 import { useEditorSettings } from './hooks/useEditorSettings.js';
 import { useSlashCommandProcessor } from './hooks/slashCommandProcessor.js';
 import { useAutoAcceptIndicator } from './hooks/useAutoAcceptIndicator.js';
@@ -35,6 +36,7 @@ import { Footer } from './components/Footer.js';
 import { ThemeDialog } from './components/ThemeDialog.js';
 import { AuthDialog } from './components/AuthDialog.js';
 import { AuthInProgress } from './components/AuthInProgress.js';
+import { QwenOAuthProgress } from './components/QwenOAuthProgress.js';
 import { EditorSettingsDialog } from './components/EditorSettingsDialog.js';
 import { ShellConfirmationDialog } from './components/ShellConfirmationDialog.js';
 import { Colors } from './colors.js';
@@ -231,6 +233,15 @@ const App = ({ config, settings, startupWarnings = [], version }: AppProps) => {
     cancelAuthentication,
   } = useAuthCommand(settings, setAuthError, config);
 
+  const {
+    isQwenAuthenticating,
+    deviceAuth,
+    isQwenAuth,
+    cancelQwenAuth,
+    authStatus,
+    authMessage,
+  } = useQwenAuth(settings, isAuthenticating);
+
   useEffect(() => {
     if (settings.merged.selectedAuthType && !settings.merged.useExternalAuth) {
       const error = validateAuthMethod(settings.merged.selectedAuthType);
@@ -254,6 +265,27 @@ const App = ({ config, settings, startupWarnings = [], version }: AppProps) => {
     }
   }, [config, isAuthenticating]);
 
+  // Handle Qwen OAuth timeout
+  useEffect(() => {
+    if (isQwenAuth && authStatus === 'timeout') {
+      setAuthError(
+        authMessage ||
+          'Qwen OAuth authentication timed out. Please try again or select a different authentication method.',
+      );
+      cancelQwenAuth();
+      cancelAuthentication();
+      openAuthDialog();
+    }
+  }, [
+    isQwenAuth,
+    authStatus,
+    authMessage,
+    cancelQwenAuth,
+    cancelAuthentication,
+    openAuthDialog,
+    setAuthError,
+  ]);
+
   const {
     isEditorDialogOpen,
     openEditorDialog,
@@ -868,13 +900,35 @@ const App = ({ config, settings, startupWarnings = [], version }: AppProps) => {
             </Box>
           ) : isAuthenticating ? (
             <>
-              <AuthInProgress
-                onTimeout={() => {
-                  setAuthError('Authentication timed out. Please try again.');
-                  cancelAuthentication();
-                  openAuthDialog();
-                }}
-              />
+              {isQwenAuth && isQwenAuthenticating ? (
+                <QwenOAuthProgress
+                  deviceAuth={deviceAuth || undefined}
+                  authStatus={authStatus}
+                  authMessage={authMessage}
+                  onTimeout={() => {
+                    setAuthError(
+                      'Qwen OAuth authentication timed out. Please try again.',
+                    );
+                    cancelQwenAuth();
+                    cancelAuthentication();
+                    openAuthDialog();
+                  }}
+                  onCancel={() => {
+                    setAuthError('Qwen OAuth authentication cancelled.');
+                    cancelQwenAuth();
+                    cancelAuthentication();
+                    openAuthDialog();
+                  }}
+                />
+              ) : (
+                <AuthInProgress
+                  onTimeout={() => {
+                    setAuthError('Authentication timed out. Please try again.');
+                    cancelAuthentication();
+                    openAuthDialog();
+                  }}
+                />
+              )}
               {showErrorDetails && (
                 <OverflowProvider>
                   <Box flexDirection="column">

packages/cli/src/ui/components/AuthDialog.test.tsx

@@ -189,7 +189,7 @@ describe('AuthDialog', () => {
       );
 
       // This is a bit brittle, but it's the best way to check which item is selected.
-      expect(lastFrame()).toContain('● 1. OpenAI');
+      expect(lastFrame()).toContain('● 2. OpenAI');
     });
 
     it('should fall back to default if GEMINI_DEFAULT_AUTH_TYPE is not set', () => {
@@ -217,8 +217,8 @@ describe('AuthDialog', () => {
         <AuthDialog onSelect={() => {}} settings={settings} />,
       );
 
-      // Default is OpenAI (only option available)
-      expect(lastFrame()).toContain('● 1. OpenAI');
+      // Default is Qwen OAuth (first option)
+      expect(lastFrame()).toContain('● 1. Qwen OAuth');
     });
 
     it('should show an error and fall back to default if GEMINI_DEFAULT_AUTH_TYPE is invalid', () => {
@@ -249,8 +249,8 @@ describe('AuthDialog', () => {
       );
 
       // Since the auth dialog doesn't show GEMINI_DEFAULT_AUTH_TYPE errors anymore,
-      // it will just show the default OpenAI option
-      expect(lastFrame()).toContain('● 1. OpenAI');
+      // it will just show the default Qwen OAuth option
+      expect(lastFrame()).toContain('● 1. Qwen OAuth');
     });
   });
 

packages/cli/src/ui/components/AuthDialog.tsx

@@ -45,7 +45,10 @@ export function AuthDialog({
     initialErrorMessage || null,
   );
   const [showOpenAIKeyPrompt, setShowOpenAIKeyPrompt] = useState(false);
-  const items = [{ label: 'OpenAI', value: AuthType.USE_OPENAI }];
+  const items = [
+    { label: 'Qwen OAuth', value: AuthType.QWEN_OAUTH },
+    { label: 'OpenAI', value: AuthType.USE_OPENAI },
+  ];
 
   const initialAuthIndex = Math.max(
     0,
@@ -65,6 +68,10 @@ export function AuthDialog({
         return item.value === AuthType.USE_GEMINI;
       }
 
+      if (process.env.QWEN_OAUTH_TOKEN) {
+        return item.value === AuthType.QWEN_OAUTH;
+      }
+
       return item.value === AuthType.LOGIN_WITH_GOOGLE;
     }),
   );

packages/cli/src/ui/components/QwenOAuthProgress.test.tsx

@@ -0,0 +1,428 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// React import not needed for test files
+import { render } from 'ink-testing-library';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { QwenOAuthProgress } from './QwenOAuthProgress.js';
+import { DeviceAuthorizationInfo } from '../hooks/useQwenAuth.js';
+
+// Mock qrcode-terminal module
+vi.mock('qrcode-terminal', () => ({
+  default: {
+    generate: vi.fn(),
+  },
+}));
+
+// Mock ink-spinner
+vi.mock('ink-spinner', () => ({
+  default: ({ type }: { type: string }) => `MockSpinner(${type})`,
+}));
+
+describe('QwenOAuthProgress', () => {
+  const mockOnTimeout = vi.fn();
+  const mockOnCancel = vi.fn();
+
+  const createMockDeviceAuth = (
+    overrides: Partial<DeviceAuthorizationInfo> = {},
+  ): DeviceAuthorizationInfo => ({
+    verification_uri: 'https://example.com/device',
+    verification_uri_complete: 'https://example.com/device?user_code=ABC123',
+    user_code: 'ABC123',
+    expires_in: 300,
+    ...overrides,
+  });
+
+  const mockDeviceAuth = createMockDeviceAuth();
+
+  const renderComponent = (
+    props: Partial<{ deviceAuth: DeviceAuthorizationInfo }> = {},
+  ) =>
+    render(
+      <QwenOAuthProgress
+        onTimeout={mockOnTimeout}
+        onCancel={mockOnCancel}
+        {...props}
+      />,
+    );
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe('Loading state (no deviceAuth)', () => {
+    it('should render loading state when deviceAuth is not provided', () => {
+      const { lastFrame } = renderComponent();
+
+      const output = lastFrame();
+      expect(output).toContain('MockSpinner(dots)');
+      expect(output).toContain('Waiting for Qwen OAuth authentication...');
+      expect(output).toContain('(Press ESC to cancel)');
+    });
+
+    it('should render loading state with gray border', () => {
+      const { lastFrame } = renderComponent();
+      const output = lastFrame();
+
+      // Should not contain auth flow elements
+      expect(output).not.toContain('Qwen OAuth Authentication');
+      expect(output).not.toContain('Please visit this URL to authorize:');
+      // Loading state still shows time remaining with default timeout
+      expect(output).toContain('Time remaining:');
+    });
+  });
+
+  describe('Authenticated state (with deviceAuth)', () => {
+    it('should render authentication flow when deviceAuth is provided', () => {
+      const { lastFrame } = renderComponent({ deviceAuth: mockDeviceAuth });
+
+      const output = lastFrame();
+      expect(output).toContain('Qwen OAuth Authentication');
+      expect(output).toContain('Please visit this URL to authorize:');
+      expect(output).toContain(mockDeviceAuth.verification_uri_complete);
+      expect(output).toContain('MockSpinner(dots)');
+      expect(output).toContain('Waiting for authorization');
+      expect(output).toContain('Time remaining: 5:00');
+      expect(output).toContain('(Press ESC to cancel)');
+    });
+
+    it('should display correct URL in bordered box', () => {
+      const customAuth = createMockDeviceAuth({
+        verification_uri_complete: 'https://custom.com/auth?code=XYZ789',
+      });
+      const { lastFrame } = renderComponent({ deviceAuth: customAuth });
+
+      expect(lastFrame()).toContain('https://custom.com/auth?code=XYZ789');
+    });
+
+    it('should format time correctly', () => {
+      const deviceAuthWithCustomTime: DeviceAuthorizationInfo = {
+        ...mockDeviceAuth,
+        expires_in: 125, // 2 minutes and 5 seconds
+      };
+
+      const { lastFrame } = render(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={deviceAuthWithCustomTime}
+        />,
+      );
+
+      const output = lastFrame();
+      expect(output).toContain('Time remaining: 2:05');
+    });
+
+    it('should format single digit seconds with leading zero', () => {
+      const deviceAuthWithCustomTime: DeviceAuthorizationInfo = {
+        ...mockDeviceAuth,
+        expires_in: 67, // 1 minute and 7 seconds
+      };
+
+      const { lastFrame } = render(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={deviceAuthWithCustomTime}
+        />,
+      );
+
+      const output = lastFrame();
+      expect(output).toContain('Time remaining: 1:07');
+    });
+  });
+
+  describe('Timer functionality', () => {
+    it('should countdown and call onTimeout when timer expires', async () => {
+      const deviceAuthWithShortTime: DeviceAuthorizationInfo = {
+        ...mockDeviceAuth,
+        expires_in: 2, // 2 seconds
+      };
+
+      const { rerender } = render(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={deviceAuthWithShortTime}
+        />,
+      );
+
+      // Advance timer by 1 second
+      vi.advanceTimersByTime(1000);
+      rerender(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={deviceAuthWithShortTime}
+        />,
+      );
+
+      // Advance timer by another second to trigger timeout
+      vi.advanceTimersByTime(1000);
+      rerender(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={deviceAuthWithShortTime}
+        />,
+      );
+
+      expect(mockOnTimeout).toHaveBeenCalledTimes(1);
+    });
+
+    it('should update time remaining display', async () => {
+      const { lastFrame, rerender } = render(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={mockDeviceAuth}
+        />,
+      );
+
+      // Initial time should be 5:00
+      expect(lastFrame()).toContain('Time remaining: 5:00');
+
+      // Advance by 1 second
+      vi.advanceTimersByTime(1000);
+      rerender(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={mockDeviceAuth}
+        />,
+      );
+
+      // Should now show 4:59
+      expect(lastFrame()).toContain('Time remaining: 4:59');
+    });
+
+    it('should not start timer when deviceAuth is null', () => {
+      render(
+        <QwenOAuthProgress onTimeout={mockOnTimeout} onCancel={mockOnCancel} />,
+      );
+
+      // Advance timer and ensure onTimeout is not called
+      vi.advanceTimersByTime(5000);
+      expect(mockOnTimeout).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Animated dots', () => {
+    it('should cycle through animated dots', async () => {
+      const { lastFrame, rerender } = render(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={mockDeviceAuth}
+        />,
+      );
+
+      // Initial state should have no dots
+      expect(lastFrame()).toContain('Waiting for authorization');
+
+      // Advance by 500ms to add first dot
+      vi.advanceTimersByTime(500);
+      rerender(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={mockDeviceAuth}
+        />,
+      );
+      expect(lastFrame()).toContain('Waiting for authorization.');
+
+      // Advance by another 500ms to add second dot
+      vi.advanceTimersByTime(500);
+      rerender(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={mockDeviceAuth}
+        />,
+      );
+      expect(lastFrame()).toContain('Waiting for authorization..');
+
+      // Advance by another 500ms to add third dot
+      vi.advanceTimersByTime(500);
+      rerender(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={mockDeviceAuth}
+        />,
+      );
+      expect(lastFrame()).toContain('Waiting for authorization...');
+
+      // Advance by another 500ms to reset dots
+      vi.advanceTimersByTime(500);
+      rerender(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={mockDeviceAuth}
+        />,
+      );
+      expect(lastFrame()).toContain('Waiting for authorization');
+    });
+  });
+
+  describe('QR Code functionality', () => {
+    it('should generate QR code when deviceAuth is provided', async () => {
+      const qrcode = await import('qrcode-terminal');
+      const mockGenerate = vi.mocked(qrcode.default.generate);
+
+      mockGenerate.mockImplementation((url, options, callback) => {
+        callback!('Mock QR Code Data');
+      });
+
+      render(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={mockDeviceAuth}
+        />,
+      );
+
+      expect(mockGenerate).toHaveBeenCalledWith(
+        mockDeviceAuth.verification_uri_complete,
+        { small: true },
+        expect.any(Function),
+      );
+    });
+
+    // Note: QR code display test skipped due to timing complexities with async state updates
+    // The QR code generation is already tested in 'should generate QR code when deviceAuth is provided'
+
+    it('should handle QR code generation errors gracefully', async () => {
+      const qrcode = await import('qrcode-terminal');
+      const mockGenerate = vi.mocked(qrcode.default.generate);
+      const consoleErrorSpy = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => {});
+
+      mockGenerate.mockImplementation(() => {
+        throw new Error('QR Code generation failed');
+      });
+
+      const { lastFrame } = render(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={mockDeviceAuth}
+        />,
+      );
+
+      // Should not crash and should not show QR code section
+      const output = lastFrame();
+      expect(output).not.toContain('Or scan the QR code below:');
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        'Failed to generate QR code:',
+        expect.any(Error),
+      );
+
+      consoleErrorSpy.mockRestore();
+    });
+
+    it('should not generate QR code when deviceAuth is null', async () => {
+      const qrcode = await import('qrcode-terminal');
+      const mockGenerate = vi.mocked(qrcode.default.generate);
+
+      render(
+        <QwenOAuthProgress onTimeout={mockOnTimeout} onCancel={mockOnCancel} />,
+      );
+
+      expect(mockGenerate).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('User interactions', () => {
+    it('should call onCancel when ESC key is pressed', () => {
+      const { stdin } = render(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={mockDeviceAuth}
+        />,
+      );
+
+      // Simulate ESC key press
+      stdin.write('\u001b'); // ESC character
+
+      expect(mockOnCancel).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call onCancel when ESC is pressed in loading state', () => {
+      const { stdin } = render(
+        <QwenOAuthProgress onTimeout={mockOnTimeout} onCancel={mockOnCancel} />,
+      );
+
+      // Simulate ESC key press
+      stdin.write('\u001b'); // ESC character
+
+      expect(mockOnCancel).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onCancel for other key presses', () => {
+      const { stdin } = render(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={mockDeviceAuth}
+        />,
+      );
+
+      // Simulate other key presses
+      stdin.write('a');
+      stdin.write('\r'); // Enter
+      stdin.write(' '); // Space
+
+      expect(mockOnCancel).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Props changes', () => {
+    it('should display initial timer value from deviceAuth', () => {
+      const deviceAuthWith10Min: DeviceAuthorizationInfo = {
+        ...mockDeviceAuth,
+        expires_in: 600, // 10 minutes
+      };
+
+      const { lastFrame } = render(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={deviceAuthWith10Min}
+        />,
+      );
+
+      expect(lastFrame()).toContain('Time remaining: 10:00');
+    });
+
+    it('should reset to loading state when deviceAuth becomes null', () => {
+      const { rerender, lastFrame } = render(
+        <QwenOAuthProgress
+          onTimeout={mockOnTimeout}
+          onCancel={mockOnCancel}
+          deviceAuth={mockDeviceAuth}
+        />,
+      );
+
+      expect(lastFrame()).toContain('Qwen OAuth Authentication');
+
+      rerender(
+        <QwenOAuthProgress onTimeout={mockOnTimeout} onCancel={mockOnCancel} />,
+      );
+
+      expect(lastFrame()).toContain('Waiting for Qwen OAuth authentication...');
+      expect(lastFrame()).not.toContain('Qwen OAuth Authentication');
+    });
+  });
+});

packages/cli/src/ui/components/QwenOAuthProgress.tsx

@@ -0,0 +1,208 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import Spinner from 'ink-spinner';
+import Link from 'ink-link';
+import qrcode from 'qrcode-terminal';
+import { Colors } from '../colors.js';
+import { DeviceAuthorizationInfo } from '../hooks/useQwenAuth.js';
+
+interface QwenOAuthProgressProps {
+  onTimeout: () => void;
+  onCancel: () => void;
+  deviceAuth?: DeviceAuthorizationInfo;
+  authStatus?:
+    | 'idle'
+    | 'polling'
+    | 'success'
+    | 'error'
+    | 'timeout'
+    | 'rate_limit';
+  authMessage?: string | null;
+}
+
+export function QwenOAuthProgress({
+  onTimeout,
+  onCancel,
+  deviceAuth,
+  authStatus,
+  authMessage,
+}: QwenOAuthProgressProps): React.JSX.Element {
+  const defaultTimeout = deviceAuth?.expires_in || 300; // Default 5 minutes
+  const [timeRemaining, setTimeRemaining] = useState<number>(defaultTimeout);
+  const [dots, setDots] = useState<string>('');
+  const [qrCodeData, setQrCodeData] = useState<string | null>(null);
+
+  useInput((input, key) => {
+    if (authStatus === 'timeout') {
+      // Any key press in timeout state should trigger cancel to return to auth dialog
+      onCancel();
+    } else if (key.escape) {
+      onCancel();
+    }
+  });
+
+  // Generate QR code when device auth is available
+  useEffect(() => {
+    if (!deviceAuth) {
+      setQrCodeData(null);
+      return;
+    }
+
+    // Generate QR code string
+    const generateQR = () => {
+      try {
+        qrcode.generate(
+          deviceAuth.verification_uri_complete,
+          { small: true },
+          (qrcode: string) => {
+            setQrCodeData(qrcode);
+          },
+        );
+      } catch (error) {
+        console.error('Failed to generate QR code:', error);
+        setQrCodeData(null);
+      }
+    };
+
+    generateQR();
+  }, [deviceAuth]);
+
+  // Countdown timer
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeRemaining((prev) => {
+        if (prev <= 1) {
+          onTimeout();
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [onTimeout]);
+
+  // Animated dots
+  useEffect(() => {
+    const dotsTimer = setInterval(() => {
+      setDots((prev) => {
+        if (prev.length >= 3) return '';
+        return prev + '.';
+      });
+    }, 500);
+
+    return () => clearInterval(dotsTimer);
+  }, []);
+
+  const formatTime = (seconds: number): string => {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+  };
+
+  // Handle timeout state
+  if (authStatus === 'timeout') {
+    return (
+      <Box
+        borderStyle="round"
+        borderColor={Colors.AccentRed}
+        flexDirection="column"
+        padding={1}
+        width="100%"
+      >
+        <Text bold color={Colors.AccentRed}>
+          Qwen OAuth Authentication Timeout
+        </Text>
+
+        <Box marginTop={1}>
+          <Text>
+            {authMessage ||
+              `OAuth token expired (over ${defaultTimeout} seconds). Please select authentication method again.`}
+          </Text>
+        </Box>
+
+        <Box marginTop={1}>
+          <Text color={Colors.Gray}>
+            Press any key to return to authentication type selection.
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (!deviceAuth) {
+    return (
+      <Box
+        borderStyle="round"
+        borderColor={Colors.Gray}
+        flexDirection="column"
+        padding={1}
+        width="100%"
+      >
+        <Box>
+          <Text>
+            <Spinner type="dots" /> Waiting for Qwen OAuth authentication...
+          </Text>
+        </Box>
+        <Box marginTop={1} justifyContent="space-between">
+          <Text color={Colors.Gray}>
+            Time remaining: {formatTime(timeRemaining)}
+          </Text>
+          <Text color={Colors.AccentPurple}>(Press ESC to cancel)</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={Colors.AccentBlue}
+      flexDirection="column"
+      padding={1}
+      width="100%"
+    >
+      <Text bold color={Colors.AccentBlue}>
+        Qwen OAuth Authentication
+      </Text>
+
+      <Box marginTop={1}>
+        <Text>Please visit this URL to authorize:</Text>
+      </Box>
+      <Link url={deviceAuth.verification_uri_complete} fallback={false}>
+        <Text color={Colors.AccentGreen} bold>
+          {deviceAuth.verification_uri_complete}
+        </Text>
+      </Link>
+      {qrCodeData && (
+        <>
+          <Box marginTop={1}>
+            <Text>Or scan the QR code below:</Text>
+          </Box>
+          <Box marginTop={1}>
+            <Text>{qrCodeData}</Text>
+          </Box>
+        </>
+      )}
+
+      <Box marginTop={1}>
+        <Text>
+          <Spinner type="dots" /> Waiting for authorization{dots}
+        </Text>
+      </Box>
+
+      <Box marginTop={1} justifyContent="space-between">
+        <Text color={Colors.Gray}>
+          Time remaining: {formatTime(timeRemaining)}
+        </Text>
+        <Text color={Colors.AccentPurple}>(Press ESC to cancel)</Text>
+      </Box>
+    </Box>
+  );
+}

packages/cli/src/ui/hooks/useQwenAuth.test.ts

@@ -0,0 +1,437 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useQwenAuth, DeviceAuthorizationInfo } from './useQwenAuth.js';
+import {
+  AuthType,
+  qwenOAuth2Events,
+  QwenOAuth2Event,
+} from '@qwen-code/qwen-code-core';
+import { LoadedSettings } from '../../config/settings.js';
+
+// Mock the qwenOAuth2Events
+vi.mock('@qwen-code/qwen-code-core', async () => {
+  const actual = await vi.importActual('@qwen-code/qwen-code-core');
+  const mockEmitter = {
+    on: vi.fn().mockReturnThis(),
+    off: vi.fn().mockReturnThis(),
+    emit: vi.fn().mockReturnThis(),
+  };
+  return {
+    ...actual,
+    qwenOAuth2Events: mockEmitter,
+    QwenOAuth2Event: {
+      AuthUri: 'authUri',
+      AuthProgress: 'authProgress',
+    },
+  };
+});
+
+const mockQwenOAuth2Events = vi.mocked(qwenOAuth2Events);
+
+describe('useQwenAuth', () => {
+  const mockDeviceAuth: DeviceAuthorizationInfo = {
+    verification_uri: 'https://oauth.qwen.com/device',
+    verification_uri_complete: 'https://oauth.qwen.com/device?user_code=ABC123',
+    user_code: 'ABC123',
+    expires_in: 1800,
+  };
+
+  const createMockSettings = (authType: AuthType): LoadedSettings =>
+    ({
+      merged: {
+        selectedAuthType: authType,
+      },
+    }) as LoadedSettings;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should initialize with default state when not Qwen auth', () => {
+    const settings = createMockSettings(AuthType.USE_GEMINI);
+    const { result } = renderHook(() => useQwenAuth(settings, false));
+
+    expect(result.current).toEqual({
+      isQwenAuthenticating: false,
+      deviceAuth: null,
+      authStatus: 'idle',
+      authMessage: null,
+      isQwenAuth: false,
+      cancelQwenAuth: expect.any(Function),
+    });
+  });
+
+  it('should initialize with default state when Qwen auth but not authenticating', () => {
+    const settings = createMockSettings(AuthType.QWEN_OAUTH);
+    const { result } = renderHook(() => useQwenAuth(settings, false));
+
+    expect(result.current).toEqual({
+      isQwenAuthenticating: false,
+      deviceAuth: null,
+      authStatus: 'idle',
+      authMessage: null,
+      isQwenAuth: true,
+      cancelQwenAuth: expect.any(Function),
+    });
+  });
+
+  it('should set up event listeners when Qwen auth and authenticating', () => {
+    const settings = createMockSettings(AuthType.QWEN_OAUTH);
+    renderHook(() => useQwenAuth(settings, true));
+
+    expect(mockQwenOAuth2Events.on).toHaveBeenCalledWith(
+      QwenOAuth2Event.AuthUri,
+      expect.any(Function),
+    );
+    expect(mockQwenOAuth2Events.on).toHaveBeenCalledWith(
+      QwenOAuth2Event.AuthProgress,
+      expect.any(Function),
+    );
+  });
+
+  it('should handle device auth event', () => {
+    const settings = createMockSettings(AuthType.QWEN_OAUTH);
+    let handleDeviceAuth: (deviceAuth: DeviceAuthorizationInfo) => void;
+
+    mockQwenOAuth2Events.on.mockImplementation((event, handler) => {
+      if (event === QwenOAuth2Event.AuthUri) {
+        handleDeviceAuth = handler;
+      }
+      return mockQwenOAuth2Events;
+    });
+
+    const { result } = renderHook(() => useQwenAuth(settings, true));
+
+    act(() => {
+      handleDeviceAuth!(mockDeviceAuth);
+    });
+
+    expect(result.current.deviceAuth).toEqual(mockDeviceAuth);
+    expect(result.current.authStatus).toBe('polling');
+    expect(result.current.isQwenAuthenticating).toBe(true);
+  });
+
+  it('should handle auth progress event - success', () => {
+    const settings = createMockSettings(AuthType.QWEN_OAUTH);
+    let handleAuthProgress: (
+      status: 'success' | 'error' | 'polling' | 'timeout' | 'rate_limit',
+      message?: string,
+    ) => void;
+
+    mockQwenOAuth2Events.on.mockImplementation((event, handler) => {
+      if (event === QwenOAuth2Event.AuthProgress) {
+        handleAuthProgress = handler;
+      }
+      return mockQwenOAuth2Events;
+    });
+
+    const { result } = renderHook(() => useQwenAuth(settings, true));
+
+    act(() => {
+      handleAuthProgress!('success', 'Authentication successful!');
+    });
+
+    expect(result.current.authStatus).toBe('success');
+    expect(result.current.authMessage).toBe('Authentication successful!');
+  });
+
+  it('should handle auth progress event - error', () => {
+    const settings = createMockSettings(AuthType.QWEN_OAUTH);
+    let handleAuthProgress: (
+      status: 'success' | 'error' | 'polling' | 'timeout' | 'rate_limit',
+      message?: string,
+    ) => void;
+
+    mockQwenOAuth2Events.on.mockImplementation((event, handler) => {
+      if (event === QwenOAuth2Event.AuthProgress) {
+        handleAuthProgress = handler;
+      }
+      return mockQwenOAuth2Events;
+    });
+
+    const { result } = renderHook(() => useQwenAuth(settings, true));
+
+    act(() => {
+      handleAuthProgress!('error', 'Authentication failed');
+    });
+
+    expect(result.current.authStatus).toBe('error');
+    expect(result.current.authMessage).toBe('Authentication failed');
+  });
+
+  it('should handle auth progress event - polling', () => {
+    const settings = createMockSettings(AuthType.QWEN_OAUTH);
+    let handleAuthProgress: (
+      status: 'success' | 'error' | 'polling' | 'timeout' | 'rate_limit',
+      message?: string,
+    ) => void;
+
+    mockQwenOAuth2Events.on.mockImplementation((event, handler) => {
+      if (event === QwenOAuth2Event.AuthProgress) {
+        handleAuthProgress = handler;
+      }
+      return mockQwenOAuth2Events;
+    });
+
+    const { result } = renderHook(() => useQwenAuth(settings, true));
+
+    act(() => {
+      handleAuthProgress!('polling', 'Waiting for user authorization...');
+    });
+
+    expect(result.current.authStatus).toBe('polling');
+    expect(result.current.authMessage).toBe(
+      'Waiting for user authorization...',
+    );
+  });
+
+  it('should handle auth progress event - rate_limit', () => {
+    const settings = createMockSettings(AuthType.QWEN_OAUTH);
+    let handleAuthProgress: (
+      status: 'success' | 'error' | 'polling' | 'timeout' | 'rate_limit',
+      message?: string,
+    ) => void;
+
+    mockQwenOAuth2Events.on.mockImplementation((event, handler) => {
+      if (event === QwenOAuth2Event.AuthProgress) {
+        handleAuthProgress = handler;
+      }
+      return mockQwenOAuth2Events;
+    });
+
+    const { result } = renderHook(() => useQwenAuth(settings, true));
+
+    act(() => {
+      handleAuthProgress!(
+        'rate_limit',
+        'Too many requests. The server is rate limiting our requests. Please select a different authentication method or try again later.',
+      );
+    });
+
+    expect(result.current.authStatus).toBe('rate_limit');
+    expect(result.current.authMessage).toBe(
+      'Too many requests. The server is rate limiting our requests. Please select a different authentication method or try again later.',
+    );
+  });
+
+  it('should handle auth progress event without message', () => {
+    const settings = createMockSettings(AuthType.QWEN_OAUTH);
+    let handleAuthProgress: (
+      status: 'success' | 'error' | 'polling' | 'timeout' | 'rate_limit',
+      message?: string,
+    ) => void;
+
+    mockQwenOAuth2Events.on.mockImplementation((event, handler) => {
+      if (event === QwenOAuth2Event.AuthProgress) {
+        handleAuthProgress = handler;
+      }
+      return mockQwenOAuth2Events;
+    });
+
+    const { result } = renderHook(() => useQwenAuth(settings, true));
+
+    act(() => {
+      handleAuthProgress!('success');
+    });
+
+    expect(result.current.authStatus).toBe('success');
+    expect(result.current.authMessage).toBe(null);
+  });
+
+  it('should clean up event listeners when auth type changes', () => {
+    const qwenSettings = createMockSettings(AuthType.QWEN_OAUTH);
+    const { rerender } = renderHook(
+      ({ settings, isAuthenticating }) =>
+        useQwenAuth(settings, isAuthenticating),
+      { initialProps: { settings: qwenSettings, isAuthenticating: true } },
+    );
+
+    // Change to non-Qwen auth
+    const geminiSettings = createMockSettings(AuthType.USE_GEMINI);
+    rerender({ settings: geminiSettings, isAuthenticating: true });
+
+    expect(mockQwenOAuth2Events.off).toHaveBeenCalledWith(
+      QwenOAuth2Event.AuthUri,
+      expect.any(Function),
+    );
+    expect(mockQwenOAuth2Events.off).toHaveBeenCalledWith(
+      QwenOAuth2Event.AuthProgress,
+      expect.any(Function),
+    );
+  });
+
+  it('should clean up event listeners when authentication stops', () => {
+    const settings = createMockSettings(AuthType.QWEN_OAUTH);
+    const { rerender } = renderHook(
+      ({ isAuthenticating }) => useQwenAuth(settings, isAuthenticating),
+      { initialProps: { isAuthenticating: true } },
+    );
+
+    // Stop authentication
+    rerender({ isAuthenticating: false });
+
+    expect(mockQwenOAuth2Events.off).toHaveBeenCalledWith(
+      QwenOAuth2Event.AuthUri,
+      expect.any(Function),
+    );
+    expect(mockQwenOAuth2Events.off).toHaveBeenCalledWith(
+      QwenOAuth2Event.AuthProgress,
+      expect.any(Function),
+    );
+  });
+
+  it('should clean up event listeners on unmount', () => {
+    const settings = createMockSettings(AuthType.QWEN_OAUTH);
+    const { unmount } = renderHook(() => useQwenAuth(settings, true));
+
+    unmount();
+
+    expect(mockQwenOAuth2Events.off).toHaveBeenCalledWith(
+      QwenOAuth2Event.AuthUri,
+      expect.any(Function),
+    );
+    expect(mockQwenOAuth2Events.off).toHaveBeenCalledWith(
+      QwenOAuth2Event.AuthProgress,
+      expect.any(Function),
+    );
+  });
+
+  it('should reset state when switching from Qwen auth to another auth type', () => {
+    const qwenSettings = createMockSettings(AuthType.QWEN_OAUTH);
+    let handleDeviceAuth: (deviceAuth: DeviceAuthorizationInfo) => void;
+
+    mockQwenOAuth2Events.on.mockImplementation((event, handler) => {
+      if (event === QwenOAuth2Event.AuthUri) {
+        handleDeviceAuth = handler;
+      }
+      return mockQwenOAuth2Events;
+    });
+
+    const { result, rerender } = renderHook(
+      ({ settings, isAuthenticating }) =>
+        useQwenAuth(settings, isAuthenticating),
+      { initialProps: { settings: qwenSettings, isAuthenticating: true } },
+    );
+
+    // Simulate device auth
+    act(() => {
+      handleDeviceAuth!(mockDeviceAuth);
+    });
+
+    expect(result.current.deviceAuth).toEqual(mockDeviceAuth);
+    expect(result.current.authStatus).toBe('polling');
+
+    // Switch to different auth type
+    const geminiSettings = createMockSettings(AuthType.USE_GEMINI);
+    rerender({ settings: geminiSettings, isAuthenticating: true });
+
+    expect(result.current.isQwenAuthenticating).toBe(false);
+    expect(result.current.deviceAuth).toBe(null);
+    expect(result.current.authStatus).toBe('idle');
+    expect(result.current.authMessage).toBe(null);
+  });
+
+  it('should reset state when authentication stops', () => {
+    const settings = createMockSettings(AuthType.QWEN_OAUTH);
+    let handleDeviceAuth: (deviceAuth: DeviceAuthorizationInfo) => void;
+
+    mockQwenOAuth2Events.on.mockImplementation((event, handler) => {
+      if (event === QwenOAuth2Event.AuthUri) {
+        handleDeviceAuth = handler;
+      }
+      return mockQwenOAuth2Events;
+    });
+
+    const { result, rerender } = renderHook(
+      ({ isAuthenticating }) => useQwenAuth(settings, isAuthenticating),
+      { initialProps: { isAuthenticating: true } },
+    );
+
+    // Simulate device auth
+    act(() => {
+      handleDeviceAuth!(mockDeviceAuth);
+    });
+
+    expect(result.current.deviceAuth).toEqual(mockDeviceAuth);
+    expect(result.current.authStatus).toBe('polling');
+
+    // Stop authentication
+    rerender({ isAuthenticating: false });
+
+    expect(result.current.isQwenAuthenticating).toBe(false);
+    expect(result.current.deviceAuth).toBe(null);
+    expect(result.current.authStatus).toBe('idle');
+    expect(result.current.authMessage).toBe(null);
+  });
+
+  it('should handle cancelQwenAuth function', () => {
+    const settings = createMockSettings(AuthType.QWEN_OAUTH);
+    let handleDeviceAuth: (deviceAuth: DeviceAuthorizationInfo) => void;
+
+    mockQwenOAuth2Events.on.mockImplementation((event, handler) => {
+      if (event === QwenOAuth2Event.AuthUri) {
+        handleDeviceAuth = handler;
+      }
+      return mockQwenOAuth2Events;
+    });
+
+    const { result } = renderHook(() => useQwenAuth(settings, true));
+
+    // Set up some state
+    act(() => {
+      handleDeviceAuth!(mockDeviceAuth);
+    });
+
+    expect(result.current.deviceAuth).toEqual(mockDeviceAuth);
+
+    // Cancel auth
+    act(() => {
+      result.current.cancelQwenAuth();
+    });
+
+    expect(result.current.isQwenAuthenticating).toBe(false);
+    expect(result.current.deviceAuth).toBe(null);
+    expect(result.current.authStatus).toBe('idle');
+    expect(result.current.authMessage).toBe(null);
+  });
+
+  it('should maintain isQwenAuth flag correctly', () => {
+    // Test with Qwen OAuth
+    const qwenSettings = createMockSettings(AuthType.QWEN_OAUTH);
+    const { result: qwenResult } = renderHook(() =>
+      useQwenAuth(qwenSettings, false),
+    );
+    expect(qwenResult.current.isQwenAuth).toBe(true);
+
+    // Test with other auth types
+    const geminiSettings = createMockSettings(AuthType.USE_GEMINI);
+    const { result: geminiResult } = renderHook(() =>
+      useQwenAuth(geminiSettings, false),
+    );
+    expect(geminiResult.current.isQwenAuth).toBe(false);
+
+    const oauthSettings = createMockSettings(AuthType.LOGIN_WITH_GOOGLE);
+    const { result: oauthResult } = renderHook(() =>
+      useQwenAuth(oauthSettings, false),
+    );
+    expect(oauthResult.current.isQwenAuth).toBe(false);
+  });
+
+  it('should set isQwenAuthenticating to true when starting authentication with Qwen auth', () => {
+    const settings = createMockSettings(AuthType.QWEN_OAUTH);
+    const { result } = renderHook(() => useQwenAuth(settings, true));
+
+    expect(result.current.isQwenAuthenticating).toBe(true);
+    expect(result.current.authStatus).toBe('idle');
+  });
+});

packages/cli/src/ui/hooks/useQwenAuth.ts

@@ -0,0 +1,125 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+import { LoadedSettings } from '../../config/settings.js';
+import {
+  AuthType,
+  qwenOAuth2Events,
+  QwenOAuth2Event,
+} from '@qwen-code/qwen-code-core';
+
+export interface DeviceAuthorizationInfo {
+  verification_uri: string;
+  verification_uri_complete: string;
+  user_code: string;
+  expires_in: number;
+}
+
+interface QwenAuthState {
+  isQwenAuthenticating: boolean;
+  deviceAuth: DeviceAuthorizationInfo | null;
+  authStatus:
+    | 'idle'
+    | 'polling'
+    | 'success'
+    | 'error'
+    | 'timeout'
+    | 'rate_limit';
+  authMessage: string | null;
+}
+
+export const useQwenAuth = (
+  settings: LoadedSettings,
+  isAuthenticating: boolean,
+) => {
+  const [qwenAuthState, setQwenAuthState] = useState<QwenAuthState>({
+    isQwenAuthenticating: false,
+    deviceAuth: null,
+    authStatus: 'idle',
+    authMessage: null,
+  });
+
+  const isQwenAuth = settings.merged.selectedAuthType === AuthType.QWEN_OAUTH;
+
+  // Set up event listeners when authentication starts
+  useEffect(() => {
+    if (!isQwenAuth || !isAuthenticating) {
+      // Reset state when not authenticating or not Qwen auth
+      setQwenAuthState({
+        isQwenAuthenticating: false,
+        deviceAuth: null,
+        authStatus: 'idle',
+        authMessage: null,
+      });
+      return;
+    }
+
+    setQwenAuthState((prev) => ({
+      ...prev,
+      isQwenAuthenticating: true,
+      authStatus: 'idle',
+    }));
+
+    // Set up event listeners
+    const handleDeviceAuth = (deviceAuth: {
+      verification_uri: string;
+      verification_uri_complete: string;
+      user_code: string;
+      expires_in: number;
+    }) => {
+      setQwenAuthState((prev) => ({
+        ...prev,
+        deviceAuth: {
+          verification_uri: deviceAuth.verification_uri,
+          verification_uri_complete: deviceAuth.verification_uri_complete,
+          user_code: deviceAuth.user_code,
+          expires_in: deviceAuth.expires_in,
+        },
+        authStatus: 'polling',
+      }));
+    };
+
+    const handleAuthProgress = (
+      status: 'success' | 'error' | 'polling' | 'timeout' | 'rate_limit',
+      message?: string,
+    ) => {
+      setQwenAuthState((prev) => ({
+        ...prev,
+        authStatus: status,
+        authMessage: message || null,
+      }));
+    };
+
+    // Add event listeners
+    qwenOAuth2Events.on(QwenOAuth2Event.AuthUri, handleDeviceAuth);
+    qwenOAuth2Events.on(QwenOAuth2Event.AuthProgress, handleAuthProgress);
+
+    // Cleanup event listeners when component unmounts or auth finishes
+    return () => {
+      qwenOAuth2Events.off(QwenOAuth2Event.AuthUri, handleDeviceAuth);
+      qwenOAuth2Events.off(QwenOAuth2Event.AuthProgress, handleAuthProgress);
+    };
+  }, [isQwenAuth, isAuthenticating]);
+
+  const cancelQwenAuth = useCallback(() => {
+    // Emit cancel event to stop polling
+    qwenOAuth2Events.emit(QwenOAuth2Event.AuthCancel);
+
+    setQwenAuthState({
+      isQwenAuthenticating: false,
+      deviceAuth: null,
+      authStatus: 'idle',
+      authMessage: null,
+    });
+  }, []);
+
+  return {
+    ...qwenAuthState,
+    isQwenAuth,
+    cancelQwenAuth,
+  };
+};