@franzzemen/brokenstock-shell 0.8.2 → 0.9.0

package/fesm2022/franzzemen-brokenstock-shell.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, signal, computed, Injectable, inject, input, Directive, isDevMode, effect, untracked, HostListener, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, DestroyRef, NgZone, viewChild, afterNextRender } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, signal, computed, Injectable, inject, input, Directive, isDevMode, effect, untracked, HostListener, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, DestroyRef, NgZone, viewChild, afterNextRender, output } from '@angular/core';
 import * as i2$1 from '@angular/router';
 import { Router, RouterLink, RouterLinkActive, ActivatedRoute, RouterOutlet } from '@angular/router';
 import { BEARER_TOKEN_REGEX, HttpHeader, USERNAME_REGEX, PASSWORD_REGEX } from '@franzzemen/utility';
 import { validateCredentials } from '@franzzemen/identity';
-import { HttpClient } from '@angular/common/http';
-import { catchError, from, switchMap, throwError, firstValueFrom } from 'rxjs';
-import * as i3 from '@angular/forms';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { firstValueFrom, catchError, from, switchMap, throwError } from 'rxjs';
+import * as i1$2 from '@angular/forms';
 import { NG_VALIDATORS, FormsModule } from '@angular/forms';
 import { Marked } from 'marked';
 import { gfmHeadingId } from 'marked-gfm-heading-id';
@@ -23,14 +23,14 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import * as i5 from '@angular/cdk/text-field';
 import { TextFieldModule } from '@angular/cdk/text-field';
-import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatFormField, MatLabel, MatFormFieldModule } from '@angular/material/form-field';
 import * as i4 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
 import * as i6 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i7 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i1$2 from '@angular/material/dialog';
+import * as i2$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
 
 /**
@@ -342,6 +342,77 @@ function decideRenewal(before, current) {
     return 'renew';
 }
 
+/*
+Created by Franz Zemen 2026-10-17
+License Type: UNLICENSED
+
+Authenticator sign-in — what the browser sees (authenticator-sign-in.prd.md).
+*/
+/**
+ * The one message for a pause (D8). The server sends no time and the screen invents none.
+ */
+const TOO_MANY_ATTEMPTS = 'Too many attempts.';
+/** Plain words for each refusal, shown on the sign-in screen and in the code dialog. */
+function authenticatorMessage(reason) {
+    switch (reason) {
+        case 'code-required': return 'Enter the 6-digit code from your authenticator app.';
+        case 'invalid-code': return 'That code did not work. Try the current one.';
+        case 'too-many-attempts': return TOO_MANY_ATTEMPTS;
+        case 'authenticator-not-set-up': return 'This account has no authenticator set up. Ask the administrator to reset it.';
+        case 'setup-required': return 'Scan this QR code with your authenticator app, then enter the 6-digit code it shows.';
+        default: return 'Unable to sign in';
+    }
+}
+/** The text file the Download button saves (D7). */
+function recoveryCodesFile(appName, username, codes, now = new Date()) {
+    return [
+        `${appName} recovery codes${username ? ` for ${username}` : ''}`,
+        `Generated ${now.toISOString()}`,
+        '',
+        'Each code works once, in place of the 6-digit code from your authenticator app.',
+        'Keep this file somewhere safe and offline. Anyone with these codes and your password can sign in.',
+        '',
+        ...codes,
+        '',
+    ].join('\n');
+}
+
+/**
+ * A refusal from an authenticator route, carrying the server's `reason`
+ * (authenticator-sign-in.prd.md). `message` is plain words for the screen.
+ */
+class AuthenticatorError extends Error {
+    constructor(reason, message, status) {
+        super(message);
+        this.reason = reason;
+        this.status = status;
+        this.name = 'AuthenticatorError';
+    }
+}
+/** Sign-in rejected because the next step is a code (or setting one up), not because anything failed. */
+const CODE_STEP = 'code-step';
+/**
+ * The sign-in request body, exactly as sent (multiple-devices E8, authenticator-sign-in.prd.md).
+ *
+ * Fields appear only when they carry a decision: the route's body schema is strict,
+ * and `additional: false` on a first attempt would be a statement where silence is
+ * meant. A code typed now wins; otherwise a ticket from a 409 that followed a
+ * correct code stands in for it (the server accepts a code only once, D20).
+ */
+function buildLoginBody(credentials, force, options, signInTicket) {
+    const proof = options.code
+        ? { code: options.code }
+        : options.recoveryCode
+            ? { recoveryCode: options.recoveryCode }
+            : signInTicket ? { signInTicket } : {};
+    return {
+        ...credentials,
+        ...(force ? { force: true } : {}),
+        ...(options.additional ? { additional: true } : {}),
+        ...(options.endSessionIds?.length ? { endSessionIds: options.endSessionIds } : {}),
+        ...proof,
+    };
+}
 /** Name of the cross-window renewal lock (PRD D5). */
 const RENEWAL_LOCK = 'brokenstock.session.renew';
 /** How long a window waits for the renewing window to publish a token (PRD D5). */
@@ -349,6 +420,11 @@ const PEER_RENEWAL_WAIT_MS = 10_000;
 /** How long the renewal request itself may take before it is abandoned (PRD D5). */
 const RENEWAL_TIMEOUT_MS = 15_000;
 class AuthenticationService {
+    /**
+     * The ticket from a 409 that followed a correct code. The retry sends it in place
+     * of the code, which the server will not accept twice (D20). Never shown.
+     */
+    #signInTicket;
     #refreshing;
     #auth;
     #httpClient;
@@ -381,6 +457,25 @@ class AuthenticationService {
         ...(ngDevMode ? [{ debugName: "additionalSignInAllowed" }] : /* istanbul ignore next */ []));
         this.pendingCredentials = signal(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pendingCredentials" }] : /* istanbul ignore next */ []));
+        // ----- Authenticator (authenticator-sign-in.prd.md) -----
+        /** The extra step the sign-in screen is on after the password was accepted. */
+        this.codeStep = signal('none', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "codeStep" }] : /* istanbul ignore next */ []));
+        /** Inside an AWS-opened setup window: the QR and key to show (D9, D10). */
+        this.setupChallenge = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "setupChallenge" }] : /* istanbul ignore next */ []));
+        /** New recovery codes to show ONCE, with a Download button (D7). Cleared when acknowledged. */
+        this.recoveryCodesToShow = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recoveryCodesToShow" }] : /* istanbul ignore next */ []));
+        /** Recovery codes left, from the last sign-in or status read. */
+        this.recoveryCodesLeft = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recoveryCodesLeft" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the AWS-set bypass is on for this account (D12). Drives the banner on
+         * every screen. Yes/no only: the server never says when it ends.
+         */
+        this.bypassActive = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bypassActive" }] : /* istanbul ignore next */ []));
         this.#refreshing = null;
         this.#auth = 'Bearer ..';
         this.#httpClient = inject(HttpClient);
