@visns-studio/visns-components 6.30.0 → 6.31.0

package/README.md

@@ -9,6 +9,34 @@ A comprehensive React component library used by the VISNS Studio team for CRM an
 
 VISNS Components is a React-based UI component library that provides a set of reusable, consistent, and customizable components for building web applications. It includes components for authentication, data grids, forms, navigation, and more, designed to work seamlessly together.
 
+## Recent Updates (v6.31.0)
+
+### The header badge self-heals too, and the pop takes its timings from the server
+
+Follow-up to 6.30.0. That release stopped the two holders of the shared
+`call-queue-monitor.{env}` channel from destroying each other's subscription,
+and taught the call pop to notice a missing channel and rebuild it. This one
+finishes the job.
+
+- **`useZoomPhoneLive` / `ZoomPhoneBadge` resubscribe the same way the pop
+  does** — on every socket reconnect and every `resubscribeCheckMs` (new
+  option/prop, default 60 s, `0` disables) while the tab is visible. Before,
+  a badge whose channel was taken away kept its green `Live` stamp and never
+  received another presence event.
+- **`hasPrivateChannel(instance, name, held)`** takes the subscription the
+  caller is listening on. With two self-healing holders, whichever rebuilt
+  first left the registry looking healthy while the other still held the dead
+  object; passing what you hold makes the answer "no" until you re-acquire.
+- **`CallQueuePop` adopts `missed_grace_ms` and `max_ringing_ms` from the
+  live snapshot** when the server sends them, so the browser and the server
+  agree on how long a declined leg keeps the card. The `missedGraceMs` prop's
+  default is now **20000** (it was 10000 — half the server's, so a card left
+  10 s before the server considered the call gone).
+- **Phantom cards expire.** New `maxRingingMs` prop (default 120000, or the
+  snapshot's `max_ringing_ms`): a card whose `startedAt` is older than that
+  is removed and logged — a lost ended webhook must not ring on a screen
+  forever. `expiredCallIds(calls, now, maxRingingMs)` is exported.
+
 ## Recent Updates (v6.30.0)
 
 ### `CallQueuePop` no longer loses its channel to the header's phone badge
@@ -2290,6 +2318,9 @@ endpoint nor an Echo instance present it renders nothing and logs nothing.
 | `syncChannelName` | `'throughlife-call-queue-pop'` | The `BroadcastChannel` that keeps every open tab's stack in step. Falsy switches cross-tab sync off. |
 | `clientDetailFields` | `CLIENT_DETAIL_FIELDS` (adviser / coding / age / city) | `[{ key, label, demo? }]` — the client-block rows, in card order; rows with an empty value are dropped; `demo` seeds the demo card. Pass your CRM's own fields so the card never names a field it does not have. Must be referentially stable (a module-scope constant, not an inline literal) — it sits in the demo effect's dependency list. |
 | `demoEnabled` | `true` | Registers `window.callPopDemo()` / `window.callPopClear()` for reviewing the UI without a backend. |
+| `missedGraceMs` | `20000` | How long a card survives a `.queue.missed` before it is taken as gone — a call rings several devices, so one declined leg only starts this timer and a further `.queue.ringing` cancels it. Was `10000`, half the server's own `missed_grace_seconds`, which took the card off screen ten seconds before the server considered the call gone. The snapshot's `missed_grace_ms` wins over it. |
+| `maxRingingMs` | `120000` | The backstop for an end that never arrived: a card still ringing after this is removed client-side, because a dropped `.queue.ended` otherwise leaves a phantom card ringing all afternoon. Demo cards and cards already leaving are exempt. The snapshot's `max_ringing_ms` wins over it. |
+| `resubscribeCheckMs` | `60000` | How often the pop confirms its Echo channel is still subscribed (visible tabs only), resubscribing and refetching the snapshot when it is not. `0` turns the check off. |
 
 **Payload contract.** Snake_case and camelCase are both accepted, so a Laravel
 resource passes through untouched: `call_id`/`callId`, `queue_id`/`queueId`,
@@ -2299,6 +2330,22 @@ resource passes through untouched: `call_id`/`callId`, `queue_id`/`queueId`,
 The snapshot's `pickup_codes` map is keyed by Zoom call queue id — a queue
 absent from it still pops, its card simply has no Pick up button.
 
+The snapshot carries three optional settings alongside the calls, and each wins
+over the matching prop once it lands — the server holds the webhook ledger and
+the config, so it is the side that decides when a call is over:
+
+```jsonc
+{
+  "calls": [ /* … */ ],
+  "pickup_codes": { "77": "*996439" },
+  "channel": "call-queue-monitor.production", // environment-scoped Echo channel
+  "missed_grace_ms": 20000,                   // overrides `missedGraceMs`
+  "max_ringing_ms": 120000                    // overrides `maxRingingMs`
+}
+```
+
+An older backend sends none of them and the props stand in unchanged.
+
 Named exports for testing: `toLocalDigits`, `formatAuPhone`, `formatEventDate`,
 `formatDueDate`, `toCallWorkspaceId`, `normaliseCall`, `normalisePickupCodes`,
 `formatElapsed`, `hasMonitorPermission`, `clientDetails`.

package/package.json

@@ -93,7 +93,7 @@
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.30.0",
+    "version": "6.31.0",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/callQueue/CallQueuePop.jsx

@@ -38,6 +38,7 @@ import {
 // re-exported below so this file's public surface is unchanged.
 import {
     CLIENT_DETAIL_FIELDS,
+    DEFAULT_MAX_RINGING_MS,
     FALLBACK_QUEUE_NAME,
     KIND_DIRECT,
     MONITOR_PERMISSION,
@@ -51,6 +52,7 @@ import {
     defaultTaskUrl,
     demoClientDetails,
     directRingingLine,
+    expiredCallIds,
     formatAuPhone,
     formatDueDate,
     formatElapsed,
@@ -74,6 +76,7 @@ export {
     clientDetails,
     demoClientDetails,
     directRingingLine,
+    expiredCallIds,
     formatAuPhone,
     formatDueDate,
     formatElapsed,
@@ -121,7 +124,13 @@ export {
  * nothing: `.queue.missed` marks the card and starts a `missedGraceMs` timer
  * instead of removing it, and a further `.queue.ringing` for the same call
  * cancels that timer. Only `.queue.answered`/`.queue.ended` take a card away
- * outright.
+ * outright — plus one backstop: a card still ringing after `maxRingingMs` is
+ * dropped, because the alternative to trusting an event that never arrived is
+ * a phantom card ringing all afternoon.
+ *
+ * Both of those windows belong to the server, which is the side that decides
+ * when a call is over; it sends its own figures as the snapshot's
+ * `missed_grace_ms` and `max_ringing_ms`, and those win over the props.
  *
  * The snapshot is a catch-up mechanism, not just a first paint: it runs again
  * whenever the socket reconnects and whenever a hidden tab is looked at again,
@@ -217,8 +226,15 @@ const EXIT_MS = 220;
  * enough for the next leg's `.queue.ringing` to arrive and cancel it, short
  * enough that a call nobody took stops sitting on screen. Override with the
  * `missedGraceMs` prop.
+ *
+ * 20s to match the server's own `missed_grace_seconds`. It was 10s — half the
+ * server's figure — which took the card away ten seconds BEFORE the server
+ * considered the call gone: a leg declining on a call still ringing elsewhere
+ * cleared the pop off everybody's screen while the phone was still ringing.
+ * The snapshot's `missed_grace_ms` overrides this, so the two sides cannot
+ * drift apart again.
  */
-const DEFAULT_MISSED_GRACE_MS = 10000;
+const DEFAULT_MISSED_GRACE_MS = 20000;
 
 /**
  * Minimum gap between snapshot refreshes, for every reason except mount. A
@@ -282,6 +298,25 @@ const resolveUrl = (option, token, value, fallback) => {
     return fallback(value);
 };
 
+/**
+ * A duration from the snapshot, or null when there is nothing usable there.
+ *
+ * Coerced rather than type-checked because a Laravel config value that has been
+ * through `.env` arrives as the string '20000' just as readily as the number,
+ * and a window the server clearly meant to state should not be ignored over
+ * that. Zero and negatives are null: "no timeout" is not a thing either of
+ * these windows can express, so a 0 is a misconfiguration, and falling back to
+ * the prop is the safer reading of it.
+ */
+const positiveMs = (value) => {
+    if (value === null || value === undefined || value === '') {
+        return null;
+    }
+
+    const number = Number(value);
+
+    return Number.isFinite(number) && number > 0 ? number : null;
+};
 
 /**
  * Is the user actually looking at this tab? Both checks matter: a focused but
@@ -328,6 +363,7 @@ const CallQueuePop = ({
     clientDetailFields = CLIENT_DETAIL_FIELDS,
     demoEnabled = true,
     missedGraceMs = DEFAULT_MISSED_GRACE_MS,
+    maxRingingMs = DEFAULT_MAX_RINGING_MS,
     resubscribeCheckMs = DEFAULT_RESUBSCRIBE_CHECK_MS,
 }) => {
     const [calls, setCalls] = useState([]);
@@ -339,6 +375,20 @@ const CallQueuePop = ({
     // Environment-scoped Echo channel name, delivered by the snapshot.
     const [echoChannel, setEchoChannel] = useState(null);
 
+    /*
+     * The two timing windows, as the server states them in its snapshot.
+     *
+     * The server is the side that decides when a call is over — it holds the
+     * webhook ledger and the config — so whatever it sends wins over the props,
+     * which are only the figures to use until it has spoken (and for a host
+     * running an older backend, which sends neither).
+     */
+    const [serverMissedGraceMs, setServerMissedGraceMs] = useState(null);
+    const [serverMaxRingingMs, setServerMaxRingingMs] = useState(null);
+
+    const effectiveMissedGraceMs = serverMissedGraceMs ?? missedGraceMs;
+    const effectiveMaxRingingMs = serverMaxRingingMs ?? maxRingingMs;
+
     // Open-task drill-down, keyed by callId: which cards are expanded, and the
     // tasks fetched for each as `{ status: idle|loading|ready|error, tasks }`.
     const [expandedTasks, setExpandedTasks] = useState({});
@@ -486,7 +536,7 @@ const CallQueuePop = ({
 
     /**
      * A ringing leg was declined or timed out. The call may still be ringing on
-     * someone else's device, so the card is marked and given `missedGraceMs` to
+     * someone else's device, so the card is marked and given the grace period to
      * prove it: a `.queue.ringing` inside that window cancels the timer, and
      * nothing arriving lets it remove the card the same way `.queue.ended`
      * would.
@@ -518,11 +568,11 @@ const CallQueuePop = ({
             const timer = setTimeout(() => {
                 missedTimers.current.delete(id);
                 removeCall(id);
-            }, missedGraceMs);
+            }, effectiveMissedGraceMs);
 
             missedTimers.current.set(id, timer);
         },
-        [missedGraceMs, removeCall]
+        [effectiveMissedGraceMs, removeCall]
     );
 
     /** Drop the whole stack (no exit animation — used by clear). */
@@ -942,6 +992,25 @@ const CallQueuePop = ({
                             setEchoChannel(result.channel);
                         }
 
+                        // Timing windows, when this server states them. Both
+                        // are optional: an older backend sends neither, and the
+                        // props stand in.
+                        const grace = positiveMs(
+                            result?.missed_grace_ms ?? result?.missedGraceMs
+                        );
+
+                        if (grace !== null) {
+                            setServerMissedGraceMs(grace);
+                        }
+
+                        const maxRinging = positiveMs(
+                            result?.max_ringing_ms ?? result?.maxRingingMs
+                        );
+
+                        if (maxRinging !== null) {
+                            setServerMaxRingingMs(maxRinging);
+                        }
+
                         if (result?.pickup_codes ?? result?.pickupCodes) {
                             const codes = normalisePickupCodes(
                                 result.pickup_codes ?? result.pickupCodes
@@ -1337,7 +1406,7 @@ const CallQueuePop = ({
             let present = false;
 
             try {
-                present = hasPrivateChannel(instance, activeChannel);
+                present = hasPrivateChannel(instance, activeChannel, subscription);
             } catch (error) {
                 present = false;
             }
@@ -1364,7 +1433,7 @@ const CallQueuePop = ({
                 subscription = acquirePrivateChannel(instance, activeChannel);
                 stopMonitoring = attachListeners(subscription);
                 noteCallPopChannelPresent(
-                    hasPrivateChannel(instance, activeChannel)
+                    hasPrivateChannel(instance, activeChannel, subscription)
                 );
             } catch (error) {
                 subscription = null;
@@ -1403,7 +1472,7 @@ const CallQueuePop = ({
             subscription = acquirePrivateChannel(instance, activeChannel);
             stopMonitoring = attachListeners(subscription);
             noteCallPopChannelPresent(
-                hasPrivateChannel(instance, activeChannel)
+                hasPrivateChannel(instance, activeChannel, subscription)
             );
         } catch (error) {
             subscription = null;
@@ -1530,20 +1599,50 @@ const CallQueuePop = ({
     /**
      * One interval for the whole stack, started only while cards are on screen
      * and torn down the moment the stack empties.
+     *
+     * It ticks the elapsed timers, and it sweeps. The sweep is the backstop for
+     * an end that never came: `.queue.answered`/`.queue.ended` are the only
+     * things that take a card away, and one dropped webhook or one lost frame
+     * leaves a card ringing on screen indefinitely — long after the caller hung
+     * up, which is exactly the call somebody then rings back for nothing. Any
+     * card older than the effective max ringing time goes (see expiredCallIds).
      */
     useEffect(() => {
         if (calls.length === 0) {
             return undefined;
         }
 
-        setNow(Date.now());
+        const tick = () => {
+            const timestamp = Date.now();
+
+            setNow(timestamp);
+
+            const expired = expiredCallIds(
+                callsRef.current,
+                timestamp,
+                effectiveMaxRingingMs
+            );
+
+            // One line per card, not per tick: `removeCall` marks it leaving
+            // immediately, and `expiredCallIds` skips a card on its way out.
+            expired.forEach((callId) => {
+                appendCallPopLog(
+                    `Call ${callId} has been ringing for over ` +
+                        `${Math.round(effectiveMaxRingingMs / 1000)}s with no ` +
+                        'answered/ended event — removing the card',
+                    'warn'
+                );
+                trace('expired card', callId);
+                removeCall(callId);
+            });
+        };
+
+        tick();
 
-        const interval = setInterval(() => {
-            setNow(Date.now());
-        }, 1000);
+        const interval = setInterval(tick, 1000);
 
         return () => clearInterval(interval);
-    }, [calls.length]);
+    }, [calls.length, effectiveMaxRingingMs, removeCall]);
 
     /**
      * Ask for notification permission, lazily and only for gated-in users.

package/src/components/callQueue/callQueueHelpers.js

@@ -575,6 +575,72 @@ export const reconcileSnapshot = (
     return { add, remove };
 };
 
+/**
+ * How long a card may ring before this browser stops believing in it.
+ *
+ * A card's whole life depends on a `.queue.answered` / `.queue.ended` arriving,
+ * and that is one Zoom webhook and one broadcast away from never happening — a
+ * webhook Zoom retried into a dead queue worker, a socket frame lost on the way
+ * here. Nothing else removes the card, so it rings on screen forever and
+ * somebody eventually picks up a call that finished twenty minutes ago.
+ *
+ * Two minutes is well past the point Zoom itself stops ringing a queue, so a
+ * card older than that is not a call anybody can still answer. The server sends
+ * its own figure as the snapshot's `max_ringing_ms`; this is the fallback.
+ */
+export const DEFAULT_MAX_RINGING_MS = 120000;
+
+/**
+ * Cards that have rung too long to still be real — the ids to drop.
+ *
+ * Deliberately blunt, because what it defends against is the ABSENCE of a
+ * signal rather than a signal: only the age of the card is consulted. A card
+ * with no parseable `startedAt` is left alone — "we cannot date it" is not
+ * evidence the call is over — as is one already animating out, and a demo card,
+ * which has no server behind it to end it (`reconcileSnapshot` exempts demo
+ * cards for the same reason).
+ *
+ * @param {Array}  calls        Cards on screen (normalised calls).
+ * @param {number} now
+ * @param {number} maxRingingMs Age limit in ms; 0 or less disables the sweep.
+ *
+ * @returns {Array<string>} callIds to remove.
+ */
+export const expiredCallIds = (
+    calls,
+    now = Date.now(),
+    maxRingingMs = DEFAULT_MAX_RINGING_MS
+) => {
+    const list = Array.isArray(calls) ? calls : [];
+
+    if (!Number.isFinite(maxRingingMs) || maxRingingMs <= 0) {
+        return [];
+    }
+
+    return list
+        .filter((call) => {
+            if (!call || call.leaving || call.isDemo) {
+                return false;
+            }
+
+            // `null` is checked before `new Date`, which reads it as the
+            // epoch rather than as a bad date and would age every undated card
+            // straight off the screen.
+            if (call.startedAt === null || call.startedAt === undefined) {
+                return false;
+            }
+
+            const started = new Date(call.startedAt).getTime();
+
+            if (Number.isNaN(started)) {
+                return false;
+            }
+
+            return now - started > maxRingingMs;
+        })
+        .map((call) => call.callId);
+};
+
 /**
  * Coerce the snapshot's `pickup_codes` block into a plain `{ queueId: code }`
  * map, dropping anything that is not a non-empty string on both sides. A queue

package/src/components/echo/sharedPrivateChannel.js

@@ -168,7 +168,8 @@ export const releasePrivateChannel = (instance, name) => {
 };
 
 /**
- * Is this channel actually still subscribed?
+ * Is this channel actually still subscribed — and, when the caller says what
+ * it is holding, is THAT the subscription the registry currently has?
  *
  * True only when the registry has a live entry AND — when the connector
  * exposes its cache — Echo still holds `private-<name>`. The second half is
@@ -176,12 +177,20 @@ export const releasePrivateChannel = (instance, name) => {
  * kills the channel, and that mismatch is precisely the failure this module
  * was written for. Callers use it to notice and resubscribe.
  *
+ * The optional `held` argument closes a race between two self-healing
+ * holders. When holder A notices the channel gone and rebuilds it, the
+ * registry (and Echo's cache) hold a fresh subscription again — so holder B's
+ * check, a moment later, would see "present" and keep listening on the dead
+ * object A just replaced. Passing what you hold makes the answer "no" until
+ * you have re-acquired, so both holders end up on the live subscription.
+ *
  * @param {object} instance Echo instance.
  * @param {string} name     Channel name, unprefixed.
+ * @param {object} [held]   The subscription this caller is listening on.
  *
  * @returns {boolean}
  */
-export const hasPrivateChannel = (instance, name) => {
+export const hasPrivateChannel = (instance, name, held = undefined) => {
     if (!instance || !name) {
         return false;
     }
@@ -192,6 +201,10 @@ export const hasPrivateChannel = (instance, name) => {
         return false;
     }
 
+    if (held !== undefined && entry.subscription !== held) {
+        return false;
+    }
+
     // `null` = the connector cannot tell us; the registry is then all we have.
     return echoHolds(instance, name) !== false;
 };

package/src/components/phone/ZoomPhoneBadge.jsx

@@ -90,6 +90,10 @@ const ZoomPhoneBadgeInner = ({
     // somebody is looking at is worth more than one behind a closed chip.
     pollInterval = 60_000,
     openPollInterval = 20_000,
+    // How often the subscription confirms it still has its channel. Left
+    // undefined so useZoomPhoneLive's own default (60s) applies; a host only
+    // passes this to slow the check down, or to switch it off with 0.
+    resubscribeCheckMs,
     // ⌘⇧U / Ctrl+Shift+U. Not ⌘⇧P: browsers open a private window on that.
     shortcut = 'mod+shift+u',
     navigate,
@@ -194,6 +198,7 @@ const ZoomPhoneBadgeInner = ({
         echo,
         channel,
         onPresence: handlePresence,
+        resubscribeCheckMs,
     });
 
     /*

package/src/components/phone/phonePresenceHelpers.js

@@ -15,6 +15,7 @@
 // `node --test`, before tests/jsxHooks.mjs (which is what resolves the
 // library's extensionless imports) has been registered.
 import { initialsFor, normaliseNumberForDisplay } from '../sms/smsHelpers.js';
+import { isDeadConnectionState } from '../sms/smsLiveState.js';
 
 export { initialsFor, normaliseNumberForDisplay };
 
@@ -296,3 +297,33 @@ export const freshnessLabel = (fetchedAt, live, now = Date.now()) => {
 
     return `Updated ${Math.floor(seconds / 3600)}h ago`;
 };
+
+/**
+ * Has the roster's channel been taken away, and is now the moment to rebuild it?
+ *
+ * The failure being watched for is silent: another component calling
+ * `echo.leave()` on the shared `call-queue-monitor.{env}` channel unsubscribes
+ * everybody without raising a single event, so `live` stays true and the
+ * presence events simply stop. Nothing announces it — the only way to find out
+ * is to look, which is why the hook looks on a timer.
+ *
+ * `present` is what the shared-channel registry says (`hasPrivateChannel`), and
+ * `state` is the pusher connection state. A dead socket is deliberately NOT a
+ * reason to resubscribe: nothing can be subscribed while it is down, pusher-js
+ * restores what it still holds when it returns, and the hook re-checks on every
+ * `connected` transition anyway. An unknown state (`null` — the host's Echo may
+ * expose no reachable connection object) is not treated as dead.
+ *
+ * @param {object} options
+ * @param {boolean} options.present    Does the registry still hold the channel?
+ * @param {string|null} [options.state] Pusher connection state, when known.
+ *
+ * @returns {boolean}
+ */
+export const shouldResubscribe = ({ present, state = null } = {}) => {
+    if (present) {
+        return false;
+    }
+
+    return !isDeadConnectionState(state);
+};

package/src/components/phone/useZoomPhoneLive.js

@@ -11,12 +11,25 @@ import {
 // sharedPrivateChannel.js.
 import {
     acquirePrivateChannel,
+    hasPrivateChannel,
     releasePrivateChannel,
 } from '../echo/sharedPrivateChannel';
 
+import { shouldResubscribe } from './phonePresenceHelpers';
+
 /** The event the backend broadcasts when one extension's state changes. */
 export const EVENT_PRESENCE = '.phone.presence';
 
+/**
+ * How often the hook confirms its channel is still subscribed.
+ *
+ * A socket that drops announces itself; a channel destroyed by somebody else's
+ * `echo.leave()` announces nothing at all, so the only way to notice is to
+ * look. Once a minute costs a property read and bounds the blind window at a
+ * minute — the same figure, for the same reason, as the call pop's own check.
+ */
+export const DEFAULT_RESUBSCRIBE_CHECK_MS = 60000;
+
 /**
  * Live phone presence: Pusher when it is wired up, polling when it is not.
  *
@@ -36,11 +49,20 @@ export const EVENT_PRESENCE = '.phone.presence';
  * user without the permission never opens a Pusher connection at all. The
  * account has a hard concurrent-connection quota.
  *
+ * The channel is shared, and a shared channel can be taken away without a
+ * word: `echo.leave()` anywhere else destroys it for every holder. So this
+ * hook does what the call pop does — rechecks the channel on every socket
+ * reconnect and every `resubscribeCheckMs` while the tab is visible, and
+ * rebuilds its subscription when it finds the channel gone. Without that the
+ * roster stays on a green `Live` stamp and never receives another event.
+ *
  * @param {object}   options
  * @param {object|Function|null} options.echo    Echo instance, or `() => echo`.
  * @param {string|null} options.channel          Private channel name.
  * @param {boolean}  [options.enabled]           Off entirely when false.
  * @param {Function} [options.onPresence]        `({cleared, keys, call}) => void`.
+ * @param {number}   [options.resubscribeCheckMs] How often to confirm the
+ *   channel is still there (ms, visible tabs only). 0 turns the check off.
  *
  * @returns {{live: boolean}}
  */
@@ -49,6 +71,7 @@ const useZoomPhoneLive = ({
     channel = null,
     enabled = true,
     onPresence,
+    resubscribeCheckMs = DEFAULT_RESUBSCRIBE_CHECK_MS,
 } = {}) => {
     const [live, setLive] = useState(false);
 
@@ -86,17 +109,24 @@ const useZoomPhoneLive = ({
         let subscription = null;
         let unmonitor = () => {};
         let unbindState = () => {};
-
-        try {
-            // Ref-counted: the call pop is very likely already on this
-            // channel, and the two must share one subscription.
-            subscription = acquirePrivateChannel(instance, channel);
-
-            subscription.listen(EVENT_PRESENCE, (event) => {
+        let resubscribeTimer = null;
+
+        /**
+         * Bind the presence listener and the confirmation monitor to a channel.
+         *
+         * Broken out of the effect body because a resubscribe has to do it all
+         * again against a brand new subscription object — the old one is a
+         * corpse once Echo has dropped the channel.
+         *
+         * @param {object} target The subscription to bind to.
+         * @returns {Function} Stops the monitor again.
+         */
+        const attachListener = (target) => {
+            target.listen(EVENT_PRESENCE, (event) => {
                 presenceRef.current?.(event || {});
             });
 
-            unmonitor = subscriptionMonitor(subscription, {
+            return subscriptionMonitor(target, {
                 onSuccess: () => {
                     confirmed = true;
                     sync();
@@ -106,6 +136,13 @@ const useZoomPhoneLive = ({
                     sync();
                 },
             });
+        };
+
+        try {
+            // Ref-counted: the call pop is very likely already on this
+            // channel, and the two must share one subscription.
+            subscription = acquirePrivateChannel(instance, channel);
+            unmonitor = attachListener(subscription);
         } catch (error) {
             // A channel that will not subscribe leaves the poller in charge,
             // which is the whole point of the poller.
@@ -114,6 +151,67 @@ const useZoomPhoneLive = ({
             return undefined;
         }
 
+        /**
+         * Confirm the channel is still there, and rebuild it when it is not.
+         *
+         * Never throws: this runs from a socket callback and from an interval,
+         * and a roster that cannot resubscribe must fall back to its poll, not
+         * take the header down with it.
+         *
+         * @returns {boolean} True when a resubscribe was performed.
+         */
+        const ensureSubscribed = () => {
+            let present = false;
+
+            try {
+                present = hasPrivateChannel(instance, channel, subscription);
+            } catch (error) {
+                present = false;
+            }
+
+            if (!shouldResubscribe({ present, state: connectionState })) {
+                return false;
+            }
+
+            try {
+                unmonitor();
+            } catch (error) {
+                // Already gone.
+            }
+
+            unmonitor = () => {};
+
+            try {
+                subscription?.stopListening(EVENT_PRESENCE);
+            } catch (error) {
+                // A dead channel has nothing left to unbind.
+            }
+
+            // Release before acquiring so the ref count nets out unchanged:
+            // this hook held one reference before and holds one after.
+            releasePrivateChannel(instance, channel);
+
+            // Nothing has arrived on the new subscription yet, so `live` goes
+            // back to false until the monitor confirms it. A green stamp over
+            // an unconfirmed channel is the exact lie this hook exists to
+            // avoid telling.
+            confirmed = false;
+
+            try {
+                subscription = acquirePrivateChannel(instance, channel);
+                unmonitor = attachListener(subscription);
+            } catch (error) {
+                subscription = null;
+                sync();
+
+                return false;
+            }
+
+            sync();
+
+            return true;
+        };
+
         // The socket underneath. When it goes, the channel goes with it whatever
         // the confirmation said; pusher-js resubscribes on its own once it is
         // back, and the subscribed callback re-confirms.
@@ -128,6 +226,11 @@ const useZoomPhoneLive = ({
 
                     if (isDeadConnectionState(current)) confirmed = false;
 
+                    // A socket can come back without our channel: pusher-js
+                    // resubscribes what it still holds, and a channel someone
+                    // else `leave()`d is no longer among them.
+                    if (current === 'connected') ensureSubscribed();
+
                     sync();
                 };
 
@@ -147,9 +250,32 @@ const useZoomPhoneLive = ({
             // decides, which is the same answer we gave before.
         }
 
+        // The backstop. `state_change` covers a socket that visibly went away;
+        // this covers the case with no signal at all — the channel removed
+        // underneath a perfectly healthy socket. Visible tabs only: a roster
+        // nobody is looking at has nothing to catch up for, and the badge's own
+        // poll refills it either way.
+        if (resubscribeCheckMs > 0) {
+            resubscribeTimer = setInterval(() => {
+                if (
+                    typeof document !== 'undefined' &&
+                    document.visibilityState !== 'visible'
+                ) {
+                    return;
+                }
+
+                ensureSubscribed();
+            }, resubscribeCheckMs);
+        }
+
         sync();
 
         return () => {
+            if (resubscribeTimer !== null) {
+                clearInterval(resubscribeTimer);
+                resubscribeTimer = null;
+            }
+
             unbindState();
 
             try {
@@ -171,7 +297,7 @@ const useZoomPhoneLive = ({
 
             setLive(false);
         };
-    }, [enabled, channel]);
+    }, [enabled, channel, resubscribeCheckMs]);
 
     return { live };
 };