@rapidmx/meet-plugin 0.9.3 → 0.11.0

package/apps/meet/_CallView.tsx

@@ -33,12 +33,30 @@
  * auto-detected active speaker (silently ignored while presenting, so it never fights the presenter for the main
  * slot); else, in focus mode with nobody yet speaking, the first other participant - so focus mode never shows an
  * empty main slot once someone else has joined.
+ *
+ * ## Talking stick mode
+ *
+ * A host-only navbar toggle (`handleToggleTalkingStick()`) that, once on, lets at most one participant's microphone
+ * be unmuted at a time - the host assigns who from the participants drawer (`handleGiveTalkingStick()`), everyone
+ * else sees a header chip naming who currently holds it. Purely an in-call runtime state signaled peer-to-peer over
+ * the mesh (`MeshConnectionManager.setTalkingStick()`/`"talking-stick-changed"`), the same shape as `mute-request`/
+ * `kicked`: no `VideoMeeting` field, no backend route, and only as "enforced" as a cooperating client makes it (see
+ * `types.ts`'s `SignalMessage` doc comment on why the signaling layer has no host identity to check against). What
+ * *is* new here versus `mute-request`'s one-time nudge: becoming or ceasing to be the holder force-toggles this
+ * tab's own mic to match (`selfHasTalkingStick`'s effect, below), and the mic button itself is disabled
+ * (`micLocked`, passed to `CallControls`) the whole time a non-holder would otherwise be able to tap it straight
+ * back on - a real restriction for as long as this tab's own UI is the one in front of the participant, not just a
+ * suggestion. Turning the mode off touches nobody's mic state, matching every other host toggle's "never
+ * retroactive" posture. A holder who leaves the call is not specially reassigned - see
+ * `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.
  */
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { playRaisedHandChime } from "../shared/media/chime.js";
 import { pickActiveSpeaker } from "../shared/media/activeSpeaker.js";
 import { startLevelMeter, type LevelMeterHandle } from "../shared/media/levelMeter.js";
 import { requestDisplayMedia, stopStream } from "../shared/media/deviceMedia.js";
+import { NO_SCREEN_TRANSFORM, ScreenTransformProcessor, rotateClockwise, type ScreenTransformState } from "../shared/media/filters/ScreenTransform.js";
 import type { LocalMedia } from "../shared/media/useLocalMedia.js";
 import { createBrowserPeerConnection } from "../shared/webrtc/realPeerConnection.js";
 import { MeshConnectionManager } from "../shared/webrtc/MeshConnectionManager.js";
@@ -46,7 +64,18 @@ import type { MeshParticipant, RelayTransportLike } from "../shared/webrtc/types
 import { createRelayTransport } from "../shared/relay/RelayTransport.js";
 import { GuestSignalingClient } from "../shared/push/GuestSignalingClient.js";
 import CallControls, { type CallViewMode } from "./_CallControls.js";
+import {
+    admitParticipant,
+    denyParticipant,
+    kickParticipant,
+    listWaitingParticipants,
+    setForceMuteOnJoin as apiSetForceMuteOnJoin,
+    setMeetingPassword,
+    setWaitingRoomEnabled as apiSetWaitingRoomEnabled,
+    type WaitingParticipant,
+} from "./_meetApi.js";
 import ParticipantTile from "./_ParticipantTile.js";
+import ParticipantsDrawer from "./_ParticipantsDrawer.js";
 
 export interface CallViewProps {
     channel: string;
@@ -61,15 +90,37 @@ export interface CallViewProps {
     /** Whether the server offers the WebSocket media relay, the last-resort path for a participant neither a direct
      * connection nor the TURN server can reach - `VideoMeetingJoinResult.relayEnabled`. Off when absent. */
     relayEnabled?: boolean;
+    /** The meeting's host account uid (`PublicVideoMeeting.hostUid`) - this client's only source of a "host"
+     * identity, purely for deciding which controls to show (see `BaseVideoMeetingRoute`'s class doc comment on why
+     * this is a client-side-only check, not a server-enforced one for every moderation action). Absent when the
+     * server couldn't resolve one, in which case nobody sees host controls. */
+    hostUid?: string;
+    /** `PublicVideoMeeting.forceMuteOnJoin` as of this call's own `join()` - the starting value for the host's
+     * toggle in the participants drawer, which this view then owns and keeps current itself (see
+     * `handleToggleForceMuteOnJoin()`). Does not update if changed elsewhere while this view is mounted - there is
+     * no signal for that today, matching every other meeting-settings field's lack of live sync. */
+    initialForceMuteOnJoin?: boolean;
+    /** `PublicVideoMeeting.hasPassword` as of this call's own `join()` - the starting value for the host's password
+     * section in the participants drawer, same "owned and kept current by this view" shape as
+     * `initialForceMuteOnJoin`. */
+    initialHasPassword?: boolean;
+    /** `PublicVideoMeeting.waitingRoomEnabled` as of this call's own `join()` - the starting value for the host's
+     * waiting-room toggle, same "owned and kept current by this view" shape as `initialForceMuteOnJoin`. */
+    initialWaitingRoomEnabled?: boolean;
     /** The camera and microphone, owned by the page (`[token].tsx`) - the lobby's tracks carried into the call. */
     media: LocalMedia;
-    onLeave: () => void;
+    /** Called once the participant leaves, for any reason. `reason` is set only when the call ended without the
+     * participant's own action - currently, being kicked by the host - so the caller can show a distinct message
+     * instead of the ordinary "you left" one; omitted for an ordinary voluntary leave. */
+    onLeave: (reason?: string) => void;
 }
 
 /** How long a reaction floats on screen. */
 const REACTION_MS = 4_000;
 /** The most reactions shown at once - a burst beyond this drops the oldest. */
 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;
 
 interface Reaction {
     id: number;
@@ -104,7 +155,31 @@ export function newPeerId(selfUid: string): string {
     return `${selfUid}~${globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)}`;
 }
 
-export default function CallView({ channel, token, selfUid, selfName, meetingTitle, iceServers, relayEnabled, media, onLeave }: CallViewProps) {
+/** The real, server-enforced account uid behind a participant's tab-scoped `MeshParticipant.uid` (`newPeerId()`'s
+ * `<account uid>~<random>` shape) - what the kick route's ACL grant is actually keyed by, unlike the tab-scoped id
+ * this view otherwise addresses a specific tab with. Neither a real account uid nor a minted guest uid (see
+ * `GUEST_UID_PREFIX`/`mintGuestToken()` on the backend) can itself contain "~", so the last one found is always
+ * exactly this suffix's own separator. */
+export function accountUidOf(peerUid: string): string {
+    const i = peerUid.lastIndexOf("~");
+    return i === -1 ? peerUid : peerUid.slice(0, i);
+}
+
+export default function CallView({
+    channel,
+    token,
+    selfUid,
+    selfName,
+    meetingTitle,
+    iceServers,
+    relayEnabled,
+    hostUid,
+    initialForceMuteOnJoin,
+    initialHasPassword,
+    initialWaitingRoomEnabled,
+    media,
+    onLeave,
+}: CallViewProps) {
     const [peerId] = useState(() => newPeerId(selfUid));
     const [connectError, setConnectError] = useState<string | null>(null);
     const [participants, setParticipants] = useState<MeshParticipant[]>([]);
@@ -112,6 +187,7 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     const [levels, setLevels] = useState<Record<string, number>>({});
     const [presenterUid, setPresenterUid] = useState<string | undefined>(undefined);
     const [screenStream, setScreenStream] = useState<MediaStream | null>(null);
+    const [screenTransform, setScreenTransform] = useState<ScreenTransformState>(NO_SCREEN_TRANSFORM);
     const [handRaised, setHandRaised] = useState(false);
     const [viewMode, setViewMode] = useState<CallViewMode>("grid");
     const [pinnedUid, setPinnedUid] = useState<string | undefined>(undefined);
@@ -121,12 +197,29 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     const [audioBlocked, setAudioBlocked] = useState(false);
     const [audioNonce, setAudioNonce] = useState(0);
     const [signalingReady, setSignalingReady] = useState(false);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [forceMuteOnJoin, setForceMuteOnJoinState] = useState(!!initialForceMuteOnJoin);
+    const [hasPassword, setHasPassword] = useState(!!initialHasPassword);
+    const [waitingRoomEnabled, setWaitingRoomEnabledState] = useState(!!initialWaitingRoomEnabled);
+    const [waitingParticipants, setWaitingParticipants] = useState<WaitingParticipant[]>([]);
+    const [talkingStickActive, setTalkingStickActive] = useState(false);
+    const [talkingStickHolder, setTalkingStickHolder] = useState<string | undefined>(undefined);
 
     const managerRef = useRef<MeshConnectionManager | null>(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()`. */
     const screenStreamRef = useRef<MediaStream | null>(null);
