@paydlux/agent 0.1.4 → 0.1.6

package/README.md

@@ -44,9 +44,35 @@ stellar/onboard.ts   keys → funded vault → printed agent key
 ```bash
 npm i
 npx tsx stellar/demo.ts                    # 17 checks, live testnet
-npx tsx stellar/story.ts --public --split  # unguessable link; approve on your phone
+npx tsx stellar/story.ts --tls --split     # https://desk.paydlux.com; approve on your phone
 ```
 
+`--tls` is the one to use for anything real. It runs a named Cloudflare tunnel
+so the desk is served over `https://desk.paydlux.com` with a real certificate,
+instead of a random `trycloudflare.com` hostname (`--public`) that nothing tells
+the human is *your* desk. Setup is one-time and free:
+
+```bash
+cloudflared tunnel login
+cloudflared tunnel create paydlux-desk
+cloudflared tunnel route dns paydlux-desk desk.paydlux.com
+```
+
+Then `~/.cloudflared/config.yml` points the hostname at `http://127.0.0.1:4022`.
+The tunnel's credentials file stays in `~/.cloudflared/` and must never be
+committed: whoever holds it can serve your hostname.
+
+What the desk enforces once it is public (`npx tsx stellar/tls-check.ts`, 19 checks):
+
+- plain `http://` is 301'd to `https://` and never served, with HSTS set
+- the desk listens on `127.0.0.1` only, and refuses any `Host` that is not
+  `desk.paydlux.com` — so the local port cannot be driven directly to skip TLS
+- a desk configured with a public hostname **refuses to start** without a portal
+  key, rather than coming up as an open approval button
+- the portal key also rides in an `HttpOnly; SameSite=Strict; Secure` cookie, so
+  the approver app can load its own scripts (a `<script src>` cannot inherit
+  `?k=` from the page URL) without the key ever appearing in the DOM
+
 No wallet, no faucet, no config.
 
 ### The human key does not live on the seller's machine

package/dist/desk.d.ts

@@ -38,6 +38,15 @@ export type DeskConfig = {
     /** If set, the portal and its actions require this key in the URL.
      *  Required before putting the desk on any public URL. */
     portalKey?: string;
+    /**
+     * The hostname this desk is served on, e.g. "desk.paydlux.com". When set, the
+     * desk answers ONLY requests for that Host. A named Cloudflare tunnel gives
+     * real TLS on your own domain, but the local port it forwards to is still
+     * plain HTTP: if anything on this machine (or network) reached 127.0.0.1:4022
+     * directly it would bypass TLS and the HSTS/cookie protections the domain
+     * gives you. Pinning the Host means the only way in is through the tunnel.
+     */
+    publicHost?: string;
 };
 export declare class ApprovalDesk {
     private records;

package/dist/desk.js

@@ -23,25 +23,34 @@ import { createApprovalChallenge, submitApproved, challengeQrPayload, } from "./
  * The approver app is plain static files under phone-app/. Read on each request
  * rather than bundled, so the desk and the app can never drift apart.
  */
-const APP_DIR = join(dirname(fileURLToPath(import.meta.url)), "..", "phone-app");
-const appCache = new Map();
-function readAppFile(name) {
+const HERE = dirname(fileURLToPath(import.meta.url));
+const APP_DIR = join(HERE, "..", "phone-app");
+const PORTAL_DIR = join(HERE, "..", "portal-app");
+const staticCache = new Map();
+/**
+ * Static files are read on each process start rather than bundled, so the desk
+ * and its front ends can never drift apart. The name is stripped to [a-z.]
+ * before it touches a path, so a request can't walk out of the directory.
+ */
+function readStatic(dir, name, label) {
     const safe = name.replace(/[^a-z.]/g, "");
-    const hit = appCache.get(safe);
+    const hit = staticCache.get(dir + "/" + safe);
     if (hit)
         return hit;
     let text;
     try {
-        text = readFileSync(join(APP_DIR, safe), "utf8");
+        text = readFileSync(join(dir, safe), "utf8");
     }
     catch {
-        // A package install that shipped without phone-app/ should say so instead of
+        // A package install that shipped without the folder should say so instead of
         // throwing out of the request handler.
-        throw new Error("approver app is missing from this install (expected " + join(APP_DIR, safe) + ")");
+        throw new Error(label + " is missing from this install (expected " + join(dir, safe) + ")");
     }
-    appCache.set(safe, text);
+    staticCache.set(dir + "/" + safe, text);
     return text;
 }
+const readAppFile = (name) => readStatic(APP_DIR, name, "approver app");
+const readPortalFile = (name) => readStatic(PORTAL_DIR, name, "portal app");
 /** A portal link is a capability: whoever holds it can approve. So it is long,
  *  random, and compared without leaking timing. */
 export function newPortalKey() { return randomBytes(16).toString("base64url"); }
@@ -97,6 +106,20 @@ function readBody(req) {
         req.on("error", reject);
     });
 }
