@nauticana/sail 1.1.22 → 1.1.24

package/README.md

@@ -23,11 +23,12 @@ A shared Angular component library for building CRUD-based admin frontends. Prov
 | **Dashboard** | `DashboardShellComponent`, `DataCardComponent`, `LockedOverlayComponent`, `ActionCenterComponent`, `EntitySelectorComponent`, `VerificationFlowComponent` |
 | **Payout** | `PayoutProviderOnboardingComponent`, `PayoutBankInfoFormComponent` |
 | **Agency** | `AgencyClientsComponent`, `AgencyStatusBannerComponent`, `AgencyAcceptComponent`, `AgencyEarningsSummaryComponent`, `CommissionLedgerComponent`, `AgencyPayoutHistoryComponent`, `AgencyPayoutProfileComponent` |
+| **Notifications** | `NotificationCenterComponent`, `NotificationInboxService` |
 | **Payments / SCA** | `UserPaymentMethodsComponent`, `ScaConfirmComponent`, `ScaConfirmer` (port), `SCA_CONFIRMER` (token) |
-| **Services** | `BaseAuthService` (OTP / social / push / deleteAccount / logoutEverywhere / profile: `getProfile`, `updateProfile`, `request`+`confirmEmailChange`, `request`+`confirmPhoneChange`), `BillingService`, `AgencyService`, `BackendService`, `PayoutService`, `UserPaymentMethodService`, `loadScript()`, `authInterceptor`, `apiResponseInterceptor` |
+| **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`, 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`, `InboxMessage`/`InboxPage`, 2FA types, etc. |
 | **Decorators** | `@IsSailString()`, `@IsSailNumeric()` (class-validator based) |
 | **Utils** | `titleCase()`, `fromPriceLabel()`, `formatMinorCurrency()` |
 
@@ -342,6 +343,9 @@ Omit the URL to skip client-side policy checks. The server stays the authoritati
 | `POST /api/user/trusted-device/revoke` | Revoke a trusted device |
 | `POST /api/user/logout-everywhere` | Sign out of all devices — **requires re-auth** |
 | `DELETE /api/user/account` | Soft-delete the caller's account — **requires re-auth** |
+| `GET /api/notifications` | Notification inbox page — `?before=<id>&limit=<n>`, newest first (keel v1.2.71) |
+| `POST /api/notifications/mark_read` | Mark one message read — `{"id": "<id>"}` |
+| `POST /api/notifications/mark_all_read` | Mark the caller's whole inbox read |
 | `POST /api/push/register` | Register an FCM / APNs token |
 | `POST /api/push/revoke` | Revoke an FCM / APNs token |
 | `POST /api/billing/checkout` | Create provider-hosted checkout session — **JWT-gated, allowlist-validated** |
@@ -768,14 +772,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)`. |
+
+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:
 
-- redirects to `ChargeResult.actionUrl` when present (provider-hosted challenge — no SDK needed); else
-- delegates the inline `ChargeResult.clientSecret` to the app-registered `SCA_CONFIRMER`.
+- `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)
 
@@ -784,6 +794,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" }
 ```
@@ -807,6 +818,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' };
+  }
 }
 ```
 
@@ -830,7 +848,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
 
@@ -949,9 +967,9 @@ For backward compatibility, the older OAuth-code flow `BaseAuthService.loginWith
 Horizontal building blocks for an entitlement-aware dashboard. All are presentational (signals in, events out) and ship no CSS — the app styles the documented class hooks and supplies the metric data, chart, and action logic.
 
 - **`DashboardShellComponent`** (`sail-dashboard-shell`) — responsive card-grid layout. `[heading]` + a `[dashboardActions]` projection slot for the header; project cards into the default slot. Styles: `.dashboard-shell` / `.dashboard-header` / `.dashboard-grid`.
-- **`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`.
+- **`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.
+- **`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.
 - **`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.
