@nauticana/sail 1.1.23 → 1.1.25

package/README.md

@@ -20,7 +20,7 @@ A shared Angular component library for building CRUD-based admin frontends. Prov
 | **Account** | `MyAccountComponent` (self-service hub), `ProfileEditorComponent` (name/locale immediate; email/phone verify-before-apply) |
 | **Auth** | `ConsentGateComponent`, `OtpInputComponent`, `SocialLoginComponent` |
 | **Billing** | `PlanSelectorComponent`, `PriceSelectorComponent`, `CheckoutButtonComponent`, `PaymentMethodsComponent`, `PortalButtonComponent`, `UsageMeterComponent`, `StatusChipComponent`, `TrialBannerComponent`, `SeatSelectorComponent`, `DunningBannerComponent` |
-| **Dashboard** | `DashboardShellComponent`, `DataCardComponent`, `LockedOverlayComponent`, `ActionCenterComponent`, `EntitySelectorComponent`, `VerificationFlowComponent` |
+| **Dashboard** | `DashboardShellComponent`, `DataCardComponent`, `StatTileComponent`, `LockedOverlayComponent`, `ActionCenterComponent`, `EntitySelectorComponent`, `VerificationFlowComponent` |
 | **Payout** | `PayoutProviderOnboardingComponent`, `PayoutBankInfoFormComponent` |
 | **Agency** | `AgencyClientsComponent`, `AgencyStatusBannerComponent`, `AgencyAcceptComponent`, `AgencyEarningsSummaryComponent`, `CommissionLedgerComponent`, `AgencyPayoutHistoryComponent`, `AgencyPayoutProfileComponent` |
 | **Notifications** | `NotificationCenterComponent`, `NotificationInboxService` |
@@ -28,7 +28,7 @@ A shared Angular component library for building CRUD-based admin frontends. Prov
 | **Services** | `BaseAuthService` (OTP / social / push / deleteAccount / logoutEverywhere / profile: `getProfile`, `updateProfile`, `request`+`confirmEmailChange`, `request`+`confirmPhoneChange`), `BillingService`, `AgencyService`, `BackendService`, `PayoutService`, `UserPaymentMethodService`, `NotificationInboxService`, `loadScript()`, `authInterceptor`, `apiResponseInterceptor` |
 | **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`, `InboxMessage`/`InboxPage`, 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`, `TableActionParameter`, `ReusableAccount`, `PayoutOnboardingSession`, `BankInfoFormValue`, `CountryProfile`, `OtpRequest`/`OtpResponse`, `SignupConsent`, `ConsentState`, `ConsentOption`, `SocialProvider`, `PushPlatform`, `InboxMessage`/`InboxPage`, 2FA types, etc. |
 | **Decorators** | `@IsSailString()`, `@IsSailNumeric()` (class-validator based) |
 | **Utils** | `titleCase()`, `fromPriceLabel()`, `formatMinorCurrency()` |
 
@@ -568,6 +568,10 @@ A `TableAction` with `kind: 'R'` (redirect — the `constant_value` code) makes
 
 > **Response-shape contract.** The generic redirect-action path reads a bare `url` because it's polymorphic — one dispatch for checkout / portal / export / etc., where the action's identity lives in the metadata, not the payload. keel's `WrapTableAction` enforces no shape; your inner handler must return `{ url }`. The *typed* billing endpoints keep specific names instead (`createCheckout()` → `checkoutUrl`, `createPortalSession()` → `portalUrl`). So the same portal concept has two response shapes depending on the path: wire it as `<sail-portal-button>` (typed → `portalUrl`) **or** as a `table_action` redirect (generic → `url`), not both.
 
