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

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