fix: SSE-driven chart/sparkline refresh, debounced server-side partials

apps/web/src/views/detail.ejs

@@ -304,6 +304,9 @@
         while (bar.children.length > 60) bar.removeChild(bar.lastChild);
       }
 
+      // Refresh latency chart (debounced)
+      scheduleChartRefresh();
+
       // Ping table — prepend plain HTML row
       const tbody = document.getElementById('pings-table');
       if (tbody) {
@@ -321,16 +324,18 @@
       }
     });
 
-    // Poll every 30s to refresh the latency chart from server
-    setInterval(async () => {
-      try {
-        const res = await fetch(`/dashboard/monitors/${monitorId}/chart`, { credentials: 'same-origin' });
-        if (res.ok) {
-          const html = await res.text();
-          document.getElementById('latency-chart').innerHTML = html;
-        }
-      } catch {}
-    }, 30000);
+    // Refresh latency chart from server (debounced — at most once per 5s)
+    let _chartRefreshTimer = null;
+    function scheduleChartRefresh() {
+      if (_chartRefreshTimer) return;
+      _chartRefreshTimer = setTimeout(async () => {
+        _chartRefreshTimer = null;
+        try {
+          const res = await fetch(`/dashboard/monitors/${monitorId}/chart`, { credentials: 'same-origin' });
+          if (res.ok) document.getElementById('latency-chart').innerHTML = await res.text();
+        } catch {}
+      }, 5000);
+    }
   </script>
 
 <%~ include('./partials/foot') %>

apps/web/src/views/home.ejs

@@ -75,7 +75,20 @@
       } catch {}
     }, 30000);
 
-    // SSE: subscribe to all monitors for live updates (minimal DOM patches only)
+    // Sparkline refresh — debounced per monitor (at most once per 5s)
+    const _sparklineTimers = {};
+    function scheduleSparklineRefresh(mid, sparkEl) {
+      if (_sparklineTimers[mid]) return;
+      _sparklineTimers[mid] = setTimeout(async () => {
+        delete _sparklineTimers[mid];
+        try {
+          const res = await fetch(`/dashboard/monitors/${mid}/sparkline`, { credentials: 'same-origin' });
+          if (res.ok) sparkEl.innerHTML = await res.text();
+        } catch {}
+      }, 5000);
+    }
+
+    // SSE: subscribe to all monitors for live updates
     const sseConnections = [];
     function subscribeAll() {
       const monitorCards = document.querySelectorAll('[data-monitor-id]');
@@ -101,6 +114,10 @@
 
           // Timestamp
           card.querySelector('.stat-last').innerHTML = timeAgo(ping.checked_at);
+
+          // Sparkline — debounced fetch from server
+          const sparkEl = card.querySelector('.stat-sparkline');
+          if (sparkEl) scheduleSparklineRefresh(mid, sparkEl);
         });
         if (es) sseConnections.push(es);
       });