Fix recording sync, auto-fill name from WAV, refresh moves list

- Apply AUDIO_LEAD_MS compensation during recording too: start uploaded
audio 320ms before capture so the user hears it in sync. Without this,
the recorded motion was 320ms ahead of the audio content, causing
desync on playback.
- Auto-fill recording name from uploaded WAV filename (upload + robot).
- Refresh moves list when mode transitions from busy to idle, so newly
recorded moves appear immediately without needing a page reload.

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

marionette/recording.py

@@ -218,11 +218,20 @@ class RecordingMixin:
 
         # When using uploaded audio, don't record from mic (audio comes from the file)
         should_record_mic = request.record_audio and not request.uploaded_audio_path
+
+        # Start uploaded audio BEFORE capture so the user hears it in sync.
+        # The same AUDIO_LEAD_MS compensation as playback: audio needs this
+        # head-start to traverse the GStreamer pipeline before reaching the
+        # speaker.  Without this, the user hears the audio ~320ms late and
+        # their recorded motion ends up 320ms ahead of the audio content.
+        if audio_thread is not None:
+            audio_start.set()
+            time.sleep(AUDIO_LEAD_MS / 1000.0)
+
         try:
             timestamps, frames, audio_frames, audio_samplerate = self._capture_motion(
                 reachy_mini, stop_event, request.duration, should_record_mic,
                 record_motion=request.record_motion,
-                on_capture_start=(audio_start.set if audio_thread is not None else None),
             )
         finally:
             # Unblock the audio thread's start_signal.wait() first, then

marionette/static/main.js

@@ -203,8 +203,10 @@ function updateUI(s) {
     $modeBadge.dataset.mode = s.mode;
   }
 
-  // ── Busy flag ──
+  // ── Busy flag + refresh moves after recording/playback completes ──
+  const wasBusy = busy;
   busy = !['idle', 'queued'].includes(s.mode);
+  if (wasBusy && !busy) movesListDirty = true;
 
   // ── Record buttons state ──
   const activeEntry = s.datasets?.entries?.find(e => e.id === s.datasets?.active_id);
@@ -825,6 +827,10 @@ async function uploadAudioFile(file) {
     if (data.duration && $recDuration) {
       $recDuration.value = (Math.round(data.duration * 10) / 10).toFixed(1);
     }
+    // Auto-fill recording name from the audio filename (without extension)
+    if (!$recName.value.trim()) {
+      $recName.value = file.name.replace(/\.[^.]+$/, '');
+    }
   } catch (e) {
     $audioUploadStatus.textContent = 'Failed: ' + e.message;
     uploadedAudioId = null;
@@ -890,6 +896,10 @@ async function selectRobotAudio() {
     if (data.duration && $recDuration) {
       $recDuration.value = (Math.round(data.duration * 10) / 10).toFixed(1);
     }
+    // Auto-fill recording name from the robot audio filename (without extension)
+    if (!$recName.value.trim() && data.filename) {
+      $recName.value = data.filename.replace(/\.[^.]+$/, '');
+    }
   } catch (e) {
     console.error('Robot audio select error:', e);
   }