@@ -969,6 +987,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
@@ -1020,6 +1045,61 @@ issued for. The component is unstyled — style `.domain-verification`,
 `.domain-verification-field`, `.domain-verification-verified` and the
 `.verification-*` hooks of the step UI it composes.
 
+## Notification inbox (v1.1.23)
+
+`NotificationInboxService` is the stateful client for keel's `InboxHandler` (keel
+**v1.2.71+**). `NotificationCenterComponent` (`sail-notification-center`) renders it;
+the app handles what each message means through `(selected)`.
+
+The default routes match keel. Override the three `notifications*URL` values through
+`configureRestUrls` only when the handler is mounted elsewhere.
+
+```ts
+const inbox = inject(NotificationInboxService);
+inbox.load().subscribe();          // newest page, replaces the cache
+inbox.loadMore().subscribe();      // the page older than the last cached message
+inbox.markRead(id).subscribe();
+inbox.markAllRead().subscribe();
+inbox.reset();                     // on logout — the cache is per-session
+```
+
+```ts
+readonly unread = inject(NotificationInboxService).unreadCount;   // Signal<number>
+```
+
+| Member | Meaning |
+|---|---|
+| `messages` | `Signal<InboxMessage[]>`, newest first. |
+| `unreadCount` | `Signal<number>` across the whole inbox, not just the loaded page. |
+| `hasMore` | `Signal<boolean>` — the last page came back full, so older messages may exist. |
+| `load(limit)` / `loadMore(limit)` | Default 20; keel caps a page at 100 and the client clamps to match. |
+
+Message ids are server-side `BIGINT`s serialized as strings. Both mark-read routes
+return `204`, so the service updates its cache locally. Call `load()` to pick up new
+messages and `reset()` on logout.
+
+```html
+<sail-notification-center
+  heading="Notifications"
+  [pageSize]="20"
+  (selected)="open($event)" />
+```
+
+| Input / output | Meaning |
+|---|---|
+| `[pageSize]` | Messages per request, default 20. |
+| `[heading]` | Rendered as an `<h2>` with the unread count; empty (default) when the page has its own heading. |
+| `[emptyMessage]`, `[markAllLabel]`, `[markReadLabel]`, `[loadMoreLabel]` | Configurable labels. |
+| `[dateFormat]` | Angular `DatePipe` format for each timestamp, default `short`. |
+| `[selectable]` | `false` renders messages as static text, default `true`. |
+| `[markReadOnSelect]` | Selecting an unread message also marks it read, default `true`. |
+| `(selected)` | The chosen `InboxMessage` — route on its `type` / `data` yourself. |
+
+Ships no CSS — style
+`.notification-center`, `.notification-center__{head,title,unread,error,loading,empty,list,more}`,
+`.notification-item`, `.notification-item--unread` and
+`.notification-item__{select,static,title,body,time,read}`.
+
 ## Grouped review actions and diffs (v1.1.19)
 
 `GroupedBulkActionComponent` (`sail-grouped-bulk-action`) groups eligible rows

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "1.1.22",
+  "version": "1.1.24",
   "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/dashboard/data_card.html

@@ -37,7 +37,9 @@
       <div class="data-card-no-source" role="group" [attr.aria-label]="(heading() || 'Insight') + ' — source unavailable'">
         <p class="no-source-name">{{ sourceName() }}</p>
         <p class="no-source-message">{{ noSourceMessage() }}</p>
-        <button matButton="elevated" type="button" class="primary" (click)="connect.emit()">{{ connectLabel() }}</button>
+        @if (connectLabel()) {
+          <button matButton="elevated" type="button" class="primary" (click)="connect.emit()">{{ connectLabel() }}</button>
+        }
       </div>
     }
   }

package/src/component/dashboard/no_source_overlay.html

@@ -2,7 +2,9 @@
   <div class="no-source-overlay" role="group" [attr.aria-label]="sourceName() + ' — source unavailable'">
     <p class="no-source-name">{{ sourceName() }}</p>
     <p class="no-source-message">{{ message() }}</p>
