@volter/twin-stripe 3.0.2 → 3.0.3

package/README.md

@@ -5,20 +5,24 @@ application sends a person through, and Stripe.js, over one state.
 
 ## Use with an existing app
 
+Use Node 22.6 or newer.
+
 In an app that already uses this vendor, install this exact release and the product CLI:
 
 ```console
-npm install --save-dev --save-exact @volter/world@3.0.68 @volter/twin-stripe@3.0.2
-npx volter world init --name my-app --twins stripe --source stripe=@volter/twin-stripe
+npm install --save-dev --save-exact @volter/world@3.0.147 @volter/twin-stripe@3.0.3
+./node_modules/.bin/volter world init --name my-app --twins stripe --source stripe=@volter/twin-stripe
 ```
 
+Run the local executable from this app’s folder; if it is missing, complete the installation here before continuing.
+
 Review the detected vendor and generated bindings before booting. Read the credential names and limitations below; the World supplies throwaway credentials. Then run your app's own command through the World:
 
 ```console
-npx volter world up
-npx volter world run -- npm test
-npx volter world log
-npx volter world down
+./node_modules/.bin/volter world up
+./node_modules/.bin/volter world run -- npm test
+./node_modules/.bin/volter world log
+./node_modules/.bin/volter world down
 ```
 
 Here `npm test` is your app's existing command; replace it with your app or test command. `down` retains state.
@@ -47,9 +51,10 @@ vendor-backed World's refresh; each served operation is decided in `journeys/dec
 - **Catalog**: products and prices created and listed, prices retrieved, coupons and promotion codes managed. Product search and administrative product/price updates answer the gap.
 - **Checkout Sessions** and the customer portal (sessions and configurations): pay, add a card, pay an open invoice,
   cancel at the period's end or at once.
-- **Subscriptions**: created (charged at once, trialing, `default_incomplete` or `error_if_incomplete`), updated (items,
-  discounts, a trial ended early or added), searched, canceled; their items, schedules (made, updated, released),
-  renewals on the World clock, and a renewal declined and paid later.
+- **Subscriptions**: created by hosted Checkout (including trials), read, updated (items, discounts, a trial
+  ended early or added) and canceled, with renewals on the World clock. Direct `POST /v1/subscriptions` is outside
+  the declared application demand and returns the gap; use the release operation table to check other subscription
+  and schedule endpoints before choosing this twin.
 - **Invoices**: invoice items, drafts, finalize, pay (a draft is finalized on the way), void, delete, lines,
   previews and their payments. Invoice lines are read in the invoice; the standalone lines endpoint answers the gap.
 - **Intents**: payment and setup intents, confirmed on the server or by Stripe.js with the publishable key and the
@@ -98,30 +103,22 @@ SDK's `constructEvent` verifies) and delivers to the account's enabled webhook e
   (`STRIPE_CONNECT_WEBHOOK_SECRET`), the same on every boot; an endpoint made on the Webhooks page (a door) is signed
   with the one of its kind. The twin reads no env.
 
+The documented card-brand samples keep their brand and credit/debit/prepaid funding type when saved
+through Checkout or the portal. Other raw numbers retain synthetic Visa metadata; the twin does not
+look up a real card issuer.
+
 ## Screens
 
-Stripe's own pages, at their vendor urls (`src/screens/`):
-
-- **Checkout** (`checkout.stripe.com/c/pay/{session}`): the customer pays; the session completes and
-  `checkout.session.completed` fires.
-- **Customer portal** (`billing.stripe.com/p/session/{session}`): cancel or renew a plan, update the card, pay an
-  open invoice.
-- **Connect onboarding** (`connect.stripe.com/setup/…`): an Account Link's hosted onboarding.
-- **Connect OAuth** (`connect.stripe.com/oauth/authorize`, `/oauth/token`, `/oauth/deauthorize`; Standard accounts,
-  docs.stripe.com/connect/oauth-reference). The platform's client_id is `ca_twin_self` in every World (a test
-  client_id; the platform account is `acct_twin_self`), shown on the Dashboard's Connect OAuth settings page in
-  `<code data-testid="connect-client-id">`. OAuth starts off: a runner POSTs that page as a browser does,
-  `oauth_enabled=on&redirect_uris=<one per line>`. The authorize page offers the test-mode **Skip this form** (a new
-  Standard account, connected) and **Deny access**; the token endpoint exchanges a code once, within 5 minutes (a
-  reused code revokes the connection), and refreshes to an equal or lesser scope; after a deauthorization the
-  account's `Stripe-Account` header is refused 403 `account_invalid`. The deprecated `access_token` and
-  `stripe_publishable_key` act as the connected account. Not modelled: connecting an existing Stripe account, the full
-  account application, holding a `read_only` connection to reads.
-- **Stripe.js** (`js.stripe.com/v3/`, `/v3/stripe.js`, `/<release train>/stripe.js`): `redirectToCheckout({ sessionId })`
-  goes to the hosted Checkout page; any other member
-  throws, naming itself.
-- **Dashboard** (`dashboard.stripe.com/settings/public`, `/settings/connect/onboarding-options/oauth`): Public details
-  (the business name Checkout and the portal show) and the Connect OAuth settings.
+Authored pages and content at the declared vendor URLs (`src/screens/`):
+
+- **Checkout** (`checkout.stripe.com/c/pay/{session}`): payment, setup and subscription sessions, including trials.
+- **Customer portal** (`billing.stripe.com/p/session/{session}`): cancel or renew a plan, update the card and pay an open invoice.
+- **Connect onboarding** (`connect.stripe.com/setup/…`): the Account Link's business, identity, payout and agreement form.
+- **Stripe.js** (`js.stripe.com/v3/`, `/v3/stripe.js`, `/<release train>/stripe.js`): `redirectToCheckout({ sessionId })` opens the hosted session. Unsupported members refuse.
+- **Checkout client wire** (`api.stripe.com/v1/payment_pages/{session}`): the authored session operations used by Stripe.js CheckoutProvider.
+- **Dashboard** (`dashboard.stripe.com/settings/public`, `/radar/lists`, `/test/issuing/balance`): public business name, Radar list creation and test Issuing funding. The declared World workspace opens Public details, with navigation between these stored operator actions. Other dashboard controls are unavailable.
+
+Page actions use the same stored resources as the API. Public screen references and authored choices are in [spec/SOURCE.md](./spec/SOURCE.md).
 
 ## Doors
 

package/dist/journeys/customer-life.json

@@ -2183,7 +2183,11 @@
       "expect": [
         {
           "path": "",
-          "contains": "Radar Lists"
+          "contains": "Payments / Radar"
+        },
+        {
+          "path": "",
+          "contains": "New list"
         }
       ],
       "evidence": "Stripe: https://docs.stripe.com/radar/lists"
@@ -2690,7 +2694,11 @@
       "expect": [
         {
           "path": "",
-          "contains": "Test Issuing balance"
+          "contains": "Issuing balance"
+        },
+        {
+          "path": "",
+          "contains": "Add test funds before creating test Issuing transactions."
         }
       ],
       "evidence": "Stripe: https://docs.stripe.com/issuing/testing"

package/dist/spec/SOURCE.md

