feat: Add Notifications Component with WebSocket and Auto Refresh

- Implemented a Notifications component for real-time updates using WebSocket.
- Added silent refresh functionality to update data without notification bubbles.
- Introduced auto-refresh mechanism to periodically check for changes in workflow data.
- Enhanced data handling with session and task updates, ensuring UI reflects the latest state.

feat: Create Hook Manager View for Managing Hooks

- Developed a Hook Manager view to manage project and global hooks.
- Added functionality to create, edit, and delete hooks with a user-friendly interface.
- Implemented quick install templates for common hooks to streamline user experience.
- Included environment variables reference for hooks to assist users in configuration.

feat: Implement MCP Manager View for Server Management

- Created an MCP Manager view for managing MCP servers within projects.
- Enabled adding and removing servers from projects with a clear UI.
- Displayed available servers from other projects for easy access and management.
- Provided an overview of all projects and their associated MCP servers.

feat: Add Version Fetcher Utility for GitHub Releases

- Implemented a version fetcher utility to retrieve release information from GitHub.
- Added functions to fetch the latest release, recent releases, and latest commit details.
- Included functionality to download and extract repository zip files.
- Ensured cleanup of temporary directories after downloads to maintain system hygiene.

ccw/src/templates/dashboard-js/views/home.js

@@ -3,12 +3,23 @@
 // ==========================================
 
 function renderDashboard() {
+  // Show stats grid and search (may be hidden by MCP view)
+  showStatsAndSearch();
+
   updateStats();
   updateBadges();
+  updateCarousel();
   renderSessions();
   document.getElementById('generatedAt').textContent = workflowData.generatedAt || new Date().toISOString();
 }
 
