[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_259":260,"_261":262},"routes/_app.x.$handle.$name",{"_106":105,"_38":52,"_114":96,"_33":62,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_26":-5,"_125":-5,"_126":-5,"_127":31,"_128":129,"_130":131,"_132":-5,"_133":-5,"_134":135},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_50":51,"_38":52,"_45":53,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":62,"_19":63,"_64":-5,"_65":31,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":31},"version",54,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","3e5c5c3c-2d38-4096-a4c9-b0ee8bcf5af7","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":44,"_45":46,"_47":14,"_48":49,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",false,"deletedHere","path","routes/screenshot.tsx","latestPath","fileId","4298ccf8-1a66-11f1-a0b7-42dde27851f2","name","screenshot.tsx","fileType","script","content","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { Layout } from \"../lib/layout.tsx\";\nimport { ensureAddress } from \"../lib/x402.ts\";\nimport { createBrowserbaseSession, getWsUrl } from \"../lib/browserbase.ts\";\nimport { captureScreenshot } from \"../lib/screenshot.ts\";\nimport { insertTransaction } from \"../lib/db.ts\";\n\nconst screenshot = new Hono();\n\n// --- Screenshot form ---\nscreenshot.get(\"/screenshot\", (c) =>\n c.html(\n \n

Take a Screenshot

Payment Failed

\n {isInsufficientFunds\n ? (\n

Insufficient Funds

\n Your wallet doesn't have enough USDC on Base to complete this payment ($0.01).\n

\n Send USDC and a small amount of ETH (for gas) to:\n

\n {address}\n

\n )\n : (\n

\n              {err?.message ?? String(err)}\n

\n )}\n \n ← Try again\n \n ,\n );\n }\n\n if (!response.ok) {\n const errorText = await response.text();\n return c.html(\n \n

Session Creation Failed

Status: {response.status}

\n          {errorText}\n

\n \n ← Try again\n \n ,\n );\n }\n\n // Record the transaction\n await insertTransaction({\n txHash: session!.txHash ?? session!.transactionHash ?? null,\n url: targetUrl,\n amount: \"0.01\",\n currency: \"USDC\",\n network: \"base\",\n });\n\n // Step 2: Connect to the browser and take a screenshot\n const wsUrl = getWsUrl(session!);\n if (!wsUrl) {\n return c.html(\n \n

No WebSocket URL

Session was created but no connection URL was returned.

\n          {JSON.stringify(session, null, 2)}\n

\n \n ← Try again\n \n ,\n );\n }\n\n try {\n const screenshotBuffer = await captureScreenshot(wsUrl, targetUrl);\n return new Response(screenshotBuffer, {\n headers: { \"content-type\": \"image/png\" },\n });\n } catch (err: any) {\n return c.html(\n \n

Screenshot Failed

Browser session was created and paid for, but the screenshot failed:

\n          {err?.message ?? String(err)}\n

\n \n ← Try again\n \n ,\n );\n }\n});\n\nexport default screenshot;\n","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { Layout } from \"../lib/layout.tsx\";\nimport { createBrowserbaseSession, getWsUrl } from \"../lib/browserbase.ts\";\nimport { captureScreenshot } from \"../lib/screenshot.ts\";\nimport { insertTransaction } from \"../lib/db.ts\";\n\nconst screenshot = new Hono();\n\nfunction ErrorPage({ message }: { message: string }) {\n return (\n \n

Something went wrong

\n        {message}\n

\n \n ← Try again\n \n \n );\n}\n\n// --- Screenshot form ---\nscreenshot.get(\"/screenshot\", (c) =>\n c.html(\n \n

Take a Screenshot

