@nauticana/sail 1.1.44 → 1.1.45

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.43 adopts keel v1.2.125 (plan-change overages), sail v1.1.42 adopts keel v1.2.118 (RFC 3339 timestamps, `X-Time-Zone`), sail v1.1.41 adopts keel v1.2.117 (scheduled plan changes), sail v1.1.39 and v1.1.40 adopt keel v1.2.115 (usage captions, provider-managed subscriptions, the connect disconnect route), 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`.
+> **Compatibility:** sail and keel are versioned in lock-step. The current line is **sail v1.1.x ↔ keel v1.2.x**; sail v1.1.45 adopts keel v1.2.126 (a plan change takes the offer), sail v1.1.43 adopts keel v1.2.125 (plan-change overages), sail v1.1.42 adopts keel v1.2.118 (RFC 3339 timestamps, `X-Time-Zone`), sail v1.1.41 adopts keel v1.2.117 (scheduled plan changes), sail v1.1.39 and v1.1.40 adopt keel v1.2.115 (usage captions, provider-managed subscriptions, the connect disconnect route), 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.
 
@@ -209,11 +209,14 @@ Key CSS classes used by components:
 .geocode-success, .geocode-error
 
 /* Tables */
-.edit-container, .actions-bar, .tab-content, .empty-state,
+.edit-container, .actions-bar, .tab-content, .empty-state, .empty-state__filters,
 .detail-actions, .search-actions, .select-btn, .form-container
 
-/* Navigation */
-.sidenav-container, .sidenav, .toolbar-spacer
+/* Navigation: hide .sail-skip-link until focused; .sail-main takes focus after navigation */
+.sidenav-container, .sidenav, .toolbar-spacer, .sail-skip-link, .sail-main
+
+/* Fields */
+.field-editable, .field-readonly
 
 /* State classes */
 .deleted-record, .updated-record, .new-record
@@ -264,6 +267,16 @@ this.backend.listPaginated<MyRow>('orders', { Status: 'open' }, {
 
 Default page size is 100, capped at 1000 server-side. Sail maps `limit`, `offset`, and `orderBy` to keel's `_limit`, `_offset`, and `_order` query controls. Existing callers that put those string controls in the filter map remain compatible; explicit `PageRequest` values take precedence.
 
+## Generic screens: lists, edits, confirmations
+
+- **List URL state.** `TableList` reads `_order` (`Column` or `Column DESC`, a visible column), `_limit` (one of the page sizes) and `_offset` as controls, never as filters, ignores invalid values, and writes them back on sort and page changes; sorting is server-side across all pages and resets the offset. Every other query parameter is a filter.
+- **Loading and empty states.** While a request runs the list shows a `mat-progress-bar` and sets `aria-busy`; only the latest request may replace rows. With filters active the empty state reads "No {caption} match your search", lists the filters and offers Clear search (keeps sort and page size); otherwise it shows `[emptyMessage]` or "No {caption} yet".
+- **Unsaved changes.** `BaseForm.hasUnsavedChanges()` is the dirty-state contract; `TableEdit` reports changed scalars and child rows marked insert, update or delete. Cancel and the dialog close button confirm before discarding. `TableList` delegates the contract to its open dialog, which stays open across navigation until `BaseAuthService.canDeactivate` decides; a custom dialog without the method keeps its behavior.
+- **Confirmations and notices.** `PromptService.confirm({ title, message?, action, destructive? })` returns `Observable<boolean>` from a Material dialog; `ask(options, then)` runs `then` only on the action; `notify(message)` shows a snackbar. Deletes, revocations, discards, `TableAction.confirmMessage`, and the route guard use it; an ordinary save is not confirmed. Table views report failures in their `role="alert"` region through `reportError()`.
+- **Invalid submit.** Primary actions stay enabled while a form is invalid; `submittable(control, scope)` marks it touched and focuses the first invalid field in `scope`. `<mat-error sailFieldError></mat-error>` (`FieldError`) shows the field's first validation error.
+- **Read-only fields.** `DynamicField` renders read-only values with native `readonly`, so they stay focusable and copyable; a read-only boolean shows "Yes" or "No". The lookup button stays disabled.
+- **Page shell.** `sail-navigation` renders a "Skip to content" link and wraps the outlet in `<main id="sail-main" tabindex="-1">`, focused after a path change (not on first load, a query-only change, or while the handset menu is open). Generated routes take the menu caption as their title, suffixed with `appTitle`.
+
 ## Money
 
 keel stores money as integer minor units and serves the `currency` table (`code`, `caption`, `exponent`) as the only source of exponents. `formatMinor(minor, currency, exponent)` renders an amount; `Intl` supplies the symbol and grouping only. Billing payloads (`PlanPrice`, `Subscription`, `Invoice`) carry `exponent` beside their `…Minor` fields, so they render without a catalog: `{{ invoice.totalMinor | sailMoney:invoice.currency:invoice.exponent }}`. Amounts without an exponent, such as the agency ledger, use `{{ minor | sailMoney:currency }}`: the pipe loads the catalog once through `CurrencyService` (generic REST `currency`, so the role needs `TABLE SELECT currency`), renders `''` until it arrives, and throws for a code the catalog lacks rather than guessing decimals.
@@ -472,7 +485,7 @@ export class PricingPage {
 | `createCheckout(req)` | `POST /api/billing/checkout` | `Observable<CheckoutResponse>` |
 | `getSubscription()` | `GET /api/billing/subscription` | `Observable<Subscription>` |
 | `cancelSubscription()` | `POST /api/billing/subscription/cancel` | `Observable<void>` |
-| `changePlan(planId)` | `POST /api/billing/subscription/change` | `Observable<PlanChangeResult>` |
+| `changePlan(planId, offer?)` | `POST /api/billing/subscription/change` | `Observable<PlanChangeResult>` |
 | `checkChange(planId)` | `POST /api/billing/subscription/change/check` | `Observable<{ overages: PlanOverage[] }>` |
 | `setSeats(seats)` | `POST /api/billing/subscription/seats` | `Observable<void>` |
 | `listInvoices()` | `GET /api/billing/invoices` | `Observable<Invoice[]>` |
@@ -656,7 +669,7 @@ An action with `parameters` (keel v1.2.75 `table_action_parameter`) opens a dial
 
 ### Plan change vs first-time checkout (v1.0.1)
 
-First-time checkout uses `<sail-checkout-button>` (provider-hosted). For an **existing** subscription, upgrade/downgrade is a distinct path — `BillingService.changePlan(planId)` routes to keel's `SubscriptionLifecycle.ChangePlan` via an endpoint the app exposes and answers `{ status: 'changed' | 'scheduled' }`: a scheduled change sets `Subscription.scheduledAt` and `scheduledPlanId`, and re-selecting the current plan cancels it. A paid target the partner exceeds (more live-counted resources than it allows) is refused with 409; call `checkChange(planId)` first to list each `PlanOverage` to remove. Wire the picker's selection to whichever path applies:
+First-time checkout uses `<sail-checkout-button>` (provider-hosted). For an **existing** subscription, upgrade/downgrade is a distinct path — `BillingService.changePlan(planId, offer?)` routes to keel's `SubscriptionLifecycle.ChangePlan` via an endpoint the app exposes and answers `{ status: 'changed' | 'scheduled' }`: a scheduled change sets `Subscription.scheduledAt` and `scheduledPlanId`, and re-selecting the current plan cancels it. A paid target the partner exceeds (more live-counted resources than it allows) is refused with 409; call `checkChange(planId)` first to list each `PlanOverage` to remove. Wire the picker's selection to whichever path applies:
 
 ```typescript
 onPlanPicked(planId: string) {
@@ -664,6 +677,15 @@ onPlanPicked(planId: string) {
 }
 ```
 
+`offer` (keel v1.2.126) is one of the target plan's `prices` — a `PlanPrice` fits — and moves the subscription to that billing cycle and term, on the same plan or another; omitted, keel keeps the current terms. For a paid subscriber whose plan sells more than one offer, show `<sail-price-selector>` and pass the chosen offer; `Subscription.billingCycle` marks the current one:
+
+```html
+@if ((currentPlan()?.prices?.length ?? 0) > 1) {
+  <sail-price-selector [prices]="currentPlan()!.prices!" [selected]="offer()?.priceId"
+      (selectionChange)="billing.changePlan(sub()!.planId, $event).subscribe()" />
+}
+```
+
 `<sail-plan-selector>` varies its CTA copy by `PublicPlan.activationMode` ("Start trial" for `T`, "Subscribe" for `P`, "Activate" for `F`); override or extend via `[ctaLabels]="{ S: 'Add seats' }"`.
 
 ### Dunning banner (v1.0.1)
@@ -1273,7 +1295,9 @@ catalog and any routing via the outputs.
   provider redirects straight to consent. `[entityId]` scopes per-business connections and
   reloads on change (0 = tenant-wide). Emits `connected` / `disconnected`.
   Ships no CSS — style `.connections`, `.connection-card`, `.connection-card__{head,title,status,actions}`,
-  `.connection-form`, `.connection-panel__error`, and `.status--{connected,error,pending}`.
+  `.connection-form`, `.connection-panel__error`, `.connection-panel__notice` (a live region, always
+  rendered), `.connection-card__checked`, and `.status--{connected,error,pending}`. A passing Test
+  says so in the notice; the tile shows when the connection was last checked.
 - Each `OAuthProviderField` has a **`role`**: `credential` (sealed secret), `endpoint` (stored
   as `api_endpoint`), or `param` (OAuth authorize query param) — so field order is
   irrelevant. `icon` is a Material name or an image URL.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "1.1.44",
+  "version": "1.1.45",
   "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/studio_page.ts

@@ -12,6 +12,8 @@ import { Observable, forkJoin, map } from 'rxjs';
 import { BaseAuthService } from '../../service/auth.service';
 import { CaptionPipe } from '../../service/caption_pipe';
 import { LabelOption, LabelService } from '../../service/label.service';
+import { PromptService } from '../../service/prompt.service';
+import { ConfirmOptions } from '../../component/dialog/confirm_dialog';
 import {
   AGENT_READINESS_CAPTIONS, AgentAuditEvent, AgentReadiness, AgentDraft, AgentGuardrails, AgentLanguageDraft, AgentMergeMode,
   AgentModelSelection, AgentRelease, AgentSetting, AgentSettings, AgentSummary, AgentTestResult, GuardrailRule,
@@ -31,6 +33,7 @@ const CORE_TABS = [
   { id: 'history', label: 'History' },
 ];
 const GUARDRAILS_TAB = { id: 'guardrails', label: 'Guardrails' };
+const DISCARD: ConfirmOptions = { title: 'Discard unsaved changes?', action: 'Discard changes', destructive: true };
 
 /**
  * Embeddable Agent Studio over Scout's core `agents` feature: a grouped agent rail and tabs
@@ -53,6 +56,7 @@ export class StudioPageComponent implements OnInit {
   private readonly auth = inject(BaseAuthService);
   private readonly destroyRef = inject(DestroyRef);
   private readonly labels = inject(LabelService);
+  private readonly prompt = inject(PromptService);
 
   /** Rail group of an agent; its type by default. */
   readonly groupBy = input<(agent: AgentSummary) => string>((agent) => agent.agent_type);
@@ -145,7 +149,14 @@ export class StudioPageComponent implements OnInit {
 
   select(agentName: string, force = false): void {
     if (!force && agentName === this.selectedName()) return;
-    if (!force && this.dirty() && !window.confirm('Discard unsaved changes for this agent?')) return;
+    if (force || !this.dirty()) {
+      this.open(agentName);
+      return;
+    }
+    this.prompt.ask({ ...DISCARD, title: 'Discard unsaved changes for this agent?' }, () => this.open(agentName));
+  }
+
+  private open(agentName: string): void {
     this.selectedName.set(agentName);
     this.draft.set(null);
     this.settings.set(null);
@@ -206,7 +217,7 @@ export class StudioPageComponent implements OnInit {
   }
 
   discard(): void {
-    if (window.confirm('Discard unsaved changes?')) this.draft.set(JSON.parse(this.baseline()) as AgentDraft);
+    this.prompt.ask(DISCARD, () => this.draft.set(JSON.parse(this.baseline()) as AgentDraft));
   }
 
   save(): void {
@@ -230,21 +241,24 @@ export class StudioPageComponent implements OnInit {
 
   makeDefault(): void {
     const d = this.draft();
-    if (!d || !window.confirm(`Make "${d.display_name}" the default ${d.agent_type} agent?`)) return;
-    this.act(this.studio.setDefault({ agent_name: d.agent_name, expected_type_defaults_revision: d.expected_type_defaults_revision }), (rows) => {
-      this.summaries.set(rows);
-      this.loadAgent();
-    }, d.agent_name);
+    if (!d) return;
+    this.prompt.ask({ title: `Make "${d.display_name}" the default ${d.agent_type} agent?`, action: 'Make default' }, () =>
+      this.act(this.studio.setDefault({ agent_name: d.agent_name, expected_type_defaults_revision: d.expected_type_defaults_revision }), (rows) => {
+        this.summaries.set(rows);
+        this.loadAgent();
+      }, d.agent_name));
   }
 
   setArchived(archived: boolean): void {
     const d = this.draft();
-    if (!d || (archived && !window.confirm(`Archive "${d.display_name}"?`))) return;
+    if (!d) return;
     const request = { agent_name: d.agent_name, expected_agent_revision: d.expected_agent_revision };
-    this.act(archived ? this.studio.archive(request) : this.studio.unarchive(request), (summary) => {
+    const apply = () => this.act(archived ? this.studio.archive(request) : this.studio.unarchive(request), (summary) => {
       this.applyRevisions(summary.agent_revision);
       this.loadList();
     }, d.agent_name);
+    if (archived) this.prompt.ask({ title: `Archive "${d.display_name}"?`, action: 'Archive agent', destructive: true }, apply);
+    else apply();
   }
 
   /** Creates an agent of the selected agent's type, copied from its saved draft. */
@@ -258,11 +272,12 @@ export class StudioPageComponent implements OnInit {
 
   reset(target: PromptResetTarget): void {
     const d = this.draft();
-    if (!d || !window.confirm('Reset these prompt sections? Publish to make it live.')) return;
-    this.act(this.studio.reset({
-      agent_name: d.agent_name, ...target,
-      expected_agent_revision: d.expected_agent_revision, expected_type_defaults_revision: d.expected_type_defaults_revision,
-    }), (draft) => this.applyDraft(draft), d.agent_name);
+    if (!d) return;
+    this.prompt.ask({ title: 'Reset these prompt sections?', message: 'Publish to make it live.', action: 'Reset sections', destructive: true }, () =>
+      this.act(this.studio.reset({
+        agent_name: d.agent_name, ...target,
+        expected_agent_revision: d.expected_agent_revision, expected_type_defaults_revision: d.expected_type_defaults_revision,
+      }), (draft) => this.applyDraft(draft), d.agent_name));
   }
 
   saveSetting(binding: Pick<AgentSetting, 'scope_id' | 'resource_kind' | 'resource_id' | 'merge_mode' | 'sealed'>, valueText: string, remove = false): void {
@@ -314,12 +329,12 @@ export class StudioPageComponent implements OnInit {
   }
 
   restore(version: number): void {
-    if (!window.confirm(`Restore version ${version}? It is published again as a new version.`)) return;
-    this.act(this.studio.restore({ agent_name: this.selectedName(), version }), (release) => {
-      this.successMessage.set(`Version ${release.version} published from version ${version}.`);
-      this.loadList();
-      this.loadAgent();
-    }, this.selectedName());
+    this.prompt.ask({ title: `Restore version ${version}?`, message: 'It is published again as a new version.', action: 'Restore version' }, () =>
+      this.act(this.studio.restore({ agent_name: this.selectedName(), version }), (release) => {
+        this.successMessage.set(`Version ${release.version} published from version ${version}.`);
+        this.loadList();
+        this.loadAgent();
+      }, this.selectedName()));
   }
 
   loadHistory(): void {

package/src/component/abstract/base_form.ts

@@ -6,6 +6,11 @@ export abstract class BaseForm extends BaseTable {
     readonly isNew = signal(false);
     readonly title = signal('');
 
+    /** Unsaved-changes contract read by `BaseAuthService.canDeactivate` and the list dialog host. */
+    hasUnsavedChanges(): boolean {
+        return false;
+    }
+
     override isReadOnly(fieldName: string): boolean {
         // keel column_display_attribute: 'R' is always display-only; 'I'
         // (insert-only) is editable while creating, locked once it exists.

package/src/component/abstract/base_table.ts

@@ -10,9 +10,10 @@ import { MatDialog } from "@angular/material/dialog";
 import { RevealDialog } from "../table/reveal_dialog";
 import { ActionParamsDialog } from "../table/action_params_dialog";
 import { IdentityProviderConfigureDialog } from "../sso/identity_provider_configure_dialog";
+import { PromptService } from "../../service/prompt.service";
 
 
-/** CRUD verb used by `requireAuth()` to compose the "Missing authorization" alert. */
+/** CRUD verb used by `requireAuth()` to compose the "Missing authorization" message. */
 export type AuthVerb = 'create' | 'read' | 'update' | 'delete' | 'view';
 
 /** ISO-like timestamp prefix — gate for comparing two strings as instants. */
@@ -27,8 +28,9 @@ const ACTION_DIALOGS: Record<string, Type<ActionParamsDialog>> = {
 export abstract class BaseTable {
     protected readonly cacheService = inject(BaseAuthService);
     protected readonly backendService = inject(BackendService);
-    // Action dialogs are rare — resolve MatDialog lazily so every BaseTable subclass doesn't eagerly depend on it.
+    // Dialogs are rare — resolve them lazily so every BaseTable subclass doesn't eagerly depend on them.
     readonly #injector = inject(Injector);
+    protected get prompt(): PromptService { return this.#injector.get(PromptService); }
     protected readonly config: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
     protected readonly dialogWidth: string = '400px';
     /** Subclasses supply the source — a plain signal or a linkedSignal over an input. */
@@ -72,19 +74,18 @@ export abstract class BaseTable {
     /** True when the record is marked for delete (op_code === 'D'). */
     isDeleted(record: Record<string, unknown>):  boolean { return record[this.config.opField] === OpCode.Delete; }
 
-    /**
-     * Authorization guard with shared "Missing authorization" copy. Pass the
-     * permission predicate (typically a `canX()` method on this class) and
-     * the verb that fills the alert. Returns true when allowed.
-     *
-     *   if (!this.requireAuth(() => this.canDelete(), 'delete')) return;
-     */
+    /** Authorization guard: `if (!this.requireAuth(() => this.canDelete(), 'delete')) return;` */
     protected requireAuth(check: () => boolean, verb: AuthVerb): boolean {
         if (check()) return true;
-        alert(`Missing authorization to ${verb} records`);
+        this.reportError(`Missing authorization to ${verb} records.`);
         return false;
     }
 
+    /** Surfaces a failure; views with a `role="alert"` region override this to use it. */
+    protected reportError(message: string): void {
+        this.prompt.notify(message);
+    }
+
     /**
      * The table's registered TableAction list (basis `table_action` rows).
      * Templates use the memoized `tableActions` / `recordActions` instead.
@@ -128,24 +129,13 @@ export abstract class BaseTable {
     }
 
     /**
-     * Fire a TableAction. Template method:
-     *
-     *   1. Authorization check + alert  (shared)
-     *   2. Subclass-specific pre-flight guard via `beforeExecuteAction()` —
-     *      returns false to abort silently (the hook has already shown its
-     *      own alert).
-     *   3. A parameter dialog when the action declares `parameters`
-     *      (it shows `confirmMessage`), otherwise the confirm prompt
-     *   4. POST `{}` for table-level actions or `primaryKeyValues(record)`
-     *      for record-specific actions, merged with the parameter values
-     *   5. On success, dispatch `onActionSuccess()` so subclasses can refresh
-     *      their views; on error, log and alert.
-     *
-     * Subclasses typically only override the two hooks.
+     * Fire a TableAction: authorization, the `beforeExecuteAction()` hook, a parameter
+     * dialog (which shows `confirmMessage`) or the shared confirmation, then POST the
+     * row key merged with the parameters and dispatch `onActionSuccess()`.
      */
     executeAction(action: TableAction, record?: Record<string, unknown>): void {
         if (!this.canExecuteAction(action)) {
-            alert(`Missing authorization for action ${action.authorityObject}/${action.authorityCheck}`);
+            this.reportError(`Missing authorization for action ${action.authorityObject}/${action.authorityCheck}.`);
             return;
         }
         if (!this.beforeExecuteAction(action, record)) return;
@@ -161,8 +151,12 @@ export abstract class BaseTable {
                 });
             return;
         }
-        if (action.confirmMessage && !confirm(action.confirmMessage)) return;
-        this.postAction(action, key, record);
+        if (!action.confirmMessage) {
+            this.postAction(action, key, record);
+            return;
+        }
+        this.prompt.ask({ title: action.caption, message: action.confirmMessage, action: action.caption },
+            () => this.postAction(action, key, record));
     }
 
     private postAction(action: TableAction, body: Record<string, unknown>, record?: Record<string, unknown>): void {
@@ -182,14 +176,14 @@ export abstract class BaseTable {
             },
             error: (err) => {
                 console.error(`Action ${action.action} failed`, err);
-                alert(errorDetail(err, `Failed to ${action.caption}`));
+                this.reportError(errorDetail(err, `Failed to ${action.caption}`));
             },
         });
     }
 
     /**
      * Pre-flight hook for `executeAction()`. Return false to abort the action
-     * (the override should `alert()` or otherwise surface why). Default: allow.
+     * (the override should `reportError()` why). Default: allow.
      */
     protected beforeExecuteAction(_action: TableAction, _record?: Record<string, unknown>): boolean {
         return true;

package/src/component/abstract/base_view.ts

@@ -1,6 +1,6 @@
-import { computed, Directive, inject, signal, Type, WritableSignal } from "@angular/core";
+import { computed, DestroyRef, Directive, inject, signal, Type, WritableSignal } from "@angular/core";
 import { BaseTable } from "./base_table";
-import { MatDialog } from "@angular/material/dialog";
+import { MatDialog, MatDialogRef } from "@angular/material/dialog";
 
 /** Read-only listing surface; complete as-is (TableLookup). Editing views extend AbstractEditableView. */
 @Directive()
@@ -14,6 +14,10 @@ export abstract class BaseView extends BaseTable {
 
     protected readonly hasLinkPermission = computed(() => this.canUpdate() || this.canRead());
 
+    protected override reportError(message: string): void {
+        this.viewError.set(message);
+    }
+
     /** Whether an "actions" column is appended for privileged users; lookup views return false. */
     protected includeActionsColumn(): boolean {
         return true;
@@ -40,17 +44,25 @@ export abstract class BaseView extends BaseTable {
 export abstract class AbstractEditableView extends BaseView {
     protected readonly dialog = inject(MatDialog);
     readonly dialogComponent: WritableSignal<Type<unknown> | undefined> = signal(undefined);
+    private activeDialog?: MatDialogRef<unknown>;
+
+    constructor() {
+        super();
+        // The dialog outlives navigation (closeOnNavigation: false) until the route guard approves it.
+        inject(DestroyRef).onDestroy(() => this.activeDialog?.close());
+    }
+
+    /** Read by `BaseAuthService.canDeactivate`; delegates to an open dialog implementing the contract. */
+    hasUnsavedChanges(): boolean {
+        const form = this.activeDialog?.componentInstance as { hasUnsavedChanges?: () => boolean } | undefined;
+        return form?.hasUnsavedChanges?.() ?? false;
+    }
 
     protected abstract handleDelete(record: Record<string, unknown>): void;
 
     protected abstract handleUpdate(result: Record<string, unknown>, isNew: boolean, original: Record<string, unknown>): void;
 
-    /**
-     * Shared row-dialog opener. Builds the dialog data and wires the result
-     * straight into `handleUpdate()` (subclass-specific). Used by both
-     * `addRecord()` (new row + empty `original`) and `editRecord()` (existing
-     * row passed through verbatim).
-     */
+    /** Opens the row dialog and hands its result to `handleUpdate()`. */
     private openRecordDialog(record: Record<string, unknown>, isNew: boolean): void {
         const component = this.dialogComponent();
         if (!component) {
@@ -61,13 +73,16 @@ export abstract class AbstractEditableView extends BaseView {
         const apiName = this.apiName();
         if (apiName) dialogData['apiName'] = apiName;
 
-        this.dialog.open(component, {
+        const ref = this.activeDialog = this.dialog.open(component, {
             width: '90vw',
             maxWidth: '1200px',
             maxHeight: '90vh',
             disableClose: true,
+            closeOnNavigation: false,
             data: dialogData,
-        }).afterClosed().subscribe((result) => {
+        });
+        ref.afterClosed().subscribe((result) => {
+            if (this.activeDialog === ref) this.activeDialog = undefined;
             if (result) this.handleUpdate(result, isNew, isNew ? {} : record);
         });
     }
@@ -84,13 +99,7 @@ export abstract class AbstractEditableView extends BaseView {
         this.openRecordDialog(record, true);
     }
 
-    /**
-     * Open the row dialog. Renamed conceptually from "edit": when the user
-     * has only `canRead()`, we still want to show them the record + child rows.
-     * The dialog itself (TableEdit) handles read-only mode — its Edit/New/Delete
-     * buttons are gated by the same permissions.
-     * Block only when neither read nor update is granted.
-     */
+    /** Opens the row dialog; read-only users see the record, the dialog gates its own actions. */
     editRecord(record: Record<string, unknown>) {
         if (!this.canUpdate() && !this.requireAuth(() => this.canRead(), 'view')) return;
         this.openRecordDialog(record, false);

package/src/component/account/profile_editor.html

@@ -1,25 +1,28 @@
-<section class="account-section">
+<section #profileSection class="account-section">
   <h3>Profile</h3>
   <form [formGroup]="profileForm" (ngSubmit)="saveProfile()" class="auth-form">
     <mat-form-field appearance="outline">
       <mat-label>First name</mat-label>
       <input matInput formControlName="firstName" required>
+      <mat-error sailFieldError></mat-error>
     </mat-form-field>
     <mat-form-field appearance="outline">
       <mat-label>Last name</mat-label>
       <input matInput formControlName="lastName">
+      <mat-error sailFieldError></mat-error>
     </mat-form-field>
     <mat-form-field appearance="outline">
       <mat-label>Locale</mat-label>
       <input matInput formControlName="locale" placeholder="en">
+      <mat-error sailFieldError></mat-error>
     </mat-form-field>
-    <button matButton="elevated" class="primary" type="submit" [disabled]="!profileForm.valid || loading()">Save</button>
+    <button matButton="elevated" class="primary" type="submit" [disabled]="loading()">Save</button>
   </form>
   @if (profileMsg()) { <div class="auth-success" role="status">{{ profileMsg() }}</div> }
   @if (profileErr()) { <div class="auth-error" role="alert">{{ profileErr() }}</div> }
 </section>
 
-<section class="account-section">
+<section #emailSection class="account-section">
   <h3>Email</h3>
   @if (emailPhase() === 'idle') {
     <p>{{ email() || 'Not set' }}</p>
@@ -28,22 +31,24 @@
     <mat-form-field appearance="outline">
       <mat-label>New email</mat-label>
       <input matInput type="email" [formControl]="newEmail" required>
+      <mat-error sailFieldError></mat-error>
     </mat-form-field>
-    <button matButton="elevated" class="primary" (click)="sendEmailCode()" [disabled]="newEmail.invalid || loading()">Send code</button>
+    <button matButton="elevated" class="primary" (click)="sendEmailCode()" [disabled]="loading()">Send code</button>
     <button matButton (click)="cancelEmailChange()">Cancel</button>
   } @else {
     @if (emailMsg()) { <p>{{ emailMsg() }}</p> }
     <mat-form-field appearance="outline">
       <mat-label>Confirmation code</mat-label>
       <input matInput [formControl]="emailCode" inputmode="numeric" required>
+      <mat-error sailFieldError></mat-error>
     </mat-form-field>
-    <button matButton="elevated" class="primary" (click)="confirmEmailChange()" [disabled]="emailCode.invalid || loading()">Confirm</button>
+    <button matButton="elevated" class="primary" (click)="confirmEmailChange()" [disabled]="loading()">Confirm</button>
     <button matButton (click)="cancelEmailChange()">Cancel</button>
   }
   @if (emailErr()) { <div class="auth-error" role="alert">{{ emailErr() }}</div> }
 </section>
 
-<section class="account-section">
+<section #phoneSection class="account-section">
   <h3>Phone</h3>
   @if (!phoneChangeEnabled()) {
     <p>{{ phone() || 'Not set' }}</p>
@@ -54,16 +59,18 @@
     <mat-form-field appearance="outline">
       <mat-label>New phone</mat-label>
       <input matInput type="tel" [formControl]="newPhone" required>
+      <mat-error sailFieldError></mat-error>
     </mat-form-field>
-    <button matButton="elevated" class="primary" (click)="sendPhoneCode()" [disabled]="newPhone.invalid || loading()">Send code</button>
+    <button matButton="elevated" class="primary" (click)="sendPhoneCode()" [disabled]="loading()">Send code</button>
     <button matButton (click)="cancelPhoneChange()">Cancel</button>
   } @else {
     @if (phoneMsg()) { <p>{{ phoneMsg() }}</p> }
     <mat-form-field appearance="outline">
       <mat-label>Confirmation code</mat-label>
       <input matInput [formControl]="phoneCode" inputmode="numeric" required>
+      <mat-error sailFieldError></mat-error>
     </mat-form-field>
-    <button matButton="elevated" class="primary" (click)="confirmPhoneChange()" [disabled]="phoneCode.invalid || loading()">Confirm</button>
+    <button matButton="elevated" class="primary" (click)="confirmPhoneChange()" [disabled]="loading()">Confirm</button>
     <button matButton (click)="cancelPhoneChange()">Cancel</button>
   }
   @if (phoneErr()) { <div class="auth-error" role="alert">{{ phoneErr() }}</div> }

package/src/component/account/profile_editor.ts

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, OnInit, inject, input, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, OnInit, inject, input, signal, viewChild } from '@angular/core';
+import { submittable } from '../../util/forms';
+import { FieldError } from '../form/field_error';
 import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -13,9 +15,12 @@ import { UserProfile } from '../../model/auth';
   selector: 'sail-profile-editor',
   templateUrl: './profile_editor.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ReactiveFormsModule, MatButtonModule, MatFormFieldModule, MatInputModule],
+  imports: [FieldError, ReactiveFormsModule, MatButtonModule, MatFormFieldModule, MatInputModule],
 })
 export class ProfileEditorComponent implements OnInit {
+  private readonly profileSection = viewChild<ElementRef<HTMLElement>>('profileSection');
+  private readonly emailSection = viewChild<ElementRef<HTMLElement>>('emailSection');
+  private readonly phoneSection = viewChild<ElementRef<HTMLElement>>('phoneSection');
   private readonly auth = inject(BaseAuthService);
   private readonly fb = inject(FormBuilder);
 
@@ -58,7 +63,7 @@ export class ProfileEditorComponent implements OnInit {
   }
 
   saveProfile(): void {
-    if (this.profileForm.invalid) return;
+    if (!submittable(this.profileForm, this.profileSection()?.nativeElement)) return;
     const v = this.profileForm.getRawValue();
     this.loading.set(true);
     this.profileMsg.set('');
@@ -82,7 +87,7 @@ export class ProfileEditorComponent implements OnInit {
   }
 
   sendEmailCode(): void {
-    if (this.newEmail.invalid) return;
+    if (!submittable(this.newEmail, this.emailSection()?.nativeElement)) return;
     this.loading.set(true);
     this.emailErr.set('');
     this.auth.requestEmailChange(this.newEmail.value!).subscribe({
@@ -92,7 +97,7 @@ export class ProfileEditorComponent implements OnInit {
   }
 
   confirmEmailChange(): void {
-    if (this.emailCode.invalid) return;
+    if (!submittable(this.emailCode, this.emailSection()?.nativeElement)) return;
     this.loading.set(true);
     this.emailErr.set('');
     this.auth.confirmEmailChange(this.newEmail.value!, Number(this.emailCode.value)).subscribe({
@@ -114,7 +119,7 @@ export class ProfileEditorComponent implements OnInit {
   }
 
   sendPhoneCode(): void {
-    if (this.newPhone.invalid) return;
+    if (!submittable(this.newPhone, this.phoneSection()?.nativeElement)) return;
     this.loading.set(true);
     this.phoneErr.set('');
     this.auth.requestPhoneChange(this.newPhone.value!).subscribe({
@@ -124,7 +129,7 @@ export class ProfileEditorComponent implements OnInit {
   }
 
   confirmPhoneChange(): void {
-    if (this.phoneCode.invalid) return;
+    if (!submittable(this.phoneCode, this.phoneSection()?.nativeElement)) return;
     this.loading.set(true);
     this.phoneErr.set('');
     this.auth.confirmPhoneChange(this.newPhone.value!, Number(this.phoneCode.value)).subscribe({

package/src/component/agency/agency_clients.html

@@ -17,16 +17,19 @@
     <mat-form-field appearance="outline">
       <mat-label>Client name</mat-label>
       <input matInput formControlName="name" required />
+      <mat-error sailFieldError></mat-error>
     </mat-form-field>
     <mat-form-field appearance="outline">
       <mat-label>Email</mat-label>
       <input matInput formControlName="email" type="email" />
+      <mat-error sailFieldError></mat-error>
     </mat-form-field>
     <mat-form-field appearance="outline">
       <mat-label>Website</mat-label>
       <input matInput formControlName="website" />
+      <mat-error sailFieldError></mat-error>
     </mat-form-field>
-    <button matButton="filled" type="submit" [disabled]="addForm.invalid || !canManage()">Add client</button>
+    <button matButton="filled" type="submit" [disabled]="!canManage()">Add client</button>
   </form>
 
   <p class="agency-clients__count">Active clients: {{ activeClients() }}</p>

package/src/component/agency/agency_clients.ts

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, OnInit, computed, inject, input, output, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, computed, inject, input, output, signal, ElementRef } from '@angular/core';
+import { submittable } from '../../util/forms';
+import { FieldError } from '../form/field_error';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -16,7 +18,7 @@ import { AgencyStatusBannerComponent } from './agency_status_banner';
   selector: 'sail-agency-clients',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    ReactiveFormsModule,
+    FieldError, ReactiveFormsModule,
     MatButtonModule,
     MatFormFieldModule,
     MatIconModule,
@@ -41,6 +43,7 @@ export class AgencyClientsComponent implements OnInit {
   readonly cancelled = output<AgencyClient>();
   readonly billingModelChanged = output<{ client: AgencyClient; billingModel: 'R' | 'W' }>();
 
+  private readonly host: HTMLElement = inject(ElementRef).nativeElement;
   private readonly agency = inject(AgencyService);
   private readonly snack = inject(MatSnackBar);
   private readonly formBuilder = inject(FormBuilder);
@@ -103,7 +106,7 @@ export class AgencyClientsComponent implements OnInit {
   }
 
   addClient(): void {
-    if (this.addForm.invalid || !this.canManage()) return;
+    if (!this.canManage() || !submittable(this.addForm, this.host)) return;
     const value = this.addForm.getRawValue();
     this.agency.addClients([value]).subscribe({
       next: () => {