@rapidmx/meet-plugin 0.14.1 → 0.15.0

package/dist/apps/meet/_CallView.js

@@ -16,10 +16,24 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * The call fills the viewport (`fixed inset-0`) as three rows - a slim header, the tiles (which take whatever room
  * is left and never scroll the page), and the control bar pinned to the bottom - instead of being laid out inside
- * the branded page shell, whose header, footer and padding pushed it off the screen. The local participant's own
- * tile is a small tile in the bottom-right corner while anyone else is in the call (above the control bar on a narrower
- * window, and at the top on a phone, where the bar wraps onto a second row), and fills the tile area while they are
- * alone.
+ * the branded page shell, whose header, footer and padding pushed it off the screen.
+ *
+ * ## Where the local tile appears
+ *
+ * In plain grid view (not focus, not presenting), the local tile is an ordinary member of the grid, same size as
+ * everyone else's, rather than a floating corner overlay - so with exactly two participants, the local tile is
+ * genuinely one of the two grid cells, not a small picture-in-picture over the other person's. The floating corner
+ * tile (above the control bar on a narrower window, at the top on a phone, where the bar wraps onto a second row)
+ * is reserved for focus/presentation layouts, where there's already a single large tile the local one would
+ * otherwise compete with for space. Either way, alone in the call, the local tile simply fills the whole stage
+ * (see the `alone` branch of the `stage` computation).
+ *
+ * `selfHidden` (`handleHideSelf()`/`handleToggleSelfHidden()`) removes the local tile from view entirely, wherever
+ * it would otherwise appear - set from the tile's own corner "…" menu (`_ParticipantTile.tsx`'s `onHideSelf`, one
+ * directional: there's no tile left to click "show" on once it's gone) or toggled back on from the navbar's own
+ * "…" menu (`_CallControls.tsx`), which is the only way to re-show it from grid view, where there'd otherwise be
+ * nothing left bearing a "show self" control. Never honored while `alone`: hiding the only tile on screen would
+ * just blank it, so the local tile ignores `selfHidden` there and always shows.
  *
  * ## Who is heard
  *
@@ -145,6 +159,7 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     const [diagnosticsOpen, setDiagnosticsOpen] = useState(false);
     const [settingsOpen, setSettingsOpen] = useState(false);
     const [transportMode, setTransportModeState] = useState("auto");
