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

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

@@ -0,0 +1,231 @@
+// @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 } from '@testing-library/react'
+import { ChatView, STREAM_RENDER_INTERVAL_MS } 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(),
+}))
+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)))
+  })
+})

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