vectra-js 0.9.3 → 0.9.5

package/src/dashboard/dashboard-script.js

@@ -0,0 +1,260 @@
+// State
+let currentView = 'overview';
+let currentProject = 'all';
+let lastStats = null;
+
+// Init
+document.addEventListener('DOMContentLoaded', () => {
+    loadProjects();
+    loadDashboardData();
+    
+    // Auto-refresh every 30s
+    setInterval(loadDashboardData, 30000);
+    
+    // Initialize Icons
+    if (window.lucide) {
+        window.lucide.createIcons();
+    }
+    
+    // Project filter
+    const projectSelect = document.getElementById('projectSelect');
+    if (projectSelect) {
+        projectSelect.addEventListener('change', (e) => {
+            currentProject = e.target.value;
+            loadDashboardData();
+        });
+    }
+});
+
+function switchView(view) {
+    currentView = view;
+    
+    // Update content visibility
+    ['overview', 'traces', 'sessions'].forEach(v => {
+        const div = document.getElementById(`view-${v}`);
+        if (v === view) {
+            div.classList.remove('hidden');
+        } else {
+            div.classList.add('hidden');
+        }
+    });
+
+    // Update Sidebar Links
+    document.querySelectorAll('.sidebar-link').forEach(el => {
+        el.classList.remove('active', 'bg-gray-100', 'text-slate-900');
+        el.classList.add('text-gray-600');
+    });
+    
+    const btn = document.getElementById(`btn-${view}`);
+    if (btn) {
+        btn.classList.add('active', 'bg-gray-100', 'text-slate-900');
+        btn.classList.remove('text-gray-600');
+    }
+
+    if (view === 'traces') loadTraces();
+    if (view === 'sessions') loadSessions();
+}
+
+async function fetchAPI(endpoint) {
+    try {
+        const url = `/api/observability/${endpoint}${currentProject !== 'all' ? `?projectId=${currentProject}` : ''}`;
+        const res = await fetch(url);
+        if (!res.ok) throw new Error('API Error');
+        return await res.json();
+    } catch (e) {
+        console.error('Fetch error:', e);
+        return null;
+    }
+}
+
+async function loadProjects() {
+    const projects = await fetchAPI('projects');
+    const select = document.getElementById('projectSelect');
+    if (projects && projects.length > 0) {
+        // Keep 'all' option
+        // Add projects
+        projects.forEach(p => {
+            if (p === 'all') return; // skip if somehow in db
+            const opt = document.createElement('option');
+            opt.value = p;
+            opt.textContent = p;
+            select.appendChild(opt);
+        });
+    }
+}
+
+async function loadDashboardData() {
+    const stats = await fetchAPI('stats');
+    if (!stats) return;
+
+    lastStats = stats;
+
+    // Update Stats Cards
+    document.getElementById('stat-total-req').textContent = stats.totalRequests || 0;
+    document.getElementById('stat-avg-latency').textContent = Math.round(stats.avgLatency || 0);
+    document.getElementById('stat-tokens').textContent = ((stats.totalPromptChars || 0) + (stats.totalCompletionChars || 0)).toLocaleString();
+    document.getElementById('stat-errors').textContent = '0%'; // Placeholder for now
+
+    // Update Charts
+    updateCharts(stats.history);
+}
+
+let latencyChartInst = null;
+let tokenChartInst = null;
+
+function updateCharts(history = []) {
+    // History is expected to be array of { timestamp, latency, tokens }
+    // If not provided by API yet, mock or skip
+    if (!history.length) return;
+
+    const labels = history.map(h => new Date(h.timestamp).toLocaleTimeString());
+    const latencies = history.map(h => h.latency);
+    const tokens = history.map(h => h.tokens);
+
+    // Latency Chart
+    const ctxL = document.getElementById('latencyChart').getContext('2d');
+    const isDark = document.documentElement.classList.contains('dark');
+    const gridColor = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+    const textColor = isDark ? '#9ca3af' : '#64748b';
+
+    if (latencyChartInst) latencyChartInst.destroy();
+    latencyChartInst = new Chart(ctxL, {
+        type: 'line',
+        data: {
+            labels,
+            datasets: [{
+                label: 'Latency (ms)',
+                data: latencies,
+                borderColor: '#8b5cf6',
+                tension: 0.4,
+                fill: true,
+                backgroundColor: isDark ? 'rgba(139, 92, 246, 0.1)' : 'rgba(139, 92, 246, 0.05)'
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: { legend: { display: false } },
+            scales: { 
+                y: { 
+                    beginAtZero: true, 
+                    grid: { color: gridColor, borderDash: [2, 4] },
+                    ticks: { color: textColor }
+                }, 
+                x: { 
+                    grid: { display: false },
+                    ticks: { color: textColor }
+                } 
+            }
+        }
+    });
+
+    // Token Chart
+    const ctxT = document.getElementById('tokenChart').getContext('2d');
+    if (tokenChartInst) tokenChartInst.destroy();
+    tokenChartInst = new Chart(ctxT, {
+        type: 'bar',
+        data: {
+            labels,
+            datasets: [{
+                label: 'Tokens',
+                data: tokens,
+                backgroundColor: '#0ea5e9',
+                borderRadius: 4
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: { legend: { display: false } },
+            scales: { 
+                y: { 
+                    beginAtZero: true, 
+                    grid: { color: gridColor, borderDash: [2, 4] },
+                    ticks: { color: textColor }
+                }, 
+                x: { 
+                    grid: { display: false },
+                    ticks: { color: textColor }
+                } 
+            }
+        }
+    });
+}
+
+async function loadTraces() {
+    const traces = await fetchAPI('traces'); // Expects list of recent traces
+    const tbody = document.getElementById('traces-table-body');
+    tbody.innerHTML = '';
+
+    if (!traces || traces.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="6" class="px-6 py-4 text-center text-sm text-slate-500 dark:text-gray-400">No traces found</td></tr>';
+        return;
+    }
+
+    traces.forEach(t => {
+        const row = document.createElement('tr');
+        row.className = 'hover:bg-slate-50 dark:hover:bg-white/5 transition-colors cursor-pointer';
+        row.onclick = () => window.location.href = `/dashboard/trace.html?id=${t.trace_id}`;
+        
+        const statusColor = t.error && t.error !== '{}' ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400';
+        const statusText = t.error && t.error !== '{}' ? 'Error' : 'Success';
+
+        row.innerHTML = `
+            <td class="px-6 py-4 whitespace-nowrap text-xs font-mono text-slate-500 dark:text-gray-400">${t.trace_id.slice(0, 8)}...</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-900 dark:text-white">${t.name}</td>
+            <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusColor}">${statusText}</span></td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500 dark:text-gray-400">${t.end_time - t.start_time}ms</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500 dark:text-gray-400">${new Date(t.start_time).toLocaleString()}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium text-brand-600 dark:text-brand-400 hover:text-brand-900 dark:hover:text-brand-300">View</td>
+        `;
+        tbody.appendChild(row);
+    });
+}
+
+async function loadSessions() {
+    const sessions = await fetchAPI('sessions');
+    const tbody = document.getElementById('sessions-table-body');
+    tbody.innerHTML = '';
+
+    if (!sessions || sessions.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="4" class="px-6 py-4 text-center text-sm text-slate-500">No active sessions</td></tr>';
+        return;
+    }
+
+    sessions.forEach(s => {
+        const row = document.createElement('tr');
+        row.className = 'hover:bg-slate-50 dark:hover:bg-white/5 transition-colors';
+        
+        row.innerHTML = `
+            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-900 dark:text-white">${s.session_id}</td>
+            <td class="px-6 py-4 text-sm text-slate-500 dark:text-gray-400 truncate max-w-xs">${s.metadata?.last_query || '-'}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500 dark:text-gray-400">${new Date(s.last_activity_time).toLocaleString()}</td>
+            <td class="px-6 py-4 text-sm text-slate-500 dark:text-gray-400 font-mono text-xs">${JSON.stringify(s.metadata || {}).slice(0, 30)}...</td>
+        `;
+        tbody.appendChild(row);
+    });
+}
+
+/* Modal functions removed as trace details are now on a separate page */
+function showTraceDetails(traceId) {
+    window.location.href = `/dashboard/trace.html?id=${traceId}`;
+}
+
+function closeModal() {
+    // Deprecated
+}
+
+function toggleTheme() {
+    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');
+    }
+
+    if (lastStats && lastStats.history) {
+        updateCharts(lastStats.history);
+    }
+}

package/src/dashboard/index.html

@@ -0,0 +1,362 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="icon" type="image/png" href="logo.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vectra Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        brand: {
+                            50: '#f5f3ff',
+                            100: '#ede9fe',
+                            200: '#ddd6fe',
+                            300: '#c4b5fd',
+                            400: '#a78bfa',
+                            500: '#8b5cf6',
+                            600: '#7c3aed',
+                            700: '#6d28d9',
+                            800: '#5b21b6',
+                            900: '#4c1d95',
+                            950: '#2e1065',
+                        },
+                        dark: {
+                            950: '#020204',
+                            900: '#08080C',
+                            850: '#0F0F16',
+                            800: '#14141F',
+                            700: '#1C1C2E',
+                        }
+                    }
+                }
+            }
+        }
+
+        // Check for saved theme preference or use system preference
+        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        /* Custom scrollbar for dark mode compatibility */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 4px;
+        }
+        .dark ::-webkit-scrollbar-thumb {
+            background: #334155;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #94a3b8;
+        }
+        .dark ::-webkit-scrollbar-thumb:hover {
+            background: #475569;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-slate-900 dark:bg-dark-950 dark:text-white h-screen overflow-hidden flex transition-colors duration-200">
+
+    <!-- Sidebar -->
+    <aside class="w-64 bg-white border-r border-slate-200 dark:bg-dark-900 dark:border-white/5 flex-col hidden md:flex transition-colors duration-200">
+        <!-- Logo -->
+        <div class="h-16 flex items-center px-6 border-b border-slate-200 dark:border-white/5">
+            <div class="flex items-center gap-3">
+                <img src="logo.png" alt="Vectra" class="w-8 h-8">
+                <span class="text-xl font-bold text-slate-900 dark:text-white tracking-tight">Vectra</span>
+            </div>
+        </div>
+
+        <!-- Navigation -->
+        <nav class="flex-1 px-4 py-6 space-y-1 overflow-y-auto">
+            <div class="mb-6">
+                <p class="px-2 text-xs font-semibold text-slate-500 dark:text-gray-500 uppercase tracking-wider mb-2">Menu</p>
+                <button onclick="switchView('overview')" id="btn-overview" class="w-full flex items-center px-3 py-2 text-sm font-medium rounded-lg sidebar-link active group transition-colors">
+                    <i data-lucide="layout-dashboard" class="w-5 h-5 mr-3"></i>
+                    Dashboard
+                </button>
+                <button onclick="switchView('traces')" id="btn-traces" class="w-full flex items-center px-3 py-2 text-sm font-medium rounded-lg sidebar-link group transition-colors">
+                    <i data-lucide="activity" class="w-5 h-5 mr-3"></i>
+                    Traces
+                </button>
+                <button onclick="switchView('sessions')" id="btn-sessions" class="w-full flex items-center px-3 py-2 text-sm font-medium rounded-lg sidebar-link group transition-colors">
+                    <i data-lucide="users" class="w-5 h-5 mr-3"></i>
+                    Sessions
+                </button>
+            </div>
+            
+            <div>
+                <p class="px-2 text-xs font-semibold text-slate-500 dark:text-gray-500 uppercase tracking-wider mb-2">Management</p>
+                <a href="#" class="w-full flex items-center px-3 py-2 text-sm font-medium rounded-lg text-slate-600 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-white/5 hover:text-slate-900 dark:hover:text-white group transition-colors">
+                    <i data-lucide="settings" class="w-5 h-5 mr-3 text-slate-400 dark:text-gray-500 group-hover:text-slate-600 dark:group-hover:text-gray-300"></i>
+                    Settings
+                </a>
+                <a href="#" class="w-full flex items-center px-3 py-2 text-sm font-medium rounded-lg text-slate-600 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-white/5 hover:text-slate-900 dark:hover:text-white group transition-colors">
+                    <i data-lucide="book-open" class="w-5 h-5 mr-3 text-slate-400 dark:text-gray-500 group-hover:text-slate-600 dark:group-hover:text-gray-300"></i>
+                    Documentation
+                </a>
+            </div>
+        </nav>
+
+        <!-- User Profile (Bottom) -->
+        <div class="p-4 border-t border-slate-200 dark:border-white/5">
+            <div class="flex items-center gap-3">
+                <div class="w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/50 flex items-center justify-center text-brand-600 dark:text-brand-400 font-bold text-xs border border-brand-200 dark:border-brand-500/20">
+                    AD
+                </div>
+                <div>
+                    <p class="text-sm font-medium text-slate-900 dark:text-white">Admin User</p>
+                    <p class="text-xs text-slate-500 dark:text-gray-500">admin@vectra.ai</p>
+                </div>
+                <button onclick="toggleTheme()" class="ml-auto p-1.5 text-slate-400 hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300 rounded-lg hover:bg-slate-100 dark:hover:bg-white/5 transition-colors">
+                     <i data-lucide="moon" class="w-4 h-4 hidden dark:block"></i>
+                     <i data-lucide="sun" class="w-4 h-4 block dark:hidden"></i>
+                </button>
+            </div>
+        </div>
+    </aside>
+
+    <!-- Main Content -->
+    <div class="flex-1 flex flex-col min-w-0 overflow-hidden bg-gray-50 dark:bg-dark-950 transition-colors duration-200">
+        
+        <!-- Top Header -->
+        <header class="bg-white dark:bg-dark-900 border-b border-slate-200 dark:border-white/5 h-16 flex items-center justify-between px-6 lg:px-8 transition-colors duration-200">
+            <div class="flex items-center flex-1">
+                <div class="relative w-full max-w-md">
+                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                        <i data-lucide="search" class="h-5 w-5 text-slate-400 dark:text-gray-500"></i>
+                    </div>
+                    <input type="text" class="block w-full pl-10 pr-3 py-2 border border-slate-200 dark:border-white/10 rounded-lg leading-5 bg-slate-50 dark:bg-dark-800 text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-gray-500 focus:outline-none focus:bg-white dark:focus:bg-dark-800 focus:ring-1 focus:ring-brand-500 focus:border-brand-500 sm:text-sm transition duration-150 ease-in-out" placeholder="Search traces, sessions, or logs...">
+                </div>
+            </div>
+            <div class="ml-4 flex items-center gap-4">
+                <div class="flex items-center gap-2">
+                    <label for="projectSelect" class="text-sm font-medium text-slate-600 dark:text-gray-500">Project:</label>
+                    <select id="projectSelect" class="bg-slate-50 dark:bg-dark-800 border border-slate-200 dark:border-white/10 text-slate-900 dark:text-white text-sm rounded-lg focus:ring-brand-500 focus:border-brand-500 block p-2">
+                        <option value="all">All Projects</option>
+                    </select>
+                </div>
+                <button class="p-2 text-slate-400 hover:text-slate-600 dark:text-gray-400 dark:hover:text-white transition-colors">
+                    <i data-lucide="bell" class="w-6 h-6"></i>
+                </button>
+            </div>
+        </header>
+
+        <!-- Main Scrollable Area -->
+        <main class="flex-1 overflow-y-auto p-6 lg:p-8">
+            
+            <!-- View: Overview -->
+            <div id="view-overview" class="space-y-8 max-w-7xl mx-auto">
+                <div>
+                    <h2 class="text-2xl font-bold text-slate-900 dark:text-white">System Overview</h2>
+                    <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">Real-time metrics and system status.</p>
+                </div>
+
+                <!-- Status Cards -->
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    
+                    <!-- Total Requests -->
+                    <div class="bg-white dark:bg-dark-900 rounded-xl p-6 shadow-sm border border-slate-200 dark:border-white/5 relative overflow-hidden group transition-colors duration-200">
+                        <div class="absolute left-0 top-0 bottom-0 w-1.5 bg-emerald-500"></div>
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <h3 class="text-slate-500 dark:text-gray-400 text-sm font-medium">Total Requests</h3>
+                                <div class="mt-4 flex items-baseline">
+                                    <span class="text-4xl font-bold text-slate-900 dark:text-white tracking-tight" id="stat-total-req">-</span>
+                                </div>
+                                <div class="mt-2 flex items-center text-sm text-emerald-600 dark:text-emerald-400 font-medium">
+                                    <span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
+                                    Operational
+                                </div>
+                            </div>
+                            <div class="p-3 bg-emerald-50 dark:bg-emerald-500/10 rounded-xl text-emerald-600 dark:text-emerald-400">
+                                <i data-lucide="server" class="w-6 h-6"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Error Rate -->
+                    <div class="bg-white dark:bg-dark-900 rounded-xl p-6 shadow-sm border border-slate-200 dark:border-white/5 relative overflow-hidden group transition-colors duration-200">
+                        <div class="absolute left-0 top-0 bottom-0 w-1.5 bg-rose-500"></div>
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <h3 class="text-slate-500 dark:text-gray-400 text-sm font-medium">Error Rate</h3>
+                                <div class="mt-4 flex items-baseline">
+                                    <span class="text-4xl font-bold text-slate-900 dark:text-white tracking-tight" id="stat-errors">-</span>
+                                </div>
+                                <div class="mt-2 flex items-center text-sm text-rose-600 dark:text-rose-400 font-medium">
+                                    <i data-lucide="alert-circle" class="w-4 h-4 mr-1"></i>
+                                    Check Logs
+                                </div>
+                            </div>
+                            <div class="p-3 bg-rose-50 dark:bg-rose-500/10 rounded-xl text-rose-600 dark:text-rose-400">
+                                <i data-lucide="activity" class="w-6 h-6"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Token Usage -->
+                    <div class="bg-white dark:bg-dark-900 rounded-xl p-6 shadow-sm border border-slate-200 dark:border-white/5 flex flex-col justify-between transition-colors duration-200">
+                        <div>
+                            <div class="flex justify-between items-center mb-4">
+                                <h3 class="text-slate-500 dark:text-gray-400 text-sm font-medium">Token Usage</h3>
+                                <span class="text-xs font-medium text-brand-600 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/10 px-2 py-1 rounded-full">Monthly</span>
+                            </div>
+                            <div class="flex items-baseline mb-2">
+                                <span class="text-2xl font-bold text-slate-900 dark:text-white" id="stat-tokens">-</span>
+                                <span class="ml-2 text-sm text-slate-500 dark:text-gray-500">tokens</span>
+                            </div>
+                            <div class="w-full bg-slate-100 dark:bg-dark-800 rounded-full h-2 mb-4 overflow-hidden">
+                                <div class="bg-brand-500 h-2 rounded-full" style="width: 65%"></div>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-4 pt-4 border-t border-slate-200 dark:border-white/5">
+                            <div>
+                                <p class="text-xs text-slate-500 dark:text-gray-500">Prompt</p>
+                                <p class="font-semibold text-slate-900 dark:text-white">~65%</p>
+                            </div>
+                            <div>
+                                <p class="text-xs text-slate-500 dark:text-gray-500">Completion</p>
+                                <p class="font-semibold text-slate-900 dark:text-white">~35%</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Charts Section -->
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <!-- Latency Chart -->
+                    <div class="lg:col-span-2 bg-white dark:bg-dark-900 rounded-xl shadow-sm border border-slate-200 dark:border-white/5 p-6 transition-colors duration-200">
+                        <div class="flex justify-between items-center mb-6">
+                            <div>
+                                <h3 class="text-lg font-bold text-slate-900 dark:text-white">Latency Trend</h3>
+                                <p class="text-sm text-slate-500 dark:text-gray-400">Response time over last 24 hours</p>
+                            </div>
+                            <div class="text-right">
+                                <p class="text-2xl font-bold text-brand-600 dark:text-brand-400" id="stat-avg-latency">-</p>
+                                <p class="text-xs text-slate-500 dark:text-gray-500">Avg ms</p>
+                            </div>
+                        </div>
+                        <div class="h-72 w-full">
+                            <canvas id="latencyChart"></canvas>
+                        </div>
+                    </div>
+
+                    <!-- Secondary Chart -->
+                    <div class="bg-white dark:bg-dark-900 rounded-xl shadow-sm border border-slate-200 dark:border-white/5 p-6 transition-colors duration-200">
+                        <div class="mb-6">
+                            <h3 class="text-lg font-bold text-slate-900 dark:text-white">Token Distribution</h3>
+                            <p class="text-sm text-slate-500 dark:text-gray-400">Usage by interaction</p>
+                        </div>
+                        <div class="h-64 w-full">
+                            <canvas id="tokenChart"></canvas>
+                        </div>
+                        <div class="mt-4 pt-4 border-t border-slate-200 dark:border-white/5">
+                            <button class="w-full py-2 px-4 bg-slate-100 hover:bg-slate-200 dark:bg-dark-800 dark:hover:bg-dark-700 text-slate-600 dark:text-gray-300 text-sm font-medium rounded-lg transition-colors flex items-center justify-center">
+                                View Full Report
+                                <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- View: Traces -->
+            <div id="view-traces" class="hidden space-y-6 max-w-7xl mx-auto">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <h2 class="text-2xl font-bold text-slate-900 dark:text-white">Traces</h2>
+                        <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">Detailed logs of all LLM interactions.</p>
+                    </div>
+                    <div class="flex gap-2">
+                        <button class="px-4 py-2 bg-white dark:bg-dark-800 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-gray-300 rounded-lg text-sm font-medium hover:bg-slate-50 dark:hover:bg-dark-700 flex items-center transition-colors">
+                            <i data-lucide="filter" class="w-4 h-4 mr-2"></i> Filter
+                        </button>
+                        <button class="px-4 py-2 bg-brand-600 text-white rounded-lg text-sm font-medium hover:bg-brand-700 flex items-center transition-colors">
+                            <i data-lucide="download" class="w-4 h-4 mr-2"></i> Export
+                        </button>
+                    </div>
+                </div>
+
+                <div class="bg-white dark:bg-dark-900 rounded-xl shadow-sm border border-slate-200 dark:border-white/5 overflow-hidden transition-colors duration-200">
+                    <div class="overflow-x-auto">
+                        <table class="min-w-full divide-y divide-slate-200 dark:divide-white/5">
+                            <thead class="bg-slate-50 dark:bg-dark-800">
+                                <tr>
+                                    <th class="px-6 py-4 text-left text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Trace ID</th>
+                                    <th class="px-6 py-4 text-left text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Name</th>
+                                    <th class="px-6 py-4 text-left text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
+                                    <th class="px-6 py-4 text-left text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Latency</th>
+                                    <th class="px-6 py-4 text-left text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Time</th>
+                                    <th class="px-6 py-4 text-right text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Action</th>
+                                </tr>
+                            </thead>
+                            <tbody class="bg-white dark:bg-dark-900 divide-y divide-slate-200 dark:divide-white/5" id="traces-table-body">
+                                <!-- Populated via JS -->
+                            </tbody>
+                        </table>
+                    </div>
+                    <!-- Pagination (Mock) -->
+                    <div class="bg-slate-50 dark:bg-dark-800 px-6 py-4 border-t border-slate-200 dark:border-white/5 flex items-center justify-between">
+                        <span class="text-sm text-slate-500 dark:text-gray-400">Showing recent items</span>
+                        <div class="flex gap-2">
+                            <button class="p-2 border border-slate-200 dark:border-white/10 rounded-md bg-white dark:bg-dark-900 text-slate-400 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-dark-800 disabled:opacity-50" disabled>
+                                <i data-lucide="chevron-left" class="w-4 h-4"></i>
+                            </button>
+                            <button class="p-2 border border-slate-200 dark:border-white/10 rounded-md bg-white dark:bg-dark-900 text-slate-400 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-dark-800">
+                                <i data-lucide="chevron-right" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- View: Sessions -->
+            <div id="view-sessions" class="hidden space-y-6 max-w-7xl mx-auto">
+                <div>
+                    <h2 class="text-2xl font-bold text-slate-900 dark:text-white">Active Sessions</h2>
+                    <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">User sessions and conversation history.</p>
+                </div>
+
+                <div class="bg-white dark:bg-dark-900 rounded-xl shadow-sm border border-slate-200 dark:border-white/5 overflow-hidden transition-colors duration-200">
+                    <div class="overflow-x-auto">
+                        <table class="min-w-full divide-y divide-slate-200 dark:divide-white/5">
+                            <thead class="bg-slate-50 dark:bg-dark-800">
+                                <tr>
+                                    <th class="px-6 py-4 text-left text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Session ID</th>
+                                    <th class="px-6 py-4 text-left text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Last Query</th>
+                                    <th class="px-6 py-4 text-left text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Last Active</th>
+                                    <th class="px-6 py-4 text-left text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Metadata</th>
+                                </tr>
+                            </thead>
+                            <tbody class="bg-white dark:bg-dark-900 divide-y divide-slate-200 dark:divide-white/5" id="sessions-table-body">
+                                <!-- Populated via JS -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+        </main>
+    </div>
+    
+    <script src="dashboard-script.js"></script>
+</body>
+</html>