@linxin666/dsh-remote-web-ui 0.2.8 → 0.3.0

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

@@ -1,17 +1,22 @@
 // @vitest-environment jsdom
 /** Mobile workspace landing: roster rendering and QR deep-link selection. */
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import { cleanup, render, screen, waitFor, fireEvent } from '@testing-library/react'
 import type { WorkspaceView as WorkspaceRow } from '@deepseek-ai/dsh-host-apiproxy/api/workspace'
 import { mobileWorkspaceTarget } from './App.tsx'
 import { WorkspaceView } from './WorkspaceView.tsx'
 
 vi.mock('../api.ts', () => ({
   listWorkspaces: vi.fn(),
+  listDirectory: vi.fn(),
+  createWorkspace: vi.fn(),
 }))
-import { listWorkspaces } from '../api.ts'
+import { listWorkspaces, listDirectory, createWorkspace } from '../api.ts'
 
 const listWorkspacesMock = vi.mocked(listWorkspaces)
+const listDirectoryMock = vi.mocked(listDirectory)
+const createWorkspaceMock = vi.mocked(createWorkspace)
+
 const workspaces: WorkspaceRow[] = [
   {
     workspaceId: 'ws-1' as never,
@@ -64,3 +69,159 @@ describe('mobile workspace deep link', () => {
     expect(onPick).not.toHaveBeenCalled()
   })
 })
+
+describe('mobile workspace creation', () => {
+  it('shows new workspace button and navigates to directory browser', async () => {
+    listWorkspacesMock.mockResolvedValue(workspaces)
+    listDirectoryMock.mockResolvedValue({
+      path: '/home/user',
+      home: '/home/user',
+      crumbs: [{ name: '', path: '/', hidden: false }, { name: 'home', path: '/home', hidden: false }, { name: 'user', path: '/home/user', hidden: false }],
+      entries: [
+        { name: 'projects', path: '/home/user/projects', hidden: false },
+        { name: '.config', path: '/home/user/.config', hidden: true }
+      ],
+      truncated: false
+    })
+
+    const onPick = vi.fn()
+    render(<WorkspaceView onPick={onPick} />)
+
+    // Wait for workspaces to load
+    const createBtn = await screen.findByText('+ 新建工作区')
+    
+    // Click create button
+    fireEvent.click(createBtn)
+
+    // Verify directory browser renders
+    expect(await screen.findByText('选择目录')).toBeTruthy()
+    
+    // Verify crumbs
+    expect(await screen.findByText('user')).toBeTruthy()
+    
+    // Verify entries
+    expect(await screen.findByText('📁 projects')).toBeTruthy()
+    expect(await screen.findByText('📁 .config')).toBeTruthy()
+  })
+
+  it('navigates into directory and allows breadcrumb navigation', async () => {
+    listWorkspacesMock.mockResolvedValue(workspaces)
+    
+    // Initial dir
+    listDirectoryMock.mockResolvedValueOnce({
+      path: '/home/user',
+      home: '/home/user',
+      crumbs: [{ name: '', path: '/', hidden: false }, { name: 'home', path: '/home', hidden: false }, { name: 'user', path: '/home/user', hidden: false }],
+      entries: [{ name: 'projects', path: '/home/user/projects', hidden: false }],
+      truncated: false
+    })
+
+    const onPick = vi.fn()
+    render(<WorkspaceView onPick={onPick} />)
+
+    // Open dir browser
+    fireEvent.click(await screen.findByText('+ 新建工作区'))
+    
+    // Wait for first dir listing
+    const projBtn = await screen.findByText('📁 projects')
+
+    // Prepare next listing
+    listDirectoryMock.mockResolvedValueOnce({
+      path: '/home/user/projects',
+      home: '/home/user',
+      crumbs: [
+        { name: '', path: '/', hidden: false },
+        { name: 'home', path: '/home', hidden: false },
+        { name: 'user', path: '/home/user', hidden: false },
+        { name: 'projects', path: '/home/user/projects', hidden: false }
+      ],
+      entries: [{ name: 'foo', path: '/home/user/projects/foo', hidden: false }],
+      truncated: false
+    })
+
+    // Click into folder
+    fireEvent.click(projBtn)
+
+    // Verify new contents load
+    expect(await screen.findByText('📁 foo')).toBeTruthy()
+    
+    // Check breadcrumb
+    const homeCrumb = screen.getByText('home')
+    expect(homeCrumb).toBeTruthy()
+    
+    // Click breadcrumb
+    listDirectoryMock.mockResolvedValueOnce({
+      path: '/home',
+      home: '/home/user',
+      crumbs: [{ name: '', path: '/', hidden: false }, { name: 'home', path: '/home', hidden: false }],
+      entries: [{ name: 'user', path: '/home/user', hidden: false }],
+      truncated: false
+    })
+    
+    fireEvent.click(homeCrumb)
+    expect(await screen.findByText('📁 user')).toBeTruthy()
+  })
+
+  it('creates workspace successfully', async () => {
+    listWorkspacesMock.mockResolvedValue(workspaces)
+    listDirectoryMock.mockResolvedValue({
+      path: '/home/user/projects/foo',
+      home: '/home/user',
+      crumbs: [{ name: '', path: '/', hidden: false }, { name: 'foo', path: '/home/user/projects/foo', hidden: false }],
+      entries: [],
+      truncated: false
+    })
+
+    const newWorkspace = { ...workspaces[0], workspaceId: 'ws-new' as never, title: 'foo' }
+    createWorkspaceMock.mockResolvedValue({
+      workspace: newWorkspace,
+      created: true
+    })
+
+    const onPick = vi.fn()
+    render(<WorkspaceView onPick={onPick} />)
+
+    fireEvent.click(await screen.findByText('+ 新建工作区'))
+    
+    const selectBtn = await screen.findByText('选择此目录')
+    fireEvent.click(selectBtn)
+
+    expect(await screen.findByText('创建中…')).toBeTruthy()
+    
+    await waitFor(() => {
+      expect(createWorkspaceMock).toHaveBeenCalledWith('/home/user/projects/foo')
+      expect(onPick).toHaveBeenCalledWith(newWorkspace)
+    })
+  })
+
+  it('handles errors from directory listing and workspace creation', async () => {
+    listWorkspacesMock.mockResolvedValue(workspaces)
+    listDirectoryMock.mockRejectedValue(new Error('Permission denied'))
+
+    const onPick = vi.fn()
+    render(<WorkspaceView onPick={onPick} />)
+
+    fireEvent.click(await screen.findByText('+ 新建工作区'))
+
+    // Verify error from listing
+    expect(await screen.findByText('Permission denied')).toBeTruthy()
+    
+    // Retry with success
+    listDirectoryMock.mockResolvedValue({
+      path: '/home',
+      home: '/home/user',
+      crumbs: [],
+      entries: [],
+      truncated: false
+    })
+    fireEvent.click(screen.getByText('重试'))
+    
+    const selectBtn = await screen.findByText('选择此目录')
+    
+    // Fail creation
+    createWorkspaceMock.mockRejectedValue(new Error('Already exists'))
+    fireEvent.click(selectBtn)
+
+    expect(await screen.findByText('Already exists')).toBeTruthy()
+  })
+})

