From f7cb9f34ded228d992edae423cc6ba93f5c405eb Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Mon, 30 Mar 2026 20:39:08 -0400
Subject: [PATCH 01/28] wip: basic wiring

---
 examples/charge/package.json  |  2 +-
 examples/charge/src/server.ts |  2 ++
 examples/stripe/package.json  |  2 +-
 examples/stripe/src/server.ts |  1 +
 src/Method.ts                 |  7 ++++++-
 src/server/Mppx.ts            |  4 ++++
 src/server/Transport.ts       | 39 +++++++++++++++++++++++++++++------
 src/server/internal/html.ts   |  1 +
 src/stripe/server/Charge.ts   |  6 ++++++
 src/tempo/server/Charge.ts    |  6 ++++++
 10 files changed, 61 insertions(+), 9 deletions(-)
 create mode 100644 src/server/internal/html.ts

diff --git a/examples/charge/package.json b/examples/charge/package.json
index ce7eb3b7..8aa093da 100644
--- a/examples/charge/package.json
+++ b/examples/charge/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "check:types": "tsgo -b",
-    "dev": "vite",
+    "dev": "vp dev",
     "build": "vite build",
     "preview": "vite preview"
   },
diff --git a/examples/charge/src/server.ts b/examples/charge/src/server.ts
index c4b05f01..f94cb111 100644
--- a/examples/charge/src/server.ts
+++ b/examples/charge/src/server.ts
@@ -10,8 +10,10 @@ const currency = '0x20c0000000000000000000000000000000000000' as const // pathUS
 const mppx = Mppx.create({
   methods: [
     tempo({
+      account,
       currency,
       feePayer: true,
+      html: true,
       recipient: account.address,
       testnet: true,
     }),
diff --git a/examples/stripe/package.json b/examples/stripe/package.json
index b070bf69..fd254f38 100644
--- a/examples/stripe/package.json
+++ b/examples/stripe/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vp dev",
     "check": "biome check --fix --unsafe",
     "check:types": "tsgo -b",
     "build": "vite build",
diff --git a/examples/stripe/src/server.ts b/examples/stripe/src/server.ts
index 0aaac6ac..aa7e701d 100644
--- a/examples/stripe/src/server.ts
+++ b/examples/stripe/src/server.ts
@@ -9,6 +9,7 @@ const mppx = Mppx.create({
   methods: [
     stripe.charge({
       client: stripeClient,
+      html: true,
       // Stripe Business Network profile ID.
       networkId: 'internal',
       // Ensure only card is supported.
diff --git a/src/Method.ts b/src/Method.ts
index 1b196fad..9fd3aba3 100755
--- a/src/Method.ts
+++ b/src/Method.ts
@@ -2,6 +2,7 @@ import type * as Challenge from './Challenge.js'
 import type * as Credential from './Credential.js'
 import type { ExactPartial, LooseOmit, MaybePromise } from './internal/types.js'
 import type * as Receipt from './Receipt.js'
+import type * as Html from './server/internal/html.js'
 import type * as Transport from './server/Transport.js'
 import type * as z from './zod.js'
 
@@ -10,6 +11,7 @@ import type * as z from './zod.js'
  */
 export type Method = {
   name: string
+  html?: Html.Options | undefined
   intent: string
   schema: {
     credential: {
@@ -74,6 +76,7 @@ export type Server<
   transportOverride = undefined,
 > = method & {
   defaults?: defaults | undefined
+  html?: Html.Options | undefined
   request?: RequestFn<method> | undefined
   respond?: RespondFn<method> | undefined
   transport?: transportOverride | undefined
@@ -202,10 +205,11 @@ export function toServer<
   method: method,
   options: toServer.Options<method, defaults, transportOverride>,
 ): Server<method, defaults, transportOverride> {
-  const { defaults, request, respond, transport, verify } = options
+  const { defaults, html, request, respond, transport, verify } = options
   return {
     ...method,
     defaults,
+    html,
     request,
     respond,
     transport,
@@ -220,6 +224,7 @@ export declare namespace toServer {
     transportOverride extends Transport.AnyTransport | undefined = undefined,
   > = {
     defaults?: defaults | undefined
+    html?: Html.Options | undefined
     request?: RequestFn<method> | undefined
     respond?: RespondFn<method> | undefined
     transport?: transportOverride | undefined
diff --git a/src/server/Mppx.ts b/src/server/Mppx.ts
index 59c5b4d2..c0ead8cb 100644
--- a/src/server/Mppx.ts
+++ b/src/server/Mppx.ts
@@ -304,6 +304,7 @@ function createMethodFn(parameters: createMethodFn.Parameters): createMethodFn.R
             challenge,
             input,
             error: new Errors.MalformedCredentialError({ reason: credentialError.message }),
+            html: method.html,
           })
           return { challenge: response, status: 402 }
         }
@@ -314,6 +315,7 @@ function createMethodFn(parameters: createMethodFn.Parameters): createMethodFn.R
             challenge,
             input,
             error: new Errors.PaymentRequiredError({ description }),
+            html: method.html,
           })
           return { challenge: response, status: 402 }
         }
@@ -328,6 +330,7 @@ function createMethodFn(parameters: createMethodFn.Parameters): createMethodFn.R
               id: credential.challenge.id,
               reason: 'challenge was not issued by this server',
             }),
+            html: method.html,
           })
           return { challenge: response, status: 402 }
         }
@@ -356,6 +359,7 @@ function createMethodFn(parameters: createMethodFn.Parameters): createMethodFn.R
                   id: credential.challenge.id,
                   reason: `credential ${field} does not match this route's requirements`,
                 }),
+                html: method.html,
               })
               return { challenge: response, status: 402 }
             }
diff --git a/src/server/Transport.ts b/src/server/Transport.ts
index 270fc1e3..78fc1855 100644
--- a/src/server/Transport.ts
+++ b/src/server/Transport.ts
@@ -1,9 +1,12 @@
+import { Json } from 'ox'
+
 import * as Challenge from '../Challenge.js'
 import * as Credential from '../Credential.js'
 import * as Errors from '../Errors.js'
 import type { Distribute, UnionToIntersection } from '../internal/types.js'
 import * as core_Mcp from '../Mcp.js'
 import * as Receipt from '../Receipt.js'
+import type * as Html from './internal/html.js'
 
 export { type McpSdk, mcpSdk } from '../mcp-sdk/server/Transport.js'
 
@@ -30,6 +33,7 @@ export type Transport<
   respondChallenge: (options: {
     challenge: Challenge.Challenge
     error?: Errors.PaymentError | undefined
+    html?: Html.Options | undefined
     input: input
   }) => challengeOutput | Promise<challengeOutput>
   /** Attaches a receipt to a successful response. */
@@ -121,17 +125,40 @@ export function http(): Http {
       return Credential.deserialize(payment)
     },
 
