dsh-composer-plus 1.4.1 → 1.5.0

package/index.js

@@ -5,12 +5,15 @@
  * - Persistent Auto Review grants: per-session tool names saved under the dsh home, so "Allow for this chat" survives a restart.
  * - Update check: the latest GitHub release, offered only once npm serves that exact version (the client installs it
  *   through dsh's own plugin manager).
+ * - Mobile connect (Tether): runs the iPhone gateway (tether/gateway/server.mjs) in this process while the user switches it
+ *   on; the switch is saved under the dsh home and is off by default.
  */
 import { readFileSync } from 'node:fs';
 import { mkdir, readFile, rename, writeFile } from 'node:fs/promises';
 import { randomUUID } from 'node:crypto';
 import { homedir } from 'node:os';
 import { dirname, join } from 'node:path';
+import { createGateway } from './tether/gateway/server.mjs';
 
 export const name = 'dsh-composer-plus';
 export const inject = ['connection', 'subprocess', 'sessionQuery', 'sessionController'];
@@ -21,9 +24,10 @@ export const GRANTS_PATH = '/api/composer-plus.grants';
 export const CONTINUE_PATH = '/api/composer-plus.continue';
 export const UPDATE_PATH = '/api/composer-plus.update';
 export const SHOT_PATH = '/api/composer-plus.shot';
+export const MOBILE_PATH = '/api/composer-plus.mobile';
 /** Feature screenshots shipped in assets/features/<id>.webp; only these ids are served (no path input). */
-export const SHOTS = ['changesPanel', 'projectStatus', 'recentProjects', 'collapseProjects', 'statusOrder', 'notifications', 'allowForChat', 'continueButton', 'inputHistory', 'planToggle',
-  'queueReorder', 'copyDeeplink', 'copyProjectPath', 'language', 'autoUpdate'];
+export const SHOTS = ['changesPanel', 'projectStatus', 'recentProjects', 'collapseProjects', 'statusOrder', 'notifications', 'allowForChat', 'continueButton', 'inputHistory', 'planToggle', 'keepFocus',
+  'queueReorder', 'mobileConnect', 'copyDeeplink', 'copyProjectPath', 'language', 'autoUpdate'];
 const PACKAGE = JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf8'));
 const NPM_NAME = 'dsh-composer-plus';
 const RELEASES_URL = 'https://api.github.com/repos/furkancak1r/dsh-composer-plus/releases/latest';
@@ -194,10 +198,64 @@ export async function checkUpdate(fetchImpl = fetch, pkg = PACKAGE, signal) {
   return { ...info, newer: npm.ok };
 }
 
+/** Mobile connect switch: `{ on: true }` in a JSON file, off when the file is missing or unreadable. */
+export function mobileSwitch(file) {
+  return {
+    read: async () => { try { return JSON.parse(await readFile(file, 'utf8'))?.on === true; } catch { return false; } },
+    write: async (on) => {
+      await mkdir(dirname(file), { recursive: true });
+      const tmp = `${file}.${process.pid}.tmp`;
+      await writeFile(tmp, JSON.stringify({ on }), { mode: 0o600 });
+      await rename(tmp, file);
+    },
+  };
+}
+
+/** Mobile connect: one gateway at a time. Start and stop calls run in order, so a fast toggle never leaves two gateways or a
+ * half-closed one. `upstreamUrl` gives dsh's authenticated loopback URL; it is asked again at each DSH login. */
+export function mobileGateway({ upstreamUrl, dir, make = createGateway, retryMs = 300 }) {
+  let gateway, admin, error, closed = false, queue = Promise.resolve();
+  const run = (fn) => (queue = queue.then(fn, fn));
+  // A plugin reload starts the new gateway while the old one still closes its pairing page: wait for the port (about 3 s).
+  const listenAdmin = async (g) => {
+    for (let attempt = 1; ; attempt++) {
+      try { return await g.listenAdmin(); } catch (e) {
+        if (e?.code !== 'EADDRINUSE' || attempt >= 10) throw e;
+        await new Promise((resolve) => setTimeout(resolve, retryMs));
+      }
+    }
+  };
+  const stop = async () => {
+    const g = gateway;
+    gateway = undefined; admin = undefined;
+    if (g !== undefined) await g.close().catch(() => {});
+  };
+  return {
+    start: () => run(async () => {
+      if (gateway !== undefined || closed) return;
+      error = undefined;
+      try {
+        gateway = make({ dir, upstreamUrl });
+        admin = `http://127.0.0.1:${await listenAdmin(gateway)}/`;
+        await gateway.start();
+      } catch (e) { error = String(e?.message ?? e); if (admin === undefined) await stop(); }
+    }),
+    stop: () => run(stop),
+    /** Plugin unload: stop, and ignore any start that comes later. */
+    close: () => { closed = true; return run(stop); },
+    state: () => {
+      const running = gateway?.state().running === true;
+      // The gateway retries by itself (for example when Wi-Fi comes back): a running gateway has no error to show.
+      return { running, admin, ...(error === undefined || running ? {} : { error }) };
+    },
+  };
+}
+
 const json = (value, status = 200) => Response.json(value, { status, headers: { 'cache-control': 'no-store' } });
 const isText = (v, max = 512) => typeof v === 'string' && v.length > 0 && v.length <= max;
 
 export function apply(ctx) {
+  const home = process.env.DSH_HOME || join(homedir(), '.dsh');
   // The empty wake marker opens the step; it is then replaced by a fresh context message. Only messages
   // claimed from the inbox render as a chat bubble, so the replacement stays out of Chat, but it gives the
   // model a final user turn: providers such as Claude reject a request that ends on an assistant message.
@@ -292,7 +350,7 @@ export function apply(ctx) {
       try { return json(await checkUpdate(fetch, PACKAGE, request.signal)); } catch (error) { return json({ error: String(error?.message ?? error) }, 502); }
     },
   });
