@visns-studio/visns-components 6.24.4 → 6.26.0

package/src/components/callQueue/CallQueueDiagnostics.jsx

@@ -0,0 +1,1043 @@
+import React, {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import {
+    Activity,
+    AlertTriangle,
+    ClipboardCopy,
+    Loader2,
+    RefreshCw,
+    Send,
+    TestTube2,
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+
+import CustomFetch from '../Fetch';
+import styles from '../styles/CallQueueDiagnostics.module.scss';
+
+import { CALL_POP_STATUS_EVENT, getCallPopStatus } from './callPopStatus';
+
+/**
+ * Call pop diagnostics.
+ * -----------------------------------------------------------------------
+ * Answers the one question staff keep asking — "why did the pop not show?" —
+ * by putting the two halves of the pipeline side by side:
+ *
+ *   THIS BROWSER  what CallQueuePop's status store recorded: permission, Echo,
+ *                 socket state, channel authorisation, events received.
+ *   SERVER        what the webhook ledger recorded: every Zoom event that
+ *                 arrived, what was done with it, and whether the broadcast
+ *                 went out.
+ *
+ * Read together they localise the fault in one glance: a green ledger row with
+ * nothing in the browser is a socket problem; an empty ledger during a real
+ * call is a Zoom/webhook problem; a broadcast failure is Reverb being down.
+ *
+ * Everything degrades: with no server endpoint the browser half still renders,
+ * and with no pop mounted yet the browser half renders as "unknown" rather
+ * than blank.
+ */
+
+/** Endpoints the panel talks to; the `endpoints` prop is merged over these. */
+const DEFAULT_ENDPOINTS = {
+    diagnostics: '/ajax/call-queue/diagnostics',
+    ping: '/ajax/call-queue/diagnostics/ping',
+};
+
+/** How long the round-trip test waits for the ping to come back over the socket. */
+const PING_TIMEOUT_MS = 8000;
+
+/** Auto-refresh interval, when the toggle is switched on. */
+const REFRESH_MS = 10000;
+
+/** Outcomes that mean the pipeline did its job. */
+const OK_OUTCOMES = [
+    'ringing_recorded',
+    // A call ringing one staff member's own extension, recorded and popped
+    // like any queue call.
+    'ringing_recorded_direct',
+    'recorded',
+    'broadcast',
+];
+
+/** Outcomes that are a deliberate no-op rather than a fault. */
+const WARN_OUTCOMES = [
+    'ringing_unmatched',
+    'ringing_excluded_queue',
+    // Direct calls are switched off in settings, so this one was dropped.
+    'ringing_excluded_direct',
+    'ringing_no_call_id',
+    'closed_no_call_id',
+    'closed_no_match',
+    // A leg was declined for a call the ledger has never seen ring.
+    'missed_no_match',
+];
+
+/**
+ * Outcomes that are neither good news nor bad: they happened, and the panel
+ * should say so without colouring them either way. `.queue.missed` is the
+ * archetype — one leg of a call that may well still be ringing.
+ */
+const MUTED_OUTCOMES = ['missed'];
+
+/** Outcomes that are a fault. */
+const BAD_OUTCOMES = ['failed', 'rejected', 'broadcast_failed'];
+
+/**
+ * CustomFetch already carries the app's credentials and CSRF header (the
+ * `X-CSRF-TOKEN`/`X-XSRF-TOKEN` pair read off the `csrf-token` meta tag), which
+ * is what CallQueueSettings saves through — so the default fetcher is that same
+ * wrapper rather than a second, subtly different, hand-rolled `fetch`.
+ *
+ * A `fetcher` prop with the same `(url, method, body) => Promise` signature
+ * replaces it wholesale, which is how tests and any non-Laravel host drive
+ * this panel.
+ */
+const defaultFetcher = (url, method, body) => CustomFetch(url, method, body);
+
+/** CustomFetch resolves an axios-shaped object; a plain fetcher may not. */
+const unwrap = (result) => {
+    if (result && typeof result === 'object' && 'data' in result) {
+        return result.data ?? {};
+    }
+
+    return result ?? {};
+};
+
+/** A short, collision-proof-enough id for one round trip. */
+const makeNonce = () => {
+    const random = Math.random().toString(36).slice(2, 10);
+
+    return `${Date.now().toString(36)}-${random}`;
+};
+
+/** Milliseconds between two ISO/epoch instants, or null when unknowable. */
+const msBetween = (from, to) => {
+    const start = typeof from === 'number' ? from : Date.parse(from);
+    const end = typeof to === 'number' ? to : Date.parse(to);
+
+    if (!Number.isFinite(start) || !Number.isFinite(end)) {
+        return null;
+    }
+
+    return Math.max(0, end - start);
+};
+
+const pad = (value) => String(value).padStart(2, '0');
+
+/**
+ * Local `HH:mm:ss`, prefixed with `DD/MM` when the instant is not today —
+ * a ledger read at 9am should not make yesterday's 5pm row look like this
+ * morning's.
+ */
+export const formatLedgerTime = (value, reference = new Date()) => {
+    if (!value) return '—';
+
+    const at = value instanceof Date ? value : new Date(value);
+
+    if (Number.isNaN(at.getTime())) return '—';
+
+    const clock = `${pad(at.getHours())}:${pad(at.getMinutes())}:${pad(at.getSeconds())}`;
+    const sameDay =
+        at.getFullYear() === reference.getFullYear() &&
+        at.getMonth() === reference.getMonth() &&
+        at.getDate() === reference.getDate();
+
+    return sameDay
+        ? clock
+        : `${pad(at.getDate())}/${pad(at.getMonth() + 1)} ${clock}`;
+};
+
+/** `phone.callee_ringing` -> `callee_ringing`. The prefix is on every row. */
+export const shortEventName = (name) =>
+    String(name ?? '').replace(/^phone\./, '') || '—';
+
+/** Which tone a ledger outcome earns. */
+export const outcomeTone = (outcome, broadcastFailed = false) => {
+    const value = String(outcome ?? '').toLowerCase();
+
+    if (broadcastFailed || BAD_OUTCOMES.includes(value)) return 'bad';
+    if (WARN_OUTCOMES.includes(value)) return 'warn';
+    if (OK_OUTCOMES.includes(value)) return 'ok';
+    if (MUTED_OUTCOMES.includes(value)) return 'muted';
+
+    // An outcome nobody has classified yet reads the same as a deliberately
+    // neutral one: grey, and no claim either way about what it means.
+    return 'muted';
+};
+
+/**
+ * The ledger's `broadcast` column is a word, not a flag: 'ok' when the publish
+ * landed, 'failed' when it threw, and null for the deliveries that never got as
+ * far as broadcasting anything. A boolean is accepted too, in case a host
+ * serialises it that way.
+ */
+export const broadcastState = (value) => {
+    if (value === true) return 'ok';
+    if (value === false) return 'failed';
+
+    const word = String(value ?? '').toLowerCase();
+
+    if (word === 'ok' || word === 'sent' || word === 'true') return 'ok';
+    if (word === 'failed' || word === 'false') return 'failed';
+
+    return null;
+};
+
+/** Zoom call ids are long and only the tail distinguishes them. */
+export const shortCallId = (callId) => {
+    const value = String(callId ?? '');
+
+    return value.length > 8 ? value.slice(-8) : value || '—';
+};
+
+/** Cut a string for display; the full text goes in the cell's title. */
+export const truncate = (value, length = 60) => {
+    const text = String(value ?? '');
+
+    return text.length > length ? `${text.slice(0, length - 1)}…` : text;
+};
+
+/** Socket state -> dot colour. Green only when it is actually connected. */
+export const connectionTone = (state) => {
+    if (state === 'connected') return 'ok';
+    if (state === 'connecting' || state === 'initialized') return 'warn';
+    if (!state) return 'muted';
+
+    return 'bad';
+};
+
+const yesNo = (value, unknown = 'unknown') => {
+    if (value === true) return 'Yes';
+    if (value === false) return 'No';
+
+    return unknown;
+};
+
+/** Read a value under either its snake_case or camelCase name. */
+const pick = (source, ...keys) => {
+    for (const key of keys) {
+        const value = source?.[key];
+
+        if (value !== undefined && value !== null) return value;
+    }
+
+    return null;
+};
+
+const CallQueueDiagnostics = ({
+    endpoints,
+    fetcher = defaultFetcher,
+    title = 'Call pop diagnostics',
+    embedded = false,
+}) => {
+    const [status, setStatus] = useState(() => getCallPopStatus());
+    const [server, setServer] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [loadError, setLoadError] = useState('');
+    const [autoRefresh, setAutoRefresh] = useState(false);
+    const [ping, setPing] = useState({ state: 'idle' });
+
+    // The ping's own bookkeeping, read inside a timeout that must not re-arm
+    // every time the status store ticks.
+    const pingTimer = useRef(null);
+
+    const diagnosticsUrl =
+        endpoints?.diagnostics ?? DEFAULT_ENDPOINTS.diagnostics;
+    const pingUrl = endpoints?.ping ?? DEFAULT_ENDPOINTS.ping;
+
+    /** Live browser status: seed from the store, then follow its event. */
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return undefined;
+        }
+
+        const onStatus = (event) => {
+            setStatus(event?.detail ?? getCallPopStatus());
+        };
+
+        window.addEventListener(CALL_POP_STATUS_EVENT, onStatus);
+        setStatus(getCallPopStatus());
+
+        return () => {
+            window.removeEventListener(CALL_POP_STATUS_EVENT, onStatus);
+        };
+    }, []);
+
+    const load = useCallback(async () => {
+        setIsLoading(true);
+
+        try {
+            const data = unwrap(await fetcher(diagnosticsUrl, 'GET', {}));
+
+            setServer(data ?? {});
+            setLoadError('');
+        } catch (error) {
+            setLoadError(
+                String(
+                    error?.message ??
+                        error ??
+                        'The diagnostics endpoint could not be reached.'
+                )
+            );
+        } finally {
+            setIsLoading(false);
+        }
+    }, [diagnosticsUrl, fetcher]);
+
+    useEffect(() => {
+        load();
+    }, [load]);
+
+    useEffect(() => {
+        if (!autoRefresh) {
+            return undefined;
+        }
+
+        const interval = setInterval(() => {
+            load();
+        }, REFRESH_MS);
+
+        return () => clearInterval(interval);
+    }, [autoRefresh, load]);
+
+    /** Give up on a round trip that never came back over the socket. */
+    useEffect(
+        () => () => {
+            if (pingTimer.current) {
+                clearTimeout(pingTimer.current);
+                pingTimer.current = null;
+            }
+        },
+        []
+    );
+
+    /**
+     * The other half of the round trip: the pop's status store records the
+     * `.queue.diagnostic-ping` it received, and a matching nonce is proof that
+     * this browser is being delivered to.
+     */
+    useEffect(() => {
+        if (ping.state !== 'waiting' || !ping.nonce) {
+            return;
+        }
+
+        const received = status.lastPing;
+
+        if (!received || String(received.nonce) !== String(ping.nonce)) {
+            return;
+        }
+
+        if (pingTimer.current) {
+            clearTimeout(pingTimer.current);
+            pingTimer.current = null;
+        }
+
+        setPing((previous) => ({
+            ...previous,
+            state: 'received',
+            roundTripMs: msBetween(previous.sentAt, received.receivedAt),
+        }));
+    }, [ping.nonce, ping.state, status.lastPing]);
+
+    const sendPing = useCallback(async () => {
+        const nonce = makeNonce();
+        const sentAt = Date.now();
+
+        if (pingTimer.current) {
+            clearTimeout(pingTimer.current);
+            pingTimer.current = null;
+        }
+
+        setPing({ state: 'sending', nonce, sentAt });
+
+        try {
+            const data = unwrap(await fetcher(pingUrl, 'POST', { nonce }));
+            // The server may mint its own nonce; if it does, that is the one
+            // the broadcast will carry.
+            const echoed = pick(data, 'nonce') ?? nonce;
+            const ok = data?.ok !== false && !data?.error;
+
+            setPing({
+                state: ok ? 'waiting' : 'failed',
+                nonce: String(echoed),
+                sentAt,
+                serverMs: pick(data, 'ms', 'duration_ms', 'durationMs'),
+                error: data?.error ? String(data.error) : '',
+            });
+
+            if (!ok) {
+                return;
+            }
+
+            pingTimer.current = setTimeout(() => {
+                pingTimer.current = null;
+                setPing((previous) =>
+                    previous.state === 'waiting'
+                        ? { ...previous, state: 'timeout' }
+                        : previous
+                );
+            }, PING_TIMEOUT_MS);
+        } catch (error) {
+            setPing({
+                state: 'failed',
+                nonce,
+                sentAt,
+                error: String(
+                    error?.message ?? error ?? 'The ping could not be sent.'
+                ),
+            });
+        }
+    }, [fetcher, pingUrl]);
+
+    const copyStatus = useCallback(() => {
+        const text = JSON.stringify(getCallPopStatus(), null, 2);
+
+        try {
+            if (navigator?.clipboard?.writeText) {
+                navigator.clipboard
+                    .writeText(text)
+                    .then(() => toast.success('Call pop status copied.'))
+                    .catch(() => toast.error('Could not copy the status.'));
+
+                return;
+            }
+        } catch (error) {
+            // Falls through to the console below.
+        }
+
+        console.info('[call-pop] status', text);
+        toast.info(
+            'Clipboard unavailable — the status was logged to the console.'
+        );
+    }, []);
+
+    const showDemo = useCallback(() => {
+        if (
+            typeof window === 'undefined' ||
+            typeof window.callPopDemo !== 'function'
+        ) {
+            toast.error('The call pop is not mounted on this page.');
+
+            return;
+        }
+
+        window.callPopDemo();
+    }, []);
+
+    const serverBlock = server?.server ?? {};
+    const summary = server?.summary ?? {};
+    const events = Array.isArray(server?.events) ? server.events : [];
+
+    const serverChannel = pick(serverBlock, 'channel');
+    const channelMismatch = Boolean(
+        serverChannel && status.channel && serverChannel !== status.channel
+    );
+
+    const broadcastFailures = Number(
+        pick(summary, 'broadcast_failures_24h', 'broadcastFailures24h') ?? 0
+    );
+
+    const last24h = summary?.last_24h ?? summary?.last24h ?? {};
+    const last7d = summary?.last_7d ?? summary?.last7d ?? {};
+
+    const socketTone = connectionTone(status.connectionState);
+
+    const pingLine = useMemo(() => {
+        switch (ping.state) {
+            case 'sending':
+                return 'Sending…';
+            case 'waiting':
+                return `Server accepted the ping${
+                    ping.serverMs ? ` (${ping.serverMs} ms)` : ''
+                } — waiting for it to arrive over the socket…`;
+            case 'received':
+                return `Received in browser after ${ping.roundTripMs ?? '?'} ms.`;
+            case 'timeout':
+                return 'Not received — the socket is not delivering to this browser.';
+            case 'failed':
+                return `Ping failed: ${ping.error || 'the server refused it'}.`;
+            default:
+                return '';
+        }
+    }, [ping]);
+
+    const pingTone =
+        ping.state === 'received'
+            ? 'ok'
+            : ping.state === 'timeout' || ping.state === 'failed'
+              ? 'bad'
+              : ping.state === 'idle'
+                ? 'muted'
+                : 'warn';
+
+    const tone = (name) =>
+        name === 'ok'
+            ? styles.isOk
+            : name === 'warn'
+              ? styles.isWarn
+              : name === 'bad'
+                ? styles.isBad
+                : styles.isMuted;
+
+    const row = (label, value, toneName) => (
+        <div className={styles.cqdiagRow}>
+            <span className={styles.cqdiagLabel}>{label}</span>
+            <span
+                className={`${styles.cqdiagValue} ${toneName ? tone(toneName) : ''}`}
+            >
+                {value}
+            </span>
+        </div>
+    );
+
+    const countChips = (bucket) => {
+        const entries = Object.entries(bucket ?? {}).filter(
+            ([, count]) => Number(count) > 0
+        );
+
+        if (entries.length === 0) {
+            return <span className={styles.cqdiagNone}>nothing recorded</span>;
+        }
+
+        return entries.map(([name, count]) => (
+            <span
+                key={name}
+                className={`${styles.cqdiagChip} ${tone(outcomeTone(name))}`}
+            >
+                {shortEventName(name)} {count}
+            </span>
+        ));
+    };
+
+    return (
+        <div className={styles.cqdiag}>
+            {embedded || !title ? null : (
+                <h2 className={styles.cqdiagTitle}>{title}</h2>
+            )}
+
+            <div className={styles.cqdiagColumns}>
+                {/* --- this browser -------------------------------------- */}
+                <section className={styles.cqdiagSection}>
+                    <h3 className={styles.cqdiagHeading}>
+                        <Activity size={14} />
+                        <span>This browser</span>
+                    </h3>
+
+                    {row(
+                        'Monitor permission',
+                        yesNo(status.canMonitor),
+                        status.canMonitor === false ? 'bad' : 'ok'
+                    )}
+                    {row(
+                        'Echo created',
+                        yesNo(status.echoAvailable, 'not yet'),
+                        status.echoAvailable === false ? 'bad' : undefined
+                    )}
+                    {row(
+                        'Socket',
+                        <>
+                            <span
+                                className={`${styles.cqdiagDot} ${tone(socketTone)}`}
+                            />
+                            {status.connectionState ?? 'unknown'}
+                        </>
+                    )}
+                    {row('Channel', status.channel ?? '—')}
+                    {row(
+                        'Subscribed',
+                        status.subscriptionError
+                            ? `No — ${status.subscriptionError.status ?? 'error'}: ${
+                                  status.subscriptionError.message
+                              }`
+                            : yesNo(status.subscribed),
+                        status.subscriptionError || status.subscribed === false
+                            ? 'bad'
+                            : 'ok'
+                    )}
+                    {row(
+                        'Last event',
+                        status.lastEventName
+                            ? `${shortEventName(status.lastEventName)} at ${formatLedgerTime(
+                                  status.lastEventAt
+                              )}`
+                            : 'none yet'
+                    )}
+                    {row('Events received', status.eventsReceived)}
+                    {row(
+                        'Socket drops',
+                        status.disconnects,
+                        status.disconnects > 0 ? 'warn' : undefined
+                    )}
+                    {row(
+                        'Snapshot',
+                        status.snapshotError
+                            ? `failed — ${status.snapshotError}`
+                            : status.snapshotAt
+                              ? `${formatLedgerTime(status.snapshotAt)} · ${
+                                    status.snapshotCalls
+                                } call(s)`
+                              : 'not fetched',
+                        status.snapshotError ? 'bad' : undefined
+                    )}
+                    {row('Pop showing', `${status.visibleCalls} call(s)`)}
+
+                    <div className={styles.cqdiagActions}>
+                        <button
+                            type="button"
+                            className={styles.cqdiagButton}
+                            onClick={showDemo}
+                        >
+                            <TestTube2 size={13} />
+                            <span>Show demo pop</span>
+                        </button>
+                        <button
+                            type="button"
+                            className={styles.cqdiagButton}
+                            onClick={copyStatus}
+                        >
+                            <ClipboardCopy size={13} />
+                            <span>Copy status</span>
+                        </button>
+                    </div>
+                </section>
+
+                {/* --- server -------------------------------------------- */}
+                <section className={styles.cqdiagSection}>
+                    <h3 className={styles.cqdiagHeading}>
+                        <RefreshCw size={14} />
+                        <span>Server</span>
+                    </h3>
+
+                    {loadError ? (
+                        <div className={styles.cqdiagWarning}>
+                            <AlertTriangle size={14} />
+                            <span>
+                                The diagnostics endpoint could not be read (
+                                {loadError}). Everything on the left is still
+                                live.
+                            </span>
+                        </div>
+                    ) : null}
+
+                    {row(
+                        'Environment',
+                        pick(serverBlock, 'app_env', 'appEnv') ?? '—'
+                    )}
+                    {row(
+                        'Broadcast driver',
+                        pick(
+                            serverBlock,
+                            'broadcast_driver',
+                            'broadcastDriver'
+                        ) ?? '—'
+                    )}
+                    {row(
+                        'Publish target',
+                        pick(serverBlock, 'publish_target', 'publishTarget') ??
+                            '—'
+                    )}
+                    {row(
+                        'Channel',
+                        channelMismatch
+                            ? `${serverChannel} — this browser is on ${status.channel}`
+                            : (serverChannel ?? '—'),
+                        channelMismatch ? 'bad' : undefined
+                    )}
+                    {row(
+                        'Webhook secret',
+                        yesNo(
+                            pick(
+                                serverBlock,
+                                'webhook_secret_configured',
+                                'webhookSecretConfigured'
+                            )
+                        ),
+                        pick(
+                            serverBlock,
+                            'webhook_secret_configured',
+                            'webhookSecretConfigured'
+                        ) === false
+                            ? 'bad'
+                            : undefined
+                    )}
+                    {row(
+                        'Log level',
+                        pick(serverBlock, 'log_level', 'logLevel') ?? '—'
+                    )}
+                    {row(
+                        'Queue connection',
+                        pick(
+                            serverBlock,
+                            'queue_connection',
+                            'queueConnection'
+                        ) ?? '—'
+                    )}
+                    {row(
+                        'Live rows',
+                        pick(serverBlock, 'live_rows', 'liveRows') ?? '—'
+                    )}
+                    {row(
+                        'Excluded queues',
+                        (() => {
+                            // The server sends the ids themselves; the count is
+                            // what a reader wants, the ids are the tooltip.
+                            const excluded = pick(
+                                serverBlock,
+                                'excluded_queue_ids',
+                                'excludedQueueIds',
+                                'excluded_queues',
+                                'excludedQueues'
+                            );
+
+                            if (Array.isArray(excluded)) {
+                                return (
+                                    <span title={excluded.join(', ')}>
+                                        {excluded.length}
+                                    </span>
+                                );
+                            }
+
+                            return excluded ?? '—';
+                        })()
+                    )}
+                    {row(
+                        'Stale after',
+                        (() => {
+                            const minutes = pick(
+                                serverBlock,
+                                'stale_after_minutes',
+                                'staleAfterMinutes'
+                            );
+
+                            return minutes === null
+                                ? '—'
+                                : `${minutes} minute(s)`;
+                        })()
+                    )}
+                    {row(
+                        'Ledger retained',
+                        (() => {
+                            const days = pick(
+                                serverBlock,
+                                'retain_days',
+                                'retainDays'
+                            );
+
+                            return days === null ? '—' : `${days} day(s)`;
+                        })()
+                    )}
+                </section>
+
+                {/* --- round trip ---------------------------------------- */}
+                <section className={styles.cqdiagSection}>
+                    <h3 className={styles.cqdiagHeading}>
+                        <Send size={14} />
+                        <span>Round trip</span>
+                    </h3>
+
+                    <p className={styles.cqdiagCopy}>
+                        Broadcasts a harmless ping on the call queue channel. It
+                        pops nothing — it only proves the socket reaches this
+                        browser.
+                    </p>
+
+                    <div className={styles.cqdiagActions}>
+                        <button
+                            type="button"
+                            className={styles.cqdiagButton}
+                            disabled={ping.state === 'sending'}
+                            onClick={sendPing}
+                        >
+                            {ping.state === 'sending' ? (
+                                <Loader2 size={13} className={styles.spin} />
+                            ) : (
+                                <Send size={13} />
+                            )}
+                            <span>Send test ping</span>
+                        </button>
+                    </div>
+
+                    {pingLine ? (
+                        <p
+                            className={`${styles.cqdiagResult} ${tone(pingTone)}`}
+                        >
+                            {pingLine}
+                        </p>
+                    ) : null}
+                </section>
+            </div>
+
+            {/* --- recent webhooks --------------------------------------- */}
+            <section className={styles.cqdiagSection}>
+                <div className={styles.cqdiagBar}>
+                    <h3 className={styles.cqdiagHeading}>
+                        <Activity size={14} />
+                        <span>Recent webhooks</span>
+                    </h3>
+
+                    <div className={styles.cqdiagBarActions}>
+                        <label className={styles.cqdiagCheck}>
+                            <input
+                                type="checkbox"
+                                checked={autoRefresh}
+                                onChange={(e) =>
+                                    setAutoRefresh(e.target.checked)
+                                }
+                            />
+                            <span>Auto-refresh every 10s</span>
+                        </label>
+
+                        <button
+                            type="button"
+                            className={styles.cqdiagButton}
+                            disabled={isLoading}
+                            onClick={load}
+                        >
+                            {isLoading ? (
+                                <Loader2 size={13} className={styles.spin} />
+                            ) : (
+                                <RefreshCw size={13} />
+                            )}
+                            <span>Refresh</span>
+                        </button>
+                    </div>
+                </div>
+
+                <div className={styles.cqdiagSummary}>
+                    <div className={styles.cqdiagSummaryRow}>
+                        <span className={styles.cqdiagLabel}>Last 24h</span>
+                        <span className={styles.cqdiagChips}>
+                            {countChips(last24h)}
+                        </span>
+                    </div>
+                    <div className={styles.cqdiagSummaryRow}>
+                        <span className={styles.cqdiagLabel}>Last 7 days</span>
+                        <span className={styles.cqdiagChips}>
+                            {countChips(last7d)}
+                        </span>
+                    </div>
+                    <div className={styles.cqdiagSummaryRow}>
+                        <span className={styles.cqdiagLabel}>
+                            Broadcast failures (24h)
+                        </span>
+                        <span
+                            className={`${styles.cqdiagValue} ${
+                                broadcastFailures > 0 ? tone('bad') : ''
+                            }`}
+                        >
+                            {broadcastFailures}
+                        </span>
+                    </div>
+                    <div className={styles.cqdiagSummaryRow}>
+                        <span className={styles.cqdiagLabel}>
+                            Last ringing recorded
+                        </span>
+                        <span className={styles.cqdiagValue}>
+                            {formatLedgerTime(
+                                pick(
+                                    summary,
+                                    'last_ringing_recorded_at',
+                                    'lastRingingRecordedAt'
+                                )
+                            )}
+                        </span>
+                    </div>
+                    <div className={styles.cqdiagSummaryRow}>
+                        <span className={styles.cqdiagLabel}>
+                            Last webhook of any kind
+                        </span>
+                        <span className={styles.cqdiagValue}>
+                            {formatLedgerTime(
+                                pick(summary, 'last_event_at', 'lastEventAt')
+                            )}
+                        </span>
+                    </div>
+                </div>
+
+                <div className={styles.cqdiagPanel}>
+                    {events.length === 0 ? (
+                        <div className={styles.cqdiagState}>
+                            <span>
+                                No webhooks recorded yet — the ledger starts
+                                with the next Zoom event.
+                            </span>
+                        </div>
+                    ) : (
+                        <table className={styles.cqdiagTable}>
+                            <thead>
+                                <tr>
+                                    <th>Time</th>
+                                    <th>Event</th>
+                                    <th>Outcome</th>
+                                    <th>Queue</th>
+                                    <th>Caller</th>
+                                    <th>Call</th>
+                                    <th>Broadcast</th>
+                                    <th>Took</th>
+                                    <th>Error</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {events.map((event, index) => {
+                                    const at = pick(
+                                        event,
+                                        'received_at',
+                                        'receivedAt',
+                                        'at',
+                                        'created_at',
+                                        'createdAt'
+                                    );
+                                    const broadcast = broadcastState(
+                                        pick(
+                                            event,
+                                            'broadcast',
+                                            'broadcasted',
+                                            'broadcast_ok'
+                                        )
+                                    );
+                                    const broadcastMs = pick(
+                                        event,
+                                        'broadcast_ms',
+                                        'broadcastMs'
+                                    );
+                                    const name = pick(event, 'event', 'name');
+                                    const outcome =
+                                        pick(event, 'outcome', 'result') ?? '';
+                                    const failedBroadcast =
+                                        broadcast === 'failed';
+                                    // A row the middleware turned away is
+                                    // logged as event 'rejected' with the
+                                    // reason in `outcome`, so the event name
+                                    // has to count towards the verdict too.
+                                    const rowTone = outcomeTone(
+                                        String(name) === 'rejected'
+                                            ? 'rejected'
+                                            : outcome,
+                                        failedBroadcast
+                                    );
+                                    const error = pick(
+                                        event,
+                                        'error',
+                                        'error_message'
+                                    );
+                                    const callId = pick(
+                                        event,
+                                        'call_id',
+                                        'callId'
+                                    );
+
+                                    return (
+                                        <tr
+                                            key={
+                                                pick(event, 'id') ??
+                                                `${callId ?? 'row'}-${index}`
+                                            }
+                                        >
+                                            <td title={at ?? ''}>
+                                                {formatLedgerTime(at)}
+                                            </td>
+                                            <td title={String(name ?? '')}>
+                                                {shortEventName(name)}
+                                            </td>
+                                            <td>
+                                                <span
+                                                    className={`${styles.cqdiagBadge} ${tone(
+                                                        rowTone
+                                                    )}`}
+                                                    title={String(outcome)}
+                                                >
+                                                    {outcome || '—'}
+                                                </span>
+                                            </td>
+                                            <td
+                                                title={
+                                                    pick(
+                                                        event,
+                                                        'queue_name',
+                                                        'queueName'
+                                                    ) ?? ''
+                                                }
+                                            >
+                                                {truncate(
+                                                    pick(
+                                                        event,
+                                                        'queue_name',
+                                                        'queueName'
+                                                    ) ?? '—',
+                                                    24
+                                                )}
+                                            </td>
+                                            <td>
+                                                {pick(
+                                                    event,
+                                                    'caller_number',
+                                                    'callerNumber',
+                                                    'from'
+                                                ) ?? '—'}
+                                            </td>
+                                            <td title={String(callId ?? '')}>
+                                                {shortCallId(callId)}
+                                            </td>
+                                            <td
+                                                className={
+                                                    failedBroadcast
+                                                        ? tone('bad')
+                                                        : undefined
+                                                }
+                                            >
+                                                {broadcast === null
+                                                    ? '—'
+                                                    : broadcast === 'ok'
+                                                      ? `sent${
+                                                            broadcastMs
+                                                                ? ` · ${broadcastMs} ms`
+                                                                : ''
+                                                        }`
+                                                      : 'failed'}
+                                            </td>
+                                            <td>
+                                                {(() => {
+                                                    const took = pick(
+                                                        event,
+                                                        'duration_ms',
+                                                        'durationMs'
+                                                    );
+
+                                                    return took === null
+                                                        ? '—'
+                                                        : `${took} ms`;
+                                                })()}
+                                            </td>
+                                            <td title={String(error ?? '')}>
+                                                {error
+                                                    ? truncate(error, 40)
+                                                    : '—'}
+                                            </td>
+                                        </tr>
+                                    );
+                                })}
+                            </tbody>
+                        </table>
+                    )}
+                </div>
+
+                <p className={styles.cqdiagNote}>
+                    <strong>How to read this.</strong> A green ledger row for a
+                    call the browser never showed is a browser/socket problem —
+                    check the socket, the channel and the subscription above. No
+                    ledger rows at all during a real call is a Zoom, webhook or
+                    throttle problem — the event never reached us. A red
+                    “broadcast failed” is the websocket server (Reverb) being
+                    down, so nobody was told.
+                </p>
+            </section>
+        </div>
+    );
+};
+
+export default CallQueueDiagnostics;