+    const screenTransformRef = useRef<ScreenTransformProcessor | null>(null);
     const levelMetersRef = useRef<Record<string, LevelMeterHandle>>({});
     const reactionSeqRef = useRef(0);
     const reactionTimersRef = useRef(new Set<ReturnType<typeof setTimeout>>());
+    /** The latest `media`, for the mesh-event handler below - that effect runs once at mount (see its own comment),
+     * so it would otherwise see only the mic state/toggle function from that first render. */
+    const mediaRef = useRef(media);
+    useEffect(() => {
+        mediaRef.current = media;
+    }, [media]);
     const isPresenting = !!screenStream;
 
     const showReaction = useCallback((emoji: string, name: string) => {
@@ -198,6 +291,18 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
                         stopLocalPresentation(false);
                     }
                     return;
+                case "mute-requested":
+                    if (mediaRef.current.micOn) {
+                        void mediaRef.current.toggleMic();
+                    }
+                    return;
+                case "kicked":
+                    onLeave("The host removed you from this call.");
+                    return;
+                case "talking-stick-changed":
+                    setTalkingStickActive(event.active);
+                    setTalkingStickHolder(event.holder);
+                    return;
             }
         });
 
@@ -234,6 +339,7 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             // Only the screen capture is this view's to stop - the camera and microphone belong to the page, which
             // releases them when the participant leaves.
             stopStream(screenStreamRef.current);
