@ethora/chat-component-rn 26.5.5 → 26.5.10

package/src/networking/xmppClient.ts

@@ -22,10 +22,35 @@ import { inviteRoomRequest } from './xmpp/inviteRoomRequest.xmpp';
 import { getRooms } from './xmpp/getRooms.xmpp';
 import { handleStanza } from './xmpp/handleStanzas.xmpp';
 import { pushLog as devPushLog } from '../utils/devLogger';
+import { normalizeRoomJid } from '../helpers/normalizeRoomJid';
+import {
+  clearOutboundSends,
+  enqueueOutboundSend,
+  flushOutboundSends,
+} from './outboundQueue';
 
 // Canonical production XMPP WSS endpoint (standard wss/443, no port suffix).
 const DEFAULT_DEV_SERVER = 'xmpp.chat.ethora.com';
 
+// @xmpp/client surfaces SASL/stream errors in a few shapes depending on
+// where it fails — XMPPError on stream:error, SASLError on SASL bind, or
+// a generic Error whose message contains "not-authorized". Match all of
+// them so we trigger the credentials refresh path consistently.
+function isNotAuthorizedError(err: any): boolean {
+  if (!err) {return false;}
+  const condition =
+    err?.condition ||
+    err?.name ||
+    err?.type ||
+    err?.error?.condition ||
+    '';
+  if (typeof condition === 'string' && condition.includes('not-authorized')) {
+    return true;
+  }
+  const message = (err?.message || err?.text || '').toString();
+  return /not-authorized|SASLError/i.test(message);
+}
+
 type HistorySource = 'active' | 'send_ack' | 'background' | 'default';
 
 interface HistoryOptions {
@@ -40,6 +65,11 @@ interface MamInFlightEntry {
   startedAt: number;
 }
 
+export type XmppCredentialsProvider = () => Promise<{
+  username: string;
+  password: string;
+}>;
+
 export class XmppClient {
   client!: Client;
   xmppSettings?: xmppSettingsInterface;
@@ -54,7 +84,35 @@ export class XmppClient {
   reconnectAttempts = 0;
   maxReconnectAttempts = 5;
   reconnectDelay = 2000;
+  // Upper bound on the backoff delay. The old hard stop at
+  // maxReconnectAttempts gave up entirely after ~62s; now we keep retrying
+  // at a steady cadence on a long outage and just clamp the delay here.
+  maxReconnectDelay = 30000;
+  // Timestamp of the last forced reconnect so bursty external triggers
+  // (NetInfo + AppState + the provider watchdog firing together) can't
+  // spawn a reconnect storm.
+  private lastReconnectAt = 0;
   suppressReconnect = false;
+  // Tracked so close()/disconnect() can cancel a pending reconnect —
+  // otherwise a scheduleReconnect() timer fires after logout and (until
+  // suppressReconnect short-circuits it) keeps the dead instance alive.
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  // Single-flight guard for reconnect(). Multiple triggers can fire near-
+  // simultaneously (AppState 'active' + NetInfo restore + a scheduled
+  // timer). Without this, two overlapping reconnect()s each spawn a fresh
+  // underlying client and one is leaked with its `stanza` handler still
+  // bound → duplicate stanza dispatch into redux.
+  private reconnecting = false;
+
+  // Set when SASL fails with `not-authorized` (typically a stale JWT-
+  // derived XMPP password after idle). Triggers the credentialsProvider
+  // refresh path in reconnect().
+  lastAuthError: 'not-authorized' | null = null;
+  private credentialsProvider: XmppCredentialsProvider | null = null;
+  private credentialsRefreshInFlight: Promise<void> | null = null;
+  // Fired by the provider on every 'online' so it can re-join MUC rooms
+  // after a reconnect (bug #21 — reconnected but not in the room).
+  private onOnlineCallback: (() => void) | null = null;
 
   // ---- QoS state (mirrors web XmppClient) ----------------------------
   presencesReady = false;
@@ -74,6 +132,29 @@ export class XmppClient {
     return this.client && this.client.status === 'online';
   }
 
+  /**
+   * Inject (or replace) the callback used by reconnect() to fetch fresh
+   * XMPP credentials after a `not-authorized` SASL failure. The provider
+   * is responsible for refreshing whatever upstream token is needed
+   * (REST JWT, /users/client, etc.) and returning the resulting
+   * username + password.
+   */
+  setCredentialsProvider(provider: XmppCredentialsProvider | null) {
+    this.credentialsProvider = provider;
+  }
+
+  /** Install a callback invoked on every successful 'online'. The provider
+   * uses it to re-join MUC rooms after a reconnect. */
+  setOnOnline(cb: (() => void) | null) {
+    this.onOnlineCallback = cb;
+  }
+
+  /** Swap in fresh credentials before the next reconnect. */
+  updateCredentials(username: string, password: string) {
+    this.username = username;
+    this.password = password;
+  }
+
   constructor(
     username: string,
     password: string,
@@ -229,12 +310,24 @@ export class XmppClient {
         this.xmppSettings?.conference || `conference.${this.host}`;
       this.status = 'connecting';
 
+      // Defensive: if a previous underlying client is still referenced
+      // (initializeClient reached from a path other than reconnect()),
+      // detach its handlers before we overwrite the ref so the orphaned
+      // client can't keep dispatching stanzas into redux.
+      try {
+        this.detachEventListeners();
+      } catch {}
+
       this.client = xmpp.client({
         service: url,
         username: walletToUsername(this.username),
         password: this.password,
       });
 
+      try {
+        (this.client as any)?.reconnect?.stop?.();
+      } catch {}
+
       // Concurrent room preloads each register their own short-lived
       // 'stanza' handler (getHistory, getRooms, getChatsPrivateStore,
       // ...). With 5+ rooms preloading in parallel, Node's default
@@ -265,7 +358,18 @@ export class XmppClient {
                 stanza?.toString ? stanza.toString() : undefined
               );
             } catch {}
-            return origSend(stanza);
+            const result = origSend(stanza);
+            // Most stanza helpers fire-and-forget `client.send(...)`
+            // without awaiting/catching. On @xmpp/client builds where
+            // send() returns a Promise, a transient send failure (e.g.
+            // mid-reconnect) then surfaces as a red-screen "Uncaught (in
+            // promise, id: N)" (#4). Attach a no-op catch so the
+            // rejection is considered handled — callers that DO await/
+            // catch still get it, because we return the SAME promise.
+            if (result && typeof (result as any).catch === 'function') {
+              (result as any).catch(() => {});
+            }
+            return result;
           };
           // Property may be non-writable on some builds; defineProperty
           // gives us a clearer error than a plain assignment.
@@ -285,7 +389,21 @@ export class XmppClient {
       this.attachEventListeners();
       this.client.start().catch((error: any) => {
         console.error('Error starting xmpp client:', error);
+        if (isNotAuthorizedError(error)) {
+          this.lastAuthError = 'not-authorized';
+        }
         this.status = 'error';
+        // A connect-time failure lands in 'error', which — unlike a
+        // 'disconnect' after being online — has no other retry path
+        // (onError doesn't reschedule; the provider only reacts to
+        // 'offline'). Schedule a backoff retry so a failed initial or
+        // reconnect attempt recovers on its own. reconnect() refreshes
+        // creds first when the failure was a SASL not-authorized.
+        if (!this.suppressReconnect) {
+          try {
+            this.scheduleReconnect();
+          } catch {}
+        }
       });
     } catch (error) {
       console.error('Error initializing client:', error);
@@ -293,8 +411,22 @@ export class XmppClient {
     }
   }
 
+  // Stored so detachEventListeners() can remove exactly the handlers we
+  // added (not xmpp.js's internal ones). Without this a re-login left the
+  // previous instance's `stanza` handler bound, double-dispatching every
+  // incoming stanza into the (new session's) redux store.
+  private onDisconnect?: () => void;
+  private onOnline?: () => void;
+  private onError?: (error: any) => void;
+  private onStanza?: (stanza: any) => void;
+
   attachEventListeners() {
-    this.client.on('disconnect', () => {
+    // Idempotent: drop any previously-attached handlers first so a
+    // reconnect that re-runs initializeClient on a fresh underlying
+    // client doesn't stack duplicates.
+    this.detachEventListeners();
+
+    this.onDisconnect = () => {
       console.log('XMPP disconnected.');
       this.status = 'offline';
       try {
@@ -302,9 +434,20 @@ export class XmppClient {
         // that don't reference it; tree-shaken via dead-code elim.
         devPushLog('xmpp', 'disconnect');
       } catch {}
-    });
+      // Self-heal at the socket level. The provider's reconnect effect
+      // keys on `client.status`, but that's a mutated class field React
+      // does NOT track — so a silent socket drop (e.g. JS paused by the
+      // debugger, iOS WebSocket suspend) never re-runs the effect and the
+      // client sits 'offline' forever (sends then queue and time out).
+      // Driving reconnect here makes recovery independent of React.
+      if (!this.suppressReconnect) {
+        try {
+          this.scheduleReconnect();
+        } catch {}
+      }
+    };
 
-    this.client.on('online', () => {
+    this.onOnline = () => {
       console.log('XMPP online.', new Date());
       this.status = 'online';
       this.presencesReady = true;
@@ -316,10 +459,35 @@ export class XmppClient {
           this.username
         );
       } catch {}
-    });
+      // Notify the provider that the session is live again. On a RECONNECT
+      // (new stream) the client is no longer joined to any MUC, so the
+      // provider must re-send room presences — otherwise messages get a
+      // local double-tick but never reach the room (bug #21). Harmless on
+      // the first connect (room list not loaded yet → joins nothing; the
+      // bootstrap's own allRoomPresences handles that pass).
+      try {
+        this.onOnlineCallback?.();
+      } catch (err) {
+        console.warn('onOnline callback failed', err);
+      }
+      // Drain any sends that were buffered while the stream was down. The
+      // presence stanzas from onOnlineCallback above were written to the
+      // socket synchronously (allRoomPresences → presenceInRoom send the
+      // <presence> before yielding), so flushing here puts the message
+      // stanzas AFTER the joins on the same stream — XMPP's in-order
+      // per-stream processing guarantees the MUC join lands first.
+      try {
+        this.flushPendingSends();
+      } catch (err) {
+        console.warn('flushPendingSends failed', err);
+      }
+    };
 
-    this.client.on('error', (error: any) => {
+    this.onError = (error: any) => {
       console.error('XMPP client error:', error);
+      if (isNotAuthorizedError(error)) {
+        this.lastAuthError = 'not-authorized';
+      }
       try {
         devPushLog(
           'xmpp',
@@ -327,9 +495,9 @@ export class XmppClient {
           (error && error.message) || error
         );
       } catch {}
-    });
+    };
 
-    this.client.on('stanza', (stanza: any) => {
+    this.onStanza = (stanza: any) => {
       try {
         const tag = stanza?.name || 'stanza';
         const id = stanza?.attrs?.id || '';
@@ -342,7 +510,27 @@ export class XmppClient {
         );
       } catch {}
       handleStanza.bind(this, stanza, this)();
-    });
+    };
+
+    this.client.on('disconnect', this.onDisconnect);
+    this.client.on('online', this.onOnline);
+    this.client.on('error', this.onError);
+    this.client.on('stanza', this.onStanza);
+  }
+
+  detachEventListeners() {
+    const c = this.client as any;
+    if (!c?.removeListener) {return;}
+    try {
+      if (this.onDisconnect) {c.removeListener('disconnect', this.onDisconnect);}
+      if (this.onOnline) {c.removeListener('online', this.onOnline);}
+      if (this.onError) {c.removeListener('error', this.onError);}
+      if (this.onStanza) {c.removeListener('stanza', this.onStanza);}
+    } catch {}
+    this.onDisconnect = undefined;
+    this.onOnline = undefined;
+    this.onError = undefined;
+    this.onStanza = undefined;
   }
 
   /**
@@ -374,36 +562,150 @@ export class XmppClient {
 
   scheduleReconnect() {
     if (this.suppressReconnect) {return;}
-    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-      console.error('Max reconnect attempts reached.');
-      return;
-    }
+    if (this.reconnecting || this.reconnectTimer) {return;}
     this.reconnectAttempts++;
-    const delay =
-      this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);
+    const exp = Math.min(
+      this.reconnectAttempts - 1,
+      Math.max(0, this.maxReconnectAttempts)
+    );
+    const delay = Math.min(
+      this.maxReconnectDelay,
+      this.reconnectDelay * Math.pow(2, exp)
+    );
     console.log(`Reconnecting attempt ${this.reconnectAttempts} in ${delay}ms`);
-    setTimeout(() => this.reconnect(), delay);
+    // No clearTimeout needed — the guard above guarantees no pending timer.
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = null;
+      // The connection may have recovered on its own (xmpp.js auto-
+      // reconnect) between scheduling and firing — don't tear down a
+      // healthy stream. forceReconnect() bypasses this by calling
+      // reconnect() directly.
+      if (this.status === 'online') {
+        this.reconnectAttempts = 0;
+        return;
+      }
+      this.reconnect();
+    }, delay);
+  }
+
+  /**
+   * Force an immediate reconnect, resetting the backoff counter. Called
+   * by the provider when NetInfo reports the network came back or the app
+   * returned to the foreground — we don't want to wait out the existing
+   * exponential delay (or a maxed-out attempt count) in those cases.
+   */
+  forceReconnect() {
+    if (this.suppressReconnect) {return;}
+    // Debounce bursts: NetInfo restore + AppState 'active' + the provider
+    // watchdog can fire within the same instant. reconnect() dedups
+    // CONCURRENT calls, but sequential ones (one finishes, the next
+    // arrives) would still each tear down + re-create the client. Ignore
+    // forces within 2s of the last one.
+    const now = Date.now();
+    if (now - this.lastReconnectAt < 2000) {return;}
+    this.lastReconnectAt = now;
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    this.reconnectAttempts = 0;
+    this.reconnect();
   }
 
-  reconnect() {
+  async reconnect() {
     if (this.suppressReconnect) {return;}
+    // Single-flight: ignore overlapping triggers (AppState + NetInfo +
+    // scheduled timer) so we never spawn two underlying clients and leak
+    // one with live listeners (duplicate stanza dispatch).
+    if (this.reconnecting) {
+      console.log('reconnect already in progress — skip');
+      return;
+    }
+    this.reconnecting = true;
     console.log('Attempting to reconnect xmpp client...');
-    if (this.client) {
-      this.client.stop().finally(() => {
-        this.initializeClient();
-      });
-    } else {
+
+    try {
+      // If the last failure was a SASL `not-authorized` (typically a stale
+      // JWT-derived XMPP password after idle), try to fetch fresh creds
+      // before retrying. Without this, reconnect retries with the same
+      // stale password forever and the user has to kill the app.
+      if (this.lastAuthError === 'not-authorized' && this.credentialsProvider) {
+        try {
+          await this.refreshCredentialsOnce();
+        } catch (err) {
+          console.warn(
+            'XMPP credential refresh failed; reconnecting with cached creds',
+            err
+          );
+        }
+      }
+
+      // Tear the OLD underlying client down FULLY before spinning up a new
+      // one: detach our handlers (so its `stanza` handler can't keep
+      // dispatching) and stop it. detachEventListeners() must run while
+      // `this.client` still points at the old client — i.e. before
+      // initializeClient() reassigns it.
+      const old = this.client;
+      if (old) {
+        this.detachEventListeners();
+        try {
+          await old.stop();
+        } catch {}
+      }
       this.initializeClient();
+    } finally {
+      this.reconnecting = false;
     }
   }
 
+  /**
+   * Single-flight wrapper around credentialsProvider. Multiple concurrent
+   * reconnect() calls (e.g. from the provider's reconnect effect firing
+   * twice quickly) share one in-flight request and update `this.password`
+   * exactly once.
+   */
+  private refreshCredentialsOnce(): Promise<void> {
+    if (this.credentialsRefreshInFlight) {return this.credentialsRefreshInFlight;}
+    if (!this.credentialsProvider) {return Promise.resolve();}
+    const provider = this.credentialsProvider;
+    this.credentialsRefreshInFlight = (async () => {
+      try {
+        const fresh = await provider();
+        if (fresh?.username && fresh?.password) {
+          // Apply whatever the provider returns and retry. We do NOT try to
+          // detect "auth expired" by comparing passwords — a stable
+          // xmppPassword (e.g. deterministic from the JWT/wallet) is the
+          // NORMAL case for a transient blip, and treating it as expiry
+          // falsely bricked recoverable sessions (sending stopped). If the
+          // creds really are stale we simply get not-authorized again and
+          // retry, which is the confirmed-good 26.5.7 behaviour.
+          this.updateCredentials(fresh.username, fresh.password);
+          this.lastAuthError = null;
+        }
+      } finally {
+        this.credentialsRefreshInFlight = null;
+      }
+    })();
+    return this.credentialsRefreshInFlight;
+  }
+
   async disconnect(options?: { suppressReconnect?: boolean }): Promise<void> {
     if (options?.suppressReconnect) {this.suppressReconnect = true;}
     return this.close();
   }
 
   async close() {
+    // Cancel any pending reconnect so a stale timer can't resurrect this
+    // instance after teardown/logout.
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
     if (this.client) {
+      // Detach OUR handlers first so a late stanza during the close
+      // handshake can't re-enter handleStanza and dispatch into a store
+      // that's being wiped (or, on re-login, the new session's store).
+      this.detachEventListeners();
       try {
         await this.client.stop();
         console.log('XMPP client connection closed.');
@@ -412,6 +714,11 @@ export class XmppClient {
       }
     }
     this.status = 'offline';
+    this.presencesReady = false;
+    // Permanent teardown (logout / unmount) — drop buffered sends so they
+    // don't replay into the next session. Reconnect uses old.stop(), NOT
+    // close(), so the queue still survives a transient drop+reconnect.
+    clearOutboundSends();
   }
 
   getRoomsStanza = async () => {
@@ -429,11 +736,11 @@ export class XmppClient {
   }
 
   leaveTheRoomStanza = (roomJID: string) => {
-    leaveTheRoom(roomJID, this.client);
+    leaveTheRoom(normalizeRoomJid(roomJID, this.conference), this.client);
   };
 
   presenceInRoomStanza = (roomJID: string) => {
-    presenceInRoom(this.client, roomJID);
+    presenceInRoom(this.client, normalizeRoomJid(roomJID, this.conference));
   };
 
   getHistoryStanza = async (
@@ -456,7 +763,7 @@ export class XmppClient {
   };
 
   getLastMessageArchiveStanza(roomJID: string) {
-    getLastMessage(this.client, roomJID);
+    getLastMessage(this.client, normalizeRoomJid(roomJID, this.conference));
   }
 
   setRoomImageStanza = (
@@ -469,13 +776,28 @@ export class XmppClient {
   };
 
   getRoomInfoStanza = (roomJID: string) => {
-    getRoomInfo(roomJID, this.client);
+    getRoomInfo(normalizeRoomJid(roomJID, this.conference), this.client);
   };
 
   getRoomMembersStanza = (roomJID: string) => {
-    getRoomMembers(roomJID, this.client);
+    getRoomMembers(normalizeRoomJid(roomJID, this.conference), this.client);
   };
 
+  /**
+   * True when the underlying stream is live enough to actually put a
+   * stanza on the wire. Used to gate sends: when false we buffer instead
+   * of firing a fire-and-forget stanza into a dead/half-open socket
+   * (which is silently dropped and only caught by the 30s watchdog).
+   */
+  private isStreamReady(): boolean {
+    return !!this.client && this.status === 'online' && !this.reconnecting;
+  }
+
+  /** Replay buffered sends against this (now-online) client, in order. */
+  flushPendingSends() {
+    flushOutboundSends(this, Date.now());
+  }
+
   //messages
   sendMessage = (
     roomJID: string,
@@ -489,7 +811,32 @@ export class XmppClient {
     showInChannel?: boolean,
     mainMessage?: string,
     customId?: string
-  ) => {
+  ): boolean => {
+    // Stream down (start race / reconnect window): buffer and replay on
+    // the next 'online' instead of losing the stanza. Returns false so
+    // callers know the send was deferred, not delivered.
+    if (!this.isStreamReady()) {
+      enqueueOutboundSend({
+        optimisticId: customId || `send-text-message-${Date.now()}`,
+        roomJID,
+        enqueuedAt: Date.now(),
+        send: (c) =>
+          c.sendMessage(
+            roomJID,
+            firstName,
+            lastName,
+            photo,
+            walletAddress,
+            userMessage,
+            notDisplayedValue,
+            isReply,
+            showInChannel,
+            mainMessage,
+            customId
+          ),
+      });
+      return false;
+    }
     sendTextMessage(
       this.client,
       roomJID,
@@ -505,6 +852,7 @@ export class XmppClient {
       this.devServer || DEFAULT_DEV_SERVER,
       customId
     );
+    return true;
   };
 
   deleteMessageStanza(room: string, msgId: string) {
@@ -550,7 +898,7 @@ export class XmppClient {
   // src/networking/xmpp/flushLastViewedToPrivateStore.ts for details.
   async flushLastViewedToPrivateStoreStanza(
     rooms: Record<string, any> | null | undefined,
-    opts: { activeRoomJID?: string | null; onlyIfNoUnread?: boolean } = {}
+    opts: { visibleRoomJID?: string | null; onlyIfNoUnread?: boolean } = {}
   ) {
     if (this.disableLastRead) {return false;}
     try {
@@ -561,6 +909,19 @@ export class XmppClient {
   }
 
   sendMediaMessageStanza(roomJID: string, data: any, customId?: string) {
+    // Media: the file is already uploaded by the time we get here; only the
+    // stanza needs the stream. Buffer + replay on reconnect if it's down so
+    // the upload isn't wasted (otherwise the stanza is lost and the media
+    // bubble sits pending until the 30s watchdog fails it).
+    if (!this.isStreamReady()) {
+      enqueueOutboundSend({
+        optimisticId: customId || `send-media-message-${Date.now()}`,
+        roomJID,
+        enqueuedAt: Date.now(),
+        send: (c) => c.sendMediaMessageStanza(roomJID, data, customId),
+      });
+      return undefined;
+    }
     return sendMediaMessage(
       this.client,
       roomJID,
@@ -611,9 +972,15 @@ export class XmppClient {
     isReply?: boolean,
     showInChannel?: boolean,
     mainMessage?: string,
-    _langSource?: string
+    _langSource?: string,
+    customId?: string
   ) {
     // No translate tag support yet — fall back to a regular text send.
+    // Forward the caller's customId so the optimistic message (heap/redux)
+    // reconciles with the server echo. Without it, translated sends went
+    // out with no client id → the echo carried a server-assigned id and
+    // surfaced as a stuck-pending message PLUS a duplicate (affected both
+    // the live translated-send path and resend).
     this.sendMessage(
       roomJID,
       firstName,
@@ -624,7 +991,8 @@ export class XmppClient {
       notDisplayedValue,
       isReply,
       showInChannel,
-      mainMessage
+      mainMessage,
+      customId
     );
   }
 }

package/src/roomStore/Middleware/unreadMidlleware.tsx

@@ -65,8 +65,15 @@ const TRIGGER_ACTIONS = new Set([
   'roomMessages/editRoomMessage',
   'roomMessages/setLastViewedTimestamp',
   'roomMessages/setCurrentRoom',
+  'roomMessages/setVisibleRoom',
+  'roomMessages/clearVisibleRoom',
   'roomMessages/addRoom',
   'roomMessages/updateRoom',
+  // The history preload scheduler merges fetched pages via this action on
+  // re-entry; recompute so unread reflects messages that arrived while the
+  // app was away (the per-room fingerprint cache below skips no-op batches,
+  // e.g. the 'loading' marker dispatch that carries no messages).
+  'roomMessages/applyRoomsPreloadBatch',
 ]);
 
 export const unreadMiddleware: Middleware =
@@ -95,7 +102,7 @@ export const unreadMiddleware: Middleware =
 
     const state = storeAPI.getState();
     const rooms = state.rooms.rooms;
-    const activeChatJID = state.rooms.activeRoomJID;
+    const visibleRoomJID = state.rooms.visibleRoomJID;
     const selfUser = state.chatSettingStore?.user;
     const selfXmpp = selfUser?.xmppUsername || '';
     const selfWallet = selfUser?.walletAddress || '';
@@ -104,13 +111,24 @@ export const unreadMiddleware: Middleware =
       Object.keys(rooms).forEach((jid) => {
         const room = rooms[jid];
         if (!room) {return;}
-        // Skip rooms the user is currently viewing — `setLastViewedTimestamp(0)`
-        // clears their unread directly. Skip rooms with no reference point
-        // (covers undefined / null / 0) — after logout→login, hydrated rooms
+        // Skip rooms the user is currently viewing — visibility clears the
+        // badge directly. Skip rooms with no reference point (covers
+        // undefined / null / 0) — after logout→login, hydrated rooms
         // come back without lastViewedTimestamp, and treating that as 0
         // made every history message satisfy `date > 0` and incorrectly
         // bumped unread for already-seen content.
-        if (!room.lastViewedTimestamp || jid === activeChatJID) {return;}
+        if (jid === visibleRoomJID) {
+          if (room.unreadMessages !== 0) {
+            storeAPI.dispatch(
+              updateRoom({
+                jid,
+                updates: { unreadMessages: 0 },
+              })
+            );
+          }
+          return;
+        }
+        if (!(room.lastViewedTimestamp > 0)) {return;}
 
         // Fingerprint = "what would affect the answer". If neither the
         // message count nor the lastViewedTimestamp changed since last