@paydlux/agent 0.1.9 → 0.1.11

package/phone-app/index.html

@@ -4,88 +4,188 @@
 <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="color-scheme" content="dark">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="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">
+<meta name="format-detection" content="telephone=no">
 <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.
 
   What the key model actually guarantees:
     - the seed becomes a NON-extractable WebCrypto key; after enrolment nothing
-      on this page, including an injected script, can read it back;
+      on this page, including an injected script, can read the seed back;
     - the signature covers the transaction hash, so a changed amount or payee
       produces a different hash and a signature the ledger refuses;
     - the approver key alone cannot move funds — the vault needs 2 signatures.
 
   What it does NOT guarantee: a person who roots this device, or who approves a
   transaction without reading it. The human reading the amount and payee is part
-  of the security model, not a UX step.
+  of the security model, not a UX step. That is why Approve is a press-and-hold
+  and Reject is a single tap: the safe answer is always the cheap one.
 
-  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, sw.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 and cached for offline
+  launch. Every route that carries data or moves money still needs the key.
 -->
 <style>
   :root {
-    --bg:#0b0f14; --panel:#121821; --line:#22303f; --ink:#e8eef6; --dim:#8fa3b8;
-    --ok:#3ddc97; --warn:#ffb454; --bad:#ff6b6b; --accent:#4da3ff;
+    --bg:#0b0f14; --panel:#121821; --panel2:#0d131a; --line:#22303f; --ink:#e8eef6;
+    --dim:#8fa3b8; --ok:#3ddc97; --warn:#ffb454; --bad:#ff6b6b; --accent:#4da3ff;
+    --r:16px;
   }
-  * { box-sizing:border-box }
+  @media (prefers-color-scheme: light) { /* the app is always dark: a light
+     approval screen next to a bank app is how a person taps the wrong one */ }
+  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent }
+  html { -webkit-text-size-adjust:100% }
   body {
-    margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif;
-    padding:max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
+    margin:0; background:var(--bg); color:var(--ink);
+    font:17px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text",ui-sans-serif,system-ui,sans-serif;
+    padding:max(14px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom));
     max-width:560px; margin-inline:auto;
+    overscroll-behavior-y:none;
   }
-  h1 { font-size:17px; margin:0 0 4px; letter-spacing:.02em }
-  .sub { color:var(--dim); font-size:13px; margin-bottom:18px }
-  .panel { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:14px }
-  label { display:block; font-size:12px; color:var(--dim); margin:10px 0 4px; text-transform:uppercase; letter-spacing:.06em }
+  /* installed-to-home-screen: no browser chrome, so the header carries the
+     identity and the status itself */
+  .brand { display:flex; align-items:center; gap:10px; margin:2px 2px 14px }
+  .brand img { width:30px; height:30px; border-radius:8px }
+  .brand h1 { font-size:19px; margin:0; letter-spacing:.01em; font-weight:700 }
+  .brand .sub { color:var(--dim); font-size:12.5px; margin-top:1px }
+  .net { margin-left:auto; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
+         color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:4px 9px }
+
+  .panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
+           padding:16px; margin-bottom:14px }
+  label { display:block; font-size:11.5px; color:var(--dim); margin:12px 0 5px;
+          text-transform:uppercase; letter-spacing:.07em; font-weight:600 }
   textarea, input {
-    width:100%; background:#0d131a; color:var(--ink); border:1px solid var(--line);
-    border-radius:10px; padding:10px; font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
-    word-break:break-all;
+    width:100%; background:var(--panel2); color:var(--ink); border:1px solid var(--line);
+    border-radius:12px; padding:13px; font:15px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
+    word-break:break-all; -webkit-appearance:none; appearance:none;
   }
-  textarea { min-height:84px; resize:vertical }
+  input:focus, textarea:focus { outline:none; border-color:var(--accent) }
+  textarea { min-height:92px; resize:vertical }
+
+  /* 44px minimum tap target — iOS Human Interface guideline, and a person
+     approving money with one thumb in the dark deserves it */
   button {
-    width:100%; margin-top:12px; padding:14px; border:0; border-radius:12px;
-    background:var(--accent); color:#04121f; font-size:16px; font-weight:700; cursor:pointer;
+    width:100%; margin-top:12px; min-height:52px; padding:15px 18px; border:0; border-radius:14px;
+    background:var(--accent); color:#04121f; font-size:17px; font-weight:700; cursor:pointer;
+    font-family:inherit; -webkit-user-select:none; user-select:none; touch-action:manipulation;
   }
   button.ghost { background:transparent; color:var(--dim); border:1px solid var(--line); font-weight:600 }
