Feature/total vram (#62)

* total vram on the overview page

* total vram on the overview page

* minor bugfixes

* test: introduce pytest and Vitest unit tests

- Backend: API, config, handlers, monitor, hub, metrics, NVML utilities
- Frontend: chart config/manager, GPU cards, UI tabs, WebSocket helpers, app.js

* update the version 1.8.0

---------

Co-authored-by: Panos <>

Author: psalias2006

.gitignore

@@ -50,9 +50,8 @@ instance/
 
 # Testing
 .pytest_cache/
-.coverage
-.coverage.*
-htmlcov/
+node_modules/
+
 .tox/
 .nox/
 .hypothesis/

run_tests.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+echo "=== gpu-hot Unit Tests ==="
+echo "Building test container..."
+
+docker compose -f tests/docker-compose.unittest.yml build
+
+echo "Running tests..."
+docker compose -f tests/docker-compose.unittest.yml run --rm unittest
+
+echo "=== Tests Complete ==="

static/css/components.css

@@ -93,6 +93,51 @@
     max-height: 48px !important;
 }
 
+/* ============================================
+   Aggregate VRAM Row
+   ============================================ */
+
+.agg-vram-wrap {
+    padding: var(--space-sm) 0 var(--space-md);
+    border-bottom: 1px solid var(--border-subtle);
+    margin-bottom: var(--space-md);
+}
+
+.agg-vram-inner {
+    display: inline-block;
+}
+
+.agg-vram-row {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-lg);
+}
+
+.agg-vram-value {
+    font-family: var(--font-mono);
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text-primary);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.3px;
+}
+
+.agg-vram-bar {
+    height: 3px;
+    margin-top: 6px;
+    background: var(--border-subtle);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.agg-vram-bar-fill {
+    height: 100%;
+    width: 0%;
+    background: var(--text-secondary);
+    border-radius: 2px;
+    transition: width 0.3s ease;
+}
+
 /* ============================================
    Enhanced Overview Card
    ============================================ */

static/js/chart-manager.js

@@ -376,6 +376,35 @@ function initOverviewMiniChart(gpuId, currentValue) {
     }
 }
 
+// ============================================
+// Aggregate Stats — Summary across all GPUs
+// ============================================
+
+function initAggregateChart() { }
+
+function updateAggregateStats(gpusMap) {
+    let totalUsedMiB = 0, totalCapMiB = 0;
+
+    Object.values(gpusMap).forEach(gpu => {
+        totalUsedMiB += gpu.memory_used || 0;
+        totalCapMiB += gpu.memory_total || 0;
+    });
+
+    const usedGB = totalUsedMiB / 1024;
+    const totalGB = totalCapMiB / 1024;
+
+    const el = document.getElementById('agg-vram-value');
+    if (el) el.textContent = `${usedGB.toFixed(1)} / ${totalGB.toFixed(1)} GB`;
+
+    const bar = document.getElementById('agg-vram-bar');
+    if (bar) {
+        const pct = totalGB > 0 ? Math.min((usedGB / totalGB) * 100, 100) : 0;
+        bar.style.width = `${pct}%`;
+    }
+}
+
+function destroyAggregateChart() { }
+
 // ============================================
 // System Charts — Sidebar (mini) + Per-GPU (sparklines)
 // ============================================

static/js/gpu-cards.js

@@ -42,6 +42,21 @@ function bulletClass(value, warnThreshold, dangerThreshold) {
     return '';
 }
 
