@tribe-nest/forge 3.42.1 → 3.48.0

package/src/ui/media/PreJoin.tsx

@@ -0,0 +1,269 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Mic, MicOff, Video, VideoOff } from "lucide-react";
+
+import { useForgeT } from "../../i18n";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { stageTokens } from "./stage/stageTheme";
+import { DeviceMenu } from "./stage/DeviceMenu";
+
+/**
+ * The green room: check the camera and the microphone BEFORE connecting.
+ *
+ * Mounted by the page in place of `MediaRoomProvider`; only the Join click
+ * mounts the provider, so nobody arrives in a call with a camera they did not
+ * expect to be on. The captures opened here are STOPPED on join (the stage
+ * opens its own with the chosen devices), and the click doubles as the user
+ * gesture that unlocks the chime AudioContext.
+ */
+export type PreJoinSettings = {
+  audioDeviceId?: string;
+  videoDeviceId?: string;
+  joinWithMicOn: boolean;
+  joinWithCameraOn: boolean;
+};
+
+export type PreJoinProps = {
+  title?: ReactNode;
+  onJoin: (settings: PreJoinSettings) => void;
+};
+
+export function PreJoin({ title, onJoin }: PreJoinProps) {
+  const tokens = stageTokens(useThemeTokens());
+  const t = useForgeT();
+  const [micOn, setMicOn] = useState(true);
+  const [cameraOn, setCameraOn] = useState(true);
+  const [audioDeviceId, setAudioDeviceId] = useState<string | undefined>(undefined);
+  const [videoDeviceId, setVideoDeviceId] = useState<string | undefined>(undefined);
+  const [permissionError, setPermissionError] = useState<string | null>(null);
+  const [level, setLevel] = useState(0);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+
+  // One preview capture per (device, on/off) combination, always stopped on
+  // the way out: a green room must never leave a camera light on behind it.
+  useEffect(() => {
+    let cancelled = false;
+    let context: AudioContext | undefined;
+    let meterTimer: ReturnType<typeof setInterval> | undefined;
+
+    const stop = () => {
+      streamRef.current?.getTracks().forEach((track) => track.stop());
+      streamRef.current = null;
+      if (videoRef.current) videoRef.current.srcObject = null;
+    };
+
+    if (!micOn && !cameraOn) {
+      stop();
+      return undefined;
+    }
+
+    void navigator.mediaDevices
+      ?.getUserMedia({
+        audio: micOn ? (audioDeviceId ? { deviceId: { exact: audioDeviceId } } : true) : false,
+        video: cameraOn ? (videoDeviceId ? { deviceId: { exact: videoDeviceId } } : true) : false,
+      })
+      .then((stream) => {
+        if (cancelled) {
+          stream.getTracks().forEach((track) => track.stop());
+          return;
+        }
+        stop();
+        streamRef.current = stream;
+        setPermissionError(null);
+        if (videoRef.current && cameraOn) videoRef.current.srcObject = stream;
+
+        const audioTrack = stream.getAudioTracks()[0];
+        if (audioTrack && typeof AudioContext !== "undefined") {
+          try {
+            context = new AudioContext();
+            const analyser = context.createAnalyser();
+            analyser.fftSize = 512;
+            context.createMediaStreamSource(new MediaStream([audioTrack])).connect(analyser);
+            const samples = new Uint8Array(analyser.frequencyBinCount);
+            meterTimer = setInterval(() => {
+              analyser.getByteTimeDomainData(samples);
+              let sum = 0;
+              for (const value of samples) sum += (value - 128) * (value - 128);
+              setLevel(Math.min(1, Math.sqrt(sum / samples.length) / 32));
+            }, 120);
+          } catch {
+            // No meter is a cosmetic loss, never a blocked join.
+          }
+        }
+      })
+      .catch((err: Error) => {
+        if (!cancelled) setPermissionError(err.message);
+      });
+
+    return () => {
+      cancelled = true;
+      if (meterTimer) clearInterval(meterTimer);
+      void context?.close().catch(() => undefined);
+      stop();
+    };
+  }, [micOn, cameraOn, audioDeviceId, videoDeviceId]);
+
+  const join = () => {
+    // The stage captures its own tracks against the chosen device ids;
+    // handing live tracks across the provider boundary would tie the green
+    // room's lifetime to the call's.
+    streamRef.current?.getTracks().forEach((track) => track.stop());
+    streamRef.current = null;
+    onJoin({
+      ...(audioDeviceId ? { audioDeviceId } : {}),
+      ...(videoDeviceId ? { videoDeviceId } : {}),
+      joinWithMicOn: micOn,
+      joinWithCameraOn: cameraOn,
+    });
+  };
+
+  const toggleStyle = (active: boolean) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.375rem",
+    padding: "0.5rem 0.75rem",
+    borderRadius: tokens.cornerRadius,
+    border: `1px solid ${active ? tokens.accent : tokens.stageBorder}`,
+    backgroundColor: active ? tokens.accent : "transparent",
+    color: active ? tokens.accentText : tokens.stageText,
+    cursor: "pointer",
+    font: "inherit",
+    fontSize: "0.8125rem",
+  });
+
+  return (
+    <div
+      data-testid="prejoin"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "1rem",
+        height: "100%",
+        minHeight: "24rem",
+        padding: "1.5rem",
+        borderRadius: tokens.cornerRadius,
+        backgroundColor: tokens.stageBg,
+        color: tokens.stageText,
+        fontFamily: tokens.fontFamily,
+        boxSizing: "border-box",
+      }}
+    >
+      {title && <strong style={{ fontSize: "1.1rem", fontFamily: tokens.headingFontFamily }}>{title}</strong>}
+
+      <div
+        style={{
+          position: "relative",
+          width: "min(28rem, 90%)",
+          aspectRatio: "16 / 9",
+          borderRadius: tokens.cornerRadius,
+          overflow: "hidden",
+          backgroundColor: tokens.stageSurface,
+          border: `1px solid ${tokens.stageBorder}`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {cameraOn && !permissionError ? (
+          <video ref={videoRef} autoPlay playsInline muted style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+        ) : (
+          <span style={{ fontSize: "0.875rem", color: tokens.stageMuted }}>{t("forge.call_stage.prejoin_camera_off")}</span>
+        )}
+        {micOn && !permissionError && (
+          <span
+            aria-hidden="true"
+            style={{
+              position: "absolute",
+              left: "0.5rem",
+              bottom: "0.5rem",
+              width: "5rem",
+              height: 6,
+              borderRadius: 3,
+              backgroundColor: "rgba(255,255,255,0.2)",
+              overflow: "hidden",
+            }}
+          >
+            <span
+              style={{
+                display: "block",
+                width: `${Math.round(level * 100)}%`,
+                height: "100%",
+                backgroundColor: tokens.accent,
+                transition: "width 120ms",
+              }}
+            />
+          </span>
+        )}
+      </div>
+
+      {/* A denied permission is content the person must see without asking. */}
+      {permissionError && (
+        <span role="alert" style={{ fontSize: "0.8125rem", color: tokens.stageText, maxWidth: "28rem", textAlign: "center" }}>
+          {t("forge.call_stage.prejoin_permission")} {permissionError}
+        </span>
+      )}
+
+      <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", justifyContent: "center" }}>
+        <span style={{ display: "inline-flex" }}>
+          <button
+            type="button"
+            onClick={() => setMicOn((current) => !current)}
+            aria-pressed={micOn}
+            style={{ ...toggleStyle(micOn), borderRadius: `${tokens.cornerRadius}px 0 0 ${tokens.cornerRadius}px` }}
+          >
+            {micOn ? <Mic width={16} height={16} aria-hidden="true" /> : <MicOff width={16} height={16} aria-hidden="true" />}
+            {micOn ? t("forge.call_stage.prejoin_mic_on") : t("forge.call_stage.prejoin_mic_off")}
+          </button>
+          <DeviceMenu
+            kind="audioinput"
+            currentDeviceId={audioDeviceId}
+            onPick={setAudioDeviceId}
+            tokens={tokens}
+            t={t}
+            label={t("forge.call_stage.pick_microphone")}
+          />
+        </span>
+        <span style={{ display: "inline-flex" }}>
+          <button
+            type="button"
+            onClick={() => setCameraOn((current) => !current)}
+            aria-pressed={cameraOn}
+            style={{ ...toggleStyle(cameraOn), borderRadius: `${tokens.cornerRadius}px 0 0 ${tokens.cornerRadius}px` }}
+          >
+            {cameraOn ? <Video width={16} height={16} aria-hidden="true" /> : <VideoOff width={16} height={16} aria-hidden="true" />}
+            {cameraOn ? t("forge.call_stage.prejoin_camera_on") : t("forge.call_stage.prejoin_camera_off_toggle")}
+          </button>
+          <DeviceMenu
+            kind="videoinput"
+            currentDeviceId={videoDeviceId}
+            onPick={setVideoDeviceId}
+            tokens={tokens}
+            t={t}
+            label={t("forge.call_stage.pick_camera")}
+          />
+        </span>
+      </div>
+
+      <button
+        type="button"
+        data-testid="prejoin-join"
+        onClick={join}
+        style={{
+          padding: "0.65rem 2.5rem",
+          borderRadius: tokens.cornerRadius,
+          border: "none",
+          cursor: "pointer",
+          backgroundColor: tokens.accent,
+          color: tokens.accentText,
+          font: "inherit",
+          fontSize: "0.9375rem",
+          fontWeight: 600,
+        }}
+      >
+        {t("forge.call_stage.prejoin_join")}
+      </button>
+    </div>
+  );
+}

