@visns-studio/visns-components 6.28.0 → 6.31.0

package/src/components/echo/sharedPrivateChannel.js

@@ -0,0 +1,217 @@
+/**
+ * Shared private channel registry.
+ * -----------------------------------------------------------------------
+ * Ref-counting in front of `echo.private(name)` / `echo.leave(name)`, for the
+ * case where two independent components subscribe to the SAME private channel.
+ *
+ * Why this exists: laravel-echo's `leave(name)` is not "stop listening for me",
+ * it is "destroy this channel" — the connector does
+ *
+ *     this.channels[name].unsubscribe(); delete this.channels[name];
+ *
+ * so the FIRST component to unmount takes the channel away from everyone still
+ * using it. That is exactly what happened with `call-queue-monitor.{env}`: the
+ * CRM header hides itself on client and task record pages, the header's phone
+ * badge unmounted and called `leave()`, and the call pop — mounted at the app
+ * root, with stable effect deps, so it never resubscribed — silently stopped
+ * receiving calls while still reporting `subscribed: true`.
+ *
+ * With this registry a channel is opened on the first acquire and only really
+ * left when the last holder releases it.
+ *
+ * Deliberately plain JS: no React, no DOM, no laravel-echo import. It is
+ * framework-free so `node --test` can import the source directly, and so it
+ * works with whatever the host handed us as an "Echo instance".
+ *
+ * Nothing here throws. A registry that breaks the subscription it is meant to
+ * protect would be worse than the bug it fixes.
+ */
+
+/**
+ * `WeakMap<instance, Map<name, {subscription, refs}>>`.
+ *
+ * Keyed per Echo instance rather than by name alone: an app may hold more than
+ * one broadcaster (and every test file certainly does), and two instances'
+ * `call-queue-monitor.production` are two different channels. Weak so a
+ * discarded Echo instance takes its entries with it.
+ */
+let registries = new WeakMap();
+
+/** The per-instance map, created on demand. */
+const registryFor = (instance) => {
+    let registry = registries.get(instance);
+
+    if (!registry) {
+        registry = new Map();
+        registries.set(instance, registry);
+    }
+
+    return registry;
+};
+
+/**
+ * Echo's own channel cache, when the connector exposes one.
+ *
+ * `PusherConnector`/`SocketIoConnector` both keep `this.channels`, keyed by the
+ * PREFIXED name (`private-<name>` for a private channel), and `leaveChannel()`
+ * deletes from it. Reading it is how we notice that somebody outside this
+ * registry — an older build, another library, a host's own cleanup — has torn
+ * our channel down behind our back. A connector without it (a null broadcaster,
+ * a stub in a test) simply leaves the registry as the only source of truth.
+ */
+const echoChannelCache = (instance) => {
+    try {
+        const channels = instance?.connector?.channels;
+
+        return channels && typeof channels === 'object' ? channels : null;
+    } catch (error) {
+        return null;
+    }
+};
+
+/** Is Echo still holding `private-<name>`? `null` = it cannot tell us. */
+const echoHolds = (instance, name) => {
+    const cache = echoChannelCache(instance);
+
+    if (!cache) {
+        return null;
+    }
+
+    return Object.prototype.hasOwnProperty.call(cache, `private-${name}`);
+};
+
+/**
+ * Subscribe to a private channel, or join the subscription already open.
+ *
+ * `instance.private(name)` is called on the first acquire for this
+ * (instance, name) pair only; later acquires bump the count and hand back the
+ * same subscription object, so every holder listens on one channel.
+ *
+ * One exception: if Echo's own cache no longer holds the channel — somebody
+ * called `leave()` outside this registry — the cached subscription is dead and
+ * handing it back would give the caller an object that will never fire again.
+ * In that case we resubscribe and store the new one.
+ *
+ * @param {object} instance Echo instance.
+ * @param {string} name     Channel name, unprefixed (Echo adds `private-`).
+ *
+ * @returns {object|null} The subscription, or null when there is nothing to
+ *                        subscribe to (no instance, no name, `private` threw).
+ */
+export const acquirePrivateChannel = (instance, name) => {
+    if (!instance || typeof instance.private !== 'function' || !name) {
+        return null;
+    }
+
+    const registry = registryFor(instance);
+    const entry = registry.get(name);
+
+    // A live entry whose channel Echo still has (or cannot report on) is the
+    // ordinary case: share it.
+    if (entry && echoHolds(instance, name) !== false) {
+        entry.refs += 1;
+
+        return entry.subscription;
+    }
+
+    const subscription = instance.private(name);
+
+    if (entry) {
+        // Torn down behind our back: keep the holders we know about, replace
+        // the corpse they are holding.
+        entry.subscription = subscription;
+        entry.refs += 1;
+    } else {
+        registry.set(name, { subscription, refs: 1 });
+    }
+
+    return subscription;
+};
+
+/**
+ * Let go of a private channel. `instance.leave(name)` runs only when the last
+ * holder releases it; releasing a name nobody acquired is a no-op.
+ *
+ * @param {object} instance Echo instance.
+ * @param {string} name     Channel name, unprefixed.
+ *
+ * @returns {number} Holders remaining (0 once the channel has been left).
+ */
+export const releasePrivateChannel = (instance, name) => {
+    if (!instance || !name) {
+        return 0;
+    }
+
+    const registry = registries.get(instance);
+    const entry = registry?.get(name);
+
+    if (!entry) {
+        return 0;
+    }
+
+    entry.refs -= 1;
+
+    if (entry.refs > 0) {
+        return entry.refs;
+    }
+
+    registry.delete(name);
+
+    try {
+        instance.leave?.(name);
+    } catch (error) {
+        // Already gone, or an instance that never had a socket. Either way the
+        // registry is clean, which is the part we control.
+    }
+
+    return 0;
+};
+
+/**
+ * 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
+ * the whole point: an external `leave()` leaves our ref count untouched but
+ * 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, held = undefined) => {
+    if (!instance || !name) {
+        return false;
+    }
+
+    const entry = registries.get(instance)?.get(name);
+
+    if (!entry) {
+        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;
+};
+
+/** Drop every entry. Used by tests; never call this from application code. */
+export const _resetSharedPrivateChannels = () => {
+    registries = new WeakMap();
+};
+
+export default acquirePrivateChannel;

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