+            screenTransformRef.current?.stop();
             for (const timer of timers) {
                 clearTimeout(timer);
             }
@@ -254,6 +360,25 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
         managerRef.current?.setLocalState({ audioOn: media.micOn, videoOn: media.cameraOn || isPresenting, handRaised });
     }, [media.micOn, media.cameraOn, isPresenting, handRaised]);
 
+    // Talking-stick mode forces exactly one microphone on at a time: whoever just became the holder (including the
+    // host, on activation) is unmuted; everyone else is muted. Unlike `mute-requested`'s one-time nudge, this is
+    // paired with disabling the mic button itself (`micLocked`, passed to `CallControls` below) while it applies,
+    // so it isn't merely a suggestion - though still cooperative at the signaling layer, like every other
+    // moderation feature here (see `MeshConnectionManager`'s doc comment). Turning the mode off touches nobody's
+    // mic - states are left exactly as they are, the same "never retroactive" posture as every other host toggle.
+    const selfHasTalkingStick = talkingStickActive && talkingStickHolder === peerId;
+    const micLocked = talkingStickActive && !selfHasTalkingStick;
+    useEffect(() => {
+        if (!talkingStickActive) {
+            return;
+        }
+        if (selfHasTalkingStick && !mediaRef.current.micOn) {
+            void mediaRef.current.toggleMic();
+        } else if (!selfHasTalkingStick && mediaRef.current.micOn) {
+            void mediaRef.current.toggleMic();
+        }
+    }, [talkingStickActive, selfHasTalkingStick]);
+
     useEffect(() => {
         if (!presenterUid) {
             setActiveSpeakerUid((prev) => pickActiveSpeaker(levels, prev));
@@ -266,8 +391,12 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
         }
         stopStream(screenStreamRef.current);
         screenStreamRef.current = null;
-        // The sync effect above swaps the camera back in as the outgoing video track.
+        screenTransformRef.current?.stop();
+        screenTransformRef.current = null;
+        // The sync effect above swaps the camera back in as the outgoing video track. The rotation/flip is reset
+        // for the next share - each share starts from the capture the browser hands back, not the last one's fix.
         setScreenStream(null);
+        setScreenTransform(NO_SCREEN_TRANSFORM);
     }
 
     async function handleToggleShare() {
@@ -286,8 +415,35 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             return;
         }
         screenStreamRef.current = result.value;
-        setScreenStream(result.value);
-        result.value.getVideoTracks()[0].onended = () => stopLocalPresentation(true);
+        const rawTrack = result.value.getVideoTracks()[0];
+        rawTrack.onended = () => stopLocalPresentation(true);
+        try {
+            // Runs the capture through the rotate/flip processor before anyone (presenter included) sees it - see
+            // ScreenTransform.ts's doc comment on why window capture sometimes needs this correction.
+            const processor = new ScreenTransformProcessor({ source: rawTrack, state: screenTransform });
+            screenTransformRef.current = processor;
+            setScreenStream(new MediaStream([processor.track]));
+        } catch {
+            // This browser can't draw the correction - share the raw capture rather than not sharing at all; the
+            // rotate/flip buttons simply won't do anything (screenTransformRef stays null).
+            setScreenStream(result.value);
+        }
+    }
+
+    function handleRotateScreen() {
+        setScreenTransform((prev) => {
+            const next = rotateClockwise(prev);
+            screenTransformRef.current?.setState(next);
+            return next;
+        });
+    }
+
+    function handleFlipScreen() {
+        setScreenTransform((prev) => {
+            const next = { ...prev, flipped: !prev.flipped };
+            screenTransformRef.current?.setState(next);
+            return next;
+        });
     }
 
     function handleToggleHand() {
@@ -304,6 +460,77 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
         setPinnedUid((prev) => (prev === uid ? undefined : uid));
     }
 
