dashboard: pause polling when tab is hidden

static/dashboard.js

@@ -662,5 +662,37 @@ function fetchStats() {
         .catch(function(e) { $('dot').className = 'dot err'; $('statusTxt').textContent = 'Error'; });
 }
 
-fetchStats();
+// Visibility-aware polling - pause when tab is hidden
-setInterval(fetchStats, 3000);
+var pollInterval = null;
+var pollDelay = 3000;
+
+function startPolling() {
+    if (!pollInterval) {
+        fetchStats();  // Fetch immediately
+        pollInterval = setInterval(fetchStats, pollDelay);
+    }
+}
+
+function stopPolling() {
+    if (pollInterval) {
+        clearInterval(pollInterval);
+        pollInterval = null;
+        $('dot').className = 'dot warn';
+        $('statusTxt').textContent = 'Paused';
+    }
+}
+
+function handleVisibilityChange() {
+    if (document.hidden) {
+        stopPolling();
+    } else {
+        startPolling();
+    }
+}
+
+document.addEventListener('visibilitychange', handleVisibilityChange);
+
+// Initial start
+if (!document.hidden) {
+    startPolling();
+}

static/style.css

@@ -86,6 +86,7 @@ h3 { font-size: 13px; font-weight: 600; color: var(--dim); margin-bottom: 8px; }
 .status-item { display: flex; align-items: center; gap: 4px; }
 .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
 .dot.err { background: var(--red); animation: none; }
+.dot.warn { background: var(--yellow); animation: none; }
 @keyframes pulse { 50% { opacity: 0.5; } }
 .mode-badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
 .mode-ssl { background: rgba(63,185,80,0.2); color: var(--green); border: 1px solid var(--green); }