@@ -471,6 +566,18 @@ class AuthenticationService {
         this.conflictSessions.set(undefined);
         this.additionalSignInAllowed.set(false);
         this.pendingCredentials.set(undefined);
+        this.#signInTicket = undefined;
+    }
+    /** Back to the password form from the code or setup step. */
+    cancelCodeStep() {
+        this.codeStep.set('none');
+        this.setupChallenge.set(undefined);
+        this.pendingCredentials.set(undefined);
+        this.#signInTicket = undefined;
+    }
+    /** The new recovery codes have been seen (and, we hope, downloaded). */
+    acknowledgeRecoveryCodes() {
+        this.recoveryCodesToShow.set(undefined);
     }
     /**
      * The session is gone and cannot be recovered — renewal failed permanently,
@@ -527,15 +634,7 @@ class AuthenticationService {
         this.#thinkingService.startThinking();
         return new Promise((resolve, reject) => {
             this.authenticating.set(true);
-            // Fields are added only when they carry a decision. The route's body
-            // schema is strict, and sending `additional: false` on a first attempt
-            // would be a statement where silence is meant.
-            const body = {
-                ...credentials,
-                ...(force ? { force: true } : {}),
-                ...(options.additional ? { additional: true } : {}),
-                ...(options.endSessionIds?.length ? { endSessionIds: options.endSessionIds } : {}),
-            };
+            const body = buildLoginBody(credentials, force, options, this.#signInTicket);
             const subscription = this.#httpClient
                 .post(this.#authUrls.login, body, {
                 headers: {
@@ -559,6 +658,14 @@ class AuthenticationService {
                             return;
                         }
                         this.#adoptToken(auth);
+                        const authenticator = response.body.authenticator;
+                        this.recoveryCodesLeft.set(authenticator?.recoveryCodesLeft);
+                        this.bypassActive.set(authenticator?.bypassActive === true);
+                        if (authenticator?.recoveryCodes?.length)
+                            this.recoveryCodesToShow.set(authenticator.recoveryCodes);
+                        this.codeStep.set('none');
+                        this.setupChallenge.set(undefined);
+                        this.#signInTicket = undefined;
                         this.authenticated.set(true);
                         this.pendingCredentials.set(undefined);
                         resolve();
@@ -574,7 +681,17 @@ class AuthenticationService {
                 },
                 error: (err) => {
                     try {
+                        const reason = err.error?.reason;
                         if (err.status === 409) {
+                            // After a correct code: the retry carries this instead (D20), and
+                            // new recovery codes from a setup must not be lost to this panel.
+                            if (typeof err.error?.signInTicket === 'string')
+                                this.#signInTicket = err.error.signInTicket;
+                            if (Array.isArray(err.error?.recoveryCodes))
+                                this.recoveryCodesToShow.set(err.error.recoveryCodes);
+                            // The code is done; the session choice is all that is left on screen.
+                            this.codeStep.set('none');
+                            this.setupChallenge.set(undefined);
                             this.conflictSessions.set(err.error?.activeSessions ?? []);
                             // Absent means false: an older back end that does not send this
                             // does not permit signing in alongside, so the screen must not
@@ -583,6 +700,27 @@ class AuthenticationService {
                             this.pendingCredentials.set(credentials);
                             reject('conflict');
                         }
+                        else if (reason === 'code-required') {
+                            this.codeStep.set('code');
+                            this.pendingCredentials.set(credentials);
+                            reject(CODE_STEP);
+                        }
+                        else if (reason === 'setup-required') {
+                            this.codeStep.set('setup');
+                            this.setupChallenge.set({ qr: err.error.qr, key: err.error.key });
+                            this.pendingCredentials.set(credentials);
+                            reject(CODE_STEP);
+                        }
+                        else if (reason) {
+                            // invalid-code / too-many-attempts / authenticator-not-set-up:
+                            // stay on the step the user is on; say what happened, in plain words.
+                            if (reason === 'too-many-attempts' || reason === 'authenticator-not-set-up')
+                                this.#signInTicket = undefined;
+                            reject(authenticatorMessage(reason));
+                        }
+                        else if (err.status === 401) {
+                            reject('Wrong username or password');
+                        }
                         else {
                             reject(err.message ?? 'Unable to login');
                         }
@@ -596,6 +734,68 @@ class AuthenticationService {
             });
         });
     }
+    // ---------------------------------------------------------------------------
+    // Authenticator settings and the on-demand check (authenticator-sign-in.prd.md)
+    //
+    // All under the sign-in URL (`/login/…` or `/admin/login/…`), on the auth
+    // worker. A wrong code here is 403, never 401, so the interceptor does not
+    // read it as an expired session.
+    // ---------------------------------------------------------------------------
+    /** Whether an authenticator is set up, codes left, and whether the bypass is on. Refreshes the banner. */
+    async authenticatorStatus() {
+        const status = await this.#authenticatorCall('GET', 'authenticator');
+        this.bypassActive.set(status.bypassActive);
+        this.recoveryCodesLeft.set(status.recoveryCodesLeft);
+        return status;
+    }
+    /** Begin setting up (or replacing) the authenticator: the password again, plus a current code when replacing (D5). */
+    startAuthenticatorSetup(password, current = {}) {
+        return this.#authenticatorCall('POST', 'authenticator/start', { password, ...current });
+    }
+    /** Finish setup with the first code from the newly scanned app. Returns the 10 recovery codes, once. */
+    async confirmAuthenticatorSetup(code) {
+        const { recoveryCodes } = await this.#authenticatorCall('POST', 'authenticator/confirm', { code });
+        this.recoveryCodesLeft.set(recoveryCodes.length);
+        return recoveryCodes;
+    }
+    /** Ten new recovery codes; the old ones stop working (D7). Needs a current code. */
+    async reissueRecoveryCodes(code) {
+        const { recoveryCodes } = await this.#authenticatorCall('POST', 'recovery-codes', { code });
+        this.recoveryCodesLeft.set(recoveryCodes.length);
+        return recoveryCodes;
+    }
+    /**
+     * The on-demand check (D15): proves the code again on this session and returns
+     * when it was recorded. `purpose` is a short label for the log, e.g.
+     * 'arm-live-trading' — it changes nothing. The bypass never satisfies this.
+     */
+    async verifyCode(entry, purpose) {
+        const { codeVerifiedAtEpoch } = await this.#authenticatorCall('POST', 'verify-code', { ...entry, ...(purpose ? { purpose } : {}) });
+        return codeVerifiedAtEpoch;
+    }
+    async #authenticatorCall(method, path, body) {
+        const url = `${this.#authUrls.login}/${path}`;
+        const headers = {
+            [HttpHeader.Authorization]: this.auth,
+            [HttpHeader.AppContext]: 'brokenstock',
+            ...(body !== undefined ? { [HttpHeader.ContentType]: 'application/json' } : {}),
+        };
+        try {
+            return method === 'GET'
+                ? await firstValueFrom(this.#httpClient.get(url, { headers }))
+                : await firstValueFrom(this.#httpClient.post(url, body, { headers }));
+        }
+        catch (err) {
+            if (err instanceof HttpErrorResponse) {
+                const reason = err.error?.reason;
+                const message = reason
+                    ? authenticatorMessage(reason)
+                    : err.status === 400 ? 'Check what you typed and try again.' : (err.error?.message ?? 'Something went wrong');
+                throw new AuthenticatorError(reason, message, err.status);
+            }
+            throw err;
+        }
+    }
     /**
      * Renews the session, coordinating with the other windows of this browser.
      *
@@ -701,6 +901,12 @@ class AuthenticationService {
         this.userSession.set(undefined);
         this.conflictSessions.set(undefined);
         this.pendingCredentials.set(undefined);
+        this.codeStep.set('none');
+        this.setupChallenge.set(undefined);
+        this.recoveryCodesToShow.set(undefined);
+        this.recoveryCodesLeft.set(undefined);
+        this.bypassActive.set(false);
+        this.#signInTicket = undefined;
         this.#auth = 'Bearer ..';
         this.#store.clear();
         this.#router.navigate(['/login']).catch(console.error);
@@ -3385,7 +3591,7 @@ class CommandTerminal {
         this.inputEl()?.nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CommandTerminal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: CommandTerminal, isStandalone: true, selector: "shell-command-terminal", inputs: { focusOnAppear: { classPropertyName: "focusOnAppear", publicName: "focusOnAppear", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["terminalInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"terminal\">\n  <div class=\"terminal-input-row\">\n    <span class=\"prompt\">$</span>\n    <div class=\"input-wrapper\">\n      @if (ghostText()) {\n        <input\n          class=\"ghost-input\"\n          type=\"text\"\n          [value]=\"ghostText()\"\n          disabled\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n        />\n      }\n      <input\n        #terminalInput\n        class=\"terminal-input\"\n        type=\"text\"\n        [ngModel]=\"currentInput()\"\n        (ngModelChange)=\"onInputChange($event)\"\n        (keydown.enter)=\"onSubmit()\"\n        (keydown.tab)=\"onTab($any($event))\"\n        (keydown.escape)=\"dismissHelp()\"\n        placeholder=\"Type a command...\"\n        [disabled]=\"isProcessing()\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n      />\n    </div>\n  </div>\n  <div class=\"terminal-output\">\n    @for (entry of history(); track entry.result.timestamp) {\n      @if (entry.input) {\n        <div class=\"terminal-line\">\n          <span class=\"prompt\">$</span>\n          <span class=\"command-text\">{{ entry.input }}@if ((entry.repeatCount ?? 1) > 1) { <span class=\"repeat-count\">(\u00D7{{ entry.repeatCount }})</span>}</span>\n        </div>\n      }\n      @if (entry.result.message) {\n        <div class=\"terminal-line\" [class]=\"getSeverityClass(entry.result)\">{{ entry.result.message }}</div>\n      }\n    }\n  </div>\n</div>\n", styles: [".terminal{display:flex;flex-direction:column;height:100%;background-color:var(--color-terminal-bg);border-top:1px solid var(--color-surface-border);font-family:Roboto Mono,Courier New,monospace;font-size:.85rem}.terminal-output{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column}.terminal-line{line-height:1.6;color:var(--color-text-primary);white-space:pre-wrap}.terminal-line.error{color:var(--color-loss)}.terminal-line.warning{color:var(--color-warning)}.terminal-line.info{color:var(--color-info)}.prompt{color:var(--color-terminal-prompt);margin-right:8px;font-weight:700}.command-text{color:var(--color-terminal-text)}.repeat-count{color:var(--color-secondary-info);opacity:.6;margin-left:4px}.terminal-input-row{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid var(--color-surface-border)}.input-wrapper{flex:1;display:grid}.ghost-input,.terminal-input{grid-area:1 / 1;font-family:inherit;font-size:inherit;line-height:normal;margin:0;padding:0;border:none;background:transparent;outline:none;-webkit-appearance:none;appearance:none;width:100%}.ghost-input{color:var(--color-secondary-info);opacity:.3;pointer-events:none}.terminal-input{color:var(--color-terminal-text);caret-color:var(--color-terminal-prompt)}.terminal-input::placeholder{color:var(--color-secondary-info);opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: CommandTerminal, isStandalone: true, selector: "shell-command-terminal", inputs: { focusOnAppear: { classPropertyName: "focusOnAppear", publicName: "focusOnAppear", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["terminalInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"terminal\">\n  <div class=\"terminal-input-row\">\n    <span class=\"prompt\">$</span>\n    <div class=\"input-wrapper\">\n      @if (ghostText()) {\n        <input\n          class=\"ghost-input\"\n          type=\"text\"\n          [value]=\"ghostText()\"\n          disabled\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n        />\n      }\n      <input\n        #terminalInput\n        class=\"terminal-input\"\n        type=\"text\"\n        [ngModel]=\"currentInput()\"\n        (ngModelChange)=\"onInputChange($event)\"\n        (keydown.enter)=\"onSubmit()\"\n        (keydown.tab)=\"onTab($any($event))\"\n        (keydown.escape)=\"dismissHelp()\"\n        placeholder=\"Type a command...\"\n        [disabled]=\"isProcessing()\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n      />\n    </div>\n  </div>\n  <div class=\"terminal-output\">\n    @for (entry of history(); track entry.result.timestamp) {\n      @if (entry.input) {\n        <div class=\"terminal-line\">\n          <span class=\"prompt\">$</span>\n          <span class=\"command-text\">{{ entry.input }}@if ((entry.repeatCount ?? 1) > 1) { <span class=\"repeat-count\">(\u00D7{{ entry.repeatCount }})</span>}</span>\n        </div>\n      }\n      @if (entry.result.message) {\n        <div class=\"terminal-line\" [class]=\"getSeverityClass(entry.result)\">{{ entry.result.message }}</div>\n      }\n    }\n  </div>\n</div>\n", styles: [".terminal{display:flex;flex-direction:column;height:100%;background-color:var(--color-terminal-bg);border-top:1px solid var(--color-surface-border);font-family:Roboto Mono,Courier New,monospace;font-size:.85rem}.terminal-output{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column}.terminal-line{line-height:1.6;color:var(--color-text-primary);white-space:pre-wrap}.terminal-line.error{color:var(--color-loss)}.terminal-line.warning{color:var(--color-warning)}.terminal-line.info{color:var(--color-info)}.prompt{color:var(--color-terminal-prompt);margin-right:8px;font-weight:700}.command-text{color:var(--color-terminal-text)}.repeat-count{color:var(--color-secondary-info);opacity:.6;margin-left:4px}.terminal-input-row{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid var(--color-surface-border)}.input-wrapper{flex:1;display:grid}.ghost-input,.terminal-input{grid-area:1 / 1;font-family:inherit;font-size:inherit;line-height:normal;margin:0;padding:0;border:none;background:transparent;outline:none;-webkit-appearance:none;appearance:none;width:100%}.ghost-input{color:var(--color-secondary-info);opacity:.3;pointer-events:none}.terminal-input{color:var(--color-terminal-text);caret-color:var(--color-terminal-prompt)}.terminal-input::placeholder{color:var(--color-secondary-info);opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CommandTerminal, decorators: [{
             type: Component,
@@ -3395,6 +3601,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 const MIN_TERMINAL_HEIGHT = 80;
 const MAX_TERMINAL_RATIO = 0.6;
 const DEFAULT_TERMINAL_HEIGHT = 160;
+/**
+ * How often a signed-in window re-reads whether the AWS-set bypass is on
+ * (authenticator-sign-in.prd.md D12). The server never says when it ends, so the
+ * banner goes away on the first read after it has.
+ */
+const BYPASS_RECHECK_MS = 2 * 60 * 1000;
 class Shell {
     constructor() {
         this.#thinkingService = inject(ThinkingService);
@@ -3427,6 +3639,21 @@ class Shell {
          */
         this.consoleFocusOnAppear = computed(() => !this.isPhone(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "consoleFocusOnAppear" }] : /* istanbul ignore next */ []));
+        /** "Sign-in code check is off." on every screen while the bypass is on (D12). */
+        this.bypassActive = this.#authService.bypassActive;
+        /**
+         * Keeps `bypassActive` current while signed in: once now (a window restored from
+         * storage never saw the sign-in response) and then every two minutes.
+         */
+        this.#bypassWatch = effect(onCleanup => {
+            if (!this.isAuthenticated())
+                return;
+            const read = () => { this.#authService.authenticatorStatus().catch(() => undefined); };
+            read();
+            const timer = setInterval(read, BYPASS_RECHECK_MS);
+            onCleanup(() => clearInterval(timer));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#bypassWatch" }] : /* istanbul ignore next */ []));
         this.terminalHeight = signal(`${DEFAULT_TERMINAL_HEIGHT}px`, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "terminalHeight" }] : /* istanbul ignore next */ []));
         this.isDragging = signal(false, /* @ts-ignore */
@@ -3459,6 +3686,11 @@ class Shell {
     #authService;
     #terminalVisibility;
     #phoneLayout;
+    /**
+     * Keeps `bypassActive` current while signed in: once now (a window restored from
+     * storage never saw the sign-in response) and then every two minutes.
+     */
+    #bypassWatch;
     closePhoneMenu() {
         this.#phoneLayout.closeMenu();
     }
@@ -3500,13 +3732,97 @@ class Shell {
         document.addEventListener('touchcancel', this.#onTouchEnd);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Shell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Shell, isStandalone: true, selector: "shell-root", ngImport: i0, template: "<div class=\"shell\" [style.--terminal-height]=\"terminalHeight()\" [class.is-dragging]=\"isDragging()\" [class.terminal-hidden]=\"!terminalVisible()\">\n  <shell-status-bar class=\"shell-status\" [class.disabled-zone]=\"isThinking()\">\n    <ng-content />\n  </shell-status-bar>\n  @if (isAuthenticated() && !isPhone()) {\n    <shell-side-menu class=\"shell-menu\" [class.disabled-zone]=\"isThinking()\" />\n  }\n  <shell-main-content class=\"shell-main\" [class.full-width]=\"!isAuthenticated()\" />\n  @if (terminalVisible()) {\n    <!-- On a phone too (scanner-phone-display D10), but never given the cursor there: see Shell.consoleFocusOnAppear. -->\n    <div class=\"shell-resize\" [class.dragging]=\"isDragging()\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n    <shell-command-terminal class=\"shell-terminal\" [class.disabled-zone]=\"isThinking()\" [focusOnAppear]=\"consoleFocusOnAppear()\" />\n  }\n  @if (isAuthenticated() && phoneMenuOpen()) {\n    <!-- Phone menu (scanner-phone-display D9): the icon column's items, opened from the \u2630 button. -->\n    <div class=\"phone-menu-backdrop\" (click)=\"closePhoneMenu()\"></div>\n    <shell-side-menu\n      id=\"shell-phone-menu\"\n      class=\"phone-menu\"\n      [class.disabled-zone]=\"isThinking()\"\n      [drawer]=\"true\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Menu\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      (keydown.escape)=\"closePhoneMenu()\"\n    />\n  }\n  <faq-modal />\n\n  @if (helpOverlay(); as helpText) {\n    <div class=\"help-backdrop\" (click)=\"dismissHelp()\">\n      <div class=\"help-panel\" (click)=\"$event.stopPropagation()\" role=\"dialog\" aria-label=\"Command help\">\n        <div class=\"help-panel-header\">\n          <span class=\"help-panel-title\">Help</span>\n          <button class=\"help-panel-close\" type=\"button\" (click)=\"dismissHelp()\" aria-label=\"Close help\">\u2715</button>\n        </div>\n        <div class=\"help-panel-content\">{{ helpText }}</div>\n        <div class=\"help-panel-footer\">\n          <span>Tip: for most commands you can swap the first and second words \u2014 e.g. \"disable user\" works the same as \"user disable\"</span>\n          <span class=\"help-panel-footer-dismiss\">Press Escape, click outside, or start typing to close</span>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".shell{position:relative;display:grid;grid-template-areas:\"status   status\" \"menu     main\" \"resize   resize\" \"terminal terminal\";grid-template-columns:56px 1fr;grid-template-rows:48px 1fr 4px var(--terminal-height, 160px);height:100vh;height:100dvh;width:100vw;overflow:hidden;background-color:var(--color-surface-dark)}.shell.terminal-hidden{grid-template-rows:48px 1fr 0 0}.shell-status{grid-area:status}.shell-menu{grid-area:menu}.shell-main{grid-area:main;overflow:hidden}.shell-main.full-width{grid-column:1 / -1}.shell-resize{grid-area:resize;cursor:row-resize;touch-action:none;background-color:var(--color-surface-border);transition:background-color .15s ease}.shell-resize:hover,.shell-resize.dragging{background-color:var(--color-interactive)}.shell-terminal{grid-area:terminal}.shell.is-dragging{user-select:none;-webkit-user-select:none}.disabled-zone{pointer-events:none;opacity:.4;transition:opacity .2s ease}.help-backdrop{position:absolute;inset:0;z-index:100;background-color:#000000a6;display:flex;align-items:center;justify-content:center}.help-panel{background-color:var(--color-surface, #161b22);border:2px solid var(--color-interactive, #00e5ff);border-radius:4px;width:70%;max-width:820px;max-height:75vh;display:flex;flex-direction:column;font-family:Roboto Mono,Courier New,monospace;font-size:.85rem}.help-panel-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background-color:var(--color-surface-light, #21262d);border-bottom:1px solid var(--color-interactive, #00e5ff);border-radius:2px 2px 0 0;flex-shrink:0}.help-panel-title{color:var(--color-interactive, #00e5ff);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.75rem}.help-panel-close{background:none;border:1px solid var(--color-surface-border, #30363d);color:var(--color-secondary-info, #9e9e9e);cursor:pointer;padding:2px 8px;font-size:.9rem;line-height:1.4;border-radius:3px;transition:color .15s ease,border-color .15s ease}.help-panel-close:hover{color:var(--color-text-primary, #ffffff);border-color:var(--color-interactive, #00e5ff)}.help-panel-content{flex:1;overflow-y:auto;padding:16px 20px;color:var(--color-text-primary, #ffffff);white-space:pre-wrap;line-height:1.7}.help-panel-footer{padding:6px 16px;background-color:var(--color-surface-light, #21262d);border-top:1px solid var(--color-surface-border, #30363d);border-radius:0 0 2px 2px;color:var(--color-secondary-info, #9e9e9e);font-size:.75rem;flex-shrink:0;display:flex;flex-direction:column;gap:2px}.help-panel-footer-dismiss{opacity:.6}@media(max-width:819.98px){.shell{grid-template-areas:\"status\" \"main\" \"resize\" \"terminal\";grid-template-columns:minmax(0,1fr)}.shell-menu{display:none}}.phone-menu-backdrop{position:absolute;inset:48px 0 0;z-index:50;background-color:color-mix(in srgb,var(--color-surface-dark) 70%,transparent)}.phone-menu{position:absolute;top:48px;bottom:0;left:0;z-index:51;display:block;width:min(280px,85vw);box-shadow:4px 0 16px color-mix(in srgb,var(--color-surface-dark) 60%,transparent)}\n"], dependencies: [{ kind: "component", type: StatusBar, selector: "shell-status-bar" }, { kind: "component", type: SideMenu, selector: "shell-side-menu", inputs: ["drawer"] }, { kind: "component", type: MainContent, selector: "shell-main-content" }, { kind: "component", type: CommandTerminal, selector: "shell-command-terminal", inputs: ["focusOnAppear"] }, { kind: "component", type: FaqModal, selector: "faq-modal" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Shell, isStandalone: true, selector: "shell-root", ngImport: i0, template: "<div class=\"shell\" [style.--terminal-height]=\"terminalHeight()\" [class.is-dragging]=\"isDragging()\" [class.terminal-hidden]=\"!terminalVisible()\">\n  <shell-status-bar class=\"shell-status\" [class.disabled-zone]=\"isThinking()\">\n    <ng-content />\n  </shell-status-bar>\n  @if (isAuthenticated() && !isPhone()) {\n    <shell-side-menu class=\"shell-menu\" [class.disabled-zone]=\"isThinking()\" />\n  }\n  <shell-main-content class=\"shell-main\" [class.full-width]=\"!isAuthenticated()\" />\n  @if (terminalVisible()) {\n    <!-- On a phone too (scanner-phone-display D10), but never given the cursor there: see Shell.consoleFocusOnAppear. -->\n    <div class=\"shell-resize\" [class.dragging]=\"isDragging()\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n    <shell-command-terminal class=\"shell-terminal\" [class.disabled-zone]=\"isThinking()\" [focusOnAppear]=\"consoleFocusOnAppear()\" />\n  }\n  @if (isAuthenticated() && phoneMenuOpen()) {\n    <!-- Phone menu (scanner-phone-display D9): the icon column's items, opened from the \u2630 button. -->\n    <div class=\"phone-menu-backdrop\" (click)=\"closePhoneMenu()\"></div>\n    <shell-side-menu\n      id=\"shell-phone-menu\"\n      class=\"phone-menu\"\n      [class.disabled-zone]=\"isThinking()\"\n      [drawer]=\"true\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Menu\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      (keydown.escape)=\"closePhoneMenu()\"\n    />\n  }\n  @if (isAuthenticated() && bypassActive()) {\n    <!-- authenticator-sign-in.prd.md D12: cannot be dismissed; no end time (the server never sends one). -->\n    <div class=\"bypass-banner\" role=\"status\">Sign-in code check is off.</div>\n  }\n  <faq-modal />\n\n  @if (helpOverlay(); as helpText) {\n    <div class=\"help-backdrop\" (click)=\"dismissHelp()\">\n      <div class=\"help-panel\" (click)=\"$event.stopPropagation()\" role=\"dialog\" aria-label=\"Command help\">\n        <div class=\"help-panel-header\">\n          <span class=\"help-panel-title\">Help</span>\n          <button class=\"help-panel-close\" type=\"button\" (click)=\"dismissHelp()\" aria-label=\"Close help\">\u2715</button>\n        </div>\n        <div class=\"help-panel-content\">{{ helpText }}</div>\n        <div class=\"help-panel-footer\">\n          <span>Tip: for most commands you can swap the first and second words \u2014 e.g. \"disable user\" works the same as \"user disable\"</span>\n          <span class=\"help-panel-footer-dismiss\">Press Escape, click outside, or start typing to close</span>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".shell{position:relative;display:grid;grid-template-areas:\"status   status\" \"menu     main\" \"resize   resize\" \"terminal terminal\";grid-template-columns:56px 1fr;grid-template-rows:48px 1fr 4px var(--terminal-height, 160px);height:100vh;height:100dvh;width:100vw;overflow:hidden;background-color:var(--color-surface-dark)}.shell.terminal-hidden{grid-template-rows:48px 1fr 0 0}.shell-status{grid-area:status}.shell-menu{grid-area:menu}.shell-main{grid-area:main;overflow:hidden}.shell-main.full-width{grid-column:1 / -1}.shell-resize{grid-area:resize;cursor:row-resize;touch-action:none;background-color:var(--color-surface-border);transition:background-color .15s ease}.shell-resize:hover,.shell-resize.dragging{background-color:var(--color-interactive)}.shell-terminal{grid-area:terminal}.shell.is-dragging{user-select:none;-webkit-user-select:none}.disabled-zone{pointer-events:none;opacity:.4;transition:opacity .2s ease}.help-backdrop{position:absolute;inset:0;z-index:100;background-color:#000000a6;display:flex;align-items:center;justify-content:center}.help-panel{background-color:var(--color-surface, #161b22);border:2px solid var(--color-interactive, #00e5ff);border-radius:4px;width:70%;max-width:820px;max-height:75vh;display:flex;flex-direction:column;font-family:Roboto Mono,Courier New,monospace;font-size:.85rem}.help-panel-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background-color:var(--color-surface-light, #21262d);border-bottom:1px solid var(--color-interactive, #00e5ff);border-radius:2px 2px 0 0;flex-shrink:0}.help-panel-title{color:var(--color-interactive, #00e5ff);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.75rem}.help-panel-close{background:none;border:1px solid var(--color-surface-border, #30363d);color:var(--color-secondary-info, #9e9e9e);cursor:pointer;padding:2px 8px;font-size:.9rem;line-height:1.4;border-radius:3px;transition:color .15s ease,border-color .15s ease}.help-panel-close:hover{color:var(--color-text-primary, #ffffff);border-color:var(--color-interactive, #00e5ff)}.help-panel-content{flex:1;overflow-y:auto;padding:16px 20px;color:var(--color-text-primary, #ffffff);white-space:pre-wrap;line-height:1.7}.help-panel-footer{padding:6px 16px;background-color:var(--color-surface-light, #21262d);border-top:1px solid var(--color-surface-border, #30363d);border-radius:0 0 2px 2px;color:var(--color-secondary-info, #9e9e9e);font-size:.75rem;flex-shrink:0;display:flex;flex-direction:column;gap:2px}.help-panel-footer-dismiss{opacity:.6}@media(max-width:819.98px){.shell{grid-template-areas:\"status\" \"main\" \"resize\" \"terminal\";grid-template-columns:minmax(0,1fr)}.shell-menu{display:none}}.phone-menu-backdrop{position:absolute;inset:48px 0 0;z-index:50;background-color:color-mix(in srgb,var(--color-surface-dark) 70%,transparent)}.phone-menu{position:absolute;top:48px;bottom:0;left:0;z-index:51;display:block;width:min(280px,85vw);box-shadow:4px 0 16px color-mix(in srgb,var(--color-surface-dark) 60%,transparent)}.bypass-banner{position:fixed;top:52px;right:12px;z-index:1000;padding:6px 12px;border:2px solid var(--color-loss);border-radius:4px;background-color:var(--color-surface);color:var(--color-loss);font-weight:600;pointer-events:none}\n"], dependencies: [{ kind: "component", type: StatusBar, selector: "shell-status-bar" }, { kind: "component", type: SideMenu, selector: "shell-side-menu", inputs: ["drawer"] }, { kind: "component", type: MainContent, selector: "shell-main-content" }, { kind: "component", type: CommandTerminal, selector: "shell-command-terminal", inputs: ["focusOnAppear"] }, { kind: "component", type: FaqModal, selector: "faq-modal" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Shell, decorators: [{
             type: Component,
-            args: [{ selector: 'shell-root', imports: [StatusBar, SideMenu, MainContent, CommandTerminal, FaqModal, CdkTrapFocus], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"shell\" [style.--terminal-height]=\"terminalHeight()\" [class.is-dragging]=\"isDragging()\" [class.terminal-hidden]=\"!terminalVisible()\">\n  <shell-status-bar class=\"shell-status\" [class.disabled-zone]=\"isThinking()\">\n    <ng-content />\n  </shell-status-bar>\n  @if (isAuthenticated() && !isPhone()) {\n    <shell-side-menu class=\"shell-menu\" [class.disabled-zone]=\"isThinking()\" />\n  }\n  <shell-main-content class=\"shell-main\" [class.full-width]=\"!isAuthenticated()\" />\n  @if (terminalVisible()) {\n    <!-- On a phone too (scanner-phone-display D10), but never given the cursor there: see Shell.consoleFocusOnAppear. -->\n    <div class=\"shell-resize\" [class.dragging]=\"isDragging()\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n    <shell-command-terminal class=\"shell-terminal\" [class.disabled-zone]=\"isThinking()\" [focusOnAppear]=\"consoleFocusOnAppear()\" />\n  }\n  @if (isAuthenticated() && phoneMenuOpen()) {\n    <!-- Phone menu (scanner-phone-display D9): the icon column's items, opened from the \u2630 button. -->\n    <div class=\"phone-menu-backdrop\" (click)=\"closePhoneMenu()\"></div>\n    <shell-side-menu\n      id=\"shell-phone-menu\"\n      class=\"phone-menu\"\n      [class.disabled-zone]=\"isThinking()\"\n      [drawer]=\"true\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Menu\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      (keydown.escape)=\"closePhoneMenu()\"\n    />\n  }\n  <faq-modal />\n\n  @if (helpOverlay(); as helpText) {\n    <div class=\"help-backdrop\" (click)=\"dismissHelp()\">\n      <div class=\"help-panel\" (click)=\"$event.stopPropagation()\" role=\"dialog\" aria-label=\"Command help\">\n        <div class=\"help-panel-header\">\n          <span class=\"help-panel-title\">Help</span>\n          <button class=\"help-panel-close\" type=\"button\" (click)=\"dismissHelp()\" aria-label=\"Close help\">\u2715</button>\n        </div>\n        <div class=\"help-panel-content\">{{ helpText }}</div>\n        <div class=\"help-panel-footer\">\n          <span>Tip: for most commands you can swap the first and second words \u2014 e.g. \"disable user\" works the same as \"user disable\"</span>\n          <span class=\"help-panel-footer-dismiss\">Press Escape, click outside, or start typing to close</span>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".shell{position:relative;display:grid;grid-template-areas:\"status   status\" \"menu     main\" \"resize   resize\" \"terminal terminal\";grid-template-columns:56px 1fr;grid-template-rows:48px 1fr 4px var(--terminal-height, 160px);height:100vh;height:100dvh;width:100vw;overflow:hidden;background-color:var(--color-surface-dark)}.shell.terminal-hidden{grid-template-rows:48px 1fr 0 0}.shell-status{grid-area:status}.shell-menu{grid-area:menu}.shell-main{grid-area:main;overflow:hidden}.shell-main.full-width{grid-column:1 / -1}.shell-resize{grid-area:resize;cursor:row-resize;touch-action:none;background-color:var(--color-surface-border);transition:background-color .15s ease}.shell-resize:hover,.shell-resize.dragging{background-color:var(--color-interactive)}.shell-terminal{grid-area:terminal}.shell.is-dragging{user-select:none;-webkit-user-select:none}.disabled-zone{pointer-events:none;opacity:.4;transition:opacity .2s ease}.help-backdrop{position:absolute;inset:0;z-index:100;background-color:#000000a6;display:flex;align-items:center;justify-content:center}.help-panel{background-color:var(--color-surface, #161b22);border:2px solid var(--color-interactive, #00e5ff);border-radius:4px;width:70%;max-width:820px;max-height:75vh;display:flex;flex-direction:column;font-family:Roboto Mono,Courier New,monospace;font-size:.85rem}.help-panel-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background-color:var(--color-surface-light, #21262d);border-bottom:1px solid var(--color-interactive, #00e5ff);border-radius:2px 2px 0 0;flex-shrink:0}.help-panel-title{color:var(--color-interactive, #00e5ff);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.75rem}.help-panel-close{background:none;border:1px solid var(--color-surface-border, #30363d);color:var(--color-secondary-info, #9e9e9e);cursor:pointer;padding:2px 8px;font-size:.9rem;line-height:1.4;border-radius:3px;transition:color .15s ease,border-color .15s ease}.help-panel-close:hover{color:var(--color-text-primary, #ffffff);border-color:var(--color-interactive, #00e5ff)}.help-panel-content{flex:1;overflow-y:auto;padding:16px 20px;color:var(--color-text-primary, #ffffff);white-space:pre-wrap;line-height:1.7}.help-panel-footer{padding:6px 16px;background-color:var(--color-surface-light, #21262d);border-top:1px solid var(--color-surface-border, #30363d);border-radius:0 0 2px 2px;color:var(--color-secondary-info, #9e9e9e);font-size:.75rem;flex-shrink:0;display:flex;flex-direction:column;gap:2px}.help-panel-footer-dismiss{opacity:.6}@media(max-width:819.98px){.shell{grid-template-areas:\"status\" \"main\" \"resize\" \"terminal\";grid-template-columns:minmax(0,1fr)}.shell-menu{display:none}}.phone-menu-backdrop{position:absolute;inset:48px 0 0;z-index:50;background-color:color-mix(in srgb,var(--color-surface-dark) 70%,transparent)}.phone-menu{position:absolute;top:48px;bottom:0;left:0;z-index:51;display:block;width:min(280px,85vw);box-shadow:4px 0 16px color-mix(in srgb,var(--color-surface-dark) 60%,transparent)}\n"] }]
+            args: [{ selector: 'shell-root', imports: [StatusBar, SideMenu, MainContent, CommandTerminal, FaqModal, CdkTrapFocus], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"shell\" [style.--terminal-height]=\"terminalHeight()\" [class.is-dragging]=\"isDragging()\" [class.terminal-hidden]=\"!terminalVisible()\">\n  <shell-status-bar class=\"shell-status\" [class.disabled-zone]=\"isThinking()\">\n    <ng-content />\n  </shell-status-bar>\n  @if (isAuthenticated() && !isPhone()) {\n    <shell-side-menu class=\"shell-menu\" [class.disabled-zone]=\"isThinking()\" />\n  }\n  <shell-main-content class=\"shell-main\" [class.full-width]=\"!isAuthenticated()\" />\n  @if (terminalVisible()) {\n    <!-- On a phone too (scanner-phone-display D10), but never given the cursor there: see Shell.consoleFocusOnAppear. -->\n    <div class=\"shell-resize\" [class.dragging]=\"isDragging()\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n    <shell-command-terminal class=\"shell-terminal\" [class.disabled-zone]=\"isThinking()\" [focusOnAppear]=\"consoleFocusOnAppear()\" />\n  }\n  @if (isAuthenticated() && phoneMenuOpen()) {\n    <!-- Phone menu (scanner-phone-display D9): the icon column's items, opened from the \u2630 button. -->\n    <div class=\"phone-menu-backdrop\" (click)=\"closePhoneMenu()\"></div>\n    <shell-side-menu\n      id=\"shell-phone-menu\"\n      class=\"phone-menu\"\n      [class.disabled-zone]=\"isThinking()\"\n      [drawer]=\"true\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Menu\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      (keydown.escape)=\"closePhoneMenu()\"\n    />\n  }\n  @if (isAuthenticated() && bypassActive()) {\n    <!-- authenticator-sign-in.prd.md D12: cannot be dismissed; no end time (the server never sends one). -->\n    <div class=\"bypass-banner\" role=\"status\">Sign-in code check is off.</div>\n  }\n  <faq-modal />\n\n  @if (helpOverlay(); as helpText) {\n    <div class=\"help-backdrop\" (click)=\"dismissHelp()\">\n      <div class=\"help-panel\" (click)=\"$event.stopPropagation()\" role=\"dialog\" aria-label=\"Command help\">\n        <div class=\"help-panel-header\">\n          <span class=\"help-panel-title\">Help</span>\n          <button class=\"help-panel-close\" type=\"button\" (click)=\"dismissHelp()\" aria-label=\"Close help\">\u2715</button>\n        </div>\n        <div class=\"help-panel-content\">{{ helpText }}</div>\n        <div class=\"help-panel-footer\">\n          <span>Tip: for most commands you can swap the first and second words \u2014 e.g. \"disable user\" works the same as \"user disable\"</span>\n          <span class=\"help-panel-footer-dismiss\">Press Escape, click outside, or start typing to close</span>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".shell{position:relative;display:grid;grid-template-areas:\"status   status\" \"menu     main\" \"resize   resize\" \"terminal terminal\";grid-template-columns:56px 1fr;grid-template-rows:48px 1fr 4px var(--terminal-height, 160px);height:100vh;height:100dvh;width:100vw;overflow:hidden;background-color:var(--color-surface-dark)}.shell.terminal-hidden{grid-template-rows:48px 1fr 0 0}.shell-status{grid-area:status}.shell-menu{grid-area:menu}.shell-main{grid-area:main;overflow:hidden}.shell-main.full-width{grid-column:1 / -1}.shell-resize{grid-area:resize;cursor:row-resize;touch-action:none;background-color:var(--color-surface-border);transition:background-color .15s ease}.shell-resize:hover,.shell-resize.dragging{background-color:var(--color-interactive)}.shell-terminal{grid-area:terminal}.shell.is-dragging{user-select:none;-webkit-user-select:none}.disabled-zone{pointer-events:none;opacity:.4;transition:opacity .2s ease}.help-backdrop{position:absolute;inset:0;z-index:100;background-color:#000000a6;display:flex;align-items:center;justify-content:center}.help-panel{background-color:var(--color-surface, #161b22);border:2px solid var(--color-interactive, #00e5ff);border-radius:4px;width:70%;max-width:820px;max-height:75vh;display:flex;flex-direction:column;font-family:Roboto Mono,Courier New,monospace;font-size:.85rem}.help-panel-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background-color:var(--color-surface-light, #21262d);border-bottom:1px solid var(--color-interactive, #00e5ff);border-radius:2px 2px 0 0;flex-shrink:0}.help-panel-title{color:var(--color-interactive, #00e5ff);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.75rem}.help-panel-close{background:none;border:1px solid var(--color-surface-border, #30363d);color:var(--color-secondary-info, #9e9e9e);cursor:pointer;padding:2px 8px;font-size:.9rem;line-height:1.4;border-radius:3px;transition:color .15s ease,border-color .15s ease}.help-panel-close:hover{color:var(--color-text-primary, #ffffff);border-color:var(--color-interactive, #00e5ff)}.help-panel-content{flex:1;overflow-y:auto;padding:16px 20px;color:var(--color-text-primary, #ffffff);white-space:pre-wrap;line-height:1.7}.help-panel-footer{padding:6px 16px;background-color:var(--color-surface-light, #21262d);border-top:1px solid var(--color-surface-border, #30363d);border-radius:0 0 2px 2px;color:var(--color-secondary-info, #9e9e9e);font-size:.75rem;flex-shrink:0;display:flex;flex-direction:column;gap:2px}.help-panel-footer-dismiss{opacity:.6}@media(max-width:819.98px){.shell{grid-template-areas:\"status\" \"main\" \"resize\" \"terminal\";grid-template-columns:minmax(0,1fr)}.shell-menu{display:none}}.phone-menu-backdrop{position:absolute;inset:48px 0 0;z-index:50;background-color:color-mix(in srgb,var(--color-surface-dark) 70%,transparent)}.phone-menu{position:absolute;top:48px;bottom:0;left:0;z-index:51;display:block;width:min(280px,85vw);box-shadow:4px 0 16px color-mix(in srgb,var(--color-surface-dark) 60%,transparent)}.bypass-banner{position:fixed;top:52px;right:12px;z-index:1000;padding:6px 12px;border:2px solid var(--color-loss);border-radius:4px;background-color:var(--color-surface);color:var(--color-loss);font-weight:600;pointer-events:none}\n"] }]
         }] });
 