+function showStatsAndSearch() {
+  const statsGrid = document.getElementById('statsGrid');
+  const searchInput = document.getElementById('searchInput');
+  if (statsGrid) statsGrid.style.display = '';
+  if (searchInput) searchInput.parentElement.style.display = '';
+}
+
 function updateStats() {
   const stats = workflowData.statistics || {};
   document.getElementById('statTotalSessions').textContent = stats.totalSessions || 0;
@@ -29,6 +40,15 @@ function updateBadges() {
   const liteTasks = workflowData.liteTasks || {};
   document.getElementById('badgeLitePlan').textContent = liteTasks.litePlan?.length || 0;
   document.getElementById('badgeLiteFix').textContent = liteTasks.liteFix?.length || 0;
+
+  // MCP badge - load async if needed
+  if (typeof loadMcpConfig === 'function') {
+    loadMcpConfig().then(() => {
+      if (typeof updateMcpBadge === 'function') {
+        updateMcpBadge();
+      }
+    }).catch(e => console.error('MCP badge update failed:', e));
+  }
 }
 
 function renderSessions() {

ccw/src/templates/dashboard-js/views/hook-manager.js

@@ -0,0 +1,387 @@
+// Hook Manager View
+// Renders the Claude Code hooks management interface
+
+async function renderHookManager() {
+  const container = document.getElementById('mainContent');
+  if (!container) return;
+
+  // Hide stats grid and search for Hook 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 hook config if not already loaded
+  if (!hookConfig.global.hooks && !hookConfig.project.hooks) {
+    await loadHookConfig();
+  }
+
+  const globalHooks = hookConfig.global?.hooks || {};
+  const projectHooks = hookConfig.project?.hooks || {};
+
+  // Count hooks
+  const globalHookCount = countHooks(globalHooks);
+  const projectHookCount = countHooks(projectHooks);
+
+  container.innerHTML = `
+    <div class="hook-manager">
+      <!-- Project Hooks -->
+      <div class="hook-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">Project Hooks</h3>
+            <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-primary-light text-primary">.claude/settings.json</span>
+            <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="openHookCreateModal()">
+              <span>+</span> New Hook
+            </button>
+          </div>
+          <span class="text-sm text-muted-foreground">${projectHookCount} hooks configured</span>
+        </div>
+
+        ${projectHookCount === 0 ? `
+          <div class="hook-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 hooks configured for this project</p>
+            <p class="text-sm text-muted-foreground mt-1">Create a hook to automate actions on tool usage</p>
+          </div>
+        ` : `
+          <div class="hook-grid grid gap-3">
+            ${renderHooksByEvent(projectHooks, 'project')}
+          </div>
+        `}
+      </div>
+
+      <!-- Global Hooks -->
+      <div class="hook-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">Global Hooks</h3>
+            <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-muted text-muted-foreground">~/.claude/settings.json</span>
+          </div>
+          <span class="text-sm text-muted-foreground">${globalHookCount} hooks configured</span>
+        </div>
+
+        ${globalHookCount === 0 ? `
+          <div class="hook-empty-state bg-card border border-border rounded-lg p-6 text-center">
+            <p class="text-muted-foreground">No global hooks configured</p>
+            <p class="text-sm text-muted-foreground mt-1">Global hooks apply to all Claude Code sessions</p>
+          </div>
+        ` : `
+          <div class="hook-grid grid gap-3">
+            ${renderHooksByEvent(globalHooks, 'global')}
+          </div>
+        `}
+      </div>
+
+      <!-- Quick Install Templates -->
+      <div class="hook-section">
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="text-lg font-semibold text-foreground">Quick Install Templates</h3>
+          <span class="text-sm text-muted-foreground">One-click hook installation</span>
+        </div>
+
+        <div class="hook-templates-grid grid grid-cols-1 md:grid-cols-2 gap-4">
+          ${renderQuickInstallCard('ccw-notify', 'CCW Dashboard Notify', 'Notify CCW dashboard when files are written', 'PostToolUse', 'Write')}
+          ${renderQuickInstallCard('log-tool', 'Tool Usage Logger', 'Log all tool executions to a file', 'PostToolUse', 'All')}
+          ${renderQuickInstallCard('lint-check', 'Auto Lint Check', 'Run ESLint on JavaScript/TypeScript files after write', 'PostToolUse', 'Write')}
+          ${renderQuickInstallCard('git-add', 'Auto Git Stage', 'Automatically stage written files to git', 'PostToolUse', 'Write')}
+        </div>
+      </div>
+
+      <!-- Hook Environment Variables Reference -->
+      <div class="hook-section mt-6">
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="text-lg font-semibold text-foreground">Environment Variables Reference</h3>
+        </div>
+
+        <div class="bg-card border border-border rounded-lg p-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+            <div class="space-y-2">
+              <div class="flex items-start gap-2">
+                <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_FILE_PATHS</code>
+                <span class="text-muted-foreground">Space-separated file paths affected</span>
+              </div>
+              <div class="flex items-start gap-2">
+                <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_TOOL_NAME</code>
+                <span class="text-muted-foreground">Name of the tool being executed</span>
+              </div>
+              <div class="flex items-start gap-2">
+                <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_TOOL_INPUT</code>
+                <span class="text-muted-foreground">JSON input passed to the tool</span>
+              </div>
+            </div>
+            <div class="space-y-2">
+              <div class="flex items-start gap-2">
+                <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_SESSION_ID</code>
+                <span class="text-muted-foreground">Current Claude session ID</span>
+              </div>
+              <div class="flex items-start gap-2">
+                <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_PROJECT_DIR</code>
+                <span class="text-muted-foreground">Current project directory path</span>
+              </div>
+              <div class="flex items-start gap-2">
+                <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_WORKING_DIR</code>
+                <span class="text-muted-foreground">Current working directory</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+
+  // Attach event listeners
+  attachHookEventListeners();
+}
+
+function countHooks(hooks) {
+  let count = 0;
+  for (const event of Object.keys(hooks)) {
+    const hookList = hooks[event];
+    count += Array.isArray(hookList) ? hookList.length : 1;
+  }
+  return count;
+}
+
+function renderHooksByEvent(hooks, scope) {
+  const events = Object.keys(hooks);
+  if (events.length === 0) return '';
+
+  return events.map(event => {
+    const hookList = Array.isArray(hooks[event]) ? hooks[event] : [hooks[event]];
+
+    return hookList.map((hook, index) => {
+      const matcher = hook.matcher || 'All tools';
+      const command = hook.command || 'N/A';
+      const args = hook.args || [];
+
+      return `
+        <div class="hook-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 items-center gap-2">
+              <span class="text-xl">${getHookEventIcon(event)}</span>
+              <div>
+                <h4 class="font-semibold text-foreground">${event}</h4>
+                <p class="text-xs text-muted-foreground">${getHookEventDescription(event)}</p>
+              </div>
+            </div>
+            <div class="flex items-center gap-2">
+              <button class="p-1.5 text-muted-foreground hover:text-foreground hover:bg-hover rounded transition-colors"
+                      data-scope="${scope}"
+                      data-event="${event}"
+                      data-index="${index}"
+                      data-action="edit"
+                      title="Edit hook">
+                ✏️
+              </button>
+              <button class="p-1.5 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded transition-colors"
+                      data-scope="${scope}"
+                      data-event="${event}"
+                      data-index="${index}"
+                      data-action="delete"
+                      title="Delete hook">
+                🗑️
+              </button>
+            </div>
+          </div>
+
+          <div class="hook-details text-sm space-y-2">
+            <div class="flex items-center gap-2">
+              <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">matcher</span>
+              <span class="text-muted-foreground">${escapeHtml(matcher)}</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">command</span>
+              <span class="font-mono text-xs text-foreground">${escapeHtml(command)}</span>
+            </div>
+            ${args.length > 0 ? `
+              <div class="flex items-start gap-2">
+                <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">args</span>
+                <span class="font-mono text-xs text-muted-foreground truncate" title="${escapeHtml(args.join(' '))}">${escapeHtml(args.slice(0, 3).join(' '))}${args.length > 3 ? '...' : ''}</span>
+              </div>
+            ` : ''}
+          </div>
+        </div>
+      `;
+    }).join('');
+  }).join('');
+}
+
+function renderQuickInstallCard(templateId, title, description, event, matcher) {
+  const isInstalled = isHookTemplateInstalled(templateId);
+
+  return `
+    <div class="hook-template-card bg-card border border-border rounded-lg p-4 hover:shadow-md transition-all ${isInstalled ? 'border-success bg-success-light/30' : ''}">
+      <div class="flex items-start justify-between mb-3">
+        <div class="flex items-center gap-2">
+          <span class="text-xl">${isInstalled ? '✅' : '🪝'}</span>
+          <div>
+            <h4 class="font-semibold text-foreground">${escapeHtml(title)}</h4>
+            <p class="text-xs text-muted-foreground">${escapeHtml(description)}</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="hook-template-meta text-xs text-muted-foreground mb-3 flex items-center gap-3">
+        <span class="flex items-center gap-1">
+          <span class="font-mono bg-muted px-1 py-0.5 rounded">${event}</span>
+        </span>
+        <span class="flex items-center gap-1">
+          Matches: <span class="font-medium">${matcher}</span>
+        </span>
+      </div>
+
+      <div class="flex items-center gap-2">
+        ${isInstalled ? `
+          <button class="flex-1 px-3 py-1.5 text-sm bg-destructive/10 text-destructive rounded hover:bg-destructive/20 transition-colors"
+                  data-template="${templateId}"
+                  data-action="uninstall">
+            Uninstall
+          </button>
+        ` : `
+          <button class="flex-1 px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded hover:opacity-90 transition-opacity"
+                  data-template="${templateId}"
+                  data-action="install-project">
+            Install (Project)
+          </button>
+          <button class="px-3 py-1.5 text-sm bg-muted text-foreground rounded hover:bg-hover transition-colors"
+                  data-template="${templateId}"
+                  data-action="install-global">
+            Global
+          </button>
+        `}
+      </div>
+    </div>
+  `;
+}
+
+function isHookTemplateInstalled(templateId) {
+  const template = HOOK_TEMPLATES[templateId];
+  if (!template) return false;
+
+  // Check project hooks
+  const projectHooks = hookConfig.project?.hooks?.[template.event];
+  if (projectHooks) {
+    const hookList = Array.isArray(projectHooks) ? projectHooks : [projectHooks];
+    if (hookList.some(h => h.command === template.command)) return true;
+  }
+
+  // Check global hooks
+  const globalHooks = hookConfig.global?.hooks?.[template.event];
+  if (globalHooks) {
+    const hookList = Array.isArray(globalHooks) ? globalHooks : [globalHooks];
+    if (hookList.some(h => h.command === template.command)) return true;
+  }
+
+  return false;
+}
+
+async function installHookTemplate(templateId, scope) {
+  const template = HOOK_TEMPLATES[templateId];
+  if (!template) {
+    showRefreshToast('Template not found', 'error');
+    return;
+  }
+
+  const hookData = {
+    command: template.command,
+    args: template.args
+  };
+
+  if (template.matcher) {
+    hookData.matcher = template.matcher;
+  }
+
+  await saveHook(scope, template.event, hookData);
+}
+
+async function uninstallHookTemplate(templateId) {
+  const template = HOOK_TEMPLATES[templateId];
+  if (!template) return;
+
+  // Find and remove from project hooks
+  const projectHooks = hookConfig.project?.hooks?.[template.event];
+  if (projectHooks) {
+    const hookList = Array.isArray(projectHooks) ? projectHooks : [projectHooks];
+    const index = hookList.findIndex(h => h.command === template.command);
+    if (index !== -1) {
+      await removeHook('project', template.event, index);
+      return;
+    }
+  }
+
+  // Find and remove from global hooks
+  const globalHooks = hookConfig.global?.hooks?.[template.event];
+  if (globalHooks) {
+    const hookList = Array.isArray(globalHooks) ? globalHooks : [globalHooks];
+    const index = hookList.findIndex(h => h.command === template.command);
+    if (index !== -1) {
+      await removeHook('global', template.event, index);
+      return;
+    }
+  }
+}
+
+function attachHookEventListeners() {
+  // Edit buttons
+  document.querySelectorAll('.hook-card button[data-action="edit"]').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      const scope = e.target.dataset.scope;
+      const event = e.target.dataset.event;
+      const index = parseInt(e.target.dataset.index);
+
+      const hooks = scope === 'global' ? hookConfig.global.hooks : hookConfig.project.hooks;
+      const hookList = Array.isArray(hooks[event]) ? hooks[event] : [hooks[event]];
+      const hook = hookList[index];
+
+      if (hook) {
+        openHookCreateModal({
+          scope: scope,
+          event: event,
+          index: index,
+          matcher: hook.matcher || '',
+          command: hook.command,
+          args: hook.args || []
+        });
+      }
+    });
+  });
+
+  // Delete buttons
+  document.querySelectorAll('.hook-card button[data-action="delete"]').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      const scope = e.target.dataset.scope;
+      const event = e.target.dataset.event;
+      const index = parseInt(e.target.dataset.index);
+
+      if (confirm(`Remove this ${event} hook?`)) {
+        await removeHook(scope, event, index);
+      }
+    });
+  });
+
+  // Install project buttons
+  document.querySelectorAll('button[data-action="install-project"]').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      const templateId = e.target.dataset.template;
+      await installHookTemplate(templateId, 'project');
+    });
+  });
+
+  // Install global buttons
+  document.querySelectorAll('button[data-action="install-global"]').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      const templateId = e.target.dataset.template;
+      await installHookTemplate(templateId, 'global');
+    });
+  });
+
+  // Uninstall buttons
+  document.querySelectorAll('button[data-action="uninstall"]').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      const templateId = e.target.dataset.template;
+      await uninstallHookTemplate(templateId);
+    });
+  });
+}

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

@@ -345,12 +345,19 @@ async function loadAndRenderLiteContextTab(session, contentArea) {
       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, session);
+        contentArea.innerHTML = renderLiteContextContent(data.context, data.explorations, session);
+        
+        // Re-initialize collapsible sections for explorations
+        setTimeout(() => {
+          document.querySelectorAll('.collapsible-header').forEach(header => {
+            header.addEventListener('click', () => toggleSection(header));
+          });
+        }, 50);
         return;
       }
     }
     // Fallback: show plan context if available
-    contentArea.innerHTML = renderLiteContextContent(null, session);
+    contentArea.innerHTML = renderLiteContextContent(null, null, session);
   } catch (err) {
     contentArea.innerHTML = `<div class="tab-error">Failed to load context: ${err.message}</div>`;
   }

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

@@ -0,0 +1,242 @@
+// 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 Overview -->
+      <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</h3>
+          <span class="text-sm text-muted-foreground">${Object.keys(mcpAllProjects).length} projects</span>
+        </div>
+
+        <div class="mcp-projects-list bg-card border border-border rounded-lg overflow-hidden">
+          ${Object.entries(mcpAllProjects).map(([path, config]) => {
+            const servers = config.mcpServers || {};
+            const serverCount = Object.keys(servers).length;
+            const isCurrentProject = path === currentPath;
+            return `
+              <div class="mcp-project-item flex items-center justify-between px-4 py-3 border-b border-border last:border-b-0 hover:bg-hover cursor-pointer ${isCurrentProject ? 'bg-primary-light' : ''}"
+                   onclick="switchToProject('${escapeHtml(path)}')"
+                   data-project-path="${escapeHtml(path)}">
+                <div class="flex items-center gap-3 min-w-0">
+                  <span class="text-lg">${isCurrentProject ? '📍' : '📁'}</span>
+                  <div class="min-w-0">
+                    <div class="font-medium text-foreground truncate" title="${escapeHtml(path)}">${escapeHtml(path.split('\\').pop() || path)}</div>
+                    <div class="text-xs text-muted-foreground truncate">${escapeHtml(path)}</div>
+                  </div>
+                </div>
+                <div class="flex items-center gap-2 shrink-0">
+                  <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full ${serverCount > 0 ? 'bg-success-light text-success' : 'bg-hover text-muted-foreground'}">${serverCount} MCP</span>
+                  ${isCurrentProject ? '<span class="text-xs text-primary font-medium">Current</span>' : ''}
+                </div>
+              </div>
+            `;
+          }).join('')}
+        </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);
+      }
+    });
+  });
+}
+
+function switchToProject(path) {
+  // Use existing path selection mechanism
+  selectPath(path.replace(/\\\\/g, '\\'));
+}

ccw/src/templates/dashboard-js/views/project-overview.js

@@ -3,6 +3,9 @@
 // ==========================================
 
 function renderProjectOverview() {
+  // Show stats grid and search (may be hidden by MCP view)
+  if (typeof showStatsAndSearch === 'function') showStatsAndSearch();
+
   const container = document.getElementById('mainContent');
   const project = workflowData.projectOverview;