From 2bb16d11613470851720e950b28d8efc9a6d56ef Mon Sep 17 00:00:00 2001
From: Edwin van den Houdt <eho@respellion.nl>
Date: Thu, 23 Jul 2026 16:18:18 +0200
Subject: [PATCH] fix(dev): dev switcher reflects the current role/scenario in
 the dropdowns

The WP-33 panel's <select [value]> was applied before the @for options existed, so
the matching option was never selected (dropdown always showed the first item).
Move selection to [selected] on each <option>, and read role/scenario via getters
(currentRole()/currentScenario()) so the dropdowns reflect the active value whenever
the panel opens.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../ui/debug-state/debug-state.component.ts    | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/ui/debug-state/debug-state.component.ts b/src/app/shared/ui/debug-state/debug-state.component.ts
index 488756e..8a6f190 100644
--- a/src/app/shared/ui/debug-state/debug-state.component.ts
+++ b/src/app/shared/ui/debug-state/debug-state.component.ts
@@ -95,17 +95,17 @@ import { redactProfile } from './mask';
           <div class="switchers">
             <label
               >role
-              <select [value]="role" (change)="switchRole($any($event.target).value)">
+              <select (change)="switchRole($any($event.target).value)">
                 @for (r of roles; track r) {
-                  <option [value]="r">{{ r }}</option>
+                  <option [value]="r" [selected]="r === role">{{ r }}</option>
                 }
               </select>
             </label>
             <label
               >scenario
-              <select [value]="scenario" (change)="switchScenario($any($event.target).value)">
+              <select (change)="switchScenario($any($event.target).value)">
                 @for (s of scenarios; track s) {
-                  <option [value]="s">{{ s }}</option>
+                  <option [value]="s" [selected]="s === scenario">{{ s }}</option>
                 }
               </select>
             </label>
@@ -140,8 +140,14 @@ export class DebugStateComponent {
   // read per-request in interceptors, so a reload re-runs them and re-fetches decisions.
   protected readonly roles = ROLES;
   protected readonly scenarios = SCENARIOS;
-  protected readonly role = currentRole();
-  protected readonly scenario = currentScenario();
+  // Getters so the dropdowns reflect the CURRENT value whenever the panel is opened
+  // (not just the value at component construction).
+  protected get role() {
+    return currentRole();
+  }
+  protected get scenario() {
+    return currentScenario();
+  }
 
   switchRole(r: Role): void {
     setRole(r);