dsh-mobi-web 0.1.0 → 0.1.1

package/README.md

@@ -4,7 +4,7 @@
 
 A phone-first web client for **DeepSeek Harness**, served by a sidecar gateway that runs *inside* the harness process.
 
-> **Not `dsh-mobile-gateway`.** There is an unrelated npm package by that name ("scan a QR code + settings page + live sync"). This one is different: a **32 KB page** instead of a proxied UI, **approvals that stay on the phone when the phone started the turn**, and Mermaid rendered on the device. Package and repo are both `dsh-mobi-web`; the local checkout directory is still named `dsh-mobi-web-plugin`.
+> **Not `dsh-mobile-gateway`.** There is an unrelated npm package by that name ("scan a QR code + settings page + live sync"). This one is different: a **32 KB page** instead of a proxied UI, **approvals that stay on the phone when the phone started the turn**, and Mermaid rendered on the device. Package, repo and checkout directory are all `dsh-mobi-web`.
 
 ```
 phone browser  ──HTTPS──▶  Cloudflare tunnel / Tailscale  ──▶  127.0.0.1:3083 (this plugin)  ──▶  harness host services
@@ -60,6 +60,7 @@ The official web UI ships ~4.6 MB of JavaScript. Over a relayed mobile link (0.4
 **Approve**
 - Approval requests arrive as cards over SSE
 - **Origin affinity**: if the *phone* started the turn, the approval stays on the phone. It waits up to 15 minutes, then **cancels** — it never falls back to a desktop nobody is sitting at. Desktop-origin turns keep the old behaviour (20 s grace, then hand back).
+- **Desktop-owned approvals are visible, not silent**: when the desktop is the one waiting, the phone shows a read-only “PC is waiting for approval · <tool>” banner (and a marker on the session row), so a phone that is not the owner no longer looks stuck. If the gateway's grace window hands a phone card back to the desktop, the stale card is dismissed and the banner replaces it.
 
 **Stay up**
 - SSE with exponential-backoff reconnect (2 s → 30 s) and a 6 s poll as fallback
@@ -73,9 +74,11 @@ The plugin is a DSH **bundle**: it ships its own `cordis.patch.yml`, so no profi
 
 ```bash
 dsh plugin --profile web add dsh-mobi-web     # from npm
-dsh plugin --profile web add link:/path/to/dsh-mobi-web-plugin   # from a checkout
+dsh plugin --profile web add link:/path/to/dsh-mobi-web   # from a checkout
 ```
 
+> **`link:` records an absolute path.** It is meant for a throwaway *development* profile, not for the profile your phone talks to: if you move the checkout, the link dangles, the bundle silently stops mounting, and `/m/` disappears with no error. Re-run the `add` after a move. For an unpublished build on your daily profile, `npm pack` and install the tarball — that is a copy, not a link.
+
 **The desktop profile** — `desktop` is reserved for the Electron-owned profile, and the *npm* CLI refuses to manage it. Install through the app's **plugin manager**, or with the Desktop-installed command (`dsh` inside the app bundle):
 
 ```bash
@@ -156,11 +159,11 @@ lib/index.js      the gateway plugin (single file on purpose)
 lib/page.html     the mobile page, served from disk on every request
 assets/           vendored mermaid (js + gz + br) and the app icon
 cordis.patch.yml  bundle patch — the install declaration
-test/             27 tests, fake host services, no network
+test/             34 tests, fake host services, no network
 ```
 
 ## Tests
 
 ```bash
