Fix Input Mapping V2 export manifest wiring and nav actions - PR_26140_116-fix-input-mapping-v2-export-manifest-and-nav

Author: ToolboxAid

docs/dev/reports/input_mapping_v2_export_manifest_nav_report.md

@@ -0,0 +1,59 @@
+# Input Mapping V2 Export Manifest Nav Report
+
+PR: `PR_26140_116-fix-input-mapping-v2-export-manifest-and-nav`
+
+## Summary
+- Renamed the center workspace accordion from `Action Mappings` to `Action Mapping(s)`, including the related center panel and preview aria labels.
+- Updated `InputMappingState.payload()` so exported/copied JSON excludes actions whose `inputs` array is empty.
+- Changed JSON preview export to emit the actual filtered Input Mapping V2 payload, not a wrapper `toolState.payload` object.
+- Rewired Input Mapping V2 workspace nav Copy JSON and JSON buttons to the same real filtered payload actions as the tool nav.
+- Disabled Import in tool and workspace nav with an actionable reason because this tool imports through Workspace Manager `game.manifest.json` launch data.
+- Confirmed the active Asteroids `game.manifest.json` already includes `tools.input-mapping-v2`, and Workspace Manager V2 already discovers/launches it from the selected game manifest.
+
+## Files Changed
+- `tools/input-mapping-v2/index.html`
+- `tools/input-mapping-v2/js/ToolStarterApp.js`
+- `tools/input-mapping-v2/js/controls/ActionNavControl.js`
+- `tools/input-mapping-v2/js/controls/ExportControl.js`
+- `tools/input-mapping-v2/js/services/InputMappingState.js`
+- `tests/playwright/tools/WorkspaceManagerV2.spec.mjs`
+- `docs/dev/commit_comment.txt`
+- `docs/dev/codex_commands.md`
+- `docs/dev/reports/input_mapping_v2_export_manifest_nav_report.md`
+
+## Validation
+- PASS: `node --check tools/input-mapping-v2/js/services/InputMappingState.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/controls/ActionNavControl.js`
+- PASS: `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs`
+- PASS: node manifest assertion confirmed `games/Asteroids/game.manifest.json` contains `tools.input-mapping-v2` with the expected tool id and engine input model.
+- PASS: `npm run test:workspace-v2` passed 70/70 tests.
+
+## Playwright Coverage Added/Updated
+- Tool nav shows Import, Copy JSON, JSON; Import is disabled with an actionable reason.
+- Workspace nav shows Import, Copy JSON, JSON when launched in workspace mode; Import is disabled with an actionable reason.
+- Workspace nav JSON preview and Copy JSON use the real filtered payload.
+- Empty default actions export as `actions: []` instead of empty action entries.
+- Mapped exports include only actions with inputs and exclude empty action tiles such as Confirm and Start.
+- Copy JSON writes the same filtered payload shown by JSON preview.
+- Active `game.manifest.json` includes `input-mapping-v2`, and existing Workspace Manager V2 coverage confirms Input Mapping V2 hydrates, appears as enabled, and launches from the selected game manifest.
+
+## Coverage Report
+- Browser V8 coverage was generated by the workspace-v2 run.
+- Changed runtime JS coverage lines are present in `docs/dev/reports/playwright_v8_coverage_report.txt`:
+  - `(90%) tools/input-mapping-v2/js/services/InputMappingState.js - changed JS file with browser V8 coverage`
+  - `(94%) tools/input-mapping-v2/js/ToolStarterApp.js - changed JS file with browser V8 coverage`
+  - `(100%) tools/input-mapping-v2/js/controls/ActionNavControl.js - changed JS file with browser V8 coverage`
+  - `(100%) tools/input-mapping-v2/js/controls/ExportControl.js - changed JS file with browser V8 coverage`
+
+## Manual Test Notes
+1. Open `tools/input-mapping-v2/index.html`.
+2. Confirm the center mapping accordion reads `Action Mapping(s)`.
+3. Confirm Import is disabled and its tooltip explains that import is through Workspace Manager `game.manifest.json` launch data.
+4. Add a tile, capture one input, and click JSON; expected JSON includes only actions with captured inputs.
+5. Click Copy JSON; expected clipboard content matches the filtered JSON preview.
+6. Open Workspace Manager V2, select Asteroids, and launch Input Mapping V2; expected result is that the tool loads from `game.manifest.json` and Return to Workspace remains available.
+
+## Full Samples Smoke Test
+- Not run, per request and project instructions. This PR is scoped to Input Mapping V2 and Workspace V2 validation.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -2800,9 +2800,39 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator(".tool-starter__tool__menu")).toBeVisible();
       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("#toolImportButton")).toBeDisabled();
