✨ Update Storage Efficiency, Memory Velocity, and Pattern Discovery cards with new designs

- Replace Storage Efficiency progress bar with sparkline showing 7.2 TB space saved
- Update Memory Velocity to show 1,847 memories/hour with sparkline visualization
- Change Pattern Discovery Rate to 73.2% accuracy with time-series tracking
- Add comprehensive sparkline rendering for all new metrics
- Implement real-time data updates for storage, velocity, and pattern sparklines
- Match design specifications from user screenshots with proper trend indicators

Author: raold

static/dashboard.html

@@ -1594,10 +1594,14 @@ <h3>P95 Latency</h3>
             <div class="metric-card">
                 <div class="icon"><i class="fas fa-database"></i></div>
                 <h3>Storage Efficiency</h3>
-                <div class="metric-value success" id="storageEfficiency">24%</div>
-                <div class="metric-target">Post-consolidation ratio</div>
-                <div class="progress-bar">
-                    <div class="progress-fill" style="width: 24%"></div>
+                <div class="metric-value success" id="storageEfficiency">7.2 TB</div>
+                <div class="metric-target">Space saved by compression</div>
+                <div class="sparkline-container">
+                    <canvas id="storageSparkline" class="sparkline-chart"></canvas>
+                    <div class="sparkline-info">
+                        <span class="sparkline-trend" id="storageTrend">↑ 0.3 TB</span>
+                        <span class="sparkline-period">Last 7d</span>
+                    </div>
                 </div>
                 <div class="status-indicator success">
                     <i class="fas fa-compress-arrows-alt"></i> Optimized
@@ -1659,10 +1663,14 @@ <h3>API Performance</h3>
             <div class="metric-card">
                 <div class="icon"><i class="fas fa-rocket"></i></div>
                 <h3>Memory Velocity</h3>
-                <div class="metric-value success" id="memoryVelocity">2.8GB/s</div>
-                <div class="metric-target">Target: >2.0GB/s</div>
-                <div class="progress-bar">
-                    <div class="progress-fill" style="width: 140%"></div>
+                <div class="metric-value success" id="memoryVelocity">1,847</div>
+                <div class="metric-target">Memories processed/hour</div>
+                <div class="sparkline-container">
+                    <canvas id="velocitySparkline" class="sparkline-chart"></canvas>
+                    <div class="sparkline-info">
+                        <span class="sparkline-trend" id="velocityTrend">↑ 127</span>
+                        <span class="sparkline-period">Last 24h</span>
+                    </div>
                 </div>
                 <div class="status-indicator success">
                     <i class="fas fa-check-circle"></i> High Throughput
@@ -1672,10 +1680,14 @@ <h3>Memory Velocity</h3>
             <div class="metric-card">
                 <div class="icon"><i class="fas fa-search-plus"></i></div>
                 <h3>Pattern Discovery Rate</h3>
-                <div class="metric-value success" id="patternDiscoveryRateCard">4.2/hr</div>
-                <div class="metric-target">Target: >3.0/hr</div>
-                <div class="progress-bar">
-                    <div class="progress-fill" style="width: 140%"></div>
+                <div class="metric-value success" id="patternDiscoveryRateCard">73.2%</div>
+                <div class="metric-target">Pattern recognition accuracy</div>
+                <div class="sparkline-container">
+                    <canvas id="patternSparkline" class="sparkline-chart"></canvas>
+                    <div class="sparkline-info">
+                        <span class="sparkline-trend" id="patternTrend">↑ 2.1%</span>
+                        <span class="sparkline-period">Last 24h</span>
+                    </div>
                 </div>
                 <div class="status-indicator success">
                     <i class="fas fa-check-circle"></i> Above Target
@@ -2462,15 +2474,46 @@ <h4>🚀 Production Features:</h4>
         let p95LatencyData = [];
         const MAX_SPARKLINE_POINTS = 48; // 24 hours worth of data (30min intervals)
 
