Make Controls input mapping table-first with inline add edit flow - PR_26161_017-controls-table-first-input

Author: ToolboxAid

docs_build/dev/reports/codex_changed_files.txt

@@ -1,30 +1,20 @@
 # git status --short
 M docs_build/dev/reports/coverage_changed_js_guardrail.txt
  M docs_build/dev/reports/playwright_v8_coverage_report.txt
- M src/dev-runtime/admin/header-nav.local.html
- M src/dev-runtime/guest-seeds/tool-metadata-inventory.js
- M src/dev-runtime/persistence/mock-db-store.js
- M src/dev-runtime/server/mock-api-router.mjs
+ M tests/playwright/tools/InputMappingV2Tool.spec.mjs
  M toolbox/controls/index.html
-?? docs_build/dev/reports/controls-input-mapping-rebuild-report.md
-?? src/dev-runtime/persistence/tool-repositories/input-mapping-mock-repository.js
-?? tests/playwright/tools/InputMappingV2Tool.spec.mjs
-?? toolbox/input-mapping-v2/
+ M toolbox/input-mapping-v2/index.html
+ M toolbox/input-mapping-v2/input-mapping-v2.js
+?? docs_build/dev/reports/controls-table-first-input-report.md
 
 # git ls-files --others --exclude-standard
-docs_build/dev/reports/controls-input-mapping-rebuild-report.md
-src/dev-runtime/persistence/tool-repositories/input-mapping-mock-repository.js
-tests/playwright/tools/InputMappingV2Tool.spec.mjs
-toolbox/input-mapping-v2/index.html
-toolbox/input-mapping-v2/input-mapping-api-client.js
-toolbox/input-mapping-v2/input-mapping-v2.js
+docs_build/dev/reports/controls-table-first-input-report.md
 
 # git diff --stat
-.../dev/reports/coverage_changed_js_guardrail.txt  | 11 ++-
- .../dev/reports/playwright_v8_coverage_report.txt  | 35 ++++----
- src/dev-runtime/admin/header-nav.local.html        |  2 +-
- .../guest-seeds/tool-metadata-inventory.js         | 13 +--
- src/dev-runtime/persistence/mock-db-store.js       |  5 ++
- src/dev-runtime/server/mock-api-router.mjs         | 20 ++++-
- toolbox/controls/index.html                        | 94 +++++++++++++++++++---
- 7 files changed, 148 insertions(+), 32 deletions(-)
+.../dev/reports/coverage_changed_js_guardrail.txt  |  4 +-
+ .../dev/reports/playwright_v8_coverage_report.txt  | 12 ++--
+ tests/playwright/tools/InputMappingV2Tool.spec.mjs | 68 ++++++++++++++++++++++
+ toolbox/controls/index.html                        | 14 +++--
+ toolbox/input-mapping-v2/index.html                | 14 +++--
+ toolbox/input-mapping-v2/input-mapping-v2.js       |  5 +-
+ 6 files changed, 97 insertions(+), 20 deletions(-)

docs_build/dev/reports/codex_review.diff

