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);