@tribe-nest/forge 3.57.0 → 3.58.0

package/src/ui/headless/forms/usePhoneInput.ts

@@ -0,0 +1,294 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { CountryCode, Examples } from "libphonenumber-js";
+
+/**
+ * Phone entry that produces E.164, because the input is the only place the
+ * country is knowable.
+ *
+ * ## Why this exists at all
+ *
+ * `services/admin/consent/phone.ts` refuses to infer a country code from a bare
+ * national number, and it is right to: guessing `+1` for a ten-digit string is
+ * wrong for most of the world, and a wrong guess writes a phantom suppression
+ * against a number that never opted out. The consequence it accepts is that a
+ * bare national number simply never matches an E.164 one.
+ *
+ * That consequence is a live compliance hole on the way IN. Someone types
+ * `07700 900123` into a signup form, it is stored verbatim, they later text
+ * STOP from `+447700900123`, and the suppression lookup misses. We keep texting
+ * someone who said stop, which is the single most expensive failure in SMS.
+ *
+ * Nothing downstream can fix that, because by then the country is gone. So the
+ * fix belongs here: ask for the country, and emit E.164 from the start.
+ *
+ * ## Metadata cost, measured
+ *
+ * `libphonenumber-js/max` is 55.5 KB gzip / 48.1 KB brotli once bundled, and the
+ * metadata is effectively the whole of it: a build importing only `AsYouType`
+ * and `parsePhoneNumberFromString` measured 35.5 KB gzip against 35.7 KB for the
+ * full `min` import, so there is nothing to win by trimming the API surface.
+ *
+ * `max` rather than the smaller tiers, and the reason is not the line-type
+ * warning. `mobile` is a mobile-ONLY dataset: under it a landline is not typed
+ * as a landline, it is INVALID. That would refuse a perfectly good courier
+ * number at checkout, and would refuse real customers in the many countries
+ * whose numbers are typed FIXED_LINE_OR_MOBILE. `min` accepts everything but
+ * reports the type inconsistently (a GB landline resolves, a DE one does not),
+ * so a warning built on it would appear or vanish by country for no reason the
+ * visitor could see. `max` is the only tier where both modes below are correct.
+ *
+ * It is loaded with a dynamic `import()` so none of it sits in the first paint.
+ * A phone field is never the thing a visitor sees first, and until the metadata
+ * lands the input still accepts typing: `isReady` is false, validation holds
+ * off, and nothing is blocked.
+ */
+
+export type PhoneNumberType = "mobile" | "fixedLine" | "other" | "unknown";
+
+export interface UsePhoneInputOptions {
+  /**
+   * Where to start the country select. Pass the most confident source you have:
+   * checkout knows the shipping country, a storefront knows the visitor's geo.
+   * Never derive this from the digits someone is typing.
+   */
+  defaultCountry?: CountryCode;
+  /**
+   * `messaging` is for a number we will text: it demands a valid number and
+   * warns on a line type that cannot receive SMS. `shipping` is for a number a
+   * courier will ring, where a landline is perfectly good and the bar is only
+   * that the number is real.
+   */
+  mode?: "messaging" | "shipping";
+  /** Seed value, E.164 or national. An E.164 seed also sets the country. */
+  initialValue?: string;
+  /** Called with E.164 (or null while incomplete) on every change. */
+  onChange?: (e164: string | null) => void;
+  /**
+   * Set false when the field is not being shown. Hooks cannot be called
+   * conditionally, so a form with an optional phone field has to call this
+   * every render; this is what stops it fetching ~48 KB of metadata for a field
+   * nobody is going to see.
+   */
+  enabled?: boolean;
+}
+
+interface Metadata {
+  AsYouType: typeof import("libphonenumber-js/max").AsYouType;
+  parsePhoneNumberFromString: typeof import("libphonenumber-js/max").parsePhoneNumberFromString;
+  getCountries: typeof import("libphonenumber-js/max").getCountries;
+  getCountryCallingCode: typeof import("libphonenumber-js/max").getCountryCallingCode;
+  getExampleNumber: typeof import("libphonenumber-js/max").getExampleNumber;
+  examples: Examples;
+}
+
+let metadataPromise: Promise<Metadata> | null = null;
+
+/**
+ * One shared load for the whole page. Two phone fields on one checkout must not
+ * fetch the metadata twice, and the promise is cached rather than the result so
+ * concurrent callers await the same request.
+ */
+function loadMetadata(): Promise<Metadata> {
+  if (!metadataPromise) {
+    metadataPromise = Promise.all([
+      import("libphonenumber-js/max"),
+      import("libphonenumber-js/examples.mobile.json"),
+    ]).then(([lib, ex]) => ({
+      AsYouType: lib.AsYouType,
+      parsePhoneNumberFromString: lib.parsePhoneNumberFromString,
+      getCountries: lib.getCountries,
+      getCountryCallingCode: lib.getCountryCallingCode,
+      getExampleNumber: lib.getExampleNumber,
+      examples: ((ex as { default?: Examples }).default ?? ex) as Examples,
+    }));
+  }
+  return metadataPromise;
+}
+
+/** Let a host warm the metadata before the field is reached (on route enter, say). */
+export const preloadPhoneMetadata = loadMetadata;
+
+export interface CountryOption {
+  country: CountryCode;
+  callingCode: string;
+  flag: string;
+}
+
+/** Regional-indicator pair. "GB" becomes the flag, with no icon set to ship. */
+function flagOf(country: string): string {
+  if (country.length !== 2) return "";
+  return String.fromCodePoint(
+    ...[...country.toUpperCase()].map((c) => 0x1f1a5 + c.charCodeAt(0)),
+  );
+}
+
+export function usePhoneInput(opts: UsePhoneInputOptions = {}) {
+  const { defaultCountry, mode = "messaging", initialValue, onChange, enabled = true } = opts;
+
+  const [meta, setMeta] = useState<Metadata | null>(null);
+  const [country, setCountryState] = useState<CountryCode | undefined>(defaultCountry);
+  const [nationalValue, setNationalValue] = useState(initialValue ?? "");
+  const [touched, setTouched] = useState(false);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  useEffect(() => {
+    if (!enabled) return;
+    let alive = true;
+    loadMetadata().then((m) => {
+      if (alive) setMeta(m);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [enabled]);
+
+  /**
+   * A `defaultCountry` that resolves late still has to land. Checkout learns the
+   * shipping country after the address is filled, so a prop that arrives second
+   * must move the select, but only while the visitor has not chosen for
+   * themselves. Overriding a deliberate choice would be worse than being wrong.
+   */
+  useEffect(() => {
+    if (defaultCountry && !touched && !country) setCountryState(defaultCountry);
+  }, [defaultCountry, touched, country]);
+
+  const parsed = useMemo(() => {
+    if (!meta || !nationalValue.trim()) return null;
+    return meta.parsePhoneNumberFromString(nationalValue, country);
+  }, [meta, nationalValue, country]);
+
+  const e164 = parsed?.isValid() ? (parsed.number as string) : null;
+
+  const numberType: PhoneNumberType = useMemo(() => {
+    if (!parsed?.isValid()) return "unknown";
+    const t = parsed.getType();
+    if (t === "MOBILE") return "mobile";
+    if (t === "FIXED_LINE") return "fixedLine";
+    if (t === "FIXED_LINE_OR_MOBILE" || t === undefined) return "unknown";
+    return "other";
+  }, [parsed]);
+
+  /**
+   * A landline is a warning, never an error. The line type is a best guess from
+   * a numbering plan that many countries do not partition cleanly, and blocking
+   * a real number on a guess is worse than spending one credit finding out.
+   */
+  const warning = useMemo(() => {
+    if (mode !== "messaging" || !e164) return null;
+    return numberType === "fixedLine" ? ("landline" as const) : null;
+  }, [mode, e164, numberType]);
+
+  const error = useMemo(() => {
+    if (!touched || !meta) return null;
+    const raw = nationalValue.trim();
+    if (!raw) return "required" as const;
+    if (!country && !raw.startsWith("+")) return "no_country" as const;
+    if (!parsed) return "invalid" as const;
+    if (!parsed.isValid()) return "invalid" as const;
+    return null;
+  }, [touched, meta, nationalValue, country, parsed]);
+
+  /**
+   * Format as they type, in the national style of the selected country, so the
+   * value on screen matches the shape the placeholder promised.
+   *
+   * The exception is a pasted international number. The field says "without the
+   * country code" and a good share of people will paste `+44…` regardless. Left
+   * alone under a `GB` formatter that would read as a national string and come
+   * out mangled, so a leading `+` switches to international formatting and
+   * re-syncs the flag to whatever was pasted.
+   */
+  const setValue = useCallback(
+    (raw: string) => {
+      if (!meta) {
+        setNationalValue(raw);
+        return;
+      }
+      const isInternational = raw.trim().startsWith("+");
+      if (isInternational) {
+        const formatter = new meta.AsYouType();
+        const formatted = formatter.input(raw);
+        const detected = formatter.getCountry();
+        if (detected && detected !== country) {
+          setCountryState(detected);
+          setTouched(true);
+        }
+        setNationalValue(formatted);
+        return;
+      }
+      const formatter = new meta.AsYouType(country);
+      setNationalValue(formatter.input(raw));
+    },
+    [meta, country],
+  );
+
+  const setCountry = useCallback(
+    (next: CountryCode) => {
+      setCountryState(next);
+      setTouched(true);
+      // Re-format what is already typed under the new country rather than
+      // clearing it: someone correcting the flag after typing should not lose
+      // their number.
+      setNationalValue((current) => {
+        if (!meta || !current.trim() || current.trim().startsWith("+")) return current;
+        const digits = current.replace(/\D/g, "");
+        return new meta.AsYouType(next).input(digits);
+      });
+    },
+    [meta],
+  );
+
+  useEffect(() => {
+    onChangeRef.current?.(e164);
+  }, [e164]);
+
+  const countries: CountryOption[] = useMemo(() => {
+    if (!meta) return [];
+    return meta
+      .getCountries()
+      .map((c) => ({ country: c, callingCode: `+${meta.getCountryCallingCode(c)}`, flag: flagOf(c) }))
+      .sort((a, b) => a.country.localeCompare(b.country));
+  }, [meta]);
+
+  /**
+   * The placeholder is the real national format for the chosen country, which
+   * teaches the shape better than any sentence under the field: GB shows
+   * `07700 900123`, US shows `(201) 555-0123`.
+   */
+  const placeholder = useMemo(() => {
+    if (!meta || !country) return "";
+    const example = meta.getExampleNumber(country, meta.examples);
+    return example ? example.formatNational() : "";
+  }, [meta, country]);
+
+  return {
+    /** Loaded-metadata flag. Until true, validation holds off and typing still works. */
+    isReady: !!meta,
+    country,
+    setCountry,
+    countries,
+    callingCode: meta && country ? `+${meta.getCountryCallingCode(country)}` : "",
+    /** What the visitor sees: national format, no country code. */
+    value: nationalValue,
+    setValue,
+    placeholder,
+    /** What to submit. Null until the number is valid. */
+    e164,
+    isValid: !!e164,
+    numberType,
+    /** "landline" when messaging a number that cannot receive SMS. Never blocks. */
+    warning,
+    /** "required" | "no_country" | "invalid", or null. Only after blur. */
+    error,
+    touched,
+    markTouched: useCallback(() => setTouched(true), []),
+    reset: useCallback(() => {
+      setNationalValue("");
+      setTouched(false);
+      setCountryState(defaultCountry);
+    }, [defaultCountry]),
+  };
+}
+
+export type UsePhoneInputReturn = ReturnType<typeof usePhoneInput>;

package/src/ui/headless/forms/useSectionedForm.ts

@@ -111,7 +111,7 @@ function buildModel(form?: FormData) {
 
 /**
  * Headless multi-section form flow: a paginated wizard over `usePublicForm` that
- * mirrors the server walk (docs/forms-sections.md). Handles current-section
+ * mirrors the server walk (docs/archive/shipped/forms-sections.md). Handles current-section
  * state, in-page field visibility (show/hide), per-section required validation,
  * section→section branching (incl. submit), Back navigation, and submit. Bring
  * your own markup (or use the styled `<SectionedFormRenderer>`).
@@ -135,7 +135,7 @@ export function useSectionedForm(formId?: string) {
   const [error, setError] = useState("");
   const [isCompleted, setIsCompleted] = useState(false);
   // Graded quiz result (null until submit + only for quiz-mode forms). Shaped by
-  // the server's reveal policy — see docs/quizzes-certification-initiative.md.
+  // the server's reveal policy — see docs/archive/shipped/quizzes-certification-initiative.md.
   const [quizResult, setQuizResult] = useState<Record<string, unknown> | null>(null);
 
   // Start at the first section once the form loads.

package/src/ui/headless/index.ts

@@ -7,6 +7,14 @@ export { MembershipGate, type MembershipGateProps, type MembershipGateState } fr
 // S.4 members-only gates: the notice a storefront draws BEFORE the buyer pays.
 export { useMembershipGateNotice, type UseMembershipGateNoticeInput } from "./membership/useMembershipGateNotice";
 export { useEmailListForm, type UseEmailListFormOptions, type FormStatus } from "./forms/useEmailListForm";
+export {
+  usePhoneInput,
+  preloadPhoneMetadata,
+  type UsePhoneInputOptions,
+  type UsePhoneInputReturn,
+  type PhoneNumberType,
+  type CountryOption,
+} from "./forms/usePhoneInput";
 export { useContactForm } from "./forms/useContactForm";
 export { useSectionedForm } from "./forms/useSectionedForm";
 export { usePostEngagement, type UsePostEngagementOptions } from "./engagement/usePostEngagement";
@@ -52,7 +60,23 @@ export { useSignupForm, type UseSignupFormOptions } from "./auth/useSignupForm";
 
 // Flow primitives (Part A2) — multi-step purchase/booking/subscribe/chat flows,
 // each composed from the data hooks so a creator can rebuild any page.
-export { useEventCheckout, type UseEventCheckoutOptions, type EventCheckoutStep } from "./event/useEventCheckout";
+export {
+  useEventCheckout,
+  type UseEventCheckoutOptions,
+  type EventCheckoutStep,
+  type ToggleSeatResult,
+} from "./event/useEventCheckout";
+// Reserved seating (wave 2): the joined seating read and the pure pieces a
+// host needs to drive a picker of its own.
+export {
+  useEventSeating,
+  bestAvailableSeats,
+  indexEventSeats,
+  seatLabel,
+  type EventSeat,
+  type EventSeatingState,
+  type UseEventSeatingOptions,
+} from "./event/useEventSeating";
 // Ticket requests (curated access): the pure decisions behind the picker and
 // the post-order routing, for a host that drives the hook from its own UI.
 export {

package/src/ui/index.ts

@@ -101,6 +101,7 @@ export { CartLineOptions, resolveCartLineOptions } from "./styled/CartLineOption
 export { CurrencySwitcher, type CurrencySwitcherProps } from "./styled/CurrencySwitcher";
 export { UserMenu, type UserMenuProps } from "./styled/UserMenu";
 export { EmailListForm, type EmailListFormProps } from "./styled/EmailListForm";
+export { PhoneInput, type PhoneInputProps } from "./styled/PhoneInput";
 export { BlogComments, type BlogCommentsProps } from "./styled/BlogComments";
 export { PageActions, type PageActionsProps } from "./styled/PageActions";
 export { MusicLinkPage, type MusicLinkPageProps } from "./styled/MusicLinkPage";
@@ -118,6 +119,12 @@ export { MembershipTierCallout, type MembershipTierCalloutProps } from "./styled
 export { MembershipTiers, type MembershipTiersProps } from "./styled/MembershipTiers";
 export { EventsList, type EventsListProps } from "./styled/EventsList";
 export { EventTickets, type EventTicketsProps } from "./styled/EventTickets";
+// Reserved seating (wave 2): the buyer's seat picker, on its own for a host
+// that composes the ticket flow from `useEventCheckout`.
+export { EventSeatPicker, type EventSeatPickerProps } from "./styled/seating/EventSeatPicker";
+export { SeatMapCanvas, type SeatMapCanvasProps } from "./styled/seating/SeatMapCanvas";
+export { SeatLegend, type SeatLegendProps, type SeatLegendTier } from "./styled/seating/SeatLegend";
+export { tierColorMap, TIER_PALETTE } from "./styled/seating/paint";
 export { EventCountdown, type EventCountdownProps } from "./styled/EventCountdown";
 export { EventWaitlist, type EventWaitlistProps, formatCountdown } from "./styled/EventWaitlist";
 export { EventDetail, type EventDetailProps } from "./styled/EventDetail";

package/src/ui/media/CallStage.tsx

@@ -17,6 +17,7 @@ import {
 
 import { useForgeT, type ForgeT } from "../../i18n";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import type { CallStageBreakouts } from "./callBreakouts";
 import type { CallStageChat } from "./callChat";
 import {
   callHeadCount,
@@ -24,10 +25,11 @@ import {
   callTiles,
   remoteAudioProducerIds,
   stageNotice,
+  type BreakoutMove,
   type CallTile,
 } from "./callState";
 import { useFlyingReactions, useRaisedHands } from "./hooks/useCallSignals";
-import { CallSidePanel, type SidePanelTab } from "./panels/CallSidePanel";
+import { CallSidePanel, showsRoomsTab, 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";
@@ -96,6 +98,12 @@ export type CallStageProps = {
    * how. Absent means no chat tab or button is drawn.
    */
   chat?: CallStageChat;
+  /**
+   * The breakout-rooms adapter, injected like `chat`. Absent means no rooms
+   * tab, no Rooms button and no Return to main: the stage draws exactly what
+   * it drew before rooms existed.
+   */
+  breakouts?: CallStageBreakouts;
   /** Rendering hint for host courtesies (lower-hand). The server enforces
    * every real host action itself. */
   isHost?: boolean;
@@ -161,6 +169,7 @@ export function CallStage({
   aspectRatio = 16 / 9,
   recordingControl,
   chat,
+  breakouts,
   isHost = false,
   mediaDefaults,
   cameraSimulcast = false,
@@ -168,7 +177,7 @@ export function CallStage({
   const themeTokens = useThemeTokens();
   const tokens = useMemo(() => stageTokens(themeTokens), [themeTokens]);
   const t = useForgeT();
-  const { connectionState, error, recovering, retry } = useMediaRoom();
+  const { connectionState, error, recovering, retry, room } = useMediaRoom();
   const state = useRoomState();
   const peers = useParticipants();
   const activeSpeakers = useActiveSpeakers();
@@ -185,9 +194,23 @@ export function CallStage({
 
   const [ui, dispatch] = useReducer(uiReducer, initialUi);
 
+  /**
+   * A breakout move in flight, from either side.
+   *
+   * The node's `moveRequested` lands in `state.moving` (the host sent us
+   * somewhere); a Join or Return the person pressed themselves goes through
+   * `room.moveTo()`, which the SDK reports exactly like a server drain, so the
+   * stage remembers the destination itself in `localMoving` until the room is
+   * back. Both read the same way everywhere below.
+   */
+  const [localMoving, setLocalMoving] = useState<BreakoutMove | null>(null);
+  const [movePending, setMovePending] = useState(false);
+  const [moveError, setMoveError] = useState<string | null>(null);
+  const moving: BreakoutMove | null = state.moving ?? localMoving;
+
   const status = useMemo(
-    () => callStatus({ connectionState, error, recovering, phase: state.phase, closedReason: state.closedReason }),
-    [connectionState, error, recovering, state.phase, state.closedReason],
+    () => callStatus({ connectionState, error, recovering, phase: state.phase, closedReason: state.closedReason, moving }),
+    [connectionState, error, recovering, state.phase, state.closedReason, moving],
   );
 
   // Everyone by name, INCLUDING self as "You" - the peer list is other people
@@ -211,11 +234,54 @@ export function CallStage({
   const remoteCount = useMemo(() => new Set(tiles.map((tile) => tile.identity)).size, [tiles]);
   const everSawPeersRef = useRef(false);
   if (remoteCount > 0) everSawPeersRef.current = true;
+  const breakoutsActive = breakouts?.active ?? false;
   const notice = useMemo(
-    () => stageNotice({ status, remoteCount, everSawPeers: everSawPeersRef.current }),
-    [status, remoteCount],
+    () => stageNotice({ status, remoteCount, everSawPeers: everSawPeersRef.current, moving, breakoutsActive }),
+    [status, remoteCount, moving, breakoutsActive],
+  );
+
+  /**
+   * The self-move: write the assignment, then leave and reconnect. The backend
+   * mints the next ticket for the room the assignment names, so the reconnect
+   * IS the move; captures survive it the way they survive a drain.
+   */
+  const selfMove = useCallback(
+    async (roomPublicId: string | null) => {
+      if (!breakouts || !room) return;
+      setMoveError(null);
+      setMovePending(true);
+      try {
+        await breakouts.moveSelf(roomPublicId);
+        const name = roomPublicId ? (breakouts.rooms.find((r) => r.publicId === roomPublicId)?.name ?? roomPublicId) : null;
+        setLocalMoving({ room: roomPublicId ?? "main", name });
+        await room.moveTo();
+      } catch (cause) {
+        setLocalMoving(null);
+        setMoveError(cause instanceof Error && cause.message ? cause.message : t("forge.call_stage.breakouts.error"));
+      } finally {
+        setMovePending(false);
+      }
+    },
+    [breakouts, room, t],
   );
 
+  // The room is back (or gone): the local destination has been reached or is
+  // moot, and the assignment view is re-read so the panel shows where everyone
+  // landed. Every RETURN to connected refreshes, not only after our own move:
+  // the host may have reassigned us while we were away.
+  const previousConnectionRef = useRef(connectionState);
+  const refreshRef = useRef(breakouts?.refresh);
+  refreshRef.current = breakouts?.refresh;
+  useEffect(() => {
+    const previous = previousConnectionRef.current;
+    previousConnectionRef.current = connectionState;
+    if (connectionState === "connected" && previous !== "connected") {
+      setLocalMoving(null);
+      if (previous !== "idle" && previous !== "connecting") refreshRef.current?.();
+    }
+    if (connectionState === "closed") setLocalMoving(null);
+  }, [connectionState]);
+
   // 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(() => {
@@ -308,6 +374,23 @@ export function CallStage({
 
   const togglePanel = (tab: SidePanelTab) => dispatch({ type: "panel", panel: ui.panel === tab ? null : tab });
 
+  // A tab whose content went away (chat never injected, rooms closed under an
+  // attendee) falls back to People rather than drawing an empty rail.
+  const roomsTab = showsRoomsTab(breakouts);
+  const panelTab: SidePanelTab | null =
+    ui.panel === "chat" && !chat ? "people" : ui.panel === "rooms" && !roomsTab ? "people" : ui.panel;
+
+  // An attendee's rooms list is read on demand: once when the tab opens and
+  // then every few seconds while it stays open. The host's adapter polls on
+  // its own, so this only fires for a seat whose adapter does not.
+  const attendeeRoomsOpen = panelTab === "rooms" && !!breakouts && !breakouts.canManage;
+  useEffect(() => {
+    if (!attendeeRoomsOpen) return undefined;
+    refreshRef.current?.();
+    const timer = setInterval(() => refreshRef.current?.(), 5000);
+    return () => clearInterval(timer);
+  }, [attendeeRoomsOpen]);
+
   const showSelfView =
     !ui.selfHidden && layout.mode !== "duo" && connectionState === "connected" && (!notice || notice.kind === "waiting" || notice.kind === "everyone_left");
 
@@ -410,7 +493,7 @@ export function CallStage({
           {ui.panel && narrow && (
             <div data-testid="call-panel-overlay" style={{ position: "absolute", inset: 0, zIndex: 30, display: "flex" }}>
               <CallSidePanel
-                tab={chat ? ui.panel : "people"}
+                tab={panelTab ?? "people"}
                 onTab={(tab) => dispatch({ type: "panel", panel: tab })}
                 onClose={() => dispatch({ type: "panel", panel: null })}
                 tokens={tokens}
@@ -423,6 +506,10 @@ export function CallStage({
                 onLowerHand={hands.lowerHandOf}
                 onLowerAll={hands.lowerAll}
                 unread={chatUnread}
+                breakouts={breakouts}
+                onSelfMove={(id) => void selfMove(id)}
+                movePending={movePending}
+                moveError={moveError}
                 fill
               />
             </div>
@@ -431,7 +518,7 @@ export function CallStage({
 
         {ui.panel && !narrow && (
           <CallSidePanel
-            tab={chat ? ui.panel : "people"}
+            tab={panelTab ?? "people"}
             onTab={(tab) => dispatch({ type: "panel", panel: tab })}
             onClose={() => dispatch({ type: "panel", panel: null })}
             tokens={tokens}
@@ -444,6 +531,10 @@ export function CallStage({
             onLowerHand={hands.lowerHandOf}
             onLowerAll={hands.lowerAll}
             unread={chatUnread}
+            breakouts={breakouts}
+            onSelfMove={(id) => void selfMove(id)}
+            movePending={movePending}
+            moveError={moveError}
           />
         )}
       </div>
@@ -466,8 +557,14 @@ export function CallStage({
         chatUnread={chatUnread}
         onToggleChat={() => togglePanel("chat")}
         onTogglePeople={() => togglePanel("people")}
-        chatOpen={ui.panel === "chat"}
-        peopleOpen={ui.panel === "people"}
+        chatOpen={panelTab === "chat"}
+        peopleOpen={panelTab === "people"}
+        roomsAvailable={roomsTab}
+        roomsOpen={panelTab === "rooms"}
+        onToggleRooms={() => togglePanel("rooms")}
+        inBreakout={!!breakouts?.current}
+        onReturnToMain={() => void selfMove(null)}
+        movePending={movePending}
         onGesture={unlockSounds}
       />