claude-code-workflow 6.2.7 → 6.3.0

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

@@ -33,9 +33,13 @@ async function loadCliHistory(options = {}) {
 }
 
 // Load native session content for a specific execution
-async function loadNativeSessionContent(executionId) {
+async function loadNativeSessionContent(executionId, sourceDir) {
   try {
-    const url = `/api/cli/native-session?path=${encodeURIComponent(projectPath)}&id=${encodeURIComponent(executionId)}`;
+    // If sourceDir provided, use it to build the correct path
+    const basePath = sourceDir && sourceDir !== '.'
+      ? projectPath + '/' + sourceDir
+      : projectPath;
+    const url = `/api/cli/native-session?path=${encodeURIComponent(basePath)}&id=${encodeURIComponent(executionId)}`;
     const response = await fetch(url);
     if (!response.ok) return null;
     return await response.json();
@@ -133,9 +137,12 @@ function renderCliHistory() {
              </span>`
           : '';
 
+        // Escape sourceDir for use in onclick
+        const sourceDirEscaped = exec.sourceDir ? exec.sourceDir.replace(/'/g, "\\'") : '';
+
         return `
           <div class="cli-history-item ${hasNative ? 'has-native' : ''}">
-            <div class="cli-history-item-content" onclick="showExecutionDetail('${exec.id}')">
+            <div class="cli-history-item-content" onclick="showExecutionDetail('${exec.id}', '${sourceDirEscaped}')">
               <div class="cli-history-item-header">
                 <span class="cli-tool-tag cli-tool-${exec.tool}">${exec.tool.toUpperCase()}</span>
                 <span class="cli-mode-tag">${exec.mode || 'analysis'}</span>
@@ -154,14 +161,14 @@ function renderCliHistory() {
             </div>
             <div class="cli-history-actions">
               ${hasNative ? `
-                <button class="btn-icon" onclick="event.stopPropagation(); showNativeSessionDetail('${exec.id}')" title="View Native Session">
+                <button class="btn-icon" onclick="event.stopPropagation(); showNativeSessionDetail('${exec.id}', '${sourceDirEscaped}')" title="View Native Session">
                   <i data-lucide="file-json" class="w-3.5 h-3.5"></i>
                 </button>
               ` : ''}
-              <button class="btn-icon" onclick="event.stopPropagation(); showExecutionDetail('${exec.id}')" title="View Details">
+              <button class="btn-icon" onclick="event.stopPropagation(); showExecutionDetail('${exec.id}', '${sourceDirEscaped}')" title="View Details">
                 <i data-lucide="eye" class="w-3.5 h-3.5"></i>
               </button>
-              <button class="btn-icon btn-danger" onclick="event.stopPropagation(); confirmDeleteExecution('${exec.id}')" title="Delete">
+              <button class="btn-icon btn-danger" onclick="event.stopPropagation(); confirmDeleteExecution('${exec.id}', '${sourceDirEscaped}')" title="Delete">
                 <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
               </button>
             </div>
@@ -650,9 +657,9 @@ async function copyConcatenatedPrompt(executionId) {
 /**
  * Show native session detail modal with full conversation content
  */
-async function showNativeSessionDetail(executionId) {
+async function showNativeSessionDetail(executionId, sourceDir) {
   // Load native session content
-  const nativeSession = await loadNativeSessionContent(executionId);
+  const nativeSession = await loadNativeSessionContent(executionId, sourceDir);
 
   if (!nativeSession) {
     showRefreshToast('Native session not found', 'error');

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

@@ -5,8 +5,11 @@
 let cliToolStatus = { gemini: {}, qwen: {}, codex: {}, claude: {} };
 let codexLensStatus = { ready: false };
 let semanticStatus = { available: false };
+let ccwInstallStatus = { installed: true, workflowsInstalled: true, missingFiles: [], installPath: '' };
 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
 
 // Smart Context settings
 let smartContextEnabled = localStorage.getItem('ccw-smart-context') === 'true';
@@ -38,10 +41,18 @@ async function loadAllStatuses() {
     cliToolStatus = data.cli || { gemini: {}, qwen: {}, codex: {}, claude: {} };
     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
+    await Promise.all([
+      loadCliToolsConfig(),
+      loadApiEndpoints()
+    ]);
 
     // Update badges
     updateCliBadge();
     updateCodexLensBadge();
+    updateCcwInstallBadge();
 
     return data;
   } catch (err) {
@@ -118,6 +129,54 @@ 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() {
+  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 };
+
+    // 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();
+
+    console.log('[CLI Status] CodexLens dashboard init loaded:', {
+      installed: data.installed,
+      version: data.status?.version,
+      semanticAvailable: data.semantic?.available
+    });
+
+    return data;
+  } catch (err) {
+    console.error('Failed to load CodexLens dashboard init:', err);
+    // Fallback to individual calls
+    return await loadCodexLensStatus();
+  }
+}
+
 /**
  * Legacy: Load semantic status individually
  */
@@ -165,6 +224,67 @@ async function loadInstalledModels() {
   }
 }
 
+/**
+ * Load CLI tools config from .claude/cli-tools.json (project or global fallback)
+ */
+async function loadCliToolsConfig() {
+  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 || {};
+    window.claudeCliToolsConfig = data; // Full config available globally
+
+    // Load default tool from config
+    if (data.defaultTool) {
+      defaultCliTool = data.defaultTool;
+    }
+
+    console.log('[CLI Config] Loaded from:', data._configInfo?.source || 'unknown', '| Default:', data.defaultTool);
+    return data;
+  } catch (err) {
+    console.error('Failed to load CLI tools config:', err);
+    return null;
+  }
+}
+
+/**
+ * Update CLI tool enabled status
+ */
+async function updateCliToolEnabled(tool, enabled) {
+  try {
+    const response = await fetch('/api/cli/tools-config/' + tool, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ enabled: enabled })
+    });
+    if (!response.ok) throw new Error('Failed to update');
+    showRefreshToast(tool + (enabled ? ' enabled' : ' disabled'), 'success');
+    return await response.json();
+  } catch (err) {
+    console.error('Failed to update CLI tool:', err);
+    showRefreshToast('Failed to update ' + tool, 'error');
+    return null;
+  }
+}
+
+/**
+ * Load API endpoints from LiteLLM config
+ */
+async function loadApiEndpoints() {
+  try {
+    const response = await fetch('/api/litellm-api/endpoints');
+    if (!response.ok) return [];
+    const data = await response.json();
+    apiEndpoints = data.endpoints || [];
+    return apiEndpoints;
+  } catch (err) {
+    console.error('Failed to load API endpoints:', err);
+    return [];
+  }
+}
+
 // ========== Badge Update ==========
 function updateCliBadge() {
   const badge = document.getElementById('badgeCliTools');
@@ -187,6 +307,25 @@ function updateCodexLensBadge() {
   }
 }
 
+function updateCcwInstallBadge() {
+  const badge = document.getElementById('badgeCcwInstall');
+  if (badge) {
+    if (ccwInstallStatus.installed) {
+      badge.textContent = t('status.installed');
+      badge.classList.add('text-success');
+      badge.classList.remove('text-warning', 'text-destructive');
+    } else if (ccwInstallStatus.workflowsInstalled === false) {
+      badge.textContent = t('status.incomplete');
+      badge.classList.add('text-warning');
+      badge.classList.remove('text-success', 'text-destructive');
+    } else {
+      badge.textContent = t('status.notInstalled');
+      badge.classList.add('text-destructive');
+      badge.classList.remove('text-success', 'text-warning');
+    }
+  }
+}
+
 // ========== Rendering ==========
 function renderCliStatus() {
   const container = document.getElementById('cli-status-panel');
@@ -212,25 +351,41 @@ function renderCliStatus() {
     const status = cliToolStatus[tool] || {};
     const isAvailable = status.available;
     const isDefault = defaultCliTool === tool;
+    const config = cliToolsConfig[tool] || { enabled: true };
+    const isEnabled = config.enabled !== false;
+    const canSetDefault = isAvailable && isEnabled && !isDefault;
 
     return `
-      <div class="cli-tool-card tool-${tool} ${isAvailable ? 'available' : 'unavailable'}">
+      <div class="cli-tool-card tool-${tool} ${isAvailable ? 'available' : 'unavailable'} ${!isEnabled ? 'disabled' : ''}">
         <div class="cli-tool-header">
-          <span class="cli-tool-status ${isAvailable ? 'status-available' : 'status-unavailable'}"></span>
+          <span class="cli-tool-status ${isAvailable && isEnabled ? 'status-available' : 'status-unavailable'}"></span>
           <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>' : ''}
         </div>
         <div class="cli-tool-desc text-xs text-muted-foreground mt-1">
           ${toolDescriptions[tool]}
         </div>
-        <div class="cli-tool-info mt-2">
-          ${isAvailable
-            ? `<span class="text-success flex items-center gap-1"><i data-lucide="check-circle" class="w-3 h-3"></i> 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 class="cli-tool-info mt-2 flex items-center justify-between">
+          <div>
+            ${isAvailable
+              ? (isEnabled
+                  ? `<span class="text-success flex items-center gap-1"><i data-lucide="check-circle" class="w-3 h-3"></i> Ready</span>`
+                  : `<span class="text-warning flex items-center gap-1"><i data-lucide="pause-circle" class="w-3 h-3"></i> Disabled</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>
-        <div class="cli-tool-actions mt-3">
-          ${isAvailable && !isDefault
+        <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)">
+                <i data-lucide="pause" class="w-3 h-3"></i> Disable
+              </button>`
+            : `<button class="btn-sm btn-outline-success flex items-center gap-1" onclick="toggleCliTool('${tool}', true)">
+                <i data-lucide="play" class="w-3 h-3"></i> Enable
+              </button>`
+          ) : ''}
+          ${canSetDefault
             ? `<button class="btn-sm btn-outline flex items-center gap-1" onclick="setDefaultCliTool('${tool}')">
                 <i data-lucide="star" class="w-3 h-3"></i> Set Default
               </button>`
@@ -310,11 +465,75 @@ function renderCliStatus() {
     </div>
   ` : '';
 
+  // CCW Installation Status card (show warning if not fully installed)
+  const ccwInstallHtml = !ccwInstallStatus.installed ? `
+    <div class="cli-tool-card tool-ccw-install unavailable" style="border: 1px solid var(--warning); background: rgba(var(--warning-rgb), 0.05);">
+      <div class="cli-tool-header">
+        <span class="cli-tool-status status-unavailable" style="background: var(--warning);"></span>
+        <span class="cli-tool-name">${t('status.ccwInstall')}</span>
+        <span class="badge px-1.5 py-0.5 text-xs rounded bg-warning/20 text-warning">${t('status.required')}</span>
+      </div>
+      <div class="cli-tool-desc text-xs text-muted-foreground mt-1">
+        ${t('status.ccwInstallDesc')}
+      </div>
+      <div class="cli-tool-info mt-2">
+        <span class="text-warning flex items-center gap-1">
+          <i data-lucide="alert-triangle" class="w-3 h-3"></i>
+          ${ccwInstallStatus.missingFiles.length} ${t('status.filesMissing')}
+        </span>
+      </div>
+      <div class="cli-tool-actions flex flex-col gap-2 mt-3">
+        <div class="text-xs text-muted-foreground">
+          <p class="mb-1">${t('status.missingFiles')}:</p>
+          <ul class="list-disc list-inside text-xs opacity-70">
+            ${ccwInstallStatus.missingFiles.slice(0, 3).map(f => `<li>${f}</li>`).join('')}
+            ${ccwInstallStatus.missingFiles.length > 3 ? `<li>+${ccwInstallStatus.missingFiles.length - 3} more...</li>` : ''}
+          </ul>
+        </div>
+        <div class="bg-muted/50 rounded p-2 mt-2">
+          <p class="text-xs font-medium mb-1">${t('status.runToFix')}:</p>
+          <code class="text-xs bg-background px-2 py-1 rounded block">ccw install</code>
+        </div>
+      </div>
+    </div>
+  ` : '';
+
+  // API Endpoints section
+  const apiEndpointsHtml = apiEndpoints.length > 0 ? `
+    <div class="cli-api-endpoints-section" style="margin-top: 1.5rem;">
+      <div class="cli-section-header" style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;">
+        <h4 style="display: flex; align-items: center; gap: 0.5rem; font-weight: 600; margin: 0;">
+          <i data-lucide="link" class="w-4 h-4"></i> API Endpoints
+        </h4>
+        <span class="badge" style="padding: 0.125rem 0.5rem; font-size: 0.75rem; border-radius: 0.25rem; background: var(--muted); color: var(--muted-foreground);">${apiEndpoints.length}</span>
+      </div>
+      <div class="cli-endpoints-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.75rem;">
+        ${apiEndpoints.map(ep => `
+          <div class="cli-endpoint-card ${ep.enabled ? 'available' : 'unavailable'}" style="padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--card);">
+            <div class="cli-endpoint-header" style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
+              <span class="cli-tool-status ${ep.enabled ? 'status-available' : 'status-unavailable'}" style="width: 8px; height: 8px; border-radius: 50%; background: ${ep.enabled ? 'var(--success)' : 'var(--muted-foreground)'}; flex-shrink: 0;"></span>
+              <span class="cli-endpoint-id" style="font-weight: 500; font-size: 0.875rem;">${ep.id}</span>
+            </div>
+            <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>
+        `).join('')}
+      </div>
+    </div>
+  ` : '';
+
+  // Config source info
+  const configInfo = window.claudeCliToolsConfig?._configInfo || {};
+  const configSourceLabel = configInfo.source === 'project' ? 'Project' : configInfo.source === 'global' ? 'Global' : 'Default';
+  const configSourceClass = configInfo.source === 'project' ? 'text-success' : configInfo.source === 'global' ? 'text-primary' : 'text-muted-foreground';
+
   // CLI Settings section
   const settingsHtml = `
     <div class="cli-settings-section">
       <div class="cli-settings-header">
         <h4><i data-lucide="settings" class="w-3.5 h-3.5"></i> Settings</h4>
+        <span class="badge text-xs ${configSourceClass}" title="${configInfo.activePath || ''}">${configSourceLabel}</span>
       </div>
       <div class="cli-settings-grid">
         <div class="cli-setting-item">
@@ -381,6 +600,20 @@ function renderCliStatus() {
           </div>
           <p class="cli-setting-desc">Maximum files to include in smart context</p>
         </div>
+        <div class="cli-setting-item">
+          <label class="cli-setting-label">
+            <i data-lucide="hard-drive" class="w-3 h-3"></i>
+            Cache Injection
+          </label>
+          <div class="cli-setting-control">
+            <select class="cli-setting-select" onchange="setCacheInjectionMode(this.value)">
+              <option value="auto" ${getCacheInjectionMode() === 'auto' ? 'selected' : ''}>Auto</option>
+              <option value="manual" ${getCacheInjectionMode() === 'manual' ? 'selected' : ''}>Manual</option>
+              <option value="disabled" ${getCacheInjectionMode() === 'disabled' ? 'selected' : ''}>Disabled</option>
+            </select>
+          </div>
+          <p class="cli-setting-desc">Cache prefix/suffix injection mode for prompts</p>
+        </div>
       </div>
     </div>
   `;
@@ -392,11 +625,13 @@ function renderCliStatus() {
         <i data-lucide="refresh-cw" class="w-4 h-4"></i>
       </button>
     </div>
+    ${ccwInstallHtml}
     <div class="cli-tools-grid">
       ${toolsHtml}
       ${codexLensHtml}
       ${semanticHtml}
     </div>
+    ${apiEndpointsHtml}
     ${settingsHtml}
   `;
 
@@ -408,7 +643,30 @@ function renderCliStatus() {
 
 // ========== Actions ==========
 function setDefaultCliTool(tool) {
+  // Validate: tool must be available and enabled
+  const status = cliToolStatus[tool] || {};
+  const config = cliToolsConfig[tool] || { enabled: true };
+
+  if (!status.available) {
+    showRefreshToast(`Cannot set ${tool} as default: not installed`, 'error');
+    return;
+  }
+
+  if (config.enabled === false) {
+    showRefreshToast(`Cannot set ${tool} as default: tool is disabled`, 'error');
+    return;
+  }
+
   defaultCliTool = tool;
+  // Save to config
+  if (window.claudeCliToolsConfig) {
+    window.claudeCliToolsConfig.defaultTool = tool;
+    fetch('/api/cli/tools-config', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ defaultTool: tool })
+    }).catch(err => console.error('Failed to save default tool:', err));
+  }
   renderCliStatus();
   showRefreshToast(`Default CLI tool set to ${tool}`, 'success');
 }
@@ -449,11 +707,67 @@ function setRecursiveQueryEnabled(enabled) {
   showRefreshToast(`Recursive Query ${enabled ? 'enabled' : 'disabled'}`, 'success');
 }
 
+function getCacheInjectionMode() {
+  if (window.claudeCliToolsConfig && window.claudeCliToolsConfig.settings) {
+    return window.claudeCliToolsConfig.settings.cache?.injectionMode || 'auto';
+  }
+  return localStorage.getItem('ccw-cache-injection-mode') || 'auto';
+}
+
+async function setCacheInjectionMode(mode) {
+  try {
+    const response = await fetch('/api/cli/tools-config/cache', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ injectionMode: mode })
+    });
+    if (response.ok) {
+      localStorage.setItem('ccw-cache-injection-mode', mode);
+      if (window.claudeCliToolsConfig) {
+        window.claudeCliToolsConfig.settings.cache.injectionMode = mode;
+      }
+      showRefreshToast(`Cache injection mode set to ${mode}`, 'success');
+    } else {
+      showRefreshToast('Failed to update cache settings', 'error');
+    }
+  } catch (err) {
+    console.error('Failed to update cache settings:', err);
+    showRefreshToast('Failed to update cache settings', 'error');
+  }
+}
+
 async function refreshAllCliStatus() {
   await loadAllStatuses();
   renderCliStatus();
 }
 
+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'];
+    const newDefault = tools.find(t => {
+      if (t === tool) return false;
+      const status = cliToolStatus[t] || {};
+      const config = cliToolsConfig[t] || { enabled: true };
+      return status.available && config.enabled !== false;
+    });
+
+    if (newDefault) {
+      defaultCliTool = newDefault;
+      if (window.claudeCliToolsConfig) {
+        window.claudeCliToolsConfig.defaultTool = newDefault;
+      }
+      showRefreshToast(`Default tool switched to ${newDefault}`, 'info');
+    } else {
+      showRefreshToast(`Warning: No other enabled tool available for default`, 'warning');
+    }
+  }
+
+  await updateCliToolEnabled(tool, enabled);
+  await loadAllStatuses();
+  renderCliStatus();
+}
+
 function installCodexLens() {
   openCodexLensInstallWizard();
 }