Restore MIDI Studio V2 Song Setup editable details and organize controls into tab buckets - PR_26146_053-midi-studio-v2-song-setup-buckets-restore

Author: ToolboxAid

docs/dev/reports/PR_26146_053-midi-studio-v2-song-setup-buckets-restore_validation.md

@@ -0,0 +1,71 @@
+# PR_26146_053 MIDI Studio V2 Song Setup Buckets Restore Validation
+
+## Summary
+
+Status: PASS
+
+Playwright impacted: Yes
+
+This PR restores Song Setup as the editable song metadata surface while preserving the PR052 tab order and the PR051 canvas-backed Octave Timeline. Song Setup now has the common buckets: Songs, Song Details, Song Sheet, Sections / Loop, and Status.
+
+## Tabs Inventory Note
+
+The requested uploaded `Tabs.txt` inventory was not present in the repository, Downloads, or temp upload locations during execution. The current `tools/midi-studio-v2/index.html` DOM inventory was used as the concrete fallback, and the resulting tab/bucket map is documented in `docs/dev/reports/PR_26146_053-midi-studio-v2-tab-bucket-map.md`.
+
+## Files Changed
+
+- `tools/midi-studio-v2/index.html`
+- `tools/midi-studio-v2/js/MidiStudioV2App.js`
+- `tools/midi-studio-v2/js/bootstrap.js`
+- `tools/midi-studio-v2/js/controls/SongDetailsControl.js`
+- `tools/midi-studio-v2/js/controls/SongSheetControl.js`
+- `tools/midi-studio-v2/styles/midiStudioV2.css`
+- `tests/playwright/tools/MidiStudioV2.spec.mjs`
+- `docs/dev/reports/PR_26146_053-midi-studio-v2-song-setup-buckets-restore_validation.md`
+- `docs/dev/reports/PR_26146_053-midi-studio-v2-tab-bucket-map.md`
+- `docs/dev/codex_commands.md`
+- `docs/dev/commit_comment.txt`
+
+## Validation Commands
+
+- PASS: changed-file JavaScript syntax checks with `node --check`.
+- PASS: HTML external-only check for `<script>` usage.
+- PASS: HTML no-inline-style/no-inline-handler check for `<style| on[a-z]+=`.
+- PASS: `npx playwright test tests/playwright/tools/MidiStudioV2.spec.mjs --grep "restores Song Setup editable buckets|canvas octave timeline edits canonical data"`.
+- PASS: `git diff --check` with line-ending warnings only.
+
+## Playwright Coverage
+
+The targeted MIDI Studio V2 tests prove:
+
+- Song Setup contains Songs, Song Details, Song Sheet, Sections / Loop, and Status buckets.
+- Song Details contains editable Name, Id, Tempo/BPM, Key, Style, Tags, Usage, and Notes when present.
+- Editing Song Details updates the canonical selected song model.
+- Switching songs refreshes Song Details and clears stale values.
+- Song Sheet remains visible immediately after Song Details.
+- No separate duplicate Song Sheet Summary bucket exists; Song Sheet status/summary lives inside the Song Sheet bucket.
+- MIDI Import controls are hidden from Song Setup and remain owned by the MIDI Import tab.
+- Diagnostics-only buckets are hidden from Song Setup.
+- Octave Timeline still renders the canvas-backed editor and edits canonical notes.
+- Play and Stop still work.
+
+## Coverage Artifacts
+
+- `docs/dev/reports/playwright_v8_coverage_report.txt` was refreshed by the targeted Playwright run.
+- `docs/dev/reports/coverage_changed_js_guardrail.txt` was refreshed by the targeted Playwright run.
+- Changed runtime JS coverage guardrail reports no warnings.
+
+## Samples Decision
+
+Full samples smoke test: SKIP.
+
+Reason: explicitly out of scope for this PR and not requested; this change is limited to MIDI Studio V2 UI/runtime behavior.
+
+## Manual Validation Notes
+
+1. Open MIDI Studio V2 and import the UAT manifest.
+2. Confirm Song Setup is first and Octave Timeline is second.
+3. Confirm Song Setup shows Songs, Song Details, Song Sheet, Sections / Loop, and Status.
+4. Edit Name, Id, Tempo/BPM, Key, Style, Tags, Usage, and Notes, then verify the JSON Details output after switching to Diagnostics.
+5. Switch songs and confirm Song Details refresh to the newly selected song.
+6. Open Octave Timeline, click a note cell, then Play and Stop.

docs/dev/reports/PR_26146_053-midi-studio-v2-tab-bucket-map.md