+### Action parameters (v1.1.25)
+
+An action with `parameters` (keel v1.2.75 `table_action_parameter`) opens a dialog before posting: one field per parameter, typed by `dataType` (`boolean` checkbox, numeric, `date`, `timestamp`, otherwise text), or a dropdown when `lookupTable` names a table in the client cache (a `foreign_key_lookup` dropdown table); a numeric `dataType` still posts the chosen key as a number. The dialog shows `confirmMessage` in place of the native prompt and posts `{...primaryKeyValues(record), ...values}`; empty optional values are left out. An action without parameters behaves as before.
+
 ### Status chip (v1.0.1)
 
 `<sail-status-chip>` resolves a code to its caption from the client-cache `constant_value` dictionary — no per-app `@switch`. It defaults to the `SUBSCRIPTION_STATUS` domain (so `T` trialing / `X` past-due render with no app code) and works for any constant domain via `[domain]`. The code is exposed as `[attr.data-status]` so the app can colour the chip:
@@ -772,14 +776,20 @@ being summed into a misleading total.
 The agency URL defaults use `/api/v1/agency/*`. Apps mounting Keel elsewhere
 must override the `RestURL.agency*URL` values with `configureRestUrls()`.
 
-## Off-session SCA / 3DS confirmation (v1.0.x)
+## Off-session SCA / 3DS confirmation (v1.0.x; refusals v1.1.24)
 
-When an app charges a rider's **vaulted** card off-session (keel `payment.ChargeClient` / `StripeChargeClient`), the provider may return `requires_action` — the cardholder must complete a Strong Customer Authentication (3DS) challenge. keel surfaces the hooks on `ChargeResult` (`ClientSecret`, `ActionURL`); sail standardizes the **client-side** confirmation so it isn't rebuilt per app.
+When an app charges a rider's **vaulted** card off-session (keel `payment.ChargeClient` / `StripeChargeClient`), the cardholder may have to complete a Strong Customer Authentication (3DS) challenge. keel reports two distinct outcomes on `ChargeResult`, and they need different client operations:
 
-sail stays provider-agnostic: it ships **no payment-provider SDK** and **no default confirmer**. It provides a port (`ScaConfirmer`), the `SCA_CONFIRMER` injection token, and `<sail-sca-confirm>`, which:
+| `status` | What happened | Client operation |
+|---|---|---|
+| `requires_action` | The PaymentIntent carries a `next_action` to run. | Run it — `actionUrl` redirect, or `confirm(clientSecret)`. |
+| `authentication_required` | The issuer refused the off-session confirmation. The intent is back at `requires_payment_method` with **no `next_action`**. | Re-confirm the same intent on-session with the refused method — `confirmWithMethod(clientSecret, paymentMethodId)`. |
 
-- redirects to `ChargeResult.actionUrl` when present (provider-hosted challenge — no SDK needed); else
-- delegates the inline `ChargeResult.clientSecret` to the app-registered `SCA_CONFIRMER`.
+sail stays provider-agnostic: it ships **no payment-provider SDK** and **no default confirmer**. It provides a port (`ScaConfirmer`), the `SCA_CONFIRMER` injection token, and `<sail-sca-confirm>`, which dispatches on the status:
+
+- `authentication_required` → `SCA_CONFIRMER.confirmWithMethod`; else
+- `actionUrl` present → redirect (provider-hosted challenge — no SDK needed); else
+- inline `clientSecret` → `SCA_CONFIRMER.confirm`.
 
 ### Backend contract (app-owned)
 
@@ -788,6 +798,7 @@ Off-session charging is a worker/handler concern, so the **app** owns the charge
 ```jsonc
 // POST /api/<app>/charge  →  200
 { "status": "requires_action", "clientSecret": "pi_..._secret_...", "actionUrl": "" }
+// or { "status": "authentication_required", "clientSecret": "pi_..._secret_...", "paymentMethodId": "pm_..." }
 // or { "status": "succeeded", "providerChargeId": "pi_..." }
 // or { "status": "failed", "error": "card_declined" }
 ```
@@ -811,6 +822,13 @@ export class StripeScaConfirmer implements ScaConfirmer {
     const { error } = await stripe.handleNextAction({ clientSecret });
     return error ? { outcome: 'failed', error: error.message } : { outcome: 'succeeded' };
   }