+      await expect(page.locator("#toolImportButton")).toHaveAttribute("title", /Import disabled: Input Mapping V2 imports through Workspace Manager game\.manifest launch data/);
       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/);
+      await page.goto(`${server.baseUrl}/tools/input-mapping-v2/index.html?launch=workspace`, { waitUntil: "networkidle" });
+      await expect(page.locator(".tool-starter__tool__menu")).toBeHidden();
+      await expect(page.locator(".tool-starter__workspace__menu")).toBeVisible();
+      await expect(page.locator('[data-launch-mode-nav="workspace"] button:not([hidden])')).toHaveText(["Import", "Copy JSON", "JSON"]);
+      await expect(page.locator("#workspaceImportManifestButton")).toBeDisabled();
+      await expect(page.locator("#workspaceImportManifestButton")).toHaveAttribute("title", /Import disabled: Input Mapping V2 imports through Workspace Manager game\.manifest launch data/);
+      await page.locator("#workspaceExportManifestButton").click();
+      const workspaceExportPayload = JSON.parse(await page.locator("#inspectorOutput").textContent());
+      expect(workspaceExportPayload).toMatchObject({
+        engineInputModel: "src/engine/input/InputMap",
+        toolId: "input-mapping-v2",
+        version: 1
+      });
+      expect(workspaceExportPayload.actions).toEqual([]);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Input Mapping V2 JSON preview written\./);
+      await page.evaluate(() => {
+        Object.defineProperty(navigator, "clipboard", {
+          configurable: true,
+          value: {
+            writeText: async (text) => {
+              window.__inputMappingV2WorkspaceClipboard = text;
+            }
+          }
+        });
+      });
+      await page.locator("#workspaceCopyManifestButton").click();
+      expect(JSON.parse(await page.evaluate(() => window.__inputMappingV2WorkspaceClipboard))).toEqual(workspaceExportPayload);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Mapping JSON copied\./);
+      await page.goto(`${server.baseUrl}/tools/input-mapping-v2/index.html`, { waitUntil: "networkidle" });
+      await expect(page.locator("body[data-tool-id='input-mapping-v2']")).toBeVisible();
       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();
@@ -2824,7 +2854,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       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"]);
-      await expect(page.locator(".tool-starter__panel--center > .tool-starter__accordion > .accordion-v2__header > span:first-child")).toHaveText(["Input Device(s)", "Capture Gestures", "Action Mappings"]);
+      await expect(page.locator(".tool-starter__panel--center > .tool-starter__accordion > .accordion-v2__header > span:first-child")).toHaveText(["Input Device(s)", "Capture Gestures", "Action Mapping(s)"]);
       const centerAccordionLabels = await page.locator(".tool-starter__panel--center > .tool-starter__accordion > .accordion-v2__header > span:first-child").allTextContents();
       expect(centerAccordionLabels.some((label) => /[{}]/.test(label))).toBe(false);
       await expect(page.locator(".tool-starter__panel--right > .tool-starter__accordion > .accordion-v2__header > span:first-child")).toHaveText(["Diagnostics", "JSON", "Status / Log"]);
@@ -3482,7 +3512,19 @@ 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"');
+      const exportedInputMappingPayload = JSON.parse(await page.locator("#inspectorOutput").textContent());
+      expect(exportedInputMappingPayload).toMatchObject({
+        engineInputModel: "src/engine/input/InputMap",
+        toolId: "input-mapping-v2",
+        version: 1
+      });
+      expect(exportedInputMappingPayload.payload).toBeUndefined();
+      expect(exportedInputMappingPayload.actions.length).toBeGreaterThan(0);
+      expect(exportedInputMappingPayload.actions.every((action) => action.inputs.length > 0)).toBe(true);
+      expect(exportedInputMappingPayload.actions.map((action) => action.action)).toContain("moveLeft");
+      expect(exportedInputMappingPayload.actions.map((action) => action.action)).not.toContain("confirm");
+      expect(exportedInputMappingPayload.actions.map((action) => action.action)).not.toContain("start");
+      expect(exportedInputMappingPayload.actions.some((action) => action.inputs.some((input) => input.binding === "KeyD"))).toBe(true);
       await expect(page.locator("#statusLog")).toHaveValue(/OK Input Mapping V2 JSON preview written\./);
       await page.evaluate(() => {
         Object.defineProperty(navigator, "clipboard", {
@@ -3495,7 +3537,9 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         });
       });
       await page.locator("#toolCopyJsonButton").click();
