@rapidmx/meet-plugin 0.14.0 → 0.15.0

package/apps/meet/_CallControls.tsx

@@ -14,12 +14,24 @@
  * camera is sending. Both are driven by `LocalMedia` (`apps/shared/media/useLocalMedia.ts`). The microphone button
  * is disabled (`micLocked`) while talking-stick mode is on and this participant isn't the current holder - see
  * `_CallView.tsx`'s doc comment.
+ *
+ * ## The "…" menu
+ *
+ * Sits between the grid/focus toggle and Leave, a catch-all for controls that don't need a dedicated button of
+ * their own: "Diagnostics" (`onOpenDiagnostics`) and "Settings" (`onOpenSettings`, host-only) each open their own
+ * persistent window/modal in `_CallView.tsx` and close this menu; "Connection method" is a four-way
+ * `menuitemradio` group (`TransportMode` - see `MeshConnectionManager.setTransportMode()`'s own doc comment)
+ * forcing how *this tab's* media reaches everyone else, independent of what anyone else has chosen; "Hide self"/
+ * "Show self" (`selfHidden`/`onToggleSelfHidden`) is the only way to bring the local tile back once hidden from
+ * grid view, where there's no tile left to offer its own "show" control - see `_CallView.tsx`'s doc comment on
+ * where the local tile appears. Otherwise an ordinary menu of this bar's own shape (`openMenu`, closes on
+ * Escape/outside click like every other one here).
  */
 import React, { useEffect, useRef, useState } from "react";
 import { filtersActive } from "../shared/media/filters/filterTypes.js";
 import type { ScreenTransformState } from "../shared/media/filters/ScreenTransform.js";
 import type { LocalMedia, MediaKind } from "../shared/media/useLocalMedia.js";
