From 8ec4d740edd0022d170ede8f1058e435b1796eeb Mon Sep 17 00:00:00 2001
From: Nakshathra-2808 <nakshathramsv@gmail.com>
Date: Fri, 26 Jun 2026 13:06:42 +0530
Subject: [PATCH] fix: add periodic health polling to prevent stale sidebar
 status dots

checkConnectionHealth was defined but never called after init().
Add a 30s setInterval useEffect so health status updates automatically
without requiring a page refresh.

Fixes #144
---
 frontend/src/App.tsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bcfa1b9..e2bb033 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -358,6 +358,31 @@ export default function App() {
     );
     setConnections(updated);
   }, [connections]);
+
+  // Poll health every 30 s so sidebar dots stay accurate after initial load.
+  // The effect re-runs whenever `connections` changes (i.e. after the first
+  // health check populates the list), so the interval always closes over the
+  // latest snapshot — no stale-closure issues.
+  useEffect(() => {
+    if (isDockerMode || connections.length === 0) return;
+
+    const intervalId = setInterval(async () => {
+      const updated = await Promise.all(
+        connections.map(async (conn) => {
+          try {
+            const res = await fetch(`/api/health?dbId=${conn.id}`);
+            return { ...conn, isAlive: res.ok };
+          } catch {
+            return { ...conn, isAlive: false };
+          }
+        }),
+      );
+      setConnections(updated);
+    }, 30_000);
+
+    return () => clearInterval(intervalId);
+  }, [connections, isDockerMode]);
+
   const loadOverview = useCallback(async () => {
     setAppMode("overview");
     setLoading(true);