Fix Input Mapping V2 capture flow and card sizing - PR_26140_110-fix-input-mapping-v2-capture-flow-and-card-sizing

Author: DavidQ

docs/dev/reports/input_mapping_v2_capture_flow_card_sizing_report.md

@@ -0,0 +1,63 @@
+# Input Mapping V2 Capture Flow And Card Sizing Report
+
+Task: PR_26140_110-fix-input-mapping-v2-capture-flow-and-card-sizing
+
+## Source Reading
+- Read `docs/dev/PROJECT_INSTRUCTIONS.md` before making changes.
+- Read `.codex/skills/repo-build/SKILL.md` and followed the repo BUILD workflow.
+- Read `docs/pr/BUILD_PR.md`; it still describes an unrelated overlay runtime hardening rebase, so the explicit PR110 request was used as the active build scope.
+
+## Implementation
+- Increased Captured Mappings cards to 250px wide while preserving 225px height.
+- Changed captured mapping tokens from fixed 250px width to 100% of the tile content width.
+- Prevented capture from auto-creating mapping tiles. Captures now require a selected action tile created through Add.
+- Added an actionable WARN when capture is attempted without an existing tile.
+- Changed Combo gesture selection so it only selects gesture mode. Combo capture now starts only after a Capture button is pressed.
+- Preserved two-input combo commit behavior; Capture Keyboard waits for Ctrl + S before committing one combo mapping.
+- Moved wheel and pointer-drag descriptor commits behind Capture Mouse so selecting a gesture alone does not create mappings.
+- Preserved the pointer-drag snapshot selected before Capture Mouse so clicking the capture button does not overwrite drag bounds.
+- Removed visible `div#inputMappingV2UsedInputHighlights` duplicate output while preserving used-input highlight classes on Keyboard, Mouse, and Game Controller capture controls.
+- Preserved PR109 scroll position restoration and token click-to-delete behavior.
+
+## Validation
+- `node --check tools/input-mapping-v2/js/ToolStarterApp.js`
+- `node --check tools/input-mapping-v2/js/services/InputMappingState.js`
+- `node --check tools/input-mapping-v2/js/controls/CaptureControl.js`
+- `node --check tools/input-mapping-v2/js/bootstrap.js`
+- `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs`
+- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs -g "Input Mapping V2"`: 7 passed.
+- `npm run test:workspace-v2`: 66 passed.
+- `git diff --check`: passed; PowerShell reported line-ending normalization warnings only.
+
+## Playwright Coverage
+Playwright impacted: Yes.
+
+Validated behavior:
+- mapping cards are 250px wide.
+- token display uses 100% flex basis inside each tile.
+- Combo selection alone does not create mappings.
+- Capture Keyboard waits for Ctrl + S before committing a combo.
+- capture does not auto-create a tile and warns when no tile exists.
+- Add creates the tile.
+- duplicate used-input highlight UI is absent.
+- used-input highlighting still appears on capture controls.
+- mapping scroll position remains preserved across selection, refresh, combo commit, and token deletion.
+
+V8 coverage guardrail:
+- `(68%) tools/input-mapping-v2/js/controls/PreviewPanelControl.js`
+- `(86%) tools/input-mapping-v2/js/controls/CaptureControl.js`
+- `(92%) tools/input-mapping-v2/js/services/InputMappingState.js`
+- `(95%) tools/input-mapping-v2/js/ToolStarterApp.js`
+- `(100%) tools/input-mapping-v2/js/bootstrap.js`
+- Guardrail warnings: none.
+
+## Manual Test Notes
+1. Open Input Mapping V2.
+2. Select an action without clicking Add, then click Capture Keyboard. Expected: WARN tells the user to select an action and click Add; no tile appears.
+3. Click Add for an action. Expected: a 250px wide mapping tile appears.
+4. Select Keyboard Combo, then press Ctrl and S without clicking Capture Keyboard. Expected: no mapping is created.
+5. Click Capture Keyboard, press Ctrl then S. Expected: one `Combo, Ctrl + S` token appears.
+6. Click a mapping token. Expected: only that token is removed and the tile remains.
+7. Select a tile with keyboard, mouse, or controller mappings. Expected: the related Capture button highlights; no duplicate used-input highlight panel appears.
+
+Full samples smoke test was not run because this PR is scoped to Input Mapping V2 and Workspace V2 validation covers the impacted behavior.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -135,7 +135,6 @@ <h2 class="tools-platform-frame__eyebrow">Input Sources and Action Mapping</h2>
               <button id="inputMappingV2CaptureMouseButton" class="input-mapping-v2__capture-button" type="button">Capture Mouse</button>
             </div>
             <div id="inputMappingV2GamepadCaptureButtons" class="input-mapping-v2__gamepad-buttons" aria-label="Detected gamepad capture buttons"></div>
-            <div id="inputMappingV2UsedInputHighlights" class="input-mapping-v2__used-input-highlights" aria-label="Used controls for selected action"></div>
             <p id="inputMappingV2CaptureMessage" class="tool-starter__hint">Keyboard, mouse, wheel, drag, and game controller sources are provided by src/engine/input.</p>
             <hr class="input-mapping-v2__capture-separator">
             <button id="inputMappingV2RefreshGamepadsButton" type="button">Refresh Gamepads</button>

tools/input-mapping-v2/index.html

@@ -34,8 +34,10 @@ export class ToolStarterApp {
     this.workspaceRoot = workspaceRoot;
     this.window = windowRef;
     this.captureMode = "";
+    this.activeCaptureId = "";
     this.activeGamepadIndex = null;
     this.comboCaptureInputs = [];
+    this.pendingGestureInput = null;
     this.selectedGesture = null;
     this.rumbleSettingsByActionId = new Map();
     this.captureTimeoutMs = 8000;
@@ -155,6 +157,13 @@ export class ToolStarterApp {
   }
 
   startKeyboardCapture() {
+    if (!this.ensureSelectedTileForCapture()) {
+      return;
+    }
+    if (this.selectedGesture?.captureKind === "combo") {
+      this.startComboCapture(this.selectedGesture.deviceLabel, "keyboard");
+      return;
+    }
     if (this.isCaptureActive("keyboard")) {
       this.cancelCapture("Keyboard");
       return;
@@ -165,6 +174,17 @@ export class ToolStarterApp {
   }
 
   startMouseCapture() {
+    if (!this.ensureSelectedTileForCapture()) {
+      return;
+    }
+    if (this.selectedGesture?.captureKind === "combo") {
+      this.startComboCapture(this.selectedGesture.deviceLabel, "mouse");
+      return;
+    }
+    if (this.selectedGesture?.captureKind === "pointer-drag" || this.selectedGesture?.captureKind === "wheel") {
+      this.captureSelectedGesture();
+      return;
+    }
     if (this.isCaptureActive("mouse")) {
       this.cancelCapture("Mouse");
       return;
@@ -174,24 +194,36 @@ export class ToolStarterApp {
     this.statusLog.ok(`Mouse capture armed for ${this.state.selectedActionLabel()}.`);
   }
 
-  startComboCapture(deviceLabel = "Combo") {
-    if (this.isCaptureActive("combo")) {
+  startComboCapture(deviceLabel = "Combo", captureId = "combo") {
+    if (!this.ensureSelectedTileForCapture()) {
+      return;
+    }
+    if (this.isCaptureActive(captureId)) {
       this.cancelCapture(deviceLabel);
       return;
     }
     this.comboCaptureInputs = [];
-    this.beginCapture("combo");
+    this.beginCapture(captureId, { mode: "combo" });
     this.capture.showMessage(`Combo capture: press any two keyboard, mouse, wheel, or game controller inputs for ${this.state.selectedActionLabel()}.`);
     this.statusLog.ok(`${deviceLabel} combo capture armed for ${this.state.selectedActionLabel()}.`);
-    this.tryCaptureComboGamepad();
+    if (captureId.startsWith("gamepad:")) {
+      this.tryCaptureComboGamepad();
+    }
   }
 
   startGamepadCapture(gamepadIndex) {
+    if (!this.ensureSelectedTileForCapture()) {
+      return;
+    }
     const selectedIndex = Number(gamepadIndex);
     if (!Number.isInteger(selectedIndex)) {
       this.statusLog.warn("Gamepad capture unavailable: choose a detected gamepad device before capturing.");
       return;
     }
+    if (this.selectedGesture?.captureKind === "combo") {
+      this.startComboCapture(this.selectedGesture.deviceLabel, `gamepad:${selectedIndex}`);
+      return;
+    }
     if (this.isCaptureActive(`gamepad:${selectedIndex}`)) {
       this.cancelCapture(`Gamepad ${selectedIndex}`);
       return;
@@ -204,20 +236,17 @@ export class ToolStarterApp {
 
   selectGesture(gesture) {
     this.selectedGesture = gesture;
+    this.pendingGestureInput = null;
     if (gesture.captureKind === "combo") {
-      this.startComboCapture(gesture.deviceLabel);
+      this.statusLog.ok(`${gesture.deviceLabel} ${gesture.label} selected. Press a Capture button to record a two-input combo.`);
       this.refreshActions();
       return;
     }
     if (gesture.captureKind === "pointer-drag" || gesture.captureKind === "wheel") {
       const result = this.engineInputSources.captureGesture(gesture.binding, this.enabledDeviceIds);
-      if (!result.ok) {
-        this.statusLog.warn(result.message);
-        this.refreshActions();
-        return;
+      if (result.ok) {
+        this.pendingGestureInput = result.input;
       }
-      this.addCapturedInput(result.input);
-      return;
     }
     this.statusLog.ok(`${gesture.deviceLabel} ${gesture.label} selected for next capture.`);
     this.refreshActions();
@@ -503,13 +532,14 @@ export class ToolStarterApp {
       || [...this.activeInputBindings].some((binding) => !previous.has(binding));
   }
 
-  beginCapture(captureId) {
+  beginCapture(captureId, { mode = "" } = {}) {
     this.clearCapture();
+    const captureMode = mode || (captureId.startsWith("gamepad:") ? "gamepad" : captureId);
+    this.captureMode = captureMode;
+    this.activeCaptureId = captureId;
     if (captureId.startsWith("gamepad:")) {
-      this.captureMode = "gamepad";
       this.activeGamepadIndex = Number(captureId.slice("gamepad:".length));
     } else {
-      this.captureMode = captureId;
       this.activeGamepadIndex = null;
     }
     this.capture.setActiveCapture(captureId);
@@ -528,6 +558,7 @@ export class ToolStarterApp {
     }
     this.captureTimeoutTimer = null;
     this.captureMode = "";
+    this.activeCaptureId = "";
     this.activeGamepadIndex = null;
     this.comboCaptureInputs = [];
     this.capture.clearActiveCapture();
@@ -541,10 +572,7 @@ export class ToolStarterApp {
   }
 
   isCaptureActive(captureId) {
-    if (this.captureMode === "gamepad" && Number.isInteger(this.activeGamepadIndex)) {
-      return captureId === `gamepad:${this.activeGamepadIndex}`;
-    }
-    return captureId === this.captureMode;
+    return captureId === this.activeCaptureId;
   }
 
   captureTimeoutDelay() {
@@ -582,6 +610,34 @@ export class ToolStarterApp {
     return true;
   }
 
+  captureSelectedGesture() {
+    const pendingInput = this.pendingGestureInput?.binding === this.selectedGesture.binding
+      ? this.pendingGestureInput
+      : null;
+    const result = pendingInput
+      ? { ok: true, input: pendingInput }
+      : this.engineInputSources.captureGesture(this.selectedGesture.binding, this.enabledDeviceIds);
+    if (!result.ok) {
+      this.statusLog.warn(result.message);
+      this.refreshActions();
+      return;
+    }
+    this.pendingGestureInput = null;
+    this.addCapturedInput(result.input);
+  }
+
+  ensureSelectedTileForCapture() {
+    if (this.state.selectedActionHasTile()) {
+      return true;
+    }
+    const message = "Capture requires an existing selected mapping tile. Select an action and click Add before capturing input.";
+    this.capture.showMessage(message);
+    this.statusLog.warn(message);
+    this.clearCapture();
+    this.refreshActions();
+    return false;
+  }
+
   selectedRumbleSettings() {
     return this.rumbleSettingsByActionId.get(this.state.selectedActionId) ?? {
       durationMs: 80,

tools/input-mapping-v2/js/ToolStarterApp.js

@@ -52,8 +52,7 @@ window.addEventListener("DOMContentLoaded", () => {
       disableContextCheckbox: requireElement("#inputMappingV2DisableContextCheckbox"),
       refreshGamepadsButton: requireElement("#inputMappingV2RefreshGamepadsButton"),
       selectedActionLabel: requireElement("#inputMappingV2SelectedActionLabel"),
-      suppressShortcutsCheckbox: requireElement("#inputMappingV2SuppressShortcutsCheckbox"),
-      usedInputHighlights: requireElement("#inputMappingV2UsedInputHighlights")
+      suppressShortcutsCheckbox: requireElement("#inputMappingV2SuppressShortcutsCheckbox")
     }),
     deviceList: new DeviceListControl({
       container: requireElement("#inputMappingV2DeviceList"),