Simplify MIDI Studio V2 export controls to Type dropdown and Save button - PR_26146_034-midi-studio-v2-export-ui-simplification

Author: ToolboxAid

docs/dev/reports/PR_26146_034-midi-studio-v2-export-ui-simplification_validation.md

@@ -0,0 +1,92 @@
+# PR_26146_034-midi-studio-v2-export-ui-simplification Validation
+
+Status: PASS
+
+## Scope
+
+- Continued from `PR_26146_033-midi-studio-v2-implementation-audit-and-left-column-fit`.
+- Simplified MIDI Studio V2 rendered export controls to one `Type` dropdown plus one `Save` button.
+- Removed duplicate `Export WAV`, `Export MP3`, and `Export OGG` NAV actions.
+- Preserved dropdown values: `WAV`, `MP3`, and `OGG`.
+- Kept export behavior centralized through the selected dropdown type and Save action.
+- Preserved manifest import, octave timeline editing, playback, Play/Stop, instrument controls, 350px left column sizing, roadmap files, and audit files.
+
+## Changed Files
+
+- `tools/midi-studio-v2/index.html`
+- `tools/midi-studio-v2/js/bootstrap.js`
+- `tools/midi-studio-v2/js/controls/RenderedExportActionsControl.js`
+- `tools/midi-studio-v2/styles/midiStudioV2.css`
+- `tests/playwright/tools/MidiStudioV2.spec.mjs`
+- `docs/dev/reports/PR_26146_034-midi-studio-v2-export-ui-simplification_validation.md`
+- `docs/dev/reports/codex_review.diff`
+- `docs/dev/reports/codex_changed_files.txt`
+- `docs/dev/reports/playwright_v8_coverage_report.txt`
+- `docs/dev/reports/coverage_changed_js_guardrail.txt`
+- `docs/dev/codex_commands.md`
+- `docs/dev/commit_comment.txt`
+
+## Validation Commands
+
+```powershell
+node --check tools/midi-studio-v2/js/bootstrap.js
+node --check tools/midi-studio-v2/js/controls/RenderedExportActionsControl.js
+node --check tests/playwright/tools/MidiStudioV2.spec.mjs
+node -e "const fs=require('fs'); const p='tools/midi-studio-v2/styles/midiStudioV2.css'; const css=fs.readFileSync(p,'utf8'); if(/\/\*[^]*$/.test(css.replace(/\/\*[^]*?\*\//g,''))) throw new Error('Unclosed CSS comment'); let depth=0; for (const ch of css.replace(/\/\*[^]*?\*\//g,'')) { if (ch==='{') depth++; if (ch==='}') depth--; if (depth<0) throw new Error('Unexpected }'); } if (depth!==0) throw new Error('Unbalanced CSS braces'); console.log('CSS syntax guard passed:', p);"
+node -e "const fs=require('fs'); const p='tools/midi-studio-v2/index.html'; const html=fs.readFileSync(p,'utf8'); if(/<script(?![^>]*\ssrc=)[^>]*>/i.test(html)) throw new Error('Inline script block found'); if(/<style\b/i.test(html)) throw new Error('Inline style block found'); if(/\son[a-z]+\s*=/i.test(html)) throw new Error('Inline event handler found'); console.log('HTML external-only guard passed:', p);"
+npx.cmd playwright test tests/playwright/tools/MidiStudioV2.spec.mjs -g "launches and renders a valid multi-song manifest payload|exports through Type dropdown and Save without claiming files were written|fast octave note editing supports drag painting keyboard shortcuts selection and timeline scroll sync" --config=codex_playwright_system_chrome.config.cjs --reporter=list --workers=1 --timeout=60000
+git diff --check
+```
+
+## Results
+
+- PASS: changed JavaScript files passed `node --check`.
+- PASS: changed CSS passed the CSS brace/comment syntax guard.
+- PASS: changed HTML passed the external-only script/style/event-handler guard.
+- PASS: targeted MIDI Studio V2 Playwright run passed, `3 passed`.
+- PASS: `git diff --check` exited successfully. Git reported only line-ending notices for tracked files.
+- PASS: Playwright V8 coverage artifacts were refreshed:
+  - `docs/dev/reports/playwright_v8_coverage_report.txt`
+  - `docs/dev/reports/coverage_changed_js_guardrail.txt`
+
+## Playwright Proof
+
+The targeted MIDI Studio V2 Playwright run validates:
+
+- duplicate `Export WAV`, `Export MP3`, and `Export OGG` buttons are removed.
+- `Type` dropdown exists in the tool NAV.
+- `Type` dropdown contains `WAV`, `MP3`, and `OGG`.
+- `Save` button exists.
+- `Type` dropdown and `Save` button fit together in the existing toolbar layout.
+- `Save` uses the currently selected dropdown type for `WAV`, `MP3`, and `OGG`.
+- unavailable export rendering logs honest WARN messages with planned target paths.
+- missing selected rendered target still fails visibly.
+- manifest import and initial MIDI Studio rendering still work.
+- fast octave editing, keyboard shortcuts, selection highlight, timeline scroll sync, and Play/Stop behavior still work.
+
+## Lanes
+
+- runtime: executed because this PR changes MIDI Studio V2 UI controls and export click behavior.
+- contract/docs: executed through required validation/report artifacts; roadmap/audit files were preserved and not modified.
+- integration: skipped because Workspace Manager handoff contracts did not change.
+- engine: skipped because no engine/shared runtime files changed.
+- samples: skipped by explicit PR instruction. Full samples smoke test was not run.
+- recovery/UAT: covered only for the MIDI Studio V2 export UI simplification slice named by this PR.
+
+## Manual Validation Notes
+
+1. Open `tools/midi-studio-v2/index.html`.
+2. Import `tests/fixtures/midi-studio-v2/uat-midi-studio-v2.game.manifest.json`.
+3. Confirm the top NAV shows `Type` with `WAV`, `MP3`, and `OGG`, plus one `Save` button.
+4. Confirm there are no separate `Export WAV`, `Export MP3`, or `Export OGG` buttons.
+5. Select each Type and click Save; expected result is a WARN that export rendering is not implemented and identifies the selected planned target.
+6. Verify Play and Stop still work and octave timeline note editing still responds.
+
+## Out Of Scope
+
+- Full samples smoke test.
+- SoundFont playback.
+- Implementing rendered WAV/MP3/OGG export rendering.
+- DAW mixer complexity.
+- Automation lanes.
+- Any roadmap or implementation-audit status changes.

