feat(client): add Remote Host Browser and Computer viewers

.agents/skills/verify-deepseekbot/features/remote-hosts.md

@@ -12,10 +12,12 @@ The browser pairs a Remote Host as a Paired Device and reads its Host Feed throu
 - `read`: a visible remote conversation at its latest message marks that message read on its owning Host and refreshes the shared Inbox.
 - `upgrade`: existing browser pairings and the selected tab survive the storage-key rename.
 - `remove`: removing a Host forgets its rows, stops its Inbox and releases cached avatar object URLs.
+- `viewers`: a remote Bot DM opens Browser or Computer when that Bot has access. The shared Host viewer modules read frames and send input to that Host only; closing, switching source or losing the connection tears down the viewer and releases requested control.
+- `viewer-control`: queued input belongs to one takeover. Resume or frame loss invalidates it; frame recovery remains read-only even when the Host Feed never disconnected. Remove closes viewers and waits up to five seconds for takeover/release cleanup before revoking the pairing.
 
 ## How to get to it (user POV)
 
-Enter Bot mode, then Messages. Open the channel header's add menu and choose Add remote. Paste a link from the other Host's Settings → Devices → Pair a phone. Choose All or the Remote Host icon, then a Bot or group row. Right-click the Host icon and choose Remove to remove it.
+Enter Bot mode, then Messages. Open the channel header's add menu and choose Add remote. Paste a link from the other Host's Settings → Devices → Pair a phone. Choose All or the Remote Host icon, then a Bot or group row. Right-click the Host icon and choose Remove to remove it. A remote Bot DM with Browser or Computer access shows the corresponding header button. Open its viewer, choose Pause Bot and take control, interact with the screen or send text, then Resume Bot or Close viewer. Groups have no viewer entry.
 
 ## Driving it with verify-app
 
