@paydlux/agent 0.1.10 → 0.1.12

package/phone-app/index.html

@@ -4,9 +4,12 @@
 <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">
@@ -25,93 +28,164 @@
 
   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.
 
-  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.
+  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(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 }
+  .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:6px }
-  .qhead h2 { font-size:13px; margin:0; text-transform:uppercase; letter-spacing:.06em; color:var(--dim) }
+  .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:12px; padding:12px; margin-top:10px; background:#0d131a }
+  .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: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 .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; padding:9px 16px; font-size:14px }
-  .empty { color:var(--dim); font-size:14px; padding:14px 2px }
-  .hist { opacity:.62 }
-  .hist .amt { font-size:16px }
+  .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
@@ -124,7 +198,7 @@
 <!-- ------------------------------------------------------------ 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>
@@ -133,13 +207,13 @@
 <!-- -------------------------------------------------------- not linked -->
 <div class="panel hidden" id="nolink">
   <div class="tag bad">No approval link</div>
-  <div class="hint" style="margin-top:10px">
+  <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"
-         placeholder="https://desk.paydlux.com/phone/?k=...">
+         enterkeyhint="go" placeholder="https://desk.paydlux.com/phone/?k=...">
   <button id="linkBtn">Use this link</button>
   <div class="err" id="linkErr"></div>
 </div>
@@ -147,7 +221,7 @@
 <!-- ------------------------------------------------------------- queue -->
 <div class="panel hidden" id="queue">
   <div class="qhead">
-    <h2>Waiting for you</h2>
+    <h2 id="qtitle">Waiting for you</h2>
     <span class="when" id="qwhen"></span>
   </div>
   <div id="qlist"><div class="empty">loading&hellip;</div></div>
@@ -157,7 +231,8 @@
 <!-- ----------------------------------------------------------- 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>
@@ -171,8 +246,11 @@
     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>
 
@@ -183,7 +261,7 @@
      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>
+    <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>
@@ -206,6 +284,7 @@
 </div>
 
 <script src="xdr.js"></script>
+<script src="verify.js"></script>
 <script src="app.js"></script>
 </body>
 </html>

package/phone-app/manifest.webmanifest

@@ -1,4 +1,5 @@
 {
+  "id": "/phone/",
   "name": "Paydlux Approver",
   "short_name": "Paydlux",
   "description": "Signs Paydlux payment approvals on this device. The approver key never leaves it.",
@@ -6,10 +7,13 @@
   "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-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }
   ]
 }