CI deploy 895c0ed

build_info.json

@@ -1 +1 @@
-{"commit":"0c6476e","build_time":"2026-07-13T04:57:19Z","frontend":"1.0.0"}
+{"commit":"895c0ed","build_time":"2026-07-13T14:35:49Z","frontend":"1.0.0"}

web/.gitignore

@@ -3,3 +3,4 @@ dist
 test-results
 playwright-report
 .vite
+e2e/screenshots

web/e2e/agentic-ux.spec.ts

@@ -0,0 +1,203 @@
+import { test, expect, type Page } from '@playwright/test'
+
+const json = (body: unknown) => ({ status: 200, contentType: 'application/json', body: JSON.stringify(body) })
+
+function orchestrateResult(req: Record<string, unknown>) {
+  const amount = Number(req.amount_minor ?? 0)
+  const country = String(req.country ?? 'SA')
+  const known = (req.known_payees as string[] | undefined) ?? []
+  const history = Number(req.history_payments ?? 20)
+  const base = {
+    reason_codes: ['risk_frictionless'], required_auth: ['webauthn', 'oob'],
+    auth_recommendation: { recommended_method: 'webauthn', meets_pdp_minimum: true },
+    rails: { ranked: ['sarie'], eligible_only: true },
+    audit: { verified: true, length: 6, protection_level: 'signed-checkpoint (demo, in-memory)' },
+    labels: { note: 'DEMO ONLY · Mock provider · No real money' }, fallback: null,
+  }
+  const risk = (band: string, codes: string[]) => ({ band, recommend_step_up: band !== 'low', reason_codes: codes, confidence: 'ok', model_version: 'v1', feature_version: 'features-v1', shadow: true })
+  const explain = (msgs: string[], codes: string[]) => ({ locale: req.locale ?? 'en', messages: msgs, reason_codes: codes })
+  if (amount >= 99_999_999) return { ...base, decision: 'deny', agent_state: 'policy_evaluated', risk: risk('high', ['POLICY_LIMIT_EXCEEDED']), explanation: explain(['This payment exceeds an allowed limit.'], ['POLICY_LIMIT_EXCEEDED']), payment: null }
+  if (country === 'AE') return { ...base, decision: 'deny', agent_state: 'policy_evaluated', risk: risk('model_unavailable', ['MODEL_UNAVAILABLE']), explanation: explain([], []), payment: null }
+  if (history === 0) return { ...base, decision: 'step_up', agent_state: 'policy_evaluated', risk: risk('model_unavailable', ['INSUFFICIENT_HISTORY']), explanation: explain(['There is not enough history to personalize this check.'], ['INSUFFICIENT_HISTORY']), payment: null }
+  if (known.length === 0) return { ...base, decision: 'allow', agent_state: 'initiated', risk: risk('elevated', ['NEW_PAYEE']), explanation: explain(['This payment is to a payee you have not paid before.'], ['NEW_PAYEE']), payment: { id: 'pay_demo1', status: 'processing' } }
+  return { ...base, decision: 'allow', agent_state: 'initiated', risk: risk('low', []), explanation: explain([], []), payment: { id: 'pay_demo2', status: 'processing' } }
+}
+
+async function mockApi(page: Page) {
+  let settled = false
+  // settled uses a REALISTIC deterministic timestamp (2023-11-14) so normal date rendering is tested.
+  const pay = (over: Record<string, unknown> = {}) => ({ id: 'pay_e2e', user_id: 'demo', status: settled ? 'succeeded' : 'requires_customer_action', amount_minor: 15050, currency: 'SAR', country: 'SA', merchant_id: 'Blue Bottle', provider: 'mock', provider_ref: 'mp', correlation_id: 'c', consent_id: 'c', refunded_minor: 0, requires_action_url: null, locked: true, created_at: 1_699_990_000, updated_at: settled ? 1_700_000_000 : 1_699_990_000, ...over })
+  await page.route('**/version', (r) => r.fulfill(json({ app_version: '1.0.0', commit: 'test', build_time: null, frontend: '1.0.0', backend: '1.0.0', ui_mode: 'react', provider_mode: 'mock', non_custodial: true })))
+  await page.route('**/payments/providers', (r) => r.fulfill(json({ default: { country: 'SA', currency: 'SAR' }, non_custodial: true, routing: { SA: { provider: 'mock', capabilities: { name: 'mock', supports_cancel: true, supports_refund: true, supports_partial_refund: true, countries: ['*'], currencies: ['SAR'], payment_initiation: true, sandbox: true } } } })))
+  await page.route('**/demo/seed', (r) => r.fulfill(json({ success: true, user_id: 'demo', modalities: ['face'], token: 'tok', samples: { face_image: 'Zg==' } })))
+  await page.route('**/payments', (r) => r.request().method() === 'POST' ? r.fulfill(json(pay())) : r.continue())
+  await page.route('**/payments/pay_e2e/mock-advance', (r) => { settled = true; return r.fulfill(json(pay())) })
+  await page.route('**/payments/pay_e2e', (r) => r.fulfill(json(pay())))
+  await page.route('**/ai/v1/models/status', (r) => r.fulfill(json({ behavioural_model: 'logreg', model_version: 'v1', feature_version: 'features-v1', reason_codes_version: 'reason_codes-v1', shadow_only: true, affects_payment: false, label: 'DEMO ONLY · Mock provider · No real-money payment' })))
+  await page.route('**/ai/v1/demo/payee', (r) => r.fulfill(json({ payee_ref: 'payee_demo', display: 'SA03 **** 7519' })))
+  await page.route('**/ai/v1/demo/orchestrate', (r) => r.fulfill(json(orchestrateResult(r.request().postDataJSON() ?? {}))))
+}
+
+test.beforeEach(async ({ page }) => { await mockApi(page) })
+
+const shot = (page: Page, name: string, project: string) =>
+  page.screenshot({ path: `e2e/screenshots/${name}-${project}.png`, fullPage: true })
+
+// Change route WITHOUT a document reload (in-memory session must survive).
+const goHash = (page: Page, h: string) => page.evaluate((x) => { window.location.hash = x }, h)
+
+async function signIn(page: Page) {
+  await page.goto('/#/enroll')
+  await page.getByRole('button', { name: 'Load demo identity' }).click()
+  await expect(page.getByText(/Signed in as/i)).toBeVisible()   // enroll success (header says "Signed in:")
+}
+async function walkToReview(page: Page) {
+  await goHash(page, '#/pay')
+  await page.getByTestId('stage-payee').waitFor()
+  await page.getByRole('button', { name: 'Next' }).click()   // -> amount
+  await page.getByRole('button', { name: 'Next' }).click()   // -> rail
+  await expect(page.getByRole('button', { name: 'Next' })).toBeEnabled()
+  await page.getByRole('button', { name: 'Next' }).click()   // -> review
+  await expect(page.getByTestId('stage-review')).toBeVisible()
+}
+
+test('1-3. default Home + working desktop/mobile navigation', async ({ page }, info) => {
+  await page.goto('/')
+  await expect(page.getByRole('heading', { name: 'Welcome to AmanPay' })).toBeVisible()
+  await shot(page, 'home', info.project.name)
+  const navSel = info.project.name === 'mobile' ? '.bottom-nav' : '.desktop-nav'
+  await expect(page.locator(navSel)).toBeVisible()
+  await page.locator(`${navSel} button`, { hasText: 'Security' }).click()
+  await expect(page.getByRole('heading', { name: 'Security' })).toBeVisible()
+})
+
+test('4. Security page explains device authentication', async ({ page }, info) => {
+  await page.goto('/#/security')
+  await expect(page.getByText(/stays on your device/i)).toBeVisible()
+  await expect(page.getByText('Shadow mode').first()).toBeVisible()
+  await shot(page, 'security', info.project.name)
+})
+
+test('5-6. no fingerprint upload in customer flow; Lab has the disclaimer', async ({ page }, info) => {
+  await page.goto('/#/pay')
+  await expect(page.locator('input[type="file"]')).toHaveCount(0)
+  await page.goto('/#/biometrics/lab')
+  await expect(page.getByText(/A website cannot retrieve the fingerprint stored in your phone or computer sensor/i)).toBeVisible()
+  await shot(page, 'biometrics-lab', info.project.name)
+})
+
+test('7-11. payment journey completes stages -> review -> processing -> receipt', async ({ page }, info) => {
+  await signIn(page)
+  await goHash(page, '#/pay')
+  await expect(page.getByTestId('stage-payee')).toBeVisible()
+  await shot(page, 'payment-payee', info.project.name)
+  await walkToReview(page)
+  await expect(page.getByText(/Confirm with device biometrics/i)).toBeVisible()
+  await expect(page.getByText(/SA03 \*\*\*\* \*\*\*\* 7519/)).toBeVisible()  // masked, not full IBAN
+  await shot(page, 'payment-review', info.project.name)
+  await page.getByRole('button', { name: 'Next' }).click()   // review -> auth
+  await page.getByRole('button', { name: 'Confirm with device biometrics' }).click()
+  await expect(page.getByText(/Awaiting your bank|Processing/i).first()).toBeVisible()
+  await shot(page, 'payment-processing', info.project.name)
+  await page.getByRole('button', { name: /Simulate bank approval/i }).click()
+  await expect(page.getByTestId('receipt')).toBeVisible()
+  await expect(page.getByTestId('success')).toBeVisible()
+  // receipt date must be real — never 1970 or Invalid Date
+  const receiptText = (await page.getByTestId('receipt').textContent()) ?? ''
+  expect(receiptText).not.toMatch(/1970|Invalid Date/)
+  expect(receiptText).toMatch(/2023/)
+  await shot(page, 'payment-receipt', info.project.name)
+})
+
+test('11b. Arabic receipt renders a real date (no 1970 / Invalid Date)', async ({ page }, info) => {
+  await signIn(page)
+  await page.getByRole('button', { name: 'العربية' }).click()
+  await goHash(page, '#/pay')
+  await page.getByRole('button', { name: 'التالي' }).click()
+  await page.getByRole('button', { name: 'التالي' }).click()
+  await expect(page.getByRole('button', { name: 'التالي' })).toBeEnabled()
+  await page.getByRole('button', { name: 'التالي' }).click()   // review
+  await page.getByRole('button', { name: 'التالي' }).click()   // auth
+  await page.getByRole('button', { name: 'التأكيد بالقياسات الحيوية للجهاز' }).click()
+  await page.getByRole('button', { name: /موافقة البنك|Simulate bank approval/i }).click()
+  await expect(page.getByTestId('receipt')).toBeVisible()
+  const ar = (await page.getByTestId('receipt').textContent()) ?? ''
+  expect(ar).not.toMatch(/1970|Invalid Date/)
+  await shot(page, 'payment-receipt-arabic', info.project.name)
+})
+
+test('9. editing after review returns to the edit stage', async ({ page }) => {
+  await signIn(page)
+  await walkToReview(page)
+  await page.getByRole('button', { name: /Edit · Amount/i }).click()
+  await expect(page.getByTestId('stage-amount')).toBeVisible()
+})
+
+test('12. Activity lists the session payment event', async ({ page }, info) => {
+  await signIn(page)
+  await walkToReview(page)
+  await page.getByRole('button', { name: 'Next' }).click()
+  await page.getByRole('button', { name: 'Confirm with device biometrics' }).click()
+  await page.getByRole('button', { name: /Simulate bank approval/i }).click()
+  await expect(page.getByTestId('receipt')).toBeVisible()
+  await page.goto('/#/activity')
+  await expect(page.getByText('Activity from this session')).toBeVisible()
+  await expect(page.getByTestId('activity-item').first()).toBeVisible()
+  await shot(page, 'activity', info.project.name)
+})
+
+test('13-14. agentic demo normal + new-payee scenarios', async ({ page }, info) => {
+  await page.goto('/#/demo/agentic-security')
+  await expect(page.getByText('Shadow mode').first()).toBeVisible()
+  await page.getByTestId('scenario-normal').click()
+  await expect(page.getByTestId('agentic-result')).toBeVisible()
+  await shot(page, 'agentic-demo', info.project.name)
+  await page.getByTestId('scenario-newPayee').click()
+  await expect(page.getByText(/have not paid before/i)).toBeVisible()
+  await expect(page.getByTestId('risk-band')).toHaveText('elevated')
+})
+
+test('15-16. provider-unavailable -> deterministic deny (shadow cannot override)', async ({ page }, info) => {
+  await page.goto('/#/demo/agentic-security')
+  await page.getByTestId('scenario-providerUnavailable').click()
+  await expect(page.getByTestId('policy-decision')).toHaveText('deny')
+  await shot(page, 'agentic-deny', info.project.name)
+})
+
+test('17-18. dev panel hidden by default; no secret/capability/IBAN text', async ({ page }) => {
+  await page.goto('/#/demo/agentic-security')
+  await page.getByTestId('scenario-normal').click()
+  await expect(page.getByTestId('agentic-result')).toBeVisible()
+  await expect(page.locator('details.dev-panel')).toHaveJSProperty('open', false)
+  const body = (await page.locator('body').textContent()) ?? ''
+  expect(body).not.toMatch(/CapabilityGrant|ExecutionCapability|BEGIN [A-Z ]*PRIVATE KEY|608010167519/)
+})
+
+test('19-20. Arabic RTL for Home + Security', async ({ page }, info) => {
+  await page.goto('/#/home')
+  await page.getByRole('button', { name: 'العربية' }).click()
+  await expect(page.locator('html')).toHaveAttribute('dir', 'rtl')
+  await expect(page.getByText('مرحبًا بك في أمان‌باي')).toBeVisible()
+  await shot(page, 'arabic-home', info.project.name)
+  await page.goto('/#/security')
+  await expect(page.getByText('وضع الظل')).toBeVisible()
+  await shot(page, 'arabic-security', info.project.name)
+})
+
+test('21. unknown route shows a safe not-found screen', async ({ page }) => {
+  await page.goto('/#/does-not-exist')
+  await expect(page.getByText(/Page not found/i)).toBeVisible()
+})
+
+test('22. Arabic payment review renders', async ({ page }, info) => {
+  await signIn(page)
+  await page.goto('/#/home')
+  await page.getByRole('button', { name: 'العربية' }).click()
+  await goHash(page, '#/pay')
+  await page.getByRole('button', { name: 'التالي' }).click()
+  await page.getByRole('button', { name: 'التالي' }).click()
+  await expect(page.getByRole('button', { name: 'التالي' })).toBeEnabled()
+  await page.getByRole('button', { name: 'التالي' }).click()
+  await expect(page.getByTestId('stage-review')).toBeVisible()
+  await shot(page, 'arabic-payment-review', info.project.name)
+})

web/e2e/biometrics.spec.ts

@@ -33,9 +33,10 @@ async function mockApi(page: Page) {
 
 test.beforeEach(async ({ page }) => { await mockApi(page) })
 
-test('biometrics dashboard is reachable from nav and lists modalities', async ({ page }) => {
-  await page.goto('/#/pay')
-  await page.getByRole('button', { name: 'Biometrics' }).click()
+test('biometrics dashboard route lists modalities', async ({ page }) => {
+  // PR C2.5 IA: the customer nav no longer has a top-level "Biometrics" tab (research demos
+  // live under "Biometrics lab" / the mobile "More" menu). The dashboard route still exists.
+  await page.goto('/#/biometrics')
   await expect(page.getByRole('heading', { name: 'Biometric demo' })).toBeVisible()
   await expect(page.getByText('Available').first()).toBeVisible()
 })

web/package.json

@@ -12,7 +12,8 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "e2e": "playwright test",
-    "e2e:bio": "playwright test --config playwright.bio.config.ts"
+    "e2e:bio": "playwright test --config playwright.bio.config.ts",
+    "e2e:ux": "playwright test --config playwright.ux.config.ts"
   },
   "dependencies": {
     "react": "^18.3.1",
@@ -36,4 +37,4 @@
     "vitest": "^4.1.10",
     "@playwright/test": "^1.47.0"
   }
-}
+}

