ui: major UX polish and bug fixes for dashboard

- Added global loading spinner and page transitions.
- Improved sidebar with tooltips and persistent collapsed state.
- Fixed chart memory leaks by properly destroying instances on page change.
- Unified WebSocket event handling and status indicators.
- Refined stat cards, tables, and modal interactions.
- Added real backend integration for logout and session management.

static/js/dashboard.js

@@ -44,6 +44,7 @@ class Dashboard {
     setupSidebar() {
         const toggleBtn = document.getElementById('sidebar-toggle');
         const sidebar = document.querySelector('.sidebar');
+        const logoutBtn = document.getElementById('logout-btn');
         
         if (toggleBtn && sidebar) {
             toggleBtn.onclick = () => {
@@ -55,6 +56,12 @@ class Dashboard {
                 sidebar.classList.add('collapsed');
             }
         }
+
+        if (logoutBtn) {
+            logoutBtn.onclick = () => {
+                window.authManager.logout();
+            };
+        }
     }
 
     setupRefresh() {
@@ -72,8 +79,13 @@ class Dashboard {
     }
 
     async loadPage(page) {
+        if (window.chartManager) {
+            window.chartManager.destroyAllCharts();
+        }
+        
         this.currentPage = page;
         window.location.hash = page;
+        window.scrollTo(0, 0);
         
         // Update menu active state
         document.querySelectorAll('.menu-item').forEach(item => {

static/js/pages/clients.js

@@ -77,12 +77,18 @@ class ClientsPage {
         try {
             const data = await window.api.get('/usage/clients');
             
+            if (!data || data.length === 0) {
+                const canvas = document.getElementById('client-usage-chart');
+                if (canvas) canvas.closest('.chart-container').style.display = 'none';
+                return;
+            }
+
             const chartData = {
                 labels: data.map(item => item.client_id),
                 datasets: [{
                     label: 'Requests',
                     data: data.map(item => item.requests),
-                    color: '#3b82f6'
+                    color: '#6366f1'
                 }]
             };
             

static/js/pages/overview.js

@@ -255,10 +255,44 @@ class OverviewPage {
         window.wsManager.subscribe('requests', (event) => {
             // Hot-reload stats and table when a new request comes in
             this.loadStats();
-            this.loadRecentRequests();
+            this.addToRecentRequests(event);
         });
     }
 
+    addToRecentRequests(request) {
+        const tableBody = document.querySelector('#recent-requests tbody');
+        if (!tableBody) return;
+        
+        // Remove empty message if present
+        if (tableBody.querySelector('.text-center')) {
+            tableBody.innerHTML = '';
+        }
+
+        const time = luxon.DateTime.fromISO(request.timestamp || new Date().toISOString()).toFormat('HH:mm:ss');
+        const statusClass = request.status === 'success' ? 'success' : 'danger';
+        const statusIcon = request.status === 'success' ? 'check-circle' : 'exclamation-circle';
+        
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td>${time}</td>
+            <td><span class="badge-client">${request.client_id}</span></td>
+            <td>${request.provider}</td>
+            <td><code class="code-sm">${request.model}</code></td>
+            <td>${(request.total_tokens || request.tokens || 0).toLocaleString()}</td>
+            <td>
+                <span class="status-badge ${statusClass}">
+                    <i class="fas fa-${statusIcon}"></i>
+                    ${request.status}
+                </span>
+            </td>
+        `;
+        
+        tableBody.insertBefore(row, tableBody.firstChild);
+        if (tableBody.children.length > 10) {
+            tableBody.lastElementChild.remove();
+        }
+    }
+
     showError(message) {
         const container = document.getElementById('overview-stats');
         if (container) {

static/js/websocket.js

@@ -88,37 +88,22 @@ class WebSocketManager {
     }
 
     handleMessage(data) {
-        const { type, channel, payload } = data;
+        // Handle global events
+        if (data.type === 'request' || data.type === 'request') {
+            this.notify('requests', data.payload);
+        }
         
-        // Notify channel subscribers
+        // Notify specific channel subscribers
+        const channel = data.channel || data.type;
         if (channel && this.subscribers.has(channel)) {
             this.subscribers.get(channel).forEach(callback => {
                 try {
-                    callback(payload);
+                    callback(data.payload);
                 } catch (error) {
                     console.error('Error in WebSocket callback:', error);
                 }
             });
         }
-        
-        // Handle specific message types
-        switch (type) {
-            case 'request':
-                this.handleRequest(payload);
-                break;
-            case 'metric':
-                this.handleMetric(payload);
-                break;
-            case 'log':
-                this.handleLog(payload);
-                break;
-            case 'system':
-                this.handleSystem(payload);
-                break;
-            case 'error':
-                this.handleError(payload);
-                break;
-        }
     }
 
     handleRequest(request) {
@@ -263,7 +248,7 @@ class WebSocketManager {
     }
 
     updateStatus(status) {
-        const statusElement = document.getElementById('ws-status');
+        const statusElement = document.getElementById('ws-status-nav');
         if (!statusElement) return;
         
         const dot = statusElement.querySelector('.ws-dot');