claude-code-workflow 6.1.4 → 6.2.2

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

@@ -0,0 +1,978 @@
+// CLI Status Component
+// Displays CLI tool availability status and allows setting default tool
+
+// ========== CLI State ==========
+let cliToolStatus = { gemini: {}, qwen: {}, codex: {}, claude: {} };
+let codexLensStatus = { ready: false };
+let semanticStatus = { available: false };
+let defaultCliTool = 'gemini';
+let promptConcatFormat = localStorage.getItem('ccw-prompt-format') || 'plain'; // plain, yaml, json
+
+// 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() {
+  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: {} };
+    codexLensStatus = data.codexLens || { ready: false };
+    semanticStatus = data.semantic || { available: false };
+
+    // Update badges
+    updateCliBadge();
+    updateCodexLensBadge();
+
+    return data;
+  } catch (err) {
+    console.error('Failed to load aggregated status:', err);
+    // 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([
+    loadCliToolStatus(),
+    loadCodexLensStatus()
+  ]);
+}
+
+/**
+ * Legacy: Load CLI tool status individually
+ */
+async function loadCliToolStatus() {
+  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;
+
+    // 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
+    };
+
+    // Update CodexLens badge
+    updateCodexLensBadge();
+
+    // If CodexLens is ready, also check semantic status
+    if (data.ready) {
+      await loadSemanticStatus();
+    }
+
+    return data;
+  } catch (err) {
+    console.error('Failed to load CodexLens status:', err);
+    return null;
+  }
+}
+
+/**
+ * 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;
+  }
+}
+
+// ========== 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;
+    badge.textContent = `${available}/${total}`;
+    badge.classList.toggle('text-success', available === total);
+    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);
+  }
+}
+
+// ========== 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'
+  };
+
+  const toolIcons = {
+    gemini: 'sparkle',
+    qwen: 'bot',
+    codex: 'code-2',
+    claude: 'brain'
+  };
+
+  const tools = ['gemini', 'qwen', 'codex', 'claude'];
+
+  const toolsHtml = tools.map(tool => {
+    const status = cliToolStatus[tool] || {};
+    const isAvailable = status.available;
+    const isDefault = defaultCliTool === tool;
+
+    return `
+      <div class="cli-tool-card tool-${tool} ${isAvailable ? 'available' : 'unavailable'}">
+        <div class="cli-tool-header">
+          <span class="cli-tool-status ${isAvailable ? '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>' : ''}
+        </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>
+        <div class="cli-tool-actions mt-3">
+          ${isAvailable && !isDefault
+            ? `<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 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>
+  ` : '';
+
+  // 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>
+      </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>
+    </div>
+  `;
+
+  container.innerHTML = `
+    <div class="cli-status-header">
+      <h3><i data-lucide="terminal" class="w-4 h-4"></i> CLI Tools</h3>
+      <button class="btn-icon" onclick="refreshAllCliStatus()" title="Refresh">
+        <i data-lucide="refresh-cw" class="w-4 h-4"></i>
+      </button>
+    </div>
+    <div class="cli-tools-grid">
+      ${toolsHtml}
+      ${codexLensHtml}
+      ${semanticHtml}
+    </div>
+    ${settingsHtml}
+  `;
+
+  // Initialize Lucide icons
+  if (window.lucide) {
+    lucide.createIcons();
+  }
+}
+
+// ========== Actions ==========
+function setDefaultCliTool(tool) {
+  defaultCliTool = tool;
+  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');
+}
+
+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');
+}
+
+async function refreshAllCliStatus() {
+  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 fetch('/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!';
+
+      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 fetch('/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!';
+
+      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 fetch('/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 fetch('/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();
+  }
+}
+