Fix user controls profile creation, selected device clarity, and controls layout alignment - PR_26163_051-user-controls-profile-and-layout-alignment

Author: ToolboxAid

account/user-controls-page.js

@@ -361,15 +361,24 @@ export class AccountUserControlsPage {
   }
 
   createProfile(device) {
+    const knownProfiles = new Map();
+    this.readProfiles().forEach((profile) => {
+      knownProfiles.set(profile.id, profile);
+    });
+    this.profiles.forEach((profile) => {
+      knownProfiles.set(profile.id, profile);
+    });
+    this.profiles = [...knownProfiles.values()];
     const profile = this.uniqueProfileForDevice(device);
     if (!this.saveProfiles([profile, ...this.profiles])) {
       this.setStatus("FAIL: User Controls could not reach the shared DB adapter.");
       return;
     }
-    this.editingProfile = null;
+    const createdProfile = this.profiles.find((candidate) => candidate.id === profile.id) || profile;
+    this.editingProfile = { id: createdProfile.id, values: createdProfile };
     this.viewingDefaultFamily = "";
     this.renderProfiles();
-    this.setStatus(`PASS: Created ${profile.mappingProfile}. Use Edit to change it.`);
+    this.setStatus(`PASS: Created ${createdProfile.mappingProfile}. Editing the new profile.`);
   }
 
   renderDeviceSelect() {
@@ -418,41 +427,69 @@ export class AccountUserControlsPage {
   }
 
   selectedInputDeviceChoices() {
-    const fixedDevices = [
-      {
-        controllerId: "generic-keyboard",
-        deviceType: "Keyboard",
-        label: "Keyboard",
+    const choices = [];
+    const seenKeys = new Set();
+    const profilesByFamily = new Map([
+      ["Keyboard", []],
+      ["Mouse", []],
+      ["Gamepad", []],
+    ]);
+    this.profiles.forEach((profile) => {
+      profilesByFamily.get(this.profileListFamily(profile))?.push(profile);
+    });
+    const addChoice = (choice) => {
+      if (seenKeys.has(choice.selectionKey)) {
+        return;
+      }
+      seenKeys.add(choice.selectionKey);
+      choices.push(choice);
+    };
+    const addProfileChoice = (profile) => {
+      addChoice({
+        controllerId: profile.controllerId,
+        deviceType: this.profileListFamily(profile),
+        label: `${profile.controllerName} (${profile.mappingProfile})`,
+        profileId: profile.id,
+        selectionKey: `profile:${profile.id}`,
+        selectionType: "profile",
+      });
+    };
+    ["Keyboard", "Mouse"].forEach((family) => {
+      const profiles = profilesByFamily.get(family) || [];
+      if (profiles.length) {
+        profiles.forEach(addProfileChoice);
+        return;
+      }
+      const device = this.familyDevice(family);
+      addChoice({
+        controllerId: device.controllerId,
+        deviceType: family,
+        label: device.label,
         profileId: "",
-        selectionKey: "device:keyboard",
+        selectionKey: `device:${device.value}`,
         selectionType: "device",
-      },
-      {
-        controllerId: "generic-mouse",
-        deviceType: "Mouse",
-        label: "Mouse",
+      });
+    });
+    const gamepadProfiles = profilesByFamily.get("Gamepad") || [];
+    const profiledGamepadIds = new Set();
+    gamepadProfiles.forEach((profile) => {
+      profiledGamepadIds.add(profile.controllerId);
+      addProfileChoice(profile);
+    });
+    this.deviceOptions().forEach((device) => {
+      if (profiledGamepadIds.has(device.controllerId)) {
+        return;
+      }
+      addChoice({
+        controllerId: device.controllerId,
+        deviceType: "Gamepad",
+        label: device.label,
         profileId: "",
-        selectionKey: "device:mouse",
+        selectionKey: `device:gamepad:${keyFromText(device.controllerId || device.value)}`,
         selectionType: "device",
-      },
-    ];
-    const detectedGamepads = this.deviceOptions().map((device) => ({
-      controllerId: device.controllerId,
-      deviceType: "Gamepad",
-      label: device.label,
-      profileId: "",
-      selectionKey: `device:gamepad:${keyFromText(device.controllerId || device.value)}`,
-      selectionType: "device",
-    }));
-    const playerProfiles = this.profiles.map((profile) => ({
-      controllerId: profile.controllerId,
-      deviceType: this.profileListFamily(profile),
-      label: `${profile.controllerName} (${profile.mappingProfile})`,
-      profileId: profile.id,
-      selectionKey: `profile:${profile.id}`,
-      selectionType: "profile",
-    }));
-    return [...fixedDevices, ...detectedGamepads, ...playerProfiles];
+      });
+    });
+    return choices;
   }
 
   selectedInputDeviceConnected(selection) {

account/user-controls.html

@@ -21,10 +21,10 @@ <h1>User Controls</h1>
             </div>
         </section>
         <section class="section">
-            <div class="container account-panel">
+            <div class="container account-panel account-panel--fill">
                 <div data-partial="account-side-nav" data-partial-replace></div>
-                <div class="card">
-                    <div class="card-body content-stack">
+                <div class="card card--fill">
+                    <div class="card-body card-body--fill content-stack">
                         <div>
                             <div class="kicker">User Controls</div>
                             <h2>Physical Input Mapping</h2>

assets/theme-v2/css/accordion.css

@@ -22,6 +22,11 @@ summary::-webkit-details-marker {
   padding: var(--space-14)
 }
 
+.accordion-stack--left-right {
+  align-items: start;
+  grid-template-columns: repeat(2, minmax(var(--space-0), 1fr))
+}
+
 details.vertical-accordion {
   border: var(--border-standard);
   border-radius: var(--radius-lg);
@@ -306,3 +311,9 @@ body:not(.tool-focus-mode) .tool-center-panel>.accordion-fill-stack>.accordion-f
   min-height: var(--space-0);
   overflow: auto
 }
+
+@media(max-width:620px) {
+  .accordion-stack--left-right {
+    grid-template-columns: var(--one-column)
+  }
+}

assets/theme-v2/css/layout.css

@@ -376,6 +376,15 @@ body.tool-focus-mode .tool-workspace--table-scroll-focus .tool-table-scroll-regi
   gap: var(--space-18)
 }
 
+.account-panel--fill {
+  align-items: stretch;
+  min-height: 100%
+}
+
+.account-panel--fill>.card {
+  width: 100%
+}
+
 .admin-page-stack {
   display: grid;
   gap: var(--space-18);

assets/theme-v2/css/panels.css

@@ -38,6 +38,19 @@
   padding: var(--space-18)
 }
 
+.card--fill {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  width: 100%
+}
+
+.card-body--fill {
+  flex: 1 1 auto;
+  min-height: 100%;
+  width: 100%
+}
+
 .tool-workspace article.card>.card-body.content-stack {
   margin: var(--space-8)
 }

assets/theme-v2/partials/account-side-nav.html

@@ -1,8 +1,21 @@
 <aside class="side-menu" aria-label="Account pages" data-account-side-nav>
-    <a data-account-side-nav-link data-route="account" href="/account/index.html">Account Home</a>
-    <a data-account-side-nav-link data-route="account-achievements" href="/account/achievements.html">Achievements</a>
-    <a data-account-side-nav-link data-route="account-preferences" href="/account/preferences.html">Preferences</a>
-    <a data-account-side-nav-link data-route="account-profile" href="/account/profile.html">Profile</a>
-    <a data-account-side-nav-link data-route="account-security" href="/account/security.html">Security</a>
-    <a data-account-side-nav-link data-route="account-user-controls" href="/account/user-controls.html">User Controls</a>
+    <div class="accordion-stack accordion-stack--left-right" data-account-side-nav-accordion-layout="left-right">
+        <details class="vertical-accordion" open data-account-side-nav-accordion="left">
+            <summary>Account Pages</summary>
+            <div class="accordion-body content-stack content-stack--compact">
+                <a data-account-side-nav-link data-route="account" href="/account/index.html">Account Home</a>
+                <a data-account-side-nav-link data-route="account-achievements" href="/account/achievements.html">Achievements</a>
+                <a data-account-side-nav-link data-route="account-preferences" href="/account/preferences.html">Preferences</a>
+                <a data-account-side-nav-link data-route="account-profile" href="/account/profile.html">Profile</a>
+                <a data-account-side-nav-link data-route="account-security" href="/account/security.html">Security</a>
+                <a data-account-side-nav-link data-route="account-user-controls" href="/account/user-controls.html">User Controls</a>
+            </div>
+        </details>
+        <details class="vertical-accordion" data-account-side-nav-accordion="right">
+            <summary>Account Guidance</summary>
+            <div class="accordion-body content-stack content-stack--compact">
+                <p class="status">Manage profile, security, preferences, achievements, and controls from Account pages.</p>
+            </div>
+        </details>
+    </div>
 </aside>

docs_build/dev/reports/PR_26163_051-user-controls-profile-and-layout-alignment.md

@@ -0,0 +1,128 @@
+# PR_26163_051-user-controls-profile-and-layout-alignment
+
+## Branch Validation
+
+- PASS: Current branch is `main`.
+- Expected branch: `main`.
+
+## Impacted Lane
+
+- Account/User Controls runtime lane.
+- Toolbox Controls launch/render lane.
+- Theme V2 account side-nav/layout lane.
+- Workspace contract lane through legacy command `npm run test:workspace-v2`.
+
+## Requirement Checklist
+
+- PASS: Read `docs_build/dev/PROJECT_INSTRUCTIONS.md` before changes.
+- PASS: Verified current branch is `main` before changes.
+- PASS: `Create my profile` creates a brand-new profile and opens that new profile in edit mode.
+  - Evidence: Playwright creates `Keyboard Profile`, verifies the edit row opens immediately, saves it, then creates `Keyboard 2 Profile` and verifies the controller name input is `Keyboard 2`.
+- PASS: `Create my profile` does not open an existing profile.
+  - Evidence: Playwright verifies the first saved Keyboard row returns, then the second Create action opens the new `Keyboard 2` profile instead of the existing `Keyboard Profile`.
+- PASS: Selected Device is simplified and no longer lists duplicated raw devices plus saved profiles.
+  - Evidence: Playwright verifies saved `Keyboard`, `Mouse`, and gamepad profiles replace their raw device choices, while an unprofiled detected controller remains selectable.
+- PASS: `toolbox/controls` is aligned with the updated side accordion pattern where applicable.
+  - Evidence: Toolbox Controls keeps its left/right accordion columns and now exposes `data-controls-side-accordion="left"` and `data-controls-side-accordion="right"`; Playwright verifies both render.
+- PASS: `assets/theme-v2/partials/account-side-nav.html` has left/right accordion structure.
+  - Evidence: Account side nav now exposes `data-account-side-nav-accordion-layout="left-right"` plus independently toggled left and right `details.vertical-accordion` sections; Playwright verifies both open/close.
+- PASS: `account/user-controls.html` Account/User Controls card and body use 100% available space.
+  - Evidence: Reusable Theme V2 fill classes are applied and verified by Playwright on `.account-panel--fill`, `.card--fill`, and `.card-body--fill`.
+- PASS: Scope remained limited to account controls, toolbox controls alignment, Theme V2 partial/layout files, tests, and reports.
+
+## Changed Files
+
+- `account/user-controls-page.js`
+- `account/user-controls.html`
+- `assets/theme-v2/css/layout.css`
+- `assets/theme-v2/css/panels.css`
+- `assets/theme-v2/partials/account-side-nav.html`
+- `toolbox/controls/index.html`
+- `tests/playwright/tools/InputMappingV2Tool.spec.mjs`
+- `tests/playwright/account/AchievementsPage.spec.mjs`
+- `docs_build/dev/reports/playwright_v8_coverage_report.txt`
+- `docs_build/dev/reports/coverage_changed_js_guardrail.txt`
+- `docs_build/dev/reports/dependency_gating_report.md`
+- `docs_build/dev/reports/dependency_hydration_reuse_report.md`
+- `docs_build/dev/reports/execution_graph_reuse_report.md`
+- `docs_build/dev/reports/failure_fingerprint_report.md`
+- `docs_build/dev/reports/filesystem_scan_reduction_report.md`
+- `docs_build/dev/reports/incremental_validation_report.md`
+- `docs_build/dev/reports/lane_compilation_report.md`
+- `docs_build/dev/reports/lane_deduplication_report.md`
+- `docs_build/dev/reports/lane_input_validation_report.md`
+- `docs_build/dev/reports/lane_manifests/workspace-contract.json`
+- `docs_build/dev/reports/lane_runtime_optimization_report.md`
+- `docs_build/dev/reports/lane_snapshot_report.md`
+- `docs_build/dev/reports/lane_snapshots/workspace-contract.json`
+- `docs_build/dev/reports/lane_warm_start_report.md`
+- `docs_build/dev/reports/lane_warm_starts/workspace-contract.json`
+- `docs_build/dev/reports/monolith_trigger_removal_report.md`
+- `docs_build/dev/reports/persistent_lane_manifest_report.md`
+- `docs_build/dev/reports/playwright_discovery_ownership_report.md`
+- `docs_build/dev/reports/playwright_discovery_scope_report.md`
+- `docs_build/dev/reports/playwright_structure_audit.md`
+- `docs_build/dev/reports/retry_suppression_report.md`
+- `docs_build/dev/reports/slow_path_pruning_report.md`
+- `docs_build/dev/reports/static_validation_report.md`
+- `docs_build/dev/reports/targeted_file_manifest_report.md`
+- `docs_build/dev/reports/test_cleanup_performance_report.md`
+- `docs_build/dev/reports/test_cleanup_routing_report.md`
+- `docs_build/dev/reports/testing_lane_execution_report.md`
+- `docs_build/dev/reports/validation_cache_report.md`
+- `docs_build/dev/reports/zero_browser_preflight_report.md`
+- Required review artifacts are generated separately:
+  - `docs_build/dev/reports/codex_review.diff`
+  - `docs_build/dev/reports/codex_changed_files.txt`
+
+## Validation Performed
+
+- PASS: `node --check account/user-controls-page.js`
+- PASS: `node --check tests/playwright/tools/InputMappingV2Tool.spec.mjs`
+- PASS: `node --check tests/playwright/account/AchievementsPage.spec.mjs`
+- PASS: HTML restriction scan:
+  - `rg --pcre2 -n "<script(?![^>]+src=)|<style|\son[a-z]+\s*=|style\s*=" account/user-controls.html toolbox/controls/index.html assets/theme-v2/partials/account-side-nav.html`
+  - Result: no inline script/style/handler matches.
+- PASS: Targeted Playwright:
+  - `npx playwright test tests/playwright/tools/InputMappingV2Tool.spec.mjs tests/playwright/account/AchievementsPage.spec.mjs`
+  - Result: 9 passed.
+- PASS: Requested workspace command:
+  - `npm run test:workspace-v2`
+  - Result: 5 passed.
+  - Note: command name is legacy; this routes the current workspace-contract validation lane.
+
+## Playwright Result
+
+- PASS: Targeted Controls/User Controls and shared Account side-nav coverage passed.
+- PASS: `npm run test:workspace-v2` passed.
+
+## Coverage
+
+- PASS: `docs_build/dev/reports/playwright_v8_coverage_report.txt` produced.
+- PASS: Changed runtime JS was exercised:
+  - `(93%) account/user-controls-page.js`
+  - `(94%) toolbox/controls/controls.js`
+- PASS: Coverage report states no low-coverage changed runtime JS warnings.
+- WARN: Changed Playwright spec files are not browser runtime JavaScript and are not collected as V8 runtime coverage; this is expected.
+
+## Skipped Lanes
+
+- SKIP: Full samples smoke test.
+  - Reason: explicitly requested not to run full samples smoke; no sample JSON or sample runtime files changed.
+- SKIP: Engine input lane.
+  - Reason: no `src/engine/input` implementation changed in this PR.
+- SKIP: Full repo Playwright suite.
+  - Reason: targeted Account/User Controls, Toolbox Controls, shared account side-nav, and requested workspace-contract lane covered the affected surfaces.
+
+## Manual Validation Steps
+
+1. Open `/account/user-controls.html` as a user session.
+2. Click Keyboard `Create my profile`; verify the newly created profile opens in edit mode.
+3. Save it, then click Keyboard `Create my profile` again; verify the new edit row is `Keyboard 2`, not the existing Keyboard profile.
+4. Create Mouse and detected game controller profiles; verify Selected Device shows saved profile choices without duplicate raw device entries for those same devices.
+5. Open and close the Account side-nav left and right accordion sections.
+6. Open `/toolbox/controls/index.html`; verify Game Controls renders with left and right side accordions and expected default rows.
+
+## Samples Decision
+
+- SKIP: Full samples smoke test was intentionally not run because the PR does not touch samples and the user explicitly requested not to run it.