Coalesce Audio SFX slider undo history - PR_26145_025-audio-sfx-coalesce-slider-undo-history

Author: ToolboxAid

docs/dev/reports/audio_sfx_v8_coverage.md

@@ -1,11 +1,13 @@
-# Audio / SFX Focused V8 Coverage
+# Audio / SFX Slider Undo V8 Coverage
 
-Command: `node tmp/audio-sfx-undo-redo-focused.mjs`
-Source: Playwright Chromium built-in V8 coverage.
+PR: `PR_26145_025-audio-sfx-coalesce-slider-undo-history`
+
+Source: focused Playwright Chromium run using built-in V8 JavaScript coverage.
 Thresholds: none enforced; coverage is advisory.
 
-Changed runtime JS files:
-(100%) tools/audio-sfx-playground-v2/js/AudioSfxPlaygroundV2App.js - executed lines 642/642; advisory V8 coverage
-(100%) tools/audio-sfx-playground-v2/js/bootstrap.js - executed lines 100/100; advisory V8 coverage
-(100%) tools/audio-sfx-playground-v2/js/controls/ActionNavControl.js - executed lines 115/115; advisory V8 coverage
-(100%) tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js - executed lines 704/704; advisory V8 coverage
+Changed runtime JavaScript files:
+
+(82%) tools/audio-sfx-playground-v2/js/AudioSfxPlaygroundV2App.js - V8 function coverage 64/78; slider edit lifecycle, undo/redo, playback, JSON actions, and tile selection exercised.
+(75%) tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js - V8 function coverage 44/59; slider pointer, keyboard, input, change, pointerup, blur, and non-slider control paths exercised.
+
+Missing changed runtime JavaScript files in coverage: none.

docs/dev/reports/playwright_audio_sfx_slider_undo_coalescing.md

@@ -0,0 +1,58 @@
+# Audio / SFX Slider Undo Coalescing Validation
+
+PR: `PR_26145_025-audio-sfx-coalesce-slider-undo-history`
+
+Playwright impacted: Yes.
+
+## Targeted Static Validation
+
+PASS - `node --check tools/audio-sfx-playground-v2/js/AudioSfxPlaygroundV2App.js`
+
+PASS - `node --check tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js`
+
+PASS - `git diff --check -- tools/audio-sfx-playground-v2/js/AudioSfxPlaygroundV2App.js tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js`
+
+## Focused Playwright
+
+Command: one-off Playwright Chromium script through `node --input-type=module` with `PLAYWRIGHT_BROWSERS_PATH=0`.
+
+PASS - drag slider creates one undo step: undo stack `1 -> 2`, frequency `880 -> 8550`, focus retained on `frequencyInput`.
+
+PASS - Undo restores selected tile and editor value: selected `sfx-1`, frequency restored to `880`, redo stack `1`.
+
+PASS - Redo restores selected tile and editor value: selected `sfx-1`, frequency restored to `8550`.
+
+PASS - keyboard arrow slider edits keep focus and create undo history: two ArrowRight presses kept focus on `durationInput`, duration `180 -> 190`, undo stack `2 -> 4`.
+
+PASS - unrelated slider edits remain separate undo steps: volume drag `4 -> 5`, pitch sweep drag `5 -> 6`.
+
+PASS - preview and JSON actions do not create undo history: Play, Stop, Stop All, Copy JSON, and Export JSON kept undo stack `7 -> 7` and redo stack `0 -> 0`.
+
+PASS - tile select and audition do not create undo history: tile selection returned to `Laser`; undo stack stayed `7 -> 7`.
+
+PASS - no console errors or page errors.
+
+PASS - Workspace dirty behavior: live slider drag emitted `0` dirty calls during input; pointer completion emitted one dirty call with reason `audio-sfx-slider-change` and `changedKeys: ["data.sounds"]`.
+
+## Workspace V2 Suite
+
+Command: `PLAYWRIGHT_BROWSERS_PATH=0 npm run test:workspace-v2`
+
+Result: FAIL - 68 passed, 4 failed. Per BUILD instructions, the full suite was not rerun because failures are unrelated to Audio / SFX Playground V2 slider Undo/Redo behavior.
+
+Known unrelated failing tests:
+
+- `Workspace Manager V2 bootstrap › resolves game manifest schema refs from the game schema during repo discovery`
+- `Workspace Manager V2 bootstrap › enables object vector and collision tools only from manifest geometry without fallback defaults`
+- `Workspace Manager V2 bootstrap › uses header lifecycle controls and launches tools from fixed Workspace Manager V2 tiles`
+- `Workspace Manager V2 bootstrap › owns temporary UAT manifest seeding and launches Asset Manager V2 through session context`
+
+Failure notes:
+
+- The first two failures expected `AI Target Dummy` in `#activeGameSelect option`, but the option list did not include it.
+- The fixed-tile launch failure expected Audio / SFX schema role `workspace-launch-context`, but received `workspace-tool-payload`.
+- The UAT manifest seeding test timed out at 120000 ms and then failed during coverage stop because the page/context had closed.
+
+## Full Samples Smoke
+
+Skipped. This PR only impacts Audio / SFX Playground V2 Undo/Redo behavior.