+        // Storage Efficiency Sparkline Data
+        let storageData = [];
+        
+        // Memory Velocity Sparkline Data
+        let velocityData = [];
+        
+        // Pattern Discovery Sparkline Data
+        let patternData = [];
+
         // Initialize with sample data
         function initializeSparklineData() {
             p95LatencyData = [];
+            storageData = [];
+            velocityData = [];
+            patternData = [];
+            
             for (let i = 0; i < MAX_SPARKLINE_POINTS; i++) {
-                // Generate realistic latency data with some variation
+                // P95 Latency data
                 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);
+                const latencyVariation = (Math.random() - 0.5) * 10; // ±5ms variation
+                const latencyValue = Math.max(25, Math.min(50, baseLatency + latencyVariation));
+                p95LatencyData.push(latencyValue);
+                
+                // Storage Efficiency data (in TB)
+                const baseStorage = 7.2;
+                const storageVariation = (Math.random() - 0.5) * 0.8; // ±0.4TB variation
+                const storageValue = Math.max(6.0, Math.min(8.5, baseStorage + storageVariation));
+                storageData.push(storageValue);
+                
+                // Memory Velocity data (memories/hour)
+                const baseVelocity = 1847;
+                const velocityVariation = (Math.random() - 0.5) * 300; // ±150 variation
+                const velocityValue = Math.max(1400, Math.min(2200, baseVelocity + velocityVariation));
+                velocityData.push(velocityValue);
+                
+                // Pattern Discovery data (accuracy %)
+                const basePattern = 73.2;
+                const patternVariation = (Math.random() - 0.5) * 8; // ±4% variation
+                const patternValue = Math.max(65, Math.min(85, basePattern + patternVariation));
+                patternData.push(patternValue);
             }
         }
 
@@ -2482,6 +2525,30 @@ <h4>🚀 Production Features:</h4>
             drawSparkline();
         }
 
+        function updateStorageSparkline(newValue) {
+            if (storageData.length >= MAX_SPARKLINE_POINTS) {
+                storageData.shift();
+            }
+            storageData.push(newValue);
+            drawStorageSparkline();
+        }
+
+        function updateVelocitySparkline(newValue) {
+            if (velocityData.length >= MAX_SPARKLINE_POINTS) {
+                velocityData.shift();
+            }
+            velocityData.push(newValue);
+            drawVelocitySparkline();
+        }
+
+        function updatePatternSparkline(newValue) {
+            if (patternData.length >= MAX_SPARKLINE_POINTS) {
+                patternData.shift();
+            }
+            patternData.push(newValue);
+            drawPatternSparkline();
+        }
+
         function drawSparkline() {
             const canvas = document.getElementById('p95Sparkline');
             if (!canvas) return;
@@ -2562,6 +2629,195 @@ <h4>🚀 Production Features:</h4>
             }
         }
 