-  const store = grantsStore(join(process.env.DSH_HOME || join(homedir(), '.dsh'), 'storages', 'dsh-composer-plus', 'grants.json'));
+  const store = grantsStore(join(home, 'storages', 'dsh-composer-plus', 'grants.json'));
   ctx.connection.fetch.register({
     path: GRANTS_PATH, methods: ['GET', 'POST'], requestBody: 'buffered',
     fetch: async (request) => {
@@ -304,4 +362,44 @@ export function apply(ctx) {
       return json({ error: 'bad request' }, 400);
     },
   });
+  // Mobile connect (Tether). The phone gateway needs dsh's web server for its loopback URL; a profile without one
+  // (headless) never starts it. Off until the user switches it on in Settings.
+  const mobileSaved = mobileSwitch(join(home, 'storages', 'dsh-composer-plus', 'mobile.json'));
+  let mobile;
+  let mobileOn; // the user's choice; the saved value applies only until the user changes it
+  const mobileRead = mobileSaved.read().then((on) => { mobileOn ??= on; });
+  let mobileQueue = Promise.resolve(); // one switch change at a time: save, then start or stop
+  ctx.inject?.(['webServer'], (webCtx) => {
+    const gateway = mobileGateway({
+      dir: process.env.DSH_MOBILE_DIR || join(home, 'storages', 'dsh-composer-plus', 'mobile'),
+      upstreamUrl: () => ctx.connection.authenticatedUrl(`http://127.0.0.1:${webCtx.webServer.port}`),
+    });
+    mobile = gateway;
+    webCtx.effect(() => {
+      mobileRead.then(() => { if (mobileOn && mobile === gateway) gateway.start(); });
+      return () => { if (mobile === gateway) mobile = undefined; gateway.close(); };
+    }, 'dsh-composer-plus: mobile connect');
+  });
+  ctx.connection.fetch.register({
+    path: MOBILE_PATH, methods: ['GET', 'POST'], requestBody: 'buffered',
+    fetch: async (request) => {
+      if (request.method === 'POST') {
+        let body;
+        try { body = await request.json(); } catch { return json({ error: 'bad request' }, 400); }
+        if (typeof body?.on !== 'boolean') return json({ error: 'bad request' }, 400);
+        const change = async () => {
+          await mobileRead;
+          await mobileSaved.write(body.on); // a failed save changes nothing
+          mobileOn = body.on;
+          if (mobile !== undefined) await (body.on ? mobile.start() : mobile.stop());
+        };
+        const done = mobileQueue.then(change);
+        mobileQueue = done.catch(() => {}); // a failed save answers only its own request
+        try { await done; } catch (error) { return json({ error: String(error?.message ?? error) }, 500); }
+      }
+      await mobileRead;
+      const on = mobileOn === true;
+      return json({ on, available: mobile !== undefined, ...(on && mobile !== undefined ? mobile.state() : { running: false }) });
+    },
+  });
 }

package/locale/de.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Composer Plus",
-    "description": "Änderungsansicht, Eingabeverlauf, Shift+Tab /plan, Fortsetzen mit einem Klick, Warteschlange per Drag-and-drop, Links, Benachrichtigungen, 11 Sprachen und automatische Updates."
+    "description": "Änderungsansicht, Eingabeverlauf, Shift+Tab /plan, Fortsetzen mit einem Klick, Warteschlange per Drag-and-drop, Links, Benachrichtigungen, iPhone-Zugriff (Tether), 11 Sprachen und automatische Updates."
   }
 }