+    const [selfHidden, setSelfHidden] = useState(false);
     const managerRef = useRef(null);
     /** The raw capture from `getDisplayMedia()` - only ever used to stop it (releasing the OS's own share
      * indicator) and to notice the participant ending the share from the browser's own UI (`track.onended`). What's
@@ -375,6 +390,15 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     function handleToggleHand() {
         setHandRaised((prev) => !prev);
     }
+    /** Hides the local tile - the tile's own "…" menu calls this directly (one-directional: there is no "show
+     * self" from in-grid, since a hidden tile isn't there to click on). Re-showing it is the navbar "…" menu's
+     * `handleToggleSelfHidden()` instead. */
+    function handleHideSelf() {
+        setSelfHidden(true);
+    }
+    function handleToggleSelfHidden() {
+        setSelfHidden((prev) => !prev);
+    }
     function handleReaction(emoji) {
         if (managerRef.current?.sendReaction(emoji)) {
             showReaction(emoji, "You");
@@ -510,24 +534,27 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     // so someone already in the call is not told they are "connecting" each time a newcomer arrives.
     const selfConnecting = !connectError && (!signalingReady || (!alone && participants.every((p) => p.transport === "connecting")));
     const remoteTile = (p, className) => (_jsx(ParticipantTile, { name: p.name, stream: remoteStreams[p.uid] ?? null, cameraOff: !p.videoOn, micMuted: !p.audioOn, handRaised: p.handRaised, transport: p.transport, status: p.transport === "connecting" ? "Awaiting connection…" : undefined, isFocused: mainUid === p.uid, contain: presenterUid === p.uid, className: className, onClick: () => togglePin(p.uid) }, p.uid));
-    const selfTile = (className) => (_jsx(ParticipantTile, { name: selfName, stream: media.videoStream, isLocal: true, cameraOff: !media.cameraOn, micMuted: !media.micOn, handRaised: handRaised, status: selfConnecting ? "Connecting…" : undefined, 
+    const selfTile = (className, canHide) => (_jsx(ParticipantTile, { name: selfName, stream: media.videoStream, isLocal: true, cameraOff: !media.cameraOn, micMuted: !media.micOn, handRaised: handRaised, status: selfConnecting ? "Connecting…" : undefined, 
         // A custom background is a fixed picture, not a live reflection - mirroring it would show it backwards
         // to no one but the participant themselves (see `_ParticipantTile.tsx`'s doc comment).
-        mirrored: media.filters.background !== "image", className: className }));
+        mirrored: media.filters.background !== "image", onHideSelf: canHide ? handleHideSelf : undefined, className: className }));
     const mainParticipant = participants.find((p) => p.uid === mainUid);
     const thumbnails = participants.filter((p) => p.uid !== mainUid);
     let stage;
     if (alone) {
-        // Nobody else yet: the local participant fills the tile area, presenting or not.
+        // Nobody else yet: the local participant fills the tile area, presenting or not - and is never hideable,
+        // since there'd be nothing left to look at (see this module's doc comment on hiding the local tile).
         stage = isPresenting ? (_jsx(ParticipantTile, { name: selfName, stream: screenStream, isLocal: true, contain: true, isFocused: true, className: "h-full" })) : (selfTile("h-full"));
     }
     else if (showFocusLayout && (mainParticipant || isPresenting)) {
         stage = (_jsxs("div", { className: "h-full flex flex-col gap-2", children: [_jsx("div", { className: "flex-1 min-h-0", "data-testid": "main-tile", children: mainParticipant ? (remoteTile(mainParticipant, "h-full")) : (_jsx(ParticipantTile, { name: selfName, stream: screenStream, isLocal: true, contain: true, isFocused: true, className: "h-full" })) }), thumbnails.length > 0 && (_jsx("div", { className: "flex gap-2 overflow-x-auto h-24 shrink-0", "data-testid": "thumbnails", children: thumbnails.map((p) => (_jsx("div", { className: "w-36 shrink-0", children: remoteTile(p, "h-full") }, p.uid))) }))] }));
     }
     else {
-        stage = (_jsx("div", { className: "h-full grid gap-2 auto-rows-fr [grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))]", children: participants.map((p) => remoteTile(p, "h-full")) }));
+        // Plain grid, nobody presenting: the local tile joins the grid as an ordinary tile (unless hidden) instead
+        // of floating in a corner - see this module's doc comment.
+        stage = (_jsxs("div", { className: "h-full grid gap-2 auto-rows-fr [grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))]", children: [!selfHidden && selfTile("h-full", true), participants.map((p) => remoteTile(p, "h-full"))] }));
     }
-    return (_jsxs("div", { className: "fixed inset-0 z-50 flex bg-[#202124] text-white overflow-hidden", children: [_jsx("style", { children: `@keyframes meet-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { opacity: 1; transform: translateY(-4vh) scale(1); } 100% { transform: translateY(-45vh) scale(1); opacity: 0; } }` }), _jsxs("div", { className: "relative flex-1 min-w-0 flex flex-col overflow-hidden", children: [_jsxs("header", { className: "shrink-0 flex items-center justify-between gap-3 px-4 py-3", children: [_jsx("h1", { className: "min-w-0 truncate text-base font-medium", children: meetingTitle }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [raisedNames.length > 0 && (_jsxs("span", { className: "max-w-[45vw] truncate px-3 py-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", "data-testid": "raised-hands", children: ["\u270B ", raisedNames.join(", ")] })), talkingStickActive && (_jsxs("span", { className: "max-w-[45vw] truncate px-3 py-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", "data-testid": "talking-stick-status", children: ["\uD83C\uDF99\uFE0F ", talkingStickHolderName ? `${talkingStickHolderName} ${talkingStickHolderName === "You" ? "have" : "has"} the floor` : "Waiting for the host to choose a speaker"] })), isHost && (_jsx("button", { type: "button", className: `w-9 h-9 flex items-center justify-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 ${talkingStickActive ? "bg-[#a8c7fa] text-[#062e6f] hover:bg-[#8ab4f8]" : "bg-[#3c4043] hover:bg-[#4b4f53]"}`, "aria-label": talkingStickActive ? "End talking stick" : "Talking stick", "aria-pressed": talkingStickActive, title: talkingStickActive ? "End talking stick" : "Start talking stick mode", onClick: handleToggleTalkingStick, children: _jsx(BatonIcon, {}) })), _jsx("button", { type: "button", className: "px-3 py-1.5 rounded-full bg-[#3c4043] hover:bg-[#4b4f53] text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `${participants.length + 1} participants`, "aria-haspopup": "dialog", "aria-expanded": drawerOpen, onClick: () => setDrawerOpen((prev) => !prev), children: participants.length + 1 })] })] }), connectError && (_jsx("div", { role: "alert", className: "shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#601410] text-[#f9dedc] text-sm", children: connectError })), audioBlocked && (_jsx("button", { type: "button", className: "shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", onClick: handleResumeAudio, children: "Click here to turn on sound" })), _jsxs("main", { className: "relative flex-1 min-h-0 px-3 pb-3", children: [stage, presenterName && presenterUid !== peerId && (_jsxs("p", { className: "absolute top-2 left-5 px-2 py-0.5 rounded bg-black/60 text-sm", children: [presenterName, " is presenting"] }))] }), _jsx("footer", { className: "shrink-0 pt-1 pb-[max(0.75rem,env(safe-area-inset-bottom))]", children: _jsx(CallControls, { media: media, participants: participants, isPresenting: isPresenting, presentingElsewhereName: presenterUid && presenterUid !== peerId ? presenterName : undefined, onToggleShare: () => void handleToggleShare(), screenTransform: screenTransform, onRotateScreen: handleRotateScreen, onFlipScreen: handleFlipScreen, handRaised: handRaised, onToggleHand: handleToggleHand, onReaction: handleReaction, viewMode: viewMode, onToggleViewMode: () => setViewMode((prev) => (prev === "grid" ? "focus" : "grid")), micLocked: micLocked, isHost: isHost, transportMode: transportMode, onSetTransportMode: handleSetTransportMode, onOpenDiagnostics: () => setDiagnosticsOpen(true), onOpenSettings: () => setSettingsOpen(true), onLeave: onLeave }) }), !alone && (_jsx("div", { className: "absolute z-10 right-3 top-14 w-28 sm:top-auto sm:bottom-24 sm:w-52 aspect-video shadow-xl xl:right-4 xl:bottom-4", "data-testid": "self-view", children: selfTile("h-full") })), _jsx("div", { className: "pointer-events-none absolute left-4 bottom-28 w-40 h-[45vh]", "aria-hidden": "true", children: reactions.map((reaction) => (_jsxs("div", { className: "absolute bottom-0 flex flex-col items-center", style: { left: `${(reaction.id % 4) * 36}px`, animation: `meet-float ${REACTION_MS}ms ease-out forwards` }, "data-testid": "reaction", children: [_jsx("span", { className: "text-4xl leading-none", children: reaction.emoji }), _jsx("span", { className: "mt-1 px-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-xs", children: reaction.name })] }, reaction.id))) }), participants.map((p) => {
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex bg-[#202124] text-white overflow-hidden", children: [_jsx("style", { children: `@keyframes meet-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { opacity: 1; transform: translateY(-4vh) scale(1); } 100% { transform: translateY(-45vh) scale(1); opacity: 0; } }` }), _jsxs("div", { className: "relative flex-1 min-w-0 flex flex-col overflow-hidden", children: [_jsxs("header", { className: "shrink-0 flex items-center justify-between gap-3 px-4 py-3", children: [_jsx("h1", { className: "min-w-0 truncate text-base font-medium", children: meetingTitle }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [raisedNames.length > 0 && (_jsxs("span", { className: "max-w-[45vw] truncate px-3 py-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", "data-testid": "raised-hands", children: ["\u270B ", raisedNames.join(", ")] })), talkingStickActive && (_jsxs("span", { className: "max-w-[45vw] truncate px-3 py-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", "data-testid": "talking-stick-status", children: ["\uD83C\uDF99\uFE0F ", talkingStickHolderName ? `${talkingStickHolderName} ${talkingStickHolderName === "You" ? "have" : "has"} the floor` : "Waiting for the host to choose a speaker"] })), isHost && (_jsx("button", { type: "button", className: `w-9 h-9 flex items-center justify-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 ${talkingStickActive ? "bg-[#a8c7fa] text-[#062e6f] hover:bg-[#8ab4f8]" : "bg-[#3c4043] hover:bg-[#4b4f53]"}`, "aria-label": talkingStickActive ? "End talking stick" : "Talking stick", "aria-pressed": talkingStickActive, title: talkingStickActive ? "End talking stick" : "Start talking stick mode", onClick: handleToggleTalkingStick, children: _jsx(BatonIcon, {}) })), _jsx("button", { type: "button", className: "px-3 py-1.5 rounded-full bg-[#3c4043] hover:bg-[#4b4f53] text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `${participants.length + 1} participants`, "aria-haspopup": "dialog", "aria-expanded": drawerOpen, onClick: () => setDrawerOpen((prev) => !prev), children: participants.length + 1 })] })] }), connectError && (_jsx("div", { role: "alert", className: "shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#601410] text-[#f9dedc] text-sm", children: connectError })), audioBlocked && (_jsx("button", { type: "button", className: "shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", onClick: handleResumeAudio, children: "Click here to turn on sound" })), _jsxs("main", { className: "relative flex-1 min-h-0 px-3 pb-3", children: [stage, presenterName && presenterUid !== peerId && (_jsxs("p", { className: "absolute top-2 left-5 px-2 py-0.5 rounded bg-black/60 text-sm", children: [presenterName, " is presenting"] }))] }), _jsx("footer", { className: "shrink-0 pt-1 pb-[max(0.75rem,env(safe-area-inset-bottom))]", children: _jsx(CallControls, { media: media, participants: participants, isPresenting: isPresenting, presentingElsewhereName: presenterUid && presenterUid !== peerId ? presenterName : undefined, onToggleShare: () => void handleToggleShare(), screenTransform: screenTransform, onRotateScreen: handleRotateScreen, onFlipScreen: handleFlipScreen, handRaised: handRaised, onToggleHand: handleToggleHand, onReaction: handleReaction, viewMode: viewMode, onToggleViewMode: () => setViewMode((prev) => (prev === "grid" ? "focus" : "grid")), micLocked: micLocked, selfHidden: selfHidden, onToggleSelfHidden: handleToggleSelfHidden, isHost: isHost, transportMode: transportMode, onSetTransportMode: handleSetTransportMode, onOpenDiagnostics: () => setDiagnosticsOpen(true), onOpenSettings: () => setSettingsOpen(true), onLeave: onLeave }) }), !alone && !selfHidden && showFocusLayout && (_jsx("div", { className: "absolute z-10 right-3 top-14 w-28 sm:top-auto sm:bottom-24 sm:w-52 aspect-video shadow-xl xl:right-4 xl:bottom-4", "data-testid": "self-view", children: selfTile("h-full", true) })), _jsx("div", { className: "pointer-events-none absolute left-4 bottom-28 w-40 h-[45vh]", "aria-hidden": "true", children: reactions.map((reaction) => (_jsxs("div", { className: "absolute bottom-0 flex flex-col items-center", style: { left: `${(reaction.id % 4) * 36}px`, animation: `meet-float ${REACTION_MS}ms ease-out forwards` }, "data-testid": "reaction", children: [_jsx("span", { className: "text-4xl leading-none", children: reaction.emoji }), _jsx("span", { className: "mt-1 px-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-xs", children: reaction.name })] }, reaction.id))) }), participants.map((p) => {
                         const stream = remoteStreams[p.uid];
                         return stream ? _jsx(RemoteAudio, { stream: stream, onBlocked: handleAudioBlocked }, `${p.uid}:${audioNonce}`) : null;
                     }), _jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })] }), drawerOpen && (_jsx(ParticipantsDrawer, { selfName: selfName, micOn: media.micOn, handRaised: handRaised, participants: participants, isSelfHost: isHost, isParticipantHost: isParticipantHost, onMute: handleMuteParticipant, onKick: handleKickParticipant, waitingRoomEnabled: waitingRoomEnabled, waitingParticipants: waitingParticipants, onAdmit: handleAdmitParticipant, onDeny: handleDenyParticipant, talkingStickActive: talkingStickActive, selfPeerId: peerId, talkingStickHolder: talkingStickHolder, onGiveTalkingStick: handleGiveTalkingStick, onClose: () => setDrawerOpen(false) })), diagnosticsOpen && (_jsx(DiagnosticsWindow, { onClose: () => setDiagnosticsOpen(false), children: _jsx(DiagnosticsPanel, { selfName: selfName, micOn: media.micOn, cameraOn: media.cameraOn, participants: participants }) })), settingsOpen && isHost && (_jsx(SettingsModal, { forceMuteOnJoin: forceMuteOnJoin, onToggleForceMuteOnJoin: handleToggleForceMuteOnJoin, hasPassword: hasPassword, onSetPassword: handleSetPassword, waitingRoomEnabled: waitingRoomEnabled, onToggleWaitingRoomEnabled: handleToggleWaitingRoomEnabled, onClose: () => setSettingsOpen(false) }))] }));

package/dist/apps/meet/_DiagnosticsPanel.d.ts

@@ -6,9 +6,11 @@
  * (`MeshParticipant.diagnostics`, refreshed every few seconds by `MeshConnectionManager`'s own poller - see its doc
  * comment). Purely informational and entirely local: nothing here is sent anywhere.
  *
- * `diagnostics` is `undefined` until the first poll completes (shortly after a connection comes up) and always
- * absent for a `"websocket"`-relayed participant (there is no `RTCPeerConnection` to poll there) - both cases show
- * "Not available" rather than a blank space, so it never looks like the panel forgot to load.
+ * `diagnostics` is `undefined` until the first poll completes (shortly after a connection comes up, or the pair moves
+ * to the server relay), shown as "Not available yet" rather than a blank space, so it never looks like the panel
+ * forgot to load. For a `"websocket"`-relayed participant the round trip is this browser's own leg to the relay
+ * server (the relay has no direct path to the peer), and the relay's own counters follow (`RelayRows`): how much of this browser's microphone audio the capture path
+ * delivered and how much of it was digital silence, and how this peer's audio is playing back here.
  */
 import React from "react";
 import type { MeshParticipant } from "../shared/webrtc/types.js";

package/dist/apps/meet/_DiagnosticsPanel.js

@@ -24,9 +24,25 @@ function StreamRow({ kind, packetsLost, jitter, bytesSent, bytesReceived }) {
     return (_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: kind }), _jsxs("span", { children: [packetsLost !== undefined && `${packetsLost} lost`, jitter !== undefined && ` · ${formatMs(jitter)} jitter`, (bytesSent !== undefined || bytesReceived !== undefined) &&
                         ` · ${[bytesSent !== undefined && `↑${formatBytes(bytesSent)}`, bytesReceived !== undefined && `↓${formatBytes(bytesReceived)}`].filter(Boolean).join(" ")}`] })] }));
 }
+/** `part` as a whole-number percentage of `whole`, or "—" when there is no whole yet. */
+function percent(part, whole) {
+    return whole > 0 ? `${Math.round((part / whole) * 100)}%` : "—";
+}
+function plural(count, noun) {
+    return `${count} ${noun}${count === 1 ? "" : "s"}`;
+}
+/** The server relay's own counters (see `RelayDiagnostics`). The capture row is this browser's own microphone, the
+ * playback row this peer's audio as heard here - so a mostly silent capture points at the sender, silence arriving in
+ * playback with no capture problem points at the other end's capture, and gaps point at the network. */
+function RelayRows({ relay }) {
+    const { send, receive } = relay;
+    const notSent = send.audio.framesDropped + send.video.framesDropped;
+    return (_jsxs(_Fragment, { children: [send.audioCaptureWallMs > 0 && (_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Your mic capture" }), _jsxs("span", { children: [percent(send.audioCapturedMs, send.audioCaptureWallMs), " of real time \u00B7 ", percent(send.audioSilentMs, send.audioCapturedMs), " silent", send.audioEncoderSkippedMs > 0 && ` · ${formatMs(send.audioEncoderSkippedMs / 1000)} skipped`] })] })), notSent > 0 && (_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Not sent" }), _jsxs("span", { children: [send.audio.framesDropped, " audio \u00B7 ", send.video.framesDropped, " video frames"] })] })), receive && (_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Playback" }), _jsx("span", { children: `${percent(receive.audio.silentMs, receive.audio.playedMs)} silent · ${plural(receive.audio.gaps, "gap")} ` +
+                            `(${formatMs(receive.audio.gapMs / 1000)}) · ${formatMs(receive.audio.bufferedMs / 1000)} buffered` })] })), receive && receive.audio.droppedLate > 0 && (_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Dropped late" }), _jsx("span", { children: plural(receive.audio.droppedLate, "packet") })] }))] }));
+}
 export default function DiagnosticsPanel({ selfName, micOn, cameraOn, participants }) {
     return (_jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-white/60 mb-1.5", children: "This browser" }), browserCapabilities().map(({ label, supported }) => (_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: label }), _jsx("span", { className: supported ? "text-[#8ab4f8]" : "text-[#f2b8b5]", children: supported ? "Supported" : "Not supported" })] }, label))), _jsxs("p", { className: "text-xs font-semibold uppercase tracking-wide text-white/60 mt-3 mb-1.5", children: [selfName, " ", _jsx("span", { className: "text-white/60", children: "(you)" })] }), _jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Sending" }), _jsx("span", { children: [micOn && "audio", cameraOn && "video"].filter(Boolean).join(" + ") || "Nothing" })] }), participants.length === 0 && _jsx("p", { className: "text-white/60 mt-3", children: "Nobody else is in the call yet." }), participants.map((p) => {
                 const badge = p.transport !== "connecting" && p.transport !== "p2p" ? TRANSPORT_BADGES[p.transport] : undefined;
-                return (_jsxs("div", { children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-white/60 mt-3 mb-1.5", children: p.name }), _jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Connection" }), _jsx("span", { title: badge?.title, children: badge?.label ?? (p.transport === "connecting" ? "Connecting…" : "Direct") })] }), p.transport === "websocket" || !p.diagnostics ? (_jsxs("p", { className: `${LABEL} py-0.5`, children: ["Not available", p.transport !== "websocket" && " yet", "."] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Round-trip time" }), _jsx("span", { children: formatMs(p.diagnostics.roundTripTimeSeconds) })] }), _jsx(StreamRow, { kind: "Audio", ...p.diagnostics.audio }), _jsx(StreamRow, { kind: "Video", ...p.diagnostics.video })] }))] }, p.uid));
+                return (_jsxs("div", { children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-white/60 mt-3 mb-1.5", children: p.name }), _jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Connection" }), _jsx("span", { title: badge?.title, children: badge?.label ?? (p.transport === "connecting" ? "Connecting…" : "Direct") })] }), !p.diagnostics ? (_jsx("p", { className: `${LABEL} py-0.5`, children: "Not available yet." })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, title: p.diagnostics.relay ? "From this browser to the relay server and back" : undefined, children: p.diagnostics.relay ? "Round-trip to server" : "Round-trip time" }), _jsx("span", { children: formatMs(p.diagnostics.roundTripTimeSeconds) })] }), _jsx(StreamRow, { kind: "Audio", ...p.diagnostics.audio }), _jsx(StreamRow, { kind: "Video", ...p.diagnostics.video }), p.diagnostics.relay && _jsx(RelayRows, { relay: p.diagnostics.relay })] }))] }, p.uid));
             })] }));
 }