tools/audio-sfx-playground-v2/js/AudioSfxPlaygroundV2App.js

@@ -101,6 +101,7 @@ export class AudioSfxPlaygroundV2App {
     this.soundEntries = [];
     this.statusLog = statusLog;
     this.tileList = tileList;
+    this.activeSliderEdit = null;
     this.redoStack = [];
     this.undoStack = [];
     this.historyBaselineSnapshot = null;
@@ -138,7 +139,10 @@ export class AudioSfxPlaygroundV2App {
       onAdd: () => this.addCurrentSound(),
       onChange: () => this.handleEditorChange(),
       onDelete: () => this.deleteCurrentSound(),
-      onRename: () => this.renameCurrentSound()
+      onRename: () => this.renameCurrentSound(),
+      onSliderEditCommit: (sliderId) => this.commitSliderEditorChange(sliderId),
+      onSliderEditStart: (sliderId) => this.beginSliderEditorChange(sliderId),
+      onSliderInput: (sliderId) => this.handleSliderEditorInput(sliderId)
     });
     this.tileList.mount({
       onSelect: (soundId) => {
@@ -217,22 +221,68 @@ export class AudioSfxPlaygroundV2App {
   }
 
   handleEditorChange() {
+    this.commitSliderEditorChange();
     const beforeSnapshot = this.historyBaselineSnapshot;
-    const validation = this.controls.validate({ nameOverride: this.activeSoundName() });
-    if (validation.valid && this.updateActiveSound(this.soundForActiveEditorValue(validation.value))) {
-      this.renderSoundList();
+    const updateResult = this.updateEditorValueFromControls();
+    if (updateResult.shouldCommit) {
       this.commitUndoableChange({
         beforeSnapshot,
         changedKeys: ["data.sounds"],
-        reason: "audio-sfx-editor-change"
+        reason: "audio-sfx-editor-change",
+        shouldSyncDirty: updateResult.shouldSyncDirty
       });
     }
+    this.refreshPreview();
+  }
+
+  updateEditorValueFromControls() {
+    const validation = this.controls.validate({ nameOverride: this.activeSoundName() });
+    if (validation.valid && this.updateActiveSound(this.soundForActiveEditorValue(validation.value))) {
+      this.renderSoundList();
+      return { shouldCommit: true, shouldSyncDirty: true, valid: true };
+    }
     if (validation.valid && !this.activeSoundId) {
+      return { shouldCommit: true, shouldSyncDirty: false, valid: true };
+    }
+    return { shouldCommit: false, shouldSyncDirty: false, valid: validation.valid };
+  }
+
+  beginSliderEditorChange(sliderId) {
+    if (this.activeSliderEdit?.sliderId === sliderId) {
+      return;
+    }
+    this.commitSliderEditorChange();
+    this.activeSliderEdit = {
+      beforeSnapshot: this.createHistorySnapshot() || this.historyBaselineSnapshot,
+      sliderId
+    };
+  }
+
+  handleSliderEditorInput(sliderId) {
+    if (!this.activeSliderEdit || this.activeSliderEdit.sliderId !== sliderId) {
+      this.beginSliderEditorChange(sliderId);
+    }
+    this.updateEditorValueFromControls();
+    this.refreshPreview();
+  }
+
+  commitSliderEditorChange(sliderId = "") {
+    if (!this.activeSliderEdit || (sliderId && this.activeSliderEdit.sliderId !== sliderId)) {
+      return;
+    }
+    const { beforeSnapshot } = this.activeSliderEdit;
+    this.activeSliderEdit = null;
+    const updateResult = this.updateEditorValueFromControls();
+    if (!updateResult.valid) {
+      this.refreshPreview();
+      return;
+    }
+    if (updateResult.shouldCommit) {
       this.commitUndoableChange({
         beforeSnapshot,
         changedKeys: ["data.sounds"],
-        reason: "audio-sfx-editor-change",
-        shouldSyncDirty: false
+        reason: "audio-sfx-slider-change",
+        shouldSyncDirty: updateResult.shouldSyncDirty
       });
     }
     this.refreshPreview();

tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js

@@ -34,6 +34,17 @@ const SLIDER_RANGE_UNITS = Object.freeze({
   volume: ""
 });
 
+const SLIDER_KEYBOARD_EDIT_KEYS = Object.freeze(new Set([
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "End",
+  "Home",
+  "PageDown",
+  "PageUp"
+]));
+
 const RECOMMENDED_ZONE_SPAN = Object.freeze({
   attackMs: 0.36,
   durationMs: 0.34,
@@ -392,12 +403,22 @@ export class SfxControlPanel {
     this.waveformSelect = waveformSelect;
   }
 
-  mount({ onAdd, onChange, onDelete, onRename }) {
+  mount({
+    onAdd,
+    onChange,
+    onDelete,
+    onRename,
+    onSliderEditCommit = () => {},
+    onSliderEditStart = () => {},
+    onSliderInput = () => {}
+  }) {
     this.applySliderLimits();
     this.loadSound(DEFAULT_SOUND);
     this.addButton.addEventListener("click", onAdd);
     this.deleteButton.addEventListener("click", onDelete);
     this.renameButton.addEventListener("click", onRename);
+    this.styleProfileSelect.addEventListener("pointerdown", () => onSliderEditCommit());
+    this.styleProfileSelect.addEventListener("focus", () => onSliderEditCommit());
     this.styleProfileSelect.addEventListener("change", () => {
       if (this.applyStyleProfile()) {
         onChange();
@@ -406,19 +427,12 @@ export class SfxControlPanel {
     this.setDeleteEnabled(false);
     this.setRenameEnabled(false);
     [
-      this.attackInput,
-      this.durationInput,
-      this.frequencyInput,
       this.loopingInput,
-      this.noiseAmountInput,
-      this.noiseDecayInput,
-      this.noiseFilterInput,
       this.noiseInput,
-      this.pitchSweepInput,
-      this.releaseInput,
-      this.volumeInput,
       this.waveformSelect
     ].forEach((control) => {
+      control.addEventListener("pointerdown", () => onSliderEditCommit());
+      control.addEventListener("focus", () => onSliderEditCommit());
       control.addEventListener("input", () => {
         this.syncOutputs();
         onChange();
@@ -429,9 +443,37 @@ export class SfxControlPanel {
       });
     });
     this.sliderInputs().forEach((input) => {
-      input.addEventListener("pointerdown", () => this.focusSlider(input));
-      input.addEventListener("input", () => this.focusSlider(input));
-      input.addEventListener("change", () => this.focusSlider(input));
+      input.addEventListener("pointerdown", () => {
+        this.focusSlider(input);
+        onSliderEditStart(input.id);
+      });
+      input.addEventListener("focus", () => onSliderEditStart(input.id));
+      input.addEventListener("keydown", (event) => {
+        if (SLIDER_KEYBOARD_EDIT_KEYS.has(event.key)) {
+          onSliderEditStart(input.id);
+        }
+      });
+      input.addEventListener("input", () => {
+        this.focusSlider(input);
+        this.syncOutputs();
+        onSliderInput(input.id);
+      });
+      input.addEventListener("change", () => {
+        this.focusSlider(input);
+        this.syncOutputs();
+        onSliderEditCommit(input.id);
+      });
+      input.addEventListener("pointerup", () => {
+        this.focusSlider(input);
+        this.syncOutputs();
+        onSliderEditCommit(input.id);
+      });
+      input.addEventListener("pointercancel", () => {
+        this.focusSlider(input);
+        this.syncOutputs();
+        onSliderEditCommit(input.id);
+      });
+      input.addEventListener("blur", () => onSliderEditCommit(input.id));
     });
   }