package/locale/en.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Composer Plus",
-    "description": "Changes panel, input history, Shift+Tab /plan, one-click Continue, queue drag-and-drop, deeplinks, notifications, 11 UI languages and automatic updates."
+    "description": "Changes panel, input history, Shift+Tab /plan, one-click Continue, queue drag-and-drop, deeplinks, notifications, iPhone access (Tether), 11 UI languages and automatic updates."
   }
 }

package/locale/es.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Composer Plus",
-    "description": "Panel de cambios, historial de entrada, Shift+Tab /plan, Continuar con un clic, reordenar la cola arrastrando, enlaces, notificaciones, 11 idiomas y actualizaciones automáticas."
+    "description": "Panel de cambios, historial de entrada, Shift+Tab /plan, Continuar con un clic, reordenar la cola arrastrando, enlaces, notificaciones, acceso desde iPhone (Tether), 11 idiomas y actualizaciones automáticas."
   }
 }

package/locale/fr.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Composer Plus",
-    "description": "Panneau des modifications, historique de saisie, Shift+Tab /plan, Continuer en un clic, file réorganisable par glisser-déposer, liens, notifications, 11 langues et mises à jour automatiques."
+    "description": "Panneau des modifications, historique de saisie, Shift+Tab /plan, Continuer en un clic, file réorganisable par glisser-déposer, liens, notifications, accès depuis l’iPhone (Tether), 11 langues et mises à jour automatiques."
   }
 }

package/locale/hi.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Composer Plus",
-    "description": "बदलाव पैनल, इनपुट इतिहास, Shift+Tab /plan, एक क्लिक में जारी रखें, कतार ड्रैग-एंड-ड्रॉप, लिंक, सूचनाएं, 11 भाषाएं और अपने-आप अपडेट।"
+    "description": "बदलाव पैनल, इनपुट इतिहास, Shift+Tab /plan, एक क्लिक में जारी रखें, कतार ड्रैग-एंड-ड्रॉप, लिंक, सूचनाएं, iPhone से एक्सेस (Tether), 11 भाषाएं और अपने-आप अपडेट।"
   }
 }

package/locale/id.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Composer Plus",
-    "description": "Panel perubahan, riwayat input, Shift+Tab /plan, Lanjutkan sekali klik, urutkan antrean dengan seret, tautan, notifikasi, 11 bahasa, dan pembaruan otomatis."
+    "description": "Panel perubahan, riwayat input, Shift+Tab /plan, Lanjutkan sekali klik, urutkan antrean dengan seret, tautan, notifikasi, akses dari iPhone (Tether), 11 bahasa, dan pembaruan otomatis."
   }
 }

package/locale/ja.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Composer Plus",
-    "description": "変更パネル、入力履歴、Shift+Tab で /plan、ワンクリック続行、キューのドラッグ並べ替え、リンク、通知、11 言語、自動アップデート。"
+    "description": "変更パネル、入力履歴、Shift+Tab で /plan、ワンクリック続行、キューのドラッグ並べ替え、リンク、通知、iPhone からの操作（Tether）、11 言語、自動アップデート。"
   }
 }

package/locale/ko.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Composer Plus",
-    "description": "변경 사항 패널, 입력 기록, Shift+Tab /plan, 원클릭 계속, 대기열 끌어서 정렬, 링크, 알림, 11개 언어와 자동 업데이트."
+    "description": "변경 사항 패널, 입력 기록, Shift+Tab /plan, 원클릭 계속, 대기열 끌어서 정렬, 링크, 알림, iPhone 연결(Tether), 11개 언어와 자동 업데이트."
   }
 }

package/locale/pt-BR.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Composer Plus",
-    "description": "Painel de alterações, histórico de entrada, Shift+Tab /plan, Continuar com um clique, reordenar a fila arrastando, links, notificações, 11 idiomas e atualizações automáticas."
+    "description": "Painel de alterações, histórico de entrada, Shift+Tab /plan, Continuar com um clique, reordenar a fila arrastando, links, notificações, acesso pelo iPhone (Tether), 11 idiomas e atualizações automáticas."
   }
 }

package/locale/ru.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Composer Plus",
-    "description": "Панель изменений, история ввода, Shift+Tab /plan, продолжение в один клик, перетаскивание очереди, ссылки, уведомления, 11 языков и автообновления."
+    "description": "Панель изменений, история ввода, Shift+Tab /plan, продолжение в один клик, перетаскивание очереди, ссылки, уведомления, доступ с iPhone (Tether), 11 языков и автообновления."
   }
 }

