Repair MIDI Studio V2 UAT layout, accordion, and expanded view behavior - PR_26146_015-midi-studio-v2-uat-layout-repair

Author: ToolboxAid

docs/dev/reports/PR_26146_015-midi-studio-v2-uat-layout-repair_validation.md

@@ -0,0 +1,23 @@
+# PR_26146_015-midi-studio-v2-uat-layout-repair Validation
+
+## Scope
+
+- Moved Export WAV, Export MP3, Export OGG, and export target type controls out of the Rendered Export Targets header and into the MIDI Studio V2 NAV/action bar.
+- Kept export actions honest through the existing rendered export action controller: missing song/target reports FAIL, unimplemented rendering reports WARN, and no fake success is claimed.
+- Repaired accordion toggle wiring so header buttons toggle themselves while nested header controls remain independently clickable.
+- Updated accordion +/- text state to match expanded/collapsed state.
+- Added expanded workspace behavior for Hide Headers/Details with status logging, primary work surface expansion, header/detail hiding, and NAV/status/recovery access preserved.
+- Preserved guided Song Sheet fields, Use Example Test Song, dropdowns, grid editor, snapping, generated lanes, playhead/loop, MIDI inspection, and rendered preview behavior.
+
+## Validation
+
+- PASS: `node --check` for changed JavaScript and targeted Playwright spec.
+- PASS: MIDI Studio V2 inline HTML check for inline scripts, styles, and event handlers returned no matches.
+- PASS: targeted MIDI Studio V2 Playwright suite: `32 passed`.
+- PASS: `git diff --check` completed successfully. Git reported line-ending warnings for existing LF/CRLF normalization only.
+- SKIP: Workspace Manager V2 registration/handoff was not run because this PR did not touch Workspace Manager registration or handoff files.
+- SKIP: full samples smoke test per request. Samples decision: SKIP because sample JSON alignment is out of scope.
+
+## Notes
+
+- The first full Playwright run timed out while exposing an accordion self-click guard bug. The isolated accordion test was rerun after the fix and passed, then the full targeted suite passed.

tests/playwright/tools/MidiStudioV2.spec.mjs

@@ -232,9 +232,10 @@ test.describe("MIDI Studio V2", () => {
       await expect(page.locator("#inspectMidiSourceButton")).toBeEnabled();
       const renderedHeader = page.locator('.accordion-v2__header[aria-controls="renderedTargetsContent"]');
       await expect(renderedHeader).toContainText("Rendered Export Targets");
-      await expect(renderedHeader.locator("#exportWavButton")).toBeVisible();
-      await expect(renderedHeader.locator("#exportMp3Button")).toBeVisible();
-      await expect(renderedHeader.locator("#exportOggButton")).toBeVisible();
+      await expect(renderedHeader.locator("#exportWavButton")).toHaveCount(0);
+      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("#midiSourceDetails")).toContainText("No MIDI source inspected.");
       await expect(page.locator("#playbackState")).toContainText("Live MIDI synthesis: NOT IMPLEMENTED");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Loaded 3 MIDI songs/);
@@ -321,9 +322,11 @@ test.describe("MIDI Studio V2", () => {
     }
   });
 
