dsh-zen-remote 1.1.16 → 2.0.0

package/src/client/MobileSessionInfo.tsx

@@ -1,16 +1,18 @@
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useId, useRef, useState, useSyncExternalStore } from 'react'
 import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
 import {
-  IconArchiveOutline20,
-  IconBranchOutline16,
-  IconCloseOutline16,
-  IconDownloadOutline16,
-  IconEditOutline16,
-  IconShareOutline16,
+  IconArchiveOutlineRegular,
+  IconBranchOutlineRegular,
+  IconCloseOutlineRegular,
+  IconDownloadOutlineRegular,
+  IconEditOutlineRegular,
+  IconShareOutlineRegular,
 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { shareCardRemoteView, shareFailText, subscribeWhileOpen } from '../client-data/shares.ts'
+import type { SharesStore } from '../client-data/shares.ts'
 import { workspaceTitleOf } from './compat/store.ts'
 import { agentPresetOf } from './compat/types.ts'
-import type { RenameResult, SessionId } from './compat/types.ts'
+import type { RenameResult, SessionId, UseJobs } from './compat/types.ts'
 import { NS } from './locales.ts'
 import { GO_HOME_EVENT, SESSION_INFO_EVENT } from './nav-store.ts'
 import { hasLayer, popLayer, pushLayer } from './history-nav.ts'
@@ -50,7 +52,7 @@ export type MobileSessionInfoProps =
   & {
     /** Bound ctx.sessions.fork({sessionId}). */
     forkSession: (sessionId: SessionId) => Promise<SessionId>
-    /** Bound ctx.sessions.open(id) — lands on the freshly forked session. */
+    /** Bound ctx.uiWorkspace.openSession(id) — lands on the freshly forked session. */
     openSession: (id: SessionId) => void
     /** Bound ctx.sessions.binding(id)?.session.rename(title); undefined when the binding is gone. */
     renameSession: (sessionId: SessionId, title: string) => RenameResult | undefined
@@ -58,6 +60,22 @@ export type MobileSessionInfoProps =
     archiveSession: (sessionId: SessionId) => Promise<void>
     /** Bound ctx.sessionLogDownload.download(sessionId) — owns its own progress/result modal. */
     downloadSessionLog: (sessionId: SessionId) => Promise<void>
+    /**
+     * Job-roster hook, always present (fixed empty source when the `jobs`
+     * service is absent — see index.tsx activityInject — so the hook is
+     * called on every render and the hook count never varies).
+     */
+    useJobs: UseJobs
+    /** Keeps the session's job roster stream open while the sheet's session is mounted. */
+    watchRows: (sessionId: SessionId) => () => void
+    /**
+     * The page-wide shares store (T67) — the SAME singleton the title-row
+     * icon and the menu item read, so this row adds no second poll loop.
+     * Subscribed ONLY while the sheet is open (the phone shell must not
+     * keep a 30 s admin/shares GET alive behind the gateway — the same
+     * rule that keeps the icon unsubscribed there).
+     */
+    shares: SharesStore
   }
 
 /* ---- StatsLine-identical formatting -------------------------------------
@@ -132,6 +150,9 @@ export function MobileSessionInfo({
   renameSession,
   archiveSession,
   downloadSessionLog,
+  useJobs,
+  watchRows,
+  shares,
   t,
 }: MobileSessionInfoProps) {
   const [open, setOpen] = useState(false)
@@ -145,6 +166,31 @@ export function MobileSessionInfo({
   const [shareOpen, setShareOpen] = useState(false)
   const [shareData, setShareData] = useState<ShareExportData | null>(null)
   const shareCardHostRef = useRef<HTMLDivElement>(null)
+  // T67: the remote-access row's own busy flag — distinct from the sheet's
+  // global one, so a slow share/unshare POST greys only this switch.
+  const [remoteBusy, setRemoteBusy] = useState(false)
+  // T68: the description line's id, so the switch can name it for screen
+  // readers (aria-describedby) — the line is the state explanation the
+  // switch itself carries no visible text for.
+  const remoteDescId = useId()
+
+  // T67: the shares table is subscribed ONLY while the sheet is open — a
+  // subscription is what keeps the store's 30 s admin/shares poll running,
+  // and the phone shell must not keep that alive behind the gateway (the
+  // same rule that leaves the title-row icon unsubscribed here). Opening
+  // also pulls once right away: the row must show the CURRENT table, not
+  // wait out the cadence.
+  const shareSnap = useSyncExternalStore(
+    useCallback(
+      (onStoreChange: () => void) => subscribeWhileOpen(shares, open, onStoreChange),
+      [shares, open],
+    ),
+    () => shares.getSnapshot(),
+  )
+  useEffect(() => {
+    if (!open) return
+    void shares.refresh()
+  }, [open, shares])
 
   useEffect(() => {
     const onOpen = (): void => {
@@ -161,8 +207,15 @@ export function MobileSessionInfo({
 
   const tabs = useViewTabs()
   const row = useSessions((s) => s.byId[sessionId])
-  const subagentCount = useSessions((s) => s.subagentsByParent[sessionId]?.entries.length ?? 0)
-  const jobCount = useSessions((s) => s.jobsBySession[sessionId]?.length ?? 0)
+  /* 0.1.7 sources — 0.1.5's per-parent subagent / per-session job snapshots
+     are deleted. The catalog is read straight off the explicit-read
+     projection store, no refresh from here (the official lineage reads the
+     same way; a refresh call would register this session for a re-read on
+     every reconnect); job rows come from the renderer-bound
+     useJobs hook, with a fixed empty source when the service is absent. */
+  useEffect(() => watchRows(sessionId), [sessionId, watchRows])
+  const subagentCount = useSessions((s) => s.projectionsBySession[sessionId]?.values.subagentCatalog?.length ?? 0)
+  const jobCount = useJobs((s) => s.rows[sessionId]?.length ?? 0)
   const stats = useProjection('sessionStats')
   const usage = useProjection('tokenUsage')
 
@@ -369,6 +422,31 @@ export function MobileSessionInfo({
     image: t('shareCardImage'),
   }
 
+  // T67: the row's derived view (visibility gate + description line), and
+  // the toggle — share / unshare with the row's own busy window, failures
+  // landing on the sheet's existing error row via the shared shareFailText
+  // copy. No confirm: the sheet's other destructive action (archive) has a
+  // window.confirm, but remote access is reversible with one more tap and
+  // the switch itself states the outcome.
+  const remoteRow = shareCardRemoteView({
+    ready: shareSnap.ready,
+    role: shareSnap.role,
+    subagent: row?.origin === 'subagent',
+    entry: shareSnap.entries.find((candidate) => candidate.sessionId === sessionId),
+    now: Date.now(),
+    t,
+  })
+  const onToggleRemote = (): void => {
+    if (remoteBusy) return
+    setRemoteBusy(true)
+    setError(null)
+    const action = remoteRow.shared ? shares.unshare(sessionId) : shares.share(sessionId)
+    void action.then((outcome) => {
+      setRemoteBusy(false)
+      if (!outcome.ok) setError(shareFailText(outcome, remoteRow.shared ? 'unshare' : 'share', t))
+    })
+  }
+
   const cells: Array<{ label: string; value: string; sub: string | undefined }> = [
     { label: t('infoStatTurns'), value: stats === undefined ? NA : String(stats.turns), sub: undefined },
     { label: t('infoStatSteps'), value: stats === undefined ? NA : String(stats.steps), sub: undefined },
@@ -444,7 +522,7 @@ export function MobileSessionInfo({
             </div>
           )}
           <button type="button" data-mobile-nav="info-close" aria-label={t('infoClose')} onClick={close}>
-            <IconCloseOutline16 size={16} />
+            <IconCloseOutlineRegular size={16} />
           </button>
         </div>
 
@@ -471,6 +549,29 @@ export function MobileSessionInfo({
           ))}
         </div>
 
+        {/* T67: the remote-access row — the same visibility gate as the
+            title-row icon and the menu item (host role, answered table,
+            never a subagent session), decided in shareCardRemoteView. */}
+        {remoteRow.visible && (
+          <div data-mobile-nav="info-remote">
+            <div data-mobile-nav="info-remote-text">
+              <span data-mobile-nav="info-remote-label">{t('infoRemoteAccess')}</span>
+              <span data-mobile-nav="info-remote-desc" id={remoteDescId}>{remoteRow.line}</span>
+            </div>
+            <button
+              type="button"
+              role="switch"
+              aria-checked={remoteRow.shared}
+              aria-label={t('infoRemoteAccess')}
+              aria-describedby={remoteDescId}
+              data-mobile-nav="info-remote-switch"
+              data-on={remoteRow.shared ? '' : undefined}
+              disabled={remoteBusy}
+              onClick={onToggleRemote}
+            />
+          </div>
+        )}
+
         {error !== null && <div data-mobile-nav="info-error">{t('infoActionError', { message: error })}</div>}
         {/* Degraded-outcome notice (review 07+08): same container metrics as
             the error row, but informational colors and no prefix template —
@@ -497,15 +598,15 @@ export function MobileSessionInfo({
 
         <div data-mobile-nav="info-actions">
           <button type="button" data-mobile-nav="info-action" disabled={busy} onClick={onExport}>
-            <IconDownloadOutline16 size={16} />
+            <IconDownloadOutlineRegular size={16} />
             <span>{t('infoExport')}</span>
           </button>
           <button type="button" data-mobile-nav="info-action" disabled={busy} onClick={onRename}>
-            <IconEditOutline16 size={16} />
+            <IconEditOutlineRegular size={16} />
             <span>{t('infoRename')}</span>
           </button>
           <button type="button" data-mobile-nav="info-action" disabled={busy} onClick={onFork}>
-            <IconBranchOutline16 size={16} />
+            <IconBranchOutlineRegular size={16} />
             <span>{t('infoFork')}</span>
           </button>
           <button
@@ -515,7 +616,7 @@ export function MobileSessionInfo({
             disabled={busy}
             onClick={onArchive}
           >
-            <IconArchiveOutline20 size={20} />
+            <IconArchiveOutlineRegular size={20} />
             <span>{t('infoArchive')}</span>
           </button>
           <button
@@ -524,7 +625,7 @@ export function MobileSessionInfo({
             disabled={busy || shareEmpty}
             onClick={onShare}
           >
-            <IconShareOutline16 size={16} />
+            <IconShareOutlineRegular size={16} />
             <span>{t('shareAction')}</span>
           </button>
         </div>

package/src/client/RemoteComposerBanner.tsx

@@ -0,0 +1,76 @@
+/**
+ * The composer's remote-status banner for the sub-client (T34) — one
+ * `conversation.input.dock` entry, the official full-width row ABOVE the
+ * input card (the slot anchor is display:contents, so this renders as one
+ * row of the composer column, ahead of the card). When the open session is a
+ * remote one and the server is offline, the token is revoked, the pairing
+ * is gone, or the server closed this session's remote access (T41a-fix2
+ * added the revoked / unpaired lines), the banner names why.
+ *
+ * The INPUT itself is disabled through the host's own component capability
+ * (T34-fix): `ctx.conversation.blocks.set(sessionId, { reason })` — the
+ * composer-block contract (`contract/composer-blocks.d.ts` in
+ * dsh-client-ui-conversation, "the registry face other plugins reach through
+ * `ctx.conversation.blocks`"). A raised block makes InputBar's `blocked`
+ * path disable the editor, the send button and the model controls, and
+ * shows the block's `reason` as the placeholder text; `set(id, undefined)`
+ * clears it. While the banner stands the block is raised with the banner's
+ * own copy, and the cleanup clears it — so a restored link re-enables the
+ * composer without any host DOM touching.
+ *
+ * Renders NOTHING on a local session, before the store's first answered GET,
+ * and whenever neither the offline nor a closed reason applies (then the
+ * block is cleared too). A local session also never SUBSCRIBES
+ * (subscribeIfVirtual): the subscription is what keeps the store polling,
+ * so a page showing only local sessions never sends a remote-status
+ * request.
+ */
+
+import { useCallback, useLayoutEffect, useSyncExternalStore } from 'react'
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import { bannerText, subscribeIfVirtual } from '../client-data/remote-status.ts'
+import type { RemoteStatusStore } from '../client-data/remote-status.ts'
+import { isVirtual } from '../virtual-id.js'
+import { NS } from './locales.ts'
+
+export interface RemoteComposerBannerProps extends PropsRuntime<'conversation.input.dock'>, PropsLocale<typeof NS> {
+  /** The shared remote-status store, bound through the registration's inject
+   * face. */
+  status: RemoteStatusStore
+  /** Raise or clear THIS session's composer block (the host conversation
+   * service's `blocks.set`, bound per session by the registration). `undefined`
+   * clears. A composition whose conversation service is absent (no composer)
+   * gets a no-op binding — the banner still renders, the disable degrades. */
+  setComposerBlock: (reason: string | undefined) => void
+}
+
+export function RemoteComposerBanner({ sessionId, status, t, setComposerBlock }: RemoteComposerBannerProps) {
+  // The subscription is virtual-id gated (subscribeIfVirtual) — hooks stay
+  // above the render gate.
+  const snap = useSyncExternalStore(
+    useCallback(
+      (onStoreChange: () => void) => subscribeIfVirtual(status, sessionId, onStoreChange),
+      [status, sessionId],
+    ),
+    () => status.getSnapshot(),
+  )
+  const virtual = isVirtual(sessionId)
+  const text = virtual && snap.ready ? bannerText(snap.view, sessionId, t) : undefined
+  // Raise the block in the same commit that draws the banner (layout effect:
+  // before paint). The cleanup is what restores the composer — when the
+  // link recovers, the session closes, or the component unmounts, the block
+  // goes with it.
+  useLayoutEffect(() => {
+    if (text === undefined) return
+    setComposerBlock(text)
+    return () => {
+      setComposerBlock(undefined)
+    }
+  }, [text, sessionId, setComposerBlock])
+  if (!virtual || !snap.ready || text === undefined) return null
+  return (
+    <div className="zr-remote-banner" data-zen-remote="remote-banner" role="status">
+      {text}
+    </div>
+  )
+}

package/src/client/RemoteHeaderIcon.tsx

@@ -0,0 +1,103 @@
+/**
+ * Title-row remote-status icon (T33b entry 2) — one
+ * `conversation.session.header.actions` entry drawn entirely off the shared
+ * shares store: grey = not shared, brand colour = shared, brand colour plus
+ * a green dot = a desktop client is currently viewing (`viewers > 0`). The
+ * native `title` carries the hover prompt (idle time left, or the busy
+ * copy); clicking toggles the share behind a `window.confirm` — the desktop
+ * app is the main server, and Electron answers confirm (its missing dialog
+ * method is prompt, not confirm — the settings page's confirms run there).
+ * A refused action (subagent child, contentless session, anything else)
+ * alerts the mapped reason (shareFailText).
+ *
+ * Renders NOTHING while the table has never answered, on a non-host role
+ * (the registration wires the store's role from the same two-level decision
+ * the settings page makes — row document first, client-config probe as the
+ * fallback), and on a subagent session, which the server refuses to share
+ * alone (T33b-fix: same rule as the menu item).
+ *
+ * On the phone shell (a non-desktop-shell viewport at or under 767px) the
+ * mobile stylesheet blanket-hides every `conversation.session.header.actions`
+ * entry that is not the phone header's own (styles/header.css.ts), so this
+ * icon would never be seen — it does not SUBSCRIBE there either
+ * (subscribeIfNotPhoneShell): the subscription is what keeps the shares
+ * store polling, so the phone shell never sends the 30 s admin/shares GET
+ * through the gateway. On a desktop shell the phone CSS never applies
+ * (apply's gate returns before installing it), so the icon stays a live
+ * surface at any window width there.
+ */
+
+import { useCallback, useEffect, useState, useSyncExternalStore } from 'react'
+import { IconGlobeOutlineRegular } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import { describeShare, shareFailText, subscribeIfNotPhoneShell } from '../client-data/shares.ts'
+import type { SharesStore } from '../client-data/shares.ts'
+import { isDesktopShell } from './compat/desktop.ts'
+import { NS } from './locales.ts'
+
+export interface RemoteHeaderIconProps extends PropsRuntime<'conversation.session.header.actions'>, PropsLocale<typeof NS> {
+  /** The shared shares store, bound through the registration's inject face. */
+  shares: SharesStore
+}
+
+/** The same breakpoint the phone stylesheet scopes itself to (styles/header.css.ts). */
+const PHONE_QUERY = '(max-width: 767px)'
+
+/** Live phone-shell flag. The desktop shell never carries the phone CSS, so
+ * its answer is a constant false; a plain browser tracks the breakpoint so
+ * a window dragged across 767px flips the subscription with it. */
+function usePhoneShell(): boolean {
+  const [phone, setPhone] = useState(() => !isDesktopShell() && window.matchMedia(PHONE_QUERY).matches)
+  useEffect(() => {
+    if (isDesktopShell()) return
+    const query = window.matchMedia(PHONE_QUERY)
+    const sync = (): void => { setPhone(query.matches) }
+    sync()
+    query.addEventListener('change', sync)
+    return () => { query.removeEventListener('change', sync) }
+  }, [])
+  return phone
+}
+
+export function RemoteHeaderIcon({ sessionId, shares, useSessions, t }: RemoteHeaderIconProps) {
+  const phoneShell = usePhoneShell()
+  const snap = useSyncExternalStore(
+    useCallback(
+      (onStoreChange: () => void) => subscribeIfNotPhoneShell(shares, phoneShell, onStoreChange),
+      [shares, phoneShell],
+    ),
+    () => shares.getSnapshot(),
+  )
+  const row = useSessions((sessions) => sessions.byId[sessionId])
+  // Hooks stay above the gate: both subscriptions exist on every render
+  // path, the button only on a host with a ready table.
+  if (!snap.ready || snap.role !== 'host' || row?.origin === 'subagent') return null
+  const entry = snap.entries.find((candidate) => candidate.sessionId === sessionId)
+  const description = describeShare(entry, Date.now(), t)
+  const toggle = (): void => {
+    if (entry === undefined) {
+      if (!window.confirm(t('shareRemoteConfirmOn'))) return
+      void shares.share(sessionId).then((outcome) => {
+        if (!outcome.ok) window.alert(shareFailText(outcome, 'share', t))
+      })
+    } else {
+      if (!window.confirm(t('shareRemoteConfirmOff'))) return
+      void shares.unshare(sessionId).then((outcome) => {
+        if (!outcome.ok) window.alert(shareFailText(outcome, 'unshare', t))
+      })
+    }
+  }
+  return (
+    <button
+      type="button"
+      className="zr-remote-toggle"
+      data-zen-remote="remote-toggle"
+      data-state={description.state}
+      title={description.remainingText}
+      aria-label={description.remainingText}
+      onClick={toggle}
+    >
+      <IconGlobeOutlineRegular size={16} />
+    </button>
+  )
+}

package/src/client/RemoteShareMenu.tsx

@@ -0,0 +1,57 @@
+/**
+ * Session "…" menu item for remote sharing (T33b entry 1) — one
+ * `sidebar.workspaces.session.menu.item` row beside the official
+ * pin/rename/fork/archive rows, reading the same shared shares store as the
+ * title-row icon and the settings list: 「开启远程」 when the session is not
+ * in the table, 「关闭远程」 when it is. No confirmation on either — the
+ * menu IS the deliberate action (the confirm lives on the title-row icon).
+ * The row closes the menu itself through the slot's `useMenuOpenState`
+ * hook, exactly like the official entries do. A refused action alerts the
+ * mapped reason (shareFailText).
+ *
+ * Hidden until the FIRST GET has answered (T33b-fix: an unshared session
+ * must not read as 「开启远程」 while the table is still in flight), on a
+ * non-host role (the registration wires the store's role from the same
+ * two-level decision the settings page makes), and on subagent children:
+ * the server refuses to share them alone, and the row can tell from the
+ * standard sessions table (`origin: 'subagent'`). The sidebar filters those
+ * rows anyway — this is defense in depth.
+ */
+
+import { useCallback, useSyncExternalStore } from 'react'
+import { IconLinkOutlineRegular, MenuItemButton } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import { shareFailText } from '../client-data/shares.ts'
+import type { SharesStore } from '../client-data/shares.ts'
+import { NS } from './locales.ts'
+
+export interface RemoteShareMenuProps extends PropsRuntime<'sidebar.workspaces.session.menu.item'>, PropsLocale<typeof NS> {
+  /** The shared shares store, bound through the registration's inject face. */
+  shares: SharesStore
+}
+
+export function RemoteShareMenuItem({ sessionId, shares, useSessions, useMenuOpenState, t }: RemoteShareMenuProps) {
+  const [, setMenuOpen] = useMenuOpenState()
+  const snap = useSyncExternalStore(
+    useCallback((onStoreChange: () => void) => shares.subscribe(onStoreChange), [shares]),
+    () => shares.getSnapshot(),
+  )
+  const row = useSessions((sessions) => sessions.byId[sessionId])
+  if (!snap.ready || snap.role !== 'host' || row?.origin === 'subagent') return null
+  const shared = snap.entries.some((entry) => entry.sessionId === sessionId)
+  return (
+    <MenuItemButton
+      icon={<IconLinkOutlineRegular />}
+      separatorBefore
+      onSelect={() => {
+        setMenuOpen(false)
+        const action = shared ? 'unshare' as const : 'share' as const
+        void (shared ? shares.unshare(sessionId) : shares.share(sessionId)).then((outcome) => {
+          if (!outcome.ok) window.alert(shareFailText(outcome, action, t))
+        })
+      }}
+    >
+      {t(shared ? 'shareRemoteOff' : 'shareRemoteOn')}
+    </MenuItemButton>
+  )
+}

package/src/client/RemoteStatusIcon.tsx

@@ -0,0 +1,91 @@
+/**
+ * Title-row remote CONNECTION icon for the sub-client (T34) — one
+ * `conversation.session.header.actions` entry beside the T33b share icon,
+ * drawn entirely off the shared remote-status store: lit (brand colour) =
+ * the relay is online, grey = the link is down (offline / connecting /
+ * incompatible), dim grey = `revoked` / `unpaired` — states of their own
+ * (T34-fix): the hover and the click say the precise word, never
+ * "reconnecting", because neither recovers without a user action — and
+ * yellow = online but the interface fingerprints differ. The native `title`
+ * carries the hover prompt; clicking closes the session's remote access from
+ * THIS machine behind a `window.confirm` (the backend forwards it to the
+ * server as an unshare with reason `client`). While the link is not serving
+ * the click only explains itself — there is nothing to reach.
+ *
+ * Renders NOTHING on a local session (the id is not a virtual id), so the
+ * two roles' icons never appear at once, and nothing before the store's
+ * first answered GET. A local session also never SUBSCRIBES
+ * (subscribeIfVirtual): the subscription is what keeps the store polling,
+ * so a page showing only local sessions never sends a remote-status
+ * request.
+ *
+ * On the phone shell no rule of its own is needed: the mobile stylesheet
+ * blanket-hides every `conversation.session.header.actions` entry that is
+ * not the phone header's own (styles/header.css.ts), so this icon is a
+ * desktop(-browser) surface, exactly like the T33b share icon beside it.
+ */
+
+import { useCallback, useSyncExternalStore } from 'react'
+import { IconGlobeOutlineRegular } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import { describeRemoteStatus, subscribeIfVirtual } from '../client-data/remote-status.ts'
+import type { RemoteStatusStore } from '../client-data/remote-status.ts'
+import { isVirtual } from '../virtual-id.js'
+import { NS } from './locales.ts'
+
+export interface RemoteStatusIconProps extends PropsRuntime<'conversation.session.header.actions'>, PropsLocale<typeof NS> {
+  /** The shared remote-status store, bound through the registration's inject
+   * face. */
+  status: RemoteStatusStore
+}
+
+export function RemoteStatusIcon({ sessionId, status, t }: RemoteStatusIconProps) {
+  // The subscription is virtual-id gated (subscribeIfVirtual) — hooks stay
+  // above the render gate; the button additionally waits for a remote
+  // session and the store's first answered GET.
+  const snap = useSyncExternalStore(
+    useCallback(
+      (onStoreChange: () => void) => subscribeIfVirtual(status, sessionId, onStoreChange),
+      [status, sessionId],
+    ),
+    () => status.getSnapshot(),
+  )
+  // The explicit virtual-id gate stays: the page-wide store's snapshot can
+  // still be ready from a PREVIOUS remote session when a local one opens.
+  if (!isVirtual(sessionId) || !snap.ready) return null
+  const description = describeRemoteStatus(snap.view, t)
+  const close = (): void => {
+    // Offline recovers on its own; revoked / unpaired do not (T34-fix) —
+    // each says its own word instead of "reconnecting".
+    if (description.state === 'offline') {
+      window.alert(t('remoteStatusOfflineClick'))
+      return
+    }
+    if (description.state === 'revoked' || description.state === 'unpaired') {
+      window.alert(description.hoverText)
+      return
+    }
+    if (!window.confirm(t('remoteStatusUnshareConfirm'))) return
+    void status.unshare(sessionId).then((outcome) => {
+      if (outcome.ok) return
+      // A refused close names the backend's error code when it sent one —
+      // the locale line carries the placeholder (each language its own
+      // brackets), never a hardcoded concatenation.
+      if (outcome.code === undefined) window.alert(t('remoteStatusUnshareFail'))
+      else window.alert(t('remoteStatusUnshareFailCode', { code: outcome.code }))
+    })
+  }
+  return (
+    <button
+      type="button"
+      className="zr-remote-status"
+      data-zen-remote="remote-status"
+      data-state={description.state}
+      title={description.hoverText}
+      aria-label={description.hoverText}
+      onClick={close}
+    >
+      <IconGlobeOutlineRegular size={16} />
+    </button>
+  )
+}

package/src/client/compat/desktop.ts

@@ -0,0 +1,22 @@
+/**
+ * Desktop-shell detection for the mobile shell's master gate.
+ *
+ * The official desktop app is an Electron shell whose preload exposes a
+ * `dshDesktop` bridge on `window` before any page script runs
+ * (apps/desktop preload-app.ts, `contextBridge.exposeInMainWorld`), which is
+ * the same marker official ui-settings gates desktop-only UI on. The check
+ * is therefore synchronous and stable for the whole page lifetime.
+ *
+ * Plain web — phone browsers, the LAN gateway, desktop browsers at any
+ * window width — never has the bridge, so the mobile shell stays available
+ * there. This matters because an Electron window can be dragged down to
+ * ~520px wide, where every width-based gate would otherwise flip the phone
+ * shell on inside the desktop app.
+ *
+ * @param host - host object to probe; defaults to globalThis. Injectable so
+ * the two states are testable off-browser (test/desktop-shell.test.cjs) —
+ * apply() short-circuits the whole mobile shell on a true answer.
+ */
+export function isDesktopShell(host: typeof globalThis = globalThis): boolean {
+  return 'dshDesktop' in host
+}

package/src/client/compat/types.ts

@@ -64,10 +64,72 @@ export interface MobileSessionRow {
   completed?: boolean
   blank: boolean
   updatedAt: number
+  /**
+   * 0.1.7 的本地引用计数（retainedBy.mainView > 0 即「主视图正打开这个
+   * 会话」）。0.1.5 的 SessionListState.current 删掉了，主视图会话从行上
+   * 派生——与官方 uiSession.publishMain 同款读法（见 {@link mainSessionIdOf}）。
+   */
+  retainedBy?: Readonly<{ mainView?: number }>
   /** 宿主投影值；本插件只读 sessionStats.turns，读的地方自己 cast。 */
   projectionValues?: unknown
 }
 
+/**
+ * 0.1.5 的 `SessionListState.current` 在 0.1.7 删除；主视图会话改为从目录
+ * 行派生：被 mainView 来源 retain 的那一行。这正是官方 uiSession
+ * publishMain 的挑选方式（client/ui-session index.ts：先看当前绑定是否
+ * mainView，否则全表找第一条 mainView retain），本插件读同一条事实。
+ * @param byId - 会话目录表（useSessions 的 byId）。
+ * @returns 主视图会话 id；没有主视图会话时 undefined。
+ */
+export function mainSessionIdOf(byId: Readonly<Record<string, MobileSessionRow>>): SessionId | undefined {
+  for (const row of Object.values(byId)) {
+    if ((row.retainedBy?.mainView ?? 0) > 0) return row.id
+  }
+  return undefined
+}
+
+/**
+ * 子代理目录条目的本地镜像（0.1.7 `subagentCatalog` projection 的元素）。
+ * 0.1.5 的「按父会话的子代理快照」字段删除；目录改经
+ * `projectionsBySession[parentId].values.subagentCatalog` 显式读，条目只
+ * 镜像本插件读到的字段（id；运行态按官方派生式从状态表/目录行取，见
+ * MobileSessionHeader.tsx）。
+ */
+export interface SubagentCatalogEntryLike {
+  readonly id: SessionId
+  readonly mode: 'one-shot' | 'continuable' | 'unknown'
+  readonly label?: string
+}
+
+/** 0.1.7 job roster 行的本地镜像：本插件只读 status。 */
+export interface JobRowLike {
+  readonly status: 'running' | 'stopping' | 'completed' | 'killed' | 'failed'
+}
+
+/**
+ * `ctx.jobs` 服务的本地最小接口（0.1.7 `dsh-api-job-controller` 的 client
+ * 面）。0.1.5 的「按会话的任务快照」字段删除；任务列表改由 job roster 服务给出，
+ * 官方 JobListAction 用同一条路（hooks.jobs + watchRows）。
+ */
+export interface JobsLike {
+  /** Rosters and observations snapshot: `{ rows: Record<sessionId, JobRow[]> }`. */
+  readonly state: {
+    getSnapshot(): { readonly rows: Readonly<Record<string, readonly JobRowLike[]>> }
+    subscribe(listener: () => void): () => void
+  }
+  /** Keep one session's roster stream open while a viewer is mounted (ref-counted). */
+  watchRows(sessionId: SessionId): () => void
+}
+
+/**
+ * 渲染器把 inject 工厂里 `hooks.jobs`（{@link JobsLike.state} 形状的
+ * observable）包装成的标准 hook prop（官方 ui-jobs 同款约定：`jobs` →
+ * `useJobs`）。可选：服务缺席（懒查失败）时组件收不到它，任务计数隐藏。
+ */
+export type UseJobs =
+  <S>(sel: (snapshot: { readonly rows: Readonly<Record<string, readonly JobRowLike[]>> }) => S, eq?: (a: S, b: S) => boolean) => S
+
 /**
  * 0.1.1's session row carries `agentPreset`; 0.1.2 dropped it. Reading it
  * must not depend on which version's types are in scope in the current