fix: make voice recording stoppable

Co-authored-by: Codex <noreply@openai.com>

static/app.js

@@ -50,6 +50,7 @@ let voiceBusy = false;
 let voiceRecorder = null;
 let voiceStream = null;
 let voiceChunks = [];
+let voiceRecordingState = "idle";
 
 bootstrap().catch(handleBootstrapError);
 
@@ -99,7 +100,7 @@ recordVoiceButton.addEventListener("click", async () => {
 });
 
 uploadVoiceButton.addEventListener("click", () => {
-  if (uploadVoiceButton.disabled || voiceBusy || sessionControlsLocked) return;
+  if (uploadVoiceButton.disabled || voiceBusy || sessionControlsLocked || voiceRecordingState !== "idle") return;
   voiceFileInput.click();
 });
 
@@ -234,19 +235,23 @@ async function runCommand(command) {
 }
 
 async function toggleVoiceRecording() {
-  if (voiceRecorder?.state === "recording") {
-    voiceRecorder.stop();
+  if (voiceRecordingState === "recording" && voiceRecorder?.state === "recording") {
+    stopVoiceRecording();
     return;
   }
+  if (voiceRecordingState !== "idle") return;
   await startVoiceRecording();
 }
 
 async function startVoiceRecording() {
-  if (sessionControlsLocked || voiceBusy) return;
+  if (sessionControlsLocked || voiceBusy || voiceRecordingState !== "idle") return;
   if (!navigator.mediaDevices?.getUserMedia || !window.MediaRecorder) {
     setSessionStatus("Voice recording is not available in this browser. Upload a voice note instead.");
     return;
   }
+  setVoiceRecordingState("starting");
+  submit.disabled = true;
+  setCommandDisabled(true);
   try {
     voiceStream = await navigator.mediaDevices.getUserMedia({ audio: true });
     voiceChunks = [];
@@ -257,32 +262,57 @@ async function startVoiceRecording() {
     });
     voiceRecorder.addEventListener("stop", () => {
       const recorderMimeType = voiceRecorder?.mimeType || mimeType || "audio/webm";
+      const recordedChunks = voiceChunks;
       stopVoiceStream();
       const extension = recorderMimeType.includes("mp4")
         ? "m4a"
         : recorderMimeType.includes("ogg")
           ? "ogg"
           : "webm";
-      const blob = new Blob(voiceChunks, { type: recorderMimeType });
+      const blob = new Blob(recordedChunks, { type: recorderMimeType });
       voiceRecorder = null;
       voiceChunks = [];
-      setActionButtonLabel(recordVoiceButton, "Speak");
-      setVoiceControlsDisabled(false);
+      if (!blob.size) {
+        setVoiceRecordingState("idle");
+        submit.disabled = false;
+        setCommandDisabled(false);
+        setSessionStatus("Voice note is empty.");
+        return;
+      }
+      setVoiceRecordingState("transcribing");
       transcribeVoiceBlob(blob, `recorded-idea.${extension}`);
     });
     voiceRecorder.start();
-    setActionButtonLabel(recordVoiceButton, "Stop");
-    setVoiceControlsDisabled(false);
+    setVoiceRecordingState("recording");
     setSessionStatus("Listening. Press Stop when your idea is ready.");
   } catch (error) {
     stopVoiceStream();
     voiceRecorder = null;
-    setActionButtonLabel(recordVoiceButton, "Speak");
-    setVoiceControlsDisabled(false);
+    voiceChunks = [];
+    setVoiceRecordingState("idle");
+    submit.disabled = false;
+    setCommandDisabled(false);
     setSessionStatus(`Voice recording could not start: ${error.message}`);
   }
 }
 
