feat: dashboard dynamique + RAM min/max dans popup

- Grid: nouvel agent ajouté en temps réel dès le 1er paquet WebSocket (plus besoin d'actualiser la page)
- Grid: ip/status mis à jour depuis chaque metrics_update (adresse DHCP fraîche)
- WS: diffuse agent_removed lors de la suppression d'un agent (sync multi-onglets)
- Popup détail: min/max RAM sur la période affichée (calculé depuis l'historique déjà chargé)
- CSS: classe .chart-minmax pour l'affichage min/max sous le graphe

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dashboard/css/app.css

@@ -187,6 +187,7 @@ body{background:var(--bg-1);color:var(--ink-1);font-family:var(--font-ui);font-s
 .chart-cur{font-family:var(--font-mono);font-size:16px;font-weight:700}
 .chart-svg{width:100%;height:52px;display:block}
 .chart-axis{display:flex;justify-content:space-between;margin-top:2px;font-family:var(--font-terminal);font-size:9px;color:var(--ink-4)}
+.chart-minmax{display:flex;justify-content:space-between;margin-top:3px;font-family:var(--font-mono);font-size:9px;color:var(--ink-4)}
 .smart-btn{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:8px;
            border:1px solid var(--border-2);background:var(--bg-3);cursor:pointer;
            transition:background .12s,border-color .12s,transform .08s;font-family:var(--font-terminal);font-size:11px}

dashboard/js/app.js

@@ -87,6 +87,8 @@ const App = (() => {
                     updateServerStats(msg.data);
                 } else if (msg.type === 'status_update') {
                     Grid.updateStatus(msg.agent_id, msg.data.status);
+                } else if (msg.type === 'agent_removed') {
+                    Grid.removeAgent(msg.agent_id);
                 }
             } catch {}
         };

dashboard/js/grid.js

@@ -111,8 +111,24 @@ const Grid = (() => {
     }
 
     function update(agentId, metrics) {
-        const entry = _agents.get(agentId);
-        if (!entry) return;
+        let entry = _agents.get(agentId);
+        if (!entry) {
+            // Nouvel agent découvert via WebSocket — on crée la tuile à la volée
+            const agent = {
+                id: agentId,
+                hostname: metrics.hostname || agentId,
+                ip: metrics.ip || '',
+                status: metrics.status || 'online',
+            };
+            _agents.set(agentId, { agent, metrics });
+            const grid = document.getElementById('agents-grid');
+            if (grid) grid.insertAdjacentHTML('beforeend', renderTile(agent, metrics));
+            updateStats();
+            return;
+        }
+        // Mettre à jour ip/status depuis les métriques fraîches
+        if (metrics.ip) entry.agent.ip = metrics.ip;
+        if (metrics.status) entry.agent.status = metrics.status;
         // Conserver les valeurs lentes (disque, smart) quand le paquet ne les contient pas
         if (entry.metrics) {
             for (const k of Object.keys(entry.metrics)) {

dashboard/js/popups.js

@@ -69,6 +69,17 @@ const Popups = (() => {
         const cpuPts = Charts.historyToCpuPts(history);
         const memPts = Charts.historyToMemPts(history);
 
+        let ramMin = null, ramMax = null;
+        for (const h of history) {
+            if (h.memory_used != null) {
+                if (ramMin === null || h.memory_used < ramMin) ramMin = h.memory_used;
+                if (ramMax === null || h.memory_used > ramMax) ramMax = h.memory_used;
+            }
+        }
+        const ramMinMax = ramMin !== null
+            ? `<div class="chart-minmax"><span>min ${Grid.fmt(ramMin)}</span><span>max ${Grid.fmt(ramMax)}</span></div>`
+            : '';
+
         const smartBtn = metrics?.smart
             ? `<div class="smart-btn ok" onclick="Popups.showSmart('${esc(agentId)}')" data-tip="Voir la santé complète du disque">
                 <div class="smart-dot"></div>
@@ -118,6 +129,7 @@ const Popups = (() => {
                 </div>
                 <svg class="chart-svg" viewBox="0 0 200 52" preserveAspectRatio="none" id="det-mem-chart"></svg>
                 <div class="chart-axis"><span>−30min</span><span>−15min</span><span>now</span></div>
+                ${ramMinMax}
               </div>
             </div>
           </div>