claude-code-workflow 6.3.18 → 6.3.20

package/ccw/src/templates/dashboard-js/components/cli-status.js

@@ -2,7 +2,7 @@
 // Displays CLI tool availability status and allows setting default tool
 
 // ========== CLI State ==========
-let cliToolStatus = { gemini: {}, qwen: {}, codex: {}, claude: {} };
+let cliToolStatus = {}; // Dynamically populated from config
 let codexLensStatus = { ready: false };
 let semanticStatus = { available: false };
 let ccwInstallStatus = { installed: true, workflowsInstalled: true, missingFiles: [], installPath: '' };
@@ -10,6 +10,7 @@ let defaultCliTool = 'gemini';
 let promptConcatFormat = localStorage.getItem('ccw-prompt-format') || 'plain'; // plain, yaml, json
 let cliToolsConfig = {}; // CLI tools enable/disable config
 let apiEndpoints = []; // API endpoints from LiteLLM config
+let cliSettingsEndpoints = []; // CLI Settings endpoints (for Claude wrapper)
 
 // Smart Context settings
 let smartContextEnabled = localStorage.getItem('ccw-smart-context') === 'true';
@@ -32,21 +33,54 @@ function initCliStatus() {
  * Load all statuses using aggregated endpoint (single API call)
  */
 async function loadAllStatuses() {
+  // 1. 尝试从缓存获取（预加载的数据）
+  if (window.cacheManager) {
+    const cached = window.cacheManager.get('all-status');
+    if (cached) {
+      console.log('[CLI Status] Loaded all statuses from cache');
+      // 应用缓存数据
+      cliToolStatus = cached.cli || {};
+      codexLensStatus = cached.codexLens || { ready: false };
+      semanticStatus = cached.semantic || { available: false };
+      ccwInstallStatus = cached.ccwInstall || { installed: true, workflowsInstalled: true, missingFiles: [], installPath: '' };
+
+      // Load CLI tools config, API endpoints, and CLI Settings（这些有自己的缓存）
+      await Promise.all([
+        loadCliToolsConfig(),
+        loadApiEndpoints(),
+        loadCliSettingsEndpoints()
+      ]);
+
+      // Update badges
+      updateCliBadge();
+      updateCodexLensBadge();
+      updateCcwInstallBadge();
+      return cached;
+    }
+  }
+
+  // 2. 缓存未命中，从服务器获取
   try {
     const response = await fetch('/api/status/all');
     if (!response.ok) throw new Error('Failed to load status');
     const data = await response.json();
 
-    // Update all status data
-    cliToolStatus = data.cli || { gemini: {}, qwen: {}, codex: {}, claude: {} };
+    // 存入缓存
+    if (window.cacheManager) {
+      window.cacheManager.set('all-status', data, 300000); // 5分钟
+    }
+
+    // Update all status data - merge with config tools to ensure all tools are tracked
+    cliToolStatus = data.cli || {};
     codexLensStatus = data.codexLens || { ready: false };
     semanticStatus = data.semantic || { available: false };
     ccwInstallStatus = data.ccwInstall || { installed: true, workflowsInstalled: true, missingFiles: [], installPath: '' };
 
-    // Load CLI tools config and API endpoints
+    // Load CLI tools config, API endpoints, and CLI Settings
     await Promise.all([
       loadCliToolsConfig(),
-      loadApiEndpoints()
+      loadApiEndpoints(),
+      loadCliSettingsEndpoints()
     ]);
 
     // Update badges
@@ -68,21 +102,39 @@ async function loadAllStatuses() {
 async function loadAllStatusesFallback() {
   console.warn('[CLI Status] Using fallback individual API calls');
   await Promise.all([
-    loadCliToolStatus(),
-    loadCodexLensStatus()
+    loadCliToolsConfig(), // Ensure config is loaded (auto-creates if missing)
+    loadCliToolStatus()
+    // CodexLens status removed - managed in dedicated CodexLens Manager page
   ]);
 }
 
 /**
  * Legacy: Load CLI tool status individually
+ * 优先从缓存读取，如果缓存有效则直接使用
  */
 async function loadCliToolStatus() {
+  // 尝试从缓存获取
+  if (window.cacheManager) {
+    const cached = window.cacheManager.get('cli-status');
+    if (cached) {
+      cliToolStatus = cached;
+      updateCliBadge();
+      console.log('[CLI Status] Loaded from cache');
+      return cached;
+    }
+  }
+
   try {
     const response = await fetch('/api/cli/status');
     if (!response.ok) throw new Error('Failed to load CLI status');
     const data = await response.json();
     cliToolStatus = data;
 
+    // 存入缓存
+    if (window.cacheManager) {
+      window.cacheManager.set('cli-status', data, 300000); // 5分钟
+    }
+
     // Update badge
     updateCliBadge();
 
@@ -132,36 +184,31 @@ async function loadCodexLensStatus() {
 /**
  * Load CodexLens dashboard data using aggregated endpoint (single API call)
  * This is optimized for the CodexLens Manager page initialization
+ * 优先从缓存读取，如果缓存有效则直接使用
  * @returns {Promise<object|null>} Dashboard init data or null on error
  */
 async function loadCodexLensDashboardInit() {
+  // 尝试从缓存获取
+  if (window.cacheManager) {
+    const cached = window.cacheManager.get('dashboard-init');
+    if (cached) {
+      applyDashboardInitData(cached);
+      console.log('[CLI Status] CodexLens dashboard init loaded from cache');
+      return cached;
+    }
+  }
+
   try {
     const response = await fetch('/api/codexlens/dashboard-init');
     if (!response.ok) throw new Error('Failed to load CodexLens dashboard init');
     const data = await response.json();
 
-    // Update status variables from aggregated response
-    codexLensStatus = data.status || { ready: false };
-    semanticStatus = data.semantic || { available: false };
+    applyDashboardInitData(data);
 
-    // Expose to window for other modules
-    if (!window.cliToolsStatus) {
-      window.cliToolsStatus = {};
+    // 存入缓存
+    if (window.cacheManager) {
+      window.cacheManager.set('dashboard-init', data, 300000); // 5分钟
     }
-    window.cliToolsStatus.codexlens = {
-      installed: data.installed || false,
-      version: data.status?.version || null,
-      installedModels: [],
-      config: data.config || {},
-      semantic: data.semantic || {}
-    };
-
-    // Store config globally for easy access
-    window.codexLensConfig = data.config || {};
-    window.codexLensStatusData = data.statusData || {};
-
-    // Update badges
-    updateCodexLensBadge();
 
     console.log('[CLI Status] CodexLens dashboard init loaded:', {
       installed: data.installed,
@@ -177,6 +224,35 @@ async function loadCodexLensDashboardInit() {
   }
 }
 
+/**
+ * 应用 dashboard-init 数据到状态变量
+ * @param {object} data - dashboard init 响应数据
+ */
+function applyDashboardInitData(data) {
+  // Update status variables from aggregated response
+  codexLensStatus = data.status || { ready: false };
+  semanticStatus = data.semantic || { available: false };
+
+  // Expose to window for other modules
+  if (!window.cliToolsStatus) {
+    window.cliToolsStatus = {};
+  }
+  window.cliToolsStatus.codexlens = {
+    installed: data.installed || false,
+    version: data.status?.version || null,
+    installedModels: [],
+    config: data.config || {},
+    semantic: data.semantic || {}
+  };
+
+  // Store config globally for easy access
+  window.codexLensConfig = data.config || {};
+  window.codexLensStatusData = data.statusData || {};
+
+  // Update badges
+  updateCodexLensBadge();
+}
+
 /**
  * Legacy: Load semantic status individually
  */
@@ -226,14 +302,29 @@ async function loadInstalledModels() {
 
 /**
  * Load CLI tools config from .claude/cli-tools.json (project or global fallback)
+ * 优先从缓存读取，如果缓存有效则直接使用
  */
 async function loadCliToolsConfig() {
+  // 尝试从缓存获取
+  if (window.cacheManager) {
+    const cached = window.cacheManager.get('cli-tools-config');
+    if (cached) {
+      cliToolsConfig = cached.tools?.tools || {};
+      window.claudeCliToolsConfig = cached;
+      if (cached.defaultTool) {
+        defaultCliTool = cached.defaultTool;
+      }
+      console.log('[CLI Tools Config] Loaded from cache');
+      return cached;
+    }
+  }
+
   try {
     const response = await fetch('/api/cli/tools-config');
     if (!response.ok) return null;
     const data = await response.json();
-    // Store full config and extract tools for backward compatibility
-    cliToolsConfig = data.tools || {};
+    // Store full config and extract tools object (data.tools is full config, data.tools.tools is the actual tools)
+    cliToolsConfig = data.tools?.tools || {};
     window.claudeCliToolsConfig = data; // Full config available globally
 
     // Load default tool from config
@@ -241,6 +332,11 @@ async function loadCliToolsConfig() {
       defaultCliTool = data.defaultTool;
     }
 
+    // 存入缓存
+    if (window.cacheManager) {
+      window.cacheManager.set('cli-tools-config', data, 300000); // 5分钟
+    }
+
     console.log('[CLI Config] Loaded from:', data._configInfo?.source || 'unknown', '| Default:', data.defaultTool);
     return data;
   } catch (err) {
@@ -285,14 +381,48 @@ async function loadApiEndpoints() {
   }
 }
 
+/**
+ * Load CLI Settings endpoints (Claude wrapper configurations)
+ */
+async function loadCliSettingsEndpoints() {
+  try {
+    const response = await fetch('/api/cli/settings');
+    if (!response.ok) return [];
+    const data = await response.json();
+    cliSettingsEndpoints = data.endpoints || [];
+    return cliSettingsEndpoints;
+  } catch (err) {
+    console.error('Failed to load CLI settings endpoints:', err);
+    return [];
+  }
+}
+
 // ========== Badge Update ==========
 function updateCliBadge() {
   const badge = document.getElementById('badgeCliTools');
   if (badge) {
-    const available = Object.values(cliToolStatus).filter(t => t.available).length;
-    const total = Object.keys(cliToolStatus).length;
+    // Only count builtin and cli-wrapper tools (exclude api-endpoint tools)
+    const cliTools = Object.keys(cliToolsConfig).filter(t => {
+      if (!t || t === '_configInfo') return false;
+      const config = cliToolsConfig[t];
+      // Include if: no type (legacy builtin), type is builtin, or type is cli-wrapper
+      return !config?.type || config.type === 'builtin' || config.type === 'cli-wrapper';
+    });
+
+    // Count available and enabled CLI tools only
+    let available = 0;
+    cliTools.forEach(tool => {
+      const status = cliToolStatus[tool] || {};
+      const config = cliToolsConfig[tool] || { enabled: true };
+      if (status.available && config.enabled !== false) {
+        available++;
+      }
+    });
+
+    // CLI tools badge shows only CLI tools count
+    const total = cliTools.length;
     badge.textContent = `${available}/${total}`;
-    badge.classList.toggle('text-success', available === total);
+    badge.classList.toggle('text-success', available === total && total > 0);
     badge.classList.toggle('text-warning', available > 0 && available < total);
     badge.classList.toggle('text-destructive', available === 0);
   }
@@ -335,17 +465,39 @@ function renderCliStatus() {
     gemini: 'Google AI for code analysis',
     qwen: 'Alibaba AI assistant',
     codex: 'OpenAI code generation',
-    claude: 'Anthropic AI assistant'
+    claude: 'Anthropic AI assistant',
+    opencode: 'OpenCode multi-model API'
   };
 
   const toolIcons = {
     gemini: 'sparkle',
     qwen: 'bot',
     codex: 'code-2',
-    claude: 'brain'
+    claude: 'brain',
+    opencode: 'globe'  // Default icon for new tools
+  };
+
+  // Helper to get description for any tool (with fallback)
+  const getToolDescription = (tool) => {
+    return toolDescriptions[tool] || `${tool.charAt(0).toUpperCase() + tool.slice(1)} CLI tool`;
+  };
+
+  // Helper to get icon for any tool (with fallback)
+  const getToolIcon = (tool) => {
+    return toolIcons[tool] || 'terminal';
   };
 
-  const tools = ['gemini', 'qwen', 'codex', 'claude'];
+  // Get tools dynamically from config, merging with status for complete list
+  // Only show builtin and cli-wrapper tools in the tools grid (api-endpoint tools show in API Endpoints section)
+  const tools = [...new Set([
+    ...Object.keys(cliToolsConfig),
+    ...Object.keys(cliToolStatus)
+  ])].filter(t => {
+    if (!t || t === '_configInfo') return false;
+    const config = cliToolsConfig[t];
+    // Include if: no type (legacy builtin), type is builtin, or type is cli-wrapper
+    return !config?.type || config.type === 'builtin' || config.type === 'cli-wrapper';
+  });
 
   const toolsHtml = tools.map(tool => {
     const status = cliToolStatus[tool] || {};
@@ -355,6 +507,52 @@ function renderCliStatus() {
     const isEnabled = config.enabled !== false;
     const canSetDefault = isAvailable && isEnabled && !isDefault;
 
+    // Special handling for Claude: show CLI Settings info
+    const isClaude = tool === 'claude';
+    const enabledCliSettings = isClaude ? cliSettingsEndpoints.filter(ep => ep.enabled) : [];
+    const hasCliSettings = enabledCliSettings.length > 0;
+
+    // Build CLI Settings badge for Claude
+    let cliSettingsBadge = '';
+    if (isClaude && hasCliSettings) {
+      cliSettingsBadge = `<span class="cli-tool-badge cli-settings-badge" title="${enabledCliSettings.length} endpoint(s) configured">${enabledCliSettings.length} Endpoint${enabledCliSettings.length > 1 ? 's' : ''}</span>`;
+    }
+
+    // Build CLI Settings info for Claude
+    let cliSettingsInfo = '';
+    if (isClaude) {
+      if (hasCliSettings) {
+        const epNames = enabledCliSettings.slice(0, 2).map(ep => ep.name).join(', ');
+        const moreCount = enabledCliSettings.length > 2 ? ` +${enabledCliSettings.length - 2}` : '';
+        cliSettingsInfo = `
+          <div class="cli-settings-info mt-2 p-2 rounded bg-muted/50 text-xs">
+            <div class="flex items-center gap-1 text-muted-foreground mb-1">
+              <i data-lucide="settings-2" class="w-3 h-3"></i>
+              <span>CLI Wrapper Endpoints:</span>
+            </div>
+            <div class="text-foreground font-medium">${epNames}${moreCount}</div>
+            <a href="#" onclick="navigateToApiSettings('cli-settings'); return false;" class="text-primary hover:underline mt-1 inline-flex items-center gap-1">
+              <i data-lucide="external-link" class="w-3 h-3"></i>
+              Configure
+            </a>
+          </div>
+        `;
+      } else {
+        cliSettingsInfo = `
+          <div class="cli-settings-info mt-2 p-2 rounded bg-muted/30 text-xs">
+            <div class="flex items-center gap-1 text-muted-foreground">
+              <i data-lucide="info" class="w-3 h-3"></i>
+              <span>No CLI wrapper configured</span>
+            </div>
+            <a href="#" onclick="navigateToApiSettings('cli-settings'); return false;" class="text-primary hover:underline mt-1 inline-flex items-center gap-1">
+              <i data-lucide="plus" class="w-3 h-3"></i>
+              Add Endpoint
+            </a>
+          </div>
+        `;
+      }
+    }
+
     return `
       <div class="cli-tool-card tool-${tool} ${isAvailable ? 'available' : 'unavailable'} ${!isEnabled ? 'disabled' : ''}">
         <div class="cli-tool-header">
@@ -362,9 +560,10 @@ function renderCliStatus() {
           <span class="cli-tool-name">${tool.charAt(0).toUpperCase() + tool.slice(1)}</span>
           ${isDefault ? '<span class="cli-tool-badge">Default</span>' : ''}
           ${!isEnabled && isAvailable ? '<span class="cli-tool-badge-disabled">Disabled</span>' : ''}
+          ${cliSettingsBadge}
         </div>
         <div class="cli-tool-desc text-xs text-muted-foreground mt-1">
-          ${toolDescriptions[tool]}
+          ${getToolDescription(tool)}
         </div>
         <div class="cli-tool-info mt-2 flex items-center justify-between">
           <div>
@@ -376,6 +575,7 @@ function renderCliStatus() {
             }
           </div>
         </div>
+        ${cliSettingsInfo}
         <div class="cli-tool-actions mt-3 flex gap-2">
           ${isAvailable ? (isEnabled
             ? `<button class="btn-sm btn-outline-warning flex items-center gap-1" onclick="toggleCliTool('${tool}', false)">
@@ -396,74 +596,8 @@ function renderCliStatus() {
     `;
   }).join('');
 
-  // CodexLens card with semantic search info
-  const codexLensHtml = `
-    <div class="cli-tool-card tool-codexlens ${codexLensStatus.ready ? 'available' : 'unavailable'}">
-      <div class="cli-tool-header">
-        <span class="cli-tool-status ${codexLensStatus.ready ? 'status-available' : 'status-unavailable'}"></span>
-        <span class="cli-tool-name">CodexLens</span>
-        <span class="badge px-1.5 py-0.5 text-xs rounded bg-muted text-muted-foreground">Index</span>
-      </div>
-      <div class="cli-tool-desc text-xs text-muted-foreground mt-1">
-        ${codexLensStatus.ready ? 'Code indexing & FTS search' : 'Full-text code search engine'}
-      </div>
-      <div class="cli-tool-info mt-2">
-        ${codexLensStatus.ready
-          ? `<span class="text-success flex items-center gap-1"><i data-lucide="check-circle" class="w-3 h-3"></i> v${codexLensStatus.version || 'installed'}</span>`
-          : `<span class="text-muted-foreground flex items-center gap-1"><i data-lucide="circle-dashed" class="w-3 h-3"></i> Not Installed</span>`
-        }
-      </div>
-      <div class="cli-tool-actions flex gap-2 mt-3">
-        ${!codexLensStatus.ready
-          ? `<button class="btn-sm btn-primary flex items-center gap-1" onclick="installCodexLens()">
-              <i data-lucide="download" class="w-3 h-3"></i> Install
-            </button>`
-          : `<button class="btn-sm btn-outline flex items-center gap-1" onclick="initCodexLensIndex()">
-              <i data-lucide="database" class="w-3 h-3"></i> Init Index
-            </button>
-            <button class="btn-sm btn-outline flex items-center gap-1" onclick="uninstallCodexLens()">
-              <i data-lucide="trash-2" class="w-3 h-3"></i> Uninstall
-            </button>`
-        }
-      </div>
-    </div>
-  `;
-
-  // Semantic Search card (only show if CodexLens is installed)
-  const semanticHtml = codexLensStatus.ready ? `
-    <div class="cli-tool-card tool-semantic ${semanticStatus.available ? 'available' : 'unavailable'}">
-      <div class="cli-tool-header">
-        <span class="cli-tool-status ${semanticStatus.available ? 'status-available' : 'status-unavailable'}"></span>
-        <span class="cli-tool-name">Semantic Search</span>
-        <span class="badge px-1.5 py-0.5 text-xs rounded ${semanticStatus.available ? 'bg-primary/20 text-primary' : 'bg-muted text-muted-foreground'}">AI</span>
-      </div>
-      <div class="cli-tool-desc text-xs text-muted-foreground mt-1">
-        ${semanticStatus.available ? 'AI-powered code understanding' : 'Natural language code search'}
-      </div>
-      <div class="cli-tool-info mt-2">
-        ${semanticStatus.available
-          ? `<span class="text-success flex items-center gap-1"><i data-lucide="sparkles" class="w-3 h-3"></i> ${semanticStatus.backend || 'Ready'}</span>`
-          : `<span class="text-muted-foreground flex items-center gap-1"><i data-lucide="circle-dashed" class="w-3 h-3"></i> Not Installed</span>`
-        }
-      </div>
-      <div class="cli-tool-actions flex flex-col gap-2 mt-3">
-        ${!semanticStatus.available ? `
-          <button class="btn-sm btn-primary w-full flex items-center justify-center gap-1" onclick="openSemanticInstallWizard()">
-            <i data-lucide="brain" class="w-3 h-3"></i> Install AI Model
-          </button>
-          <div class="flex items-center gap-1 text-xs text-muted-foreground mt-1">
-            <i data-lucide="hard-drive" class="w-3 h-3"></i>
-            <span>~130MB</span>
-          </div>
-        ` : `
-          <div class="flex items-center gap-1 text-xs text-muted-foreground">
-            <i data-lucide="cpu" class="w-3 h-3"></i>
-            <span>bge-small-en-v1.5</span>
-          </div>
-        `}
-      </div>
-    </div>
-  ` : '';
+  // CodexLens and Semantic Search removed from CLI status panel
+  // They are managed in the dedicated CodexLens Manager page
 
   // CCW Installation Status card (show warning if not fully installed)
   const ccwInstallHtml = !ccwInstallStatus.installed ? `
@@ -517,6 +651,9 @@ function renderCliStatus() {
             <div class="cli-endpoint-info" style="margin-top: 0.25rem;">
               <span class="text-xs text-muted-foreground" style="font-size: 0.75rem; color: var(--muted-foreground);">${ep.model}</span>
             </div>
+            <div class="cli-endpoint-usage" style="margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border);">
+              <code style="font-size: 0.65rem; color: var(--muted-foreground); word-break: break-all;">--tool custom --model ${ep.id}</code>
+            </div>
           </div>
         `).join('')}
       </div>
@@ -628,8 +765,6 @@ function renderCliStatus() {
     ${ccwInstallHtml}
     <div class="cli-tools-grid">
       ${toolsHtml}
-      ${codexLensHtml}
-      ${semanticHtml}
     </div>
     ${apiEndpointsHtml}
     ${settingsHtml}
@@ -744,7 +879,8 @@ async function refreshAllCliStatus() {
 async function toggleCliTool(tool, enabled) {
   // If disabling the current default tool, switch to another available+enabled tool
   if (!enabled && defaultCliTool === tool) {
-    const tools = ['gemini', 'qwen', 'codex', 'claude'];
+    // Get tools dynamically from config
+    const tools = Object.keys(cliToolsConfig).filter(t => t && t !== '_configInfo');
     const newDefault = tools.find(t => {
       if (t === tool) return false;
       const status = cliToolStatus[t] || {};
@@ -1323,3 +1459,39 @@ async function startSemanticInstall() {
   }
 }
 
+// ========== Navigation ==========
+/**
+ * Navigate to API Settings page with optional section
+ * @param {string} section - Target section: 'cli-settings', 'providers', 'endpoints'
+ */
+function navigateToApiSettings(section) {
+  // Try to switch to API Settings view
+  if (typeof switchView === 'function') {
+    switchView('api-settings');
+  } else if (window.switchView) {
+    window.switchView('api-settings');
+  }
+
+  // After view switch, select the target section
+  setTimeout(() => {
+    if (section === 'cli-settings') {
+      // Click CLI Settings tab if exists
+      const cliSettingsTab = document.querySelector('[data-section="cli-settings"]');
+      if (cliSettingsTab) {
+        cliSettingsTab.click();
+      } else {
+        // Fallback: try to find and click by text content
+        const tabs = document.querySelectorAll('.api-settings-sidebar .sidebar-item, .api-settings-tabs .tab-btn');
+        tabs.forEach(tab => {
+          if (tab.textContent.includes('CLI') || tab.textContent.includes('Wrapper')) {
+            tab.click();
+          }
+        });
+      }
+    }
+  }, 100);
+}
+
+// Export navigation function
+window.navigateToApiSettings = navigateToApiSettings;
+