@linxin666/dsh-remote-web-ui 0.1.1

package/src/mobile/views/SessionListView.test.tsx

@@ -0,0 +1,139 @@
+// @vitest-environment jsdom
+/** SessionListView: owned-row filtering, incremental pages, session creation. */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import type { WorkspaceView as WorkspaceRow } from '@deepseek-ai/dsh-host-apiproxy/api/workspace'
+import { SessionListView, type SessionListViewProps } from './SessionListView.tsx'
+import { type SessionView } from './App.tsx'
+
+// The api module is fully mocked; the view's App.tsx helpers stay real.
+vi.mock('../api.ts', () => ({
+  listSessions: vi.fn(),
+  listWorkspaces: vi.fn(),
+  createSession: vi.fn(),
+}))
+import { createSession, listSessions, listWorkspaces } from '../api.ts'
+
+const listSessionsMock = vi.mocked(listSessions)
+const listWorkspacesMock = vi.mocked(listWorkspaces)
+const createSessionMock = vi.mocked(createSession)
+
+const workspace: WorkspaceRow = {
+  workspaceId: 'w-1' as never,
+  path: '/tmp/demo',
+  title: '演示项目',
+  sessionIds: ['s-1'] as never,
+  createdAt: '2026-01-01T00:00:00.000Z',
+  updatedAt: '2026-01-01T00:00:00.000Z',
+}
+
+/** A session.list summary row. */
+function summary(sessionId: string, updatedAt: number, extra: Record<string, unknown> = {}): never {
+  return { sessionId, updatedAt, running: false, blank: false, ...extra } as never
+}
+
+let picked: SessionView | undefined
+
+function renderList(props: Partial<SessionListViewProps> = {}): void {
+  picked = undefined
+  render(
+    <SessionListView
+      workspace={workspace}
+      onBack={() => {}}
+      onPick={(session) => { picked = session }}
+      {...props}
+    />,
+  )
+}
+
+beforeEach(() => {
+  listSessionsMock.mockResolvedValue({ items: [], hasMore: false })
+  listWorkspacesMock.mockResolvedValue([workspace])
+  createSessionMock.mockResolvedValue({ sessionId: 's-new' })
+})
+
+afterEach(() => {
+  cleanup()
+  vi.clearAllMocks()
+})
+
+describe('SessionListView roster', () => {
+  it('renders the sessions owned by the workspace', async () => {
+    listSessionsMock.mockResolvedValue({
+      items: [
+        summary('s-1', 1_700_000_000_000, { projections: { values: { title: '改造移动端' } } }),
+        summary('s-other', 1_600_000_000_000, { cwd: '/tmp/foreign' }),
+      ],
+      hasMore: false,
+    })
+    renderList()
+
+    expect(await screen.findByText('改造移动端')).toBeTruthy()
+    // The foreign session (not in workspace.sessionIds) stays hidden.
+    expect(screen.queryByText(/foreign/)).toBeNull()
+  })
+
+  it('shows the empty state when the workspace owns no sessions', async () => {
+    renderList()
+    expect(await screen.findByText(/还没有会话/)).toBeTruthy()
+  })
+
+  it('refreshes the owned-id set from workspace.list on mount', async () => {
+    listSessionsMock.mockResolvedValue({
+      items: [summary('s-2', 1_700_000_000_000, { cwd: '/tmp/other' })],
+      hasMore: false,
+    })
+    listWorkspacesMock.mockResolvedValue([
+      { ...workspace, sessionIds: ['s-2'] as never },
+    ])
+    renderList()
+    // s-2 is absent from the stale row but present in the fresh roster.
+    expect(await screen.findByText(/other/)).toBeTruthy()
+  })
+})
+
+describe('SessionListView creation', () => {
+  it('creates a blank session in the workspace and opens it immediately', async () => {
+    renderList()
+    await screen.findByText(/还没有会话/)
+
+    fireEvent.click(screen.getByRole('button', { name: '+ 新建会话' }))
+
+    await waitFor(() => {
+      expect(createSessionMock).toHaveBeenCalledWith({ workspaceId: 'w-1' })
+    })
+    await waitFor(() => {
+      expect(picked).toBeDefined()
+    })
+    expect(picked?.sessionId).toBe('s-new')
+    expect(picked?.blank).toBe(true)
+    // The fresh row is prepended without waiting for a refetch.
+    expect(await screen.findByText('新会话')).toBeTruthy()
+  })
+
+  it('keeps the button disabled while a creation is in flight', async () => {
+    let resolveCreate: (value: { sessionId: string }) => void = () => {}
+    createSessionMock.mockReturnValue(new Promise(resolve => { resolveCreate = resolve }))
+    renderList()
+    await screen.findByText(/还没有会话/)
+
+    fireEvent.click(screen.getByRole('button', { name: '+ 新建会话' }))
+    const button = await screen.findByRole('button', { name: '创建中…' })
+    expect(button.hasAttribute('disabled')).toBe(true)
+
+    resolveCreate({ sessionId: 's-new' })
+    await waitFor(() => { expect(picked).toBeDefined() })
+  })
+
+  it('shows the stale-host hint when creation is refused with HTTP 403', async () => {
+    createSessionMock.mockRejectedValue(new Error('HTTP 403'))
+    renderList()
+    await screen.findByText(/还没有会话/)
+
+    fireEvent.click(screen.getByRole('button', { name: '+ 新建会话' }))
+
+    expect(await screen.findByText(/HTTP 403/)).toBeTruthy()
+    expect(await screen.findByText(/重启 dsh web/)).toBeTruthy()
+    expect(picked).toBeUndefined()
+  })
+})

