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

package/src/client/PocketSettings.tsx

@@ -0,0 +1,13 @@
+import type { JSX } from 'react'
+import type { PocketApi } from './api.ts'
+import { ManagePanel } from './ManagePanel.tsx'
+
+export function PocketSettings({
+  t, api,
+}: {
+  t: (key: string, vars?: Record<string, string | number>) => string
+  api: PocketApi
+  close: () => void
+}): JSX.Element {
+  return <ManagePanel t={t} api={api} />
+}

package/src/client/api.ts

@@ -0,0 +1,97 @@
+export type NetworkType = 'lan' | 'tailscale'
+
+export type PairingStatus = {
+  open: boolean
+  code?: string
+  expiresInSec?: number
+  attemptsLeft?: number
+  transport?: 'tailscale'
+  host?: string
+  port?: number
+  uri?: string
+  pairingString?: string
+  error?: string
+}
+
+export type DeviceRow = {
+  id: string
+  name: string
+  createdAt: number
+  lastSeenAt: number | null
+  online: boolean
+}
+
+export type PocketStatus = {
+  running: boolean
+  version: string
+  plugin: string
+  /** Phone path is always host:port WebSocket. */
+  transport?: 'tailscale'
+  host: string
+  port: number
+  connectionType: NetworkType | null
+  networks: Array<{ type: NetworkType, host: string }>
+  listen: Array<{ host: string, port: number, address: string }>
+  pairing: PairingStatus
+  devices: DeviceRow[]
+}
+
+export interface PocketApi {
+  status(network?: NetworkType): Promise<PocketStatus>
+  pairStatus(network?: NetworkType): Promise<PairingStatus>
+  openPair(network?: NetworkType): Promise<PairingStatus>
+  closePair(): Promise<{ open: false }>
+  listDevices(): Promise<DeviceRow[]>
+  revoke(id: string): Promise<{ removed: boolean, devices: DeviceRow[] }>
+  rename(id: string, name: string): Promise<{ renamed: boolean, devices: DeviceRow[] }>
+}
+
+async function readBody(res: Response): Promise<unknown> {
+  if (typeof res?.json === 'function') {
+    try { return await res.json() } catch { /* fall through */ }
+  }
+  if (typeof res?.text === 'function') {
+    try { return await res.text() } catch { /* fall through */ }
+  }
+  return undefined
+}
+
+async function parse<T>(res: Response): Promise<T> {
+  if (!res || res.ok !== true) {
+    const body = await readBody(res)
+    const detail = body === undefined
+      ? `HTTP ${res?.status ?? '?'}`
+      : (typeof body === 'string' ? body : JSON.stringify(body))
+    throw new Error(detail || `HTTP ${res?.status ?? '?'}`)
+  }
+  return (await readBody(res)) as T
+}
+
+/** Same-origin fetch helpers for the Host management routes. */
+export function createPocketApi(base = ''): PocketApi {
+  const get = async <T>(path: string, init?: RequestInit) => parse<T>(await fetch(`${base}${path}`, init))
+  const networkPath = (path: string, network?: NetworkType) => network ? `${path}?network=${network}` : path
+  return {
+    status: (network?: NetworkType) => get<PocketStatus>(networkPath('/pocket/status', network)),
+    pairStatus: (network?: NetworkType) => get<PairingStatus>(networkPath('/pocket/pair', network)),
+    openPair: (network?: NetworkType) => get<PairingStatus>(
+      networkPath('/pocket/pair', network), { method: 'POST' },
+    ),
+    closePair: () => get<{ open: false }>('/pocket/pair', { method: 'DELETE' }),
+    listDevices: () => get<{ devices: DeviceRow[] }>('/pocket/devices').then((r) => r.devices),
+    revoke: (id: string) => get<{ removed: boolean, devices: DeviceRow[] }>(
+      '/pocket/devices', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ id }),
+      },
+    ),
+    rename: (id: string, name: string) => get<{ renamed: boolean, devices: DeviceRow[] }>(
+      '/pocket/devices', {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ id, name }),
+      },
+    ),
+  }
+}

