@linxin666/dsh-remote-web-ui 0.1.1

package/src/mobile/mobile-theme.test.ts

@@ -0,0 +1,84 @@
+// @vitest-environment jsdom
+/** mobile-theme: light default, persisted dark toggle, document wiring. */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  getMobileTheme, initMobileTheme, setMobileTheme, subscribeMobileTheme, toggleMobileTheme,
+} from './mobile-theme.ts'
+
+const STORAGE_KEY = 'dsh.remote.theme'
+
+/** jsdom in this setup ships a bare localStorage object; install a real fake. */
+function makeStorage(): Storage {
+  const map = new Map<string, string>()
+  return {
+    getItem: (key: string) => map.get(key) ?? null,
+    setItem: (key: string, value: string) => { map.set(key, value) },
+    removeItem: (key: string) => { map.delete(key) },
+    clear: () => { map.clear() },
+    key: (index: number) => [...map.keys()][index] ?? null,
+    get length() { return map.size },
+  } as Storage
+}
+
+let storage: Storage
+
+beforeEach(() => {
+  storage = makeStorage()
+  vi.stubGlobal('localStorage', storage)
+  setMobileTheme('light')
+  document.documentElement.removeAttribute('data-theme')
+})
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('mobile-theme', () => {
+  it('defaults to light with nothing stored', () => {
+    expect(getMobileTheme()).toBe('light')
+  })
+
+  it('toggles to dark, persists it, and wires the document', () => {
+    expect(toggleMobileTheme()).toBe('dark')
+    expect(getMobileTheme()).toBe('dark')
+    expect(document.documentElement.dataset.theme).toBe('dark')
+    expect(storage.getItem(STORAGE_KEY)).toBe('dark')
+  })
+
+  it('toggles back to light', () => {
+    toggleMobileTheme()
+    expect(toggleMobileTheme()).toBe('light')
+    expect(document.documentElement.dataset.theme).toBe('light')
+    expect(storage.getItem(STORAGE_KEY)).toBe('light')
+  })
+
+  it('updates the browser chrome color along with the theme', () => {
+    const meta = document.createElement('meta')
+    meta.name = 'theme-color'
+    document.head.appendChild(meta)
+    setMobileTheme('dark')
+    expect(meta.content).toBe('#111418')
+    setMobileTheme('light')
+    expect(meta.content).toBe('#f3f5f9')
+    meta.remove()
+  })
+
+  it('boot reads the stored theme and initMobileTheme applies it', async () => {
+    storage.setItem(STORAGE_KEY, 'dark')
+    vi.resetModules()
+    const fresh = await import('./mobile-theme.ts')
+    expect(fresh.getMobileTheme()).toBe('dark')
+    fresh.initMobileTheme()
+    expect(document.documentElement.dataset.theme).toBe('dark')
+  })
+
+  it('notifies subscribers on change', () => {
+    const seen: string[] = []
+    const unsubscribe = subscribeMobileTheme(() => { seen.push(getMobileTheme()) })
+    setMobileTheme('dark')
+    setMobileTheme('light')
+    unsubscribe()
+    setMobileTheme('dark')
+    expect(seen).toEqual(['dark', 'light'])
+  })
+})

package/src/mobile/mobile-theme.ts

