@nauticana/sail 1.0.3 → 1.0.8

package/README.md

@@ -2,24 +2,27 @@
 
 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. Use **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**. 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.0.x ↔ keel v1.0.x**. 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`.
 
 ## What it provides
 
 | Category | Exports |
 |----------|---------|
-| **Table components** | `TableList`, `TableSearch`, `TableEdit`, `TableDetail`, `TableLookup` |
+| **Table components** | `TableList`, `TableSearch`, `TableEdit`, `TableDetail`, `TableLookup`, `TableReport` |
 | **Form components** | `DynamicField`, `RecordForm`, `TableForm` |
 | **Navigation** | `Navigation` (sidenav + toolbar with menu, responsive) |
 | **Login** | `LoginComponent`, `RegisterComponent`, `ChpassComponent`, `ConfirmRegisterComponent`, `ConfirmChpassComponent` |
 | **Security** | `TwoFactorSetupComponent`, `TwoFactorVerifyComponent`, `TrustedDevicesComponent`, `AccountDeletionComponent` |
 | **Auth** | `ConsentGateComponent`, `OtpInputComponent`, `SocialLoginComponent` |
-| **Billing** | `PlanSelectorComponent`, `CheckoutButtonComponent`, `PaymentMethodsComponent` |
-| **Services** | `BaseAuthService` (OTP / social / push / deleteAccount / logoutEverywhere), `BillingService`, `BackendService`, `LabelService`, `loadScript()`, `authInterceptor`, `apiResponseInterceptor` |
-| **Abstracts** | `BaseTable`, `BaseForm`, `BaseView`, `BaseAsync` |
+| **Billing** | `PlanSelectorComponent`, `PriceSelectorComponent`, `CheckoutButtonComponent`, `PaymentMethodsComponent`, `PortalButtonComponent`, `UsageMeterComponent`, `StatusChipComponent`, `TrialBannerComponent`, `SeatSelectorComponent`, `DunningBannerComponent` |
+| **Payout** | `PayoutProviderOnboardingComponent`, `PayoutBankInfoFormComponent` |
+| **Payments / SCA** | `UserPaymentMethodsComponent`, `ScaConfirmComponent`, `ScaConfirmer` (port), `SCA_CONFIRMER` (token) |
+| **Services** | `BaseAuthService` (OTP / social / push / deleteAccount / logoutEverywhere), `BillingService`, `BackendService`, `PayoutService`, `UserPaymentMethodService`, `loadScript()`, `authInterceptor`, `apiResponseInterceptor` |
+| **Abstracts** | `BaseTable`, `BaseForm`, `BaseView`, `BaseAsync`, `BaseRestService` |
 | **Config** | `SAIL_GUI_CONFIG`, `SailGuiConfig`, `configureRestUrls()` |
-| **Models** | `ApplicationData`, `TableDefinition`, `SiudAction`, `ApplicationMenu`, `ConstantValue`, `UserAccount`, `RestReport`, `TrustedDevice`, `PublicPlan`, `PaymentMethod`, `Subscription`, `Invoice`, `OtpRequest`/`OtpResponse`, `SignupConsent`, `ConsentState`, `ConsentOption`, `SocialProvider`, `PushPlatform`, 2FA types, etc. |
+| **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) |
+| **Utils** | `titleCase()`, `fromPriceLabel()` |
 
 ## Quick start
 
@@ -35,7 +38,7 @@ This adds the following to your `package.json`:
 
 ```json
 "dependencies": {
-  "@nauticana/sail": "^0.5.0",
+  "@nauticana/sail": "^1.0.0",
   "class-validator": "^0.15.1"
 }
 ```
@@ -249,7 +252,7 @@ interface SailGuiConfig {
 }
 ```
 
-## Backend endpoints (keel v0.5)
+## Backend endpoints (keel v1.0)
 
 | Endpoint | Purpose |
 |----------|---------|
@@ -313,6 +316,10 @@ For the browser to store and resend that cookie, the requests must be credential
 
 If "trust this device" appears to do nothing (user is 2FA-prompted on every login despite checking the box), the cause is almost always a missing `AllowCredentials` / wildcard-origin on the backend — open devtools and confirm the `keel_td` cookie is actually set after a successful verify.
 