package/src/client/completion-sync.js

@@ -0,0 +1,289 @@
+/** Overlay Host unread onto official sessionStatus; Host is source of truth for the green-dot bit. */
+export function overlayCompletionUnread(official, unread) {
+  const next = new Map()
+  const ids = new Set(unread)
+  if (official && typeof official.keys === 'function') {
+    for (const id of official.keys()) ids.add(id)
+  }
+  for (const id of ids) {
+    const base = official?.get?.(id)
+    next.set(id, {
+      running: base?.running,
+      pendingInteraction: base?.pendingInteraction,
+      completionUnread: unread.has(id),
+    })
+  }
+  return next
+}
+
+/**
+ * Official ui-session@0.2.1-alpha.2 has no setCompletionUnreadSource. Its public
+ * sessionStatus HostObservable (and the instance listener Set it closes over)
+ * is the mounted extension point: keep running/pending from official, replace
+ * completionUnread with the Host snapshot, and notify the same subscribers
+ * StateDot already uses. Keep the derived snapshot stable until either input
+ * snapshot changes. Missing that surface is a hard error — do not no-op.
+ */
+export function overlaySessionStatusCompletionUnread(sessionStatus, source, listenerSet) {
+  if (!sessionStatus || typeof sessionStatus.getSnapshot !== 'function' || typeof sessionStatus.subscribe !== 'function') {
+    throw new Error('uiSession.sessionStatus is not an overlayable HostObservable')
+  }
+  if (!(listenerSet instanceof Set)) {
+    throw new Error('uiSession status listeners are not reachable; cannot sync completion unread')
+  }
+  const origGet = sessionStatus.getSnapshot.bind(sessionStatus)
+  let official = origGet()
+  let unread = source.getSnapshot()
+  let snapshot = overlayCompletionUnread(official, unread)
+  sessionStatus.getSnapshot = () => {
+    const nextOfficial = origGet()
+    const nextUnread = source.getSnapshot()
+    if (nextOfficial !== official || nextUnread !== unread) {
+      official = nextOfficial
+      unread = nextUnread
+      snapshot = overlayCompletionUnread(official, unread)
+    }
+    return snapshot
+  }
+  const notify = () => {
+    for (const listener of [...listenerSet]) listener()
+  }
+  const off = source.subscribe(notify)
+  notify()
+  return () => {
+    off()
+    sessionStatus.getSnapshot = origGet
+  }
+}
+
+/** Prefer an official hook when present; otherwise overlay mounted sessionStatus. */
+export function bindCompletionUnreadSource(uiSession, source) {
+  if (typeof uiSession?.setCompletionUnreadSource === 'function') {
+    return uiSession.setCompletionUnreadSource(source)
+  }
+  return overlaySessionStatusCompletionUnread(
+    uiSession?.sessionStatus,
+    source,
+    uiSession?.statusListeners,
+  )
+}
+
+/** Host completion snapshots and view presence, independent of rendering and transport mocks. */
+export function createCompletionSync({ connect, postView, installSource, visibleSession, reportError = console.error }) {
+  let snapshot
+  let unread = new Set()
+  const listeners = new Set()
+  const source = {
+    getSnapshot: () => unread,
+    subscribe: listener => { listeners.add(listener); return () => listeners.delete(listener) },
+  }
+  let uninstall
+  let clientId = null
+  let generation = 0
+  let disposed = false
+  let suspended = false
+  let stream
+  let carrier = 0
+  let desired
+  let queue = []
+  let pending
+  const accept = (value, allowEpoch) => {
+    if (!value || typeof value.epoch !== 'string' || !value.epoch
+      || !Number.isSafeInteger(value.revision) || value.revision < 0
+      || !Array.isArray(value.unreadIds) || value.unreadIds.some(id => typeof id !== 'string' || !id)) {
+      throw new Error('Invalid completion snapshot')
+    }
+    if (snapshot?.epoch !== value.epoch && snapshot && !allowEpoch) return false
+    if (snapshot?.epoch === value.epoch && snapshot.revision > value.revision) return false
+    if (snapshot?.epoch !== value.epoch || snapshot?.revision !== value.revision) {
+      snapshot = value
+      unread = new Set(value.unreadIds)
+      for (const listener of listeners) listener()
+    }
+    return true
+  }
+  const disconnect = () => {
+    generation++
+    clientId = null
+    desired = undefined
+    queue = []
+    pending?.controller.abort()
+    pending = undefined
+  }
+  const drain = async () => {
+    if (disposed || !clientId || pending || !queue.length) return
+    const request = { generation, controller: new AbortController() }
+    pending = request
+    const id = clientId
+    const sessionId = queue.shift()
+    let received = false
+    try {
+      const value = await postView(id, sessionId, request.controller.signal)
+      received = true
+      if (!disposed && generation === request.generation && clientId === id) accept(value, false)
+    } catch (error) {
+      if (!disposed && generation === request.generation) {
+        // An acknowledgement may have committed before its response was lost.
+        // Release its presence and obtain a new stream baseline before retrying.
+        disconnect()
+        carrier++
+        stream.close()
+        reportError(error)
+        if (!received) openStream()
+      }
+    } finally {
+      if (pending === request) {
+        pending = undefined
+        void drain()
+      }
+    }
+  }
+  const updateView = () => {
+    if (disposed || !clientId) return
+    const next = visibleSession()
+    if (next === desired) return
+    desired = next
+    queue.push(next)
+    void drain()
+  }
+  const openStream = () => {
+    const token = ++carrier
+    stream = connect({
+      message(value) {
+        if (disposed || suspended || token !== carrier) return
+        try {
+          if (typeof value?.clientId !== 'string' || !value.clientId) throw new Error('Invalid completion client identity')
+          if (clientId !== null && clientId !== value.clientId) return
+          if (!accept(value, clientId === null)) return
+          clientId = value.clientId
+          if (!uninstall) uninstall = installSource(source)
+          updateView()
+        } catch (error) {
+          disconnect()
+          carrier++
+          stream.close()
+          reportError(error)
+        }
+      },
+      disconnect() {
+        if (!disposed && !suspended && token === carrier) disconnect()
+      },
+    })
+  }
+  openStream()
+  return {
+    updateView,
+    suspend() {
+      if (disposed || suspended) return
+      suspended = true
+      disconnect()
+      carrier++
+      stream.close()
+    },
+    resume() {
+      if (disposed || !suspended) return
+      suspended = false
+      openStream()
+    },
+    dispose() {
+      if (disposed) return
+      disposed = true
+      disconnect()
+      stream.close()
+      uninstall?.()
+      listeners.clear()
+    },
+  }
+}
+
+/** Observe only already-retained, loaded main-view content; never open or select a Session. */
+export function installCompletionSync({ uiSession, sessions, layout, slots, window: win = window, document: doc = document, fetch: request = fetch, EventSource: Events = EventSource, reportError = console.error }) {
+  let binding
+  let settings
+  let offSession = () => {}
+  let offRetain = () => {}
+  let offSettings = () => {}
+  const visibleSession = () => {
+    if (doc.visibilityState !== 'visible' || !doc.hasFocus() || sessions.list.getSnapshot().phase !== 'ready') return null
+    if (layout.panelInfo.getSnapshot().activePanelId !== null || settings?.getSnapshot().open) return null
+    if (!binding || (sessions.retainInfo(binding.sessionId).getSnapshot().retainedBy.mainView ?? 0) <= 0) return null
+    const state = binding.session.getSnapshot()
+    return state.openState === 'open' && !state.removed ? binding.sessionId : null
+  }
+  const sync = createCompletionSync({
+    visibleSession,
+    reportError,
+    installSource: source => bindCompletionUnreadSource(uiSession, source),
+    connect({ message, disconnect }) {
+      const events = new Events('/pocket/completion/events')
+      events.onmessage = event => {
+        try { message(JSON.parse(event.data)) } catch (error) {
+          disconnect()
+          events.close()
+          reportError(error)
+        }
+      }
+      events.onerror = disconnect
+      return { close: () => events.close() }
+    },
+    async postView(clientId, sessionId, signal) {
+      const response = await request('/pocket/completion/view', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ clientId, sessionId }),
+        signal,
+      })
+      if (!response.ok) throw new Error(`Completion view failed: HTTP ${response.status}`)
+      return response.json()
+    },
+  })
+  const watchMain = () => {
+    const id = uiSession.adapter.current.getSnapshot().key
+    const next = id === undefined ? undefined : sessions.binding(id)
+    if (next !== binding) {
+      offSession()
+      offRetain()
+      binding = next
+      offSession = binding ? binding.session.subscribe(sync.updateView) : () => {}
+      offRetain = binding ? sessions.retainInfo(binding.sessionId).subscribe(sync.updateView) : () => {}
+    }
+    sync.updateView()
+  }
+  const watchSettings = () => {
+    const owner = slots.entries('sidebar.settings').find(entry => entry.children?.['settings.launcher'])
+    // SettingsRoot publishes this root-scoped instance for its launcher and shortcuts.
+    const next = owner?.store?.create()
+    if (next !== settings) {
+      offSettings()
+      settings = next
+      offSettings = settings ? settings.subscribe(sync.updateView) : () => {}
+    }
+    sync.updateView()
+  }
+  const offMain = uiSession.adapter.current.subscribe(watchMain)
+  const offList = sessions.list.subscribe(watchMain)
+  const offSettingsOwner = slots.subscribe('sidebar.settings', watchSettings)
+  const offPanel = layout.panelInfo.subscribe(sync.updateView)
+  doc.addEventListener('visibilitychange', sync.updateView)
+  win.addEventListener('focus', sync.updateView)
+  win.addEventListener('blur', sync.updateView)
+  win.addEventListener('pagehide', sync.suspend)
+  win.addEventListener('pageshow', sync.resume)
+  watchSettings()
+  watchMain()
+  return () => {
+    offMain()
+    offList()
+    offSettingsOwner()
+    offSettings()
+    offPanel()
+    offSession()
+    offRetain()
+    doc.removeEventListener('visibilitychange', sync.updateView)
+    win.removeEventListener('focus', sync.updateView)
+    win.removeEventListener('blur', sync.updateView)
+    win.removeEventListener('pagehide', sync.suspend)
+    win.removeEventListener('pageshow', sync.resume)
+    sync.dispose()
+  }
+}

