Make MIDI Studio V2 a testable playable Twinkle prototype - PR_26146_021-midi-studio-v2-testable-playable-build

Author: ToolboxAid

docs/dev/reports/PR_26146_021-midi-studio-v2-testable-playable-build_validation.md

@@ -0,0 +1,59 @@
+# PR_26146_021 MIDI Studio V2 Testable Playable Build Validation
+
+## Scope
+- Kept Load Example And Play as the primary manual/UAT path for Twinkle Twinkle Little Star.
+- Preserved audible Preview Synth playback after a user click, Stop All Audio, playhead movement, diagnostics, export WARN behavior, and table editing.
+- Added clip-style note blocks inside the visible note table cells so track rows display as playable note/clip blocks across time.
+- Collapsed the dense pipe-delimited lane source text into an advanced section so it is no longer part of the primary workflow.
+- No SoundFont playback, rendered export implementation, MIDI input/recording, inline style blocks, or inline event handlers were added.
+
+## Changed Files
+- `tools/midi-studio-v2/js/controls/InstrumentGridControl.js`
+- `tools/midi-studio-v2/index.html`
+- `tools/midi-studio-v2/styles/midiStudioV2.css`
+- `tests/playwright/tools/MidiStudioV2.spec.mjs`
+- `docs/dev/reports/PR_26146_021-midi-studio-v2-testable-playable-build_validation.md`
+- `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`
+
+## Validation
+- PASS: `node --check tools/midi-studio-v2/js/controls/InstrumentGridControl.js`
+- PASS: `node --check tools/midi-studio-v2/js/MidiStudioV2App.js`
+- PASS: `node --check tests/playwright/tools/MidiStudioV2.spec.mjs`
+- PASS: HTML guard checked `tools/midi-studio-v2/index.html`; no inline style blocks or inline event handlers were found.
+- PASS: `npx.cmd playwright test tests/playwright/tools/MidiStudioV2.spec.mjs --grep "Twinkle|loads example and starts audible|edits spreadsheet"`
+  - Result: 3 passed.
+  - Validated Twinkle example load, note blocks, playable note count, active Preview Synth playback, playhead movement, Stop All Audio reset, and editing visible note cells into playback data.
+- PASS: `npx.cmd playwright test tests/playwright/tools/MidiStudioV2.spec.mjs`
+  - Result: 37 passed.
+- PASS: `git diff --check`
+  - Note: Git reported 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.
+
+## Environment Notes
+- Chromium was missing from the repo-local Playwright browser cache, so Chromium was installed under `node_modules/.cache/ms-playwright` for validation.
+- The repo-local Playwright browser cache was removed after validation.
+
+## Manual Test Notes
+- Open MIDI Studio V2.
+- Click `Load Example And Play`.
+- Expected: Twinkle Twinkle Little Star loads, Preview Synth starts, the playhead moves across the note table, and Audio Diagnostics reports playable notes greater than zero.
+- Edit a visible Lead note block, click `Normalize Grid`, then `Play Section`.
+- Expected: the edited note appears in the normalized playback data and Preview Synth starts from the updated table.
+- Click `Stop All Audio`.
+- Expected: active preview lanes clear, Preview Synth playing state resets, and the status log reports stopped audio.
+
+## Skips
+- Full samples smoke test: SKIPPED per request because sample JSON alignment is out of scope.
+- Workspace Manager V2 registration/handoff: SKIPPED because this PR did not touch Workspace V2 registration or handoff.
+
+## ZIP
+- Repo-structured delta ZIP: `tmp/PR_26146_021-midi-studio-v2-testable-playable-build_delta.zip`

tests/playwright/tools/MidiStudioV2.spec.mjs

