Repair MIDI Studio V2 fullscreen and expose spreadsheet note editor for UAT - PR_26146_024-midi-studio-v2-studio-layout-uat-repair

Author: ToolboxAid

docs/dev/reports/PR_26146_024-midi-studio-v2-studio-layout-correction_validation.md

@@ -0,0 +1,85 @@
+# PR_26146_024 MIDI Studio V2 Studio Layout Correction Validation
+
+## Result
+- PASS: Expanded view keeps the shared header and MIDI Studio header visible.
+- PASS: Expanded view keeps the top transport/action bar visible.
+- PASS: Expanded view keeps the left Instruments column visible.
+- PASS: Expanded view expands the center timeline/editor area while minimizing secondary diagnostics.
+- PASS: The left column is now labeled `Instruments` and contains editable lane rows.
+- PASS: Instrument rows include lane name, mute, solo, volume, pan, and preview instrument controls.
+- PASS: Clicking an instrument row highlights the matching editable timeline row.
+- PASS: The spreadsheet-style note editor is immediately visible without opening an accordion.
+- PASS: Imported UAT song data populates visible note cells immediately after Import JSON Manifest.
+- PASS: Editing a visible note cell updates the normalized playback data used by Play.
+- PASS: Diagnostics and parser summaries are no longer dominant in the Studio tab.
+
+## Scope
+- Corrected MIDI Studio V2 expanded/fullscreen behavior so the header, top transport, and Instruments column remain visible.
+- Replaced the static `Tracks` list with the authoritative editable `Instruments` lane list.
+- Moved lane mute/solo/preview-instrument control ownership into the left Instruments column and added visible volume/pan controls.
+- Simplified center timeline row headers so they map to lane names while avoiding duplicate lane-control surfaces.
+- Converted the note grid into a visible center spreadsheet panel with explicit `Timeline`, `Edit Notes Here`, and `Instrument` labels.
+- Added lane-row selection highlighting across the corresponding spreadsheet timeline row.
+- Added note-cell edit synchronization so visible spreadsheet edits update playback data before Play.
+- Reduced Studio-tab diagnostics by moving parser summary and audio diagnostics to Diagnostics-only surfaces.
+
+## Lanes
+- recovery/UAT: executed because this PR corrects MIDI Studio V2 UAT layout/workflow confusion from PR_26146_023.
+- tools: executed through targeted MIDI Studio V2 syntax and Playwright checks.
+- runtime: executed through targeted Playwright because browser UI, expanded mode, timeline editing, and Preview Synth playback data changed.
+- integration: skipped because Workspace Manager registration/handoff was not changed.
+- engine: skipped because no `src/engine` runtime files changed.
+- samples: skipped because no sample JSON was modified and full samples smoke was explicitly out of scope.
+
+## Validation Commands
+- PASS: `node --check tools/midi-studio-v2/js/MidiStudioV2App.js`
+- PASS: `node --check tools/midi-studio-v2/js/bootstrap.js`
+- PASS: `node --check tools/midi-studio-v2/js/controls/InstrumentGridControl.js`
+- PASS: `node --check tools/midi-studio-v2/js/controls/ToolShellControl.js`
+- PASS: `node --check tests/playwright/tools/MidiStudioV2.spec.mjs`
+- PASS: HTML external-only guard for `tools/midi-studio-v2/index.html`; no inline `<script>`, `<style>`, or inline event handlers found.
+- PASS: `rg -n "track-list|Load Example|Use Example|imageDataUrl" tools/midi-studio-v2 tests/fixtures/midi-studio-v2 tests/playwright/tools/MidiStudioV2.spec.mjs` returned no matches.
+- PASS: `$env:PLAYWRIGHT_BROWSERS_PATH='0'; npx.cmd playwright test tests/playwright/tools/MidiStudioV2.spec.mjs --project=playwright --grep "imports UAT manifest and plays|expands and restores" --timeout=90000 --reporter=list`
+  - Result: 2 passed.
+  - Proved fullscreen/expanded view keeps header, transport, and left Instruments column visible.
+  - Proved the center timeline expands while secondary diagnostics are minimized.
+  - Proved spreadsheet note editor is visible without an accordion.
+  - Proved instrument rows correspond to editable timeline rows and row click highlights the matching lane.
+  - Proved imported UAT song populates visible note cells.
+  - Proved editing a visible note cell updates playback data used by Play.
+  - Proved diagnostics no longer dominate the Studio tab.
+- PASS: `git diff --check`
+  - Note: Git reported LF-to-CRLF normalization warnings for touched files; no whitespace errors were reported.
+
+## Coverage Reports
+- Updated `docs/dev/reports/playwright_v8_coverage_report.txt`.
+- Updated `docs/dev/reports/coverage_changed_js_guardrail.txt`.
+- Guardrail status: advisory PASS, no changed runtime JS coverage warnings.
+
+## Warnings
+- WARN: An exploratory broader MIDI Studio V2 subset timed out and was not used as the validation gate. The requested PR_024 targeted behaviors passed in the focused 2-test lane above.
+
+## Manual UAT Steps
+1. Open `tools/midi-studio-v2/index.html`.
+2. Click `Import JSON Manifest`.
+3. Choose `tests/fixtures/midi-studio-v2/uat-midi-studio-v2.game.manifest.json`.
+4. Confirm `Camptown Races UAT Reel` populates the visible center spreadsheet cells.
+5. Confirm the left column is labeled `Instruments` and contains Lead, Bass, Pad/Chords, Pad Layer, and Drums controls.
+6. Click the Lead row and confirm the Lead timeline row highlights.
+7. Edit the first Lead note cell and click `Play`; expected result is audible preview state using the edited playback data.
+8. Click `Enter Expanded View`; expected result is header, top transport, left Instruments column, center timeline, and status remain visible while secondary diagnostics are minimized.
+9. Click `Exit Expanded View`; expected result is the normal Studio layout restored.
+
+## Skips
+- Full samples smoke test: SKIPPED per PR instructions.
+- Workspace lane: SKIPPED because Workspace contract/runtime files were not touched.
+- Sample JSON modification: SKIPPED per repo and PR instructions.
+
+## Artifacts
+- `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`
+- Repo-structured delta ZIP: `tmp/PR_26146_024-midi-studio-v2-studio-layout-correction_delta.zip`

