@nauticana/sail 1.0.2 → 1.0.7

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,9 +316,13 @@ 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 nine 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).
+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).
 
 ### Service
 
@@ -356,10 +363,24 @@ export class PricingPage {
 </sail-plan-selector>
 ```
 
-**Checkout button** — calls `createCheckout()` and redirects to the provider-hosted URL. `PublicPlan.priceId` lets you wire the picker directly to checkout without a local mapping table:
+**Offer / price picker (v1.0.5)** — a plan no longer has a single price. keel v1.0.5 sells per-plan **offers** in the `subscription_plan_price` table (billing cycle × commitment term, each with its own `provider_price_id`), surfaced as `PublicPlan.prices: PlanPrice[]`. The customer picks an offer **at checkout**; its `priceId` is what flows to `<sail-checkout-button>`:
+
+```html
+<sail-price-selector
+    [prices]="selectedPlan().prices ?? []"
+    [selected]="offer()?.priceId"
+    (selectionChange)="offer.set($event)">
+</sail-price-selector>
+```
+
+`<sail-price-selector>` is presentational (a `radiogroup` of offers), formats each amount with `Intl` from the offer's currency (so JPY/BHD render with the right number of decimals), and maps PERIOD_TYPE codes to copy via `[cycleLabels]`. It emits the full `PlanPrice` so you keep the chosen terms, not just the id.
+
+> **Migration.** The flat `PublicPlan.priceId` is deprecated (keel v1.0.5 dropped `subscription_plan.provider_price_id`) — read the id from the selected offer (`offer().priceId`). **keel v1.0.7 also removed `PublicPlan.monthlyCost`/`annualCost`** from both `/public/plans` and the billing catalog, so any plan-card code reading them now gets `undefined`. Derive a display price from the offers with `fromPriceLabel(plan.prices)` (used by `<sail-plan-selector>`), or render the per-offer amounts via `<sail-price-selector>`. These fields are removed from sail's `PublicPlan` type so the compiler flags any remaining references.
+
+**Checkout button** — calls `createCheckout()` and redirects to the provider-hosted URL. Feed it the chosen offer's `priceId`:
 ```html
 <sail-checkout-button
-    [priceId]="selectedPlan().priceId!"
+    [priceId]="offer()!.priceId!"
     [mode]="'subscription'"
     [successUrl]="'https://app.example.com/billing/done'"
     [cancelUrl]="'https://app.example.com/billing'"
@@ -521,8 +542,9 @@ A complete screen is the pieces above assembled over `BillingService` — no met
 <sail-trial-banner [trialEnd]="sub()?.trialEnd"></sail-trial-banner>
 <sail-status-chip [value]="sub()?.status"></sail-status-chip>
 <sail-plan-selector [plans]="plans()" [selected]="sub()?.planId" (selectionChange)="onPlanPicked($event)"></sail-plan-selector>
+<sail-price-selector [prices]="selectedPlan()?.prices ?? []" [selected]="offer()?.priceId" (selectionChange)="offer.set($event)"></sail-price-selector>
 <sail-seat-selector [seats]="sub()?.seats ?? 1" (seatsChange)="seats.set($event)"></sail-seat-selector>
-<sail-checkout-button [priceId]="priceFor(selected())" [quantity]="seats()" [successUrl]="okUrl" [cancelUrl]="backUrl"></sail-checkout-button>
+<sail-checkout-button [priceId]="offer()!.priceId!" [quantity]="seats()" [successUrl]="okUrl" [cancelUrl]="backUrl"></sail-checkout-button>
 <sail-usage-meter [meters]="usage()"></sail-usage-meter>
 <sail-payment-methods></sail-payment-methods>
 <sail-portal-button></sail-portal-button>
@@ -906,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
@@ -1497,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.2",
+  "version": "1.0.7",
   "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/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/billing/plan_selector.html

@@ -2,10 +2,11 @@
   @for (plan of plans(); track plan.id) {
     <div class="plan-card" [class.plan-selected]="plan.id === selected()">
       <h3 class="plan-caption">{{ plan.caption }}</h3>
-      <div class="plan-price">
-        <span class="plan-amount">{{ plan.monthlyCost }}</span>
-        <span class="plan-period">/ month</span>
-      </div>
+      @if (priceLabels()[plan.id]; as priceLabel) {
+        <div class="plan-price">
+          <span class="plan-amount">{{ priceLabel }}</span>
+        </div>
+      }
       @if (featuresFor(plan.id).length > 0) {
         <ul class="plan-features">
           @for (feature of featuresFor(plan.id); track feature) {

package/src/component/billing/plan_selector.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, output } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { PublicPlan } from '../../model/appdata';
+import { fromPriceLabel } from '../../util/money';
 
 /**
  * Plan picker. Pure presentational component — stateless, no service calls.
@@ -42,6 +43,13 @@ export class PlanSelectorComponent {
     return out;
   });
 
+  /** planId → indicative "from" price derived from the plan's offers ('' = none). */
+  readonly priceLabels = computed<Record<string, string>>(() => {
+    const out: Record<string, string> = {};
+    for (const plan of this.plans()) out[plan.id] = fromPriceLabel(plan.prices);
+    return out;
+  });
+
   onSelect(planId: string): void {
     this.selectionChange.emit(planId);
   }

package/src/component/billing/price_selector.html

@@ -0,0 +1,17 @@
+<div class="price-selector" role="radiogroup" aria-label="Billing options">
+  @for (offer of offers(); track offer.key) {
+    <button class="price-offer" type="button"
+            role="radio"
+            [class.price-selected]="offer.key === selected()"
+            [attr.aria-checked]="offer.key === selected()"
+            (click)="onSelect(offer)">
+      <span class="price-amount">{{ offer.amountText }}</span>
+      <span class="price-cycle">/ {{ offer.cycleText }}</span>
+      @if (offer.termText) {
+        <span class="price-term">{{ offer.termText }}</span>
+      }
+    </button>
+  } @empty {
+    <p class="empty-state">No billing options available.</p>
+  }
+</div>

package/src/component/billing/price_selector.ts

@@ -0,0 +1,66 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, output } from '@angular/core';
+import { PlanPrice } from '../../model/appdata';
+import { formatCurrency } from '../../util/money';
+
+/** Per-offer view model for accessible, currency-formatted rendering. */
+interface OfferRow {
+  key:        string;   // stable id for tracking / selection (priceId or composite)
+  price:      PlanPrice;
+  amountText: string;   // currency-formatted major amount
+  cycleText:  string;   // "Monthly" / "Annual" / …
+  termText:   string;   // commitment note, '' when the term is a single cycle
+}
+
+/**
+ * Offer picker for a plan's `subscription_plan_price` rows (keel v1.0.5). A plan
+ * sells several offers (billing cycle × commitment term); the customer picks one
+ * at checkout, then its `priceId` feeds `<sail-checkout-button [priceId]>`.
+ *
+ * Pure presentational — stateless. Amounts are formatted with `Intl` from each
+ * offer's currency, so non-2-decimal currencies (JPY 0, BHD 3) render correctly.
+ * Period codes map to copy via `[cycleLabels]` (override/extend the defaults).
+ */
+@Component({
+  selector: 'sail-price-selector',
+  templateUrl: './price_selector.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class PriceSelectorComponent {
+  private static readonly DEFAULT_CYCLE: Record<string, string> = {
+    D: 'Daily',
+    W: 'Weekly',
+    M: 'Monthly',
+    Q: 'Quarterly',
+    A: 'Annual',
+  };
+
+  readonly prices = input<PlanPrice[]>([]);
+  /** Selected offer key — a `priceId`, or the composite key when priceId is empty. */
+  readonly selected = input<string | undefined>(undefined);
+  /** PERIOD_TYPE code → label; overrides/extends the built-in defaults. */
+  readonly cycleLabels = input<{[periodCode: string]: string}>({});
+  readonly selectionChange = output<PlanPrice>();
+
+  readonly offers = computed<OfferRow[]>(() => {
+    const labels = this.cycleLabels();
+    const cycleLabel = (code: string) =>
+      labels[code] ?? PriceSelectorComponent.DEFAULT_CYCLE[code] ?? code;
+    return this.prices().map((p) => {
+      const singleCycle = p.termCount === 1 && p.termType === p.billingCycle;
+      return {
+        key:        p.priceId || `${p.billingCycle}-${p.termType}-${p.termCount}`,
+        price:      p,
+        amountText: formatCurrency(p.amount, p.currency),
+        cycleText:  cycleLabel(p.billingCycle),
+        termText:   singleCycle
+          ? ''
+          : `${p.termCount} ${cycleLabel(p.termType)}${p.termCount > 1 ? 's' : ''} commitment`,
+      };
+    });
+  });
+
+  onSelect(offer: OfferRow): void {
+    this.selectionChange.emit(offer.price);
+  }
+}

package/src/component/login/register_component.html

@@ -46,7 +46,7 @@
         <mat-select formControlName="PlanID" required>
           @for (p of plans(); track p.id) {
             <mat-option [value]="p.id">
-              {{ p.caption }}@if (p.monthlyCost > 0) { — \${{ p.monthlyCost }}/mo }
+              {{ p.caption }}@if (priceHint(p); as hint) { — {{ hint }} }
             </mat-option>
           }
         </mat-select>
@@ -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

@@ -13,6 +13,7 @@ import { firstValueFrom, map, merge } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { PartnerRegistration, PublicPlan } from '../../model/appdata';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+import { fromPriceLabel } from '../../util/money';
 
 @Component({
   selector: 'sail-register',
@@ -37,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[]>([]);
 
@@ -57,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');
@@ -76,6 +81,11 @@ export class RegisterComponent implements OnInit {
     return this.guiConfig.googleMapsApiKey ?? '';
   }
 
+  /** Indicative "from" price for a plan option, derived from its offers ('' = free/none). */
+  protected priceHint(plan: PublicPlan): string {
+    return fromPriceLabel(plan.prices);
+  }
+
   ngOnInit() {
     this.billing.listPlans().subscribe({
       next: (list) => this.plans.set(list ?? []),
@@ -86,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 });
@@ -101,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/index.ts

@@ -30,6 +30,7 @@ export * from './component/security/twofactor_setup';
 export * from './component/security/twofactor_verify';
 export * from './component/security/trusted_devices';
 export * from './component/billing/plan_selector';
+export * from './component/billing/price_selector';
 export * from './component/billing/checkout_button';
 export * from './component/billing/payment_methods';
 export * from './component/billing/portal_button';
@@ -55,3 +56,4 @@ export * from './service/rest_url';
 export * from './service/label.service';
 export * from './service/base_rest.service';
 export * from './util/text';
+export * from './util/money';

package/src/model/appdata.ts

@@ -201,17 +201,39 @@ export interface PartnerRegistration {
 	PlanID:               string;
 }
 
+// One purchasable offer for a plan — a (billing cycle × commitment term) row of
+// keel's `subscription_plan_price` table (v1.0.5). A plan sells several; the
+// customer picks one at checkout via `<sail-price-selector>`. Mirrors keel
+// `billing.PlanPrice`.
+export interface PlanPrice {
+	billingCycle: string;   // PERIOD_TYPE code (D/W/M/A) — how often charged
+	termCount:    number;   // commitment length, in termType units
+	termType:     string;   // PERIOD_TYPE code — commitment/pricing unit
+	amountMinor:  number;   // price per termType unit, in minor units (cents)
+	amount:       number;   // same amount in major units (currency-exponent applied)
+	currency:     string;   // ISO 4217
+	// Provider price id (Stripe Price). Empty for free/unpriced offers; pass to
+	// `<sail-checkout-button [priceId]>` / `createCheckout({ priceId })`.
+	priceId?:     string;
+}
+
 // PublicPlan — shape returned by GET /public/plans. Used on the registration
 // page to render the plan picker and to drive `<sail-checkout-button>` flows.
 export interface PublicPlan {
 	id:          string;
 	caption:     string;
-	monthlyCost: number;
-	annualCost:  number;
-	// Stripe price ID (or provider-equivalent). Optional because keel only
-	// populates it when a plan is wired to a billing provider; FREE plans and
-	// not-yet-priced tiers leave it empty. Pass straight to
-	// `<sail-checkout-button [priceId]>` / `BillingService.createCheckout({ priceId })`.
+	// NOTE: keel v1.0.7 REMOVED the flat `monthlyCost`/`annualCost` from the plan
+	// JSON (both `/public/plans` and the billing catalog). Price lives per-offer
+	// in `prices[]`; derive a display price with `fromPriceLabel(plan.prices)`.
+	// Purchasable offers (keel v1.0.5 `subscription_plan_price`, nested under the
+	// plan). The source of truth for checkout — feed a chosen offer's `priceId`
+	// to `<sail-checkout-button>`. Returned by `/public/plans` as of keel v1.0.6
+	// (so `<sail-price-selector>` works on the registration page too); absent on
+	// pre-v1.0.6 backends.
+	prices?:     PlanPrice[];
+	// @deprecated keel v1.0.5 moved per-offer prices into `prices[]`
+	// (`subscription_plan.provider_price_id` was dropped). Use
+	// `prices?.[…].priceId`. Kept optional for pre-v1.0.5 backends.
 	priceId?:    string;
 	// keel `subscription_plan.activation_mode` (SUBSCRIPTION_ACTIVATION_MODE
 	// dictionary, single char — e.g. 'P' paid, 'F' free, 'T' trial). Drives the
@@ -320,6 +342,9 @@ export interface Subscription {
 	monthlyCost: number;
 	currency:    string;
 	autoRenew:   boolean;
+	// PERIOD_TYPE code (D/W/M/A) the sub is charged on, copied from the chosen
+	// offer (keel `billing_cycle`); absent on pre-v1.0.5 backends.
+	billingCycle?: string;
 	// ISO timestamp the trial ends (keel `trial_end`); empty/absent when not
 	// trialing. Drives `<sail-trial-banner>`.
 	trialEnd?:   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/src/util/money.ts

@@ -0,0 +1,29 @@
+import { PlanPrice } from '../model/appdata';
+
+/**
+ * Format a major-unit amount in its currency, honouring the currency exponent
+ * (JPY 0 decimals, BHD 3, …) via `Intl`. Falls back to "<amount> <currency>"
+ * for an unknown currency code rather than throwing.
+ */
+export function formatCurrency(amount: number, currency: string): string {
+  try {
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(amount);
+  } catch {
+    return `${amount} ${currency}`;
+  }
+}
+
+/**
+ * "From" price teaser for a plan card / dropdown — the lowest priced offer,
+ * currency-formatted, prefixed "from " when the plan sells more than one priced
+ * offer. Returns '' when the plan has no priced offers (free/trial), so callers
+ * can omit the price line entirely. The exact offer is chosen later via
+ * `<sail-price-selector>`.
+ */
+export function fromPriceLabel(prices: PlanPrice[] | undefined): string {
+  const priced = (prices ?? []).filter((p) => p.amount > 0);
+  if (priced.length === 0) return '';
+  const lowest = priced.reduce((a, b) => (b.amount < a.amount ? b : a));
+  const formatted = formatCurrency(lowest.amount, lowest.currency);
+  return priced.length > 1 ? `from ${formatted}` : formatted;
+}

package/tsconfig.json

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