@@ -0,0 +1,76 @@
+# PR_26146_053 MIDI Studio V2 Tab Bucket Map
+
+## Inventory Source
+
+Requested source: uploaded `Tabs.txt`.
+
+Resolution: `Tabs.txt` was not present in the repository, Downloads, or temp upload locations. This map uses the current `tools/midi-studio-v2/index.html` DOM inventory after PR053 edits.
+
+## Tab Order
+
+1. Song Setup
+2. Octave Timeline
+3. Instruments
+4. Auto-Create Parts
+5. MIDI Import
+6. Diagnostics
+
+## Song Setup
+
+- Songs: `songListContent`
+- Song Details: `songDetailsContent`
+  - Editable Name
+  - Editable Id
+  - Editable Tempo/BPM
+  - Editable Key dropdown
+  - Editable Style dropdown
+  - Editable Tags
+  - Editable Usage when present
+  - Editable Notes when present
+- Song Sheet: `songSheetContent`
+  - Intro chord progression
+  - Loop chord progression
+  - Parse Guided Song Sheet
+  - Song Sheet summary/status inside the same bucket
+- Sections / Loop: `songSectionsLoopContent`
+  - Sections
+  - Loop enabled
+  - Loop start
+  - Loop end
+- Status: `statusLogContent`
+
+## Octave Timeline
+
+- Songs: `songListContent`
+- Canvas/grid editor and playback editing surface: `instrumentGridOutput`, timeline title, zoom controls, and transport controls scoped to the timeline.
+- Selection inspector: `timelineSelectionContent`
+- Status: `statusLogContent`
+
+## Instruments
+
+- Instrument row management and GM type/instrument controls: `instrumentListContent`
+- Selection inspector: `timelineSelectionContent`
+
+## Auto-Create Parts
+
+- Generation and normalization helpers:
+  - Grid settings
+  - Advanced lane source text
+  - Generate Bass/Pad/Arpeggio/Drums
+  - Normalize Grid
+  - Section preview controls
+
+## MIDI Import
+
+- Songs: `songListContent`
+- MIDI source/import/inspect controls: `midiImportContent`
+
+## Diagnostics
+
+- Rendered Preview: `playbackContent`
+- Game Music Director diagnostic metadata: `directorContent`
+- Rendered Export Targets: `renderedTargetsContent`
+- JSON Details: `inspectorContent`
+- Timeline Diagnostics: `instrumentGridSummaryContent`
+- Audio Diagnostics: `audioDiagnosticsContent`
+- Status: `statusLogContent`

tests/playwright/tools/MidiStudioV2.spec.mjs