tests/playwright/tools/MidiStudioV2.spec.mjs

@@ -308,7 +308,8 @@ function spreadsheetCell(page, lane, stepIndex) {
 }
 
 async function setSpreadsheetRowToggle(page, laneLabel, kind, checked) {
-  const toggle = page.locator(`.midi-studio-v2__lane-header-cell [aria-label="${kind} ${laneLabel}"]`);
+  const labelKind = kind.charAt(0).toUpperCase() + kind.slice(1);
+  const toggle = page.locator(`.midi-studio-v2__instrument-row [aria-label="${labelKind} ${laneLabel}"]`);
   await expect(toggle).toHaveCount(1);
   await toggle.evaluate(
     (input, nextChecked) => {
@@ -357,23 +358,46 @@ test.describe("MIDI Studio V2", () => {
       await expect(page.locator("#previewInstrumentDrumsSelect")).toHaveValue("basic-drums");
 
       await expect(page.locator('[data-midi-studio-tab="studio"]')).toHaveAttribute("aria-selected", "true");
-      await expect(page.locator(".midi-studio-v2__track-list-panel")).toBeVisible();
-      await expect(page.locator(".midi-studio-v2__track-list li")).toContainText(["Lead", "Bass", "Chords/Pad", "Drums"]);
+      await expect(page.locator(".midi-studio-v2__instrument-list-panel")).toBeVisible();
+      await expect(page.locator(".midi-studio-v2__instrument-list-panel h2")).toHaveText("Instruments");
+      await expect(page.locator(".midi-studio-v2__instrument-row-name")).toContainText(["Lead", "Bass", "Pad/Chords", "Pad Layer", "Drums"]);
+      await expect(page.locator('.midi-studio-v2__instrument-row[data-preview-lane="lead"] [aria-label="Mute Lead"]')).toHaveCount(1);
+      await expect(page.locator('.midi-studio-v2__instrument-row[data-preview-lane="lead"] [aria-label="Solo Lead"]')).toHaveCount(1);
+      await expect(page.locator('.midi-studio-v2__instrument-row[data-preview-lane="lead"] [aria-label="Volume Lead"]')).toHaveCount(1);
+      await expect(page.locator('.midi-studio-v2__instrument-row[data-preview-lane="lead"] [aria-label="Pan Lead"]')).toHaveCount(1);
+      await expect(page.locator('.midi-studio-v2__instrument-row[data-preview-lane="lead"] #previewInstrumentLeadSelect')).toHaveCount(1);
       await expect(page.locator("#instrumentGridContent")).toBeVisible();
+      await expect(page.locator('.accordion-v2__header[aria-controls="instrumentGridContent"]')).toHaveCount(0);
+      await expect(page.locator(".midi-studio-v2__timeline-title")).toContainText("Timeline");
+      await expect(page.locator(".midi-studio-v2__timeline-title")).toContainText("Edit Notes Here");
       await expect(page.locator(".midi-studio-v2__note-table")).toHaveCount(1);
       await expect(page.locator(".midi-studio-v2__note-block")).not.toHaveCount(0);
       await expect(page.locator('.midi-studio-v2__note-table-cell[data-lane="lead"] .midi-studio-v2__note-block').first()).toHaveText("G4");
       await expect(page.locator('.midi-studio-v2__note-table-cell[data-lane="bass"] .midi-studio-v2__note-block').first()).toHaveText("G2");
       await expect(page.locator('.midi-studio-v2__note-table-cell[data-lane="chords"] .midi-studio-v2__note-block').first()).toHaveText("G");
       await expect(page.locator('.midi-studio-v2__note-table-cell[data-lane="pad"] .midi-studio-v2__note-block').first()).toHaveText("G");
       await expect(page.locator('.midi-studio-v2__note-table-cell[data-lane="drums"] .midi-studio-v2__note-block').first()).toHaveText("kick");
+      await page.locator('.midi-studio-v2__instrument-row[data-preview-lane="lead"]').click();
+      await expect(page.locator('.midi-studio-v2__instrument-row[data-preview-lane="lead"]')).toHaveClass(/is-selected/);
+      await expect(page.locator('.midi-studio-v2__note-table-cell[data-lane="lead"].midi-studio-v2__grid-cell--lane-selected')).not.toHaveCount(0);
+      await expect(page.locator("#audioDiagnosticsContent")).toBeHidden();
+      await expect(page.locator("#inspectorContent")).toBeHidden();
+      await spreadsheetCell(page, "lead", 0).fill("C5");
+      await expect(spreadsheetCell(page, "lead", 0)).toHaveText("C5");
+      await expect(page.locator("#instrumentGridLeadInput")).toHaveValue(/C5 G4 E4 G4/);
+      expect(await page.evaluate(() => window.__midiStudioV2App.lastInstrumentGridResult.timeline.some((event) => (
+        event.lane === "lead" && event.stepIndex === 0 && event.value === "C5"
+      )))).toBe(true);
 
       await page.locator("#playButton").click();
       await expect(page.locator("#playbackState")).toContainText("Playing audible preview: Camptown Races UAT Reel");
       await expect(page.locator("#nowPlayingLabel")).toHaveText("Playing: Camptown Races UAT Reel");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Audible preview playback started for Camptown Races UAT Reel\./);
       expect(await page.evaluate(() => window.__midiStudioPreviewSynthEvents.some((event) => event.action === "oscillator-start"))).toBe(true);
       expect(await page.evaluate(() => window.__midiStudioV2App.previewSynth.getSnapshot().playing)).toBe(true);
+      expect(await page.evaluate(() => window.__midiStudioV2App.lastInstrumentGridResult.timeline.some((event) => (
+        event.lane === "lead" && event.stepIndex === 0 && event.value === "C5"
+      )))).toBe(true);
 
       await page.locator("#stopButton").click();
       await expect(page.locator("#playbackState")).toContainText("Stopped audible preview: Camptown Races UAT Reel");
@@ -425,8 +449,7 @@ test.describe("MIDI Studio V2", () => {
       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("#midiSourceDetails")).toContainText("No MIDI source inspected.");
-      await expect(page.locator("#audioDiagnostics")).toContainText("Audio context state");
-      await expect(page.locator("#audioDiagnostics")).toContainText("Playable note count");
+      await expect(page.locator("#audioDiagnosticsContent")).toBeHidden();
       await expect(page.locator("#playbackState")).toContainText("Audible preview ready: Main Theme.");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Loaded 3 MIDI songs/);
       await expect(page.locator("#statusLog")).toHaveValue(/INFO Next: select a MIDI Studio song, review the Studio tab timeline, then press Play to audition the imported arrangement\./);
@@ -1190,27 +1213,30 @@ Am F`);
       const normalWidth = (await centerPanel.boundingBox())?.width || 0;
       await page.locator("[data-midi-studio-summary]").click();
       await expect(page.locator("body")).toHaveClass(/midi-studio-v2--expanded/);
-      await expect(page.locator("[data-midi-studio-summary]")).toContainText("Show Header and Details");
-      await expect(page.locator("#shared-theme-header")).toBeHidden();
-      await expect(page.locator(".tool-starter__panel--left")).toBeHidden();
-      await expect(page.locator("#songDetailsContent")).toBeHidden();
-      await expect(page.locator("#instrumentGridContent")).toBeVisible();
+      await expect(page.locator("[data-midi-studio-summary]")).toContainText("Exit Expanded View");
+      await expect(page.locator("#shared-theme-header")).toBeVisible();
+      await expect(page.locator("[data-midi-studio-header]")).toBeVisible();
       await expect(page.locator(".midi-studio-v2__tool-menu")).toBeVisible();
+      await expect(page.locator("#playButton")).toBeVisible();
+      await expect(page.locator(".tool-starter__panel--left")).toBeVisible();
+      await expect(page.locator(".midi-studio-v2__instrument-list-panel")).toBeVisible();
+      await expect(page.locator("#instrumentGridContent")).toBeVisible();
       await expect(page.locator("#toolImportManifestButton")).toBeVisible();
       await expect(page.locator("#statusLogContent")).toBeVisible();
       await expect(page.locator("#clearStatusButton")).toBeVisible();
       const expandedWidth = (await centerPanel.boundingBox())?.width || 0;
       expect(expandedWidth).toBeGreaterThan(normalWidth);
-      await expect(page.locator("#statusLog")).toHaveValue(/INFO Entered expanded MIDI Studio workspace view/);
+      await expect(page.locator("#audioDiagnosticsContent")).toBeHidden();
+      await expect(page.locator("#statusLog")).toHaveValue(/INFO Entered expanded MIDI Studio view\. Header, top transport, and Instruments column remain visible; secondary diagnostics are minimized\./);
 
       await page.locator("[data-midi-studio-summary]").click();
       await expect(page.locator("body")).not.toHaveClass(/midi-studio-v2--expanded/);
-      await expect(page.locator("[data-midi-studio-summary]")).toContainText("Hide Header and Details");
+      await expect(page.locator("[data-midi-studio-summary]")).toContainText("Enter Expanded View");
       await expect(page.locator("#shared-theme-header")).toBeVisible();
       await expect(page.locator(".tool-starter__panel--left")).toBeVisible();
       await expect(page.locator('[data-midi-studio-tab="studio"]')).toHaveAttribute("aria-selected", "true");
       await expect(page.locator("#instrumentGridContent")).toBeVisible();
-      await expect(page.locator("#statusLog")).toHaveValue(/INFO Exited expanded MIDI Studio workspace view/);
+      await expect(page.locator("#statusLog")).toHaveValue(/INFO Exited expanded MIDI Studio view\. Full Studio, setup, and diagnostics layout restored\./);
     } finally {
       await workspaceV2CoverageReporter.stop(page);
       await server.close();