@@ -0,0 +1,92 @@
+# PR_26161_017 Controls Table First Input Report
+
+## Branch Validation
+
+PASS
+
+- Current branch: `main`
+- Expected branch: `main`
+- Worktree was clean before PR_26161_017 edits.
+
+## Scope
+
+- Impacted lane: Controls/Input Mapping tool UI/runtime and targeted Controls/Input Mapping Playwright coverage.
+- Playwright impacted: Yes.
+- Runtime engine behavior changed: No.
+- Samples validation: Skipped as requested. No sample JSON alignment, auth behavior, production DB behavior, or engine runtime behavior changed.
+
+## Requirement Checklist
+
+- PASS: Read `docs_build/dev/PROJECT_INSTRUCTIONS.md` before edits.
+- PASS: Verified current git branch was `main` before edits.
+- PASS: Continued from PR_26161_016.
+- PASS: Moved Controls toward table-first editing like Objects by placing mapping row creation controls in the mappings table footer.
+- PASS: Mappings table supports inline add/edit for `Object`, `Action`, `Input Device`, `Input`, `State`, and `Actions`.
+- PASS: `Add Mapping` is below the mappings table.
+- PASS: Adding a row shows `Cancel` in the right-side action cell of the new row.
+- PASS: `Add Mapping` is disabled while a new or edited row is active, then re-enabled after save or cancel.
+- PASS: Keyboard, mouse, and gamepad capture behavior remains in place.
+- PASS: Default actions remain sorted alphabetically.
+- PASS: DB/mock-adapter persistence remains in place.
+- PASS: Workspace return behavior remains in place.
+- PASS: UAT-required panels remain: Actions, Capture, Mappings, Mapping JSON, Devices, and Status.
+- PASS: Did not add sample JSON alignment, auth behavior, production DB behavior, or unrelated tool rewrites.
+- PASS: Kept Theme V2 only; no inline CSS, inline JS, script/style blocks, or inline event handlers.
+
+## Testing Performed
+
+- PASS: `node --check toolbox/input-mapping-v2/input-mapping-v2.js`
+- PASS: `node --check toolbox/input-mapping-v2/input-mapping-api-client.js`
+- PASS: `node --check src/dev-runtime/persistence/tool-repositories/input-mapping-mock-repository.js`
+- PASS: `node --check tests/playwright/tools/InputMappingV2Tool.spec.mjs`
+- PASS: `rg --pcre2 -n '<script(?![^>]*\bsrc=)|<style\b|\son[a-z]+\s*=' toolbox/input-mapping-v2/index.html toolbox/controls/index.html`
+  - Expected no matches; command exited with no matches.
+- PASS: `git diff --check`
+  - Result: PASS. Git reported line-ending normalization warnings only.
+- PASS: `npx playwright test tests/playwright/tools/InputMappingV2Tool.spec.mjs --workers=1 --reporter=line`
+  - Result: 4 passed.
+
+## Playwright Behavior Covered
+
+- PASS: UAT launch route still renders Actions, Capture, Mappings, Mapping JSON, Devices, and Status.
+- PASS: `Add Mapping` appears once and is inside the mappings table footer.
+- PASS: `Reset Mappings` remains available in the mappings table footer.
+- PASS: Inline add creates a row with editable Object, Action, Input Device, Input, State, and right-side Actions cells.
+- PASS: New row action cell shows `Save` and `Cancel`, with `Cancel` on the right.
+- PASS: `Add Mapping` disables while a new row is active.
+- PASS: Cancel removes the unsaved row and re-enables `Add Mapping`.
+- PASS: Saving an inline row persists it to `input_mapping_records`.
+- PASS: Editing an existing mapping uses an inline replacement row and re-enables `Add Mapping` after save.
+- PASS: Saved edits persist after reload.
+- PASS: Keyboard capture still maps `KeyA` to the selected `Move Left` action.
+- PASS: Clicking the `Keyboard KeyA` token still deletes the persisted mapping.
+- PASS: Default actions remain alphabetically sorted.
+- PASS: Workspace return behavior remains covered by the UAT launch test.
+
+## Playwright V8 Coverage
+
+- Report: `docs_build/dev/reports/playwright_v8_coverage_report.txt`
+- Current PR browser runtime JavaScript coverage:
+  - `(92%) toolbox/input-mapping-v2/input-mapping-v2.js - executed lines 703/703; executed functions 80/87`
+  - `(100%) toolbox/input-mapping-v2/input-mapping-api-client.js - executed lines 12/12; executed functions 2/2`
+- Advisory WARN entries remain for PR_26161_016 server/dev-runtime files because the coverage helper includes changed JS from `HEAD`; PR_26161_017 did not modify those files.
+
+## Manual Validation Steps
+
+1. Open `/toolbox/input-mapping-v2/index.html?workspace=demo-project`.
+2. Confirm Actions, Capture, Mappings, Mapping JSON, Devices, and Status panels appear.
+3. Confirm `Add Mapping` and `Reset Mappings` are below the mappings table.
+4. Click `Add Mapping` and confirm the new row appears with `Save` and `Cancel` in the right-side Actions cell.
+5. Confirm `Add Mapping` is disabled while the new row is active.
+6. Click `Cancel` and confirm the unsaved row disappears and `Add Mapping` is enabled again.
+7. Add and save a row, reload, and confirm the mapping persists.
+8. Edit the saved row, save, reload, and confirm the edit persists.
+9. Select `Move Left`, click `Capture Keyboard`, press `A`, and confirm `Keyboard KeyA` appears in the table and JSON.
+10. Click the `Keyboard KeyA` token and confirm the mapping is deleted.
+
+## Skipped Lanes
+
+- Full samples validation: SKIP, explicitly requested and no samples changed.
+- Full workspace/project suite: SKIP, no broad Project Workspace behavior changed; workspace return remains covered by targeted Controls/Input Mapping Playwright.
+- Engine runtime tests: SKIP, no `src/engine/input` behavior changed.
+- Auth and production DB validation: SKIP, no auth or production DB behavior changed; existing shared mock DB persistence behavior remains covered by targeted Playwright.