package/src/client/host-ui-styles.ts

@@ -0,0 +1,62 @@
+/** Scoped to this WebView window; no generated classes or plugin-specific selectors. */
+const css = `
+@media (max-width: 700px) {
+  html[data-pocket-ui] [data-shortcut-modal="settings"] {
+    box-sizing: border-box;
+    flex-direction: column;
+    width: 100%;
+    max-width: 100%;
+    height: 100dvh;
+    max-height: 100dvh;
+    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+    border-radius: 0;
+  }
+  html[data-pocket-ui] [data-shortcut-modal="settings"] > nav {
+    width: 100%;
+    min-width: 0;
+    padding: 12px 12px 0;
+    gap: 8px;
+    border-bottom: 1px solid var(--dsw-alias-border-l2);
+  }
+  html[data-pocket-ui] [data-shortcut-modal="settings"] > nav > div:last-child {
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-bottom: 8px;
+    overscroll-behavior-x: contain;
+  }
+  html[data-pocket-ui] [data-shortcut-modal="settings"] > nav button {
+    flex: 0 0 auto;
+    min-height: 44px;
+    white-space: nowrap;
+  }
+  html[data-pocket-ui] [data-shortcut-modal="settings"] > nav + div {
+    min-width: 0;
+    min-height: 0;
+    width: 100%;
+  }
+  html[data-pocket-ui] [data-shortcut-modal="settings"] > nav + div > div:last-child {
+    min-width: 0;
+    min-height: 0;
+    padding-left: 16px;
+    padding-right: 16px;
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+}
+`
+
+export function installHostUiStyles(): () => void {
+  const root = document.documentElement
+  const previous = root.getAttribute('data-pocket-ui')
+  const style = document.createElement('style')
+  style.dataset.pocketUiStyles = ''
+  style.textContent = css
+  root.setAttribute('data-pocket-ui', '')
+  document.head.append(style)
+  return () => {
+    style.remove()
+    if (previous === null) root.removeAttribute('data-pocket-ui')
+    else root.setAttribute('data-pocket-ui', previous)
+  }
+}

