@linxin666/dsh-remote-web-ui 0.2.4 → 0.2.5

package/src/client/RemotePanel.tsx

@@ -7,11 +7,19 @@
 import clsx from 'clsx'
 import { QRCodeSVG } from 'qrcode.react'
 import {
-  IconCloseOutline16, IconCopyOutline16, IconLinkOutline16, IconRefreshOutline16, IconStopFill16,
+  IconCloseOutline16, IconCopyOutline16, IconRefreshOutline16, IconStopFill16,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
 import type { PairingPhase } from '../pairing.ts'
-import { formatClock, type TunnelStatusFrame } from './pair-api.ts'
+import {
+  desktopPairUrl,
+  formatClock,
+  formatLastSeen,
+  type DeviceFrame,
+  type PostureFrame,
+  type TunnelStatusFrame,
+} from './pair-api.ts'
+import { deviceNameFromUserAgent } from './device-name.ts'
 import css from './remote.module.css'
 
 /** The panel's view state, owned by the entry component. */
@@ -27,6 +35,8 @@ export type PanelState =
       phase: PairingPhase
       deviceCount: number
       onlineCount: number
+      /** Authorized devices for the roster under the QR card. */
+      devices: DeviceFrame[]
       /** The LAN literal the current QR was built from. */
       address: string
       /** Every constructible LAN literal (interface order). */
@@ -37,21 +47,25 @@ export type PanelState =
       publicBaseUrl?: string
       /** Auto-tunnel status, while the auto-tunnel feature is active. */
       tunnel?: TunnelStatusFrame
+      /** Latest /api posture probe, once a round has completed. */
+      posture?: PostureFrame
     }
 
 /** Full panel props: copy + view state + actions. */
 export interface RemotePanelProps {
   t: TranslateNS<'remote'>
   state: PanelState
-  copied: boolean
+  copied: 'phone' | 'desktop' | undefined
   onClose(): void
   onStop(): void
   onRefresh(): void
-  onCopy(): void
+  onCopy(target: 'phone' | 'desktop', url: string): void
   /** Re-mint the QR against a different LAN address. */
   onPickAddress(address: string): void
   /** Re-mint the QR against the configured public (tunneled) base. */
   onPickPublic(): void
+  /** Revoke one paired device. */
+  onRevoke(deviceId: string): void
 }
 
 /** Badge text + tone per phase (ready states only). */
