Repair MIDI Studio V2 instrument grouping, MIDI import, and fullscreen timeline layout - PR_26146_027-midi-studio-v2-instrument-import-and-layout-repair

Author: ToolboxAid

docs/dev/reports/PR_26146_027-midi-studio-v2-instrument-import-and-layout-repair_validation.md

@@ -0,0 +1,66 @@
+# PR_26146_027 MIDI Studio V2 Instrument Import And Layout Repair Validation
+
+## Status
+
+PASS
+
+## Scope Completed
+
+- Added per-row Type group and Instrument dropdowns in the visible timeline row header.
+- Type changes repopulate Instrument options and update the row label to the selected instrument.
+- Removed the Advanced Raw Song Sheet UI and raw parser button from the primary workflow.
+- Moved MIDI Import into Selected Song Details and removed MIDI Import and Export from the main tab row.
+- Added a local MIDI file picker for `.mid` and `.midi` files.
+- Avoided default hard-coded MIDI source fetches during normal UAT; missing MIDI source paths only appear when inspecting a selected song that declares one.
+- Compacted instrument row layout and left volume/pan controls behind icon toggles.
+- Added `+` row creation from the Instrument header and delete actions per timeline row.
+- Add/delete row actions update the selected song arrangement, playback source data, status, and diagnostics.
+- Fullscreen keeps transport and left timeline context while giving the center timeline more horizontal width.
+- Preserved manifest import, multiple songs, editable Selected Song Details, consolidated Song Sheet, timeline playback, playhead, Stop All Audio, and export WARN behavior.
+
+## Validation Commands
+
+- 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: `node --check tools/midi-studio-v2/js/services/MidiSourceInspectionService.js`
+- PASS: `node --check src/engine/audio/PreviewInstrumentPacks.js`
+- PASS: `node --check src/engine/audio/PreviewSynthEngine.js`
+- PASS: `node --check tools/midi-studio-v2/js/bootstrap.js`
+- PASS: `node --check tools/midi-studio-v2/js/controls/MidiSourceDetailsControl.js`
+- PASS: `node --check tools/midi-studio-v2/js/controls/SongSheetControl.js`
+- PASS: `rg --pcre2 -n '<style|on(click|change|input|submit)=|<script(?![^>]*src)' tools/midi-studio-v2/index.html; if ($LASTEXITCODE -eq 1) { exit 0 }`
+- PASS: `npx playwright test tests/playwright/tools/MidiStudioV2.spec.mjs -g "imports UAT manifest|imports a local MIDI source|removes the Advanced Raw Song Sheet|keeps MIDI source inspection|expands and restores" --reporter=list --workers=1 --timeout=60000`
+- PASS: `npx playwright test tests/playwright/tools/MidiStudioV2.spec.mjs -g "roadmap exists|applies Preview Synth instruments|clears status content" --reporter=list --workers=1 --timeout=60000`
+- PASS: `git diff --check`
+
+## Playwright Proof Points
+
+- UAT manifest JSON imports through Import JSON Manifest.
+- Multiple UAT songs are listed and selectable.
+- Frog Hop and Coal Mine Descent fixture songs still load into the visible timeline.
+- Main UAT song populates visible note cells and playable Preview Synth data.
+- Type dropdown exists per row and Instrument options update when Type changes.
+- Row label follows the selected instrument.
+- Volume and pan icon controls reveal sliders.
+- Advanced Raw Song Sheet is absent.
+- MIDI Import appears under Selected Song Details.
+- Export tab and MIDI Import tab are absent from the main tabs.
+- MIDI file picker accepts `.mid,.midi`.
+- Local MIDI file import creates a selected song without default HTTP 404 noise.
+- Instrument rows are compact in their collapsed state.
+- `+` adds a timeline instrument row and delete removes it.
+- Add/delete row changes update selected-song arrangement playback data.
+- Fullscreen preserves transport and side context while expanding the center timeline.
+- Play starts audible preview state and Stop All Audio clears playback.
+
+## Coverage
+
+- `docs/dev/reports/playwright_v8_coverage_report.txt` was refreshed by the targeted Playwright runs.
+- `docs/dev/reports/coverage_changed_js_guardrail.txt` was refreshed.
+- Advisory warning remains for `tools/midi-studio-v2/js/MidiStudioV2App.js` function coverage below 50%; all reported lines executed in the targeted browser run.
+
+## Explicit Non-Runs
+
+- Full samples smoke was not run per request.
+- Sample JSON was not modified.

docs/dev/roadmaps/MIDI_STUDIO_V2_ROADMAP.md

