@paydlux/agent 0.1.10 → 0.1.11

package/phone-app/app.js

@@ -23,6 +23,10 @@ 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 || ""; };
 
+// A short buzz on the two moments that matter. iOS ignores vibrate(); Android
+// and desktop honour it. Guarded so it is never an uncaught error.
+const buzz = (ms) => { try { navigator.vibrate?.(ms); } catch { /* no haptics */ } };
+
 // ------------------------------------------------------------------ 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
@@ -91,11 +95,47 @@ async function api(path, opts = {}) {
 }
 
 // ---------------------------------------------------------------- key state
-let approverKey = null;      // the non-extractable CryptoKey
+let approverKey = null;      // the non-extractable CryptoKey (browser path)
 let approverPublic = null;   // its G... address, for display
 let approverPubBytes = null; // its 32 raw bytes, for addSignature
 
+// The native app (ios/) exposes a Keychain key behind Face ID through a
+// WKWebView script bridge. When it is present it wins: the key is in the
+// iPhone's hardware-protected Keychain, marked ThisDeviceOnly, and every sign
+// is gated by a biometric. The WebCrypto path below stays for the browser, and
+// the two are never both used — a payment is signed by exactly one key.
+//
+// WebKit gives a page registered against WKScriptMessageHandlerWithReply a
+// promise-returning postMessage, so the round trip is a plain await. No
+// callback registry, no global to collide with.
+const native = {
+  available: () => !!(globalThis.webkit?.messageHandlers?.sign
+                  && globalThis.webkit?.messageHandlers?.publicKey),
+  publicKey: async () => {
+    const out = await globalThis.webkit.messageHandlers.publicKey.postMessage({});
+    return typeof out === "string" && out ? out : null;
+  },
+  sign: async (preimageHex) => {
+    const out = await globalThis.webkit.messageHandlers.sign.postMessage({ preimage: preimageHex });
+    if (out && out.signature) return out.signature;
+    throw new Error((out && out.error) || "the native signer refused");
+  },
+};
+
 async function loadKey() {
+  if (native.available()) {
+    // The native key needs no import: it is already on the device, behind Face
+    // ID. The public half is read from the bridge so the review screen can show
+    // which key will sign, and addSignature can attach the result.
+    try {
+      const hex = await native.publicKey();
+      if (hex) {
+        approverPubBytes = X.hexToBytes(hex);
+        approverPublic = X.encodeAccountEd25519(approverPubBytes);
+        return true;
+      }
+    } catch { /* fall through to the browser key */ }
+  }
   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
@@ -107,6 +147,23 @@ async function loadKey() {
   return true;
 }
 
+// The one place a signature is produced. Both paths end here, so the audit
+// question "what can sign?" has one answer: this function, over a hash this file
+// computed, after the human held the button.
+async function signPreimage(preimageHex) {
+  // One return type for both paths: 64 raw bytes. The bridge answers in hex
+  // because a script message cannot carry a byte array, and a half-converted
+  // signature is the kind of bug that shows up as an invalid transaction rather
+  // than an error.
+  if (native.available()) {
+    const hex = await native.sign(preimageHex);
+    return X.hexToBytes(hex);
+  }
+  if (!approverKey) throw new Error("no approver key on this device");
+  return new Uint8Array(
+    await crypto.subtle.sign("Ed25519", approverKey, X.hexToBytes(preimageHex)));
+}
+
 async function enrol(seed) {
   const trimmed = seed.trim();
   // Import once as non-extractable (what we keep) and once as extractable
@@ -125,9 +182,15 @@ async function enrol(seed) {
 
 // ------------------------------------------------------------------ render
 function paintKeyState() {
-  show("enrol", !approverKey);
-  show("ready", !!approverKey);
-  if (approverKey) set("who", approverPublic || "imported on this device");
+  const have = !!approverKey || native.available();
+  show("enrol", !have);
+  show("ready", have);
+  if (have) {
+    set("who", approverPublic || "held by this app");
+    // In the native app the seed lives in the Keychain and the page has no way
+    // to write it, so the paste box would be a lie.
+    if (native.available()) show("seedRow", false);
+  }
 }
 
 function paintLinkState() {
@@ -154,10 +217,19 @@ const STATUS_TAG = {
   expired: ["bad", "expired"],
 };
 
+/** Minutes left on a live request, or null. */
+function minutesLeft(rec) {
+  if (!rec.expiresAt) return null;
+  if (rec.status !== "pending" && rec.status !== "awaiting_phone") return null;
+  return Math.round((Number(rec.expiresAt) * 1000 - Date.now()) / 60000);
+}
+
 /** 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 live = rec.status === "pending" || rec.status === "awaiting_phone";
+  wrap.className = "item" + (live ? " live" : "") +
+    (rec.status === "settled" || rec.status === "denied" ? " hist" : "");
 
   const top = document.createElement("div");
   top.className = "top";
@@ -185,8 +257,27 @@ function row(rec) {
   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) {
+  // The other way a payment dies is the clock. Show the time left on the row,
+  // so "I approved it and nothing happened" is not the first warning.
+  const left = minutesLeft(rec);
+  if (left !== null) {
+    const clock = document.createElement("span");
+    clock.className = "clock" + (left <= 5 ? " low" : "");
+    clock.textContent = left > 0 ? left + " min left" : "expired";
+    foot.append(clock);
+  }
+
+  // A failed row with no reason is a dead end: the human cannot tell a passed
+  // deadline from a wrong key, and both look like "it says failed".
+  if (rec.status === "failed" && rec.reason) {
+    const why = document.createElement("div");
+    why.className = "wants";
+    why.textContent = rec.reason;
+    wrap.append(top, uri, wants, why, foot);
+    return wrap;
+  }
+
+  if (live) {
     const btns = document.createElement("div");
     btns.className = "btns";
     const yes = document.createElement("button");
@@ -204,7 +295,17 @@ function row(rec) {
   return wrap;
 }
 
+// The home-screen icon badge: the count of what is waiting. On an installed PWA
+// this is the only way a person learns money is waiting without opening the app.
+async function badge(n) {
+  try {
+    if (n > 0 && navigator.setAppBadge) await navigator.setAppBadge(n);
+    else if (navigator.clearAppBadge) await navigator.clearAppBadge();
+  } catch { /* badging is not granted, or not supported */ }
+}
+
 let queueTimer = null;
+let lastLive = 0;
 async function refreshQueue() {
   if (!key()) return;
   try {
@@ -226,9 +327,23 @@ async function refreshQueue() {
     // so a fresh device never meets "paste the transaction" before its payments.
     show("paste", !live.length);
     set("qwhen", new Date().toLocaleTimeString());
+    set("qtitle", live.length ? `${live.length} waiting for you` : "Waiting for you");
     err("qerr", "");
+    show("offline", false);
+    // buzz once when a new request arrives while the app is open
+    if (live.length > lastLive) buzz(30);
+    lastLive = live.length;
+    badge(live.length);
+    // Hand the count to the native shell: it owns the icon badge and the local
+    // notification, which a web page cannot raise on iOS. It gets a number and
+    // nothing else — no amount, no payee — because a lock-screen payment prompt
+    // is a payment decision made on a screen nobody unlocked deliberately.
+    try { globalThis.webkit?.messageHandlers?.queue?.postMessage({ waiting: live.length }); } catch { /* not native */ }
   } catch (e) {
+    // Distinguish "the desk is down" from "this link was never issued": the
+    // first is a network problem the seller fixes, the second is a key problem.
     err("qerr", e.message + " — if this is new, open the seller's approval link again");
+    if (!navigator.onLine) show("offline", true);
   }
 }
 
@@ -248,6 +363,17 @@ async function openReview(id) {
     if (rec.hash && hash !== rec.hash) {
       throw new Error("the transaction does not hash to what the desk advertised \u2014 refusing");
     }
+    // The vault only accepts the key it was built with. A seed from an earlier
+    // run produces a perfectly valid signature over a perfectly valid
+    // transaction, and the ledger's only reply is BAD_AUTH \u2014 which reads like a
+    // bug and is really the wrong key. Say it before signing instead.
+    if (rec.approver && approverPublic && rec.approver !== approverPublic) {
+      throw new Error(
+        "this vault expects a different approver key.\n" +
+        "vault wants: " + rec.approver.slice(0, 12) + "\u2026\n" +
+        "this device: " + approverPublic.slice(0, 12) + "\u2026\n" +
+        "The seller re-ran the desk, which made a new key. Get the new seed.");
+    }
     current = {
       id, xdr: rec.xdr, hash,
       amount: X.formatAmount(op.amount),
@@ -255,12 +381,26 @@ async function openReview(id) {
       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 || ""),
+      // Read the memo out of the envelope, not out of the server's summary:
+      // the envelope is what is being signed, so it is the only source that
+      // cannot disagree with the bytes. xdr.js already renders every memo type
+      // to a plain string, so this is display-safe by construction.
+      memo: env.tx.memo || "(none)",
       deadline: rec.expiresAt || env.tx.cond?.timeBounds?.max || "",
       network: rec.network,
       wants: rec.wants || "",
     };
-    set("amount", `${current.amount} ${current.token}`);
+    // The amount is the one number a person must read. It gets the biggest type
+    // on the screen and the token sits next to it, so "4.50" is never read
+    // without its unit.
+    $("amount").replaceChildren();
+    const num = document.createElement("span");
+    num.textContent = current.amount;
+    const tk = document.createElement("span");
+    tk.className = "tk";
+    tk.textContent = " " + current.token;
+    $("amount").append(num, tk);
+    set("wantsBig", current.wants);
     set("token", current.issuer ? `${current.token} (${current.issuer.slice(0, 12)}\u2026)` : current.token);
     set("payee", current.payee);
     set("vault", current.vault);
@@ -269,7 +409,14 @@ async function openReview(id) {
     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);
+    // The network belongs in the header, not buried in the list: signing a
+    // testnet transaction and signing real money look identical otherwise, and
+    // the chip is the one place a person glances before holding the button.
+    set("netChip", current.network === "public" ? "mainnet" : current.network);
+    show("netChip", true);
+    $("netChip").style.color = current.network === "public" ? "var(--ok)" : "var(--warn)";
     err("signErr", "");
+    resetHold();
     show("review", true);
     show("queue", false);
     $("review").scrollIntoView({ behavior: "smooth", block: "start" });
@@ -286,18 +433,81 @@ function backToQueue() {
   refreshQueue();
 }
 
+// ------------------------------------------------------ hold-to-approve
+// Approving money is the expensive action; rejecting is the safe one. So Reject
+// is one tap and Approve needs a deliberate hold. This is what stops a pocket
+// tap, a mis-tap, and the person who taps Approve and only then starts reading.
+const HOLD_MS = 1200;
+let holdStart = 0, holdTimer = null;
+
+function resetHold() {
+  $("holdFill").style.width = "0";
+  $("holdLbl").textContent = "Hold to approve & sign";
+  $("approve").classList.remove("armed");
+}
+
+function armHold() {
+  holdStart = Date.now();
+  $("holdLbl").textContent = "Keep holding\u2026";
+  holdTimer = setInterval(() => {
+    const p = Math.min(1, (Date.now() - holdStart) / HOLD_MS);
+    $("holdFill").style.width = (p * 100) + "%";
+    if (p >= 1) {
+      clearInterval(holdTimer); holdTimer = null;
+      $("approve").classList.add("armed");
+      $("holdLbl").textContent = "Signed";
+      buzz([20, 40, 20]);
+      signAndSubmit();
+    }
+  }, 40);
+}
+
+function cancelHold() {
+  if (holdTimer) { clearInterval(holdTimer); holdTimer = null; }
+  if (!holdStart) return;
+  holdStart = 0;
+  if (!$("approve").classList.contains("armed")) resetHold();
+}
+
+function wireHold() {
+  const b = $("approve");
+  b.addEventListener("pointerdown", (e) => { e.preventDefault(); if (!holdTimer) armHold(); });
+  b.addEventListener("pointerup", cancelHold);
+  b.addEventListener("pointercancel", cancelHold);
+  b.addEventListener("pointerleave", cancelHold);
+  // keyboard / VoiceOver: hold is a pointer gesture, so Enter needs a confirm
+  b.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (!confirm("Approve and sign this payment?")) return;
+      $("holdFill").style.width = "100%";
+      signAndSubmit();
+    }
+  });
+}
+
 // ------------------------------------------------------------------ sign
 async function signAndSubmit() {
   if (!current) return;
-  if (!approverKey) { err("signErr", "no approver key on this device"); return; }
+  if (!approverKey && !native.available()) { 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)));
+    // One signer for both paths. The preimage is built here, from the hash this
+    // file computed, so the native side is asked to sign exactly what was on
+    // screen and is never handed a transaction to interpret.
+    const pre = X.signaturePreimage(hash);
+    const sig = new Uint8Array(await signPreimage(X.hex(pre)));
     if (!approverPubBytes) throw new Error("this device lost the approver's public key — re-import it");