+
+  async confirmWithMethod(clientSecret: string, paymentMethodId: string): Promise<ScaResult> {
+    const stripe = await loadStripe(/* publishable key from backend cache */);
+    if (!stripe) return { outcome: 'failed', error: 'Stripe.js failed to load' };
+    const { error } = await stripe.confirmCardPayment(clientSecret, { payment_method: paymentMethodId });
+    return error ? { outcome: 'failed', error: error.message } : { outcome: 'succeeded' };
+  }
 }
 ```
 
@@ -834,7 +852,7 @@ providers: [
 </sail-sca-confirm>
 ```
 
-`<sail-sca-confirm>` renders nothing for `succeeded`, the decline message for `failed`, and a confirm button for `requires_action`. The publishable key is backend-authoritative — read it from the auth/app-data cache, never hardcode a fallback.
+`<sail-sca-confirm>` renders nothing for `succeeded`, the decline message for `failed`, and a confirm button for both action states. The publishable key is backend-authoritative — read it from the auth/app-data cache, never hardcode a fallback.
 
 ## Consent capture
 
@@ -956,6 +974,7 @@ Horizontal building blocks for an entitlement-aware dashboard. All are presentat
 - **`DataCardComponent`** (`sail-data-card`) — card chrome for one visualization with `[state]` ∈ `loading | ready | empty | error | locked | no-source`. The chart is supplied as an `<ng-template>` and instantiated **only** in `ready`, so during loading/error/locked/no-source it never exists (no hidden canvas). `description` (required) is the screen-reader text alternative; `[tableHeaders]`/`[tableRows]` render a visually-hidden (`.sr-only`) data table. Emits `upgrade`, `connect`, and `retry`. `[connectLabel]="''"` renders the `no-source` state without a button — a source whose collector does not exist yet has nothing to connect.
 - **`LockedOverlayComponent`** (`sail-locked-overlay`) — entitlement gate. Wraps protected content given as an `<ng-template>`; when `[locked]` the template is never instantiated, so **no data exists behind the gate** (DOM, canvas, or network) — the strict free-tier rule. Emits `upgrade`.
 - **`NoSourceOverlayComponent`** (`sail-no-source-overlay`) — source-readiness gate. Takes `[sourceName]` and emits `connect`; while `[unavailable]`, its protected `<ng-template>` is never instantiated. Use this for included features whose provider is not connected or whose collector is unavailable—never show an upgrade prompt for this state. Set `[ctaLabel]="''"` when there is nothing to connect, and no button renders.
+- **`StatTileComponent`** (`sail-stat-tile`) — one number: `label`, `value`, optional `target`, `progress` (0..1, a `role="progressbar"`), `delta` with `deltaGood` (`true | false | null`, the `.good` / `.bad` hook) and `trend` (`number[]`, a decorative sparkline, hidden under two points). Values are preformatted strings; the tile does no formatting. Styles: `.stat-tile` / `-label` / `-value` / `-target` / `-delta` / `-progress` / `-progress-fill` / `-trend`.
 - **`ActionCenterComponent`** (`sail-action-center`) — prioritized next-best-action list from `[actions]: ActionItem[]` (sorted by `priority`, done items show a check). Emits `act`.
 - **`EntitySelectorComponent`** (`sail-entity-selector`) — scope dropdown over `[entities]: EntityOption[]`; resolves `[selected]` or the first active entity and emits `selectionChange`.
 - **`VerificationFlowComponent`** (`sail-verification-flow`) — self-service request → enter-code → verified UI (a 2FA sibling), backend-agnostic: emits `requestVerification` / `confirmCode`, driven by `[step]` + `[errorMessage]` the host feeds back. `[resendAfterSeconds]` holds `Resend code` for a cooldown and `[codeExpiresInSeconds]` blocks `Confirm` once the issued code expires; both default to `0`, which keeps the button always enabled and shows no expiry. Both countdowns restart when the component emits `requestVerification`. `[disabled]` blocks all actions while the host is processing one. `[errorMessage]` also renders in the `idle` step, so a failed send is reported where it happened.
