From 2c5a6a596b4b15a81f2ca2fa402ab7f8580d64fb Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Thu, 26 Feb 2026 15:48:01 -0500
Subject: [PATCH] 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/css/dashboard.css    | 121 +++++++++++++++++++++++++++++++++++-
 static/index.html           |  45 +++++++-------
 static/js/dashboard.js      |  12 ++++
 static/js/pages/clients.js  |   8 ++-
 static/js/pages/overview.js |  36 ++++++++++-
 static/js/websocket.js      |  31 +++------
 6 files changed, 202 insertions(+), 51 deletions(-)

diff --git a/static/css/dashboard.css b/static/css/dashboard.css
index 2014f72d..2e5da3e6 100644
--- a/static/css/dashboard.css
+++ b/static/css/dashboard.css
@@ -403,6 +403,121 @@ body {
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.ws-dot.connected { background: var(--success); box-shadow: 0 0 8px var(--success); }
-.ws-dot.disconnected { background: var(--danger); }
-.ws-dot.error { background: var(--warning); }
+/* Loading Spinner */
+.spinner-container {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2000;
+}
+
+.loading .spinner-container {
+    display: block;
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid rgba(99, 102, 241, 0.1);
+    border-radius: 50%;
+    border-top-color: var(--primary);
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Page Content Transition */
+.page-content {
+    padding: 2rem;
+    animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(5px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Sidebar Tooltips (for collapsed state) */
+.sidebar.collapsed .menu-item {
+    position: relative;
+}
+
+.sidebar.collapsed .menu-item::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    left: 100%;
+    margin-left: 10px;
+    background: #1e293b;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s;
+    white-space: nowrap;
+    z-index: 1001;
+}
+
+.sidebar.collapsed .menu-item:hover::after {
+    opacity: 1;
+}
+
+/* Card Header Polish */
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.25rem;
+}
+
+.card-title {
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* Table Polish */
+.table {
+    width: 100%;
+    border-spacing: 0;
+}
+
+.table th {
+    background: #f8fafc;
+    text-align: left;
+    padding: 0.75rem 1rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #64748b;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.table td {
+    padding: 1rem;
+    border-bottom: 1px solid #f1f5f9;
+}
+
+.table tr:last-child td {
+    border-bottom: none;
+}
+
+/* Stat Card Hover */
+.stat-card {
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.stat-card:hover {
+    border-color: var(--primary-light);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
diff --git a/static/index.html b/static/index.html
index 80d6c045..25232407 100644
--- a/static/index.html
+++ b/static/index.html
@@ -54,7 +54,7 @@
         <nav class="sidebar">
             <div class="sidebar-header">
                 <div class="logo">
-                    <i class="fas fa-robot"></i>
+                    <i class="fas fa-shield-alt"></i>
                     <span>LLM Proxy</span>
                 </div>
                 <button class="sidebar-toggle" id="sidebar-toggle">
@@ -65,15 +65,15 @@
             <div class="sidebar-menu">
                 <div class="menu-section">
                     <h3 class="menu-title">MAIN</h3>
-                    <a href="#overview" class="menu-item active" data-page="overview">
-                        <i class="fas fa-tachometer-alt"></i>
+                    <a href="#overview" class="menu-item active" data-page="overview" data-tooltip="Dashboard Overview">
+                        <i class="fas fa-th-large"></i>
                         <span>Overview</span>
                     </a>
-                    <a href="#analytics" class="menu-item" data-page="analytics">
+                    <a href="#analytics" class="menu-item" data-page="analytics" data-tooltip="Usage Analytics">
                         <i class="fas fa-chart-line"></i>
                         <span>Analytics</span>
                     </a>
-                    <a href="#costs" class="menu-item" data-page="costs">
+                    <a href="#costs" class="menu-item" data-page="costs" data-tooltip="Cost Tracking">
                         <i class="fas fa-dollar-sign"></i>
                         <span>Cost Management</span>
                     </a>
@@ -81,15 +81,15 @@
                 
                 <div class="menu-section">
                     <h3 class="menu-title">MANAGEMENT</h3>
-                    <a href="#clients" class="menu-item" data-page="clients">
+                    <a href="#clients" class="menu-item" data-page="clients" data-tooltip="API Clients">
                         <i class="fas fa-users"></i>
                         <span>Client Management</span>
                     </a>
-                    <a href="#providers" class="menu-item" data-page="providers">
+                    <a href="#providers" class="menu-item" data-page="providers" data-tooltip="Model Providers">
                         <i class="fas fa-server"></i>
                         <span>Providers</span>
                     </a>
-                    <a href="#monitoring" class="menu-item" data-page="monitoring">
+                    <a href="#monitoring" class="menu-item" data-page="monitoring" data-tooltip="Live Monitoring">
                         <i class="fas fa-heartbeat"></i>
                         <span>Real-time Monitoring</span>
                     </a>
@@ -97,12 +97,12 @@
                 
                 <div class="menu-section">
                     <h3 class="menu-title">SYSTEM</h3>
-                    <a href="#settings" class="menu-item" data-page="settings">
+                    <a href="#settings" class="menu-item" data-page="settings" data-tooltip="System Settings">
                         <i class="fas fa-cog"></i>
                         <span>Settings</span>
                     </a>
-                    <a href="#logs" class="menu-item" data-page="logs">
-                        <i class="fas fa-file-alt"></i>
+                    <a href="#logs" class="menu-item" data-page="logs" data-tooltip="System Logs">
+                        <i class="fas fa-list-alt"></i>
                         <span>System Logs</span>
                     </a>
                 </div>
@@ -118,7 +118,7 @@
                         <span class="user-role">Super Admin</span>
                     </div>
                 </div>
-                <button class="logout-btn" id="logout-btn">
+                <button class="logout-btn" id="logout-btn" title="Logout">
                     <i class="fas fa-sign-out-alt"></i>
                 </button>
             </div>
@@ -132,11 +132,11 @@
                     <h1 class="page-title" id="page-title">Dashboard Overview</h1>
                 </div>
                 <div class="nav-right">
-                    <div class="nav-item">
-                        <i class="fas fa-bell"></i>
-                        <span class="badge">3</span>
+                    <div class="nav-item" id="ws-status-nav" title="WebSocket Connection Status">
+                        <div class="ws-dot"></div>
+                        <span class="ws-text">Connecting...</span>
                     </div>
-                    <div class="nav-item">
+                    <div class="nav-item" title="Refresh Current Page">
                         <i class="fas fa-sync-alt" id="refresh-btn"></i>
                     </div>
                     <div class="nav-item">
@@ -147,17 +147,16 @@
 
             <!-- Page Content -->
             <div class="page-content" id="page-content">
-                <!-- Overview page will be loaded here -->
+                <!-- Dynamic content container -->
+            </div>
+            
+            <!-- Global Spinner -->
+            <div class="spinner-container">
+                <div class="spinner"></div>
             </div>
         </main>
     </div>
 
-    <!-- WebSocket Status Indicator -->
-    <div class="ws-status" id="ws-status">
-        <span class="ws-dot"></span>
-        <span class="ws-text">Connecting...</span>
-    </div>
-
     <!-- Scripts -->
     <script src="/js/api.js"></script>
     <script src="/js/auth.js"></script>
diff --git a/static/js/dashboard.js b/static/js/dashboard.js
index 72f4773e..487e76bb 100644
--- a/static/js/dashboard.js
+++ b/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 => {
diff --git a/static/js/pages/clients.js b/static/js/pages/clients.js
index 84566cc6..49620e53 100644
--- a/static/js/pages/clients.js
+++ b/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'
                 }]
             };
             
diff --git a/static/js/pages/overview.js b/static/js/pages/overview.js
index a7bad805..42be02a1 100644
--- a/static/js/pages/overview.js
+++ b/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) {
diff --git a/static/js/websocket.js b/static/js/websocket.js
index ac54a60d..5130acc6 100644
--- a/static/js/websocket.js
+++ b/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');