Simplify recording form: Name + Duration + Record in one row

P1 UX overhaul part 1:
- Remove description field (rarely used, cluttered the form)
- Rename "Move label (optional)" to "Name"
- Move audio source into collapsible "Options" panel
- Add horizontal radio layout for audio source options
- Add big countdown number display for countdown/recording phases
- Hide number input spinners (cleaner look)
- Update E2E tests for new layout (+4 new tests)

marionette/static/index.html

@@ -21,61 +21,63 @@
         <h2>Record a Move</h2>
 
         <form id="record-form">
-          <div class="field-group">
-            <label for="duration">Duration (seconds)</label>
-            <input
-              id="duration"
-              name="duration"
-              type="number"
-              min="0.5"
-              max="300"
-              step="any"
-              required
-            />
-          </div>
-          <div class="field-group">
-            <label for="label">Move label (optional)</label>
-            <input id="label" name="label" type="text" maxlength="80" placeholder="e.g. gentle-nod" />
-          </div>
-          <div class="field-group">
-            <label for="description">Description (optional)</label>
-            <textarea
-              id="description"
-              name="description"
-              maxlength="500"
-              rows="2"
-              placeholder="Notes about the intent, feeling, or context."
-            ></textarea>
-          </div>
-          <div class="field-group audio-source-group">
-            <label>Audio source</label>
-            <div class="radio-group">
-              <label class="radio-option">
-                <input type="radio" name="audio-source" id="audio-source-mic" value="mic" checked />
-                <span>Record from robot's mic</span>
-              </label>
-              <label class="radio-option">
-                <input type="radio" name="audio-source" id="audio-source-upload" value="upload" />
-                <span>Upload audio file</span>
-              </label>
-              <label class="radio-option">
-                <input type="radio" name="audio-source" id="audio-source-none" value="none" />
-                <span>No audio (silent)</span>
-              </label>
+          <div class="record-main-fields">
+            <div class="field-group">
+              <label for="label">Name</label>
+              <input id="label" name="label" type="text" maxlength="80" placeholder="e.g. gentle-nod" />
             </div>
-            <span class="hint" id="audio-hint"></span>
-          </div>
-          <div class="field-group audio-upload-group" id="audio-upload-group" hidden>
-            <label>Audio file (WAV or MP3)</label>
-            <input type="file" id="audio-file" accept=".wav,.mp3,audio/wav,audio/mpeg" />
-            <button type="button" class="audio-upload-btn" id="audio-upload-btn">Choose file...</button>
-            <p class="hint" id="upload-status">The audio will be played when recording starts, so you can perform in sync.</p>
+            <div class="field-group">
+              <label for="duration">Duration (s)</label>
+              <input
+                id="duration"
+                name="duration"
+                type="number"
+                min="0.5"
+                max="300"
+                step="any"
+                required
+              />
+            </div>
+            <button type="submit" class="primary-btn record-submit" id="record-btn">Record</button>
           </div>
-          <button type="submit" class="primary-btn" id="record-btn">Start Recording</button>
+
+          <details class="record-options" id="record-options">
+            <summary>Options</summary>
+            <div class="record-options-content">
+              <div class="field-group">
+                <label>Audio source</label>
+                <div class="radio-group horizontal">
+                  <label class="radio-option">
+                    <input type="radio" name="audio-source" id="audio-source-mic" value="mic" checked />
+                    <span>Mic</span>
+                  </label>
+                  <label class="radio-option">
+                    <input type="radio" name="audio-source" id="audio-source-upload" value="upload" />
+                    <span>Upload</span>
+                  </label>
+                  <label class="radio-option">
+                    <input type="radio" name="audio-source" id="audio-source-none" value="none" />
+                    <span>Silent</span>
+                  </label>
+                </div>
+                <span class="hint" id="audio-hint"></span>
+              </div>
+              <div class="field-group audio-upload-group" id="audio-upload-group" hidden>
+                <label>Audio file (WAV or MP3)</label>
+                <input type="file" id="audio-file" accept=".wav,.mp3,audio/wav,audio/mpeg" />
+                <button type="button" class="audio-upload-btn" id="audio-upload-btn">Choose file...</button>
+                <p class="hint" id="upload-status">Audio plays when recording starts so you can perform in sync.</p>
+              </div>
+            </div>
+          </details>
         </form>
 
         <div class="progress-area" id="progress-area">
           <p id="primary-status">Ready.</p>