-  test("reports rendered export header action status without claiming files were written", async ({ page }) => {
+  test("reports rendered export nav action status 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();
@@ -849,6 +852,70 @@ Am F`);
     }
   });
 
+  test("opens and closes every MIDI Studio accordion with matching icon state", async ({ page }) => {
+    const server = await openMidiStudio(page);
+    try {
+      const headerCount = await page.locator(".accordion-v2__header").count();
+      for (let index = 0; index < headerCount; index += 1) {
+        const header = page.locator(".accordion-v2__header").nth(index);
+        const controls = await header.getAttribute("aria-controls");
+        expect(controls).toBeTruthy();
+        const content = page.locator(`#${controls}`);
+        await expect(content).toHaveCount(1);
+        await expect(header).toHaveAttribute("aria-expanded", "true");
+        await expect(header.locator(".accordion-v2__icon")).toHaveText("-");
+        await header.click({ position: { x: 8, y: 8 } });
+        await expect(header).toHaveAttribute("aria-expanded", "false");
+        await expect(header.locator(".accordion-v2__icon")).toHaveText("+");
+        await expect(content).toBeHidden();
+        await header.click({ position: { x: 8, y: 8 } });
+        await expect(header).toHaveAttribute("aria-expanded", "true");
+        await expect(header.locator(".accordion-v2__icon")).toHaveText("-");
+        await expect(content).toBeVisible();
+      }
+      expect(await page.locator("[id]").evaluateAll((elements) => {
+        const ids = elements.map((element) => element.id).filter(Boolean);
+        return ids.length === new Set(ids).size;
+      })).toBe(true);
+    } finally {
+      await workspaceV2CoverageReporter.stop(page);
+      await server.close();
+    }
+  });
+
+  test("expands and restores the MIDI Studio workspace from the header details toggle", async ({ page }) => {
+    const server = await openMidiStudio(page);
+    try {
+      const centerPanel = page.locator(".tool-starter__panel--center");
+      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(".midi-studio-v2__tool-menu")).toBeVisible();
+      await expect(page.locator("#useExampleButton")).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 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("#shared-theme-header")).toBeVisible();
+      await expect(page.locator(".tool-starter__panel--left")).toBeVisible();
+      await expect(page.locator("#songDetailsContent")).toBeVisible();
+      await expect(page.locator("#statusLog")).toHaveValue(/INFO Exited expanded MIDI Studio workspace view/);
+    } finally {
+      await workspaceV2CoverageReporter.stop(page);
+      await server.close();
+    }
+  });
+
   test("keeps guided Song Sheet workflow primary alongside the advanced grid editor", async ({ page }) => {
     const server = await openMidiStudio(page);
     try {

tools/midi-studio-v2/index.html

@@ -40,6 +40,17 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
     <nav class="tool-starter__menu tool-starter__tool__menu midi-studio-v2__tool-menu" aria-label="Tool actions" data-launch-mode-nav="tool">
       <button id="toolImportManifestButton" type="button">Import Manifest</button>
       <button id="useExampleButton" type="button">Use Example Test Song</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>
       <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>
@@ -315,23 +326,10 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
         </section>
 
         <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
-          <div class="accordion-v2__header midi-studio-v2__rendered-targets-header" aria-expanded="true" aria-controls="renderedTargetsContent">
+          <button class="accordion-v2__header midi-studio-v2__rendered-targets-header" type="button" aria-expanded="true" aria-controls="renderedTargetsContent">
             <span>Rendered Export Targets</span>
-            <div class="midi-studio-v2__header-actions" aria-label="Rendered export actions">
-              <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>
-              <span class="accordion-v2__icon" aria-hidden="true">+</span>
-            </div>
-          </div>
+            <span class="accordion-v2__icon" aria-hidden="true">+</span>
+          </button>
           <div id="renderedTargetsContent" class="accordion-v2__content">
             <dl id="renderedTargets" class="midi-studio-v2__details"></dl>
           </div>

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

@@ -115,7 +115,7 @@ export class MidiStudioV2App {
   }
 
   async start() {
-    this.shell.mount();
+    this.shell.mount({ onExpandedChange: (isExpanded) => this.handleExpandedModeChange(isExpanded) });
     this.accordions.forEach((accordion) => accordion.mount());
     this.statusLog.mount();
     this.songList.mount({ onSelect: (songId) => this.selectSong(songId) });
@@ -167,6 +167,14 @@ export class MidiStudioV2App {
     this.actionNav.setToolActionsEnabled(false);
   }
 
+  handleExpandedModeChange(isExpanded) {
+    if (isExpanded) {
+      this.statusLog.info("Entered expanded MIDI Studio workspace view. Header details are hidden; NAV, Status, and recovery actions remain available.");
+      return;
+    }
+    this.statusLog.info("Exited expanded MIDI Studio workspace view. Header and details are visible.");
+  }
+
   applyPayload(rawValue, sourceLabel) {
     const normalized = this.serializer.normalize(rawValue);
     if (!normalized.ok) {

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

@@ -11,8 +11,24 @@ export class AccordionSection {
       return;
     }
     this.header.dataset.accordionV2Bound = "true";
+    if (this.header.tagName !== "BUTTON") {
+      this.header.setAttribute("role", "button");
+      this.header.tabIndex = 0;
+    }
     this.setOpen(this.section.dataset.accordionV2Open !== "false");
-    this.header.addEventListener("click", () => {
+    this.header.addEventListener("click", (event) => {
+      const target = event.target instanceof Element ? event.target : null;
+      const interactiveTarget = target?.closest("button, input, select, textarea, a");
+      if (interactiveTarget && interactiveTarget !== this.header) {
+        return;
+      }
+      this.setOpen(!this.section.classList.contains("is-open"));
+    });
+    this.header.addEventListener("keydown", (event) => {
+      if (event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      event.preventDefault();
       this.setOpen(!this.section.classList.contains("is-open"));
     });
   }
@@ -24,6 +40,7 @@ export class AccordionSection {
     this.content.hidden = !isOpen;
     if (this.icon) {
       this.icon.dataset.accordionV2IconState = isOpen ? "open" : "closed";
+      this.icon.textContent = isOpen ? "-" : "+";
     }
   }
 }

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

@@ -1,13 +1,29 @@
 export class ToolShellControl {
   constructor({ documentRef = document } = {}) {
     this.document = documentRef;
+    this.details = this.document.querySelector(".is-collapsible");
+    this.summary = this.document.querySelector("[data-midi-studio-summary]");
     this.toolId = "midi-studio-v2";
   }
 
-  mount() {
+  mount({ onExpandedChange = () => {} } = {}) {
     this.document.body.dataset.toolId = this.toolId;
     this.document.querySelectorAll("[data-tool-id]").forEach((element) => {
       element.setAttribute("data-tool-id", this.toolId);
     });
+    this.applyExpandedState(false);
+    this.details?.addEventListener("toggle", () => {
+      const isExpanded = !this.details.open;
+      this.applyExpandedState(isExpanded);
+      onExpandedChange(isExpanded);
+    });
+  }
+
+  applyExpandedState(isExpanded) {
+    this.document.body.classList.toggle("midi-studio-v2--expanded", isExpanded);
+    this.document.body.dataset.midiStudioExpanded = String(isExpanded);
+    if (this.summary) {
+      this.summary.textContent = isExpanded ? "Show Header and Details" : "Hide Header and Details";
+    }
   }
 }

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

@@ -275,3 +275,36 @@
   padding-left: 0;
   padding-right: 0;
 }
+
+body[data-tool-id="midi-studio-v2"] .accordion-v2.is-open .accordion-v2__icon {
+  transform: none;
+}
+
+body.midi-studio-v2--expanded .tool-starter__menu {
+  position: sticky;
+  top: 0;
+  z-index: 4;
+}
+
+body.midi-studio-v2--expanded .tool-starter.app-shell {
+  height: calc(100vh - 86px);
+  width: calc(100% - 32px);
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
+}
+
+body.midi-studio-v2--expanded .tool-starter__panel--left {
+  display: none;
+}
+
+body.midi-studio-v2--expanded .tool-starter__panel--center {
+  grid-column: 1;
+}
+
+body.midi-studio-v2--expanded .tool-starter__panel--right {
+  grid-column: 2;
+}
+
+body.midi-studio-v2--expanded .tool-starter__panel--center .accordion-v2:not(:has(#playbackContent)):not(:has(#instrumentGridContent)),
+body.midi-studio-v2--expanded .tool-starter__panel--right .accordion-v2:not(:has(#statusLogContent)) {
+  display: none;
+}