Move MIDI Studio V2 song notes to full-width detail row and restore timeline instruments accordion - PR_26146_063-midi-studio-v2-song-notes-and-timeline-instruments-layout

Author: ToolboxAid

docs/dev/reports/PR_26146_063-midi-studio-v2-song-notes-and-timeline-instruments-layout_validation.md

@@ -0,0 +1,60 @@
+# PR_26146_063 MIDI Studio V2 Song Notes And Timeline Instruments Layout Validation
+
+## Scope
+
+- Continued from `PR_26146_062`.
+- Moved editable Notes to the bottom of Song Setup > Song Details.
+- Kept Notes as the only field on the bottom Song Details row and spanning the full Song Details width.
+- Restored Octave Timeline quick Instruments in the left column as an accordion.
+- Kept Octave Timeline quick controls limited to select, mute, solo, and hide/show.
+- Preserved GM Type and GM Instrument/Patch ownership in the Instruments tab.
+- Preserved selectedInstrumentId sync, canvas-backed note editing, and Play/Stop.
+
+## Validation
+
+PASS - `node --check tools/midi-studio-v2/js/controls/SongDetailsControl.js`
+
+PASS - `node --check tools/midi-studio-v2/js/bootstrap.js`
+
+PASS - `node --check tools/midi-studio-v2/js/MidiStudioV2App.js`
+
+PASS - `node --check tools/midi-studio-v2/js/controls/SongSheetControl.js`
+
+PASS - `node --check tools/midi-studio-v2/js/services/MidiStudioStateSerializer.js`
+
+PASS - `node --check tools/midi-studio-v2/js/controls/InstrumentGridControl.js`
+
+PASS - `node --check tests/playwright/tools/MidiStudioV2.spec.mjs`
+
+PASS - HTML restriction check found no inline script blocks, style blocks, inline event handlers, or inline style attributes in `tools/midi-studio-v2/index.html`.
+
+WARN - `npx playwright test tests/playwright/tools/MidiStudioV2.spec.mjs --project=chromium -g "PR063|PR062|PR061|PR060"` was not a valid local project name. The repo exposes `playwright`.
+
+PASS - `npx playwright test tests/playwright/tools/MidiStudioV2.spec.mjs --project=playwright -g "PR063|PR062|PR061|PR060"`
+
+Result: 4 passed.
+
+PASS - `git diff --check`
+
+PASS - Playwright V8 coverage report generated at `docs/dev/reports/playwright_v8_coverage_report.txt`.
+
+PASS - Changed runtime JS coverage guardrail generated at `docs/dev/reports/coverage_changed_js_guardrail.txt`.
+
+## Playwright Evidence
+
+- Notes renders below the Song Details core fields.
+- Notes is the only bottom-row Song Details field.
+- Notes spans the available Song Details width.
+- Tempo/BPM, Key, and Style remain editable in Song Details.
+- Song Sheet remains structure-only and does not duplicate Tempo/BPM, Key, or Style.
+- Octave Timeline left column contains the Instruments accordion.
+- Octave Timeline Instruments contains quick select, mute, solo, and hide/show controls.
+- GM Type and GM Instrument/Patch dropdowns are absent from Octave Timeline and visible in the Instruments tab.
+- Selecting an instrument in Octave Timeline syncs `selectedInstrumentId` to the Instruments tab.
+- Selecting an instrument in Instruments syncs back to Octave Timeline quick controls.
+- Play and Stop still transition correctly.
+
+## Samples Decision
+
+SKIP - Full samples smoke test was not run per PR instruction. This PR is scoped to MIDI Studio V2 layout and targeted tool behavior.
+

tests/playwright/tools/MidiStudioV2.spec.mjs

