fix(call): device disconnect recovery — sequential pickers, speaker auto-recovery, picker key fix

.github/workflows/playwright_component.yml

@@ -2,12 +2,17 @@ name: Playwright Component Tests
 
 on:
   push:
+    branches: [main]
   pull_request:
 
 jobs:
   playwright-component-tests:
     timeout-minutes: 15
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chromium, firefox, webkit]
 
     steps:
       - name: Checkout
@@ -25,15 +30,15 @@ jobs:
         run: cd client && npm ci
 
       - name: Install Playwright browsers
-        run: npx playwright install --with-deps chromium
+        run: npx playwright install --with-deps ${{ matrix.browser }}
 
       - name: Run Playwright component tests (mocked)
-        run: npx playwright test --config playwright/playwright.config.mjs "video-call/mocked"
+        run: npx playwright test --config playwright/playwright.config.mjs "video-call/mocked" --project=${{ matrix.browser }} --workers=2
 
       - name: Upload test results
         uses: actions/upload-artifact@v4
         if: failure()
         with:
-          name: playwright-report
+          name: playwright-report-${{ matrix.browser }}
           path: playwright-report/
           retention-days: 7

.gitignore

@@ -116,3 +116,7 @@ deliberation-empirica.tar.zst
 
 # Local bind-mounted assets (not part of repo)
 assets/
+
+# Playwright test artifacts
+test-results/
+playwright-report/

CLAUDE.md