@@ -0,0 +1,76 @@
+/**
+ * Mobile-surface theme: light by default, dark via an explicit persisted
+ * toggle. The standalone page boots without the shell, so there is no theme
+ * system to inherit — the choice is stored in localStorage and applied as a
+ * `data-theme` attribute on <html>; the stylesheet defines both palettes
+ * under `:root` (light) / `:root[data-theme='dark']` (dark).
+ *
+ * A tiny module store (subscribe/get) keeps the toggle button and the boot
+ * path in sync without threading props through the three view levels.
+ */
+
+export type MobileTheme = 'light' | 'dark'
+
+const STORAGE_KEY = 'dsh.remote.theme'
+const THEME_COLOR_META_NAME = 'theme-color'
+const LIGHT_THEME_COLOR = '#f3f5f9'
+const DARK_THEME_COLOR = '#111418'
+
+let current: MobileTheme = readStored() ?? 'light'
+const listeners = new Set<() => void>()
+
+function readStored(): MobileTheme | undefined {
+  try {
+    const value = localStorage.getItem(STORAGE_KEY)
+    return value === 'dark' || value === 'light' ? value : undefined
+  } catch {
+    return undefined
+  }
+}
+
+function persist(theme: MobileTheme): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, theme)
+  } catch {
+    // Private-mode storage failures are non-fatal; the session keeps the theme.
+  }
+}
+
+/** Apply the theme to the document: data-theme attribute + browser chrome color. */
+function applyToDocument(theme: MobileTheme): void {
+  if (typeof document === 'undefined') return
+  document.documentElement.dataset.theme = theme
+  const meta = document.querySelector<HTMLMetaElement>(`meta[name="${THEME_COLOR_META_NAME}"]`)
+  if (meta !== null) meta.content = theme === 'dark' ? DARK_THEME_COLOR : LIGHT_THEME_COLOR
+}
+
+/** Current theme (light unless the user explicitly toggled to dark). */
+export function getMobileTheme(): MobileTheme {
+  return current
+}
+
+/** Subscribe to theme changes; returns the unsubscribe function. */
+export function subscribeMobileTheme(listener: () => void): () => void {
+  listeners.add(listener)
+  return () => { listeners.delete(listener) }
+}
+
+/** Set the theme explicitly (persisted + applied to the document). */
+export function setMobileTheme(theme: MobileTheme): void {
+  if (theme === current) return
+  current = theme
+  persist(theme)
+  applyToDocument(theme)
+  for (const listener of [...listeners]) listener()
+}
+
+/** Flip light/dark and return the new theme. */
+export function toggleMobileTheme(): MobileTheme {
+  setMobileTheme(current === 'light' ? 'dark' : 'light')
+  return current
+}
+
+/** Apply the persisted (or default) theme once at boot, before first paint. */
+export function initMobileTheme(): void {
+  applyToDocument(current)
+}

package/src/mobile/mux.ts

@@ -0,0 +1,126 @@
+/**
+ * Mobile-surface live-event client: the plugin's `/m/api/events.mux` SSE
+ * channel (Server-Sent Events — the host bridges the mux stream onto it, so
+ * no WebSocket handshake or framing is needed on this side). The host
+ * pushes mux frames (subscribed baselines, session events, approvals,
+ * questions, queue snapshots, tasks, projections) as soon as the stream
+ * opens — no subscription handshake is needed. Frames arrive as
+ * server-request envelopes whose payload is the mux frame; unknown frame
+ * types are dropped so a newer host never breaks this client.
+ * EventSource reconnects automatically.
+ */
+
+import type { MuxFrame } from '@deepseek-ai/dsh-host-apiproxy/api/events'
+import { muxFrameSchema } from '@deepseek-ai/dsh-host-apiproxy/api/events.schema'
+import { serverRequestSchema } from '@deepseek-ai/dsh-host-apiproxy/api/rpc.schema'
+
+/** Injectable seams for tests. */
+export interface MuxClientOptions {
+  /** EventSource factory (defaults to the browser EventSource). */
+  sourceFactory?: (url: string) => EventSourceLike
+}
+
+/** The EventSource subset this client uses (browser EventSource fits). */
+export interface EventSourceLike {
+  onmessage: ((event: { data: string }) => void) | null
+  onerror: ((event: unknown) => void) | null
+  close(): void
+}
+
+/** Browser default source factory. */
+function browserSource(url: string): EventSourceLike {
+  // The DOM EventSource is structurally compatible; the `this`-typed handler
+  // signatures differ, so the narrow face takes it through an adapter cast.
+  return new EventSource(url) as unknown as EventSourceLike
+}
+
+/**
+ * Keep one SSE subscription open, fanning validated frames out to
+ * subscribers. EventSource owns reconnection (with its own backoff); this
+ * class only manages the subscription lifecycle.
+ */
+export class MuxClient {
+  private readonly sourceFactory: (url: string) => EventSourceLike
+  private readonly listeners = new Set<(frame: MuxFrame) => void>()
+  private source: EventSourceLike | undefined
+  private stopped = false
+  private readonly url: string
+
+  /**
+   * @param url - the mobile events endpoint (browser-relative).
+   * @param options - seams.
+   */
+  constructor(url = '/m/api/events.mux', options: MuxClientOptions = {}) {
+    this.url = url
+    this.sourceFactory = options.sourceFactory ?? browserSource
+  }
+
+  /** Open the stream (idempotent; EventSource reconnects until {@link stop}). */
+  start(): void {
+    this.stopped = false
+    if (this.source !== undefined) return
+    this.connect()
+  }
+
+  /** Close for good. */
+  stop(): void {
+    this.stopped = true
+    this.closeSource()
+  }
+
+  /** Subscribe to validated frames; returns an unsubscribe function. */
+  onFrame(listener: (frame: MuxFrame) => void): () => void {
+    this.listeners.add(listener)
+    return () => { this.listeners.delete(listener) }
+  }
+
+  private connect(): void {
+    const source = this.sourceFactory(this.url)
+    this.source = source
+    source.onmessage = (event) => {
+      this.handleMessage(event.data)
+    }
+    source.onerror = () => {
+      // EventSource reconnects by itself; when we are closing, detach first
+      // so the native reconnect cannot outlive stop().
+      if (this.stopped && this.source === source) this.closeSource()
+    }
+  }
+
+  private handleMessage(data: string): void {
+    if (typeof data !== 'string' || data === '') return
+    let parsed: unknown
+    try {
+      parsed = JSON.parse(data)
+    } catch {
+      return
+    }
+    // The SSE channel carries server-request envelopes whose payload is the
+    // mux frame (same wire shape as the desktop mux channel).
+    const envelope = serverRequestSchema.safeParse(parsed)
+    if (!envelope.success) return
+    const frame = muxFrameSchema.safeParse(envelope.data.payload)
+    if (!frame.success) return
+    for (const listener of this.listeners) {
+      try {
+        listener(frame.data)
+      } catch {
+        // A throwing subscriber must not break the emit loop.
+      }
+    }
+  }
+
+  private closeSource(): void {
+    const source = this.source
+    this.source = undefined
+    if (source !== undefined) {
+      source.onmessage = null
+      source.onerror = null
+      try {
+        source.close()
+      } catch {
+        // Already closed.
+      }
+    }
+  }
+}