-      expect(await page.evaluate(() => window.__inputMappingV2Clipboard)).toContain('"toolId": "input-mapping-v2"');
+      const copiedInputMappingPayload = JSON.parse(await page.evaluate(() => window.__inputMappingV2Clipboard));
+      expect(copiedInputMappingPayload).toEqual(exportedInputMappingPayload);
+      expect(copiedInputMappingPayload.actions.every((action) => action.inputs.length > 0)).toBe(true);
       await expect(page.locator("#statusLog")).toHaveValue(/OK Mapping JSON copied\./);
       await expect(page.locator("#inputMappingV2ClearActionButton")).toHaveCount(0);
       expect(pageErrors).toEqual([]);

tools/input-mapping-v2/index.html

@@ -44,9 +44,9 @@ <h2 class="tools-platform-frame__eyebrow">Input Sources and Action Mapping</h2>
     </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>
-      <button id="workspaceExportManifestButton" type="button">Export manifest</button>
+      <button id="workspaceImportManifestButton" type="button">Import</button>
+      <button id="workspaceCopyManifestButton" type="button">Copy JSON</button>
+      <button id="workspaceExportManifestButton" type="button">JSON</button>
       <button id="returnToWorkspaceButton" type="button" hidden>Return to Workspace</button>
     </nav>
 
@@ -102,7 +102,7 @@ <h2 class="tools-platform-frame__eyebrow">Input Sources and Action Mapping</h2>
 
       </aside>
 
-      <section class="tool-starter__panel tool-starter__panel--center" aria-label="Action mappings">
+      <section class="tool-starter__panel tool-starter__panel--center" aria-label="Action mapping(s)">
         <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
           <div class="accordion-v2__header input-mapping-v2__capture-header" aria-expanded="true" aria-controls="captureInputContent">
             <span>Input Device(s)</span>
@@ -143,11 +143,11 @@ <h2 class="tools-platform-frame__eyebrow">Input Sources and Action Mapping</h2>
 
         <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>Action Mappings</span>
+            <span>Action Mapping(s)</span>
             <span class="accordion-v2__icon" aria-hidden="true">+</span>
           </button>
           <div id="mappingPanelContent" class="accordion-v2__content">
-            <div id="previewOutput" class="tool-starter__preview input-mapping-v2__mapping-list" aria-label="Action input mappings">
+            <div id="previewOutput" class="tool-starter__preview input-mapping-v2__mapping-list" aria-label="Action input mapping(s)">
               <p>No inputs captured yet.</p>
             </div>
             <hr class="input-mapping-v2__mapping-actions-separator">

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

