claude-code-workflow 6.0.0

package/ccw/src/templates/dashboard-js/views/lite-tasks.js

@@ -0,0 +1,390 @@
+// ============================================
+// LITE TASKS VIEW
+// ============================================
+// Lite-plan and lite-fix task list and detail rendering
+
+function renderLiteTasks() {
+  const container = document.getElementById('mainContent');
+
+  const liteTasks = workflowData.liteTasks || {};
+  const sessions = currentLiteType === 'lite-plan'
+    ? liteTasks.litePlan || []
+    : liteTasks.liteFix || [];
+
+  if (sessions.length === 0) {
+    container.innerHTML = `
+      <div class="empty-state">
+        <div class="empty-icon">⚡</div>
+        <div class="empty-title">No ${currentLiteType} Sessions</div>
+        <div class="empty-text">No sessions found in .workflow/.${currentLiteType}/</div>
+      </div>
+    `;
+    return;
+  }
+
+  container.innerHTML = `<div class="sessions-grid">${sessions.map(session => renderLiteTaskCard(session)).join('')}</div>`;
+
+  // Initialize collapsible sections
+  document.querySelectorAll('.collapsible-header').forEach(header => {
+    header.addEventListener('click', () => toggleSection(header));
+  });
+
+  // Render flowcharts for expanded tasks
+  sessions.forEach(session => {
+    session.tasks?.forEach(task => {
+      if (task.flow_control?.implementation_approach) {
+        renderFlowchartForTask(session.id, task);
+      }
+    });
+  });
+}
+
+function renderLiteTaskCard(session) {
+  const tasks = session.tasks || [];
+
+  // Store session data for detail page
+  const sessionKey = `lite-${session.type}-${session.id}`.replace(/[^a-zA-Z0-9-]/g, '-');
+  liteTaskDataStore[sessionKey] = session;
+
+  return `
+    <div class="session-card lite-task-card" onclick="showLiteTaskDetailPage('${sessionKey}')" style="cursor: pointer;">
+      <div class="session-header">
+        <div class="session-title">${escapeHtml(session.id)}</div>
+        <span class="session-status ${session.type}">
+          ${session.type === 'lite-plan' ? '📝 PLAN' : '🔧 FIX'}
+        </span>
+      </div>
+      <div class="session-body">
+        <div class="session-meta">
+          <span class="session-meta-item">📅 ${formatDate(session.createdAt)}</span>
+          <span class="session-meta-item">📋 ${tasks.length} tasks</span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+// Lite Task Detail Page
+function showLiteTaskDetailPage(sessionKey) {
+  const session = liteTaskDataStore[sessionKey];
+  if (!session) return;
+
+  currentView = 'liteTaskDetail';
+  currentSessionDetailKey = sessionKey;
+
+  // Hide stats grid and carousel on detail pages
+  hideStatsAndCarousel();
+
+  // Also store in sessionDataStore for tab switching compatibility
+  sessionDataStore[sessionKey] = {
+    ...session,
+    session_id: session.id,
+    created_at: session.createdAt,
+    path: session.path,
+    type: session.type
+  };
+
+  const container = document.getElementById('mainContent');
+  const tasks = session.tasks || [];
+  const plan = session.plan || {};
+  const progress = session.progress || { total: 0, completed: 0, percentage: 0 };
+
+  const completed = tasks.filter(t => t.status === 'completed').length;
+  const inProgress = tasks.filter(t => t.status === 'in_progress').length;
+  const pending = tasks.filter(t => t.status === 'pending').length;
+
+  container.innerHTML = `
+    <div class="session-detail-page lite-task-detail-page">
+      <!-- Header -->
+      <div class="detail-header">
+        <button class="btn-back" onclick="goBackToLiteTasks()">
+          <span class="back-icon">←</span>
+          <span>Back to ${session.type === 'lite-plan' ? 'Lite Plan' : 'Lite Fix'}</span>
+        </button>
+        <div class="detail-title-row">
+          <h2 class="detail-session-id">${session.type === 'lite-plan' ? '📝' : '🔧'} ${escapeHtml(session.id)}</h2>
+          <div class="detail-badges">
+            <span class="session-type-badge ${session.type}">${session.type}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Session Info Bar -->
+      <div class="detail-info-bar">
+        <div class="info-item">
+          <span class="info-label">Created:</span>
+          <span class="info-value">${formatDate(session.createdAt)}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">Tasks:</span>
+          <span class="info-value">${tasks.length} tasks</span>
+        </div>
+      </div>
+
+      <!-- Tab Navigation -->
+      <div class="detail-tabs">
+        <button class="detail-tab active" data-tab="tasks" onclick="switchLiteDetailTab('tasks')">
+          <span class="tab-icon">📋</span>
+          <span class="tab-text">Tasks</span>
+          <span class="tab-count">${tasks.length}</span>
+        </button>
+        <button class="detail-tab" data-tab="plan" onclick="switchLiteDetailTab('plan')">
+          <span class="tab-icon">📐</span>
+          <span class="tab-text">Plan</span>
+        </button>
+        <button class="detail-tab" data-tab="context" onclick="switchLiteDetailTab('context')">
+          <span class="tab-icon">📦</span>
+          <span class="tab-text">Context</span>
+        </button>
+        <button class="detail-tab" data-tab="summary" onclick="switchLiteDetailTab('summary')">
+          <span class="tab-icon">📝</span>
+          <span class="tab-text">Summary</span>
+        </button>
+      </div>
+
+      <!-- Tab Content -->
+      <div class="detail-tab-content" id="liteDetailTabContent">
+        ${renderLiteTasksTab(session, tasks, completed, inProgress, pending)}
+      </div>
+    </div>
+  `;
+
+  // Initialize collapsible sections
+  setTimeout(() => {
+    document.querySelectorAll('.collapsible-header').forEach(header => {
+      header.addEventListener('click', () => toggleSection(header));
+    });
+  }, 50);
+}
+
+function goBackToLiteTasks() {
+  currentView = 'liteTasks';
+  currentSessionDetailKey = null;
+  updateContentTitle();
+  showStatsAndSearch();
+  renderLiteTasks();
+}
+
+function switchLiteDetailTab(tabName) {
+  // Update active tab
+  document.querySelectorAll('.detail-tab').forEach(tab => {
+    tab.classList.toggle('active', tab.dataset.tab === tabName);
+  });
+
+  const session = liteTaskDataStore[currentSessionDetailKey];
+  if (!session) return;
+
+  const contentArea = document.getElementById('liteDetailTabContent');
+  const tasks = session.tasks || [];
+  const completed = tasks.filter(t => t.status === 'completed').length;
+  const inProgress = tasks.filter(t => t.status === 'in_progress').length;
+  const pending = tasks.filter(t => t.status === 'pending').length;
+
+  switch (tabName) {
+    case 'tasks':
+      contentArea.innerHTML = renderLiteTasksTab(session, tasks, completed, inProgress, pending);
+      // Re-initialize collapsible sections
+      setTimeout(() => {
+        document.querySelectorAll('.collapsible-header').forEach(header => {
+          header.addEventListener('click', () => toggleSection(header));
+        });
+      }, 50);
+      break;
+    case 'plan':
+      contentArea.innerHTML = renderLitePlanTab(session);
+      break;
+    case 'context':
+      loadAndRenderLiteContextTab(session, contentArea);
+      break;
+    case 'summary':
+      loadAndRenderLiteSummaryTab(session, contentArea);
+      break;
+  }
+}
+
+function renderLiteTasksTab(session, tasks, completed, inProgress, pending) {
+  // Populate drawer tasks for click-to-open functionality
+  currentDrawerTasks = tasks;
+
+  if (tasks.length === 0) {
+    return `
+      <div class="tab-empty-state">
+        <div class="empty-icon">📋</div>
+        <div class="empty-title">No Tasks</div>
+        <div class="empty-text">This session has no tasks defined.</div>
+      </div>
+    `;
+  }
+
+  return `
+    <div class="tasks-tab-content">
+      <div class="tasks-list" id="liteTasksListContent">
+        ${tasks.map(task => renderLiteTaskDetailItem(session.id, task)).join('')}
+      </div>
+    </div>
+  `;
+}
+
+function renderLiteTaskDetailItem(sessionId, task) {
+  const rawTask = task._raw || task;
+  const taskJsonId = `task-json-${sessionId}-${task.id}`.replace(/[^a-zA-Z0-9-]/g, '-');
+  taskJsonStore[taskJsonId] = rawTask;
+
+  // Get preview info for lite tasks
+  const action = rawTask.action || '';
+  const scope = rawTask.scope || '';
+  const modCount = rawTask.modification_points?.length || 0;
+  const implCount = rawTask.implementation?.length || 0;
+  const acceptCount = rawTask.acceptance?.length || 0;
+
+  return `
+    <div class="detail-task-item-full lite-task-item" onclick="openTaskDrawerForLite('${sessionId}', '${escapeHtml(task.id)}')" style="cursor: pointer;" title="Click to view details">
+      <div class="task-item-header-lite">
+        <span class="task-id-badge">${escapeHtml(task.id)}</span>
+        <span class="task-title">${escapeHtml(task.title || 'Untitled')}</span>
+        <button class="btn-view-json" onclick="event.stopPropagation(); showJsonModal('${taskJsonId}', '${escapeHtml(task.id)}')">{ } JSON</button>
+      </div>
+      <div class="task-item-meta-lite">
+        ${action ? `<span class="meta-badge action">${escapeHtml(action)}</span>` : ''}
+        ${scope ? `<span class="meta-badge scope">${escapeHtml(scope)}</span>` : ''}
+        ${modCount > 0 ? `<span class="meta-badge mods">${modCount} mods</span>` : ''}
+        ${implCount > 0 ? `<span class="meta-badge impl">${implCount} steps</span>` : ''}
+        ${acceptCount > 0 ? `<span class="meta-badge accept">${acceptCount} acceptance</span>` : ''}
+      </div>
+    </div>
+  `;
+}
+
+function getMetaPreviewForLite(task, rawTask) {
+  const meta = task.meta || {};
+  const parts = [];
+  if (meta.type || rawTask.action) parts.push(meta.type || rawTask.action);
+  if (meta.scope || rawTask.scope) parts.push(meta.scope || rawTask.scope);
+  return parts.join(' | ') || 'No meta';
+}
+
+function openTaskDrawerForLite(sessionId, taskId) {
+  const session = liteTaskDataStore[currentSessionDetailKey];
+  if (!session) return;
+
+  const task = session.tasks?.find(t => t.id === taskId);
+  if (!task) return;
+
+  // Set current drawer tasks and session context
+  currentDrawerTasks = session.tasks || [];
+  window._currentDrawerSession = session;
+
+  document.getElementById('drawerTaskTitle').textContent = task.title || taskId;
+  // Use dedicated lite task drawer renderer
+  document.getElementById('drawerContent').innerHTML = renderLiteTaskDrawerContent(task, session);
+  document.getElementById('taskDetailDrawer').classList.add('open');
+  document.getElementById('drawerOverlay').classList.add('active');
+}
+
+function renderLitePlanTab(session) {
+  const plan = session.plan;
+
+  if (!plan) {
+    return `
+      <div class="tab-empty-state">
+        <div class="empty-icon">📐</div>
+        <div class="empty-title">No Plan Data</div>
+        <div class="empty-text">No plan.json found for this session.</div>
+      </div>
+    `;
+  }
+
+  return `
+    <div class="plan-tab-content">
+      <!-- Summary -->
+      ${plan.summary ? `
+        <div class="plan-section">
+          <h4 class="plan-section-title">📋 Summary</h4>
+          <p class="plan-summary-text">${escapeHtml(plan.summary)}</p>
+        </div>
+      ` : ''}
+
+      <!-- Approach -->
+      ${plan.approach ? `
+        <div class="plan-section">
+          <h4 class="plan-section-title">🎯 Approach</h4>
+          <p class="plan-approach-text">${escapeHtml(plan.approach)}</p>
+        </div>
+      ` : ''}
+
+      <!-- Focus Paths -->
+      ${plan.focus_paths?.length ? `
+        <div class="plan-section">
+          <h4 class="plan-section-title">📁 Focus Paths</h4>
+          <div class="path-tags">
+            ${plan.focus_paths.map(p => `<span class="path-tag">${escapeHtml(p)}</span>`).join('')}
+          </div>
+        </div>
+      ` : ''}
+
+      <!-- Metadata -->
+      <div class="plan-section">
+        <h4 class="plan-section-title">ℹ️ Metadata</h4>
+        <div class="plan-meta-grid">
+          ${plan.estimated_time ? `<div class="meta-item"><span class="meta-label">Estimated Time:</span> ${escapeHtml(plan.estimated_time)}</div>` : ''}
+          ${plan.complexity ? `<div class="meta-item"><span class="meta-label">Complexity:</span> ${escapeHtml(plan.complexity)}</div>` : ''}
+          ${plan.recommended_execution ? `<div class="meta-item"><span class="meta-label">Execution:</span> ${escapeHtml(plan.recommended_execution)}</div>` : ''}
+        </div>
+      </div>
+
+      <!-- Raw JSON -->
+      <div class="plan-section">
+        <h4 class="plan-section-title">{ } Raw JSON</h4>
+        <pre class="json-content">${escapeHtml(JSON.stringify(plan, null, 2))}</pre>
+      </div>
+    </div>
+  `;
+}
+
+async function loadAndRenderLiteContextTab(session, contentArea) {
+  contentArea.innerHTML = '<div class="tab-loading">Loading context data...</div>';
+
+  try {
+    if (window.SERVER_MODE && session.path) {
+      const response = await fetch(`/api/session-detail?path=${encodeURIComponent(session.path)}&type=context`);
+      if (response.ok) {
+        const data = await response.json();
+        contentArea.innerHTML = renderLiteContextContent(data.context, data.explorations, session);
+        
+        // Re-initialize collapsible sections for explorations (scoped to contentArea)
+        initCollapsibleSections(contentArea);
+        return;
+      }
+    }
+    // Fallback: show plan context if available
+    contentArea.innerHTML = renderLiteContextContent(null, null, session);
+    initCollapsibleSections(contentArea);
+  } catch (err) {
+    contentArea.innerHTML = `<div class="tab-error">Failed to load context: ${err.message}</div>`;
+  }
+}
+
+async function loadAndRenderLiteSummaryTab(session, contentArea) {
+  contentArea.innerHTML = '<div class="tab-loading">Loading summaries...</div>';
+
+  try {
+    if (window.SERVER_MODE && session.path) {
+      const response = await fetch(`/api/session-detail?path=${encodeURIComponent(session.path)}&type=summary`);
+      if (response.ok) {
+        const data = await response.json();
+        contentArea.innerHTML = renderSummaryContent(data.summaries);
+        return;
+      }
+    }
+    // Fallback
+    contentArea.innerHTML = `
+      <div class="tab-empty-state">
+        <div class="empty-icon">📝</div>
+        <div class="empty-title">No Summaries</div>
+        <div class="empty-text">No summaries found in .summaries/</div>
+      </div>
+    `;
+  } catch (err) {
+    contentArea.innerHTML = `<div class="tab-error">Failed to load summaries: ${err.message}</div>`;
+  }
+}

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

@@ -0,0 +1,271 @@
+// MCP Manager View
+// Renders the MCP server management interface
+
+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();
+  }
+
+  const currentPath = projectPath.replace(/\//g, '\\');
+  const projectData = mcpAllProjects[currentPath] || {};
+  const projectServers = projectData.mcpServers || {};
+  const disabledServers = projectData.disabledMcpServers || [];
+
+  // Get all available servers from all projects
+  const allAvailableServers = getAllAvailableMcpServers();
+
+  // Separate current project servers and available servers
+  const currentProjectServerNames = Object.keys(projectServers);
+  const otherAvailableServers = Object.entries(allAvailableServers)
+    .filter(([name]) => !currentProjectServerNames.includes(name));
+
+  container.innerHTML = `
+    <div class="mcp-manager">
+      <!-- Current Project 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">Current Project MCP Servers</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()">
+              <span>+</span> New Server
+            </button>
+          </div>
+          <span class="text-sm text-muted-foreground">${currentProjectServerNames.length} servers configured</span>
+        </div>
+
+        ${currentProjectServerNames.length === 0 ? `
+          <div class="mcp-empty-state bg-card border border-border rounded-lg p-6 text-center">
+            <div class="text-3xl mb-3">🔌</div>
+            <p class="text-muted-foreground">No MCP servers configured for this project</p>
+            <p class="text-sm text-muted-foreground mt-1">Add servers from the available list below</p>
+          </div>
+        ` : `
+          <div class="mcp-server-grid grid gap-3">
+            ${currentProjectServerNames.map(serverName => {
+              const serverConfig = projectServers[serverName];
+              const isEnabled = !disabledServers.includes(serverName);
+              return renderMcpServerCard(serverName, serverConfig, isEnabled, true);
+            }).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">Available from Other Projects</h3>
+          <span class="text-sm text-muted-foreground">${otherAvailableServers.length} servers available</span>
+        </div>
+
+        ${otherAvailableServers.length === 0 ? `
+          <div class="mcp-empty-state bg-card border border-border rounded-lg p-6 text-center">
+            <p class="text-muted-foreground">No additional MCP servers found in other projects</p>
+          </div>
+        ` : `
+          <div class="mcp-server-grid grid gap-3">
+            ${otherAvailableServers.map(([serverName, serverInfo]) => {
+              return renderAvailableServerCard(serverName, serverInfo);
+            }).join('')}
+          </div>
+        `}
+      </div>
+
+      <!-- All Projects MCP Overview Table -->
+      <div class="mcp-section mt-6">
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="text-lg font-semibold text-foreground">All Projects MCP Overview</h3>
+          <span class="text-sm text-muted-foreground">${Object.keys(mcpAllProjects).length} 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">Project</th>
+                <th class="text-left px-4 py-3 text-sm font-semibold text-foreground border-b border-border">MCP Servers</th>
+                <th class="text-center px-4 py-3 text-sm font-semibold text-foreground border-b border-border w-24">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;
+
+                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="text-base shrink-0">${isCurrentProject ? '📍' : '📁'}</span>
+                        <div class="min-w-0">
+                          <div class="font-medium text-foreground truncate text-sm" title="${escapeHtml(path)}">
+                            ${escapeHtml(path.split('\\').pop() || path)}
+                            ${isCurrentProject ? '<span class="ml-2 text-xs text-primary font-medium">(Current)</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">No MCP servers</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>
+    </div>
+  `;
+
+  // Attach event listeners for toggle switches
+  attachMcpEventListeners();
+}
+
+function renderMcpServerCard(serverName, serverConfig, isEnabled, isInCurrentProject) {
+  const command = serverConfig.command || 'N/A';
+  const args = serverConfig.args || [];
+  const hasEnv = serverConfig.env && Object.keys(serverConfig.env).length > 0;
+
+  return `
+    <div class="mcp-server-card bg-card border border-border rounded-lg p-4 hover:shadow-md transition-all ${isEnabled ? '' : 'opacity-60'}">
+      <div class="flex items-start justify-between mb-3">
+        <div class="flex items-center gap-2">
+          <span class="text-xl">${isEnabled ? '🟢' : '🔴'}</span>
+          <h4 class="font-semibold text-foreground">${escapeHtml(serverName)}</h4>
+        </div>
+        <label class="mcp-toggle relative inline-flex items-center cursor-pointer">
+          <input type="checkbox" class="sr-only peer"
+                 ${isEnabled ? 'checked' : ''}
+                 data-server-name="${escapeHtml(serverName)}"
+                 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">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">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">env</span>
+            <span class="text-xs">${Object.keys(serverConfig.env).length} variables</span>
+          </div>
+        ` : ''}
+      </div>
+
+      ${isInCurrentProject ? `
+        <div class="mt-3 pt-3 border-t border-border">
+          <button class="text-xs text-destructive hover:text-destructive/80 transition-colors"
+                  data-server-name="${escapeHtml(serverName)}"
+                  data-action="remove">
+            Remove from project
+          </button>
+        </div>
+      ` : ''}
+    </div>
+  `;
+}
+
+function renderAvailableServerCard(serverName, serverInfo) {
+  const serverConfig = serverInfo.config;
+  const usedIn = serverInfo.usedIn || [];
+  const command = serverConfig.command || 'N/A';
+
+  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">
+          <span class="text-xl">⚪</span>
+          <h4 class="font-semibold text-foreground">${escapeHtml(serverName)}</h4>
+        </div>
+        <button class="px-3 py-1 text-xs bg-primary text-primary-foreground rounded hover:opacity-90 transition-opacity"
+                data-server-name="${escapeHtml(serverName)}"
+                data-server-config='${JSON.stringify(serverConfig).replace(/'/g, "&#39;")}'
+                data-action="add">
+          Add
+        </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">cmd</span>
+          <span class="truncate" title="${escapeHtml(command)}">${escapeHtml(command)}</span>
+        </div>
+        <div class="flex items-center gap-2 text-muted-foreground">
+          <span class="text-xs">Used in ${usedIn.length} project${usedIn.length !== 1 ? 's' : ''}</span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+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 buttons
+  document.querySelectorAll('.mcp-server-card button[data-action="add"]').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      const serverName = e.target.dataset.serverName;
+      const serverConfig = JSON.parse(e.target.dataset.serverConfig);
+      await copyMcpServerToProject(serverName, serverConfig);
+    });
+  });
+
+  // Remove buttons
+  document.querySelectorAll('.mcp-server-card button[data-action="remove"]').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      const serverName = e.target.dataset.serverName;
+      if (confirm(`Remove MCP server "${serverName}" from this project?`)) {
+        await removeMcpServerFromProject(serverName);
+      }
+    });
+  });
+}