@nauticana/sail 1.1.9 → 1.1.10

package/README.md

@@ -6,6 +6,8 @@ A shared Angular component library for building CRUD-based admin frontends. Prov
 
 **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.
 
+> **v1.1.10 is a breaking release.** The base classes migrated to signals (`records()`, `editableRecord()`, `isNew()` …), `login()`/`loginWithGoogle()` now return Observables, CRUD errors are typed `SailApiError`, `BaseView` split into read-only `BaseView` + `AbstractEditableView`, the decorators are renamed `IsSailString`/`IsSailNumeric`, and `configureRestUrls()` is finally safe to call from a subclass constructor. The complete old→new mapping is machine-readable in [`migration_guide.json`](migration_guide.json). Consumers must fully migrate before pushing to test or prod.
+
 ## What it provides
 
 | Category | Exports |
@@ -22,10 +24,10 @@ A shared Angular component library for building CRUD-based admin frontends. Prov
 | **Payout** | `PayoutProviderOnboardingComponent`, `PayoutBankInfoFormComponent` |
 | **Payments / SCA** | `UserPaymentMethodsComponent`, `ScaConfirmComponent`, `ScaConfirmer` (port), `SCA_CONFIRMER` (token) |
 | **Services** | `BaseAuthService` (OTP / social / push / deleteAccount / logoutEverywhere / profile: `getProfile`, `updateProfile`, `request`+`confirmEmailChange`, `request`+`confirmPhoneChange`), `BillingService`, `BackendService`, `PayoutService`, `UserPaymentMethodService`, `loadScript()`, `authInterceptor`, `apiResponseInterceptor` |
-| **Abstracts** | `BaseTable`, `BaseForm`, `BaseView`, `BaseAsync`, `BaseRestService` |
+| **Abstracts** | `BaseTable`, `BaseForm`, `BaseView`, `AbstractEditableView`, `BaseAsync`, `BaseRestService` |
 | **Config** | `SAIL_GUI_CONFIG`, `SailGuiConfig`, `configureRestUrls()` |
 | **Models** | `ApplicationData`, `TableDefinition`, `SiudAction`, `ApplicationMenu`, `ConstantValue`, `UserAccount`, `RestReport`, `ReportParam`, `TrustedDevice`, `PublicPlan`, `PlanPrice`, `PaymentMethod`, `Subscription`, `Invoice`, `CheckoutRequest`/`CheckoutResponse`, `PortalResponse`, `UsageMeter`, `ChargeResult`, `UserPaymentMethod`, `TableAction`, `ReusableAccount`, `PayoutOnboardingSession`, `BankInfoFormValue`, `CountryProfile`, `OtpRequest`/`OtpResponse`, `SignupConsent`, `ConsentState`, `ConsentOption`, `SocialProvider`, `PushPlatform`, 2FA types, etc. |
-| **Decorators** | `@IsString()`, `@IsNumeric()` (class-validator based) |
+| **Decorators** | `@IsSailString()`, `@IsSailNumeric()` (class-validator based) |
 | **Utils** | `titleCase()`, `fromPriceLabel()` |
 
 ## Quick start

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "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",
   "scripts": {
@@ -61,5 +61,9 @@
     "class-validator": "^0.15.1",
     "rxjs": "~7.8.0",
     "typescript": "~5.9.3"
+  },
+  "dependencies": {
+    "@types/qrcode": "^1.5.6",
+    "qrcode": "^1.5.4"
   }
 }

package/src/component/abstract/base_async.ts