package/locale/tr.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Composer Plus",
-    "description": "Değişiklikler paneli, giriş geçmişi, Shift+Tab /plan, tek tıkla devam, sıradaki mesajları sürükle-bırak, bağlantılar, bildirimler, 11 arayüz dili ve otomatik güncellemeler."
+    "description": "Değişiklikler paneli, giriş geçmişi, Shift+Tab /plan, tek tıkla devam, sıradaki mesajları sürükle-bırak, bağlantılar, bildirimler, iPhone’dan erişim (Tether), 11 arayüz dili ve otomatik güncellemeler."
   }
 }

package/locale/vi.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Composer Plus",
-    "description": "Bảng thay đổi, lịch sử nhập, Shift+Tab /plan, Tiếp tục một chạm, kéo thả hàng đợi, liên kết, thông báo, 11 ngôn ngữ và tự động cập nhật."
+    "description": "Bảng thay đổi, lịch sử nhập, Shift+Tab /plan, Tiếp tục một chạm, kéo thả hàng đợi, liên kết, thông báo, truy cập từ iPhone (Tether), 11 ngôn ngữ và tự động cập nhật."
   }
 }

package/locale/zh.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Composer Plus",
-    "description": "改动面板、输入历史、Shift+Tab /plan、一键继续、队列拖拽排序、会话链接、通知、11 种界面语言和自动更新。"
+    "description": "改动面板、输入历史、Shift+Tab /plan、一键继续、队列拖拽排序、会话链接、通知、iPhone 远程使用（Tether）、11 种界面语言和自动更新。"
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-composer-plus",
-  "version": "1.4.1",
-  "description": "DeepSeek Harness helpers: 11 extra UI languages (Türkçe, Español, Français, Deutsch, 日本語…), Changes panel, input history, Shift+Tab /plan, one-click Continue, queue drag-and-drop, deeplinks, Auto Review allow-for-chat, notifications, automatic updates",
+  "version": "1.5.0",
+  "description": "DeepSeek Harness helpers: 11 extra UI languages (Türkçe, Español, Français, Deutsch, 日本語…), Changes panel, input history, Shift+Tab /plan, one-click Continue, 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",
   "type": "module",
@@ -28,13 +28,19 @@
     "git-diff",
     "i18n",
     "input-history",
+    "ios",
+    "iphone",
     "localization",
+    "mobile",
     "notifications",
     "plan-mode",
     "plugin",
     "queue",
     "recent-projects",
+    "remote-control",
     "sort-by-status",
+    "tailscale",
+    "tether",
     "translation"
   ],
   "exports": {
@@ -46,16 +52,19 @@
   "files": [
     "index.js",
     "client.js",
+    "tether/gateway/server.mjs",
+    "tether/gateway/admin.html",
+    "tether/gateway/qr.swift",
     "locale/*.json",
     "assets/icon.svg",
     "cordis.patch.yml",
-    "README.md",
+    "/README.md",
     "LICENSE",
     "locales/LICENSE",
     "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/queue-drag.test.mjs && node test/plan-toggle.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/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/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/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",
     "build:locales": "node scripts/build-locales.mjs",
     "prepublishOnly": "npm test"
   },
@@ -76,7 +85,8 @@
         "@deepseek-ai/dsh-client-ui-session",
         "@deepseek-ai/dsh-api-remotes",
         "@deepseek-ai/dsh-api-session-controller",
-        "@deepseek-ai/dsh-client-ui-settings"
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-ui-sidebar"
       ]
     }
   },

package/tether/gateway/admin.html

@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="en">
+<meta charset="utf-8">
+<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; }
+</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>
+</section>
+<section class="card" id="pair-card">
+  <img id="qr" alt="Pairing QR code" hidden>
+  <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>
+    <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>
+  </div>
+</section>
+<h2>Paired devices</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>
+</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')
+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() }
+  }
+  $('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…'
+}
+// Embedded in DSH: report our height so the popover fits the content and never scrolls.
+if (embed && parent !== window) {
+  let last = 0
+  // body's own box, not scrollHeight: scrollHeight never drops below the iframe's current height
+  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))
+poll()
+</script>
+</html>

package/tether/gateway/qr.swift

@@ -0,0 +1,12 @@
+// Usage: swift qr.swift <text> <out.png>  (CoreImage QR, error correction M, 8x)
+import CoreImage
+import CoreImage.CIFilterBuiltins
+import Foundation
+
+let args = CommandLine.arguments
+guard args.count == 3 else { FileHandle.standardError.write("usage: qr.swift <text> <out.png>\n".data(using: .utf8)!); exit(2) }
+let filter = CIFilter.qrCodeGenerator()
+filter.message = Data(args[1].utf8)
+filter.correctionLevel = "M"
+let image = filter.outputImage!.transformed(by: CGAffineTransform(scaleX: 8, y: 8))
+try CIContext().writePNGRepresentation(of: image, to: URL(fileURLWithPath: args[2]), format: .RGBA8, colorSpace: CGColorSpaceCreateDeviceRGB())