Web UI: skip status re-render when nothing the UI shows changed (#41)

The backend pushes a status SSE event on every platform state change, and
the client re-ran setConnectionState + renderEmptyState + chat-header
chrome on each one. A flapping bridge — e.g. a signal-cli crash loop that
tears down and reconnects every few seconds — turned that into a constant
banner/header rebuild that visibly flickered the whole app (reported live:
"flickering every few seconds, unusable", traced to signal-cli 0.14.1
NPE-ing on an unparseable envelope and the bridge flapping connected).

applyAppStatus now renders only when a signature of the *visible* state
changes. The signature keys secondary platforms off whether they're PAIRED
(what the banner/empty-state actually use), not their live connected flag,
so a Signal/WhatsApp connect↔disconnect flap with the Platforms dialog
closed is a no-op. Live per-platform detail (connect progress, QR) is
folded in only while that dialog is open, and freshness timestamps are
excluded so message arrival never triggers a chrome rebuild. Genuine
changes — Google connect/disconnect, pairing progress, a new QR — still
render.

Verified with a new e2e test: 6× Signal flap leaves the banner
byte-identical while a Google disconnect still updates it.

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: MaxGhenis

e2e/ui.spec.js

@@ -1089,3 +1089,34 @@ test('escape closes the platforms overlay without clearing search', async ({ pag
   await expect(page.locator('#wa-overlay')).not.toHaveClass(/show/);
   await expect(page.locator('#search-input')).toHaveValue('hike');
 });
+
+test('status flap from a flapping bridge does not re-render the main UI', async ({ page }) => {
+  await page.waitForFunction(() => window.__openMessageTestHooks?.applyAppStatus);
+  const r = await page.evaluate(() => {
+    const H = window.__openMessageTestHooks;
+    const banner = () => {
+      const b = document.getElementById('connection-banner');
+      const copy = document.getElementById('connection-banner-copy');
+      return JSON.stringify({ disp: b ? getComputedStyle(b).display : null, text: copy ? copy.textContent : null });
+    };
+    const base = {
+      connected: true,
+      google: { connected: true, paired: true, needs_pairing: false },
+      whatsapp: { connected: true, paired: true },
+      signal: { connected: true, paired: true },
+      backfill: { running: false },
+    };
+    const flap = JSON.parse(JSON.stringify(base)); flap.signal.connected = false; // bridge crash; paired stays
+    const gDown = JSON.parse(JSON.stringify(base)); gDown.google.connected = false; gDown.connected = false;
+
+    H.applyAppStatus(base);
+    const sig0 = H.lastStatusRenderSig(); const banner0 = banner();
+    for (let i = 0; i < 6; i++) H.applyAppStatus(i % 2 ? flap : base);
+    const flapStable = sig0 === H.lastStatusRenderSig() && banner0 === banner();
+    H.applyAppStatus(gDown);
+    const realChanged = sig0 !== H.lastStatusRenderSig() && banner0 !== banner();
+    return { flapStable, realChanged };
+  });
+  expect(r.flapStable).toBe(true);   // Signal flapping must not churn the banner
+  expect(r.realChanged).toBe(true);  // a genuine Google disconnect still renders
+});

internal/web/static/index.html

@@ -4582,6 +4582,12 @@ <h2 id="empty-state-title">No conversations yet</h2>
     contacts_checked: 0,
     errors: 0,
   };
+  // Signature of the last status that actually drove a render. The backend
+  // pushes a status SSE event on every platform state change, and a flapping
+  // bridge (or the 10s fallback poll) can fire many identical ones; rendering
+  // each rebuilds the connection banner + header chrome and visibly flickers.
+  // applyAppStatus skips the render pass when this signature is unchanged.
+  let lastStatusRenderSig = null;
   let whatsAppPollTimer = null;
   const knownMessageIDs = new Set();
   const knownMessageOrder = [];
@@ -8340,6 +8346,24 @@ <h2 id="empty-state-title">No conversations yet</h2>
     whatsAppStatus = normalizeWhatsAppStatus(appStatus.whatsapp || {});
     signalStatus = normalizeSignalStatus(appStatus.signal || {});
     backfillStatus = normalizeBackfillStatus(appStatus.backfill || {});
+    // Only re-render when something the always-on UI actually shows changed.
+    // The banner and empty state key off whether secondary platforms are
+    // PAIRED, not their live connected flag — so a Signal/WhatsApp bridge
+    // flapping connected↔disconnected (e.g. a signal-cli crash loop) must not
+    // churn the main UI. Live per-platform detail (connect progress, QR) only
+    // matters while the Platforms dialog is open, so it's folded in only then.
+    // Freshness timestamps are excluded entirely (they tick on every message).
+    const overlayOpen = !!($waOverlay && $waOverlay.classList.contains('show'));
+    const hasSecondaryPaired = whatsAppStatus.paired || whatsAppStatus.connected
+      || signalStatus.paired || signalStatus.connected;
+    const sig = JSON.stringify([
+      googleStatus, hasSecondaryPaired,
+      backfillStatus.running, allConversations.length,
+      browserReportsOnline(), activeConvoId, overlayOpen,
+      overlayOpen ? [whatsAppStatus, signalStatus] : null,
+    ]);
+    if (sig === lastStatusRenderSig) return;
+    lastStatusRenderSig = sig;
     setConnectionState();
     renderWhatsAppButton();
     renderEmptyState();
@@ -9773,6 +9797,12 @@ <h2 id="empty-state-title">No conversations yet</h2>
           windowSize: THREAD_RENDER_WINDOW_SIZE,
         };
       },
+      applyAppStatus(status = {}) {
+        applyAppStatus(status || {});
+      },
+      lastStatusRenderSig() {
+        return lastStatusRenderSig;
+      },
     };
   }