@@ -686,12 +686,15 @@ test.describe("MIDI Studio V2", () => {
       await expect(octaveTimelineCanvas(page)).toBeVisible();
       await expect(page.locator(".midi-studio-v2__octave-note-cell")).toHaveCount(0);
       await expect(page.locator(".midi-studio-v2__grid-cell--timing-header")).toHaveCount(0);
+      await expect(page.locator(".midi-studio-v2__instrument-list-panel")).toBeHidden();
+      await selectMidiStudioTab(page, "instruments");
       await expect(instrumentTypeSelect(page, "lead")).toHaveJSProperty("tagName", "SELECT");
       await expect(instrumentSelect(page, "lead")).toHaveJSProperty("tagName", "SELECT");
       await expect(page.locator("#playButton")).toHaveJSProperty("tagName", "BUTTON");
       await expect(page.locator("#toolImportManifestInput")).toHaveJSProperty("tagName", "INPUT");
 
       await selectInstrumentRow(page, "lead");
+      await selectMidiStudioTab(page, "studio");
       await waitForCanvasRender(page);
       const initialCanvasState = await canvasTimelineState(page);
       expect(initialCanvasState.rows.some((row) => row.value === "C6")).toBe(true);
@@ -1883,7 +1886,7 @@ test.describe("MIDI Studio V2", () => {
     }
   });
 
-  test("cleans up Song Setup tab and keeps song changes canonical", async ({ page }) => {
+  test("restores Song Setup editable buckets without duplicating diagnostics", async ({ page }) => {
     const server = await openMidiStudioForImport(page);
     try {
       await page.locator("#toolImportManifestInput").setInputFiles(uatManifestPath);
@@ -1897,73 +1900,99 @@ test.describe("MIDI Studio V2", () => {
       ]);
       expect(tabs.map((tab) => tab.text)).not.toContain("Studio");
       await expect(page.locator('[data-midi-studio-tab="song-setup"]')).toHaveAttribute("aria-selected", "true");
+      await expect(page.locator('.accordion-v2__header[aria-controls="songListContent"]')).toContainText("Songs");
+      await expect(page.locator('.accordion-v2__header[aria-controls="songDetailsContent"]')).toContainText("Song Details");
+      await expect(page.locator('.accordion-v2__header[aria-controls="songSheetContent"]')).toContainText("Song Sheet");
+      await expect(page.locator('.accordion-v2__header[aria-controls="songSectionsLoopContent"]')).toContainText("Sections / Loop");
+      await expect(page.locator('.accordion-v2__header[aria-controls="statusLogContent"]')).toContainText("Status");
       await expect(page.locator("#songDetailsContent")).toBeVisible();
-      await expect(page.locator("#songDetailsContent #songSheetContent")).toHaveCount(1);
-      await expect(page.locator("#songDetailsContent #songSheetSummary")).toHaveCount(0);
+      await expect(page.locator("#songSheetContent")).toBeVisible();
+      await expect(page.locator("#songSectionsLoopContent")).toBeVisible();
       await expect(page.locator("#songSheetSummaryContent")).toHaveCount(0);
-      await expect(page.locator("#songDetails input[data-song-detail-field]")).toHaveCount(0);
-      await expect(page.locator("#songDetails")).toBeHidden();
-      await expect(page.locator("#directorContent")).toBeHidden();
-      await expect(page.locator("#renderedTargetsContent")).toBeHidden();
-      await expect(page.locator("#songSheetKeyInput")).toBeVisible();
+      await expect(page.locator("#songSheetContent #songSheetSummary")).toHaveCount(1);
+      expect(await page.locator("#songDetailsContent").evaluate((details) => {
+        const sheet = document.querySelector("#songSheetContent");
+        return Boolean(sheet && details.compareDocumentPosition(sheet) & Node.DOCUMENT_POSITION_FOLLOWING);
+      })).toBe(true);
+      await expect(page.locator("#songDetails [data-song-detail-field='name']")).toHaveValue("Camptown Races UAT Reel");
+      await expect(page.locator("#songDetails [data-song-detail-field='id']")).toHaveValue("camptown-races-uat-reel");
+      await expect(page.locator("#songSheetTempoInput")).toHaveValue("144");
       await expect(page.locator("#songSheetKeyInput")).toHaveJSProperty("tagName", "SELECT");
       await expect(page.locator("#songSheetKeyInput")).toHaveValue("G major");
-      await expect(page.locator("#songSheetStyleInput")).toBeVisible();
       await expect(page.locator("#songSheetStyleInput")).toHaveJSProperty("tagName", "SELECT");
       await expect(page.locator("#songSheetStyleInput")).toHaveValue("public-domain-reel");
-      const trailingSpace = await page.locator("#songDetailsContent").evaluate((content) => {
-        const sheet = content.querySelector("#songSheetContent").getBoundingClientRect();
-        const bounds = content.getBoundingClientRect();
-        return Math.round(bounds.bottom - sheet.bottom);
-      });
-      expect(trailingSpace).toBeLessThanOrEqual(16);
+      await expect(page.locator("#songDetails [data-song-detail-field='tags']")).toHaveValue("uat, upbeat, traditional, public-domain");
+      await expect(page.locator("#songDetails [data-song-detail-field='usage']")).toHaveValue("uat, public-domain, preview-synth");
+      await expect(page.locator("#songDetails [data-song-detail-field='notes']")).toHaveValue("Traditional Camptown Races style public-domain test arrangement with lead, bass, chords/pad, and drums.");
+      await expect(page.locator("#songSectionsLoopDetails [data-song-detail-field='sections']")).toHaveValue("verse:2, chorus:2");
+      await expect(page.locator("#songSectionsLoopDetails [data-song-detail-field='loopEnabled']")).toBeChecked();
+      await expect(page.locator("#directorContent")).toBeHidden();
+      await expect(page.locator("#renderedTargetsContent")).toBeHidden();
+      await expect(page.locator("#playbackContent")).toBeHidden();
+      await expect(page.locator("#audioDiagnosticsContent")).toBeHidden();
+      await expect(page.locator("#instrumentGridSummaryContent")).toBeHidden();
+      await expect(page.locator("#midiImportContent")).toBeHidden();
+      await expect(page.locator("#songDetailsContent #midiImportContent")).toHaveCount(0);
+      await expect(page.locator("#songDetails [data-song-detail-field='sourceMidi']")).toHaveCount(0);
+      await expect(page.locator("#songDetails [data-song-detail-field='instrumentSet']")).toHaveCount(0);
 
-      const initialSongCount = await page.locator("#songList [data-song-id]").count();
-      await page.locator("#addSongButton").click();
-      await expect(page.locator("#songList [data-song-id]")).toHaveCount(initialSongCount + 1);
-      await expect(page.locator("#songList")).toContainText("New Song 4");
+      await page.locator("#songDetails [data-song-detail-field='name']").fill("Edited UAT Reel");
+      await page.locator("#songDetails [data-song-detail-field='id']").fill("edited-uat-reel");
+      await page.locator("#songSheetTempoInput").fill("156");
+      await page.locator("#songSheetKeyInput").selectOption("C major");
+      await page.locator("#songSheetStyleInput").selectOption("chip");
+      await page.locator("#songDetails [data-song-detail-field='tags']").fill("uat, edited");
+      await page.locator("#songDetails [data-song-detail-field='usage']").fill("title, test");
+      await page.locator("#songDetails [data-song-detail-field='notes']").fill("Edited notes from Song Setup.");
+      await page.locator("#songSectionsLoopDetails [data-song-detail-field='loopEnabled']").setChecked(false);
       expect(await page.evaluate(() => {
-        const app = window.__midiStudioV2App;
-        const song = app.selectedSong();
+        const song = window.__midiStudioV2App.selectedSong();
         return {
-          activeSongId: app.payload.activeSongId,
-          hasArrangement: Boolean(song.studioArrangement),
-          songCount: app.payload.songs.length
+          activeSongId: window.__midiStudioV2App.payload.activeSongId,
+          id: song.id,
+          key: song.studioArrangement.key,
+          loopEnabled: song.loop.enabled,
+          name: song.name,
+          notes: song.director.notes,
+          style: song.studioArrangement.style,
+          tags: song.tags,
+          tempo: song.studioArrangement.tempo,
+          usage: song.director.usage
         };
       })).toEqual({
-        activeSongId: "new-song-4",
-        hasArrangement: true,
-        songCount: 4
+        activeSongId: "edited-uat-reel",
+        id: "edited-uat-reel",
+        key: "C major",
+        loopEnabled: false,
+        name: "Edited UAT Reel",
+        notes: "Edited notes from Song Setup.",
+        style: "chip",
+        tags: ["uat", "edited"],
+        tempo: "156",
+        usage: ["title", "test"]
       });
 
-      await page.locator("#songSheetKeyInput").selectOption("C major");
+      await page.locator('[data-song-id="frog-hop-nursery-rhyme"]').click();
+      await expect(page.locator("#songDetails [data-song-detail-field='name']")).toHaveValue("Frog Hop Nursery Rhyme UAT");
+      await expect(page.locator("#songDetails [data-song-detail-field='id']")).toHaveValue("frog-hop-nursery-rhyme");
+      await expect(page.locator("#songSheetTempoInput")).toHaveValue("132");
       await expect(page.locator("#songSheetKeyInput")).toHaveValue("C major");
-      await expect.poll(() => page.evaluate(() => window.__midiStudioV2App.selectedSong().studioArrangement.key)).toBe("C major");
-      await page.locator("#songSheetStyleInput").selectOption("chip");
       await expect(page.locator("#songSheetStyleInput")).toHaveValue("chip");
-      await expect.poll(() => page.evaluate(() => window.__midiStudioV2App.selectedSong().studioArrangement.style)).toBe("chip");
+      await expect(page.locator("#songDetails [data-song-detail-field='usage']")).toHaveValue("uat, frog-hop, nursery-rhyme");
 
+      await selectMidiStudioTab(page, "instruments");
+      await selectInstrumentRow(page, "lead");
       await selectMidiStudioTab(page, "studio");
       await waitForCanvasRender(page);
       await expect(octaveTimelineCanvas(page)).toBeVisible();
+      await clickCanvasCell(page, "C6", 2);
+      expect(await page.evaluate(() => window.__midiStudioV2App.selectedSong().studioArrangement.lanes.lead)).toContain("C6");
       await page.locator("#playButton").click();
       await expect(page.locator("#playButton")).toBeDisabled();
       await expect(page.locator("#stopButton")).toBeEnabled();
       await page.locator("#stopButton").click();
       await expect(page.locator("#stopButton")).toBeDisabled();
       await expect(page.locator("#playButton")).toBeEnabled();
-      expect(await page.evaluate(() => {
-        const song = window.__midiStudioV2App.selectedSong();
-        return {
-          key: song.studioArrangement.key,
-          name: song.name,
-          style: song.studioArrangement.style
-        };
-      })).toEqual({
-        key: "C major",
-        name: "New Song 4",
-        style: "chip"
-      });
     } finally {
       await workspaceV2CoverageReporter.stop(page);
       await server.close();