dsh-zen-remote 1.0.0

package/pwa/inject.js

@@ -0,0 +1,190 @@
+/* dsh-mobile-pwa · PWA bootstrap (injected into DSH page)
+ * Runs on every device (desktop included): registers the service worker
+ * (offline cache + notifications) and wires the agent-done push opt-in
+ * unconditionally. Touch gestures are the only piece gated by device kind —
+ * loaded on everything that isn't explicitly marked "desktop", see below.
+ */
+(function () {
+  'use strict'
+  if (!window.__DSH_PWA__) window.__DSH_PWA__ = {}
+
+  // ---- Register service worker ----------------------------------------
+  // Explicit scope: '/' — the script lives at /pwa/sw.js, so its default
+  // scope is only /pwa/ and it would never control the app itself (start_url
+  // "/"). The gateway sends Service-Worker-Allowed: / with the sw.js
+  // response so Chrome permits a scope wider than the script's own directory.
+  if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+      navigator.serviceWorker.register('/pwa/sw.js', { scope: '/' }).then((reg) => {
+        window.__DSH_PWA__.reg = reg
+      }).catch((err) => {
+        console.warn('[dsh-pwa] SW registration failed:', err)
+      })
+    })
+  }
+
+  // ---- Load touch gestures on every non-desktop device -----------------
+  // A paired device defaults to kind "auto" — the gateway never sets
+  // data-lan-device for it (see lib/lan-gate-server.cjs), only for an
+  // explicit "phone" or "desktop". Gating on the literal "phone" value meant
+  // this never loaded on a real phone left at its default kind. Matching
+  // app.css's own `:not([data-lan-device="desktop"])` gate here instead:
+  // anything that isn't explicitly desktop gets touch gestures.
+  var isNonDesktop = document.documentElement.getAttribute('data-lan-device') !== 'desktop'
+  if (isNonDesktop) {
+    var g = document.createElement('script')
+    g.src = '/pwa/touch-gestures.js'
+    g.async = true
+    document.head.appendChild(g)
+  }
+
+  // ---- Agent-done notification (Web Push) -----------------------------
+  // Subscribes to a gateway push endpoint. The gateway polls DSH event state and
+  // triggers push. Grant & subscribe are opt-in via the button appended below.
+  window.__DSH_PWA__.subscribe = function subscribe() {
+    if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
+      alert('当前浏览器不支持推送通知')
+      return Promise.reject(new Error('push unsupported'))
+    }
+    return new Promise(function (resolve, reject) {
+      if (!window.__DSH_PWA__.reg) {
+        navigator.serviceWorker.ready.then(function (reg) {
+          window.__DSH_PWA__.reg = reg
+          doSubscribe(reg).then(resolve).catch(reject)
+        }).catch(reject)
+      } else {
+        doSubscribe(window.__DSH_PWA__.reg).then(resolve).catch(reject)
+      }
+    })
+  }
+
+  // VAPID public key arrives base64url-encoded via the injected bootstrap.
+  function vapidKeyBytes() {
+    var s = String(window.__DSH_PWA__.vapid || '')
+    if (!s) return undefined
+    s = s.replace(/-/g, '+').replace(/_/g, '/')
+    while (s.length % 4) s += '='
+    var raw = atob(s)
+    var a = new Uint8Array(raw.length)
+    for (var i = 0; i < raw.length; i++) a[i] = raw.charCodeAt(i)
+    return a
+  }
+
+  function doSubscribe(reg) {
+    return reg.pushManager.subscribe({
+      userVisibleOnly: true,
+      applicationServerKey: vapidKeyBytes()
+    }).then(function (sub) {
+      // Notify the gateway so it can route push to this subscription.
+      return fetch('/pwa/push/subscribe', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ subscription: sub.toJSON() })
+      })
+    })
+  }
+
+  // ---- Push opt-in ------------------------------------------------------
+  // Deliberately NOT gated on device kind: a device left at the default
+  // "auto" carries no data-lan-device attribute, and desktop browsers do
+  // Web Push too. Gating this on isPhone silently disabled push for every
+  // device that was never explicitly marked as a phone.
+  var pushSupported = 'serviceWorker' in navigator && 'PushManager' in window && 'Notification' in window
+  var SNOOZE_KEY = 'dsh-pwa-notif-snooze'
+  var SNOOZE_MS = 7 * 24 * 3600 * 1000
+  // iOS grants Web Push only to home-screen installs, never to a Safari tab.
+  var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
+  var isStandalone = window.navigator.standalone === true ||
+    (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches)
+
+  function postSubscription(sub) {
+    return fetch('/pwa/push/subscribe', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ subscription: sub.toJSON() })
+    })
+  }
+
+  // Permission already granted: make sure the gateway actually holds this
+  // device's subscription (it may have been lost to a state reset, or the
+  // original POST may have failed). No prompt is shown — none is needed.
+  function resyncPush() {
+    if (!pushSupported || window.Notification.permission !== 'granted') return
+    navigator.serviceWorker.ready.then(function (reg) {
+      return reg.pushManager.getSubscription().then(function (sub) {
+        if (sub) return postSubscription(sub)
+        return reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: vapidKeyBytes() }).then(postSubscription)
+      })
+    }).catch(function (err) { console.warn('[dsh-pwa] push resync failed:', err) })
+  }
+
+  function card(title, bodyHtml, buttonsHtml) {
+    var el = document.createElement('div')
+    el.id = 'dsh-pwa-notif-hint'
+    el.style.cssText =
+      'position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));' +
+      'bottom:max(96px,calc(env(safe-area-inset-bottom) + 96px));z-index:2147483005;max-width:420px;margin:0 auto;' +
+      'background:rgba(22,26,34,.96);border:1px solid #2a2f3a;border-radius:14px;' +
+      'padding:14px 16px;color:#e6e8ec;font:13px/1.6 system-ui;' +
+      '-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.5)'
+    el.innerHTML = '<div style="font-weight:600;margin-bottom:4px">' + title + '</div>' +
+      '<div style="color:#9aa3b2;margin-bottom:10px">' + bodyHtml + '</div>' +
+      '<div style="display:flex;gap:8px">' + buttonsHtml + '</div>'
+    document.body.appendChild(el)
+    return el
+  }
+  var BTN_ON = '<button data-act="on" style="flex:1;background:#4c8dff;color:#fff;border:0;border-radius:9px;padding:9px 0;font-weight:600">开启</button>'
+  var BTN_OFF = '<button data-act="off" style="flex:1;background:#2a2f3a;color:#9aa3b2;border:0;border-radius:9px;padding:9px 0">暂不</button>'
+  var BTN_CLOSE = '<button data-act="off" style="flex:1;background:#2a2f3a;color:#9aa3b2;border:0;border-radius:9px;padding:9px 0">知道了</button>'
+
+  // Callable by hand at any time: window.__DSH_PWA__.askPush()
+  window.__DSH_PWA__.askPush = function askPush(manual) {
+    var old = document.getElementById('dsh-pwa-notif-hint')
+    if (old) old.remove()
+    if (!pushSupported) {
+      if (isIOS && !isStandalone) {
+        card('🔔 任务完成提醒', '在 iPhone 上，推送通知只对「添加到主屏幕」后的应用生效。请先用 Safari 的分享菜单添加到主屏幕，再从主屏图标打开本页。', BTN_CLOSE)
+          .querySelector('[data-act="off"]').addEventListener('click', function () { document.getElementById('dsh-pwa-notif-hint').remove() })
+      } else if (manual) {
+        alert('当前浏览器不支持 Web Push 通知')
+      }
+      return
+    }
+    if (window.Notification.permission === 'denied') {
+      if (manual) alert('通知权限已被拒绝，请到浏览器/系统的站点设置里重新允许')
+      return
+    }
+    if (window.Notification.permission === 'granted') { resyncPush(); return }
+
+    var el = card('🔔 任务完成提醒',
+      '开启后，智能体干完活会推送通知到这台设备，即使你切到别的 App。通知不含对话内容。',
+      BTN_ON + BTN_OFF)
+    el.querySelector('[data-act="on"]').addEventListener('click', function () {
+      el.remove()
+      // Must run inside the click gesture: Safari rejects subscribe() otherwise.
+      window.__DSH_PWA__.subscribe().catch(function (err) {
+        console.warn('[dsh-pwa] subscribe failed:', err)
+        alert('开启失败：' + (err && err.message ? err.message : err))
+      })
+    })
+    el.querySelector('[data-act="off"]').addEventListener('click', function () {
+      try { localStorage.setItem(SNOOZE_KEY, String(Date.now())) } catch (e) {}
+      el.remove()
+    })
+  }
+
+  if (pushSupported || (isIOS && !isStandalone)) {
+    var snoozedAt = 0
+    try { snoozedAt = Number(localStorage.getItem(SNOOZE_KEY) || 0) } catch (e) {}
+    // Migrate the old permanent dismissal to a snooze so previously dismissed
+    // devices get another chance instead of being silenced forever.
+    try {
+      if (localStorage.getItem('dsh-pwa-notif-hint')) { localStorage.removeItem('dsh-pwa-notif-hint'); snoozedAt = 0 }
+    } catch (e) {}
+    if (pushSupported && window.Notification.permission === 'granted') resyncPush()
+    else if (Date.now() - snoozedAt > SNOOZE_MS) {
+      if (document.readyState === 'complete') window.__DSH_PWA__.askPush()
+      else window.addEventListener('load', function () { window.__DSH_PWA__.askPush() })
+    }
+  }
+})()