package/src/mobile/views/WorkspaceView.tsx

@@ -7,10 +7,125 @@
 
 import { useEffect, useState } from 'react'
 import type { WorkspaceView as WorkspaceRow } from '@deepseek-ai/dsh-host-apiproxy/api/workspace'
-import { listWorkspaces } from '../api.ts'
+import { listWorkspaces, listDirectory, createWorkspace, type DirectoryListing, type DirectoryEntry } from '../api.ts'
 import { errorText } from './App.tsx'
 import { ThemeToggle } from '../theme-toggle.tsx'
 
+/** Props for the directory browser. */
+interface DirectoryBrowserProps {
+  onCancel(): void
+  onPick(workspace: WorkspaceRow): void
+}
+
+/**
+ * Render the directory browser for creating a new workspace.
+ */
+function DirectoryBrowser({ onCancel, onPick }: DirectoryBrowserProps) {
+  const [listing, setListing] = useState<DirectoryListing | undefined>(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const [creating, setCreating] = useState(false)
+  const [path, setPath] = useState<string | undefined>(undefined)
+  const [reload, setReload] = useState(0)
+
+  useEffect(() => {
+    let cancelled = false
+    setError(undefined)
+    setListing(undefined)
+    void listDirectory(path).then(
+      (res) => {
+        if (cancelled) return
+        setListing(res)
+      },
+      (reason: unknown) => {
+        if (cancelled) return
+        setError(errorText(reason))
+      },
+    )
+    return () => { cancelled = true }
+  }, [path, reload])
+
+  const handleCreate = async () => {
+    if (listing === undefined || creating) return
+    setCreating(true)
+    setError(undefined)
+    try {
+      const result = await createWorkspace(listing.path)
+      onPick(result.workspace)
+    } catch (reason: unknown) {
+      setCreating(false)
+      setError(errorText(reason))
+    }
+  }
+
+  return (
+    <div className="mobile dir-browser">
+      <header className="mobile-header">
+        <button type="button" className="mobile-headerAction" onClick={onCancel}>返回</button>
+        <h1 className="mobile-title">选择目录</h1>
+      </header>
+      
+      {listing !== undefined && (
+        <div className="dir-crumbs">
+          {listing.crumbs.map((crumb, idx) => (
+            <span key={crumb.path}>
+              <button
+                type="button"
+                className="dir-crumb"
+                onClick={() => setPath(crumb.path)}
+              >
+                {crumb.name || '/'}
+              </button>
+              {idx < listing.crumbs.length - 1 && <span className="dir-crumb-separator">/</span>}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {error !== undefined ? (
+        <div className="mobile-empty">
+          <p className="mobile-error">{error}</p>
+          <button type="button" className="mobile-button" onClick={() => setReload(n => n + 1)}>重试</button>
+        </div>
+      ) : listing === undefined ? (
+        <div className="mobile-empty">
+          <p className="mobile-muted">加载中…</p>
+        </div>
+      ) : (
+        <ul className="mobile-list">
+          {listing.entries.length === 0 ? (
+            <div className="mobile-empty dir-empty">
+              <p className="mobile-muted">空目录</p>
+            </div>
+          ) : (
+            listing.entries.map((entry: DirectoryEntry) => (
+              <li key={entry.path}>
+                <button
+                  type="button"
+                  className={`mobile-row dir-entry ${entry.hidden ? 'dir-entry-hidden' : ''}`}
+                  onClick={() => setPath(entry.path)}
+                >
+                  <span className="mobile-rowTitle">📁 {entry.name}</span>
+                </button>
+              </li>
+            ))
+          )}
+        </ul>
+      )}
+
+      <div className="dir-select">
+        <button
+          type="button"
+          className="mobile-button"
+          disabled={listing === undefined || creating}
+          onClick={() => void handleCreate()}
+        >
+          {creating ? '创建中…' : '选择此目录'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
 /** Props for the workspace roster. */
 export interface WorkspaceViewProps {
   /** Workspace carried by the pairing link; opened after the roster loads. */
@@ -29,6 +144,7 @@ export function WorkspaceView({ initialWorkspaceId, onPick }: WorkspaceViewProps
   const [error, setError] = useState<string | undefined>(undefined)
   // Bumped by the retry button to re-run the roster fetch effect.
   const [reload, setReload] = useState(0)
+  const [isCreating, setIsCreating] = useState(false)
 
   useEffect(() => {
     let cancelled = false
@@ -52,6 +168,15 @@ export function WorkspaceView({ initialWorkspaceId, onPick }: WorkspaceViewProps
     return () => { cancelled = true }
   }, [initialWorkspaceId, onPick, reload])
 
+  if (isCreating) {
+    return (
+      <DirectoryBrowser
+        onCancel={() => setIsCreating(false)}
+        onPick={onPick}
+      />
+    )
+  }
+
   if (error !== undefined) {
     return (
       <div className="mobile">
@@ -83,37 +208,38 @@ export function WorkspaceView({ initialWorkspaceId, onPick }: WorkspaceViewProps
     )
   }
 
-  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>
+      {items.length === 0 ? (
+        <div className="mobile-empty">
+          <p className="mobile-muted">暂无工作区</p>
+        </div>
+      ) : (
+        <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 style={{ padding: '16px' }}>
+        <button
+          type="button"
+          className="mobile-button"
+          onClick={() => setIsCreating(true)}
+        >
+          + 新建工作区
+        </button>
+      </div>
     </div>
   )
 }

package/src/mobile-api.ts

@@ -9,9 +9,12 @@
  * 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.
+ * - Only an explicit allowlist of methods is proxied ON THIS PREFIX. The
+ *   allowlist constrains the /m/api proxy alone: the same paired-device
+ *   cookie also passes the global api/gate, so a paired device is a
+ *   full-control credential for the host /api surface outside the SDK's
+ *   loopback-pinned privileged set (settings/credentials/agentPreset/host
+ *   actions/llm.discoverModels). Pairing is full device trust.
  * - `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
@@ -24,6 +27,7 @@ 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 { PendingTracker } from './mobile-pending.ts'
 import type { PairingService } from './pairing.ts'
 import { readBoundedJson, writeJson } from './http.ts'
 import { readCookie } from './gate.ts'
@@ -37,6 +41,8 @@ import { readCookie } from './gate.ts'
  * device at a time.
  */
 const MOBILE_ALLOWLIST = new Set([
+  'host.listDirectory',
+  'workspace.create',
   'workspace.list',
   'agentPreset.list',
   'session.create',
@@ -55,6 +61,8 @@ const MOBILE_ALLOWLIST = new Set([
  * settings-domain write).
  */
 const MOBILE_PREFERENCES_METHOD = 'mobile.preferences'
+const MOBILE_PENDING_METHOD = 'mobile.pending'
+const MOBILE_RESPOND_METHOD = 'mobile.respond'
 
 /** One session.list page (thin phones load incrementally). */
 const SESSION_PAGE_SIZE = 20
@@ -87,6 +95,8 @@ export interface MobileApiDeps {
   service: PairingService
   /** The host ApiProxy service (injected by the plugin). */
   apiProxy: ApiProxy
+  /** The pending tracker. */
+  pendingTracker: PendingTracker
   /** The resolved mobile composer preference (live per request). */
   mobileEnterToSend: () => boolean
   /** SSE keep-alive ping cadence for the mux stream (default 15000 ms; test seam). */
@@ -147,14 +157,16 @@ export function makeMobileApiRoutes(deps: MobileApiDeps): WebRoute[] {
       return
     }
     const method = pathname.slice(MOBILE_API_METHOD_PREFIX.length)
-    const local = method === MOBILE_PREFERENCES_METHOD
+    const local = method === MOBILE_PREFERENCES_METHOD 
+      || method === MOBILE_PENDING_METHOD 
+      || method === MOBILE_RESPOND_METHOD
     if (!MOBILE_ALLOWLIST.has(method) && !local) {
       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)
+      envelope = await readBoundedJson(req, 64 * 1024)
     } catch {
       writeJson(res, 400, { ok: false, error: { code: 'bad-request', message: 'invalid json body' } })
       return
@@ -166,11 +178,41 @@ export function makeMobileApiRoutes(deps: MobileApiDeps): WebRoute[] {
       return
     }
     if (local) {
-      writeJson(res, 200, {
-        type: 'server-response',
-        rpcId,
-        result: { ok: true, value: { mobileEnterToSend: mobileEnterToSend() } },
-      })
+      if (method === MOBILE_PREFERENCES_METHOD) {
+        writeJson(res, 200, {
+          type: 'server-response',
+          rpcId,
+          result: { ok: true, value: { mobileEnterToSend: mobileEnterToSend() } },
+        })
+      } else if (method === MOBILE_PENDING_METHOD) {
+        const payload = parsed.payload as any
+        writeJson(res, 200, {
+          type: 'server-response',
+          rpcId,
+          result: { ok: true, value: deps.pendingTracker.pending(payload?.sessionId) },
+        })
+      } else if (method === MOBILE_RESPOND_METHOD) {
+        const payload = parsed.payload as any
+        try {
+          const receipt = await apiProxy.respond({
+            type: 'client-response',
+            rpcId: RpcId(payload.rpcId),
+            result: { ok: true, value: payload.response },
+          })
+          writeJson(res, 200, {
+            type: 'server-response',
+            rpcId,
+            result: { ok: true, value: receipt },
+          })
+        } 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 } },
+          })
+        }
+      }
       return
     }
     try {
@@ -198,8 +240,10 @@ export function makeMobileApiRoutes(deps: MobileApiDeps): WebRoute[] {
       return
     }
     if (!gateOk(req)) {
-      res.writeHead(403)
-      res.end('forbidden')
+      writeJson(res, 403, {
+        ok: false,
+        error: { code: 'unpaired', message: 'mobile session is not paired' },
+      })
       return
     }
     res.writeHead(200, {
@@ -233,6 +277,7 @@ export function makeMobileApiRoutes(deps: MobileApiDeps): WebRoute[] {
       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
+        deps.pendingTracker.onFrame(frame as any)
         res.write(`data: ${JSON.stringify(frame)}\n\n`)
       }
     } catch {
@@ -250,11 +295,6 @@ export function makeMobileApiRoutes(deps: MobileApiDeps): WebRoute[] {
   ]
 }
 
-/** Read a request body as JSON (bounded). */
-async function readJsonBody(req: IncomingMessage): Promise<unknown> {
-  return readBoundedJson(req, 64 * 1024)
-}
-
 /** Dispatch one allowlisted method through the host ApiProxy. */
 async function dispatch(apiProxy: ApiProxy, method: string, payload: unknown, rpcId: string, signal?: AbortSignal): Promise<unknown> {
   const request: RpcRequest<unknown> = { rpcId: RpcId(rpcId), payload }
@@ -303,6 +343,8 @@ async function dispatch(apiProxy: ApiProxy, method: string, payload: unknown, rp
     result: response.result,
   })
   if (method === 'workspace.list') return wrap(await apiProxy.workspace.list(request as never))
+  if (method === 'workspace.create') return wrap(await apiProxy.workspace.create(request as never))
+  if (method === 'host.listDirectory') return wrap(await apiProxy.host.listDirectory(request as never, signal ?? new AbortController().signal))
   if (method === 'agentPreset.list') return wrap(await apiProxy.agentPresets.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))

package/src/mobile-pending.ts

@@ -0,0 +1,88 @@
+import type { MuxFrame } from '@deepseek-ai/dsh-host-apiproxy/api/events'
+import type { RpcRequest } from '@deepseek-ai/dsh-host-apiproxy/api/rpc'
+
+export interface PendingApproval {
+  rpcId: string
+  approvalId: string
+  toolName: string
+  callId?: string
+  reason?: string
+}
+
+export interface PendingQuestion {
+  rpcId: string
+  questions: Array<{
+    id: string
+    question: string
+    detail?: string
+    header?: string
+    options?: Array<{ label: string; description?: string }>
+    multiSelect?: boolean
+  }>
+}
+
+export interface PendingState {
+  approvals: PendingApproval[]
+  questions: PendingQuestion[]
+}
+
+export class PendingTracker {
+  private readonly sessions = new Map<string, { approvals: Map<string, PendingApproval>; questions: PendingQuestion[] }>()
+
+  /** Process one mux frame and update the pending state. */
+  onFrame(frame: RpcRequest<MuxFrame>): void {
+    const payload = frame.payload
+    if (payload.type === 'approval/requested') {
+      const state = this._getOrInit(payload.sessionId)
+      state.approvals.set(payload.approvalId, {
+        rpcId: frame.rpcId,
+        approvalId: payload.approvalId,
+        toolName: payload.toolName,
+        callId: payload.callId,
+        reason: payload.reason,
+      })
+    } else if (payload.type === 'approval/resolved') {
+      const state = this.sessions.get(payload.sessionId)
+      if (state) {
+        state.approvals.delete(payload.approvalId)
+      }
+    } else if (payload.type === 'question/requested') {
+      const state = this._getOrInit(payload.sessionId)
+      state.questions.push({
+        rpcId: frame.rpcId,
+        questions: payload.questions as any,
+      })
+    } else if (payload.type === 'question/resolved') {
+      const state = this.sessions.get(payload.sessionId)
+      if (state) {
+        state.questions = state.questions.filter(q => q.rpcId !== payload.questionRpcId)
+      }
+    }
+  }
+
+  private _getOrInit(sessionId: string) {
+    let state = this.sessions.get(sessionId)
+    if (!state) {
+      state = { approvals: new Map(), questions: [] }
+      this.sessions.set(sessionId, state)
+    }
+    return state
+  }
+
+  /** Query pending items for a session. */
+  pending(sessionId: string): PendingState {
+    const state = this.sessions.get(sessionId)
+    if (!state) {
+      return { approvals: [], questions: [] }
+    }
+    return {
+      approvals: Array.from(state.approvals.values()),
+      questions: state.questions,
+    }
+  }
+
+  /** Clear all pending state for a session. */
+  clear(sessionId: string): void {
+    this.sessions.delete(sessionId)
+  }
+}