claude-code-workflow 6.3.18 → 6.3.19

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

@@ -1201,6 +1201,317 @@ function setPreferredProjectConfigType(type) {
   }
 }
 
+// ========== Recommended MCP Servers ==========
+// Pre-configured MCP server definitions for easy installation
+
+const RECOMMENDED_MCP_SERVERS = [
+  {
+    id: 'ace-tool',
+    nameKey: 'mcp.ace-tool.name',
+    descKey: 'mcp.ace-tool.desc',
+    icon: 'search-code',
+    category: 'search',
+    fields: [
+      {
+        key: 'baseUrl',
+        labelKey: 'mcp.ace-tool.field.baseUrl',
+        type: 'text',
+        default: 'https://acemcp.heroman.wtf/relay/',
+        placeholder: 'https://acemcp.heroman.wtf/relay/',
+        required: true,
+        descKey: 'mcp.ace-tool.field.baseUrl.desc'
+      },
+      {
+        key: 'token',
+        labelKey: 'mcp.ace-tool.field.token',
+        type: 'password',
+        default: '',
+        placeholder: 'ace_xxxxxxxxxxxxxxxx',
+        required: true,
+        descKey: 'mcp.ace-tool.field.token.desc'
+      }
+    ],
+    buildConfig: (values) => ({
+      command: 'npx',
+      args: [
+        'ace-tool',
+        '--base-url',
+        values.baseUrl || 'https://acemcp.heroman.wtf/relay/',
+        '--token',
+        values.token
+      ]
+    })
+  },
+  {
+    id: 'chrome-devtools',
+    nameKey: 'mcp.chrome-devtools.name',
+    descKey: 'mcp.chrome-devtools.desc',
+    icon: 'chrome',
+    category: 'browser',
+    fields: [],
+    buildConfig: () => ({
+      type: 'stdio',
+      command: 'npx',
+      args: ['chrome-devtools-mcp@latest'],
+      env: {}
+    })
+  },
+  {
+    id: 'exa',
+    nameKey: 'mcp.exa.name',
+    descKey: 'mcp.exa.desc',
+    icon: 'globe-2',
+    category: 'search',
+    fields: [
+      {
+        key: 'apiKey',
+        labelKey: 'mcp.exa.field.apiKey',
+        type: 'password',
+        default: '',
+        placeholder: 'your-exa-api-key',
+        required: false,
+        descKey: 'mcp.exa.field.apiKey.desc'
+      }
+    ],
+    buildConfig: (values) => {
+      const config = {
+        command: 'npx',
+        args: ['-y', 'exa-mcp-server']
+      };
+      // Only add env if API key is provided
+      if (values.apiKey) {
+        config.env = { EXA_API_KEY: values.apiKey };
+      }
+      return config;
+    }
+  }
+];
+
+// Get recommended MCP servers list
+function getRecommendedMcpServers() {
+  return RECOMMENDED_MCP_SERVERS;
+}
+
+// Check if a recommended MCP is already installed
+function isRecommendedMcpInstalled(mcpId) {
+  // Check in current project servers (handle different path formats)
+  const forwardSlashPath = projectPath.replace(/\\/g, '/');
+  const backSlashPath = projectPath.replace(/\//g, '\\');
+  const projectData = mcpAllProjects[forwardSlashPath] || mcpAllProjects[backSlashPath] || mcpAllProjects[projectPath] || {};
+  const projectServers = projectData.mcpServers || {};
+
+  if (projectServers[mcpId]) return { installed: true, scope: 'project' };
+
+  // Check in global servers
+  if (mcpUserServers && mcpUserServers[mcpId]) return { installed: true, scope: 'global' };
+
+  // Check in Codex servers
+  if (codexMcpServers && codexMcpServers[mcpId]) return { installed: true, scope: 'codex' };
+
+  return { installed: false, scope: null };
+}
+
+// Open recommended MCP install wizard modal
+function openRecommendedMcpWizard(mcpId) {
+  const mcpDef = RECOMMENDED_MCP_SERVERS.find(m => m.id === mcpId);
+  if (!mcpDef) {
+    showRefreshToast(`Unknown MCP: ${mcpId}`, 'error');
+    return;
+  }
+
+  // Create wizard modal
+  const existingModal = document.getElementById('recommendedMcpWizardModal');
+  if (existingModal) {
+    existingModal.remove();
+  }
+
+  const hasFields = mcpDef.fields && mcpDef.fields.length > 0;
+  const mcpName = t(mcpDef.nameKey);
+  const mcpDesc = t(mcpDef.descKey);
+
+  const modal = document.createElement('div');
+  modal.id = 'recommendedMcpWizardModal';
+  modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
+  modal.innerHTML = `
+    <div class="bg-card border border-border rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
+      <!-- Header -->
+      <div class="flex items-center justify-between p-4 border-b border-border">
+        <div class="flex items-center gap-3">
+          <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
+            <i data-lucide="${mcpDef.icon}" class="w-5 h-5 text-primary"></i>
+          </div>
+          <div>
+            <h3 class="text-lg font-semibold text-foreground">${t('mcp.wizard.install')} ${escapeHtml(mcpName)}</h3>
+            <p class="text-sm text-muted-foreground">${escapeHtml(mcpDesc)}</p>
+          </div>
+        </div>
+        <button onclick="closeRecommendedMcpWizard()" class="text-muted-foreground hover:text-foreground">
+          <i data-lucide="x" class="w-5 h-5"></i>
+        </button>
+      </div>
+
+      <!-- Content -->
+      <div class="p-4 space-y-4">
+        ${hasFields ? `
+          <div class="space-y-3">
+            ${mcpDef.fields.map(field => `
+              <div class="space-y-1.5">
+                <label class="flex items-center gap-1.5 text-sm font-medium text-foreground">
+                  ${escapeHtml(t(field.labelKey))}
+                  ${field.required ? '<span class="text-destructive">*</span>' : ''}
+                </label>
+                ${field.descKey ? `<p class="text-xs text-muted-foreground">${escapeHtml(t(field.descKey))}</p>` : ''}
+                <input type="${field.type || 'text'}"
+                       id="wizard-field-${field.key}"
+                       class="w-full px-3 py-2 text-sm bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
+                       placeholder="${escapeHtml(field.placeholder || '')}"
+                       value="${escapeHtml(field.default || '')}"
+                       ${field.required ? 'required' : ''}>
+              </div>
+            `).join('')}
+          </div>
+        ` : `
+          <div class="bg-success/10 border border-success/20 rounded-lg p-4 text-center">
+            <i data-lucide="check-circle" class="w-8 h-8 text-success mx-auto mb-2"></i>
+            <p class="text-sm text-foreground">${t('mcp.wizard.noConfig')}</p>
+          </div>
+        `}
+
+        <!-- Scope Selection -->
+        <div class="space-y-2 pt-2 border-t border-border">
+          <label class="text-sm font-medium text-foreground">${t('mcp.wizard.installTo')}</label>
+          <div class="grid grid-cols-3 gap-2">
+            <button type="button"
+                    class="wizard-scope-btn px-3 py-2 text-sm border border-border rounded-lg hover:bg-accent transition-colors flex items-center justify-center gap-1.5"
+                    data-scope="project"
+                    onclick="selectWizardScope('project')">
+              <i data-lucide="folder" class="w-4 h-4"></i>
+              ${t('mcp.wizard.project')}
+            </button>
+            <button type="button"
+                    class="wizard-scope-btn px-3 py-2 text-sm border border-border rounded-lg hover:bg-accent transition-colors flex items-center justify-center gap-1.5 bg-primary/10 border-primary"
+                    data-scope="global"
+                    onclick="selectWizardScope('global')">
+              <i data-lucide="globe" class="w-4 h-4"></i>
+              ${t('mcp.wizard.global')}
+            </button>
+            <button type="button"
+                    class="wizard-scope-btn px-3 py-2 text-sm border border-border rounded-lg hover:bg-accent transition-colors flex items-center justify-center gap-1.5"
+                    data-scope="codex"
+                    onclick="selectWizardScope('codex')">
+              <i data-lucide="code-2" class="w-4 h-4"></i>
+              Codex
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="flex items-center justify-end gap-2 p-4 border-t border-border">
+        <button onclick="closeRecommendedMcpWizard()"
+                class="px-4 py-2 text-sm border border-border rounded-lg hover:bg-accent transition-colors">
+          ${t('common.cancel')}
+        </button>
+        <button onclick="submitRecommendedMcpWizard('${mcpId}')"
+                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="download" class="w-4 h-4"></i>
+          ${t('mcp.wizard.install')}
+        </button>
+      </div>
+    </div>
+  `;
+
+  document.body.appendChild(modal);
+
+  // Initialize Lucide icons in modal
+  if (typeof lucide !== 'undefined') {
+    lucide.createIcons();
+  }
+
+  // Set default scope to global
+  window.selectedWizardScope = 'global';
+
+  // Focus first input if exists
+  if (hasFields) {
+    const firstInput = modal.querySelector('input');
+    if (firstInput) firstInput.focus();
+  }
+}
+
+// Close recommended MCP wizard modal
+function closeRecommendedMcpWizard() {
+  const modal = document.getElementById('recommendedMcpWizardModal');
+  if (modal) {
+    modal.remove();
+  }
+}
+
+// Select scope in wizard
+function selectWizardScope(scope) {
+  window.selectedWizardScope = scope;
+
+  // Update button states
+  const buttons = document.querySelectorAll('.wizard-scope-btn');
+  buttons.forEach(btn => {
+    if (btn.dataset.scope === scope) {
+      btn.classList.add('bg-primary/10', 'border-primary');
+    } else {
+      btn.classList.remove('bg-primary/10', 'border-primary');
+    }
+  });
+}
+
+// Submit recommended MCP wizard
+async function submitRecommendedMcpWizard(mcpId) {
+  const mcpDef = RECOMMENDED_MCP_SERVERS.find(m => m.id === mcpId);
+  if (!mcpDef) {
+    showRefreshToast(`Unknown MCP: ${mcpId}`, 'error');
+    return;
+  }
+
+  // Collect field values
+  const values = {};
+  let hasError = false;
+
+  for (const field of mcpDef.fields) {
+    const input = document.getElementById(`wizard-field-${field.key}`);
+    const value = input ? input.value.trim() : '';
+
+    if (field.required && !value) {
+      showRefreshToast(`${t(field.labelKey)} is required`, 'error');
+      if (input) input.focus();
+      hasError = true;
+      break;
+    }
+
+    values[field.key] = value;
+  }
+
+  if (hasError) return;
+
+  // Build config
+  const serverConfig = mcpDef.buildConfig(values);
+  const scope = window.selectedWizardScope || 'global';
+
+  try {
+    showRefreshToast(`Installing ${mcpDef.name}...`, 'info');
+
+    if (scope === 'codex') {
+      await addCodexMcpServer(mcpId, serverConfig);
+    } else if (scope === 'global') {
+      await addGlobalMcpServer(mcpId, serverConfig);
+    } else {
+      await copyMcpServerToProject(mcpId, serverConfig);
+    }
+
+    closeRecommendedMcpWizard();
+    // Note: success toast is shown by the underlying API functions
+  } catch (err) {
+    console.error(`Failed to install ${mcpDef.name}:`, err);
+    showRefreshToast(`Failed to install ${mcpDef.name}: ${err.message}`, 'error');
+  }
+}
+
 // ========== Global Exports for onclick handlers ==========
 // Expose functions to global scope to support inline onclick handlers
 window.setCliMode = setCliMode;
@@ -1212,3 +1523,9 @@ window.toggleProjectConfigType = toggleProjectConfigType;
 window.getPreferredProjectConfigType = getPreferredProjectConfigType;
 window.setPreferredProjectConfigType = setPreferredProjectConfigType;
 window.setCcwProjectRootToCurrent = setCcwProjectRootToCurrent;
+window.getRecommendedMcpServers = getRecommendedMcpServers;
+window.isRecommendedMcpInstalled = isRecommendedMcpInstalled;
+window.openRecommendedMcpWizard = openRecommendedMcpWizard;
+window.closeRecommendedMcpWizard = closeRecommendedMcpWizard;
+window.selectWizardScope = selectWizardScope;
+window.submitRecommendedMcpWizard = submitRecommendedMcpWizard;

package/ccw/src/templates/dashboard-js/components/navigation.js

@@ -327,6 +327,51 @@ function updateSidebarCounts(data) {
   if (liteFixCount) liteFixCount.textContent = data.liteTasks?.liteFix?.length || 0;
 }
 
+// ========== Navigation Badge Aggregation ==========
+
+/**
+ * Update a single badge element by ID
+ * @param {string} badgeId - Element ID
+ * @param {number|undefined} count - Badge count value
+ */
+function updateBadgeById(badgeId, count) {
+  const badge = document.getElementById(badgeId);
+  if (badge && count !== undefined) {
+    badge.textContent = count;
+  }
+}
+
+/**
+ * Fetch and update all navigation badges at once
+ * Called on dashboard initialization and path switch
+ */
+async function updateAllNavigationBadges() {
+  if (!window.SERVER_MODE) return;
+
+  try {
+    const response = await fetch('/api/nav-status?path=' + encodeURIComponent(projectPath));
+    if (!response.ok) {
+      console.warn('[Nav Status] Failed to fetch:', response.status);
+      return;
+    }
+
+    const status = await response.json();
+
+    // Update each badge
+    updateBadgeById('badgeIssues', status.issues?.count);
+    updateBadgeById('badgeDiscovery', status.discoveries?.count);
+    updateBadgeById('badgeSkills', status.skills?.count);
+    updateBadgeById('badgeRules', status.rules?.count);
+    updateBadgeById('badgeClaude', status.claude?.count);
+    updateBadgeById('badgeHooks', status.hooks?.count);
+
+    console.log('[Nav Status] Badges updated:', status);
+  } catch (err) {
+    console.error('[Nav Status] Error fetching status:', err);
+    // Graceful degradation - badges will update when user visits each page
+  }
+}
+
 function showRefreshToast(message, type) {
   // Remove existing toast
   const existing = document.querySelector('.status-toast');

package/ccw/src/templates/dashboard-js/components/notifications.js

@@ -415,6 +415,11 @@ function handleNotification(data) {
           'CodexLens'
         );
       }
+      // Invalidate CodexLens page cache to ensure fresh data on next visit
+      if (typeof window.invalidateCodexLensCache === 'function') {
+        window.invalidateCodexLensCache();
+        console.log('[CodexLens] Cache invalidated after installation');
+      }
       // Refresh CLI status if active
       if (typeof loadCodexLensStatus === 'function') {
         loadCodexLensStatus().then(() => {
@@ -438,6 +443,11 @@ function handleNotification(data) {
           'CodexLens'
         );
       }
+      // Invalidate CodexLens page cache to ensure fresh data on next visit
+      if (typeof window.invalidateCodexLensCache === 'function') {
+        window.invalidateCodexLensCache();
+        console.log('[CodexLens] Cache invalidated after uninstallation');
+      }
       // Refresh CLI status if active
       if (typeof loadCodexLensStatus === 'function') {
         loadCodexLensStatus().then(() => {
@@ -455,6 +465,124 @@ function handleNotification(data) {
       console.log('[CodexLens] Index progress:', payload.stage, payload.percent + '%');
       break;
 
+    case 'CODEXLENS_WATCHER_STATUS':
+      // Handle CodexLens file watcher status updates
+      if (typeof handleWatcherStatusUpdate === 'function') {
+        handleWatcherStatusUpdate(payload);
+      }
+      if (payload.error) {
+        console.error('[CodexLens] Watcher error:', payload.error);
+        if (typeof showRefreshToast === 'function') {
+          showRefreshToast('Watcher error: ' + payload.error, 'error');
+        }
+      } else if (payload.running) {
+        console.log('[CodexLens] Watcher running:', payload.path);
+      } else {
+        console.log('[CodexLens] Watcher stopped');
+      }
+      break;
+
+    case 'CODEXLENS_WATCHER_UPDATE':
+      // Handle CodexLens watcher real-time updates (file changes detected)
+      if (typeof handleWatcherStatusUpdate === 'function') {
+        handleWatcherStatusUpdate(payload);
+      }
+      console.log('[CodexLens] Watcher update:', payload.events_processed, 'events');
+      break;
+
+    case 'CODEXLENS_WATCHER_QUEUE_UPDATE':
+      // Handle pending queue status updates
+      if (typeof updatePendingQueueUI === 'function') {
+        updatePendingQueueUI(payload.queue);
+      }
+      // Add activity log entries only for NEW files (not already logged)
+      if (payload.queue && payload.queue.files && payload.queue.files.length > 0) {
+        if (typeof addWatcherLogEntry === 'function') {
+          // Track logged files to avoid duplicates
+          window._watcherLoggedFiles = window._watcherLoggedFiles || new Set();
+          var newFiles = payload.queue.files.filter(function(f) {
+            return !window._watcherLoggedFiles.has(f);
+          });
+          // Only show first few new files to avoid spam
+          newFiles.slice(0, 5).forEach(function(fileName) {
+            window._watcherLoggedFiles.add(fileName);
+            addWatcherLogEntry('modified', fileName);
+          });
+          // Clear tracking when queue is empty (after flush)
+          if (payload.queue.file_count === 0) {
+            window._watcherLoggedFiles.clear();
+          }
+        }
+      }
+      console.log('[CodexLens] Queue update:', payload.queue?.file_count, 'files pending');
+      break;
+
+    case 'CODEXLENS_WATCHER_INDEX_COMPLETE':
+      // Handle index completion event
+      if (typeof updateLastIndexResult === 'function') {
+        updateLastIndexResult(payload.result);
+      }
+      // Clear logged files tracking after index completes
+      if (window._watcherLoggedFiles) {
+        window._watcherLoggedFiles.clear();
+      }
+      // Add activity log entry for index completion
+      if (typeof addWatcherLogEntry === 'function' && payload.result) {
+        var summary = 'Indexed ' + (payload.result.files_indexed || 0) + ' files';
+        addWatcherLogEntry('indexed', summary);
+      }
+      // Show toast notification
+      if (typeof showRefreshToast === 'function' && payload.result) {
+        var indexMsg = 'Indexed ' + (payload.result.files_indexed || 0) + ' files, ' +
+                       (payload.result.symbols_added || 0) + ' symbols';
+        var toastType = (payload.result.errors && payload.result.errors.length > 0) ? 'warning' : 'success';
+        showRefreshToast(indexMsg, toastType);
+      }
+      console.log('[CodexLens] Index complete:', payload.result?.files_indexed, 'files indexed');
+      break;
+
+    case 'CCW_LITELLM_INSTALLED':
+      // Handle ccw-litellm installation completion
+      if (typeof addGlobalNotification === 'function') {
+        addGlobalNotification(
+          'success',
+          `ccw-litellm installed successfully`,
+          {
+            'Time': new Date(payload.timestamp).toLocaleTimeString()
+          },
+          'LiteLLM'
+        );
+      }
+      // Invalidate ccw-litellm status cache
+      if (typeof window.checkCcwLitellmStatus === 'function') {
+        window.checkCcwLitellmStatus(true);
+      }
+      console.log('[ccw-litellm] Installation completed:', payload);
+      break;
+
+    case 'CCW_LITELLM_UNINSTALLED':
+      // Handle ccw-litellm uninstallation completion
+      if (typeof addGlobalNotification === 'function') {
+        addGlobalNotification(
+          'success',
+          `ccw-litellm uninstalled successfully`,
+          {
+            'Time': new Date(payload.timestamp).toLocaleTimeString()
+          },
+          'LiteLLM'
+        );
+      }
+      // Invalidate ccw-litellm status cache and refresh UI
+      if (typeof window.checkCcwLitellmStatus === 'function') {
+        window.checkCcwLitellmStatus(true).then(function() {
+          if (typeof window.renderCcwLitellmStatusCard === 'function') {
+            window.renderCcwLitellmStatusCard();
+          }
+        });
+      }
+      console.log('[ccw-litellm] Uninstallation completed:', payload);
+      break;
+
     default:
       console.log('[WS] Unknown notification type:', type);
   }