Refine MIDI Studio V2 octave grid density and add proper multi-note chord editing - PR_26146_029-midi-studio-v2-octave-grid-density-and-chords

Author: ToolboxAid

docs/dev/reports/PR_26146_029-midi-studio-v2-octave-grid-density-and-chords_validation.md

@@ -0,0 +1,54 @@
+# PR_26146_029 MIDI Studio V2 Octave Grid Density and Chords Validation
+
+Status: PASS
+
+## Scope
+
+- Continued from PR_26146_028.
+- Refined the MIDI Studio V2 octave timeline editor density and instrument controls.
+- Removed decorative visible note-block spans from octave timeline cells.
+- Added additive multi-note timeline editing with `+`-joined cell tokens for notes and drums.
+- Expanded parser normalization so simultaneous notes become independent playable timeline events.
+- Preserved GM family type/instrument dropdown behavior.
+
+## Changed Files
+
+- `src/engine/audio/InstrumentGridParser.js`
+- `tools/midi-studio-v2/js/controls/InstrumentGridControl.js`
+- `tools/midi-studio-v2/styles/midiStudioV2.css`
+- `tests/playwright/tools/MidiStudioV2.spec.mjs`
+- `docs/dev/reports/PR_26146_029-midi-studio-v2-octave-grid-density-and-chords_validation.md`
+
+## Validation
+
+- PASS: `node --check tools/midi-studio-v2/js/controls/InstrumentGridControl.js`
+- PASS: `node --check src/engine/audio/InstrumentGridParser.js`
+- PASS: `node --check tests/playwright/tools/MidiStudioV2.spec.mjs`
+- PASS: `npx playwright test tests/playwright/tools/MidiStudioV2.spec.mjs -g "octave timeline editor is the default editable and playable Studio workflow|octave grid density supports icon controls and simultaneous chord editing" --reporter=list --workers=1 --timeout=60000`
+  - 2 passed.
+- PASS: `git diff --check`
+  - No whitespace errors. Git emitted LF-to-CRLF working-copy warnings for touched text files.
+
+## Required Proof Points
+
+- PASS: octave timeline editor remains visible by default.
+- PASS: songs populate the left Songs column from the imported manifest.
+- PASS: instrument controls populate the left Instruments column.
+- PASS: visibility control uses icon-only button text with accessible labels.
+- PASS: mute, solo, eye, and delete controls stay on one horizontal row.
+- PASS: octave rows are denser/shorter.
+- PASS: visible octave note cells render direct text without `.midi-studio-v2__note-block` wrappers.
+- PASS: GM type dropdown and dependent instrument dropdown behavior is preserved.
+- PASS: multiple notes can exist in the same bar/beat column.
+- PASS: adding one note does not remove sibling notes in the same bar/beat.
+- PASS: chords/multi-note cells playback as simultaneous same-time oscillator starts.
+- PASS: drum rows support simultaneous same-time events.
+- PASS: selected instrument notes stay highlighted and non-selected notes stay dimmed.
+- PASS: show/hide eye behavior still removes and restores hidden-lane timeline notes.
+- PASS: playhead progression remains aligned to beat/bar columns.
+- PASS: Play and Stop work from visible octave timeline data.
+
+## Notes
+
+- Full samples smoke test was not run, per BUILD request.
+- SoundFont playback, export rendering, and MIDI recording/input were not implemented, per BUILD request.

src/engine/audio/InstrumentGridParser.js