@@ -973,6 +992,13 @@ Analytics clients that need this distinction can call the protected
 `{ rows, source: { status, id } }`, populated from `X-Data-Source-Status` and
 `X-Data-Source`; the existing `analytic<T>()` remains `Observable<T[]>`.
 
+`sourceState(result, sourceName, connectLabel?)` maps an analytic result to
+`{ state, message, cta }` for `[state]`, `[noSourceMessage]`, and `[connectLabel]`.
+`NOT_CONNECTED` offers Connect; `NOT_COLLECTED` explains that collection is not
+live and leaves the CTA empty; `READY` or no header yields `ready` / `empty` from
+the rows. The caller supplies the source name and handles
+the click route.
+
 When the app and its API are on different origins the browser hides both headers
 unless the backend sends
 `Access-Control-Expose-Headers: X-Data-Source-Status, X-Data-Source`; without it

package/package.json

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

package/src/component/abstract/base_table.ts

@@ -8,6 +8,7 @@ import { titleCase } from "../../util/text";
 import { errorDetail } from "../../util/errors";
 import { MatDialog } from "@angular/material/dialog";
 import { RevealDialog } from "../table/reveal_dialog";
+import { ActionParamsDialog } from "../table/action_params_dialog";
 
 
 /** CRUD verb used by `requireAuth()` to compose the "Missing authorization" alert. */
