@paydlux/agent 0.1.9 → 0.1.10

package/README.md

@@ -84,11 +84,17 @@ one key. So the approval half is split off:
 npx tsx stellar/phone-check.ts       # 17 checks: seller alone cannot pay; phone alone cannot pay
 npx tsx stellar/e2e-phone.ts         # desk with no approver key still settles
 npx tsx phone-app/xdr-check.ts       # 32 checks: the phone's own decoder is byte-exact with the SDK
-npx tsx phone-app/desk-app-check.ts  # 28 checks: the real app over real HTTP, end to end
+npx tsx phone-app/desk-app-check.ts  # 57 checks: the real app over real HTTP, end to end
 ```
 
 The seller builds the payment and signs it with their own half. The human opens
-one link — `/phone/?id=...` — and the approver app in `phone-app/` shows them the
+one link — `/phone/?k=...` — and the approver app in `phone-app/` shows them the
+`https://desk.paydlux.com/phone/` link opens an installable app: it has a manifest
+and icons, so a phone can put it on the home screen and it runs full-screen. The
+shell (html, js, icons) is public because it holds no secret and no payment data
+and must load before the key does; every route that returns data or moves money
+(`/queue`, `/challenge`, `/approve`, `/signed`, `/deny`) still answers 403 without
+the portal key.
 amount, the token, the payee and the deadline, then signs on the device.
 
 The app is three static files with no dependencies and no build step. It carries

package/dist/cli.js

@@ -407,6 +407,49 @@ removed from ${path}. this machine can no longer approve anything by itself.
 sell with:  paydlux sell --split --tls
 `);
 }
+// --------------------------------------------------------------------- withdraw
+/**
+ * Take your money back out of the vault. This is a normal 2-of-2 payment:
+ * principal (this laptop) + approver (your phone, or the laptop until you run
+ * `approver --forget`). The agent key cannot do this — it has no path to an
+ * arbitrary destination, which is the whole point of the vault.
+ *
+ * The XLM the vault pays in ledger rent stays locked while the account exists.
+ * Closing the vault (not done here) returns that too.
+ */
+async function withdraw() {
+    const { data } = loadVault();
+    const to = arg("to");
+    const amount = arg("amount");
+    const all = flag("all");
+    if (!to)
+        bad(`where should it go?\n\n  paydlux withdraw --to G… [--all | --amount 8]\n\n  --to can be any Stellar account, including your Binance deposit address.`);
+    const vault = await StellarVault.load(data.vault, data.token.code, data.token.issuer, {
+        principal: pub(data.keys.principal),
+        approver: data.keys.approver ? pub(data.keys.approver) : undefined,
+        agent: pub(data.keys.agent),
+    }, (data.network ?? "testnet"));
+    if (data.token.code === "USDC")
+        vault.useUsdc();
+    const bal = await vault.balance();
+    const want = all ? bal : amount;
+    if (!want)
+        bad(`say how much: --all, or --amount 8 (vault holds ${bal} ${data.token.code})`);
+    if (Number(want) > Number(bal))
+        bad(`the vault holds ${bal} ${data.token.code}, not ${want}.`);
+    const keys = data.keys ?? {};
+    const principal = Keypair.fromSecret(keys.principal);
+    const approver = keys.approver ? Keypair.fromSecret(keys.approver) : null;
+    if (!approver) {
+        console.log(`this laptop holds only one of the two keys, so the withdrawal needs your phone.
+  open:  ${flag("tls") ? `https://${PUBLIC_HOST}` : "http://127.0.0.1:4022"}/?k=${data.desk?.portalKey ?? "…"}`);
+        bad("then run this again — approvals from the phone land automatically.");
+    }
+    console.log(`sending ${want} ${data.token.code} from the vault to ${to} …`);
+    const res = await vault.release(to, String(want), principal, approver, "paydlux withdraw");
+    console.log(`done. tx ${res?.hash}`);
+    console.log(`vault now holds ${await vault.balance()} ${data.token.code}`);
+}
 // ------------------------------------------------------------------------- main
 const HELP = `paydlux — get paid by AI agents, with a human in the loop.
 
@@ -419,6 +462,9 @@ const HELP = `paydlux — get paid by AI agents, with a human in the loop.
   paydlux approver [--forget]
       print the human half of the vault, then optionally delete it from this
       machine so only the phone can approve.
+  paydlux withdraw --to G… [--all | --amount N]
+      take your money back out of the vault. Needs both human keys; the agent
+      key can never do this.
 
 one file holds it all: ./paydlux-vault.json (0600, never commit it)
 `;
@@ -436,6 +482,8 @@ export async function main() {
         return status();
     if (cmd === "approver")
         return approver();
+    if (cmd === "withdraw")
+        return withdraw();
     bad(`unknown command "${cmd}".\n\n${HELP}`);
 }
 // Run only when this file is the entry point, so importing it in a test is safe.

package/dist/desk.d.ts

@@ -85,7 +85,23 @@ export declare class ApprovalDesk {
      * ledger rejects it if the signature is not over this exact transaction.
      */
     complete(id: string, signedXdr: string): Promise<DeskRecord>;
+    /**
+     * The human said no.
+     *
+     * `awaiting_phone` is a valid state to deny from. Opening the phone link
+     * builds the challenge on the spot (so a human needs one tap, not two), which
+     * means the first thing a person sees on their phone is already
+     * `awaiting_phone` — refusing to deny from that state left the Reject button
+     * dead, which was verified on live testnet. Denying is always allowed up to
+     * the point the transaction is submitted; after that it is too late.
+     */
     deny(id: string, reason?: string): DeskRecord;
+    /**
+     * What the phone app is allowed to see. Never the paid `content` — that is
+     * what the buyer has not paid for yet — and never the raw challenge XDR,
+     * which the app fetches per item so the desk can re-check the binding.
+     */
+    queue(): Record<string, unknown>[];
     /** Serve the pending list as JSON (the portal polls this). */
     api(handler: (req: IncomingMessage, res: ServerResponse) => void): (req: IncomingMessage, res: ServerResponse) => void;
     listen(port?: number): Promise<void>;

package/dist/desk.js

@@ -31,25 +31,34 @@ 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.
+ *
+ * PNGs are returned as bytes: reading an image as utf8 text replaces every
+ * invalid sequence with U+FFFD and ships a corrupt icon to the phone.
  */
 function readStatic(dir, name, label) {
-    const safe = name.replace(/[^a-z.]/g, "");
+    const safe = name.replace(/[^a-z0-9._-]/g, "");
     const hit = staticCache.get(dir + "/" + safe);
     if (hit)
         return hit;
     let text;
     try {
-        text = readFileSync(join(dir, safe), "utf8");
+        text = safe.endsWith(".png")
+            ? readFileSync(join(dir, safe))
+            : readFileSync(join(dir, safe), "utf8");
     }
     catch {
-        // A package install that shipped without the folder should say so instead of
-        // throwing out of the request handler.
-        throw new Error(label + " is missing from this install (expected " + join(dir, safe) + ")");
+        // A missing file is a 404, not a crash. Throwing here took the whole desk
+        // down over one bad URL: the request handler is not a place to raise.
+        return null;
     }
     staticCache.set(dir + "/" + safe, text);
     return text;
 }
 const readAppFile = (name) => readStatic(APP_DIR, name, "approver app");
+const notFound = (res) => {
+    res.writeHead(404, { "content-type": "text/plain; charset=utf-8" });
+    res.end("404");
+};
 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. */
@@ -258,16 +267,51 @@ export class ApprovalDesk {
         }
         return rec;
     }