-  button.danger { background:var(--bad); color:#2a0707 }
+  button.danger { background:rgba(255,107,107,.14); color:var(--bad); border:1px solid rgba(255,107,107,.3) }
   button:disabled { opacity:.4 }
   .row { display:flex; gap:10px }
   .row > * { flex:1 }
-  .kv { display:grid; grid-template-columns:96px 1fr; gap:6px 10px; font-size:14px }
-  .kv dt { color:var(--dim); font-size:12px; text-transform:uppercase; letter-spacing:.06em; padding-top:2px }
-  .kv dd { margin:0; font-family:ui-monospace,Menlo,monospace; word-break:break-all; font-size:13px }
-  .amount { font-size:34px; font-weight:800; margin:2px 0 10px; font-variant-numeric:tabular-nums }
-  .tag { display:inline-block; font-size:11px; padding:3px 8px; border-radius:999px; letter-spacing:.06em; text-transform:uppercase }
+
+  .kv { display:grid; grid-template-columns:88px 1fr; gap:8px 12px; font-size:15px; margin:0 }
+  .kv dt { color:var(--dim); font-size:11.5px; text-transform:uppercase; letter-spacing:.07em;
+           padding-top:3px; font-weight:600 }
+  .kv dd { margin:0; font-family:ui-monospace,Menlo,monospace; word-break:break-all; font-size:13.5px }
+  .amount { font-size:44px; font-weight:800; margin:2px 0 4px; font-variant-numeric:tabular-nums;
+            letter-spacing:-.02em; line-height:1.1 }
+  .amount .tk { font-size:20px; font-weight:600; color:var(--dim); letter-spacing:0 }
+  .tag { display:inline-block; font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px;
+         letter-spacing:.07em; 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) }
-  .err { color:var(--bad); font-size:13px; margin-top:8px; word-break:break-word }
-  .hint { color:var(--dim); font-size:12px; margin-top:8px }
+  .tag.bad { background:rgba(257,107,107,.14); color:var(--bad) }
+  .err { color:var(--bad); font-size:14px; margin-top:10px; word-break:break-word; white-space:pre-wrap }
+  .hint { color:var(--dim); font-size:13px; margin-top:10px }
   .hidden { display:none }
-  .out { background:#0d131a; border:1px solid var(--line); border-radius:10px; padding:10px;
+  .out { background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:12px;
          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 }
+  .who { font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--dim); word-break:break-all }
+
+  /* ------------------------------------------------------------ queue */
+  .qhead { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px }
+  .qhead h2 { font-size:12.5px; margin:0; text-transform:uppercase; letter-spacing:.07em;
+              color:var(--dim); font-weight:700 }
+  .qhead .when { font-size:11px; color:var(--dim) }
+  .item { border:1px solid var(--line); border-radius:14px; padding:14px; margin-top:12px;
+          background:var(--panel2) }
+  .item.live { border-color:rgba(77,163,255,.35); box-shadow:0 0 0 3px rgba(77,163,255,.06) }
+  .item .top { display:flex; justify-content:space-between; align-items:baseline; gap:10px }
+  .item .amt { font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.01em }
+  .item .uri { font-size:12px; color:var(--dim); word-break:break-all; margin-top:3px;
+               font-family:ui-monospace,Menlo,monospace }
+  .item .wants { font-size:14px; margin-top:8px; word-break:break-word }
+  .item .foot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px }
+  .item .ago { font-size:11.5px; color:var(--dim) }
+  .item .btns { display:flex; gap:8px }
+  .item .btns button { width:auto; margin:0; min-height:44px; padding:11px 18px; font-size:15px }
+  .empty { color:var(--dim); font-size:15px; padding:18px 2px; text-align:center }
+  .hist { opacity:.6 }
+  .hist .amt { font-size:17px }
+  .clock { font-size:11.5px; font-weight:600 }
+  .clock.low { color:var(--bad) }
+
+  /* ------------------------------------------------- hold-to-approve
+     The expensive action is the one that should cost attention. Reject is one
+     tap; Approve needs a deliberate hold, which also catches the pocket-tap and
+     the "I meant to read it first" case. */
+  .hold { position:relative; overflow:hidden; background:var(--panel2); color:var(--ink);
+          border:1px solid var(--line); min-height:60px }
+  .hold .fill { position:absolute; inset:0 auto 0 0; width:0; background:rgba(61,220,151,.28) }
+  .hold .lbl { position:relative; z-index:1; font-weight:700 }
+  .hold.armed { border-color:var(--ok); color:var(--ok) }
+
+  /* ------------------------------------------------------- install hint */
+  .install { display:flex; gap:12px; align-items:center; font-size:13.5px; color:var(--dim) }
+  .install b { color:var(--ink) }
+  .install .sq { width:26px; height:26px; flex:0 0 26px; border:1px solid var(--line);
+                 border-radius:7px; display:grid; place-items:center; font-size:15px; color:var(--ink) }
+
+  .banner { border-radius:12px; padding:11px 13px; font-size:13.5px; margin-bottom:12px }
+  .banner.off { background:rgba(255,180,84,.12); color:var(--warn); border:1px solid rgba(255,180,84,.25) }
 </style>
 </head>
 <body>
