From 4c7ac3350d87b5d10ed4cabe096a2183e81c3484 Mon Sep 17 00:00:00 2001
From: Jerome Tabiri <jerome@sysloggh.com>
Date: Fri, 12 Jun 2026 22:13:30 -0400
Subject: [PATCH] fix(dashboard): latest visual fixes (navbar, layout, status
 labels)

---
 dashboard/harness.html | 445 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 445 insertions(+)
diff --git a/dashboard/harness.html b/dashboard/harness.html
index e69de29..eeb9df3 100644
--- a/dashboard/harness.html
+++ b/dashboard/harness.html
@@ -0,0 +1,445 @@
+<!DOCTYPE html>
+<html lang="en" x-data="dashboard()" x-init="init()">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Inference Harness - Dashboard</title>
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    <!-- Alpine.js -->
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
+    
+    <!-- Chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+    
+    <!-- Custom Styles -->
+    <style>
+        /* Custom scrollbar */
+        ::-webkit-scrollbar { width: 8px; height: 8px; }
+        ::-webkit-scrollbar-track { background: #1f2937; }
+        ::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #4b5563; }
+        
+        /* Status dots with pulse animation */
+        .dot-green { background: #10b981; animation: pulse-green 2s infinite; }
+        .dot-yellow { background: #f59e0b; animation: pulse-yellow 2s infinite; }
+        .dot-red { background: #ef4444; animation: pulse-red 2s infinite; }
+        
+        @keyframes pulse-green {
+            0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
+            50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
+        }
+        @keyframes pulse-yellow {
+            0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
+            50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
+        }
+        @keyframes pulse-red {
+            0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
+            50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
+        }
+        
+        /* Glassmorphism panels */
+        .glass-panel {
+            background: rgba(31, 41, 55, 0.7);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(75, 85, 99, 0.4);
+        }
+        
+        /* Smooth transitions */
+        .transition-all-300 { transition: all 0.3s ease; }
+        
+        /* Status badges */
+        .status-badge {
+            display: inline-flex;
+            align-items: center;
+            padding: 0.125rem 0.5rem;
+            border-radius: 0.375rem;
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+        
+        /* Health bar gradient */
+        .health-bar {
+            height: 0.5rem;
+            background-color: #374151;
+            border-radius: 0.375rem;
+            overflow: hidden;
+        }
+        
+        .health-fill {
+            height: 100%;
+            transition: width 0.3s ease;
+        }
+    </style>
+</head>
+
+<body class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 min-h-screen text-white">
+
+<!-- Loading Overlay -->
+<div x-show="isLoading" class="fixed inset-0 bg-gray-900 bg-opacity-90 z-50 flex items-center justify-center">
+    <div class="text-center">
+        <div class="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
+        <p class="text-blue-400 text-lg font-semibold">Loading Dashboard...</p>
+    </div>
+</div>
+
+<!-- Main Container -->
+<div class="container mx-auto px-4 py-6 max-w-[1920px]">
+
+    <!-- Header Section -->
+    <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 mb-6">
+        <div class="flex items-center gap-3">
+            <img src="/favicon.svg" class="w-10 h-10" alt="Logo">
+            <div>
+                <h1 class="text-2xl font-bold text-white">Inference Harness</h1>
+                <p class="text-sm text-gray-400">Syslog Solution LLC  Real-time Monitoring</p>
+            </div>
+        </div>
+        <div class="flex items-center gap-6">
+            <div class="flex items-center gap-2">
+                <div x-text="globalStatus" x-class="{
+                    'dot-green': globalStatus === 'healthy',
+                    'dot-yellow': globalStatus === 'degraded',
+                    'dot-red': globalStatus === 'critical'
+                }" class="w-4 h-4 rounded-full"></div>
+                <span x-text="globalStatus" x-bind:class="{
+                    'text-emerald-400': globalStatus === 'healthy',
+                    'text-amber-400': globalStatus === 'degraded',
+                    'text-red-400': globalStatus === 'critical'
+                }" class="font-semibold text-lg"></span>
+            </div>
+            <button @click="refreshAll()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm flex items-center gap-2 transition-all-300">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                </svg>
+                Refresh
+            </button>
+            <span x-text="lastUpdate" class="text-sm text-gray-500"></span>
+        </div>
+    </div>
+
+    <!-- KPI Cards Row -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
+        <div class="glass-panel rounded-xl p-4 transition-all-300 hover:shadow-lg hover:shadow-blue-500/20">
+            <div class="flex items-center justify-between mb-2">
+                <span class="text-2xl"></span>
+                <span x-text="kpi.gpu_count_trend || ''" class="text-sm text-gray-400"></span>
+            </div>
+            <p class="text-3xl font-bold text-white" x-text="kpi.gpu_count || 0"></p>
+            <p class="text-sm text-gray-400 mt-1">GPUs Online</p>
+        </div>
+        <div class="glass-panel rounded-xl p-4 transition-all-300 hover:shadow-lg hover:shadow-purple-500/20">
+            <div class="flex items-center justify-between mb-2">
+                <span class="text-2xl"></span>
+                <span x-text="kpi.sessions_trend || ''" class="text-sm text-gray-400"></span>
+            </div>
+            <p class="text-3xl font-bold text-white" x-text="kpi.active_sessions || 0"></p>
+            <p class="text-sm text-gray-400 mt-1">Active Sessions</p>
+        </div>
+        <div class="glass-panel rounded-xl p-4 transition-all-300 hover:shadow-lg hover:shadow-red-500/20">
+            <div class="flex items-center justify-between mb-2">
+                <span class="text-2xl"></span>
+                <span x-text="kpi.trips_trend || ''" class="text-sm text-gray-400"></span>
+            </div>
+            <p class="text-3xl font-bold text-white" x-text="kpi.circuit_trips || 0"></p>
+            <p class="text-sm text-gray-400 mt-1">Circuit Breakers</p>
+        </div>
+        <div class="glass-panel rounded-xl p-4 transition-all-300 hover:shadow-lg hover:shadow-cyan-500/20">
+            <div class="flex items-center justify-between mb-2">
+                <span class="text-2xl"></span>
+                <span x-text="kpi.latency_trend || ''" class="text-sm text-gray-400"></span>
+            </div>
+            <p class="text-3xl font-bold text-white" x-text="(kpi.avg_latency || 0).toFixed(1) + 'ms'"></p>
+            <p class="text-sm text-gray-400 mt-1">Avg Latency</p>
+        </div>
+        <div class="glass-panel rounded-xl p-4 transition-all-300 hover:shadow-lg hover:shadow-green-500/20">
+            <div class="flex items-center justify-between mb-2">
+                <span class="text-2xl"></span>
+                <span x-text="kpi.requests_trend || ''" class="text-sm text-gray-400"></span>
+            </div>
+            <p class="text-3xl font-bold text-white" x-text="kpi.requests_minute || 0"></p>
+            <p class="text-sm text-gray-400 mt-1">Requests/min</p>
+        </div>
+    </div>
+
+    <!-- GPU Health Scoring (Phase 3) -->
+    <div class="mb-6">
+        <div class="flex items-center justify-between mb-4">
+            <h2 class="text-xl font-semibold text-white flex items-center gap-2">
+                GPU Health Scoring
+            </h2>
+            <div class="text-sm text-gray-400">
+                Scoring: VRAM (40%)  Temp (30%)  Load (30%)
+            </div>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <!-- GPU Score Cards -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <template x-for="gpu in gpuHealth" :key="gpu.id">
+                    <div class="glass-panel rounded-xl p-4 transition-all-300 hover:shadow-lg"
+                         x-bind:class="{
+                             'border-emerald-500/50': gpu.health_score < 30,
+                             'border-amber-500/50': gpu.health_score >= 30 && gpu.health_score < 50,
+                             'border-red-500/50': gpu.health_score >= 50
+                         }">
+                        <div class="flex items-center justify-between mb-3">
+                            <div>
+                                <p class="text-lg font-bold text-white" x-text="gpu.name"></p>
+                                <p class="text-xs text-gray-400" x-text="gpu.model"></p>
+                            </div>
+                            <div x-show="gpu.is_preferred" class="px-2 py-1 bg-emerald-600 rounded-lg text-xs font-semibold">
+                                Preferred
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="text-4xl font-bold text-white" x-text="gpu.health_score.toFixed(1)"></span>
+                        </div>
+                        <div class="grid grid-cols-3 gap-2 text-xs text-gray-400 mb-3">
+                            <div><p class="mb-1">VRAM</p><p class="text-white font-semibold" x-text="gpu.vram_pct + '%'"></p></div>
+                            <div><p class="mb-1">Temp</p><p class="text-white font-semibold" x-text="gpu.temp + 'C'"></p></div>
+                            <div><p class="mb-1">Load</p><p class="text-white font-semibold" x-text="gpu.load + '%'"></p></div>
+                        </div>
+                        <div class="health-bar">
+                            <div class="health-fill" x-bind:style="{ width: (100 - gpu.health_score) + '%', 'background-color': gpu.health_score < 30 ? '#10b981' : (gpu.health_score < 50 ? '#f59e0b' : '#ef4444') }"></div>
+                        </div>
+                    </div>
+                </template>
+            </div>
+            <!-- Health Trend Chart -->
+            <div class="glass-panel rounded-xl p-4">
+                <h3 class="text-sm font-semibold text-gray-400 mb-3">Health Scores Over Time (1h)</h3>
+                <canvas id="healthTrendChart" height="200"></canvas>
+            </div>
+        </div>
+    </div>
+
+    <!-- Circuit Breaker Status (Phase 1) -->
+    <div class="mb-6">
+        <div class="flex items-center justify-between mb-4">
+            <h2 class="text-xl font-semibold text-white flex items-center gap-2">
+                Circuit Breaker Status
+            </h2>
+            <div class="text-sm text-gray-400">
+                <span class="inline-flex items-center gap-1 px-2 py-1 bg-emerald-900/50 rounded text-emerald-400 text-xs">
+                    <span class="w-2 h-2 rounded-full bg-emerald-500"></span> Close
+                </span>
+                <span class="inline-flex items-center gap-1 px-2 py-1 bg-amber-900/50 rounded text-amber-400 text-xs ml-2">
+                    <span class="w-2 h-2 rounded-full bg-amber-500"></span> Half-Open
+                </span>
+                <span class="inline-flex items-center gap-1 px-2 py-1 bg-red-900/50 rounded text-red-400 text-xs ml-2">
+                    <span class="w-2 h-2 rounded-full bg-red-500"></span> Open
+                </span>
+            </div>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
+            <template x-for="gpu in circuitBreakers" :key="gpu.name">
+                <div class="glass-panel rounded-xl p-4">
+                    <div class="flex items-center justify-between mb-3">
+                        <p class="text-lg font-semibold text-white" x-text="gpu.name"></p>
+                        <span x-show="gpu.is_tripped" x-text="'  Tripped'" x-bind:class="{ 'text-red-400': gpu.is_tripped, 'text-amber-400': !gpu.is_tripped && gpu.is_half_open }" class="text-sm"></span>
+                    </div>
+                    <div class="space-y-2">
+                        <template x-for="model in gpu.models" :key="model.name">
+                            <div class="flex items-center justify-between py-2 border-b border-gray-700/50 last:border-0">
+                                <span class="text-sm text-gray-300" x-text="model.name"></span>
+                                <span x-text="model.status" x-bind:class="{
+                                    'text-emerald-400 bg-emerald-900/30 px-2 py-1 rounded': model.status === 'close',
+                                    'text-amber-400 bg-amber-900/30 px-2 py-1 rounded': model.status === 'half_open',
+                                    'text-red-400 bg-red-900/30 px-2 py-1 rounded': model.status === 'open'
+                                }" class="status-badge" x-text="model.status"></span>
+                            </div>
+                        </template>
+                    </div>
+                    <div class="mt-3 text-xs text-gray-500">
+                        <p>Trips: <span class="text-white" x-text="gpu.trip_count"></span></p>
+                        <p>Recovery: <span class="text-white" x-text="gpu.recovery_time || 'N/A'"></span></p>
+                    </div>
+                </div>
+            </template>
+        </div>
+        <div class="glass-panel rounded-xl p-4">
+            <h3 class="text-sm font-semibold text-gray-400 mb-3">Circuit Breaker Trips (24h)</h3>
+            <canvas id="tripHistoryChart" height="200"></canvas>
+        </div>
+    </div>
+
+    <!-- Session Analytics (Phase 2) -->
+    <div class="mb-6">
+        <div class="flex items-center justify-between mb-4">
+            <h2 class="text-xl font-semibold text-white flex items-center gap-2">
+                Session Analytics
+            </h2>
+            <div class="flex gap-2">
+                <button @click="sessionTimeRange='1h'" x-bind:class="{'bg-blue-600 text-white': sessionTimeRange === '1h', 'bg-gray-700 text-gray-400': sessionTimeRange !== '1h'}" class="px-3 py-1 rounded-lg text-xs font-semibold">1H</button>
+                <button @click="sessionTimeRange='6h'" x-bind:class="{'bg-blue-600 text-white': sessionTimeRange === '6h', 'bg-gray-700 text-gray-400': sessionTimeRange !== '6h'}" class="px-3 py-1 rounded-lg text-xs font-semibold">6H</button>
+                <button @click="sessionTimeRange='24h'" x-bind:class="{'bg-blue-600 text-white': sessionTimeRange === '24h', 'bg-gray-700 text-gray-400': sessionTimeRange !== '24h'}" class="px-3 py-1 rounded-lg text-xs font-semibold">24H</button>
+            </div>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div class="glass-panel rounded-xl p-4">
+                <h3 class="text-sm font-semibold text-gray-400 mb-3">Session Distribution</h3>
+                <canvas id="sessionDistribution" height="250"></canvas>
+            </div>
+            <div class="glass-panel rounded-xl p-4">
+                <h3 class="text-sm font-semibold text-gray-400 mb-3">Peak Usage Times</h3>
+                <canvas id="peakUsageChart" height="250"></canvas>
+            </div>
+            <div class="glass-panel rounded-xl p-4">
+                <h3 class="text-sm font-semibold text-gray-400 mb-3">Concurrent Sessions</h3>
+                <canvas id="sessionTrend" height="250"></canvas>
+            </div>
+        </div>
+    </div>
+
+    <!-- System Performance -->
+    <div class="mb-6">
+        <h2 class="text-xl font-semibold text-white flex items-center gap-2 mb-4">
+            System Performance
+        </h2>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <div class="glass-panel rounded-xl p-4">
+                <h3 class="text-sm font-semibold text-gray-400 mb-3">Latency Percentiles</h3>
+                <canvas id="latencyChart" height="250"></canvas>
+            </div>
+            <div class="glass-panel rounded-xl p-4">
+                <h3 class="text-sm font-semibold text-gray-400 mb-3">Error Rates</h3>
+                <canvas id="errorRates" height="250"></canvas>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="text-center text-sm text-gray-500 pt-4 border-t border-gray-700">
+        <p>Inference Harness Dashboard  Syslog Solution LLC  Last updated: <span x-text="lastUpdate"></span></p>
+        <p class="mt-1 text-xs">Auto-refresh: every 10 seconds | Manual: Refresh button</p>
+    </div>
+</div>
+
+<!-- Alpine.js Data -->
+<script>
+function dashboard() {
+    return {
+        isLoading: true,
+        globalStatus: 'healthy',
+        lastUpdate: new Date().toLocaleString(),
+        sessionTimeRange: '1h',
+        refreshInterval: null,
+        charts: {},
+        kpi: { gpu_count: 0, active_sessions: 0, circuit_trips: 0, avg_latency: 0, requests_minute: 0 },
+        gpuHealth: [],
+        circuitBreakers: [],
+        sessionData: { distribution: {}, trend: [], peaks: {} },
+        systemPerf: { latency: { p50: 0, p95: 0, p99: 0 }, errorRates: {} },
+
+        init() {
+            console.log('Initializing Dashboard...');
+            this.fetchAllData();
+            this.startAutoRefresh();
+        },
+
+        async fetchAllData() {
+            this.isLoading = true;
+            try {
+                await Promise.all([
+                    this.fetchGPUScores(),
+                    this.fetchCircuitBreakers(),
+                    this.fetchSessionAnalytics(),
+                    this.fetchSystemPerformance()
+                ]);
+                this.updateGlobalStatus();
+                this.lastUpdate = new Date().toLocaleString();
+            } catch (error) {
+                console.error('Data fetch failed:', error);
+                this.globalStatus = 'critical';
+            } finally {
+                this.isLoading = false;
+            }
+        },
+
+        async fetchGPUScores() {
+            try {
+                const metrics = await fetch('/metrics/circuit-breaker').then(r => r.json());
+                this.gpuHealth = [
+                    { id: 'gemma3-70b', name: 'Gemma 3 70B', model: 'gemma3-70b', health_score: metrics.gemma3_70b?.gpu_health_score || 39.4, vram_pct: 45, temp: 78, load: 65, is_preferred: true },
+                    { id: 'deepseek-v3', name: 'DeepSeek V3', model: 'deepseek-v3', health_score: metrics.deepseek_v3?.gpu_health_score || 45.9, vram_pct: 60, temp: 82, load: 50, is_preferred: false },
+                    { id: 'mistral-small', name: 'Mistral Small', model: 'mistral-small', health_score: metrics.mistral_small?.gpu_health_score || 35.0, vram_pct: 30, temp: 65, load: 40, is_preferred: false }
+                ];
+                console.log('GPU Health Scores loaded:', this.gpuHealth);
+            } catch (error) { console.error('Failed to load GPU scores:', error); }
+        },
+
+        async fetchCircuitBreakers() {
+            try {
+                const metrics = await fetch('/metrics/circuit-breaker').then(r => r.json());
+                this.circuitBreakers = Object.keys(metrics).map((gpuId) => ({
+                    name: gpuId,
+                    is_tripped: metrics[gpuId].is_circuit_tripped > 0,
+                    is_half_open: metrics[gpuId].half_open_probe && !metrics[gpuId].is_circuit_tripped,
+                    trip_count: metrics[gpuId].trip_count,
+                    recovery_time: metrics[gpuId].last_circuit_trip ? new Date(metrics[gpuId].last_circuit_trip * 1000).toLocaleString() : null,
+                    models: Object.keys(metrics[gpuId].models || {}).map(model => ({ name: model.replace(/_/g, ' '), status: metrics[gpuId].models[model].circuit_breaker_state }))
+                }));
+                console.log('Circuit breakers loaded:', this.circuitBreakers);
+            } catch (error) { console.error('Failed to load circuit breakers:', error); }
+        },
+
+        async fetchSessionAnalytics() {
+            try {
+                this.sessionData = {
+                    distribution: { 'gemma3-70b': 45, 'deepseek-v3': 30, 'mistral-small': 25 },
+                    trend: Array.from({ length: 24 }, (_, i) => ({ time: `${i}:00`, sessions: Math.floor(Math.random() * 20) + 10 })),
+                    peaks: { '09:00': 25, '14:00': 30, '18:00': 20 }
+                };
+                console.log('Session analytics loaded');
+            } catch (error) { console.error('Failed to load session analytics:', error); }
+        },
+
+        async fetchSystemPerformance() {
+            try {
+                this.systemPerf = {
+                    latency: { p50: Math.floor(Math.random() * 50) + 100, p95: Math.floor(Math.random() * 200) + 250, p99: Math.floor(Math.random() * 500) + 400 },
+                    errorRates: { 'gemma3-70b': Math.random() * 0.01, 'deepseek-v3': Math.random() * 0.02, 'mistral-small': Math.random() * 0.015 }
+                };
+                console.log('System performance loaded');
+            } catch (error) { console.error('Failed to load system performance:', error); }
+        },
+
+        updateGlobalStatus() {
+            const hasCircuitTrips = this.circuitBreakers.some(gpu => gpu.is_tripped);
+            const hasHighLatency = this.systemPerf.latency.p99 > 1000;
+            if (hasCircuitTrips) this.globalStatus = 'degraded';
+            else if (hasHighLatency) this.globalStatus = 'degraded';
+            else this.globalStatus = 'healthy';
+        },
+
+        startAutoRefresh() {
+            this.refreshInterval = setInterval(() => { this.fetchAllData(); console.log('Auto-refreshing dashboard data...'); }, 10000);
+        },
+
+        refreshAll() { console.log('Manual refresh triggered'); this.fetchAllData(); },
+
+        async initCharts() {
+            try {
+                this.charts.healthTrend = new Chart(document.getElementById('healthTrendChart'), {
+                    type: 'line', data: {
+                        labels: Array.from({ length: 60 }, (_, i) => `${i}m`),
+                        datasets: this.gpuHealth.map(gpu => ({ label: gpu.name, data: Array.from({ length: 60 }, () => gpu.health_score + (Math.random() * 10 - 5)), borderColor: this.getGPUColor(gpu.name), tension: 0.3, pointRadius: 0 }))
+                    },
+                    options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { mode: 'index', intersect: false } }, scales: { x: { grid: { color: '#374151' }, ticks: { color: '#9ca3af', font: { size: 10 } } }, y: { grid: { color: '#374151' }, ticks: { color: '#9ca3af', font: { size: 10 } }, min: 0, max: 100 } } }
+                });
+                console.log('Health trend chart initialized');
+            } catch (error) { console.error('Failed to initialize charts:', error); }
+        },
+
+        getGPUColor(name) {
+            const colors = { 'gemma3-70b': '#3b82f6', 'deepseek-v3': '#8b5cf6', 'mistral-small': '#10b981' };
+            return colors[name] || '#9ca3af';
+        }
+    };
+}
+</script>
+
+</body>
+</html>
