Polish Input Mapping V2 device usage and tile actions - PR_26140_101-polish-input-mapping-v2-device-usage-and-tile-actions

Author: ToolboxAid

docs/dev/reports/input_mapping_v2_device_usage_tile_actions_report.md

@@ -0,0 +1,60 @@
+# Input Mapping V2 Device Usage And Tile Actions Report
+
+## Scope
+- PR: PR_26140_101-polish-input-mapping-v2-device-usage-and-tile-actions
+- Source of truth: user PR_101 request. `docs/pr/BUILD_PR.md` still points at an unrelated Level 18 overlay runtime hardening rebase, so this workflow used the explicit PR_101 request after reading `docs/dev/PROJECT_INSTRUCTIONS.md`.
+
+## Changes Applied
+- Moved the existing gamepad rumble/haptic checkbox into the `Game Controller` device card.
+- Removed `Wheel` as a separate visible device and treats wheel directions as Mouse gestures.
+- Kept `Mouse Wheel Up`, `Mouse Wheel Down`, `Mouse Wheel Left`, and `Mouse Wheel Right` visible when Mouse is enabled and browser wheel support or advanced input mode is available.
+- Moved `inputMappingV2ClearActionButton` into the Captured Mappings area, renamed it to `Delete All`, and wired it to delete all visible captured mapping tiles/actions.
+- Kept the Actions accordion to selected-action creation/deletion only: `Add`, `Delete`.
+- Added idle selected-action source highlighting for already-used Keyboard, Mouse, and visible Game Controller controls.
+- Added gesture text to captured mapping tile tokens while preserving concise labels and detailed title/hover metadata.
+- Preserved combo display, selected tile indication, capture highlight/cancel behavior, gamepad auto-polling, and 225x225 tiles.
+
+## Contracts And Constraints
+- No schema changes.
+- No sample JSON changes.
+- No full samples smoke test; skipped per request because this is scoped to Input Mapping V2 and engine input descriptors.
+- Rumble/haptic support remains UI-local because the existing Input Mapping V2 toolState contract has no options field.
+
+## Validation
+- `node --check src/engine/input/InputCapabilityDescriptors.js`: PASS
+- `node --check tools/input-mapping-v2/js/bootstrap.js`: PASS
+- `node --check tools/input-mapping-v2/js/ToolStarterApp.js`: PASS
+- `node --check tools/input-mapping-v2/js/controls/ActionSelectionControl.js`: PASS
+- `node --check tools/input-mapping-v2/js/controls/CaptureControl.js`: PASS
+- `node --check tools/input-mapping-v2/js/controls/DeviceListControl.js`: PASS
+- `node --check tools/input-mapping-v2/js/controls/PreviewPanelControl.js`: PASS
+- `node --check tools/input-mapping-v2/js/services/EngineInputSourceService.js`: PASS
+- `node --check tools/input-mapping-v2/js/services/InputMappingState.js`: PASS
+- `node --check tests/input/InputService.test.mjs`: PASS
+- `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs`: PASS
+- `node -e "const test = await import('./tests/input/InputService.test.mjs'); test.run();"`: PASS
+- Focused Input Mapping V2 Playwright: PASS, 2 tests
+- `npm run test:workspace-v2`: PASS, 61 tests
+- `git diff --check`: PASS, line-ending warnings only
+- HTML inline script/style/handler scan: PASS, no matches
+- Sample/JSON diff scan: PASS, no changed sample or JSON files
+- Playwright V8 coverage report: PASS, changed runtime JS listed in `docs/dev/reports/playwright_v8_coverage_report.txt` and `coverage_changed_js_guardrail.txt`
+- Full samples smoke test: not run, per request
+- Delta ZIP verification: PASS, 20 files, nonzero size
+
+## Playwright Coverage
+- Confirms rumble/haptics appears inside the Game Controller device card.
+- Confirms Wheel is not a separate device.
+- Confirms wheel gestures appear inside Mouse and hide when Mouse is disabled.
+- Confirms `Delete All` appears at the bottom of Captured Mappings and clears captured mappings.
+- Confirms selected-action used Keyboard, Mouse, and Game Controller controls are highlighted outside capture mode.
+- Confirms mapping tiles display gesture text for keyboard, mouse, drag release, gamepad, and combo inputs.
+- Confirms combo display, selected tile behavior, gamepad auto-polling, and capture highlight/cancel behavior remain intact.
+
+## Manual Validation
+1. Open `tools/input-mapping-v2/index.html`.
+2. In Devices, confirm there is no separate Wheel card and `Gamepad rumble/haptic feedback` is inside Game Controller.
+3. In Gestures, confirm wheel directions appear under Mouse.
+4. Capture keyboard, mouse, drag release, and game controller inputs; confirm the selected action highlights the used source controls while capture is idle.
+5. Confirm captured mapping tokens include gesture text such as `Press`, `Click`, `Drag Release`, or `Button`.
+6. Click `Delete All` at the bottom of Captured Mappings and confirm all mapping tiles are removed.