-import { REACTION_EMOJIS, type MeshParticipant } from "../shared/webrtc/types.js";
+import { REACTION_EMOJIS, type MeshParticipant, type TransportMode } from "../shared/webrtc/types.js";
 import EffectsPanel from "./_EffectsPanel.js";
 import {
     ChevronUpIcon,
@@ -32,12 +44,21 @@ import {
     LeaveIcon,
     MicIcon,
     MicOffIcon,
+    OverflowIcon,
     RotateIcon,
     ScreenShareIcon,
     VideoIcon,
     VideoOffIcon,
 } from "./_icons.js";
 
+/** The "…" menu's "Connection method" options, in display order - see `TransportMode`'s own doc comment. */
+const TRANSPORT_MODE_OPTIONS: { mode: TransportMode; label: string }[] = [
+    { mode: "auto", label: "Auto" },
+    { mode: "p2p", label: "P2P" },
+    { mode: "relay", label: "Relay" },
+    { mode: "websocket", label: "WebSocket Relay" },
+];
+
 export type CallViewMode = "grid" | "focus";
 
 export interface CallControlsProps {
@@ -62,10 +83,20 @@ export interface CallControlsProps {
      * doc comment on talking-stick mode. Disables the microphone toggle (not the device-picker chevron, which
      * doesn't change whether anyone can hear them) rather than merely nudging it, unlike a `mute-request`. */
     micLocked?: boolean;
+    /** Whether the "…" menu's "Settings" item is offered at all - see this module's doc comment on the menu. */
+    isHost: boolean;
+    transportMode: TransportMode;
+    onSetTransportMode: (mode: TransportMode) => void;
+    onOpenDiagnostics: () => void;
+    onOpenSettings: () => void;
+    /** Whether the local tile is currently hidden - the "…" menu's "Hide self"/"Show self" item reflects and
+     * toggles this; see `_CallView.tsx`'s doc comment on where the local tile appears. */
+    selfHidden: boolean;
+    onToggleSelfHidden: () => void;
     onLeave: () => void;
 }
 
-type OpenMenu = MediaKind | "emoji" | "effects" | null;
+type OpenMenu = MediaKind | "emoji" | "effects" | "overflow" | null;
 
 const BUTTON = "flex items-center justify-center h-12 rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80";
 const NEUTRAL = "bg-[#3c4043] text-white hover:bg-[#4b4f53]";
@@ -102,6 +133,13 @@ export default function CallControls({
     viewMode,
     onToggleViewMode,
     micLocked,
+    isHost,
+    transportMode,
+    onSetTransportMode,
+    onOpenDiagnostics,
+    onOpenSettings,
+    selfHidden,
+    onToggleSelfHidden,
     onLeave,
 }: CallControlsProps) {
     const [openMenu, setOpenMenu] = useState<OpenMenu>(null);
@@ -307,6 +345,85 @@ export default function CallControls({
                 {viewMode === "grid" ? <FocusIcon /> : <GridIcon />}
             </button>
 
+            <div className="sm:relative">
+                <button
+                    type="button"
+                    className={`${BUTTON} w-12 ${openMenu === "overflow" ? ACTIVE : NEUTRAL}`}
+                    aria-label="More options"
+                    aria-haspopup="menu"
+                    aria-expanded={openMenu === "overflow"}
+                    onClick={() => toggleMenu("overflow")}
+                >
+                    <OverflowIcon />
+                </button>
+                {openMenu === "overflow" && (
+                    <div
+                        role="menu"
+                        aria-label="More options"
+                        className="absolute bottom-full mb-3 right-0 w-56 max-w-[calc(100vw-1rem)] rounded-2xl bg-[#2b2d30] text-white shadow-xl py-1 text-sm"
+                    >
+                        <button
+                            type="button"
+                            role="menuitem"
+                            className="w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
+                            onClick={() => {
+                                onOpenDiagnostics();
+                                setOpenMenu(null);
+                            }}
+                        >
+                            Diagnostics
+                        </button>
+                        <button
+                            type="button"
+                            role="menuitem"
+                            className="w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
+                            onClick={() => {
+                                onToggleSelfHidden();
+                                setOpenMenu(null);
+                            }}
+                        >
+                            {selfHidden ? "Show self" : "Hide self"}
+                        </button>
+                        <div className="my-1 border-t border-white/10" />
+                        <p className="px-3 pt-1 pb-0.5 text-xs font-semibold uppercase tracking-wide text-white/60">Connection method</p>
+                        {TRANSPORT_MODE_OPTIONS.map(({ mode, label }) => (
+                            <button
+                                key={mode}
+                                type="button"
+                                role="menuitemradio"
+                                aria-checked={transportMode === mode}
+                                className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
+                                onClick={() => {
+                                    onSetTransportMode(mode);
+                                    setOpenMenu(null);
+                                }}
+                            >
+                                <span className="w-4 text-[#8ab4f8]" aria-hidden="true">
+                                    {transportMode === mode ? "✓" : ""}
+                                </span>
+                                {label}
+                            </button>
+                        ))}
+                        {isHost && (
+                            <>
+                                <div className="my-1 border-t border-white/10" />
+                                <button
+                                    type="button"
+                                    role="menuitem"
+                                    className="w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
+                                    onClick={() => {
+                                        onOpenSettings();
+                                        setOpenMenu(null);
+                                    }}
+                                >
+                                    Settings
+                                </button>
+                            </>
+                        )}
+                    </div>
+                )}
+            </div>
+
             <button type="button" className={`${BUTTON} w-16 bg-[#d93025] text-white hover:bg-[#b3261e]`} aria-label="Leave call" onClick={() => onLeave()}>
                 <LeaveIcon />
             </button>

package/apps/meet/_CallView.tsx

@@ -15,10 +15,24 @@
  *
  * 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
  *
@@ -51,18 +65,17 @@
  * `MeshConnectionManager`'s own doc comment on why that needs no extra code - the header chip then says nobody has
  * the floor, until the host picks someone (or themselves) again.
  *
- * ## The navbar's "…" menu
+ * ## Diagnostics, connection method and settings
  *
- * A catch-all for controls that don't need a dedicated button of their own: "Diagnostics" opens
- * `_DiagnosticsWindow.tsx` (a persistent, draggable window - not a popover like everything else here, since
- * troubleshooting a connection is something a participant wants to keep open while they poke at the rest of the
- * call, not something that closes the moment they click elsewhere); "Connection method" is a four-way choice
- * (`TransportMode` - see `MeshConnectionManager.setTransportMode()`'s own doc comment) for forcing how *this tab's*
- * media reaches everyone else, independent of what anyone else has chosen; "Settings" (host-only) opens
- * `_SettingsModal.tsx`, which used to be the participants drawer's own header (mute-on-join, the join password, the
- * waiting-room toggle) - moved out because none of those are about *who* is in the call, which is what the drawer
- * is for. The menu itself closes on Escape, a click outside it, or picking an item; the windows it opens do not
- * close along with it.
+ * All three are opened from `_CallControls.tsx`'s own "…" menu (its doc comment covers the menu itself) via
+ * callback props, but owned here: `diagnosticsOpen` renders `_DiagnosticsWindow.tsx` (a persistent, draggable
+ * window - not a popover like the menus in the control bar, since troubleshooting a connection is something a
+ * participant wants to keep open while they poke at the rest of the call, not something that closes the moment
+ * they click elsewhere); `transportMode`/`handleSetTransportMode()` forces how *this tab's* media reaches everyone
+ * else (`TransportMode` - see `MeshConnectionManager.setTransportMode()`'s own doc comment), independent of what
+ * anyone else has chosen; `settingsOpen` renders `_SettingsModal.tsx`, which used to be the participants drawer's
+ * own header (mute-on-join, the join password, the waiting-room toggle) - moved out because none of those are
+ * about *who* is in the call, which is what the drawer is for.
  */
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { playRaisedHandChime } from "../shared/media/chime.js";
@@ -77,7 +90,7 @@ import type { MeshParticipant, RelayTransportLike, TransportMode } from "../shar
 import { createRelayTransport } from "../shared/relay/RelayTransport.js";
 import { GuestSignalingClient } from "../shared/push/GuestSignalingClient.js";
 import CallControls, { type CallViewMode } from "./_CallControls.js";
-import { BatonIcon, OverflowIcon } from "./_icons.js";
+import { BatonIcon } from "./_icons.js";
 import {
     admitParticipant,
     denyParticipant,
@@ -139,14 +152,6 @@ const MAX_REACTIONS = 12;
 /** How often the host's drawer refreshes its own waiting-room list while open. */
 const DEFAULT_WAITING_POLL_MS = 3_000;
 
-/** The "…" menu's "Connection method" options, in display order - see `TransportMode`'s own doc comment. */
-const TRANSPORT_MODE_OPTIONS: { mode: TransportMode; label: string }[] = [
-    { mode: "auto", label: "Auto" },
-    { mode: "p2p", label: "P2P" },
-    { mode: "relay", label: "Relay" },
-    { mode: "websocket", label: "WebSocket Relay" },
-];
-
 interface Reaction {
     id: number;
     emoji: string;
@@ -229,13 +234,12 @@ export default function CallView({
     const [waitingParticipants, setWaitingParticipants] = useState<WaitingParticipant[]>([]);
     const [talkingStickActive, setTalkingStickActive] = useState(false);
     const [talkingStickHolder, setTalkingStickHolder] = useState<string | undefined>(undefined);
-    const [overflowMenuOpen, setOverflowMenuOpen] = useState(false);
     const [diagnosticsOpen, setDiagnosticsOpen] = useState(false);
     const [settingsOpen, setSettingsOpen] = useState(false);
     const [transportMode, setTransportModeState] = useState<TransportMode>("auto");
+    const [selfHidden, setSelfHidden] = useState(false);
 
     const managerRef = useRef<MeshConnectionManager | null>(null);
-    const overflowMenuRef = useRef<HTMLDivElement>(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
      * actually shown and sent is `screenTransformRef`'s output (`screenStream` state) - see `handleToggleShare()`. */
@@ -409,31 +413,6 @@ export default function CallView({
         }
     }, [talkingStickActive, selfHasTalkingStick]);
 
-    // The "…" menu closes on Escape or a press anywhere outside it - matching `_CallControls.tsx`'s own menus -
-    // but never the windows it opens (diagnostics, settings), which stay open independently (see this module's
-    // doc comment on the "…" menu).
-    useEffect(() => {
-        if (!overflowMenuOpen) {
-            return;
-        }
-        const onPointerDown = (event: PointerEvent) => {
-            if (!overflowMenuRef.current?.contains(event.target as Node)) {
-                setOverflowMenuOpen(false);
-            }
-        };
-        const onKeyDown = (event: KeyboardEvent) => {
-            if (event.key === "Escape") {
-                setOverflowMenuOpen(false);
-            }
-        };
-        document.addEventListener("pointerdown", onPointerDown);
-        document.addEventListener("keydown", onKeyDown);
-        return () => {
-            document.removeEventListener("pointerdown", onPointerDown);
-            document.removeEventListener("keydown", onKeyDown);
-        };
-    }, [overflowMenuOpen]);
-
     useEffect(() => {
         if (!presenterUid) {
             setActiveSpeakerUid((prev) => pickActiveSpeaker(levels, prev));
@@ -505,6 +484,17 @@ export default function CallView({
         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: string) {
         if (managerRef.current?.sendReaction(emoji)) {
             showReaction(emoji, "You");
@@ -573,12 +563,11 @@ export default function CallView({
     }
 
     /** Forces this tab's own transport policy - see `MeshConnectionManager.setTransportMode()`'s doc comment for
-     * what each mode actually does, and this module's doc comment on the "…" menu for why this is a personal,
-     * per-tab choice rather than a meeting setting. */
+     * what each mode actually does, and `_CallControls.tsx`'s doc comment on its "…" menu for why this is a
+     * personal, per-tab choice rather than a meeting setting. */
     function handleSetTransportMode(mode: TransportMode) {
         setTransportModeState(mode);
         managerRef.current?.setTransportMode(mode);
-        setOverflowMenuOpen(false);
     }
 
     /** Admits one pending request - optimistically removed from the drawer's own list (the next poll would drop it
@@ -673,7 +662,7 @@ export default function CallView({
         />
     );
 
-    const selfTile = (className?: string) => (
+    const selfTile = (className?: string, canHide?: boolean) => (
         <ParticipantTile
             name={selfName}
             stream={media.videoStream}
@@ -685,6 +674,7 @@ export default function CallView({
             // 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"}
+            onHideSelf={canHide ? handleHideSelf : undefined}
             className={className}
         />
     );
@@ -694,7 +684,8 @@ export default function CallView({
 
     let stage: React.ReactNode;
     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 ? (
             <ParticipantTile name={selfName} stream={screenStream} isLocal contain isFocused className="h-full" />
         ) : (
@@ -722,8 +713,11 @@ export default function CallView({
             </div>
         );
     } else {
+        // 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 = (
             <div className="h-full grid gap-2 auto-rows-fr [grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))]">
+                {!selfHidden && selfTile("h-full", true)}
                 {participants.map((p) => remoteTile(p, "h-full"))}
             </div>
         );
@@ -768,70 +762,6 @@ export default function CallView({
                         >
                             {participants.length + 1}
                         </button>
-                        <div className="relative" ref={overflowMenuRef}>
-                            <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 ${overflowMenuOpen ? "bg-[#4b4f53]" : "bg-[#3c4043] hover:bg-[#4b4f53]"}`}
-                                aria-label="More options"
-                                aria-haspopup="menu"
-                                aria-expanded={overflowMenuOpen}
-                                onClick={() => setOverflowMenuOpen((prev) => !prev)}
-                            >
-                                <OverflowIcon />
-                            </button>
-                            {overflowMenuOpen && (
-                                <div
-                                    role="menu"
-                                    aria-label="More options"
-                                    className="absolute top-full right-0 mt-2 w-56 rounded-2xl bg-[#2b2d30] text-white shadow-xl py-1 text-sm"
-                                >
-                                    <button
-                                        type="button"
-                                        role="menuitem"
-                                        className="w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
-                                        onClick={() => {
-                                            setDiagnosticsOpen(true);
-                                            setOverflowMenuOpen(false);
-                                        }}
-                                    >
-                                        Diagnostics
-                                    </button>
-                                    <div className="my-1 border-t border-white/10" />
-                                    <p className="px-3 pt-1 pb-0.5 text-xs font-semibold uppercase tracking-wide text-white/60">Connection method</p>
-                                    {TRANSPORT_MODE_OPTIONS.map(({ mode, label }) => (
-                                        <button
-                                            key={mode}
-                                            type="button"
-                                            role="menuitemradio"
-                                            aria-checked={transportMode === mode}
-                                            className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
-                                            onClick={() => handleSetTransportMode(mode)}
-                                        >
-                                            <span className="w-4 text-[#8ab4f8]" aria-hidden="true">
-                                                {transportMode === mode ? "✓" : ""}
-                                            </span>
-                                            {label}
-                                        </button>
-                                    ))}
-                                    {isHost && (
-                                        <>
-                                            <div className="my-1 border-t border-white/10" />
-                                            <button
-                                                type="button"
-                                                role="menuitem"
-                                                className="w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
-                                                onClick={() => {
-                                                    setSettingsOpen(true);
-                                                    setOverflowMenuOpen(false);
-                                                }}
-                                            >
-                                                Settings
-                                            </button>
-                                        </>
-                                    )}
-                                </div>
-                            )}
-                        </div>
                     </div>
                 </header>
                 {connectError && (
@@ -870,16 +800,23 @@ export default function CallView({
                         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}
                     />
                 </footer>
 
-                {!alone && (
+                {!alone && !selfHidden && showFocusLayout && (
                     <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"
                     >
-                        {selfTile("h-full")}
+                        {selfTile("h-full", true)}
                     </div>
                 )}
 

package/apps/meet/_DiagnosticsPanel.tsx

@@ -10,12 +10,14 @@
  * (`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";
+import type { MeshParticipant, RelayDiagnostics } from "../shared/webrtc/types.js";
 import { TRANSPORT_BADGES } from "./_ParticipantTile.js";
 
 export interface DiagnosticsPanelProps {
@@ -64,6 +66,59 @@ function StreamRow({ kind, packetsLost, jitter, bytesSent, bytesReceived }: { ki
     );
 }
 
+/** `part` as a whole-number percentage of `whole`, or "—" when there is no whole yet. */
+function percent(part: number, whole: number): string {
+    return whole > 0 ? `${Math.round((part / whole) * 100)}%` : "—";
+}
+
+function plural(count: number, noun: string): string {
+    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 }: { relay: RelayDiagnostics }) {
+    const { send, receive } = relay;
+    const notSent = send.audio.framesDropped + send.video.framesDropped;
+    return (
+        <>
+            {send.audioCaptureWallMs > 0 && (
+                <div className={ROW}>
+                    <span className={LABEL}>Your mic capture</span>
+                    <span>
+                        {percent(send.audioCapturedMs, send.audioCaptureWallMs)} of real time · {percent(send.audioSilentMs, send.audioCapturedMs)} silent
+                        {send.audioEncoderSkippedMs > 0 && ` · ${formatMs(send.audioEncoderSkippedMs / 1000)} skipped`}
+                    </span>
+                </div>
+            )}
+            {notSent > 0 && (
+                <div className={ROW}>
+                    <span className={LABEL}>Not sent</span>
+                    <span>
+                        {send.audio.framesDropped} audio · {send.video.framesDropped} video frames
+                    </span>
+                </div>
+            )}
+            {receive && (
+                <div className={ROW}>
+                    <span className={LABEL}>Playback</span>
+                    <span>
+                        {`${percent(receive.audio.silentMs, receive.audio.playedMs)} silent · ${plural(receive.audio.gaps, "gap")} ` +
+                            `(${formatMs(receive.audio.gapMs / 1000)}) · ${formatMs(receive.audio.bufferedMs / 1000)} buffered`}
+                    </span>
+                </div>
+            )}
+            {receive && receive.audio.droppedLate > 0 && (
+                <div className={ROW}>
+                    <span className={LABEL}>Dropped late</span>
+                    <span>{plural(receive.audio.droppedLate, "packet")}</span>
+                </div>
+            )}
+        </>
+    );
+}
+
 export default function DiagnosticsPanel({ selfName, micOn, cameraOn, participants }: DiagnosticsPanelProps) {
     return (
         <div className="text-sm">
@@ -93,16 +148,19 @@ export default function DiagnosticsPanel({ selfName, micOn, cameraOn, participan
                             <span className={LABEL}>Connection</span>
                             <span title={badge?.title}>{badge?.label ?? (p.transport === "connecting" ? "Connecting…" : "Direct")}</span>
                         </div>
-                        {p.transport === "websocket" || !p.diagnostics ? (
-                            <p className={`${LABEL} py-0.5`}>Not available{p.transport !== "websocket" && " yet"}.</p>
+                        {!p.diagnostics ? (
+                            <p className={`${LABEL} py-0.5`}>Not available yet.</p>
                         ) : (
                             <>
                                 <div className={ROW}>
-                                    <span className={LABEL}>Round-trip time</span>
+                                    <span className={LABEL} title={p.diagnostics.relay ? "From this browser to the relay server and back" : undefined}>
+                                        {p.diagnostics.relay ? "Round-trip to server" : "Round-trip time"}
+                                    </span>
                                     <span>{formatMs(p.diagnostics.roundTripTimeSeconds)}</span>
                                 </div>
                                 <StreamRow kind="Audio" {...p.diagnostics.audio} />
                                 <StreamRow kind="Video" {...p.diagnostics.video} />
+                                {p.diagnostics.relay && <RelayRows relay={p.diagnostics.relay} />}
                             </>
                         )}
                     </div>