vectra-js 0.9.3 → 0.9.4

package/src/ui/script.js

@@ -1,4 +1,50 @@
 document.addEventListener('DOMContentLoaded', () => {
+    // --- Dark Mode Logic ---
+    const themeToggleBtn = document.getElementById('theme-toggle');
+    const darkIcon = document.getElementById('theme-toggle-dark-icon');
+    const lightIcon = document.getElementById('theme-toggle-light-icon');
+
+    // Initial State
+    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark');
+        if (lightIcon) lightIcon.classList.remove('hidden');
+    } else {
+        document.documentElement.classList.remove('dark');
+        if (darkIcon) darkIcon.classList.remove('hidden');
+    }
+
+    // Toggle Event
+    if (themeToggleBtn) {
+        themeToggleBtn.addEventListener('click', () => {
+            // Toggle icons
+            if (darkIcon) darkIcon.classList.toggle('hidden');
+            if (lightIcon) lightIcon.classList.toggle('hidden');
+
+            // If is set in local storage
+            if (localStorage.getItem('color-theme')) {
+                if (localStorage.getItem('color-theme') === 'light') {
+                    document.documentElement.classList.add('dark');
+                    localStorage.setItem('color-theme', 'dark');
+                } else {
+                    document.documentElement.classList.remove('dark');
+                    localStorage.setItem('color-theme', 'light');
+                }
+            } else {
+                // If not in local storage
+                if (document.documentElement.classList.contains('dark')) {
+                    document.documentElement.classList.remove('dark');
+                    localStorage.setItem('color-theme', 'light');
+                } else {
+                    document.documentElement.classList.add('dark');
+                    localStorage.setItem('color-theme', 'dark');
+                }
+            }
+            
+            // Trigger preview update
+            if (typeof updatePreview === 'function') updatePreview();
+        });
+    }
+
     // --- Navigation Logic (Smooth Scrolling & Scroll Spy) ---
     const links = document.querySelectorAll('.nav-item');
     const sections = document.querySelectorAll('section');
@@ -60,13 +106,13 @@ document.addEventListener('DOMContentLoaded', () => {
 
     function updateSidebarState(currentId) {
         links.forEach(link => {
-            link.classList.remove('bg-indigo-50', 'text-indigo-600', 'active', 'border-l-4', 'border-indigo-600');
+            link.classList.remove('bg-brand-50', 'text-brand-600', 'active', 'border-l-4', 'border-brand-600');
             link.classList.add('text-gray-600', 'hover:bg-gray-50');
             
             // We use a slight visual indicator for active state
             if (link.getAttribute('data-target') === currentId) {
                 link.classList.remove('text-gray-600', 'hover:bg-gray-50');
-                link.classList.add('bg-indigo-50', 'text-indigo-600', 'active');
+                link.classList.add('bg-brand-50', 'text-brand-600', 'active');
             }
         });
     }
@@ -138,8 +184,8 @@ document.addEventListener('DOMContentLoaded', () => {
         const row = document.createElement('div');
         row.className = 'flex items-center space-x-2 header-row';
         row.innerHTML = `
-            <input type="text" placeholder="Key" value="${key}" class="header-key block w-1/2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
-            <input type="text" placeholder="Value" value="${value}" class="header-value block w-1/2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
+            <input type="text" placeholder="Key" value="${key}" class="header-key block w-1/2 rounded-md border-gray-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border">
+            <input type="text" placeholder="Value" value="${value}" class="header-value block w-1/2 rounded-md border-gray-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border">
             <button type="button" class="remove-header p-2 text-gray-400 hover:text-red-500">
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
             </button>
@@ -308,12 +354,15 @@ function setBackend(type) {
     const btnNode = document.getElementById('backend-node');
     const btnPython = document.getElementById('backend-python');
     
+    const activeClass = 'px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200 text-brand-600 dark:text-brand-400 bg-white dark:bg-brand-900/20 shadow-sm';
+    const inactiveClass = 'px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white';
+    
     if (isPythonBackend) {
-        btnPython.className = 'px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200 text-indigo-600 bg-indigo-50 shadow-sm';
-        btnNode.className = 'px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200 text-gray-500 hover:text-gray-900';
+        btnPython.className = activeClass;
+        btnNode.className = inactiveClass;
     } else {
-        btnNode.className = 'px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200 text-indigo-600 bg-indigo-50 shadow-sm';
-        btnPython.className = 'px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200 text-gray-500 hover:text-gray-900';
+        btnNode.className = activeClass;
+        btnPython.className = inactiveClass;
     }
     
     updatePreview();
@@ -447,8 +496,8 @@ function addHeaderRow(key = '', value = '') {
     const row = document.createElement('div');
     row.className = 'flex items-center space-x-2 header-row mb-2';
     row.innerHTML = `
-        <input type="text" placeholder="Key" value="${key}" class="header-key block w-1/2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
-        <input type="text" placeholder="Value" value="${value}" class="header-value block w-1/2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
+        <input type="text" placeholder="Key" value="${key}" class="header-key block w-1/2 rounded-md border-white/10 bg-dark-950 text-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
+        <input type="text" placeholder="Value" value="${value}" class="header-value block w-1/2 rounded-md border-white/10 bg-dark-950 text-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
         <button type="button" class="remove-header p-2 text-gray-400 hover:text-red-500 transition-colors">
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
         </button>

package/src/ui/style.css

@@ -79,7 +79,7 @@ body {
 }
 
 .nav-item.active {
-    background-color: #eef2ff;
+    background-color: #f5f3ff;
     color: var(--primary);
 }
 
@@ -176,7 +176,7 @@ label {
 .form-control:focus {
     outline: none;
     border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
     background-color: #fff;
 }
 

package/src/webconfig_server.js

@@ -2,6 +2,37 @@ const http = require('http');
 const fs = require('fs');
 const path = require('path');
 const { RAGConfigSchema, ProviderType, ChunkingStrategy, RetrievalStrategy } = require('./config');
+const sqlite3 = require('sqlite3').verbose();
+
+
+// Helper to get DB connection from config
+const getDb = (configPath) => {
+    try {
+        if (!fs.existsSync(configPath)) return null;
+        const cfg = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
+        if (!cfg.observability || !cfg.observability.enabled) return null;
+        
+        let dbPath = cfg.observability.sqlitePath || 'vectra-observability.db';
+        if (!path.isAbsolute(dbPath)) {
+             dbPath = path.resolve(path.dirname(configPath), dbPath);
+        }
+
+        return new sqlite3.Database(dbPath, sqlite3.OPEN_READONLY);
+    } catch (e) {
+        console.error('Failed to open observability DB:', e);
+        return null;
+    }
+};
+
+// Promisify sqlite3 methods
+const dbQuery = (db, method, sql, params = []) => {
+    return new Promise((resolve, reject) => {
+        db[method](sql, params, (err, result) => {
+            if (err) reject(err);
+            else resolve(result);
+        });
+    });
+};
 
 // Simple browser opener using child_process since 'open' package might not be installed
 const { exec } = require('child_process');
@@ -57,7 +88,7 @@ function serveStatic(res, filePath, contentType) {
   }
 }
 
-function start(configPath, port = 8766, openInBrowser = true) {
+function start(configPath, mode = 'webconfig', port = 8766, openInBrowser = true) {
   const absConfigPath = path.resolve(configPath);
   
   const createServer = (currentPort) => {
@@ -67,6 +98,132 @@ function start(configPath, port = 8766, openInBrowser = true) {
         res.end(JSON.stringify(obj));
       };
 
+      // --- Dashboard Routes ---
+
+      // Redirect /dashboard to /dashboard/ to handle relative assets correctly
+      if (req.method === 'GET' && req.url === '/dashboard') {
+        res.writeHead(301, { 'Location': '/dashboard/' });
+        res.end();
+        return;
+      }
+
+      // Serve Dashboard HTML
+      if (req.method === 'GET' && req.url === '/dashboard/') {
+        const filePath = path.join(__dirname, 'dashboard', 'index.html');
+        serveStatic(res, filePath, 'text/html; charset=utf-8');
+        return;
+      }
+
+      // Serve Dashboard Assets
+      if (req.method === 'GET' && req.url.startsWith('/dashboard/')) {
+        const assetName = req.url.split('?')[0].replace('/dashboard/', '');
+        const filePath = path.join(__dirname, 'dashboard', assetName);
+        if (fs.existsSync(filePath)) {
+             const ext = path.extname(filePath);
+             let type = 'text/plain';
+             if (ext === '.css') type = 'text/css';
+             if (ext === '.js') type = 'application/javascript';
+             if (ext === '.html') type = 'text/html';
+             
+             serveStatic(res, filePath, type);
+             return;
+        }
+      }
+
+      // --- Observability API ---
+      
+      if (req.method === 'GET' && req.url.startsWith('/api/observability/')) {
+          const db = getDb(absConfigPath);
+          if (!db) {
+              sendJson(400, { error: 'Observability not enabled or DB not found' });
+              return;
+          }
+
+          const handleRequest = async () => {
+              const url = new URL(req.url, `http://${req.headers.host}`);
+              const projectId = url.searchParams.get('projectId');
+              // Sanitize projectId to avoid injection if possible, though strict typing helps. 
+              // Using parameterized queries is safer.
+              
+              let projectFilter = '';
+              const params = [];
+              
+              if (projectId && projectId !== 'all') {
+                  projectFilter = 'WHERE project_id = ?';
+                  params.push(projectId);
+              }
+
+              try {
+                  if (url.pathname.endsWith('/stats')) {
+                      // Aggregate stats
+                      // Fix: projectFilter starts with WHERE, but here we append to existing WHERE if name='queryRAG'.
+                      // So: WHERE name='queryRAG' AND project_id = ?
+                      const whereClause = projectFilter ? `AND project_id = ?` : '';
+                      
+                      const totalReq = await dbQuery(db, 'get', `SELECT COUNT(*) as count FROM traces WHERE name = 'queryRAG' ${whereClause}`, params);
+                      
+                      const avgLat = await dbQuery(db, 'get', `SELECT AVG(value) as val FROM metrics WHERE name = 'query_latency' ${whereClause}`, params);
+                      const tokensP = await dbQuery(db, 'get', `SELECT SUM(value) as val FROM metrics WHERE name = 'prompt_chars' ${whereClause}`, params);
+                      const tokensC = await dbQuery(db, 'get', `SELECT SUM(value) as val FROM metrics WHERE name = 'completion_chars' ${whereClause}`, params);
+                      
+                      // History for charts (last 50 query latencies)
+                      const history = await dbQuery(db, 'all', `
+                          SELECT m.timestamp, m.value as latency, 
+                          (SELECT value FROM metrics m2 WHERE m2.timestamp = m.timestamp AND m2.name = 'prompt_chars') + 
+                          (SELECT value FROM metrics m3 WHERE m3.timestamp = m.timestamp AND m3.name = 'completion_chars') as tokens
+                          FROM metrics m 
+                          WHERE m.name = 'query_latency' ${whereClause}
+                          ORDER BY m.timestamp DESC LIMIT 50
+                      `, params);
+
+                      sendJson(200, {
+                          totalRequests: totalReq ? totalReq.count : 0,
+                          avgLatency: avgLat ? avgLat.val : 0,
+                          totalPromptChars: tokensP ? tokensP.val : 0,
+                          totalCompletionChars: tokensC ? tokensC.val : 0,
+                          history: history ? history.reverse() : []
+                      });
+                  }
+                  else if (url.pathname.endsWith('/traces')) {
+                      const whereClause = projectFilter ? `AND project_id = ?` : '';
+                      const traces = await dbQuery(db, 'all', `SELECT * FROM traces WHERE name = 'queryRAG' ${whereClause} ORDER BY start_time DESC LIMIT 50`, params);
+                      sendJson(200, traces);
+                  }
+                  else if (url.pathname.match(/\/traces\/([a-zA-Z0-9-]+)$/)) {
+                      const traceId = url.pathname.split('/').pop();
+                      const spans = await dbQuery(db, 'all', `SELECT * FROM traces WHERE trace_id = ?`, [traceId]);
+                      sendJson(200, spans);
+                  }
+                  else if (url.pathname.endsWith('/sessions')) {
+                      // sessions has project_id column
+                      const sessions = await dbQuery(db, 'all', `SELECT * FROM sessions ${projectFilter} ORDER BY last_activity_time DESC LIMIT 50`, params);
+                      // Parse metadata JSON
+                      if (sessions) {
+                          sessions.forEach(s => { if(s.metadata) s.metadata = JSON.parse(s.metadata); });
+                      }
+                      sendJson(200, sessions);
+                  }
+                  else if (url.pathname.endsWith('/projects')) {
+                        const projects = await dbQuery(db, 'all', `SELECT DISTINCT project_id FROM traces`);
+                        sendJson(200, projects.map(p => p.project_id).filter(Boolean));
+                  }
+                  else {
+                      sendJson(404, { error: 'Unknown endpoint' });
+                  }
+              } catch (e) {
+                  console.error(e);
+                  sendJson(500, { error: e.message });
+              } finally {
+                  db.close();
+              }
+          };
+          
+          handleRequest();
+          return;
+      }
+
+      // --- Config UI Routes (Legacy) ---
+
       // Serve index.html
       if (req.method === 'GET' && (req.url === '/' || req.url === '/index.html')) {
         const filePath = path.join(__dirname, 'ui', 'index.html');
@@ -161,7 +318,10 @@ function start(configPath, port = 8766, openInBrowser = true) {
     });
 
     server.listen(currentPort, () => {
-      const url = `http://localhost:${currentPort}/`;
+      let url = `http://localhost:${currentPort}/`;
+      if (mode === 'dashboard') {
+        url = `http://localhost:${currentPort}/dashboard`;
+      }
       console.log(`Vectra WebConfig running at ${url}`);
       if (openInBrowser) {
         openBrowser(url);