@nauticana/sail 1.1.33 → 1.1.35

package/src/agent/util/studio_errors.ts

@@ -1,3 +1,4 @@
+import { errorDetail } from '../../util/errors';
 import { AgentFieldError, AgentValidationProblem } from '../model/agent_studio';
 
 /**
@@ -59,3 +60,13 @@ export function retryAfterSeconds(err: unknown): number | undefined {
   const seconds = Number(raw);
   return Number.isFinite(seconds) && seconds >= 0 ? seconds : undefined;
 }
+
+/** One message for a failed Studio call: the conflict cause, the field errors, or the detail. */
+export function studioErrorMessage(err: unknown, fallback = 'Request failed.'): string {
+  const cause = studioConflictCause(err);
+  if (cause === 'revision') return 'This agent changed since you opened it. Reload and reapply your edits.';
+  if (cause === 'sealed') return 'A wider scope sealed this section, so narrower layers cannot change it.';
+  const fields = studioFieldErrors(err);
+  if (fields.length > 0) return fields.map((f) => `${f.field}: ${f.message}`).join('; ');
+  return errorDetail(err, fallback);
+}

package/src/agent/util/turn_timeline.ts

@@ -1,4 +1,5 @@
 import {
+  Citation,
   EvidenceRef,
   TurnApprovalEvent,
   TurnEffectEvent,
@@ -31,6 +32,7 @@ export type TurnTimelineItem =
   | { kind: 'evidence'; refs: EvidenceRef[] }
   | { kind: 'progress'; progress: TurnProgressEvent }
   | { kind: 'extension'; extension: TurnExtensionEvent }
+  | { kind: 'citations'; citations: Citation[] }
   | { kind: 'result' };
 
 function errorClassOf(tool: TurnToolEvent): string | undefined {
@@ -62,7 +64,8 @@ export function buildTurnTimeline(events: readonly unknown[]): TurnTimelineItem[
   };
 
   const applyApproval = (approval: TurnApprovalEvent | undefined, state: ToolCallApproval): void => {
-    if (!approval) return;
+    // A turn-level suspension carries an empty approval; turn status shows it, not a tool row.
+    if (!approval?.call_id) return;
     const call = callFor(approval);
     call.approval = state;
     call.decision = approval.decision;
@@ -106,6 +109,9 @@ export function buildTurnTimeline(events: readonly unknown[]): TurnTimelineItem[
       case 'extension':
         if (event.extension) items.push({ kind: 'extension', extension: event.extension });
         break;
+      case 'citations':
+        if (event.citations?.length) items.push({ kind: 'citations', citations: event.citations });
+        break;
       case 'result':
         items.push({ kind: 'result' });
         break;

package/src/component/agency/agency_earnings_summary.html

@@ -10,15 +10,15 @@
   @for (balance of value.balances; track balance.currency) {
     <div class="agency-earnings-summary__metric" [attr.data-currency]="balance.currency">
       <span class="agency-earnings-summary__label">Held ({{ balance.currency }})</span>
-      <span class="agency-earnings-summary__value">{{ format(balance.heldMinor, balance.currency) }}</span>
+      <span class="agency-earnings-summary__value">{{ balance.heldMinor | sailMoney:balance.currency }}</span>
     </div>
     <div class="agency-earnings-summary__metric" [attr.data-currency]="balance.currency">
       <span class="agency-earnings-summary__label">Due ({{ balance.currency }})</span>
-      <span class="agency-earnings-summary__value">{{ format(balance.dueMinor, balance.currency) }}</span>
+      <span class="agency-earnings-summary__value">{{ balance.dueMinor | sailMoney:balance.currency }}</span>
     </div>
     <div class="agency-earnings-summary__metric" [attr.data-currency]="balance.currency">
       <span class="agency-earnings-summary__label">Paid ({{ balance.currency }})</span>
-      <span class="agency-earnings-summary__value">{{ format(balance.paidMinor, balance.currency) }}</span>
+      <span class="agency-earnings-summary__value">{{ balance.paidMinor | sailMoney:balance.currency }}</span>
     </div>
   }
 }

package/src/component/agency/agency_earnings_summary.ts

@@ -1,15 +1,15 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { AgencyEarnings } from '../../model/agency';
-import { formatMinorCurrency } from '../../util/money';
+import { MoneyPipe } from '../../service/money_pipe';
 
 @Component({
   selector: 'sail-agency-earnings-summary',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MoneyPipe],
   templateUrl: './agency_earnings_summary.html',
   host: { class: 'agency-earnings-summary' },
 })
 export class AgencyEarningsSummaryComponent {
   readonly earnings = input<AgencyEarnings | null>(null);
   readonly activeClients = input(0);
-  readonly format = formatMinorCurrency;
 }

package/src/component/agency/agency_payout_history.html

@@ -6,7 +6,7 @@
         @for (payout of payouts(); track payout.id) {
           <tr>
             <td>{{ payout.cutoffAt | date: 'yyyy-MM':'UTC' }}</td>
-            <td>{{ format(payout.amountMinor, payout.currency) }}</td>
+            <td>{{ payout.amountMinor | sailMoney:payout.currency }}</td>
             <td><sail-status-chip domain="agency_payout_status" [value]="payout.status" /></td>
             <td>{{ payout.paidAt ? (payout.paidAt | date: 'mediumDate':'UTC') : '' }}</td>
           </tr>

package/src/component/agency/agency_payout_history.ts

@@ -1,18 +1,17 @@
 import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { AgencyPayout } from '../../model/agency';
-import { formatMinorCurrency } from '../../util/money';
+import { MoneyPipe } from '../../service/money_pipe';
 import { StatusChipComponent } from '../billing/status_chip';
 
 @Component({
   selector: 'sail-agency-payout-history',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [DatePipe, StatusChipComponent],
+  imports: [DatePipe, StatusChipComponent, MoneyPipe],
   templateUrl: './agency_payout_history.html',
   host: { class: 'agency-payout-history' },
 })
 export class AgencyPayoutHistoryComponent {
   readonly payouts = input<AgencyPayout[]>([]);
   readonly emptyMessage = input('No agency payouts yet.');
-  readonly format = formatMinorCurrency;
 }

package/src/component/agency/commission_ledger.html

@@ -7,7 +7,7 @@
           <tr [class.commission-ledger__reversal]="entry.entryType === 'R'">
             <td>{{ entry.clientName }}</td>
             <td>{{ entry.periodStart | date: 'yyyy-MM-dd':'UTC' }} – {{ entry.periodEnd | date: 'yyyy-MM-dd':'UTC' }}</td>
-            <td>{{ format(entry.amountMinor, entry.currency) }}</td>
+            <td>{{ entry.amountMinor | sailMoney:entry.currency }}</td>
             <td><sail-status-chip domain="agency_commission_status" [value]="entry.status" /></td>
           </tr>
         }

package/src/component/agency/commission_ledger.ts

@@ -1,18 +1,17 @@
 import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { AgencyEarningEntry } from '../../model/agency';
-import { formatMinorCurrency } from '../../util/money';
+import { MoneyPipe } from '../../service/money_pipe';
 import { StatusChipComponent } from '../billing/status_chip';
 
 @Component({
   selector: 'sail-commission-ledger',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [DatePipe, StatusChipComponent],
+  imports: [DatePipe, StatusChipComponent, MoneyPipe],
   templateUrl: './commission_ledger.html',
   host: { class: 'commission-ledger' },
 })
 export class CommissionLedgerComponent {
   readonly entries = input<AgencyEarningEntry[]>([]);
   readonly emptyMessage = input('No commission activity yet.');
-  readonly format = formatMinorCurrency;
 }

package/src/component/billing/plan_selector.ts

@@ -37,7 +37,7 @@ export class PlanSelectorComponent {
     const overrides = this.ctaLabels();
     const out: Record<string, string> = {};
     for (const plan of this.plans()) {
-      const mode = plan.activationMode ?? '';
+      const mode = plan.activationMode;
       out[plan.id] = overrides[mode] ?? PlanSelectorComponent.DEFAULT_CTA[mode] ?? 'Choose';
     }
     return out;

package/src/component/billing/price_selector.ts

@@ -1,12 +1,12 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, output } from '@angular/core';
 import { PlanPrice } from '../../model/appdata';
-import { formatCurrency, PERIOD_TYPE_INFO } from '../../util/money';
+import { formatMinor, PERIOD_TYPE_INFO } from '../../util/money';
 
 /** Per-offer view model for accessible, currency-formatted rendering. */
 interface OfferRow {
   key:        string;   // stable id for tracking / selection (priceId or composite)
   price:      PlanPrice;
-  amountText: string;   // currency-formatted major amount
+  amountText: string;   // amount formatted at the offer's exponent
   cycleText:  string;   // "Monthly" / "Annual" / …
   termText:   string;   // commitment note, '' when the term is a single cycle
 }
@@ -16,8 +16,8 @@ interface OfferRow {
  * sells several offers (billing cycle × commitment term); the customer picks one
  * at checkout, then its `priceId` feeds `<sail-checkout-button [priceId]>`.
  *
- * Pure presentational — stateless. Amounts are formatted with `Intl` from each
- * offer's currency, so non-2-decimal currencies (JPY 0, BHD 3) render correctly.
+ * Pure presentational — stateless. Amounts are minor units formatted at the
+ * exponent keel sends with each offer.
  * Period codes map to copy via `[cycleLabels]` (override/extend the defaults).
  */
 @Component({
@@ -45,7 +45,7 @@ export class PriceSelectorComponent {
       return {
         key:        p.priceId || `${p.billingCycle}-${p.termType}-${p.termCount}`,
         price:      p,
-        amountText: formatCurrency(p.amount, p.currency),
+        amountText: formatMinor(p.amountMinor, p.currency, p.exponent),
         cycleText:  cycleLabel(p.billingCycle),
         termText:   singleCycle ? '' : `${p.termCount}-${termNoun(p.termType)} commitment`,
       };

package/src/component/login/account_deletion.html

@@ -13,10 +13,23 @@
         <input matInput formControlName="confirm" autocomplete="off" required>
       </mat-form-field>
 
-      <mat-form-field appearance="outline">
-        <mat-label>Confirm your password</mat-label>
-        <input matInput type="password" formControlName="password" autocomplete="current-password" required>
-      </mat-form-field>
+      @if (method() === 'password') {
+        <mat-form-field appearance="outline">
+          <mat-label>Confirm your password</mat-label>
+          <input matInput type="password" formControlName="credential" autocomplete="current-password" required>
+        </mat-form-field>
+      } @else {
+        <button matButton type="button" [disabled]="loading()" (click)="sendCode()">
+          {{ codeSent() ? 'Resend code' : 'Send me a code' }}
+        </button>
+        <mat-form-field appearance="outline">
+          <mat-label>One-time code</mat-label>
+          <input matInput formControlName="credential" inputmode="numeric" autocomplete="one-time-code" required>
+        </mat-form-field>
+      }
+      <button matButton type="button" (click)="toggleMethod()">
+        {{ method() === 'password' ? 'Use a one-time code instead' : 'Use my password instead' }}
+      </button>
 
       <mat-form-field appearance="outline">
         <mat-label>Reason (optional)</mat-label>

package/src/component/login/account_deletion.ts

@@ -1,7 +1,7 @@
 import {
-  ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input, signal,
+  ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input, linkedSignal, signal,
 } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -10,18 +10,17 @@ import { Router, RouterLink } from '@angular/router';
 import { BaseAsync } from '../abstract/base_async';
 import { BaseAuthService } from '../../service/auth.service';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+import { ReauthCredentials } from '../../model/auth';
 
 /**
  * AccountDeletionComponent — App Store / Play Store compliance surface.
  *
- * Typed-confirmation UX (standard anti-fat-finger pattern): user must type
- * the literal `confirmationText` (default "DELETE") before the destructive
- * button enables. Optional `reason` textarea forwarded to the backend's
- * DELETE /api/user/account for the audit trail.
- *
- * On success: local session cleared by BaseAuthService.deleteAccount; this
- * component then navigates to `config.accountDeletedRoute` (default
- * `/login/local`).
+ * The destructive button enables once the user types `confirmationText`
+ * (default "DELETE") and re-authenticates with a password or, for accounts
+ * without one, a one-time code (`reauthMethod`, switchable in the form).
+ * The optional reason is forwarded to DELETE /api/user/account for audit.
+ * On success the session is cleared and the router goes to
+ * `config.accountDeletedRoute` (default `/login/local`).
  */
 @Component({
   selector: 'sail-account-deletion',
@@ -44,37 +43,45 @@ export class AccountDeletionComponent extends BaseAsync {
     inject(SAIL_GUI_CONFIG, { optional: true }) ?? DEFAULT_CONFIG;
 
   readonly confirmationText = input('DELETE');
+  readonly reauthMethod = input<'password' | 'code'>('password');
+  readonly method = linkedSignal(() => this.reauthMethod());
+  readonly codeSent = signal(false);
 
   readonly form = this.fb.nonNullable.group({
-    confirm:  ['', Validators.required],
-    password: ['', Validators.required],   // re-auth gate required by keel
-    reason:   [''],
+    confirm:    ['', Validators.required],
+    credential: ['', Validators.required],
+    reason:     [''],
   });
 
-  readonly typedValue = signal('');
-  private readonly passwordValue = signal('');
+  private readonly confirmValue = toSignal(this.form.controls.confirm.valueChanges, { initialValue: '' });
+  private readonly credentialValue = toSignal(this.form.controls.credential.valueChanges, { initialValue: '' });
   readonly canSubmit = computed(() =>
-    this.typedValue() === this.confirmationText() &&
-    !!this.passwordValue() &&
+    this.confirmValue() === this.confirmationText() &&
+    !!this.credentialValue() &&
     !this.loading(),
   );
 
-  constructor() {
-    super();
-    this.form.controls.confirm.valueChanges
-      .pipe(takeUntilDestroyed())
-      .subscribe((v) => this.typedValue.set(v ?? ''));
-    this.form.controls.password.valueChanges
-      .pipe(takeUntilDestroyed())
-      .subscribe((v) => this.passwordValue.set(v ?? ''));
+  toggleMethod() {
+    this.method.update((m) => m === 'password' ? 'code' : 'password');
+    this.codeSent.set(false);
+    this.form.controls.credential.reset();
+    this.clearMessages();
+  }
+
+  sendCode() {
+    this.run(this.auth.sendReauthCode(), (res) => {
+      this.codeSent.set(true);
+      this.successMessage.set(`A code was sent to your ${res.channel}.`);
+    }, 'Failed to send a code. Please try again.');
   }
 
   onDelete() {
     if (!this.canSubmit()) return;
-    const password = this.form.controls.password.value;
-    const reason = this.form.controls.reason.value?.trim() || undefined;
+    const credential = this.form.controls.credential.value;
+    const reauth: ReauthCredentials = this.method() === 'code' ? { reauthCode: credential } : { password: credential };
+    const reason = this.form.controls.reason.value.trim() || undefined;
     this.run(
-      this.auth.deleteAccount({ password }, reason),
+      this.auth.deleteAccount(reauth, reason),
       () => this.router.navigateByUrl(this.guiConfig.accountDeletedRoute ?? '/login/local'),
       'Failed to delete account. Please try again.',
     );

package/src/component/login/social_login.ts

@@ -7,7 +7,7 @@ import { BaseAuthService } from '../../service/auth.service';
 import { loadScript } from '../../service/script_loader';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
 import {
-  ConsentState, LoginResponseSocial, SignupConsent, SocialProvider,
+  ConsentState, LoginResponseSocial, SignupConsent, SocialName, SocialProvider,
 } from '../../model/auth';
 import { firstValueFrom } from 'rxjs';
 
@@ -22,7 +22,8 @@ const APPLE_URL = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/
  * buttons using each provider's official SDK.
  *
  * Flow: click → SDK returns ID token → BaseAuthService.loginSocial(provider,
- * idToken, signupConsent) → emits loginSuccess / loginError.
+ * idToken, signupConsent) → emits loginSuccess / loginError. Apple's
+ * first-authorization name rides along as loginSuccess.socialName.
  *
  * Requires `googleClientId` / `appleServiceId` in SailGuiConfig; providers
  * without config are hidden (with a console.warn for diagnostics).
@@ -104,17 +105,17 @@ export class SocialLoginComponent extends BaseAsync implements OnInit {
     try {
       const res = await AppleID.auth.signIn();
       const token = res?.authorization?.id_token;
-      if (token) this.onIdToken('apple', token);
+      if (token) this.onIdToken('apple', token, res.user?.name);
     } catch (err: unknown) {
       this.loginError.emit(err instanceof Error ? err : new Error(String(err)));
     }
   }
 
-  private onIdToken(provider: SocialProvider, idToken: string) {
+  private onIdToken(provider: SocialProvider, idToken: string, socialName?: SocialName) {
     const fallback = `Sign-in with ${provider} failed.`;
     this.run(
       this.auth.loginSocial(provider, idToken, this.buildSignupConsent()),
-      (resp) => this.loginSuccess.emit(resp),
+      (resp) => this.loginSuccess.emit(socialName ? { ...resp, socialName } : resp),
       fallback,
       (err) => this.loginError.emit(this.toError(err, fallback)),
     );

package/src/component/payout/bank_info_form.html

@@ -9,12 +9,12 @@
     <mat-form-field appearance="outline" class="full-width">
       <mat-label>Country</mat-label>
       <mat-select formControlName="countryCode">
-        @for (c of countryProfiles(); track c.code) {
-          <mat-option [value]="c.code">{{ c.label }} ({{ c.currency }})</mat-option>
+        @for (c of options()?.countries ?? []; track c.Id) {
+          <mat-option [value]="c.Id">{{ c.Caption }} ({{ c.Currency }})</mat-option>
         }
       </mat-select>
     </mat-form-field>
-    <p class="hint">Sets your tax ID format + payout currency</p>
+    <p class="hint">Sets your payout currency</p>
 
     <mat-form-field appearance="outline" class="full-width">
       <mat-label>Account holder name</mat-label>
@@ -23,10 +23,19 @@
     <p class="hint">Legal name on the bank account (must match government ID)</p>
 
     <mat-form-field appearance="outline" class="full-width">
-      <mat-label>{{ taxIdLabel() }}</mat-label>
-      <input matInput formControlName="taxId" [placeholder]="taxIdPlaceholder()">
+      <mat-label>Tax ID type</mat-label>
+      <mat-select formControlName="taxIdType">
+        @for (t of options()?.taxIdTypes ?? []; track t.code) {
+          <mat-option [value]="t.code">{{ t.caption }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="full-width">
+      <mat-label>Tax ID</mat-label>
+      <input matInput formControlName="taxId">
     </mat-form-field>
-    <p class="hint">{{ taxIdHint() }}</p>
+    <p class="hint">Shared with the tax authority for annual reporting</p>
 
     <mat-form-field appearance="outline" class="full-width">
       <mat-label>Billing address</mat-label>

package/src/component/payout/bank_info_form.ts

@@ -1,39 +1,23 @@
-import { ChangeDetectionStrategy, Component, computed, effect, inject, input, linkedSignal, output } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { BankInfoFormValue, CountryProfile } from '../../model/appdata';
+import { forkJoin, map } from 'rxjs';
+import { BankInfoFormValue } from '../../model/appdata';
+import { Country } from '../../model/geo';
+import { LabelService } from '../../service/label.service';
+import { BackendService } from '../../service/rest_service';
 
 /**
- * Default country profiles bundled with sail. Covers CA / US / EU; downstream
- * apps can pass a different list via the `[countryProfiles]` input.
- *
- * Codes match basis constant_header `tax_id_type` seeded by keel:
- *   S = SIN (CA), N = SSN (US), E = EIN (US business), V = VAT (EU), O = Other.
- */
-export const DEFAULT_COUNTRY_PROFILES: CountryProfile[] = [
-  { code: 'CA', label: 'Canada',         currency: 'CAD', taxIdType: 'S', taxIdLabel: 'SIN',        taxIdPlaceholder: '123456789',   taxIdHint: 'Social Insurance Number — shared with the tax authority for annual reporting' },
-  { code: 'US', label: 'United States',  currency: 'USD', taxIdType: 'N', taxIdLabel: 'SSN or EIN', taxIdPlaceholder: '123-45-6789', taxIdHint: 'SSN for an individual recipient, EIN for an incorporated recipient' },
-  { code: 'DE', label: 'Germany (EU)',   currency: 'EUR', taxIdType: 'V', taxIdLabel: 'VAT number', taxIdPlaceholder: 'DE123456789', taxIdHint: 'VAT registration number' },
-];
-
-/**
- * Payout bank-info form.
- *
- * Captures the basis `user_bank_info` fields (country, currency, account
- * holder, tax id, billing address, agreement). Emits the form value via
- * `(submitted)` — first-time setup POSTs through the app's registration
- * service; CHANGES to an existing destination go through
- * PayoutService.replaceBankInfo (atomic version replacement), never a
- * generic CRUD edit.
- *
- * Ships no CSS — the consuming app styles the classes globally.
- *
- * Selector: <sail-payout-bank-info-form>
+ * Payout bank-info form over keel's `user_bank_info` fields. Countries come from the `country`
+ * table (its default currency is the payout currency) and tax-id types from the `tax_id_type`
+ * domain, so the caller's role needs `TABLE SELECT country`. Emits through `(submitted)`:
+ * first-time setup posts through the app's registration service, changes through
+ * `PayoutService.replaceBankInfo`, never generic CRUD. Ships no CSS.
  */
 @Component({
   selector: 'sail-payout-bank-info-form',
@@ -45,75 +29,47 @@ export const DEFAULT_COUNTRY_PROFILES: CountryProfile[] = [
   templateUrl: './bank_info_form.html',
 })
 export class PayoutBankInfoFormComponent {
-  /** Step title rendered above the form. */
   readonly title = input('Payment and Tax');
-  /** Optional explainer rendered below the title. */
   readonly intro = input('Tax + payout details. Bank account itself is set up with the payout provider in a separate step — only tax-reporting and dispute-correspondence fields are collected here.');
-  /** Override the list of supported countries — keep the default for most apps. */
-  readonly countryProfiles = input<CountryProfile[]>(DEFAULT_COUNTRY_PROFILES);
   /** Provider code persisted on user_bank_info.provider — must match the app's keel --payout_provider. */
   readonly provider = input.required<string>();
-  /** Wording on the provider-agreement checkbox. Override to name the live provider. */
   readonly agreementLabel = input('I agree to the payout provider account agreement');
-  /** Submit-button label — wizards usually use "Next >". */
   readonly submitLabel = input('Next >');
-  /** When true, the back button renders alongside submit. */
   readonly showBack = input(true);
 
-  /**
-   * Emitted on submit as application-layer input. The consumer must use its
-   * registration service for first-time setup or PayoutService.replaceBankInfo
-   * for changes; never send this payload through generic CRUD.
-   */
   readonly submitted = output<BankInfoFormValue>();
-  /** Emitted when the user clicks Back. */
   readonly back = output<void>();
 
-  private readonly fb = inject(FormBuilder);
+  private readonly backend = inject(BackendService);
+  private readonly labels = inject(LabelService);
 
-  readonly form = this.fb.group({
+  readonly form = inject(FormBuilder).group({
     countryCode:       ['', Validators.required],
+    taxIdType:         ['', Validators.required],
     accountHolderName: ['', Validators.required],
     taxId:             ['', Validators.required],
     billingAddress:    ['', Validators.required],
     providerAgreement: [false, Validators.requiredTrue],
   });
 
-  // linkedSignal, not a field initializer: the bound countryProfiles input
-  // isn't available yet during construction.
-  private readonly selectedCountry = linkedSignal<CountryProfile | undefined>(() => this.countryProfiles()[0]);
+  readonly options = toSignal(forkJoin({
+    countries: this.backend.list<Country>('country', undefined, { limit: 1000, orderBy: 'caption' }),
+    labels: this.labels.loadLabels('tax_id_type'),
+  }).pipe(map(({ countries }) => ({ countries, taxIdTypes: this.labels.options('tax_id_type') }))));
 
-  readonly taxIdLabel       = computed(() => this.selectedCountry()?.taxIdLabel ?? '');
-  readonly taxIdPlaceholder = computed(() => this.selectedCountry()?.taxIdPlaceholder ?? '');
-  readonly taxIdHint        = computed(() => this.selectedCountry()?.taxIdHint ?? '');
-
-  constructor() {
-    // Keep the form's country in the bound profile list (never a phantom default).
-    effect(() => {
-      const profiles = this.countryProfiles();
-      const current = this.form.controls.countryCode.value;
-      if (!profiles.some((c) => c.code === current)) {
-        this.form.controls.countryCode.setValue(profiles[0]?.code ?? '');
-      }
-    });
-    this.form.controls.countryCode.valueChanges
-      .pipe(takeUntilDestroyed())
-      .subscribe((code) => {
-        const profiles = this.countryProfiles();
-        this.selectedCountry.set(profiles.find((c) => c.code === code) ?? profiles[0]);
-      });
-  }
+  readonly country = toSignal(this.form.controls.countryCode.valueChanges, { initialValue: '' });
+  readonly currency = computed(() => this.options()?.countries.find((c) => c.Id === this.country())?.Currency ?? '');
 
   submit() {
-    const country = this.selectedCountry();
-    if (this.form.invalid || !country) return;
-    const v = this.form.value;
+    const currency = this.currency();
+    if (this.form.invalid || !currency) return;
+    const v = this.form.getRawValue();
     this.submitted.emit({
-      countryCode:       country.code,
-      currency:          country.currency,
+      countryCode:       v.countryCode!,
+      currency,
       accountHolderName: v.accountHolderName!,
       billingAddress:    v.billingAddress!,
-      taxIdType:         country.taxIdType,
+      taxIdType:         v.taxIdType!,
       taxId:             v.taxId!,
       provider:          this.provider(),
       providerAgreement: v.providerAgreement!,

package/src/component/security/api_keys.html

@@ -0,0 +1,78 @@
+<div class="api-keys">
+  @if (minted(); as key) {
+    <section class="api-keys__minted" role="status" aria-label="New key">
+      <p>Copy this key now; it is not shown again.</p>
+      <code class="api-keys__secret">{{ key.api_key }}</code>
+      <button matButton type="button" (click)="minted.set(null)">I have stored it</button>
+    </section>
+  }
+
+  @if (canGenerate) {
+    <form class="api-keys__new" [formGroup]="form" (ngSubmit)="mint()">
+      <mat-form-field>
+        <mat-label>Key name</mat-label>
+        <input matInput formControlName="keyName" maxlength="100">
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Allowed networks (optional)</mat-label>
+        <input matInput formControlName="allowedCidrs" maxlength="2000">
+        <mat-hint>Comma-separated addresses or CIDR ranges. Empty allows any address.</mat-hint>
+      </mat-form-field>
+      <fieldset class="api-keys__scopes">
+        <legend>Scopes</legend>
+        @for (scope of scopes(); track scope.code) {
+          <mat-checkbox [checked]="form.controls.scopes.value.includes(scope.code)"
+            (change)="toggleScope(scope.code, $event.checked)">{{ scope.caption }}</mat-checkbox>
+        }
+      </fieldset>
+      <button matButton="filled" type="submit" [disabled]="form.invalid || loading()">Create key</button>
+    </form>
+  }
+
+  @if (keys().length > 0) {
+    <table class="api-keys__table">
+      <thead>
+        <tr><th>Name</th><th>Prefix</th><th>Scopes</th><th>Networks</th><th>Created</th><th>Last used</th><th><span class="cdk-visually-hidden">Actions</span></th></tr>
+      </thead>
+      <tbody>
+        @for (key of keys(); track key.Id) {
+          <tr [class.api-keys__inactive]="!key.IsActive">
+            <td>{{ key.KeyName }}@if (!key.IsActive) { (inactive) }</td>
+            <td><code>{{ key.KeyPrefix }}…</code></td>
+            <td>{{ key.Scopes }}</td>
+            <td>
+              @if (restricting() === key.Id) {
+                <mat-form-field>
+                  <mat-label>Allowed networks</mat-label>
+                  <input matInput [formControl]="networks" maxlength="2000" (keydown.enter)="saveNetworks(key)">
+                </mat-form-field>
+              } @else {
+                {{ key.AllowedCidrs || 'any address' }}
+              }
+            </td>
+            <td>{{ key.CreatedAt | date: 'short' }}</td>
+            <td>{{ key.LastUsedAt ? (key.LastUsedAt | date: 'short') : '' }}</td>
+            <td>
+              @if (restricting() === key.Id) {
+                <button matButton type="button" (click)="restricting.set(null)">Cancel</button>
+                <button matButton="filled" type="button" [disabled]="networks.invalid || loading()" (click)="saveNetworks(key)">Save</button>
+              } @else {
+                @if (key.IsActive && canRestrict) {
+                  <button matButton type="button" [disabled]="loading()" (click)="editNetworks(key)">Restrict networks</button>
+                }
+                @if (key.IsActive && canRevoke) {
+                  <button matButton type="button" [disabled]="loading()" (click)="revoke(key)">Revoke</button>
+                }
+              }
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  } @else if (!loading()) {
+    <p class="empty-state">No API key yet.</p>
+  }
+
+  @if (errorMessage()) { <div class="auth-error" role="alert">{{ errorMessage() }}</div> }
+  @if (successMessage()) { <div class="auth-success" role="status">{{ successMessage() }}</div> }
+</div>