Merge branch 'main' into feature/arena-agent-collaboration

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

@@ -49,6 +49,18 @@ export function ApiKeyInput({
           setError(t('API key cannot be empty.'));
           return;
         }
+        // Only validate sk-sp- prefix for China region (aliyun.com)
+        if (
+          region === CodingPlanRegion.CHINA &&
+          !trimmedKey.startsWith('sk-sp-')
+        ) {
+          setError(
+            t(
+              'Invalid API key. Coding Plan API keys start with "sk-sp-". Please check.',
+            ),
+          );
+          return;
+        }
         onSubmit(trimmedKey);
       }
     },
@@ -57,9 +69,6 @@ export function ApiKeyInput({
 
   return (
     <Box flexDirection="column">
-      <Box marginBottom={1}>
-        <Text>{t('Please enter your API key:')}</Text>
-      </Box>
       <TextInput value={apiKey} onChange={setApiKey} placeholder="sk-sp-..." />
       {error && (
         <Box marginTop={1}>
@@ -67,18 +76,18 @@ export function ApiKeyInput({
         </Box>
       )}
       <Box marginTop={1}>
-        <Text>{t('You can get your exclusive Coding Plan API-KEY here:')}</Text>
+        <Text>{t('You can get your Coding Plan API key here')}</Text>
       </Box>
       <Box marginTop={0}>
         <Link url={apiKeyUrl} fallback={false}>
-          <Text color={theme.status.success} underline>
+          <Text color={theme.text.link} underline>
             {apiKeyUrl}
           </Text>
         </Link>
       </Box>
       <Box marginTop={1}>
         <Text color={theme.text.secondary}>
-          {t('(Press Enter to submit, Escape to cancel)')}
+          {t('Enter to submit, Esc to go back')}
         </Text>
       </Box>
     </Box>

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

@@ -5,16 +5,43 @@
  */
 
 import { Box } from 'ink';
-import { Header } from './Header.js';
+import { AuthType } from '@qwen-code/qwen-code-core';
+import { Header, AuthDisplayType } from './Header.js';
 import { Tips } from './Tips.js';
 import { useSettings } from '../contexts/SettingsContext.js';
 import { useConfig } from '../contexts/ConfigContext.js';
 import { useUIState } from '../contexts/UIStateContext.js';
+import { isCodingPlanConfig } from '../../constants/codingPlan.js';
 
 interface AppHeaderProps {
   version: string;
 }
 
+/**
+ * Determine the auth display type based on auth type and configuration.
+ */
+function getAuthDisplayType(
+  authType?: AuthType,
+  baseUrl?: string,
+  apiKeyEnvKey?: string,
+): AuthDisplayType {
+  if (!authType) {
+    return AuthDisplayType.UNKNOWN;
+  }
+
+  // Check if it's a Coding Plan config
+  if (isCodingPlanConfig(baseUrl, apiKeyEnvKey)) {
+    return AuthDisplayType.CODING_PLAN;
+  }
+
+  switch (authType) {
+    case AuthType.QWEN_OAUTH:
+      return AuthDisplayType.QWEN_OAUTH;
+    default:
+      return AuthDisplayType.API_KEY;
+  }
+}
+
 export const AppHeader = ({ version }: AppHeaderProps) => {
   const settings = useSettings();
   const config = useConfig();
@@ -27,12 +54,18 @@ export const AppHeader = ({ version }: AppHeaderProps) => {
   const showBanner = !config.getScreenReader();
   const showTips = !(settings.merged.ui?.hideTips || config.getScreenReader());
 
+  const authDisplayType = getAuthDisplayType(
+    authType,
+    contentGeneratorConfig?.baseUrl,
+    contentGeneratorConfig?.apiKeyEnvKey,
+  );
+
   return (
     <Box flexDirection="column">
       {showBanner && (
         <Header
           version={version}
-          authType={authType}
+          authDisplayType={authDisplayType}
           model={model}
           workingDirectory={targetDir}
         />

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

@@ -117,6 +117,7 @@ const createMockUIState = (overrides: Partial<UIState> = {}): UIState =>
 const createMockUIActions = (): UIActions =>
   ({
     handleFinalSubmit: vi.fn(),
+    handleRetryLastPrompt: vi.fn(),
     handleClearScreen: vi.fn(),
     setShellModeActive: vi.fn(),
     onEscapePromptChange: vi.fn(),

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

@@ -6,8 +6,7 @@
 
 import { render } from 'ink-testing-library';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { AuthType } from '@qwen-code/qwen-code-core';
-import { Header } from './Header.js';
+import { Header, AuthDisplayType } from './Header.js';
 import * as useTerminalSize from '../hooks/useTerminalSize.js';
 
 vi.mock('../hooks/useTerminalSize.js');
@@ -15,86 +14,70 @@ const useTerminalSizeMock = vi.mocked(useTerminalSize.useTerminalSize);
 
 const defaultProps = {
   version: '1.0.0',
-  authType: AuthType.QWEN_OAUTH,
+  authDisplayType: AuthDisplayType.QWEN_OAUTH,
   model: 'qwen-coder-plus',
   workingDirectory: '/home/user/projects/test',
 };
 
 describe('<Header />', () => {
   beforeEach(() => {
-    // Default to wide terminal (shows both logo and info panel)
     useTerminalSizeMock.mockReturnValue({ columns: 120, rows: 24 });
   });
 
   it('renders the ASCII logo on wide terminal', () => {
     const { lastFrame } = render(<Header {...defaultProps} />);
-    // Check that parts of the shortAsciiLogo are rendered
     expect(lastFrame()).toContain('██╔═══██╗');
   });
 
   it('hides the ASCII logo on narrow terminal', () => {
     useTerminalSizeMock.mockReturnValue({ columns: 60, rows: 24 });
     const { lastFrame } = render(<Header {...defaultProps} />);
-    // Should not contain the logo but still show the info panel
     expect(lastFrame()).not.toContain('██╔═══██╗');
     expect(lastFrame()).toContain('>_ Qwen Code');
   });
 
-  it('renders custom ASCII art when provided on wide terminal', () => {
-    const customArt = 'CUSTOM ART';
-    const { lastFrame } = render(
-      <Header {...defaultProps} customAsciiArt={customArt} />,
-    );
-    expect(lastFrame()).toContain(customArt);
-  });
-
   it('displays the version number', () => {
     const { lastFrame } = render(<Header {...defaultProps} />);
     expect(lastFrame()).toContain('v1.0.0');
   });
 
-  it('displays Qwen Code title with >_ prefix', () => {
-    const { lastFrame } = render(<Header {...defaultProps} />);
-    expect(lastFrame()).toContain('>_ Qwen Code');
-  });
-
   it('displays auth type and model', () => {
     const { lastFrame } = render(<Header {...defaultProps} />);
     expect(lastFrame()).toContain('Qwen OAuth');
     expect(lastFrame()).toContain('qwen-coder-plus');
   });
 
+  it('displays Coding Plan auth type', () => {
+    const { lastFrame } = render(
+      <Header
+        {...defaultProps}
+        authDisplayType={AuthDisplayType.CODING_PLAN}
+      />,
+    );
+    expect(lastFrame()).toContain('Coding Plan');
+  });
+
+  it('displays API Key auth type', () => {
+    const { lastFrame } = render(
+      <Header {...defaultProps} authDisplayType={AuthDisplayType.API_KEY} />,
+    );
+    expect(lastFrame()).toContain('API Key');
+  });
+
+  it('displays Unknown when auth type is not set', () => {
+    const { lastFrame } = render(
+      <Header {...defaultProps} authDisplayType={undefined} />,
+    );
+    expect(lastFrame()).toContain('Unknown');
+  });
+
   it('displays working directory', () => {
     const { lastFrame } = render(<Header {...defaultProps} />);
     expect(lastFrame()).toContain('/home/user/projects/test');
   });
 
-  it('renders a custom working directory display', () => {
-    const { lastFrame } = render(
-      <Header {...defaultProps} workingDirectory="custom display" />,
-    );
-    expect(lastFrame()).toContain('custom display');
-  });
-
-  it('displays working directory without branch name', () => {
-    const { lastFrame } = render(<Header {...defaultProps} />);
-    // Branch name is no longer shown in header
-    expect(lastFrame()).toContain('/home/user/projects/test');
-    expect(lastFrame()).not.toContain('(main*)');
-  });
-
-  it('formats home directory with tilde', () => {
-    const { lastFrame } = render(
-      <Header {...defaultProps} workingDirectory="/Users/testuser/projects" />,
-    );
-    // The actual home dir replacement depends on os.homedir()
-    // Just verify the path is shown
-    expect(lastFrame()).toContain('projects');
-  });
-
   it('renders with border around info panel', () => {
     const { lastFrame } = render(<Header {...defaultProps} />);
-    // Check for border characters (round border style uses these)
     expect(lastFrame()).toContain('╭');
     expect(lastFrame()).toContain('╯');
   });

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

@@ -7,59 +7,35 @@
 import type React from 'react';
 import { Box, Text } from 'ink';
 import Gradient from 'ink-gradient';
-import { AuthType, shortenPath, tildeifyPath } from '@qwen-code/qwen-code-core';
+import { shortenPath, tildeifyPath } from '@qwen-code/qwen-code-core';
 import { theme } from '../semantic-colors.js';
 import { shortAsciiLogo } from './AsciiArt.js';
 import { getAsciiArtWidth, getCachedStringWidth } from '../utils/textUtils.js';
 import { useTerminalSize } from '../hooks/useTerminalSize.js';
 
+/**
+ * Auth display type for the Header component.
+ * Simplified representation of authentication method shown to users.
+ */
+export enum AuthDisplayType {
+  QWEN_OAUTH = 'Qwen OAuth',
+  CODING_PLAN = 'Coding Plan',
+  API_KEY = 'API Key',
+  UNKNOWN = 'Unknown',
+}
+
 interface HeaderProps {
   customAsciiArt?: string; // For user-defined ASCII art
   version: string;
-  authType?: AuthType;
+  authDisplayType?: AuthDisplayType;
   model: string;
   workingDirectory: string;
 }
 
-function titleizeAuthType(value: string): string {
-  return value
-    .split(/[-_]/g)
-    .filter(Boolean)
-    .map((part) => {
-      if (part.toLowerCase() === 'ai') {
-        return 'AI';
-      }
-      return part.charAt(0).toUpperCase() + part.slice(1);
-    })
-    .join(' ');
-}
-
-// Format auth type for display
-function formatAuthType(authType?: AuthType): string {
-  if (!authType) {
-    return 'Unknown';
-  }
-
-  switch (authType) {
-    case AuthType.QWEN_OAUTH:
-      return 'Qwen OAuth';
-    case AuthType.USE_OPENAI:
-      return 'OpenAI';
-    case AuthType.USE_GEMINI:
-      return 'Gemini';
-    case AuthType.USE_VERTEX_AI:
-      return 'Vertex AI';
-    case AuthType.USE_ANTHROPIC:
-      return 'Anthropic';
-    default:
-      return titleizeAuthType(String(authType));
-  }
-}
-
 export const Header: React.FC<HeaderProps> = ({
   customAsciiArt,
   version,
-  authType,
+  authDisplayType,
   model,
   workingDirectory,
 }) => {
@@ -67,7 +43,7 @@ export const Header: React.FC<HeaderProps> = ({
 
   const displayLogo = customAsciiArt ?? shortAsciiLogo;
   const logoWidth = getAsciiArtWidth(displayLogo);
-  const formattedAuthType = formatAuthType(authType);
+  const formattedAuthType = authDisplayType ?? AuthDisplayType.UNKNOWN;
 
   // Calculate available space properly:
   // First determine if logo can be shown, then use remaining space for path
@@ -95,7 +71,7 @@ export const Header: React.FC<HeaderProps> = ({
     ? Math.min(availableTerminalWidth - logoWidth - logoGap, maxInfoPanelWidth)
     : availableTerminalWidth;
 
-  // Calculate max path length (subtract padding/borders from available space)
+  // Calculate max path lengths (subtract padding/borders from available space)
   const maxPathLength = Math.max(
     0,
     availableInfoPanelWidth - infoPanelChromeWidth,

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

@@ -141,7 +141,7 @@ const HistoryItemDisplayComponent: React.FC<HistoryItemDisplayProps> = ({
         <WarningMessage text={itemForDisplay.text} />
       )}
       {itemForDisplay.type === 'error' && (
-        <ErrorMessage text={itemForDisplay.text} />
+        <ErrorMessage text={itemForDisplay.text} hint={itemForDisplay.hint} />
       )}
       {itemForDisplay.type === 'retry_countdown' && (
         <RetryCountdownMessage text={itemForDisplay.text} />

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

@@ -38,6 +38,7 @@ vi.mock('../contexts/UIStateContext.js', () => ({
 }));
 vi.mock('../contexts/UIActionsContext.js', () => ({
   useUIActions: vi.fn(() => ({
+    handleRetryLastPrompt: vi.fn(),
     temporaryCloseFeedbackDialog: vi.fn(),
   })),
 }));
@@ -2436,6 +2437,140 @@ describe('InputPrompt', () => {
       unmount();
     });
   });
+
+  /**
+   * Ctrl+Y (RETRY_LAST) shortcut tests
+   *
+   * The Ctrl+Y shortcut should trigger handleRetryLastPrompt when:
+   * 1. The user presses Ctrl+Y
+   * 2. The InputPrompt is focused
+   * 3. No other modal/dialog is open that would consume the key
+   *
+   * This shortcut is handled in InputPrompt.tsx at line 585-588:
+   * if (keyMatchers[Command.RETRY_LAST](key)) {
+   *   uiActions.handleRetryLastPrompt();
+   *   return;
+   * }
+   */
+  describe('Ctrl+Y retry shortcut', () => {
+    let mockUIActions: {
+      handleRetryLastPrompt: ReturnType<typeof vi.fn>;
+      temporaryCloseFeedbackDialog: ReturnType<typeof vi.fn>;
+    };
+
+    beforeEach(() => {
+      mockUIActions = {
+        handleRetryLastPrompt: vi.fn(),
+        temporaryCloseFeedbackDialog: vi.fn(),
+      };
+
+      // Override the mock for useUIActions
+      vi.doMock('../contexts/UIActionsContext.js', () => ({
+        useUIActions: vi.fn(() => mockUIActions),
+      }));
+    });
+
+    afterEach(() => {
+      vi.doUnmock('../contexts/UIActionsContext.js');
+    });
+
+    /**
+     * Ctrl+Y should trigger handleRetryLastPrompt to retry the last failed request.
+     * This is the primary activation path for the retry feature.
+     */
+    it('should trigger handleRetryLastPrompt on Ctrl+Y', async () => {
+      const { stdin, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      // Send Ctrl+Y (ASCII 25)
+      stdin.write('\x19');
+      await wait();
+
+      // The key matcher should have been triggered
+      // Note: In the actual implementation, this would call uiActions.handleRetryLastPrompt()
+      unmount();
+    });
+
+    /**
+     * The 'y' key alone (without Ctrl) should NOT trigger retry.
+     * This ensures the shortcut doesn't interfere with normal typing.
+     */
+    it('should NOT trigger retry on plain y key', async () => {
+      const { stdin, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      // Send plain 'y'
+      stdin.write('y');
+      await wait();
+
+      // Should insert 'y' into buffer, not trigger retry
+      expect(mockBuffer.handleInput).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: 'y',
+          sequence: 'y',
+        }),
+      );
+
+      unmount();
+    });
+
+    /**
+     * Ctrl+R should NOT trigger retry - it should trigger reverse search instead.
+     * This ensures the retry shortcut doesn't conflict with existing shortcuts.
+     */
+    it('should NOT trigger retry on Ctrl+R (reverse search)', async () => {
+      const { stdin, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      // Send Ctrl+R (ASCII 18)
+      stdin.write('\x12');
+      await wait();
+
+      // Should activate reverse search, not retry
+      // Verify the input was handled (not ignored)
+      expect(mockBuffer.handleInput).not.toHaveBeenCalledWith(
+        expect.objectContaining({
+          ctrl: true,
+          name: 'y',
+        }),
+      );
+
+      unmount();
+    });
+
+    /**
+     * When feedback dialog is open, Ctrl+Y should be passed through after
+     * temporarily closing the dialog.
+     */
+    it('should handle Ctrl+Y when feedback dialog is open', async () => {
+      // Mock feedback dialog as open
+      const mockUIState = { isFeedbackDialogOpen: true };
+      vi.doMock('../contexts/UIStateContext.js', () => ({
+        useUIState: vi.fn(() => mockUIState),
+      }));
+
+      const { stdin, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      // Send Ctrl+Y
+      stdin.write('\x19');
+      await wait();
+
+      // Dialog should be temporarily closed
+      // Note: In actual implementation, temporaryCloseFeedbackDialog would be called
+
+      vi.doUnmock('../contexts/UIStateContext.js');
+      unmount();
+    });
+  });
 });
 function clean(str: string | undefined): string {
   if (!str) return '';

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

@@ -582,6 +582,16 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
         return;
       }
 
+      // Ctrl+Y: Retry the last failed request.
+      // This shortcut is available when:
+      // - There is a failed request in the current session
+      // - The stream is not currently responding or waiting for confirmation
+      // If no failed request exists, a message will be shown to the user.
+      if (keyMatchers[Command.RETRY_LAST](key)) {
+        uiActions.handleRetryLastPrompt();
+        return;
+      }
+
       if (shellModeActive && keyMatchers[Command.REVERSE_SEARCH](key)) {
         setReverseSearchActive(true);
         setTextBeforeReverseSearch(buffer.text);

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

@@ -39,6 +39,7 @@ const getShortcuts = (): Shortcut[] => [
   { key: getNewlineKey(), description: t('for newline') + ' ⏎' },
   { key: 'ctrl+l', description: t('to clear screen') },
   { key: 'ctrl+r', description: t('to search history') },
+  { key: 'ctrl+y', description: t('to retry last request') },
   { key: getPasteKey(), description: t('to paste images') },
   { key: getExternalEditorKey(), description: t('for external editor') },
 ];
@@ -54,11 +55,11 @@ const COLUMN_GAP = 4;
 const MARGIN_LEFT = 2;
 const MARGIN_RIGHT = 2;
 
-// Column distribution for different layouts (3+4+4 for 3 cols, 6+5 for 2 cols)
+// Column distribution for different layouts (4+4+4 for 3 cols, 6+6 for 2 cols)
 const COLUMN_SPLITS: Record<number, number[]> = {
-  3: [3, 4, 4],
-  2: [6, 5],
-  1: [11],
+  3: [4, 4, 4],
+  2: [6, 6],
+  1: [12],
 };
 
 export const KeyboardShortcuts: React.FC = () => {

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

@@ -114,10 +114,9 @@ describe('<ModelDialog />', () => {
     cleanup();
   });
 
-  it('renders the title and help text', () => {
+  it('renders the title', () => {
     const { getByText } = renderComponent();
     expect(getByText('Select Model')).toBeDefined();
-    expect(getByText('(Press Esc to close)')).toBeDefined();
   });
 
   it('passes all model options to DescriptiveRadioButtonSelect', () => {
@@ -289,11 +288,12 @@ describe('<ModelDialog />', () => {
     expect(props.onClose).toHaveBeenCalledTimes(1);
   });
 
-  it('does not pass onHighlight to DescriptiveRadioButtonSelect', () => {
+  it('passes onHighlight to DescriptiveRadioButtonSelect', () => {
     renderComponent();
 
     const childOnHighlight = mockedSelect.mock.calls[0][0].onHighlight;
-    expect(childOnHighlight).toBeUndefined();
+    expect(childOnHighlight).toBeDefined();
+    expect(typeof childOnHighlight).toBe('function');
   });
 
   it('calls onClose prop when "escape" key is pressed', () => {

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

@@ -14,8 +14,7 @@ import {
   MAINLINE_CODER_MODEL,
   type AvailableModel as CoreAvailableModel,
   type ContentGeneratorConfig,
-  type ContentGeneratorConfigSource,
-  type ContentGeneratorConfigSources,
+  type InputModalities,
 } from '@qwen-code/qwen-code-core';
 import { useKeypress } from '../hooks/useKeypress.js';
 import { theme } from '../semantic-colors.js';
@@ -26,61 +25,25 @@ import { useSettings } from '../contexts/SettingsContext.js';
 import { getPersistScopeForModelSelection } from '../../config/modelProvidersScope.js';
 import { t } from '../../i18n/index.js';
 
+function formatModalities(modalities?: InputModalities): string {
+  if (!modalities) return t('text-only');
+  const parts: string[] = [];
+  if (modalities.image) parts.push(t('image'));
+  if (modalities.pdf) parts.push(t('pdf'));
+  if (modalities.audio) parts.push(t('audio'));
+  if (modalities.video) parts.push(t('video'));
+  if (parts.length === 0) return t('text-only');
+  return `${t('text')} · ${parts.join(' · ')}`;
+}
+
 interface ModelDialogProps {
   onClose: () => void;
 }
 
-function formatSourceBadge(
-  source: ContentGeneratorConfigSource | undefined,
-): string | undefined {
-  if (!source) return undefined;
-
-  switch (source.kind) {
-    case 'cli':
-      return source.detail ? `CLI ${source.detail}` : 'CLI';
-    case 'env':
-      return source.envKey ? `ENV ${source.envKey}` : 'ENV';
-    case 'settings':
-      return source.settingsPath
-        ? `Settings ${source.settingsPath}`
-        : 'Settings';
-    case 'modelProviders': {
-      const suffix =
-        source.authType && source.modelId
-          ? `${source.authType}:${source.modelId}`
-          : source.authType
-            ? `${source.authType}`
-            : source.modelId
-              ? `${source.modelId}`
-              : '';
-      return suffix ? `ModelProviders ${suffix}` : 'ModelProviders';
-    }
-    case 'default':
-      return source.detail ? `Default ${source.detail}` : 'Default';
-    case 'computed':
-      return source.detail ? `Computed ${source.detail}` : 'Computed';
-    case 'programmatic':
-      return source.detail ? `Programmatic ${source.detail}` : 'Programmatic';
-    case 'unknown':
-    default:
-      return undefined;
-  }
-}
-
-function readSourcesFromConfig(config: unknown): ContentGeneratorConfigSources {
-  if (!config) {
-    return {};
-  }
-  const maybe = config as {
-    getContentGeneratorConfigSources?: () => ContentGeneratorConfigSources;
-  };
-  return maybe.getContentGeneratorConfigSources?.() ?? {};
-}
-
 function maskApiKey(apiKey: string | undefined): string {
-  if (!apiKey) return '(not set)';
+  if (!apiKey) return `(${t('not set')})`;
   const trimmed = apiKey.trim();
-  if (trimmed.length === 0) return '(not set)';
+  if (trimmed.length === 0) return `(${t('not set')})`;
   if (trimmed.length <= 6) return '***';
   const head = trimmed.slice(0, 3);
   const tail = trimmed.slice(-4);
@@ -131,7 +94,7 @@ function handleModelSwitchSuccess({
     {
       type: 'info',
       text:
-        `authType: ${effectiveAuthType ?? '(none)'}` +
+        `authType: ${effectiveAuthType ?? `(${t('none')})`}` +
         `\n` +
         `Using ${isRuntime ? 'runtime ' : ''}model: ${effectiveModelId}` +
         `\n` +
@@ -143,35 +106,26 @@ function handleModelSwitchSuccess({
   );
 }
 
-function ConfigRow({
+function formatContextWindow(size?: number): string {
+  if (!size) return `(${t('unknown')})`;
+  return `${size.toLocaleString('en-US')} tokens`;
+}
+
+function DetailRow({
   label,
   value,
-  badge,
 }: {
   label: string;
   value: React.ReactNode;
-  badge?: string;
 }): React.JSX.Element {
   return (
-    <Box flexDirection="column">
-      <Box>
-        <Box minWidth={12} flexShrink={0}>
-          <Text color={theme.text.secondary}>{label}:</Text>
-        </Box>
-        <Box flexGrow={1} flexDirection="row" flexWrap="wrap">
-          <Text>{value}</Text>
-        </Box>
+    <Box>
+      <Box minWidth={16} flexShrink={0}>
+        <Text color={theme.text.secondary}>{label}:</Text>
+      </Box>
+      <Box flexGrow={1} flexDirection="row" flexWrap="wrap">
+        <Text>{value}</Text>
       </Box>
-      {badge ? (
-        <Box>
-          <Box minWidth={12} flexShrink={0}>
-            <Text> </Text>
-          </Box>
-          <Box flexGrow={1}>
-            <Text color={theme.text.secondary}>{badge}</Text>
-          </Box>
-        </Box>
-      ) : null}
     </Box>
   );
 }
@@ -183,13 +137,9 @@ export function ModelDialog({ onClose }: ModelDialogProps): React.JSX.Element {
 
   // Local error state for displaying errors within the dialog
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [highlightedValue, setHighlightedValue] = useState<string | null>(null);
 
   const authType = config?.getAuthType();
-  const effectiveConfig =
-    (config?.getContentGeneratorConfig?.() as
-      | ContentGeneratorConfig
-      | undefined) ?? undefined;
-  const sources = readSourcesFromConfig(config);
 
   const availableModelEntries = useMemo(() => {
     const allModels = config ? config.getAllConfiguredModels() : [];
@@ -319,6 +269,20 @@ export function ModelDialog({ onClose }: ModelDialogProps): React.JSX.Element {
     return index === -1 ? 0 : index;
   }, [MODEL_OPTIONS, preferredKey]);
 
+  const handleHighlight = useCallback((value: string) => {
+    setHighlightedValue(value);
+  }, []);
+
+  const highlightedEntry = useMemo(() => {
+    const key = highlightedValue ?? preferredKey;
+    return availableModelEntries.find(
+      ({ authType: t2, model, isRuntime, snapshotId }) => {
+        const v = isRuntime && snapshotId ? snapshotId : `${t2}::${model.id}`;
+        return v === key;
+      },
+    );
+  }, [highlightedValue, preferredKey, availableModelEntries]);
+
   const handleSelect = useCallback(
     async (selected: string) => {
       setErrorMessage(null);
@@ -413,35 +377,6 @@ export function ModelDialog({ onClose }: ModelDialogProps): React.JSX.Element {
     >
       <Text bold>{t('Select Model')}</Text>
 
-      <Box marginTop={1} flexDirection="column">
-        <Text color={theme.text.secondary}>
-          {t('Current (effective) configuration')}
-        </Text>
-        <Box flexDirection="column" marginTop={1}>
-          <ConfigRow label="AuthType" value={authType} />
-          <ConfigRow
-            label="Model"
-            value={effectiveConfig?.model ?? config?.getModel?.() ?? ''}
-            badge={formatSourceBadge(sources['model'])}
-          />
-
-          {authType !== AuthType.QWEN_OAUTH && (
-            <>
-              <ConfigRow
-                label="Base URL"
-                value={effectiveConfig?.baseUrl ?? t('(default)')}
-                badge={formatSourceBadge(sources['baseUrl'])}
-              />
-              <ConfigRow
-                label="API Key"
-                value={effectiveConfig?.apiKey ? t('(set)') : t('(not set)')}
-                badge={formatSourceBadge(sources['apiKey'])}
-              />
-            </>
-          )}
-        </Box>
-      </Box>
-
       {!hasModels ? (
         <Box marginTop={1} flexDirection="column">
           <Text color={theme.status.warning}>
@@ -465,12 +400,48 @@ export function ModelDialog({ onClose }: ModelDialogProps): React.JSX.Element {
           <DescriptiveRadioButtonSelect
             items={MODEL_OPTIONS}
             onSelect={handleSelect}
+            onHighlight={handleHighlight}
             initialIndex={initialIndex}
             showNumbers={true}
           />
         </Box>
       )}
 
+      {highlightedEntry && (
+        <Box marginTop={1} flexDirection="column">
+          <Box
+            borderStyle="single"
+            borderTop
+            borderBottom={false}
+            borderLeft={false}
+            borderRight={false}
+            borderColor={theme.border.default}
+          />
+          <DetailRow
+            label={t('Modality')}
+            value={formatModalities(highlightedEntry.model.modalities)}
+          />
+          <DetailRow
+            label={t('Context Window')}
+            value={formatContextWindow(
+              highlightedEntry.model.contextWindowSize,
+            )}
+          />
+          {highlightedEntry.authType !== AuthType.QWEN_OAUTH && (
+            <>
+              <DetailRow
+                label="Base URL"
+                value={highlightedEntry.model.baseUrl ?? t('(default)')}
+              />
+              <DetailRow
+                label="API Key"
+                value={highlightedEntry.model.envKey ?? t('(not set)')}
+              />
+            </>
+          )}
+        </Box>
+      )}
+
       {errorMessage && (
         <Box marginTop={1} flexDirection="column" paddingX={1}>
           <Text color={theme.status.error} wrap="wrap">
@@ -480,7 +451,9 @@ export function ModelDialog({ onClose }: ModelDialogProps): React.JSX.Element {
       )}
 
       <Box marginTop={1} flexDirection="column">
-        <Text color={theme.text.secondary}>{t('(Press Esc to close)')}</Text>
+        <Text color={theme.text.secondary}>
+          {t('Enter to select, ↑↓ to navigate, Esc to close')}
+        </Text>
       </Box>
     </Box>
   );

packages/cli/src/ui/components/messages/StatusMessages.tsx

@@ -15,6 +15,7 @@ interface StatusMessageProps {
   prefix: string;
   prefixColor: string;
   textColor: string;
+  children?: React.ReactNode;
 }
 
 interface StatusTextProps {
@@ -30,6 +31,7 @@ export const StatusMessage: React.FC<StatusMessageProps> = ({
   prefix,
   prefixColor,
   textColor,
+  children,
 }) => {
   if (!text || text.trim() === '') {
     return null;
@@ -45,6 +47,7 @@ export const StatusMessage: React.FC<StatusMessageProps> = ({
       <Box flexGrow={1}>
         <Text wrap="wrap" color={textColor}>
           <RenderInline text={text} />
+          {children}
         </Text>
       </Box>
     </Box>
@@ -78,13 +81,18 @@ export const WarningMessage: React.FC<StatusTextProps> = ({ text }) => (
   />
 );
 
-export const ErrorMessage: React.FC<StatusTextProps> = ({ text }) => (
+export const ErrorMessage: React.FC<StatusTextProps & { hint?: string }> = ({
+  text,
+  hint,
+}) => (
   <StatusMessage
     text={text}
     prefix="✕"
     prefixColor={theme.status.error}
     textColor={theme.status.error}
-  />
+  >
+    {hint && <Text color={theme.text.secondary}> ({hint})</Text>}
+  </StatusMessage>
 );
 
 export const RetryCountdownMessage: React.FC<StatusTextProps> = ({ text }) => (

packages/cli/src/ui/components/shared/BaseSelectionList.tsx

@@ -30,6 +30,8 @@ export interface BaseSelectionListProps<
   showNumbers?: boolean;
   showScrollArrows?: boolean;
   maxItemsToShow?: number;
+  /** Gap (in rows) between each item. */
+  itemGap?: number;
   renderItem: (item: TItem, context: RenderItemContext) => React.ReactNode;
 }
 
@@ -59,6 +61,7 @@ export function BaseSelectionList<
   showNumbers = true,
   showScrollArrows = false,
   maxItemsToShow = 10,
+  itemGap = 0,
   renderItem,
 }: BaseSelectionListProps<T, TItem>): React.JSX.Element {
   const { activeIndex } = useSelectionList({
@@ -89,7 +92,7 @@ export function BaseSelectionList<
   const numberColumnWidth = String(items.length).length;
 
   return (
-    <Box flexDirection="column">
+    <Box flexDirection="column" gap={itemGap}>
       {/* Use conditional coloring instead of conditional rendering */}
       {showScrollArrows && (
         <Text

packages/cli/src/ui/components/shared/DescriptiveRadioButtonSelect.tsx

@@ -32,6 +32,8 @@ export interface DescriptiveRadioButtonSelectProps<T> {
   showScrollArrows?: boolean;
   /** The maximum number of items to show at once. */
   maxItemsToShow?: number;
+  /** Gap (in rows) between each item. */
+  itemGap?: number;
 }
 
 /**
@@ -48,6 +50,7 @@ export function DescriptiveRadioButtonSelect<T>({
   showNumbers = false,
   showScrollArrows = false,
   maxItemsToShow = 10,
+  itemGap = 0,
 }: DescriptiveRadioButtonSelectProps<T>): React.JSX.Element {
   return (
     <BaseSelectionList<T, DescriptiveRadioSelectItem<T>>
@@ -59,6 +62,7 @@ export function DescriptiveRadioButtonSelect<T>({
       showNumbers={showNumbers}
       showScrollArrows={showScrollArrows}
       maxItemsToShow={maxItemsToShow}
+      itemGap={itemGap}
       renderItem={(item, { titleColor }) => (
         <Box flexDirection="column" key={item.key}>
           <Text color={titleColor}>{item.title}</Text>