@nauticana/sail 1.1.36 → 1.1.37

package/README.md

@@ -2,7 +2,7 @@
 
 A shared Angular component library for building CRUD-based admin frontends. Provides table management, form handling, navigation, authentication, two-factor authentication, and trusted device management — all driven by metadata from a [keel](https://github.com/nauticana/keel) Go backend.
 
-> **Compatibility:** sail and keel are versioned in lock-step. The current line is **sail v1.1.x ↔ keel v1.2.x**; sail v1.1.36 adopts keel v1.2.113 (API key expiry, caller-aware scope policy), sail v1.1.35 adopts keel v1.2.112 (minor-unit money, the `currency` catalog, OAuth grant routes), sail v1.1.33 adopts keel v1.2.106 (`prompt` on the login page, new-device step-up, sign-in sessions), sail v1.1.32 adopts keel v1.2.101 (the OAuth connect callback ticket), sail v1.1.31 adopts keel v1.2.100 (tenant single sign-on, DNS and HTTP-file domain verification), sail v1.1.30 adopts keel v1.2.99 (password routes; a password change signs out), sail v1.1.29 adopts keel v1.2.94 (signup: confirmation signs in, partner setup, sign-in hand-off code), sail v1.1.28 adopts keel v1.2.93 (absolute `return` for the OAuth hand-off), sail v1.1.18 adopts keel v1.2.58 (refresh-token rotation, `/public/logout`, setup intents, the realtime hub), the agency components in sail v1.1.14 require keel v1.2.41 (sail v1.1.9 needs keel v1.2.16 for the OAuth-connect layer). Earlier lines: **sail v0.5.x ↔ keel v0.5.x**, **sail v0.6.x / v0.7.x ↔ keel v0.7.x**, **sail v0.8.x ↔ keel v0.8.x**, **sail v0.9.x ↔ keel v0.9.x**. Newer sail releases extend the contract — older keel servers reject unknown endpoints with HTTP 404 / 400. The v0.8.x line additionally ships the `table_action` framework (per-table custom buttons surfaced in `TableList` / `TableSearch` / `TableEdit` / `TableDetail`); see the [Migrating to v0.7.0 §5 — TableAction](#migrating-to-v070--payout-user-payment-methods-table-actions) section for the seed shape (basis `table_action` + `authorization_object` + `authorization_object_action` rows) and the [keel/README Table Actions](https://github.com/nauticana/keel#table-actions) section for backend wiring via `handler.WrapTableAction`.
+> **Compatibility:** sail and keel are versioned in lock-step. The current line is **sail v1.1.x ↔ keel v1.2.x**; sail v1.1.37 adopts keel v1.2.114 (scopes validated against a constant list), sail v1.1.36 adopts keel v1.2.113 (API key expiry, caller-aware scope policy), sail v1.1.35 adopts keel v1.2.112 (minor-unit money, the `currency` catalog, OAuth grant routes), sail v1.1.33 adopts keel v1.2.106 (`prompt` on the login page, new-device step-up, sign-in sessions), sail v1.1.32 adopts keel v1.2.101 (the OAuth connect callback ticket), sail v1.1.31 adopts keel v1.2.100 (tenant single sign-on, DNS and HTTP-file domain verification), sail v1.1.30 adopts keel v1.2.99 (password routes; a password change signs out), sail v1.1.29 adopts keel v1.2.94 (signup: confirmation signs in, partner setup, sign-in hand-off code), sail v1.1.28 adopts keel v1.2.93 (absolute `return` for the OAuth hand-off), sail v1.1.18 adopts keel v1.2.58 (refresh-token rotation, `/public/logout`, setup intents, the realtime hub), the agency components in sail v1.1.14 require keel v1.2.41 (sail v1.1.9 needs keel v1.2.16 for the OAuth-connect layer). Earlier lines: **sail v0.5.x ↔ keel v0.5.x**, **sail v0.6.x / v0.7.x ↔ keel v0.7.x**, **sail v0.8.x ↔ keel v0.8.x**, **sail v0.9.x ↔ keel v0.9.x**. Newer sail releases extend the contract — older keel servers reject unknown endpoints with HTTP 404 / 400. The v0.8.x line additionally ships the `table_action` framework (per-table custom buttons surfaced in `TableList` / `TableSearch` / `TableEdit` / `TableDetail`); see the [Migrating to v0.7.0 §5 — TableAction](#migrating-to-v070--payout-user-payment-methods-table-actions) section for the seed shape (basis `table_action` + `authorization_object` + `authorization_object_action` rows) and the [keel/README Table Actions](https://github.com/nauticana/keel#table-actions) section for backend wiring via `handler.WrapTableAction`.
 
 **Recent additions:** `BaseAuthService.acceptToken(jwt)` — adopt an externally-minted JWT (registration / SSO-handoff flows) and run the full post-login sequence (store under the canonical `jwt` key, load appdata, init routes); apps must use this instead of writing `localStorage` directly. `BaseRestService.analytic<T>(endpoint, params?)` — GET a keel `analytic/<endpoint>` report and return its rows. `passwordPolicyValidator` + `BaseAuthService.ensurePasswordPolicy()` — validate passwords against keel's policy (via `SailGuiConfig.passwordPolicyUrl`); see Configuration reference.
 
@@ -414,7 +414,7 @@ The login flow redirects `twoFactorRequired` responses to `/login/2fa`. With `tw
 
 `SessionsComponent` (`<sail-sessions>`) lists the sessions with their `sign_in_method` captions, marks the current one, and signs out any other.
 
-`ApiKeysComponent` (`<sail-api-keys [scopes]>`) lists the partner's keys and uses the backend-provided `generate` and `restrict` table actions; controls appear only for granted actions. Pass the scopes the app offers (`LabelOption[]`) after filtering out scopes the caller may not mint; with none, keel's `ScopePolicy` supplies them. A key may carry an expiry, shown in its own column. The role also needs generic `SELECT` and `DELETE` grants to list and revoke keys. `ConnectedAppsComponent` (`<sail-connected-apps>`) lists and disconnects OAuth clients through keel's `GrantHandler` routes (v1.2.112, `RestURL.oauthGrantsURL` and `oauthGrantRevokeURL`).
+`ApiKeysComponent` (`<sail-api-keys [scopes] [scopeDomains]>`) lists the partner's keys and uses the backend-provided `generate` and `restrict` table actions; controls appear only for granted actions. Offer scopes as `LabelOption[]` or as constant domains whose values the component loads, leaving out those the caller may not mint; with none, keel's `ScopePolicy` supplies them. A key may carry an expiry, shown in its own column. The role also needs generic `SELECT` and `DELETE` grants to list and revoke keys. `ConnectedAppsComponent` (`<sail-connected-apps>`) lists and disconnects OAuth clients through keel's `GrantHandler` routes (v1.2.112, `RestURL.oauthGrantsURL` and `oauthGrantRevokeURL`).
 
 ### Cross-origin cookie requirement
 
@@ -689,7 +689,7 @@ A complete screen is the pieces above assembled over `BillingService` — no met
 
 ## Agent UI (v1.1.20)
 
-Agent Studio and agent-conversation UI live in a secondary entry point, `@nauticana/sail/agent`. Nothing in it is exported from `@nauticana/sail`, so an app that never imports it bundles none of it. It needs no additional peer dependency. The wire types match Scout v1.2.14.
+Agent Studio and agent-conversation UI live in a secondary entry point, `@nauticana/sail/agent`. Nothing in it is exported from `@nauticana/sail`, so an app that never imports it bundles none of it. It needs no additional peer dependency. The wire types match Scout v1.2.16.
 
 ```ts
 import { AgentStudioService, PromptLanguageEditorComponent, TurnStream } from '@nauticana/sail/agent';
@@ -702,7 +702,7 @@ import { AgentStudioService, PromptLanguageEditorComponent, TurnStream } from '@
 | `sail-studio-page` Guardrails tab | Shown when the `features` manifest lists `guardrails`: inherited layers read-only, the agent's own rules as an editable JSON array saved against `expected_agent_revision`, and its safety events paged by `before`. Edit needs the feature's `EDIT` action. The rail captions Scout's fixed `AgentReadiness` values (`AGENT_READINESS_CAPTIONS`). |
 | `sail-assistant-activity` | The tenant's decision records from Scout's `decisions` feature (`GET /api/agent-studio/decisions`, `AGENT_AUDIT` `VIEW`), newest first and paged by `next_before`: when, action, resource, outcome caption, who, app, and whom it acted for, named by the product's Scout `Labeler` (kind and id, or the client ref, without one). `[category]` and `[outcome]` filter. |
 | `sail-turn-thread` | The signed-in person's turns from `GET {base}turns` (`ConversationService.turns`), newest first, paged by `next_before` and optionally narrowed to `[workRef]`: `turn_status` caption, settled cost in minor units with its exponent, agent and release version. Each `task_kind` renders its result through `<ng-template sailTurnResult="kind" let-turn>` (`"*"` for any other kind; `let-turn` is a `ConversationTurn`); a failed turn without error text shows `[failedText]`; the first page reloads every `[pollMs]` while a turn is nonterminal. |
-| `sail-approval-inbox` / `ApprovalService` | The signed-in person's pending approvals (`GET /api/approval/pending`) and MCP confirmations (`GET /api/approval/confirmations`) grouped as waiting, submitted, needing reconciliation and recent; each list loads independently and a `404` leaves it empty. Approvals are approved, rejected, or edited (`POST /api/approval/resolve`); confirmations are confirmed, declined, withdrawn, or reconciled as executed or failed through `/api/approval/confirmation/*`, each control shown only when Scout says the person may. Approving asks once more; reconciling requires a note of up to 500 characters. `[open]` selects an item by key or confirmation id (an emailed link). People, workspaces and apps show their Scout `Labeler` captions. A tool's preview renders through `<ng-template sailApprovalPreview="tool" let-c>` (`"*"` for any other tool), otherwise as JSON. A `404` or `409` reloads the list; `(decided)` and `(confirmationChanged)` emit the result. |
+| `sail-approval-inbox` / `ApprovalService` | The signed-in person's pending approvals (`GET /api/approval/pending`) and MCP confirmations (`GET /api/approval/confirmations`) grouped as waiting, submitted, needing reconciliation and recent; each list loads independently and a `404` leaves it empty. Approvals are approved, rejected, or edited (`POST /api/approval/resolve`); confirmations are confirmed, declined, withdrawn, or reconciled as executed or failed through `/api/approval/confirmation/*`, each control shown only when Scout says the person may. Approving and withdrawing ask once more; reconciling requires a note of up to 500 characters. `[open]` selects an item by key or confirmation id (an emailed link); `[summary]` names a confirmation in the list and heading (default its tool); `[historyDays]` (30) and `[limit]` (200) bound the closed ones listed by creation time and count. People, workspaces and apps show their Scout `Labeler` captions. A tool's preview renders through `<ng-template sailApprovalPreview="tool" let-c>` (`"*"` for any other tool), otherwise as JSON. A `404` or `409` reloads the list; `(decided)` and `(confirmationChanged)` emit the result. |
 | `studioErrorMessage(err)` | One message for a failed Studio call: the conflict cause, the field errors, or the detail. |
 | `studioConflictCause(err)` | `'revision'` (reload the draft), `'sealed'` (a layer sits under a sealed one) or `'other'` for a `409`. |
 | `studioFieldErrors(err)` / `retryAfterSeconds(err)` | Field errors of a `400`; `Retry-After` of a `429`/`503`. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "1.1.36",
+  "version": "1.1.37",
   "description": "Metadata-driven Angular component library for CRUD admin frontends backed by the keel Go backend. Tables, forms, navigation, OTP/2FA/social auth, billing, payout onboarding.",
   "main": "src/index.ts",
   "exports": {

package/src/agent/component/approval_inbox.html

@@ -19,7 +19,7 @@
             <li>
               <button type="button" class="approval-inbox__item" [class.selected]="confirmationKey(c) === selectedKey()"
                 [attr.aria-current]="confirmationKey(c) === selectedKey()" (click)="select(confirmationKey(c))">
-                <span class="approval-inbox__summary">{{ c.tool }} · {{ c.status | sailCaption:'mcp_confirmation_status' }}</span>
+                <span class="approval-inbox__summary">{{ summary()(c) }} · {{ c.status | sailCaption:'mcp_confirmation_status' }}</span>
                 @if (c.status === 'P') {
                   <span class="approval-inbox__deadline">Expires {{ c.expires_at | date: 'medium' }}</span>
                 }
@@ -68,9 +68,9 @@
         @if (confirming()) {
           <span>Approve this action? It runs exactly as shown.</span>
           <button #yes matButton="filled" type="button" [disabled]="loading()" (click)="decide('A')">Yes, approve</button>
-          <button matButton type="button" [disabled]="loading()" (click)="cancelApprove()">Cancel</button>
+          <button matButton type="button" [disabled]="loading()" (click)="cancelAsk()">Cancel</button>
         } @else {
-          <button matButton="filled" type="button" [disabled]="loading()" (click)="askApprove()">Approve</button>
+          <button matButton="filled" type="button" [disabled]="loading()" (click)="ask('approve')">Approve</button>
           <button matButton type="button" class="warn" [disabled]="loading()" (click)="decide('X')">Reject</button>
           <button matButton type="button" [disabled]="loading() || !revisedArguments().trim()" (click)="decide('E')">Edit and run</button>
         }
@@ -80,7 +80,7 @@
 
   @if (selectedConfirmation(); as c) {
     <section class="approval-inbox__decision" aria-label="Confirmation">
-      <h3 #heading tabindex="-1">{{ c.tool }}</h3>
+      <h3 #heading tabindex="-1">{{ summary()(c) }}</h3>
       <dl>
         <dt>Workspace</dt><dd>{{ c.tenant_label || c.tenant_id }}</dd>
         <dt>Status</dt><dd>{{ c.status | sailCaption:'mcp_confirmation_status' }}@if (c.expired) { (expired) }</dd>
@@ -106,18 +106,22 @@
         </mat-form-field>
       }
       <div class="approval-inbox__actions" role="group" aria-label="Decide">
-        @if (c.can_decide) {
-          @if (confirming()) {
-            <span>Confirm this action? It runs exactly as shown.</span>
-            <button #yes matButton="filled" type="button" [disabled]="loading()" (click)="confirm(true)">Yes, confirm</button>
-            <button matButton type="button" [disabled]="loading()" (click)="cancelApprove()">Cancel</button>
-          } @else {
-            <button matButton="filled" type="button" [disabled]="loading()" (click)="askApprove()">Confirm</button>
+        @if (c.can_decide && confirming() === 'approve') {
+          <span>Confirm this action? It runs exactly as shown.</span>
+          <button #yes matButton="filled" type="button" [disabled]="loading()" (click)="confirm(true)">Yes, confirm</button>
+          <button matButton type="button" [disabled]="loading()" (click)="cancelAsk()">Cancel</button>
+        } @else if (c.can_withdraw && confirming() === 'withdraw') {
+          <span>Withdraw this confirmation? Nothing will be done.</span>
+          <button #yes matButton="filled" type="button" [disabled]="loading()" (click)="withdraw()">Yes, withdraw</button>
+          <button matButton type="button" [disabled]="loading()" (click)="cancelAsk()">Cancel</button>
+        } @else {
+          @if (c.can_decide) {
+            <button matButton="filled" type="button" [disabled]="loading()" (click)="ask('approve')">Confirm</button>
             <button matButton type="button" class="warn" [disabled]="loading()" (click)="confirm(false)">Decline</button>
           }
-        }
-        @if (c.can_withdraw) {
-          <button matButton type="button" [disabled]="loading()" (click)="withdraw()">Withdraw</button>
+          @if (c.can_withdraw) {
+            <button matButton type="button" [disabled]="loading()" (click)="ask('withdraw')">Withdraw</button>
+          }
         }
         @if (c.can_reconcile) {
           <button matButton type="button" [disabled]="loading() || !reason().trim()" (click)="reconcile('D')">Mark executed</button>

package/src/agent/component/approval_inbox.ts

@@ -49,8 +49,8 @@ const actionErrors: Record<number, string> = {
 /**
  * The signed-in person's pending approvals and MCP confirmations, grouped as waiting, submitted,
  * needing reconciliation and recent, with a decision view: approve, reject, or edit a tool call's
- * arguments; confirm, decline, withdraw, or reconcile a confirmation. Approving asks once more, and
- * reconciling requires a note. A list the backend does not serve (404) stays empty.
+ * arguments; confirm, decline, withdraw, or reconcile a confirmation. Approving and withdrawing ask
+ * once more, and reconciling requires a note. A list the backend does not serve (404) stays empty.
  * Selector: <sail-approval-inbox>.
  */
 @Component({
@@ -69,6 +69,12 @@ export class ApprovalInboxComponent extends BaseAsync implements OnInit {
 
   /** The item to open first: an approval or confirmation key, or a confirmation id from a link. */
   readonly open = input('');
+  /** How a confirmation reads in the list and as its heading. */
+  readonly summary = input<(c: Confirmation) => string>((c) => c.tool);
+  /** Days back a closed confirmation may have been created and still list; open ones always list. */
+  readonly historyDays = input(30);
+  /** Most confirmations listed, newest first. */
+  readonly limit = input(200);
 
   readonly decided = output<ApprovalRequest>();
   readonly confirmationChanged = output<Confirmation>();
@@ -81,8 +87,8 @@ export class ApprovalInboxComponent extends BaseAsync implements OnInit {
   readonly selectedKey = signal('');
   readonly reason = signal('');
   readonly revisedArguments = signal('');
-  /** The approve step awaits its second click. */
-  readonly confirming = signal(false);
+  /** The step awaiting its second click. */
+  readonly confirming = signal<'' | 'approve' | 'withdraw'>('');
   readonly selected = computed(() => this.requests().find((r) => this.key(r) === this.selectedKey()));
   readonly selectedConfirmation = computed(() => this.confirmations().find((c) => this.confirmationKey(c) === this.selectedKey()));
 
@@ -93,7 +99,8 @@ export class ApprovalInboxComponent extends BaseAsync implements OnInit {
   load(): void {
     this.run(forkJoin([
       this.listed(this.approvals.pending(), this.requests(), 'Failed to load approvals.'),
-      this.listed(this.approvals.confirmations(), this.confirmations(), 'Failed to load confirmations.'),
+      this.listed(this.approvals.confirmations(new Date(Date.now() - this.historyDays() * 86_400_000).toISOString(), this.limit()),
+        this.confirmations(), 'Failed to load confirmations.'),
     ]), ([requests, confirmations]) => {
       this.requests.set(requests);
       this.confirmations.set(confirmations);
@@ -121,16 +128,16 @@ export class ApprovalInboxComponent extends BaseAsync implements OnInit {
     this.selectedKey.set(key);
     this.reason.set('');
     this.revisedArguments.set('');
-    this.confirming.set(false);
+    this.confirming.set('');
   }
 
-  askApprove(): void {
-    this.confirming.set(true);
+  ask(step: 'approve' | 'withdraw'): void {
+    this.confirming.set(step);
     this.focus(this.yes);
   }
 
-  cancelApprove(): void {
-    this.confirming.set(false);
+  cancelAsk(): void {
+    this.confirming.set('');
     this.focus(this.heading);
   }
 
@@ -174,7 +181,7 @@ export class ApprovalInboxComponent extends BaseAsync implements OnInit {
 
   withdraw(): void {
     const c = this.selectedConfirmation();
-    if (!c || !window.confirm('Withdraw this confirmation?')) return;
+    if (!c) return;
     this.act(this.approvals.withdrawConfirmation(c), () => {
       this.load();
       return 'Withdrawn; nothing will be done.';
@@ -207,7 +214,7 @@ export class ApprovalInboxComponent extends BaseAsync implements OnInit {
   private act<T>(request: Observable<T>, done: (result: T) => string): void {
     this.run(request, (result) => {
       this.reason.set('');
-      this.confirming.set(false);
+      this.confirming.set('');
       this.successMessage.set(done(result));
       this.focus(this.heading);
     }, 'Failed to record the decision.', (err) => {

package/src/agent/model/agent_studio.ts

@@ -1,4 +1,4 @@
-/** Agent Studio wire types (Scout v1.2.7). Field names are the backend's JSON names. */
+/** Agent Studio wire types (Scout v1.2.16). Field names are the backend's JSON names. */
 
 /** R replace, A append, I intersect (non-prompt settings only). */
 export type AgentMergeMode = 'R' | 'A' | 'I';
@@ -333,6 +333,8 @@ export interface GuardrailRule {
   action: string;
   severity: string;
   params?: unknown;
+  /** Why the rule exists; a blocked answer names it. */
+  reason?: string;
 }
 
 /** Rules an agent inherits from one layer: B baseline, P platform, T tenant, Y type. */

package/src/agent/model/approval.ts

@@ -1,6 +1,6 @@
 import { PrincipalRef } from './decision';
 
-/** Scout approval desk and MCP confirmation inbox wire types (v1.2.14). Codes render through backend captions. */
+/** Scout approval desk and MCP confirmation inbox wire types (v1.2.16). Codes render through backend captions. */
 
 /** A approved, X rejected, E edited (tool-call proposals only, with revised arguments). */
 export type ApprovalVerdict = 'A' | 'X' | 'E';

package/src/agent/service/approval.service.ts

@@ -18,9 +18,9 @@ export class ApprovalService extends BaseRestService {
     return this.http.post<ApprovalRequest>(this.url(base + 'resolve'), request);
   }
 
-  /** Open confirmations and those created since `since` (RFC 3339), across the person's tenants. */
-  confirmations(since = ''): Observable<Confirmation[]> {
-    return this.http.get<Confirmation[]>(this.url(base + 'confirmations'), { params: since ? { since } : {} });
+  /** Lists open confirmations plus those since the RFC 3339 time; zero limit takes Scout's batch. */
+  confirmations(since = '', limit = 0): Observable<Confirmation[]> {
+    return this.http.get<Confirmation[]>(this.url(base + 'confirmations'), { params: { since, limit } });
   }
 
   decideConfirmation(key: ConfirmationKey, approve: boolean, note = ''): Observable<Confirmation> {

package/src/component/security/api_keys.html

@@ -22,10 +22,10 @@
         <mat-label>Expires (optional)</mat-label>
         <input matInput type="datetime-local" formControlName="expiresAt">
       </mat-form-field>
-      @if (scopes().length) {
+      @if (offered().length) {
         <fieldset class="api-keys__scopes">
           <legend>Scopes</legend>
-          @for (scope of scopes(); track scope.code) {
+          @for (scope of offered(); track scope.code) {
             <mat-checkbox [checked]="form.controls.scopes.value.includes(scope.code)"
               (change)="toggleScope(scope.code, $event.checked)">{{ scope.caption }}</mat-checkbox>
           }

package/src/component/security/api_keys.ts

@@ -1,19 +1,20 @@
 import { DatePipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, inject, input, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, computed, 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 { forkJoin } from 'rxjs';
 import { ApiKey, MintedApiKey } from '../../model/access';
 import { AccessService } from '../../service/access.service';
-import { LabelOption } from '../../service/label.service';
+import { LabelOption, LabelService } 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>.
+ * plaintext shows once), restrict its networks later, or revoke it. The app offers scopes as options
+ * or constant domains; keel's `ScopePolicy` decides and may supply them. Selector: <sail-api-keys>.
  */
 @Component({
   selector: 'sail-api-keys',
@@ -24,10 +25,15 @@ import { BaseAsync } from '../abstract/base_async';
 })
 export class ApiKeysComponent extends BaseAsync implements OnInit {
   private readonly access = inject(AccessService);
+  private readonly labels = inject(LabelService);
   private readonly fb = inject(FormBuilder).nonNullable;
 
   /** Scopes offered for a new key, as code and caption. */
   readonly scopes = input<LabelOption[]>([]);
+  /** Constant domains whose values are offered as scopes after `scopes`. */
+  readonly scopeDomains = input<string[]>([]);
+  private readonly domainScopes = signal<LabelOption[]>([]);
+  readonly offered = computed(() => [...this.scopes(), ...this.domainScopes()]);
 
   readonly canGenerate = this.access.canApiKeyAction('generate');
   readonly canRestrict = this.access.canApiKeyAction('restrict');
@@ -49,7 +55,11 @@ export class ApiKeysComponent extends BaseAsync implements OnInit {
   }
 
   load(): void {
-    this.run(this.access.apiKeys(), (rows) => this.keys.set(rows), 'Failed to load API keys.');
+    const domains = [...new Set(this.scopeDomains().map((d) => d.trim()))];
+    this.run(forkJoin([this.access.apiKeys(), ...domains.map((d) => this.labels.loadLabels(d))]), ([rows]) => {
+      this.keys.set(rows);
+      this.domainScopes.set(domains.flatMap((d) => this.labels.options(d)));
+    }, 'Failed to load API keys.');
   }
 
   toggleScope(code: string, checked: boolean): void {