+          <div class="phase-display hidden" id="phase-display">
+            <div class="phase-countdown-number" id="countdown-number"></div>
+            <div class="phase-label" id="phase-label"></div>
+          </div>
           <div class="meter" id="progress-meter">
             <div class="meter-fill" id="progress-fill"></div>
           </div>

marionette/static/main.js

@@ -18,8 +18,10 @@ const audioUploadGroup = document.getElementById("audio-upload-group");
 const audioFileInput = document.getElementById("audio-file");
 const audioUploadBtn = document.getElementById("audio-upload-btn");
 const uploadStatus = document.getElementById("upload-status");
-const descriptionInput = document.getElementById("description");
 const recordBtn = document.getElementById("record-btn");
+const phaseDisplay = document.getElementById("phase-display");
+const countdownNumber = document.getElementById("countdown-number");
+const phaseLabel = document.getElementById("phase-label");
 const refreshBtn = document.getElementById("refresh-btn");
 const movesList = document.getElementById("moves-list");
 const recordForm = document.getElementById("record-form");
@@ -351,7 +353,6 @@ async function queueRecording(event) {
 
   const duration = parseFloat(durationInput.value || lastState?.config?.default_duration || 5);
   const label = labelInput.value.trim() || null;
-  const description = descriptionInput.value.trim() || null;
 
   // Determine audio settings from radio selection
   const audioSource = document.querySelector('input[name="audio-source"]:checked')?.value || "mic";
@@ -368,7 +369,7 @@ async function queueRecording(event) {
   recordBtn.textContent = "Queuing…";
 
   try {
-    const payload = { duration, record_audio: recordAudio, label, description };
+    const payload = { duration, record_audio: recordAudio, label };
     if (audioId) {
       payload.uploaded_audio_id = audioId;
     }
@@ -761,6 +762,10 @@ function updateProgressDisplay() {
   if (phaseStartAt == null || phaseEndAt == null) {
     progressFill.style.width = "0%";
     countdownEl.textContent = "";
+    if (phaseDisplay) {
+      phaseDisplay.classList.add("hidden");
+      phaseDisplay.classList.remove("countdown", "recording");
+    }
     return;
   }
 
@@ -774,10 +779,26 @@ function updateProgressDisplay() {
 
   if (phaseMode === "countdown") {
     countdownEl.textContent = `Get ready… ${remaining.toFixed(1)}s`;
+    if (phaseDisplay) {
+      phaseDisplay.classList.remove("hidden", "recording");
+      phaseDisplay.classList.add("countdown");
+      countdownNumber.textContent = Math.ceil(remaining);
+      phaseLabel.textContent = "Get ready";
+    }
   } else if (phaseMode === "recording") {
     countdownEl.textContent = `Recording… ${remaining.toFixed(1)}s`;
+    if (phaseDisplay) {
+      phaseDisplay.classList.remove("hidden", "countdown");
+      phaseDisplay.classList.add("recording");
+      countdownNumber.textContent = remaining.toFixed(1);
+      phaseLabel.textContent = "Recording";
+    }
   } else {
     countdownEl.textContent = "";
+    if (phaseDisplay) {
+      phaseDisplay.classList.add("hidden");
+      phaseDisplay.classList.remove("countdown", "recording");
+    }
   }
 }
 

marionette/static/style.css

@@ -90,12 +90,125 @@ h1 {
 }
 
 .recording-panel form {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  display: flex;
+  flex-direction: column;
   gap: 1rem;
   margin-bottom: 1.25rem;
 }
 
+.record-main-fields {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.75rem;
+}
+
+.record-main-fields .field-group {
+  flex: 1;
+  min-width: 0;
+}
+
+.record-main-fields .record-submit {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+/* Hide number input spinners */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+/* Collapsible options */
+.record-options {
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 0;
+  overflow: hidden;
+}
+
+.record-options summary {
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--muted);
+  cursor: pointer;
+  list-style: none;
+  padding: 0.75rem 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.record-options summary::after {
+  content: "▾";
+  font-size: 0.75rem;
+  margin-left: auto;
+}
+
+.record-options[open] summary::after {
+  content: "▴";
+}
+
+.record-options-content {
+  padding: 0 1rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.radio-group.horizontal {
+  flex-direction: row;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.radio-group.horizontal .radio-option {
+  flex: 1;
+  min-width: 0;
+  justify-content: center;
+  text-align: center;
+}
+
+/* Big phase display for countdown / recording */
+.phase-display {
+  text-align: center;
+  padding: 1.5rem 0;
+}
+
+.phase-display.hidden {
+  display: none;
+}
+
+.phase-countdown-number {
+  font-size: clamp(3rem, 8vw, 5rem);
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.04em;
+  font-variant-numeric: tabular-nums;
+}
+
+.phase-display.countdown .phase-countdown-number {
+  color: #38bdf8;
+}
+
+.phase-display.recording .phase-countdown-number {
+  color: #ef4444;
+}
+
+.phase-label {
+  font-size: 1rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--muted);
+  margin-top: 0.25rem;
+}
+
 .dataset-controls {
   display: flex;
   align-items: flex-end;
@@ -295,12 +408,7 @@ textarea {
   cursor: pointer;
 }
 
-.audio-source-group {
-  grid-column: 1 / -1;
-}
-
 .audio-upload-group {
-  grid-column: 1 / -1;
   padding: 1rem;
   background: rgba(249, 115, 22, 0.08);
   border: 1px dashed rgba(249, 115, 22, 0.3);
@@ -658,8 +766,17 @@ code {
     padding: 1.5rem 1rem 2rem;
   }
 
-  .recording-panel form {
-    grid-template-columns: 1fr;
+  .record-main-fields {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .record-main-fields .record-submit {
+    width: 100%;
+  }
+
+  .radio-group.horizontal {
+    flex-direction: column;
   }
 
   .moves-list li {

tests/e2e/test_ui.py

@@ -59,10 +59,33 @@ class TestIdleState:
         width = fill.evaluate("el => el.style.width")
         assert width == "0%" or width == ""
 
+    def test_phase_display_hidden_when_idle(self, page: Page, base_url: str):
+        page.goto(base_url)
+        page.wait_for_timeout(2000)
+        expect(page.locator("#phase-display")).to_be_hidden()
+
 
 # ──────── Form validation tests ───────────────────────────────────────
 
 
+class TestSimplifiedForm:
+    def test_name_and_duration_visible_by_default(self, page: Page, base_url: str):
+        page.goto(base_url)
+        expect(page.locator("#label")).to_be_visible()
+        expect(page.locator("#duration")).to_be_visible()
+        expect(page.locator("#record-btn")).to_be_visible()
+
+    def test_options_collapsed_by_default(self, page: Page, base_url: str):
+        """Audio source should be hidden in Options until user expands it."""
+        page.goto(base_url)
+        expect(page.locator("#audio-source-mic")).to_be_hidden()
+
+    def test_description_field_removed(self, page: Page, base_url: str):
+        """P1: description field was removed to simplify the form."""
+        page.goto(base_url)
+        assert page.locator("#description").count() == 0
+
+
 class TestFormValidation:
     def test_duration_field_exists(self, page: Page, base_url: str):
         page.goto(base_url)
@@ -91,6 +114,8 @@ class TestFormValidation:
 
     def test_audio_source_radios_exist(self, page: Page, base_url: str):
         page.goto(base_url)
+        # Audio source is inside collapsible Options — open it first
+        page.locator("#record-options summary").click()
         expect(page.locator("#audio-source-mic")).to_be_visible()
         expect(page.locator("#audio-source-none")).to_be_visible()
 
@@ -107,7 +132,8 @@ class TestRecordingSubmission:
         page.goto(base_url)
         page.wait_for_timeout(2000)
 
-        # Set audio source to "none" to avoid audio backend requirement
+        # Open Options and set audio source to "none" to avoid audio backend requirement
+        page.locator("#record-options summary").click()
         page.locator("#audio-source-none").check()
         page.locator("#duration").fill("2")
         page.locator("#label").fill("e2e-test")