-    respondChallenge({ challenge, error }) {
+    respondChallenge({ challenge, error, html, input }) {
       const headers: Record<string, string> = {
         'WWW-Authenticate': Challenge.serialize(challenge),
         'Cache-Control': 'no-store',
       }
 
-      let body: string | null = null
-      if (error) {
-        headers['Content-Type'] = 'application/problem+json'
-        body = JSON.stringify(error.toProblemDetails(challenge.id))
-      }
+      const body = (() => {
+        if (html && input.headers.get('Accept')?.includes('text/html')) {
+          headers['Content-Type'] = 'text/html; charset=utf-8'
+          const html = String.raw
+          return html`<!doctype html>
+            <html lang="en">
+              <head>
+                <meta charset="UTF-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+                <title>Payment Required</title>
+                <style>
+                  :root {
+                    color-scheme: dark light;
+                  }
+                </style>
+              </head>
+              <body>
+                <h1>Payment Required</h1>
+                <pre>${Json.stringify(challenge, null, 2)}</pre>
+              </body>
+            </html> `
+        }
+        if (error) {
+          headers['Content-Type'] = 'application/problem+json'
+          return JSON.stringify(error.toProblemDetails(challenge.id))
+        }
+        return null
+      })()
 
       return new Response(body, { status: error?.status ?? 402, headers })
     },
diff --git a/src/server/internal/html.ts b/src/server/internal/html.ts
new file mode 100644
index 00000000..0eee3408
--- /dev/null
+++ b/src/server/internal/html.ts
@@ -0,0 +1 @@
+export type Options = boolean
diff --git a/src/stripe/server/Charge.ts b/src/stripe/server/Charge.ts
index 096f05da..76d74de7 100644
--- a/src/stripe/server/Charge.ts
+++ b/src/stripe/server/Charge.ts
@@ -3,6 +3,7 @@ import { PaymentActionRequiredError, VerificationFailedError } from '../../Error
 import * as Expires from '../../Expires.js'
 import type { LooseOmit, OneOf } from '../../internal/types.js'
 import * as Method from '../../Method.js'
+import type * as Html from '../../server/internal/html.js'
 import type { StripeClient } from '../internal/types.js'
 import * as Methods from '../Methods.js'
 
@@ -38,6 +39,7 @@ export function charge<const parameters extends charge.Parameters>(parameters: p
     decimals,
     description,
     externalId,
+    html,
     metadata,
     networkId,
     paymentMethodTypes,
@@ -59,6 +61,8 @@ export function charge<const parameters extends charge.Parameters>(parameters: p
       paymentMethodTypes,
     } as unknown as Defaults,
 
+    html,
+
     async verify({ credential }) {
       const { challenge } = credential
       const { request } = challenge
@@ -108,6 +112,8 @@ export declare namespace charge {
   type Defaults = LooseOmit<Method.RequestDefaults<typeof Methods.charge>, 'recipient'>
 
   type Parameters = {
+    /** Render payment page when Accept header is text/html (e.g. in browsers) */
+    html?: Html.Options | undefined
     /** Optional metadata to include in SPT creation requests. */
     metadata?: Record<string, string> | undefined
   } & Defaults &
diff --git a/src/tempo/server/Charge.ts b/src/tempo/server/Charge.ts
index bfdb88b0..6a51383d 100644
--- a/src/tempo/server/Charge.ts
+++ b/src/tempo/server/Charge.ts
@@ -12,6 +12,7 @@ import { Abis, Transaction } from 'viem/tempo'
 import * as Expires from '../../Expires.js'
 import type { LooseOmit, NoExtraKeys } from '../../internal/types.js'
 import * as Method from '../../Method.js'
+import type * as Html from '../../server/internal/html.js'
 import * as Store from '../../Store.js'
 import * as Client from '../../viem/Client.js'
 import * as Account from '../internal/account.js'
@@ -45,6 +46,7 @@ export function charge<const parameters extends charge.Parameters>(
     decimals = defaults.decimals,
     description,
     externalId,
+    html,
     memo,
     waitForConfirmation = true,
   } = parameters
@@ -71,6 +73,8 @@ export function charge<const parameters extends charge.Parameters>(
       recipient,
     } as unknown as Defaults,
 
+    html,
+
     // TODO: dedupe `{charge,session}.request`
     async request({ credential, request }) {
       const chainId = await (async () => {
@@ -244,6 +248,8 @@ export declare namespace charge {
   type Defaults = LooseOmit<Method.RequestDefaults<typeof Methods.charge>, 'feePayer' | 'recipient'>
 
   type Parameters = {
+    /** Render payment page when Accept header is text/html (e.g. in browsers) */
+    html?: Html.Options | undefined
     /** Testnet mode. */
     testnet?: boolean | undefined
     /**

From 0719e5c447e30f38b1070c954f2d4904ad489a99 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Mon, 30 Mar 2026 21:45:02 -0400
Subject: [PATCH 02/28] feat: tempo html wired

---
 .gitignore                                    |   1 +
 package.json                                  |   3 +-
 pnpm-lock.yaml                                | 105 ++++++++++++++++++
 pnpm-workspace.yaml                           |   1 +
 scripts/build:html.ts                         |  35 ++++++
 src/server/Transport.ts                       |  11 +-
 src/server/internal/html.ts                   |   4 +-
 src/stripe/server/Charge.ts                   |   6 +-
 src/stripe/server/internal/html/main.ts       |  13 +++
 src/stripe/server/internal/html/package.json  |   9 ++
 src/stripe/server/internal/html/tsconfig.json |   8 ++
 src/tempo/server/Charge.ts                    |   6 +-
 src/tempo/server/internal/html/main.ts        |  40 +++++++
 src/tempo/server/internal/html/package.json   |  10 ++
 src/tempo/server/internal/html/tsconfig.json  |   8 ++
 src/tsconfig.json                             |   2 +-
 16 files changed, 251 insertions(+), 11 deletions(-)
 create mode 100644 scripts/build:html.ts
 create mode 100644 src/stripe/server/internal/html/main.ts
 create mode 100644 src/stripe/server/internal/html/package.json
 create mode 100644 src/stripe/server/internal/html/tsconfig.json
 create mode 100644 src/tempo/server/internal/html/main.ts
 create mode 100644 src/tempo/server/internal/html/package.json
 create mode 100644 src/tempo/server/internal/html/tsconfig.json

diff --git a/.gitignore b/.gitignore
index a0951fd5..8e89b159 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 _
 dist
 node_modules
+*.gen.ts
 coverage
 *.tsbuildinfo
 .DS_Store
diff --git a/package.json b/package.json
index ddab41ff..268b934e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "build": "zile",
+    "build": "tsx scripts/build:html.ts && zile",
     "changeset:publish": "zile publish:prepare && changeset publish && zile publish:post",
     "changeset:version": "changeset version && vp fmt .",
     "check": "vp lint --fix && vp fmt --write .",
@@ -41,6 +41,7 @@
     "hono": "^4.11.9",
     "playwright": "^1.58.2",
     "prool": "^0.2.4",
+    "rolldown": "1.0.0-rc.12",
     "tempo.ts": "^0.14.2",
     "testcontainers": "^11.11.0",
     "tsx": "^4.21.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4643e70c..dcc5cec9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,6 +93,9 @@ importers:
       prool:
         specifier: ^0.2.4
         version: 0.2.4(testcontainers@11.11.0)
+      rolldown:
+        specifier: 1.0.0-rc.12
+        version: 1.0.0-rc.12
       tempo.ts:
         specifier: ^0.14.2
         version: 0.14.2(typescript@5.9.3)(viem@2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6))(zod@4.3.6)
@@ -272,6 +275,27 @@ importers:
         specifier: npm:@voidzero-dev/vite-plus-core@~0.1.14
         version: '@voidzero-dev/vite-plus-core@0.1.14(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)'
 
+  src/stripe/server/internal/html:
+    dependencies:
+      '@stripe/stripe-js':
+        specifier: 8.9.0
+        version: 8.9.0
+      mppx:
+        specifier: workspace:*
+        version: link:../../../../..
+
+  src/tempo/server/internal/html:
+    dependencies:
+      accounts:
+        specifier: https://pkg.pr.new/tempoxyz/accounts@d21e422
+        version: https://pkg.pr.new/tempoxyz/accounts@d21e422(@types/react@19.2.14)(@wagmi/core@3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.7(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6)))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6))
+      mppx:
+        specifier: workspace:*
+        version: link:../../../../..
+      viem:
+        specifier: ^2.47.5
+        version: 2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6)
+
 packages:
 
   '@adraffy/ens-normalize@1.11.1':
@@ -1299,6 +1323,10 @@ packages:
     resolution: {integrity: sha512-tNUerSstwNC1KuHgX4CASGO0Md3CB26IJzSXmVlSuFvhsBP4ZaEPpY4jxWOn9tfdDscuVT4Kqb8cZ2o9nLCgRQ==}
     engines: {node: '>=12.16'}
 
+  '@stripe/stripe-js@8.9.0':
+    resolution: {integrity: sha512-OJkXvUI5GAc56QdiSRimQDvWYEqn475J+oj8RzRtFTCPtkJNO2TWW619oDY+nn1ExR+2tCVTQuRQBbR4dRugww==}
+    engines: {node: '>=12.16'}
+
   '@tanstack/query-core@5.90.20':
     resolution: {integrity: sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==}
 
@@ -1650,6 +1678,21 @@ packages:
     resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
     engines: {node: '>= 0.6'}
 
+  accounts@https://pkg.pr.new/tempoxyz/accounts@d21e422:
+    resolution: {tarball: https://pkg.pr.new/tempoxyz/accounts@d21e422}
+    version: 0.4.6
+    peerDependencies:
+      '@wagmi/core': '>=2'
+      react: '>=18'
+      viem: ^2.47.5
+    peerDependenciesMeta:
+      '@wagmi/core':
+        optional: true
+      react:
+        optional: true
+      viem:
+        optional: true
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -2450,6 +2493,9 @@ packages:
     resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
     engines: {node: '>=0.10.0'}
 
+  idb-keyval@6.2.2:
+    resolution: {integrity: sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg==}
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
@@ -3546,6 +3592,9 @@ packages:
       typescript:
         optional: true
 
+  webauthx@0.1.0:
+    resolution: {integrity: sha512-Z43YHetVeXdV5/4+YqKSz+cAflpbMmxSMz//kXEb2u3ZUqVbPG1zrM+Zp7KaME/QgUFGhGkAE2XHwqCAXnU75g==}
+
   webextension-polyfill@0.10.0:
     resolution: {integrity: sha512-c5s35LgVa5tFaHhrZDnr3FpQpjj1BB+RXhLTYUxGqBVN460HkbM8TBtEqdXWbpTKfzwCcjAZVF7zXCYSKtcp9g==}
 
@@ -3678,6 +3727,24 @@ packages:
       use-sync-external-store:
         optional: true
 
+  zustand@5.0.12:
+    resolution: {integrity: sha512-i77ae3aZq4dhMlRhJVCYgMLKuSiZAaUPAct2AksxQ+gOtimhGMdXljRT21P5BNpeT4kXlLIckvkPM029OljD7g==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
 snapshots:
 
   '@adraffy/ens-normalize@1.11.1': {}
@@ -4626,6 +4693,8 @@ snapshots:
 
   '@stripe/stripe-js@8.7.0': {}
 
+  '@stripe/stripe-js@8.9.0': {}
+
   '@tanstack/query-core@5.90.20': {}
 
   '@tanstack/react-query@5.90.21(react@19.2.4)':
@@ -4898,6 +4967,27 @@ snapshots:
       mime-types: 3.0.2
       negotiator: 1.0.0
 
+  accounts@https://pkg.pr.new/tempoxyz/accounts@d21e422(@types/react@19.2.14)(@wagmi/core@3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.7(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6)))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6)):
+    dependencies:
+      '@remix-run/fetch-router': 0.17.0
+      idb-keyval: 6.2.2
+      mipd: 0.0.7(typescript@5.9.3)
+      mppx: 'link:'
+      ox: 0.14.7(typescript@5.9.3)(zod@4.3.6)
+      tsx: 4.21.0
+      webauthx: 0.1.0(typescript@5.9.3)(zod@4.3.6)
+      zod: 4.3.6
+      zustand: 5.0.12(@types/react@19.2.14)(react@19.2.4)(use-sync-external-store@1.4.0(react@19.2.4))
+    optionalDependencies:
+      '@wagmi/core': 3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.7(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6))
+      react: 19.2.4
+      viem: 2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6)
+    transitivePeerDependencies:
+      - '@types/react'
+      - immer
+      - typescript
+      - use-sync-external-store
+
   acorn-jsx@5.3.2(acorn@8.16.0):
     dependencies:
       acorn: 8.16.0
@@ -5776,6 +5866,8 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
+  idb-keyval@6.2.2: {}
+
   ieee754@1.2.1: {}
 
   ignore@5.3.2: {}
@@ -6932,6 +7024,13 @@ snapshots:
       - ox
       - porto
 
+  webauthx@0.1.0(typescript@5.9.3)(zod@4.3.6):
+    dependencies:
+      ox: 0.14.7(typescript@5.9.3)(zod@4.3.6)
+    transitivePeerDependencies:
+      - typescript
+      - zod
+
   webextension-polyfill@0.10.0: {}
 
   webidl-conversions@3.0.1: {}
@@ -7031,3 +7130,9 @@ snapshots:
       '@types/react': 19.2.14
       react: 19.2.4
       use-sync-external-store: 1.4.0(react@19.2.4)
+
+  zustand@5.0.12(@types/react@19.2.14)(react@19.2.4)(use-sync-external-store@1.4.0(react@19.2.4)):
+    optionalDependencies:
+      '@types/react': 19.2.14
+      react: 19.2.4
+      use-sync-external-store: 1.4.0(react@19.2.4)
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index dca77ed3..0654bc54 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,6 +2,7 @@ packages:
   - .
   - examples/*
   - examples/session/*
+  - src/*/server/internal/html
 
 overrides:
   mppx: 'workspace:*'
diff --git a/scripts/build:html.ts b/scripts/build:html.ts
new file mode 100644
index 00000000..88563f79
--- /dev/null
+++ b/scripts/build:html.ts
@@ -0,0 +1,35 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+import { build } from 'rolldown'
+
+const root = path.resolve(import.meta.dirname, '..')
+
+const entries = [
+  'src/tempo/server/internal/html/main.ts',
+  'src/stripe/server/internal/html/main.ts',
+]
+
+for (const entry of entries) {
+  const outDir = path.resolve(root, '.tmp/html-build')
+  const outFile = path.resolve(root, path.dirname(entry), '..', 'html.gen.ts')
+
+  await build({
+    input: path.resolve(root, entry),
+    output: {
+      dir: outDir,
+      format: 'iife',
+      minify: true,
+    },
+  })
+
+  const jsFile = fs.readdirSync(outDir).find((f) => f.endsWith('.js'))
+  if (!jsFile) throw new Error(`No .js output found for ${entry}`)
+
+  const code = fs.readFileSync(path.join(outDir, jsFile), 'utf8').trim()
+  const content = `// Generated — do not edit.\nexport const html = ${JSON.stringify(`<script>${code}</script>`)}\n`
+
+  fs.writeFileSync(outFile, content)
+  fs.rmSync(outDir, { recursive: true })
+  console.log(`wrote ${path.relative(root, outFile)}`)
+}
diff --git a/src/server/Transport.ts b/src/server/Transport.ts
index 78fc1855..8f5ec7e9 100644
--- a/src/server/Transport.ts
+++ b/src/server/Transport.ts
@@ -125,15 +125,17 @@ export function http(): Http {
       return Credential.deserialize(payment)
     },
 
-    respondChallenge({ challenge, error, html, input }) {
+    respondChallenge(options) {
+      const { challenge, error, input } = options
       const headers: Record<string, string> = {
         'WWW-Authenticate': Challenge.serialize(challenge),
         'Cache-Control': 'no-store',
       }
 
       const body = (() => {
-        if (html && input.headers.get('Accept')?.includes('text/html')) {
+        if (options.html && input.headers.get('Accept')?.includes('text/html')) {
           headers['Content-Type'] = 'text/html; charset=utf-8'
+          const data = Json.stringify({ challenge }).replace(/</g, '\\u003c')
           const html = String.raw
           return html`<!doctype html>
             <html lang="en">
@@ -150,6 +152,11 @@ export function http(): Http {
               <body>
                 <h1>Payment Required</h1>
                 <pre>${Json.stringify(challenge, null, 2)}</pre>
+                <div id="root"></div>
+                <script id="__MPPX_DATA__" type="application/json">
+                  ${data}
+                </script>
+                ${options.html.content}
               </body>
             </html> `
         }
diff --git a/src/server/internal/html.ts b/src/server/internal/html.ts
index 0eee3408..149ad7c4 100644
--- a/src/server/internal/html.ts
+++ b/src/server/internal/html.ts
@@ -1 +1,3 @@
-export type Options = boolean
+export type Options = {
+  content: string
+}
diff --git a/src/stripe/server/Charge.ts b/src/stripe/server/Charge.ts
index 76d74de7..505b527e 100644
--- a/src/stripe/server/Charge.ts
+++ b/src/stripe/server/Charge.ts
@@ -3,9 +3,9 @@ import { PaymentActionRequiredError, VerificationFailedError } from '../../Error
 import * as Expires from '../../Expires.js'
 import type { LooseOmit, OneOf } from '../../internal/types.js'
 import * as Method from '../../Method.js'
-import type * as Html from '../../server/internal/html.js'
 import type { StripeClient } from '../internal/types.js'
 import * as Methods from '../Methods.js'
+import { html as htmlContent } from './internal/html.gen.js'
 
 /**
  * Creates a Stripe charge method intent for usage on the server.
@@ -61,7 +61,7 @@ export function charge<const parameters extends charge.Parameters>(parameters: p
       paymentMethodTypes,
     } as unknown as Defaults,
 
-    html,
+    html: html ? { content: htmlContent } : undefined,
 
     async verify({ credential }) {
       const { challenge } = credential
@@ -113,7 +113,7 @@ export declare namespace charge {
 
   type Parameters = {
     /** Render payment page when Accept header is text/html (e.g. in browsers) */
-    html?: Html.Options | undefined
+    html?: boolean | undefined
     /** Optional metadata to include in SPT creation requests. */
     metadata?: Record<string, string> | undefined
   } & Defaults &
diff --git a/src/stripe/server/internal/html/main.ts b/src/stripe/server/internal/html/main.ts
new file mode 100644
index 00000000..a514d9b1
--- /dev/null
+++ b/src/stripe/server/internal/html/main.ts
@@ -0,0 +1,13 @@
+import type * as Challenge from '../../../../Challenge.js'
+import type * as Methods from '../../../Methods.js'
+
+const data = JSON.parse(document.getElementById('__MPPX_DATA__')!.textContent!) as {
+  challenge: Challenge.FromMethods<[typeof Methods.charge]>
+}
+console.log(data.challenge)
+
+const root = document.getElementById('root')!
+
+const h2 = document.createElement('h2')
+h2.textContent = 'stripe'
+root.appendChild(h2)
diff --git a/src/stripe/server/internal/html/package.json b/src/stripe/server/internal/html/package.json
new file mode 100644
index 00000000..d2c26dfc
--- /dev/null
+++ b/src/stripe/server/internal/html/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@mppx/stripe-html",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@stripe/stripe-js": "8.9.0",
+    "mppx": "workspace:*"
+  }
+}
diff --git a/src/stripe/server/internal/html/tsconfig.json b/src/stripe/server/internal/html/tsconfig.json
new file mode 100644
index 00000000..ac01827c
--- /dev/null
+++ b/src/stripe/server/internal/html/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["es2022", "dom"],
+    "types": []
+  },
+  "include": ["./**/*.ts"]
+}
diff --git a/src/tempo/server/Charge.ts b/src/tempo/server/Charge.ts
index 6a51383d..419b40fc 100644
--- a/src/tempo/server/Charge.ts
+++ b/src/tempo/server/Charge.ts
@@ -12,7 +12,6 @@ import { Abis, Transaction } from 'viem/tempo'
 import * as Expires from '../../Expires.js'
 import type { LooseOmit, NoExtraKeys } from '../../internal/types.js'
 import * as Method from '../../Method.js'
-import type * as Html from '../../server/internal/html.js'
 import * as Store from '../../Store.js'
 import * as Client from '../../viem/Client.js'
 import * as Account from '../internal/account.js'
@@ -23,6 +22,7 @@ import * as FeePayer from '../internal/fee-payer.js'
 import * as Selectors from '../internal/selectors.js'
 import type * as types from '../internal/types.js'
 import * as Methods from '../Methods.js'
+import { html as htmlContent } from './internal/html.gen.js'
 
 /**
  * Creates a Tempo charge method intent for usage on the server.
@@ -73,7 +73,7 @@ export function charge<const parameters extends charge.Parameters>(
       recipient,
     } as unknown as Defaults,
 
-    html,
+    html: html ? { content: htmlContent } : undefined,
 
     // TODO: dedupe `{charge,session}.request`
     async request({ credential, request }) {
@@ -249,7 +249,7 @@ export declare namespace charge {
 
   type Parameters = {
     /** Render payment page when Accept header is text/html (e.g. in browsers) */
-    html?: Html.Options | undefined
+    html?: boolean | undefined
     /** Testnet mode. */
     testnet?: boolean | undefined
     /**
diff --git a/src/tempo/server/internal/html/main.ts b/src/tempo/server/internal/html/main.ts
new file mode 100644
index 00000000..6e981232
--- /dev/null
+++ b/src/tempo/server/internal/html/main.ts
@@ -0,0 +1,40 @@
+import { Provider } from 'accounts'
+import { Json } from 'ox'
+import { createClient, custom } from 'viem'
+
+import type * as Challenge from '../../../../Challenge.js'
+import { tempo } from '../../../../client/index.js'
+import type * as Methods from '../../../Methods.js'
+
+const data = Json.parse(document.getElementById('__MPPX_DATA__')!.textContent) as {
+  challenge: Challenge.FromMethods<[typeof Methods.charge]>
+}
+
+const provider = Provider.create()
+
+const root = document.getElementById('root')!
+
+const h2 = document.createElement('h2')
+h2.textContent = 'tempo'
+root.appendChild(h2)
+
+const button = document.createElement('button')
+button.textContent = 'Continue with Tempo'
+button.onclick = async () => {
+  const result = await provider.request({ method: 'wallet_connect' })
+  const account = result.accounts[0]!.address
+  console.log(account)
+
+  const chain =
+    provider.chains.find((x) => x.id === data.challenge.request.methodDetails?.chainId) ??
+    provider.chains.at(0)
+  const client = createClient({ chain, transport: custom(provider) })
+  const method = tempo({ account, getClient: () => client })[0]
+  const credential = await method.createCredential({ challenge: data.challenge, context: {} })
+
+  const res = await fetch(location.pathname, {
+    headers: { Authorization: credential },
+  })
+  console.log(await res.json())
+}
+root.appendChild(button)
diff --git a/src/tempo/server/internal/html/package.json b/src/tempo/server/internal/html/package.json
new file mode 100644
index 00000000..92fd942e
--- /dev/null
+++ b/src/tempo/server/internal/html/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@mppx/tempo-html",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "accounts": "https://pkg.pr.new/tempoxyz/accounts@d21e422",
+    "mppx": "workspace:*",
+    "viem": "2.47.5"
+  }
+}
diff --git a/src/tempo/server/internal/html/tsconfig.json b/src/tempo/server/internal/html/tsconfig.json
new file mode 100644
index 00000000..ac01827c
--- /dev/null
+++ b/src/tempo/server/internal/html/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["es2022", "dom"],
+    "types": []
+  },
+  "include": ["./**/*.ts"]
+}
diff --git a/src/tsconfig.json b/src/tsconfig.json
index 924c7ddc..528ff1a6 100644
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -6,5 +6,5 @@
     "types": ["node"]
   },
   "include": ["./**/*.ts"],
-  "exclude": ["./**/*.test.ts", "./**/*.test-d.ts"]
+  "exclude": ["./**/*.test.ts", "./**/*.test-d.ts", "./**/internal/html/**"]
 }

From 1e5ea788c80516d9ce4aa5b5d10bc3071b143a51 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Mon, 30 Mar 2026 21:55:30 -0400
Subject: [PATCH 03/28] wip: stripe html wired

---
 src/stripe/server/internal/html/main.ts | 72 ++++++++++++++++++++++++-
 1 file changed, 71 insertions(+), 1 deletion(-)

diff --git a/src/stripe/server/internal/html/main.ts b/src/stripe/server/internal/html/main.ts
index a514d9b1..9bfbd940 100644
--- a/src/stripe/server/internal/html/main.ts
+++ b/src/stripe/server/internal/html/main.ts
@@ -1,13 +1,83 @@
+import { loadStripe } from '@stripe/stripe-js'
+
 import type * as Challenge from '../../../../Challenge.js'
+import { stripe } from '../../../../client/index.js'
 import type * as Methods from '../../../Methods.js'
 
 const data = JSON.parse(document.getElementById('__MPPX_DATA__')!.textContent!) as {
   challenge: Challenge.FromMethods<[typeof Methods.charge]>
 }
-console.log(data.challenge)
 
 const root = document.getElementById('root')!
 
 const h2 = document.createElement('h2')
 h2.textContent = 'stripe'
 root.appendChild(h2)
+
+;(async () => {
+  const stripeJs = (await loadStripe(
+    'pk_test_51SzNfEGlV7dYX3N7FwZQBlWCF5wIqakWKw8lk1e4Saf0b2H4exVG5bBCAopgPQvo9QhU5TNsBuuIFbXSrvbBjut50090YN7Xip',
+  ))!
+  const darkQuery = window.matchMedia('(prefers-color-scheme: dark)')
+  const getAppearance = () => ({
+    theme: (darkQuery.matches ? 'night' : 'stripe') as 'night' | 'stripe',
+  })
+
+  const elements = stripeJs.elements({
+    amount: Number(data.challenge.request.amount),
+    appearance: getAppearance(),
+    currency: data.challenge.request.currency as string,
+    mode: 'payment',
+    paymentMethodCreation: 'manual',
+  })
+
+  darkQuery.addEventListener('change', () => {
+    elements.update({ appearance: getAppearance() })
+  })
+
+  const form = document.createElement('form')
+  elements.create('payment').mount(form)
+  root.appendChild(form)
+
+  const button = document.createElement('button')
+  button.textContent = 'Pay'
+  button.type = 'submit'
+  form.appendChild(button)
+
+  form.onsubmit = async (event) => {
+    event.preventDefault()
+    button.disabled = true
+
+    try {
+      await elements.submit()
+      const { paymentMethod, error } = await stripeJs.createPaymentMethod({ elements })
+      if (error || !paymentMethod) throw error ?? new Error('Failed to create payment method')
+
+      const method = stripe({
+        client: stripeJs,
+        createToken: async (opts) => {
+          const res = await fetch('/api/create-spt', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ paymentMethod, ...opts }),
+          })
+          if (!res.ok) throw new Error('Failed to create SPT')
+          const { spt } = (await res.json()) as { spt: string }
+          return spt
+        },
+      })[0]
+
+      const credential = await method.createCredential({
+        challenge: data.challenge,
+        context: { paymentMethod: paymentMethod.id },
+      })
+
+      const res = await fetch(location.pathname, {
+        headers: { Authorization: credential },
+      })
+      console.log(await res.json())
+    } finally {
+      button.disabled = false
+    }
+  }
+})()

From d23ebd5c41c3af1b5b989c6212c67df224edaaaf Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Mon, 30 Mar 2026 22:05:56 -0400
Subject: [PATCH 04/28] feat: stripe html wired

---
 examples/stripe/src/server.ts           |  5 ++++-
 src/server/Transport.ts                 |  5 ++++-
 src/server/internal/html.ts             |  1 +
 src/stripe/server/Charge.ts             |  4 ++--
 src/stripe/server/internal/html/main.ts | 10 ++++++----
 src/tempo/server/Charge.ts              |  2 +-
 6 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/examples/stripe/src/server.ts b/examples/stripe/src/server.ts
index aa7e701d..796d22d8 100644
--- a/examples/stripe/src/server.ts
+++ b/examples/stripe/src/server.ts
@@ -9,7 +9,10 @@ const mppx = Mppx.create({
   methods: [
     stripe.charge({
       client: stripeClient,
-      html: true,
+      html: {
+        publishableKey: process.env.VITE_STRIPE_PUBLIC_KEY!,
+        createTokenUrl: '/api/create-spt',
+      },
       // Stripe Business Network profile ID.
       networkId: 'internal',
       // Ensure only card is supported.
diff --git a/src/server/Transport.ts b/src/server/Transport.ts
index 8f5ec7e9..44b12fe1 100644
--- a/src/server/Transport.ts
+++ b/src/server/Transport.ts
@@ -135,7 +135,10 @@ export function http(): Http {
       const body = (() => {
         if (options.html && input.headers.get('Accept')?.includes('text/html')) {
           headers['Content-Type'] = 'text/html; charset=utf-8'
-          const data = Json.stringify({ challenge }).replace(/</g, '\\u003c')
+          const data = Json.stringify({ config: options.html.config, challenge }).replace(
+            /</g,
+            '\\u003c',
+          )
           const html = String.raw
           return html`<!doctype html>
             <html lang="en">
diff --git a/src/server/internal/html.ts b/src/server/internal/html.ts
index 149ad7c4..3b948dab 100644
--- a/src/server/internal/html.ts
+++ b/src/server/internal/html.ts
@@ -1,3 +1,4 @@
 export type Options = {
+  config: Record<string, unknown>
   content: string
 }
diff --git a/src/stripe/server/Charge.ts b/src/stripe/server/Charge.ts
index 505b527e..12a8dd7c 100644
--- a/src/stripe/server/Charge.ts
+++ b/src/stripe/server/Charge.ts
@@ -61,7 +61,7 @@ export function charge<const parameters extends charge.Parameters>(parameters: p
       paymentMethodTypes,
     } as unknown as Defaults,
 
-    html: html ? { content: htmlContent } : undefined,
+    html: html ? { config: html, content: htmlContent } : undefined,
 
     async verify({ credential }) {
       const { challenge } = credential
@@ -113,7 +113,7 @@ export declare namespace charge {
 
   type Parameters = {
     /** Render payment page when Accept header is text/html (e.g. in browsers) */
-    html?: boolean | undefined
+    html?: { createTokenUrl: string; publishableKey: string } | undefined
     /** Optional metadata to include in SPT creation requests. */
     metadata?: Record<string, string> | undefined
   } & Defaults &
diff --git a/src/stripe/server/internal/html/main.ts b/src/stripe/server/internal/html/main.ts
index 9bfbd940..e2ae7bf6 100644
--- a/src/stripe/server/internal/html/main.ts
+++ b/src/stripe/server/internal/html/main.ts
@@ -2,9 +2,11 @@ import { loadStripe } from '@stripe/stripe-js'
 
 import type * as Challenge from '../../../../Challenge.js'
 import { stripe } from '../../../../client/index.js'
+import type { charge } from '../../../../stripe/server/Charge.js'
 import type * as Methods from '../../../Methods.js'
 
 const data = JSON.parse(document.getElementById('__MPPX_DATA__')!.textContent!) as {
+  config: NonNullable<charge.Parameters['html']>
   challenge: Challenge.FromMethods<[typeof Methods.charge]>
 }
 
@@ -15,9 +17,9 @@ h2.textContent = 'stripe'
 root.appendChild(h2)
 
 ;(async () => {
-  const stripeJs = (await loadStripe(
-    'pk_test_51SzNfEGlV7dYX3N7FwZQBlWCF5wIqakWKw8lk1e4Saf0b2H4exVG5bBCAopgPQvo9QhU5TNsBuuIFbXSrvbBjut50090YN7Xip',
-  ))!
+  const stripeJs = (await loadStripe(data.config.publishableKey))!
+  if (!stripeJs) throw new Error('Failed to loadStripe')
+
   const darkQuery = window.matchMedia('(prefers-color-scheme: dark)')
   const getAppearance = () => ({
     theme: (darkQuery.matches ? 'night' : 'stripe') as 'night' | 'stripe',
@@ -56,7 +58,7 @@ root.appendChild(h2)
       const method = stripe({
         client: stripeJs,
         createToken: async (opts) => {
-          const res = await fetch('/api/create-spt', {
+          const res = await fetch(data.config.createTokenUrl, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ paymentMethod, ...opts }),
diff --git a/src/tempo/server/Charge.ts b/src/tempo/server/Charge.ts
index 419b40fc..a7e6fcb3 100644
--- a/src/tempo/server/Charge.ts
+++ b/src/tempo/server/Charge.ts
@@ -73,7 +73,7 @@ export function charge<const parameters extends charge.Parameters>(
       recipient,
     } as unknown as Defaults,
 
-    html: html ? { content: htmlContent } : undefined,
+    html: html ? { config: {}, content: htmlContent } : undefined,
 
     // TODO: dedupe `{charge,session}.request`
     async request({ credential, request }) {

From 389cd1d765cb1e58994c19bef3b39291626705ab Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Mon, 30 Mar 2026 22:36:22 -0400
Subject: [PATCH 05/28] refactor: server html dir

---
 scripts/build:html.ts                         | 32 +++++++++++++++++--
 src/Method.ts                                 |  2 +-
 src/server/Transport.ts                       | 13 +++++++-
 .../internal/html/serviceWorker.client.ts     | 22 +++++++++++++
 src/server/internal/html/serviceWorker.ts     | 22 +++++++++++++
 .../internal/html/tsconfig.worker.client.json |  8 +++++
 src/server/internal/html/tsconfig.worker.json |  8 +++++
 .../internal/{html.ts => html/types.ts}       |  0
 src/stripe/server/internal/html/main.ts       |  6 ++--
 src/tempo/server/internal/html/main.ts        | 30 ++++++++---------
 tsconfig.json                                 |  7 +++-
 vite.config.ts                                |  2 +-
 12 files changed, 126 insertions(+), 26 deletions(-)
 create mode 100644 src/server/internal/html/serviceWorker.client.ts
 create mode 100644 src/server/internal/html/serviceWorker.ts
 create mode 100644 src/server/internal/html/tsconfig.worker.client.json
 create mode 100644 src/server/internal/html/tsconfig.worker.json
 rename src/server/internal/{html.ts => html/types.ts} (100%)

diff --git a/scripts/build:html.ts b/scripts/build:html.ts
index 88563f79..2f73f467 100644
--- a/scripts/build:html.ts
+++ b/scripts/build:html.ts
@@ -4,14 +4,15 @@ import path from 'node:path'
 import { build } from 'rolldown'
 
 const root = path.resolve(import.meta.dirname, '..')
+const outDir = path.resolve(root, '.tmp/html-build')
 
-const entries = [
+// HTML entries — bundled into <script> tags
+const htmlEntries = [
   'src/tempo/server/internal/html/main.ts',
   'src/stripe/server/internal/html/main.ts',
 ]
 
-for (const entry of entries) {
-  const outDir = path.resolve(root, '.tmp/html-build')
+for (const entry of htmlEntries) {
   const outFile = path.resolve(root, path.dirname(entry), '..', 'html.gen.ts')
 
   await build({
@@ -33,3 +34,28 @@ for (const entry of entries) {
   fs.rmSync(outDir, { recursive: true })
   console.log(`wrote ${path.relative(root, outFile)}`)
 }
+
+// Service worker — bundled as raw JS string
+{
+  const entry = 'src/server/internal/html/serviceWorker.ts'
+  const outFile = path.resolve(root, 'src/server/internal/html/serviceWorker.gen.ts')
+
+  await build({
+    input: path.resolve(root, entry),
+    output: {
+      dir: outDir,
+      format: 'iife',
+      minify: true,
+    },
+  })
+
+  const jsFile = fs.readdirSync(outDir).find((f) => f.endsWith('.js'))
+  if (!jsFile) throw new Error(`No .js output found for ${entry}`)
+
+  const code = fs.readFileSync(path.join(outDir, jsFile), 'utf8').trim()
+  const content = `// Generated — do not edit.\nexport const serviceWorker = ${JSON.stringify(code)}\n`
+
+  fs.writeFileSync(outFile, content)
+  fs.rmSync(outDir, { recursive: true })
+  console.log(`wrote ${path.relative(root, outFile)}`)
+}
diff --git a/src/Method.ts b/src/Method.ts
index 9fd3aba3..b50961a1 100755
--- a/src/Method.ts
+++ b/src/Method.ts
@@ -2,7 +2,7 @@ import type * as Challenge from './Challenge.js'
 import type * as Credential from './Credential.js'
 import type { ExactPartial, LooseOmit, MaybePromise } from './internal/types.js'
 import type * as Receipt from './Receipt.js'
-import type * as Html from './server/internal/html.js'
+import type * as Html from './server/internal/html/types.js'
 import type * as Transport from './server/Transport.js'
 import type * as z from './zod.js'
 
diff --git a/src/server/Transport.ts b/src/server/Transport.ts
index 44b12fe1..e9513f44 100644
--- a/src/server/Transport.ts
+++ b/src/server/Transport.ts
@@ -6,7 +6,8 @@ import * as Errors from '../Errors.js'
 import type { Distribute, UnionToIntersection } from '../internal/types.js'
 import * as core_Mcp from '../Mcp.js'
 import * as Receipt from '../Receipt.js'
-import type * as Html from './internal/html.js'
+import { serviceWorker } from './internal/html/serviceWorker.gen.js'
+import type * as Html from './internal/html/types.js'
 
 export { type McpSdk, mcpSdk } from '../mcp-sdk/server/Transport.js'
 
@@ -127,6 +128,16 @@ export function http(): Http {
 
     respondChallenge(options) {
       const { challenge, error, input } = options
+
+      if (options.html && new URL(input.url).searchParams.has('__mppx_worker'))
+        return new Response(serviceWorker, {
+          status: 200,
+          headers: {
+            'Content-Type': 'application/javascript',
+            'Cache-Control': 'no-store',
+          },
+        })
+
       const headers: Record<string, string> = {
         'WWW-Authenticate': Challenge.serialize(challenge),
         'Cache-Control': 'no-store',
diff --git a/src/server/internal/html/serviceWorker.client.ts b/src/server/internal/html/serviceWorker.client.ts
new file mode 100644
index 00000000..0fde0518
--- /dev/null
+++ b/src/server/internal/html/serviceWorker.client.ts
@@ -0,0 +1,22 @@
+export async function submitCredential(credential: string): Promise<void> {
+  const url = new URL(location.href)
+  url.searchParams.set('__mppx_worker', '')
+
+  const registration = await navigator.serviceWorker.register(url.pathname + url.search)
+
+  const sw = await new Promise<ServiceWorker>((resolve) => {
+    const worker = registration.installing ?? registration.waiting ?? registration.active
+    if (worker?.state === 'activated') return resolve(worker)
+    const target = worker ?? registration
+    target.addEventListener('statechange', function handler() {
+      const active = registration.active
+      if (active?.state === 'activated') {
+        target.removeEventListener('statechange', handler)
+        resolve(active)
+      }
+    })
+  })
+
+  sw.postMessage({ credential })
+  location.reload()
+}
diff --git a/src/server/internal/html/serviceWorker.ts b/src/server/internal/html/serviceWorker.ts
new file mode 100644
index 00000000..e5fda771
--- /dev/null
+++ b/src/server/internal/html/serviceWorker.ts
@@ -0,0 +1,22 @@
+const sw = self as unknown as ServiceWorkerGlobalScope
+
+let credential: string | undefined
+
+sw.addEventListener('activate', (event) => {
+  event.waitUntil(sw.clients.claim())
+})
+
+sw.addEventListener('message', (event) => {
+  credential = event.data?.credential
+})
+
+sw.addEventListener('fetch', (event) => {
+  if (!credential || event.request.mode !== 'navigate') return
+
+  const headers = new Headers(event.request.headers)
+  headers.set('Authorization', credential)
+  credential = undefined
+
+  event.respondWith(fetch(event.request, { headers }))
+  sw.registration.unregister()
+})
diff --git a/src/server/internal/html/tsconfig.worker.client.json b/src/server/internal/html/tsconfig.worker.client.json
new file mode 100644
index 00000000..aa58380f
--- /dev/null
+++ b/src/server/internal/html/tsconfig.worker.client.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["es2022", "dom"],
+    "types": []
+  },
+  "include": ["serviceWorker.client.ts"]
+}
diff --git a/src/server/internal/html/tsconfig.worker.json b/src/server/internal/html/tsconfig.worker.json
new file mode 100644
index 00000000..4a7d0075
--- /dev/null
+++ b/src/server/internal/html/tsconfig.worker.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["es2022", "webworker"],
+    "types": []
+  },
+  "include": ["serviceWorker.ts"]
+}
diff --git a/src/server/internal/html.ts b/src/server/internal/html/types.ts
similarity index 100%
rename from src/server/internal/html.ts
rename to src/server/internal/html/types.ts
diff --git a/src/stripe/server/internal/html/main.ts b/src/stripe/server/internal/html/main.ts
index e2ae7bf6..f7834746 100644
--- a/src/stripe/server/internal/html/main.ts
+++ b/src/stripe/server/internal/html/main.ts
@@ -2,6 +2,7 @@ import { loadStripe } from '@stripe/stripe-js'
 
 import type * as Challenge from '../../../../Challenge.js'
 import { stripe } from '../../../../client/index.js'
+import { submitCredential } from '../../../../server/internal/html/serviceWorker.client.js'
 import type { charge } from '../../../../stripe/server/Charge.js'
 import type * as Methods from '../../../Methods.js'
 
@@ -74,10 +75,7 @@ root.appendChild(h2)
         context: { paymentMethod: paymentMethod.id },
       })
 
-      const res = await fetch(location.pathname, {
-        headers: { Authorization: credential },
-      })
-      console.log(await res.json())
+      await submitCredential(credential)
     } finally {
       button.disabled = false
     }
diff --git a/src/tempo/server/internal/html/main.ts b/src/tempo/server/internal/html/main.ts
index 6e981232..ab013a3b 100644
--- a/src/tempo/server/internal/html/main.ts
+++ b/src/tempo/server/internal/html/main.ts
@@ -4,6 +4,7 @@ import { createClient, custom } from 'viem'
 
 import type * as Challenge from '../../../../Challenge.js'
 import { tempo } from '../../../../client/index.js'
+import { submitCredential } from '../../../../server/internal/html/serviceWorker.client.js'
 import type * as Methods from '../../../Methods.js'
 
 const data = Json.parse(document.getElementById('__MPPX_DATA__')!.textContent) as {
@@ -11,6 +12,10 @@ const data = Json.parse(document.getElementById('__MPPX_DATA__')!.textContent) a
 }
 
 const provider = Provider.create()
+const chain =
+  provider.chains.find((x) => x.id === data.challenge.request.methodDetails?.chainId) ??
+  provider.chains.at(0)
+const client = createClient({ chain, transport: custom(provider) })
 
 const root = document.getElementById('root')!
 
@@ -21,20 +26,15 @@ root.appendChild(h2)
 const button = document.createElement('button')
 button.textContent = 'Continue with Tempo'
 button.onclick = async () => {
-  const result = await provider.request({ method: 'wallet_connect' })
-  const account = result.accounts[0]!.address
-  console.log(account)
-
-  const chain =
-    provider.chains.find((x) => x.id === data.challenge.request.methodDetails?.chainId) ??
-    provider.chains.at(0)
-  const client = createClient({ chain, transport: custom(provider) })
-  const method = tempo({ account, getClient: () => client })[0]
-  const credential = await method.createCredential({ challenge: data.challenge, context: {} })
-
-  const res = await fetch(location.pathname, {
-    headers: { Authorization: credential },
-  })
-  console.log(await res.json())
+  try {
+    button.disabled = true
+    const result = await provider.request({ method: 'wallet_connect' })
+    const account = result.accounts[0]!.address
+    const method = tempo({ account, getClient: () => client })[0]
+    const credential = await method.createCredential({ challenge: data.challenge, context: {} })
+    await submitCredential(credential)
+  } finally {
+    button.disabled = false
+  }
 }
 root.appendChild(button)
diff --git a/tsconfig.json b/tsconfig.json
index bba8fd6d..aac76729 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,5 +6,10 @@
     "strict": true
   },
   "files": [],
-  "references": [{ "path": "./src" }, { "path": "./test" }]
+  "references": [
+    { "path": "./src" },
+    { "path": "./src/server/internal/html/tsconfig.worker.client.json" },
+    { "path": "./src/server/internal/html/tsconfig.worker.json" },
+    { "path": "./test" }
+  ]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 2a43d41b..2c87d687 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -109,7 +109,7 @@ export default defineConfig({
       'no-control-regex': 'off',
     },
     settings: {
-      polyfills: ['PaymentRequest', 'URLPattern', 'crypto'],
+      polyfills: ['PaymentRequest', 'URLPattern', 'crypto', 'navigator'],
     },
     overrides: [
       {

From 6efdba05426b91abba79f5ae70ef02ba96d0bb36 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 00:46:08 -0400
Subject: [PATCH 06/28] test: basic test setup

---
 .gitignore                             |  1 +
 package.json                           |  4 +-
 pnpm-lock.yaml                         | 12 +++++
 scripts/build:html.ts                  |  5 ++
 src/tempo/server/internal/html/main.ts | 20 ++++++--
 test/html/charge.test.ts               | 30 ++++++++++++
 test/html/globalSetup.ts               | 11 +++++
 test/html/playwright.config.ts         | 67 ++++++++++++++++++++++++++
 test/html/setup.ts                     | 14 ++++++
 test/html/stripe.test.ts               | 54 +++++++++++++++++++++
 10 files changed, 214 insertions(+), 4 deletions(-)
 create mode 100644 test/html/charge.test.ts
 create mode 100644 test/html/globalSetup.ts
 create mode 100644 test/html/playwright.config.ts
 create mode 100644 test/html/setup.ts
 create mode 100644 test/html/stripe.test.ts

diff --git a/.gitignore b/.gitignore
index 8e89b159..76d9290e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ coverage
 .env
 .env.*
 !.env.example
+test-results/
diff --git a/package.json b/package.json
index 268b934e..4c99e1ce 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
     "dev": "zile dev",
     "dev:example": "node scripts/dev:example.ts",
     "mppx": "node --import tsx src/bin.ts",
-    "test": "vp test"
+    "test": "vp test",
+    "test:e2e": "playwright test --config test/html/playwright.config.ts"
   },
   "browserslist": [
     "defaults",
@@ -29,6 +30,7 @@
     "@changesets/cli": "^2.30.0",
     "@hono/node-server": "^1.19.9",
     "@modelcontextprotocol/sdk": "^1.25.3",
+    "@playwright/test": "^1.58.2",
     "@types/express": "^5.0.6",
     "@types/node": "^25.5.0",
     "@typescript/native-preview": "7.0.0-dev.20260323.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dcc5cec9..23f08f40 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,6 +57,9 @@ importers:
       '@modelcontextprotocol/sdk':
         specifier: 1.26.0
         version: 1.26.0(zod@4.3.6)
+      '@playwright/test':
+        specifier: ^1.58.2
+        version: 1.58.2
       '@types/express':
         specifier: ^5.0.6
         version: 5.0.6
@@ -1123,6 +1126,11 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@playwright/test@1.58.2':
+    resolution: {integrity: sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
@@ -4540,6 +4548,10 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@playwright/test@1.58.2':
+    dependencies:
+      playwright: 1.58.2
+
   '@polka/url@1.0.0-next.29': {}
 
   '@protobufjs/aspromise@1.1.2': {}
diff --git a/scripts/build:html.ts b/scripts/build:html.ts
index 2f73f467..73f923fa 100644
--- a/scripts/build:html.ts
+++ b/scripts/build:html.ts
@@ -17,6 +17,11 @@ for (const entry of htmlEntries) {
 
   await build({
     input: path.resolve(root, entry),
+    transform: {
+      define: {
+        __LOCAL_ACCOUNT__: JSON.stringify(process.env.LOCAL_ACCOUNT ?? ''),
+      },
+    },
     output: {
       dir: outDir,
       format: 'iife',
diff --git a/src/tempo/server/internal/html/main.ts b/src/tempo/server/internal/html/main.ts
index ab013a3b..480a8585 100644
--- a/src/tempo/server/internal/html/main.ts
+++ b/src/tempo/server/internal/html/main.ts
@@ -1,6 +1,7 @@
-import { Provider } from 'accounts'
-import { Json } from 'ox'
+import { local, Provider } from 'accounts'
+import { Hex, Json } from 'ox'
 import { createClient, custom } from 'viem'
+import { Account } from 'viem/tempo'
 
 import type * as Challenge from '../../../../Challenge.js'
 import { tempo } from '../../../../client/index.js'
@@ -11,7 +12,20 @@ const data = Json.parse(document.getElementById('__MPPX_DATA__')!.textContent) a
   challenge: Challenge.FromMethods<[typeof Methods.charge]>
 }
 
-const provider = Provider.create()
+const localAccount = (typeof __LOCAL_ACCOUNT__ === 'string' && __LOCAL_ACCOUNT__) || undefined
+declare const __LOCAL_ACCOUNT__: string | undefined
+
+const provider = Provider.create(
+  localAccount
+    ? {
+        adapter: local({
+          loadAccounts: async () => ({
+            accounts: [Account.fromSecp256k1(localAccount as Hex.Hex)],
+          }),
+        }),
+      }
+    : undefined,
+)
 const chain =
   provider.chains.find((x) => x.id === data.challenge.request.methodDetails?.chainId) ??
   provider.chains.at(0)
diff --git a/test/html/charge.test.ts b/test/html/charge.test.ts
new file mode 100644
index 00000000..6bfb6c85
--- /dev/null
+++ b/test/html/charge.test.ts
@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test'
+
+import { setup } from './setup.js'
+
+test.beforeAll(async () => {
+  await setup()
+})
+
+test('charge via html payment page', async ({ page }) => {
+  // Navigate to the payment endpoint as a browser
+  await page.goto('/api/photo', {
+    waitUntil: 'domcontentloaded',
+  })
+
+  // Verify 402 payment page rendered
+  await expect(page.locator('h1')).toHaveText('Payment Required')
+  await expect(page.getByText('Continue with Tempo')).toBeVisible()
+
+  // Click the pay button — local adapter signs without dialog
+  await page.getByText('Continue with Tempo').click()
+
+  // Wait for service worker to submit credential and page to reload with paid response
+  // await expect(page.locator('body')).toContainText('"url":', { timeout: 30_000 })
+})
+
+test('service worker endpoint returns javascript', async ({ page }) => {
+  const response = await page.goto('/api/photo?__mppx_worker')
+  expect(response?.headers()['content-type']).toContain('application/javascript')
+  expect(response?.status()).toBe(200)
+})
diff --git a/test/html/globalSetup.ts b/test/html/globalSetup.ts
new file mode 100644
index 00000000..20e592d5
--- /dev/null
+++ b/test/html/globalSetup.ts
@@ -0,0 +1,11 @@
+import { execSync } from 'node:child_process'
+
+const privateKey = '0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d'
+const root = new URL('../..', import.meta.url).pathname
+
+export default function globalSetup() {
+  execSync(`LOCAL_ACCOUNT=${privateKey} pnpm build`, {
+    cwd: root,
+    stdio: 'inherit',
+  })
+}
diff --git a/test/html/playwright.config.ts b/test/html/playwright.config.ts
new file mode 100644
index 00000000..0137487d
--- /dev/null
+++ b/test/html/playwright.config.ts
@@ -0,0 +1,67 @@
+import net from 'node:net'
+
+import { defineConfig } from '@playwright/test'
+
+const project = process.argv.find((_, i, a) => a[i - 1] === '--project')
+
+const chargePort = await getPort('_MPPX_CHARGE_PORT')
+const stripePort = await getPort('_MPPX_STRIPE_PORT')
+
+export default defineConfig({
+  globalSetup: './globalSetup.ts',
+  testDir: '.',
+  testMatch: '*.test.ts',
+  timeout: 60_000,
+  retries: 1,
+  use: {
+    headless: true,
+  },
+  projects: [
+    {
+      name: 'charge',
+      testMatch: 'charge.test.ts',
+      use: { baseURL: `http://localhost:${chargePort}` },
+    },
+    {
+      name: 'stripe',
+      testMatch: 'stripe.test.ts',
+      use: { baseURL: `http://localhost:${stripePort}` },
+    },
+  ],
+  webServer: [
+    ...(!project || project === 'charge'
+      ? [
+          {
+            command: `pnpm --filter charge dev -- --port ${chargePort}`,
+            port: chargePort,
+            reuseExistingServer: !process.env.CI,
+            timeout: 30_000,
+          },
+        ]
+      : []),
+    ...(!project || project === 'stripe'
+      ? [
+          {
+            command: `pnpm --filter stripe dev -- --port ${stripePort}`,
+            port: stripePort,
+            reuseExistingServer: !process.env.CI,
+            timeout: 30_000,
+          },
+        ]
+      : []),
+  ],
+})
+
+async function getPort(envKey: string): Promise<number> {
+  if (process.env[envKey]) return Number(process.env[envKey])
+  const port = await new Promise<number>((resolve, reject) => {
+    const server = net.createServer()
+    server.listen(0, () => {
+      const port = (server.address() as net.AddressInfo).port
+      server.close(() => resolve(port))
+    })
+    server.on('error', reject)
+  })
+  process.env[envKey] = String(port)
+  return port
+}
diff --git a/test/html/setup.ts b/test/html/setup.ts
new file mode 100644
index 00000000..05cb4a47
--- /dev/null
+++ b/test/html/setup.ts
@@ -0,0 +1,14 @@
+import { createClient, http } from 'viem'
+import { privateKeyToAccount } from 'viem/accounts'
+import { tempoModerato } from 'viem/chains'
+import { Actions } from 'viem/tempo'
+
+export const privateKey = '0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d'
+export const account = privateKeyToAccount(privateKey)
+
+export async function setup() {
+  // Fund the test payer account via faucet
+  const client = createClient({ chain: tempoModerato, transport: http() })
+  await Actions.faucet.fundSync(client, { account })
+  console.log(`funded ${account.address}`)
+}
diff --git a/test/html/stripe.test.ts b/test/html/stripe.test.ts
new file mode 100644
index 00000000..8656c61c
--- /dev/null
+++ b/test/html/stripe.test.ts
@@ -0,0 +1,54 @@
+import { expect, test } from '@playwright/test'
+
+import { setup } from './setup.js'
+
+test.beforeAll(async () => {
+  await setup()
+})
+
+test('charge via stripe html payment page', async ({ page }) => {
+  await page.goto('/api/fortune', {
+    waitUntil: 'domcontentloaded',
+  })
+
+  // Verify 402 payment page rendered
+  await expect(page.locator('h1')).toHaveText('Payment Required')
+  await expect(page.getByRole('button', { name: 'Pay' })).toBeVisible()
+
+  // Wait for Stripe Payment Element iframe to load
+  const stripeFrame = page.frameLocator('iframe[name^="__privateStripeFrame"]').first()
+  const cardButton = stripeFrame.locator('[data-value="card"]')
+  await expect(cardButton).toBeVisible({ timeout: 15_000 })
+
+  // Card option is collapsed by default — click to expand, wait for inputs to render
+  await cardButton.click()
+  await page.waitForTimeout(1_000)
+
+  // Wait for card inputs to appear and fill test card details
+  const numberInput = stripeFrame.locator('[name="number"]')
+  await expect(numberInput).toBeVisible({ timeout: 15_000 })
+  await numberInput.fill('4242424242424242')
+  await stripeFrame.locator('[name="expiry"]').fill('12/34')
+  await stripeFrame.locator('[name="cvc"]').fill('123')
+
+  // Fill postal code if visible
+  const postalCode = stripeFrame.locator('[name="postalCode"]')
+  if (await postalCode.isVisible({ timeout: 2_000 }).catch(() => false)) {
+    await postalCode.fill('10001')
+  }
+
+  // Wait for Stripe Elements to settle
+  await page.waitForTimeout(500)
+
+  // Submit payment
+  await page.getByRole('button', { name: 'Pay' }).click()
+
+  // Wait for service worker to submit credential and page to reload with paid response
+  await expect(page.locator('body')).toContainText('"fortune":')
+})
+
+test('service worker endpoint returns javascript', async ({ page }) => {
+  const response = await page.goto('/api/fortune?__mppx_worker')
+  expect(response?.headers()['content-type']).toContain('application/javascript')
+  expect(response?.status()).toBe(200)
+})

From 35ca28c1200e4c89e2c712bebda731777fb16028 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 01:02:11 -0400
Subject: [PATCH 07/28] test: html e2e

---
 .github/workflows/verify.yml           | 53 +++++++++++++++++++++++++-
 src/tempo/server/internal/html/main.ts | 15 +++++---
 test/html/charge.test.ts               |  2 +-
 test/html/playwright.config.ts         | 16 ++++----
 4 files changed, 71 insertions(+), 15 deletions(-)

diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml
index 1b164491..8dbe1c20 100644
--- a/.github/workflows/verify.yml
+++ b/.github/workflows/verify.yml
@@ -10,7 +10,7 @@ jobs:
   ci-gate:
     name: CI Gate
     if: always()
-    needs: [checks, test]
+    needs: [checks, test, test-e2e]
     runs-on: ubuntu-latest
     steps:
       - run: |
@@ -108,3 +108,54 @@ jobs:
           pnpm run test --bail=1
         env:
           CI: true
+
+  test-html:
+    name: Test HTML
+    runs-on: ubuntu-latest
+    env:
+      VITE_TEMPO_TAG: sha-20aecec
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup Docker
+        uses: docker/setup-docker-action@e43656e248c0bd0647d3f5c195d116aacf6fcaf4 # v4.7.0
+
+      - name: Install dependencies
+        uses: ./.github/actions/install-dependencies
+
+      - name: Cache Playwright browsers
+        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-chromium-${{ hashFiles('pnpm-lock.yaml') }}
+
+      - name: Install Playwright browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install chromium
+
+      - name: Install Playwright system deps
+        run: pnpm exec playwright install-deps chromium
+
+      - name: Cache Tempo Docker image
+        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
+        id: docker-cache
+        with:
+          path: /tmp/tempo-image.tar
+          key: tempo-image-${{ env.VITE_TEMPO_TAG }}
+
+      - name: Load cached Tempo image
+        if: steps.docker-cache.outputs.cache-hit == 'true'
+        run: docker load -i /tmp/tempo-image.tar
+
+      - name: Pull and cache Tempo image
+        if: steps.docker-cache.outputs.cache-hit != 'true'
+        run: |
+          docker pull ghcr.io/tempoxyz/tempo:${VITE_TEMPO_TAG}
+          docker save ghcr.io/tempoxyz/tempo:${VITE_TEMPO_TAG} -o /tmp/tempo-image.tar
+
+      - name: Run E2E tests
+        run: pnpm run test:e2e
+        env:
+          CI: true
diff --git a/src/tempo/server/internal/html/main.ts b/src/tempo/server/internal/html/main.ts
index 480a8585..d4296877 100644
--- a/src/tempo/server/internal/html/main.ts
+++ b/src/tempo/server/internal/html/main.ts
@@ -1,6 +1,7 @@
-import { local, Provider } from 'accounts'
+import { local, Provider, Storage } from 'accounts'
 import { Hex, Json } from 'ox'
 import { createClient, custom } from 'viem'
+import { tempoModerato, tempoLocalnet } from 'viem/chains'
 import { Account } from 'viem/tempo'
 
 import type * as Challenge from '../../../../Challenge.js'
@@ -15,17 +16,21 @@ const data = Json.parse(document.getElementById('__MPPX_DATA__')!.textContent) a
 const localAccount = (typeof __LOCAL_ACCOUNT__ === 'string' && __LOCAL_ACCOUNT__) || undefined
 declare const __LOCAL_ACCOUNT__: string | undefined
 
-const provider = Provider.create(
-  localAccount
+const provider = Provider.create({
+  testnet:
+    data.challenge.request.methodDetails?.chainId === tempoModerato.id ||
+    data.challenge.request.methodDetails?.chainId === tempoLocalnet.id,
+  ...(localAccount
     ? {
         adapter: local({
           loadAccounts: async () => ({
             accounts: [Account.fromSecp256k1(localAccount as Hex.Hex)],
           }),
         }),
+        storage: Storage.memory(),
       }
-    : undefined,
-)
+    : undefined),
+})
 const chain =
   provider.chains.find((x) => x.id === data.challenge.request.methodDetails?.chainId) ??
   provider.chains.at(0)
diff --git a/test/html/charge.test.ts b/test/html/charge.test.ts
index 6bfb6c85..0c00a9f2 100644
--- a/test/html/charge.test.ts
+++ b/test/html/charge.test.ts
@@ -20,7 +20,7 @@ test('charge via html payment page', async ({ page }) => {
   await page.getByText('Continue with Tempo').click()
 
   // Wait for service worker to submit credential and page to reload with paid response
-  // await expect(page.locator('body')).toContainText('"url":', { timeout: 30_000 })
+  await expect(page.locator('body')).toContainText('"url":', { timeout: 30_000 })
 })
 
 test('service worker endpoint returns javascript', async ({ page }) => {
diff --git a/test/html/playwright.config.ts b/test/html/playwright.config.ts
index 0137487d..a393a1cb 100644
--- a/test/html/playwright.config.ts
+++ b/test/html/playwright.config.ts
@@ -4,7 +4,7 @@ import { defineConfig } from '@playwright/test'
 
 const project = process.argv.find((_, i, a) => a[i - 1] === '--project')
 
-const chargePort = await getPort('_MPPX_CHARGE_PORT')
+const tempoPort = await getPort('_MPPX_TEMPO_PORT')
 const stripePort = await getPort('_MPPX_STRIPE_PORT')
 
 export default defineConfig({
@@ -18,9 +18,9 @@ export default defineConfig({
   },
   projects: [
     {
-      name: 'charge',
+      name: 'tempo',
       testMatch: 'charge.test.ts',
-      use: { baseURL: `http://localhost:${chargePort}` },
+      use: { baseURL: `http://localhost:${tempoPort}` },
     },
     {
       name: 'stripe',
@@ -29,12 +29,12 @@ export default defineConfig({
     },
   ],
   webServer: [
-    ...(!project || project === 'charge'
+    ...(!project || project === 'tempo'
       ? [
           {
-            command: `pnpm --filter charge dev -- --port ${chargePort}`,
-            port: chargePort,
-            reuseExistingServer: !process.env.CI,
+            command: `pnpm --filter charge dev -- --port ${tempoPort}`,
+            port: tempoPort,
+            reuseExistingServer: false,
             timeout: 30_000,
           },
         ]
@@ -44,7 +44,7 @@ export default defineConfig({
           {
             command: `pnpm --filter stripe dev -- --port ${stripePort}`,
             port: stripePort,
-            reuseExistingServer: !process.env.CI,
+            reuseExistingServer: false,
             timeout: 30_000,
           },
         ]

From 50b7dc505d880fe5a0fc2e901861da5d986ad769 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 01:12:58 -0400
Subject: [PATCH 08/28] chore: up

---
 .github/workflows/verify.yml              |  2 +-
 src/server/Transport.ts                   |  7 ++++++-
 src/server/internal/html/serviceWorker.ts | 18 +++++++++++-------
 src/stripe/server/internal/html/main.ts   |  5 ++++-
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml
index 8dbe1c20..d57c1682 100644
--- a/.github/workflows/verify.yml
+++ b/.github/workflows/verify.yml
@@ -10,7 +10,7 @@ jobs:
   ci-gate:
     name: CI Gate
     if: always()
-    needs: [checks, test, test-e2e]
+    needs: [checks, test, test-html]
     runs-on: ubuntu-latest
     steps:
       - run: |
diff --git a/src/server/Transport.ts b/src/server/Transport.ts
index e9513f44..3422cbf0 100644
--- a/src/server/Transport.ts
+++ b/src/server/Transport.ts
@@ -165,7 +165,12 @@ export function http(): Http {
               </head>
               <body>
                 <h1>Payment Required</h1>
-                <pre>${Json.stringify(challenge, null, 2)}</pre>
+                <pre>
+${Json.stringify(challenge, null, 2)
+                    .replace(/&/g, '&amp;')
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;')}</pre
+                >
                 <div id="root"></div>
                 <script id="__MPPX_DATA__" type="application/json">
                   ${data}
diff --git a/src/server/internal/html/serviceWorker.ts b/src/server/internal/html/serviceWorker.ts
index e5fda771..b94ead6d 100644
--- a/src/server/internal/html/serviceWorker.ts
+++ b/src/server/internal/html/serviceWorker.ts
@@ -1,22 +1,26 @@
-const sw = self as unknown as ServiceWorkerGlobalScope
+const serviceWorker = self as unknown as ServiceWorkerGlobalScope
 
 let credential: string | undefined
 
-sw.addEventListener('activate', (event) => {
-  event.waitUntil(sw.clients.claim())
+serviceWorker.addEventListener('activate', (event) => {
+  event.waitUntil(serviceWorker.clients.claim())
 })
 
-sw.addEventListener('message', (event) => {
-  credential = event.data?.credential
+serviceWorker.addEventListener('message', (event) => {
+  if (!(event.source instanceof Client)) return
+  const value = event.data?.credential
+  if (typeof value !== 'string' || !value.startsWith('Payment ')) return
+  credential = value
 })
 
-sw.addEventListener('fetch', (event) => {
+serviceWorker.addEventListener('fetch', (event) => {
   if (!credential || event.request.mode !== 'navigate') return
+  if (new URL(event.request.url).origin !== serviceWorker.location.origin) return
 
   const headers = new Headers(event.request.headers)
   headers.set('Authorization', credential)
   credential = undefined
 
   event.respondWith(fetch(event.request, { headers }))
-  sw.registration.unregister()
+  serviceWorker.registration.unregister()
 })
diff --git a/src/stripe/server/internal/html/main.ts b/src/stripe/server/internal/html/main.ts
index f7834746..57fde285 100644
--- a/src/stripe/server/internal/html/main.ts
+++ b/src/stripe/server/internal/html/main.ts
@@ -59,7 +59,10 @@ root.appendChild(h2)
       const method = stripe({
         client: stripeJs,
         createToken: async (opts) => {
-          const res = await fetch(data.config.createTokenUrl, {
+          const createTokenUrl = new URL(data.config.createTokenUrl, location.origin)
+          if (createTokenUrl.origin !== location.origin)
+            throw new Error('createTokenUrl must be same-origin')
+          const res = await fetch(createTokenUrl, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ paymentMethod, ...opts }),

From 794b98edf6e1aeddaebe17ed03c566658337a78b Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 01:13:31 -0400
Subject: [PATCH 09/28] chore: changeset

---
 .changeset/happy-teams-own.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/happy-teams-own.md

diff --git a/.changeset/happy-teams-own.md b/.changeset/happy-teams-own.md
new file mode 100644
index 00000000..95b56fc4
--- /dev/null
+++ b/.changeset/happy-teams-own.md
@@ -0,0 +1,5 @@
+---
+'mppx': patch
+---
+
+Added experimental support for payment links

From e7d2bb7dfe0599f95761e578478f005bb8be3d5f Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 01:15:25 -0400
Subject: [PATCH 10/28] chore: up

---
 .github/workflows/verify.yml | 4 ++--
 package.json                 | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml
index d57c1682..eca58991 100644
--- a/.github/workflows/verify.yml
+++ b/.github/workflows/verify.yml
@@ -43,7 +43,7 @@ jobs:
         run: pnpm check:ci
 
       - name: Check types
-        run: pnpm dev && pnpm check:types && pnpm check:types:examples
+        run: pnpm dev && pnpm exec tsx scripts/build:html.ts && pnpm check:types && pnpm check:types:examples
 
   test:
     name: Test Runtime
@@ -156,6 +156,6 @@ jobs:
           docker save ghcr.io/tempoxyz/tempo:${VITE_TEMPO_TAG} -o /tmp/tempo-image.tar
 
       - name: Run E2E tests
-        run: pnpm run test:e2e
+        run: pnpm build && pnpm run test:e2e
         env:
           CI: true
diff --git a/package.json b/package.json
index 4c99e1ce..b08effec 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "build": "tsx scripts/build:html.ts && zile",
+    "build": "node --import tsx scripts/build:html.ts && zile",
     "changeset:publish": "zile publish:prepare && changeset publish && zile publish:post",
     "changeset:version": "changeset version && vp fmt .",
     "check": "vp lint --fix && vp fmt --write .",

From d66ed3e0e6ae046887ee36871e7c300142937ee2 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 01:24:42 -0400
Subject: [PATCH 11/28] ci: up

---
 .github/workflows/verify.yml                     | 13 +++++++++++--
 src/server/internal/html/serviceWorker.client.ts | 10 +++++-----
 vite.config.ts                                   |  2 +-
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml
index eca58991..51b60bc6 100644
--- a/.github/workflows/verify.yml
+++ b/.github/workflows/verify.yml
@@ -100,6 +100,9 @@ jobs:
           docker pull ghcr.io/tempoxyz/tempo:${VITE_TEMPO_TAG}
           docker save ghcr.io/tempoxyz/tempo:${VITE_TEMPO_TAG} -o /tmp/tempo-image.tar
 
+      - name: Bundle HTML files
+        run: pnpm build
+
       - name: Run tests
         run: |
           eval "$(dbus-launch --sh-syntax)"
@@ -155,7 +158,13 @@ jobs:
           docker pull ghcr.io/tempoxyz/tempo:${VITE_TEMPO_TAG}
           docker save ghcr.io/tempoxyz/tempo:${VITE_TEMPO_TAG} -o /tmp/tempo-image.tar
 
-      - name: Run E2E tests
-        run: pnpm build && pnpm run test:e2e
+      - name: Bundle HTML files
+        run: pnpm build
+
+      - name: Run tests
+        run: pnpm run test:e2e
         env:
           CI: true
+          MPP_SECRET_KEY: test-secret-key
+          VITE_STRIPE_SECRET_KEY: ${{ secrets.VITE_STRIPE_SECRET_KEY }}
+          VITE_STRIPE_PUBLIC_KEY: ${{ secrets.VITE_STRIPE_PUBLIC_KEY }}
diff --git a/src/server/internal/html/serviceWorker.client.ts b/src/server/internal/html/serviceWorker.client.ts
index 0fde0518..1c1dffa5 100644
--- a/src/server/internal/html/serviceWorker.client.ts
+++ b/src/server/internal/html/serviceWorker.client.ts
@@ -4,10 +4,10 @@ export async function submitCredential(credential: string): Promise<void> {
 
   const registration = await navigator.serviceWorker.register(url.pathname + url.search)
 
-  const sw = await new Promise<ServiceWorker>((resolve) => {
-    const worker = registration.installing ?? registration.waiting ?? registration.active
-    if (worker?.state === 'activated') return resolve(worker)
-    const target = worker ?? registration
+  const serviceWorker = await new Promise<ServiceWorker>((resolve) => {
+    const mppxWorker = registration.installing ?? registration.waiting ?? registration.active
+    if (mppxWorker?.state === 'activated') return resolve(mppxWorker)
+    const target = mppxWorker ?? registration
     target.addEventListener('statechange', function handler() {
       const active = registration.active
       if (active?.state === 'activated') {
@@ -17,6 +17,6 @@ export async function submitCredential(credential: string): Promise<void> {
     })
   })
 
-  sw.postMessage({ credential })
+  serviceWorker.postMessage({ credential })
   location.reload()
 }
diff --git a/vite.config.ts b/vite.config.ts
index 2c87d687..e48b5f0c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -41,7 +41,7 @@ export default defineConfig({
           name: 'node',
           alias,
           include: ['src/**/*.test.ts'],
-          exclude: ['src/**/*.browser.test.ts', 'src/cli/**/*.test.ts'],
+          exclude: ['**/node_modules/**', 'src/**/*.browser.test.ts', 'src/cli/**/*.test.ts'],
           typecheck: {
             include: ['src/**/*.test-d.ts'],
           },

From 760a7a65b3f34552b127e6728e4dd9dfcfca3908 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 01:41:51 -0400
Subject: [PATCH 12/28] fix: resolve mppx/client alias in html build

---
 scripts/build:html.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/scripts/build:html.ts b/scripts/build:html.ts
index 73f923fa..0249a219 100644
--- a/scripts/build:html.ts
+++ b/scripts/build:html.ts
@@ -17,6 +17,9 @@ for (const entry of htmlEntries) {
 
   await build({
     input: path.resolve(root, entry),
+    resolve: {
+      alias: { 'mppx/client': path.resolve(root, 'src/client/index.ts') },
+    },
     transform: {
       define: {
         __LOCAL_ACCOUNT__: JSON.stringify(process.env.LOCAL_ACCOUNT ?? ''),

From 2a3a8e781c1d51fdfc4e93dff99a7dab0747c10d Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 01:42:41 -0400
Subject: [PATCH 13/28] chore: up

---
 .github/workflows/verify.yml | 2 +-
 package.json                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml
index 51b60bc6..627b6641 100644
--- a/.github/workflows/verify.yml
+++ b/.github/workflows/verify.yml
@@ -162,7 +162,7 @@ jobs:
         run: pnpm build
 
       - name: Run tests
-        run: pnpm run test:e2e
+        run: pnpm run test:html
         env:
           CI: true
           MPP_SECRET_KEY: test-secret-key
diff --git a/package.json b/package.json
index b08effec..775f0ca3 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "dev:example": "node scripts/dev:example.ts",
     "mppx": "node --import tsx src/bin.ts",
     "test": "vp test",
-    "test:e2e": "playwright test --config test/html/playwright.config.ts"
+    "test:html": "playwright test --config test/html/playwright.config.ts"
   },
   "browserslist": [
     "defaults",

From b770ab5aaf657c13d69f7930fb0ffbb612e162cc Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 01:49:20 -0400
Subject: [PATCH 14/28] fix: use event.source truthiness check in service
 worker

---
 src/server/internal/html/serviceWorker.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/server/internal/html/serviceWorker.ts b/src/server/internal/html/serviceWorker.ts
index b94ead6d..2c4e7b61 100644
--- a/src/server/internal/html/serviceWorker.ts
+++ b/src/server/internal/html/serviceWorker.ts
@@ -7,7 +7,7 @@ serviceWorker.addEventListener('activate', (event) => {
 })
 
 serviceWorker.addEventListener('message', (event) => {
-  if (!(event.source instanceof Client)) return
+  if (!event.source) return
   const value = event.data?.credential
   if (typeof value !== 'string' || !value.startsWith('Payment ')) return
   credential = value

From 1f475f1db431bebe373218d044fd62a173b7d8f8 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 03:18:33 -0400
Subject: [PATCH 15/28] chore: sw ack

---
 src/server/internal/html/serviceWorker.client.ts | 6 +++++-
 src/server/internal/html/serviceWorker.ts        | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/server/internal/html/serviceWorker.client.ts b/src/server/internal/html/serviceWorker.client.ts
index 1c1dffa5..e2f62dd0 100644
--- a/src/server/internal/html/serviceWorker.client.ts
+++ b/src/server/internal/html/serviceWorker.client.ts
@@ -17,6 +17,10 @@ export async function submitCredential(credential: string): Promise<void> {
     })
   })
 
-  serviceWorker.postMessage({ credential })
+  await new Promise<void>((resolve) => {
+    const channel = new MessageChannel()
+    channel.port1.onmessage = () => resolve()
+    serviceWorker.postMessage({ credential }, [channel.port2])
+  })
   location.reload()
 }
diff --git a/src/server/internal/html/serviceWorker.ts b/src/server/internal/html/serviceWorker.ts
index 2c4e7b61..5810ac50 100644
--- a/src/server/internal/html/serviceWorker.ts
+++ b/src/server/internal/html/serviceWorker.ts
@@ -11,6 +11,7 @@ serviceWorker.addEventListener('message', (event) => {
   const value = event.data?.credential
   if (typeof value !== 'string' || !value.startsWith('Payment ')) return
   credential = value
+  event.ports[0]?.postMessage('ack')
 })
 
 serviceWorker.addEventListener('fetch', (event) => {

From 8f0ffe34ea178083c8e1225fa7d3ad6afa7368ff Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 03:40:50 -0400
Subject: [PATCH 16/28] chore: debug

---
 test/html/charge.test.ts | 17 +++++++++++++++--
 test/html/stripe.test.ts | 17 +++++++++++++++--
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/test/html/charge.test.ts b/test/html/charge.test.ts
index 0c00a9f2..eaaa801c 100644
--- a/test/html/charge.test.ts
+++ b/test/html/charge.test.ts
@@ -6,7 +6,15 @@ test.beforeAll(async () => {
   await setup()
 })
 
-test('charge via html payment page', async ({ page }) => {
+test('charge via html payment page', async ({ page, context }) => {
+  const logs: string[] = []
+  page.on('pageerror', (err) => logs.push(`[pageerror] ${err.message}`))
+  page.on('console', (msg) => logs.push(`[console.${msg.type()}] ${msg.text()}`))
+  page.on('requestfailed', (req) =>
+    logs.push(`[requestfailed] ${req.url()} ${req.failure()?.errorText}`),
+  )
+  context.on('serviceworker', (sw) => logs.push(`[serviceworker] registered: ${sw.url()}`))
+
   // Navigate to the payment endpoint as a browser
   await page.goto('/api/photo', {
     waitUntil: 'domcontentloaded',
@@ -20,7 +28,12 @@ test('charge via html payment page', async ({ page }) => {
   await page.getByText('Continue with Tempo').click()
 
   // Wait for service worker to submit credential and page to reload with paid response
-  await expect(page.locator('body')).toContainText('"url":', { timeout: 30_000 })
+  await expect(page.locator('body'))
+    .toContainText('"url":', { timeout: 30_000 })
+    .catch((e) => {
+      console.error('Browser logs:\n' + logs.join('\n'))
+      throw e
+    })
 })
 
 test('service worker endpoint returns javascript', async ({ page }) => {
diff --git a/test/html/stripe.test.ts b/test/html/stripe.test.ts
index 8656c61c..5757c5cb 100644
--- a/test/html/stripe.test.ts
+++ b/test/html/stripe.test.ts
@@ -6,7 +6,15 @@ test.beforeAll(async () => {
   await setup()
 })
 
-test('charge via stripe html payment page', async ({ page }) => {
+test('charge via stripe html payment page', async ({ page, context }) => {
+  const logs: string[] = []
+  page.on('pageerror', (err) => logs.push(`[pageerror] ${err.message}`))
+  page.on('console', (msg) => logs.push(`[console.${msg.type()}] ${msg.text()}`))
+  page.on('requestfailed', (req) =>
+    logs.push(`[requestfailed] ${req.url()} ${req.failure()?.errorText}`),
+  )
+  context.on('serviceworker', (sw) => logs.push(`[serviceworker] registered: ${sw.url()}`))
+
   await page.goto('/api/fortune', {
     waitUntil: 'domcontentloaded',
   })
@@ -18,7 +26,12 @@ test('charge via stripe html payment page', async ({ page }) => {
   // Wait for Stripe Payment Element iframe to load
   const stripeFrame = page.frameLocator('iframe[name^="__privateStripeFrame"]').first()
   const cardButton = stripeFrame.locator('[data-value="card"]')
-  await expect(cardButton).toBeVisible({ timeout: 15_000 })
+  await expect(cardButton)
+    .toBeVisible({ timeout: 15_000 })
+    .catch((e) => {
+      console.error('Browser logs:\n' + logs.join('\n'))
+      throw e
+    })
 
   // Card option is collapsed by default — click to expand, wait for inputs to render
   await cardButton.click()

From 883b2b0e82403e5553bf55dd8ed78df4f698e997 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 14:57:20 -0400
Subject: [PATCH 17/28] wip: html test

---
 .github/workflows/verify.yml                |   2 +-
 package.json                                |   1 +
 pnpm-lock.yaml                              |  12 +-
 src/tempo/server/internal/html/main.ts      |  62 ++++---
 src/tempo/server/internal/html/package.json |   2 +-
 test/html/globalSetup.ts                    |  23 ++-
 test/html/playwright.config.ts              |  33 +---
 test/html/server.ts                         | 173 ++++++++++++++++++++
 test/html/setup.ts                          |   4 +-
 test/html/stripe.test.ts                    |   4 +-
 test/html/{charge.test.ts => tempo.test.ts} |   4 +-
 11 files changed, 246 insertions(+), 74 deletions(-)
 create mode 100644 test/html/server.ts
 rename test/html/{charge.test.ts => tempo.test.ts} (93%)

diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml
index 627b6641..b46fd1de 100644
--- a/.github/workflows/verify.yml
+++ b/.github/workflows/verify.yml
@@ -43,7 +43,7 @@ jobs:
         run: pnpm check:ci
 
       - name: Check types
-        run: pnpm dev && pnpm exec tsx scripts/build:html.ts && pnpm check:types && pnpm check:types:examples
+        run: pnpm dev && pnpm exec tsx scripts/build:html.ts && pnpm check:types && pnpm check:types:html && pnpm check:types:examples
 
   test:
     name: Test Runtime
diff --git a/package.json b/package.json
index 775f0ca3..86d2b3de 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "check": "vp lint --fix && vp fmt --write .",
     "check:ci": "vp lint && vp fmt --check .",
     "check:types": "tsgo -b",
+    "check:types:html": "tsgo -p src/tempo/server/internal/html/tsconfig.json && tsgo -p src/stripe/server/internal/html/tsconfig.json",
     "check:types:examples": "pnpm -r --filter './examples/**' run check:types",
     "deps": "pnpx taze -r --no-ignore-other-workspaces --ignore-paths node_modules",
     "deps:ci": "pnpx actions-up",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 23f08f40..f0386fd8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -290,8 +290,8 @@ importers:
   src/tempo/server/internal/html:
     dependencies:
       accounts:
-        specifier: https://pkg.pr.new/tempoxyz/accounts@d21e422
-        version: https://pkg.pr.new/tempoxyz/accounts@d21e422(@types/react@19.2.14)(@wagmi/core@3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.7(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6)))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6))
+        specifier: https://pkg.pr.new/tempoxyz/accounts@c339a21
+        version: https://pkg.pr.new/tempoxyz/accounts@c339a21(@types/react@19.2.14)(@wagmi/core@3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.7(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6)))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6))
       mppx:
         specifier: workspace:*
         version: link:../../../../..
@@ -1686,9 +1686,9 @@ packages:
     resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
     engines: {node: '>= 0.6'}
 
-  accounts@https://pkg.pr.new/tempoxyz/accounts@d21e422:
-    resolution: {tarball: https://pkg.pr.new/tempoxyz/accounts@d21e422}
-    version: 0.4.6
+  accounts@https://pkg.pr.new/tempoxyz/accounts@c339a21:
+    resolution: {integrity: sha512-Blp1YJSFPCXHARZ1Glu+0itLeBWoL2QhVUGQBtCjjGiQ1fUIieEpiTQ4/dCo/zyMhNigNnUA0yiLBTH3SCl2+Q==, tarball: https://pkg.pr.new/tempoxyz/accounts@c339a21}
+    version: 0.4.7
     peerDependencies:
       '@wagmi/core': '>=2'
       react: '>=18'
@@ -4979,7 +4979,7 @@ snapshots:
       mime-types: 3.0.2
       negotiator: 1.0.0
 
-  accounts@https://pkg.pr.new/tempoxyz/accounts@d21e422(@types/react@19.2.14)(@wagmi/core@3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.7(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6)))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6)):
+  accounts@https://pkg.pr.new/tempoxyz/accounts@c339a21(@types/react@19.2.14)(@wagmi/core@3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.7(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6)))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6)):
     dependencies:
       '@remix-run/fetch-router': 0.17.0
       idb-keyval: 6.2.2
diff --git a/src/tempo/server/internal/html/main.ts b/src/tempo/server/internal/html/main.ts
index d4296877..7ec18636 100644
--- a/src/tempo/server/internal/html/main.ts
+++ b/src/tempo/server/internal/html/main.ts
@@ -1,6 +1,6 @@
-import { local, Provider, Storage } from 'accounts'
+import { Provider } from 'accounts'
 import { Hex, Json } from 'ox'
-import { createClient, custom } from 'viem'
+import { createClient, custom, http } from 'viem'
 import { tempoModerato, tempoLocalnet } from 'viem/chains'
 import { Account } from 'viem/tempo'
 
@@ -12,30 +12,12 @@ import type * as Methods from '../../../Methods.js'
 const data = Json.parse(document.getElementById('__MPPX_DATA__')!.textContent) as {
   challenge: Challenge.FromMethods<[typeof Methods.charge]>
 }
-
-const localAccount = (typeof __LOCAL_ACCOUNT__ === 'string' && __LOCAL_ACCOUNT__) || undefined
+// Used for testing. TODO: Wire up more native way
+const localTempoAccount = __LOCAL_ACCOUNT__
+  ? Account.fromSecp256k1(__LOCAL_ACCOUNT__ as Hex.Hex)
+  : undefined
 declare const __LOCAL_ACCOUNT__: string | undefined
 
-const provider = Provider.create({
-  testnet:
-    data.challenge.request.methodDetails?.chainId === tempoModerato.id ||
-    data.challenge.request.methodDetails?.chainId === tempoLocalnet.id,
-  ...(localAccount
-    ? {
-        adapter: local({
-          loadAccounts: async () => ({
-            accounts: [Account.fromSecp256k1(localAccount as Hex.Hex)],
-          }),
-        }),
-        storage: Storage.memory(),
-      }
-    : undefined),
-})
-const chain =
-  provider.chains.find((x) => x.id === data.challenge.request.methodDetails?.chainId) ??
-  provider.chains.at(0)
-const client = createClient({ chain, transport: custom(provider) })
-
 const root = document.getElementById('root')!
 
 const h2 = document.createElement('h2')
@@ -47,9 +29,37 @@ button.textContent = 'Continue with Tempo'
 button.onclick = async () => {
   try {
     button.disabled = true
-    const result = await provider.request({ method: 'wallet_connect' })
-    const account = result.accounts[0]!.address
+
+    const provider = (() => {
+      if (localTempoAccount) return undefined
+      return Provider.create({
+        testnet:
+          data.challenge.request.methodDetails?.chainId === tempoModerato.id ||
+          data.challenge.request.methodDetails?.chainId === tempoLocalnet.id,
+      })
+    })()
+
+    const client = (() => {
+      // TODO: provider.chains
+      const chain = [...(provider?.chains ?? []), tempoModerato, tempoLocalnet].find(
+        (x) => x.id === data.challenge.request.methodDetails?.chainId,
+      )
+      if (localTempoAccount || !provider)
+        return createClient({
+          account: localTempoAccount,
+          chain,
+          transport: http(chain?.rpcUrls.default.http[0]),
+        })
+      return createClient({ chain, transport: custom(provider) })
+    })()
+
+    const account = await (async () => {
+      if (localTempoAccount || !provider) return localTempoAccount
+      const res = await provider.request({ method: 'wallet_connect' })
+      return res.accounts[0]!.address
+    })()
     const method = tempo({ account, getClient: () => client })[0]
+
     const credential = await method.createCredential({ challenge: data.challenge, context: {} })
     await submitCredential(credential)
   } finally {
diff --git a/src/tempo/server/internal/html/package.json b/src/tempo/server/internal/html/package.json
index 92fd942e..af5ea7e8 100644
--- a/src/tempo/server/internal/html/package.json
+++ b/src/tempo/server/internal/html/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "accounts": "https://pkg.pr.new/tempoxyz/accounts@d21e422",
+    "accounts": "https://pkg.pr.new/tempoxyz/accounts@c339a21",
     "mppx": "workspace:*",
     "viem": "2.47.5"
   }
diff --git a/test/html/globalSetup.ts b/test/html/globalSetup.ts
index 20e592d5..466f849a 100644
--- a/test/html/globalSetup.ts
+++ b/test/html/globalSetup.ts
@@ -1,11 +1,24 @@
 import { execSync } from 'node:child_process'
 
-const privateKey = '0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d'
-const root = new URL('../..', import.meta.url).pathname
-
-export default function globalSetup() {
+export default async function globalSetup() {
+  const privateKey = '0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d'
   execSync(`LOCAL_ACCOUNT=${privateKey} pnpm build`, {
-    cwd: root,
+    cwd: new URL('../..', import.meta.url).pathname,
     stdio: 'inherit',
   })
+
+  const port = Number(process.env._MPPX_HTML_PORT)
+  if (!port) throw new Error('Missing _MPPX_HTML_PORT')
+
+  const { startServer } = await import('./server.js')
+  const server = await startServer(port)
+
+  return async () => {
+    await new Promise<void>((resolve, reject) => {
+      server.close((error) => {
+        if (error) reject(error)
+        else resolve()
+      })
+    })
+  }
 }
diff --git a/test/html/playwright.config.ts b/test/html/playwright.config.ts
index a393a1cb..a44683ea 100644
--- a/test/html/playwright.config.ts
+++ b/test/html/playwright.config.ts
@@ -2,10 +2,7 @@ import net from 'node:net'
 
 import { defineConfig } from '@playwright/test'
 
-const project = process.argv.find((_, i, a) => a[i - 1] === '--project')
-
-const tempoPort = await getPort('_MPPX_TEMPO_PORT')
-const stripePort = await getPort('_MPPX_STRIPE_PORT')
+const port = await getPort('_MPPX_HTML_PORT')
 
 export default defineConfig({
   globalSetup: './globalSetup.ts',
@@ -19,37 +16,15 @@ export default defineConfig({
   projects: [
     {
       name: 'tempo',
-      testMatch: 'charge.test.ts',
-      use: { baseURL: `http://localhost:${tempoPort}` },
+      testMatch: 'tempo.test.ts',
+      use: { baseURL: `http://localhost:${port}` },
     },
     {
       name: 'stripe',
       testMatch: 'stripe.test.ts',
-      use: { baseURL: `http://localhost:${stripePort}` },
+      use: { baseURL: `http://localhost:${port}` },
     },
   ],
-  webServer: [
-    ...(!project || project === 'tempo'
-      ? [
-          {
-            command: `pnpm --filter charge dev -- --port ${tempoPort}`,
-            port: tempoPort,
-            reuseExistingServer: false,
-            timeout: 30_000,
-          },
-        ]
-      : []),
-    ...(!project || project === 'stripe'
-      ? [
-          {
-            command: `pnpm --filter stripe dev -- --port ${stripePort}`,
-            port: stripePort,
-            reuseExistingServer: false,
-            timeout: 30_000,
-          },
-        ]
-      : []),
-  ],
 })
 
 async function getPort(envKey: string): Promise<number> {
diff --git a/test/html/server.ts b/test/html/server.ts
new file mode 100644
index 00000000..70095ca9
--- /dev/null
+++ b/test/html/server.ts
@@ -0,0 +1,173 @@
+import * as http from 'node:http'
+
+import { Mppx, Request as ServerRequest, stripe, tempo } from 'mppx/server'
+import { createClient, http as createHttpTransport } from 'viem'
+import { generatePrivateKey, privateKeyToAccount } from 'viem/accounts'
+import { tempoModerato } from 'viem/chains'
+import { Actions } from 'viem/tempo'
+
+export async function startServer(port: number): Promise<HtmlTestServer> {
+  const stripePublishableKey = process.env.VITE_STRIPE_PUBLIC_KEY
+  if (!stripePublishableKey) throw new Error('Missing VITE_STRIPE_PUBLIC_KEY')
+  const stripeSecretKey = process.env.VITE_STRIPE_SECRET_KEY
+  if (!stripeSecretKey) throw new Error('Missing VITE_STRIPE_SECRET_KEY')
+
+  const account = privateKeyToAccount(generatePrivateKey())
+  const tempoClient = createClient({
+    chain: tempoModerato,
+    pollingInterval: 1_000,
+    transport: createHttpTransport(process.env.MPPX_RPC_URL),
+  })
+  for (let attempt = 1; ; attempt++) {
+    try {
+      await Actions.faucet.fundSync(tempoClient, { account })
+      break
+    } catch (error) {
+      if (attempt >= 3) throw error
+    }
+  }
+
+  const createTokenUrl = '/stripe/create-spt'
+  const mppx = Mppx.create({
+    methods: [
+      tempo.charge({
+        account,
+        currency: '0x20c0000000000000000000000000000000000000',
+        feePayer: true,
+        html: true,
+        recipient: account.address,
+        testnet: true,
+      }),
+      stripe.charge({
+        html: {
+          createTokenUrl,
+          publishableKey: stripePublishableKey,
+        },
+        networkId: 'internal',
+        paymentMethodTypes: ['card'],
+        secretKey: stripeSecretKey,
+      }),
+    ],
+    secretKey: 'test-html-server-secret-key',
+  })
+
+  const server = http.createServer(
+    ServerRequest.toNodeListener(async (request) => {
+      const url = new URL(request.url)
+
+      if (url.pathname === '/tempo/charge') {
+        const result = await mppx.tempo.charge({
+          amount: '0.01',
+          description: 'Random stock photo',
+        })(request)
+
+        if (result.status === 402) return result.challenge
+
+        return result.withReceipt(Response.json({ url: 'https://example.com/photo.jpg' }))
+      }
+
+      if (url.pathname === createTokenUrl) return createSharedPaymentToken(request, stripeSecretKey)
+
+      if (url.pathname === '/stripe/charge') {
+        const result = await mppx.stripe.charge({
+          amount: '1',
+          currency: 'usd',
+          decimals: 2,
+        })(request)
+
+        if (result.status === 402) return result.challenge
+
+        const fortunes = [
+          'A beautiful, smart, and loving person will come into your life.',
+          'A dubious friend may be an enemy in camouflage.',
+          'A faithful friend is a strong defense.',
+          'A fresh start will put you on your way.',
+          'A golden egg of opportunity falls into your lap this month.',
+          'A good time to finish up old tasks.',
+          'A hunch is creativity trying to tell you something.',
+          'A lifetime of happiness lies ahead of you.',
+          'A light heart carries you through all the hard times.',
+          'A new perspective will come with the new year.',
+        ] as const
+
+        const fortune = fortunes[Math.floor(Math.random() * fortunes.length)]
+        return result.withReceipt(Response.json({ fortune }))
+      }
+
+      return new Response('Not Found', { status: 404 })
+    }),
+  )
+
+  await new Promise<void>((resolve) => server.listen(port, resolve))
+
+  return Object.assign(server, {
+    port,
+    url: `http://localhost:${port}`,
+  }) as HtmlTestServer
+}
+
+type HtmlTestServer = http.Server<typeof http.IncomingMessage, typeof http.ServerResponse> & {
+  port: number
+  url: string
+}
+
+async function createSharedPaymentToken(request: Request, secretKey: string): Promise<Response> {
+  const { paymentMethod, amount, currency, expiresAt, networkId, metadata } =
+    (await request.json()) as {
+      paymentMethod: string
+      amount: string
+      currency: string
+      expiresAt: number
+      networkId?: string
+      metadata?: Record<string, string>
+    }
+
+  if (metadata?.externalId)
+    return Response.json(
+      { error: 'metadata.externalId is reserved; use credential externalId instead' },
+      { status: 400 },
+    )
+
+  const body = new URLSearchParams({
+    payment_method: paymentMethod,
+    'usage_limits[currency]': currency,
+    'usage_limits[max_amount]': amount,
+    'usage_limits[expires_at]': expiresAt.toString(),
+  })
+  if (networkId) body.set('seller_details[network_id]', networkId)
+  if (metadata)
+    for (const [key, value] of Object.entries(metadata)) body.set(`metadata[${key}]`, value)
+
+  // Test-only endpoint; production SPT flow uses the agent-side issued_tokens API.
+  const createSpt = async (bodyParams: URLSearchParams) =>
+    fetch('https://api.stripe.com/v1/test_helpers/shared_payment/granted_tokens', {
+      method: 'POST',
+      headers: {
+        Authorization: `Basic ${btoa(`${secretKey}:`)}`,
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: bodyParams,
+    })
+
+  let response = await createSpt(body)
+  if (!response.ok) {
+    const error = (await response.json()) as { error: { message: string } }
+    if ((metadata || networkId) && error.error.message.includes('Received unknown parameter')) {
+      const fallbackBody = new URLSearchParams({
+        payment_method: paymentMethod,
+        'usage_limits[currency]': currency,
+        'usage_limits[max_amount]': amount,
+        'usage_limits[expires_at]': expiresAt.toString(),
+      })
+      response = await createSpt(fallbackBody)
+    } else return Response.json({ error: error.error.message }, { status: 500 })
+  }
+
+  if (!response.ok) {
+    const error = (await response.json()) as { error: { message: string } }
+    return Response.json({ error: error.error.message }, { status: 500 })
+  }
+
+  const { id: spt } = (await response.json()) as { id: string }
+  return Response.json({ spt })
+}
diff --git a/test/html/setup.ts b/test/html/setup.ts
index 05cb4a47..a24c114a 100644
--- a/test/html/setup.ts
+++ b/test/html/setup.ts
@@ -3,8 +3,8 @@ import { privateKeyToAccount } from 'viem/accounts'
 import { tempoModerato } from 'viem/chains'
 import { Actions } from 'viem/tempo'
 
-export const privateKey = '0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d'
-export const account = privateKeyToAccount(privateKey)
+const privateKey = '0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d'
+const account = privateKeyToAccount(privateKey)
 
 export async function setup() {
   // Fund the test payer account via faucet
diff --git a/test/html/stripe.test.ts b/test/html/stripe.test.ts
index 5757c5cb..ee062c13 100644
--- a/test/html/stripe.test.ts
+++ b/test/html/stripe.test.ts
@@ -15,7 +15,7 @@ test('charge via stripe html payment page', async ({ page, context }) => {
   )
   context.on('serviceworker', (sw) => logs.push(`[serviceworker] registered: ${sw.url()}`))
 
-  await page.goto('/api/fortune', {
+  await page.goto('/stripe/charge', {
     waitUntil: 'domcontentloaded',
   })
 
@@ -61,7 +61,7 @@ test('charge via stripe html payment page', async ({ page, context }) => {
 })
 
 test('service worker endpoint returns javascript', async ({ page }) => {
-  const response = await page.goto('/api/fortune?__mppx_worker')
+  const response = await page.goto('/stripe/charge?__mppx_worker')
   expect(response?.headers()['content-type']).toContain('application/javascript')
   expect(response?.status()).toBe(200)
 })
diff --git a/test/html/charge.test.ts b/test/html/tempo.test.ts
similarity index 93%
rename from test/html/charge.test.ts
rename to test/html/tempo.test.ts
index eaaa801c..0cc0665e 100644
--- a/test/html/charge.test.ts
+++ b/test/html/tempo.test.ts
@@ -16,7 +16,7 @@ test('charge via html payment page', async ({ page, context }) => {
   context.on('serviceworker', (sw) => logs.push(`[serviceworker] registered: ${sw.url()}`))
 
   // Navigate to the payment endpoint as a browser
-  await page.goto('/api/photo', {
+  await page.goto('/tempo/charge', {
     waitUntil: 'domcontentloaded',
   })
 
@@ -37,7 +37,7 @@ test('charge via html payment page', async ({ page, context }) => {
 })
 
 test('service worker endpoint returns javascript', async ({ page }) => {
-  const response = await page.goto('/api/photo?__mppx_worker')
+  const response = await page.goto('/tempo/charge?__mppx_worker')
   expect(response?.headers()['content-type']).toContain('application/javascript')
   expect(response?.status()).toBe(200)
 })

From ae47e4666f6bdd463649d9997f8bf633c40ec9b9 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 15:40:18 -0400
Subject: [PATCH 18/28] test(html): up

---
 src/Method.ts                                 |  2 +-
 src/server/Transport.ts                       |  4 +-
 .../internal/html/{types.ts => config.ts}     |  2 +
 src/stripe/server/internal/html/main.ts       | 14 +++-
 src/tempo/server/internal/html/main.ts        | 33 ++++----
 test/html/playwright.config.ts                |  5 +-
 test/html/server.ts                           | 77 ++++++++++++-------
 test/html/setup.ts                            | 14 ----
 test/html/stripe.test.ts                      | 32 ++------
 test/html/tempo.test.ts                       | 14 +++-
 10 files changed, 103 insertions(+), 94 deletions(-)
 rename src/server/internal/html/{types.ts => config.ts} (66%)
 delete mode 100644 test/html/setup.ts

diff --git a/src/Method.ts b/src/Method.ts
index b50961a1..8d2cad25 100755
--- a/src/Method.ts
+++ b/src/Method.ts
@@ -2,7 +2,7 @@ import type * as Challenge from './Challenge.js'
 import type * as Credential from './Credential.js'
 import type { ExactPartial, LooseOmit, MaybePromise } from './internal/types.js'
 import type * as Receipt from './Receipt.js'
-import type * as Html from './server/internal/html/types.js'
+import type * as Html from './server/internal/html/config.js'
 import type * as Transport from './server/Transport.js'
 import type * as z from './zod.js'
 
diff --git a/src/server/Transport.ts b/src/server/Transport.ts
index 3422cbf0..3f4881ea 100644
--- a/src/server/Transport.ts
+++ b/src/server/Transport.ts
@@ -6,8 +6,8 @@ import * as Errors from '../Errors.js'
 import type { Distribute, UnionToIntersection } from '../internal/types.js'
 import * as core_Mcp from '../Mcp.js'
 import * as Receipt from '../Receipt.js'
+import * as Html from './internal/html/config.js'
 import { serviceWorker } from './internal/html/serviceWorker.gen.js'
-import type * as Html from './internal/html/types.js'
 
 export { type McpSdk, mcpSdk } from '../mcp-sdk/server/Transport.js'
 
@@ -172,7 +172,7 @@ ${Json.stringify(challenge, null, 2)
                     .replace(/>/g, '&gt;')}</pre
                 >
                 <div id="root"></div>
-                <script id="__MPPX_DATA__" type="application/json">
+                <script id="${Html.dataId}" type="application/json">
                   ${data}
                 </script>
                 ${options.html.content}
diff --git a/src/server/internal/html/types.ts b/src/server/internal/html/config.ts
similarity index 66%
rename from src/server/internal/html/types.ts
rename to src/server/internal/html/config.ts
index 3b948dab..3cc6da4c 100644
--- a/src/server/internal/html/types.ts
+++ b/src/server/internal/html/config.ts
@@ -2,3 +2,5 @@ export type Options = {
   config: Record<string, unknown>
   content: string
 }
+
+export const dataId = '__MPPX_DATA__'
diff --git a/src/stripe/server/internal/html/main.ts b/src/stripe/server/internal/html/main.ts
index 57fde285..b0613e24 100644
--- a/src/stripe/server/internal/html/main.ts
+++ b/src/stripe/server/internal/html/main.ts
@@ -1,18 +1,23 @@
-import { loadStripe } from '@stripe/stripe-js'
+import { loadStripe } from '@stripe/stripe-js/pure'
 
 import type * as Challenge from '../../../../Challenge.js'
 import { stripe } from '../../../../client/index.js'
+import * as Html from '../../../../server/internal/html/config.js'
 import { submitCredential } from '../../../../server/internal/html/serviceWorker.client.js'
 import type { charge } from '../../../../stripe/server/Charge.js'
 import type * as Methods from '../../../Methods.js'
 
-const data = JSON.parse(document.getElementById('__MPPX_DATA__')!.textContent!) as {
+const data = JSON.parse(document.getElementById(Html.dataId)!.textContent!) as {
   config: NonNullable<charge.Parameters['html']>
   challenge: Challenge.FromMethods<[typeof Methods.charge]>
 }
 
 const root = document.getElementById('root')!
 
+// Stripe.js can enable invisible anti-bot checks. In real browsers we keep the
+// default behavior, but deterministic automation benefits from opting out.
+if (navigator.webdriver) loadStripe.setLoadParameters({ advancedFraudSignals: false })
+
 const h2 = document.createElement('h2')
 h2.textContent = 'stripe'
 root.appendChild(h2)
@@ -67,7 +72,10 @@ root.appendChild(h2)
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ paymentMethod, ...opts }),
           })
-          if (!res.ok) throw new Error('Failed to create SPT')
+          if (!res.ok) {
+            const text = await res.text().catch(() => '<response body unavailable>')
+            throw new Error(`Failed to create SPT (${res.status}): ${text}`)
+          }
           const { spt } = (await res.json()) as { spt: string }
           return spt
         },
diff --git a/src/tempo/server/internal/html/main.ts b/src/tempo/server/internal/html/main.ts
index 7ec18636..06daad2e 100644
--- a/src/tempo/server/internal/html/main.ts
+++ b/src/tempo/server/internal/html/main.ts
@@ -6,17 +6,13 @@ import { Account } from 'viem/tempo'
 
 import type * as Challenge from '../../../../Challenge.js'
 import { tempo } from '../../../../client/index.js'
+import * as Html from '../../../../server/internal/html/config.js'
 import { submitCredential } from '../../../../server/internal/html/serviceWorker.client.js'
 import type * as Methods from '../../../Methods.js'
 
-const data = Json.parse(document.getElementById('__MPPX_DATA__')!.textContent) as {
+const data = Json.parse(document.getElementById(Html.dataId)!.textContent) as {
   challenge: Challenge.FromMethods<[typeof Methods.charge]>
 }
-// Used for testing. TODO: Wire up more native way
-const localTempoAccount = __LOCAL_ACCOUNT__
-  ? Account.fromSecp256k1(__LOCAL_ACCOUNT__ as Hex.Hex)
-  : undefined
-declare const __LOCAL_ACCOUNT__: string | undefined
 
 const root = document.getElementById('root')!
 
@@ -24,23 +20,28 @@ const h2 = document.createElement('h2')
 h2.textContent = 'tempo'
 root.appendChild(h2)
 
+// Used for testing. TODO: Wire up more native way
+const localTempoAccount = __LOCAL_ACCOUNT__
+  ? Account.fromSecp256k1(__LOCAL_ACCOUNT__ as Hex.Hex)
+  : undefined
+declare const __LOCAL_ACCOUNT__: string | undefined
+
+const provider = (() => {
+  if (localTempoAccount) return undefined
+  return Provider.create({
+    testnet:
+      data.challenge.request.methodDetails?.chainId === tempoModerato.id ||
+      data.challenge.request.methodDetails?.chainId === tempoLocalnet.id,
+  })
+})()
+
 const button = document.createElement('button')
 button.textContent = 'Continue with Tempo'
 button.onclick = async () => {
   try {
     button.disabled = true
 
-    const provider = (() => {
-      if (localTempoAccount) return undefined
-      return Provider.create({
-        testnet:
-          data.challenge.request.methodDetails?.chainId === tempoModerato.id ||
-          data.challenge.request.methodDetails?.chainId === tempoLocalnet.id,
-      })
-    })()
-
     const client = (() => {
-      // TODO: provider.chains
       const chain = [...(provider?.chains ?? []), tempoModerato, tempoLocalnet].find(
         (x) => x.id === data.challenge.request.methodDetails?.chainId,
       )
diff --git a/test/html/playwright.config.ts b/test/html/playwright.config.ts
index a44683ea..bbf84042 100644
--- a/test/html/playwright.config.ts
+++ b/test/html/playwright.config.ts
@@ -11,7 +11,10 @@ export default defineConfig({
   timeout: 60_000,
   retries: 1,
   use: {
-    headless: true,
+    headless: false,
+    screenshot: 'only-on-failure',
+    trace: 'retain-on-failure',
+    video: 'retain-on-failure',
   },
   projects: [
     {
diff --git a/test/html/server.ts b/test/html/server.ts
index 70095ca9..a84e2aaa 100644
--- a/test/html/server.ts
+++ b/test/html/server.ts
@@ -12,32 +12,9 @@ export async function startServer(port: number): Promise<HtmlTestServer> {
   const stripeSecretKey = process.env.VITE_STRIPE_SECRET_KEY
   if (!stripeSecretKey) throw new Error('Missing VITE_STRIPE_SECRET_KEY')
 
-  const account = privateKeyToAccount(generatePrivateKey())
-  const tempoClient = createClient({
-    chain: tempoModerato,
-    pollingInterval: 1_000,
-    transport: createHttpTransport(process.env.MPPX_RPC_URL),
-  })
-  for (let attempt = 1; ; attempt++) {
-    try {
-      await Actions.faucet.fundSync(tempoClient, { account })
-      break
-    } catch (error) {
-      if (attempt >= 3) throw error
-    }
-  }
-
   const createTokenUrl = '/stripe/create-spt'
-  const mppx = Mppx.create({
+  const stripeMppx = Mppx.create({
     methods: [
-      tempo.charge({
-        account,
-        currency: '0x20c0000000000000000000000000000000000000',
-        feePayer: true,
-        html: true,
-        recipient: account.address,
-        testnet: true,
-      }),
       stripe.charge({
         html: {
           createTokenUrl,
@@ -50,16 +27,58 @@ export async function startServer(port: number): Promise<HtmlTestServer> {
     ],
     secretKey: 'test-html-server-secret-key',
   })
+  let tempoChargePromise: Promise<(request: Request) => Promise<any>> | undefined
+
+  async function getTempoCharge() {
+    if (!tempoChargePromise) {
+      tempoChargePromise = (async () => {
+        const account = privateKeyToAccount(generatePrivateKey())
+        const tempoClient = createClient({
+          chain: tempoModerato,
+          pollingInterval: 1_000,
+          transport: createHttpTransport(process.env.MPPX_RPC_URL),
+        })
+
+        for (let attempt = 1; ; attempt++) {
+          try {
+            await Actions.faucet.fundSync(tempoClient, { account })
+            break
+          } catch (error) {
+            if (attempt >= 3) throw error
+          }
+        }
+
+        const tempoMppx = Mppx.create({
+          methods: [
+            tempo.charge({
+              account,
+              currency: '0x20c0000000000000000000000000000000000000',
+              feePayer: true,
+              html: true,
+              recipient: account.address,
+              testnet: true,
+            }),
+          ],
+          secretKey: 'test-html-server-secret-key',
+        })
+
+        return tempoMppx.tempo.charge({
+          amount: '0.01',
+          description: 'Random stock photo',
+        })
+      })()
+    }
+
+    return await tempoChargePromise
+  }
 
   const server = http.createServer(
     ServerRequest.toNodeListener(async (request) => {
       const url = new URL(request.url)
 
       if (url.pathname === '/tempo/charge') {
-        const result = await mppx.tempo.charge({
-          amount: '0.01',
-          description: 'Random stock photo',
-        })(request)
+        const tempoCharge = await getTempoCharge()
+        const result = await tempoCharge(request)
 
         if (result.status === 402) return result.challenge
 
@@ -69,7 +88,7 @@ export async function startServer(port: number): Promise<HtmlTestServer> {
       if (url.pathname === createTokenUrl) return createSharedPaymentToken(request, stripeSecretKey)
 
       if (url.pathname === '/stripe/charge') {
-        const result = await mppx.stripe.charge({
+        const result = await stripeMppx.stripe.charge({
           amount: '1',
           currency: 'usd',
           decimals: 2,
diff --git a/test/html/setup.ts b/test/html/setup.ts
deleted file mode 100644
index a24c114a..00000000
--- a/test/html/setup.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createClient, http } from 'viem'
-import { privateKeyToAccount } from 'viem/accounts'
-import { tempoModerato } from 'viem/chains'
-import { Actions } from 'viem/tempo'
-
-const privateKey = '0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d'
-const account = privateKeyToAccount(privateKey)
-
-export async function setup() {
-  // Fund the test payer account via faucet
-  const client = createClient({ chain: tempoModerato, transport: http() })
-  await Actions.faucet.fundSync(client, { account })
-  console.log(`funded ${account.address}`)
-}
diff --git a/test/html/stripe.test.ts b/test/html/stripe.test.ts
index ee062c13..ee80d7e0 100644
--- a/test/html/stripe.test.ts
+++ b/test/html/stripe.test.ts
@@ -1,19 +1,7 @@
 import { expect, test } from '@playwright/test'
 
-import { setup } from './setup.js'
-
-test.beforeAll(async () => {
-  await setup()
-})
-
-test('charge via stripe html payment page', async ({ page, context }) => {
-  const logs: string[] = []
-  page.on('pageerror', (err) => logs.push(`[pageerror] ${err.message}`))
-  page.on('console', (msg) => logs.push(`[console.${msg.type()}] ${msg.text()}`))
-  page.on('requestfailed', (req) =>
-    logs.push(`[requestfailed] ${req.url()} ${req.failure()?.errorText}`),
-  )
-  context.on('serviceworker', (sw) => logs.push(`[serviceworker] registered: ${sw.url()}`))
+test('charge via stripe html payment page', async ({ page }) => {
+  test.slow()
 
   await page.goto('/stripe/charge', {
     waitUntil: 'domcontentloaded',
@@ -21,17 +9,12 @@ test('charge via stripe html payment page', async ({ page, context }) => {
 
   // Verify 402 payment page rendered
   await expect(page.locator('h1')).toHaveText('Payment Required')
-  await expect(page.getByRole('button', { name: 'Pay' })).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Pay' })).toBeVisible({ timeout: 30_000 })
 
   // Wait for Stripe Payment Element iframe to load
   const stripeFrame = page.frameLocator('iframe[name^="__privateStripeFrame"]').first()
   const cardButton = stripeFrame.locator('[data-value="card"]')
-  await expect(cardButton)
-    .toBeVisible({ timeout: 15_000 })
-    .catch((e) => {
-      console.error('Browser logs:\n' + logs.join('\n'))
-      throw e
-    })
+  await expect(cardButton).toBeVisible({ timeout: 30_000 })
 
   // Card option is collapsed by default — click to expand, wait for inputs to render
   await cardButton.click()
@@ -39,16 +22,15 @@ test('charge via stripe html payment page', async ({ page, context }) => {
 
   // Wait for card inputs to appear and fill test card details
   const numberInput = stripeFrame.locator('[name="number"]')
-  await expect(numberInput).toBeVisible({ timeout: 15_000 })
+  await expect(numberInput).toBeVisible({ timeout: 30_000 })
   await numberInput.fill('4242424242424242')
   await stripeFrame.locator('[name="expiry"]').fill('12/34')
   await stripeFrame.locator('[name="cvc"]').fill('123')
 
   // Fill postal code if visible
   const postalCode = stripeFrame.locator('[name="postalCode"]')
-  if (await postalCode.isVisible({ timeout: 2_000 }).catch(() => false)) {
+  if (await postalCode.isVisible({ timeout: 2_000 }).catch(() => false))
     await postalCode.fill('10001')
-  }
 
   // Wait for Stripe Elements to settle
   await page.waitForTimeout(500)
@@ -57,7 +39,7 @@ test('charge via stripe html payment page', async ({ page, context }) => {
   await page.getByRole('button', { name: 'Pay' }).click()
 
   // Wait for service worker to submit credential and page to reload with paid response
-  await expect(page.locator('body')).toContainText('"fortune":')
+  await expect(page.locator('body')).toContainText('"fortune":', { timeout: 30_000 })
 })
 
 test('service worker endpoint returns javascript', async ({ page }) => {
diff --git a/test/html/tempo.test.ts b/test/html/tempo.test.ts
index 0cc0665e..6b06182e 100644
--- a/test/html/tempo.test.ts
+++ b/test/html/tempo.test.ts
@@ -1,9 +1,17 @@
 import { expect, test } from '@playwright/test'
-
-import { setup } from './setup.js'
+import { createClient, http } from 'viem'
+import { privateKeyToAccount } from 'viem/accounts'
+import { tempoModerato } from 'viem/chains'
+import { Actions } from 'viem/tempo'
 
 test.beforeAll(async () => {
-  await setup()
+  const privateKey = '0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d'
+  const account = privateKeyToAccount(privateKey)
+
+  // Fund the test payer account via faucet
+  const client = createClient({ chain: tempoModerato, transport: http() })
+  await Actions.faucet.fundSync(client, { account })
+  console.log(`funded ${account.address}`)
 })
 
 test('charge via html payment page', async ({ page, context }) => {

From c5bd01b3e3eaee34734a9fae2fd285d1bdccc233 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 15:43:18 -0400
Subject: [PATCH 19/28] chore: fix stripe pure types

---
 src/stripe/server/internal/html/main.ts             | 2 +-
 src/stripe/server/internal/html/stripe-js-pure.d.ts | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 src/stripe/server/internal/html/stripe-js-pure.d.ts

diff --git a/src/stripe/server/internal/html/main.ts b/src/stripe/server/internal/html/main.ts
index b0613e24..b5ca49d4 100644
--- a/src/stripe/server/internal/html/main.ts
+++ b/src/stripe/server/internal/html/main.ts
@@ -23,7 +23,7 @@ h2.textContent = 'stripe'
 root.appendChild(h2)
 
 ;(async () => {
-  const stripeJs = (await loadStripe(data.config.publishableKey))!
+  const stripeJs = await loadStripe(data.config.publishableKey)
   if (!stripeJs) throw new Error('Failed to loadStripe')
 
   const darkQuery = window.matchMedia('(prefers-color-scheme: dark)')
diff --git a/src/stripe/server/internal/html/stripe-js-pure.d.ts b/src/stripe/server/internal/html/stripe-js-pure.d.ts
new file mode 100644
index 00000000..25c0e370
--- /dev/null
+++ b/src/stripe/server/internal/html/stripe-js-pure.d.ts
@@ -0,0 +1,7 @@
+declare module '@stripe/stripe-js/pure' {
+  export * from '@stripe/stripe-js'
+
+  export const loadStripe: typeof import('@stripe/stripe-js').loadStripe & {
+    setLoadParameters(parameters: { advancedFraudSignals: boolean }): void
+  }
+}

From 98083ea360add2e3c572d87d1b049c0f199fdb92 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 15:45:20 -0400
Subject: [PATCH 20/28] chore: up

---
 test/html/playwright.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/html/playwright.config.ts b/test/html/playwright.config.ts
index bbf84042..d008c44f 100644
--- a/test/html/playwright.config.ts
+++ b/test/html/playwright.config.ts
@@ -11,7 +11,7 @@ export default defineConfig({
   timeout: 60_000,
   retries: 1,
   use: {
-    headless: false,
+    headless: true,
     screenshot: 'only-on-failure',
     trace: 'retain-on-failure',
     video: 'retain-on-failure',

From aaa6ec62a1f1d623596191dcb78cf44015a87873 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 15:57:14 -0400
Subject: [PATCH 21/28] test(html): stripe iframe retry

---
 examples/charge/package.json |  2 +-
 examples/stripe/package.json |  2 +-
 pnpm-lock.yaml               | 27 ++++++++++----------
 pnpm-workspace.yaml          |  1 -
 test/html/stripe.test.ts     | 48 ++++++++++++++++++++++++++++++------
 5 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/examples/charge/package.json b/examples/charge/package.json
index 8aa093da..24d2fdd1 100644
--- a/examples/charge/package.json
+++ b/examples/charge/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "check:types": "tsgo -b",
-    "dev": "vp dev",
+    "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview"
   },
diff --git a/examples/stripe/package.json b/examples/stripe/package.json
index fd254f38..d158e2f7 100644
--- a/examples/stripe/package.json
+++ b/examples/stripe/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vp dev",
+    "dev": "vite dev",
     "check": "biome check --fix --unsafe",
     "check:types": "tsgo -b",
     "build": "vite build",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f0386fd8..030e9038 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,7 +6,6 @@ settings:
 
 overrides:
   mppx: workspace:*
-  vite: npm:@voidzero-dev/vite-plus-core@~0.1.14
   vitest: npm:@voidzero-dev/vite-plus-test@~0.1.14
   ox: ^0.14.1
   viem: ^2.47.5
@@ -145,8 +144,8 @@ importers:
         specifier: ^2.47.5
         version: 2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6)
       vite:
-        specifier: npm:@voidzero-dev/vite-plus-core@~0.1.14
-        version: '@voidzero-dev/vite-plus-core@0.1.14(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)'
+        specifier: latest
+        version: 8.0.3(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(yaml@2.8.3)
 
   examples/charge-wagmi:
     dependencies:
@@ -189,13 +188,13 @@ importers:
         version: 7.0.0-dev.20260323.1
       '@vitejs/plugin-react':
         specifier: latest
-        version: 6.0.1(@voidzero-dev/vite-plus-core@0.1.14(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3))
+        version: 6.0.1(vite@8.0.3(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(yaml@2.8.3))
       typescript:
         specifier: latest
         version: 5.9.3
       vite:
-        specifier: npm:@voidzero-dev/vite-plus-core@~0.1.14
-        version: '@voidzero-dev/vite-plus-core@0.1.14(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)'
+        specifier: latest
+        version: 8.0.3(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(yaml@2.8.3)
 
   examples/session/multi-fetch:
     dependencies:
@@ -221,8 +220,8 @@ importers:
         specifier: ^2.47.5
         version: 2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6)
       vite:
-        specifier: npm:@voidzero-dev/vite-plus-core@~0.1.14
-        version: '@voidzero-dev/vite-plus-core@0.1.14(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)'
+        specifier: latest
+        version: 8.0.3(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(yaml@2.8.3)
 
   examples/session/sse:
     dependencies:
@@ -248,8 +247,8 @@ importers:
         specifier: ^2.47.5
         version: 2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6)
       vite:
-        specifier: npm:@voidzero-dev/vite-plus-core@~0.1.14
-        version: '@voidzero-dev/vite-plus-core@0.1.14(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)'
+        specifier: latest
+        version: 8.0.3(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(yaml@2.8.3)
 
   examples/stripe:
     dependencies:
@@ -275,8 +274,8 @@ importers:
         specifier: latest
         version: 5.9.3
       vite:
-        specifier: npm:@voidzero-dev/vite-plus-core@~0.1.14
-        version: '@voidzero-dev/vite-plus-core@0.1.14(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)'
+        specifier: latest
+        version: 8.0.3(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(yaml@2.8.3)
 
   src/stripe/server/internal/html:
     dependencies:
@@ -4859,10 +4858,10 @@ snapshots:
       '@typescript/native-preview-win32-arm64': 7.0.0-dev.20260323.1
       '@typescript/native-preview-win32-x64': 7.0.0-dev.20260323.1
 
-  '@vitejs/plugin-react@6.0.1(@voidzero-dev/vite-plus-core@0.1.14(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3))':
+  '@vitejs/plugin-react@6.0.1(vite@8.0.3(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(yaml@2.8.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.7
-      vite: '@voidzero-dev/vite-plus-core@0.1.14(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)'
+      vite: 8.0.3(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(yaml@2.8.3)
 
   '@voidzero-dev/vite-plus-core@0.1.14(@types/node@25.5.0)(esbuild@0.27.2)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)':
     dependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 0654bc54..e9fee7ae 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -6,7 +6,6 @@ packages:
 
 overrides:
   mppx: 'workspace:*'
-  vite: 'npm:@voidzero-dev/vite-plus-core@~0.1.14'
   vitest: 'npm:@voidzero-dev/vite-plus-test@~0.1.14'
   ox: '^0.14.1'
   viem: '^2.47.5'
diff --git a/test/html/stripe.test.ts b/test/html/stripe.test.ts
index ee80d7e0..1845184b 100644
--- a/test/html/stripe.test.ts
+++ b/test/html/stripe.test.ts
@@ -1,3 +1,4 @@
+import type { Frame, Page } from '@playwright/test'
 import { expect, test } from '@playwright/test'
 
 test('charge via stripe html payment page', async ({ page }) => {
@@ -11,17 +12,21 @@ test('charge via stripe html payment page', async ({ page }) => {
   await expect(page.locator('h1')).toHaveText('Payment Required')
   await expect(page.getByRole('button', { name: 'Pay' })).toBeVisible({ timeout: 30_000 })
 
-  // Wait for Stripe Payment Element iframe to load
-  const stripeFrame = page.frameLocator('iframe[name^="__privateStripeFrame"]').first()
-  const cardButton = stripeFrame.locator('[data-value="card"]')
-  await expect(cardButton).toBeVisible({ timeout: 30_000 })
+  // Stripe renders several private frames. Find the one that actually contains
+  // the payment controls instead of assuming the first frame is the card UI.
+  const stripeFrame = await getStripePaymentFrame(page)
+  const numberInput = stripeFrame.locator('[name="number"]')
 
-  // Card option is collapsed by default — click to expand, wait for inputs to render
-  await cardButton.click()
-  await page.waitForTimeout(1_000)
+  // Some runs render card fields immediately; others require expanding card.
+  if (!(await numberInput.isVisible({ timeout: 2_000 }).catch(() => false))) {
+    const cardButton = stripeFrame.locator('[data-value="card"]')
+    if (await cardButton.isVisible({ timeout: 10_000 }).catch(() => false)) {
+      await cardButton.click()
+      await page.waitForTimeout(1_000)
+    }
+  }
 
   // Wait for card inputs to appear and fill test card details
-  const numberInput = stripeFrame.locator('[name="number"]')
   await expect(numberInput).toBeVisible({ timeout: 30_000 })
   await numberInput.fill('4242424242424242')
   await stripeFrame.locator('[name="expiry"]').fill('12/34')
@@ -47,3 +52,30 @@ test('service worker endpoint returns javascript', async ({ page }) => {
   expect(response?.headers()['content-type']).toContain('application/javascript')
   expect(response?.status()).toBe(200)
 })
+
+async function getStripePaymentFrame(page: Page, timeout = 30_000): Promise<Frame> {
+  const deadline = Date.now() + timeout
+
+  while (Date.now() < deadline) {
+    for (const frame of page.frames()) {
+      if (!frame.name().startsWith('__privateStripeFrame')) continue
+
+      const hasNumberInput =
+        (await frame
+          .locator('[name="number"]')
+          .count()
+          .catch(() => 0)) > 0
+      const hasCardButton =
+        (await frame
+          .locator('[data-value="card"]')
+          .count()
+          .catch(() => 0)) > 0
+
+      if (hasNumberInput || hasCardButton) return frame
+    }
+
+    await page.waitForTimeout(250)
+  }
+
+  throw new Error('Timed out waiting for Stripe payment frame')
+}

From 0534a4bfee6b7474b0e8a936cd02807c1d25a5e8 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 16:25:18 -0400
Subject: [PATCH 22/28] test(html): tweaks

---
 src/stripe/server/internal/html/main.ts |  4 --
 test/html/playwright.config.ts          |  2 +-
 test/html/server.ts                     | 76 +++++++++----------------
 test/html/stripe.test.ts                |  6 +-
 test/html/tempo.test.ts                 |  1 -
 5 files changed, 32 insertions(+), 57 deletions(-)

diff --git a/src/stripe/server/internal/html/main.ts b/src/stripe/server/internal/html/main.ts
index b5ca49d4..51aae8ff 100644
--- a/src/stripe/server/internal/html/main.ts
+++ b/src/stripe/server/internal/html/main.ts
@@ -14,10 +14,6 @@ const data = JSON.parse(document.getElementById(Html.dataId)!.textContent!) as {
 
 const root = document.getElementById('root')!
 
-// Stripe.js can enable invisible anti-bot checks. In real browsers we keep the
-// default behavior, but deterministic automation benefits from opting out.
-if (navigator.webdriver) loadStripe.setLoadParameters({ advancedFraudSignals: false })
-
 const h2 = document.createElement('h2')
 h2.textContent = 'stripe'
 root.appendChild(h2)
diff --git a/test/html/playwright.config.ts b/test/html/playwright.config.ts
index d008c44f..bbf84042 100644
--- a/test/html/playwright.config.ts
+++ b/test/html/playwright.config.ts
@@ -11,7 +11,7 @@ export default defineConfig({
   timeout: 60_000,
   retries: 1,
   use: {
-    headless: true,
+    headless: false,
     screenshot: 'only-on-failure',
     trace: 'retain-on-failure',
     video: 'retain-on-failure',
diff --git a/test/html/server.ts b/test/html/server.ts
index a84e2aaa..f8672d9b 100644
--- a/test/html/server.ts
+++ b/test/html/server.ts
@@ -12,8 +12,22 @@ export async function startServer(port: number): Promise<HtmlTestServer> {
   const stripeSecretKey = process.env.VITE_STRIPE_SECRET_KEY
   if (!stripeSecretKey) throw new Error('Missing VITE_STRIPE_SECRET_KEY')
 
+  const account = privateKeyToAccount(generatePrivateKey())
+  const tempoClient = createClient({
+    chain: tempoModerato,
+    pollingInterval: 1_000,
+    transport: createHttpTransport(process.env.MPPX_RPC_URL),
+  })
+  for (let attempt = 1; ; attempt++)
+    try {
+      await Actions.faucet.fundSync(tempoClient, { account })
+      break
+    } catch (error) {
+      if (attempt >= 3) throw error
+    }
+
   const createTokenUrl = '/stripe/create-spt'
-  const stripeMppx = Mppx.create({
+  const mppx = Mppx.create({
     methods: [
       stripe.charge({
         html: {
@@ -24,61 +38,27 @@ export async function startServer(port: number): Promise<HtmlTestServer> {
         paymentMethodTypes: ['card'],
         secretKey: stripeSecretKey,
       }),
+      tempo.charge({
+        account,
+        currency: '0x20c0000000000000000000000000000000000000',
+        feePayer: true,
+        html: true,
+        recipient: account.address,
+        testnet: true,
+      }),
     ],
     secretKey: 'test-html-server-secret-key',
   })
-  let tempoChargePromise: Promise<(request: Request) => Promise<any>> | undefined
-
-  async function getTempoCharge() {
-    if (!tempoChargePromise) {
-      tempoChargePromise = (async () => {
-        const account = privateKeyToAccount(generatePrivateKey())
-        const tempoClient = createClient({
-          chain: tempoModerato,
-          pollingInterval: 1_000,
-          transport: createHttpTransport(process.env.MPPX_RPC_URL),
-        })
-
-        for (let attempt = 1; ; attempt++) {
-          try {
-            await Actions.faucet.fundSync(tempoClient, { account })
-            break
-          } catch (error) {
-            if (attempt >= 3) throw error
-          }
-        }
-
-        const tempoMppx = Mppx.create({
-          methods: [
-            tempo.charge({
-              account,
-              currency: '0x20c0000000000000000000000000000000000000',
-              feePayer: true,
-              html: true,
-              recipient: account.address,
-              testnet: true,
-            }),
-          ],
-          secretKey: 'test-html-server-secret-key',
-        })
-
-        return tempoMppx.tempo.charge({
-          amount: '0.01',
-          description: 'Random stock photo',
-        })
-      })()
-    }
-
-    return await tempoChargePromise
-  }
 
   const server = http.createServer(
     ServerRequest.toNodeListener(async (request) => {
       const url = new URL(request.url)
 
       if (url.pathname === '/tempo/charge') {
-        const tempoCharge = await getTempoCharge()
-        const result = await tempoCharge(request)
+        const result = await mppx.tempo.charge({
+          amount: '0.01',
+          description: 'Random stock photo',
+        })(request)
 
         if (result.status === 402) return result.challenge
 
@@ -88,7 +68,7 @@ export async function startServer(port: number): Promise<HtmlTestServer> {
       if (url.pathname === createTokenUrl) return createSharedPaymentToken(request, stripeSecretKey)
 
       if (url.pathname === '/stripe/charge') {
-        const result = await stripeMppx.stripe.charge({
+        const result = await mppx.stripe.charge({
           amount: '1',
           currency: 'usd',
           decimals: 2,
diff --git a/test/html/stripe.test.ts b/test/html/stripe.test.ts
index 1845184b..f2f1c2dc 100644
--- a/test/html/stripe.test.ts
+++ b/test/html/stripe.test.ts
@@ -18,16 +18,16 @@ test('charge via stripe html payment page', async ({ page }) => {
   const numberInput = stripeFrame.locator('[name="number"]')
 
   // Some runs render card fields immediately; others require expanding card.
-  if (!(await numberInput.isVisible({ timeout: 2_000 }).catch(() => false))) {
+  if (!(await numberInput.isVisible({ timeout: 90_000 }).catch(() => false))) {
     const cardButton = stripeFrame.locator('[data-value="card"]')
-    if (await cardButton.isVisible({ timeout: 10_000 }).catch(() => false)) {
+    if (await cardButton.isVisible({ timeout: 90_000 }).catch(() => false)) {
       await cardButton.click()
       await page.waitForTimeout(1_000)
     }
   }
 
   // Wait for card inputs to appear and fill test card details
-  await expect(numberInput).toBeVisible({ timeout: 30_000 })
+  await expect(numberInput).toBeVisible({ timeout: 90_000 })
   await numberInput.fill('4242424242424242')
   await stripeFrame.locator('[name="expiry"]').fill('12/34')
   await stripeFrame.locator('[name="cvc"]').fill('123')
diff --git a/test/html/tempo.test.ts b/test/html/tempo.test.ts
index 6b06182e..78e409dd 100644
--- a/test/html/tempo.test.ts
+++ b/test/html/tempo.test.ts
@@ -11,7 +11,6 @@ test.beforeAll(async () => {
   // Fund the test payer account via faucet
   const client = createClient({ chain: tempoModerato, transport: http() })
   await Actions.faucet.fundSync(client, { account })
-  console.log(`funded ${account.address}`)
 })
 
 test('charge via html payment page', async ({ page, context }) => {

From a88582b56770d09aa3b68fb2125422b4bfc92ce2 Mon Sep 17 00:00:00 2001
From: tmm <tom@meagher.co>
Date: Tue, 31 Mar 2026 16:55:40 -0400
Subject: [PATCH 23/28] Update playwright.config.ts

---
 test/html/playwright.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/html/playwright.config.ts b/test/html/playwright.config.ts
index bbf84042..d008c44f 100644
--- a/test/html/playwright.config.ts
+++ b/test/html/playwright.config.ts
@@ -11,7 +11,7 @@ export default defineConfig({
   timeout: 60_000,
   retries: 1,
   use: {
-    headless: false,
+    headless: true,
     screenshot: 'only-on-failure',
     trace: 'retain-on-failure',
     video: 'retain-on-failure',

From 89386863009a95287bd3621cee8497f25cb2ae0d Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 21:51:52 -0500
Subject: [PATCH 24/28] ci: test html upload

---
 .github/workflows/verify.yml   | 11 +++++++++++
 test/html/playwright.config.ts |  3 ++-
 test/html/stripe.test.ts       | 27 +++++++++------------------
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml
index b46fd1de..cc6c5325 100644
--- a/.github/workflows/verify.yml
+++ b/.github/workflows/verify.yml
@@ -168,3 +168,14 @@ jobs:
           MPP_SECRET_KEY: test-secret-key
           VITE_STRIPE_SECRET_KEY: ${{ secrets.VITE_STRIPE_SECRET_KEY }}
           VITE_STRIPE_PUBLIC_KEY: ${{ secrets.VITE_STRIPE_PUBLIC_KEY }}
+
+      - name: Upload Playwright artifacts
+        if: ${{ always() }}
+        uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
+        with:
+          name: playwright-artifacts
+          path: |
+            playwright-report
+            test-results
+          if-no-files-found: ignore
+          retention-days: 7
diff --git a/test/html/playwright.config.ts b/test/html/playwright.config.ts
index d008c44f..6217d152 100644
--- a/test/html/playwright.config.ts
+++ b/test/html/playwright.config.ts
@@ -10,8 +10,9 @@ export default defineConfig({
   testMatch: '*.test.ts',
   timeout: 60_000,
   retries: 1,
+  reporter: process.env.CI ? [['line'], ['html', { open: 'never' }]] : 'list',
   use: {
-    headless: true,
+    headless: !!process.env.CI || true,
     screenshot: 'only-on-failure',
     trace: 'retain-on-failure',
     video: 'retain-on-failure',
diff --git a/test/html/stripe.test.ts b/test/html/stripe.test.ts
index f2f1c2dc..77ecf887 100644
--- a/test/html/stripe.test.ts
+++ b/test/html/stripe.test.ts
@@ -10,21 +10,18 @@ test('charge via stripe html payment page', async ({ page }) => {
 
   // Verify 402 payment page rendered
   await expect(page.locator('h1')).toHaveText('Payment Required')
-  await expect(page.getByRole('button', { name: 'Pay' })).toBeVisible({ timeout: 30_000 })
+  await expect(page.getByRole('button', { name: 'Pay' })).toBeVisible({ timeout: 10_000 })
 
   // Stripe renders several private frames. Find the one that actually contains
   // the payment controls instead of assuming the first frame is the card UI.
   const stripeFrame = await getStripePaymentFrame(page)
   const numberInput = stripeFrame.locator('[name="number"]')
 
-  // Some runs render card fields immediately; others require expanding card.
-  if (!(await numberInput.isVisible({ timeout: 90_000 }).catch(() => false))) {
-    const cardButton = stripeFrame.locator('[data-value="card"]')
-    if (await cardButton.isVisible({ timeout: 90_000 }).catch(() => false)) {
-      await cardButton.click()
-      await page.waitForTimeout(1_000)
-    }
-  }
+  // Open card form
+  const cardButton = stripeFrame.locator('[data-value="card"]')
+  await cardButton.isVisible({ timeout: 90_000 })
+  await cardButton.click()
+  await page.waitForTimeout(1_000)
 
   // Wait for card inputs to appear and fill test card details
   await expect(numberInput).toBeVisible({ timeout: 90_000 })
@@ -34,8 +31,8 @@ test('charge via stripe html payment page', async ({ page }) => {
 
   // Fill postal code if visible
   const postalCode = stripeFrame.locator('[name="postalCode"]')
-  if (await postalCode.isVisible({ timeout: 2_000 }).catch(() => false))
-    await postalCode.fill('10001')
+  await postalCode.isVisible({ timeout: 2_000 })
+  await postalCode.fill('10001')
 
   // Wait for Stripe Elements to settle
   await page.waitForTimeout(500)
@@ -60,18 +57,12 @@ async function getStripePaymentFrame(page: Page, timeout = 30_000): Promise<Fram
     for (const frame of page.frames()) {
       if (!frame.name().startsWith('__privateStripeFrame')) continue
 
-      const hasNumberInput =
-        (await frame
-          .locator('[name="number"]')
-          .count()
-          .catch(() => 0)) > 0
       const hasCardButton =
         (await frame
           .locator('[data-value="card"]')
           .count()
           .catch(() => 0)) > 0
-
-      if (hasNumberInput || hasCardButton) return frame
+      if (hasCardButton) return frame
     }
 
     await page.waitForTimeout(250)

From a21faa92328a114197fa1ceef7f196b09b38c24c Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 22:45:22 -0500
Subject: [PATCH 25/28] test(html): tempo local adapter

---
 scripts/build:html.ts                         |  2 +-
 src/env.d.ts                                  |  2 +
 src/stripe/server/internal/html/tsconfig.json |  2 +-
 src/tempo/server/internal/html/main.ts        | 69 +++++++++----------
 src/tempo/server/internal/html/tsconfig.json  |  2 +-
 test/html/globalSetup.ts                      |  3 +-
 test/html/server.ts                           |  6 +-
 test/html/tempo.test.ts                       | 32 +--------
 8 files changed, 46 insertions(+), 72 deletions(-)

diff --git a/scripts/build:html.ts b/scripts/build:html.ts
index 0249a219..1f84c014 100644
--- a/scripts/build:html.ts
+++ b/scripts/build:html.ts
@@ -22,7 +22,7 @@ for (const entry of htmlEntries) {
     },
     transform: {
       define: {
-        __LOCAL_ACCOUNT__: JSON.stringify(process.env.LOCAL_ACCOUNT ?? ''),
+        __TEST__: process.env.TEST ? 'true' : 'false',
       },
     },
     output: {
diff --git a/src/env.d.ts b/src/env.d.ts
index 3900fc84..fa297a97 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1,5 +1,7 @@
 /// <reference types="vite/client" />
 
+declare const __TEST__: boolean
+
 interface ImportMetaEnv {
   readonly VITE_NODE_ENV: 'localnet' | 'testnet' | 'mainnet'
   readonly VITE_HTTP_LOG: 'true' | 'false'
diff --git a/src/stripe/server/internal/html/tsconfig.json b/src/stripe/server/internal/html/tsconfig.json
index ac01827c..06388472 100644
--- a/src/stripe/server/internal/html/tsconfig.json
+++ b/src/stripe/server/internal/html/tsconfig.json
@@ -4,5 +4,5 @@
     "lib": ["es2022", "dom"],
     "types": []
   },
-  "include": ["./**/*.ts"]
+  "include": ["./**/*.ts", "../../../../env.d.ts"]
 }
diff --git a/src/tempo/server/internal/html/main.ts b/src/tempo/server/internal/html/main.ts
index 06daad2e..40aac58c 100644
--- a/src/tempo/server/internal/html/main.ts
+++ b/src/tempo/server/internal/html/main.ts
@@ -1,8 +1,9 @@
-import { Provider } from 'accounts'
-import { Hex, Json } from 'ox'
+import { local, Provider } from 'accounts'
+import { Json } from 'ox'
 import { createClient, custom, http } from 'viem'
+import { generatePrivateKey } from 'viem/accounts'
 import { tempoModerato, tempoLocalnet } from 'viem/chains'
-import { Account } from 'viem/tempo'
+import { Account, Actions } from 'viem/tempo'
 
 import type * as Challenge from '../../../../Challenge.js'
 import { tempo } from '../../../../client/index.js'
@@ -20,20 +21,30 @@ const h2 = document.createElement('h2')
 h2.textContent = 'tempo'
 root.appendChild(h2)
 
-// Used for testing. TODO: Wire up more native way
-const localTempoAccount = __LOCAL_ACCOUNT__
-  ? Account.fromSecp256k1(__LOCAL_ACCOUNT__ as Hex.Hex)
-  : undefined
-declare const __LOCAL_ACCOUNT__: string | undefined
-
-const provider = (() => {
-  if (localTempoAccount) return undefined
-  return Provider.create({
-    testnet:
-      data.challenge.request.methodDetails?.chainId === tempoModerato.id ||
-      data.challenge.request.methodDetails?.chainId === tempoLocalnet.id,
-  })
-})()
+const provider = Provider.create({
+  ...(__TEST__ && {
+    // Dead code eliminated from production bundle
+    adapter: local({
+      async loadAccounts() {
+        const privateKey = generatePrivateKey()
+        const account = Account.fromSecp256k1(privateKey)
+        const client = createClient({
+          chain: [tempoModerato, tempoLocalnet].find(
+            (x) => x.id === data.challenge.request.methodDetails?.chainId,
+          ),
+          transport: http(),
+        })
+        await Actions.faucet.fundSync(client, { account })
+        return {
+          accounts: [account],
+        }
+      },
+    }),
+  }),
+  testnet:
+    data.challenge.request.methodDetails?.chainId === tempoModerato.id ||
+    data.challenge.request.methodDetails?.chainId === tempoLocalnet.id,
+})
 
 const button = document.createElement('button')
 button.textContent = 'Continue with Tempo'
@@ -41,24 +52,12 @@ button.onclick = async () => {
   try {
     button.disabled = true
 
-    const client = (() => {
-      const chain = [...(provider?.chains ?? []), tempoModerato, tempoLocalnet].find(
-        (x) => x.id === data.challenge.request.methodDetails?.chainId,
-      )
-      if (localTempoAccount || !provider)
-        return createClient({
-          account: localTempoAccount,
-          chain,
-          transport: http(chain?.rpcUrls.default.http[0]),
-        })
-      return createClient({ chain, transport: custom(provider) })
-    })()
-
-    const account = await (async () => {
-      if (localTempoAccount || !provider) return localTempoAccount
-      const res = await provider.request({ method: 'wallet_connect' })
-      return res.accounts[0]!.address
-    })()
+    const chain = [...(provider?.chains ?? []), tempoModerato, tempoLocalnet].find(
+      (x) => x.id === data.challenge.request.methodDetails?.chainId,
+    )
+    const client = createClient({ chain, transport: custom(provider) })
+    const result = await provider.request({ method: 'wallet_connect' })
+    const account = result.accounts[0]?.address
     const method = tempo({ account, getClient: () => client })[0]
 
     const credential = await method.createCredential({ challenge: data.challenge, context: {} })
diff --git a/src/tempo/server/internal/html/tsconfig.json b/src/tempo/server/internal/html/tsconfig.json
index ac01827c..06388472 100644
--- a/src/tempo/server/internal/html/tsconfig.json
+++ b/src/tempo/server/internal/html/tsconfig.json
@@ -4,5 +4,5 @@
     "lib": ["es2022", "dom"],
     "types": []
   },
-  "include": ["./**/*.ts"]
+  "include": ["./**/*.ts", "../../../../env.d.ts"]
 }
diff --git a/test/html/globalSetup.ts b/test/html/globalSetup.ts
index 466f849a..7f6660de 100644
--- a/test/html/globalSetup.ts
+++ b/test/html/globalSetup.ts
@@ -1,8 +1,7 @@
 import { execSync } from 'node:child_process'
 
 export default async function globalSetup() {
-  const privateKey = '0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d'
-  execSync(`LOCAL_ACCOUNT=${privateKey} pnpm build`, {
+  execSync(`TEST=1 pnpm build`, {
     cwd: new URL('../..', import.meta.url).pathname,
     stdio: 'inherit',
   })
diff --git a/test/html/server.ts b/test/html/server.ts
index f8672d9b..8097be5d 100644
--- a/test/html/server.ts
+++ b/test/html/server.ts
@@ -13,14 +13,14 @@ export async function startServer(port: number): Promise<HtmlTestServer> {
   if (!stripeSecretKey) throw new Error('Missing VITE_STRIPE_SECRET_KEY')
 
   const account = privateKeyToAccount(generatePrivateKey())
-  const tempoClient = createClient({
+  const client = createClient({
     chain: tempoModerato,
     pollingInterval: 1_000,
-    transport: createHttpTransport(process.env.MPPX_RPC_URL),
+    transport: createHttpTransport(),
   })
   for (let attempt = 1; ; attempt++)
     try {
-      await Actions.faucet.fundSync(tempoClient, { account })
+      await Actions.faucet.fundSync(client, { account })
       break
     } catch (error) {
       if (attempt >= 3) throw error
diff --git a/test/html/tempo.test.ts b/test/html/tempo.test.ts
index 78e409dd..07265e2b 100644
--- a/test/html/tempo.test.ts
+++ b/test/html/tempo.test.ts
@@ -1,27 +1,6 @@
 import { expect, test } from '@playwright/test'
-import { createClient, http } from 'viem'
-import { privateKeyToAccount } from 'viem/accounts'
-import { tempoModerato } from 'viem/chains'
-import { Actions } from 'viem/tempo'
-
-test.beforeAll(async () => {
-  const privateKey = '0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d'
-  const account = privateKeyToAccount(privateKey)
-
-  // Fund the test payer account via faucet
-  const client = createClient({ chain: tempoModerato, transport: http() })
-  await Actions.faucet.fundSync(client, { account })
-})
-
-test('charge via html payment page', async ({ page, context }) => {
-  const logs: string[] = []
-  page.on('pageerror', (err) => logs.push(`[pageerror] ${err.message}`))
-  page.on('console', (msg) => logs.push(`[console.${msg.type()}] ${msg.text()}`))
-  page.on('requestfailed', (req) =>
-    logs.push(`[requestfailed] ${req.url()} ${req.failure()?.errorText}`),
-  )
-  context.on('serviceworker', (sw) => logs.push(`[serviceworker] registered: ${sw.url()}`))
 
+test('charge via html payment page', async ({ page }) => {
   // Navigate to the payment endpoint as a browser
   await page.goto('/tempo/charge', {
     waitUntil: 'domcontentloaded',
@@ -31,16 +10,11 @@ test('charge via html payment page', async ({ page, context }) => {
   await expect(page.locator('h1')).toHaveText('Payment Required')
   await expect(page.getByText('Continue with Tempo')).toBeVisible()
 
-  // Click the pay button — local adapter signs without dialog
+  // Click the pay button (local adapter signs without dialog)
   await page.getByText('Continue with Tempo').click()
 
   // Wait for service worker to submit credential and page to reload with paid response
-  await expect(page.locator('body'))
-    .toContainText('"url":', { timeout: 30_000 })
-    .catch((e) => {
-      console.error('Browser logs:\n' + logs.join('\n'))
-      throw e
-    })
+  await expect(page.locator('body')).toContainText('"url":', { timeout: 30_000 })
 })
 
 test('service worker endpoint returns javascript', async ({ page }) => {

From d6a5cf24a9d65387ff22d968118b660bcd9995f7 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Tue, 31 Mar 2026 23:45:33 -0500
Subject: [PATCH 26/28] test: mode

---
 scripts/build:html.ts                   | 24 +++++++---
 src/env.d.ts                            |  3 +-
 src/stripe/server/internal/html/main.ts | 62 ++++++++++++++++---------
 src/tempo/server/internal/html/main.ts  | 40 ++++++++--------
 test/html/globalSetup.ts                | 14 +++++-
 test/html/stripe.test.ts                | 44 +++++++++---------
 6 files changed, 112 insertions(+), 75 deletions(-)

diff --git a/scripts/build:html.ts b/scripts/build:html.ts
index 1f84c014..d299f5cd 100644
--- a/scripts/build:html.ts
+++ b/scripts/build:html.ts
@@ -5,16 +5,24 @@ import { build } from 'rolldown'
 
 const root = path.resolve(import.meta.dirname, '..')
 const outDir = path.resolve(root, '.tmp/html-build')
+const defaultMode = process.env.TEST ? 'test' : 'production'
+const stripeMode = process.env.STRIPE_HTML_MODE ?? defaultMode
 
 // HTML entries — bundled into <script> tags
 const htmlEntries = [
-  'src/tempo/server/internal/html/main.ts',
-  'src/stripe/server/internal/html/main.ts',
+  {
+    entry: 'src/tempo/server/internal/html/main.ts',
+    mode: defaultMode,
+    outFile: path.resolve(root, 'src/tempo/server/internal/html.gen.ts'),
+  },
+  {
+    entry: 'src/stripe/server/internal/html/main.ts',
+    mode: stripeMode,
+    outFile: path.resolve(root, 'src/stripe/server/internal/html.gen.ts'),
+  },
 ]
 
-for (const entry of htmlEntries) {
-  const outFile = path.resolve(root, path.dirname(entry), '..', 'html.gen.ts')
-
+for (const { entry, mode, outFile } of htmlEntries) {
   await build({
     input: path.resolve(root, entry),
     resolve: {
@@ -22,7 +30,9 @@ for (const entry of htmlEntries) {
     },
     transform: {
       define: {
-        __TEST__: process.env.TEST ? 'true' : 'false',
+        'import.meta': JSON.stringify({}),
+        'import.meta.env': JSON.stringify({ MODE: mode }),
+        'import.meta.env.MODE': JSON.stringify(mode),
       },
     },
     output: {
@@ -43,7 +53,7 @@ for (const entry of htmlEntries) {
   console.log(`wrote ${path.relative(root, outFile)}`)
 }
 
-// Service worker — bundled as raw JS string
+// Service worker (bundled as raw JS string)
 {
   const entry = 'src/server/internal/html/serviceWorker.ts'
   const outFile = path.resolve(root, 'src/server/internal/html/serviceWorker.gen.ts')
diff --git a/src/env.d.ts b/src/env.d.ts
index fa297a97..de859214 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1,8 +1,7 @@
 /// <reference types="vite/client" />
 
-declare const __TEST__: boolean
-
 interface ImportMetaEnv {
+  readonly MODE: 'test' | 'production'
   readonly VITE_NODE_ENV: 'localnet' | 'testnet' | 'mainnet'
   readonly VITE_HTTP_LOG: 'true' | 'false'
   readonly VITE_RPC_CREDENTIALS: string
diff --git a/src/stripe/server/internal/html/main.ts b/src/stripe/server/internal/html/main.ts
index 51aae8ff..13f7c578 100644
--- a/src/stripe/server/internal/html/main.ts
+++ b/src/stripe/server/internal/html/main.ts
@@ -4,6 +4,7 @@ import type * as Challenge from '../../../../Challenge.js'
 import { stripe } from '../../../../client/index.js'
 import * as Html from '../../../../server/internal/html/config.js'
 import { submitCredential } from '../../../../server/internal/html/serviceWorker.client.js'
+import type { charge as chargeClient } from '../../../../stripe/client/Charge.js'
 import type { charge } from '../../../../stripe/server/Charge.js'
 import type * as Methods from '../../../Methods.js'
 
@@ -19,6 +20,26 @@ h2.textContent = 'stripe'
 root.appendChild(h2)
 
 ;(async () => {
+  if (import.meta.env.MODE === 'test') {
+    const button = document.createElement('button')
+    button.textContent = 'Pay'
+    root.appendChild(button)
+    button.onclick = async () => {
+      try {
+        button.disabled = true
+        const method = stripe({ createToken })[0]
+        const credential = await method.createCredential({
+          challenge: data.challenge,
+          context: { paymentMethod: 'pm_card_visa' },
+        })
+        await submitCredential(credential)
+      } finally {
+        button.disabled = false
+      }
+    }
+    return
+  }
+
   const stripeJs = await loadStripe(data.config.publishableKey)
   if (!stripeJs) throw new Error('Failed to loadStripe')
 
@@ -51,40 +72,35 @@ root.appendChild(h2)
   form.onsubmit = async (event) => {
     event.preventDefault()
     button.disabled = true
-
     try {
       await elements.submit()
       const { paymentMethod, error } = await stripeJs.createPaymentMethod({ elements })
       if (error || !paymentMethod) throw error ?? new Error('Failed to create payment method')
-
-      const method = stripe({
-        client: stripeJs,
-        createToken: async (opts) => {
-          const createTokenUrl = new URL(data.config.createTokenUrl, location.origin)
-          if (createTokenUrl.origin !== location.origin)
-            throw new Error('createTokenUrl must be same-origin')
-          const res = await fetch(createTokenUrl, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ paymentMethod, ...opts }),
-          })
-          if (!res.ok) {
-            const text = await res.text().catch(() => '<response body unavailable>')
-            throw new Error(`Failed to create SPT (${res.status}): ${text}`)
-          }
-          const { spt } = (await res.json()) as { spt: string }
-          return spt
-        },
-      })[0]
-
+      const method = stripe({ client: stripeJs, createToken })[0]
       const credential = await method.createCredential({
         challenge: data.challenge,
         context: { paymentMethod: paymentMethod.id },
       })
-
       await submitCredential(credential)
     } finally {
       button.disabled = false
     }
   }
 })()
+
+async function createToken(opts: chargeClient.OnChallengeParameters) {
+  const createTokenUrl = new URL(data.config.createTokenUrl, location.origin)
+  if (createTokenUrl.origin !== location.origin)
+    throw new Error('createTokenUrl must be same-origin')
+  const res = await fetch(createTokenUrl, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(opts),
+  })
+  if (!res.ok) {
+    const text = await res.text().catch(() => '<response body unavailable>')
+    throw new Error(`Failed to create SPT (${res.status}): ${text}`)
+  }
+  const json = (await res.json()) as { spt: string }
+  return json.spt
+}
diff --git a/src/tempo/server/internal/html/main.ts b/src/tempo/server/internal/html/main.ts
index 40aac58c..abc9eeea 100644
--- a/src/tempo/server/internal/html/main.ts
+++ b/src/tempo/server/internal/html/main.ts
@@ -22,25 +22,27 @@ h2.textContent = 'tempo'
 root.appendChild(h2)
 
 const provider = Provider.create({
-  ...(__TEST__ && {
-    // Dead code eliminated from production bundle
-    adapter: local({
-      async loadAccounts() {
-        const privateKey = generatePrivateKey()
-        const account = Account.fromSecp256k1(privateKey)
-        const client = createClient({
-          chain: [tempoModerato, tempoLocalnet].find(
-            (x) => x.id === data.challenge.request.methodDetails?.chainId,
-          ),
-          transport: http(),
-        })
-        await Actions.faucet.fundSync(client, { account })
-        return {
-          accounts: [account],
-        }
-      },
-    }),
-  }),
+  // Dead code eliminated from production bundle (including top-level imports)
+  ...(import.meta.env.MODE === 'test'
+    ? {
+        adapter: local({
+          async loadAccounts() {
+            const privateKey = generatePrivateKey()
+            const account = Account.fromSecp256k1(privateKey)
+            const client = createClient({
+              chain: [tempoModerato, tempoLocalnet].find(
+                (x) => x.id === data.challenge.request.methodDetails?.chainId,
+              ),
+              transport: http(),
+            })
+            await Actions.faucet.fundSync(client, { account })
+            return {
+              accounts: [account],
+            }
+          },
+        }),
+      }
+    : {}),
   testnet:
     data.challenge.request.methodDetails?.chainId === tempoModerato.id ||
     data.challenge.request.methodDetails?.chainId === tempoLocalnet.id,
diff --git a/test/html/globalSetup.ts b/test/html/globalSetup.ts
index 7f6660de..13f72fb4 100644
--- a/test/html/globalSetup.ts
+++ b/test/html/globalSetup.ts
@@ -1,8 +1,18 @@
 import { execSync } from 'node:child_process'
 
-export default async function globalSetup() {
-  execSync(`TEST=1 pnpm build`, {
+import type { FullConfig } from '@playwright/test'
+
+export default async function globalSetup(config: FullConfig) {
+  const stripeProject = config.projects.find((project) => project.name === 'stripe')
+  const stripeMode = stripeProject?.use.headless === false ? 'production' : 'test'
+
+  execSync(`pnpm build`, {
     cwd: new URL('../..', import.meta.url).pathname,
+    env: {
+      ...process.env,
+      STRIPE_HTML_MODE: stripeMode,
+      TEST: '1',
+    },
     stdio: 'inherit',
   })
 
diff --git a/test/html/stripe.test.ts b/test/html/stripe.test.ts
index 77ecf887..3aed0d8f 100644
--- a/test/html/stripe.test.ts
+++ b/test/html/stripe.test.ts
@@ -1,7 +1,7 @@
-import type { Frame, Page } from '@playwright/test'
+import type { Frame, Page, TestInfo } from '@playwright/test'
 import { expect, test } from '@playwright/test'
 
-test('charge via stripe html payment page', async ({ page }) => {
+test('charge via stripe html payment page', async ({ page }, testInfo) => {
   test.slow()
 
   await page.goto('/stripe/charge', {
@@ -12,30 +12,26 @@ test('charge via stripe html payment page', async ({ page }) => {
   await expect(page.locator('h1')).toHaveText('Payment Required')
   await expect(page.getByRole('button', { name: 'Pay' })).toBeVisible({ timeout: 10_000 })
 
-  // Stripe renders several private frames. Find the one that actually contains
-  // the payment controls instead of assuming the first frame is the card UI.
-  const stripeFrame = await getStripePaymentFrame(page)
-  const numberInput = stripeFrame.locator('[name="number"]')
+  if (!isHeadless(testInfo)) {
+    const stripeFrame = await getStripePaymentFrame(page)
+    const numberInput = stripeFrame.locator('[name="number"]')
+    const cardButton = stripeFrame.locator('[data-value="card"]')
 
-  // Open card form
-  const cardButton = stripeFrame.locator('[data-value="card"]')
-  await cardButton.isVisible({ timeout: 90_000 })
-  await cardButton.click()
-  await page.waitForTimeout(1_000)
+    await cardButton.isVisible({ timeout: 90_000 })
+    await cardButton.click()
+    await page.waitForTimeout(1_000)
 
-  // Wait for card inputs to appear and fill test card details
-  await expect(numberInput).toBeVisible({ timeout: 90_000 })
-  await numberInput.fill('4242424242424242')
-  await stripeFrame.locator('[name="expiry"]').fill('12/34')
-  await stripeFrame.locator('[name="cvc"]').fill('123')
+    await expect(numberInput).toBeVisible({ timeout: 90_000 })
+    await numberInput.fill('4242424242424242')
+    await stripeFrame.locator('[name="expiry"]').fill('12/34')
+    await stripeFrame.locator('[name="cvc"]').fill('123')
 
-  // Fill postal code if visible
-  const postalCode = stripeFrame.locator('[name="postalCode"]')
-  await postalCode.isVisible({ timeout: 2_000 })
-  await postalCode.fill('10001')
+    const postalCode = stripeFrame.locator('[name="postalCode"]')
+    await postalCode.isVisible({ timeout: 2_000 })
+    await postalCode.fill('10001')
 
-  // Wait for Stripe Elements to settle
-  await page.waitForTimeout(500)
+    await page.waitForTimeout(500)
+  }
 
   // Submit payment
   await page.getByRole('button', { name: 'Pay' }).click()
@@ -50,6 +46,10 @@ test('service worker endpoint returns javascript', async ({ page }) => {
   expect(response?.status()).toBe(200)
 })
 
+function isHeadless(testInfo: TestInfo) {
+  return testInfo.project.use.headless !== false
+}
+
 async function getStripePaymentFrame(page: Page, timeout = 30_000): Promise<Frame> {
   const deadline = Date.now() + timeout
 

From ae1223831fd514b2d09f4670b77ce7ba02e78c10 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Wed, 1 Apr 2026 00:15:45 -0500
Subject: [PATCH 27/28] chore: tweaks

---
 .github/workflows/verify.yml                  | 22 -------------
 examples/charge/package.json                  |  2 +-
 examples/stripe/package.json                  |  2 +-
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 33 +++----------------
 pnpm-workspace.yaml                           |  2 +-
 scripts/build:html.ts                         |  8 +++--
 src/server/Transport.ts                       | 11 +++----
 src/server/internal/html/config.ts            |  2 ++
 .../internal/html/serviceWorker.client.ts     |  4 ++-
 10 files changed, 25 insertions(+), 63 deletions(-)

diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml
index 3fa67cb8..bee8f6e2 100644
--- a/.github/workflows/verify.yml
+++ b/.github/workflows/verify.yml
@@ -116,15 +116,10 @@ jobs:
   test-html:
     name: Test HTML
     runs-on: ubuntu-latest
-    env:
-      VITE_TEMPO_TAG: sha-20aecec
     steps:
       - name: Clone repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
-      - name: Setup Docker
-        uses: docker/setup-docker-action@e43656e248c0bd0647d3f5c195d116aacf6fcaf4 # v4.7.0
-
       - name: Install dependencies
         uses: ./.github/actions/install-dependencies
 
@@ -142,23 +137,6 @@ jobs:
       - name: Install Playwright system deps
         run: pnpm exec playwright install-deps chromium
 
-      - name: Cache Tempo Docker image
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
-        id: docker-cache
-        with:
-          path: /tmp/tempo-image.tar
-          key: tempo-image-${{ env.VITE_TEMPO_TAG }}
-
-      - name: Load cached Tempo image
-        if: steps.docker-cache.outputs.cache-hit == 'true'
-        run: docker load -i /tmp/tempo-image.tar
-
-      - name: Pull and cache Tempo image
-        if: steps.docker-cache.outputs.cache-hit != 'true'
-        run: |
-          docker pull ghcr.io/tempoxyz/tempo:${VITE_TEMPO_TAG}
-          docker save ghcr.io/tempoxyz/tempo:${VITE_TEMPO_TAG} -o /tmp/tempo-image.tar
-
       - name: Bundle HTML files
         run: pnpm build
 
diff --git a/examples/charge/package.json b/examples/charge/package.json
index 24d2fdd1..ce7eb3b7 100644
--- a/examples/charge/package.json
+++ b/examples/charge/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "check:types": "tsgo -b",
-    "dev": "vite dev",
+    "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
diff --git a/examples/stripe/package.json b/examples/stripe/package.json
index d158e2f7..b070bf69 100644
--- a/examples/stripe/package.json
+++ b/examples/stripe/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite dev",
+    "dev": "vite",
     "check": "biome check --fix --unsafe",
     "check:types": "tsgo -b",
     "build": "vite build",
diff --git a/package.json b/package.json
index 22ca1c8f..28715667 100644
--- a/package.json
+++ b/package.json
@@ -177,7 +177,7 @@
     "@remix-run/fetch-proxy": "^0.7.1",
     "@remix-run/node-fetch-server": "^0.13.0",
     "incur": "^0.3.1",
-    "ox": "^0.14.1",
+    "ox": "0.14.7",
     "zod": "^4.3.6"
   },
   "repository": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 030e9038..dc7d3d62 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,7 +7,7 @@ settings:
 overrides:
   mppx: workspace:*
   vitest: npm:@voidzero-dev/vite-plus-test@~0.1.14
-  ox: ^0.14.1
+  ox: 0.14.7
   viem: ^2.47.5
   path-to-regexp@<8.4.0: 8.4.0
   tar@<=7.5.10: 7.5.11
@@ -41,8 +41,8 @@ importers:
         specifier: ^0.3.1
         version: 0.3.1(openapi-types@12.1.3)
       ox:
-        specifier: ^0.14.1
-        version: 0.14.1(typescript@5.9.3)(zod@4.3.6)
+        specifier: 0.14.7
+        version: 0.14.7(typescript@5.9.3)(zod@4.3.6)
       zod:
         specifier: ^4.3.6
         version: 4.3.6
@@ -1655,7 +1655,7 @@ packages:
     resolution: {integrity: sha512-EU5gDsUp5t7+cuLv12/L8hfyWfCIKsBNiiBqpOqxZJxvAcAiQk4xFe2jMgaQPqApc3Omvxrk032M8AQ4N0cQeg==}
     peerDependencies:
       '@tanstack/query-core': '>=5.0.0'
-      ox: ^0.14.1
+      ox: 0.14.7
       typescript: '>=5.7.3'
       viem: ^2.47.5
     peerDependenciesMeta:
@@ -2913,14 +2913,6 @@ packages:
   outdent@0.5.0:
     resolution: {integrity: sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==}
 
-  ox@0.14.1:
-    resolution: {integrity: sha512-93eZUbyDMYBWbFoPivZb8lyE3wFIYg795rjdPu2YRMBAkDnpUHoAmuoEfoMJ/RRWpsA8+jnSFjOWJEfLT72XyA==}
-    peerDependencies:
-      typescript: '>=5.4.0'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   ox@0.14.7:
     resolution: {integrity: sha512-zSQ/cfBdolj7U4++NAvH7sI+VG0T3pEohITCgcQj8KlawvTDY4vGVhDT64Atsm0d6adWfIYHDpu88iUBMMp+AQ==}
     peerDependencies:
@@ -6203,21 +6195,6 @@ snapshots:
 
   outdent@0.5.0: {}
 
-  ox@0.14.1(typescript@5.9.3)(zod@4.3.6):
-    dependencies:
-      '@adraffy/ens-normalize': 1.11.1
-      '@noble/ciphers': 1.3.0
-      '@noble/curves': 1.9.1
-      '@noble/hashes': 1.8.0
-      '@scure/bip32': 1.7.0
-      '@scure/bip39': 1.6.0
-      abitype: 1.2.3(typescript@5.9.3)(zod@4.3.6)
-      eventemitter3: 5.0.1
-    optionalDependencies:
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - zod
-
   ox@0.14.7(typescript@5.9.3)(zod@4.3.6):
     dependencies:
       '@adraffy/ens-normalize': 1.11.1
@@ -6787,7 +6764,7 @@ snapshots:
   tempo.ts@0.14.2(typescript@5.9.3)(viem@2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6))(zod@4.3.6):
     dependencies:
       '@remix-run/fetch-router': 0.17.0
-      ox: 0.14.1(typescript@5.9.3)(zod@4.3.6)
+      ox: 0.14.7(typescript@5.9.3)(zod@4.3.6)
     optionalDependencies:
       viem: 2.47.6(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@4.3.6)
     transitivePeerDependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index e9fee7ae..b0b23e38 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -7,7 +7,7 @@ packages:
 overrides:
   mppx: 'workspace:*'
   vitest: 'npm:@voidzero-dev/vite-plus-test@~0.1.14'
-  ox: '^0.14.1'
+  ox: '0.14.7'
   viem: '^2.47.5'
   path-to-regexp@<8.4.0: '8.4.0'
   tar@<=7.5.10: '7.5.11'
diff --git a/scripts/build:html.ts b/scripts/build:html.ts
index d299f5cd..a11393ad 100644
--- a/scripts/build:html.ts
+++ b/scripts/build:html.ts
@@ -7,6 +7,8 @@ const root = path.resolve(import.meta.dirname, '..')
 const outDir = path.resolve(root, '.tmp/html-build')
 const defaultMode = process.env.TEST ? 'test' : 'production'
 const stripeMode = process.env.STRIPE_HTML_MODE ?? defaultMode
+const formatBundleSize = (bytes: number) =>
+  bytes >= 1_000 ? `${(bytes / 1_000).toFixed(1)} kB` : `${bytes} B`
 
 // HTML entries — bundled into <script> tags
 const htmlEntries = [
@@ -46,11 +48,12 @@ for (const { entry, mode, outFile } of htmlEntries) {
   if (!jsFile) throw new Error(`No .js output found for ${entry}`)
 
   const code = fs.readFileSync(path.join(outDir, jsFile), 'utf8').trim()
+  const bundleBytes = Buffer.byteLength(code)
   const content = `// Generated — do not edit.\nexport const html = ${JSON.stringify(`<script>${code}</script>`)}\n`
 
   fs.writeFileSync(outFile, content)
   fs.rmSync(outDir, { recursive: true })
-  console.log(`wrote ${path.relative(root, outFile)}`)
+  console.log(`wrote ${path.relative(root, outFile)} (${formatBundleSize(bundleBytes)})`)
 }
 
 // Service worker (bundled as raw JS string)
@@ -71,9 +74,10 @@ for (const { entry, mode, outFile } of htmlEntries) {
   if (!jsFile) throw new Error(`No .js output found for ${entry}`)
 
   const code = fs.readFileSync(path.join(outDir, jsFile), 'utf8').trim()
+  const bundleBytes = Buffer.byteLength(code)
   const content = `// Generated — do not edit.\nexport const serviceWorker = ${JSON.stringify(code)}\n`
 
   fs.writeFileSync(outFile, content)
   fs.rmSync(outDir, { recursive: true })
-  console.log(`wrote ${path.relative(root, outFile)}`)
+  console.log(`wrote ${path.relative(root, outFile)} (${formatBundleSize(bundleBytes)})`)
 }
diff --git a/src/server/Transport.ts b/src/server/Transport.ts
index 3f4881ea..21fe77c8 100644
--- a/src/server/Transport.ts
+++ b/src/server/Transport.ts
@@ -129,7 +129,7 @@ export function http(): Http {
     respondChallenge(options) {
       const { challenge, error, input } = options
 
-      if (options.html && new URL(input.url).searchParams.has('__mppx_worker'))
+      if (options.html && new URL(input.url).searchParams.has(Html.serviceWorkerParam))
         return new Response(serviceWorker, {
           status: 200,
           headers: {
@@ -146,10 +146,6 @@ export function http(): Http {
       const body = (() => {
         if (options.html && input.headers.get('Accept')?.includes('text/html')) {
           headers['Content-Type'] = 'text/html; charset=utf-8'
-          const data = Json.stringify({ config: options.html.config, challenge }).replace(
-            /</g,
-            '\\u003c',
-          )
           const html = String.raw
           return html`<!doctype html>
             <html lang="en">
@@ -173,7 +169,10 @@ ${Json.stringify(challenge, null, 2)
                 >
                 <div id="root"></div>
                 <script id="${Html.dataId}" type="application/json">
-                  ${data}
+                  ${Json.stringify({ config: options.html.config, challenge }).replace(
+                    /</g,
+                    '\\u003c',
+                  )}
                 </script>
                 ${options.html.content}
               </body>
diff --git a/src/server/internal/html/config.ts b/src/server/internal/html/config.ts
index 3cc6da4c..4c29208e 100644
--- a/src/server/internal/html/config.ts
+++ b/src/server/internal/html/config.ts
@@ -4,3 +4,5 @@ export type Options = {
 }
 
 export const dataId = '__MPPX_DATA__'
+
+export const serviceWorkerParam = '__mppx_worker'
diff --git a/src/server/internal/html/serviceWorker.client.ts b/src/server/internal/html/serviceWorker.client.ts
index e2f62dd0..f94de3c1 100644
--- a/src/server/internal/html/serviceWorker.client.ts
+++ b/src/server/internal/html/serviceWorker.client.ts
@@ -1,6 +1,8 @@
+import { serviceWorkerParam } from './config.js'
+
 export async function submitCredential(credential: string): Promise<void> {
   const url = new URL(location.href)
-  url.searchParams.set('__mppx_worker', '')
+  url.searchParams.set(serviceWorkerParam, '')
 
   const registration = await navigator.serviceWorker.register(url.pathname + url.search)
 

From 0fc9f38d486e843238e040480a94ebc0ddbe9aca Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Wed, 1 Apr 2026 00:45:22 -0500
Subject: [PATCH 28/28] chore: tweaks

---
 src/tempo/server/internal/html/main.ts | 4 ++--
 test/html/stripe.test.ts               | 8 ++------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/tempo/server/internal/html/main.ts b/src/tempo/server/internal/html/main.ts
index abc9eeea..561ce010 100644
--- a/src/tempo/server/internal/html/main.ts
+++ b/src/tempo/server/internal/html/main.ts
@@ -1,9 +1,7 @@
 import { local, Provider } from 'accounts'
 import { Json } from 'ox'
 import { createClient, custom, http } from 'viem'
-import { generatePrivateKey } from 'viem/accounts'
 import { tempoModerato, tempoLocalnet } from 'viem/chains'
-import { Account, Actions } from 'viem/tempo'
 
 import type * as Challenge from '../../../../Challenge.js'
 import { tempo } from '../../../../client/index.js'
@@ -27,6 +25,8 @@ const provider = Provider.create({
     ? {
         adapter: local({
           async loadAccounts() {
+            const { generatePrivateKey } = await import('viem/accounts')
+            const { Account, Actions } = await import('viem/tempo')
             const privateKey = generatePrivateKey()
             const account = Account.fromSecp256k1(privateKey)
             const client = createClient({
diff --git a/test/html/stripe.test.ts b/test/html/stripe.test.ts
index 3aed0d8f..c3ad6541 100644
--- a/test/html/stripe.test.ts
+++ b/test/html/stripe.test.ts
@@ -1,4 +1,4 @@
-import type { Frame, Page, TestInfo } from '@playwright/test'
+import type { Frame, Page } from '@playwright/test'
 import { expect, test } from '@playwright/test'
 
 test('charge via stripe html payment page', async ({ page }, testInfo) => {
@@ -12,7 +12,7 @@ test('charge via stripe html payment page', async ({ page }, testInfo) => {
   await expect(page.locator('h1')).toHaveText('Payment Required')
   await expect(page.getByRole('button', { name: 'Pay' })).toBeVisible({ timeout: 10_000 })
 
-  if (!isHeadless(testInfo)) {
+  if (!testInfo.project.use.headless) {
     const stripeFrame = await getStripePaymentFrame(page)
     const numberInput = stripeFrame.locator('[name="number"]')
     const cardButton = stripeFrame.locator('[data-value="card"]')
@@ -46,10 +46,6 @@ test('service worker endpoint returns javascript', async ({ page }) => {
   expect(response?.status()).toBe(200)
 })
 
-function isHeadless(testInfo: TestInfo) {
-  return testInfo.project.use.headless !== false
-}
-
 async function getStripePaymentFrame(page: Page, timeout = 30_000): Promise<Frame> {
   const deadline = Date.now() + timeout