@linxin666/dsh-remote-web-ui 0.1.1

package/src/mobile-api.ts

@@ -0,0 +1,271 @@
+/**
+ * The mobile surface's data channel: `/m/api` proxies the host ApiProxy
+ * service for the standalone phone page. The phone's RPC calls ride THIS
+ * prefix instead of the connection plugin's `/api` — so the tunneled Host
+ * never needs to enter the connection trust fence (a distributable plugin
+ * cannot change that fence), and this plugin's own pairing gate is the
+ * access control instead.
+ *
+ * Security model:
+ * - Every request must carry a live paired-device cookie (the same gate
+ *   semantic as the LAN fence), enforced before any host call.
+ * - Only an explicit allowlist of methods is proxied; privileged domains
+ *   (settings, credentials, host actions, goals, subagents, …) are never
+ *   reachable from the phone.
+ * - `session.list` is paged here (the host API returns everything; this
+ *   layer slices stable pages) so the phone never transfers the whole list.
+ * - The live mux stream is bridged over Server-Sent Events on the same
+ *   prefix (one-directional push; answers to questions/approvals ride the
+ *   unary channel), gated identically.
+ */
+
+import type { IncomingMessage, ServerResponse } from 'node:http'
+import type { WebRoute } from '@deepseek-ai/dsh-host-webserver'
+import type { ApiProxy } from '@deepseek-ai/dsh-host-apiproxy'
+import type { RpcRequest } from '@deepseek-ai/dsh-host-apiproxy/api/rpc'
+import { RpcId } from '@deepseek-ai/dsh-host-apiproxy/api/rpc'
+import type { PairingService } from './pairing.ts'
+import { readCookie } from './gate.ts'
+
+/** Methods the phone surface may call. Everything else is refused. */
+const MOBILE_ALLOWLIST = new Set([
+  'workspace.list',
+  'session.create',
+  'session.list',
+  'session.history',
+  'session.search',
+  'session.prompt',
+  'session.models',
+  'session.selectModel',
+  'session.rename',
+])
+
+/** One session.list page (thin phones load incrementally). */
+const SESSION_PAGE_SIZE = 20
+
+/** Encode one list position as an opaque continuation cursor. */
+function sessionListCursor(updatedAt: number, sessionId: string): string {
+  return `${updatedAt}:${sessionId}`
+}
+
+/** Parse a cursor; malformed cursors mean "start over" (safe failure mode). */
+function parseSessionListCursor(cursor: string): { updatedAt: number; sessionId: string } | undefined {
+  const separator = cursor.indexOf(':')
+  if (separator < 0) return undefined
+  const updatedAt = Number(cursor.slice(0, separator))
+  if (!Number.isFinite(updatedAt)) return undefined
+  return { updatedAt, sessionId: cursor.slice(separator + 1) }
+}
+
+/** Whether a row comes strictly after the cursor position. */
+function afterCursor(row: { updatedAt: number; sessionId: string }, position: { updatedAt: number; sessionId: string }): boolean {
+  return row.updatedAt < position.updatedAt
+    || (row.updatedAt === position.updatedAt && row.sessionId > position.sessionId)
+}
+
+/** Route-family dependencies. */
+export interface MobileApiDeps {
+  /** The pairing service (device gate + cookie name). */
+  service: PairingService
+  /** The host ApiProxy service (injected by the plugin). */
+  apiProxy: ApiProxy
+}
+
+/** Mobile API route paths. */
+export const MOBILE_API_PATHS = {
+  events: '/m/api/events.mux',
+} as const
+
+/** The mobile-api prefix (every other path under it is a method name). */
+const MOBILE_API_PREFIX = '/m/api'
+/** Method extraction: the prefix plus one slash. */
+const MOBILE_API_METHOD_PREFIX = `${MOBILE_API_PREFIX}/`
+
+/**
+ * Build the mobile data-channel routes.
+ * @param deps - pairing service + apiProxy.
+ * @returns the routes to register on webServer.
+ */
+export function makeMobileApiRoutes(deps: MobileApiDeps): WebRoute[] {
+  const { service, apiProxy } = deps
+
+  /** The phone gate: a live paired-device cookie, or nothing else proceeds. */
+  const gateOk = (req: IncomingMessage): boolean => {
+    const deviceId = readCookie(req.headers.cookie, service.config.cookieName)
+    return deviceId !== undefined && service.hasDevice(deviceId)
+  }
+
+  const writeJson = (res: ServerResponse, status: number, body: unknown): void => {
+    res.writeHead(status, { 'content-type': 'application/json; charset=utf-8' })
+    res.end(JSON.stringify(body))
+  }
+
+  const handleMethod = async (req: IncomingMessage, res: ServerResponse): Promise<void> => {
+    if (req.method !== 'POST') {
+      res.writeHead(405)
+      res.end()
+      return
+    }
+    if (!gateOk(req)) {
+      writeJson(res, 403, { ok: false, error: { code: 'unpaired', message: 'mobile session is not paired' } })
+      return
+    }
+    const pathname = new URL(req.url ?? '/', 'http://x').pathname
+    if (!pathname.startsWith(MOBILE_API_METHOD_PREFIX)) {
+      writeJson(res, 404, { ok: false, error: { code: 'not-found', message: 'unknown mobile api path' } })
+      return
+    }
+    const method = pathname.slice(MOBILE_API_METHOD_PREFIX.length)
+    if (!MOBILE_ALLOWLIST.has(method)) {
+      writeJson(res, 403, { ok: false, error: { code: 'forbidden', message: `method ${method} is not exposed to the mobile surface` } })
+      return
+    }
+    let envelope: unknown
+    try {
+      envelope = await readJsonBody(req)
+    } catch {
+      writeJson(res, 400, { ok: false, error: { code: 'bad-request', message: 'invalid json body' } })
+      return
+    }
+    const parsed = envelope as { rpcId?: unknown; payload?: unknown }
+    const rpcId = typeof parsed?.rpcId === 'string' ? parsed.rpcId : ''
+    if (rpcId === '') {
+      writeJson(res, 400, { ok: false, error: { code: 'bad-request', message: 'missing rpcId' } })
+      return
+    }
+    try {
+      const response = await dispatch(apiProxy, method, parsed?.payload, rpcId)
+      writeJson(res, 200, response)
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      writeJson(res, 200, {
+        type: 'server-response',
+        rpcId,
+        result: { ok: false, error: { code: 'internal', message } },
+      })
+    }
+  }
+
+  /** Bridge the host mux stream over SSE: one `data:` frame per mux frame. */
+  const handleEvents = async (req: IncomingMessage, res: ServerResponse): Promise<void> => {
+    if (req.method !== 'GET') {
+      res.writeHead(405)
+      res.end()
+      return
+    }
+    if (!gateOk(req)) {
+      res.writeHead(403)
+      res.end('forbidden')
+      return
+    }
+    res.writeHead(200, {
+      'content-type': 'text/event-stream; charset=utf-8',
+      'cache-control': 'no-cache',
+      connection: 'keep-alive',
+    })
+    const controller = new AbortController()
+    let closed = false
+    const heartbeat = setInterval(() => {
+      if (closed) return
+      try {
+        res.write(': ping\n\n')
+      } catch {
+        // The write failed; the close handler tears the subscription down.
+      }
+    }, 15_000)
+    const onClose = (): void => {
+      if (closed) return
+      closed = true
+      controller.abort()
+      clearInterval(heartbeat)
+    }
+    res.on('close', onClose)
+    req.on('close', onClose)
+    try {
+      const frames = apiProxy.events.mux({ rpcId: RpcId(`mobile-mux-${Date.now().toString(36)}`), payload: {} }, controller.signal)
+      for await (const frame of frames) {
+        if (closed) break
+        res.write(`data: ${JSON.stringify(frame)}\n\n`)
+      }
+    } catch {
+      // The stream ended or errored; the EventSource reconnects.
+    } finally {
+      controller.abort()
+      clearInterval(heartbeat)
+    }
+    if (!closed) res.end()
+  }
+
+  return [
+    { kind: 'prefix', path: MOBILE_API_PREFIX, handler: handleMethod },
+    { kind: 'exact', path: MOBILE_API_PATHS.events, handler: handleEvents },
+  ]
+}
+
+/** Read a request body as JSON (bounded). */
+async function readJsonBody(req: IncomingMessage): Promise<unknown> {
+  const chunks: Buffer[] = []
+  let size = 0
+  for await (const chunk of req) {
+    const buffer = chunk as Buffer
+    size += buffer.length
+    if (size > 64 * 1024) throw new Error('body too large')
+    chunks.push(buffer)
+  }
+  return JSON.parse(Buffer.concat(chunks).toString('utf8'))
+}
+
+/** Dispatch one allowlisted method through the host ApiProxy. */
+async function dispatch(apiProxy: ApiProxy, method: string, payload: unknown, rpcId: string): Promise<unknown> {
+  const request: RpcRequest<unknown> = { rpcId: RpcId(rpcId), payload }
+  if (method === 'session.list') {
+    const full = await apiProxy.sessions.list(request as never)
+    if (!full.result.ok) return full
+    const items = full.result.value.items as Array<{ updatedAt: number; sessionId: string }>
+    const cursor = (payload as { cursor?: string } | undefined)?.cursor
+    // Every call pages (the first call with no cursor IS the first page):
+    // the phone must never transfer the whole session list at once.
+    // One stable page over (updatedAt desc, sessionId asc); pages never skip
+    // or repeat a row while the list changes between calls.
+    items.sort((a, b) => b.updatedAt - a.updatedAt
+      || (a.sessionId < b.sessionId ? -1 : a.sessionId > b.sessionId ? 1 : 0))
+    const position = cursor === undefined ? undefined : parseSessionListCursor(cursor)
+    const from = position === undefined ? 0 : items.findIndex(row => afterCursor(row, position))
+    const start = from < 0 ? items.length : from
+    const page = items.slice(start, start + SESSION_PAGE_SIZE)
+    const last = page[page.length - 1]
+    const nextCursor = last !== undefined && start + page.length < items.length
+      ? sessionListCursor(last.updatedAt, last.sessionId)
+      : undefined
+    return {
+      type: 'server-response',
+      rpcId,
+      result: {
+        ok: true,
+        value: {
+          items: page,
+          hasMore: nextCursor !== undefined,
+          ...(nextCursor !== undefined ? { nextCursor } : {}),
+        },
+      },
+    }
+  }
+  // The ApiProxy unary methods resolve to the internal response shape
+  // ({ rpcId, result }) without the transport envelope the phone's callUnary
+  // requires — wrap every pass-through in the same 'server-response'
+  // envelope session.list builds above.
+  const wrap = (response: { rpcId: string; result: unknown }): unknown => ({
+    type: 'server-response' as const,
+    rpcId,
+    result: response.result,
+  })
+  if (method === 'workspace.list') return wrap(await apiProxy.workspace.list(request as never))
+  if (method === 'session.create') return wrap(await apiProxy.sessions.create(request as never))
+  if (method === 'session.history') return wrap(await apiProxy.sessions.history(request as never))
+  if (method === 'session.search') return wrap(await apiProxy.sessions.search(request as never, new AbortController().signal))
+  if (method === 'session.prompt') return wrap(await apiProxy.sessions.prompt(request as never))
+  if (method === 'session.models') return wrap(await apiProxy.sessions.models(request as never))
+  if (method === 'session.selectModel') return wrap(await apiProxy.sessions.selectModel(request as never))
+  if (method === 'session.rename') return wrap(await apiProxy.sessions.rename(request as never))
+  throw new Error(`unhandled allowlisted method ${method}`)
+}