@@ -74,9 +74,11 @@ export class ToolStarterApp {
     this.shell.mount();
     this.accordions.forEach((accordion) => accordion.mount());
     this.actionNav.mount({
-      onWorkspaceCopyManifest: () => this.statusLog.ok("Input Mapping V2 workspace copy action is ready."),
-      onWorkspaceExportManifest: () => this.statusLog.ok("Input Mapping V2 workspace export action is ready."),
-      onWorkspaceImportManifest: () => this.statusLog.ok("Input Mapping V2 workspace import action is ready.")
+      onWorkspaceCopyManifest: () => {
+        void this.copyJson();
+      },
+      onWorkspaceExportManifest: () => this.exportToolState(),
+      onWorkspaceImportManifest: () => this.importJson()
     });
     this.exportControl.mount({
       onCopyJson: () => {
@@ -1049,17 +1051,18 @@ export class ToolStarterApp {
   }
 
   exportToolState() {
-    this.inspector.showObject(this.state.toolState());
+    this.inspector.showObject(this.state.payload());
     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.");
+    this.statusLog.warn("Import disabled: Input Mapping V2 imports through Workspace Manager game.manifest launch data. Edit game.manifest.json or relaunch from Workspace Manager with updated tool data.");
   }
 
   async copyJson() {
-    const json = JSON.stringify(this.state.payload(), null, 2);
-    this.inspector.showObject(this.state.payload());
+    const payload = this.state.payload();
+    const json = JSON.stringify(payload, null, 2);
+    this.inspector.showObject(payload);
     if (typeof this.window.navigator?.clipboard?.writeText !== "function") {
       this.statusLog.warn("Mapping JSON preview written. Clipboard API is unavailable.");
       this.refreshActions();

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

@@ -1,3 +1,5 @@
+const IMPORT_DISABLED_REASON = "Import disabled: Input Mapping V2 imports through Workspace Manager game.manifest launch data. Edit game.manifest.json or relaunch from Workspace Manager with updated tool data.";
+
 export class ActionNavControl {
   constructor({
     locationRef = window.location,
@@ -23,6 +25,7 @@ export class ActionNavControl {
     onWorkspaceImportManifest
   }) {
     this.applyLaunchMode();
+    this.disableImportAction();
     this.workspaceImportManifestButton.addEventListener("click", onWorkspaceImportManifest);
     this.workspaceCopyManifestButton.addEventListener("click", onWorkspaceCopyManifest);
     this.workspaceExportManifestButton.addEventListener("click", onWorkspaceExportManifest);
@@ -45,10 +48,17 @@ export class ActionNavControl {
   }
 
   setToolActionsEnabled(isEnabled) {
+    this.disableImportAction();
     this.workspaceCopyManifestButton.disabled = !isEnabled;
     this.workspaceExportManifestButton.disabled = !isEnabled;
   }
 
+  disableImportAction() {
+    this.workspaceImportManifestButton.disabled = true;
+    this.workspaceImportManifestButton.dataset.disabledReason = IMPORT_DISABLED_REASON;
+    this.workspaceImportManifestButton.title = IMPORT_DISABLED_REASON;
+  }
+
   workspaceManagerUrl() {
     const url = new URL("../workspace-manager-v2/index.html", this.location.href);
     const params = new URLSearchParams(this.location.search);

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

@@ -1,3 +1,5 @@
+const IMPORT_DISABLED_REASON = "Import disabled: Input Mapping V2 imports through Workspace Manager game.manifest launch data. Edit game.manifest.json or relaunch from Workspace Manager with updated tool data.";
+
 export class ExportControl {
   constructor({ copyJsonButton, exportButton, importButton, locationRef = window.location, nav }) {
     this.copyJsonButton = copyJsonButton;
@@ -9,13 +11,14 @@ export class ExportControl {
 
   mount({ onCopyJson, onExport, onImport }) {
     this.applyLaunchMode();
+    this.disableImportAction();
     this.importButton.addEventListener("click", onImport);
     this.exportButton.addEventListener("click", onExport);
     this.copyJsonButton.addEventListener("click", onCopyJson);
   }
 
   setEnabled(isEnabled) {
-    this.importButton.disabled = !isEnabled;
+    this.disableImportAction();
     this.exportButton.disabled = !isEnabled;
     this.copyJsonButton.disabled = !isEnabled;
   }
@@ -24,4 +27,10 @@ export class ExportControl {
     const params = new URLSearchParams(this.location.search);
     this.nav.hidden = params.get("launch") === "workspace";
   }
+
+  disableImportAction() {
+    this.importButton.disabled = true;
+    this.importButton.dataset.disabledReason = IMPORT_DISABLED_REASON;
+    this.importButton.title = IMPORT_DISABLED_REASON;
+  }
 }

tools/input-mapping-v2/js/services/InputMappingState.js

@@ -178,11 +178,13 @@ export class InputMappingState {
       toolId: "input-mapping-v2",
       version: 1,
       engineInputModel: "src/engine/input/InputMap",
-      actions: this.actions().map((action) => ({
-        action: action.id,
-        label: action.label,
-        inputs: action.inputs.map(schemaInput)
-      }))
+      actions: this.actions()
+        .filter((action) => action.inputs.length > 0)
+        .map((action) => ({
+          action: action.id,
+          label: action.label,
+          inputs: action.inputs.map(schemaInput)
+        }))
     };
   }