feat: update CLI mode toggle for improved UI and functionality; refactor RecommendedMcpWizard API call; add new localization strings for installation wizard and tools

Author: catlog22

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 (
-    <div className="space-y-3">
-      {/* Mode Toggle Buttons */}
-      <div className="flex gap-2 p-1 bg-muted rounded-lg">
-        <Button
-          variant={currentMode === 'claude' ? 'default' : 'ghost'}
-          size="sm"
-          onClick={() => onModeChange('claude')}
-          className={cn(
-            'flex-1 gap-2',
-            currentMode === 'claude' && 'shadow-sm'
-          )}
-        >
-          <Terminal className="w-4 h-4" />
-          <span>{formatMessage({ id: 'mcp.mode.claude' })}</span>
-        </Button>
-        <Button
-          variant={currentMode === 'codex' ? 'default' : 'ghost'}
-          size="sm"
-          onClick={() => onModeChange('codex')}
-          className={cn(
-            'flex-1 gap-2',
-            currentMode === 'codex' && 'shadow-sm'
-          )}
-        >
-          <Cpu className="w-4 h-4" />
-          <span>{formatMessage({ id: 'mcp.mode.codex' })}</span>
-        </Button>
-      </div>
-
-      {/* Codex Config Path Display */}
-      {currentMode === 'codex' && codexConfigPath && (
-        <div className="flex items-center gap-2 px-3 py-2 bg-muted/50 rounded-md border border-border">
-          <Badge variant="outline" className="text-xs">
-            {formatMessage({ id: 'mcp.codex.configPath' })}
-          </Badge>
-          <code className="text-xs text-muted-foreground font-mono truncate flex-1">
-            {codexConfigPath}
-          </code>
-        </div>
-      )}
+    <div className="inline-flex items-center rounded-full border border-border bg-muted/50 p-0.5">
+      <button
+        onClick={() => onModeChange('claude')}
+        className={cn(
+          'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium transition-all',
+          currentMode === 'claude'
+            ? 'bg-primary text-primary-foreground shadow-sm'
+            : 'text-muted-foreground hover:text-foreground'
+        )}
+      >
+        <Terminal className="w-3.5 h-3.5" />
+        {formatMessage({ id: 'mcp.mode.claude' })}
+      </button>
+      <button
+        onClick={() => onModeChange('codex')}
+        className={cn(
+          'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium transition-all',
+          currentMode === 'codex'
+            ? 'bg-primary text-primary-foreground shadow-sm'
+            : 'text-muted-foreground hover:text-foreground'
+        )}
+      >
+        <Cpu className="w-3.5 h-3.5" />
+        {formatMessage({ id: 'mcp.mode.codex' })}
+      </button>
     </div>
   );
 }

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) => {

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"

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 服务器"