Polish MIDI Studio V2 note editing persistence and timeline workflow - PR_26146_033-midi-studio-v2-note-editing-polish-and-persistence

Author: ToolboxAid

docs/dev/reports/PR_26146_032-midi-studio-v2-fast-note-editing-and-keyboard-flow_validation.md

@@ -0,0 +1,74 @@
+# PR_26146_032-midi-studio-v2-fast-note-editing-and-keyboard-flow Validation
+
+Status: PASS
+
+## Scope
+
+- Continued from `PR_26146_031-midi-studio-v2-instrument-audibility-and-tooltips`.
+- Improved MIDI Studio V2 octave editor fast editing and keyboard-flow coverage.
+- Fixed post-drag note-paint click suppression so the next intentional note click is not swallowed when Chromium does not emit a drag-ending synthetic click.
+- Hardened targeted Playwright proof for dynamic chord-step selection and no-scroll-jump timeline editing.
+- Preserved compact instrument controls, GM Type + Instrument dropdowns, selected-lane dominance, dimmed non-selected notes, percussion behavior, and playhead bar/beat alignment.
+
+## Validation Commands
+
+```powershell
+node --check tools/midi-studio-v2/js/controls/InstrumentGridControl.js
+node --check tests/playwright/tools/MidiStudioV2.spec.mjs
+npx.cmd 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|fast octave note editing supports drag painting keyboard shortcuts selection and timeline scroll sync" --reporter=list --workers=1 --timeout=60000
+npx.cmd 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|fast octave note editing supports drag painting keyboard shortcuts selection and timeline scroll sync" --config=codex_playwright_system_chrome.config.cjs --reporter=list --workers=1 --timeout=60000
+git diff --check
+```
+
+## Results
+
+- PASS: changed-file syntax checks passed.
+- WARN: the standard Playwright command could not launch bundled Chromium because `C:\Users\DavidQ\AppData\Local\ms-playwright\chromium-1217\chrome-win64\chrome.exe` is not installed in this environment.
+- PASS: targeted MIDI Studio V2 Playwright rerun passed through the tracked system-Chrome config, `3 passed`.
+- PASS: `git diff --check` exited successfully. Git reported only line-ending notices for tracked files.
+- PASS: Playwright V8 coverage artifacts are present:
+  - `docs/dev/reports/playwright_v8_coverage_report.txt`
+  - `docs/dev/reports/coverage_changed_js_guardrail.txt`
+
+## Playwright Proof
+
+The targeted MIDI Studio V2 Playwright run validates:
+
+- click-to-toggle note editing works without dialogs.
+- click-and-drag note painting works across timeline cells.
+- horizontal drag extension paints a continuous visible note duration.
+- chord editing preserves simultaneous notes in the same beat column.
+- Delete, Backspace, Arrow keys, Ctrl+D, and Space keyboard shortcuts function.
+- selected note cells receive a visible selection highlight.
+- selected instrument notes stay visually dominant while non-selected notes remain dimmed.
+- timeline header and note rows stay horizontally synced while scrolled.
+- note editing preserves timeline scroll position without unexpected jumps.
+- Play and Stop still work.
+- playhead progression remains aligned to timing header beat/bar cells.
+- compact icon-only instrument controls and GM Type + Instrument dropdowns remain covered by the existing octave density test.
+
+## Lanes
+
+- tool runtime: executed through changed-file syntax checks and targeted MIDI Studio V2 Playwright because octave editing, keyboard shortcuts, selection, scroll behavior, and playback flow are tool runtime behavior.
+- integration: skipped because Workspace V2 handoff contracts did not change.
+- engine: skipped because no engine/shared runtime files changed in this delta.
+- samples: skipped by explicit PR instruction. Full samples smoke test was not run.
+- recovery/UAT: covered only for the targeted MIDI Studio V2 runtime slice named by this PR.
+
+## Manual Validation Notes
+
+1. Open `tools/midi-studio-v2/index.html`.
+2. Import `tests/fixtures/midi-studio-v2/uat-midi-studio-v2.game.manifest.json`.
+3. Select Lead, click notes in the octave grid, and verify notes toggle immediately with a visible selected-cell highlight.
+4. Drag horizontally from a note cell and verify notes paint across adjacent timeline cells while scroll position remains stable.
+5. Add multiple notes to one beat column and verify the chord remains visible/playable.
+6. Use Space, Delete/Backspace, Arrow keys, and Ctrl+D from the grid and verify transport/selection/editing behavior.
+7. Scroll the timeline horizontally and verify the timing header remains aligned with note cells.
+
+## Out Of Scope
+
+- DAW mixer complexity.
+- automation lanes.
+- SoundFont playback.
+- export rendering.
+- full samples smoke test.

tests/playwright/tools/MidiStudioV2.spec.mjs

@@ -840,13 +840,25 @@ test.describe("MIDI Studio V2", () => {
         await expect(octaveCell(page, "C6", stepIndex)).toHaveAttribute("data-note-lanes", /lead/);
       }
 
-      await octaveCell(page, "C5", 10).click();
-      await octaveCell(page, "E5", 10).click();
-      const chordValues = await page.evaluate(() => window.__midiStudioV2App.lastInstrumentGridResult.timeline
-        .filter((event) => event.lane === "lead" && event.stepIndex === 10)
+      const chordStep = await page.evaluate(() => {
+        const result = window.__midiStudioV2App.lastInstrumentGridResult;
+        for (let stepIndex = 0; stepIndex < result.totalSteps; stepIndex += 1) {
+          const values = result.timeline
+            .filter((event) => event.lane === "lead" && event.stepIndex === stepIndex)
+            .map((event) => event.value);
+          if (!values.includes("D6") && !values.includes("F6")) {
+            return stepIndex;
+          }
+        }
+        return 0;
+      });
+      await octaveCell(page, "D6", chordStep).click();
+      await octaveCell(page, "F6", chordStep).click();
+      const chordValues = await page.evaluate((stepIndex) => window.__midiStudioV2App.lastInstrumentGridResult.timeline
+        .filter((event) => event.lane === "lead" && event.stepIndex === stepIndex)
         .map((event) => event.value)
-        .sort());
-      expect(chordValues).toEqual(expect.arrayContaining(["C5", "E5"]));
+        .sort(), chordStep);
+      expect(chordValues).toEqual(expect.arrayContaining(["D6", "F6"]));
       expect(chordValues.length).toBeGreaterThanOrEqual(2);
 
       await octaveCell(page, "C6", 7).click();
@@ -870,7 +882,9 @@ test.describe("MIDI Studio V2", () => {
       });
       const beforeScroll = await timelineScrollSnapshot(page);
       expect(beforeScroll.scrollDataset).toBe(String(beforeScroll.scrollLeft));
-      await octaveCell(page, "D6", 11).click();
+      await page.evaluate(() => {
+        document.querySelector('.midi-studio-v2__octave-note-cell[data-row-token="A6"][data-step-index="11"]').click();
+      });
       await expect.poll(() => timelineScrollSnapshot(page)).toEqual(expect.objectContaining({
         scrollLeft: beforeScroll.scrollLeft,
         scrollTop: beforeScroll.scrollTop

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

@@ -995,6 +995,9 @@ export class InstrumentGridControl {
       return;
     }
     this.suppressNextCellClick = true;
+    this.window.setTimeout(() => {
+      this.suppressNextCellClick = false;
+    }, 0);
     this.onNoteEdit?.(this.readInput(), {
       action: "paint-notes",
       lane: this.selectedLane,