src/engine/input/InputCapabilityDescriptors.js

@@ -46,14 +46,6 @@ const DEVICE_DEFINITIONS = Object.freeze([
         defaultEnabled: false,
         detail: 'Pen support depends on browser PointerEvent input. This tool exposes capability status only until pen capture is testable here.'
     },
-    {
-        id: 'wheel',
-        label: 'Wheel',
-        engine: 'InputService wheel descriptor',
-        supported: true,
-        defaultEnabled: true,
-        detail: 'Mouse wheel directions can be captured directly or as combo inputs.'
-    },
     {
         id: 'flightStick',
         label: 'Flight Stick',
@@ -81,10 +73,10 @@ const GESTURE_DEFINITIONS = Object.freeze([
     mouseGesture('MouseDoubleClick', 'Double Click', 'Mouse double click', 'mouse'),
     pointerGesture('MousePrimaryDrag', 'Drag', 'Mouse drag', 'mouse'),
     pointerGesture('MousePrimaryDragRelease', 'Drag Release', 'Mouse drag release', 'mouse'),
-    wheelGesture('MouseWheelUp', 'Wheel Up', 'Mouse wheel up', ['mouse', 'wheel']),
-    wheelGesture('MouseWheelDown', 'Wheel Down', 'Mouse wheel down', ['mouse', 'wheel']),
-    wheelGesture('MouseWheelLeft', 'Wheel Left', 'Mouse wheel left', ['mouse', 'wheel']),
-    wheelGesture('MouseWheelRight', 'Wheel Right', 'Mouse wheel right', ['mouse', 'wheel']),
+    wheelGesture('MouseWheelUp', 'Wheel Up', 'Mouse wheel up'),
+    wheelGesture('MouseWheelDown', 'Wheel Down', 'Mouse wheel down'),
+    wheelGesture('MouseWheelLeft', 'Wheel Left', 'Mouse wheel left'),
+    wheelGesture('MouseWheelRight', 'Wheel Right', 'Mouse wheel right'),
     comboGesture('MouseCombo', 'Mouse', ['mouse']),
     gameControllerGesture('GameControllerButton', 'Button', 'Game controller button', 'gameController'),
     gameControllerGesture('GameControllerTrigger', 'Trigger', 'Game controller trigger', 'gameController'),
@@ -99,7 +91,6 @@ export function inputDeviceCapabilities({
     pointerEventsAvailable = false,
     touchAvailable = false,
     penAvailable = false,
-    wheelAvailable = true,
     webXrAvailable = false
 } = {}) {
     return DEVICE_DEFINITIONS.map((device) => {
@@ -131,13 +122,6 @@ export function inputDeviceCapabilities({
                     : 'Pen capture requires browser PointerEvent support.'
             };
         }
-        if (device.id === 'wheel') {
-            return {
-                ...device,
-                available: wheelAvailable,
-                emptyState: wheelAvailable ? '' : 'Wheel input requires browser wheel event support.'
-            };
-        }
         if (device.id === 'flightStick') {
             return {
                 ...device,
@@ -165,10 +149,15 @@ export function inputDeviceCapabilities({
     });
 }
 
-export function inputGestureDescriptors({ enabledDeviceIds = [] } = {}) {
+export function inputGestureDescriptors({
+    advancedModeAvailable = false,
+    enabledDeviceIds = [],
+    wheelAvailable = true
+} = {}) {
     const enabled = new Set(enabledDeviceIds);
     return GESTURE_DEFINITIONS.filter((gesture) => (
         gesture.requiredDeviceIds.every((deviceId) => enabled.has(deviceId))
+        && (gesture.captureKind !== 'wheel' || wheelAvailable || advancedModeAvailable)
     )).map((gesture) => ({ ...gesture }));
 }
 
@@ -213,7 +202,7 @@ export function wheelInputDescriptor(binding, detail) {
     return {
         source: 'mouse',
         binding,
-        displayLabelLines: ['Mouse', detail],
+        displayLabelLines: ['Mouse', detail, 'Wheel'],
         label: `Mouse ${detail}`,
         title: `Mouse\n${detail}`,
         engine: 'InputService Wheel'
@@ -240,15 +229,15 @@ function pointerGesture(binding, label, title, deviceId) {
     };
 }
 
-function wheelGesture(binding, label, title, requiredDeviceIds) {
+function wheelGesture(binding, label, title) {
     return {
         binding,
         captureKind: 'wheel',
         deviceLabel: 'Mouse',
         displayLabelLines: ['Mouse', label],
         engine: 'InputService Wheel',
         label,
-        requiredDeviceIds,
+        requiredDeviceIds: ['mouse'],
         source: 'mouse',
         title
     };

tests/input/InputService.test.mjs

@@ -82,8 +82,11 @@ export function run() {
     assert(dragRelease.snapshot.dragBounds.height === 40, 'Drag release descriptors should carry drag bounds height.');
     const capabilities = input.getInputDeviceCapabilities({ gamepadCount: 0 });
     assert(capabilities.some((device) => device.label === 'VR Controller'), 'Input capabilities should expose safe VR controller descriptors.');
-    const gestures = input.getInputGestureDescriptors({ enabledDeviceIds: ['keyboard', 'mouse', 'wheel'] });
-    assert(gestures.some((gesture) => gesture.binding === 'MouseWheelUp'), 'Input gestures should expose wheel descriptors when wheel is enabled.');
+    assert(!capabilities.some((device) => device.label === 'Wheel'), 'Input capabilities should treat wheel as mouse input instead of a device.');
+    const gestures = input.getInputGestureDescriptors({ enabledDeviceIds: ['keyboard', 'mouse'] });
+    assert(gestures.some((gesture) => gesture.binding === 'MouseWheelUp'), 'Input gestures should expose wheel descriptors through Mouse when wheel is available.');
+    const gesturesWithoutWheelSupport = input.getInputGestureDescriptors({ enabledDeviceIds: ['keyboard', 'mouse'], wheelAvailable: false });
+    assert(!gesturesWithoutWheelSupport.some((gesture) => gesture.binding === 'MouseWheelUp'), 'Input gestures should hide wheel descriptors when wheel support is unavailable.');
     assert(!gestures.some((gesture) => gesture.binding === 'MousePrimaryDragRectangle'), 'Visible input gestures should not expose Drag Rectangle.');
 
     input.detach();

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1507,10 +1507,10 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         "Game Controller",
         "Touch",
         "Pen",
-        "Wheel",
         "Flight Stick",
         "VR Controller"
       ]);
+      await expect(page.locator(".input-mapping-v2__device-card[data-input-mapping-device-id='wheel']")).toHaveCount(0);
       await expect(page.locator("#inputMappingV2DeviceList")).toContainText("InputService + KeyboardState");
       await expect(page.locator("#inputMappingV2DeviceList")).toContainText("InputService + MouseState + PointerDragState");
       await expect(page.locator("#inputMappingV2DeviceList")).toContainText("InputService + GamepadState + GamepadInputAdapter");
@@ -1523,6 +1523,9 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#inputMappingV2GestureList")).not.toContainText("Drag Rectangle");
       await expect(page.locator("#inputMappingV2GestureList")).not.toContainText(/Mouse Move [XY]/);
       await expect(page.locator("#inputMappingV2GestureList")).toContainText("Button");
+      await expect(page.locator(".input-mapping-v2__gesture-group", { hasText: "Mouse" })).toContainText("Wheel Up");
+      const gestureGroupTitles = await page.locator(".input-mapping-v2__gesture-group strong").allTextContents();
+      expect(gestureGroupTitles).not.toContain("Wheel");
       const compactAccordionSpacing = await page.locator("#gestureSetupContent, #captureInputContent").evaluateAll((contents) => (
         contents.map((content) => ({
           columnGap: getComputedStyle(content).columnGap,
@@ -1564,22 +1567,31 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       const keyboardGestureButtons = gestureFlowLayout.groupLayouts.find((entry) => entry.label === "Keyboard").buttons;
       expect(new Set(keyboardGestureButtons.map((entry) => entry.left)).size).toBeGreaterThan(1);
       expect(new Set(keyboardGestureButtons.map((entry) => entry.top)).size).toBeGreaterThan(1);
-      await page.locator(".input-mapping-v2__device-card[data-input-mapping-device-id='wheel'] input").uncheck();
+      await page.locator(".input-mapping-v2__device-card[data-input-mapping-device-id='mouse'] input").uncheck();
       await expect(page.locator(".input-mapping-v2__gesture-button", { hasText: "Wheel Up" })).toHaveCount(0);
-      await page.locator(".input-mapping-v2__device-card[data-input-mapping-device-id='wheel'] input").check();
+      await page.locator(".input-mapping-v2__device-card[data-input-mapping-device-id='mouse'] input").check();
       await expect(page.locator(".input-mapping-v2__gesture-button", { hasText: "Wheel Up" })).toHaveCount(1);
       const actionOptions = await page.locator("#inputMappingV2ActionSelect option").allTextContents();
       expect(actionOptions).toEqual([...actionOptions].sort((left, right) => left.localeCompare(right)));
       expect(actionOptions).toEqual(expect.arrayContaining(["Move Left", "Confirm", "Cancel", "Fire", "Thrust", "Rotate Left", "Rotate Right", "Pause", "Select", "Start"]));
       await expect(page.locator("#inputMappingV2ResetActionsButton")).toHaveCount(0);
-      await expect(page.locator("#inputMappingV2ClearActionButton")).toHaveText("Delete");
-      await expect(page.locator("#actionSetupContent .input-mapping-v2__button-row button")).toHaveText(["Add", "Delete", "Delete"]);
-      await expect(page.locator("#inputMappingV2RumbleFeedbackCheckbox")).toBeVisible();
+      await expect(page.locator("#inputMappingV2ClearActionButton")).toHaveText("Delete All");
+      await expect(page.locator("#actionSetupContent .input-mapping-v2__button-row button")).toHaveText(["Add", "Delete"]);
+      await expect(page.locator("#mappingPanelContent #inputMappingV2ClearActionButton")).toBeVisible();
+      await expect(page.locator(".input-mapping-v2__device-card[data-input-mapping-device-id='gameController'] #inputMappingV2RumbleFeedbackCheckbox")).toBeVisible();
       await page.locator("#inputMappingV2RumbleFeedbackCheckbox").check();
       await expect(page.locator("#statusLog")).toHaveValue(/WARN Gamepad rumble unavailable:/);
       await expect(page.locator("#previewOutput")).toContainText("No inputs captured yet.");
       await expect(page.locator(".input-mapping-v2__mapping-card")).toHaveCount(0);
       expect(await page.locator("#previewOutput").evaluate((node) => getComputedStyle(node).overflowY)).toBe("auto");
+      const capturedMappingsActionPlacement = await page.locator("#mappingPanelContent").evaluate((content) => ({
+        lastElementClass: content.lastElementChild?.className,
+        lastButtonText: content.lastElementChild?.querySelector("button")?.textContent
+      }));
+      expect(capturedMappingsActionPlacement).toEqual({
+        lastElementClass: "input-mapping-v2__mapping-actions",
+        lastButtonText: "Delete All"
+      });
       const captureFlowLayout = await page.locator("#captureInputContent").evaluate((content) => {
         const rectFor = (selector) => {
           const box = content.querySelector(selector).getBoundingClientRect();
@@ -1760,12 +1772,17 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(Math.round(mappingTileBox.width)).toBe(225);
       expect(Math.round(mappingTileBox.height)).toBe(225);
       await expect(page.locator("#previewOutput")).toContainText("Move Left");
-      await expect(page.locator("#previewOutput")).toContainText("Keyboard KeyA");
-      await expect(page.locator("#previewOutput")).toContainText("Keyboard KeyD");
-      await expect(page.locator("#previewOutput")).toContainText("Mouse Middle Button");
-      await expect(page.locator("#previewOutput")).toContainText("Mouse Drag Release");
+      await expect(page.locator("#previewOutput")).toContainText("Keyboard KeyA Press");
+      await expect(page.locator("#previewOutput")).toContainText("Keyboard KeyD Press");
+      await expect(page.locator("#previewOutput")).toContainText("Mouse Middle Button Click");
+      await expect(page.locator("#previewOutput")).toContainText("Mouse Left Button Drag Release");
       await expect(page.locator("#previewOutput")).not.toContainText("Mouse Drag Rectangle");
-      await expect(page.locator(".input-mapping-v2__input-token", { hasText: "Mouse Drag Release" })).toHaveAttribute("title", /Bounds: x 12, y 16, width 60, height 80/);
+      await expect(page.locator(".input-mapping-v2__input-token", { hasText: "Mouse Left Button" }).filter({ hasText: "Drag Release" })).toHaveAttribute("title", /Bounds: x 12, y 16, width 60, height 80/);
+      await expect(page.locator("#inputMappingV2CaptureKeyboardButton")).toHaveClass(/has-used-input/);
+      await expect(page.locator("#inputMappingV2CaptureMouseButton")).toHaveClass(/has-used-input/);
+      await expect(page.locator("#inputMappingV2UsedInputHighlights")).toContainText("Keyboard KeyA Press");
+      await expect(page.locator("#inputMappingV2UsedInputHighlights")).toContainText("Mouse Middle Button Click");
+      await expect(page.locator("#inputMappingV2UsedInputHighlights")).toContainText("Mouse Left Button Drag Release");
       await expect(page.locator("#inspectorOutput")).toContainText('"action": "moveLeft"');
       await expect(page.locator("#inspectorOutput")).toContainText('"binding": "KeyA"');
       await expect(page.locator("#inspectorOutput")).toContainText('"binding": "KeyD"');
@@ -1789,7 +1806,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.keyboard.press("KeyB");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Keyboard KeyB mapped to Confirm\./);
       await expect(page.locator("#captureInputContent")).not.toContainText("Keyboard KeyB mapped to Confirm.");
-      await page.locator("#inputMappingV2ClearActionButton").click();
+      await page.locator("#inputMappingV2DeleteActionButton").click();
       await expect(page.locator(".input-mapping-v2__mapping-card", { hasText: "Confirm" })).toHaveCount(0);
       await expect(page.locator(".input-mapping-v2__mapping-card", { hasText: "Move Left" })).toHaveCount(1);
       await expect(page.locator("#inputMappingV2ActionSelect option[value='confirm']")).toHaveJSProperty("disabled", false);
@@ -1872,8 +1889,10 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       });
       await expect(page.locator(".input-mapping-v2__gamepad-capture-button[data-input-mapping-gamepad-index='1']")).not.toHaveClass(/is-capturing/);
       await expect(page.locator("#previewOutput")).toContainText("Keyboard KeyD");
-      await expect(page.locator("#previewOutput")).toContainText("Game Controller X");
+      await expect(page.locator("#previewOutput")).toContainText("Game Controller X Button");
       await expect(page.locator("#previewOutput")).not.toContainText("(Gamepad 1)");
+      await expect(page.locator(".input-mapping-v2__gamepad-capture-button[data-input-mapping-gamepad-index='1']")).toHaveClass(/has-used-input/);
+      await expect(page.locator("#inputMappingV2UsedInputHighlights")).toContainText("Game Controller X Button");
       await expect(page.locator(".input-mapping-v2__input-token", { hasText: "Game Controller" }).filter({ hasText: "X" })).toHaveAttribute("title", "Logitech RumblePad 2 USB\nSTANDARD GAMEPAD\nVendor: 046d Product: c218\nX");
       await expect(page.locator("#inspectorOutput")).toContainText('"source": "gamepad"');
       await expect(page.locator("#inspectorOutput")).toContainText('"binding": "Pad1:Button2"');
@@ -1929,6 +1948,10 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.locator("#toolCopyJsonButton").click();
       expect(await page.evaluate(() => window.__inputMappingV2Clipboard)).toContain('"toolId": "input-mapping-v2"');
       await expect(page.locator("#statusLog")).toHaveValue(/OK Mapping JSON copied\./);
+      await page.locator("#inputMappingV2ClearActionButton").click();
+      await expect(page.locator(".input-mapping-v2__mapping-card")).toHaveCount(0);
+      await expect(page.locator("#previewOutput")).toContainText("No inputs captured yet.");
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Deleted \d+ captured mappings\./);
       expect(pageErrors).toEqual([]);
     } finally {
       await workspaceV2CoverageReporter.stop(page);