@@ -1,5 +1,7 @@
-import { signal } from '@angular/core';
+import { DestroyRef, inject, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Observable } from 'rxjs';
+import { errorDetail } from '../../util/errors';
 
 /**
  * Base class for components that perform async operations and need to show
@@ -10,6 +12,7 @@ import { Observable } from 'rxjs';
  * into the shared state automatically.
  */
 export abstract class BaseAsync {
+  private readonly destroyRef = inject(DestroyRef);
   readonly loading = signal(false);
   readonly errorMessage = signal('');
   readonly successMessage = signal('');
@@ -20,15 +23,9 @@ export abstract class BaseAsync {
     this.successMessage.set('');
   }
 
-  /**
-   * Set errorMessage from an HTTP error object; falls back to `fallback`.
-   *
-   * Reads `err.error.detail` first (keel emits RFC 7807 ProblemDetail with
-   * `detail` as the human-readable field), then `err.error.message` for
-   * legacy / non-RFC-7807 endpoints, then the supplied fallback.
-   */
-  protected setError(err: any, fallback: string): void {
-    this.errorMessage.set(err?.error?.detail ?? err?.error?.message ?? fallback);
+  /** Set errorMessage from any sail error shape (SailApiError / HttpErrorResponse / Error). */
+  protected setError(err: unknown, fallback: string): void {
+    this.errorMessage.set(errorDetail(err, fallback));
     this.loading.set(false);
   }
 
@@ -37,6 +34,7 @@ export abstract class BaseAsync {
    * Clears messages, sets loading, invokes onSuccess on next, and routes
    * errors through setError with the given fallback message. Pass `onError`
    * when the component must also react to failures (e.g. emit an output).
+   * The subscription is torn down with the component.
    */
   protected run<T>(
     obs: Observable<T>,
@@ -46,7 +44,7 @@ export abstract class BaseAsync {
   ): void {
     this.clearMessages();
     this.loading.set(true);
-    obs.subscribe({
+    obs.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
       next: (value) => {
         this.loading.set(false);
         onSuccess(value);

package/src/component/abstract/base_form.ts

@@ -1,16 +1,17 @@
+import { signal } from "@angular/core";
 import { BaseTable } from "./base_table";
 
 export abstract class BaseForm extends BaseTable {
-    editableRecord: {[key: string]: any} = {};
-    isNew = false;
-    title = '';
+    readonly editableRecord = signal<{[key: string]: unknown}>({});
+    readonly isNew = signal(false);
+    readonly title = signal('');
 
     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.
         const mode = this.getColumn(fieldName)?.DisplayMode;
         if (mode === 'R' || mode === 'U') return true; // 'U' = keel-set audit stamp
-        if (mode === 'I') return !this.isNew;
-        return !this.isNew && this.isKey(fieldName);
+        if (mode === 'I') return !this.isNew();
+        return !this.isNew() && this.isKey(fieldName);
     }
 }

package/src/component/abstract/base_table.ts

@@ -1,10 +1,11 @@
-import { inject, signal, WritableSignal, Injector } from "@angular/core";
+import { computed, inject, Injector, WritableSignal } from "@angular/core";
 import { ForeignKey, TableAction, TableColumn, TableDefinition } from "../../model/appdata";
 import { ConstantValue, LookupStyle, OpCode } from "../../model/common";
 import { BaseAuthService } from "../../service/auth.service";
 import { BackendService } from "../../service/rest_service";
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
 import { titleCase } from "../../util/text";
+import { errorDetail } from "../../util/errors";
 import { MatDialog } from "@angular/material/dialog";
 import { RevealDialog } from "../table/reveal_dialog";
 
@@ -12,6 +13,9 @@ import { RevealDialog } from "../table/reveal_dialog";
 /** CRUD verb used by `requireAuth()` to compose the "Missing authorization" alert. */
 export type AuthVerb = 'create' | 'read' | 'update' | 'delete' | 'view';
 
+/** ISO-like timestamp prefix — gate for comparing two strings as instants. */
+const ISO_PREFIX = /^\d{4}-\d{2}-\d{2}T/;
+
 
 export abstract class BaseTable {
     protected readonly cacheService = inject(BaseAuthService);
@@ -20,17 +24,21 @@ export abstract class BaseTable {
     readonly #injector = inject(Injector);
     protected readonly config: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
     protected readonly dialogWidth: string = '400px';
-    readonly tableName: WritableSignal<string> = signal('');
+    /** Subclasses supply the source — a plain signal or a linkedSignal over an input. */
+    abstract readonly tableName: WritableSignal<string>;
     /** Optional consumer-set override; when empty the title-cased table name is used. */
     caption = '';
     /** Consumer-set per-field option overrides (per fieldName). When unset, options come from the column's LookupDomain / LookupTable. */
     fieldOptions: {[key: string]: ConstantValue[]} = {};
-    isReadOnlyBound = this.isReadOnly.bind(this);
 
     isReadOnly(_fieldName: string): boolean {
         return false;
     }
 
+    /** Stable function-input for `[isReadOnly]`. Signal reads inside isReadOnly()
+     * overrides are tracked by the invoking template, so mode flips re-render. */
+    readonly isReadOnlyFn = (fieldName: string): boolean => this.isReadOnly(fieldName);
+
     /** Re-exported on the class so templates can call `titleCase(x)` without an extra import in the consumer. */
     titleCase(str: string): string { return titleCase(str); }
 
@@ -71,9 +79,8 @@ export abstract class BaseTable {
     }
 
     /**
-     * Returns the table's registered TableAction list — populated by
-     * keel's REST engine from the basis `table_action` table. Empty
-     * when the table has no custom actions.
+     * The table's registered TableAction list (basis `table_action` rows).
+     * Templates use the memoized `tableActions` / `recordActions` instead.
      */
     getActions(recordSpecific?: boolean): TableAction[] {
         const tableDef = this.cacheService.getTableDefinition(this.tableName());
@@ -82,6 +89,24 @@ export abstract class BaseTable {
         return actions.filter((a) => a.recordSpecific === recordSpecific).sort(this.sortActions);
     }
 
+    // Memoized for templates; the reactive appdata cache retriggers these.
+    readonly tableActions = computed(() => this.getActions(false));
+    readonly recordActions = computed(() => this.getActions(true));
+
+    /** Metadata-driven visible columns, memoized. */
+    readonly metadataColumns = computed(() => this.getDisplayedColumns());
+
+    private readonly columnMap = computed(() => {
+        const map = new Map<string, TableColumn>();
+        for (const col of this.cacheService.getTableDefinition(this.tableName())?.Columns ?? []) {
+            map.set(col.PascalName, col);
+        }
+        return map;
+    });
+
+    private readonly keyColumns = computed(() =>
+        this.cacheService.getTableDefinition(this.tableName())?.Keys ?? []);
+
     private sortActions = (a: TableAction, b: TableAction) =>
         (a.displayOrder ?? 0) - (b.displayOrder ?? 0);
 
@@ -134,7 +159,7 @@ export abstract class BaseTable {
             },
             error: (err) => {
                 console.error(`Action ${action.action} failed`, err);
-                alert(err?.error?.detail ?? `Failed to ${action.caption}`);
+                alert(errorDetail(err, `Failed to ${action.caption}`));
             },
         });
     }
@@ -173,8 +198,29 @@ export abstract class BaseTable {
         return pk;
     }
 
-    emptyRecord(): any {
-        const record : any = {[this.config.opField]: OpCode.Insert}
+    /** @for track key: joined PK values; index when keys are missing/unset. */
+    trackByRecord(index: number, record: Record<string, unknown>): string | number {
+        const keys = this.keyColumns();
+        if (!keys.length) return index;
+        const values = keys.map((key) => record[key.PascalName]);
+        if (values.some((v) => v === undefined || v === null || v === '')) return index;
+        return values.join('_');
+    }
+
+    /** DefaultValue as a typed literal; undefined for expression defaults (`now()`, `nextval(...)`). */
+    private literalDefault(field: TableColumn): unknown {
+        const dv = field.DefaultValue;
+        if (field.DataType === 'boolean') return dv === 'true';
+        if (dv == null || dv === '' || dv.includes('(')) return undefined;
+        if (field.DataType === 'integer' || field.DataType === 'float') {
+            const n = Number(dv);
+            return isNaN(n) ? undefined : n;
+        }
+        return dv;
+    }
+
+    emptyRecord(): Record<string, unknown> {
+        const record: Record<string, unknown> = {[this.config.opField]: OpCode.Insert};
         const tableDef = this.cacheService.getTableDefinition(this.tableName());
         const tableOverride = this.config.tableOverrides?.[this.tableName()];
         const editableTimestamps = new Set(tableOverride?.editableTimestamps ?? []);
@@ -186,16 +232,15 @@ export abstract class BaseTable {
                         return; // auto-generated by database sequence
                     }
                     // column_display_attribute modes (explicit, win over the
-                    // timestamp heuristic). H/R/U are server-managed — omit so the
+                    // timestamp heuristic). H/S/R/U are server-managed — omit so the
                     // DB default/keel stamp fills them. D = seed the column default.
-                    if (field.DisplayMode === 'H' || field.DisplayMode === 'R'
-                        || field.DisplayMode === 'U') {
+                    if (field.DisplayMode === 'H' || field.DisplayMode === 'S'
+                        || field.DisplayMode === 'R' || field.DisplayMode === 'U') {
                         return;
                     }
                     if (field.DisplayMode === 'D') {
-                        record[field.PascalName] = field.DataType === 'boolean'
-                            ? field.DefaultValue === 'true'
-                            : (field.DefaultValue ?? '');
+                        record[field.PascalName] = this.literalDefault(field)
+                            ?? (field.DataType === 'boolean' ? false : '');
                         return;
                     }
                     if (!field.DisplayMode && field.HasDefault && field.DataType === 'timestamp'
@@ -203,9 +248,9 @@ export abstract class BaseTable {
                         return; // audit column — server-managed, don't include
                     }
                     if (field.HasDefault && field.DataType !== 'timestamp') {
-                        record[field.PascalName] = field.DataType === 'boolean'
-                            ? field.DefaultValue === 'true'
-                            : field.DefaultValue;
+                        const dv = this.literalDefault(field);
+                        record[field.PascalName] = dv !== undefined ? dv
+                            : (field.DataType === 'boolean' ? false : '');
                     } else {
                         record[field.PascalName] = field.DataType === 'boolean' ? false : '';
                     }
@@ -228,7 +273,7 @@ export abstract class BaseTable {
         return record;
     }
 
-    getDisplayedColumns(records: any[] = []): string[] {
+    getDisplayedColumns(records: Record<string, unknown>[] = []): string[] {
         const tableDef = this.cacheService.getTableDefinition(this.tableName());
         const tableOverride = this.config.tableOverrides?.[this.tableName()];
         const hidden = new Set([
@@ -238,6 +283,8 @@ export abstract class BaseTable {
         const editableTimestamps = new Set(tableOverride?.editableTimestamps ?? []);
         if (tableDef && tableDef.Columns && tableDef.Columns.length > 0) {
             return tableDef.Columns
+                // column_display_attribute: 'H' hidden and 'S' secret never render.
+                .filter(col => col.DisplayMode !== 'H' && col.DisplayMode !== 'S')
                 .filter(col => !(col.HasDefault && col.DataType === 'timestamp'
                                  && !editableTimestamps.has(col.PascalName)))
                 .sort((a, b) => a.Order - b.Order)
@@ -249,15 +296,12 @@ export abstract class BaseTable {
         return [];
     }
 
+    /** O(1) via a map memoized per table/appdata — called several times per cell per CD. */
     getColumn(fieldName: string): TableColumn | undefined {
-        const tableDef = this.cacheService.getTableDefinition(this.tableName());
-        if (tableDef && tableDef.Columns) {
-            return tableDef.Columns.find((field) => field.PascalName === fieldName);
-        }
-        return undefined;
+        return this.columnMap().get(fieldName);
     }
 
-    displayValue(fieldName: string, rawValue: any): string {
+    displayValue(fieldName: string, rawValue: unknown): string {
         if (rawValue === null || rawValue === undefined || rawValue === '') return '';
         const col = this.getColumn(fieldName);
         if (!col) return String(rawValue);
@@ -275,20 +319,17 @@ export abstract class BaseTable {
     }
 
     /**
-     * Temporal input kind for a field, or null if not temporal. Drives both the
-     * load-format and save-restore so TIME/DATE columns aren't given the
-     * datetime-local (seconds + 'Z') treatment a Postgres TIME/DATE rejects.
+     * Temporal input kind for a field, or null if not temporal (metadata-driven
+     * only — name-based guessing would corrupt text fields ending in "Time").
      */
     temporalKind(fieldName: string): 'time' | 'date' | 'datetime-local' | null {
         const col = this.getColumn(fieldName)
-        if (col?.InputType === 'time') return 'time'
-        if (col?.InputType === 'date') return 'date'
-        if (col?.InputType === 'datetime-local') return 'datetime-local'
+        if (!col) return null
+        if (col.InputType === 'time') return 'time'
+        if (col.InputType === 'date') return 'date'
+        if (col.InputType === 'datetime-local') return 'datetime-local'
         // Fallback for column metadata predating keel's time/date split.
-        if (col ? col.DataType === 'timestamp'
-                : (fieldName.endsWith('Time') || fieldName.endsWith('time'))) {
-            return 'datetime-local'
-        }
+        if (col.DataType === 'timestamp') return 'datetime-local'
         return null
     }
 
@@ -320,43 +361,52 @@ export abstract class BaseTable {
         return false;
     }
 
-    isArray(value: any): boolean {
+    isArray(value: unknown): boolean {
         return Array.isArray(value);
     }
 
+    /** Backend value → form-input value. datetime-local inputs hold LOCAL wall-clock
+     * time while keel timestamps are UTC ISO, so convert (don't slice). */
     formatTimeStamp(val: string, kind: 'time' | 'date' | 'datetime-local' = 'datetime-local'): string {
         if (val && typeof val === 'string') {
             if (kind === 'time') return val.slice(0, 5);    // HH:MM
             if (kind === 'date') return val.slice(0, 10);   // YYYY-MM-DD
-            return val.slice(0, 16);                         // YYYY-MM-DDTHH:MM
+            // Bare timestamps (no zone) from pre-ISO backends are treated as UTC.
+            const iso = (val.endsWith('Z') || /[+-]\d{2}:\d{2}$/.test(val)) ? val : val + 'Z';
+            const d = new Date(iso);
+            if (isNaN(d.getTime())) return val.slice(0, 16);
+            const pad = (n: number) => String(n).padStart(2, '0');
+            return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
         }
         return val;
     }
 
-    formatRecordTimeStamp(record: any) {
+    formatRecordTimeStamp(record: Record<string, unknown>) {
         if (record) {
             for (const key of Object.keys(record)) {
                 const kind = this.temporalKind(key);
                 if (kind) {
-                    record[key] = this.formatTimeStamp(record[key], kind);
+                    record[key] = this.formatTimeStamp(record[key] as string, kind);
                 }
             }
         }
     }
 
-    restoreTimeStamp(val: any, kind: 'time' | 'date' | 'datetime-local' = 'datetime-local'): any {
+    /** Form-input value → backend wire value (local wall-clock → UTC ISO for datetime-local). */
+    restoreTimeStamp(val: unknown, kind: 'time' | 'date' | 'datetime-local' = 'datetime-local'): unknown {
         // PostgreSQL can't cast '' to a temporal type — normalize empty to null.
         if (val === '' || val === undefined || val === null) return null;
-        // TIME/DATE values are sent verbatim ('08:45', '2026-06-15'); only
-        // datetime-local needs the seconds + UTC marker the picker omits.
+        // TIME/DATE values are sent verbatim ('08:45', '2026-06-15').
         if (kind === 'time' || kind === 'date') return val;
         if (typeof val === 'string' && !val.endsWith('Z')) {
-            return val + ':00Z';
+            const d = new Date(val); // no zone designator → parsed as LOCAL time
+            if (isNaN(d.getTime())) return val;
+            return d.toISOString();
         }
         return val;
     }
 
-    restoreRecordTimeStamp(record: any) {
+    restoreRecordTimeStamp(record: Record<string, unknown>) {
         if (record) {
             for (const key of Object.keys(record)) {
                 const kind = this.temporalKind(key);
@@ -367,7 +417,7 @@ export abstract class BaseTable {
         }
     }
 
-    readyToSave(record: any, original?: any) {
+    readyToSave(record: Record<string, unknown>, original?: Record<string, unknown> | null) {
         this.restoreRecordTimeStamp(record);
         const op = record[this.config.opField];
         if (op === OpCode.Insert || op === OpCode.Delete) return; // already marked
@@ -385,20 +435,33 @@ export abstract class BaseTable {
         record[this.config.opField] = OpCode.Update;
     }
 
-    /** Shallow compare of own scalar fields, ignoring child arrays and op_code. */
-    isRecordDirty(current: any, original: any): boolean {
+    /** Equality tolerant of form coercion: number-vs-string by text, ISO timestamps by instant. */
+    private valuesEqual(a: unknown, b: unknown): boolean {
+        if (a === b) return true;
+        if (a == null || b == null) return false; // one side set, the other not
+        if (typeof a === 'number' || typeof b === 'number') return String(a) === String(b);
+        if (typeof a === 'string' && typeof b === 'string'
+            && ISO_PREFIX.test(a) && ISO_PREFIX.test(b)) {
+            const ta = Date.parse(a), tb = Date.parse(b);
+            if (!isNaN(ta) && !isNaN(tb)) return ta === tb;
+        }
+        return false;
+    }
+
+    /** Shallow compare of scalar fields over the union of keys; child arrays and op_code ignored. */
+    isRecordDirty(current: Record<string, unknown>, original: Record<string, unknown>): boolean {
         const opField = this.config.opField;
-        for (const key of Object.keys(current)) {
+        const keys = new Set([...Object.keys(current), ...Object.keys(original)]);
+        for (const key of keys) {
             if (key === opField) continue;
-            const curVal = current[key];
             // Ignore child-relation arrays; those have their own op_code per row.
-            if (Array.isArray(curVal)) continue;
-            if (curVal !== original[key]) return true;
+            if (Array.isArray(current[key]) || Array.isArray(original[key])) continue;
+            if (!this.valuesEqual(current[key], original[key])) return true;
         }
         return false;
     }
 
-    getDialogData(record: any, isNew: boolean, readOnlyColumns: string[] = []): any {
+    getDialogData(record: Record<string, unknown>, isNew: boolean, readOnlyColumns: string[] = []): Record<string, unknown> {
         return {record, tableName: this.tableName(), isNew, readOnlyColumns};
     }
 
@@ -423,14 +486,14 @@ export abstract class BaseTable {
         return undefined;
     }
 
-    getKeyFilters(record: any): {[key: string]: string} | undefined {
+    getKeyFilters(record: Record<string, unknown>): {[key: string]: string} | undefined {
         const tableDef = this.cacheService.getTableDefinition(this.tableName());
         if (!tableDef || !tableDef.Keys || tableDef.Keys.length === 0) {
             return undefined;
         }
         const filters: {[key: string]: string} = {};
         for (const key of tableDef.Keys) {
-            filters[key.PascalName] = record[key.PascalName];
+            filters[key.PascalName] = String(record[key.PascalName] ?? '');
         }
         return filters;
     }
@@ -445,25 +508,35 @@ export abstract class BaseTable {
         return {'fk': fk, 'parent': parent};
     }
 
-    initializeForeignKeys(record: any, parentTable: string, parentRecord: any) {
+    /** Seed FK columns from the parent's keys; returns the seeded (read-only) column names. */
+    initializeForeignKeys(record: Record<string, unknown>, parentTable: string, parentRecord: Record<string, unknown>): string[] {
         const readOnlyColumns: string[] = [];
         const fkData = this.getForeignKeyConfig(parentTable);
         if (fkData && fkData.fk && fkData.parent) {
+            if (fkData.fk.Columns.length !== fkData.parent.Keys.length) {
+                console.error(`sail: FK ${fkData.fk.ConstraintName} has ${fkData.fk.Columns.length} columns but parent ${parentTable} has ${fkData.parent.Keys.length} keys; skipping FK seed`);
+                return readOnlyColumns;
+            }
             fkData.fk.Columns.forEach((column, index) => {
                 record[column.PascalName] = parentRecord[fkData.parent.Keys[index].PascalName];
                 readOnlyColumns.push(column.PascalName);
             });
         }
+        return readOnlyColumns;
     }
 
-    buildSearchTerms(record: {[key: string]: any}): {[key: string]: string} {
-        const hiddenSet = new Set(this.config.hiddenFields);
+    buildSearchTerms(record: {[key: string]: unknown}): {[key: string]: string} {
+        const tableOverride = this.config.tableOverrides?.[this.tableName()];
+        const hiddenSet = new Set([
+            ...this.config.hiddenFields,
+            ...(tableOverride?.hiddenFields ?? []),
+        ]);
         const searchTerms: {[key: string]: string} = {};
         for (const key of Object.keys(record)) {
             if (hiddenSet.has(key)) continue;
             const val = record[key];
             if (val !== '' && val !== null && val !== undefined && !Array.isArray(val)) {
-                searchTerms[key] = val;
+                searchTerms[key] = String(val);
             }
         }
         return searchTerms;

package/src/component/abstract/base_view.ts

@@ -1,39 +1,49 @@
-import { Directive, inject, signal, WritableSignal } from "@angular/core";
+import { computed, Directive, inject, signal, Type, WritableSignal } from "@angular/core";
 import { BaseTable } from "./base_table";
 import { MatDialog } from "@angular/material/dialog";
 
+/** Read-only listing surface; complete as-is (TableLookup). Editing views extend AbstractEditableView. */
 @Directive()
 export abstract class BaseView extends BaseTable {
-    protected readonly dialog = inject(MatDialog);
     readonly apiName: WritableSignal<string> = signal('');
-    readonly dialogComponent: WritableSignal<any> = signal(undefined);
-    records: Array<{[key: string]: any}> = [];
-    displayedColumns: string[] = [];
-    searchTerms: {[key: string]: string} = {};
-    protected hasLinkPermission = false;
+    readonly records = signal<Record<string, unknown>[]>([]);
+    readonly displayedColumns = signal<string[]>([]);
+    readonly searchTerms = signal<{[key: string]: string}>({});
+    /** Last load/save failure shown by the view's template ('' when none). */
+    readonly viewError = signal('');
 
-    protected abstract handleDelete(record: {[key: string]: any}): void;
+    protected readonly hasLinkPermission = computed(() => this.canUpdate() || this.canRead());
 
-    protected abstract handleUpdate(result: {[key: string]: any}, isNew: boolean, original: {[key: string]: any}): void;
+    /** Whether an "actions" column is appended for privileged users; lookup views return false. */
+    protected includeActionsColumn(): boolean {
+        return true;
+    }
 
-    updateDisplayedColumns(record: Array<{[key: string]: any}>) {
-        this.displayedColumns = this.getDisplayedColumns(record);
-        if (this.displayedColumns.length > 0 &&
-            !this.displayedColumns.includes('actions') &&
+    updateDisplayedColumns(records: Record<string, unknown>[]) {
+        const columns = this.getDisplayedColumns(records);
+        if (columns.length > 0 &&
+            this.includeActionsColumn() &&
+            !columns.includes('actions') &&
             (this.canUpdate() || this.canDelete())
-        ) this.displayedColumns.push('actions');
-        this.hasLinkPermission = this.canUpdate() || this.canRead();
+        ) columns.push('actions');
+        this.displayedColumns.set(columns);
     }
 
     isLinkColumn(column: string): boolean {
-        return (this.displayedColumns.length > 0 && this.displayedColumns[0] === column && this.hasLinkPermission);
+        const columns = this.displayedColumns();
+        return (columns.length > 0 && columns[0] === column && this.hasLinkPermission());
     }
+}
 
-    trackByRecord(index: number, record: {[key: string]: any}): any {
-        const tableDef = this.cacheService.getTableDefinition(this.tableName());
-        if (!tableDef || !tableDef.Keys || tableDef.Keys.length === 0) return index;
-        return tableDef.Keys.map((key) => record[key.PascalName]).join('_');
-    }
+/** Listing surface with dialog-based create/edit/delete; subclasses implement persistence. */
+@Directive()
+export abstract class AbstractEditableView extends BaseView {
+    protected readonly dialog = inject(MatDialog);
+    readonly dialogComponent: WritableSignal<Type<unknown> | undefined> = signal(undefined);
+
+    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
@@ -41,12 +51,17 @@ export abstract class BaseView extends BaseTable {
      * `addRecord()` (new row + empty `original`) and `editRecord()` (existing
      * row passed through verbatim).
      */
-    private openRecordDialog(record: {[key: string]: any}, isNew: boolean): void {
+    private openRecordDialog(record: Record<string, unknown>, isNew: boolean): void {
+        const component = this.dialogComponent();
+        if (!component) {
+            console.error('sail: no dialogComponent configured for', this.tableName());
+            return;
+        }
         const dialogData = this.getDialogData(record, isNew);
         const apiName = this.apiName();
         if (apiName) dialogData['apiName'] = apiName;
 
-        this.dialog.open(this.dialogComponent(), {
+        this.dialog.open(component, {
             width: '90vw',
             maxWidth: '1200px',
             maxHeight: '90vh',
@@ -62,8 +77,9 @@ export abstract class BaseView extends BaseTable {
         const record = this.emptyRecord();
         // Seed columns from an existing row when emptyRecord() returned just the
         // op-code field (table metadata wasn't loaded yet).
-        if (Object.keys(record).length === 1 && this.records.length > 0) {
-            Object.keys(this.records[0]).forEach((key) => { record[key] = ''; });
+        const rows = this.records();
+        if (Object.keys(record).length === 1 && rows.length > 0) {
+            Object.keys(rows[0]).forEach((key) => { record[key] = ''; });
         }
         this.openRecordDialog(record, true);
     }
@@ -75,12 +91,12 @@ export abstract class BaseView extends BaseTable {
      * buttons are gated by the same permissions.
      * Block only when neither read nor update is granted.
      */
-    editRecord(record: {[key: string]: any}) {
+    editRecord(record: Record<string, unknown>) {
         if (!this.canUpdate() && !this.requireAuth(() => this.canRead(), 'view')) return;
         this.openRecordDialog(record, false);
     }
 
-    deleteRecord(record: {[key: string]: any}) {
+    deleteRecord(record: Record<string, unknown>) {
         if (!this.requireAuth(() => this.canDelete(), 'delete')) return;
         this.handleDelete(record);
     }

package/src/component/account/profile_editor.ts

@@ -96,7 +96,7 @@ export class ProfileEditorComponent implements OnInit {
     this.loading.set(true);
     this.emailErr.set('');
     this.auth.confirmEmailChange(this.newEmail.value!, Number(this.emailCode.value)).subscribe({
-      next: () => { this.loading.set(false); this.email.set(this.newEmail.value!); this.cancelEmailChange(); this.profileMsg.set('Email updated.'); },
+      next: () => { this.loading.set(false); this.email.set(this.newEmail.value!); this.cancelEmailChange(); this.emailMsg.set('Email updated.'); },
       error: (e) => { this.loading.set(false); this.emailErr.set(this.msg(e, 'Invalid or expired code.')); },
     });
   }
@@ -128,7 +128,7 @@ export class ProfileEditorComponent implements OnInit {
     this.loading.set(true);
     this.phoneErr.set('');
     this.auth.confirmPhoneChange(this.newPhone.value!, Number(this.phoneCode.value)).subscribe({
-      next: () => { this.loading.set(false); this.phone.set(this.newPhone.value!); this.cancelPhoneChange(); this.profileMsg.set('Phone updated.'); },
+      next: () => { this.loading.set(false); this.phone.set(this.newPhone.value!); this.cancelPhoneChange(); this.phoneMsg.set('Phone updated.'); },
       error: (e) => { this.loading.set(false); this.phoneErr.set(this.msg(e, 'Invalid or expired code.')); },
     });
   }