From d47803db2c4b418ff0a99e70b89173501d00a6ad Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Sun, 19 Apr 2026 14:05:41 +0800
Subject: [PATCH] fix(web): auto-refresh system status and show disconnect
 errors in real time

Poll Plugin Runtime and Box Runtime status every 30 seconds so the
dashboard reflects disconnections without a manual page refresh.
Also re-fetch when the popover is opened for immediate feedback.
---
 .../overview-cards/SystemStatusCards.tsx         | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx b/web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx
index 4eae8b55..c5e58f3a 100644
--- a/web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx
+++ b/web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx
@@ -37,8 +37,8 @@ export default function SystemStatusCard() {
   const [boxStatus, setBoxStatus] = useState<ApiRespBoxStatus | null>(null);
   const [loading, setLoading] = useState(true);
 
-  const fetchStatus = useCallback(async () => {
-    setLoading(true);
+  const fetchStatus = useCallback(async (showLoading = false) => {
+    if (showLoading) setLoading(true);
     try {
       const [plugin, box] = await Promise.all([
         httpClient.getPluginSystemStatus().catch(() => null),
@@ -47,12 +47,14 @@ export default function SystemStatusCard() {
       setPluginStatus(plugin);
       setBoxStatus(box);
     } finally {
-      setLoading(false);
+      if (showLoading) setLoading(false);
     }
   }, []);
 
   useEffect(() => {
-    fetchStatus();
+    fetchStatus(true);
+    const interval = setInterval(() => fetchStatus(false), 30_000);
+    return () => clearInterval(interval);
   }, [fetchStatus]);
 
   const pluginOk = pluginStatus
@@ -78,7 +80,11 @@ export default function SystemStatusCard() {
   }
 
   return (
-    <Popover>
+    <Popover
+      onOpenChange={(open) => {
+        if (open) fetchStatus(false);
+      }}
+    >
       <PopoverTrigger asChild>
         <Card className="transition-all duration-300 group cursor-pointer hover:border-primary/30">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">