package/src/client/index.ts

@@ -0,0 +1,47 @@
+/**
+ * Official desktop pairing section, or the complete Host client in a phone
+ * WebView. pocket-ui is a window-local presentation flag, not authentication.
+ * Phone windows never register the loopback-only pairing management page.
+ * All other plugin sections and provider extensions stay with their owners.
+ */
+import type { Context as ClientContext } from '@deepseek-ai/cordis'
+import { createPocketApi } from './api.ts'
+import { zh, en } from './locales.ts'
+import { installPocketNavIcon } from './nav-icon.ts'
+import { PocketSettings } from './PocketSettings.tsx'
+import { installHostUi } from './HostUiLauncher.tsx'
+import { installCompletionSync } from './completion-sync.js'
+
+/** Must be a static array — cordis rejects function-form inject. */
+export const inject = ['slots', 'locale'] as const
+
+const NS = 'pocket'
+
+export function apply(ctx: ClientContext): void {
+  // The phone proxy excludes management routes; its native client owns presence.
+  if (installHostUi(ctx)) return
+  ctx.inject(['uiSession', 'sessions', 'layout'], (scope) => {
+    const uiSession = scope.get('uiSession')
+    const sessions = scope.get('sessions')
+    scope.effect(() => installCompletionSync({
+      uiSession, sessions, layout: scope.get('layout'), slots: scope.slots,
+    }), 'pocket:completion-sync')
+  })
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'pocket:locale')
+  ctx.effect(() => installPocketNavIcon(), 'pocket:nav-icon')
+  const t = ctx.locale.bind(NS)
+  const api = createPocketApi()
+
+  ctx.slots.inject('settings.section', () =>
+    ctx.slots.register(
+      {
+        name: 'settings.section',
+        id: 'pocket',
+        order: 55,
+        label: () => t('entry'),
+        locale: NS,
+        inject: () => ({ api }),
+      },
+      PocketSettings,
+    ))
+}

