claude-code-workflow 6.3.53 → 7.0.0

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

@@ -1,1617 +0,0 @@
-// CLI Status Component
-// Displays CLI tool availability status and allows setting default tool
-
-// ========== CLI State ==========
-let cliToolStatus = {}; // Dynamically populated from config
-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
-let cliSettingsEndpoints = []; // CLI Settings endpoints (for Claude wrapper)
-
-// Smart Context settings
-let smartContextEnabled = localStorage.getItem('ccw-smart-context') === 'true';
-let smartContextMaxFiles = parseInt(localStorage.getItem('ccw-smart-context-max-files') || '10', 10);
-
-// Native Resume settings
-let nativeResumeEnabled = localStorage.getItem('ccw-native-resume') !== 'false'; // default true
-
-// Recursive Query settings (for hierarchical storage aggregation)
-let recursiveQueryEnabled = localStorage.getItem('ccw-recursive-query') !== 'false'; // default true
-
-// ========== Initialization ==========
-function initCliStatus() {
-  // Load all statuses in one call using aggregated endpoint
-  loadAllStatuses();
-}
-
-// ========== Data Loading ==========
-/**
- * Load all statuses using aggregated endpoint (single API call)
- */
-async function loadAllStatuses() {
-  const totalStart = performance.now();
-  console.log('[PERF][Frontend] loadAllStatuses START');
-
-  // 1. 尝试从缓存获取（预加载的数据）
-  if (window.cacheManager) {
-    const cached = window.cacheManager.get('all-status');
-    if (cached) {
-      console.log(`[PERF][Frontend] Cache hit: ${(performance.now() - totalStart).toFixed(1)}ms`);
-      // 应用缓存数据
-      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（这些有自己的缓存）
-      const configStart = performance.now();
-      await Promise.all([
-        loadCliToolsConfig(),
-        loadApiEndpoints(),
-        loadCliSettingsEndpoints()
-      ]);
-      console.log(`[PERF][Frontend] Config/Endpoints load: ${(performance.now() - configStart).toFixed(1)}ms`);
-
-      // Update badges
-      updateCliBadge();
-      updateCodexLensBadge();
-      updateCcwInstallBadge();
-
-      console.log(`[PERF][Frontend] loadAllStatuses TOTAL (cached): ${(performance.now() - totalStart).toFixed(1)}ms`);
-      return cached;
-    }
-  }
-
-  // 2. 缓存未命中，从服务器获取
-  try {
-    const fetchStart = performance.now();
-    console.log('[PERF][Frontend] Fetching /api/status/all...');
-    const response = await fetch('/api/status/all');
-    if (!response.ok) throw new Error('Failed to load status');
-    const data = await response.json();
-    console.log(`[PERF][Frontend] /api/status/all fetch: ${(performance.now() - fetchStart).toFixed(1)}ms`);
-
-    // 存入缓存
-    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, API endpoints, and CLI Settings
-    const configStart = performance.now();
-    const [configResult, endpointsResult, settingsResult] = await Promise.all([
-      loadCliToolsConfig().then(r => { console.log(`[PERF][Frontend] loadCliToolsConfig: ${(performance.now() - configStart).toFixed(1)}ms`); return r; }),
-      loadApiEndpoints().then(r => { console.log(`[PERF][Frontend] loadApiEndpoints: ${(performance.now() - configStart).toFixed(1)}ms`); return r; }),
-      loadCliSettingsEndpoints().then(r => { console.log(`[PERF][Frontend] loadCliSettingsEndpoints: ${(performance.now() - configStart).toFixed(1)}ms`); return r; })
-    ]);
-
-    // Update badges
-    updateCliBadge();
-    updateCodexLensBadge();
-    updateCcwInstallBadge();
-
-    console.log(`[PERF][Frontend] loadAllStatuses TOTAL: ${(performance.now() - totalStart).toFixed(1)}ms`);
-    return data;
-  } catch (err) {
-    console.error('Failed to load aggregated status:', err);
-    console.log(`[PERF][Frontend] loadAllStatuses ERROR after: ${(performance.now() - totalStart).toFixed(1)}ms`);
-    // Fallback to individual calls if aggregated endpoint fails
-    return await loadAllStatusesFallback();
-  }
-}
-
-/**
- * Fallback: Load statuses individually if aggregated endpoint fails
- */
-async function loadAllStatusesFallback() {
-  console.warn('[CLI Status] Using fallback individual API calls');
-  await Promise.all([
-    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();
-
-    return data;
-  } catch (err) {
-    console.error('Failed to load CLI status:', err);
-    return null;
-  }
-}
-
-/**
- * Legacy: Load CodexLens status individually
- */
-async function loadCodexLensStatus() {
-  try {
-    const response = await fetch('/api/codexlens/status');
-    if (!response.ok) throw new Error('Failed to load CodexLens status');
-    const data = await response.json();
-    codexLensStatus = data;
-
-    // Expose to window for other modules (e.g., codexlens-manager.js)
-    if (!window.cliToolsStatus) {
-      window.cliToolsStatus = {};
-    }
-    window.cliToolsStatus.codexlens = {
-      installed: data.ready || false,
-      version: data.version || null,
-      installedModels: []  // Will be populated by loadSemanticStatus
-    };
-
-    // Update CodexLens badge
-    updateCodexLensBadge();
-
-    // If CodexLens is ready, also check semantic status and models
-    if (data.ready) {
-      await loadSemanticStatus();
-      await loadInstalledModels();
-    }
-
-    return data;
-  } catch (err) {
-    console.error('Failed to load CodexLens status:', err);
-    return null;
-  }
-}
-
-/**
- * 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();
-
-    applyDashboardInitData(data);
-
-    // 存入缓存
-    if (window.cacheManager) {
-      window.cacheManager.set('dashboard-init', data, 300000); // 5分钟
-    }
-
-    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();
-  }
-}
-
-/**
- * 应用 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
- */
-async function loadSemanticStatus() {
-  try {
-    const response = await fetch('/api/codexlens/semantic/status');
-    if (!response.ok) throw new Error('Failed to load semantic status');
-    const data = await response.json();
-    semanticStatus = data;
-    return data;
-  } catch (err) {
-    console.error('Failed to load semantic status:', err);
-    return null;
-  }
-}
-
-/**
- * Load installed embedding models
- */
-async function loadInstalledModels() {
-  try {
-    const response = await fetch('/api/codexlens/models');
-    if (!response.ok) throw new Error('Failed to load models');
-    const data = await response.json();
-    
-    if (data.success && data.result && data.result.models) {
-      // Filter to only installed models
-      const installedModels = data.result.models
-        .filter(m => m.installed)
-        .map(m => m.profile);
-      
-      // Update window.cliToolsStatus
-      if (window.cliToolsStatus && window.cliToolsStatus.codexlens) {
-        window.cliToolsStatus.codexlens.installedModels = installedModels;
-        window.cliToolsStatus.codexlens.allModels = data.result.models;
-      }
-      
-      console.log('[CLI Status] Installed models:', installedModels);
-      return installedModels;
-    }
-    return [];
-  } catch (err) {
-    console.error('Failed to load installed models:', err);
-    return [];
-  }
-}
-
-/**
- * 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 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
-    if (data.defaultTool) {
-      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) {
-    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 csrfFetch('/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 [];
-  }
-}
-
-/**
- * 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) {
-    // 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 && total > 0);
-    badge.classList.toggle('text-warning', available > 0 && available < total);
-    badge.classList.toggle('text-destructive', available === 0);
-  }
-}
-
-function updateCodexLensBadge() {
-  const badge = document.getElementById('badgeCodexLens');
-  if (badge) {
-    badge.textContent = codexLensStatus.ready ? 'Ready' : 'Not Installed';
-    badge.classList.toggle('text-success', codexLensStatus.ready);
-    badge.classList.toggle('text-muted-foreground', !codexLensStatus.ready);
-  }
-}
-
-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');
-  if (!container) return;
-
-  const toolDescriptions = {
-    gemini: 'Google AI for code analysis',
-    qwen: 'Alibaba AI assistant',
-    codex: 'OpenAI code generation',
-    claude: 'Anthropic AI assistant',
-    opencode: 'OpenCode multi-model API'
-  };
-
-  const toolIcons = {
-    gemini: 'sparkle',
-    qwen: 'bot',
-    codex: 'code-2',
-    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';
-  };
-
-  // 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] || {};
-    const isAvailable = status.available;
-    const isDefault = defaultCliTool === tool;
-    const config = cliToolsConfig[tool] || { enabled: true };
-    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 Settings File info for builtin Claude
-    let settingsFileInfo = '';
-    if (isClaude && config.type === 'builtin' && config.settingsFile) {
-      const settingsFile = config.settingsFile;
-      // Simple path resolution attempt for display (no actual filesystem access)
-      const resolvedPath = settingsFile.startsWith('~')
-        ? settingsFile.replace('~', (typeof os !== 'undefined' && os.homedir) ? os.homedir() : '~')
-        : settingsFile;
-
-      settingsFileInfo = `
-        <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="file-key" class="w-3 h-3"></i>
-            <span>Settings File:</span>
-          </div>
-          <div class="text-foreground font-mono text-[10px] break-all" title="${resolvedPath}">
-            ${settingsFile}
-          </div>
-          ${settingsFile !== resolvedPath ? `
-            <div class="text-muted-foreground mt-1 font-mono text-[10px] break-all">
-              → ${resolvedPath}
-            </div>
-          ` : ''}
-        </div>
-      `;
-    }
-
-    // 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">
-          <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>' : ''}
-          ${cliSettingsBadge}
-        </div>
-        <div class="cli-tool-desc text-xs text-muted-foreground mt-1">
-          ${getToolDescription(tool)}
-        </div>
-        <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>
-        ${settingsFileInfo}
-        ${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)">
-                <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>`
-            : ''
-          }
-        </div>
-      </div>
-    `;
-  }).join('');
-
-  // 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 ? `
-    <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 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>
-    </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">
-          <label class="cli-setting-label">
-            <i data-lucide="layers" class="w-3 h-3"></i>
-            Prompt Format
-          </label>
-          <div class="cli-setting-control">
-            <select class="cli-setting-select" onchange="setPromptFormat(this.value)">
-              <option value="plain" ${promptConcatFormat === 'plain' ? 'selected' : ''}>Plain Text</option>
-              <option value="yaml" ${promptConcatFormat === 'yaml' ? 'selected' : ''}>YAML</option>
-              <option value="json" ${promptConcatFormat === 'json' ? 'selected' : ''}>JSON</option>
-            </select>
-          </div>
-          <p class="cli-setting-desc">Format for multi-turn conversation concatenation</p>
-        </div>
-        <div class="cli-setting-item">
-          <label class="cli-setting-label">
-            <i data-lucide="database" class="w-3 h-3"></i>
-            Storage Backend
-          </label>
-          <div class="cli-setting-control">
-            <span class="cli-setting-value">SQLite</span>
-          </div>
-          <p class="cli-setting-desc">CLI history stored in SQLite with FTS search</p>
-        </div>
-        <div class="cli-setting-item">
-          <label class="cli-setting-label">
-            <i data-lucide="sparkles" class="w-3 h-3"></i>
-            Smart Context
-          </label>
-          <div class="cli-setting-control">
-            <label class="cli-toggle">
-              <input type="checkbox" ${smartContextEnabled ? 'checked' : ''} onchange="setSmartContextEnabled(this.checked)">
-              <span class="cli-toggle-slider"></span>
-            </label>
-          </div>
-          <p class="cli-setting-desc">Auto-analyze prompt and add relevant file paths</p>
-        </div>
-        <div class="cli-setting-item">
-          <label class="cli-setting-label">
-            <i data-lucide="refresh-cw" class="w-3 h-3"></i>
-            Native Resume
-          </label>
-          <div class="cli-setting-control">
-            <label class="cli-toggle">
-              <input type="checkbox" ${nativeResumeEnabled ? 'checked' : ''} onchange="setNativeResumeEnabled(this.checked)">
-              <span class="cli-toggle-slider"></span>
-            </label>
-          </div>
-          <p class="cli-setting-desc">Use native tool resume (gemini -r, qwen --resume, codex resume, claude --resume)</p>
-        </div>
-        <div class="cli-setting-item ${!smartContextEnabled ? 'disabled' : ''}">
-          <label class="cli-setting-label">
-            <i data-lucide="files" class="w-3 h-3"></i>
-            Max Context Files
-          </label>
-          <div class="cli-setting-control">
-            <select class="cli-setting-select" onchange="setSmartContextMaxFiles(this.value)" ${!smartContextEnabled ? 'disabled' : ''}>
-              <option value="5" ${smartContextMaxFiles === 5 ? 'selected' : ''}>5 files</option>
-              <option value="10" ${smartContextMaxFiles === 10 ? 'selected' : ''}>10 files</option>
-              <option value="20" ${smartContextMaxFiles === 20 ? 'selected' : ''}>20 files</option>
-            </select>
-          </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>
-  `;
-
-  container.innerHTML = `
-    <div class="cli-status-header">
-      <h3><i data-lucide="terminal" class="w-4 h-4"></i> CLI Tools</h3>
-      <div class="cli-status-actions">
-        <button class="btn-icon" onclick="syncBuiltinTools()" title="Sync tool availability with installed CLI tools">
-          <i data-lucide="sync" class="w-4 h-4"></i>
-        </button>
-        <button class="btn-icon" onclick="refreshAllCliStatus()" title="Refresh">
-          <i data-lucide="refresh-cw" class="w-4 h-4"></i>
-        </button>
-      </div>
-    </div>
-    ${ccwInstallHtml}
-    <div class="cli-tools-grid">
-      ${toolsHtml}
-    </div>
-    ${apiEndpointsHtml}
-    ${settingsHtml}
-  `;
-
-  // Initialize Lucide icons
-  if (window.lucide) {
-    lucide.createIcons();
-  }
-}
-
-// ========== 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;
-    csrfFetch('/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');
-}
-
-function setPromptFormat(format) {
-  promptConcatFormat = format;
-  localStorage.setItem('ccw-prompt-format', format);
-  showRefreshToast(`Prompt format set to ${format.toUpperCase()}`, 'success');
-}
-
-/**
- * Sync builtin tools availability with installed CLI tools
- * Checks system PATH and updates cli-tools.json accordingly
- */
-async function syncBuiltinTools() {
-  const syncButton = document.querySelector('[onclick="syncBuiltinTools()"]');
-  if (syncButton) {
-    syncButton.disabled = true;
-    const icon = syncButton.querySelector('i');
-    if (icon) icon.classList.add('spin');
-  }
-
-  try {
-    const response = await csrfFetch('/api/cli/settings/sync-tools', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' }
-    });
-
-    if (!response.ok) {
-      throw new Error('Sync failed');
-    }
-
-    const result = await response.json();
-
-    // Reload the config after sync
-    await loadCliToolsConfig();
-    await loadAllStatuses();
-    renderCliStatus();
-
-    // Show summary of changes
-    const { enabled, disabled, unchanged } = result.changes;
-    let message = 'Tools synced: ';
-    const parts = [];
-    if (enabled.length > 0) parts.push(`${enabled.join(', ')} enabled`);
-    if (disabled.length > 0) parts.push(`${disabled.join(', ')} disabled`);
-    if (unchanged.length > 0) parts.push(`${unchanged.length} unchanged`);
-    message += parts.join(', ');
-
-    showRefreshToast(message, 'success');
-
-    // Also invalidate the CLI tool cache to ensure fresh checks
-    if (window.cacheManager) {
-      window.cacheManager.delete('cli-tools-status');
-    }
-  } catch (err) {
-    console.error('Failed to sync tools:', err);
-    showRefreshToast('Failed to sync tools: ' + (err.message || String(err)), 'error');
-  } finally {
-    if (syncButton) {
-      syncButton.disabled = false;
-      const icon = syncButton.querySelector('i');
-      if (icon) icon.classList.remove('spin');
-    }
-  }
-}
-
-function setSmartContextEnabled(enabled) {
-  smartContextEnabled = enabled;
-  localStorage.setItem('ccw-smart-context', enabled.toString());
-  // Re-render the appropriate settings panel
-  if (typeof renderCliSettingsSection === 'function') {
-    renderCliSettingsSection();
-  } else {
-    renderCliStatus();
-  }
-  showRefreshToast(`Smart Context ${enabled ? 'enabled' : 'disabled'}`, 'success');
-}
-
-function setSmartContextMaxFiles(max) {
-  smartContextMaxFiles = parseInt(max, 10);
-  localStorage.setItem('ccw-smart-context-max-files', max);
-  showRefreshToast(`Smart Context max files set to ${max}`, 'success');
-}
-
-function setNativeResumeEnabled(enabled) {
-  nativeResumeEnabled = enabled;
-  localStorage.setItem('ccw-native-resume', enabled.toString());
-  showRefreshToast(`Native Resume ${enabled ? 'enabled' : 'disabled'}`, 'success');
-}
-
-function setRecursiveQueryEnabled(enabled) {
-  recursiveQueryEnabled = enabled;
-  localStorage.setItem('ccw-recursive-query', enabled.toString());
-  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 csrfFetch('/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) {
-    // 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] || {};
-      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();
-}
-
-function openCodexLensInstallWizard() {
-  const modal = document.createElement('div');
-  modal.id = 'codexlensInstallModal';
-  modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
-  modal.innerHTML = `
-    <div class="bg-card rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden">
-      <div class="p-6">
-        <div class="flex items-center gap-3 mb-4">
-          <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
-            <i data-lucide="database" class="w-5 h-5 text-primary"></i>
-          </div>
-          <div>
-            <h3 class="text-lg font-semibold">Install CodexLens</h3>
-            <p class="text-sm text-muted-foreground">Python-based code indexing engine</p>
-          </div>
-        </div>
-
-        <div class="space-y-4">
-          <div class="bg-muted/50 rounded-lg p-4">
-            <h4 class="font-medium mb-2">What will be installed:</h4>
-            <ul class="text-sm space-y-2 text-muted-foreground">
-              <li class="flex items-start gap-2">
-                <i data-lucide="check" class="w-4 h-4 text-success mt-0.5"></i>
-                <span><strong>Python virtual environment</strong> - Isolated Python environment</span>
-              </li>
-              <li class="flex items-start gap-2">
-                <i data-lucide="check" class="w-4 h-4 text-success mt-0.5"></i>
-                <span><strong>CodexLens package</strong> - Code indexing and search engine</span>
-              </li>
-              <li class="flex items-start gap-2">
-                <i data-lucide="check" class="w-4 h-4 text-success mt-0.5"></i>
-                <span><strong>SQLite FTS5</strong> - Full-text search database</span>
-              </li>
-            </ul>
-          </div>
-
-          <div class="bg-primary/5 border border-primary/20 rounded-lg p-3">
-            <div class="flex items-start gap-2">
-              <i data-lucide="info" class="w-4 h-4 text-primary mt-0.5"></i>
-              <div class="text-sm text-muted-foreground">
-                <p class="font-medium text-foreground">Installation Location</p>
-                <p class="mt-1"><code class="bg-muted px-1 rounded">~/.codexlens/venv</code></p>
-                <p class="mt-1">First installation may take 2-3 minutes to download and setup Python packages.</p>
-              </div>
-            </div>
-          </div>
-
-          <div id="codexlensInstallProgress" class="hidden">
-            <div class="flex items-center gap-3">
-              <div class="animate-spin w-5 h-5 border-2 border-primary border-t-transparent rounded-full"></div>
-              <span class="text-sm" id="codexlensInstallStatus">Starting installation...</span>
-            </div>
-            <div class="mt-2 h-2 bg-muted rounded-full overflow-hidden">
-              <div id="codexlensProgressBar" class="h-full bg-primary transition-all duration-300" style="width: 0%"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="border-t border-border p-4 flex justify-end gap-3 bg-muted/30">
-        <button class="btn-outline px-4 py-2" onclick="closeCodexLensInstallWizard()">Cancel</button>
-        <button id="codexlensInstallBtn" class="btn-primary px-4 py-2" onclick="startCodexLensInstall()">
-          <i data-lucide="download" class="w-4 h-4 mr-2"></i>
-          Install Now
-        </button>
-      </div>
-    </div>
-  `;
-
-  document.body.appendChild(modal);
-
-  if (window.lucide) {
-    lucide.createIcons();
-  }
-}
-
-function closeCodexLensInstallWizard() {
-  const modal = document.getElementById('codexlensInstallModal');
-  if (modal) {
-    modal.remove();
-  }
-}
-
-async function startCodexLensInstall() {
-  const progressDiv = document.getElementById('codexlensInstallProgress');
-  const installBtn = document.getElementById('codexlensInstallBtn');
-  const statusText = document.getElementById('codexlensInstallStatus');
-  const progressBar = document.getElementById('codexlensProgressBar');
-
-  // Show progress, disable button
-  progressDiv.classList.remove('hidden');
-  installBtn.disabled = true;
-  installBtn.innerHTML = '<span class="animate-pulse">Installing...</span>';
-
-  // Simulate progress stages
-  const stages = [
-    { progress: 10, text: 'Creating virtual environment...' },
-    { progress: 30, text: 'Installing pip packages...' },
-    { progress: 50, text: 'Installing CodexLens package...' },
-    { progress: 70, text: 'Setting up Python dependencies...' },
-    { progress: 90, text: 'Finalizing installation...' }
-  ];
-
-  let currentStage = 0;
-  const progressInterval = setInterval(() => {
-    if (currentStage < stages.length) {
-      statusText.textContent = stages[currentStage].text;
-      progressBar.style.width = `${stages[currentStage].progress}%`;
-      currentStage++;
-    }
-  }, 1500);
-
-  try {
-    const response = await csrfFetch('/api/codexlens/bootstrap', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({})
-    });
-
-    clearInterval(progressInterval);
-    const result = await response.json();
-
-    if (result.success) {
-      progressBar.style.width = '100%';
-      statusText.textContent = 'Installation complete!';
-
-      // 清理缓存以确保刷新后获取最新状态
-      if (window.cacheManager) {
-        window.cacheManager.invalidate('all-status');
-        window.cacheManager.invalidate('dashboard-init');
-      }
-      if (typeof window.invalidateCodexLensCache === 'function') {
-        window.invalidateCodexLensCache();
-      }
-
-      setTimeout(() => {
-        closeCodexLensInstallWizard();
-        showRefreshToast('CodexLens installed successfully!', 'success');
-        loadCodexLensStatus().then(() => renderCliStatus());
-      }, 1000);
-    } else {
-      statusText.textContent = `Error: ${result.error}`;
-      progressBar.classList.add('bg-destructive');
-      installBtn.disabled = false;
-      installBtn.innerHTML = '<i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> Retry';
-      if (window.lucide) lucide.createIcons();
-    }
-  } catch (err) {
-    clearInterval(progressInterval);
-    statusText.textContent = `Error: ${err.message}`;
-    progressBar.classList.add('bg-destructive');
-    installBtn.disabled = false;
-    installBtn.innerHTML = '<i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> Retry';
-    if (window.lucide) lucide.createIcons();
-  }
-}
-
-function uninstallCodexLens() {
-  openCodexLensUninstallWizard();
-}
-
-function openCodexLensUninstallWizard() {
-  const modal = document.createElement('div');
-  modal.id = 'codexlensUninstallModal';
-  modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
-  modal.innerHTML = `
-    <div class="bg-card rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden">
-      <div class="p-6">
-        <div class="flex items-center gap-3 mb-4">
-          <div class="w-10 h-10 rounded-full bg-destructive/10 flex items-center justify-center">
-            <i data-lucide="trash-2" class="w-5 h-5 text-destructive"></i>
-          </div>
-          <div>
-            <h3 class="text-lg font-semibold">Uninstall CodexLens</h3>
-            <p class="text-sm text-muted-foreground">Remove CodexLens and all data</p>
-          </div>
-        </div>
-
-        <div class="space-y-4">
-          <div class="bg-destructive/5 border border-destructive/20 rounded-lg p-4">
-            <h4 class="font-medium text-destructive mb-2">What will be removed:</h4>
-            <ul class="text-sm space-y-2 text-muted-foreground">
-              <li class="flex items-start gap-2">
-                <i data-lucide="x" class="w-4 h-4 text-destructive mt-0.5"></i>
-                <span>Virtual environment at <code class="bg-muted px-1 rounded">~/.codexlens/venv</code></span>
-              </li>
-              <li class="flex items-start gap-2">
-                <i data-lucide="x" class="w-4 h-4 text-destructive mt-0.5"></i>
-                <span>All CodexLens indexed data and databases</span>
-              </li>
-              <li class="flex items-start gap-2">
-                <i data-lucide="x" class="w-4 h-4 text-destructive mt-0.5"></i>
-                <span>Configuration and semantic search models</span>
-              </li>
-            </ul>
-          </div>
-
-          <div class="bg-warning/10 border border-warning/20 rounded-lg p-3">
-            <div class="flex items-start gap-2">
-              <i data-lucide="alert-triangle" class="w-4 h-4 text-warning mt-0.5"></i>
-              <div class="text-sm">
-                <p class="font-medium text-warning">Warning</p>
-                <p class="text-muted-foreground">This action cannot be undone. All indexed code data will be permanently deleted.</p>
-              </div>
-            </div>
-          </div>
-
-          <div id="codexlensUninstallProgress" class="hidden">
-            <div class="flex items-center gap-3">
-              <div class="animate-spin w-5 h-5 border-2 border-destructive border-t-transparent rounded-full"></div>
-              <span class="text-sm" id="codexlensUninstallStatus">Removing files...</span>
-            </div>
-            <div class="mt-2 h-2 bg-muted rounded-full overflow-hidden">
-              <div id="codexlensUninstallProgressBar" class="h-full bg-destructive transition-all duration-300" style="width: 0%"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="border-t border-border p-4 flex justify-end gap-3 bg-muted/30">
-        <button class="btn-outline px-4 py-2" onclick="closeCodexLensUninstallWizard()">Cancel</button>
-        <button id="codexlensUninstallBtn" class="btn-destructive px-4 py-2" onclick="startCodexLensUninstall()">
-          <i data-lucide="trash-2" class="w-4 h-4 mr-2"></i>
-          Uninstall
-        </button>
-      </div>
-    </div>
-  `;
-
-  document.body.appendChild(modal);
-
-  if (window.lucide) {
-    lucide.createIcons();
-  }
-}
-
-function closeCodexLensUninstallWizard() {
-  const modal = document.getElementById('codexlensUninstallModal');
-  if (modal) {
-    modal.remove();
-  }
-}
-
-async function startCodexLensUninstall() {
-  const progressDiv = document.getElementById('codexlensUninstallProgress');
-  const uninstallBtn = document.getElementById('codexlensUninstallBtn');
-  const statusText = document.getElementById('codexlensUninstallStatus');
-  const progressBar = document.getElementById('codexlensUninstallProgressBar');
-
-  // Show progress, disable button
-  progressDiv.classList.remove('hidden');
-  uninstallBtn.disabled = true;
-  uninstallBtn.innerHTML = '<span class="animate-pulse">Uninstalling...</span>';
-
-  // Simulate progress stages
-  const stages = [
-    { progress: 25, text: 'Removing virtual environment...' },
-    { progress: 50, text: 'Deleting indexed data...' },
-    { progress: 75, text: 'Cleaning up configuration...' },
-    { progress: 90, text: 'Finalizing removal...' }
-  ];
-
-  let currentStage = 0;
-  const progressInterval = setInterval(() => {
-    if (currentStage < stages.length) {
-      statusText.textContent = stages[currentStage].text;
-      progressBar.style.width = `${stages[currentStage].progress}%`;
-      currentStage++;
-    }
-  }, 500);
-
-  try {
-    const response = await csrfFetch('/api/codexlens/uninstall', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({})
-    });
-
-    clearInterval(progressInterval);
-    const result = await response.json();
-
-    if (result.success) {
-      progressBar.style.width = '100%';
-      statusText.textContent = 'Uninstallation complete!';
-
-      // 清理缓存以确保刷新后获取最新状态
-      if (window.cacheManager) {
-        window.cacheManager.invalidate('all-status');
-        window.cacheManager.invalidate('dashboard-init');
-      }
-      if (typeof window.invalidateCodexLensCache === 'function') {
-        window.invalidateCodexLensCache();
-      }
-
-      setTimeout(() => {
-        closeCodexLensUninstallWizard();
-        showRefreshToast('CodexLens uninstalled successfully!', 'success');
-        loadCodexLensStatus().then(() => renderCliStatus());
-      }, 1000);
-    } else {
-      statusText.textContent = `Error: ${result.error}`;
-      progressBar.classList.remove('bg-destructive');
-      progressBar.classList.add('bg-destructive');
-      uninstallBtn.disabled = false;
-      uninstallBtn.innerHTML = '<i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> Retry';
-      if (window.lucide) lucide.createIcons();
-    }
-  } catch (err) {
-    clearInterval(progressInterval);
-    statusText.textContent = `Error: ${err.message}`;
-    progressBar.classList.remove('bg-destructive');
-    progressBar.classList.add('bg-destructive');
-    uninstallBtn.disabled = false;
-    uninstallBtn.innerHTML = '<i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> Retry';
-    if (window.lucide) lucide.createIcons();
-  }
-}
-
-async function initCodexLensIndex() {
-  // Get current workspace path from multiple sources
-  let targetPath = null;
-
-  // Helper function to check if path is valid
-  const isValidPath = (path) => {
-    return path && typeof path === 'string' && path.length > 0 &&
-           (path.includes('/') || path.includes('\\')) &&
-           !path.startsWith('{{') && !path.endsWith('}}');
-  };
-
-  console.log('[CodexLens] Attempting to get project path...');
-
-  // Try 1: Global projectPath variable
-  if (isValidPath(projectPath)) {
-    targetPath = projectPath;
-    console.log('[CodexLens] ✓ Using global projectPath:', targetPath);
-  }
-
-  // Try 2: Get from workflowData
-  if (!targetPath && typeof workflowData !== 'undefined' && workflowData && isValidPath(workflowData.projectPath)) {
-    targetPath = workflowData.projectPath;
-    console.log('[CodexLens] ✓ Using workflowData.projectPath:', targetPath);
-  }
-
-  // Try 3: Get from current path display element
-  if (!targetPath) {
-    const currentPathEl = document.getElementById('currentPath');
-    if (currentPathEl && currentPathEl.textContent) {
-      const pathText = currentPathEl.textContent.trim();
-      if (isValidPath(pathText)) {
-        targetPath = pathText;
-        console.log('[CodexLens] ✓ Using currentPath element text:', targetPath);
-      }
-    }
-  }
-
-  // Final validation
-  if (!targetPath) {
-    showRefreshToast('Error: No workspace loaded. Please open a workspace first.', 'error');
-    console.error('[CodexLens] No valid project path available');
-    console.error('[CodexLens] Attempted sources: projectPath:', projectPath, 'workflowData:', workflowData);
-    return;
-  }
-
-  showRefreshToast('Initializing CodexLens index...', 'info');
-  console.log('[CodexLens] Initializing index for path:', targetPath);
-
-  try {
-    const response = await csrfFetch('/api/codexlens/init', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ path: targetPath })
-    });
-
-    const result = await response.json();
-    console.log('[CodexLens] Init result:', result);
-
-    if (result.success) {
-      let data = null;
-
-      // Try to parse nested JSON in output field
-      if (result.output && typeof result.output === 'string') {
-        try {
-          // Extract JSON from output (it may contain other text before the JSON)
-          const jsonMatch = result.output.match(/\{[\s\S]*\}/);
-          if (jsonMatch) {
-            const parsed = JSON.parse(jsonMatch[0]);
-            data = parsed.result || parsed;
-            console.log('[CodexLens] Parsed from output:', data);
-          }
-        } catch (e) {
-          console.warn('[CodexLens] Failed to parse output as JSON:', e);
-        }
-      }
-
-      // Fallback to direct result field
-      if (!data) {
-        data = result.result?.result || result.result || result;
-      }
-
-      const files = data.files_indexed || 0;
-      const dirs = data.dirs_indexed || 0;
-      const symbols = data.symbols_indexed || 0;
-
-      console.log('[CodexLens] Parsed data:', { files, dirs, symbols });
-
-      if (files === 0 && dirs === 0) {
-        showRefreshToast(`Warning: No files indexed. Path: ${targetPath}`, 'warning');
-        console.warn('[CodexLens] No files indexed. Full data:', data);
-      } else {
-        showRefreshToast(`Index created: ${files} files, ${dirs} directories`, 'success');
-        console.log('[CodexLens] Index created successfully');
-
-        // Reload CodexLens status and refresh the view
-        loadCodexLensStatus().then(() => renderCliStatus());
-      }
-    } else {
-      showRefreshToast(`Init failed: ${result.error}`, 'error');
-      console.error('[CodexLens] Init error:', result.error);
-    }
-  } catch (err) {
-    showRefreshToast(`Init error: ${err.message}`, 'error');
-    console.error('[CodexLens] Exception:', err);
-  }
-}
-
-// ========== Semantic Search Installation Wizard ==========
-function openSemanticInstallWizard() {
-  const modal = document.createElement('div');
-  modal.id = 'semanticInstallModal';
-  modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
-  modal.innerHTML = `
-    <div class="bg-card rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden">
-      <div class="p-6">
-        <div class="flex items-center gap-3 mb-4">
-          <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
-            <i data-lucide="brain" class="w-5 h-5 text-primary"></i>
-          </div>
-          <div>
-            <h3 class="text-lg font-semibold">Install Semantic Search</h3>
-            <p class="text-sm text-muted-foreground">AI-powered code understanding</p>
-          </div>
-        </div>
-
-        <div class="space-y-4">
-          <div class="bg-muted/50 rounded-lg p-4">
-            <h4 class="font-medium mb-2">What will be installed:</h4>
-            <ul class="text-sm space-y-2 text-muted-foreground">
-              <li class="flex items-start gap-2">
-                <i data-lucide="check" class="w-4 h-4 text-success mt-0.5"></i>
-                <span><strong>sentence-transformers</strong> - ML framework</span>
-              </li>
-              <li class="flex items-start gap-2">
-                <i data-lucide="check" class="w-4 h-4 text-success mt-0.5"></i>
-                <span><strong>bge-small-en-v1.5</strong> - Embedding model (~130MB)</span>
-              </li>
-            </ul>
-          </div>
-
-          <div class="bg-primary/10 border border-primary/20 rounded-lg p-3">
-            <div class="flex items-start gap-2">
-              <i data-lucide="info" class="w-4 h-4 text-primary mt-0.5"></i>
-              <div class="text-sm">
-                <p class="font-medium text-primary">Download Size</p>
-                <p class="text-muted-foreground">Total size: ~130MB. First-time model loading may take a few minutes.</p>
-              </div>
-            </div>
-          </div>
-
-          <div id="semanticInstallProgress" class="hidden">
-            <div class="flex items-center gap-3">
-              <div class="animate-spin w-5 h-5 border-2 border-primary border-t-transparent rounded-full"></div>
-              <span class="text-sm" id="semanticInstallStatus">Installing dependencies...</span>
-            </div>
-            <div class="mt-2 h-2 bg-muted rounded-full overflow-hidden">
-              <div id="semanticProgressBar" class="h-full bg-primary transition-all duration-300" style="width: 0%"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="border-t border-border p-4 flex justify-end gap-3 bg-muted/30">
-        <button class="btn-outline px-4 py-2" onclick="closeSemanticInstallWizard()">Cancel</button>
-        <button id="semanticInstallBtn" class="btn-primary px-4 py-2" onclick="startSemanticInstall()">
-          <i data-lucide="download" class="w-4 h-4 mr-2"></i>
-          Install Now
-        </button>
-      </div>
-    </div>
-  `;
-
-  document.body.appendChild(modal);
-
-  // Initialize Lucide icons in modal
-  if (window.lucide) {
-    lucide.createIcons();
-  }
-}
-
-function closeSemanticInstallWizard() {
-  const modal = document.getElementById('semanticInstallModal');
-  if (modal) {
-    modal.remove();
-  }
-}
-
-async function startSemanticInstall() {
-  const progressDiv = document.getElementById('semanticInstallProgress');
-  const installBtn = document.getElementById('semanticInstallBtn');
-  const statusText = document.getElementById('semanticInstallStatus');
-  const progressBar = document.getElementById('semanticProgressBar');
-
-  // Show progress, disable button
-  progressDiv.classList.remove('hidden');
-  installBtn.disabled = true;
-  installBtn.innerHTML = '<span class="animate-pulse">Installing...</span>';
-
-  // Simulate progress stages
-  const stages = [
-    { progress: 20, text: 'Installing sentence-transformers...' },
-    { progress: 50, text: 'Downloading embedding model...' },
-    { progress: 80, text: 'Setting up model cache...' },
-    { progress: 95, text: 'Finalizing installation...' }
-  ];
-
-  let currentStage = 0;
-  const progressInterval = setInterval(() => {
-    if (currentStage < stages.length) {
-      statusText.textContent = stages[currentStage].text;
-      progressBar.style.width = `${stages[currentStage].progress}%`;
-      currentStage++;
-    }
-  }, 2000);
-
-  try {
-    const response = await csrfFetch('/api/codexlens/semantic/install', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({})
-    });
-
-    clearInterval(progressInterval);
-    const result = await response.json();
-
-    if (result.success) {
-      progressBar.style.width = '100%';
-      statusText.textContent = 'Installation complete!';
-
-      setTimeout(() => {
-        closeSemanticInstallWizard();
-        showRefreshToast('Semantic search installed successfully!', 'success');
-        loadSemanticStatus().then(() => renderCliStatus());
-      }, 1000);
-    } else {
-      statusText.textContent = `Error: ${result.error}`;
-      progressBar.classList.add('bg-destructive');
-      installBtn.disabled = false;
-      installBtn.innerHTML = '<i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> Retry';
-      if (window.lucide) lucide.createIcons();
-    }
-  } catch (err) {
-    clearInterval(progressInterval);
-    statusText.textContent = `Error: ${err.message}`;
-    progressBar.classList.add('bg-destructive');
-    installBtn.disabled = false;
-    installBtn.innerHTML = '<i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> Retry';
-    if (window.lucide) lucide.createIcons();
-  }
-}
-
-// ========== 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;
-