+    /** Asks `peerUid`'s participant to mute - the host-only button in the participants drawer calls this
+     * directly, with no confirmation (unlike removing someone, muting is easily undone by the participant
+     * themselves). */
+    function handleMuteParticipant(peerUid: string) {
+        managerRef.current?.sendMuteRequest(peerUid);
+    }
+
+    /** Removes `peerUid`'s participant from the call: the cooperative signal (immediate, so a cooperating client
+     * leaves without waiting on the network round trip below) and the enforced server-side revoke together - see
+     * `kickParticipant()`'s own doc comment for why both matter. The REST call's failure is swallowed rather than
+     * surfaced: the host already asked them to leave, and there is no useful recovery action to offer from here
+     * for what is almost always a transient network issue. */
+    function handleKickParticipant(peerUid: string) {
+        managerRef.current?.sendKick(peerUid);
+        kickParticipant(channel, accountUidOf(peerUid)).catch(() => undefined);
+    }
+
+    /** Flips the host's "mute new participants on join" setting: applied optimistically (the toggle itself is the
+     * only feedback this small a control needs) and reverted if the save fails, so the drawer never keeps claiming
+     * a setting that isn't actually persisted. Takes effect for whoever joins next - never retroactive, see
+     * `setForceMuteOnJoin()`'s own doc comment. */
+    function handleToggleForceMuteOnJoin() {
+        const next = !forceMuteOnJoin;
+        setForceMuteOnJoinState(next);
+        apiSetForceMuteOnJoin(channel, next).catch(() => setForceMuteOnJoinState(!next));
+    }
+
+    /** Sets, changes, or removes (`password: null`) the host's join password - unlike the force-mute toggle, this
+     * is not applied optimistically: the drawer's own `PasswordSection` awaits the result itself (clearing its
+     * input on success, showing an inline error on failure), so there is nothing here to revert. `hasPassword`
+     * updates only once the save actually succeeds. */
+    async function handleSetPassword(password: string | null): Promise<void> {
+        await setMeetingPassword(channel, password);
+        setHasPassword(!!password);
+    }
+
+    /** Flips the host's waiting-room setting - same optimistic-and-revert shape as `handleToggleForceMuteOnJoin()`,
+     * for the same reason. Takes effect for whoever joins next; nobody already admitted is retroactively gated. */
+    function handleToggleWaitingRoomEnabled() {
+        const next = !waitingRoomEnabled;
+        setWaitingRoomEnabledState(next);
+        apiSetWaitingRoomEnabled(channel, next).catch(() => setWaitingRoomEnabledState(!next));
+    }
+
+    /** Starts or stops talking-stick mode - host-only, see this module's doc comment. Starting makes the host the
+     * initial holder; stopping clears the holder too, leaving mic states exactly as they are rather than
+     * retroactively unmuting anyone. */
+    function handleToggleTalkingStick() {
+        managerRef.current?.setTalkingStick(!talkingStickActive, talkingStickActive ? undefined : peerId);
+    }
+
+    /** Hands the talking stick to `uid` (a participant's `MeshParticipant.uid`, or this tab's own `peerId` for the
+     * host taking it back) - host-only, called from the participants drawer's per-row "Give stick" button. */
+    function handleGiveTalkingStick(uid: string) {
+        managerRef.current?.setTalkingStick(true, uid);
+    }
+
+    /** Admits one pending request - optimistically removed from the drawer's own list (the next poll would drop it
+     * anyway, once the requester's own next poll completes their join; removing it here just avoids the visible
+     * delay). Re-added if the save itself fails, so a failure doesn't silently lose the request from the list. */
+    function handleAdmitParticipant(uid: string) {
+        setWaitingParticipants((prev) => prev.filter((p) => p.uid !== uid));
+        admitParticipant(channel, uid).catch(() => void listWaitingParticipants(channel).then(setWaitingParticipants, () => undefined));
+    }
+
+    /** Denies one pending request - same optimistic-removal shape as `handleAdmitParticipant()`. */
+    function handleDenyParticipant(uid: string) {
+        setWaitingParticipants((prev) => prev.filter((p) => p.uid !== uid));
+        denyParticipant(channel, uid).catch(() => void listWaitingParticipants(channel).then(setWaitingParticipants, () => undefined));
+    }
+
     function handleAudioBlocked() {
         setAudioBlocked(true);
     }