web/playwright.ux.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from '@playwright/test'
+
+// Agentic Security UX E2E: serves the built app via `vite preview` and mocks all backend
+// calls in-spec (no real backend). Desktop + mobile (Pixel 5).
+export default defineConfig({
+  testDir: './e2e',
+  testMatch: /agentic-ux\.spec\.ts/,
+  timeout: 30_000,
+  reporter: [['list'], ['html', { outputFolder: 'playwright-report', open: 'never' }]],
+  use: {
+    baseURL: process.env.E2E_BASE_URL ?? 'http://localhost:4174',
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+  },
+  webServer: process.env.E2E_BASE_URL ? undefined : {
+    command: 'npm run preview -- --port 4174 --strictPort',
+    url: 'http://localhost:4174',
+    reuseExistingServer: !process.env.CI,
+    timeout: 60_000,
+  },
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+    { name: 'mobile', use: { ...devices['Pixel 5'] } },
+  ],
+})

web/src/App.tsx

@@ -2,6 +2,11 @@ import { useEffect, useState } from 'react'
 import { EnrollPage } from './pages/EnrollPage'
 import { PayPage } from './pages/PayPage'
 import { NotFoundPage } from './pages/NotFoundPage'
+import { HomePage } from './pages/HomePage'
+import { SecurityPage } from './pages/SecurityPage'
+import { BiometricsLabPage } from './pages/BiometricsLabPage'
+import { AgenticDemoPage } from './pages/AgenticDemoPage'
+import { ActivityPage } from './pages/ActivityPage'
 import { BiometricsDashboard } from './pages/BiometricsDashboard'
 import { BiometricEnrollPage } from './pages/BiometricEnrollPage'
 import { BiometricVerifyPage } from './pages/BiometricVerifyPage'
@@ -13,16 +18,18 @@ import { AppFooter } from './components/AppFooter'
 import { useSession } from './hooks/useSession'
 import { useI18n } from './i18n'
 import { Button } from './components/ui'