@@ -25,11 +27,19 @@ Read the browser console and run `node scripts/verify-app.mjs observe --name <na
 
 For avatars, give Host B one uploaded Bot image, one seeded or composed Bot, a group with those members and a group with an uploaded image. Open each from All and the Host icon. Compare the row, header and Bot message author with Host B's canonical roster and timeline. A direct `bot-tool channel_send` needs an existing trusted Source Event in that Channel; seed a Human group message with the members' wake policies set to silent before the direct call. Inspect the browser's device-authorized avatar GET and CORS response, the loaded object-URL image dimensions and both themes. Equal slugs on Host A and Host B must retain Host B's portrait, including group member stacks. Change Host B's avatar and verify the visible portrait updates; remove the Remote Host and verify its rows and portraits disappear. Streaming draft authors also use the portrait; mark the live-model draft path untested unless driven with the specified model.
 
+For viewers, start a disposable Browser and Computer on Host B through the existing CLI. Open a harmless fixture in each; capture the actual remote frame in light and dark, take control and verify a click/text change against `browser-observation` / `browser-frame` or `computer-frame`. Confirm Host A is untouched, and inspect the gateway requests: frame/input HTTP uses the device header without cookies; the Host Feed mux uses a one-time stream ticket. Close during takeover, switch between same-slug Bots on different Hosts, stop/restart Host B, and revoke the browser's device credential. Frames and input must stop after disposal/revocation; reconnect must not replay input. Preserve actual missing runtime prerequisites as blockers rather than replacing the frame with a fixture response. The Computer may use an isolated container; this does not qualify the Human's local desktop.
+
+For control races, delay an input response, queue text, Resume, then take control again before completing the first response: the old queued text must not arrive. Interrupt only frame requests while the Feed remains online; recovered frames must be read-only and require another takeover. Delay a takeover response after the Host accepts it, then Remove the Host: input stops immediately and release must precede unpair. If cleanup cannot finish within five seconds, removal continues; Browser may require the Host operator to resume it.
+
+Keep the remote screen stationary during frame recovery. The Host must keep its sequence unchanged and answer matching `after` polls with 204 after ten seconds; the viewer recovers by fetching the current frame without that stale cursor, not by requiring a screen change. In both UI languages, inject a frame/input failure: the Web panel must show localized recovery guidance and a reconnect action, while the viewer snapshot retains the original diagnostic notice rather than rendering it as product copy.
+
 ## Gotchas
 
+- The workspace hides `data-panel-empty-action` descendants. Viewer reconnect must stay in its own controls; verify the button is visible and clickable inside the real workspace, not only in a standalone panel render.
 - Remote avatars consume the authenticated image cache; This Host retains its current read adapter.
 - With unread messages on both Hosts, compare each row and tab with `channelUnreadCounts`. Open the remote DM/group, verify its count clears on that Host while the other Host stays unread. Keep an active Bot running to inspect its activity indicator. Stop only the task-owned remote Host and verify cached rows/counts remain with an offline tab.
 - Activity timestamps are receipt times; they are not authoritative tool start times.
 - Remote chat displays text and attachment names; images and cards are not qualified.
 - Host looks remain device-local, including each phone's own icon and colour. DSH Desktop and two physical machines over a real tailnet are not qualified by a two-Host local run.
+- Control release uses the same device credential. An unreachable Host is retried when this viewer reconnects or reopens; a revoked credential cannot resume a Browser. In that case the Host operator resumes it. The Computer also has its existing Host-side pause lease.
 - Dismiss Continue and Skip onboarding overlays before selecting Messages. Retain any failed drive evidence before retrying.

apps/mobile/src/host/browser-viewer.ts

@@ -124,13 +124,17 @@ export function createBrowserViewer(options: BrowserViewerOptions): BrowserViewe
         );
       } catch (error) {
         if (signal.aborted) return;
+        seq = undefined;
         fail(error);
         if (state.status === 'refused') return;
         await wait(RETRY_MS, signal);
         continue;
       }
       if (signal.aborted) return;
-      if (answer.status === 204) continue;
+      if (answer.status === 204) {
+        if (state.status !== 'live') seq = undefined;
+        continue;
+      }
       if (answer.status === 403) {
         update({ status: 'no-access', notice: errorOf(answer) });
         return;
@@ -143,6 +147,7 @@ export function createBrowserViewer(options: BrowserViewerOptions): BrowserViewe
       }
       const body = record(answer.body);
       if (answer.status !== 200 || typeof body['data'] !== 'string') {
+        seq = undefined;
         update({ status: 'unreachable', notice: errorOf(answer) });
         await wait(RETRY_MS, signal);
         continue;

apps/mobile/src/host/computer-viewer.ts

@@ -161,13 +161,17 @@ export function createComputerViewer(options: ComputerViewerOptions): ComputerVi
         });
       } catch (error) {
         if (signal.aborted) return;
+        seq = undefined;
         fail(error);
         if (state.status === 'refused') return;
         await wait(RETRY_MS, signal);
         continue;
       }
       if (signal.aborted) return;
-      if (answer.status === 204) continue;
+      if (answer.status === 204) {
+        if (state.status !== 'live') seq = undefined;
+        continue;
+      }
       const body = record(answer.body);
       if (answer.status === 409 && body['code'] === 'not-running') {
         seq = undefined;
@@ -176,6 +180,7 @@ export function createComputerViewer(options: ComputerViewerOptions): ComputerVi
         continue;
       }
       if (answer.status !== 200 || typeof body['data'] !== 'string') {
+        seq = undefined;
         update({ status: 'unreachable', notice: errorOf(answer) });
         await wait(RETRY_MS, signal);
         continue;

changes/2500-remote-viewers.md

@@ -0,0 +1,11 @@
+---
+section: Added
+---
+
+## en
+
+- Open a Remote Host Bot's Browser or Computer viewer from its conversation, pause the Bot to send input, and release control when the viewer closes. Resuming the Bot or losing frames discards queued input; recovered frames require another explicit takeover. Shared viewers recover unchanged screens after a connection failure, and Web errors offer localized recovery guidance. Removing a Host waits up to five seconds for viewer cleanup before revoking the pairing. The viewers reuse the paired-device frame and input routes ([#2500](https://github.com/BotHarness/DeepSeekBot/issues/2500)).
+
+## zh
+
+- 可从远程 Bot 对话打开浏览器或共享桌面画面，暂停 Bot 后操作，关闭画面时交还控制权。恢复 Bot 或画面失联会丢弃排队输入；画面恢复后须重新明确接管。共享查看器可在连接故障后恢复未变化的画面，网页错误提示提供本地化恢复建议。移除 Host 时先等待画面释放控制，最多五秒，再撤销配对。画面与输入复用已配对设备的接口（[#2500](https://github.com/BotHarness/DeepSeekBot/issues/2500)）。

docs/architecture/botharness-architecture.md

@@ -1136,6 +1136,8 @@ Chats shares its persisted device-local conversation filter with Activity. The n
 
 ### Browser Remote Hosts and Host Feed (#2500)
 
+Remote Bot Browser and Computer viewers reuse `apps/mobile/src/host/browser-viewer.ts` and `computer-viewer.ts`. The Web adapter owns one mounted viewer against the selected Host client, projects its state through `useSyncExternalStore`, and uses the existing viewer title bar and design-system controls. Frame polling and input use device-authenticated HTTP; the Host Feed mux retains the one-time stream-ticket handshake. Closing or disconnecting aborts polls and input, waits for pending takeover requests, then releases control on the original Host. Replacement viewers wait for that cleanup. Inputs belong to one explicit control generation: resuming the Bot, losing control or losing frames invalidates that generation, even while the Host Feed remains connected. Recovered frames remain read-only until another explicit takeover. Shared Browser/Computer frame loops discard the cursor after a failed frame request, or a 204 received while not live, and fetch the current frame through the existing route; unchanged screens can therefore recover without a new sequence. The Web panel localizes recovery guidance while retaining the raw notice in the viewer snapshot for diagnostics. Removing a Host first closes its viewers and forgets the local entry, then waits up to five seconds for pending takeover/release cleanup before revoking the pairing; an unresponsive Host does not block removal indefinitely, but cleanup after that deadline may require the Host operator to resume Browser. The Computer remains the profile's shared desktop, while Browser scope includes the Bot slug. No Remote Host full-client fallback or new Host route is introduced.
+
 The application-defined browser `RemoteHosts` owner keeps its pairings and selected Host tab in device-local storage. Each Remote Host reuses the phone's Host client and conversation module through the device gateway; This Host never relays the Remote Host's credential. The shared `createInbox(client, { activity: true })` supplies each Remote Host's Human Inbox and unread snapshot. The first browser subscriber starts the client and Inbox, and the last stops them while retaining the last Inbox snapshot. Authenticated avatar fetches publish an immutable URL-to-object-URL map; removal, roster replacement and final unsubscribe release obsolete objects and discard late fetch results. The storage-key rename imports existing browser pairings and the selected tab. See [ADR-0242](../adr/0242-a-browser-pairs-other-computers-through-their-device-gateway.md) and [ADR-0243](../adr/0243-every-client-reads-every-host-through-one-host-feed.md).
 
 Activity Center consumes each Remote Host's shared Inbox through `RemoteHosts.activity`, reusing the existing `HumanInboxView` for Host groups. Its Host-scoped source supplies identity, pagination, source navigation and commands; it never receives This Host's `BridgeActions`. `createHostActivityActions` adapts the shared attention and request operations to the existing approval and question cards. Each operation resolves the current pairing before calling its Host client, and confirmed changes refresh that Host's Inbox. Filtered observers share the Host client and stop with their last subscriber. This Host still reads its existing bridge/store until that Host Feed slice migrates. Device Notification Preference remains a subsequent device-owned slice; the browser has no closed-page notification path.

packages/client/src/client/locale.ts

@@ -3,6 +3,28 @@ import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots';
 export const LOCALE_NS = 'botharness';
 
 export const zh = {
+  'remoteViewer.browser': '浏览器',
+  'remoteViewer.computer': '电脑',
+  'remoteViewer.live': '实时',
+  'remoteViewer.unavailable': '暂无画面',
+  'remoteViewer.loading': '连接中…',
+  'remoteViewer.retry': '重新连接',
+  'remoteViewer.open': '打开画面',
+  'remoteViewer.close': '关闭画面',
+  'remoteViewer.resume': '恢复 Bot',
+  'remoteViewer.takeover': '暂停 Bot 并接管',
+  'remoteViewer.watch': '仅观看',
+  'remoteViewer.screen': '远程画面',
+  'remoteViewer.type': '安全输入',
+  'remoteViewer.send': '发送文字',
+  'remoteViewer.enter': '回车',
+  'remoteViewer.tab': 'Tab',
+  'remoteViewer.browserStopped': '浏览器尚未运行。请让这个 Bot 打开它。',
+  'remoteViewer.computerStopped': '电脑尚未运行。请在远程启动它。',
+  'remoteViewer.refused': '此 Host 已撤销访问权限，请重新添加。',
+  'remoteViewer.noAccess': '此 Bot 没有浏览器权限。',
+  'remoteViewer.unreachable': '暂时无法连接远程，正在重连…',
+  'remoteViewer.actionUnconfirmed': '未能确认操作结果。请重新连接画面后检查。',
   'workspace.home': '首页',
   'workspace.storageFailed': '布局未能保存，已保留原来的布局。你仍可继续使用当前界面。',
   'tob.defaultName': '托布',
@@ -4135,6 +4157,28 @@ export function zhTranslate(key: BotHarnessKey | string, params?: Record<string,
 }
 
 export const en = {
+  'remoteViewer.browser': 'Browser',
+  'remoteViewer.computer': 'Computer',
+  'remoteViewer.live': 'Live',
+  'remoteViewer.unavailable': 'No screen',
+  'remoteViewer.loading': 'Connecting…',
+  'remoteViewer.retry': 'Reconnect',
+  'remoteViewer.open': 'Open viewer',
+  'remoteViewer.close': 'Close viewer',
+  'remoteViewer.resume': 'Resume Bot',
+  'remoteViewer.takeover': 'Pause Bot and take control',
+  'remoteViewer.watch': 'Watch only',
+  'remoteViewer.screen': 'Remote screen',
+  'remoteViewer.type': 'Type securely',
+  'remoteViewer.send': 'Send text',
+  'remoteViewer.enter': 'Enter',
+  'remoteViewer.tab': 'Tab',
+  'remoteViewer.browserStopped': 'The Browser is not running. Ask this Bot to open it.',
+  'remoteViewer.computerStopped': 'The Computer is not running. Start it on the Remote Host.',
+  'remoteViewer.refused': 'This Host removed your access. Add it again.',
+  'remoteViewer.noAccess': 'This Bot has no Browser access.',
+  'remoteViewer.unreachable': 'The Remote Host is unavailable. Reconnecting…',
+  'remoteViewer.actionUnconfirmed': 'Could not confirm the action. Reconnect and check the screen.',
   'wallpaper.reason.blocked': 'Autoplay was blocked by this runtime; using the poster.',
   'wallpaper.reason.stalled': 'Video decoding stalled; using the poster.',
   'wallpaper.reason.interrupted': 'Foreground playback was interrupted; using the poster.',