@huakirax/dsh-plugin-pocket 0.0.0-stage → 0.1.0

package/package.json

@@ -1,6 +1,93 @@
 {
   "name": "@huakirax/dsh-plugin-pocket",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Bridge plugin for the dsh-android native app: a small authenticated JSON/WebSocket protocol over DeepSeek Harness sessions",
+  "keywords": [
+    "dsh",
+    "dsh-plugin",
+    "deepseek-harness",
+    "android",
+    "remote"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Huakira/dsh-plugin-pocket.git"
+  },
+  "type": "module",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./client": "./lib/client.js",
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "dsh-pocket": "bin/pocket.js"
+  },
+  "files": [
+    "index.js",
+    "src",
+    "lib",
+    "bin",
+    "cordis.patch.yml",
+    "README.md",
+    "iroh"
+  ],
+  "engines": {
+    "node": "^22.19.0 || >=24.0.0",
+    "dsh": ">=0.2.2-rc.1 <0.3.0"
+  },
+  "scripts": {
+    "build:client": "tsdown",
+    "build:iroh": "cargo build --release -p pocket-host --manifest-path iroh/Cargo.toml",
+    "pretest": "npm run build:client",
+    "lint": "eslint .",
+    "test": "node --test --test-timeout=60000 test/*.test.js",
+    "test:integration": "npm run build:client && node --test test/integration/*.test.js"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-settings"
+      ]
+    }
+  },
+  "dependencies": {
+    "bonjour-service": "1.4.4",
+    "fflate": "^0.8.3",
+    "ws": "^8.18.0"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/dsh-api-session-controller": ">=0.2.1-alpha.2 <0.2.3-0"
+  },
+  "peerDependenciesMeta": {
+    "@deepseek-ai/dsh-api-session-controller": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.2",
+    "@eslint/js": "^9.14.0",
+    "@types/react": "~18.3.1",
+    "@types/react-dom": "~18.3.0",
+    "eslint": "^9.14.0",
+    "globals": "^15.12.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsdown": "^0.15.0",
+    "typescript": "^5.6.0",
+    "uqr": "^0.1.3"
+  },
+  "author": {
+    "name": "Huakira",
+    "email": "huakexie@proton.me"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/advertise-host.js

@@ -0,0 +1,69 @@
+import { networkInterfaces } from 'node:os'
+
+/**
+ * Tailscale CGNAT (100.64.0.0/10) or MagicDNS.
+ * @param {string} host
+ */
+export function isTailscaleHost(host) {
+  if (!host || typeof host !== 'string') return false
+  if (host.endsWith('.ts.net')) return true
+  const p = host.split('.').map((x) => Number(x))
+  return p.length === 4 && p.every((n) => Number.isInteger(n) && n >= 0 && n <= 255)
+    && p[0] === 100 && p[1] >= 64 && p[1] <= 127
+}
+
+/**
+ * Discover phone-reachable IPv4 endpoints on the interfaces actually bound by WS.
+ * A concrete bind (including a resolved config hostname) must not advertise other NICs.
+ *
+ * @param {string | undefined | null} configured
+ * @param {string} boundHost Actual server.address().address, or the configured bind.
+ * @param {ReturnType<typeof networkInterfaces>} [interfaces]
+ * @returns {Array<{type: 'lan'|'tailscale', host: string}>}
+ */
+export function listAdvertiseNetworks(configured, boundHost = pickBindHost(configured), interfaces = networkInterfaces()) {
+  const pinned = typeof configured === 'string' ? configured.trim() : ''
+  const wildcard = boundHost === '0.0.0.0' || boundHost === '::'
+  const explicit = pinned && pinned !== '0.0.0.0' && pinned !== '::'
+  const networks = []
+  for (const list of Object.values(interfaces)) {
+    for (const n of list ?? []) {
+      if (n.family !== 'IPv4' && n.family !== 4) continue
+      if (n.internal || !n.address || n.address.startsWith('127.') || n.address === '0.0.0.0') continue
+      if (!wildcard && n.address !== boundHost) continue
+      if (explicit && pinned !== n.address && boundHost === pinned) continue
+      const host = explicit ? pinned : n.address
+      const type = isTailscaleHost(host) || isTailscaleHost(n.address) ? 'tailscale' : 'lan'
+      if (!networks.some((network) => network.type === type)) networks.push({ type, host })
+    }
+  }
+  return networks.sort((a, b) => Number(a.type === 'tailscale') - Number(b.type === 'tailscale'))
+}
+
+/**
+ * Omitted selection prefers LAN; explicit unavailable selections never fall back.
+ * @param {Array<{type: 'lan'|'tailscale', host: string}>} networks
+ * @param {string} [requested]
+ */
+export function selectNetwork(networks, requested) {
+  if (requested !== undefined && requested !== 'lan' && requested !== 'tailscale') {
+    throw Object.assign(new Error('network must be lan or tailscale'), { statusCode: 400 })
+  }
+  const selected = requested === undefined
+    ? networks.find((network) => network.type === 'lan') ?? networks[0]
+    : networks.find((network) => network.type === requested)
+  if (requested !== undefined && !selected) {
+    throw Object.assign(new Error(`${requested} network is unavailable on the bound interfaces`), { statusCode: 503 })
+  }
+  return selected
+}
+
+/**
+ * WS bind host: explicit config wins; otherwise all interfaces so Tailscale + LAN work.
+ * @param {string | undefined | null} configured
+ */
+export function pickBindHost(configured) {
+  const pinned = typeof configured === 'string' ? configured.trim() : ''
+  if (pinned) return pinned
+  return '0.0.0.0'
+}

package/src/approval-hook.js

@@ -0,0 +1,50 @@
+const never = new Promise(() => {})
+
+/**
+ * Build the `approval/request` waterfall listener.
+ *
+ * Races the phone answer against the rest of the chain (`next()`: the web UI's
+ * forwarded Remote event and any other answerer). First answer wins.
+ *
+ * When a phone wins we must also clear the web UI's pending card. The Gateway
+ * withdraws a forwarded waterfall (sends `{type:'cancel'}` to browsers) only
+ * when the request's own `signal` aborts, so before calling `next()` we replace
+ * `req.signal` on the shared request object with `AbortSignal.any([orig, ours])`
+ * and abort `ours` when the phone wins. ApprovalService keeps its own reference
+ * to the original signal, so its cancellation semantics are unchanged.
+ * `'unavailable'` from the chain means "no answerer there" and does not win.
+ */
+export function createApprovalHook(server, { log = () => {} } = {}) {
+  return async function onApprovalRequest(req, next) {
+    if (!server.hasDevices()) return next()
+    const orig = req.signal
+    if (orig?.aborted) return next()
+    const ours = new AbortController()
+    try {
+      req.signal = orig ? AbortSignal.any([orig, ours.signal]) : ours.signal
+    } catch (error) {
+      log('cannot attach withdraw signal; web card may linger:', error)
+    }
+    const offer = server.offerApproval({
+      sessionId: req.agent?.session?.id ?? req.agent?.id,
+      toolName: req.toolName ?? '',
+      ...(req.callId ? { callId: req.callId } : {}),
+      ...(req.reason ? { reason: req.reason } : {}),
+      ...(req.displayReason ? { displayReason: req.displayReason } : {}),
+    })
+    const chain = Promise.resolve().then(next)
+    const web = chain.then(
+      (outcome) => (outcome === 'unavailable' ? never : { outcome, by: 'chain' }),
+      () => never,
+    )
+    const aborted = orig ? new Promise((r) => {
+      if (orig.aborted) r({ outcome: 'cancelled', by: 'signal' })
+      orig.addEventListener('abort', () => r({ outcome: 'cancelled', by: 'signal' }), { once: true })
+    }) : never
+    const winner = await Promise.race([offer.answer, web, aborted])
+    if (winner.by.startsWith('device:')) ours.abort(new Error('answered on a paired device'))
+    chain.catch(() => {})
+    offer.close(winner.outcome, winner.by)
+    return winner.outcome
+  }
+}

package/src/client/ConfirmDialog.tsx

@@ -0,0 +1,80 @@
+import { useEffect, type JSX, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { styles } from './styles.ts'
+
+/**
+ * Lightweight confirm dialog matching dsh Modal / SignOutDialog chrome
+ * (mask + card + title + body + action row), built with theme tokens only.
+ * Does not `require` `@deepseek-ai/dsh-client-ui-primitives` (plugin hard rule).
+ */
+export function ConfirmDialog({
+  open,
+  title,
+  body,
+  cancelLabel,
+  confirmLabel,
+  busy = false,
+  onCancel,
+  onConfirm,
+}: {
+  open: boolean
+  title: string
+  body: ReactNode
+  cancelLabel: string
+  confirmLabel: string
+  busy?: boolean
+  onCancel: () => void
+  onConfirm: () => void
+}): JSX.Element | null {
+  useEffect(() => {
+    if (!open) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && !busy) onCancel()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [open, busy, onCancel])
+
+  if (!open || typeof document === 'undefined') return null
+
+  return createPortal(
+    <div
+      style={styles.dialogMask}
+      role="presentation"
+      onClick={(e) => {
+        if (e.target === e.currentTarget && !busy) onCancel()
+      }}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        style={styles.dialogCard}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h2 style={styles.dialogTitle}>{title}</h2>
+        <div style={styles.dialogBody}>{body}</div>
+        <div style={styles.dialogActions}>
+          <button
+            type="button"
+            style={styles.ghostBtn}
+            disabled={busy}
+            data-modal-autofocus
+            onClick={onCancel}
+          >
+            {cancelLabel}
+          </button>
+          <button
+            type="button"
+            style={styles.destructiveBtn}
+            disabled={busy}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}

package/src/client/HostUiLauncher.tsx

@@ -0,0 +1,101 @@
+import { useEffect } from 'react'
+import type { Context as ClientContext } from '@deepseek-ai/cordis'
+import { installHostUiStyles } from './host-ui-styles.ts'
+
+/** Public launcher owner props in the shipped Host. openSection is NOT a launcher prop. */
+type LauncherOwnerProps = {
+  wide: boolean
+  settingsOpen: boolean
+  settingsShortcut?: { readonly keys: readonly string[]; readonly aria?: string | undefined }
+  openSettings: () => void
+  openOnboarding: (id: string) => void
+}
+
+type LauncherProps = LauncherOwnerProps & {
+  section: string
+  slots: ClientContext['slots']
+  finish: () => void
+  useSessionReadiness: <T>(select: (state: { phase: string }) => T) => T
+}
+
+type SettingsStore = { create: () => { actions: { openSection: (id: string) => void } } }
+
+/**
+ * The shell publishes its store on the settings.launcher-owning sidebar entry.
+ * Its create() returns the SAME root-scoped instance used by the renderer and
+ * keyboard command (ui-settings-general), not a second private React tree.
+ */
+function sectionNavigator(slots: ClientContext['slots']): ((id: string) => void) | undefined {
+  const owner = slots.entries('sidebar.settings').find(entry => entry.children?.['settings.launcher'])
+  const store: unknown = owner?.store
+  if (typeof store !== 'object' || store === null || !('create' in store) || typeof store.create !== 'function') return undefined
+  const instance = (store as SettingsStore).create()
+  if (typeof instance?.actions?.openSection !== 'function') return undefined
+  return id => { instance.actions.openSection(id) }
+}
+
+/** A temporary launcher occupant; the official launcher resumes after navigation. */
+export function HostUiLauncher({ section, slots, finish, openSettings, useSessionReadiness }: LauncherProps) {
+  const ready = useSessionReadiness(state => state.phase === 'ready')
+  useEffect(() => {
+    let finished = false
+    let shown = false
+    const navigate = () => {
+      if (!ready || finished) return
+      if (!shown) {
+        shown = true
+        queueMicrotask(() => { if (shown) openSettings() })
+      }
+      if (!slots.entries('settings.section').some(entry => entry.options.id === section)) return
+      const openSection = sectionNavigator(slots)
+      if (!openSection) return
+      finished = true
+      // The official shell closes settings when its initial session snapshot
+      // introduces onboarding. Navigate after that render's effects, not before it.
+      queueMicrotask(() => {
+        if (!finished) return
+        openSection(section)
+        finish()
+      })
+    }
+    // Subscribe before inspecting: sections may arrive after the shell mounts.
+    const offSections = slots.subscribe('settings.section', navigate)
+    const offShell = slots.subscribe('sidebar.settings', navigate)
+    navigate()
+    return () => {
+      finished = false
+      shown = false
+      offSections()
+      offShell()
+    }
+  }, [section, slots, finish, openSettings, ready])
+
+  return null
+}
+
+/** Returns false on ordinary desktop windows, leaving all existing registrations intact. */
+export function installHostUi(ctx: ClientContext): boolean {
+  const query = new URLSearchParams(window.location.search)
+  if (query.get('pocket-ui') !== '1') return false
+  ctx.effect(() => installHostUiStyles(), 'pocket:host-ui-styles')
+  const section = query.get('section')
+  // Without a deep link keep the entire official client, including its account launcher.
+  if (!section) return true
+  let completed = false
+  ctx.inject(['sessions'], (scope) => {
+    scope.slots.inject('settings.launcher', () => {
+      if (completed) return
+      const finish = () => {
+        completed = true
+        unregister()
+      }
+      const unregister = scope.slots.register({
+        name: 'settings.launcher',
+        priority: -100,
+        inject: () => ({ section, slots: scope.slots, finish, hooks: { sessionReadiness: scope.sessions.list } }),
+      }, HostUiLauncher)
+      return unregister
+    })
+  })
+  return true
+}

package/src/client/ManagePanel.tsx

@@ -0,0 +1,218 @@
+import { useCallback, useEffect, useRef, useState, type JSX } from 'react'
+import type { DeviceRow, NetworkType, PocketApi, PocketStatus } from './api.ts'
+import { ConfirmDialog } from './ConfirmDialog.tsx'
+import { qrSvg } from './qr.ts'
+import { panelCss, styles } from './styles.ts'
+
+type TFn = (key: string, vars?: Record<string, string | number>) => string
+
+function Icon({ name, size = 18 }: { name: 'phone' | 'copy' | 'refresh' | 'plus' | 'check', size?: number }): JSX.Element {
+  const paths = {
+    phone: <><rect x="6" y="2" width="12" height="20" rx="3" /><path d="M11 18h2" /></>,
+    copy: <><rect x="8" y="8" width="12" height="14" rx="2" /><path d="M15 4V2H4v14h1" /></>,
+    refresh: <><path d="M20 7a9 9 0 1 0 0 10M20 2v5h-5" /></>,
+    plus: <path d="M12 4v16M4 12h16" />,
+    check: <path d="m5 12 4 4L19 6" />,
+  }
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{paths[name]}</svg>
+}
+
+function StatusDot({ state }: { state: 'done' | 'error' | 'idle' }): JSX.Element {
+  return <span style={styles.stateDotSlot(state)} aria-hidden="true"><span style={styles.stateDotCore} /></span>
+}
+
+function DeviceItem({ device, t, api, onChanged, onError }: {
+  device: DeviceRow
+  t: TFn
+  api: PocketApi
+  onChanged: (devices: DeviceRow[]) => void
+  onError: (message: string) => void
+}): JSX.Element {
+  const [editing, setEditing] = useState(false)
+  const [name, setName] = useState(device.name)
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [busy, setBusy] = useState(false)
+  useEffect(() => { setName(device.name) }, [device.name])
+
+  const save = async () => {
+    const trimmed = name.trim()
+    if (!trimmed || trimmed === device.name) { setEditing(false); return }
+    setBusy(true)
+    try {
+      const r = await api.rename(device.id, trimmed)
+      onChanged(r.devices)
+      setEditing(false)
+    } catch (e) { onError(String((e as Error)?.message ?? e)) }
+    finally { setBusy(false) }
+  }
+  const revoke = async () => {
+    setBusy(true)
+    try {
+      const r = await api.revoke(device.id)
+      onChanged(r.devices)
+      setConfirmOpen(false)
+    } catch (e) { onError(String((e as Error)?.message ?? e)) }
+    finally { setBusy(false) }
+  }
+  const lastSeen = device.lastSeenAt == null ? t('neverSeen') : new Date(device.lastSeenAt).toLocaleString(undefined, {
+    month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false,
+  })
+
+  return <div style={styles.deviceRow}>
+    <div style={styles.deviceIcon}><Icon name="phone" size={28} /></div>
+    <div style={styles.deviceInfo}>
+      {editing ? <input style={styles.input} aria-label={t('rename')} value={name} disabled={busy}
+        onChange={(e) => setName(e.target.value)} autoFocus
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') void save()
+          if (e.key === 'Escape') { setEditing(false); setName(device.name) }
+        }} /> : <div style={styles.deviceHeading}>
+          <span style={styles.deviceName} title={device.name}>{device.name}</span>
+          <span style={styles.service}><StatusDot state={device.online ? 'done' : 'idle'} />{device.online ? t('online') : t('offline')}</span>
+        </div>}
+      <div style={styles.deviceMeta}>{t('lastSeen')} {lastSeen}</div>
+    </div>
+    <div className="pocket-device-actions" style={styles.deviceActions}>
+      {editing ? <>
+        <button type="button" style={styles.outlineBtnSm} disabled={busy} onClick={() => void save()}>{t('renameSave')}</button>
+        <button type="button" style={styles.textBtn} disabled={busy} onClick={() => { setEditing(false); setName(device.name) }}>{t('renameCancel')}</button>
+      </> : <>
+        <button type="button" style={styles.textBtn} disabled={busy} onClick={() => setEditing(true)}>{t('rename')}</button>
+        <span style={styles.divider} />
+        <button type="button" style={styles.textBtn} disabled={busy} onClick={() => setConfirmOpen(true)}>{t('revoke')}</button>
+      </>}
+    </div>
+    <ConfirmDialog open={confirmOpen} title={t('revokeTitle')}
+      body={t('revokeBody', { name: device.name }).replaceAll('{name}', device.name)} cancelLabel={t('cancel')}
+      confirmLabel={t('revoke')} busy={busy} onCancel={() => { if (!busy) setConfirmOpen(false) }} onConfirm={() => void revoke()} />
+  </div>
+}
+
+export function ManagePanel({ t, api }: { t: TFn, api: PocketApi }): JSX.Element {
+  const [status, setStatus] = useState<PocketStatus | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [busy, setBusy] = useState(false)
+  const [copied, setCopied] = useState<string | null>(null)
+  const network = useRef<NetworkType | undefined>(undefined)
+  const request = useRef(0)
+  const copyTimer = useRef<number | undefined>(undefined)
+
+  const refresh = useCallback(async (background = false) => {
+    const id = ++request.current
+    if (!background) setLoading(true)
+    try {
+      const s = await api.status(network.current)
+      if (id !== request.current) return
+      setStatus(s)
+      setError(null)
+    } catch (e) {
+      if (id !== request.current) return
+      setStatus(null)
+      setError(String((e as Error)?.message ?? e))
+    } finally { if (id === request.current) setLoading(false) }
+  }, [api])
+
+  useEffect(() => {
+    void refresh()
+    return () => { request.current++; clearTimeout(copyTimer.current) }
+  }, [refresh])
+  useEffect(() => {
+    if (!status?.pairing.open) return
+    const timer = setInterval(() => { void refresh(true) }, 1000)
+    return () => clearInterval(timer)
+  }, [status?.pairing.open, refresh])
+
+  const changeNetwork = (next: NetworkType) => {
+    network.current = next
+    setCopied(null)
+    // Hide the old QR immediately; it must never appear under a new selection.
+    setStatus((s) => s ? { ...s, pairing: { open: false } } : s)
+    void refresh()
+  }
+  const updatePairing = async (open: boolean) => {
+    setBusy(true)
+    setError(null)
+    try {
+      if (open) await api.openPair(network.current)
+      else await api.closePair()
+      await refresh()
+    } catch (e) { setError(String((e as Error)?.message ?? e)) }
+    finally { setBusy(false) }
+  }
+  const copy = async (text: string, key: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      clearTimeout(copyTimer.current)
+      setCopied(key)
+      copyTimer.current = window.setTimeout(() => setCopied(null), 1500)
+    } catch (e) { setError(String((e as Error)?.message ?? e)) }
+  }
+
+  const pairing = status?.pairing
+  const selected = status?.connectionType
+  const pairReady = Boolean(status?.running && status.networks.length && status.host)
+  const pairingOpen = Boolean(pairReady && pairing?.open && pairing.code && pairing.uri)
+  const address = status?.host ? `${status.host}:${status.port}` : ''
+  const disabled = loading || busy
+
+  return <div data-pocket-panel style={styles.settingsRoot}>
+    <style>{panelCss}</style>
+    <header style={styles.header}>
+      <h2 style={styles.title}>{t('title')}</h2>
+      <span style={styles.service}><StatusDot state={pairReady ? 'done' : 'idle'} />{loading && !status ? t('loading') : t(pairReady ? 'statusRunning' : 'statusStopped')}</span>
+    </header>
+    {error ? <div role="alert" style={styles.errorText}>{error}</div> : null}
+    <section style={styles.pairingCard} aria-label={t('newDevice')}>
+      <div style={{ ...styles.pairingTop, ...(pairingOpen ? { minHeight: 0 } : {}) }}>
+        <div style={styles.pairControls}>
+          <h3 style={styles.rowTitle}>{t('newDevice')}</h3>
+          {status && status.networks.length > 1 ? <div style={styles.segments} role="group" aria-label={t('network')}>
+            {status.networks.map((n) => <button type="button" key={n.type} aria-pressed={selected === n.type}
+              style={{ ...styles.segment, ...(selected === n.type ? styles.segmentActive : {}) }} disabled={disabled}
+              onClick={() => changeNetwork(n.type)}>{t(n.type)}</button>)}
+          </div> : null}
+          {!pairingOpen ? <button type="button" style={styles.primaryBtn} disabled={disabled || !pairReady} onClick={() => void updatePairing(true)}>
+            <Icon name="plus" />{t('pair')}
+          </button> : null}
+        </div>
+        {!pairingOpen ? <svg className="pocket-illustration" style={styles.illustration} viewBox="0 0 180 130" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <path d="M20 94V22a8 8 0 0 1 8-8h105a8 8 0 0 1 8 8v11M121 94H7v8h114" />
+          <rect x="132" y="43" width="40" height="75" rx="8" /><path d="M148 50h9m-8 59h7" />
+        </svg> : null}
+      </div>
+      {pairingOpen ? <div style={styles.pairingContent}>
+        <div style={styles.qrBox} role="img" aria-label={t('code')} dangerouslySetInnerHTML={{ __html: qrSvg(pairing!.uri!, 168) }} />
+        <div>
+          <div style={styles.code}>{pairing!.code}</div>
+          <p style={styles.hint}>{t('expiresIn', { n: Math.max(0, pairing!.expiresInSec ?? 0) })}</p>
+          <div style={styles.actionRow}>
+            <button type="button" style={styles.outlineBtn} onClick={() => void copy(pairing!.pairingString || pairing!.uri!, 'pair')}>{t(copied === 'pair' ? 'copied' : 'copy')}</button>
+            <button type="button" style={styles.textBtn} disabled={disabled} onClick={() => void updatePairing(false)}>{t('pairClose')}</button>
+            <button type="button" style={styles.textBtn} disabled={disabled} onClick={() => void updatePairing(true)}>{t('pairAgain')}</button>
+          </div>
+        </div>
+      </div> : null}
+      <footer style={styles.footer}>
+        <div style={styles.address}>
+          {address ? <>
+            <span>{t(selected === 'tailscale' ? 'tailscaleAddress' : 'lanAddress')}</span>
+            <code style={styles.addressValue}>{address}</code>
+            <button type="button" style={styles.iconBtn} title={t(copied === 'address' ? 'copied' : 'copyAddress')} aria-label={t(copied === 'address' ? 'copied' : 'copyAddress')} onClick={() => void copy(address, 'address')}><Icon name={copied === 'address' ? 'check' : 'copy'} size={16} /></button>
+          </> : <span>{t(loading ? 'loading' : 'noNetwork')}</span>}
+        </div>
+        <div style={styles.footerActions}>
+          <button type="button" style={styles.iconBtn} disabled={disabled} title={t('refresh')} aria-label={t('refresh')}
+            onClick={() => { if (!status) network.current = undefined; void refresh() }}><Icon name="refresh" /></button>
+        </div>
+      </footer>
+    </section>
+    <section style={styles.devicesSection} aria-label={t('devices')}>
+      <div style={styles.devicesHeader}><h3 style={styles.rowTitle}>{t('devices')}</h3><span style={styles.count}>{status?.devices.length ?? 0}</span></div>
+      <div style={styles.deviceList}>
+        {status?.devices.length ? status.devices.map((device) => <DeviceItem key={device.id} device={device} t={t} api={api} onError={setError}
+          onChanged={(devices) => setStatus((s) => s ? { ...s, devices } : s)} />) : <p style={styles.hint}>{t(loading ? 'loading' : 'empty')}</p>}
+      </div>
+    </section>
+  </div>
+}