+import { AGENTIC_DEMO_ENABLED } from './api/ai'
 
 const ROUTES = [
-  'pay', 'enroll', 'biometrics', 'biometrics/enroll', 'biometrics/verify',
+  'home', 'pay', 'security', 'activity', 'demo/agentic-security', 'biometrics/lab',
+  'enroll', 'biometrics', 'biometrics/enroll', 'biometrics/verify',
   'biometrics/liveness', 'biometrics/reportcard', 'biometrics/oob', 'results', 'notfound',
 ] as const
 type Route = (typeof ROUTES)[number]
 
 function parse(): Route {
   const raw = window.location.hash.replace(/^#\/?/, '')
-  if (raw === '' || raw === 'pay') return 'pay'
+  if (raw === '' || raw === 'home') return 'home'
   return (ROUTES as readonly string[]).includes(raw) ? (raw as Route) : 'notfound'
 }
 
@@ -37,12 +44,22 @@ function useHashRoute(): [Route, (r: string) => void] {
   return [route, nav]
 }
 
+// Primary customer destinations (desktop nav + mobile bottom bar).
+const PRIMARY: { route: string; key: string }[] = [
+  { route: 'home', key: 'nav.home' },
+  { route: 'pay', key: 'nav.pay' },
+  { route: 'security', key: 'nav.security' },
+  { route: 'activity', key: 'nav.activity' },
+]
+
 export function App() {
   const { t, locale, setLocale } = useI18n()
   const { activeUser } = useSession()
   const [route, nav] = useHashRoute()
+  const [moreOpen, setMoreOpen] = useState(false)
+  const matches = (r: string) => route === r || (r === 'home' && route === 'home')
   const tab = (r: string, label: string) => (
-    <button className={`tab ${route === r ? 'active' : ''}`} aria-current={route === r} onClick={() => nav(r)}>{label}</button>
+    <button className={`tab ${matches(r) ? 'active' : ''}`} aria-current={matches(r)} onClick={() => nav(r)}>{label}</button>
   )
   return (
     <div className="app">
@@ -56,11 +73,10 @@ export function App() {
           </svg>
           <span>{t('app.title')}</span>
         </div>
-        <nav aria-label="Primary">
-          {tab('pay', t('nav.pay'))}
-          {tab('enroll', t('nav.enroll'))}
-          {tab('biometrics', t('nav.biometrics'))}
-          {tab('results', t('nav.results'))}
+        <nav aria-label="Primary" className="desktop-nav">
+          {PRIMARY.map((p) => <span key={p.route}>{tab(p.route, t(p.key as never))}</span>)}
+          {AGENTIC_DEMO_ENABLED && tab('demo/agentic-security', t('nav.demo'))}
+          {tab('biometrics/lab', t('nav.lab'))}
         </nav>
         <div className="topbar-right">
           <span className="active-user">{activeUser ? t('header.activeUser', { user: activeUser.userId }) : t('header.noUser')}</span>
@@ -69,8 +85,12 @@ export function App() {
       </header>
       <p className="demo-banner" role="note">{t('demo.banner')}</p>
       <main className="content">
-        <p className="tagline">{t('app.tagline')}</p>
-        {route === 'pay' && <PayPage onNavEnroll={() => nav('enroll')} />}
+        {route === 'home' && <HomePage onNav={(r) => nav(r)} />}
+        {route === 'pay' && <PayPage onNavEnroll={() => nav('enroll')} onNav={(r) => nav(r)} />}
+        {route === 'security' && <SecurityPage onNav={(r) => nav(r)} />}
+        {route === 'demo/agentic-security' && <AgenticDemoPage />}
+        {route === 'biometrics/lab' && <BiometricsLabPage onNav={(r) => nav(r)} />}
+        {route === 'activity' && <ActivityPage />}
         {route === 'enroll' && <EnrollPage />}
         {route === 'biometrics' && <BiometricsDashboard onNav={(r) => nav(r)} />}
         {route === 'biometrics/enroll' && <BiometricEnrollPage />}
@@ -81,6 +101,26 @@ export function App() {
         {route === 'results' && <ResultsPage />}
         {route === 'notfound' && <NotFoundPage onNav={(r) => nav(r)} />}
       </main>
+      {moreOpen && (
+        <div className="more-sheet" role="menu" aria-label={t('nav.more')}>
+          {AGENTIC_DEMO_ENABLED && (
+            <button role="menuitem" className="more-item" onClick={() => { setMoreOpen(false); nav('demo/agentic-security') }}>{t('nav.demo')}</button>
+          )}
+          <button role="menuitem" className="more-item" onClick={() => { setMoreOpen(false); nav('biometrics/lab') }}>{t('nav.lab')}</button>
+        </div>
+      )}
+      <nav className="bottom-nav" aria-label="Primary mobile">
+        {PRIMARY.map((p) => (
+          <button key={p.route} className={`bnav ${matches(p.route) ? 'active' : ''}`}
+            aria-current={matches(p.route)} onClick={() => { setMoreOpen(false); nav(p.route) }}>
+            <span className="bnav-label">{t(p.key as never)}</span>
+          </button>
+        ))}
+        <button className={`bnav ${moreOpen ? 'active' : ''}`} aria-expanded={moreOpen}
+          aria-haspopup="menu" onClick={() => setMoreOpen((o) => !o)}>
+          <span className="bnav-label">{t('nav.more')}</span>
+        </button>
+      </nav>
       <AppFooter />
     </div>
   )

web/src/activity/store.ts

@@ -0,0 +1,50 @@
+// Session-only activity store (PR C2.5). Honest: this is NOT persistent account history —
+// it holds events created during the current browser session and is labelled as such in the UI.
+// It never stores raw biometrics, full IBANs, capabilities, signatures or secrets.
+
+export type ActivityKind = 'payment' | 'confirmation' | 'biometrics' | 'security-demo'
+
+export interface ActivityEvent {
+  id: string
+  kind: ActivityKind
+  title: string
+  status: string
+  ts: number
+  amount?: string
+  reference?: string
+  reasonCodes?: string[]
+  auditVerified?: boolean
+  modelVersion?: string
+}
+
+let events: ActivityEvent[] = []
+const subs = new Set<() => void>()
+
+function rid(): string {
+  return typeof crypto !== 'undefined' && 'randomUUID' in crypto
+    ? crypto.randomUUID()
+    : `ev-${Date.now()}-${Math.random().toString(16).slice(2)}`
+}
+
+export function addActivity(e: Omit<ActivityEvent, 'id' | 'ts'> & { ts?: number }): ActivityEvent {
+  const ev: ActivityEvent = { id: rid(), ts: e.ts ?? Date.now(), ...e }
+  events = [ev, ...events].slice(0, 100)
+  subs.forEach((f) => f())
+  return ev
+}
+
+export function listActivity(kind?: ActivityKind): ActivityEvent[] {
+  const all = [...events].sort((a, b) => b.ts - a.ts)
+  return kind ? all.filter((e) => e.kind === kind) : all
+}
+
+export function subscribeActivity(fn: () => void): () => void {
+  subs.add(fn)
+  return () => subs.delete(fn)
+}
+
+/** Test helper — reset the session store. */
+export function _resetActivity(): void {
+  events = []
+  subs.forEach((f) => f())
+}

web/src/api/ai.ts

@@ -0,0 +1,78 @@
+// Typed client for the SAFE /ai/v1 surfaces (PR C2.5).
+// Never accepts or exposes raw features, thresholds, capabilities, signatures, keys or full IBANs.
+// The agentic demo is gated by a frontend flag AND authoritative backend gating.
+import { apiRequest } from './client'
+
+export const AGENTIC_DEMO_ENABLED =
+  (import.meta.env.VITE_AGENTIC_DEMO_ENABLED as string | undefined) !== 'false'
+
+export interface ModelStatus {
+  behavioural_model: string
+  model_version: string
+  feature_version: string
+  reason_codes_version: string
+  shadow_only: boolean
+  affects_payment: boolean
+  label: string
+}
+
+export interface RiskView {
+  band: 'low' | 'uncertain' | 'elevated' | 'high' | 'model_unavailable'
+  recommend_step_up: boolean
+  reason_codes: string[]
+  confidence: string
+  model_version: string
+  feature_version: string
+  shadow: boolean
+}
+
+export interface AuthRecommendation {
+  recommended_method: string
+  meets_pdp_minimum: boolean
+}
+
+export interface AuditSummary {
+  verified: boolean
+  length: number
+  protection_level: string
+}
+
+// Deliberately omits capability/signature/key/approval fields — the UI types cannot carry them.
+export interface OrchestrateResult {
+  decision: 'allow' | 'deny' | 'step_up'
+  reason_codes: string[]
+  required_auth: string[]
+  agent_state: string
+  risk: RiskView | null
+  auth_recommendation: AuthRecommendation | null
+  rails: { ranked: string[]; eligible_only: boolean } | null
+  explanation: { locale: string; messages: string[]; reason_codes: string[] } | null
+  payment: { id: string; status: string } | null
+  audit: AuditSummary | null
+  fallback: string | null
+  labels: Record<string, string>
+}
+
+export interface ScenarioInput {
+  payee_ref: string
+  amount_minor: number
+  known_payees?: string[]
+  history_payments?: number
+  recent_24h?: number
+  consent?: boolean
+  approve?: boolean
+  locale?: string
+  now?: number
+}
+
+export function modelStatus(signal?: AbortSignal): Promise<ModelStatus> {
+  return apiRequest<ModelStatus>('/ai/v1/models/status', { signal })
+}
+
+export function demoPayee(iban: string, signal?: AbortSignal): Promise<{ payee_ref: string; display: string }> {
+  return apiRequest('/ai/v1/demo/payee', { body: { iban }, signal })
+}
+
+export function orchestrate(input: ScenarioInput, signal?: AbortSignal): Promise<OrchestrateResult> {
+  return apiRequest<OrchestrateResult>('/ai/v1/demo/orchestrate', { body: input, signal })
+}

web/src/components/AgentTrace.test.tsx

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { I18nProvider } from '../i18n'
+import { AgentTrace } from './AgentTrace'
+import type { OrchestrateResult } from '../api/ai'
+
+function make(over: Partial<OrchestrateResult>): OrchestrateResult {
+  return {
+    decision: 'step_up', reason_codes: [], required_auth: [], agent_state: 'policy_evaluated',
+    risk: { band: 'low', recommend_step_up: false, reason_codes: [], confidence: 'ok',
+      model_version: 'v1', feature_version: 'v1', shadow: true },
+    auth_recommendation: { recommended_method: 'webauthn', meets_pdp_minimum: true },
+    rails: { ranked: ['sarie'], eligible_only: true }, explanation: null, payment: null,
+    audit: { verified: true, length: 3, protection_level: 'x' }, fallback: null, labels: {},
+    ...over,
+  }
+}
+
+const r = (res: OrchestrateResult) =>
+  render(<I18nProvider initial="en"><AgentTrace result={res} /></I18nProvider>)
+
+describe('AgentTrace', () => {
+  it('marks deterministic policy authoritative and risk advisory', () => {
+    r(make({}))
+    expect(screen.getByText('Deterministic policy')).toBeInTheDocument()
+    expect(screen.getByText('Authoritative')).toBeInTheDocument()
+    expect(screen.getAllByText('Advisory only').length).toBeGreaterThan(0)
+  })
+
+  it('shows Payment Core NOT executed unless initiated', () => {
+    r(make({ agent_state: 'policy_evaluated' }))
+    expect(screen.getAllByText('Not executed').length).toBeGreaterThan(0)
+  })
+
+  it('shows Payment Core executed only when initiated', () => {
+    r(make({ agent_state: 'initiated', payment: { id: 'pay_1', status: 'processing' } }))
+    expect(screen.getByText('pay_1')).toBeInTheDocument()
+    expect(screen.getByText('Executed')).toBeInTheDocument()
+  })
+
+  it('never labels a reasoning agent as a payment executor', () => {
+    const { container } = r(make({}))
+    // the executor row is Payment Core; risk/context/auth/rail carry Advisory, never Executed
+    const advisorySteps = container.querySelectorAll('.role-advisory')
+    expect(advisorySteps.length).toBeGreaterThan(0)
+  })
+})

web/src/components/AgentTrace.tsx

@@ -0,0 +1,64 @@
+import { useI18n } from '../i18n'
+import type { OrchestrateResult } from '../api/ai'
+
+type StepRole = 'advisory' | 'authoritative' | 'user' | 'notExecuted' | 'executed'
+
+interface Step {
+  key: string
+  labelKey:
+    | 'trace.context' | 'trace.risk' | 'trace.policy' | 'trace.auth'
+    | 'trace.rail' | 'trace.userAction' | 'trace.paymentCore'
+  role: StepRole
+  summary: string
+}
+
+function roleBadge(role: StepRole): { key: string; tone: string } {
+  switch (role) {
+    case 'advisory': return { key: 'shadow.advisory', tone: 'tone-info' }
+    case 'authoritative': return { key: 'authoritative.badge', tone: 'tone-ok' }
+    case 'user': return { key: 'trace.userRequired', tone: 'tone-warn' }
+    case 'executed': return { key: 'trace.executed', tone: 'tone-ok' }
+    default: return { key: 'trace.notExecuted', tone: 'tone-bad' }
+  }
+}
+
+/** Safe, read-only sequence view. Never renders capabilities, signatures, keys or envelopes. */
+export function AgentTrace({ result }: { result: OrchestrateResult }) {
+  const { t } = useI18n()
+  const executed = result.agent_state === 'initiated'
+  const steps: Step[] = [
+    { key: 'context', labelKey: 'trace.context', role: 'advisory',
+      summary: result.risk ? '' : t('shadow.noChange') },
+    { key: 'risk', labelKey: 'trace.risk', role: 'advisory',
+      summary: result.risk ? result.risk.band : 'model_unavailable' },
+    { key: 'policy', labelKey: 'trace.policy', role: 'authoritative', summary: result.decision },
+    { key: 'auth', labelKey: 'trace.auth', role: 'advisory',
+      summary: result.auth_recommendation?.recommended_method ?? '' },
+    { key: 'rail', labelKey: 'trace.rail', role: 'advisory',
+      summary: (result.rails?.ranked ?? []).join(', ') },
+    { key: 'user', labelKey: 'trace.userAction', role: 'user',
+      summary: result.decision === 'step_up' ? t('trace.userRequired') : '' },
+    { key: 'core', labelKey: 'trace.paymentCore',
+      role: executed ? 'executed' : 'notExecuted',
+      summary: result.payment?.id ?? t('trace.notExecuted') },
+  ]
+  return (
+    <div className="agent-trace">
+      <h3>{t('trace.title')}</h3>
+      <ol className="trace-list">
+        {steps.map((s) => {
+          const b = roleBadge(s.role)
+          return (
+            <li key={s.key} className={`trace-step role-${s.role}`}>
+              <div className="trace-head">
+                <span className="trace-label">{t(s.labelKey)}</span>
+                <span className={`badge ${b.tone}`}>{t(b.key as never)}</span>
+              </div>
+              {s.summary && <span className="trace-summary">{s.summary}</span>}
+            </li>
+          )
+        })}
+      </ol>
+    </div>
+  )
+}

web/src/components/ShadowBadge.tsx

@@ -0,0 +1,25 @@
+import { useI18n } from '../i18n'
+
+/** Shadow-mode honesty badges — shown wherever a C1/C2 result appears. */
+export function ShadowBadges() {
+  const { t } = useI18n()
+  return (
+    <div className="shadow-badges" role="note">
+      <span className="badge tone-warn">{t('shadow.badge')}</span>
+      <span className="badge tone-info">{t('shadow.advisory')}</span>
+      <span className="badge tone-info">{t('shadow.noChange')}</span>
+      <span className="badge tone-info">{t('shadow.synthetic')}</span>
+    </div>
+  )
+}
+
+/** A single "Authoritative" marker for the deterministic policy result. */
+export function AuthoritativeBadge() {
+  const { t } = useI18n()
+  return <span className="badge tone-ok">{t('authoritative.badge')}</span>
+}
+
+export function ShadowFootnote() {
+  const { t } = useI18n()
+  return <p className="muted small">{t('shadow.notEvidence')}</p>
+}

web/src/i18n/ar.ts

@@ -258,4 +258,141 @@ export const ar: Record<MessageKey, string> = {
   'oob.status.rejected': 'مرفوض.',
   'oob.status.expired': 'منتهي الصلاحية.',
   'oob.alreadyFinalized': 'تم إنهاء هذا التأكيد مسبقًا — يتم عرض نتيجته الحالية.',
+  'nav.home': 'الرئيسية',
+  'nav.security': 'الأمان',
+  'nav.demo': 'تجربة الذكاء',
+  'nav.activity': 'النشاط',
+  'nav.lab': 'مختبر القياسات',
+  'home.title': 'الرئيسية',
+  'home.greeting': 'مرحبًا بك في أمان‌باي',
+  'home.security.protected': 'حسابك محمي',
+  'home.security.setup': 'قم بإعداد مصادقة الجهاز',
+  'home.security.pending': 'هناك تحقق إضافي معلّق',
+  'home.security.unavailable': 'فحص الأمان غير متاح — تبقى الضمانات القياسية فعّالة',
+  'home.security.passkey': 'مفتاح مرور الجهاز',
+  'home.security.oob': 'التأكيد خارج القناة',
+  'home.nextAction': 'الخطوة التالية الموصى بها',
+  'home.quick.title': 'إجراءات سريعة',
+  'home.quick.pay': 'ادفع',
+  'home.quick.activity': 'عرض النشاط',
+  'home.quick.security': 'إعدادات الأمان',
+  'home.quick.confirm': 'تأكيد الطلب المعلّق',
+  'home.recent.title': 'النشاط الأخير',
+  'home.recent.empty': 'لا يوجد نشاط حديث بعد.',
+  'home.demoBadge': 'تجريبي · مزود وهمي · لا مدفوعات حقيقية',
+  'security.title': 'الأمان',
+  'security.device.title': 'مصادقة الجهاز',
+  'security.device.setup': 'إعداد مصادقة الجهاز',
+  'security.device.signin': 'تسجيل الدخول بمفتاح المرور',
+  'security.device.explain': 'تبقى بصمتك أو وجهك أو رقم جهازك على جهازك. يستلم أمان‌باي تأكيدًا آمنًا فقط.',
+  'security.device.registered': 'تم إعداد مصادقة الجهاز على هذا الجهاز.',
+  'security.behaviour.title': 'الحماية السلوكية',
+  'security.behaviour.status': 'تقييم الظل مُفعّل',
+  'security.behaviour.noEffect': 'هذا النموذج التجريبي لا يوافق على المدفوعات أو يرفضها أو يعدّلها.',
+  'security.oob.title': 'التأكيد خارج القناة',
+  'security.oob.explain': 'قد تتطلب المدفوعات عالية الخطورة تأكيدًا منفصلًا عبر قناتك المفضلة.',
+  'security.activity.title': 'نشاط الأمان',
+  'shadow.badge': 'وضع الظل',
+  'shadow.advisory': 'استشاري فقط',
+  'shadow.noChange': 'لا يغيّر تفويض الدفع',
+  'shadow.synthetic': 'نموذج ببيانات اصطناعية',
+  'shadow.notEvidence': 'ليس دليلًا على أداء كشف الاحتيال الواقعي',
+  'authoritative.badge': 'مرجعي',
+  'bio.confirmDevice': 'التأكيد بالقياسات الحيوية للجهاز',
+  'lab.title': 'مختبر القياسات الحيوية',
+  'lab.subtitle': 'تجارب بحثية — ليست جزءًا من مسار الدفع العادي.',
+  'lab.fingerprint.title': 'تجربة صورة البصمة',
+  'lab.fingerprint.disclaimer': 'تقبل هذه التجربة البحثية صورة بصمة ضوئية مرفوعة أو عينة تجريبية. لا يمكن لأي موقع إلكتروني قراءة البصمة المخزّنة في مستشعر هاتفك أو حاسوبك.',
+  'agentic.title': 'تجربة الأمان الوكيلي',
+  'agentic.subtitle': 'يشغّل مسار الوكلاء الآمن على بيانات اصطناعية. السياسة الحتمية هي المرجع؛ نموذج الذكاء استشاري وفي وضع الظل.',
+  'agentic.disabled': 'تجربة الوكلاء معطّلة في هذه البيئة.',
+  'agentic.scenario.title': 'اختر سيناريو',
+  'agentic.scenario.normal': 'دفعة عادية',
+  'agentic.scenario.newPayee': 'مستفيد جديد',
+  'agentic.scenario.unusualAmount': 'مبلغ غير معتاد',
+  'agentic.scenario.highVelocity': 'وتيرة مرتفعة',
+  'agentic.scenario.providerUnavailable': 'المزود غير متاح',
+  'agentic.scenario.insufficientHistory': 'سجل غير كافٍ',
+  'agentic.run': 'شغّل التنسيق الآمن',
+  'agentic.running': 'جارٍ التشغيل…',
+  'agentic.result.title': 'النتيجة',
+  'agentic.result.policy': 'قرار السياسة الحتمية',
+  'agentic.result.band': 'نطاق خطورة الظل',
+  'agentic.result.reasons': 'الأسباب',
+  'agentic.result.auth': 'توصية المصادقة',
+  'agentic.result.rails': 'مسارات الدفع المؤهلة',
+  'agentic.result.explanation': 'التفسير',
+  'agentic.result.audit': 'سلسلة التدقيق',
+  'agentic.result.auditVerified': 'مُتحقّق',
+  'agentic.result.auditFailed': 'غير ��ُتحقّق',
+  'agentic.dev.show': 'عرض تفاصيل المطوّر',
+  'agentic.dev.hide': 'إخفاء تفاصيل المطوّر',
+  'agentic.dev.label': 'تجربة المطوّر — محاكاة ووضع ظل فقط',
+  'trace.title': 'تسلسل الوكلاء',
+  'trace.context': 'سياق المعاملة',
+  'trace.risk': 'خطورة الظل',
+  'trace.policy': 'السياسة الحتمية',
+  'trace.auth': 'توصية المصادقة',
+  'trace.rail': 'ترتيب المسارات',
+  'trace.userAction': 'تأكيد المستخدم',
+  'trace.paymentCore': 'نواة الدفع',
+  'trace.userRequired': 'مطلوب إجراء المستخدم',
+  'trace.notExecuted': 'لم يُنفَّذ',
+  'trace.executed': 'نُفِّذ',
+  'pay.verifyRequired': 'مطلوب تحقق إضافي.',
+  'pay.deviceConfirm': 'سيؤكد جهازك هويتك دون مشاركة بصمتك.',
+  'common.on': 'مفعّل',
+  'common.off': 'معطّل',
+  'common.notSet': 'غير مُعد',
+  'common.loading': 'جارٍ التحميل…',
+  'common.error': 'حدث خطأ ما.',
+  'common.back': 'رجوع',
+  'pay.stepOf': 'خطوة {n} من {total}',
+  'pay.next': 'التالي',
+  'pay.back': 'رجوع',
+  'pay.edit': 'تعديل',
+  'pay.confirm': 'تأكيد',
+  'pay.stage.payee': 'المستفيد',
+  'pay.stage.amount': 'المبلغ',
+  'pay.stage.rail': 'مسار الدفع',
+  'pay.stage.review': 'المراجعة',
+  'pay.stage.auth': 'المصادقة',
+  'pay.stage.processing': 'المعالجة',
+  'pay.stage.receipt': 'الإيصال',
+  'pay.newPayeeNote': 'هذا مستفيد جديد.',
+  'pay.destination': 'الوجهة',
+  'pay.rail.title': 'اختر مسار دفع مؤهلًا',
+  'pay.rail.available': 'متاح',
+  'pay.rail.unavailable': 'غير متاح',
+  'pay.rail.feeUnavailable': 'معلومات الرسوم غير متوفرة',
+  'pay.rail.speed': 'السرعة المتوقعة',
+  'pay.rail.instant': 'شبه فوري',
+  'pay.rail.none': 'لا يوجد مسار مؤهل متاح لهذه الدفعة.',
+  'pay.review.fee': 'الرسوم',
+  'pay.review.rail': 'المسار',
+  'pay.review.reference': 'المرجع',
+  'pay.review.authReq': 'المصادقة المطلوبة',
+  'pay.review.reason': 'السبب',
+  'pay.review.editNote': 'يتطلب تغيير أي حقل مراجعة جديدة.',
+  'pay.authTitle': 'أكّد هذه الدفعة',
+  'pay.processingTitle': 'جارٍ معالجة دفعتك',
+  'pay.receiptTitle': 'إيصال الدفع',
+  'pay.dateTime': 'التاريخ والوقت',
+  'pay.viewActivity': 'عرض في النشاط',
+  'pay.status.label': 'الحالة',
+  'activity.title': 'النشاط',
+  'activity.sessionOnly': 'النشاط من هذه الجلسة فقط',
+  'activity.sessionNote': 'هذه القائمة ليست سجلًا دائمًا للحساب.',
+  'activity.empty': 'لا يوجد نشاط في هذه الجلسة بعد.',
+  'activity.tab.all': 'الكل',
+  'activity.tab.payments': 'المدفوعات',
+  'activity.tab.confirmations': 'التأكيدات',
+  'activity.tab.biometrics': 'مختبر القياسات',
+  'activity.tab.security': 'تجارب الأمان',
+  'activity.kind.payment': 'دفعة',
+  'activity.kind.confirmation': 'تأكيد',
+  'activity.kind.biometrics': 'تجربة قياسات',
+  'activity.kind.securityDemo': 'تجربة أمان',
+  'nav.more': 'المزيد',
+  'date.unavailable': 'التاريخ غير متوفر',
 }

web/src/i18n/en.ts

@@ -256,6 +256,143 @@ export const en = {
   'oob.status.rejected': 'Rejected.',
   'oob.status.expired': 'Expired.',
   'oob.alreadyFinalized': 'This confirmation was already finalized — showing its current result.',
+  'nav.home': 'Home',
+  'nav.security': 'Security',
+  'nav.demo': 'AI demo',
+  'nav.activity': 'Activity',
+  'nav.lab': 'Biometrics lab',
+  'home.title': 'Home',
+  'home.greeting': 'Welcome to AmanPay',
+  'home.security.protected': 'Your account is protected',
+  'home.security.setup': 'Set up device authentication',
+  'home.security.pending': 'Additional verification is pending',
+  'home.security.unavailable': 'Security check unavailable — standard safeguards remain active',
+  'home.security.passkey': 'Device passkey',
+  'home.security.oob': 'Out-of-band confirmation',
+  'home.nextAction': 'Recommended next step',
+  'home.quick.title': 'Quick actions',
+  'home.quick.pay': 'Pay',
+  'home.quick.activity': 'View activity',
+  'home.quick.security': 'Security settings',
+  'home.quick.confirm': 'Confirm pending request',
+  'home.recent.title': 'Recent activity',
+  'home.recent.empty': 'No recent activity yet.',
+  'home.demoBadge': 'Demo · Mock provider · No real-money payment',
+  'security.title': 'Security',
+  'security.device.title': 'Device authentication',
+  'security.device.setup': 'Set up device authentication',
+  'security.device.signin': 'Sign in with passkey',
+  'security.device.explain': 'Your fingerprint, face or device PIN stays on your device. AmanPay receives only a secure confirmation.',
+  'security.device.registered': 'Device authentication is set up on this device.',
+  'security.behaviour.title': 'Behavioural protection',
+  'security.behaviour.status': 'Shadow evaluation active',
+  'security.behaviour.noEffect': 'This experimental model does not approve, deny or modify payments.',
+  'security.oob.title': 'Out-of-band confirmation',
+  'security.oob.explain': 'High-risk payments can require a separate confirmation on your preferred channel.',
+  'security.activity.title': 'Security activity',
+  'shadow.badge': 'Shadow mode',
+  'shadow.advisory': 'Advisory only',
+  'shadow.noChange': 'Does not change payment authorization',
+  'shadow.synthetic': 'Synthetic-data prototype',
+  'shadow.notEvidence': 'Not evidence of real-world fraud-detection performance',
+  'authoritative.badge': 'Authoritative',
+  'bio.confirmDevice': 'Confirm with device biometrics',
+  'lab.title': 'Biometrics lab',
+  'lab.subtitle': 'Research demos — not part of the normal payment flow.',
+  'lab.fingerprint.title': 'Fingerprint image demo',
+  'lab.fingerprint.disclaimer': 'This research demo accepts an uploaded optical fingerprint image or a demo sample. A website cannot retrieve the fingerprint stored in your phone or computer sensor.',
+  'agentic.title': 'Agentic security demo',
+  'agentic.subtitle': 'Runs the secured agent workflow on synthetic data. Deterministic policy is authoritative; the AI model is advisory and in shadow mode.',
+  'agentic.disabled': 'The agentic demo is disabled in this environment.',
+  'agentic.scenario.title': 'Choose a scenario',
+  'agentic.scenario.normal': 'Normal payment',
+  'agentic.scenario.newPayee': 'New payee',
+  'agentic.scenario.unusualAmount': 'Unusual amount',
+  'agentic.scenario.highVelocity': 'High velocity',
+  'agentic.scenario.providerUnavailable': 'Provider unavailable',
+  'agentic.scenario.insufficientHistory': 'Insufficient history',
+  'agentic.run': 'Run secure orchestration',
+  'agentic.running': 'Running…',
+  'agentic.result.title': 'Result',
+  'agentic.result.policy': 'Deterministic policy decision',
+  'agentic.result.band': 'Shadow risk band',
+  'agentic.result.reasons': 'Reasons',
+  'agentic.result.auth': 'Authentication recommendation',
+  'agentic.result.rails': 'Eligible payment rails',
+  'agentic.result.explanation': 'Explanation',
+  'agentic.result.audit': 'Audit chain',
+  'agentic.result.auditVerified': 'Verified',
+  'agentic.result.auditFailed': 'Not verified',
+  'agentic.dev.show': 'Show developer details',
+  'agentic.dev.hide': 'Hide developer details',
+  'agentic.dev.label': 'Developer demo — simulated and shadow-only',
+  'trace.title': 'Agent sequence',
+  'trace.context': 'Transaction context',
+  'trace.risk': 'Shadow risk',
+  'trace.policy': 'Deterministic policy',
+  'trace.auth': 'Authentication recommendation',
+  'trace.rail': 'Rail ranking',
+  'trace.userAction': 'User confirmation',
+  'trace.paymentCore': 'Payment Core',
+  'trace.userRequired': 'User action required',
+  'trace.notExecuted': 'Not executed',
+  'trace.executed': 'Executed',
+  'pay.verifyRequired': 'Additional verification is required.',
+  'pay.deviceConfirm': 'Your device will confirm your identity without sharing your fingerprint.',
+  'common.on': 'On',
+  'common.off': 'Off',
+  'common.notSet': 'Not set up',
+  'common.loading': 'Loading…',
+  'common.error': 'Something went wrong.',
+  'common.back': 'Back',
+  'pay.stepOf': 'Step {n} of {total}',
+  'pay.next': 'Next',
+  'pay.back': 'Back',
+  'pay.edit': 'Edit',
+  'pay.confirm': 'Confirm',
+  'pay.stage.payee': 'Payee',
+  'pay.stage.amount': 'Amount',
+  'pay.stage.rail': 'Payment rail',
+  'pay.stage.review': 'Review',
+  'pay.stage.auth': 'Authentication',
+  'pay.stage.processing': 'Processing',
+  'pay.stage.receipt': 'Receipt',
+  'pay.newPayeeNote': 'This is a new payee.',
+  'pay.destination': 'Destination',
+  'pay.rail.title': 'Choose an eligible payment rail',
+  'pay.rail.available': 'Available',
+  'pay.rail.unavailable': 'Unavailable',
+  'pay.rail.feeUnavailable': 'Fee information unavailable',
+  'pay.rail.speed': 'Expected speed',
+  'pay.rail.instant': 'Near-instant',
+  'pay.rail.none': 'No eligible rail is available for this payment.',
+  'pay.review.fee': 'Fee',
+  'pay.review.rail': 'Rail',
+  'pay.review.reference': 'Reference',
+  'pay.review.authReq': 'Required authentication',
+  'pay.review.reason': 'Why',
+  'pay.review.editNote': 'Changing any field requires a new review.',
+  'pay.authTitle': 'Confirm this payment',
+  'pay.processingTitle': 'Processing your payment',
+  'pay.receiptTitle': 'Payment receipt',
+  'pay.dateTime': 'Date & time',
+  'pay.viewActivity': 'View in activity',
+  'pay.status.label': 'Status',
+  'activity.title': 'Activity',
+  'activity.sessionOnly': 'Activity from this session',
+  'activity.sessionNote': 'This list is not permanent account history.',
+  'activity.empty': 'No activity in this session yet.',
+  'activity.tab.all': 'All',
+  'activity.tab.payments': 'Payments',
+  'activity.tab.confirmations': 'Confirmations',
+  'activity.tab.biometrics': 'Biometrics lab',
+  'activity.tab.security': 'Security demos',
+  'activity.kind.payment': 'Payment',
+  'activity.kind.confirmation': 'Confirmation',
+  'activity.kind.biometrics': 'Biometrics demo',
+  'activity.kind.securityDemo': 'Security demo',
+  'nav.more': 'More',
+  'date.unavailable': 'Date unavailable',
 } as const
 
 export type MessageKey = keyof typeof en

web/src/pages/ActivityPage.test.tsx

@@ -0,0 +1,39 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { I18nProvider } from '../i18n'
+import { ActivityPage } from './ActivityPage'
+import { _resetActivity, addActivity } from '../activity/store'
+
+const renderAct = (locale: 'en' | 'ar' = 'en') =>
+  render(<I18nProvider initial={locale}><ActivityPage /></I18nProvider>)
+
+describe('ActivityPage', () => {
+  beforeEach(() => _resetActivity())
+
+  it('labels the list as session-only (honest, not permanent history)', () => {
+    renderAct()
+    expect(screen.getByText('Activity from this session')).toBeInTheDocument()
+    expect(screen.getByText(/not permanent account history/i)).toBeInTheDocument()
+  })
+
+  it('shows an empty state when there is no session activity', () => {
+    renderAct()
+    expect(screen.getByTestId('activity-empty')).toBeInTheDocument()
+  })
+
+  it('lists a recorded event and filters by tab', () => {
+    addActivity({ kind: 'payment', title: 'Blue Bottle', status: 'succeeded', amount: '150.50 SAR' })
+    addActivity({ kind: 'security-demo', title: 'New payee', status: 'deny', reasonCodes: ['NEW_PAYEE'] })
+    renderAct()
+    expect(screen.getAllByTestId('activity-item').length).toBe(2)
+    fireEvent.click(screen.getByRole('tab', { name: 'Payments' }))
+    expect(screen.getAllByTestId('activity-item').length).toBe(1)
+    expect(screen.getByText('Blue Bottle')).toBeInTheDocument()
+  })
+
+  it('never renders full IBANs or capability text', () => {
+    addActivity({ kind: 'payment', title: 'Blue Bottle', status: 'succeeded', reference: 'p1' })
+    const { container } = renderAct()
+    expect(container.textContent).not.toMatch(/SA\d{22}|CapabilityGrant|signature/i)
+  })
+})

web/src/pages/ActivityPage.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react'
+import { useI18n } from '../i18n'
+import { Callout } from '../components/ui'
+import { listActivity, subscribeActivity, type ActivityEvent, type ActivityKind } from '../activity/store'
+import { formatDateTime } from '../utils/format'
+
+const TABS: { key: string; kind?: ActivityKind; label: string }[] = [
+  { key: 'all', label: 'activity.tab.all' },
+  { key: 'payments', kind: 'payment', label: 'activity.tab.payments' },
+  { key: 'confirmations', kind: 'confirmation', label: 'activity.tab.confirmations' },
+  { key: 'biometrics', kind: 'biometrics', label: 'activity.tab.biometrics' },
+  { key: 'security', kind: 'security-demo', label: 'activity.tab.security' },
+]
+
+const KIND_LABEL: Record<ActivityKind, string> = {
+  payment: 'activity.kind.payment', confirmation: 'activity.kind.confirmation',
+  biometrics: 'activity.kind.biometrics', 'security-demo': 'activity.kind.securityDemo',
+}
+
+/** Session-only activity. Explicitly labelled as NOT permanent account history. Never renders
+ * raw biometrics, full IBANs, capabilities, signatures or thresholds. */
+export function ActivityPage() {
+  const { t, locale } = useI18n()
+  const [tab, setTab] = useState('all')
+  const [, force] = useState(0)
+
+  useEffect(() => subscribeActivity(() => force((n) => n + 1)), [])
+
+  const kind = TABS.find((x) => x.key === tab)?.kind
+  const events: ActivityEvent[] = listActivity(kind)
+
+  return (
+    <section className="page activity" aria-labelledby="act-h">
+      <div className="row-between">
+        <h2 id="act-h">{t('activity.title')}</h2>
+        <span className="badge tone-info">{t('activity.sessionOnly')}</span>
+      </div>
+      <p className="muted small">{t('activity.sessionNote')}</p>
+
+      <div className="tabs" role="tablist" aria-label={t('activity.title')}>
+        {TABS.map((x) => (
+          <button key={x.key} role="tab" aria-selected={tab === x.key}
+            className={`tab ${tab === x.key ? 'active' : ''}`} onClick={() => setTab(x.key)}>
+            {t(x.label as never)}
+          </button>
+        ))}
+      </div>
+
+      {events.length === 0 ? (
+        <Callout tone="info"><span data-testid="activity-empty">{t('activity.empty')}</span></Callout>
+      ) : (
+        <ul className="activity-list">
+          {events.map((e) => (
+            <li key={e.id} className="activity-item" data-testid="activity-item">
+              <div className="row-between">
+                <span className="badge tone-info">{t(KIND_LABEL[e.kind] as never)}</span>
+                <span className="muted small">{formatDateTime(e.ts / 1000, locale)}</span>
+              </div>
+              <div className="row-between">
+                <strong>{e.title}</strong>
+                <span className="badge tone-info">{e.status}</span>
+              </div>
+              {e.amount && <div className="muted small">{e.amount}</div>}
+              {e.reference && <div className="muted small mono">{e.reference}</div>}
+              {e.reasonCodes && e.reasonCodes.length > 0 && (
+                <div className="muted small">{e.reasonCodes.join(', ')}</div>
+              )}
+              {typeof e.auditVerified === 'boolean' && (
+                <span className={`badge ${e.auditVerified ? 'tone-ok' : 'tone-bad'}`}>
+                  {e.auditVerified ? t('agentic.result.auditVerified') : t('agentic.result.auditFailed')}
+                </span>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}

web/src/pages/AgenticDemoPage.disabled.test.tsx

@@ -0,0 +1,21 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { I18nProvider } from '../i18n'
+
+vi.mock('../api/ai', () => ({
+  AGENTIC_DEMO_ENABLED: false,
+  modelStatus: vi.fn(),
+  demoPayee: vi.fn(),
+  orchestrate: vi.fn(),
+}))
+import { AgenticDemoPage } from './AgenticDemoPage'
+import * as ai from '../api/ai'
+
+describe('AgenticDemoPage (feature flag disabled)', () => {
+  it('shows the disabled notice and calls no backend', () => {
+    render(<I18nProvider initial="en"><AgenticDemoPage /></I18nProvider>)
+    expect(screen.getByText(/agentic demo is disabled/i)).toBeInTheDocument()
+    expect(ai.demoPayee).not.toHaveBeenCalled()
+    expect(ai.orchestrate).not.toHaveBeenCalled()
+  })
+})

web/src/pages/AgenticDemoPage.test.tsx

@@ -0,0 +1,85 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { I18nProvider } from '../i18n'
+import { AgenticDemoPage } from './AgenticDemoPage'
+import type { OrchestrateResult } from '../api/ai'
+
+vi.mock('../api/ai', () => ({
+  AGENTIC_DEMO_ENABLED: true,
+  modelStatus: vi.fn(),
+  demoPayee: vi.fn(),
+  orchestrate: vi.fn(),
+}))
+import * as ai from '../api/ai'
+
+const RESULT: OrchestrateResult = {
+  decision: 'step_up', reason_codes: ['NEW_PAYEE'], required_auth: ['webauthn', 'oob'],
+  agent_state: 'policy_evaluated',
+  risk: { band: 'elevated', recommend_step_up: true, reason_codes: ['NEW_PAYEE'],
+    confidence: 'ok', model_version: 'v1', feature_version: 'features-v1', shadow: true },
+  auth_recommendation: { recommended_method: 'webauthn+oob', meets_pdp_minimum: true },
+  rails: { ranked: ['sarie'], eligible_only: true },
+  explanation: { locale: 'en', messages: ['This payment is to a payee you have not paid before.'],
+    reason_codes: ['NEW_PAYEE'] },
+  payment: null,
+  audit: { verified: true, length: 5, protection_level: 'signed-checkpoint (demo, in-memory)' },
+  fallback: null, labels: { note: 'DEMO ONLY · Mock provider · No real money' },
+}
+
+const renderPage = (locale: 'en' | 'ar' = 'en') =>
+  render(<I18nProvider initial={locale}><AgenticDemoPage /></I18nProvider>)
+
+describe('AgenticDemoPage (enabled)', () => {
+  beforeEach(() => {
+    vi.mocked(ai.modelStatus).mockResolvedValue({
+      behavioural_model: 'logreg', model_version: 'v1', feature_version: 'features-v1',
+      reason_codes_version: 'reason_codes-v1', shadow_only: true, affects_payment: false, label: 'DEMO',
+    })
+    vi.mocked(ai.demoPayee).mockResolvedValue({ payee_ref: 'payee_x', display: 'SA03 **** 7519' })
+    vi.mocked(ai.orchestrate).mockResolvedValue(RESULT)
+  })
+
+  it('shows shadow-mode disclosures up front', () => {
+    renderPage()
+    expect(screen.getByText('Shadow mode')).toBeInTheDocument()
+    expect(screen.getByText('Advisory only')).toBeInTheDocument()
+  })
+
+  it('runs a scenario and shows the authoritative decision + advisory risk band', async () => {
+    renderPage()
+    await waitFor(() => expect(ai.demoPayee).toHaveBeenCalled())
+    fireEvent.click(await screen.findByTestId('scenario-newPayee'))
+    await waitFor(() => expect(ai.orchestrate).toHaveBeenCalled())
+    expect(await screen.findByTestId('policy-decision')).toHaveTextContent('step_up')
+    expect(screen.getByTestId('risk-band')).toHaveTextContent('elevated')
+    expect(screen.getAllByText('Authoritative').length).toBeGreaterThan(0)
+    expect(screen.getByText(/have not paid before/i)).toBeInTheDocument()
+  })
+
+  it('renders the agent trace with Payment Core not executed on step-up', async () => {
+    renderPage()
+    fireEvent.click(await screen.findByTestId('scenario-newPayee'))
+    await screen.findByTestId('agentic-result')
+    expect(screen.getByText('Agent sequence')).toBeInTheDocument()
+    expect(screen.getByText('Payment Core')).toBeInTheDocument()
+    expect(screen.getAllByText('Not executed').length).toBeGreaterThan(0)
+  })
+
+  it('never renders capabilities, signatures, keys or full IBANs', async () => {
+    const { container } = renderPage()
+    fireEvent.click(await screen.findByTestId('scenario-newPayee'))
+    await screen.findByTestId('agentic-result')
+    const txt = container.textContent || ''
+    expect(txt).not.toMatch(/CapabilityGrant|ExecutionCapability|signature|private key|BEGIN /i)
+    expect(txt).not.toMatch(/608010167519/)   // full IBAN body never shown
+  })
+
+  it('hides the developer panel by default', async () => {
+    renderPage()
+    fireEvent.click(await screen.findByTestId('scenario-newPayee'))
+    await screen.findByTestId('agentic-result')
+    const details = document.querySelector('details.dev-panel') as HTMLDetailsElement
+    expect(details).toBeTruthy()
+    expect(details.open).toBe(false)
+  })
+})

web/src/pages/AgenticDemoPage.tsx

@@ -0,0 +1,166 @@
+import { useEffect, useRef, useState } from 'react'
+import { useI18n } from '../i18n'
+import { Callout, Spinner } from '../components/ui'
+import { ShadowBadges, AuthoritativeBadge, ShadowFootnote } from '../components/ShadowBadge'
+import { AgentTrace } from '../components/AgentTrace'
+import { addActivity } from '../activity/store'
+import {
+  AGENTIC_DEMO_ENABLED, demoPayee, modelStatus, orchestrate,
+  type ModelStatus, type OrchestrateResult, type ScenarioInput,
+} from '../api/ai'
+
+const DEMO_IBAN = 'SA0380000000608010167519'
+
+type ScenarioKey =
+  | 'normal' | 'newPayee' | 'unusualAmount' | 'highVelocity'
+  | 'providerUnavailable' | 'insufficientHistory'
+
+// Predefined, safe synthetic scenarios — no arbitrary raw feature input, no arbitrary provider.
+function scenarioInput(k: ScenarioKey, payee_ref: string, locale: string): ScenarioInput {
+  const base: ScenarioInput = {
+    payee_ref, amount_minor: 4000, known_payees: [payee_ref], history_payments: 25,
+    recent_24h: 1, approve: true, consent: true, locale, now: 43200,
+  }
+  switch (k) {
+    case 'newPayee': return { ...base, known_payees: [] }
+    case 'unusualAmount': return { ...base, amount_minor: 80000 }
+    case 'highVelocity': return { ...base, recent_24h: 6 }
+    case 'providerUnavailable': return { ...base, country: 'AE', currency: 'AED' } as ScenarioInput
+    case 'insufficientHistory': return { ...base, history_payments: 0, known_payees: [] }
+    default: return base
+  }
+}
+
+const SCENARIOS: ScenarioKey[] = [
+  'normal', 'newPayee', 'unusualAmount', 'highVelocity', 'providerUnavailable', 'insufficientHistory',
+]
+
+function decisionTone(d: string): 'ok' | 'bad' | 'warn' {
+  return d === 'allow' ? 'ok' : d === 'deny' ? 'bad' : 'warn'
+}
+
+export function AgenticDemoPage() {
+  const { t, locale } = useI18n()
+  const [status, setStatus] = useState<ModelStatus | null>(null)
+  const [payeeRef, setPayeeRef] = useState<string | null>(null)
+  const [result, setResult] = useState<OrchestrateResult | null>(null)
+  const [running, setRunning] = useState(false)
+  const [err, setErr] = useState<string | null>(null)
+  const [showDev, setShowDev] = useState(false)
+  const ac = useRef<AbortController | null>(null)
+
+  useEffect(() => {
+    if (!AGENTIC_DEMO_ENABLED) return
+    const c = new AbortController()
+    Promise.all([modelStatus(c.signal), demoPayee(DEMO_IBAN, c.signal)])
+      .then(([s, p]) => { setStatus(s); setPayeeRef(p.payee_ref) })
+      .catch(() => setErr(t('common.error')))
+    return () => c.abort()
+  }, [t])
+
+  async function run(k: ScenarioKey) {
+    if (!payeeRef) return
+    ac.current?.abort()
+    ac.current = new AbortController()
+    setRunning(true); setErr(null); setResult(null)
+    try {
+      const r = await orchestrate(scenarioInput(k, payeeRef, locale), ac.current.signal)
+      setResult(r)
+      addActivity({ kind: 'security-demo', title: t(`agentic.scenario.${k}` as never),
+        status: r.decision, reasonCodes: r.reason_codes,
+        auditVerified: r.audit?.verified, modelVersion: r.risk?.model_version })
+    } catch {
+      setErr(t('common.error'))
+    } finally {
+      setRunning(false)
+    }
+  }
+
+  if (!AGENTIC_DEMO_ENABLED) {
+    return (
+      <section className="page agentic" aria-labelledby="ag-h">
+        <h2 id="ag-h">{t('agentic.title')}</h2>
+        <Callout tone="info">{t('agentic.disabled')}</Callout>
+      </section>
+    )
+  }
+
+  return (
+    <section className="page agentic" aria-labelledby="ag-h">
+      <h2 id="ag-h">{t('agentic.title')}</h2>
+      <p className="muted">{t('agentic.subtitle')}</p>
+      <ShadowBadges />
+
+      <div className="card">
+        <h3>{t('agentic.scenario.title')}</h3>
+        <div className="quick-actions" role="group" aria-label={t('agentic.scenario.title')}>
+          {SCENARIOS.map((k) => (
+            <button key={k} className="btn" data-testid={`scenario-${k}`}
+              disabled={running || !payeeRef} onClick={() => run(k)}>
+              {t(`agentic.scenario.${k}` as never)}
+            </button>
+          ))}
+        </div>
+        {running && <Spinner label={t('agentic.running')} />}
+        {err && <Callout tone="bad">{err}</Callout>}
+      </div>
+
+      {result && (
+        <div className="card" data-testid="agentic-result">
+          <div className="row-between">
+            <h3>{t('agentic.result.policy')} <AuthoritativeBadge /></h3>
+            <span className={`badge tone-${decisionTone(result.decision)}`} data-testid="policy-decision">
+              {result.decision}
+            </span>
+          </div>
+
+          <div className="result-grid">
+            <div>
+              <span className="muted small">{t('agentic.result.band')}</span>
+              <div><span className="badge tone-info" data-testid="risk-band">
+                {result.risk?.band ?? 'model_unavailable'}</span></div>
+            </div>
+            <div>
+              <span className="muted small">{t('agentic.result.auth')}</span>
+              <div className="mono">{result.auth_recommendation?.recommended_method ?? '—'}</div>
+            </div>
+            <div>
+              <span className="muted small">{t('agentic.result.rails')}</span>
+              <div className="mono">{(result.rails?.ranked ?? []).join(', ') || '—'}</div>
+            </div>
+            <div>
+              <span className="muted small">{t('agentic.result.audit')}</span>
+              <div><span className={`badge ${result.audit?.verified ? 'tone-ok' : 'tone-bad'}`}>
+                {result.audit?.verified ? t('agentic.result.auditVerified') : t('agentic.result.auditFailed')}
+              </span></div>
+            </div>
+          </div>
+
+          {result.explanation && result.explanation.messages.length > 0 && (
+            <div className="explanation">
+              <span className="muted small">{t('agentic.result.explanation')}</span>
+              <ul>{result.explanation.messages.map((m, i) => <li key={i}>{m}</li>)}</ul>
+            </div>
+          )}
+
+          <AgentTrace result={result} />
+          <ShadowFootnote />
+
+          <details className="dev-panel" open={showDev} onToggle={(e) => setShowDev((e.target as HTMLDetailsElement).open)}>
+            <summary>{showDev ? t('agentic.dev.hide') : t('agentic.dev.show')}</summary>
+            <p className="badge tone-warn">{t('agentic.dev.label')}</p>
+            <ul className="status-list">
+              <li><span>mode</span><span className="mono">shadow</span></li>
+              <li><span>provider</span><span className="mono">mock</span></li>
+              <li><span>model</span><span className="mono">{status?.model_version ?? '—'}</span></li>
+              <li><span>features</span><span className="mono">{status?.feature_version ?? '—'}</span></li>
+              <li><span>reason_codes</span><span className="mono">{(result.reason_codes || []).join(', ')}</span></li>
+              <li><span>fallback</span><span className="mono">{result.fallback ?? 'none'}</span></li>
+              <li><span>audit_len</span><span className="mono">{result.audit?.length ?? 0}</span></li>
+            </ul>
+          </details>
+        </div>
+      )}
+    </section>
+  )
+}

web/src/pages/BiometricsLabPage.test.tsx

@@ -0,0 +1,22 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { I18nProvider } from '../i18n'
+import { BiometricsLabPage } from './BiometricsLabPage'
+
+const renderLab = (locale: 'en' | 'ar' = 'en') =>
+  render(<I18nProvider initial={locale}><BiometricsLabPage onNav={vi.fn()} /></I18nProvider>)
+
+describe('BiometricsLabPage', () => {
+  it('shows the fingerprint-image demo with the sensor disclaimer', () => {
+    renderLab()
+    expect(screen.getByTestId('fingerprint-demo')).toBeInTheDocument()
+    expect(
+      screen.getByText(/A website cannot retrieve the fingerprint stored in your phone or computer sensor/i),
+    ).toBeInTheDocument()
+  })
+
+  it('provides the disclaimer in Arabic too', () => {
+    renderLab('ar')
+    expect(screen.getByText(/لا يمكن لأي موقع إلكتروني قراءة البصمة/)).toBeInTheDocument()
+  })
+})

web/src/pages/BiometricsLabPage.tsx

@@ -0,0 +1,29 @@
+import { useI18n } from '../i18n'
+import { Callout } from '../components/ui'
+
+/** Research/lab landing. The fingerprint-IMAGE demo lives ONLY here — never in the normal
+ * customer flow — with a prominent disclaimer that a website cannot read a phone's sensor. */
+export function BiometricsLabPage({ onNav }: { onNav: (r: string) => void }) {
+  const { t } = useI18n()
+  return (
+    <section className="page lab" aria-labelledby="lab-h">
+      <h2 id="lab-h">{t('lab.title')}</h2>
+      <p className="muted">{t('lab.subtitle')}</p>
+
+      <div className="card" data-testid="fingerprint-demo">
+        <h3>{t('lab.fingerprint.title')}</h3>
+        <Callout tone="warn">{t('lab.fingerprint.disclaimer')}</Callout>
+        <div className="quick-actions">
+          <button className="btn" onClick={() => onNav('biometrics/enroll')}>{t('bio.dash.enroll') as never}</button>
+          <button className="btn" onClick={() => onNav('biometrics/verify')}>{t('bio.dash.verify') as never}</button>
+          <button className="btn" onClick={() => onNav('biometrics/liveness')}>{t('bio.dash.liveness') as never}</button>
+          <button className="btn" onClick={() => onNav('biometrics/reportcard')}>{t('bio.dash.reportcard') as never}</button>
+        </div>
+      </div>
+
+      <p className="muted small">
+        {t('bio.confirmDevice')} — {t('security.device.explain')}
+      </p>
+    </section>
+  )
+}

web/src/pages/HomePage.test.tsx

@@ -0,0 +1,38 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { I18nProvider } from '../i18n'
+import { HomePage } from './HomePage'
+
+const renderHome = (onNav = vi.fn()) =>
+  render(<I18nProvider initial="en"><HomePage onNav={onNav} /></I18nProvider>)
+
+describe('HomePage', () => {
+  it('shows greeting, security status and demo badge', () => {
+    renderHome()
+    expect(screen.getByRole('heading', { name: 'Welcome to AmanPay' })).toBeInTheDocument()
+    expect(screen.getByTestId('security-status')).toBeInTheDocument()
+    expect(screen.getByTestId('demo-badge')).toHaveTextContent(/No real-money payment/i)
+  })
+
+  it('has quick actions and navigates', () => {
+    const onNav = vi.fn()
+    renderHome(onNav)
+    fireEvent.click(screen.getByRole('button', { name: 'Pay' }))
+    expect(onNav).toHaveBeenCalledWith('pay')
+    fireEvent.click(screen.getByRole('button', { name: 'Security settings' }))
+    expect(onNav).toHaveBeenCalledWith('security')
+  })
+
+  it('does NOT offer any fingerprint upload in the customer home', () => {
+    const { container } = renderHome()
+    expect(container.querySelector('input[type="file"]')).toBeNull()
+    expect(screen.queryByText(/upload fingerprint/i)).toBeNull()
+    expect(screen.queryByText(/scan fingerprint/i)).toBeNull()
+  })
+
+  it('shows empty recent-activity state (no invented balance)', () => {
+    renderHome()
+    expect(screen.getByTestId('recent-empty')).toBeInTheDocument()
+    expect(screen.queryByText(/balance/i)).toBeNull()
+  })
+})

web/src/pages/HomePage.tsx

@@ -0,0 +1,58 @@
+import { useI18n } from '../i18n'
+import { useSession } from '../hooks/useSession'
+import { Callout } from '../components/ui'
+
+/** Customer-facing home dashboard (default route). Shows security status, quick actions and
+ * recent activity — never raw scores, thresholds, capabilities or full IBANs. */
+export function HomePage({ onNav }: { onNav: (r: string) => void }) {
+  const { t } = useI18n()
+  const { activeUser } = useSession()
+  const protectedNow = !!activeUser
+
+  return (
+    <section className="page home" aria-labelledby="home-h">
+      <div className="row-between">
+        <h2 id="home-h">{t('home.greeting')}</h2>
+        <span className="badge tone-info" data-testid="demo-badge">{t('home.demoBadge')}</span>
+      </div>
+
+      <div className="card status-card" data-testid="security-status">
+        <Callout tone={protectedNow ? 'ok' : 'warn'}>
+          {protectedNow ? t('home.security.protected') : t('home.security.setup')}
+        </Callout>
+        <ul className="status-list">
+          <li>
+            <span>{t('home.security.passkey')}</span>
+            <span className={`badge ${protectedNow ? 'tone-ok' : 'tone-warn'}`}>
+              {protectedNow ? t('common.on') : t('common.notSet')}
+            </span>
+          </li>
+          <li>
+            <span>{t('home.security.oob')}</span>
+            <span className="badge tone-info">{t('common.off')}</span>
+          </li>
+        </ul>
+        <p className="muted small">{t('home.nextAction')}:{' '}
+          <button className="linklike" onClick={() => onNav('security')}>
+            {protectedNow ? t('home.quick.security') : t('security.device.setup')}
+          </button>
+        </p>
+      </div>
+
+      <div className="card">
+        <h3>{t('home.quick.title')}</h3>
+        <div className="quick-actions">
+          <button className="btn primary" onClick={() => onNav('pay')}>{t('home.quick.pay')}</button>
+          <button className="btn" onClick={() => onNav('activity')}>{t('home.quick.activity')}</button>
+          <button className="btn" onClick={() => onNav('security')}>{t('home.quick.security')}</button>
+          <button className="btn" onClick={() => onNav('biometrics/oob')}>{t('home.quick.confirm')}</button>
+        </div>
+      </div>
+
+      <div className="card">
+        <h3>{t('home.recent.title')}</h3>
+        <p className="muted empty-state" data-testid="recent-empty">{t('home.recent.empty')}</p>
+      </div>
+    </section>
+  )
+}

web/src/pages/PayPage.test.tsx

@@ -4,16 +4,16 @@ import { I18nProvider } from '../i18n'
 import { PayPage } from './PayPage'
 import * as payApi from '../api/payments'
 import { logout, setActiveUser } from '../auth/session'
+import { _resetActivity, listActivity } from '../activity/store'
 
 vi.mock('../api/payments')
 
-const HOSTILE = '<img src=x onerror="window.__xss=1">'
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function mkPayment(over: Partial<any> = {}): any {
   return {
     id: 'p1', user_id: 'bob', status: 'succeeded', amount_minor: 15050, currency: 'SAR',
     amount: '150.50 SAR', country: 'SA', merchant_id: 'm', provider: 'mock',
-    provider_ref: 'mp_1', correlation_id: HOSTILE, consent_id: 'c', refunded_minor: 0,
+    provider_ref: 'mp_1', correlation_id: 'c', consent_id: 'c', refunded_minor: 0,
     requires_action_url: null, locked: true, created_at: 0, updated_at: 0, ...over,
   }
 }
@@ -23,90 +23,95 @@ const CAPS: any = {
     name: 'mock', supports_cancel: true, supports_refund: true, supports_partial_refund: true,
     countries: ['*'], currencies: ['SAR'], payment_initiation: true, sandbox: true,
   } } },
-  default: { country: 'SA', currency: 'SAR', timezone: 'Asia/Riyadh', locales: ['ar', 'en'] },
-  non_custodial: true,
+  default: { country: 'SA', currency: 'SAR' }, non_custodial: true,
 }
 const renderPay = () => render(<I18nProvider initial="en"><PayPage onNavEnroll={() => {}} /></I18nProvider>)
 
-describe('PayPage', () => {
+// Click through payee -> amount -> rail -> review -> auth.
+async function toAuth() {
+  fireEvent.click(await screen.findByRole('button', { name: 'Next' }))        // payee -> amount
+  fireEvent.click(screen.getByRole('button', { name: 'Next' }))               // amount -> rail
+  await waitFor(() => expect(screen.getByRole('button', { name: 'Next' })).not.toBeDisabled()) // rail loaded
+  fireEvent.click(screen.getByRole('button', { name: 'Next' }))               // rail -> review
+  fireEvent.click(screen.getByRole('button', { name: 'Next' }))               // review -> auth
+}
+
+describe('PayPage (staged journey)', () => {
   beforeEach(() => {
-    vi.resetAllMocks() // clears call history AND implementations of the auto-mocked module
-    logout()
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ;(window as any).__xss = undefined
+    vi.resetAllMocks(); logout(); _resetActivity()
     vi.spyOn(payApi, 'getProviders').mockResolvedValue(CAPS)
     vi.spyOn(payApi, 'getPayment').mockResolvedValue(mkPayment({ status: 'requires_customer_action' }))
   })
 
-  it('blocks payment when no active user and directs to Enroll', () => {
+  it('walks payee -> amount -> rail -> review with a masked destination and new-payee note', async () => {
+    setActiveUser({ userId: 'bob', via: 'passkey' })
     renderPay()
-    expect(screen.getByText(/Sign in on the Enroll tab/i)).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: 'Pay' })).toBeDisabled()
+    expect(screen.getByTestId('stage-payee')).toBeInTheDocument()
+    fireEvent.change(screen.getByLabelText('Payee IBAN'), { target: { value: 'SA4420000001234567891234' } })
+    expect(screen.getByText('This is a new payee.')).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Next' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Next' }))
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Next' })).not.toBeDisabled())
+    fireEvent.click(screen.getByRole('button', { name: 'Next' }))
+    expect(screen.getByTestId('stage-review')).toBeInTheDocument()
+    expect(screen.getByText(/SA44 \*\*\*\* \*\*\*\* 1234/)).toBeInTheDocument()
+    expect(screen.queryByText('SA4420000001234567891234')).toBeNull()   // never the full IBAN
+    expect(screen.getByText('Confirm with device biometrics')).toBeInTheDocument()
   })
 
-  it('creates a payment using the ACTIVE user (never hard-coded alice)', async () => {
-    setActiveUser({ userId: 'bob', via: 'demo' })
-    const create = vi.spyOn(payApi, 'createPayment').mockResolvedValue(mkPayment({ status: 'requires_customer_action' }))
+  it('requires an active user to confirm', async () => {
     renderPay()
-    fireEvent.click(screen.getByRole('button', { name: 'Pay' }))
+    await toAuth()
+    expect(screen.getByRole('button', { name: 'Confirm with device biometrics' })).toBeDisabled()
+  })
+
+  it('creates a payment with the ACTIVE user only at the auth stage', async () => {
+    setActiveUser({ userId: 'bob', via: 'passkey' })
+    const create = vi.spyOn(payApi, 'createPayment').mockResolvedValue(mkPayment({ status: 'requires_customer_action' }))
+    renderPay(); await toAuth()
+    fireEvent.click(screen.getByRole('button', { name: 'Confirm with device biometrics' }))
     await waitFor(() => expect(create).toHaveBeenCalledTimes(1))
     expect(create.mock.calls[0][0].userId).toBe('bob')
-    expect(create.mock.calls[0][0].userId).not.toBe('alice')
   })
 
-  it('prevents duplicate submission (one create per action)', async () => {
-    setActiveUser({ userId: 'bob', via: 'demo' })
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let resolve: (v: any) => void = () => {}
-    const create = vi.spyOn(payApi, 'createPayment').mockImplementation(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      () => new Promise<any>((r) => { resolve = r }),
-    )
-    renderPay()
-    const btn = screen.getByRole('button', { name: 'Pay' })
+  it('prevents duplicate submission (one create per confirm)', async () => {
+    setActiveUser({ userId: 'bob', via: 'passkey' })
+    let resolve!: (v: unknown) => void
+    const create = vi.spyOn(payApi, 'createPayment').mockReturnValue(new Promise((r) => { resolve = r }) as never)
+    renderPay(); await toAuth()
+    const btn = screen.getByRole('button', { name: 'Confirm with device biometrics' })
     fireEvent.click(btn); fireEvent.click(btn); fireEvent.click(btn)
     resolve(mkPayment({ status: 'requires_customer_action' }))
     await waitFor(() => expect(create).toHaveBeenCalledTimes(1))
   })
 
-  it('renders hostile backend text as text, not HTML (XSS regression)', async () => {
-    setActiveUser({ userId: 'bob', via: 'demo' })
-    vi.spyOn(payApi, 'createPayment').mockResolvedValue(mkPayment())
-    vi.spyOn(payApi, 'getPayment').mockResolvedValue(mkPayment())
-    const { container } = renderPay()
-    fireEvent.click(screen.getByRole('button', { name: 'Pay' }))
-    await waitFor(() => expect(screen.getByText('Succeeded')).toBeInTheDocument())
-    expect(container.querySelector('img')).toBeNull()
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((window as any).__xss).toBeUndefined()
-  })
-
   it('distinguishes processing from success', async () => {
-    setActiveUser({ userId: 'bob', via: 'demo' })
+    setActiveUser({ userId: 'bob', via: 'passkey' })
     vi.spyOn(payApi, 'createPayment').mockResolvedValue(mkPayment({ status: 'processing' }))
     vi.spyOn(payApi, 'getPayment').mockResolvedValue(mkPayment({ status: 'processing' }))
-    renderPay()
-    fireEvent.click(screen.getByRole('button', { name: 'Pay' }))
-    await waitFor(() => expect(screen.getAllByText('Processing').length).toBeGreaterThan(0))
-    expect(screen.queryByText('Payment completed successfully.')).toBeNull()
+    renderPay(); await toAuth()
+    fireEvent.click(screen.getByRole('button', { name: 'Confirm with device biometrics' }))
+    expect(await screen.findByTestId('processing')).toBeInTheDocument()
+    expect(screen.queryByTestId('success')).toBeNull()
   })
 
-  it('shows Cancel only in a cancellable state, not when succeeded', async () => {
-    setActiveUser({ userId: 'bob', via: 'demo' })
-    vi.spyOn(payApi, 'createPayment').mockResolvedValue(mkPayment({ status: 'requires_customer_action' }))
-    vi.spyOn(payApi, 'getPayment').mockResolvedValue(mkPayment({ status: 'requires_customer_action' }))
-    renderPay()
-    fireEvent.click(screen.getByRole('button', { name: 'Pay' }))
-    await waitFor(() => expect(screen.getByRole('button', { name: 'Cancel payment' })).toBeInTheDocument())
-  })
-
-  it('hides Cancel when terminal (succeeded)', async () => {
-    setActiveUser({ userId: 'bob', via: 'demo' })
+  it('shows a receipt and records a session activity event on a terminal result', async () => {
+    setActiveUser({ userId: 'bob', via: 'passkey' })
     vi.spyOn(payApi, 'createPayment').mockResolvedValue(mkPayment({ status: 'succeeded' }))
     vi.spyOn(payApi, 'getPayment').mockResolvedValue(mkPayment({ status: 'succeeded' }))
-    renderPay()
-    fireEvent.click(screen.getByRole('button', { name: 'Pay' }))
-    await waitFor(() => expect(screen.getByText('Succeeded')).toBeInTheDocument())
+    renderPay(); await toAuth()
+    fireEvent.click(screen.getByRole('button', { name: 'Confirm with device biometrics' }))
+    expect(await screen.findByTestId('receipt')).toBeInTheDocument()
+    expect(screen.getByTestId('success')).toBeInTheDocument()
     expect(screen.queryByRole('button', { name: 'Cancel payment' })).toBeNull()
+    await waitFor(() => expect(listActivity('payment').length).toBe(1))
+  })
+
+  it('shows Cancel only in a cancellable (non-terminal) state', async () => {
+    setActiveUser({ userId: 'bob', via: 'passkey' })
+    vi.spyOn(payApi, 'createPayment').mockResolvedValue(mkPayment({ status: 'requires_customer_action' }))
+    renderPay(); await toAuth()
+    fireEvent.click(screen.getByRole('button', { name: 'Confirm with device biometrics' }))
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Cancel payment' })).toBeInTheDocument())
   })
 })

web/src/pages/PayPage.tsx

@@ -3,37 +3,42 @@ import {
   cancelPayment, createPayment, getPayment, getProviders, mockAdvance, refundPayment,
 } from '../api/payments'
 import { usePaymentPolling } from '../payments/usePaymentPolling'
-import {
-  isCancellable, isRefundable, isSuccess, isTerminal, statusHelpKey,
-} from '../payments/status'
+import { isCancellable, isRefundable, isSuccess, isTerminal, statusHelpKey } from '../payments/status'
 import { formatMoney, toMinor } from '../payments/money'
-import { formatDateTime } from '../utils/format'
-import { isSafeExternalUrl } from '../utils/url'
+import { formatDateTimeSafe } from '../utils/format'
 import { validateAmount, validateIban, validateMerchant } from '../utils/validate'
 import { localizeError } from '../utils/errors'
 import { useSession } from '../hooks/useSession'
 import { useI18n } from '../i18n'
 import { Button, Field, StatusBadge, Callout, Spinner } from '../components/ui'
-import { getLastRequestId } from '../api/client'
+import { addActivity } from '../activity/store'
 import type { MessageKey } from '../i18n/en'
 import type { PaymentView, ProviderCapabilities } from '../types'
 
 const DEMO_IBAN = 'SA0380000000608010167519'
-const ALLOWED_ACTION_HOSTS = ['mock-bank.example'] // real provider hosts added via config
+const STAGES = ['payee', 'amount', 'rail', 'review', 'auth'] as const
+type Stage = (typeof STAGES)[number]
 
 function newIdemKey(): string {
   return typeof crypto !== 'undefined' && 'randomUUID' in crypto
-    ? crypto.randomUUID()
-    : `idem-${Date.now()}-${Math.random().toString(16).slice(2)}`
+    ? crypto.randomUUID() : `idem-${Date.now()}-${Math.random().toString(16).slice(2)}`
+}
+
+/** Mask a destination IBAN — never show/log the full value unnecessarily. */
+function maskIban(iban: string): string {
+  const v = iban.replace(/\s+/g, '').toUpperCase()
+  return v.length >= 8 ? `${v.slice(0, 4)} **** **** ${v.slice(-4)}` : '****'
 }
 
-export function PayPage({ onNavEnroll }: { onNavEnroll: () => void }) {
+export function PayPage({ onNavEnroll, onNav }: { onNavEnroll: () => void; onNav?: (r: string) => void }) {
   const { t, locale } = useI18n()
   const { activeUser } = useSession()
+  const [stage, setStage] = useState<Stage>('payee')
   const [amount, setAmount] = useState('150.50')
   const [merchant, setMerchant] = useState('Blue Bottle')
   const [iban, setIban] = useState(DEMO_IBAN)
   const [reference, setReference] = useState('')
+  const [rail, setRail] = useState('sarie')
   const [created, setCreated] = useState<PaymentView | null>(null)
   const [submitting, setSubmitting] = useState(false)
   const [busy, setBusy] = useState<string | null>(null)
@@ -42,9 +47,9 @@ export function PayPage({ onNavEnroll }: { onNavEnroll: () => void }) {
   const [mockActive, setMockActive] = useState(false)
   const idemRef = useRef<string>(newIdemKey())
   const submittingRef = useRef(false)
+  const loggedRef = useRef(false)
 
   const { payment: polled } = usePaymentPolling(created?.id ?? null)
-  // Prefer whichever snapshot is newer so manual actions reflect immediately.
   const payment = useMemo<PaymentView | null>(() => {
     if (polled && created) return polled.updated_at >= created.updated_at ? polled : created
     return polled ?? created
@@ -64,96 +69,173 @@ export function PayPage({ onNavEnroll }: { onNavEnroll: () => void }) {
   const amountErr = useMemo(() => validateAmount(amount), [amount])
   const merchantErr = useMemo(() => validateMerchant(merchant), [merchant])
   const ibanErr = useMemo(() => validateIban(iban), [iban])
-  const formInvalid = !!(amountErr || merchantErr || ibanErr)
   const err = (k?: MessageKey) => (k ? t(k) : undefined)
+  const newPayee = iban.replace(/\s+/g, '') !== DEMO_IBAN
+  const rails = mockActive ? [{ id: 'sarie', name: 'SARIE (Mock)', available: true }] : []
+
+  // Any edit before creation clears a possible stale approval + idempotency key.
+  function editField(setter: (v: string) => void) {
+    return (v: string) => { setter(v); idemRef.current = newIdemKey() }
+  }
+
+  function goReview() { setStage('review') }
+  function editFrom(target: Stage) { setError(null); setStage(target) } // material change -> re-review
 
-  async function onPay() {
+  async function onConfirm() {
     if (submittingRef.current || created) return // duplicate-submission guard
     if (!activeUser) { setError(t('error.noActiveUser')); return }
-    if (formInvalid) return
-    submittingRef.current = true
-    setSubmitting(true)
-    setError(null)
+    if (amountErr || merchantErr || ibanErr) return
+    submittingRef.current = true; setSubmitting(true); setError(null)
     try {
       const p = await createPayment({
-        userId: activeUser.userId, // active user — never hard-coded
-        amountMinor: toMinor(amount, 'SAR'),
-        merchantId: merchant.trim(),
-        payeeIban: iban.trim(),
-        description: reference.trim(),
-        country: 'SA',
-        currency: 'SAR',
-        idempotencyKey: idemRef.current, // same key on retry -> backend idempotency
+        userId: activeUser.userId, amountMinor: toMinor(amount, 'SAR'),
+        merchantId: merchant.trim(), payeeIban: iban.trim(), description: reference.trim(),
+        country: 'SA', currency: 'SAR', idempotencyKey: idemRef.current,
       })
       setCreated(p)
     } catch (e) {
       setError(localizeError(e, t, 'error.paymentCreate'))
     } finally {
-      submittingRef.current = false
-      setSubmitting(false)
+      submittingRef.current = false; setSubmitting(false)
     }
   }
 
-  // Runs an action against the real backend, then refreshes to the authoritative status.
   async function run(label: string, fn: () => Promise<unknown>, fallback: MessageKey) {
     if (!created) return
     setBusy(label); setError(null)
     try {
       const r = await fn()
-      const fresh = r && typeof r === 'object' && 'status' in r
-        ? (r as PaymentView)
-        : await getPayment(created.id)
+      const fresh = r && typeof r === 'object' && 'status' in r ? (r as PaymentView) : await getPayment(created.id)
       setCreated(fresh)
     } catch (e) {
       setError(localizeError(e, t, fallback))
-    } finally {
-      setBusy(null)
-    }
+    } finally { setBusy(null) }
   }
 
   function reset() {
-    setCreated(null)
-    setError(null)
-    idemRef.current = newIdemKey() // a NEW action gets a NEW idempotency key
+    setCreated(null); setError(null); setStage('payee'); loggedRef.current = false
+    idemRef.current = newIdemKey()
   }
 
-  const actionUrl = payment?.requires_action_url ?? null
-  const actionUrlSafe = actionUrl ? isSafeExternalUrl(actionUrl, ALLOWED_ACTION_HOSTS) : false
+  // Record a session activity event once the payment reaches a terminal state.
+  useEffect(() => {
+    if (payment && isTerminal(payment.status) && !loggedRef.current) {
+      loggedRef.current = true
+      addActivity({ kind: 'payment', title: merchant, status: payment.status,
+        amount: formatMoney(payment.amount_minor, payment.currency, locale),
+        reference: reference || payment.id })
+    }
+  }, [payment, merchant, reference, locale])
+
   const canCancel = payment && isCancellable(payment.status) && caps?.supports_cancel !== false
   const canRefund = payment && isRefundable(payment.status) && caps?.supports_refund !== false
   const remaining = payment ? payment.amount_minor - payment.refunded_minor : 0
   const showScenarios = mockActive && payment && !isTerminal(payment.status)
+  const stepNo = STAGES.indexOf(stage) + 1
 
-  return (
-    <section className="card" aria-labelledby="pay-h">
-      <h2 id="pay-h">{t('pay.title')}</h2>
-
-      {!activeUser && (
-        <Callout tone="info">
-          {t('pay.needLogin')}{' '}
-          <button className="link" onClick={onNavEnroll}>{t('nav.enroll')}</button>
-        </Callout>
-      )}
-      {activeUser && <p className="paying-as">{t('pay.payingAs', { user: activeUser.userId })}</p>}
+  // ---- pre-creation staged flow ---- //
+  if (!created) {
+    return (
+      <section className="card pay-flow" aria-labelledby="pay-h">
+        <div className="row-between">
+          <h2 id="pay-h">{t('pay.title')}</h2>
+          <span className="badge tone-info" data-testid="pay-step">
+            {t('pay.stepOf', { n: stepNo, total: STAGES.length })} · {t(`pay.stage.${stage}` as MessageKey)}
+          </span>
+        </div>
+        {!activeUser && (
+          <Callout tone="info">{t('pay.needLogin')}{' '}
+            <button className="linklike" onClick={onNavEnroll}>{t('nav.enroll')}</button></Callout>
+        )}
+        {activeUser && <p className="paying-as">{t('pay.payingAs', { user: activeUser.userId })}</p>}
+        {error && <Callout tone="bad">{error}</Callout>}
 
-      {!created && (
-        <>
-          <Field id="p_amt" label={t('pay.amount')} value={amount} inputMode="decimal"
-                 onChange={(e) => setAmount(e.target.value)} error={err(amountErr)} />
-          <Field id="p_merch" label={t('pay.merchant')} value={merchant}
-                 onChange={(e) => setMerchant(e.target.value)} error={err(merchantErr)} />
-          <Field id="p_iban" label={t('pay.iban')} value={iban}
-                 onChange={(e) => setIban(e.target.value)} error={err(ibanErr)} />
-          <Field id="p_ref" label={t('pay.description')} value={reference}
-                 onChange={(e) => setReference(e.target.value)} />
-          <Button onClick={onPay} disabled={!activeUser || submitting || formInvalid} aria-busy={submitting}>
-            {submitting ? <Spinner label={t('pay.submitting')} /> : t('pay.submit')}
-          </Button>
-        </>
-      )}
+        {stage === 'payee' && (
+          <div data-testid="stage-payee">
+            <Field id="p_merch" label={t('pay.merchant')} value={merchant}
+                   onChange={(e) => editField(setMerchant)(e.target.value)} error={err(merchantErr)} />
+            <Field id="p_iban" label={t('pay.iban')} value={iban}
+                   onChange={(e) => editField(setIban)(e.target.value)} error={err(ibanErr)} />
+            {newPayee && <Callout tone="warn">{t('pay.newPayeeNote')}</Callout>}
+            <Button onClick={() => setStage('amount')} disabled={!!merchantErr || !!ibanErr}>{t('pay.next')}</Button>
+          </div>
+        )}
+        {stage === 'amount' && (
+          <div data-testid="stage-amount">
+            <Field id="p_amt" label={t('pay.amount')} value={amount} inputMode="decimal"
+                   onChange={(e) => editField(setAmount)(e.target.value)} error={err(amountErr)} />
+            <Field id="p_ref" label={t('pay.description')} value={reference}
+                   onChange={(e) => setReference(e.target.value)} />
+            <div className="row">
+              <Button onClick={() => setStage('payee')}>{t('pay.back')}</Button>
+              <Button onClick={() => setStage('rail')} disabled={!!amountErr}>{t('pay.next')}</Button>
+            </div>
+          </div>
+        )}
+        {stage === 'rail' && (
+          <div data-testid="stage-rail">
+            <h3>{t('pay.rail.title')}</h3>
+            {rails.length === 0 && <Callout tone="warn">{t('pay.rail.none')}</Callout>}
+            {rails.map((r) => (
+              <label key={r.id} className={`rail-option ${rail === r.id ? 'selected' : ''}`}>
+                <input type="radio" name="rail" checked={rail === r.id} onChange={() => setRail(r.id)} />
+                <span className="rail-name">{r.name}</span>
+                <span className="badge tone-ok">{t('pay.rail.available')}</span>
+                <span className="muted small">{t('pay.rail.speed')}: {t('pay.rail.instant')}</span>
+                <span className="muted small">{t('pay.rail.feeUnavailable')}</span>
+              </label>
+            ))}
+            <div className="row">
+              <Button onClick={() => setStage('amount')}>{t('pay.back')}</Button>
+              <Button onClick={goReview} disabled={rails.length === 0}>{t('pay.next')}</Button>
+            </div>
+          </div>
+        )}
+        {stage === 'review' && (
+          <div data-testid="stage-review" className="review">
+            <h3>{t('pay.stage.review')}</h3>
+            <dl className="summary-grid">
+              <dt>{t('pay.merchant')}</dt><dd>{merchant} {newPayee && <span className="badge tone-warn">{t('pay.newPayeeNote')}</span>}</dd>
+              <dt>{t('pay.destination')}</dt><dd className="mono" dir="ltr">{maskIban(iban)}</dd>
+              <dt>{t('pay.amount')}</dt><dd>{formatMoney(toMinor(amount, 'SAR'), 'SAR', locale)}</dd>
+              <dt>{t('pay.review.fee')}</dt><dd>{t('pay.rail.feeUnavailable')}</dd>
+              <dt>{t('pay.review.rail')}</dt><dd>SARIE (Mock)</dd>
+              <dt>{t('pay.review.reference')}</dt><dd>{reference || '—'}</dd>
+              <dt>{t('pay.review.authReq')}</dt><dd>{t('bio.confirmDevice')}</dd>
+              <dt>{t('pay.review.reason')}</dt><dd>{t('pay.deviceConfirm')}</dd>
+            </dl>
+            <p className="muted small">{t('pay.review.editNote')}</p>
+            <div className="row wrap">
+              <Button onClick={() => editFrom('payee')}>{t('pay.edit')} · {t('pay.stage.payee')}</Button>
+              <Button onClick={() => editFrom('amount')}>{t('pay.edit')} · {t('pay.stage.amount')}</Button>
+              <Button onClick={() => editFrom('rail')}>{t('pay.edit')} · {t('pay.stage.rail')}</Button>
+              <Button onClick={() => setStage('auth')}>{t('pay.next')}</Button>
+            </div>
+          </div>
+        )}
+        {stage === 'auth' && (
+          <div data-testid="stage-auth">
+            <h3>{t('pay.authTitle')}</h3>
+            <Callout tone="info">{t('security.device.explain')}</Callout>
+            <p className="muted">{t('pay.deviceConfirm')}</p>
+            <div className="row">
+              <Button onClick={() => setStage('review')}>{t('pay.back')}</Button>
+              <Button onClick={onConfirm} disabled={!activeUser || submitting} aria-busy={submitting}>
+                {submitting ? <Spinner label={t('pay.submitting')} /> : t('bio.confirmDevice')}
+              </Button>
+            </div>
+          </div>
+        )}
+      </section>
+    )
+  }
 
+  // ---- processing + receipt (post-creation) ---- //
+  const terminal = payment && isTerminal(payment.status)
+  return (
+    <section className="card pay-flow" aria-labelledby="pay-h2">
+      <h2 id="pay-h2">{terminal ? t('pay.receiptTitle') : t('pay.processingTitle')}</h2>
       {error && <Callout tone="bad">{error}</Callout>}
-
       {payment && (
         <div className="receipt">
           <div className="receipt-row">
@@ -162,104 +244,58 @@ export function PayPage({ onNavEnroll }: { onNavEnroll: () => void }) {
           </div>
           <p className="status-help">{t(statusHelpKey(payment.status) as MessageKey)}</p>
 
-          {/* Payment summary */}
-          <dl className="summary-grid">
-            <dt>{t('pay.merchant')}</dt><dd>{merchant}</dd>
-            <dt>{t('pay.iban')}</dt><dd className="mono" dir="ltr">{iban}</dd>
-            {activeUser && (<><dt>{t('nav.enroll')}</dt><dd>{activeUser.userId}</dd></>)}
-          </dl>
-
-          {/* Customer-action (simulated bank authorization) */}
           {payment.status === 'requires_customer_action' && (
             <Callout tone="warn">
               <p>{t('pay.customerAction')}</p>
               <p className="hint">{t('pay.mockBankInfo')}</p>
-              <div className="row">
-                {actionUrlSafe && actionUrl && (
-                  <a className="btn" href={actionUrl} target="_blank" rel="noopener noreferrer">
-                    {t('pay.openBank')}
-                  </a>
-                )}
-                <Button onClick={() => run('settle', () => mockAdvance(payment.id, 'SETTLED'), 'error.generic')}
-                        disabled={busy !== null}>
-                  {t('pay.simulateSettle')}
-                </Button>
-              </div>
+              <Button onClick={() => run('settle', () => mockAdvance(payment.id, 'SETTLED'), 'error.generic')} disabled={busy !== null}>
+                {t('pay.simulateSettle')}</Button>
             </Callout>
           )}
-
           {(payment.status === 'processing' || payment.status === 'authorizing') && (
-            <Callout tone="warn"><Spinner label={t('pay.processing')} /></Callout>
+            <Callout tone="warn"><span data-testid="processing"><Spinner label={t('pay.processing')} /></span></Callout>
           )}
+          {isSuccess(payment.status) && <Callout tone="ok"><span data-testid="success">{t('pay.succeeded')}</span></Callout>}
 
-          {isSuccess(payment.status) && <Callout tone="ok">{t('pay.succeeded')}</Callout>}
-
-          {/* Refund visibility */}
-          {payment.refunded_minor > 0 && (
-            <dl className="summary-grid">
-              <dt>{t('pay.original')}</dt>
-              <dd>{formatMoney(payment.amount_minor, payment.currency, locale)}</dd>
-              <dt>{t('pay.refundedAmount')}</dt>
-              <dd>{formatMoney(payment.refunded_minor, payment.currency, locale)}</dd>
-              <dt>{t('pay.remaining')}</dt>
-              <dd>{formatMoney(remaining, payment.currency, locale)}</dd>
+          {terminal && (
+            <dl className="summary-grid" data-testid="receipt">
+              <dt>{t('pay.merchant')}</dt><dd>{merchant}</dd>
+              <dt>{t('pay.destination')}</dt><dd className="mono" dir="ltr">{maskIban(iban)}</dd>
+              <dt>{t('pay.amount')}</dt><dd>{formatMoney(payment.amount_minor, payment.currency, locale)}</dd>
+              <dt>{t('pay.review.fee')}</dt><dd>{t('pay.rail.feeUnavailable')}</dd>
+              <dt>{t('pay.review.rail')}</dt><dd>SARIE (Mock)</dd>
+              <dt>{t('pay.status.label')}</dt><dd><StatusBadge status={payment.status} /></dd>
+              <dt>{t('pay.dateTime')}</dt><dd>{formatDateTimeSafe(payment.updated_at, locale) ?? t('date.unavailable')}</dd>
+              <dt>{t('pay.review.reference')}</dt><dd>{reference || payment.id}</dd>
             </dl>
           )}
 
-          {/* Cancel — only when the state + provider allow it */}
           {canCancel && (
-            <Button onClick={() => run('cancel', () => cancelPayment(payment.id), 'error.cancel')}
-                    disabled={busy !== null}>
-              {busy === 'cancel' ? <Spinner label={t('pay.submitting')} /> : t('pay.cancel')}
-            </Button>
+            <Button onClick={() => run('cancel', () => cancelPayment(payment.id), 'error.cancel')} disabled={busy !== null}>
+              {busy === 'cancel' ? <Spinner label={t('pay.submitting')} /> : t('pay.cancel')}</Button>
           )}
-
-          {/* Demo refund actions — use the REAL Payment Core refund API */}
           {canRefund && remaining > 0 && (
             <div className="row">
-              <Button onClick={() => run('prefund', () => refundPayment(payment.id, Math.floor(remaining / 2), 'demo'), 'error.refund')}
-                      disabled={busy !== null}>
-                {t('scenario.partialRefund')}
-              </Button>
-              <Button onClick={() => run('frefund', () => refundPayment(payment.id, undefined, 'demo'), 'error.refund')}
-                      disabled={busy !== null}>
-                {t('scenario.fullRefund')}
-              </Button>
+              <Button onClick={() => run('prefund', () => refundPayment(payment.id, Math.floor(remaining / 2), 'demo'), 'error.refund')} disabled={busy !== null}>{t('scenario.partialRefund')}</Button>
+              <Button onClick={() => run('frefund', () => refundPayment(payment.id, undefined, 'demo'), 'error.refund')} disabled={busy !== null}>{t('scenario.fullRefund')}</Button>
             </div>
           )}
-
-          {/* Demo scenario selector — mock provider only, real backend transitions */}
           {showScenarios && (
             <details className="scenario">
               <summary>{t('scenario.title')}</summary>
-              <p className="hint">{t('scenario.hint')}</p>
               <div className="row wrap">
-                <Button onClick={() => run('s', () => mockAdvance(payment.id, 'AUTH_IN_PROGRESS'), 'error.generic')} disabled={busy !== null}>{t('scenario.authorizing')}</Button>
-                <Button onClick={() => run('s', () => mockAdvance(payment.id, 'SETTLING'), 'error.generic')} disabled={busy !== null}>{t('scenario.processing')}</Button>
                 <Button onClick={() => run('s', () => mockAdvance(payment.id, 'SETTLED'), 'error.generic')} disabled={busy !== null}>{t('scenario.approve')}</Button>
                 <Button onClick={() => run('s', () => mockAdvance(payment.id, 'DECLINED'), 'error.generic')} disabled={busy !== null}>{t('scenario.decline')}</Button>
-                <Button onClick={() => run('s', () => mockAdvance(payment.id, 'TIMED_OUT'), 'error.generic')} disabled={busy !== null}>{t('scenario.expire')}</Button>
                 <Button onClick={() => run('s', () => mockAdvance(payment.id, 'VOIDED'), 'error.generic')} disabled={busy !== null}>{t('scenario.cancelProvider')}</Button>
               </div>
             </details>
           )}
-
-          {isTerminal(payment.status) && (
-            <Button onClick={reset}>{t('pay.newPayment')}</Button>
+          {terminal && (
+            <div className="row wrap">
+              <Button onClick={reset}>{t('pay.newPayment')}</Button>
+              {onNav && <Button onClick={() => onNav('activity')}>{t('pay.viewActivity')}</Button>}
+            </div>
           )}
-
-          {/* Technical / support details */}
-          <details className="support">
-            <summary>{t('tech.title')}</summary>
-            <dl className="tech-grid mono" dir="ltr">
-              <dt>{t('tech.paymentId')}</dt><dd>{payment.id}</dd>
-              <dt>{t('tech.providerRef')}</dt><dd>{payment.provider_ref ?? '—'}</dd>
-              <dt>{t('tech.correlationId')}</dt><dd>{payment.correlation_id}</dd>
-              <dt>{t('tech.requestId')}</dt><dd>{getLastRequestId() ?? '—'}</dd>
-              <dt>{t('tech.created')}</dt><dd>{formatDateTime(payment.created_at, locale)}</dd>
-              <dt>{t('tech.updated')}</dt><dd>{formatDateTime(payment.updated_at, locale)}</dd>
-            </dl>
-          </details>
         </div>
       )}
     </section>

web/src/pages/SecurityPage.test.tsx

@@ -0,0 +1,42 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import { I18nProvider } from '../i18n'
+import { SecurityPage } from './SecurityPage'
+import * as ai from '../api/ai'
+
+vi.mock('../api/ai')
+
+const renderSec = () =>
+  render(<I18nProvider initial="en"><SecurityPage onNav={vi.fn()} /></I18nProvider>)
+
+describe('SecurityPage', () => {
+  beforeEach(() => {
+    vi.spyOn(ai, 'modelStatus').mockResolvedValue({
+      behavioural_model: 'logreg', model_version: 'v1', feature_version: 'features-v1',
+      reason_codes_version: 'reason_codes-v1', shadow_only: true, affects_payment: false,
+      label: 'DEMO ONLY',
+    })
+  })
+  afterEach(() => vi.restoreAllMocks())
+
+  it('explains device authentication without fingerprint upload', () => {
+    renderSec()
+    expect(screen.getByText(/stays on your device/i)).toBeInTheDocument()
+    expect(screen.queryByText(/upload fingerprint/i)).toBeNull()
+  })
+
+  it('shows shadow-mode disclosure and that the model does not change payments', async () => {
+    renderSec()
+    await waitFor(() => expect(ai.modelStatus).toHaveBeenCalled())
+    expect(screen.getByText('Shadow mode')).toBeInTheDocument()
+    expect(screen.getByText('Advisory only')).toBeInTheDocument()
+    expect(await screen.findByText(/does not approve, deny or modify payments/i)).toBeInTheDocument()
+    expect(await screen.findByText(/Not evidence of real-world/i)).toBeInTheDocument()
+  })
+
+  it('never renders a raw risk score or threshold', async () => {
+    const { container } = renderSec()
+    await waitFor(() => expect(ai.modelStatus).toHaveBeenCalled())
+    expect(container.textContent).not.toMatch(/score|threshold|coefficient/i)
+  })
+})

web/src/pages/SecurityPage.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react'
+import { useI18n } from '../i18n'
+import { useSession } from '../hooks/useSession'
+import { Callout, Spinner } from '../components/ui'
+import { ShadowBadges, ShadowFootnote } from '../components/ShadowBadge'
+import { modelStatus, type ModelStatus } from '../api/ai'
+
+/** Customer-facing security page: device authentication + behavioural-protection (shadow) status.
+ * Never exposes raw scores or thresholds. */
+export function SecurityPage({ onNav }: { onNav: (r: string) => void }) {
+  const { t } = useI18n()
+  const { activeUser } = useSession()
+  const [status, setStatus] = useState<ModelStatus | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [err, setErr] = useState(false)
+
+  useEffect(() => {
+    const c = new AbortController()
+    modelStatus(c.signal)
+      .then(setStatus)
+      .catch(() => setErr(true))
+      .finally(() => setLoading(false))
+    return () => c.abort()
+  }, [])
+
+  return (
+    <section className="page security" aria-labelledby="sec-h">
+      <h2 id="sec-h">{t('security.title')}</h2>
+
+      <div className="card">
+        <h3>{t('security.device.title')}</h3>
+        <p className="muted">{t('security.device.explain')}</p>
+        {activeUser ? (
+          <Callout tone="ok">{t('security.device.registered')}</Callout>
+        ) : (
+          <div className="quick-actions">
+            <button className="btn primary" onClick={() => onNav('enroll')}>{t('security.device.setup')}</button>
+            <button className="btn" onClick={() => onNav('enroll')}>{t('security.device.signin')}</button>
+          </div>
+        )}
+      </div>
+
+      <div className="card" data-testid="behaviour-card">
+        <h3>{t('security.behaviour.title')}</h3>
+        <ShadowBadges />
+        {loading && <Spinner label={t('common.loading')} />}
+        {err && <Callout tone="warn">{t('home.security.unavailable')}</Callout>}
+        {status && (
+          <>
+            <Callout tone="info">{t('security.behaviour.status')}</Callout>
+            <p>{t('security.behaviour.noEffect')}</p>
+            <ul className="status-list">
+              <li><span>Model</span><span className="mono">{status.behavioural_model} · {status.model_version}</span></li>
+              <li><span>Features</span><span className="mono">{status.feature_version}</span></li>
+            </ul>
+            <ShadowFootnote />
+          </>
+        )}
+      </div>
+
+      <div className="card">
+        <h3>{t('security.oob.title')}</h3>
+        <p className="muted">{t('security.oob.explain')}</p>
+        <button className="btn" onClick={() => onNav('biometrics/oob')}>{t('home.quick.confirm')}</button>
+      </div>
+    </section>
+  )
+}

web/src/styles.css

@@ -116,3 +116,67 @@ h2 { margin: 0 0 12px; font-size: 18px; }
   .active-user { max-width: 110px; }
   .modality-grid { grid-template-columns: 1fr; }
 }
+
+/* ---------- PR C2.5 — Agentic Security UX ---------- */
+.row-between { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
+.muted { color: var(--muted, #6b7280); }
+.small { font-size: .82rem; }
+.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
+.linklike { background:none; border:none; color: var(--accent, #2563eb); cursor:pointer; padding:0; text-decoration:underline; font: inherit; }
+.empty-state { padding: 1rem 0; }
+
+.quick-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
+.btn.primary { background: var(--accent, #2563eb); color:#fff; }
+.status-list { list-style:none; padding:0; margin:.5rem 0; }
+.status-list li { display:flex; justify-content:space-between; align-items:center; padding:.35rem 0; border-bottom:1px solid rgba(0,0,0,.06); gap:.5rem; }
+.status-card .callout { margin-bottom:.5rem; }
+
+.shadow-badges { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0; }
+.badge { display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.78rem; font-weight:600; }
+
+.result-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.75rem; margin:.75rem 0; }
+.explanation ul { margin:.35rem 0 0; padding-inline-start:1.1rem; }
+
+.agent-trace { margin-top:1rem; }
+.trace-list { list-style:none; padding:0; margin:0; }
+.trace-step { border-inline-start:3px solid rgba(0,0,0,.12); padding:.5rem .75rem; margin:.35rem 0; border-radius:.4rem; background:rgba(0,0,0,.02); }
+.trace-step.role-authoritative { border-inline-start-color:#16a34a; }
+.trace-step.role-advisory { border-inline-start-color:#2563eb; }
+.trace-step.role-user { border-inline-start-color:#d97706; }
+.trace-step.role-notExecuted { border-inline-start-color:#dc2626; }
+.trace-step.role-executed { border-inline-start-color:#16a34a; }
+.trace-head { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
+.trace-summary { display:block; font-size:.85rem; color:var(--muted,#6b7280); margin-top:.15rem; }
+
+.dev-panel { margin-top:.75rem; border:1px dashed rgba(0,0,0,.2); border-radius:.5rem; padding:.5rem .75rem; }
+.dev-panel summary { cursor:pointer; font-weight:600; }
+
+/* Responsive navigation: desktop tabs vs mobile bottom bar */
+.bottom-nav { display:none; }
+@media (max-width: 720px) {
+  .desktop-nav { display:none; }
+  .bottom-nav {
+    display:flex; position:sticky; bottom:0; inset-inline:0; z-index:20;
+    background:var(--bg,#fff); border-top:1px solid rgba(0,0,0,.1);
+    justify-content:space-around; padding:.35rem .25rem; gap:.15rem;
+  }
+  .bnav { flex:1; background:none; border:none; padding:.5rem .25rem; font:inherit; color:var(--muted,#6b7280); min-height:44px; border-radius:.5rem; }
+  .bnav.active { color:var(--accent,#2563eb); font-weight:700; background:rgba(37,99,235,.08); }
+  .content { padding-bottom:4rem; }
+}
+
+/* ---------- PR C2.5 payment journey + activity ---------- */
+.pay-flow .row { display:flex; gap:.5rem; margin-top:.5rem; flex-wrap:wrap; }
+.pay-flow .row.wrap { flex-wrap:wrap; }
+.rail-option { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.6rem .75rem; border:1px solid rgba(0,0,0,.12); border-radius:.5rem; margin:.4rem 0; cursor:pointer; }
+.rail-option.selected { border-color: var(--accent,#2563eb); background: rgba(37,99,235,.06); }
+.rail-name { font-weight:600; }
+.review .summary-grid { margin:.5rem 0; }
+.tabs { display:flex; gap:.35rem; flex-wrap:wrap; margin:.5rem 0; }
+.tabs .tab { padding:.35rem .7rem; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:none; cursor:pointer; font:inherit; }
+.tabs .tab.active { background: var(--accent,#2563eb); color:#fff; border-color:transparent; }
+.activity-list { list-style:none; padding:0; margin:.5rem 0; }
+.activity-item { border:1px solid rgba(0,0,0,.1); border-radius:.5rem; padding:.6rem .75rem; margin:.4rem 0; }
+.more-sheet { position:fixed; bottom:3.6rem; inset-inline:0; z-index:25; background:var(--bg,#fff); border-top:1px solid rgba(0,0,0,.12); display:flex; flex-direction:column; }
+.more-item { padding:.9rem 1rem; text-align:start; background:none; border:none; border-bottom:1px solid rgba(0,0,0,.06); font:inherit; min-height:44px; cursor:pointer; }
+@media (prefers-reduced-motion: reduce) { .spin { animation: none !important; } }

web/src/utils/format.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest'
+import { formatDateTimeSafe } from './format'
+
+// A real, deterministic timestamp: 2023-11-14T22:13:20Z (epoch seconds 1700000000).
+const REAL_SECONDS = 1_700_000_000
+const REAL_ISO = '2023-11-14T22:13:20Z'
+
+describe('formatDateTimeSafe', () => {
+  it('formats a valid epoch-seconds timestamp', () => {
+    const out = formatDateTimeSafe(REAL_SECONDS, 'en')
+    expect(out).toBeTruthy()
+    expect(out).toMatch(/2023/)
+    expect(out).not.toMatch(/1970|Invalid Date/)
+  })
+
+  it('formats a valid ISO timestamp', () => {
+    expect(formatDateTimeSafe(REAL_ISO, 'en')).toMatch(/2023/)
+  })
+
+  it('formats an ISO timestamp with an explicit timezone offset', () => {
+    expect(formatDateTimeSafe('2023-11-15T01:13:20+03:00', 'en')).toMatch(/2023/)
+  })
+
+  it('returns null for null', () => { expect(formatDateTimeSafe(null, 'en')).toBeNull() })
+  it('returns null for undefined', () => { expect(formatDateTimeSafe(undefined, 'en')).toBeNull() })
+  it('returns null for an empty string', () => { expect(formatDateTimeSafe('', 'en')).toBeNull() })
+  it('returns null for an invalid string', () => { expect(formatDateTimeSafe('not-a-date', 'en')).toBeNull() })
+  it('returns null for numeric zero', () => { expect(formatDateTimeSafe(0, 'en')).toBeNull() })
+  it('returns null for the 1970 epoch ISO', () => {
+    expect(formatDateTimeSafe('1970-01-01T00:00:00Z', 'en')).toBeNull()
+  })
+  it('returns null for a tiny placeholder epoch (e.g. 2)', () => {
+    expect(formatDateTimeSafe(2, 'en')).toBeNull()
+  })
+  it('returns null for a non-finite number', () => {
+    expect(formatDateTimeSafe(Number.NaN, 'en')).toBeNull()
+    expect(formatDateTimeSafe(Number.POSITIVE_INFINITY, 'en')).toBeNull()
+  })
+
+  it('renders a valid date in Arabic locale', () => {
+    const ar = formatDateTimeSafe(REAL_SECONDS, 'ar')
+    expect(ar).toBeTruthy()
+    expect(ar).not.toMatch(/1970|Invalid Date/)
+    // Arabic-Indic digits present (ar-SA formatting)
+    expect(ar).toMatch(/[٠-٩]/)
+  })
+
+  it('returns null in Arabic locale for an unavailable date (caller shows the AR fallback)', () => {
+    expect(formatDateTimeSafe(0, 'ar')).toBeNull()
+    expect(formatDateTimeSafe(null, 'ar')).toBeNull()
+  })
+})

web/src/utils/format.ts

@@ -8,3 +8,37 @@ export function formatDateTime(epochSeconds: number, locale = 'en', tz = 'Asia/R
     return new Date(epochSeconds * 1000).toISOString()
   }
 }
+
+// Any real transaction is after this floor; anything before it (epoch 0, a placeholder
+// like `2`, or `1970-01-01T00:00:00Z`) is treated as "no real timestamp".
+const MIN_VALID_MS = Date.UTC(2000, 0, 1)
+
+/**
+ * Safe timestamp formatter. Accepts an epoch-seconds number OR an ISO string. Returns `null`
+ * for missing/empty/invalid/epoch-equivalent values so the caller can show a localized
+ * "Date unavailable" fallback — it NEVER fabricates the current date and never renders 1970.
+ */
+export function formatDateTimeSafe(
+  value: number | string | null | undefined,
+  locale = 'en',
+  tz = 'Asia/Riyadh',
+): string | null {
+  if (value === null || value === undefined) return null
+  let ms: number
+  if (typeof value === 'number') {
+    if (!Number.isFinite(value)) return null
+    ms = value * 1000                       // backend convention: epoch seconds
+  } else {
+    const s = value.trim()
+    if (s === '') return null
+    ms = new Date(s).getTime()              // ISO string (already ms-based)
+  }
+  if (!Number.isFinite(ms) || ms < MIN_VALID_MS) return null
+  try {
+    return new Intl.DateTimeFormat(locale === 'ar' ? 'ar-SA' : 'en-GB', {
+      dateStyle: 'medium', timeStyle: 'short', timeZone: tz,
+    }).format(new Date(ms))
+  } catch {
+    return null
+  }
+}