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

package/src/mobile/views/ChatView.tsx

@@ -16,7 +16,8 @@ import type { MuxFrame } from '@deepseek-ai/dsh-host-apiproxy/api/events'
 import type { SessionModels } from '@deepseek-ai/dsh-host-apiproxy/api/sessions'
 import { loadHistory, prompt, type SessionView } from './App.tsx'
 import { errorText, formatTime, staleHostHint } from './App.tsx'
-import { fetchMobilePreferences, models, selectModel, sendCommand } from '../api.ts'
+import { fetchMobilePreferences, models, selectModel, sendCommand, fetchPending, respondApproval, respondQuestion } from '../api.ts'
+import type { PendingApproval, PendingQuestionItem } from '../api.ts'
 import { EventFolder, foldEvents, type RenderMessage, type ToolCallInfo, type WireEvent } from '../messages.ts'
 import { renderMarkdown } from '../markdown.ts'
 import { MuxClient } from '../mux.ts'
@@ -164,6 +165,12 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
    * the legacy Enter-to-send behavior until the preference loads).
    */
   const [mobileEnterToSend, setMobileEnterToSend] = useState(true)
+  /** Whether the assistant is currently generating (turn/start..turn/end). */
+  const [running, setRunning] = useState(false)
+  /** Pending tool approvals awaiting user decision (#1025). */
+  const [pendingApprovals, setPendingApprovals] = useState<PendingApproval[]>([])
+  /** Pending questions awaiting user answer (#1025). */
+  const [pendingQuestions, setPendingQuestions] = useState<PendingQuestionItem[]>([])
 
   // Read-only mobile display preferences ride the plugin's local
   // `/m/api` method; a failure keeps the default (Enter sends).
@@ -268,6 +275,11 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
       if (frame.type === 'session/event') {
         if (frame.sessionId !== session.sessionId) return
         const event = frame.event as WireEvent
+        // Track the turn running state for the "outputting" indicator (#1017).
+        if (typeof event.type === 'string') {
+          if (event.type === 'turn/start') setRunning(true)
+          if (event.type === 'turn/end') setRunning(false)
+        }
         if (tailLoadingRef.current) {
           if (liveBufferRef.current.length >= MAX_TAIL_BUFFER_EVENTS) {
             // Bound the tail-load window: drop the oldest buffered event and
@@ -295,10 +307,62 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
         && frame.sessionId === session.sessionId
         && frame.key === 'permissions') {
         setPermissions(parsePermissionSelect(frame.value))
+        return
+      }
+      // Approval/question frames for this session (#1025).
+      if (!('sessionId' in frame) || frame.sessionId !== session.sessionId) return
+      if (frame.type === 'approval/requested') {
+        setPendingApprovals(previous => {
+          if (previous.some(a => a.approvalId === frame.approvalId)) return previous
+          return [...previous, {
+            approvalId: frame.approvalId as string,
+            toolName: frame.toolName,
+            callId: frame.callId as string | undefined,
+            reason: frame.reason,
+          }]
+        })
+        return
+      }
+      if (frame.type === 'approval/resolved') {
+        setPendingApprovals(previous => previous.filter(a => a.approvalId !== frame.approvalId))
+        return
+      }
+      if (frame.type === 'question/requested') {
+        const items = (frame.questions as Array<{
+          id: string; question: string; detail?: string; header?: string
+          options?: Array<{ label: string; description?: string }>; multiSelect?: boolean
+        }>)
+        setPendingQuestions(items)
+        return
+      }
+      if (frame.type === 'question/resolved') {
+        setPendingQuestions([])
+        return
       }
     })
   }, [mux, session.sessionId])
 
+  // Weak-network polling fallback: when the assistant is running, poll for
+  // pending approvals/questions every 1.5 s so the phone can act even if the
+  // SSE channel drops frames (#1025).
+  useEffect(() => {
+    if (!running) return
+    let cancelled = false
+    const tick = (): void => {
+      void fetchPending(session.sessionId).then(
+        (state) => {
+          if (cancelled) return
+          setPendingApprovals(state.approvals)
+          setPendingQuestions(state.questions)
+        },
+        () => { /* transient; next tick retries */ },
+      )
+    }
+    tick()
+    const timer = setInterval(tick, 1500)
+    return () => { cancelled = true; clearInterval(timer) }
+  }, [running, session.sessionId])
+
   const scrollToBottom = useCallback(() => {
     const el = scrollRef.current
     if (el === undefined) return
@@ -424,6 +488,26 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
         ))}
         {loading && messages.length === 0 && <p className="chat-typing">加载中…</p>}
         {!loading && messages.length === 0 && <p className="chat-typing">还没有消息，发一句话开始吧</p>}