package/src/mobile-routes.ts

@@ -0,0 +1,77 @@
+/**
+ * The mobile surface's page routes: `/m` serves the standalone phone UI
+ * (an independent bundle, built to lib/mobile.js by the mobile tsdown
+ * entry), `/m/mobile.js` serves the bundle itself. The page talks to the
+ * host exclusively through the shared /api transport (paired-device cookie
+ * already crosses the api/gate fence), so no host-side data plumbing is
+ * needed here — only static serving, loopback+paired-fence via the normal
+ * webserver route registration.
+ */
+
+import { readFile } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import type { IncomingMessage, ServerResponse } from 'node:http'
+import type { WebRoute } from '@deepseek-ai/dsh-host-webserver'
+
+/** The standalone mobile bundle (built artifact, next to this file's own lib output). */
+function mobileBundlePath(): string {
+  return fileURLToPath(new URL('../lib/mobile.js', import.meta.url))
+}
+
+/** The mobile page shell: minimal, offline-safe, no external assets. */
+function pageHtml(bundleUrl: string): string {
+  return [
+    '<!doctype html>',
+    '<html lang="zh-CN">',
+    '<head>',
+    '<meta charset="utf-8">',
+    '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">',
+    '<meta name="theme-color" content="#f3f5f9">',
+    '<meta name="referrer" content="no-referrer">',
+    '<title>移动端远程控制</title>',
+    '</head>',
+    '<body>',
+    '<div id="root"></div>',
+    `<script type="module" src="${bundleUrl}"></script>`,
+    '</body>',
+    '</html>',
+  ].join('')
+}
+
+/** Send a small static body with cache headers (the bundle is content-hashed by rebuild). */
+function writeStatic(res: ServerResponse, status: number, type: string, body: string): void {
+  res.writeHead(status, {
+    'content-type': `${type}; charset=utf-8`,
+    'cache-control': 'no-cache',
+    'referrer-policy': 'no-referrer',
+  })
+  res.end(body)
+}
+
+/**
+ * Build the mobile page routes.
+ * @returns the two exact routes to register on webServer.
+ */
+export function makeMobileRoutes(): WebRoute[] {
+  const handlePage = (_req: IncomingMessage, res: ServerResponse): void => {
+    writeStatic(res, 200, 'text/html', pageHtml('/m/mobile.js'))
+  }
+  const handleBundle = async (_req: IncomingMessage, res: ServerResponse): Promise<void> => {
+    const path = mobileBundlePath()
+    if (!existsSync(path)) {
+      writeStatic(res, 503, 'text/plain', 'mobile bundle not built: run pnpm --filter @linxin666/dsh-remote-web-ui build')
+      return
+    }
+    try {
+      const body = await readFile(path, 'utf8')
+      writeStatic(res, 200, 'text/javascript', body)
+    } catch {
+      writeStatic(res, 500, 'text/plain', 'failed to read the mobile bundle')
+    }
+  }
+  return [
+    { kind: 'exact', path: '/m', handler: handlePage },
+    { kind: 'exact', path: '/m/mobile.js', handler: handleBundle },
+  ]
+}