-    <button matButton="elevated" type="button" class="primary" (click)="connect.emit()">{{ ctaLabel() }}</button>
+    @if (ctaLabel()) {
+      <button matButton="elevated" type="button" class="primary" (click)="connect.emit()">{{ ctaLabel() }}</button>
+    }
   </div>
 } @else if (content(); as tpl) {
   <ng-container [ngTemplateOutlet]="tpl"></ng-container>

package/src/component/notification/notification_center.html

@@ -0,0 +1,60 @@
+<section class="notification-center" [attr.aria-busy]="loading()">
+  <div class="notification-center__head">
+    @if (heading()) {
+      <h2 class="notification-center__title">
+        {{ heading() }}
+        @if (unreadCount()) { <span class="notification-center__unread">{{ unreadCount() }}</span> }
+      </h2>
+    }
+    @if (unreadCount()) {
+      <button matButton type="button" [disabled]="loading()" (click)="markAllRead()">{{ markAllLabel() }}</button>
+    }
+  </div>
+
+  @if (errorMessage()) {
+    <p class="notification-center__error" role="alert">{{ errorMessage() }}</p>
+  }
+
+  @if (loading() && !messages().length) {
+    <div class="notification-center__loading">
+      <mat-spinner diameter="28" aria-label="Loading notifications"></mat-spinner>
+    </div>
+  }
+
+  @if (empty()) {
+    <p class="notification-center__empty">{{ emptyMessage() }}</p>
+  } @else if (messages().length) {
+    <ul class="notification-center__list">
+      @for (message of messages(); track message.id) {
+        <li class="notification-item" [class.notification-item--unread]="!message.readAt">
+          @if (selectable()) {
+            <button class="notification-item__select" type="button" [disabled]="loading()" (click)="select(message)">
+              <span class="notification-item__title">{{ message.title }}</span>
+              <span class="notification-item__body">{{ message.body }}</span>
+              <time class="notification-item__time" [attr.datetime]="message.createdAt">{{ message.createdAt | date: dateFormat() }}</time>
+            </button>
+          } @else {
+            <div class="notification-item__static">
+              <span class="notification-item__title">{{ message.title }}</span>
+              <span class="notification-item__body">{{ message.body }}</span>
+              <time class="notification-item__time" [attr.datetime]="message.createdAt">{{ message.createdAt | date: dateFormat() }}</time>
+            </div>
+          }
+          @if (!message.readAt) {
+            <button matIconButton type="button" class="notification-item__read"
+                    [attr.aria-label]="markReadLabel() + ': ' + message.title"
+                    [disabled]="loading()" (click)="markRead(message)">
+              <mat-icon>done</mat-icon>
+            </button>
+          }
+        </li>
+      }
+    </ul>
+
+    @if (hasMore()) {
+      <button matButton type="button" class="notification-center__more" [disabled]="loading()" (click)="loadMore()">
+        {{ loadMoreLabel() }}
+      </button>
+    }
+  }
+</section>

package/src/component/notification/notification_center.ts

@@ -0,0 +1,69 @@
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, computed, inject, input, output } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { BaseAsync } from '../abstract/base_async';
+import { NotificationInboxService, INBOX_DEFAULT_PAGE_SIZE } from '../../service/notification_inbox.service';
+import { InboxMessage } from '../../model/notification';
+
+/** In-app inbox over keel's `InboxHandler`; message routing stays with the app. */
+@Component({
+  selector: 'sail-notification-center',
+  templateUrl: './notification_center.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [DatePipe, MatButtonModule, MatIconModule, MatProgressSpinnerModule],
+})
+export class NotificationCenterComponent extends BaseAsync implements OnInit {
+  readonly pageSize = input(INBOX_DEFAULT_PAGE_SIZE);
+  readonly heading = input('');
+  readonly emptyMessage = input('You have no notifications.');
+  readonly markAllLabel = input('Mark all as read');
+  readonly markReadLabel = input('Mark as read');
+  readonly loadMoreLabel = input('Load older');
+  readonly dateFormat = input('short');
+  readonly selectable = input(true);
+  readonly markReadOnSelect = input(true);
+
+  readonly selected = output<InboxMessage>();
+
+  private readonly inbox = inject(NotificationInboxService);
+
+  readonly messages = this.inbox.messages;
+  readonly unreadCount = this.inbox.unreadCount;
+  readonly hasMore = this.inbox.hasMore;
+  readonly empty = computed(() => !this.loading() && !this.errorMessage() && this.messages().length === 0);
+
+  ngOnInit(): void {
+    this.reload();
+  }
+
+  reload(): void {
+    this.run(this.inbox.load(this.pageSize()), () => undefined, 'Could not load your notifications.');
+  }
+
+  loadMore(): void {
+    this.run(this.inbox.loadMore(this.pageSize()), () => undefined, 'Could not load older notifications.');
+  }
+
+  select(message: InboxMessage): void {
+    // Not via run(): the app may navigate away on select, and teardown would cancel the POST.
+    if (this.markReadOnSelect() && !message.readAt) {
+      this.inbox.markRead(message.id).subscribe({
+        error: (err) => this.setError(err, 'Could not mark that notification read.'),
+      });
+    }
+    this.selected.emit(message);
+  }
+
+  markRead(message: InboxMessage): void {
+    if (message.readAt) return;
+    this.run(this.inbox.markRead(message.id), () => undefined, 'Could not mark that notification read.');
+  }
+
+  markAllRead(): void {
+    if (!this.unreadCount()) return;
+    this.run(this.inbox.markAllRead(), () => undefined, 'Could not mark your notifications read.');
+  }
+}

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/index.ts