package/src/client/locales.ts

@@ -0,0 +1,75 @@
+export const zh = {
+  entry: '手机连接',
+  title: '手机连接',
+  statusRunning: '服务就绪',
+  statusStopped: '服务未就绪',
+  newDevice: '连接新设备',
+  network: '连接网络',
+  lan: '局域网',
+  tailscale: 'Tailscale',
+  lanAddress: '局域网地址',
+  tailscaleAddress: 'Tailscale 地址',
+  noNetwork: '没有可用的网络地址',
+  pair: '开始配对',
+  pairAgain: '重新配对',
+  pairClose: '关闭配对',
+  code: '配对码',
+  expiresIn: '{n} 秒后过期',
+  copy: '复制配对链接',
+  copyAddress: '复制地址',
+  copied: '已复制',
+  devices: '已配对设备',
+  empty: '暂无已配对设备',
+  online: '在线',
+  offline: '离线',
+  lastSeen: '上次在线',
+  neverSeen: '尚未连接',
+  rename: '重命名',
+  renameSave: '保存',
+  renameCancel: '取消',
+  revoke: '解除配对',
+  revokeTitle: '解除配对',
+  revokeBody: '解除与「{name}」的配对？该手机需重新配对才能连接。',
+  cancel: '取消',
+  loading: '加载中…',
+  refresh: '刷新',
+} as const
+
+export const en = {
+  entry: 'Phone connection',
+  title: 'Phone connection',
+  statusRunning: 'Service ready',
+  statusStopped: 'Service unavailable',
+  newDevice: 'Connect a device',
+  network: 'Connection network',
+  lan: 'LAN',
+  tailscale: 'Tailscale',
+  lanAddress: 'LAN address',
+  tailscaleAddress: 'Tailscale address',
+  noNetwork: 'No network address available',
+  pair: 'Start pairing',
+  pairAgain: 'Pair again',
+  pairClose: 'Close pairing',
+  code: 'Pairing code',
+  expiresIn: 'Expires in {n}s',
+  copy: 'Copy pairing link',
+  copyAddress: 'Copy address',
+  copied: 'Copied',
+  devices: 'Paired devices',
+  empty: 'No paired devices',
+  online: 'Online',
+  offline: 'Offline',
+  lastSeen: 'Last online',
+  neverSeen: 'Never connected',
+  rename: 'Rename',
+  renameSave: 'Save',
+  renameCancel: 'Cancel',
+  revoke: 'Unpair',
+  revokeTitle: 'Unpair device',
+  revokeBody: 'Unpair “{name}”? The phone will need to pair again to reconnect.',
+  cancel: 'Cancel',
+  loading: 'Loading…',
+  refresh: 'Refresh',
+} as const
+
+export type PocketLocaleKey = keyof typeof zh