package/dist/apps/meet/_ParticipantTile.d.ts

@@ -10,7 +10,10 @@
  * natural - this is a local display transform only, never applied to the video actually sent to anyone, so
  * everyone else always sees the participant the right way round. `mirrored={false}` (`_CallView.tsx`, when a custom
  * background image is on) turns that off: the picture the participant chose is a fixed reference, not a live
- * reflection, and mirroring it would show it backwards to no one but themselves. */
+ * reflection, and mirroring it would show it backwards to no one but themselves.
+ *
+ * `onHideSelf` adds a small "…" menu to the tile's corner, local-tile-only - see `_CallView.tsx`'s doc comment on
+ * hiding the local tile from grid view. */
 import React from "react";
 import type { MediaTransport } from "../shared/webrtc/types.js";
 /** What a tile says about how its participant's media is arriving, for the paths that are not the ordinary direct one
@@ -41,7 +44,11 @@ export interface ParticipantTileProps {
     /** Whether the local tile is shown mirrored, like a real mirror - ignored for a remote tile, which is never
      * mirrored. Default `true`; see this module's doc comment. */
     mirrored?: boolean;
+    /** Offers a small "…" menu in the tile's top-right corner with one item, "Hide self" - see `_CallView.tsx`'s
+     * doc comment on hiding the local tile. Omitted everywhere that shouldn't offer it: every remote tile, and the
+     * local tile while alone in the call, where hiding it would just blank the only thing on screen. */
+    onHideSelf?: () => void;
     onClick?: () => void;
     className?: string;
 }