+    // Prove the signature came from the key this screen named, before a byte
+    // of it leaves the device. A bridge that signs with some other key is then
+    // useless: its output never reaches the ledger.
+    if (!await globalThis.PaydluxVerify.verifySignature(sig, hash, approverPubBytes)) {
+      throw new Error("the signature does not match this key — nothing was sent");
+    }
     const signed = X.addSignature(current.xdr, sig, approverPubBytes);
     const out = await api("/signed/" + encodeURIComponent(current.id), {
       method: "POST",
@@ -312,8 +522,12 @@ async function signAndSubmit() {
     if (out.reason) set("resultLabel", out.reason);
     show("result", true);
     show("review", false);
+    buzz(out.status === "settled" ? [20, 40, 20] : 200);
+    badge(0);
   } catch (e) {
     err("signErr", e.message);
+    resetHold();
+    buzz(200);
   } finally {
     button.disabled = false;
   }
@@ -322,6 +536,7 @@ async function signAndSubmit() {
 async function reject(id) {
   try {
     await api("/deny/" + encodeURIComponent(id), { method: "POST" });
+    buzz(60);
     refreshQueue();
   } catch (e) {
     err("qerr", e.message);
@@ -359,7 +574,10 @@ async function readPasted() {
     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)));
+    const sig = new Uint8Array(await signPreimage(X.hex(X.signaturePreimage(hash))));
+    if (!await globalThis.PaydluxVerify.verifySignature(sig, hash, approverPubBytes)) {
+      throw new Error("the signature does not match this key — nothing was produced");
+    }
     set("signed", X.addSignature(xdr, sig, approverPubBytes));
     set("resultLabel", "Signed \u2014 send this back to the seller");
     $("resultTag").className = "tag ok";
@@ -385,6 +603,23 @@ async function boot() {
   paintKeyState();
   paintLinkState();
 
+  // iOS gives an installed PWA no browser chrome, and Safari offers no install
+  // button, so the instruction has to live inside the app. Shown once per device.
+  const standalone = matchMedia("(display-mode: standalone)").matches
+    || navigator.standalone === true;
+  show("install", !standalone && !localStorage.getItem("paydlux.installDismissed"));
+  $("install").addEventListener("click", () => {
+    localStorage.setItem("paydlux.installDismissed", "1");
+    show("install", false);
+  });
+
+  // The offline shell: the app launches from cache with its icon and code even
+  // with no network, then fails honestly when it tries to read the queue. It
+  // never caches payment data — see sw.js.
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("sw.js", { scope: "./" }).catch(() => { /* not fatal */ });
+  }
+
   $("enrolBtn").addEventListener("click", async () => {
     err("enrolErr", "");
     try {
@@ -395,6 +630,7 @@ async function boot() {
       err("enrolErr", e.message);
     }
   });
+  $("seed").addEventListener("keydown", (e) => { if (e.key === "Enter") $("enrolBtn").click(); });
   $("forget").addEventListener("click", async () => {
     await idbDel();
     localStorage.removeItem("paydlux.pub");
@@ -411,7 +647,7 @@ async function boot() {
     paintLinkState();
     refreshQueue();
   });
-  $("approve").addEventListener("click", signAndSubmit);
+  wireHold();
   $("reject").addEventListener("click", () => current && reject(current.id) && backToQueue());
   $("again").addEventListener("click", backToQueue);
   $("read").addEventListener("click", readPasted);
@@ -421,9 +657,23 @@ async function boot() {
     setTimeout(() => { $("copy").textContent = "Copy"; }, 1500);
   });
 
+  // Poll only while visible. An approver app left open on a phone should not
+  // wake the radio every few seconds in a pocket.
+  const startPolling = () => {
+    if (queueTimer) return;
+    queueTimer = setInterval(refreshQueue, 4000);
+    refreshQueue();
+  };
+  const stopPolling = () => { if (queueTimer) { clearInterval(queueTimer); queueTimer = null; } };
+  document.addEventListener("visibilitychange", () => {
+    if (document.hidden) stopPolling(); else if (key()) startPolling();
+  });
+  window.addEventListener("online", () => { show("offline", false); refreshQueue(); });
+  window.addEventListener("offline", () => show("offline", true));
+
   if (key()) {
     await refreshQueue();
-    queueTimer = setInterval(refreshQueue, 4000);
+    if (!document.hidden) startPolling();
     const id = new URLSearchParams(localStorage.getItem(LINK)?.split("?")[1] || "").get("id");
     if (id) openReview(id);
   }