claude-code-workflow 6.1.4 → 6.2.1

package/ccw/src/templates/dashboard-js/components/mcp-manager.js

@@ -1,528 +0,0 @@
-// MCP Manager Component
-// Manages MCP server configuration from multiple sources:
-// - Enterprise: managed-mcp.json (highest priority)
-// - User: ~/.claude.json mcpServers
-// - Project: .mcp.json in project root
-// - Local: ~/.claude.json projects[path].mcpServers
-
-// ========== MCP State ==========
-let mcpConfig = null;
-let mcpAllProjects = {};
-let mcpGlobalServers = {};
-let mcpUserServers = {};
-let mcpEnterpriseServers = {};
-let mcpCurrentProjectServers = {};
-let mcpConfigSources = [];
-let mcpCreateMode = 'form'; // 'form' or 'json'
-
-// ========== Initialization ==========
-function initMcpManager() {
-  // Initialize MCP navigation
-  document.querySelectorAll('.nav-item[data-view="mcp-manager"]').forEach(item => {
-    item.addEventListener('click', () => {
-      setActiveNavItem(item);
-      currentView = 'mcp-manager';
-      currentFilter = null;
-      currentLiteType = null;
-      currentSessionDetailKey = null;
-      updateContentTitle();
-      renderMcpManager();
-    });
-  });
-}
-
-// ========== Data Loading ==========
-async function loadMcpConfig() {
-  try {
-    const response = await fetch('/api/mcp-config');
-    if (!response.ok) throw new Error('Failed to load MCP config');
-    const data = await response.json();
-    mcpConfig = data;
-    mcpAllProjects = data.projects || {};
-    mcpGlobalServers = data.globalServers || {};
-    mcpUserServers = data.userServers || {};
-    mcpEnterpriseServers = data.enterpriseServers || {};
-    mcpConfigSources = data.configSources || [];
-
-    // Get current project servers
-    const currentPath = projectPath.replace(/\//g, '\\');
-    mcpCurrentProjectServers = mcpAllProjects[currentPath]?.mcpServers || {};
-
-    // Update badge count
-    updateMcpBadge();
-
-    return data;
-  } catch (err) {
-    console.error('Failed to load MCP config:', err);
-    return null;
-  }
-}
-
-async function toggleMcpServer(serverName, enable) {
-  try {
-    const response = await fetch('/api/mcp-toggle', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        projectPath: projectPath,
-        serverName: serverName,
-        enable: enable
-      })
-    });
-
-    if (!response.ok) throw new Error('Failed to toggle MCP server');
-
-    const result = await response.json();
-    if (result.success) {
-      // Reload config and re-render
-      await loadMcpConfig();
-      renderMcpManager();
-      showRefreshToast(`MCP server "${serverName}" ${enable ? 'enabled' : 'disabled'}`, 'success');
-    }
-    return result;
-  } catch (err) {
-    console.error('Failed to toggle MCP server:', err);
-    showRefreshToast(`Failed to toggle MCP server: ${err.message}`, 'error');
-    return null;
-  }
-}
-
-async function copyMcpServerToProject(serverName, serverConfig) {
-  try {
-    const response = await fetch('/api/mcp-copy-server', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        projectPath: projectPath,
-        serverName: serverName,
-        serverConfig: serverConfig
-      })
-    });
-
-    if (!response.ok) throw new Error('Failed to copy MCP server');
-
-    const result = await response.json();
-    if (result.success) {
-      await loadMcpConfig();
-      renderMcpManager();
-      showRefreshToast(`MCP server "${serverName}" added to project`, 'success');
-    }
-    return result;
-  } catch (err) {
-    console.error('Failed to copy MCP server:', err);
-    showRefreshToast(`Failed to add MCP server: ${err.message}`, 'error');
-    return null;
-  }
-}
-
-async function removeMcpServerFromProject(serverName) {
-  try {
-    const response = await fetch('/api/mcp-remove-server', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        projectPath: projectPath,
-        serverName: serverName
-      })
-    });
-
-    if (!response.ok) throw new Error('Failed to remove MCP server');
-
-    const result = await response.json();
-    if (result.success) {
-      await loadMcpConfig();
-      renderMcpManager();
-      showRefreshToast(`MCP server "${serverName}" removed from project`, 'success');
-    }
-    return result;
-  } catch (err) {
-    console.error('Failed to remove MCP server:', err);
-    showRefreshToast(`Failed to remove MCP server: ${err.message}`, 'error');
-    return null;
-  }
-}
-
-// ========== Badge Update ==========
-function updateMcpBadge() {
-  const badge = document.getElementById('badgeMcpServers');
-  if (badge) {
-    const currentPath = projectPath.replace(/\//g, '\\');
-    const projectData = mcpAllProjects[currentPath];
-    const servers = projectData?.mcpServers || {};
-    const disabledServers = projectData?.disabledMcpServers || [];
-
-    const totalServers = Object.keys(servers).length;
-    const enabledServers = totalServers - disabledServers.length;
-
-    badge.textContent = `${enabledServers}/${totalServers}`;
-  }
-}
-
-// ========== Helpers ==========
-function getAllAvailableMcpServers() {
-  const allServers = {};
-
-  // Collect global servers first
-  for (const [name, serverConfig] of Object.entries(mcpGlobalServers)) {
-    allServers[name] = {
-      config: serverConfig,
-      usedIn: [],
-      isGlobal: true
-    };
-  }
-
-  // Collect servers from all projects
-  for (const [path, config] of Object.entries(mcpAllProjects)) {
-    const servers = config.mcpServers || {};
-    for (const [name, serverConfig] of Object.entries(servers)) {
-      if (!allServers[name]) {
-        allServers[name] = {
-          config: serverConfig,
-          usedIn: [],
-          isGlobal: false
-        };
-      }
-      allServers[name].usedIn.push(path);
-    }
-  }
-
-  return allServers;
-}
-
-function isServerEnabledInCurrentProject(serverName) {
-  const currentPath = projectPath.replace(/\//g, '\\');
-  const projectData = mcpAllProjects[currentPath];
-  if (!projectData) return false;
-
-  const disabledServers = projectData.disabledMcpServers || [];
-  return !disabledServers.includes(serverName);
-}
-
-function isServerInCurrentProject(serverName) {
-  const currentPath = projectPath.replace(/\//g, '\\');
-  const projectData = mcpAllProjects[currentPath];
-  if (!projectData) return false;
-
-  const servers = projectData.mcpServers || {};
-  return serverName in servers;
-}
-
-// ========== MCP Create Modal ==========
-function openMcpCreateModal() {
-  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');
-    // Focus on name input
-    document.getElementById('mcpServerName').focus();
-    // Setup JSON input listener
-    setupMcpJsonListener();
-  }
-}
-
-function closeMcpCreateModal() {
-  const modal = document.getElementById('mcpCreateModal');
-  if (modal) {
-    modal.classList.add('hidden');
-  }
-}
-
-function switchMcpCreateTab(tab) {
-  mcpCreateMode = tab;
-  const formMode = document.getElementById('mcpFormMode');
-  const jsonMode = document.getElementById('mcpJsonMode');
-  const tabForm = document.getElementById('mcpTabForm');
-  const tabJson = document.getElementById('mcpTabJson');
-
-  if (tab === 'form') {
-    formMode.classList.remove('hidden');
-    jsonMode.classList.add('hidden');
-    tabForm.classList.add('active');
-    tabJson.classList.remove('active');
-  } else {
-    formMode.classList.add('hidden');
-    jsonMode.classList.remove('hidden');
-    tabForm.classList.remove('active');
-    tabJson.classList.add('active');
-  }
-}
-
-function setupMcpJsonListener() {
-  const jsonInput = document.getElementById('mcpServerJson');
-  if (jsonInput && !jsonInput.hasAttribute('data-listener-attached')) {
-    jsonInput.setAttribute('data-listener-attached', 'true');
-    jsonInput.addEventListener('input', () => {
-      updateMcpJsonPreview();
-    });
-  }
-}
-
-function parseMcpJsonConfig(jsonText) {
-  if (!jsonText.trim()) {
-    return { servers: {}, error: null };
-  }
-
-  try {
-    const parsed = JSON.parse(jsonText);
-    let servers = {};
-
-    // Support multiple formats:
-    // 1. {"servers": {...}} format (claude desktop style)
-    // 2. {"mcpServers": {...}} format (claude.json style)
-    // 3. {"serverName": {command, args}} format (direct server config)
-    // 4. {command, args} format (single server without name)
-
-    if (parsed.servers && typeof parsed.servers === 'object') {
-      servers = parsed.servers;
-    } else if (parsed.mcpServers && typeof parsed.mcpServers === 'object') {
-      servers = parsed.mcpServers;
-    } else if (parsed.command && typeof parsed.command === 'string') {
-      // Single server without name - will prompt for name
-      servers = { '__unnamed__': parsed };
-    } else {
-      // Check if all values are server configs (have 'command' property)
-      const isDirectServerConfig = Object.values(parsed).every(
-        v => v && typeof v === 'object' && v.command
-      );
-      if (isDirectServerConfig && Object.keys(parsed).length > 0) {
-        servers = parsed;
-      } else {
-        return { servers: {}, error: 'Invalid MCP server JSON format' };
-      }
-    }
-
-    // Validate each server config
-    for (const [name, config] of Object.entries(servers)) {
-      if (!config.command || typeof config.command !== 'string') {
-        return { servers: {}, error: `Server "${name}" missing required "command" field` };
-      }
-      if (config.args && !Array.isArray(config.args)) {
-        return { servers: {}, error: `Server "${name}" has invalid "args" (must be array)` };
-      }
-      if (config.env && typeof config.env !== 'object') {
-        return { servers: {}, error: `Server "${name}" has invalid "env" (must be object)` };
-      }
-    }
-
-    return { servers, error: null };
-  } catch (e) {
-    return { servers: {}, error: 'Invalid JSON: ' + e.message };
-  }
-}
-
-function updateMcpJsonPreview() {
-  const jsonInput = document.getElementById('mcpServerJson');
-  const previewContainer = document.getElementById('mcpJsonPreview');
-  const previewContent = document.getElementById('mcpJsonPreviewContent');
-
-  const jsonText = jsonInput.value;
-  const { servers, error } = parseMcpJsonConfig(jsonText);
-
-  if (!jsonText.trim()) {
-    previewContainer.classList.add('hidden');
-    return;
-  }
-
-  previewContainer.classList.remove('hidden');
-
-  if (error) {
-    previewContent.innerHTML = `<div class="text-destructive">${escapeHtml(error)}</div>`;
-    return;
-  }
-
-  const serverCount = Object.keys(servers).length;
-  if (serverCount === 0) {
-    previewContent.innerHTML = `<div class="text-muted-foreground">No servers found</div>`;
-    return;
-  }
-
-  const previewHtml = Object.entries(servers).map(([name, config]) => {
-    const displayName = name === '__unnamed__' ? '(will prompt for name)' : name;
-    const argsPreview = config.args ? config.args.slice(0, 2).join(' ') + (config.args.length > 2 ? '...' : '') : '';
-    return `
-      <div class="flex items-center gap-2 p-2 bg-background rounded">
-        <span class="text-success">+</span>
-        <span class="font-medium">${escapeHtml(displayName)}</span>
-        <span class="text-muted-foreground text-xs">${escapeHtml(config.command)} ${escapeHtml(argsPreview)}</span>
-      </div>
-    `;
-  }).join('');
-
-  previewContent.innerHTML = previewHtml;
-}
-
-async function submitMcpCreate() {
-  if (mcpCreateMode === 'json') {
-    await submitMcpCreateFromJson();
-  } else {
-    await submitMcpCreateFromForm();
-  }
-}
-
-async function submitMcpCreateFromForm() {
-  const name = document.getElementById('mcpServerName').value.trim();
-  const command = document.getElementById('mcpServerCommand').value.trim();
-  const argsText = document.getElementById('mcpServerArgs').value.trim();
-  const envText = document.getElementById('mcpServerEnv').value.trim();
-
-  // Validate required fields
-  if (!name) {
-    showRefreshToast('Server name is required', 'error');
-    document.getElementById('mcpServerName').focus();
-    return;
-  }
-
-  if (!command) {
-    showRefreshToast('Command is required', 'error');
-    document.getElementById('mcpServerCommand').focus();
-    return;
-  }
-
-  // Parse args (one per line)
-  const args = argsText ? argsText.split('\n').map(a => a.trim()).filter(a => a) : [];
-
-  // Parse env vars (KEY=VALUE per line)
-  const env = {};
-  if (envText) {
-    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) {
-          env[key] = value;
-        }
-      }
-    });
-  }
-
-  // Build server config
-  const serverConfig = {
-    command: command,
-    args: args
-  };
-
-  // Only add env if there are values
-  if (Object.keys(env).length > 0) {
-    serverConfig.env = env;
-  }
-
-  await createMcpServerWithConfig(name, serverConfig);
-}
-
-async function submitMcpCreateFromJson() {
-  const jsonText = document.getElementById('mcpServerJson').value.trim();
-
-  if (!jsonText) {
-    showRefreshToast('Please enter JSON configuration', 'error');
-    document.getElementById('mcpServerJson').focus();
-    return;
-  }
-
-  const { servers, error } = parseMcpJsonConfig(jsonText);
-
-  if (error) {
-    showRefreshToast(error, 'error');
-    return;
-  }
-
-  if (Object.keys(servers).length === 0) {
-    showRefreshToast('No valid servers found in JSON', 'error');
-    return;
-  }
-
-  // Handle unnamed server case
-  if (servers['__unnamed__']) {
-    const serverName = prompt('Enter a name for this MCP server:');
-    if (!serverName || !serverName.trim()) {
-      showRefreshToast('Server name is required', 'error');
-      return;
-    }
-    servers[serverName.trim()] = servers['__unnamed__'];
-    delete servers['__unnamed__'];
-  }
-
-  // Add all servers
-  let successCount = 0;
-  let failCount = 0;
-  const serverNames = Object.keys(servers);
-
-  for (const [name, config] of Object.entries(servers)) {
-    try {
-      const response = await fetch('/api/mcp-copy-server', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          projectPath: projectPath,
-          serverName: name,
-          serverConfig: config
-        })
-      });
-
-      if (!response.ok) throw new Error('Failed to create MCP server');
-
-      const result = await response.json();
-      if (result.success) {
-        successCount++;
-      } else {
-        failCount++;
-      }
-    } catch (err) {
-      console.error(`Failed to create MCP server "${name}":`, err);
-      failCount++;
-    }
-  }
-
-  closeMcpCreateModal();
-  await loadMcpConfig();
-  renderMcpManager();
-
-  if (failCount === 0) {
-    showRefreshToast(`${successCount} MCP server${successCount > 1 ? 's' : ''} created successfully`, 'success');
-  } else if (successCount > 0) {
-    showRefreshToast(`${successCount} created, ${failCount} failed`, 'warning');
-  } else {
-    showRefreshToast('Failed to create MCP servers', 'error');
-  }
-}
-
-async function createMcpServerWithConfig(name, serverConfig) {
-  // Submit to API
-  try {
-    const response = await fetch('/api/mcp-copy-server', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        projectPath: projectPath,
-        serverName: name,
-        serverConfig: serverConfig
-      })
-    });
-
-    if (!response.ok) throw new Error('Failed to create MCP server');
-
-    const result = await response.json();
-    if (result.success) {
-      closeMcpCreateModal();
-      await loadMcpConfig();
-      renderMcpManager();
-      showRefreshToast(`MCP server "${name}" created successfully`, 'success');
-    } else {
-      showRefreshToast(result.error || 'Failed to create MCP server', 'error');
-    }
-  } catch (err) {
-    console.error('Failed to create MCP server:', err);
-    showRefreshToast(`Failed to create MCP server: ${err.message}`, 'error');
-  }
-}