\n\n ,\n ),\n);\n\n// --- Screenshot action ---\nscreenshot.post(\"/screenshot\", async (c) => {\n const body = await c.req.parseBody();\n const targetUrl = (body.url as string) || \"https://val.town\";\n\n try {\n // Step 1: Create a paid Browserbase session via x402\n const { response, session } = await createBrowserbaseSession(5);\n\n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(`Session creation failed (${response.status}): ${errorText}`);\n }\n\n // Record the transaction\n await insertTransaction({\n txHash: session!.txHash ?? session!.transactionHash ?? null,\n url: targetUrl,\n amount: \"0.01\",\n currency: \"USDC\",\n network: \"base\",\n });\n\n // Step 2: Connect to the browser and take a screenshot\n const wsUrl = getWsUrl(session!);\n if (!wsUrl) {\n throw new Error(`No WebSocket URL returned. Session: ${JSON.stringify(session, null, 2)}`);\n }\n\n const screenshotBuffer = await captureScreenshot(wsUrl, targetUrl);\n return new Response(screenshotBuffer, {\n headers: { \"content-type\": \"image/png\" },\n });\n } catch (err: any) {\n return c.html();\n }\n});\n\nexport default screenshot;\n","createdAt",["D",1772916285550],"branchVersion","branchId","df2e7966-1a41-11f1-b341-42dde27851f2","id","df2e18a4-1a41-11f1-b341-42dde27851f2","x402-playground",["D",1772900564463],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Playing with internet-native payment protocols","imageUrl","","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","df2e18a41a4111f1b34142dde27851f2","tursoHostname","df2e18a41a4111f1b34142dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789518064818],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_113":109},"org",{"_106":105,"_107":-5,"_108":109,"_19":63,"_110":111,"_112":31},"branch",{"_13":95,"_38":96,"_50":49,"_97":51,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":52,"_104":105},"isOwned",110,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_50":51,"_38":52,"_45":254,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":62,"_19":63,"_64":-5,"_65":31,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":255,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":256,"_90":257,"_92":258,"_94":31},"tree",[176,182,186],"files",[176,177,178,179,180,181,182,183,184,185,186],"counts",{"_164":69,"_165":166,"_167":69,"_168":169,"_170":171},"contents",[136,137,138],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_50":158,"_38":159,"_36":160,"_142":-5,"_48":49,"_47":161,"_144":131,"_45":162,"_13":69,"_40":156,"_42":-5,"_30":31,"_149":-5,"_33":163},{"_50":151,"_38":152,"_36":153,"_142":-5,"_48":49,"_47":154,"_144":131,"_45":155,"_13":69,"_40":156,"_42":-5,"_30":31,"_149":-5,"_33":157},{"_50":139,"_38":140,"_36":141,"_142":-5,"_48":49,"_47":143,"_144":31,"_45":145,"_13":146,"_40":147,"_42":148,"_30":31,"_149":-5,"_33":150},"51a28734-1a66-11f1-b9fd-42dde27851f2","main.tsx","df3362be-1a41-11f1-b341-42dde27851f2","parentId",52,"latest",["D",1772916218368],26,"http","import { Hono } from \"npm:hono@4\";\nimport { initDb } from \"./lib/db.ts\";\nimport home from \"./routes/home.tsx\";\nimport screenshot from \"./routes/screenshot.tsx\";\nimport transactions from \"./routes/transactions.tsx\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\napp.route(\"/\", home);\napp.route(\"/\", screenshot);\napp.route(\"/\", transactions);\n\nexport default app.fetch;","label",[140],"4298fade-1a66-11f1-a0b7-42dde27851f2","routes","019cca0a-3765-77dc-8438-5d5925c1359c",51,["D",1772916193126],"directory",[152],"5ea437ee-1a47-11f1-b40b-42dde27851f2","lib","5ea4388e-1a47-11f1-b40b-42dde27851f2",14,["D",1772902925793],[159],"pulls","branches",1,"forks","envVars",{"_172":174,"_175":69},"connections",{"_172":69,"_173":69},"count","unfilledCount",2,"emptyCount",{"_50":158,"_38":159,"_36":160,"_142":-5,"_48":49,"_47":161,"_144":131,"_45":251,"_13":69,"_40":156,"_42":-5,"_30":31,"_149":-5,"_188":252,"_33":253},{"_50":244,"_38":245,"_36":246,"_142":160,"_48":49,"_47":154,"_144":31,"_45":247,"_13":69,"_40":41,"_42":248,"_30":31,"_149":-5,"_188":249,"_33":250},{"_50":236,"_38":237,"_36":238,"_142":160,"_48":49,"_47":239,"_144":131,"_45":240,"_13":166,"_40":41,"_42":241,"_30":31,"_149":-5,"_188":242,"_33":243},{"_50":228,"_38":229,"_36":230,"_142":160,"_48":49,"_47":231,"_144":31,"_45":232,"_13":69,"_40":41,"_42":233,"_30":31,"_149":-5,"_188":234,"_33":235},{"_50":221,"_38":222,"_36":223,"_142":160,"_48":49,"_47":154,"_144":131,"_45":224,"_13":69,"_40":41,"_42":225,"_30":31,"_149":-5,"_188":226,"_33":227},{"_50":212,"_38":213,"_36":214,"_142":160,"_48":49,"_47":215,"_144":31,"_45":216,"_13":217,"_40":41,"_42":218,"_30":31,"_149":-5,"_188":219,"_33":220},{"_50":151,"_38":152,"_36":153,"_142":-5,"_48":49,"_47":154,"_144":131,"_45":209,"_13":69,"_40":156,"_42":-5,"_30":31,"_149":-5,"_188":210,"_33":211},{"_50":202,"_38":203,"_36":204,"_142":153,"_48":49,"_47":154,"_144":31,"_45":205,"_13":69,"_40":41,"_42":206,"_30":31,"_149":-5,"_188":207,"_33":208},{"_50":198,"_38":39,"_36":37,"_142":153,"_48":49,"_47":14,"_144":31,"_45":199,"_13":166,"_40":41,"_42":44,"_30":31,"_149":-5,"_188":200,"_33":201},{"_50":191,"_38":192,"_36":193,"_142":153,"_48":49,"_47":154,"_144":131,"_45":194,"_13":69,"_40":41,"_42":195,"_30":31,"_149":-5,"_188":196,"_33":197},{"_50":139,"_38":140,"_36":141,"_142":-5,"_48":49,"_47":143,"_144":31,"_45":187,"_13":146,"_40":147,"_42":148,"_30":31,"_149":-5,"_188":189,"_33":190},["D",1772916218368],"children",[],[140],"4298eb16-1a66-11f1-a0b7-42dde27851f2","transactions.tsx","4298ec6a-1a66-11f1-a0b7-42dde27851f2",["D",1772916193126],"/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { Layout } from \"../lib/layout.tsx\";\nimport { listTransactions } from \"../lib/db.ts\";\n\nconst transactions = new Hono();\n\ntransactions.get(\"/transactions\", async (c) => {\n const rows = await listTransactions();\n\n let totalSpent = 0;\n for (const row of rows) {\n if (row.amount) {\n const parsed = parseFloat(row.amount);\n if (!isNaN(parsed)) totalSpent += parsed;\n }\n }\n\n return c.html(\n \n