+// Aggregate VRAM summary card (shown when 2+ GPUs)
+function createAggregateCard() {
+    return `
+        <div id="aggregate-card" class="agg-vram-wrap">
+            <div class="agg-vram-inner">
+                <div class="agg-vram-row">
+                    <span class="node-label">Total VRAM</span>
+                    <span class="agg-vram-value" id="agg-vram-value">0 / 0 GB</span>
+                </div>
+                <div class="agg-vram-bar"><div class="agg-vram-bar-fill" id="agg-vram-bar"></div></div>
+            </div>
+        </div>
+    `;
+}
+
 // Update overview card — delegates to enhanced updater
 function updateOverviewCard(gpuId, gpuInfo, shouldUpdateDOM = true) {
     updateEnhancedOverviewCard(gpuId, gpuInfo, shouldUpdateDOM);
@@ -198,7 +213,7 @@ function updateEnhancedOverviewCard(gpuId, gpuInfo, shouldUpdateDOM = true) {
     const powerPercent = (power_draw / power_limit) * 100;
 
     if (shouldUpdateDOM) {
-        // Hero metrics
+        // Hero metrics (single-node enhanced overview: sgo-* IDs)
         const utilEl = document.getElementById(`sgo-util-${gpuId}`);
         const tempEl = document.getElementById(`sgo-temp-${gpuId}`);
         const memEl = document.getElementById(`sgo-mem-${gpuId}`);
@@ -214,6 +229,17 @@ function updateEnhancedOverviewCard(gpuId, gpuInfo, shouldUpdateDOM = true) {
         const memUnitEl = document.getElementById(`sgo-mem-unit-${gpuId}`);
         if (memUnitEl) memUnitEl.textContent = formatMemoryUnit(memory_used);
 
+        // Cluster/hub overview cards (overview-* IDs)
+        const clUtilEl = document.getElementById(`overview-util-${gpuId}`);
+        const clTempEl = document.getElementById(`overview-temp-${gpuId}`);
+        const clMemEl = document.getElementById(`overview-mem-${gpuId}`);
+        const clPowerEl = document.getElementById(`overview-power-${gpuId}`);
+
+        if (clUtilEl) clUtilEl.textContent = `${utilization}%`;
+        if (clTempEl) clTempEl.textContent = `${temperature}°`;
+        if (clMemEl) clMemEl.textContent = `${Math.round(memPercent)}%`;
+        if (clPowerEl) clPowerEl.textContent = `${power_draw.toFixed(0)}W`;
+
         // Bullet bars
         const utilBar = document.getElementById(`sgo-util-bar-${gpuId}`);
         const tempBar = document.getElementById(`sgo-temp-bar-${gpuId}`);

static/js/socket-handlers.js

@@ -132,6 +132,9 @@ function setupScrollDetection() {
 // Initialize scroll detection
 setupScrollDetection();
 
+// Track whether the aggregate summary card has been injected
+let aggregateCardInjected = false;
+
 // Performance: Batched rendering system using requestAnimationFrame
 // Batches all DOM updates into a single frame to minimize reflows/repaints
 let pendingUpdates = new Map(); // Queue of pending GPU/system updates
@@ -155,6 +158,7 @@ function handleSocketMessage(event) {
     // Clear loading state
     if (overviewContainer.querySelector('.loading')) {
         overviewContainer.innerHTML = '';
+        aggregateCardInjected = false;
     }
 
     const gpuCount = Object.keys(data.gpus).length;
@@ -241,6 +245,21 @@ function handleSocketMessage(event) {
         }
     });
 
+    // Aggregate summary card (2+ GPUs)
+    if (gpuCount >= 2) {
+        if (!aggregateCardInjected) {
+            overviewContainer.insertAdjacentHTML('afterbegin', createAggregateCard());
+            aggregateCardInjected = true;
+            initAggregateChart();
+        }
+        pendingUpdates.set('_aggregate', { gpus: data.gpus });
+    } else if (aggregateCardInjected) {
+        const aggCard = document.getElementById('aggregate-card');
+        if (aggCard) aggCard.remove();
+        destroyAggregateChart();
+        aggregateCardInjected = false;
+    }
+
     // Queue system updates (processes/CPU/RAM) for batching
     if (!lastDOMUpdate.system || (now - lastDOMUpdate.system) >= DOM_UPDATE_INTERVAL) {
         pendingUpdates.set('_system', {
@@ -273,7 +292,10 @@ function processBatchedUpdates() {
 
     // Execute all queued updates in a single batch
     pendingUpdates.forEach((update, gpuId) => {
-        if (gpuId === '_system') {
+        if (gpuId === '_aggregate') {
+            updateAggregateStats(update.gpus);
+            return;
+        } else if (gpuId === '_system') {
             // System updates (CPU, RAM, processes)
             updateProcesses(update.processes);
             updateSystemInfo(update.system);
@@ -416,6 +438,7 @@ function handleClusterData(data) {
     // Clear loading state
     if (overviewContainer.querySelector('.loading')) {
         overviewContainer.innerHTML = '';
+        aggregateCardInjected = false;
     }
 
     // Skip DOM updates during scrolling
@@ -439,7 +462,6 @@ function handleClusterData(data) {
                         });
                     }
                     updateAllChartDataOnly(fullGpuId, gpuInfo);
-                    // Also update system chart data during scroll (per-node)
                     if (nodeData.system) {
                         updateGPUSystemCharts(fullGpuId, nodeData.system, nodeName, false);
                     }
@@ -525,6 +547,30 @@ function handleClusterData(data) {
         }
     });
 
+    // Aggregate summary card (2+ GPUs across cluster)
+    const clusterGpusFlat = {};
+    Object.entries(data.nodes).forEach(([nodeName, nodeData]) => {
+        if (nodeData.status === 'online') {
+            Object.entries(nodeData.gpus).forEach(([gpuId, gpuInfo]) => {
+                clusterGpusFlat[`${nodeName}-${gpuId}`] = gpuInfo;
+            });
+        }
+    });
+    const clusterGpuCount = Object.keys(clusterGpusFlat).length;
+    if (clusterGpuCount >= 2) {
+        if (!aggregateCardInjected) {
+            overviewContainer.insertAdjacentHTML('afterbegin', createAggregateCard());
+            aggregateCardInjected = true;
+            initAggregateChart();
+        }
+        pendingUpdates.set('_aggregate', { gpus: clusterGpusFlat });
+    } else if (aggregateCardInjected) {
+        const aggCard = document.getElementById('aggregate-card');
+        if (aggCard) aggCard.remove();
+        destroyAggregateChart();
+        aggregateCardInjected = false;
+    }
+
     // Update processes and system info (use first online node)
     const firstOnlineNode = Object.values(data.nodes).find(n => n.status === 'online');
     if (firstOnlineNode) {

tests/Dockerfile.unittest

@@ -0,0 +1,33 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install Node.js 18 and system deps
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    curl gcc python3-dev \
+    && curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
+    && apt-get install -y nodejs \
+    && rm -rf /var/lib/apt/lists/*
+
+# Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt \
+    pytest \
+    pytest-asyncio \
+    httpx
+
+# Node dependencies (frontend unit tests)
+COPY tests/package.json tests/
+RUN npm install --prefix tests
+
+# Copy project
+COPY . .
+
+CMD ["sh", "-c", "\
+echo '=== Python Backend Tests ===' && \
+python -m pytest -c tests/pytest.ini --tb=short -v && \
+echo '' && \
+echo '=== JavaScript Frontend Tests ===' && \
+VITE_CJS_IGNORE_WARNING=1 npm test --prefix tests && \
+echo '' && \
+echo '=== All Tests Passed ==='"]