@rapidmx/meet-plugin 0.14.0 → 0.15.0

package/apps/meet/_ParticipantTile.tsx

@@ -14,10 +14,13 @@
  * 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 React, { useEffect, useRef } from "react";
+ * 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, { useEffect, useRef, useState } from "react";
 import type { MediaTransport } from "../shared/webrtc/types.js";
-import { MicOffIcon } from "./_icons.js";
+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.
@@ -74,6 +77,10 @@ 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;
 }
@@ -94,12 +101,15 @@ export default function ParticipantTile({
     isFocused,
     contain,
     mirrored = true,
+    onHideSelf,
     onClick,
     className,
 }: ParticipantTileProps) {
     const badge = transport ? TRANSPORT_BADGES[transport] : undefined;
     const videoRef = useRef<HTMLVideoElement>(null);
     const showVideo = !!stream && !cameraOff;
+    const [hideMenuOpen, setHideMenuOpen] = useState(false);
+    const hideMenuRef = useRef<HTMLDivElement>(null);
 
     // The `<video>` element only exists while `showVideo`, so its stream is bound whenever it (re)appears too.
     useEffect(() => {
@@ -108,6 +118,30 @@ export default function ParticipantTile({
         }
     }, [stream, showVideo]);
 
+    // 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: PointerEvent) => {
+            if (!hideMenuRef.current?.contains(event.target as Node)) {
+                setHideMenuOpen(false);
+            }
+        };
+        const onKeyDown = (event: KeyboardEvent) => {
+            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 (
         <div
             className={`relative overflow-hidden rounded-xl bg-[#3c4043] flex items-center justify-center min-h-[90px] ${
@@ -142,12 +176,51 @@ export default function ParticipantTile({
                     ✋
                 </span>
             )}
-            {micMuted && (
-                <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">
-                    <span className="w-4 h-4 [&>svg]:w-4 [&>svg]:h-4">
-                        <MicOffIcon />
-                    </span>
-                </span>
+            {(micMuted || onHideSelf) && (
+                <div className="absolute top-2 right-2 flex items-center gap-1">
+                    {micMuted && (
+                        <span className="flex items-center justify-center w-7 h-7 rounded-full bg-black/60 text-white" role="img" aria-label="Muted">
+                            <span className="w-4 h-4 [&>svg]:w-4 [&>svg]:h-4">
+                                <MicOffIcon />
+                            </span>
+                        </span>
+                    )}
+                    {onHideSelf && (
+                        <div className="relative" ref={hideMenuRef}>
+                            <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)}
+                            >
+                                <span className="w-4 h-4 [&>svg]:w-4 [&>svg]:h-4">
+                                    <OverflowIcon />
+                                </span>
+                            </button>
+                            {hideMenuOpen && (
+                                <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"
+                                >
+                                    <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();
+                                        }}
+                                    >
+                                        Hide self
+                                    </button>
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
             )}
             {badge && (
                 <span

package/apps/meet/_ParticipantsDrawer.tsx

@@ -35,7 +35,7 @@ import React, { useEffect } from "react";
 import type { MeshParticipant } from "../shared/webrtc/types.js";
 import type { WaitingParticipant } from "./_meetApi.js";
 import { TRANSPORT_BADGES } from "./_ParticipantTile.js";
-import { MicOffIcon } from "./_icons.js";
+import { BatonIcon, MicOffIcon, RemoveIcon } from "./_icons.js";
 
 export interface ParticipantsDrawerProps {
     selfName: string;
@@ -184,35 +184,38 @@ function Row({
             {canGiveStick && !hasStick && (
                 <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"
+                    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}
                 >
-                    Give stick
+                    <BatonIcon />
                 </button>
             )}
             {canModerate && !micMuted && (
                 <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"
+                    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}
                 >
-                    Mute
+                    <MicOffIcon />
                 </button>
             )}
             {canModerate && (
                 <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"
+                    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?.();
                         }
                     }}
                 >
-                    Remove
+                    <RemoveIcon />
                 </button>
             )}
         </li>

package/apps/meet/_icons.tsx

@@ -78,3 +78,13 @@ export const BatonIcon = () => (
 );
 
 export const OverflowIcon = () => <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 = () => (
+    <svg viewBox="0 0 24 24" className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true" focusable="false">
+        <line x1="6" y1="6" x2="18" y2="18" />
+        <line x1="18" y1="6" x2="6" y2="18" />
+    </svg>
+);

package/apps/shared/relay/AudioPlayer.ts

@@ -2,9 +2,14 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
+import type { RelayReceiveDiagnostics } from "../webrtc/types.js";
 import { TimestampUnwrapper, type Frame } from "./frames.js";
 import type { AudioContextLike, AudioDataLike, DecoderLike, RelayEnv } from "./relayEnv.js";
 import { safeClose } from "./senderCommon.js";
+import { SilenceMeter } from "./SilenceMeter.js";
+
+/** The playback half of `RelayReceiveDiagnostics.audio`. */
+export type AudioPlaybackStats = Pick<RelayReceiveDiagnostics["audio"], "playedMs" | "silentMs" | "gaps" | "gapMs" | "droppedLate" | "bufferedMs">;
 
 export const PLAYBACK_SAMPLE_RATE = 48_000;
 /** How far ahead of the clock the first packet after a start or an underrun is scheduled. It is the jitter buffer:
@@ -42,6 +47,10 @@ export class AudioPlayer {
     private decoder: DecoderLike | undefined;
     private nextTime = 0;
     private readonly timestamps = new TimestampUnwrapper();
+    private readonly played = new SilenceMeter();
+    private gaps = 0;
+    private gapSeconds = 0;
+    private droppedLate = 0;
 
     /** `destination` is the node whose stream the peer's `MediaStream` carries. */
     constructor(
@@ -50,10 +59,23 @@ export class AudioPlayer {
         private readonly destination: unknown,
     ) {}
 
+    /** What playback has done so far - see `RelayReceiveDiagnostics`. */
+    stats(): AudioPlaybackStats {
+        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: Frame): void {
         const decoder = this.decoder ?? this.createDecoder();
         if (!decoder || decoder.decodeQueueSize > AUDIO_MAX_DECODE_QUEUE) {
+            this.droppedLate += 1;
             return;
         }
         try {
@@ -101,6 +123,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);
@@ -127,6 +150,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 {
             // A block the browser will not take (an odd sample rate, a closed context) is dropped like a lost packet.

package/apps/shared/relay/AudioSender.ts

@@ -2,6 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
+import type { RelaySendDiagnostics } from "../webrtc/types.js";
 import { resumeAudioContext } from "./audioResume.js";
 import { KIND_AUDIO } from "./frames.js";
 import type {
@@ -14,6 +15,7 @@ import type {
     ScriptProcessorLike,
 } from "./relayEnv.js";
 import { safeClose, type SenderDeps } from "./senderCommon.js";
+import { SilenceMeter } from "./SilenceMeter.js";
 
 export const AUDIO_SAMPLE_RATE = 48_000;
 /** Frames per `ScriptProcessorNode` callback: about 43 ms, a compromise between latency and how often the main
@@ -53,8 +55,24 @@ export class AudioSender {
     private baseMs = 0;
     private 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. */
+    private readonly captured = new SilenceMeter();
+    private wallMs = 0;
+    private encoderSkippedSamples = 0;
+
     constructor(private readonly deps: SenderDeps) {}
 
+    /** The capture half of `RelaySendDiagnostics`. */
+    captureStats(): Pick<RelaySendDiagnostics, "audioCapturedMs" | "audioCaptureWallMs" | "audioSilentMs" | "audioEncoderSkippedMs"> {
+        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: boolean): void {
         this.active = active;
         this.sync();
@@ -105,6 +123,9 @@ export class AudioSender {
     }
 
     private detach(): void {
+        if (this.attachedTrack) {
+            this.wallMs += this.deps.env.now() - this.baseMs;
+        }
         this.attachedTrack = null;
         this.stopResume?.();
         this.stopResume = undefined;
@@ -132,11 +153,13 @@ export class AudioSender {
         const samples = input.length;
         const timestampUs = Math.round((this.samples * 1_000_000) / 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: AudioDataLike | undefined;

package/apps/shared/relay/RelayClient.ts

@@ -13,6 +13,10 @@
  * older one, which accepts `MAX_MESSAGE_BYTES`). Nothing else may be sent before `ready`.
  * - `{"op":"want","peers":[...]}` REPLACES the set of senders this socket receives from (the server accepts at most
  * `MAX_WANTED_PEERS`). It has to be re-sent after every reconnect, because the server's set dies with the socket.
+ * - `{"op":"ping","t":<this client's clock>}`, every `RELAY_PING_INTERVAL_MS` once ready, is answered with
+ * `{"op":"pong","t":<the same>}`, which times the round trip to the server (`roundTripMs`) - over the same socket as
+ * the media, so it includes whatever the media has queued ahead of it. An older server ignores the ping and the
+ * round trip stays unknown.
  * - A binary message from the client is an opaque payload of at most `maxMessageBytes`. The server forwards it to
  * every socket that wants this sender as `[1 byte N][N bytes UTF-8 sender peer id][payload]`, stamping the sender
  * itself so a peer cannot speak as another.
@@ -48,6 +52,9 @@ export const RELAY_BACKOFF_MAX_MS = 15_000;
 /** 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 const RELAY_HANDSHAKE_TIMEOUT_MS = 10_000;
+/** 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 const RELAY_PING_INTERVAL_MS = 2_000;
 
 const SOCKET_OPEN = 1;
 
@@ -56,6 +63,8 @@ export interface RelayClientOptions {
     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;
 }
@@ -82,6 +91,8 @@ export class RelayClient {
     private wanted: string[] = [];
     private reconnectTimer: ReturnType<typeof setTimeout> | undefined;
     private handshakeTimer: ReturnType<typeof setTimeout> | undefined;
+    private pingTimer: ReturnType<typeof setInterval> | undefined;
+    private lastRoundTripMs: number | undefined;
     private readonly decoder = new TextDecoder();
 
     constructor(private readonly options: RelayClientOptions) {}
@@ -91,6 +102,12 @@ export class RelayClient {
         return this.isReady;
     }
 
+    /** 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 {
+        return this.lastRoundTripMs;
+    }
+
     /** 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. */
@@ -148,6 +165,7 @@ export class RelayClient {
         clearTimeout(this.reconnectTimer);
         clearTimeout(this.handshakeTimer);
         this.reconnectTimer = this.handshakeTimer = undefined;
+        this.stopPinging();
         this.detach();
     }
 
@@ -200,7 +218,15 @@ export class RelayClient {
         } catch {
             return;
         }
-        if (!message || typeof message !== "object" || (message as { op?: unknown }).op !== "ready" || this.isReady) {
+        if (!message || typeof message !== "object") {
+            return;
+        }
+        const op = (message as { op?: unknown }).op;
+        if (op === "pong") {
+            this.handlePong((message as { t?: unknown }).t);
+            return;
+        }
+        if (op !== "ready" || this.isReady) {
             return;
         }
         this.isReady = true;
@@ -213,6 +239,30 @@ export class RelayClient {
         this.handshakeTimer = undefined;
         // The server's wanted set is per socket, so it starts empty on every (re)connect.
         this.sendText({ op: "want", peers: this.wanted });
+        this.pingTimer = setInterval(() => this.sendText({ op: "ping", t: this.now() }), RELAY_PING_INTERVAL_MS);
+    }
+
+    /** 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(t: unknown): void {
+        if (!this.isReady || typeof t !== "number") {
+            return;
+        }
+        const roundTrip = this.now() - t;
+        if (roundTrip >= 0) {
+            this.lastRoundTripMs = roundTrip;
+        }
+    }
+
+    private now(): number {
+        return (this.options.now ?? Date.now)();
+    }
+
+    /** Stops pinging and forgets the last round trip - it described a socket that is gone. */
+    private stopPinging(): void {
+        clearInterval(this.pingTimer);
+        this.pingTimer = undefined;
+        this.lastRoundTripMs = undefined;
     }
 
     private handleClose(socket: RelaySocket): void {
@@ -220,6 +270,7 @@ export class RelayClient {
             return;
         }
         this.isReady = false;
+        this.stopPinging();
         // The next server might be a different one (a rolling upgrade), so the limit is learned afresh.
         this.messageLimit = MAX_MESSAGE_BYTES;
         clearTimeout(this.handshakeTimer);

package/apps/shared/relay/RelayReceiver.ts

@@ -2,11 +2,38 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
+import type { RelayReceiveDiagnostics, RelayReceiveStats } from "../webrtc/types.js";
 import { AudioPlayer } from "./AudioPlayer.js";
-import { decodeFragment, FrameReassembler, KIND_AUDIO } from "./frames.js";
+import { decodeFragment, type Frame, FrameReassembler, KIND_AUDIO, seqIsNewer } from "./frames.js";
 import type { AudioContextLike, RelayEnv } from "./relayEnv.js";
 import { VideoPlayer } from "./VideoPlayer.js";
 
+const SEQ_MODULUS = 0x10000;
+/** A jump in sequence numbers bigger than this is taken for the sender restarting its counter, not for that many
+ * lost frames. Ten seconds of 20 ms audio packets - far more than any real outage the stream would survive. */
+const MAX_COUNTED_SEQ_GAP = 500;
+
+/** Counts one kind's frames as they complete, and the ones the sequence numbers say never did. */
+class ReceiveCounter {
+    readonly stats: RelayReceiveStats = { framesReceived: 0, framesLost: 0, bytesReceived: 0 };
+    private lastSeq: number | undefined;
+
+    fragment(bytes: number): void {
+        this.stats.bytesReceived += bytes;
+    }
+
+    frame(frame: Frame): void {
+        this.stats.framesReceived += 1;
+        if (this.lastSeq !== undefined && seqIsNewer(frame.seq, this.lastSeq)) {
+            const missing = ((frame.seq - this.lastSeq + SEQ_MODULUS) % SEQ_MODULUS) - 1;
+            if (missing <= MAX_COUNTED_SEQ_GAP) {
+                this.stats.framesLost += missing;
+            }
+        }
+        this.lastSeq = frame.seq;
+    }
+}
+
 /** The canvas is sized to the first decoded picture; until then it is this size. */
 const INITIAL_CANVAS_WIDTH = 320;
 const INITIAL_CANVAS_HEIGHT = 240;
@@ -25,6 +52,8 @@ export class RelayReceiver {
     readonly stream: MediaStream;
     private readonly audioFrames = new FrameReassembler();
     private readonly videoFrames = new FrameReassembler();
+    private readonly audioCounter = new ReceiveCounter();
+    private readonly videoCounter = new ReceiveCounter();
     private readonly audio: AudioPlayer;
     private readonly video: VideoPlayer | undefined;
 
@@ -50,10 +79,14 @@ export class RelayReceiver {
         if (!fragment) {
             return;
         }
-        const frame = (fragment.kind === KIND_AUDIO ? this.audioFrames : this.videoFrames).push(fragment);
+        const isAudio = fragment.kind === KIND_AUDIO;
+        const counter = isAudio ? this.audioCounter : this.videoCounter;
+        counter.fragment(payload.length);
+        const frame = (isAudio ? this.audioFrames : this.videoFrames).push(fragment);
         if (!frame) {
             return;
         }
+        counter.frame(frame);
         if (frame.kind === KIND_AUDIO) {
             this.audio.push(frame);
         } else {
@@ -61,6 +94,14 @@ export class RelayReceiver {
         }
     }
 
+    /** A snapshot of what has been received from this peer - see `RelayReceiveDiagnostics`. */
+    diagnostics(): RelayReceiveDiagnostics {
+        return {
+            audio: { ...this.audioCounter.stats, ...this.audio.stats() },
+            video: { ...this.videoCounter.stats },
+        };
+    }
+
     /** Releases the decoders and ends the stream's tracks. */
     close(): void {
         this.audio.close();

package/apps/shared/relay/RelaySender.ts

@@ -2,6 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
+import type { RelaySendDiagnostics, RelaySendStats } from "../webrtc/types.js";
 import { AudioSender } from "./AudioSender.js";
 import { DEFAULT_MESSAGE_BYTES, fragmentFrame, type FrameKind, KIND_AUDIO, KIND_VIDEO } from "./frames.js";
 import type { RelayEnv } from "./relayEnv.js";
@@ -15,6 +16,11 @@ const SEQ_MODULUS = 0x10000;
  * otherwise treat the restarted stream as older than what it has already seen. */
 export class FramePublisher {
     private readonly seqs: Record<FrameKind, number> = { [KIND_AUDIO]: 0, [KIND_VIDEO]: 0 };
+    /** What happened to each kind's frames - for the diagnostics panel. */
+    readonly stats: Record<FrameKind, RelaySendStats> = {
+        [KIND_AUDIO]: { framesSent: 0, framesDropped: 0, bytesSent: 0 },
+        [KIND_VIDEO]: { framesSent: 0, framesDropped: 0, bytesSent: 0 },
+    };
 
     /** `send` returns whether one message was accepted by the socket. */
     /** `maxMessageBytes` is the largest message the socket may send right now (it changes when the server's `ready`
@@ -29,15 +35,20 @@ export class FramePublisher {
     publish: PublishFrame = (kind, keyFrame, data, timestampMs) => {
         const seq = this.seqs[kind];
         this.seqs[kind] = (seq + 1) % SEQ_MODULUS;
+        const stats = this.stats[kind];
         const fragments = fragmentFrame(kind, keyFrame, seq, timestampMs, data, this.maxMessageBytes());
         if (fragments.length === 0) {
+            stats.framesDropped += 1;
             return false;
         }
         for (const fragment of fragments) {
             if (!this.send(fragment)) {
+                stats.framesDropped += 1;
                 return false;
             }
+            stats.bytesSent += fragment.length;
         }
+        stats.framesSent += 1;
         return true;
     };
 }
@@ -52,15 +63,26 @@ export interface RelaySenderOptions {
 
 /** The publishing half of the relay: the two capture paths plus the frame numbering they share. */
 export class RelaySender {
+    private readonly publisher: FramePublisher;
     private readonly audio: AudioSender;
     private readonly video: VideoSender;
 
     constructor(options: RelaySenderOptions) {
-        const deps = { env: options.env, publish: new FramePublisher(options.send, options.maxMessageBytes).publish, canSend: options.canSend };
+        this.publisher = new FramePublisher(options.send, options.maxMessageBytes);
+        const deps = { env: options.env, publish: this.publisher.publish, canSend: options.canSend };
         this.audio = new AudioSender(deps);
         this.video = new VideoSender(deps);
     }
 
+    /** A snapshot of the sending counters - see `RelaySendDiagnostics`. */
+    diagnostics(): RelaySendDiagnostics {
+        return {
+            ...this.audio.captureStats(),
+            audio: { ...this.publisher.stats[KIND_AUDIO] },
+            video: { ...this.publisher.stats[KIND_VIDEO] },
+        };
+    }
+
     /** Starts or stops encoding whatever tracks are set. Stopping releases the encoders and audio nodes. */
     setActive(active: boolean): void {
         this.audio.setActive(active);

package/apps/shared/relay/RelayTransport.ts

@@ -17,6 +17,7 @@
  * negotiation, because both ends are this same code.
  */
 import { apiOrigin } from "@rapidmx/web-client/lib/util/api.js";
+import type { RelayDiagnostics } from "../webrtc/types.js";
 import { PLAYBACK_SAMPLE_RATE } from "./AudioPlayer.js";
 import { resumeAudioContext } from "./audioResume.js";
 import { RelayClient } from "./RelayClient.js";
@@ -39,6 +40,9 @@ export interface RelayTransport {
     /** Same semantics as `MeshConnectionManager.setLocalTrack`: null = send nothing for that kind. Safe to call
      * before or after `setSending`. */
     setLocalTrack(kind: "audio" | "video", track: MediaStreamTrack | null): void;
+    /** The sending counters (shared by every peer) plus what has been received from `peerId`, for the diagnostics
+     * panel - cumulative, so a caller wanting a rate keeps the previous sample. */
+    diagnostics(peerId: string): RelayDiagnostics;
     /** Closes the socket, all coders, streams and timers. Idempotent. */
     close(): void;
 }
@@ -68,6 +72,16 @@ const UNSUPPORTED_TRANSPORT: RelayTransport = {
     stopReceivingFrom: () => undefined,
     setSending: () => undefined,
     setLocalTrack: () => undefined,
+    diagnostics: () => ({
+        send: {
+            audioCapturedMs: 0,
+            audioCaptureWallMs: 0,
+            audioSilentMs: 0,
+            audioEncoderSkippedMs: 0,
+            audio: { framesSent: 0, framesDropped: 0, bytesSent: 0 },
+            video: { framesSent: 0, framesDropped: 0, bytesSent: 0 },
+        },
+    }),
     close: () => undefined,
 };
 
@@ -90,6 +104,7 @@ class WebSocketRelayTransport implements RelayTransport {
             peerId,
             createSocket: (target) => env.createSocket(target),
             random: () => env.random(),
+            now: () => env.now(),
             onMedia: (sender, payload) => this.receivers.get(sender)?.handleMedia(payload),
         });
         this.sender = new RelaySender({
@@ -140,6 +155,10 @@ class WebSocketRelayTransport implements RelayTransport {
         }
     }
 
+    diagnostics(peerId: string): RelayDiagnostics {
+        return { roundTripMs: this.client.roundTripMs, send: this.sender.diagnostics(), receive: this.receivers.get(peerId)?.diagnostics() };
+    }
+
     close(): void {
         if (this.closed) {
             return;