package/src/client/nav-icon.ts

@@ -0,0 +1,31 @@
+import { phoneIconSvgHtml } from './PhoneIcon.tsx'
+
+const LABELS = new Set(['手机连接', 'Phone connection'])
+
+/**
+ * Settings nav icons are hardcoded by section id in
+ * `@deepseek-ai/dsh-client-ui-settings-general` (`navIcon`): unknown ids fall
+ * back to the gear. `settings.section` has no `icon` register option, and the
+ * primitives icon set has no phone glyph. Swap the gear SVG on our nav cell
+ * for a Medium-outline smartphone that matches shipped stroke/size.
+ */
+export function installPocketNavIcon(): () => void {
+  const sync = () => {
+    for (const cell of document.querySelectorAll<HTMLElement>('[class*="navCell"]')) {
+      const label = (cell.innerText || '').trim()
+      if (!LABELS.has(label)) continue
+      const svg = cell.querySelector('svg')
+      if (!svg || svg.getAttribute('data-pocket-icon') === '1') continue
+      const cls = svg.getAttribute('class') || ''
+      const wrap = document.createElement('span')
+      wrap.innerHTML = phoneIconSvgHtml(cls)
+      const next = wrap.firstElementChild
+      if (next) svg.replaceWith(next)
+    }
+  }
+
+  const mo = new MutationObserver(() => sync())
+  mo.observe(document.documentElement, { childList: true, subtree: true, characterData: true })
+  sync()
+  return () => mo.disconnect()
+}

package/src/client/qr.ts

@@ -0,0 +1,15 @@
+import { renderSVG } from 'uqr'
+
+/** Render a pairing URI as an SVG QR string. */
+export function qrSvg(text: string, size = 180): string {
+  const svg = renderSVG(text, {
+    ecc: 'M',
+    pixelSize: 8,
+    border: 2,
+    blackColor: '#111',
+    whiteColor: '#fff',
+  })
+  // uqr emits viewBox-only <svg>; pin display size on the root element (do not
+  // rewrite the white <rect width/height>, which share the same attribute names).
+  return svg.replace('<svg ', `<svg width="${size}" height="${size}" `)
+}