Merge branch 'main' into feature/extension-management-tui

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

@@ -35,6 +35,7 @@ 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 {
@@ -301,6 +302,9 @@ export const DialogManager = ({
       />
     );
   }
+  if (uiState.isMcpDialogOpen) {
+    return <MCPManagementDialog onClose={uiActions.closeMcpDialog} />;
+  }
 
   if (uiState.isResumeDialogOpen) {
     return (

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

@@ -0,0 +1,554 @@
+/**
+ * @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 { 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';
+
+const debugLogger = createDebugLogger('MCP_DIALOG');
+
+export const MCPManagementDialog: React.FC<MCPManagementDialogProps> = ({
+  onClose,
+}) => {
+  const config = useConfig();
+
+  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';
+      }
+
+      // Determine the scope of the configuration
+      let scope: 'user' | 'workspace' | 'extension' = 'user';
+      if (serverConfig.extensionName) {
+        scope = 'extension';
+      } else if (workspaceSettings.mcpServers?.[name]) {
+        scope = 'workspace';
+      } else if (userSettings.mcpServers?.[name]) {
+        scope = '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,
+        scope,
+        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]);
+
+  // 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(() => {
+    if (!selectedServer) return;
+
+    // If server is already disabled, enable it directly
+    if (selectedServer.isDisabled) {
+      void handleEnableServer();
+    } else {
+      // Otherwise navigate to disable scope selection
+      handleNavigateToStep(MCP_MANAGEMENT_STEPS.DISABLE_SCOPE_SELECT);
+    }
+  }, [selectedServer, handleEnableServer, handleNavigateToStep]);
+
+  // 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 = '';
+
+    switch (currentStep) {
+      case MCP_MANAGEMENT_STEPS.SERVER_LIST:
+        headerText = t('Manage MCP servers');
+        break;
+      case MCP_MANAGEMENT_STEPS.SERVER_DETAIL:
+        headerText = selectedServer?.name || t('Server Detail');
+        break;
+      case MCP_MANAGEMENT_STEPS.DISABLE_SCOPE_SELECT:
+        headerText = t('Disable Server');
+        break;
+      case MCP_MANAGEMENT_STEPS.TOOL_LIST:
+        headerText = t('Tools');
+        break;
+      case MCP_MANAGEMENT_STEPS.TOOL_DETAIL:
+        headerText = selectedTool?.name || t('Tool Detail');
+        break;
+      default:
+        headerText = t('MCP Management');
+    }
+
+    return (
+      <Box>
+        <Text color={theme.text.accent} bold>
+          {headerText}
+        </Text>
+      </Box>
+    );
+  }, [getCurrentStep, selectedServer, selectedTool]);
+
+  // 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}
+            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} />
+        );
+
+      default:
+        return (
+          <Box>
+            <Text color={theme.status.error}>{t('Unknown step')}</Text>
+          </Box>
+        );
+    }
+  }, [
+    isLoading,
+    getCurrentStep,
+    servers,
+    selectedServer,
+    selectedTool,
+    handleSelectServer,
+    handleViewTools,
+    handleReconnect,
+    handleDisable,
+    handleNavigateBack,
+    handleSelectTool,
+    handleSelectDisableScope,
+    getServerTools,
+  ]);
+
+  // 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;
+      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">
+      <Box
+        borderStyle="single"
+        borderColor={theme.border.default}
+        flexDirection="column"
+        padding={1}
+        width="100%"
+        gap={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/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,223 @@
+/**
+ * @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 { ServerDetailStepProps } from '../types.js';
+import {
+  getStatusColor,
+  getStatusIcon,
+  formatServerCommand,
+} from '../utils.js';
+
+// 标签列宽度
+const LABEL_WIDTH = 15;
+
+type ServerAction = 'view-tools' | 'reconnect' | 'toggle-disable';
+
+export const ServerDetailStep: React.FC<ServerDetailStepProps> = ({
+  server,
+  onViewTools,
+  onReconnect,
+  onDisable,
+  onBack,
+}) => {
+  const [selectedAction, setSelectedAction] =
+    useState<ServerAction>('view-tools');
+
+  const statusColor = server ? getStatusColor(server.status) : 'gray';
+
+  const actions = [
+    {
+      key: 'view-tools',
+      get label() {
+        return t('View tools');
+      },
+      value: 'view-tools' as const,
+    },
+    {
+      key: 'reconnect',
+      get label() {
+        return t('Reconnect');
+      },
+      value: 'reconnect' as const,
+    },
+    {
+      key: 'toggle-disable',
+      get label() {
+        return server?.isDisabled ? t('Enable') : t('Disable');
+      },
+      value: 'toggle-disable' as const,
+    },
+  ];
+
+  useKeypress(
+    (key) => {
+      if (key.name === 'escape') {
+        onBack();
+      } else if (key.name === 'return') {
+        switch (selectedAction) {
+          case 'view-tools':
+            onViewTools();
+            break;
+          case 'reconnect':
+            onReconnect?.();
+            break;
+          case 'toggle-disable':
+            onDisable?.();
+            break;
+          default:
+            break;
+        }
+      }
+    },
+    { 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)} {t(server.status)}
+              {server.isDisabled && (
+                <Text color={theme.status.warning}> {t('(disabled)')}</Text>
+              )}
+            </Text>
+          </Box>
+        </Box>
+
+        <Box>
+          <Box width={LABEL_WIDTH}>
+            <Text color={theme.text.primary}>{t('Source:')}</Text>
+          </Box>
+          <Box>
+            <Text color={theme.text.secondary}>
+              {server.scope === 'user'
+                ? t('User Settings')
+                : server.scope === 'workspace'
+                  ? 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>
+        )}
+
+        <Box>
+          <Box width={LABEL_WIDTH}>
+            <Text color={theme.text.primary}>{t('Capabilities:')}</Text>
+          </Box>
+          <Box>
+            <Text>
+              {server.toolCount > 0 ? t('tools') : ''}
+              {server.toolCount > 0 && server.promptCount > 0 ? ', ' : ''}
+              {server.promptCount > 0 ? t('prompts') : ''}
+            </Text>
+          </Box>
+        </Box>
+
+        <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}
+          onHighlight={(value: ServerAction) => setSelectedAction(value)}
+          onSelect={(value: ServerAction) => {
+            switch (value) {
+              case 'view-tools':
+                onViewTools();
+                break;
+              case 'reconnect':
+                onReconnect?.();
+                break;
+              case 'toggle-disable':
+                onDisable?.();
+                break;
+              default:
+                break;
+            }
+          }}
+        />
+      </Box>
+    </Box>
+  );
+};

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

@@ -0,0 +1,185 @@
+/**
+ * @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">
+      {/* 服务器统计 */}
+      <Box marginBottom={1}>
+        <Text color={theme.text.secondary}>
+          {servers.length} {servers.length === 1 ? t('server') : t('servers')}
+        </Text>
+      </Box>
+
+      {/* 分组服务器列表 */}
+      {groupedServers.map((group, groupIndex) => (
+        <Box key={group.source} flexDirection="column" marginBottom={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" marginTop={1}>
+            {group.servers.map((server, itemIndex) => {
+              const isSelected =
+                groupIndex === currentPosition.groupIndex &&
+                itemIndex === currentPosition.itemIndex;
+              const statusColor = 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)} {t(server.status)}
+                  </Text>
+                  {/* 显示 Scope 和禁用状态 */}
+                  <Text color={theme.text.secondary}> [{server.scope}]</Text>
+                  {server.isDisabled && (
+                    <Text color={theme.status.warning}> {t('(disabled)')}</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') && (
+        <Box>
+          <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,217 @@
+/**
+ * @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 truncate = (str: string, maxLen: number = 50): string => {
+  if (str.length <= maxLen) return str;
+  return str.substring(0, maxLen - 3) + '...';
+};
+
+/**
+ * 渲染单个参数
+ */
+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;
+
+  return (
+    <Box key={name} flexDirection="column" marginTop={1}>
+      <Box>
+        <Text color={theme.text.primary}>• {name}</Text>
+        {isRequired && (
+          <Text color={theme.status.error}> ({t('required')})</Text>
+        )}
+      </Box>
+      <Box marginLeft={2}>
+        <Text color={theme.text.secondary}>{t('Type')}: </Text>
+        <Text color={theme.status.success}>{type}</Text>
+      </Box>
+      {description && (
+        <Box marginLeft={2}>
+          <Text color={theme.text.secondary} wrap="wrap">
+            {truncate(description, 80)}
+          </Text>
+        </Box>
+      )}
+      {enumValues && enumValues.length > 0 && (
+        <Box marginLeft={2}>
+          <Text color={theme.text.secondary}>
+            {t('Enum')}: {enumValues.join(', ')}
+          </Text>
+        </Box>
+      )}
+      {defaultValue !== undefined && (
+        <Box marginLeft={2}>
+          <Text color={theme.text.secondary}>
+            {t('Default')}:{' '}
+            {typeof defaultValue === 'string'
+              ? `"${truncate(defaultValue, 30)}"`
+              : String(defaultValue)}
+          </Text>
+        </Box>
+      )}
+    </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.secondary}>{t('Parameters')}:</Text>
+      <Box marginLeft={2} flexDirection="column">
+        {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>
+          <Text wrap="wrap">{tool.description}</Text>
+        </Box>
+      )}
+
+      {/* 工具注解 */}
+      {tool.annotations && (
+        <Box flexDirection="column" marginTop={1}>
+          <Text color={theme.text.secondary}>{t('Annotations')}:</Text>
+          <Box marginLeft={2} flexDirection="column">
+            {tool.annotations.title && (
+              <Text color={theme.text.secondary}>
+                • {t('Title')}: {tool.annotations.title}
+              </Text>
+            )}
+            {tool.annotations.readOnlyHint !== undefined && (
+              <Text color={theme.text.secondary}>
+                • {t('Read Only')}:{' '}
+                {tool.annotations.readOnlyHint ? t('Yes') : t('No')}
+              </Text>
+            )}
+            {tool.annotations.destructiveHint !== undefined && (
+              <Text color={theme.text.secondary}>
+                • {t('Destructive')}:{' '}
+                {tool.annotations.destructiveHint ? t('Yes') : t('No')}
+              </Text>
+            )}
+            {tool.annotations.idempotentHint !== undefined && (
+              <Text color={theme.text.secondary}>
+                • {t('Idempotent')}:{' '}
+                {tool.annotations.idempotentHint ? t('Yes') : t('No')}
+              </Text>
+            )}
+            {tool.annotations.openWorldHint !== undefined && (
+              <Text color={theme.text.secondary}>
+                • {t('Open World')}:{' '}
+                {tool.annotations.openWorldHint ? t('Yes') : t('No')}
+              </Text>
+            )}
+          </Box>
+        </Box>
+      )}
+
+      {/* Schema */}
+      {tool.schema && (
+        <Box flexDirection="column" marginTop={1}>
+          <SchemaSummary schema={tool.schema} />
+        </Box>
+      )}
+
+      {/* 所属服务器 */}
+      <Box marginTop={1}>
+        <Text color={theme.text.secondary}>
+          {t('Server')}: {tool.serverName}
+        </Text>
+      </Box>
+    </Box>
+  );
+};

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

@@ -0,0 +1,157 @@
+/**
+ * @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,
+  serverName,
+  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(t('destructive'));
+    if (tool.annotations?.readOnlyHint) hints.push(t('read-only'));
+    if (tool.annotations?.openWorldHint) hints.push(t('open-world'));
+    if (tool.annotations?.idempotentHint) hints.push(t('idempotent'));
+    return hints.join(', ');
+  };
+
+  return (
+    <Box flexDirection="column">
+      {/* 标题 */}
+      <Box marginBottom={1}>
+        <Text bold>{t('Tools for {{name}}', { name: serverName })}</Text>
+        <Text color={theme.text.secondary}>
+          {' '}
+          ({tools.length} {tools.length === 1 ? t('tool') : t('tools')})
+        </Text>
+      </Box>
+
+      {/* 工具列表 */}
+      <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={4}>
+                <Text
+                  color={isSelected ? theme.text.accent : theme.text.primary}
+                >
+                  {isSelected ? '❯' : ' '}
+                </Text>
+                <Text color={theme.text.secondary}>{actualIndex + 1}.</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,180 @@
+/**
+ * @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',
+} 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';
+  /** 配置所在的 scope */
+  scope: 'user' | 'workspace' | '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;
+  /** 返回回调 */
+  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;
+}
+
+/**
+ * MCP管理对话框属性
+ */
+export interface MCPManagementDialogProps {
+  /** 关闭回调 */
+  onClose: () => void;
+}

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

@@ -0,0 +1,159 @@
+/**
+ * @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',
+          scope: 'user',
+          config: { command: 'cmd1' },
+          toolCount: 1,
+          promptCount: 0,
+          isDisabled: false,
+        },
+        {
+          name: 'server2',
+          status: MCPServerStatus.CONNECTED,
+          source: 'extension',
+          scope: '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;
+}