-node --test test/*.test.mjs    # 27 tests, no network, fake host services
+node --test test/*.test.mjs    # 34 tests, no network, fake host services
 ```

package/docs/release-notes/v0.1.1.md

@@ -0,0 +1,45 @@
+# v0.1.1 — desktop approval status
+
+A small release about the one case where the phone used to look broken: the
+desktop was waiting on an approval, the phone showed a running turn, and
+nothing said why.
+
+## What changed
+
+- **A read-only “PC is waiting for approval” banner on the phone.** When the
+  gateway delegates an approval to the desktop — or when a desktop-origin
+  approval arrives while the phone is not watching — the session view now
+  shows the tool name and a plain-language hint that the desktop has to
+  continue. It updates over SSE and is re-sent with the session payload, so
+  it survives a reconnect, a page refresh and a lock screen.
+- **Session-list marker.** A session with a pending desktop approval carries a
+  `等待电脑审批` / waiting marker on its row, so the list no longer shows a
+  running session with no explanation.
+- **The stale phone card is dismissed.** The desktop-origin grace window can
+  hand a request back after the phone has already rendered a card; that card
+  used to stay tappable and fail with “already handled”. It is now replaced by
+  the read-only banner.
+- **No takeover.** The phone still does not answer desktop-owned approvals.
+  This release only observes them, which keeps the existing origin-affinity
+  decision intact.
+
+## Implementation notes
+
+- The gateway listens to the durable `approval/asked` / `approval/decided`
+  session events and keeps a per-session pending map. The read path also
+  derives the same state from the session surface, so a gateway restart or a
+  reconnect does not lose the status.
+- No new dependencies, routes, config keys or permissions. The mobile API adds
+  two response fields: `desktopApprovals` on `GET /m/api/session` and
+  `waiting` on each `GET /m/api/sessions` item.
+- 34 tests, including seven for the pure surface scanner.
+
+## Upgrade
+
+```bash
+dsh plugin --profile desktop add dsh-mobi-web@0.1.1
+# restart the app
+```
+
+The session cookie and token do not change; the phone does not need to log in
+again.

package/lib/index.js

@@ -849,6 +849,33 @@ export function resolveToken(configured) {
   return { token: minted, source: 'minted', file, saved }
 }
 
+/**
+ * Pending approvals from a session surface that the gateway does not own.
+ * `approval/asked` without a matching `approval/decided`; owned asks are
+ * filtered because those already render as an actionable card. Pure so the
+ * read path stays testable without a cordis host.
+ */
+export function pendingApprovalsFromEvents(events, isOwned = () => false) {
+  const pending = new Map()
+  for (const event of events ?? []) {
+    const id = String(event?.data?.id ?? '')
+    if (id === '') continue
+    if (event?.type === 'approval/asked') {
+      if (!isOwned(id) && !pending.has(id)) {
+        pending.set(id, {
+          id,
+          toolName: event.data?.toolName ?? 'tool',
+          reason: event.data?.reason,
+          at: typeof event.time === 'number' ? event.time : undefined,
+        })
+      }
+    } else if (event?.type === 'approval/decided') {
+      pending.delete(id)
+    }
+  }
+  return [...pending.values()]
+}
+
 export function apply(ctx, rawConfig = {}) {
   const config = { ...DEFAULTS, ...rawConfig }
   const resolved = config.token === false
@@ -953,12 +980,36 @@ export function apply(ctx, rawConfig = {}) {
   // L1: push committed session events to the phone over SSE instead of polling.
   const streams = new Map()
   const runningSessions = new Set()
+  // Approvals the gateway owns (the phone may answer) and approvals the host has
+  // asked for that it does not own (the desktop is answering). The second map is
+  // what lets the phone show "PC is waiting" instead of a silent stuck turn.
+  const approvals = new Map()
+  const pendingApprovals = new Map()
+  const seenSessions = new Map()
+  const phoneTurns = new Set()
   const pushEvent = (sessionId, payload) => {
     const set = streams.get(sessionId)
     if (set === undefined || set.size === 0) return
     const line = `data: ${JSON.stringify(payload)}\n\n`
     for (const res of set) { try { res.write(line) } catch {} }
   }
+  const desktopApprovalsFor = (sessionId) => [...pendingApprovals.values()]
+    .filter((entry) => entry.sessionId === sessionId && !approvals.has(entry.id))
+  const approvalStatusPayload = (sessionId) => {
+    const list = desktopApprovalsFor(sessionId)
+    const first = list[0]
+    return {
+      kind: 'approval-status',
+      count: list.length,
+      toolName: first?.toolName,
+      reason: first?.reason,
+      at: first?.at,
+    }
+  }
+  const pushApprovalStatus = (sessionId) => {
+    if (sessionId === undefined) return
+    pushEvent(sessionId, approvalStatusPayload(sessionId))
+  }
   const openStream = (req, res, sessionId) => {
     if (typeof sessionId !== 'string' || sessionId === '') {
       res.writeHead(400, { 'content-type': 'text/plain; charset=utf-8' }).end('session required')
@@ -975,6 +1026,7 @@ export function apply(ctx, rawConfig = {}) {
     if (set === undefined) { set = new Set(); streams.set(sessionId, set) }
     set.add(res)
     res.write(`data: ${JSON.stringify({ kind: 'state', running: runningSessions.has(sessionId) })}\n\n`)
+    res.write(`data: ${JSON.stringify(approvalStatusPayload(sessionId))}\n\n`)
     const ping = setInterval(() => { try { res.write(': ping\n\n') } catch {} }, 15000)
     const close = () => {
       clearInterval(ping)
@@ -1006,6 +1058,34 @@ export function apply(ctx, rawConfig = {}) {
   try {
     ctx.on('session/event', (session, event) => {
       const sessionId = session?.id
+      if (sessionId !== undefined) {
+        // Track every ask, including the ones the gateway deliberately delegates
+        // to the desktop UI. `desktopApprovalsFor()` filters out the ones the
+        // gateway owns, so the phone shows a read-only status only when the
+        // desktop is the one being waited on.
+        if (event?.type === 'approval/asked') {
+          const id = String(event.data?.id ?? '')
+          if (id !== '') {
+            pendingApprovals.set(id, {
+              id,
+              sessionId,
+              toolName: event.data?.toolName ?? 'tool',
+              reason: event.data?.reason,
+              callId: event.data?.callId,
+              at: typeof event.time === 'number' ? event.time : Date.now(),
+            })
+            pushApprovalStatus(sessionId)
+          }
+        } else if (event?.type === 'approval/decided') {
+          pendingApprovals.delete(String(event.data?.id ?? ''))
+          pushApprovalStatus(sessionId)
+        } else if (event?.type === 'turn/end') {
+          for (const [pendingId, pending] of pendingApprovals) {
+            if (pending.sessionId === sessionId) pendingApprovals.delete(pendingId)
+          }
+          pushApprovalStatus(sessionId)
+        }
+      }
       if (sessionId === undefined || !streams.has(sessionId)) {
         if (event?.type === 'turn/start') runningSessions.add(sessionId)
         if (event?.type === 'turn/end') runningSessions.delete(sessionId)
@@ -1027,9 +1107,6 @@ export function apply(ctx, rawConfig = {}) {
     say('warn', `session event stream unavailable: ${error.message}`)
   }
 
-  const approvals = new Map()
-  const seenSessions = new Map()
-  const phoneTurns = new Set()
   const approvalStats = { events: 0, taken: 0, delegated: 0, cancelled: 0, errors: 0, archived: 0, lastSession: null, lastSeenAgeMs: null, lastOrigin: null, lastError: null }
   const APPROVAL_WINDOW_MS = 30_000
   const APPROVAL_STALE_MS = 10_000
@@ -1056,9 +1133,18 @@ export function apply(ctx, rawConfig = {}) {
       // turns keep the old hand-back behaviour.
       const fromPhone = sessionId !== undefined && phoneTurns.has(sessionId)
       approvalStats.lastOrigin = fromPhone ? 'phone' : 'desktop'
-      if (!fromPhone && Date.now() - lastSeen > APPROVAL_WINDOW_MS) { approvalStats.delegated += 1; return next() }
-
       const id = String(request?.id ?? request?.callId ?? crypto.randomUUID())
+      if (!pendingApprovals.has(id)) {
+        pendingApprovals.set(id, {
+          id, sessionId, toolName: request?.toolName ?? 'tool', reason: request?.reason,
+          callId: request?.callId, at: Date.now(),
+        })
+      }
+      if (!fromPhone && Date.now() - lastSeen > APPROVAL_WINDOW_MS) {
+        approvalStats.delegated += 1
+        pushApprovalStatus(sessionId)
+        return next()
+      }
       let settle
       const decision = new Promise((resolve) => { settle = resolve })
       approvals.set(id, {
@@ -1092,6 +1178,8 @@ export function apply(ctx, rawConfig = {}) {
           return outcome
         } finally {
           approvals.delete(id)
+          pendingApprovals.delete(id)
+          pushApprovalStatus(sessionId)
         }
       }
 
@@ -1103,10 +1191,23 @@ export function apply(ctx, rawConfig = {}) {
       }
       approvalStats.lastHeldMs = Date.now() - startedAt
       try {
-        if (!settled || outcome === null) { approvalStats.delegated += 1; return next() }
+        if (!settled || outcome === null) {
+          approvalStats.delegated += 1
+          // The card the phone was showing is now stale: the desktop owns the
+          // request. Drop our ownership BEFORE publishing the status, otherwise
+          // the status still counts this id as phone-owned and reports zero.
+          approvals.delete(id)
+          pushEvent(sessionId, { kind: 'approval-done', id })
+          pushApprovalStatus(sessionId)
+          return next()
+        }
         return outcome
       } finally {
         approvals.delete(id)
+        if (settled) {
+          pendingApprovals.delete(id)
+          pushApprovalStatus(sessionId)
+        }
       }
     }, true)
   } catch (error) {
@@ -1156,6 +1257,7 @@ export function apply(ctx, rawConfig = {}) {
           cwd: summary?.cwd ?? record.header.cwd,
           updatedAt: summary?.updatedAt ?? record.header.createdAt,
           running: summary?.running === true,
+          waiting: desktopApprovalsFor(id).length > 0,
           live: summary?.agentAvailable ?? record.live === true,
           blank: summary?.blank === true,
         })
@@ -1298,6 +1400,8 @@ export function apply(ctx, rawConfig = {}) {
       const outcome = decision === 'allow' ? 'allowed-once' : 'rejected'
       entry.settle(outcome)
       approvals.delete(id)
+      pendingApprovals.delete(id)
+      pushApprovalStatus(entry.sessionId)
       pushEvent(entry.sessionId, { kind: 'approval-done', id })
       return { ok: true, outcome }
     },
@@ -1332,6 +1436,21 @@ export function apply(ctx, rawConfig = {}) {
       const pending = [...approvals.values()]
         .filter((entry) => entry.sessionId === id)
         .map((entry) => ({ id: entry.id, toolName: entry.toolName, reason: entry.reason, at: entry.at }))
+      // Approvals that belong to the desktop (or were delegated to it). The live
+      // map is the fast path; the surface scan covers a gateway restart and a
+      // reconnect where the ask event happened before this process started.
+      const desktop = new Map()
+      for (const entry of desktopApprovalsFor(id)) desktop.set(entry.id, entry)
+      const decided = new Set()
+      for (const event of snapshot?.events ?? []) {
+        if (event?.type === 'approval/decided') decided.add(String(event.data?.id ?? ''))
+      }
+      for (const approvalId of decided) desktop.delete(approvalId)
+      for (const entry of pendingApprovalsFromEvents(snapshot?.events, (approvalId) => approvals.has(approvalId))) {
+        if (!desktop.has(entry.id)) desktop.set(entry.id, { ...entry, sessionId: id })
+      }
+      const desktopApprovals = [...desktop.values()]
+        .map(({ id: approvalId, toolName, reason, at }) => ({ id: approvalId, toolName, reason, at }))
       // Newest first while budgeting, then restore chronological order.
       const budgeted = []
       let total = 0
@@ -1341,7 +1460,7 @@ export function apply(ctx, rawConfig = {}) {
         total += message.text.length
         budgeted.unshift(message)
       }
-      return { id, title, cwd: snapshot?.session?.cwd, messages: budgeted, approvals: pending }
+      return { id, title, cwd: snapshot?.session?.cwd, messages: budgeted, approvals: pending, desktopApprovals }
     },
   }
 

package/lib/page.html

@@ -35,6 +35,7 @@
   .dot.live{background:var(--accent);box-shadow:0 0 0 3px rgba(77,107,254,.16)}
   .t{font-size:14.5px;line-height:1.35;word-break:break-word;overflow-wrap:anywhere}
   .m{font-size:11.5px;color:var(--dim);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap}
+  .m .pc{color:#c8a85a;border:1px solid #3a3320;border-radius:99px;padding:0 6px;font-size:10px}
   .msg{padding:10px 14px}
   .msg .who{font-size:10.5px;color:var(--dim);letter-spacing:.4px;margin-bottom:3px}
   .msg .body{word-break:break-word;overflow-wrap:anywhere;font-size:14px;max-width:100%}
@@ -113,6 +114,13 @@
                padding:6px 12px;font-size:12.5px;font-family:inherit;flex:none;white-space:nowrap}
   .waiting .ap.allow{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
   .waiting .ap:disabled{opacity:.4}
+  .pcwait{flex:none;display:flex;gap:8px;align-items:center;padding:9px 14px;font-size:12px;
+          background:#151a12;border-top:1px solid #2b3320;color:#c8d6a8}
+  .pcwait b{font-weight:600;white-space:nowrap}
+  .pcwait code{background:#0d0f0c;border:1px solid #2b3320;border-radius:6px;padding:1px 6px;
+               font-size:11.5px;white-space:nowrap;flex:none;max-width:30vw;overflow:hidden;text-overflow:ellipsis}
+  .pcwait span{margin-left:auto;color:#7d8a68;font-size:11px;white-space:nowrap;min-width:0;
+               overflow:hidden;text-overflow:ellipsis}
   .composer{flex:none;width:100%;display:flex;gap:8px;align-items:flex-end;padding:8px 12px calc(10px + env(safe-area-inset-bottom));
             border-top:1px solid var(--line);background:var(--bg)}
   /* iOS Safari auto-zooms the whole page when a focused field's font-size is
@@ -144,6 +152,7 @@
   <button class="btn" id="refresh">刷新</button>
 </header>
 <main id="main"><div class="skel"></div><div class="skel"></div><div class="skel"></div></main>
+<div class="pcwait" id="pcwait" hidden></div>
 <div class="waiting" id="waiting" hidden></div>
 <button class="jump" id="jump" hidden>↓</button>
 <div class="lightbox" id="lightbox" hidden><button class="close" id="lightbox-close">×</button></div>
@@ -158,7 +167,7 @@
 <footer><span id="hint">只读</span><span id="stat"></span></footer>
 
 <script>
-const BUILD = 'v36'
+const BUILD = 'v37'
 // Anything that kills the script before the first render used to leave the phone
 // on a black screen with no clue. Surface it instead.
 function showFatal (message) {
@@ -179,10 +188,12 @@ window.addEventListener('unhandledrejection', (event) => {
 const $ = (id) => document.getElementById(id)
 const main = $('main'), title = $('title'), back = $('back'), hint = $('hint'), stat = $('stat')
 const composer = $('composer'), input = $('input'), sendBtn = $('send'), waiting = $('waiting'), run = $('run')
+const pcwait = $('pcwait')
 const jump = $('jump'), stop = $('stop'), chip = $('chip'), attach = $('attach'), fileInput = $('file'), conn = $('conn')
 const lightbox = $('lightbox')
 let pendingImages = []
 let running = false
+let phoneApproval = false
 let view = { name: 'list', id: null }
 
 const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]))
@@ -207,7 +218,7 @@ function sessionRow (s) {
   return `<div class="row under" data-id="${esc(s.id)}">
       <div class="dot ${s.running ? 'live' : ''}"></div>
       <div style="flex:1;min-width:0"><div class="t">${esc(s.title || '(未命名)')}</div>
-        <div class="m"><span>${ago(s.updatedAt ?? s.createdAt)}</span>${s.running ? '<span>运行中</span>' : ''}</div>
+        <div class="m"><span>${ago(s.updatedAt ?? s.createdAt)}</span>${s.running ? '<span>运行中</span>' : ''}${s.waiting ? '<span class="pc">等待电脑审批</span>' : ''}</div>
       </div></div>`
 }
 
@@ -225,6 +236,7 @@ function renderTree (data) {
   back.hidden = true
   composer.hidden = true
   waiting.hidden = true
+  pcwait.hidden = true
   jump.hidden = true
   if (!groups.length) { main.innerHTML = '<div class="empty">还没有工作区</div>'; return }
 
@@ -300,8 +312,20 @@ function renderTree (data) {
   }
 }
 
+function renderDesktopWaiting (status) {
+  const count = Number(status && status.count) || 0
+  if (count === 0 || phoneApproval) { pcwait.hidden = true; pcwait.innerHTML = ''; return }
+  pcwait.hidden = false
+  const label = count > 1 ? `电脑上有 ${count} 个审批等待处理` : '电脑上等待审批'
+  pcwait.innerHTML = `<b>${label}</b>` +
+    (status.toolName ? `<code>${esc(status.toolName)}</code>` : '') +
+    `<span>在电脑上处理后会自动继续</span>`
+}
+
 function renderApproval (pending) {
+  phoneApproval = pending !== null && pending !== undefined
   if (!pending) { waiting.hidden = true; waiting.innerHTML = ''; return }
+  pcwait.hidden = true
   waiting.hidden = false
   waiting.innerHTML = `<b>等待批准</b><code>${esc(pending.toolName)}</code>` +
     (pending.reason ? `<span style="margin-left:0;color:#8a7a55">${esc(String(pending.reason).slice(0, 40))}</span>` : '') +
@@ -422,7 +446,10 @@ function renderSession (data) {
   hint.textContent = base(data.cwd) || ''
   back.hidden = false
   composer.hidden = false
-  renderApproval((data.approvals || [])[0] || null)
+  const phone = (data.approvals || [])[0] || null
+  const desktop = data.desktopApprovals || []
+  renderApproval(phone)
+  renderDesktopWaiting({ count: desktop.length, toolName: desktop[0] && desktop[0].toolName })
   if (!data.messages.length) { main.innerHTML = '<div class="empty">这个会话还没有消息</div>'; return }
   main.innerHTML = data.messages.map((m) => messageHTML(m.role, m.text)).join('')
   main.scrollTop = main.scrollHeight
@@ -594,8 +621,9 @@ function connectStream (id) {
     if (msg.kind === 'aend') { if (liveEl) liveEl = null; return }
     if (msg.kind === 'message') { appendMessage(msg.role, msg.text); return }
     if (msg.kind === 'tool') { run.hidden = false; appendMessage('tool', '工具调用'); return }
+    if (msg.kind === 'approval-status') { renderDesktopWaiting(msg); return }
     if (msg.kind === 'approval') { renderApproval(msg); return }
-    if (msg.kind === 'approval-done') { refreshOnce(); return }
+    if (msg.kind === 'approval-done') { phoneApproval = false; pcwait.hidden = true; refreshOnce(); return }
   }
   es.onerror = () => {
     setRunning(false)
@@ -623,6 +651,8 @@ async function loadList (resetScroll = true) {
   liveEl = null
   closeStream()
   run.hidden = true
+  pcwait.hidden = true
+  phoneApproval = false
   view = { name: 'list', id: null }
   history.replaceState(null, '', '#')
   try {
@@ -639,6 +669,8 @@ async function loadList (resetScroll = true) {
 }
 
 async function open (id) {
+  pcwait.hidden = true
+  phoneApproval = false
   view = { name: 'session', id }
   history.replaceState(null, '', '#' + id)
   main.innerHTML = '<div class="skel"></div><div class="skel"></div>'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-mobi-web",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "手机优先的 DeepSeek Harness 客户端：32KB 页面、SSE 实时输出、审批留在手机、Mermaid 图表、图片发送。无需改宿主，装成 bundle 即可用 Tailscale / Cloudflare 访问。",
   "keywords": [
     "dsh",