@@ -240,6 +240,12 @@ export class InstrumentGridParser {
     if (lane === "drums" || this.isDrumToken(value)) {
       return this.normalizeDrums({ cell, timing, value });
     }
+    if (value.includes("+")) {
+      return this.normalizeNotes({ cell, timing, value });
+    }
+    if (NOTE_PATTERN.test(value)) {
+      return { cell, events: [this.eventForCell({ cell, kind: "note", value })], ok: true, warnings: [] };
+    }
     if (lane === "chords") {
       if (!CHORD_PATTERN.test(value)) {
         return { message: `Invalid chord token "${value}" in ${lane} at bar ${timing.bar}, beat ${timing.beat}.`, ok: false };
@@ -249,10 +255,24 @@ export class InstrumentGridParser {
     if (lane === "pad" && CHORD_PATTERN.test(value)) {
       return { cell, events: [this.eventForCell({ cell, kind: "chord", value })], ok: true, warnings: [] };
     }
-    if (!NOTE_PATTERN.test(value)) {
-      return { message: `Invalid note token "${value}" in ${lane} at bar ${timing.bar}, beat ${timing.beat}. Use notes like C4 or rests (-).`, ok: false };
+    return { message: `Invalid note token "${value}" in ${lane} at bar ${timing.bar}, beat ${timing.beat}. Use notes like C4, C4+E4, or rests (-).`, ok: false };
+  }
+
+  normalizeNotes({ cell, timing, value }) {
+    const parts = value.split("+").map((part) => part.trim()).filter(Boolean);
+    const invalid = parts.filter((part) => !NOTE_PATTERN.test(part));
+    if (!parts.length || invalid.length) {
+      return {
+        message: `Invalid multi-note token "${value}" in ${cell.lane} at bar ${timing.bar}, beat ${timing.beat}. Use notes like C4+E4+G4.`,
+        ok: false
+      };
     }
-    return { cell, events: [this.eventForCell({ cell, kind: "note", value })], ok: true, warnings: [] };
+    return {
+      cell,
+      events: parts.map((part) => this.eventForCell({ cell, kind: "note", value: part })),
+      ok: true,
+      warnings: []
+    };
   }
 
   normalizeDrums({ cell, timing, value }) {

tests/playwright/tools/MidiStudioV2.spec.mjs

@@ -353,13 +353,17 @@ function octaveCell(page, rowToken, stepIndex) {
 }
 
 function octaveNoteBlock(page, lane) {
-  return page.locator(`.midi-studio-v2__note-block[data-lane="${lane}"]`);
+  return page.locator(`.midi-studio-v2__octave-note-cell[data-note-lanes~="${lane}"]`);
 }
 
 function instrumentRow(page, lane) {
   return page.locator(`.midi-studio-v2__instrument-row[data-lane="${lane}"]`);
 }
 
+async function selectInstrumentRow(page, lane) {
+  await instrumentRow(page, lane).locator(`[data-lane-label="${lane}"]`).click();
+}
+
 function instrumentTypeSelect(page, lane) {
   return instrumentRow(page, lane).locator("[data-lane-instrument-type-select]");
 }
@@ -449,21 +453,24 @@ test.describe("MIDI Studio V2", () => {
       ]);
       await instrumentTypeSelect(page, "lead").selectOption("Synth Lead");
       await instrumentSelect(page, "lead").selectOption("retro-pulse-lead");
-      await instrumentRow(page, "lead").click();
-      await expect(octaveNoteBlock(page, "lead").first()).toHaveClass(/midi-studio-v2__note-block--selected/);
-      await expect(octaveNoteBlock(page, "chords").first()).toHaveClass(/midi-studio-v2__note-block--dimmed/);
+      await selectInstrumentRow(page, "lead");
+      await expect(octaveNoteBlock(page, "lead").first()).toHaveClass(/midi-studio-v2__grid-cell--lane-selected/);
+      await expect(octaveNoteBlock(page, "chords").first()).toHaveClass(/midi-studio-v2__grid-cell--lane-dimmed/);
       await expect(page.locator(".midi-studio-v2__octave-row-label[data-octave='5']")).not.toHaveCount(0);
-      await expect(octaveCell(page, "G4", 0).locator('[data-lane="lead"]')).toContainText("G4");
-      await instrumentRow(page, "bass").click();
-      await expect(octaveCell(page, "G2", 0).locator('[data-lane="bass"]')).toContainText("G2");
+      await expect(octaveCell(page, "G4", 0)).toContainText("G4");
+      await expect(octaveCell(page, "G4", 0)).toHaveAttribute("data-note-lanes", /lead/);
+      await selectInstrumentRow(page, "bass");
+      await expect(octaveCell(page, "G2", 0)).toContainText("G2");
+      await expect(octaveCell(page, "G2", 0)).toHaveAttribute("data-note-lanes", /bass/);
       await instrumentRow(page, "bass").locator("[data-toggle-instrument-visibility='bass']").click();
       await expect(octaveNoteBlock(page, "bass")).toHaveCount(0);
       await expect(page.locator("#statusLog")).toHaveValue(/INFO Lane hidden: Bass\./);
       await instrumentRow(page, "bass").locator("[data-toggle-instrument-visibility='bass']").click();
       await expect(octaveNoteBlock(page, "bass").first()).toBeVisible();
-      await instrumentRow(page, "lead").click();
+      await selectInstrumentRow(page, "lead");
       await octaveCell(page, "C5", 1).click();
-      await expect(octaveCell(page, "C5", 1).locator('[data-lane="lead"]')).toHaveText("C5");
+      await expect(octaveCell(page, "C5", 1)).toHaveText("C5");
+      await expect(octaveCell(page, "C5", 1)).toHaveAttribute("data-note-lanes", /lead/);
       expect(await page.evaluate(() => window.__midiStudioV2App.lastInstrumentGridResult.timeline.some((event) => event.lane === "lead" && event.value === "C5" && event.stepIndex === 1))).toBe(true);
 
       await page.locator("#playButton").click();
@@ -482,9 +489,11 @@ test.describe("MIDI Studio V2", () => {
       await expect(page.locator("#playButton")).toBeEnabled();
 
       await page.locator('[data-song-id="frog-hop-nursery-rhyme"]').click();
-      await expect(octaveCell(page, "C5", 0).locator('[data-lane="lead"]')).toContainText("C5");
+      await expect(octaveCell(page, "C5", 0)).toContainText("C5");
+      await expect(octaveCell(page, "C5", 0)).toHaveAttribute("data-note-lanes", /lead/);
       await page.locator('[data-song-id="quiet-village-pad"]').click();
-      await expect(octaveCell(page, "D5", 0).locator('[data-lane="lead"]')).toContainText("D5");
+      await expect(octaveCell(page, "D5", 0)).toContainText("D5");
+      await expect(octaveCell(page, "D5", 0)).toHaveAttribute("data-note-lanes", /lead/);
 
       await selectMidiStudioTab(page, "midi-import");
       await page.locator("#midiSourceFileInput").setInputFiles({
@@ -496,9 +505,11 @@ test.describe("MIDI Studio V2", () => {
       await expect(page.locator("#songList")).toContainText("Local Import");
       await selectMidiStudioTab(page, "studio");
       await expect(instrumentRow(page, "track-2-ch-1")).toBeVisible();
-      await expect(octaveCell(page, "C4", 0).locator('[data-lane="track-2-ch-1"]')).toContainText("C4");
+      await expect(octaveCell(page, "C4", 0)).toContainText("C4");
+      await expect(octaveCell(page, "C4", 0)).toHaveAttribute("data-note-lanes", /track-2-ch-1/);
       await octaveCell(page, "D4", 1).click();
-      await expect(octaveCell(page, "D4", 1).locator('[data-lane="track-2-ch-1"]')).toHaveText("D4");
+      await expect(octaveCell(page, "D4", 1)).toHaveText("D4");
+      await expect(octaveCell(page, "D4", 1)).toHaveAttribute("data-note-lanes", /track-2-ch-1/);
       expect(await page.evaluate(() => window.__midiStudioV2App.selectedSong().studioArrangement.lanes["track-2-ch-1"])).toContain("D4");
       await page.evaluate(() => {
         window.__midiStudioPreviewSynthEvents = [];
@@ -514,6 +525,136 @@ test.describe("MIDI Studio V2", () => {
     }
   });
 
+  test("octave grid density supports icon controls and simultaneous chord editing", async ({ page }) => {
+    const server = await openMidiStudioForImport(page);
+    try {
+      await page.locator("#toolImportManifestInput").setInputFiles(uatManifestPath);
+      await selectInstrumentRow(page, "lead");
+
+      const leadVisibility = instrumentRow(page, "lead").locator("[data-toggle-instrument-visibility='lead']");
+      await expect(leadVisibility).toHaveText("");
+      await expect(leadVisibility).toHaveAttribute("aria-pressed", "true");
+      await expect(leadVisibility).toHaveAttribute("aria-label", /Hide Lead/);
+      const controlAlignment = await instrumentRow(page, "lead").locator(".midi-studio-v2__instrument-control-row").evaluate((row) => {
+        const controls = [
+          row.querySelector('[aria-label="Mute Lead"]')?.closest("label"),
+          row.querySelector('[aria-label="Solo Lead"]')?.closest("label"),
+          row.querySelector("[data-toggle-instrument-visibility='lead']"),
+          row.querySelector("[data-delete-instrument-row='lead']")
+        ];
+        if (controls.some((control) => !control)) {
+          return { maxCenterDelta: 999, missing: true };
+        }
+        const centers = controls.map((control) => {
+          const rect = control.getBoundingClientRect();
+          return rect.top + rect.height / 2;
+        });
+        return {
+          maxCenterDelta: Math.max(...centers) - Math.min(...centers),
+          missing: false
+        };
+      });
+      expect(controlAlignment.missing).toBe(false);
+      expect(controlAlignment.maxCenterDelta).toBeLessThanOrEqual(4);
+
+      const octaveCellHeight = await octaveCell(page, "C5", 0).evaluate((cell) => cell.getBoundingClientRect().height);
+      expect(octaveCellHeight).toBeLessThanOrEqual(32);
+      await expect(page.locator(".midi-studio-v2__octave-timeline .midi-studio-v2__note-block")).toHaveCount(0);
+
+      const chordStep = await page.evaluate(() => {
+        const result = window.__midiStudioV2App.lastInstrumentGridResult;
+        const target = new Set(["C5", "E5", "G5"]);
+        for (let stepIndex = 0; stepIndex < result.totalSteps; stepIndex += 1) {
+          const leadValues = result.timeline
+            .filter((event) => event.lane === "lead" && event.kind === "note" && event.stepIndex === stepIndex)
+            .map((event) => event.value);
+          if (leadValues.length && leadValues.every((value) => !target.has(value))) {
+            return stepIndex;
+          }
+        }
+        return 0;
+      });
+      const initialLeadValues = await page.evaluate((stepIndex) => window.__midiStudioV2App.lastInstrumentGridResult.timeline
+        .filter((event) => event.lane === "lead" && event.kind === "note" && event.stepIndex === stepIndex)
+        .map((event) => event.value), chordStep);
+      await octaveCell(page, "C5", chordStep).click();
+      await octaveCell(page, "E5", chordStep).click();
+      await expect(octaveCell(page, "C5", chordStep)).toHaveText("C5");
+      await expect(octaveCell(page, "E5", chordStep)).toHaveText("E5");
+      await octaveCell(page, "G5", chordStep).click();
+      const leadChordValues = await page.evaluate((stepIndex) => window.__midiStudioV2App.lastInstrumentGridResult.timeline
+        .filter((event) => event.lane === "lead" && event.kind === "note" && event.stepIndex === stepIndex)
+        .map((event) => event.value)
+        .sort(), chordStep);
+      expect(leadChordValues).toEqual(expect.arrayContaining(["C5", "E5", "G5"]));
+      expect(leadChordValues).toEqual(expect.arrayContaining(initialLeadValues));
+      await expect(octaveCell(page, "C5", chordStep)).toHaveClass(/midi-studio-v2__grid-cell--lane-selected/);
+      await expect(octaveNoteBlock(page, "chords").first()).toHaveClass(/midi-studio-v2__grid-cell--lane-dimmed/);
+
+      await leadVisibility.click();
+      await expect(octaveNoteBlock(page, "lead")).toHaveCount(0);
+      await leadVisibility.click();
+      await expect(octaveCell(page, "C5", chordStep)).toHaveAttribute("data-note-lanes", /lead/);
+
+      await selectInstrumentRow(page, "drums");
+      const drumPlan = await page.evaluate(() => {
+        const result = window.__midiStudioV2App.lastInstrumentGridResult;
+        const target = ["kick", "snare", "hat"];
+        for (let stepIndex = 0; stepIndex < result.totalSteps; stepIndex += 1) {
+          const values = result.timeline
+            .filter((event) => event.lane === "drums" && event.kind === "drum" && event.stepIndex === stepIndex)
+            .map((event) => event.value);
+          const missing = target.filter((value) => !values.includes(value));
+          if (missing.length) {
+            return { missing, stepIndex };
+          }
+        }
+        return { missing: [], stepIndex: 0 };
+      });
+      for (const rowToken of drumPlan.missing) {
+        await octaveCell(page, rowToken, drumPlan.stepIndex).click();
+      }
+      const drumValues = await page.evaluate((stepIndex) => window.__midiStudioV2App.lastInstrumentGridResult.timeline
+        .filter((event) => event.lane === "drums" && event.kind === "drum" && event.stepIndex === stepIndex)
+        .map((event) => event.value)
+        .sort(), drumPlan.stepIndex);
+      expect(drumValues).toEqual(expect.arrayContaining(["hat", "kick", "snare"]));
+
+      await page.evaluate(() => {
+        window.__midiStudioPreviewSynthEvents = [];
+      });
+      await page.locator("#playButton").click();
+      await expect(page.locator("#stopButton")).toBeEnabled();
+      await expect(page.locator('.midi-studio-v2__grid-cell--playhead-active[data-step-index="0"]').first()).toBeVisible();
+      const playbackEvidence = await page.evaluate(() => {
+        const maxSameTime = (action) => {
+          const counts = new Map();
+          window.__midiStudioPreviewSynthEvents
+            .filter((event) => event.action === action)
+            .forEach((event) => {
+              const key = Number(event.time).toFixed(3);
+              counts.set(key, (counts.get(key) || 0) + 1);
+            });
+          return Math.max(0, ...counts.values());
+        };
+        return {
+          bufferStartsAtSameTime: maxSameTime("buffer-start"),
+          oscillatorStartsAtSameTime: maxSameTime("oscillator-start")
+        };
+      });
+      expect(playbackEvidence.oscillatorStartsAtSameTime).toBeGreaterThanOrEqual(3);
+      expect(playbackEvidence.bufferStartsAtSameTime).toBeGreaterThanOrEqual(2);
+      await page.waitForFunction(() => window.__midiStudioV2App.instrumentGrid.playheadStep > 0);
+      const activeStep = await page.evaluate(() => window.__midiStudioV2App.instrumentGrid.playheadStep);
+      await expect(page.locator(`.midi-studio-v2__grid-cell--timing-header.midi-studio-v2__grid-cell--playhead-active[data-step-index="${activeStep}"]`)).toHaveCount(1);
+      await page.locator("#stopButton").click();
+      await expect(page.locator("#playButton")).toBeEnabled();
+    } finally {
+      await workspaceV2CoverageReporter.stop(page);
+      await server.close();
+    }
+  });
+
   test("imports UAT manifest and plays the upbeat multi-instrument studio arrangement", async ({ page }) => {
     const server = await openMidiStudioForImport(page);
     try {