@@ -273,6 +273,9 @@ async function fillInstrumentGrid(page, {
   await page.locator("#instrumentGridSectionsInput").fill(sections);
   await page.locator("#instrumentGridBeatsInput").fill(beats);
   await page.locator("#instrumentGridSubdivisionInput").selectOption(subdivision);
+  await page.locator(".midi-studio-v2__advanced-lane-source").evaluate((details) => {
+    details.open = true;
+  });
   await page.locator("#instrumentGridChordsInput").fill(chords);
   await page.locator("#instrumentGridBassInput").fill(bass);
   await page.locator("#instrumentGridPadInput").fill(pad);
@@ -397,7 +400,10 @@ test.describe("MIDI Studio V2", () => {
       await expect(page.locator(".midi-studio-v2__grid-cell").first()).toHaveText("Instrument");
       await expect(page.locator(".midi-studio-v2__note-table-column-header").first()).toContainText("Bar 1");
       await expect(page.locator(".midi-studio-v2__note-table-cell[data-lane]")).not.toHaveCount(0);
+      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("C4");
       await expect(page.locator("#instrumentGridOutput textarea")).toHaveCount(0);
+      await expect(page.locator(".midi-studio-v2__advanced-lane-source")).not.toHaveAttribute("open", "");
       await expect(page.locator(".midi-studio-v2__lane-header-cell strong")).toContainText(["Chords", "Bass", "Pad", "Lead", "Drums"]);
       expect(await page.evaluate(() => {
         const output = document.querySelector("#instrumentGridOutput");
@@ -461,6 +467,7 @@ test.describe("MIDI Studio V2", () => {
       expect(await page.evaluate(() => window.__midiStudioPreviewSynthEvents.some((event) => event.action === "oscillator-start"))).toBe(true);
       await expect(page.locator(".midi-studio-v2__grid-cell--timing-header.midi-studio-v2__grid-cell--playhead-active")).not.toHaveAttribute("data-step-index", "0");
       await expect(spreadsheetCell(page, "bass", 0)).toHaveText("C2");
+      await expect(page.locator('.midi-studio-v2__note-table-cell[data-lane="lead"] .midi-studio-v2__note-block').first()).toHaveText("C4");
       const diagnostics = await audioDiagnosticsRows(page);
       expect(Number(diagnostics["Playable note count"])).toBeGreaterThan(0);
       expect(diagnostics).toMatchObject({
@@ -788,6 +795,7 @@ Am F`);
       await expect(page.locator("#instrumentGridLeadInput")).toHaveValue("E4 G4 A4 B4 | C5 B4 G4 -");
       await page.locator("#normalizeInstrumentGridButton").click();
       await expect(spreadsheetCell(page, "lead", 3)).toHaveText("B4");
+      await expect(spreadsheetCell(page, "lead", 3).locator(".midi-studio-v2__note-block")).toHaveText("B4");
       const editedModel = await page.evaluate(() => window.__midiStudioV2App.lastInstrumentGridResult);
       expect(editedModel.timeline.some((event) => event.lane === "lead" && event.value === "B4" && event.bar === 1)).toBe(true);
       expect(Number((await audioDiagnosticsRows(page))["Playable note count"])).toBeGreaterThan(beforeCount);

tools/midi-studio-v2/index.html

@@ -236,28 +236,31 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
             </div>
             <dl id="instrumentGridSummary" class="midi-studio-v2__details"></dl>
             <div id="instrumentGridOutput" class="midi-studio-v2__instrument-grid-output" aria-label="Signal-style MIDI note table"></div>
-            <div class="midi-studio-v2__grid-lane-inputs midi-studio-v2__grid-lane-inputs--source" aria-label="Advanced pipe-delimited lane source inputs">
-              <label class="tool-starter__field" for="instrumentGridChordsInput">
-                <span>Chords</span>
-                <textarea id="instrumentGridChordsInput" rows="2" placeholder="Am F C G | Am F C G"></textarea>
-              </label>
-              <label class="tool-starter__field" for="instrumentGridBassInput">
-                <span>Bass</span>
-                <textarea id="instrumentGridBassInput" rows="2" placeholder="A2 - F2 - | C3 - G2 -"></textarea>
-              </label>
-              <label class="tool-starter__field" for="instrumentGridPadInput">
-                <span>Pad</span>
-                <textarea id="instrumentGridPadInput" rows="2" placeholder="Am - F - | C - G -"></textarea>
-              </label>
-              <label class="tool-starter__field" for="instrumentGridLeadInput">
-                <span>Lead</span>
-                <textarea id="instrumentGridLeadInput" rows="2" placeholder="E4 G4 A4 - | C5 B4 G4 -"></textarea>
-              </label>
-              <label class="tool-starter__field" for="instrumentGridDrumsInput">
-                <span>Drums</span>
-                <textarea id="instrumentGridDrumsInput" rows="2" placeholder="kick hat snare hat | kick hat snare hat"></textarea>
-              </label>
-            </div>
+            <details class="midi-studio-v2__advanced-lane-source">
+              <summary>Advanced lane source text</summary>
+              <div class="midi-studio-v2__grid-lane-inputs midi-studio-v2__grid-lane-inputs--source" aria-label="Advanced pipe-delimited lane source inputs">
+                <label class="tool-starter__field" for="instrumentGridChordsInput">
+                  <span>Chords</span>
+                  <textarea id="instrumentGridChordsInput" rows="2" placeholder="Am F C G | Am F C G"></textarea>
+                </label>
+                <label class="tool-starter__field" for="instrumentGridBassInput">
+                  <span>Bass</span>
+                  <textarea id="instrumentGridBassInput" rows="2" placeholder="A2 - F2 - | C3 - G2 -"></textarea>
+                </label>
+                <label class="tool-starter__field" for="instrumentGridPadInput">
+                  <span>Pad</span>
+                  <textarea id="instrumentGridPadInput" rows="2" placeholder="Am - F - | C - G -"></textarea>
+                </label>
+                <label class="tool-starter__field" for="instrumentGridLeadInput">
+                  <span>Lead</span>
+                  <textarea id="instrumentGridLeadInput" rows="2" placeholder="E4 G4 A4 - | C5 B4 G4 -"></textarea>
+                </label>
+                <label class="tool-starter__field" for="instrumentGridDrumsInput">
+                  <span>Drums</span>
+                  <textarea id="instrumentGridDrumsInput" rows="2" placeholder="kick hat snare hat | kick hat snare hat"></textarea>
+                </label>
+              </div>
+            </details>
             <div class="midi-studio-v2__preview-lane-controls" aria-label="Preview Synth lane controls">
               <div class="midi-studio-v2__preview-lane-row" data-preview-lane="chords">
                 <label class="tool-starter__field" for="previewInstrumentChordsSelect">

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

@@ -440,7 +440,7 @@ export class InstrumentGridControl {
     outputCell.contentEditable = "true";
     outputCell.role = "textbox";
     outputCell.spellcheck = false;
-    outputCell.textContent = cell.token || "-";
+    outputCell.append(this.createNoteBlock(cell));
     outputCell.setAttribute("aria-label", `${LANE_LABELS[cell.lane] || cell.lane} note cell, section ${cell.section}, bar ${cell.bar}, beat ${cell.beat}`);
     outputCell.dataset.lane = cell.lane;
     outputCell.dataset.source = cell.source;
@@ -454,6 +454,13 @@ export class InstrumentGridControl {
     return outputCell;
   }
 
+  createNoteBlock(cell) {
+    const block = document.createElement("span");
+    block.className = "midi-studio-v2__note-block";
+    block.textContent = cell.token || "-";
+    return block;
+  }
+
   noteTableCellClass(cell) {
     const classes = ["midi-studio-v2__grid-cell", "midi-studio-v2__spreadsheet-note-cell", "midi-studio-v2__note-table-cell"];
     if (!REST_TOKENS.has(String(cell.token || "").trim().toLowerCase())) {

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

@@ -42,11 +42,13 @@
   gap: 0.75rem;
 }
 
-.midi-studio-v2__advanced-song-sheet[open] {
+.midi-studio-v2__advanced-song-sheet[open],
+.midi-studio-v2__advanced-lane-source[open] {
   padding-top: 0.25rem;
 }
 
-.midi-studio-v2__advanced-song-sheet summary {
+.midi-studio-v2__advanced-song-sheet summary,
+.midi-studio-v2__advanced-lane-source summary {
   cursor: pointer;
   font-weight: 700;
 }
@@ -143,6 +145,12 @@
   padding-top: 0.75rem;
 }
 
+.midi-studio-v2__advanced-lane-source {
+  border: 1px solid var(--tool-starter-line);
+  border-radius: 8px;
+  padding: 0.65rem 0.75rem;
+}
+
 .midi-studio-v2__instrument-grid-output {
   max-width: 100%;
   overflow: auto;
@@ -237,6 +245,18 @@
   outline-offset: -3px;
 }
 
+.midi-studio-v2__note-block {
+  align-items: center;
+  background: rgba(14, 165, 233, 0.22);
+  border: 1px solid rgba(125, 211, 252, 0.56);
+  border-radius: 6px;
+  display: inline-flex;
+  justify-content: center;
+  min-height: 2rem;
+  min-width: 3.25rem;
+  padding: 0.22rem 0.45rem;
+}
+
 .midi-studio-v2__grid-cell--label,
 .midi-studio-v2__grid-cell--section {
   background: var(--tool-starter-surface);