@rapidmx/meet-plugin 0.10.0 → 0.12.0

package/apps/meet/_CallControls.tsx

@@ -9,9 +9,17 @@
  * screen, reactions, raise hand, grid/focus and leave. The effects button opens the video filter picker
  * (`_EffectsPanel.tsx`) and lights up while any filter is on.
  *
+ * The diagnostics button is the one exception to "opens near its own button": its panel is `fixed` to the
+ * viewport's top-left corner rather than anchored above the button, since it reads better as a HUD-style overlay
+ * sitting over the call than as a dropdown tucked into the bottom control bar. The outside-click/Escape handling
+ * (`barRef`) still closes it the same way, since it's still a DOM descendant of the bar - only its visual position
+ * moved, not its open/close wiring.
+ *
  * The microphone button shows a live level while it is unmuted - bars that move with the sound the microphone is
  * picking up, so a participant can see their audio is being sent - and the camera button shows a green dot while a
- * camera is sending. Both are driven by `LocalMedia` (`apps/shared/media/useLocalMedia.ts`).
+ * 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.
  */
 import React, { useEffect, useRef, useState } from "react";
 import { filtersActive } from "../shared/media/filters/filterTypes.js";
@@ -57,6 +65,10 @@ export interface CallControlsProps {
     onReaction: (emoji: string) => void;
     viewMode: CallViewMode;
     onToggleViewMode: () => void;
+    /** True while talking-stick mode is on and this participant doesn't currently hold it - see `_CallView.tsx`'s
+     * 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;
     onLeave: () => void;
 }
 
@@ -97,6 +109,7 @@ export default function CallControls({
     onReaction,
     viewMode,
     onToggleViewMode,
+    micLocked,
     onLeave,
 }: CallControlsProps) {
     const [openMenu, setOpenMenu] = useState<OpenMenu>(null);
@@ -145,9 +158,11 @@ export default function CallControls({
                 </button>
                 <button
                     type="button"
-                    className={`${BUTTON} min-w-14 gap-1.5 px-3 rounded-l-none ${media.micOn ? NEUTRAL : ALERT}`}
+                    className={`${BUTTON} min-w-14 gap-1.5 px-3 rounded-l-none ${media.micOn ? NEUTRAL : ALERT} disabled:opacity-50 disabled:cursor-not-allowed`}
                     aria-label={media.micOn ? "Mute microphone" : "Unmute microphone"}
                     aria-pressed={!media.micOn}
+                    disabled={micLocked}
+                    title={micLocked ? "Only the current talking-stick holder can unmute." : undefined}
                     onClick={() => void media.toggleMic()}
                 >
                     {media.micOn && <LevelBars level={media.audioLevel} />}
@@ -313,7 +328,7 @@ export default function CallControls({
                     <div
                         role="dialog"
                         aria-label="Call diagnostics"
-                        className="absolute bottom-full mb-3 right-0 w-80 max-w-[calc(100vw-1rem)] max-h-[60vh] overflow-y-auto p-3 rounded-2xl bg-[#2b2d30] text-white shadow-xl"
+                        className="fixed z-30 top-3 left-3 w-80 max-w-[calc(100vw-1rem)] max-h-[70vh] overflow-y-auto p-3 rounded-2xl bg-[#2b2d30]/95 text-white shadow-xl"
                     >
                         <DiagnosticsPanel selfName={selfName} micOn={media.micOn} cameraOn={media.cameraOn} participants={participants} />
                     </div>

package/apps/meet/_CallView.tsx

@@ -33,6 +33,23 @@
  * 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";
@@ -185,6 +202,8 @@ export default function CallView({
     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
@@ -280,6 +299,10 @@ export default function CallView({
                 case "kicked":
                     onLeave("The host removed you from this call.");
                     return;
+                case "talking-stick-changed":
+                    setTalkingStickActive(event.active);
+                    setTalkingStickHolder(event.holder);
+                    return;
             }
         });
 
@@ -337,6 +360,25 @@ export default function CallView({
         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));
@@ -462,6 +504,19 @@ export default function CallView({
         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. */
@@ -524,6 +579,13 @@ export default function CallView({
         : 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,
@@ -604,97 +666,115 @@ export default function CallView({
     }
 
     return (
-        <div className="fixed inset-0 z-50 flex flex-col bg-[#202124] text-white overflow-hidden">
+        <div className="fixed inset-0 z-50 flex bg-[#202124] text-white overflow-hidden">
             <style>{`@keyframes meet-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { opacity: 1; transform: translateY(-4vh) scale(1); } 100% { transform: translateY(-45vh) scale(1); opacity: 0; } }`}</style>
-            <header className="shrink-0 flex items-center justify-between gap-3 px-4 py-3">
-                <h1 className="min-w-0 truncate text-base font-medium">{meetingTitle}</h1>
-                <div className="flex items-center gap-2 shrink-0">
-                    {raisedNames.length > 0 && (
-                        <span className="max-w-[45vw] truncate px-3 py-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-sm font-medium" data-testid="raised-hands">
-                            ✋ {raisedNames.join(", ")}
-                        </span>
-                    )}
+            <div className="relative flex-1 min-w-0 flex flex-col overflow-hidden">
+                <header className="shrink-0 flex items-center justify-between gap-3 px-4 py-3">
+                    <h1 className="min-w-0 truncate text-base font-medium">{meetingTitle}</h1>
+                    <div className="flex items-center gap-2 shrink-0">
+                        {raisedNames.length > 0 && (
+                            <span className="max-w-[45vw] truncate px-3 py-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-sm font-medium" data-testid="raised-hands">
+                                ✋ {raisedNames.join(", ")}
+                            </span>
+                        )}
+                        {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}
+                        </button>
+                    </div>
+                </header>
+                {connectError && (
+                    <div role="alert" className="shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#601410] text-[#f9dedc] text-sm">
+                        {connectError}
+                    </div>
+                )}
+                {audioBlocked && (
                     <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)}
+                        className="shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#a8c7fa] text-[#062e6f] text-sm font-medium"
+                        onClick={handleResumeAudio}
                     >
-                        {participants.length + 1}
+                        Click here to turn on sound
                     </button>
-                </div>
-            </header>
-            {connectError && (
-                <div role="alert" className="shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#601410] text-[#f9dedc] text-sm">
-                    {connectError}
-                </div>
-            )}
-            {audioBlocked && (
-                <button
-                    type="button"
-                    className="shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#a8c7fa] text-[#062e6f] text-sm font-medium"
-                    onClick={handleResumeAudio}
-                >
-                    Click here to turn on sound
-                </button>
-            )}
-            <main className="relative flex-1 min-h-0 px-3 pb-3">
-                {stage}
-                {presenterName && presenterUid !== peerId && (
-                    <p className="absolute top-2 left-5 px-2 py-0.5 rounded bg-black/60 text-sm">{presenterName} is presenting</p>
                 )}
-            </main>
-            <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"))}
-                    onLeave={onLeave}
-                />
-            </footer>
-
-            {!alone && (
-                <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")}
-                </div>
-            )}
-
-            <div className="pointer-events-none absolute left-4 bottom-28 w-40 h-[45vh]" aria-hidden="true">
-                {reactions.map((reaction) => (
+                <main className="relative flex-1 min-h-0 px-3 pb-3">
+                    {stage}
+                    {presenterName && presenterUid !== peerId && (
+                        <p className="absolute top-2 left-5 px-2 py-0.5 rounded bg-black/60 text-sm">{presenterName} is presenting</p>
+                    )}
+                </main>
+                <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>
+
+                {!alone && (
                     <div
-                        key={reaction.id}
-                        className="absolute bottom-0 flex flex-col items-center"
-                        style={{ left: `${(reaction.id % 4) * 36}px`, animation: `meet-float ${REACTION_MS}ms ease-out forwards` }}
-                        data-testid="reaction"
+                        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"
                     >
-                        <span className="text-4xl leading-none">{reaction.emoji}</span>
-                        <span className="mt-1 px-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-xs">{reaction.name}</span>
+                        {selfTile("h-full")}
                     </div>
-                ))}
-            </div>
+                )}
+
+                <div className="pointer-events-none absolute left-4 bottom-28 w-40 h-[45vh]" aria-hidden="true">
+                    {reactions.map((reaction) => (
+                        <div
+                            key={reaction.id}
+                            className="absolute bottom-0 flex flex-col items-center"
+                            style={{ left: `${(reaction.id % 4) * 36}px`, animation: `meet-float ${REACTION_MS}ms ease-out forwards` }}
+                            data-testid="reaction"
+                        >
+                            <span className="text-4xl leading-none">{reaction.emoji}</span>
+                            <span className="mt-1 px-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-xs">{reaction.name}</span>
+                        </div>
+                    ))}
+                </div>
 
-            {participants.map((p) => {
-                const stream = remoteStreams[p.uid];
-                return stream ? <RemoteAudio key={`${p.uid}:${audioNonce}`} stream={stream} onBlocked={handleAudioBlocked} /> : null;
-            })}
-            <div role="status" aria-live="polite" className="sr-only">
-                {announcement}
+                {participants.map((p) => {
+                    const stream = remoteStreams[p.uid];
+                    return stream ? <RemoteAudio key={`${p.uid}:${audioNonce}`} stream={stream} onBlocked={handleAudioBlocked} /> : null;
+                })}
+                <div role="status" aria-live="polite" className="sr-only">
+                    {announcement}
+                </div>
             </div>
 
             {drawerOpen && (
@@ -716,6 +796,10 @@ export default function CallView({
                     waitingParticipants={waitingParticipants}
                     onAdmit={handleAdmitParticipant}
                     onDeny={handleDenyParticipant}
+                    talkingStickActive={talkingStickActive}
+                    selfPeerId={peerId}
+                    talkingStickHolder={talkingStickHolder}
+                    onGiveTalkingStick={handleGiveTalkingStick}
                     onClose={() => setDrawerOpen(false)}
                 />
             )}

package/apps/meet/_ParticipantsDrawer.tsx

@@ -8,8 +8,10 @@
  * shows on a tile, as plain rows instead (a list reads better than tiles once there's a reason to scan for one
  * name).
  *
- * Closes on Escape, on a click on the backdrop behind it, or its own close button - never on a click inside the
- * drawer itself, matching `_CallControls.tsx`'s menus.
+ * A docked sidebar, not an overlay: `_CallView.tsx` renders it as an ordinary flex sibling of the call's own
+ * content column, which shrinks to make room rather than being covered by a backdrop - meant to stay open and
+ * visible for as long as the participant wants, including while the call continues underneath. Closes on Escape or
+ * its own close button; there is no backdrop to click, on purpose.
  *
  * A "Host" tag marks the host's own row (`isSelfHost`/`isParticipantHost` - see `_CallView.tsx`'s doc comment on
  * `hostUid` for what that identity is and isn't). Only while `isSelfHost` does every *other* row also get a "Mute"
@@ -25,6 +27,11 @@
  * `waitingParticipants`/`onAdmit`/`onDeny`): `_CallView.tsx` polls the list while this drawer is open and the
  * caller is the host (there is no push signal for a newly filed admission request), so it stays current without
  * the host needing to close and reopen the drawer.
+ *
+ * While talking-stick mode is on (`talkingStickActive`), every row - including the host's own - shows a "Give
+ * stick" button, host-only, hidden on whichever row currently holds it (`talkingStickHolder`); everyone (not just
+ * the host) sees a badge on that row instead, same visibility as the "Host" tag. See `_CallView.tsx`'s doc comment
+ * on talking-stick mode for what granting it actually does to the recipient's microphone.
  */
 import React, { useEffect, useState } from "react";
 import type { MeshParticipant } from "../shared/webrtc/types.js";
@@ -63,6 +70,17 @@ export interface ParticipantsDrawerProps {
     waitingParticipants: WaitingParticipant[];
     onAdmit: (uid: string) => void;
     onDeny: (uid: string) => void;
+    /** Whether talking-stick mode is currently on - the host-only navbar toggle's own state (see `_CallView.tsx`'s
+     * doc comment on talking-stick mode). */
+    talkingStickActive: boolean;
+    /** This tab's own peer id - needed only so the self row's "Give stick" button can name itself when the host
+     * wants to take the stick back. */
+    selfPeerId: string;
+    /** Whichever peer id (`selfPeerId`, or a participant's `MeshParticipant.uid`) currently holds the stick;
+     * undefined while `talkingStickActive` is `false`, or (transiently) once its holder has left the call. */
+    talkingStickHolder?: string;
+    /** Hands the stick to `uid` - host-only, see `_CallView.tsx`'s `handleGiveTalkingStick()`. */
+    onGiveTalkingStick: (uid: string) => void;
     onClose: () => void;
 }
 
@@ -187,6 +205,9 @@ function Row({
     canModerate,
     onMute,
     onKick,
+    hasStick,
+    canGiveStick,
+    onGiveStick,
 }: {
     name: string;
     isSelf?: boolean;
@@ -198,6 +219,12 @@ function Row({
     canModerate?: boolean;
     onMute?: () => void;
     onKick?: () => void;
+    /** Whether this row currently holds the talking stick - shown to every viewer, not just the host. */
+    hasStick?: boolean;
+    /** Whether to show this row's "Give stick" button - `isSelfHost && talkingStickActive`, decided by the caller;
+     * never shown on the row that already holds it. */
+    canGiveStick?: boolean;
+    onGiveStick?: () => void;
 }) {
     const badge = transport ? TRANSPORT_BADGES[transport] : undefined;
     return (
@@ -207,6 +234,11 @@ function Row({
                 {isSelf ? " (you)" : ""}
             </span>
             {isHost && <span className="px-2 py-0.5 rounded text-xs whitespace-nowrap bg-[#a8c7fa] text-[#062e6f]">Host</span>}
+            {hasStick && (
+                <span className="px-2 py-0.5 rounded text-xs whitespace-nowrap bg-[#a8c7fa] text-[#062e6f]" role="img" aria-label="Holding the talking stick">
+                    🎙️
+                </span>
+            )}
             {handRaised && (
                 <span role="img" aria-label="Hand raised">
                     ✋
@@ -225,6 +257,16 @@ function Row({
                     {badge.label}
                 </span>
             )}
+            {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"
+                    aria-label={`Give the talking stick to ${name}`}
+                    onClick={onGiveStick}
+                >
+                    Give stick
+                </button>
+            )}
             {canModerate && !micMuted && (
                 <button
                     type="button"
@@ -271,6 +313,10 @@ export default function ParticipantsDrawer({
     waitingParticipants,
     onAdmit,
     onDeny,
+    talkingStickActive,
+    selfPeerId,
+    talkingStickHolder,
+    onGiveTalkingStick,
     onClose,
 }: ParticipantsDrawerProps) {
     useEffect(() => {
@@ -284,58 +330,66 @@ export default function ParticipantsDrawer({
     }, [onClose]);
 
     return (
-        <>
-            <div className="absolute inset-0 z-20 bg-black/40" onClick={onClose} aria-hidden="true" />
-            <aside
-                role="dialog"
-                aria-label="Participants"
-                className="absolute z-20 inset-y-0 right-0 w-72 max-w-[85vw] flex flex-col bg-[#2b2d30] text-white shadow-xl"
-                onClick={(event) => event.stopPropagation()}
-            >
-                <div className="flex items-center justify-between gap-2 px-3 py-3 border-b border-white/10">
-                    <h2 className="text-sm font-medium">Participants ({participants.length + 1})</h2>
-                    <button
-                        type="button"
-                        className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
-                        aria-label="Close participants"
-                        onClick={onClose}
-                    >
-                        ✕
-                    </button>
-                </div>
-                {isSelfHost && (
-                    <label className="flex items-center gap-2 px-3 py-2 border-b border-white/10 text-sm">
-                        <input type="checkbox" checked={forceMuteOnJoin} onChange={onToggleForceMuteOnJoin} className="w-4 h-4" />
-                        Mute new participants on join
-                    </label>
-                )}
-                {isSelfHost && <PasswordSection hasPassword={hasPassword} onSetPassword={onSetPassword} />}
-                {isSelfHost && (
-                    <label className="flex items-center gap-2 px-3 py-2 border-b border-white/10 text-sm">
-                        <input type="checkbox" checked={waitingRoomEnabled} onChange={onToggleWaitingRoomEnabled} className="w-4 h-4" />
-                        Require the host to admit participants
-                    </label>
-                )}
-                {isSelfHost && waitingRoomEnabled && (
-                    <WaitingSection waitingParticipants={waitingParticipants} onAdmit={onAdmit} onDeny={onDeny} />
-                )}
-                <ul className="flex-1 min-h-0 overflow-y-auto p-2 text-sm">
-                    <Row name={selfName} isSelf isHost={isSelfHost} micMuted={!micOn} handRaised={handRaised} />
-                    {participants.map((p) => (
-                        <Row
-                            key={p.uid}
-                            name={p.name}
-                            isHost={isParticipantHost(p.uid)}
-                            micMuted={!p.audioOn}
-                            handRaised={p.handRaised}
-                            transport={p.transport}
-                            canModerate={isSelfHost}
-                            onMute={() => onMute(p.uid)}
-                            onKick={() => onKick(p.uid)}
-                        />
-                    ))}
-                </ul>
-            </aside>
-        </>
+        <aside
+            role="dialog"
+            aria-label="Participants"
+            className="relative z-10 shrink-0 w-72 max-w-[85vw] h-full flex flex-col bg-[#2b2d30] text-white shadow-xl border-l border-white/10"
+        >
+            <div className="flex items-center justify-between gap-2 px-3 py-3 border-b border-white/10">
+                <h2 className="text-sm font-medium">Participants ({participants.length + 1})</h2>
+                <button
+                    type="button"
+                    className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
+                    aria-label="Close participants"
+                    onClick={onClose}
+                >
+                    ✕
+                </button>
+            </div>
+            {isSelfHost && (
+                <label className="flex items-center gap-2 px-3 py-2 border-b border-white/10 text-sm">
+                    <input type="checkbox" checked={forceMuteOnJoin} onChange={onToggleForceMuteOnJoin} className="w-4 h-4" />
+                    Mute new participants on join
+                </label>
+            )}
+            {isSelfHost && <PasswordSection hasPassword={hasPassword} onSetPassword={onSetPassword} />}
+            {isSelfHost && (
+                <label className="flex items-center gap-2 px-3 py-2 border-b border-white/10 text-sm">
+                    <input type="checkbox" checked={waitingRoomEnabled} onChange={onToggleWaitingRoomEnabled} className="w-4 h-4" />
+                    Require the host to admit participants
+                </label>
+            )}
+            {isSelfHost && waitingRoomEnabled && (
+                <WaitingSection waitingParticipants={waitingParticipants} onAdmit={onAdmit} onDeny={onDeny} />
+            )}
+            <ul className="flex-1 min-h-0 overflow-y-auto p-2 text-sm">
+                <Row
+                    name={selfName}
+                    isSelf
+                    isHost={isSelfHost}
+                    micMuted={!micOn}
+                    handRaised={handRaised}
+                    hasStick={talkingStickActive && talkingStickHolder === selfPeerId}
+                    canGiveStick={isSelfHost && talkingStickActive}
+                    onGiveStick={() => onGiveTalkingStick(selfPeerId)}
+                />
+                {participants.map((p) => (
+                    <Row
+                        key={p.uid}
+                        name={p.name}
+                        isHost={isParticipantHost(p.uid)}
+                        micMuted={!p.audioOn}
+                        handRaised={p.handRaised}
+                        transport={p.transport}
+                        canModerate={isSelfHost}
+                        onMute={() => onMute(p.uid)}
+                        onKick={() => onKick(p.uid)}
+                        hasStick={talkingStickActive && talkingStickHolder === p.uid}
+                        canGiveStick={isSelfHost && talkingStickActive}
+                        onGiveStick={() => onGiveTalkingStick(p.uid)}
+                    />
+                ))}
+            </ul>
+        </aside>
     );
 }