+/*
+Created by Franz Zemen 2026-10-17
+License Type: UNLICENSED
+
+The 10 recovery codes, shown ONCE (authenticator-sign-in.prd.md D7), with Download (a text file made
+in the browser — nothing is stored on the server as a file) and Copy. "Continue" is the only way on,
+so the codes cannot scroll past unseen.
+*/
+class RecoveryCodes {
+    constructor() {
+        this.codes = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "codes" }] : /* istanbul ignore next */ []));
+        this.appName = input('BrokenStock', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appName" }] : /* istanbul ignore next */ []));
+        this.username = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "username" }] : /* istanbul ignore next */ []));
+        this.done = output();
+        this.copied = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    }
+    download() {
+        const text = recoveryCodesFile(this.appName(), this.username(), this.codes());
+        const url = URL.createObjectURL(new Blob([text], { type: 'text/plain' }));
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${this.appName().toLowerCase().replace(/[^a-z0-9]+/g, '-')}-recovery-codes.txt`;
+        a.click();
+        setTimeout(() => URL.revokeObjectURL(url));
+    }
+    copy() {
+        navigator.clipboard?.writeText(this.codes().join('\n')).then(() => this.copied.set(true)).catch(() => undefined);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RecoveryCodes, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: RecoveryCodes, isStandalone: true, selector: "shell-recovery-codes", inputs: { codes: { classPropertyName: "codes", publicName: "codes", isSignal: true, isRequired: true, transformFunction: null }, appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { done: "done" }, ngImport: i0, template: `
+    <div class="recovery-codes">
+      <p class="recovery-codes-lead text-text-primary"><strong>Save your recovery codes.</strong></p>
+      <p class="text-secondary-info">
+        Each one works once, in place of the 6-digit code, if you lose your phone.
+        They will not be shown again.
+      </p>
+      <ol class="recovery-codes-list">
+        @for (code of codes(); track code) {
+          <li><code>{{ code }}</code></li>
+        }
+      </ol>
+      <div class="recovery-codes-actions">
+        <button mat-stroked-button type="button" (click)="download()">
+          <mat-icon>download</mat-icon> Download
+        </button>
+        <button mat-stroked-button type="button" (click)="copy()">
+          <mat-icon>content_copy</mat-icon> {{ copied() ? 'Copied' : 'Copy' }}
+        </button>
+        <button mat-flat-button type="button" (click)="done.emit()">I have saved them — continue</button>
+      </div>
+    </div>
+  `, isInline: true, styles: [".recovery-codes{max-width:360px;padding:12px 16px;border-radius:4px;background-color:var(--color-surface-light);text-align:left;font-size:.9rem}.recovery-codes p{margin:0 0 8px}.recovery-codes-list{columns:2;margin:8px 0 12px;padding-left:1.5em;font-family:var(--shell-mono, monospace)}.recovery-codes-list li{margin:2px 0}.recovery-codes-actions{display:flex;flex-wrap:wrap;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RecoveryCodes, decorators: [{
+            type: Component,
+            args: [{ selector: 'shell-recovery-codes', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatIconModule], template: `
+    <div class="recovery-codes">
+      <p class="recovery-codes-lead text-text-primary"><strong>Save your recovery codes.</strong></p>
+      <p class="text-secondary-info">
+        Each one works once, in place of the 6-digit code, if you lose your phone.
+        They will not be shown again.
+      </p>
+      <ol class="recovery-codes-list">
+        @for (code of codes(); track code) {
+          <li><code>{{ code }}</code></li>
+        }
+      </ol>
+      <div class="recovery-codes-actions">
+        <button mat-stroked-button type="button" (click)="download()">
+          <mat-icon>download</mat-icon> Download
+        </button>
+        <button mat-stroked-button type="button" (click)="copy()">
+          <mat-icon>content_copy</mat-icon> {{ copied() ? 'Copied' : 'Copy' }}
+        </button>
+        <button mat-flat-button type="button" (click)="done.emit()">I have saved them — continue</button>
+      </div>
+    </div>
+  `, styles: [".recovery-codes{max-width:360px;padding:12px 16px;border-radius:4px;background-color:var(--color-surface-light);text-align:left;font-size:.9rem}.recovery-codes p{margin:0 0 8px}.recovery-codes-list{columns:2;margin:8px 0 12px;padding-left:1.5em;font-family:var(--shell-mono, monospace)}.recovery-codes-list li{margin:2px 0}.recovery-codes-actions{display:flex;flex-wrap:wrap;gap:8px}\n"] }]
+        }], propDecorators: { codes: [{ type: i0.Input, args: [{ isSignal: true, alias: "codes", required: true }] }], appName: [{ type: i0.Input, args: [{ isSignal: true, alias: "appName", required: false }] }], username: [{ type: i0.Input, args: [{ isSignal: true, alias: "username", required: false }] }], done: [{ type: i0.Output, args: ["done"] }] } });
+
 class Login {
     #postLoginRoute;
     #commandService;
@@ -3532,6 +3848,11 @@ class Login {
          */
         this.selected = signal(new Set(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        /** The code or recovery code typed on the code step (authenticator-sign-in.prd.md). */
+        this.codeText = '';
+        /** Typing a recovery code instead of the 6-digit code. */
+        this.useRecovery = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "useRecovery" }] : /* istanbul ignore next */ []));
         this.USERNAME_REGEX = USERNAME_REGEX;
         this.PASSWORD_REGEX = PASSWORD_REGEX;
         this.appName = inject(SHELL_APP_NAME, { optional: true }) ?? 'Application';
@@ -3642,6 +3963,37 @@ class Login {
         this.selected.set(new Set());
         this.#doLogin(false, { endSessionIds: ids });
     }
+    /** The code step: the 6-digit code (or a recovery code), with the credentials already accepted. */
+    onSubmitCode(event) {
+        event.preventDefault();
+        this.errors = [];
+        const typed = this.codeText.trim();
+        if (!typed)
+            return;
+        this.submitted = true;
+        this.#doLogin(false, this.useRecovery() ? { recoveryCode: typed } : { code: typed });
+    }
+    onToggleRecovery() {
+        this.useRecovery.set(!this.useRecovery());
+        this.codeText = '';
+        this.errors = [];
+    }
+    /** Back to the password form. */
+    onCancelCode() {
+        this.authenticationService.cancelCodeStep();
+        this.codeText = '';
+        this.useRecovery.set(false);
+        this.errors = [];
+        this.submitted = false;
+    }
+    /** New recovery codes were shown after sign-in; now go where sign-in was going. */
+    onRecoveryCodesSaved() {
+        this.authenticationService.acknowledgeRecoveryCodes();
+        // Setup can finish on an attempt that then stops at "already signed in
+        // elsewhere": the codes are shown first, and the session choice is still open.
+        if (this.authenticationService.authenticated())
+            this.#navigateAfterLogin();
+    }
     onCancelConflict() {
         this.authenticationService.clearConflict();
         this.selected.set(new Set());
@@ -3652,19 +4004,31 @@ class Login {
             .login(this.model, force, choice)
             .then(() => {
             this.#commandService.echoCommand(`login ${this.model.username}`);
-            this.router.navigateByUrl(this.#resolvePostLoginUrl()).then(() => {
-                setTimeout(() => this.#terminalFocusService.requestFocus());
-            }).catch(console.error);
+            this.codeText = '';
+            this.useRecovery.set(false);
+            // Setup finished during this sign-in: the codes are on screen and must be
+            // seen before the app takes over the page.
+            if (this.authenticationService.recoveryCodesToShow()) {
+                this.submitted = false;
+                return;
+            }
+            this.#navigateAfterLogin();
         })
             .catch((err) => {
-            if (err !== 'conflict') {
+            if (err !== 'conflict' && err !== CODE_STEP) {
                 this.errors.push({ ndx: 0, message: typeof err === 'string' ? err : 'Unable to login' });
             }
+            this.codeText = '';
             this.submitted = false;
         });
     }
+    #navigateAfterLogin() {
+        this.router.navigateByUrl(this.#resolvePostLoginUrl()).then(() => {
+            setTimeout(() => this.#terminalFocusService.requestFocus());
+        }).catch(console.error);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Login, deps: [{ token: AuthenticationService }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Login, isStandalone: true, selector: "shell-login", ngImport: i0, template: "@let usernameRegex = USERNAME_REGEX;\n@let passwordRegex = PASSWORD_REGEX;\n<div class=\"login-container\">\n  <div class=\"login-header\">\n    <h2 class=\"text-text-primary\">{{ appName }}</h2>\n    <p class=\"text-secondary-info\">Sign in to continue</p>\n  </div>\n  <form #loginForm=\"ngForm\" (ngSubmit)=\"onSubmit($event)\" class=\"login-form\">\n    <mat-form-field appearance=\"outline\" class=\"login-field\">\n      <mat-label>Username</mat-label>\n      <input\n        #usernameInput\n        matInput\n        placeholder=\"Enter username\"\n        [(ngModel)]=\"model.username\"\n        name=\"username\"\n        [disabled]=\"submitted\"\n        required\n        regexValidator\n        [regex]=\"usernameRegex\"\n        (cdkAutofill)=\"onAutofill($event, usernameInput)\"\n      />\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" class=\"login-field\">\n      <mat-label>Password</mat-label>\n      <input\n        #passwordInput\n        matInput\n        placeholder=\"Enter password\"\n        [type]=\"hide() ? 'password' : 'text'\"\n        [(ngModel)]=\"model.password\"\n        name=\"password\"\n        [disabled]=\"submitted\"\n        regexValidator\n        [regex]=\"passwordRegex\"\n        (cdkAutofill)=\"onAutofill($event, passwordInput)\"\n      />\n      <button\n        mat-icon-button\n        matSuffix\n        type=\"button\"\n        (click)=\"clickEvent($event)\"\n        [attr.aria-label]=\"'Hide password'\"\n        [attr.aria-pressed]=\"hide()\"\n      >\n        <mat-icon>{{ hide() ? 'visibility_off' : 'visibility' }}</mat-icon>\n      </button>\n    </mat-form-field>\n    <button mat-flat-button type=\"submit\" [disabled]=\"submitted\" class=\"login-button\">\n      Login\n    </button>\n  </form>\n  @if (errors.length > 0) {\n    <div class=\"login-errors\">\n      @for (error of errors; track error.ndx) {\n        <div class=\"login-error text-loss\">{{ error.message }}</div>\n      }\n    </div>\n  }\n  @if (authenticationService.conflictSessions(); as sessions) {\n    <div class=\"login-conflict\">\n      <p class=\"text-secondary-info\">\n        You are already signed in {{ sessions.length === 1 ? 'somewhere else' : 'on other devices' }}:\n      </p>\n      @for (session of sessions; track session.sessionId ?? $index) {\n        <div class=\"login-conflict-session\">\n          @if (canEndIndividually()) {\n            <mat-checkbox\n              [checked]=\"isSelected(session)\"\n              [disabled]=\"!session.sessionId\"\n              (change)=\"toggleSelected(session, $event.checked)\"\n              [attr.aria-label]=\"'End ' + deviceLabel(session)\"\n            ></mat-checkbox>\n          }\n          <span class=\"text-secondary-info\">\n            <strong>{{ deviceLabel(session) }}</strong>\n            <!-- signedInAtEpoch is when the password was typed. startEpoch is\n                 when the row was written, which renewal resets \u2014 so it is shown\n                 only when there is nothing better, and labelled for what it is. -->\n            @if (session.signedInAtEpoch) {\n              \u2014 since {{ session.signedInAtEpoch | date:'short' }}\n            } @else {\n              \u2014 last active {{ session.startEpoch | date:'short' }}\n            }\n          </span>\n        </div>\n      }\n      <div class=\"login-conflict-actions\">\n        <button mat-stroked-button type=\"button\" (click)=\"onCancelConflict()\">Cancel</button>\n        @if (selectedCount() > 0) {\n          <button mat-stroked-button type=\"button\" (click)=\"onEndSelected()\">\n            End {{ selectedCount() === 1 ? 'that one' : selectedCount() + ' of them' }} and sign in\n          </button>\n        }\n        <button mat-stroked-button type=\"button\" (click)=\"onTakeOver()\">\n          {{ sessions.length === 1 ? 'End it and sign in' : 'End them all and sign in' }}\n        </button>\n        @if (authenticationService.additionalSignInAllowed()) {\n          <button mat-flat-button type=\"button\" (click)=\"onSignInAsWell()\">Sign in here as well</button>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.login-header{margin-bottom:32px}.login-header h2{font-size:1.5rem;font-weight:300;margin-bottom:8px}.login-form{display:flex;flex-direction:column;align-items:center;gap:8px;width:320px}.login-field{width:100%;text-align:left}.login-takeover{align-self:flex-start;margin-top:4px}.login-button{margin-top:8px;width:100%}.login-errors{margin-top:16px;max-width:320px}.login-conflict{margin-top:16px;max-width:320px;padding:12px 16px;border-radius:4px;background-color:var(--color-surface-light);font-size:.85rem;text-align:left}.login-conflict p{margin:0 0 8px}.login-conflict-session{display:flex;align-items:center;gap:8px;margin:4px 0}.login-conflict-actions{flex-wrap:wrap;display:flex;gap:8px;margin-top:12px;justify-content:flex-end}.login-error{padding:8px 12px;margin-bottom:4px;font-size:.85rem;border-radius:4px;background-color:var(--color-surface-light)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.CdkAutofill, selector: "[cdkAutofill]", outputs: ["cdkAutofill"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RegexValidatorDirective, selector: "[regexValidator]", inputs: ["regex"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Login, isStandalone: true, selector: "shell-login", ngImport: i0, template: "@let usernameRegex = USERNAME_REGEX;\n@let passwordRegex = PASSWORD_REGEX;\n<div class=\"login-container\">\n  <div class=\"login-header\">\n    <h2 class=\"text-text-primary\">{{ appName }}</h2>\n    <p class=\"text-secondary-info\">Sign in to continue</p>\n  </div>\n  @let step = authenticationService.codeStep();\n  @if (authenticationService.recoveryCodesToShow(); as codes) {\n    <shell-recovery-codes [codes]=\"codes\" [appName]=\"appName\" [username]=\"model.username\" (done)=\"onRecoveryCodesSaved()\" />\n  } @else if (step !== 'none') {\n    <form (submit)=\"onSubmitCode($event)\" class=\"login-form\" aria-label=\"Authenticator code\">\n      @if (step === 'setup' && authenticationService.setupChallenge(); as challenge) {\n        <p class=\"text-secondary-info login-code-lead\">\n          Set up your authenticator: scan this with Google Authenticator (or Authy, 1Password),\n          then enter the 6-digit code it shows.\n        </p>\n        <img class=\"login-qr\" [src]=\"challenge.qr\" alt=\"QR code for your authenticator app\" width=\"200\" height=\"200\" />\n        <p class=\"text-secondary-info login-key\">Can't scan? Enter this key: <code>{{ challenge.key }}</code></p>\n      } @else {\n        <p class=\"text-secondary-info login-code-lead\">\n          @if (useRecovery()) {\n            Enter one of your recovery codes.\n          } @else {\n            Enter the 6-digit code from your authenticator app.\n          }\n        </p>\n      }\n      <mat-form-field appearance=\"outline\" class=\"login-field\">\n        <mat-label>{{ useRecovery() ? 'Recovery code' : 'Code' }}</mat-label>\n        <input\n          matInput\n          name=\"code\"\n          [(ngModel)]=\"codeText\"\n          [disabled]=\"submitted\"\n          [attr.inputmode]=\"useRecovery() ? 'text' : 'numeric'\"\n          [attr.autocomplete]=\"useRecovery() ? 'off' : 'one-time-code'\"\n          [attr.maxlength]=\"useRecovery() ? 16 : 7\"\n          [placeholder]=\"useRecovery() ? 'xxxxx-xxxxx' : '123456'\"\n          autofocus\n        />\n      </mat-form-field>\n      <button mat-flat-button type=\"submit\" [disabled]=\"submitted\" class=\"login-button\">\n        {{ step === 'setup' ? 'Finish setup and sign in' : 'Sign in' }}\n      </button>\n      <div class=\"login-code-links\">\n        @if (step === 'code') {\n          <button mat-button type=\"button\" (click)=\"onToggleRecovery()\">\n            {{ useRecovery() ? 'Use the 6-digit code' : 'Use a recovery code' }}\n          </button>\n        }\n        <button mat-button type=\"button\" (click)=\"onCancelCode()\">Back</button>\n      </div>\n    </form>\n  } @else {\n  <form #loginForm=\"ngForm\" (ngSubmit)=\"onSubmit($event)\" class=\"login-form\">\n    <mat-form-field appearance=\"outline\" class=\"login-field\">\n      <mat-label>Username</mat-label>\n      <input\n        #usernameInput\n        matInput\n        placeholder=\"Enter username\"\n        [(ngModel)]=\"model.username\"\n        name=\"username\"\n        [disabled]=\"submitted\"\n        required\n        regexValidator\n        [regex]=\"usernameRegex\"\n        (cdkAutofill)=\"onAutofill($event, usernameInput)\"\n      />\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" class=\"login-field\">\n      <mat-label>Password</mat-label>\n      <input\n        #passwordInput\n        matInput\n        placeholder=\"Enter password\"\n        [type]=\"hide() ? 'password' : 'text'\"\n        [(ngModel)]=\"model.password\"\n        name=\"password\"\n        [disabled]=\"submitted\"\n        regexValidator\n        [regex]=\"passwordRegex\"\n        (cdkAutofill)=\"onAutofill($event, passwordInput)\"\n      />\n      <button\n        mat-icon-button\n        matSuffix\n        type=\"button\"\n        (click)=\"clickEvent($event)\"\n        [attr.aria-label]=\"'Hide password'\"\n        [attr.aria-pressed]=\"hide()\"\n      >\n        <mat-icon>{{ hide() ? 'visibility_off' : 'visibility' }}</mat-icon>\n      </button>\n    </mat-form-field>\n    <button mat-flat-button type=\"submit\" [disabled]=\"submitted\" class=\"login-button\">\n      Login\n    </button>\n  </form>\n  }\n  @if (errors.length > 0) {\n    <div class=\"login-errors\">\n      @for (error of errors; track error.ndx) {\n        <div class=\"login-error text-loss\">{{ error.message }}</div>\n      }\n    </div>\n  }\n  @if (authenticationService.conflictSessions(); as sessions) {\n    <div class=\"login-conflict\">\n      <p class=\"text-secondary-info\">\n        You are already signed in {{ sessions.length === 1 ? 'somewhere else' : 'on other devices' }}:\n      </p>\n      @for (session of sessions; track session.sessionId ?? $index) {\n        <div class=\"login-conflict-session\">\n          @if (canEndIndividually()) {\n            <mat-checkbox\n              [checked]=\"isSelected(session)\"\n              [disabled]=\"!session.sessionId\"\n              (change)=\"toggleSelected(session, $event.checked)\"\n              [attr.aria-label]=\"'End ' + deviceLabel(session)\"\n            ></mat-checkbox>\n          }\n          <span class=\"text-secondary-info\">\n            <strong>{{ deviceLabel(session) }}</strong>\n            <!-- signedInAtEpoch is when the password was typed. startEpoch is\n                 when the row was written, which renewal resets \u2014 so it is shown\n                 only when there is nothing better, and labelled for what it is. -->\n            @if (session.signedInAtEpoch) {\n              \u2014 since {{ session.signedInAtEpoch | date:'short' }}\n            } @else {\n              \u2014 last active {{ session.startEpoch | date:'short' }}\n            }\n          </span>\n        </div>\n      }\n      <div class=\"login-conflict-actions\">\n        <button mat-stroked-button type=\"button\" (click)=\"onCancelConflict()\">Cancel</button>\n        @if (selectedCount() > 0) {\n          <button mat-stroked-button type=\"button\" (click)=\"onEndSelected()\">\n            End {{ selectedCount() === 1 ? 'that one' : selectedCount() + ' of them' }} and sign in\n          </button>\n        }\n        <button mat-stroked-button type=\"button\" (click)=\"onTakeOver()\">\n          {{ sessions.length === 1 ? 'End it and sign in' : 'End them all and sign in' }}\n        </button>\n        @if (authenticationService.additionalSignInAllowed()) {\n          <button mat-flat-button type=\"button\" (click)=\"onSignInAsWell()\">Sign in here as well</button>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.login-header{margin-bottom:32px}.login-header h2{font-size:1.5rem;font-weight:300;margin-bottom:8px}.login-form{display:flex;flex-direction:column;align-items:center;gap:8px;width:320px}.login-field{width:100%;text-align:left}.login-takeover{align-self:flex-start;margin-top:4px}.login-button{margin-top:8px;width:100%}.login-errors{margin-top:16px;max-width:320px}.login-conflict{margin-top:16px;max-width:320px;padding:12px 16px;border-radius:4px;background-color:var(--color-surface-light);font-size:.85rem;text-align:left}.login-conflict p{margin:0 0 8px}.login-conflict-session{display:flex;align-items:center;gap:8px;margin:4px 0}.login-conflict-actions{flex-wrap:wrap;display:flex;gap:8px;margin-top:12px;justify-content:flex-end}.login-error{padding:8px 12px;margin-bottom:4px;font-size:.85rem;border-radius:4px;background-color:var(--color-surface-light)}.login-code-lead{margin:0 0 8px;font-size:.9rem}.login-qr{display:block;margin:4px auto 8px;image-rendering:pixelated}.login-key{margin:0 0 8px;font-size:.8rem;word-break:break-all}.login-code-links{display:flex;justify-content:space-between;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.CdkAutofill, selector: "[cdkAutofill]", outputs: ["cdkAutofill"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RegexValidatorDirective, selector: "[regexValidator]", inputs: ["regex"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "component", type: RecoveryCodes, selector: "shell-recovery-codes", inputs: ["codes", "appName", "username"], outputs: ["done"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Login, decorators: [{
             type: Component,
@@ -3680,9 +4044,240 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         RegexValidatorDirective,
                         TextFieldModule,
                         DatePipe,
-                    ], template: "@let usernameRegex = USERNAME_REGEX;\n@let passwordRegex = PASSWORD_REGEX;\n<div class=\"login-container\">\n  <div class=\"login-header\">\n    <h2 class=\"text-text-primary\">{{ appName }}</h2>\n    <p class=\"text-secondary-info\">Sign in to continue</p>\n  </div>\n  <form #loginForm=\"ngForm\" (ngSubmit)=\"onSubmit($event)\" class=\"login-form\">\n    <mat-form-field appearance=\"outline\" class=\"login-field\">\n      <mat-label>Username</mat-label>\n      <input\n        #usernameInput\n        matInput\n        placeholder=\"Enter username\"\n        [(ngModel)]=\"model.username\"\n        name=\"username\"\n        [disabled]=\"submitted\"\n        required\n        regexValidator\n        [regex]=\"usernameRegex\"\n        (cdkAutofill)=\"onAutofill($event, usernameInput)\"\n      />\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" class=\"login-field\">\n      <mat-label>Password</mat-label>\n      <input\n        #passwordInput\n        matInput\n        placeholder=\"Enter password\"\n        [type]=\"hide() ? 'password' : 'text'\"\n        [(ngModel)]=\"model.password\"\n        name=\"password\"\n        [disabled]=\"submitted\"\n        regexValidator\n        [regex]=\"passwordRegex\"\n        (cdkAutofill)=\"onAutofill($event, passwordInput)\"\n      />\n      <button\n        mat-icon-button\n        matSuffix\n        type=\"button\"\n        (click)=\"clickEvent($event)\"\n        [attr.aria-label]=\"'Hide password'\"\n        [attr.aria-pressed]=\"hide()\"\n      >\n        <mat-icon>{{ hide() ? 'visibility_off' : 'visibility' }}</mat-icon>\n      </button>\n    </mat-form-field>\n    <button mat-flat-button type=\"submit\" [disabled]=\"submitted\" class=\"login-button\">\n      Login\n    </button>\n  </form>\n  @if (errors.length > 0) {\n    <div class=\"login-errors\">\n      @for (error of errors; track error.ndx) {\n        <div class=\"login-error text-loss\">{{ error.message }}</div>\n      }\n    </div>\n  }\n  @if (authenticationService.conflictSessions(); as sessions) {\n    <div class=\"login-conflict\">\n      <p class=\"text-secondary-info\">\n        You are already signed in {{ sessions.length === 1 ? 'somewhere else' : 'on other devices' }}:\n      </p>\n      @for (session of sessions; track session.sessionId ?? $index) {\n        <div class=\"login-conflict-session\">\n          @if (canEndIndividually()) {\n            <mat-checkbox\n              [checked]=\"isSelected(session)\"\n              [disabled]=\"!session.sessionId\"\n              (change)=\"toggleSelected(session, $event.checked)\"\n              [attr.aria-label]=\"'End ' + deviceLabel(session)\"\n            ></mat-checkbox>\n          }\n          <span class=\"text-secondary-info\">\n            <strong>{{ deviceLabel(session) }}</strong>\n            <!-- signedInAtEpoch is when the password was typed. startEpoch is\n                 when the row was written, which renewal resets \u2014 so it is shown\n                 only when there is nothing better, and labelled for what it is. -->\n            @if (session.signedInAtEpoch) {\n              \u2014 since {{ session.signedInAtEpoch | date:'short' }}\n            } @else {\n              \u2014 last active {{ session.startEpoch | date:'short' }}\n            }\n          </span>\n        </div>\n      }\n      <div class=\"login-conflict-actions\">\n        <button mat-stroked-button type=\"button\" (click)=\"onCancelConflict()\">Cancel</button>\n        @if (selectedCount() > 0) {\n          <button mat-stroked-button type=\"button\" (click)=\"onEndSelected()\">\n            End {{ selectedCount() === 1 ? 'that one' : selectedCount() + ' of them' }} and sign in\n          </button>\n        }\n        <button mat-stroked-button type=\"button\" (click)=\"onTakeOver()\">\n          {{ sessions.length === 1 ? 'End it and sign in' : 'End them all and sign in' }}\n        </button>\n        @if (authenticationService.additionalSignInAllowed()) {\n          <button mat-flat-button type=\"button\" (click)=\"onSignInAsWell()\">Sign in here as well</button>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.login-header{margin-bottom:32px}.login-header h2{font-size:1.5rem;font-weight:300;margin-bottom:8px}.login-form{display:flex;flex-direction:column;align-items:center;gap:8px;width:320px}.login-field{width:100%;text-align:left}.login-takeover{align-self:flex-start;margin-top:4px}.login-button{margin-top:8px;width:100%}.login-errors{margin-top:16px;max-width:320px}.login-conflict{margin-top:16px;max-width:320px;padding:12px 16px;border-radius:4px;background-color:var(--color-surface-light);font-size:.85rem;text-align:left}.login-conflict p{margin:0 0 8px}.login-conflict-session{display:flex;align-items:center;gap:8px;margin:4px 0}.login-conflict-actions{flex-wrap:wrap;display:flex;gap:8px;margin-top:12px;justify-content:flex-end}.login-error{padding:8px 12px;margin-bottom:4px;font-size:.85rem;border-radius:4px;background-color:var(--color-surface-light)}\n"] }]
+                        RecoveryCodes,
+                    ], template: "@let usernameRegex = USERNAME_REGEX;\n@let passwordRegex = PASSWORD_REGEX;\n<div class=\"login-container\">\n  <div class=\"login-header\">\n    <h2 class=\"text-text-primary\">{{ appName }}</h2>\n    <p class=\"text-secondary-info\">Sign in to continue</p>\n  </div>\n  @let step = authenticationService.codeStep();\n  @if (authenticationService.recoveryCodesToShow(); as codes) {\n    <shell-recovery-codes [codes]=\"codes\" [appName]=\"appName\" [username]=\"model.username\" (done)=\"onRecoveryCodesSaved()\" />\n  } @else if (step !== 'none') {\n    <form (submit)=\"onSubmitCode($event)\" class=\"login-form\" aria-label=\"Authenticator code\">\n      @if (step === 'setup' && authenticationService.setupChallenge(); as challenge) {\n        <p class=\"text-secondary-info login-code-lead\">\n          Set up your authenticator: scan this with Google Authenticator (or Authy, 1Password),\n          then enter the 6-digit code it shows.\n        </p>\n        <img class=\"login-qr\" [src]=\"challenge.qr\" alt=\"QR code for your authenticator app\" width=\"200\" height=\"200\" />\n        <p class=\"text-secondary-info login-key\">Can't scan? Enter this key: <code>{{ challenge.key }}</code></p>\n      } @else {\n        <p class=\"text-secondary-info login-code-lead\">\n          @if (useRecovery()) {\n            Enter one of your recovery codes.\n          } @else {\n            Enter the 6-digit code from your authenticator app.\n          }\n        </p>\n      }\n      <mat-form-field appearance=\"outline\" class=\"login-field\">\n        <mat-label>{{ useRecovery() ? 'Recovery code' : 'Code' }}</mat-label>\n        <input\n          matInput\n          name=\"code\"\n          [(ngModel)]=\"codeText\"\n          [disabled]=\"submitted\"\n          [attr.inputmode]=\"useRecovery() ? 'text' : 'numeric'\"\n          [attr.autocomplete]=\"useRecovery() ? 'off' : 'one-time-code'\"\n          [attr.maxlength]=\"useRecovery() ? 16 : 7\"\n          [placeholder]=\"useRecovery() ? 'xxxxx-xxxxx' : '123456'\"\n          autofocus\n        />\n      </mat-form-field>\n      <button mat-flat-button type=\"submit\" [disabled]=\"submitted\" class=\"login-button\">\n        {{ step === 'setup' ? 'Finish setup and sign in' : 'Sign in' }}\n      </button>\n      <div class=\"login-code-links\">\n        @if (step === 'code') {\n          <button mat-button type=\"button\" (click)=\"onToggleRecovery()\">\n            {{ useRecovery() ? 'Use the 6-digit code' : 'Use a recovery code' }}\n          </button>\n        }\n        <button mat-button type=\"button\" (click)=\"onCancelCode()\">Back</button>\n      </div>\n    </form>\n  } @else {\n  <form #loginForm=\"ngForm\" (ngSubmit)=\"onSubmit($event)\" class=\"login-form\">\n    <mat-form-field appearance=\"outline\" class=\"login-field\">\n      <mat-label>Username</mat-label>\n      <input\n        #usernameInput\n        matInput\n        placeholder=\"Enter username\"\n        [(ngModel)]=\"model.username\"\n        name=\"username\"\n        [disabled]=\"submitted\"\n        required\n        regexValidator\n        [regex]=\"usernameRegex\"\n        (cdkAutofill)=\"onAutofill($event, usernameInput)\"\n      />\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" class=\"login-field\">\n      <mat-label>Password</mat-label>\n      <input\n        #passwordInput\n        matInput\n        placeholder=\"Enter password\"\n        [type]=\"hide() ? 'password' : 'text'\"\n        [(ngModel)]=\"model.password\"\n        name=\"password\"\n        [disabled]=\"submitted\"\n        regexValidator\n        [regex]=\"passwordRegex\"\n        (cdkAutofill)=\"onAutofill($event, passwordInput)\"\n      />\n      <button\n        mat-icon-button\n        matSuffix\n        type=\"button\"\n        (click)=\"clickEvent($event)\"\n        [attr.aria-label]=\"'Hide password'\"\n        [attr.aria-pressed]=\"hide()\"\n      >\n        <mat-icon>{{ hide() ? 'visibility_off' : 'visibility' }}</mat-icon>\n      </button>\n    </mat-form-field>\n    <button mat-flat-button type=\"submit\" [disabled]=\"submitted\" class=\"login-button\">\n      Login\n    </button>\n  </form>\n  }\n  @if (errors.length > 0) {\n    <div class=\"login-errors\">\n      @for (error of errors; track error.ndx) {\n        <div class=\"login-error text-loss\">{{ error.message }}</div>\n      }\n    </div>\n  }\n  @if (authenticationService.conflictSessions(); as sessions) {\n    <div class=\"login-conflict\">\n      <p class=\"text-secondary-info\">\n        You are already signed in {{ sessions.length === 1 ? 'somewhere else' : 'on other devices' }}:\n      </p>\n      @for (session of sessions; track session.sessionId ?? $index) {\n        <div class=\"login-conflict-session\">\n          @if (canEndIndividually()) {\n            <mat-checkbox\n              [checked]=\"isSelected(session)\"\n              [disabled]=\"!session.sessionId\"\n              (change)=\"toggleSelected(session, $event.checked)\"\n              [attr.aria-label]=\"'End ' + deviceLabel(session)\"\n            ></mat-checkbox>\n          }\n          <span class=\"text-secondary-info\">\n            <strong>{{ deviceLabel(session) }}</strong>\n            <!-- signedInAtEpoch is when the password was typed. startEpoch is\n                 when the row was written, which renewal resets \u2014 so it is shown\n                 only when there is nothing better, and labelled for what it is. -->\n            @if (session.signedInAtEpoch) {\n              \u2014 since {{ session.signedInAtEpoch | date:'short' }}\n            } @else {\n              \u2014 last active {{ session.startEpoch | date:'short' }}\n            }\n          </span>\n        </div>\n      }\n      <div class=\"login-conflict-actions\">\n        <button mat-stroked-button type=\"button\" (click)=\"onCancelConflict()\">Cancel</button>\n        @if (selectedCount() > 0) {\n          <button mat-stroked-button type=\"button\" (click)=\"onEndSelected()\">\n            End {{ selectedCount() === 1 ? 'that one' : selectedCount() + ' of them' }} and sign in\n          </button>\n        }\n        <button mat-stroked-button type=\"button\" (click)=\"onTakeOver()\">\n          {{ sessions.length === 1 ? 'End it and sign in' : 'End them all and sign in' }}\n        </button>\n        @if (authenticationService.additionalSignInAllowed()) {\n          <button mat-flat-button type=\"button\" (click)=\"onSignInAsWell()\">Sign in here as well</button>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.login-header{margin-bottom:32px}.login-header h2{font-size:1.5rem;font-weight:300;margin-bottom:8px}.login-form{display:flex;flex-direction:column;align-items:center;gap:8px;width:320px}.login-field{width:100%;text-align:left}.login-takeover{align-self:flex-start;margin-top:4px}.login-button{margin-top:8px;width:100%}.login-errors{margin-top:16px;max-width:320px}.login-conflict{margin-top:16px;max-width:320px;padding:12px 16px;border-radius:4px;background-color:var(--color-surface-light);font-size:.85rem;text-align:left}.login-conflict p{margin:0 0 8px}.login-conflict-session{display:flex;align-items:center;gap:8px;margin:4px 0}.login-conflict-actions{flex-wrap:wrap;display:flex;gap:8px;margin-top:12px;justify-content:flex-end}.login-error{padding:8px 12px;margin-bottom:4px;font-size:.85rem;border-radius:4px;background-color:var(--color-surface-light)}.login-code-lead{margin:0 0 8px;font-size:.9rem}.login-qr{display:block;margin:4px auto 8px;image-rendering:pixelated}.login-key{margin:0 0 8px;font-size:.8rem;word-break:break-all}.login-code-links{display:flex;justify-content:space-between;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: AuthenticationService }, { type: i2$1.Router }] });
 
+/*
+Created by Franz Zemen 2026-10-17
+License Type: UNLICENSED
+
+Settings → Sign-in code (authenticator-sign-in.prd.md D5, D7). Shared by every app: each routes to
+`AuthenticatorSettings` wherever its settings live.
+
+  - Set up an authenticator (or replace one): the password again, plus a current code or a
+    recovery code when replacing → QR + typed-in key → the first code → 10 recovery codes.
+  - New recovery codes: a current code → 10 new ones; the old ones stop working.
+
+⛔ There is deliberately no "remove" and no "turn off" here (D13). Those are AWS-only; the screen
+says how to get them done.
+*/
+class AuthenticatorSettings {
+    constructor() {
+        this.#auth = inject(AuthenticationService);
+        this.appName = inject(SHELL_APP_NAME, { optional: true }) ?? 'BrokenStock';
+        this.status = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        this.mode = signal('view', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.error = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.challenge = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "challenge" }] : /* istanbul ignore next */ []));
+        this.codes = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "codes" }] : /* istanbul ignore next */ []));
+        this.useRecovery = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "useRecovery" }] : /* istanbul ignore next */ []));
+        this.password = '';
+        this.code = '';
+    }
+    #auth;
+    ngOnInit() {
+        void this.#load();
+    }
+    async #load() {
+        try {
+            this.status.set(await this.#auth.authenticatorStatus());
+        }
+        catch (err) {
+            this.error.set(err instanceof AuthenticatorError ? err.message : 'Could not load your sign-in code settings.');
+        }
+    }
+    begin(mode) {
+        this.#reset();
+        this.mode.set(mode);
+    }
+    cancel() {
+        this.#reset();
+        this.mode.set('view');
+    }
+    toggleRecovery() {
+        this.useRecovery.set(!this.useRecovery());
+        this.code = '';
+    }
+    /** Password (and current code when replacing) → QR. */
+    async start(event) {
+        event.preventDefault();
+        await this.#run(async () => {
+            const current = this.status()?.enrolled
+                ? (this.useRecovery() ? { recoveryCode: this.code.trim() } : { code: this.code.trim() })
+                : {};
+            this.challenge.set(await this.#auth.startAuthenticatorSetup(this.password, current));
+            this.password = '';
+            this.code = '';
+            this.useRecovery.set(false);
+            this.mode.set('scan');
+        });
+    }
+    /** The first code from the newly scanned app → recovery codes. */
+    async confirm(event) {
+        event.preventDefault();
+        await this.#run(async () => {
+            this.codes.set(await this.#auth.confirmAuthenticatorSetup(this.code.trim()));
+            this.challenge.set(undefined);
+            this.code = '';
+            this.mode.set('codes');
+        });
+    }
+    async reissue(event) {
+        event.preventDefault();
+        await this.#run(async () => {
+            this.codes.set(await this.#auth.reissueRecoveryCodes(this.code.trim()));
+            this.code = '';
+            this.mode.set('codes');
+        });
+    }
+    async codesSaved() {
+        this.#reset();
+        this.mode.set('view');
+        await this.#load();
+    }
+    async #run(work) {
+        this.busy.set(true);
+        this.error.set(undefined);
+        try {
+            await work();
+        }
+        catch (err) {
+            this.error.set(err instanceof AuthenticatorError ? err.message : 'Something went wrong');
+            this.code = '';
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    #reset() {
+        this.password = '';
+        this.code = '';
+        this.error.set(undefined);
+        this.challenge.set(undefined);
+        this.codes.set(undefined);
+        this.useRecovery.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: AuthenticatorSettings, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: AuthenticatorSettings, isStandalone: true, selector: "shell-authenticator-settings", ngImport: i0, template: "<section class=\"authenticator-settings\">\n  <h2 class=\"text-text-primary\">Sign-in code</h2>\n  <p class=\"text-secondary-info\">\n    Signing in asks for your password and a 6-digit code from an authenticator app on your phone\n    (Google Authenticator, Authy, 1Password).\n  </p>\n\n  @if (status(); as s) {\n    @switch (mode()) {\n      @case ('view') {\n        <dl class=\"authenticator-facts\">\n          <dt>Authenticator</dt>\n          <dd>{{ s.enrolled ? 'Set up' : 'Not set up' }}</dd>\n          @if (s.enrolled) {\n            <dt>Recovery codes left</dt>\n            <dd [class.text-loss]=\"s.recoveryCodesLeft <= 2\">{{ s.recoveryCodesLeft }} of 10</dd>\n          }\n          <dt>Code required at sign-in</dt>\n          <dd>{{ s.enrolled ? 'Yes' : (s.codeRequired ? 'Yes' : 'Not yet \u2014 set one up') }}</dd>\n        </dl>\n        <div class=\"authenticator-actions\">\n          <button mat-flat-button type=\"button\" (click)=\"begin('password')\">\n            {{ s.enrolled ? 'Replace authenticator' : 'Set up authenticator' }}\n          </button>\n          @if (s.enrolled) {\n            <button mat-stroked-button type=\"button\" (click)=\"begin('reissue')\">New recovery codes</button>\n          }\n        </div>\n        <p class=\"text-secondary-info authenticator-note\">\n          Lost your phone? Sign in with a recovery code, then replace the authenticator here.\n          No recovery codes left? Only the administrator can reset it, from AWS \u2014 there is no way\n          to switch the code off from inside the app.\n        </p>\n      }\n\n      @case ('password') {\n        <form class=\"authenticator-form\" (submit)=\"start($event)\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Password</mat-label>\n            <input matInput type=\"password\" name=\"password\" [(ngModel)]=\"password\" autocomplete=\"current-password\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          @if (s.enrolled) {\n            <mat-form-field appearance=\"outline\">\n              <mat-label>{{ useRecovery() ? 'Recovery code' : 'Current 6-digit code' }}</mat-label>\n              <input matInput name=\"code\" [(ngModel)]=\"code\" [attr.inputmode]=\"useRecovery() ? 'text' : 'numeric'\"\n                     [attr.autocomplete]=\"useRecovery() ? 'off' : 'one-time-code'\" [disabled]=\"busy()\" />\n            </mat-form-field>\n            <button mat-button type=\"button\" class=\"authenticator-link\" (click)=\"toggleRecovery()\">\n              {{ useRecovery() ? 'Use the 6-digit code' : 'Lost the phone? Use a recovery code' }}\n            </button>\n          }\n          <div class=\"authenticator-actions\">\n            <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n            <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !password || (s.enrolled && !code.trim())\">Continue</button>\n          </div>\n        </form>\n      }\n\n      @case ('scan') {\n        @if (challenge(); as c) {\n          <form class=\"authenticator-form\" (submit)=\"confirm($event)\">\n            <p class=\"text-secondary-info\">Scan this with your authenticator app, then enter the 6-digit code it shows.</p>\n            <img class=\"authenticator-qr\" [src]=\"c.qr\" alt=\"QR code for your authenticator app\" width=\"200\" height=\"200\" />\n            <p class=\"text-secondary-info authenticator-key\">Can't scan? Enter this key: <code>{{ c.key }}</code></p>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Code</mat-label>\n              <input matInput name=\"code\" [(ngModel)]=\"code\" inputmode=\"numeric\" autocomplete=\"one-time-code\" [disabled]=\"busy()\" />\n            </mat-form-field>\n            <div class=\"authenticator-actions\">\n              <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n              <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !code.trim()\">Finish setup</button>\n            </div>\n            @if (s.enrolled) {\n              <p class=\"text-secondary-info authenticator-note\">Your old authenticator keeps working until you finish.</p>\n            }\n          </form>\n        }\n      }\n\n      @case ('reissue') {\n        <form class=\"authenticator-form\" (submit)=\"reissue($event)\">\n          <p class=\"text-secondary-info\">Ten new recovery codes. The ones you have now will stop working.</p>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Current 6-digit code</mat-label>\n            <input matInput name=\"code\" [(ngModel)]=\"code\" inputmode=\"numeric\" autocomplete=\"one-time-code\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          <div class=\"authenticator-actions\">\n            <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n            <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !code.trim()\">Make new codes</button>\n          </div>\n        </form>\n      }\n\n      @case ('codes') {\n        @if (codes(); as list) {\n          <shell-recovery-codes [codes]=\"list\" [appName]=\"appName\" (done)=\"codesSaved()\" />\n        }\n      }\n    }\n  }\n\n  @if (error(); as message) {\n    <p class=\"text-loss authenticator-error\" role=\"alert\">{{ message }}</p>\n  }\n</section>\n", styles: [".authenticator-settings{max-width:480px;padding:16px}.authenticator-settings h2{font-size:1.25rem;font-weight:400;margin:0 0 8px}.authenticator-facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:16px 0}.authenticator-facts dt{color:var(--color-secondary-info)}.authenticator-facts dd{margin:0}.authenticator-form{display:flex;flex-direction:column;gap:4px;max-width:320px;margin-top:12px}.authenticator-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.authenticator-link{align-self:flex-start}.authenticator-note{margin-top:16px;font-size:.85rem}.authenticator-qr{display:block;margin:4px 0 8px;image-rendering:pixelated}.authenticator-key{font-size:.8rem;word-break:break-all}.authenticator-error{margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: RecoveryCodes, selector: "shell-recovery-codes", inputs: ["codes", "appName", "username"], outputs: ["done"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: AuthenticatorSettings, decorators: [{
+            type: Component,
+            args: [{ selector: 'shell-authenticator-settings', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule, RecoveryCodes], template: "<section class=\"authenticator-settings\">\n  <h2 class=\"text-text-primary\">Sign-in code</h2>\n  <p class=\"text-secondary-info\">\n    Signing in asks for your password and a 6-digit code from an authenticator app on your phone\n    (Google Authenticator, Authy, 1Password).\n  </p>\n\n  @if (status(); as s) {\n    @switch (mode()) {\n      @case ('view') {\n        <dl class=\"authenticator-facts\">\n          <dt>Authenticator</dt>\n          <dd>{{ s.enrolled ? 'Set up' : 'Not set up' }}</dd>\n          @if (s.enrolled) {\n            <dt>Recovery codes left</dt>\n            <dd [class.text-loss]=\"s.recoveryCodesLeft <= 2\">{{ s.recoveryCodesLeft }} of 10</dd>\n          }\n          <dt>Code required at sign-in</dt>\n          <dd>{{ s.enrolled ? 'Yes' : (s.codeRequired ? 'Yes' : 'Not yet \u2014 set one up') }}</dd>\n        </dl>\n        <div class=\"authenticator-actions\">\n          <button mat-flat-button type=\"button\" (click)=\"begin('password')\">\n            {{ s.enrolled ? 'Replace authenticator' : 'Set up authenticator' }}\n          </button>\n          @if (s.enrolled) {\n            <button mat-stroked-button type=\"button\" (click)=\"begin('reissue')\">New recovery codes</button>\n          }\n        </div>\n        <p class=\"text-secondary-info authenticator-note\">\n          Lost your phone? Sign in with a recovery code, then replace the authenticator here.\n          No recovery codes left? Only the administrator can reset it, from AWS \u2014 there is no way\n          to switch the code off from inside the app.\n        </p>\n      }\n\n      @case ('password') {\n        <form class=\"authenticator-form\" (submit)=\"start($event)\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Password</mat-label>\n            <input matInput type=\"password\" name=\"password\" [(ngModel)]=\"password\" autocomplete=\"current-password\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          @if (s.enrolled) {\n            <mat-form-field appearance=\"outline\">\n              <mat-label>{{ useRecovery() ? 'Recovery code' : 'Current 6-digit code' }}</mat-label>\n              <input matInput name=\"code\" [(ngModel)]=\"code\" [attr.inputmode]=\"useRecovery() ? 'text' : 'numeric'\"\n                     [attr.autocomplete]=\"useRecovery() ? 'off' : 'one-time-code'\" [disabled]=\"busy()\" />\n            </mat-form-field>\n            <button mat-button type=\"button\" class=\"authenticator-link\" (click)=\"toggleRecovery()\">\n              {{ useRecovery() ? 'Use the 6-digit code' : 'Lost the phone? Use a recovery code' }}\n            </button>\n          }\n          <div class=\"authenticator-actions\">\n            <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n            <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !password || (s.enrolled && !code.trim())\">Continue</button>\n          </div>\n        </form>\n      }\n\n      @case ('scan') {\n        @if (challenge(); as c) {\n          <form class=\"authenticator-form\" (submit)=\"confirm($event)\">\n            <p class=\"text-secondary-info\">Scan this with your authenticator app, then enter the 6-digit code it shows.</p>\n            <img class=\"authenticator-qr\" [src]=\"c.qr\" alt=\"QR code for your authenticator app\" width=\"200\" height=\"200\" />\n            <p class=\"text-secondary-info authenticator-key\">Can't scan? Enter this key: <code>{{ c.key }}</code></p>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Code</mat-label>\n              <input matInput name=\"code\" [(ngModel)]=\"code\" inputmode=\"numeric\" autocomplete=\"one-time-code\" [disabled]=\"busy()\" />\n            </mat-form-field>\n            <div class=\"authenticator-actions\">\n              <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n              <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !code.trim()\">Finish setup</button>\n            </div>\n            @if (s.enrolled) {\n              <p class=\"text-secondary-info authenticator-note\">Your old authenticator keeps working until you finish.</p>\n            }\n          </form>\n        }\n      }\n\n      @case ('reissue') {\n        <form class=\"authenticator-form\" (submit)=\"reissue($event)\">\n          <p class=\"text-secondary-info\">Ten new recovery codes. The ones you have now will stop working.</p>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Current 6-digit code</mat-label>\n            <input matInput name=\"code\" [(ngModel)]=\"code\" inputmode=\"numeric\" autocomplete=\"one-time-code\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          <div class=\"authenticator-actions\">\n            <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n            <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !code.trim()\">Make new codes</button>\n          </div>\n        </form>\n      }\n\n      @case ('codes') {\n        @if (codes(); as list) {\n          <shell-recovery-codes [codes]=\"list\" [appName]=\"appName\" (done)=\"codesSaved()\" />\n        }\n      }\n    }\n  }\n\n  @if (error(); as message) {\n    <p class=\"text-loss authenticator-error\" role=\"alert\">{{ message }}</p>\n  }\n</section>\n", styles: [".authenticator-settings{max-width:480px;padding:16px}.authenticator-settings h2{font-size:1.25rem;font-weight:400;margin:0 0 8px}.authenticator-facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:16px 0}.authenticator-facts dt{color:var(--color-secondary-info)}.authenticator-facts dd{margin:0}.authenticator-form{display:flex;flex-direction:column;gap:4px;max-width:320px;margin-top:12px}.authenticator-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.authenticator-link{align-self:flex-start}.authenticator-note{margin-top:16px;font-size:.85rem}.authenticator-qr{display:block;margin:4px 0 8px;image-rendering:pixelated}.authenticator-key{font-size:.8rem;word-break:break-all}.authenticator-error{margin-top:12px}\n"] }]
+        }] });
+
+/*
+Created by Franz Zemen 2026-10-17
+License Type: UNLICENSED
+
+"Enter your code" — the reusable dialog for the on-demand check (authenticator-sign-in.prd.md D15).
+Live Trading opens it to arm trading; anything else that needs the code again can too.
+
+Closes with the time the server recorded (epoch ms), or `undefined` if cancelled. Wrong codes keep
+the dialog open with the reason in plain words; after five, "Too many attempts." and nothing more.
+
+    const at = await openCodeDialog(dialog, {title: 'Arm live trading', purpose: 'arm-live-trading'});
+*/
+class CodeDialog {
+    constructor() {
+        this.data = inject(MAT_DIALOG_DATA);
+        this.dialogRef = inject((MatDialogRef));
+        this.#auth = inject(AuthenticationService);
+        this.text = '';
+        this.useRecovery = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "useRecovery" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.error = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    }
+    #auth;
+    toggleRecovery() {
+        this.useRecovery.set(!this.useRecovery());
+        this.text = '';
+        this.error.set(undefined);
+    }
+    async submit(event) {
+        event.preventDefault();
+        const typed = this.text.trim();
+        if (!typed)
+            return;
+        this.busy.set(true);
+        this.error.set(undefined);
+        try {
+            const at = await this.#auth.verifyCode(this.useRecovery() ? { recoveryCode: typed } : { code: typed }, this.data.purpose);
+            this.dialogRef.close(at);
+        }
+        catch (err) {
+            this.error.set(err instanceof AuthenticatorError ? err.message : 'Something went wrong');
+            this.text = '';
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CodeDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: CodeDialog, isStandalone: true, selector: "shell-code-dialog", ngImport: i0, template: `
+    <h2 mat-dialog-title>{{ data.title }}</h2>
+    <form (submit)="submit($event)">
+      <mat-dialog-content>
+        <p>{{ data.message ?? (useRecovery() ? 'Enter one of your recovery codes.' : 'Enter the 6-digit code from your authenticator app.') }}</p>
+        <mat-form-field appearance="outline" class="code-field">
+          <mat-label>{{ useRecovery() ? 'Recovery code' : 'Code' }}</mat-label>
+          <input matInput name="code" [(ngModel)]="text" [disabled]="busy()"
+                 [attr.inputmode]="useRecovery() ? 'text' : 'numeric'"
+                 [attr.autocomplete]="useRecovery() ? 'off' : 'one-time-code'" cdkFocusInitial />
+        </mat-form-field>
+        @if (error(); as message) {
+          <p class="code-error text-loss" role="alert">{{ message }}</p>
+        }
+      </mat-dialog-content>
+      <mat-dialog-actions align="end">
+        <button mat-button type="button" (click)="toggleRecovery()">{{ useRecovery() ? 'Use the 6-digit code' : 'Use a recovery code' }}</button>
+        <button mat-button type="button" (click)="dialogRef.close(undefined)">Cancel</button>
+        <button mat-flat-button type="submit" [disabled]="busy() || !text.trim()">{{ data.confirmLabel ?? 'Confirm' }}</button>
+      </mat-dialog-actions>
+    </form>
+  `, isInline: true, styles: [":host{display:block}.code-field{width:100%}.code-error{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CodeDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'shell-code-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, MatDialogModule, MatButtonModule, MatFormFieldModule, MatInputModule], template: `
+    <h2 mat-dialog-title>{{ data.title }}</h2>
+    <form (submit)="submit($event)">
+      <mat-dialog-content>
+        <p>{{ data.message ?? (useRecovery() ? 'Enter one of your recovery codes.' : 'Enter the 6-digit code from your authenticator app.') }}</p>
+        <mat-form-field appearance="outline" class="code-field">
+          <mat-label>{{ useRecovery() ? 'Recovery code' : 'Code' }}</mat-label>
+          <input matInput name="code" [(ngModel)]="text" [disabled]="busy()"
+                 [attr.inputmode]="useRecovery() ? 'text' : 'numeric'"
+                 [attr.autocomplete]="useRecovery() ? 'off' : 'one-time-code'" cdkFocusInitial />
+        </mat-form-field>
+        @if (error(); as message) {
+          <p class="code-error text-loss" role="alert">{{ message }}</p>
+        }
+      </mat-dialog-content>
+      <mat-dialog-actions align="end">
+        <button mat-button type="button" (click)="toggleRecovery()">{{ useRecovery() ? 'Use the 6-digit code' : 'Use a recovery code' }}</button>
+        <button mat-button type="button" (click)="dialogRef.close(undefined)">Cancel</button>
+        <button mat-flat-button type="submit" [disabled]="busy() || !text.trim()">{{ data.confirmLabel ?? 'Confirm' }}</button>
+      </mat-dialog-actions>
+    </form>
+  `, styles: [":host{display:block}.code-field{width:100%}.code-error{margin:0}\n"] }]
+        }] });
+/** Opens the dialog; resolves with the recorded time (epoch ms), or undefined when cancelled. */
+function openCodeDialog(dialog, data) {
+    return firstValueFrom(dialog.open(CodeDialog, { data, width: '360px' }).afterClosed());
+}
+
 class ConfirmDialog {
     constructor() {
         this.data = inject(MAT_DIALOG_DATA);
@@ -3701,7 +4296,7 @@ class ConfirmDialog {
       <button mat-button (click)="dialogRef.close(false)">{{ data.cancelLabel ?? 'Cancel' }}</button>
       <button mat-flat-button color="warn" (click)="dialogRef.close(true)">{{ data.confirmLabel ?? 'Confirm' }}</button>
     </mat-dialog-actions>
-  `, isInline: true, styles: [":host{display:block}.warning-message{color:var(--color-warning);margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+  `, isInline: true, styles: [":host{display:block}.warning-message{color:var(--color-warning);margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ConfirmDialog, decorators: [{
             type: Component,
@@ -3729,5 +4324,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthenticationService, CLEAR_USAGE, CommandRegistryService, CommandService, CommandTerminal, ConfirmDialog, FAQ_CONTENT_LOADER, FAQ_DEV_EDITOR, FAQ_DEV_MODE, FAQ_DEV_WORKSPACE_ROOT, FAQ_PUBLIC_PUBLISHER, FAQ_PUBLIC_SITE_BASE_URL, FaqAuthoringPanel, FaqHistoryService, FaqMarkdownRendererService, FaqModal, FaqService, HELP_USAGE, HttpFaqContentLoader, KeyboardShortcutService, Login, MainContent, PhoneLayoutService, PublicFaqIndex, PublicFaqPage, PublicFaqToc, RegexValidatorDirective, SESSION_TOKEN_KEY, SHELL_APP_NAME, SHELL_AUTH_URLS, SHELL_COMMANDS, SHELL_MENU_ITEMS, SHELL_PHONE_MEDIA_QUERY, SHELL_POST_LOGIN_ROUTE, SHELL_SHARED_SESSION, SessionTokenStore, Shell, SideMenu, StatusBar, TerminalFocusService, TerminalVisibilityService, ThemeService, ThinkingService, audienceAllowed, authGuard, authInterceptor, buildFallbackChain, decideRenewal, guestGuard, matchesRoute, provideShellConfig, tokenize };
+export { AuthenticationService, AuthenticatorError, AuthenticatorSettings, CLEAR_USAGE, CODE_STEP, CodeDialog, CommandRegistryService, CommandService, CommandTerminal, ConfirmDialog, FAQ_CONTENT_LOADER, FAQ_DEV_EDITOR, FAQ_DEV_MODE, FAQ_DEV_WORKSPACE_ROOT, FAQ_PUBLIC_PUBLISHER, FAQ_PUBLIC_SITE_BASE_URL, FaqAuthoringPanel, FaqHistoryService, FaqMarkdownRendererService, FaqModal, FaqService, HELP_USAGE, HttpFaqContentLoader, KeyboardShortcutService, Login, MainContent, PhoneLayoutService, PublicFaqIndex, PublicFaqPage, PublicFaqToc, RecoveryCodes, RegexValidatorDirective, SESSION_TOKEN_KEY, SHELL_APP_NAME, SHELL_AUTH_URLS, SHELL_COMMANDS, SHELL_MENU_ITEMS, SHELL_PHONE_MEDIA_QUERY, SHELL_POST_LOGIN_ROUTE, SHELL_SHARED_SESSION, SessionTokenStore, Shell, SideMenu, StatusBar, TOO_MANY_ATTEMPTS, TerminalFocusService, TerminalVisibilityService, ThemeService, ThinkingService, audienceAllowed, authGuard, authInterceptor, authenticatorMessage, buildFallbackChain, buildLoginBody, decideRenewal, guestGuard, matchesRoute, openCodeDialog, provideShellConfig, recoveryCodesFile, tokenize };
 //# sourceMappingURL=franzzemen-brokenstock-shell.mjs.map