📈 Replace P95 Latency progress bar with interactive sparkline chart

Transform P95 Latency monitoring from static progress bar to dynamic time-series visualization:

🎯 Sparkline Features:
- Real-time 24-hour latency trend visualization (48 data points, 30min intervals)
- Dynamic scaling based on actual min/max values in dataset
- SLA threshold line at 50ms (red dashed line for visual reference)
- Trend indicator showing direction and magnitude of change (↗↘→)
- Smooth line chart with gruvbox green styling

📊 Visual Design:
- Canvas-based chart with high-DPI support
- Clean container with gruvbox theming
- Trend indicators: ↗ for increases (red), ↘ for decreases (green), → for stable
- 'Last 24h' period indicator for context
- Responsive design with automatic redraw on window resize

🔧 Technical Implementation:
- Real-time data buffer with 48-point sliding window
- Automatic chart updates with each new latency measurement
- Realistic sample data generation for smooth initial visualization
- Proper canvas scaling for crisp rendering on all devices
- Integrated with existing metric update system

This provides much more valuable operational insight than a static progress bar, allowing operators to quickly identify latency patterns, spikes, and trends over time.

Author: raold

static/dashboard.html

@@ -201,6 +201,47 @@
         .progress-fill.danger { background: linear-gradient(90deg, var(--red), var(--red-dim)); }
         .progress-fill.info { background: linear-gradient(90deg, var(--purple), var(--purple-dim)); }
 
+        /* Sparkline Chart Styles */
+        .sparkline-container {
+            margin: 15px 0;
+            background: var(--bg2);
+            border-radius: 8px;
+            padding: 12px;
+            border: 1px solid var(--bg3);
+        }
+
+        .sparkline-chart {
+            width: 100%;
+            height: 40px;
+            display: block;
+        }
+
+        .sparkline-info {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 8px;
+            font-size: 0.8rem;
+        }
+
+        .sparkline-trend {
+            font-weight: 600;
+            color: var(--green);
+        }
+
+        .sparkline-trend.up {
+            color: var(--red);
+        }
+
+        .sparkline-trend.down {
+            color: var(--green);
+        }
+
+        .sparkline-period {
+            color: var(--fg3);
+            font-style: italic;
+        }
+
         .status-indicator {
             display: inline-flex;
             align-items: center;
@@ -1538,8 +1579,12 @@ <h2>🧠 Production AI Memory System Performance</h2>
                 <h3>P95 Latency</h3>
                 <div class="metric-value success" id="p95Latency">38ms</div>
                 <div class="metric-target">SLA: <50ms</div>
-                <div class="progress-bar">
-                    <div class="progress-fill" style="width: 76%" id="p95Progress"></div>
+                <div class="sparkline-container">
+                    <canvas id="p95Sparkline" class="sparkline-chart"></canvas>
+                    <div class="sparkline-info">
+                        <span class="sparkline-trend" id="p95Trend">↓ 2.3ms</span>
+                        <span class="sparkline-period">Last 24h</span>
+                    </div>
                 </div>
                 <div class="status-indicator success">
                     <i class="fas fa-check-circle"></i> Within SLA
@@ -2413,6 +2458,110 @@ <h4>🚀 Production Features:</h4>
             document.body.style.overflow = 'auto';
         }
 