docs_build/dev/reports/controls-table-first-input-report.md

@@ -10,13 +10,11 @@ Changed runtime JS files considered:
 (0%) src/dev-runtime/persistence/mock-db-store.js - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
 (0%) src/dev-runtime/persistence/tool-repositories/input-mapping-mock-repository.js - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
 (0%) src/dev-runtime/server/mock-api-router.mjs - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
-(0%) toolbox/objects/objects.js - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
-(81%) toolbox/input-mapping-v2/input-mapping-v2.js - executed lines 700/700; executed functions 64/79
+(92%) toolbox/input-mapping-v2/input-mapping-v2.js - executed lines 703/703; executed functions 80/87
 (100%) toolbox/input-mapping-v2/input-mapping-api-client.js - executed lines 12/12; executed functions 2/2
 
 Guardrail warnings:
 (0%) src/dev-runtime/guest-seeds/tool-metadata-inventory.js - WARNING: changed runtime JS file missing from coverage; advisory only
 (0%) src/dev-runtime/persistence/mock-db-store.js - WARNING: changed runtime JS file missing from coverage; advisory only
 (0%) src/dev-runtime/persistence/tool-repositories/input-mapping-mock-repository.js - WARNING: changed runtime JS file missing from coverage; advisory only
 (0%) src/dev-runtime/server/mock-api-router.mjs - WARNING: changed runtime JS file missing from coverage; advisory only
-(0%) toolbox/objects/objects.js - WARNING: changed runtime JS file missing from coverage; advisory only

docs_build/dev/reports/coverage_changed_js_guardrail.txt

@@ -12,7 +12,7 @@ Note: entry percentages use function coverage when available, otherwise line cov
 Note: coverage entries are aggregated across every page/tool where coverageReporter.start(page) and coverageReporter.stop(page) ran.
 
 Exercised tool entry points detected:
-(80%) Toolbox Index - exercised 4 runtime JS files
+(88%) Toolbox Index - exercised 4 runtime JS files
 (0%) Tool Template V2 - not exercised by this Playwright run
 (59%) Theme V2 Shared JS - exercised 2 runtime JS files
 
@@ -21,16 +21,15 @@ Changed runtime JS files covered:
 (0%) src/dev-runtime/persistence/mock-db-store.js - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
 (0%) src/dev-runtime/persistence/tool-repositories/input-mapping-mock-repository.js - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
 (0%) src/dev-runtime/server/mock-api-router.mjs - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
-(0%) toolbox/objects/objects.js - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
-(81%) toolbox/input-mapping-v2/input-mapping-v2.js - executed lines 700/700; executed functions 64/79
+(92%) toolbox/input-mapping-v2/input-mapping-v2.js - executed lines 703/703; executed functions 80/87
 (100%) toolbox/input-mapping-v2/input-mapping-api-client.js - executed lines 12/12; executed functions 2/2
 
 Files with executed line/function counts where available:
 (53%) src/engine/api/server-api-client.js - executed lines 159/159; executed functions 10/19
 (58%) assets/theme-v2/js/gamefoundry-partials.js - executed lines 603/603; executed functions 30/52
 (64%) assets/theme-v2/js/tool-display-mode.js - executed lines 209/209; executed functions 9/14
 (75%) toolbox/tool-registry-api-client.js - executed lines 152/152; executed functions 21/28