+    /**
+     * The human said no.
+     *
+     * `awaiting_phone` is a valid state to deny from. Opening the phone link
+     * builds the challenge on the spot (so a human needs one tap, not two), which
+     * means the first thing a person sees on their phone is already
+     * `awaiting_phone` — refusing to deny from that state left the Reject button
+     * dead, which was verified on live testnet. Denying is always allowed up to
+     * the point the transaction is submitted; after that it is too late.
+     */
     deny(id, reason = "denied by the approver") {
         const rec = this.records.get(id);
         if (!rec)
             throw new Error("unknown handle " + id);
-        if (rec.status !== "pending")
-            throw new Error(`already ${rec.status}`);
+        if (rec.status === "settled")
+            throw new Error("already settled — the money has moved, it cannot be denied");
+        if (rec.status === "denied")
+            return rec; // idempotent: the app may retry
         rec.status = "denied";
         rec.reason = reason;
+        rec.challenge = undefined; // the phone's answer is now worthless
+        rec.signedXdr = undefined;
         return rec;
     }
+    /**
+     * What the phone app is allowed to see. Never the paid `content` — that is
+     * what the buyer has not paid for yet — and never the raw challenge XDR,
+     * which the app fetches per item so the desk can re-check the binding.
+     */
+    queue() {
+        return this.list().map((r) => ({
+            id: r.id,
+            at: r.at,
+            uri: r.uri,
+            price: r.price,
+            status: r.status,
+            reason: r.reason,
+            tx: r.tx,
+            /** what the buyer says it wants. Agent-controlled text: render as text. */
+            wants: (r.body ?? "").slice(0, 200),
+            token: this.cfg.vault.token.getCode(),
+            expiresAt: r.challenge?.summary.expiresAt,
+            hash: r.challenge?.hash,
+        }));
+    }
     /** Serve the pending list as JSON (the portal polls this). */
     api(handler) { return handler; }
     listen(port = this.cfg.port) {
@@ -329,6 +373,65 @@ export class ApprovalDesk {
                 res.end("ok");
                 return;
             }
+            // The approver app's static shell is served BEFORE the key gate, on
+            // purpose. It is index.html, app.js, xdr.js, the icons and the manifest:
+            // client code with no secret and no payment data in it, the same as the
+            // portal's own portal.js. Serving it unauthenticated is what lets a phone
+            // install it to a home screen from a plain URL, with the seller's key
+            // arriving separately in the link. Everything that carries data or moves
+            // money — /queue, /challenge, /list, /approve, /deny, /signed — stays
+            // behind the gate below.
+            //
+            // The app uses relative script srcs, so it must be served from a
+            // directory URL: /phone without the slash would resolve app.js to /app.js.
+            if (url.pathname === "/phone") {
+                res.writeHead(302, { location: "/phone/" + url.search });
+                res.end();
+                return;
+            }
+            if (url.pathname === "/phone/" || url.pathname === "/phone/index.html") {
+                res.writeHead(200, {
+                    "content-type": "text/html; charset=utf-8",
+                    // The approver key goes in IndexedDB behind a non-extractable
+                    // CryptoKey; an injected script is the realistic threat, so lock the
+                    // origin. No inline script on the page: app.js and xdr.js are
+                    // separate files, so script-src 'self' actually holds. connect-src
+                    // 'self' is what stops the app talking anywhere but the desk that
+                    // served it.
+                    "content-security-policy": "default-src 'none'; script-src 'self'; style-src 'unsafe-inline'; " +
+                        "img-src 'self' data:; connect-src 'self'; base-uri 'none'; " +
+                        "form-action 'none'; frame-ancestors 'none'",
+                    "referrer-policy": "no-referrer",
+                    "x-content-type-options": "nosniff",
+                    "cache-control": "no-store",
+                });
+                const page = readAppFile("index.html");
+                if (page === null)
+                    return notFound(res);
+                res.end(page);
+                return;
+            }
+            if (url.pathname.startsWith("/phone/")) {
+                const file = url.pathname.slice("/phone/".length);
+                // Icons and the manifest are part of installing the app to a home
+                // screen, so they are served alongside the code. Names are still
+                // stripped to a safe set before they touch a path.
+                if (!/^[a-z0-9_-]+\.(js|png|webmanifest)$/.test(file))
+                    return notFound(res);
+                const type = file.endsWith(".png") ? "image/png"
+                    : file.endsWith(".webmanifest") ? "application/manifest+json"
+                        : "text/javascript";
+                const body = readAppFile(file);
+                if (body === null)
+                    return notFound(res);
+                res.writeHead(200, {
+                    "content-type": type + (file.endsWith(".png") ? "" : "; charset=utf-8"),
+                    "cache-control": "no-store",
+                    "x-content-type-options": "nosniff",
+                });
+                res.end(body);
+                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.
             //
@@ -364,56 +467,22 @@ export class ApprovalDesk {
                 // 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);
+                    const body = readPortalFile(file);
+                    if (body === null)
+                        return notFound(res);
                     res.writeHead(200, {
                         "content-type": (file.endsWith(".css") ? "text/css" : "text/javascript") + "; charset=utf-8",
                         "x-content-type-options": "nosniff",
                     });
-                    res.end(readPortalFile(file));
+                    res.end(body);
                     return;
                 }
                 if (url.pathname === "/list")
                     return send(200, this.list());
-                // The approver app. Served from the desk so the human opens one link on
-                // their phone instead of pasting XDR around. The app itself makes no
-                // requests after loading, and the portalKey gate above already covers
-                // these paths: without the key, nothing here is reachable.
-                // The app uses relative script srcs, so it must be served from a
-                // directory URL. /phone without the slash would resolve app.js to
-                // /app.js, so send it to the canonical path with the key intact.
-                if (url.pathname === "/phone") {
-                    res.writeHead(302, { location: "/phone/" + url.search });
-                    res.end();
-                    return;
-                }
-                if (url.pathname === "/phone/" || url.pathname === "/phone/index.html") {
-                    res.writeHead(200, {
-                        "content-type": "text/html; charset=utf-8",
-                        // The key lives in IndexedDB behind a non-extractable CryptoKey;
-                        // an injected script is the realistic threat, so lock the origin.
-                        // No inline script on the page: app.js and xdr.js are separate
-                        // files, so script-src 'self' actually holds. connect-src 'self' is
-                        // what stops the app talking anywhere but the desk that served it.
-                        "content-security-policy": "default-src 'none'; script-src 'self'; style-src 'unsafe-inline'; " +
-                            "img-src 'self' data:; connect-src 'self'; base-uri 'none'; " +
-                            "form-action 'none'; frame-ancestors 'none'",
-                        "referrer-policy": "no-referrer",
-                        "x-content-type-options": "nosniff",
-                    });
-                    res.end(readAppFile("index.html"));
-                    return;
-                }
-                if (url.pathname.startsWith("/phone/")) {
-                    const file = url.pathname.slice("/phone/".length);
-                    if (!/^[a-z]+\.(js|css)$/.test(file))
-                        return send(404, { error: "not found" });
-                    res.writeHead(200, {
-                        "content-type": (file.endsWith(".css") ? "text/css" : "text/javascript") + "; charset=utf-8",
-                        "cache-control": "no-store",
-                        "x-content-type-options": "nosniff",
-                    });
-                    res.end(readAppFile(file));
-                    return;
-                }
+                // The approver app's list view. Key-gated like everything else, and it
+                // carries no paid content and no challenge XDR.
+                if (url.pathname === "/queue")
+                    return send(200, this.queue());
                 // The app fetches the pending transaction by handle rather than asking
                 // the human to paste 400 characters of base64 on a phone.
                 const ch = url.pathname.match(/^\/challenge\/([\w-]+)$/);
@@ -431,6 +500,11 @@ export class ApprovalDesk {
                     return send(200, {
                         id: rec.id, network: rec.challenge.network,
                         hash: rec.challenge.hash, xdr: rec.challenge.xdr,
+                        // what the human is being asked to read. Agent-controlled text: the
+                        // app renders it as text, never as markup.
+                        wants: (rec.body ?? "").slice(0, 200),
+                        memo: rec.challenge.summary.memo ?? "",
+                        expiresAt: rec.challenge.summary.expiresAt,
                     });
                 }
                 const m = url.pathname.match(/^\/(approve|deny|signed)\/([\w-]+)$/);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paydlux/agent",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "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,10 @@
     "phone-app/index.html",
     "phone-app/app.js",
     "phone-app/xdr.js",
+    "phone-app/app.css",
+    "phone-app/manifest.webmanifest",
+    "phone-app/icon-192.png",
+    "phone-app/icon-512.png",
     "portal-app/portal.js",
     "portal-app/portal.css",
     "README.md",

package/phone-app/app.js

@@ -1,253 +1,432 @@
-// The approver app's own logic. Loaded by phone-app/index.html and served by the
-// desk at /phone/app.js. Kept in a separate file so the Content-Security-Policy
-// (script-src 'self') is real rather than defeated by an inline <script>.
-(function () {
-  "use strict";
-  const X = window.PaydluxXdr;
-  const $ = (id) => document.getElementById(id);
-  const DB = "paydlux-approver", STORE = "keys";
-
-  let signingKey = null;
-
-  function idb(mode, fn) {
-    return new Promise((res, rej) => {
-      const open = indexedDB.open(DB, 1);
-      open.onupgradeneeded = () => open.result.createObjectStore(STORE);
-      open.onerror = () => rej(open.error);
-      open.onsuccess = () => {
-        const tx = open.result.transaction(STORE, mode);
-        const req = fn(tx.objectStore(STORE));
-        req.onsuccess = () => res(req.result);
-        req.onerror = () => rej(req.error);
-      };
-    });
-  }
-  const saveKey = (k) => idb("readwrite", (s) => s.put(k, "approver"));
-  const loadKey = () => idb("readonly", (s) => s.get("approver"));
-  const dropKey = () => idb("readwrite", (s) => s.delete("approver"));
-
-  function base64urlToBytes(s) {
-    const bin = atob(s.replace(/-/g, "+").replace(/_/g, "/"));
-    const out = new Uint8Array(bin.length);
-    for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
-    return out;
-  }
+// Paydlux approver — the client half.
+//
+// Two jobs, and only two: hold the approver key on this device, and sign the
+// transaction hash for a payment a human has read.
+//
+// Rules this file is written to:
+//   * The seed is imported into a NON-extractable WebCrypto key and then
+//     dropped. What is persisted is the CryptoKey, not the seed. An injected
+//     script can call sign(); it cannot read the seed.
+//   * Signing is local. The bytes signed are the transaction hash the app
+//     computed itself from the XDR it fetched — never a hash the server handed
+//     over as an opaque "please sign this".
+//   * Every string that came from a buyer's agent (request path, request body,
+//     reason) is written with textContent. Never innerHTML. This page authorises
+//     payments; one unescaped field there is remote code execution on the
+//     approver's phone.
+//   * One origin: the desk that served this app. No other fetch is made.
+"use strict";
 
-  async function showReady(pub) {
-    $("who").textContent = X.encodeAccountEd25519(pub);
-    $("enrol").classList.add("hidden");
-    $("ready").classList.remove("hidden");
-  }
+const X = globalThis.PaydluxXdr;
+const $ = (id) => document.getElementById(id);
+const show = (id, on = true) => $(id).classList.toggle("hidden", !on);
+const set = (id, v) => { $(id).textContent = v == null || v === "" ? "\u2014" : String(v); };
+const err = (id, msg) => { $(id).textContent = msg || ""; };
 
-  // ------------------------------------------------------------- enrolment
-  $("enrolBtn").addEventListener("click", async () => {
-    $("enrolErr").textContent = "";
-    const seed = $("seed").value.trim();
-    try {
-      // Imported twice on purpose: once extractable purely to read the PUBLIC
-      // half back for display, once non-extractable as the key we keep.
-      const seedBytes = X.decodeSecretSeed(seed);
-      const pkcs8 = new Uint8Array(16 + 32);
-      pkcs8.set([0x30, 0x2e, 0x02, 0x01, 0x00, 0x30, 0x05, 0x06, 0x03, 0x2b, 0x65, 0x70, 0x04, 0x22, 0x04, 0x20], 0);
-      pkcs8.set(seedBytes, 16);
-
-      // "verify" is not a legal usage for a private Ed25519 key — the browser
-      // refuses the import outright. Sign only.
-      const tmp = await crypto.subtle.importKey("pkcs8", pkcs8, { name: "Ed25519" }, true, ["sign"]);
-      const jwk = await crypto.subtle.exportKey("jwk", tmp);
-      const pub = base64urlToBytes(jwk.x);
-
-      signingKey = await X.importSecretSeed(seed);      // non-extractable
-      seedBytes.fill(0); pkcs8.fill(0); $("seed").value = "";
-
-      // What is persisted is the non-extractable CryptoKey object, not the seed.
-      // Whatever backs IndexedDB can use that key to sign; no code path can read
-      // the seed out of it. Losing the database leaks nothing; stealing it leaks
-      // nothing either.
-      await saveKey({ key: signingKey, x: jwk.x });
-      await showReady(pub);
-    } catch (e) {
-      $("enrolErr").textContent = e.message;
-    }
+// ------------------------------------------------------------------ storage
+// The approver key goes in IndexedDB, not localStorage. localStorage can only
+// hold strings, which would force us to re-encode the key as something
+// readable; IndexedDB stores the CryptoKey object itself, and a
+// non-extractable key has no readable form to store.
+const DB = "paydlux-approver";
+const idb = () => new Promise((res, rej) => {
+  const open = indexedDB.open(DB, 1);
+  open.onupgradeneeded = () => open.result.createObjectStore("keys");
+  open.onsuccess = () => res(open.result);
+  open.onerror = () => rej(open.error);
+});
+async function idbPut(value) {
+  const db = await idb();
+  return new Promise((res, rej) => {
+    const t = db.transaction("keys", "readwrite");
+    t.objectStore("keys").put(value, "approver");
+    t.oncomplete = () => res();
+    t.onerror = () => rej(t.error);
+  });
+}
+async function idbGet() {
+  const db = await idb();
+  return new Promise((res, rej) => {
+    const t = db.transaction("keys", "readonly");
+    const g = t.objectStore("keys").get("approver");
+    g.onsuccess = () => res(g.result ?? null);
+    g.onerror = () => rej(g.error);
   });
+}
+async function idbDel() {
+  const db = await idb();
+  return new Promise((res, rej) => {
+    const t = db.transaction("keys", "readwrite");
+    t.objectStore("keys").delete("approver");
+    t.oncomplete = () => res();
+    t.onerror = () => rej(t.error);
+  });
+}
 
-  $("forget").addEventListener("click", async () => {
-    signingKey = null;
-    await dropKey();
-    location.reload();
+// The approval link carries the seller's portal key. It is the thing that makes
+// this app useful, so it is kept on the device after the seller opens it once.
+const LINK = "paydlux.link";
+const linkParams = () => {
+  const raw = localStorage.getItem(LINK) || "";
+  const u = new URL(raw, location.href);
+  return u.searchParams;
+};
+const key = () => linkParams().get("k") || "";
+
+// ------------------------------------------------------------------- api
+// Same origin always: the desk that served this file.
+async function api(path, opts = {}) {
+  const sep = path.includes("?") ? "&" : "?";
+  const res = await fetch(path + sep + "k=" + encodeURIComponent(key()), {
+    ...opts,
+    headers: { ...(opts.headers || {}) },
   });
+  const text = await res.text();
+  let body = null;
+  try { body = text ? JSON.parse(text) : null; } catch { /* not json */ }
+  if (!res.ok) {
+    throw new Error((body && (body.reason || body.error)) || `the desk answered ${res.status}`);
+  }
+  return body;
+}
 
-  // --------------------------------------------------------------- review
-  let pending = null;
-
-  /**
-   * Deep link from the desk: /phone/?id=pay_0001&k=PORTALKEY
-   * The human taps a link instead of pasting 400 characters of base64 on a
-   * phone. The desk returns its own record of the challenge, so the amount the
-   * phone displays is the amount the desk recorded.
-   */
-  async function loadFromDesk() {
-    const q = new URLSearchParams(location.search);
-    const id = q.get("id"), k = q.get("k");
-    if (!id) return;
-    try {
-      const res = await fetch("/challenge/" + encodeURIComponent(id) +
-        (k ? "?k=" + encodeURIComponent(k) : ""), { cache: "no-store" });
-      if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error || res.status);
-      const rec = await res.json();
-      $("xdr").value = rec.xdr;
-      pending = { fromDesk: true, id, k };
-      await renderChallenge(rec.xdr);
-      $("readErr").textContent = "";
-    } catch (e) {
-      $("readErr").textContent = "could not load " + id + ": " + e.message;
+// ---------------------------------------------------------------- key state
+let approverKey = null;      // the non-extractable CryptoKey
+let approverPublic = null;   // its G... address, for display
+let approverPubBytes = null; // its 32 raw bytes, for addSignature
+
+async function loadKey() {
+  try { approverKey = await idbGet(); } catch { approverKey = null; }
+  if (!approverKey) return false;
+  // A non-extractable key cannot be asked for its own public bytes, so they were
+  // captured at enrolment and kept next to it. The address is for display; the
+  // raw bytes are what addSignature needs to attach the signature.
+  approverPublic = localStorage.getItem("paydlux.pub") || null;
+  const raw = localStorage.getItem("paydlux.pubraw") || "";
+  approverPubBytes = raw ? X.hexToBytes(raw) : null;
+  return true;
+}
+
+async function enrol(seed) {
+  const trimmed = seed.trim();
+  // Import once as non-extractable (what we keep) and once as extractable
+  // purely to read back the public half, which the temporary key is then
+  // discarded for. The seed itself is never stored anywhere.
+  const { key: kp, pub, address } = await X.importSecretSeedPair(trimmed);
+  approverKey = kp;
+  approverPublic = address;
+  approverPubBytes = pub;
+  await idbPut(kp);
+  localStorage.setItem("paydlux.pub", address);
+  localStorage.setItem("paydlux.pubraw", X.hex(pub));
+  $("seed").value = "";
+  return true;
+}
+
+// ------------------------------------------------------------------ render
+function paintKeyState() {
+  show("enrol", !approverKey);
+  show("ready", !!approverKey);
+  if (approverKey) set("who", approverPublic || "imported on this device");
+}
+
+function paintLinkState() {
+  const have = !!key();
+  show("nolink", !have);
+  show("queue", have);
+  if (!have) show("paste", false);   // no link, no queue: nothing to fall back to yet
+  if (!have) $("link").value = "";
+}
+
+const ago = (iso) => {
+  const s = Math.max(0, (Date.now() - new Date(iso).getTime()) / 1000);
+  if (s < 60) return Math.round(s) + "s ago";
+  if (s < 3600) return Math.round(s / 60) + "m ago";
+  return Math.round(s / 3600) + "h ago";
+};
+
+const STATUS_TAG = {
+  pending: ["warn", "waiting"],
+  awaiting_phone: ["warn", "on your phone"],
+  settled: ["ok", "paid"],
+  denied: ["bad", "rejected"],
+  failed: ["bad", "failed"],
+  expired: ["bad", "expired"],
+};
+
+/** A queue row. Built from DOM nodes so agent text can never be markup. */
+function row(rec) {
+  const wrap = document.createElement("div");
+  wrap.className = "item" + (rec.status === "settled" || rec.status === "denied" ? " hist" : "");
+
+  const top = document.createElement("div");
+  top.className = "top";
+  const amt = document.createElement("div");
+  amt.className = "amt";
+  amt.textContent = `${rec.price} ${rec.token || ""}`;
+  const [, cls] = STATUS_TAG[rec.status] || ["warn", rec.status];
+  const tag = document.createElement("span");
+  tag.className = "tag " + cls;
+  tag.textContent = (STATUS_TAG[rec.status] || [null, rec.status])[1] || rec.status;
+  top.append(amt, tag);
+
+  const uri = document.createElement("div");
+  uri.className = "uri";
+  uri.textContent = rec.uri || "";
+
+  const wants = document.createElement("div");
+  wants.className = "wants";
+  wants.textContent = rec.wants || "";
+
+  const foot = document.createElement("div");
+  foot.className = "foot";
+  const when = document.createElement("span");
+  when.className = "ago";
+  when.textContent = ago(rec.at) + (rec.tx ? " \u00b7 " + rec.tx.slice(0, 12) + "\u2026" : "");
+  foot.append(when);
+
+  const actionable = rec.status === "pending" || rec.status === "awaiting_phone";
+  if (actionable) {
+    const btns = document.createElement("div");
+    btns.className = "btns";
+    const yes = document.createElement("button");
+    yes.textContent = "Review";
+    yes.addEventListener("click", () => openReview(rec.id));
+    const no = document.createElement("button");
+    no.className = "danger";
+    no.textContent = "Reject";
+    no.addEventListener("click", () => reject(rec.id));
+    btns.append(yes, no);
+    foot.append(btns);
+  }
+
+  wrap.append(top, uri, wants, foot);
+  return wrap;
+}
+
+let queueTimer = null;
+async function refreshQueue() {
+  if (!key()) return;
+  try {
+    const list = await api("/queue");
+    const live = list.filter((r) => r.status === "pending" || r.status === "awaiting_phone");
+    const past = list.filter((r) => r.status !== "pending" && r.status !== "awaiting_phone").slice(0, 5);
+    const box = $("qlist");
+    box.replaceChildren();
+    if (!live.length && !past.length) {
+      const e = document.createElement("div");
+      e.className = "empty";
+      e.textContent = "nothing waiting";
+      box.append(e);
     }
+    live.forEach((r) => box.append(row(r)));
+    past.forEach((r) => box.append(row(r)));
+    // The hand-paste box is the fallback for a seller who sends a transaction by
+    // message instead of a link. It appears when there is nothing in the queue,
+    // so a fresh device never meets "paste the transaction" before its payments.
+    show("paste", !live.length);
+    set("qwhen", new Date().toLocaleTimeString());
+    err("qerr", "");
+  } catch (e) {
+    err("qerr", e.message + " — if this is new, open the seller's approval link again");
   }
+}
 
-  async function renderChallenge(xdrText) {
-    const env = X.parseEnvelope(xdrText);
+// ----------------------------------------------------------------- review
+let current = null;   // { id, xdr, hash, summary }
+
+async function openReview(id) {
+  err("qerr", "");
+  try {
+    const rec = await api("/challenge/" + encodeURIComponent(id));
+    const env = X.parseEnvelope(rec.xdr);
     const op = env.tx.ops[0];
-    const testnet = await X.transactionHash(xdrText, X.NETWORK_ID.testnet);
-    const publicNet = await X.transactionHash(xdrText, X.NETWORK_ID.public);
-    pending = Object.assign({}, pending, {
-      xdrText, env, hashes: { testnet: testnet.hash, public: publicNet.hash },
-    });
+    if (env.tx.ops.length !== 1 || op.type !== X.OP_PAYMENT) {
+      throw new Error("this transaction is not a single payment \u2014 refusing to sign it");
+    }
+    const { hash } = await X.transactionHash(rec.xdr, X.NETWORK_ID[rec.network] || rec.network);
+    if (rec.hash && hash !== rec.hash) {
+      throw new Error("the transaction does not hash to what the desk advertised \u2014 refusing");
+    }
+    current = {
+      id, xdr: rec.xdr, hash,
+      amount: X.formatAmount(op.amount),
+      token: op.asset.code || "XLM",
+      issuer: op.asset.issuer || "",
+      payee: X.encodeAccountEd25519(op.destination.pub),
+      vault: X.encodeAccountEd25519(env.tx.source.pub),
+      memo: op.source ? "(payment from a secondary key)" : (rec.memo || ""),
+      deadline: rec.expiresAt || env.tx.cond?.timeBounds?.max || "",
+      network: rec.network,
+      wants: rec.wants || "",
+    };
+    set("amount", `${current.amount} ${current.token}`);
+    set("token", current.issuer ? `${current.token} (${current.issuer.slice(0, 12)}\u2026)` : current.token);
+    set("payee", current.payee);
+    set("vault", current.vault);
+    set("wants", current.wants);
+    set("memo", current.memo);
+    set("deadline", current.deadline ? new Date(Number(current.deadline) * 1000).toLocaleString() : "none");
+    set("network", current.network === "public" ? "Stellar mainnet" : current.network);
+    set("hash", current.hash);
+    err("signErr", "");
+    show("review", true);
+    show("queue", false);
+    $("review").scrollIntoView({ behavior: "smooth", block: "start" });
+  } catch (e) {
+    err("qerr", e.message);
+  }
+}
 
-    $("amount").textContent = X.formatAmount(op.amount) + " " + op.asset.code;
-    $("token").textContent = op.asset.issuer
-      ? op.asset.code + " issued by " + op.asset.issuer
-      : "XLM (native)";
-    $("payee").textContent = X.encodeAccountEd25519(op.destination.pub);
-    $("vault").textContent = X.encodeAccountEd25519(env.tx.source.pub);
-    $("memo").textContent = env.tx.memo || "(none)";
-    const max = env.tx.bounds && env.tx.bounds.maxTime;
-    $("deadline").textContent = max && max !== "0"
-      ? new Date(Number(max) * 1000).toLocaleString() + " (" + remaining(Number(max)) + ")"
-      : "none — this transaction never expires";
-
-    // Which network an envelope belongs to is NOT inside the envelope, so the
-    // human picks it. Signing for the wrong network yields a signature the
-    // ledger refuses; it cannot silently move funds somewhere else.
-    $("hash").innerHTML =
-      '<label class="tag ok"><input type="radio" name="net" value="testnet" checked> testnet</label> '
-      + testnet.hash +
-      '<br><label class="tag warn"><input type="radio" name="net" value="public"> mainnet</label> '
-      + publicNet.hash;
-    $("review").classList.remove("hidden");
+function backToQueue() {
+  current = null;
+  show("review", false);
+  show("result", false);
+  show("queue", !!key());
+  refreshQueue();
+}
+
+// ------------------------------------------------------------------ sign
+async function signAndSubmit() {
+  if (!current) return;
+  if (!approverKey) { err("signErr", "no approver key on this device"); return; }
+  const button = $("approve");
+  button.disabled = true;
+  try {
+    // Re-hash at the moment of signing. What is signed is what was on screen.
+    const { hash } = await X.transactionHash(current.xdr, X.NETWORK_ID[current.network] || current.network);
+    if (hash !== current.hash) throw new Error("the transaction changed under you \u2014 nothing was signed");
+    const sig = new Uint8Array(await crypto.subtle.sign("Ed25519", approverKey, X.signaturePreimage(hash)));
+    if (!approverPubBytes) throw new Error("this device lost the approver's public key — re-import it");
+    const signed = X.addSignature(current.xdr, sig, approverPubBytes);
+    const out = await api("/signed/" + encodeURIComponent(current.id), {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ signedXdr: signed }),
+    });
+    set("signed", signed);
+    const tag = $("resultTag");
+    tag.className = "tag " + (out.status === "settled" ? "ok" : "bad");
+    tag.textContent = out.status === "settled" ? "Paid" : out.status;
+    if (out.tx) set("resultLabel", `Signed \u00b7 ledger tx ${out.tx}`);
+    if (out.reason) set("resultLabel", out.reason);
+    show("result", true);
+    show("review", false);
+  } catch (e) {
+    err("signErr", e.message);
+  } finally {
+    button.disabled = false;
   }
+}
 
-  function remaining(unix) {
-    const s = unix - Math.floor(Date.now() / 1000);
-    if (s <= 0) return "EXPIRED";
-    if (s < 120) return s + "s left";
-    return Math.round(s / 60) + " min left";
+async function reject(id) {
+  try {
+    await api("/deny/" + encodeURIComponent(id), { method: "POST" });
+    refreshQueue();
+  } catch (e) {
+    err("qerr", e.message);
   }
+}
 
-  $("read").addEventListener("click", async () => {
-    $("readErr").textContent = "";
-    $("review").classList.add("hidden");
-    const xdrText = $("xdr").value.trim().replace(/\s+/g, "");
-    try {
-      await renderChallenge(xdrText);
-    } catch (e) {
-      $("readErr").textContent = e.message;
+// ------------------------------------------------------- hand-pasted xdr
+// For a seller who sends the pending transaction by hand. There is no trusted
+// source for it, so the app makes the human type back the hash the seller
+// quoted: signing then proves the human saw the same bytes, not a swapped one.
+async function readPasted() {
+  err("readErr", "");
+  try {
+    if (!approverKey || !approverPubBytes) throw new Error("import the approver key first");
+    const xdr = $("xdr").value.trim();
+    if (!xdr) throw new Error("paste the transaction first");
+    const env = X.parseEnvelope(xdr);
+    if (env.tx.ops.length !== 1 || env.tx.ops[0].type !== X.OP_PAYMENT) {
+      throw new Error("not a single payment \u2014 refusing");
     }
-  });
+    const op = env.tx.ops[0];
+    const local = location.hostname === "localhost" || /^127\./.test(location.hostname);
+    const net = local ? "testnet" : "public";
+    const { hash } = await X.transactionHash(xdr, X.NETWORK_ID[net]);
+    // No trusted source, so the human proves they saw these exact bytes by
+    // typing back the hash the seller quoted. A swapped transaction hashes
+    // differently and this check fails.
+    const want = prompt(
+      `Network: ${net}\n` +
+      `This pays ${X.formatAmount(op.amount)} ${op.asset.code || "XLM"} to ` +
+      `${X.encodeAccountEd25519(op.destination.pub)}.\n\n` +
+      `Type the first 12 characters of the hash the seller quoted to confirm you are ` +
+      `signing the same transaction.`);
+    if (!want) return;
+    if (want.trim().toLowerCase() !== hash.slice(0, 12)) {
+      throw new Error("that is not the hash the seller quoted \u2014 nothing was signed");
+    }
+    const sig = new Uint8Array(await crypto.subtle.sign("Ed25519", approverKey, X.signaturePreimage(hash)));
+    set("signed", X.addSignature(xdr, sig, approverPubBytes));
+    set("resultLabel", "Signed \u2014 send this back to the seller");
+    $("resultTag").className = "tag ok";
+    $("resultTag").textContent = "Signed";
+    show("result", true);
+  } catch (e) {
+    err("readErr", e.message);
+  }
+}
 
-  $("reject").addEventListener("click", () => reset());
-  $("again").addEventListener("click", () => reset());
-  function reset() {
-    pending = null;
-    $("result").classList.add("hidden");
-    $("review").classList.add("hidden");
-    $("xdr").value = "";
+// ------------------------------------------------------------------ boot
+async function boot() {
+  // A deep link from the seller's desk saves the approval link automatically.
+  const here = new URL(location.href);
+  if (here.searchParams.get("k")) {
+    const u = new URL(location.pathname, location.origin);
+    const p = new URLSearchParams();
+    for (const [k2, v] of here.searchParams) p.set(k2, v);
+    localStorage.setItem(LINK, u.pathname + "?" + p.toString());
   }
 
-  // ---------------------------------------------------------------- sign
-  $("approve").addEventListener("click", async () => {
-    $("signErr").textContent = "";
-    if (!signingKey) {
-      $("signErr").textContent = "Import the approver key first.";
-      return;
-    }
-    if (!pending) return;
-
-    const picked = document.querySelector("input[name=net]:checked");
-    const which = picked ? picked.value : "testnet";
-    const network = which === "testnet" ? X.NETWORK_ID.testnet : X.NETWORK_ID.public;
-
-    // A pasted transaction has no trusted source, so the human proves they were
-    // shown this exact one by typing its hash back. A transaction fetched from
-    // the desk over the portal key is already bound to the desk's own record,
-    // which the desk re-checks before submitting.
-    if (!pending.fromDesk) {
-      const quoted = prompt("Type the first 16 characters of the hash the seller quoted you:");
-      if (!quoted) return;
-      const q = quoted.trim().toLowerCase();
-      if (q !== pending.hashes.testnet.slice(0, 16) && q !== pending.hashes.public.slice(0, 16)) {
-        $("signErr").textContent = "That hash matches neither. Nothing was signed.";
-        return;
-      }
-    }
+  await loadKey();
+  paintKeyState();
+  paintLinkState();
 
+  $("enrolBtn").addEventListener("click", async () => {
+    err("enrolErr", "");
     try {
-      const { hash } = await X.transactionHash(pending.xdrText, network);
-      // The signature covers the 32 raw hash bytes. sha256-ing the hex text
-      // instead yields a well-formed envelope the ledger refuses with BAD_AUTH.
-      const sig = new Uint8Array(await crypto.subtle.sign(
-        "Ed25519", signingKey, X.signaturePreimage(hash)));
-      const rec = await loadKey();
-      const signed = X.addSignature(pending.xdrText, sig, base64urlToBytes(rec.x));
-
-      if (pending.fromDesk) {
-        const res = await fetch("/signed/" + encodeURIComponent(pending.id) +
-          (pending.k ? "?k=" + encodeURIComponent(pending.k) : ""), {
-          method: "POST",
-          headers: { "content-type": "application/json" },
-          body: JSON.stringify({ signedXdr: signed }),
-        });
-        const out = await res.json().catch(() => ({}));
-        if (out.status === "settled") {
-          // Show the ledger hash and keep the panel up: this is the only proof
-          // the human gets that the payment actually landed. reset() would hide
-          // it again, so clear the form by hand instead.
-          pending = null;
-          $("xdr").value = "";
-          $("review").classList.add("hidden");
-          $("signed").textContent = "settled on ledger\n" + (out.tx || "");
-          $("result").classList.remove("hidden");
-          return;
-        }
-        $("signErr").textContent = "the desk refused it: " +
-          (out.reason || out.error || out.status || res.status);
-        return;
-      }
-      $("signed").textContent = signed;
-      $("result").classList.remove("hidden");
+      await enrol($("seed").value);
+      paintKeyState();
+      refreshQueue();
     } catch (e) {
-      $("signErr").textContent = e.message;
+      err("enrolErr", e.message);
     }
   });
-
+  $("forget").addEventListener("click", async () => {
+    await idbDel();
+    localStorage.removeItem("paydlux.pub");
+    approverKey = null; approverPublic = null;
+    paintKeyState();
+  });
+  $("linkBtn").addEventListener("click", () => {
+    const raw = $("link").value.trim();
+    if (!raw) return;
+    const u = new URL(raw, location.origin);
+    if (!u.searchParams.get("k")) { err("linkErr", "that link has no approval key in it"); return; }
+    localStorage.setItem(LINK, u.pathname + "?" + u.searchParams.toString());
+    err("linkErr", "");
+    paintLinkState();
+    refreshQueue();
+  });
+  $("approve").addEventListener("click", signAndSubmit);
+  $("reject").addEventListener("click", () => current && reject(current.id) && backToQueue());
+  $("again").addEventListener("click", backToQueue);
+  $("read").addEventListener("click", readPasted);
   $("copy").addEventListener("click", async () => {
-    try {
-      await navigator.clipboard.writeText($("signed").textContent);
-      $("copy").textContent = "Copied";
-    } catch (e) {
-      $("copy").textContent = "Select the text above and copy it manually";
-    }
+    try { await navigator.clipboard.writeText($("signed").textContent); $("copy").textContent = "Copied"; }
+    catch { $("copy").textContent = "Copy failed \u2014 select the text"; }
+    setTimeout(() => { $("copy").textContent = "Copy"; }, 1500);
   });
 
-  // On reload, pull the non-extractable CryptoKey back out of IndexedDB. It can
-  // sign; it cannot be exported. The seed itself is never stored anywhere.
-  (async () => {
-    try {
-      const rec = await loadKey();
-      if (rec && rec.key instanceof CryptoKey) {
-        signingKey = rec.key;
-        await showReady(base64urlToBytes(rec.x));
-      }
-    } catch (e) { /* enrolment UI stays up */ }
-    await loadFromDesk();
-  })();
-})();
+  if (key()) {
+    await refreshQueue();
+    queueTimer = setInterval(refreshQueue, 4000);
+    const id = new URLSearchParams(localStorage.getItem(LINK)?.split("?")[1] || "").get("id");
+    if (id) openReview(id);
+  }
+}
+
+boot().catch((e) => { err("qerr", e.message); });

package/phone-app/index.html

@@ -4,16 +4,22 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <meta name="theme-color" content="#0b0f14">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="apple-mobile-web-app-title" content="Paydlux">
 <title>Paydlux Approver</title>
+<link rel="manifest" href="manifest.webmanifest">
+<link rel="icon" href="icon-192.png" sizes="192x192">
+<link rel="apple-touch-icon" href="icon-192.png">
 <!--
-  The approver half of a Paydlux vault.
+  The approver half of a Paydlux vault: a phone app, not a page you paste into.
 
-  This page holds ONE key: the approver's. It cannot spend anything by itself.
-  It reads a pending payment, shows a human what they are approving, and signs
-  the transaction hash. Signing is a purely local operation: no network call can
-  change what was signed.
+  This app holds ONE key: the approver's. It cannot spend anything by itself.
+  It lists the payments waiting on you, shows a human what they are approving,
+  and signs the transaction hash. Signing is a purely local operation: no
+  network call can change what was signed.
 
-  The page talks to one origin only — the desk that served it — to fetch the
+  The app talks to one origin only — the desk that served it — to fetch the
   pending transaction and hand back the signature. connect-src 'self' in the
   desk's Content-Security-Policy enforces that.
 
@@ -28,7 +34,10 @@
   transaction without reading it. The human reading the amount and payee is part
   of the security model, not a UX step.
 
-  Serve it over http(s) on a device you control:  npx tsx tools/phone-serve.ts
+  The static shell (this file, app.js, xdr.js, the icons) carries no secrets and
+  no payment data, so the desk serves it without the portal key — that is what
+  lets it be installed to a home screen. Every route that carries data or moves
+  money still needs the key.
 -->
 <style>
   :root {
@@ -67,13 +76,30 @@
   .tag { display:inline-block; font-size:11px; padding:3px 8px; border-radius:999px; letter-spacing:.06em; text-transform:uppercase }
   .tag.ok { background:rgba(61,220,151,.14); color:var(--ok) }
   .tag.warn { background:rgba(255,180,84,.14); color:var(--warn) }
-  .tag.bad { background:rgba(255,107,107,.14); color:var(--bad) }
+  .tag.bad { background:rgba(257,107,107,.14); color:var(--bad) }
   .err { color:var(--bad); font-size:13px; margin-top:8px; word-break:break-word }
   .hint { color:var(--dim); font-size:12px; margin-top:8px }
   .hidden { display:none }
   .out { background:#0d131a; border:1px solid var(--line); border-radius:10px; padding:10px;
          font:12px/1.4 ui-monospace,Menlo,monospace; word-break:break-all; max-height:180px; overflow:auto }
   .who { font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--dim); word-break:break-all }
+
+  /* ------------------------------------------------------------ queue */
+  .qhead { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px }
+  .qhead h2 { font-size:13px; margin:0; text-transform:uppercase; letter-spacing:.06em; color:var(--dim) }
+  .qhead .when { font-size:11px; color:var(--dim) }
+  .item { border:1px solid var(--line); border-radius:12px; padding:12px; margin-top:10px; background:#0d131a }
+  .item .top { display:flex; justify-content:space-between; align-items:baseline; gap:10px }
+  .item .amt { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums }
+  .item .uri { font-size:12px; color:var(--dim); word-break:break-all; margin-top:2px }
+  .item .wants { font-size:13px; margin-top:6px; word-break:break-word }
+  .item .foot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px }
+  .item .ago { font-size:11px; color:var(--dim) }
+  .item .btns { display:flex; gap:8px }
+  .item .btns button { width:auto; margin:0; padding:9px 16px; font-size:14px }
+  .empty { color:var(--dim); font-size:14px; padding:14px 2px }
+  .hist { opacity:.62 }
+  .hist .amt { font-size:16px }
 </style>
 </head>
 <body>
@@ -104,21 +130,38 @@
   <button class="ghost" id="forget">Remove key from this device</button>
 </div>
 
-<!-- --------------------------------------------------------- approval -->
-<div class="panel">
-  <label for="xdr">Pending transaction (paste the XDR from the seller)</label>
-  <textarea id="xdr" autocorrect="off" autocapitalize="off" spellcheck="false"
-            placeholder="Paste the transaction the seller sent you"></textarea>
-  <button id="read">Read it</button>
-  <div class="err" id="readErr"></div>
+<!-- -------------------------------------------------------- not linked -->
+<div class="panel hidden" id="nolink">
+  <div class="tag bad">No approval link</div>
+  <div class="hint" style="margin-top:10px">
+    This app shows payments only to whoever holds the seller's approval link. Open the
+    link the seller sent you once &mdash; the app then remembers it on this device.
+  </div>
+  <label for="link">Approval link</label>
+  <input id="link" type="url" autocorrect="off" autocapitalize="off" spellcheck="false"
+         placeholder="https://desk.paydlux.com/phone/?k=...">
+  <button id="linkBtn">Use this link</button>
+  <div class="err" id="linkErr"></div>
 </div>
 
+<!-- ------------------------------------------------------------- queue -->
+<div class="panel hidden" id="queue">
+  <div class="qhead">
+    <h2>Waiting for you</h2>
+    <span class="when" id="qwhen"></span>
+  </div>
+  <div id="qlist"><div class="empty">loading&hellip;</div></div>
+  <div class="err" id="qerr"></div>
+</div>
+
+<!-- ----------------------------------------------------------- review -->
 <div class="panel hidden" id="review">
   <div class="amount" id="amount"></div>
   <dl class="kv">
     <dt>Token</dt><dd id="token"></dd>
     <dt>Payee</dt><dd id="payee"></dd>
     <dt>From</dt><dd id="vault"></dd>
+    <dt>Wants</dt><dd id="wants"></dd>
     <dt>Reference</dt><dd id="memo"></dd>
     <dt>Deadline</dt><dd id="deadline"></dd>
     <dt>Network</dt><dd id="network"></dd>
@@ -133,10 +176,30 @@
   <div class="err" id="signErr"></div>
 </div>
 
-<!-- ----------------------------------------------------------- result -->
+<!-- --------------------------------------------------------- pasted xdr -->
+<!-- Hidden until there is nothing in the queue. A human who just imported a key
+     should see their payments, not a box asking them to paste 400 characters of
+     base64 they were never asked for. This path is the fallback for when the
+     seller sends a transaction by message instead of a link. -->
+<div class="panel hidden" id="paste">
+  <details>
+    <summary style="font-size:13px;color:var(--dim)">Sign a transaction the seller sent by hand</summary>
+    <label for="xdr">Pending transaction (XDR)</label>
+    <textarea id="xdr" autocorrect="off" autocapitalize="off" spellcheck="false"
+              placeholder="Paste the transaction the seller sent you"></textarea>
+    <button id="read">Read it</button>
+    <div class="hint">
+      A hand-sent transaction has no trusted source, so the app will make you type back
+      the hash the seller quoted before it signs.
+    </div>
+    <div class="err" id="readErr"></div>
+  </details>
+</div>
+
+<!-- ------------------------------------------------------------ result -->
 <div class="panel hidden" id="result">
-  <div class="tag ok">Signed</div>
-  <label>Signed transaction &mdash; send this back to the seller</label>
+  <div class="tag ok" id="resultTag">Signed</div>
+  <label id="resultLabel">Signed transaction &mdash; send this back to the seller</label>
   <div class="out" id="signed"></div>
   <button id="copy">Copy</button>
   <button class="ghost" id="again">Done</button>

package/phone-app/manifest.webmanifest

@@ -0,0 +1,15 @@
+{
+  "name": "Paydlux Approver",
+  "short_name": "Paydlux",
+  "description": "Signs Paydlux payment approvals on this device. The approver key never leaves it.",
+  "start_url": "/phone/",
+  "scope": "/phone/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#0b0f14",
+  "theme_color": "#0b0f14",
+  "icons": [
+    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }
+  ]
+}

package/phone-app/xdr.js

@@ -172,6 +172,49 @@
    * The public half is captured at enrolment and stored separately.
    */
   async function importSecretSeed(seedStr) {
+    const pkcs8 = pkcs8FromSeed(seedStr);
+    const privateKey = await crypto.subtle.importKey(
+      "pkcs8", pkcs8, { name: "Ed25519" }, false, ["sign"]);
+    pkcs8.fill(0);                      // drop the plaintext copy as soon as we can
+    return privateKey;
+  }
+
+  /**
+   * Import a seed AND read back its public half, in one step.
+   *
+   * A non-extractable key cannot be asked for its own public bytes, and the
+   * approver app needs those bytes to add its signature to a transaction. So the
+   * seed is imported a second time as an extractable key purely to export the
+   * 32-byte public half; that temporary key is discarded immediately and never
+   * stored. What the app keeps is the non-extractable key plus a public value
+   * that is public anyway.
+   *
+   * The export goes through JWK rather than "raw": WebCrypto defines raw only for
+   * OKP *public* keys, so exporting raw from a private key is refused (verified
+   * on Node 26). The JWK form of an Ed25519 private key carries the public half
+   * in `x`, base64url.
+   */
+  async function importSecretSeedPair(seedStr) {
+    const key = await importSecretSeed(seedStr);
+    const tmp = await crypto.subtle.importKey(
+      "pkcs8", pkcs8FromSeed(seedStr), { name: "Ed25519" }, true, ["sign"]);
+    let pub;
+    try {
+      const jwk = await crypto.subtle.exportKey("jwk", tmp);
+      pub = base64UrlToBytes(jwk.x);
+    } catch {
+      pub = new Uint8Array(await crypto.subtle.exportKey("raw", tmp));
+    }
+    if (pub.length !== 32) throw new Error("unexpected public key length " + pub.length);
+    return { key, pub, address: encodeAccountEd25519(pub) };
+  }
+
+  function base64UrlToBytes(s) {
+    if (typeof s !== "string" || !s) throw new Error("missing public key in the exported key");
+    return base64ToBytes(s.replace(/-/g, "+").replace(/_/g, "/") + "==".slice(0, (4 - s.length % 4) % 4));
+  }
+
+  function pkcs8FromSeed(seedStr) {
     const seed = decodeSecretSeed(seedStr);
     const pkcs8 = new Uint8Array(16 + 32);
     pkcs8.set([
@@ -179,10 +222,7 @@
       0x03, 0x2b, 0x65, 0x70, 0x04, 0x22, 0x04, 0x20,
     ], 0);
     pkcs8.set(seed, 16);
-    const privateKey = await crypto.subtle.importKey(
-      "pkcs8", pkcs8, { name: "Ed25519" }, false, ["sign"]);
-    seed.fill(0);                       // drop the plaintext copy as soon as we can
-    return privateKey;
+    return pkcs8;
   }
 
   // ------------------------------------------------------------------ parsing
@@ -429,7 +469,7 @@
     parseEnvelope, transactionHash, addSignature, formatAmount,
     hex, hexToBytes, signaturePreimage,
     encodeAccountEd25519, decodeAccountEd25519,
-    decodeSecretSeed, encodeSecretSeed, importSecretSeed,
+    decodeSecretSeed, encodeSecretSeed, importSecretSeed, importSecretSeedPair,
     NETWORK_ID, crc16Xmodem,
     ENVELOPE_TYPE_TX, OP_PAYMENT, STROOPS,
   };