Polish Controls device refresh profile edit flow and gold action highlight - PR_26161_030-controls-device-refresh-profile-polish

Author: ToolboxAid

assets/theme-v2/css/typography.css

@@ -131,6 +131,10 @@ dd {
   padding-block: var(--space-6)
 }
 
+.text-gold {
+  color: var(--gold)
+}
+
 .lede {
   color: var(--muted);
   font-size: var(--font-size-2xl);

docs_build/dev/reports/codex_changed_files.txt

@@ -1,7 +1,9 @@
+assets/theme-v2/css/typography.css
 docs_build/dev/reports/codex_changed_files.txt
 docs_build/dev/reports/codex_review.diff
-docs_build/dev/reports/controls-controller-profile-edit-mode-report.md
+docs_build/dev/reports/controls-device-refresh-profile-polish-report.md
 docs_build/dev/reports/coverage_changed_js_guardrail.txt
 docs_build/dev/reports/playwright_v8_coverage_report.txt
 tests/playwright/tools/InputMappingV2Tool.spec.mjs
 toolbox/controls/controls.js
+toolbox/controls/index.html

docs_build/dev/reports/codex_review.diff

@@ -0,0 +1,61 @@
+# PR_26161_030 Controls Device Refresh Profile Polish Report
+
+## Scope
+- Moved Refresh Devices into Controller Profile next to Device Type.
+- Added creator-facing Devices inspector guidance.
+- Updated Create Profile From Default so it saves a DB-backed profile and immediately opens that profile in edit mode.
+- Changed controller input edit-mode identification to Theme V2 gold text on the selected Action only.
+
+## Branch Validation
+- PASS: current branch verified as `main` before edits.
+
+## Impacted Lane
+- Controls / Input Mapping.
+
+## Playwright Impacted
+- Yes.
+
+## Validation Performed
+- PASS: `node --check toolbox/controls/controls.js`
+- PASS: `node --check tests/playwright/tools/InputMappingV2Tool.spec.mjs`
+- PASS: `Select-String -Path toolbox/controls/index.html -Pattern '<style',' onclick=',' onchange=',' oninput=',' onsubmit='`
+- PASS: `git diff --check`
+- PASS: `npx playwright test tests/playwright/tools/InputMappingV2Tool.spec.mjs`
+
+## Manual Validation Steps
+- Open Controls and confirm Refresh Devices appears to the left of Controller Profile Device Type.
+- Open Inspector > Devices and confirm the guidance reads: `Press a button on the controller, then refresh Device Type.`
+- Connect or mock a gamepad, refresh devices, choose the gamepad, then click Create Profile From Default.
+- Confirm the DB-backed profile appears immediately in edit mode with generated input/action dropdowns visible.
+- Press a controller input while editing and confirm only the selected Action text turns Theme V2 gold.
+- Confirm the selected input row does not receive a background, border, or layout highlight.
+- Assign profile Actions, save, reload, and confirm assignments persist.
+
+## Skipped Lanes
+- Full samples validation skipped by request.
+- Broad workspace, engine, auth, production DB, and sample lanes skipped because this PR only changes Controls UI/runtime behavior, one reusable Theme V2 text utility, and targeted Playwright coverage exercises the impacted lane.
+
+## Runtime Engine Behavior
+- PASS: no production game runtime or engine behavior changed.
+
+## Theme V2 Styling Note
+- PASS: added reusable `.text-gold` in Theme V2 typography because the imported Theme V2 bundle did not provide a text-only gold utility. No page-local CSS, inline styles, tool CSS, background, border, or layout styling was added.
+
+## Requirement Checklist
+- PASS: Read `docs_build/dev/PROJECT_INSTRUCTIONS.md` before edits.
+- PASS: Verified branch `main` before edits.
+- PASS: Continued from PR_26161_029 behavior.
+- PASS: Controls status remains Wireframe.
+- PASS: Controls data remains DB-backed through the shared DB/mock adapter only.
+- PASS: Refresh Devices appears left of Controller Profile > Device Type.
+- PASS: Inspector > Devices guidance appears at the top.
+- PASS: Create Profile From Default creates a DB-backed controller profile.
+- PASS: Create Profile From Default immediately places the newly added profile into edit mode.
+- PASS: Generated input/action dropdowns are visible after Create Profile From Default.
+- PASS: Controller input press in edit mode identifies the selected Action with Theme V2 gold text only.
+- PASS: No background, border, layout, or extra visual effect is added for the selected controller input.
+- PASS: Controller profile edit-mode behavior, generated input list, action dropdowns, custom Actions, reset confirmation, Input Mapping accordion, Controller Profile accordion, and DB persistence are preserved.
+- PASS: No sample JSON alignment, auth behavior, production game runtime behavior, or unrelated rewrites were added.
+- PASS: Theme V2 only; no inline CSS, inline JS, script/style blocks, or inline event handlers were added.
+- PASS: Targeted Controls/Input Mapping Playwright validation passed.
+- PASS: Playwright V8 coverage report produced for changed runtime JavaScript.

docs_build/dev/reports/controls-device-refresh-profile-polish-report.md

@@ -6,7 +6,7 @@ Missing changed runtime JS files are WARN, not FAIL.
 Source: Playwright/Chromium built-in V8 coverage from the active Playwright run.
 
 Changed runtime JS files considered:
-(94%) toolbox/controls/controls.js - executed lines 1686/1686; executed functions 186/197
+(94%) toolbox/controls/controls.js - executed lines 1698/1698; executed functions 187/198
 
 Guardrail warnings:
 (100%) none - no changed runtime JS coverage warnings

docs_build/dev/reports/coverage_changed_js_guardrail.txt

@@ -17,14 +17,14 @@ Exercised tool entry points detected:
 (59%) Theme V2 Shared JS - exercised 2 runtime JS files
 
 Changed runtime JS files covered:
-(94%) toolbox/controls/controls.js - executed lines 1686/1686; executed functions 186/197
+(94%) toolbox/controls/controls.js - executed lines 1698/1698; executed functions 187/198
 
 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
-(94%) toolbox/controls/controls.js - executed lines 1686/1686; executed functions 186/197
+(94%) toolbox/controls/controls.js - executed lines 1698/1698; executed functions 187/198
 (100%) toolbox/controls/controls-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
 

docs_build/dev/reports/playwright_v8_coverage_report.txt

@@ -256,11 +256,20 @@ test("Controls Input Mapping launch panels, defaults, diagnostics, and workspace
     await expect(page.locator("[data-input-mapping-accordion] summary")).toHaveText("Input Mapping");
     await expect(page.locator("[data-controller-profile-accordion] summary")).toHaveText("Controller Profile");
     await expect(page.locator(".tool-center-panel [data-controller-profile-planning]")).toBeVisible();
+    const controllerDeviceSelection = page.locator("[data-controller-device-selection]");
+    await expect(controllerDeviceSelection.locator("[data-input-refresh-devices]")).toBeVisible();
+    expect(await controllerDeviceSelection.evaluate((node) =>
+      Array.from(node.children).slice(0, 2).map((child) =>
+        child.matches("[data-input-refresh-devices]") ? "Refresh Devices" : child.textContent.trim().split(/\s+/)[0],
+      ),
+    )).toEqual(["Refresh Devices", "Device"]);
     await expect(page.getByRole("heading", { name: "Mappings" })).toBeVisible();
     await expect(page.locator("[data-input-state-explanation]")).toHaveText("State: Active means the mapping is available to the game. Disabled means the mapping is saved but ignored by the game until re-enabled.");
     await expect(page.getByText("Mapping JSON", { exact: true })).toHaveCount(0);
     await expect(page.locator("[data-input-mapping-json]")).toHaveCount(0);
     await expect(page.getByText("Devices", { exact: true })).toBeVisible();
+    await expect(page.locator("[data-input-device-guidance]")).toHaveText("Press a button on the controller, then refresh Device Type.");
+    await expect(page.locator("aside").last().locator("[data-input-refresh-devices]")).toHaveCount(0);
     await expect(page.getByText("Status", { exact: true })).toBeVisible();
     await expect(page.locator("[data-input-return-workspace]")).toBeVisible();
     await expect(page.locator("[data-controller-profile-table] th")).toHaveText([
@@ -706,7 +715,23 @@ test("Controls generates controller profiles, shows fallback status, and mapping
     });
     const activeProfileInput = page.locator("[data-controller-profile-input-pair][data-controller-profile-input-active='true']");
     await expect(activeProfileInput.locator("strong")).toHaveText("Button0");
-    await expect(activeProfileInput.locator("[data-controller-profile-input-assigned-action]")).toHaveText("Selected Action: Fire");
+    const activeActionText = activeProfileInput.locator("[data-controller-profile-input-assigned-action]");
+    await expect(activeActionText).toHaveText("Selected Action: Fire");
+    await expect(activeActionText).toHaveClass(/text-gold/);
+    await expect(activeActionText).toHaveCSS("color", "rgb(255, 200, 87)");
+    await expect(activeProfileInput).not.toHaveClass(/feedback/);
+    expect(await activeProfileInput.evaluate((node) => {
+      const style = getComputedStyle(node);
+      return {
+        backgroundColor: style.backgroundColor,
+        borderTopStyle: style.borderTopStyle,
+        borderTopWidth: style.borderTopWidth,
+      };
+    })).toEqual({
+      backgroundColor: "rgba(0, 0, 0, 0)",
+      borderTopStyle: "none",
+      borderTopWidth: "0px",
+    });
     await expect(editingActionsRow.locator("[data-controller-profile-input-pair]").nth(1)).not.toHaveAttribute("data-controller-profile-input-active", "true");
     await expect(editingActionsRow.locator("[data-controller-profile-input-pair]").nth(1).locator("[data-controller-profile-input-assigned-action]")).toHaveText("Assigned Action: Move Right");
 
@@ -732,6 +757,8 @@ test("Controls generates controller profiles, shows fallback status, and mapping
     profiles = await controllerProfileRecords(page);
     expect(profiles).toHaveLength(1);
     expect(profiles[0].mappingProfile).toBe("Arcade Test Pad Profile");
+    await expect(page.locator("[data-controller-profile-editing-row]")).toContainText("Arcade Test Pad Profile");
+    await expect(page.locator("[data-controller-profile-editing-actions-row] [data-controller-profile-input-action]")).toHaveCount(18);
 
     expect(profiles).toHaveLength(1);
 

tests/playwright/tools/InputMappingV2Tool.spec.mjs

@@ -857,8 +857,9 @@ function updateProfileInputAssignedAction(select) {
 
 function clearControllerProfileInputHighlight() {
   elements.controllerProfileList?.querySelectorAll("[data-controller-profile-input-pair]").forEach((pair) => {
-    pair.classList.remove("feedback");
     delete pair.dataset.controllerProfileInputActive;
+    const status = pair.querySelector("[data-controller-profile-input-assigned-action]");
+    status?.classList.remove("text-gold");
     updateProfileInputAssignedAction(pair.querySelector("[data-controller-profile-input-action]"));
   });
 }
@@ -874,11 +875,12 @@ function highlightControllerProfileInput(inputName) {
   if (!pair) {
     return;
   }
-  pair.classList.add("feedback");
   pair.dataset.controllerProfileInputActive = "true";
   const select = pair.querySelector("[data-controller-profile-input-action]");
   updateProfileInputAssignedAction(select);
-  setText(elements.controllerProfileStatus, `${inputName} selected. ${pair.querySelector("[data-controller-profile-input-assigned-action]")?.textContent || "Assigned Action: Action Required"}.`);
+  const status = pair.querySelector("[data-controller-profile-input-assigned-action]");
+  status?.classList.add("text-gold");
+  setText(elements.controllerProfileStatus, `${inputName} selected. ${status?.textContent || "Assigned Action: Action Required"}.`);
 }
 
 function updateControllerProfileInputHighlight() {
@@ -1600,6 +1602,16 @@ function addProfileForDevice(device, source = "detected") {
     renderControllerProfiles();
     return;
   }
+  const savedProfile = controllerProfiles.find((candidate) => candidate.id === profile.id) || profile;
+  if (source === "default-gamepad") {
+    profileEditingRow = {
+      id: savedProfile.id,
+      values: savedProfile,
+    };
+    renderAll(`${savedProfile.mappingProfile} saved. Assign Actions for generated profile inputs.`);
+    setText(elements.controllerProfileStatus, `Editing ${savedProfile.mappingProfile} controller profile.`);
+    return;
+  }
   profileEditingRow = null;
   renderAll(`${profile.mappingProfile} saved. Action Required for generated profile inputs.`);
 }

toolbox/controls/controls.js

@@ -127,7 +127,8 @@ <h3>Mappings</h3>
                                                 <h3>Controller Profiles</h3>
                                             </div>
                                             <p>Plan how gamepad identities will match saved mapping profiles.</p>
-                                            <div class="content-cluster" aria-label="Controller device selection">
+                                            <div class="content-cluster" aria-label="Controller device selection" data-controller-device-selection>
+                                                <button class="btn" type="button" data-input-refresh-devices>Refresh Devices</button>
                                                 <label>
                                                     Device Type
                                                     <select data-controller-device-select></select>
@@ -174,9 +175,7 @@ <h2>Inspector</h2>
                             <details class="vertical-accordion" open>
                                 <summary>Devices</summary>
                                 <div class="accordion-body content-stack">
-                                    <div class="content-cluster" aria-label="Device diagnostics controls">
-                                        <button class="btn" type="button" data-input-refresh-devices>Refresh Devices</button>
-                                    </div>
+                                    <p class="status" data-input-device-guidance>Press a button on the controller, then refresh Device Type.</p>
                                     <ul data-input-source-diagnostics></ul>
                                 </div>
                             </details>