@tribe-nest/forge 3.42.1 → 3.50.0

package/src/ui/media/CallStage.tsx

@@ -1,20 +1,8 @@
-import { useCallback, useEffect, useMemo, useRef, type CSSProperties, type ReactNode } from "react";
-import {
-  AlertTriangle,
-  Loader2,
-  Mic,
-  MicOff,
-  MonitorUp,
-  MonitorX,
-  PhoneOff,
-  RefreshCw,
-  Video,
-  VideoOff,
-} from "lucide-react";
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState, type ReactNode } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 
 import {
   useActiveSpeakers,
-  useGrants,
   useLocalMedia,
   useLocalPublications,
   useMediaRoom,
@@ -22,107 +10,195 @@ import {
   useRecording,
   useRemoteTrack,
   useRoomState,
+  useSpeakers,
+  useTileViewport,
   useVisibleProducers,
-  type LocalSource,
 } from "@tribe-nest/media-client/react";
 
 import { useForgeT, type ForgeT } from "../../i18n";
-import { useThemeTokens, type ResolvedThemeTokens } from "../theme/ForgeThemeProvider";
-import { CallHelpHint } from "./CallHelpHint";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import type { CallStageChat } from "./callChat";
 import {
   callHeadCount,
   callStatus,
   callTiles,
-  canPublishSource,
   remoteAudioProducerIds,
-  type CallStatus,
+  stageNotice,
   type CallTile,
 } from "./callState";
+import { useFlyingReactions, useRaisedHands } from "./hooks/useCallSignals";
+import { CallSidePanel, type SidePanelTab } from "./panels/CallSidePanel";
+import { resolveLayout, GALLERY_PAGE_SIZE, pickDominant, type StageLayout, type ViewChoice } from "./stage/callLayout";
+import { diffPeers, unreadCount } from "./stage/callSignals";
+import { createCallSounds } from "./stage/callSounds";
+import { CallCenterNotice } from "./stage/CallCenterNotice";
+import { CallControlsBar } from "./stage/CallControlsBar";
+import { CallToasts, type CallToast } from "./stage/CallToasts";
+import { useMeasuredWidth, STAGE_NARROW_MAX_PX } from "./hooks/useMeasuredWidth";
+import { CallHealthPanel } from "./stage/CallHealthPanel";
+import { CallTopBar } from "./stage/CallTopBar";
+import { ReactionOverlay } from "./stage/ReactionOverlay";
+import { SelfView, type SelfViewCorner } from "./stage/SelfView";
+import { stageTokens, type StageTokens } from "./stage/stageTheme";
+import { VideoTile } from "./stage/VideoTile";
 
 /**
- * The call, as a screen. One implementation, both surfaces.
- *
- * Everything above this file was reachable only from a test: the room, the
- * hooks and `BookingCallProvider` all existed and nothing rendered a call, so
- * no human could join one. This is the part that makes it reachable, and it is
- * built ONCE here because there are two rendering surfaces (admin, and code
- * websites through Forge) and a second implementation would mean every fix to
- * the ordering rules had to be made twice. The second copy is always the one
- * that drifts.
+ * The call, as a screen. One implementation, three rendering surfaces.
  *
- * ## Where the colours come from
+ * This is the ORCHESTRATOR: the decisions live in the pure modules
+ * (`callState`, `stage/callLayout`, `stage/callSignals`) and the drawing in
+ * the components under `stage/` and `panels/`. What stays here is wiring the
+ * two together and the one `useReducer` of UI state.
  *
- * `useThemeTokens()`, which on a code website is the creator's own
- * `themeSettings` fed through `<ForgeThemeProvider>`, and in admin is the
- * dashboard's own tokens fed through the same provider. Not one colour is
- * written down in this file. A call screen with a hard-coded palette is a call
- * screen that looks like somebody else's product on every site that installs
- * it.
+ * ## The stage is dark on purpose
  *
- * ## Where the words come from
+ * `stage/stageTheme.ts` is the ONE sanctioned exception to theme-only
+ * colors: near-black chrome from constants, every accent from the theme.
  *
- * `useForgeT()`, like every other Forge component, with keys under
- * `forge.call_stage.*`. `callStatus` returns KEYS for the same reason it is
- * pure: it has no locale. The one thing rendered verbatim is the server's own
- * sentence (a refusal, a close reason), because a friendlier translation of a
- * refusal is a lie about why you were refused. Admin renders this same
- * component inside `<ForgeI18nProvider>` with the dashboard's locale; outside
- * any provider the hook answers in English, so a site that has not mounted one
- * still gets a working call.
+ * ## Words come from `useForgeT()`
  *
- * ## What it does NOT decide
+ * Keys under `forge.call_stage.*`. The one thing rendered verbatim is the
+ * server's own sentence (a refusal, a close reason).
  *
- * Whether a control may be used. `useGrants()` says what the node minted this
- * token for, and it is read here so a button that would be refused is not
- * offered; the node checks the same thing on the publish itself and its answer
- * is the only one that counts. Hiding a control is courtesy, never enforcement.
+ * ## Mount it behind PreJoin (or another Join control)
  *
- * ## Mount it behind a Join control
- *
- * The provider connects on mount and closes on unmount. Rendering the whole
- * thing inside a list of sessions would open a media connection for every row.
+ * The provider connects on mount and closes on unmount.
  */
 
+export type CallStageRecording = {
+  isRecording: boolean;
+  canControl: boolean;
+  /** A request is in flight. Holds the button rather than letting it be pressed twice. */
+  pending?: boolean;
+  onStart: () => void;
+  onStop: () => void;
+};
+
+export type CallStageMediaDefaults = {
+  audioDeviceId?: string;
+  videoDeviceId?: string;
+  joinWithMicOn?: boolean;
+  joinWithCameraOn?: boolean;
+};
+
 export type CallStageProps = {
-  /**
-   * Called once the local participant has left. The host is expected to unmount
-   * the provider: this component closes the room, but a provider left mounted
-   * would reconnect on the next render.
-   */
+  /** Called once the local participant has left. Unmount the provider. */
   onLeave?: () => void;
-  /** Whose call this is. Rendered above the grid. */
+  /** Whose call this is. Rendered in the top bar. */
   title?: ReactNode;
-  /** Ratio for each tile. Defaults to 16 / 9. */
+  /** Ratio for gallery tiles. Defaults to 16 / 9. */
   aspectRatio?: number;
+  /** The host's start/stop control, when the page offers one. */
+  recordingControl?: CallStageRecording;
+  /**
+   * The chat adapter, injected like `recordingControl`: the surfaces
+   * authenticate the platform socket differently and the stage must not know
+   * how. Absent means no chat tab or button is drawn.
+   */
+  chat?: CallStageChat;
+  /** Rendering hint for host courtesies (lower-hand). The server enforces
+   * every real host action itself. */
+  isHost?: boolean;
+  /** From PreJoin: which devices to open, and whether to open them at all. */
+  mediaDefaults?: CallStageMediaDefaults;
+  /** Opt call cameras into simulcast (group calls). Wrong for a 1:1, where
+   * one encoding carries and extra layers are encoder time spent on nobody. */
+  cameraSimulcast?: boolean;
+};
+
+type StageUiState = {
+  view: ViewChoice;
+  page: number;
+  pinnedKey: string | null;
+  panel: SidePanelTab | null;
+  selfHidden: boolean;
+  selfCorner: SelfViewCorner;
+  lastSeenMessageId: string | null;
+};
+
+type StageUiAction =
+  | { type: "view"; view: ViewChoice }
+  | { type: "page"; delta: number }
+  | { type: "pin"; key: string | null }
+  | { type: "panel"; panel: SidePanelTab | null }
+  | { type: "selfHidden"; hidden: boolean }
+  | { type: "selfCorner"; corner: SelfViewCorner }
+  | { type: "seen"; messageId: string | null };
+
+const initialUi: StageUiState = {
+  view: "gallery",
+  page: 0,
+  pinnedKey: null,
+  panel: null,
+  selfHidden: false,
+  selfCorner: "br",
+  lastSeenMessageId: null,
 };
 
-export function CallStage({ onLeave, title, aspectRatio = 16 / 9 }: CallStageProps) {
-  const tokens = useThemeTokens();
+function uiReducer(state: StageUiState, action: StageUiAction): StageUiState {
+  switch (action.type) {
+    case "view":
+      // Changing how you look resets where you were looking.
+      return { ...state, view: action.view, page: 0, pinnedKey: null };
+    case "page":
+      return { ...state, page: Math.max(0, state.page + action.delta) };
+    case "pin":
+      return { ...state, pinnedKey: action.key, page: 0 };
+    case "panel":
+      return { ...state, panel: action.panel };
+    case "selfHidden":
+      return { ...state, selfHidden: action.hidden };
+    case "selfCorner":
+      return { ...state, selfCorner: action.corner };
+    case "seen":
+      return { ...state, lastSeenMessageId: action.messageId };
+  }
+}
+
+export function CallStage({
+  onLeave,
+  title,
+  aspectRatio = 16 / 9,
+  recordingControl,
+  chat,
+  isHost = false,
+  mediaDefaults,
+  cameraSimulcast = false,
+}: CallStageProps) {
+  const themeTokens = useThemeTokens();
+  const tokens = useMemo(() => stageTokens(themeTokens), [themeTokens]);
   const t = useForgeT();
   const { connectionState, error, recovering, retry } = useMediaRoom();
   const state = useRoomState();
   const peers = useParticipants();
   const activeSpeakers = useActiveSpeakers();
   const recording = useRecording();
-  /**
-   * The barrier, applied. NOT `state.producers`.
-   *
-   * The reducer keeps every producer the node has ever announced so a subscribe
-   * rule that narrows and later widens is reversible, which means the raw list
-   * can hold people this seat has been barred from seeing. On a sealed room
-   * their presence is most of what the barrier was hiding, and a tile carries
-   * their identity.
-   */
+  // The barrier, applied: NOT `state.producers`. The raw list can hold people
+  // this seat is barred from, and a tile carries their identity.
   const producers = useVisibleProducers();
+  const publications = useLocalPublications();
+  const speakers = useSpeakers();
+  const { observeTile } = useTileViewport();
+  const hands = useRaisedHands();
+  const flying = useFlyingReactions();
+  const media = useLocalMedia();
+
+  const [ui, dispatch] = useReducer(uiReducer, initialUi);
 
   const status = useMemo(
     () => callStatus({ connectionState, error, recovering, phase: state.phase, closedReason: state.closedReason }),
     [connectionState, error, recovering, state.phase, state.closedReason],
   );
 
-  // Memoised on the room's own snapshots, every one of which is a stable
-  // reference while nothing changed. Rebuilding these per render is what turns
-  // a call screen into a component that re-renders per FRAME.
+  // Everyone by name, INCLUDING self as "You" - the peer list is other people
+  // only, so without this a person's own raised hand (and their own tile in
+  // the health panel) read as a raw identity, while everyone ELSE saw their
+  // name. Matches the self-view's own "You" label.
+  const peerNames = useMemo(() => {
+    const map = new Map(peers.map((peer) => [peer.identity, peer.name ?? peer.identity]));
+    if (state.identity) map.set(state.identity, t("forge.call_stage.you"));
+    return map;
+  }, [peers, state.identity, t]);
   const tiles = useMemo(
     () => callTiles({ identity: state.identity, peers, producers, activeSpeakers }),
     [state.identity, peers, producers, activeSpeakers],
@@ -132,560 +208,622 @@ export function CallStage({ onLeave, title, aspectRatio = 16 / 9 }: CallStagePro
     [state.identity, producers],
   );
 
+  const remoteCount = useMemo(() => new Set(tiles.map((tile) => tile.identity)).size, [tiles]);
+  const everSawPeersRef = useRef(false);
+  if (remoteCount > 0) everSawPeersRef.current = true;
+  const notice = useMemo(
+    () => stageNotice({ status, remoteCount, everSawPeers: everSawPeersRef.current }),
+    [status, remoteCount],
+  );
+
+  // Dominant speaker with a hold, so the rail and speaker view do not flap.
+  const [dominant, setDominant] = useState<{ identity: string | null; since: number }>({ identity: null, since: 0 });
+  useEffect(() => {
+    setDominant((previous) =>
+      pickDominant({ speakers, previous: previous.identity, previousSince: previous.since, now: Date.now() }),
+    );
+  }, [speakers]);
+
+  const localPresenting = useMemo(() => publications.some((p) => p.source === "screen"), [publications]);
+
+  // The stage's OWN width, not the window's: it embeds inside pages and modals.
+  // Below the breakpoint the tiles stack as portraits and the side panel folds
+  // into a full-screen overlay, so nothing is crushed to a sliver on a phone.
+  const [stageRef, stageWidth] = useMeasuredWidth<HTMLDivElement>();
+  const narrow = stageWidth > 0 && stageWidth < STAGE_NARROW_MAX_PX;
+
+  const layout = useMemo(
+    () =>
+      resolveLayout({
+        tiles,
+        view: ui.view,
+        page: ui.page,
+        pinnedKey: ui.pinnedKey,
+        dominantIdentity: dominant.identity,
+        localPresenting,
+        narrow,
+        pageSize: GALLERY_PAGE_SIZE,
+      }),
+    [tiles, ui.view, ui.page, ui.pinnedKey, dominant.identity, localPresenting, narrow],
+  );
+
+  // Chimes: unlocked by any control press, played on arrivals and departures.
+  const sounds = useMemo(() => createCallSounds(), []);
+  const unlockSounds = useCallback(() => sounds.unlock(), [sounds]);
+
+  // A hand going up rings for EVERYONE: each client watches the shared
+  // raised-hands state and chimes when it gains an identity. Seeded with the
+  // current set so the first render and a reconnect's snapshot do not fire a
+  // burst for hands that were already up.
+  const previousHandIdsRef = useRef(new Set(hands.hands.map((h) => h.identity)));
+  useEffect(() => {
+    const now = new Set(hands.hands.map((h) => h.identity));
+    let raised = false;
+    for (const id of now) if (!previousHandIdsRef.current.has(id)) raised = true;
+    previousHandIdsRef.current = now;
+    if (raised) sounds.raiseHand();
+  }, [hands.hands, sounds]);
+
+  // Join/leave toasts from the peer snapshot, collapsed under bursts.
+  const [toasts, setToasts] = useState<readonly CallToast[]>([]);
+  const previousPeersRef = useRef(peers);
+  const toastCounter = useRef(0);
+  useEffect(() => {
+    const changes = diffPeers(previousPeersRef.current, peers);
+    previousPeersRef.current = peers;
+    if (changes.length === 0) return;
+    if (changes.some((c) => c.kind === "joined")) sounds.join();
+    if (changes.some((c) => c.kind === "left")) sounds.leave();
+    const texts =
+      changes.length > 3
+        ? [t("forge.call_stage.many_joined", { count: changes.length })]
+        : changes.map((c) =>
+            c.kind === "joined"
+              ? t("forge.call_stage.peer_joined", { name: c.name })
+              : t("forge.call_stage.peer_left", { name: c.name }),
+          );
+    const added: CallToast[] = texts.map((text) => ({ id: `toast-${toastCounter.current++}`, text }));
+    setToasts((current) => [...current, ...added].slice(-3));
+    const timer = setTimeout(() => {
+      setToasts((current) => current.filter((toast) => !added.some((a) => a.id === toast.id)));
+    }, 4000);
+    return () => clearTimeout(timer);
+  }, [peers, sounds, t]);
+
+  // The unread badge and its "seen" watermark: reading the panel reads it.
+  const chatMessageIds = useMemo(() => (chat ? chat.messages.map((m) => m.id) : []), [chat?.messages]);
+  const chatUnread = ui.panel === "chat" ? 0 : unreadCount(chatMessageIds, ui.lastSeenMessageId);
+  useEffect(() => {
+    if (ui.panel !== "chat") return;
+    const last = chatMessageIds[chatMessageIds.length - 1] ?? null;
+    if (last !== ui.lastSeenMessageId) dispatch({ type: "seen", messageId: last });
+  }, [ui.panel, chatMessageIds, ui.lastSeenMessageId]);
+
+  // The timer starts at the FIRST successful connect and survives blips.
+  const [connectedAt, setConnectedAt] = useState<number | null>(null);
+  const [healthOpen, setHealthOpen] = useState(false);
+  useEffect(() => {
+    if (connectionState === "connected") setConnectedAt((current) => current ?? Date.now());
+  }, [connectionState]);
+
+  const togglePanel = (tab: SidePanelTab) => dispatch({ type: "panel", panel: ui.panel === tab ? null : tab });
+
+  const showSelfView =
+    !ui.selfHidden && layout.mode !== "duo" && connectionState === "connected" && (!notice || notice.kind === "waiting" || notice.kind === "everyone_left");
+
   return (
     <div
+      ref={stageRef}
       style={{
         display: "flex",
         flexDirection: "column",
-        gap: "0.75rem",
-        padding: "1rem",
+        gap: narrow ? "0.375rem" : "0.5rem",
+        padding: narrow ? "0.5rem" : "0.75rem",
         borderRadius: tokens.cornerRadius,
-        border: `1px solid ${tokens.border}`,
-        backgroundColor: tokens.background,
-        color: tokens.text,
+        backgroundColor: tokens.stageBg,
+        color: tokens.stageText,
         fontFamily: tokens.fontFamily,
-        /**
-         * Fill the surface rather than growing to fit the tiles.
-         *
-         * This laid out as a content-sized panel, which was right when a call
-         * was a modal and wrong the moment it became a full-screen page. With
-         * ONE participant `auto-fit` collapses the grid to a single full-width
-         * column, and a 16/9 tile at full width is taller than the viewport, so
-         * the controls were pushed off the bottom of the screen. Two people
-         * halved the width and hid the bug, which is why it only appeared to
-         * somebody sitting in a call alone.
-         *
-         * `100%` degrades to `auto` inside a parent with no height, so the
-         * embedded use (`BookingCallScreen`) is unaffected.
-         */
         height: "100%",
         minHeight: 0,
         boxSizing: "border-box",
         overflow: "hidden",
       }}
     >
+      <CallTopBar
+        title={title}
+        tokens={tokens}
+        t={t}
+        status={status}
+        recording={recording}
+        connectedAt={connectedAt}
+        view={ui.view}
+        onView={(view) => dispatch({ type: "view", view })}
+        headCount={callHeadCount(tiles)}
+        showViewToggle={layout.mode === "gallery" || layout.mode === "speaker"}
+        healthOpen={healthOpen}
+        onToggleHealth={() => setHealthOpen((open) => !open)}
+        raisedHands={hands.hands.map((h) => ({ identity: h.identity, name: peerNames.get(h.identity) ?? h.identity }))}
+        onOpenHands={() => togglePanel("people")}
+        compact={narrow}
+      />
+
+      <div style={{ display: "flex", gap: "0.5rem", flex: 1, minHeight: 0 }}>
+        <div style={{ position: "relative", flex: 1, minWidth: 0, minHeight: 0, display: "flex" }}>
+          {healthOpen && (
+            <CallHealthPanel
+              tokens={tokens}
+              t={t}
+              names={peerNames}
+              onClose={() => setHealthOpen(false)}
+            />
+          )}
+          <StageArea
+            layout={layout}
+            tokens={tokens}
+            t={t}
+            narrow={narrow}
+            aspectRatio={aspectRatio}
+            observeTile={observeTile}
+            hands={hands.hands}
+            pinnedKey={ui.pinnedKey}
+            onTogglePin={(key) => dispatch({ type: "pin", key: ui.pinnedKey === key ? null : key })}
+            onPage={(delta) => dispatch({ type: "page", delta })}
+            localPresenting={localPresenting}
+            onStopPresenting={() => void media.unpublish("screen")}
+          />
+
+          {notice && <CallCenterNotice notice={notice} tokens={tokens} t={t} onRetry={retry} />}
+          <ReactionOverlay reactions={flying.reactions} />
+          <CallToasts toasts={toasts} tokens={tokens} t={t} />
+          {layout.offPageSpeakerNames.length > 0 && (
+            <span
+              data-testid="off-page-speakers"
+              style={{
+                position: "absolute",
+                bottom: "0.5rem",
+                left: "50%",
+                transform: "translateX(-50%)",
+                fontSize: "0.75rem",
+                padding: "0.2rem 0.65rem",
+                borderRadius: 9999,
+                backgroundColor: "rgba(0,0,0,0.65)",
+                color: tokens.stageText,
+                pointerEvents: "none",
+              }}
+            >
+              {t("forge.call_stage.speaking_off_page", { names: layout.offPageSpeakerNames.join(", ") })}
+            </span>
+          )}
+          {showSelfView && (
+            <SelfView
+              tokens={tokens}
+              t={t}
+              corner={ui.selfCorner}
+              onCorner={(corner) => dispatch({ type: "selfCorner", corner })}
+              onHide={() => dispatch({ type: "selfHidden", hidden: true })}
+            />
+          )}
+
+          {/* On a phone the panel COVERS the stage instead of docking beside
+              it, so the video never shrinks to a sliver. Absolute inside the
+              relative stage container, above the tiles. */}
+          {ui.panel && narrow && (
+            <div data-testid="call-panel-overlay" style={{ position: "absolute", inset: 0, zIndex: 30, display: "flex" }}>
+              <CallSidePanel
+                tab={chat ? ui.panel : "people"}
+                onTab={(tab) => dispatch({ type: "panel", panel: tab })}
+                onClose={() => dispatch({ type: "panel", panel: null })}
+                tokens={tokens}
+                t={t}
+                {...(chat ? { chat } : {})}
+                tiles={tiles}
+                hands={hands.hands}
+                isHost={isHost}
+                myIdentity={state.identity}
+                onLowerHand={hands.lowerHandOf}
+                onLowerAll={hands.lowerAll}
+                unread={chatUnread}
+                fill
+              />
+            </div>
+          )}
+        </div>
+
+        {ui.panel && !narrow && (
+          <CallSidePanel
+            tab={chat ? ui.panel : "people"}
+            onTab={(tab) => dispatch({ type: "panel", panel: tab })}
+            onClose={() => dispatch({ type: "panel", panel: null })}
+            tokens={tokens}
+            t={t}
+            {...(chat ? { chat } : {})}
+            tiles={tiles}
+            hands={hands.hands}
+            isHost={isHost}
+            myIdentity={state.identity}
+            onLowerHand={hands.lowerHandOf}
+            onLowerAll={hands.lowerAll}
+            unread={chatUnread}
+          />
+        )}
+      </div>
+
+      {audioProducerIds.map((producerId) => (
+        <RemoteAudio key={producerId} producerId={producerId} />
+      ))}
+
+      <CallControlsBar
+        tokens={tokens}
+        connected={connectionState === "connected"}
+        onLeave={onLeave}
+        recordingControl={recordingControl}
+        cameraSimulcast={cameraSimulcast}
+        myHandRaised={hands.myHandRaised}
+        onRaiseHand={hands.raiseHand}
+        onLowerHand={hands.lowerHand}
+        onSendReaction={flying.sendReaction}
+        chatAvailable={!!chat}
+        chatUnread={chatUnread}
+        onToggleChat={() => togglePanel("chat")}
+        onTogglePeople={() => togglePanel("people")}
+        chatOpen={ui.panel === "chat"}
+        peopleOpen={ui.panel === "people"}
+        onGesture={unlockSounds}
+      />
+
+      <AutoPublish connected={connectionState === "connected"} mediaDefaults={mediaDefaults} cameraSimulcast={cameraSimulcast} />
+    </div>
+  );
+}
+
+/**
+ * Publish what PreJoin chose, once, when the room is first connected.
+ *
+ * Its own component so it can use the SAME `useLocalMedia` lock family as the
+ * control bar without adding effects to the orchestrator; the ref makes it
+ * once-per-mount, so a reconnect does not re-open a camera the person turned
+ * off mid-call (`lostSources` handles that conversation).
+ */
+function AutoPublish({
+  connected,
+  mediaDefaults,
+  cameraSimulcast,
+}: {
+  connected: boolean;
+  mediaDefaults?: CallStageMediaDefaults | undefined;
+  cameraSimulcast?: boolean | undefined;
+}) {
+  const media = useLocalMedia();
+  const done = useRef(false);
+  useEffect(() => {
+    if (!connected || done.current || !mediaDefaults) return;
+    done.current = true;
+    if (mediaDefaults.joinWithMicOn) {
+      void media.publishMicrophone(mediaDefaults.audioDeviceId ? { deviceId: mediaDefaults.audioDeviceId } : undefined);
+    }
+    if (mediaDefaults.joinWithCameraOn) {
+      void media.publishCamera({
+        ...(mediaDefaults.videoDeviceId ? { deviceId: mediaDefaults.videoDeviceId } : {}),
+        ...(cameraSimulcast ? { simulcast: true } : {}),
+      });
+    }
+  }, [connected, mediaDefaults, cameraSimulcast, media]);
+  return null;
+}
+
+/** The tiles, arranged. Which arrangement is `resolveLayout`'s answer. */
+function StageArea({
+  layout,
+  tokens,
+  t,
+  narrow,
+  aspectRatio,
+  observeTile,
+  hands,
+  pinnedKey,
+  onTogglePin,
+  onPage,
+  localPresenting,
+  onStopPresenting,
+}: {
+  layout: StageLayout;
+  tokens: StageTokens;
+  t: ForgeT;
+  narrow: boolean;
+  aspectRatio: number;
+  observeTile: (producerId: string) => (element: HTMLElement | null) => void;
+  hands: readonly { identity: string; raisedAt: number }[];
+  pinnedKey: string | null;
+  onTogglePin: (key: string) => void;
+  onPage: (delta: number) => void;
+  localPresenting: boolean;
+  onStopPresenting: () => void;
+}) {
+  const handAt = (identity: string) => hands.find((h) => h.identity === identity)?.raisedAt;
+
+  const pager =
+    layout.pageCount > 1 ? (
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", flexShrink: 0 }}>
+        <PageArrow direction={-1} disabled={layout.page === 0} onPage={onPage} tokens={tokens} t={t} />
+        <span style={{ fontSize: "0.75rem", color: tokens.stageMuted }}>
+          {t("forge.call_stage.page_of", { page: layout.page + 1, pages: layout.pageCount })}
+        </span>
+        <PageArrow direction={1} disabled={layout.page >= layout.pageCount - 1} onPage={onPage} tokens={tokens} t={t} />
+      </div>
+    ) : null;
+
+  const tileFor = (tile: CallTile, fill: boolean) => (
+    <VideoTile
+      key={tile.key}
+      tile={tile}
+      tokens={tokens}
+      t={t}
+      observeTile={observeTile}
+      handRaisedAt={handAt(tile.identity)}
+      pinned={pinnedKey === tile.key}
+      onTogglePin={() => onTogglePin(tile.key)}
+      fill={fill}
+      aspectRatio={aspectRatio}
+    />
+  );
+
+  if (layout.mode === "presenting") {
+    return (
       <div
+        data-testid="presenting-stage"
         style={{
           display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: "0.75rem",
-          flexWrap: "wrap",
+          // On a phone the share sits on TOP at full width with the faces as a
+          // strip beneath it; a side rail would squeeze the share into a sliver
+          // on one edge. On a desktop the rail is beside it as before.
+          flexDirection: narrow ? "column" : "row",
+          gap: "0.5rem",
+          flex: 1,
+          minWidth: 0,
+          minHeight: 0,
         }}
       >
-        {title ? <div style={{ fontWeight: 600, fontFamily: tokens.headingFontFamily }}>{title}</div> : <span />}
-        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
-          {recording && <RecordingIndicator tokens={tokens} t={t} />}
-          <ConnectionStatus status={status} tokens={tokens} t={t} onRetry={retry} />
+        <div style={{ flex: 1, minWidth: 0, minHeight: 0, display: "flex", flexDirection: "column", gap: "0.375rem" }}>
+          {layout.main ? (
+            <>
+              <span data-testid="presenter-label" style={{ fontSize: "0.8125rem", color: tokens.stageMuted, flexShrink: 0 }}>
+                {t("forge.call_stage.presenting_name", { name: layout.presenter?.name ?? "" })}
+              </span>
+              <div style={{ flex: 1, minHeight: 0, display: "flex" }}>
+                {tileFor(layout.main, true)}
+              </div>
+            </>
+          ) : (
+            // The viewer's OWN share: the browser does not hand a preview of
+            // it back cheaply, and mirroring your own screen recursively is
+            // the hall-of-mirrors everyone knows. A calm placard instead.
+            <div
+              data-testid="local-presenting"
+              style={{
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "0.75rem",
+                borderRadius: tokens.cornerRadius,
+                border: `1px dashed ${tokens.stageBorder}`,
+                color: tokens.stageMuted,
+              }}
+            >
+              <span>{t("forge.call_stage.you_are_presenting")}</span>
+              <button
+                type="button"
+                onClick={onStopPresenting}
+                style={{
+                  padding: "0.4rem 0.9rem",
+                  borderRadius: tokens.cornerRadius,
+                  border: `1px solid ${tokens.danger}`,
+                  backgroundColor: "transparent",
+                  color: tokens.stageText,
+                  cursor: "pointer",
+                  font: "inherit",
+                  fontSize: "0.8125rem",
+                }}
+              >
+                {t("forge.call_stage.stop_presenting")}
+              </button>
+            </div>
+          )}
+          {localPresenting && layout.main && (
+            <span role="status" style={{ fontSize: "0.75rem", color: tokens.stageMuted, flexShrink: 0 }}>
+              {t("forge.call_stage.you_are_presenting")}
+            </span>
+          )}
         </div>
+        {layout.pageTiles.length > 0 &&
+          (narrow ? (
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.375rem", flexShrink: 0 }}>
+              <div style={{ display: "flex", gap: "0.375rem", height: "5rem", overflowX: "auto", overflowY: "hidden" }}>
+                {layout.pageTiles.map((tile) => (
+                  <div key={tile.key} style={{ flexShrink: 0, aspectRatio: "16 / 9", height: "100%" }}>
+                    {tileFor(tile, true)}
+                  </div>
+                ))}
+              </div>
+              {pager}
+            </div>
+          ) : (
+            <div style={{ width: "clamp(8rem, 18%, 13rem)", display: "flex", flexDirection: "column", gap: "0.375rem", minHeight: 0 }}>
+              {layout.pageTiles.map((tile) => (
+                <div key={tile.key} style={{ flexShrink: 0 }}>
+                  {tileFor(tile, false)}
+                </div>
+              ))}
+              {pager}
+            </div>
+          ))}
+      </div>
+    );
+  }
+
+  if (layout.mode === "speaker" && layout.main) {
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem", flex: 1, minWidth: 0, minHeight: 0 }}>
+        <div style={{ flex: 1, minHeight: 0, display: "flex" }}>{tileFor(layout.main, true)}</div>
+        {layout.pageTiles.length > 0 && (
+          <div style={{ display: "flex", gap: "0.375rem", justifyContent: "center", flexShrink: 0, height: "5.5rem" }}>
+            {layout.pageTiles.map((tile) => (
+              <div key={tile.key} style={{ height: "100%", aspectRatio: String(aspectRatio) }}>
+                {tileFor(tile, true)}
+              </div>
+            ))}
+            {pager}
+          </div>
+        )}
       </div>
+    );
+  }
 
-      <div style={{ display: "flex", alignItems: "center", gap: "0.375rem", fontSize: "0.75rem", color: tokens.muted }}>
-        <span>{t("forge.call_stage.head_count", { count: callHeadCount(tiles) })}</span>
-        <CallHelpHint label={t("forge.call_stage.help_hear_not_see_label")}>
-          {t("forge.call_stage.help_hear_not_see")}
-        </CallHelpHint>
+  if (layout.mode === "duo") {
+    return (
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${layout.columns}, 1fr)`,
+          // Explicit rows so the stacked phone case (one column, a row each)
+          // divides the height EVENLY into portraits, rather than letting the
+          // second tile size to content. Desktop (one row) is unchanged.
+          gridTemplateRows: `repeat(${layout.rows}, 1fr)`,
+          gap: "0.5rem",
+          flex: 1,
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        {layout.pageTiles.map((tile) => tileFor(tile, true))}
+        <LocalDuoTile tokens={tokens} t={t} />
       </div>
+    );
+  }
 
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem", flex: 1, minWidth: 0, minHeight: 0 }}>
       <div
         style={{
           display: "grid",
-          gridTemplateColumns: "repeat(auto-fit, minmax(12rem, 1fr))",
-          gap: "0.75rem",
-          // The only part that may grow, and the only part that may scroll.
-          // `minHeight: 0` is what actually lets it shrink: a flex item defaults
-          // to `min-height: auto`, so without it the grid refuses to go below
-          // its content and pushes the controls out of the box instead.
+          gridTemplateColumns: `repeat(${layout.columns}, 1fr)`,
+          gap: "0.5rem",
           flex: 1,
           minHeight: 0,
-          overflowY: "auto",
-          /**
-           * Centred in the free space, not stacked at the top.
-           *
-           * `safe` is the load-bearing word: plain `center` centres the
-           * OVERFLOW too, so once there are more tiles than fit, the first row
-           * is pushed above the scroll origin and cannot be reached. `safe
-           * center` centres while there is room and falls back to start the
-           * moment there is not. An engine that does not understand it drops
-           * the declaration and starts at the top, which is the same fallback.
-           */
           alignContent: "safe center",
-          // Horizontally centred too. A tile clamped by `maxHeight` shrinks its
-          // width to keep 16/9, so it no longer fills its track and would
-          // otherwise sit against the left edge. With two or more tiles each
-          // fills its track and this changes nothing.
           justifyItems: "center",
+          overflowY: "auto",
         }}
       >
-        <LocalPreview tokens={tokens} aspectRatio={aspectRatio} t={t} />
-        {tiles.map((tile) => (
-          <ParticipantTile key={tile.key} tile={tile} tokens={tokens} aspectRatio={aspectRatio} t={t} />
-        ))}
+        {layout.pageTiles.map((tile) => tileFor(tile, false))}
       </div>
-
-      {audioProducerIds.map((producerId) => (
-        <RemoteAudio key={producerId} producerId={producerId} />
-      ))}
-
-      <CallControls tokens={tokens} t={t} connected={connectionState === "connected"} onLeave={onLeave} />
+      {pager}
     </div>
   );
 }
 
-/**
- * The connection, said plainly.
- *
- * Four different words for four different situations, because "connecting",
- * "reconnecting" and "we were refused" call for three different responses and a
- * single spinner tells you which of them you are in exactly never.
- */
-function ConnectionStatus({
-  status,
+function PageArrow({
+  direction,
+  disabled,
+  onPage,
   tokens,
   t,
-  onRetry,
 }: {
-  status: CallStatus;
-  tokens: ResolvedThemeTokens;
+  direction: -1 | 1;
+  disabled: boolean;
+  onPage: (delta: number) => void;
+  tokens: StageTokens;
   t: ForgeT;
-  onRetry: () => void;
 }) {
-  const busy = status.tone === "connecting" || status.tone === "reconnecting";
-  const alarming = status.tone === "failed";
-  // Our own copy is translated; the server's sentence is shown as it came.
-  const detail = status.detailKey ? t(status.detailKey) : status.detailText;
-
   return (
-    <div
-      role="status"
-      aria-live="polite"
-      style={{
-        display: "flex",
-        alignItems: "center",
-        gap: "0.5rem",
-        fontSize: "0.8125rem",
-        color: alarming ? tokens.text : tokens.muted,
-      }}
-    >
-      {busy && <Loader2 width={14} height={14} aria-hidden="true" />}
-      {alarming && <AlertTriangle width={14} height={14} aria-hidden="true" color={tokens.secondary} />}
-      {status.tone === "live" && (
-        <span
-          aria-hidden="true"
-          style={{ width: 8, height: 8, borderRadius: 9999, backgroundColor: tokens.primary, display: "inline-block" }}
-        />
-      )}
-      <span style={{ fontWeight: alarming ? 600 : 400 }}>{t(status.headlineKey)}</span>
-      {detail && <span style={{ color: tokens.muted }}>{detail}</span>}
-      {status.canRetry && (
-        <button
-          type="button"
-          onClick={onRetry}
-          style={{
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "0.25rem",
-            border: `1px solid ${tokens.border}`,
-            borderRadius: tokens.cornerRadius,
-            backgroundColor: "transparent",
-            color: tokens.text,
-            padding: "0.125rem 0.5rem",
-            cursor: "pointer",
-            font: "inherit",
-            fontSize: "0.75rem",
-          }}
-        >
-          <RefreshCw width={12} height={12} aria-hidden="true" />
-          {t("forge.call_stage.retry")}
-        </button>
-      )}
-    </div>
-  );
-}
-
-/** Somebody is recording. A consent signal, so it is content and always shown. */
-function RecordingIndicator({ tokens, t }: { tokens: ResolvedThemeTokens; t: ForgeT }) {
-  return (
-    <span
+    <button
+      type="button"
+      data-testid={direction === 1 ? "page-next" : "page-prev"}
+      onClick={() => onPage(direction)}
+      disabled={disabled}
+      aria-label={direction === 1 ? t("forge.call_stage.page_next") : t("forge.call_stage.page_prev")}
       style={{
         display: "inline-flex",
         alignItems: "center",
-        gap: "0.375rem",
-        fontSize: "0.75rem",
-        fontWeight: 600,
-        color: tokens.text,
-        border: `1px solid ${tokens.border}`,
-        borderRadius: tokens.cornerRadius,
-        padding: "0.125rem 0.5rem",
+        justifyContent: "center",
+        width: 28,
+        height: 28,
+        borderRadius: 9999,
+        border: `1px solid ${tokens.stageBorder}`,
+        backgroundColor: "transparent",
+        color: disabled ? tokens.stageMuted : tokens.stageText,
+        cursor: disabled ? "default" : "pointer",
+        opacity: disabled ? 0.5 : 1,
       }}
     >
-      <span
-        aria-hidden="true"
-        style={{ width: 8, height: 8, borderRadius: 9999, backgroundColor: tokens.secondary, display: "inline-block" }}
-      />
-      {t("forge.call_stage.recording")}
-    </span>
-  );
-}
-
-const tileFrame = (tokens: ResolvedThemeTokens, aspectRatio: number, speaking: boolean): CSSProperties => ({
-  position: "relative",
-  overflow: "hidden",
-  aspectRatio: String(aspectRatio),
-  // A lone tile spans the whole grid, and 16/9 of a wide surface is taller than
-  // the surface. Clamping crops rather than distorts, because the video inside
-  // is `object-fit: cover`.
-  maxHeight: "100%",
-  borderRadius: tokens.cornerRadius,
-  backgroundColor: tokens.surface,
-  // The active speaker is shown by the FRAME rather than by re-ordering the
-  // grid: a grid that reshuffles itself every time somebody says "mm" is
-  // unusable, and the person you were looking at moves out from under the eye.
-  border: `2px solid ${speaking ? tokens.primary : tokens.border}`,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-});
-
-const tileName = (tokens: ResolvedThemeTokens): CSSProperties => ({
-  position: "absolute",
-  left: "0.5rem",
-  bottom: "0.5rem",
-  maxWidth: "calc(100% - 1rem)",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  fontSize: "0.75rem",
-  padding: "0.125rem 0.375rem",
-  borderRadius: tokens.cornerRadius,
-  backgroundColor: tokens.background,
-  color: tokens.text,
-});
-
-/**
- * One participant.
- *
- * A tile with no video renders the NAME, at size, and keeps its place in the
- * grid. That is the whole point: somebody with the camera off has not left, and
- * a grid that drops them re-flows under everyone else's eyes the moment one
- * person turns a camera off.
- */
-function ParticipantTile({
-  tile,
-  tokens,
-  aspectRatio,
-  t,
-}: {
-  tile: CallTile;
-  tokens: ResolvedThemeTokens;
-  aspectRatio: number;
-  t: ForgeT;
-}) {
-  // `useRemoteTrack` takes a producer id unconditionally so the hook order is
-  // the same for a tile with video and a tile without. An id that matches
-  // nothing simply returns no track, which is the state we want anyway.
-  const { track, attach } = useRemoteTrack(tile.videoProducerId ?? "");
-  const showVideo = !!tile.videoProducerId && !!track && !tile.videoPaused;
-
-  return (
-    <div
-      style={tileFrame(tokens, aspectRatio, tile.isSpeaking)}
-      data-testid={`tile-${tile.identity}`}
-      // The active set as an attribute as well as a border: a site restyling
-      // the grid needs the fact, and a colour is not something a test can
-      // assert without pinning a palette this component deliberately has none of.
-      data-speaking={tile.isSpeaking ? "true" : "false"}
-    >
-      {showVideo ? (
-        <video ref={attach} autoPlay playsInline muted style={{ width: "100%", height: "100%", objectFit: "cover" }} />
-      ) : (
-        <span
-          style={{
-            fontSize: "0.9375rem",
-            fontWeight: 600,
-            color: tokens.text,
-            padding: "0 0.75rem",
-            textAlign: "center",
-          }}
-        >
-          {tile.name}
-        </span>
-      )}
-      <span style={tileName(tokens)}>
-        {tile.name}
-        {!tile.hasAudio && <span style={{ color: tokens.muted }}> {t("forge.call_stage.listening")}</span>}
-      </span>
-    </div>
+      {direction === 1 ? <ChevronRight width={14} height={14} aria-hidden="true" /> : <ChevronLeft width={14} height={14} aria-hidden="true" />}
+    </button>
   );
 }
 
-/**
- * Remote audio, attached and never drawn.
- *
- * Audio has to live on an element or the call is silent. It is deliberately NOT
- * attached to the participant's `<video>`: a tile whose camera is off has no
- * video element, and hanging the audio off one would mute whoever turned their
- * camera off.
- */
-function RemoteAudio({ producerId }: { producerId: string }) {
-  const { attach } = useRemoteTrack(producerId);
-  return <audio ref={attach} autoPlay style={{ display: "none" }} />;
-}
-
-/** This viewer, as they are being sent. Muted, or it is a feedback loop. */
-function LocalPreview({ tokens, aspectRatio, t }: { tokens: ResolvedThemeTokens; aspectRatio: number; t: ForgeT }) {
+/** The 1:1 layout's second portrait: the viewer, at size, not a floating chip. */
+function LocalDuoTile({ tokens, t }: { tokens: StageTokens; t: ForgeT }) {
   const state = useRoomState();
   const publications = useLocalPublications();
   const videoRef = useRef<HTMLVideoElement | null>(null);
-
   const camera = useMemo(() => publications.find((p) => p.source === "camera"), [publications]);
-  // A paused camera is still captured and still a publication, but nothing is
-  // being sent, so the preview shows the name the others are seeing.
   const track = camera && !camera.paused ? camera.track : undefined;
 
   useEffect(() => {
     const element = videoRef.current;
     if (!element) return;
-    // Rebuilt only when the TRACK changes. Doing this in a ref callback would
-    // build a new `MediaStream` on every render, which is the per-frame churn
-    // this component exists to avoid.
     element.srcObject = track ? new MediaStream([track]) : null;
     return () => {
       element.srcObject = null;
     };
   }, [track]);
 
-  const name = state.identity ? t("forge.call_stage.you") : t("forge.call_stage.you_not_connected");
-
-  return (
-    <div style={tileFrame(tokens, aspectRatio, false)} data-testid="tile-local">
-      {track ? (
-        <video
-          ref={videoRef}
-          autoPlay
-          playsInline
-          muted
-          style={{ width: "100%", height: "100%", objectFit: "cover" }}
-        />
-      ) : (
-        <span style={{ fontSize: "0.9375rem", fontWeight: 600, color: tokens.text }}>{name}</span>
-      )}
-      <span style={tileName(tokens)}>{name}</span>
-    </div>
-  );
-}
-
-/** One sentence per source a drop took away, keyed by the SDK's word for it. */
-const LOST_SOURCE_KEYS: Record<LocalSource, string> = {
-  microphone: "forge.call_stage.lost_microphone",
-  camera: "forge.call_stage.lost_camera",
-  screen: "forge.call_stage.lost_screen",
-};
-
-const controlButton = (tokens: ResolvedThemeTokens, active: boolean, busy = false): CSSProperties => ({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "0.375rem",
-  padding: "0.5rem 0.75rem",
-  borderRadius: tokens.cornerRadius,
-  border: `1px solid ${active ? tokens.primary : tokens.border}`,
-  backgroundColor: active ? tokens.primary : "transparent",
-  color: active ? tokens.textPrimary : tokens.text,
-  cursor: busy ? "progress" : "pointer",
-  opacity: busy ? 0.6 : 1,
-  font: "inherit",
-  fontSize: "0.8125rem",
-});
-
-/**
- * Microphone, camera, screen and leave.
- *
- * Each toggle is drawn only when the token was minted with the grant for it, so
- * a listen-only seat is not offered a microphone it would be refused. That is a
- * rendering decision; the node refuses the publish itself either way.
- *
- * ## Mute is a pause, not a republish
- *
- * The first press on Unmute or Start camera captures and publishes. Every press
- * after that PAUSES or RESUMES the publication the room already holds, through
- * `setPaused`. A toggle built as unpublish-then-publish starts every unmute
- * with `getUserMedia`, and Safari puts a permission prompt in front of every
- * call to it, so a person on an iPad was asked whether the site may use the
- * microphone each time they spoke. Pausing keeps the capture open (the
- * browser's device indicator stays on, which the camera hint says) and the way
- * back asks nobody anything. Screen share is the exception: stopping it ends
- * the capture, because sharing again has to go through the picker anyway.
- *
- * ## Why every toggle is disabled while it is working
- *
- * Each of these is a read-then-write: it reads whether the source is live and
- * publishes, pauses or resumes accordingly. The flag it reads does not move
- * until the publish has resolved, and a publish starts with a permission
- * prompt that can sit on screen for seconds - so a button that looks untouched
- * is a button a person presses again, and two presses used to mean two
- * producers from one identity and everyone else hearing them doubled.
- * `useLocalMedia` holds the real lock (a synchronous ref, since both clicks
- * land before React re-renders anything); this is the part that says so on
- * screen, because a control that silently ignores you is only marginally
- * better than one that misbehaves.
- */
-function CallControls({
-  tokens,
-  t,
-  connected,
-  onLeave,
-}: {
-  tokens: ResolvedThemeTokens;
-  t: ForgeT;
-  connected: boolean;
-  onLeave?: () => void;
-}) {
-  const grants = useGrants();
-  const { room } = useMediaRoom();
-  const media = useLocalMedia();
-
-  // What the person is actually SENDING, which is what the button says.
-  const microphoneLive = media.isMicrophoneEnabled && !media.paused.microphone;
-  const cameraLive = media.isCameraEnabled && !media.paused.camera;
-
-  // Plain handlers, deliberately not `useCallback`. `useLocalMedia()` returns a
-  // fresh object every render, so memoising on it would rebuild the callback
-  // every render anyway while looking as though it did not.
-  const toggleMicrophone = () => {
-    if (!media.isMicrophoneEnabled) {
-      void media.publishMicrophone();
-      return;
-    }
-    void media.setPaused("microphone", microphoneLive);
-  };
-  const toggleCamera = () => {
-    if (!media.isCameraEnabled) {
-      void media.publishCamera();
-      return;
-    }
-    void media.setPaused("camera", cameraLive);
-  };
-  const toggleScreen = () => {
-    void (media.screenSharing ? media.unpublish("screen") : media.publishScreen());
-  };
-
-  const leave = useCallback(() => {
-    // Closed here AND unmounted by the host. Closing alone would leave a
-    // provider mounted that reconnects on its next render; unmounting alone
-    // relies on a cleanup running before the person walks away from the laptop.
-    void room?.close().catch(() => undefined);
-    onLeave?.();
-  }, [room, onLeave]);
-
+  const name = state.identity ? t("forge.call_stage.you") : t("forge.call_stage.you_joining");
   return (
     <div
+      data-testid="tile-local"
       style={{
+        position: "relative",
+        overflow: "hidden",
+        borderRadius: tokens.cornerRadius,
+        backgroundColor: tokens.stageSurface,
+        border: `2px solid ${tokens.stageBorder}`,
         display: "flex",
-        flexWrap: "wrap",
         alignItems: "center",
-        gap: "0.5rem",
-        // Pinned to the bottom of the surface. The tile grid already claims the
-        // free space with `flex: 1`, so this holds even if that ever changes:
-        // the controls are the one thing that must never move off screen,
-        // because Leave is here.
-        marginTop: "auto",
-        flexShrink: 0,
+        justifyContent: "center",
+        minHeight: 0,
       }}
     >
-      {canPublishSource(grants, "microphone") && (
-        <button
-          type="button"
-          onClick={toggleMicrophone}
-          disabled={media.pending.microphone}
-          aria-busy={media.pending.microphone}
-          style={controlButton(tokens, microphoneLive, media.pending.microphone)}
-        >
-          {microphoneLive ? (
-            <Mic width={16} height={16} aria-hidden="true" />
-          ) : (
-            <MicOff width={16} height={16} aria-hidden="true" />
-          )}
-          {microphoneLive ? t("forge.call_stage.mute") : t("forge.call_stage.unmute")}
-        </button>
-      )}
-
-      {canPublishSource(grants, "camera") && (
-        <span style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem" }}>
-          <button
-            type="button"
-            onClick={toggleCamera}
-            disabled={media.pending.camera}
-            aria-busy={media.pending.camera}
-            style={controlButton(tokens, cameraLive, media.pending.camera)}
-          >
-            {cameraLive ? (
-              <Video width={16} height={16} aria-hidden="true" />
-            ) : (
-              <VideoOff width={16} height={16} aria-hidden="true" />
-            )}
-            {cameraLive ? t("forge.call_stage.camera_stop") : t("forge.call_stage.camera_start")}
-          </button>
-          <CallHelpHint label={t("forge.call_stage.help_camera_stop_label")}>
-            {t("forge.call_stage.help_camera_stop")}
-          </CallHelpHint>
-        </span>
-      )}
-
-      {canPublishSource(grants, "screen") && (
-        <span style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem" }}>
-          <button
-            type="button"
-            onClick={toggleScreen}
-            disabled={media.pending.screen}
-            aria-busy={media.pending.screen}
-            style={controlButton(tokens, media.screenSharing, media.pending.screen)}
-          >
-            {media.screenSharing ? (
-              <MonitorX width={16} height={16} aria-hidden="true" />
-            ) : (
-              <MonitorUp width={16} height={16} aria-hidden="true" />
-            )}
-            {media.screenSharing ? t("forge.call_stage.screen_stop") : t("forge.call_stage.screen_start")}
-          </button>
-          <CallHelpHint label={t("forge.call_stage.help_screen_label")}>
-            {t("forge.call_stage.help_screen")}
-          </CallHelpHint>
-        </span>
+      {track ? (
+        <video ref={videoRef} autoPlay playsInline muted style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+      ) : (
+        <span style={{ fontSize: "0.9375rem", fontWeight: 600 }}>{name}</span>
       )}
-
-      <button
-        type="button"
-        onClick={leave}
-        style={{ ...controlButton(tokens, false), marginLeft: "auto", borderColor: tokens.secondary }}
+      <span
+        style={{
+          position: "absolute",
+          left: "0.5rem",
+          bottom: "0.5rem",
+          fontSize: "0.75rem",
+          padding: "0.125rem 0.45rem",
+          borderRadius: tokens.cornerRadius,
+          backgroundColor: "rgba(0,0,0,0.55)",
+          color: tokens.stageText,
+        }}
       >
-        <PhoneOff width={16} height={16} aria-hidden="true" />
-        {t("forge.call_stage.leave")}
-      </button>
-
-      {/* A denied permission prompt is something the person has to be told
-          about without asking, so it stays visible rather than going behind
-          the `?`. */}
-      {media.error && (
-        <span role="alert" style={{ width: "100%", fontSize: "0.8125rem", color: tokens.text }}>
-          {media.error.message}
-        </span>
-      )}
-
-      {/* State the person has to act on, so it is content and stays visible: a
-          drop stopped their capture (the light went out, on purpose), the room
-          is back, and nothing will turn the microphone on again but them. Shown
-          once the room is back rather than during the drop, when the status
-          line above is already saying "reconnecting". An alert rather than a
-          status: somebody who misses it is talking to nobody. */}
-      {connected && media.lostSources.length > 0 && (
-        <span role="alert" style={{ width: "100%", fontSize: "0.8125rem", color: tokens.text }}>
-          {media.lostSources.map((source) => (
-            <span key={source} style={{ display: "block" }}>
-              {t(LOST_SOURCE_KEYS[source])}
-            </span>
-          ))}
-        </span>
-      )}
+        {name}
+      </span>
     </div>
   );
 }
+
+/**
+ * Remote audio, attached and never drawn. Deliberately NOT on the tile's
+ * `<video>`: a camera-off tile has no video element, and hanging audio off
+ * one would mute whoever turned their camera off.
+ */
+function RemoteAudio({ producerId }: { producerId: string }) {
+  const { attach } = useRemoteTrack(producerId);
+  return <audio ref={attach} autoPlay style={{ display: "none" }} />;
+}