package/src/mobile/views/SessionListView.tsx

@@ -0,0 +1,186 @@
+/**
+ * Sessions level: one workspace's sessions, loaded incrementally — the
+ * first page fetches session.list with a cursor, scrolling appends further
+ * pages (never the whole list at once). Rows are filtered to the opened
+ * workspace by its owned session ids; extra pages are pulled on demand so
+ * a workspace with many sessions converges without a full transfer.
+ *
+ * Creating a session is this level's other action: the workspace's id is
+ * sent to session.create (the host attaches the new session to it), the
+ * fresh row is prepended optimistically, and the user lands straight in
+ * the new chat — the same "new session opens" flow as the desktop UI.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { WorkspaceView as WorkspaceRow } from '@deepseek-ai/dsh-host-apiproxy/api/workspace'
+import type { SessionSummary } from '@deepseek-ai/dsh-host-apiproxy/api/sessions'
+import { createSession, listSessions, listWorkspaces } from '../api.ts'
+import { errorText, formatTime, staleHostHint, toSessionView, type SessionView } from './App.tsx'
+import { ThemeToggle } from '../theme-toggle.tsx'
+
+/** Props for the session list. */
+export interface SessionListViewProps {
+  workspace: WorkspaceRow
+  onBack(): void
+  onPick(session: SessionView): void
+}
+
+/** Rows that belong to the opened workspace (its owned session id set). */
+function ownedItems(page: SessionSummary[], workspace: WorkspaceRow): SessionView[] {
+  const owned = new Set(workspace.sessionIds)
+  return page
+    .filter(item => owned.has(item.sessionId as never))
+    .map(item => toSessionView(item))
+}
+
+/**
+ * Render one workspace's paged session list.
+ * @param props - the workspace, back action, and pick action.
+ * @returns the session list.
+ */
+export function SessionListView({ workspace, onBack, onPick }: SessionListViewProps) {
+  const [rows, setRows] = useState<SessionView[]>([])
+  const [hasMore, setHasMore] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const [creating, setCreating] = useState(false)
+  const [createError, setCreateError] = useState<string | undefined>(undefined)
+  const cursorRef = useRef<string | undefined>(undefined)
+  const busyRef = useRef(false)
+
+  // First page on mount. The workspace roster is re-read alongside so the
+  // owned-id set is fresh: a session created (or attached) since this
+  // workspace row was captured must not vanish from the filter.
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    setError(undefined)
+    void Promise.all([listSessions(), listWorkspaces()]).then(
+      ([page, workspaces]) => {
+        if (cancelled) return
+        const fresh = workspaces.find(candidate => candidate.workspaceId === workspace.workspaceId)
+        const current = fresh ?? workspace
+        setRows(ownedItems(page.items, current))
+        cursorRef.current = page.nextCursor
+        setHasMore(page.hasMore)
+        setLoading(false)
+      },
+      (reason: unknown) => {
+        if (cancelled) return
+        setError(errorText(reason))
+        setLoading(false)
+      },
+    )
+    return () => { cancelled = true }
+  }, [workspace])
+
+  /** Pull the next page and append the rows that belong to this workspace. */
+  const loadMore = useCallback(() => {
+    if (busyRef.current) return
+    const cursor = cursorRef.current
+    if (cursor === undefined) return
+    busyRef.current = true
+    setLoading(true)
+    void listSessions(cursor).then(
+      (page) => {
+        busyRef.current = false
+        setLoading(false)
+        cursorRef.current = page.nextCursor
+        setHasMore(page.hasMore)
+        setRows(previous => [...previous, ...ownedItems(page.items, workspace)])
+      },
+      (reason: unknown) => {
+        busyRef.current = false
+        setLoading(false)
+        setError(errorText(reason))
+      },
+    )
+  }, [workspace])
+
+  /** Create a blank session in this workspace and open it immediately. */
+  const handleCreate = useCallback(() => {
+    if (creating) return
+    setCreating(true)
+    setCreateError(undefined)
+    void createSession({ workspaceId: workspace.workspaceId }).then(
+      (created) => {
+        setCreating(false)
+        const view: SessionView = {
+          sessionId: created.sessionId,
+          title: '新会话',
+          updatedAt: Date.now(),
+          running: false,
+          blank: true,
+        }
+        setRows(previous => [view, ...previous])
+        onPick(view)
+      },
+      (reason: unknown) => {
+        setCreating(false)
+        setCreateError(errorText(reason))
+      },
+    )
+  }, [creating, workspace, onPick])
+
+  const createHint = createError !== undefined ? staleHostHint(createError) : undefined
+
+  return (
+    <div className="mobile">
+      <header className="mobile-header">
+        <button type="button" className="mobile-back" aria-label="返回" onClick={onBack}>‹</button>
+        <h1 className="mobile-title mobile-titleInline">{workspace.title}</h1>
+        <ThemeToggle />
+      </header>
+      {error !== undefined && <p className="mobile-error mobile-pad">{error}</p>}
+      <div className="mobile-pad">
+        <button
+          type="button"
+          className="mobile-new"
+          disabled={creating}
+          onClick={() => { void handleCreate() }}
+        >
+          {creating ? '创建中…' : '+ 新建会话'}
+        </button>
+      </div>
+      {createError !== undefined && (
+        <p className="mobile-error mobile-pad">
+          {createError}
+          {createHint !== undefined && <span className="mobile-hint">{createHint}</span>}
+        </p>
+      )}
+      <ul className="mobile-list">
+        {rows.map(row => (
+          <li key={row.sessionId}>
+            <button type="button" className="mobile-row" onClick={() => { onPick(row) }}>
+              <span className="mobile-rowMain">
+                <span className="mobile-rowTitle">
+                  {row.blank ? '新会话' : row.title}
+                  {row.running ? <span className="mobile-live">●</span> : null}
+                </span>
+                <span className="mobile-rowMeta">{formatTime(row.updatedAt)}</span>
+              </span>
+              <span className="mobile-chevron">›</span>
+            </button>
+          </li>
+        ))}
+      </ul>
+      {hasMore && (
+        <div className="mobile-pad">
+          <button
+            type="button"
+            className="mobile-button mobile-block"
+            disabled={loading}
+            onClick={() => { void loadMore() }}
+          >
+            {loading ? '加载中…' : '加载更多会话'}
+          </button>
+        </div>
+      )}
+      {!hasMore && rows.length === 0 && !loading && (
+        <div className="mobile-empty">
+          <p className="mobile-muted">该工作区还没有会话，点上方按钮新建一个</p>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/mobile/views/WorkspaceView.tsx

@@ -0,0 +1,108 @@
+/**
+ * Landing level: the workspace roster. The mobile surface opens straight
+ * here — no new-session homepage — and every workspace row is a thin
+ * fetch from workspace.list (the roster is small; sessions are not loaded
+ * until a workspace is opened).
+ */
+
+import { useEffect, useState } from 'react'
+import type { WorkspaceView as WorkspaceRow } from '@deepseek-ai/dsh-host-apiproxy/api/workspace'
+import { listWorkspaces } from '../api.ts'
+import { errorText } from './App.tsx'
+import { ThemeToggle } from '../theme-toggle.tsx'
+
+/** Props for the workspace roster. */
+export interface WorkspaceViewProps {
+  /** Open one workspace's session list. */
+  onPick(workspace: WorkspaceRow): void
+}
+
+/**
+ * Render the workspace roster.
+ * @param props - the pick action.
+ * @returns the roster.
+ */
+export function WorkspaceView({ onPick }: WorkspaceViewProps) {
+  const [items, setItems] = useState<WorkspaceRow[] | undefined>(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    let cancelled = false
+    void listWorkspaces().then(
+      (rows) => {
+        if (cancelled) return
+        setItems(rows)
+      },
+      (reason: unknown) => {
+        if (cancelled) return
+        setError(errorText(reason))
+      },
+    )
+    return () => { cancelled = true }
+  }, [])
+
+  if (error !== undefined) {
+    return (
+      <div className="mobile">
+        <header className="mobile-header">
+          <h1 className="mobile-title">工作区</h1>
+          <ThemeToggle />
+        </header>
+        <div className="mobile-empty">
+          <p className="mobile-error">加载失败：{error}</p>
+          <button type="button" className="mobile-button" onClick={() => { setError(undefined); setItems(undefined) }}>
+            重试
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  if (items === undefined) {
+    return (
+      <div className="mobile">
+        <header className="mobile-header">
+          <h1 className="mobile-title">工作区</h1>
+          <ThemeToggle />
+        </header>
+        <div className="mobile-empty">
+          <p className="mobile-muted">加载中…</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (items.length === 0) {
+    return (
+      <div className="mobile">
+        <header className="mobile-header">
+          <h1 className="mobile-title">工作区</h1>
+          <ThemeToggle />
+        </header>
+        <div className="mobile-empty">
+          <p className="mobile-muted">暂无工作区</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mobile">
+      <header className="mobile-header">
+        <h1 className="mobile-title">工作区</h1>
+        <ThemeToggle />
+      </header>
+      <ul className="mobile-list">
+        {items.map(workspace => (
+          <li key={workspace.workspaceId}>
+            <button type="button" className="mobile-row" onClick={() => { onPick(workspace) }}>
+              <span className="mobile-rowTitle">{workspace.title}</span>
+              <span className="mobile-rowMeta">{workspace.path}</span>
+              <span className="mobile-chevron">›</span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}