fix(dashboard): add COALESCE to SQL aggregations and empty-state handling for charts

Backend: wrap SUM() queries with COALESCE in handle_time_series,
handle_clients_usage, and handle_detailed_usage to prevent NULL-induced
panics when no data exists for a time window.

Frontend: add showEmptyChart() empty-state messages and error feedback
across overview, analytics, costs, and clients pages. Rewrite analytics
loadCharts() to use Promise.allSettled() so each chart renders
independently on partial API failures.

static/js/pages/analytics.js

@@ -50,15 +50,63 @@ class AnalyticsPage {
     }
 
     async loadCharts() {
-        try {
-            const breakdown = await window.api.get('/analytics/breakdown');
-            const timeSeries = await window.api.get('/usage/time-series');
-            
-            this.renderAnalyticsChart(timeSeries.series);
-            this.renderClientsChart(breakdown.clients);
-            this.renderModelsChart(breakdown.models);
-        } catch (error) {
-            console.error('Error loading analytics charts:', error);
+        // Fetch each data source independently so one failure doesn't kill the others
+        const [timeSeriesResult, breakdownResult] = await Promise.allSettled([
+            window.api.get('/usage/time-series'),
+            window.api.get('/analytics/breakdown')
+        ]);
+
+        // Time-series chart
+        if (timeSeriesResult.status === 'fulfilled') {
+            const series = timeSeriesResult.value.series || [];
+            if (series.length > 0) {
+                this.renderAnalyticsChart(series);
+            } else {
+                this.showEmptyChart('analytics-chart', 'No request data in the last 24 hours');
+            }
+        } else {
+            console.error('Error loading time series:', timeSeriesResult.reason);
+            this.showEmptyChart('analytics-chart', 'Failed to load request data');
+        }
+
+        // Breakdown charts (clients + models)
+        if (breakdownResult.status === 'fulfilled') {
+            const breakdown = breakdownResult.value;
+            const clients = breakdown.clients || [];
+            const models = breakdown.models || [];
+
+            if (clients.length > 0) {
+                this.renderClientsChart(clients);
+            } else {
+                this.showEmptyChart('clients-chart', 'No client data available');
+            }
+
+            if (models.length > 0) {
+                this.renderModelsChart(models);
+            } else {
+                this.showEmptyChart('models-chart', 'No model data available');
+            }
+        } else {
+            console.error('Error loading analytics breakdown:', breakdownResult.reason);
+            this.showEmptyChart('clients-chart', 'Failed to load client data');
+            this.showEmptyChart('models-chart', 'Failed to load model data');
+        }
+    }
+
+    showEmptyChart(canvasId, message) {
+        const canvas = document.getElementById(canvasId);
+        if (!canvas) return;
+        const container = canvas.closest('.chart-container');
+        if (container) {
+            canvas.style.display = 'none';
+            let msg = container.querySelector('.empty-chart-msg');
+            if (!msg) {
+                msg = document.createElement('div');
+                msg.className = 'empty-chart-msg';
+                msg.style.cssText = 'display:flex;align-items:center;justify-content:center;height:200px;color:var(--fg4);font-size:0.9rem;';
+                container.appendChild(msg);
+            }
+            msg.textContent = message;
         }
     }