@paydlux/agent 0.1.5 → 0.1.7

package/README.md

@@ -114,6 +114,62 @@ npm install @paydlux/agent
 import { StellarVault, Gateway, PaydluxAgent } from "@paydlux/agent";
 ```
 
+### Seller setup, in full (the four things that bite)
+
+A stranger following only the previous version of this README hit four walls.
+All four are in the code; here they are up front.
+
+```ts
+import { Keypair } from "@stellar/stellar-sdk";
+import { StellarVault, Gateway } from "@paydlux/agent";
+
+const issuer = Keypair.random(), principal = Keypair.random();
+const approver = Keypair.random(), agent = Keypair.random();
+const payee = Keypair.random();
+
+await StellarVault.fundTestnet(issuer);          // testnet only
+await StellarVault.fundTestnet(payee);
+const vault = await StellarVault.create({
+  network: "testnet", issuer, principal, approver, agent, tokenCode: "USDC",
+});
+await vault.trustToken(payee.publicKey(), "1000", payee);   // payee must trust the token
+await vault.deposit("50", issuer);                          // vault must hold the money
+
+const gw = new Gateway({
+  vault, network: "testnet", payee: payee.publicKey(),
+  routes: [{ uri: "/api/data", price: "1.00", mode: "approval" }],
+  principal: principal.secret(),
+  approver: approver.secret(),      // omit this + set `split: true` to approve on a phone
+  agentKeys: [agent.publicKey()],   // (1) without it, no agent can park a payment
+  deskPort: 4022,
+  portalKey: newPortalKey(),        // (2) required before the desk is public
+  deskUrl: "https://desk.example.com",  // (3) what the buyer is told, not loopback
+});
+
+await gw.listen(8080, (uri) => myPayload(uri));
+await gw.desk.listen(4022);         // (4) gw.listen() does NOT start the desk
+```
+
+1. **`agentKeys`** — an intent is only honoured if signed by a listed key. Empty
+   list means nothing can request approval, and the failure looks like a plain
+   402 with no explanation.
+2. **`portalKey`** — the approval page has no login. The key *is* the
+   authentication, so it is a 22-character secret in the link. A desk configured
+   with a public hostname refuses to start without one.
+3. **`deskUrl`** — the 202 the buyer gets says where a human approves. It
+   defaults to `http://127.0.0.1:4022`, which is only right when buyer and
+   seller share a machine.
+4. **`gw.desk.listen(port)`** — the gateway and the desk are two HTTP servers.
+   Starting the gateway alone leaves the queue unreachable.
+
+The buyer side needs the agent **secret**, not the vault's signer list:
+
+```ts
+const agent = new PaydluxAgent({ agentKey: process.env.AGENT_KEY! });
+const res = await agent.get("https://seller.example.com/api/data", { mandate });
+if (!res.ok && res.handle) console.log("parked, awaiting a human at", res.desk);
+```
+
 `npm run build` produces `dist/`. The package depends only on
 `@stellar/stellar-sdk` — no transitive `toml`, so `npm audit` is clean.
 

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"); }
@@ -280,6 +289,21 @@ export class ApprovalDesk {
                 // 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") {
@@ -317,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
@@ -381,6 +417,32 @@ export class ApprovalDesk {
                 }
                 const m = url.pathname.match(/^\/(approve|deny|signed)\/([\w-]+)$/);
                 if (m && req.method === "POST") {
+                    // These routes move money, so they must not be reachable from another
+                    // page. A cross-origin fetch POST is a CORS *simple request*: no
+                    // preflight, so the attacker's page never sees the reply but the
+                    // approval still happens. Verified end to end: a page on another port
+                    // settled a parked payment and paid the seller. Browsers always send
+                    // Origin on POST and Sec-Fetch-Site on every request, so checking both
+                    // closes that path while leaving local automation (curl, tests, the
+                    // phone app on its own origin) alone.
+                    const origin = String(req.headers.origin ?? "");
+                    if (origin) {
+                        const here = String(req.headers.host ?? "").toLowerCase();
+                        let oh;
+                        try {
+                            oh = new URL(origin).host.toLowerCase();
+                        }
+                        catch {
+                            oh = "";
+                        }
+                        if (oh !== here) {
+                            return send(403, { error: "cross_origin", reason: `this desk only accepts actions from itself, not from ${origin}` });
+                        }
+                    }
+                    const site = String(req.headers["sec-fetch-site"] ?? "").toLowerCase();
+                    if (site && site !== "same-origin" && site !== "none") {
+                        return send(403, { error: "cross_origin", reason: `this desk only accepts same-site actions (got ${site})` });
+                    }
                     if (m[1] === "signed") {
                         const body = await readBody(req);
                         const { signedXdr } = JSON.parse(body || "{}");

package/dist/gateway.d.ts

@@ -32,6 +32,19 @@ export type GatewayConfig = {
     portalKey?: string;
     /** hostname the desk is publicly served on; pins the Host header. See DeskConfig. */
     publicHost?: string;
+    /**
+     * Agent public keys allowed to park a payment for approval. An intent is only
+     * honoured if it is signed by one of these, so an unlisted key gets a plain
+     * 402 instead of a queue entry. Leave empty and nothing can request approval.
+     */
+    agentKeys?: string[];
+    /**
+     * Where a human approves, as the BUYER should see it. Set this to the public
+     * desk URL (e.g. "https://desk.paydlux.com") when the desk is reachable there;
+     * it is returned in the 202 so the buyer knows where to go. Defaults to the
+     * loopback address, which is only useful on one machine.
+     */
+    deskUrl?: string;
 };
 export type PaymentProof = {
     /** pre-authorised envelope, base64 XDR, as issued by the vault */

package/dist/gateway.js

@@ -26,6 +26,7 @@ export class Gateway {
     cfg;
     constructor(cfg) {
         this.cfg = cfg;
+        this.agentKeys = cfg.agentKeys ?? [];
         for (const r of cfg.routes)
             this.routes.set(r.uri, r);
         this.desk = new ApprovalDesk({
@@ -79,7 +80,7 @@ export class Gateway {
         return false;
     }
     /** Keys allowed to place approval requests. */
-    agentKeys = [];
+    agentKeys;
     requirements(uri) {
         const r = this.routes.get(uri);
         return {
@@ -191,7 +192,12 @@ export class Gateway {
                 }
                 const handle = this.desk.enqueue(uri, r.price, body, getContent(uri));
                 res.writeHead(202, { "content-type": "application/json", "x-payment-hold": handle });
-                res.end(JSON.stringify({ status: "awaiting_approval", handle, desk: `http://127.0.0.1:${this.cfg.deskPort ?? 4022}` }));
+                // The buyer needs to know where a human approves. Loopback is only
+                // right when both sides are on one machine; anything real sets deskUrl
+                // (or publicHost) so this points at the https desk.
+                const deskUrl = this.cfg.deskUrl
+                    ?? (this.cfg.publicHost ? `https://${this.cfg.publicHost}` : `http://127.0.0.1:${this.cfg.deskPort ?? 4022}`);
+                res.end(JSON.stringify({ status: "awaiting_approval", handle, desk: deskUrl }));
                 return;
             }
             try {

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.5",
+  "version": "0.1.7",
   "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"
   ],
@@ -33,6 +35,7 @@
     "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);