diff --git a/.agents/skills/verify-deepseekbot/features/remote-hosts.md b/.agents/skills/verify-deepseekbot/features/remote-hosts.md
index 305db01512..d3193d30b3 100644
--- a/.agents/skills/verify-deepseekbot/features/remote-hosts.md
+++ b/.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.
diff --git a/.github/pr-screenshots/t7/b-d.png b/.github/pr-screenshots/t7/b-d.png
new file mode 100644
index 0000000000..e4b4e2ec0b
Binary files /dev/null and b/.github/pr-screenshots/t7/b-d.png differ
diff --git a/.github/pr-screenshots/t7/b-l.png b/.github/pr-screenshots/t7/b-l.png
new file mode 100644
index 0000000000..94c3337702
Binary files /dev/null and b/.github/pr-screenshots/t7/b-l.png differ
diff --git a/.github/pr-screenshots/t7/br-d.png b/.github/pr-screenshots/t7/br-d.png
new file mode 100644
index 0000000000..7c23a0c12d
Binary files /dev/null and b/.github/pr-screenshots/t7/br-d.png differ
diff --git a/.github/pr-screenshots/t7/br-in.png b/.github/pr-screenshots/t7/br-in.png
new file mode 100644
index 0000000000..a73068c6ab
Binary files /dev/null and b/.github/pr-screenshots/t7/br-in.png differ
diff --git a/.github/pr-screenshots/t7/br-l.png b/.github/pr-screenshots/t7/br-l.png
new file mode 100644
index 0000000000..8e451c929a
Binary files /dev/null and b/.github/pr-screenshots/t7/br-l.png differ
diff --git a/.github/pr-screenshots/t7/co-d.png b/.github/pr-screenshots/t7/co-d.png
new file mode 100644
index 0000000000..22475b6374
Binary files /dev/null and b/.github/pr-screenshots/t7/co-d.png differ
diff --git a/.github/pr-screenshots/t7/co-in.png b/.github/pr-screenshots/t7/co-in.png
new file mode 100644
index 0000000000..0867003cb4
Binary files /dev/null and b/.github/pr-screenshots/t7/co-in.png differ
diff --git a/.github/pr-screenshots/t7/co-l.png b/.github/pr-screenshots/t7/co-l.png
new file mode 100644
index 0000000000..6d35c5b9f1
Binary files /dev/null and b/.github/pr-screenshots/t7/co-l.png differ
diff --git a/.github/pr-screenshots/t7/re-d.png b/.github/pr-screenshots/t7/re-d.png
new file mode 100644
index 0000000000..8e89666eb8
Binary files /dev/null and b/.github/pr-screenshots/t7/re-d.png differ
diff --git a/.github/pr-screenshots/t7/re-l.png b/.github/pr-screenshots/t7/re-l.png
new file mode 100644
index 0000000000..83b75526e0
Binary files /dev/null and b/.github/pr-screenshots/t7/re-l.png differ
diff --git a/.github/pr-screenshots/t7/rr-d.png b/.github/pr-screenshots/t7/rr-d.png
new file mode 100644
index 0000000000..1dbf73bdbe
Binary files /dev/null and b/.github/pr-screenshots/t7/rr-d.png differ
diff --git a/.github/pr-screenshots/t7/rr-l.png b/.github/pr-screenshots/t7/rr-l.png
new file mode 100644
index 0000000000..9ee01f6f7a
Binary files /dev/null and b/.github/pr-screenshots/t7/rr-l.png differ
diff --git a/apps/mobile/src/host/browser-viewer.ts b/apps/mobile/src/host/browser-viewer.ts
index a2051d6fca..5322b6c884 100644
--- a/apps/mobile/src/host/browser-viewer.ts
+++ b/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;
diff --git a/apps/mobile/src/host/computer-viewer.ts b/apps/mobile/src/host/computer-viewer.ts
index a186242c82..db6272e87a 100644
--- a/apps/mobile/src/host/computer-viewer.ts
+++ b/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;
diff --git a/changes/2500-remote-viewers.md b/changes/2500-remote-viewers.md
new file mode 100644
index 0000000000..b862cb09a6
--- /dev/null
+++ b/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)）。
diff --git a/docs/architecture/botharness-architecture.md b/docs/architecture/botharness-architecture.md
index f6fcf46027..6cc976c9f2 100644
--- a/docs/architecture/botharness-architecture.md
+++ b/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.
diff --git a/packages/client/src/client/locale.ts b/packages/client/src/client/locale.ts
index 68c63aad22..9833572249 100644
--- a/packages/client/src/client/locale.ts
+++ b/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.',
diff --git a/packages/client/src/client/remote-conversation-view.tsx b/packages/client/src/client/remote-conversation-view.tsx
index f6765be6a9..55991ba6ea 100644
--- a/packages/client/src/client/remote-conversation-view.tsx
+++ b/packages/client/src/client/remote-conversation-view.tsx
@@ -17,6 +17,8 @@ import { border, color, radius, space, text } from './ds/tokens.stylex.js';
 import type { BotHarnessTranslate } from './locale.js';
 import { observeRemoteRead } from './remote-conversation-read.js';
 import { useMountedResource } from './mounted-resource.js';