@@ -20,7 +21,7 @@ const ISO_PREFIX = /^\d{4}-\d{2}-\d{2}T/;
 export abstract class BaseTable {
     protected readonly cacheService = inject(BaseAuthService);
     protected readonly backendService = inject(BackendService);
-    // Reveal dialogs are rare — resolve MatDialog lazily so every BaseTable subclass doesn't eagerly depend on it.
+    // Action dialogs are rare — resolve MatDialog lazily so every BaseTable subclass doesn't eagerly depend on it.
     readonly #injector = inject(Injector);
     protected readonly config: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
     protected readonly dialogWidth: string = '400px';
@@ -127,9 +128,10 @@ export abstract class BaseTable {
      *   2. Subclass-specific pre-flight guard via `beforeExecuteAction()` —
      *      returns false to abort silently (the hook has already shown its
      *      own alert).
-     *   3. Optional confirm prompt from `action.confirmMessage`
+     *   3. A parameter dialog when the action declares `parameters`
+     *      (it shows `confirmMessage`), otherwise the confirm prompt
      *   4. POST `{}` for table-level actions or `primaryKeyValues(record)`
-     *      for record-specific actions
+     *      for record-specific actions, merged with the parameter values
      *   5. On success, dispatch `onActionSuccess()` so subclasses can refresh
      *      their views; on error, log and alert.
      *
@@ -141,8 +143,21 @@ export abstract class BaseTable {
             return;
         }
         if (!this.beforeExecuteAction(action, record)) return;
+        const key = action.recordSpecific && record ? this.primaryKeyValues(record) : {};
+        if (action.parameters?.length) {
+            this.#injector.get(MatDialog)
+                .open<ActionParamsDialog, TableAction, Record<string, unknown>>(ActionParamsDialog, { data: action, width: this.dialogWidth })
+                .afterClosed()
+                .subscribe((values) => {
+                    if (values) this.postAction(action, {...key, ...values}, record);
+                });
+            return;
+        }
         if (action.confirmMessage && !confirm(action.confirmMessage)) return;
-        const body = action.recordSpecific && record ? this.primaryKeyValues(record) : {};
+        this.postAction(action, key, record);
+    }
+
+    private postAction(action: TableAction, body: Record<string, unknown>, record?: Record<string, unknown>): void {
         this.backendService.executeAction<Record<string, unknown>>(action.method, body).subscribe({
             next: (resp) => {
                 const url = resp?.['url'];

package/src/component/dashboard/stat_tile.html

@@ -0,0 +1,29 @@
+<div class="stat-tile">
+  <p class="stat-tile-label">{{ label() }}</p>
+  <p class="stat-tile-value">
+    {{ value() }}
+    @if (target()) { <span class="stat-tile-target">/ {{ target() }}</span> }
+  </p>
+  @if (delta()) {
+    <p class="stat-tile-delta" [class.good]="deltaGood() === true" [class.bad]="deltaGood() === false">
+      {{ delta() }}
+      @if (deltaGood() !== null) { <span class="sr-only">{{ deltaGood() ? '(improving)' : '(worsening)' }}</span> }
+    </p>
+  }
+  @let percent = progressPercent();
+  @if (percent !== null) {
+    <div class="stat-tile-progress" role="progressbar"
+         [attr.aria-label]="label()"
+         aria-valuemin="0"
+         aria-valuemax="100"
+         [attr.aria-valuenow]="percent"
+         [attr.aria-valuetext]="valueText()">
+      <div class="stat-tile-progress-fill" [style.width.%]="percent"></div>
+    </div>
+  }
+  @if (sparkline()) {
+    <svg class="stat-tile-trend" viewBox="0 0 100 24" preserveAspectRatio="none" aria-hidden="true" focusable="false">
+      <polyline [attr.points]="sparkline()" fill="none" stroke="currentColor" vector-effect="non-scaling-stroke" />
+    </svg>
+  }
+</div>

package/src/component/dashboard/stat_tile.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';
+
+/**
+ * One dashboard number with an optional target, progress, delta and trend.
+ * Values arrive preformatted: the caller knows whether a number is money, a
+ * percentage or a count.
+ */
+@Component({
+  selector: 'sail-stat-tile',
+  templateUrl: './stat_tile.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class StatTileComponent {
+  readonly label = input.required<string>();
+  readonly value = input.required<string>();
+  readonly target = input<string>('');
+  /** 0..1; clamped. */
+  readonly progress = input<number | null>(null);
+  readonly delta = input<string>('');
+  /** true / false colours the delta as an improvement / regression; null leaves it neutral. */
+  readonly deltaGood = input<boolean | null>(null);
+  readonly trend = input<number[]>([]);
+
+  readonly progressPercent = computed(() => {
+    const p = this.progress();
+    return p == null || isNaN(p) ? null : Math.round(Math.min(1, Math.max(0, p)) * 100);
+  });
+
+  readonly valueText = computed(() => this.target() ? `${this.value()} of ${this.target()}` : this.value());
+
+  /** SVG polyline points in a 100×24 box; '' under two points. */
+  readonly sparkline = computed(() => {
+    const points = this.trend().filter((n) => Number.isFinite(n));
+    if (points.length < 2) return '';
+    const min = Math.min(...points);
+    const range = Math.max(...points) - min;
+    return points
+      .map((n, i) => {
+        const x = (i / (points.length - 1)) * 100;
+        const y = range === 0 ? 12 : 22 - ((n - min) / range) * 20;
+        return `${x.toFixed(2)},${y.toFixed(2)}`;
+      })
+      .join(' ');
+  });
+}

package/src/component/payment/sca_confirm.ts

@@ -4,19 +4,7 @@ import { BaseAsync } from '../abstract/base_async';
 import { ChargeResult } from '../../model/appdata';
 import { SCA_CONFIRMER } from '../../service/sca_confirmer';
 
-/**
- * Drives the SCA / 3DS confirmation for an off-session `ChargeResult`.
- *
- * Two confirmation paths, mirroring keel's `ChargeResult`:
- *  - `actionUrl` present → redirect to the provider-hosted challenge
- *    (provider-agnostic; the page navigates away).
- *  - otherwise `clientSecret` → delegate to the injected `SCA_CONFIRMER`
- *    (the app's provider SDK wrapper). No confirmer is bundled in sail.
- *
- * Renders nothing for a `succeeded` result; shows the decline message for
- * `failed`; shows a confirm button for `requires_action`. Emits `(confirmed)`
- * on success and `(failed)` with a message on any error — never silently.
- */
+/** Confirms an off-session charge through a redirect or the injected provider. */
 @Component({
   selector: 'sail-sca-confirm',
   templateUrl: './sca_confirm.html',
@@ -32,23 +20,30 @@ export class ScaConfirmComponent extends BaseAsync {
   readonly confirmed = output<void>();
   readonly failed = output<string>();
 
-  readonly needsAction = computed(() => this.result().status === 'requires_action');
+  readonly needsAction = computed(() => {
+    const status = this.result().status;
+    return status === 'requires_action' || status === 'authentication_required';
+  });
   readonly declined = computed(() => this.result().status === 'failed');
 
   async confirm(): Promise<void> {
+    if (!this.needsAction() || this.loading()) return;
     const res = this.result();
+    const reconfirm = res.status === 'authentication_required';
 
-    // Provider-hosted redirect branch — provider-agnostic; navigates away.
-    if (res.actionUrl) {
+    if (!reconfirm && res.actionUrl) {
       window.location.href = res.actionUrl;
       return;
     }
 
-    // Inline confirmation branch — delegates to the app's provider impl.
     if (!res.clientSecret) {
       this.fail('Missing client secret for SCA confirmation.');
       return;
     }
+    if (reconfirm && !res.paymentMethodId) {
+      this.fail('Missing payment method for re-confirmation.');
+      return;
+    }
     if (!this.confirmer) {
       this.fail('No SCA confirmer is configured. Provide SCA_CONFIRMER (e.g. a Stripe.js wrapper).');
       return;
@@ -57,7 +52,9 @@ export class ScaConfirmComponent extends BaseAsync {
     this.clearMessages();
     this.loading.set(true);
     try {
-      const out = await this.confirmer.confirm(res.clientSecret);
+      const out = reconfirm
+        ? await this.confirmer.confirmWithMethod(res.clientSecret, res.paymentMethodId!)
+        : await this.confirmer.confirm(res.clientSecret);
       this.loading.set(false);
       if (out.outcome === 'succeeded') {
         this.confirmed.emit();

package/src/component/table/action_params_dialog.html

@@ -0,0 +1,40 @@
+<h2 mat-dialog-title>{{ action.caption }}</h2>
+<form [formGroup]="form" (ngSubmit)="submit()">
+    <mat-dialog-content>
+        @if (action.confirmMessage) {
+            <p>{{ action.confirmMessage }}</p>
+        }
+        @for (f of fields; track f.param.name) {
+            @switch (f.kind) {
+                @case ('checkbox') {
+                    <mat-checkbox [formControlName]="f.param.name">{{ f.param.caption }}</mat-checkbox>
+                }
+                @case ('select') {
+                    <mat-form-field appearance="outline">
+                        <mat-label>{{ f.param.caption }}</mat-label>
+                        <mat-select [formControlName]="f.param.name" [required]="f.param.required">
+                            @if (!f.param.required) {
+                                <mat-option [value]="''">None</mat-option>
+                            }
+                            @for (opt of f.options; track opt.Value) {
+                                <mat-option [value]="opt.Value">{{ opt.Caption }}</mat-option>
+                            }
+                        </mat-select>
+                        <mat-error>{{ f.param.caption }} is required</mat-error>
+                    </mat-form-field>
+                }
+                @default {
+                    <mat-form-field appearance="outline">
+                        <mat-label>{{ f.param.caption }}</mat-label>
+                        <input matInput [type]="f.kind" [formControlName]="f.param.name" [required]="f.param.required">
+                        <mat-error>{{ f.param.caption }} is required</mat-error>
+                    </mat-form-field>
+                }
+            }
+        }
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+        <button matButton type="button" mat-dialog-close>Cancel</button>
+        <button matButton="filled" type="submit">{{ action.caption }}</button>
+    </mat-dialog-actions>
+</form>

package/src/component/table/action_params_dialog.ts

@@ -0,0 +1,99 @@
+import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
+import { FormControl, FormGroup, ReactiveFormsModule, ValidatorFn, Validators } from "@angular/forms";
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from "@angular/material/dialog";
+import { MatButtonModule } from "@angular/material/button";
+import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { MatSelectModule } from "@angular/material/select";
+import { TableAction, TableActionParameter } from "../../model/appdata";
+import { ConstantValue } from "../../model/common";
+import { BaseAuthService } from "../../service/auth.service";
+
+type ParamKind = 'checkbox' | 'number' | 'date' | 'datetime-local' | 'text';
+
+interface ParamField {
+    param:    TableActionParameter;
+    kind:     ParamKind | 'select';
+    /** From dataType; a lookup dropdown still posts a number when the column is numeric. */
+    wireKind: ParamKind;
+    options?: ConstantValue[];
+}
+
+/** Collects a table action's declared parameters; closes with the typed values, or undefined on cancel. */
+@Component({
+    selector: "sail-action-params-dialog",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        ReactiveFormsModule,
+        MatDialogModule,
+        MatButtonModule,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+    ],
+    templateUrl: "./action_params_dialog.html",
+})
+export class ActionParamsDialog {
+    private readonly auth = inject(BaseAuthService);
+    private readonly dialogRef = inject(MatDialogRef<ActionParamsDialog, Record<string, unknown>>);
+    readonly action = inject<TableAction>(MAT_DIALOG_DATA);
+
+    readonly fields: ParamField[] = (this.action.parameters ?? []).map((param) => {
+        const options = param.lookupTable ? this.auth.getTableValues(param.lookupTable) : undefined;
+        const wireKind = kindOf(param.dataType);
+        return { param, kind: options ? 'select' : wireKind, wireKind, options };
+    });
+
+    readonly form = new FormGroup(Object.fromEntries(this.fields.map((f) => {
+        const validators: ValidatorFn[] = f.param.required && f.kind !== 'checkbox' ? [Validators.required] : [];
+        const initial: unknown = f.kind === 'checkbox' ? false : '';
+        return [f.param.name, new FormControl(initial, validators)];
+    })));
+
+    submit(): void {
+        if (this.form.invalid) {
+            this.form.markAllAsTouched();
+            return;
+        }
+        const values: Record<string, unknown> = {};
+        for (const f of this.fields) {
+            const raw = this.form.controls[f.param.name].value;
+            if (raw === '' || raw == null) continue;
+            values[f.param.name] = toWire(f.wireKind, raw);
+        }
+        this.dialogRef.close(values);
+    }
+}
+
+function kindOf(dataType: string): ParamKind {
+    switch ((dataType || '').toLowerCase()) {
+        case 'boolean':
+            return 'checkbox';
+        case 'int':
+        case 'integer':
+        case 'number':
+        case 'numeric':
+        case 'float':
+        case 'decimal':
+            return 'number';
+        case 'date':
+            return 'date';
+        case 'datetime':
+        case 'timestamp':
+            return 'datetime-local';
+        default:
+            return 'text';
+    }
+}
+
+function toWire(kind: ParamKind, raw: unknown): unknown {
+    if (kind === 'number') return Number(raw);
+    // datetime-local holds local wall-clock time; keel expects a UTC instant.
+    if (kind === 'datetime-local') {
+        const d = new Date(String(raw));
+        return isNaN(d.getTime()) ? raw : d.toISOString();
+    }
+    return raw;
+}

package/src/index.ts

@@ -10,6 +10,7 @@ export * from './model/decorator';
 export * from './component/abstract/base_table';
 export * from './component/dashboard/dashboard_shell';
 export * from './component/dashboard/data_card';
+export * from './component/dashboard/stat_tile';
 export * from './component/dashboard/locked_overlay';
 export * from './component/dashboard/no_source_overlay';
 export * from './component/dashboard/action_center';

package/src/model/appdata.ts

@@ -79,6 +79,16 @@ export interface TableAction {
   authorityObject:  string;   // uppercased table_name — for canExecute()
   authorityCheck:   string;   // uppercased action_name — for canExecute()
   kind?:            'P' | 'R' | 'V'; // constant_value codes: P post (default) / R redirect (follow {url}) / V reveal (show returned secret once)
+  parameters?:      TableActionParameter[];
+}
+
+/** A value collected in a dialog before the action posts; merged into the body beside the record key. */
+export interface TableActionParameter {
+  name:         string;
+  caption:      string;
+  dataType:     string;
+  required:     boolean;
+  lookupTable?: string;   // offer this table's cached rows as choices
 }
 
 export interface ForeignKey {
@@ -325,18 +335,21 @@ export interface UsageMeter {
 // returns from its own charge endpoint, mirroring keel `payment.ChargeResult`.
 // 'requires_action' means the rider must complete an SCA / 3DS confirmation
 // (drive it with `<sail-sca-confirm>`).
-export type ChargeStatus = 'succeeded' | 'requires_action' | 'failed';
+// 'authentication_required' is an off-session refusal: no next_action to run —
+// re-confirm the same intent on-session with paymentMethodId.
+export type ChargeStatus = 'succeeded' | 'requires_action' | 'authentication_required' | 'failed';
 
 export interface ChargeResult {
 	status:            ChargeStatus;
 	providerChargeId?: string;   // PaymentIntent / charge id (pi_xxx)
-	// Provider client secret — present when status === 'requires_action' and the
-	// SCA challenge must be confirmed inline (provider SDK). Mirrors keel
-	// ChargeResult.ClientSecret.
+	// Provider client secret for inline confirmation or on-session re-confirmation.
 	clientSecret?:     string;
 	// Provider-hosted redirect URL when one exists (often empty for off-session
 	// 3DS). When present it's the simplest, provider-agnostic confirmation path.
 	actionUrl?:        string;
+	// The refused stored method, to re-confirm with when
+	// status === 'authentication_required'. Mirrors keel ChargeResult.PaymentMethodID.
+	paymentMethodId?:  string;
 	error?:            string;   // decline / error message when status === 'failed'
 }
 

package/src/service/base_rest.service.ts

@@ -1,6 +1,7 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { inject } from '@angular/core';
 import { map, Observable } from 'rxjs';
+import type { DataCardState } from '../model/dashboard';
 import { RestURL } from './rest_url';
 
 /**
@@ -64,3 +65,20 @@ export interface AnalyticSourceStatus {
   status: string | null;
   id: string | null;
 }
+
+export interface SourceCardState {
+  state: DataCardState;
+  message: string;
+  cta: string;
+}
+
+/** Only keel's two not-ready states gate the card; `READY` or no header falls through to the rows. */
+export function sourceState<T>(result: AnalyticResult<T>, sourceName: string, connectLabel = 'Connect'): SourceCardState {
+  if (result.source.status === 'NOT_COLLECTED') {
+    return { state: 'no-source', message: `${sourceName} collection is not live yet.`, cta: '' };
+  }
+  if (result.source.status === 'NOT_CONNECTED') {
+    return { state: 'no-source', message: `Connect ${sourceName} to see this.`, cta: connectLabel };
+  }
+  return { state: result.rows.length ? 'ready' : 'empty', message: '', cta: '' };
+}

package/src/service/sca_confirmer.ts

@@ -20,10 +20,17 @@ export interface ScaResult {
  *   { provide: SCA_CONFIRMER, useClass: StripeScaConfirmer }
  *
  * The `actionUrl` (provider-hosted redirect) branch needs no confirmer — only
- * the inline `clientSecret` branch delegates here.
+ * the inline `clientSecret` branches delegate here.
  */
 export interface ScaConfirmer {
+  /** Run the intent's `next_action` (Stripe.js `handleNextAction`). */
   confirm(clientSecret: string): Promise<ScaResult>;
+  /**
+   * Re-confirm the intent on-session with the method the issuer refused
+   * off-session (Stripe.js `confirmCardPayment`, stripe-ios
+   * `STPPaymentHandler.confirmPayment`) — there is no `next_action` to run.
+   */
+  confirmWithMethod(clientSecret: string, paymentMethodId: string): Promise<ScaResult>;
 }
 
 export const SCA_CONFIRMER = new InjectionToken<ScaConfirmer>('SailScaConfirmer');