[daniel-tsx]

Stacked PR 3 of 4 (#9 → #10 → #11 → #12), on top of #10 (feat/web-ui-tables). After #10 is squash-merged, rebase onto main (git rebase --onto origin/main bd04051) so the diff shows only this slice.

What and why

Slice 3: payment detail and a factual overview. The detail page hid refunds the API already returned, showed raw JSON and errored on malformed IDs. The overview showed only the first currency's balance, a hardcoded "Operational" status and a made-up trace. No API, schema or business-logic change.

• Payment detail:
  • Full ID with copy and an audit link, the five amounts, and a lifecycle trace with readable audit metadata.
  • Where the money is: authorized, captured and refunded come from the API. Settled and paid out show not reported and are never inferred.
  • Attempts with failure codes, refunds, journals, and related disputes and reconciliation issues, fetched in parallel.
• Open workflow states end the trace with an explicit next step. REQUIRES_AUTHORIZATION and CAPTURE_PENDING read "outcome unknown … not a failure".
• Malformed or unknown payment IDs render the 404 page.
• JournalTable is shared by the ledger and the detail page.
• Overview: one balance strip per currency, the latest payments, and an attention list counted from real records (dead, retrying or exception webhooks; open reconciliation issues; open disputes), each linking to the filtered register.
• Fixes: screen-reader text inside scrolling tables widened the page on mobile (684px at a 390px viewport); .table-scroll now contains it. Identifiers in eyebrows keep their case.

Screenshots: .tmp/web-ui-revamp/screens/slice3 (local, not attached).

Review guide

• Read carefully:
  • apps/web/app/payments/[id]/page.tsx: the nextStep wording, and the audit keys amount, gross, fee and net formatted as minor units.
  • apps/web/app/page.tsx: which states count as needing attention.
  • apps/web/components/journal-table.tsx: BigInt totals, now used by two pages.
• Skim: the globals.css additions; console.tsx (Chip, per-currency BalanceStrip).
• Least confident about: the audit-metadata money keys. They're correct for every event seen locally, but no API contract guarantees them.
• Tests removed, weakened or skipped: none.

Task size

T1 (apps/web only).

Checks

Result	Command	Scope / notes
PASS	pnpm --filter @fintech-lab/web lint	web
PASS	pnpm --filter @fintech-lab/web build	web
PASS	pnpm --filter @fintech-lab/web typecheck	web
PASS	pnpm --filter @fintech-lab/web test	12/12
PASS	git diff --check	whitespace
PASS	Browser	fresh-tab console clean on overview, detail and ledger; malformed and unknown IDs → 404; every page exactly 390px wide on mobile; a local confirm:true intent (relay not running, no provider call) shows "Authorization outcome unknown"
NOT RUN	pnpm lint/test/build/typecheck (repo-wide) at this head	run at the top of the stack (#12), all PASS
NOT RUN	Hosted CI	pending on this PR

Unverified boundaries

The local data has no refunds, disputes or reconciliation issues, so those tables were only checked empty. Related records are filtered in the browser from the full disputes list and the latest 200 issues.

Review

T1 self-review (ponytail-review). Findings and disposition:

• Absolutely positioned screen-reader text caused horizontal overflow on mobile → contained.
• The uppercase eyebrow showed UUIDs in capitals → wrapped in a verbatim span.
• An odd number of amount cells left a grey gap on phones → the last cell spans the row.

Docs and temporary files

docs/ui-signature.md: new "Detail and overview" section. Temporary files as listed in #9.

🤖 Generated with Claude Code