dsh-composer-plus 1.9.1 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-composer-plus",
-  "version": "1.9.1",
+  "version": "1.11.0",
   "description": "DeepSeek Harness helpers: 11 extra UI languages (Türkçe, Español, Français, Deutsch, 日本語…), Changes panel, swipe-card feature ideas, sidebar search in message text, turn rollback with git file restore, delete chats to the Trash, input history, Shift+Tab /plan, one-click Continue, resume running chats after a restart, queue drag-and-drop, deeplinks, Auto Review allow-for-chat, notifications, iPhone access with the Tether app, automatic updates",
   "icon": "./assets/icon.svg",
   "license": "MIT",
@@ -73,7 +73,7 @@
     "assets/features/*.webp"
   ],
   "scripts": {
-    "test": "node scripts/build-locales.mjs --check && node test/locale.test.mjs && node test/continue.test.mjs && node test/continue-host.test.mjs && node test/resume-restart.test.mjs && node test/content-search.test.mjs && node test/turn-rollback.test.mjs && node test/turn-rollback-client.test.mjs && node test/delete-chat.test.mjs && node test/project-name.test.mjs && node test/queue-drag.test.mjs && node test/plan-toggle.test.mjs && node test/keep-focus.test.mjs && node test/mobile-connect.test.mjs && node test/tether-gateway.test.mjs && node test/deeplink.test.mjs && node test/chat-grant.test.mjs && node test/notify.test.mjs && node test/changes.test.mjs && node test/feature-ideas.test.mjs && node test/feature-ideas-client.test.mjs && node test/project-status.test.mjs && node test/recent-projects.test.mjs && node test/project-tools.test.mjs && node test/status-order.test.mjs && node test/toggles.test.mjs && node test/update.test.mjs && node test/meta.test.mjs && node test/shots.test.mjs",
+    "test": "node scripts/build-locales.mjs --check && node test/locale.test.mjs && node test/continue.test.mjs && node test/continue-host.test.mjs && node test/resume-restart.test.mjs && node test/content-search.test.mjs && node test/turn-rollback.test.mjs && node test/turn-rollback-client.test.mjs && node test/delete-chat.test.mjs && node test/export-chat.test.mjs && node test/project-name.test.mjs && node test/queue-drag.test.mjs && node test/queue-move.test.mjs && node test/plan-toggle.test.mjs && node test/keep-focus.test.mjs && node test/mobile-connect.test.mjs && node test/tether-gateway.test.mjs && node test/tether-parity.test.mjs && node test/deeplink.test.mjs && node test/chat-grant.test.mjs && node test/notify.test.mjs && node test/changes.test.mjs && node test/feature-ideas.test.mjs && node test/feature-ideas-client.test.mjs && node test/project-status.test.mjs && node test/recent-projects.test.mjs && node test/project-tools.test.mjs && node test/project-picker.test.mjs && node test/predict.test.mjs && node test/predict-client.test.mjs && node test/complete.test.mjs && node test/complete-client.test.mjs && node test/status-order.test.mjs && node test/toggles.test.mjs && node test/update.test.mjs && node test/meta.test.mjs && node test/shots.test.mjs && node test/readme.test.mjs",
     "build:locales": "node scripts/build-locales.mjs",
     "prepublishOnly": "npm test"
   },

package/tether/gateway/admin.html

@@ -4,100 +4,180 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Tether</title>
 <style>