@@ -2,6 +2,14 @@
 
 Small-group deliberation experiment platform built on [Empirica](https://empirica.ly/). Participants join via a React client; a Node.js server handles game lifecycle, external integrations, and data export.
 
+## AI Assistant Model Selection
+
+**Default Model**: This project uses **Claude Sonnet** by default for cost efficiency and speed.
+
+**Model Warning**: If you detect that Opus is being used but the user hasn't explicitly switched to it (via `/model opus`), warn the user before performing any tasks. Ask if they intended to use Opus or if they'd like to switch to Sonnet.
+
+**When to use Opus**: Only switch to Opus when the user explicitly requests it for tasks requiring maximum reasoning capability (complex architectural decisions, debugging intricate logic, etc.).
+
 ## Repo Structure
 
 - `client/src/` — React UI: `App.jsx` (intro/exit), `Stage.jsx` (game stages), `elements/` (stage elements), `call/` (Daily video), `components/` (shared UI)
@@ -56,6 +64,7 @@ npx playwright test --config playwright/playwright.config.mjs "video-call/mocked
 | `VideoCall.deviceAlignment.ct.jsx` | Device ID alignment effect |
 
 **In-page test controls (via `page.evaluate`):**
+
 - `window.mockCallObject._audioEnabled = false` — simulate muted mic
 - `window.mockCallObject._videoEnabled = false` — simulate muted camera
 - `window.mockCallObject._audioReadyState = 'ended'` — simulate ended mic track

client/src/call/Call.jsx

@@ -594,7 +594,7 @@ export function Call({ showSelfView = true, layout, rooms }) {
     });
 
     if (repairNeeded && !inCooldown) {
-      console.log("[Subscription] Applying updates:", updates);
+      console.log("[Subscription] Applying updates:", Object.keys(updates).join(", "));
       callObject.updateParticipants(updates);
       lastRepairAttemptRef.current = now;
 

client/src/call/CallBanner.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const variantClasses = {
+  warning: "bg-yellow-600",
+  error: "bg-red-600",
+  info: "bg-blue-600",
+};
+
+export function CallBanner({ visible, variant = "warning", children }) {
+  if (!visible) return null;
+
+  const classes = variantClasses[variant] || variantClasses.warning;
+
+  return (
+    <div
+      className={`absolute top-0 left-0 right-0 z-10 ${classes} px-4 py-2 text-center text-sm font-medium text-white`}
+    >
+      {children}
+    </div>
+  );
+}

client/src/call/FixAV.jsx

@@ -3,6 +3,7 @@ import * as Sentry from "@sentry/react";
 import { useDaily, useLocalSessionId, useDevices } from "@daily-co/daily-react";
 import { usePlayers } from "@empirica/core/player/classic/react";
 import { Button } from "../components/Button";
+import { Modal } from "../components/Modal";
 import { latestDesiredSubscriptions, currentRoomPositions } from "./Call";
 import {
   diagnoseIssues,
@@ -374,7 +375,11 @@ export function useFixAV(
     // Log to console (appears in Sentry breadcrumbs)
     console.log("[AV Issue]", summary, reportData);
 
-    // Send to Sentry with avIssueId tag for correlation
+    // Send to Sentry on submission (not on button click). We wait for the user to
+    // describe their problem so we can include their reported issues and the full
+    // diagnostic snapshot in the same event. A click-then-cancel is low signal;
+    // a submitted report with issues selected is the meaningful event to track.
+    // See: ERR-FixAV and WF-SENTRY-001 tests.
     if (Sentry?.captureMessage) {
       Sentry.captureMessage("reportedAVError", {
         level: recoverySummaryResult.status === "success" ? "info" : "error",
@@ -544,10 +549,9 @@ export function useFixAV(
 
   // Render modal JSX directly instead of as a component function to avoid
   // React unmounting/remounting on state changes (which would lose checkbox state)
-  const fixAVModal = showFixModal ? (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className="mx-4 w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
-        {/* Issue Selection State */}
+  const fixAVModal = (
+    <Modal isOpen={showFixModal} onClose={handleCancelFix}>
+      {/* Issue Selection State */}
         {modalState === "select" && (
           <>
             <h2 className="mb-4 text-lg font-semibold text-slate-900">
@@ -877,9 +881,8 @@ export function useFixAV(
             </div>
           </>
         )}
-      </div>
-    </div>
-  ) : null;
+    </Modal>
+  );
 
   return { openFixAV, fixAVModal };
 }

client/src/call/ReportMissing.jsx

@@ -14,6 +14,8 @@ import {
   useStageTimer,
 } from "@empirica/core/player/classic/react";
 import { Button } from "../components/Button";
+import { Modal } from "../components/Modal";
+import { Toast } from "../components/Toast";
 import { RadioGroup } from "../components/RadioGroup";
 import { useProgressLabel } from "../components/progressLabel";
 
@@ -25,17 +27,6 @@ export function useReportMissing() {
   return useContext(ReportMissingContext);
 }
 
-const MODAL_STYLES = {
-  position: "fixed",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  backgroundColor: "#FFF",
-  padding: "20px",
-  zIndex: 1000,
-  borderRadius: "10px",
-  boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
-};
 
 export function ReportMissingProvider({ children }) {
   const timeout = !window.Cypress ? 60 : 5; // seconds
@@ -105,24 +96,21 @@ function MissingParticipantRespond({ timeout, gracePeriod }) {
   );
 
   return (
-    <>
-      <div className="fixed top-0 z-50 left-0 bottom-0 right-0 bg-gray-500 bg-opacity-70 " />
-      <div style={MODAL_STYLES}>
-        <h1>Are you there?</h1>
-        <p>We hate to leave people with nobody to talk to. 🙂</p>
-        <p className="text-red-500">{`Please respond within ${timeRemaining} seconds`}</p>
-
-        <div className="flex justify-center mt-4 space-x-2">
-          <Button
-            className="inline-flex"
-            handleClick={checkIn}
-            testId="checkIn"
-          >
-            {`I'm here!`}
-          </Button>
-        </div>
+    <Modal isOpen>
+      <h1>Are you there?</h1>
+      <p>We hate to leave people with nobody to talk to. 🙂</p>
+      <p className="text-red-500">{`Please respond within ${timeRemaining} seconds`}</p>
+
+      <div className="flex justify-center mt-4 space-x-2">
+        <Button
+          className="inline-flex"
+          handleClick={checkIn}
+          testId="checkIn"
+        >
+          {`I'm here!`}
+        </Button>
       </div>
-    </>
+    </Modal>
   );
 }
 
@@ -244,98 +232,95 @@ function ReportParticipantMissing({
 
   return (
     <>
-      {modalOpen && (
-        <>
-          <div className="fixed top-0 z-50 left-0 bottom-0 right-0 bg-gray-500 bg-opacity-70 " />
-          <div style={MODAL_STYLES}>
-            <h1>Report Missing Participant</h1>
-            <p>Which of these best describes the situation?</p>
-            <RadioGroup
-              options={[
-                {
-                  key: "onlyOne",
-                  value: "I am the only one in the video call.",
-                },
-                {
-                  key: "noDiscussant",
-                  value:
-                    "Nobody else in the call is participating in the discussion.",
-                },
-                {
-                  key: "playerAbsent",
-                  value:
-                    "Not everybody is participating in the discussion, but I still have someone to talk with.",
-                },
-              ]}
-              selected={missingDetails}
-              onChange={(e) => setMissingDetails(e.target.value)}
-              testId="missingDetails"
-            />
-
-            {missingDetails === "onlyOne" && (
-              <p className="text-sm text-red-500">
-                {`We will wait ${timeout} seconds for others to arrive, otherwise we will
-                end the discussion.`}
-              </p>
-            )}
-
-            {missingDetails === "noDiscussant" && (
-              <p className="text-sm text-red-500">
-                {`We will give the others ${timeout} seconds to confirm their presence, or
-                we will end the discussion.`}
-              </p>
-            )}
-
-            {missingDetails === "playerAbsent" && (
-              <p className="text-sm text-red-500">
-                Thanks for letting us know. We will ask the others to confirm
-                their presence and continue the discussion.
-              </p>
-            )}
-
-            <div className="flex justify-center mt-4 space-x-2">
-              <Button
-                className="inline-flex"
-                primary
-                handleClick={handleSubmit}
-                testId="submitReportMissing"
-              >
-                Submit
-              </Button>
-              <Button
-                className="inline-flex"
-                primary={false}
-                handleClick={() => {
-                  setModalOpen(false);
-                  setMissingDetails("");
-                }}
-                testId="cancelReportMissing"
-              >
-                Cancel
-              </Button>
-            </div>
-          </div>
-        </>
-      )}
-
-      {waitingToastOpen && (
-        <div className="z-10 fixed bottom-20 right-20 w-80 h-20 bg-red-300 text-center align-middle flex flex-col items-center justify-center rounded-lg">
-          <p>Asking others to confirm their presence.</p>
-          <p>
-            {Math.max(
-              0,
-              Math.floor(timeout - (stageElapsed - timeResponseRequested))
-            )}{" "}
-            seconds remaining.
+      <Modal
+        isOpen={modalOpen}
+        onClose={() => {
+          setModalOpen(false);
+          setMissingDetails("");
+        }}
+      >
+        <h1>Report Missing Participant</h1>
+        <p>Which of these best describes the situation?</p>
+        <RadioGroup
+          options={[
+            {
+              key: "onlyOne",
+              value: "I am the only one in the video call.",
+            },
+            {
+              key: "noDiscussant",
+              value:
+                "Nobody else in the call is participating in the discussion.",
+            },
+            {
+              key: "playerAbsent",
+              value:
+                "Not everybody is participating in the discussion, but I still have someone to talk with.",
+            },
+          ]}
+          selected={missingDetails}
+          onChange={(e) => setMissingDetails(e.target.value)}
+          testId="missingDetails"
+        />
+
+        {missingDetails === "onlyOne" && (
+          <p className="text-sm text-red-500">
+            {`We will wait ${timeout} seconds for others to arrive, otherwise we will
+            end the discussion.`}
           </p>
-        </div>
-      )}
+        )}
+
+        {missingDetails === "noDiscussant" && (
+          <p className="text-sm text-red-500">
+            {`We will give the others ${timeout} seconds to confirm their presence, or
+            we will end the discussion.`}
+          </p>
+        )}
 
-      {successToastOpen && (
-        <div className="z-10 fixed bottom-20 right-20 w-80 h-20 bg-green-300 text-center align-middle flex flex-col items-center justify-center rounded-lg">
-          <p>At least one other person has confirmed their presence.</p>
+        {missingDetails === "playerAbsent" && (
+          <p className="text-sm text-red-500">
+            Thanks for letting us know. We will ask the others to confirm
+            their presence and continue the discussion.
+          </p>
+        )}
+
+        <div className="flex justify-center mt-4 space-x-2">
+          <Button
+            className="inline-flex"
+            primary
+            handleClick={handleSubmit}
+            testId="submitReportMissing"
+          >
+            Submit
+          </Button>
+          <Button
+            className="inline-flex"
+            primary={false}
+            handleClick={() => {
+              setModalOpen(false);
+              setMissingDetails("");
+            }}
+            testId="cancelReportMissing"
+          >
+            Cancel
+          </Button>
         </div>
-      )}
+      </Modal>
+
+      <Toast visible={waitingToastOpen} variant="warning">
+        <p>Asking others to confirm their presence.</p>
+        <p>
+          {Math.max(
+            0,
+            Math.floor(timeout - (stageElapsed - timeResponseRequested))
+          )}{" "}
+          seconds remaining.
+        </p>
+      </Toast>
+
+      <Toast visible={successToastOpen} variant="success">
+        <p>At least one other person has confirmed their presence.</p>
+      </Toast>
     </>
   );
 }