claude-code-workflow 6.3.54 → 7.0.0

package/ccw/src/templates/dashboard-js/views/mcp-manager.js.backup

@@ -1,1729 +0,0 @@
-// MCP Manager View
-// Renders the MCP server management interface
-
-// CCW Tools available for MCP
-const CCW_MCP_TOOLS = [
-  // Core tools (always recommended)
-  { name: 'write_file', desc: 'Write/create files', core: true },
-  { name: 'edit_file', desc: 'Edit/replace content', core: true },
-  { name: 'codex_lens', desc: 'Code index & search', core: true },
-  { name: 'smart_search', desc: 'Quick regex/NL search', core: true },
-  // Optional tools
-  { name: 'session_manager', desc: 'Workflow sessions', core: false },
-  { name: 'generate_module_docs', desc: 'Generate docs', core: false },
-  { name: 'update_module_claude', desc: 'Update CLAUDE.md', core: false },
-  { name: 'cli_executor', desc: 'Gemini/Qwen/Codex CLI', core: false },
-];
-
-// Get currently enabled tools from installed config (Claude)
-function getCcwEnabledTools() {
-  const currentPath = projectPath; // Keep original format (forward slash)
-  const projectData = mcpAllProjects[currentPath] || {};
-  const ccwConfig = projectData.mcpServers?.['ccw-tools'];
-  if (ccwConfig?.env?.CCW_ENABLED_TOOLS) {
-    const val = ccwConfig.env.CCW_ENABLED_TOOLS;
-    if (val.toLowerCase() === 'all') return CCW_MCP_TOOLS.map(t => t.name);
-    return val.split(',').map(t => t.trim());
-  }
-  return CCW_MCP_TOOLS.filter(t => t.core).map(t => t.name);
-}
-
-// Get currently enabled tools from Codex config
-function getCcwEnabledToolsCodex() {
-  const ccwConfig = codexMcpServers?.['ccw-tools'];
-  if (ccwConfig?.env?.CCW_ENABLED_TOOLS) {
-    const val = ccwConfig.env.CCW_ENABLED_TOOLS;
-    if (val.toLowerCase() === 'all') return CCW_MCP_TOOLS.map(t => t.name);
-    return val.split(',').map(t => t.trim());
-  }
-  // Default to core tools if not installed
-  return CCW_MCP_TOOLS.filter(t => t.core).map(t => t.name);
-}
-
-async function renderMcpManager() {
-  const container = document.getElementById('mainContent');
-  if (!container) return;
-
-  // Hide stats grid and search for MCP view
-  const statsGrid = document.getElementById('statsGrid');
-  const searchInput = document.getElementById('searchInput');
-  if (statsGrid) statsGrid.style.display = 'none';
-  if (searchInput) searchInput.parentElement.style.display = 'none';
-
-  // Load MCP config if not already loaded
-  if (!mcpConfig) {
-    await loadMcpConfig();
-  }
-
-  // Load MCP templates
-  await loadMcpTemplates();
-
-  const currentPath = projectPath; // Keep original format (forward slash)
-  const projectData = mcpAllProjects[currentPath] || {};
-  const projectServers = projectData.mcpServers || {};
-  const disabledServers = projectData.disabledMcpServers || [];
-  const hasMcpJson = projectData.hasMcpJson || false;
-  const mcpJsonPath = projectData.mcpJsonPath || null;
-
-  // Get all available servers from all projects
-  const allAvailableServers = getAllAvailableMcpServers();
-
-  // Separate servers by category:
-  // 1. Project Available = Global + Project-specific (servers available to current project)
-  // 2. Global Management = Global servers that can be managed
-  // 3. Other Projects = Servers from other projects (can install to project or global)
-
-  const currentProjectServerNames = Object.keys(projectServers);
-  const globalServerNames = Object.keys(mcpUserServers || {});
-  const enterpriseServerNames = Object.keys(mcpEnterpriseServers || {});
-
-  // Project Available MCP: servers available to current project
-  // This includes: Enterprise (highest priority) + Global + Project-specific
-  const projectAvailableEntries = [];
-
-  // Add enterprise servers first (highest priority)
-  for (const [name, config] of Object.entries(mcpEnterpriseServers || {})) {
-    projectAvailableEntries.push({
-      name,
-      config,
-      source: 'enterprise',
-      canRemove: false,
-      canToggle: false
-    });
-  }
-
-  // Add global servers
-  for (const [name, config] of Object.entries(mcpUserServers || {})) {
-    if (!enterpriseServerNames.includes(name)) {
-      projectAvailableEntries.push({
-        name,
-        config,
-        source: 'global',
-        canRemove: false, // Can't remove from project view, must go to global management
-        canToggle: true,
-        isEnabled: !disabledServers.includes(name)
-      });
-    }
-  }
-
-  // Add project-specific servers
-  for (const [name, config] of Object.entries(projectServers)) {
-    if (!enterpriseServerNames.includes(name) && !globalServerNames.includes(name)) {
-      projectAvailableEntries.push({
-        name,
-        config,
-        source: 'project',
-        canRemove: true,
-        canToggle: true,
-        isEnabled: !disabledServers.includes(name)
-      });
-    }
-  }
-
-  // Global Management: user global servers (for management)
-  const globalManagementEntries = Object.entries(mcpUserServers || {});
-
-  // Enterprise servers (for display only, read-only)
-  const enterpriseServerEntries = Object.entries(mcpEnterpriseServers || {});
-
-  // Other Projects: servers from other projects (not in current project, not global)
-  const otherProjectServers = Object.entries(allAvailableServers)
-    .filter(([name, info]) => !currentProjectServerNames.includes(name) && !info.isGlobal);
-  // Check if CCW Tools is already installed
-  const isCcwToolsInstalled = currentProjectServerNames.includes("ccw-tools");
-  const enabledTools = getCcwEnabledTools();
-  const enabledToolsCodex = getCcwEnabledToolsCodex();
-
-  // Prepare Codex servers data
-  const codexServerEntries = Object.entries(codexMcpServers || {});
-  const codexConfigExists = codexMcpConfig?.exists || false;
-  const codexConfigPath = codexMcpConfig?.configPath || '~/.codex/config.toml';
-
-  container.innerHTML = `
-    <div class="mcp-manager">
-      <!-- CLI Mode Toggle -->
-      <div class="mcp-cli-toggle mb-6">
-        <div class="flex items-center justify-between bg-card border border-border rounded-lg p-4">
-          <div class="flex items-center gap-3">
-            <span class="text-sm font-medium text-foreground">${t('mcp.cliMode')}</span>
-            <div class="flex items-center bg-muted rounded-lg p-1">
-              <button class="cli-mode-btn px-4 py-2 text-sm font-medium rounded-md transition-all ${currentCliMode === 'claude' ? 'bg-primary text-primary-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}"
-                      onclick="setCliMode('claude')">
-                <i data-lucide="bot" class="w-4 h-4 inline mr-1.5"></i>
-                Claude
-              </button>
-              <button class="cli-mode-btn px-4 py-2 text-sm font-medium rounded-md transition-all ${currentCliMode === 'codex' ? 'shadow-sm' : 'text-muted-foreground hover:text-foreground'}"
-                      onclick="setCliMode('codex')"
-                      style="${currentCliMode === 'codex' ? 'background-color: #f97316; color: white;' : ''}">
-                <i data-lucide="code-2" class="w-4 h-4 inline mr-1.5"></i>
-                Codex
-              </button>
-            </div>
-          </div>
-          <div class="text-xs text-muted-foreground">
-            ${currentCliMode === 'claude'
-              ? `<span class="flex items-center gap-1"><i data-lucide="file-json" class="w-3 h-3"></i> ~/.claude.json</span>`
-              : `<span class="flex items-center gap-1"><i data-lucide="file-code" class="w-3 h-3"></i> ${codexConfigPath}</span>`
-            }
-          </div>
-        </div>
-      </div>
-
-      ${currentCliMode === 'codex' ? `
-      <!-- CCW Tools MCP Server Card (Codex mode) -->
-      <div class="mcp-section mb-6">
-        <div class="ccw-tools-card bg-gradient-to-br from-orange-500/10 to-orange-500/5 border-2 ${codexMcpServers && codexMcpServers['ccw-tools'] ? 'border-success' : 'border-orange-500/30'} rounded-lg p-6 hover:shadow-lg transition-all">
-          <div class="flex items-start justify-between gap-4">
-            <div class="flex items-start gap-4 flex-1">
-              <div class="shrink-0 w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center">
-                <i data-lucide="wrench" class="w-6 h-6 text-white"></i>
-              </div>
-              <div class="flex-1 min-w-0">
-                <div class="flex items-center gap-2 mb-2">
-                  <h3 class="text-lg font-bold text-foreground">CCW Tools MCP</h3>
-                  <span class="text-xs px-2 py-0.5 bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300 rounded-full">Codex</span>
-                  ${codexMcpServers && codexMcpServers['ccw-tools'] ? `
-                    <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-semibold rounded-full bg-success-light text-success">
-                      <i data-lucide="check" class="w-3 h-3"></i>
-                      ${enabledToolsCodex.length} tools
-                    </span>
-                  ` : `
-                    <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-semibold rounded-full bg-orange-500/20 text-orange-600 dark:text-orange-400">
-                      <i data-lucide="package" class="w-3 h-3"></i>
-                      ${t('mcp.available')}
-                    </span>
-                  `}
-                </div>
-                <p class="text-sm text-muted-foreground mb-3">${t('mcp.ccwToolsDesc')}</p>
-                <!-- Tool Selection Grid for Codex -->
-                <div class="grid grid-cols-3 sm:grid-cols-5 gap-2 mb-3">
-                  ${CCW_MCP_TOOLS.map(tool => `
-                    <label class="flex items-center gap-1.5 text-xs cursor-pointer hover:bg-muted/50 rounded px-1.5 py-1 transition-colors">
-                      <input type="checkbox" class="ccw-tool-checkbox-codex w-3 h-3"
-                             data-tool="${tool.name}"
-                             ${enabledToolsCodex.includes(tool.name) ? 'checked' : ''}>
-                      <span class="${tool.core ? 'font-medium' : 'text-muted-foreground'}">${tool.desc}</span>
-                    </label>
-                  `).join('')}
-                </div>
-                <div class="flex items-center gap-3 text-xs">
-                  <button class="text-orange-500 hover:underline" onclick="selectCcwToolsCodex('core')">Core only</button>
-                  <button class="text-orange-500 hover:underline" onclick="selectCcwToolsCodex('all')">All</button>
-                  <button class="text-muted-foreground hover:underline" onclick="selectCcwToolsCodex('none')">None</button>
-                </div>
-              </div>
-            </div>
-            <div class="shrink-0">
-              <button class="px-4 py-2 text-sm bg-orange-500 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1"
-                      onclick="installCcwToolsMcpToCodex()">
-                <i data-lucide="download" class="w-4 h-4"></i>
-                ${codexMcpServers && codexMcpServers['ccw-tools'] ? t('mcp.update') : t('mcp.install')}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Codex MCP Servers Section -->
-      <div class="mcp-section mb-6">
-        <div class="flex items-center justify-between mb-4">
-          <div class="flex items-center gap-3">
-            <div class="flex items-center gap-2">
-              <i data-lucide="code-2" class="w-5 h-5 text-orange-500"></i>
-              <h3 class="text-lg font-semibold text-foreground">${t('mcp.codex.globalServers')}</h3>
-            </div>
-            <button class="px-3 py-1.5 text-sm bg-orange-500 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1"
-                    onclick="openCodexMcpCreateModal()">
-              <span>+</span> ${t('mcp.codex.newServer')}
-            </button>
-            ${codexConfigExists ? `
-              <span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs bg-success/10 text-success rounded-md border border-success/20">
-                <i data-lucide="file-check" class="w-3.5 h-3.5"></i>
-                config.toml
-              </span>
-            ` : `
-              <span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs bg-muted text-muted-foreground rounded-md border border-border" title="Will create ~/.codex/config.toml">
-                <i data-lucide="file-plus" class="w-3.5 h-3.5"></i>
-                Will create config.toml
-              </span>
-            `}
-          </div>
-          <span class="text-sm text-muted-foreground">${codexServerEntries.length} ${t('mcp.serversAvailable')}</span>
-        </div>
-
-        <!-- Info about Codex MCP -->
-        <div class="bg-orange-50 dark:bg-orange-950/30 border border-orange-200 dark:border-orange-800 rounded-lg p-4 mb-4">
-          <div class="flex items-start gap-3">
-            <i data-lucide="info" class="w-5 h-5 text-orange-500 shrink-0 mt-0.5"></i>
-            <div class="text-sm">
-              <p class="text-orange-800 dark:text-orange-200 font-medium mb-1">${t('mcp.codex.infoTitle')}</p>
-              <p class="text-orange-700 dark:text-orange-300 text-xs">${t('mcp.codex.infoDesc')}</p>
-            </div>
-          </div>
-        </div>
-
-        ${codexServerEntries.length === 0 ? `
-          <div class="mcp-empty-state bg-card border border-border rounded-lg p-6 text-center">
-            <div class="text-muted-foreground mb-3"><i data-lucide="plug" class="w-10 h-10 mx-auto"></i></div>
-            <p class="text-muted-foreground">${t('mcp.codex.noServers')}</p>
-            <p class="text-sm text-muted-foreground mt-1">${t('mcp.codex.noServersHint')}</p>
-          </div>
-        ` : `
-          <div class="mcp-server-grid grid gap-3">
-            ${codexServerEntries.map(([serverName, serverConfig]) => {
-              return renderCodexServerCard(serverName, serverConfig);
-            }).join('')}
-          </div>
-        `}
-      </div>
-
-      <!-- Copy Claude Servers to Codex -->
-      ${Object.keys(mcpUserServers || {}).length > 0 ? `
-      <div class="mcp-section mb-6">
-        <div class="flex items-center justify-between mb-4">
-          <h3 class="text-lg font-semibold text-foreground flex items-center gap-2">
-            <i data-lucide="copy" class="w-5 h-5"></i>
-            ${t('mcp.codex.copyFromClaude')}
-          </h3>
-          <span class="text-sm text-muted-foreground">${Object.keys(mcpUserServers || {}).length} ${t('mcp.serversAvailable')}</span>
-        </div>
-        <div class="mcp-server-grid grid gap-3">
-          ${Object.entries(mcpUserServers || {}).map(([serverName, serverConfig]) => {
-            const alreadyInCodex = codexMcpServers && codexMcpServers[serverName];
-            return `
-              <div class="mcp-server-card bg-card border ${alreadyInCodex ? 'border-success/50' : 'border-border'} border-dashed rounded-lg p-4 hover:shadow-md transition-all">
-                <div class="flex items-start justify-between mb-3">
-                  <div class="flex items-center gap-2">
-                    <i data-lucide="bot" class="w-5 h-5 text-primary"></i>
-                    <h4 class="font-semibold text-foreground">${escapeHtml(serverName)}</h4>
-                    <span class="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-full">Claude</span>
-                    ${alreadyInCodex ? `<span class="text-xs px-2 py-0.5 bg-success/10 text-success rounded-full">${t('mcp.codex.alreadyAdded')}</span>` : ''}
-                  </div>
-                  ${!alreadyInCodex ? `
-                    <button class="px-3 py-1 text-xs bg-orange-500 text-white rounded hover:opacity-90 transition-opacity"
-                            onclick="copyClaudeServerToCodex('${escapeHtml(serverName)}', ${JSON.stringify(serverConfig).replace(/'/g, "&#39;")})"
-                            title="${t('mcp.codex.copyToCodex')}">
-                      <i data-lucide="arrow-right" class="w-3.5 h-3.5 inline"></i> Codex
-                    </button>
-                  ` : ''}
-                </div>
-                <div class="mcp-server-details text-sm space-y-1">
-                  <div class="flex items-center gap-2 text-muted-foreground">
-                    <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">${t('mcp.cmd')}</span>
-                    <span class="truncate" title="${escapeHtml(serverConfig.command || 'N/A')}">${escapeHtml(serverConfig.command || 'N/A')}</span>
-                  </div>
-                </div>
-              </div>
-            `;
-          }).join('')}
-        </div>
-      </div>
-      ` : ''}
-
-      <!-- Available MCP Servers from Other Projects (Codex mode) -->
-      <div class="mcp-section">
-        <div class="flex items-center justify-between mb-4">
-          <h3 class="text-lg font-semibold text-foreground">${t('mcp.availableOther')}</h3>
-          <span class="text-sm text-muted-foreground">${otherProjectServers.length} ${t('mcp.serversAvailable')}</span>
-        </div>
-
-        ${otherProjectServers.length === 0 ? `
-          <div class="mcp-empty-state bg-card border border-border rounded-lg p-6 text-center">
-            <p class="text-muted-foreground">${t('empty.noAdditionalMcp')}</p>
-          </div>
-        ` : `
-          <div class="mcp-server-grid grid gap-3">
-            ${otherProjectServers.map(([serverName, serverInfo]) => {
-              return renderAvailableServerCardForCodex(serverName, serverInfo);
-            }).join('')}
-          </div>
-        `}
-      </div>
-      ` : `
-      <!-- CCW Tools MCP Server Card -->
-      <div class="mcp-section mb-6">
-        <div class="ccw-tools-card bg-gradient-to-br from-orange-500/10 to-orange-500/5 border-2 ${isCcwToolsInstalled ? 'border-success' : 'border-orange-500/30'} rounded-lg p-6 hover:shadow-lg transition-all">
-          <div class="flex items-start justify-between gap-4">
-            <div class="flex items-start gap-4 flex-1">
-              <div class="shrink-0 w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center">
-                <i data-lucide="wrench" class="w-6 h-6 text-white"></i>
-              </div>
-              <div class="flex-1 min-w-0">
-                <div class="flex items-center gap-2 mb-2">
-                  <h3 class="text-lg font-bold text-foreground">CCW Tools MCP</h3>
-                  ${isCcwToolsInstalled ? `
-                    <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-semibold rounded-full bg-success-light text-success">
-                      <i data-lucide="check" class="w-3 h-3"></i>
-                      ${enabledTools.length} tools
-                    </span>
-                  ` : `
-                    <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-semibold rounded-full bg-orange-500/20 text-orange-600 dark:text-orange-400">
-                      <i data-lucide="package" class="w-3 h-3"></i>
-                      Available
-                    </span>
-                  `}
-                </div>
-                <!-- Tool Selection Grid -->
-                <div class="grid grid-cols-3 sm:grid-cols-5 gap-2 mb-3">
-                  ${CCW_MCP_TOOLS.map(tool => `
-                    <label class="flex items-center gap-1.5 text-xs cursor-pointer hover:bg-muted/50 rounded px-1.5 py-1 transition-colors">
-                      <input type="checkbox" class="ccw-tool-checkbox w-3 h-3"
-                             data-tool="${tool.name}"
-                             ${enabledTools.includes(tool.name) ? 'checked' : ''}>
-                      <span class="${tool.core ? 'font-medium' : 'text-muted-foreground'}">${tool.desc}</span>
-                    </label>
-                  `).join('')}
-                </div>
-                <div class="flex items-center gap-3 text-xs">
-                  <button class="text-orange-500 hover:underline" onclick="selectCcwTools('core')">Core only</button>
-                  <button class="text-orange-500 hover:underline" onclick="selectCcwTools('all')">All</button>
-                  <button class="text-muted-foreground hover:underline" onclick="selectCcwTools('none')">None</button>
-                </div>
-              </div>
-            </div>
-            <div class="shrink-0 flex gap-2">
-              ${isCcwToolsInstalled ? `
-                <button class="px-4 py-2 text-sm bg-orange-500 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1"
-                        onclick="updateCcwToolsMcp('workspace')"
-                        title="${t('mcp.updateInWorkspace')}">
-                  <i data-lucide="folder" class="w-4 h-4"></i>
-                  ${t('mcp.updateInWorkspace')}
-                </button>
-                <button class="px-4 py-2 text-sm bg-success text-success-foreground rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1"
-                        onclick="updateCcwToolsMcp('global')"
-                        title="${t('mcp.updateInGlobal')}">
-                  <i data-lucide="globe" class="w-4 h-4"></i>
-                  ${t('mcp.updateInGlobal')}
-                </button>
-              ` : `
-                <button class="px-4 py-2 text-sm bg-orange-500 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1"
-                        onclick="installCcwToolsMcp('workspace')"
-                        title="${t('mcp.installToWorkspace')}">
-                  <i data-lucide="folder" class="w-4 h-4"></i>
-                  ${t('mcp.installToWorkspace')}
-                </button>
-                <button class="px-4 py-2 text-sm bg-success text-success-foreground rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1"
-                        onclick="installCcwToolsMcp('global')"
-                        title="${t('mcp.installToGlobal')}">
-                  <i data-lucide="globe" class="w-4 h-4"></i>
-                  ${t('mcp.installToGlobal')}
-                </button>
-              `}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Project Available MCP Servers -->
-      <div class="mcp-section mb-6">
-        <div class="flex items-center justify-between mb-4">
-          <div class="flex items-center gap-3">
-            <h3 class="text-lg font-semibold text-foreground">${t('mcp.projectAvailable')}</h3>
-            <button class="px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1"
-                    onclick="openMcpCreateModal('project')">
-              <span>+</span> ${t('mcp.newProjectServer')}
-            </button>
-            ${hasMcpJson ? `
-              <span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs bg-success/10 text-success rounded-md border border-success/20">
-                <i data-lucide="file-check" class="w-3.5 h-3.5"></i>
-                .mcp.json
-              </span>
-            ` : `
-              <span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs bg-muted text-muted-foreground rounded-md border border-border" title="New servers will create .mcp.json">
-                <i data-lucide="file-plus" class="w-3.5 h-3.5"></i>
-                Will use .mcp.json
-              </span>
-            `}
-          </div>
-          <span class="text-sm text-muted-foreground">${projectAvailableEntries.length} ${t('mcp.serversAvailable')}</span>
-        </div>
-
-        ${projectAvailableEntries.length === 0 ? `
-          <div class="mcp-empty-state bg-card border border-border rounded-lg p-6 text-center">
-            <div class="text-muted-foreground mb-3"><i data-lucide="plug" class="w-10 h-10 mx-auto"></i></div>
-            <p class="text-muted-foreground">${t('empty.noMcpServers')}</p>
-            <p class="text-sm text-muted-foreground mt-1">${t('empty.addMcpServersHint')}</p>
-          </div>
-        ` : `
-          <div class="mcp-server-grid grid gap-3">
-            ${projectAvailableEntries.map(entry => {
-              return renderProjectAvailableServerCard(entry);
-            }).join('')}
-          </div>
-        `}
-      </div>
-
-      <!-- Global Available MCP Servers -->
-      <div class="mcp-section mb-6">
-        <div class="flex items-center justify-between mb-4">
-          <div class="flex items-center gap-3">
-            <div class="flex items-center gap-2">
-              <i data-lucide="globe" class="w-5 h-5 text-success"></i>
-              <h3 class="text-lg font-semibold text-foreground">${t('mcp.globalAvailable')}</h3>
-            </div>
-            <button class="px-3 py-1.5 text-sm bg-success text-success-foreground rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1"
-                    onclick="openMcpCreateModal('global')">
-              <span>+</span> ${t('mcp.newGlobalServer')}
-            </button>
-          </div>
-          <span class="text-sm text-muted-foreground">${globalManagementEntries.length} ${t('mcp.globalServersFrom')}</span>
-        </div>
-
-        ${globalManagementEntries.length === 0 ? `
-          <div class="mcp-empty-state bg-card border border-border rounded-lg p-6 text-center">
-            <div class="text-muted-foreground mb-3"><i data-lucide="globe" class="w-10 h-10 mx-auto"></i></div>
-            <p class="text-muted-foreground">${t('empty.noGlobalMcpServers')}</p>
-            <p class="text-sm text-muted-foreground mt-1">${t('empty.globalServersHint')}</p>
-          </div>
-        ` : `
-          <div class="mcp-server-grid grid gap-3">
-            ${globalManagementEntries.map(([serverName, serverConfig]) => {
-              return renderGlobalManagementCard(serverName, serverConfig);
-            }).join('')}
-          </div>
-        `}
-      </div>
-
-      <!-- Available MCP Servers from Other Projects -->
-      <div class="mcp-section">
-        <div class="flex items-center justify-between mb-4">
-          <h3 class="text-lg font-semibold text-foreground">${t('mcp.availableOther')}</h3>
-          <span class="text-sm text-muted-foreground">${otherProjectServers.length} ${t('mcp.serversAvailable')}</span>
-        </div>
-
-        ${otherProjectServers.length === 0 ? `
-          <div class="mcp-empty-state bg-card border border-border rounded-lg p-6 text-center">
-            <p class="text-muted-foreground">${t('empty.noAdditionalMcp')}</p>
-          </div>
-        ` : `
-          <div class="mcp-server-grid grid gap-3">
-            ${otherProjectServers.map(([serverName, serverInfo]) => {
-              return renderAvailableServerCard(serverName, serverInfo);
-            }).join('')}
-          </div>
-        `}
-      </div>
-
-      <!-- MCP Templates Section -->
-      ${mcpTemplates.length > 0 ? `
-      <div class="mcp-section mt-6">
-        <div class="flex items-center justify-between mb-4">
-          <h3 class="text-lg font-semibold text-foreground flex items-center gap-2">
-            <i data-lucide="layout-template" class="w-5 h-5"></i>
-            ${t('mcp.templates')}
-          </h3>
-          <span class="text-sm text-muted-foreground">${mcpTemplates.length} ${t('mcp.savedTemplates')}</span>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          ${mcpTemplates.map(template => `
-            <div class="mcp-template-card bg-card border border-border rounded-lg p-4 hover:shadow-md transition-all">
-              <div class="flex items-start justify-between mb-3">
-                <div class="flex-1 min-w-0">
-                  <h4 class="font-semibold text-foreground truncate flex items-center gap-2">
-                    <i data-lucide="layout-template" class="w-4 h-4 shrink-0"></i>
-                    <span class="truncate">${escapeHtml(template.name)}</span>
-                  </h4>
-                  ${template.description ? `
-                    <p class="text-xs text-muted-foreground mt-1 line-clamp-2">${escapeHtml(template.description)}</p>
-                  ` : ''}
-                </div>
-              </div>
-
-              <div class="mcp-server-details text-sm space-y-1 mb-3">
-                <div class="flex items-center gap-2 text-muted-foreground">
-                  <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">${t('mcp.cmd')}</span>
-                  <span class="truncate text-xs" title="${escapeHtml(template.serverConfig.command)}">${escapeHtml(template.serverConfig.command)}</span>
-                </div>
-                ${template.serverConfig.args && template.serverConfig.args.length > 0 ? `
-                  <div class="flex items-start gap-2 text-muted-foreground">
-                    <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">${t('mcp.args')}</span>
-                    <span class="text-xs font-mono truncate" title="${escapeHtml(template.serverConfig.args.join(' '))}">${escapeHtml(template.serverConfig.args.slice(0, 2).join(' '))}${template.serverConfig.args.length > 2 ? '...' : ''}</span>
-                  </div>
-                ` : ''}
-              </div>
-
-              <div class="mt-3 pt-3 border-t border-border flex items-center justify-between gap-2">
-                <div class="flex items-center gap-2">
-                  <button class="text-xs text-primary hover:text-primary/80 transition-colors flex items-center gap-1"
-                          data-template-name="${escapeHtml(template.name)}"
-                          data-scope="project"
-                          data-action="install-template"
-                          title="${t('mcp.installToProject')}">
-                    <i data-lucide="download" class="w-3 h-3"></i>
-                    ${t('mcp.toProject')}
-                  </button>
-                  <button class="text-xs text-success hover:text-success/80 transition-colors flex items-center gap-1"
-                          data-template-name="${escapeHtml(template.name)}"
-                          data-scope="global"
-                          data-action="install-template"
-                          title="${t('mcp.installToGlobal')}">
-                    <i data-lucide="globe" class="w-3 h-3"></i>
-                    ${t('mcp.toGlobal')}
-                  </button>
-                </div>
-                <button class="text-xs text-destructive hover:text-destructive/80 transition-colors"
-                        data-template-name="${escapeHtml(template.name)}"
-                        data-action="delete-template"
-                        title="${t('mcp.deleteTemplate')}">
-                  <i data-lucide="trash-2" class="w-3 h-3"></i>
-                </button>
-              </div>
-            </div>
-          `).join('')}
-        </div>
-      </div>
-      ` : ''}
-
-      <!-- Copy Codex Servers to Claude (Claude mode only) -->
-      ${currentCliMode === 'claude' && Object.keys(codexMcpServers || {}).length > 0 ? `
-      <div class="mcp-section mb-6">
-        <div class="flex items-center justify-between mb-4">
-          <h3 class="text-lg font-semibold text-foreground flex items-center gap-2">
-            <i data-lucide="copy" class="w-5 h-5"></i>
-            ${t('mcp.claude.copyFromCodex')}
-          </h3>
-          <span class="text-sm text-muted-foreground">${Object.keys(codexMcpServers || {}).length} ${t('mcp.serversAvailable')}</span>
-        </div>
-        <div class="mcp-server-grid grid gap-3">
-          ${Object.entries(codexMcpServers || {}).map(([serverName, serverConfig]) => {
-            const alreadyInClaude = mcpUserServers && mcpUserServers[serverName];
-            const isStdio = !!serverConfig.command;
-            const isHttp = !!serverConfig.url;
-            return `
-              <div class="mcp-server-card bg-card border ${alreadyInClaude ? 'border-success/50' : 'border-orange-200 dark:border-orange-800'} border-dashed rounded-lg p-4 hover:shadow-md transition-all">
-                <div class="flex items-start justify-between mb-3">
-                  <div class="flex items-center gap-2 flex-wrap">
-                    <i data-lucide="code-2" class="w-5 h-5 text-orange-500"></i>
-                    <h4 class="font-semibold text-foreground">${escapeHtml(serverName)}</h4>
-                    <span class="text-xs px-2 py-0.5 bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300 rounded-full">Codex</span>
-                    ${isHttp
-                      ? '<span class="text-xs px-2 py-0.5 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 rounded-full">HTTP</span>'
-                      : '<span class="text-xs px-2 py-0.5 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 rounded-full">STDIO</span>'
-                    }
-                    ${alreadyInClaude ? '<span class="text-xs px-2 py-0.5 bg-success/10 text-success rounded-full">' + t('mcp.claude.alreadyAdded') + '</span>' : ''}
-                  </div>
-                  ${!alreadyInClaude ? `
-                    <button class="px-3 py-1 text-xs bg-primary text-primary-foreground rounded hover:opacity-90 transition-opacity"
-                            onclick="copyCodexServerToClaude('${escapeHtml(serverName)}', ${JSON.stringify(serverConfig).replace(/'/g, "&#39;")})"
-                            title="${t('mcp.claude.copyToClaude')}">
-                      <i data-lucide="arrow-right" class="w-3.5 h-3.5 inline"></i> Claude
-                    </button>
-                  ` : ''}
-                </div>
-                <div class="mcp-server-details text-sm space-y-1">
-                  <div class="flex items-center gap-2 text-muted-foreground">
-                    <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">${isHttp ? t('mcp.url') : t('mcp.cmd')}</span>
-                    <span class="truncate" title="${escapeHtml(serverConfig.command || serverConfig.url || 'N/A')}">${escapeHtml(serverConfig.command || serverConfig.url || 'N/A')}</span>
-                  </div>
-                </div>
-              </div>
-            `;
-          }).join('')}
-        </div>
-      </div>
-      ` : ''}
-
-      <!-- All Projects MCP Overview Table (Claude mode only) -->
-      ${currentCliMode === 'claude' ? `
-      <div class="mcp-section mt-6">
-        <div class="flex items-center justify-between mb-4">
-          <h3 class="text-lg font-semibold text-foreground">${t('mcp.allProjects')}</h3>
-          <span class="text-sm text-muted-foreground">${Object.keys(mcpAllProjects).length} ${t('mcp.projects')}</span>
-        </div>
-
-        <div class="mcp-projects-table bg-card border border-border rounded-lg overflow-hidden">
-          <table class="w-full">
-            <thead class="bg-muted/50">
-              <tr>
-                <th class="text-left px-4 py-3 text-sm font-semibold text-foreground border-b border-border">${t('mcp.project')}</th>
-                <th class="text-left px-4 py-3 text-sm font-semibold text-foreground border-b border-border">${t('mcp.servers')}</th>
-                <th class="text-center px-4 py-3 text-sm font-semibold text-foreground border-b border-border w-24">${t('mcp.status')}</th>
-              </tr>
-            </thead>
-            <tbody>
-              ${Object.entries(mcpAllProjects).map(([path, config]) => {
-                const servers = config.mcpServers || {};
-                const projectDisabled = config.disabledMcpServers || [];
-                const serverNames = Object.keys(servers);
-                const isCurrentProject = path === currentPath;
-                const enabledCount = serverNames.filter(s => !projectDisabled.includes(s)).length;
-                const projectHasMcpJson = config.hasMcpJson || false;
-
-                return `
-                  <tr class="border-b border-border last:border-b-0 ${isCurrentProject ? 'bg-primary/5' : 'hover:bg-hover/50'}">
-                    <td class="px-4 py-3">
-                      <div class="flex items-center gap-2 min-w-0">
-                        <span class="shrink-0">${isCurrentProject ? '<i data-lucide="map-pin" class="w-4 h-4 text-primary"></i>' : '<i data-lucide="folder" class="w-4 h-4"></i>'}</span>
-                        <div class="min-w-0">
-                          <div class="font-medium text-foreground truncate text-sm flex items-center gap-2" title="${escapeHtml(path)}">
-                            <span class="truncate">${escapeHtml(path.split('\\').pop() || path)}</span>
-                            ${isCurrentProject ? `<span class="text-xs text-primary font-medium shrink-0">${t('mcp.current')}</span>` : ''}
-                            ${projectHasMcpJson ? `<span class="shrink-0 inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-success/10 text-success rounded" title=".mcp.json detected"><i data-lucide="file-check" class="w-3 h-3"></i></span>` : ''}
-                          </div>
-                          <div class="text-xs text-muted-foreground truncate">${escapeHtml(path)}</div>
-                        </div>
-                      </div>
-                    </td>
-                    <td class="px-4 py-3">
-                      <div class="flex flex-wrap gap-1.5">
-                        ${serverNames.length === 0
-                          ? `<span class="text-xs text-muted-foreground italic">${t('mcp.noMcpServers')}</span>`
-                          : serverNames.map(serverName => {
-                              const isEnabled = !projectDisabled.includes(serverName);
-                              return `
-                                <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full ${isEnabled ? 'bg-success-light text-success' : 'bg-hover text-muted-foreground'}">
-                                  <span class="w-1.5 h-1.5 rounded-full ${isEnabled ? 'bg-success' : 'bg-muted-foreground'}"></span>
-                                  ${escapeHtml(serverName)}
-                                </span>
-                              `;
-                            }).join('')
-                        }
-                      </div>
-                    </td>
-                    <td class="px-4 py-3 text-center">
-                      <span class="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full ${serverNames.length > 0 ? 'bg-success-light text-success' : 'bg-hover text-muted-foreground'}">
-                        ${enabledCount}/${serverNames.length}
-                      </span>
-                    </td>
-                  </tr>
-                `;
-              }).join('')}
-            </tbody>
-          </table>
-        </div>
-      </div>
-      ` : ''}
-      `}
-
-      <!-- MCP Server Details Modal -->
-      <div id="mcpDetailsModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
-        <div class="bg-card border border-border rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-hidden flex flex-col">
-          <!-- Modal Header -->
-          <div class="flex items-center justify-between px-6 py-4 border-b border-border">
-            <h2 class="text-lg font-semibold text-foreground">${t('mcp.detailsModal.title')}</h2>
-            <button id="mcpDetailsModalClose" class="text-muted-foreground hover:text-foreground transition-colors">
-              <i data-lucide="x" class="w-5 h-5"></i>
-            </button>
-          </div>
-
-          <!-- Modal Body -->
-          <div id="mcpDetailsModalBody" class="px-6 py-4 overflow-y-auto flex-1">
-            <!-- Content will be dynamically filled -->
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
-
-  // Attach event listeners for toggle switches
-  attachMcpEventListeners();
-  
-  // Initialize Lucide icons
-  if (typeof lucide !== 'undefined') lucide.createIcons();
-}
-
-// Render card for Project Available MCP (current project can use)
-function renderProjectAvailableServerCard(entry) {
-  const { name, config, source, canRemove, canToggle, isEnabled } = entry;
-  const command = config.command || 'N/A';
-  const args = config.args || [];
-  const hasEnv = config.env && Object.keys(config.env).length > 0;
-
-  // Source badge
-  let sourceBadge = '';
-  if (source === 'enterprise') {
-    sourceBadge = `<span class="text-xs px-2 py-0.5 bg-warning/20 text-warning rounded-full">${t('mcp.sourceEnterprise')}</span>`;
-  } else if (source === 'global') {
-    sourceBadge = `<span class="text-xs px-2 py-0.5 bg-success/10 text-success rounded-full">${t('mcp.sourceGlobal')}</span>`;
-  } else if (source === 'project') {
-    sourceBadge = `<span class="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-full">${t('mcp.sourceProject')}</span>`;
-  }
-
-  return `
-    <div class="mcp-server-card bg-card border border-border rounded-lg p-4 hover:shadow-md transition-all cursor-pointer ${canToggle && !isEnabled ? 'opacity-60' : ''}"
-         data-server-name="${escapeHtml(name)}"
-         data-server-config="${escapeHtml(JSON.stringify(config))}"
-         data-server-source="${source}"
-         data-action="view-details"
-         title="${t('mcp.clickToViewDetails')}">
-      <div class="flex items-start justify-between mb-3">
-        <div class="flex items-center gap-2">
-          <span>${canToggle && isEnabled ? '<i data-lucide="check-circle" class="w-5 h-5 text-success"></i>' : '<i data-lucide="circle" class="w-5 h-5 text-muted-foreground"></i>'}</span>
-          <h4 class="font-semibold text-foreground">${escapeHtml(name)}</h4>
-          ${sourceBadge}
-        </div>
-        ${canToggle ? `
-          <label class="mcp-toggle relative inline-flex items-center cursor-pointer" onclick="event.stopPropagation()">
-            <input type="checkbox" class="sr-only peer"
-                   ${isEnabled ? 'checked' : ''}
-                   data-server-name="${escapeHtml(name)}"
-                   data-action="toggle">
-            <div class="w-9 h-5 bg-hover peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-success"></div>
-          </label>
-        ` : ''}
-      </div>
-
-      <div class="mcp-server-details text-sm space-y-1">
-        <div class="flex items-center gap-2 text-muted-foreground">
-          <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">${t('mcp.cmd')}</span>
-          <span class="truncate" title="${escapeHtml(command)}">${escapeHtml(command)}</span>
-        </div>
-        ${args.length > 0 ? `
-          <div class="flex items-start gap-2 text-muted-foreground">
-            <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">${t('mcp.args')}</span>
-            <span class="text-xs font-mono truncate" title="${escapeHtml(args.join(' '))}">${escapeHtml(args.slice(0, 3).join(' '))}${args.length > 3 ? '...' : ''}</span>
-          </div>
-        ` : ''}
-        ${hasEnv ? `
-          <div class="flex items-center gap-2 text-muted-foreground">
-            <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">${t('mcp.env')}</span>
-            <span class="text-xs">${Object.keys(config.env).length} ${t('mcp.variables')}</span>
-          </div>
-        ` : ''}
-      </div>
-
-      <div class="mt-3 pt-3 border-t border-border flex items-center justify-between gap-2" onclick="event.stopPropagation()">
-        <div class="flex items-center gap-2">
-          <button class="text-xs text-success hover:text-success/80 transition-colors flex items-center gap-1"
-                  data-server-name="${escapeHtml(name)}"
-                  data-server-config="${escapeHtml(JSON.stringify(config))}"
-                  data-action="save-as-template"
-                  title="${t('mcp.saveAsTemplate')}">
-            <i data-lucide="save" class="w-3 h-3"></i>
-            ${t('mcp.saveAsTemplate')}
-          </button>
-        </div>
-        ${canRemove ? `
-          <button class="text-xs text-destructive hover:text-destructive/80 transition-colors"
-                  data-server-name="${escapeHtml(name)}"
-                  data-action="remove">
-            ${t('mcp.removeFromProject')}
-          </button>
-        ` : ''}
-      </div>
-    </div>
-  `;
-}
-
-// Render card for Global Management (manage global servers)
-function renderGlobalManagementCard(serverName, serverConfig) {
-  const command = serverConfig.command || serverConfig.url || 'N/A';
-  const args = serverConfig.args || [];
-  const hasEnv = serverConfig.env && Object.keys(serverConfig.env).length > 0;
-  const serverType = serverConfig.type || 'stdio';
-
-  return `
-    <div class="mcp-server-card mcp-server-global bg-card border border-success/30 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer"
-         data-server-name="${escapeHtml(serverName)}"
-         data-server-config="${escapeHtml(JSON.stringify(serverConfig))}"
-         data-server-source="global"
-         data-action="view-details"
-         title="${t('mcp.clickToEdit')}">
-      <div class="flex items-start justify-between mb-3">
-        <div class="flex items-center gap-2">
-          <i data-lucide="globe" class="w-5 h-5 text-success"></i>
-          <h4 class="font-semibold text-foreground">${escapeHtml(serverName)}</h4>
-        </div>
-      </div>
-
-      <div class="mcp-server-details text-sm space-y-1">
-        <div class="flex items-center gap-2 text-muted-foreground">
-          <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">${serverType === 'stdio' ? t('mcp.cmd') : t('mcp.url')}</span>
-          <span class="truncate" title="${escapeHtml(command)}">${escapeHtml(command)}</span>
-        </div>
-        ${args.length > 0 ? `
-          <div class="flex items-start gap-2 text-muted-foreground">
-            <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">${t('mcp.args')}</span>
-            <span class="text-xs font-mono truncate" title="${escapeHtml(args.join(' '))}">${escapeHtml(args.slice(0, 3).join(' '))}${args.length > 3 ? '...' : ''}</span>
-          </div>
-        ` : ''}
-        ${hasEnv ? `
-          <div class="flex items-center gap-2 text-muted-foreground">
-            <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">${t('mcp.env')}</span>
-            <span class="text-xs">${Object.keys(serverConfig.env).length} ${t('mcp.variables')}</span>
-          </div>
-        ` : ''}
-        <div class="flex items-center gap-2 text-muted-foreground mt-1">
-          <span class="text-xs italic">${t('mcp.availableToAll')}</span>
-        </div>
-      </div>
-
-      <div class="mt-3 pt-3 border-t border-border flex items-center justify-end" onclick="event.stopPropagation()">
-        <button class="text-xs text-destructive hover:text-destructive/80 transition-colors"
-                data-server-name="${escapeHtml(serverName)}"
-                data-action="remove-global">
-          ${t('mcp.removeGlobal')}
-        </button>
-      </div>
-    </div>
-  `;
-}
-
-function renderAvailableServerCard(serverName, serverInfo) {
-  const serverConfig = serverInfo.config;
-  const usedIn = serverInfo.usedIn || [];
-  const command = serverConfig.command || 'N/A';
-  const args = serverConfig.args || [];
-
-  // Get the actual name to use when adding (original name if different from display key)
-  const originalName = serverInfo.originalName || serverName;
-  const hasVariant = serverInfo.originalName && serverInfo.originalName !== serverName;
-
-  // Get source project info
-  const sourceProject = serverInfo.sourceProject;
-  const sourceProjectName = sourceProject ? (sourceProject.split('\\').pop() || sourceProject.split('/').pop()) : null;
-
-  // Generate args preview
-  const argsPreview = args.length > 0 ? args.slice(0, 3).join(' ') + (args.length > 3 ? '...' : '') : '';
-
-  return `
-    <div class="mcp-server-card mcp-server-available bg-card border border-border border-dashed rounded-lg p-4 hover:shadow-md hover:border-solid transition-all">
-      <div class="flex items-start justify-between mb-3">
-        <div class="flex items-center gap-2 flex-wrap">
-          <span><i data-lucide="circle-dashed" class="w-5 h-5 text-muted-foreground"></i></span>
-          <h4 class="font-semibold text-foreground">${escapeHtml(originalName)}</h4>
-          ${hasVariant ? `
-            <span class="text-xs px-2 py-0.5 bg-warning/20 text-warning rounded-full" title="Different config from: ${escapeHtml(sourceProject || '')}">
-              ${escapeHtml(sourceProjectName || 'variant')}
-            </span>
-          ` : ''}
-        </div>
-        <div class="flex gap-2">
-          <button class="px-3 py-1 text-xs bg-primary text-primary-foreground rounded hover:opacity-90 transition-opacity"
-                  data-server-name="${escapeHtml(originalName)}"
-                  data-server-key="${escapeHtml(serverName)}"
-                  data-server-config='${JSON.stringify(serverConfig).replace(/'/g, "&#39;")}'
-                  data-scope="project"
-                  data-action="add-from-other"
-                  title="${t('mcp.installToProject')}">
-            <i data-lucide="folder-plus" class="w-3.5 h-3.5 inline"></i>
-          </button>
-          <button class="px-3 py-1 text-xs bg-success text-success-foreground rounded hover:opacity-90 transition-opacity"
-                  data-server-name="${escapeHtml(originalName)}"
-                  data-server-key="${escapeHtml(serverName)}"
-                  data-server-config='${JSON.stringify(serverConfig).replace(/'/g, "&#39;")}'
-                  data-scope="global"
-                  data-action="add-from-other"
-                  title="${t('mcp.installToGlobal')}">
-            <i data-lucide="globe" class="w-3.5 h-3.5 inline"></i>
-          </button>
-        </div>
-      </div>
-
-      <div class="mcp-server-details text-sm space-y-1">
-        <div class="flex items-center gap-2 text-muted-foreground">
-          <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">${t('mcp.cmd')}</span>
-          <span class="truncate" title="${escapeHtml(command)}">${escapeHtml(command)}</span>
-        </div>
-        ${argsPreview ? `
-          <div class="flex items-start gap-2 text-muted-foreground">
-            <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">${t('mcp.args')}</span>
-            <span class="text-xs font-mono truncate" title="${escapeHtml(args.join(' '))}">${escapeHtml(argsPreview)}</span>
-          </div>
-        ` : ''}
-        <div class="flex items-center gap-2 text-muted-foreground">
-          <span class="text-xs">${t('mcp.usedInCount').replace('{count}', usedIn.length).replace('{s}', usedIn.length !== 1 ? 's' : '')}</span>
-          ${sourceProjectName ? `<span class="text-xs text-muted-foreground/70">• ${t('mcp.from')} ${escapeHtml(sourceProjectName)}</span>` : ''}
-        </div>
-      </div>
-
-      <div class="mt-3 pt-3 border-t border-border flex items-center gap-2">
-        <button class="text-xs text-primary hover:text-primary/80 transition-colors flex items-center gap-1"
-                data-server-name="${escapeHtml(originalName)}"
-                data-server-config="${escapeHtml(JSON.stringify(serverConfig))}"
-                data-action="install-to-project"
-                title="${t('mcp.installToProject')}">
-          <i data-lucide="download" class="w-3 h-3"></i>
-          ${t('mcp.installToProject')}
-        </button>
-        <button class="text-xs text-success hover:text-success/80 transition-colors flex items-center gap-1"
-                data-server-name="${escapeHtml(originalName)}"
-                data-server-config="${escapeHtml(JSON.stringify(serverConfig))}"
-                data-action="install-to-global"
-                title="${t('mcp.installToGlobal')}">
-          <i data-lucide="globe" class="w-3 h-3"></i>
-          ${t('mcp.installToGlobal')}
-        </button>
-      </div>
-    </div>
-  `;
-}
-
-// Render available server card for Codex mode (with Claude badge and copy to Codex button)
-function renderAvailableServerCardForCodex(serverName, serverInfo) {
-  const serverConfig = serverInfo.config;
-  const usedIn = serverInfo.usedIn || [];
-  const command = serverConfig.command || serverConfig.url || 'N/A';
-  const args = serverConfig.args || [];
-
-  // Get the actual name to use when adding
-  const originalName = serverInfo.originalName || serverName;
-  const hasVariant = serverInfo.originalName && serverInfo.originalName !== serverName;
-
-  // Get source project info
-  const sourceProject = serverInfo.sourceProject;
-  const sourceProjectName = sourceProject ? (sourceProject.split('\\').pop() || sourceProject.split('/').pop()) : null;
-
-  // Generate args preview
-  const argsPreview = args.length > 0 ? args.slice(0, 3).join(' ') + (args.length > 3 ? '...' : '') : '';
-
-  // Check if already in Codex
-  const alreadyInCodex = codexMcpServers && codexMcpServers[originalName];
-
-  return `
-    <div class="mcp-server-card mcp-server-available bg-card border ${alreadyInCodex ? 'border-success/50' : 'border-border'} border-dashed rounded-lg p-4 hover:shadow-md hover:border-solid transition-all">
-      <div class="flex items-start justify-between mb-3">
-        <div class="flex items-center gap-2 flex-wrap">
-          <span><i data-lucide="circle-dashed" class="w-5 h-5 text-muted-foreground"></i></span>
-          <h4 class="font-semibold text-foreground">${escapeHtml(originalName)}</h4>
-          <span class="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-full">Claude</span>
-          ${hasVariant ? `
-            <span class="text-xs px-2 py-0.5 bg-warning/20 text-warning rounded-full" title="Different config from: ${escapeHtml(sourceProject || '')}">
-              ${escapeHtml(sourceProjectName || 'variant')}
-            </span>
-          ` : ''}
-          ${alreadyInCodex ? `<span class="text-xs px-2 py-0.5 bg-success/10 text-success rounded-full">${t('mcp.codex.alreadyAdded')}</span>` : ''}
-        </div>
-        ${!alreadyInCodex ? `
-          <button class="px-3 py-1 text-xs bg-orange-500 text-white rounded hover:opacity-90 transition-opacity"
-                  onclick="copyClaudeServerToCodex('${escapeHtml(originalName)}', ${JSON.stringify(serverConfig).replace(/'/g, "&#39;")})"
-                  title="${t('mcp.codex.copyToCodex')}">
-            <i data-lucide="arrow-right" class="w-3.5 h-3.5 inline"></i> Codex
-          </button>
-        ` : ''}
-      </div>
-
-      <div class="mcp-server-details text-sm space-y-1">
-        <div class="flex items-center gap-2 text-muted-foreground">
-          <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">${t('mcp.cmd')}</span>
-          <span class="truncate" title="${escapeHtml(command)}">${escapeHtml(command)}</span>
-        </div>
-        ${argsPreview ? `
-          <div class="flex items-start gap-2 text-muted-foreground">
-            <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">${t('mcp.args')}</span>
-            <span class="text-xs font-mono truncate" title="${escapeHtml(args.join(' '))}">${escapeHtml(argsPreview)}</span>
-          </div>
-        ` : ''}
-        <div class="flex items-center gap-2 text-muted-foreground">
-          <span class="text-xs">${t('mcp.usedInCount').replace('{count}', usedIn.length).replace('{s}', usedIn.length !== 1 ? 's' : '')}</span>
-          ${sourceProjectName ? `<span class="text-xs text-muted-foreground/70">• ${t('mcp.from')} ${escapeHtml(sourceProjectName)}</span>` : ''}
-        </div>
-      </div>
-
-      <div class="mt-3 pt-3 border-t border-border flex items-center gap-2">
-        <button class="text-xs text-orange-500 hover:text-orange-600 transition-colors flex items-center gap-1"
-                onclick="copyClaudeServerToCodex('${escapeHtml(originalName)}', ${JSON.stringify(serverConfig).replace(/'/g, "&#39;")})"
-                title="${t('mcp.codex.copyToCodex')}">
-          <i data-lucide="download" class="w-3 h-3"></i>
-          ${t('mcp.codex.install')}
-        </button>
-      </div>
-    </div>
-  `;
-}
-
-// ========================================
-// Codex MCP Server Card Renderer
-// ========================================
-
-function renderCodexServerCard(serverName, serverConfig) {
-  const isStdio = !!serverConfig.command;
-  const isHttp = !!serverConfig.url;
-  const isEnabled = serverConfig.enabled !== false; // Default to enabled
-  const command = serverConfig.command || serverConfig.url || 'N/A';
-  const args = serverConfig.args || [];
-  const hasEnv = serverConfig.env && Object.keys(serverConfig.env).length > 0;
-
-  // Server type badge
-  const typeBadge = isHttp
-    ? `<span class="text-xs px-2 py-0.5 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 rounded-full">HTTP</span>`
-    : `<span class="text-xs px-2 py-0.5 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 rounded-full">STDIO</span>`;
-
-  return `
-    <div class="mcp-server-card bg-card border border-orange-200 dark:border-orange-800 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer ${!isEnabled ? 'opacity-60' : ''}"
-         data-server-name="${escapeHtml(serverName)}"
-         data-server-config="${escapeHtml(JSON.stringify(serverConfig))}"
-         data-cli-type="codex"
-         data-action="view-details-codex"
-         title="${t('mcp.clickToEdit')}">
-      <div class="flex items-start justify-between mb-3">
-        <div class="flex items-center gap-2 flex-wrap">
-          <span>${isEnabled ? '<i data-lucide="check-circle" class="w-5 h-5 text-orange-500"></i>' : '<i data-lucide="circle" class="w-5 h-5 text-muted-foreground"></i>'}</span>
-          <h4 class="font-semibold text-foreground">${escapeHtml(serverName)}</h4>
-          <span class="text-xs px-2 py-0.5 bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300 rounded-full">Codex</span>
-          ${typeBadge}
-        </div>
-        <label class="mcp-toggle relative inline-flex items-center cursor-pointer" onclick="event.stopPropagation()">
-          <input type="checkbox" class="sr-only peer"
-                 ${isEnabled ? 'checked' : ''}
-                 data-server-name="${escapeHtml(serverName)}"
-                 data-action="toggle-codex">
-          <div class="w-9 h-5 bg-hover peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-orange-500"></div>
-        </label>
-      </div>
-
-      <div class="mcp-server-details text-sm space-y-1">
-        <div class="flex items-center gap-2 text-muted-foreground">
-          <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">${isHttp ? t('mcp.url') : t('mcp.cmd')}</span>
-          <span class="truncate" title="${escapeHtml(command)}">${escapeHtml(command)}</span>
-        </div>
-        ${args.length > 0 ? `
-          <div class="flex items-start gap-2 text-muted-foreground">
-            <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">${t('mcp.args')}</span>
-            <span class="text-xs font-mono truncate" title="${escapeHtml(args.join(' '))}">${escapeHtml(args.slice(0, 3).join(' '))}${args.length > 3 ? '...' : ''}</span>
-          </div>
-        ` : ''}
-        ${hasEnv ? `
-          <div class="flex items-center gap-2 text-muted-foreground">
-            <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">${t('mcp.env')}</span>
-            <span class="text-xs">${Object.keys(serverConfig.env).length} ${t('mcp.variables')}</span>
-          </div>
-        ` : ''}
-        ${serverConfig.enabled_tools ? `
-          <div class="flex items-center gap-2 text-muted-foreground">
-            <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">${t('mcp.codex.enabledTools')}</span>
-            <span class="text-xs">${serverConfig.enabled_tools.length} ${t('mcp.codex.tools')}</span>
-          </div>
-        ` : ''}
-      </div>
-
-      <div class="mt-3 pt-3 border-t border-border flex items-center justify-between gap-2" onclick="event.stopPropagation()">
-        <div class="flex items-center gap-2">
-          <button class="text-xs text-primary hover:text-primary/80 transition-colors flex items-center gap-1"
-                  onclick="copyCodexServerToClaude('${escapeHtml(serverName)}', ${JSON.stringify(serverConfig).replace(/'/g, "&#39;")})"
-                  title="${t('mcp.codex.copyToClaude')}">
-            <i data-lucide="copy" class="w-3 h-3"></i>
-            ${t('mcp.codex.copyToClaude')}
-          </button>
-        </div>
-        <button class="text-xs text-destructive hover:text-destructive/80 transition-colors"
-                data-server-name="${escapeHtml(serverName)}"
-                data-action="remove-codex">
-          ${t('mcp.codex.remove')}
-        </button>
-      </div>
-    </div>
-  `;
-}
-
-// ========================================
-// Codex MCP Create Modal
-// ========================================
-
-function openCodexMcpCreateModal() {
-  // Reuse the existing modal with different settings
-  const modal = document.getElementById('mcpCreateModal');
-  if (modal) {
-    modal.classList.remove('hidden');
-    // Reset to form mode
-    mcpCreateMode = 'form';
-    switchMcpCreateTab('form');
-    // Clear form
-    document.getElementById('mcpServerName').value = '';
-    document.getElementById('mcpServerCommand').value = '';
-    document.getElementById('mcpServerArgs').value = '';
-    document.getElementById('mcpServerEnv').value = '';
-    // Clear JSON input
-    document.getElementById('mcpServerJson').value = '';
-    document.getElementById('mcpJsonPreview').classList.add('hidden');
-    // Set scope to codex
-    const scopeSelect = document.getElementById('mcpServerScope');
-    if (scopeSelect) {
-      // Add codex option if not exists
-      if (!scopeSelect.querySelector('option[value="codex"]')) {
-        const codexOption = document.createElement('option');
-        codexOption.value = 'codex';
-        codexOption.textContent = t('mcp.codex.scopeCodex');
-        scopeSelect.appendChild(codexOption);
-      }
-      scopeSelect.value = 'codex';
-    }
-    // Focus on name input
-    document.getElementById('mcpServerName').focus();
-    // Setup JSON input listener
-    setupMcpJsonListener();
-  }
-}
-
-function attachMcpEventListeners() {
-  // Toggle switches
-  document.querySelectorAll('.mcp-server-card input[data-action="toggle"]').forEach(input => {
-    input.addEventListener('change', async (e) => {
-      const serverName = e.target.dataset.serverName;
-      const enable = e.target.checked;
-      await toggleMcpServer(serverName, enable);
-    });
-  });
-
-  // Add from other projects (with scope selection)
-  document.querySelectorAll('.mcp-server-card button[data-action="add-from-other"]').forEach(btn => {
-    btn.addEventListener('click', async (e) => {
-      const serverName = btn.dataset.serverName;
-      const serverConfig = JSON.parse(btn.dataset.serverConfig);
-      const scope = btn.dataset.scope; // 'project' or 'global'
-
-      if (scope === 'global') {
-        await addGlobalMcpServer(serverName, serverConfig);
-      } else {
-        await copyMcpServerToProject(serverName, serverConfig);
-      }
-    });
-  });
-
-  // Remove buttons (project-level)
-  document.querySelectorAll('.mcp-server-card button[data-action="remove"]').forEach(btn => {
-    btn.addEventListener('click', async (e) => {
-      const serverName = btn.dataset.serverName;
-      if (confirm(t('mcp.removeConfirm', { name: serverName }))) {
-        await removeMcpServerFromProject(serverName);
-      }
-    });
-  });
-
-  // Remove buttons (global-level)
-  document.querySelectorAll('.mcp-server-card button[data-action="remove-global"]').forEach(btn => {
-    btn.addEventListener('click', async (e) => {
-      const serverName = btn.dataset.serverName;
-      if (confirm(t('mcp.removeGlobalConfirm', { name: serverName }))) {
-        await removeGlobalMcpServer(serverName);
-      }
-    });
-  });
-
-  // Install to project buttons
-  document.querySelectorAll('.mcp-server-card button[data-action="install-to-project"]').forEach(btn => {
-    btn.addEventListener('click', async (e) => {
-      const serverName = btn.dataset.serverName;
-      const serverConfig = JSON.parse(btn.dataset.serverConfig);
-      await installMcpToProject(serverName, serverConfig);
-    });
-  });
-
-  // Install to global buttons
-  document.querySelectorAll('.mcp-server-card button[data-action="install-to-global"]').forEach(btn => {
-    btn.addEventListener('click', async (e) => {
-      const serverName = btn.dataset.serverName;
-      const serverConfig = JSON.parse(btn.dataset.serverConfig);
-      await addGlobalMcpServer(serverName, serverConfig);
-    });
-  });
-
-  // Save as template buttons
-  document.querySelectorAll('.mcp-server-card button[data-action="save-as-template"]').forEach(btn => {
-    btn.addEventListener('click', async (e) => {
-      const serverName = btn.dataset.serverName;
-      const serverConfig = JSON.parse(btn.dataset.serverConfig);
-      await saveMcpAsTemplate(serverName, serverConfig);
-    });
-  });
-
-  // Install from template buttons
-  document.querySelectorAll('.mcp-template-card button[data-action="install-template"]').forEach(btn => {
-    btn.addEventListener('click', async (e) => {
-      const templateName = btn.dataset.templateName;
-      const scope = btn.dataset.scope || 'project';
-      await installFromTemplate(templateName, scope);
-    });
-  });
-
-  // Delete template buttons
-  document.querySelectorAll('.mcp-template-card button[data-action="delete-template"]').forEach(btn => {
-    btn.addEventListener('click', async (e) => {
-      const templateName = btn.dataset.templateName;
-      if (confirm(t('mcp.deleteTemplateConfirm', { name: templateName }))) {
-        await deleteMcpTemplate(templateName);
-      }
-    });
-  });
-
-  // ========================================
-  // Codex MCP Event Listeners
-  // ========================================
-
-  // Toggle Codex MCP servers
-  document.querySelectorAll('.mcp-server-card input[data-action="toggle-codex"]').forEach(input => {
-    input.addEventListener('change', async (e) => {
-      const serverName = e.target.dataset.serverName;
-      const enable = e.target.checked;
-      await toggleCodexMcpServer(serverName, enable);
-    });
-  });
-
-  // Remove Codex MCP servers
-  document.querySelectorAll('.mcp-server-card button[data-action="remove-codex"]').forEach(btn => {
-    btn.addEventListener('click', async (e) => {
-      const serverName = btn.dataset.serverName;
-      if (confirm(t('mcp.codex.removeConfirm', { name: serverName }))) {
-        await removeCodexMcpServer(serverName);
-      }
-    });
-  });
-
-  // View details / Edit - click on Claude server card
-  document.querySelectorAll('.mcp-server-card[data-action="view-details"]').forEach(card => {
-    card.addEventListener('click', (e) => {
-      const serverName = card.dataset.serverName;
-      const serverConfig = JSON.parse(card.dataset.serverConfig);
-      const serverSource = card.dataset.serverSource;
-      showMcpEditModal(serverName, serverConfig, serverSource, 'claude');
-    });
-  });
-
-  // View details / Edit - click on Codex server card
-  document.querySelectorAll('.mcp-server-card[data-action="view-details-codex"]').forEach(card => {
-    card.addEventListener('click', (e) => {
-      const serverName = card.dataset.serverName;
-      const serverConfig = JSON.parse(card.dataset.serverConfig);
-      showMcpEditModal(serverName, serverConfig, 'codex', 'codex');
-    });
-  });
-
-  // Modal close button
-  const closeBtn = document.getElementById('mcpDetailsModalClose');
-  const modal = document.getElementById('mcpDetailsModal');
-  if (closeBtn && modal) {
-    closeBtn.addEventListener('click', () => {
-      modal.classList.add('hidden');
-    });
-    // Close on background click
-    modal.addEventListener('click', (e) => {
-      if (e.target === modal) {
-        modal.classList.add('hidden');
-      }
-    });
-  }
-}
-
-// ========================================
-// MCP Edit Modal (replaces Details Modal)
-// ========================================
-
-// Store current editing context
-let mcpEditContext = {
-  serverName: null,
-  serverConfig: null,
-  serverSource: null,
-  cliType: 'claude'
-};
-
-function showMcpDetails(serverName, serverConfig, serverSource, cliType = 'claude') {
-  showMcpEditModal(serverName, serverConfig, serverSource, cliType);
-}
-
-function showMcpEditModal(serverName, serverConfig, serverSource, cliType = 'claude') {
-  const modal = document.getElementById('mcpDetailsModal');
-  const modalBody = document.getElementById('mcpDetailsModalBody');
-
-  if (!modal || !modalBody) return;
-
-  // Store editing context
-  mcpEditContext = {
-    serverName,
-    serverConfig: JSON.parse(JSON.stringify(serverConfig)), // Deep clone
-    serverSource,
-    cliType
-  };
-
-  // Check if editable (enterprise is read-only)
-  const isReadOnly = serverSource === 'enterprise';
-  const isCodex = cliType === 'codex';
-
-  // Build source badge
-  let sourceBadge = '';
-  if (serverSource === 'enterprise') {
-    sourceBadge = `<span class="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full bg-warning/20 text-warning">${t('mcp.sourceEnterprise')}</span>`;
-  } else if (serverSource === 'global') {
-    sourceBadge = `<span class="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full bg-success/10 text-success">${t('mcp.sourceGlobal')}</span>`;
-  } else if (serverSource === 'project') {
-    sourceBadge = `<span class="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full bg-primary/10 text-primary">${t('mcp.sourceProject')}</span>`;
-  } else if (isCodex) {
-    sourceBadge = `<span class="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300">Codex</span>`;
-  }
-
-  // Format args and env for textarea
-  const argsText = (serverConfig.args || []).join('\n');
-  const envText = Object.entries(serverConfig.env || {}).map(([k, v]) => `${k}=${v}`).join('\n');
-
-  // Build edit form HTML
-  modalBody.innerHTML = `
-    <div class="space-y-4">
-      <!-- Server Name and Source -->
-      <div>
-        <label class="text-xs font-semibold text-muted-foreground uppercase tracking-wide">${t('mcp.detailsModal.serverName')}</label>
-        <div class="mt-1 flex items-center gap-2">
-          <input type="text" id="mcpEditName" value="${escapeHtml(serverName)}"
-                 class="text-lg font-bold text-foreground bg-transparent border-b border-border focus:border-primary outline-none px-1 py-0.5 flex-1"
-                 ${isReadOnly ? 'disabled' : ''}
-                 placeholder="${t('mcp.editModal.serverNamePlaceholder')}">
-          ${sourceBadge}
-        </div>
-      </div>
-
-      <!-- Command/URL -->
-      <div>
-        <label class="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1 block">
-          ${serverConfig.url ? t('mcp.url') : t('mcp.cmd')}
-        </label>
-        <input type="text" id="mcpEditCommand" value="${escapeHtml(serverConfig.command || serverConfig.url || '')}"
-               class="w-full px-3 py-2 text-sm font-mono bg-muted border border-border rounded-lg focus:border-primary outline-none"
-               ${isReadOnly ? 'disabled' : ''}
-               placeholder="${serverConfig.url ? 'https://...' : 'npx, node, python...'}">
-      </div>
-
-      <!-- Arguments -->
-      <div>
-        <label class="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1 block">
-          ${t('mcp.args')} <span class="font-normal">(${t('mcp.editModal.onePerLine')})</span>
-        </label>
-        <textarea id="mcpEditArgs" rows="3"
-                  class="w-full px-3 py-2 text-sm font-mono bg-muted border border-border rounded-lg focus:border-primary outline-none resize-none"
-                  ${isReadOnly ? 'disabled' : ''}
-                  placeholder="-y&#10;package-name">${escapeHtml(argsText)}</textarea>
-      </div>
-
-      <!-- Environment Variables -->
-      <div>
-        <label class="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1 block">
-          ${t('mcp.env')} <span class="font-normal">(KEY=VALUE ${t('mcp.editModal.onePerLine')})</span>
-        </label>
-        <textarea id="mcpEditEnv" rows="3"
-                  class="w-full px-3 py-2 text-sm font-mono bg-muted border border-border rounded-lg focus:border-primary outline-none resize-none"
-                  ${isReadOnly ? 'disabled' : ''}
-                  placeholder="API_KEY=your-key&#10;DEBUG=true">${escapeHtml(envText)}</textarea>
-      </div>
-
-      ${isCodex ? `
-      <!-- Codex-specific: enabled_tools -->
-      <div>
-        <label class="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1 block">
-          ${t('mcp.codex.enabledTools')} <span class="font-normal">(${t('mcp.editModal.onePerLine')})</span>
-        </label>
-        <textarea id="mcpEditEnabledTools" rows="2"
-                  class="w-full px-3 py-2 text-sm font-mono bg-muted border border-border rounded-lg focus:border-primary outline-none resize-none"
-                  ${isReadOnly ? 'disabled' : ''}
-                  placeholder="tool1&#10;tool2">${escapeHtml((serverConfig.enabled_tools || []).join('\n'))}</textarea>
-      </div>
-      ` : ''}
-
-      <!-- Raw JSON Preview (collapsible) -->
-      <details class="group">
-        <summary class="text-xs font-semibold text-muted-foreground uppercase tracking-wide cursor-pointer flex items-center gap-1">
-          <i data-lucide="chevron-right" class="w-3 h-3 transition-transform group-open:rotate-90"></i>
-          Raw JSON
-        </summary>
-        <pre id="mcpEditJsonPreview" class="mt-2 bg-muted rounded-lg p-3 text-xs font-mono overflow-x-auto">${escapeHtml(JSON.stringify(serverConfig, null, 2))}</pre>
-      </details>
-
-      <!-- Action Buttons -->
-      ${!isReadOnly ? `
-      <div class="flex items-center justify-between pt-4 border-t border-border">
-        <div class="flex items-center gap-2">
-          ${serverSource === 'project' || isCodex ? `
-            <button onclick="deleteMcpFromEdit()" class="px-4 py-2 text-sm text-destructive hover:bg-destructive/10 rounded-lg transition-colors flex items-center gap-1.5">
-              <i data-lucide="trash-2" class="w-4 h-4"></i>
-              ${t('mcp.editModal.delete')}
-            </button>
-          ` : ''}
-        </div>
-        <div class="flex items-center gap-2">
-          <button onclick="closeMcpEditModal()" class="px-4 py-2 text-sm text-muted-foreground hover:bg-muted rounded-lg transition-colors">
-            ${t('common.cancel')}
-          </button>
-          <button onclick="saveMcpEdit()" class="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1.5">
-            <i data-lucide="check" class="w-4 h-4"></i>
-            ${t('mcp.editModal.save')}
-          </button>
-        </div>
-      </div>
-      ` : `
-      <div class="flex items-center justify-end pt-4 border-t border-border">
-        <button onclick="closeMcpEditModal()" class="px-4 py-2 text-sm bg-muted text-foreground rounded-lg hover:bg-muted/80 transition-colors">
-          ${t('common.close')}
-        </button>
-      </div>
-      `}
-    </div>
-  `;
-
-  // Update modal title
-  const modalTitle = modal.querySelector('h2');
-  if (modalTitle) {
-    modalTitle.textContent = isReadOnly ? t('mcp.detailsModal.title') : t('mcp.editModal.title');
-  }
-
-  // Show modal
-  modal.classList.remove('hidden');
-
-  // Re-initialize Lucide icons in modal
-  if (typeof lucide !== 'undefined') lucide.createIcons();
-
-  // Add input listeners to update JSON preview
-  if (!isReadOnly) {
-    ['mcpEditCommand', 'mcpEditArgs', 'mcpEditEnv', 'mcpEditEnabledTools'].forEach(id => {
-      const el = document.getElementById(id);
-      if (el) {
-        el.addEventListener('input', updateMcpEditJsonPreview);
-      }
-    });
-  }
-}
-
-function closeMcpEditModal() {
-  const modal = document.getElementById('mcpDetailsModal');
-  if (modal) {
-    modal.classList.add('hidden');
-  }
-  mcpEditContext = { serverName: null, serverConfig: null, serverSource: null, cliType: 'claude' };
-}
-
-function updateMcpEditJsonPreview() {
-  const preview = document.getElementById('mcpEditJsonPreview');
-  if (!preview) return;
-
-  const config = buildConfigFromEditForm();
-  preview.textContent = JSON.stringify(config, null, 2);
-}
-
-function buildConfigFromEditForm() {
-  const command = document.getElementById('mcpEditCommand')?.value.trim() || '';
-  const argsText = document.getElementById('mcpEditArgs')?.value.trim() || '';
-  const envText = document.getElementById('mcpEditEnv')?.value.trim() || '';
-  const enabledToolsEl = document.getElementById('mcpEditEnabledTools');
-
-  // Build config
-  const config = {};
-
-  // Command or URL
-  if (mcpEditContext.serverConfig?.url) {
-    config.url = command;
-  } else {
-    config.command = command;
-  }
-
-  // Args
-  if (argsText) {
-    config.args = argsText.split('\n').map(a => a.trim()).filter(a => a);
-  }
-
-  // Env
-  if (envText) {
-    config.env = {};
-    envText.split('\n').forEach(line => {
-      const trimmed = line.trim();
-      if (trimmed && trimmed.includes('=')) {
-        const eqIndex = trimmed.indexOf('=');
-        const key = trimmed.substring(0, eqIndex).trim();
-        const value = trimmed.substring(eqIndex + 1).trim();
-        if (key) {
-          config.env[key] = value;
-        }
-      }
-    });
-  }
-
-  // Codex-specific: enabled_tools
-  if (enabledToolsEl) {
-    const toolsText = enabledToolsEl.value.trim();
-    if (toolsText) {
-      config.enabled_tools = toolsText.split('\n').map(t => t.trim()).filter(t => t);
-    }
-  }
-
-  return config;
-}
-
-async function saveMcpEdit() {
-  const newName = document.getElementById('mcpEditName')?.value.trim();
-  if (!newName) {
-    showRefreshToast(t('mcp.editModal.nameRequired'), 'error');
-    return;
-  }
-
-  const newConfig = buildConfigFromEditForm();
-
-  if (!newConfig.command && !newConfig.url) {
-    showRefreshToast(t('mcp.editModal.commandRequired'), 'error');
-    return;
-  }
-
-  const { serverName, serverSource, cliType } = mcpEditContext;
-  const nameChanged = newName !== serverName;
-
-  try {
-    if (cliType === 'codex') {
-      // Codex MCP update
-      // If name changed, remove old and add new
-      if (nameChanged) {
-        await removeCodexMcpServer(serverName);
-      }
-      await addCodexMcpServer(newName, newConfig);
-    } else if (serverSource === 'global') {
-      // Global MCP update
-      if (nameChanged) {
-        await removeGlobalMcpServer(serverName);
-      }
-      await addGlobalMcpServer(newName, newConfig);
-    } else if (serverSource === 'project') {
-      // Project MCP update
-      if (nameChanged) {
-        await removeMcpServerFromProject(serverName);
-      }
-      await copyMcpServerToProject(newName, newConfig, 'mcp');
-    }
-
-    closeMcpEditModal();
-    showRefreshToast(t('mcp.editModal.saved', { name: newName }), 'success');
-  } catch (err) {
-    console.error('Failed to save MCP edit:', err);
-    showRefreshToast(t('mcp.editModal.saveFailed') + ': ' + err.message, 'error');
-  }
-}
-
-async function deleteMcpFromEdit() {
-  const { serverName, serverSource, cliType } = mcpEditContext;
-
-  if (!confirm(t('mcp.editModal.deleteConfirm', { name: serverName }))) {
-    return;
-  }
-
-  try {
-    if (cliType === 'codex') {
-      await removeCodexMcpServer(serverName);
-    } else if (serverSource === 'global') {
-      await removeGlobalMcpServer(serverName);
-    } else if (serverSource === 'project') {
-      await removeMcpServerFromProject(serverName);
-    }
-
-    closeMcpEditModal();
-    showRefreshToast(t('mcp.editModal.deleted', { name: serverName }), 'success');
-  } catch (err) {
-    console.error('Failed to delete MCP:', err);
-    showRefreshToast(t('mcp.editModal.deleteFailed') + ': ' + err.message, 'error');
-  }
-}
-
-// ========================================
-// MCP Template Management Functions
-// ========================================
-
-let mcpTemplates = [];
-
-/**
- * Load all MCP templates from API
- */
-async function loadMcpTemplates() {
-  try {
-    const response = await fetch('/api/mcp-templates');
-    const data = await response.json();
-
-    if (data.success) {
-      mcpTemplates = data.templates || [];
-      console.log('[MCP Templates] Loaded', mcpTemplates.length, 'templates');
-    } else {
-      console.error('[MCP Templates] Failed to load:', data.error);
-      mcpTemplates = [];
-    }
-
-    return mcpTemplates;
-  } catch (error) {
-    console.error('[MCP Templates] Error loading templates:', error);
-    mcpTemplates = [];
-    return [];
-  }
-}
-
-/**
- * Save MCP server configuration as a template
- */
-async function saveMcpAsTemplate(serverName, serverConfig) {
-  try {
-    // Prompt for template name and description
-    const templateName = prompt(t('mcp.enterTemplateName'), serverName);
-    if (!templateName) return;
-
-    const description = prompt(t('mcp.enterTemplateDesc'), `Template for ${serverName}`);
-
-    const payload = {
-      name: templateName,
-      description: description || '',
-      serverConfig: serverConfig,
-      category: 'user'
-    };
-
-    const response = await fetch('/api/mcp-templates', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(payload)
-    });
-
-    const data = await response.json();
-
-    if (data.success) {
-      showRefreshToast(t('mcp.templateSaved', { name: templateName }), 'success');
-      await loadMcpTemplates();
-      await renderMcpManager(); // Refresh view
-    } else {
-      showRefreshToast(t('mcp.templateSaveFailed', { error: data.error }), 'error');
-    }
-  } catch (error) {
-    console.error('[MCP] Save template error:', error);
-    showRefreshToast(t('mcp.templateSaveFailed', { error: error.message }), 'error');
-  }
-}
-
-/**
- * Install MCP server from template
- */
-async function installFromTemplate(templateName, scope = 'project') {
-  try {
-    // Find template
-    const template = mcpTemplates.find(t => t.name === templateName);
-    if (!template) {
-      showRefreshToast(t('mcp.templateNotFound', { name: templateName }), 'error');
-      return;
-    }
-
-    // Prompt for server name (default to template name)
-    const serverName = prompt(t('mcp.enterServerName'), templateName);
-    if (!serverName) return;
-
-    // Install based on scope
-    if (scope === 'project') {
-      await installMcpToProject(serverName, template.serverConfig);
-    } else if (scope === 'global') {
-      await addGlobalMcpServer(serverName, template.serverConfig);
-    }
-
-    showRefreshToast(t('mcp.templateInstalled', { name: serverName }), 'success');
-    await renderMcpManager();
-  } catch (error) {
-    console.error('[MCP] Install from template error:', error);
-    showRefreshToast(t('mcp.templateInstallFailed', { error: error.message }), 'error');
-  }
-}
-
-/**
- * Delete MCP template
- */
-async function deleteMcpTemplate(templateName) {
-  try {
-    const response = await fetch(`/api/mcp-templates/${encodeURIComponent(templateName)}`, {
-      method: 'DELETE'
-    });
-
-    const data = await response.json();
-
-    if (data.success) {
-      showRefreshToast(t('mcp.templateDeleted', { name: templateName }), 'success');
-      await loadMcpTemplates();
-      await renderMcpManager();
-    } else {
-      showRefreshToast(t('mcp.templateDeleteFailed', { error: data.error }), 'error');
-    }
-  } catch (error) {
-    console.error('[MCP] Delete template error:', error);
-    showRefreshToast(t('mcp.templateDeleteFailed', { error: error.message }), 'error');
-  }
-}