Merge branch 'main' into feat/support-permission

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

@@ -103,7 +103,9 @@ export const Composer = () => {
       )}
 
       {/* Exclusive area: only one component visible at a time */}
+      {/* Hide footer when a confirmation dialog (e.g. ask_user_question) is active */}
       {!showSuggestions &&
+        uiState.streamingState !== StreamingState.WaitingForConfirmation &&
         (showShortcuts ? (
           <KeyboardShortcuts />
         ) : (

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

@@ -35,6 +35,8 @@ import { IdeTrustChangeDialog } from './IdeTrustChangeDialog.js';
 import { WelcomeBackDialog } from './WelcomeBackDialog.js';
 import { AgentCreationWizard } from './subagents/create/AgentCreationWizard.js';
 import { AgentsManagerDialog } from './subagents/manage/AgentsManagerDialog.js';
+import { ExtensionsManagerDialog } from './extensions/ExtensionsManagerDialog.js';
+import { MCPManagementDialog } from './mcp/MCPManagementDialog.js';
 import { SessionPicker } from './SessionPicker.js';
 
 interface DialogManagerProps {
@@ -294,6 +296,18 @@ export const DialogManager = ({
     );
   }
 
+  if (uiState.isExtensionsManagerDialogOpen) {
+    return (
+      <ExtensionsManagerDialog
+        onClose={uiActions.closeExtensionsManagerDialog}
+        config={config}
+      />
+    );
+  }
+  if (uiState.isMcpDialogOpen) {
+    return <MCPManagementDialog onClose={uiActions.closeMcpDialog} />;
+  }
+
   if (uiState.isResumeDialogOpen) {
     return (
       <SessionPicker

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

@@ -8,19 +8,23 @@ import type React from 'react';
 import { useMemo } from 'react';
 import { escapeAnsiCtrlCodes } from '../utils/textUtils.js';
 import type { HistoryItem } from '../types.js';
-import { UserMessage } from './messages/UserMessage.js';
-import { UserShellMessage } from './messages/UserShellMessage.js';
-import { GeminiMessage } from './messages/GeminiMessage.js';
-import { InfoMessage } from './messages/InfoMessage.js';
-import { ErrorMessage } from './messages/ErrorMessage.js';
+import {
+  UserMessage,
+  UserShellMessage,
+  AssistantMessage,
+  AssistantMessageContent,
+  ThinkMessage,
+  ThinkMessageContent,
+} from './messages/ConversationMessages.js';
 import { ToolGroupMessage } from './messages/ToolGroupMessage.js';
-import { GeminiMessageContent } from './messages/GeminiMessageContent.js';
-import { GeminiThoughtMessage } from './messages/GeminiThoughtMessage.js';
-import { GeminiThoughtMessageContent } from './messages/GeminiThoughtMessageContent.js';
 import { CompressionMessage } from './messages/CompressionMessage.js';
 import { SummaryMessage } from './messages/SummaryMessage.js';
-import { WarningMessage } from './messages/WarningMessage.js';
-import { RetryCountdownMessage } from './messages/RetryCountdownMessage.js';
+import {
+  InfoMessage,
+  WarningMessage,
+  ErrorMessage,
+  RetryCountdownMessage,
+} from './messages/StatusMessages.js';
 import { Box } from 'ink';
 import { AboutBox } from './AboutBox.js';
 import { StatsDisplay } from './StatsDisplay.js';
@@ -61,6 +65,11 @@ const HistoryItemDisplayComponent: React.FC<HistoryItemDisplayProps> = ({
   embeddedShellFocused,
   availableTerminalHeightGemini,
 }) => {
+  const marginTop =
+    item.type === 'gemini_content' || item.type === 'gemini_thought_content'
+      ? 0
+      : 1;
+
   const itemForDisplay = useMemo(() => escapeAnsiCtrlCodes(item), [item]);
   const contentWidth = terminalWidth - 4;
   const boxWidth = mainAreaWidth || contentWidth;
@@ -69,6 +78,7 @@ const HistoryItemDisplayComponent: React.FC<HistoryItemDisplayProps> = ({
     <Box
       flexDirection="column"
       key={itemForDisplay.id}
+      marginTop={marginTop}
       marginLeft={2}
       marginRight={2}
     >
@@ -80,7 +90,7 @@ const HistoryItemDisplayComponent: React.FC<HistoryItemDisplayProps> = ({
         <UserShellMessage text={itemForDisplay.text} />
       )}
       {itemForDisplay.type === 'gemini' && (
-        <GeminiMessage
+        <AssistantMessage
           text={itemForDisplay.text}
           isPending={isPending}
           availableTerminalHeight={
@@ -90,7 +100,7 @@ const HistoryItemDisplayComponent: React.FC<HistoryItemDisplayProps> = ({
         />
       )}
       {itemForDisplay.type === 'gemini_content' && (
-        <GeminiMessageContent
+        <AssistantMessageContent
           text={itemForDisplay.text}
           isPending={isPending}
           availableTerminalHeight={
@@ -100,7 +110,7 @@ const HistoryItemDisplayComponent: React.FC<HistoryItemDisplayProps> = ({
         />
       )}
       {itemForDisplay.type === 'gemini_thought' && (
-        <GeminiThoughtMessage
+        <ThinkMessage
           text={itemForDisplay.text}
           isPending={isPending}
           availableTerminalHeight={
@@ -110,7 +120,7 @@ const HistoryItemDisplayComponent: React.FC<HistoryItemDisplayProps> = ({
         />
       )}
       {itemForDisplay.type === 'gemini_thought_content' && (
-        <GeminiThoughtMessageContent
+        <ThinkMessageContent
           text={itemForDisplay.text}
           isPending={isPending}
           availableTerminalHeight={

packages/cli/src/ui/components/__snapshots__/HistoryItemDisplay.test.tsx.snap

@@ -1,7 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<HistoryItemDisplay /> > should render a full gemini item when using availableTerminalHeightGemini 1`] = `
-"  ✦ Example code block:
+"
+  ✦ Example code block:
       1 Line 1
       2 Line 2
       3 Line 3
@@ -109,7 +110,8 @@ exports[`<HistoryItemDisplay /> > should render a full gemini_content item when
 `;
 
 exports[`<HistoryItemDisplay /> > should render a truncated gemini item 1`] = `
-"  ✦ Example code block:
+"
+  ✦ Example code block:
      ... first 41 lines hidden ...
      42 Line 42
      43 Line 43

packages/cli/src/ui/components/__snapshots__/SettingsDialog.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`SettingsDialog > Snapshot Tests > should render default state correctly
 │   Language: Model                                                                           auto │
 │   Theme                                                                                Qwen Dark │
 │   Vim Mode                                                                                 false │
-│   Interactive Shell (PTY)                                                                  false │
+│   Interactive Shell (PTY)                                                                   true │
 │   Preferred Editor                                                                               │
 │   Auto-connect to IDE                                                                      false │
 │ ▼                                                                                                │
@@ -32,7 +32,7 @@ exports[`SettingsDialog > Snapshot Tests > should render focused on scope select
 │   Language: Model                                                                           auto │
 │   Theme                                                                                Qwen Dark │
 │   Vim Mode                                                                                 false │
-│   Interactive Shell (PTY)                                                                  false │
+│   Interactive Shell (PTY)                                                                   true │
 │   Preferred Editor                                                                               │
 │   Auto-connect to IDE                                                                      false │
 │ ▼                                                                                                │
@@ -53,7 +53,7 @@ exports[`SettingsDialog > Snapshot Tests > should render with accessibility sett
 │   Language: Model                                                                           auto │
 │   Theme                                                                                Qwen Dark │
 │   Vim Mode                                                                                 true* │
-│   Interactive Shell (PTY)                                                                  false │
+│   Interactive Shell (PTY)                                                                   true │
 │   Preferred Editor                                                                               │
 │   Auto-connect to IDE                                                                      false │
 │ ▼                                                                                                │
@@ -74,7 +74,7 @@ exports[`SettingsDialog > Snapshot Tests > should render with all boolean settin
 │   Language: Model                                                                           auto │
 │   Theme                                                                                Qwen Dark │
 │   Vim Mode                                                                                false* │
-│   Interactive Shell (PTY)                                                                  false │
+│   Interactive Shell (PTY)                                                                   true │
 │   Preferred Editor                                                                               │
 │   Auto-connect to IDE                                                                     false* │
 │ ▼                                                                                                │
@@ -95,7 +95,7 @@ exports[`SettingsDialog > Snapshot Tests > should render with different scope se
 │   Language: Model                                                                           auto │
 │   Theme                                                                                Qwen Dark │
 │   Vim Mode (Modified in System)                                                            false │
-│   Interactive Shell (PTY)                                                                  false │
+│   Interactive Shell (PTY)                                                                   true │
 │   Preferred Editor                                                                               │
 │   Auto-connect to IDE                                                                      false │
 │ ▼                                                                                                │
@@ -116,7 +116,7 @@ exports[`SettingsDialog > Snapshot Tests > should render with different scope se
 │   Language: Model                                                                           auto │
 │   Theme                                                                                Qwen Dark │
 │   Vim Mode (Modified in Workspace)                                                         false │
-│   Interactive Shell (PTY)                                                                  false │
+│   Interactive Shell (PTY)                                                                   true │
 │   Preferred Editor                                                                               │
 │   Auto-connect to IDE                                                                      false │
 │ ▼                                                                                                │
@@ -137,7 +137,7 @@ exports[`SettingsDialog > Snapshot Tests > should render with file filtering set
 │   Language: Model                                                                           auto │
 │   Theme                                                                                Qwen Dark │
 │   Vim Mode                                                                                 false │
-│   Interactive Shell (PTY)                                                                  false │
+│   Interactive Shell (PTY)                                                                   true │
 │   Preferred Editor                                                                               │
 │   Auto-connect to IDE                                                                      false │
 │ ▼                                                                                                │
@@ -158,7 +158,7 @@ exports[`SettingsDialog > Snapshot Tests > should render with mixed boolean and
 │   Language: Model                                                                           auto │
 │   Theme                                                                                Qwen Dark │
 │   Vim Mode                                                                                false* │
-│   Interactive Shell (PTY)                                                                  false │
+│   Interactive Shell (PTY)                                                                   true │
 │   Preferred Editor                                                                               │
 │   Auto-connect to IDE                                                                      false │
 │ ▼                                                                                                │
@@ -179,7 +179,7 @@ exports[`SettingsDialog > Snapshot Tests > should render with tools and security
 │   Language: Model                                                                           auto │
 │   Theme                                                                                Qwen Dark │
 │   Vim Mode                                                                                 false │
-│   Interactive Shell (PTY)                                                                  false │
+│   Interactive Shell (PTY)                                                                   true │
 │   Preferred Editor                                                                               │
 │   Auto-connect to IDE                                                                      false │
 │ ▼                                                                                                │
@@ -200,7 +200,7 @@ exports[`SettingsDialog > Snapshot Tests > should render with various boolean se
 │   Language: Model                                                                           auto │
 │   Theme                                                                                Qwen Dark │
 │   Vim Mode                                                                                 true* │
-│   Interactive Shell (PTY)                                                                  false │
+│   Interactive Shell (PTY)                                                                   true │
 │   Preferred Editor                                                                               │
 │   Auto-connect to IDE                                                                      true* │
 │ ▼                                                                                                │

packages/cli/src/ui/components/extensions/ExtensionsManagerDialog.test.tsx

@@ -0,0 +1,153 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from 'ink-testing-library';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ExtensionsManagerDialog } from './ExtensionsManagerDialog.js';
+import { UIStateContext } from '../../contexts/UIStateContext.js';
+import { KeypressProvider } from '../../contexts/KeypressContext.js';
+import type { UIState } from '../../contexts/UIStateContext.js';
+import type { Config, Extension } from '@qwen-code/qwen-code-core';
+import { ExtensionUpdateState } from '../../state/extensions.js';
+
+const createMockExtension = (
+  name: string,
+  isActive = true,
+  version = '1.0.0',
+): Extension =>
+  ({
+    id: name,
+    name,
+    version,
+    path: `/home/user/.qwen/extensions/${name}`,
+    isActive,
+    installMetadata: {
+      type: 'git',
+      source: `github:user/${name}`,
+    },
+    mcpServers: {},
+    commands: [],
+    skills: [],
+    agents: [],
+    resolvedSettings: [],
+    config: {},
+    contextFiles: [],
+  }) as unknown as Extension;
+
+const createMockConfig = (extensions: Extension[] = []): Config =>
+  ({
+    getExtensions: () => extensions,
+    getExtensionManager: () => ({
+      getLoadedExtensions: () => extensions,
+      refreshCache: vi.fn().mockResolvedValue(undefined),
+      checkForAllExtensionUpdates: vi.fn().mockResolvedValue(undefined),
+      disableExtension: vi.fn().mockResolvedValue(undefined),
+      enableExtension: vi.fn().mockResolvedValue(undefined),
+      uninstallExtension: vi.fn().mockResolvedValue(undefined),
+      updateExtension: vi.fn().mockResolvedValue(undefined),
+    }),
+    getLoadedExtensions: () => extensions,
+  }) as unknown as Config;
+
+const createMockUIState = (
+  extensionsUpdateState = new Map<string, ExtensionUpdateState>(),
+): UIState =>
+  ({
+    extensionsUpdateState,
+  }) as unknown as UIState;
+
+describe('ExtensionsManagerDialog Snapshots', () => {
+  const baseProps = {
+    onClose: vi.fn(),
+    config: createMockConfig(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should render empty state when no extensions installed', () => {
+    const uiState = createMockUIState();
+    const { lastFrame } = render(
+      <UIStateContext.Provider value={uiState}>
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <ExtensionsManagerDialog {...baseProps} />
+        </KeypressProvider>
+      </UIStateContext.Provider>,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render extension list with extensions', () => {
+    const extensions = [
+      createMockExtension('test-extension', true),
+      createMockExtension('another-extension', false),
+    ];
+    const uiState = createMockUIState(
+      new Map([
+        ['test-extension', ExtensionUpdateState.UP_TO_DATE],
+        ['another-extension', ExtensionUpdateState.UPDATE_AVAILABLE],
+      ]),
+    );
+    const { lastFrame } = render(
+      <UIStateContext.Provider value={uiState}>
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <ExtensionsManagerDialog
+            {...baseProps}
+            config={createMockConfig(extensions)}
+          />
+        </KeypressProvider>
+      </UIStateContext.Provider>,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render with update available status', () => {
+    const extensions = [createMockExtension('outdated-extension', true)];
+    const uiState = createMockUIState(
+      new Map([['outdated-extension', ExtensionUpdateState.UPDATE_AVAILABLE]]),
+    );
+    const { lastFrame } = render(
+      <UIStateContext.Provider value={uiState}>
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <ExtensionsManagerDialog
+            {...baseProps}
+            config={createMockConfig(extensions)}
+          />
+        </KeypressProvider>
+      </UIStateContext.Provider>,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render with checking status', () => {
+    const extensions = [createMockExtension('checking-extension', true)];
+    const uiState = createMockUIState(
+      new Map([
+        ['checking-extension', ExtensionUpdateState.CHECKING_FOR_UPDATES],
+      ]),
+    );
+    const { lastFrame } = render(
+      <UIStateContext.Provider value={uiState}>
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <ExtensionsManagerDialog
+            {...baseProps}
+            config={createMockConfig(extensions)}
+          />
+        </KeypressProvider>
+      </UIStateContext.Provider>,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+});

packages/cli/src/ui/components/extensions/ExtensionsManagerDialog.tsx

@@ -0,0 +1,527 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import {
+  ExtensionListStep,
+  ExtensionDetailStep,
+  ActionSelectionStep,
+  UninstallConfirmStep,
+  ScopeSelectStep,
+} from './steps/index.js';
+import { MANAGEMENT_STEPS, type ExtensionAction } from './types.js';
+import { theme } from '../../semantic-colors.js';
+import { useKeypress } from '../../hooks/useKeypress.js';
+import { useUIState } from '../../contexts/UIStateContext.js';
+import { t } from '../../../i18n/index.js';
+import type { Extension, Config } from '@qwen-code/qwen-code-core';
+import { SettingScope, createDebugLogger } from '@qwen-code/qwen-code-core';
+import { ExtensionUpdateState } from '../../state/extensions.js';
+import { getErrorMessage } from '../../../utils/errors.js';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+
+interface ExtensionsManagerDialogProps {
+  onClose: () => void;
+  config: Config | null;
+}
+
+const debugLogger = createDebugLogger('EXTENSIONS_MANAGER_DIALOG');
+
+export function ExtensionsManagerDialog({
+  onClose,
+  config,
+}: ExtensionsManagerDialogProps) {
+  const { extensionsUpdateState } = useUIState();
+
+  const [extensions, setExtensions] = useState<Extension[]>([]);
+  const [selectedExtensionIndex, setSelectedExtensionIndex] =
+    useState<number>(-1);
+  const [navigationStack, setNavigationStack] = useState<string[]>([
+    MANAGEMENT_STEPS.EXTENSION_LIST,
+  ]);
+  const [updateInProgress, setUpdateInProgress] = useState(false);
+  const [updateError, setUpdateError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const { columns } = useTerminalSize();
+  const boxWidth = columns - 4;
+
+  // Load extensions
+  const loadExtensions = useCallback(async () => {
+    if (!config) return;
+
+    const extensionManager = config.getExtensionManager();
+    if (!extensionManager) {
+      debugLogger.error('ExtensionManager not available');
+      return;
+    }
+
+    try {
+      await extensionManager.refreshCache();
+      const loadedExtensions = extensionManager.getLoadedExtensions();
+      setExtensions(loadedExtensions);
+    } catch (error) {
+      debugLogger.error('Failed to load extensions:', error);
+    }
+  }, [config]);
+
+  // Initial load
+  useEffect(() => {
+    loadExtensions();
+  }, [loadExtensions]);
+
+  // Memoized selected extension
+  const selectedExtension = useMemo(
+    () =>
+      selectedExtensionIndex >= 0 ? extensions[selectedExtensionIndex] : null,
+    [extensions, selectedExtensionIndex],
+  );
+
+  // Check if update is available for selected extension
+  const hasUpdateAvailable = useMemo(() => {
+    if (!selectedExtension) return false;
+    const state = extensionsUpdateState.get(selectedExtension.name);
+    return state === ExtensionUpdateState.UPDATE_AVAILABLE;
+  }, [selectedExtension, extensionsUpdateState]);
+
+  // Helper to get current step
+  const getCurrentStep = useCallback(
+    () =>
+      navigationStack[navigationStack.length - 1] ||
+      MANAGEMENT_STEPS.EXTENSION_LIST,
+    [navigationStack],
+  );
+
+  const handleSelectExtension = useCallback((extensionIndex: number) => {
+    setSelectedExtensionIndex(extensionIndex);
+    setSuccessMessage(null); // Clear success message when navigating
+    setErrorMessage(null); // Clear error message when navigating
+    setNavigationStack((prev) => [...prev, MANAGEMENT_STEPS.ACTION_SELECTION]);
+  }, []);
+
+  const handleNavigateToStep = useCallback((step: string) => {
+    setNavigationStack((prev) => [...prev, step]);
+  }, []);
+
+  const handleNavigateBack = useCallback(() => {
+    setNavigationStack((prev) => {
+      if (prev.length <= 1) {
+        return prev;
+      }
+      return prev.slice(0, -1);
+    });
+    // Clear messages when navigating back
+    setErrorMessage(null);
+  }, []);
+
+  const handleUpdateExtension = useCallback(async () => {
+    if (!config || !selectedExtension) return;
+
+    setUpdateInProgress(true);
+    setUpdateError(null);
+
+    try {
+      const extensionManager = config.getExtensionManager();
+      if (!extensionManager) {
+        throw new Error('ExtensionManager not available');
+      }
+
+      const state = extensionsUpdateState.get(selectedExtension.name);
+      if (state !== ExtensionUpdateState.UPDATE_AVAILABLE) {
+        throw new Error('No update available');
+      }
+
+      // Use the extension manager to update
+      await extensionManager.updateExtension(
+        selectedExtension,
+        ExtensionUpdateState.UPDATE_AVAILABLE,
+        (name, newState) => {
+          debugLogger.debug(`Update state for ${name}:`, newState);
+        },
+      );
+
+      // Reload extensions after update to get new version info
+      await loadExtensions();
+
+      // Trigger a re-check of update status for all extensions
+      await extensionManager.checkForAllExtensionUpdates((name, newState) => {
+        debugLogger.debug(`Recheck update state for ${name}:`, newState);
+      });
+
+      // Show success message
+      setSuccessMessage(
+        t('Extension "{{name}}" updated successfully.', {
+          name: selectedExtension.name,
+        }),
+      );
+
+      // Go back to action selection
+      handleNavigateBack();
+    } catch (error) {
+      debugLogger.error('Failed to update extension:', error);
+      setUpdateError(
+        error instanceof Error ? error.message : 'Unknown error occurred',
+      );
+    } finally {
+      setUpdateInProgress(false);
+    }
+  }, [
+    config,
+    selectedExtension,
+    extensionsUpdateState,
+    loadExtensions,
+    handleNavigateBack,
+  ]);
+
+  const handleActionSelect = useCallback(
+    (action: ExtensionAction) => {
+      switch (action) {
+        case 'view':
+          handleNavigateToStep(MANAGEMENT_STEPS.EXTENSION_DETAIL);
+          break;
+        case 'update':
+          handleNavigateToStep(MANAGEMENT_STEPS.UPDATE_PROGRESS);
+          handleUpdateExtension();
+          break;
+        case 'disable':
+          handleNavigateToStep(MANAGEMENT_STEPS.DISABLE_SCOPE_SELECT);
+          break;
+        case 'enable':
+          handleNavigateToStep(MANAGEMENT_STEPS.ENABLE_SCOPE_SELECT);
+          break;
+        case 'uninstall':
+          handleNavigateToStep(MANAGEMENT_STEPS.UNINSTALL_CONFIRMATION);
+          break;
+        default:
+          break;
+      }
+    },
+    [handleNavigateToStep, handleUpdateExtension],
+  );
+
+  // Unified handler for toggling extension state (enable/disable)
+  const handleToggleExtensionState = useCallback(
+    async (scope: 'user' | 'workspace', newState: boolean) => {
+      if (!config || !selectedExtension) return;
+
+      try {
+        const extensionManager = config.getExtensionManager();
+        if (!extensionManager) {
+          throw new Error('ExtensionManager not available');
+        }
+
+        const settingScope =
+          scope === 'user' ? SettingScope.User : SettingScope.Workspace;
+
+        if (newState) {
+          await extensionManager.enableExtension(
+            selectedExtension.name,
+            settingScope,
+          );
+        } else {
+          await extensionManager.disableExtension(
+            selectedExtension.name,
+            settingScope,
+          );
+        }
+
+        // Update local state
+        setExtensions((prev) =>
+          prev.map((ext) =>
+            ext.name === selectedExtension.name
+              ? { ...ext, isActive: newState }
+              : ext,
+          ),
+        );
+
+        // Show success message
+        const actionKey = newState ? 'enabled' : 'disabled';
+        setSuccessMessage(
+          t(`Extension "{{name}}" ${actionKey} successfully.`, {
+            name: selectedExtension.name,
+          }),
+        );
+        setErrorMessage(null);
+
+        // Go back to extension list to show success message
+        setNavigationStack([MANAGEMENT_STEPS.EXTENSION_LIST]);
+      } catch (error) {
+        debugLogger.error(
+          `Failed to ${newState ? 'enable' : 'disable'} extension:`,
+          error,
+        );
+        setErrorMessage(
+          t('Failed to {{action}} extension "{{name}}": {{error}}', {
+            action: newState ? 'enable' : 'disable',
+            name: selectedExtension.name,
+            error: getErrorMessage(error),
+          }),
+        );
+        setSuccessMessage(null);
+      }
+    },
+    [config, selectedExtension],
+  );
+
+  const handleDisableExtension = useCallback(
+    async (scope: 'user' | 'workspace') => {
+      await handleToggleExtensionState(scope, false);
+    },
+    [handleToggleExtensionState],
+  );
+
+  const handleEnableExtension = useCallback(
+    async (scope: 'user' | 'workspace') => {
+      await handleToggleExtensionState(scope, true);
+    },
+    [handleToggleExtensionState],
+  );
+
+  const handleUninstallExtension = useCallback(
+    async (extension: Extension) => {
+      if (!config) return;
+
+      try {
+        const extensionManager = config.getExtensionManager();
+        if (!extensionManager) {
+          throw new Error('ExtensionManager not available');
+        }
+
+        await extensionManager.uninstallExtension(extension.name, false);
+
+        // Reload extensions
+        await loadExtensions();
+
+        // Navigate back to extension list
+        setNavigationStack([MANAGEMENT_STEPS.EXTENSION_LIST]);
+        setSelectedExtensionIndex(-1);
+      } catch (error) {
+        debugLogger.error('Failed to uninstall extension:', error);
+        throw error;
+      }
+    },
+    [config, loadExtensions],
+  );
+
+  // Centralized ESC key handling
+  useKeypress(
+    (key) => {
+      if (key.name !== 'escape') {
+        return;
+      }
+
+      const currentStep = getCurrentStep();
+      // If there's a success message, clear it first instead of closing
+      if (successMessage && currentStep === MANAGEMENT_STEPS.EXTENSION_LIST) {
+        setSuccessMessage(null);
+        return;
+      }
+      if (currentStep === MANAGEMENT_STEPS.EXTENSION_LIST) {
+        onClose();
+      } else {
+        handleNavigateBack();
+      }
+    },
+    { isActive: true },
+  );
+
+  const renderStepHeader = useCallback(() => {
+    const currentStep = getCurrentStep();
+    const getStepHeaderText = () => {
+      switch (currentStep) {
+        case MANAGEMENT_STEPS.EXTENSION_LIST:
+          return t('Manage Extensions');
+        case MANAGEMENT_STEPS.ACTION_SELECTION:
+          return selectedExtension?.name || t('Choose Action');
+        case MANAGEMENT_STEPS.EXTENSION_DETAIL:
+          return t('Extension Details');
+        case MANAGEMENT_STEPS.DISABLE_SCOPE_SELECT:
+          return t('Disable Extension');
+        case MANAGEMENT_STEPS.ENABLE_SCOPE_SELECT:
+          return t('Enable Extension');
+        case MANAGEMENT_STEPS.UNINSTALL_CONFIRMATION:
+          return t('Uninstall Extension');
+        case MANAGEMENT_STEPS.UPDATE_PROGRESS:
+          return t('Update Extension');
+        default:
+          return t('Unknown Step');
+      }
+    };
+
+    return (
+      <Box>
+        <Text color={theme.text.accent} bold>
+          {getStepHeaderText()}
+        </Text>
+      </Box>
+    );
+  }, [getCurrentStep, selectedExtension]);
+
+  const renderStepFooter = useCallback(() => {
+    const currentStep = getCurrentStep();
+    const getNavigationInstructions = () => {
+      if (currentStep === MANAGEMENT_STEPS.EXTENSION_LIST) {
+        if (extensions.length === 0 || successMessage) {
+          return t('Esc to close');
+        }
+        return t('↑↓ to navigate · Enter to select · Esc to close');
+      }
+
+      if (currentStep === MANAGEMENT_STEPS.EXTENSION_DETAIL) {
+        return t('Esc to go back');
+      }
+
+      if (currentStep === MANAGEMENT_STEPS.UNINSTALL_CONFIRMATION) {
+        return t('Y/Enter to confirm · N/Esc to cancel');
+      }
+
+      if (currentStep === MANAGEMENT_STEPS.UPDATE_PROGRESS) {
+        return updateInProgress ? t('Updating...') : '';
+      }
+
+      return t('↑↓ to navigate · Enter to select · Esc to go back');
+    };
+
+    return (
+      <Box>
+        <Text color={theme.text.secondary}>{getNavigationInstructions()}</Text>
+      </Box>
+    );
+  }, [getCurrentStep, extensions.length, updateInProgress, successMessage]);
+
+  const renderStepContent = useCallback(() => {
+    const currentStep = getCurrentStep();
+
+    // Show error message if present (only on extension list step)
+    if (errorMessage && currentStep === MANAGEMENT_STEPS.EXTENSION_LIST) {
+      return (
+        <Box flexDirection="column" gap={1}>
+          <Text color={theme.status.error}>{errorMessage}</Text>
+        </Box>
+      );
+    }
+
+    // Show success message if present (only on extension list step)
+    if (successMessage && currentStep === MANAGEMENT_STEPS.EXTENSION_LIST) {
+      return (
+        <Box flexDirection="column" gap={1}>
+          <Text color={theme.status.success}>{successMessage}</Text>
+        </Box>
+      );
+    }
+
+    if (updateError && currentStep === MANAGEMENT_STEPS.UPDATE_PROGRESS) {
+      return (
+        <Box flexDirection="column" gap={1}>
+          <Text color={theme.status.error}>{t('Update failed:')}</Text>
+          <Text>{updateError}</Text>
+        </Box>
+      );
+    }
+
+    switch (currentStep) {
+      case MANAGEMENT_STEPS.EXTENSION_LIST:
+        return (
+          <ExtensionListStep
+            extensions={extensions}
+            extensionsUpdateState={extensionsUpdateState}
+            onExtensionSelect={handleSelectExtension}
+          />
+        );
+      case MANAGEMENT_STEPS.ACTION_SELECTION:
+        return (
+          <ActionSelectionStep
+            selectedExtension={selectedExtension}
+            hasUpdateAvailable={hasUpdateAvailable}
+            onNavigateToStep={handleNavigateToStep}
+            onActionSelect={handleActionSelect}
+          />
+        );
+      case MANAGEMENT_STEPS.EXTENSION_DETAIL:
+        return <ExtensionDetailStep selectedExtension={selectedExtension} />;
+      case MANAGEMENT_STEPS.DISABLE_SCOPE_SELECT:
+        return (
+          <ScopeSelectStep
+            selectedExtension={selectedExtension}
+            mode="disable"
+            onScopeSelect={handleDisableExtension}
+          />
+        );
+      case MANAGEMENT_STEPS.ENABLE_SCOPE_SELECT:
+        return (
+          <ScopeSelectStep
+            selectedExtension={selectedExtension}
+            mode="enable"
+            onScopeSelect={handleEnableExtension}
+          />
+        );
+      case MANAGEMENT_STEPS.UNINSTALL_CONFIRMATION:
+        return (
+          <UninstallConfirmStep
+            selectedExtension={selectedExtension}
+            onConfirm={handleUninstallExtension}
+            onNavigateBack={handleNavigateBack}
+          />
+        );
+      case MANAGEMENT_STEPS.UPDATE_PROGRESS:
+        return (
+          <Box flexDirection="column" gap={1}>
+            <Text>
+              {updateInProgress
+                ? t('Updating {{name}}...', {
+                    name: selectedExtension?.name || '',
+                  })
+                : t('Update complete!')}
+            </Text>
+          </Box>
+        );
+      default:
+        return (
+          <Box>
+            <Text color={theme.status.error}>
+              {t('Invalid step: {{step}}', { step: currentStep })}
+            </Text>
+          </Box>
+        );
+    }
+  }, [
+    getCurrentStep,
+    extensions,
+    extensionsUpdateState,
+    selectedExtension,
+    hasUpdateAvailable,
+    updateInProgress,
+    updateError,
+    successMessage,
+    errorMessage,
+    handleSelectExtension,
+    handleNavigateToStep,
+    handleNavigateBack,
+    handleActionSelect,
+    handleDisableExtension,
+    handleEnableExtension,
+    handleUninstallExtension,
+  ]);
+
+  return (
+    <Box flexDirection="column" width={boxWidth}>
+      <Box
+        borderStyle="single"
+        borderColor={theme.border.default}
+        flexDirection="column"
+        paddingLeft={1}
+        paddingRight={1}
+        width={boxWidth}
+        gap={1}
+      >
+        {renderStepHeader()}
+        {renderStepContent()}
+        {renderStepFooter()}
+      </Box>
+    </Box>
+  );
+}

packages/cli/src/ui/components/extensions/__snapshots__/ExtensionsManagerDialog.test.tsx.snap

@@ -0,0 +1,45 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ExtensionsManagerDialog Snapshots > should render empty state when no extensions installed 1`] = `
+"┌──────────────────────────────────────────────────────────────────────────┐
+│ Manage Extensions                                                        │
+│                                                                          │
+│ No extensions installed.                                                 │
+│ Use '/extensions install' to install your first extension.               │
+│                                                                          │
+│ Esc to close                                                             │
+└──────────────────────────────────────────────────────────────────────────┘"
+`;
+
+exports[`ExtensionsManagerDialog Snapshots > should render extension list with extensions 1`] = `
+"┌──────────────────────────────────────────────────────────────────────────┐
+│ Manage Extensions                                                        │
+│                                                                          │
+│ No extensions installed.                                                 │
+│ Use '/extensions install' to install your first extension.               │
+│                                                                          │
+│ Esc to close                                                             │
+└──────────────────────────────────────────────────────────────────────────┘"
+`;
+
+exports[`ExtensionsManagerDialog Snapshots > should render with checking status 1`] = `
+"┌──────────────────────────────────────────────────────────────────────────┐
+│ Manage Extensions                                                        │
+│                                                                          │
+│ No extensions installed.                                                 │
+│ Use '/extensions install' to install your first extension.               │
+│                                                                          │
+│ Esc to close                                                             │
+└──────────────────────────────────────────────────────────────────────────┘"
+`;
+
+exports[`ExtensionsManagerDialog Snapshots > should render with update available status 1`] = `
+"┌──────────────────────────────────────────────────────────────────────────┐
+│ Manage Extensions                                                        │
+│                                                                          │
+│ No extensions installed.                                                 │
+│ Use '/extensions install' to install your first extension.               │
+│                                                                          │
+│ Esc to close                                                             │
+└──────────────────────────────────────────────────────────────────────────┘"
+`;

packages/cli/src/ui/components/extensions/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { ExtensionsManagerDialog } from './ExtensionsManagerDialog.js';
+export type { ExtensionsManagerDialogProps } from './types.js';
+export { MANAGEMENT_STEPS } from './types.js';

packages/cli/src/ui/components/extensions/steps/ActionSelectionStep.test.tsx

@@ -0,0 +1,109 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from 'ink-testing-library';
+import { describe, it, expect, vi } from 'vitest';
+import { ActionSelectionStep } from './ActionSelectionStep.js';
+import { KeypressProvider } from '../../../contexts/KeypressContext.js';
+import type { Extension } from '@qwen-code/qwen-code-core';
+
+const createMockExtension = (name: string, isActive = true): Extension =>
+  ({
+    id: name,
+    name,
+    version: '1.0.0',
+    path: `/home/user/.qwen/extensions/${name}`,
+    isActive,
+    installMetadata: {
+      type: 'git',
+      source: `github:user/${name}`,
+    },
+    mcpServers: {},
+    commands: [],
+    skills: [],
+    agents: [],
+    resolvedSettings: [],
+    config: {},
+    contextFiles: [],
+  }) as unknown as Extension;
+
+describe('ActionSelectionStep Snapshots', () => {
+  const baseProps = {
+    onNavigateToStep: vi.fn(),
+    onNavigateBack: vi.fn(),
+    onActionSelect: vi.fn(),
+  };
+
+  it('should render for active extension without update', () => {
+    const { lastFrame } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <ActionSelectionStep
+          selectedExtension={createMockExtension('active-ext', true)}
+          hasUpdateAvailable={false}
+          {...baseProps}
+        />
+      </KeypressProvider>,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render for disabled extension', () => {
+    const { lastFrame } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <ActionSelectionStep
+          selectedExtension={createMockExtension('disabled-ext', false)}
+          hasUpdateAvailable={false}
+          {...baseProps}
+        />
+      </KeypressProvider>,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render for extension with update available', () => {
+    const { lastFrame } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <ActionSelectionStep
+          selectedExtension={createMockExtension('update-ext', true)}
+          hasUpdateAvailable={true}
+          {...baseProps}
+        />
+      </KeypressProvider>,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render for disabled extension with update', () => {
+    const { lastFrame } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <ActionSelectionStep
+          selectedExtension={createMockExtension('disabled-update-ext', false)}
+          hasUpdateAvailable={true}
+          {...baseProps}
+        />
+      </KeypressProvider>,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render with no extension selected', () => {
+    const { lastFrame } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <ActionSelectionStep
+          selectedExtension={null}
+          hasUpdateAvailable={false}
+          {...baseProps}
+        />
+      </KeypressProvider>,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+});

packages/cli/src/ui/components/extensions/steps/ActionSelectionStep.tsx

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useMemo } from 'react';
+import { Box } from 'ink';
+import { RadioButtonSelect } from '../../shared/RadioButtonSelect.js';
+import { type Extension } from '@qwen-code/qwen-code-core';
+import { t } from '../../../../i18n/index.js';
+import { type ExtensionAction } from '../types.js';
+
+interface ActionSelectionStepProps {
+  selectedExtension: Extension | null;
+  hasUpdateAvailable: boolean;
+  onNavigateToStep: (step: string) => void;
+  onActionSelect: (action: ExtensionAction) => void;
+}
+
+export const ActionSelectionStep = ({
+  selectedExtension,
+  hasUpdateAvailable,
+  onActionSelect,
+}: ActionSelectionStepProps) => {
+  const [selectedAction, setSelectedAction] = useState<ExtensionAction | null>(
+    null,
+  );
+
+  const isActive = selectedExtension?.isActive ?? false;
+
+  // Build action list based on extension state
+  const actions = useMemo(() => {
+    const allActions = [
+      {
+        key: 'view',
+        get label() {
+          return t('View Details');
+        },
+        value: 'view' as const,
+      },
+      ...(hasUpdateAvailable
+        ? [
+            {
+              key: 'update',
+              get label() {
+                return t('Update Extension');
+              },
+              value: 'update' as const,
+            },
+          ]
+        : []),
+      ...(isActive
+        ? [
+            {
+              key: 'disable',
+              get label() {
+                return t('Disable Extension');
+              },
+              value: 'disable' as const,
+            },
+          ]
+        : [
+            {
+              key: 'enable',
+              get label() {
+                return t('Enable Extension');
+              },
+              value: 'enable' as const,
+            },
+          ]),
+      {
+        key: 'uninstall',
+        get label() {
+          return t('Uninstall Extension');
+        },
+        value: 'uninstall' as const,
+      },
+    ];
+    return allActions;
+  }, [hasUpdateAvailable, isActive]);
+
+  const handleActionSelect = (value: ExtensionAction) => {
+    setSelectedAction(value);
+    onActionSelect(value);
+  };
+
+  const selectedIndex = selectedAction
+    ? actions.findIndex((action) => action.value === selectedAction)
+    : 0;
+
+  return (
+    <Box flexDirection="column">
+      <RadioButtonSelect
+        items={actions}
+        initialIndex={selectedIndex}
+        onSelect={handleActionSelect}
+        showNumbers={false}
+      />
+    </Box>
+  );
+};

packages/cli/src/ui/components/extensions/steps/ExtensionDetailStep.tsx

@@ -0,0 +1,128 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Text } from 'ink';
+import { theme } from '../../../semantic-colors.js';
+import { type Extension } from '@qwen-code/qwen-code-core';
+import { t } from '../../../../i18n/index.js';
+
+interface ExtensionDetailStepProps {
+  selectedExtension: Extension | null;
+}
+
+export const ExtensionDetailStep = ({
+  selectedExtension,
+}: ExtensionDetailStepProps) => {
+  if (!selectedExtension) {
+    return (
+      <Box>
+        <Text color={theme.status.error}>{t('No extension selected')}</Text>
+      </Box>
+    );
+  }
+
+  const ext = selectedExtension;
+  const isActive = ext.isActive;
+  const activeColor = isActive ? theme.status.success : theme.text.secondary;
+  const activeString = isActive ? t('active') : t('disabled');
+
+  // Fixed width for labels to ensure alignment
+  const LABEL_WIDTH = 12;
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Box flexDirection="column">
+        <Box>
+          <Box width={LABEL_WIDTH} flexShrink={0}>
+            <Text color={theme.text.primary}>{t('Name:')}</Text>
+          </Box>
+          <Text>{ext.name}</Text>
+        </Box>
+
+        <Box>
+          <Box width={LABEL_WIDTH} flexShrink={0}>
+            <Text color={theme.text.primary}>{t('Version:')}</Text>
+          </Box>
+          <Text>{ext.version}</Text>
+        </Box>
+
+        <Box>
+          <Box width={LABEL_WIDTH} flexShrink={0}>
+            <Text color={theme.text.primary}>{t('Status:')}</Text>
+          </Box>
+          <Text color={activeColor}>{activeString}</Text>
+        </Box>
+
+        <Box>
+          <Box width={LABEL_WIDTH} flexShrink={0}>
+            <Text color={theme.text.primary}>{t('Path:')}</Text>
+          </Box>
+          <Text>{ext.path}</Text>
+        </Box>
+
+        {ext.installMetadata && (
+          <Box>
+            <Box width={LABEL_WIDTH} flexShrink={0}>
+              <Text color={theme.text.primary}>{t('Source:')}</Text>
+            </Box>
+            <Text>{ext.installMetadata.source}</Text>
+          </Box>
+        )}
+
+        {ext.mcpServers && Object.keys(ext.mcpServers).length > 0 && (
+          <Box>
+            <Box width={LABEL_WIDTH} flexShrink={0}>
+              <Text color={theme.text.primary}>{t('MCP Servers:')}</Text>
+            </Box>
+            <Text>{Object.keys(ext.mcpServers).join(', ')}</Text>
+          </Box>
+        )}
+
+        {ext.commands && ext.commands.length > 0 && (
+          <Box>
+            <Box width={LABEL_WIDTH} flexShrink={0}>
+              <Text color={theme.text.primary}>{t('Commands:')}</Text>
+            </Box>
+            <Text>{ext.commands.join(', ')}</Text>
+          </Box>
+        )}
+
+        {ext.skills && ext.skills.length > 0 && (
+          <Box>
+            <Box width={LABEL_WIDTH} flexShrink={0}>
+              <Text color={theme.text.primary}>{t('Skills:')}</Text>
+            </Box>
+            <Text>{ext.skills.map((s) => s.name).join(', ')}</Text>
+          </Box>
+        )}
+
+        {ext.agents && ext.agents.length > 0 && (
+          <Box>
+            <Box width={LABEL_WIDTH} flexShrink={0}>
+              <Text color={theme.text.primary}>{t('Agents:')}</Text>
+            </Box>
+            <Text>{ext.agents.map((a) => a.name).join(', ')}</Text>
+          </Box>
+        )}
+
+        {ext.resolvedSettings && ext.resolvedSettings.length > 0 && (
+          <Box flexDirection="column" marginTop={1}>
+            <Box width={LABEL_WIDTH} flexShrink={0}>
+              <Text color={theme.text.primary}>{t('Settings:')}</Text>
+            </Box>
+            <Box flexDirection="column" paddingLeft={2}>
+              {ext.resolvedSettings.map((setting) => (
+                <Text key={setting.name}>
+                  - {setting.name}: {setting.value}
+                </Text>
+              ))}
+            </Box>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};

packages/cli/src/ui/components/extensions/steps/ExtensionListStep.test.tsx

@@ -0,0 +1,134 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from 'ink-testing-library';
+import { describe, it, expect, vi } from 'vitest';
+import { ExtensionListStep } from './ExtensionListStep.js';
+import { KeypressProvider } from '../../../contexts/KeypressContext.js';
+import type { Extension } from '@qwen-code/qwen-code-core';
+import { ExtensionUpdateState } from '../../../state/extensions.js';
+
+const createMockExtension = (
+  name: string,
+  isActive = true,
+  version = '1.0.0',
+): Extension =>
+  ({
+    id: name,
+    name,
+    version,
+    path: `/home/user/.qwen/extensions/${name}`,
+    isActive,
+    installMetadata: {
+      type: 'git',
+      source: `github:user/${name}`,
+    },
+    mcpServers: {},
+    commands: [],
+    skills: [],
+    agents: [],
+    resolvedSettings: [],
+    config: {},
+    contextFiles: [],
+  }) as unknown as Extension;
+
+describe('ExtensionListStep Snapshots', () => {
+  const baseProps = {
+    onExtensionSelect: vi.fn(),
+  };
+
+  it('should render empty state', () => {
+    const { lastFrame } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <ExtensionListStep
+          extensions={[]}
+          extensionsUpdateState={new Map()}
+          {...baseProps}
+        />
+      </KeypressProvider>,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render list with single extension', () => {
+    const extensions = [createMockExtension('test-extension', true)];
+    const { lastFrame } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <ExtensionListStep
+          extensions={extensions}
+          extensionsUpdateState={new Map()}
+          {...baseProps}
+        />
+      </KeypressProvider>,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render list with multiple extensions', () => {
+    const extensions = [
+      createMockExtension('active-extension', true),
+      createMockExtension('disabled-extension', false),
+      createMockExtension('update-available', true),
+    ];
+    const updateState = new Map([
+      ['active-extension', ExtensionUpdateState.UP_TO_DATE],
+      ['disabled-extension', ExtensionUpdateState.NOT_UPDATABLE],
+      ['update-available', ExtensionUpdateState.UPDATE_AVAILABLE],
+    ]);
+
+    const { lastFrame } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <ExtensionListStep
+          extensions={extensions}
+          extensionsUpdateState={updateState}
+          {...baseProps}
+        />
+      </KeypressProvider>,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render with checking status', () => {
+    const extensions = [createMockExtension('checking-extension', true)];
+    const updateState = new Map([
+      ['checking-extension', ExtensionUpdateState.CHECKING_FOR_UPDATES],
+    ]);
+
+    const { lastFrame } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <ExtensionListStep
+          extensions={extensions}
+          extensionsUpdateState={updateState}
+          {...baseProps}
+        />
+      </KeypressProvider>,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render with error status', () => {
+    const extensions = [createMockExtension('error-extension', true)];
+    const updateState = new Map([
+      ['error-extension', ExtensionUpdateState.ERROR],
+    ]);
+
+    const { lastFrame } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <ExtensionListStep
+          extensions={extensions}
+          extensionsUpdateState={updateState}
+          {...baseProps}
+        />
+      </KeypressProvider>,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+});

packages/cli/src/ui/components/extensions/steps/ExtensionListStep.tsx

@@ -0,0 +1,177 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useEffect, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../../../semantic-colors.js';
+import { useKeypress } from '../../../hooks/useKeypress.js';
+import { type Extension } from '@qwen-code/qwen-code-core';
+import { t } from '../../../../i18n/index.js';
+import { ExtensionUpdateState } from '../../../state/extensions.js';
+
+interface ExtensionListStepProps {
+  extensions: Extension[];
+  extensionsUpdateState: Map<string, string>;
+  onExtensionSelect: (extensionIndex: number) => void;
+}
+
+export const ExtensionListStep = ({
+  extensions,
+  extensionsUpdateState,
+  onExtensionSelect,
+}: ExtensionListStepProps) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  // Calculate max widths for each column for alignment
+  const { maxNameWidth, maxVersionWidth, maxStatusWidth } = useMemo(() => {
+    let maxName = 0;
+    let maxVersion = 0;
+    let maxStatus = 0;
+    for (const ext of extensions) {
+      maxName = Math.max(maxName, ext.name.length);
+      maxVersion = Math.max(maxVersion, ext.version.length);
+      const statusLength = ext.isActive
+        ? t('active').length
+        : t('disabled').length;
+      maxStatus = Math.max(maxStatus, statusLength);
+    }
+    return {
+      maxNameWidth: maxName,
+      maxVersionWidth: maxVersion,
+      maxStatusWidth: maxStatus,
+    };
+  }, [extensions]);
+
+  // Reset selection when extensions change
+  useEffect(() => {
+    if (extensions.length > 0 && selectedIndex >= extensions.length) {
+      setSelectedIndex(0);
+    }
+  }, [extensions, selectedIndex]);
+
+  // Keyboard navigation
+  useKeypress(
+    (key) => {
+      if (key.name === 'up' || key.name === 'k') {
+        setSelectedIndex((prev) =>
+          prev > 0 ? prev - 1 : extensions.length - 1,
+        );
+      } else if (key.name === 'down' || key.name === 'j') {
+        setSelectedIndex((prev) =>
+          prev < extensions.length - 1 ? prev + 1 : 0,
+        );
+      } else if (key.name === 'return' || key.name === 'space') {
+        if (extensions.length > 0) {
+          onExtensionSelect(selectedIndex);
+        }
+      }
+    },
+    { isActive: true },
+  );
+
+  if (extensions.length === 0) {
+    return (
+      <Box flexDirection="column">
+        <Text color={theme.text.secondary}>
+          {t('No extensions installed.')}
+        </Text>
+        <Text color={theme.text.secondary}>
+          {t("Use '/extensions install' to install your first extension.")}
+        </Text>
+      </Box>
+    );
+  }
+
+  const getUpdateStateColor = (state: string | undefined): string => {
+    if (!state) return theme.text.secondary;
+
+    switch (state) {
+      case ExtensionUpdateState.CHECKING_FOR_UPDATES:
+      case ExtensionUpdateState.UPDATING:
+        return theme.text.secondary;
+      case ExtensionUpdateState.UPDATE_AVAILABLE:
+      case ExtensionUpdateState.UPDATED_NEEDS_RESTART:
+        return theme.status.warning;
+      case ExtensionUpdateState.ERROR:
+        return theme.status.error;
+      case ExtensionUpdateState.UP_TO_DATE:
+      case ExtensionUpdateState.NOT_UPDATABLE:
+      case ExtensionUpdateState.UPDATED:
+        return theme.status.success;
+      default:
+        return theme.text.secondary;
+    }
+  };
+
+  const getLocalizedUpdateState = (state: string | undefined): string => {
+    if (!state) return '';
+    // Map internal state values to translation keys
+    const stateMap: Record<string, string> = {
+      'up to date': t('up to date'),
+      'update available': t('update available'),
+      'checking...': t('checking...'),
+      'not updatable': t('not updatable'),
+      error: t('error'),
+    };
+    return stateMap[state] || state;
+  };
+
+  const renderExtensionItem = (
+    extension: Extension,
+    index: number,
+    isSelected: boolean,
+  ) => {
+    const isActive = extension.isActive;
+    const activeColor = isActive ? theme.status.success : theme.text.secondary;
+    const activeString = isActive ? t('active') : t('disabled');
+
+    const updateState = extensionsUpdateState.get(extension.name);
+    const stateColor = getUpdateStateColor(updateState);
+    const stateText = getLocalizedUpdateState(updateState);
+
+    return (
+      <Box key={extension.name} alignItems="center">
+        <Box minWidth={2} flexShrink={0}>
+          <Text color={isSelected ? theme.text.accent : theme.text.primary}>
+            {isSelected ? '●' : ' '}
+          </Text>
+        </Box>
+        <Box width={maxNameWidth} flexShrink={0}>
+          <Text
+            color={isSelected ? theme.text.accent : theme.text.primary}
+            wrap="truncate"
+          >
+            {extension.name}
+          </Text>
+        </Box>
+        <Box width={maxVersionWidth + 8} flexShrink={0}>
+          <Text color={theme.text.secondary}> v{extension.version}</Text>
+        </Box>
+        <Box width={maxStatusWidth + 8} flexShrink={0}>
+          <Text color={activeColor}>({activeString})</Text>
+        </Box>
+        {stateText && <Text color={stateColor}>[{stateText}]</Text>}
+      </Box>
+    );
+  };
+
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text color={theme.text.secondary}>
+          {t('{{count}} extensions installed', {
+            count: extensions.length.toString(),
+          })}
+        </Text>
+      </Box>
+      <Box flexDirection="column">
+        {extensions.map((extension, index) =>
+          renderExtensionItem(extension, index, index === selectedIndex),
+        )}
+      </Box>
+    </Box>
+  );
+};

packages/cli/src/ui/components/extensions/steps/ScopeSelectStep.tsx

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Text } from 'ink';
+import { RadioButtonSelect } from '../../shared/RadioButtonSelect.js';
+import { type Extension } from '@qwen-code/qwen-code-core';
+import { theme } from '../../../semantic-colors.js';
+import { t } from '../../../../i18n/index.js';
+
+interface ScopeSelectStepProps {
+  selectedExtension: Extension | null;
+  mode: 'disable' | 'enable';
+  onScopeSelect: (scope: 'user' | 'workspace') => void;
+}
+
+export function ScopeSelectStep({
+  selectedExtension,
+  mode,
+  onScopeSelect,
+}: ScopeSelectStepProps) {
+  const scopeItems = [
+    {
+      key: 'user',
+      get label() {
+        return t('User (global)');
+      },
+      value: 'user' as const,
+    },
+    {
+      key: 'workspace',
+      get label() {
+        return t('Workspace (project-specific)');
+      },
+      value: 'workspace' as const,
+    },
+  ];
+
+  const handleSelect = (value: 'user' | 'workspace') => {
+    onScopeSelect(value);
+  };
+
+  if (!selectedExtension) {
+    return (
+      <Box>
+        <Text color={theme.status.error}>{t('No extension selected')}</Text>
+      </Box>
+    );
+  }
+
+  const title =
+    mode === 'disable'
+      ? t('Disable "{{name}}" - Select Scope', { name: selectedExtension.name })
+      : t('Enable "{{name}}" - Select Scope', { name: selectedExtension.name });
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Text color={theme.text.primary}>{title}</Text>
+      <Box>
+        <RadioButtonSelect
+          items={scopeItems}
+          onSelect={handleSelect}
+          showNumbers={false}
+        />
+      </Box>
+    </Box>
+  );
+}

packages/cli/src/ui/components/extensions/steps/UninstallConfirmStep.tsx

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Text } from 'ink';
+import { type Extension } from '@qwen-code/qwen-code-core';
+import { createDebugLogger } from '@qwen-code/qwen-code-core';
+import { theme } from '../../../semantic-colors.js';
+import { useKeypress } from '../../../hooks/useKeypress.js';
+import { t } from '../../../../i18n/index.js';
+
+interface UninstallConfirmStepProps {
+  selectedExtension: Extension | null;
+  onConfirm: (extension: Extension) => Promise<void>;
+  onNavigateBack: () => void;
+}
+
+const debugLogger = createDebugLogger('EXTENSION_UNINSTALL_STEP');
+
+export function UninstallConfirmStep({
+  selectedExtension,
+  onConfirm,
+  onNavigateBack,
+}: UninstallConfirmStepProps) {
+  useKeypress(
+    async (key) => {
+      if (!selectedExtension) return;
+
+      if (key.name === 'y' || key.name === 'return') {
+        try {
+          await onConfirm(selectedExtension);
+          // Navigation will be handled by the parent component after successful uninstall
+        } catch (error) {
+          debugLogger.error('Failed to uninstall extension:', error);
+        }
+      } else if (key.name === 'n' || key.name === 'escape') {
+        onNavigateBack();
+      }
+    },
+    { isActive: true },
+  );
+
+  if (!selectedExtension) {
+    return (
+      <Box>
+        <Text color={theme.status.error}>{t('No extension selected')}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Text color={theme.status.error}>
+        {t('Are you sure you want to uninstall extension "{{name}}"?', {
+          name: selectedExtension.name,
+        })}
+      </Text>
+      <Text color={theme.text.secondary}>
+        {t('This action cannot be undone.')}
+      </Text>
+    </Box>
+  );
+}

packages/cli/src/ui/components/extensions/steps/__snapshots__/ActionSelectionStep.test.tsx.snap

@@ -0,0 +1,33 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ActionSelectionStep Snapshots > should render for active extension without update 1`] = `
+"● View Details
+  Disable Extension
+  Uninstall Extension"
+`;
+
+exports[`ActionSelectionStep Snapshots > should render for disabled extension 1`] = `
+"● View Details
+  Enable Extension
+  Uninstall Extension"
+`;
+
+exports[`ActionSelectionStep Snapshots > should render for disabled extension with update 1`] = `
+"● View Details
+  Update Extension
+  Enable Extension
+  Uninstall Extension"
+`;
+
+exports[`ActionSelectionStep Snapshots > should render for extension with update available 1`] = `
+"● View Details
+  Update Extension
+  Disable Extension
+  Uninstall Extension"
+`;
+
+exports[`ActionSelectionStep Snapshots > should render with no extension selected 1`] = `
+"● View Details
+  Enable Extension
+  Uninstall Extension"
+`;

packages/cli/src/ui/components/extensions/steps/__snapshots__/ExtensionListStep.test.tsx.snap

@@ -0,0 +1,32 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ExtensionListStep Snapshots > should render empty state 1`] = `
+"No extensions installed.
+Use '/extensions install' to install your first extension."
+`;
+
+exports[`ExtensionListStep Snapshots > should render list with multiple extensions 1`] = `
+"3 extensions installed
+
+● active-extension   v1.0.0      (active)        [up to date]
+  disabled-extension v1.0.0      (disabled)      [not updatable]
+  update-available   v1.0.0      (active)        [update available]"
+`;
+
+exports[`ExtensionListStep Snapshots > should render list with single extension 1`] = `
+"1 extensions installed
+
+● test-extension v1.0.0      (active)"
+`;
+
+exports[`ExtensionListStep Snapshots > should render with checking status 1`] = `
+"1 extensions installed
+
+● checking-extension v1.0.0      (active)      [checking for updates]"
+`;
+
+exports[`ExtensionListStep Snapshots > should render with error status 1`] = `
+"1 extensions installed
+
+● error-extension v1.0.0      (active)      [error]"
+`;

packages/cli/src/ui/components/extensions/steps/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { ExtensionListStep } from './ExtensionListStep.js';
+export { ExtensionDetailStep } from './ExtensionDetailStep.js';
+export { ActionSelectionStep } from './ActionSelectionStep.js';
+export { UninstallConfirmStep } from './UninstallConfirmStep.js';
+export { ScopeSelectStep } from './ScopeSelectStep.js';

packages/cli/src/ui/components/extensions/types.ts

@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { Extension, Config } from '@qwen-code/qwen-code-core';
+
+/**
+ * Management steps for the extensions manager dialog.
+ */
+export const MANAGEMENT_STEPS = {
+  EXTENSION_LIST: 'extension-list',
+  ACTION_SELECTION: 'action-selection',
+  EXTENSION_DETAIL: 'extension-detail',
+  UNINSTALL_CONFIRMATION: 'uninstall-confirmation',
+  DISABLE_SCOPE_SELECT: 'disable-scope-select',
+  ENABLE_SCOPE_SELECT: 'enable-scope-select',
+  UPDATE_PROGRESS: 'update-progress',
+} as const;
+
+/**
+ * Props for step navigation.
+ */
+export interface StepNavigationProps {
+  onNavigateToStep: (step: string) => void;
+  onNavigateBack: () => void;
+}
+
+/**
+ * Props for the extension list step.
+ */
+export interface ExtensionListStepProps extends StepNavigationProps {
+  extensions: Extension[];
+  extensionsUpdateState: Map<string, string>;
+  onExtensionSelect: (extensionIndex: number) => void;
+}
+
+/**
+ * Props for the extension detail step.
+ */
+export interface ExtensionDetailStepProps extends StepNavigationProps {
+  selectedExtension: Extension | null;
+}
+
+/**
+ * Props for the action selection step.
+ */
+export interface ActionSelectionStepProps extends StepNavigationProps {
+  selectedExtension: Extension | null;
+  hasUpdateAvailable: boolean;
+  onActionSelect: (action: ExtensionAction) => void;
+}
+
+/**
+ * Props for the uninstall confirmation step.
+ */
+export interface UninstallConfirmStepProps extends StepNavigationProps {
+  selectedExtension: Extension | null;
+  onConfirm: (extension: Extension) => Promise<void>;
+}
+
+/**
+ * Props for the scope selection step.
+ */
+export interface ScopeSelectStepProps extends StepNavigationProps {
+  selectedExtension: Extension | null;
+  mode: 'disable' | 'enable';
+  onScopeSelect: (scope: 'user' | 'workspace') => void;
+}
+
+/**
+ * Available actions for an extension.
+ */
+export type ExtensionAction =
+  | 'view'
+  | 'update'
+  | 'disable'
+  | 'enable'
+  | 'uninstall'
+  | 'back';
+
+/**
+ * Props for the ExtensionsManagerDialog component.
+ */
+export interface ExtensionsManagerDialogProps {
+  onClose: () => void;
+  config: Config | null;
+}

packages/cli/src/ui/components/mcp/MCPManagementDialog.tsx

@@ -0,0 +1,673 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../../semantic-colors.js';
+import { useKeypress } from '../../hooks/useKeypress.js';
+import { t } from '../../../i18n/index.js';
+import type {
+  MCPManagementDialogProps,
+  MCPServerDisplayInfo,
+  MCPToolDisplayInfo,
+} from './types.js';
+import { MCP_MANAGEMENT_STEPS } from './types.js';
+import { ServerListStep } from './steps/ServerListStep.js';
+import { ServerDetailStep } from './steps/ServerDetailStep.js';
+import { ToolListStep } from './steps/ToolListStep.js';
+import { ToolDetailStep } from './steps/ToolDetailStep.js';
+import { DisableScopeSelectStep } from './steps/DisableScopeSelectStep.js';
+import { AuthenticateStep } from './steps/AuthenticateStep.js';
+import { useConfig } from '../../contexts/ConfigContext.js';
+import {
+  getMCPServerStatus,
+  DiscoveredMCPTool,
+  type MCPServerConfig,
+  type AnyDeclarativeTool,
+  type DiscoveredMCPPrompt,
+  createDebugLogger,
+} from '@qwen-code/qwen-code-core';
+import { loadSettings, SettingScope } from '../../../config/settings.js';
+import { isToolValid, getToolInvalidReasons } from './utils.js';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+
+const debugLogger = createDebugLogger('MCP_DIALOG');
+
+export const MCPManagementDialog: React.FC<MCPManagementDialogProps> = ({
+  onClose,
+}) => {
+  const config = useConfig();
+  const { columns: width } = useTerminalSize();
+  const boxWidth = width - 4;
+
+  const [servers, setServers] = useState<MCPServerDisplayInfo[]>([]);
+  const [selectedServerIndex, setSelectedServerIndex] = useState<number>(-1);
+  const [selectedTool, setSelectedTool] = useState<MCPToolDisplayInfo | null>(
+    null,
+  );
+  const [navigationStack, setNavigationStack] = useState<string[]>([
+    MCP_MANAGEMENT_STEPS.SERVER_LIST,
+  ]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Load MCP server data - extracted to a separate function for reuse
+  const fetchServerData = useCallback(async (): Promise<
+    MCPServerDisplayInfo[]
+  > => {
+    if (!config) return [];
+
+    const mcpServers = config.getMcpServers() || {};
+    const toolRegistry = config.getToolRegistry();
+    const promptRegistry = config.getPromptRegistry();
+
+    // Get settings to determine the scope of each server
+    const settings = loadSettings();
+    const userSettings = settings.forScope(SettingScope.User).settings;
+    const workspaceSettings = settings.forScope(
+      SettingScope.Workspace,
+    ).settings;
+
+    const serverInfos: MCPServerDisplayInfo[] = [];
+
+    for (const [name, serverConfig] of Object.entries(mcpServers) as Array<
+      [string, MCPServerConfig]
+    >) {
+      const status = getMCPServerStatus(name);
+
+      // Get tools for this server
+      const allTools: AnyDeclarativeTool[] = toolRegistry?.getAllTools() || [];
+      const serverTools = allTools.filter(
+        (t): t is DiscoveredMCPTool =>
+          t instanceof DiscoveredMCPTool && t.serverName === name,
+      );
+
+      // Get prompts for this server
+      const allPrompts: DiscoveredMCPPrompt[] =
+        promptRegistry?.getAllPrompts() || [];
+      const serverPrompts = allPrompts.filter(
+        (p) => 'serverName' in p && p.serverName === name,
+      );
+
+      // Determine source type
+      let source: 'user' | 'project' | 'extension' = 'user';
+      if (serverConfig.extensionName) {
+        source = 'extension';
+      } else if (workspaceSettings.mcpServers?.[name]) {
+        source = 'project';
+      } else if (userSettings.mcpServers?.[name]) {
+        source = 'user';
+      }
+
+      // Use config.isMcpServerDisabled() to check if server is disabled
+      const isDisabled = config.isMcpServerDisabled(name);
+
+      // Count invalid tools (missing name or description)
+      const invalidToolCount = serverTools.filter(
+        (t) => !t.name || !t.description,
+      ).length;
+
+      serverInfos.push({
+        name,
+        status,
+        source,
+        config: serverConfig,
+        toolCount: serverTools.length,
+        invalidToolCount,
+        promptCount: serverPrompts.length,
+        isDisabled,
+      });
+    }
+
+    return serverInfos;
+  }, [config]);
+
+  // Load MCP server data on initial render
+  useEffect(() => {
+    const loadServers = async () => {
+      setIsLoading(true);
+      try {
+        const serverInfos = await fetchServerData();
+        setServers(serverInfos);
+      } catch (error) {
+        debugLogger.error('Error loading MCP servers:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadServers();
+  }, [fetchServerData]);
+
+  // Selected server
+  const selectedServer = useMemo(() => {
+    if (selectedServerIndex >= 0 && selectedServerIndex < servers.length) {
+      return servers[selectedServerIndex];
+    }
+    return null;
+  }, [servers, selectedServerIndex]);
+
+  // Current step
+  const getCurrentStep = useCallback(
+    () =>
+      navigationStack[navigationStack.length - 1] ||
+      MCP_MANAGEMENT_STEPS.SERVER_LIST,
+    [navigationStack],
+  );
+
+  // Navigation handlers
+  const handleNavigateToStep = useCallback((step: string) => {
+    setNavigationStack((prev) => [...prev, step]);
+  }, []);
+
+  const handleNavigateBack = useCallback(() => {
+    setNavigationStack((prev) => {
+      if (prev.length <= 1) return prev;
+      return prev.slice(0, -1);
+    });
+  }, []);
+
+  // Select server
+  const handleSelectServer = useCallback(
+    (index: number) => {
+      setSelectedServerIndex(index);
+      handleNavigateToStep(MCP_MANAGEMENT_STEPS.SERVER_DETAIL);
+    },
+    [handleNavigateToStep],
+  );
+
+  // Get server tool list
+  const getServerTools = useCallback((): MCPToolDisplayInfo[] => {
+    if (!config || !selectedServer) return [];
+
+    const toolRegistry = config.getToolRegistry();
+    if (!toolRegistry) return [];
+
+    const allTools: AnyDeclarativeTool[] = toolRegistry.getAllTools();
+    const mcpTools: DiscoveredMCPTool[] = [];
+    for (const tool of allTools) {
+      if (
+        tool instanceof DiscoveredMCPTool &&
+        tool.serverName === selectedServer.name
+      ) {
+        mcpTools.push(tool);
+      }
+    }
+    return mcpTools.map((tool) => {
+      // Check if tool is valid (has both name and description required by LLM)
+      const isValid = isToolValid(tool.name, tool.description);
+
+      let invalidReason: string | undefined;
+      if (!isValid) {
+        const reasons = getToolInvalidReasons(tool.name, tool.description);
+        invalidReason = reasons.map((r) => t(r)).join(', ');
+      }
+
+      return {
+        name: tool.name || t('(unnamed)'),
+        description: tool.description,
+        serverName: tool.serverName,
+        schema: tool.parameterSchema as object | undefined,
+        annotations: tool.annotations,
+        isValid,
+        invalidReason,
+      };
+    });
+  }, [config, selectedServer]);
+
+  // View tool list
+  const handleViewTools = useCallback(() => {
+    handleNavigateToStep(MCP_MANAGEMENT_STEPS.TOOL_LIST);
+  }, [handleNavigateToStep]);
+
+  // Authenticate
+  const handleAuthenticate = useCallback(() => {
+    handleNavigateToStep(MCP_MANAGEMENT_STEPS.AUTHENTICATE);
+  }, [handleNavigateToStep]);
+
+  // Select tool
+  const handleSelectTool = useCallback(
+    (tool: MCPToolDisplayInfo) => {
+      setSelectedTool(tool);
+      handleNavigateToStep(MCP_MANAGEMENT_STEPS.TOOL_DETAIL);
+    },
+    [handleNavigateToStep],
+  );
+
+  // Reload server data - uses the extracted fetchServerData function
+  const reloadServers = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const serverInfos = await fetchServerData();
+      setServers(serverInfos);
+    } catch (error) {
+      debugLogger.error('Error reloading MCP servers:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [fetchServerData]);
+
+  // Reconnect server
+  const handleReconnect = useCallback(async () => {
+    if (!config || !selectedServer) return;
+
+    try {
+      setIsLoading(true);
+      const toolRegistry = config.getToolRegistry();
+      if (toolRegistry) {
+        await toolRegistry.discoverToolsForServer(selectedServer.name);
+      }
+      // Reload server data to update status
+      await reloadServers();
+    } catch (error) {
+      debugLogger.error(
+        `Error reconnecting to server '${selectedServer.name}':`,
+        error,
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }, [config, selectedServer, reloadServers]);
+
+  // Enable server
+  const handleEnableServer = useCallback(async () => {
+    if (!config || !selectedServer) return;
+
+    try {
+      setIsLoading(true);
+
+      const server = selectedServer;
+      const settings = loadSettings();
+
+      // Remove from user and workspace exclusion lists
+      for (const scope of [SettingScope.User, SettingScope.Workspace]) {
+        const scopeSettings = settings.forScope(scope).settings;
+        const currentExcluded = scopeSettings.mcp?.excluded || [];
+
+        if (currentExcluded.includes(server.name)) {
+          const newExcluded = currentExcluded.filter(
+            (name: string) => name !== server.name,
+          );
+          settings.setValue(scope, 'mcp.excluded', newExcluded);
+        }
+      }
+
+      // Update runtime config exclusion list
+      const currentExcluded = config.getExcludedMcpServers() || [];
+      const newExcluded = currentExcluded.filter(
+        (name: string) => name !== server.name,
+      );
+      config.setExcludedMcpServers(newExcluded);
+
+      // Rediscover tools for this server
+      const toolRegistry = config.getToolRegistry();
+      if (toolRegistry) {
+        await toolRegistry.discoverToolsForServer(server.name);
+      }
+
+      // Reload server data
+      await reloadServers();
+    } catch (error) {
+      debugLogger.error(
+        `Error enabling server '${selectedServer.name}':`,
+        error,
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }, [config, selectedServer, reloadServers]);
+
+  // Handle disable/enable action
+  const handleDisable = useCallback(async () => {
+    if (!selectedServer) return;
+
+    // If server is already disabled, enable it directly
+    if (selectedServer.isDisabled) {
+      void handleEnableServer();
+    } else {
+      // Automatically determine the scope and disable without showing selection dialog
+      try {
+        setIsLoading(true);
+
+        const server = selectedServer;
+        const settings = loadSettings();
+
+        // Determine the scope based on server configuration location
+        let targetScope: 'user' | 'workspace' = 'user';
+        if (server.source === 'extension') {
+          // Extension servers should not be disabled through user/workspace settings
+          // Show error message and return
+          debugLogger.warn(
+            `Cannot disable extension MCP server '${server.name}'`,
+          );
+          setIsLoading(false);
+          return;
+        } else if (server.source === 'project') {
+          targetScope = 'workspace';
+        }
+
+        // Get current exclusion list for the target scope
+        const scopeSettings = settings.forScope(
+          targetScope === 'user' ? SettingScope.User : SettingScope.Workspace,
+        ).settings;
+        const currentExcluded = scopeSettings.mcp?.excluded || [];
+
+        // If server is not in exclusion list, add it
+        if (!currentExcluded.includes(server.name)) {
+          const newExcluded = [...currentExcluded, server.name];
+          settings.setValue(
+            targetScope === 'user' ? SettingScope.User : SettingScope.Workspace,
+            'mcp.excluded',
+            newExcluded,
+          );
+        }
+
+        // Use new disableMcpServer method to disable server
+        const toolRegistry = config.getToolRegistry();
+        if (toolRegistry) {
+          await toolRegistry.disableMcpServer(server.name);
+        }
+
+        // Reload server list
+        await reloadServers();
+      } catch (error) {
+        debugLogger.error(
+          `Error disabling server '${selectedServer.name}':`,
+          error,
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  }, [selectedServer, handleEnableServer, config, reloadServers]);
+
+  // Execute disable after selecting scope
+  const handleSelectDisableScope = useCallback(
+    async (scope: 'user' | 'workspace') => {
+      if (!config || !selectedServer) return;
+
+      try {
+        setIsLoading(true);
+
+        const server = selectedServer;
+        const settings = loadSettings();
+
+        // Get current exclusion list
+        const scopeSettings = settings.forScope(
+          scope === 'user' ? SettingScope.User : SettingScope.Workspace,
+        ).settings;
+        const currentExcluded = scopeSettings.mcp?.excluded || [];
+
+        // If server is not in exclusion list, add it
+        if (!currentExcluded.includes(server.name)) {
+          const newExcluded = [...currentExcluded, server.name];
+          settings.setValue(
+            scope === 'user' ? SettingScope.User : SettingScope.Workspace,
+            'mcp.excluded',
+            newExcluded,
+          );
+        }
+
+        // Use new disableMcpServer method to disable server
+        const toolRegistry = config.getToolRegistry();
+        if (toolRegistry) {
+          await toolRegistry.disableMcpServer(server.name);
+        }
+
+        // Reload server list
+        await reloadServers();
+
+        // Return to server detail page
+        handleNavigateBack();
+      } catch (error) {
+        debugLogger.error(
+          `Error disabling server '${selectedServer.name}':`,
+          error,
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [config, selectedServer, handleNavigateBack, reloadServers],
+  );
+
+  // Render step header
+  const renderStepHeader = useCallback(() => {
+    const currentStep = getCurrentStep();
+    let headerText = (
+      <Box flexDirection="column">
+        <Text color={theme.text.accent} bold>
+          {t('Manage MCP servers')}
+        </Text>
+        <Text color={theme.text.secondary}>
+          {servers.length} {servers.length === 1 ? t('server') : t('servers')}
+        </Text>
+      </Box>
+    );
+
+    switch (currentStep) {
+      case MCP_MANAGEMENT_STEPS.SERVER_DETAIL:
+        headerText = (
+          <Box>
+            <Text color={theme.text.accent} bold>
+              {selectedServer?.name || t('Server Detail')}
+            </Text>
+          </Box>
+        );
+        break;
+      case MCP_MANAGEMENT_STEPS.TOOL_LIST:
+        headerText = (
+          <Box flexDirection="column">
+            <Text color={theme.text.accent} bold>
+              {t('Tools for {{serverName}}', {
+                serverName: selectedServer?.name || 'Server',
+              })}
+            </Text>
+            <Text color={theme.text.secondary}>
+              ({getServerTools().length}{' '}
+              {getServerTools().length === 1 ? t('tool') : t('tools')})
+            </Text>
+          </Box>
+        );
+        break;
+      case MCP_MANAGEMENT_STEPS.TOOL_DETAIL:
+        headerText = (
+          <Box flexDirection="column">
+            <Box>
+              <Text color={theme.text.accent} bold>
+                {selectedTool?.name || t('Tool Detail')}
+              </Text>
+              {selectedTool?.annotations?.destructiveHint && (
+                <Text color={theme.status.error}>{'[destructive]'}</Text>
+              )}
+              {selectedTool?.annotations?.idempotentHint && (
+                <Text color={theme.status.warning}>{'[idempotent]'}</Text>
+              )}
+              {selectedTool?.annotations?.readOnlyHint && (
+                <Text color={theme.status.success}>{'[read-only]'}</Text>
+              )}
+              {selectedTool?.annotations?.openWorldHint && (
+                <Text color={theme.text.primary}>{'[open-world]'}</Text>
+              )}
+            </Box>
+            <Text color={theme.text.secondary}>
+              {selectedTool?.serverName || t('Server')}
+            </Text>
+          </Box>
+        );
+        break;
+      case MCP_MANAGEMENT_STEPS.AUTHENTICATE:
+        headerText = (
+          <Box>
+            <Text color={theme.text.accent} bold>
+              {t('OAuth Authentication')}
+            </Text>
+          </Box>
+        );
+        break;
+      case MCP_MANAGEMENT_STEPS.SERVER_LIST:
+      default:
+        break;
+    }
+
+    return headerText;
+  }, [getCurrentStep, selectedServer, selectedTool, getServerTools, servers]);
+
+  // Render step content
+  const renderStepContent = useCallback(() => {
+    if (isLoading) {
+      return <Text color={theme.text.secondary}>{t('Loading...')}</Text>;
+    }
+
+    const currentStep = getCurrentStep();
+
+    switch (currentStep) {
+      case MCP_MANAGEMENT_STEPS.SERVER_LIST:
+        return (
+          <ServerListStep servers={servers} onSelect={handleSelectServer} />
+        );
+
+      case MCP_MANAGEMENT_STEPS.SERVER_DETAIL:
+        return (
+          <ServerDetailStep
+            server={selectedServer}
+            onViewTools={handleViewTools}
+            onReconnect={handleReconnect}
+            onDisable={handleDisable}
+            onAuthenticate={handleAuthenticate}
+            onBack={handleNavigateBack}
+          />
+        );
+
+      case MCP_MANAGEMENT_STEPS.DISABLE_SCOPE_SELECT:
+        return (
+          <DisableScopeSelectStep
+            server={selectedServer}
+            onSelectScope={handleSelectDisableScope}
+            onBack={handleNavigateBack}
+          />
+        );
+
+      case MCP_MANAGEMENT_STEPS.TOOL_LIST:
+        return (
+          <ToolListStep
+            tools={getServerTools()}
+            serverName={selectedServer?.name || ''}
+            onSelect={handleSelectTool}
+            onBack={handleNavigateBack}
+          />
+        );
+
+      case MCP_MANAGEMENT_STEPS.TOOL_DETAIL:
+        return (
+          <ToolDetailStep tool={selectedTool} onBack={handleNavigateBack} />
+        );
+
+      case MCP_MANAGEMENT_STEPS.AUTHENTICATE:
+        return (
+          <AuthenticateStep
+            server={selectedServer}
+            onSuccess={() => {
+              void reloadServers();
+            }}
+            onBack={handleNavigateBack}
+          />
+        );
+
+      default:
+        return (
+          <Box>
+            <Text color={theme.status.error}>{t('Unknown step')}</Text>
+          </Box>
+        );
+    }
+  }, [
+    isLoading,
+    getCurrentStep,
+    servers,
+    selectedServer,
+    selectedTool,
+    handleSelectServer,
+    handleViewTools,
+    handleReconnect,
+    handleDisable,
+    handleAuthenticate,
+    handleNavigateBack,
+    handleSelectTool,
+    handleSelectDisableScope,
+    getServerTools,
+    reloadServers,
+  ]);
+
+  // Render step footer
+  const renderStepFooter = useCallback(() => {
+    const currentStep = getCurrentStep();
+    let footerText = '';
+
+    switch (currentStep) {
+      case MCP_MANAGEMENT_STEPS.SERVER_LIST:
+        if (servers.length === 0) {
+          footerText = t('Esc to close');
+        } else {
+          footerText = t('↑↓ to navigate · Enter to select · Esc to close');
+        }
+        break;
+      case MCP_MANAGEMENT_STEPS.SERVER_DETAIL:
+        footerText = t('↑↓ to navigate · Enter to select · Esc to back');
+        break;
+      case MCP_MANAGEMENT_STEPS.DISABLE_SCOPE_SELECT:
+        footerText = t('↑↓ to navigate · Enter to confirm · Esc to back');
+        break;
+      case MCP_MANAGEMENT_STEPS.TOOL_LIST:
+        footerText = t('↑↓ to navigate · Enter to select · Esc to back');
+        break;
+      case MCP_MANAGEMENT_STEPS.TOOL_DETAIL:
+        footerText = t('Esc to back');
+        break;
+      case MCP_MANAGEMENT_STEPS.AUTHENTICATE:
+        footerText = t('Esc to go back');
+        break;
+      default:
+        footerText = t('Esc to close');
+    }
+
+    return (
+      <Box>
+        <Text color={theme.text.secondary}>{footerText}</Text>
+      </Box>
+    );
+  }, [getCurrentStep, servers.length]);
+
+  // ESC key handler - only close dialog, child components handle back navigation to avoid duplicate triggers
+  useKeypress(
+    (key) => {
+      if (
+        key.name === 'escape' &&
+        getCurrentStep() === MCP_MANAGEMENT_STEPS.SERVER_LIST
+      ) {
+        onClose();
+      }
+    },
+    { isActive: true },
+  );
+
+  return (
+    <Box flexDirection="column" width={boxWidth}>
+      <Box
+        borderStyle="single"
+        borderColor={theme.border.default}
+        flexDirection="column"
+        width={boxWidth}
+        gap={1}
+        paddingLeft={1}
+        paddingRight={1}
+      >
+        {renderStepHeader()}
+        {renderStepContent()}
+        {renderStepFooter()}
+      </Box>
+    </Box>
+  );
+};

packages/cli/src/ui/components/mcp/constants.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * MCP管理相关常量
+ */
+
+/**
+ * 最大显示工具数量
+ */
+export const MAX_DISPLAY_TOOLS = 10;
+
+/**
+ * 最大显示prompt数量
+ */
+export const MAX_DISPLAY_PROMPTS = 10;
+
+/**
+ * 日志列表可视区域最大显示数量
+ */
+export const VISIBLE_LOGS_COUNT = 15;
+
+/**
+ * 工具列表可视区域最大显示数量
+ */
+export const VISIBLE_TOOLS_COUNT = 10;
+
+/**
+ * 分组显示名称映射
+ */
+export const SOURCE_DISPLAY_NAMES: Record<string, string> = {
+  user: 'User MCPs',
+  project: 'Project MCPs',
+  extension: 'Extension MCPs',
+};
+
+/**
+ * 状态显示文本
+ */
+export const STATUS_TEXT: Record<string, string> = {
+  connected: 'connected',
+  connecting: 'connecting',
+  disconnected: 'failed',
+};

packages/cli/src/ui/components/mcp/index.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Main Dialog
+export { MCPManagementDialog } from './MCPManagementDialog.js';
+
+// Steps
+export { ServerListStep } from './steps/ServerListStep.js';
+export { ServerDetailStep } from './steps/ServerDetailStep.js';
+export { ToolListStep } from './steps/ToolListStep.js';
+export { ToolDetailStep } from './steps/ToolDetailStep.js';
+
+// Types
+export type {
+  MCPManagementDialogProps,
+  MCPServerDisplayInfo,
+  MCPToolDisplayInfo,
+  MCPPromptDisplayInfo,
+  ServerListStepProps,
+  ServerDetailStepProps,
+  ToolListStepProps,
+  ToolDetailStepProps,
+  MCPManagementStep,
+} from './types.js';
+
+// Constants
+export { MCP_MANAGEMENT_STEPS } from './types.js';

packages/cli/src/ui/components/mcp/steps/AuthenticateStep.tsx

@@ -0,0 +1,164 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../../../semantic-colors.js';
+import { useKeypress } from '../../../hooks/useKeypress.js';
+import { t } from '../../../../i18n/index.js';
+import type { AuthenticateStepProps } from '../types.js';
+import { useConfig } from '../../../contexts/ConfigContext.js';
+import {
+  MCPOAuthProvider,
+  MCPOAuthTokenStorage,
+  getErrorMessage,
+} from '@qwen-code/qwen-code-core';
+import { appEvents, AppEvent } from '../../../../utils/events.js';
+
+type AuthState = 'idle' | 'authenticating' | 'success' | 'error';
+
+export const AuthenticateStep: React.FC<AuthenticateStepProps> = ({
+  server,
+  onSuccess,
+  onBack,
+}) => {
+  const config = useConfig();
+  const [authState, setAuthState] = useState<AuthState>('idle');
+  const [messages, setMessages] = useState<string[]>([]);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const isRunning = useRef(false);
+
+  const runAuthentication = useCallback(async () => {
+    if (!server || !config || isRunning.current) return;
+    isRunning.current = true;
+
+    setAuthState('authenticating');
+    setMessages([]);
+    setErrorMessage(null);
+
+    // Listen for OAuth display messages (same as mcpCommand.ts)
+    const displayListener = (message: string) => {
+      setMessages((prev) => [...prev, message]);
+    };
+    appEvents.on(AppEvent.OauthDisplayMessage, displayListener);
+
+    try {
+      setMessages([
+        t("Starting OAuth authentication for MCP server '{{name}}'...", {
+          name: server.name,
+        }),
+      ]);
+
+      let oauthConfig = server.config.oauth;
+      if (!oauthConfig) {
+        oauthConfig = { enabled: false };
+      }
+
+      const mcpServerUrl = server.config.httpUrl || server.config.url;
+      const authProvider = new MCPOAuthProvider(new MCPOAuthTokenStorage());
+      await authProvider.authenticate(
+        server.name,
+        oauthConfig,
+        mcpServerUrl,
+        appEvents,
+      );
+
+      setMessages((prev) => [
+        ...prev,
+        t("Successfully authenticated and refreshed tools for '{{name}}'.", {
+          name: server.name,
+        }),
+      ]);
+
+      // Trigger tool re-discovery to pick up authenticated server
+      const toolRegistry = config.getToolRegistry();
+      if (toolRegistry) {
+        setMessages((prev) => [
+          ...prev,
+          t("Re-discovering tools from '{{name}}'...", {
+            name: server.name,
+          }),
+        ]);
+        await toolRegistry.discoverToolsForServer(server.name);
+      }
+
+      // Update the client with the new tools
+      const geminiClient = config.getGeminiClient();
+      if (geminiClient) {
+        await geminiClient.setTools();
+      }
+
+      setAuthState('success');
+      onSuccess?.();
+    } catch (error) {
+      setErrorMessage(getErrorMessage(error));
+      setAuthState('error');
+    } finally {
+      isRunning.current = false;
+      appEvents.removeListener(AppEvent.OauthDisplayMessage, displayListener);
+    }
+  }, [server, config, onSuccess]);
+
+  useEffect(() => {
+    runAuthentication();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useKeypress(
+    (key) => {
+      if (key.name === 'escape') {
+        onBack();
+      }
+    },
+    { isActive: true },
+  );
+
+  if (!server) {
+    return (
+      <Box>
+        <Text color={theme.status.error}>{t('No server selected')}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      {/* Server info */}
+      <Box>
+        <Text color={theme.text.secondary}>
+          {t('Server:')} {server.name}
+        </Text>
+      </Box>
+
+      {/* Progress messages */}
+      {messages.length > 0 && (
+        <Box flexDirection="column">
+          {messages.map((msg, i) => (
+            <Text key={i} color={theme.text.secondary}>
+              {msg}
+            </Text>
+          ))}
+        </Box>
+      )}
+
+      {/* Error message */}
+      {authState === 'error' && errorMessage && (
+        <Box>
+          <Text color={theme.status.error}>{errorMessage}</Text>
+        </Box>
+      )}
+
+      {/* Action hints */}
+      <Box>
+        {authState === 'authenticating' && (
+          <Text color={theme.text.secondary}>
+            {t('Authenticating... Please complete the login in your browser.')}
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+};

packages/cli/src/ui/components/mcp/steps/DisableScopeSelectStep.tsx

@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState } from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../../../semantic-colors.js';
+import { useKeypress } from '../../../hooks/useKeypress.js';
+import { RadioButtonSelect } from '../../shared/RadioButtonSelect.js';
+import { t } from '../../../../i18n/index.js';
+import type { DisableScopeSelectStepProps } from '../types.js';
+
+export const DisableScopeSelectStep: React.FC<DisableScopeSelectStepProps> = ({
+  server,
+  onSelectScope,
+  onBack,
+}) => {
+  const [selectedScope, setSelectedScope] = useState<'user' | 'workspace'>(
+    'user',
+  );
+
+  const scopes = [
+    {
+      key: 'user',
+      get label() {
+        return t('User Settings (global)');
+      },
+      value: 'user' as const,
+    },
+    {
+      key: 'workspace',
+      get label() {
+        return t('Workspace Settings (project-specific)');
+      },
+      value: 'workspace' as const,
+    },
+  ];
+
+  useKeypress(
+    (key) => {
+      if (key.name === 'escape') {
+        onBack();
+      } else if (key.name === 'return') {
+        onSelectScope(selectedScope);
+      }
+    },
+    { isActive: true },
+  );
+
+  if (!server) {
+    return (
+      <Box>
+        <Text color={theme.status.error}>{t('No server selected')}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Box flexDirection="column">
+        <Text color={theme.text.primary}>
+          {t('Disable server:')} {server.name}
+        </Text>
+        <Box marginTop={1}>
+          <Text color={theme.text.secondary}>
+            {t('Select where to add the server to the exclude list:')}
+          </Text>
+        </Box>
+      </Box>
+
+      <Box marginTop={1}>
+        <RadioButtonSelect<'user' | 'workspace'>
+          items={scopes}
+          onHighlight={(value: 'user' | 'workspace') => setSelectedScope(value)}
+          onSelect={(value: 'user' | 'workspace') => onSelectScope(value)}
+        />
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={theme.text.secondary}>
+          {t('Press Enter to confirm, Esc to cancel')}
+        </Text>
+      </Box>
+    </Box>
+  );
+};

packages/cli/src/ui/components/mcp/steps/ServerDetailStep.tsx

@@ -0,0 +1,233 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../../../semantic-colors.js';
+import { useKeypress } from '../../../hooks/useKeypress.js';
+import { RadioButtonSelect } from '../../shared/RadioButtonSelect.js';
+import { t } from '../../../../i18n/index.js';
+import type { ServerDetailStepProps } from '../types.js';
+import {
+  getStatusColor,
+  getStatusIcon,
+  formatServerCommand,
+} from '../utils.js';
+
+// 标签列宽度
+const LABEL_WIDTH = 15;
+
+type ServerAction =
+  | 'view-tools'
+  | 'reconnect'
+  | 'toggle-disable'
+  | 'authenticate';
+
+export const ServerDetailStep: React.FC<ServerDetailStepProps> = ({
+  server,
+  onViewTools,
+  onReconnect,
+  onDisable,
+  onAuthenticate,
+  onBack,
+}) => {
+  const statusColor = server
+    ? server.isDisabled
+      ? 'yellow'
+      : getStatusColor(server.status)
+    : 'gray';
+
+  // 根据服务器状态动态生成可用操作
+  const actions = useMemo(() => {
+    const result: Array<{
+      key: string;
+      label: string;
+      value: ServerAction;
+    }> = [];
+
+    if (!server) {
+      return result;
+    }
+
+    // 只在服务器未禁用且有工具时显示"查看工具"选项
+    if (!server.isDisabled && (server.toolCount ?? 0) > 0) {
+      result.push({
+        key: 'view-tools',
+        label: t('View tools'),
+        value: 'view-tools',
+      });
+    }
+
+    // 只在服务器未禁用且已断开连接时显示"重新连接"选项
+    if (!server.isDisabled && server.status === 'disconnected') {
+      result.push({
+        key: 'reconnect',
+        label: t('Reconnect'),
+        value: 'reconnect',
+      });
+    }
+
+    // 始终显示启用/禁用选项
+    result.push({
+      key: 'toggle-disable',
+      label: server?.isDisabled ? t('Enable') : t('Disable'),
+      value: 'toggle-disable',
+    });
+
+    // 待补充准确的认证判断方案，暂时全部开放
+    if (!server.isDisabled) {
+      result.push({
+        key: 'authenticate',
+        label: t('Authenticate'),
+        value: 'authenticate',
+      });
+    }
+
+    return result;
+  }, [server]);
+
+  useKeypress(
+    (key) => {
+      if (key.name === 'escape') {
+        onBack();
+      }
+    },
+    { isActive: true },
+  );
+
+  if (!server) {
+    return (
+      <Box>
+        <Text color={theme.status.error}>{t('No server selected')}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      {/* 服务器详情 */}
+      <Box flexDirection="column">
+        <Box>
+          <Box width={LABEL_WIDTH}>
+            <Text color={theme.text.primary}>{t('Status:')}</Text>
+          </Box>
+          <Box>
+            <Text
+              color={
+                statusColor === 'green'
+                  ? theme.status.success
+                  : statusColor === 'yellow'
+                    ? theme.status.warning
+                    : theme.status.error
+              }
+            >
+              {getStatusIcon(server.status)}{' '}
+              {server.isDisabled ? t('disabled') : t(server.status)}
+            </Text>
+          </Box>
+        </Box>
+
+        <Box>
+          <Box width={LABEL_WIDTH}>
+            <Text color={theme.text.primary}>{t('Source:')}</Text>
+          </Box>
+          <Box>
+            <Text color={theme.text.primary}>
+              {server.source === 'user'
+                ? t('User Settings')
+                : server.source === 'project'
+                  ? t('Workspace Settings')
+                  : t('Extension')}
+            </Text>
+          </Box>
+        </Box>
+
+        <Box>
+          <Box width={LABEL_WIDTH}>
+            <Text color={theme.text.primary}>{t('Command:')}</Text>
+          </Box>
+          <Box>
+            <Text wrap="truncate">{formatServerCommand(server)}</Text>
+          </Box>
+        </Box>
+
+        {server.config.cwd && (
+          <Box>
+            <Box width={LABEL_WIDTH}>
+              <Text color={theme.text.primary}>{t('Working Directory:')}</Text>
+            </Box>
+            <Box>
+              <Text wrap="truncate">{server.config.cwd}</Text>
+            </Box>
+          </Box>
+        )}
+
+        {!server.isDisabled && (
+          <Box>
+            <Box width={LABEL_WIDTH}>
+              <Text color={theme.text.primary}>{t('Tools:')}</Text>
+            </Box>
+            <Box>
+              <Text>
+                {server.toolCount}{' '}
+                {server.toolCount === 1 ? t('tool') : t('tools')}
+                {!!server.invalidToolCount && server.invalidToolCount > 0 && (
+                  <Text color={theme.status.warning}>
+                    {' '}
+                    ({server.invalidToolCount}{' '}
+                    {server.invalidToolCount === 1
+                      ? t('invalid')
+                      : t('invalid')}
+                    )
+                  </Text>
+                )}
+              </Text>
+            </Box>
+          </Box>
+        )}
+
+        {server.errorMessage && (
+          <Box>
+            <Box width={LABEL_WIDTH}>
+              <Text color={theme.status.error}>{t('Error:')}</Text>
+            </Box>
+            <Box>
+              <Text color={theme.status.error} wrap="wrap">
+                {server.errorMessage}
+              </Text>
+            </Box>
+          </Box>
+        )}
+      </Box>
+
+      {/* 操作列表 */}
+      <Box>
+        <RadioButtonSelect<ServerAction>
+          items={actions}
+          showNumbers={false}
+          onSelect={(value: ServerAction) => {
+            switch (value) {
+              case 'view-tools':
+                onViewTools();
+                break;
+              case 'reconnect':
+                onReconnect?.();
+                break;
+              case 'toggle-disable':
+                onDisable?.();
+                break;
+              case 'authenticate':
+                onAuthenticate?.();
+                break;
+              default:
+                break;
+            }
+          }}
+        />
+      </Box>
+    </Box>
+  );
+};

packages/cli/src/ui/components/mcp/steps/ServerListStep.tsx

@@ -0,0 +1,176 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../../../semantic-colors.js';
+import { useKeypress } from '../../../hooks/useKeypress.js';
+import { t } from '../../../../i18n/index.js';
+import type { ServerListStepProps, MCPServerDisplayInfo } from '../types.js';
+import {
+  groupServersBySource,
+  getStatusIcon,
+  getStatusColor,
+} from '../utils.js';
+
+export const ServerListStep: React.FC<ServerListStepProps> = ({
+  servers,
+  onSelect,
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const groupedServers = useMemo(
+    () => groupServersBySource(servers),
+    [servers],
+  );
+
+  const serverNameWidth = useMemo(() => {
+    if (servers.length === 0) return 20;
+    const maxLength = Math.max(...servers.map((s) => s.name.length));
+    // 最小 20，最大 35，留一些余量
+    return Math.min(Math.max(maxLength + 2, 20), 35);
+  }, [servers]);
+
+  const flatServers = useMemo(() => {
+    const result: MCPServerDisplayInfo[] = [];
+    for (const group of groupedServers) {
+      result.push(...group.servers);
+    }
+    return result;
+  }, [groupedServers]);
+
+  useKeypress(
+    (key) => {
+      if (key.name === 'up') {
+        setSelectedIndex((prev) => Math.max(0, prev - 1));
+      } else if (key.name === 'down') {
+        setSelectedIndex((prev) => Math.min(flatServers.length - 1, prev + 1));
+      } else if (key.name === 'return') {
+        onSelect(selectedIndex);
+      }
+    },
+    { isActive: true },
+  );
+
+  if (servers.length === 0) {
+    return (
+      <Box flexDirection="column">
+        <Text color={theme.text.secondary}>
+          {t('No MCP servers configured.')}
+        </Text>
+        <Text color={theme.text.secondary}>
+          {t('Add MCP servers to your settings to get started.')}
+        </Text>
+      </Box>
+    );
+  }
+
+  const getSelectionPosition = (globalIndex: number) => {
+    let currentIndex = 0;
+    for (const group of groupedServers) {
+      if (globalIndex < currentIndex + group.servers.length) {
+        return {
+          groupIndex: groupedServers.indexOf(group),
+          itemIndex: globalIndex - currentIndex,
+        };
+      }
+      currentIndex += group.servers.length;
+    }
+    return { groupIndex: 0, itemIndex: 0 };
+  };
+
+  const currentPosition = getSelectionPosition(selectedIndex);
+
+  return (
+    <Box flexDirection="column">
+      {/* 分组服务器列表 */}
+      {groupedServers.map((group, groupIndex) => (
+        <Box
+          key={group.source}
+          flexDirection="column"
+          marginBottom={groupIndex === groupedServers.length - 1 ? 0 : 1}
+        >
+          <Text bold color={theme.text.primary}>
+            {`  ${group.displayName}`}
+            {group.servers[0]?.configPath && (
+              <Text color={theme.text.secondary}>
+                {' '}
+                ({group.servers[0].configPath})
+              </Text>
+            )}
+          </Text>
+          <Box flexDirection="column">
+            {group.servers.map((server, itemIndex) => {
+              const isSelected =
+                groupIndex === currentPosition.groupIndex &&
+                itemIndex === currentPosition.itemIndex;
+              const statusColor = server.isDisabled
+                ? 'yellow'
+                : getStatusColor(server.status);
+
+              return (
+                <Box key={server.name}>
+                  <Box minWidth={2}>
+                    <Text
+                      color={
+                        isSelected ? theme.text.accent : theme.text.primary
+                      }
+                    >
+                      {isSelected ? '❯' : ' '}
+                    </Text>
+                  </Box>
+                  {/* 服务器名称 - 固定宽度 */}
+                  <Box width={serverNameWidth}>
+                    <Text
+                      color={
+                        isSelected ? theme.text.accent : theme.text.primary
+                      }
+                      wrap="truncate"
+                    >
+                      {server.name}
+                    </Text>
+                  </Box>
+                  <Text color={theme.text.secondary}> · </Text>
+                  {/* 状态图标和文本 */}
+                  <Text
+                    color={
+                      statusColor === 'green'
+                        ? theme.status.success
+                        : statusColor === 'yellow'
+                          ? theme.status.warning
+                          : theme.status.error
+                    }
+                  >
+                    {getStatusIcon(server.status)}{' '}
+                    {server.isDisabled ? t('disabled') : t(server.status)}
+                  </Text>
+                  {/* 显示无效工具警告 */}
+                  {!!server.invalidToolCount && server.invalidToolCount > 0 && (
+                    <Text color={theme.status.warning}>
+                      {' '}
+                      {t('{{count}} invalid tools', {
+                        count: String(server.invalidToolCount),
+                      })}
+                    </Text>
+                  )}
+                </Box>
+              );
+            })}
+          </Box>
+        </Box>
+      ))}
+
+      {/* 提示信息 */}
+      {servers.some((s) => s.status === 'disconnected' && !s.isDisabled) && (
+        <Box marginTop={1}>
+          <Text color={theme.status.warning}>
+            ※ {t('Run qwen --debug to see error logs')}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+};

packages/cli/src/ui/components/mcp/steps/ToolDetailStep.tsx

@@ -0,0 +1,139 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Text } from 'ink';
+import { theme } from '../../../semantic-colors.js';
+import { useKeypress } from '../../../hooks/useKeypress.js';
+import { t } from '../../../../i18n/index.js';
+import type { ToolDetailStepProps } from '../types.js';
+
+/**
+ * 渲染单个参数
+ */
+const renderParameter = (
+  name: string,
+  param: Record<string, unknown>,
+  isRequired: boolean,
+): React.ReactNode => {
+  const type = (param['type'] as string) || 'any';
+  const description = (param['description'] as string) || '';
+  // const defaultValue = param['default'];
+  // const enumValues = param['enum'] as string[] | undefined;
+  const text = `• ${name}${isRequired ? t('required') : ''}: ${type} ${description ? `- ${description}` : ''}`;
+
+  return (
+    <Box key={name}>
+      <Text color={theme.text.secondary} wrap="wrap">
+        {text}
+      </Text>
+    </Box>
+  );
+};
+
+/**
+ * 渲染参数列表
+ */
+const ParametersList: React.FC<{
+  properties: Record<string, unknown>;
+  required: string[];
+}> = ({ properties, required }) => {
+  const requiredSet = new Set(required);
+
+  return (
+    <Box flexDirection="column">
+      <Text color={theme.text.primary} bold>
+        {t('Parameters')}:
+      </Text>
+      <Box flexDirection="column" marginLeft={1}>
+        {Object.entries(properties).map(([name, param]) =>
+          renderParameter(
+            name,
+            param as Record<string, unknown>,
+            requiredSet.has(name),
+          ),
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * 提取并展示schema的关键信息，使用类似示例的格式
+ */
+const SchemaSummary: React.FC<{ schema: object }> = ({ schema }) => {
+  const obj = schema as Record<string, unknown>;
+  const properties = obj['properties'] as Record<string, unknown> | undefined;
+  const required = (obj['required'] as string[]) || [];
+
+  return (
+    <Box flexDirection="column">
+      {/* 参数列表 */}
+      {properties && Object.keys(properties).length > 0 && (
+        <ParametersList properties={properties} required={required} />
+      )}
+    </Box>
+  );
+};
+
+export const ToolDetailStep: React.FC<ToolDetailStepProps> = ({
+  tool,
+  onBack,
+}) => {
+  useKeypress(
+    (key) => {
+      if (key.name === 'escape') {
+        onBack();
+      }
+    },
+    { isActive: true },
+  );
+
+  if (!tool) {
+    return (
+      <Box>
+        <Text color={theme.status.error}>{t('No tool selected')}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      {/* 无效工具警告 */}
+      {!tool.isValid && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text color={theme.status.error} bold>
+            {t('Warning: This tool cannot be called by the LLM')}
+          </Text>
+          <Text color={theme.status.error}>
+            {t('Reason')}: {tool.invalidReason || t('unknown')}
+          </Text>
+          <Text color={theme.text.secondary}>
+            {t(
+              'Tools must have both name and description to be used by the LLM.',
+            )}
+          </Text>
+        </Box>
+      )}
+
+      {/* 工具描述 */}
+      {tool.description && (
+        <Box flexDirection="column">
+          <Text color={theme.text.primary} bold>
+            {t('Description')}:
+          </Text>
+          <Text wrap="wrap">{tool.description}</Text>
+        </Box>
+      )}
+
+      {/* Schema */}
+      {tool.schema && (
+        <Box flexDirection="column">
+          <SchemaSummary schema={tool.schema} />
+        </Box>
+      )}
+    </Box>
+  );
+};

packages/cli/src/ui/components/mcp/steps/ToolListStep.tsx

@@ -0,0 +1,146 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../../../semantic-colors.js';
+import { useKeypress } from '../../../hooks/useKeypress.js';
+import { t } from '../../../../i18n/index.js';
+import type { ToolListStepProps, MCPToolDisplayInfo } from '../types.js';
+import { VISIBLE_TOOLS_COUNT } from '../constants.js';
+
+export const ToolListStep: React.FC<ToolListStepProps> = ({
+  tools,
+  onSelect,
+  onBack,
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  // 动态计算工具名称列的最大宽度（基于实际内容）
+  const toolNameWidth = useMemo(() => {
+    if (tools.length === 0) return 30;
+    const maxLength = Math.max(...tools.map((t) => t.name.length));
+    // 最小 30，最大 50，留一些余量
+    return Math.min(Math.max(maxLength + 2, 30), 50);
+  }, [tools]);
+
+  // 计算可视区域的起始索引（滚动窗口）
+  const scrollOffset = useMemo(() => {
+    if (tools.length <= VISIBLE_TOOLS_COUNT) {
+      return 0;
+    }
+    // 确保选中项在可视区域内
+    if (selectedIndex < VISIBLE_TOOLS_COUNT - 1) {
+      return 0;
+    }
+    return Math.min(
+      selectedIndex - VISIBLE_TOOLS_COUNT + 1,
+      tools.length - VISIBLE_TOOLS_COUNT,
+    );
+  }, [selectedIndex, tools.length]);
+
+  // 当前可视的工具列表
+  const displayTools = useMemo(
+    () => tools.slice(scrollOffset, scrollOffset + VISIBLE_TOOLS_COUNT),
+    [tools, scrollOffset],
+  );
+
+  useKeypress(
+    (key) => {
+      if (key.name === 'escape') {
+        onBack();
+      } else if (key.name === 'up') {
+        setSelectedIndex((prev) => Math.max(0, prev - 1));
+      } else if (key.name === 'down') {
+        setSelectedIndex((prev) => Math.min(tools.length - 1, prev + 1));
+      } else if (key.name === 'return') {
+        if (tools[selectedIndex]) {
+          onSelect(tools[selectedIndex]);
+        }
+      }
+    },
+    { isActive: true },
+  );
+
+  if (tools.length === 0) {
+    return (
+      <Box flexDirection="column">
+        <Text color={theme.text.secondary}>
+          {t('No tools available for this server.')}
+        </Text>
+      </Box>
+    );
+  }
+
+  const getToolAnnotations = (tool: MCPToolDisplayInfo): string => {
+    const hints: string[] = [];
+    if (tool.annotations?.destructiveHint) hints.push('destructive');
+    if (tool.annotations?.readOnlyHint) hints.push('read-only');
+    if (tool.annotations?.openWorldHint) hints.push('open-world');
+    if (tool.annotations?.idempotentHint) hints.push('idempotent');
+    return hints.join(', ');
+  };
+
+  return (
+    <Box flexDirection="column">
+      {/* 工具列表 */}
+      <Box flexDirection="column">
+        {displayTools.map((tool, index) => {
+          const actualIndex = scrollOffset + index;
+          const isSelected = actualIndex === selectedIndex;
+          const annotations = getToolAnnotations(tool);
+
+          return (
+            <Box key={tool.name}>
+              {/* 选择器 */}
+              <Box minWidth={2}>
+                <Text
+                  color={isSelected ? theme.text.accent : theme.text.primary}
+                >
+                  {isSelected ? '❯' : ' '}
+                </Text>
+              </Box>
+              {/* 工具名称 - 固定宽度 */}
+              <Box width={toolNameWidth}>
+                <Text
+                  color={isSelected ? theme.text.accent : theme.text.primary}
+                  wrap="truncate"
+                >
+                  {tool.name}
+                </Text>
+              </Box>
+              {/* 显示无效工具警告 */}
+              {!tool.isValid && (
+                <Text color={theme.status.warning}>
+                  {t('invalid: {{reason}}', {
+                    reason: tool.invalidReason || t('unknown'),
+                  })}
+                </Text>
+              )}
+              {annotations && tool.isValid && (
+                <Text color={theme.text.secondary}>{annotations}</Text>
+              )}
+            </Box>
+          );
+        })}
+      </Box>
+
+      {/* 滚动提示 */}
+      {tools.length > VISIBLE_TOOLS_COUNT && (
+        <Box marginTop={1}>
+          <Text color={theme.text.secondary}>
+            {scrollOffset > 0 ? '↑ ' : '  '}
+            {t('{{current}}/{{total}}', {
+              current: (selectedIndex + 1).toString(),
+              total: tools.length.toString(),
+            })}
+            {scrollOffset + VISIBLE_TOOLS_COUNT < tools.length ? ' ↓' : ''}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+};

packages/cli/src/ui/components/mcp/types.ts

@@ -0,0 +1,193 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type {
+  MCPServerConfig,
+  MCPServerStatus,
+} from '@qwen-code/qwen-code-core';
+
+/**
+ * MCP管理步骤定义
+ */
+export const MCP_MANAGEMENT_STEPS = {
+  SERVER_LIST: 'server-list',
+  SERVER_DETAIL: 'server-detail',
+  DISABLE_SCOPE_SELECT: 'disable-scope-select',
+  TOOL_LIST: 'tool-list',
+  TOOL_DETAIL: 'tool-detail',
+  AUTHENTICATE: 'authenticate', // OAuth 认证步骤
+} as const;
+
+export type MCPManagementStep =
+  (typeof MCP_MANAGEMENT_STEPS)[keyof typeof MCP_MANAGEMENT_STEPS];
+
+/**
+ * MCP服务器显示信息
+ */
+export interface MCPServerDisplayInfo {
+  /** 服务器名称 */
+  name: string;
+  /** 连接状态 */
+  status: MCPServerStatus;
+  /** 来源类型 */
+  source: 'user' | 'project' | 'extension';
+  /** 配置文件路径 */
+  configPath?: string;
+  /** 服务器配置 */
+  config: MCPServerConfig;
+  /** 工具数量 */
+  toolCount: number;
+  /** 无效工具数量（缺少name或description） */
+  invalidToolCount?: number;
+  /** Prompt数量 */
+  promptCount: number;
+  /** 错误信息 */
+  errorMessage?: string;
+  /** 是否被禁用（在排除列表中） */
+  isDisabled: boolean;
+}
+
+/**
+ * MCP工具显示信息
+ */
+export interface MCPToolDisplayInfo {
+  /** 工具名称 */
+  name: string;
+  /** 工具描述 */
+  description?: string;
+  /** 所属服务器 */
+  serverName: string;
+  /** 工具schema */
+  schema?: object;
+  /** 工具注解 */
+  annotations?: {
+    title?: string;
+    readOnlyHint?: boolean;
+    destructiveHint?: boolean;
+    idempotentHint?: boolean;
+    openWorldHint?: boolean;
+  };
+  /** 工具是否有效（有name和description才能被LLM调用） */
+  isValid: boolean;
+  /** 无效原因（当isValid为false时） */
+  invalidReason?: string;
+}
+
+/**
+ * MCP Prompt显示信息
+ */
+export interface MCPPromptDisplayInfo {
+  /** Prompt名称 */
+  name: string;
+  /** Prompt描述 */
+  description?: string;
+  /** 所属服务器 */
+  serverName: string;
+  /** 参数定义 */
+  arguments?: Array<{
+    name: string;
+    description?: string;
+    required?: boolean;
+  }>;
+}
+
+/**
+ * 分组后的服务器列表
+ */
+export interface GroupedServers {
+  /** 来源标识 */
+  source: string;
+  /** 来源显示名称 */
+  displayName: string;
+  /** 配置文件路径 */
+  configPath?: string;
+  /** 服务器列表 */
+  servers: MCPServerDisplayInfo[];
+}
+
+/**
+ * ServerListStep组件属性
+ */
+export interface ServerListStepProps {
+  /** 服务器列表 */
+  servers: MCPServerDisplayInfo[];
+  /** 选择回调 */
+  onSelect: (index: number) => void;
+}
+
+/**
+ * ServerDetailStep 组件属性
+ */
+export interface ServerDetailStepProps {
+  /** 选中的服务器 */
+  server: MCPServerDisplayInfo | null;
+  /** 查看工具列表回调 */
+  onViewTools: () => void;
+  /** 重新连接回调 */
+  onReconnect?: () => void;
+  /** 禁用服务器回调 */
+  onDisable?: () => void;
+  /** OAuth 认证回调 */
+  onAuthenticate?: () => void;
+  /** 返回回调 */
+  onBack: () => void;
+}
+
+/**
+ * DisableScopeSelectStep组件属性
+ */
+export interface DisableScopeSelectStepProps {
+  /** 选中的服务器 */
+  server: MCPServerDisplayInfo | null;
+  /** 选择 scope 回调 */
+  onSelectScope: (scope: 'user' | 'workspace') => void;
+  /** 返回回调 */
+  onBack: () => void;
+}
+
+/**
+ * ToolListStep组件属性
+ */
+export interface ToolListStepProps {
+  /** 工具列表 */
+  tools: MCPToolDisplayInfo[];
+  /** 服务器名称 */
+  serverName: string;
+  /** 选择回调 */
+  onSelect: (tool: MCPToolDisplayInfo) => void;
+  /** 返回回调 */
+  onBack: () => void;
+}
+
+/**
+ * ToolDetailStep 组件属性
+ */
+export interface ToolDetailStepProps {
+  /** 工具信息 */
+  tool: MCPToolDisplayInfo | null;
+  /** 返回回调 */
+  onBack: () => void;
+}
+
+/**
+ * AuthenticateStep 组件属性
+ */
+export interface AuthenticateStepProps {
+  /** 服务器信息 */
+  server: MCPServerDisplayInfo | null;
+  /** 认证成功回调 */
+  onSuccess?: () => void;
+  /** 返回回调 */
+  onBack: () => void;
+}
+
+/**
+ * MCP管理对话框属性
+ */
+export interface MCPManagementDialogProps {
+  /** 关闭回调 */
+  onClose: () => void;
+}

packages/cli/src/ui/components/mcp/utils.test.ts

@@ -0,0 +1,157 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect } from 'vitest';
+import {
+  groupServersBySource,
+  getStatusColor,
+  getStatusIcon,
+  truncateText,
+  formatServerCommand,
+  isToolValid,
+  getToolInvalidReasons,
+} from './utils.js';
+import type { MCPServerDisplayInfo } from './types.js';
+import { MCPServerStatus } from '@qwen-code/qwen-code-core';
+
+describe('MCP utils', () => {
+  describe('groupServersBySource', () => {
+    it('should group servers by source', () => {
+      const servers: MCPServerDisplayInfo[] = [
+        {
+          name: 'server1',
+          status: MCPServerStatus.CONNECTED,
+          source: 'user',
+          config: { command: 'cmd1' },
+          toolCount: 1,
+          promptCount: 0,
+          isDisabled: false,
+        },
+        {
+          name: 'server2',
+          status: MCPServerStatus.CONNECTED,
+          source: 'extension',
+          config: { command: 'cmd2' },
+          toolCount: 2,
+          promptCount: 0,
+          isDisabled: false,
+        },
+      ];
+
+      const result = groupServersBySource(servers);
+
+      expect(result).toHaveLength(2);
+      expect(result[0].source).toBe('user');
+      expect(result[0].servers).toHaveLength(1);
+      expect(result[1].source).toBe('extension');
+    });
+  });
+
+  describe('getStatusColor', () => {
+    it('should return correct colors for each status', () => {
+      expect(getStatusColor(MCPServerStatus.CONNECTED)).toBe('green');
+      expect(getStatusColor(MCPServerStatus.CONNECTING)).toBe('yellow');
+      expect(getStatusColor(MCPServerStatus.DISCONNECTED)).toBe('red');
+      expect(getStatusColor('unknown' as MCPServerStatus)).toBe('gray');
+    });
+  });
+
+  describe('getStatusIcon', () => {
+    it('should return correct icons for each status', () => {
+      expect(getStatusIcon(MCPServerStatus.CONNECTED)).toBe('✓');
+      expect(getStatusIcon(MCPServerStatus.CONNECTING)).toBe('…');
+      expect(getStatusIcon(MCPServerStatus.DISCONNECTED)).toBe('✗');
+      expect(getStatusIcon('unknown' as MCPServerStatus)).toBe('?');
+    });
+  });
+
+  describe('truncateText', () => {
+    it('should truncate text longer than maxLength', () => {
+      expect(truncateText('hello world', 8)).toBe('hello...');
+    });
+
+    it('should not truncate text shorter than maxLength', () => {
+      expect(truncateText('hello', 10)).toBe('hello');
+    });
+  });
+
+  describe('formatServerCommand', () => {
+    it('should format http URL', () => {
+      const server = {
+        config: { httpUrl: 'http://localhost:3000' },
+      } as MCPServerDisplayInfo;
+      expect(formatServerCommand(server)).toBe('http://localhost:3000 (http)');
+    });
+
+    it('should format stdio command', () => {
+      const server = {
+        config: { command: 'node', args: ['server.js'] },
+      } as MCPServerDisplayInfo;
+      expect(formatServerCommand(server)).toBe('node server.js (stdio)');
+    });
+
+    it('should return Unknown for empty config', () => {
+      const server = { config: {} } as MCPServerDisplayInfo;
+      expect(formatServerCommand(server)).toBe('Unknown');
+    });
+  });
+
+  describe('isToolValid', () => {
+    it('should return true for valid tool with name and description', () => {
+      expect(isToolValid('toolName', 'A description')).toBe(true);
+    });
+
+    it('should return false for tool without name', () => {
+      expect(isToolValid(undefined, 'A description')).toBe(false);
+      expect(isToolValid('', 'A description')).toBe(false);
+    });
+
+    it('should return false for tool without description', () => {
+      expect(isToolValid('toolName', undefined)).toBe(false);
+      expect(isToolValid('toolName', '')).toBe(false);
+    });
+
+    it('should return false for tool without both name and description', () => {
+      expect(isToolValid(undefined, undefined)).toBe(false);
+      expect(isToolValid('', '')).toBe(false);
+    });
+  });
+
+  describe('getToolInvalidReasons', () => {
+    it('should return empty array for valid tool', () => {
+      expect(getToolInvalidReasons('toolName', 'A description')).toEqual([]);
+    });
+
+    it('should return missing name reason', () => {
+      expect(getToolInvalidReasons(undefined, 'A description')).toEqual([
+        'missing name',
+      ]);
+      expect(getToolInvalidReasons('', 'A description')).toEqual([
+        'missing name',
+      ]);
+    });
+
+    it('should return missing description reason', () => {
+      expect(getToolInvalidReasons('toolName', undefined)).toEqual([
+        'missing description',
+      ]);
+      expect(getToolInvalidReasons('toolName', '')).toEqual([
+        'missing description',
+      ]);
+    });
+
+    it('should return both reasons when both are missing', () => {
+      expect(getToolInvalidReasons(undefined, undefined)).toEqual([
+        'missing name',
+        'missing description',
+      ]);
+      expect(getToolInvalidReasons('', '')).toEqual([
+        'missing name',
+        'missing description',
+      ]);
+    });
+  });
+});

packages/cli/src/ui/components/mcp/utils.ts

@@ -0,0 +1,129 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { MCPServerDisplayInfo, GroupedServers } from './types.js';
+import { SOURCE_DISPLAY_NAMES } from './constants.js';
+
+/**
+ * 按来源分组服务器
+ */
+export function groupServersBySource(
+  servers: MCPServerDisplayInfo[],
+): GroupedServers[] {
+  const groups = new Map<string, MCPServerDisplayInfo[]>();
+
+  for (const server of servers) {
+    const existing = groups.get(server.source);
+    if (existing) {
+      existing.push(server);
+    } else {
+      groups.set(server.source, [server]);
+    }
+  }
+
+  // 按优先级排序: user > project > extension
+  const sourceOrder = ['user', 'project', 'extension'];
+  const result: GroupedServers[] = [];
+
+  for (const source of sourceOrder) {
+    const servers = groups.get(source);
+    if (servers && servers.length > 0) {
+      result.push({
+        source,
+        displayName: SOURCE_DISPLAY_NAMES[source] || source,
+        servers,
+      });
+    }
+  }
+
+  return result;
+}
+
+/**
+ * 获取状态颜色
+ */
+export function getStatusColor(
+  status: string,
+): 'green' | 'yellow' | 'red' | 'gray' {
+  switch (status) {
+    case 'connected':
+      return 'green';
+    case 'connecting':
+      return 'yellow';
+    case 'disconnected':
+      return 'red';
+    default:
+      return 'gray';
+  }
+}
+
+/**
+ * 获取状态图标
+ */
+export function getStatusIcon(status: string): string {
+  switch (status) {
+    case 'connected':
+      return '✓';
+    case 'connecting':
+      return '…';
+    case 'disconnected':
+      return '✗';
+    default:
+      return '?';
+  }
+}
+
+/**
+ * 截断文本
+ */
+export function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.substring(0, maxLength - 3) + '...';
+}
+
+/**
+ * 格式化服务器命令显示
+ */
+export function formatServerCommand(server: MCPServerDisplayInfo): string {
+  const config = server.config;
+  if (config.httpUrl) {
+    return `${config.httpUrl} (http)`;
+  }
+  if (config.url) {
+    return `${config.url} (sse)`;
+  }
+  if (config.command) {
+    const args = config.args?.join(' ') || '';
+    return `${config.command} ${args} (stdio)`.trim();
+  }
+  return 'Unknown';
+}
+
+/**
+ * Check if a tool is valid (has both name and description required by LLM)
+ * @param name - Tool name
+ * @param description - Tool description
+ * @returns boolean indicating if the tool is valid
+ */
+export function isToolValid(name?: string, description?: string): boolean {
+  return !!name && !!description;
+}
+
+/**
+ * Get the reason why a tool is invalid
+ * @param name - Tool name
+ * @param description - Tool description
+ * @returns Array of missing fields
+ */
+export function getToolInvalidReasons(
+  name?: string,
+  description?: string,
+): string[] {
+  const reasons: string[] = [];
+  if (!name) reasons.push('missing name');
+  if (!description) reasons.push('missing description');
+  return reasons;
+}

packages/cli/src/ui/components/messages/AskUserQuestionDialog.test.tsx

@@ -0,0 +1,456 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { AskUserQuestionDialog } from './AskUserQuestionDialog.js';
+import type { ToolAskUserQuestionConfirmationDetails } from '@qwen-code/qwen-code-core';
+import { ToolConfirmationOutcome } from '@qwen-code/qwen-code-core';
+import { renderWithProviders } from '../../../test-utils/render.js';
+
+const wait = (ms = 50) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const createSingleQuestion = (
+  overrides: Partial<
+    ToolAskUserQuestionConfirmationDetails['questions'][0]
+  > = {},
+): ToolAskUserQuestionConfirmationDetails['questions'][0] => ({
+  question: 'What is your favorite color?',
+  header: 'Color',
+  options: [
+    { label: 'Red', description: 'A warm color' },
+    { label: 'Blue', description: 'A cool color' },
+    { label: 'Green', description: '' },
+  ],
+  multiSelect: false,
+  ...overrides,
+});
+
+const createConfirmationDetails = (
+  overrides: Partial<ToolAskUserQuestionConfirmationDetails> = {},
+): ToolAskUserQuestionConfirmationDetails => ({
+  type: 'ask_user_question',
+  title: 'Question',
+  questions: [createSingleQuestion()],
+  onConfirm: vi.fn(),
+  ...overrides,
+});
+
+describe('<AskUserQuestionDialog />', () => {
+  describe('rendering', () => {
+    it('renders single question with options', () => {
+      const details = createConfirmationDetails();
+      const onConfirm = vi.fn();
+
+      const { lastFrame } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          onConfirm={onConfirm}
+        />,
+      );
+
+      const output = lastFrame();
+      expect(output).toContain('What is your favorite color?');
+      expect(output).toContain('Red');
+      expect(output).toContain('Blue');
+      expect(output).toContain('Green');
+      expect(output).toContain('A warm color');
+      expect(output).toContain('A cool color');
+    });
+
+    it('renders header for single question', () => {
+      const details = createConfirmationDetails();
+      const onConfirm = vi.fn();
+
+      const { lastFrame } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          onConfirm={onConfirm}
+        />,
+      );
+
+      expect(lastFrame()).toContain('Color');
+    });
+
+    it('renders "Type something..." custom input option', () => {
+      const details = createConfirmationDetails();
+      const onConfirm = vi.fn();
+
+      const { lastFrame } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          onConfirm={onConfirm}
+        />,
+      );
+
+      expect(lastFrame()).toContain('Type something...');
+    });
+
+    it('renders help text for single select', () => {
+      const details = createConfirmationDetails();
+      const onConfirm = vi.fn();
+
+      const { lastFrame } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          onConfirm={onConfirm}
+        />,
+      );
+
+      expect(lastFrame()).toContain('Enter: Select');
+      expect(lastFrame()).toContain('Esc: Cancel');
+      expect(lastFrame()).not.toContain('Switch tabs');
+    });
+
+    it('renders tabs for multiple questions', () => {
+      const details = createConfirmationDetails({
+        questions: [
+          createSingleQuestion({ header: 'Q1' }),
+          createSingleQuestion({
+            header: 'Q2',
+            question: 'Second question?',
+          }),
+        ],
+      });
+      const onConfirm = vi.fn();
+
+      const { lastFrame } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          onConfirm={onConfirm}
+        />,
+      );
+
+      const output = lastFrame();
+      expect(output).toContain('Q1');
+      expect(output).toContain('Q2');
+      expect(output).toContain('Submit');
+      expect(output).toContain('Switch tabs');
+    });
+
+    it('renders multi-select with checkboxes', () => {
+      const details = createConfirmationDetails({
+        questions: [createSingleQuestion({ multiSelect: true })],
+      });
+      const onConfirm = vi.fn();
+
+      const { lastFrame } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          onConfirm={onConfirm}
+        />,
+      );
+
+      const output = lastFrame();
+      expect(output).toContain('[ ]');
+      expect(output).toContain('Space: Toggle');
+      expect(output).toContain('Enter: Confirm');
+    });
+  });
+
+  describe('single-select interaction', () => {
+    it('selects an option with Enter and submits immediately for single question', async () => {
+      const onConfirm = vi.fn();
+      const details = createConfirmationDetails();
+
+      const { stdin, unmount } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          onConfirm={onConfirm}
+        />,
+      );
+      await wait();
+
+      // Press Enter to select the first option (Red)
+      stdin.write('\r');
+      await wait();
+
+      expect(onConfirm).toHaveBeenCalledWith(
+        ToolConfirmationOutcome.ProceedOnce,
+        { answers: { 0: 'Red' } },
+      );
+      unmount();
+    });
+
+    it('navigates down with arrow key and selects', async () => {
+      const onConfirm = vi.fn();
+      const details = createConfirmationDetails();
+
+      const { stdin, unmount } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          onConfirm={onConfirm}
+        />,
+      );
+      await wait();
+
+      // Navigate down to "Blue"
+      stdin.write('\u001B[B'); // Down arrow
+      await wait();
+
+      // Press Enter
+      stdin.write('\r');
+      await wait();
+
+      expect(onConfirm).toHaveBeenCalledWith(
+        ToolConfirmationOutcome.ProceedOnce,
+        { answers: { 0: 'Blue' } },
+      );
+      unmount();
+    });
+
+    it('navigates with number keys', async () => {
+      const onConfirm = vi.fn();
+      const details = createConfirmationDetails();
+
+      const { stdin, unmount } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          onConfirm={onConfirm}
+        />,
+      );
+      await wait();
+
+      // Press '2' to select Blue
+      stdin.write('2');
+      await wait();
+
+      // Press Enter
+      stdin.write('\r');
+      await wait();
+
+      expect(onConfirm).toHaveBeenCalledWith(
+        ToolConfirmationOutcome.ProceedOnce,
+        { answers: { 0: 'Blue' } },
+      );
+      unmount();
+    });
+
+    it('cancels with Escape', async () => {
+      const onConfirm = vi.fn();
+      const details = createConfirmationDetails();
+
+      const { stdin, unmount } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          onConfirm={onConfirm}
+        />,
+      );
+      await wait();
+
+      stdin.write('\u001B'); // Escape
+      await wait();
+
+      expect(onConfirm).toHaveBeenCalledWith(ToolConfirmationOutcome.Cancel);
+      unmount();
+    });
+  });
+
+  describe('multi-select interaction', () => {
+    it('toggles options with Space', async () => {
+      const onConfirm = vi.fn();
+      const details = createConfirmationDetails({
+        questions: [createSingleQuestion({ multiSelect: true })],
+      });
+
+      const { stdin, lastFrame, unmount } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          onConfirm={onConfirm}
+        />,
+      );
+      await wait();
+
+      // Space to toggle first option
+      stdin.write(' ');
+      await wait();
+
+      // Should show checked state
+      expect(lastFrame()).toContain('[✓]');
+      unmount();
+    });
+
+    it('submits multi-select with Space to toggle then Enter to confirm', async () => {
+      const onConfirm = vi.fn();
+      const details = createConfirmationDetails({
+        questions: [createSingleQuestion({ multiSelect: true })],
+      });
+
+      const { stdin, unmount } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          onConfirm={onConfirm}
+        />,
+      );
+      await wait();
+
+      // Space to toggle first option
+      stdin.write(' ');
+      await wait();
+
+      // Enter to confirm and submit
+      stdin.write('\r');
+      await wait();
+
+      expect(onConfirm).toHaveBeenCalledWith(
+        ToolConfirmationOutcome.ProceedOnce,
+        { answers: { 0: 'Red' } },
+      );
+      unmount();
+    });
+  });
+
+  describe('multiple questions', () => {
+    it('navigates between tabs with left/right arrows', async () => {
+      const onConfirm = vi.fn();
+      const details = createConfirmationDetails({
+        questions: [
+          createSingleQuestion({ header: 'Q1' }),
+          createSingleQuestion({
+            header: 'Q2',
+            question: 'Second question?',
+          }),
+        ],
+      });
+
+      const { stdin, lastFrame, unmount } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          onConfirm={onConfirm}
+        />,
+      );
+      await wait();
+
+      // Navigate right to Q2
+      stdin.write('\u001B[C'); // Right arrow
+      await wait();
+
+      expect(lastFrame()).toContain('Second question?');
+
+      // Navigate left back to Q1
+      stdin.write('\u001B[D'); // Left arrow
+      await wait();
+
+      expect(lastFrame()).toContain('What is your favorite color?');
+      unmount();
+    });
+
+    it('shows Submit tab for multiple questions', async () => {
+      const onConfirm = vi.fn();
+      const details = createConfirmationDetails({
+        questions: [
+          createSingleQuestion({ header: 'Q1' }),
+          createSingleQuestion({ header: 'Q2' }),
+        ],
+      });
+
+      const { stdin, lastFrame, unmount } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          onConfirm={onConfirm}
+        />,
+      );
+      await wait();
+
+      // Navigate to submit tab (right arrow twice: Q1 -> Q2 -> Submit)
+      stdin.write('\u001B[C'); // Right
+      await wait();
+      stdin.write('\u001B[C'); // Right
+      await wait();
+
+      const output = lastFrame();
+      expect(output).toContain('Submit answers');
+      expect(output).toContain('Cancel');
+      expect(output).toContain('Your answers');
+      unmount();
+    });
+
+    it('cancels from Submit tab', async () => {
+      const onConfirm = vi.fn();
+      const details = createConfirmationDetails({
+        questions: [
+          createSingleQuestion({ header: 'Q1' }),
+          createSingleQuestion({ header: 'Q2' }),
+        ],
+      });
+
+      const { stdin, unmount } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          onConfirm={onConfirm}
+        />,
+      );
+      await wait();
+
+      // Navigate to submit tab
+      stdin.write('\u001B[C'); // Right
+      await wait();
+      stdin.write('\u001B[C'); // Right
+      await wait();
+
+      // Navigate down to Cancel option
+      stdin.write('\u001B[B'); // Down
+      await wait();
+
+      // Press Enter
+      stdin.write('\r');
+      await wait();
+
+      expect(onConfirm).toHaveBeenCalledWith(ToolConfirmationOutcome.Cancel);
+      unmount();
+    });
+
+    it('shows unanswered questions as (not answered) in Submit tab', async () => {
+      const onConfirm = vi.fn();
+      const details = createConfirmationDetails({
+        questions: [
+          createSingleQuestion({ header: 'Q1' }),
+          createSingleQuestion({ header: 'Q2' }),
+        ],
+      });
+
+      const { stdin, lastFrame, unmount } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          onConfirm={onConfirm}
+        />,
+      );
+      await wait();
+
+      // Navigate directly to submit tab without answering anything
+      stdin.write('\u001B[C'); // Right
+      await wait();
+      stdin.write('\u001B[C'); // Right
+      await wait();
+
+      expect(lastFrame()).toContain('(not answered)');
+      unmount();
+    });
+  });
+
+  describe('focus behavior', () => {
+    it('does not respond to keys when isFocused is false', async () => {
+      const onConfirm = vi.fn();
+      const details = createConfirmationDetails();
+
+      const { stdin, unmount } = renderWithProviders(
+        <AskUserQuestionDialog
+          confirmationDetails={details}
+          isFocused={false}
+          onConfirm={onConfirm}
+        />,
+      );
+      await wait();
+
+      stdin.write('\r'); // Enter
+      await wait();
+      stdin.write('\u001B'); // Escape
+      await wait();
+
+      expect(onConfirm).not.toHaveBeenCalled();
+      unmount();
+    });
+  });
+});

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

@@ -0,0 +1,572 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { useState } from 'react';
+import { Box, Text } from 'ink';
+import {
+  type ToolAskUserQuestionConfirmationDetails,
+  ToolConfirmationOutcome,
+  type ToolConfirmationPayload,
+} from '@qwen-code/qwen-code-core';
+import { theme } from '../../semantic-colors.js';
+import { useKeypress } from '../../hooks/useKeypress.js';
+import { TextInput } from '../shared/TextInput.js';
+import { t } from '../../../i18n/index.js';
+
+interface AskUserQuestionDialogProps {
+  confirmationDetails: ToolAskUserQuestionConfirmationDetails;
+  isFocused?: boolean;
+  onConfirm: (
+    outcome: ToolConfirmationOutcome,
+    payload?: ToolConfirmationPayload,
+  ) => Promise<void>;
+}
+
+export const AskUserQuestionDialog: React.FC<AskUserQuestionDialogProps> = ({
+  confirmationDetails,
+  isFocused = true,
+  onConfirm,
+}) => {
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [selectedOptions, setSelectedOptions] = useState<
+    Record<number, string>
+  >({});
+  const [customInputValues, setCustomInputValues] = useState<
+    Record<number, string>
+  >({});
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [multiSelectedOptions, setMultiSelectedOptions] = useState<
+    Record<number, string[]>
+  >({});
+  const [customInputChecked, setCustomInputChecked] = useState<
+    Record<number, boolean>
+  >({});
+
+  const hasMultipleQuestions = confirmationDetails.questions.length > 1;
+  const totalTabs = hasMultipleQuestions
+    ? confirmationDetails.questions.length + 1
+    : confirmationDetails.questions.length; // +1 for Submit tab
+  const isSubmitTab =
+    hasMultipleQuestions && currentQuestionIndex === totalTabs - 1;
+
+  const currentQuestion = isSubmitTab
+    ? null
+    : confirmationDetails.questions[currentQuestionIndex];
+  const isMultiSelect = currentQuestion?.multiSelect ?? false;
+  // Options + custom input ("Other")
+  const totalOptions = currentQuestion ? currentQuestion.options.length + 1 : 2;
+
+  // Check if the custom input option is selected
+  const isCustomInputSelected =
+    !isSubmitTab &&
+    currentQuestion &&
+    selectedIndex === currentQuestion.options.length;
+
+  const currentCustomInputValue = customInputValues[currentQuestionIndex] ?? '';
+  const isCustomInputAnswer =
+    !isSubmitTab &&
+    currentQuestion &&
+    !isMultiSelect &&
+    selectedOptions[currentQuestionIndex] !== undefined &&
+    !currentQuestion.options.some(
+      (opt) => opt.label === selectedOptions[currentQuestionIndex],
+    );
+
+  // Compute the current answer for a question, considering multi-select state
+  const getAnswerForQuestion = (idx: number): string | undefined => {
+    const q = confirmationDetails.questions[idx];
+    if (q?.multiSelect) {
+      const selections = [...(multiSelectedOptions[idx] ?? [])];
+      const customValue = (customInputValues[idx] ?? '').trim();
+      if (customInputChecked[idx] && customValue) {
+        selections.push(customValue);
+      }
+      return selections.length > 0 ? selections.join(', ') : undefined;
+    }
+    return selectedOptions[idx];
+  };
+
+  const handleSubmit = async () => {
+    const answers: Record<string, string> = {};
+    confirmationDetails.questions.forEach((_, idx) => {
+      const answer = getAnswerForQuestion(idx);
+      if (answer !== undefined) {
+        answers[idx] = answer;
+      }
+    });
+
+    await onConfirm(ToolConfirmationOutcome.ProceedOnce, { answers });
+  };
+
+  const handleMultiSelectSubmit = () => {
+    if (!currentQuestion) return;
+    const selections = [...(multiSelectedOptions[currentQuestionIndex] ?? [])];
+    const customValue = currentCustomInputValue.trim();
+    if (customInputChecked[currentQuestionIndex] && customValue) {
+      selections.push(customValue);
+    }
+    if (selections.length === 0) return;
+
+    const value = selections.join(', ');
+    const updated = { ...selectedOptions, [currentQuestionIndex]: value };
+    setSelectedOptions(updated);
+
+    if (!hasMultipleQuestions) {
+      void onConfirm(ToolConfirmationOutcome.ProceedOnce, {
+        answers: { [currentQuestionIndex]: value },
+      });
+    } else {
+      if (currentQuestionIndex < totalTabs - 1) {
+        setTimeout(() => {
+          setCurrentQuestionIndex((prev) => Math.min(prev + 1, totalTabs - 1));
+          setSelectedIndex(0);
+        }, 150);
+      }
+    }
+  };
+
+  const handleCustomInputSubmit = () => {
+    const trimmedValue = currentCustomInputValue.trim();
+
+    if (isMultiSelect) {
+      // Toggle custom input checked state
+      if (!trimmedValue) return;
+      setCustomInputChecked((prev) => ({
+        ...prev,
+        [currentQuestionIndex]: !prev[currentQuestionIndex],
+      }));
+      return;
+    }
+
+    if (!trimmedValue) return;
+
+    const updated = {
+      ...selectedOptions,
+      [currentQuestionIndex]: trimmedValue,
+    };
+    setSelectedOptions(updated);
+
+    // If single question, submit immediately
+    if (!hasMultipleQuestions) {
+      void onConfirm(ToolConfirmationOutcome.ProceedOnce, {
+        answers: {
+          [currentQuestionIndex]: trimmedValue,
+        },
+      });
+    } else {
+      // Auto-advance to next tab
+      if (currentQuestionIndex < totalTabs - 1) {
+        setTimeout(() => {
+          setCurrentQuestionIndex((prev) => Math.min(prev + 1, totalTabs - 1));
+          setSelectedIndex(0);
+        }, 150);
+      }
+    }
+  };
+
+  // Handle navigation and selection
+  useKeypress(
+    (key) => {
+      if (!isFocused) return;
+
+      // When custom input is focused, still allow up/down navigation, tab switch and escape
+      if (isCustomInputSelected) {
+        if (key.name === 'up') {
+          setSelectedIndex(Math.max(0, selectedIndex - 1));
+          return;
+        }
+        if (key.name === 'down') {
+          setSelectedIndex(Math.min(totalOptions - 1, selectedIndex + 1));
+          return;
+        }
+        if (key.name === 'escape' || (key.ctrl && key.name === 'c')) {
+          void onConfirm(ToolConfirmationOutcome.Cancel);
+          return;
+        }
+        return;
+      }
+
+      const input = key.sequence;
+
+      // Tab navigation (left/right arrows)
+      if (key.name === 'left' && hasMultipleQuestions) {
+        if (currentQuestionIndex > 0) {
+          setCurrentQuestionIndex(currentQuestionIndex - 1);
+          setSelectedIndex(0);
+        }
+        return;
+      }
+      if (key.name === 'right' && hasMultipleQuestions) {
+        if (currentQuestionIndex < totalTabs - 1) {
+          setCurrentQuestionIndex(currentQuestionIndex + 1);
+          setSelectedIndex(0);
+        }
+        return;
+      }
+
+      // Option navigation (up/down arrows)
+      if (key.name === 'up') {
+        setSelectedIndex(Math.max(0, selectedIndex - 1));
+        return;
+      }
+      if (key.name === 'down') {
+        setSelectedIndex(Math.min(totalOptions - 1, selectedIndex + 1));
+        return;
+      }
+
+      // Number key selection
+      const numKey = parseInt(input || '', 10);
+      if (!isNaN(numKey) && numKey >= 1 && numKey <= totalOptions) {
+        setSelectedIndex(numKey - 1);
+        return;
+      }
+
+      // Space to toggle multi-select
+      if (key.name === 'space' && isMultiSelect && currentQuestion) {
+        if (selectedIndex < currentQuestion.options.length) {
+          const option = currentQuestion.options[selectedIndex];
+          if (option) {
+            const current = multiSelectedOptions[currentQuestionIndex] ?? [];
+            const isChecked = current.includes(option.label);
+            const updated = isChecked
+              ? current.filter((l) => l !== option.label)
+              : [...current, option.label];
+            setMultiSelectedOptions((prev) => ({
+              ...prev,
+              [currentQuestionIndex]: updated,
+            }));
+          }
+        }
+        return;
+      }
+
+      // Enter to select
+      if (key.name === 'return') {
+        // Handle Submit tab
+        if (isSubmitTab) {
+          if (selectedIndex === 0) {
+            // Submit
+            void handleSubmit();
+          } else {
+            // Cancel
+            void onConfirm(ToolConfirmationOutcome.Cancel);
+          }
+          return;
+        }
+
+        // Handle multi-select: Enter advances to next question / submits
+        if (isMultiSelect && currentQuestion) {
+          // Custom input is handled by TextInput's onSubmit
+          if (selectedIndex === currentQuestion.options.length) {
+            return;
+          }
+          handleMultiSelectSubmit();
+          return;
+        }
+
+        // Handle question options (not custom input - that's handled by TextInput)
+        if (currentQuestion && selectedIndex < currentQuestion.options.length) {
+          const option = currentQuestion.options[selectedIndex];
+          if (option) {
+            const updated = {
+              ...selectedOptions,
+              [currentQuestionIndex]: option.label,
+            };
+            setSelectedOptions(updated);
+
+            // If single question, submit immediately
+            if (!hasMultipleQuestions) {
+              void onConfirm(ToolConfirmationOutcome.ProceedOnce, {
+                answers: { [currentQuestionIndex]: option.label },
+              });
+            } else {
+              // Auto-advance to next tab after selection
+              if (currentQuestionIndex < totalTabs - 1) {
+                setTimeout(() => {
+                  setCurrentQuestionIndex((prev) =>
+                    Math.min(prev + 1, totalTabs - 1),
+                  );
+                  setSelectedIndex(0);
+                }, 150);
+              }
+            }
+          }
+        }
+        return;
+      }
+
+      // Cancel
+      if (key.name === 'escape' || (key.ctrl && key.name === 'c')) {
+        void onConfirm(ToolConfirmationOutcome.Cancel);
+        return;
+      }
+    },
+    { isActive: isFocused },
+  );
+
+  // Submit tab (for multiple questions)
+  if (isSubmitTab) {
+    return (
+      <Box flexDirection="column" padding={1}>
+        {/* Tabs */}
+        <Box marginBottom={1} flexDirection="row" gap={1}>
+          {confirmationDetails.questions.map((q, idx) => {
+            const isAnswered = getAnswerForQuestion(idx) !== undefined;
+            return (
+              <Box key={idx}>
+                <Text dimColor>
+                  {isAnswered ? '  ' : '  '}
+                  {q.header}
+                  {isAnswered ? ' ✓' : ''}
+                </Text>
+              </Box>
+            );
+          })}
+          <Box>
+            <Text color={theme.text.accent} bold>
+              ▸ {t('Submit')}
+            </Text>
+          </Box>
+        </Box>
+
+        {/* Show selected answers */}
+        <Box flexDirection="column" marginBottom={1}>
+          <Text bold>{t('Your answers:')}</Text>
+          {confirmationDetails.questions.map((q, idx) => {
+            const answer = getAnswerForQuestion(idx);
+            return (
+              <Box key={idx} marginLeft={2}>
+                <Text>
+                  {q.header}:{' '}
+                  {answer ? (
+                    <Text color={theme.text.accent}>{answer}</Text>
+                  ) : (
+                    <Text dimColor>{t('(not answered)')}</Text>
+                  )}
+                </Text>
+              </Box>
+            );
+          })}
+        </Box>
+
+        <Box marginTop={1} marginBottom={1}>
+          <Text>{t('Ready to submit your answers?')}</Text>
+        </Box>
+
+        {/* Submit/Cancel options */}
+        <Box flexDirection="column">
+          <Box>
+            <Text
+              color={
+                selectedIndex === 0 ? theme.text.accent : theme.text.primary
+              }
+              bold={selectedIndex === 0}
+            >
+              {selectedIndex === 0 ? '❯ ' : '  '}1. {t('Submit answers')}
+            </Text>
+          </Box>
+          <Box>
+            <Text
+              color={
+                selectedIndex === 1 ? theme.text.accent : theme.text.primary
+              }
+              bold={selectedIndex === 1}
+            >
+              {selectedIndex === 1 ? '❯ ' : '  '}2. {t('Cancel')}
+            </Text>
+          </Box>
+        </Box>
+
+        <Box marginTop={1}>
+          <Text dimColor>
+            {t('↑/↓: Navigate | ←/→: Switch tabs | Enter: Select')}
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Question tab
+  return (
+    <Box flexDirection="column" padding={1}>
+      {/* Tabs for multiple questions */}
+      {hasMultipleQuestions && (
+        <Box marginBottom={1} flexDirection="row" gap={1}>
+          {confirmationDetails.questions.map((q, idx) => {
+            const isAnswered = getAnswerForQuestion(idx) !== undefined;
+            return (
+              <Box key={idx}>
+                <Text
+                  color={
+                    idx === currentQuestionIndex
+                      ? theme.text.accent
+                      : theme.text.primary
+                  }
+                  bold={idx === currentQuestionIndex}
+                  dimColor={idx !== currentQuestionIndex}
+                >
+                  {idx === currentQuestionIndex ? '▸ ' : '  '}
+                  {q.header}
+                  {isAnswered ? ' ✓' : ''}
+                </Text>
+              </Box>
+            );
+          })}
+          <Box>
+            <Text dimColor> {t('Submit')}</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Question */}
+      <Box flexDirection="column" marginBottom={1}>
+        {!hasMultipleQuestions && (
+          <Box marginBottom={1}>
+            <Text color={theme.text.accent} bold>
+              {currentQuestion!.header}
+            </Text>
+          </Box>
+        )}
+        <Text>{currentQuestion!.question}</Text>
+      </Box>
+
+      {/* Options */}
+      <Box flexDirection="column" marginBottom={1}>
+        {currentQuestion!.options.map((opt, index) => {
+          const isSelected = selectedIndex === index;
+          const isMultiChecked =
+            isMultiSelect &&
+            (multiSelectedOptions[currentQuestionIndex] ?? []).includes(
+              opt.label,
+            );
+          const isAnswered =
+            !isMultiSelect &&
+            selectedOptions[currentQuestionIndex] === opt.label;
+          const isHighlighted = isSelected || isAnswered || isMultiChecked;
+          // Calculate prefix width for description alignment:
+          // 2 (cursor) + checkbox (4 if multi) + number + ". " (2)
+          const prefixWidth =
+            2 + (isMultiSelect ? 4 : 0) + String(index + 1).length + 2;
+          return (
+            <Box key={index} flexDirection="column">
+              <Box>
+                <Text
+                  color={isHighlighted ? theme.text.accent : theme.text.primary}
+                  bold={isHighlighted}
+                >
+                  {isSelected ? '❯ ' : '  '}
+                  {isMultiSelect ? (isMultiChecked ? '[✓] ' : '[ ] ') : ''}
+                  {index + 1}. {opt.label}
+                  {isAnswered ? ' ✓' : ''}
+                </Text>
+              </Box>
+              {opt.description && (
+                <Box marginLeft={prefixWidth}>
+                  <Text dimColor>{opt.description}</Text>
+                </Box>
+              )}
+            </Box>
+          );
+        })}
+
+        {/* Type something option/input */}
+        <Box flexDirection="column">
+          {isCustomInputSelected ? (
+            // Inline TextInput replaces the option text
+            <Box>
+              <Text color={theme.text.accent} bold>
+                ❯{' '}
+                {isMultiSelect
+                  ? customInputChecked[currentQuestionIndex]
+                    ? '[✓] '
+                    : '[ ] '
+                  : ''}
+                {currentQuestion!.options.length + 1}.{' '}
+              </Text>
+              <TextInput
+                value={currentCustomInputValue}
+                initialCursorOffset={currentCustomInputValue.length}
+                onChange={(value: string) => {
+                  const oldValue =
+                    customInputValues[currentQuestionIndex] ?? '';
+                  if (isMultiSelect && value !== oldValue) {
+                    setCustomInputChecked((prevChecked) => ({
+                      ...prevChecked,
+                      [currentQuestionIndex]: value.trim().length > 0,
+                    }));
+                  }
+                  setCustomInputValues((prev) => ({
+                    ...prev,
+                    [currentQuestionIndex]: value,
+                  }));
+                }}
+                onSubmit={handleCustomInputSubmit}
+                placeholder={t('Type something...')}
+                isActive={true}
+                inputWidth={50}
+              />
+            </Box>
+          ) : (
+            // Show typed value or placeholder when not selected
+            <Box>
+              <Text
+                color={
+                  isCustomInputAnswer ||
+                  customInputChecked[currentQuestionIndex]
+                    ? theme.text.accent
+                    : theme.text.primary
+                }
+                bold={
+                  !!(
+                    isCustomInputAnswer ||
+                    customInputChecked[currentQuestionIndex]
+                  )
+                }
+                dimColor={
+                  !currentCustomInputValue &&
+                  !isCustomInputAnswer &&
+                  !customInputChecked[currentQuestionIndex]
+                }
+              >
+                {'  '}
+                {isMultiSelect
+                  ? customInputChecked[currentQuestionIndex]
+                    ? '[✓] '
+                    : '[ ] '
+                  : ''}
+                {currentQuestion!.options.length + 1}.{' '}
+                {currentCustomInputValue || t('Type something...')}
+                {isCustomInputAnswer ? ' ✓' : ''}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+
+      {/* Help text */}
+      <Box flexDirection="column" marginTop={1}>
+        <Box>
+          <Text dimColor>
+            {hasMultipleQuestions
+              ? isMultiSelect
+                ? t(
+                    '↑/↓: Navigate | ←/→: Switch tabs | Space: Toggle | Enter: Confirm | Esc: Cancel',
+                  )
+                : t(
+                    '↑/↓: Navigate | ←/→: Switch tabs | Enter: Select | Esc: Cancel',
+                  )
+              : isMultiSelect
+                ? t(
+                    '↑/↓: Navigate | Space: Toggle | Enter: Confirm | Esc: Cancel',
+                  )
+                : t('↑/↓: Navigate | Enter: Select | Esc: Cancel')}
+          </Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+};

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

@@ -0,0 +1,261 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Box, Text } from 'ink';
+import stringWidth from 'string-width';
+import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
+import { theme } from '../../semantic-colors.js';
+import {
+  SCREEN_READER_MODEL_PREFIX,
+  SCREEN_READER_USER_PREFIX,
+} from '../../textConstants.js';
+
+interface UserMessageProps {
+  text: string;
+}
+
+interface UserShellMessageProps {
+  text: string;
+}
+
+interface AssistantMessageProps {
+  text: string;
+  isPending: boolean;
+  availableTerminalHeight?: number;
+  contentWidth: number;
+}
+
+interface AssistantMessageContentProps {
+  text: string;
+  isPending: boolean;
+  availableTerminalHeight?: number;
+  contentWidth: number;
+}
+
+interface ThinkMessageProps {
+  text: string;
+  isPending: boolean;
+  availableTerminalHeight?: number;
+  contentWidth: number;
+}
+
+interface ThinkMessageContentProps {
+  text: string;
+  isPending: boolean;
+  availableTerminalHeight?: number;
+  contentWidth: number;
+}
+
+interface PrefixedTextMessageProps {
+  text: string;
+  prefix: string;
+  prefixColor: string;
+  textColor: string;
+  ariaLabel?: string;
+  marginTop?: number;
+  alignSelf?: 'auto' | 'flex-start' | 'center' | 'flex-end';
+}
+
+interface PrefixedMarkdownMessageProps {
+  text: string;
+  prefix: string;
+  prefixColor: string;
+  isPending: boolean;
+  availableTerminalHeight?: number;
+  contentWidth: number;
+  ariaLabel?: string;
+  textColor?: string;
+}
+
+interface ContinuationMarkdownMessageProps {
+  text: string;
+  isPending: boolean;
+  availableTerminalHeight?: number;
+  contentWidth: number;
+  basePrefix: string;
+  textColor?: string;
+}
+
+function getPrefixWidth(prefix: string): number {
+  // Reserve one extra column so text never touches the prefix glyph.
+  return stringWidth(prefix) + 1;
+}
+
+const PrefixedTextMessage: React.FC<PrefixedTextMessageProps> = ({
+  text,
+  prefix,
+  prefixColor,
+  textColor,
+  ariaLabel,
+  marginTop = 0,
+  alignSelf,
+}) => {
+  const prefixWidth = getPrefixWidth(prefix);
+
+  return (
+    <Box
+      flexDirection="row"
+      paddingY={0}
+      marginTop={marginTop}
+      alignSelf={alignSelf}
+    >
+      <Box width={prefixWidth}>
+        <Text color={prefixColor} aria-label={ariaLabel}>
+          {prefix}
+        </Text>
+      </Box>
+      <Box flexGrow={1}>
+        <Text wrap="wrap" color={textColor}>
+          {text}
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+const PrefixedMarkdownMessage: React.FC<PrefixedMarkdownMessageProps> = ({
+  text,
+  prefix,
+  prefixColor,
+  isPending,
+  availableTerminalHeight,
+  contentWidth,
+  ariaLabel,
+  textColor,
+}) => {
+  const prefixWidth = getPrefixWidth(prefix);
+
+  return (
+    <Box flexDirection="row">
+      <Box width={prefixWidth}>
+        <Text color={prefixColor} aria-label={ariaLabel}>
+          {prefix}
+        </Text>
+      </Box>
+      <Box flexGrow={1} flexDirection="column">
+        <MarkdownDisplay
+          text={text}
+          isPending={isPending}
+          availableTerminalHeight={availableTerminalHeight}
+          contentWidth={contentWidth - prefixWidth}
+          textColor={textColor}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+const ContinuationMarkdownMessage: React.FC<
+  ContinuationMarkdownMessageProps
+> = ({
+  text,
+  isPending,
+  availableTerminalHeight,
+  contentWidth,
+  basePrefix,
+  textColor,
+}) => {
+  const prefixWidth = getPrefixWidth(basePrefix);
+
+  return (
+    <Box flexDirection="column" paddingLeft={prefixWidth}>
+      <MarkdownDisplay
+        text={text}
+        isPending={isPending}
+        availableTerminalHeight={availableTerminalHeight}
+        contentWidth={contentWidth - prefixWidth}
+        textColor={textColor}
+      />
+    </Box>
+  );
+};
+
+export const UserMessage: React.FC<UserMessageProps> = ({ text }) => (
+  <PrefixedTextMessage
+    text={text}
+    prefix=">"
+    prefixColor={theme.text.accent}
+    textColor={theme.text.accent}
+    ariaLabel={SCREEN_READER_USER_PREFIX}
+    alignSelf="flex-start"
+  />
+);
+
+export const UserShellMessage: React.FC<UserShellMessageProps> = ({ text }) => {
+  const commandToDisplay = text.startsWith('!') ? text.substring(1) : text;
+
+  return (
+    <PrefixedTextMessage
+      text={commandToDisplay}
+      prefix="$"
+      prefixColor={theme.text.link}
+      textColor={theme.text.primary}
+    />
+  );
+};
+
+export const AssistantMessage: React.FC<AssistantMessageProps> = ({
+  text,
+  isPending,
+  availableTerminalHeight,
+  contentWidth,
+}) => (
+  <PrefixedMarkdownMessage
+    text={text}
+    prefix="✦"
+    prefixColor={theme.text.accent}
+    ariaLabel={SCREEN_READER_MODEL_PREFIX}
+    isPending={isPending}
+    availableTerminalHeight={availableTerminalHeight}
+    contentWidth={contentWidth}
+  />
+);
+
+export const AssistantMessageContent: React.FC<
+  AssistantMessageContentProps
+> = ({ text, isPending, availableTerminalHeight, contentWidth }) => (
+  <ContinuationMarkdownMessage
+    text={text}
+    isPending={isPending}
+    availableTerminalHeight={availableTerminalHeight}
+    contentWidth={contentWidth}
+    basePrefix="✦"
+  />
+);
+
+export const ThinkMessage: React.FC<ThinkMessageProps> = ({
+  text,
+  isPending,
+  availableTerminalHeight,
+  contentWidth,
+}) => (
+  <PrefixedMarkdownMessage
+    text={text}
+    prefix="✦"
+    prefixColor={theme.text.secondary}
+    isPending={isPending}
+    availableTerminalHeight={availableTerminalHeight}
+    contentWidth={contentWidth}
+    textColor={theme.text.secondary}
+  />
+);
+
+export const ThinkMessageContent: React.FC<ThinkMessageContentProps> = ({
+  text,
+  isPending,
+  availableTerminalHeight,
+  contentWidth,
+}) => (
+  <ContinuationMarkdownMessage
+    text={text}
+    isPending={isPending}
+    availableTerminalHeight={availableTerminalHeight}
+    contentWidth={contentWidth}
+    basePrefix="✦"
+    textColor={theme.text.secondary}
+  />
+);

packages/cli/src/ui/components/messages/DiffRenderer.test.tsx

@@ -56,6 +56,7 @@ index 0000000..e69de29
       80,
       undefined,
       mockSettings,
+      4,
     );
   });
 
@@ -86,6 +87,7 @@ index 0000000..e69de29
       80,
       undefined,
       mockSettings,
+      4,
     );
   });
 
@@ -115,6 +117,7 @@ index 0000000..e69de29
       80,
       undefined,
       mockSettings,
+      4,
     );
   });
 

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

@@ -161,6 +161,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
       contentWidth,
       theme,
       settings,
+      tabWidth,
     );
   } else {
     renderedOutput = renderDiffContent(

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

@@ -1,38 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type React from 'react';
-import { Text, Box } from 'ink';
-import { theme } from '../../semantic-colors.js';
-
-interface ErrorMessageProps {
-  text: string;
-  /** Optional inline hint displayed after the error text in secondary/dimmed color */
-  hint?: string;
-}
-
-/**
- * Renders an error message with a "✕" prefix.
- * When a hint is provided (e.g., retry countdown), it is displayed inline
- * in parentheses with a dimmed secondary color, similar to the ESC hint
- * style used in LoadingIndicator.
- */
-export const ErrorMessage: React.FC<ErrorMessageProps> = ({ text, hint }) => {
-  const prefix = '✕ ';
-  const prefixWidth = prefix.length;
-
-  return (
-    <Box flexDirection="row">
-      <Box width={prefixWidth}>
-        <Text color={theme.status.error}>{prefix}</Text>
-      </Box>
-      <Box flexGrow={1} flexWrap="wrap" flexDirection="row">
-        <Text color={theme.status.error}>{text}</Text>
-        {hint && <Text color={theme.text.secondary}> ({hint})</Text>}
-      </Box>
-    </Box>
-  );
-};

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

@@ -1,46 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type React from 'react';
-import { Text, Box } from 'ink';
-import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
-import { theme } from '../../semantic-colors.js';
-import { SCREEN_READER_MODEL_PREFIX } from '../../textConstants.js';
-
-interface GeminiMessageProps {
-  text: string;
-  isPending: boolean;
-  availableTerminalHeight?: number;
-  contentWidth: number;
-}
-
-export const GeminiMessage: React.FC<GeminiMessageProps> = ({
-  text,
-  isPending,
-  availableTerminalHeight,
-  contentWidth,
-}) => {
-  const prefix = '✦ ';
-  const prefixWidth = prefix.length;
-
-  return (
-    <Box flexDirection="row">
-      <Box width={prefixWidth}>
-        <Text color={theme.text.accent} aria-label={SCREEN_READER_MODEL_PREFIX}>
-          {prefix}
-        </Text>
-      </Box>
-      <Box flexGrow={1} flexDirection="column">
-        <MarkdownDisplay
-          text={text}
-          isPending={isPending}
-          availableTerminalHeight={availableTerminalHeight}
-          contentWidth={contentWidth - prefixWidth}
-        />
-      </Box>
-    </Box>
-  );
-};

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

@@ -1,43 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type React from 'react';
-import { Box } from 'ink';
-import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
-
-interface GeminiMessageContentProps {
-  text: string;
-  isPending: boolean;
-  availableTerminalHeight?: number;
-  contentWidth: number;
-}
-
-/*
- * Gemini message content is a semi-hacked component. The intention is to represent a partial
- * of GeminiMessage and is only used when a response gets too long. In that instance messages
- * are split into multiple GeminiMessageContent's to enable the root <Static> component in
- * App.tsx to be as performant as humanly possible.
- */
-export const GeminiMessageContent: React.FC<GeminiMessageContentProps> = ({
-  text,
-  isPending,
-  availableTerminalHeight,
-  contentWidth,
-}) => {
-  const originalPrefix = '✦ ';
-  const prefixWidth = originalPrefix.length;
-
-  return (
-    <Box flexDirection="column" paddingLeft={prefixWidth}>
-      <MarkdownDisplay
-        text={text}
-        isPending={isPending}
-        availableTerminalHeight={availableTerminalHeight}
-        contentWidth={contentWidth - prefixWidth}
-      />
-    </Box>
-  );
-};

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

@@ -1,48 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type React from 'react';
-import { Text, Box } from 'ink';
-import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
-import { theme } from '../../semantic-colors.js';
-
-interface GeminiThoughtMessageProps {
-  text: string;
-  isPending: boolean;
-  availableTerminalHeight?: number;
-  contentWidth: number;
-}
-
-/**
- * Displays model thinking/reasoning text with a softer, dimmed style
- * to visually distinguish it from regular content output.
- */
-export const GeminiThoughtMessage: React.FC<GeminiThoughtMessageProps> = ({
-  text,
-  isPending,
-  availableTerminalHeight,
-  contentWidth,
-}) => {
-  const prefix = '✦ ';
-  const prefixWidth = prefix.length;
-
-  return (
-    <Box flexDirection="row">
-      <Box width={prefixWidth}>
-        <Text color={theme.text.secondary}>{prefix}</Text>
-      </Box>
-      <Box flexGrow={1} flexDirection="column">
-        <MarkdownDisplay
-          text={text}
-          isPending={isPending}
-          availableTerminalHeight={availableTerminalHeight}
-          contentWidth={contentWidth - prefixWidth}
-          textColor={theme.text.secondary}
-        />
-      </Box>
-    </Box>
-  );
-};

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

@@ -1,40 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type React from 'react';
-import { Box } from 'ink';
-import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
-import { theme } from '../../semantic-colors.js';
-
-interface GeminiThoughtMessageContentProps {
-  text: string;
-  isPending: boolean;
-  availableTerminalHeight?: number;
-  contentWidth: number;
-}
-
-/**
- * Continuation component for thought messages, similar to GeminiMessageContent.
- * Used when a thought response gets too long and needs to be split for performance.
- */
-export const GeminiThoughtMessageContent: React.FC<
-  GeminiThoughtMessageContentProps
-> = ({ text, isPending, availableTerminalHeight, contentWidth }) => {
-  const originalPrefix = '✦ ';
-  const prefixWidth = originalPrefix.length;
-
-  return (
-    <Box flexDirection="column" paddingLeft={prefixWidth}>
-      <MarkdownDisplay
-        text={text}
-        isPending={isPending}
-        availableTerminalHeight={availableTerminalHeight}
-        contentWidth={contentWidth - prefixWidth}
-        textColor={theme.text.secondary}
-      />
-    </Box>
-  );
-};

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

@@ -1,37 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type React from 'react';
-import { Text, Box } from 'ink';
-import { theme } from '../../semantic-colors.js';
-import { RenderInline } from '../../utils/InlineMarkdownRenderer.js';
-
-interface InfoMessageProps {
-  text: string;
-}
-
-export const InfoMessage: React.FC<InfoMessageProps> = ({ text }) => {
-  // Don't render anything if text is empty
-  if (!text || text.trim() === '') {
-    return null;
-  }
-
-  const prefix = 'ℹ ';
-  const prefixWidth = prefix.length;
-
-  return (
-    <Box flexDirection="row">
-      <Box width={prefixWidth}>
-        <Text color={theme.status.warning}>{prefix}</Text>
-      </Box>
-      <Box flexGrow={1}>
-        <Text wrap="wrap" color={theme.status.warning}>
-          <RenderInline text={text} textColor={theme.status.warning} />
-        </Text>
-      </Box>
-    </Box>
-  );
-};

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

@@ -1,41 +0,0 @@
-/**
- * @license
- * Copyright 2025 Qwen
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type React from 'react';
-import { Text, Box } from 'ink';
-import { theme } from '../../semantic-colors.js';
-
-interface RetryCountdownMessageProps {
-  text: string;
-}
-
-/**
- * Displays a retry countdown message in a dimmed/secondary style
- * to visually distinguish it from error messages.
- */
-export const RetryCountdownMessage: React.FC<RetryCountdownMessageProps> = ({
-  text,
-}) => {
-  if (!text || text.trim() === '') {
-    return null;
-  }
-
-  const prefix = '↻ ';
-  const prefixWidth = prefix.length;
-
-  return (
-    <Box flexDirection="row">
-      <Box width={prefixWidth}>
-        <Text color={theme.text.secondary}>{prefix}</Text>
-      </Box>
-      <Box flexGrow={1}>
-        <Text wrap="wrap" color={theme.text.secondary}>
-          {text}
-        </Text>
-      </Box>
-    </Box>
-  );
-};

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

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Box, Text } from 'ink';
+import stringWidth from 'string-width';
+import { theme } from '../../semantic-colors.js';
+import { RenderInline } from '../../utils/InlineMarkdownRenderer.js';
+
+interface StatusMessageProps {
+  text: string;
+  prefix: string;
+  prefixColor: string;
+  textColor: string;
+  children?: React.ReactNode;
+}
+
+interface StatusTextProps {
+  text: string;
+}
+
+/**
+ * Shared renderer for status-like history messages (info/warning/error/retry).
+ * Keeps prefix spacing and wrapping behavior consistent across variants.
+ */
+export const StatusMessage: React.FC<StatusMessageProps> = ({
+  text,
+  prefix,
+  prefixColor,
+  textColor,
+  children,
+}) => {
+  if (!text || text.trim() === '') {
+    return null;
+  }
+
+  const prefixWidth = stringWidth(prefix) + 1;
+
+  return (
+    <Box flexDirection="row">
+      <Box width={prefixWidth} flexShrink={0}>
+        <Text color={prefixColor}>{prefix}</Text>
+      </Box>
+      <Box flexGrow={1}>
+        <Text wrap="wrap" color={textColor}>
+          <RenderInline text={text} />
+          {children}
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+export const InfoMessage: React.FC<StatusTextProps> = ({ text }) => (
+  <StatusMessage
+    text={text}
+    prefix="●"
+    prefixColor={theme.text.primary}
+    textColor={theme.text.primary}
+  />
+);
+
+export const SuccessMessage: React.FC<StatusTextProps> = ({ text }) => (
+  <StatusMessage
+    text={text}
+    prefix="✓"
+    prefixColor={theme.status.success}
+    textColor={theme.status.success}
+  />
+);
+
+export const WarningMessage: React.FC<StatusTextProps> = ({ text }) => (
+  <StatusMessage
+    text={text}
+    prefix="⚠"
+    prefixColor={theme.status.warning}
+    textColor={theme.status.warning}
+  />
+);
+
+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 }) => (
+  <StatusMessage
+    text={text}
+    prefix="↻"
+    prefixColor={theme.text.secondary}
+    textColor={theme.text.secondary}
+  />
+);

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

@@ -25,6 +25,7 @@ import { useKeypress } from '../../hooks/useKeypress.js';
 import { useSettings } from '../../contexts/SettingsContext.js';
 import { theme } from '../../semantic-colors.js';
 import { t } from '../../../i18n/index.js';
+import { AskUserQuestionDialog } from './AskUserQuestionDialog.js';
 
 export interface ToolConfirmationMessageProps {
   confirmationDetails: ToolCallConfirmationDetails;
@@ -363,6 +364,15 @@ export const ToolConfirmationMessage: React.FC<
         )}
       </Box>
     );
+  } else if (confirmationDetails.type === 'ask_user_question') {
+    // Use dedicated dialog for ask_user_question type
+    return (
+      <AskUserQuestionDialog
+        confirmationDetails={confirmationDetails}
+        isFocused={isFocused}
+        onConfirm={onConfirm}
+      />
+    );
   } else {
     // mcp tool confirmation
     const mcpProps = confirmationDetails as ToolMcpConfirmationDetails;

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

@@ -1,38 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type React from 'react';
-import { Text, Box } from 'ink';
-import { theme } from '../../semantic-colors.js';
-import { SCREEN_READER_USER_PREFIX } from '../../textConstants.js';
-import { isSlashCommand as checkIsSlashCommand } from '../../utils/commandUtils.js';
-
-interface UserMessageProps {
-  text: string;
-}
-
-export const UserMessage: React.FC<UserMessageProps> = ({ text }) => {
-  const prefix = '> ';
-  const prefixWidth = prefix.length;
-  const isSlashCommand = checkIsSlashCommand(text);
-
-  const textColor = isSlashCommand ? theme.text.accent : theme.text.secondary;
-
-  return (
-    <Box flexDirection="row" paddingY={0} marginY={1} alignSelf="flex-start">
-      <Box width={prefixWidth}>
-        <Text color={theme.text.accent} aria-label={SCREEN_READER_USER_PREFIX}>
-          {prefix}
-        </Text>
-      </Box>
-      <Box flexGrow={1}>
-        <Text wrap="wrap" color={textColor}>
-          {text}
-        </Text>
-      </Box>
-    </Box>
-  );
-};

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

@@ -1,25 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type React from 'react';
-import { Box, Text } from 'ink';
-import { theme } from '../../semantic-colors.js';
-
-interface UserShellMessageProps {
-  text: string;
-}
-
-export const UserShellMessage: React.FC<UserShellMessageProps> = ({ text }) => {
-  // Remove leading '!' if present, as App.tsx adds it for the processor.
-  const commandToDisplay = text.startsWith('!') ? text.substring(1) : text;
-
-  return (
-    <Box>
-      <Text color={theme.text.link}>$ </Text>
-      <Text color={theme.text.primary}>{commandToDisplay}</Text>
-    </Box>
-  );
-};

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

@@ -1,33 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type React from 'react';
-import { Box, Text } from 'ink';
-import { Colors } from '../../colors.js';
-import { RenderInline } from '../../utils/InlineMarkdownRenderer.js';
-import { theme } from '../../semantic-colors.js';
-
-interface WarningMessageProps {
-  text: string;
-}
-
-export const WarningMessage: React.FC<WarningMessageProps> = ({ text }) => {
-  const prefix = '⚠ ';
-  const prefixWidth = 3;
-
-  return (
-    <Box flexDirection="row">
-      <Box width={prefixWidth}>
-        <Text color={Colors.AccentYellow}>{prefix}</Text>
-      </Box>
-      <Box flexGrow={1}>
-        <Text wrap="wrap" color={Colors.AccentYellow}>
-          <RenderInline text={text} textColor={theme.status.warning} />
-        </Text>
-      </Box>
-    </Box>
-  );
-};

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

@@ -32,6 +32,7 @@ export interface TextInputProps {
   isActive?: boolean; // when false, ignore keypresses
   validationErrors?: string[];
   inputWidth?: number;
+  initialCursorOffset?: number;
 }
 
 export function TextInput({
@@ -46,6 +47,7 @@ export function TextInput({
   isActive = true,
   validationErrors = [],
   inputWidth = 80,
+  initialCursorOffset,
 }: TextInputProps) {
   const allowMultiline = height > 1;
 
@@ -60,6 +62,7 @@ export function TextInput({
 
   const buffer = useTextBuffer({
     initialText: value || '',
+    initialCursorOffset,
     viewport: { height, width: inputWidth },
     isValidPath: () => false,
     onChange: stableOnChange,

packages/cli/src/ui/components/shared/text-buffer.ts

@@ -1840,7 +1840,7 @@ export function useTextBuffer({
         process.env['VISUAL'] ??
         process.env['EDITOR'] ??
         (process.platform === 'win32' ? 'notepad' : 'vi');
-      const tmpDir = fs.mkdtempSync(pathMod.join(os.tmpdir(), 'gemini-edit-'));
+      const tmpDir = fs.mkdtempSync(pathMod.join(os.tmpdir(), 'qwen-edit-'));
       const filePath = pathMod.join(tmpDir, 'buffer.txt');
       fs.writeFileSync(filePath, text, 'utf8');
 

packages/cli/src/ui/components/subagents/create/AgentCreationWizard.tsx

@@ -120,45 +120,6 @@ export function AgentCreationWizard({
     );
   }, [state.currentStep, state.generationMethod]);
 
-  const renderDebugContent = useCallback(() => {
-    if (process.env['NODE_ENV'] !== 'development') {
-      return null;
-    }
-
-    return (
-      <Box borderStyle="single" borderColor={theme.status.warning} padding={1}>
-        <Box flexDirection="column">
-          <Text color={theme.status.warning} bold>
-            Debug Info:
-          </Text>
-          <Text color={theme.text.secondary}>Step: {state.currentStep}</Text>
-          <Text color={theme.text.secondary}>
-            Can Proceed: {state.canProceed ? 'Yes' : 'No'}
-          </Text>
-          <Text color={theme.text.secondary}>
-            Generating: {state.isGenerating ? 'Yes' : 'No'}
-          </Text>
-          <Text color={theme.text.secondary}>Location: {state.location}</Text>
-          <Text color={theme.text.secondary}>
-            Method: {state.generationMethod}
-          </Text>
-          {state.validationErrors.length > 0 && (
-            <Text color={theme.status.error}>
-              Errors: {state.validationErrors.join(', ')}
-            </Text>
-          )}
-        </Box>
-      </Box>
-    );
-  }, [
-    state.currentStep,
-    state.canProceed,
-    state.isGenerating,
-    state.location,
-    state.generationMethod,
-    state.validationErrors,
-  ]);
-
   const renderStepFooter = useCallback(() => {
     const getNavigationInstructions = () => {
       // Special case: During generation in description input step, only show cancel option
@@ -331,7 +292,6 @@ export function AgentCreationWizard({
       >
         {renderStepHeader()}
         {renderStepContent()}
-        {renderDebugContent()}
         {renderStepFooter()}
       </Box>
     </Box>