@@ -7,9 +7,9 @@
 - [x] Real UAT manifest fixture includes multiple MIDI Studio songs.
 - [x] Playable upbeat public-domain/traditional-style test song arrangement includes Lead, Bass, Chords/Pad, and Drums.
 - [x] Studio tab shows a visible track/timeline editor without opening accordions.
-- [x] Tabs organize Studio, Song Setup, Instruments, Auto-Create Parts, MIDI Import, Export, and Diagnostics.
+- [x] Tabs organize Studio, Song Setup, Instruments, Auto-Create Parts, and Diagnostics; MIDI Import lives under Selected Song Details and export actions live in the action bar.
 - [.] Editable note/timeline grid remains the primary music studio editing surface.
-- [ ] Track volume, pan, mute, and solo controls.
+- [x] Track volume, pan, mute, and solo controls live on instrument timeline rows.
 - [.] Song setup fields for tempo, key, style, intro, and loop.
 - [ ] MIDI import conversion to editable tracks.
 - [ ] Rendered WAV/MP3/OGG export.

src/engine/audio/PreviewInstrumentPacks.js

@@ -3,36 +3,50 @@ export const PREVIEW_INSTRUMENT_PACKS = [
     id: "retro-square-lead",
     label: "Retro Square Lead",
     synthRole: "lead",
+    typeGroup: "Synth",
     volume: 0.075,
     waveform: "square"
   },
   {
     id: "retro-pulse-lead",
     label: "Retro Pulse Lead",
     synthRole: "lead",
+    typeGroup: "Synth",
     volume: 0.07,
     waveform: "square"
   },
   {
     id: "synth-bass",
     label: "Synth Bass",
     synthRole: "bass",
+    typeGroup: "Bass",
     transposeSemitones: -12,
     volume: 0.095,
     waveform: "triangle"
   },
+  {
+    approximationWarning: "Keyboard preview is an approximate electric-piano style synth patch.",
+    id: "preview-electric-piano",
+    label: "Preview Electric Piano",
+    synthRole: "lead",
+    typeGroup: "Keyboard",
+    volume: 0.065,
+    waveform: "sine"
+  },
   {
     id: "warm-pad",
     label: "Warm Pad",
     durationScale: 1.3,
     synthRole: "pad",
+    typeGroup: "Keyboard",
     volume: 0.045,
     waveform: "sine"
   },
   {
     id: "basic-drums",
     label: "Basic Drums",
     synthRole: "percussion",
+    typeGroup: "Percussion",
     volume: 0.16,
     waveform: "noise"
   },
@@ -42,8 +56,46 @@ export const PREVIEW_INSTRUMENT_PACKS = [
     durationScale: 1.55,
     synthRole: "pad",
     transposeSemitones: 12,
+    typeGroup: "FX",
     volume: 0.035,
     waveform: "sine"
+  },
+  {
+    approximationWarning: "String preview is an approximate synth pad, not a sampled string section.",
+    durationScale: 1.45,
+    id: "preview-string-ensemble",
+    label: "Preview String Ensemble",
+    synthRole: "pad",
+    typeGroup: "Strings",
+    volume: 0.04,
+    waveform: "sine"
+  },
+  {
+    approximationWarning: "Brass preview is an approximate synth brass patch.",
+    id: "preview-brass-stab",
+    label: "Preview Brass Stab",
+    synthRole: "lead",
+    typeGroup: "Brass",
+    volume: 0.07,
+    waveform: "sawtooth"
+  },
+  {
+    approximationWarning: "Woodwind preview is an approximate breathy synth lead.",
+    id: "preview-woodwind",
+    label: "Preview Woodwind",
+    synthRole: "lead",
+    typeGroup: "Woodwind",
+    volume: 0.06,
+    waveform: "triangle"
+  },
+  {
+    approximationWarning: "Guitar preview is an approximate plucked synth tone.",
+    id: "preview-clean-guitar",
+    label: "Preview Clean Guitar",
+    synthRole: "lead",
+    typeGroup: "Guitar",
+    volume: 0.06,
+    waveform: "triangle"
   }
 ];
 

src/engine/audio/PreviewSynthEngine.js

@@ -173,6 +173,13 @@ export class PreviewSynthEngine {
           warningKeys.add(key);
         }
       }
+      if (instrument.approximationWarning) {
+        const key = `approximation:${instrument.id}`;
+        if (!warningKeys.has(key)) {
+          warnings.push(instrument.approximationWarning);
+          warningKeys.add(key);
+        }
+      }
       if (this.canScheduleEvent(event, instrument)) {
         events.push({ ...event, previewInstrument: instrument });
       }