+        {running && (
+          <div className="chat-turn-status" role="status" aria-label="输出中">
+            输出中<span className="chat-turn-dots" aria-hidden><span /><span /><span /></span>
+          </div>
+        )}
+        {pendingApprovals.map(approval => (
+          <ApprovalPanel
+            key={approval.approvalId}
+            approval={approval}
+            sessionId={session.sessionId}
+            onResolved={(id) => { setPendingApprovals(prev => prev.filter(a => a.approvalId !== id)) }}
+          />
+        ))}
+        {pendingQuestions.length > 0 && (
+          <QuestionPanel
+            questions={pendingQuestions}
+            sessionId={session.sessionId}
+            onResolved={() => { setPendingQuestions([]) }}
+          />
+        )}
       </div>
       <div className="chat-tools">
         <button type="button" className="chat-chip" onClick={() => { setSheet('model') }} aria-haspopup="dialog">
@@ -527,7 +611,7 @@ const MessageRow = memo(function MessageRow({ message, showToolCalls, showSystem
         <ToolDisclosure tools={message.tools} />
       )}
       {message.kind === 'assistant'
-        ? <MarkdownText text={message.text} />
+        ? <MarkdownText text={message.text} pending={message.pending === true} />
         : <CollapsibleText text={message.text} />}
       {message.failed === true && <span className="chat-msg-failtag">本次回复失败</span>}
       <span className="chat-msg-time">{formatTime(message.time)}</span>
@@ -556,10 +640,10 @@ function ReasoningDisclosure({ text, pending }: { text: string; pending: boolean
   )
 }
 
-/** Collapsed-by-default tool-call disclosure: summary row + expandable details. */
+/** Collapsed-by-default tool-call disclosure: pill tag summary + card details (#529). */
 function ToolDisclosure({ tools }: { tools: ToolCallInfo[] }) {
   const [open, setOpen] = useState(false)
-  const names = [...new Set(tools.map(tool => tool.name))].join(' / ')
+  const uniqueNames = [...new Set(tools.map(tool => tool.name))]
   return (
     <div className={`chat-disclosure chat-tools${open ? ' chat-disclosure-open' : ''}`}>
       <button
@@ -570,15 +654,23 @@ function ToolDisclosure({ tools }: { tools: ToolCallInfo[] }) {
       >
         <span className="chat-disclosure-caret" aria-hidden>›</span>
         <span className="chat-disclosure-label">工具</span>
-        {!open && <span className="chat-disclosure-summary">{names}</span>}
+        {!open && (
+          <span className="chat-disclosure-summary chat-tool-pills">
+            {uniqueNames.map(name => (
+              <span key={name} className="chat-tool-pill">{name}</span>
+            ))}
+          </span>
+        )}
         <span className="chat-disclosure-count">{tools.length} 次</span>
       </button>
       {open && (
         <div className="chat-disclosure-body chat-tools-body">
           {tools.map((tool, index) => (
-            <div className="chat-tool-item" key={`${tool.callId}-${index}`}>
-              <span className="chat-tool-name">{tool.name}</span>
-              {tool.arguments !== undefined && <pre className="chat-tool-args">{tool.arguments}</pre>}
+            <div className="chat-tool-card" key={`${tool.callId}-${index}`}>
+              <span className="chat-tool-pill">{tool.name}</span>
+              {tool.arguments !== undefined && (
+                <pre className="chat-tool-args">{tool.arguments}</pre>
+              )}
             </div>
           ))}
         </div>
@@ -587,6 +679,17 @@ function ToolDisclosure({ tools }: { tools: ToolCallInfo[] }) {
   )
 }
 
+/**
+ * Minimum interval between full markdown re-parses of a live (pending)
+ * assistant message. Every streamed chunk replaces the message object, and
+ * re-parsing the whole accumulated text per chunk turns a long reply into
+ * O(n^2) work on mobile. Pending text keeps the last parsed result visible
+ * and re-parses at most once per interval; the moment the turn closes the
+ * final text parses immediately, so terminal messages render exactly as
+ * before.
+ */
+export const STREAM_RENDER_INTERVAL_MS = 120
+
 /**
  * Assistant text rendered as GFM markdown (escape-first, protocol
  * allow-list — see markdown.ts). Long replies collapse by clamping the
@@ -594,9 +697,59 @@ function ToolDisclosure({ tools }: { tools: ToolCallInfo[] }) {
  * fences or tables never leak malformed markup into the DOM. User
  * messages stay plain text (CollapsibleText).
  */
-function MarkdownText({ text }: { text: string }) {
+function MarkdownText({ text, pending }: { text: string; pending: boolean }) {
   const [open, setOpen] = useState(false)
-  const html = useMemo(() => renderMarkdown(text), [text])
+  const [html, setHtml] = useState<string>(() => renderMarkdown(text))
+  /** Text of the last render actually applied to `html`. */
+  const renderedTextRef = useRef(text)
+  /** Newest streamed text, read by the trailing render at fire time. */
+  const latestTextRef = useRef(text)
+  /** Timestamp of the last applied parse (throttle window start). */
+  const lastRenderAtRef = useRef(performance.now())
+  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+  // Throttled parse for a live stream: skip parses while the newest text is
+  // already rendered, parse immediately once the throttle window elapsed,
+  // otherwise schedule one trailing render that picks up the newest text.
+  useEffect(() => {
+    latestTextRef.current = text
+    if (!pending) {
+      // Turn closed: terminal messages are never throttled, so cancel any
+      // scheduled stream render and parse the final text immediately.
+      if (timerRef.current !== undefined) {
+        clearTimeout(timerRef.current)
+        timerRef.current = undefined
+      }
+      if (text === renderedTextRef.current) return
+      lastRenderAtRef.current = performance.now()
+      renderedTextRef.current = text
+      setHtml(renderMarkdown(text))
+      return
+    }
+    if (text === renderedTextRef.current) return
+    const elapsed = performance.now() - lastRenderAtRef.current
+    if (elapsed >= STREAM_RENDER_INTERVAL_MS) {
+      lastRenderAtRef.current = performance.now()
+      renderedTextRef.current = text
+      setHtml(renderMarkdown(text))
+      return
+    }
+    if (timerRef.current === undefined) {
+      timerRef.current = setTimeout(() => {
+        timerRef.current = undefined
+        lastRenderAtRef.current = performance.now()
+        renderedTextRef.current = latestTextRef.current
+        setHtml(renderMarkdown(latestTextRef.current))
+      }, STREAM_RENDER_INTERVAL_MS - elapsed)
+    }
+  }, [text, pending])
+
+  // Cancel the trailing stream render if the row unmounts mid-stream.
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== undefined) clearTimeout(timerRef.current)
+    }
+  }, [])
   const long = text.length > LONG_TEXT_LIMIT
   const collapsed = long && !open
   return (
@@ -937,3 +1090,168 @@ function DisplaySheet({ showToolCalls, showSystemMessages, onToolCalls, onSystem
     </Sheet>
   )
 }
+
+/* ── approval / question panels (#1025) ──────────────────────────────── */
+
+/** One pending tool approval card with allow/reject actions. */
+function ApprovalPanel({ approval, sessionId, onResolved }: {
+  approval: PendingApproval
+  sessionId: string
+  onResolved(approvalId: string): void
+}) {
+  const [busy, setBusy] = useState(false)
+  const [panelError, setPanelError] = useState<string | undefined>(undefined)
+
+  const act = (outcome: 'allowed-once' | 'rejected'): void => {
+    if (busy) return
+    setBusy(true)
+    setPanelError(undefined)
+    void respondApproval(sessionId, approval.approvalId, outcome).then(
+      () => { onResolved(approval.approvalId) },
+      (reason: unknown) => {
+        setBusy(false)
+        setPanelError(reason instanceof Error ? reason.message : String(reason))
+      },
+    )
+  }
+
+  return (
+    <div className="chat-approval-panel" role="alert">
+      <div className="chat-approval-header">
+        <span className="chat-tool-pill">{approval.toolName}</span>
+        {approval.reason !== undefined && (
+          <span className="chat-approval-reason">{approval.reason}</span>
+        )}
+      </div>
+      {panelError !== undefined && <p className="chat-approval-error">{panelError}</p>}
+      <div className="chat-approval-actions">
+        <button
+          type="button"
+          className="chat-approval-allow"
+          disabled={busy}
+          onClick={() => { act('allowed-once') }}
+        >
+          {busy ? '提交中…' : '允许一次'}
+        </button>
+        <button
+          type="button"
+          className="chat-approval-reject"
+          disabled={busy}
+          onClick={() => { act('rejected') }}
+        >
+          拒绝
+        </button>
+      </div>
+    </div>
+  )
+}
+
+/** Question panel: renders one or more questions with option pickers and a submit button. */
+function QuestionPanel({ questions, sessionId, onResolved }: {
+  questions: PendingQuestionItem[]
+  sessionId: string
+  onResolved(): void
+}) {
+  const [selections, setSelections] = useState<Map<string, { selected: string[]; custom: string }>>(
+    () => new Map(questions.map(q => [q.id, { selected: [], custom: '' }])),
+  )
+  const [busy, setBusy] = useState(false)
+  const [panelError, setPanelError] = useState<string | undefined>(undefined)
+
+  const toggle = (questionId: string, label: string, multi: boolean): void => {
+    setSelections(previous => {
+      const next = new Map(previous)
+      const entry = next.get(questionId) ?? { selected: [], custom: '' }
+      if (multi) {
+        const set = new Set(entry.selected)
+        if (set.has(label)) set.delete(label); else set.add(label)
+        next.set(questionId, { ...entry, selected: [...set] })
+      } else {
+        next.set(questionId, { ...entry, selected: [label] })
+      }
+      return next
+    })
+  }
+
+  const setCustom = (questionId: string, value: string): void => {
+    setSelections(previous => {
+      const next = new Map(previous)
+      const entry = next.get(questionId) ?? { selected: [], custom: '' }
+      next.set(questionId, { ...entry, custom: value })
+      return next
+    })
+  }
+
+  const submit = (): void => {
+    if (busy) return
+    setBusy(true)
+    setPanelError(undefined)
+    const answers = questions.map(q => {
+      const entry = selections.get(q.id) ?? { selected: [], custom: '' }
+      return {
+        id: q.id,
+        selected: entry.selected,
+        ...(entry.custom.trim() !== '' ? { custom: entry.custom.trim() } : {}),
+      }
+    })
+    void respondQuestion(sessionId, answers).then(
+      () => { onResolved() },
+      (reason: unknown) => {
+        setBusy(false)
+        setPanelError(reason instanceof Error ? reason.message : String(reason))
+      },
+    )
+  }
+
+  return (
+    <div className="chat-question-panel" role="form" aria-label="问题">
+      {questions.map(q => {
+        const entry = selections.get(q.id) ?? { selected: [], custom: '' }
+        return (
+          <div className="chat-question-group" key={q.id}>
+            {q.header !== undefined && <div className="chat-question-header">{q.header}</div>}
+            <div className="chat-question-text">{q.question}</div>
+            {q.detail !== undefined && <div className="chat-question-detail">{q.detail}</div>}
+            {q.options !== undefined && q.options.length > 0 && (
+              <div className="chat-question-options" role="group" aria-label={q.question}>
+                {q.options.map(option => {
+                  const checked = entry.selected.includes(option.label)
+                  return (
+                    <label key={option.label} className={`chat-question-option${checked ? ' chat-question-option-selected' : ''}`}>
+                      <input
+                        type={q.multiSelect ? 'checkbox' : 'radio'}
+                        name={`q-${q.id}`}
+                        checked={checked}
+                        onChange={() => { toggle(q.id, option.label, q.multiSelect === true) }}
+                      />
+                      <span className="chat-question-option-label">{option.label}</span>
+                      {option.description !== undefined && (
+                        <span className="chat-question-option-desc">{option.description}</span>
+                      )}
+                    </label>
+                  )
+                })}
+              </div>
+            )}
+            <textarea
+              className="chat-question-custom"
+              placeholder="自定义回答（可选）"
+              rows={2}
+              value={entry.custom}
+              onChange={(e) => { setCustom(q.id, e.target.value) }}
+            />
+          </div>
+        )
+      })}
+      {panelError !== undefined && <p className="chat-approval-error">{panelError}</p>}
+      <button
+        type="button"
+        className="chat-question-submit"
+        disabled={busy}
+        onClick={submit}
+      >
+        {busy ? '提交中…' : '提交回答'}
+      </button>
+    </div>
+  )
+}

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()
+  })
+})