From d2363fc4ee8c36cb16c50f5c5bb2a717590ad064 Mon Sep 17 00:00:00 2001
From: gbengaeben <gbengaeben6@gmail.com>
Date: Thu, 27 Aug 2026 17:58:58 +0000
Subject: [PATCH] feat: add guided send flow to the interactive playground

Extends the scan-only playground into a four-step derive, send,
scan, and withdraw flow with fixture Horizon events, embeds each
step in the relevant docs pages, and adds Playwright smoke tests
that enforce the zero-external-requests gate.

Fixes #134
---
 .github/workflows/snippets.yml                |  30 +
 .gitignore                                    |   4 +-
 api-reference/fetch-announcements-stream.mdx  |  19 +
 api-reference/stealth-keys.mdx                |  23 +-
 guides/stellar/stellar-quickstart.mdx         |  38 ++
 package.json                                  |   4 +
 pnpm-lock.yaml                                |  38 ++
 scripts/playground/fixtures.json              |  91 +++
 scripts/playground/generate-fixtures.mjs      | 444 ++++++++++-----
 scripts/playground/index.html                 | 352 ++++++++++--
 scripts/playground/playground.js              | 486 ++++++++++++++++
 scripts/playground/scanner.js                 | 519 +++++++++---------
 scripts/playground/tests/playground.spec.ts   | 105 ++++
 scripts/playground/tests/playwright.config.ts |  31 ++
 scripts/playground/tests/serve.mjs            |  48 ++
 15 files changed, 1770 insertions(+), 462 deletions(-)
 create mode 100644 scripts/playground/fixtures.json
 create mode 100644 scripts/playground/playground.js
 create mode 100644 scripts/playground/tests/playground.spec.ts
 create mode 100644 scripts/playground/tests/playwright.config.ts
 create mode 100644 scripts/playground/tests/serve.mjs

diff --git a/.github/workflows/snippets.yml b/.github/workflows/snippets.yml
index c6ee1ed..839ab78 100644
--- a/.github/workflows/snippets.yml
+++ b/.github/workflows/snippets.yml
@@ -59,3 +59,33 @@ jobs:
 
       - name: Validate Stellar testnet snippets
         run: pnpm run check:stellar-testnet
+
+  playground-smoke:
+    name: Playground smoke test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Verify playground fixtures are in sync
+        run: pnpm run check:playground-fixtures
+
+      - name: Install Playwright browser
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Run playground smoke tests
+        run: pnpm run test:playground
diff --git a/.gitignore b/.gitignore
index 506ae3f..5379ce5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 node_modules/
-.npm/
\ No newline at end of file
+.npm/
+test-results/
+playwright-report/
diff --git a/api-reference/fetch-announcements-stream.mdx b/api-reference/fetch-announcements-stream.mdx
index c434859..1624cc8 100644
--- a/api-reference/fetch-announcements-stream.mdx
+++ b/api-reference/fetch-announcements-stream.mdx
@@ -434,6 +434,25 @@ for await (const announcement of stream) {
 }
 ```
 
+---
+
+## Try It: Scan Announcements in Your Browser
+
+The playground below parses a batch of Horizon-shaped fixture events — the same `topic`/`value` shape `fetchAnnouncementsStream` yields on Stellar — and scans them client-side with the view-tag fast filter and Ed25519 point math. No wallet, no network calls.
+
+<iframe
+  src="/scripts/playground/index.html?step=scan"
+  sandbox="allow-scripts allow-same-origin"
+  width="100%"
+  height="760"
+  style={{ border: "1px solid #2a2f3d", borderRadius: "8px" }}
+  title="Wraith stealth playground — scan step"
+/>
+
+<Note>
+  Two of the five fixture announcements match the demo keys (pre-filled via **Load demo keys**); the other three are noise with the wrong view tag. You can also construct your own announcement in the [Send step](/guides/stellar-quickstart) and scan it here.
+</Note>
+
 ### Resilient Stream with Retention Fallback
 
 ```typescript
diff --git a/api-reference/stealth-keys.mdx b/api-reference/stealth-keys.mdx
index 7066fe4..4f00c13 100644
--- a/api-reference/stealth-keys.mdx
+++ b/api-reference/stealth-keys.mdx
@@ -86,4 +86,25 @@ const keys = await deriveStealthKeysFromPasskey({
 });
 ```
 
-For a complete walkthrough on setting up passkey authentication with stealth transactions, refer to our [Passkey Signing Guide](../guides/stellar/passkey-signing.mdx).
\ No newline at end of file
+For a complete walkthrough on setting up passkey authentication with stealth transactions, refer to our [Passkey Signing Guide](../guides/stellar/passkey-signing.mdx).
+
+---
+
+## Try It: Derive Keys in Your Browser
+
+The playground below runs the same derivation the SDK performs, entirely client-side against canned fixtures — no wallet, no network calls. Paste any 64-byte signature (the demo one is pre-filled), and watch the two seeds split into a scan key, a spend key, and your stealth meta-address.
+
+<iframe
+  src="/scripts/playground/index.html?step=derive"
+  sandbox="allow-scripts allow-same-origin"
+  width="100%"
+  height="660"
+  style={{ border: "1px solid #2a2f3d", borderRadius: "8px" }}
+  title="Wraith stealth playground — derive step"
+/>
+
+<Note>
+  The demo signature is deterministic and the derived keys are not connected to any real wallet. The meta-address it produces matches the fixtures used by the [scan step](/api-reference/fetch-announcements-stream).
+</Note>
+
+Continue through the guided flow by opening the same playground on the [Send](/guides/stellar-quickstart), [Scan](/api-reference/fetch-announcements-stream), and [Withdraw](/guides/stellar-quickstart) steps.
diff --git a/guides/stellar/stellar-quickstart.mdx b/guides/stellar/stellar-quickstart.mdx
index bbd721c..5cff2d3 100644
--- a/guides/stellar/stellar-quickstart.mdx
+++ b/guides/stellar/stellar-quickstart.mdx
@@ -14,6 +14,10 @@ By the end of this tutorial you will have:
 
 **Prerequisites:** Node.js 18+, a Wraith API key ([sign up at usewraith.xyz](https://usewraith.xyz)), and the Freighter browser extension installed ([get it here](https://www.freighter.app)).
 
+<Tip>
+  Every stage below can be run interactively in your browser. The [Send](#send-a-stealth-payment) and [Withdraw](#withdraw-to-your-wallet) sections embed a client-side playground that runs the exact same flow against canned fixtures — no wallet or network calls needed. Continue the full guided flow on the [derive](/api-reference/stealth-keys) and [scan](/api-reference/fetch-announcements-stream) pages.
+</Tip>
+
 ---
 
 ## 1. Install Dependencies
@@ -328,6 +332,23 @@ Alice's agent scans for announcements, matches them using her viewing key, and d
   A view tag is the first byte of `SHA-256("wraith:tag:" || sharedSecret)`. It allows scanners to reject ~255/256 non-matching announcements with a single byte comparison — no expensive Ed25519 point operations needed. This makes scanning fast even over thousands of announcements.
 </Accordion>
 
+### Try It: Construct an Announcement
+
+Construct a mock stealth payment in your browser — the playground generates the one-time ephemeral keypair, derives the stealth address, and builds the Horizon announcement event the `stealth-announcer` contract would emit. The announcement lands in the scan batch, so it shows up in the [scan step](/api-reference/fetch-announcements-stream).
+
+<iframe
+  src="/scripts/playground/index.html?step=send"
+  sandbox="allow-scripts allow-same-origin"
+  width="100%"
+  height="640"
+  style={{ border: "1px solid #2a2f3d", borderRadius: "8px" }}
+  title="Wraith stealth playground — send step"
+/>
+
+<Note>
+  The demo recipient meta-address is pre-filled and deterministic; the payment it produces is a simulation, not an on-chain transaction.
+</Note>
+
 ---
 
 ## 8. Scan for Incoming Payments
@@ -395,6 +416,23 @@ console.log(privacy.response);
   To protect your privacy, space withdrawals at least **1 hour apart** and avoid withdrawing uniform round amounts. The agent's privacy scoring algorithm checks for timing patterns, address correlation, and dust amounts. See [Privacy Best Practices](/guides/privacy-best-practices) for details.
 </Info>
 
+### Try It: Withdraw a Stealth Balance
+
+The playground below derives the withdrawable balances from the fixture announcements with the demo keys, then shows the simulated withdrawal transaction each one would sign with its stealth private scalar.
+
+<iframe
+  src="/scripts/playground/index.html?step=withdraw"
+  sandbox="allow-scripts allow-same-origin"
+  width="100%"
+  height="640"
+  style={{ border: "1px solid #2a2f3d", borderRadius: "8px" }}
+  title="Wraith stealth playground — withdraw step"
+/>
+
+<Note>
+  This is a simulation — the destination wallet is a deterministic demo address. The private scalar shown is what your own agent would use to sign a real withdrawal.
+</Note>
+
 ### Withdrawing to Any Destination
 
 ```typescript
diff --git a/package.json b/package.json
index 1acf7bb..7571d05 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,9 @@
     "check:stellar-testnet": "tsx scripts/check-stellar-testnet-snippets.ts",
     "generate:stellar-reference": "tsx scripts/generate-stellar-reference.ts",
     "check:stellar-reference": "tsx scripts/generate-stellar-reference.ts --check --allow-missing",
+    "generate:playground-fixtures": "node scripts/playground/generate-fixtures.mjs",
+    "check:playground-fixtures": "node scripts/playground/generate-fixtures.mjs --check",
+    "test:playground": "playwright test --config scripts/playground/tests/playwright.config.ts",
     "mint:validate": "mint validate",
     "mint:broken-links": "mint broken-links",
     "test": "npm run check:snippets && npm run check:nav-coverage"