package/pwa/manifest.json

@@ -0,0 +1,29 @@
+{
+  "name": "DeepSeek Harness Mobile",
+  "short_name": "DSH Mobile",
+  "description": "DeepSeek Harness on your phone. Secure remote access to your own DSH server.",
+  "id": "/",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#f9fafb",
+  "theme_color": "#0f1115",
+  "categories": ["developer tools", "productivity", "ai"],
+  "lang": "zh-CN",
+  "dir": "auto",
+  "prefer_related_applications": false,
+  "shortcuts": [
+    {
+      "name": "New conversation",
+      "short_name": "New chat",
+      "url": "/",
+      "icons": [{ "src": "/pwa/icons/icon.svg", "sizes": "any", "type": "image/svg+xml" }]
+    }
+  ],
+  "icons": [
+    { "src": "/pwa/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
+    { "src": "/pwa/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "/pwa/icons/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}

package/pwa/offline.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="#0f1115">
+  <title>离线 · DSH</title>
+  <style>
+    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+    html, body { margin: 0; padding: 0; }
+    body {
+      min-height: 100dvh; display: flex; align-items: center; justify-content: center;
+      font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+      background: radial-gradient(1100px 700px at 50% -10%, #1b2233 0%, #0f1115 55%);
+      color: #e6e8ec; padding: max(20px, env(safe-area-inset-top)) 16px;
+      -webkit-text-size-adjust: 100%;
+    }
+    .card { width: 100%; max-width: 420px; text-align: center; }
+    .dot { width: 80px; height: 80px; margin: 0 auto 20px; border-radius: 24px;
+      background: linear-gradient(135deg, #4c8dff, #7a5cff); display: flex; align-items: center;
+      justify-content: center; font-size: 34px; font-weight: 700; color: #fff; }
+    h1 { font-size: 20px; margin: 0 0 8px; }
+    p { font-size: 14px; line-height: 1.8; color: #9aa3b2; margin: 0; }
+    .spin { width: 38px; height: 38px; margin: 26px auto 0; border-radius: 50%;
+      border: 3px solid #2a2f3a; border-top-color: #4c8dff; animation: a .9s linear infinite; }
+    @keyframes a { to { transform: rotate(360deg); } }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <div class="dot">DSH</div>
+    <h1>离线 / Offline</h1>
+    <p>无法连接到 DSH 服务器。<br>请在服务器侧确认网关与 DSH 仍在运行。</p>
+    <div class="spin"></div>
+  </div>
+  <script>setInterval(() => location.reload(), 5000)</script>
+</body>
+</html>

package/pwa/sw.js

@@ -0,0 +1,176 @@
+/* dsh-mobile-pwa · service worker
+ * Offline-capable caching + agent-done push notifications for the DSH Web UI.
+ *
+ * Strategy (v3 — see the "new DOM + old CSS" postmortem below):
+ *  - True static shell (manifest, icons, offline fallback) -> cache-first.
+ *    These are the only assets whose bytes cannot change without an entry in
+ *    SHELL_PATHS changing too, so caching them aggressively is safe.
+ *  - Everything else same-origin (DSH's own JS/CSS bundle, plugin client
+ *    bundles incl. this plugin's own app.css/inject.js/touch-gestures.js,
+ *    API calls, fonts, images) -> network-first, falling back to cache only
+ *    when the network fetch actually fails (offline).
+ *  - SPA navigations (HTML doc) -> network-first, falling back to the last
+ *    successfully loaded page when offline.
+ *
+ * v2 treated ALL JS/CSS/fonts/images as cache-first-ish (stale-while-
+ * revalidate: serve the cached copy immediately, refresh in the background).
+ * That's exactly backwards for a bundle that changes on every deploy without
+ * its filename changing: a phone that had the PWA open across a deploy kept
+ * serving yesterday's cached JS/CSS on the very next cold start, while HTML
+ * navigation (already network-first) served today's markup — a "new DOM +
+ * old CSS" mismatch (e.g. cards rendered full-bleed) that a fresh local
+ * profile never reproduces because it has nothing stale to serve. Only the
+ * handful of files in SHELL_PATHS are safe to keep cache-first.
+ *
+ * Served by the gateway at /pwa/sw.js. Registered from the injected PWA script.
+ */
+'use strict'
+
+const SHELL_CACHE = 'dsh-mobile-pwa-shell-v3'
+const RUNTIME_CACHE = 'dsh-mobile-pwa-runtime-v3'
+
+const SHELL_PATHS = new Set([
+  '/pwa/manifest.json',
+  '/pwa/icons/icon-192.png',
+  '/pwa/icons/icon-512.png',
+  '/pwa/icons/icon-maskable-512.png',
+  '/pwa/offline.html'
+])
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(SHELL_CACHE).then((cache) => cache.addAll([
+      '/pwa/manifest.json',
+      '/pwa/icons/icon-192.png',
+      '/pwa/icons/icon-512.png',
+      '/pwa/icons/icon-maskable-512.png'
+    ]))
+  )
+  // Safe to activate immediately: this worker only decides how *future*
+  // fetches are served (cache-first for the shell, network-first for
+  // everything else). A tab that's already loaded keeps running the JS it
+  // already has in memory regardless of which SW version is "active" — it
+  // only starts talking to the new worker on its next fetch/navigation — so
+  // skipping the wait doesn't yank code out from under a running page. What
+  // it *does* fix: without it, an old SW can sit "waiting" indefinitely on a
+  // phone that never fully closes the PWA, which is the same staleness bug
+  // this rewrite targets, just at the SW-registration layer instead of the
+  // cache layer.
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(
+        keys
+          .filter((k) => k !== SHELL_CACHE && k !== RUNTIME_CACHE)
+          .map((k) => caches.delete(k))
+      )
+    )
+  )
+  // Take over already-open tabs right away rather than waiting for their
+  // next full reload. Paired with network-first below, this means an open
+  // tab starts getting fresh JS/CSS/HTML on its very next fetch instead of
+  // continuing to hit whatever the previous worker had cached.
+  self.clients.claim()
+})
+
+// ---- fetch handler -------------------------------------------------------
+self.addEventListener('fetch', (event) => {
+  const req = event.request
+  const url = new URL(req.url)
+
+  // Same-origin only; we only manage the DSH origin behind the gateway.
+  if (url.origin !== self.location.origin) return
+
+  // 1. True static shell -> cache-first.
+  if (req.method === 'GET' && SHELL_PATHS.has(url.pathname)) {
+    event.respondWith(cacheFirst(req, SHELL_CACHE))
+    return
+  }
+
+  // 2. HTML navigations -> network-first with offline fallback to the last
+  //    successfully loaded page.
+  if (req.mode === 'navigate') {
+    event.respondWith(networkFirstNavigation(req))
+    return
+  }
+
+  // 3. Everything else same-origin GET -> network-first. This is the DSH
+  //    client bundle (JS/CSS, incl. plugin client bundles), API calls,
+  //    fonts and images: all of it can change on any deploy, so the server's
+  //    current copy always wins; the cache only serves it when offline.
+  if (req.method === 'GET') {
+    event.respondWith(networkFirst(req, RUNTIME_CACHE))
+    return
+  }
+})
+
+async function cacheFirst(req, cacheName) {
+  const cache = await caches.open(cacheName)
+  const cached = await cache.match(req)
+  if (cached) return cached
+  const res = await fetch(req)
+  if (res && res.ok) cache.put(req, res.clone())
+  return res
+}
+
+async function networkFirst(req, cacheName) {
+  const cache = await caches.open(cacheName)
+  try {
+    const res = await fetch(req)
+    if (res && res.ok && req.method === 'GET') cache.put(req, res.clone())
+    return res
+  } catch (err) {
+    const cached = await cache.match(req)
+    if (cached) return cached
+    throw err
+  }
+}
+
+async function networkFirstNavigation(req) {
+  const cache = await caches.open(SHELL_CACHE)
+  try {
+    const res = await fetch(req)
+    if (res && res.ok) cache.put('/pwa/offline.html', res.clone())
+    return res
+  } catch (err) {
+    const cached = await cache.match('/pwa/offline.html')
+    if (cached) return cached
+    // Last resort: offline fallback hint.
+    return new Response(
+      '<!doctype html><meta charset="utf-8"><title>离线</title><style>body{font-family:system-ui;background:#0f1115;color:#e6e8ec;display:flex;align-items:center;justify-content:center;height:100vh;margin:0}p{max-width:24em;text-align:center;line-height:1.7}</style><script>setInterval(()=>location.reload(),4000)</script><p>无法连接到 DSH 服务器，正在重试…<br>请确认你的网关与服务仍在运行。</p>',
+      { headers: { 'Content-Type': 'text/html; charset=utf-8' } }
+    )
+  }
+}
+
+// ---- push (agent-done) notifications ------------------------------------
+self.addEventListener('push', (event) => {
+  let data = {}
+  try { data = event.data ? event.data.json() : {} } catch (e) { /* ignore */ }
+  const title = data.title || 'DSH 任务完成'
+  const options = {
+    body: data.body || '你的智能体已完成某一步。',
+    icon: '/pwa/icons/icon-192.png',
+    badge: '/pwa/icons/icon-192.png',
+    tag: data.tag || 'dsh-agent-done',
+    renotify: true,
+    data: data.data || {}
+  }
+  event.waitUntil(self.registration.showNotification(title, options))
+})
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close()
+  const target = (event.notification.data && event.notification.data.url) || '/'
+  event.waitUntil(
+    self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((list) => {
+      for (const client of list) {
+        if ('focus' in client) { client.navigate(target); return client.focus() }
+      }
+      return self.clients.openWindow(target)
+    })
+  )
+})

package/pwa/touch-gestures.js

@@ -0,0 +1,94 @@
+/* dsh-mobile-pwa · touch gestures
+ * Touch-first gestures for the DSH Web UI on phones:
+ *   - Pinch to resize code / markdown font size
+ *
+ * Edge-swipe back (history.back) used to live here too; removed (design
+ * doc "手势" row, 2026-08-17 fourth revision): history.back() is a no-op
+ * against this SPA's own client-side routing, and the 24px left-edge hot
+ * zone div (z-index 2147483001, touch-action:none) silently ate every touch
+ * that started there — including dsh-mobile-nav's own new left-edge
+ * swipe-back gesture (effects/gestures.ts in the dsh-web-mobile plugin),
+ * which now owns that same 24px strip and actually does something useful
+ * with it (close the open sheet/panel, or return to the session list).
+ *
+ * Pull-to-refresh used to live here too; it was removed (real-device
+ * feedback: any accidental overscroll fired a full page reload, which S1's
+ * page-stack rules always land on the conversation *list*, not back on the
+ * chat the user was in — trigger-happy and disorienting mid-conversation).
+ * app.css still disables the browser's own native overscroll/rubber-band at
+ * the document edge on its own merits, independent of this file.
+ *
+ * Loaded on every device that isn't explicitly marked "desktop" via the
+ * injected PWA script. Keeps out of the way on desktop.
+ */
+(function () {
+  'use strict'
+  if (window.matchMedia('(pointer: coarse)').matches === false) return
+
+  // ---- Pinch to resize font -------------------------------------------
+  const FONT_KEY = 'dsh-pwa-fontscale'
+  const SPACES = [10, 11, 12, 13, 14, 15, 16, 17, 18]
+  const root = document.documentElement
+  let baseScale = parseFloat(localStorage.getItem(FONT_KEY)) || 1
+  applyFont(baseScale)
+
+  let pinchStartDist = null
+  let pinchStartScale = baseScale
+  document.addEventListener('touchstart', (e) => {
+    if (e.touches.length === 2) {
+      pinchStartDist = Math.hypot(
+        e.touches[0].clientX - e.touches[1].clientX,
+        e.touches[0].clientY - e.touches[1].clientY
+      )
+      pinchStartScale = baseScale
+    }
+  }, { passive: true })
+
+  document.addEventListener('touchmove', (e) => {
+    if (e.touches.length !== 2 || pinchStartDist == null) return
+    e.preventDefault()
+    const d = Math.hypot(
+      e.touches[0].clientX - e.touches[1].clientX,
+      e.touches[0].clientY - e.touches[1].clientY
+    )
+    const ratio = d / pinchStartDist
+    const candidates = SPACES.map((s) => s * 0.1 * ratio)
+    const next = Math.min(1.8, Math.max(0.9, pinchStartScale * ratio))
+    // Snap to nearest discrete step to avoid jitter.
+    const snapped = snapTo(next)
+    if (snapped !== baseScale) {
+      baseScale = snapped
+      applyFont(baseScale)
+      localStorage.setItem(FONT_KEY, String(baseScale))
+    }
+  }, { passive: false })
+
+  function snapTo(v) {
+    const sorted = [...SPACES].sort((a, b) => Math.abs(a - v * 10) - Math.abs(b - v * 10))
+    return sorted[0] / 10
+  }
+
+  document.addEventListener('touchend', () => { pinchStartDist = null }, { passive: true })
+
+  function applyFont(scale) {
+    root.style.setProperty('--dsh-pwa-font-scale', String(scale))
+  }
+
+  // Add a small floating reset button when scale != 1.
+  if (baseScale !== 1) {
+    const reset = document.createElement('button')
+    reset.textContent = '字AA'
+    reset.style.cssText =
+      'position:fixed;right:max(10px,env(safe-area-inset-right));' +
+      'bottom:max(110px,calc(env(safe-area-inset-bottom) + 110px));z-index:2147483002;' +
+      'background:rgba(76,141,255,.92);color:#fff;border:0;border-radius:999px;' +
+      'padding:8px 12px;font:600 12px/1 system-ui;box-shadow:0 6px 20px rgba(0,0,0,.4)'
+    reset.addEventListener('click', () => {
+      baseScale = 1
+      applyFont(1)
+      localStorage.setItem(FONT_KEY, '1')
+      reset.remove()
+    })
+    document.body.appendChild(reset)
+  }
+})()

package/scripts/build-client.mjs

@@ -0,0 +1,101 @@
+// Wrap the tsc-compiled CommonJS client program into the DSH browser loader
+// shape: window.__ModuleLoader__.load({ id, factory: (require) => ... }).
+// Relative modules are inlined with a tiny local require; platform modules
+// (react, primitives, ...) stay as require() calls and are resolved by the
+// host's browser module table.
+import { mkdir, readFile, readdir, rm, writeFile } from 'node:fs/promises'
+import { dirname, join, posix } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const root = dirname(fileURLToPath(new URL('../package.json', import.meta.url)))
+const buildDir = join(root, '.client-build')
+const outputPath = join(root, 'lib', 'client.js')
+
+// Walk the emit dir recursively and key each module by its forward-slash
+// relative path (e.g. "index.js", "styles/index.js"). Nested emit dirs now
+// appear because the CSS lives in src/client/styles/.
+async function collectSources(dir, { rel = '' } = {}) {
+  const sources = new Map()
+  for (const entry of (await readdir(dir, { withFileTypes: true }))) {
+    const abs = join(dir, entry.name)
+    const relPath = rel ? `${rel}/${entry.name}` : entry.name
+    if (entry.isDirectory()) {
+      for (const [k, v] of await collectSources(abs, { rel: relPath })) {
+        sources.set(k, v)
+      }
+    } else if (entry.isFile() && entry.name.endsWith('.js')) {
+      sources.set(
+        relPath,
+        (await readFile(abs, 'utf8')).replace(/\n?\/\/# sourceMappingURL=.*$/u, ''),
+      )
+    }
+  }
+  return sources
+}
+
+const sources = await collectSources(buildDir)
+
+const REQUIRE_RE = /require\("(\.[^"]+\.js)"\)/g
+// Resolve a `./x.js` or `../x.js` require relative to its parent module to
+// the canonical forward-slash key used in __modules (e.g. styles/index.js
+// requires "./base.css.js" -> "styles/base.css.js"; effects/header-status.js
+// requires "../session-dot.js" -> "session-dot.js"). posix.join already
+// interprets the leading "./"/"../" itself, so passing the FULL relative
+// string (not the old rel.slice(2), which only stripped "./" and silently
+// mis-resolved "../" into a bogus same-directory path) is both correct and
+// simpler.
+const resolveChild = (parent, rel) => {
+  const joined = posix.join(posix.dirname(parent), rel)
+  return joined === '.' ? '' : joined
+}
+
+// Dependency-first topological order from the entry.
+const visited = new Set()
+const order = []
+const visit = (file) => {
+  if (visited.has(file)) return
+  visited.add(file)
+  const src = sources.get(file)
+  if (!src) throw new Error(`client module not found for require: ${file}`)
+  for (const match of src.matchAll(REQUIRE_RE)) {
+    visit(resolveChild(file, match[1]))
+  }
+  order.push(file)
+}
+visit('index.js')
+
+const modules = order
+  .map((file) => {
+    // Rewrite each relative require to its canonical path so the runtime
+    // __localRequire (id.slice(2), entry-relative) resolves nested modules.
+    const src = sources.get(file).replace(REQUIRE_RE, (m, rel) => `require("./${resolveChild(file, rel)}")`)
+    return `__modules[${JSON.stringify(file)}] = function (require, module, exports) {\n${src}\n};`
+  })
+  .join('\n')
+
+const wrapped = [
+  'window.__ModuleLoader__.load({ id: "dsh-zen-remote", factory: (require) => {',
+  'var __modules = {};',
+  modules,
+  'var __cache = {};',
+  'function __localRequire(id) {',
+  '  if (id.charCodeAt(0) !== 46) return require(id);',
+  '  id = id.slice(2);',
+  '  var cached = __cache[id];',
+  '  if (cached) return cached.exports;',
+  '  var module = { exports: {} };',
+  '  __cache[id] = module;',
+  '  __modules[id](__localRequire, module, module.exports);',
+  '  return module.exports;',
+  '}',
+  'var module = { exports: {} };',
+  '__modules["index.js"](__localRequire, module, module.exports);',
+  'return module.exports; } });',
+  '',
+].join('\n')
+
+await mkdir(dirname(outputPath), { recursive: true })
+await writeFile(outputPath, wrapped)
+await rm(join(root, 'lib', 'client.js.map'), { force: true })
+await rm(buildDir, { recursive: true, force: true })
+console.log(`client bundle written: ${outputPath} (${order.length} modules inlined)`)