@@ -4,6 +4,7 @@ export * from './model/auth';
 export * from './model/common';
 export * from './model/dashboard';
 export * from './model/oauth_connection';
+export * from './model/notification';
 export * from './model/agency';
 export * from './model/decorator';
 export * from './component/abstract/base_table';
@@ -15,6 +16,7 @@ export * from './component/dashboard/action_center';
 export * from './component/dashboard/entity_selector';
 export * from './component/dashboard/verification_flow';
 export * from './component/verification/domain_verification';
+export * from './component/notification/notification_center';
 export * from './component/oauth_connection/oauth_connection_panel';
 export * from './component/abstract/base_form';
 export * from './component/abstract/base_view';
@@ -74,6 +76,7 @@ export * from './service/billing.service';
 export * from './service/payout.service';
 export * from './service/agency.service';
 export * from './service/oauth_connection.service';
+export * from './service/notification_inbox.service';
 export * from './service/user_payment_method.service';
 export * from './service/script_loader';
 export * from './service/auth.interceptor';

package/src/model/appdata.ts

@@ -325,18 +325,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/model/notification.ts

@@ -0,0 +1,20 @@
+/** In-app notification returned by keel's `InboxHandler`. */
+export interface InboxMessage {
+  /** Server-side `BIGINT`, serialized as a string to preserve precision. */
+  id: string;
+  /** App-defined category (keel `notification_type`); '' when the sender set none. */
+  type: string;
+  title: string;
+  body: string;
+  /** Sender payload the app routes on (`{}` when the sender supplied none). */
+  data: Record<string, string>;
+  /** ISO timestamp, or null while unread. */
+  readAt: string | null;
+  createdAt: string;
+}
+
+/** One page of the caller's inbox, newest first, plus the whole-inbox unread total. */
+export interface InboxPage {
+  messages: InboxMessage[];
+  unreadCount: number;
+}

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/notification_inbox.service.ts