package/src/ui/media/_tests/CallStage.spec.tsx

@@ -42,17 +42,45 @@ afterEach(() => {
   delete (navigator as { mediaDevices?: unknown }).mediaDevices;
 });
 
+/**
+ * The width `useMeasuredWidth` sees. jsdom has no layout, so a ResizeObserver
+ * stub reports this on observe, and `getBoundingClientRect` is stubbed to
+ * match. Default is a roomy desktop; a test sets it narrow to exercise the
+ * phone layout.
+ */
+let stageTestWidth = 1200;
+const resizeCallbacks = new Set<(entries: { contentRect: { width: number } }[]) => void>();
+const setStageWidth = (width: number) => {
+  stageTestWidth = width;
+  for (const cb of resizeCallbacks) cb([{ contentRect: { width } }]);
+};
+
 beforeAll(() => {
-  // jsdom has no `MediaStream`, and the local preview builds one to hand to a
-  // `<video>`. A two-line stand-in is enough: nothing here asserts on it, the
-  // point is that the component may construct one without throwing.
   if (!("MediaStream" in globalThis)) {
     (globalThis as { MediaStream?: unknown }).MediaStream = class {
       constructor(readonly tracks: unknown[] = []) {}
     };
   }
+  (globalThis as { ResizeObserver?: unknown }).ResizeObserver = class {
+    constructor(private readonly cb: (entries: { contentRect: { width: number } }[]) => void) {
+      resizeCallbacks.add(this.cb);
+    }
+    observe() {
+      this.cb([{ contentRect: { width: stageTestWidth } }]);
+    }
+    unobserve() {}
+    disconnect() {
+      resizeCallbacks.delete(this.cb);
+    }
+  };
+  // The hook also seeds from getBoundingClientRect on mount.
+  Element.prototype.getBoundingClientRect = function () {
+    return { width: stageTestWidth, height: 600, top: 0, left: 0, right: stageTestWidth, bottom: 600, x: 0, y: 0, toJSON: () => ({}) } as DOMRect;
+  };
 });
 
