feat: métriques serveur dans footer dashboard + notification offline WS

dashboard/js/app.js

@@ -43,6 +43,31 @@ const App = (() => {
             new Date().toLocaleTimeString('fr-FR');
     }
 
+    function updateServerStats(stats) {
+        const cpu = stats.cpu_percent ?? 0;
+        const memPct = stats.mem_total > 0 ? (stats.mem_used / stats.mem_total * 100) : 0;
+        const cpuEl = document.getElementById('srv-cpu');
+        const memEl = document.getElementById('srv-mem');
+        const cpuBar = document.getElementById('srv-cpu-bar');
+        const memBar = document.getElementById('srv-mem-bar');
+        if (cpuEl) {
+            cpuEl.textContent = cpu.toFixed(0) + '%';
+            cpuEl.className = 'f-val' + (cpu >= 70 ? ' w' : '');
+        }
+        if (cpuBar) {
+            cpuBar.style.width = cpu.toFixed(0) + '%';
+            cpuBar.className = 'f-minifill' + (cpu >= 70 ? ' w' : '');
+        }
+        if (memEl) {
+            memEl.textContent = memPct.toFixed(0) + '%';
+            memEl.className = 'f-val' + (memPct >= 70 ? ' w' : '');
+        }
+        if (memBar) {
+            memBar.style.width = memPct.toFixed(0) + '%';
+            memBar.className = 'f-minifill' + (memPct >= 70 ? ' w' : '');
+        }
+    }
+
     function connectWS() {
         const proto = location.protocol === 'https:' ? 'wss' : 'ws';
         _ws = new WebSocket(`${proto}://${location.host}/ws`);
@@ -58,6 +83,10 @@ const App = (() => {
                 if (msg.type === 'metrics_update') {
                     Grid.update(msg.agent_id, msg.data);
                     updateClock();
+                } else if (msg.type === 'server_stats') {
+                    updateServerStats(msg.data);
+                } else if (msg.type === 'status_update') {
+                    Grid.updateStatus(msg.agent_id, msg.data.status);
                 }
             } catch {}
         };

dashboard/js/grid.js

@@ -141,5 +141,14 @@ const Grid = (() => {
 
     function getAgent(id) { return _agents.get(id); }
 
-    return { refresh, update, getAgent, fmt, fmtPct };
+    function updateStatus(agentId, status) {
+        const entry = _agents.get(agentId);
+        if (!entry) return;
+        entry.agent.status = status;
+        const el = document.getElementById('tile-' + agentId);
+        if (el) el.outerHTML = renderTile(entry.agent, entry.metrics);
+        updateStats();
+    }
+
+    return { refresh, update, updateStatus, getAgent, fmt, fmtPct };
 })();