@@ -313,6 +540,36 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
         setAudioNonce((prev) => prev + 1);
     }
 
+    // A participant's `uid` is their tab-scoped peer id (`<account uid>~<random>` - see `newPeerId()`), while
+    // `hostUid` is the plain account uid `PublicVideoMeeting.hostUid` names - so telling the host's own tab(s) apart
+    // needs the prefix match, not equality. Purely a client-side check (see `hostUid`'s own doc comment on this
+    // prop): nobody's tab is prevented from claiming it, only from being shown host controls for it.
+    const isHost = !!hostUid && selfUid === hostUid;
+    const isParticipantHost = (uid: string): boolean => !!hostUid && uid.startsWith(`${hostUid}~`);
+
+    // Refreshes the drawer's own waiting-room list while the host has the drawer open - there is no push signal
+    // for a newly filed admission request, so polling is the only way the list stays current without the host
+    // having to close and reopen the drawer. Stops (and the list is dropped) the moment either condition ends.
+    useEffect(() => {
+        if (!isHost || !drawerOpen) {
+            setWaitingParticipants([]);
+            return;
+        }
+        let cancelled = false;
+        const poll = () => {
+            listWaitingParticipants(channel).then((list) => {
+                if (!cancelled) {
+                    setWaitingParticipants(list);
+                }
+            }, () => undefined);
+        };
+        poll();
+        const interval = setInterval(poll, DEFAULT_WAITING_POLL_MS);
+        return () => {
+            cancelled = true;
+            clearInterval(interval);
+        };
+    }, [isHost, drawerOpen, channel]);
     const otherUids = participants.map((p) => p.uid);
     // A pin or an active-speaker pick can name someone who has just left, until the state catches up.
     const stillHere = (uid: string | undefined) => (uid && otherUids.includes(uid) ? uid : undefined);
@@ -322,6 +579,13 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
         : undefined;
     const presenterName = presenterUid ? (presenterUid === peerId ? selfName : (participants.find((p) => p.uid === presenterUid)?.name ?? "Someone")) : undefined;
     const raisedNames = [...(handRaised ? ["You"] : []), ...participants.filter((p) => p.handRaised).map((p) => p.name)];
+    // Absent (not "Someone") once the holder has left the call - see `MeshConnectionManager`'s doc comment on why
+    // nothing reassigns it automatically; the header then says so rather than naming someone no longer here.
+    const talkingStickHolderName = !talkingStickActive
+        ? undefined
+        : selfHasTalkingStick
+          ? "You"
+          : participants.find((p) => p.uid === talkingStickHolder)?.name;
     const alone = participants.length === 0;
     // This participant has no working link yet: the signaling channel is still opening, or there is someone in the call
     // and every connection to them is still being made. Once any one is up (or nobody else is here) it is not shown,