@@ -16,3 +16,7 @@ The pack serves this document's version (`SERVED_VERSION` in `src/engine/version
   publish (its testing page's cards, the payment lifecycle's states, each reference page's stated rule), each with its
   page's URL and the page's words for what it does, read with twin-standard's `read-page`. **Read by:**
   `bun scripts/vendor-examples.ts stripe`.
+
+Screen references, read 2026-10-08: [Stripe's hosted-onboarding guide](https://docs.stripe.com/connect/hosted-onboarding), its hosted_onboarding_form.e59ba8300f563e43489953f06127f52c.png image, supplies the two-column layout, progress and sequential form. The image's example platform branding is configurable; this screen retains the Stripe skin. Back/Continue keep local form answers; only the existing final submit changes the connected account. The existing US requirements and refusal behavior remain the contract. No upstream page, image or script is shipped.
+
+Dashboard references, read 2026-10-08: [the Web Dashboard guide](https://docs.stripe.com/dashboard/basics) supplies the primary sidebar categories, Shortcuts and Settings. The public [Stripe Apps testing guide](https://docs.stripe.com/stripe-apps/test-app), image `test-app-uninstall.710b89177767cff3a7f53de749558d88.png`, illustrates the earlier horizontal navigation, settings breadcrumbs, form density and type; its publication date is unspecified, and it is not a current Public details screenshot. The authored shell follows the current documented sidebar, while the controls remain the existing public business name, Radar list creation and test Issuing funding. The declared root opens Public details; other Dashboard products are unavailable, and there are no invented analytics. [Radar Lists](https://docs.stripe.com/radar/lists) supplies New, name, alias, type and Add. No upstream image, DOM, script or account sign-in is shipped.

package/dist/src/engine/stripe.js

@@ -672,6 +672,27 @@ export function disputeEvidence() {
     };
 }
 const subParams = (params, k) => (params[k] && typeof params[k] === 'object' ? params[k] : {});
+// source: https://docs.stripe.com/testing
+// The documented brand cards keep their brand and funding type when Checkout or the portal saves them.
+// Where the documentation stops and the twin decides: other numbers retain the existing synthetic Visa default.
+const TEST_CARD_PROFILES = {
+    '4000056655665556': { brand: 'visa', funding: 'debit' },
+    '5555555555554444': { brand: 'mastercard', funding: 'credit' },
+    '2223003122003222': { brand: 'mastercard', funding: 'credit' },
+    '5200828282828210': { brand: 'mastercard', funding: 'debit' },
+    '5105105105105100': { brand: 'mastercard', funding: 'prepaid' },
+    '378282246310005': { brand: 'amex', funding: 'credit' },
+    '371449635398431': { brand: 'amex', funding: 'credit' },
+    '6011111111111117': { brand: 'discover', funding: 'credit' },
+    '6011000990139424': { brand: 'discover', funding: 'credit' },
+    '6011981111111113': { brand: 'discover', funding: 'debit' },
+    '3056930009020004': { brand: 'diners', funding: 'credit' },
+    '36227206271667': { brand: 'diners', funding: 'credit' },
+    '3566002020360505': { brand: 'jcb', funding: 'credit' },
+    '6200000000000005': { brand: 'unionpay', funding: 'credit' },
+    '6200000000000047': { brand: 'unionpay', funding: 'debit' },
+    '6205500000000000004': { brand: 'unionpay', funding: 'credit' },
+};
 /** A card's own sub-object, from the number and expiry given. */
 function cardSubObject(params) {
     const c = subParams(params, 'card');
@@ -680,15 +701,16 @@ function cardSubObject(params) {
     // produces its real last4 instead of silently falling back to the '4242' default.
     const number = typeof c.number === 'string' ? c.number.replace(/\D/g, '')
         : typeof c.number === 'number' ? String(c.number).replace(/\D/g, '') : '';
+    const profile = TEST_CARD_PROFILES[number] ?? { brand: 'visa', funding: 'credit' };
     return { card: {
-            brand: 'visa', last4: number ? number.slice(-4) : '4242',
+            brand: profile.brand, last4: number ? number.slice(-4) : '4242',
             exp_month: Number(c.exp_month) || 12, exp_year: Number(c.exp_year) || 2034,
-            funding: 'credit', country: 'US',
+            funding: profile.funding, country: 'US',
             // source: spec:/components/schemas/payment_method_card/properties/fingerprint/description "Uniquely identifies this particular card number."
             // The synthetic fingerprint is stable for a number; Stripe's opaque fingerprint algorithm is not published.
             fingerprint: digest('sha256', number || '4242424242424242').slice(0, 16),
             checks: { address_line1_check: null, address_postal_code_check: null, cvc_check: 'pass' },
-            networks: { available: ['visa'], preferred: null },
+            networks: { available: [profile.brand], preferred: null },
             three_d_secure_usage: { supported: true }, wallet: null,
         } };
 }

package/dist/src/screens/billing-portal.js

@@ -56,8 +56,8 @@ function page(ctx, id, session, problem) {
             badge: s.status === 'trialing' ? 'Trial' : s.status === 'past_due' ? 'Past due' : ending ? 'Cancels' : undefined,
             note: ending ? `Your plan will be canceled on ${day(s.current_period_end)}.` : s.status === 'trialing' ? `Trial ends ${day(s.trial_end)}.` : `Renews on ${day(s.current_period_end)}.`,
             actions: ending
-                ? [{ label: 'Renew plan', action: `/p/session/${id}/renew`, fields: { subscription: String(s.id) }, tone: 'primary' }]
-                : features.cancel.enabled ? [{ label: 'Cancel plan', action: `/p/session/${id}/cancel`, fields: { subscription: String(s.id) }, tone: 'danger' }] : [],
+                ? [{ label: 'Renew plan', action: `${ctx.publicBase}/p/session/${id}/renew`, fields: { subscription: String(s.id) }, tone: 'primary' }]
+                : features.cancel.enabled ? [{ label: 'Cancel plan', action: `${ctx.publicBase}/p/session/${id}/cancel`, fields: { subscription: String(s.id) }, tone: 'danger' }] : [],
         };
     });
     const defaultPm = customer.invoice_settings?.default_payment_method ?? undefined;
@@ -72,7 +72,7 @@ function page(ctx, id, session, problem) {
         ? ctx.rows('invoice').filter((i) => i.customer === session.customer && i.status !== 'draft').sort((a, b) => Number(b.created) - Number(a.created))
             .map((i) => ({
             title: day(i.created), detail: money(i.amount_due ?? i.total, i.currency), badge: String(i.status ?? '').replace(/^./, (c) => c.toUpperCase()),
-            ...(i.status === 'open' && i.collection_method !== 'send_invoice' ? { actions: [{ label: 'Pay', action: `/p/session/${id}/pay`, fields: { invoice: String(i.id) }, tone: 'primary' }] } : {}),
+            ...(i.status === 'open' && i.collection_method !== 'send_invoice' ? { actions: [{ label: 'Pay', action: `${ctx.publicBase}/p/session/${id}/pay`, fields: { invoice: String(i.id) }, tone: 'primary' }] } : {}),
         }))
         : [];
     const back = typeof session.return_url === 'string' ? session.return_url : undefined;
@@ -95,7 +95,7 @@ function page(ctx, id, session, problem) {
         title: 'Billing',
         css: [PORTAL_CSS, SKIN],
         ...(problem ? { status: 402 } : {}),
-        body: (_jsx(Portal, { merchant: merchant, ...(problem ? { notice: problem.error } : {}), ...(features.paymentMethod ? { forms: [{ heading: pm ? 'Update payment method' : 'Add payment method', action: `/p/session/${id}/payment_method`, fields: cardFields, submit: { label: pm ? 'Update' : 'Add' } }] } : {}), ...(back ? { back: { href: back, label: `← Return to ${merchant}` } } : {}), sections: [
+        body: (_jsx(Portal, { merchant: merchant, ...(problem ? { notice: problem.error } : {}), ...(features.paymentMethod ? { forms: [{ heading: pm ? 'Update payment method' : 'Add payment method', action: `${ctx.publicBase}/p/session/${id}/payment_method`, fields: cardFields, submit: { label: pm ? 'Update' : 'Add' } }] } : {}), ...(back ? { back: { href: back, label: `← Return to ${merchant}` } } : {}), sections: [
                 { heading: 'Current plan', items: plans, empty: 'You have no active plans.' },
                 { heading: 'Payment method', items: methods, empty: 'No payment method on file.' },
                 { heading: 'Billing information', items: details },
@@ -108,7 +108,7 @@ async function move(ctx, id, session, subscription, kind) {
     const sub = resourceView(ctx, SUB, subscription);
     if (!sub || sub.customer !== session.customer || sub.status === 'canceled')
         return gone();
-    const back = new Response(null, { status: 303, headers: { location: `/p/session/${id}` } });
+    const back = new Response(null, { status: 303, headers: { location: `${ctx.publicBase}/p/session/${id}` } });
     if (kind === 'renew') {
         await ctx.write(SUB, subscription, { cancel_at_period_end: false, cancel_at: null, canceled_at: null, cancellation_details: { comment: null, feedback: null, reason: null } }, 'subscription.update');
         return back;
@@ -149,7 +149,7 @@ async function updatePaymentMethod(ctx, id, session, v) {
     for (const sub of ctx.rows(SUB).map((s) => ctx.expand(SUB, s)).filter((s) => s.customer === customer && s.status !== 'canceled' && s.status !== 'incomplete_expired')) {
         await ctx.write(SUB, String(sub.id), { default_payment_method: pm.id }, 'subscription.update');
     }
-    return new Response(null, { status: 303, headers: { location: `/p/session/${id}` } });
+    return new Response(null, { status: 303, headers: { location: `${ctx.publicBase}/p/session/${id}` } });
 }
 /** The customer pays one of their open invoices with the card on file. */
 async function payInvoice(ctx, id, session, invoiceId) {
@@ -164,7 +164,7 @@ async function payInvoice(ctx, id, session, invoiceId) {
     const declined = await payOpenInvoice(ctx, invoiceId, pm);
     if (declined)
         return page(ctx, id, session, { error: declined.message, values: {} });
-    return new Response(null, { status: 303, headers: { location: `/p/session/${id}` } });
+    return new Response(null, { status: 303, headers: { location: `${ctx.publicBase}/p/session/${id}` } });
 }
 /** billing.stripe.com's portal pages, or undefined for any other request. */
 export async function screen(ctx) {

package/dist/src/screens/checkout.js

@@ -66,7 +66,7 @@ function customerEmailOf(session) {
     const email = session._customer?.email;
     return typeof email === 'string' && EMAIL.test(email) ? email : undefined;
 }
-function page(session, id, now, values = {}, error) {
+function page(publicBase, session, id, now, values = {}, error) {
     const lines = ((session.line_items?.data) ?? []).map((item) => ({
         name: String(item.description ?? 'Item'),
         amount: money(item.amount_total, item.currency ?? session.currency),
@@ -95,7 +95,7 @@ function page(session, id, now, values = {}, error) {
         title: 'Checkout',
         css: [PAYMENT_CSS, SKIN],
         status: error ? 402 : 200,
-        body: (_jsx(Payment, { merchant: merchant, lines: lines, ...(trialText ? { total: trialText.lead, note: trialText.note } : session.amount_total !== null && session.amount_total !== undefined ? { total: { label: mode === 'subscription' ? 'Subscribe' : `Pay ${merchant}`, amount: money(session.amount_total, session.currency) } } : {}), action: `/c/pay/${id}`, sections: [{ heading: 'Contact information', fields: contact }, { heading: 'Payment method', fields: card }], submit: { label: submit, testId: 'hosted-payment-submit-button' }, ...(typeof session.cancel_url === 'string' ? { back: { href: session.cancel_url, label: '← Back' } } : {}), ...(error ? { error } : {}) })),
+        body: (_jsx(Payment, { merchant: merchant, lines: lines, ...(trialText ? { total: trialText.lead, note: trialText.note } : session.amount_total !== null && session.amount_total !== undefined ? { total: { label: mode === 'subscription' ? 'Subscribe' : `Pay ${merchant}`, amount: money(session.amount_total, session.currency) } } : {}), action: `${publicBase}/c/pay/${id}`, sections: [{ heading: 'Contact information', fields: contact }, { heading: 'Payment method', fields: card }], submit: { label: submit, testId: 'hosted-payment-submit-button' }, ...(typeof session.cancel_url === 'string' ? { back: { href: session.cancel_url, label: '← Back' } } : {}), ...(error ? { error } : {}) })),
     });
 }
 const gone = () => flowPage({ title: 'Checkout', status: 404, css: [PAYMENT_CSS, SKIN], body: _jsx("main", { className: "pay-form", children: _jsx("h1", { children: "This Checkout Session is no longer active." }) }) });
@@ -104,14 +104,14 @@ async function pay(ctx, id, session, v) {
     const email = onFile ?? (typeof session.customer_email === 'string' ? session.customer_email : (v.email ?? '').trim());
     if (session.mode !== 'setup' || !session.customer) {
         if (!EMAIL.test(email))
-            return page(session, id, nowUnix(ctx.occurredAt), v, 'Your email address is incomplete.');
+            return page(ctx.publicBase, session, id, nowUnix(ctx.occurredAt), v, 'Your email address is incomplete.');
     }
     // a trial charges nothing now unless a one-time price is on the first invoice
     const oneTimeDue = ((session.line_items?.data) ?? []).some((it, i) => isOneTime(it, inlineOf(session, i)));
     const chargesNow = session.mode === 'payment' || (session.mode === 'subscription' && (!trialOf(session, nowUnix(ctx.occurredAt)) || oneTimeDue));
     const refused = cardAnswer(v, nowUnix(ctx.occurredAt), chargesNow);
     if (refused)
-        return page(session, id, nowUnix(ctx.occurredAt), v, refused);
+        return page(ctx.publicBase, session, id, nowUnix(ctx.occurredAt), v, refused);
     let existing = session;
     // Checkout always makes a customer for a subscription; a payment makes one only when the session asks
     if (!session.customer && (session.mode === 'subscription' || session.customer_creation === 'always')) {
@@ -162,5 +162,5 @@ export async function screen(ctx) {
     const stored = ctx.row(CS, id) ?? {};
     const coupon = stored._discount?.coupon;
     const full = { ...session, _subscription_data: stored._subscription_data, _price_data: stored._price_data, _merchant: merchantOf(ctx, stored), _coupon: typeof coupon === 'string' ? ctx.get('coupon', coupon) : undefined, _customer: typeof session.customer === 'string' ? ctx.get('customer', session.customer) : undefined };
-    return request.method === 'GET' ? page(full, id, nowUnix(ctx.occurredAt)) : pay(ctx, id, full, values);
+    return request.method === 'GET' ? page(ctx.publicBase, full, id, nowUnix(ctx.occurredAt)) : pay(ctx, id, full, values);
 }

package/dist/src/screens/connect-onboarding.d.ts

@@ -1,3 +1,3 @@
-import type { HandlerContext } from '@volter/world-core';
+import { type HandlerContext } from '@volter/world-core';
 /** connect.stripe.com's onboarding pages, or undefined for any other request. */
 export declare function screen(ctx: HandlerContext): Promise<Response>;

package/dist/src/screens/connect-onboarding.js

@@ -1,4 +1,31 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// STRIPE CONNECT HOSTED ONBOARDING — a hosted flow (docs/contributing/architecture.md, "Screens"): a platform
+// creates an Account Link for a connected account and sends the account's owner to its `url`. The link is a
+// single-use entry point: visiting it takes the owner to their onboarding session, and visiting it again, or after it
+// expires, sends them to refresh_url, where the platform makes a new one (docs.stripe.com/connect/hosted-onboarding).
+// At the session's own address they give Stripe what it requires, and Stripe sends them to return_url. Submitting is
+// the owner's move, not an API call. Authored from @volter/world-ui's payment piece and Stripe's published visual
+// example; the form moves through one section at a time, retaining answers until the final submit.
+//
+// The page asks for exactly what Stripe requires before a US Express account with card_payments and transfers can
+// take card payments (docs.stripe.com/connect/required-verification-information; the set is the one Stripe's
+// requirements endpoint answers, docs.stripe.com/_endpoint/get-requirements-for-setups with apiVersion=v1,
+// platformCountry=US, accountCountry=US, dashboardType=express, tosType=full, capabilities card_payments and transfers):
+// thirty requirements for a company (the business profile, the statement descriptor, the company with its tax id,
+// phone and address, its owners, its representative with their title and address, the agreement and the payout bank
+// account) and eighteen for an individual. A submit that leaves any out is refused with what is missing. The account's
+// requirements.currently_due lists what is still missing, and charges and payouts are enabled, and its requested
+// capabilities become active (Stripe's move on the capability machine), only once none is. The agreement is the
+// page's own checkbox, recorded as tos_acceptance with the request's address and the time.
+//
+// Where the documentation stops and the twin decides: only these two US sets are modelled; an account elsewhere, or
+// of another business type, is told its requirements are not modelled. Test mode verifies at once whatever is
+// submitted (docs.stripe.com/connect/testing lists the values that pass: date of birth 1901-01-01, SSN last four
+// 0000, tax id 000000000, routing 110000000, account 000123456789); the industries offered are Stripe's supported
+// merchant category codes as its list gives them (./industries.ts), and an industry the page does not offer leaves
+// business_profile.mcc due; the states are the fifty and the District of Columbia; a request with no forwarded address
+// records 127.0.0.1. An update link (account_update) shows the same page.
+import { twinVendorUrl } from '@volter/world-core';
 import { CONSENT_CSS, flowPage, Payment, PAYMENT_CSS } from '@volter/world-ui';
 import { nowUnix } from "../engine/stripe.js";
 import { formOf, notFound, seeOther, STRIPE_CONSENT_SKIN } from "./shared.js";
@@ -58,9 +85,9 @@ function page(ctx, sessionUrl, link, kind, values = {}, error) {
         : [{ heading: 'Business details', fields: business }, { heading: 'About you', fields: person }, { heading: 'Payout account', fields: payout }, { heading: 'Agreement', fields: agreement }];
     return flowPage({
         title: 'Stripe · Account onboarding',
-        css: [PAYMENT_CSS],
+        css: [ONBOARDING_CSS],
         ...(error ? { status: 400 } : {}),
-        body: (_jsx(Payment, { merchant: `Verify your ${kind === 'company' ? 'company' : 'business'} with Stripe · ${String(link.account)} · test mode`, lines: [], action: sessionUrl, sections: sections, submit: { label: 'Submit' }, back: { href: String(link.return_url), label: '← Return to platform' }, ...(error ? { error } : {}) })),
+        body: (_jsx(ConnectOnboarding, { merchant: "Stripe", account: String(link.account), checked: ['owners_provided', 'tos'].filter(name => v[name] === (name === 'tos' ? 'accepted' : 'provided')), lines: sections.map(section => ({ name: section.heading, amount: '' })), action: sessionUrl, sections: sections, submit: { label: 'Submit' }, back: { href: String(link.return_url), label: '← Return to platform' }, ...(error ? { error } : {}) })),
     });
 }
 /** An account whose requirements the twin does not model: outside the US, or of another business type. */
@@ -124,7 +151,7 @@ async function visit(ctx, id) {
         return seeOther(String(link.refresh_url));
     const session = `onbs_${id.replace(/^acctlink_/, '')}`;
     await ctx.write(LINK, id, { used: true, _session: session }, 'account_link.used');
-    return seeOther(`${SESSIONS}${session}`);
+    return seeOther(twinVendorUrl(ctx.call.request, `${SESSIONS}${session}`));
 }
 /** connect.stripe.com's onboarding pages, or undefined for any other request. */
 export async function screen(ctx) {
@@ -143,7 +170,7 @@ export async function screen(ctx) {
     const link = stored ? ctx.get(LINK, String(stored.id)) : undefined;
     if (!stored || !link)
         return gone();
-    const sessionUrl = `${SESSIONS}${sid}`;
+    const sessionUrl = twinVendorUrl(request, `${SESSIONS}${sid}`);
     const account = ctx.get('account', String(link.account)) ?? {};
     const kind = kindOf(account);
     if (!kind)
@@ -157,3 +184,50 @@ export async function screen(ctx) {
     await submit(ctx, link, kind, form, request.headers.get('x-forwarded-for')?.split(',')[0]?.trim() || '127.0.0.1');
     return seeOther(String(link.return_url));
 }
+// Visual reference: Stripe's own hosted onboarding example, read 2026-10-08:
+// https://docs.stripe.com/connect/hosted-onboarding
+// hosted_onboarding_form.e59ba8300f563e43489953f06127f52c.png. Platform branding
+// in that example is configurable; this twin uses its existing Stripe skin.
+const ONBOARDING_CSS = PAYMENT_CSS + `
+*{box-sizing:border-box}body{color:#30313d;background:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
+.pay{grid-template-columns:minmax(280px,40%) minmax(0,60%)}.pay-summary{background:#f7f7f9;padding:48px max(32px,calc((100vw - 1000px)/2));padding-right:40px;position:relative}
+.pay-back{color:#596171;font-size:13px;margin-bottom:40px}.pay-merchant{color:#635bff;font-size:30px;font-weight:700;letter-spacing:-1px;margin-bottom:32px}
+.pay-lines{counter-reset:step;max-width:280px}.pay-line{counter-increment:step;display:block;position:relative;padding:12px 0 12px 38px;color:#687385;font-size:14px}
+.pay-line::before{content:counter(step);position:absolute;left:0;top:11px;width:24px;height:24px;line-height:22px;text-align:center;border:1px solid #d8dee4;border-radius:50%;background:#fff;font-size:12px}
+.pay-line[aria-current=step]{color:#30313d;font-weight:600}.pay-line[aria-current=step]::before{border-color:#635bff;color:#635bff}.pay-line.is-complete::before{background:#635bff;border-color:#635bff;color:#fff}
+.pay-form{padding:56px 48px;max-width:620px;width:100%}.pay-section legend{font-size:26px;letter-spacing:-.6px;font-weight:600;margin-bottom:24px}.pay-field{margin-bottom:22px}
+.pay-field span{font-size:14px;margin-bottom:8px;font-weight:500}.pay-field input,.pay-field select{background:#fff;border-color:#d8dee4;border-radius:6px;padding:10px 12px;box-shadow:0 1px 2px #00000005;color:#30313d}
+.pay-field input:focus,.pay-field select:focus{outline:2px solid #a5a0ff;outline-offset:1px}
+.pay-field:has(input[type=checkbox]){display:flex;align-items:flex-start;gap:10px}.pay-field:has(input[type=checkbox]) span{order:2;font-weight:400}.pay-field input[type=checkbox]{width:16px;height:16px;flex:none;margin-top:3px;accent-color:#635bff}
+.pay-submit,.connect-next{background:#635bff;color:#fff;border:0;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;padding:12px 16px}
+.connect-actions{display:flex;justify-content:space-between;gap:16px;margin-top:32px}.connect-back{color:#596171;background:transparent;border:0;cursor:pointer;padding:12px 0;font:inherit}.connect-next{min-width:140px;flex:1}
+.pay-error{border:1px solid #f1c2c2;padding:12px;border-radius:6px;color:#b52e2e;background:#fff7f7;font-size:13px;white-space:normal;overflow-wrap:anywhere}
+.connect-progress{height:3px;background:#ececf1;margin:0 0 36px;border-radius:2px;overflow:hidden}.connect-progress div{height:100%;background:#635bff;transition:width .15s}
+.connect-context{position:absolute;bottom:40px;left:32px;color:#687385;font-size:12px}.connect-context strong{display:block;font-weight:500;color:#30313d}
+.connect-ready .pay-section[hidden],.connect-ready .pay-submit[hidden],.connect-actions [hidden]{display:none}
+@media(max-width:800px){.pay{grid-template-columns:1fr}.pay-summary{padding:24px}.pay-back{margin-bottom:20px}.pay-merchant{font-size:24px;margin-bottom:0}.pay-lines{display:none}.connect-context{position:static;padding:0 24px;background:#f7f7f9}.pay-form{padding:32px 24px;max-width:100%}.pay-section legend{font-size:24px}}
+`;
+// Progressive enhancement only: Back/Continue move through the existing form.
+// No account state is written until its existing Submit operation succeeds.
+const STEPS = `(function(){
+var root=document.querySelector('.connect-onboarding'),form=root.querySelector('form'),groups=Array.from(form.querySelectorAll('.pay-section')),items=Array.from(root.querySelectorAll('.pay-line')),submit=form.querySelector('.pay-submit');
+var progress=document.createElement('div');progress.className='connect-progress';progress.setAttribute('role','progressbar');progress.setAttribute('aria-label','Onboarding progress');progress.setAttribute('aria-valuemin','0');progress.setAttribute('aria-valuemax',String(groups.length));
+var bar=document.createElement('div');progress.append(bar);form.before(progress);
+var controls=document.createElement('div');controls.className='connect-actions';
+var back=document.createElement('button');back.type='button';back.className='connect-back';back.textContent='Back';
+var next=document.createElement('button');next.type='button';next.className='connect-next';next.textContent='Continue';
+controls.append(back,next);form.append(controls);
+var checked=JSON.parse(root.getAttribute('data-checked-fields')||'[]');
+groups.forEach(function(group){group.querySelectorAll('input,select').forEach(function(input){input.required=true;if(input.type==='checkbox')input.checked=checked.includes(input.name);if(input.name==='ssn_last_4'){input.pattern='[0-9]{4}';input.inputMode='numeric';input.maxLength=4;}});});
+var index=0;
+function show(i){index=i;groups.forEach(function(group,n){group.hidden=n!==i;});items.forEach(function(item,n){if(n===i)item.setAttribute('aria-current','step');else item.removeAttribute('aria-current');item.classList.toggle('is-complete',n<i);});back.hidden=i===0;next.hidden=i===groups.length-1;submit.hidden=i!==groups.length-1;bar.style.width=((i+1)/groups.length*100)+'%';progress.setAttribute('aria-valuenow',String(i+1));progress.setAttribute('aria-valuetext',groups[i].querySelector('legend').textContent);root.classList.add('connect-ready');}
+function invalid(group){return Array.from(group.querySelectorAll('input,select')).find(function(input){return !input.checkValidity();});}
+back.addEventListener('click',function(){show(index-1);});
+next.addEventListener('click',function(){var field=invalid(groups[index]);if(field){field.reportValidity();return;}show(index+1);groups[index].querySelector('input,select')?.focus();});
+form.noValidate=true;
+form.addEventListener('submit',function(event){for(var i=0;i<groups.length;i++){var field=invalid(groups[i]);if(field){event.preventDefault();show(i);field.reportValidity();return;}}});
+if(form.querySelector('.pay-error')){var first=groups.findIndex(function(group){return invalid(group);});show(first<0?groups.length-1:first);}else show(0);
+})();`;
+function ConnectOnboarding(props) {
+    return _jsxs("div", { className: "connect-onboarding", "data-checked-fields": JSON.stringify(props.checked), children: [_jsx(Payment, { ...props }), _jsxs("div", { className: "connect-context", children: [_jsx("strong", { children: "Test mode" }), props.account] }), _jsx("script", { dangerouslySetInnerHTML: { __html: STEPS } })] });
+}

package/dist/src/screens/dashboard.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { flowPage } from '@volter/world-ui';
 import { VL } from "../engine/radar.js";
 import { nowUnix } from "../engine/stripe.js";
@@ -13,8 +13,32 @@ const PUBLIC_DETAILS_PATH = '/settings/public';
 const MAX_NAME = 5000;
 const DETAILS_CSS = `
 * { box-sizing: border-box; }
-body { margin: 0; background: #f6f8fa; color: #1a1f36; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif; font-size: 14px; }
-.pd { max-width: 640px; margin: 48px auto; padding: 0 16px; }
+body { margin: 0; background: #ffffff; color: #1a1f36; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif; font-size: 14px; line-height: 1.5; }
+button,input,select { font: inherit; }
+button,a,input,select { outline-offset: 3px; }
+button { cursor: pointer; }
+button:disabled { cursor: default; color: #697386; }
+a { color: #635bff; text-decoration: none; }
+.sd { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0,1fr); }
+.sd-side { background: #f6f8fa; border-right: 1px solid #e3e8ee; padding: 20px 14px; }
+.sd-account { font-weight: 600; padding: 6px 10px 20px; overflow-wrap: anywhere; }
+.sd-mode { display: block; width: fit-content; font-size: 11px; font-weight: 500; background: #e3e8ee; border-radius: 4px; margin-top: 8px; padding: 2px 7px; }
+.sd-nav { display: grid; gap: 3px; }
+.sd-nav a,.sd-nav button { display: block; text-align: left; padding: 7px 10px; font: inherit; border: 0; border-radius: 6px; background: none; color: #697386; }
+.sd-nav a { color: #1a1f36; }
+.sd-nav a:hover { background: #e3e8ee; }
+.sd-nav [aria-current=page] { color: #635bff; background: #ffffff; font-weight: 600; }
+.sd-nav-title { margin: 23px 10px 7px; font-size: 12px; font-weight: 600; color: #697386; }
+.sd-body { min-width: 0; }
+.sd-top { min-height: 64px; border-bottom: 1px solid #e3e8ee; padding: 14px 32px; display: flex; align-items: center; gap: 16px; }
+.sd-search { width: min(520px,100%); border: 1px solid #e3e8ee; border-radius: 7px; padding: 7px 12px; background: #f6f8fa; }
+.sd-top a { margin-left: auto; }
+.sd-top button { border: 0; background: none; }
+.sd-content { padding: 28px 40px 60px; max-width: 1280px; }
+.sd-crumbs { color: #697386; font-size: 13px; display: flex; gap: 10px; margin-bottom: 18px; }
+.sd-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e3e8ee; padding-bottom: 20px; margin-bottom: 28px; }
+.sd-title h1 { font-size: 28px; margin: 0; letter-spacing: -.5px; }
+.pd { max-width: 860px; }
 .pd h1 { font-size: 28px; margin: 16px 0 4px; }
 .pd-lead { color: #697386; margin: 0 0 24px; }
 .pd-card { background: #ffffff; border: 1px solid #e3e8ee; border-radius: 8px; padding: 24px; }
@@ -22,19 +46,38 @@ body { margin: 0; background: #f6f8fa; color: #1a1f36; font-family: -apple-syste
 .pd-card small { display: block; color: #697386; margin-bottom: 8px; }
 .pd-card input { width: 100%; padding: 8px 10px; border: 1px solid #c1c9d2; border-radius: 6px; font: inherit; }
 .pd-actions { margin-top: 20px; display: flex; justify-content: flex-end; }
-.pd-actions button { background: #635bff; color: #ffffff; border: 0; border-radius: 6px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; }
+.sd-primary,.pd-actions button { background: #635bff; color: #ffffff; border: 0; border-radius: 6px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; }
 .pd-notice { padding: 10px 12px; border-radius: 6px; margin-bottom: 16px; }
 .pd-error { background: #fff0f3; color: #df1b41; }
 .pd-saved { background: #e7f8ef; color: #0e6245; }
+.sd-table { border-collapse: collapse; width: 100%; }
+.sd-table th,.sd-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #e3e8ee; }
+.sd-table th { font-size: 12px; font-weight: 600; color: #697386; background: #f6f8fa; }
+.sd-empty { color: #697386; padding: 40px; text-align: center; }
+.sd-code { font-family: ui-monospace,SFMono-Regular,monospace; font-size: 12px; }
+.sd-dialog { width: min(480px,calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid #e3e8ee; border-radius: 8px; padding: 24px; color: #1a1f36; }
+.sd-dialog::backdrop { background: rgba(26,31,54,.4); }
+.sd-dialog h2 { font-size: 20px; margin: 0 0 20px; }
+.sd-dialog label { display: block; font-weight: 600; margin: 14px 0; }
+.sd-dialog input,.sd-dialog select { display: block; width: 100%; margin-top: 6px; border: 1px solid #c1c9d2; border-radius: 6px; padding: 8px 10px; background: #ffffff; }
+.sd-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
+.sd-cancel { border: 1px solid #c1c9d2; border-radius: 6px; padding: 8px 16px; background: #ffffff; color: #1a1f36; }
+@media(max-width:760px) { .sd { grid-template-columns: 160px minmax(0,1fr); } .sd-content { padding: 24px 20px; } .sd-top { padding: 14px 20px; } .sd-top button { display: none; } .sd-table { font-size: 12px; } }
+@media(max-width:520px) { .sd { display: block; } .sd-side { border-right: 0; border-bottom: 1px solid #e3e8ee; padding: 10px 16px; } .sd-account { padding: 0 0 8px; } .sd-mode { display: inline; margin-left: 8px; } .sd-nav { display: flex; flex-wrap: wrap; } .sd-nav button,.sd-nav-title { display: none; } .sd-content { padding: 20px 16px; } .sd-title h1 { font-size: 24px; } .sd-top { padding: 12px 16px; } }
 `;
-function detailsPage(account, opts = {}) {
+/** The documented dashboard navigation around only the operator pages this pack already serves. */
+function dashboardPage(ctx, opts) {
+    const account = ctx.get('account', PLATFORM_ACCOUNT_ID);
+    const links = [['Public details', PUBLIC_DETAILS_PATH], ['Radar lists', '/radar/lists'], ['Issuing balance', '/test/issuing/balance']];
+    return flowPage({ title: `${opts.title} – Stripe`, css: [DETAILS_CSS], status: opts.status ?? 200, body: _jsxs("div", { className: "sd", children: [_jsxs("aside", { className: "sd-side", children: [_jsxs("div", { className: "sd-account", children: [publicBusinessName(account), _jsx("span", { className: "sd-mode", children: "Test mode" })] }), _jsxs("nav", { className: "sd-nav", "aria-label": "Dashboard", children: [['Home', 'Balances', 'Transactions', 'Customers', 'Product catalog'].map(label => _jsx("button", { type: "button", disabled: true, title: "Not available in this twin's Dashboard", children: label }, label)), _jsx("p", { className: "sd-nav-title", children: "Shortcuts" }), links.map(([label, path]) => _jsx("a", { href: `${ctx.publicBase}${path}`, "aria-current": opts.path === path ? 'page' : undefined, children: label }, path)), _jsx("p", { className: "sd-nav-title", children: "Products" }), ['Payments', 'Billing', 'Reporting', 'Connect', 'More'].map(label => _jsx("button", { type: "button", disabled: true, title: "Not available in this twin's Dashboard", children: label }, label))] })] }), _jsxs("div", { className: "sd-body", children: [_jsxs("header", { className: "sd-top", children: [_jsx("input", { className: "sd-search", "aria-label": "Search Dashboard", placeholder: "Search", disabled: true, title: "Dashboard search is not available in this twin" }), _jsx("button", { type: "button", disabled: true, title: "Not available in this twin's Dashboard", children: "Create" }), _jsx("button", { type: "button", disabled: true, children: "Help" }), _jsx("a", { href: `${ctx.publicBase}${PUBLIC_DETAILS_PATH}`, children: "Settings" })] }), _jsxs("main", { className: "sd-content", children: [_jsxs("nav", { className: "sd-crumbs", "aria-label": "Breadcrumb", children: [_jsx("span", { children: opts.section }), _jsx("span", { "aria-hidden": "true", children: "/" }), _jsx("span", { children: opts.title })] }), _jsxs("div", { className: "sd-title", children: [_jsx("h1", { children: opts.title }), opts.action] }), opts.body] })] }), _jsx("script", { dangerouslySetInnerHTML: { __html: "document.querySelectorAll('[data-open-dialog]').forEach(b=>b.addEventListener('click',()=>document.getElementById(b.dataset.openDialog).showModal()));document.querySelectorAll('[data-close-dialog]').forEach(b=>b.addEventListener('click',()=>b.closest('dialog').close()));" } })] }) });
+}
+function detailsPage(ctx, account, opts = {}) {
     const named = account?.business_profile?.name;
     const value = opts.value ?? (typeof named === 'string' ? named : '');
-    return flowPage({
-        title: 'Public details – Stripe',
-        css: [DETAILS_CSS],
+    return dashboardPage(ctx, {
+        title: 'Public details', section: 'Settings / Business', path: PUBLIC_DETAILS_PATH,
         ...(opts.error ? { status: 400 } : {}),
-        body: (_jsxs("main", { className: "pd", children: [_jsx("h1", { children: "Public details" }), _jsxs("p", { className: "pd-lead", children: ["What your customers see on Checkout, the customer portal, receipts and invoices. Currently shown: ", _jsx("strong", { "data-testid": "public-business-name", children: publicBusinessName(account) })] }), opts.error ? _jsx("p", { className: "pd-notice pd-error", role: "alert", children: opts.error }) : null, opts.saved ? _jsx("p", { className: "pd-notice pd-saved", role: "status", children: "Your public details were saved." }) : null, _jsxs("form", { className: "pd-card", method: "post", children: [_jsx("label", { htmlFor: "business_name", children: "Business name" }), _jsx("small", { children: "The name customers see when they pay you." }), _jsx("input", { id: "business_name", name: "business_name", autoComplete: "organization", defaultValue: value, required: true, maxLength: MAX_NAME }), _jsx("div", { className: "pd-actions", children: _jsx("button", { type: "submit", children: "Save" }) })] })] })),
+        body: (_jsxs("div", { className: "pd", children: [_jsxs("p", { className: "pd-lead", children: ["What your customers see on Checkout, the customer portal, receipts and invoices. Currently shown: ", _jsx("strong", { "data-testid": "public-business-name", children: publicBusinessName(account) })] }), opts.error ? _jsx("p", { className: "pd-notice pd-error", role: "alert", children: opts.error }) : null, opts.saved ? _jsx("p", { className: "pd-notice pd-saved", role: "status", children: "Your public details were saved." }) : null, _jsxs("form", { className: "pd-card", method: "post", children: [_jsx("label", { htmlFor: "business_name", children: "Business name" }), _jsx("small", { children: "The name customers see when they pay you." }), _jsx("input", { id: "business_name", name: "business_name", autoComplete: "organization", defaultValue: value, required: true, maxLength: MAX_NAME }), _jsx("div", { className: "pd-actions", children: _jsx("button", { type: "submit", children: "Save" }) })] })] })),
     });
 }
 /** Save the business name on the platform's own account: the stored record, made from Stripe's default the first
@@ -55,11 +98,11 @@ async function publicDetails(ctx) {
         return notFound();
     const form = request.method === 'POST' ? await formOf(request.clone()) : {};
     if (request.method === 'GET')
-        return detailsPage(ctx.get('account', PLATFORM_ACCOUNT_ID), { saved: url.searchParams.has('saved') });
+        return detailsPage(ctx, ctx.get('account', PLATFORM_ACCOUNT_ID), { saved: url.searchParams.has('saved') });
     const name = (form.business_name ?? '').trim();
     const refused = nameRefused(name);
     if (refused)
-        return detailsPage(ctx.get('account', PLATFORM_ACCOUNT_ID), { value: form.business_name ?? '', error: refused });
+        return detailsPage(ctx, ctx.get('account', PLATFORM_ACCOUNT_ID), { value: form.business_name ?? '', error: refused });
     await save(ctx, name);
     // a query-only reference: the page's own path, wherever it is mounted and with or without its trailing slash
     return new Response(null, { status: 303, headers: { location: '?saved=1' } });
@@ -67,9 +110,8 @@ async function publicDetails(ctx) {
 /** Dashboard settings, Radar list creation and test Issuing funding; other pages answer Stripe's 404. */
 export async function screen(ctx) {
     const path = new URL(ctx.call.request.url).pathname.replace(/\/+$/, '');
-    // The twin's declared workspace entry opens its implemented Public details page; this authored choice does not
-    // reproduce Stripe's Dashboard home. The request's public base retains the World mount when the console frames it.
-    if (path === '' && ['GET', 'HEAD'].includes(ctx.call.request.method))
+    // The declared workspace opens a served setting, not a fabricated analytics home.
+    if (!path && ctx.call.request.method === 'GET')
         return redirect(`${ctx.publicBase}${PUBLIC_DETAILS_PATH}`);
     // source: https://docs.stripe.com/radar/lists "Use the Dashboard or the API to create lists."
     // source: https://docs.stripe.com/radar/lists "Enter a name for the list"
@@ -93,9 +135,14 @@ export async function screen(ctx) {
                 list_items: { object: 'list', data: [], has_more: false, url: '/v1/radar/value_list_items' },
             });
             await ctx.write(VL, String(list.id), { list_items: { object: 'list', data: [], has_more: false, url: `/v1/radar/value_list_items?value_list=${list.id}` } }, 'radar.value_list.updated');
-            return redirect(`/radar/lists/${list.id}`);
+            return redirect(`${ctx.publicBase}/radar/lists/${list.id}`);
         }
-        return flowPage({ css: [], title: 'Lists – Radar – Stripe', body: _jsxs("main", { children: [_jsx("h1", { children: "Radar Lists" }), _jsxs("form", { method: "post", action: "/radar/lists", children: [_jsx("h2", { children: "New list" }), _jsxs("label", { children: ["Name", _jsx("input", { name: "name", required: true })] }), _jsxs("label", { children: ["Alias", _jsx("input", { name: "alias" })] }), _jsxs("label", { children: ["List type", _jsxs("select", { name: "item_type", children: [_jsx("option", { value: "customer_id", children: "Customer ID" }), _jsx("option", { value: "email", children: "Email" }), _jsx("option", { value: "card_fingerprint", children: "Card fingerprint" }), _jsx("option", { value: "ip_address", children: "IP address" }), _jsx("option", { value: "string", children: "String" })] })] }), _jsx("button", { children: "Add" })] }), _jsx("ul", { children: ctx.rows(VL).map(row => _jsxs("li", { children: [String(row.name), " (", String(row.alias), ")"] }, String(row.id))) })] }) });
+        const lists = ctx.rows(VL);
+        const types = [['customer_id', 'Customer ID'], ['email', 'Email'], ['card_fingerprint', 'Card fingerprint'], ['card_bin', 'Card BIN'], ['ip_address', 'IP address'], ['string', 'String'], ['case_sensitive_string', 'Case-sensitive string'], ['country', 'Country'], ['sepa_debit_fingerprint', 'SEPA Direct Debit fingerprint'], ['us_bank_account_fingerprint', 'ACH Direct Debit fingerprint']];
+        const selected = lists.find(row => path === `/radar/lists/${row.id}`);
+        return dashboardPage(ctx, { title: selected ? String(selected.name) : 'Lists', section: 'Payments / Radar', path: '/radar/lists',
+            action: _jsx("button", { className: "sd-primary", type: "button", "data-open-dialog": "radar-new-list", children: "New list" }),
+            body: _jsxs(_Fragment, { children: [selected ? _jsxs("div", { className: "pd-card", children: [_jsx("a", { href: `${ctx.publicBase}/radar/lists`, children: "All lists" }), _jsx("h2", { children: String(selected.name) }), _jsxs("p", { children: ["Alias: ", _jsx("code", { children: String(selected.alias) })] }), _jsxs("p", { children: ["List type: ", types.find(([key]) => key === selected.item_type)?.[1] ?? String(selected.item_type)] })] }) : null, _jsx("p", { className: "pd-lead", children: "Lists of information to block, allow or review matching payments." }), _jsxs("table", { className: "sd-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Name" }), _jsx("th", { scope: "col", children: "Alias" }), _jsx("th", { scope: "col", children: "List type" })] }) }), _jsx("tbody", { children: lists.map(row => _jsxs("tr", { children: [_jsx("td", { children: _jsx("a", { href: `${ctx.publicBase}/radar/lists/${encodeURIComponent(String(row.id))}`, children: String(row.name) }) }), _jsx("td", { className: "sd-code", children: String(row.alias) }), _jsx("td", { children: types.find(([key]) => key === row.item_type)?.[1] ?? String(row.item_type) })] }, String(row.id))) })] }), !lists.length ? _jsx("p", { className: "sd-empty", children: "No lists yet. Create a list to group related values." }) : null, _jsxs("dialog", { className: "sd-dialog", id: "radar-new-list", "aria-labelledby": "radar-new-list-title", children: [_jsx("h2", { id: "radar-new-list-title", children: "New list" }), _jsxs("form", { method: "post", action: `${ctx.publicBase}/radar/lists`, children: [_jsx("label", { htmlFor: "radar-list-name", children: "Name" }), _jsx("input", { id: "radar-list-name", name: "name", required: true }), _jsx("label", { htmlFor: "radar-list-alias", children: "Alias" }), _jsx("input", { id: "radar-list-alias", name: "alias" }), _jsx("p", { className: "pd-lead", children: "Leave blank to generate an alias from the name." }), _jsx("label", { htmlFor: "radar-list-type", children: "List type" }), _jsx("select", { id: "radar-list-type", name: "item_type", children: types.map(([value, label]) => _jsx("option", { value: value, children: label }, value)) }), _jsxs("div", { className: "sd-dialog-actions", children: [_jsx("button", { className: "sd-cancel", type: "button", "data-close-dialog": true, children: "Cancel" }), _jsx("button", { className: "sd-primary", type: "submit", children: "Add" })] })] })] })] }) });
     }
     // source: https://docs.stripe.com/issuing/testing "Before you create test transactions, you must add test funds to the Issuing balance on your account."
     // source: https://docs.stripe.com/issuing/testing "You can create test top-ups in the Dashboard, or with the Top-ups API"
@@ -112,9 +159,9 @@ export async function screen(ctx) {
             if (!Number.isInteger(amount) || amount <= 0)
                 return invalid('Enter a positive amount in cents.');
             await created(ctx, 'balance_transaction', {}, { amount, currency: 'usd', fee: 0, net: amount, type: 'topup', reporting_category: 'topup', source: null, status: 'available', balance_type: 'issuing', available_on: Number(nowUnix(ctx.occurredAt)), fee_details: [] });
-            return redirect('/test/issuing/balance');
+            return redirect(`${ctx.publicBase}/test/issuing/balance?funded=1`);
         }
-        return flowPage({ css: [], title: 'Test Issuing balance – Stripe', body: _jsxs("main", { children: [_jsx("h1", { children: "Test Issuing balance" }), _jsxs("form", { method: "post", children: [_jsxs("label", { children: ["Amount", _jsx("input", { name: "amount", type: "number", min: "1", required: true })] }), _jsx("button", { children: "Add test funds" })] })] }) });
+        return dashboardPage(ctx, { title: 'Issuing balance', section: 'Issuing', path: '/test/issuing/balance', body: _jsxs("div", { className: "pd", children: [_jsx("p", { className: "pd-lead", children: "Add test funds before creating test Issuing transactions." }), new URL(ctx.call.request.url).searchParams.has('funded') ? _jsx("p", { className: "pd-notice pd-saved", role: "status", children: "Test funds were added to your Issuing balance." }) : null, _jsxs("form", { className: "pd-card", method: "post", action: `${ctx.publicBase}/test/issuing/balance`, children: [_jsx("label", { htmlFor: "issuing-amount", children: "Amount" }), _jsx("small", { children: "USD cents. These funds belong to this test account." }), _jsx("input", { id: "issuing-amount", name: "amount", type: "number", min: "1", step: "1", required: true }), _jsx("div", { className: "pd-actions", children: _jsx("button", { type: "submit", children: "Add test funds" }) })] })] }) });
     }
     return path === PUBLIC_DETAILS_PATH ? publicDetails(ctx) : notFound();
 }

package/journeys/customer-life.json

@@ -2183,7 +2183,11 @@
       "expect": [
         {
           "path": "",
-          "contains": "Radar Lists"
+          "contains": "Payments / Radar"
+        },
+        {
+          "path": "",
+          "contains": "New list"
         }
       ],
       "evidence": "Stripe: https://docs.stripe.com/radar/lists"
@@ -2690,7 +2694,11 @@
       "expect": [
         {
           "path": "",
-          "contains": "Test Issuing balance"
+          "contains": "Issuing balance"
+        },
+        {
+          "path": "",
+          "contains": "Add test funds before creating test Issuing transactions."
         }
       ],
       "evidence": "Stripe: https://docs.stripe.com/issuing/testing"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volter/twin-stripe",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Local Stripe customer, checkout and billing workflows with synthetic state and the real Stripe SDK. Supported operations and hosted-page limits are documented in the README.",
   "keywords": [
     "twin",

package/spec/SOURCE.md

@@ -16,3 +16,7 @@ The pack serves this document's version (`SERVED_VERSION` in `src/engine/version
   publish (its testing page's cards, the payment lifecycle's states, each reference page's stated rule), each with its
   page's URL and the page's words for what it does, read with twin-standard's `read-page`. **Read by:**
   `bun scripts/vendor-examples.ts stripe`.
+
+Screen references, read 2026-10-08: [Stripe's hosted-onboarding guide](https://docs.stripe.com/connect/hosted-onboarding), its hosted_onboarding_form.e59ba8300f563e43489953f06127f52c.png image, supplies the two-column layout, progress and sequential form. The image's example platform branding is configurable; this screen retains the Stripe skin. Back/Continue keep local form answers; only the existing final submit changes the connected account. The existing US requirements and refusal behavior remain the contract. No upstream page, image or script is shipped.
+
+Dashboard references, read 2026-10-08: [the Web Dashboard guide](https://docs.stripe.com/dashboard/basics) supplies the primary sidebar categories, Shortcuts and Settings. The public [Stripe Apps testing guide](https://docs.stripe.com/stripe-apps/test-app), image `test-app-uninstall.710b89177767cff3a7f53de749558d88.png`, illustrates the earlier horizontal navigation, settings breadcrumbs, form density and type; its publication date is unspecified, and it is not a current Public details screenshot. The authored shell follows the current documented sidebar, while the controls remain the existing public business name, Radar list creation and test Issuing funding. The declared root opens Public details; other Dashboard products are unavailable, and there are no invented analytics. [Radar Lists](https://docs.stripe.com/radar/lists) supplies New, name, alias, type and Add. No upstream image, DOM, script or account sign-in is shipped.

package/src/engine/stripe.ts

@@ -712,6 +712,28 @@ export function disputeEvidence(): Record<string, unknown> {
 type Params = Record<string, unknown>;
 const subParams = (params: Params, k: string): Params => (params[k] && typeof params[k] === 'object' ? (params[k] as Params) : {});
 
+// source: https://docs.stripe.com/testing
+// The documented brand cards keep their brand and funding type when Checkout or the portal saves them.
+// Where the documentation stops and the twin decides: other numbers retain the existing synthetic Visa default.
+const TEST_CARD_PROFILES: Record<string, { brand: string; funding: string }> = {
+  '4000056655665556': { brand: 'visa', funding: 'debit' },
+  '5555555555554444': { brand: 'mastercard', funding: 'credit' },
+  '2223003122003222': { brand: 'mastercard', funding: 'credit' },
+  '5200828282828210': { brand: 'mastercard', funding: 'debit' },
+  '5105105105105100': { brand: 'mastercard', funding: 'prepaid' },
+  '378282246310005': { brand: 'amex', funding: 'credit' },
+  '371449635398431': { brand: 'amex', funding: 'credit' },
+  '6011111111111117': { brand: 'discover', funding: 'credit' },
+  '6011000990139424': { brand: 'discover', funding: 'credit' },
+  '6011981111111113': { brand: 'discover', funding: 'debit' },
+  '3056930009020004': { brand: 'diners', funding: 'credit' },
+  '36227206271667': { brand: 'diners', funding: 'credit' },
+  '3566002020360505': { brand: 'jcb', funding: 'credit' },
+  '6200000000000005': { brand: 'unionpay', funding: 'credit' },
+  '6200000000000047': { brand: 'unionpay', funding: 'debit' },
+  '6205500000000000004': { brand: 'unionpay', funding: 'credit' },
+};
+
 /** A card's own sub-object, from the number and expiry given. */
 function cardSubObject(params: Params): Params {
   const c = subParams(params, 'card');
@@ -720,15 +742,16 @@ function cardSubObject(params: Params): Params {
   // produces its real last4 instead of silently falling back to the '4242' default.
   const number = typeof c.number === 'string' ? c.number.replace(/\D/g, '')
     : typeof c.number === 'number' ? String(c.number).replace(/\D/g, '') : '';
+  const profile = TEST_CARD_PROFILES[number] ?? { brand: 'visa', funding: 'credit' };
   return { card: {
-    brand: 'visa', last4: number ? number.slice(-4) : '4242',
+    brand: profile.brand, last4: number ? number.slice(-4) : '4242',
     exp_month: Number(c.exp_month) || 12, exp_year: Number(c.exp_year) || 2034,
-    funding: 'credit', country: 'US',
+    funding: profile.funding, country: 'US',
     // source: spec:/components/schemas/payment_method_card/properties/fingerprint/description "Uniquely identifies this particular card number."
     // The synthetic fingerprint is stable for a number; Stripe's opaque fingerprint algorithm is not published.
     fingerprint: digest('sha256', number || '4242424242424242').slice(0, 16),
     checks: { address_line1_check: null, address_postal_code_check: null, cvc_check: 'pass' },
-    networks: { available: ['visa'], preferred: null },
+    networks: { available: [profile.brand], preferred: null },
     three_d_secure_usage: { supported: true }, wallet: null,
   } };
 }

package/src/screens/billing-portal.tsx

@@ -81,8 +81,8 @@ function page(ctx: HandlerContext, id: string, session: Row, problem?: { error:
       badge: s.status === 'trialing' ? 'Trial' : s.status === 'past_due' ? 'Past due' : ending ? 'Cancels' : undefined,
       note: ending ? `Your plan will be canceled on ${day(s.current_period_end)}.` : s.status === 'trialing' ? `Trial ends ${day(s.trial_end)}.` : `Renews on ${day(s.current_period_end)}.`,
       actions: ending
-        ? [{ label: 'Renew plan', action: `/p/session/${id}/renew`, fields: { subscription: String(s.id) }, tone: 'primary' as const }]
-        : features.cancel.enabled ? [{ label: 'Cancel plan', action: `/p/session/${id}/cancel`, fields: { subscription: String(s.id) }, tone: 'danger' as const }] : [],
+        ? [{ label: 'Renew plan', action: `${ctx.publicBase}/p/session/${id}/renew`, fields: { subscription: String(s.id) }, tone: 'primary' as const }]
+        : features.cancel.enabled ? [{ label: 'Cancel plan', action: `${ctx.publicBase}/p/session/${id}/cancel`, fields: { subscription: String(s.id) }, tone: 'danger' as const }] : [],
     };
   });
   const defaultPm = ((customer.invoice_settings as Row | undefined)?.default_payment_method as string | undefined) ?? undefined;
@@ -97,7 +97,7 @@ function page(ctx: HandlerContext, id: string, session: Row, problem?: { error:
     ? ctx.rows('invoice').filter((i) => i.customer === session.customer && i.status !== 'draft').sort((a, b) => Number(b.created) - Number(a.created))
       .map((i) => ({
         title: day(i.created), detail: money(i.amount_due ?? i.total, i.currency), badge: String(i.status ?? '').replace(/^./, (c) => c.toUpperCase()),
-        ...(i.status === 'open' && i.collection_method !== 'send_invoice' ? { actions: [{ label: 'Pay', action: `/p/session/${id}/pay`, fields: { invoice: String(i.id) }, tone: 'primary' as const }] } : {}),
+        ...(i.status === 'open' && i.collection_method !== 'send_invoice' ? { actions: [{ label: 'Pay', action: `${ctx.publicBase}/p/session/${id}/pay`, fields: { invoice: String(i.id) }, tone: 'primary' as const }] } : {}),
       }))
     : [];
   const back = typeof session.return_url === 'string' ? session.return_url : undefined;
@@ -124,7 +124,7 @@ function page(ctx: HandlerContext, id: string, session: Row, problem?: { error:
       <Portal
         merchant={merchant}
         {...(problem ? { notice: problem.error } : {})}
-        {...(features.paymentMethod ? { forms: [{ heading: pm ? 'Update payment method' : 'Add payment method', action: `/p/session/${id}/payment_method`, fields: cardFields, submit: { label: pm ? 'Update' : 'Add' } }] } : {})}
+        {...(features.paymentMethod ? { forms: [{ heading: pm ? 'Update payment method' : 'Add payment method', action: `${ctx.publicBase}/p/session/${id}/payment_method`, fields: cardFields, submit: { label: pm ? 'Update' : 'Add' } }] } : {})}
         {...(back ? { back: { href: back, label: `← Return to ${merchant}` } } : {})}
         sections={[
           { heading: 'Current plan', items: plans, empty: 'You have no active plans.' },
@@ -141,7 +141,7 @@ function page(ctx: HandlerContext, id: string, session: Row, problem?: { error:
 async function move(ctx: HandlerContext, id: string, session: Row, subscription: string, kind: 'cancel' | 'renew'): Promise<Response> {
   const sub = resourceView(ctx, SUB, subscription);
   if (!sub || sub.customer !== session.customer || sub.status === 'canceled') return gone();
-  const back = new Response(null, { status: 303, headers: { location: `/p/session/${id}` } });
+  const back = new Response(null, { status: 303, headers: { location: `${ctx.publicBase}/p/session/${id}` } });
   if (kind === 'renew') {
     await ctx.write(SUB, subscription, { cancel_at_period_end: false, cancel_at: null, canceled_at: null, cancellation_details: { comment: null, feedback: null, reason: null } }, 'subscription.update');
     return back;
@@ -179,7 +179,7 @@ async function updatePaymentMethod(ctx: HandlerContext, id: string, session: Row
   for (const sub of ctx.rows(SUB).map((s) => ctx.expand(SUB, s)).filter((s) => s.customer === customer && s.status !== 'canceled' && s.status !== 'incomplete_expired')) {
     await ctx.write(SUB, String(sub.id), { default_payment_method: pm.id }, 'subscription.update');
   }
-  return new Response(null, { status: 303, headers: { location: `/p/session/${id}` } });
+  return new Response(null, { status: 303, headers: { location: `${ctx.publicBase}/p/session/${id}` } });
 }
 
 /** The customer pays one of their open invoices with the card on file. */
@@ -192,7 +192,7 @@ async function payInvoice(ctx: HandlerContext, id: string, session: Row, invoice
   if (!pm) return page(ctx, id, session, { error: 'Add a payment method to pay this invoice.', values: {} });
   const declined = await payOpenInvoice(ctx, invoiceId, pm);
   if (declined) return page(ctx, id, session, { error: declined.message, values: {} });
-  return new Response(null, { status: 303, headers: { location: `/p/session/${id}` } });
+  return new Response(null, { status: 303, headers: { location: `${ctx.publicBase}/p/session/${id}` } });
 }
 
 /** billing.stripe.com's portal pages, or undefined for any other request. */

package/src/screens/checkout.tsx

@@ -94,7 +94,7 @@ function customerEmailOf(session: Row): string | undefined {
   return typeof email === 'string' && EMAIL.test(email) ? email : undefined;
 }
 
-function page(session: Row, id: string, now: number, values: Record<string, string> = {}, error?: string): Response {
+function page(publicBase: string, session: Row, id: string, now: number, values: Record<string, string> = {}, error?: string): Response {
   const lines = (((session.line_items as { data?: Row[] } | undefined)?.data) ?? []).map((item) => ({
     name: String(item.description ?? 'Item'),
     amount: money(item.amount_total, item.currency ?? session.currency),
@@ -128,7 +128,7 @@ function page(session: Row, id: string, now: number, values: Record<string, stri
         merchant={merchant}
         lines={lines}
         {...(trialText ? { total: trialText.lead, note: trialText.note } : session.amount_total !== null && session.amount_total !== undefined ? { total: { label: mode === 'subscription' ? 'Subscribe' : `Pay ${merchant}`, amount: money(session.amount_total, session.currency) } } : {})}
-        action={`/c/pay/${id}`}
+        action={`${publicBase}/c/pay/${id}`}
         sections={[{ heading: 'Contact information', fields: contact }, { heading: 'Payment method', fields: card }]}
         submit={{ label: submit, testId: 'hosted-payment-submit-button' }}
         {...(typeof session.cancel_url === 'string' ? { back: { href: session.cancel_url, label: '← Back' } } : {})}
@@ -145,13 +145,13 @@ async function pay(ctx: HandlerContext, id: string, session: Row, v: Record<stri
   const onFile = customerEmailOf(session);
   const email = onFile ?? (typeof session.customer_email === 'string' ? session.customer_email : (v.email ?? '').trim());
   if (session.mode !== 'setup' || !session.customer) {
-    if (!EMAIL.test(email)) return page(session, id, nowUnix(ctx.occurredAt), v, 'Your email address is incomplete.');
+    if (!EMAIL.test(email)) return page(ctx.publicBase, session, id, nowUnix(ctx.occurredAt), v, 'Your email address is incomplete.');
   }
   // a trial charges nothing now unless a one-time price is on the first invoice
   const oneTimeDue = (((session.line_items as { data?: Row[] } | undefined)?.data) ?? []).some((it, i) => isOneTime(it, inlineOf(session, i)));
   const chargesNow = session.mode === 'payment' || (session.mode === 'subscription' && (!trialOf(session, nowUnix(ctx.occurredAt)) || oneTimeDue));
   const refused = cardAnswer(v, nowUnix(ctx.occurredAt), chargesNow);
-  if (refused) return page(session, id, nowUnix(ctx.occurredAt), v, refused);
+  if (refused) return page(ctx.publicBase, session, id, nowUnix(ctx.occurredAt), v, refused);
   let existing = session;
   // Checkout always makes a customer for a subscription; a payment makes one only when the session asks
   if (!session.customer && (session.mode === 'subscription' || session.customer_creation === 'always')) {
@@ -199,5 +199,5 @@ export async function screen(ctx: HandlerContext): Promise<Response> {
   const stored = ctx.row(CS, id) ?? {};
   const coupon = (stored._discount as Row | undefined)?.coupon;
   const full = { ...session, _subscription_data: stored._subscription_data, _price_data: stored._price_data, _merchant: merchantOf(ctx, stored), _coupon: typeof coupon === 'string' ? ctx.get('coupon', coupon) : undefined, _customer: typeof session.customer === 'string' ? ctx.get('customer', session.customer) : undefined };
-  return request.method === 'GET' ? page(full, id, nowUnix(ctx.occurredAt)) : pay(ctx, id, full, values);
+  return request.method === 'GET' ? page(ctx.publicBase, full, id, nowUnix(ctx.occurredAt)) : pay(ctx, id, full, values);
 }

package/src/screens/connect-onboarding.tsx

@@ -3,7 +3,8 @@
 // single-use entry point: visiting it takes the owner to their onboarding session, and visiting it again, or after it
 // expires, sends them to refresh_url, where the platform makes a new one (docs.stripe.com/connect/hosted-onboarding).
 // At the session's own address they give Stripe what it requires, and Stripe sends them to return_url. Submitting is
-// the owner's move, not an API call. Authored from @volter/world-ui's payment piece; nothing of Stripe's page is copied.
+// the owner's move, not an API call. Authored from @volter/world-ui's payment piece and Stripe's published visual
+// example; the form moves through one section at a time, retaining answers until the final submit.
 //
 // The page asks for exactly what Stripe requires before a US Express account with card_payments and transfers can
 // take card payments (docs.stripe.com/connect/required-verification-information; the set is the one Stripe's
@@ -23,8 +24,8 @@
 // merchant category codes as its list gives them (./industries.ts), and an industry the page does not offer leaves
 // business_profile.mcc due; the states are the fifty and the District of Columbia; a request with no forwarded address
 // records 127.0.0.1. An update link (account_update) shows the same page.
-import type { HandlerContext } from '@volter/world-core';
-import { CONSENT_CSS, flowPage, Payment, PAYMENT_CSS, type PaymentField } from '@volter/world-ui';
+import { twinVendorUrl, type HandlerContext } from '@volter/world-core';
+import { CONSENT_CSS, flowPage, Payment, PAYMENT_CSS, type PaymentProps, type PaymentField } from '@volter/world-ui';
 import type { Row } from '../engine/common.ts';
 import { nowUnix } from '../engine/stripe.ts';
 import { formOf, notFound, seeOther, STRIPE_CONSENT_SKIN } from './shared.tsx';
@@ -90,12 +91,14 @@ function page(ctx: HandlerContext, sessionUrl: string, link: Row, kind: Kind, va
     : [{ heading: 'Business details', fields: business }, { heading: 'About you', fields: person }, { heading: 'Payout account', fields: payout }, { heading: 'Agreement', fields: agreement }];
   return flowPage({
     title: 'Stripe · Account onboarding',
-    css: [PAYMENT_CSS],
+    css: [ONBOARDING_CSS],
     ...(error ? { status: 400 } : {}),
     body: (
-      <Payment
-        merchant={`Verify your ${kind === 'company' ? 'company' : 'business'} with Stripe · ${String(link.account)} · test mode`}
-        lines={[]}
+      <ConnectOnboarding
+        merchant="Stripe"
+        account={String(link.account)}
+        checked={['owners_provided', 'tos'].filter(name => v[name] === (name === 'tos' ? 'accepted' : 'provided'))}
+        lines={sections.map(section => ({ name: section.heading, amount: '' }))}
         action={sessionUrl}
         sections={sections}
         submit={{ label: 'Submit' }}
@@ -167,7 +170,7 @@ async function visit(ctx: HandlerContext, id: string): Promise<Response> {
   if (!usable(ctx, link)) return seeOther(String(link.refresh_url));
   const session = `onbs_${id.replace(/^acctlink_/, '')}`;
   await ctx.write(LINK, id, { used: true, _session: session }, 'account_link.used');
-  return seeOther(`${SESSIONS}${session}`);
+  return seeOther(twinVendorUrl(ctx.call.request, `${SESSIONS}${session}`));
 }
 
 /** connect.stripe.com's onboarding pages, or undefined for any other request. */
@@ -184,7 +187,7 @@ export async function screen(ctx: HandlerContext): Promise<Response> {
   const stored = ctx.rowsRaw(LINK).find((l) => l._session === sid && l._submitted !== true);
   const link = stored ? ctx.get(LINK, String(stored.id)) : undefined;
   if (!stored || !link) return gone();
-  const sessionUrl = `${SESSIONS}${sid}`;
+  const sessionUrl = twinVendorUrl(request, `${SESSIONS}${sid}`);
   const account = ctx.get('account', String(link.account)) ?? {};
   const kind = kindOf(account);
   if (!kind) return unmodelled(account);
@@ -195,3 +198,58 @@ export async function screen(ctx: HandlerContext): Promise<Response> {
   await submit(ctx, link, kind, form, request.headers.get('x-forwarded-for')?.split(',')[0]?.trim() || '127.0.0.1');
   return seeOther(String(link.return_url));
 }
+
+// Visual reference: Stripe's own hosted onboarding example, read 2026-10-08:
+// https://docs.stripe.com/connect/hosted-onboarding
+// hosted_onboarding_form.e59ba8300f563e43489953f06127f52c.png. Platform branding
+// in that example is configurable; this twin uses its existing Stripe skin.
+
+const ONBOARDING_CSS = PAYMENT_CSS + `
+*{box-sizing:border-box}body{color:#30313d;background:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
+.pay{grid-template-columns:minmax(280px,40%) minmax(0,60%)}.pay-summary{background:#f7f7f9;padding:48px max(32px,calc((100vw - 1000px)/2));padding-right:40px;position:relative}
+.pay-back{color:#596171;font-size:13px;margin-bottom:40px}.pay-merchant{color:#635bff;font-size:30px;font-weight:700;letter-spacing:-1px;margin-bottom:32px}
+.pay-lines{counter-reset:step;max-width:280px}.pay-line{counter-increment:step;display:block;position:relative;padding:12px 0 12px 38px;color:#687385;font-size:14px}
+.pay-line::before{content:counter(step);position:absolute;left:0;top:11px;width:24px;height:24px;line-height:22px;text-align:center;border:1px solid #d8dee4;border-radius:50%;background:#fff;font-size:12px}
+.pay-line[aria-current=step]{color:#30313d;font-weight:600}.pay-line[aria-current=step]::before{border-color:#635bff;color:#635bff}.pay-line.is-complete::before{background:#635bff;border-color:#635bff;color:#fff}
+.pay-form{padding:56px 48px;max-width:620px;width:100%}.pay-section legend{font-size:26px;letter-spacing:-.6px;font-weight:600;margin-bottom:24px}.pay-field{margin-bottom:22px}
+.pay-field span{font-size:14px;margin-bottom:8px;font-weight:500}.pay-field input,.pay-field select{background:#fff;border-color:#d8dee4;border-radius:6px;padding:10px 12px;box-shadow:0 1px 2px #00000005;color:#30313d}
+.pay-field input:focus,.pay-field select:focus{outline:2px solid #a5a0ff;outline-offset:1px}
+.pay-field:has(input[type=checkbox]){display:flex;align-items:flex-start;gap:10px}.pay-field:has(input[type=checkbox]) span{order:2;font-weight:400}.pay-field input[type=checkbox]{width:16px;height:16px;flex:none;margin-top:3px;accent-color:#635bff}
+.pay-submit,.connect-next{background:#635bff;color:#fff;border:0;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;padding:12px 16px}
+.connect-actions{display:flex;justify-content:space-between;gap:16px;margin-top:32px}.connect-back{color:#596171;background:transparent;border:0;cursor:pointer;padding:12px 0;font:inherit}.connect-next{min-width:140px;flex:1}
+.pay-error{border:1px solid #f1c2c2;padding:12px;border-radius:6px;color:#b52e2e;background:#fff7f7;font-size:13px;white-space:normal;overflow-wrap:anywhere}
+.connect-progress{height:3px;background:#ececf1;margin:0 0 36px;border-radius:2px;overflow:hidden}.connect-progress div{height:100%;background:#635bff;transition:width .15s}
+.connect-context{position:absolute;bottom:40px;left:32px;color:#687385;font-size:12px}.connect-context strong{display:block;font-weight:500;color:#30313d}
+.connect-ready .pay-section[hidden],.connect-ready .pay-submit[hidden],.connect-actions [hidden]{display:none}
+@media(max-width:800px){.pay{grid-template-columns:1fr}.pay-summary{padding:24px}.pay-back{margin-bottom:20px}.pay-merchant{font-size:24px;margin-bottom:0}.pay-lines{display:none}.connect-context{position:static;padding:0 24px;background:#f7f7f9}.pay-form{padding:32px 24px;max-width:100%}.pay-section legend{font-size:24px}}
+`;
+
+// Progressive enhancement only: Back/Continue move through the existing form.
+// No account state is written until its existing Submit operation succeeds.
+const STEPS = `(function(){
+var root=document.querySelector('.connect-onboarding'),form=root.querySelector('form'),groups=Array.from(form.querySelectorAll('.pay-section')),items=Array.from(root.querySelectorAll('.pay-line')),submit=form.querySelector('.pay-submit');
+var progress=document.createElement('div');progress.className='connect-progress';progress.setAttribute('role','progressbar');progress.setAttribute('aria-label','Onboarding progress');progress.setAttribute('aria-valuemin','0');progress.setAttribute('aria-valuemax',String(groups.length));
+var bar=document.createElement('div');progress.append(bar);form.before(progress);
+var controls=document.createElement('div');controls.className='connect-actions';
+var back=document.createElement('button');back.type='button';back.className='connect-back';back.textContent='Back';
+var next=document.createElement('button');next.type='button';next.className='connect-next';next.textContent='Continue';
+controls.append(back,next);form.append(controls);
+var checked=JSON.parse(root.getAttribute('data-checked-fields')||'[]');
+groups.forEach(function(group){group.querySelectorAll('input,select').forEach(function(input){input.required=true;if(input.type==='checkbox')input.checked=checked.includes(input.name);if(input.name==='ssn_last_4'){input.pattern='[0-9]{4}';input.inputMode='numeric';input.maxLength=4;}});});
+var index=0;
+function show(i){index=i;groups.forEach(function(group,n){group.hidden=n!==i;});items.forEach(function(item,n){if(n===i)item.setAttribute('aria-current','step');else item.removeAttribute('aria-current');item.classList.toggle('is-complete',n<i);});back.hidden=i===0;next.hidden=i===groups.length-1;submit.hidden=i!==groups.length-1;bar.style.width=((i+1)/groups.length*100)+'%';progress.setAttribute('aria-valuenow',String(i+1));progress.setAttribute('aria-valuetext',groups[i].querySelector('legend').textContent);root.classList.add('connect-ready');}
+function invalid(group){return Array.from(group.querySelectorAll('input,select')).find(function(input){return !input.checkValidity();});}
+back.addEventListener('click',function(){show(index-1);});
+next.addEventListener('click',function(){var field=invalid(groups[index]);if(field){field.reportValidity();return;}show(index+1);groups[index].querySelector('input,select')?.focus();});
+form.noValidate=true;
+form.addEventListener('submit',function(event){for(var i=0;i<groups.length;i++){var field=invalid(groups[i]);if(field){event.preventDefault();show(i);field.reportValidity();return;}}});
+if(form.querySelector('.pay-error')){var first=groups.findIndex(function(group){return invalid(group);});show(first<0?groups.length-1:first);}else show(0);
+})();`;
+
+function ConnectOnboarding(props: PaymentProps & { account: string; checked: string[] }) {
+  return <div className="connect-onboarding" data-checked-fields={JSON.stringify(props.checked)}>
+    <Payment {...props} />
+    <div className="connect-context"><strong>Test mode</strong>{props.account}</div>
+    <script dangerouslySetInnerHTML={{ __html: STEPS }} />
+  </div>;
+}

package/src/screens/dashboard.tsx

@@ -1,6 +1,5 @@
 // THE DASHBOARD — dashboard.stripe.com's pages an operator sets what Stripe's API cannot (docs/contributing/architecture.md,
-// "Screens": a workspace): Public details (/settings/public) and the Connect OAuth settings
-// (/settings/connect/onboarding-options/oauth), Radar lists and test Issuing funding.
+// "Screens": a workspace): Public details (/settings/public), Radar lists and test Issuing funding.
 // The operator controls prepare the cited real application calls; other Dashboard pages answer Stripe's 404.
 //
 // THE DASHBOARD'S PUBLIC DETAILS — a workspace page (docs/contributing/architecture.md, "Screens") of the Dashboard
@@ -23,26 +22,6 @@
 // and the save redirects to its own path. Saving is an update of an account that exists (the first save included, though
 // the twin stores the platform's record only then), so every save is sent as account.updated.
 //
-// THE DASHBOARD'S CONNECT OAUTH SETTINGS — a workspace page (docs/contributing/architecture.md, "Screens") of the
-// Dashboard (manifest screen `dashboard`), at dashboard.stripe.com/settings/connect/onboarding-options/oauth, where a
-// platform starts an OAuth integration: "Enable onboarding accounts with OAuth", "Copy your client_id, a unique
-// identifier for your platform that's generated by Stripe", and "Set your redirect_uri ... You must specify all redirect
-// URLs in your platform settings. If you don't include the redirect_uri parameter in your request, Stripe defaults to
-// using the first address you've configured" (docs.stripe.com/connect/oauth-standard-accounts). The test client_id
-// "allows you to: Set your redirect_uri to a non-HTTPS URL; Set your redirect_uri to localhost"
-// (docs.stripe.com/connect/testing#using-oauth). Stripe's API has no call that reads or changes these settings (GET
-// /v1/account does not carry the client_id), so this page is the only way to them, and connect.stripe.com/oauth/authorize
-// (./connect-oauth.tsx) reads what it saves. Authored from plain markup under Stripe's type; nothing of Stripe's page is
-// copied.
-//
-// Where the documentation stops and the twin decides: the World has one platform, and its test client_id is
-// `ca_twin_self` (PLATFORM_CLIENT_ID; the platform account is acct_twin_self), the same in every World, shown on the
-// page in an element a runner reads (data-testid="connect-client-id"). OAuth starts disabled. The page is served at
-// the docs' address, at /test/… (the docs' test-mode link) and at /settings/connect (the address Cal.com's setup
-// guide gives). The redirect URIs are one form field, one per line (or comma-separated, as the reference describes
-// them), saved whole: each an absolute http or https URL without a fragment; http and localhost are allowed, as the
-// test client_id allows them. No sign-in guards the page. The form posts to the
-// page's own address and the save redirects to it.
 import type { HandlerContext } from '@volter/world-core';
 import { flowPage } from '@volter/world-ui';
 import { VL } from '../engine/radar.ts';
@@ -61,8 +40,32 @@ const MAX_NAME = 5000;
 
 const DETAILS_CSS = `
 * { box-sizing: border-box; }
-body { margin: 0; background: #f6f8fa; color: #1a1f36; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif; font-size: 14px; }
-.pd { max-width: 640px; margin: 48px auto; padding: 0 16px; }
+body { margin: 0; background: #ffffff; color: #1a1f36; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif; font-size: 14px; line-height: 1.5; }
+button,input,select { font: inherit; }
+button,a,input,select { outline-offset: 3px; }
+button { cursor: pointer; }
+button:disabled { cursor: default; color: #697386; }
+a { color: #635bff; text-decoration: none; }
+.sd { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0,1fr); }
+.sd-side { background: #f6f8fa; border-right: 1px solid #e3e8ee; padding: 20px 14px; }
+.sd-account { font-weight: 600; padding: 6px 10px 20px; overflow-wrap: anywhere; }
+.sd-mode { display: block; width: fit-content; font-size: 11px; font-weight: 500; background: #e3e8ee; border-radius: 4px; margin-top: 8px; padding: 2px 7px; }
+.sd-nav { display: grid; gap: 3px; }
+.sd-nav a,.sd-nav button { display: block; text-align: left; padding: 7px 10px; font: inherit; border: 0; border-radius: 6px; background: none; color: #697386; }
+.sd-nav a { color: #1a1f36; }
+.sd-nav a:hover { background: #e3e8ee; }
+.sd-nav [aria-current=page] { color: #635bff; background: #ffffff; font-weight: 600; }
+.sd-nav-title { margin: 23px 10px 7px; font-size: 12px; font-weight: 600; color: #697386; }
+.sd-body { min-width: 0; }
+.sd-top { min-height: 64px; border-bottom: 1px solid #e3e8ee; padding: 14px 32px; display: flex; align-items: center; gap: 16px; }
+.sd-search { width: min(520px,100%); border: 1px solid #e3e8ee; border-radius: 7px; padding: 7px 12px; background: #f6f8fa; }
+.sd-top a { margin-left: auto; }
+.sd-top button { border: 0; background: none; }
+.sd-content { padding: 28px 40px 60px; max-width: 1280px; }
+.sd-crumbs { color: #697386; font-size: 13px; display: flex; gap: 10px; margin-bottom: 18px; }
+.sd-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e3e8ee; padding-bottom: 20px; margin-bottom: 28px; }
+.sd-title h1 { font-size: 28px; margin: 0; letter-spacing: -.5px; }
+.pd { max-width: 860px; }
 .pd h1 { font-size: 28px; margin: 16px 0 4px; }
 .pd-lead { color: #697386; margin: 0 0 24px; }
 .pd-card { background: #ffffff; border: 1px solid #e3e8ee; border-radius: 8px; padding: 24px; }
@@ -70,22 +73,50 @@ body { margin: 0; background: #f6f8fa; color: #1a1f36; font-family: -apple-syste
 .pd-card small { display: block; color: #697386; margin-bottom: 8px; }
 .pd-card input { width: 100%; padding: 8px 10px; border: 1px solid #c1c9d2; border-radius: 6px; font: inherit; }
 .pd-actions { margin-top: 20px; display: flex; justify-content: flex-end; }
-.pd-actions button { background: #635bff; color: #ffffff; border: 0; border-radius: 6px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; }
+.sd-primary,.pd-actions button { background: #635bff; color: #ffffff; border: 0; border-radius: 6px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; }
 .pd-notice { padding: 10px 12px; border-radius: 6px; margin-bottom: 16px; }
 .pd-error { background: #fff0f3; color: #df1b41; }
 .pd-saved { background: #e7f8ef; color: #0e6245; }
+.sd-table { border-collapse: collapse; width: 100%; }
+.sd-table th,.sd-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #e3e8ee; }
+.sd-table th { font-size: 12px; font-weight: 600; color: #697386; background: #f6f8fa; }
+.sd-empty { color: #697386; padding: 40px; text-align: center; }
+.sd-code { font-family: ui-monospace,SFMono-Regular,monospace; font-size: 12px; }
+.sd-dialog { width: min(480px,calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid #e3e8ee; border-radius: 8px; padding: 24px; color: #1a1f36; }
+.sd-dialog::backdrop { background: rgba(26,31,54,.4); }
+.sd-dialog h2 { font-size: 20px; margin: 0 0 20px; }
+.sd-dialog label { display: block; font-weight: 600; margin: 14px 0; }
+.sd-dialog input,.sd-dialog select { display: block; width: 100%; margin-top: 6px; border: 1px solid #c1c9d2; border-radius: 6px; padding: 8px 10px; background: #ffffff; }
+.sd-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
+.sd-cancel { border: 1px solid #c1c9d2; border-radius: 6px; padding: 8px 16px; background: #ffffff; color: #1a1f36; }
+@media(max-width:760px) { .sd { grid-template-columns: 160px minmax(0,1fr); } .sd-content { padding: 24px 20px; } .sd-top { padding: 14px 20px; } .sd-top button { display: none; } .sd-table { font-size: 12px; } }
+@media(max-width:520px) { .sd { display: block; } .sd-side { border-right: 0; border-bottom: 1px solid #e3e8ee; padding: 10px 16px; } .sd-account { padding: 0 0 8px; } .sd-mode { display: inline; margin-left: 8px; } .sd-nav { display: flex; flex-wrap: wrap; } .sd-nav button,.sd-nav-title { display: none; } .sd-content { padding: 20px 16px; } .sd-title h1 { font-size: 24px; } .sd-top { padding: 12px 16px; } }
 `;
 
-function detailsPage(account: Row | undefined, opts: { value?: string; error?: string; saved?: boolean } = {}): Response {
+type DashboardPage = { title: string; section: string; path: string; body: Parameters<typeof flowPage>[0]['body']; action?: Parameters<typeof flowPage>[0]['body']; status?: number };
+/** The documented dashboard navigation around only the operator pages this pack already serves. */
+function dashboardPage(ctx: HandlerContext, opts: DashboardPage): Response {
+  const account = ctx.get('account', PLATFORM_ACCOUNT_ID);
+  const links = [['Public details', PUBLIC_DETAILS_PATH], ['Radar lists', '/radar/lists'], ['Issuing balance', '/test/issuing/balance']];
+  return flowPage({ title: `${opts.title} – Stripe`, css: [DETAILS_CSS], status: opts.status ?? 200, body: <div className="sd">
+    <aside className="sd-side"><div className="sd-account">{publicBusinessName(account)}<span className="sd-mode">Test mode</span></div><nav className="sd-nav" aria-label="Dashboard">
+      {['Home', 'Balances', 'Transactions', 'Customers', 'Product catalog'].map(label => <button key={label} type="button" disabled title="Not available in this twin's Dashboard">{label}</button>)}
+      <p className="sd-nav-title">Shortcuts</p>{links.map(([label,path]) => <a key={path} href={`${ctx.publicBase}${path}`} aria-current={opts.path === path ? 'page' : undefined}>{label}</a>)}
+      <p className="sd-nav-title">Products</p>{['Payments', 'Billing', 'Reporting', 'Connect', 'More'].map(label => <button key={label} type="button" disabled title="Not available in this twin's Dashboard">{label}</button>)}
+    </nav></aside><div className="sd-body"><header className="sd-top"><input className="sd-search" aria-label="Search Dashboard" placeholder="Search" disabled title="Dashboard search is not available in this twin"/><button type="button" disabled title="Not available in this twin's Dashboard">Create</button><button type="button" disabled>Help</button><a href={`${ctx.publicBase}${PUBLIC_DETAILS_PATH}`}>Settings</a></header>
+    <main className="sd-content"><nav className="sd-crumbs" aria-label="Breadcrumb"><span>{opts.section}</span><span aria-hidden="true">/</span><span>{opts.title}</span></nav><div className="sd-title"><h1>{opts.title}</h1>{opts.action}</div>{opts.body}</main></div>
+    <script dangerouslySetInnerHTML={{ __html: "document.querySelectorAll('[data-open-dialog]').forEach(b=>b.addEventListener('click',()=>document.getElementById(b.dataset.openDialog).showModal()));document.querySelectorAll('[data-close-dialog]').forEach(b=>b.addEventListener('click',()=>b.closest('dialog').close()));" }}/>
+  </div> });
+}
+
+function detailsPage(ctx: HandlerContext, account: Row | undefined, opts: { value?: string; error?: string; saved?: boolean } = {}): Response {
   const named = (account?.business_profile as Row | undefined)?.name;
   const value = opts.value ?? (typeof named === 'string' ? named : '');
-  return flowPage({
-    title: 'Public details – Stripe',
-    css: [DETAILS_CSS],
+  return dashboardPage(ctx, {
+    title: 'Public details', section: 'Settings / Business', path: PUBLIC_DETAILS_PATH,
     ...(opts.error ? { status: 400 } : {}),
     body: (
-      <main className="pd">
-        <h1>Public details</h1>
+      <div className="pd">
         <p className="pd-lead">What your customers see on Checkout, the customer portal, receipts and invoices. Currently shown: <strong data-testid="public-business-name">{publicBusinessName(account)}</strong></p>
         {opts.error ? <p className="pd-notice pd-error" role="alert">{opts.error}</p> : null}
         {opts.saved ? <p className="pd-notice pd-saved" role="status">Your public details were saved.</p> : null}
@@ -95,7 +126,7 @@ function detailsPage(account: Row | undefined, opts: { value?: string; error?: s
           <input id="business_name" name="business_name" autoComplete="organization" defaultValue={value} required maxLength={MAX_NAME} />
           <div className="pd-actions"><button type="submit">Save</button></div>
         </form>
-      </main>
+      </div>
     ),
   });
 }
@@ -118,10 +149,10 @@ async function publicDetails(ctx: HandlerContext): Promise<Response> {
   const url = new URL(request.url);
   if (request.method !== 'GET' && request.method !== 'POST') return notFound();
   const form = request.method === 'POST' ? await formOf(request.clone()) : {};
-  if (request.method === 'GET') return detailsPage(ctx.get('account', PLATFORM_ACCOUNT_ID), { saved: url.searchParams.has('saved') });
+  if (request.method === 'GET') return detailsPage(ctx, ctx.get('account', PLATFORM_ACCOUNT_ID), { saved: url.searchParams.has('saved') });
   const name = (form.business_name ?? '').trim();
   const refused = nameRefused(name);
-  if (refused) return detailsPage(ctx.get('account', PLATFORM_ACCOUNT_ID), { value: form.business_name ?? '', error: refused });
+  if (refused) return detailsPage(ctx, ctx.get('account', PLATFORM_ACCOUNT_ID), { value: form.business_name ?? '', error: refused });
   await save(ctx, name);
   // a query-only reference: the page's own path, wherever it is mounted and with or without its trailing slash
   return new Response(null, { status: 303, headers: { location: '?saved=1' } });
@@ -130,9 +161,8 @@ async function publicDetails(ctx: HandlerContext): Promise<Response> {
 /** Dashboard settings, Radar list creation and test Issuing funding; other pages answer Stripe's 404. */
 export async function screen(ctx: HandlerContext): Promise<Response> {
   const path = new URL(ctx.call.request.url).pathname.replace(/\/+$/, '');
-  // The twin's declared workspace entry opens its implemented Public details page; this authored choice does not
-  // reproduce Stripe's Dashboard home. The request's public base retains the World mount when the console frames it.
-  if (path === '' && ['GET', 'HEAD'].includes(ctx.call.request.method)) return redirect(`${ctx.publicBase}${PUBLIC_DETAILS_PATH}`);
+  // The declared workspace opens a served setting, not a fabricated analytics home.
+  if (!path && ctx.call.request.method === 'GET') return redirect(`${ctx.publicBase}${PUBLIC_DETAILS_PATH}`);
   // source: https://docs.stripe.com/radar/lists "Use the Dashboard or the API to create lists."
   // source: https://docs.stripe.com/radar/lists "Enter a name for the list"
   // source: https://docs.stripe.com/radar/lists "Select the type of list to create."
@@ -154,9 +184,22 @@ export async function screen(ctx: HandlerContext): Promise<Response> {
         list_items: { object: 'list', data: [], has_more: false, url: '/v1/radar/value_list_items' },
       });
       await ctx.write(VL, String(list.id), { list_items: { object: 'list', data: [], has_more: false, url: `/v1/radar/value_list_items?value_list=${list.id}` } }, 'radar.value_list.updated');
-      return redirect(`/radar/lists/${list.id}`);
+      return redirect(`${ctx.publicBase}/radar/lists/${list.id}`);
     }
-    return flowPage({ css: [], title: 'Lists – Radar – Stripe', body: <main><h1>Radar Lists</h1><form method="post" action="/radar/lists"><h2>New list</h2><label>Name<input name="name" required /></label><label>Alias<input name="alias" /></label><label>List type<select name="item_type"><option value="customer_id">Customer ID</option><option value="email">Email</option><option value="card_fingerprint">Card fingerprint</option><option value="ip_address">IP address</option><option value="string">String</option></select></label><button>Add</button></form><ul>{ctx.rows(VL).map(row => <li key={String(row.id)}>{String(row.name)} ({String(row.alias)})</li>)}</ul></main> });
+    const lists = ctx.rows(VL);
+    const types = [['customer_id', 'Customer ID'], ['email', 'Email'], ['card_fingerprint', 'Card fingerprint'], ['card_bin', 'Card BIN'], ['ip_address', 'IP address'], ['string', 'String'], ['case_sensitive_string', 'Case-sensitive string'], ['country', 'Country'], ['sepa_debit_fingerprint', 'SEPA Direct Debit fingerprint'], ['us_bank_account_fingerprint', 'ACH Direct Debit fingerprint']];
+    const selected = lists.find(row => path === `/radar/lists/${row.id}`);
+    return dashboardPage(ctx, { title: selected ? String(selected.name) : 'Lists', section: 'Payments / Radar', path: '/radar/lists',
+      action: <button className="sd-primary" type="button" data-open-dialog="radar-new-list">New list</button>,
+      body: <>{selected ? <div className="pd-card"><a href={`${ctx.publicBase}/radar/lists`}>All lists</a><h2>{String(selected.name)}</h2><p>Alias: <code>{String(selected.alias)}</code></p><p>List type: {types.find(([key]) => key === selected.item_type)?.[1] ?? String(selected.item_type)}</p></div> : null}<p className="pd-lead">Lists of information to block, allow or review matching payments.</p>
+        <table className="sd-table"><thead><tr><th scope="col">Name</th><th scope="col">Alias</th><th scope="col">List type</th></tr></thead><tbody>{lists.map(row => <tr key={String(row.id)}><td><a href={`${ctx.publicBase}/radar/lists/${encodeURIComponent(String(row.id))}`}>{String(row.name)}</a></td><td className="sd-code">{String(row.alias)}</td><td>{types.find(([key]) => key === row.item_type)?.[1] ?? String(row.item_type)}</td></tr>)}</tbody></table>
+        {!lists.length ? <p className="sd-empty">No lists yet. Create a list to group related values.</p> : null}
+        <dialog className="sd-dialog" id="radar-new-list" aria-labelledby="radar-new-list-title"><h2 id="radar-new-list-title">New list</h2><form method="post" action={`${ctx.publicBase}/radar/lists`}>
+          <label htmlFor="radar-list-name">Name</label><input id="radar-list-name" name="name" required/>
+          <label htmlFor="radar-list-alias">Alias</label><input id="radar-list-alias" name="alias"/><p className="pd-lead">Leave blank to generate an alias from the name.</p>
+          <label htmlFor="radar-list-type">List type</label><select id="radar-list-type" name="item_type">{types.map(([value,label]) => <option key={value} value={value}>{label}</option>)}</select>
+          <div className="sd-dialog-actions"><button className="sd-cancel" type="button" data-close-dialog>Cancel</button><button className="sd-primary" type="submit">Add</button></div>
+        </form></dialog></> });
   }
   // source: https://docs.stripe.com/issuing/testing "Before you create test transactions, you must add test funds to the Issuing balance on your account."
   // source: https://docs.stripe.com/issuing/testing "You can create test top-ups in the Dashboard, or with the Top-ups API"
@@ -172,9 +215,9 @@ export async function screen(ctx: HandlerContext): Promise<Response> {
       const amount = Number(form.amount);
       if (!Number.isInteger(amount) || amount <= 0) return invalid('Enter a positive amount in cents.');
       await created(ctx, 'balance_transaction', {}, { amount, currency: 'usd', fee: 0, net: amount, type: 'topup', reporting_category: 'topup', source: null, status: 'available', balance_type: 'issuing', available_on: Number(nowUnix(ctx.occurredAt)), fee_details: [] });
-      return redirect('/test/issuing/balance');
+      return redirect(`${ctx.publicBase}/test/issuing/balance?funded=1`);
     }
-    return flowPage({ css: [], title: 'Test Issuing balance – Stripe', body: <main><h1>Test Issuing balance</h1><form method="post"><label>Amount<input name="amount" type="number" min="1" required /></label><button>Add test funds</button></form></main> });
+    return dashboardPage(ctx, { title: 'Issuing balance', section: 'Issuing', path: '/test/issuing/balance', body: <div className="pd"><p className="pd-lead">Add test funds before creating test Issuing transactions.</p>{new URL(ctx.call.request.url).searchParams.has('funded') ? <p className="pd-notice pd-saved" role="status">Test funds were added to your Issuing balance.</p> : null}<form className="pd-card" method="post" action={`${ctx.publicBase}/test/issuing/balance`}><label htmlFor="issuing-amount">Amount</label><small>USD cents. These funds belong to this test account.</small><input id="issuing-amount" name="amount" type="number" min="1" step="1" required/><div className="pd-actions"><button type="submit">Add test funds</button></div></form></div> });
   }
   return path === PUBLIC_DETAILS_PATH ? publicDetails(ctx) : notFound();
 }