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/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) {