Polish Input Mapping V2 nav layout and labels - PR_26140_098-polish-input-mapping-v2-nav-layout-and-labels

Author: ToolboxAid

docs/dev/reports/input_mapping_v2_nav_layout_labels_report.md

@@ -0,0 +1,39 @@
+# Input Mapping V2 Nav Layout Labels Report
+
+## Scope
+- PR: PR_26140_098-polish-input-mapping-v2-nav-layout-and-labels
+- Source of truth: user PR_098 request. `docs/pr/BUILD_PR.md` currently points at an unrelated Level 18 overlay runtime hardening rebase, so this workflow used the explicit PR_098 request after reading `docs/dev/PROJECT_INSTRUCTIONS.md`.
+
+## Changes Applied
+- Restored the standalone Input Mapping V2 tool nav as `inputMappingV2ToolNav` with `Import`, `Copy JSON`, and `JSON` actions.
+- Kept the workspace nav path intact and kept the tool nav hidden during workspace launch.
+- Moved `Gestures` and `Capture` into the center column above `Captured Mappings`.
+- Moved `Status / Log` to the bottom of the right column and renamed the JSON preview accordion from `Export` to `JSON`.
+- Changed Actions button labels to `Add`, `Delete`, `Delete` and rewired the old clear button path to delete only the selected action tile instead of clearing inputs.
+- Updated game controller capture button labels to the compact two-line format: `Capture Game` plus the vendor/product line when available.
+- Removed the visible Sample 0104 diagnostics card from Gamepad Diagnostics, leaving browser and Input Mapping V2 engine diagnostics only.
+- Updated Input Mapping V2 help text to refer to `Copy JSON` and `JSON`.
+- Updated focused Playwright coverage for nav labels, layout order, diagnostics visibility, compact gamepad capture labels, action labels, and non-bulk delete behavior.
+
+## Contracts And Constraints
+- No schema changes.
+- No sample JSON changes.
+- No engine core changes.
+- External JS/CSS-only constraint preserved; changed HTML has no inline script/style/event-handler matches.
+- Captured mapping tile, gamepad auto-poll, combo, drag, and wheel behavior are preserved by existing coverage.
+- Sample 0104 comparison was removed from visible diagnostics because it duplicated the same InputService-backed state now shown by the Input Mapping V2 engine diagnostics. It can remain a conceptual comparison point in reports, but it is no longer useful as visible Gamepad Diagnostics UI.
+
+## Validation
+- `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/ExportControl.js`: PASS
+- `node --check tools/input-mapping-v2/js/services/EngineInputSourceService.js`: PASS
+- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "Input Mapping V2"`: PASS, 2 tests
+- `rg --pcre2 -n "<script(?![^>]*src=)|<style| on[a-zA-Z]+=" tools/input-mapping-v2/index.html tools/input-mapping-v2/how_to_use.html`: PASS, no matches
+- `npm run test:workspace-v2`: PASS, 61 tests
+- `git diff --check`: PASS, line-ending warnings only
+- Full samples smoke test: not run, per request
+- Delta ZIP verification: PASS, 12 files, nonzero size
+
+## Notes
+- `Import` is wired to an actionable warning in standalone mode because PR_098 restores the nav action but does not introduce an Input Mapping V2 file-import contract or schema changes. Workspace launch data remains the supported import path for this surface.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1430,8 +1430,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         buttons.map((button) => button.textContent.split("\n").map((line) => line.trim()).filter(Boolean))
       ));
       expect(gamepadCaptureLabels).toEqual([
-        ["Capture (Gamepad 0)", "Vendor: 081f Product: e401", "USB gamepad"],
-        ["Capture Logitech RumblePad 2", "Vendor: 046d Product: c218", "Logitech RumblePad 2"]
+        ["Capture Game", "Vendor: 081f Product: e401"],
+        ["Capture Game", "Vendor: 046d Product: c218"]
       ]);
       await expect(page.locator(".input-mapping-v2__gamepad-capture-button[data-input-mapping-gamepad-index='0']")).not.toContainText("Product: e401)");
       await expect(page.locator(".input-mapping-v2__gamepad-capture-button[data-input-mapping-gamepad-index='1']")).not.toContainText("Product: c218)");
@@ -1473,9 +1473,11 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("[data-tool-starter-summary]")).toBeVisible();
       await expect(page.locator(".tools-platform-frame__title[data-tool-id='input-mapping-v2']")).toHaveText("Input Mapping V2");
       await expect(page.locator(".tool-starter__tool__menu")).toBeVisible();
-      await expect(page.locator('[data-launch-mode-nav="tool"] button')).toHaveText(["Export", "Copy JSON"]);
+      await expect(page.locator('[data-launch-mode-nav="tool"] button')).toHaveText(["Import", "Copy JSON", "JSON"]);
       await expect(page.locator("#toolExportToolStateButton")).toHaveCount(0);
       await expect(page.locator(".tool-starter__workspace__menu")).toBeHidden();
+      await page.locator("#toolImportButton").click();
+      await expect(page.locator("#statusLog")).toHaveValue(/WARN Input Mapping V2 Import is available through workspace launch data/);
       const fullscreenLayout = await page.locator(".input-mapping-v2.tool-starter.app-shell").evaluate((shell) => {
         const left = shell.querySelector(".tool-starter__panel--left").getBoundingClientRect();
         const center = shell.querySelector(".tool-starter__panel--center").getBoundingClientRect();
@@ -1496,9 +1498,9 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(fullscreenLayout.rightGap).toBeLessThan(40);
       expect(fullscreenLayout.centerWidth).toBeGreaterThan(1000);
       expect(Math.max(...fullscreenLayout.rightAccordionHeights) - Math.min(...fullscreenLayout.rightAccordionHeights)).toBeLessThanOrEqual(3);
-      await expect(page.locator(".tool-starter__panel--left > .tool-starter__accordion > .accordion-v2__header > span:first-child")).toHaveText(["Actions", "Devices", "Gestures", "Capture"]);
-      await expect(page.locator(".tool-starter__panel--center > .tool-starter__accordion > .accordion-v2__header > span:first-child")).toHaveText(["Captured Mappings"]);
-      await expect(page.locator(".tool-starter__panel--right > .tool-starter__accordion > .accordion-v2__header > span:first-child")).toHaveText(["Diagnostics", "Status / Log", "Export"]);
+      await expect(page.locator(".tool-starter__panel--left > .tool-starter__accordion > .accordion-v2__header > span:first-child")).toHaveText(["Actions", "Devices"]);
+      await expect(page.locator(".tool-starter__panel--center > .tool-starter__accordion > .accordion-v2__header > span:first-child")).toHaveText(["Gestures", "Capture", "Captured Mappings"]);
+      await expect(page.locator(".tool-starter__panel--right > .tool-starter__accordion > .accordion-v2__header > span:first-child")).toHaveText(["Diagnostics", "JSON", "Status / Log"]);
       await expect(page.locator(".input-mapping-v2__device-card strong")).toHaveText([
         "Keyboard",
         "Mouse",
@@ -1524,8 +1526,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       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("Clear Actions");
-      await expect(page.locator("#actionSetupContent .input-mapping-v2__button-row button")).toHaveText(["Add Action", "Clear Actions", "Delete Action"]);
+      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 page.locator("#inputMappingV2RumbleFeedbackCheckbox").check();
       await expect(page.locator("#statusLog")).toHaveValue(/WARN Gamepad rumble unavailable:/);
@@ -1569,7 +1571,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#inputMappingV2Diagnostics")).toContainText("Engine input capabilities");
       await expect(page.locator("#inputMappingV2Diagnostics")).toContainText("Raw navigator.getGamepads()");
       await expect(page.locator("#inputMappingV2Diagnostics")).toContainText("InputService gamepad state");
-      await expect(page.locator("#inputMappingV2Diagnostics")).toContainText("Sample 0104 engine/input path");
+      await expect(page.locator("#inputMappingV2Diagnostics")).not.toContainText("Sample 0104 engine/input path");
       await expect(page.locator("#inputMappingV2Diagnostics")).toContainText("Browser API available");
       await expect(page.locator("#inputMappingV2Diagnostics")).toContainText("navigator.getGamepads() count");
       await expect(page.locator("#inputMappingV2Diagnostics")).toContainText("Last poll timestamp");
@@ -1702,8 +1704,9 @@ 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("#inputMappingV2DeleteActionButton").click();
+      await page.locator("#inputMappingV2ClearActionButton").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);
       const actionValues = await page.locator("#inputMappingV2ActionSelect option").evaluateAll((options) => (
         options.filter((option) => !option.disabled).map((option) => option.value)
@@ -1756,8 +1759,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#inputMappingV2Diagnostics")).toContainText(/navigator\.getGamepads\(\) count2/);
       await expect(page.locator("#inputMappingV2DeviceList")).toContainText("2 connected game controllers detected.");
       await expect(page.locator(".input-mapping-v2__gamepad-capture-button")).toHaveCount(2);
-      await expect(page.locator(".input-mapping-v2__gamepad-capture-button").nth(0)).toContainText("Mock Flight Stick");
-      await expect(page.locator(".input-mapping-v2__gamepad-capture-button").nth(1)).toContainText("Logitech RumblePad 2");
+      await expect(page.locator(".input-mapping-v2__gamepad-capture-button").nth(0)).toContainText("Capture Game");
+      await expect(page.locator(".input-mapping-v2__gamepad-capture-button").nth(1)).toContainText("Vendor: 046d Product: c218");
       const gamepadButtonLayout = await page.locator(".input-mapping-v2__gamepad-capture-button").evaluateAll((buttons) => buttons.map((button) => {
         const box = button.getBoundingClientRect();
         return {
@@ -1825,7 +1828,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(asteroidsManifestInputMapping.actions.map((action) => action.label)).toEqual(actionOptions);
       await page.locator("#toolExportButton").click();
       await expect(page.locator("#inspectorOutput")).toContainText('"payload"');
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Input Mapping V2 export preview written\./);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Input Mapping V2 JSON preview written\./);
       await page.evaluate(() => {
         Object.defineProperty(navigator, "clipboard", {
           configurable: true,

tools/input-mapping-v2/how_to_use.html

@@ -19,7 +19,7 @@ <h1>Input Mapping V2</h1>
           <li>Use Devices and Gestures to choose supported input patterns.</li>
           <li>Use Capture Keyboard, Capture Mouse, or a connected game controller capture button.</li>
           <li>Click a captured input token to delete that binding.</li>
-          <li>Use Copy JSON or Export when the mapping is ready.</li>
+          <li>Use Copy JSON or JSON when the mapping is ready.</li>
         </ol>
         <nav class="tool-starter__menu" aria-label="Input Mapping V2 links">
           <a href="./index.html">Open Tool</a>

tools/input-mapping-v2/index.html

@@ -37,6 +37,12 @@ <h2 class="tools-platform-frame__eyebrow">Input Sources and Action Mapping</h2>
       </div>
     </details>
 
+    <nav id="inputMappingV2ToolNav" class="tool-starter__menu tool-starter__tool__menu" aria-label="Tool actions" data-launch-mode-nav="tool">
+      <button id="toolImportButton" type="button">Import</button>
+      <button id="toolCopyJsonButton" type="button">Copy JSON</button>
+      <button id="toolExportButton" type="button">JSON</button>
+    </nav>
+
     <nav class="tool-starter__menu tool-starter__workspace__menu" aria-label="Workspace actions" data-launch-mode-nav="workspace" hidden>
       <button id="workspaceImportManifestButton" type="button">Import manifest</button>
       <button id="workspaceCopyManifestButton" type="button">Copy manifest</button>
@@ -61,9 +67,9 @@ <h2 class="tools-platform-frame__eyebrow">Input Sources and Action Mapping</h2>
               <input id="inputMappingV2CustomActionInput" type="text" autocomplete="off" placeholder="dash, interact, inspect">
             </label>
             <div class="input-mapping-v2__button-row">
-              <button id="inputMappingV2AddActionButton" type="button">Add Action</button>
-              <button id="inputMappingV2ClearActionButton" type="button">Clear Actions</button>
-              <button id="inputMappingV2DeleteActionButton" type="button">Delete Action</button>
+              <button id="inputMappingV2AddActionButton" type="button">Add</button>
+              <button id="inputMappingV2ClearActionButton" type="button">Delete</button>
+              <button id="inputMappingV2DeleteActionButton" type="button">Delete</button>
             </div>
             <p id="inputMappingV2ActionHint" class="tool-starter__hint">Default actions are engine-style action names sorted alphabetically.</p>
           </div>
@@ -83,6 +89,9 @@ <h2 class="tools-platform-frame__eyebrow">Input Sources and Action Mapping</h2>
           </div>
         </section>
 
+      </aside>
+
+      <section class="tool-starter__panel tool-starter__panel--center" aria-label="Captured mappings">
         <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="gestureSetupContent">
             <span>Gestures</span>
@@ -110,9 +119,7 @@ <h2 class="tools-platform-frame__eyebrow">Input Sources and Action Mapping</h2>
             <button id="inputMappingV2RefreshGamepadsButton" type="button">Refresh Gamepads</button>
           </div>
         </section>
-      </aside>
 
-      <section class="tool-starter__panel tool-starter__panel--center" aria-label="Captured mappings">
         <section class="accordion-v2 tool-starter__accordion tool-starter__accordion--fill is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="mappingPanelContent">
             <span>Captured Mappings</span>
@@ -137,6 +144,16 @@ <h2 class="tools-platform-frame__eyebrow">Input Sources and Action Mapping</h2>
           </div>
         </section>
 
+        <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
+          <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="exportContent">
+            <span>JSON</span>
+            <span class="accordion-v2__icon" aria-hidden="true">+</span>
+          </button>
+          <div id="exportContent" class="accordion-v2__content">
+            <pre id="inspectorOutput" class="tool-starter__output">{}</pre>
+          </div>
+        </section>
+
         <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
           <div class="accordion-v2__header tool-starter__status-accordion-header" aria-expanded="true" aria-controls="statusLogContent">
             <span>Status / Log</span>
@@ -149,20 +166,6 @@ <h2 class="tools-platform-frame__eyebrow">Input Sources and Action Mapping</h2>
             <textarea id="statusLog" readonly rows="10" aria-label="Status log"></textarea>
           </div>
         </section>
-
-        <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
-          <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="exportContent">
-            <span>Export</span>
-            <span class="accordion-v2__icon" aria-hidden="true">+</span>
-          </button>
-          <div id="exportContent" class="accordion-v2__content">
-            <nav id="inputMappingV2ExportNav" class="tool-starter__menu tool-starter__tool__menu input-mapping-v2__export-menu" aria-label="Export actions" data-launch-mode-nav="tool">
-              <button id="toolExportButton" type="button">Export</button>
-              <button id="toolCopyJsonButton" type="button">Copy JSON</button>
-            </nav>
-            <pre id="inspectorOutput" class="tool-starter__output">{}</pre>
-          </div>
-        </section>
       </aside>
     </main>
     <script type="module" src="../../src/engine/theme/mount-shared-header.js"></script>

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

@@ -61,12 +61,13 @@ export class ToolStarterApp {
       onCopyJson: () => {
         void this.copyJson();
       },
-      onExport: () => this.exportToolState()
+      onExport: () => this.exportToolState(),
+      onImport: () => this.importJson()
     });
     this.actionSelection.mount({
       onActionChanged: (actionId) => this.selectAction(actionId),
       onAddAction: (label) => this.addAction(label),
-      onClearAction: () => this.clearSelectedAction(),
+      onClearAction: () => this.deleteSelectedAction(),
       onDeleteAction: () => this.deleteSelectedAction()
     });
     this.capture.mount({
@@ -432,7 +433,11 @@ export class ToolStarterApp {
 
   exportToolState() {
     this.inspector.showObject(this.state.toolState());
-    this.statusLog.ok("Input Mapping V2 export preview written.");
+    this.statusLog.ok("Input Mapping V2 JSON preview written.");
+  }
+
+  importJson() {
+    this.statusLog.warn("Input Mapping V2 Import is available through workspace launch data; standalone file import is not wired for this tool.");
   }
 
   async copyJson() {

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

@@ -61,7 +61,8 @@ window.addEventListener("DOMContentLoaded", () => {
     exportControl: new ExportControl({
       copyJsonButton: requireElement("#toolCopyJsonButton"),
       exportButton: requireElement("#toolExportButton"),
-      nav: requireElement("#inputMappingV2ExportNav")
+      importButton: requireElement("#toolImportButton"),
+      nav: requireElement("#inputMappingV2ToolNav")
     }),
     gamepadDiagnostics: new GamepadDiagnosticsControl(requireElement("#inputMappingV2Diagnostics")),
     gestureList: new GestureListControl(requireElement("#inputMappingV2GestureList")),

tools/input-mapping-v2/js/controls/ExportControl.js

@@ -1,18 +1,21 @@
 export class ExportControl {
-  constructor({ copyJsonButton, exportButton, locationRef = window.location, nav }) {
+  constructor({ copyJsonButton, exportButton, importButton, locationRef = window.location, nav }) {
     this.copyJsonButton = copyJsonButton;
     this.exportButton = exportButton;
+    this.importButton = importButton;
     this.location = locationRef;
     this.nav = nav;
   }
 
-  mount({ onCopyJson, onExport }) {
+  mount({ onCopyJson, onExport, onImport }) {
     this.applyLaunchMode();
+    this.importButton.addEventListener("click", onImport);
     this.exportButton.addEventListener("click", onExport);
     this.copyJsonButton.addEventListener("click", onCopyJson);
   }
 
   setEnabled(isEnabled) {
+    this.importButton.disabled = !isEnabled;
     this.exportButton.disabled = !isEnabled;
     this.copyJsonButton.disabled = !isEnabled;
   }