package/src/client/PhoneIcon.tsx

@@ -0,0 +1,48 @@
+import type { JSX } from 'react'
+
+/** Matches dsh ui-primitives Medium outline icons: 16×16 viewBox, 1.3 stroke. */
+export const ICON_MEDIUM_STROKE = 1.3
+
+/**
+ * Smartphone outline glyph for the Settings nav row.
+ * dsh's icon set has no phone/smartphone export; this follows the same
+ * Medium outline conventions (size/stroke/currentColor) used by
+ * IconSettingsOutlineMedium and neighbors.
+ */
+export function PhoneIcon({
+  size = 16,
+  className,
+  strokeWidth = ICON_MEDIUM_STROKE,
+}: {
+  size?: number
+  className?: string
+  strokeWidth?: number
+}): JSX.Element {
+  return (
+    <svg
+      width={size}
+      height={size}
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      strokeWidth={strokeWidth}
+    >
+      <rect x="4.75" y="1.75" width="6.5" height="12.5" rx="1.25" stroke="currentColor" />
+      <path d="M7 12.25h2" stroke="currentColor" strokeLinecap="round" />
+    </svg>
+  )
+}
+
+/** Markup used when swapping the shell's default gear in the nav cell. */
+export function phoneIconSvgHtml(className: string): string {
+  return (
+    `<svg width="16" height="16" class="${className}" viewBox="0 0 16 16" fill="none" ` +
+    `xmlns="http://www.w3.org/2000/svg" aria-hidden="true" stroke-width="${ICON_MEDIUM_STROKE}" ` +
+    `data-pocket-icon="1">` +
+    `<rect x="4.75" y="1.75" width="6.5" height="12.5" rx="1.25" stroke="currentColor"></rect>` +
+    `<path d="M7 12.25h2" stroke="currentColor" stroke-linecap="round"></path>` +
+    `</svg>`
+  )
+}