From fe6b19309a10e4ccabc9029734508bf9d7380afb Mon Sep 17 00:00:00 2001
From: HubKey76 <mike@hubkey.co>
Date: Wed, 29 Jul 2026 08:38:04 +0000
Subject: [PATCH] fix(dashboard): add 90s auto-refresh to overview page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AgentStatusGrid was a pure display component with no client-side refresh —
heartbeat data froze at page-load time until browser was manually reloaded.
AutoRefresh mounts in the overview page and calls router.refresh() every 90s,
keeping heartbeat timestamps current without requiring a user action.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 dashboard/src/app/(dashboard)/page.tsx          |  2 ++
 .../src/components/overview/auto-refresh.tsx    | 17 +++++++++++++++++
 2 files changed, 19 insertions(+)
 create mode 100644 dashboard/src/components/overview/auto-refresh.tsx

diff --git a/dashboard/src/app/(dashboard)/page.tsx b/dashboard/src/app/(dashboard)/page.tsx
index 3e20d634..78a6a068 100644
--- a/dashboard/src/app/(dashboard)/page.tsx
+++ b/dashboard/src/app/(dashboard)/page.tsx
@@ -14,6 +14,7 @@ import { LiveActivity } from '@/components/overview/live-activity';
 import { SystemHealth } from '@/components/overview/system-health';
 import { MetricCards } from '@/components/overview/metric-cards';
 import { AgentStatusGrid } from '@/components/overview/agent-status-grid';
+import { AutoRefresh } from '@/components/overview/auto-refresh';
 
 export const dynamic = 'force-dynamic';
 
@@ -67,6 +68,7 @@ export default async function OverviewPage({
 
   return (
     <div className="space-y-6">
+      <AutoRefresh />
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
diff --git a/dashboard/src/components/overview/auto-refresh.tsx b/dashboard/src/components/overview/auto-refresh.tsx
new file mode 100644
index 00000000..d8f1092b
--- /dev/null
+++ b/dashboard/src/components/overview/auto-refresh.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+const REFRESH_INTERVAL_MS = 90_000; // 90s — fast enough to catch cron heartbeats, light on server
+
+export function AutoRefresh() {
+  const router = useRouter();
+
+  useEffect(() => {
+    const id = setInterval(() => router.refresh(), REFRESH_INTERVAL_MS);
+    return () => clearInterval(id);
+  }, [router]);
+
+  return null;
+}