@@ -0,0 +1,78 @@
+import { Injectable, Signal, signal } from '@angular/core';
+import { HttpParams } from '@angular/common/http';
+import { Observable, tap } from 'rxjs';
+import { BaseRestService } from './base_rest.service';
+import { RestURL } from './rest_url';
+import { InboxMessage, InboxPage } from '../model/notification';
+
+export const INBOX_MAX_PAGE_SIZE = 100;
+export const INBOX_DEFAULT_PAGE_SIZE = 20;
+
+/** Stateful client for keel's `InboxHandler` (v1.2.71+). Call `reset()` on logout. */
+@Injectable({ providedIn: 'root' })
+export class NotificationInboxService extends BaseRestService {
+  private readonly cached = signal<InboxMessage[]>([]);
+  private readonly unread = signal(0);
+  private readonly older = signal(false);
+
+  readonly messages: Signal<InboxMessage[]> = this.cached.asReadonly();
+  readonly unreadCount: Signal<number> = this.unread.asReadonly();
+  readonly hasMore: Signal<boolean> = this.older.asReadonly();
+
+  load(limit = INBOX_DEFAULT_PAGE_SIZE): Observable<InboxPage> {
+    return this.fetch('', limit).pipe(tap((page) => this.cached.set(page.messages)));
+  }
+
+  loadMore(limit = INBOX_DEFAULT_PAGE_SIZE): Observable<InboxPage> {
+    const loaded = this.cached();
+    const oldest = loaded.length ? loaded[loaded.length - 1].id : '';
+    return this.fetch(oldest, limit).pipe(
+      tap((page) => this.cached.update((rows) => {
+        const ids = new Set(rows.map((message) => message.id));
+        return rows.concat(page.messages.filter((message) => !ids.has(message.id)));
+      })),
+    );
+  }
+
+  markRead(id: string): Observable<void> {
+    return this.http.post<void>(this.url(RestURL.notificationsMarkReadURL), { id }).pipe(
+      tap(() => {
+        const wasUnread = this.cached().some((m) => m.id === id && !m.readAt);
+        this.cached.update((rows) => rows.map((m) => (m.id === id ? { ...m, readAt: m.readAt ?? nowIso() } : m)));
+        if (wasUnread) this.unread.update((n) => Math.max(0, n - 1));
+      }),
+    );
+  }
+
+  markAllRead(): Observable<void> {
+    return this.http.post<void>(this.url(RestURL.notificationsMarkAllReadURL), {}).pipe(
+      tap(() => {
+        this.cached.update((rows) => rows.map((m) => (m.readAt ? m : { ...m, readAt: nowIso() })));
+        this.unread.set(0);
+      }),
+    );
+  }
+
+  reset(): void {
+    this.cached.set([]);
+    this.unread.set(0);
+    this.older.set(false);
+  }
+
+  private fetch(before: string, limit: number): Observable<InboxPage> {
+    const requested = Number.isFinite(limit) ? Math.trunc(limit) : INBOX_DEFAULT_PAGE_SIZE;
+    const size = Math.min(Math.max(1, requested), INBOX_MAX_PAGE_SIZE);
+    let params = new HttpParams().set('limit', size);
+    if (before) params = params.set('before', before);
+    return this.http.get<InboxPage>(this.url(RestURL.notificationsURL), { params }).pipe(
+      tap((page) => {
+        this.unread.set(page.unreadCount);
+        this.older.set(page.messages.length >= size);
+      }),
+    );
+  }
+}
+
+function nowIso(): string {
+  return new Date().toISOString();
+}

package/src/service/rest_url.ts

@@ -46,6 +46,10 @@ export const RestURL = {
   profileEmailConfirmURL: '/api/user/profile/email/confirm',
   profilePhoneURL:        '/api/user/profile/phone',
   profilePhoneConfirmURL: '/api/user/profile/phone/confirm',
+  // Notification inbox (keel InboxHandler, v1.2.71+).
+  notificationsURL:            '/api/notifications',
+  notificationsMarkReadURL:    '/api/notifications/mark_read',
+  notificationsMarkAllReadURL: '/api/notifications/mark_all_read',
   pushRegisterURL:     '/api/push/register',
   pushRevokeURL:       '/api/push/revoke',
   // Payout — keel/payout endpoints. keel mounts PayoutHandler.Routes(prefix)

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');