refactor: simplify OAuth progress UI and use semantic colors

- Replace round border with single border style for consistency
- Use semantic-colors theme instead of Colors enum
- Add i18n translations for error messages and status text
- Simplify dots animation with fixed-width cycling patterns
- Consolidate into single bordered box layout
- Add Esc to cancel hint for better UX

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

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

@@ -345,7 +345,7 @@ export function AuthDialog(): React.JSX.Element {
 
   return (
     <Box
-      borderStyle="round"
+      borderStyle="single"
       borderColor={theme?.border?.default}
       flexDirection="column"
       padding={1}

packages/cli/src/ui/auth/AuthInProgress.tsx

@@ -41,7 +41,7 @@ export function AuthInProgress({
 
   return (
     <Box
-      borderStyle="round"
+      borderStyle="single"
       borderColor={theme.border.default}
       flexDirection="column"
       padding={1}

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

@@ -128,7 +128,7 @@ export const Header: React.FC<HeaderProps> = ({
       {/* Right side: Info panel (flexible width, max 60 in two-column layout) */}
       <Box
         flexDirection="column"
-        borderStyle="round"
+        borderStyle="single"
         borderColor={theme.border.default}
         paddingX={infoPanelPaddingX}
         flexGrow={showLogo ? 0 : 1}

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

@@ -5,11 +5,11 @@
  */
 
 import type React from 'react';
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect } from 'react';
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
 import Link from 'ink-link';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import type { DeviceAuthorizationData } from '@qwen-code/qwen-code-core';
 import { useKeypress } from '../hooks/useKeypress.js';
 import { t } from '../../i18n/index.js';
@@ -28,82 +28,10 @@ interface QwenOAuthProgressProps {
   authMessage?: string | null;
 }
 
-/**
- * Static Auth URL Display Component
- * Renders the authorization URL once and doesn't re-render unless the URL changes
- */
-function AuthUrlDisplay({
-  verificationUrl,
-}: {
-  verificationUrl: string;
-}): React.JSX.Element {
-  return (
-    <Box
-      borderStyle="round"
-      borderColor={Colors.AccentBlue}
-      flexDirection="column"
-      padding={1}
-      width="100%"
-    >
-      <Text bold color={Colors.AccentBlue}>
-        {t('Qwen OAuth Authentication')}
-      </Text>
-
-      <Box marginTop={1}>
-        <Text>{t('Please visit this URL to authorize:')}</Text>
-      </Box>
-
-      <Link url={verificationUrl} fallback={false}>
-        <Text color={Colors.AccentGreen} bold>
-          {verificationUrl}
-        </Text>
-      </Link>
-    </Box>
-  );
-}
-
-/**
- * Dynamic Status Display Component
- * Shows the loading spinner, timer, and status messages
- */
-function StatusDisplay({
-  timeRemaining,
-  dots,
-}: {
-  timeRemaining: number;
-  dots: string;
-}): React.JSX.Element {
-  const formatTime = (seconds: number): string => {
-    const minutes = Math.floor(seconds / 60);
-    const remainingSeconds = seconds % 60;
-    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
-  };
-
-  return (
-    <Box
-      borderStyle="round"
-      borderColor={Colors.AccentBlue}
-      flexDirection="column"
-      padding={1}
-      width="100%"
-    >
-      <Box marginTop={1}>
-        <Text>
-          <Spinner type="dots" /> {t('Waiting for authorization')}
-          {dots}
-        </Text>
-      </Box>
-
-      <Box marginTop={1} justifyContent="space-between">
-        <Text color={Colors.Gray}>
-          {t('Time remaining:')} {formatTime(timeRemaining)}
-        </Text>
-        <Text color={Colors.AccentPurple}>
-          {t('(Press ESC or CTRL+C to cancel)')}
-        </Text>
-      </Box>
-    </Box>
-  );
+function formatTime(seconds: number): string {
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
 }
 
 export function QwenOAuthProgress({
@@ -115,12 +43,11 @@ export function QwenOAuthProgress({
 }: 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 [dots, setDots] = useState<string>('...');
 
   useKeypress(
     (key) => {
       if (authStatus === 'timeout' || authStatus === 'error') {
-        // Any key press in timeout or error state should trigger cancel to return to auth dialog
         onCancel();
       } else if (key.name === 'escape' || (key.ctrl && key.name === 'c')) {
         onCancel();
@@ -144,38 +71,29 @@ export function QwenOAuthProgress({
     return () => clearInterval(timer);
   }, [onTimeout]);
 
-  // Animated dots
+  // Animated dots — cycle through fixed-width patterns to avoid layout shift
   useEffect(() => {
+    const dotFrames = ['.  ', '.. ', '...'];
+    let frameIndex = 0;
     const dotsTimer = setInterval(() => {
-      setDots((prev) => {
-        if (prev.length >= 3) return '';
-        return prev + '.';
-      });
+      frameIndex = (frameIndex + 1) % dotFrames.length;
+      setDots(dotFrames[frameIndex]!);
     }, 500);
 
     return () => clearInterval(dotsTimer);
   }, []);
 
-  // Memoize the auth URL display to prevent unnecessary re-renders
-  const authUrlDisplay = useMemo(() => {
-    if (!deviceAuth?.verification_uri_complete) return null;
-
-    return (
-      <AuthUrlDisplay verificationUrl={deviceAuth.verification_uri_complete} />
-    );
-  }, [deviceAuth?.verification_uri_complete]);
-
   // Handle timeout state
   if (authStatus === 'timeout') {
     return (
       <Box
-        borderStyle="round"
-        borderColor={Colors.AccentRed}
+        borderStyle="single"
+        borderColor={theme.border.default}
         flexDirection="column"
         padding={1}
         width="100%"
       >
-        <Text bold color={Colors.AccentRed}>
+        <Text bold color={theme.status.error}>
           {t('Qwen OAuth Authentication Timeout')}
         </Text>
 
@@ -192,7 +110,7 @@ export function QwenOAuthProgress({
         </Box>
 
         <Box marginTop={1}>
-          <Text color={Colors.Gray}>
+          <Text color={theme.text.secondary}>
             {t('Press any key to return to authentication type selection.')}
           </Text>
         </Box>
@@ -203,26 +121,26 @@ export function QwenOAuthProgress({
   if (authStatus === 'error') {
     return (
       <Box
-        borderStyle="round"
-        borderColor={Colors.AccentRed}
+        borderStyle="single"
+        borderColor={theme.border.default}
         flexDirection="column"
         padding={1}
         width="100%"
       >
-        <Text bold color={Colors.AccentRed}>
-          Qwen OAuth Authentication Error
+        <Text bold color={theme.status.error}>
+          {t('Qwen OAuth Authentication Error')}
         </Text>
 
         <Box marginTop={1}>
           <Text>
             {authMessage ||
-              'An error occurred during authentication. Please try again.'}
+              t('An error occurred during authentication. Please try again.')}
           </Text>
         </Box>
 
         <Box marginTop={1}>
-          <Text color={Colors.Gray}>
-            Press any key to return to authentication type selection.
+          <Text color={theme.text.secondary}>
+            {t('Press any key to return to authentication type selection.')}
           </Text>
         </Box>
       </Box>
@@ -233,38 +151,62 @@ export function QwenOAuthProgress({
   if (!deviceAuth) {
     return (
       <Box
-        borderStyle="round"
-        borderColor={Colors.Gray}
+        borderStyle="single"
+        borderColor={theme.border.default}
         flexDirection="column"
         padding={1}
         width="100%"
       >
-        <Box>
+        <Text bold>{t('Qwen OAuth Authentication')}</Text>
+
+        <Box marginTop={1}>
           <Text>
-            <Spinner type="dots" />
-            {t('Waiting for Qwen OAuth authentication...')}
+            <Spinner type="dots" />{' '}
+            {t('Waiting for Qwen OAuth authentication...')}{' '}
+            {t('Time remaining:')} {formatTime(timeRemaining)}
           </Text>
         </Box>
-        <Box marginTop={1} justifyContent="space-between">
-          <Text color={Colors.Gray}>
-            {t('Time remaining:')} {Math.floor(timeRemaining / 60)}:
-            {(timeRemaining % 60).toString().padStart(2, '0')}
-          </Text>
-          <Text color={Colors.AccentPurple}>
-            {t('(Press ESC or CTRL+C to cancel)')}
-          </Text>
+
+        <Box marginTop={1}>
+          <Text color={theme.text.secondary}>{t('Esc to cancel')}</Text>
         </Box>
       </Box>
     );
   }
 
   return (
-    <Box flexDirection="column" width="100%">
-      {/* Static Auth URL Display */}
-      {authUrlDisplay}
+    <Box
+      borderStyle="single"
+      borderColor={theme.border.default}
+      flexDirection="column"
+      padding={1}
+      width="100%"
+    >
+      <Text bold>{t('Qwen OAuth Authentication')}</Text>
 
-      {/* Dynamic Status Display */}
-      <StatusDisplay timeRemaining={timeRemaining} dots={dots} />
+      <Box marginTop={1}>
+        <Text>{t('Please visit this URL to authorize:')}</Text>
+      </Box>
+
+      <Link url={deviceAuth.verification_uri_complete || ''} fallback={false}>
+        <Text color={theme.status.success} bold>
+          {deviceAuth.verification_uri_complete}
+        </Text>
+      </Link>
+
+      <Box marginTop={1} justifyContent="space-between">
+        <Text>
+          <Spinner type="dots" /> {t('Waiting for authorization')}
+          {dots}
+        </Text>
+        <Text color={theme.text.secondary}>
+          {t('Time remaining:')} {formatTime(timeRemaining)}
+        </Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={theme.text.secondary}>{t('Esc to cancel')}</Text>
+      </Box>
     </Box>
   );
 }