Transaction History

\n\n

Balance Summary

Total Transactions

{rows.length}

Total Spent

\n {totalSpent > 0 ? totalSpent.toFixed(4) : \"—\"}{\" \"}\n USDC\n

\n\n {rows.length === 0\n ? (\n

\n No transactions yet.{\" \"}\n \n Take a screenshot\n {\" \"}\n to create one.\n

\n )\n : (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n {rows.map((tx) => (\n \n \n \n \n \n \n \n \n ))}\n \n

ID	URL	Amount	Network	Tx Hash	Date
{tx.id}	\n {tx.url}\n	\n {tx.amount ?? \"—\"} {tx.currency ?? \"\"}\n	{tx.network ?? \"—\"}	\n {tx.tx_hash ? tx.tx_hash : \"—\"}\n	{tx.created_at}

\n )}\n ,\n );\n});\n\nexport default transactions;\n",[],[152,192],"79ae9588-1a66-11f1-a8e9-42dde27851f2",["D",1772916285550],[],[152,39],"4298a214-1a66-11f1-a0b7-42dde27851f2","home.tsx","4298a296-1a66-11f1-a0b7-42dde27851f2",["D",1772916193126],"/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { Layout } from \"../lib/layout.tsx\";\nimport { ensureAddress } from \"../lib/x402.ts\";\n\nconst home = new Hono();\n\nhome.get(\"/\", (c) => {\n const address = ensureAddress();\n return c.html(\n \n

x402 Payment Playground

\n\n

My Wallet

Public Address (Base)

\n {address}\n

\n\n

How it works