+### Session token storage
+
+The session JWT and the short-lived `loginToken` are kept in `localStorage` (the trusted-device secret is the only HttpOnly cookie). This is a deliberate trade-off for a token-based SPA, but it means any XSS in the consuming app can read the session token. Harden accordingly: ship a strict `Content-Security-Policy`, keep third-party script surface minimal, and prefer short JWT lifetimes on the keel side.
+
 ## Billing
 
 sail ships a shared `BillingService` and ten billing components backed by keel's payment endpoints (see [keel/SHARED_PAYMENT.md](https://github.com/nauticana/keel/blob/main/SHARED_PAYMENT.md) for the provider contract — Stripe by default, pluggable).
@@ -921,7 +928,7 @@ npm update @nauticana/sail
 Or to install a specific version:
 
 ```bash
-npm install @nauticana/sail@0.9.0
+npm install @nauticana/sail@1.0.7
 ```
 
 ## Migrating to v0.5.0
@@ -1512,6 +1519,21 @@ No data migration needed. Rows written under the old plaintext-fingerprint schem
 
 v0.9.0 targets **keel v0.9**. The full backend contract is documented in [keel/README.md → Trusted-device model (v0.9) and Migration from v0.8 trusted-device API](https://github.com/nauticana/keel/blob/main/README.md). Verify your backend sets `AllowCredentials` (cross-origin only) before rolling out.
 
+## Migrating to v1.0.7 — interceptor scoping, 2FA-verify return type
+
+Additive for the bundled components; the notes below apply only if you call the auth API directly or relied on the interceptors mutating non-keel traffic.
+
+- **Interceptors are now scoped to the keel host.** `authInterceptor` only attaches the JWT to the configured backend's `/api/` URLs (set via `configureRestUrls(host)`), and `apiResponseInterceptor` only unwraps / passes through responses from keel URLs. Requests to other origins are left untouched — the JWT no longer leaks to a third-party URL that merely contains `/api/`. If you routed non-keel calls through these interceptors expecting them to mutate the payload, handle that in your own interceptor.
+- **`apiResponseInterceptor` preserves the original error shape.** It no longer flattens `HttpErrorResponse.error` to a string, so `err.error.detail` / `err.error.message` (keel's RFC 7807 ProblemDetail) reach your components intact — matching what `BaseAsync` already reads.
+- **`verify2FALogin()` now returns `Observable<TwoFactorVerifyResponse>`** instead of subscribing internally and returning `void` — mirroring `verifyBackupCode()`, so a component can show loading / invalid-code state. **You must subscribe** for the request to fire. The bundled `TwoFactorVerifyComponent` is already updated; only direct callers need to change:
+
+  ```diff
+  - this.auth.verify2FALogin(code, trustDevice, deviceName);
+  + this.auth.verify2FALogin(code, trustDevice, deviceName).subscribe();
+  ```
+
+- **`<sail-checkout-button>` `priceId` is now optional**, so setup-mode (save-card) works as documented — omit `[priceId]` for `[mode]="'setup'"`. Subscription / payment modes without a price now surface an inline error instead of a 400.
+
 ## Modernization items
 
 When you extend sail in your own app, apply the same patterns sail itself follows. Downstream projects that copied templates or scaffolding from earlier sail versions will benefit from the same sweep. This list is a checklist — none are sail-specific.

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@nauticana/sail",
-  "version": "1.0.3",
+  "version": "1.0.8",
   "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": {
+    "typecheck": "tsc --noEmit",
+    "check:templates": "ngc -p tsconfig.json",
+    "check": "npm run typecheck && npm run check:templates"
+  },
   "files": [
     "src/",
     "tsconfig.json"
@@ -47,6 +52,7 @@
     "@angular/cdk": "^21.2.6",
     "@angular/common": "^21.2.8",
     "@angular/compiler": "^21.2.8",
+    "@angular/compiler-cli": "^21.2.8",
     "@angular/core": "^21.2.8",
     "@angular/forms": "^21.2.8",
     "@angular/material": "^21.2.6",

package/src/component/abstract/base_async.ts

@@ -35,12 +35,14 @@ export abstract class BaseAsync {
   /**
    * Subscribe to an Observable with shared loading/error semantics.
    * Clears messages, sets loading, invokes onSuccess on next, and routes
-   * errors through setError with the given fallback message.
+   * errors through setError with the given fallback message. Pass `onError`
+   * when the component must also react to failures (e.g. emit an output).
    */
   protected run<T>(
     obs: Observable<T>,
     onSuccess: (value: T) => void,
     fallbackError = 'Operation failed. Please try again.',
+    onError?: (err: unknown) => void,
   ): void {
     this.clearMessages();
     this.loading.set(true);
@@ -49,7 +51,10 @@ export abstract class BaseAsync {
         this.loading.set(false);
         onSuccess(value);
       },
-      error: (err) => this.setError(err, fallbackError),
+      error: (err) => {
+        this.setError(err, fallbackError);
+        onError?.(err);
+      },
     });
   }
 }

package/src/component/abstract/base_table.ts

@@ -267,12 +267,26 @@ export abstract class BaseTable {
         return String(rawValue);
     }
 
-    isTimeStamp(fieldName: string): boolean {
+    /**
+     * 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.
+     */
+    temporalKind(fieldName: string): 'time' | 'date' | 'datetime-local' | null {
         const col = this.getColumn(fieldName)
-        if (col) {
-            return col.DataType === 'timestamp';
+        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'
         }
-        return fieldName.endsWith('Time') || fieldName.endsWith('time');
+        return null
+    }
+
+    isTimeStamp(fieldName: string): boolean {
+        return this.temporalKind(fieldName) !== null
     }
 
     isNumber(fieldName: string): boolean {
@@ -303,9 +317,11 @@ export abstract class BaseTable {
         return Array.isArray(value);
     }
 
-    formatTimeStamp(val: string): string {
+    formatTimeStamp(val: string, kind: 'time' | 'date' | 'datetime-local' = 'datetime-local'): string {
         if (val && typeof val === 'string') {
-            return val.slice(0, 16);
+            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
         }
         return val;
     }
@@ -313,16 +329,20 @@ export abstract class BaseTable {
     formatRecordTimeStamp(record: any) {
         if (record) {
             for (const key of Object.keys(record)) {
-                if (this.isTimeStamp(key)) {
-                    record[key] = this.formatTimeStamp(record[key]);
+                const kind = this.temporalKind(key);
+                if (kind) {
+                    record[key] = this.formatTimeStamp(record[key], kind);
                 }
             }
         }
     }
 
-    restoreTimeStamp(val: any): any {
-        // PostgreSQL can't cast '' to TIMESTAMP — normalize empty to null.
+    restoreTimeStamp(val: any, kind: 'time' | 'date' | 'datetime-local' = 'datetime-local'): any {
+        // 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.
+        if (kind === 'time' || kind === 'date') return val;
         if (typeof val === 'string' && !val.endsWith('Z')) {
             return val + ':00Z';
         }
@@ -332,8 +352,9 @@ export abstract class BaseTable {
     restoreRecordTimeStamp(record: any) {
         if (record) {
             for (const key of Object.keys(record)) {
-                if (this.isTimeStamp(key)) {
-                    record[key] = this.restoreTimeStamp(record[key]);
+                const kind = this.temporalKind(key);
+                if (kind) {
+                    record[key] = this.restoreTimeStamp(record[key], kind);
                 }
             }
         }

package/src/component/billing/checkout_button.ts

@@ -22,8 +22,12 @@ import { CheckoutMode } from '../../model/appdata';
 export class CheckoutButtonComponent extends BaseAsync {
   private readonly billing = inject(BillingService);
 
-  /** Stripe price ID (or keel-internal plan id resolved server-side). */
-  readonly priceId = input.required<string>();
+  /**
+   * Stripe price ID (or keel-internal plan id resolved server-side).
+   * Required for 'subscription' / 'payment'; omit for 'setup' (save-card),
+   * where keel rejects a non-empty priceId with 400.
+   */
+  readonly priceId = input<string>();
   /** Checkout mode — 'subscription' (default), 'payment' (one-off), or 'setup' (capture method). */
   readonly mode = input<CheckoutMode>('subscription');
   /** Quantity for the priced item. */
@@ -40,10 +44,16 @@ export class CheckoutButtonComponent extends BaseAsync {
   readonly label = input('Continue to payment');
 
   startCheckout(): void {
+    const mode = this.mode();
+    const priceId = this.priceId();
+    if (mode !== 'setup' && !priceId) {
+      this.errorMessage.set('Select a plan before continuing.');
+      return;
+    }
     this.run(
       this.billing.createCheckout({
-        mode:       this.mode(),
-        priceId:    this.priceId(),
+        mode,
+        priceId:    mode === 'setup' ? undefined : priceId,
         quantity:   this.quantity(),
         email:      this.email(),
         successUrl: this.successUrl(),

package/src/component/form/form_field.ts

@@ -72,6 +72,7 @@ export class DynamicField extends BaseTable {
     get isDateLike(): boolean {
         if (!this.col) return false;
         return this.col.InputType === 'date'
+            || this.col.InputType === 'time'
             || this.col.InputType === 'datetime'
             || this.col.InputType === 'datetime-local';
     }

package/src/component/login/register_component.html

@@ -102,18 +102,20 @@
         </mat-form-field>
       </div>
 
-      <div class="auth-checkbox">
-        <mat-checkbox formControlName="consentLocation">
-          I consent to geocode my business address for location services
-        </mat-checkbox>
-      </div>
-
-      @if (geocodeStatus() === 'loading') {
-        <div class="geocode-status geocode-loading" role="status">Verifying address...</div>
-      } @else if (geocodeStatus() === 'success') {
-        <div class="geocode-status geocode-success" role="status">Address verified.</div>
-      } @else if (geocodeStatus() === 'error') {
-        <div class="geocode-status geocode-error" role="alert">{{ geocodeError() }}</div>
+      @if (geocodeEnabled) {
+        <div class="auth-checkbox">
+          <mat-checkbox formControlName="consentLocation">
+            I consent to geocode my business address for location services
+          </mat-checkbox>
+        </div>
+
+        @if (geocodeStatus() === 'loading') {
+          <div class="geocode-status geocode-loading" role="status">Verifying address...</div>
+        } @else if (geocodeStatus() === 'success') {
+          <div class="geocode-status geocode-success" role="status">Address verified.</div>
+        } @else if (geocodeStatus() === 'error') {
+          <div class="geocode-status geocode-error" role="alert">{{ geocodeError() }}</div>
+        }
       }
 
       @if (registerError()) {
@@ -121,7 +123,7 @@
       }
 
       <button matButton="elevated" class="primary" type="submit"
-        [disabled]="!registerForm.valid || geocodeStatus() !== 'success'">
+        [disabled]="!registerForm.valid || (geocodeEnabled && geocodeStatus() !== 'success')">
         Create Account
       </button>
     </form>

package/src/component/login/register_component.ts

@@ -38,6 +38,10 @@ export class RegisterComponent implements OnInit {
   private router = inject(Router);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
 
+  /** Geocoding is only active when a Google Maps key is configured; without
+   *  one the address-consent + verify step is skipped so registration still works. */
+  protected readonly geocodeEnabled = !!this.guiConfig.googleMapsApiKey;
+
   readonly registerError = signal('');
   readonly plans = signal<PublicPlan[]>([]);
 
@@ -58,7 +62,7 @@ export class RegisterComponent implements OnInit {
     PlanID: ['FREE', Validators.required],
     Latitude: [null as number | null],
     Longitude: [null as number | null],
-    consentLocation: [false, Validators.requiredTrue],
+    consentLocation: [false, this.geocodeEnabled ? Validators.requiredTrue : []],
   });
 
   readonly geocodeStatus = signal<'idle' | 'loading' | 'success' | 'error'>('idle');
@@ -92,7 +96,7 @@ export class RegisterComponent implements OnInit {
   constructor() {
     effect(() => {
       const consent = this.consentLocation();
-      if (consent) {
+      if (this.geocodeEnabled && consent) {
         this.tryGeocode();
       } else {
         this.registerForm.patchValue({ Latitude: null, Longitude: null });
@@ -107,7 +111,7 @@ export class RegisterComponent implements OnInit {
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.registerForm.patchValue({ Latitude: null, Longitude: null });
-        if (this.consentLocation()) {
+        if (this.geocodeEnabled && this.consentLocation()) {
           this.tryGeocode();
         }
       });

package/src/component/login/social_login.ts

@@ -99,13 +99,19 @@ export class SocialLoginComponent extends BaseAsync implements OnInit {
   }
 
   private onIdToken(provider: SocialProvider, idToken: string) {
+    const fallback = `Sign-in with ${provider} failed.`;
     this.run(
       this.auth.loginSocial(provider, idToken, this.buildSignupConsent()),
       (resp) => this.loginSuccess.emit(resp),
-      `Sign-in with ${provider} failed.`,
+      fallback,
+      (err) => this.loginError.emit(this.toError(err, fallback)),
     );
-    // Also surface errors to the host via output.
-    // (BaseAsync.run already captures errorMessage; the emit is additional.)
+  }
+
+  private toError(err: unknown, fallback: string): Error {
+    if (err instanceof Error) return err;
+    const e = err as { error?: { detail?: string; message?: string } };
+    return new Error(e?.error?.detail ?? e?.error?.message ?? fallback);
   }
 
   private buildSignupConsent(): SignupConsent | undefined {

package/src/component/security/twofactor_verify.ts

@@ -63,11 +63,14 @@ export class TwoFactorVerifyComponent extends BaseAsync {
         'Backup code verification failed.',
       );
     } else {
-      this.clearMessages();
-      this.auth.verify2FALogin(
-        code!,
-        trustDevice ?? false,
-        this.getDeviceName(),
+      this.run(
+        this.auth.verify2FALogin(code!, trustDevice ?? false, this.getDeviceName()),
+        (res) => {
+          if (!res.valid || !res.token) {
+            this.errorMessage.set('Invalid authentication code.');
+          }
+        },
+        'Verification failed. Please try again.',
       );
     }
   }

package/src/component/table/table_lookup.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit,
 import { MatButtonModule } from "@angular/material/button";
 import { MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogRef, MatDialogTitle } from "@angular/material/dialog";
 import { MatIconModule } from "@angular/material/icon";
+import { take } from "rxjs";
 import { RecordForm } from "../form/form_record";
 import { BaseView } from "../abstract/base_view";
 
@@ -41,7 +42,7 @@ export class TableLookup extends BaseView implements OnInit {
     private resolveApi() {
         const tableName = this.tableName();
         if (!this.apiName() && tableName) {
-            this.cacheService.getAppData().subscribe((data) => {
+            this.cacheService.getAppData().pipe(take(1)).subscribe((data) => {
                 if (data.Apis) {
                     for (const api in data.Apis) {
                         const entry = data.Apis[api];

package/src/component/table/table_report.ts

@@ -42,14 +42,21 @@ export class TableReport extends BaseRestService {
      */
     readonly paramValues = signal<Record<string, string>>({});
 
+    /**
+     * Report id — the last path segment of apiName (e.g. 'scorecard' for
+     * 'analytic/scorecard'). This is the key for metadata lookup AND the value
+     * REPORT/ACCESS grants are scoped to; the full path is only used for the
+     * fetch URL.
+     */
+    readonly reportId = computed(() => this.apiName().split('/').pop() ?? '');
+
     /**
      * Report header text — long-form description from rest_report_header.
      * Falls back to the title-cased table name only if the lookup misses
      * (e.g. a brand-new report whose row hasn't been seeded yet).
      */
     readonly reportTitle = computed(() => {
-        const reportId = this.apiName().split('/').pop() ?? '';
-        return this.auth.getReport(reportId)?.Description || titleCase(this.tableName());
+        return this.auth.getReport(this.reportId())?.Description || titleCase(this.tableName());
     });
 
     /**
@@ -60,8 +67,7 @@ export class TableReport extends BaseRestService {
      * reports.
      */
     readonly params = computed<ReportParam[]>(() => {
-        const reportId = this.apiName().split('/').pop() ?? '';
-        return this.auth.getReport(reportId)?.Params ?? [];
+        return this.auth.getReport(this.reportId())?.Params ?? [];
     });
 
     constructor() {
@@ -70,7 +76,7 @@ export class TableReport extends BaseRestService {
             const api = this.apiName();
             if (!api) return;
 
-            if (!this.auth.canReport(api)) {
+            if (!this.auth.canReport(this.reportId())) {
                 this.errorMessage.set('You do not have permission to view this report.');
                 return;
             }

package/src/model/appdata.ts

@@ -40,7 +40,7 @@ export interface TableColumn {
   PascalName:   string;
   Caption:      string;
   DataType:     string;
-  InputType:    'text' | 'password' | 'number' | 'date' | 'datetime' | 'datetime-local' | 'textarea' | 'select' | 'checkbox';
+  InputType:    'text' | 'password' | 'number' | 'date' | 'time' | 'datetime' | 'datetime-local' | 'textarea' | 'select' | 'checkbox';
   Size:         number;
   Scale:        number;
   Step:         string;

package/src/service/api-response.interceptor.ts

@@ -1,5 +1,6 @@
-import { HttpErrorResponse, HttpInterceptorFn, HttpResponse } from '@angular/common/http';
-import { catchError, map, throwError } from 'rxjs';
+import { HttpInterceptorFn, HttpResponse } from '@angular/common/http';
+import { map } from 'rxjs';
+import { isKeelUrl } from './rest_url';
 
 // Detect a final response event by structural shape rather than
 // `event instanceof HttpResponse`. Bundling can produce two distinct
@@ -21,7 +22,14 @@ function isFinalResponse(e: unknown): e is HttpResponse<unknown> {
     && typeof r.status === 'number';
 }
 
+// Scoped to keel URLs so third-party responses (and their errors) pass through
+// untouched. Unwraps keel's `{ data }` envelope; errors are left intact so
+// consumers can read the original `HttpErrorResponse.error` (keel's RFC 7807
+// ProblemDetail, with `detail` / `title`).
 export const apiResponseInterceptor: HttpInterceptorFn = (req, next) => {
+  if (!isKeelUrl(req.url)) {
+    return next(req);
+  }
   return next(req).pipe(
     map(event => {
       if (isFinalResponse(event)) {
@@ -32,15 +40,5 @@ export const apiResponseInterceptor: HttpInterceptorFn = (req, next) => {
       }
       return event;
     }),
-    catchError((error: HttpErrorResponse) => {
-      const detail = error.error?.detail || error.error?.title || error.message;
-      return throwError(() => new HttpErrorResponse({
-        error: detail,
-        headers: error.headers,
-        status: error.status,
-        statusText: error.statusText,
-        url: error.url ?? undefined,
-      }));
-    }),
   );
 };

package/src/service/auth.interceptor.ts

@@ -1,8 +1,9 @@
 import { HttpInterceptorFn } from '@angular/common/http';
+import { isKeelApiUrl } from './rest_url';
 
 export const authInterceptor: HttpInterceptorFn = (req, next) => {
   const token = localStorage.getItem('jwt');
-  if (token && req.url.includes('/api/')) {
+  if (token && isKeelApiUrl(req.url)) {
     req = req.clone({
       setHeaders: { Authorization: `Bearer ${token}` },
     });

package/src/service/auth.service.ts

@@ -161,33 +161,27 @@ export abstract class BaseAuthService extends BaseRestService {
   }
 
   /**
-   * Verify a TOTP code during the LOGIN flow (public endpoint). Uses `/public/2fa/verify`
+   * Verify a TOTP code during the LOGIN flow (public endpoint, `/public/2fa/verify`).
+   * Returns the response so callers can drive loading / invalid-code UI; on a
+   * valid code the login is completed (token stored, app data + routes loaded).
+   * withCredentials so the browser stores the `keel_td` cookie keel sets on a
+   * `trustDevice:true` verify — that cookie is what skips 2FA next login.
    */
-  verify2FALogin(code: string, trustDevice = false, deviceName?: string) {
-    const loginToken = localStorage.getItem('loginToken');
-    if (!loginToken) {
-        console.error('No login token found');
-        return;
-    }
+  verify2FALogin(code: string, trustDevice = false, deviceName?: string): Observable<TwoFactorVerifyResponse> {
     const request: TwoFactorVerifyRequest = {
         code,
-        loginToken,
+        loginToken: localStorage.getItem('loginToken') ?? '',
         trustDevice,
         deviceName,
     };
-    // withCredentials so the browser stores the `keel_td` cookie keel sets on
-    // a `trustDevice:true` verify — that cookie is what skips 2FA next login.
-    this.http.post<TwoFactorVerifyResponse>(this.twoFactorLoginVerifyUrl, request, { withCredentials: true }).subscribe({
-        next: (res) => {
+    return this.http.post<TwoFactorVerifyResponse>(this.twoFactorLoginVerifyUrl, request, { withCredentials: true }).pipe(
+        tap((res) => {
             if (res.valid && res.token) {
                 localStorage.removeItem('loginToken');
                 this.completeLogin(res.token);
             }
-        },
-        error: (err) => {
-            console.error('2FA verification failed:', err);
-        },
-    });
+        }),
+    );
   }
 
   /** Verify a single-use backup code during the LOGIN flow (public endpoint). */
@@ -526,6 +520,17 @@ export abstract class BaseAuthService extends BaseRestService {
     return undefined;
   }
 
+  /**
+   * Where to land after routes are (re)built. A fresh login starts from the
+   * root or a `/login` route → go to the dashboard. A refresh / bookmark of an
+   * authenticated route → preserve it so deep links survive route restoration.
+   */
+  private postLoginTarget(): string {
+    const path = window.location.pathname;
+    const preserve = !!path && path !== '/' && !path.startsWith('/login');
+    return preserve ? path + window.location.search : '/dashboard';
+  }
+
   async initRoutes() {
     // Lazy imports to break circular dependency:
     // auth.service → TableSearch/TableList → BaseTable → auth.service
@@ -615,7 +620,7 @@ export abstract class BaseAuthService extends BaseRestService {
 
             newRoutes.push({ path: '**', redirectTo: 'dashboard' });
             this.router.resetConfig(newRoutes);
-            this.router.navigate(['/dashboard']);
+            this.router.navigateByUrl(this.postLoginTarget());
         },
         error: (err) => {
             console.error('initRoutes failed:', err);

package/src/service/rest_url.ts

@@ -54,3 +54,24 @@ export function configureRestUrls(httpHost: string, overrides?: Partial<typeof R
     Object.assign(RestURL, overrides);
   }
 }
+
+/**
+ * True when `url` targets the configured keel backend's authenticated `/api/`
+ * surface. Used to scope the JWT interceptor so the token is never attached to
+ * a third-party origin that merely happens to contain `/api/` in its path.
+ */
+export function isKeelApiUrl(url: string): boolean {
+  const host = RestURL.httpHost;
+  return host ? url.startsWith(host + '/api/') : url.startsWith('/api/');
+}
+
+/**
+ * True when `url` targets the keel backend at all (`/api/` or `/public/`).
+ * Used to scope the response interceptor's envelope-unwrapping so third-party
+ * responses pass through untouched.
+ */
+export function isKeelUrl(url: string): boolean {
+  const host = RestURL.httpHost;
+  if (host) return url.startsWith(host + '/');
+  return url.startsWith('/api/') || url.startsWith('/public/');
+}

package/tsconfig.json

@@ -11,6 +11,10 @@
     "emitDecoratorMetadata": true,
     "noEmit": true
   },
+  "angularCompilerOptions": {
+    "strictTemplates": true,
+    "strictInjectionParameters": true
+  },
   "include": ["src/**/*.ts"],
   "exclude": ["node_modules"]
 }