mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-11 02:33:51 +08:00
4833 lines
202 KiB
JavaScript
4833 lines
202 KiB
JavaScript
// CodexLens Manager - Configuration, Model Management, and Semantic Dependencies
|
|
// Extracted from cli-manager.js for better maintainability
|
|
|
|
// ============================================================
|
|
// UTILITY FUNCTIONS
|
|
// ============================================================
|
|
|
|
/**
|
|
* Escape HTML special characters to prevent XSS
|
|
*/
|
|
function escapeHtml(str) {
|
|
if (!str) return '';
|
|
return String(str)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
// ============================================================
|
|
// CODEXLENS CONFIGURATION MODAL
|
|
// ============================================================
|
|
|
|
/**
|
|
* Show CodexLens configuration modal
|
|
*/
|
|
async function showCodexLensConfigModal() {
|
|
try {
|
|
showRefreshToast(t('codexlens.loadingConfig'), 'info');
|
|
|
|
// Fetch current config
|
|
const response = await fetch('/api/codexlens/config');
|
|
const config = await response.json();
|
|
|
|
const modalHtml = buildCodexLensConfigContent(config);
|
|
|
|
// Create and show modal
|
|
const tempContainer = document.createElement('div');
|
|
tempContainer.innerHTML = modalHtml;
|
|
const modal = tempContainer.firstElementChild;
|
|
document.body.appendChild(modal);
|
|
|
|
// Initialize icons
|
|
if (window.lucide) lucide.createIcons();
|
|
|
|
// Initialize event handlers
|
|
initCodexLensConfigEvents(config);
|
|
} catch (err) {
|
|
showRefreshToast(t('common.error') + ': ' + err.message, 'error');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Build CodexLens configuration modal content - Tabbed Layout
|
|
*/
|
|
function buildCodexLensConfigContent(config) {
|
|
const indexDir = config.index_dir || '~/.codexlens/indexes';
|
|
const indexCount = config.index_count || 0;
|
|
const isInstalled = window.cliToolsStatus?.codexlens?.installed || false;
|
|
const embeddingCoverage = config.embedding_coverage || 0;
|
|
const apiMaxWorkers = config.api_max_workers || 4;
|
|
const apiBatchSize = config.api_batch_size || 8;
|
|
|
|
return '<div class="modal-backdrop" id="codexlensConfigModal">' +
|
|
'<div class="modal-container large">' +
|
|
'<div class="modal-header">' +
|
|
'<div class="flex items-center gap-3">' +
|
|
'<div class="modal-icon">' +
|
|
'<i data-lucide="database" class="w-5 h-5"></i>' +
|
|
'</div>' +
|
|
'<div>' +
|
|
'<h2 class="text-lg font-bold">' + t('codexlens.config') + '</h2>' +
|
|
'<p class="text-xs text-muted-foreground">' + t('codexlens.whereIndexesStored') + '</p>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<button onclick="closeModal()" class="text-muted-foreground hover:text-foreground">' +
|
|
'<i data-lucide="x" class="w-5 h-5"></i>' +
|
|
'</button>' +
|
|
'</div>' +
|
|
|
|
'<div class="modal-body" style="padding: 0;">' +
|
|
// Tab Navigation
|
|
'<div class="flex border-b border-border bg-muted/30">' +
|
|
'<button class="codexlens-tab active flex-1 px-4 py-2.5 text-sm font-medium text-center border-b-2 border-primary text-primary" data-tab="overview">' +
|
|
'<i data-lucide="layout-dashboard" class="w-4 h-4 inline mr-1.5"></i>Overview' +
|
|
'</button>' +
|
|
'<button class="codexlens-tab flex-1 px-4 py-2.5 text-sm font-medium text-center border-b-2 border-transparent text-muted-foreground hover:text-foreground" data-tab="settings">' +
|
|
'<i data-lucide="settings" class="w-4 h-4 inline mr-1.5"></i>Settings' +
|
|
'</button>' +
|
|
(isInstalled
|
|
? '<button class="codexlens-tab flex-1 px-4 py-2.5 text-sm font-medium text-center border-b-2 border-transparent text-muted-foreground hover:text-foreground" data-tab="search">' +
|
|
'<i data-lucide="search" class="w-4 h-4 inline mr-1.5"></i>Search' +
|
|
'</button>' +
|
|
'<button class="codexlens-tab flex-1 px-4 py-2.5 text-sm font-medium text-center border-b-2 border-transparent text-muted-foreground hover:text-foreground" data-tab="advanced">' +
|
|
'<i data-lucide="wrench" class="w-4 h-4 inline mr-1.5"></i>Advanced' +
|
|
'</button>'
|
|
: '') +
|
|
'</div>' +
|
|
|
|
// Tab Content Container
|
|
'<div class="p-4">' +
|
|
|
|
// ========== OVERVIEW TAB ==========
|
|
'<div class="codexlens-tab-content active" data-tab="overview">' +
|
|
// Status Card - Compact grid layout
|
|
'<div class="grid grid-cols-2 gap-3 mb-4">' +
|
|
// Status Card
|
|
'<div class="rounded-lg border border-border p-3 bg-card">' +
|
|
'<div class="flex items-center gap-2 mb-2">' +
|
|
'<i data-lucide="circle-check" class="w-4 h-4 text-muted-foreground"></i>' +
|
|
'<span class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Status</span>' +
|
|
'</div>' +
|
|
(isInstalled
|
|
? '<div class="flex items-center gap-2">' +
|
|
'<span class="w-2 h-2 rounded-full bg-success animate-pulse"></span>' +
|
|
'<span class="text-sm font-medium text-success">Installed</span>' +
|
|
'</div>'
|
|
: '<div class="flex items-center gap-2">' +
|
|
'<span class="w-2 h-2 rounded-full bg-muted-foreground"></span>' +
|
|
'<span class="text-sm font-medium text-muted-foreground">Not Installed</span>' +
|
|
'</div>') +
|
|
'</div>' +
|
|
// Index Count Card
|
|
'<div class="rounded-lg border border-border p-3 bg-card">' +
|
|
'<div class="flex items-center gap-2 mb-2">' +
|
|
'<i data-lucide="database" class="w-4 h-4 text-muted-foreground"></i>' +
|
|
'<span class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Indexes</span>' +
|
|
'</div>' +
|
|
'<div class="text-2xl font-bold text-primary">' + indexCount + '</div>' +
|
|
'</div>' +
|
|
// Embeddings Coverage Card
|
|
'<div class="rounded-lg border border-border p-3 bg-card">' +
|
|
'<div class="flex items-center gap-2 mb-2">' +
|
|
'<i data-lucide="brain" class="w-4 h-4 text-muted-foreground"></i>' +
|
|
'<span class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Embeddings</span>' +
|
|
'</div>' +
|
|
'<div class="text-sm font-medium">' + embeddingCoverage + '%</div>' +
|
|
'</div>' +
|
|
// Storage Path Card
|
|
'<div class="rounded-lg border border-border p-3 bg-card">' +
|
|
'<div class="flex items-center gap-2 mb-2">' +
|
|
'<i data-lucide="folder" class="w-4 h-4 text-muted-foreground"></i>' +
|
|
'<span class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Storage</span>' +
|
|
'</div>' +
|
|
'<div class="text-xs font-mono text-muted-foreground truncate" title="' + escapeHtml(indexDir) + '">' + escapeHtml(indexDir) + '</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
|
|
// Quick Actions
|
|
'<div class="space-y-2">' +
|
|
'<h4 class="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">Quick Actions</h4>' +
|
|
'<div class="grid grid-cols-2 gap-2">' +
|
|
(isInstalled
|
|
? '<button class="flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-lg border border-primary/30 bg-primary/5 text-primary hover:bg-primary/10 transition-colors" onclick="initCodexLensIndex()">' +
|
|
'<i data-lucide="refresh-cw" class="w-4 h-4"></i> Update Index' +
|
|
'</button>' +
|
|
'<button class="flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-lg border border-border bg-background hover:bg-muted/50 transition-colors" onclick="showWatcherControlModal()">' +
|
|
'<i data-lucide="eye" class="w-4 h-4"></i> File Watcher' +
|
|
'</button>' +
|
|
'<button class="flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-lg border border-border bg-background hover:bg-muted/50 transition-colors" onclick="showRerankerConfigModal()">' +
|
|
'<i data-lucide="layers" class="w-4 h-4"></i> Reranker' +
|
|
'</button>' +
|
|
'<button class="flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-lg border border-border bg-background hover:bg-muted/50 transition-colors" onclick="cleanCurrentWorkspaceIndex()">' +
|
|
'<i data-lucide="eraser" class="w-4 h-4"></i> Clean Workspace' +
|
|
'</button>'
|
|
: '<button class="col-span-2 flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors" onclick="installCodexLensFromManager()">' +
|
|
'<i data-lucide="download" class="w-4 h-4"></i> Install CodexLens' +
|
|
'</button>') +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
|
|
// ========== SETTINGS TAB ==========
|
|
'<div class="codexlens-tab-content hidden" data-tab="settings">' +
|
|
// Index Storage Path
|
|
'<div class="space-y-4">' +
|
|
'<div class="space-y-2">' +
|
|
'<label class="block text-sm font-medium">' + t('codexlens.indexStoragePath') + '</label>' +
|
|
'<input type="text" id="indexDirInput" value="' + escapeHtml(indexDir) + '" ' +
|
|
'placeholder="' + t('codexlens.pathPlaceholder') + '" ' +
|
|
'class="tool-config-input w-full" />' +
|
|
'<p class="text-xs text-muted-foreground">' + t('codexlens.pathInfo') + '</p>' +
|
|
'</div>' +
|
|
|
|
// API Settings (Concurrency)
|
|
'<div class="rounded-lg border border-border p-4 space-y-3">' +
|
|
'<h4 class="text-sm font-medium flex items-center gap-2">' +
|
|
'<i data-lucide="zap" class="w-4 h-4"></i> API Settings' +
|
|
'</h4>' +
|
|
'<div class="grid grid-cols-2 gap-3">' +
|
|
'<div>' +
|
|
'<label class="block text-xs font-medium text-muted-foreground mb-1">Max Workers</label>' +
|
|
'<input type="number" id="apiMaxWorkersInput" value="' + apiMaxWorkers + '" min="1" max="16" ' +
|
|
'class="tool-config-input w-full" />' +
|
|
'</div>' +
|
|
'<div>' +
|
|
'<label class="block text-xs font-medium text-muted-foreground mb-1">Batch Size</label>' +
|
|
'<input type="number" id="apiBatchSizeInput" value="' + apiBatchSize + '" min="1" max="32" ' +
|
|
'class="tool-config-input w-full" />' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<p class="text-xs text-muted-foreground">Higher values speed up embedding generation but may hit rate limits.</p>' +
|
|
'</div>' +
|
|
|
|
// Environment Variables Section
|
|
'<div class="rounded-lg border border-border p-4 space-y-3">' +
|
|
'<div class="flex items-center justify-between">' +
|
|
'<h4 class="text-sm font-medium flex items-center gap-2">' +
|
|
'<i data-lucide="file-code" class="w-4 h-4"></i> Environment Variables' +
|
|
'</h4>' +
|
|
'<button class="text-xs text-primary hover:underline" onclick="loadEnvVariables()">Load</button>' +
|
|
'</div>' +
|
|
'<div id="envVarsContainer" class="space-y-2">' +
|
|
'<div class="text-xs text-muted-foreground">Click Load to view/edit ~/.codexlens/.env</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
|
|
// Migration Warning
|
|
'<div class="flex items-start gap-2 bg-warning/10 border border-warning/30 rounded-lg p-3">' +
|
|
'<i data-lucide="alert-triangle" class="w-4 h-4 text-warning mt-0.5 flex-shrink-0"></i>' +
|
|
'<div class="text-sm">' +
|
|
'<p class="font-medium text-warning">' + t('codexlens.migrationRequired') + '</p>' +
|
|
'<p class="text-muted-foreground mt-1 text-xs">' + t('codexlens.migrationWarning') + '</p>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
|
|
// ========== SEARCH TAB (only if installed) ==========
|
|
(isInstalled
|
|
? '<div class="codexlens-tab-content hidden" data-tab="search">' +
|
|
'<div class="space-y-4">' +
|
|
// Search Options Row
|
|
'<div class="grid grid-cols-2 gap-3">' +
|
|
'<div>' +
|
|
'<label class="block text-xs font-medium text-muted-foreground mb-1">Search Type</label>' +
|
|
'<select id="searchTypeSelect" class="tool-config-select w-full">' +
|
|
'<option value="search">Content Search</option>' +
|
|
'<option value="search_files">File Search</option>' +
|
|
'<option value="symbol">Symbol Search</option>' +
|
|
'</select>' +
|
|
'</div>' +
|
|
'<div>' +
|
|
'<label class="block text-xs font-medium text-muted-foreground mb-1">Mode</label>' +
|
|
'<select id="searchModeSelect" class="tool-config-select w-full">' +
|
|
'<option value="dense_rerank">Semantic (default)</option>' +
|
|
'<option value="fts">Exact (FTS)</option>' +
|
|
'<option value="fuzzy">Fuzzy</option>' +
|
|
'</select>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
// Query Input
|
|
'<div>' +
|
|
'<input type="text" id="searchQueryInput" class="tool-config-input w-full text-base py-2.5" ' +
|
|
'placeholder="Enter search query..." />' +
|
|
'</div>' +
|
|
// Search Button
|
|
'<button class="btn btn-primary w-full py-2.5" id="runSearchBtn">' +
|
|
'<i data-lucide="search" class="w-4 h-4 mr-2"></i> Search' +
|
|
'</button>' +
|
|
// Results
|
|
'<div id="searchResults" class="hidden">' +
|
|
'<div class="flex items-center justify-between mb-2">' +
|
|
'<span class="text-sm font-medium">Results</span>' +
|
|
'<span id="searchResultCount" class="text-xs text-muted-foreground"></span>' +
|
|
'</div>' +
|
|
'<pre id="searchResultContent" class="text-xs bg-muted/50 rounded-lg p-3 overflow-auto max-h-64"></pre>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
: '') +
|
|
|
|
// ========== ADVANCED TAB (only if installed) ==========
|
|
(isInstalled
|
|
? '<div class="codexlens-tab-content hidden" data-tab="advanced">' +
|
|
'<div class="space-y-4">' +
|
|
// Dependencies Section
|
|
'<div class="rounded-lg border border-border p-4">' +
|
|
'<h4 class="text-sm font-medium mb-3 flex items-center gap-2">' +
|
|
'<i data-lucide="package" class="w-4 h-4"></i> Dependencies' +
|
|
'</h4>' +
|
|
'<div id="semanticDepsStatus" class="space-y-2">' +
|
|
'<div class="text-sm text-muted-foreground">' + t('codexlens.checkingDeps') + '</div>' +
|
|
'</div>' +
|
|
// SPLADE status hidden - not currently used
|
|
// '<div id="spladeStatus" class="space-y-2 mt-3 pt-3 border-t border-border">' +
|
|
// '<div class="text-sm text-muted-foreground">' + t('common.loading') + '</div>' +
|
|
// '</div>' +
|
|
'</div>' +
|
|
|
|
// Model Management - Simplified with Embedding and Reranker sections
|
|
'<div class="rounded-lg border border-border p-4">' +
|
|
'<h4 class="text-sm font-medium mb-3 flex items-center gap-2">' +
|
|
'<i data-lucide="brain" class="w-4 h-4"></i> ' + t('codexlens.models') +
|
|
'</h4>' +
|
|
// Embedding Models
|
|
'<div class="mb-4">' +
|
|
'<div class="text-xs font-medium text-muted-foreground mb-2 flex items-center gap-1">' +
|
|
'<i data-lucide="layers" class="w-3 h-3"></i> Embedding Models' +
|
|
'</div>' +
|
|
'<div id="modelListContainer" class="space-y-2">' +
|
|
'<div class="text-sm text-muted-foreground">' + t('codexlens.loadingModels') + '</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
// Reranker Models
|
|
'<div class="pt-3 border-t border-border">' +
|
|
'<div class="text-xs font-medium text-muted-foreground mb-2 flex items-center gap-1">' +
|
|
'<i data-lucide="arrow-up-down" class="w-3 h-3"></i> Reranker Models' +
|
|
'</div>' +
|
|
'<div id="rerankerModelListContainer" class="space-y-2">' +
|
|
'<div class="text-sm text-muted-foreground">' + t('common.loading') + '</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
|
|
// Danger Zone
|
|
'<div class="rounded-lg border border-destructive/30 p-4">' +
|
|
'<h4 class="text-sm font-medium text-destructive mb-3 flex items-center gap-2">' +
|
|
'<i data-lucide="alert-triangle" class="w-4 h-4"></i> Danger Zone' +
|
|
'</h4>' +
|
|
'<div class="flex flex-wrap gap-2">' +
|
|
'<button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border border-border bg-background hover:bg-muted/50 transition-colors" onclick="cleanCodexLensIndexes()">' +
|
|
'<i data-lucide="trash" class="w-3.5 h-3.5"></i> Clean All Indexes' +
|
|
'</button>' +
|
|
'<button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border border-destructive/30 bg-destructive/5 text-destructive hover:bg-destructive/10 transition-colors" onclick="uninstallCodexLensFromManager()">' +
|
|
'<i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Uninstall' +
|
|
'</button>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
: '') +
|
|
|
|
'</div>' + // End Tab Content Container
|
|
'</div>' + // End modal-body
|
|
|
|
// Footer
|
|
'<div class="tool-config-footer">' +
|
|
'<button class="btn btn-outline" onclick="closeModal()">' + t('common.cancel') + '</button>' +
|
|
'<button class="btn btn-primary" id="saveCodexLensConfigBtn">' +
|
|
'<i data-lucide="save" class="w-3.5 h-3.5"></i> ' + t('codexlens.saveConfig') +
|
|
'</button>' +
|
|
'</div>' +
|
|
'</div>';
|
|
}
|
|
|
|
/**
|
|
* Initialize CodexLens config modal event handlers
|
|
*/
|
|
function initCodexLensConfigEvents(currentConfig) {
|
|
// Tab switching
|
|
document.querySelectorAll('.codexlens-tab').forEach(function(tab) {
|
|
tab.onclick = function() {
|
|
// Remove active from all tabs
|
|
document.querySelectorAll('.codexlens-tab').forEach(function(t) {
|
|
t.classList.remove('active', 'border-primary', 'text-primary');
|
|
t.classList.add('border-transparent', 'text-muted-foreground');
|
|
});
|
|
// Hide all content
|
|
document.querySelectorAll('.codexlens-tab-content').forEach(function(c) {
|
|
c.classList.add('hidden');
|
|
c.classList.remove('active');
|
|
});
|
|
// Activate clicked tab
|
|
this.classList.add('active', 'border-primary', 'text-primary');
|
|
this.classList.remove('border-transparent', 'text-muted-foreground');
|
|
// Show corresponding content
|
|
var tabName = this.dataset.tab;
|
|
var content = document.querySelector('.codexlens-tab-content[data-tab="' + tabName + '"]');
|
|
if (content) {
|
|
content.classList.remove('hidden');
|
|
content.classList.add('active');
|
|
}
|
|
};
|
|
});
|
|
|
|
// Save button
|
|
var saveBtn = document.getElementById('saveCodexLensConfigBtn');
|
|
if (saveBtn) {
|
|
saveBtn.onclick = async function() {
|
|
var indexDirInput = document.getElementById('indexDirInput');
|
|
var apiMaxWorkersInput = document.getElementById('apiMaxWorkersInput');
|
|
var apiBatchSizeInput = document.getElementById('apiBatchSizeInput');
|
|
|
|
var newIndexDir = indexDirInput ? indexDirInput.value.trim() : '';
|
|
var newMaxWorkers = apiMaxWorkersInput ? parseInt(apiMaxWorkersInput.value) || 4 : 4;
|
|
var newBatchSize = apiBatchSizeInput ? parseInt(apiBatchSizeInput.value) || 8 : 8;
|
|
|
|
if (!newIndexDir) {
|
|
showRefreshToast(t('codexlens.pathEmpty'), 'error');
|
|
return;
|
|
}
|
|
|
|
// Check if anything changed
|
|
var hasChanges = newIndexDir !== currentConfig.index_dir ||
|
|
newMaxWorkers !== (currentConfig.api_max_workers || 4) ||
|
|
newBatchSize !== (currentConfig.api_batch_size || 8);
|
|
|
|
if (!hasChanges) {
|
|
closeModal();
|
|
return;
|
|
}
|
|
|
|
saveBtn.disabled = true;
|
|
saveBtn.innerHTML = '<span class="animate-pulse">' + t('common.saving') + '</span>';
|
|
|
|
try {
|
|
var response = await fetch('/api/codexlens/config', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
index_dir: newIndexDir,
|
|
api_max_workers: newMaxWorkers,
|
|
api_batch_size: newBatchSize
|
|
})
|
|
});
|
|
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
showRefreshToast(t('codexlens.configSaved'), 'success');
|
|
closeModal();
|
|
|
|
// Refresh CodexLens status
|
|
if (typeof loadCodexLensStatus === 'function') {
|
|
await loadCodexLensStatus();
|
|
renderToolsSection();
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
} else {
|
|
showRefreshToast(t('common.saveFailed') + ': ' + result.error, 'error');
|
|
saveBtn.disabled = false;
|
|
saveBtn.innerHTML = '<i data-lucide="save" class="w-3.5 h-3.5"></i> ' + t('codexlens.saveConfig');
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast(t('common.error') + ': ' + err.message, 'error');
|
|
saveBtn.disabled = false;
|
|
saveBtn.innerHTML = '<i data-lucide="save" class="w-3.5 h-3.5"></i> ' + t('codexlens.saveConfig');
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
};
|
|
}
|
|
|
|
// Test Search Button
|
|
var runSearchBtn = document.getElementById('runSearchBtn');
|
|
if (runSearchBtn) {
|
|
runSearchBtn.onclick = async function() {
|
|
var searchType = document.getElementById('searchTypeSelect').value;
|
|
var searchMode = document.getElementById('searchModeSelect').value;
|
|
var query = document.getElementById('searchQueryInput').value.trim();
|
|
var searchLimit = document.getElementById('searchLimitInput')?.value || '5';
|
|
var contentLength = document.getElementById('contentLengthInput')?.value || '200';
|
|
var extraFiles = document.getElementById('extraFilesInput')?.value || '10';
|
|
var resultsDiv = document.getElementById('searchResults');
|
|
var resultCount = document.getElementById('searchResultCount');
|
|
var resultContent = document.getElementById('searchResultContent');
|
|
|
|
if (!query) {
|
|
showRefreshToast(t('codexlens.enterQuery'), 'warning');
|
|
return;
|
|
}
|
|
|
|
runSearchBtn.disabled = true;
|
|
runSearchBtn.innerHTML = '<span class="animate-pulse">' + t('codexlens.searching') + '</span>';
|
|
resultsDiv.classList.add('hidden');
|
|
|
|
try {
|
|
var endpoint = '/api/codexlens/' + searchType;
|
|
var params = new URLSearchParams({
|
|
query: query,
|
|
limit: searchLimit,
|
|
max_content_length: contentLength,
|
|
extra_files_count: extraFiles
|
|
});
|
|
// Add mode parameter for search and search_files (not for symbol search)
|
|
if (searchType === 'search' || searchType === 'search_files') {
|
|
params.append('mode', searchMode);
|
|
}
|
|
|
|
var response = await fetch(endpoint + '?' + params.toString());
|
|
var result = await response.json();
|
|
|
|
console.log('[CodexLens Test] Search result:', result);
|
|
|
|
if (result.success) {
|
|
var results = result.results || result.files || [];
|
|
resultCount.textContent = results.length + ' ' + t('codexlens.resultsCount');
|
|
resultContent.textContent = JSON.stringify(results, null, 2);
|
|
resultsDiv.classList.remove('hidden');
|
|
showRefreshToast(t('codexlens.searchCompleted') + ': ' + results.length + ' ' + t('codexlens.resultsCount'), 'success');
|
|
} else {
|
|
resultContent.textContent = t('common.error') + ': ' + (result.error || t('common.unknownError'));
|
|
resultsDiv.classList.remove('hidden');
|
|
showRefreshToast(t('codexlens.searchFailed') + ': ' + result.error, 'error');
|
|
}
|
|
|
|
runSearchBtn.disabled = false;
|
|
runSearchBtn.innerHTML = '<i data-lucide="search" class="w-3 h-3"></i> ' + t('codexlens.runSearch');
|
|
if (window.lucide) lucide.createIcons();
|
|
} catch (err) {
|
|
console.error('[CodexLens Test] Error:', err);
|
|
resultContent.textContent = t('common.exception') + ': ' + err.message;
|
|
resultsDiv.classList.remove('hidden');
|
|
showRefreshToast(t('common.error') + ': ' + err.message, 'error');
|
|
runSearchBtn.disabled = false;
|
|
runSearchBtn.innerHTML = '<i data-lucide="search" class="w-3 h-3"></i> ' + t('codexlens.runSearch');
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
};
|
|
}
|
|
|
|
// Load semantic dependencies status
|
|
loadSemanticDepsStatus();
|
|
|
|
// SPLADE status hidden - not currently used
|
|
// loadSpladeStatus();
|
|
|
|
// Load model lists (embedding and reranker)
|
|
loadModelList();
|
|
loadRerankerModelList();
|
|
}
|
|
|
|
// ============================================================
|
|
// MODEL LOCK/UNLOCK MANAGEMENT
|
|
// ============================================================
|
|
|
|
var MODEL_LOCK_KEY = 'codexlens_model_lock';
|
|
|
|
/**
|
|
* Get model lock state from localStorage
|
|
* @returns {Object} { locked: boolean, backend: string, model: string }
|
|
*/
|
|
function getModelLockState() {
|
|
try {
|
|
var stored = localStorage.getItem(MODEL_LOCK_KEY);
|
|
if (stored) {
|
|
return JSON.parse(stored);
|
|
}
|
|
} catch (e) {
|
|
console.warn('[CodexLens] Failed to get model lock state:', e);
|
|
}
|
|
return { locked: false, backend: 'fastembed', model: 'code' };
|
|
}
|
|
|
|
/**
|
|
* Set model lock state in localStorage
|
|
* @param {boolean} locked - Whether model is locked
|
|
* @param {string} backend - Selected backend
|
|
* @param {string} model - Selected model
|
|
*/
|
|
function setModelLockState(locked, backend, model) {
|
|
try {
|
|
localStorage.setItem(MODEL_LOCK_KEY, JSON.stringify({
|
|
locked: locked,
|
|
backend: backend || 'fastembed',
|
|
model: model || 'code'
|
|
}));
|
|
} catch (e) {
|
|
console.warn('[CodexLens] Failed to save model lock state:', e);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Toggle model lock state
|
|
*/
|
|
function toggleModelLock() {
|
|
var backendSelect = document.getElementById('pageBackendSelect');
|
|
var modelSelect = document.getElementById('pageModelSelect');
|
|
var lockBtn = document.getElementById('modelLockBtn');
|
|
var lockIcon = document.getElementById('modelLockIcon');
|
|
|
|
var currentState = getModelLockState();
|
|
var newLocked = !currentState.locked;
|
|
|
|
// Get current values if locking
|
|
var backend = newLocked ? (backendSelect ? backendSelect.value : 'fastembed') : currentState.backend;
|
|
var model = newLocked ? (modelSelect ? modelSelect.value : 'code') : currentState.model;
|
|
|
|
// Save state
|
|
setModelLockState(newLocked, backend, model);
|
|
|
|
// Update UI
|
|
applyModelLockUI(newLocked, backend, model);
|
|
|
|
// Show feedback
|
|
if (newLocked) {
|
|
showRefreshToast('Model locked: ' + backend + ' / ' + model, 'success');
|
|
} else {
|
|
showRefreshToast('Model unlocked', 'info');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Apply model lock UI state
|
|
*/
|
|
function applyModelLockUI(locked, backend, model) {
|
|
var backendSelect = document.getElementById('pageBackendSelect');
|
|
var modelSelect = document.getElementById('pageModelSelect');
|
|
var lockBtn = document.getElementById('modelLockBtn');
|
|
var lockIcon = document.getElementById('modelLockIcon');
|
|
var lockText = document.getElementById('modelLockText');
|
|
|
|
if (backendSelect) {
|
|
backendSelect.disabled = locked;
|
|
if (locked && backend) {
|
|
backendSelect.value = backend;
|
|
}
|
|
}
|
|
|
|
if (modelSelect) {
|
|
modelSelect.disabled = locked;
|
|
if (locked && model) {
|
|
modelSelect.value = model;
|
|
}
|
|
}
|
|
|
|
if (lockBtn) {
|
|
if (locked) {
|
|
lockBtn.classList.remove('btn-outline');
|
|
lockBtn.classList.add('btn-primary');
|
|
} else {
|
|
lockBtn.classList.remove('btn-primary');
|
|
lockBtn.classList.add('btn-outline');
|
|
}
|
|
}
|
|
|
|
if (lockIcon) {
|
|
lockIcon.setAttribute('data-lucide', locked ? 'lock' : 'unlock');
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
|
|
if (lockText) {
|
|
lockText.textContent = locked ? 'Locked' : 'Lock Model';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Initialize model lock state on page load
|
|
*/
|
|
function initModelLockState() {
|
|
var state = getModelLockState();
|
|
if (state.locked) {
|
|
applyModelLockUI(true, state.backend, state.model);
|
|
}
|
|
}
|
|
|
|
// Make functions globally accessible
|
|
window.toggleModelLock = toggleModelLock;
|
|
window.initModelLockState = initModelLockState;
|
|
window.getModelLockState = getModelLockState;
|
|
|
|
// ============================================================
|
|
// ENVIRONMENT VARIABLES MANAGEMENT
|
|
// ============================================================
|
|
|
|
// Environment variable groups for organized display
|
|
var ENV_VAR_GROUPS = {
|
|
backend: {
|
|
label: 'Backend Selection',
|
|
icon: 'toggle-left',
|
|
vars: {
|
|
'CODEXLENS_EMBEDDING_BACKEND': { label: 'Embedding Backend', type: 'select', options: ['fastembed', 'litellm'], default: 'fastembed' },
|
|
'CODEXLENS_RERANKER_BACKEND': { label: 'Reranker Backend', type: 'select', options: ['fastembed', 'litellm'], default: 'fastembed' }
|
|
}
|
|
},
|
|
local: {
|
|
label: 'Local Model Settings',
|
|
icon: 'hard-drive',
|
|
showWhen: function(env) { return env['CODEXLENS_EMBEDDING_BACKEND'] !== 'litellm' || env['CODEXLENS_RERANKER_BACKEND'] !== 'litellm'; },
|
|
vars: {
|
|
'CODEXLENS_EMBEDDING_MODEL': { label: 'Embedding Model', placeholder: 'fast (code, base, minilm, multilingual, balanced)' },
|
|
'CODEXLENS_RERANKER_MODEL': { label: 'Reranker Model', placeholder: 'Xenova/ms-marco-MiniLM-L-6-v2' }
|
|
}
|
|
},
|
|
api: {
|
|
label: 'API Settings (LiteLLM)',
|
|
icon: 'cloud',
|
|
showWhen: function(env) { return env['CODEXLENS_EMBEDDING_BACKEND'] === 'litellm' || env['CODEXLENS_RERANKER_BACKEND'] === 'litellm'; },
|
|
vars: {
|
|
'LITELLM_API_KEY': { label: 'API Key', placeholder: 'sk-...', type: 'password' },
|
|
'LITELLM_API_BASE': { label: 'API Base URL', placeholder: 'https://api.openai.com/v1' },
|
|
'LITELLM_EMBEDDING_MODEL': {
|
|
label: 'Embedding Model',
|
|
type: 'model-select',
|
|
placeholder: 'Select or enter model...',
|
|
models: [
|
|
{ group: 'OpenAI', items: ['text-embedding-3-small', 'text-embedding-3-large', 'text-embedding-ada-002'] },
|
|
{ group: 'Cohere', items: ['embed-english-v3.0', 'embed-multilingual-v3.0', 'embed-english-light-v3.0'] },
|
|
{ group: 'Voyage', items: ['voyage-3', 'voyage-3-lite', 'voyage-code-3', 'voyage-multilingual-2'] },
|
|
{ group: 'SiliconFlow', items: ['BAAI/bge-m3', 'BAAI/bge-large-zh-v1.5', 'BAAI/bge-large-en-v1.5'] },
|
|
{ group: 'Jina', items: ['jina-embeddings-v3', 'jina-embeddings-v2-base-en', 'jina-embeddings-v2-base-zh'] }
|
|
]
|
|
},
|
|
'LITELLM_RERANKER_MODEL': {
|
|
label: 'Reranker Model',
|
|
type: 'model-select',
|
|
placeholder: 'Select or enter model...',
|
|
models: [
|
|
{ group: 'Cohere', items: ['rerank-english-v3.0', 'rerank-multilingual-v3.0', 'rerank-english-v2.0'] },
|
|
{ group: 'Voyage', items: ['rerank-2', 'rerank-2-lite', 'rerank-1'] },
|
|
{ group: 'SiliconFlow', items: ['BAAI/bge-reranker-v2-m3', 'BAAI/bge-reranker-large', 'BAAI/bge-reranker-base'] },
|
|
{ group: 'Jina', items: ['jina-reranker-v2-base-multilingual', 'jina-reranker-v1-base-en'] }
|
|
]
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Load environment variables from ~/.codexlens/.env
|
|
*/
|
|
async function loadEnvVariables() {
|
|
var container = document.getElementById('envVarsContainer');
|
|
if (!container) return;
|
|
|
|
container.innerHTML = '<div class="text-xs text-muted-foreground animate-pulse">Loading...</div>';
|
|
|
|
try {
|
|
// Fetch env vars and configured models in parallel
|
|
var [envResponse, embeddingPoolResponse, rerankerPoolResponse] = await Promise.all([
|
|
fetch('/api/codexlens/env'),
|
|
fetch('/api/litellm-api/embedding-pool').catch(function() { return null; }),
|
|
fetch('/api/litellm-api/reranker-pool').catch(function() { return null; })
|
|
]);
|
|
|
|
var result = await envResponse.json();
|
|
|
|
if (!result.success) {
|
|
container.innerHTML = '<div class="text-xs text-error">' + escapeHtml(result.error || 'Failed to load') + '</div>';
|
|
return;
|
|
}
|
|
|
|
// Get configured embedding models from API settings
|
|
var configuredEmbeddingModels = [];
|
|
if (embeddingPoolResponse && embeddingPoolResponse.ok) {
|
|
var poolData = await embeddingPoolResponse.json();
|
|
configuredEmbeddingModels = poolData.availableModels || [];
|
|
}
|
|
|
|
// Get configured reranker models from API settings
|
|
var configuredRerankerModels = [];
|
|
if (rerankerPoolResponse && rerankerPoolResponse.ok) {
|
|
var rerankerData = await rerankerPoolResponse.json();
|
|
configuredRerankerModels = rerankerData.availableModels || [];
|
|
}
|
|
|
|
var env = result.env || {};
|
|
var html = '<div class="space-y-4">';
|
|
|
|
// Get available LiteLLM providers
|
|
var litellmProviders = window.litellmApiConfig?.providers || [];
|
|
|
|
// Render each group
|
|
for (var groupKey in ENV_VAR_GROUPS) {
|
|
var group = ENV_VAR_GROUPS[groupKey];
|
|
|
|
// Check if this group should be shown
|
|
if (group.showWhen && !group.showWhen(env)) {
|
|
continue;
|
|
}
|
|
|
|
html += '<div class="border border-border rounded-lg p-3">' +
|
|
'<div class="flex items-center gap-2 mb-2 text-xs font-medium text-muted-foreground">' +
|
|
'<i data-lucide="' + group.icon + '" class="w-3.5 h-3.5"></i>' +
|
|
group.label +
|
|
'</div>' +
|
|
'<div class="space-y-2">';
|
|
|
|
// Add provider selector for API group
|
|
if (groupKey === 'api' && litellmProviders.length > 0) {
|
|
html += '<div class="flex items-center gap-2 mb-2 pb-2 border-b border-border">' +
|
|
'<label class="text-xs text-muted-foreground w-28 flex-shrink-0">Use Provider</label>' +
|
|
'<select id="litellmProviderSelect" class="tool-config-input flex-1 text-xs py-1" onchange="applyLiteLLMProvider(this.value)">' +
|
|
'<option value="">-- Select to auto-fill --</option>';
|
|
litellmProviders.forEach(function(provider) {
|
|
var providerName = provider.name || provider.id || 'Unknown';
|
|
html += '<option value="' + escapeHtml(provider.id || providerName) + '">' + escapeHtml(providerName) + '</option>';
|
|
});
|
|
html += '</select></div>';
|
|
}
|
|
|
|
for (var key in group.vars) {
|
|
var config = group.vars[key];
|
|
var value = env[key] || config.default || '';
|
|
|
|
if (config.type === 'select') {
|
|
html += '<div class="flex items-center gap-2">' +
|
|
'<label class="text-xs text-muted-foreground w-28 flex-shrink-0">' + escapeHtml(config.label) + '</label>' +
|
|
'<select class="tool-config-input flex-1 text-xs py-1" data-env-key="' + escapeHtml(key) + '">';
|
|
config.options.forEach(function(opt) {
|
|
html += '<option value="' + escapeHtml(opt) + '"' + (value === opt ? ' selected' : '') + '>' + escapeHtml(opt) + '</option>';
|
|
});
|
|
html += '</select></div>';
|
|
} else if (config.type === 'model-select') {
|
|
// Model selector with grouped options and custom input support
|
|
var datalistId = 'models-' + key.replace(/_/g, '-').toLowerCase();
|
|
var isEmbeddingModel = key === 'LITELLM_EMBEDDING_MODEL';
|
|
var isRerankerModel = key === 'LITELLM_RERANKER_MODEL';
|
|
|
|
html += '<div class="flex items-center gap-2">' +
|
|
'<label class="text-xs text-muted-foreground w-28 flex-shrink-0" title="' + escapeHtml(key) + '">' + escapeHtml(config.label) + '</label>' +
|
|
'<div class="relative flex-1">' +
|
|
'<input type="text" class="tool-config-input w-full text-xs py-1 pr-6" ' +
|
|
'data-env-key="' + escapeHtml(key) + '" value="' + escapeHtml(value) + '" ' +
|
|
'placeholder="' + escapeHtml(config.placeholder || '') + '" list="' + datalistId + '" />' +
|
|
'<i data-lucide="chevron-down" class="w-3 h-3 absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none"></i>' +
|
|
'</div>' +
|
|
'<datalist id="' + datalistId + '">';
|
|
|
|
// For embedding models: use configured models from API settings first
|
|
if (isEmbeddingModel && configuredEmbeddingModels.length > 0) {
|
|
html += '<option value="" disabled>-- Configured in API Settings --</option>';
|
|
configuredEmbeddingModels.forEach(function(model) {
|
|
var providers = model.providers ? model.providers.join(', ') : '';
|
|
html += '<option value="' + escapeHtml(model.modelId) + '">' +
|
|
escapeHtml(model.modelName || model.modelId) +
|
|
(providers ? ' (' + escapeHtml(providers) + ')' : '') +
|
|
'</option>';
|
|
});
|
|
// Add separator and fallback options
|
|
if (config.models) {
|
|
html += '<option value="" disabled>-- Common Models --</option>';
|
|
config.models.forEach(function(group) {
|
|
group.items.forEach(function(model) {
|
|
// Skip if already in configured list
|
|
var exists = configuredEmbeddingModels.some(function(m) { return m.modelId === model; });
|
|
if (!exists) {
|
|
html += '<option value="' + escapeHtml(model) + '">' + escapeHtml(group.group) + ': ' + escapeHtml(model) + '</option>';
|
|
}
|
|
});
|
|
});
|
|
}
|
|
} else if (isRerankerModel && configuredRerankerModels.length > 0) {
|
|
// For reranker models: use configured models from API settings first
|
|
html += '<option value="" disabled>-- Configured in API Settings --</option>';
|
|
configuredRerankerModels.forEach(function(model) {
|
|
var providers = model.providers ? model.providers.join(', ') : '';
|
|
html += '<option value="' + escapeHtml(model.modelId) + '">' +
|
|
escapeHtml(model.modelName || model.modelId) +
|
|
(providers ? ' (' + escapeHtml(providers) + ')' : '') +
|
|
'</option>';
|
|
});
|
|
// Add separator and fallback options
|
|
if (config.models) {
|
|
html += '<option value="" disabled>-- Common Models --</option>';
|
|
config.models.forEach(function(group) {
|
|
group.items.forEach(function(model) {
|
|
// Skip if already in configured list
|
|
var exists = configuredRerankerModels.some(function(m) { return m.modelId === model; });
|
|
if (!exists) {
|
|
html += '<option value="' + escapeHtml(model) + '">' + escapeHtml(group.group) + ': ' + escapeHtml(model) + '</option>';
|
|
}
|
|
});
|
|
});
|
|
}
|
|
} else if (config.models) {
|
|
// Fallback: use static model list
|
|
config.models.forEach(function(group) {
|
|
group.items.forEach(function(model) {
|
|
html += '<option value="' + escapeHtml(model) + '">' + escapeHtml(group.group) + ': ' + escapeHtml(model) + '</option>';
|
|
});
|
|
});
|
|
}
|
|
|
|
html += '</datalist></div>';
|
|
} else {
|
|
var inputType = config.type || 'text';
|
|
html += '<div class="flex items-center gap-2">' +
|
|
'<label class="text-xs text-muted-foreground w-28 flex-shrink-0" title="' + escapeHtml(key) + '">' + escapeHtml(config.label) + '</label>' +
|
|
'<input type="' + inputType + '" class="tool-config-input flex-1 text-xs py-1" ' +
|
|
'data-env-key="' + escapeHtml(key) + '" value="' + escapeHtml(value) + '" placeholder="' + escapeHtml(config.placeholder || '') + '" />' +
|
|
'</div>';
|
|
}
|
|
}
|
|
|
|
html += '</div></div>';
|
|
}
|
|
|
|
html += '</div>' +
|
|
'<div class="flex gap-2 mt-3">' +
|
|
'<button class="btn-sm btn-primary flex-1" onclick="saveEnvVariables()">' +
|
|
'<i data-lucide="save" class="w-3 h-3"></i> Save & Apply' +
|
|
'</button>' +
|
|
'<button class="btn-sm btn-outline" onclick="loadEnvVariables()">' +
|
|
'<i data-lucide="refresh-cw" class="w-3 h-3"></i>' +
|
|
'</button>' +
|
|
'</div>' +
|
|
'<div class="text-xs text-muted-foreground mt-2">' +
|
|
'<i data-lucide="info" class="w-3 h-3 inline"></i> ' +
|
|
'Saved to: ' + escapeHtml(result.path) +
|
|
'</div>';
|
|
|
|
container.innerHTML = html;
|
|
if (window.lucide) lucide.createIcons();
|
|
|
|
// Add change handler for backend selects to refresh display
|
|
var backendSelects = container.querySelectorAll('select[data-env-key*="BACKEND"]');
|
|
backendSelects.forEach(function(select) {
|
|
select.addEventListener('change', function() {
|
|
// Trigger a re-render after saving
|
|
saveEnvVariables().then(function() {
|
|
loadEnvVariables();
|
|
// Refresh model lists to reflect new backend
|
|
loadModelList();
|
|
loadRerankerModelList();
|
|
});
|
|
});
|
|
});
|
|
} catch (err) {
|
|
container.innerHTML = '<div class="text-xs text-error">' + escapeHtml(err.message) + '</div>';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Apply LiteLLM provider settings to environment variables
|
|
*/
|
|
function applyLiteLLMProvider(providerId) {
|
|
if (!providerId) return;
|
|
|
|
var providers = window.litellmApiConfig?.providers || [];
|
|
var provider = providers.find(function(p) {
|
|
return (p.id || p.name) === providerId;
|
|
});
|
|
|
|
if (!provider) {
|
|
console.warn('[CodexLens] Provider not found:', providerId);
|
|
return;
|
|
}
|
|
|
|
// Auto-fill fields
|
|
var apiKeyInput = document.querySelector('[data-env-key="LITELLM_API_KEY"]');
|
|
var apiBaseInput = document.querySelector('[data-env-key="LITELLM_API_BASE"]');
|
|
var embeddingModelInput = document.querySelector('[data-env-key="LITELLM_EMBEDDING_MODEL"]');
|
|
var rerankerModelInput = document.querySelector('[data-env-key="LITELLM_RERANKER_MODEL"]');
|
|
|
|
if (apiKeyInput && provider.api_key) {
|
|
apiKeyInput.value = provider.api_key;
|
|
}
|
|
|
|
if (apiBaseInput && provider.api_base) {
|
|
apiBaseInput.value = provider.api_base;
|
|
}
|
|
|
|
// Set default models based on provider type
|
|
var providerName = (provider.name || provider.id || '').toLowerCase();
|
|
if (embeddingModelInput) {
|
|
if (providerName.includes('openai')) {
|
|
embeddingModelInput.value = embeddingModelInput.value || 'text-embedding-3-small';
|
|
} else if (providerName.includes('cohere')) {
|
|
embeddingModelInput.value = embeddingModelInput.value || 'embed-english-v3.0';
|
|
} else if (providerName.includes('voyage')) {
|
|
embeddingModelInput.value = embeddingModelInput.value || 'voyage-2';
|
|
} else if (provider.embedding_model) {
|
|
embeddingModelInput.value = provider.embedding_model;
|
|
}
|
|
}
|
|
|
|
if (rerankerModelInput) {
|
|
if (providerName.includes('cohere')) {
|
|
rerankerModelInput.value = rerankerModelInput.value || 'rerank-english-v3.0';
|
|
} else if (providerName.includes('voyage')) {
|
|
rerankerModelInput.value = rerankerModelInput.value || 'rerank-1';
|
|
} else if (provider.reranker_model) {
|
|
rerankerModelInput.value = provider.reranker_model;
|
|
}
|
|
}
|
|
|
|
showRefreshToast('Applied settings from: ' + (provider.name || providerId), 'success');
|
|
}
|
|
|
|
// Make function globally accessible
|
|
window.applyLiteLLMProvider = applyLiteLLMProvider;
|
|
|
|
/**
|
|
* Save environment variables to ~/.codexlens/.env
|
|
*/
|
|
async function saveEnvVariables() {
|
|
var inputs = document.querySelectorAll('[data-env-key]');
|
|
var env = {};
|
|
|
|
inputs.forEach(function(input) {
|
|
var key = input.dataset.envKey;
|
|
var value = input.value.trim();
|
|
if (value) {
|
|
env[key] = value;
|
|
}
|
|
});
|
|
|
|
try {
|
|
var response = await fetch('/api/codexlens/env', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ env: env })
|
|
});
|
|
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
showRefreshToast('Environment configuration saved', 'success');
|
|
} else {
|
|
showRefreshToast('Failed to save: ' + result.error, 'error');
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast('Error: ' + err.message, 'error');
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// SEMANTIC DEPENDENCIES MANAGEMENT
|
|
// ============================================================
|
|
|
|
// Store detected GPU info
|
|
var detectedGpuInfo = null;
|
|
// Store available GPU devices
|
|
var availableGpuDevices = null;
|
|
|
|
/**
|
|
* Detect GPU support
|
|
*/
|
|
async function detectGpuSupport() {
|
|
try {
|
|
var response = await fetch('/api/codexlens/gpu/detect');
|
|
var result = await response.json();
|
|
if (result.success) {
|
|
detectedGpuInfo = result;
|
|
return result;
|
|
}
|
|
} catch (err) {
|
|
console.error('GPU detection failed:', err);
|
|
}
|
|
return { mode: 'cpu', available: ['cpu'], info: 'CPU only' };
|
|
}
|
|
|
|
/**
|
|
* Load semantic dependencies status
|
|
*/
|
|
async function loadSemanticDepsStatus() {
|
|
var container = document.getElementById('semanticDepsStatus');
|
|
if (!container) return;
|
|
|
|
try {
|
|
// Detect GPU support and load GPU devices in parallel
|
|
var gpuPromise = detectGpuSupport();
|
|
var gpuDevicesPromise = loadGpuDevices();
|
|
var response = await fetch('/api/codexlens/semantic/status');
|
|
var result = await response.json();
|
|
var gpuInfo = await gpuPromise;
|
|
var gpuDevices = await gpuDevicesPromise;
|
|
|
|
if (result.available) {
|
|
// Build accelerator badge
|
|
var accelerator = result.accelerator || 'CPU';
|
|
var acceleratorIcon = 'cpu';
|
|
var acceleratorClass = 'bg-muted text-muted-foreground';
|
|
|
|
if (accelerator === 'CUDA') {
|
|
acceleratorIcon = 'zap';
|
|
acceleratorClass = 'bg-green-500/20 text-green-600';
|
|
} else if (accelerator === 'DirectML') {
|
|
acceleratorIcon = 'cpu';
|
|
acceleratorClass = 'bg-blue-500/20 text-blue-600';
|
|
} else if (accelerator === 'ROCm') {
|
|
acceleratorIcon = 'flame';
|
|
acceleratorClass = 'bg-red-500/20 text-red-600';
|
|
}
|
|
|
|
// Build GPU device selector if multiple GPUs available
|
|
var gpuDeviceSelector = buildGpuDeviceSelector(gpuDevices);
|
|
|
|
container.innerHTML =
|
|
'<div class="space-y-2">' +
|
|
'<div class="flex items-center gap-2 text-sm">' +
|
|
'<i data-lucide="check-circle" class="w-4 h-4 text-success"></i>' +
|
|
'<span>' + t('codexlens.semanticInstalled') + '</span>' +
|
|
'<span class="text-muted-foreground">(' + (result.backend || 'fastembed') + ')</span>' +
|
|
'</div>' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ' + acceleratorClass + '">' +
|
|
'<i data-lucide="' + acceleratorIcon + '" class="w-3 h-3"></i>' +
|
|
accelerator +
|
|
'</span>' +
|
|
(result.providers && result.providers.length > 0
|
|
? '<span class="text-xs text-muted-foreground">' + result.providers.join(', ') + '</span>'
|
|
: '') +
|
|
'</div>' +
|
|
gpuDeviceSelector +
|
|
'</div>';
|
|
} else {
|
|
// Build GPU mode options
|
|
var gpuOptions = buildGpuModeSelector(gpuInfo);
|
|
|
|
container.innerHTML =
|
|
'<div class="space-y-3">' +
|
|
'<div class="flex items-center gap-2 text-sm text-muted-foreground">' +
|
|
'<i data-lucide="alert-circle" class="w-4 h-4"></i>' +
|
|
'<span>' + t('codexlens.semanticNotInstalled') + '</span>' +
|
|
'</div>' +
|
|
gpuOptions +
|
|
'<button class="btn-sm btn-primary w-full" onclick="installSemanticDepsWithGpu()">' +
|
|
'<i data-lucide="download" class="w-3 h-3"></i> ' + t('codexlens.installDeps') +
|
|
'</button>' +
|
|
'</div>';
|
|
}
|
|
if (window.lucide) lucide.createIcons();
|
|
} catch (err) {
|
|
container.innerHTML =
|
|
'<div class="text-sm text-error">' + t('common.error') + ': ' + escapeHtml(err.message) + '</div>';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Build GPU mode selector HTML
|
|
*/
|
|
function buildGpuModeSelector(gpuInfo) {
|
|
// Check if DirectML is unavailable due to Python environment
|
|
var directmlUnavailableReason = null;
|
|
if (!gpuInfo.available.includes('directml') && gpuInfo.pythonEnv && gpuInfo.pythonEnv.error) {
|
|
directmlUnavailableReason = gpuInfo.pythonEnv.error;
|
|
}
|
|
|
|
var modes = [
|
|
{
|
|
id: 'cpu',
|
|
label: 'CPU',
|
|
desc: t('codexlens.cpuModeDesc') || 'Standard CPU processing',
|
|
icon: 'cpu',
|
|
available: true
|
|
},
|
|
{
|
|
id: 'directml',
|
|
label: 'DirectML',
|
|
desc: directmlUnavailableReason
|
|
? directmlUnavailableReason
|
|
: (t('codexlens.directmlModeDesc') || 'Windows GPU (NVIDIA/AMD/Intel)'),
|
|
icon: 'cpu',
|
|
available: gpuInfo.available.includes('directml'),
|
|
recommended: gpuInfo.mode === 'directml',
|
|
warning: directmlUnavailableReason
|
|
},
|
|
{
|
|
id: 'cuda',
|
|
label: 'CUDA',
|
|
desc: t('codexlens.cudaModeDesc') || 'NVIDIA GPU (requires CUDA Toolkit)',
|
|
icon: 'zap',
|
|
available: gpuInfo.available.includes('cuda'),
|
|
recommended: gpuInfo.mode === 'cuda'
|
|
}
|
|
];
|
|
|
|
var html =
|
|
'<div class="space-y-2">' +
|
|
'<div class="text-xs font-medium text-muted-foreground flex items-center gap-1">' +
|
|
'<i data-lucide="settings" class="w-3 h-3"></i>' +
|
|
(t('codexlens.selectGpuMode') || 'Select acceleration mode') +
|
|
'</div>' +
|
|
'<div class="text-xs text-muted-foreground bg-muted/50 rounded px-2 py-1">' +
|
|
'<i data-lucide="info" class="w-3 h-3 inline"></i> ' + gpuInfo.info +
|
|
'</div>' +
|
|
'<div class="space-y-1">';
|
|
|
|
modes.forEach(function(mode) {
|
|
var isDisabled = !mode.available;
|
|
var isRecommended = mode.recommended;
|
|
var isDefault = mode.id === gpuInfo.mode;
|
|
var hasWarning = mode.warning;
|
|
|
|
html +=
|
|
'<label class="flex items-center gap-3 p-2 rounded border cursor-pointer hover:bg-muted/50 transition-colors ' +
|
|
(isDisabled ? 'opacity-50 cursor-not-allowed' : '') + '">' +
|
|
'<input type="radio" name="gpuMode" value="' + mode.id + '" ' +
|
|
(isDefault ? 'checked' : '') +
|
|
(isDisabled ? ' disabled' : '') +
|
|
' class="accent-primary">' +
|
|
'<div class="flex-1">' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<i data-lucide="' + mode.icon + '" class="w-4 h-4"></i>' +
|
|
'<span class="font-medium text-sm">' + mode.label + '</span>' +
|
|
(isRecommended ? '<span class="text-xs bg-primary/20 text-primary px-1.5 py-0.5 rounded">' + (t('common.recommended') || 'Recommended') + '</span>' : '') +
|
|
(isDisabled ? '<span class="text-xs text-muted-foreground">(' + (t('common.unavailable') || 'Unavailable') + ')</span>' : '') +
|
|
'</div>' +
|
|
'<div class="text-xs ' + (hasWarning ? 'text-warning' : 'text-muted-foreground') + '">' + mode.desc + '</div>' +
|
|
'</div>' +
|
|
'</label>';
|
|
});
|
|
|
|
html +=
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
return html;
|
|
}
|
|
|
|
/**
|
|
* Get selected GPU mode
|
|
*/
|
|
function getSelectedGpuMode() {
|
|
var selected = document.querySelector('input[name="gpuMode"]:checked');
|
|
return selected ? selected.value : 'cpu';
|
|
}
|
|
|
|
/**
|
|
* Load available GPU devices
|
|
*/
|
|
async function loadGpuDevices() {
|
|
try {
|
|
var response = await fetch('/api/codexlens/gpu/list');
|
|
var result = await response.json();
|
|
if (result.success && result.result) {
|
|
availableGpuDevices = result.result;
|
|
return result.result;
|
|
}
|
|
} catch (err) {
|
|
console.error('GPU devices load failed:', err);
|
|
}
|
|
return { devices: [], selected_device_id: null };
|
|
}
|
|
|
|
/**
|
|
* Build GPU device selector HTML
|
|
*/
|
|
function buildGpuDeviceSelector(gpuDevices) {
|
|
if (!gpuDevices || !gpuDevices.devices || gpuDevices.devices.length === 0) {
|
|
return '';
|
|
}
|
|
|
|
// Only show selector if there are multiple GPUs
|
|
if (gpuDevices.devices.length < 2) {
|
|
return '';
|
|
}
|
|
|
|
var html =
|
|
'<div class="mt-3 p-3 bg-muted/30 rounded-lg border border-border">' +
|
|
'<div class="text-xs font-medium text-muted-foreground flex items-center gap-1 mb-2">' +
|
|
'<i data-lucide="cpu" class="w-3 h-3"></i>' +
|
|
(t('codexlens.selectGpuDevice') || 'Select GPU Device') +
|
|
'</div>' +
|
|
'<div class="space-y-1">';
|
|
|
|
gpuDevices.devices.forEach(function(device) {
|
|
var isSelected = device.is_selected;
|
|
var vendorIcon = device.vendor === 'nvidia' ? 'zap' : (device.vendor === 'amd' ? 'flame' : 'cpu');
|
|
var vendorColor = device.vendor === 'nvidia' ? 'text-green-500' : (device.vendor === 'amd' ? 'text-red-500' : 'text-blue-500');
|
|
var typeLabel = device.is_discrete ? (t('codexlens.discrete') || 'Discrete') : (t('codexlens.integrated') || 'Integrated');
|
|
|
|
html +=
|
|
'<label class="flex items-center gap-3 p-2 rounded border cursor-pointer hover:bg-muted/50 transition-colors ' +
|
|
(isSelected ? 'border-primary bg-primary/5' : 'border-transparent') + '">' +
|
|
'<input type="radio" name="gpuDevice" value="' + device.device_id + '" ' +
|
|
(isSelected ? 'checked' : '') +
|
|
' class="accent-primary" onchange="selectGpuDevice(' + device.device_id + ')">' +
|
|
'<div class="flex-1">' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<i data-lucide="' + vendorIcon + '" class="w-4 h-4 ' + vendorColor + '"></i>' +
|
|
'<span class="font-medium text-sm">' + device.name + '</span>' +
|
|
'</div>' +
|
|
'<div class="flex items-center gap-2 mt-0.5">' +
|
|
'<span class="text-xs text-muted-foreground">' + device.vendor.toUpperCase() + '</span>' +
|
|
'<span class="text-xs px-1.5 py-0.5 rounded ' +
|
|
(device.is_discrete ? 'bg-green-500/20 text-green-600' : 'bg-muted text-muted-foreground') + '">' +
|
|
typeLabel +
|
|
'</span>' +
|
|
(device.is_preferred ? '<span class="text-xs bg-primary/20 text-primary px-1.5 py-0.5 rounded">' + (t('common.auto') || 'Auto') + '</span>' : '') +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</label>';
|
|
});
|
|
|
|
html +=
|
|
'</div>' +
|
|
'<button class="btn-xs text-muted-foreground hover:text-foreground mt-2" onclick="resetGpuDevice()">' +
|
|
'<i data-lucide="rotate-ccw" class="w-3 h-3"></i> ' + (t('codexlens.resetToAuto') || 'Reset to Auto') +
|
|
'</button>' +
|
|
'</div>';
|
|
|
|
return html;
|
|
}
|
|
|
|
/**
|
|
* Select a GPU device
|
|
*/
|
|
async function selectGpuDevice(deviceId) {
|
|
try {
|
|
showRefreshToast(t('codexlens.selectingGpu') || 'Selecting GPU...', 'info');
|
|
|
|
var response = await fetch('/api/codexlens/gpu/select', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ device_id: deviceId })
|
|
});
|
|
|
|
var result = await response.json();
|
|
if (result.success) {
|
|
showRefreshToast(t('codexlens.gpuSelected') || 'GPU selected', 'success');
|
|
// Reload semantic status to reflect change
|
|
loadSemanticDepsStatus();
|
|
} else {
|
|
showRefreshToast(result.error || 'Failed to select GPU', 'error');
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast(err.message, 'error');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Reset GPU device selection to auto
|
|
*/
|
|
async function resetGpuDevice() {
|
|
try {
|
|
showRefreshToast(t('codexlens.resettingGpu') || 'Resetting GPU selection...', 'info');
|
|
|
|
var response = await fetch('/api/codexlens/gpu/reset', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' }
|
|
});
|
|
|
|
var result = await response.json();
|
|
if (result.success) {
|
|
showRefreshToast(t('codexlens.gpuReset') || 'GPU selection reset to auto', 'success');
|
|
// Reload semantic status to reflect change
|
|
loadSemanticDepsStatus();
|
|
} else {
|
|
showRefreshToast(result.error || 'Failed to reset GPU', 'error');
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast(err.message, 'error');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Install semantic dependencies with GPU mode
|
|
*/
|
|
async function installSemanticDepsWithGpu() {
|
|
var container = document.getElementById('semanticDepsStatus');
|
|
if (!container) return;
|
|
|
|
var gpuMode = getSelectedGpuMode();
|
|
var modeLabels = {
|
|
cpu: 'CPU',
|
|
cuda: 'NVIDIA CUDA',
|
|
directml: 'DirectML'
|
|
};
|
|
|
|
container.innerHTML =
|
|
'<div class="space-y-2">' +
|
|
'<div class="flex items-center gap-2 text-sm text-muted-foreground">' +
|
|
'<div class="animate-spin w-4 h-4 border-2 border-primary border-t-transparent rounded-full"></div>' +
|
|
'<span>' + t('codexlens.installingDeps') + '</span>' +
|
|
'</div>' +
|
|
'<div class="text-xs text-muted-foreground">' +
|
|
(t('codexlens.installingMode') || 'Installing with') + ': ' + modeLabels[gpuMode] +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
try {
|
|
var response = await fetch('/api/codexlens/semantic/install', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ gpuMode: gpuMode })
|
|
});
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
showRefreshToast(t('codexlens.depsInstalled') + ' (' + modeLabels[gpuMode] + ')', 'success');
|
|
await loadSemanticDepsStatus();
|
|
await loadModelList();
|
|
} else {
|
|
showRefreshToast(t('codexlens.depsInstallFailed') + ': ' + result.error, 'error');
|
|
await loadSemanticDepsStatus();
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast(t('common.error') + ': ' + err.message, 'error');
|
|
await loadSemanticDepsStatus();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Install semantic dependencies (legacy, defaults to CPU)
|
|
*/
|
|
async function installSemanticDeps() {
|
|
await installSemanticDepsWithGpu();
|
|
}
|
|
|
|
// ============================================================
|
|
// SPLADE MANAGEMENT - Hidden (not currently used)
|
|
// ============================================================
|
|
// SPLADE functionality is hidden from the UI. The code is preserved
|
|
// for potential future use but is not exposed to users.
|
|
|
|
/*
|
|
async function loadSpladeStatus() {
|
|
var container = document.getElementById('spladeStatus');
|
|
if (!container) return;
|
|
|
|
try {
|
|
var response = await fetch('/api/codexlens/splade/status');
|
|
var status = await response.json();
|
|
|
|
if (status.available) {
|
|
container.innerHTML =
|
|
'<div class="flex items-center justify-between p-3 border border-success/30 rounded-lg bg-success/5">' +
|
|
'<div class="flex items-center gap-3">' +
|
|
'<i data-lucide="check-circle" class="w-5 h-5 text-success"></i>' +
|
|
'<div>' +
|
|
'<span class="font-medium">' + t('codexlens.spladeInstalled') + '</span>' +
|
|
'<div class="text-xs text-muted-foreground">' + status.model + '</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
} else {
|
|
container.innerHTML =
|
|
'<div class="flex items-center justify-between p-3 border border-border rounded-lg">' +
|
|
'<div class="flex items-center gap-3">' +
|
|
'<i data-lucide="alert-circle" class="w-5 h-5 text-muted-foreground"></i>' +
|
|
'<div>' +
|
|
'<span class="font-medium">' + t('codexlens.spladeNotInstalled') + '</span>' +
|
|
'<div class="text-xs text-muted-foreground">' + (status.error || t('codexlens.spladeInstallHint')) + '</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="flex gap-2">' +
|
|
'<button class="btn-sm btn-outline" onclick="installSplade(false)">' +
|
|
'<i data-lucide="download" class="w-3.5 h-3.5 mr-1"></i>CPU' +
|
|
'</button>' +
|
|
'<button class="btn-sm btn-primary" onclick="installSplade(true)">' +
|
|
'<i data-lucide="zap" class="w-3.5 h-3.5 mr-1"></i>GPU' +
|
|
'</button>' +
|
|
'</div>' +
|
|
'</div>';
|
|
}
|
|
|
|
if (window.lucide) lucide.createIcons();
|
|
} catch (err) {
|
|
container.innerHTML = '<div class="text-sm text-error">' + escapeHtml(err.message) + '</div>';
|
|
}
|
|
}
|
|
|
|
async function installSplade(gpu) {
|
|
var container = document.getElementById('spladeStatus');
|
|
if (!container) return;
|
|
|
|
container.innerHTML =
|
|
'<div class="flex items-center gap-3 p-3 border border-primary/30 rounded-lg">' +
|
|
'<div class="animate-spin"><i data-lucide="loader-2" class="w-5 h-5 text-primary"></i></div>' +
|
|
'<span>' + t('codexlens.installingSpladePackage') + (gpu ? ' (GPU)' : ' (CPU)') + '...</span>' +
|
|
'</div>';
|
|
if (window.lucide) lucide.createIcons();
|
|
|
|
try {
|
|
var response = await fetch('/api/codexlens/splade/install', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ gpu: gpu })
|
|
});
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
showRefreshToast(t('codexlens.spladeInstallSuccess'), 'success');
|
|
loadSpladeStatus();
|
|
} else {
|
|
showRefreshToast(t('codexlens.spladeInstallFailed') + ': ' + result.error, 'error');
|
|
loadSpladeStatus();
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast(t('common.error') + ': ' + err.message, 'error');
|
|
loadSpladeStatus();
|
|
}
|
|
}
|
|
*/
|
|
|
|
|
|
// ============================================================
|
|
// MODEL MANAGEMENT
|
|
// ============================================================
|
|
|
|
/**
|
|
* Copy text to clipboard
|
|
*/
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard.writeText(text).then(function() {
|
|
showRefreshToast(t('common.copied') || 'Copied to clipboard', 'success');
|
|
}).catch(function(err) {
|
|
console.error('Failed to copy:', err);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Load model list (simplified version)
|
|
*/
|
|
async function loadModelList() {
|
|
var container = document.getElementById('modelListContainer');
|
|
if (!container) return;
|
|
|
|
try {
|
|
// Get config for backend info
|
|
var configResponse = await fetch('/api/codexlens/config');
|
|
var config = await configResponse.json();
|
|
var embeddingBackend = config.embedding_backend || 'fastembed';
|
|
|
|
var response = await fetch('/api/codexlens/models');
|
|
var result = await response.json();
|
|
|
|
var html = '<div class="space-y-2">';
|
|
|
|
// Show current backend status
|
|
var backendLabel = embeddingBackend === 'litellm' ? 'API (LiteLLM)' : 'Local (FastEmbed)';
|
|
var backendIcon = embeddingBackend === 'litellm' ? 'cloud' : 'hard-drive';
|
|
html +=
|
|
'<div class="flex items-center justify-between p-2 bg-primary/5 rounded border border-primary/20 mb-3">' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<i data-lucide="' + backendIcon + '" class="w-3.5 h-3.5 text-primary"></i>' +
|
|
'<span class="text-xs font-medium">' + backendLabel + '</span>' +
|
|
'</div>' +
|
|
'<span class="text-xs text-muted-foreground">via Environment Variables</span>' +
|
|
'</div>';
|
|
|
|
if (!result.success) {
|
|
var errorMsg = result.error || '';
|
|
if (errorMsg.includes('fastembed not installed') || errorMsg.includes('Semantic')) {
|
|
html += '<div class="text-sm text-muted-foreground">' + t('codexlens.semanticNotInstalled') + '</div>';
|
|
} else {
|
|
html += '<div class="text-sm text-error">' + escapeHtml(errorMsg || t('common.unknownError')) + '</div>';
|
|
}
|
|
html += '</div>';
|
|
container.innerHTML = html;
|
|
if (window.lucide) lucide.createIcons();
|
|
return;
|
|
}
|
|
|
|
if (!result.result || !result.result.models) {
|
|
html += '<div class="text-sm text-muted-foreground">' + t('codexlens.noModelsAvailable') + '</div>';
|
|
html += '</div>';
|
|
container.innerHTML = html;
|
|
if (window.lucide) lucide.createIcons();
|
|
return;
|
|
}
|
|
|
|
// Show models for local backend
|
|
if (embeddingBackend !== 'litellm') {
|
|
var models = result.result.models;
|
|
models.forEach(function(model) {
|
|
var statusIcon = model.installed
|
|
? '<i data-lucide="check-circle" class="w-3.5 h-3.5 text-success"></i>'
|
|
: '<i data-lucide="circle" class="w-3.5 h-3.5 text-muted"></i>';
|
|
|
|
var sizeText = model.installed
|
|
? model.actual_size_mb.toFixed(0) + ' MB'
|
|
: '~' + model.estimated_size_mb + ' MB';
|
|
|
|
var actionBtn = model.installed
|
|
? '<button class="text-xs text-destructive hover:underline" onclick="deleteModel(\'' + model.profile + '\')">Delete</button>'
|
|
: '<button class="text-xs text-primary hover:underline" onclick="downloadModel(\'' + model.profile + '\')">Download</button>';
|
|
|
|
html +=
|
|
'<div class="flex items-center justify-between p-2 bg-muted/30 rounded" id="model-' + model.profile + '">' +
|
|
'<div class="flex items-center gap-2">' +
|
|
statusIcon +
|
|
'<span class="text-sm font-medium">' + model.profile + '</span>' +
|
|
'<span class="text-xs text-muted-foreground">' + model.dimensions + 'd</span>' +
|
|
'</div>' +
|
|
'<div class="flex items-center gap-3">' +
|
|
'<span class="text-xs text-muted-foreground">' + sizeText + '</span>' +
|
|
actionBtn +
|
|
'</div>' +
|
|
'</div>';
|
|
});
|
|
} else {
|
|
// LiteLLM backend - show API info
|
|
html +=
|
|
'<div class="p-3 bg-muted/30 rounded text-center">' +
|
|
'<i data-lucide="cloud" class="w-6 h-6 text-primary mx-auto mb-2"></i>' +
|
|
'<div class="text-sm">Using API embeddings</div>' +
|
|
'<div class="text-xs text-muted-foreground mt-1">Model configured via CODEXLENS_EMBEDDING_MODEL</div>' +
|
|
'</div>';
|
|
}
|
|
|
|
html += '</div>';
|
|
container.innerHTML = html;
|
|
if (window.lucide) lucide.createIcons();
|
|
} catch (err) {
|
|
container.innerHTML =
|
|
'<div class="text-sm text-error">' + escapeHtml(err.message) + '</div>';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Download model (simplified version)
|
|
*/
|
|
async function downloadModel(profile) {
|
|
var modelCard = document.getElementById('model-' + profile);
|
|
if (!modelCard) return;
|
|
|
|
var originalHTML = modelCard.innerHTML;
|
|
|
|
// Show loading state
|
|
modelCard.innerHTML =
|
|
'<div class="flex items-center justify-between p-2 bg-muted/30 rounded">' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<div class="animate-spin w-3.5 h-3.5 border-2 border-primary border-t-transparent rounded-full"></div>' +
|
|
'<span class="text-sm">Downloading ' + profile + '...</span>' +
|
|
'</div>' +
|
|
'<button class="text-xs text-muted-foreground hover:underline" onclick="loadModelList()">Cancel</button>' +
|
|
'</div>';
|
|
|
|
try {
|
|
var response = await fetch('/api/codexlens/models/download', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ profile: profile })
|
|
});
|
|
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
showRefreshToast('Model downloaded: ' + profile, 'success');
|
|
loadModelList();
|
|
} else {
|
|
showRefreshToast('Download failed: ' + result.error, 'error');
|
|
modelCard.innerHTML = originalHTML;
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast('Error: ' + err.message, 'error');
|
|
modelCard.innerHTML = originalHTML;
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Delete model (simplified)
|
|
*/
|
|
async function deleteModel(profile) {
|
|
if (!confirm('Delete model ' + profile + '?')) {
|
|
return;
|
|
}
|
|
|
|
var modelCard = document.getElementById('model-' + profile);
|
|
if (!modelCard) return;
|
|
|
|
var originalHTML = modelCard.innerHTML;
|
|
modelCard.innerHTML =
|
|
'<div class="flex items-center justify-between p-2 bg-muted/30 rounded">' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<div class="animate-spin w-3.5 h-3.5 border-2 border-destructive border-t-transparent rounded-full"></div>' +
|
|
'<span class="text-sm">Deleting...</span>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
try {
|
|
var response = await fetch('/api/codexlens/models/delete', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ profile: profile })
|
|
});
|
|
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
showRefreshToast('Model deleted: ' + profile, 'success');
|
|
loadModelList();
|
|
} else {
|
|
showRefreshToast('Delete failed: ' + result.error, 'error');
|
|
modelCard.innerHTML = originalHTML;
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast('Error: ' + err.message, 'error');
|
|
modelCard.innerHTML = originalHTML;
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// RERANKER MODEL MANAGEMENT
|
|
// ============================================================
|
|
|
|
// Available reranker models (fastembed TextCrossEncoder)
|
|
var RERANKER_MODELS = [
|
|
{ id: 'ms-marco-mini', name: 'Xenova/ms-marco-MiniLM-L-6-v2', size: 80, desc: 'Fast, lightweight' },
|
|
{ id: 'ms-marco-12', name: 'Xenova/ms-marco-MiniLM-L-12-v2', size: 120, desc: 'Better accuracy' },
|
|
{ id: 'bge-base', name: 'BAAI/bge-reranker-base', size: 1040, desc: 'High quality' },
|
|
{ id: 'jina-tiny', name: 'jinaai/jina-reranker-v1-tiny-en', size: 130, desc: 'Tiny, fast' },
|
|
{ id: 'jina-turbo', name: 'jinaai/jina-reranker-v1-turbo-en', size: 150, desc: 'Balanced' }
|
|
];
|
|
|
|
/**
|
|
* Load reranker model list
|
|
*/
|
|
async function loadRerankerModelList() {
|
|
var container = document.getElementById('rerankerModelListContainer');
|
|
if (!container) return;
|
|
|
|
try {
|
|
// Get current reranker config
|
|
var response = await fetch('/api/codexlens/reranker/config');
|
|
var config = await response.json();
|
|
var currentModel = config.model_name || 'Xenova/ms-marco-MiniLM-L-6-v2';
|
|
var currentBackend = config.backend || 'fastembed';
|
|
|
|
var html = '<div class="space-y-2">';
|
|
|
|
// Show current backend status
|
|
var backendLabel = currentBackend === 'litellm' ? 'API (LiteLLM)' : 'Local (FastEmbed)';
|
|
var backendIcon = currentBackend === 'litellm' ? 'cloud' : 'hard-drive';
|
|
html +=
|
|
'<div class="flex items-center justify-between p-2 bg-primary/5 rounded border border-primary/20 mb-3">' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<i data-lucide="' + backendIcon + '" class="w-3.5 h-3.5 text-primary"></i>' +
|
|
'<span class="text-xs font-medium">' + backendLabel + '</span>' +
|
|
'</div>' +
|
|
'<span class="text-xs text-muted-foreground">via Environment Variables</span>' +
|
|
'</div>';
|
|
|
|
// Show models for local backend only
|
|
if (currentBackend === 'fastembed' || currentBackend === 'onnx') {
|
|
RERANKER_MODELS.forEach(function(model) {
|
|
var isActive = currentModel === model.name;
|
|
var statusIcon = isActive
|
|
? '<i data-lucide="check-circle" class="w-3.5 h-3.5 text-success"></i>'
|
|
: '<i data-lucide="circle" class="w-3.5 h-3.5 text-muted"></i>';
|
|
|
|
var actionBtn = isActive
|
|
? '<span class="text-xs text-success">Active</span>'
|
|
: '<button class="text-xs text-primary hover:underline" onclick="selectRerankerModel(\'' + model.name + '\')">Select</button>';
|
|
|
|
html +=
|
|
'<div class="flex items-center justify-between p-2 bg-muted/30 rounded" id="reranker-' + model.id + '">' +
|
|
'<div class="flex items-center gap-2">' +
|
|
statusIcon +
|
|
'<span class="text-sm font-medium">' + model.id + '</span>' +
|
|
'<span class="text-xs text-muted-foreground">' + model.desc + '</span>' +
|
|
'</div>' +
|
|
'<div class="flex items-center gap-3">' +
|
|
'<span class="text-xs text-muted-foreground">~' + model.size + ' MB</span>' +
|
|
actionBtn +
|
|
'</div>' +
|
|
'</div>';
|
|
});
|
|
} else {
|
|
// LiteLLM backend - show API info
|
|
html +=
|
|
'<div class="p-3 bg-muted/30 rounded text-center">' +
|
|
'<i data-lucide="cloud" class="w-6 h-6 text-primary mx-auto mb-2"></i>' +
|
|
'<div class="text-sm">Using API reranker</div>' +
|
|
'<div class="text-xs text-muted-foreground mt-1">Model configured via CODEXLENS_RERANKER_MODEL</div>' +
|
|
'</div>';
|
|
}
|
|
|
|
html += '</div>';
|
|
container.innerHTML = html;
|
|
if (window.lucide) lucide.createIcons();
|
|
} catch (err) {
|
|
container.innerHTML =
|
|
'<div class="text-sm text-error">' + escapeHtml(err.message) + '</div>';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Update reranker backend
|
|
*/
|
|
async function updateRerankerBackend(backend) {
|
|
try {
|
|
var response = await fetch('/api/codexlens/reranker/config', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ backend: backend })
|
|
});
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
showRefreshToast('Reranker backend updated: ' + backend, 'success');
|
|
loadRerankerModelList();
|
|
} else {
|
|
showRefreshToast('Failed to update: ' + (result.error || 'Unknown error'), 'error');
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast('Error: ' + err.message, 'error');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Select reranker model
|
|
*/
|
|
async function selectRerankerModel(modelName) {
|
|
try {
|
|
var response = await fetch('/api/codexlens/reranker/config', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ model_name: modelName })
|
|
});
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
showRefreshToast('Reranker model selected: ' + modelName.split('/').pop(), 'success');
|
|
loadRerankerModelList();
|
|
} else {
|
|
showRefreshToast('Failed to select: ' + (result.error || 'Unknown error'), 'error');
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast('Error: ' + err.message, 'error');
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// MODEL TAB & MODE MANAGEMENT
|
|
// ============================================================
|
|
|
|
/**
|
|
* Switch between Embedding and Reranker tabs
|
|
*/
|
|
function switchModelTab(tabName) {
|
|
console.log('[CodexLens] Switching to tab:', tabName);
|
|
|
|
// Update tab buttons using direct style manipulation for reliability
|
|
var tabs = document.querySelectorAll('.model-tab');
|
|
tabs.forEach(function(tab) {
|
|
var isActive = tab.getAttribute('data-tab') === tabName;
|
|
if (isActive) {
|
|
tab.className = 'model-tab flex-1 px-4 py-2.5 text-sm font-medium border-b-2 border-primary text-primary';
|
|
tab.style.backgroundColor = 'rgba(var(--primary), 0.05)';
|
|
} else {
|
|
tab.className = 'model-tab flex-1 px-4 py-2.5 text-sm font-medium border-b-2 border-transparent text-muted-foreground';
|
|
tab.style.backgroundColor = '';
|
|
}
|
|
});
|
|
|
|
// Update tab content
|
|
var embeddingContent = document.getElementById('embeddingTabContent');
|
|
var rerankerContent = document.getElementById('rerankerTabContent');
|
|
|
|
if (embeddingContent && rerankerContent) {
|
|
if (tabName === 'embedding') {
|
|
embeddingContent.style.display = 'block';
|
|
rerankerContent.style.display = 'none';
|
|
} else {
|
|
embeddingContent.style.display = 'none';
|
|
rerankerContent.style.display = 'block';
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Update model mode (Local vs API)
|
|
*/
|
|
function updateModelMode(mode) {
|
|
var gpuContainer = document.getElementById('gpuSelectContainer');
|
|
var modeSelect = document.getElementById('modelModeSelect');
|
|
|
|
// Show/hide GPU selector based on mode
|
|
if (gpuContainer) {
|
|
if (mode === 'local') {
|
|
gpuContainer.classList.remove('hidden');
|
|
loadGpuDevicesForModeSelector();
|
|
} else {
|
|
gpuContainer.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// Store mode preference (will be saved when locked)
|
|
if (modeSelect) {
|
|
modeSelect.setAttribute('data-current-mode', mode);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Load GPU devices for mode selector
|
|
*/
|
|
async function loadGpuDevicesForModeSelector() {
|
|
var gpuSelect = document.getElementById('gpuDeviceSelect');
|
|
if (!gpuSelect) return;
|
|
|
|
try {
|
|
var response = await fetch('/api/codexlens/gpu/devices');
|
|
var result = await response.json();
|
|
|
|
var html = '<option value="auto">Auto</option>';
|
|
if (result.devices && result.devices.length > 0) {
|
|
result.devices.forEach(function(device, index) {
|
|
html += '<option value="' + index + '">' + escapeHtml(device.name) + '</option>';
|
|
});
|
|
}
|
|
gpuSelect.innerHTML = html;
|
|
} catch (err) {
|
|
console.error('Failed to load GPU devices:', err);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Toggle model mode lock (save configuration)
|
|
*/
|
|
async function toggleModelModeLock() {
|
|
var lockBtn = document.getElementById('modelModeLockBtn');
|
|
var modeSelect = document.getElementById('modelModeSelect');
|
|
var gpuSelect = document.getElementById('gpuDeviceSelect');
|
|
|
|
if (!lockBtn || !modeSelect) return;
|
|
|
|
var isLocked = lockBtn.getAttribute('data-locked') === 'true';
|
|
|
|
if (isLocked) {
|
|
// Unlock - enable editing
|
|
lockBtn.setAttribute('data-locked', 'false');
|
|
lockBtn.innerHTML = '<i data-lucide="unlock" class="w-3.5 h-3.5"></i><span class="text-xs">Lock</span>';
|
|
lockBtn.classList.remove('btn-primary');
|
|
lockBtn.classList.add('btn-outline');
|
|
modeSelect.disabled = false;
|
|
if (gpuSelect) gpuSelect.disabled = false;
|
|
if (window.lucide) lucide.createIcons();
|
|
} else {
|
|
// Lock - save configuration
|
|
var mode = modeSelect.value;
|
|
var gpuDevice = gpuSelect ? gpuSelect.value : 'auto';
|
|
|
|
try {
|
|
// Save embedding backend preference
|
|
var embeddingBackend = mode === 'local' ? 'fastembed' : 'litellm';
|
|
await fetch('/api/codexlens/config', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
embedding_backend: embeddingBackend,
|
|
gpu_device: gpuDevice
|
|
})
|
|
});
|
|
|
|
// Save reranker backend preference
|
|
var rerankerBackend = mode === 'local' ? 'fastembed' : 'litellm';
|
|
await fetch('/api/codexlens/reranker/config', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ backend: rerankerBackend })
|
|
});
|
|
|
|
// Update UI to locked state
|
|
lockBtn.setAttribute('data-locked', 'true');
|
|
lockBtn.innerHTML = '<i data-lucide="lock" class="w-3.5 h-3.5"></i><span class="text-xs">Locked</span>';
|
|
lockBtn.classList.remove('btn-outline');
|
|
lockBtn.classList.add('btn-primary');
|
|
modeSelect.disabled = true;
|
|
if (gpuSelect) gpuSelect.disabled = true;
|
|
if (window.lucide) lucide.createIcons();
|
|
|
|
showRefreshToast('Configuration saved: ' + (mode === 'local' ? 'Local (FastEmbed)' : 'API (LiteLLM)'), 'success');
|
|
|
|
// Refresh model lists to reflect new backend
|
|
loadModelList();
|
|
loadRerankerModelList();
|
|
} catch (err) {
|
|
showRefreshToast('Failed to save configuration: ' + err.message, 'error');
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Initialize model mode from saved config
|
|
*/
|
|
async function initModelModeFromConfig() {
|
|
var modeSelect = document.getElementById('modelModeSelect');
|
|
var gpuContainer = document.getElementById('gpuSelectContainer');
|
|
|
|
if (!modeSelect) return;
|
|
|
|
try {
|
|
var response = await fetch('/api/codexlens/config');
|
|
var config = await response.json();
|
|
|
|
var embeddingBackend = config.embedding_backend || 'fastembed';
|
|
var mode = embeddingBackend === 'litellm' ? 'api' : 'local';
|
|
|
|
modeSelect.value = mode;
|
|
modeSelect.setAttribute('data-current-mode', mode);
|
|
|
|
// Show GPU selector for local mode
|
|
if (gpuContainer) {
|
|
if (mode === 'local') {
|
|
gpuContainer.classList.remove('hidden');
|
|
loadGpuDevicesForModeSelector();
|
|
} else {
|
|
gpuContainer.classList.add('hidden');
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to load model mode config:', err);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Update compact semantic status badge in header
|
|
*/
|
|
async function updateSemanticStatusBadge() {
|
|
var badge = document.getElementById('semanticStatusBadge');
|
|
if (!badge) return;
|
|
|
|
try {
|
|
var response = await fetch('/api/codexlens/semantic/status');
|
|
var result = await response.json();
|
|
|
|
if (result.available) {
|
|
var accelerator = result.accelerator || 'CPU';
|
|
var badgeClass = 'bg-success/20 text-success';
|
|
var icon = 'check-circle';
|
|
|
|
if (accelerator === 'CUDA') {
|
|
badgeClass = 'bg-green-500/20 text-green-600';
|
|
icon = 'zap';
|
|
} else if (accelerator === 'DirectML') {
|
|
badgeClass = 'bg-blue-500/20 text-blue-600';
|
|
icon = 'cpu';
|
|
}
|
|
|
|
badge.innerHTML =
|
|
'<span class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full ' + badgeClass + '">' +
|
|
'<i data-lucide="' + icon + '" class="w-3 h-3"></i>' +
|
|
accelerator +
|
|
'</span>';
|
|
} else {
|
|
badge.innerHTML =
|
|
'<span class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-warning/20 text-warning">' +
|
|
'<i data-lucide="alert-triangle" class="w-3 h-3"></i>' +
|
|
'Not Ready' +
|
|
'</span>';
|
|
}
|
|
|
|
if (window.lucide) lucide.createIcons();
|
|
} catch (err) {
|
|
badge.innerHTML =
|
|
'<span class="text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground">Error</span>';
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// CODEXLENS ACTIONS
|
|
// ============================================================
|
|
|
|
/**
|
|
* Initialize CodexLens index with bottom floating progress bar
|
|
* @param {string} indexType - 'vector' (with embeddings), 'normal' (FTS only), or 'full' (FTS + Vector)
|
|
* @param {string} embeddingModel - Model profile: 'code', 'fast'
|
|
* @param {string} embeddingBackend - Backend: 'fastembed' (local) or 'litellm' (API)
|
|
* @param {number} maxWorkers - Max concurrent API calls for embedding generation (default: 1)
|
|
*/
|
|
async function initCodexLensIndex(indexType, embeddingModel, embeddingBackend, maxWorkers) {
|
|
indexType = indexType || 'vector';
|
|
embeddingModel = embeddingModel || 'code';
|
|
embeddingBackend = embeddingBackend || 'fastembed';
|
|
maxWorkers = maxWorkers || 1;
|
|
|
|
// For vector/full index with local backend, check if semantic dependencies are available
|
|
// LiteLLM backend uses remote embeddings and does not require fastembed/ONNX deps.
|
|
if ((indexType === 'vector' || indexType === 'full') && embeddingBackend !== 'litellm') {
|
|
try {
|
|
var semanticResponse = await fetch('/api/codexlens/semantic/status');
|
|
var semanticStatus = await semanticResponse.json();
|
|
|
|
if (!semanticStatus.available) {
|
|
// Semantic deps not installed - show confirmation dialog
|
|
var installDeps = confirm(
|
|
(t('codexlens.semanticNotInstalled') || 'Semantic search dependencies are not installed.') + '\n\n' +
|
|
(t('codexlens.installDepsPrompt') || 'Would you like to install them now? (This may take a few minutes)\n\nClick "Cancel" to create FTS index only.')
|
|
);
|
|
|
|
if (installDeps) {
|
|
// Install semantic dependencies first
|
|
showRefreshToast(t('codexlens.installingDeps') || 'Installing semantic dependencies...', 'info');
|
|
try {
|
|
var installResponse = await fetch('/api/codexlens/semantic/install', { method: 'POST' });
|
|
var installResult = await installResponse.json();
|
|
|
|
if (!installResult.success) {
|
|
showRefreshToast((t('codexlens.depsInstallFailed') || 'Failed to install dependencies') + ': ' + installResult.error, 'error');
|
|
// Fall back to FTS only
|
|
indexType = 'normal';
|
|
} else {
|
|
showRefreshToast(t('codexlens.depsInstalled') || 'Dependencies installed successfully', 'success');
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast((t('common.error') || 'Error') + ': ' + err.message, 'error');
|
|
indexType = 'normal';
|
|
}
|
|
} else {
|
|
// User chose to skip - create FTS only
|
|
indexType = 'normal';
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.warn('[CodexLens] Could not check semantic status:', err);
|
|
// Continue with requested type, backend will handle fallback
|
|
}
|
|
}
|
|
|
|
// Remove existing progress bar if any
|
|
closeCodexLensIndexModal();
|
|
|
|
// Create bottom floating progress bar
|
|
var progressBar = document.createElement('div');
|
|
progressBar.id = 'codexlensIndexFloating';
|
|
progressBar.className = 'fixed bottom-0 left-0 right-0 z-50 bg-card border-t border-border shadow-lg transform transition-transform duration-300';
|
|
|
|
// Determine display label
|
|
var indexTypeLabel;
|
|
if (indexType === 'full') {
|
|
indexTypeLabel = 'FTS + Vector';
|
|
} else if (indexType === 'vector') {
|
|
indexTypeLabel = 'Vector';
|
|
} else {
|
|
indexTypeLabel = 'FTS';
|
|
}
|
|
|
|
// Add model info for vector indexes
|
|
var modelLabel = '';
|
|
if (indexType !== 'normal') {
|
|
var modelNames = { code: 'Code', fast: 'Fast' };
|
|
var backendLabel = embeddingBackend === 'litellm' ? 'API: ' : '';
|
|
modelLabel = ' [' + backendLabel + (modelNames[embeddingModel] || embeddingModel) + ']';
|
|
}
|
|
|
|
progressBar.innerHTML =
|
|
'<div class="max-w-4xl mx-auto px-4 py-3">' +
|
|
'<div class="flex items-center justify-between gap-4">' +
|
|
'<div class="flex items-center gap-3 flex-1 min-w-0">' +
|
|
'<div class="animate-spin w-5 h-5 border-2 border-primary border-t-transparent rounded-full flex-shrink-0" id="codexlensIndexSpinner"></div>' +
|
|
'<div class="flex-1 min-w-0">' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<span class="font-medium text-sm">' + t('codexlens.indexing') + ' (' + indexTypeLabel + modelLabel + ')</span>' +
|
|
'<span class="text-xs text-muted-foreground" id="codexlensIndexPercent">0%</span>' +
|
|
'</div>' +
|
|
'<div class="text-xs text-muted-foreground truncate" id="codexlensIndexStatus">' + t('codexlens.preparingIndex') + '</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="flex-1 max-w-xs hidden sm:block">' +
|
|
'<div class="h-2 bg-muted rounded-full overflow-hidden">' +
|
|
'<div id="codexlensIndexProgressBar" class="h-full bg-primary transition-all duration-300 ease-out" style="width: 0%"></div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<button id="codexlensIndexCancelBtn" class="px-2 py-1 text-xs bg-destructive/10 hover:bg-destructive/20 text-destructive rounded-md transition-colors flex-shrink-0" onclick="cancelCodexLensIndexing()" title="' + t('common.cancel') + '">' +
|
|
t('common.cancel') +
|
|
'</button>' +
|
|
'<button class="p-1.5 hover:bg-muted rounded-md transition-colors flex-shrink-0" onclick="closeCodexLensIndexModal()" title="' + t('common.close') + '">' +
|
|
'<i data-lucide="x" class="w-4 h-4"></i>' +
|
|
'</button>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
document.body.appendChild(progressBar);
|
|
if (window.lucide) lucide.createIcons();
|
|
|
|
// For 'full' type, use 'vector' in the API (it creates FTS + embeddings)
|
|
var apiIndexType = (indexType === 'full') ? 'vector' : indexType;
|
|
|
|
// Start indexing with specified type and model
|
|
startCodexLensIndexing(apiIndexType, embeddingModel, embeddingBackend, maxWorkers);
|
|
}
|
|
|
|
/**
|
|
* Start the indexing process
|
|
* @param {string} indexType - 'vector' or 'normal'
|
|
* @param {string} embeddingModel - Model profile: 'code', 'fast'
|
|
* @param {string} embeddingBackend - Backend: 'fastembed' (local) or 'litellm' (API)
|
|
* @param {number} maxWorkers - Max concurrent API calls for embedding generation (default: 1)
|
|
*/
|
|
async function startCodexLensIndexing(indexType, embeddingModel, embeddingBackend, maxWorkers) {
|
|
indexType = indexType || 'vector';
|
|
embeddingModel = embeddingModel || 'code';
|
|
embeddingBackend = embeddingBackend || 'fastembed';
|
|
maxWorkers = maxWorkers || 1;
|
|
var statusText = document.getElementById('codexlensIndexStatus');
|
|
var progressBar = document.getElementById('codexlensIndexProgressBar');
|
|
var percentText = document.getElementById('codexlensIndexPercent');
|
|
var spinner = document.getElementById('codexlensIndexSpinner');
|
|
|
|
// Setup WebSocket listener for progress events
|
|
window.codexlensIndexProgressHandler = function(data) {
|
|
var payload = data.payload || data;
|
|
console.log('[CodexLens] Progress event received:', payload);
|
|
|
|
if (statusText) statusText.textContent = payload.message || t('codexlens.indexing');
|
|
if (progressBar) progressBar.style.width = (payload.percent || 0) + '%';
|
|
if (percentText) percentText.textContent = (payload.percent || 0) + '%';
|
|
|
|
// Handle completion
|
|
if (payload.stage === 'complete') {
|
|
handleIndexComplete(true, payload.message);
|
|
} else if (payload.stage === 'error') {
|
|
handleIndexComplete(false, payload.message);
|
|
}
|
|
};
|
|
|
|
// Register with notification system
|
|
if (typeof registerWsEventHandler === 'function') {
|
|
registerWsEventHandler('CODEXLENS_INDEX_PROGRESS', window.codexlensIndexProgressHandler);
|
|
console.log('[CodexLens] Registered WebSocket progress handler');
|
|
} else {
|
|
console.warn('[CodexLens] registerWsEventHandler not available');
|
|
}
|
|
|
|
try {
|
|
console.log('[CodexLens] Starting index for:', projectPath, 'type:', indexType, 'model:', embeddingModel, 'backend:', embeddingBackend, 'maxWorkers:', maxWorkers);
|
|
var response = await fetch('/api/codexlens/init', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ path: projectPath, indexType: indexType, embeddingModel: embeddingModel, embeddingBackend: embeddingBackend, maxWorkers: maxWorkers })
|
|
});
|
|
|
|
var result = await response.json();
|
|
console.log('[CodexLens] Init result:', result);
|
|
|
|
// Check if completed successfully (WebSocket might have already reported)
|
|
if (result.success) {
|
|
// For vector index, check if embeddings were actually generated
|
|
var embeddingsResult = result.result && result.result.embeddings;
|
|
if (indexType === 'vector' && embeddingsResult && !embeddingsResult.generated) {
|
|
// FTS succeeded but embeddings failed - show partial success
|
|
var errorMsg = embeddingsResult.error || t('codexlens.embeddingsFailed');
|
|
handleIndexComplete(false, t('codexlens.ftsSuccessEmbeddingsFailed') || 'FTS index created, but embeddings failed: ' + errorMsg);
|
|
} else {
|
|
handleIndexComplete(true, t('codexlens.indexComplete'));
|
|
}
|
|
} else if (!result.success) {
|
|
handleIndexComplete(false, result.error || t('common.unknownError'));
|
|
}
|
|
} catch (err) {
|
|
console.error('[CodexLens] Init error:', err);
|
|
handleIndexComplete(false, err.message);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle index completion
|
|
*/
|
|
function handleIndexComplete(success, message) {
|
|
var statusText = document.getElementById('codexlensIndexStatus');
|
|
var progressBar = document.getElementById('codexlensIndexProgressBar');
|
|
var percentText = document.getElementById('codexlensIndexPercent');
|
|
var spinner = document.getElementById('codexlensIndexSpinner');
|
|
var floatingBar = document.getElementById('codexlensIndexFloating');
|
|
|
|
// Unregister WebSocket handler
|
|
if (typeof unregisterWsEventHandler === 'function' && window.codexlensIndexProgressHandler) {
|
|
unregisterWsEventHandler('CODEXLENS_INDEX_PROGRESS', window.codexlensIndexProgressHandler);
|
|
}
|
|
|
|
if (success) {
|
|
if (progressBar) progressBar.style.width = '100%';
|
|
if (percentText) percentText.textContent = '100%';
|
|
if (statusText) statusText.textContent = t('codexlens.indexComplete');
|
|
if (spinner) {
|
|
spinner.classList.remove('animate-spin', 'border-primary');
|
|
spinner.classList.add('border-green-500');
|
|
spinner.innerHTML = '<i data-lucide="check" class="w-5 h-5 text-green-500"></i>';
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
if (floatingBar) {
|
|
floatingBar.classList.add('bg-green-500/10');
|
|
}
|
|
|
|
showRefreshToast(t('codexlens.indexSuccess'), 'success');
|
|
|
|
// Auto-close after 3 seconds
|
|
setTimeout(function() {
|
|
closeCodexLensIndexModal();
|
|
// Refresh status
|
|
if (typeof loadCodexLensStatus === 'function') {
|
|
loadCodexLensStatus().then(function() {
|
|
renderToolsSection();
|
|
if (window.lucide) lucide.createIcons();
|
|
});
|
|
}
|
|
}, 3000);
|
|
} else {
|
|
if (progressBar) {
|
|
progressBar.classList.remove('bg-primary');
|
|
progressBar.classList.add('bg-destructive');
|
|
}
|
|
if (statusText) statusText.textContent = message || t('codexlens.indexFailed');
|
|
if (spinner) {
|
|
spinner.classList.remove('animate-spin', 'border-primary');
|
|
spinner.innerHTML = '<i data-lucide="alert-circle" class="w-5 h-5 text-destructive"></i>';
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
if (floatingBar) {
|
|
floatingBar.classList.add('bg-destructive/10');
|
|
}
|
|
|
|
showRefreshToast(t('codexlens.indexFailed') + ': ' + message, 'error');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Close floating progress bar
|
|
*/
|
|
function closeCodexLensIndexModal() {
|
|
var floatingBar = document.getElementById('codexlensIndexFloating');
|
|
if (floatingBar) {
|
|
floatingBar.classList.add('translate-y-full');
|
|
setTimeout(function() {
|
|
floatingBar.remove();
|
|
}, 300);
|
|
}
|
|
|
|
// Unregister WebSocket handler
|
|
if (typeof unregisterWsEventHandler === 'function' && window.codexlensIndexProgressHandler) {
|
|
unregisterWsEventHandler('CODEXLENS_INDEX_PROGRESS', window.codexlensIndexProgressHandler);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Cancel the running indexing process
|
|
*/
|
|
async function cancelCodexLensIndexing() {
|
|
var cancelBtn = document.getElementById('codexlensIndexCancelBtn');
|
|
var statusText = document.getElementById('codexlensIndexStatus');
|
|
|
|
// Disable button to prevent double-click
|
|
if (cancelBtn) {
|
|
cancelBtn.disabled = true;
|
|
cancelBtn.textContent = t('common.canceling') || 'Canceling...';
|
|
}
|
|
|
|
try {
|
|
var response = await fetch('/api/codexlens/cancel', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' }
|
|
});
|
|
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
if (statusText) statusText.textContent = t('codexlens.indexCanceled') || 'Indexing canceled';
|
|
showRefreshToast(t('codexlens.indexCanceled') || 'Indexing canceled', 'info');
|
|
|
|
// Close the modal after a short delay
|
|
setTimeout(function() {
|
|
closeCodexLensIndexModal();
|
|
// Refresh status
|
|
if (typeof loadCodexLensStatus === 'function') {
|
|
loadCodexLensStatus().then(function() {
|
|
renderToolsSection();
|
|
if (window.lucide) lucide.createIcons();
|
|
});
|
|
}
|
|
}, 1000);
|
|
} else {
|
|
showRefreshToast(t('codexlens.cancelFailed') + ': ' + result.error, 'error');
|
|
// Re-enable button on failure
|
|
if (cancelBtn) {
|
|
cancelBtn.disabled = false;
|
|
cancelBtn.textContent = t('common.cancel');
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error('[CodexLens] Cancel error:', err);
|
|
showRefreshToast(t('common.error') + ': ' + err.message, 'error');
|
|
// Re-enable button on error
|
|
if (cancelBtn) {
|
|
cancelBtn.disabled = false;
|
|
cancelBtn.textContent = t('common.cancel');
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Install CodexLens
|
|
* Note: Uses CodexLens-specific install wizard from cli-status.js
|
|
* which calls /api/codexlens/bootstrap (Python venv), not the generic
|
|
* CLI install that uses npm install -g (NPM packages)
|
|
*/
|
|
function installCodexLensFromManager() {
|
|
// Use the CodexLens-specific install wizard from cli-status.js
|
|
if (typeof openCodexLensInstallWizard === 'function') {
|
|
openCodexLensInstallWizard();
|
|
} else {
|
|
// Fallback: inline install wizard if cli-status.js not loaded
|
|
showCodexLensInstallDialog();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Fallback install dialog when cli-status.js is not loaded
|
|
*/
|
|
function showCodexLensInstallDialog() {
|
|
var modal = document.createElement('div');
|
|
modal.id = 'codexlensInstallModalFallback';
|
|
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">' + t('codexlens.installCodexLens') + '</h3>' +
|
|
'<p class="text-sm text-muted-foreground">' + t('codexlens.installDesc') + '</p>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="space-y-4">' +
|
|
'<div class="bg-muted/50 rounded-lg p-4">' +
|
|
'<h4 class="font-medium mb-2">' + t('codexlens.whatWillBeInstalled') + '</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>' + t('codexlens.pythonVenv') + '</strong> - ' + t('codexlens.pythonVenvDesc') + '</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>' + t('codexlens.codexlensPackage') + '</strong> - ' + t('codexlens.codexlensPackageDesc') + '</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> - ' + t('codexlens.sqliteFtsDesc') + '</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">' + t('codexlens.installLocation') + '</p>' +
|
|
'<p class="mt-1"><code class="bg-muted px-1 rounded">~/.codexlens/venv</code></p>' +
|
|
'<p class="mt-1">' + t('codexlens.installTime') + '</p>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div id="codexlensInstallProgressFallback" 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="codexlensInstallStatusFallback">' + t('codexlens.startingInstall') + '</span>' +
|
|
'</div>' +
|
|
'<div class="mt-2 h-2 bg-muted rounded-full overflow-hidden">' +
|
|
'<div id="codexlensInstallProgressBarFallback" 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="closeCodexLensInstallDialogFallback()">' + t('common.cancel') + '</button>' +
|
|
'<button id="codexlensInstallBtnFallback" class="btn-primary px-4 py-2" onclick="startCodexLensInstallFallback()">' +
|
|
'<i data-lucide="download" class="w-4 h-4 mr-2"></i>' +
|
|
t('codexlens.installNow') +
|
|
'</button>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
document.body.appendChild(modal);
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
|
|
function closeCodexLensInstallDialogFallback() {
|
|
var modal = document.getElementById('codexlensInstallModalFallback');
|
|
if (modal) modal.remove();
|
|
}
|
|
|
|
async function startCodexLensInstallFallback() {
|
|
var progressDiv = document.getElementById('codexlensInstallProgressFallback');
|
|
var installBtn = document.getElementById('codexlensInstallBtnFallback');
|
|
var statusText = document.getElementById('codexlensInstallStatusFallback');
|
|
var progressBar = document.getElementById('codexlensInstallProgressBarFallback');
|
|
|
|
progressDiv.classList.remove('hidden');
|
|
installBtn.disabled = true;
|
|
installBtn.innerHTML = '<span class="animate-pulse">' + t('codexlens.installing') + '</span>';
|
|
|
|
var stages = [
|
|
{ progress: 10, text: t('codexlens.creatingVenv') },
|
|
{ progress: 30, text: t('codexlens.installingPip') },
|
|
{ progress: 50, text: t('codexlens.installingPackage') },
|
|
{ progress: 70, text: t('codexlens.settingUpDeps') },
|
|
{ progress: 90, text: t('codexlens.finalizing') }
|
|
];
|
|
|
|
var currentStage = 0;
|
|
var progressInterval = setInterval(function() {
|
|
if (currentStage < stages.length) {
|
|
statusText.textContent = stages[currentStage].text;
|
|
progressBar.style.width = stages[currentStage].progress + '%';
|
|
currentStage++;
|
|
}
|
|
}, 1500);
|
|
|
|
try {
|
|
var response = await fetch('/api/codexlens/bootstrap', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({})
|
|
});
|
|
|
|
clearInterval(progressInterval);
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
progressBar.style.width = '100%';
|
|
statusText.textContent = t('codexlens.installComplete');
|
|
|
|
setTimeout(function() {
|
|
closeCodexLensInstallDialogFallback();
|
|
showRefreshToast(t('codexlens.installSuccess'), 'success');
|
|
// Refresh the page to update status
|
|
if (typeof loadCodexLensStatus === 'function') {
|
|
loadCodexLensStatus().then(function() {
|
|
if (typeof renderCodexLensManager === 'function') renderCodexLensManager();
|
|
});
|
|
} else {
|
|
location.reload();
|
|
}
|
|
}, 1000);
|
|
} else {
|
|
statusText.textContent = t('common.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> ' + t('common.retry');
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
} catch (err) {
|
|
clearInterval(progressInterval);
|
|
statusText.textContent = t('common.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> ' + t('common.retry');
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Uninstall CodexLens
|
|
* Note: Uses CodexLens-specific uninstall wizard from cli-status.js
|
|
* which calls /api/codexlens/uninstall (Python venv), not the generic
|
|
* CLI uninstall that uses /api/cli/uninstall (NPM packages)
|
|
*/
|
|
function uninstallCodexLensFromManager() {
|
|
// Use the CodexLens-specific uninstall wizard from cli-status.js
|
|
if (typeof openCodexLensUninstallWizard === 'function') {
|
|
openCodexLensUninstallWizard();
|
|
} else {
|
|
// Fallback: inline uninstall wizard if cli-status.js not loaded
|
|
showCodexLensUninstallDialog();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Fallback uninstall dialog when cli-status.js is not loaded
|
|
*/
|
|
function showCodexLensUninstallDialog() {
|
|
var modal = document.createElement('div');
|
|
modal.id = 'codexlensUninstallModalFallback';
|
|
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">' + t('codexlens.uninstall') + '</h3>' +
|
|
'<p class="text-sm text-muted-foreground">' + t('codexlens.uninstallDesc') + '</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">' + t('codexlens.whatWillBeRemoved') + '</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>' + t('codexlens.removeVenv') + '</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>' + t('codexlens.removeData') + '</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>' + t('codexlens.removeConfig') + '</span>' +
|
|
'</li>' +
|
|
'</ul>' +
|
|
'</div>' +
|
|
'<div id="codexlensUninstallProgressFallback" 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="codexlensUninstallStatusFallback">' + t('codexlens.removing') + '</span>' +
|
|
'</div>' +
|
|
'<div class="mt-2 h-2 bg-muted rounded-full overflow-hidden">' +
|
|
'<div id="codexlensUninstallProgressBarFallback" 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="closeCodexLensUninstallDialogFallback()">' + t('common.cancel') + '</button>' +
|
|
'<button id="codexlensUninstallBtnFallback" class="btn-destructive px-4 py-2" onclick="startCodexLensUninstallFallback()">' +
|
|
'<i data-lucide="trash-2" class="w-4 h-4 mr-2"></i>' +
|
|
t('codexlens.uninstall') +
|
|
'</button>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
document.body.appendChild(modal);
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
|
|
function closeCodexLensUninstallDialogFallback() {
|
|
var modal = document.getElementById('codexlensUninstallModalFallback');
|
|
if (modal) modal.remove();
|
|
}
|
|
|
|
async function startCodexLensUninstallFallback() {
|
|
var progressDiv = document.getElementById('codexlensUninstallProgressFallback');
|
|
var uninstallBtn = document.getElementById('codexlensUninstallBtnFallback');
|
|
var statusText = document.getElementById('codexlensUninstallStatusFallback');
|
|
var progressBar = document.getElementById('codexlensUninstallProgressBarFallback');
|
|
|
|
progressDiv.classList.remove('hidden');
|
|
uninstallBtn.disabled = true;
|
|
uninstallBtn.innerHTML = '<span class="animate-pulse">' + t('codexlens.uninstalling') + '</span>';
|
|
|
|
var stages = [
|
|
{ progress: 25, text: t('codexlens.removingVenv') },
|
|
{ progress: 50, text: t('codexlens.removingData') },
|
|
{ progress: 75, text: t('codexlens.removingConfig') },
|
|
{ progress: 90, text: t('codexlens.finalizing') }
|
|
];
|
|
|
|
var currentStage = 0;
|
|
var progressInterval = setInterval(function() {
|
|
if (currentStage < stages.length) {
|
|
statusText.textContent = stages[currentStage].text;
|
|
progressBar.style.width = stages[currentStage].progress + '%';
|
|
currentStage++;
|
|
}
|
|
}, 500);
|
|
|
|
try {
|
|
var response = await fetch('/api/codexlens/uninstall', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({})
|
|
});
|
|
|
|
clearInterval(progressInterval);
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
progressBar.style.width = '100%';
|
|
statusText.textContent = t('codexlens.uninstallComplete');
|
|
|
|
setTimeout(function() {
|
|
closeCodexLensUninstallDialogFallback();
|
|
showRefreshToast(t('codexlens.uninstallSuccess'), 'success');
|
|
// Refresh the page to update status
|
|
if (typeof loadCodexLensStatus === 'function') {
|
|
loadCodexLensStatus().then(function() {
|
|
if (typeof renderCodexLensManager === 'function') renderCodexLensManager();
|
|
});
|
|
} else {
|
|
location.reload();
|
|
}
|
|
}, 1000);
|
|
} else {
|
|
statusText.textContent = t('common.error') + ': ' + result.error;
|
|
progressBar.classList.add('bg-destructive');
|
|
uninstallBtn.disabled = false;
|
|
uninstallBtn.innerHTML = '<i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> ' + t('common.retry');
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
} catch (err) {
|
|
clearInterval(progressInterval);
|
|
statusText.textContent = t('common.error') + ': ' + err.message;
|
|
progressBar.classList.add('bg-destructive');
|
|
uninstallBtn.disabled = false;
|
|
uninstallBtn.innerHTML = '<i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> ' + t('common.retry');
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Clean current workspace index
|
|
*/
|
|
async function cleanCurrentWorkspaceIndex() {
|
|
if (!confirm(t('codexlens.cleanCurrentWorkspaceConfirm'))) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
showRefreshToast(t('codexlens.cleaning'), 'info');
|
|
|
|
// Get current workspace path (projectPath is a global variable from state.js)
|
|
var workspacePath = projectPath;
|
|
|
|
var response = await fetch('/api/codexlens/clean', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ path: workspacePath })
|
|
});
|
|
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
showRefreshToast(t('codexlens.cleanCurrentWorkspaceSuccess'), 'success');
|
|
|
|
// Refresh status
|
|
if (typeof loadCodexLensStatus === 'function') {
|
|
await loadCodexLensStatus();
|
|
renderToolsSection();
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
} else {
|
|
showRefreshToast(t('codexlens.cleanFailed') + ': ' + result.error, 'error');
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast(t('common.error') + ': ' + err.message, 'error');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Clean all CodexLens indexes
|
|
*/
|
|
async function cleanCodexLensIndexes() {
|
|
if (!confirm(t('codexlens.cleanConfirm'))) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
showRefreshToast(t('codexlens.cleaning'), 'info');
|
|
|
|
var response = await fetch('/api/codexlens/clean', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ all: true })
|
|
});
|
|
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
showRefreshToast(t('codexlens.cleanSuccess'), 'success');
|
|
|
|
// Refresh status
|
|
if (typeof loadCodexLensStatus === 'function') {
|
|
await loadCodexLensStatus();
|
|
renderToolsSection();
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
} else {
|
|
showRefreshToast(t('codexlens.cleanFailed') + ': ' + result.error, 'error');
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast(t('common.error') + ': ' + err.message, 'error');
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// CODEXLENS MANAGER PAGE (Independent View)
|
|
// ============================================================
|
|
|
|
/**
|
|
* Render CodexLens Manager as an independent page view
|
|
*/
|
|
async function renderCodexLensManager() {
|
|
var container = document.getElementById('mainContent');
|
|
if (!container) return;
|
|
|
|
// Hide stats grid and search
|
|
var statsGrid = document.getElementById('statsGrid');
|
|
var searchContainer = document.querySelector('.search-container');
|
|
if (statsGrid) statsGrid.style.display = 'none';
|
|
if (searchContainer) searchContainer.style.display = 'none';
|
|
|
|
container.innerHTML = '<div class="flex items-center justify-center py-12"><div class="animate-spin w-6 h-6 border-2 border-primary border-t-transparent rounded-full"></div><span class="ml-3">' + t('common.loading') + '</span></div>';
|
|
|
|
try {
|
|
// Use aggregated endpoint for faster page load (single API call)
|
|
var dashboardData = null;
|
|
var config = { index_dir: '~/.codexlens/indexes', index_count: 0 };
|
|
|
|
if (typeof loadCodexLensDashboardInit === 'function') {
|
|
console.log('[CodexLens] Using aggregated dashboard-init endpoint...');
|
|
dashboardData = await loadCodexLensDashboardInit();
|
|
if (dashboardData && dashboardData.config) {
|
|
config = dashboardData.config;
|
|
console.log('[CodexLens] Dashboard init loaded, config:', config);
|
|
}
|
|
} else if (typeof loadCodexLensStatus === 'function') {
|
|
// Fallback to legacy individual calls
|
|
console.log('[CodexLens] Fallback to legacy loadCodexLensStatus...');
|
|
await loadCodexLensStatus();
|
|
var response = await fetch('/api/codexlens/config');
|
|
config = await response.json();
|
|
}
|
|
|
|
// Load LiteLLM API config for embedding backend options (parallel with page render)
|
|
var litellmPromise = (async () => {
|
|
try {
|
|
console.log('[CodexLens] Loading LiteLLM config...');
|
|
var litellmResponse = await fetch('/api/litellm-api/config');
|
|
if (litellmResponse.ok) {
|
|
window.litellmApiConfig = await litellmResponse.json();
|
|
console.log('[CodexLens] LiteLLM config loaded, providers:', window.litellmApiConfig?.providers?.length || 0);
|
|
}
|
|
} catch (e) {
|
|
console.warn('[CodexLens] Could not load LiteLLM config:', e);
|
|
}
|
|
})();
|
|
|
|
container.innerHTML = buildCodexLensManagerPage(config);
|
|
if (window.lucide) lucide.createIcons();
|
|
initCodexLensManagerPageEvents(config);
|
|
|
|
// Load additional data in parallel (non-blocking)
|
|
var isInstalled = window.cliToolsStatus?.codexlens?.installed || dashboardData?.installed;
|
|
|
|
// Wait for LiteLLM config before loading semantic deps (it may need provider info)
|
|
await litellmPromise;
|
|
|
|
// Always load semantic deps status - it needs GPU detection and device list
|
|
// which are not included in the aggregated endpoint
|
|
loadSemanticDepsStatus();
|
|
|
|
loadModelList();
|
|
loadRerankerModelList();
|
|
|
|
// Initialize model mode and semantic status badge
|
|
updateSemanticStatusBadge();
|
|
loadGpuDevicesForModeSelector();
|
|
|
|
// Initialize file watcher status
|
|
initWatcherStatus();
|
|
|
|
// Load index stats for the Index Manager section
|
|
if (isInstalled) {
|
|
loadIndexStatsForPage();
|
|
// Check index health based on git history
|
|
checkIndexHealth();
|
|
}
|
|
} catch (err) {
|
|
container.innerHTML = '<div class="text-center py-12 text-destructive"><i data-lucide="alert-circle" class="w-8 h-8 mx-auto mb-2"></i><p>' + t('common.error') + ': ' + escapeHtml(err.message) + '</p></div>';
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Build CodexLens Manager page content
|
|
*/
|
|
function buildCodexLensManagerPage(config) {
|
|
var indexDir = config.index_dir || '~/.codexlens/indexes';
|
|
var indexCount = config.index_count || 0;
|
|
var isInstalled = window.cliToolsStatus?.codexlens?.installed || false;
|
|
|
|
return '<div class="codexlens-manager-page space-y-6">' +
|
|
// Header with status
|
|
'<div class="bg-card border border-border rounded-lg p-6">' +
|
|
'<div class="flex items-center justify-between flex-wrap gap-4">' +
|
|
'<div class="flex items-center gap-4">' +
|
|
'<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">' +
|
|
'<i data-lucide="database" class="w-6 h-6 text-primary"></i>' +
|
|
'</div>' +
|
|
'<div>' +
|
|
'<h2 class="text-xl font-bold">' + t('codexlens.config') + '</h2>' +
|
|
'<p class="text-sm text-muted-foreground">' + t('codexlens.configDesc') + '</p>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="flex items-center gap-4">' +
|
|
(isInstalled
|
|
? '<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-success/10 text-success border border-success/20"><i data-lucide="check-circle" class="w-4 h-4"></i> ' + t('codexlens.installed') + '</span>'
|
|
: '<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-muted text-muted-foreground border border-border"><i data-lucide="circle" class="w-4 h-4"></i> ' + t('codexlens.notInstalled') + '</span>') +
|
|
'<div class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-primary/5 border border-primary/20">' +
|
|
'<span class="text-sm text-muted-foreground">' + t('codexlens.indexes') + ':</span>' +
|
|
'<span class="text-lg font-bold text-primary">' + indexCount + '</span>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
|
|
(isInstalled
|
|
? // Installed: Show full management UI
|
|
'<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">' +
|
|
// Left Column
|
|
'<div class="space-y-6">' +
|
|
// Create Index Section - Simplified (model config in Environment Variables)
|
|
'<div class="bg-card border border-border rounded-lg p-5">' +
|
|
'<h4 class="text-lg font-semibold mb-4 flex items-center gap-2"><i data-lucide="layers" class="w-5 h-5 text-primary"></i> ' + t('codexlens.createIndex') + '</h4>' +
|
|
'<div class="space-y-4">' +
|
|
// Index Actions - Primary buttons
|
|
'<div class="grid grid-cols-2 gap-3">' +
|
|
'<button class="btn btn-primary flex items-center justify-center gap-2 py-3" onclick="initCodexLensIndexFromPage(\'full\')" title="' + t('codexlens.fullIndexDesc') + '">' +
|
|
'<i data-lucide="layers" class="w-4 h-4"></i>' +
|
|
'<span>' + t('codexlens.fullIndex') + '</span>' +
|
|
'</button>' +
|
|
'<button class="btn btn-outline flex items-center justify-center gap-2 py-3" onclick="initCodexLensIndexFromPage(\'normal\')" title="' + t('codexlens.ftsIndexDesc') + '">' +
|
|
'<i data-lucide="file-text" class="w-4 h-4"></i>' +
|
|
'<span>' + t('codexlens.ftsIndex') + '</span>' +
|
|
'</button>' +
|
|
'</div>' +
|
|
// Incremental Update button
|
|
'<button class="btn btn-outline w-full flex items-center justify-center gap-2 py-2.5" onclick="runIncrementalUpdate()" title="Update index with changed files only">' +
|
|
'<i data-lucide="refresh-cw" class="w-4 h-4"></i>' +
|
|
'<span>Incremental Update</span>' +
|
|
'</button>' +
|
|
'<p class="text-xs text-muted-foreground">' + t('codexlens.indexTypeHint') + ' Configure embedding model in Environment Variables below.</p>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
// Storage Path Section
|
|
'<div class="bg-card border border-border rounded-lg p-5">' +
|
|
'<h4 class="text-lg font-semibold mb-4 flex items-center gap-2"><i data-lucide="folder" class="w-5 h-5 text-primary"></i> ' + t('codexlens.indexStoragePath') + '</h4>' +
|
|
'<div class="space-y-3">' +
|
|
'<div>' +
|
|
'<label class="block text-sm font-medium mb-1.5">' + t('codexlens.currentPath') + '</label>' +
|
|
'<div class="text-sm text-muted-foreground bg-muted/50 rounded-lg px-3 py-2 font-mono border border-border truncate" title="' + indexDir + '">' + indexDir + '</div>' +
|
|
'</div>' +
|
|
'<div>' +
|
|
'<label class="block text-sm font-medium mb-1.5">' + t('codexlens.newStoragePath') + '</label>' +
|
|
'<div class="flex gap-2">' +
|
|
'<input type="text" id="indexDirInput" value="' + indexDir + '" class="flex-1 px-3 py-2 border border-border rounded-lg bg-background text-foreground text-sm" />' +
|
|
'<button class="btn-sm btn-primary" id="saveIndexPathBtn"><i data-lucide="save" class="w-3.5 h-3.5"></i></button>' +
|
|
'</div>' +
|
|
'<p class="text-xs text-muted-foreground mt-1">' + t('codexlens.pathInfo') + '</p>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
// Environment Variables Section
|
|
'<div class="bg-card border border-border rounded-lg p-5">' +
|
|
'<div class="flex items-center justify-between mb-4">' +
|
|
'<h4 class="text-lg font-semibold flex items-center gap-2"><i data-lucide="file-code" class="w-5 h-5 text-primary"></i> Environment Variables</h4>' +
|
|
'<button class="btn-sm btn-outline" onclick="loadEnvVariables()"><i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i> Load</button>' +
|
|
'</div>' +
|
|
'<div id="envVarsContainer" class="space-y-2">' +
|
|
'<div class="text-sm text-muted-foreground">Click Load to view/edit ~/.codexlens/.env</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
// Maintenance Section
|
|
'<div class="bg-card border border-border rounded-lg p-5">' +
|
|
'<h4 class="text-lg font-semibold mb-4 flex items-center gap-2"><i data-lucide="settings" class="w-5 h-5 text-primary"></i> ' + t('codexlens.maintenance') + '</h4>' +
|
|
'<div class="flex flex-wrap gap-2">' +
|
|
'<button class="btn-sm btn-outline" onclick="cleanCurrentWorkspaceIndex()"><i data-lucide="folder-x" class="w-3.5 h-3.5"></i> ' + t('codexlens.cleanCurrentWorkspace') + '</button>' +
|
|
'<button class="btn-sm btn-outline" onclick="cleanCodexLensIndexes()"><i data-lucide="trash" class="w-3.5 h-3.5"></i> ' + t('codexlens.cleanAllIndexes') + '</button>' +
|
|
'<button class="btn-sm btn-destructive" onclick="uninstallCodexLensFromManager()"><i data-lucide="trash-2" class="w-3.5 h-3.5"></i> ' + t('cli.uninstall') + '</button>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
// Right Column
|
|
'<div class="space-y-6">' +
|
|
// Combined: Semantic Status + Model Management with Tabs
|
|
'<div class="bg-card border border-border rounded-lg overflow-hidden">' +
|
|
// Compact Header with Semantic Status
|
|
'<div class="bg-muted/30 border-b border-border px-4 py-3">' +
|
|
'<div class="flex items-center justify-between">' +
|
|
'<h4 class="font-semibold flex items-center gap-2"><i data-lucide="cpu" class="w-4 h-4 text-primary"></i> ' + t('codexlens.modelManagement') + '</h4>' +
|
|
'<div id="semanticStatusBadge" class="flex items-center gap-2">' +
|
|
'<span class="text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground animate-pulse">Checking...</span>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
// GPU Config Section (for local mode)
|
|
'<div id="gpuConfigSection" class="px-4 py-3 border-b border-border bg-muted/10">' +
|
|
'<div class="flex items-center gap-3">' +
|
|
'<span class="text-xs text-muted-foreground">GPU:</span>' +
|
|
'<select id="gpuDeviceSelect" class="text-sm border rounded px-2 py-1 bg-background flex-1">' +
|
|
'<option value="auto">Auto</option>' +
|
|
'</select>' +
|
|
'</div>' +
|
|
'<p class="text-xs text-muted-foreground mt-1.5">Backend configured in Environment Variables below</p>' +
|
|
'</div>' +
|
|
// Tabs for Embedding / Reranker
|
|
'<div class="border-b border-border">' +
|
|
'<div class="flex">' +
|
|
'<button class="model-tab flex-1 px-4 py-2.5 text-sm font-medium border-b-2 border-primary text-primary bg-primary/5" data-tab="embedding" onclick="switchModelTab(\'embedding\')">' +
|
|
'<i data-lucide="layers" class="w-3.5 h-3.5 inline mr-1"></i>Embedding' +
|
|
'</button>' +
|
|
'<button class="model-tab flex-1 px-4 py-2.5 text-sm font-medium border-b-2 border-transparent text-muted-foreground hover:text-foreground" data-tab="reranker" onclick="switchModelTab(\'reranker\')">' +
|
|
'<i data-lucide="arrow-up-down" class="w-3.5 h-3.5 inline mr-1"></i>Reranker' +
|
|
'</button>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
// Tab Content
|
|
'<div class="p-4">' +
|
|
// Embedding Tab Content
|
|
'<div id="embeddingTabContent" class="model-tab-content">' +
|
|
'<div id="modelListContainer" class="space-y-2">' +
|
|
'<div class="flex items-center gap-2 text-sm text-muted-foreground">' +
|
|
'<div class="animate-spin w-4 h-4 border-2 border-primary border-t-transparent rounded-full"></div> ' + t('codexlens.loadingModels') +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
// Reranker Tab Content
|
|
'<div id="rerankerTabContent" class="model-tab-content hidden">' +
|
|
'<div id="rerankerModelListContainer" class="space-y-2">' +
|
|
'<div class="text-sm text-muted-foreground">' + t('common.loading') + '</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
// File Watcher Card
|
|
'<div class="bg-card border border-border rounded-lg overflow-hidden">' +
|
|
'<div class="bg-muted/30 border-b border-border px-4 py-3">' +
|
|
'<div class="flex items-center justify-between">' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<i data-lucide="eye" class="w-4 h-4 text-primary"></i>' +
|
|
'<h4 class="font-semibold">File Watcher</h4>' +
|
|
'</div>' +
|
|
'<div id="watcherStatusBadge" class="flex items-center gap-2">' +
|
|
'<span class="text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground">Stopped</span>' +
|
|
'<button class="btn-sm btn-outline" onclick="toggleWatcher()" id="watcherToggleBtn">' +
|
|
'<i data-lucide="play" class="w-3.5 h-3.5"></i>' +
|
|
'</button>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="p-4">' +
|
|
'<p class="text-xs text-muted-foreground mb-3">Monitor file changes and auto-update index</p>' +
|
|
// Stats row
|
|
'<div class="grid grid-cols-3 gap-2 mb-3">' +
|
|
'<div class="bg-muted/30 rounded p-2 text-center">' +
|
|
'<div id="watcherFilesCount" class="text-sm font-semibold">-</div>' +
|
|
'<div class="text-xs text-muted-foreground">Files</div>' +
|
|
'</div>' +
|
|
'<div class="bg-muted/30 rounded p-2 text-center">' +
|
|
'<div id="watcherChangesCount" class="text-sm font-semibold">0</div>' +
|
|
'<div class="text-xs text-muted-foreground">Changes</div>' +
|
|
'</div>' +
|
|
'<div class="bg-muted/30 rounded p-2 text-center">' +
|
|
'<div id="watcherUptimeDisplay" class="text-sm font-semibold">-</div>' +
|
|
'<div class="text-xs text-muted-foreground">Uptime</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
// Recent activity log
|
|
'<div class="border border-border rounded">' +
|
|
'<div class="bg-muted/30 px-3 py-1.5 border-b border-border text-xs font-medium text-muted-foreground flex items-center justify-between">' +
|
|
'<span>Recent Activity</span>' +
|
|
'<button class="text-xs hover:text-foreground" onclick="clearWatcherLog()" title="Clear log">' +
|
|
'<i data-lucide="trash-2" class="w-3 h-3"></i>' +
|
|
'</button>' +
|
|
'</div>' +
|
|
'<div id="watcherActivityLog" class="h-24 overflow-y-auto p-2 text-xs font-mono bg-background">' +
|
|
'<div class="text-muted-foreground">No activity yet. Start watcher to monitor files.</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
// Index Manager Section
|
|
'<div class="bg-card border border-border rounded-lg overflow-hidden" id="indexManagerSection">' +
|
|
'<div class="bg-muted/30 border-b border-border px-4 py-3 flex items-center justify-between">' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<i data-lucide="database" class="w-4 h-4 text-primary"></i>' +
|
|
'<span class="font-medium text-foreground">' + t('index.manager') + '</span>' +
|
|
'<span class="text-xs px-2 py-0.5 bg-muted rounded-full text-muted-foreground" id="indexTotalSize">-</span>' +
|
|
'<span id="indexHealthBadge" class="text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground animate-pulse">...</span>' +
|
|
'</div>' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<button onclick="loadIndexStatsForPage()" class="text-xs px-2 py-1 text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors" title="' + t('common.refresh') + '">' +
|
|
'<i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>' +
|
|
'</button>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
// Index Health Details
|
|
'<div id="indexHealthDetails" class="px-4 py-2 border-b border-border bg-muted/10 hidden">' +
|
|
'<div class="flex items-center justify-between text-xs">' +
|
|
'<div class="flex items-center gap-4">' +
|
|
'<span class="text-muted-foreground">Last indexed: <span id="indexLastUpdate">-</span></span>' +
|
|
'<span class="text-muted-foreground">Commits since: <span id="indexCommitsSince" class="font-medium">-</span></span>' +
|
|
'</div>' +
|
|
'<button class="text-primary hover:underline" onclick="runIncrementalUpdate()">Update Now</button>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="p-4">' +
|
|
'<div class="flex items-center gap-2 mb-3 text-xs text-muted-foreground">' +
|
|
'<i data-lucide="folder" class="w-3.5 h-3.5"></i>' +
|
|
'<span class="font-mono truncate" id="indexDirDisplay" title="' + indexDir + '">' + indexDir + '</span>' +
|
|
'</div>' +
|
|
'<div class="grid grid-cols-4 gap-3 mb-4">' +
|
|
'<div class="bg-muted/30 rounded-lg p-3 text-center">' +
|
|
'<div class="text-lg font-semibold text-foreground" id="indexProjectCount">-</div>' +
|
|
'<div class="text-xs text-muted-foreground">' + t('index.projects') + '</div>' +
|
|
'</div>' +
|
|
'<div class="bg-muted/30 rounded-lg p-3 text-center">' +
|
|
'<div class="text-lg font-semibold text-foreground" id="indexTotalSizeVal">-</div>' +
|
|
'<div class="text-xs text-muted-foreground">' + t('index.totalSize') + '</div>' +
|
|
'</div>' +
|
|
'<div class="bg-muted/30 rounded-lg p-3 text-center">' +
|
|
'<div class="text-lg font-semibold text-foreground" id="indexVectorCount">-</div>' +
|
|
'<div class="text-xs text-muted-foreground">' + t('index.vectorIndexes') + '</div>' +
|
|
'</div>' +
|
|
'<div class="bg-muted/30 rounded-lg p-3 text-center">' +
|
|
'<div class="text-lg font-semibold text-foreground" id="indexFtsCount">-</div>' +
|
|
'<div class="text-xs text-muted-foreground">' + t('index.ftsIndexes') + '</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="border border-border rounded-lg overflow-hidden">' +
|
|
'<table class="w-full text-sm">' +
|
|
'<thead class="bg-muted/50">' +
|
|
'<tr class="text-xs text-muted-foreground">' +
|
|
'<th class="py-2 px-2 text-left font-medium">' + t('index.projectId') + '</th>' +
|
|
'<th class="py-2 px-2 text-right font-medium">' + t('index.size') + '</th>' +
|
|
'<th class="py-2 px-2 text-center font-medium">' + t('index.type') + '</th>' +
|
|
'<th class="py-2 px-2 text-right font-medium">' + t('index.lastModified') + '</th>' +
|
|
'<th class="py-2 px-1 w-8"></th>' +
|
|
'</tr>' +
|
|
'</thead>' +
|
|
'<tbody id="indexTableBody">' +
|
|
'<tr><td colspan="5" class="py-4 text-center text-muted-foreground text-sm">' + t('common.loading') + '</td></tr>' +
|
|
'</tbody>' +
|
|
'</table>' +
|
|
'</div>' +
|
|
'<div class="mt-4 flex justify-end">' +
|
|
'<button onclick="cleanAllIndexesFromPage()" class="text-xs px-3 py-1.5 bg-destructive/10 text-destructive hover:bg-destructive/20 rounded transition-colors flex items-center gap-1.5">' +
|
|
'<i data-lucide="trash" class="w-3.5 h-3.5"></i>' +
|
|
t('index.cleanAll') +
|
|
'</button>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
// Test Search Section
|
|
'<div class="bg-card border border-border rounded-lg p-5">' +
|
|
'<h4 class="text-lg font-semibold mb-4 flex items-center gap-2"><i data-lucide="search" class="w-5 h-5 text-primary"></i> ' + t('codexlens.testSearch') + '</h4>' +
|
|
'<div class="space-y-4">' +
|
|
'<div class="flex gap-3">' +
|
|
'<select id="searchTypeSelect" class="flex-1 px-3 py-2 border border-border rounded-lg bg-background text-sm">' +
|
|
'<option value="search">' + t('codexlens.textSearch') + '</option>' +
|
|
'<option value="search_files">' + t('codexlens.fileSearch') + '</option>' +
|
|
'<option value="symbol">' + t('codexlens.symbolSearch') + '</option>' +
|
|
'</select>' +
|
|
'<select id="searchModeSelect" class="flex-1 px-3 py-2 border border-border rounded-lg bg-background text-sm">' +
|
|
'<option value="exact">' + t('codexlens.exactMode') + '</option>' +
|
|
'<option value="fuzzy">' + t('codexlens.fuzzyMode') + '</option>' +
|
|
'<option value="hybrid">' + t('codexlens.hybridMode') + '</option>' +
|
|
'<option value="vector">' + t('codexlens.vectorMode') + '</option>' +
|
|
'</select>' +
|
|
'</div>' +
|
|
'<div class="flex gap-3 items-center">' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<label class="text-xs text-muted-foreground whitespace-nowrap">' + t('codexlens.resultLimit') + '</label>' +
|
|
'<input type="number" id="searchLimitInput" class="w-16 px-2 py-1.5 border border-border rounded-lg bg-background text-sm text-center" value="5" min="1" max="50" />' +
|
|
'</div>' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<label class="text-xs text-muted-foreground whitespace-nowrap">' + t('codexlens.contentLength') + '</label>' +
|
|
'<input type="number" id="contentLengthInput" class="w-20 px-2 py-1.5 border border-border rounded-lg bg-background text-sm text-center" value="200" min="50" max="2000" />' +
|
|
'</div>' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<label class="text-xs text-muted-foreground whitespace-nowrap">' + t('codexlens.extraFiles') + '</label>' +
|
|
'<input type="number" id="extraFilesInput" class="w-16 px-2 py-1.5 border border-border rounded-lg bg-background text-sm text-center" value="10" min="0" max="50" />' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="flex gap-3">' +
|
|
'<input type="text" id="searchQueryInput" class="flex-1 px-3 py-2 border border-border rounded-lg bg-background text-sm" placeholder="' + t('codexlens.searchPlaceholder') + '" />' +
|
|
'<button class="btn-sm btn-primary" id="runSearchBtn"><i data-lucide="search" class="w-3.5 h-3.5"></i> ' + t('codexlens.runSearch') + '</button>' +
|
|
'</div>' +
|
|
'<div id="searchResults" class="hidden">' +
|
|
'<div class="flex items-center justify-between mb-2">' +
|
|
'<span class="text-sm font-medium">' + t('codexlens.results') + ':</span>' +
|
|
'<span id="searchResultCount" class="text-xs text-muted-foreground"></span>' +
|
|
'</div>' +
|
|
'<pre id="searchResultContent" class="bg-muted/50 border border-border p-3 rounded-lg text-xs overflow-auto max-h-64 font-mono"></pre>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
|
|
: // Not installed: Show install prompt
|
|
'<div class="bg-card border border-border rounded-lg p-8">' +
|
|
'<div class="text-center max-w-md mx-auto">' +
|
|
'<div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">' +
|
|
'<i data-lucide="database" class="w-8 h-8 text-primary"></i>' +
|
|
'</div>' +
|
|
'<h3 class="text-lg font-semibold mb-2">' + t('codexlens.installCodexLens') + '</h3>' +
|
|
'<p class="text-sm text-muted-foreground mb-6">' + t('codexlens.installFirst') + '</p>' +
|
|
'<button class="btn btn-primary" onclick="installCodexLensFromManager()">' +
|
|
'<i data-lucide="download" class="w-4 h-4"></i> ' + t('codexlens.installCodexLens') +
|
|
'</button>' +
|
|
'</div>' +
|
|
'</div>'
|
|
) +
|
|
'</div>';
|
|
}
|
|
|
|
/**
|
|
* Build model select options for the page
|
|
*/
|
|
function buildModelSelectOptionsForPage() {
|
|
var installedModels = window.cliToolsStatus?.codexlens?.installedModels || [];
|
|
var allModels = window.cliToolsStatus?.codexlens?.allModels || [];
|
|
|
|
if (allModels.length === 0) {
|
|
// Fallback to default models if not loaded
|
|
return '<option value="code">code (default)</option>' +
|
|
'<option value="fast">fast</option>';
|
|
}
|
|
|
|
var options = '';
|
|
allModels.forEach(function(model) {
|
|
var isInstalled = model.installed || installedModels.includes(model.profile);
|
|
var label = model.profile + (isInstalled ? ' ✓' : '');
|
|
var selected = model.profile === 'code' ? ' selected' : '';
|
|
options += '<option value="' + model.profile + '"' + selected + '>' + label + '</option>';
|
|
});
|
|
return options;
|
|
}
|
|
|
|
/**
|
|
* Validate concurrency input value (min 1, no max limit)
|
|
*/
|
|
function validateConcurrencyInput(input) {
|
|
var value = parseInt(input.value, 10);
|
|
if (isNaN(value) || value < 1) {
|
|
input.value = 1;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle embedding backend change
|
|
*/
|
|
function onEmbeddingBackendChange() {
|
|
var backendSelect = document.getElementById('pageBackendSelect');
|
|
var modelSelect = document.getElementById('pageModelSelect');
|
|
var concurrencySelector = document.getElementById('concurrencySelector');
|
|
var rotationSection = document.getElementById('rotationSection');
|
|
if (!backendSelect || !modelSelect) {
|
|
console.warn('[CodexLens] Backend or model select not found');
|
|
return;
|
|
}
|
|
|
|
var backend = backendSelect.value;
|
|
console.log('[CodexLens] Backend changed to:', backend);
|
|
console.log('[CodexLens] Current litellmApiConfig:', window.litellmApiConfig);
|
|
|
|
if (backend === 'litellm') {
|
|
// Load LiteLLM embedding models
|
|
console.log('[CodexLens] Building LiteLLM model options...');
|
|
var options = buildLiteLLMModelOptions();
|
|
console.log('[CodexLens] Built options HTML:', options);
|
|
modelSelect.innerHTML = options;
|
|
// Show concurrency selector for API backend
|
|
if (concurrencySelector) {
|
|
concurrencySelector.classList.remove('hidden');
|
|
}
|
|
// Show rotation section and load status
|
|
if (rotationSection) {
|
|
rotationSection.classList.remove('hidden');
|
|
loadRotationStatus();
|
|
}
|
|
} else {
|
|
// Load local fastembed models
|
|
modelSelect.innerHTML = buildModelSelectOptionsForPage();
|
|
// Hide concurrency selector for local backend
|
|
if (concurrencySelector) {
|
|
concurrencySelector.classList.add('hidden');
|
|
}
|
|
// Hide rotation section for local backend
|
|
if (rotationSection) {
|
|
rotationSection.classList.add('hidden');
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Build LiteLLM model options from config
|
|
*/
|
|
function buildLiteLLMModelOptions() {
|
|
var litellmConfig = window.litellmApiConfig || {};
|
|
console.log('[CodexLens] litellmApiConfig:', litellmConfig);
|
|
|
|
var providers = litellmConfig.providers || [];
|
|
console.log('[CodexLens] providers count:', providers.length);
|
|
|
|
var options = '';
|
|
|
|
providers.forEach(function(provider) {
|
|
console.log('[CodexLens] Processing provider:', provider.id, 'enabled:', provider.enabled);
|
|
if (!provider.enabled) return;
|
|
|
|
// Check embeddingModels array (config structure)
|
|
var models = provider.embeddingModels || provider.models || [];
|
|
console.log('[CodexLens] Provider', provider.id, 'embeddingModels:', models.length, models);
|
|
|
|
models.forEach(function(model) {
|
|
console.log('[CodexLens] Processing model:', model.id, 'type:', model.type, 'enabled:', model.enabled);
|
|
// Accept embedding type or models from embeddingModels array
|
|
if (model.type && model.type !== 'embedding') return;
|
|
if (!model.enabled) return;
|
|
var label = model.name || model.id;
|
|
var providerName = provider.name || provider.id;
|
|
var selected = options === '' ? ' selected' : '';
|
|
options += '<option value="' + model.id + '"' + selected + '>' + label + ' (' + providerName + ')</option>';
|
|
console.log('[CodexLens] Added option:', label, 'from', providerName);
|
|
});
|
|
});
|
|
|
|
if (options === '') {
|
|
console.warn('[CodexLens] No embedding models found in LiteLLM config');
|
|
options = '<option value="" disabled selected>' + (t('codexlens.noApiModels') || 'No API embedding models configured') + '</option>';
|
|
}
|
|
|
|
return options;
|
|
}
|
|
|
|
// Make functions globally accessible
|
|
window.onEmbeddingBackendChange = onEmbeddingBackendChange;
|
|
|
|
/**
|
|
* Initialize index from page - uses env-based config
|
|
* Model/backend configured in Environment Variables section
|
|
*/
|
|
function initCodexLensIndexFromPage(indexType) {
|
|
// For FTS-only index, no embedding config needed
|
|
if (indexType === 'normal') {
|
|
initCodexLensIndex(indexType);
|
|
} else {
|
|
// Use litellm backend with env-configured model (default 4 workers)
|
|
// The CLI will read EMBEDDING_MODEL/LITELLM_MODEL from env
|
|
initCodexLensIndex(indexType, null, 'litellm', 4);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Run incremental update on the current workspace index
|
|
*/
|
|
window.runIncrementalUpdate = async function runIncrementalUpdate() {
|
|
var projectPath = window.CCW_PROJECT_ROOT || '.';
|
|
|
|
showRefreshToast('Starting incremental update...', 'info');
|
|
|
|
try {
|
|
var response = await fetch('/api/codexlens/update', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ path: projectPath })
|
|
});
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
showRefreshToast('Incremental update completed', 'success');
|
|
} else {
|
|
showRefreshToast('Update failed: ' + (result.error || 'Unknown error'), 'error');
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast('Update error: ' + err.message, 'error');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Toggle file watcher (watchdog) on/off
|
|
*/
|
|
window.toggleWatcher = async function toggleWatcher() {
|
|
console.log('[CodexLens] toggleWatcher called');
|
|
// Debug: uncomment to test if function is called
|
|
// alert('toggleWatcher called!');
|
|
var projectPath = window.CCW_PROJECT_ROOT || '.';
|
|
console.log('[CodexLens] Project path:', projectPath);
|
|
|
|
// Check current status first
|
|
try {
|
|
console.log('[CodexLens] Checking watcher status...');
|
|
var statusResponse = await fetch('/api/codexlens/watch/status');
|
|
var statusResult = await statusResponse.json();
|
|
console.log('[CodexLens] Status result:', statusResult);
|
|
var isRunning = statusResult.success && statusResult.running;
|
|
|
|
// Toggle: if running, stop; if stopped, start
|
|
var action = isRunning ? 'stop' : 'start';
|
|
console.log('[CodexLens] Action:', action);
|
|
|
|
var response = await fetch('/api/codexlens/watch/' + action, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ path: projectPath })
|
|
});
|
|
var result = await response.json();
|
|
console.log('[CodexLens] Action result:', result);
|
|
|
|
if (result.success) {
|
|
var newRunning = action === 'start';
|
|
updateWatcherUI(newRunning);
|
|
showRefreshToast('File watcher ' + (newRunning ? 'started' : 'stopped'), 'success');
|
|
} else {
|
|
showRefreshToast('Watcher ' + action + ' failed: ' + (result.error || 'Unknown error'), 'error');
|
|
}
|
|
} catch (err) {
|
|
console.error('[CodexLens] Watcher error:', err);
|
|
showRefreshToast('Watcher error: ' + err.message, 'error');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Update watcher UI state
|
|
*/
|
|
function updateWatcherUI(running, stats) {
|
|
var statusBadge = document.getElementById('watcherStatusBadge');
|
|
if (statusBadge) {
|
|
var badgeClass = running ? 'bg-success/20 text-success' : 'bg-muted text-muted-foreground';
|
|
var badgeText = running ? 'Running' : 'Stopped';
|
|
var iconName = running ? 'pause' : 'play';
|
|
|
|
statusBadge.innerHTML =
|
|
'<span class="text-xs px-2 py-0.5 rounded-full ' + badgeClass + '">' + badgeText + '</span>' +
|
|
'<button class="btn-sm btn-outline" onclick="toggleWatcher()" id="watcherToggleBtn">' +
|
|
'<i data-lucide="' + iconName + '" class="w-3.5 h-3.5"></i>' +
|
|
'</button>';
|
|
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
|
|
// Update stats if provided
|
|
if (stats) {
|
|
var filesCount = document.getElementById('watcherFilesCount');
|
|
var changesCount = document.getElementById('watcherChangesCount');
|
|
var uptimeDisplay = document.getElementById('watcherUptimeDisplay');
|
|
|
|
if (filesCount) filesCount.textContent = stats.files_watched || '-';
|
|
if (changesCount) changesCount.textContent = stats.changes_detected || '0';
|
|
if (uptimeDisplay) uptimeDisplay.textContent = formatUptime(stats.uptime_seconds);
|
|
}
|
|
|
|
// Start or stop polling based on running state
|
|
if (running) {
|
|
startWatcherPolling();
|
|
} else {
|
|
stopWatcherPolling();
|
|
}
|
|
}
|
|
|
|
// Watcher polling interval
|
|
var watcherPollInterval = null;
|
|
var watcherStartTime = null;
|
|
var watcherChangesCount = 0;
|
|
|
|
/**
|
|
* Format uptime in human readable format
|
|
*/
|
|
function formatUptime(seconds) {
|
|
if (!seconds || seconds < 0) return '-';
|
|
if (seconds < 60) return Math.floor(seconds) + 's';
|
|
if (seconds < 3600) return Math.floor(seconds / 60) + 'm';
|
|
var hours = Math.floor(seconds / 3600);
|
|
var mins = Math.floor((seconds % 3600) / 60);
|
|
return hours + 'h ' + mins + 'm';
|
|
}
|
|
|
|
/**
|
|
* Start polling watcher status
|
|
*/
|
|
function startWatcherPolling() {
|
|
if (watcherPollInterval) return; // Already polling
|
|
|
|
watcherStartTime = Date.now();
|
|
watcherPollInterval = setInterval(async function() {
|
|
try {
|
|
var response = await fetch('/api/codexlens/watch/status');
|
|
var result = await response.json();
|
|
|
|
if (result.success && result.running) {
|
|
// Update uptime
|
|
var uptimeDisplay = document.getElementById('watcherUptimeDisplay');
|
|
if (uptimeDisplay) {
|
|
var uptime = (Date.now() - watcherStartTime) / 1000;
|
|
uptimeDisplay.textContent = formatUptime(uptime);
|
|
}
|
|
|
|
// Update files count if available
|
|
if (result.files_watched !== undefined) {
|
|
var filesCount = document.getElementById('watcherFilesCount');
|
|
if (filesCount) filesCount.textContent = result.files_watched;
|
|
}
|
|
|
|
// Check for new events
|
|
if (result.recent_events && result.recent_events.length > 0) {
|
|
result.recent_events.forEach(function(event) {
|
|
addWatcherLogEntry(event.type, event.path);
|
|
});
|
|
}
|
|
} else if (!result.running) {
|
|
// Watcher stopped externally
|
|
updateWatcherUI(false);
|
|
stopWatcherPolling();
|
|
}
|
|
} catch (err) {
|
|
console.warn('[Watcher] Poll error:', err);
|
|
}
|
|
}, 3000); // Poll every 3 seconds
|
|
}
|
|
|
|
/**
|
|
* Stop polling watcher status
|
|
*/
|
|
function stopWatcherPolling() {
|
|
if (watcherPollInterval) {
|
|
clearInterval(watcherPollInterval);
|
|
watcherPollInterval = null;
|
|
}
|
|
watcherStartTime = null;
|
|
}
|
|
|
|
/**
|
|
* Add entry to watcher activity log
|
|
*/
|
|
function addWatcherLogEntry(type, path) {
|
|
var logContainer = document.getElementById('watcherActivityLog');
|
|
if (!logContainer) return;
|
|
|
|
// Clear "no activity" message if present
|
|
var noActivity = logContainer.querySelector('.text-muted-foreground:only-child');
|
|
if (noActivity && noActivity.textContent.includes('No activity')) {
|
|
logContainer.innerHTML = '';
|
|
}
|
|
|
|
// Increment changes count
|
|
watcherChangesCount++;
|
|
var changesCount = document.getElementById('watcherChangesCount');
|
|
if (changesCount) changesCount.textContent = watcherChangesCount;
|
|
|
|
// Create log entry
|
|
var timestamp = new Date().toLocaleTimeString();
|
|
var typeColors = {
|
|
'created': 'text-success',
|
|
'modified': 'text-warning',
|
|
'deleted': 'text-destructive',
|
|
'renamed': 'text-primary'
|
|
};
|
|
var typeIcons = {
|
|
'created': '+',
|
|
'modified': '~',
|
|
'deleted': '-',
|
|
'renamed': '→'
|
|
};
|
|
|
|
var colorClass = typeColors[type] || 'text-muted-foreground';
|
|
var icon = typeIcons[type] || '•';
|
|
|
|
// Get just the filename
|
|
var filename = path.split(/[/\\]/).pop();
|
|
|
|
var entry = document.createElement('div');
|
|
entry.className = 'flex items-center gap-2 py-0.5';
|
|
entry.innerHTML =
|
|
'<span class="text-muted-foreground">' + timestamp + '</span>' +
|
|
'<span class="' + colorClass + ' font-bold">' + icon + '</span>' +
|
|
'<span class="truncate" title="' + escapeHtml(path) + '">' + escapeHtml(filename) + '</span>';
|
|
|
|
// Add to top of log
|
|
logContainer.insertBefore(entry, logContainer.firstChild);
|
|
|
|
// Keep only last 50 entries
|
|
while (logContainer.children.length > 50) {
|
|
logContainer.removeChild(logContainer.lastChild);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Clear watcher activity log
|
|
*/
|
|
function clearWatcherLog() {
|
|
var logContainer = document.getElementById('watcherActivityLog');
|
|
if (logContainer) {
|
|
logContainer.innerHTML = '<div class="text-muted-foreground">Log cleared. Waiting for file changes...</div>';
|
|
}
|
|
watcherChangesCount = 0;
|
|
var changesCount = document.getElementById('watcherChangesCount');
|
|
if (changesCount) changesCount.textContent = '0';
|
|
}
|
|
|
|
/**
|
|
* Initialize watcher status on page load
|
|
*/
|
|
async function initWatcherStatus() {
|
|
try {
|
|
var response = await fetch('/api/codexlens/watch/status');
|
|
var result = await response.json();
|
|
if (result.success) {
|
|
updateWatcherUI(result.running, {
|
|
files_watched: result.files_watched,
|
|
changes_detected: 0,
|
|
uptime_seconds: result.uptime_seconds
|
|
});
|
|
}
|
|
} catch (err) {
|
|
console.warn('[Watcher] Failed to get initial status:', err);
|
|
}
|
|
}
|
|
|
|
// Make functions globally accessible
|
|
window.runIncrementalUpdate = runIncrementalUpdate;
|
|
window.toggleWatcher = toggleWatcher;
|
|
window.updateWatcherUI = updateWatcherUI;
|
|
window.addWatcherLogEntry = addWatcherLogEntry;
|
|
window.clearWatcherLog = clearWatcherLog;
|
|
window.initWatcherStatus = initWatcherStatus;
|
|
|
|
/**
|
|
* Initialize CodexLens Manager page event handlers
|
|
*/
|
|
function initCodexLensManagerPageEvents(currentConfig) {
|
|
var saveBtn = document.getElementById('saveIndexPathBtn');
|
|
if (saveBtn) {
|
|
saveBtn.onclick = async function() {
|
|
var indexDirInput = document.getElementById('indexDirInput');
|
|
var newIndexDir = indexDirInput ? indexDirInput.value.trim() : '';
|
|
if (!newIndexDir) { showRefreshToast(t('codexlens.pathEmpty'), 'error'); return; }
|
|
if (newIndexDir === currentConfig.index_dir) { showRefreshToast(t('codexlens.pathUnchanged'), 'info'); return; }
|
|
saveBtn.disabled = true;
|
|
saveBtn.innerHTML = '<span class="animate-pulse">' + t('common.saving') + '</span>';
|
|
try {
|
|
var response = await fetch('/api/codexlens/config', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ index_dir: newIndexDir }) });
|
|
var result = await response.json();
|
|
if (result.success) { showRefreshToast(t('codexlens.configSaved'), 'success'); renderCodexLensManager(); }
|
|
else { showRefreshToast(t('common.saveFailed') + ': ' + result.error, 'error'); }
|
|
} catch (err) { showRefreshToast(t('common.error') + ': ' + err.message, 'error'); }
|
|
saveBtn.disabled = false;
|
|
saveBtn.innerHTML = '<i data-lucide="save" class="w-3.5 h-3.5"></i> ' + t('codexlens.saveConfig');
|
|
if (window.lucide) lucide.createIcons();
|
|
};
|
|
}
|
|
|
|
var runSearchBtn = document.getElementById('runSearchBtn');
|
|
if (runSearchBtn) {
|
|
runSearchBtn.onclick = async function() {
|
|
var searchType = document.getElementById('searchTypeSelect').value;
|
|
var searchMode = document.getElementById('searchModeSelect').value;
|
|
var query = document.getElementById('searchQueryInput').value.trim();
|
|
var resultsDiv = document.getElementById('searchResults');
|
|
var resultCount = document.getElementById('searchResultCount');
|
|
var resultContent = document.getElementById('searchResultContent');
|
|
if (!query) { showRefreshToast(t('codexlens.enterQuery'), 'warning'); return; }
|
|
runSearchBtn.disabled = true;
|
|
runSearchBtn.innerHTML = '<span class="animate-pulse">' + t('codexlens.searching') + '</span>';
|
|
resultsDiv.classList.add('hidden');
|
|
try {
|
|
var endpoint = '/api/codexlens/' + searchType;
|
|
var params = new URLSearchParams({ query: query, limit: '20' });
|
|
if (searchType === 'search' || searchType === 'search_files') { params.append('mode', searchMode); }
|
|
var response = await fetch(endpoint + '?' + params.toString());
|
|
var result = await response.json();
|
|
if (result.success) {
|
|
var results = result.results || result.files || [];
|
|
resultCount.textContent = results.length + ' ' + t('codexlens.resultsCount');
|
|
resultContent.textContent = JSON.stringify(results, null, 2);
|
|
resultsDiv.classList.remove('hidden');
|
|
} else {
|
|
resultContent.textContent = t('common.error') + ': ' + (result.error || t('common.unknownError'));
|
|
resultsDiv.classList.remove('hidden');
|
|
}
|
|
} catch (err) {
|
|
resultContent.textContent = t('common.exception') + ': ' + err.message;
|
|
resultsDiv.classList.remove('hidden');
|
|
}
|
|
runSearchBtn.disabled = false;
|
|
runSearchBtn.innerHTML = '<i data-lucide="search" class="w-3.5 h-3.5"></i> ' + t('codexlens.runSearch');
|
|
if (window.lucide) lucide.createIcons();
|
|
};
|
|
}
|
|
|
|
var searchInput = document.getElementById('searchQueryInput');
|
|
if (searchInput) { searchInput.onkeypress = function(e) { if (e.key === 'Enter' && runSearchBtn) { runSearchBtn.click(); } }; }
|
|
}
|
|
|
|
/**
|
|
* Show index initialization modal
|
|
*/
|
|
function showIndexInitModal() {
|
|
// Use initCodexLensIndex with default settings
|
|
initCodexLensIndex('vector', 'code');
|
|
}
|
|
|
|
/**
|
|
* Load index stats for the CodexLens Manager page
|
|
*/
|
|
async function loadIndexStatsForPage() {
|
|
try {
|
|
var response = await fetch('/api/codexlens/indexes');
|
|
if (!response.ok) throw new Error('Failed to load index stats');
|
|
var data = await response.json();
|
|
renderIndexStatsForPage(data);
|
|
} catch (err) {
|
|
console.error('[CodexLens] Failed to load index stats:', err);
|
|
var tbody = document.getElementById('indexTableBody');
|
|
if (tbody) {
|
|
tbody.innerHTML = '<tr><td colspan="5" class="py-4 text-center text-destructive text-sm">' + escapeHtml(err.message) + '</td></tr>';
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Render index stats in the CodexLens Manager page
|
|
*/
|
|
function renderIndexStatsForPage(data) {
|
|
var summary = data.summary || {};
|
|
var indexes = data.indexes || [];
|
|
var indexDir = data.indexDir || '';
|
|
|
|
// Update summary stats
|
|
var totalSizeEl = document.getElementById('indexTotalSize');
|
|
var projectCountEl = document.getElementById('indexProjectCount');
|
|
var totalSizeValEl = document.getElementById('indexTotalSizeVal');
|
|
var vectorCountEl = document.getElementById('indexVectorCount');
|
|
var ftsCountEl = document.getElementById('indexFtsCount');
|
|
var indexDirEl = document.getElementById('indexDirDisplay');
|
|
|
|
if (totalSizeEl) totalSizeEl.textContent = summary.totalSizeFormatted || '0 B';
|
|
if (projectCountEl) projectCountEl.textContent = summary.totalProjects || 0;
|
|
if (totalSizeValEl) totalSizeValEl.textContent = summary.totalSizeFormatted || '0 B';
|
|
if (vectorCountEl) vectorCountEl.textContent = summary.vectorIndexCount || 0;
|
|
if (ftsCountEl) ftsCountEl.textContent = summary.normalIndexCount || 0;
|
|
if (indexDirEl && indexDir) {
|
|
indexDirEl.textContent = indexDir;
|
|
indexDirEl.title = indexDir;
|
|
}
|
|
|
|
// Render table rows
|
|
var tbody = document.getElementById('indexTableBody');
|
|
if (!tbody) return;
|
|
|
|
if (indexes.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="5" class="py-4 text-center text-muted-foreground text-sm">' + (t('index.noIndexes') || 'No indexes yet') + '</td></tr>';
|
|
return;
|
|
}
|
|
|
|
var rows = '';
|
|
indexes.forEach(function(idx) {
|
|
var vectorBadge = idx.hasVectorIndex
|
|
? '<span class="text-xs px-1.5 py-0.5 bg-primary/10 text-primary rounded">' + (t('index.vector') || 'Vector') + '</span>'
|
|
: '';
|
|
var normalBadge = idx.hasNormalIndex
|
|
? '<span class="text-xs px-1.5 py-0.5 bg-muted text-muted-foreground rounded">' + (t('index.fts') || 'FTS') + '</span>'
|
|
: '';
|
|
|
|
rows += '<tr class="border-t border-border hover:bg-muted/30 transition-colors">' +
|
|
'<td class="py-2 px-2 text-foreground">' +
|
|
'<span class="font-mono text-xs truncate max-w-[250px] inline-block" title="' + escapeHtml(idx.id) + '">' + escapeHtml(idx.id) + '</span>' +
|
|
'</td>' +
|
|
'<td class="py-2 px-2 text-right text-muted-foreground">' + (idx.sizeFormatted || '-') + '</td>' +
|
|
'<td class="py-2 px-2 text-center"><div class="flex items-center justify-center gap-1">' + vectorBadge + normalBadge + '</div></td>' +
|
|
'<td class="py-2 px-2 text-right text-muted-foreground">' + formatTimeAgoSimple(idx.lastModified) + '</td>' +
|
|
'<td class="py-2 px-1 text-center">' +
|
|
'<button onclick="cleanIndexProjectFromPage(\'' + escapeHtml(idx.id) + '\')" ' +
|
|
'class="text-destructive/70 hover:text-destructive p-1 rounded hover:bg-destructive/10 transition-colors" ' +
|
|
'title="' + (t('index.cleanProject') || 'Clean Index') + '">' +
|
|
'<i data-lucide="trash-2" class="w-3.5 h-3.5"></i>' +
|
|
'</button>' +
|
|
'</td>' +
|
|
'</tr>';
|
|
});
|
|
|
|
tbody.innerHTML = rows;
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
|
|
/**
|
|
* Simple time ago formatter
|
|
*/
|
|
function formatTimeAgoSimple(isoString) {
|
|
if (!isoString) return t('common.never') || 'Never';
|
|
var date = new Date(isoString);
|
|
var now = new Date();
|
|
var diffMs = now - date;
|
|
var diffMins = Math.floor(diffMs / 60000);
|
|
var diffHours = Math.floor(diffMins / 60);
|
|
var diffDays = Math.floor(diffHours / 24);
|
|
if (diffMins < 1) return t('common.justNow') || 'Just now';
|
|
if (diffMins < 60) return diffMins + 'm ' + (t('common.ago') || 'ago');
|
|
if (diffHours < 24) return diffHours + 'h ' + (t('common.ago') || 'ago');
|
|
if (diffDays < 30) return diffDays + 'd ' + (t('common.ago') || 'ago');
|
|
return date.toLocaleDateString();
|
|
}
|
|
|
|
/**
|
|
* Check and display index health for current workspace
|
|
*/
|
|
async function checkIndexHealth() {
|
|
var healthBadge = document.getElementById('indexHealthBadge');
|
|
var healthDetails = document.getElementById('indexHealthDetails');
|
|
var lastUpdateEl = document.getElementById('indexLastUpdate');
|
|
var commitsSinceEl = document.getElementById('indexCommitsSince');
|
|
|
|
if (!healthBadge) return;
|
|
|
|
try {
|
|
// Get current workspace index info
|
|
var indexResponse = await fetch('/api/codexlens/indexes');
|
|
var indexData = await indexResponse.json();
|
|
var indexes = indexData.indexes || [];
|
|
|
|
// Find current workspace index (newest one or matching current path)
|
|
var currentIndex = indexes.length > 0 ? indexes[0] : null;
|
|
|
|
if (!currentIndex) {
|
|
healthBadge.className = 'text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground';
|
|
healthBadge.textContent = 'No Index';
|
|
if (healthDetails) healthDetails.classList.add('hidden');
|
|
return;
|
|
}
|
|
|
|
var lastIndexTime = currentIndex.lastModified ? new Date(currentIndex.lastModified) : null;
|
|
|
|
// Get git commits since last index
|
|
var commitsSince = 0;
|
|
try {
|
|
var gitResponse = await fetch('/api/git/commits-since?since=' + encodeURIComponent(currentIndex.lastModified || ''));
|
|
var gitData = await gitResponse.json();
|
|
commitsSince = gitData.count || 0;
|
|
} catch (gitErr) {
|
|
console.warn('[CodexLens] Could not get git history:', gitErr);
|
|
// Fallback: estimate based on time
|
|
if (lastIndexTime) {
|
|
var hoursSince = (Date.now() - lastIndexTime.getTime()) / (1000 * 60 * 60);
|
|
commitsSince = Math.floor(hoursSince / 2); // Rough estimate
|
|
}
|
|
}
|
|
|
|
// Determine health status
|
|
var healthStatus = 'good';
|
|
var healthText = 'Up to date';
|
|
var healthClass = 'bg-success/20 text-success';
|
|
|
|
if (commitsSince > 50 || (lastIndexTime && (Date.now() - lastIndexTime.getTime()) > 7 * 24 * 60 * 60 * 1000)) {
|
|
// More than 50 commits or 7 days old
|
|
healthStatus = 'outdated';
|
|
healthText = 'Outdated';
|
|
healthClass = 'bg-destructive/20 text-destructive';
|
|
} else if (commitsSince > 10 || (lastIndexTime && (Date.now() - lastIndexTime.getTime()) > 24 * 60 * 60 * 1000)) {
|
|
// More than 10 commits or 1 day old
|
|
healthStatus = 'stale';
|
|
healthText = 'Stale';
|
|
healthClass = 'bg-warning/20 text-warning';
|
|
}
|
|
|
|
// Update badge
|
|
healthBadge.className = 'text-xs px-2 py-0.5 rounded-full ' + healthClass;
|
|
healthBadge.textContent = healthText;
|
|
|
|
// Update details section
|
|
if (healthDetails && healthStatus !== 'good') {
|
|
healthDetails.classList.remove('hidden');
|
|
if (lastUpdateEl) lastUpdateEl.textContent = lastIndexTime ? formatTimeAgoSimple(currentIndex.lastModified) : 'Unknown';
|
|
if (commitsSinceEl) {
|
|
commitsSinceEl.textContent = commitsSince;
|
|
commitsSinceEl.className = 'font-medium ' + (commitsSince > 20 ? 'text-destructive' : commitsSince > 5 ? 'text-warning' : 'text-foreground');
|
|
}
|
|
} else if (healthDetails) {
|
|
healthDetails.classList.add('hidden');
|
|
}
|
|
|
|
} catch (err) {
|
|
console.error('[CodexLens] Failed to check index health:', err);
|
|
healthBadge.className = 'text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground';
|
|
healthBadge.textContent = 'Unknown';
|
|
}
|
|
}
|
|
|
|
// Make function globally accessible
|
|
window.checkIndexHealth = checkIndexHealth;
|
|
|
|
/**
|
|
* Clean a specific project's index from the page
|
|
*/
|
|
async function cleanIndexProjectFromPage(projectId) {
|
|
if (!confirm((t('index.cleanProjectConfirm') || 'Clean index for') + ' ' + projectId + '?')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
showRefreshToast(t('index.cleaning') || 'Cleaning index...', 'info');
|
|
|
|
var response = await fetch('/api/codexlens/clean', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ projectId: projectId })
|
|
});
|
|
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
showRefreshToast(t('index.cleanSuccess') || 'Index cleaned successfully', 'success');
|
|
await loadIndexStatsForPage();
|
|
} else {
|
|
showRefreshToast((t('index.cleanFailed') || 'Clean failed') + ': ' + result.error, 'error');
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast((t('common.error') || 'Error') + ': ' + err.message, 'error');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Clean all indexes from the page
|
|
*/
|
|
async function cleanAllIndexesFromPage() {
|
|
if (!confirm(t('index.cleanAllConfirm') || 'Are you sure you want to clean ALL indexes? This cannot be undone.')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
showRefreshToast(t('index.cleaning') || 'Cleaning indexes...', 'info');
|
|
|
|
var response = await fetch('/api/codexlens/clean', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ all: true })
|
|
});
|
|
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
showRefreshToast(t('index.cleanAllSuccess') || 'All indexes cleaned', 'success');
|
|
await loadIndexStatsForPage();
|
|
} else {
|
|
showRefreshToast((t('index.cleanFailed') || 'Clean failed') + ': ' + result.error, 'error');
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast((t('common.error') || 'Error') + ': ' + err.message, 'error');
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// MULTI-PROVIDER ROTATION CONFIGURATION
|
|
// ============================================================
|
|
|
|
/**
|
|
* Load and display rotation status in the page
|
|
*/
|
|
async function loadRotationStatus() {
|
|
try {
|
|
// Load from unified embedding-pool API (handles both new and legacy config)
|
|
var response = await fetch('/api/litellm-api/embedding-pool');
|
|
if (!response.ok) {
|
|
console.warn('[CodexLens] Failed to load embedding pool config:', response.status);
|
|
return;
|
|
}
|
|
var data = await response.json();
|
|
window.embeddingPoolConfig = data.poolConfig;
|
|
window.embeddingPoolAvailableModels = data.availableModels || [];
|
|
|
|
// Also get endpoint count
|
|
var endpointsResponse = await fetch('/api/litellm-api/codexlens/rotation/endpoints');
|
|
var endpointsData = endpointsResponse.ok ? await endpointsResponse.json() : { count: 0 };
|
|
|
|
updateRotationStatusDisplay(data.poolConfig, endpointsData.count);
|
|
} catch (err) {
|
|
console.error('[CodexLens] Error loading rotation status:', err);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Update the rotation status display in the page
|
|
* @param {Object} poolConfig - The embedding pool configuration
|
|
* @param {number} endpointCount - Number of active endpoints
|
|
*/
|
|
function updateRotationStatusDisplay(poolConfig, endpointCount) {
|
|
var badge = document.getElementById('rotationStatusBadge');
|
|
var detailsEl = document.getElementById('rotationDetails');
|
|
var modelNameEl = document.getElementById('rotationModelName');
|
|
var countEl = document.getElementById('rotationEndpointCount');
|
|
|
|
if (!badge) return;
|
|
|
|
if (poolConfig && poolConfig.enabled) {
|
|
badge.textContent = t('common.enabled');
|
|
badge.className = 'text-xs px-2 py-0.5 rounded-full bg-success/10 text-success';
|
|
|
|
// Show details
|
|
if (detailsEl) {
|
|
detailsEl.classList.remove('hidden');
|
|
if (modelNameEl) modelNameEl.textContent = poolConfig.targetModel || '';
|
|
if (countEl) countEl.textContent = (endpointCount || 0) + ' ' + t('codexlens.totalEndpoints').toLowerCase();
|
|
}
|
|
} else {
|
|
badge.textContent = t('common.disabled');
|
|
badge.className = 'text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground';
|
|
if (detailsEl) detailsEl.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Navigate to API Settings Embedding Pool tab
|
|
*/
|
|
function navigateToApiSettingsEmbeddingPool() {
|
|
// Navigate to API Settings page with embedding-pool tab
|
|
if (typeof switchView === 'function') {
|
|
switchView('api-settings');
|
|
// Give time for page to render, then switch to embedding-pool tab
|
|
setTimeout(function() {
|
|
if (typeof switchSidebarTab === 'function') {
|
|
switchSidebarTab('embedding-pool');
|
|
}
|
|
}, 100);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Show the rotation configuration modal
|
|
*/
|
|
async function showRotationConfigModal() {
|
|
try {
|
|
// Load current config if not already loaded
|
|
if (!window.rotationConfig) {
|
|
await loadRotationStatus();
|
|
}
|
|
|
|
var rotationConfig = window.rotationConfig || {
|
|
enabled: false,
|
|
strategy: 'round_robin',
|
|
defaultCooldown: 60,
|
|
targetModel: 'qwen3-embedding',
|
|
providers: []
|
|
};
|
|
var availableProviders = window.availableRotationProviders || [];
|
|
|
|
var modalHtml = buildRotationConfigModal(rotationConfig, availableProviders);
|
|
|
|
var tempContainer = document.createElement('div');
|
|
tempContainer.innerHTML = modalHtml;
|
|
var modal = tempContainer.firstElementChild;
|
|
document.body.appendChild(modal);
|
|
|
|
if (window.lucide) lucide.createIcons();
|
|
initRotationConfigEvents(rotationConfig, availableProviders);
|
|
} catch (err) {
|
|
showRefreshToast(t('common.error') + ': ' + err.message, 'error');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Build the rotation configuration modal HTML
|
|
*/
|
|
function buildRotationConfigModal(rotationConfig, availableProviders) {
|
|
var isEnabled = rotationConfig.enabled || false;
|
|
var strategy = rotationConfig.strategy || 'round_robin';
|
|
var cooldown = rotationConfig.defaultCooldown || 60;
|
|
var targetModel = rotationConfig.targetModel || 'qwen3-embedding';
|
|
var configuredProviders = rotationConfig.providers || [];
|
|
|
|
// Build provider list HTML
|
|
var providerListHtml = '';
|
|
if (availableProviders.length === 0) {
|
|
providerListHtml = '<div class="text-sm text-muted-foreground py-4 text-center">' + t('codexlens.noRotationProviders') + '</div>';
|
|
} else {
|
|
availableProviders.forEach(function(provider, index) {
|
|
// Find if this provider is already configured
|
|
var configured = configuredProviders.find(function(p) { return p.providerId === provider.providerId; });
|
|
var isProviderEnabled = configured ? configured.enabled : false;
|
|
var weight = configured ? configured.weight : 1;
|
|
var maxConcurrent = configured ? configured.maxConcurrentPerKey : 4;
|
|
var useAllKeys = configured ? configured.useAllKeys : true;
|
|
|
|
// Get model options
|
|
var modelOptions = provider.embeddingModels.map(function(m) {
|
|
var selected = configured && configured.modelId === m.modelId ? 'selected' : '';
|
|
return '<option value="' + m.modelId + '" ' + selected + '>' + m.modelName + ' (' + m.dimensions + 'd)</option>';
|
|
}).join('');
|
|
|
|
// Get key count
|
|
var keyCount = provider.apiKeys.filter(function(k) { return k.enabled; }).length;
|
|
|
|
providerListHtml +=
|
|
'<div class="border border-border rounded-lg p-3 ' + (isProviderEnabled ? 'bg-success/5 border-success/30' : 'bg-muted/30') + '" data-provider-id="' + provider.providerId + '">' +
|
|
'<div class="flex items-center justify-between mb-2">' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<input type="checkbox" id="rotationProvider_' + index + '" ' + (isProviderEnabled ? 'checked' : '') +
|
|
' class="rotation-provider-toggle" data-provider-id="' + provider.providerId + '" />' +
|
|
'<label for="rotationProvider_' + index + '" class="font-medium text-sm">' + provider.providerName + '</label>' +
|
|
'<span class="text-xs px-1.5 py-0.5 bg-muted rounded text-muted-foreground">' + keyCount + ' keys</span>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="grid grid-cols-2 gap-2 text-xs">' +
|
|
'<div>' +
|
|
'<label class="text-muted-foreground">Model</label>' +
|
|
'<select class="w-full px-2 py-1 border border-border rounded bg-background text-sm rotation-model-select" data-provider-id="' + provider.providerId + '">' +
|
|
modelOptions +
|
|
'</select>' +
|
|
'</div>' +
|
|
'<div>' +
|
|
'<label class="text-muted-foreground">' + t('codexlens.providerWeight') + '</label>' +
|
|
'<input type="number" min="0.1" max="10" step="0.1" value="' + weight + '" ' +
|
|
'class="w-full px-2 py-1 border border-border rounded bg-background text-sm rotation-weight-input" data-provider-id="' + provider.providerId + '" />' +
|
|
'</div>' +
|
|
'<div>' +
|
|
'<label class="text-muted-foreground">' + t('codexlens.maxConcurrentPerKey') + '</label>' +
|
|
'<input type="number" min="1" max="16" value="' + maxConcurrent + '" ' +
|
|
'class="w-full px-2 py-1 border border-border rounded bg-background text-sm rotation-concurrent-input" data-provider-id="' + provider.providerId + '" />' +
|
|
'</div>' +
|
|
'<div class="flex items-center gap-1">' +
|
|
'<input type="checkbox" id="useAllKeys_' + index + '" ' + (useAllKeys ? 'checked' : '') +
|
|
' class="rotation-use-all-keys" data-provider-id="' + provider.providerId + '" />' +
|
|
'<label for="useAllKeys_' + index + '" class="text-muted-foreground">' + t('codexlens.useAllKeys') + '</label>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
});
|
|
}
|
|
|
|
return '<div class="modal-backdrop" id="rotationConfigModal">' +
|
|
'<div class="modal-container max-w-2xl">' +
|
|
'<div class="modal-header">' +
|
|
'<div class="flex items-center gap-3">' +
|
|
'<div class="modal-icon">' +
|
|
'<i data-lucide="rotate-cw" class="w-5 h-5"></i>' +
|
|
'</div>' +
|
|
'<div>' +
|
|
'<h2 class="text-lg font-bold">' + t('codexlens.rotation') + '</h2>' +
|
|
'<p class="text-xs text-muted-foreground">' + t('codexlens.rotationDesc') + '</p>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<button onclick="closeRotationModal()" class="text-muted-foreground hover:text-foreground">' +
|
|
'<i data-lucide="x" class="w-5 h-5"></i>' +
|
|
'</button>' +
|
|
'</div>' +
|
|
'<div class="modal-body space-y-4">' +
|
|
// Enable toggle
|
|
'<div class="flex items-center justify-between p-3 bg-muted/30 rounded-lg">' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<i data-lucide="power" class="w-4 h-4 text-primary"></i>' +
|
|
'<span class="font-medium">' + t('codexlens.rotationEnabled') + '</span>' +
|
|
'</div>' +
|
|
'<label class="relative inline-flex items-center cursor-pointer">' +
|
|
'<input type="checkbox" id="rotationEnabledToggle" ' + (isEnabled ? 'checked' : '') + ' class="sr-only peer" />' +
|
|
'<div class="w-11 h-6 bg-muted peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[\'\'] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>' +
|
|
'</label>' +
|
|
'</div>' +
|
|
// Strategy and settings
|
|
'<div class="grid grid-cols-2 gap-4">' +
|
|
'<div>' +
|
|
'<label class="block text-sm font-medium mb-1.5">' + t('codexlens.rotationStrategy') + '</label>' +
|
|
'<select id="rotationStrategy" class="w-full px-3 py-2 border border-border rounded-lg bg-background text-sm">' +
|
|
'<option value="round_robin" ' + (strategy === 'round_robin' ? 'selected' : '') + '>' + t('codexlens.strategyRoundRobin') + '</option>' +
|
|
'<option value="latency_aware" ' + (strategy === 'latency_aware' ? 'selected' : '') + '>' + t('codexlens.strategyLatencyAware') + '</option>' +
|
|
'<option value="weighted_random" ' + (strategy === 'weighted_random' ? 'selected' : '') + '>' + t('codexlens.strategyWeightedRandom') + '</option>' +
|
|
'</select>' +
|
|
'</div>' +
|
|
'<div>' +
|
|
'<label class="block text-sm font-medium mb-1.5">' + t('codexlens.cooldownSeconds') + '</label>' +
|
|
'<input type="number" id="rotationCooldown" min="1" max="300" value="' + cooldown + '" ' +
|
|
'class="w-full px-3 py-2 border border-border rounded-lg bg-background text-sm" />' +
|
|
'<p class="text-xs text-muted-foreground mt-1">' + t('codexlens.cooldownHint') + '</p>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
// Target model
|
|
'<div>' +
|
|
'<label class="block text-sm font-medium mb-1.5">' + t('codexlens.targetModel') + '</label>' +
|
|
'<input type="text" id="rotationTargetModel" value="' + targetModel + '" ' +
|
|
'class="w-full px-3 py-2 border border-border rounded-lg bg-background text-sm" placeholder="qwen3-embedding" />' +
|
|
'<p class="text-xs text-muted-foreground mt-1">' + t('codexlens.targetModelHint') + '</p>' +
|
|
'</div>' +
|
|
// Provider list
|
|
'<div>' +
|
|
'<label class="block text-sm font-medium mb-1.5">' + t('codexlens.rotationProviders') + '</label>' +
|
|
'<div class="space-y-2 max-h-64 overflow-y-auto" id="rotationProviderList">' +
|
|
providerListHtml +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="modal-footer">' +
|
|
'<button onclick="closeRotationModal()" class="btn btn-outline">' + t('common.cancel') + '</button>' +
|
|
'<button onclick="saveRotationConfig()" class="btn btn-primary">' +
|
|
'<i data-lucide="save" class="w-4 h-4"></i> ' + t('common.save') +
|
|
'</button>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
}
|
|
|
|
/**
|
|
* Initialize rotation config modal events
|
|
*/
|
|
function initRotationConfigEvents(rotationConfig, availableProviders) {
|
|
// Store in window for save function
|
|
window._rotationAvailableProviders = availableProviders;
|
|
}
|
|
|
|
/**
|
|
* Close the rotation config modal
|
|
*/
|
|
function closeRotationModal() {
|
|
var modal = document.getElementById('rotationConfigModal');
|
|
if (modal) modal.remove();
|
|
}
|
|
|
|
/**
|
|
* Save the rotation configuration
|
|
*/
|
|
async function saveRotationConfig() {
|
|
try {
|
|
var enabledToggle = document.getElementById('rotationEnabledToggle');
|
|
var strategySelect = document.getElementById('rotationStrategy');
|
|
var cooldownInput = document.getElementById('rotationCooldown');
|
|
var targetModelInput = document.getElementById('rotationTargetModel');
|
|
|
|
var enabled = enabledToggle ? enabledToggle.checked : false;
|
|
var strategy = strategySelect ? strategySelect.value : 'round_robin';
|
|
var cooldown = cooldownInput ? parseInt(cooldownInput.value, 10) : 60;
|
|
var targetModel = targetModelInput ? targetModelInput.value.trim() : 'qwen3-embedding';
|
|
|
|
// Collect provider configurations
|
|
var providers = [];
|
|
var providerToggles = document.querySelectorAll('.rotation-provider-toggle');
|
|
providerToggles.forEach(function(toggle) {
|
|
var providerId = toggle.getAttribute('data-provider-id');
|
|
var isEnabled = toggle.checked;
|
|
|
|
var modelSelect = document.querySelector('.rotation-model-select[data-provider-id="' + providerId + '"]');
|
|
var weightInput = document.querySelector('.rotation-weight-input[data-provider-id="' + providerId + '"]');
|
|
var concurrentInput = document.querySelector('.rotation-concurrent-input[data-provider-id="' + providerId + '"]');
|
|
var useAllKeysToggle = document.querySelector('.rotation-use-all-keys[data-provider-id="' + providerId + '"]');
|
|
|
|
providers.push({
|
|
providerId: providerId,
|
|
modelId: modelSelect ? modelSelect.value : '',
|
|
weight: weightInput ? parseFloat(weightInput.value) || 1 : 1,
|
|
maxConcurrentPerKey: concurrentInput ? parseInt(concurrentInput.value, 10) || 4 : 4,
|
|
useAllKeys: useAllKeysToggle ? useAllKeysToggle.checked : true,
|
|
enabled: isEnabled
|
|
});
|
|
});
|
|
|
|
var rotationConfig = {
|
|
enabled: enabled,
|
|
strategy: strategy,
|
|
defaultCooldown: cooldown,
|
|
targetModel: targetModel,
|
|
providers: providers
|
|
};
|
|
|
|
var response = await fetch('/api/litellm-api/codexlens/rotation', {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(rotationConfig)
|
|
});
|
|
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
// Show sync result in toast
|
|
var syncMsg = '';
|
|
if (result.syncResult) {
|
|
if (result.syncResult.success) {
|
|
syncMsg = ' (' + result.syncResult.endpointCount + ' ' + t('codexlens.endpointsSynced') + ')';
|
|
} else {
|
|
syncMsg = ' (' + t('codexlens.syncFailed') + ': ' + result.syncResult.message + ')';
|
|
}
|
|
}
|
|
showRefreshToast(t('codexlens.rotationSaved') + syncMsg, 'success');
|
|
window.rotationConfig = rotationConfig;
|
|
updateRotationStatusDisplay(rotationConfig);
|
|
closeRotationModal();
|
|
} else {
|
|
showRefreshToast(t('common.saveFailed') + ': ' + result.error, 'error');
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast(t('common.error') + ': ' + err.message, 'error');
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// RERANKER CONFIGURATION MODAL
|
|
// ============================================================
|
|
|
|
/**
|
|
* Show Reranker configuration modal
|
|
*/
|
|
async function showRerankerConfigModal() {
|
|
try {
|
|
showRefreshToast(t('codexlens.loadingRerankerConfig') || 'Loading reranker configuration...', 'info');
|
|
|
|
// Fetch current reranker config
|
|
const response = await fetch('/api/codexlens/reranker/config');
|
|
const config = await response.json();
|
|
|
|
if (!config.success) {
|
|
showRefreshToast(t('common.error') + ': ' + (config.error || 'Failed to load config'), 'error');
|
|
return;
|
|
}
|
|
|
|
const modalHtml = buildRerankerConfigContent(config);
|
|
|
|
// Create and show modal
|
|
const tempContainer = document.createElement('div');
|
|
tempContainer.innerHTML = modalHtml;
|
|
const modal = tempContainer.firstElementChild;
|
|
document.body.appendChild(modal);
|
|
|
|
// Initialize icons
|
|
if (window.lucide) lucide.createIcons();
|
|
|
|
// Initialize event handlers
|
|
initRerankerConfigEvents(config);
|
|
} catch (err) {
|
|
showRefreshToast(t('common.error') + ': ' + err.message, 'error');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Build Reranker configuration modal content
|
|
*/
|
|
function buildRerankerConfigContent(config) {
|
|
const backend = config.backend || 'onnx';
|
|
const modelName = config.model_name || '';
|
|
const apiProvider = config.api_provider || 'siliconflow';
|
|
const apiKeySet = config.api_key_set || false;
|
|
const availableBackends = config.available_backends || ['onnx', 'api', 'litellm', 'legacy'];
|
|
const apiProviders = config.api_providers || ['siliconflow', 'cohere', 'jina'];
|
|
const litellmEndpoints = config.litellm_endpoints || [];
|
|
|
|
// ONNX models
|
|
const onnxModels = [
|
|
'cross-encoder/ms-marco-MiniLM-L-6-v2',
|
|
'cross-encoder/ms-marco-TinyBERT-L-2-v2',
|
|
'BAAI/bge-reranker-base',
|
|
'BAAI/bge-reranker-large'
|
|
];
|
|
|
|
// Build backend options
|
|
const backendOptions = availableBackends.map(function(b) {
|
|
const labels = {
|
|
'onnx': 'ONNX (Local, Optimum)',
|
|
'api': 'API (SiliconFlow/Cohere/Jina)',
|
|
'litellm': 'LiteLLM (Custom Endpoint)',
|
|
'legacy': 'Legacy (SentenceTransformers)'
|
|
};
|
|
return '<option value="' + b + '" ' + (backend === b ? 'selected' : '') + '>' + (labels[b] || b) + '</option>';
|
|
}).join('');
|
|
|
|
// Build API provider options
|
|
const providerOptions = apiProviders.map(function(p) {
|
|
return '<option value="' + p + '" ' + (apiProvider === p ? 'selected' : '') + '>' + p.charAt(0).toUpperCase() + p.slice(1) + '</option>';
|
|
}).join('');
|
|
|
|
// Build ONNX model options
|
|
const onnxModelOptions = onnxModels.map(function(m) {
|
|
return '<option value="' + m + '" ' + (modelName === m ? 'selected' : '') + '>' + m + '</option>';
|
|
}).join('');
|
|
|
|
// Build LiteLLM endpoint options
|
|
const litellmOptions = litellmEndpoints.length > 0
|
|
? litellmEndpoints.map(function(ep) {
|
|
return '<option value="' + ep + '">' + ep + '</option>';
|
|
}).join('')
|
|
: '<option value="" disabled>No endpoints configured</option>';
|
|
|
|
return '<div class="modal-backdrop" id="rerankerConfigModal">' +
|
|
'<div class="modal-container max-w-xl">' +
|
|
'<div class="modal-header">' +
|
|
'<div class="flex items-center gap-3">' +
|
|
'<div class="modal-icon">' +
|
|
'<i data-lucide="layers" class="w-5 h-5"></i>' +
|
|
'</div>' +
|
|
'<div>' +
|
|
'<h2 class="text-lg font-bold">' + (t('codexlens.rerankerConfig') || 'Reranker Configuration') + '</h2>' +
|
|
'<p class="text-xs text-muted-foreground">' + (t('codexlens.rerankerConfigDesc') || 'Configure cross-encoder reranking for semantic search') + '</p>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<button onclick="closeRerankerModal()" class="text-muted-foreground hover:text-foreground">' +
|
|
'<i data-lucide="x" class="w-5 h-5"></i>' +
|
|
'</button>' +
|
|
'</div>' +
|
|
|
|
'<div class="modal-body space-y-4">' +
|
|
// Backend Selection
|
|
'<div class="tool-config-section">' +
|
|
'<h4>' + (t('codexlens.rerankerBackend') || 'Backend') + '</h4>' +
|
|
'<select id="rerankerBackend" class="w-full px-3 py-2 border border-border rounded-lg bg-background text-sm" onchange="toggleRerankerSections()">' +
|
|
backendOptions +
|
|
'</select>' +
|
|
'<p class="text-xs text-muted-foreground mt-1">' + (t('codexlens.rerankerBackendHint') || 'Select reranking backend based on your needs') + '</p>' +
|
|
'</div>' +
|
|
|
|
// ONNX Section (visible when backend=onnx)
|
|
'<div id="rerankerOnnxSection" class="tool-config-section" style="display:' + (backend === 'onnx' ? 'block' : 'none') + '">' +
|
|
'<h4>' + (t('codexlens.onnxModel') || 'ONNX Model') + '</h4>' +
|
|
'<select id="rerankerOnnxModel" class="w-full px-3 py-2 border border-border rounded-lg bg-background text-sm">' +
|
|
onnxModelOptions +
|
|
'<option value="custom">Custom model...</option>' +
|
|
'</select>' +
|
|
'<input type="text" id="rerankerCustomModel" value="' + (onnxModels.includes(modelName) ? '' : modelName) + '" ' +
|
|
'placeholder="Enter custom model name" ' +
|
|
'class="w-full mt-2 px-3 py-2 border border-border rounded-lg bg-background text-sm" style="display:' + (onnxModels.includes(modelName) ? 'none' : 'block') + '" />' +
|
|
'</div>' +
|
|
|
|
// API Section (visible when backend=api)
|
|
'<div id="rerankerApiSection" class="tool-config-section" style="display:' + (backend === 'api' ? 'block' : 'none') + '">' +
|
|
'<h4>' + (t('codexlens.apiConfig') || 'API Configuration') + '</h4>' +
|
|
'<div class="space-y-3">' +
|
|
'<div>' +
|
|
'<label class="block text-sm font-medium mb-1.5">' + (t('codexlens.apiProvider') || 'Provider') + '</label>' +
|
|
'<select id="rerankerApiProvider" class="w-full px-3 py-2 border border-border rounded-lg bg-background text-sm">' +
|
|
providerOptions +
|
|
'</select>' +
|
|
'</div>' +
|
|
'<div>' +
|
|
'<label class="block text-sm font-medium mb-1.5">' + (t('codexlens.apiKey') || 'API Key') + '</label>' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<input type="password" id="rerankerApiKey" placeholder="' + (apiKeySet ? '••••••••' : 'Enter API key') + '" ' +
|
|
'class="flex-1 px-3 py-2 border border-border rounded-lg bg-background text-sm" />' +
|
|
(apiKeySet ? '<span class="inline-flex items-center gap-1 px-2 py-1 rounded text-xs bg-success/10 text-success border border-success/20"><i data-lucide="check" class="w-3 h-3"></i>Set</span>' : '') +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div>' +
|
|
'<label class="block text-sm font-medium mb-1.5">' + (t('codexlens.modelName') || 'Model Name') + '</label>' +
|
|
'<input type="text" id="rerankerApiModel" value="' + modelName + '" ' +
|
|
'placeholder="e.g., BAAI/bge-reranker-v2-m3" ' +
|
|
'class="w-full px-3 py-2 border border-border rounded-lg bg-background text-sm" />' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
|
|
// LiteLLM Section (visible when backend=litellm)
|
|
'<div id="rerankerLitellmSection" class="tool-config-section" style="display:' + (backend === 'litellm' ? 'block' : 'none') + '">' +
|
|
'<h4>' + (t('codexlens.litellmEndpoint') || 'LiteLLM Endpoint') + '</h4>' +
|
|
'<select id="rerankerLitellmEndpoint" class="w-full px-3 py-2 border border-border rounded-lg bg-background text-sm">' +
|
|
litellmOptions +
|
|
'</select>' +
|
|
(litellmEndpoints.length === 0
|
|
? '<p class="text-xs text-warning mt-1">' + (t('codexlens.noEndpointsHint') || 'Configure LiteLLM endpoints in API Settings first') + '</p>'
|
|
: '') +
|
|
'</div>' +
|
|
|
|
// Legacy Section (visible when backend=legacy)
|
|
'<div id="rerankerLegacySection" class="tool-config-section" style="display:' + (backend === 'legacy' ? 'block' : 'none') + '">' +
|
|
'<div class="flex items-start gap-2 bg-warning/10 border border-warning/30 rounded-lg p-3">' +
|
|
'<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">' + (t('codexlens.legacyWarning') || 'Legacy Backend') + '</p>' +
|
|
'<p class="text-muted-foreground mt-1">' + (t('codexlens.legacyWarningDesc') || 'Uses SentenceTransformers CrossEncoder. Consider using ONNX for better performance.') + '</p>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
|
|
'<div class="modal-footer">' +
|
|
'<button onclick="resetRerankerConfig()" class="btn btn-outline">' +
|
|
'<i data-lucide="rotate-ccw" class="w-4 h-4"></i> ' + (t('common.reset') || 'Reset') +
|
|
'</button>' +
|
|
'<button onclick="closeRerankerModal()" class="btn btn-outline">' + t('common.cancel') + '</button>' +
|
|
'<button onclick="saveRerankerConfig()" class="btn btn-primary">' +
|
|
'<i data-lucide="save" class="w-4 h-4"></i> ' + t('common.save') +
|
|
'</button>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
}
|
|
|
|
/**
|
|
* Toggle reranker configuration sections based on selected backend
|
|
*/
|
|
function toggleRerankerSections() {
|
|
var backend = document.getElementById('rerankerBackend').value;
|
|
|
|
document.getElementById('rerankerOnnxSection').style.display = backend === 'onnx' ? 'block' : 'none';
|
|
document.getElementById('rerankerApiSection').style.display = backend === 'api' ? 'block' : 'none';
|
|
document.getElementById('rerankerLitellmSection').style.display = backend === 'litellm' ? 'block' : 'none';
|
|
document.getElementById('rerankerLegacySection').style.display = backend === 'legacy' ? 'block' : 'none';
|
|
}
|
|
|
|
/**
|
|
* Initialize reranker config modal events
|
|
*/
|
|
function initRerankerConfigEvents(config) {
|
|
// Handle ONNX model custom input toggle
|
|
var onnxModelSelect = document.getElementById('rerankerOnnxModel');
|
|
var customModelInput = document.getElementById('rerankerCustomModel');
|
|
|
|
if (onnxModelSelect && customModelInput) {
|
|
onnxModelSelect.addEventListener('change', function() {
|
|
customModelInput.style.display = this.value === 'custom' ? 'block' : 'none';
|
|
});
|
|
}
|
|
|
|
// Store original config for reset
|
|
window._rerankerOriginalConfig = config;
|
|
}
|
|
|
|
/**
|
|
* Close the reranker config modal
|
|
*/
|
|
function closeRerankerModal() {
|
|
var modal = document.getElementById('rerankerConfigModal');
|
|
if (modal) modal.remove();
|
|
}
|
|
|
|
/**
|
|
* Reset reranker config to original values
|
|
*/
|
|
function resetRerankerConfig() {
|
|
var config = window._rerankerOriginalConfig;
|
|
if (!config) return;
|
|
|
|
document.getElementById('rerankerBackend').value = config.backend || 'onnx';
|
|
toggleRerankerSections();
|
|
|
|
// Reset ONNX section
|
|
var onnxModels = [
|
|
'cross-encoder/ms-marco-MiniLM-L-6-v2',
|
|
'cross-encoder/ms-marco-TinyBERT-L-2-v2',
|
|
'BAAI/bge-reranker-base',
|
|
'BAAI/bge-reranker-large'
|
|
];
|
|
if (onnxModels.includes(config.model_name)) {
|
|
document.getElementById('rerankerOnnxModel').value = config.model_name;
|
|
document.getElementById('rerankerCustomModel').style.display = 'none';
|
|
} else {
|
|
document.getElementById('rerankerOnnxModel').value = 'custom';
|
|
document.getElementById('rerankerCustomModel').value = config.model_name || '';
|
|
document.getElementById('rerankerCustomModel').style.display = 'block';
|
|
}
|
|
|
|
// Reset API section
|
|
document.getElementById('rerankerApiProvider').value = config.api_provider || 'siliconflow';
|
|
document.getElementById('rerankerApiKey').value = '';
|
|
document.getElementById('rerankerApiModel').value = config.model_name || '';
|
|
|
|
showRefreshToast(t('common.reset') || 'Reset to original values', 'info');
|
|
}
|
|
|
|
/**
|
|
* Save reranker configuration
|
|
*/
|
|
async function saveRerankerConfig() {
|
|
try {
|
|
var backend = document.getElementById('rerankerBackend').value;
|
|
var payload = { backend: backend };
|
|
|
|
// Collect model name based on backend
|
|
if (backend === 'onnx') {
|
|
var onnxModel = document.getElementById('rerankerOnnxModel').value;
|
|
if (onnxModel === 'custom') {
|
|
payload.model_name = document.getElementById('rerankerCustomModel').value.trim();
|
|
} else {
|
|
payload.model_name = onnxModel;
|
|
}
|
|
} else if (backend === 'api') {
|
|
payload.api_provider = document.getElementById('rerankerApiProvider').value;
|
|
payload.model_name = document.getElementById('rerankerApiModel').value.trim();
|
|
var apiKey = document.getElementById('rerankerApiKey').value.trim();
|
|
if (apiKey) {
|
|
payload.api_key = apiKey;
|
|
}
|
|
} else if (backend === 'litellm') {
|
|
payload.litellm_endpoint = document.getElementById('rerankerLitellmEndpoint').value;
|
|
}
|
|
|
|
var response = await fetch('/api/codexlens/reranker/config', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
showRefreshToast((t('codexlens.rerankerConfigSaved') || 'Reranker configuration saved') + ': ' + result.message, 'success');
|
|
closeRerankerModal();
|
|
} else {
|
|
showRefreshToast(t('common.saveFailed') + ': ' + result.error, 'error');
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast(t('common.error') + ': ' + err.message, 'error');
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// FILE WATCHER CONTROL
|
|
// ============================================================
|
|
|
|
/**
|
|
* Show File Watcher control modal
|
|
*/
|
|
async function showWatcherControlModal() {
|
|
try {
|
|
showRefreshToast(t('codexlens.loadingWatcherStatus') || 'Loading watcher status...', 'info');
|
|
|
|
// Fetch current watcher status and indexed projects in parallel
|
|
const [statusResponse, indexesResponse] = await Promise.all([
|
|
fetch('/api/codexlens/watch/status'),
|
|
fetch('/api/codexlens/indexes')
|
|
]);
|
|
const status = await statusResponse.json();
|
|
const indexes = await indexesResponse.json();
|
|
|
|
// Get first indexed project path as default
|
|
let defaultPath = '';
|
|
if (indexes.success && indexes.projects && indexes.projects.length > 0) {
|
|
// Sort by last_indexed desc and pick the most recent
|
|
const sorted = indexes.projects.sort((a, b) =>
|
|
new Date(b.last_indexed || 0) - new Date(a.last_indexed || 0)
|
|
);
|
|
defaultPath = sorted[0].source_root || '';
|
|
}
|
|
|
|
const modalHtml = buildWatcherControlContent(status, defaultPath);
|
|
|
|
// Create and show modal
|
|
const tempContainer = document.createElement('div');
|
|
tempContainer.innerHTML = modalHtml;
|
|
const modal = tempContainer.firstElementChild;
|
|
document.body.appendChild(modal);
|
|
|
|
// Initialize icons
|
|
if (window.lucide) lucide.createIcons();
|
|
|
|
// Start polling if watcher is running
|
|
if (status.running) {
|
|
startWatcherStatusPolling();
|
|
}
|
|
} catch (err) {
|
|
showRefreshToast(t('common.error') + ': ' + err.message, 'error');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Build File Watcher control modal content
|
|
* @param {Object} status - Watcher status
|
|
* @param {string} defaultPath - Default path from indexed projects
|
|
*/
|
|
function buildWatcherControlContent(status, defaultPath) {
|
|
const running = status.running || false;
|
|
defaultPath = defaultPath || '';
|
|
const rootPath = status.root_path || '';
|
|
const eventsProcessed = status.events_processed || 0;
|
|
const uptimeSeconds = status.uptime_seconds || 0;
|
|
|
|
// Format uptime
|
|
const formatUptime = function(seconds) {
|
|
if (seconds < 60) return seconds + 's';
|
|
if (seconds < 3600) return Math.floor(seconds / 60) + 'm ' + (seconds % 60) + 's';
|
|
return Math.floor(seconds / 3600) + 'h ' + Math.floor((seconds % 3600) / 60) + 'm';
|
|
};
|
|
|
|
return '<div class="modal-backdrop" id="watcherControlModal">' +
|
|
'<div class="modal-container max-w-lg">' +
|
|
'<div class="modal-header">' +
|
|
'<div class="flex items-center gap-3">' +
|
|
'<div class="modal-icon">' +
|
|
'<i data-lucide="eye" class="w-5 h-5"></i>' +
|
|
'</div>' +
|
|
'<div>' +
|
|
'<h2 class="text-lg font-bold">' + (t('codexlens.watcherControl') || 'File Watcher') + '</h2>' +
|
|
'<p class="text-xs text-muted-foreground">' + (t('codexlens.watcherControlDesc') || 'Real-time incremental index updates') + '</p>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<button onclick="closeWatcherModal()" class="text-muted-foreground hover:text-foreground">' +
|
|
'<i data-lucide="x" class="w-5 h-5"></i>' +
|
|
'</button>' +
|
|
'</div>' +
|
|
|
|
'<div class="modal-body space-y-4">' +
|
|
// Status and Toggle
|
|
'<div class="flex items-center justify-between p-4 bg-muted/30 rounded-lg">' +
|
|
'<div class="flex items-center gap-3">' +
|
|
'<div class="w-3 h-3 rounded-full ' + (running ? 'bg-success animate-pulse' : 'bg-muted-foreground') + '"></div>' +
|
|
'<div>' +
|
|
'<span class="font-medium">' + (running ? (t('codexlens.watcherRunning') || 'Watcher Running') : (t('codexlens.watcherStopped') || 'Watcher Stopped')) + '</span>' +
|
|
(running ? '<p class="text-xs text-muted-foreground">' + rootPath + '</p>' : '') +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<label class="relative inline-flex items-center cursor-pointer">' +
|
|
'<input type="checkbox" id="watcherToggle" ' + (running ? 'checked' : '') + ' onchange="toggleWatcher()" class="sr-only peer" />' +
|
|
'<div class="w-11 h-6 bg-muted peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[\'\'] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-success"></div>' +
|
|
'</label>' +
|
|
'</div>' +
|
|
|
|
// Statistics (shown when running)
|
|
'<div id="watcherStats" class="tool-config-section" style="display:' + (running ? 'block' : 'none') + '">' +
|
|
'<h4>' + (t('codexlens.watcherStats') || 'Statistics') + '</h4>' +
|
|
'<div class="grid grid-cols-2 gap-4">' +
|
|
'<div class="p-3 bg-muted/20 rounded-lg">' +
|
|
'<div class="text-2xl font-bold text-primary" id="watcherEventsCount">' + eventsProcessed + '</div>' +
|
|
'<div class="text-xs text-muted-foreground">' + (t('codexlens.eventsProcessed') || 'Events Processed') + '</div>' +
|
|
'</div>' +
|
|
'<div class="p-3 bg-muted/20 rounded-lg">' +
|
|
'<div class="text-2xl font-bold text-primary" id="watcherUptime">' + formatUptime(uptimeSeconds) + '</div>' +
|
|
'<div class="text-xs text-muted-foreground">' + (t('codexlens.uptime') || 'Uptime') + '</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
|
|
// Start Configuration (shown when not running)
|
|
'<div id="watcherStartConfig" class="tool-config-section" style="display:' + (running ? 'none' : 'block') + '">' +
|
|
'<h4>' + (t('codexlens.watcherConfig') || 'Configuration') + '</h4>' +
|
|
'<div class="space-y-3">' +
|
|
'<div>' +
|
|
'<label class="block text-sm font-medium mb-1.5">' + (t('codexlens.watchPath') || 'Watch Path') + '</label>' +
|
|
'<input type="text" id="watcherPath" value="' + defaultPath + '" placeholder="Enter an indexed project path" ' +
|
|
'class="w-full px-3 py-2 border border-border rounded-lg bg-background text-sm" />' +
|
|
'</div>' +
|
|
'<div>' +
|
|
'<label class="block text-sm font-medium mb-1.5">' + (t('codexlens.debounceMs') || 'Debounce (ms)') + '</label>' +
|
|
'<input type="number" id="watcherDebounce" value="1000" min="100" max="10000" step="100" ' +
|
|
'class="w-full px-3 py-2 border border-border rounded-lg bg-background text-sm" />' +
|
|
'<p class="text-xs text-muted-foreground mt-1">' + (t('codexlens.debounceHint') || 'Time to wait before processing file changes') + '</p>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
|
|
// Info box
|
|
'<div class="flex items-start gap-2 bg-primary/10 border border-primary/30 rounded-lg p-3">' +
|
|
'<i data-lucide="info" class="w-4 h-4 text-primary mt-0.5"></i>' +
|
|
'<div class="text-sm text-muted-foreground">' +
|
|
(t('codexlens.watcherInfo') || 'The file watcher monitors your codebase for changes and automatically updates the search index in real-time.') +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
|
|
'<div class="modal-footer">' +
|
|
'<button onclick="closeWatcherModal()" class="btn btn-outline">' + t('common.close') + '</button>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
}
|
|
|
|
/**
|
|
* Toggle file watcher on/off
|
|
*/
|
|
async function toggleWatcher() {
|
|
var toggle = document.getElementById('watcherToggle');
|
|
var shouldRun = toggle.checked;
|
|
|
|
try {
|
|
if (shouldRun) {
|
|
// Start watcher
|
|
var watchPath = document.getElementById('watcherPath').value.trim();
|
|
var debounceMs = parseInt(document.getElementById('watcherDebounce').value, 10) || 1000;
|
|
|
|
var response = await fetch('/api/codexlens/watch/start', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ path: watchPath || undefined, debounce_ms: debounceMs })
|
|
});
|
|
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
showRefreshToast((t('codexlens.watcherStarted') || 'Watcher started') + ': ' + result.path, 'success');
|
|
document.getElementById('watcherStats').style.display = 'block';
|
|
document.getElementById('watcherStartConfig').style.display = 'none';
|
|
startWatcherStatusPolling();
|
|
} else {
|
|
toggle.checked = false;
|
|
showRefreshToast(t('common.error') + ': ' + result.error, 'error');
|
|
}
|
|
} else {
|
|
// Stop watcher
|
|
var response = await fetch('/api/codexlens/watch/stop', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' }
|
|
});
|
|
|
|
var result = await response.json();
|
|
|
|
if (result.success) {
|
|
showRefreshToast((t('codexlens.watcherStopped') || 'Watcher stopped') + ': ' + result.events_processed + ' events processed', 'success');
|
|
document.getElementById('watcherStats').style.display = 'none';
|
|
document.getElementById('watcherStartConfig').style.display = 'block';
|
|
stopWatcherStatusPolling();
|
|
} else {
|
|
toggle.checked = true;
|
|
showRefreshToast(t('common.error') + ': ' + result.error, 'error');
|
|
}
|
|
}
|
|
} catch (err) {
|
|
toggle.checked = !shouldRun;
|
|
showRefreshToast(t('common.error') + ': ' + err.message, 'error');
|
|
}
|
|
}
|
|
|
|
// Watcher status polling
|
|
var watcherPollingInterval = null;
|
|
|
|
function startWatcherStatusPolling() {
|
|
if (watcherPollingInterval) return;
|
|
|
|
watcherPollingInterval = setInterval(async function() {
|
|
try {
|
|
var response = await fetch('/api/codexlens/watch/status');
|
|
var status = await response.json();
|
|
|
|
if (status.running) {
|
|
document.getElementById('watcherEventsCount').textContent = status.events_processed || 0;
|
|
|
|
// Format uptime
|
|
var seconds = status.uptime_seconds || 0;
|
|
var formatted = seconds < 60 ? seconds + 's' :
|
|
seconds < 3600 ? Math.floor(seconds / 60) + 'm ' + (seconds % 60) + 's' :
|
|
Math.floor(seconds / 3600) + 'h ' + Math.floor((seconds % 3600) / 60) + 'm';
|
|
document.getElementById('watcherUptime').textContent = formatted;
|
|
} else {
|
|
// Watcher stopped externally
|
|
stopWatcherStatusPolling();
|
|
document.getElementById('watcherToggle').checked = false;
|
|
document.getElementById('watcherStats').style.display = 'none';
|
|
document.getElementById('watcherStartConfig').style.display = 'block';
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to poll watcher status:', err);
|
|
}
|
|
}, 2000);
|
|
}
|
|
|
|
function stopWatcherStatusPolling() {
|
|
if (watcherPollingInterval) {
|
|
clearInterval(watcherPollingInterval);
|
|
watcherPollingInterval = null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Close the watcher control modal
|
|
*/
|
|
function closeWatcherModal() {
|
|
stopWatcherStatusPolling();
|
|
var modal = document.getElementById('watcherControlModal');
|
|
if (modal) modal.remove();
|
|
}
|
|
|
|
/**
|
|
* Handle watcher status update from WebSocket
|
|
* @param {Object} payload - { running: boolean, path?: string, error?: string }
|
|
*/
|
|
function handleWatcherStatusUpdate(payload) {
|
|
var toggle = document.getElementById('watcherToggle');
|
|
var statsDiv = document.getElementById('watcherStats');
|
|
var configDiv = document.getElementById('watcherStartConfig');
|
|
|
|
if (payload.error) {
|
|
// Watcher failed - update UI to show stopped state
|
|
if (toggle) toggle.checked = false;
|
|
if (statsDiv) statsDiv.style.display = 'none';
|
|
if (configDiv) configDiv.style.display = 'block';
|
|
stopWatcherStatusPolling();
|
|
} else if (payload.running) {
|
|
// Watcher started
|
|
if (toggle) toggle.checked = true;
|
|
if (statsDiv) statsDiv.style.display = 'block';
|
|
if (configDiv) configDiv.style.display = 'none';
|
|
startWatcherStatusPolling();
|
|
} else {
|
|
// Watcher stopped normally
|
|
if (toggle) toggle.checked = false;
|
|
if (statsDiv) statsDiv.style.display = 'none';
|
|
if (configDiv) configDiv.style.display = 'block';
|
|
stopWatcherStatusPolling();
|
|
}
|
|
}
|