-  :root { color-scheme: light dark; font: 14px -apple-system, system-ui, sans-serif; --line: #8883; --card: #8881; }
-  body { max-width: 720px; margin: 2rem auto; padding: 0 1rem; }
-  h1 { font-size: 1.4rem; margin-bottom: .2rem; } h2 { font-size: 1rem; margin: 1.6rem 0 .5rem; }
-  table { border-collapse: collapse; width: 100%; } td, th { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
-  code { word-break: break-all; font-size: 12px; } .muted { opacity: .65; }
-  button { font: inherit; padding: .35rem .8rem; border-radius: 8px; border: 1px solid var(--line); background: var(--card); cursor: pointer; margin-right: .4rem; }
-  button.primary { background: #0a84ff; color: #fff; border-color: #0a84ff; }
-  .card { border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 1rem 1.2rem; margin: 1rem 0; }
-  .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }
-  .ok { background: #30d158; } .bad { background: #ff453a; } .warn { background: #ff9f0a; }
-  #pair-card { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
-  #qr { width: 220px; height: 220px; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: 10px; }
-  ol { padding-left: 1.2rem; margin: .4rem 0; } li { margin: .3rem 0; }
-  .alert { border-color: #ff9f0a; background: #ff9f0a22; }
-  details summary { cursor: pointer; }
-  /* ?embed=1: shown inside DSH's "Mobile connect" popover */
-  .embed body { max-width: none; margin: 0; padding: 0 12px 12px; background: transparent; font-size: 13px; overflow: hidden; }
-  .embed h1, .embed ol, .embed #gw, .embed #remote:empty { display: none; }
-  .embed p { margin: 0 0 4px; } .embed h2 { font-size: 13px; margin: 10px 0 4px; }
-  .embed .card { padding: 10px; margin: 8px 0; border-radius: 12px; }
-  .embed #pair-card { flex-wrap: nowrap; gap: 12px; } .embed #qr { width: 132px; height: 132px; padding: 6px; }
-  .embed td, .embed th { padding: .3rem .4rem; } .embed button { padding: .25rem .65rem; }
-  .embed-only { display: none; } .embed .embed-only { display: block; }
+  :root { color-scheme: light dark; font: 13px/1.45 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+    --fg: #1d1d1f; --mute: #6e6e73; --line: rgba(0,0,0,.1); --soft: rgba(0,0,0,.04); --blue: #0071e3; --green: #1f9d55; --orange: #c25e00; --red: #d70015; }
+  @media (prefers-color-scheme: dark) { :root { --fg: #f5f5f7; --mute: #98989d; --line: rgba(255,255,255,.12); --soft: rgba(255,255,255,.06); --blue: #0a84ff; --green: #32d74b; --orange: #ff9f0a; --red: #ff453a; } }
+  * { box-sizing: border-box; }
+  [hidden] { display: none !important; } /* .pair and .wait set display; hidden must still win */
+  body { max-width: 560px; margin: 32px auto; padding: 0 20px; color: var(--fg); }
+  h1 { font-size: 20px; font-weight: 600; margin: 0 0 2px; letter-spacing: -.01em; }
+  h2 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); margin: 24px 0 6px; }
+  p { margin: 0; } .mute { color: var(--mute); } code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
+  a { color: var(--blue); }
+  button { font: inherit; font-weight: 500; padding: 5px 12px; border-radius: 7px; border: 1px solid var(--line); background: var(--soft); color: inherit; cursor: pointer; }
+  button:hover { background: var(--line); }
+  button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
+  button.link { border: 0; background: none; padding: 0; color: var(--blue); font-weight: 400; }
+  button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
+  .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--mute); }
+  .dot.ok { background: var(--green); } .dot.warn { background: var(--orange); } .dot.bad { background: var(--red); }
+  #status { margin-top: 2px; }
+
+  /* Pair: QR on the left, three short steps on the right. */
+  .pair { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; margin-top: 20px; }
+  .qrbox { width: 184px; height: 184px; border-radius: 12px; background: #fff; padding: 10px; border: 1px solid var(--line); display: grid; place-items: center; }
+  #qr { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
+  .qrbox .wait { color: #6e6e73; font-size: 12px; }
+  ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
+  ol.steps li { counter-increment: s; position: relative; padding-left: 26px; margin: 0 0 10px; }
+  ol.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
+  .tools { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; }
+  #exp { font-variant-numeric: tabular-nums; }
+
+  /* A waiting request takes the QR's place: the one thing to do. */
+  .req { margin-top: 20px; border: 1px solid var(--blue); border-radius: 12px; padding: 16px; background: color-mix(in srgb, var(--blue) 7%, transparent); }
+  .req .who { font-size: 15px; font-weight: 600; }
+  .req .acts { display: flex; gap: 8px; margin-top: 12px; }
+  .req .acts .primary { padding: 7px 18px; }
+  .note { margin-top: 14px; padding: 9px 12px; border-radius: 9px; background: var(--soft); }
+  .note.ok { color: var(--green); } .note.warn { color: var(--orange); }
+
+  table { width: 100%; border-collapse: collapse; }
+  td { padding: 7px 0; border-top: 1px solid var(--line); vertical-align: middle; } td:last-child { text-align: right; }
+  tr:first-child td { border-top: 0; }
+  details { margin-top: 24px; } summary { cursor: pointer; color: var(--mute); font-size: 12px; }
+  #status-table td { text-align: left; overflow-wrap: anywhere; } #status-table td:first-child { color: var(--mute); width: 30%; }
+  #status-table .link { margin-left: 8px; font-size: 12px; }
+  .addrow { margin-top: 8px; }
+
+  /* ?embed=1: inside DSH's "Mobile connect" popover */
+  .embed body { max-width: none; margin: 0; padding: 4px 12px 12px; background: transparent; overflow: hidden; }
+  .embed h1, .embed #remote:empty { display: none; }
+  .embed .pair { margin-top: 10px; gap: 14px; } .embed .qrbox { width: 148px; height: 148px; padding: 8px; }
+  .embed .req { margin-top: 10px; } .embed h2 { margin-top: 14px; } .embed details { margin-top: 12px; }
+  .embed ol.steps li { margin-bottom: 7px; }
 </style>
 <script>if (/[?&]embed\b/.test(location.search)) document.documentElement.classList.add('embed')</script>
 <h1>Tether</h1>
-<p class="muted" id="summary">Loading…</p>
-<p class="muted" id="remote"></p>
-<section id="pending-card" class="card alert" hidden>
-  <strong>An iPhone wants to connect</strong>
-  <table id="pending"></table>
+<p id="status" class="mute">Loading…</p>
+<p id="remote" class="mute"></p>
+
+<section id="req" class="req" hidden aria-live="assertive">
+  <p class="who" id="req-who"></p>
+  <p class="mute" id="req-sub"></p>
+  <div class="acts"><button class="primary" id="approve">Approve</button><button id="deny">Deny</button></div>
 </section>
-<section class="card" id="pair-card">
-  <img id="qr" alt="Pairing QR code" hidden>
+
+<section id="pair" class="pair">
+  <div class="qrbox"><img id="qr" alt="Pairing code for Tether" hidden><span class="wait" id="qr-wait">Making a code…</span></div>
   <div>
-    <strong>Pair an iPhone</strong>
-    <p class="muted embed-only">Scan in Tether, then Approve here.</p>
-    <ol>
-      <li>Open Tether on the iPhone (same Wi-Fi as this Mac, or Tailscale on both).</li>
-      <li>Tap <em>Scan QR code</em> and point it at this code.</li>
-      <li>Click <em>Approve</em> here when the request appears.</li>
+    <ol class="steps">
+      <li id="step-cam">Open the iPhone <strong>Camera</strong> and point it at the code, then tap <strong>Open in Tether</strong>. Or tap <strong>Scan code</strong> in Tether.</li>
+      <li id="step-app" hidden>Open Tether on the iPhone and tap <strong>Scan code</strong>.</li>
+      <li>Tap <strong>Connect</strong> on the iPhone.</li>
+      <li>Click <strong>Approve</strong> here.</li>
     </ol>
-    <p class="muted" id="exp"></p>
-    <button id="pair">New code</button>
-    <details><summary class="muted">Can't scan? Paste this code instead</summary><code id="payload"></code></details>
+    <p class="mute">The iPhone needs the Tether app and the same Wi‑Fi as this Mac (or Tailscale on both).</p>
+    <div class="tools"><span class="mute" id="exp"></span><button class="link" id="new">New code</button><button class="link" id="copy">Copy pairing link</button><button class="link" id="cancel-add" hidden>Cancel</button></div>
   </div>
 </section>
-<h2>Paired devices</h2>
+<p id="note" class="note" hidden role="status"></p>
+
+<h2>Paired iPhones</h2>
 <table id="devices"></table>
-<details id="gw"><summary class="muted">Gateway details</summary>
-  <p><button id="start">Start</button><button id="stop">Stop</button></p>
-  <table id="status"></table>
+<p class="addrow" id="addrow" hidden><button id="add">Add an iPhone</button></p>
+
+<details id="gw"><summary>Connection details</summary>
+  <table id="status-table"></table>
+  <p style="margin-top:8px"><button id="start">Start</button> <button id="stop">Stop</button></p>
 </details>
 <script>
 const $ = id => document.getElementById(id)
 const esc = s => String(s).replace(/[&<>"']/g, c => '&#' + c.charCodeAt(0) + ';')
-const post = (path, body) => fetch(path, { method: 'POST', headers: { 'x-dsh-admin': '1', 'content-type': 'application/json' }, body: JSON.stringify(body ?? {}) })
-  .then(r => r.json()).then(s => s.error ? alert(s.error) : render(s))
-let lastPayload, expiresAt, asking = false
 const embed = document.documentElement.classList.contains('embed')
+let state, lastPayload, asking = false, busy = false, flash = null
+// With a paired iPhone the code hides behind "Add an iPhone"; a newly paired iPhone hides it again.
+let adding = false, paired = 0
+// Write only a change: a table rebuilt every second can lose a click on its buttons.
+const put = (id, html) => { if ($(id).innerHTML !== html) $(id).innerHTML = html }
+const short = fp => fp.length > 20 ? fp.slice(0, 8) + '…' + fp.slice(-8) : fp
+const say = (text, kind = '') => { flash = { text, kind, until: Date.now() + 8000 }; paintNote() }
+// One change at a time: a second click while a request runs does nothing.
+async function post(path, body) {
+  if (busy) return
+  busy = true
+  try {
+    const r = await fetch(path, { method: 'POST', headers: { 'x-dsh-admin': '1', 'content-type': 'application/json' }, body: JSON.stringify(body ?? {}) })
+    const s = await r.json()
+    if (s.error) say(s.error, 'warn'); else render(s)
+  } catch { say('The Tether gateway did not answer. Is DSH still running?', 'warn') }
+  finally { busy = false }
+}
+const left = iso => Math.max(0, Math.round((Date.parse(iso) - Date.now()) / 1000))
+const mmss = s => Math.floor(s / 60) + ':' + String(s % 60).padStart(2, '0')
+const RESULT = {
+  approved: n => [n + ' is connected.', 'ok'],
+  denied: n => ['You denied ' + n + '.', ''],
+  cancelled: n => [n + ' stopped waiting before you clicked Approve. Scan the code again on the iPhone.', 'warn'],
+  expired: n => ['The request from ' + n + ' timed out. Scan the code again on the iPhone.', 'warn'],
+}
+function paintNote() {
+  const l = state?.last, f = flash && flash.until > Date.now() ? flash : null
+  const [text, kind] = f ? [f.text, f.kind] : l && RESULT[l.result] ? RESULT[l.result](l.name) : ['', '']
+  $('note').hidden = !text; $('note').textContent = text; $('note').className = 'note ' + kind
+}
 function render(s) {
-  const t = s.tailscale ?? {}
-  $('remote').innerHTML = embed ? (t.online && t.ip ? '<span class="dot ok"></span>Tailscale <code>' + esc(t.ip) + '</code>' : t.installed ? '<span class="dot warn"></span>Tailscale off' : '')
-    : 'Remote access: ' + (!t.installed ? 'install <a href="https://tailscale.com/download" target="_blank" rel="noopener">Tailscale</a> on this Mac and the iPhone (same account) to connect away from home.'
-    : !t.online || !t.ip ? '<span class="dot warn"></span>Tailscale is off. Turn it on to reach this Mac away from home.'
-    : '<span class="dot ok"></span>Phones connect remotely via <code>' + esc(t.ip + ':' + s.port) + '</code>' + (t.name ? ' (' + esc(t.name) + ')' : ''))
-  $('status').innerHTML = [['Gateway', s.running ? 'running' : 'stopped'], ['IP', s.address ?? 'no Wi-Fi address'], ['Port', s.port],
-    ['TLS', s.tls], ['Fingerprint (SHA-256)', s.fingerprint ?? '-'], ['DSH host', s.upstream]]
-    .map(([k, v]) => '<tr><th>' + k + '</th><td><code>' + esc(v) + '</code></td></tr>').join('')
-  const dsh = s.upstream === 'connected'
-  $('summary').innerHTML = !s.running ? '<span class="dot bad"></span>Gateway stopped' + (s.address ? '' : ' (no Wi-Fi address)')
-    : '<span class="dot ' + (dsh ? 'ok' : 'warn') + '"></span>' + (dsh ? 'Ready' : 'DSH not reachable: ' + esc(s.upstream)) +
-      (embed ? ' · Wi-Fi <code>' : ' · phones connect to <code>') + esc(s.address + ':' + s.port) + '</code>'
-  // Keep a fresh code on screen while this page is open; codes are one-time and still need Approve.
-  if (!s.code && s.running && !asking && document.visibilityState === 'visible') { asking = true; post('/pair').finally(() => { asking = false }) }
-  expiresAt = s.code && Date.parse(s.code.expiresAt)
-  if (s.code) {
-    $('payload').textContent = s.code.payload
-    if (s.code.qr && lastPayload !== s.code.payload) { lastPayload = s.code.payload; $('qr').src = '/qr.png?t=' + Date.now() }
+  state = s
+  const t = s.tailscale ?? {}, dsh = s.upstream === 'connected'
+  $('status').innerHTML = !s.running ? '<span class="dot bad"></span>Off' + (s.address ? '' : ': this Mac has no Wi‑Fi address')
+    : '<span class="dot ' + (dsh ? 'ok' : 'warn') + '"></span>' + (dsh ? 'Ready for iPhones' : 'DSH is not answering') + ' · ' + esc(s.mac)
+  $('remote').innerHTML = !s.running ? '' : t.online && t.ip ? 'Away from home: Tailscale is on (' + esc(t.ip) + ').'
+    : embed ? '' : t.installed ? 'Away from home: turn Tailscale on.' : 'Away from home: install <a href="https://tailscale.com/download" target="_blank" rel="noopener">Tailscale</a> on this Mac and the iPhone.'
+
+  // One waiting request at a time is the normal case; show the oldest.
+  const p = s.pending[0]
+  if (s.devices.length > paired) adding = false
+  paired = s.devices.length
+  const showPair = !p && (paired === 0 || adding)
+  $('req').hidden = !p; $('pair').hidden = !showPair
+  $('addrow').hidden = !!p || showPair; $('cancel-add').hidden = paired === 0
+  if (p) {
+    $('req-who').textContent = p.name + ' wants to connect'
+    // An older gateway (before a dsh restart) sends no expiresAt: it waits 120 s.
+    $('req-sub').textContent = 'From ' + p.ip.replace(/^::ffff:/, '') + ' · ' + mmss(left(p.expiresAt ?? new Date(p.at + 120e3).toISOString())) + ' left' + (s.pending.length > 1 ? ' · ' + (s.pending.length - 1) + ' more waiting' : '')
+    $('approve').dataset.id = $('deny').dataset.id = p.id
   }
-  $('qr').hidden = !s.code?.qr
-  tick()
-  $('pending-card').hidden = !s.pending.length
-  $('pending').innerHTML = s.pending.map(p => '<tr><td>' + esc(p.name) + '</td><td class="muted">' + esc(p.ip) + '</td><td>' +
-    '<button class="primary" data-a="approve" data-id="' + esc(p.id) + '">Approve</button><button data-a="deny" data-id="' + esc(p.id) + '">Deny</button></td></tr>').join('')
-  $('devices').innerHTML = s.devices.map(d => '<tr><td><span class="dot ' + (d.connections ? 'ok' : 'bad') + '"></span>' + esc(d.name) + '</td><td class="muted">' +
-    (d.connections ? 'online' : 'offline') + (embed ? '' : ' · expires ' + esc(new Date(d.expiresAt).toLocaleDateString())) +
-    '</td><td><button data-a="revoke" data-id="' + esc(d.id) + '">Revoke</button></td></tr>').join('') || '<tr><td class="muted">No iPhone paired yet</td></tr>'
-}
-function tick() {
-  const left = expiresAt ? Math.max(0, Math.round((expiresAt - Date.now()) / 1000)) : 0
-  const mmss = Math.floor(left / 60) + ':' + String(left % 60).padStart(2, '0')
-  $('exp').textContent = left ? (embed ? 'Code valid ' : 'One-time code, valid for ') + mmss : 'Preparing a code…'
+
+  // Keep a fresh code on screen while the code shows; codes are one-time and still need Approve.
+  if (!s.code && s.running && showPair && !asking && document.visibilityState === 'visible') { asking = true; post('/pair').finally(() => { asking = false }) }
+  if (s.code?.qr && lastPayload !== s.code.payload) { lastPayload = s.code.payload; $('qr').src = '/qr.png?t=' + Date.now() }
+  $('qr').hidden = !s.code?.qr; $('qr-wait').hidden = !!s.code?.qr
+  $('qr-wait').textContent = s.running ? 'Making a code…' : 'Gateway is off'
+  $('exp').textContent = s.code ? 'Code works for ' + mmss(left(s.code.expiresAt)) : ''
+  // A gateway from before a dsh restart still makes a JSON code: the Camera app cannot open that one.
+  const cam = !s.code || s.code.payload.startsWith('tether://')
+  $('step-cam').hidden = !cam; $('step-app').hidden = cam
+  paintNote()
+
+  put('devices', s.devices.map(d => '<tr><td><span class="dot ' + (d.connections ? 'ok' : '') + '"></span>' + esc(d.name) +
+    ' <span class="mute">' + (d.connections ? 'online' : 'offline') + '</span></td><td><button class="link" data-revoke="' + esc(d.id) + '">Remove</button></td></tr>').join('')
+    || '<tr><td class="mute">No iPhone yet.</td></tr>')
+  // The certificate hash is long: a short form fits the popover, Copy gives the whole value.
+  const cert = s.fingerprint ? '<code title="SHA-256: ' + esc(s.fingerprint) + '">' + esc(short(s.fingerprint)) + '</code><button class="link" data-copy="' + esc(s.fingerprint) + '">Copy</button>' : '<code>-</code>'
+  put('status-table', [['Gateway', s.running ? 'running' : 'stopped'], ['Address', (s.address ?? 'no Wi‑Fi address') + ':' + s.port], ['DSH', s.upstream]]
+    .map(([k, v]) => '<tr><td>' + k + '</td><td><code>' + esc(v) + '</code></td></tr>').join('') + '<tr><td>Certificate</td><td>' + cert + '</td></tr>')
 }
+setInterval(() => { if (state) render(state) }, 1000)
+document.addEventListener('click', e => {
+  const b = e.target.closest('button'); if (!b) return
+  if (b.id === 'approve' || b.id === 'deny') post('/' + b.id, { id: b.dataset.id })
+  else if (b.dataset.revoke) { if (confirm('Remove this iPhone? It disconnects now and must pair again.')) post('/revoke', { id: b.dataset.revoke }) }
+  else if (b.id === 'copy') { if (state?.code) navigator.clipboard.writeText(state.code.payload).then(() => say('Pairing link copied. Paste it in Tether on the iPhone.', 'ok'), () => say('Could not copy.', 'warn')) }
+  else if (b.dataset.copy) navigator.clipboard.writeText(b.dataset.copy).then(() => say('Certificate hash copied.', 'ok'), () => say('Could not copy.', 'warn'))
+  else if (b.id === 'add' || b.id === 'cancel-add') { adding = b.id === 'add'; if (state) render(state) }
+  else if (b.id === 'new') post('/pair')
+  else if (b.id === 'start' || b.id === 'stop') post('/' + b.id)
+})
 // Embedded in DSH: report our height so the popover fits the content and never scrolls.
 if (embed && parent !== window) {
   let last = 0
@@ -105,13 +185,7 @@ if (embed && parent !== window) {
   const report = () => { const h = Math.ceil(document.body.getBoundingClientRect().height); if (h !== last) { last = h; parent.postMessage({ type: 'dshm-height', h }, '*') } }
   new ResizeObserver(report).observe(document.body); addEventListener('load', report)
 }
-setInterval(tick, 1000)
-document.addEventListener('click', e => {
-  const b = e.target.closest('button'); if (!b) return
-  if (b.dataset.a) { if (b.dataset.a !== 'revoke' || confirm('Revoke this device? Its connections close immediately.')) post('/' + b.dataset.a, { id: b.dataset.id }) }
-  else post('/' + b.id)
-})
-const poll = () => fetch('/state').then(r => r.json()).then(render).catch(() => {}).finally(() => setTimeout(poll, 1500))
+const poll = () => fetch('/state').then(r => r.json()).then(render).catch(() => {}).finally(() => setTimeout(poll, 1000))
 poll()
 </script>
 </html>

package/tether/gateway/server.mjs

@@ -34,12 +34,36 @@ export const RPC = new Set([
   'skills/list', 'commands/list', 'commands/execute',
 ])
 export const STREAMS = new Set(['session/follow', 'session/control', 'workspace/follow', 'userQuestions/attachWait'])
+/** dsh-composer-plus routes the phone may call, with their methods: `/plus/<name>` → dsh `/api/composer-plus.<name>`.
+ * Only the chat-level features; never the switches (`{on}`), the updater, the screenshots or the Mobile connect route,
+ * so a phone cannot turn features off, install code or open ports. */
+export const PLUS = new Map([
+  ['changes', ['GET']], ['diff', ['GET']], ['continue', ['POST']], ['grants', ['GET', 'POST']],
+  ['rollback', ['GET', 'POST']], ['delete-chat', ['POST']], ['ideas', ['POST']], ['later', ['GET', 'POST']], ['idea-history', ['GET', 'POST']],
+  ['queue-move', ['POST']], ['predict', ['POST']], ['complete', ['POST']],
+])
+/** Allow for this chat: an Auto Review ask (`approval/request` with this reason) for a tool that the chat granted. */
+export const AUTO_REVIEW_ASK = 'Auto review denied tool '
+export const isGrantedAsk = (v, grants) => v.event === 'approval/request' && typeof v.request?.reason === 'string'
+  && v.request.reason.startsWith(AUTO_REVIEW_ASK) && typeof v.request.toolName === 'string' && typeof v.agentId === 'string'
+  && Array.isArray(grants?.[v.agentId]) && grants[v.agentId].includes(v.request.toolName)
+/** A switch body (`{on: true|false}`) or a setting (`{model}`) changes the Mac for every device: the phone never sends one. */
+const isSwitch = b => Object.hasOwn(b, 'on') || Object.hasOwn(b, 'model')
 export const EVENTS = new Set([
   'agent-preset/selected', 'approval/request', 'api-session/activity', 'api-session/added', 'api-session/error',
   'api-session/removed', 'api-session/status', 'commands/change', 'goal/activation-changed',
   'permission-presets/catalog-changed', 'user-questions/request',
 ])
 
+/** The QR / paste text: a tether:// link, so the iPhone Camera app offers "Open in Tether" (raw JSON only offered a web
+ * search). Tether still accepts the old JSON text. Opening the link never pairs by itself: the app asks first. */
+export function pairLink({ host, port, fp, code, mac, ts }) {
+  const q = new URLSearchParams({ v: '1', host: String(host ?? ''), port: String(port), fp, code })
+  if (mac) q.set('mac', mac)
+  if (ts) q.set('ts', ts)
+  return 'tether://pair?' + String(q).replace(/\+/g, '%20') // URLSearchParams writes a space as '+'; iOS URL parsing reads '+' as '+'
+}
+
 const sha = s => createHash('sha256').update(s).digest('hex')
 const safeEq = (a, b) => timingSafeEqual(Buffer.from(sha(a), 'hex'), Buffer.from(sha(b), 'hex'))
 const ip4 = s => s.split('.').reduce((n, o) => (n << 8) + Number(o), 0) >>> 0
@@ -211,8 +235,8 @@ function makeUpstream(upstreamUrl) {
     }
   }
   return {
-    rpc: (path, body) => retry(async () => {
-      const r = await send('POST', base + path, body, { 'content-type': 'application/json', cookie })
+    rpc: (path, body, method = 'POST') => retry(async () => {
+      const r = await send(method, base + path, body, method === 'GET' ? { cookie } : { 'content-type': 'application/json', cookie })
       if (r.status === 401 || r.status === 403) throw Object.assign(new Error('upstream auth'), { status: r.status })
       return r
     }),
@@ -230,6 +254,7 @@ export function createGateway(opts = {}) {
   })
   const mac = opts.macName ?? macName()
   const codeTtl = opts.codeTtlMs ?? 5 * 60e3
+  const approveTtl = opts.approveTtlMs ?? 120e3
   const waterfallTtl = opts.waterfallTimeoutMs ?? 10 * 60e3
   mkdirSync(dir, { recursive: true, mode: 0o700 })
   const upstream = makeUpstream(opts.upstreamUrl)
@@ -296,10 +321,13 @@ export function createGateway(opts = {}) {
   }
 
   // ---- Pairing: one-time code (5 min) shown as QR, then explicit approval on the Mac. ----
+  // The latest outcome, kept 60 s so the Mac page can say what happened after the request card goes away.
+  let last = null
+  const record = (p, result) => { last = { name: p.name, result, at: Date.now() } }
   function newCode() {
     const net = bound ?? netInfo()
     code = { value: randomBytes(16).toString('base64url'), expires: Date.now() + codeTtl }
-    code.payload = JSON.stringify({ v: 1, host: net?.address, port, fp, code: code.value, mac, ...(ts.online && ts.ip ? { ts: ts.ip } : {}) })
+    code.payload = pairLink({ host: net?.address, port, fp, code: code.value, mac, ts: ts.online ? ts.ip : null })
     qrReady = false
     if (opts.qr !== false) {
       const c = code
@@ -318,14 +346,17 @@ export function createGateway(opts = {}) {
     const p = { id: randomUUID(), name: String(b.name ?? 'iPhone').replace(/[\u0000-\u001f]/g, '').slice(0, 64) || 'iPhone', ip, at: Date.now(), res }
     pending.set(p.id, p)
     notify('Pairing request from ' + p.name)
-    const t = setTimeout(() => settle(p.id, false), 120e3)
-    res.on('close', () => { clearTimeout(t); pending.delete(p.id) })
+    const t = setTimeout(() => { if (pending.has(p.id)) { record(p, 'expired'); settle(p.id, false, false) } }, approveTtl)
+    // The phone gave up (Cancel, app closed, network gone): say so instead of letting the card just vanish.
+    res.on('close', () => { clearTimeout(t); if (pending.delete(p.id)) record(p, 'cancelled') })
   }
-  function settle(id, approve) {
+  function settle(id, approve, log = true) {
     const p = pending.get(id)
     if (!p) return false
     pending.delete(id)
-    if (!approve) { reply(p.res, 403, { error: 'pairing denied' }); return true }
+    if (p.res.destroyed || p.res.socket?.destroyed) { record(p, 'cancelled'); return false }
+    if (log) record(p, approve ? 'approved' : 'denied')
+    if (!approve) { reply(p.res, 403, { error: log ? 'pairing denied' : 'pairing expired' }); return true }
     const token = randomBytes(32).toString('base64url') // 256-bit; only its hash is stored
     const d = { id: randomUUID(), name: p.name, tokenHash: sha(token), createdAt: new Date().toISOString(), expiresAt: new Date(Date.now() + TOKEN_TTL).toISOString() }
     devices.push(d); saveDevices()
@@ -346,6 +377,7 @@ export function createGateway(opts = {}) {
     if (outcome) answer(id, outcome).catch(() => {})
     return true
   }
+  const looking = new Set() // approvals whose grants are being read
   function onEventFrame(text) {
     let f
     try { f = JSON.parse(text) } catch { return }
@@ -354,9 +386,25 @@ export function createGateway(opts = {}) {
     const v = f.value ?? {}
     if (v.type === 'ready') { ev.clientId = v.clientId; upState = 'connected'; return } // host.home is dropped here
     if (v.type === 'emit' && EVENTS.has(v.event)) return toPhones({ type: 'emit', event: v.event, args: v.args })
+    if (v.type === 'cancel') looking.delete(v.eventId)
     if (v.type === 'cancel' && dropPending(v.eventId)) return toPhones({ type: 'cancel', eventId: v.eventId })
     if (v.type !== 'waterfall') return
+    if (v.event === 'approval/request') return grantedOrAsk(v)
     if (!EVENTS.has(v.event) || !evSubs.size) return answer(v.eventId, { kind: 'next' }).catch(() => {})
+    askPhones(v)
+  }
+  /** Allow for this chat, also with no dsh window open: the gateway allows a granted tool itself (the grants that the
+   * desktop and the phone save in dsh-composer-plus). Any other approval goes to the phones. */
+  async function grantedOrAsk(v) {
+    let grants
+    looking.add(v.eventId)
+    try { const r = await upstream.rpc('/api/composer-plus.grants', undefined, 'GET'); if (r.status === 200) grants = JSON.parse(r.body) } catch {}
+    if (!looking.delete(v.eventId)) return // answered elsewhere (the desktop) while the grants were read
+    if (isGrantedAsk(v, grants)) return answer(v.eventId, { kind: 'result', value: 'allowed-once' }).catch(() => {})
+    if (!evSubs.size) return answer(v.eventId, { kind: 'next' }).catch(() => {})
+    askPhones(v)
+  }
+  function askPhones(v) {
     const frame = { type: 'waterfall', event: v.event, eventId: v.eventId, agentId: v.agentId, request: v.request }
     // shortcut: unanswered phone prompts fall back to 'next' (DSH desktop still decides) after a fixed timeout; make it configurable per event if users want longer.
     const timer = setTimeout(() => { if (dropPending(v.eventId, { kind: 'next' })) toPhones({ type: 'cancel', eventId: v.eventId }) }, waterfallTtl)
@@ -404,7 +452,8 @@ export function createGateway(opts = {}) {
     const dev = auth(req)
     if (!dev) { fail(ip); return reply(res, 401, { error: 'unauthorized' }) }
     track(dev.id, req.socket)
-    if (req.method === 'GET' && path === '/me') return reply(res, 200, { deviceId: dev.id, name: dev.name, expiresAt: dev.expiresAt, upstream: upState, tailscale: ts.online ? ts.ip : null, mac })
+    if (req.method === 'GET' && path === '/me') return reply(res, 200, { deviceId: dev.id, name: dev.name, expiresAt: dev.expiresAt, upstream: upState, tailscale: ts.online ? ts.ip : null, mac, plus: [...PLUS.keys()] })
+    if (path.startsWith('/plus/')) return plus(req, res, path.slice(6))
     if (req.method !== 'POST' || !path.startsWith('/api/')) return reply(res, 404, { error: 'not found' })
     const method = path.slice(5)
     let body
@@ -417,6 +466,22 @@ export function createGateway(opts = {}) {
       res.writeHead(up.status, { 'content-type': up.headers['content-type'] ?? 'application/json' }); res.end(up.body)
     } catch { reply(res, 502, { error: 'DSH host unavailable' }) }
   }
+  /** A dsh-composer-plus route (allowlist `PLUS`): the query (GET) or the JSON body (POST) goes to dsh as it is. */
+  async function plus(req, res, name) {
+    if (!PLUS.get(name)?.includes(req.method)) return reply(res, 403, { error: 'endpoint not allowed' })
+    let body
+    if (req.method === 'POST') {
+      try { body = JSON.parse(await readBody(req, MAX_BODY)) } catch { return reply(res, 400, { error: 'bad request' }) }
+      if (body === null || typeof body !== 'object' || Array.isArray(body)) return reply(res, 400, { error: 'bad request' })
+      if (isSwitch(body)) return reply(res, 403, { error: 'endpoint not allowed' })
+      body = JSON.stringify(body)
+    }
+    try {
+      const up = await upstream.rpc('/api/composer-plus.' + name + new URL(req.url, 'https://x').search, body, req.method)
+      // An older dsh-composer-plus without this route answers 404: the phone hides the feature.
+      res.writeHead(up.status, { 'content-type': up.headers['content-type'] ?? 'application/json' }); res.end(up.body)
+    } catch { reply(res, 502, { error: 'DSH host unavailable' }) }
+  }
   function onUpgrade(req, socket, head) {
     const ip = socket.remoteAddress
     if (!allowReq(ip)) return socket.end('HTTP/1.1 429 Too Many Requests\r\nConnection: close\r\n\r\n')
@@ -518,7 +583,8 @@ export function createGateway(opts = {}) {
     mac, running, address: bound?.address ?? netInfo()?.address ?? null, port, tls: running ? 'TLS 1.2+, self-signed' : 'off',
     fingerprint: fp ?? null, upstream: upState, tailscale: ts, lastTlsError,
     code: code && Date.now() < code.expires ? { payload: code.payload, expiresAt: new Date(code.expires).toISOString(), qr: qrReady } : null,
-    pending: [...pending.values()].map(({ id, name, ip, at }) => ({ id, name, ip, at })),
+    pending: [...pending.values()].map(({ id, name, ip, at }) => ({ id, name, ip, at, expiresAt: new Date(at + approveTtl).toISOString() })),
+    last: last && Date.now() - last.at < 60e3 ? { ...last, at: new Date(last.at).toISOString() } : null,
     devices: devices.map(({ tokenHash, ...d }) => ({ ...d, connections: devSockets.get(d.id)?.size ?? 0 })),
   })
 
@@ -537,8 +603,9 @@ export function createGateway(opts = {}) {
     try { b = JSON.parse((await readBody(req, 4096)) || '{}') } catch { return reply(res, 400, { error: 'bad request' }) }
     try {
       if (path === '/pair') { if (!running) await start(); else await refreshTs(); newCode() }
-      else if (path === '/approve') settle(b.id, true)
-      else if (path === '/deny') settle(b.id, false)
+      else if (path === '/approve' || path === '/deny') {
+        if (!settle(b.id, path === '/approve')) return reply(res, 409, { error: 'This request is no longer waiting. The iPhone stopped waiting or the request timed out. Scan the code again.' })
+      }
       else if (path === '/revoke') revoke(b.id)
       else if (path === '/start') await start()
       else if (path === '/stop') await stop()