@@ -18,6 +21,7 @@
     "@wraith-protocol/sdk": "^1.4.5"
   },
   "devDependencies": {
+    "@playwright/test": "^1.49.1",
     "@types/node": "^22.10.2",
     "tsx": "^4.19.2",
     "typescript": "^5.7.2"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 21a94c9..8ecd561 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,6 +18,9 @@ importers:
         specifier: ^1.4.5
         version: 1.4.5(@solana/web3.js@1.98.4(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@6.0.6))(@stellar/stellar-sdk@13.3.0)(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@6.0.6)
     devDependencies:
+      '@playwright/test':
+        specifier: ^1.49.1
+        version: 1.62.1
       '@types/node':
         specifier: ^22.10.2
         version: 22.20.1
@@ -209,6 +212,11 @@ packages:
     resolution: {integrity: sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==}
     engines: {node: ^14.21.3 || >=16}
 
+  '@playwright/test@1.62.1':
+    resolution: {integrity: sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   '@scure/base@1.2.6':
     resolution: {integrity: sha512-g/nm5FgUa//MCj1gV09zTJTaM6KBAHqLN907YVQqf7zC49+DcO4B1so4ZX07Ef10Twr6nuqYEH9GEggFXA4Fmg==}
 
@@ -481,6 +489,11 @@ packages:
     resolution: {integrity: sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==}
     engines: {node: '>= 6'}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -598,6 +611,16 @@ packages:
       typescript:
         optional: true
 
+  playwright-core@1.62.1:
+    resolution: {integrity: sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==}
+    engines: {node: '>=20'}
+    hasBin: true
+
+  playwright@1.62.1:
+    resolution: {integrity: sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -831,6 +854,10 @@ snapshots:
 
   '@noble/hashes@1.8.0': {}
 
+  '@playwright/test@1.62.1':
+    dependencies:
+      playwright: 1.62.1
+
   '@scure/base@1.2.6': {}
 
   '@scure/bip32@1.7.0':
@@ -1157,6 +1184,9 @@ snapshots:
       hasown: 2.0.4
       mime-types: 2.1.35
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -1281,6 +1311,14 @@ snapshots:
     transitivePeerDependencies:
       - zod
 
+  playwright-core@1.62.1: {}
+
+  playwright@1.62.1:
+    dependencies:
+      playwright-core: 1.62.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
   possible-typed-array-names@1.1.0: {}
 
   proxy-from-env@2.1.0: {}
diff --git a/scripts/playground/fixtures.json b/scripts/playground/fixtures.json
new file mode 100644
index 0000000..e4c5ca4
--- /dev/null
+++ b/scripts/playground/fixtures.json
@@ -0,0 +1,91 @@
+{
+  "recipient": {
+    "signature": "98822231bc29a7b7fa05b22cb955271eb091952cdc574040833e8710c21a57febc8a29ac3a269ecf90a8000ba429a629f7a03475bcf0727f3862099bbc3b97bc",
+    "spendingKey": "8abc3ca12f1ea7d8a035035b30495dab4580312cda2ddc408bfcb0f05a4aeadf",
+    "viewingKey": "0d474ed106c31d9be5e40d23987e05e7e7f250f618abee45e78ce8a5a89d5c16",
+    "spendingScalar": "44210394736376739873962455346134452853705630680662457980493046177521038273944",
+    "viewingScalar": "48307637337068610111822068508286914851033825534515029969832724895260692015208",
+    "spendingPubKey": "eb8452e938d04e9a56ef69c47dacd8224464b030b5ca569d5b4e4399f8d0fb55",
+    "viewingPubKey": "29a8dd877a3803289ab3a62ac39cce4a99021a3cd0fac6ad982e051c8fa769dc",
+    "metaAddress": "st:xlm:eb8452e938d04e9a56ef69c47dacd8224464b030b5ca569d5b4e4399f8d0fb5529a8dd877a3803289ab3a62ac39cce4a99021a3cd0fac6ad982e051c8fa769dc",
+    "walletAddress": "GB4X7TDIRWAXKYRAYRXSTY27DZUTQKEMJKV7GBKZ3RVJJS5XCHAELUZI"
+  },
+  "announcerContractId": "CCJLJ2QRBJAAKIG6ELNQVXLLWMKKWVN5O2FKWUETHZGMPAD4MHK7WVWL",
+  "events": [
+    {
+      "type": "contract",
+      "contract_id": "CCJLJ2QRBJAAKIG6ELNQVXLLWMKKWVN5O2FKWUETHZGMPAD4MHK7WVWL",
+      "ledger": 51234000,
+      "ledger_close_time": "2026-08-20T12:00:00.000Z",
+      "id": "0000000000000000030dc4d00000000000000000",
+      "paging_token": "51234000-0",
+      "topic": [
+        "AAAADwAAAAhhbm5vdW5jZQ==",
+        "AAAAAwAAAAE=",
+        "AAAAEgAAAAAAAAAAIqtRXPL2GmdCP+bde4hGNCoXiH+wKZAxd3/TheC3t/0="
+      ],
+      "value": "AAAAEAAAAAEAAAADAAAAEgAAAAAAAAAAFjM5gVlCLWe12ocr2Z56+SK0zkRi5WgaOs8iFHUi6d4AAAANAAAAIBYzOYFZQi1ntdqHK9meevkitM5EYuVoGjrPIhR1IuneAAAADQAAACBfAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==",
+      "_yours": true
+    },
+    {
+      "type": "contract",
+      "contract_id": "CCJLJ2QRBJAAKIG6ELNQVXLLWMKKWVN5O2FKWUETHZGMPAD4MHK7WVWL",
+      "ledger": 51234001,
+      "ledger_close_time": "2026-08-21T12:00:00.000Z",
+      "id": "0000000000000000030dc4d10000000000000000",
+      "paging_token": "51234001-1",
+      "topic": [
+        "AAAADwAAAAhhbm5vdW5jZQ==",
+        "AAAAAwAAAAE=",
+        "AAAAEgAAAAAAAAAAbwoxfo1UleU30uxYWjsBtQpSXMVYCGBkney2/oqlwWU="
+      ],
+      "value": "AAAAEAAAAAEAAAADAAAAEgAAAAAAAAAAYaeYyrc6YoZo7/DMSlz1HVaHyUe/xnQQAIBTgEnhNjoAAAANAAAAIGGnmMq3OmKGaO/wzEpc9R1Wh8lHv8Z0EACAU4BJ4TY6AAAADQAAACCFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==",
+      "_yours": false
+    },
+    {
+      "type": "contract",
+      "contract_id": "CCJLJ2QRBJAAKIG6ELNQVXLLWMKKWVN5O2FKWUETHZGMPAD4MHK7WVWL",
+      "ledger": 51234002,
+      "ledger_close_time": "2026-08-22T12:00:00.000Z",
+      "id": "0000000000000000030dc4d20000000000000000",
+      "paging_token": "51234002-2",
+      "topic": [
+        "AAAADwAAAAhhbm5vdW5jZQ==",
+        "AAAAAwAAAAE=",
+        "AAAAEgAAAAAAAAAAfLtYHQxZk09xS3vObXcVqtYviB7UFT3OGORCXiSOlGA="
+      ],
+      "value": "AAAAEAAAAAEAAAADAAAAEgAAAAAAAAAAUhyk20jvoleCDbryfv10BQMOIOreUmtoALmC+gpGy/AAAAANAAAAIFIcpNtI76JXgg268n79dAUDDiDq3lJraAC5gvoKRsvwAAAADQAAACBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==",
+      "_yours": true
+    },
+    {
+      "type": "contract",
+      "contract_id": "CCJLJ2QRBJAAKIG6ELNQVXLLWMKKWVN5O2FKWUETHZGMPAD4MHK7WVWL",
+      "ledger": 51234003,
+      "ledger_close_time": "2026-08-23T12:00:00.000Z",
+      "id": "0000000000000000030dc4d30000000000000000",
+      "paging_token": "51234003-3",
+      "topic": [
+        "AAAADwAAAAhhbm5vdW5jZQ==",
+        "AAAAAwAAAAE=",
+        "AAAAEgAAAAAAAAAATam9D4M2xhWIQ6h03y9kOlcHQ2aFMOJ8w42VdMJRWgM="
+      ],
+      "value": "AAAAEAAAAAEAAAADAAAAEgAAAAAAAAAA3FLnwEKlqKFW90zpyt/IdNo0SGTTkrCClOXAzD45dYkAAAANAAAAINxS58BCpaihVvdM6crfyHTaNEhk05KwgpTlwMw+OXWJAAAADQAAACCVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==",
+      "_yours": false
+    },
+    {
+      "type": "contract",
+      "contract_id": "CCJLJ2QRBJAAKIG6ELNQVXLLWMKKWVN5O2FKWUETHZGMPAD4MHK7WVWL",
+      "ledger": 51234004,
+      "ledger_close_time": "2026-08-24T12:00:00.000Z",
+      "id": "0000000000000000030dc4d40000000000000000",
+      "paging_token": "51234004-4",
+      "topic": [
+        "AAAADwAAAAhhbm5vdW5jZQ==",
+        "AAAAAwAAAAE=",
+        "AAAAEgAAAAAAAAAAjsBTk06PWenk4B0q3B5BtX+fPfEsJXehKsCI42TzQ30="
+      ],
+      "value": "AAAAEAAAAAEAAAADAAAAEgAAAAAAAAAAsbT/rDG0eoPrT66DUFMJ4AqhkAUfk08F/td0yuN1INwAAAANAAAAILG0/6wxtHqD60+ug1BTCeAKoZAFH5NPBf7XdMrjdSDcAAAADQAAACD6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==",
+      "_yours": false
+    }
+  ]
+}
diff --git a/scripts/playground/generate-fixtures.mjs b/scripts/playground/generate-fixtures.mjs
index cee9591..8cabc6c 100644
--- a/scripts/playground/generate-fixtures.mjs
+++ b/scripts/playground/generate-fixtures.mjs
@@ -1,160 +1,284 @@
 // generate-fixtures.mjs
 // Run: node scripts/playground/generate-fixtures.mjs
-// Outputs hardcoded fixture values for scanner.js
+// Writes scripts/playground/fixtures.json — the demo recipient keys and a
+// batch of Horizon-shaped contract events that the playground parses with
+// the same code path the SDK uses (see parseAnnouncementEvent).
+//
+//   node scripts/playground/generate-fixtures.mjs            # write fixtures.json
+//   node scripts/playground/generate-fixtures.mjs --check    # verify fixtures.json is in sync
 //
 // Uses the same algorithms as the Wraith SDK (inline, no SDK import)
 // so the docs repo doesn't need the SDK installed at build time.
 
-import { createHash } from 'node:crypto';
+import { createHash } from "node:crypto";
+import { readFileSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const OUT_FILE = path.join(__dirname, "fixtures.json");
+
+// The stealth-announcer contract on Stellar testnet (from the SDK deployments).
+const ANNOUNCER_CONTRACT_ID = "CCJLJ2QRBJAAKIG6ELNQVXLLWMKKWVN5O2FKWUETHZGMPAD4MHK7WVWL";
 
 // ── Curve25519 field arithmetic ──────────────────────────────
 const P  = (2n ** 255n) - 19n;
 const A24 = 121665n;
 const L  = (2n ** 252n) + 27742317777372353535851937790883648493n;
 
-const fmod = x => { let r = x % P; return r < 0n ? r + P : r; };
-const fadd = (a,b) => fmod(a+b);
-const fsub = (a,b) => fmod(a-b);
-const fmul = (a,b) => fmod(a*b);
+const fmod = (x) => { let r = x % P; return r < 0n ? r + P : r; };
+const fadd = (a, b) => fmod(a + b);
+const fsub = (a, b) => fmod(a - b);
+const fmul = (a, b) => fmod(a * b);
 function fpow(base, exp) {
-  base = fmod(base); let r = 1n;
-  while (exp > 0n) { if (exp&1n) r=fmul(r,base); base=fmul(base,base); exp>>=1n; }
+  base = fmod(base);
+  let r = 1n;
+  while (exp > 0n) {
+    if (exp & 1n) r = fmul(r, base);
+    base = fmul(base, base);
+    exp >>= 1n;
+  }
   return r;
 }
-const finv = a => fpow(a, P-2n);
+const finv = (a) => fpow(a, P - 2n);
 
 // ── helpers ──────────────────────────────────────────────────
 function bytesToBigintLE(b) {
-  let n=0n; for (let i=b.length-1;i>=0;i--) n=(n<<8n)|BigInt(b[i]); return n;
+  let n = 0n;
+  for (let i = b.length - 1; i >= 0; i--) n = (n << 8n) | BigInt(b[i]);
+  return n;
 }
 function bigintToBytesLE(n, len) {
-  const o=Buffer.alloc(len); for(let i=0;i<len;i++){o[i]=Number(n&0xffn);n>>=8n;} return o;
+  const o = Buffer.alloc(len);
+  for (let i = 0; i < len; i++) { o[i] = Number(n & 0xffn); n >>= 8n; }
+  return o;
 }
-function hexToBytes(h) { return Buffer.from(h,'hex'); }
-function bytesToHex(b) { return Buffer.from(b).toString('hex'); }
-function concatBufs(...a) { return Buffer.concat(a.map(x=>Buffer.from(x))); }
-function sha256(...parts) { return createHash('sha256').update(concatBufs(...parts)).digest(); }
-function sha512(d) { return createHash('sha512').update(d).digest(); }
+function hexToBytes(h) { return Buffer.from(h, "hex"); }
+function bytesToHex(b) { return Buffer.from(b).toString("hex"); }
+function concatBufs(...a) { return Buffer.concat(a.map((x) => Buffer.from(x))); }
+function sha256(...parts) { return createHash("sha256").update(concatBufs(...parts)).digest(); }
+function sha512(d) { return createHash("sha512").update(d).digest(); }
 
 // ── ed25519 math ─────────────────────────────────────────────
 const ED_D  = fmod(-121665n * finv(121666n));
 const ED_GY = fmod(4n * finv(5n));
 const ED_GX = (() => {
-  const y2=fmul(ED_GY,ED_GY), num=fsub(y2,1n), den=fadd(fmul(ED_D,y2),1n);
-  const x2=fmul(num,finv(den));
-  let x=fpow(x2,(P+3n)/8n);
-  if (fmul(x,x)!==x2) x=fmul(x,fpow(2n,(P-1n)/4n));
-  if (x%2n!==0n) x=P-x; return x;
+  const y2 = fmul(ED_GY, ED_GY), num = fsub(y2, 1n), den = fadd(fmul(ED_D, y2), 1n);
+  const x2 = fmul(num, finv(den));
+  let x = fpow(x2, (P + 3n) / 8n);
+  if (fmul(x, x) !== x2) x = fmul(x, fpow(2n, (P - 1n) / 4n));
+  if (x % 2n !== 0n) x = P - x;
+  return x;
 })();
-const ED_G = [ED_GX, ED_GY, 1n, fmul(ED_GX,ED_GY)];
+const ED_G = [ED_GX, ED_GY, 1n, fmul(ED_GX, ED_GY)];
 
-function edAdd(P1,P2){
-  const[X1,Y1,Z1,T1]=P1,[X2,Y2,Z2,T2]=P2;
-  const A=fmul(fsub(Y1,X1),fsub(Y2,X2)),B=fmul(fadd(Y1,X1),fadd(Y2,X2));
-  const C=fmul(fmul(2n,ED_D),fmul(T1,T2)),D=fmul(2n,fmul(Z1,Z2));
-  const E=fsub(B,A),F=fsub(D,C),G=fadd(D,C),H=fadd(B,A);
-  return[fmul(E,F),fmul(G,H),fmul(F,G),fmul(E,H)];
+function edAdd(P1, P2) {
+  const [X1, Y1, Z1, T1] = P1, [X2, Y2, Z2, T2] = P2;
+  const A = fmul(fsub(Y1, X1), fsub(Y2, X2)), B = fmul(fadd(Y1, X1), fadd(Y2, X2));
+  const C = fmul(fmul(2n, ED_D), fmul(T1, T2)), D = fmul(2n, fmul(Z1, Z2));
+  const E = fsub(B, A), F = fsub(D, C), G = fadd(D, C), H = fadd(B, A);
+  return [fmul(E, F), fmul(G, H), fmul(F, G), fmul(E, H)];
 }
-function edMul(k,pt){
-  let Q=[0n,1n,1n,0n],R=pt;
-  while(k>0n){if(k&1n)Q=edAdd(Q,R);R=edAdd(R,R);k>>=1n;} return Q;
+function edMul(k, pt) {
+  let Q = [0n, 1n, 1n, 0n], R = pt;
+  while (k > 0n) {
+    if (k & 1n) Q = edAdd(Q, R);
+    R = edAdd(R, R);
+    k >>= 1n;
+  }
+  return Q;
 }
-function edCompress(pt){
-  const[X,Y,Z]=pt,zi=finv(Z),x=fmul(X,zi),y=fmul(Y,zi);
-  const o=bigintToBytesLE(y,32); if(x&1n)o[31]|=0x80; return o;
+function edCompress(pt) {
+  const [X, Y, Z] = pt, zi = finv(Z), x = fmul(X, zi), y = fmul(Y, zi);
+  const o = bigintToBytesLE(y, 32);
+  if (x & 1n) o[31] |= 0x80;
+  return o;
 }
-function edDecompress(b){
-  const c=Buffer.from(b); const sign=(c[31]>>7)&1; c[31]&=0x7f;
-  const y=bytesToBigintLE(c),y2=fmul(y,y),num=fsub(y2,1n),den=fadd(fmul(ED_D,y2),1n);
-  const x2=fmul(num,finv(den)); let x=fpow(x2,(P+3n)/8n);
-  if(fmul(x,x)!==fmod(x2))x=fmul(x,fpow(2n,(P-1n)/4n));
-  if(Number(x&1n)!==sign)x=P-x; return[x,y,1n,fmul(x,y)];
+function edDecompress(b) {
+  const c = Buffer.from(b);
+  const sign = (c[31] >> 7) & 1;
+  c[31] &= 0x7f;
+  const y = bytesToBigintLE(c), y2 = fmul(y, y), num = fsub(y2, 1n), den = fadd(fmul(ED_D, y2), 1n);
+  const x2 = fmul(num, finv(den));
+  let x = fpow(x2, (P + 3n) / 8n);
+  if (fmul(x, x) !== fmod(x2)) x = fmul(x, fpow(2n, (P - 1n) / 4n));
+  if (Number(x & 1n) !== sign) x = P - x;
+  return [x, y, 1n, fmul(x, y)];
 }
 
-// seedToScalar: expand 32-byte seed via SHA-512 lower half, clamp
+// seedToScalar: expand 32-byte seed via SHA-512 lower half, clamp (RFC 8032)
 function seedToScalar(seed) {
-  const h = sha512(seed); const a=h.slice(0,32);
-  a[0]&=248; a[31]&=127; a[31]|=64; return bytesToBigintLE(a);
+  const h = sha512(seed), a = h.slice(0, 32);
+  a[0] &= 248;
+  a[31] &= 127;
+  a[31] |= 64;
+  return bytesToBigintLE(a);
 }
-function seedToPubKey(seed) { return edCompress(edMul(seedToScalar(seed),ED_G)); }
+function seedToPubKey(seed) { return edCompress(edMul(seedToScalar(seed), ED_G)); }
 
 // ── X25519 ───────────────────────────────────────────────────
-function clamp(s){ let c=s&((1n<<255n)-1n); c&=~7n; c|=(1n<<254n); return c; }
-function x25519(scalar,u){
-  const s=clamp(scalar);
-  let x1=u,x2=1n,z2=0n,x3=u,z3=1n,sw=0n;
-  for(let t=254n;t>=0n;t--){
-    const bit=(s>>t)&1n,xs=sw^bit; sw=bit;
-    if(xs===1n){[x2,x3]=[x3,x2];[z2,z3]=[z3,z2];}
-    const A=fadd(x2,z2),AA=fmul(A,A),B=fsub(x2,z2),BB=fmul(B,B),E=fsub(AA,BB);
-    const C=fadd(x3,z3),D=fsub(x3,z3),DA=fmul(D,A),CB=fmul(C,B);
-    x3=fpow(fadd(DA,CB),2n); z3=fmul(x1,fpow(fsub(DA,CB),2n));
-    x2=fmul(AA,BB); z2=fmul(E,fadd(AA,fmul(A24,E)));
+function clamp(s) { let c = s & ((1n << 255n) - 1n); c &= ~7n; c |= (1n << 254n); return c; }
+function x25519(scalar, u) {
+  const s = clamp(scalar);
+  let x1 = u, x2 = 1n, z2 = 0n, x3 = u, z3 = 1n, sw = 0n;
+  for (let t = 254n; t >= 0n; t--) {
+    const bit = (s >> t) & 1n, xs = sw ^ bit;
+    sw = bit;
+    if (xs === 1n) { [x2, x3] = [x3, x2]; [z2, z3] = [z3, z2]; }
+    const A = fadd(x2, z2), AA = fmul(A, A), B = fsub(x2, z2), BB = fmul(B, B), E = fsub(AA, BB);
+    const C = fadd(x3, z3), D = fsub(x3, z3), DA = fmul(D, A), CB = fmul(C, B);
+    x3 = fpow(fadd(DA, CB), 2n);
+    z3 = fmul(x1, fpow(fsub(DA, CB), 2n));
+    x2 = fmul(AA, BB);
+    z2 = fmul(E, fadd(AA, fmul(A24, E)));
   }
-  if(sw===1n){[x2,x3]=[x3,x2];}
-  return fmul(x2,finv(z2));
+  if (sw === 1n) { [x2, x3] = [x3, x2]; }
+  return fmul(x2, finv(z2));
 }
-function edPubToMont(b){
-  const c=Buffer.from(b); c[31]&=0x7f;
-  const y=bytesToBigintLE(c),u=fmul(fadd(1n,y),finv(fsub(1n,y)));
-  return bigintToBytesLE(u,32);
+function edPubToMont(b) {
+  const c = Buffer.from(b);
+  c[31] &= 0x7f;
+  const y = bytesToBigintLE(c), u = fmul(fadd(1n, y), finv(fsub(1n, y)));
+  return bigintToBytesLE(u, 32);
 }
-function edSeedToMontScalar(seed){
-  const h=sha512(seed),a=h.slice(0,32); a[0]&=248;a[31]&=127;a[31]|=64; return a;
+function edSeedToMontScalar(seed) {
+  const h = sha512(seed), a = h.slice(0, 32);
+  a[0] &= 248;
+  a[31] &= 127;
+  a[31] |= 64;
+  return a;
 }
-function sharedSecret(viewingSeed, ephPub){
-  const priv=bytesToBigintLE(edSeedToMontScalar(viewingSeed));
-  const pubU=bytesToBigintLE(edPubToMont(ephPub));
-  return bigintToBytesLE(x25519(priv,pubU),32);
+function sharedSecret(privateSeed, publicPub) {
+  const priv = bytesToBigintLE(edSeedToMontScalar(privateSeed));
+  const pubU = bytesToBigintLE(edPubToMont(publicPub));
+  return bigintToBytesLE(x25519(priv, pubU), 32);
+}
+function viewTag(shared) { return sha256(Buffer.from("wraith:tag:"), shared)[0]; }
+function hashToScalar(shared) {
+  const h = sha256(Buffer.from("wraith:scalar:"), shared);
+  return bytesToBigintLE(h) % L;
 }
 
 // ── Stellar StrKey ───────────────────────────────────────────
-function crc16(data){
-  let c=0xffff; for(const b of data){c^=(b<<8);for(let i=0;i<8;i++)c=(c&0x8000)?((c<<1)^0x1021):(c<<1);c&=0xffff;} return c;
-}
-const B32='ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
-function b32enc(bytes){
-  let bits=0,val=0,o='';
-  for(const b of bytes){val=(val<<8)|b;bits+=8;while(bits>=5){bits-=5;o+=B32[(val>>bits)&31];}}
-  if(bits>0)o+=B32[(val<<(5-bits))&31]; return o;
-}
-function pubToAddr(pub){
-  const p=Buffer.alloc(33); p[0]=0x30; pub.copy(p,1);
-  const c=crc16(p),f=Buffer.alloc(35); p.copy(f); f[33]=c&0xff;f[34]=(c>>8)&0xff;
+function crc16(data) {
+  let c = 0xffff;
+  for (const b of data) {
+    c ^= (b << 8);
+    for (let i = 0; i < 8; i++) c = (c & 0x8000) ? ((c << 1) ^ 0x1021) : (c << 1);
+    c &= 0xffff;
+  }
+  return c;
+}
+const B32 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567";
+function b32enc(bytes) {
+  let bits = 0, val = 0, o = "";
+  for (const b of bytes) {
+    val = (val << 8) | b;
+    bits += 8;
+    while (bits >= 5) { bits -= 5; o += B32[(val >> bits) & 31]; }
+  }
+  if (bits > 0) o += B32[(val << (5 - bits)) & 31];
+  return o;
+}
+function b32dec(str) {
+  const lookup = Object.fromEntries([...B32].map((c, i) => [c, i]));
+  let bits = 0, val = 0;
+  const out = [];
+  for (const ch of str.toUpperCase()) {
+    if (!(ch in lookup)) throw new Error(`Invalid base32 char: ${ch}`);
+    val = (val << 5) | lookup[ch];
+    bits += 5;
+    if (bits >= 8) { bits -= 8; out.push((val >> bits) & 0xff); }
+  }
+  return Buffer.from(out);
+}
+function pubToAddr(pub) {
+  const p = Buffer.alloc(33);
+  p[0] = 0x30;
+  pub.copy(p, 1);
+  const c = crc16(p), f = Buffer.alloc(35);
+  p.copy(f);
+  f[33] = c & 0xff;
+  f[34] = (c >> 8) & 0xff;
   return b32enc(f);
 }
+function addrToPub(addr) {
+  const d = b32dec(addr);
+  if (d.length !== 35) throw new Error("Bad StrKey length");
+  const payload = d.slice(0, 33);
+  const crcExpected = d[33] | (d[34] << 8);
+  const crcActual = crc16(payload);
+  if (crcExpected !== crcActual) throw new Error("StrKey checksum mismatch");
+  if (payload[0] !== 0x30) throw new Error("Not an ed25519 pubkey");
+  return payload.slice(1);
+}
+
+// ── Minimal XDR (ScVal) encoder ──────────────────────────────
+// Matches the encodings produced by @stellar/stellar-sdk's ScVal so the
+// fixture events can be decoded by the SDK's parseAnnouncementEvent.
+function u32(n) {
+  const b = Buffer.alloc(4);
+  b.writeUInt32BE(n >>> 0);
+  return b;
+}
+function pad4(b) {
+  const rem = b.length % 4;
+  return rem === 0 ? Buffer.alloc(0) : Buffer.alloc(4 - rem);
+}
+function scv(type, body) { return Buffer.concat([u32(type), body]); }
+function scvU32(n) { return scv(3, u32(n)); }
+function scvBytes(b) { return scv(13, Buffer.concat([u32(b.length), b, pad4(b)])); }
+function scvSymbol(s) { const b = Buffer.from(s, "utf8"); return scv(15, Buffer.concat([u32(b.length), b, pad4(b)])); }
+// ScAddress: account type 0 + ed25519 pubkey type 0 + 32-byte pubkey
+function scvAddress(edPub) { return scv(18, Buffer.concat([u32(0), u32(0), edPub])); }
+// SCV_VEC (and SCV_MAP) are recursive and live behind an option pointer in
+// the XDR spec, so the arm writes a `present` bool before the array itself.
+function scvVec(items) {
+  const parts = items.map((x) => Buffer.from(x));
+  return scv(16, Buffer.concat([u32(1), u32(parts.length), ...parts]));
+}
 
 // ── Fixture generation ───────────────────────────────────────
-// Deterministic "demo" recipient keys
-const viewingSeed    = sha256(Buffer.from('wraith:viewing:demo'));
-const spendingSeed   = sha256(Buffer.from('wraith:spending:demo'));
-const viewingPub     = seedToPubKey(viewingSeed);
-const spendingPub    = seedToPubKey(spendingSeed);
+// The demo recipient keys are derived the same way the SDK derives keys
+// from a wallet signature: split a 64-byte signature into two
+// domain-separated seeds, expand each into a scalar + public key.
+const demoSignature = sha512(Buffer.from("wraith:demo:signature")); // 64 bytes
+const spendingSeed  = sha256(Buffer.from("wraith:spending:"), demoSignature);
+const viewingSeed   = sha256(Buffer.from("wraith:viewing:"), demoSignature);
 const spendingScalar = seedToScalar(spendingSeed);
+const viewingScalar  = seedToScalar(viewingSeed);
+const spendingPub    = seedToPubKey(spendingSeed);
+const viewingPub     = seedToPubKey(viewingSeed);
+
+// A demo wallet the recipient "withdraws" to (any ordinary Stellar account).
+const walletPub = seedToPubKey(sha256(Buffer.from("wraith:wallet:demo")));
 
-console.log('=== DEMO KEYS ===');
-console.log('viewingKey (hex seed):  ', bytesToHex(viewingSeed));
-console.log('spendingScalar (bigint):', spendingScalar.toString());
-console.log('spendingPubKey (hex):   ', bytesToHex(spendingPub));
-console.log('viewingPubKey (hex):    ', bytesToHex(viewingPub));
-console.log('metaAddress:            ', `st:xlm:${bytesToHex(spendingPub)}${bytesToHex(viewingPub)}`);
-console.log('');
+const recipient = {
+  signature: bytesToHex(demoSignature),
+  spendingKey: bytesToHex(spendingSeed),
+  viewingKey: bytesToHex(viewingSeed),
+  spendingScalar: spendingScalar.toString(),
+  viewingScalar: viewingScalar.toString(),
+  spendingPubKey: bytesToHex(spendingPub),
+  viewingPubKey: bytesToHex(viewingPub),
+  metaAddress: `st:xlm:${bytesToHex(spendingPub)}${bytesToHex(viewingPub)}`,
+  walletAddress: pubToAddr(walletPub),
+};
 
-// Generate 5 fixture announcements; indices 0 and 2 are "yours"
-const YOURS_INDICES = new Set([0,2]);
+// Generate 5 fixture announcements; indices 0 and 2 are "yours".
+const YOURS_INDICES = new Set([0, 2]);
 
 function makeAnnouncement(ephSeed, isYours) {
-  // ephemeral keypair
-  const ephPrivScalar = seedToScalar(ephSeed);
-  const ephPub = edCompress(edMul(ephPrivScalar, ED_G));
+  const ephPub = edCompress(edMul(seedToScalar(ephSeed), ED_G));
 
   if (!isYours) {
     // noise: random stealth address, wrong view tag
-    const noiseKey = sha256(ephSeed, Buffer.from('noise'));
+    const noiseKey = sha256(ephSeed, Buffer.from("noise"));
     const noisePub = edCompress(edMul(seedToScalar(noiseKey), ED_G));
     const noiseAddr = pubToAddr(Buffer.from(noisePub));
-    const noiseTag = sha256(Buffer.from('wraith:tag:'), noiseKey)[0];
-    const meta = Buffer.alloc(32); meta[0] = noiseTag;
+    const noiseTag = sha256(Buffer.from("wraith:tag:"), noiseKey)[0];
+    const meta = Buffer.alloc(32);
+    meta[0] = noiseTag;
     return {
       schemeId: 1,
       stealthAddress: noiseAddr,
@@ -165,31 +289,14 @@ function makeAnnouncement(ephSeed, isYours) {
     };
   }
 
-  // Compute shared secret from ephemeral privkey and recipient viewing pub
-  const ephPriv = bytesToBigintLE(edSeedToMontScalar(ephSeed));
-  const viewingMontPub = bytesToBigintLE(edPubToMont(viewingPub));
-  const sharedU = x25519(ephPriv, viewingMontPub);
-  const shared = bigintToBytesLE(sharedU, 32);
-
-  // view tag
-  const viewTag = sha256(Buffer.from('wraith:tag:'), shared)[0];
-  // hash scalar
-  const hScalarBytes = sha256(Buffer.from('wraith:scalar:'), shared);
-  const hScalar = bytesToBigintLE(hScalarBytes) % L;
-  // stealth pub = spendingPub + hScalar * G
-  const spendPt = edDecompress(spendingPub);
-  const hG = edMul(hScalar, ED_G);
-  const stealthPt = edAdd(spendPt, hG);
-  const stealthPub = edCompress(stealthPt);
+  // shared secret = ephPriv * viewingPub (X25519)
+  const shared = sharedSecret(ephSeed, viewingPub);
+  const tag = viewTag(shared);
+  const hScalar = hashToScalar(shared);
+  const stealthPub = edCompress(edAdd(edDecompress(spendingPub), edMul(hScalar, ED_G)));
   const stealthAddr = pubToAddr(Buffer.from(stealthPub));
-  // metadata: first byte = view tag
-  const meta = Buffer.alloc(32); meta[0] = viewTag;
-
-  console.log(`[Match] ephSeed=${bytesToHex(ephSeed).slice(0,16)}…`);
-  console.log(`  ephPub:      ${bytesToHex(ephPub)}`);
-  console.log(`  viewTag:     0x${viewTag.toString(16).padStart(2,'0')}`);
-  console.log(`  stealthAddr: ${stealthAddr}`);
-  console.log(`  metadata:    ${bytesToHex(meta)}`);
+  const meta = Buffer.alloc(32);
+  meta[0] = tag;
 
   return {
     schemeId: 1,
@@ -202,14 +309,89 @@ function makeAnnouncement(ephSeed, isYours) {
 }
 
 const seeds = [
-  sha256(Buffer.from('eph:0')),
-  sha256(Buffer.from('eph:1')),
-  sha256(Buffer.from('eph:2')),
-  sha256(Buffer.from('eph:3')),
-  sha256(Buffer.from('eph:4')),
+  sha256(Buffer.from("eph:0")),
+  sha256(Buffer.from("eph:1")),
+  sha256(Buffer.from("eph:2")),
+  sha256(Buffer.from("eph:3")),
+  sha256(Buffer.from("eph:4")),
 ];
 
-const fixtures = seeds.map((s,i) => makeAnnouncement(s, YOURS_INDICES.has(i)));
+const announcements = seeds.map((s, i) => makeAnnouncement(s, YOURS_INDICES.has(i)));
+
+// Wrap each announcement in the Horizon contract-event shape the SDK parses:
+//   topic[0] = event name symbol, topic[1] = schemeId u32,
+//   topic[2] = stealth address, value = vec [caller, ephPubKey, viewTag]
+const BASE_LEDGER = 51234000;
+function toEvent(ann, index) {
+  const ledger = BASE_LEDGER + index;
+  const id = ledger.toString(16).padStart(24, "0") + "0000000000000000";
+  const closeTime = new Date(Date.UTC(2026, 7, 20 + index, 12, 0, 0)).toISOString();
+  return {
+    type: "contract",
+    contract_id: ANNOUNCER_CONTRACT_ID,
+    ledger,
+    ledger_close_time: closeTime,
+    id,
+    paging_token: `${ledger}-${index}`,
+    topic: [
+      scvSymbol("announce").toString("base64"),
+      scvU32(ann.schemeId).toString("base64"),
+      scvAddress(addrToPub(ann.stealthAddress)).toString("base64"),
+    ],
+    value: scvVec([
+      scvAddress(addrToPub(ann.caller)),
+      scvBytes(hexToBytes(ann.ephemeralPubKey)),
+      scvBytes(hexToBytes(ann.metadata)),
+    ]).toString("base64"),
+    _yours: ann._yours,
+  };
+}
+
+const events = announcements.map(toEvent);
 
-console.log('\n=== FIXTURE_ANNOUNCEMENTS (paste into scanner.js) ===');
-console.log(JSON.stringify(fixtures, (k,v) => typeof v==='bigint'?v.toString():v, 2));
+const fixtures = {
+  // Demo wallet signature + the keys derived from it (canonical SDK flow).
+  recipient,
+  // The stealth-announcer contract these events come from (testnet).
+  announcerContractId: ANNOUNCER_CONTRACT_ID,
+  // Horizon contract events, exactly as consumed by parseAnnouncementEvent.
+  events,
+};
+
+function format() { return JSON.stringify(fixtures, null, 2) + "\n"; }
+
+const isCheck = process.argv.includes("--check");
+if (isCheck) {
+  let current = null;
+  try { current = readFileSync(OUT_FILE, "utf8"); } catch { /* missing */ }
+  if (current !== format()) {
+    console.error(
+      "fixtures.json is out of sync. Run `node scripts/playground/generate-fixtures.mjs` and commit the result.",
+    );
+    process.exit(1);
+  }
+  console.log("fixtures.json is in sync.");
+  process.exit(0);
+}
+
+writeFileSync(OUT_FILE, format());
+
+console.log("Wrote " + OUT_FILE);
+console.log("");
+console.log("=== RECIPIENT (demo signature -> keys) ===");
+console.log("signature:         " + recipient.signature.slice(0, 24) + "…");
+console.log("viewingKey (seed): " + recipient.viewingKey);
+console.log("spendingScalar:    " + recipient.spendingScalar);
+console.log("metaAddress:       " + recipient.metaAddress);
+console.log("walletAddress:     " + recipient.walletAddress);
+console.log("");
+console.log("=== EVENTS ===");
+for (const e of events) {
+  console.log(`  ledger ${e.ledger}  yours=${e._yours}  topic[2]=${decodeAddrFromTopic(e.topic[2])}`);
+}
+
+function decodeAddrFromTopic(b64) {
+  const buf = Buffer.from(b64, "base64");
+  // ScVal type 18 (address) + account type + ed25519 type + 32-byte pubkey
+  return pubToAddr(buf.subarray(12));
+}
diff --git a/scripts/playground/index.html b/scripts/playground/index.html
index 4c784f7..1b35b43 100644
--- a/scripts/playground/index.html
+++ b/scripts/playground/index.html
@@ -3,9 +3,11 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- CSP: nothing from external origins. Scripts and the fixture file are
+       same-origin; everything else is inline. Keep default-src 'none'. -->
   <meta http-equiv="Content-Security-Policy"
-        content="default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline';" />
-  <title>Wraith Scanner Playground</title>
+        content="default-src 'none'; script-src 'self' 'unsafe-inline'; style-src 'unsafe-inline'; connect-src 'self'; img-src 'self' data:;" />
+  <title>Wraith Stealth Playground</title>
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -47,6 +49,65 @@
       margin-bottom: 20px;
     }
 
+    /* ── Stepper ─────────────────────────────────────────── */
+    .stepper {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 22px;
+      flex-wrap: wrap;
+    }
+    .stepper .step {
+      flex: 1;
+      min-width: 110px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 9px 12px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all .15s;
+      text-align: left;
+    }
+    .stepper .step:hover { border-color: var(--accent); color: var(--text); }
+    .stepper .step.active {
+      background: var(--accent-lo);
+      border-color: var(--accent);
+      color: #fff;
+    }
+    .step-num {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: var(--border);
+      color: var(--muted);
+      font-size: 10px;
+      font-weight: 700;
+      flex-shrink: 0;
+    }
+    .stepper .step.active .step-num { background: var(--accent); color: #fff; }
+
+    /* ── Panels ──────────────────────────────────────────── */
+    .panel h2 {
+      font-size: 15px;
+      font-weight: 600;
+      color: #fff;
+      letter-spacing: -0.01em;
+      margin-bottom: 4px;
+    }
+    .panel-desc {
+      color: var(--muted);
+      font-size: 12px;
+      margin-bottom: 16px;
+    }
+
     label {
       display: block;
       font-size: 11px;
@@ -56,10 +117,15 @@
       color: var(--muted);
       margin-bottom: 5px;
     }
+    label span {
+      font-weight: 400;
+      text-transform: none;
+      letter-spacing: 0;
+    }
 
     .field { margin-bottom: 14px; }
 
-    input[type="text"] {
+    input[type="text"], input[type="number"], select {
       width: 100%;
       background: var(--surface);
       border: 1px solid var(--border);
@@ -71,15 +137,15 @@
       outline: none;
       transition: border-color .15s;
     }
-    input[type="text"]:focus { border-color: var(--accent); }
-    input[type="text"]::placeholder { color: var(--muted); }
-    input[type="text"].error { border-color: var(--red); }
+    input[type="text"]:focus, input[type="number"]:focus, select:focus { border-color: var(--accent); }
+    input::placeholder { color: var(--muted); }
+    select { color-scheme: dark; }
 
     .row { display: flex; gap: 10px; }
     .row .field { flex: 1; }
+    .btn-row { display: flex; gap: 10px; margin-top: 4px; }
 
     button {
-      width: 100%;
       padding: 9px 14px;
       background: var(--accent);
       border: none;
@@ -89,13 +155,21 @@
       font-weight: 600;
       cursor: pointer;
       transition: opacity .15s;
-      margin-top: 4px;
+      flex: 1;
     }
     button:hover { opacity: .88; }
     button:disabled { opacity: .4; cursor: not-allowed; }
+    button.ghost {
+      background: transparent;
+      border: 1px solid var(--border);
+      color: var(--text);
+      flex: 0 0 auto;
+    }
+    button.ghost:hover { border-color: var(--accent); }
+    button.small { padding: 5px 10px; font-size: 11px; margin-top: 8px; }
 
     .hint {
-      margin-top: 6px;
+      margin-top: 8px;
       font-size: 11px;
       color: var(--muted);
     }
@@ -105,9 +179,18 @@
       cursor: pointer;
     }
     .hint a:hover { text-decoration: underline; }
+    .hint code {
+      font-family: var(--mono);
+      font-size: 10px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      padding: 0 4px;
+    }
 
-    #results { margin-top: 20px; }
+    #bootError { margin-bottom: 14px; }
 
+    /* ── Status bar ──────────────────────────────────────── */
     .status-bar {
       display: flex;
       align-items: center;
@@ -117,7 +200,7 @@
       border-radius: 6px;
       border: 1px solid var(--border);
       background: var(--surface);
-      margin-bottom: 10px;
+      margin: 16px 0 10px;
     }
     .status-bar .dot {
       width: 7px; height: 7px;
@@ -131,6 +214,25 @@
       0%,100% { opacity:1; } 50% { opacity:.35; }
     }
 
+    /* ── Cards / results ─────────────────────────────────── */
+    .card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 12px 14px;
+      margin-bottom: 10px;
+    }
+    .card-accent {
+      background: var(--green-lo);
+      border-color: var(--green);
+    }
+    .card code {
+      font-family: var(--mono);
+      font-size: 11px;
+      word-break: break-all;
+    }
+    code.wrap { white-space: normal; }
+
     .match-card {
       background: var(--green-lo);
       border: 1px solid var(--green);
@@ -177,6 +279,7 @@
       color: var(--text);
       word-break: break-all;
     }
+    .kv-row .v code { font-size: 11px; }
 
     .no-match {
       background: var(--surface);
@@ -186,11 +289,11 @@
       text-align: center;
       color: var(--muted);
       font-size: 12px;
+      margin-top: 10px;
     }
 
-    .fixture-section {
-      margin-top: 18px;
-    }
+    /* ── Fixture table + code blocks ─────────────────────── */
+    .fixture-section { margin-top: 14px; }
     .fixture-section summary {
       font-size: 11px;
       font-weight: 600;
@@ -202,10 +305,8 @@
       padding: 6px 0;
     }
     .fixture-section summary:hover { color: var(--text); }
-    .fixture-table {
-      margin-top: 8px;
-      overflow-x: auto;
-    }
+    .fixture-table { margin-top: 8px; overflow-x: auto; }
+
     table {
       width: 100%;
       border-collapse: collapse;
@@ -228,6 +329,7 @@
       color: var(--text);
     }
     tr:last-child td { border-bottom: none; }
+
     .badge-yours {
       display: inline-block;
       background: var(--green-lo);
@@ -248,50 +350,186 @@
       font-size: 9px;
       padding: 1px 5px;
     }
+
+    .code-block {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 12px;
+      font-family: var(--mono);
+      font-size: 10px;
+      line-height: 1.5;
+      color: var(--text);
+      overflow-x: auto;
+      margin-top: 8px;
+      white-space: pre;
+    }
+
+    .footer-note {
+      margin-top: 24px;
+      padding-top: 14px;
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 11px;
+    }
+    .privacy-note a { color: var(--accent); }
   </style>
 </head>
 <body>
 
-<h1>Wraith Scanner Playground</h1>
-<p class="subtitle">Scan a canned batch of announcements client-side — no wallet, no network calls.</p>
-
-<div class="field">
-  <label>Stealth Meta-Address <span style="font-weight:400;text-transform:none">(st:xlm:…)</span></label>
-  <input type="text" id="metaAddr"
-         placeholder="st:xlm:&lt;64-char spending pubkey hex&gt;&lt;64-char viewing pubkey hex&gt;"
-         spellcheck="false" autocomplete="off" />
-</div>
-
-<div class="row">
-  <div class="field">
-    <label>Viewing Key <span style="font-weight:400;text-transform:none">(32-byte hex seed)</span></label>
-    <input type="text" id="viewingKey"
-           placeholder="64 hex chars"
-           spellcheck="false" autocomplete="off" />
-  </div>
-  <div class="field">
-    <label>Spending Scalar <span style="font-weight:400;text-transform:none">(decimal bigint)</span></label>
-    <input type="text" id="spendingScalar"
-           placeholder="decimal integer"
-           spellcheck="false" autocomplete="off" />
-  </div>
-</div>
-
-<p class="hint">
-  No keys handy? <a id="loadFixture">Load the demo keys</a> that match the fixture announcements below.
-</p>
-
-<button id="scanBtn">Scan announcements</button>
-
-<div id="results"></div>
-
-<details class="fixture-section">
-  <summary>Fixture announcements (5 total)</summary>
-  <div class="fixture-table">
-    <table id="fixtureTable"></table>
-  </div>
-</details>
+<h1>Wraith Stealth Playground</h1>
+<p class="subtitle">Run the full stealth payment flow client-side — no wallet, no network calls, nothing leaves your browser.</p>
+
+<div id="bootError" hidden></div>
+
+<nav class="stepper" aria-label="Stealth payment steps">
+  <button class="step" id="stepper-derive" data-step="derive">
+    <span class="step-num">1</span><span class="step-label">Derive</span>
+  </button>
+  <button class="step" id="stepper-send" data-step="send">
+    <span class="step-num">2</span><span class="step-label">Send</span>
+  </button>
+  <button class="step" id="stepper-scan" data-step="scan">
+    <span class="step-num">3</span><span class="step-label">Scan</span>
+  </button>
+  <button class="step" id="stepper-withdraw" data-step="withdraw">
+    <span class="step-num">4</span><span class="step-label">Withdraw</span>
+  </button>
+</nav>
+
+<main>
+  <!-- ── Step 1: Derive ─────────────────────────────────── -->
+  <section class="panel" id="panel-derive">
+    <h2>1 · Derive stealth keys</h2>
+    <p class="panel-desc">
+      A wallet signs the canonical Wraith message; the 64-byte signature is split into two
+      domain-separated seeds, and each seed expands into a key pair. The public halves form
+      your stealth meta-address — share it to receive payments.
+    </p>
+
+    <div class="field">
+      <label>Wallet signature <span>(128 hex chars — the demo signature is pre-filled)</span></label>
+      <input type="text" id="sigInput" spellcheck="false" autocomplete="off"
+             placeholder="64-byte ed25519 signature as hex" />
+    </div>
+
+    <div class="btn-row">
+      <button id="deriveBtn">Derive stealth keys</button>
+      <button class="ghost" id="reset-derive">Reset</button>
+    </div>
+    <div id="deriveResults"></div>
+    <p class="hint"><a id="permalink-derive">Copy permalink</a> — share the current step + inputs.</p>
+  </section>
+
+  <!-- ── Step 2: Send ───────────────────────────────────── -->
+  <section class="panel" id="panel-send" hidden>
+    <h2>2 · Send a stealth payment</h2>
+    <p class="panel-desc">
+      A fresh one-time ephemeral keypair is generated per payment. ECDH with the recipient's
+      viewing key derives the one-time stealth address, and the <code>stealth-announcer</code>
+      contract emits an announcement event — simulated here as a Horizon event.
+    </p>
+
+    <div class="field">
+      <label>Recipient meta-address <span>(st:xlm:…)</span></label>
+      <input type="text" id="sendMeta" spellcheck="false" autocomplete="off"
+             placeholder="st:xlm:&lt;spending pubkey hex&gt;&lt;viewing pubkey hex&gt;" />
+    </div>
+
+    <div class="row">
+      <div class="field">
+        <label>Asset</label>
+        <select id="sendAsset">
+          <option value="XLM">XLM</option>
+          <option value="USDC">USDC</option>
+        </select>
+      </div>
+      <div class="field">
+        <label>Amount</label>
+        <input type="number" id="sendAmount" min="0" step="any" placeholder="10.0" />
+      </div>
+    </div>
+
+    <div class="btn-row">
+      <button id="constructBtn">Construct announcement</button>
+      <button class="ghost" id="reset-send">Reset</button>
+    </div>
+    <div id="sendResults"></div>
+    <p class="hint"><a id="permalink-send">Copy permalink</a> — share the current step + inputs.</p>
+  </section>
+
+  <!-- ── Step 3: Scan ───────────────────────────────────── -->
+  <section class="panel" id="panel-scan" hidden>
+    <h2>3 · Scan for incoming payments</h2>
+    <p class="panel-desc">
+      Announcements are filtered by view tag (a single byte rejects ~255/256 non-matches), then
+      matched with ECDH + Ed25519 point addition. The batch below is parsed from the fixture
+      Horizon events, plus anything you constructed in the Send step.
+    </p>
+
+    <div class="field">
+      <label>Stealth meta-address <span>(st:xlm:…)</span></label>
+      <input type="text" id="scanMeta" spellcheck="false" autocomplete="off"
+             placeholder="st:xlm:&lt;64-char spending pubkey hex&gt;&lt;64-char viewing pubkey hex&gt;" />
+    </div>
+
+    <div class="row">
+      <div class="field">
+        <label>Viewing key <span>(32-byte hex seed)</span></label>
+        <input type="text" id="scanVk" placeholder="64 hex chars" spellcheck="false" autocomplete="off" />
+      </div>
+      <div class="field">
+        <label>Spending scalar <span>(decimal bigint)</span></label>
+        <input type="text" id="scanScalar" placeholder="decimal integer" spellcheck="false" autocomplete="off" />
+      </div>
+    </div>
+
+    <p class="hint">No keys handy? <a id="loadFixture">Load the demo keys</a> that match the fixture announcements.</p>
+
+    <div class="btn-row">
+      <button id="scanBtn">Scan announcements</button>
+      <button class="ghost" id="reset-scan">Reset</button>
+    </div>
+    <div id="scanResults"></div>
+
+    <details class="fixture-section">
+      <summary>Announcement batch</summary>
+      <div class="fixture-table">
+        <table id="fixtureTable"></table>
+      </div>
+    </details>
+    <p class="hint"><a id="permalink-scan">Copy permalink</a> — share the current step + inputs.</p>
+  </section>
+
+  <!-- ── Step 4: Withdraw ───────────────────────────────── -->
+  <section class="panel" id="panel-withdraw" hidden>
+    <h2>4 · Withdraw to your wallet</h2>
+    <p class="panel-desc">
+      Only the recipient can spend from a stealth address: the stealth private scalar
+      (<code>spendingScalar + hashToScalar(sharedSecret) mod L</code>) signs the withdrawal.
+      This step simulates the transaction using the demo keys.
+    </p>
+
+    <div class="field">
+      <label>Destination wallet <span>(G…)</span></label>
+      <input type="text" id="wdDest" spellcheck="false" autocomplete="off"
+             placeholder="G… your Stellar wallet" />
+    </div>
+
+    <div class="btn-row">
+      <button class="ghost" id="reset-withdraw">Reset</button>
+    </div>
+    <div id="withdrawResults"></div>
+    <p class="hint"><a id="permalink-withdraw">Copy permalink</a> — share the current step + inputs.</p>
+  </section>
+</main>
+
+<footer class="footer-note">
+  Everything runs client-side against canned fixtures — no wallet, no network calls, no third-party scripts.
+  Keys here are deterministic demo values, never real.
+</footer>
 
 <script src="scanner.js"></script>
+<script src="playground.js"></script>
 </body>
 </html>
diff --git a/scripts/playground/playground.js b/scripts/playground/playground.js
new file mode 100644
index 0000000..92e55d1
--- /dev/null
+++ b/scripts/playground/playground.js
@@ -0,0 +1,486 @@
+// ============================================================
+// Wraith Stealth Playground — playground.js
+// Stepper UI + the four guided steps (derive → send → scan →
+// withdraw). All crypto lives in scanner.js; this file only
+// wires DOM to engine and manages the fixture data + session
+// state. Zero network calls: fixtures are fetched once from the
+// same origin, everything else is in-memory.
+// ============================================================
+
+'use strict';
+
+// ── Session state (lives for the lifetime of the iframe) ────
+const state = {
+  fixtures: null,          // parsed fixtures.json
+  derived: null,           // output of the derive step
+  sessionEvents: [],       // Horizon events constructed in the send step
+  sessionAnnouncements: [],// parsed versions of the above
+  scanMatches: [],         // last scan results
+  sendNonce: 0,            // deterministic ephemeral key counter
+};
+
+const STEPS = ['derive', 'send', 'scan', 'withdraw'];
+const STEP_LABELS = {
+  derive: 'Derive',
+  send: 'Send',
+  scan: 'Scan',
+  withdraw: 'Withdraw',
+};
+
+const $ = (id) => document.getElementById(id);
+const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({
+  '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+}[c]));
+
+// ── Stepper ─────────────────────────────────────────────────
+function activateStep(step) {
+  if (!STEPS.includes(step)) step = 'derive';
+  for (const s of STEPS) {
+    $('panel-' + s).hidden = s !== step;
+    $('stepper-' + s).classList.toggle('active', s === step);
+  }
+  if (step === 'withdraw') renderWithdraw();
+  if (step === 'scan') renderFixtureTable();
+  syncPermalink();
+}
+
+// ── Status / result helpers ─────────────────────────────────
+function statusBar(kind, html) {
+  return `<div class="status-bar"><span class="dot dot-${kind}"></span><span>${html}</span></div>`;
+}
+
+function kvRow(k, v, mono = true) {
+  return `<div class="kv-row"><span class="k">${k}</span><span class="v${mono ? '' : ' v-plain'}">${v}</span></div>`;
+}
+
+function copyText(text, btn) {
+  const done = () => {
+    const old = btn.textContent;
+    btn.textContent = 'Copied ✓';
+    setTimeout(() => { btn.textContent = old; }, 1200);
+  };
+  if (navigator.clipboard && window.isSecureContext) {
+    navigator.clipboard.writeText(text).then(done).catch(() => fallbackCopy(text, done));
+  } else {
+    fallbackCopy(text, done);
+  }
+}
+
+function fallbackCopy(text, done) {
+  const ta = document.createElement('textarea');
+  ta.value = text;
+  ta.style.position = 'fixed';
+  ta.style.opacity = '0';
+  document.body.appendChild(ta);
+  ta.select();
+  try { document.execCommand('copy'); done(); } catch (_) { /* ignore */ }
+  document.body.removeChild(ta);
+}
+
+// ── Fixture loading ─────────────────────────────────────────
+async function loadFixtures() {
+  const res = await fetch('fixtures.json');
+  if (!res.ok) throw new Error(`fixtures.json returned ${res.status}`);
+  state.fixtures = await res.json();
+
+  const r = state.fixtures.recipient;
+  // The derive step defaults to the demo wallet signature.
+  $('sigInput').value = r.signature;
+  // The send step defaults to the demo recipient.
+  $('sendMeta').value = r.metaAddress;
+  // The scan step defaults to the demo keys.
+  $('scanMeta').value = r.metaAddress;
+  $('scanVk').value = r.viewingKey;
+  $('scanScalar').value = r.spendingScalar;
+  // The withdraw step defaults to the demo wallet.
+  $('wdDest').value = r.walletAddress;
+
+  // Parse fixture events into announcements for the scan step.
+  state.fixtureAnnouncements = (state.fixtures.events || [])
+    .map(parseHorizonEvent)
+    .filter(Boolean);
+}
+
+// ── Derive step ─────────────────────────────────────────────
+async function runDerive() {
+  const sigRaw = $('sigInput').value.trim();
+  const out = $('deriveResults');
+  if (!/^[0-9a-fA-F]{128}$/.test(sigRaw)) {
+    out.innerHTML = statusBar('err', 'Signature must be 128 hex chars (a 64-byte ed25519 signature).');
+    return;
+  }
+  try {
+    const keys = await deriveStealthKeys(hexToBytes(sigRaw));
+    state.derived = keys;
+
+    const metaAddress = `st:xlm:${bytesToHex(keys.spendingPubKey)}${bytesToHex(keys.viewingPubKey)}`;
+
+    out.innerHTML = `
+      ${statusBar('done', 'Keys derived — the meta-address below is what you share to receive payments.')}
+      <div class="card">
+        ${kvRow('Spending key seed', `<code>${bytesToHex(keys.spendingKey)}</code>`)}
+        ${kvRow('Viewing key seed', `<code>${bytesToHex(keys.viewingKey)}</code>`)}
+        ${kvRow('Spending scalar', `<code class="wrap">${keys.spendingScalar.toString()}</code>`)}
+        ${kvRow('Viewing scalar', `<code class="wrap">${keys.viewingScalar.toString()}</code>`)}
+        ${kvRow('Spending pub key', `<code>${pubKeyToStellarAddress(keys.spendingPubKey)}</code>`)}
+        ${kvRow('Viewing pub key', `<code>${pubKeyToStellarAddress(keys.viewingPubKey)}</code>`)}
+      </div>
+      <div class="card card-accent">
+        <div class="kv-row"><span class="k">Stealth meta-address</span>
+          <span class="v"><code class="wrap">${esc(metaAddress)}</code></span></div>
+        <button class="ghost small" id="copyMetaBtn">Copy meta-address</button>
+      </div>
+      <p class="hint">The seeds are <code>SHA-256("wraith:spending:" ‖ signature)</code> and
+        <code>SHA-256("wraith:viewing:" ‖ signature)</code> — the same split the SDK performs.</p>`;
+
+    $('copyMetaBtn').addEventListener('click', () => copyText(metaAddress, $('copyMetaBtn')));
+  } catch (err) {
+    out.innerHTML = statusBar('err', `Derivation failed: ${esc(err.message)}`);
+  }
+}
+
+// ── Send step ───────────────────────────────────────────────
+async function constructAnnouncement() {
+  const metaRaw = $('sendMeta').value.trim();
+  const amount = $('sendAmount').value.trim();
+  const asset = $('sendAsset').value;
+  const out = $('sendResults');
+
+  if (!metaRaw.startsWith('st:xlm:')) {
+    out.innerHTML = statusBar('err', 'Recipient meta-address must start with <code>st:xlm:</code>.');
+    return;
+  }
+  if (!amount || Number.isNaN(Number(amount)) || Number(amount) <= 0) {
+    out.innerHTML = statusBar('err', 'Amount must be a positive number.');
+    return;
+  }
+
+  try {
+    const { spendingPubKey, viewingPubKey } = decodeStealthMetaAddress(metaRaw);
+
+    // Deterministic one-time ephemeral keypair per click, so the demo is
+    // reproducible — the real protocol uses a random seed.
+    const ephSeed = await sha256(strToBytes('wraith:eph:'), strToBytes(String(state.sendNonce++)));
+    const gen = await generateStealthAddress(spendingPubKey, viewingPubKey, ephSeed);
+
+    // metadata = 32 bytes, first byte is the view tag
+    const metadata = new Uint8Array(32);
+    metadata[0] = gen.viewTag;
+
+    const announcement = {
+      schemeId: 1,
+      stealthAddress: gen.stealthAddress,
+      caller: pubKeyToStellarAddress(gen.ephemeralPubKey),
+      ephemeralPubKey: bytesToHex(gen.ephemeralPubKey),
+      metadata: bytesToHex(metadata),
+    };
+
+    const event = encodeHorizonEvent(announcement, {
+      ledger: (state.fixtures ? state.fixtures.events[state.fixtures.events.length - 1].ledger : 51234000) + 1,
+    });
+
+    state.sessionEvents.push(event);
+    state.sessionAnnouncements.push(announcement);
+    renderFixtureTable();
+
+    out.innerHTML = `
+      ${statusBar('done', `Announcement constructed and added to the scan batch (now ${state.sessionEvents.length} in-batch).`)}
+      <div class="card card-accent">
+        ${kvRow('Stealth address (recipient)', `<code>${announcement.stealthAddress}</code>`)}
+        ${kvRow('View tag', `<code>0x${gen.viewTag.toString(16).padStart(2, '0')}</code>`)}
+        ${kvRow('Ephemeral pub key', `<code class="wrap">${announcement.ephemeralPubKey}</code>`)}
+        ${kvRow('Payment', `<code>${esc(amount)} ${esc(asset)} → stealth address</code>`)}
+      </div>
+      <details class="fixture-section">
+        <summary>Horizon event emitted by this payment</summary>
+        <pre class="code-block">${esc(JSON.stringify(event, null, 2))}</pre>
+      </details>
+      <p class="hint">The <code>stealth-sender</code> contract transfers the asset and the
+        <code>stealth-announcer</code> contract emits this event in the same transaction.</p>`;
+  } catch (err) {
+    out.innerHTML = statusBar('err', `Send failed: ${esc(err.message)}`);
+  }
+}
+
+// ── Scan step ───────────────────────────────────────────────
+function allAnnouncements() {
+  const fixtures = state.fixtureAnnouncements || [];
+  return fixtures.concat(state.sessionAnnouncements);
+}
+
+async function runScan() {
+  const metaRaw = $('scanMeta').value.trim();
+  const vkRaw = $('scanVk').value.trim();
+  const ssRaw = $('scanScalar').value.trim();
+  const out = $('scanResults');
+  const errors = [];
+
+  let spendingPubKey = null;
+  if (metaRaw.startsWith('st:xlm:')) {
+    try { spendingPubKey = decodeStealthMetaAddress(metaRaw).spendingPubKey; }
+    catch (e) { errors.push(`meta-address: ${e.message}`); }
+  } else if (metaRaw) {
+    errors.push('meta-address must start with st:xlm:');
+  }
+
+  let viewingKey = null;
+  if (/^[0-9a-fA-F]{64}$/.test(vkRaw)) {
+    viewingKey = hexToBytes(vkRaw);
+  } else {
+    errors.push('viewing key must be 64 hex chars');
+  }
+
+  let spendingScalar = null;
+  try { spendingScalar = BigInt(ssRaw); } catch (_) { errors.push('spending scalar must be a decimal integer'); }
+
+  if (errors.length > 0) {
+    out.innerHTML = statusBar('err', `Fix: ${esc(errors.join('; '))}.`);
+    return;
+  }
+
+  const announcements = allAnnouncements();
+  const btn = $('scanBtn');
+  btn.disabled = true;
+  out.innerHTML = statusBar('scanning', `Scanning ${announcements.length} announcements…`);
+
+  const t0 = performance.now();
+  try {
+    state.scanMatches = await scanAnnouncements(announcements, viewingKey, spendingPubKey, spendingScalar);
+    const elapsed = Math.round(performance.now() - t0);
+
+    if (state.scanMatches.length === 0) {
+      out.innerHTML = statusBar('done',
+        `Scanned ${announcements.length} announcements in ${elapsed}ms — no matches.`) +
+        `<div class="no-match">No announcements matched these keys.</div>`;
+    } else {
+      out.innerHTML = statusBar('done',
+        `Scanned <strong>${announcements.length}</strong> announcements in ${elapsed}ms — ` +
+        `<strong>${state.scanMatches.length}</strong> match${state.scanMatches.length === 1 ? '' : 'es'} found.`);
+      for (const m of state.scanMatches) {
+        out.insertAdjacentHTML('beforeend', `
+          <div class="match-card">
+            <div class="tag">Match</div>
+            ${kvRow('Stealth address', `<code>${m.stealthAddress}</code>`)}
+            ${kvRow('Ephemeral pub key', `<code class="wrap">${m.ephemeralPubKey}</code>`)}
+            ${kvRow('Stealth pub key (hex)', `<code class="wrap">${bytesToHex(m.stealthPubKeyBytes)}</code>`)}
+            ${kvRow('Stealth private scalar', `<code class="wrap">${m.stealthPrivateScalar.toString()}</code>`)}
+          </div>`);
+      }
+      out.insertAdjacentHTML('beforeend',
+        `<p class="hint">The stealth private scalar is what signs withdrawals from the stealth address — see the Withdraw step.</p>`);
+    }
+    renderFixtureTable();
+  } catch (err) {
+    out.innerHTML = statusBar('err', `Scan failed: ${esc(err.message)}`);
+  } finally {
+    btn.disabled = false;
+  }
+}
+
+function renderFixtureTable() {
+  const table = $('fixtureTable');
+  const announcements = allAnnouncements();
+  const yours = new Set(state.scanMatches.map((m) => m.ephemeralPubKey));
+  table.innerHTML = '';
+  if (announcements.length === 0) return;
+
+  const thead = document.createElement('thead');
+  thead.innerHTML = `<tr>
+    <th>#</th><th>Stealth Address</th><th>Ephemeral Pub Key</th><th>View Tag</th><th>Owner</th>
+  </tr>`;
+  table.appendChild(thead);
+
+  const tbody = document.createElement('tbody');
+  announcements.forEach((ann, i) => {
+    const viewTag = parseInt(ann.metadata.slice(0, 2), 16);
+    const isMatch = yours.has(ann.ephemeralPubKey);
+    const badge = isMatch
+      ? '<span class="badge-yours">match</span>'
+      : '<span class="badge-other">other</span>';
+    const tr = document.createElement('tr');
+    tr.innerHTML = `
+      <td>${i + 1}</td>
+      <td>${esc(trunc(ann.stealthAddress, 8))}</td>
+      <td>${esc(trunc(ann.ephemeralPubKey, 8))}</td>
+      <td>0x${viewTag.toString(16).padStart(2, '0')}</td>
+      <td>${badge}</td>`;
+    tbody.appendChild(tr);
+  });
+  table.appendChild(tbody);
+}
+
+function trunc(hex, n = 12) {
+  return hex.length <= n * 2 ? hex : hex.slice(0, n) + '…' + hex.slice(-6);
+}
+
+// ── Withdraw step ───────────────────────────────────────────
+async function renderWithdraw() {
+  const out = $('withdrawResults');
+  if (!state.fixtures) return;
+  const r = state.fixtures.recipient;
+  const dest = $('wdDest').value.trim() || r.walletAddress;
+
+  const viewingKey = hexToBytes(r.viewingKey);
+  const spendingPub = hexToBytes(r.spendingPubKey);
+  const spendingScalar = BigInt(r.spendingScalar);
+
+  const matches = await scanAnnouncements(allAnnouncements(), viewingKey, spendingPub, spendingScalar);
+
+  out.innerHTML = statusBar('done',
+    `<strong>${matches.length}</strong> withdrawable stealth balance${matches.length === 1 ? '' : 's'} found with the demo keys.`);
+
+  for (const m of matches) {
+    out.insertAdjacentHTML('beforeend', `
+      <div class="match-card" data-eph="${esc(m.ephemeralPubKey)}">
+        <div class="tag">Stealth balance</div>
+        ${kvRow('Stealth address', `<code>${m.stealthAddress}</code>`)}
+        ${kvRow('Private scalar (signs withdrawals)', `<code class="wrap">${m.stealthPrivateScalar.toString()}</code>`)}
+        <button class="ghost small withdraw-btn">Withdraw to ${esc(trunc(dest, 10))}</button>
+        <div class="withdraw-out"></div>
+      </div>`);
+  }
+
+  out.querySelectorAll('.withdraw-btn').forEach((btn) => {
+    btn.addEventListener('click', () => renderWithdrawal(btn, dest));
+  });
+
+  if (matches.length === 0) {
+    out.insertAdjacentHTML('beforeend',
+      `<div class="no-match">No balances — construct an announcement in the Send step and scan it first.</div>`);
+  }
+}
+
+function renderWithdrawal(btn, dest) {
+  const card = btn.closest('.match-card');
+  const out = card.querySelector('.withdraw-out');
+  // Order of kv-rows in the card: [stealth address, private scalar].
+  const values = card.querySelectorAll('.kv-row .v code');
+  const addr = values[0].textContent;
+  const scalar = values[1].textContent;
+
+  const tx = {
+    operations: [
+      { type: 'payment', from: addr, to: dest, asset: 'XLM', amount: 'all' },
+    ],
+    signer: scalar,
+    note: 'Signed with the stealth private scalar — the recipient of the payment is the only party who can do this.',
+  };
+
+  out.innerHTML = `
+    <details class="fixture-section" open>
+      <summary>Simulated withdrawal transaction</summary>
+      <pre class="code-block">${esc(JSON.stringify(tx, null, 2))}</pre>
+    </details>
+    <p class="hint privacy-note">Privacy: space real withdrawals at least 1 hour apart and avoid uniform round amounts —
+      see <a href="/guides/privacy-best-practices">Privacy Best Practices</a>.</p>`;
+}
+
+// ── Reset buttons ───────────────────────────────────────────
+function resetStep(step) {
+  if (!state.fixtures) return;
+  const r = state.fixtures.recipient;
+  if (step === 'derive') {
+    $('sigInput').value = r.signature;
+    $('deriveResults').innerHTML = '';
+    state.derived = null;
+  } else if (step === 'send') {
+    $('sendMeta').value = r.metaAddress;
+    $('sendAmount').value = '';
+    $('sendAsset').value = 'XLM';
+    $('sendResults').innerHTML = '';
+    state.sessionEvents = [];
+    state.sessionAnnouncements = [];
+    state.sendNonce = 0;
+  } else if (step === 'scan') {
+    $('scanMeta').value = r.metaAddress;
+    $('scanVk').value = r.viewingKey;
+    $('scanScalar').value = r.spendingScalar;
+    $('scanResults').innerHTML = '';
+    state.scanMatches = [];
+    renderFixtureTable();
+  } else if (step === 'withdraw') {
+    $('wdDest').value = r.walletAddress;
+    $('withdrawResults').innerHTML = '';
+  }
+}
+
+// ── Permalinks ──────────────────────────────────────────────
+function buildPermalink() {
+  const params = new URLSearchParams();
+  params.set('step', currentStep());
+  const sig = $('sigInput').value.trim();
+  if (sig) params.set('sig', sig);
+  const meta = $('sendMeta').value.trim();
+  if (meta) params.set('meta', meta);
+  const amount = $('sendAmount').value.trim();
+  if (amount) params.set('amount', amount);
+  const asset = $('sendAsset').value;
+  if (asset) params.set('asset', asset);
+  const vk = $('scanVk').value.trim();
+  if (vk) params.set('vk', vk);
+  const scalar = $('scanScalar').value.trim();
+  if (scalar) params.set('scalar', scalar);
+  const dest = $('wdDest').value.trim();
+  if (dest) params.set('dest', dest);
+  return `${location.pathname}?${params.toString()}`;
+}
+
+let _currentStep = 'derive';
+function currentStep() { return _currentStep; }
+
+function syncPermalink() {
+  const p = buildPermalink();
+  for (const s of STEPS) {
+    const link = $('permalink-' + s);
+    if (link) link.dataset.url = p;
+  }
+}
+
+// ── Boot ────────────────────────────────────────────────────
+async function boot() {
+  try {
+    await loadFixtures();
+  } catch (err) {
+    $('bootError').hidden = false;
+    $('bootError').innerHTML = statusBar('err',
+      `Could not load <code>fixtures.json</code> (${esc(err.message)}). ` +
+      `Serve the playground over HTTP — opening it via <code>file://</code> or embedding without ` +
+      `<code>allow-same-origin</code> blocks the fixture request.`);
+    return;
+  }
+
+  // Wire stepper.
+  for (const s of STEPS) {
+    $('stepper-' + s).addEventListener('click', () => {
+      _currentStep = s;
+      activateStep(s);
+    });
+    $('reset-' + s).addEventListener('click', () => resetStep(s));
+    $('permalink-' + s).addEventListener('click', (e) => {
+      e.preventDefault();
+      copyText(new URL($('permalink-' + s).dataset.url, location.href).href, $('permalink-' + s));
+    });
+  }
+
+  $('deriveBtn').addEventListener('click', runDerive);
+  $('constructBtn').addEventListener('click', constructAnnouncement);
+  $('scanBtn').addEventListener('click', runScan);
+  $('loadFixture').addEventListener('click', () => resetStep('scan'));
+
+  // Read the step (and optional prefilled inputs) from the URL.
+  const params = new URLSearchParams(location.search);
+  _currentStep = params.get('step') || 'derive';
+  if (!STEPS.includes(_currentStep)) _currentStep = 'derive';
+  if (params.get('sig')) $('sigInput').value = params.get('sig');
+  if (params.get('meta')) $('sendMeta').value = params.get('meta');
+  if (params.get('amount')) $('sendAmount').value = params.get('amount');
+  if (params.get('asset')) $('sendAsset').value = params.get('asset');
+  if (params.get('vk')) $('scanVk').value = params.get('vk');
+  if (params.get('scalar')) $('scanScalar').value = params.get('scalar');
+  if (params.get('dest')) $('wdDest').value = params.get('dest');
+
+  renderFixtureTable();
+  activateStep(_currentStep);
+}
+
+document.addEventListener('DOMContentLoaded', boot);
diff --git a/scripts/playground/scanner.js b/scripts/playground/scanner.js
index 4d08275..654aa71 100644
--- a/scripts/playground/scanner.js
+++ b/scripts/playground/scanner.js
@@ -1,7 +1,12 @@
 // ============================================================
-// Wraith Scanner Playground — scanner.js
-// Pure client-side: Web Crypto (SubtleCrypto) for hashing,
-// hand-rolled Curve25519 for X25519 DH. Zero third-party deps.
+// Wraith Stealth Playground — scanner.js
+// Pure client-side crypto engine: Web Crypto (SubtleCrypto) for
+// hashing, hand-rolled Curve25519/ed25519 arithmetic, Stellar
+// StrKey encoding, and a minimal XDR (ScVal) codec for parsing
+// Horizon contract events exactly like the SDK's
+// parseAnnouncementEvent. Zero third-party dependencies.
+//
+// This file contains no DOM access — the UI lives in playground.js.
 // ============================================================
 
 'use strict';
@@ -161,6 +166,26 @@ function strToBytes(s) {
   return new TextEncoder().encode(s);
 }
 
+function bytesToBinaryString(bytes) {
+  let s = '';
+  for (let i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
+  return s;
+}
+
+function binaryStringToBytes(s) {
+  const out = new Uint8Array(s.length);
+  for (let i = 0; i < s.length; i++) out[i] = s.charCodeAt(i);
+  return out;
+}
+
+function bytesToBase64(bytes) {
+  return btoa(bytesToBinaryString(bytes));
+}
+
+function base64ToBytes(b64) {
+  return binaryStringToBytes(atob(b64));
+}
+
 // ── Web Crypto hashing ───────────────────────────────────────
 async function sha256(...parts) {
   const data = concatBytes(...parts);
@@ -277,15 +302,15 @@ function decodeStealthMetaAddress(metaAddr) {
 }
 
 // ── X25519 shared secret ─────────────────────────────────────
-// viewingKeySeed: 32-byte Uint8Array (ed25519 seed)
-// ephemeralPubKeyBytes: 32-byte Uint8Array (ed25519 pubkey)
-async function computeSharedSecret(viewingKeySeed, ephemeralPubKeyBytes) {
+// privateSeed: 32-byte Uint8Array (ed25519 seed)
+// publicPub:   32-byte Uint8Array (ed25519 pubkey)
+async function computeSharedSecret(privateSeed, publicPub) {
   // 1. Expand seed → X25519 private scalar (clamp via SHA-512 lower half)
-  const privScalarBytes = await edSeedToMontgomeryScalar(viewingKeySeed);
+  const privScalarBytes = await edSeedToMontgomeryScalar(privateSeed);
   const privScalar = bytesToBigintLE(privScalarBytes);
 
   // 2. Convert ed25519 public key → X25519 public key (Montgomery u-coord)
-  const pubMont = edPubToMontgomery(ephemeralPubKeyBytes);
+  const pubMont = edPubToMontgomery(publicPub);
   const pubU = bytesToBigintLE(pubMont);
 
   // 3. X25519 scalar mult
@@ -293,10 +318,7 @@ async function computeSharedSecret(viewingKeySeed, ephemeralPubKeyBytes) {
   return bigintToBytesLE(sharedU, 32);
 }
 
-// ── Ed25519 point addition for stealth pub key derivation ────
-// We need: stealthPub = spendingPub + hashScalar * G
-// Using the extended twisted Edwards coordinates.
-
+// ── Ed25519 key derivation ───────────────────────────────────
 // ed25519 parameters
 const ED_P  = P; // same prime
 const ED_Q  = (2n ** 252n) + 27742317777372353535851937790883648493n; // group order
@@ -384,6 +406,77 @@ function deriveStealthPubKey(spendingPubBytes, hashScalar) {
   return edPointCompress(stealthPoint);
 }
 
+// ── Canonical key derivation (mirrors SDK deriveStealthKeys) ─
+// seedToScalar: expand 32-byte seed via SHA-512 lower half, clamp
+async function seedToScalar(seedBytes) {
+  const h = await sha512(seedBytes);
+  const lower = h.slice(0, 32);
+  lower[0]  &= 248;
+  lower[31] &= 127;
+  lower[31] |= 64;
+  return bytesToBigintLE(lower);
+}
+
+async function seedToPubKey(seedBytes) {
+  const scalar = await seedToScalar(seedBytes);
+  return edPointCompress(edScalarMult(scalar, ED_G));
+}
+
+// signature: 64-byte Uint8Array (an ed25519 wallet signature).
+// The 64 bytes are split into two domain-separated seeds:
+//   spendingKey = SHA-256("wraith:spending:" || signature)
+//   viewingKey  = SHA-256("wraith:viewing:"  || signature)
+async function deriveStealthKeys(signature) {
+  if (signature.length !== 64) {
+    throw new Error(`Expected 64-byte ed25519 signature, got ${signature.length} bytes`);
+  }
+  const spendingSeed = await sha256(strToBytes('wraith:spending:'), signature);
+  const viewingSeed  = await sha256(strToBytes('wraith:viewing:'), signature);
+  const [spendingScalar, viewingScalar] = await Promise.all([
+    seedToScalar(spendingSeed),
+    seedToScalar(viewingSeed),
+  ]);
+  const [spendingPubKey, viewingPubKey] = await Promise.all([
+    seedToPubKey(spendingSeed),
+    seedToPubKey(viewingSeed),
+  ]);
+  return {
+    spendingKey: spendingSeed,
+    viewingKey: viewingSeed,
+    spendingScalar,
+    viewingScalar,
+    spendingPubKey,
+    viewingPubKey,
+  };
+}
+
+// ── Stealth address generation (mirrors SDK generateStealthAddress) ─
+// spendingPubBytes, viewingPubBytes: 32-byte ed25519 pubkeys
+// ephemeralSeed: 32-byte ed25519 seed for the one-time ephemeral keypair
+async function generateStealthAddress(spendingPubBytes, viewingPubBytes, ephemeralSeed) {
+  const ephPubKey = await seedToPubKey(ephemeralSeed);
+  const sharedSecret = await computeSharedSecret(ephemeralSeed, viewingPubBytes);
+  const viewTag = await computeViewTag(sharedSecret);
+  const hScalar = await hashToScalar(sharedSecret);
+  const stealthPubKeyBytes = deriveStealthPubKey(spendingPubBytes, hScalar);
+  const stealthAddress = pubKeyToStellarAddress(stealthPubKeyBytes);
+  return {
+    stealthAddress,
+    ephemeralPubKey: ephPubKey,   // Uint8Array
+    viewTag,                       // number 0-255
+    hScalar,                       // bigint
+    sharedSecret,                  // Uint8Array
+    stealthPubKeyBytes,            // Uint8Array
+  };
+}
+
+// ── Stealth private scalar (mirrors SDK deriveStealthPrivateScalar) ─
+async function deriveStealthPrivateScalar(spendingScalar, viewingKeySeed, ephemeralPubKeyBytes) {
+  const sharedSecret = await computeSharedSecret(viewingKeySeed, ephemeralPubKeyBytes);
+  const hScalar = await hashToScalar(sharedSecret);
+  return (spendingScalar + hScalar) % ED_Q;
+}
+
 // ── Core scan function ───────────────────────────────────────
 const L = ED_Q;
 
@@ -426,279 +519,161 @@ async function scanAnnouncements(announcements, viewingKeySeed, spendingPubBytes
   return matches;
 }
 
-// ── Fixture data ─────────────────────────────────────────────
-// Deterministically generated from a known seed so the demo
-// always works with the pre-filled demo keys.
-//
-// Recipient keys were derived as follows (see FIXTURE_KEYS below):
-//   viewingKey  = SHA-256("wraith:viewing:demo")   (32-byte hex seed)
-//   spendingKey = SHA-256("wraith:spending:demo")  (32-byte hex seed)
-//   spendingPubKey and viewingPubKey derived from those seeds
-//   spendingScalar = seedToScalar(spendingKey)
-//
-// Two of the five announcements are addressed to this recipient.
-// The other three are noise (addressed to random keys).
-//
-// All values were pre-computed offline and are hardcoded here.
-
-// Demo recipient keys — derived from SHA-256("wraith:viewing:demo") etc.
-// (pre-computed by scripts/playground/generate-fixtures.mjs)
-const DEMO_VIEWING_KEY_HEX  = 'c7d997718f19c4e368a3957f29c736a96a00c95795f36698f7ea9cd52a159cbd';
-const DEMO_SPENDING_SCALAR  = 47238892582032075641309788249336400507171835695141794998383909413316810203216n;
-const DEMO_SPENDING_PUB_HEX = '45e84a059a47ee5d6fb721dcdbb31cecd928161e24b1e789e85d1e0510c99e86';
-const DEMO_VIEWING_PUB_HEX  = 'd25639f6da0834e32d912626fd59d01e79a126ff10a59d034d2e46124e1ca791';
-const DEMO_META_ADDRESS     = `st:xlm:${DEMO_SPENDING_PUB_HEX}${DEMO_VIEWING_PUB_HEX}`;
-
-// Fixture announcements (pre-computed by generate-fixtures.mjs).
-// Entries 0 and 2 (_yours: true) match the demo keys above.
-// Entries 1, 3, 4 are noise addressed to random keypairs.
-const FIXTURE_ANNOUNCEMENTS = [
-  {
-    // Match #1 — ephemeral seed SHA-256("eph:0")
-    schemeId:        1,
-    stealthAddress:  'GCQBIIZ2XR654U7FPVYVDU5W6R4FJG7QRLLGU6IMOKAWK3ZPLXHPVAA6',
-    caller:          'GALDGOMBLFBC2Z5V3KDSXWM6PL4SFNGOIRROK2A2HLHSEFDVELU54237',
-    ephemeralPubKey: '1633398159422d67b5da872bd99e7af922b4ce4462e5681a3acf22147522e9de',
-    metadata:        '0a00000000000000000000000000000000000000000000000000000000000000',
-    _yours: true,
-  },
-  {
-    // Noise #1 — ephemeral seed SHA-256("eph:1")
-    schemeId:        1,
-    stealthAddress:  'GBXQUML6RVKJLZJX2LWFQWR3AG2QUUS4YVMAQYDETXWLN7UKUXAWLGZI',
-    caller:          'GBQ2PGGKW45GFBTI57YMYSS46UOVNB6JI674M5AQACAFHACJ4E3DUPPI',
-    ephemeralPubKey: '61a798cab73a628668eff0cc4a5cf51d5687c947bfc674100080538049e1363a',
-    metadata:        '8500000000000000000000000000000000000000000000000000000000000000',
-    _yours: false,
-  },
-  {
-    // Match #2 — ephemeral seed SHA-256("eph:2")
-    schemeId:        1,
-    stealthAddress:  'GCW452O47CQUS5L2RHJNRZNQLNFZDPPWWICC6KJMNYTVAPRW2RP6WLWA',
-    caller:          'GBJBZJG3JDX2EV4CBW5PE7X5OQCQGDRA5LPFE23IAC4YF6QKI3F7BADU',
-    ephemeralPubKey: '521ca4db48efa257820dbaf27efd7405030e20eade526b6800b982fa0a46cbf0',
-    metadata:        '9c00000000000000000000000000000000000000000000000000000000000000',
-    _yours: true,
-  },
-  {
-    // Noise #2 — ephemeral seed SHA-256("eph:3")
-    schemeId:        1,
-    stealthAddress:  'GBG2TPIPQM3MMFMIIOUHJXZPMQ5FOB2DM2CTBYT4YOGZK5GCKFNAGOSI',
-    caller:          'GDOFFZ6AIKS2RIKW65GOTSW7ZB2NUNCIMTJZFMECSTS4BTB6HF2YTELI',
-    ephemeralPubKey: 'dc52e7c042a5a8a156f74ce9cadfc874da344864d392b08294e5c0cc3e397589',
-    metadata:        '9500000000000000000000000000000000000000000000000000000000000000',
-    _yours: false,
-  },
-  {
-    // Noise #3 — ephemeral seed SHA-256("eph:4")
-    schemeId:        1,
-    stealthAddress:  'GCHMAU4TJ2HVT2PE4AOSVXA6IG2X7HZ56EWCK55BFLAIRY3E6NBX2LLA',
-    caller:          'GCY3J75MGG2HVA7LJ6XIGUCTBHQAVIMQAUPZGTYF73LXJSXDOUQNZTMQ',
-    ephemeralPubKey: 'b1b4ffac31b47a83eb4fae83505309e00aa190051f934f05fed774cae37520dc',
-    metadata:        'fa00000000000000000000000000000000000000000000000000000000000000',
-    _yours: false,
-  },
-];
-
-// ── UI helpers ───────────────────────────────────────────────
-function trunc(hex, n = 12) {
-  return hex.length <= n * 2 ? hex : hex.slice(0, n) + '…' + hex.slice(-6);
-}
-
-function renderResults(matches, total, elapsedMs) {
-  const container = document.getElementById('results');
-
-  const bar = document.createElement('div');
-  bar.className = 'status-bar';
-
-  if (matches === null) {
-    bar.innerHTML = `<span class="dot dot-err"></span><span>Error — see console for details.</span>`;
-    container.innerHTML = '';
-    container.appendChild(bar);
-    return;
-  }
-
-  bar.innerHTML = `
-    <span class="dot dot-done"></span>
-    <span>Scanned <strong>${total}</strong> announcement${total !== 1 ? 's' : ''} in ${elapsedMs}ms — 
-    <strong>${matches.length}</strong> match${matches.length !== 1 ? 'es' : ''} found.</span>`;
+// ── Minimal XDR (ScVal) codec ────────────────────────────────
+// Encodes/decodes exactly the subset of ScVal used by the
+// stealth-announcer contract events, byte-compatible with
+// @stellar/stellar-sdk's ScVal (verified against its XDR output).
+// Note: SCV_VEC and SCV_MAP are recursive, so per the XDR spec
+// they sit behind an option pointer — a `present` bool precedes
+// the array contents.
 
-  container.innerHTML = '';
-  container.appendChild(bar);
-
-  if (matches.length === 0) {
-    const none = document.createElement('div');
-    none.className = 'no-match';
-    none.textContent = 'No announcements matched these keys.';
-    container.appendChild(none);
-    return;
-  }
+const SCV_U32     = 3;
+const SCV_BYTES   = 13;
+const SCV_SYMBOL  = 15;
+const SCV_VEC     = 16;
+const SCV_ADDRESS = 18;
 
-  for (const m of matches) {
-    const card = document.createElement('div');
-    card.className = 'match-card';
-    card.innerHTML = `
-      <div class="tag">Match</div>
-      <div class="kv-row">
-        <span class="k">Stealth Address</span>
-        <span class="v">${m.stealthAddress}</span>
-      </div>
-      <div class="kv-row">
-        <span class="k">Ephemeral Pub Key</span>
-        <span class="v">${m.ephemeralPubKey}</span>
-      </div>
-      <div class="kv-row">
-        <span class="k">Stealth Pub Key (hex)</span>
-        <span class="v">${bytesToHex(m.stealthPubKeyBytes)}</span>
-      </div>
-      <div class="kv-row">
-        <span class="k">Stealth Private Scalar (decimal)</span>
-        <span class="v" style="font-size:10px">${m.stealthPrivateScalar.toString()}</span>
-      </div>`;
-    container.appendChild(card);
-  }
+function u32ToBytes(n) {
+  const out = new Uint8Array(4);
+  new DataView(out.buffer).setUint32(0, n >>> 0);
+  return out;
 }
 
-function showScanning(total) {
-  const container = document.getElementById('results');
-  container.innerHTML = `
-    <div class="status-bar">
-      <span class="dot dot-scanning"></span>
-      <span>Scanning ${total} announcements…</span>
-    </div>`;
-}
-
-function renderFixtureTable() {
-  const table = document.getElementById('fixtureTable');
-  table.innerHTML = `
-    <thead>
-      <tr>
-        <th>#</th>
-        <th>Stealth Address</th>
-        <th>Ephemeral Pub Key</th>
-        <th>View Tag</th>
-        <th>Owner</th>
-      </tr>
-    </thead>`;
-  const tbody = document.createElement('tbody');
-  FIXTURE_ANNOUNCEMENTS.forEach((ann, i) => {
-    const viewTag = parseInt(ann.metadata.slice(0, 2), 16);
-    const tr = document.createElement('tr');
-    tr.innerHTML = `
-      <td>${i + 1}</td>
-      <td>${trunc(ann.stealthAddress, 8)}</td>
-      <td>${trunc(ann.ephemeralPubKey, 8)}</td>
-      <td>0x${viewTag.toString(16).padStart(2,'0')}</td>
-      <td>${ann._yours
-        ? '<span class="badge-yours">yours</span>'
-        : '<span class="badge-other">other</span>'}</td>`;
-    tbody.appendChild(tr);
-  });
-  table.appendChild(tbody);
-}
-
-// ── Input parsing helpers ────────────────────────────────────
-function parseInputs() {
-  const metaRaw    = document.getElementById('metaAddr').value.trim();
-  const vkRaw      = document.getElementById('viewingKey').value.trim();
-  const ssRaw      = document.getElementById('spendingScalar').value.trim();
-  const errors = {};
-
-  let viewingKey = null, spendingPubKey = null, spendingScalar = null;
-
-  // Try to parse meta-address first
-  if (metaRaw.startsWith('st:xlm:')) {
-    try {
-      const decoded = decodeStealthMetaAddress(metaRaw);
-      spendingPubKey = decoded.spendingPubKey;
-      // meta-address doesn't give us viewing key seed or spending scalar — user must supply separately
-    } catch (e) {
-      errors.metaAddr = e.message;
-    }
-  }
-
-  // Parse viewing key seed
-  if (vkRaw.length === 64) {
-    try { viewingKey = hexToBytes(vkRaw); } catch (e) { errors.viewingKey = e.message; }
-  } else if (vkRaw) {
-    errors.viewingKey = 'Must be 64 hex chars (32 bytes)';
-  } else {
-    errors.viewingKey = 'Required';
-  }
+function readU32(bytes, off) {
+  return new DataView(bytes.buffer, bytes.byteOffset + off, 4).getUint32(0);
+}
 
-  // If no meta-address, spending pub is derived from viewing key + scalar later; user can also
-  // supply it via meta-address. For the demo we require a meta-address OR we can use demo defaults.
-  if (!spendingPubKey && metaRaw) {
-    // already set error above or not a meta-address at all
-    if (!metaRaw.startsWith('st:xlm:')) errors.metaAddr = 'Must start with st:xlm:';
-  }
+function padTo4(bytes) {
+  const rem = bytes.length % 4;
+  return rem === 0 ? new Uint8Array(0) : new Uint8Array(4 - rem);
+}
 
-  // Parse spending scalar
-  if (ssRaw) {
-    try { spendingScalar = BigInt(ssRaw); } catch (e) { errors.spendingScalar = 'Must be a decimal integer'; }
-  } else {
-    errors.spendingScalar = 'Required';
-  }
+function scvU32XDR(n) {
+  return concatBytes(u32ToBytes(SCV_U32), u32ToBytes(n));
+}
 
-  return { viewingKey, spendingPubKey, spendingScalar, errors };
+function scvBytesXDR(bytes) {
+  return concatBytes(u32ToBytes(SCV_BYTES), u32ToBytes(bytes.length), bytes, padTo4(bytes));
 }
 
-// ── Main scan handler ────────────────────────────────────────
-document.getElementById('scanBtn').addEventListener('click', async () => {
-  const btn = document.getElementById('scanBtn');
+function scvSymbolXDR(s) {
+  const b = strToBytes(s);
+  return concatBytes(u32ToBytes(SCV_SYMBOL), u32ToBytes(b.length), b, padTo4(b));
+}
 
-  // Clear previous field errors
-  ['metaAddr','viewingKey','spendingScalar'].forEach(id => {
-    document.getElementById(id).classList.remove('error');
-  });
+// ScAddress: account type 0, ed25519 pubkey type 0, 32-byte pubkey
+function scvAddressXDR(pubKeyBytes) {
+  return concatBytes(u32ToBytes(SCV_ADDRESS), u32ToBytes(0), u32ToBytes(0), pubKeyBytes);
+}
 
-  const { viewingKey, spendingPubKey, spendingScalar, errors } = parseInputs();
+function scvVecXDR(items) {
+  return concatBytes(u32ToBytes(SCV_VEC), u32ToBytes(1), u32ToBytes(items.length), ...items);
+}
 
-  if (Object.keys(errors).length > 0) {
-    // Highlight erroneous fields
-    if (errors.metaAddr)        document.getElementById('metaAddr').classList.add('error');
-    if (errors.viewingKey)      document.getElementById('viewingKey').classList.add('error');
-    if (errors.spendingScalar)  document.getElementById('spendingScalar').classList.add('error');
-    const container = document.getElementById('results');
-    container.innerHTML = `
-      <div class="status-bar">
-        <span class="dot dot-err"></span>
-        <span>Please fix the highlighted fields: ${Object.values(errors).join('; ')}</span>
-      </div>`;
-    return;
+// Decode one ScVal, returning { kind, value, next }.
+function decodeScVal(bytes, off = 0) {
+  const type = readU32(bytes, off);
+  off += 4;
+  switch (type) {
+    case SCV_U32:
+      return { kind: 'u32', value: readU32(bytes, off), next: off + 4 };
+    case SCV_SYMBOL: {
+      const len = readU32(bytes, off);
+      off += 4;
+      const str = new TextDecoder().decode(bytes.slice(off, off + len));
+      return { kind: 'symbol', value: str, next: off + len + ((4 - (len % 4)) % 4) };
+    }
+    case SCV_BYTES: {
+      const len = readU32(bytes, off);
+      off += 4;
+      const b = bytes.slice(off, off + len);
+      return { kind: 'bytes', value: b, next: off + len + ((4 - (len % 4)) % 4) };
+    }
+    case SCV_VEC: {
+      const present = readU32(bytes, off);
+      off += 4;
+      if (present !== 1) throw new Error('Missing SCV_VEC option pointer');
+      const count = readU32(bytes, off);
+      off += 4;
+      const items = [];
+      for (let i = 0; i < count; i++) {
+        const item = decodeScVal(bytes, off);
+        items.push(item);
+        off = item.next;
+      }
+      return { kind: 'vec', value: items, next: off };
+    }
+    case SCV_ADDRESS: {
+      const addrType = readU32(bytes, off);
+      off += 4;
+      if (addrType !== 0) throw new Error('Unsupported address type');
+      const pkType = readU32(bytes, off);
+      off += 4;
+      if (pkType !== 0) throw new Error('Unsupported public key type');
+      const pk = bytes.slice(off, off + 32);
+      return { kind: 'address', value: pk, next: off + 32 };
+    }
+    default:
+      throw new Error(`Unsupported ScVal type ${type}`);
   }
+}
 
-  btn.disabled = true;
-  showScanning(FIXTURE_ANNOUNCEMENTS.length);
-
-  const t0 = performance.now();
+// ── Horizon event ↔ announcement ─────────────────────────────
+// Parses a Horizon contract event exactly like the SDK's
+// parseAnnouncementEvent:
+//   topic[0] = event name (symbol, ignored)
+//   topic[1] = schemeId (u32)
+//   topic[2] = stealth address (address)
+//   value    = vec [caller (address), ephemeralPubKey (bytes),
+//                   viewTag (bytes)]
+function parseHorizonEvent(event) {
   try {
-    const matches = await scanAnnouncements(
-      FIXTURE_ANNOUNCEMENTS,
-      viewingKey,
-      spendingPubKey,
-      spendingScalar,
-    );
-    const elapsed = Math.round(performance.now() - t0);
-    renderResults(matches, FIXTURE_ANNOUNCEMENTS.length, elapsed);
-  } catch (err) {
-    console.error('Scan error:', err);
-    renderResults(null, 0, 0);
-  } finally {
-    btn.disabled = false;
+    const topics = (event.topic || []).map((t) => decodeScVal(base64ToBytes(t)));
+    if (topics.length < 3) return null;
+    if (topics[1].kind !== 'u32' || topics[2].kind !== 'address') return null;
+
+    const value = decodeScVal(base64ToBytes(event.value));
+    if (value.kind !== 'vec' || value.value.length < 3) return null;
+    const [caller, ephPub, viewTag] = value.value;
+    if (caller.kind !== 'address' || ephPub.kind !== 'bytes' || viewTag.kind !== 'bytes') {
+      return null;
+    }
+
+    return {
+      schemeId: topics[1].value,
+      stealthAddress: pubKeyToStellarAddress(topics[2].value),
+      caller: pubKeyToStellarAddress(caller.value),
+      ephemeralPubKey: bytesToHex(ephPub.value),
+      metadata: bytesToHex(viewTag.value),
+    };
+  } catch (_) {
+    return null;
   }
-});
-
-// ── Load demo keys ───────────────────────────────────────────
-document.getElementById('loadFixture').addEventListener('click', () => {
-  document.getElementById('metaAddr').value        = DEMO_META_ADDRESS;
-  document.getElementById('viewingKey').value      = DEMO_VIEWING_KEY_HEX;
-  document.getElementById('spendingScalar').value  = DEMO_SPENDING_SCALAR.toString();
-  ['metaAddr','viewingKey','spendingScalar'].forEach(id => {
-    document.getElementById(id).classList.remove('error');
-  });
-  document.getElementById('results').innerHTML = '';
-});
-
-// ── Boot ─────────────────────────────────────────────────────
-renderFixtureTable();
+}
+
+// Builds a Horizon-shaped contract event from a plain announcement.
+function encodeHorizonEvent(announcement, opts = {}) {
+  const contractId = opts.contractId || 'CCJLJ2QRBJAAKIG6ELNQVXLLWMKKWVN5O2FKWUETHZGMPAD4MHK7WVWL';
+  const ledger = opts.ledger || 0;
+  const closeTime = opts.ledgerCloseTime || new Date().toISOString();
+  const id = ledger.toString(16).padStart(24, '0') + '0000000000000000';
+  return {
+    type: 'contract',
+    contract_id: contractId,
+    ledger,
+    ledger_close_time: closeTime,
+    id,
+    paging_token: `${ledger}-0`,
+    topic: [
+      bytesToBase64(scvSymbolXDR('announce')),
+      bytesToBase64(scvU32XDR(announcement.schemeId)),
+      bytesToBase64(scvAddressXDR(stellarAddressToPubKey(announcement.stealthAddress))),
+    ],
+    value: bytesToBase64(scvVecXDR([
+      scvAddressXDR(stellarAddressToPubKey(announcement.caller)),
+      scvBytesXDR(hexToBytes(announcement.ephemeralPubKey)),
+      scvBytesXDR(hexToBytes(announcement.metadata)),
+    ])),
+    _yours: true,
+  };
+}
diff --git a/scripts/playground/tests/playground.spec.ts b/scripts/playground/tests/playground.spec.ts
new file mode 100644
index 0000000..c700bc4
--- /dev/null
+++ b/scripts/playground/tests/playground.spec.ts
@@ -0,0 +1,105 @@
+import { expect, test } from "@playwright/test";
+
+// Smoke test for the Wraith Stealth Playground. Covers the full guided flow
+// (derive → send → scan → withdraw) and enforces the hard acceptance gate:
+// zero requests to any non-local origin during any step.
+
+const LOCAL_HOSTS = new Set(["127.0.0.1", "localhost"]);
+
+function trackRequests(page) {
+  const external = [];
+  const local = [];
+  page.on("request", (req) => {
+    const host = new URL(req.url()).hostname;
+    if (LOCAL_HOSTS.has(host)) local.push(req.url());
+    else external.push(req.url());
+  });
+  return { external, local };
+}
+
+test("guided flow runs end to end with zero external requests", async ({ page }) => {
+  const { external, local } = trackRequests(page);
+  const consoleErrors = [];
+  page.on("console", (msg) => {
+    if (msg.type() === "error") consoleErrors.push(msg.text());
+  });
+  const pageErrors = [];
+  page.on("pageerror", (err) => pageErrors.push(String(err)));
+
+  await page.goto("/index.html?step=derive");
+
+  // CSP must allow only same-origin scripts/connect and nothing external.
+  const csp = await page.evaluate(() => {
+    const meta = document.querySelector('meta[http-equiv="Content-Security-Policy"]');
+    return meta ? meta.getAttribute("content") : null;
+  });
+  expect(csp).toContain("default-src 'none'");
+  expect(csp).toContain("connect-src 'self'");
+  expect(csp).toContain("script-src 'self' 'unsafe-inline'");
+
+  // Fixtures load from the same origin.
+  await expect(page.locator("#fixtureTable tbody tr")).toHaveCount(5);
+  expect(local.some((u) => u.includes("fixtures.json"))).toBe(true);
+
+  // ── Step 1: Derive ──────────────────────────────────────
+  await expect(page.locator("#panel-derive")).toBeVisible();
+  await page.getByRole("button", { name: "Derive stealth keys" }).click();
+  const metaAddress = await page.locator("#deriveResults .card-accent code").textContent();
+  expect(metaAddress).toMatch(/^st:xlm:[0-9a-f]{128}$/);
+  await expect(page.locator("#deriveResults")).toContainText(/spending scalar/i);
+
+  // ── Step 2: Send ────────────────────────────────────────
+  await page.locator("#stepper-send").click();
+  await page.locator("#sendAmount").fill("10");
+  await page.getByRole("button", { name: "Construct announcement" }).click();
+  await expect(page.locator("#sendResults")).toContainText("added to the scan batch (now 1");
+  const stealthAddress = await page.locator("#sendResults .card-accent code").first().textContent();
+  expect(stealthAddress).toMatch(/^G[A-Z2-7]{55}$/);
+  await expect(page.locator("#sendResults .code-block")).toContainText('"topic"');
+
+  // ── Step 3: Scan ────────────────────────────────────────
+  await page.locator("#stepper-scan").click();
+  await page.locator("#loadFixture").click();
+  await page.getByRole("button", { name: "Scan announcements" }).click();
+  await expect(page.locator("#scanResults")).toContainText("3 matches found");
+  await expect(page.locator("#scanResults .match-card")).toHaveCount(3);
+  // The send-step announcement joins the batch and is also a match.
+  await expect(page.locator("#scanResults")).toContainText("6 announcements");
+
+  // ── Step 4: Withdraw ────────────────────────────────────
+  await page.locator("#stepper-withdraw").click();
+  await expect(page.locator("#withdrawResults")).toContainText("3 withdrawable stealth balance");
+  await page.locator("#withdrawResults .withdraw-btn").first().click();
+  await expect(page.locator("#withdrawResults .code-block").first()).toContainText("stealth private scalar");
+
+  // ── Permalink ───────────────────────────────────────────
+  await page.locator("#stepper-scan").click();
+  await page.locator("#permalink-scan").click();
+  await expect(page.locator("#permalink-scan")).toContainText("Copied");
+
+  // ── Hard gate: zero external requests, no errors ────────
+  expect(external).toEqual([]);
+  expect(pageErrors).toEqual([]);
+  expect(consoleErrors.filter((t) => !t.includes("favicon"))).toEqual([]);
+});
+
+test("each step can be opened directly via its URL parameter", async ({ page }) => {
+  const { external } = trackRequests(page);
+
+  const cases = [
+    { step: "derive", panel: "panel-derive", label: "Derive stealth keys" },
+    { step: "send", panel: "panel-send", label: "Send a stealth payment" },
+    { step: "scan", panel: "panel-scan", label: "Scan for incoming payments" },
+    { step: "withdraw", panel: "panel-withdraw", label: "Withdraw to your wallet" },
+  ];
+
+  for (const { step, panel, label } of cases) {
+    await page.goto(`/index.html?step=${step}`);
+    await expect(page.locator(`#${panel}`)).toBeVisible();
+    await expect(page.locator(`#stepper-${step}`)).toHaveClass(/active/);
+    await expect(page.locator(`#${panel} h2`)).toContainText(label);
+    await expect(page.locator(`#panel-${step}`)).not.toBeHidden();
+  }
+
+  expect(external).toEqual([]);
+});
diff --git a/scripts/playground/tests/playwright.config.ts b/scripts/playground/tests/playwright.config.ts
new file mode 100644
index 0000000..ee7340a
--- /dev/null
+++ b/scripts/playground/tests/playwright.config.ts
@@ -0,0 +1,31 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "@playwright/test";
+
+// Playwright config for the Wraith Stealth Playground smoke tests.
+// The playground is served over HTTP (not file://) because module script
+// loading and CSP behave differently on file://.
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const repoRoot = path.resolve(__dirname, "..", "..", "..");
+
+export default defineConfig({
+  testDir: ".",
+  timeout: 60_000,
+  expect: { timeout: 10_000 },
+  fullyParallel: false,
+  workers: 1,
+  retries: process.env.CI ? 1 : 0,
+  reporter: [["list"]],
+  use: {
+    baseURL: "http://127.0.0.1:4173",
+    browserName: "chromium",
+    headless: true,
+  },
+  webServer: {
+    command: "node scripts/playground/tests/serve.mjs",
+    url: "http://127.0.0.1:4173/index.html",
+    cwd: repoRoot,
+    reuseExistingServer: !process.env.CI,
+    timeout: 30_000,
+  },
+});
diff --git a/scripts/playground/tests/serve.mjs b/scripts/playground/tests/serve.mjs
new file mode 100644
index 0000000..530cc64
--- /dev/null
+++ b/scripts/playground/tests/serve.mjs
@@ -0,0 +1,48 @@
+// serve.mjs
+// Minimal static file server for the playground tests. The playground must
+// be served over HTTP (not file://) because module-style script loading and
+// the CSP behave differently on file:// — see the maintainer's note on #134.
+import { createServer } from "node:http";
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const ROOT = path.normalize(path.join(path.dirname(fileURLToPath(import.meta.url)), ".."));
+const PORT = Number(process.env.PORT || 4173);
+
+const MIME = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".mjs": "text/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".svg": "image/svg+xml",
+};
+
+// We serve the playground only, and always resolve to index.html for
+// directory requests, mirroring how a docs host serves the static files.
+const server = createServer(async (req, res) => {
+  try {
+    const url = new URL(req.url, "http://localhost");
+    let filePath = path.normalize(path.join(ROOT, decodeURIComponent(url.pathname)));
+    if (!filePath.startsWith(ROOT)) {
+      res.writeHead(403).end("Forbidden");
+      return;
+    }
+    if (filePath.endsWith("/") || path.extname(filePath) === "") {
+      filePath = path.join(filePath, "index.html");
+    }
+    const body = await readFile(filePath);
+    res.writeHead(200, {
+      "Content-Type": MIME[path.extname(filePath)] || "application/octet-stream",
+      "Cache-Control": "no-store",
+    });
+    res.end(body);
+  } catch {
+    res.writeHead(404).end("Not found");
+  }
+});
+
+server.listen(PORT, "127.0.0.1", () => {
+  console.log(`Playground test server listening on http://127.0.0.1:${PORT}`);
+});