@nauticana/sail 1.1.34 → 1.1.36

package/src/agent/service/conversation.service.ts

@@ -7,6 +7,7 @@ import {
   ConversationStreamError,
   ConversationStreamFailure,
   ConversationTurnAccepted,
+  ConversationTurnPage,
   ConversationTurnRequest,
 } from '../model/conversation';
 import { TurnReplyFrame } from '../model/reply_frame';
@@ -34,6 +35,15 @@ export class ConversationService extends BaseRestService {
     return this.http.post<ConversationTurnAccepted>(this.conversationUrl('turn'), request);
   }
 
+  /** The person's turns, newest first; `before` continues from a page's `next_before`. */
+  turns(workRef = '', before = '', limit = 0): Observable<ConversationTurnPage> {
+    const params: Record<string, string> = {};
+    if (workRef) params['work_ref'] = workRef;
+    if (before) params['before'] = before;
+    if (limit) params['limit'] = String(limit);
+    return this.http.get<ConversationTurnPage>(this.conversationUrl('turns'), { params });
+  }
+
   /** Cancel is a request: the turn stays open until its final frame arrives. */
   cancel(requestId: string, reason?: string): Observable<ConversationTurnAccepted> {
     return this.http.post<ConversationTurnAccepted>(this.conversationUrl('turn/cancel'), {

package/src/component/agency/agency_accept.ts

@@ -3,7 +3,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { AgencyInvite } from '../../model/agency';
 import { AgencyService } from '../../service/agency.service';
-import { errorCode, errorDetail } from '../../util/errors';
+import { errorCode, errorDetail, httpStatus } from '../../util/errors';
 
 const NO_PARTNER_CODE = 'agency_no_partner';
 
@@ -71,7 +71,7 @@ export class AgencyAcceptComponent implements OnInit {
       },
       error: (error: unknown) => {
         this.accepting.set(false);
-        if (this.statusOf(error) === 409 && errorCode(error) === NO_PARTNER_CODE) {
+        if (httpStatus(error) === 409 && errorCode(error) === NO_PARTNER_CODE) {
           localStorage.setItem(this.tokenStorageKey(), this.activeToken);
           this.needsBusiness.set(true);
           return;
@@ -85,10 +85,4 @@ export class AgencyAcceptComponent implements OnInit {
     localStorage.setItem(this.tokenStorageKey(), this.activeToken);
     this.businessSetupRequested.emit(this.activeToken);
   }
-
-  private statusOf(error: unknown): number | undefined {
-    return typeof error === 'object' && error !== null && 'status' in error
-      ? Number((error as { status?: unknown }).status)
-      : undefined;
-  }
 }

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/oauth_connection/oauth_connection_panel.ts

@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { OAuthConnectionService } from '../../service/oauth_connection.service';
+import { httpStatus } from '../../util/errors';
 import { OAuthConnectionStatus, OAuthConnectionView, PartnerCredential, OAuthProviderDescriptor, OAuthProviderFieldRole } from '../../model/oauth_connection';
 
 /**
@@ -90,7 +91,7 @@ export class OAuthConnectionPanelComponent implements OnInit {
   }
 
   private completeMsg(e: unknown): string {
-    const status = (e as { status?: number })?.status;
+    const status = httpStatus(e);
     if (status === 403) return 'This connection was started by another user — start again from this account.';
     if (status === 400) return 'The connection link expired — start again.';
     return this.msg(e, 'Could not complete the connection.');

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,85 @@
+<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>
+      <mat-form-field>
+        <mat-label>Expires (optional)</mat-label>
+        <input matInput type="datetime-local" formControlName="expiresAt">
+      </mat-form-field>
+      @if (scopes().length) {
+        <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>Expires</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.ExpiresAt ? (key.ExpiresAt | date: 'short') : 'never' }}</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>

package/src/component/security/api_keys.ts

@@ -0,0 +1,96 @@
+import { DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, inject, input, signal } from '@angular/core';
+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 { ApiKey, MintedApiKey } from '../../model/access';
+import { AccessService } from '../../service/access.service';
+import { LabelOption } from '../../service/label.service';
+import { BaseAsync } from '../abstract/base_async';
+
+/**
+ * The partner's API keys: mint one with scopes, allowed networks and an optional expiry (the
+ * plaintext shows once), restrict its networks later, or revoke it. The app passes the scopes it
+ * offers; keel's `ScopePolicy` decides and may supply them. Selector: <sail-api-keys>.
+ */
+@Component({
+  selector: 'sail-api-keys',
+  templateUrl: './api_keys.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [DatePipe, ReactiveFormsModule, MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule],
+})
+export class ApiKeysComponent extends BaseAsync implements OnInit {
+  private readonly access = inject(AccessService);
+  private readonly fb = inject(FormBuilder).nonNullable;
+
+  /** Scopes offered for a new key, as code and caption. */
+  readonly scopes = input<LabelOption[]>([]);
+
+  readonly canGenerate = this.access.canApiKeyAction('generate');
+  readonly canRestrict = this.access.canApiKeyAction('restrict');
+  readonly canRevoke = this.access.canRevokeApiKey();
+  readonly keys = signal<ApiKey[]>([]);
+  readonly minted = signal<MintedApiKey | null>(null);
+  /** Id of the key whose networks are being edited. */
+  readonly restricting = signal<number | null>(null);
+  readonly form = this.fb.group({
+    keyName:      ['', [Validators.required, Validators.maxLength(100)]],
+    allowedCidrs: ['', Validators.maxLength(2000)],
+    scopes:       [[] as string[]],
+    expiresAt:    [''],
+  });
+  readonly networks = this.fb.control('', Validators.maxLength(2000));
+
+  ngOnInit(): void {
+    this.load();
+  }
+
+  load(): void {
+    this.run(this.access.apiKeys(), (rows) => this.keys.set(rows), 'Failed to load API keys.');
+  }
+
+  toggleScope(code: string, checked: boolean): void {
+    const control = this.form.controls.scopes;
+    control.setValue(checked ? [...control.value, code] : control.value.filter((s) => s !== code));
+  }
+
+  mint(): void {
+    if (this.form.invalid) return;
+    const { keyName, scopes, allowedCidrs, expiresAt } = this.form.getRawValue();
+    this.run(this.access.mintApiKey({
+      key_name: keyName,
+      scopes: scopes.join(','),
+      allowed_cidrs: allowedCidrs,
+      expires_at: expiresAt ? new Date(expiresAt).toISOString() : undefined,
+    }), (key) => {
+      this.minted.set(key);
+      this.form.reset();
+      this.load();
+    }, 'Failed to create the key.');
+  }
+
+  editNetworks(key: ApiKey): void {
+    this.networks.setValue(key.AllowedCidrs ?? '');
+    this.restricting.set(key.Id);
+  }
+
+  saveNetworks(key: ApiKey): void {
+    if (this.networks.invalid) return;
+    this.run(this.access.restrictApiKey(key.Id, this.networks.value), () => {
+      this.restricting.set(null);
+      this.successMessage.set(`Networks of "${key.KeyName}" saved.`);
+      this.load();
+    }, 'Failed to save the networks.');
+  }
+
+  revoke(key: ApiKey): void {
+    if (!confirm(`Revoke key "${key.KeyName}" (${key.KeyPrefix}…)? Anything using it stops working.`)) return;
+    this.run(this.access.revokeApiKey(key.Id), () => {
+      this.successMessage.set(`Key "${key.KeyName}" revoked.`);
+      this.load();
+    }, 'Failed to revoke the key.');
+  }
+}

package/src/component/security/connected_apps.html

@@ -0,0 +1,25 @@
+<div class="connected-apps">
+  @if (grants().length > 0) {
+    <table class="connected-apps__table">
+      <thead>
+        <tr><th>App</th><th>Scopes</th><th>Connected</th><th>Last used</th><th><span class="cdk-visually-hidden">Actions</span></th></tr>
+      </thead>
+      <tbody>
+        @for (grant of grants(); track grant.clientId) {
+          <tr>
+            <td>{{ grant.clientName || grant.clientId }}</td>
+            <td>{{ grant.scopes.join(', ') }}</td>
+            <td>{{ grant.authorizedAt | date: 'short' }}</td>
+            <td>{{ grant.lastIssuedAt | date: 'short' }}</td>
+            <td><button matButton type="button" [disabled]="loading()" (click)="revoke(grant)">Disconnect</button></td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  } @else if (!loading()) {
+    <p class="empty-state">No app is connected.</p>
+  }
+
+  @if (errorMessage()) { <div class="auth-error" role="alert">{{ errorMessage() }}</div> }
+  @if (successMessage()) { <div class="auth-success" role="status">{{ successMessage() }}</div> }
+</div>