+afterEach(() => setStageWidth(1200));
+
 /** Every `produce` this device is asked for, by source. Reset per test. */
 const produced: string[] = [];
 
@@ -585,9 +613,12 @@ describe("the promise to come back is one somebody keeps", () => {
     const { getByRole, getByText } = mount(node, <CallStage />, { reconnect: NO_RECOVERY });
     await waitFor(() => expect(getByRole("status").textContent).toContain("Connected"));
 
+    // The node asks to be left, and then the REJOIN is refused: the whole
+    // fleet is full, so the move genuinely has nowhere to go. (The SDK now
+    // moves the call itself on a plain drain, so refusing the second join is
+    // what "nowhere" means.)
+    (node as unknown as { options: { refuseWith?: string } }).options.refuseWith = "capacity";
     node.event({ event: "draining", reconnectAfterMs: 1 });
-    await settle(20);
-    node.socket.drop();
 
     await waitFor(() => expect(getByRole("status").textContent).toContain("Could not move you"));
     // The control the drained case never had. Spinner plus no button is the
@@ -930,3 +961,305 @@ describe("what a drop took away is said, once the room is back", () => {
     expect(queryByText(/Your microphone was turned off/)).toBeNull();
   });
 });
+
+describe("the rebuilt stage: layout, signals and panels", () => {
+  const manyPeers = (count: number) =>
+    Array.from({ length: count }, (_, i) => ({ identity: `p-${String(i).padStart(2, "0")}`, name: `Person ${i}` }));
+
+  it("shows JOINING in the centre while connecting, never a not-connected error", () => {
+    // The user-reported bug this rebuild fixes: the empty joining screen used
+    // to read "not connected", which is an error message about a state that
+    // is not an error. Asserted SYNCHRONOUSLY, before the fake node's join
+    // lands.
+    const node = new FakeNode({});
+    const { getByTestId, queryByText } = mount(node, <CallStage />);
+    expect(getByTestId("stage-notice-joining")).toBeTruthy();
+    expect(queryByText(/not connected/i)).toBeNull();
+  });
+
+  it("renders a refusal in the CENTRE of the stage, with the retry", async () => {
+    const node = new FakeNode({ refuseWith: "unauthorized" });
+    const { getByTestId, getAllByText } = mount(node, <CallStage />);
+
+    await waitFor(() => expect(getByTestId("stage-notice-failed")).toBeTruthy());
+    expect(getByTestId("stage-notice-failed").textContent).toContain("Could not join this call");
+    // The pill and the notice may both offer the words; the CONTROL lives in
+    // the notice, where a person staring at a dead stage actually looks.
+    expect(getAllByText("Try again").length).toBeGreaterThan(0);
+  });
+
+  it("says it is waiting when alone, and that everyone left when they leave", async () => {
+    const node = new FakeNode({ peers: [{ identity: "anna", name: "Anna" }] });
+    const { getByTestId, queryByTestId } = mount(node, <CallStage />);
+    await settle(30);
+    expect(queryByTestId("stage-notice-waiting")).toBeNull();
+
+    node.event({ event: "peerLeft", identity: "anna" });
+    await waitFor(() => expect(getByTestId("stage-notice-everyone_left")).toBeTruthy());
+  });
+
+  it("lays out exactly one remote person as two large portraits, no floating self view", async () => {
+    const node = new FakeNode({ peers: [{ identity: "anna", name: "Anna" }] });
+    const { container, getByTestId } = mount(node, <CallStage />);
+    await waitFor(() => expect(getByTestId("tile-anna")).toBeTruthy());
+    // The local half of the duo IS the self view: one tile-local, at size.
+    expect(container.querySelectorAll("[data-testid='tile-local']").length).toBe(1);
+  });
+
+  it("pages a 12-person call at 8 per page", async () => {
+    const node = new FakeNode({ peers: manyPeers(12) });
+    const { container, getByTestId, getByText } = mount(node, <CallStage />);
+
+    await waitFor(() => expect(getByText("1 / 2")).toBeTruthy());
+    expect(container.querySelectorAll("[data-testid^='tile-p-']").length).toBe(8);
+
+    fireEvent.click(getByTestId("page-next"));
+    await waitFor(() => expect(getByText("2 / 2")).toBeTruthy());
+    expect(container.querySelectorAll("[data-testid^='tile-p-']").length).toBe(4);
+  });
+
+  it("puts a labeled screen share on the stage with a 4-face rail and the presenter's name", async () => {
+    const node = new FakeNode({
+      peers: [...manyPeers(6), { identity: "anna", name: "Anna" }],
+      producers: [{ producerId: "s-1", identity: "anna", kind: "video", source: "screen" }],
+    });
+    const { container, getByTestId } = mount(node, <CallStage />);
+
+    await waitFor(() => expect(getByTestId("presenter-label").textContent).toContain("Anna is presenting"));
+    const share = container.querySelector("[data-source='screen']");
+    expect(share).toBeTruthy();
+    // The rail suppresses camera demand: 4 faces beside the share, not 7.
+    const faces = container.querySelectorAll("[data-source='camera']");
+    expect(faces.length).toBe(4);
+  });
+
+  it("stacks the share on a PHONE: full-width on top, faces as a strip below, never a squished side rail", async () => {
+    setStageWidth(390);
+    const node = new FakeNode({
+      peers: [{ identity: "anna", name: "Anna" }, { identity: "ben", name: "Ben" }],
+      producers: [{ producerId: "s-1", identity: "anna", kind: "video", source: "screen" }],
+    });
+    const { getByTestId, container } = mount(node, <CallStage />);
+
+    await waitFor(() => expect(getByTestId("presenter-label").textContent).toContain("Anna is presenting"));
+    // The presenting stage stacks vertically on a phone rather than splitting
+    // the width with a side rail.
+    expect(getByTestId("presenting-stage").style.flexDirection).toBe("column");
+    expect(container.querySelector("[data-source='screen']")).toBeTruthy();
+  });
+
+  it("keeps the desktop presenting split (share beside a side rail) on a wide screen", async () => {
+    setStageWidth(1200);
+    const node = new FakeNode({
+      peers: [{ identity: "anna", name: "Anna" }, { identity: "ben", name: "Ben" }],
+      producers: [{ producerId: "s-1", identity: "anna", kind: "video", source: "screen" }],
+    });
+    const { getByTestId } = mount(node, <CallStage />);
+    await waitFor(() => expect(getByTestId("presenter-label").textContent).toContain("Anna is presenting"));
+    expect(getByTestId("presenting-stage").style.flexDirection).toBe("row");
+  });
+
+  it("raises a hand over the wire and shows everyone's hands from room state", async () => {
+    const node = new FakeNode({ peers: manyPeers(3) });
+    const { getByTestId, getByText } = mount(node, <CallStage />);
+    await waitFor(() => expect(getByText("Raise hand")).toBeTruthy());
+
+    fireEvent.click(getByTestId("raise-hand"));
+    await waitFor(() => expect(node.received.some((f) => f.method === "setHand" && f.raised === true)).toBe(true));
+
+    // A peer's hand arrives as room state and lands on their tile.
+    node.event({ event: "handChanged", identity: "p-01", raisedAt: 100 });
+    await waitFor(() => expect(getByTestId("hand-p-01")).toBeTruthy());
+  });
+
+  it("surfaces a raised hand in the TOP BAR too, named, and rings for everyone", async () => {
+    // The sound is synthesized through WebAudio, absent in jsdom, so the chime
+    // is a no-op here; what a test can hold is that the top-bar indicator
+    // appears the moment the shared state gains a hand, with the raiser's name.
+    const node = new FakeNode({ peers: manyPeers(3) });
+    const { getByText, queryByRole, getByRole } = mount(node, <CallStage />);
+    await waitFor(() => expect(getByText("Raise hand")).toBeTruthy());
+
+    // Nothing up: no top-bar hand control (the name appears on the tile, so
+    // the control, not the name, is what proves the indicator's absence).
+    expect(queryByRole("button", { name: /Raised hands:/ })).toBeNull();
+
+    node.event({ event: "handChanged", identity: "p-01", raisedAt: 100 });
+    // The first (and only) hand shows the person's name, and the control opens
+    // the people panel where the queue lives.
+    const chip = await waitFor(() => getByRole("button", { name: /Raised hands: 1/ }));
+    expect(chip.textContent).toContain("Person 1");
+
+    // A second hand collapses to "name +1", the first in the queue named.
+    node.event({ event: "handChanged", identity: "p-02", raisedAt: 200 });
+    await waitFor(() => expect(getByRole("button", { name: /Raised hands: 2/ }).textContent).toContain("+1"));
+  });
+
+  it("names YOUR OWN raised hand \"You\", not your raw identity", async () => {
+    // The peer list is other people, so a self hand had no name to resolve
+    // and fell back to the uuid - correct on everyone else's screen, wrong on
+    // your own. Self is now in the name map as "You".
+    const node = new FakeNode({ identity: "host-uuid-123", peers: manyPeers(2) });
+    const { getByTestId, getByRole, getByText } = mount(node, <CallStage />);
+    await waitFor(() => expect(getByText("Raise hand")).toBeTruthy());
+
+    fireEvent.click(getByTestId("raise-hand"));
+    await waitFor(() => expect(node.received.some((f) => f.method === "setHand" && f.raised === true)).toBe(true));
+    // The node echoes the hand back as room state, addressed to self.
+    node.event({ event: "handChanged", identity: "host-uuid-123", raisedAt: 100 });
+
+    const chip = await waitFor(() => getByRole("button", { name: /Raised hands: 1/ }));
+    expect(chip.textContent).toContain("You");
+    expect(chip.textContent).not.toContain("host-uuid-123");
+  });
+
+  it("does not ring or badge for hands that were ALREADY up when you joined", async () => {
+    // A reconnect (or a late joiner) receives a snapshot with hands already
+    // raised; that is not N new hands going up, and must not blast the chime
+    // or read as fresh events. Seeded from the first snapshot.
+    const node = new FakeNode({
+      peers: manyPeers(3),
+      raisedHands: [{ identity: "p-01", raisedAt: 10 }],
+    });
+    const { getByRole, getByText } = mount(node, <CallStage />);
+    await waitFor(() => expect(getByText("Raise hand")).toBeTruthy());
+    // The already-up hand still SHOWS (it is real state), it just did not chime.
+    await waitFor(() => expect(getByRole("button", { name: /Raised hands: 1/ })).toBeTruthy());
+  });
+
+  it("sends a whitelisted reaction and flies an incoming one", async () => {
+    const node = new FakeNode({ peers: manyPeers(3) });
+    const { container, getByTestId, getByText } = mount(node, <CallStage />);
+    await waitFor(() => expect(getByText("Raise hand")).toBeTruthy());
+
+    fireEvent.click(getByTestId("reaction-picker"));
+    fireEvent.click(getByText("👏"));
+    await waitFor(() =>
+      expect(node.received.some((f) => f.method === "broadcast" && (f as { type?: string }).type === "reaction")).toBe(true),
+    );
+    // Our own copy flies immediately.
+    expect(container.querySelectorAll("[data-testid='flying-reaction']").length).toBe(1);
+
+    node.event({ event: "broadcast", type: "reaction", identity: "p-01", data: { emoji: "❤️" }, at: 1 });
+    await waitFor(() => expect(container.querySelectorAll("[data-testid='flying-reaction']").length).toBe(2));
+
+    // The whitelist holds on receipt: arbitrary strings never fly.
+    node.event({ event: "broadcast", type: "reaction", identity: "p-01", data: { emoji: "<script>" }, at: 2 });
+    await settle(30);
+    expect(container.querySelectorAll("[data-testid='flying-reaction']").length).toBe(2);
+  });
+
+  it("counts unread chat on the badge until the panel is opened", async () => {
+    const node = new FakeNode({ peers: manyPeers(3) });
+    const chat = {
+      ready: true,
+      messages: [
+        { id: "m1", content: "hi", senderName: "Anna", senderKey: "anna", at: "", reactions: [] },
+        { id: "m2", content: "hello", senderName: "Ben", senderKey: "ben", at: "", reactions: [] },
+      ],
+      sendMessage: vi.fn(),
+      reactToMessage: vi.fn(),
+      typingNames: [],
+      currentSenderKey: "me",
+    };
+    const { getByTestId, queryByTestId } = mount(node, <CallStage chat={chat} />);
+
+    await waitFor(() => expect(getByTestId("chat-unread").textContent).toBe("2"));
+
+    fireEvent.click(getByTestId("toggle-chat"));
+    await waitFor(() => expect(getByTestId("call-side-panel")).toBeTruthy());
+    expect(queryByTestId("chat-unread")).toBeNull();
+  });
+
+  it("shows peers arriving as toasts that clear on their own", async () => {
+    const node = new FakeNode({});
+    const { getByText, queryAllByTestId } = mount(node, <CallStage />);
+    await settle(30);
+
+    node.event({ event: "peerJoined", peer: { identity: "anna", name: "Anna", kind: "human" } });
+    await waitFor(() => expect(getByText("Anna joined")).toBeTruthy());
+    await waitFor(() => expect(queryAllByTestId("call-toast")).toHaveLength(0), { timeout: 6000 });
+  });
+});
+
+describe("the call health panel", () => {
+  it("opens from the top bar, reports, and closes: the diagnosis lives IN the call", async () => {
+    const node = new FakeNode({
+      peers: [{ identity: "anna", name: "Anna" }],
+      producers: [{ producerId: "p-anna-video", identity: "anna", kind: "video" }],
+    });
+    const { getByRole, queryByRole } = mount(node, <CallStage />);
+    await settle();
+
+    expect(queryByRole("region", { name: "Call health" })).toBeNull();
+    fireEvent.click(getByRole("button", { name: "Call health" }));
+
+    const panel = await waitFor(() => getByRole("region", { name: "Call health" }));
+    expect(panel).toBeTruthy();
+    // The node's answer and the tiles take a poll cycle; what must be
+    // immediate is that the panel exists and says it is measuring rather
+    // than showing stale or invented numbers.
+    expect(panel.textContent).toContain("Call health");
+
+    fireEvent.click(getByRole("button", { name: "Close call health" }));
+    expect(queryByRole("region", { name: "Call health" })).toBeNull();
+  });
+
+  it("asks the node for diagnostics while open, once a second and not before", async () => {
+    const node = new FakeNode({ peers: [] });
+    const { getByRole } = mount(node, <CallStage />);
+    await settle();
+
+    const asks = () => node.received.filter((frame) => frame.method === "diagnostics").length;
+    expect(asks()).toBe(0);
+
+    fireEvent.click(getByRole("button", { name: "Call health" }));
+    await waitFor(() => expect(asks()).toBeGreaterThanOrEqual(1));
+  });
+});
+
+describe("the camera capture asks for a real resolution", () => {
+  it("requests 720p ideal, never required: SD-by-default was a field finding, OverconstrainedError would be worse", async () => {
+    const { getUserMedia } = stubCapture("video");
+    const node = new FakeNode({});
+    const { getByText } = mount(node, <CallStage />);
+    await settle();
+
+    fireEvent.click(getByText("Start camera"));
+    await waitFor(() => expect(getUserMedia).toHaveBeenCalledTimes(1));
+
+    expect(getUserMedia).toHaveBeenCalledWith({
+      video: { width: { ideal: 1280 }, height: { ideal: 720 }, frameRate: { ideal: 30 } },
+    });
+  });
+});
+
+describe("the stage is responsive to its OWN width", () => {
+  it("docks the panel beside the stage on a wide screen", async () => {
+    setStageWidth(1200);
+    const node = new FakeNode({ peers: [{ identity: "a", name: "Ann" }, { identity: "b", name: "Ben" }] });
+    const { getByTestId, queryByTestId, getByText } = mount(node, <CallStage />);
+    await waitFor(() => expect(getByText("Raise hand")).toBeTruthy());
+
+    fireEvent.click(getByTestId("toggle-people"));
+    await waitFor(() => expect(getByTestId("call-side-panel")).toBeTruthy());
+    // Wide: no full-screen overlay wrapper, the panel is a docked sibling.
+    expect(queryByTestId("call-panel-overlay")).toBeNull();
+  });
+
+  it("folds the panel into a full-screen overlay on a phone, so the video is not crushed", async () => {
+    setStageWidth(390);
+    const node = new FakeNode({ peers: [{ identity: "a", name: "Ann" }, { identity: "b", name: "Ben" }] });
+    const { getByTestId, getByText } = mount(node, <CallStage />);
+    await waitFor(() => expect(getByText("Raise hand")).toBeTruthy());
+
+    fireEvent.click(getByTestId("toggle-people"));
+    const overlay = await waitFor(() => getByTestId("call-panel-overlay"));
+    // The panel COVERS the stage (absolute, full inset) rather than taking a
+    // slice of the row.
+    expect(overlay.style.position).toBe("absolute");
+    expect(overlay.style.inset).toBe("0");
+    const panel = getByTestId("call-side-panel");
+    expect(panel.style.width).toBe("100%");
+  });
+})