From 854fcaf66f54c27ae79a2032bd4b87916688ef09 Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Sat, 21 Mar 2026 19:26:28 -0400
Subject: [PATCH] Enhance connection status display: add bridge connection
 status and last update time

---
 web/client/src/App.jsx | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/web/client/src/App.jsx b/web/client/src/App.jsx
index df7a37f..f610b9d 100644
--- a/web/client/src/App.jsx
+++ b/web/client/src/App.jsx
@@ -12,10 +12,25 @@ import './App.css';
 function App() {
   const connect = useInventoryStore((state) => state.connect);
   const connected = useInventoryStore((state) => state.connected);
+  const bridgeConnected = useInventoryStore((state) => state.bridgeConnected);
+  const lastUpdate = useInventoryStore((state) => state.lastUpdate);
   const commandResult = useInventoryStore((state) => state.commandResult);
   const alerts = useInventoryStore((state) => state.alerts) || [];
   const [panelTab, setPanelTab] = useState('inventory');
   const [showAlerts, setShowAlerts] = useState(false);
+  const [, forceRender] = useState(0);
+
+  useEffect(() => {
+    connect();
+  }, [connect]);
+
+  // Re-render every 5s so the "last updated" text stays fresh
+  useEffect(() => {
+    const id = setInterval(() => forceRender((n) => n + 1), 5000);
+    return () => clearInterval(id);
+  }, []);
+
+  const staleSecs = lastUpdate ? Math.floor((Date.now() - lastUpdate) / 1000) : null;
 
   useEffect(() => {
     connect();
@@ -58,6 +73,17 @@ function App() {
             <span className="status-dot"></span>
             {connected ? 'Connected' : 'Disconnected'}
           </div>
+          {connected && (
+            <div className={`connection-status ${bridgeConnected ? 'connected' : 'disconnected'}`} title="Minecraft CC:Tweaked bridge">
+              <span className="status-dot"></span>
+              {bridgeConnected ? 'Bridge OK' : 'Bridge Off'}
+            </div>
+          )}
+          {staleSecs !== null && staleSecs > 0 && (
+            <span className="last-update-text" title="Time since last data update">
+              {staleSecs < 60 ? `${staleSecs}s ago` : `${Math.floor(staleSecs / 60)}m ago`}
+            </span>
+          )}
         </div>
       </div>