From e0510bca6b7d52db681fa97e615f1828741834cd Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Sun, 19 Apr 2026 14:30:01 +0800
Subject: [PATCH] fix(web): refresh system status card when clicking Refresh
 Data button

Pass a refreshKey prop through OverviewCards to SystemStatusCard that
increments on each Refresh Data click, triggering a re-fetch of Plugin
and Box runtime status alongside the monitoring data refresh.
---
 .../components/overview-cards/OverviewCards.tsx    |  4 +++-
 .../overview-cards/SystemStatusCards.tsx           | 14 +++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/web/src/app/home/monitoring/components/overview-cards/OverviewCards.tsx b/web/src/app/home/monitoring/components/overview-cards/OverviewCards.tsx
index a116cc5e..f37d1523 100644
--- a/web/src/app/home/monitoring/components/overview-cards/OverviewCards.tsx
+++ b/web/src/app/home/monitoring/components/overview-cards/OverviewCards.tsx
@@ -15,6 +15,7 @@ interface OverviewCardsProps {
   messages?: MonitoringMessage[];
   llmCalls?: LLMCall[];
   loading?: boolean;
+  refreshKey?: number;
 }
 
 export default function OverviewCards({
@@ -22,6 +23,7 @@ export default function OverviewCards({
   messages = [],
   llmCalls = [],
   loading,
+  refreshKey,
 }: OverviewCardsProps) {
   const { t } = useTranslation();
 
@@ -94,7 +96,7 @@ export default function OverviewCards({
             loading={loading}
           />
         ))}
-        <SystemStatusCard />
+        <SystemStatusCard refreshKey={refreshKey} />
       </div>
 
       {/* Traffic Chart */}
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 c5e58f3a..ed8c3a58 100644
--- a/web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx
+++ b/web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx
@@ -30,7 +30,13 @@ function StatusDot({ ok }: { ok: boolean | null }) {
   );
 }
 
-export default function SystemStatusCard() {
+interface SystemStatusCardProps {
+  refreshKey?: number;
+}
+
+export default function SystemStatusCard({
+  refreshKey,
+}: SystemStatusCardProps) {
   const { t } = useTranslation();
   const [pluginStatus, setPluginStatus] =
     useState<ApiRespPluginSystemStatus | null>(null);
@@ -52,10 +58,12 @@ export default function SystemStatusCard() {
   }, []);
 
   useEffect(() => {
-    fetchStatus(true);
+    // refreshKey changes when the user clicks "Refresh Data"
+    fetchStatus(refreshKey === undefined);
     const interval = setInterval(() => fetchStatus(false), 30_000);
     return () => clearInterval(interval);
-  }, [fetchStatus]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetchStatus, refreshKey]);
 
   const pluginOk = pluginStatus
     ? pluginStatus.is_enable && pluginStatus.is_connected