-<h1>Paydlux Approver</h1>
-<div class="sub">Signs payments on this device. The key never leaves it.</div>
+<div class="brand">
+  <img src="icon-192.png" alt="">
+  <div>
+    <h1>Paydlux</h1>
+    <div class="sub">Signs payments here. The key never leaves this device.</div>
+  </div>
+  <span class="net hidden" id="netChip"></span>
+</div>
+
+<div class="banner off hidden" id="offline">
+  No connection to the desk. The list below is the last one you saw — nothing new
+  can be approved until it is reachable again.
+</div>
+
+<!-- ---------------------------------------------------- install to home -->
+<div class="panel hidden" id="install">
+  <div class="install">
+    <span class="sq">&#8593;</span>
+    <div><b>Install this</b> so approvals are one tap: Share, then
+      <b>Add to Home Screen</b>. It then opens full-screen with its own icon.</div>
+  </div>
+</div>
 
 <!-- ---------------------------------------------------------- enrolment -->
 <div class="panel" id="enrol">
   <div class="tag warn">No approver key on this device</div>
   <label for="seed">Approver secret seed (S&hellip;)</label>
-  <input id="seed" type="password" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-         placeholder="S">
+  <input id="seed" type="password" autocomplete="off" autocorrect="off" autocapitalize="off"
+         spellcheck="false" enterkeyhint="go" placeholder="S">
   <button id="enrolBtn">Import key</button>
   <div class="hint">
     The seed becomes a non-extractable signing key and is then dropped. Only that key is
@@ -98,27 +198,45 @@
 <!-- ------------------------------------------------------------ ready -->
 <div class="panel hidden" id="ready">
   <div class="tag ok">Key loaded</div>
-  <dl class="kv" style="margin-top:10px">
+  <dl class="kv" style="margin-top:12px">
     <dt>Approver</dt><dd class="who" id="who"></dd>
   </dl>
   <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:12px">
+    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"
+         enterkeyhint="go" 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 id="qtitle">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">
+  <div class="hint" id="wantsBig"></div>
+  <dl class="kv" style="margin-top:16px">
     <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>
@@ -128,21 +246,45 @@
     Only the hash is signed. If anything above differs from what the seller told you,
     do not approve &mdash; a changed amount or payee produces a different hash.
   </div>
-  <button id="approve">Approve &amp; sign</button>
-  <button class="ghost" id="reject">Reject</button>
+  <button class="hold" id="approve">
+    <span class="fill" id="holdFill"></span>
+    <span class="lbl" id="holdLbl">Hold to approve &amp; sign</span>
+  </button>
+  <button class="danger" id="reject">Reject</button>
   <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:14px;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>
 </div>
 
 <script src="xdr.js"></script>
+<script src="verify.js"></script>
 <script src="app.js"></script>
 </body>
 </html>

package/phone-app/manifest.webmanifest

@@ -0,0 +1,19 @@
+{
+  "id": "/phone/",
+  "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",
+  "lang": "en",
+  "background_color": "#0b0f14",
+  "theme_color": "#0b0f14",
+  "categories": ["finance", "productivity"],
+  "icons": [
+    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }
+  ]
+}

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