+        // Storage Efficiency Sparkline
+        function drawStorageSparkline() {
+            const canvas = document.getElementById('storageSparkline');
+            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;
+            
+            ctx.clearRect(0, 0, width, height);
+            
+            if (storageData.length < 2) return;
+            
+            const min = Math.min(...storageData);
+            const max = Math.max(...storageData);
+            const range = max - min || 1;
+            
+            ctx.beginPath();
+            ctx.strokeStyle = '#b8bb26'; // Gruvbox green
+            ctx.lineWidth = 2;
+            
+            const stepX = width / (storageData.length - 1);
+            
+            storageData.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();
+            updateStorageTrend();
+        }
+
+        function updateStorageTrend() {
+            const trendElement = document.getElementById('storageTrend');
+            if (!trendElement || storageData.length < 2) return;
+            
+            const current = storageData[storageData.length - 1];
+            const previous = storageData[storageData.length - 2];
+            const change = current - previous;
+            
+            if (Math.abs(change) < 0.05) {
+                trendElement.textContent = '→ Stable';
+                trendElement.className = 'sparkline-trend';
+            } else if (change > 0) {
+                trendElement.textContent = `↗ +${change.toFixed(1)} TB`;
+                trendElement.className = 'sparkline-trend up';
+            } else {
+                trendElement.textContent = `↘ ${change.toFixed(1)} TB`;
+                trendElement.className = 'sparkline-trend down';
+            }
+        }
+
+        // Memory Velocity Sparkline
+        function drawVelocitySparkline() {
+            const canvas = document.getElementById('velocitySparkline');
+            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;
+            
+            ctx.clearRect(0, 0, width, height);
+            
+            if (velocityData.length < 2) return;
+            
+            const min = Math.min(...velocityData);
+            const max = Math.max(...velocityData);
+            const range = max - min || 1;
+            
+            ctx.beginPath();
+            ctx.strokeStyle = '#b8bb26'; // Gruvbox green
+            ctx.lineWidth = 2;
+            
+            const stepX = width / (velocityData.length - 1);
+            
+            velocityData.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();
+            updateVelocityTrend();
+        }
+
+        function updateVelocityTrend() {
+            const trendElement = document.getElementById('velocityTrend');
+            if (!trendElement || velocityData.length < 2) return;
+            
+            const current = velocityData[velocityData.length - 1];
+            const previous = velocityData[velocityData.length - 2];
+            const change = current - previous;
+            
+            if (Math.abs(change) < 5) {
+                trendElement.textContent = '→ Stable';
+                trendElement.className = 'sparkline-trend';
+            } else if (change > 0) {
+                trendElement.textContent = `↗ +${Math.round(change)}`;
+                trendElement.className = 'sparkline-trend up';
+            } else {
+                trendElement.textContent = `↘ ${Math.round(change)}`;
+                trendElement.className = 'sparkline-trend down';
+            }
+        }
+
+        // Pattern Discovery Sparkline
+        function drawPatternSparkline() {
+            const canvas = document.getElementById('patternSparkline');
+            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;
+            
+            ctx.clearRect(0, 0, width, height);
+            
+            if (patternData.length < 2) return;
+            
+            const min = Math.min(...patternData);
+            const max = Math.max(...patternData);
+            const range = max - min || 1;
+            
+            ctx.beginPath();
+            ctx.strokeStyle = '#b8bb26'; // Gruvbox green
+            ctx.lineWidth = 2;
+            
+            const stepX = width / (patternData.length - 1);
+            
+            patternData.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();
+            updatePatternTrend();
+        }
+
+        function updatePatternTrend() {
+            const trendElement = document.getElementById('patternTrend');
+            if (!trendElement || patternData.length < 2) return;
+            
+            const current = patternData[patternData.length - 1];
+            const previous = patternData[patternData.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)}%`;
+                trendElement.className = 'sparkline-trend up';
+            } else {
+                trendElement.textContent = `↘ ${change.toFixed(1)}%`;
+                trendElement.className = 'sparkline-trend down';
+            }
+        }
+
         // Close modal when clicking outside
         window.onclick = function(event) {
             const modals = document.querySelectorAll('.branch-modal');
@@ -2599,6 +2855,9 @@ <h4>🚀 Production Features:</h4>
             // Initial sparkline draw
             setTimeout(() => {
                 drawSparkline();
+                drawStorageSparkline();
+                drawVelocitySparkline();
+                drawPatternSparkline();
             }, 100);
         });
 
@@ -3452,14 +3711,14 @@ <h4>🚀 Production Features:</h4>
         function updateMetrics() {
             // Simulate real system performance data updates
             const elements = [
-                { id: 'p95Latency', current: 38, min: 35, max: 48, suffix: 'ms' },
-                { id: 'storageEfficiency', current: 24, min: 22, max: 26, suffix: '%' },
+                { id: 'p95Latency', current: 38, min: 35, max: 48, suffix: 'ms', sparkline: 'p95' },
+                { id: 'storageEfficiency', current: 7.2, min: 6.5, max: 8.0, suffix: ' TB', decimal: 1, sparkline: 'storage' },
                 { id: 'predictionAccuracy', current: 89.2, min: 87.5, max: 91.0, suffix: '%', decimal: 1 },
                 { id: 'relevancePrecision', current: 91.7, min: 90.0, max: 93.5, suffix: '%', decimal: 1 },
                 { id: 'cacheHitRate', current: 94.3, min: 92.0, max: 96.0, suffix: '%', decimal: 1 },
                 { id: 'apiPerformance', current: 99.1, min: 98.5, max: 99.8, suffix: '%', decimal: 1 },
-                { id: 'memoryVelocity', current: 2.8, min: 2.5, max: 3.2, suffix: 'GB/s', decimal: 1 },
-                { id: 'patternDiscoveryRateCard', current: 4.2, min: 3.8, max: 4.6, suffix: '/hr', decimal: 1 }
+                { id: 'memoryVelocity', current: 1847, min: 1600, max: 2100, suffix: '', sparkline: 'velocity' },
+                { id: 'patternDiscoveryRateCard', current: 73.2, min: 68.0, max: 78.0, suffix: '%', decimal: 1, sparkline: 'pattern' }
             ];
 
             elements.forEach(el => {
@@ -3475,9 +3734,15 @@ <h4>🚀 Production Features:</h4>
                         element.textContent = Math.round(newValue) + el.suffix;
                     }
 
-                    // Update sparkline for P95 latency
-                    if (el.id === 'p95Latency') {
+                    // Update sparklines for relevant metrics
+                    if (el.sparkline === 'p95') {
                         updateSparklineData(newValue);
+                    } else if (el.sparkline === 'storage') {
+                        updateStorageSparkline(newValue);
+                    } else if (el.sparkline === 'velocity') {
+                        updateVelocitySparkline(newValue);
+                    } else if (el.sparkline === 'pattern') {
+                        updatePatternSparkline(newValue);
                     }
                 }
             });