-export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, transport, status, isFocused, contain, mirrored, onClick, className, }: ParticipantTileProps): React.JSX.Element;
+export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, transport, status, isFocused, contain, mirrored, onHideSelf, onClick, className, }: ParticipantTileProps): React.JSX.Element;

package/dist/apps/meet/_ParticipantTile.js

@@ -15,9 +15,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * natural - this is a local display transform only, never applied to the video actually sent to anyone, so
  * everyone else always sees the participant the right way round. `mirrored={false}` (`_CallView.tsx`, when a custom
  * background image is on) turns that off: the picture the participant chose is a fixed reference, not a live
- * reflection, and mirroring it would show it backwards to no one but themselves. */
-import { useEffect, useRef } from "react";
-import { MicOffIcon } from "./_icons.js";
+ * reflection, and mirroring it would show it backwards to no one but themselves.
+ *
+ * `onHideSelf` adds a small "…" menu to the tile's corner, local-tile-only - see `_CallView.tsx`'s doc comment on
+ * hiding the local tile from grid view. */
+import { useEffect, useRef, useState } from "react";
+import { MicOffIcon, OverflowIcon } from "./_icons.js";
 /** What a tile says about how its participant's media is arriving, for the paths that are not the ordinary direct one
  * (which needs no comment). Text rather than only an icon, so the reason a picture is degraded is never a guess.
  * Exported so `_DiagnosticsPanel.tsx` shows the identical label/title rather than describing the same paths in
@@ -44,15 +47,43 @@ function StatusPill({ status, className }) {
 function initialOf(name) {
     return (Array.from(name.trim())[0] ?? "?").toUpperCase();
 }
-export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, transport, status, isFocused, contain, mirrored = true, onClick, className, }) {
+export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, transport, status, isFocused, contain, mirrored = true, onHideSelf, onClick, className, }) {
     const badge = transport ? TRANSPORT_BADGES[transport] : undefined;
     const videoRef = useRef(null);
     const showVideo = !!stream && !cameraOff;
+    const [hideMenuOpen, setHideMenuOpen] = useState(false);
+    const hideMenuRef = useRef(null);
     // The `<video>` element only exists while `showVideo`, so its stream is bound whenever it (re)appears too.
     useEffect(() => {
         if (videoRef.current) {
             videoRef.current.srcObject = stream ?? null;
         }
     }, [stream, showVideo]);
-    return (_jsxs("div", { className: `relative overflow-hidden rounded-xl bg-[#3c4043] flex items-center justify-center min-h-[90px] ${isFocused ? "ring-2 ring-[#8ab4f8]" : ""} ${className ?? ""}`, onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? `${name}${isLocal ? " (you)" : ""}` : undefined, children: [showVideo ? (_jsxs(_Fragment, { children: [_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: `w-full h-full ${contain ? "object-contain bg-black" : "object-cover"} ${isLocal && !contain && mirrored ? "[transform:scaleX(-1)]" : ""}` }), status && _jsx(StatusPill, { status: status, className: "absolute top-2 left-1/2 -translate-x-1/2 whitespace-nowrap" })] })) : (_jsxs("div", { className: "flex flex-col items-center gap-2 max-w-full px-1", children: [_jsx("div", { className: "w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold", "aria-hidden": "true", children: initialOf(name) }), status && _jsx(StatusPill, { status: status })] })), handRaised && (_jsx("span", { className: "absolute top-2 left-2 flex items-center justify-center w-8 h-8 rounded-full bg-[#a8c7fa] text-base", role: "img", "aria-label": "Hand raised", children: "\u270B" })), micMuted && (_jsx("span", { className: "absolute top-2 right-2 flex items-center justify-center w-7 h-7 rounded-full bg-black/60 text-white", role: "img", "aria-label": "Muted", children: _jsx("span", { className: "w-4 h-4 [&>svg]:w-4 [&>svg]:h-4", children: _jsx(MicOffIcon, {}) }) })), badge && (_jsx("span", { className: `absolute bottom-2 right-2 px-2 py-0.5 rounded text-xs ${transport === "failed" ? "bg-[#601410] text-[#f9dedc]" : "bg-black/60 text-white"}`, title: badge.title, "data-testid": "transport-badge", children: badge.label })), _jsxs("div", { className: "absolute bottom-2 left-2 max-w-[calc(100%-1rem)] truncate px-2 py-0.5 rounded bg-black/60 text-white text-sm", children: [name, isLocal ? " (you)" : ""] })] }));
+    // The tile's own "…" menu closes on Escape or a press anywhere outside it, same shape as every other menu in
+    // this app.
+    useEffect(() => {
+        if (!hideMenuOpen) {
+            return;
+        }
+        const onPointerDown = (event) => {
+            if (!hideMenuRef.current?.contains(event.target)) {
+                setHideMenuOpen(false);
+            }
+        };
+        const onKeyDown = (event) => {
+            if (event.key === "Escape") {
+                setHideMenuOpen(false);
+            }
+        };
+        document.addEventListener("pointerdown", onPointerDown);
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("pointerdown", onPointerDown);
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [hideMenuOpen]);
+    return (_jsxs("div", { className: `relative overflow-hidden rounded-xl bg-[#3c4043] flex items-center justify-center min-h-[90px] ${isFocused ? "ring-2 ring-[#8ab4f8]" : ""} ${className ?? ""}`, onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? `${name}${isLocal ? " (you)" : ""}` : undefined, children: [showVideo ? (_jsxs(_Fragment, { children: [_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: `w-full h-full ${contain ? "object-contain bg-black" : "object-cover"} ${isLocal && !contain && mirrored ? "[transform:scaleX(-1)]" : ""}` }), status && _jsx(StatusPill, { status: status, className: "absolute top-2 left-1/2 -translate-x-1/2 whitespace-nowrap" })] })) : (_jsxs("div", { className: "flex flex-col items-center gap-2 max-w-full px-1", children: [_jsx("div", { className: "w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold", "aria-hidden": "true", children: initialOf(name) }), status && _jsx(StatusPill, { status: status })] })), handRaised && (_jsx("span", { className: "absolute top-2 left-2 flex items-center justify-center w-8 h-8 rounded-full bg-[#a8c7fa] text-base", role: "img", "aria-label": "Hand raised", children: "\u270B" })), (micMuted || onHideSelf) && (_jsxs("div", { className: "absolute top-2 right-2 flex items-center gap-1", children: [micMuted && (_jsx("span", { className: "flex items-center justify-center w-7 h-7 rounded-full bg-black/60 text-white", role: "img", "aria-label": "Muted", children: _jsx("span", { className: "w-4 h-4 [&>svg]:w-4 [&>svg]:h-4", children: _jsx(MicOffIcon, {}) }) })), onHideSelf && (_jsxs("div", { className: "relative", ref: hideMenuRef, children: [_jsx("button", { type: "button", className: "flex items-center justify-center w-7 h-7 rounded-full bg-black/60 hover:bg-black/80 text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": "Local video options", "aria-haspopup": "menu", "aria-expanded": hideMenuOpen, onClick: () => setHideMenuOpen((prev) => !prev), children: _jsx("span", { className: "w-4 h-4 [&>svg]:w-4 [&>svg]:h-4", children: _jsx(OverflowIcon, {}) }) }), hideMenuOpen && (_jsx("div", { role: "menu", "aria-label": "Local video options", className: "absolute top-full right-0 mt-1 w-32 rounded-xl bg-[#2b2d30] text-white shadow-xl py-1 text-sm", children: _jsx("button", { type: "button", role: "menuitem", className: "w-full px-3 py-1.5 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
+                                        setHideMenuOpen(false);
+                                        onHideSelf();
+                                    }, children: "Hide self" }) }))] }))] })), badge && (_jsx("span", { className: `absolute bottom-2 right-2 px-2 py-0.5 rounded text-xs ${transport === "failed" ? "bg-[#601410] text-[#f9dedc]" : "bg-black/60 text-white"}`, title: badge.title, "data-testid": "transport-badge", children: badge.label })), _jsxs("div", { className: "absolute bottom-2 left-2 max-w-[calc(100%-1rem)] truncate px-2 py-0.5 rounded bg-black/60 text-white text-sm", children: [name, isLocal ? " (you)" : ""] })] }));
 }

package/dist/apps/meet/_ParticipantsDrawer.js

@@ -34,7 +34,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useEffect } from "react";
 import { TRANSPORT_BADGES } from "./_ParticipantTile.js";
-import { MicOffIcon } from "./_icons.js";
+import { BatonIcon, MicOffIcon, RemoveIcon } from "./_icons.js";
 /** The host-only "who's waiting" list - shown only while `waitingRoomEnabled` is on, since there is otherwise never
  * anyone to list. Says so explicitly when the list is empty, rather than rendering nothing (silence here would be
  * indistinguishable from the list just not having loaded yet). */