-(81%) toolbox/input-mapping-v2/input-mapping-v2.js - executed lines 700/700; executed functions 64/79
+(92%) toolbox/input-mapping-v2/input-mapping-v2.js - executed lines 703/703; executed functions 80/87
 (100%) toolbox/input-mapping-v2/input-mapping-api-client.js - executed lines 12/12; executed functions 2/2
 (100%) toolbox/objects/objects-api-client.js - executed lines 10/10; executed functions 2/2
 
@@ -39,15 +38,12 @@ Uncovered or low-coverage changed JS files:
 (0%) src/dev-runtime/persistence/mock-db-store.js - WARNING: uncovered changed runtime JS file; advisory only
 (0%) src/dev-runtime/persistence/tool-repositories/input-mapping-mock-repository.js - WARNING: uncovered changed runtime JS file; advisory only
 (0%) src/dev-runtime/server/mock-api-router.mjs - WARNING: uncovered changed runtime JS file; advisory only
-(0%) toolbox/objects/objects.js - WARNING: uncovered changed runtime JS file; advisory only
 
 Changed JS files considered:
 (0%) src/dev-runtime/guest-seeds/tool-metadata-inventory.js - changed JS file not collected as browser runtime coverage
 (0%) src/dev-runtime/persistence/mock-db-store.js - changed JS file not collected as browser runtime coverage
 (0%) src/dev-runtime/persistence/tool-repositories/input-mapping-mock-repository.js - changed JS file not collected as browser runtime coverage
 (0%) src/dev-runtime/server/mock-api-router.mjs - changed JS file not collected as browser runtime coverage
 (0%) tests/playwright/tools/InputMappingV2Tool.spec.mjs - changed JS file not collected as browser runtime coverage
-(0%) tests/playwright/tools/ObjectsTool.spec.mjs - changed JS file not collected as browser runtime coverage
-(0%) toolbox/objects/objects.js - changed JS file not collected as browser runtime coverage
-(81%) toolbox/input-mapping-v2/input-mapping-v2.js - changed JS file with browser V8 coverage
+(92%) toolbox/input-mapping-v2/input-mapping-v2.js - changed JS file with browser V8 coverage
 (100%) toolbox/input-mapping-v2/input-mapping-api-client.js - changed JS file with browser V8 coverage

docs_build/dev/reports/playwright_v8_coverage_report.txt

@@ -142,6 +142,9 @@ test("Controls Input Mapping launch panels, defaults, diagnostics, and workspace
       "State",
       "Actions",
     ]);
+    await expect(page.locator("[data-input-add-mapping]")).toHaveCount(1);
+    await expect(page.locator("[data-input-mapping-table] tfoot [data-input-add-mapping]")).toBeVisible();
+    await expect(page.locator("[data-input-mapping-table] tfoot [data-input-reset-mappings]")).toBeVisible();
     await expect(page.locator("[data-input-action-select] option")).toHaveText(DEFAULT_ACTION_LABELS);
     await expect(page.locator("[data-input-default-actions] li")).toHaveText(DEFAULT_ACTION_LABELS);
     expect(DEFAULT_ACTION_LABELS).toEqual([...DEFAULT_ACTION_LABELS].sort((left, right) => left.localeCompare(right)));
@@ -181,6 +184,71 @@ test("Controls Input Mapping launch panels, defaults, diagnostics, and workspace
   }
 });
 