+function stopVoiceRecording() {
+  if (!voiceRecorder || voiceRecorder.state !== "recording") return;
+  setVoiceRecordingState("stopping");
+  setSessionStatus("Stopping recording.");
+  try {
+    voiceRecorder.stop();
+  } catch (error) {
+    stopVoiceStream();
+    voiceRecorder = null;
+    voiceChunks = [];
+    setVoiceRecordingState("idle");
+    submit.disabled = false;
+    setCommandDisabled(false);
+    setSessionStatus(`Voice recording could not stop: ${error.message}`);
+  }
+}
+
 function recordingMimeType() {
   const candidates = ["audio/webm;codecs=opus", "audio/webm", "audio/ogg;codecs=opus", "audio/mp4"];
   return candidates.find((type) => MediaRecorder.isTypeSupported(type)) || "";
@@ -296,18 +326,18 @@ function stopVoiceStream() {
 
 async function transcribeVoiceBlob(blob, filename) {
   if (sessionControlsLocked || voiceBusy) return false;
+  if (voiceRecordingState !== "idle" && voiceRecordingState !== "transcribing") return false;
   if (!blob?.size) {
     setSessionStatus("Voice note is empty.");
     return false;
   }
   const revision = bumpSessionRevision();
   voiceBusy = true;
+  setVoiceRecordingState("transcribing");
   submit.disabled = true;
   input.disabled = true;
   setCommandDisabled(true);
   setSessionControlsDisabled(true);
-  setVoiceControlsDisabled(true);
-  setActionButtonLabel(recordVoiceButton, "Hearing...");
   setSessionStatus("Transcribing voice note.");
   try {
     const formData = new FormData();
@@ -331,13 +361,12 @@ async function transcribeVoiceBlob(blob, filename) {
     return false;
   } finally {
     voiceBusy = false;
-    setActionButtonLabel(recordVoiceButton, "Speak");
+    setVoiceRecordingState("idle");
     if (isCurrentSessionRevision(revision)) {
       submit.disabled = false;
       input.disabled = false;
       setSessionControlsDisabled(false);
       setCommandDisabled(false);
-      setVoiceControlsDisabled(false);
       input.focus();
     }
   }
@@ -486,9 +515,26 @@ function setSessionControlsDisabled(disabled) {
 }
 
 function setVoiceControlsDisabled(disabled) {
-  const recording = voiceRecorder?.state === "recording";
-  recordVoiceButton.disabled = voiceBusy || (disabled && !recording) || !bootstrapData;
-  uploadVoiceButton.disabled = voiceBusy || recording || disabled || !bootstrapData;
+  const recording = voiceRecordingState === "recording" && voiceRecorder?.state === "recording";
+  const lockedForState = ["starting", "stopping", "transcribing"].includes(voiceRecordingState);
+  recordVoiceButton.disabled = !bootstrapData || voiceBusy || lockedForState || (disabled && !recording);
+  uploadVoiceButton.disabled = !bootstrapData || voiceBusy || disabled || voiceRecordingState !== "idle";
+}
+
+function setVoiceRecordingState(state) {
+  voiceRecordingState = state;
+  recordVoiceButton.dataset.voiceState = state;
+  recordVoiceButton.classList.toggle("recording", state === "recording");
+  recordVoiceButton.setAttribute("aria-pressed", state === "recording" ? "true" : "false");
+  const labels = {
+    idle: "Speak",
+    starting: "Starting...",
+    recording: "Stop",
+    stopping: "Stopping...",
+    transcribing: "Hearing...",
+  };
+  setActionButtonLabel(recordVoiceButton, labels[state] || "Speak");
+  setVoiceControlsDisabled(sessionControlsLocked);
 }
 
 function resetSession() {

static/styles.css

@@ -364,6 +364,16 @@ textarea:disabled {
   border-color: #265935;
 }
 
+.btn-voice.recording {
+  background: var(--oxblood);
+  border-color: var(--oxblood);
+}
+
+.btn-voice.recording:hover:not(:disabled) {
+  background: var(--oxblood-2);
+  border-color: var(--oxblood-2);
+}
+
 .btn-ghost {
   color: var(--ink-soft);
   background: transparent;

tests/test_frontend_copy.py

@@ -15,6 +15,10 @@ def test_main_interface_copy_is_builder_facing() -> None:
     assert "/api/agent-turn" in app_js
     assert "/api/transcribe" in app_js
     assert "MediaRecorder" in app_js
+    assert "voiceRecordingState" in app_js
+    assert "stopVoiceRecording" in app_js
+    assert 'recording: "Stop"' in app_js
+    assert 'stopping: "Stopping..."' in app_js
     assert "readNdjson" in app_js
     assert "@gradio/client" not in app_js
     assert "renderArtifactCanvas" not in app_js