tests/playwright/tools/MidiStudioV2.spec.mjs

@@ -1226,12 +1226,15 @@ test.describe("MIDI Studio V2", () => {
       const renderedHeader = page.locator('.accordion-v2__header[aria-controls="renderedTargetsContent"]');
       await expect(renderedHeader).toContainText("Rendered Export Targets");
       await expect(renderedHeader.locator("#exportWavButton")).toHaveCount(0);
+      await expect(page.locator("#exportWavButton")).toHaveCount(0);
+      await expect(page.locator("#exportMp3Button")).toHaveCount(0);
+      await expect(page.locator("#exportOggButton")).toHaveCount(0);
       await expect(page.locator(".midi-studio-v2__tool-menu #toolImportManifestButton")).toBeVisible();
       await expect(page.locator(".midi-studio-v2__tool-menu #loadExampleAndPlayButton")).toHaveCount(0);
       await expect(page.locator(".midi-studio-v2__tool-menu #stopAllAudioButton")).toBeVisible();
-      await expect(page.locator(".midi-studio-v2__tool-menu #exportWavButton")).toBeVisible();
-      await expect(page.locator(".midi-studio-v2__tool-menu #exportMp3Button")).toBeVisible();
-      await expect(page.locator(".midi-studio-v2__tool-menu #exportOggButton")).toBeVisible();
+      await expect(page.locator('.midi-studio-v2__tool-menu label[for="renderedExportTargetTypeSelect"]')).toContainText("Type");
+      await expect(page.locator(".midi-studio-v2__tool-menu #renderedExportTargetTypeSelect")).toBeVisible();
+      await expect(page.locator(".midi-studio-v2__tool-menu #renderedExportSaveButton")).toBeVisible();
       await expect(page.locator("#midiSourceDetails")).toContainText("No MIDI source inspected.");
       await expect(page.locator("#audioDiagnosticsContent")).toBeHidden();
       await expect(page.locator("#playbackState")).toContainText("Audible preview ready: Main Theme.");
@@ -1297,19 +1300,39 @@ test.describe("MIDI Studio V2", () => {
     }
   });
 
-  test("reports rendered export nav action status without claiming files were written", async ({ page }) => {
+  test("exports through Type dropdown and Save without claiming files were written", async ({ page }) => {
     const server = await openMidiStudio(page);
     try {
-      await expect(page.locator('.accordion-v2__header[aria-controls="renderedTargetsContent"] #exportWavButton')).toHaveCount(0);
-      await expect(page.locator(".midi-studio-v2__tool-menu #exportWavButton")).toBeVisible();
-      await page.locator("#exportWavButton").click();
-      await page.locator("#exportMp3Button").click();
-      await page.locator("#exportOggButton").click();
+      await expect(page.locator("#exportWavButton")).toHaveCount(0);
+      await expect(page.locator("#exportMp3Button")).toHaveCount(0);
+      await expect(page.locator("#exportOggButton")).toHaveCount(0);
+      await expect(page.locator("#renderedExportTargetTypeSelect")).toBeVisible();
+      await expect(page.locator("#renderedExportTargetTypeSelect option")).toContainText(["WAV", "MP3", "OGG"]);
+      await expect(page.locator("#renderedExportSaveButton")).toBeVisible();
+      const exportControlsFit = await page.locator(".midi-studio-v2__tool-menu").evaluate((menu) => {
+        const label = menu.querySelector('label[for="renderedExportTargetTypeSelect"]').getBoundingClientRect();
+        const typeSelect = menu.querySelector("#renderedExportTargetTypeSelect").getBoundingClientRect();
+        const saveButton = menu.querySelector("#renderedExportSaveButton").getBoundingClientRect();
+        const menuRect = menu.getBoundingClientRect();
+        return {
+          fit: typeSelect.left >= menuRect.left - 1 && saveButton.right <= menuRect.right + 1,
+          sameRow: label.right <= saveButton.left && label.bottom >= saveButton.top && saveButton.bottom >= label.top
+        };
+      });
+      expect(exportControlsFit.fit).toBe(true);
+      expect(exportControlsFit.sameRow).toBe(true);
+      await page.locator("#renderedExportTargetTypeSelect").selectOption("wav");
+      await page.locator("#renderedExportSaveButton").click();
+      await page.locator("#renderedExportTargetTypeSelect").selectOption("mp3");
+      await page.locator("#renderedExportSaveButton").click();
+      await page.locator("#renderedExportTargetTypeSelect").selectOption("ogg");
+      await page.locator("#renderedExportSaveButton").click();
       await expect(page.locator("#statusLog")).toHaveValue(/WARN Export rendering not implemented for WAV\. Planned target: assets\/music\/rendered\/theme-main\.wav\./);
       await expect(page.locator("#statusLog")).toHaveValue(/WARN Export rendering not implemented for MP3\. Planned target: assets\/music\/rendered\/theme-main\.mp3\./);
       await expect(page.locator("#statusLog")).toHaveValue(/WARN Export rendering not implemented for OGG\. Planned target: assets\/music\/rendered\/theme-main\.ogg\./);
       await page.locator('[data-song-id="source-only"]').click();
-      await page.locator("#exportWavButton").click();
+      await page.locator("#renderedExportTargetTypeSelect").selectOption("wav");
+      await page.locator("#renderedExportSaveButton").click();
       await expect(page.locator("#statusLog")).toHaveValue(/FAIL Missing rendered WAV export target for Source Only\. Add music\.songs\[\]\.rendered\.wav before exporting\./);
     } finally {
       await workspaceV2CoverageReporter.stop(page);
@@ -2230,7 +2253,8 @@ test.describe("MIDI Studio V2", () => {
       await expect(page.locator("#songSourceField")).toHaveValue("No song selected");
       await expect(page.locator("#renderedTargets")).toContainText("No rendered WAV target selected.");
       await expect(page.locator("#statusLog")).toHaveValue(/FAIL MIDI Studio V2 payload rejected before render .* music\.songs\[0\]\.id is required\./);
-      await page.locator("#exportWavButton").click();
+      await page.locator("#renderedExportTargetTypeSelect").selectOption("wav");
+      await page.locator("#renderedExportSaveButton").click();
       await expect(page.locator("#statusLog")).toHaveValue(/FAIL Missing MIDI song for WAV export\. Load or select a song before exporting\./);
     } finally {
       await workspaceV2CoverageReporter.stop(page);

tools/midi-studio-v2/index.html

@@ -44,17 +44,17 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
       <button id="playButton" type="button" disabled>Play</button>
       <button id="stopButton" type="button" disabled>Stop</button>
       <button id="stopAllAudioButton" type="button">Stop All Audio</button>
-      <label class="midi-studio-v2__compact-field" for="renderedExportTargetTypeSelect">
-        <span>Export target type</span>
-        <select id="renderedExportTargetTypeSelect">
-          <option value="wav">WAV</option>
-          <option value="mp3">MP3</option>
-          <option value="ogg">OGG</option>
-        </select>
-      </label>
-      <button id="exportWavButton" type="button">Export WAV</button>
-      <button id="exportMp3Button" type="button">Export MP3</button>
-      <button id="exportOggButton" type="button">Export OGG</button>
+      <div class="midi-studio-v2__export-save-controls">
+        <label class="midi-studio-v2__compact-field" for="renderedExportTargetTypeSelect">
+          <span>Type</span>
+          <select id="renderedExportTargetTypeSelect">
+            <option value="wav">WAV</option>
+            <option value="mp3">MP3</option>
+            <option value="ogg">OGG</option>
+          </select>
+        </label>
+        <button id="renderedExportSaveButton" type="button">Save</button>
+      </div>
       <button id="toolCopyJsonButton" type="button" disabled>Copy JSON</button>
       <button id="toolExportToolStateButton" type="button" disabled>Export JSON</button>
       <input id="toolImportManifestInput" type="file" accept="application/json,.json" hidden>

tools/midi-studio-v2/js/bootstrap.js

@@ -109,9 +109,7 @@ window.addEventListener("DOMContentLoaded", () => {
     previewSynth: new PreviewSynthEngine({ windowRef: window }),
     renderedExportActions: new RenderedExportActionsControl({
       exportTargetTypeSelect: requireElement("#renderedExportTargetTypeSelect"),
-      mp3Button: requireElement("#exportMp3Button"),
-      oggButton: requireElement("#exportOggButton"),
-      wavButton: requireElement("#exportWavButton")
+      saveButton: requireElement("#renderedExportSaveButton")
     }),
     serializer: new MidiStudioStateSerializer(),
     shell: new ToolShellControl(),

tools/midi-studio-v2/js/controls/RenderedExportActionsControl.js

@@ -1,23 +1,13 @@
 export class RenderedExportActionsControl {
-  constructor({ exportTargetTypeSelect, mp3Button, oggButton, wavButton }) {
+  constructor({ exportTargetTypeSelect, saveButton }) {
     this.exportTargetTypeSelect = exportTargetTypeSelect;
-    this.mp3Button = mp3Button;
-    this.oggButton = oggButton;
-    this.wavButton = wavButton;
+    this.saveButton = saveButton;
   }
 
   mount({ onExport }) {
-    this.wavButton.addEventListener("click", (event) => {
+    this.saveButton.addEventListener("click", (event) => {
       event.stopPropagation();
-      onExport("wav");
-    });
-    this.mp3Button.addEventListener("click", (event) => {
-      event.stopPropagation();
-      onExport("mp3");
-    });
-    this.oggButton.addEventListener("click", (event) => {
-      event.stopPropagation();
-      onExport("ogg");
+      onExport(this.exportTargetTypeSelect.value);
     });
   }
 }

tools/midi-studio-v2/styles/midiStudioV2.css

@@ -775,8 +775,9 @@ body[data-tool-id="midi-studio-v2"] #instrumentGridContent {
 .midi-studio-v2__compact-field {
   align-items: center;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 0.35rem;
+  min-width: 0;
 }
 
 .midi-studio-v2__compact-field span {
@@ -785,6 +786,19 @@ body[data-tool-id="midi-studio-v2"] #instrumentGridContent {
   text-transform: uppercase;
 }
 
+.midi-studio-v2__compact-field select {
+  min-width: 4.75rem;
+}
+
+.midi-studio-v2__export-save-controls {
+  align-items: center;
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: nowrap;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
 .midi-studio-v2__primary-action {
   font-weight: 800;
 }