+test("Controls Input Mapping supports table-first inline add, cancel, save, and edit", async ({ page }) => {
+  const failures = await openInputMappingPage(page);
+
+  try {
+    const addButton = page.locator("[data-input-mapping-table] tfoot [data-input-add-mapping]");
+    await expect(addButton).toBeEnabled();
+
+    await addButton.click();
+    await expect(addButton).toBeDisabled();
+    await expect(page.locator("[data-input-editing-row]")).toHaveCount(1);
+    await expect(page.locator("[data-input-editing-row] td")).toHaveCount(6);
+    await expect(page.locator("[data-input-editing-row] td").last().locator("button")).toHaveText(["Save", "Cancel"]);
+    await expect(page.locator("[data-input-editing-row] td").last().locator("button").last()).toHaveText("Cancel");
+
+    await page.locator("[data-input-editing-row] [data-input-cancel-mapping]").click();
+    await expect(page.locator("[data-input-editing-row]")).toHaveCount(0);
+    await expect(addButton).toBeEnabled();
+    await expect(page.locator("[data-input-mapping-list]")).toContainText("No mappings added yet.");
+
+    await addButton.click();
+    await page.locator("[data-input-row-action]").selectOption("fire");
+    await page.locator("[data-input-row-device]").selectOption("keyboard");
+    await page.locator("[data-input-row-binding]").fill("KeyF");
+    await page.locator("[data-input-save-mapping]").click();
+    await expect(addButton).toBeEnabled();
+    await expect(page.locator("[data-input-editing-row]")).toHaveCount(0);
+    await expect(page.locator("[data-input-mapping-list] tr")).toHaveCount(1);
+    await expect(page.locator("[data-input-mapping-list]")).toContainText("Fire");
+    await expect(page.locator("[data-input-delete-token]")).toHaveText("Keyboard KeyF");
+    let records = await inputMappingRecords(page);
+    expect(records).toHaveLength(1);
+    expect(records[0]).toMatchObject({
+      action: "fire",
+      binding: "KeyF",
+      source: "keyboard",
+      state: "Active",
+    });
+
+    await page.locator("[data-input-edit-mapping]").click();
+    await expect(page.locator("[data-input-editing-row]")).toHaveCount(1);
+    await expect(page.locator("[data-input-mapping-row]")).toHaveCount(0);
+    await expect(addButton).toBeDisabled();
+    await page.locator("[data-input-row-binding]").fill("KeyG");
+    await page.locator("[data-input-save-mapping]").click();
+    await expect(addButton).toBeEnabled();
+    await expect(page.locator("[data-input-delete-token]")).toHaveText("Keyboard KeyG");
+    records = await inputMappingRecords(page);
+    expect(records).toHaveLength(1);
+    expect(records[0]).toMatchObject({
+      action: "fire",
+      binding: "KeyG",
+      source: "keyboard",
+      state: "Active",
+    });
+
+    await page.reload({ waitUntil: "networkidle" });
+    await expect(page.locator("[data-input-delete-token]")).toHaveText("Keyboard KeyG");
+
+    await expectNoPageFailures(failures);
+  } finally {
+    await workspaceV2CoverageReporter.stop(page);
+    await failures.server.close();
+  }
+});
+
 test("Controls Input Mapping captures KeyA, deletes token, and persists through shared DB", async ({ page }) => {
   const failures = await openInputMappingPage(page);
 

tests/playwright/tools/InputMappingV2Tool.spec.mjs

@@ -41,10 +41,6 @@ <h2>Controls</h2>
                                         Object
                                         <select data-input-object-select></select>
                                     </label>
-                                    <div class="content-cluster" aria-label="Input mapping action controls">
-                                        <button class="btn" type="button" data-input-add-mapping>Add Mapping</button>
-                                        <button class="btn" type="button" data-input-reset-mappings>Reset Mappings</button>
-                                    </div>
                                     <ul data-input-default-actions></ul>
                                 </div>
                             </details>
@@ -90,6 +86,16 @@ <h3>Mappings</h3>
                                             </tr>
                                         </thead>
                                         <tbody data-input-mapping-list></tbody>
+                                        <tfoot>
+                                            <tr>
+                                                <td colspan="6">
+                                                    <div class="content-cluster" aria-label="Input mapping table actions" data-input-mapping-table-actions>
+                                                        <button class="btn" type="button" data-input-add-mapping>Add Mapping</button>
+                                                        <button class="btn" type="button" data-input-reset-mappings>Reset Mappings</button>
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        </tfoot>
                                     </table>
                                 </div>
                             </div>