+        // P95 Latency Sparkline Data and Functions
+        let p95LatencyData = [];
+        const MAX_SPARKLINE_POINTS = 48; // 24 hours worth of data (30min intervals)
+
+        // Initialize with sample data
+        function initializeSparklineData() {
+            p95LatencyData = [];
+            for (let i = 0; i < MAX_SPARKLINE_POINTS; i++) {
+                // Generate realistic latency data with some variation
+                const baseLatency = 38;
+                const variation = (Math.random() - 0.5) * 10; // ±5ms variation
+                const value = Math.max(25, Math.min(50, baseLatency + variation));
+                p95LatencyData.push(value);
+            }
+        }
+
+        function updateSparklineData(newValue) {
+            if (p95LatencyData.length >= MAX_SPARKLINE_POINTS) {
+                p95LatencyData.shift(); // Remove oldest point
+            }
+            p95LatencyData.push(newValue);
+            drawSparkline();
+        }
+
+        function drawSparkline() {
+            const canvas = document.getElementById('p95Sparkline');
+            if (!canvas) return;
+            
+            const ctx = canvas.getContext('2d');
+            const rect = canvas.getBoundingClientRect();
+            canvas.width = rect.width * window.devicePixelRatio;
+            canvas.height = rect.height * window.devicePixelRatio;
+            ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+            
+            const width = rect.width;
+            const height = rect.height;
+            
+            // Clear canvas
+            ctx.clearRect(0, 0, width, height);
+            
+            if (p95LatencyData.length < 2) return;
+            
+            // Calculate min/max for scaling
+            const min = Math.min(...p95LatencyData);
+            const max = Math.max(...p95LatencyData);
+            const range = max - min || 1;
+            
+            // Draw sparkline
+            ctx.beginPath();
+            ctx.strokeStyle = '#b8bb26'; // Gruvbox green
+            ctx.lineWidth = 2;
+            
+            const stepX = width / (p95LatencyData.length - 1);
+            
+            p95LatencyData.forEach((value, index) => {
+                const x = index * stepX;
+                const y = height - ((value - min) / range) * height;
+                
+                if (index === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+            });
+            
+            ctx.stroke();
+            
+            // Draw SLA line at 50ms
+            const slaY = height - ((50 - min) / range) * height;
+            if (slaY >= 0 && slaY <= height) {
+                ctx.beginPath();
+                ctx.strokeStyle = '#fb4934'; // Gruvbox red
+                ctx.lineWidth = 1;
+                ctx.setLineDash([5, 5]);
+                ctx.moveTo(0, slaY);
+                ctx.lineTo(width, slaY);
+                ctx.stroke();
+                ctx.setLineDash([]);
+            }
+            
+            // Update trend indicator
+            updateTrendIndicator();
+        }
+
+        function updateTrendIndicator() {
+            const trendElement = document.getElementById('p95Trend');
+            if (!trendElement || p95LatencyData.length < 2) return;
+            
+            const current = p95LatencyData[p95LatencyData.length - 1];
+            const previous = p95LatencyData[p95LatencyData.length - 2];
+            const change = current - previous;
+            
+            if (Math.abs(change) < 0.1) {
+                trendElement.textContent = '→ Stable';
+                trendElement.className = 'sparkline-trend';
+            } else if (change > 0) {
+                trendElement.textContent = `↗ +${change.toFixed(1)}ms`;
+                trendElement.className = 'sparkline-trend up';
+            } else {
+                trendElement.textContent = `↘ ${change.toFixed(1)}ms`;
+                trendElement.className = 'sparkline-trend down';
+            }
+        }
+
         // Close modal when clicking outside
         window.onclick = function(event) {
             const modals = document.querySelectorAll('.branch-modal');
@@ -2441,10 +2590,21 @@ <h4>🚀 Production Features:</h4>
 
         // Initialize dashboard with production features
         document.addEventListener('DOMContentLoaded', function() {
+            initializeSparklineData();
             initializeCharts();
             startRealTimeUpdates();
             setupProductionFeatures();
             animateOnLoad();
+            
+            // Initial sparkline draw
+            setTimeout(() => {
+                drawSparkline();
+            }, 100);
+        });
+
+        // Redraw sparkline on window resize
+        window.addEventListener('resize', () => {
+            setTimeout(drawSparkline, 100);
         });
 
         function initializeCharts() {
@@ -3152,7 +3312,6 @@ <h4>🚀 Production Features:</h4>
                 updateElement('systemUptime', '99.8%');
 
                 // Update progress bars
-                updateProgressBar('p95Progress', 76);
                 updateProgressBar('cognitiveProgress', 78);
 
                 // Update live system metrics with simulated values
@@ -3226,7 +3385,6 @@ <h4>🚀 Production Features:</h4>
                 updateElement('consolidationRatioLatency', '67ms');
                 updateElement('consolidationRatioError', '0.02%');
 
-                updateProgressBar('p95Progress', 76);
                 updateProgressBar('cognitiveProgress', 78);
             }
         }
@@ -3317,14 +3475,9 @@ <h4>🚀 Production Features:</h4>
                         element.textContent = Math.round(newValue) + el.suffix;
                     }
 
-                    // Update progress bar for P95 latency (only one with progress bar)
+                    // Update sparkline for P95 latency
                     if (el.id === 'p95Latency') {
-                        const progressBar = document.getElementById('p95Progress');
-                        if (progressBar) {
-                            // Calculate percentage based on SLA of 50ms
-                            const percentage = Math.min(100, (50 - newValue) / 50 * 100);
-                            progressBar.style.width = Math.max(0, percentage) + '%';
-                        }
+                        updateSparklineData(newValue);
                     }
                 }
             });