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

package/lib/types/mobile/views/ChatView.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { loadHistory, prompt } from "./App.js";
 import { errorText, formatTime, staleHostHint } from "./App.js";
-import { fetchMobilePreferences, models, selectModel, sendCommand } from "../api.js";
+import { fetchMobilePreferences, models, selectModel, sendCommand, fetchPending, respondApproval, respondQuestion } from "../api.js";
 import { EventFolder, foldEvents } from "../messages.js";
 import { renderMarkdown } from "../markdown.js";
 import { ThemeToggle } from "../theme-toggle.js";
@@ -138,6 +138,12 @@ export function ChatView({ session, mux, onBack }) {
      * 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([]);
+    /** Pending questions awaiting user answer (#1025). */
+    const [pendingQuestions, setPendingQuestions] = useState([]);
     // Read-only mobile display preferences ride the plugin's local
     // `/m/api` method; a failure keeps the default (Enter sends).
     useEffect(() => {
@@ -235,6 +241,13 @@ export function ChatView({ session, mux, onBack }) {
                 if (frame.sessionId !== session.sessionId)
                     return;
                 const event = frame.event;
+                // 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
@@ -260,9 +273,58 @@ export function ChatView({ session, mux, onBack }) {
                 && 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,
+                            toolName: frame.toolName,
+                            callId: frame.callId,
+                            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;
+                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 fetchPending(session.sessionId).then((state) => {
+                if (cancelled)
+                    return;
+                setPendingApprovals(state.approvals);
+                setPendingQuestions(state.questions);
+            }, () => { });
+        };
+        tick();
+        const timer = setInterval(tick, 1500);
+        return () => { cancelled = true; clearInterval(timer); };
+    }, [running, session.sessionId]);
     const scrollToBottom = useCallback(() => {
         const el = scrollRef.current;
         if (el === undefined)
@@ -359,7 +421,7 @@ export function ChatView({ session, mux, onBack }) {
         }
         return undefined;
     }, [messages]);
-    return (_jsxs("div", { className: "chat", children: [_jsxs("header", { className: "mobile-header", children: [_jsx("button", { type: "button", className: "mobile-back", "aria-label": "\u8FD4\u56DE", onClick: onBack, children: "\u2039" }), _jsx("h1", { className: "mobile-title mobile-titleInline", children: session.title }), _jsx(ThemeToggle, {})] }), error !== undefined && _jsx("p", { className: "mobile-error mobile-pad", children: error }), _jsxs("div", { className: "chat-scroll", ref: ref => { scrollRef.current = ref ?? undefined; }, children: [hasOlder && (_jsx("button", { type: "button", className: "chat-load-older", disabled: loading, onClick: () => { void loadOlder(); }, children: loading ? '加载中…' : '加载更早的消息' })), messages.map(message => (_jsx(MessageRow, { message: message, showToolCalls: showToolCalls, showSystemMessages: showSystemMessages }, message.id))), loading && messages.length === 0 && _jsx("p", { className: "chat-typing", children: "\u52A0\u8F7D\u4E2D\u2026" }), !loading && messages.length === 0 && _jsx("p", { className: "chat-typing", children: "\u8FD8\u6CA1\u6709\u6D88\u606F\uFF0C\u53D1\u4E00\u53E5\u8BDD\u5F00\u59CB\u5427" })] }), _jsxs("div", { className: "chat-tools", children: [_jsxs("button", { type: "button", className: "chat-chip", onClick: () => { setSheet('model'); }, "aria-haspopup": "dialog", children: [_jsx("span", { className: "chat-chip-label", children: "\u6A21\u578B" }), _jsx("span", { className: "chat-chip-value", children: modelLabel }), _jsx("span", { className: "chat-chip-chevron", "aria-hidden": true, children: "\u203A" })] }), _jsxs("button", { type: "button", className: "chat-chip", onClick: () => { setSheet('display'); }, "aria-haspopup": "dialog", children: [_jsx("span", { className: "chat-chip-label", children: "\u663E\u793A" }), _jsx("span", { className: "chat-chip-chevron", "aria-hidden": true, children: "\u203A" })] }), permissionLabel !== undefined && (_jsxs("button", { type: "button", className: "chat-chip", onClick: () => { setSheet('permission'); }, "aria-haspopup": "dialog", children: [_jsx("span", { className: "chat-chip-label", children: "\u6743\u9650" }), _jsx("span", { className: "chat-chip-value", children: permissionLabel }), _jsx("span", { className: "chat-chip-chevron", "aria-hidden": true, children: "\u203A" })] })), contextUsage !== undefined && (_jsxs("div", { className: "chat-context" + (contextUsage.pct >= 80 ? " chat-context-warn" : ""), children: ["\u4E0A\u4E0B\u6587 ", contextUsage.pct, "%"] }))] }), _jsxs("div", { className: "chat-inputbar", children: [_jsx("textarea", { className: "chat-input", rows: 1, value: input, placeholder: mobileEnterToSend ? '输入消息，Enter 发送…' : '输入消息，Enter 换行，点按钮发送…', enterKeyHint: mobileEnterToSend ? 'send' : 'enter', onChange: (event) => { setInput(event.target.value); }, onKeyDown: (event) => {
+    return (_jsxs("div", { className: "chat", children: [_jsxs("header", { className: "mobile-header", children: [_jsx("button", { type: "button", className: "mobile-back", "aria-label": "\u8FD4\u56DE", onClick: onBack, children: "\u2039" }), _jsx("h1", { className: "mobile-title mobile-titleInline", children: session.title }), _jsx(ThemeToggle, {})] }), error !== undefined && _jsx("p", { className: "mobile-error mobile-pad", children: error }), _jsxs("div", { className: "chat-scroll", ref: ref => { scrollRef.current = ref ?? undefined; }, children: [hasOlder && (_jsx("button", { type: "button", className: "chat-load-older", disabled: loading, onClick: () => { void loadOlder(); }, children: loading ? '加载中…' : '加载更早的消息' })), messages.map(message => (_jsx(MessageRow, { message: message, showToolCalls: showToolCalls, showSystemMessages: showSystemMessages }, message.id))), loading && messages.length === 0 && _jsx("p", { className: "chat-typing", children: "\u52A0\u8F7D\u4E2D\u2026" }), !loading && messages.length === 0 && _jsx("p", { className: "chat-typing", children: "\u8FD8\u6CA1\u6709\u6D88\u606F\uFF0C\u53D1\u4E00\u53E5\u8BDD\u5F00\u59CB\u5427" }), running && (_jsxs("div", { className: "chat-turn-status", role: "status", "aria-label": "\u8F93\u51FA\u4E2D", children: ["\u8F93\u51FA\u4E2D", _jsxs("span", { className: "chat-turn-dots", "aria-hidden": true, children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] })] })), pendingApprovals.map(approval => (_jsx(ApprovalPanel, { approval: approval, sessionId: session.sessionId, onResolved: (id) => { setPendingApprovals(prev => prev.filter(a => a.approvalId !== id)); } }, approval.approvalId))), pendingQuestions.length > 0 && (_jsx(QuestionPanel, { questions: pendingQuestions, sessionId: session.sessionId, onResolved: () => { setPendingQuestions([]); } }))] }), _jsxs("div", { className: "chat-tools", children: [_jsxs("button", { type: "button", className: "chat-chip", onClick: () => { setSheet('model'); }, "aria-haspopup": "dialog", children: [_jsx("span", { className: "chat-chip-label", children: "\u6A21\u578B" }), _jsx("span", { className: "chat-chip-value", children: modelLabel }), _jsx("span", { className: "chat-chip-chevron", "aria-hidden": true, children: "\u203A" })] }), _jsxs("button", { type: "button", className: "chat-chip", onClick: () => { setSheet('display'); }, "aria-haspopup": "dialog", children: [_jsx("span", { className: "chat-chip-label", children: "\u663E\u793A" }), _jsx("span", { className: "chat-chip-chevron", "aria-hidden": true, children: "\u203A" })] }), permissionLabel !== undefined && (_jsxs("button", { type: "button", className: "chat-chip", onClick: () => { setSheet('permission'); }, "aria-haspopup": "dialog", children: [_jsx("span", { className: "chat-chip-label", children: "\u6743\u9650" }), _jsx("span", { className: "chat-chip-value", children: permissionLabel }), _jsx("span", { className: "chat-chip-chevron", "aria-hidden": true, children: "\u203A" })] })), contextUsage !== undefined && (_jsxs("div", { className: "chat-context" + (contextUsage.pct >= 80 ? " chat-context-warn" : ""), children: ["\u4E0A\u4E0B\u6587 ", contextUsage.pct, "%"] }))] }), _jsxs("div", { className: "chat-inputbar", children: [_jsx("textarea", { className: "chat-input", rows: 1, value: input, placeholder: mobileEnterToSend ? '输入消息，Enter 发送…' : '输入消息，Enter 换行，点按钮发送…', enterKeyHint: mobileEnterToSend ? 'send' : 'enter', onChange: (event) => { setInput(event.target.value); }, onKeyDown: (event) => {
                             if (mobileEnterToSend && event.key === 'Enter' && !event.shiftKey) {
                                 event.preventDefault();
                                 void send();
@@ -384,7 +446,7 @@ const MessageRow = memo(function MessageRow({ message, showToolCalls, showSystem
         return null;
     }
     return (_jsxs("div", { className: `chat-msg chat-msg-${message.kind}${message.pending === true ? ' chat-msg-pending' : ''}${message.failed === true ? ' chat-msg-failed' : ''}`, children: [message.kind === 'assistant' && message.reasoning !== undefined && message.reasoning !== '' && (_jsx(ReasoningDisclosure, { text: message.reasoning, pending: message.pending === true })), showToolCalls && message.kind === 'assistant' && message.tools !== undefined && message.tools.length > 0 && (_jsx(ToolDisclosure, { tools: message.tools })), message.kind === 'assistant'
-                ? _jsx(MarkdownText, { text: message.text })
+                ? _jsx(MarkdownText, { text: message.text, pending: message.pending === true })
                 : _jsx(CollapsibleText, { text: message.text }), message.failed === true && _jsx("span", { className: "chat-msg-failtag", children: "\u672C\u6B21\u56DE\u590D\u5931\u8D25" }), _jsx("span", { className: "chat-msg-time", children: formatTime(message.time) })] }));
 });
 /** Collapsed-by-default reasoning disclosure (web-UI Think-row parity). */
@@ -393,12 +455,22 @@ function ReasoningDisclosure({ text, pending }) {
     const summary = pending ? lastLine(text) : firstMeaningfulLine(text);
     return (_jsxs("div", { className: `chat-disclosure chat-reasoning${open ? ' chat-disclosure-open' : ''}`, "data-pending": pending || undefined, children: [_jsxs("button", { type: "button", className: "chat-disclosure-head", "aria-expanded": open, onClick: () => { setOpen(value => !value); }, children: [_jsx("span", { className: "chat-disclosure-caret", "aria-hidden": true, children: "\u203A" }), _jsx("span", { className: "chat-disclosure-label", children: pending ? '思考中…' : '深度思考' }), !open && _jsx("span", { className: "chat-disclosure-summary", children: summary })] }), open && _jsx("div", { className: "chat-disclosure-body", children: text })] }));
 }
-/** 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 }) {
     const [open, setOpen] = useState(false);
-    const names = [...new Set(tools.map(tool => tool.name))].join(' / ');
-    return (_jsxs("div", { className: `chat-disclosure chat-tools${open ? ' chat-disclosure-open' : ''}`, children: [_jsxs("button", { type: "button", className: "chat-disclosure-head", "aria-expanded": open, onClick: () => { setOpen(value => !value); }, children: [_jsx("span", { className: "chat-disclosure-caret", "aria-hidden": true, children: "\u203A" }), _jsx("span", { className: "chat-disclosure-label", children: "\u5DE5\u5177" }), !open && _jsx("span", { className: "chat-disclosure-summary", children: names }), _jsxs("span", { className: "chat-disclosure-count", children: [tools.length, " \u6B21"] })] }), open && (_jsx("div", { className: "chat-disclosure-body chat-tools-body", children: tools.map((tool, index) => (_jsxs("div", { className: "chat-tool-item", children: [_jsx("span", { className: "chat-tool-name", children: tool.name }), tool.arguments !== undefined && _jsx("pre", { className: "chat-tool-args", children: tool.arguments })] }, `${tool.callId}-${index}`))) }))] }));
+    const uniqueNames = [...new Set(tools.map(tool => tool.name))];
+    return (_jsxs("div", { className: `chat-disclosure chat-tools${open ? ' chat-disclosure-open' : ''}`, children: [_jsxs("button", { type: "button", className: "chat-disclosure-head", "aria-expanded": open, onClick: () => { setOpen(value => !value); }, children: [_jsx("span", { className: "chat-disclosure-caret", "aria-hidden": true, children: "\u203A" }), _jsx("span", { className: "chat-disclosure-label", children: "\u5DE5\u5177" }), !open && (_jsx("span", { className: "chat-disclosure-summary chat-tool-pills", children: uniqueNames.map(name => (_jsx("span", { className: "chat-tool-pill", children: name }, name))) })), _jsxs("span", { className: "chat-disclosure-count", children: [tools.length, " \u6B21"] })] }), open && (_jsx("div", { className: "chat-disclosure-body chat-tools-body", children: tools.map((tool, index) => (_jsxs("div", { className: "chat-tool-card", children: [_jsx("span", { className: "chat-tool-pill", children: tool.name }), tool.arguments !== undefined && (_jsx("pre", { className: "chat-tool-args", children: tool.arguments }))] }, `${tool.callId}-${index}`))) }))] }));
 }
+/**
+ * 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
@@ -406,9 +478,60 @@ function ToolDisclosure({ tools }) {
  * fences or tables never leak malformed markup into the DOM. User
  * messages stay plain text (CollapsibleText).
  */
-function MarkdownText({ text }) {
+function MarkdownText({ text, pending }) {
     const [open, setOpen] = useState(false);
-    const html = useMemo(() => renderMarkdown(text), [text]);
+    const [html, setHtml] = useState(() => 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(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 (_jsxs("div", { className: 'chat-msg-text chat-md' + (collapsed ? ' chat-md-collapsed' : ''), children: [_jsx("div", { className: "chat-md-body", dangerouslySetInnerHTML: { __html: html } }), long && (_jsx("button", { type: "button", className: "chat-msg-toggle", onClick: () => { setOpen(value => !value); }, children: open ? '收起' : '展开全文（' + text.length + ' 字）' }))] }));
@@ -547,3 +670,77 @@ function PermissionSheet({ sessionId, value, onChanged, onClose }) {
 function DisplaySheet({ showToolCalls, showSystemMessages, onToolCalls, onSystemMessages, onClose }) {
     return (_jsx(Sheet, { title: "\u663E\u793A", onClose: onClose, children: _jsxs("div", { role: "group", "aria-label": "\u663E\u793A\u9009\u9879", children: [_jsxs("div", { className: "sheet-toggle-row", children: [_jsxs("div", { className: "sheet-toggle-copy", children: [_jsx("span", { className: "sheet-toggle-title", children: "\u5DE5\u5177\u8C03\u7528" }), _jsx("span", { className: "sheet-toggle-desc", children: "\u663E\u793A\u52A9\u624B\u4F7F\u7528\u7684\u5DE5\u5177\u8C03\u7528" })] }), _jsx("button", { type: "button", role: "switch", "aria-label": "\u5DE5\u5177\u8C03\u7528", "aria-checked": showToolCalls, className: `sheet-toggle-switch${showToolCalls ? ' sheet-toggle-switch-on' : ''}`, onClick: () => { onToolCalls(!showToolCalls); }, children: _jsx("span", { className: "sheet-toggle-switch-knob", "aria-hidden": true }) })] }), _jsxs("div", { className: "sheet-toggle-row", children: [_jsxs("div", { className: "sheet-toggle-copy", children: [_jsx("span", { className: "sheet-toggle-title", children: "\u7CFB\u7EDF\u63D0\u793A\u8BCD" }), _jsx("span", { className: "sheet-toggle-desc", children: "\u663E\u793A\u6CE8\u5165\u5230\u5BF9\u8BDD\u4E2D\u7684\u7CFB\u7EDF\u6D88\u606F" })] }), _jsx("button", { type: "button", role: "switch", "aria-label": "\u7CFB\u7EDF\u63D0\u793A\u8BCD", "aria-checked": showSystemMessages, className: `sheet-toggle-switch${showSystemMessages ? ' sheet-toggle-switch-on' : ''}`, onClick: () => { onSystemMessages(!showSystemMessages); }, children: _jsx("span", { className: "sheet-toggle-switch-knob", "aria-hidden": true }) })] })] }) }));
 }
+/* ── approval / question panels (#1025) ──────────────────────────────── */
+/** One pending tool approval card with allow/reject actions. */
+function ApprovalPanel({ approval, sessionId, onResolved }) {
+    const [busy, setBusy] = useState(false);
+    const [panelError, setPanelError] = useState(undefined);
+    const act = (outcome) => {
+        if (busy)
+            return;
+        setBusy(true);
+        setPanelError(undefined);
+        void respondApproval(sessionId, approval.approvalId, outcome).then(() => { onResolved(approval.approvalId); }, (reason) => {
+            setBusy(false);
+            setPanelError(reason instanceof Error ? reason.message : String(reason));
+        });
+    };
+    return (_jsxs("div", { className: "chat-approval-panel", role: "alert", children: [_jsxs("div", { className: "chat-approval-header", children: [_jsx("span", { className: "chat-tool-pill", children: approval.toolName }), approval.reason !== undefined && (_jsx("span", { className: "chat-approval-reason", children: approval.reason }))] }), panelError !== undefined && _jsx("p", { className: "chat-approval-error", children: panelError }), _jsxs("div", { className: "chat-approval-actions", children: [_jsx("button", { type: "button", className: "chat-approval-allow", disabled: busy, onClick: () => { act('allowed-once'); }, children: busy ? '提交中…' : '允许一次' }), _jsx("button", { type: "button", className: "chat-approval-reject", disabled: busy, onClick: () => { act('rejected'); }, children: "\u62D2\u7EDD" })] })] }));
+}
+/** Question panel: renders one or more questions with option pickers and a submit button. */
+function QuestionPanel({ questions, sessionId, onResolved }) {
+    const [selections, setSelections] = useState(() => new Map(questions.map(q => [q.id, { selected: [], custom: '' }])));
+    const [busy, setBusy] = useState(false);
+    const [panelError, setPanelError] = useState(undefined);
+    const toggle = (questionId, label, multi) => {
+        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, value) => {
+        setSelections(previous => {
+            const next = new Map(previous);
+            const entry = next.get(questionId) ?? { selected: [], custom: '' };
+            next.set(questionId, { ...entry, custom: value });
+            return next;
+        });
+    };
+    const submit = () => {
+        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) => {
+            setBusy(false);
+            setPanelError(reason instanceof Error ? reason.message : String(reason));
+        });
+    };
+    return (_jsxs("div", { className: "chat-question-panel", role: "form", "aria-label": "\u95EE\u9898", children: [questions.map(q => {
+                const entry = selections.get(q.id) ?? { selected: [], custom: '' };
+                return (_jsxs("div", { className: "chat-question-group", children: [q.header !== undefined && _jsx("div", { className: "chat-question-header", children: q.header }), _jsx("div", { className: "chat-question-text", children: q.question }), q.detail !== undefined && _jsx("div", { className: "chat-question-detail", children: q.detail }), q.options !== undefined && q.options.length > 0 && (_jsx("div", { className: "chat-question-options", role: "group", "aria-label": q.question, children: q.options.map(option => {
+                                const checked = entry.selected.includes(option.label);
+                                return (_jsxs("label", { className: `chat-question-option${checked ? ' chat-question-option-selected' : ''}`, children: [_jsx("input", { type: q.multiSelect ? 'checkbox' : 'radio', name: `q-${q.id}`, checked: checked, onChange: () => { toggle(q.id, option.label, q.multiSelect === true); } }), _jsx("span", { className: "chat-question-option-label", children: option.label }), option.description !== undefined && (_jsx("span", { className: "chat-question-option-desc", children: option.description }))] }, option.label));
+                            }) })), _jsx("textarea", { className: "chat-question-custom", placeholder: "\u81EA\u5B9A\u4E49\u56DE\u7B54\uFF08\u53EF\u9009\uFF09", rows: 2, value: entry.custom, onChange: (e) => { setCustom(q.id, e.target.value); } })] }, q.id));
+            }), panelError !== undefined && _jsx("p", { className: "chat-approval-error", children: panelError }), _jsx("button", { type: "button", className: "chat-question-submit", disabled: busy, onClick: submit, children: busy ? '提交中…' : '提交回答' })] }));
+}

package/lib/types/mobile/views/ChatView.stream.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatView.stream.test.d.ts.map

package/lib/types/mobile/views/ChatView.stream.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatView.stream.test.d.ts","sourceRoot":"","sources":["../../../../src/mobile/views/ChatView.stream.test.tsx"],"names":[],"mappings":""}

package/lib/types/mobile/views/ChatView.stream.test.js

@@ -0,0 +1,205 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @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.js";
+import { renderMarkdown } from "../markdown.js";
+// 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();
+    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();
+    return { ...actual, renderMarkdown: vi.fn(actual.renderMarkdown) };
+});
+import { fetchMobilePreferences, models } from "../api.js";
+import { loadHistory } from "./App.js";
+const loadHistoryMock = vi.mocked(loadHistory);
+const fetchMobilePreferencesMock = vi.mocked(fetchMobilePreferences);
+const modelsMock = vi.mocked(models);
+const renderMarkdownMock = vi.mocked(renderMarkdown);
+const session = {
+    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();
+    onFrame(listener) {
+        this.listeners.add(listener);
+        return () => { this.listeners.delete(listener); };
+    }
+    emit(frame) {
+        for (const listener of this.listeners)
+            listener(frame);
+    }
+}
+/** One history entry wrapping a WireEvent (host history-page shape). */
+function makeEntry(type, data, seq) {
+    return { event: { type, seq, time: seq * 1_000, data } };
+}
+/** Build an empty history page (the live stream supplies all content). */
+function historyPage() {
+    return { events: [], hasMore: false };
+}
+/**
+ * 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, text, seq) {
+    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, text, seq) {
+    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) {
+    const element = document.createElement('div');
+    element.innerHTML = html;
+    return element.innerHTML;
+}
+/** The assistant message's markdown body (dangerouslySetInnerHTML target). */
+function body() {
+    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;
+}
+beforeEach(() => {
+    fetchMobilePreferencesMock.mockResolvedValue({ mobileEnterToSend: true });
+    modelsMock.mockResolvedValue({
+        current: { provider: 'fx', model: 'fx-1' },
+        routable: true,
+        groups: [],
+        failures: [],
+    });
+    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(_jsx(ChatView, { session: session, mux: mux, 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(_jsx(ChatView, { session: session, mux: mux, 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(_jsx(ChatView, { session: session, mux: mux, 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/lib/types/mobile/views/WorkspaceView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WorkspaceView.d.ts","sourceRoot":"","sources":["../../../../src/mobile/views/WorkspaceView.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,aAAa,IAAI,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAKjG,sCAAsC;AACtC,MAAM,WAAW,kBAAkB;IACjC,4EAA4E;IAC5E,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,yCAAyC;IACzC,MAAM,CAAC,SAAS,EAAE,YAAY,GAAG,IAAI,CAAA;CACtC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,kBAAkB,EAAE,MAAM,EAAE,EAAE,kBAAkB,+BA4F/E"}
+{"version":3,"file":"WorkspaceView.d.ts","sourceRoot":"","sources":["../../../../src/mobile/views/WorkspaceView.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,aAAa,IAAI,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAwHjG,sCAAsC;AACtC,MAAM,WAAW,kBAAkB;IACjC,4EAA4E;IAC5E,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,yCAAyC;IACzC,MAAM,CAAC,SAAS,EAAE,YAAY,GAAG,IAAI,CAAA;CACtC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,kBAAkB,EAAE,MAAM,EAAE,EAAE,kBAAkB,+BAuG/E"}

package/lib/types/mobile/views/WorkspaceView.js

@@ -6,9 +6,49 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * until a workspace is opened).
  */
 import { useEffect, useState } from 'react';
-import { listWorkspaces } from "../api.js";
+import { listWorkspaces, listDirectory, createWorkspace } from "../api.js";
 import { errorText } from "./App.js";
 import { ThemeToggle } from "../theme-toggle.js";
+/**
+ * Render the directory browser for creating a new workspace.
+ */
+function DirectoryBrowser({ onCancel, onPick }) {
+    const [listing, setListing] = useState(undefined);
+    const [error, setError] = useState(undefined);
+    const [creating, setCreating] = useState(false);
+    const [path, setPath] = useState(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) => {
+            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) {
+            setCreating(false);
+            setError(errorText(reason));
+        }
+    };
+    return (_jsxs("div", { className: "mobile dir-browser", children: [_jsxs("header", { className: "mobile-header", children: [_jsx("button", { type: "button", className: "mobile-headerAction", onClick: onCancel, children: "\u8FD4\u56DE" }), _jsx("h1", { className: "mobile-title", children: "\u9009\u62E9\u76EE\u5F55" })] }), listing !== undefined && (_jsx("div", { className: "dir-crumbs", children: listing.crumbs.map((crumb, idx) => (_jsxs("span", { children: [_jsx("button", { type: "button", className: "dir-crumb", onClick: () => setPath(crumb.path), children: crumb.name || '/' }), idx < listing.crumbs.length - 1 && _jsx("span", { className: "dir-crumb-separator", children: "/" })] }, crumb.path))) })), error !== undefined ? (_jsxs("div", { className: "mobile-empty", children: [_jsx("p", { className: "mobile-error", children: error }), _jsx("button", { type: "button", className: "mobile-button", onClick: () => setReload(n => n + 1), children: "\u91CD\u8BD5" })] })) : listing === undefined ? (_jsx("div", { className: "mobile-empty", children: _jsx("p", { className: "mobile-muted", children: "\u52A0\u8F7D\u4E2D\u2026" }) })) : (_jsx("ul", { className: "mobile-list", children: listing.entries.length === 0 ? (_jsx("div", { className: "mobile-empty dir-empty", children: _jsx("p", { className: "mobile-muted", children: "\u7A7A\u76EE\u5F55" }) })) : (listing.entries.map((entry) => (_jsx("li", { children: _jsx("button", { type: "button", className: `mobile-row dir-entry ${entry.hidden ? 'dir-entry-hidden' : ''}`, onClick: () => setPath(entry.path), children: _jsxs("span", { className: "mobile-rowTitle", children: ["\uD83D\uDCC1 ", entry.name] }) }) }, entry.path)))) })), _jsx("div", { className: "dir-select", children: _jsx("button", { type: "button", className: "mobile-button", disabled: listing === undefined || creating, onClick: () => void handleCreate(), children: creating ? '创建中…' : '选择此目录' }) })] }));
+}
 /**
  * Render the workspace roster.
  * @param props - the pick action.
@@ -19,6 +59,7 @@ export function WorkspaceView({ initialWorkspaceId, onPick }) {
     const [error, setError] = useState(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;
         void listWorkspaces().then((rows) => {
@@ -39,14 +80,14 @@ export function WorkspaceView({ initialWorkspaceId, onPick }) {
         });
         return () => { cancelled = true; };
     }, [initialWorkspaceId, onPick, reload]);
+    if (isCreating) {
+        return (_jsx(DirectoryBrowser, { onCancel: () => setIsCreating(false), onPick: onPick }));
+    }
     if (error !== undefined) {
         return (_jsxs("div", { className: "mobile", children: [_jsxs("header", { className: "mobile-header", children: [_jsx("h1", { className: "mobile-title", children: "\u5DE5\u4F5C\u533A" }), _jsx(ThemeToggle, {})] }), _jsxs("div", { className: "mobile-empty", children: [_jsxs("p", { className: "mobile-error", children: ["\u52A0\u8F7D\u5931\u8D25\uFF1A", error] }), _jsx("button", { type: "button", className: "mobile-button", onClick: () => { setError(undefined); setItems(undefined); setReload(n => n + 1); }, children: "\u91CD\u8BD5" })] })] }));
     }
     if (items === undefined) {
         return (_jsxs("div", { className: "mobile", children: [_jsxs("header", { className: "mobile-header", children: [_jsx("h1", { className: "mobile-title", children: "\u5DE5\u4F5C\u533A" }), _jsx(ThemeToggle, {})] }), _jsx("div", { className: "mobile-empty", children: _jsx("p", { className: "mobile-muted", children: "\u52A0\u8F7D\u4E2D\u2026" }) })] }));
     }
-    if (items.length === 0) {
-        return (_jsxs("div", { className: "mobile", children: [_jsxs("header", { className: "mobile-header", children: [_jsx("h1", { className: "mobile-title", children: "\u5DE5\u4F5C\u533A" }), _jsx(ThemeToggle, {})] }), _jsx("div", { className: "mobile-empty", children: _jsx("p", { className: "mobile-muted", children: "\u6682\u65E0\u5DE5\u4F5C\u533A" }) })] }));
-    }
-    return (_jsxs("div", { className: "mobile", children: [_jsxs("header", { className: "mobile-header", children: [_jsx("h1", { className: "mobile-title", children: "\u5DE5\u4F5C\u533A" }), _jsx(ThemeToggle, {})] }), _jsx("ul", { className: "mobile-list", children: items.map(workspace => (_jsx("li", { children: _jsxs("button", { type: "button", className: "mobile-row", onClick: () => { onPick(workspace); }, children: [_jsx("span", { className: "mobile-rowTitle", children: workspace.title }), _jsx("span", { className: "mobile-rowMeta", children: workspace.path }), _jsx("span", { className: "mobile-chevron", children: "\u203A" })] }) }, workspace.workspaceId))) })] }));
+    return (_jsxs("div", { className: "mobile", children: [_jsxs("header", { className: "mobile-header", children: [_jsx("h1", { className: "mobile-title", children: "\u5DE5\u4F5C\u533A" }), _jsx(ThemeToggle, {})] }), items.length === 0 ? (_jsx("div", { className: "mobile-empty", children: _jsx("p", { className: "mobile-muted", children: "\u6682\u65E0\u5DE5\u4F5C\u533A" }) })) : (_jsx("ul", { className: "mobile-list", children: items.map(workspace => (_jsx("li", { children: _jsxs("button", { type: "button", className: "mobile-row", onClick: () => { onPick(workspace); }, children: [_jsx("span", { className: "mobile-rowTitle", children: workspace.title }), _jsx("span", { className: "mobile-rowMeta", children: workspace.path }), _jsx("span", { className: "mobile-chevron", children: "\u203A" })] }) }, workspace.workspaceId))) })), _jsx("div", { style: { padding: '16px' }, children: _jsx("button", { type: "button", className: "mobile-button", onClick: () => setIsCreating(true), children: "+ \u65B0\u5EFA\u5DE5\u4F5C\u533A" }) })] }));
 }