package/src/mobile/rpc.ts

@@ -0,0 +1,90 @@
+/**
+ * Mobile-surface unary RPC over the shared /api transport: the four-quadrant
+ * envelope (client-request → server-response), minted rpcIds, and typed
+ * error mapping. This is a thin, self-contained slice of the harness
+ * apiproxy fetch carrier — the mobile page is an independent bundle and must
+ * not depend on the main UI's module loader, so the wire contract is
+ * reimplemented here over plain fetch.
+ */
+
+/** Transport-level failure (network, HTTP status, malformed envelope). */
+export class RpcTransportError extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'RpcTransportError'
+  }
+}
+
+/** A business error the host answered with (200 + err result). */
+export class RpcCallError extends Error {
+  /** The wire error (code + message + details). */
+  readonly error: { code: string; message: string }
+
+  constructor(error: { code: string; message: string }) {
+    super(error.message)
+    this.name = 'RpcCallError'
+    this.error = error
+  }
+}
+
+let rpcCounter = 0
+
+/** Mint one process-unique rpcId (stable under crypto.randomUUID absence). */
+export function mintRpcId(): string {
+  const random = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+    ? crypto.randomUUID()
+    : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`
+  rpcCounter += 1
+  return `${random}-${rpcCounter.toString(36)}`
+}
+
+/**
+ * One unary call: POST /m/api/<method> (the plugin's own mobile channel —
+ * NOT the connection plugin's /api prefix, so the tunneled Host never needs
+ * to enter the transport trust fence) with the client-request envelope,
+ * resolve the server-response value, reject with the mapped error classes.
+ * @param method - the dotted RPC method, e.g. `session.list`.
+ * @param payload - the business payload.
+ * @param signal - optional abort.
+ * @returns the response value.
+ */
+export async function callUnary<T>(
+  method: string,
+  payload: unknown,
+  signal?: AbortSignal,
+): Promise<T> {
+  const rpcId = mintRpcId()
+  let response: Response
+  try {
+    response = await fetch(`/m/api/${method}`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ type: 'client-request', rpcId, method, payload }),
+      ...(signal !== undefined ? { signal } : {}),
+    })
+  } catch (error) {
+    const reason = error instanceof DOMException && error.name === 'AbortError'
+      ? 'aborted'
+      : error instanceof Error ? error.message : String(error)
+    throw new RpcTransportError(`transport failed: ${reason}`)
+  }
+  if (!response.ok) {
+    throw new RpcTransportError(`HTTP ${String(response.status)}`)
+  }
+  let envelope: unknown
+  try {
+    envelope = await response.json()
+  } catch {
+    throw new RpcTransportError('malformed response body')
+  }
+  const parsed = envelope as { type?: unknown; rpcId?: unknown; result?: unknown }
+  if (parsed?.type !== 'server-response' || parsed.rpcId !== rpcId) {
+    throw new RpcTransportError('response envelope mismatch')
+  }
+  const result = parsed.result as { ok?: boolean; value?: unknown; error?: { code: string; message: string } }
+  if (result?.ok === true) return result.value as T
+  if (result?.ok === false && result.error !== undefined) {
+    throw new RpcCallError(result.error)
+  }
+  throw new RpcTransportError('malformed result envelope')
+}

package/src/mobile/theme-toggle.tsx

@@ -0,0 +1,47 @@
+/**
+ * Theme toggle button: sits at the right end of every view header and flips
+ * the mobile surface between the light (default) and dark palettes. The
+ * glyph shows the theme you will switch TO (moon in light mode, sun in dark
+ * mode); the choice persists across visits.
+ */
+
+import { useSyncExternalStore } from 'react'
+import { getMobileTheme, subscribeMobileTheme, toggleMobileTheme } from './mobile-theme.ts'
+
+/** Sun glyph: circle + eight rays (inline SVG, no emoji). */
+function SunIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden>
+      <circle cx="12" cy="12" r="4.2" />
+      <path d="M12 2.5v2.4M12 19.1v2.4M2.5 12h2.4M19.1 12h2.4M5 5l1.7 1.7M17.3 17.3 19 19M19 5l-1.7 1.7M6.7 17.3 5 19" />
+    </svg>
+  )
+}
+
+/** Moon glyph: crescent path (inline SVG, no emoji). */
+function MoonIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+      <path d="M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5Z" />
+    </svg>
+  )
+}
+
+/**
+ * Render the header theme toggle.
+ * @returns the toggle button.
+ */
+export function ThemeToggle() {
+  const theme = useSyncExternalStore(subscribeMobileTheme, getMobileTheme)
+  const dark = theme === 'dark'
+  return (
+    <button
+      type="button"
+      className="mobile-theme-toggle"
+      aria-label={dark ? '切换到浅色' : '切换到深色'}
+      onClick={() => { toggleMobileTheme() }}
+    >
+      {dark ? <SunIcon /> : <MoonIcon />}
+    </button>
+  )
+}

package/src/mobile/views/App.tsx

@@ -0,0 +1,152 @@
+/**
+ * Mobile surface root: the view state machine (workspaces → sessions →
+ * chat) and the top-level data flows. Deliberately plain React state — no
+ * router, no state library: the surface is three fixed levels with a back
+ * affordance, and every piece of data is fetched on demand.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { WorkspaceView as WorkspaceRow } from '@deepseek-ai/dsh-host-apiproxy/api/workspace'
+import { history as fetchHistory, listSessions, listWorkspaces, prompt } from '../api.ts'
+import { MuxClient } from '../mux.ts'
+import { RpcCallError, RpcTransportError } from '../rpc.ts'
+import { ChatView } from './ChatView.tsx'
+import { SessionListView } from './SessionListView.tsx'
+import { WorkspaceView as WorkspaceRoster } from './WorkspaceView.tsx'
+
+/** One navigation level. */
+type Route =
+  | { kind: 'workspaces' }
+  | { kind: 'sessions'; workspace: WorkspaceRow }
+  | { kind: 'chat'; session: SessionView; workspace: WorkspaceRow }
+
+/** The session-list row model (list + chat share it). */
+export interface SessionView {
+  sessionId: string
+  title: string
+  cwd?: string
+  updatedAt: number
+  running: boolean
+  blank: boolean
+}
+
+/** One rendered chat message (produced by the fold). */
+export interface RenderMessage {
+  id: string
+  kind: 'user' | 'assistant'
+  text: string
+  seq: number
+  time: number
+  pending?: boolean
+  failed?: boolean
+  toolSummary?: string
+}
+
+/** Map a list row to the surface model; the title comes from projections when present. */
+export function toSessionView(item: {
+  sessionId: string
+  updatedAt: number
+  running: boolean
+  blank: boolean
+  cwd?: string
+  projections?: { values?: Record<string, unknown> }
+}): SessionView {
+  const titleValue = item.projections?.values?.title
+  const title = typeof titleValue === 'string' && titleValue !== ''
+    ? titleValue
+    : item.cwd !== undefined ? item.cwd.split('/').filter(Boolean).at(-1) ?? item.cwd : '新会话'
+  return {
+    sessionId: item.sessionId,
+    title,
+    ...(item.cwd !== undefined ? { cwd: item.cwd } : {}),
+    updatedAt: item.updatedAt,
+    running: item.running,
+    blank: item.blank,
+  }
+}
+
+/** Human clock, e.g. "14:05" or "昨天 20:31". */
+export function formatTime(epochMs: number): string {
+  const date = new Date(epochMs)
+  const clock = `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+  const today = new Date()
+  if (date.toDateString() === today.toDateString()) return clock
+  const yesterday = new Date(today)
+  yesterday.setDate(today.getDate() - 1)
+  if (date.toDateString() === yesterday.toDateString()) return `昨天 ${clock}`
+  return `${String(date.getMonth() + 1)}月${String(date.getDate())}日 ${clock}`
+}
+
+/**
+ * The surface root.
+ * @returns the app tree.
+ */
+export function App() {
+  const [route, setRoute] = useState<Route>({ kind: 'workspaces' })
+  const muxRef = useRef<MuxClient | undefined>(undefined)
+
+  // The mux stream lives for the page lifetime: session events keep the
+  // open chat live, and reconnect is automatic.
+  useEffect(() => {
+    const mux = new MuxClient()
+    muxRef.current = mux
+    mux.start()
+    return () => { mux.stop() }
+  }, [])
+
+  const back = useCallback(() => {
+    setRoute(previous => {
+      if (previous.kind === 'chat') return { kind: 'sessions', workspace: previous.workspace }
+      if (previous.kind === 'sessions') return { kind: 'workspaces' }
+      return previous
+    })
+  }, [])
+
+  const openChat = useCallback((session: SessionView, workspace: WorkspaceRow) => {
+    setRoute({ kind: 'chat', session, workspace })
+  }, [])
+
+  return (
+    <div className="mobile">
+      {route.kind === 'workspaces'
+        ? <WorkspaceRoster onPick={(workspace) => { setRoute({ kind: 'sessions', workspace }) }} />
+        : route.kind === 'sessions'
+          ? (
+            <SessionListView
+              workspace={route.workspace}
+              onBack={back}
+              onPick={(session) => { openChat(session, route.workspace) }}
+            />
+          )
+          : <ChatView session={route.session} mux={muxRef.current} onBack={back} />}
+    </div>
+  )
+}
+
+/** Shared error text for the surface's small failure affordances. */
+export function errorText(error: unknown): string {
+  if (error instanceof RpcCallError) return error.error.message
+  if (error instanceof RpcTransportError) return error.message
+  if (error instanceof Error) return error.message
+  return String(error)
+}
+
+/**
+ * Actionable hint for transport-level 403s on host-gated channels (model
+ * picker, session creation): the phone's UI bundle is served fresh from disk
+ * per request, while the host-side allowlist lives in the long-running
+ * process — a rebuild without a restart shows the new surface against the
+ * old allowlist (HTTP 403 forbidden).
+ */
+export function staleHostHint(message: string): string | undefined {
+  return /^HTTP 403/.test(message)
+    ? '宿主端插件可能仍在运行旧版本：请重启 dsh web 后再试。'
+    : undefined
+}
+
+/** Fetch one history page (tail by default) — thin wrapper so views share the call shape. */
+export function loadHistory(sessionId: string, beforeSeq?: number) {
+  return fetchHistory(sessionId, beforeSeq)
+}
+
+export { listSessions, listWorkspaces, prompt }