@@ -6,9 +6,30 @@ import {
     subscriptionMonitor,
 } from '../sms/smsLiveState';
 
+// The call queue pop listens on this SAME channel. Echo's `leave()` destroys a
+// channel for everyone, so neither of us may call it directly — see
+// 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.
  *
@@ -28,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}}
  */
@@ -41,6 +71,7 @@ const useZoomPhoneLive = ({
     channel = null,
     enabled = true,
     onPresence,
+    resubscribeCheckMs = DEFAULT_RESUBSCRIBE_CHECK_MS,
 } = {}) => {
     const [live, setLive] = useState(false);
 
@@ -78,15 +109,24 @@ const useZoomPhoneLive = ({
         let subscription = null;
         let unmonitor = () => {};
         let unbindState = () => {};
+        let resubscribeTimer = null;
 
-        try {
-            subscription = instance.private(channel);
-
-            subscription.listen(EVENT_PRESENCE, (event) => {
+        /**
+         * 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();
@@ -96,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.
@@ -104,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.
@@ -118,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();
                 };
 
@@ -137,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 {
@@ -150,14 +286,18 @@ const useZoomPhoneLive = ({
 
             try {
                 subscription?.stopListening(EVENT_PRESENCE);
-                instance.leave(channel);
+                // Our own listener goes, the channel only if nobody else (the
+                // call pop) is still holding it. The header hides itself on
+                // record pages, so this cleanup runs while the pop is very
+                // much still watching.
+                releasePrivateChannel(instance, channel);
             } catch (error) {
                 // Nothing to clean up.
             }
 
             setLive(false);
         };
-    }, [enabled, channel]);
+    }, [enabled, channel, resubscribeCheckMs]);
 
     return { live };
 };

package/src/components/styles/TicketConversation.module.scss

@@ -210,6 +210,19 @@
     white-space: nowrap;
 }
 
+/* Who an email reached, under the head and above the message.
+   Deliberately quiet — it is a qualifier on the entry, not part of it — and
+   deliberately NOT truncated to "+3 more": the recipient worth noticing is the
+   one nobody expected, which is exactly the one a fold would hide. So it wraps
+   and takes as many lines as it needs. */
+.recipients {
+    margin: -0.15rem 0 0.45rem;
+    color: var(--muted-color, #6b7280);
+    font-size: 0.74rem;
+    line-height: 1.4;
+    overflow-wrap: anywhere;
+}
+
 .body {
     margin: 0;
     color: var(--paragraph-color, #2b2b2b);
@@ -518,10 +531,18 @@
     cursor: pointer;
 }
 
-/* The consequence in words, always present. */
+/* The consequence in words, always present — and since it now NAMES the people
+   a reply reaches, it has to survive a Cc of five. `min-width: 0` is the
+   load-bearing half: a flex item's default `min-width: auto` refuses to shrink
+   below its longest unbreakable run, which would push the sentence out of the
+   bar rather than wrapping it. */
 .consequence {
+    flex: 1 1 auto;
+    min-width: 0;
     color: var(--muted-color, #6b7280);
     font-size: 0.76rem;
+    line-height: 1.4;
+    overflow-wrap: anywhere;
 }
 
 .composerInput {