+import { RemoteHostViewerPanel } from './remote-host-viewer-panel.js';
+import type { RemoteViewerKind } from './remote-host-viewer.js';
 
 const styles = stylex.create({
   root: {
@@ -190,6 +192,12 @@ export function RemoteConversationView({
     [sources, conversation, target.hostId, target.botSlug, target.channelId],
   );
   const [draft, setDraft] = useState('');
+  const [viewer, setViewer] = useState<RemoteViewerKind>();
+  const viewerClient = sources.viewerClient(target.hostId);
+  const bot =
+    target.channelId === undefined
+      ? remote?.snapshot.roster?.bots.find((entry) => entry.slug === target.botSlug)
+      : undefined;
   const labels = useMemo<MarkdownLabels>(
     () => ({
       code: { copyLabel: t('message.code.copy'), copiedLabel: t('message.code.copied') },
@@ -228,105 +236,150 @@ export function RemoteConversationView({
           {remote?.host.hostName ?? ''}
         </span>
         <span {...stylex.props(styles.spacer)} />
+        {bot?.browserAccess ? (
+          <IconButton
+            aria-label={t('remoteViewer.browser')}
+            title={t('remoteViewer.browser')}
+            aria-pressed={viewer === 'browser'}
+            onClick={() => setViewer(viewer === 'browser' ? undefined : 'browser')}
+          >
+            <ChannelSidebarIcon name="globe" />
+          </IconButton>
+        ) : null}
+        {bot?.computerAccess ? (
+          <IconButton
+            aria-label={t('remoteViewer.computer')}
+            title={t('remoteViewer.computer')}
+            aria-pressed={viewer === 'computer'}
+            onClick={() => setViewer(viewer === 'computer' ? undefined : 'computer')}
+          >
+            <ChannelSidebarIcon name="monitor" />
+          </IconButton>
+        ) : null}
         <IconButton aria-label={t('common.close')} onClick={() => sources.close()}>
           <ChannelSidebarIcon name="x" />
         </IconButton>
       </header>
-      {!reachable ? (
-        <p role="status" {...stylex.props(styles.status)}>
-          {t('remoteHosts.offline', { name: remote?.host.hostName ?? '' })}
-        </p>
-      ) : snapshot.status === 'interrupted' || snapshot.status === 'refused' ? (
-        <p role="status" {...stylex.props(styles.status)}>
-          {snapshot.reason ?? t('remoteHosts.interrupted')}
-        </p>
-      ) : null}
-      <div ref={markReadMount} {...stylex.props(styles.timeline)} data-remote-timeline="">
-        {snapshot.drafts.map((entry) => (
-          <div key={entry.draftId} {...stylex.props(styles.message)}>
-            <span {...stylex.props(styles.author)}>
-              <RemoteAvatar
-                roster={remote?.snapshot.roster}
-                avatars={avatars}
-                target={{ botSlug: entry.botSlug, title: bots.get(entry.botSlug) ?? entry.botSlug }}
-                size={24}
-                t={t}
-              />
-              {bots.get(entry.botSlug) ?? entry.botSlug}
-            </span>
-            <div {...stylex.props(styles.bubble)}>
-              <MarkdownText text={entry.body} streaming labels={labels} />
-            </div>
+      {viewer !== undefined &&
+      viewerClient !== undefined &&
+      bot !== undefined &&
+      (viewer === 'browser' ? bot.browserAccess : bot.computerAccess) ? (
+        <RemoteHostViewerPanel
+          key={`${target.hostId}:${bot.slug}:${viewer}`}
+          client={viewerClient}
+          kind={viewer}
+          slug={bot.slug}
+          hostName={remote?.host.hostName ?? ''}
+          t={t}
+          onClose={() => setViewer(undefined)}
+        />
+      ) : (
+        <>
+          {!reachable ? (
+            <p role="status" {...stylex.props(styles.status)}>
+              {t('remoteHosts.offline', { name: remote?.host.hostName ?? '' })}
+            </p>
+          ) : snapshot.status === 'interrupted' || snapshot.status === 'refused' ? (
+            <p role="status" {...stylex.props(styles.status)}>
+              {snapshot.reason ?? t('remoteHosts.interrupted')}
+            </p>
+          ) : null}
+          <div ref={markReadMount} {...stylex.props(styles.timeline)} data-remote-timeline="">
+            {snapshot.drafts.map((entry) => (
+              <div key={entry.draftId} {...stylex.props(styles.message)}>
+                <span {...stylex.props(styles.author)}>
+                  <RemoteAvatar
+                    roster={remote?.snapshot.roster}
+                    avatars={avatars}
+                    target={{
+                      botSlug: entry.botSlug,
+                      title: bots.get(entry.botSlug) ?? entry.botSlug,
+                    }}
+                    size={24}
+                    t={t}
+                  />
+                  {bots.get(entry.botSlug) ?? entry.botSlug}
+                </span>
+                <div {...stylex.props(styles.bubble)}>
+                  <MarkdownText text={entry.body} streaming labels={labels} />
+                </div>
+              </div>
+            ))}
+            {[...shown].reverse().map((message) => (
+              <div
+                key={message.id}
+                data-remote-message={message.id}
+                {...stylex.props(styles.message, message.author === 'human' && styles.human)}
+              >
+                <span {...stylex.props(styles.author)}>
+                  {message.author === 'bot' && message.bot !== undefined ? (
+                    <RemoteAvatar
+                      roster={remote?.snapshot.roster}
+                      avatars={avatars}
+                      target={{ botSlug: message.bot, title: authorName(message, bots, t) }}
+                      size={24}
+                      t={t}
+                    />
+                  ) : null}
+                  {authorName(message, bots, t)}
+                </span>
+                <div
+                  {...stylex.props(styles.bubble, message.author === 'human' && styles.humanBubble)}
+                >
+                  <MarkdownText
+                    text={
+                      message.body.trim() !== ''
+                        ? message.body
+                        : message.attachments.map((attachment) => attachment.name).join(', ')
+                    }
+                    streaming={false}
+                    labels={labels}
+                  />
+                </div>
+                {message.delivery === 'failed' ? (
+                  <span {...stylex.props(styles.failed)}>
+                    {message.error ?? t('remoteHosts.sendFailed')}
+                  </span>
+                ) : null}
+              </div>
+            ))}
           </div>
-        ))}
-        {[...shown].reverse().map((message) => (
-          <div
-            key={message.id}
-            data-remote-message={message.id}
-            {...stylex.props(styles.message, message.author === 'human' && styles.human)}
+          <form
+            {...stylex.props(styles.composer)}
+            onSubmit={(event) => {
+              event.preventDefault();
+              send();
+            }}
           >
-            <span {...stylex.props(styles.author)}>
-              {message.author === 'bot' && message.bot !== undefined ? (
-                <RemoteAvatar
-                  roster={remote?.snapshot.roster}
-                  avatars={avatars}
-                  target={{ botSlug: message.bot, title: authorName(message, bots, t) }}
-                  size={24}
-                  t={t}
-                />
-              ) : null}
-              {authorName(message, bots, t)}
-            </span>
-            <div {...stylex.props(styles.bubble, message.author === 'human' && styles.humanBubble)}>
-              <MarkdownText
-                text={
-                  message.body.trim() !== ''
-                    ? message.body
-                    : message.attachments.map((attachment) => attachment.name).join(', ')
-                }
-                streaming={false}
-                labels={labels}
-              />
-            </div>
-            {message.delivery === 'failed' ? (
-              <span {...stylex.props(styles.failed)}>
-                {message.error ?? t('remoteHosts.sendFailed')}
-              </span>
-            ) : null}
-          </div>
-        ))}
-      </div>
-      <form
-        {...stylex.props(styles.composer)}
-        onSubmit={(event) => {
-          event.preventDefault();
-          send();
-        }}
-      >
-        <textarea
-          {...stylex.props(styles.input)}
-          aria-label={t('remoteHosts.composer', { name: target.title })}
-          data-remote-composer=""
-          rows={1}
-          value={draft}
-          disabled={!reachable}
-          placeholder={reachable ? t('remoteHosts.composer', { name: target.title }) : undefined}
-          onChange={(event) => setDraft(event.currentTarget.value)}
-          onKeyDown={(event) => {
-            if (event.key !== 'Enter' || event.shiftKey || event.nativeEvent.isComposing) return;
-            event.preventDefault();
-            send();
-          }}
-        />
-        <Button
-          type="submit"
-          variant="primary"
-          disabled={!reachable || draft.trim().length === 0}
-          data-remote-send=""
-        >
-          {t('remoteHosts.send')}
-        </Button>
-      </form>
+            <textarea
+              {...stylex.props(styles.input)}
+              aria-label={t('remoteHosts.composer', { name: target.title })}
+              data-remote-composer=""
+              rows={1}
+              value={draft}
+              disabled={!reachable}
+              placeholder={
+                reachable ? t('remoteHosts.composer', { name: target.title }) : undefined
+              }
+              onChange={(event) => setDraft(event.currentTarget.value)}
+              onKeyDown={(event) => {
+                if (event.key !== 'Enter' || event.shiftKey || event.nativeEvent.isComposing)
+                  return;
+                event.preventDefault();
+                send();
+              }}
+            />
+            <Button
+              type="submit"
+              variant="primary"
+              disabled={!reachable || draft.trim().length === 0}
+              data-remote-send=""
+            >
+              {t('remoteHosts.send')}
+            </Button>
+          </form>
+        </>
+      )}
     </section>
   );
 }
diff --git a/packages/client/src/client/remote-host-viewer-panel.tsx b/packages/client/src/client/remote-host-viewer-panel.tsx
new file mode 100644
index 0000000000..437447dd46
--- /dev/null
+++ b/packages/client/src/client/remote-host-viewer-panel.tsx
@@ -0,0 +1,255 @@
+import { useMemo, useState, useSyncExternalStore, type ReactElement } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { Button, Input } from '@deepseek-ai/dsh-client-ui-primitives';
+import { pagePoint } from '../../../../apps/mobile/src/host/browser-viewer.js';
+import type { HostClient } from '../../../../apps/mobile/src/host/client.js';
+import { PanelEmptyState } from './ds/empty-state.js';
+import { border, color, space, text } from './ds/tokens.stylex.js';
+import type { BotHarnessTranslate } from './locale.js';
+import { createRemoteHostViewer, type RemoteViewerKind } from './remote-host-viewer.js';
+import { ViewerTitleBar } from './remote-viewer/index.js';
+import type { ViewerKey } from './remote-viewer/locale.js';
+
+const styles = stylex.create({
+  root: { display: 'flex', flexDirection: 'column', flexGrow: 1, minHeight: 0 },
+  stage: {
+    position: 'relative',
+    flexGrow: 1,
+    minHeight: 0,
+    overflow: 'hidden',
+    backgroundColor: color.well,
+    outline: { default: 'none', ':focus-visible': `${border.focus} solid ${color.accent}` },
+  },
+  frame: {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain',
+    userSelect: 'none',
+  },
+  controls: {
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: space.x3,
+    padding: space.x3,
+  },
+  input: { flexGrow: 1, minWidth: 0 },
+  notice: {
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: space.x3,
+    margin: 0,
+    padding: space.x3,
+    color: color.muted,
+    fontSize: text.metaSize,
+    lineHeight: text.metaLine,
+  },
+});
+
+const titleKeys = {
+  'entry.live': 'remoteViewer.live',
+  'entry.noScreen': 'remoteViewer.unavailable',
+  'entry.connecting': 'remoteViewer.loading',
+  'entry.reconnecting': 'remoteViewer.loading',
+  'entry.reconnect': 'remoteViewer.retry',
+  'entry.openFullscreen': 'remoteViewer.open',
+  'entry.collapseFullscreen': 'remoteViewer.close',
+  'entry.interactive.disable': 'remoteViewer.resume',
+  'entry.interactive.enable': 'remoteViewer.takeover',
+  'entry.watchOnly': 'remoteViewer.watch',
+  'entry.stop': 'remoteViewer.close',
+  'entry.stopping': 'remoteViewer.loading',
+} as const;
+
+export function RemoteHostViewerPanel({
+  client,
+  kind,
+  slug,
+  hostName,
+  t,
+  onClose,
+}: {
+  client: HostClient;
+  kind: RemoteViewerKind;
+  slug: string;
+  hostName: string;
+  t: BotHarnessTranslate;
+  onClose(): void;
+}): ReactElement {
+  const [attempt, setAttempt] = useState(0);
+  const viewer = useMemo(
+    () => createRemoteHostViewer(client, kind, slug),
+    [client, kind, slug, attempt],
+  );
+  const state = useSyncExternalStore(viewer.subscribe, viewer.getSnapshot, viewer.getSnapshot);
+  const [typed, setTyped] = useState('');
+  const title = `${t(`remoteViewer.${kind}`)} · ${hostName}`;
+  const live = state.status === 'live' && state.frame !== undefined;
+  const driving = live && state.control && !state.switching;
+  const unavailable =
+    state.status === 'not-running'
+      ? t(`remoteViewer.${kind}Stopped`)
+      : state.status === 'refused'
+        ? t('remoteViewer.refused')
+        : state.status === 'no-access'
+          ? t('remoteViewer.noAccess')
+          : state.status === 'loading'
+            ? t('remoteViewer.loading')
+            : t('remoteViewer.unreachable');
+  return (
+    <section {...stylex.props(styles.root)} aria-label={title} data-remote-viewer={kind}>
+      <ViewerTitleBar
+        t={(key: ViewerKey) => t(titleKeys[key])}
+        title={title}
+        phase={live ? 'live' : state.status === 'loading' ? 'connecting' : 'empty'}
+        reconnecting={false}
+        busy={!live || state.switching}
+        stopping={false}
+        interactive={state.control}
+        onToggleInteractive={() => void viewer.setControl(!state.control)}
+        onStop={onClose}
+        onCollapse={onClose}
+        hideStop
+      />
+      {live ? (
+        <div
+          {...stylex.props(styles.stage)}
+          role="group"
+          aria-label={t('remoteViewer.screen')}
+          tabIndex={driving ? 0 : -1}
+          onClick={(event) => {
+            if (!driving || state.frame === undefined) return;
+            const rect = event.currentTarget.getBoundingClientRect();
+            const point = pagePoint(
+              { x: event.clientX - rect.left, y: event.clientY - rect.top },
+              state.frame,
+              rect,
+            );
+            if (point !== undefined) void viewer.send({ kind: 'click', ...point });
+            event.currentTarget.focus();
+          }}
+          onContextMenu={(event) => {
+            event.preventDefault();
+            if (!driving || state.frame === undefined) return;
+            const rect = event.currentTarget.getBoundingClientRect();
+            const point = pagePoint(
+              { x: event.clientX - rect.left, y: event.clientY - rect.top },
+              state.frame,
+              rect,
+            );
+            if (point !== undefined) void viewer.send({ kind: 'click', button: 'right', ...point });
+          }}
+          onWheel={(event) => {
+            if (!driving || state.frame === undefined || event.deltaY === 0) return;
+            const rect = event.currentTarget.getBoundingClientRect();
+            const point = pagePoint(
+              { x: event.clientX - rect.left, y: event.clientY - rect.top },
+              state.frame,
+              rect,
+            );
+            if (point !== undefined)
+              void viewer.send({
+                kind: 'scroll',
+                direction: event.deltaY > 0 ? 'down' : 'up',
+                amount: kind === 'computer' ? 3 : 300,
+                ...point,
+              });
+          }}
+          onKeyDown={(event) => {
+            if (!driving || event.nativeEvent.isComposing || event.key === 'Tab') return;
+            const key = (
+              {
+                Enter: 'return',
+                Backspace: 'delete',
+                Escape: 'escape',
+                ArrowLeft: 'left',
+                ArrowRight: 'right',
+                ArrowUp: 'up',
+                ArrowDown: 'down',
+              } as Record<string, string>
+            )[event.key];
+            if (key === undefined) return;
+            event.preventDefault();
+            void viewer.send({ kind: 'key', key: kind === 'browser' ? event.key : key });
+          }}
+        >
+          <img
+            {...stylex.props(styles.frame)}
+            src={state.frame?.uri}
+            alt={t('remoteViewer.screen')}
+            draggable={false}
+          />
+        </div>
+      ) : (
+        <PanelEmptyState icon={kind === 'computer' ? 'monitor' : 'globe'}>
+          {unavailable}
+        </PanelEmptyState>
+      )}
+      {state.notice === undefined || !live ? null : (
+        <div role="status" {...stylex.props(styles.notice)}>
+          <span>{t('remoteViewer.actionUnconfirmed')}</span>
+          <Button size="sm" variant="ghost" onClick={() => setAttempt((value) => value + 1)}>
+            {t('remoteViewer.retry')}
+          </Button>
+        </div>
+      )}
+      <form
+        {...stylex.props(styles.controls)}
+        data-companion-avoid
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (!driving || typed === '') return;
+          void viewer.send({ kind: 'type', text: typed });
+          setTyped('');
+        }}
+      >
+        {!live && state.status !== 'refused' && state.status !== 'loading' ? (
+          <Button
+            size="sm"
+            type="button"
+            variant="ghost"
+            onClick={() => setAttempt((value) => value + 1)}
+          >
+            {t('remoteViewer.retry')}
+          </Button>
+        ) : null}
+        <div {...stylex.props(styles.input)}>
+          <Input
+            aria-label={t('remoteViewer.type')}
+            placeholder={t('remoteViewer.type')}
+            type="password"
+            maxLength={4000}
+            autoComplete="off"
+            value={typed}
+            disabled={!driving}
+            onChange={(event) => setTyped(event.currentTarget.value)}
+          />
+        </div>
+        <Button size="sm" type="submit" disabled={!driving || typed === ''}>
+          {t('remoteViewer.send')}
+        </Button>
+        <Button
+          size="sm"
+          type="button"
+          disabled={!driving}
+          onClick={() =>
+            void viewer.send({ kind: 'key', key: kind === 'browser' ? 'Enter' : 'return' })
+          }
+        >
+          {t('remoteViewer.enter')}
+        </Button>
+        <Button
+          size="sm"
+          type="button"
+          disabled={!driving}
+          onClick={() => void viewer.send({ kind: 'key', key: kind === 'browser' ? 'Tab' : 'tab' })}
+        >
+          {t('remoteViewer.tab')}
+        </Button>
+      </form>
+    </section>
+  );
+}
diff --git a/packages/client/src/client/remote-host-viewer.ts b/packages/client/src/client/remote-host-viewer.ts
new file mode 100644
index 0000000000..985ff22434
--- /dev/null
+++ b/packages/client/src/client/remote-host-viewer.ts
@@ -0,0 +1,264 @@
+import {
+  createBrowserViewer,
+  type BrowserFrame,
+  type BrowserInput,
+  type BrowserViewerStatus,
+} from '../../../../apps/mobile/src/host/browser-viewer.js';
+import { createComputerViewer } from '../../../../apps/mobile/src/host/computer-viewer.js';
+import type { HostClient } from '../../../../apps/mobile/src/host/client.js';
+
+export type RemoteViewerKind = 'browser' | 'computer';
+
+export interface RemoteHostViewerState {
+  status: BrowserViewerStatus;
+  frame?: BrowserFrame;
+  control: boolean;
+  switching: boolean;
+  notice?: string | undefined;
+}
+
+export interface RemoteHostViewer {
+  getSnapshot(): RemoteHostViewerState;
+  subscribe(listener: () => void): () => void;
+  setControl(active: boolean): Promise<void>;
+  send(input: BrowserInput): Promise<void>;
+}
+
+interface ViewerRelease {
+  settled: Promise<void>;
+  retry(): Promise<void>;
+}
+
+const releases = new WeakMap<object, Map<string, ViewerRelease>>();
+const viewers = new WeakMap<object, Set<() => void>>();
+const removedHosts = new WeakSet<object>();
+
+export async function releaseRemoteHostViewers(host: object): Promise<void> {
+  removedHosts.add(host);
+  for (const stop of viewers.get(host) ?? []) stop();
+  const pending = [...(releases.get(host)?.values() ?? [])].map(({ settled, retry }) =>
+    settled.then(retry),
+  );
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  try {
+    await Promise.race([
+      Promise.allSettled(pending),
+      new Promise<void>((resolve) => {
+        timer = setTimeout(resolve, 5000);
+      }),
+    ]);
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+export function createRemoteHostViewer(
+  host: Pick<HostClient, 'api' | 'subscribe' | 'getSnapshot'>,
+  kind: RemoteViewerKind,
+  slug: string,
+): RemoteHostViewer {
+  const key = kind === 'computer' ? kind : `${kind}:${slug}`;
+  let hostReleases = releases.get(host);
+  if (hostReleases === undefined) {
+    hostReleases = new Map();
+    releases.set(host, hostReleases);
+  }
+  const barriers = hostReleases;
+  let hostViewers = viewers.get(host);
+  if (hostViewers === undefined) {
+    hostViewers = new Set();
+    viewers.set(host, hostViewers);
+  }
+  const owners = hostViewers;
+  const listeners = new Set<() => void>();
+  let state: RemoteHostViewerState = { status: 'loading', control: false, switching: false };
+  let session:
+    | {
+        stop(): void;
+        control(active: boolean): Promise<void>;
+        send(input: BrowserInput): Promise<void>;
+      }
+    | undefined;
+  let unsubscribe: (() => void) | undefined;
+  let release: Promise<void> = Promise.resolve();
+  let retryRelease = async (): Promise<void> => {};
+  const takeoverPath = `/api/${kind}/takeover`;
+  const inputPath = `/api/${kind}/input`;
+  const publish = (next: RemoteHostViewerState): void => {
+    state = next;
+    for (const listener of listeners) listener();
+  };
+  const start = (): NonNullable<typeof session> => {
+    let active = true;
+    let requestedControl = false;
+    let controlGeneration = 0;
+    let inputGeneration: number | undefined;
+    const invalidateControl = (): void => {
+      requestedControl = false;
+      controlGeneration += 1;
+    };
+    let releaseNeeded = false;
+    let releasing = false;
+    let inputs: Promise<void> = Promise.resolve();
+    const abort = new AbortController();
+    const pending = new Set<Promise<unknown>>();
+    const client: Pick<HostClient, 'api'> = {
+      async api(path, init) {
+        if (!active && !(releasing && path === takeoverPath && init?.body?.['active'] === false))
+          throw new DOMException('Viewer closed', 'AbortError');
+        if (
+          (path === inputPath && (inputGeneration !== controlGeneration || !state.control)) ||
+          (path === takeoverPath &&
+            init?.body?.['active'] === true &&
+            (!requestedControl || state.status !== 'live'))
+        )
+          throw new DOMException('Viewer control expired', 'AbortError');
+        if (init?.body?.['active'] === true && path === takeoverPath) releaseNeeded = true;
+        const taking = path === takeoverPath;
+        const signal = taking
+          ? init?.signal
+          : init?.signal === undefined
+            ? abort.signal
+            : AbortSignal.any([abort.signal, init.signal]);
+        const request = host.api(path, { ...init, ...(signal === undefined ? {} : { signal }) });
+        if (taking) pending.add(request);
+        try {
+          const answer = await request;
+          if (!active && !taking) throw new DOMException('Viewer closed', 'AbortError');
+          if (taking && init?.body?.['active'] === false && answer.status === 200)
+            releaseNeeded = false;
+          return answer;
+        } finally {
+          pending.delete(request);
+        }
+      },
+    };
+    const viewer =
+      kind === 'browser' ? createBrowserViewer({ client, slug }) : createComputerViewer({ client });
+    const releaseControl = async (): Promise<void> => {
+      if (!releaseNeeded) return;
+      releasing = true;
+      try {
+        if ('setTakeover' in viewer) await viewer.setTakeover(false);
+        else await viewer.setControl(false);
+      } finally {
+        releasing = false;
+      }
+    };
+    retryRelease = releaseControl;
+    const read = (): void => {
+      if (!active) return;
+      const next = viewer.getState();
+      const controlling = 'takeover' in next ? next.takeover : next.control;
+      if (next.status !== 'live' || (state.control && !controlling)) invalidateControl();
+      publish({
+        status: next.status,
+        ...(next.status !== 'live' || next.frame === undefined ? {} : { frame: next.frame }),
+        control: requestedControl && controlling,
+        switching: state.switching,
+        notice: next.notice,
+      });
+    };
+    const stopReading = viewer.subscribe(read);
+    void release.then(() => {
+      if (active) viewer.start();
+    });
+    return {
+      stop() {
+        invalidateControl();
+        active = false;
+        abort.abort();
+        stopReading();
+        viewer.stop();
+        release = Promise.allSettled([release, ...pending]).then(releaseControl);
+        const settled = release;
+        barriers.set(key, { settled, retry: releaseControl });
+        void settled.then(() => {
+          if (!releaseNeeded && barriers.get(key)?.settled === settled) barriers.delete(key);
+        });
+      },
+      async control(value) {
+        if (!active || state.switching || (value && state.status !== 'live')) return;
+        invalidateControl();
+        requestedControl = value;
+        publish({ ...state, control: false, switching: true });
+        try {
+          if ('setTakeover' in viewer) await viewer.setTakeover(value);
+          else await viewer.setControl(value);
+        } finally {
+          if (active) publish({ ...state, switching: false });
+        }
+      },
+      send(input) {
+        if (!active || state.status !== 'live' || !state.control || state.switching)
+          return Promise.resolve();
+        const generation = controlGeneration;
+        const next = inputs.then(async () => {
+          if (
+            active &&
+            generation === controlGeneration &&
+            state.status === 'live' &&
+            state.control &&
+            !state.switching
+          ) {
+            inputGeneration = generation;
+            try {
+              await viewer.send(input);
+            } finally {
+              inputGeneration = undefined;
+            }
+          }
+        });
+        inputs = next.catch(() => {});
+        return next;
+      },
+    };
+  };
+  const stopOwner = (): void => {
+    unsubscribe?.();
+    unsubscribe = undefined;
+    session?.stop();
+    session = undefined;
+    owners.delete(stopOwner);
+    publish({ status: 'loading', control: false, switching: false });
+  };
+  const reconcile = (): void => {
+    if (removedHosts.has(host)) return stopOwner();
+    const connection = host.getSnapshot().connection.status;
+    if (connection === 'connected') {
+      if (session !== undefined) return;
+      publish({ status: 'loading', control: false, switching: false });
+      const previous = barriers.get(key);
+      release = Promise.allSettled([release, previous?.settled])
+        .then(() => previous?.retry())
+        .then(retryRelease);
+      session = start();
+    } else {
+      session?.stop();
+      session = undefined;
+      publish({
+        status: connection === 'refused' ? 'refused' : 'unreachable',
+        control: false,
+        switching: false,
+      });
+    }
+  };
+  return {
+    getSnapshot: () => state,
+    subscribe(listener: () => void) {
+      listeners.add(listener);
+      if (listeners.size === 1) {
+        owners.add(stopOwner);
+        unsubscribe = host.subscribe(reconcile);
+        reconcile();
+      }
+      return () => {
+        listeners.delete(listener);
+        if (listeners.size !== 0) return;
+        stopOwner();
+      };
+    },
+    setControl: (active: boolean) => session?.control(active) ?? Promise.resolve(),
+    send: (input: BrowserInput) => session?.send(input) ?? Promise.resolve(),
+  };
+}
diff --git a/packages/client/src/client/remote-hosts.ts b/packages/client/src/client/remote-hosts.ts
index 91bf015403..47e3373be3 100644
--- a/packages/client/src/client/remote-hosts.ts
+++ b/packages/client/src/client/remote-hosts.ts
@@ -25,6 +25,7 @@ import {
 } from '../../../../apps/mobile/src/host/pairing.js';
 import { store } from './store.js';
 import { createRemoteActivityProjection, type RemoteBotActivity } from './remote-host-activity.js';
+import { releaseRemoteHostViewers } from './remote-host-viewer.js';
 
 export const REMOTE_HOSTS_STORAGE_KEY = 'botharness.remoteHosts.v1';
 export const HOST_TAB_STORAGE_KEY = 'botharness.hostTab.v1';
@@ -68,6 +69,7 @@ export interface RemoteHosts {
   markRead(target: RemoteConversationTarget, messageId: string): Promise<void>;
   activity(hostId: string, query?: InboxQuery): ReturnType<typeof observeInbox> | undefined;
   client(hostId: string): HostClient | undefined;
+  viewerClient(hostId: string): HostClient | undefined;
 }
 
 export interface HostStorage {
@@ -312,7 +314,9 @@ export function createRemoteHosts(options: {
     async remove(hostId) {
       const entry = clients.get(hostId);
       if (entry === undefined) return;
+      const releasing = releaseRemoteHostViewers(entry.client);
       forget(hostId);
+      await releasing;
       await revokePairing({ host: entry.host, carrier });
     },
     select(next) {
@@ -358,6 +362,9 @@ export function createRemoteHosts(options: {
       }
       return conversation;
     },
+    viewerClient(hostId) {
+      return clients.get(hostId)?.client;
+    },
   };
 }
 
diff --git a/packages/client/test/remote-host-viewer-panel.test.tsx b/packages/client/test/remote-host-viewer-panel.test.tsx
new file mode 100644
index 0000000000..c889199747
--- /dev/null
+++ b/packages/client/test/remote-host-viewer-panel.test.tsx
@@ -0,0 +1,100 @@
+import {
+  createElement,
+  type ButtonHTMLAttributes,
+  type InputHTMLAttributes,
+  type ReactNode,
+} from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it, vi } from 'vitest';
+import { createHostClient } from '../../../apps/mobile/src/host/client.js';
+import { en, zhTranslate } from '../src/client/locale.js';
+import type { RemoteHostViewerState } from '../src/client/remote-host-viewer.js';
+import { RemoteHostViewerPanel } from '../src/client/remote-host-viewer-panel.js';
+
+let snapshot: RemoteHostViewerState;
+vi.mock('@deepseek-ai/dsh-client-ui-primitives', () => ({
+  Button: ({
+    variant: _variant,
+    size: _size,
+    ...props
+  }: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: string; size?: string }) =>
+    createElement('button', props),
+  Input: (props: InputHTMLAttributes<HTMLInputElement>) => createElement('input', props),
+  Tooltip: ({ children }: { children: ReactNode }) => children,
+  StateDot: () => null,
+}));
+vi.mock('../src/client/remote-host-viewer.js', () => ({
+  createRemoteHostViewer: () => ({
+    getSnapshot: () => snapshot,
+    subscribe: () => () => {},
+    setControl: async () => {},
+    send: async () => {},
+  }),
+}));
+
+const client = createHostClient({
+  routes: ['http://host.test'],
+  credential: 'test.credential',
+  carrier: {
+    request: async () => {
+      throw new Error('Rendering must not request the Host');
+    },
+    openSocket: () => {
+      throw new Error('Rendering must not connect the Feed');
+    },
+  },
+});
+
+describe.each(['zh', 'en'] as const)('%s remote viewer error presentation', (language) => {
+  it.each(['The Host answered 502.', 'ECONNRESET transport', 'Runtime driver unavailable'])(
+    'localizes a live viewer failure while retaining diagnostic cause: %s',
+    (notice) => {
+      snapshot = {
+        status: 'live',
+        control: false,
+        switching: false,
+        frame: { seq: 7, uri: 'data:image/png;base64,AAAA', width: 100, height: 100 },
+        notice,
+      };
+      const markup = renderToStaticMarkup(
+        createElement(RemoteHostViewerPanel, {
+          client,
+          kind: 'browser',
+          slug: 'ada',
+          hostName: 'Studio',
+          t: language === 'zh' ? zhTranslate : (key) => en[key as keyof typeof en] ?? key,
+          onClose() {},
+        }),
+      );
+      expect(markup).not.toContain(notice);
+      expect(markup).toContain(
+        language === 'zh' ? '未能确认操作结果' : 'Could not confirm the action',
+      );
+      expect(markup).toContain(language === 'zh' ? '重新连接' : 'Reconnect');
+      expect(snapshot.notice).toBe(notice);
+    },
+  );
+
+  it('uses the localized connection guidance instead of raw transport errors', () => {
+    snapshot = {
+      status: 'unreachable',
+      control: false,
+      switching: false,
+      notice: 'Raw upstream transport failure',
+    };
+    const markup = renderToStaticMarkup(
+      createElement(RemoteHostViewerPanel, {
+        client,
+        kind: 'computer',
+        slug: 'ada',
+        hostName: 'Studio',
+        t: language === 'zh' ? zhTranslate : (key) => en[key as keyof typeof en] ?? key,
+        onClose() {},
+      }),
+    );
+    expect(markup).not.toContain(snapshot.notice);
+    expect(markup).toContain(language === 'zh' ? '重新连接' : 'Reconnect');
+    expect(markup).not.toContain('data-panel-empty-action');
+    expect(snapshot.notice).toBe('Raw upstream transport failure');
+  });
+});
diff --git a/packages/client/test/remote-host-viewer-recovery.test.ts b/packages/client/test/remote-host-viewer-recovery.test.ts
new file mode 100644
index 0000000000..cb7ec6288e
--- /dev/null
+++ b/packages/client/test/remote-host-viewer-recovery.test.ts
@@ -0,0 +1,184 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createBrowserViewer } from '../../../apps/mobile/src/host/browser-viewer.js';
+import { createComputerViewer } from '../../../apps/mobile/src/host/computer-viewer.js';
+import type {
+  HostApiAnswer,
+  HostApiInit,
+  HostClient,
+} from '../../../apps/mobile/src/host/client.js';
+import { createRemoteHostViewer } from '../src/client/remote-host-viewer.js';
+
+afterEach(() => vi.useRealTimers());
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason: unknown) => void;
+  const promise = new Promise<T>((accept, refuse) => {
+    resolve = accept;
+    reject = refuse;
+  });
+  return { promise, resolve, reject };
+}
+
+function staticFrameHost() {
+  const framePaths: string[] = [];
+  const inputs: unknown[] = [];
+  const failure = deferred<HostApiAnswer>();
+  const input = deferred<HostApiAnswer>();
+  let reads = 0;
+  const client: Pick<HostClient, 'api' | 'subscribe' | 'getSnapshot'> = {
+    subscribe: () => () => {},
+    getSnapshot: () => ({ connection: { status: 'connected', route: 'host-b' } }),
+    async api(path: string, init?: HostApiInit): Promise<HostApiAnswer> {
+      if (path.includes('/frame')) {
+        framePaths.push(path);
+        reads += 1;
+        if (reads === 2) return failure.promise;
+        const after = new URL(path, 'http://host.test').searchParams.get('after');
+        if (after === '7')
+          return new Promise((resolve, reject) => {
+            const timer = setTimeout(() => {
+              init?.signal?.removeEventListener('abort', abort);
+              resolve({ status: 204, body: null });
+            }, 10_000);
+            function abort(): void {
+              clearTimeout(timer);
+              reject(new DOMException('aborted', 'AbortError'));
+            }
+            if (init?.signal?.aborted) abort();
+            else init?.signal?.addEventListener('abort', abort, { once: true });
+          });
+        return {
+          status: 200,
+          body: {
+            seq: 7,
+            data: 'unchanged',
+            width: 100,
+            height: 100,
+            viewport: { width: 100, height: 100 },
+            mode: 'stream',
+          },
+        };
+      }
+      if (path.endsWith('/input')) {
+        inputs.push(init?.body);
+        return inputs.length === 1 ? input.promise : { status: 200, body: {} };
+      }
+      return {
+        status: 200,
+        body: {
+          takeover: init?.body?.['active'] === true,
+          paused: init?.body?.['active'] === true,
+        },
+      };
+    },
+  };
+  return {
+    client,
+    framePaths,
+    inputs,
+    fail(mode: 'network' | '502' | 'malformed') {
+      if (mode === 'network') failure.reject(new TypeError('Frame transport lost'));
+      else failure.resolve({ status: mode === '502' ? 502 : 200, body: {} });
+    },
+    finishInput: () => input.resolve({ status: 200, body: {} }),
+    failInput: () => input.reject(new TypeError('Input transport lost')),
+    unchangedFrame: () => failure.resolve({ status: 204, body: null }),
+  };
+}
+
+describe.each(['browser', 'computer'] as const)('%s static-frame recovery', (kind) => {
+  it('fetches the current frame when an already-pending poll returns 204 after control transport loss', async () => {
+    vi.useFakeTimers();
+    const h = staticFrameHost();
+    const viewer = createRemoteHostViewer(h.client, kind, 'ada');
+    const stop = viewer.subscribe(() => {});
+    try {
+      await vi.waitFor(() => expect(h.framePaths).toHaveLength(2));
+      await viewer.setControl(true);
+      const click = viewer.send({ kind: 'click', x: 1, y: 1 });
+      const text = viewer.send({ kind: 'type', text: 'old-input' });
+      await vi.waitFor(() => expect(h.inputs).toHaveLength(1));
+      h.failInput();
+      await Promise.all([click, text]);
+      expect(viewer.getSnapshot()).toMatchObject({
+        status: 'unreachable',
+        control: false,
+        notice: 'Input transport lost',
+      });
+      await vi.advanceTimersByTimeAsync(10_000);
+      h.unchangedFrame();
+      await vi.waitFor(() => expect(viewer.getSnapshot().status).toBe('live'));
+      expect(viewer.getSnapshot()).toMatchObject({ control: false, frame: { seq: 7 } });
+      expect(h.framePaths.filter((path) => !path.includes('after='))).toHaveLength(2);
+      expect(h.inputs).toHaveLength(1);
+    } finally {
+      h.finishInput();
+      stop();
+    }
+  });
+
+  it.each(['network', '502', 'malformed'] as const)(
+    'resets the shared cursor after %s without requiring a changed frame',
+    async (failure) => {
+      vi.useFakeTimers();
+      const h = staticFrameHost();
+      const viewer =
+        kind === 'browser'
+          ? createBrowserViewer({ client: h.client, slug: 'ada' })
+          : createComputerViewer({ client: h.client });
+      viewer.start();
+      try {
+        await vi.waitFor(() => expect(h.framePaths).toHaveLength(2));
+        expect(viewer.getState().frame?.seq).toBe(7);
+        h.fail(failure);
+        await vi.waitFor(() => expect(viewer.getState().status).toBe('unreachable'));
+        await vi.advanceTimersByTimeAsync(32_000);
+        expect(viewer.getState()).toMatchObject({ status: 'live', frame: { seq: 7 } });
+        expect(viewer.getState().frame?.uri).toContain('unchanged');
+        expect(h.framePaths.filter((path) => !path.includes('after='))).toHaveLength(2);
+        expect(h.framePaths.slice(3).every((path) => path.includes('after=7'))).toBe(true);
+      } finally {
+        viewer.stop();
+      }
+    },
+  );
+
+  it.each(['network', '502', 'malformed'] as const)(
+    'keeps Web read-only across %s and repeated unchanged-frame 204 responses',
+    async (failure) => {
+      vi.useFakeTimers();
+      const h = staticFrameHost();
+      const viewer = createRemoteHostViewer(h.client, kind, 'ada');
+      const stop = viewer.subscribe(() => {});
+      try {
+        await vi.waitFor(() => expect(h.framePaths).toHaveLength(2));
+        await viewer.setControl(true);
+        const click = viewer.send({ kind: 'click', x: 1, y: 1 });
+        const text = viewer.send({ kind: 'type', text: 'old-input' });
+        await vi.waitFor(() => expect(h.inputs).toHaveLength(1));
+        h.fail(failure);
+        await vi.waitFor(() => expect(viewer.getSnapshot().status).toBe('unreachable'));
+        expect(viewer.getSnapshot().frame).toBeUndefined();
+        expect(viewer.getSnapshot().control).toBe(false);
+        await vi.advanceTimersByTimeAsync(32_000);
+        expect(h.client.getSnapshot().connection.status).toBe('connected');
+        expect(viewer.getSnapshot()).toMatchObject({
+          status: 'live',
+          control: false,
+          frame: { seq: 7 },
+        });
+        await viewer.send({ kind: 'type', text: 'no-takeover' });
+        await viewer.setControl(true);
+        h.finishInput();
+        await Promise.all([click, text]);
+        expect(h.inputs).toHaveLength(1);
+        await viewer.send({ kind: 'type', text: 'new-input' });
+        expect(h.inputs).toHaveLength(2);
+      } finally {
+        h.finishInput();
+        stop();
+      }
+    },
+  );
+});
diff --git a/packages/client/test/remote-host-viewer-removal.test.ts b/packages/client/test/remote-host-viewer-removal.test.ts
new file mode 100644
index 0000000000..89b2693b38
--- /dev/null
+++ b/packages/client/test/remote-host-viewer-removal.test.ts
@@ -0,0 +1,183 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { HostCarrier } from '../../../apps/mobile/src/host/carrier.js';
+import { FakeHost } from '../../../apps/mobile/test/fake-host.js';
+import { createRemoteHostViewer } from '../src/client/remote-host-viewer.js';
+import { createRemoteHosts, REMOTE_HOSTS_STORAGE_KEY } from '../src/client/remote-hosts.js';
+
+afterEach(() => vi.useRealTimers());
+
+function deferred() {
+  let resolve!: () => void;
+  const promise = new Promise<void>((accept) => {
+    resolve = accept;
+  });
+  return { promise, resolve };
+}
+
+function pairedViewerHost(kind: 'browser' | 'computer') {
+  const host = new FakeHost();
+  const events: string[] = [];
+  const taking = deferred();
+  const releasing = deferred();
+  let delayRelease = false;
+  let paused = false;
+  let firstFrame = true;
+  const answer = (status: number, body: unknown) => ({
+    status,
+    text: async () => JSON.stringify(body),
+  });
+  const carrier: HostCarrier = {
+    openSocket: host.carrier.openSocket,
+    async request(url, init) {
+      const path = new URL(url).pathname;
+      if (path.endsWith('/unpair')) {
+        events.push('unpair');
+        host.revoked = true;
+        return answer(200, { revoked: true });
+      }
+      if (!path.includes(`/api/${kind}/`)) return host.carrier.request(url, init);
+      if (host.revoked) return answer(401, { code: 'device-revoked' });
+      if (path.endsWith('/takeover')) {
+        const body = JSON.parse(String(init.body)) as { active: boolean };
+        paused = body.active;
+        events.push(`takeover:${body.active}`);
+        if (body.active) await taking.promise;
+        else if (delayRelease) await releasing.promise;
+        return answer(200, { takeover: body.active, paused: body.active });
+      }
+      if (path.endsWith('/input')) {
+        events.push('input');
+        return answer(200, {});
+      }
+      if (path.endsWith('/observation')) return answer(200, { takeover: paused });
+      if (firstFrame) {
+        firstFrame = false;
+        return answer(200, { data: 'frame', seq: 1, width: 100, height: 100, mode: 'stream' });
+      }
+      return new Promise((_resolve, reject) => {
+        const abort = () => reject(new DOMException('aborted', 'AbortError'));
+        if (init.signal?.aborted) abort();
+        else init.signal?.addEventListener('abort', abort, { once: true });
+      });
+    },
+  };
+  const values = new Map([
+    [
+      REMOTE_HOSTS_STORAGE_KEY,
+      JSON.stringify([
+        {
+          hostId: host.hostId,
+          hostName: 'Studio',
+          routes: ['http://127.0.0.1:47712'],
+          deviceId: 'device-1',
+          credential: host.credential,
+        },
+      ]),
+    ],
+  ]);
+  const sources = createRemoteHosts({
+    carrier,
+    storage: {
+      getItem: (key) => values.get(key) ?? null,
+      setItem: (key, value) => void values.set(key, value),
+      removeItem: (key) => void values.delete(key),
+    },
+  });
+  const stopSources = sources.subscribe(() => {});
+  const client = sources.viewerClient(host.hostId);
+  if (client === undefined) throw new Error('Missing paired Host');
+  const viewer = createRemoteHostViewer(client, kind, 'ada');
+  const stopViewer = viewer.subscribe(() => {});
+  return {
+    host,
+    client,
+    sources,
+    viewer,
+    events,
+    values,
+    paused: () => paused,
+    finishTakeover: () => taking.resolve(),
+    delayRelease() {
+      delayRelease = true;
+    },
+    finishRelease: () => releasing.resolve(),
+    stop() {
+      taking.resolve();
+      releasing.resolve();
+      stopViewer();
+      stopSources();
+    },
+  };
+}
+
+describe.each(['browser', 'computer'] as const)('remove a Host during %s takeover', (kind) => {
+  it('stops input and releases the delayed takeover before revoking its credential', async () => {
+    const h = pairedViewerHost(kind);
+    try {
+      await vi.waitFor(() => expect(h.viewer.getSnapshot().status).toBe('live'));
+      const taking = h.viewer.setControl(true);
+      await vi.waitFor(() => expect(h.paused()).toBe(true));
+      const removing = h.sources.remove(h.host.hostId);
+      await h.viewer.send({ kind: 'type', text: 'after-remove' });
+      expect(h.events).toEqual(['takeover:true']);
+      expect(h.sources.getSnapshot().hosts).toHaveLength(0);
+      expect(h.values.has(REMOTE_HOSTS_STORAGE_KEY)).toBe(false);
+      const stale = createRemoteHostViewer(h.client, kind, 'ada');
+      const stopStale = stale.subscribe(() => {});
+      await stale.setControl(true);
+      await stale.send({ kind: 'type', text: 'stale-client' });
+      stopStale();
+      h.finishTakeover();
+      await Promise.all([taking, removing]);
+      expect(h.events).toEqual(['takeover:true', 'takeover:false', 'unpair']);
+      expect(h.paused()).toBe(false);
+      expect(h.host.revoked).toBe(true);
+      expect(h.viewer.getSnapshot().control).toBe(false);
+    } finally {
+      h.stop();
+    }
+  });
+
+  it('also waits for the release response before unpairing', async () => {
+    const h = pairedViewerHost(kind);
+    try {
+      await vi.waitFor(() => expect(h.viewer.getSnapshot().status).toBe('live'));
+      h.finishTakeover();
+      await h.viewer.setControl(true);
+      h.delayRelease();
+      const removing = h.sources.remove(h.host.hostId);
+      await vi.waitFor(() => expect(h.events).toEqual(['takeover:true', 'takeover:false']));
+      expect(h.host.revoked).toBe(false);
+      h.finishRelease();
+      await removing;
+      expect(h.events).toEqual(['takeover:true', 'takeover:false', 'unpair']);
+    } finally {
+      h.stop();
+    }
+  });
+
+  it('bounds waiting for an unresponsive takeover and keeps the removed client closed', async () => {
+    const h = pairedViewerHost(kind);
+    try {
+      await vi.waitFor(() => expect(h.viewer.getSnapshot().status).toBe('live'));
+      const taking = h.viewer.setControl(true);
+      await vi.waitFor(() => expect(h.paused()).toBe(true));
+      vi.useFakeTimers();
+      const removing = h.sources.remove(h.host.hostId);
+      await vi.advanceTimersByTimeAsync(4999);
+      expect(h.host.revoked).toBe(false);
+      await vi.advanceTimersByTimeAsync(1);
+      await removing;
+      expect(h.host.revoked).toBe(true);
+      expect(h.sources.getSnapshot().hosts).toHaveLength(0);
+      h.finishTakeover();
+      await taking;
+      await h.viewer.setControl(true);
+      await h.viewer.send({ kind: 'type', text: 'after-timeout' });
+      expect(h.events).toEqual(['takeover:true', 'unpair']);
+      expect(h.viewer.getSnapshot().control).toBe(false);
+    } finally {
+      h.stop();
+    }
+  });
+});
diff --git a/packages/client/test/remote-host-viewer.test.ts b/packages/client/test/remote-host-viewer.test.ts
new file mode 100644
index 0000000000..095283b2ec
--- /dev/null
+++ b/packages/client/test/remote-host-viewer.test.ts
@@ -0,0 +1,311 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type {
+  HostApiAnswer,
+  HostApiInit,
+  HostClient,
+  HostSnapshot,
+} from '../../../apps/mobile/src/host/client.js';
+import { createRemoteHostViewer } from '../src/client/remote-host-viewer.js';
+
+afterEach(() => vi.useRealTimers());
+
+function fakeHost(label: string) {
+  let snapshot: HostSnapshot = { connection: { status: 'connected', route: label } };
+  const listeners = new Set<() => void>();
+  const calls: { path: string; init?: HostApiInit }[] = [];
+  let first = true;
+  let takeover: ((answer: HostApiAnswer) => void) | undefined;
+  let delayTakeover = false;
+  let delayInput = false;
+  let input: ((answer?: HostApiAnswer) => void) | undefined;
+  let failFrame: (() => void) | undefined;
+  const api = vi.fn(async (path: string, init?: HostApiInit): Promise<HostApiAnswer> => {
+    calls.push({ path, ...(init === undefined ? {} : { init }) });
+    if (path.endsWith('/input') && delayInput) {
+      delayInput = false;
+      return new Promise((resolve) => {
+        input = (answer = { status: 200, body: {} }) => resolve(answer);
+      });
+    }
+    if (path.includes('/takeover')) {
+      if (delayTakeover && init?.body?.['active'] === true)
+        return new Promise((resolve) => {
+          takeover = resolve;
+        });
+      return {
+        status: 200,
+        body: { takeover: init?.body?.['active'], paused: init?.body?.['active'] },
+      };
+    }
+    if (path.includes('/observation')) return { status: 200, body: { takeover: false } };
+    if (path.includes('/frame')) {
+      if (first) {
+        first = false;
+        return {
+          status: 200,
+          body: {
+            seq: 1,
+            data: label,
+            width: 100,
+            height: 100,
+            viewport: { width: 100, height: 100 },
+            mode: 'stream',
+          },
+        };
+      }
+      return new Promise((_resolve, reject) => {
+        const fail = () => reject(new DOMException('aborted', 'AbortError'));
+        failFrame = () => reject(new TypeError('Frame connection lost'));
+        if (init?.signal?.aborted) fail();
+        else init?.signal?.addEventListener('abort', fail, { once: true });
+      });
+    }
+    return { status: 200, body: {} };
+  });
+  const client: Pick<HostClient, 'api' | 'subscribe' | 'getSnapshot'> = {
+    api,
+    getSnapshot: () => snapshot,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+  return {
+    client,
+    calls,
+    failFrame() {
+      failFrame?.();
+    },
+    recoverFrame() {
+      first = true;
+    },
+    pauseInput() {
+      delayInput = true;
+    },
+    finishInput(answer?: HostApiAnswer) {
+      input?.(answer);
+    },
+    delay() {
+      delayTakeover = true;
+    },
+    finish() {
+      takeover?.({ status: 200, body: { takeover: true, paused: true } });
+    },
+    connection(status: 'connected' | 'stopped' | 'refused') {
+      first = true;
+      snapshot = {
+        connection:
+          status === 'refused'
+            ? { status, route: label, code: 'device-revoked', reason: 'revoked' }
+            : { status, route: label },
+      };
+      for (const listener of listeners) listener();
+    },
+  };
+}
+
+describe.each(['browser', 'computer'] as const)('remote %s viewer ownership', (kind) => {
+  it('does not implicitly retake control or send queued input after the Host rejects control', async () => {
+    const h = fakeHost('host-b');
+    const viewer = createRemoteHostViewer(h.client, kind, 'ada');
+    const stop = viewer.subscribe(() => {});
+    try {
+      await vi.waitFor(() => expect(viewer.getSnapshot().status).toBe('live'));
+      await viewer.setControl(true);
+      h.pauseInput();
+      const click = viewer.send({ kind: 'click', x: 10, y: 10 });
+      const text = viewer.send({ kind: 'type', text: 'after-control-lost' });
+      await vi.waitFor(() =>
+        expect(h.calls.filter((call) => call.path.endsWith('/input'))).toHaveLength(1),
+      );
+      h.finishInput({ status: 409, body: { code: 'not-paused', error: 'Pause the Bot first.' } });
+      await Promise.all([click, text]);
+      expect(viewer.getSnapshot().control).toBe(false);
+      expect(h.calls.filter((call) => call.path.endsWith('/input'))).toHaveLength(1);
+      expect(h.calls.filter((call) => call.init?.body?.['active'] === true)).toHaveLength(1);
+    } finally {
+      stop();
+    }
+  });
+
+  it('does not send queued input from a released control generation after another takeover', async () => {
+    const h = fakeHost('host-b');
+    const viewer = createRemoteHostViewer(h.client, kind, 'ada');
+    const stop = viewer.subscribe(() => {});
+    try {
+      await vi.waitFor(() => expect(viewer.getSnapshot().status).toBe('live'));
+      await viewer.setControl(true);
+      h.pauseInput();
+      const click = viewer.send({ kind: 'click', x: 10, y: 10 });
+      const text = viewer.send({ kind: 'type', text: 'old-control' });
+      await vi.waitFor(() =>
+        expect(h.calls.filter((call) => call.path.endsWith('/input'))).toHaveLength(1),
+      );
+      await viewer.setControl(false);
+      await viewer.setControl(true);
+      h.finishInput();
+      await Promise.all([click, text]);
+      expect(h.calls.filter((call) => call.path.endsWith('/input'))).toHaveLength(1);
+      await viewer.send({ kind: 'type', text: 'new-control' });
+      expect(
+        h.calls.filter((call) => call.path.endsWith('/input')).at(-1)?.init?.body,
+      ).toMatchObject({
+        text: 'new-control',
+      });
+    } finally {
+      stop();
+    }
+  });
+
+  it('recovers frame-only connection loss read-only and invalidates queued input', async () => {
+    const h = fakeHost('host-b');
+    const viewer = createRemoteHostViewer(h.client, kind, 'ada');
+    const stop = viewer.subscribe(() => {});
+    try {
+      await vi.waitFor(() => expect(viewer.getSnapshot().status).toBe('live'));
+      await viewer.setControl(true);
+      h.pauseInput();
+      const click = viewer.send({ kind: 'click', x: 10, y: 10 });
+      const text = viewer.send({ kind: 'type', text: 'before-frame-loss' });
+      await vi.waitFor(() =>
+        expect(h.calls.filter((call) => call.path.endsWith('/input'))).toHaveLength(1),
+      );
+      vi.useFakeTimers();
+      h.failFrame();
+      await vi.waitFor(() => expect(viewer.getSnapshot().status).toBe('unreachable'));
+      expect(viewer.getSnapshot().control).toBe(false);
+      expect(viewer.getSnapshot().frame).toBeUndefined();
+      expect(h.client.getSnapshot().connection.status).toBe('connected');
+      h.recoverFrame();
+      await vi.advanceTimersByTimeAsync(2000);
+      await vi.waitFor(() => expect(viewer.getSnapshot().status).toBe('live'));
+      expect(viewer.getSnapshot().control).toBe(false);
+      await viewer.send({ kind: 'type', text: 'without-new-takeover' });
+      await viewer.setControl(true);
+      h.finishInput();
+      await Promise.all([click, text]);
+      expect(h.calls.filter((call) => call.path.endsWith('/input'))).toHaveLength(1);
+      await viewer.send({ kind: 'type', text: 'after-new-takeover' });
+      expect(h.calls.filter((call) => call.path.endsWith('/input'))).toHaveLength(2);
+    } finally {
+      h.finishInput();
+      stop();
+    }
+  });
+
+  it('orders input and discards queued actions when its source closes', async () => {
+    const h = fakeHost('host-b');
+    const viewer = createRemoteHostViewer(h.client, kind, 'ada');
+    const stop = viewer.subscribe(() => {});
+    await vi.waitFor(() => expect(viewer.getSnapshot().status).toBe('live'));
+    await viewer.setControl(true);
+    h.pauseInput();
+    const first = viewer.send({ kind: 'click', x: 10, y: 10 });
+    const second = viewer.send({ kind: 'type', text: 'after-focus' });
+    await vi.waitFor(() =>
+      expect(h.calls.filter((call) => call.path.endsWith('/input'))).toHaveLength(1),
+    );
+    h.finishInput();
+    await Promise.all([first, second]);
+    expect(h.calls.filter((call) => call.path.endsWith('/input'))).toHaveLength(2);
+    h.pauseInput();
+    const third = viewer.send({ kind: 'click', x: 20, y: 20 });
+    const fourth = viewer.send({ kind: 'type', text: 'discarded' });
+    await vi.waitFor(() =>
+      expect(h.calls.filter((call) => call.path.endsWith('/input'))).toHaveLength(3),
+    );
+    stop();
+    h.finishInput();
+    await Promise.all([third, fourth]);
+    expect(h.calls.filter((call) => call.path.endsWith('/input'))).toHaveLength(3);
+  });
+
+  it('keeps equal Bot slugs on two Hosts separate and sends only after takeover', async () => {
+    const a = fakeHost('host-a');
+    const b = fakeHost('host-b');
+    const va = createRemoteHostViewer(a.client, kind, 'ada');
+    const vb = createRemoteHostViewer(b.client, kind, 'ada');
+    const stopA = va.subscribe(() => {});
+    const stopB = vb.subscribe(() => {});
+    await vi.waitFor(() => expect(va.getSnapshot().status).toBe('live'));
+    await vi.waitFor(() => expect(vb.getSnapshot().status).toBe('live'));
+    expect(va.getSnapshot().frame?.uri).toContain('host-a');
+    expect(vb.getSnapshot().frame?.uri).toContain('host-b');
+    await vb.send({ kind: 'type', text: 'blocked' });
+    expect(b.calls.some((call) => call.path.endsWith('/input'))).toBe(false);
+    await vb.setControl(true);
+    await vb.send({ kind: 'type', text: 'only-b' });
+    expect(a.calls.some((call) => call.path.endsWith('/input'))).toBe(false);
+    expect(b.calls.find((call) => call.path.endsWith('/input'))?.init?.body).toMatchObject({
+      text: 'only-b',
+    });
+    stopA();
+    stopB();
+    expect(vb.getSnapshot().frame).toBeUndefined();
+    await vi.waitFor(() =>
+      expect(b.calls.filter((call) => call.init?.body?.['active'] === false)).toHaveLength(1),
+    );
+    expect(
+      b.calls.find((call) => call.path.includes('/frame?after=') || call.path.includes('&after='))
+        ?.init?.signal?.aborted,
+    ).toBe(true);
+  });
+
+  it('releases a late takeover on its original Host and rejects late input after close', async () => {
+    const h = fakeHost('host-b');
+    const viewer = createRemoteHostViewer(h.client, kind, 'ada');
+    const stop = viewer.subscribe(() => {});
+    await vi.waitFor(() => expect(viewer.getSnapshot().status).toBe('live'));
+    h.delay();
+    const taking = viewer.setControl(true);
+    stop();
+    await viewer.send({ kind: 'click', x: 10, y: 10 });
+    expect(h.calls.filter((call) => call.path.endsWith('/input'))).toHaveLength(0);
+    h.finish();
+    await taking;
+    await vi.waitFor(() =>
+      expect(h.calls.filter((call) => call.init?.body?.['active'] === false)).toHaveLength(1),
+    );
+  });
+
+  it('clears the frame on revocation and reconnects without replaying input or takeover', async () => {
+    const h = fakeHost('host-b');
+    const viewer = createRemoteHostViewer(h.client, kind, 'ada');
+    const stop = viewer.subscribe(() => {});
+    await vi.waitFor(() => expect(viewer.getSnapshot().status).toBe('live'));
+    await viewer.setControl(true);
+    h.connection('stopped');
+    expect(viewer.getSnapshot()).toMatchObject({ status: 'unreachable', control: false });
+    expect(viewer.getSnapshot().frame).toBeUndefined();
+    await viewer.send({ kind: 'type', text: 'never-replay' });
+    h.connection('connected');
+    await vi.waitFor(() => expect(viewer.getSnapshot().status).toBe('live'));
+    expect(viewer.getSnapshot().control).toBe(false);
+    expect(h.calls.filter((call) => call.init?.body?.['active'] === true)).toHaveLength(1);
+    expect(h.calls.filter((call) => call.path.endsWith('/input'))).toHaveLength(0);
+    h.connection('refused');
+    expect(viewer.getSnapshot().status).toBe('refused');
+    expect(viewer.getSnapshot().frame).toBeUndefined();
+    stop();
+  });
+
+  it('waits for a closing viewer before a replacement reads the same runtime', async () => {
+    const h = fakeHost('host-b');
+    const old = createRemoteHostViewer(h.client, kind, 'ada');
+    const stop = old.subscribe(() => {});
+    await vi.waitFor(() => expect(old.getSnapshot().status).toBe('live'));
+    h.delay();
+    const taking = old.setControl(true);
+    const replacement = createRemoteHostViewer(h.client, kind, 'ada');
+    stop();
+    const before = h.calls.length;
+    const stopReplacement = replacement.subscribe(() => {});
+    await Promise.resolve();
+    expect(h.calls).toHaveLength(before);
+    h.finish();
+    await taking;
+    await vi.waitFor(() => expect(h.calls.length).toBeGreaterThan(before));
+    expect(h.calls[before]?.init?.body?.['active']).toBe(false);
+    stopReplacement();
+  });
+});
diff --git a/packages/client/test/remote-viewer-auth.test.ts b/packages/client/test/remote-viewer-auth.test.ts
new file mode 100644
index 0000000000..5a29701c74
--- /dev/null
+++ b/packages/client/test/remote-viewer-auth.test.ts
@@ -0,0 +1,73 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { browserCarrier } from '../src/client/remote-hosts.js';
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe('Remote Host viewer carrier authentication', () => {
+  it('uses device headers without cookies for frame and input requests', async () => {
+    const fetch = vi.fn(async (_url: string, _init: RequestInit) => ({
+      status: 200,
+      text: async () => '{}',
+    }));
+    vi.stubGlobal('fetch', fetch);
+    const carrier = browserCarrier();
+    const signal = new AbortController().signal;
+    for (const kind of ['browser', 'computer']) {
+      const prefix = `http://127.0.0.1:47712/botharness-device/api/${kind}`;
+      await carrier.request(`${prefix}/frame`, {
+        method: 'GET',
+        headers: { Authorization: 'Device test.secret' },
+        signal,
+      });
+      await carrier.request(`${prefix}/input`, {
+        method: 'POST',
+        headers: { Authorization: 'Device test.secret' },
+        body: '{"kind":"key","key":"return"}',
+        signal,
+      });
+    }
+    for (const [, init] of fetch.mock.calls) {
+      expect(init).toMatchObject({
+        credentials: 'omit',
+        mode: 'cors',
+        headers: { Authorization: 'Device test.secret' },
+        signal,
+      });
+    }
+  });
+
+  it('opens the Host Feed socket with a one-time ticket, never the device secret', async () => {
+    const fetch = vi.fn(async () => ({ json: async () => ({ ticket: 'one-time' }) }));
+    const urls: string[] = [];
+    class Socket {
+      constructor(url: string) {
+        urls.push(url);
+      }
+      send() {}
+      close() {}
+    }
+    vi.stubGlobal('fetch', fetch);
+    vi.stubGlobal('WebSocket', Socket);
+    const socket = browserCarrier().openSocket(
+      'ws://127.0.0.1:47712/botharness-device/api/remote.mux',
+      {
+        open() {},
+        message() {},
+        closed() {},
+      },
+      { Authorization: 'Device test.secret' },
+    );
+    await vi.waitFor(() => expect(urls).toHaveLength(1));
+    expect(fetch).toHaveBeenCalledWith(
+      'http://127.0.0.1:47712/botharness-device/stream-ticket',
+      expect.objectContaining({
+        method: 'POST',
+        credentials: 'omit',
+        mode: 'cors',
+        headers: { Authorization: 'Device test.secret' },
+      }),
+    );
+    expect(urls[0]).toBe('ws://127.0.0.1:47712/botharness-device/api/remote.mux?ticket=one-time');
+    socket.close();
+  });
+});