fix: show RadioGroup immediately on Play click, log audioPlaying event

The RadioGroup was gated on play() resolving, so if the promise hung
the user would be stuck with no way to respond. Now shows the options
immediately when Play is clicked. Also logs an "audioPlaying" setupStep
when the browser's playing event fires, so we can tell in future
investigations whether audio actually started.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: JamesPHoughton

client/src/intro-exit/setup/HeadphonesCheck.jsx

@@ -138,7 +138,16 @@ export function HeadphonesCheck({ setHeadphonesStatus, setErrorMessage }) {
   useEffect(() => {
     const audio = audioRef.current;
     if (!audio) return undefined;
-    const onPlaying = () => setIsPlaying(true);
+    const onPlaying = () => {
+      setIsPlaying(true);
+      player.append("setupSteps", {
+        step: "headphonesCheck",
+        event: "audioPlaying",
+        errors: [],
+        debug: {},
+        timestamp: new Date().toISOString(),
+      });
+    };
     const onEnded = () => setIsPlaying(false);
     const onPause = () => setIsPlaying(false);
     audio.addEventListener("playing", onPlaying);
@@ -149,17 +158,19 @@ export function HeadphonesCheck({ setHeadphonesStatus, setErrorMessage }) {
       audio.removeEventListener("ended", onEnded);
       audio.removeEventListener("pause", onPause);
     };
-  }, []);
+  }, [player]);
 
   const chime = () => {
     if (audioRef.current) {
       setHeadphonesStatus("started");
+      // Show the RadioGroup immediately so the user can respond even if
+      // play() hangs or the sound doesn't reach their ears.
+      setSoundPlayed(true);
       audioRef.current.currentTime = 0;
       audioRef.current
         .play()
         .then(() => {
           console.log(`Playing Chime`);
-          setSoundPlayed(true);
         })
         .catch((error) => {
           console.error("Error playing chime:", error);