@paydlux/agent 0.1.8 → 0.1.10

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,
   };