@@ -73,7 +87,7 @@ function statusOf(
  * @param props - copy, state, and actions.
  * @returns the panel element tree.
  */
-export function RemotePanel({ t, state, copied, onClose, onStop, onRefresh, onCopy, onPickAddress, onPickPublic }: RemotePanelProps) {
+export function RemotePanel({ t, state, copied, onClose, onStop, onRefresh, onCopy, onPickAddress, onPickPublic, onRevoke }: RemotePanelProps) {
   return (
     <div className={css.panel} role="dialog" aria-modal="true" aria-label={t('title')}>
       <div className={css.header}>
@@ -103,6 +117,14 @@ export function RemotePanel({ t, state, copied, onClose, onStop, onRefresh, onCo
         </div>
       ) : (
         <>
+          {state.posture !== undefined && state.posture.hosts.some(host => host.exposed) && (
+            <div className={css.banner} role="alert">
+              <p className={css.bannerTitle}>{t('posture.exposed')}</p>
+              <p className={css.bannerHint}>
+                {t('posture.exposedHint', { hosts: state.posture.hosts.filter(host => host.exposed).map(host => host.host).join(', ') })}
+              </p>
+            </div>
+          )}
           <div className={css.card}>
             <div className={css.cardHeader}>
               <span className={css.cardTitle}>{t('card.title')}</span>
@@ -122,7 +144,29 @@ export function RemotePanel({ t, state, copied, onClose, onStop, onRefresh, onCo
           </div>
 
           <p className={css.hint}>{state.public ? t('pair.publicHint') : t('pair.hint')}</p>
-          <p className={css.link} title={state.url}>{state.url}</p>
+          <div className={css.pairLinks}>
+            <div className={css.pairLinkRow}>
+              <div className={css.pairLinkText}>
+                <span className={css.pairLinkLabel}>{t('pair.phoneLabel')}</span>
+                <code className={css.link} title={state.url}>{state.url}</code>
+              </div>
+              <button type="button" className={css.copyLink} onClick={() => onCopy('phone', state.url)}>
+                <IconCopyOutline16 size={14} />
+                {copied === 'phone' ? t('action.copied') : t('action.copyPhone')}
+              </button>
+            </div>
+            <div className={css.pairLinkRow}>
+              <div className={css.pairLinkText}>
+                <span className={css.pairLinkLabel}>{t('pair.desktopLabel')}</span>
+                <code className={css.link} title={desktopPairUrl(state.url)}>{desktopPairUrl(state.url)}</code>
+              </div>
+              <button type="button" className={css.copyLink} onClick={() => onCopy('desktop', desktopPairUrl(state.url))}>
+                <IconCopyOutline16 size={14} />
+                {copied === 'desktop' ? t('action.copied') : t('action.copyDesktop')}
+              </button>
+            </div>
+          </div>
+          <p className={css.oneTimeHint}>{t('pair.oneTimeHint')}</p>
           {state.phase === 'stopped' && <p className={css.stoppedHint}>{t('stopped.hint')}</p>}
           {state.tunnel !== undefined && state.tunnel.state !== 'running' && (
             <p className={state.tunnel.state === 'failed' ? css.tunnelFailed : css.tunnelNote} role="status">
@@ -174,11 +218,40 @@ export function RemotePanel({ t, state, copied, onClose, onStop, onRefresh, onCo
               <IconRefreshOutline16 size={14} />
               {t('action.refresh')}
             </button>
-            <button type="button" className={css.action} onClick={onCopy}>
-              {copied ? <IconCopyOutline16 size={14} /> : <IconLinkOutline16 size={14} />}
-              {copied ? t('action.copied') : t('action.copy')}
-            </button>
           </div>
+
+          <section className={css.devices} data-testid="remote-devices" aria-label={t('devices.title')}>
+            <h3 className={css.devicesTitle}>{t('devices.title')}</h3>
+            {state.devices.length === 0 ? (
+              <p className={css.devicesEmpty}>{t('devices.empty')}</p>
+            ) : (
+              <ul className={css.deviceList}>
+                {state.devices.map(device => (
+                  <li key={device.id} className={css.deviceRow}>
+                    <div className={css.deviceMeta}>
+                      <span className={css.deviceName}>
+                        {deviceNameFromUserAgent(device.userAgent) ?? t('devices.unknown')}
+                      </span>
+                      <span className={clsx(css.devicePresence, device.online ? css.deviceOnline : css.deviceOffline)}>
+                        {device.online ? t('devices.online') : t('devices.offline')}
+                      </span>
+                      <span className={css.deviceSeen}>
+                        {t('devices.lastSeen', { time: formatLastSeen(device.lastSeenAt) })}
+                      </span>
+                    </div>
+                    <button
+                      type="button"
+                      className={css.deviceRevoke}
+                      aria-label={t('devices.revoke.label')}
+                      onClick={() => { onRevoke(device.id) }}
+                    >
+                      {t('devices.revoke')}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </section>
         </>
       )}
     </div>

package/src/client/RemoteSettingsCard.tsx

@@ -19,6 +19,8 @@ export interface RemoteSettings {
   offlineAfterMs?: number
   /** Hard cap on paired device sessions (oldest evicted when full). */
   maxDevices?: number
+  /** Idle sessions older than this (ms) are deleted. */
+  idleExpireMs?: number
   /** Cookie name carrying the paired device id. */
   cookieName?: string
   /** Fence flag: whether non-loopback /api requests must carry a live paired-device cookie. */
@@ -41,6 +43,8 @@ export interface RemoteSettingsCardState extends CardShell {
   offlineAfterMs: CardFieldState
   /** Paired-device cap. */
   maxDevices: CardFieldState
+  /** Idle-expiry window. */
+  idleExpireMs: CardFieldState
   /** Device cookie name. */
   cookieName: CardFieldState
   /** LAN fence flag. */
@@ -73,6 +77,7 @@ export class RemoteSettingsCardController {
       numberField('tokenTtlMs'),
       numberField('offlineAfterMs'),
       numberField('maxDevices'),
+      numberField('idleExpireMs'),
       textField('cookieName'),
       booleanField('requirePairingForLan'),
       textField('publicBaseUrl'),
@@ -89,6 +94,7 @@ export class RemoteSettingsCardController {
       tokenTtlMs: this.form.field('tokenTtlMs'),
       offlineAfterMs: this.form.field('offlineAfterMs'),
       maxDevices: this.form.field('maxDevices'),
+      idleExpireMs: this.form.field('idleExpireMs'),
       cookieName: this.form.field('cookieName'),
       requirePairingForLan: this.form.field('requirePairingForLan'),
       publicBaseUrl: this.form.field('publicBaseUrl'),
@@ -187,6 +193,16 @@ export function RemoteSettingsCard(props: RemoteSettingsCardProps) {
         onEdit={(text) => { props.edit('maxDevices', text) }}
         onReset={() => { props.resetField('maxDevices') }}
       />
+      <ValueField
+        id="settings-remote-idle-expire"
+        label={t('settings.idleExpireMs')}
+        hint={t('settings.idleExpireMsHint')}
+        numeric
+        {...fieldProps}
+        {...state.idleExpireMs}
+        onEdit={(text) => { props.edit('idleExpireMs', text) }}
+        onReset={() => { props.resetField('idleExpireMs') }}
+      />
       <ValueField
         id="settings-remote-cookie"
         label={t('settings.cookieName')}

package/src/client/device-name.ts

@@ -0,0 +1,31 @@
+/** Derive a short, non-sensitive device label from a browser User-Agent. */
+export function deviceNameFromUserAgent(userAgent?: string): string | undefined {
+  if (userAgent === undefined || userAgent.trim() === '') return undefined
+
+  const os = /Windows NT/i.test(userAgent)
+    ? 'Windows'
+    : /Android/i.test(userAgent)
+      ? 'Android'
+      : /iPhone|iPad|iPod/i.test(userAgent)
+        ? 'iOS'
+        : /Macintosh|Mac OS X/i.test(userAgent)
+          ? 'macOS'
+          : /Linux/i.test(userAgent)
+            ? 'Linux'
+            : undefined
+
+  const browser = /Edg(?:A|iOS)?\//i.test(userAgent)
+    ? 'Edge'
+    : /(?:OPR|Opera)\//i.test(userAgent)
+      ? 'Opera'
+      : /(?:Chrome|CriOS)\//i.test(userAgent)
+        ? 'Chrome'
+        : /(?:Firefox|FxiOS)\//i.test(userAgent)
+          ? 'Firefox'
+          : /Safari\//i.test(userAgent) && /Version\//i.test(userAgent)
+            ? 'Safari'
+            : undefined
+
+  if (os !== undefined && browser !== undefined) return `${os} · ${browser}`
+  return os ?? browser
+}

package/src/client/index.ts

@@ -24,6 +24,8 @@ import { RemoteSettingsCard, RemoteSettingsCardController, type RemoteSettings }
 import { en, zh, type RemoteKey } from './locales.ts'
 import { PAIR_FAILED_MARKER, runPairBootFlow } from './deep-link.ts'
 import { sendHeartbeat } from './pair-api.ts'
+import { installRemoteChannel, isLoopbackHostname } from './remote-channel.ts'
+import { FenceNotice } from './FenceNotice.tsx'
 
 export type { RemoteEntryProps } from './RemoteEntry.tsx'
 export type { PanelState, RemotePanelProps } from './RemotePanel.tsx'
@@ -193,6 +195,50 @@ export function apply(ctx: ClientContext): void {
   settingsScope.subscribe(syncRuntime)
   syncRuntime()
 
+  // Remote desktop channel: on a non-loopback origin (LAN address or public
+  // tunnel) the connection plugin's /api fence refuses this desktop Web GUI,
+  // and pairing is the access control — so the SDK client's /api traffic is
+  // rewritten onto this plugin's gated /remote/api prefix (remote-channel.ts)
+  // while the fence setting demands it. Loopback origins are untouched.
+  let disposeChannel: (() => void) | undefined
+  let fenceNotice: { unmount: () => void; node: HTMLElement } | undefined
+  const showFenceNotice = (): void => {
+    if (fenceNotice !== undefined) return
+    const node = document.createElement('div')
+    document.body.appendChild(node)
+    const root = createRoot(node)
+    root.render(createElement(FenceNotice, { t, onRetry: () => { window.location.reload() } }))
+    fenceNotice = { unmount: () => { root.unmount(); node.remove() }, node }
+  }
+  const hideFenceNotice = (): void => {
+    fenceNotice?.unmount()
+    fenceNotice = undefined
+  }
+  const channelActive = (): boolean => {
+    if (isLoopbackHostname(window.location.hostname)) return false
+    // A not-yet-loaded (or unavailable) settings snapshot falls back to the
+    // schema defaults — enabled and requirePairingForLan are both true, and
+    // on a remote origin the snapshot may never load (its own transport is
+    // what the channel gates), so waiting for 'ready' here would deadlock
+    // the channel off exactly where it is needed most.
+    const snapshot = settingsScope.getSnapshot()
+    const value = snapshot.status === 'ready' ? snapshot.value : undefined
+    return (value?.enabled ?? true) && (value?.requirePairingForLan ?? true)
+  }
+  const syncChannel = (): void => {
+    if (channelActive() && disposeChannel === undefined) {
+      disposeChannel = ctx.effect(() => {
+        const restore = installRemoteChannel(window, { onUnpaired: showFenceNotice, onPaired: hideFenceNotice })
+        return restore
+      }, 'remote-web-ui: remote desktop channel')
+    } else if (!channelActive() && disposeChannel !== undefined) {
+      disposeChannel()
+      disposeChannel = undefined
+    }
+  }
+  settingsScope.subscribe(syncChannel)
+  syncChannel()
+
   // One-time failed-pair toast. The accept result lands asynchronously, so
   // the marker check is deferred past the accept round trip.
   ctx.effect(() => {

package/src/client/locales.ts

@@ -1,45 +1,68 @@
-/** `remote` namespace dictionaries: the mobile remote-control surface copy. */
+/** `remote` namespace dictionaries: the remote-access surface copy. */
 
 /** Simplified Chinese dictionary (the key-set source of truth). */
 export const zh = {
-  'entry.label': '移动端远程控制',
-  'title': '移动端远程控制',
-  'subtitle': '扫码或在手机上打开链接，即可远程控制当前工作区',
-  'card.title': '手机扫码连接',
+  'entry.label': '远程访问',
+  'title': '远程访问',
+  'subtitle': '通过手机或另一台电脑配对，远程访问当前工作区',
+  'card.title': '设备配对',
   'public.badge': '公网',
-  'status.waiting': '等待手机连接',
+  'status.waiting': '等待设备连接',
   'status.connected': '已连接 {n} 台设备',
   'status.disconnected': '已配对设备离线',
-  'status.stopped': '已停止移动端访问',
+  'status.stopped': '已停止远程访问',
   'status.lanRequired': '此功能需要以 --host 0.0.0.0 启动 dsh web，或配置公网地址才能使用',
   'status.lanRequiredHint': '当前服务仅绑定在 127.0.0.1 且未配置公网地址，手机无法访问。请用 dsh web --host 0.0.0.0 重新启动，或在设置中填写内网穿透的公网地址。',
   'status.loopbackRequired': '配对面板仅限本机使用',
   'status.loopbackRequiredHint': '请通过 http://127.0.0.1 打开此页面后重试；手机请使用配对链接访问。',
   'status.unreachable': '无法连接配对服务',
   'status.unreachableHint': '请刷新页面后重试。',
-  'pair.hint': '无法扫码？可以在手机上打开链接',
-  'pair.publicHint': '公网链接：手机无需与电脑在同一网络',
+  'pair.hint': '无法扫码？可直接打开下方配对链接',
+  'pair.publicHint': '公网链接：设备无需与本机处于同一网络',
   'address.label': '选择二维码指向的网络',
   'address.public': '公网地址',
   'address.lan': '局域网',
-  'address.hint': '公网地址适合手机不在同一网络时使用；局域网地址仅在手机与电脑同一网络时可用。',
+  'address.hint': '远程设备不在同一网络时请使用公网地址；局域网地址仅限同一网络内使用。',
   'pair.expires': '二维码有效至 {time}',
   'pair.expired': '二维码已过期，请刷新',
+  'pair.phoneLabel': '手机配对链接',
+  'pair.desktopLabel': '电脑配对链接',
+  'pair.oneTimeHint': '两条链接共用同一枚一次性令牌；任意设备配对成功后，另一条链接立即失效。',
   'pair.failed.title': '配对失败',
   'pair.failed.detail': '链接无效或已使用，请回到电脑端刷新二维码后重新扫码。',
+  'fence.unpaired.title': '此设备未配对，无法访问工作区数据',
+  'fence.unpaired.eyebrow': '需要设备配对',
+  'fence.unpaired.hint': '为保护工作区、会话与插件数据，远程电脑必须先通过主电脑授权。',
+  'fence.unpaired.stepDesktop': '在主电脑打开 http://127.0.0.1:3080，进入“远程访问”。',
+  'fence.unpaired.stepLink': '在“设备配对”中复制电脑配对链接。',
+  'fence.unpaired.stepOpen': '在当前浏览器打开该链接，完成授权后即可进入。',
+  'fence.unpaired.retry': '重新检测',
+  'fence.unpaired.footnote': '请勿使用他人提供的配对链接；管理员可随时取消此设备的授权。',
+  'posture.exposed': '/api 通道对未配对设备敞开',
+  'posture.exposedHint': '以下来源的请求未经配对即可访问完整桌面 API：{hosts}。请移除对应来源的 --trusted-host（配对机制已覆盖远程访问），或改为仅绑定 127.0.0.1 并使用隧道。',
   'action.stop': '停止',
   'action.refresh': '刷新二维码',
   'action.copy': '复制链接',
+  'action.copyPhone': '复制手机链接',
+  'action.copyDesktop': '复制电脑链接',
   'action.copied': '已复制',
-  'stopped.hint': '已停止移动端访问。点击"刷新二维码"重新开启。',
+  'devices.title': '已授权设备',
+  'devices.empty': '还没有已配对的设备。扫码或打开链接后会出现在这里。',
+  'devices.unknown': '未知设备',
+  'devices.online': '在线',
+  'devices.offline': '离线',
+  'devices.lastSeen': '最近活动 {time}',
+  'devices.revoke': '取消配对',
+  'devices.revoke.label': '取消配对此设备',
+  'stopped.hint': '已停止远程访问。点击"刷新二维码"重新开启。',
   'tunnel.starting': '公网隧道启动中，二维码将自动变为公网链接…',
   'tunnel.failed': '公网隧道启动失败：{error}',
   'tunnel.unknownError': '未知错误',
-  'close.label': '关闭移动端远程控制面板',
+  'close.label': '关闭远程访问面板',
   // 插件设置卡片（settings.plugin.item 席位）。
-  'settings.title': '移动端远程控制',
+  'settings.title': '远程访问设置',
   'settings.description': '配对安全与设备限额。',
-  'settings.enabled': '启用移动端远程控制',
+  'settings.enabled': '启用远程访问',
   'settings.enabledHint': '关闭后移除侧边栏入口并停用配对路由与局域网栅栏。',
   'settings.tokenTtlMs': '配对令牌有效期（毫秒）',
   'settings.tokenTtlMsHint': '新生成的二维码链接在此时间后失效。',
@@ -47,10 +70,12 @@ export const zh = {
   'settings.offlineAfterMsHint': '配对设备超过该时长未上报心跳即视为离线。',
   'settings.maxDevices': '已配对设备上限',
   'settings.maxDevicesHint': '超过上限时淘汰最旧的设备会话。',
+  'settings.idleExpireMs': '空闲过期（毫秒）',
+  'settings.idleExpireMsHint': '超过该时长没有任何心跳或请求的已配对设备会被删除，必须重新扫码。默认 7 天。',
   'settings.cookieName': '设备 Cookie 名',
   'settings.cookieNameHint': '携带已配对设备标识的 Cookie 名称。',
   'settings.requirePairingForLan': '局域网访问要求配对',
-  'settings.requirePairingForLanHint': '开启：所有非本机回环的 /api 请求必须携带有效配对 Cookie；关闭：局域网栅栏放开，配对仅用于令牌与状态管理。',
+  'settings.requirePairingForLanHint': '开启：非本机回环的桌面 Web GUI 改走门控的 /remote，必须携带有效配对 Cookie；关闭：桌面继续走普通路径（仅在该来源已被 SDK 信任时有意义），配对只管理令牌与状态。',
   'settings.publicBaseUrl': '公网地址（可选）',
   'settings.publicBaseUrlHint': '内网穿透的公网地址，如 Cloudflare Tunnel：https://xxx.trycloudflare.com。填写后二维码将生成公网链接，手机不在同一网络也能配对；留空则仅局域网可用。',
   'settings.autoTunnel': '自动公网隧道',
@@ -118,44 +143,67 @@ export type SettingsCardKey = RemoteKey
 
 /** English dictionary, checked complete against the zh key set. */
 export const en = {
-  'entry.label': 'Mobile remote control',
-  'title': 'Mobile remote control',
-  'subtitle': 'Scan the QR code or open the link on your phone to control this workspace remotely',
-  'card.title': 'Scan to connect',
+  'entry.label': 'Remote access',
+  'title': 'Remote access',
+  'subtitle': 'Pair a phone or another computer to access this workspace remotely',
+  'card.title': 'Pair a device',
   'public.badge': 'Public',
-  'status.waiting': 'Waiting for a phone',
+  'status.waiting': 'Waiting for a device',
   'status.connected': '{n} device(s) connected',
   'status.disconnected': 'Paired devices offline',
-  'status.stopped': 'Mobile access stopped',
+  'status.stopped': 'Remote access stopped',
   'status.lanRequired': 'This feature needs dsh web started with --host 0.0.0.0, or a configured public address',
   'status.lanRequiredHint': 'The server is bound to 127.0.0.1 and no public address is configured, so a phone cannot reach it. Restart with dsh web --host 0.0.0.0, or set the tunneled public address in settings.',
   'status.loopbackRequired': 'The pairing panel works on this machine only',
   'status.loopbackRequiredHint': 'Open this page at http://127.0.0.1 to mint a QR code; phones use the paired link.',
   'status.unreachable': 'Cannot reach the pairing service',
   'status.unreachableHint': 'Refresh the page and try again.',
-  'pair.hint': 'Cannot scan? Open the link on your phone',
-  'pair.publicHint': 'Public link: the phone does not need to be on the same network',
+  'pair.hint': 'Cannot scan? Open one of the pairing links below',
+  'pair.publicHint': 'Public links work when the device is not on the same network',
   'address.label': 'Network the QR code points to',
   'address.public': 'Public',
   'address.lan': 'LAN',
-  'address.hint': 'Use the public address when the phone is not on the same network; LAN addresses only work on the same network.',
+  'address.hint': 'Use the public address when the remote device is on another network; LAN addresses only work on the same network.',
   'pair.expires': 'QR code valid until {time}',
   'pair.expired': 'QR code expired — refresh it',
+  'pair.phoneLabel': 'Phone pairing link',
+  'pair.desktopLabel': 'Computer pairing link',
+  'pair.oneTimeHint': 'Both links share one single-use token. Pairing either device invalidates the other link immediately.',
   'pair.failed.title': 'Pairing failed',
   'pair.failed.detail': 'The link is invalid or was already used. Refresh the QR code on your computer and scan again.',
+  'fence.unpaired.title': 'This device is not paired and cannot reach workspace data',
+  'fence.unpaired.eyebrow': 'Device pairing required',
+  'fence.unpaired.hint': 'To protect workspace, session, and plugin data, a remote computer must first be authorized by the primary computer.',
+  'fence.unpaired.stepDesktop': 'On the primary computer, open http://127.0.0.1:3080 and go to Remote access.',
+  'fence.unpaired.stepLink': 'Copy the computer pairing link under Pair a device.',
+  'fence.unpaired.stepOpen': 'Open that link in this browser. After authorization, the workspace will become available.',
+  'fence.unpaired.retry': 'Check again',
+  'fence.unpaired.footnote': 'Do not use pairing links from people you do not trust. An administrator can revoke this device at any time.',
+  'posture.exposed': 'The /api channel is open to unpaired devices',
+  'posture.exposedHint': 'Requests from {hosts} reach the full desktop API without pairing. Remove --trusted-host for them (pairing already covers remote access), or bind loopback only and use the tunnel.',
   'action.stop': 'Stop',
   'action.refresh': 'Refresh QR',
   'action.copy': 'Copy link',
+  'action.copyPhone': 'Copy phone link',
+  'action.copyDesktop': 'Copy computer link',
   'action.copied': 'Copied',
-  'stopped.hint': 'Mobile access is stopped. Click "Refresh QR" to re-enable it.',
+  'devices.title': 'Authorized devices',
+  'devices.empty': 'No paired devices yet. Scan the QR or open the link to add one.',
+  'devices.unknown': 'Unknown device',
+  'devices.online': 'Online',
+  'devices.offline': 'Offline',
+  'devices.lastSeen': 'Last active {time}',
+  'devices.revoke': 'Unpair',
+  'devices.revoke.label': 'Unpair this device',
+  'stopped.hint': 'Remote access is stopped. Click "Refresh QR" to re-enable it.',
   'tunnel.starting': 'The public tunnel is starting; the QR code will switch to a public link shortly…',
   'tunnel.failed': 'The public tunnel failed to start: {error}',
   'tunnel.unknownError': 'unknown error',
-  'close.label': 'Close mobile remote control panel',
+  'close.label': 'Close remote access panel',
   // Plugin settings card (the `settings.plugin.item` seat).
-  'settings.title': 'Mobile remote control',
+  'settings.title': 'Remote access settings',
   'settings.description': 'Pairing security and device limits.',
-  'settings.enabled': 'Enable mobile remote control',
+  'settings.enabled': 'Enable remote access',
   'settings.enabledHint': 'When off, the sidebar entry is removed and pairing routes plus the LAN fence stop.',
   'settings.tokenTtlMs': 'Pairing token lifetime (ms)',
   'settings.tokenTtlMsHint': 'How long a minted QR link stays valid before it dies.',
@@ -163,10 +211,12 @@ export const en = {
   'settings.offlineAfterMsHint': 'A paired device flips to offline when it has not been seen for this long.',
   'settings.maxDevices': 'Paired device cap',
   'settings.maxDevicesHint': 'Hard cap on paired device sessions; the oldest is evicted when full.',
+  'settings.idleExpireMs': 'Idle expiry (ms)',
+  'settings.idleExpireMsHint': 'A paired device with no heartbeat or request for this long is deleted and must scan again. Default is 7 days.',
   'settings.cookieName': 'Device cookie name',
   'settings.cookieNameHint': 'Cookie that carries the paired device id.',
   'settings.requirePairingForLan': 'Require pairing for LAN access',
-  'settings.requirePairingForLanHint': 'On: every non-loopback /api request must carry a live paired-device cookie. Off: the LAN fence is open and pairing only manages tokens/status.',
+  'settings.requirePairingForLanHint': 'On: a desktop Web GUI at a non-loopback origin rides the gated /remote channel and must carry a live paired-device cookie. Off: the desktop stays on its original paths (only useful when that origin is already trusted) and pairing only manages tokens/status.',
   'settings.publicBaseUrl': 'Public address (optional)',
   'settings.publicBaseUrlHint': 'The public URL of a tunnel in front of this server, e.g. a Cloudflare Tunnel: https://xxx.trycloudflare.com. When set, the QR link is built from it so a phone anywhere can pair; leave blank for LAN-only usage.',
   'settings.autoTunnel': 'Auto public tunnel',

package/src/client/pair-api.ts

@@ -46,6 +46,12 @@ export interface TunnelStatusFrame {
   error?: string
 }
 
+/** One /api posture frame (host half probe; see src/posture.ts). */
+export interface PostureFrame {
+  checkedAt: number
+  hosts: { host: string; exposed: boolean }[]
+}
+
 /** One /api/pair/events frame. */
 export interface PairStateFrame {
   type: 'state'
@@ -55,8 +61,21 @@ export interface PairStateFrame {
   tokenExpiresAt?: number
   deviceCount: number
   onlineCount: number
+  /** Per-device roster (loopback events only). */
+  devices?: DeviceFrame[]
   /** Auto-tunnel status, while the auto-tunnel feature is active. */
   tunnel?: TunnelStatusFrame
+  /** Latest /api fence posture probe, once a round has completed. */
+  posture?: PostureFrame
+}
+
+/** One authorized-device row from the loopback status stream. */
+export interface DeviceFrame {
+  id: string
+  createdAt: number
+  lastSeenAt: number
+  online: boolean
+  userAgent?: string
 }
 
 /**
@@ -112,6 +131,20 @@ export async function stopPair(): Promise<void> {
   if (!response.ok) throw new Error(`remote-web-ui: stop failed with ${String(response.status)}`)
 }
 
+/**
+ * Revoke one paired device from the loopback panel.
+ * @param deviceId - the session id of the row to drop.
+ */
+export async function revokePair(deviceId: string): Promise<void> {
+  const response = await fetch('/api/pair/revoke', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ deviceId }),
+  })
+  if (response.status === 404) return
+  if (!response.ok) throw new Error(`remote-web-ui: revoke failed with ${String(response.status)}`)
+}
+
 /** Presence heartbeat from a paired phone (unpaired heartbeats 401 harmlessly). */
 export async function sendHeartbeat(): Promise<void> {
   await fetch('/api/pair/heartbeat', { method: 'POST' })
@@ -128,6 +161,24 @@ export function readPairParams(search: string): { pair?: string; workspace?: str
   }
 }
 
+/**
+ * Strip one query parameter from the current URL without reloading.
+ * @param name - the parameter to remove.
+ * @returns the new search string ('' when empty).
+ */
+export function stripParam(name: string): string {
+  const url = new URL(window.location.href)
+  url.searchParams.delete(name)
+  return url.search
+}
+
+/** Convert an issued `/m/` link into the desktop pairing form. */
+export function desktopPairUrl(mobileUrl: string): string {
+  const url = new URL(mobileUrl)
+  url.pathname = '/'
+  return url.href
+}
+
 /** Human-readable expiry clock, e.g. "10:35". */
 export function formatClock(epochMs: number): string {
   const date = new Date(epochMs)
@@ -136,6 +187,15 @@ export function formatClock(epochMs: number): string {
   return `${hours}:${minutes}`
 }
 
+/** Calendar + clock for last-seen timestamps, e.g. "2026-08-19 10:35". */
+export function formatLastSeen(epochMs: number): string {
+  const date = new Date(epochMs)
+  const year = String(date.getFullYear())
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day} ${formatClock(epochMs)}`
+}
+
 /**
  * Copy text to the clipboard with a fallback for insecure contexts
  * (plain-HTTP LAN origins lack navigator.clipboard).