From 0eb7c772a74b908dea7c7a2df53c780cdd775e27 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Fri, 26 Jun 2026 19:04:41 +0200
Subject: [PATCH] fix(status): stop the connection badge from lying about
 device state

loadMessages() called updateStatus('connected') on every successful
/api/messages fetch -- a DB read that succeeds regardless of whether
the meshcore device itself is connected. Same conflation in dm.js,
which marked 'connected' on Socket.IO transport connect (browser <->
server), unrelated to device <-> server connectivity. Together these
silently overwrote the real status (e.g. an actual device disconnect)
back to "Connected" on the very next channel switch or auto-refresh.

Also fixed the 'device_status' socket handler in app.js, which built
its own markup against a `#connectionStatus` element that doesn't
exist in any template (dead code since introduction) instead of
calling the shared updateStatus() against the real `#statusText`
element. Added a 60s polling fallback via loadStatus() in case a
push is ever missed on a long-lived tab.

Verified locally: ran the app against no real device (always
disconnected) and confirmed via Playwright that the badge now stays
correctly "Disconnected" through repeated loadMessages() calls,
instead of flipping back to "Connected" as before the fix.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/static/js/app.js | 11 +++++------
 app/static/js/dm.js  |  1 -
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/static/js/app.js b/app/static/js/app.js
index 5e35153..28faa82 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -482,11 +482,7 @@ function connectChatSocket() {
 
     // Real-time device status
     chatSocket.on('device_status', (data) => {
-        const statusEl = document.getElementById('connectionStatus');
-        if (statusEl) {
-            statusEl.className = data.connected ? 'connection-status connected' : 'connection-status disconnected';
-            statusEl.textContent = data.connected ? 'Connected' : 'Disconnected';
-        }
+        updateStatus(data.connected ? 'connected' : 'disconnected');
     });
 }
 
@@ -546,6 +542,10 @@ document.addEventListener('DOMContentLoaded', async function() {
     // Initial badge updates (fast, sync-ish)
     updatePendingContactsBadge();
     loadStatus();
+    // Re-poll periodically as a fallback to the 'device_status' socket push —
+    // a missed/late socket event would otherwise leave the badge stale
+    // indefinitely on a long-lived tab.
+    setInterval(loadStatus, 60000);
 
     // Map button in menu
     const mapBtn = document.getElementById('mapBtn');
@@ -972,7 +972,6 @@ async function loadMessages() {
 
         if (data.success) {
             displayMessages(data.messages);
-            updateStatus('connected');
             updateLastRefresh();
             updateRegionIndicator();
         } else {
diff --git a/app/static/js/dm.js b/app/static/js/dm.js
index e6df242..0427ec1 100644
--- a/app/static/js/dm.js
+++ b/app/static/js/dm.js
@@ -134,7 +134,6 @@ function connectChatSocket() {
 
     chatSocket.on('connect', () => {
         console.log('DM: SocketIO connected to /chat');
-        updateStatus('connected');
     });
 
     chatSocket.on('disconnect', () => {