+/** Read one cookie out of the request header. No dependency for this. */
+function cookieOf(req, name) {
+    const raw = req.headers.cookie;
+    if (!raw)
+        return null;
+    for (const part of raw.split(";")) {
+        const eq = part.indexOf("=");
+        if (eq < 0)
+            continue;
+        if (part.slice(0, eq).trim() === name)
+            return decodeURIComponent(part.slice(eq + 1).trim());
+    }
+    return null;
+}
 function same(a, b) {
     const x = Buffer.from(a), y = Buffer.from(b);
     return x.length === y.length && timingSafeEqual(x, y);
@@ -230,16 +253,83 @@ export class ApprovalDesk {
     /** Serve the pending list as JSON (the portal polls this). */
     api(handler) { return handler; }
     listen(port = this.cfg.port) {
+        // A desk reachable from outside this machine must be gated. This is a
+        // startup refusal rather than a runtime one because the dangerous case is
+        // forgetting a flag: a public desk with no portal key is an open approval
+        // button, and it would otherwise start up looking completely healthy.
+        if (this.cfg.publicHost && !this.cfg.portalKey) {
+            throw new Error("a desk served on " + this.cfg.publicHost + " needs a portalKey; " +
+                "refusing to start an ungated approval desk");
+        }
         const srv = createServer(async (req, res) => {
             // (server handle kept below so close() can stop it)
             const url = new URL(req.url ?? "/", "http://localhost");
+            // Order matters. The Host pin runs first so a request that did not come
+            // through the tunnel is refused before the desk reveals anything about
+            // itself, including whether a portal key looks correct.
+            if (this.cfg.publicHost) {
+                const want = this.cfg.publicHost.toLowerCase();
+                const got = String(req.headers.host ?? "").toLowerCase().replace(/:\d+$/, "");
+                if (got !== want) {
+                    res.writeHead(403, { "content-type": "text/plain; charset=utf-8" });
+                    res.end("403 — this desk only answers on " + want + ".");
+                    return;
+                }
+                // Cloudflare terminates TLS and forwards both http and https to us, so
+                // http://desk.paydlux.com answers too unless we send it away. A human
+                // approving a payment over plain HTTP is handing the portal key and the
+                // transaction to anyone on the path, so plain HTTP gets a redirect and
+                // nothing else. x-forwarded-proto is set by Cloudflare, not the client.
+                if (String(req.headers["x-forwarded-proto"] ?? "").split(",")[0].trim() === "http") {
+                    res.writeHead(301, { location: "https://" + want + (req.url ?? "/") });
+                    res.end();
+                    return;
+                }
+                // Once HTTPS is established, tell the browser to never try plain HTTP
+                // again for this host.
+                res.setHeader("strict-transport-security", "max-age=31536000; includeSubDomains");
+            }
+            // Security headers on every response, including the 403. These are set
+            // before routing so no branch can forget them.
+            //
+            // default-src 'self' plus script-src 'self' is the load-bearing one: the
+            // portal renders text the buyer's agent chose (its request path and body),
+            // so if an escaping bug ever let markup through, CSP still stops it from
+            // running or phoning home. Escaping is the fix; CSP is the net under it.
+            // frame-ancestors stops another site framing the Approve button, and
+            // no-referrer keeps the portal key out of any third-party Referer header.
+            res.setHeader("content-security-policy", "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; " +
+                "connect-src 'self'; frame-ancestors 'none'; base-uri 'none'; form-action 'self'");
+            res.setHeader("x-frame-options", "DENY");
+            res.setHeader("referrer-policy", "no-referrer");
+            res.setHeader("x-content-type-options", "nosniff");
+            res.setHeader("cache-control", "no-store");
+            // Liveness probe, before the portal-key gate: it proves the desk and its
+            // TLS path are up without revealing anything. No data, safe to poll.
+            if (url.pathname === "/healthz") {
+                res.writeHead(200, { "content-type": "text/plain; charset=utf-8", "cache-control": "no-store" });
+                res.end("ok");
+                return;
+            }
             // A public demo link must not be an open approval button. If a portalKey
             // is configured, every route needs it, or the desk answers 403.
-            if (this.cfg.portalKey && !same(url.searchParams.get("k") ?? "", this.cfg.portalKey)) {
+            //
+            // The key may arrive in the URL (the link the human opened) or in a
+            // cookie the desk set when that link was first validated. The cookie is
+            // what makes the approver app work: its <script src="xdr.js"> cannot
+            // inherit ?k= from the page URL, so without a cookie the app 403s on its
+            // own code and shows a blank form. HttpOnly + SameSite=Strict + Secure
+            // keeps it out of the DOM and off any cross-site request.
+            const presented = url.searchParams.get("k") ?? cookieOf(req, "pd_portal");
+            if (this.cfg.portalKey && !same(presented ?? "", this.cfg.portalKey)) {
                 res.writeHead(403, { "content-type": "text/plain; charset=utf-8" });
                 res.end("403 — this approval link was never issued or has been rotated.");
                 return;
             }
+            if (this.cfg.portalKey && url.searchParams.get("k") !== null) {
+                res.setHeader("set-cookie", `pd_portal=${this.cfg.portalKey}; Path=/; HttpOnly; SameSite=Strict; ` +
+                    `Secure; Max-Age=${12 * 3600}`);
+            }
             const qs = url.search;
             const send = (code, obj) => {
                 res.writeHead(code, { "content-type": "application/json" });
@@ -251,6 +341,18 @@ export class ApprovalDesk {
                     res.end(portalPage(this.list(), this.cfg.vault.address, this.cfg.vault.network, qs));
                     return;
                 }
+                // The portal's own css and js. Served as separate files, never inline,
+                // so script-src 'self' and style-src 'self' actually hold on the
+                // approval page and an injected string can't become executable script.
+                if (url.pathname === "/portal.js" || url.pathname === "/portal.css") {
+                    const file = url.pathname.slice(1);
+                    res.writeHead(200, {
+                        "content-type": (file.endsWith(".css") ? "text/css" : "text/javascript") + "; charset=utf-8",
+                        "x-content-type-options": "nosniff",
+                    });
+                    res.end(readPortalFile(file));
+                    return;
+                }
                 if (url.pathname === "/list")
                     return send(200, this.list());
                 // The approver app. Served from the desk so the human opens one link on
@@ -332,7 +434,10 @@ export class ApprovalDesk {
             }
         });
         this.server = srv;
-        return new Promise((r) => srv.listen(port, () => r()));
+        // Loopback only. The public path is the Cloudflare tunnel, which connects
+        // back to 127.0.0.1; binding to 0.0.0.0 would expose a plain-HTTP desk to
+        // the LAN and defeat both the TLS and the Host pin above.
+        return new Promise((r) => srv.listen(port, "127.0.0.1", () => r()));
     }
     /** Stop serving. Without this the process never exits. */
     close() {

package/dist/gateway.d.ts

@@ -30,6 +30,8 @@ export type GatewayConfig = {
     deskPort?: number;
     /** gate the approval portal behind a single unguessable link */
     portalKey?: string;
+    /** hostname the desk is publicly served on; pins the Host header. See DeskConfig. */
+    publicHost?: string;
 };
 export type PaymentProof = {
     /** pre-authorised envelope, base64 XDR, as issued by the vault */

package/dist/gateway.js

@@ -36,6 +36,7 @@ export class Gateway {
             port: cfg.deskPort ?? 4022,
             portalKey: cfg.portalKey,
             split: cfg.split,
+            publicHost: cfg.publicHost,
         });
     }
     /** Mandates the vault currently holds, so the gateway can hand them out. */

package/dist/portal.d.ts

@@ -1,4 +1,9 @@
 import type { IncomingMessage, ServerResponse } from "node:http";
 import type { DeskRecord } from "./desk.ts";
+/**
+ * HTML escaping. Not optional: the request path and body are attacker-chosen
+ * text that lands inside the one page that can authorise a payment.
+ */
+export declare function esc(v: unknown): string;
 export declare function portalPage(records: DeskRecord[], vault: string, network: string, qs?: string): string;
 export declare function servePortal(req: IncomingMessage, res: ServerResponse, html: string): void;

package/dist/portal.js

@@ -1,3 +1,15 @@
+/**
+ * HTML escaping. Not optional: the request path and body are attacker-chosen
+ * text that lands inside the one page that can authorise a payment.
+ */
+export function esc(v) {
+    return String(v ?? "")
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
 export function portalPage(records, vault, network, qs = "") {
     const rows = records.length
         ? records.map((r) => render(r, qs)).join("\n")
@@ -5,72 +17,40 @@ export function portalPage(records, vault, network, qs = "") {
     return `<!doctype html><html><head>
 <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Paydlux — approvals</title>
-<style>
- :root{--ink:#0d0f0e;--line:#262a28;--text:#eceae4;--muted:#9aa39d;--gold:#e8b04b;--green:#5fbf8b}
- *{box-sizing:border-box}
- body{margin:0;background:var(--ink);color:var(--text);font:16px/1.5 -apple-system,"Avenir Next",system-ui,sans-serif;padding:24px}
- h1{font-size:20px;margin:0 0 4px}
- .sub{color:var(--muted);font-size:13px;margin-bottom:24px;word-break:break-all}
- table{width:100%;border-collapse:collapse}
- th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:8px;border-bottom:1px solid var(--line)}
- td{padding:14px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
- .amt{font-weight:700;color:var(--gold);white-space:nowrap}
- .uri{font-family:ui-monospace,monospace;font-size:13px}
- .body{color:var(--muted);font-size:12px;max-width:340px;word-break:break-word}
- button{border:0;border-radius:10px;padding:12px 18px;font-size:15px;font-weight:600;cursor:pointer;display:block;width:100%;margin:4px 0}
- .yes{background:var(--green);color:#08110c}
- .no{background:transparent;color:var(--muted);border:1px solid var(--line)}
- .st{font-size:12px;text-transform:uppercase;letter-spacing:.06em}
- .settled{color:var(--green)} .denied,.failed{color:#e07a6b} .pending{color:var(--gold)}
- .tx{font-family:ui-monospace,monospace;font-size:11px;color:var(--muted);word-break:break-all}
- .qr{font-size:10px;white-space:pre-wrap;background:#141715;padding:8px;border-radius:8px;color:var(--text)}
- details summary{cursor:pointer}
- .phlink{color:var(--gold);text-decoration:underline;font-size:12px}
- .foot{margin-top:28px;color:var(--muted);font-size:12px}
- @media(max-width:640px){.body{max-width:180px}}
-</style></head><body>
+<link rel="stylesheet" href="portal.css"></head><body>
 <h1>Paydlux — approvals</h1>
-<div class="sub">vault ${vault} · ${network} · refreshed <span id="t">now</span></div>
+<div class="sub">vault ${esc(vault)} · ${esc(network)} · refreshed <span id="t">now</span></div>
 <table><thead><tr><th>when</th><th>what</th><th>cost</th><th>status</th><th></th></tr></thead>
 <tbody>${rows}</tbody></table>
 <div class="foot">Approving signs a Stellar transaction with your key. The vault needs two signatures, so this device alone cannot release funds.</div>
-<script>
- const Q=${JSON.stringify(qs)};
- async function act(kind,id){await fetch('/'+kind+'/'+id+Q,{method:'POST'});load()}
- async function load(){const r=await fetch('/list'+Q);const d=await r.json();
-   document.querySelector('tbody').innerHTML=d.map(row).join('')||'<tr><td colspan="5" class="empty">nothing waiting</td></tr>';
-   document.getElementById('t').textContent=new Date().toLocaleTimeString()}
- function row(x){const st='<span class="st '+x.status+'">'+x.status+'</span>'+(x.tx?'<div class="tx">'+x.tx+'</div>':'')+(x.reason?'<div class="tx">'+x.reason+'</div>':'');
-  const btns=x.status==='pending'?'<button class="yes" onclick="act(\'approve\',\''+x.id+'\')">Approve</button><button class="no" onclick="act(\'deny\',\''+x.id+'\')">Deny</button>':'';
-  const ph=x.status==='awaiting_phone'?'<div class="tx">awaiting your phone</div>':'';
-  return '<tr><td>'+new Date(x.at).toLocaleTimeString()+'</td><td><div class="uri">'+x.uri+'</div><div class="body">'+(x.body||'')+'</div></td><td class="amt">'+x.price+'</td><td>'+st+ph+'</td><td style="min-width:130px">'+btns+'</td></tr>'}
- setInterval(load,3000);
-</script></body></html>`;
+<script src="portal.js"></script></body></html>`;
 }
 function render(r, qs = "") {
     // qs is the portal key query string ("?k=..."). The approver link has to carry
     // it, because the desk answers 403 for anything without it.
     const link = `phone/?id=${encodeURIComponent(r.id)}${qs.replace("?", "&")}`;
+    // The id is desk-generated (pay_NNNN) but it still lands in an attribute, so it
+    // is escaped like everything else. Buttons are wired by portal.js through
+    // data-*, not an inline onclick, so the page needs no 'unsafe-inline'.
     const btns = r.status === "pending"
-        ? `<button class="yes" onclick="act('approve','${r.id}')">Approve</button>
-       <button class="no" onclick="act('deny','${r.id}')">Deny</button>`
+        ? `<button class="yes" data-act="approve" data-id="${esc(r.id)}">Approve</button>
+       <button class="no" data-act="deny" data-id="${esc(r.id)}">Deny</button>`
         : "";
     // Split mode: the desk has no approver key, so approving hands the payment to
-    // a phone. Show the human exactly what the phone will be asked to sign.
-    // Split mode: the desk has no approver key, so approving hands the payment to
     // a phone. Show the human exactly what the phone will be asked to sign, and
     // give the approver app a link so nobody pastes base64 on a small screen.
     const phone = r.status === "awaiting_phone" && r.challenge
-        ? `<div class="tx">awaiting your phone · ${r.challenge.summary.amount} ${r.challenge.summary.token} to ${r.challenge.summary.payee.slice(0, 12)}…</div>
-       <div class="tx"><a class="phlink" href="${link}">open on your phone to sign</a></div>
-       <details class="tx"><summary>approval payload for the phone</summary><pre class="qr">${r.qr}</pre></details>`
+        ? `<div class="tx">awaiting your phone · ${esc(r.challenge.summary.amount)} ${esc(r.challenge.summary.token)} to ${esc(r.challenge.summary.payee.slice(0, 12))}…</div>
+       <div class="tx"><a class="phlink" href="${esc(link)}">open on your phone to sign</a></div>
+       <details class="tx"><summary>approval payload for the phone</summary><pre class="qr">${esc(r.qr)}</pre></details>`
         : "";
-    const meta = [phone, r.tx && `<div class="tx">${r.tx}</div>`, r.reason && `<div class="tx">${r.reason}</div>`].filter(Boolean).join("");
+    const meta = [phone, r.tx && `<div class="tx">${esc(r.tx)}</div>`,
+        r.reason && `<div class="tx">${esc(r.reason)}</div>`].filter(Boolean).join("");
     return `<tr>
-  <td>${new Date(r.at).toLocaleTimeString()}</td>
-  <td><div class="uri">${r.uri}</div><div class="body">${r.body || ""}</div></td>
-  <td class="amt">${r.price}</td>
-  <td><span class="st ${r.status}">${r.status}</span>${meta}</td>
+  <td>${esc(new Date(r.at).toLocaleTimeString())}</td>
+  <td><div class="uri">${esc(r.uri)}</div><div class="body">${esc(r.body)}</div></td>
+  <td class="amt">${esc(r.price)}</td>
+  <td><span class="st ${esc(r.status)}">${esc(r.status)}</span>${meta}</td>
   <td style="min-width:130px">${btns}</td></tr>`;
 }
 export function servePortal(req, res, html) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paydlux/agent",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Payments for AI agents that a human approves. Spending mandates enforced on the Stellar ledger: 2-of-2 vault, pre-authorised transaction envelopes, HTTP 402, USDC.",
   "type": "module",
   "main": "./dist/index.js",
@@ -16,6 +16,8 @@
     "phone-app/index.html",
     "phone-app/app.js",
     "phone-app/xdr.js",
+    "portal-app/portal.js",
+    "portal-app/portal.css",
     "README.md",
     "LICENSE"
   ],
@@ -29,8 +31,11 @@
     "demo:stellar": "tsx stellar/demo.ts",
     "setup:stellar": "tsx stellar/onboard.ts",
     "story:stellar": "tsx stellar/story.ts",
+    "story:tls": "tsx stellar/story.ts --tls --split",
+    "test:tls": "tsx stellar/tls-check.ts",
     "test": "cd contracts && forge test",
     "test:stellar": "tsx stellar/demo.ts",
+    "test:portal": "tsx stellar/xss-check.ts",
     "test:phone": "tsx stellar/phone-check.ts && tsx stellar/desk-split-check.ts && tsx stellar/e2e-phone.ts && tsx phone-app/xdr-check.ts && tsx phone-app/app-check.ts && tsx phone-app/desk-app-check.ts",
     "typecheck": "tsc --noEmit"
   },

package/portal-app/portal.css

@@ -0,0 +1,22 @@
+:root{--ink:#0d0f0e;--line:#262a28;--text:#eceae4;--muted:#9aa39d;--gold:#e8b04b;--green:#5fbf8b}
+*{box-sizing:border-box}
+body{margin:0;background:var(--ink);color:var(--text);font:16px/1.5 -apple-system,"Avenir Next",system-ui,sans-serif;padding:24px}
+h1{font-size:20px;margin:0 0 4px}
+.sub{color:var(--muted);font-size:13px;margin-bottom:24px;word-break:break-all}
+table{width:100%;border-collapse:collapse}
+th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:8px;border-bottom:1px solid var(--line)}
+td{padding:14px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
+.amt{font-weight:700;color:var(--gold);white-space:nowrap}
+.uri{font-family:ui-monospace,monospace;font-size:13px;word-break:break-all}
+.body{color:var(--muted);font-size:12px;max-width:340px;word-break:break-word}
+button{border:0;border-radius:10px;padding:12px 18px;font-size:15px;font-weight:600;cursor:pointer;display:block;width:100%;margin:4px 0}
+.yes{background:var(--green);color:#08110c}
+.no{background:transparent;color:var(--muted);border:1px solid var(--line)}
+.st{font-size:12px;text-transform:uppercase;letter-spacing:.06em}
+.settled{color:var(--green)} .denied,.failed{color:#e07a6b} .pending{color:var(--gold)}
+.tx{font-family:ui-monospace,monospace;font-size:11px;color:var(--muted);word-break:break-all}
+.qr{font-size:10px;white-space:pre-wrap;background:#141715;padding:8px;border-radius:8px;color:var(--text)}
+details summary{cursor:pointer}
+.phlink{color:var(--gold);text-decoration:underline;font-size:12px}
+.foot{margin-top:28px;color:var(--muted);font-size:12px}
+@media(max-width:640px){.body{max-width:180px}}

package/portal-app/portal.js

@@ -0,0 +1,72 @@
+// The portal's client half. Served by the desk at /portal.js.
+//
+// It polls /list and re-renders the table. The desk already escapes the rows it
+// sends, but this renderer builds HTML from JSON, so it escapes again: /list is
+// the same agent-controlled text (request path and body) arriving through a
+// second path, and one unescaped field here is enough to run script on the page
+// that authorises payments.
+//
+// No inline handlers: buttons carry data-act/data-id and are wired here, so the
+// page's Content-Security-Policy can forbid inline script entirely.
+//
+// This must render what the server-side render() in stellar/portal.ts renders.
+// The page loads with server-rendered rows, then this replaces them every few
+// seconds — anything missing here disappears from the human's screen a moment
+// after they act, which is exactly what happened to the phone link.
+const Q = new URLSearchParams(location.search).toString();
+const qs = Q ? "?" + Q : "";
+
+const esc = (v) => String(v ?? "")
+  .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+  .replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+
+const row = (x) => {
+  const st = `<span class="st ${esc(x.status)}">${esc(x.status)}</span>`;
+  // Split mode: the desk has no approver key, so approving handed the payment to
+  // a phone. Keep the link and the amount visible after the poll, or the human
+  // presses Approve and then loses the thing they were told to do next.
+  const phone = x.status === "awaiting_phone" && x.challenge
+    ? `<div class="tx">awaiting your phone · ${esc(x.challenge.summary.amount)} ` +
+      `${esc(x.challenge.summary.token)} to ${esc(x.challenge.summary.payee.slice(0, 12))}…</div>` +
+      `<div class="tx"><a class="phlink" href="phone/?id=${encodeURIComponent(x.id)}${qs.replace("?", "&")}">` +
+      `open on your phone to sign</a></div>` +
+      `<details class="tx"><summary>approval payload for the phone</summary>` +
+      `<pre class="qr">${esc(x.qr)}</pre></details>`
+    : x.status === "awaiting_phone" ? `<div class="tx">awaiting your phone</div>` : "";
+  const meta = [
+    phone,
+    x.tx && `<div class="tx">${esc(x.tx)}</div>`,
+    x.reason && `<div class="tx">${esc(x.reason)}</div>`,
+  ].filter(Boolean).join("");
+  const btns = x.status === "pending"
+    ? `<button class="yes" data-act="approve" data-id="${esc(x.id)}">Approve</button>` +
+      `<button class="no" data-act="deny" data-id="${esc(x.id)}">Deny</button>`
+    : "";
+  return `<tr><td>${esc(new Date(x.at).toLocaleTimeString())}</td>` +
+    `<td><div class="uri">${esc(x.uri)}</div><div class="body">${esc(x.body)}</div></td>` +
+    `<td class="amt">${esc(x.price)}</td><td>${st}${meta}</td>` +
+    `<td style="min-width:130px">${btns}</td></tr>`;
+};
+
+async function act(kind, id) {
+  await fetch("/" + kind + "/" + encodeURIComponent(id) + qs, { method: "POST" });
+  load();
+}
+
+async function load() {
+  const r = await fetch("/list" + qs);
+  if (!r.ok) return;
+  const d = await r.json();
+  document.querySelector("tbody").innerHTML =
+    d.map(row).join("") || '<tr><td colspan="5" class="empty">nothing waiting</td></tr>';
+  document.getElementById("t").textContent = new Date().toLocaleTimeString();
+}
+
+// One delegated listener instead of a handler per button, so nothing about a
+// row ever needs to be executable markup.
+document.addEventListener("click", (e) => {
+  const b = e.target.closest("button[data-act]");
+  if (b) act(b.dataset.act, b.dataset.id);
+});
+
+setInterval(load, 3000);