From ac95ee316159dccc84093228a62f5b51b6cc8d22 Mon Sep 17 00:00:00 2001 From: catlog22 Date: Wed, 4 Feb 2026 15:26:36 +0800 Subject: [PATCH] feat: update CLI mode toggle for improved UI and functionality; refactor RecommendedMcpWizard API call; add new localization strings for installation wizard and tools --- .../src/components/mcp/CliModeToggle.tsx | 70 +++++++------------ .../components/mcp/RecommendedMcpWizard.tsx | 4 +- ccw/frontend/src/locales/en/mcp-manager.json | 36 ++++++++++ ccw/frontend/src/locales/zh/mcp-manager.json | 36 ++++++++++ 4 files changed, 100 insertions(+), 46 deletions(-) diff --git a/ccw/frontend/src/components/mcp/CliModeToggle.tsx b/ccw/frontend/src/components/mcp/CliModeToggle.tsx index fca83bf0..9bf252b6 100644 --- a/ccw/frontend/src/components/mcp/CliModeToggle.tsx +++ b/ccw/frontend/src/components/mcp/CliModeToggle.tsx @@ -1,12 +1,10 @@ // ======================================== // CLI Mode Toggle Component // ======================================== -// Toggle between Claude and Codex CLI modes with config path display +// Compact badge-style toggle between Claude and Codex CLI modes import { useIntl } from 'react-intl'; import { Terminal, Cpu } from 'lucide-react'; -import { Button } from '@/components/ui/Button'; -import { Badge } from '@/components/ui/Badge'; import { cn } from '@/lib/utils'; // ========== Types ========== @@ -24,51 +22,35 @@ export interface CliModeToggleProps { export function CliModeToggle({ currentMode, onModeChange, - codexConfigPath, }: CliModeToggleProps) { const { formatMessage } = useIntl(); return ( -
- {/* Mode Toggle Buttons */} -
- - -
- - {/* Codex Config Path Display */} - {currentMode === 'codex' && codexConfigPath && ( -
- - {formatMessage({ id: 'mcp.codex.configPath' })} - - - {codexConfigPath} - -
- )} +
+ +
); } diff --git a/ccw/frontend/src/components/mcp/RecommendedMcpWizard.tsx b/ccw/frontend/src/components/mcp/RecommendedMcpWizard.tsx index 97ed51db..6e09e30a 100644 --- a/ccw/frontend/src/components/mcp/RecommendedMcpWizard.tsx +++ b/ccw/frontend/src/components/mcp/RecommendedMcpWizard.tsx @@ -21,7 +21,7 @@ import { Label } from '@/components/ui/Label'; import { Badge } from '@/components/ui/Badge'; import { addGlobalMcpServer, - addProjectMcpServer, + copyMcpServerToProject, } from '@/lib/api'; import { mcpServersKeys } from '@/hooks'; import { useNotifications } from '@/hooks/useNotifications'; @@ -131,7 +131,7 @@ export function RecommendedMcpWizard({ if (selectedScope === 'global') { return addGlobalMcpServer(mcpDefinition.id, serverConfig); } else { - return addProjectMcpServer(mcpDefinition.id, serverConfig); + return copyMcpServerToProject(mcpDefinition.id, serverConfig); } }, onSuccess: (result) => { diff --git a/ccw/frontend/src/locales/en/mcp-manager.json b/ccw/frontend/src/locales/en/mcp-manager.json index f8ad31ec..8fdb4a7a 100644 --- a/ccw/frontend/src/locales/en/mcp-manager.json +++ b/ccw/frontend/src/locales/en/mcp-manager.json @@ -294,6 +294,42 @@ "step2": "Or manually add the JSON config to your configuration file", "step3": "Restart your CLI to load the new server" }, + "configRequired": "config required", + "noConfigNeeded": "No configuration needed", + "reconfigure": "Reconfigure", + "wizard": { + "install": "Install", + "installing": "Installing...", + "installSuccess": "Server installed successfully", + "installError": "Failed to install server", + "validation": "Validation error", + "requiredFields": "Please fill in all required fields", + "scope": "Installation Scope", + "scope.global": "Global (All projects)", + "scope.project": "Project (Current project only)" + }, + "ace-tool": { + "name": "ACE Tool", + "desc": "Advanced code search and context engine for intelligent code discovery", + "field": { + "baseUrl": "Base URL", + "baseUrl.desc": "ACE MCP relay server endpoint", + "token": "API Token", + "token.desc": "Your ACE API token for authentication" + } + }, + "chrome-devtools": { + "name": "Chrome DevTools", + "desc": "Browser automation and debugging tools for web development" + }, + "exa": { + "name": "Exa Search", + "desc": "AI-powered web search with real-time crawling capabilities", + "field": { + "apiKey": "API Key", + "apiKey.desc": "Your Exa API key (optional, some features may require it)" + } + }, "enterprise": { "label": "Enterprise", "tooltip": "Enterprise MCP server" diff --git a/ccw/frontend/src/locales/zh/mcp-manager.json b/ccw/frontend/src/locales/zh/mcp-manager.json index eabf44bd..82b5efd3 100644 --- a/ccw/frontend/src/locales/zh/mcp-manager.json +++ b/ccw/frontend/src/locales/zh/mcp-manager.json @@ -294,6 +294,42 @@ "step2": "或将 JSON 配置手动添加到您的配置文件中", "step3": "重启您的 CLI 以加载新服务器" }, + "configRequired": "项配置", + "noConfigNeeded": "无需配置", + "reconfigure": "重新配置", + "wizard": { + "install": "安装", + "installing": "安装中...", + "installSuccess": "服务器安装成功", + "installError": "服务器安装失败", + "validation": "验证错误", + "requiredFields": "请填写所有必填字段", + "scope": "安装范围", + "scope.global": "全局（所有项目）", + "scope.project": "项目（仅当前项目）" + }, + "ace-tool": { + "name": "ACE 工具", + "desc": "高级代码搜索和上下文引擎，用于智能代码发现", + "field": { + "baseUrl": "服务器地址", + "baseUrl.desc": "ACE MCP 中继服务器端点", + "token": "API 令牌", + "token.desc": "用于认证的 ACE API 令牌" + } + }, + "chrome-devtools": { + "name": "Chrome 开发者工具", + "desc": "浏览器自动化和调试工具，用于 Web 开发" + }, + "exa": { + "name": "Exa 搜索", + "desc": "AI 驱动的网络搜索，支持实时抓取", + "field": { + "apiKey": "API 密钥", + "apiKey.desc": "您的 Exa API 密钥（可选，部分功能可能需要）" + } + }, "enterprise": { "label": "企业版", "tooltip": "企业版 MCP 服务器"