@@ -43,11 +43,11 @@ function WaitingSection({ waitingParticipants, onAdmit, onDeny, }) {
 }
 function Row({ name, isSelf, isHost, micMuted, handRaised, transport, canModerate, onMute, onKick, hasStick, canGiveStick, onGiveStick, }) {
     const badge = transport ? TRANSPORT_BADGES[transport] : undefined;
-    return (_jsxs("li", { className: "flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-white/5", children: [_jsxs("span", { className: "flex-1 min-w-0 truncate", children: [name, isSelf ? " (you)" : ""] }), isHost && _jsx("span", { className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-[#a8c7fa] text-[#062e6f]", children: "Host" }), hasStick && (_jsx("span", { className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-[#a8c7fa] text-[#062e6f]", role: "img", "aria-label": "Holding the talking stick", children: "\uD83C\uDF99\uFE0F" })), handRaised && (_jsx("span", { role: "img", "aria-label": "Hand raised", children: "\u270B" })), micMuted && (_jsx("span", { className: "w-4 h-4 text-white/70 [&>svg]:w-4 [&>svg]:h-4", role: "img", "aria-label": "Muted", children: _jsx(MicOffIcon, {}) })), badge && (_jsx("span", { className: `px-2 py-0.5 rounded text-xs whitespace-nowrap ${transport === "failed" ? "bg-[#601410] text-[#f9dedc]" : "bg-black/40 text-white"}`, title: badge.title, children: badge.label })), canGiveStick && !hasStick && (_jsx("button", { type: "button", className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-white/10 hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `Give the talking stick to ${name}`, onClick: onGiveStick, children: "Give stick" })), canModerate && !micMuted && (_jsx("button", { type: "button", className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-white/10 hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `Mute ${name}`, onClick: onMute, children: "Mute" })), canModerate && (_jsx("button", { type: "button", className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-[#601410] text-[#f9dedc] hover:bg-[#7a1b16] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `Remove ${name}`, onClick: () => {
+    return (_jsxs("li", { className: "flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-white/5", children: [_jsxs("span", { className: "flex-1 min-w-0 truncate", children: [name, isSelf ? " (you)" : ""] }), isHost && _jsx("span", { className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-[#a8c7fa] text-[#062e6f]", children: "Host" }), hasStick && (_jsx("span", { className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-[#a8c7fa] text-[#062e6f]", role: "img", "aria-label": "Holding the talking stick", children: "\uD83C\uDF99\uFE0F" })), handRaised && (_jsx("span", { role: "img", "aria-label": "Hand raised", children: "\u270B" })), micMuted && (_jsx("span", { className: "w-4 h-4 text-white/70 [&>svg]:w-4 [&>svg]:h-4", role: "img", "aria-label": "Muted", children: _jsx(MicOffIcon, {}) })), badge && (_jsx("span", { className: `px-2 py-0.5 rounded text-xs whitespace-nowrap ${transport === "failed" ? "bg-[#601410] text-[#f9dedc]" : "bg-black/40 text-white"}`, title: badge.title, children: badge.label })), canGiveStick && !hasStick && (_jsx("button", { type: "button", className: "w-7 h-7 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 [&>svg]:w-4 [&>svg]:h-4", "aria-label": `Give the talking stick to ${name}`, title: `Give the talking stick to ${name}`, onClick: onGiveStick, children: _jsx(BatonIcon, {}) })), canModerate && !micMuted && (_jsx("button", { type: "button", className: "w-7 h-7 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 [&>svg]:w-4 [&>svg]:h-4", "aria-label": `Mute ${name}`, title: `Mute ${name}`, onClick: onMute, children: _jsx(MicOffIcon, {}) })), canModerate && (_jsx("button", { type: "button", className: "w-7 h-7 flex items-center justify-center rounded-full bg-[#601410] text-[#f9dedc] hover:bg-[#7a1b16] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 [&>svg]:w-4 [&>svg]:h-4", "aria-label": `Remove ${name}`, title: `Remove ${name}`, onClick: () => {
                     if (window.confirm(`Remove ${name} from the call?`)) {
                         onKick?.();
                     }
-                }, children: "Remove" }))] }));
+                }, children: _jsx(RemoveIcon, {}) }))] }));
 }
 export default function ParticipantsDrawer({ selfName, micOn, handRaised, participants, isSelfHost, isParticipantHost, onMute, onKick, waitingRoomEnabled, waitingParticipants, onAdmit, onDeny, talkingStickActive, selfPeerId, talkingStickHolder, onGiveTalkingStick, onClose, }) {
     useEffect(() => {

package/dist/apps/meet/_icons.d.ts

@@ -21,3 +21,7 @@ export declare const FlipIcon: () => React.JSX.Element;
  * needs to light up (`currentColor`) the same way every other control icon here does. */
 export declare const BatonIcon: () => React.JSX.Element;
 export declare const OverflowIcon: () => React.JSX.Element;
+/** A plain "X" - removing a participant from the call (the participants drawer's "Remove" row button). Drawn with
+ * strokes rather than a filled Material path, same "simple primitives, not a recalled path" reasoning as
+ * `BatonIcon`. */
+export declare const RemoveIcon: () => React.JSX.Element;

package/dist/apps/meet/_icons.js

@@ -22,3 +22,7 @@ export const FlipIcon = () => (_jsx(Icon, { path: "M15 21h2v-2h-2v2zm4-12h2V7h-2
  * needs to light up (`currentColor`) the same way every other control icon here does. */
 export const BatonIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", className: "w-6 h-6", fill: "currentColor", "aria-hidden": "true", focusable: "false", children: _jsxs("g", { transform: "rotate(45 12 12)", children: [_jsx("rect", { x: "5", y: "10.5", width: "13", height: "3", rx: "1.5" }), _jsx("circle", { cx: "19", cy: "12", r: "3" })] }) }));
 export const OverflowIcon = () => _jsx(Icon, { path: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" });
+/** A plain "X" - removing a participant from the call (the participants drawer's "Remove" row button). Drawn with
+ * strokes rather than a filled Material path, same "simple primitives, not a recalled path" reasoning as
+ * `BatonIcon`. */
+export const RemoveIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", className: "w-6 h-6", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }), _jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })] }));

package/dist/apps/shared/relay/AudioPlayer.d.ts

@@ -1,5 +1,8 @@
+import type { RelayReceiveDiagnostics } from "../webrtc/types.js";
 import { type Frame } from "./frames.js";
 import type { AudioContextLike, RelayEnv } from "./relayEnv.js";
+/** The playback half of `RelayReceiveDiagnostics.audio`. */
+export type AudioPlaybackStats = Pick<RelayReceiveDiagnostics["audio"], "playedMs" | "silentMs" | "gaps" | "gapMs" | "droppedLate" | "bufferedMs">;
 export declare const PLAYBACK_SAMPLE_RATE = 48000;
 /** How far ahead of the clock the first packet after a start or an underrun is scheduled. It is the jitter buffer:
  * packets arriving up to this late (relative to their neighbours) still play in order without a gap. */
@@ -38,8 +41,14 @@ export declare class AudioPlayer {
     private decoder;
     private nextTime;
     private readonly timestamps;
+    private readonly played;
+    private gaps;
+    private gapSeconds;
+    private droppedLate;
     /** `destination` is the node whose stream the peer's `MediaStream` carries. */
     constructor(env: RelayEnv, ctx: AudioContextLike, destination: unknown);
+    /** What playback has done so far - see `RelayReceiveDiagnostics`. */
+    stats(): AudioPlaybackStats;
     /** Feeds one reassembled audio frame (one Opus packet). */
     push(frame: Frame): void;
     close(): void;

package/dist/apps/shared/relay/AudioPlayer.js

@@ -1,9 +1,6 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
 import { TimestampUnwrapper } from "./frames.js";
 import { safeClose } from "./senderCommon.js";
+import { SilenceMeter } from "./SilenceMeter.js";
 export const PLAYBACK_SAMPLE_RATE = 48000;
 /** How far ahead of the clock the first packet after a start or an underrun is scheduled. It is the jitter buffer:
  * packets arriving up to this late (relative to their neighbours) still play in order without a gap. */
@@ -43,11 +40,27 @@ export class AudioPlayer {
         this.destination = destination;
         this.nextTime = 0;
         this.timestamps = new TimestampUnwrapper();
+        this.played = new SilenceMeter();
+        this.gaps = 0;
+        this.gapSeconds = 0;
+        this.droppedLate = 0;
+    }
+    /** What playback has done so far - see `RelayReceiveDiagnostics`. */
+    stats() {
+        return {
+            playedMs: this.played.totalMs,
+            silentMs: this.played.silentMs,
+            gaps: this.gaps,
+            gapMs: this.gapSeconds * 1000,
+            droppedLate: this.droppedLate,
+            bufferedMs: Math.max(0, this.nextTime - this.ctx.currentTime) * 1000,
+        };
     }
     /** Feeds one reassembled audio frame (one Opus packet). */
     push(frame) {
         const decoder = this.decoder ?? this.createDecoder();
         if (!decoder || decoder.decodeQueueSize > AUDIO_MAX_DECODE_QUEUE) {
+            this.droppedLate += 1;
             return;
         }
         try {
@@ -91,6 +104,7 @@ export class AudioPlayer {
         try {
             const now = this.ctx.currentTime;
             if (this.nextTime - now > MAX_AHEAD_SECONDS) {
+                this.droppedLate += 1;
                 return;
             }
             const buffer = this.ctx.createBuffer(1, data.numberOfFrames, data.sampleRate);
@@ -118,6 +132,12 @@ export class AudioPlayer {
                 source.onended = () => source.disconnect();
             }
             source.start(start);
+            this.played.feed(pcm, data.sampleRate);
+            if (start > this.nextTime && this.nextTime > 0) {
+                // Playback ran dry: everything between the end of the last block and this one is silence.
+                this.gaps += 1;
+                this.gapSeconds += start - this.nextTime;
+            }
             this.nextTime = start + buffer.duration;
         }
         catch {

package/dist/apps/shared/relay/AudioSender.d.ts

@@ -1,3 +1,4 @@
+import type { RelaySendDiagnostics } from "../webrtc/types.js";
 import { type SenderDeps } from "./senderCommon.js";
 export declare const AUDIO_SAMPLE_RATE = 48000;
 /** Frames per `ScriptProcessorNode` callback: about 43 ms, a compromise between latency and how often the main
@@ -35,7 +36,14 @@ export declare class AudioSender {
     private encoder;
     private baseMs;
     private samples;
+    /** Diagnostics, cumulative across capture sessions: what the capture path delivered (and how much of it was
+     * silent), the wall-clock time it was attached for, and what the encoder had to skip. */
+    private readonly captured;
+    private wallMs;
+    private encoderSkippedSamples;
     constructor(deps: SenderDeps);
+    /** The capture half of `RelaySendDiagnostics`. */
+    captureStats(): Pick<RelaySendDiagnostics, "audioCapturedMs" | "audioCaptureWallMs" | "audioSilentMs" | "audioEncoderSkippedMs">;
     setActive(active: boolean): void;
     setTrack(track: MediaStreamTrack | null): void;
     /** Brings the capture graph in line with (`active`, `track`): torn down when either is missing, rebuilt when

package/dist/apps/shared/relay/AudioSender.js

@@ -1,10 +1,7 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
 import { resumeAudioContext } from "./audioResume.js";
 import { KIND_AUDIO } from "./frames.js";
 import { safeClose } from "./senderCommon.js";
+import { SilenceMeter } from "./SilenceMeter.js";
 export const AUDIO_SAMPLE_RATE = 48000;
 /** Frames per `ScriptProcessorNode` callback: about 43 ms, a compromise between latency and how often the main
  * thread is interrupted. */
@@ -36,6 +33,20 @@ export class AudioSender {
         this.attachedTrack = null;
         this.baseMs = 0;
         this.samples = 0;
+        /** Diagnostics, cumulative across capture sessions: what the capture path delivered (and how much of it was
+         * silent), the wall-clock time it was attached for, and what the encoder had to skip. */
+        this.captured = new SilenceMeter();
+        this.wallMs = 0;
+        this.encoderSkippedSamples = 0;
+    }
+    /** The capture half of `RelaySendDiagnostics`. */
+    captureStats() {
+        return {
+            audioCapturedMs: this.captured.totalMs,
+            audioCaptureWallMs: this.wallMs + (this.attachedTrack ? this.deps.env.now() - this.baseMs : 0),
+            audioSilentMs: this.captured.silentMs,
+            audioEncoderSkippedMs: (this.encoderSkippedSamples * 1000) / AUDIO_SAMPLE_RATE,
+        };
     }
     setActive(active) {
         this.active = active;
@@ -84,6 +95,9 @@ export class AudioSender {
         }
     }
     detach() {
+        if (this.attachedTrack) {
+            this.wallMs += this.deps.env.now() - this.baseMs;
+        }
         this.attachedTrack = null;
         this.stopResume?.();
         this.stopResume = undefined;
@@ -109,11 +123,13 @@ export class AudioSender {
         const samples = input.length;
         const timestampUs = Math.round((this.samples * 1000000) / AUDIO_SAMPLE_RATE);
         this.samples += samples;
+        this.captured.feed(input, AUDIO_SAMPLE_RATE);
         if (!this.deps.canSend()) {
             return;
         }
         const encoder = this.encoder ?? this.createEncoder();
         if (!encoder || encoder.encodeQueueSize > AUDIO_MAX_ENCODE_QUEUE) {
+            this.encoderSkippedSamples += samples;
             return;
         }
         let audio;

package/dist/apps/shared/relay/RelayClient.d.ts

@@ -23,11 +23,16 @@ export declare const RELAY_BACKOFF_MAX_MS = 15000;
 /** How long a socket may take to become `ready` before it is abandoned and retried (a server that accepts the
  * upgrade but never answers the hello would otherwise hang the tier forever). */
 export declare const RELAY_HANDSHAKE_TIMEOUT_MS = 10000;
+/** How often a ready socket pings the server to time the round trip - often enough that the diagnostics panel (which
+ * polls every few seconds) always has a recent sample, rarely enough to cost nothing next to the media. */
+export declare const RELAY_PING_INTERVAL_MS = 2000;
 export interface RelayClientOptions {
     url: string;
     peerId: string;
     createSocket: (url: string) => RelaySocket;
     random: () => number;
+    /** A monotonic millisecond clock for timing pings. Defaults to `Date.now`. */
+    now?: () => number;
     /** Called with the sender's peer id (as stamped by the server) and the original payload. */
     onMedia: (peerId: string, payload: Uint8Array) => void;
 }
@@ -42,10 +47,15 @@ export declare class RelayClient {
     private wanted;
     private reconnectTimer;
     private handshakeTimer;
+    private pingTimer;
+    private lastRoundTripMs;
     private readonly decoder;
     constructor(options: RelayClientOptions);
     /** True once the server has answered the hello on the current socket, i.e. media may be sent. */
     get ready(): boolean;
+    /** The most recent ping's round trip to the server, in milliseconds - `undefined` until the first pong on the
+     * current socket (and for good on a server too old to answer pings). */
+    get roundTripMs(): number | undefined;
     /** The largest message `sendMedia()` will send: what the server announced in `ready` (validated and clamped), or
      * `MAX_MESSAGE_BYTES` before that, without one, and again after every disconnect until the next `ready`. The
      * frame fragmenter sizes its fragments from this. */
@@ -62,6 +72,12 @@ export declare class RelayClient {
     private openSocket;
     private handleMessage;
     private handleText;
+    /** Times the round trip of the ping that `t` came back from. Ignored before ready, for a `t` that isn't a number,
+     * or one from the future (nothing this client sent). */
+    private handlePong;
+    private now;
+    /** Stops pinging and forgets the last round trip - it described a socket that is gone. */
+    private stopPinging;
     private handleClose;
     /** Detaches and closes the current socket, if any, so its late events can't reach this client. */
     private detach;