@linxin666/dsh-remote-web-ui 0.3.5 → 0.3.9

package/src/mobile/views/App.tsx

@@ -1,213 +0,0 @@
-/**
- * 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 { fetchMobilePreferences, 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'
-import { PairRequiredView } from '../PairRequiredView.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
-}
-
-/** Read the optional workspace target carried from the pairing QR flow. */
-export function mobileWorkspaceTarget(search: string): string | undefined {
-  const value = new URLSearchParams(search).get('workspace')
-  return value === null || value === '' ? undefined : value
-}
-
-/** 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}`
-}
-
-/** Props accepted by the mobile root before it begins paired-device RPC calls. */
-export interface AppProps {
-  initialPairError?: string
-}
-
-/** Whether the mobile gateway rejected this browser for lack of a paired cookie. */
-export function isUnpairedMobileError(error: unknown): boolean {
-  return error instanceof RpcTransportError && error.message === 'HTTP 403'
-}
-
-/** The result of probing the paired-device-only mobile preference endpoint. */
-export type MobilePairState = 'checking' | 'paired' | 'unpaired' | 'unavailable'
-
-/** Classify an initial mobile preference failure without treating outage as authorization. */
-export function mobilePairStateForError(error: unknown): Extract<MobilePairState, 'unpaired' | 'unavailable'> {
-  return isUnpairedMobileError(error) ? 'unpaired' : 'unavailable'
-}
-
-/** Gate the independent mobile bundle until its own browser context is paired. */
-export function App({ initialPairError }: AppProps) {
-  const [pairState, setPairState] = useState<MobilePairState>('checking')
-
-  useEffect(() => {
-    let current = true
-    void fetchMobilePreferences().then(
-      () => { if (current) setPairState('paired') },
-      (error: unknown) => { if (current) setPairState(mobilePairStateForError(error)) },
-    )
-    return () => { current = false }
-  }, [])
-
-  if (pairState === 'checking') {
-    return <main className="mobile mobile-empty"><p className="mobile-muted">正在连接...</p></main>
-  }
-  if (pairState === 'unpaired') {
-    return <PairRequiredView initialError={initialPairError} onPaired={(path) => { window.location.replace(path) }} />
-  }
-  if (pairState === 'unavailable') {
-    return (
-      <main className="mobile mobile-empty">
-        <p className="mobile-error" role="alert">无法连接到运行中的 DSH host。</p>
-        <button className="mobile-new" type="button" onClick={() => { window.location.reload() }}>重试</button>
-      </main>
-    )
-  }
-
-  return <PairedApp />
-}
-
-/** The existing remote mobile surface, mounted only after device pairing succeeds. */
-function PairedApp() {
-  const [route, setRoute] = useState<Route>({ kind: 'workspaces' })
-  const [initialWorkspaceId, setInitialWorkspaceId] = useState<string | undefined>(
-    () => mobileWorkspaceTarget(window.location.search),
-  )
-  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() }
-  }, [])
-
-  // Keep the live-event client pointed at the session currently on screen so
-  // its polling fallback can keep that chat fresh over SSE-impairing tunnels
-  // (quick tunnel / Tailscale Serve do not forward Server-Sent Events).
-  useEffect(() => {
-    muxRef.current?.observe(route.kind === 'chat' ? route.session.sessionId : undefined)
-  }, [route])
-
-  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 })
-  }, [])
-
-  const openWorkspace = useCallback((workspace: WorkspaceRow) => {
-    if (initialWorkspaceId !== undefined) {
-      const url = new URL(window.location.href)
-      url.searchParams.delete('workspace')
-      window.history.replaceState(null, '', `${url.pathname}${url.search}${url.hash}`)
-      setInitialWorkspaceId(undefined)
-    }
-    setRoute({ kind: 'sessions', workspace })
-  }, [initialWorkspaceId])
-
-  return (
-    <div className="mobile">
-      {route.kind === 'workspaces'
-        ? <WorkspaceRoster initialWorkspaceId={initialWorkspaceId} onPick={openWorkspace} />
-        : 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, signal?: AbortSignal) {
-  return fetchHistory(sessionId, beforeSeq, undefined, signal)
-}
-
-export { listSessions, listWorkspaces, prompt }

package/src/mobile/views/ChatView.stream.test.tsx

@@ -1,263 +0,0 @@
-// @vitest-environment jsdom
-/**
- * ChatView streaming markdown throttle: a pending assistant message must not
- * re-parse its whole accumulated text on every chunk. Streaming text
- * re-parses at most once per STREAM_RENDER_INTERVAL_MS, shows the last
- * parsed result in between, and renders the exact final HTML (byte-identical
- * to the plain renderMarkdown output) the moment the turn closes.
- */
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { act, cleanup, render, screen } from '@testing-library/react'
-import { ChatView, STREAM_RENDER_INTERVAL_MS, LONG_TEXT_LIMIT } from './ChatView.tsx'
-import { type SessionView } from './App.tsx'
-import { renderMarkdown } from '../markdown.ts'
-import type { SessionModels } from '@deepseek-ai/dsh-host-apiproxy/api/sessions'
-import type { HistoryPage } from '../api.ts'
-import type { WireEvent } from '../messages.ts'
-
-// The api module is fully mocked; App.tsx's history wrapper is overridden to
-// feed a fixed empty history page, its pure helpers stay real.
-vi.mock('../api.ts', () => ({
-  fetchMobilePreferences: vi.fn(),
-  models: vi.fn(),
-  selectModel: vi.fn(),
-  sendCommand: vi.fn(),
-  cancelSession: vi.fn(),
-  fetchPending: vi.fn(),
-}))
-vi.mock('./App.tsx', async importOriginal => {
-  const actual = await importOriginal<typeof import('./App.tsx')>()
-  return {
-    ...actual,
-    loadHistory: vi.fn(),
-    prompt: vi.fn(async () => {}),
-  }
-})
-// Wrap the real renderer with a call counter: the throttle must cut the
-// number of full-text parses during a chunk stream (each parse is O(n)).
-vi.mock('../markdown.ts', async importOriginal => {
-  const actual = await importOriginal<typeof import('../markdown.ts')>()
-  return { ...actual, renderMarkdown: vi.fn(actual.renderMarkdown) }
-})
-import { fetchMobilePreferences, models } from '../api.ts'
-import { loadHistory } from './App.tsx'
-
-const loadHistoryMock = vi.mocked(loadHistory)
-const fetchMobilePreferencesMock = vi.mocked(fetchMobilePreferences)
-const modelsMock = vi.mocked(models)
-const renderMarkdownMock = vi.mocked(renderMarkdown)
-
-const session: SessionView = {
-  sessionId: 's-1',
-  title: '测试会话',
-  updatedAt: 1_700_000_000_000,
-  running: false,
-  blank: false,
-}
-
-/** Minimal mux stand-in: captures the ChatView's frame listener for hand-off. */
-class FakeMux {
-  listeners = new Set<(frame: unknown) => void>()
-  onFrame(listener: (frame: unknown) => void): () => void {
-    this.listeners.add(listener)
-    return () => { this.listeners.delete(listener) }
-  }
-  emit(frame: unknown): void {
-    for (const listener of this.listeners) listener(frame)
-  }
-}
-
-/** One history entry wrapping a WireEvent (host history-page shape). */
-function makeEntry(type: string, data: unknown, seq: number): { event: WireEvent } {
-  return { event: { type, seq, time: seq * 1_000, data } }
-}
-
-/** Build an empty history page (the live stream supplies all content). */
-function historyPage(): HistoryPage {
-  return { events: [] as never, hasMore: false } as HistoryPage
-}
-
-/**
- * Emit one live text-delta chunk bound to the stable message id 'a-1' (the
- * mobile wire shape). A stable id keeps the message row mounted across the
- * fold, so the tests observe the throttle effect path only.
- */
-function chunk(mux: FakeMux, text: string, seq: number): void {
-  mux.emit({
-    type: 'session/event',
-    sessionId: 's-1',
-    event: makeEntry('assistant/chunk', { messageId: 'a-1', turn: 0, step: 0, text }, seq).event,
-  })
-}
-
-/** Emit the final assistant message (authoritative text, closes the turn). */
-function finalMessage(mux: FakeMux, text: string, seq: number): void {
-  mux.emit({
-    type: 'session/event',
-    sessionId: 's-1',
-    event: makeEntry('assistant/message', {
-      turn: 0,
-      step: 0,
-      message: { id: 'a-1', role: 'assistant', content: [{ type: 'text', text }] },
-    }, seq).event,
-  })
-}
-
-/** Round-trip HTML through the DOM so a byte comparison is symmetric. */
-function normalize(html: string): string {
-  const element = document.createElement('div')
-  element.innerHTML = html
-  return element.innerHTML
-}
-
-/** The assistant message's markdown body (dangerouslySetInnerHTML target). */
-function body(): HTMLElement {
-  const element = document.querySelector('.chat-msg.chat-msg-assistant .chat-md-body')
-  if (element === null) throw new Error('assistant markdown body not found')
-  return element as HTMLElement
-}
-
-beforeEach(() => {
-  fetchMobilePreferencesMock.mockResolvedValue({ mobileEnterToSend: true })
-  modelsMock.mockResolvedValue({
-    current: { provider: 'fx', model: 'fx-1' },
-    routable: true,
-    groups: [],
-    failures: [],
-  } satisfies SessionModels)
-  loadHistoryMock.mockResolvedValue(historyPage())
-  vi.useFakeTimers()
-})
-
-afterEach(() => {
-  cleanup()
-  vi.useRealTimers()
-  vi.clearAllMocks()
-  vi.restoreAllMocks()
-})
-
-describe('ChatView streaming markdown throttle', () => {
-  it('re-parses pending text at most once per interval and catches up byte-exactly', async () => {
-    const mux = new FakeMux()
-    await act(async () => {
-      render(<ChatView session={session} mux={mux as never} onBack={() => {}} />)
-    })
-
-    const parts = [
-      '第一段 **加粗** 文本与 `行内代码`。\n\n',
-      '第二段 *斜体* 与 <标签> 内容。\n\n',
-      '第三段 ~~删除线~~ 和 [链接](https://example.com/a)。',
-    ]
-    const full = parts.join('')
-
-    // The first chunk mounts the pending message; the mount render parses it.
-    await act(async () => { chunk(mux, parts[0] ?? '', 6) })
-    const afterMount = renderMarkdownMock.mock.calls.length
-    expect(afterMount).toBeGreaterThanOrEqual(1)
-
-    // A burst of further chunks does not re-parse per chunk: at most one
-    // leading parse may run (if the wall-clock gap to the burst exceeded the
-    // window), but never one parse per chunk.
-    await act(async () => {
-      chunk(mux, parts[1] ?? '', 7)
-      chunk(mux, parts[2] ?? '', 8)
-    })
-    expect(renderMarkdownMock.mock.calls.length - afterMount).toBeLessThan(2)
-    // During the window the last parsed result stays visible: the newest
-    // chunk's text has not reached the DOM yet.
-    expect(body().innerHTML).not.toContain('第三段')
-
-    // The trailing render inside the window catches up to the newest text,
-    // byte-identical to a full renderMarkdown of the accumulated text.
-    await act(async () => {
-      vi.advanceTimersByTime(STREAM_RENDER_INTERVAL_MS + 5)
-    })
-    expect(normalize(body().innerHTML)).toBe(normalize(renderMarkdown(full)))
-    expect(renderMarkdownMock.mock.calls.length - afterMount).toBeLessThan(3)
-  })
-
-  it('renders the exact final HTML immediately when the turn closes', async () => {
-    const mux = new FakeMux()
-    await act(async () => {
-      render(<ChatView session={session} mux={mux as never} onBack={() => {}} />)
-    })
-
-    // The final event carries the authoritative text and closes the turn
-    // (pending -> false) in the same synchronous burst as the chunks.
-    const finalText = '最终 **整篇** `渲染` 与 [链接](https://example.com/x) 文本。'
-    await act(async () => {
-      chunk(mux, '流式前缀', 6)
-      chunk(mux, '中间过程', 7)
-      finalMessage(mux, finalText, 8)
-    })
-
-    // No timer advance needed: the closed turn already renders the exact
-    // final HTML (terminal messages keep the immediate-render behavior).
-    expect(normalize(body().innerHTML)).toBe(normalize(renderMarkdown(finalText)))
-  })
-
-  it('keeps the streaming render fresh after window edges and skips the identical final parse', async () => {
-    const mux = new FakeMux()
-    await act(async () => {
-      render(<ChatView session={session} mux={mux as never} onBack={() => {}} />)
-    })
-
-    const first = '第一期内容。'
-    const second = '第二期内容，包含 `code`。'
-    const full = first + second
-
-    // The chunk and the window edge in one tick: the trailing render fires
-    // inside the window and shows the current text.
-    await act(async () => {
-      chunk(mux, first, 6)
-      vi.advanceTimersByTime(STREAM_RENDER_INTERVAL_MS + 5)
-    })
-    expect(normalize(body().innerHTML)).toBe(normalize(renderMarkdown(first)))
-
-    // A later chunk schedules a new trailing render; before it fires the last
-    // parsed result is still on screen.
-    await act(async () => { chunk(mux, second, 7) })
-    expect(body().innerHTML).not.toContain('第二期内容')
-    await act(async () => {
-      vi.advanceTimersByTime(STREAM_RENDER_INTERVAL_MS + 5)
-    })
-    expect(normalize(body().innerHTML)).toBe(normalize(renderMarkdown(full)))
-
-    // Closing the turn with the exact text already rendered must not re-parse
-    // (the row already holds the byte-identical final HTML).
-    const beforeFinal = renderMarkdownMock.mock.calls.length
-    await act(async () => { finalMessage(mux, full, 9) })
-    expect(renderMarkdownMock.mock.calls.length - beforeFinal).toBe(0)
-    expect(normalize(body().innerHTML)).toBe(normalize(renderMarkdown(full)))
-  })
-
-  it('does not collapse long text while streaming (pending) and collapses once turn finishes', async () => {
-    const mux = new FakeMux()
-    let container: HTMLElement
-    await act(async () => {
-      const rendered = render(<ChatView session={session} mux={mux as never} onBack={() => {}} />)
-      container = rendered.container
-    })
-
-    const hugeChunk = 'C'.repeat(LONG_TEXT_LIMIT + 200)
-
-    // Stream a chunk exceeding LONG_TEXT_LIMIT
-    await act(async () => {
-      chunk(mux, hugeChunk, 6)
-      vi.advanceTimersByTime(STREAM_RENDER_INTERVAL_MS + 5)
-    })
-
-    // During streaming (pending), message is not collapsed
-    expect(container!.querySelector('.chat-md-collapsed')).toBeNull()
-    expect(screen.queryByRole('button', { name: /展开全文/ })).toBeNull()
-
-    // Turn closes
-    await act(async () => {
-      finalMessage(mux, hugeChunk, 7)
-    })
-
-    // Once turn ends (not pending), message is collapsed and has expand button
-    expect(container!.querySelector('.chat-md-collapsed')).not.toBeNull()
-    expect(screen.getByRole('button', { name: new RegExp(`展开全文（${LONG_TEXT_LIMIT + 200} 字）`) })).toBeTruthy()
-  })
-})