@tribe-nest/forge 3.57.0 → 3.58.0

package/src/ui/media/callState.ts

@@ -241,6 +241,8 @@ export type CallStatus = {
   tone: CallStatusTone;
   /** Always shown. Connection state is CONTENT, never a help hint. `forge.call_stage.*`. */
   headlineKey: string;
+  /** Placeholders for `headlineKey` (a breakout room's name). Absent for every other headline. */
+  headlineVars?: Record<string, string | number>;
   /** Our own second line, when there is one. `forge.call_stage.*`. */
   detailKey?: string;
   /** The server's own words when it has any. Shown verbatim. */
@@ -264,11 +266,32 @@ export type CallStatusInput = {
    * offers a control rather than a spinner.
    */
   recovering?: boolean;
+  /**
+   * A breakout move in flight: the node asked this seat to change rooms
+   * (`RoomState.moving`), or the person pressed Join / Return themselves.
+   * The SDK reports the reconnect with the same `draining` cause a server
+   * drain uses, so without this the pill would say "Moving you to another
+   * server" about a move to Room 2. `name` null means back to the main room.
+   */
+  moving?: BreakoutMove | null;
 };
 
+/** What the stage knows about a move: where to, by display name when it has one. */
+export type BreakoutMove = { room: string; name: string | null };
+
 const ENDED = "forge.call_stage.status_ended";
 const LEFT = "forge.call_stage.status_left";
 
+/**
+ * The headline for a breakout move, shared by the pill and the centre notice
+ * so the two can never disagree about where somebody is going.
+ */
+export function breakoutMoveHeadline(moving: BreakoutMove): Pick<CallStatus, "headlineKey" | "headlineVars"> {
+  return moving.name === null
+    ? { headlineKey: "forge.call_stage.breakouts.status_returning" }
+    : { headlineKey: "forge.call_stage.breakouts.status_moving", headlineVars: { room: moving.name } };
+}
+
 /**
  * The room's states, told honestly.
  *
@@ -338,12 +361,19 @@ export function callStatus(input: CallStatusInput): CallStatus {
       // ordinary deploy would otherwise end every call on that node under a
       // spinner saying nobody was dropped.
       return recovering
-        ? {
-            tone: "reconnecting",
-            headlineKey: "forge.call_stage.status_moving",
-            detailKey: "forge.call_stage.status_moving_detail",
-            canRetry: false,
-          }
+        ? input.moving
+          ? {
+              tone: "reconnecting",
+              ...breakoutMoveHeadline(input.moving),
+              detailKey: "forge.call_stage.breakouts.status_moving_detail",
+              canRetry: false,
+            }
+          : {
+              tone: "reconnecting",
+              headlineKey: "forge.call_stage.status_moving",
+              detailKey: "forge.call_stage.status_moving_detail",
+              canRetry: false,
+            }
         : {
             tone: "failed",
             headlineKey: "forge.call_stage.status_move_failed",
@@ -406,13 +436,15 @@ export function canPublishSource(grants: MediaGrants | undefined, source: Publis
   return mayPublish(grants, { source, trackKind: source === "microphone" ? "audio" : "video" });
 }
 
-export type StageNoticeKind = "joining" | "waiting" | "everyone_left" | "ended" | "failed";
+export type StageNoticeKind = "joining" | "waiting" | "everyone_left" | "moving" | "ended" | "failed";
 
 export type StageNotice = {
   kind: StageNoticeKind;
   /** `forge.call_stage.*` keys. The status pill's copy is reused where the
    * meaning is the same, so the two can never say different things. */
   headlineKey: string;
+  /** Placeholders for `headlineKey`. Only a breakout move has any. */
+  headlineVars?: Record<string, string | number>;
   detailKey?: string;
   /** The server's own sentence, verbatim, exactly as the status line shows it. */
   detailText?: string;
@@ -429,6 +461,18 @@ export type StageNotice = {
  * transient ones (connecting, reconnecting) keep the top pill so the stage
  * behind them stays visible; and an empty live room says "waiting", which is
  * a state, not an error.
+ *
+ * ## Breakout rooms change two answers
+ *
+ * A MOVE between rooms is a leave and a reconnect, so for a second or two the
+ * stage is empty and reconnecting, which without `moving` reads as "everyone
+ * left". The move wins over every non-terminal notice: "Moving you to Room 2"
+ * is the truth, and a terminal state (ended, failed) still wins over it,
+ * because a move that failed is the thing to act on.
+ *
+ * And while rooms are OPEN, an empty stage is "waiting", never "everyone
+ * left": a host who hopped into Room 3 and found nobody there yet did not end
+ * the call, and the people they left in the main room are still on it.
  */
 export function stageNotice(input: {
   status: CallStatus;
@@ -437,33 +481,30 @@ export function stageNotice(input: {
   /** Has anyone else ever been here this session? Separates the room that has
    * not started from the room that just emptied. */
   everSawPeers: boolean;
+  /** A breakout move in flight (`RoomState.moving`, or the person's own press). */
+  moving?: BreakoutMove | null;
+  /** Breakout rooms are open somewhere in this call. */
+  breakoutsActive?: boolean;
 }): StageNotice | null {
   const { status } = input;
 
-  if (status.tone === "connecting") {
-    return { kind: "joining", headlineKey: "forge.call_stage.status_connecting", canRetry: false };
+  if (status.tone === "ended" || status.tone === "failed") {
+    return terminalNotice(status);
   }
-  if (status.tone === "ended") {
+  if (input.moving) {
     return {
-      kind: "ended",
-      headlineKey: status.headlineKey,
-      ...(status.detailKey ? { detailKey: status.detailKey } : {}),
-      ...(status.detailText ? { detailText: status.detailText } : {}),
+      kind: "moving",
+      ...breakoutMoveHeadline(input.moving),
+      detailKey: "forge.call_stage.breakouts.status_moving_detail",
       canRetry: false,
     };
   }
-  if (status.tone === "failed") {
-    return {
-      kind: "failed",
-      headlineKey: status.headlineKey,
-      ...(status.detailKey ? { detailKey: status.detailKey } : {}),
-      ...(status.detailText ? { detailText: status.detailText } : {}),
-      canRetry: status.canRetry,
-    };
+  if (status.tone === "connecting") {
+    return { kind: "joining", headlineKey: "forge.call_stage.status_connecting", canRetry: false };
   }
   // Live or reconnecting: the stage stands. Only an EMPTY one says anything.
   if (input.remoteCount === 0) {
-    return input.everSawPeers
+    return input.everSawPeers && !input.breakoutsActive
       ? { kind: "everyone_left", headlineKey: "forge.call_stage.everyone_left", canRetry: false }
       : {
           kind: "waiting",
@@ -474,3 +515,22 @@ export function stageNotice(input: {
   }
   return null;
 }
+
+function terminalNotice(status: CallStatus): StageNotice {
+  if (status.tone === "ended") {
+    return {
+      kind: "ended",
+      headlineKey: status.headlineKey,
+      ...(status.detailKey ? { detailKey: status.detailKey } : {}),
+      ...(status.detailText ? { detailText: status.detailText } : {}),
+      canRetry: false,
+    };
+  }
+  return {
+    kind: "failed",
+    headlineKey: status.headlineKey,
+    ...(status.detailKey ? { detailKey: status.detailKey } : {}),
+    ...(status.detailText ? { detailText: status.detailText } : {}),
+    canRetry: status.canRetry,
+  };
+}

package/src/ui/media/index.ts

@@ -49,6 +49,9 @@ export {
   useLocalMedia,
   useLocalPublications,
   useMediaRoom,
+  // A breakout move the node asked for (`moveRequested`), until the next join.
+  // `CallStage` reads it; a site laying out its own stage wants it by name.
+  useMoving,
   useParticipants,
   useRecording,
   useRemoteTrack,
@@ -131,6 +134,13 @@ export { PreJoin, type PreJoinProps, type PreJoinSettings } from "./PreJoin";
  */
 export type { CallChatMessage, CallStageChat } from "./callChat";
 
+/**
+ * The breakout-rooms adapter's shape, injected the same way as `chat`. The
+ * public lane's `useCallBreakouts` (from the root entry) produces it; admin
+ * composes its own against the dashboard's client.
+ */
+export type { BreakoutParticipant, BreakoutRoomSummary, CallStageBreakouts } from "./callBreakouts";
+
 /** The reaction vocabulary, shared by the picker and the receive whitelist. */
 export { REACTION_EMOJI, type ReactionEmoji } from "./stage/callSignals";
 
@@ -149,6 +159,7 @@ export {
   callTiles,
   canPublishSource,
   remoteAudioProducerIds,
+  type BreakoutMove,
   type CallStatus,
   type CallStatusInput,
   type CallStatusTone,

package/src/ui/media/panels/CallBreakoutsPanel.tsx

@@ -0,0 +1,395 @@
+import { useState, type CSSProperties } from "react";
+import { DoorOpen, Undo2 } from "lucide-react";
+
+import type { ForgeT } from "../../../i18n";
+import { CallHelpHint } from "../CallHelpHint";
+import type { BreakoutParticipant, BreakoutRoomSummary, CallStageBreakouts } from "../callBreakouts";
+import type { StageTokens } from "../stage/stageTheme";
+
+/**
+ * The rooms rail: breakout rooms, as the host runs them and as everyone else
+ * sees them.
+ *
+ * Everything this panel touches arrives through the `CallStageBreakouts`
+ * adapter, never a client: the stage serves three differently-authenticated
+ * surfaces and the admin dashboard mounts no `ForgeProvider`. The one thing
+ * the panel does NOT do itself is move the viewer: a self-move is the stage's
+ * flow (write the assignment, then `room.moveTo()`), so the Join and Return
+ * buttons call `onSelfMove` and the stage owns the reconnect.
+ *
+ * Copy: explanations live behind a `?`; what stays visible is state (where you
+ * are, who is where), errors, and the one warning a host has to read before
+ * closing every room.
+ */
+export function CallBreakoutsPanel({
+  breakouts,
+  myIdentity,
+  onSelfMove,
+  movePending,
+  moveError,
+  tokens,
+  t,
+}: {
+  breakouts: CallStageBreakouts;
+  myIdentity: string | null;
+  onSelfMove: (roomPublicId: string | null) => void;
+  /** The stage's own self-move is in flight. */
+  movePending: boolean;
+  /** The stage's own self-move failed, verbatim from the server when it said why. */
+  moveError: string | null;
+  tokens: StageTokens;
+  t: ForgeT;
+}) {
+  const [error, setError] = useState<string | null>(null);
+  const busy = breakouts.pending || movePending;
+
+  // Every adapter call reports the same way: the server's sentence when it
+  // gave one, else our own. Visible, because an error is never help.
+  const run = (action: () => Promise<void>) => {
+    setError(null);
+    void action().catch((cause: unknown) => {
+      const message = cause instanceof Error && cause.message ? cause.message : t("forge.call_stage.breakouts.error");
+      setError(message);
+    });
+  };
+
+  return (
+    <div
+      data-testid="call-breakouts-panel"
+      style={{
+        flex: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.75rem",
+        padding: "0.75rem",
+        fontSize: "0.8125rem",
+      }}
+    >
+      {!breakouts.ready && <span style={{ color: tokens.stageMuted }}>{t("forge.call_stage.breakouts.loading")}</span>}
+
+      {breakouts.ready && breakouts.canManage && (
+        <HostView breakouts={breakouts} myIdentity={myIdentity} onSelfMove={onSelfMove} busy={busy} run={run} tokens={tokens} t={t} />
+      )}
+      {breakouts.ready && !breakouts.canManage && (
+        <AttendeeView breakouts={breakouts} onSelfMove={onSelfMove} busy={busy} tokens={tokens} t={t} />
+      )}
+
+      {(error || moveError) && (
+        <span role="alert" data-testid="breakouts-error" style={{ color: tokens.stageText }}>
+          {error ?? moveError}
+        </span>
+      )}
+    </div>
+  );
+}
+
+const panelButton = (tokens: StageTokens, primary: boolean, busy: boolean, danger = false): CSSProperties => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.3rem",
+  padding: "0.3rem 0.65rem",
+  borderRadius: tokens.cornerRadius,
+  border: `1px solid ${danger ? tokens.danger : primary ? tokens.accent : tokens.stageBorder}`,
+  backgroundColor: primary ? tokens.accent : "transparent",
+  color: primary ? tokens.accentText : tokens.stageText,
+  cursor: busy ? "progress" : "pointer",
+  opacity: busy ? 0.6 : 1,
+  font: "inherit",
+  fontSize: "0.75rem",
+  whiteSpace: "nowrap",
+});
+
+const fieldStyle = (tokens: StageTokens): CSSProperties => ({
+  padding: "0.3rem 0.45rem",
+  borderRadius: tokens.cornerRadius,
+  border: `1px solid ${tokens.stageBorder}`,
+  backgroundColor: tokens.stageBg,
+  color: tokens.stageText,
+  font: "inherit",
+  fontSize: "0.8125rem",
+});
+
+const labelStyle: CSSProperties = { display: "flex", alignItems: "center", gap: "0.35rem", color: "inherit" };
+
+const roomHeading = (tokens: StageTokens): CSSProperties => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  fontWeight: 600,
+  color: tokens.stageText,
+});
+
+const nameOf = (person: BreakoutParticipant): string => person.name?.trim() || person.identity;
+
+/**
+ * Everyone who belongs to a room, arrived or not. Live presence first (the
+ * plane's own account), then anybody assigned who has not landed yet, so a
+ * host sees the person they just sent to Room 2 listed there before the
+ * reconnect completes rather than vanishing for a second.
+ */
+function roster(room: Pick<BreakoutRoomSummary, "participants" | "assigned">): (BreakoutParticipant & { arrived: boolean })[] {
+  const rows = room.participants.map((person) => ({ ...person, arrived: true }));
+  const seen = new Set(rows.map((person) => person.identity));
+  for (const person of room.assigned) {
+    if (seen.has(person.identity)) continue;
+    seen.add(person.identity);
+    rows.push({ ...person, arrived: false });
+  }
+  return rows;
+}
+
+function HostView({
+  breakouts,
+  myIdentity,
+  onSelfMove,
+  busy,
+  run,
+  tokens,
+  t,
+}: {
+  breakouts: CallStageBreakouts;
+  myIdentity: string | null;
+  onSelfMove: (roomPublicId: string | null) => void;
+  busy: boolean;
+  run: (action: () => Promise<void>) => void;
+  tokens: StageTokens;
+  t: ForgeT;
+}) {
+  const [count, setCount] = useState(2);
+  const [assign, setAssign] = useState<"auto" | "manual">("auto");
+  const [confirmingClose, setConfirmingClose] = useState(false);
+
+  if (!breakouts.active) {
+    const validCount = Number.isInteger(count) && count >= 1 && count <= 20;
+    return (
+      <form
+        data-testid="breakouts-create"
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (!validCount) return;
+          run(() => breakouts.create({ count, assign }));
+        }}
+        style={{ display: "flex", flexDirection: "column", gap: "0.625rem" }}
+      >
+        <div style={roomHeading(tokens)}>
+          {t("forge.call_stage.breakouts.create_title")}
+          <CallHelpHint label={t("forge.call_stage.breakouts.help_create_label")}>{t("forge.call_stage.breakouts.help_create")}</CallHelpHint>
+        </div>
+        <label style={labelStyle}>
+          <span style={{ flex: 1 }}>{t("forge.call_stage.breakouts.count_label")}</span>
+          <input
+            type="number"
+            min={1}
+            max={20}
+            step={1}
+            value={count}
+            onChange={(event) => setCount(Number(event.target.value))}
+            style={{ ...fieldStyle(tokens), width: "4.5rem" }}
+          />
+        </label>
+        <label style={labelStyle}>
+          <span style={{ flex: 1 }}>{t("forge.call_stage.breakouts.assign_label")}</span>
+          <select value={assign} onChange={(event) => setAssign(event.target.value as "auto" | "manual")} style={fieldStyle(tokens)}>
+            <option value="auto">{t("forge.call_stage.breakouts.assign_auto")}</option>
+            <option value="manual">{t("forge.call_stage.breakouts.assign_manual")}</option>
+          </select>
+        </label>
+        <button type="submit" disabled={busy || !validCount} aria-busy={busy} style={{ ...panelButton(tokens, true, busy), alignSelf: "flex-start" }}>
+          <DoorOpen width={14} height={14} aria-hidden="true" />
+          {t("forge.call_stage.breakouts.create")}
+        </button>
+      </form>
+    );
+  }
+
+  const roomOptions = [{ value: "", label: t("forge.call_stage.breakouts.main_room") }, ...breakouts.rooms.map((room) => ({ value: room.publicId, label: room.name }))];
+
+  const rows = (room: Pick<BreakoutRoomSummary, "participants" | "assigned">, here: string | null) =>
+    roster(room).map((person) => {
+      const mine = person.identity === myIdentity;
+      return (
+        <div key={person.identity} style={{ display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.2rem 0" }}>
+          <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+            {nameOf(person)}
+            {mine && <span style={{ color: tokens.stageMuted }}> {t("forge.call_stage.you_suffix")}</span>}
+            {!person.arrived && <span style={{ color: tokens.stageMuted }}> {t("forge.call_stage.breakouts.assigned_not_arrived")}</span>}
+          </span>
+          {!mine && (
+            <select
+              aria-label={t("forge.call_stage.breakouts.move_to_label", { name: nameOf(person) })}
+              value={here ?? ""}
+              disabled={busy}
+              onChange={(event) => run(() => breakouts.assign(person.identity, event.target.value || null))}
+              style={{ ...fieldStyle(tokens), fontSize: "0.75rem", padding: "0.15rem 0.3rem" }}
+            >
+              {roomOptions.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          )}
+        </div>
+      );
+    });
+
+  const joinButton = (roomPublicId: string | null) => {
+    const here = (breakouts.current?.publicId ?? null) === roomPublicId;
+    return here ? (
+      <span style={{ fontSize: "0.6875rem", color: tokens.stageMuted }}>{t("forge.call_stage.breakouts.current_marker")}</span>
+    ) : (
+      <button
+        type="button"
+        data-testid={roomPublicId ? `breakouts-join-${roomPublicId}` : "breakouts-join-main"}
+        onClick={() => onSelfMove(roomPublicId)}
+        disabled={busy}
+        aria-busy={busy}
+        style={{ ...panelButton(tokens, false, busy), marginLeft: "auto" }}
+      >
+        {roomPublicId ? t("forge.call_stage.breakouts.join") : t("forge.call_stage.breakouts.return_to_main")}
+      </button>
+    );
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+      <div style={roomHeading(tokens)}>
+        {t("forge.call_stage.breakouts.create_title")}
+        <CallHelpHint label={t("forge.call_stage.breakouts.help_join_label")}>{t("forge.call_stage.breakouts.help_join")}</CallHelpHint>
+      </div>
+
+      <section data-testid="breakouts-room-main" style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
+        <div style={roomHeading(tokens)}>
+          <span>{t("forge.call_stage.breakouts.main_room")}</span>
+          <span style={{ fontWeight: 400, color: tokens.stageMuted }}>
+            {t("forge.call_stage.breakouts.participant_count", { count: breakouts.main.participantCount })}
+          </span>
+          {joinButton(null)}
+        </div>
+        {breakouts.main.participants.length === 0 && <span style={{ color: tokens.stageMuted }}>{t("forge.call_stage.breakouts.empty_room")}</span>}
+        {rows({ participants: breakouts.main.participants, assigned: [] }, null)}
+      </section>
+
+      {breakouts.rooms.map((room) => (
+        <section key={room.publicId} data-testid={`breakouts-room-${room.publicId}`} style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
+          <div style={roomHeading(tokens)}>
+            <span>{room.name}</span>
+            <span style={{ fontWeight: 400, color: tokens.stageMuted }}>
+              {t("forge.call_stage.breakouts.participant_count", { count: room.participantCount })}
+            </span>
+            {joinButton(room.publicId)}
+          </div>
+          {room.participants.length === 0 && room.assigned.length === 0 && (
+            <span style={{ color: tokens.stageMuted }}>{t("forge.call_stage.breakouts.empty_room")}</span>
+          )}
+          {rows(room, room.publicId)}
+        </section>
+      ))}
+
+      {confirmingClose ? (
+        <div
+          role="group"
+          aria-label={t("forge.call_stage.breakouts.close_all")}
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.5rem",
+            padding: "0.625rem",
+            borderRadius: tokens.cornerRadius,
+            border: `1px solid ${tokens.danger}`,
+          }}
+        >
+          {/* A warning about what a control is about to do must be read, so it
+              is content here, never a `?` hint. */}
+          <span>{t("forge.call_stage.breakouts.close_confirm_body")}</span>
+          <div style={{ display: "flex", gap: "0.5rem" }}>
+            <button
+              type="button"
+              data-testid="breakouts-close-confirm"
+              disabled={busy}
+              onClick={() => {
+                setConfirmingClose(false);
+                run(() => breakouts.closeAll());
+              }}
+              style={panelButton(tokens, false, busy, true)}
+            >
+              {t("forge.call_stage.breakouts.close_confirm")}
+            </button>
+            <button type="button" onClick={() => setConfirmingClose(false)} style={panelButton(tokens, false, false)}>
+              {t("forge.call_stage.breakouts.close_cancel")}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <button
+          type="button"
+          data-testid="breakouts-close-all"
+          onClick={() => setConfirmingClose(true)}
+          disabled={busy}
+          style={{ ...panelButton(tokens, false, busy, true), alignSelf: "flex-start" }}
+        >
+          {t("forge.call_stage.breakouts.close_all")}
+        </button>
+      )}
+    </div>
+  );
+}
+
+function AttendeeView({
+  breakouts,
+  onSelfMove,
+  busy,
+  tokens,
+  t,
+}: {
+  breakouts: CallStageBreakouts;
+  onSelfMove: (roomPublicId: string | null) => void;
+  busy: boolean;
+  tokens: StageTokens;
+  t: ForgeT;
+}) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+      <div style={roomHeading(tokens)}>
+        {/* Where you are is STATE, and stays visible. */}
+        <span data-testid="breakouts-where">
+          {breakouts.current
+            ? t("forge.call_stage.breakouts.you_are_in", { room: breakouts.current.name })
+            : t("forge.call_stage.breakouts.you_are_in_main")}
+        </span>
+        <CallHelpHint label={t("forge.call_stage.breakouts.help_attendee_label")}>{t("forge.call_stage.breakouts.help_attendee")}</CallHelpHint>
+      </div>
+
+      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "0.25rem" }}>
+        <li style={{ display: "flex", gap: "0.5rem" }}>
+          <span>{t("forge.call_stage.breakouts.main_room")}</span>
+          {!breakouts.current && <span style={{ color: tokens.stageMuted }}>{t("forge.call_stage.breakouts.current_marker")}</span>}
+        </li>
+        {breakouts.rooms.map((room) => (
+          <li key={room.publicId} style={{ display: "flex", gap: "0.5rem" }}>
+            <span>{room.name}</span>
+            {breakouts.current?.publicId === room.publicId && (
+              <span style={{ color: tokens.stageMuted }}>{t("forge.call_stage.breakouts.current_marker")}</span>
+            )}
+          </li>
+        ))}
+      </ul>
+
+      {breakouts.current && (
+        <button
+          type="button"
+          data-testid="breakouts-return-main"
+          onClick={() => onSelfMove(null)}
+          disabled={busy}
+          aria-busy={busy}
+          style={{ ...panelButton(tokens, true, busy), alignSelf: "flex-start" }}
+        >
+          <Undo2 width={14} height={14} aria-hidden="true" />
+          {t("forge.call_stage.breakouts.return_to_main_room")}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/ui/media/panels/CallSidePanel.tsx

@@ -2,18 +2,30 @@ import { X } from "lucide-react";
 import type { RaisedHand } from "@tribe-nest/media-client";
 
 import type { ForgeT } from "../../../i18n";
+import type { CallStageBreakouts } from "../callBreakouts";
 import type { CallStageChat } from "../callChat";
 import type { CallTile } from "../callState";
 import type { StageTokens } from "../stage/stageTheme";
+import { CallBreakoutsPanel } from "./CallBreakoutsPanel";
 import { CallChatPanel } from "./CallChatPanel";
 import { CallParticipantsPanel } from "./CallParticipantsPanel";
 
-export type SidePanelTab = "chat" | "people";
+export type SidePanelTab = "chat" | "people" | "rooms";
 
 /**
- * The right rail: one width, two tabs, the Zoom-familiar shape. Tabs rather
- * than stacked panels because the rail's width is the stage's loss, and two
- * rails would take a third of a laptop screen.
+ * Is the rooms tab drawn at all? Only when the page injected an adapter AND
+ * there is something to show: a host can always open it (to create rooms), and
+ * everyone else sees it only while rooms are open. A call where nobody creates
+ * breakouts draws the two tabs it always drew.
+ */
+export const showsRoomsTab = (breakouts: CallStageBreakouts | undefined): breakouts is CallStageBreakouts =>
+  !!breakouts && (breakouts.canManage || breakouts.active);
+
+/**
+ * The right rail: one width, two tabs (three with breakout rooms), the
+ * Zoom-familiar shape. Tabs rather than stacked panels because the rail's
+ * width is the stage's loss, and two rails would take a third of a laptop
+ * screen.
  */
 export function CallSidePanel({
   tab,
@@ -29,6 +41,10 @@ export function CallSidePanel({
   onLowerHand,
   onLowerAll,
   unread,
+  breakouts,
+  onSelfMove,
+  movePending = false,
+  moveError = null,
   fill = false,
 }: {
   tab: SidePanelTab;
@@ -44,6 +60,12 @@ export function CallSidePanel({
   onLowerHand: (identity: string) => void;
   onLowerAll: () => void;
   unread: number;
+  /** The rooms adapter. Absent, or inactive for a non-host, draws no tab. */
+  breakouts?: CallStageBreakouts | undefined;
+  /** The stage's self-move flow (assignment, then `room.moveTo()`). */
+  onSelfMove?: ((roomPublicId: string | null) => void) | undefined;
+  movePending?: boolean | undefined;
+  moveError?: string | null | undefined;
   /** Fill the parent (a full-screen overlay on a phone) instead of the fixed
    * docked width. */
   fill?: boolean;
@@ -111,6 +133,7 @@ export function CallSidePanel({
       <div style={{ display: "flex", alignItems: "center", borderBottom: `1px solid ${tokens.stageBorder}` }}>
         {chat && tabButton("chat", t("forge.call_stage.tab_chat"), tab === "chat" ? 0 : unread)}
         {tabButton("people", t("forge.call_stage.tab_people"), hands.length)}
+        {showsRoomsTab(breakouts) && tabButton("rooms", t("forge.call_stage.breakouts.tab"))}
         <button
           type="button"
           onClick={onClose}
@@ -135,6 +158,16 @@ export function CallSidePanel({
 
       {tab === "chat" && chat ? (
         <CallChatPanel chat={chat} tokens={tokens} t={t} />
+      ) : tab === "rooms" && showsRoomsTab(breakouts) ? (
+        <CallBreakoutsPanel
+          breakouts={breakouts}
+          myIdentity={myIdentity}
+          onSelfMove={onSelfMove ?? (() => undefined)}
+          movePending={movePending}
+          moveError={moveError}
+          tokens={tokens}
+          t={t}
+        />
       ) : (
         <CallParticipantsPanel
           tiles={tiles}