@@ -412,9 +676,31 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
                             ✋ {raisedNames.join(", ")}
                         </span>
                     )}
-                    <span className="px-3 py-1.5 rounded-full bg-[#3c4043] text-sm" aria-label={`${participants.length + 1} participants`}>
+                    {talkingStickActive && (
+                        <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">
+                            🎙️ {talkingStickHolderName ? `${talkingStickHolderName} ${talkingStickHolderName === "You" ? "have" : "has"} the floor` : "Waiting for the host to choose a speaker"}
+                        </span>
+                    )}
+                    {isHost && (
+                        <button
+                            type="button"
+                            className={`px-3 py-1.5 rounded-full text-sm font-medium 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-pressed={talkingStickActive}
+                            onClick={handleToggleTalkingStick}
+                        >
+                            {talkingStickActive ? "End talking stick" : "Talking stick"}
+                        </button>
+                    )}
+                    <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)}
+                    >
                         {participants.length + 1}
-                    </span>
+                    </button>
                 </div>
             </header>
             {connectError && (
@@ -440,14 +726,20 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             <footer className="shrink-0 pt-1 pb-[max(0.75rem,env(safe-area-inset-bottom))]">
                 <CallControls
                     media={media}
+                    selfName={selfName}
+                    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}
                     onLeave={onLeave}
                 />
             </footer>
@@ -482,6 +774,33 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             <div role="status" aria-live="polite" className="sr-only">
                 {announcement}
             </div>
+
+            {drawerOpen && (
+                <ParticipantsDrawer
+                    selfName={selfName}
+                    micOn={media.micOn}
+                    handRaised={handRaised}
+                    participants={participants}
+                    isSelfHost={isHost}
+                    isParticipantHost={isParticipantHost}
+                    onMute={handleMuteParticipant}
+                    onKick={handleKickParticipant}
+                    forceMuteOnJoin={forceMuteOnJoin}
+                    onToggleForceMuteOnJoin={handleToggleForceMuteOnJoin}
+                    hasPassword={hasPassword}
+                    onSetPassword={handleSetPassword}
+                    waitingRoomEnabled={waitingRoomEnabled}
+                    onToggleWaitingRoomEnabled={handleToggleWaitingRoomEnabled}
+                    waitingParticipants={waitingParticipants}
+                    onAdmit={handleAdmitParticipant}
+                    onDeny={handleDenyParticipant}
+                    talkingStickActive={talkingStickActive}
+                    selfPeerId={peerId}
+                    talkingStickHolder={talkingStickHolder}
+                    onGiveTalkingStick={handleGiveTalkingStick}
+                    onClose={() => setDrawerOpen(false)}
+                />
+            )}
         </div>
     );
 }

package/apps/meet/_DiagnosticsPanel.tsx

@@ -0,0 +1,113 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The diagnostics panel, opened from the navbar for troubleshooting a call in progress - this browser's own
+ * capabilities, then each participant's connection: how their media reaches this one (the same badge
+ * `_ParticipantTile.tsx` shows, reused via `TRANSPORT_BADGES` rather than described in different words), and,
+ * once available, round-trip time and each kind's packet loss/jitter/bytes transferred
+ * (`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.
+ */
+import React from "react";
+import type { MeshParticipant } from "../shared/webrtc/types.js";
+import { TRANSPORT_BADGES } from "./_ParticipantTile.js";
+
+export interface DiagnosticsPanelProps {
+    selfName: string;
+    /** Whether the local microphone/camera are actually sending - `LocalMedia.micOn`/`cameraOn`. */
+    micOn: boolean;
+    cameraOn: boolean;
+    participants: MeshParticipant[];
+}
+
+/** This browser's support for what a call needs - checked once, since it cannot change mid-session. */
+function browserCapabilities(): { label: string; supported: boolean }[] {
+    const has = (name: string): boolean => typeof window !== "undefined" && name in window;
+    return [
+        { label: "WebRTC", supported: has("RTCPeerConnection") },
+        { label: "Screen sharing", supported: typeof navigator !== "undefined" && !!navigator.mediaDevices?.getDisplayMedia },
+        { label: "WebCodecs (server relay fallback)", supported: has("VideoEncoder") && has("AudioEncoder") },
+    ];
+}
+
+function formatMs(seconds: number | undefined): string {
+    return seconds === undefined ? "—" : `${Math.round(seconds * 1000)} ms`;
+}
+
+function formatBytes(bytes: number): string {
+    return bytes < 1024 * 1024 ? `${(bytes / 1024).toFixed(1)} KB` : `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+const ROW = "flex justify-between gap-3 py-0.5";
+const LABEL = "text-white/60";
+
+function StreamRow({ kind, packetsLost, jitter, bytesSent, bytesReceived }: { kind: string; packetsLost?: number; jitter?: number; bytesSent?: number; bytesReceived?: number }) {
+    if (packetsLost === undefined && jitter === undefined && bytesSent === undefined && bytesReceived === undefined) {
+        return null;
+    }
+    return (
+        <div className={ROW}>
+            <span className={LABEL}>{kind}</span>
+            <span>
+                {packetsLost !== undefined && `${packetsLost} lost`}
+                {jitter !== undefined && ` · ${formatMs(jitter)} jitter`}
+                {(bytesSent !== undefined || bytesReceived !== undefined) &&
+                    ` · ${[bytesSent !== undefined && `↑${formatBytes(bytesSent)}`, bytesReceived !== undefined && `↓${formatBytes(bytesReceived)}`].filter(Boolean).join(" ")}`}
+            </span>
+        </div>
+    );
+}
+
+export default function DiagnosticsPanel({ selfName, micOn, cameraOn, participants }: DiagnosticsPanelProps) {
+    return (
+        <div className="text-sm">
+            <p className="text-xs font-semibold uppercase tracking-wide text-white/60 mb-1.5">This browser</p>
+            {browserCapabilities().map(({ label, supported }) => (
+                <div key={label} className={ROW}>
+                    <span className={LABEL}>{label}</span>
+                    <span className={supported ? "text-[#8ab4f8]" : "text-[#f2b8b5]"}>{supported ? "Supported" : "Not supported"}</span>
+                </div>
+            ))}
+
+            <p className="text-xs font-semibold uppercase tracking-wide text-white/60 mt-3 mb-1.5">
+                {selfName} <span className="text-white/60">(you)</span>
+            </p>
+            <div className={ROW}>
+                <span className={LABEL}>Sending</span>
+                <span>{[micOn && "audio", cameraOn && "video"].filter(Boolean).join(" + ") || "Nothing"}</span>
+            </div>
+
+            {participants.length === 0 && <p className="text-white/60 mt-3">Nobody else is in the call yet.</p>}
+            {participants.map((p) => {
+                const badge = p.transport !== "connecting" && p.transport !== "p2p" ? TRANSPORT_BADGES[p.transport] : undefined;
+                return (
+                    <div key={p.uid}>
+                        <p className="text-xs font-semibold uppercase tracking-wide text-white/60 mt-3 mb-1.5">{p.name}</p>
+                        <div className={ROW}>
+                            <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>
+                        ) : (
+                            <>
+                                <div className={ROW}>
+                                    <span className={LABEL}>Round-trip time</span>
+                                    <span>{formatMs(p.diagnostics.roundTripTimeSeconds)}</span>
+                                </div>
+                                <StreamRow kind="Audio" {...p.diagnostics.audio} />
+                                <StreamRow kind="Video" {...p.diagnostics.video} />
+                            </>
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

package/apps/meet/_ParticipantTile.tsx

@@ -20,9 +20,17 @@ import type { MediaTransport } from "../shared/webrtc/types.js";
 import { MicOffIcon } 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. */
-const TRANSPORT_BADGES: Partial<Record<MediaTransport, { label: string; title: string }>> = {
+ * (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
+ * slightly different words. */
+export const TRANSPORT_BADGES: Partial<Record<MediaTransport, { label: string; title: string }>> = {
     turn: { label: "Relayed", title: "Connected through the relay server, because a direct connection was not possible." },
+    "turn-tcp": {
+        label: "Relayed (TCP)",
+        title:
+            "Connected through the relay server over TCP, because this network blocks the relay's usual UDP connection too. " +
+            "Audio or video may pause briefly under network strain rather than just glitching - a property of TCP, not a dropped connection.",
+    },
     websocket: {
         label: "Server relay",
         title: "Sent through the server as a last resort, because no other connection was possible. Video is lower quality and sound may lag.",