@@ -2166,7 +2166,7 @@ test.describe("MIDI Studio V2", () => {
       await expect(page.locator("#songSheetStyleInput")).toHaveValue("public-domain-reel");
       await expect(page.locator("#songDetails [data-song-detail-field='tags']")).toHaveCount(0);
       await expect(page.locator("#songDetails [data-song-detail-field='usage']")).toHaveCount(0);
-      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("#songDetailNotes [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']")).toHaveCount(0);
       await expect(page.locator("#songSheetSectionsInput")).toHaveValue(/intro: G C G D/);
       await expect(page.locator("#songSheetLoopSectionsInput")).toHaveValue("loop");
@@ -2189,7 +2189,7 @@ test.describe("MIDI Studio V2", () => {
       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='notes']").fill("Edited notes from Song Setup.");
+      await page.locator("#songDetailNotes [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 song = window.__midiStudioV2App.selectedSong();
@@ -2358,7 +2358,7 @@ test.describe("MIDI Studio V2", () => {
         songTempo: "#songSheetTempoInput",
         songKey: "#songSheetKeyInput",
         songStyle: "#songSheetStyleInput",
-        songNotes: "#songDetails [data-song-detail-field='notes']"
+        songNotes: "#songDetailNotes [data-song-detail-field='notes']"
       };
       const ownership = await page.evaluate((selectors) => Object.fromEntries(Object.entries(selectors).map(([name, selector]) => {
         const elements = Array.from(document.querySelectorAll(selector));
@@ -2949,6 +2949,108 @@ test.describe("MIDI Studio V2", () => {
     }
   });
 
+  test("keeps PR063 notes layout and Octave Timeline quick instruments scoped to the left column", async ({ page }) => {
+    const server = await openMidiStudioForImport(page);
+    try {
+      await page.locator("#toolImportManifestInput").setInputFiles(uatManifestPath);
+      await selectMidiStudioTab(page, "song-setup");
+
+      const notesLayout = await page.locator("#songDetailsContent").evaluate((container) => {
+        const editor = container.querySelector(".midi-studio-v2__song-detail-editor");
+        const core = container.querySelector(".midi-studio-v2__song-detail-core-fields");
+        const notesList = container.querySelector("#songDetailNotes");
+        const notesRow = notesList?.querySelector(".midi-studio-v2__editable-detail");
+        const notesField = notesList?.querySelector("[data-song-detail-field='notes']");
+        const detailRows = Array.from(container.querySelectorAll("#songDetails .midi-studio-v2__editable-detail, .midi-studio-v2__song-detail-core-fields .tool-starter__field, #songDetailNotes .midi-studio-v2__editable-detail"));
+        const editorRect = editor.getBoundingClientRect();
+        const coreRect = core.getBoundingClientRect();
+        const notesRect = notesRow.getBoundingClientRect();
+        const notesFieldRect = notesField.getBoundingClientRect();
+        const laterRows = detailRows.filter((row) => row.getBoundingClientRect().top > notesRect.top + 1);
+        const sameRowPeers = detailRows.filter((row) => {
+          const rect = row.getBoundingClientRect();
+          return row !== notesRow && Math.abs(rect.top - notesRect.top) <= 2;
+        });
+        return {
+          editorWidth: editorRect.width,
+          laterRows: laterRows.length,
+          notesAfterCore: notesRect.top >= coreRect.bottom - 2,
+          notesFieldWidth: notesFieldRect.width,
+          notesListWidth: notesList.getBoundingClientRect().width,
+          notesRowWidth: notesRect.width,
+          sameRowPeers: sameRowPeers.length
+        };
+      });
+      expect(notesLayout.laterRows).toBe(0);
+      expect(notesLayout.notesAfterCore).toBe(true);
+      expect(notesLayout.sameRowPeers).toBe(0);
+      expect(notesLayout.notesListWidth).toBeGreaterThanOrEqual(notesLayout.editorWidth - 2);
+      expect(notesLayout.notesRowWidth).toBeGreaterThanOrEqual(notesLayout.editorWidth - 4);
+      expect(notesLayout.notesFieldWidth).toBeGreaterThan(notesLayout.editorWidth * 0.85);
+
+      await expect(page.locator("#songDetailsContent #songSheetTempoInput")).toBeVisible();
+      await expect(page.locator("#songDetailsContent #songSheetKeyInput")).toBeVisible();
+      await expect(page.locator("#songDetailsContent #songSheetStyleInput")).toBeVisible();
+      expect(await page.locator("#songSheetTempoInput").evaluate((input) => input.readOnly || input.disabled)).toBe(false);
+      expect(await page.locator("#songSheetKeyInput").evaluate((select) => select.disabled)).toBe(false);
+      expect(await page.locator("#songSheetStyleInput").evaluate((select) => select.disabled)).toBe(false);
+      await page.locator("#songSheetTempoInput").fill("151");
+      await page.locator("#songSheetKeyInput").selectOption("C major");
+      await page.locator("#songSheetStyleInput").selectOption("chip");
+      expect(await page.evaluate(() => {
+        const arrangement = window.__midiStudioV2App.selectedSong().studioArrangement;
+        return {
+          key: arrangement.key,
+          style: arrangement.style,
+          tempo: arrangement.tempo
+        };
+      })).toEqual({ key: "C major", style: "chip", tempo: "151" });
+
+      await expect(page.locator("#songSheetContent #songSheetTempoInput, #songSheetContent #songSheetKeyInput, #songSheetContent #songSheetStyleInput")).toHaveCount(0);
+      await expect(page.locator("#songSheetSectionsInput")).toBeVisible();
+      await expect(page.locator("#songSheetLoopSectionsInput")).toBeVisible();
+      await expect(page.locator("#songSheetSummary [data-song-sheet-summary-field='bars'] [data-song-sheet-computed='true']")).toHaveCount(1);
+      await expect(page.locator("#songSheetSummary [data-song-sheet-summary-field='warnings'] [data-song-sheet-diagnostics='true']")).toHaveCount(1);
+
+      await selectMidiStudioTab(page, "studio");
+      await waitForCanvasRender(page);
+      const quickAccordion = page.locator('.tool-starter__panel--left [aria-controls="timelineInstrumentQuickContent"]');
+      await expect(quickAccordion).toBeVisible();
+      await expect(quickAccordion).toContainText("Instruments");
+      await expect(page.locator('.tool-starter__panel--left #timelineInstrumentQuickContent')).toBeVisible();
+      await expect(page.locator(".tool-starter__panel--center #timelineInstrumentQuickList")).toHaveCount(0);
+      await expect(timelineQuickInstrumentRow(page, "lead")).toBeVisible();
+      await expect(timelineQuickInstrumentRow(page, "lead").locator("[data-timeline-quick-mute='lead']")).toBeVisible();
+      await expect(timelineQuickInstrumentRow(page, "lead").locator("[data-timeline-quick-solo='lead']")).toBeVisible();
+      await expect(timelineQuickInstrumentRow(page, "lead").locator("[data-toggle-instrument-visibility='lead']")).toBeVisible();
+      await expect(page.locator("#timelineInstrumentQuickList select, #timelineInstrumentQuickList input:not([type='checkbox']), #timelineInstrumentQuickList [data-lane-instrument-type-select], #timelineInstrumentQuickList [data-lane-instrument-select]")).toHaveCount(0);
+
+      await timelineQuickInstrumentRow(page, "bass").click();
+      expect(await page.evaluate(() => window.__midiStudioV2App.instrumentGrid.selectedInstrumentId)).toBe("bass");
+      await selectMidiStudioTab(page, "instruments");
+      await expect(instrumentRow(page, "bass")).toHaveClass(/is-selected/);
+      await expect(instrumentTypeSelect(page, "bass")).toBeVisible();
+      await expect(instrumentSelect(page, "bass")).toBeVisible();
+      expect(await instrumentTypeSelect(page, "bass").evaluate((select) => select.closest("[data-midi-studio-tab-panel]")?.dataset.midiStudioTabPanel)).toBe("instruments");
+      expect(await instrumentSelect(page, "bass").evaluate((select) => select.closest("[data-midi-studio-tab-panel]")?.dataset.midiStudioTabPanel)).toBe("instruments");
+
+      await selectInstrumentRow(page, "lead");
+      expect(await page.evaluate(() => window.__midiStudioV2App.instrumentGrid.selectedInstrumentId)).toBe("lead");
+      await selectMidiStudioTab(page, "studio");
+      await expect(timelineQuickInstrumentRow(page, "lead")).toHaveClass(/is-selected/);
+
+      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();
+    } finally {
+      await workspaceV2CoverageReporter.stop(page);
+      await server.close();
+    }
+  });
+
   test("derives primary song, instrument, grid, playback, and diagnostics views from the canonical selected song", async ({ page }) => {
     const server = await openMidiStudioForImport(page);
     try {

tools/midi-studio-v2/index.html

@@ -78,6 +78,15 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
             <div id="songList" class="midi-studio-v2__song-list" role="listbox" aria-label="MIDI songs"></div>
           </div>
         </section>
+        <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true" data-midi-studio-tab-panel="studio">
+          <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="timelineInstrumentQuickContent">
+            <span>Instruments</span>
+            <span class="accordion-v2__icon" aria-hidden="true">+</span>
+          </button>
+          <div id="timelineInstrumentQuickContent" class="accordion-v2__content midi-studio-v2__timeline-instruments">
+            <div id="timelineInstrumentQuickList" class="midi-studio-v2__timeline-instrument-list" aria-label="Octave Timeline quick instrument controls"></div>
+          </div>
+        </section>
         <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true" data-midi-studio-tab-panel="midi-import">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="midiImportContent">
             <span>MIDI Import</span>
@@ -178,6 +187,7 @@ <h3 id="songDetailsHeading">Song Details</h3>
                   </select>
                 </label>
               </div>
+              <dl id="songDetailNotes" class="midi-studio-v2__details midi-studio-v2__song-detail-notes" aria-label="Song notes"></dl>
             </div>
           </div>
         </section>
@@ -306,10 +316,6 @@ <h2 id="instrumentGridHeading">Octave Timeline</h2>
                 <button id="instrumentGridZoomInButton" class="midi-studio-v2__zoom-button" type="button" aria-label="Zoom in octave grid" title="Zoom in octave grid">+</button>
               </div>
             </div>
-            <section class="midi-studio-v2__timeline-instruments" data-midi-studio-tab-panel="studio" aria-labelledby="timelineQuickInstrumentsHeading">
-              <h3 id="timelineQuickInstrumentsHeading">Instruments</h3>
-              <div id="timelineInstrumentQuickList" class="midi-studio-v2__timeline-instrument-list" aria-label="Octave Timeline quick instrument controls"></div>
-            </section>
             <div class="midi-studio-v2__grid-settings" data-midi-studio-tab-panel="auto-create-parts">
               <label class="tool-starter__field" for="instrumentGridSectionsInput">
                 <span>Grid sections from Song Sheet</span>

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

@@ -69,6 +69,7 @@ window.addEventListener("DOMContentLoaded", () => {
       details: requireElement("#songDetails"),
       instrumentSetField: requireElement("#instrumentSetField"),
       inspector: requireElement("#inspectorOutput"),
+      notesDetails: requireElement("#songDetailNotes"),
       renderedTargets: requireElement("#renderedTargets"),
       sectionsLoopDetails: requireElement("#songSectionsLoopDetails"),
       sourceField: requireElement("#songSourceField")

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

@@ -15,14 +15,17 @@ function displayValue(value) {
 }
 
 function editableRows(song) {
-  const rows = [
+  return [
     { field: "name", label: "Name", type: "text", value: song.name },
     { field: "id", label: "Id", readonly: true, type: "text", value: song.id }
   ];
+}
+
+function notesRows(song) {
   if (song.director?.notes) {
-    rows.push({ field: "notes", label: "Notes", rows: 2, type: "textarea", value: song.director.notes });
+    return [{ field: "notes", label: "Notes", rows: 3, type: "textarea", value: song.director.notes }];
   }
-  return rows;
+  return [];
 }
 
 function sectionsLoopRows(song) {
@@ -34,10 +37,11 @@ function sectionsLoopRows(song) {
 }
 
 export class SongDetailsControl {
-  constructor({ details, instrumentSetField, inspector, renderedTargets, sectionsLoopDetails, sourceField }) {
+  constructor({ details, instrumentSetField, inspector, notesDetails, renderedTargets, sectionsLoopDetails, sourceField }) {
     this.details = details;
     this.instrumentSetField = instrumentSetField;
     this.inspector = inspector;
+    this.notesDetails = notesDetails;
     this.onChange = () => {};
     this.renderedTargets = renderedTargets;
     this.sectionsLoopDetails = sectionsLoopDetails;
@@ -46,7 +50,7 @@ export class SongDetailsControl {
 
   mount({ onChange = () => {} } = {}) {
     this.onChange = onChange;
-    [this.details, this.sectionsLoopDetails].filter(Boolean).forEach((list) => {
+    [this.details, this.notesDetails, this.sectionsLoopDetails].filter(Boolean).forEach((list) => {
       list.addEventListener("input", (event) => this.handleFieldChange(event));
       list.addEventListener("change", (event) => this.handleFieldChange(event));
     });
@@ -81,6 +85,7 @@ export class SongDetailsControl {
   renderEmptyDetails(payload) {
     this.details.replaceChildren();
     this.details.classList.remove("midi-studio-v2__editable-details");
+    this.renderEmptyNotesDetails();
     this.renderEmptySectionsLoopDetails();
     if (this.details.hidden) {
       this.renderDefinitionList(this.renderedTargets, [["WAV", "No rendered WAV target selected."], ["MP3", "No rendered MP3 target selected."], ["OGG", "No rendered OGG target selected."]]);
@@ -110,6 +115,20 @@ export class SongDetailsControl {
     this.details.replaceChildren();
     this.details.classList.add("midi-studio-v2__editable-details");
     this.renderEditableRows(this.details, editableRows(song));
+    this.renderNotesDetails(song);
+  }
+
+  renderNotesDetails(song) {
+    if (!this.notesDetails) {
+      return;
+    }
+    this.notesDetails.replaceChildren();
+    const rows = notesRows(song);
+    this.notesDetails.hidden = !rows.length;
+    this.notesDetails.classList.toggle("midi-studio-v2__editable-details", rows.length > 0);
+    if (rows.length) {
+      this.renderEditableRows(this.notesDetails, rows);
+    }
   }
 
   renderSectionsLoopDetails(song) {
@@ -133,6 +152,15 @@ export class SongDetailsControl {
     this.sectionsLoopDetails.append(empty);
   }
 
+  renderEmptyNotesDetails() {
+    if (!this.notesDetails) {
+      return;
+    }
+    this.notesDetails.replaceChildren();
+    this.notesDetails.classList.remove("midi-studio-v2__editable-details");
+    this.notesDetails.hidden = true;
+  }
+
   renderEditableRows(list, rows) {
     rows.forEach((row) => {
       const wrapper = document.createElement("div");
@@ -174,7 +202,8 @@ export class SongDetailsControl {
   }
 
   updateFieldValue(field, value) {
-    const control = this.details.querySelector(`[data-song-detail-field="${field}"]`);
+    const control = this.details.querySelector(`[data-song-detail-field="${field}"]`)
+      || this.notesDetails?.querySelector(`[data-song-detail-field="${field}"]`);
     if (control && control.type !== "checkbox") {
       control.value = displayValue(value) === "not declared" ? "" : displayValue(value);
     }