You enter a URL and click \"Capture Screenshot\"
\n This app calls{\" \"}\n x402.browserbase.com to create a paid\n browser session\n
\n The @x402/fetch SDK automatically handles\n the HTTP 402 payment flow — signing a USDC payment on Base\n
Browserbase returns a WebSocket URL for a real Chromium browser
We connect via Playwright, navigate to your URL, and take a screenshot

\n Cost: $0.01 per session (5 min). Payment is in USDC on Base mainnet.\n

\n\n

\n \n

\n 📸 Take a Screenshot\n

\n Pay for a website screenshot via the x402 protocol using Browserbase.\n

\n \n \n

\n 📒 Transaction History\n

\n View past payments and your running balance.\n

\n \n

\n ,\n );\n});\n\nexport default home;\n",[],[152,203],["D",1772916193126],[183,184,185],[152],"82a9690a-1a49-11f1-8bea-42dde27851f2","x402.ts","6e5fac22-1a47-11f1-b40b-42dde27851f2",48,["D",1772903845214],21,"/**\n * x402 payment client using the official @x402/fetch SDK.\n *\n * Uses `wrapFetchWithPayment` which transparently handles:\n * 1. Making the initial request\n * 2. If 402, parsing payment requirements\n * 3. Signing the payment (EIP-3009 TransferWithAuthorization)\n * 4. Retrying with PAYMENT-SIGNATURE header\n *\n * NO manual x402 code — the SDK does everything.\n */\n\nimport { privateKeyToAccount } from \"npm:viem@2/accounts\";\nimport { x402Client } from \"npm:@x402/core/client\";\nimport { registerExactEvmScheme } from \"npm:@x402/evm/exact/client\";\nimport { wrapFetchWithPayment } from \"npm:@x402/fetch\";\n\nlet _fetchWithPayment: typeof fetch | null = null;\nlet _publicAddress: string | null = null;\n\nfunction getPrivateKey(): `0x${string}` {\n const pk = Deno.env.get(\"X402_PRIVATE_KEY\");\n if (!pk) throw new Error(\"Missing X402_PRIVATE_KEY env var\");\n return pk as `0x${string}`;\n}\n\n/** Derive wallet address (sync) */\nexport function ensureAddress(): string {\n if (_publicAddress) return _publicAddress;\n const account = privateKeyToAccount(getPrivateKey());\n _publicAddress = account.address;\n return _publicAddress;\n}\n\n/** Get a fetch function that automatically handles x402 payments */\nexport function getFetchWithPayment(): typeof fetch {\n if (_fetchWithPayment) return _fetchWithPayment;\n\n const signer = privateKeyToAccount(getPrivateKey());\n _publicAddress = signer.address;\n\n const client = new x402Client();\n registerExactEvmScheme(client, { signer });\n\n _fetchWithPayment = wrapFetchWithPayment(fetch, client);\n return _fetchWithPayment;\n}\n",[],[159,213],"429898c8-1a66-11f1-a0b7-42dde27851f2","screenshot.ts","42989954-1a66-11f1-a0b7-42dde27851f2",["D",1772916193126],"/**\n * Playwright-based screenshot capture.\n *\n * Connects to a remote Chromium browser via CDP WebSocket\n * and takes a screenshot of the given URL.\n */\n\nimport \"https://esm.town/v/wolf/StubFS/stubFs.ts\";\nimport { chromium } from \"npm:playwright-core\";\n\n/**\n * Connect to a remote browser and screenshot a URL.\n *\n * @param wsUrl - CDP WebSocket endpoint (from Browserbase)\n * @param targetUrl - the page to screenshot\n * @returns PNG screenshot as a Uint8Array\n */\nexport async function captureScreenshot(\n wsUrl: string,\n targetUrl: string,\n): Promise {\n const browser = await chromium.connectOverCDP(wsUrl);\n try {\n const context = browser.contexts()[0] ?? await browser.newContext();\n const page = context.pages()[0] ?? await context.newPage();\n\n await page.goto(targetUrl, { waitUntil: \"networkidle\", timeout: 30000 });\n const buffer = await page.screenshot({ fullPage: false });\n\n return buffer;\n } finally {\n await browser.close();\n }\n}\n",[],[159,222],"76b8d02e-1a47-11f1-af04-42dde27851f2","layout.tsx","76b8d100-1a47-11f1-af04-42dde27851f2",17,["D",1772902966194],"/** @jsxImportSource npm:hono@4/jsx */\nimport type { FC } from \"npm:hono@4/jsx\";\n\nexport const Layout: FC<{ title: string }> = ({ title, children }) => (\n \n \n \n \n {title}\n

Diff · v54