@linxin666/dsh-remote-web-ui 0.1.1 → 0.1.2

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

@@ -0,0 +1,348 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Chat level: one session. Loads the history tail page on open, appends
+ * pages upward (loadOlder), folds live mux frames in as they arrive, and
+ * sends prompts through session.prompt.
+ *
+ * Rendering mirrors the desktop web UI's fold discipline on a small screen:
+ * - reasoning text hides behind a collapsed "深度思考" disclosure,
+ * - tool calls behind a collapsed tool disclosure (name + arguments),
+ * - very long assistant text collapses with an explicit expand toggle,
+ * - a toolbar above the composer carries the model (+ thinking effort) and
+ *   permission pickers, both as bottom sheets.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { loadHistory, prompt } from "./App.js";
+import { errorText, formatTime, staleHostHint } from "./App.js";
+import { models, selectModel, sendCommand } from "../api.js";
+import { foldEvents } from "../messages.js";
+import { ThemeToggle } from "../theme-toggle.js";
+/** Extract the raw event from one history entry (the fold consumes events only). */
+function eventOf(entry) {
+    return entry.event;
+}
+/** Defensive runtime guard for projection payloads. */
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+/** Parse the wire `permissions` projection defensively; undefined when absent. */
+function parsePermissionSelect(value) {
+    if (!isRecord(value))
+        return undefined;
+    const rawOptions = Array.isArray(value['options']) ? value['options'] : [];
+    const options = [];
+    for (const raw of rawOptions) {
+        if (!isRecord(raw))
+            continue;
+        const optionValue = typeof raw['value'] === 'string' ? raw['value'] : undefined;
+        const name = typeof raw['name'] === 'string' ? raw['name'] : undefined;
+        if (optionValue === undefined || name === undefined)
+            continue;
+        options.push({
+            value: optionValue,
+            name,
+            ...(typeof raw['description'] === 'string' ? { description: raw['description'] } : {}),
+        });
+    }
+    const currentValue = typeof value['currentValue'] === 'string' ? value['currentValue'] : undefined;
+    if (currentValue === undefined || options.length === 0)
+        return undefined;
+    return { options, currentValue };
+}
+/** One display-name transform for kebab-case machine names (web-UI parity). */
+function displayName(name) {
+    if (!/^[a-z0-9]+(-[a-z0-9]+)*$/.test(name))
+        return name;
+    return name.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+}
+/** First non-empty line of reasoning text (the collapsed summary). */
+function firstMeaningfulLine(text) {
+    const trimmed = text.trim();
+    if (trimmed === '')
+        return '';
+    const newline = trimmed.indexOf('\n');
+    return newline === -1 ? trimmed : trimmed.slice(0, newline);
+}
+/**
+ * Render one session's chat.
+ * @param props - the session, the mux client, and the back action.
+ * @returns the chat surface.
+ */
+export function ChatView({ session, mux, onBack }) {
+    const [messages, setMessages] = useState([]);
+    const [hasOlder, setHasOlder] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(undefined);
+    const [input, setInput] = useState('');
+    const [sending, setSending] = useState(false);
+    const scrollRef = useRef(undefined);
+    const pendingRef = useRef(false);
+    /** The session's permission select (absent = capability not composed). */
+    const [permissions, setPermissions] = useState(undefined);
+    /** The current model selection for the toolbar chip (best-effort label). */
+    const [currentModel, setCurrentModel] = useState(undefined);
+    /** Which bottom sheet is open. */
+    const [sheet, setSheet] = useState(null);
+    // Tail page on open (content loads only when the session is opened).
+    useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        setError(undefined);
+        setMessages([]);
+        void loadHistory(session.sessionId).then((page) => {
+            if (cancelled)
+                return;
+            setMessages(foldEvents(page.events.map(eventOf)));
+            setHasOlder(page.hasMore);
+            setLoading(false);
+            // The history-tail projection baseline seeds the permission picker.
+            // The `permissions` key is declared by the deployment's permission
+            // plugin (augmentation), so the base SDK map is indexed loosely.
+            const projections = page.projections?.values;
+            setPermissions(parsePermissionSelect(projections?.['permissions']));
+            scrollToBottom();
+        }, (reason) => {
+            if (cancelled)
+                return;
+            setError(errorText(reason));
+            setLoading(false);
+        });
+        // Best-effort current-model label for the toolbar chip; the sheet
+        // always re-reads a fresh directory on open.
+        void models(session.sessionId).then((directory) => {
+            if (!cancelled)
+                setCurrentModel(directory.current);
+        }, () => { });
+        return () => { cancelled = true; };
+    }, [session.sessionId]);
+    // Live frames: fold session events for this session in as they arrive.
+    useEffect(() => {
+        if (mux === undefined)
+            return;
+        return mux.onFrame((frame) => {
+            if (frame.type === 'session/event') {
+                if (frame.sessionId !== session.sessionId)
+                    return;
+                setMessages(previous => foldEvents([frame.event], previous));
+                return;
+            }
+            // Live projection pushes keep the permission picker current.
+            if (frame.type === 'session/projection'
+                && frame.sessionId === session.sessionId
+                && frame.key === 'permissions') {
+                setPermissions(parsePermissionSelect(frame.value));
+            }
+        });
+    }, [mux, session.sessionId]);
+    // Keep the newest content visible while streaming.
+    useEffect(() => {
+        if (messages.some(message => message.pending === true))
+            scrollToBottom();
+    }, [messages]);
+    const scrollToBottom = useCallback(() => {
+        const el = scrollRef.current;
+        if (el === undefined)
+            return;
+        el.scrollTop = el.scrollHeight;
+    }, []);
+    /** Load one older page and prepend it. The fold is directional (incremental
+     *  tails only), so the older page folds standalone and concatenates ahead —
+     *  host page boundaries never cut a message, so the seam is exact. */
+    const loadOlder = useCallback(() => {
+        if (pendingRef.current)
+            return;
+        pendingRef.current = true;
+        setLoading(true);
+        const first = messages[0];
+        if (first === undefined) {
+            pendingRef.current = false;
+            setLoading(false);
+            return;
+        }
+        void loadHistory(session.sessionId, first.seq).then((page) => {
+            pendingRef.current = false;
+            setLoading(false);
+            const older = foldEvents(page.events.map(eventOf));
+            setMessages(previous => [...older, ...previous]);
+            setHasOlder(page.hasMore);
+        }, (reason) => {
+            pendingRef.current = false;
+            setLoading(false);
+            setError(errorText(reason));
+        });
+    }, [session.sessionId, messages]);
+    /** Send the drafted prompt (the echoed user/message arrives over mux). */
+    const send = useCallback(() => {
+        const text = input.trim();
+        if (text === '' || sending)
+            return;
+        setSending(true);
+        void prompt(session.sessionId, text).then(() => {
+            setSending(false);
+            setInput('');
+        }, (reason) => {
+            setSending(false);
+            setError(errorText(reason));
+        });
+    }, [input, sending, session.sessionId]);
+    const modelLabel = currentModel?.model ?? '模型';
+    const permissionLabel = permissions === undefined
+        ? undefined
+        : permissions.options.find(option => option.value === permissions.currentValue)?.name
+            ?? displayName(permissions.currentValue);
+    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 }, 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" })] }), 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" })] }))] }), _jsxs("div", { className: "chat-inputbar", children: [_jsx("textarea", { className: "chat-input", rows: 1, value: input, placeholder: "\u8F93\u5165\u6D88\u606F\uFF0CEnter \u53D1\u9001\u2026", enterKeyHint: "send", onChange: (event) => { setInput(event.target.value); }, onKeyDown: (event) => {
+                            if (event.key === 'Enter' && !event.shiftKey) {
+                                event.preventDefault();
+                                void send();
+                            }
+                        } }), _jsx("button", { type: "button", className: "chat-send", disabled: sending || input.trim() === '', onClick: () => { void send(); }, children: sending ? '发送中…' : '发送' })] }), sheet === 'model' && (_jsx(ModelSheet, { sessionId: session.sessionId, current: currentModel, onCurrent: (selection) => { setCurrentModel(selection); }, onClose: () => { setSheet(null); } })), sheet === 'permission' && permissions !== undefined && (_jsx(PermissionSheet, { sessionId: session.sessionId, value: permissions, onChanged: (value) => {
+                    setPermissions(previous => previous === undefined ? previous : { ...previous, currentValue: value });
+                }, onClose: () => { setSheet(null); } }))] }));
+}
+/* ── message rows ─────────────────────────────────────────────────────── */
+/** One rendered message row (user bubble or assistant bubble with folds). */
+function MessageRow({ message }) {
+    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 })), message.kind === 'assistant' && message.tools !== undefined && message.tools.length > 0 && (_jsx(ToolDisclosure, { tools: message.tools })), _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). */
+function ReasoningDisclosure({ text, pending }) {
+    const [open, setOpen] = useState(false);
+    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. */
+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}`))) }))] }));
+}
+/** Long assistant text collapses behind an explicit expand toggle. */
+function CollapsibleText({ text }) {
+    const [open, setOpen] = useState(false);
+    if (text.length <= LONG_TEXT_LIMIT) {
+        return _jsx("span", { className: "chat-msg-text", children: text });
+    }
+    const shown = open ? text : text.slice(0, LONG_TEXT_PREVIEW);
+    return (_jsxs("span", { className: "chat-msg-text", children: [shown, !open ? '…' : '', _jsx("button", { type: "button", className: "chat-msg-toggle", onClick: () => { setOpen(value => !value); }, children: open ? '收起' : `展开全文（${text.length} 字）` })] }));
+}
+const LONG_TEXT_LIMIT = 1600;
+const LONG_TEXT_PREVIEW = 800;
+/** Latest non-empty line of a streaming reasoning buffer. */
+function lastLine(text) {
+    const trimmed = text.trimEnd();
+    if (trimmed === '')
+        return '';
+    const newline = trimmed.lastIndexOf('\n');
+    const line = newline === -1 ? trimmed : trimmed.slice(newline + 1);
+    return line.trim() === '' ? '' : line;
+}
+/* ── bottom sheets ───────────────────────────────────────────────────── */
+/** Shared bottom-sheet chrome (backdrop + slide-up panel). */
+function Sheet({ title, onClose, children }) {
+    return (_jsx("div", { className: "sheet-backdrop", onClick: onClose, children: _jsxs("div", { className: "sheet", role: "dialog", "aria-modal": "true", "aria-label": title, onClick: (event) => { event.stopPropagation(); }, children: [_jsx("div", { className: "sheet-handle", "aria-hidden": true }), _jsx("div", { className: "sheet-title", children: title }), _jsx("div", { className: "sheet-body", children: children })] }) }));
+}
+/** The model + thinking-effort picker (fresh advisory directory per open). */
+function ModelSheet({ sessionId, current, onCurrent, onClose }) {
+    const [state, setState] = useState({ status: 'loading' });
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(undefined);
+    const load = useCallback(() => {
+        setState({ status: 'loading' });
+        void models(sessionId).then(data => { setState({ status: 'ready', data }); }, (reason) => { setState({ status: 'error', message: errorText(reason) }); });
+    }, [sessionId]);
+    useEffect(() => { load(); }, [load]);
+    /** Select model/effort and close on success (one-shot action per sheet). */
+    const apply = useCallback((selection) => {
+        if (busy)
+            return;
+        setBusy(true);
+        setError(undefined);
+        void selectModel(sessionId, selection).then((result) => {
+            setBusy(false);
+            onCurrent(result.selected);
+            onClose();
+        }, (reason) => {
+            setBusy(false);
+            setError(errorText(reason));
+        });
+    }, [busy, sessionId, onCurrent, onClose]);
+    if (state.status === 'loading') {
+        return (_jsx(Sheet, { title: "\u6A21\u578B\u4E0E\u601D\u8003\u5F3A\u5EA6", onClose: onClose, children: _jsx("div", { className: "sheet-status", children: "\u6B63\u5728\u52A0\u8F7D\u6A21\u578B\u76EE\u5F55\u2026" }) }));
+    }
+    if (state.status === 'error') {
+        return (_jsx(Sheet, { title: "\u6A21\u578B\u4E0E\u601D\u8003\u5F3A\u5EA6", onClose: onClose, children: _jsxs("div", { className: "sheet-status sheet-status-error", children: [_jsx("span", { children: state.message }), staleHostHint(state.message) !== undefined && _jsx("span", { className: "sheet-hint", children: staleHostHint(state.message) }), _jsx("button", { type: "button", className: "chat-load-older", onClick: load, children: "\u91CD\u8BD5" })] }) }));
+    }
+    const { data } = state;
+    const selected = current ?? data.current;
+    const choices = data.groups.flatMap(group => group.models.map(model => ({ group, model })));
+    const currentChoice = choices.find(choice => choice.group.id === selected.provider && choice.model.id === selected.model);
+    const reasoning = currentChoice?.model.reasoning;
+    const effectiveEffort = selected.reasoningEffort ?? reasoning?.defaultEffort;
+    const effortChoices = reasoning === undefined
+        ? []
+        : [
+            ...(reasoning.defaultEffort === undefined
+                ? [{ key: 'provider-default', effort: undefined, label: '跟随模型默认' }]
+                : []),
+            ...reasoning.efforts.map(effort => ({
+                key: `effort:${effort.id}`,
+                effort: effort.id,
+                label: effort.name,
+                description: effort.description,
+            })),
+        ];
+    return (_jsxs(Sheet, { title: "\u6A21\u578B\u4E0E\u601D\u8003\u5F3A\u5EA6", onClose: onClose, children: [error !== undefined && _jsx("p", { className: "sheet-error", children: error }), error !== undefined && staleHostHint(error) !== undefined && _jsx("p", { className: "sheet-hint", children: staleHostHint(error) }), data.failures.map(failure => (_jsxs("p", { className: "sheet-error", children: [failure.name, ": ", failure.message] }, failure.id))), data.groups.length === 0 && choices.length === 0 && (_jsx("div", { className: "sheet-status", children: "\u6CA1\u6709\u53EF\u7528\u7684\u6A21\u578B" })), data.groups.map(group => (_jsxs("div", { className: "sheet-section", children: [_jsx("div", { className: "sheet-section-title", children: group.name }), group.models.map(model => {
+                        const isSelected = selected.provider === group.id && selected.model === model.id;
+                        return (_jsxs("button", { type: "button", className: `sheet-option${isSelected ? ' sheet-option-selected' : ''}`, disabled: busy, onClick: () => {
+                                apply({
+                                    provider: group.id,
+                                    model: model.id,
+                                    ...(model.reasoning?.defaultEffort === undefined ? {} : { reasoningEffort: model.reasoning.defaultEffort }),
+                                });
+                            }, children: [_jsxs("span", { className: "sheet-option-copy", children: [_jsx("span", { className: "sheet-option-title", children: model.name }), model.description !== undefined && _jsx("span", { className: "sheet-option-desc", children: model.description })] }), isSelected && _jsx("span", { className: "sheet-option-check", "aria-hidden": true, children: "\u221A" })] }, model.id));
+                    })] }, group.id))), effortChoices.length > 0 && (_jsxs("div", { className: "sheet-section", children: [_jsx("div", { className: "sheet-section-title", children: "\u601D\u8003\u5F3A\u5EA6" }), effortChoices.map(choice => {
+                        const isSelected = effectiveEffort === choice.effort;
+                        return (_jsxs("button", { type: "button", className: `sheet-option${isSelected ? ' sheet-option-selected' : ''}`, disabled: busy, onClick: () => { apply({ provider: selected.provider, model: selected.model, ...(choice.effort !== undefined ? { reasoningEffort: choice.effort } : {}) }); }, children: [_jsx("span", { className: "sheet-option-copy", children: _jsx("span", { className: "sheet-option-title", children: choice.label }) }), isSelected && _jsx("span", { className: "sheet-option-check", "aria-hidden": true, children: "\u221A" })] }, choice.key));
+                    })] }))] }));
+}
+/** The permission-preset picker; full access needs an explicit confirm. */
+function PermissionSheet({ sessionId, value, onChanged, onClose }) {
+    const [confirming, setConfirming] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(undefined);
+    /** Submit `/permission <value>` as a slash command (mode-agnostic). */
+    const submit = useCallback((next) => {
+        if (busy)
+            return;
+        setBusy(true);
+        setError(undefined);
+        void sendCommand(sessionId, `/permission ${next}`).then(() => {
+            setBusy(false);
+            setConfirming(null);
+            onChanged(next);
+            onClose();
+        }, (reason) => {
+            setBusy(false);
+            setConfirming(null);
+            setError(errorText(reason));
+        });
+    }, [busy, sessionId, onChanged, onClose]);
+    const choose = (next) => {
+        if (next === value.currentValue) {
+            onClose();
+            return;
+        }
+        if (next === 'danger-full-access') {
+            setConfirming(next);
+            return;
+        }
+        submit(next);
+    };
+    if (confirming !== null) {
+        return (_jsxs(Sheet, { title: "\u786E\u8BA4\u5B8C\u5168\u6743\u9650", onClose: () => { setConfirming(null); }, children: [_jsx("p", { className: "sheet-confirm-desc", children: "\u5F00\u542F\u5B8C\u5168\u6743\u9650\u540E\uFF0C\u8FDC\u7A0B\u4F1A\u8BDD\u53EF\u4EE5\u5728\u5DE5\u4F5C\u533A\u5185\u6267\u884C\u4EFB\u610F\u64CD\u4F5C\uFF08\u5305\u62EC\u8FD0\u884C\u547D\u4EE4\u3001\u4FEE\u6539\u6240\u6709\u6587\u4EF6\u4E0E\u8BBF\u95EE\u51ED\u8BC1\uFF09\u3002 \u4EC5\u5728\u60A8\u4FE1\u4EFB\u5F53\u524D\u8BBE\u5907\u548C\u7F51\u7EDC\u65F6\u5F00\u542F\u3002" }), error !== undefined && _jsx("p", { className: "sheet-error", children: error }), _jsxs("div", { className: "sheet-confirm-actions", children: [_jsx("button", { type: "button", className: "mobile-button", disabled: busy, onClick: () => { setConfirming(null); }, children: "\u53D6\u6D88" }), _jsx("button", { type: "button", className: "sheet-confirm-danger", disabled: busy, onClick: () => { submit(confirming); }, children: busy ? '提交中…' : '确认开启' })] })] }));
+    }
+    return (_jsxs(Sheet, { title: "\u6743\u9650", onClose: onClose, children: [error !== undefined && _jsx("p", { className: "sheet-error", children: error }), value.options.map(option => {
+                const isSelected = option.value === value.currentValue;
+                return (_jsxs("button", { type: "button", className: `sheet-option${isSelected ? ' sheet-option-selected' : ''}`, disabled: busy, onClick: () => { choose(option.value); }, children: [_jsxs("span", { className: "sheet-option-copy", children: [_jsx("span", { className: "sheet-option-title", children: option.name }), option.description !== undefined && _jsx("span", { className: "sheet-option-desc", children: option.description })] }), isSelected && _jsx("span", { className: "sheet-option-check", "aria-hidden": true, children: "\u221A" })] }, option.value));
+            })] }));
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatView.js","sourceRoot":"","sources":["../../../../src/mobile/views/ChatView.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAoB,MAAM,UAAW,CAAA;AACjE,OAAO,EAAE,UAAU,EAAsC,MAAM,gBAAgB,CAAA;AAE/E,OAAO,EAAE,SAAS,EAAE,MAAM,UAAW,CAAA;AAUrC,oFAAoF;AACpF,SAAS,OAAO,CAAC,KAA2B;IAC1C,OAAO,KAAK,CAAC,KAAK,CAAA;AACpB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAiB;IAC9D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAA;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC/C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAA;IACjE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IACtC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,SAAS,GAAG,MAAM,CAA6B,SAAS,CAAC,CAAA;IAC/D,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAEhC,qEAAqE;IACrE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,GAAG,KAAK,CAAA;QACrB,UAAU,CAAC,IAAI,CAAC,CAAA;QAChB,QAAQ,CAAC,SAAS,CAAC,CAAA;QACnB,WAAW,CAAC,EAAE,CAAC,CAAA;QACf,KAAK,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,CACtC,CAAC,IAAI,EAAE,EAAE;YACP,IAAI,SAAS;gBAAE,OAAM;YACrB,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;YACjD,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YACzB,UAAU,CAAC,KAAK,CAAC,CAAA;YACjB,cAAc,EAAE,CAAA;QAClB,CAAC,EACD,CAAC,MAAe,EAAE,EAAE;YAClB,IAAI,SAAS;gBAAE,OAAM;YACrB,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAA;YAC3B,UAAU,CAAC,KAAK,CAAC,CAAA;QACnB,CAAC,CACF,CAAA;QACD,OAAO,GAAG,EAAE,GAAG,SAAS,GAAG,IAAI,CAAA,CAAC,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAA;IAEvB,uEAAuE;IACvE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,GAAG,KAAK,SAAS;YAAE,OAAM;QAC7B,OAAO,GAAG,CAAC,OAAO,CAAC,CAAC,KAAe,EAAE,EAAE;YACrC,IAAI,KAAK,CAAC,IAAI,KAAK,eAAe;gBAAE,OAAM;YAC1C,IAAI,KAAK,CAAC,SAAS,KAAK,OAAO,CAAC,SAAS;gBAAE,OAAM;YACjD,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,KAAkB,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAA;QAC3E,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAA;IAE5B,mDAAmD;IACnD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,KAAK,IAAI,CAAC;YAAE,cAAc,EAAE,CAAA;IAC1E,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,CAAA;QAC5B,IAAI,EAAE,KAAK,SAAS;YAAE,OAAM;QAC5B,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,YAAY,CAAA;IAChC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN;;0EAEsE;IACtE,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,IAAI,UAAU,CAAC,OAAO;YAAE,OAAM;QAC9B,UAAU,CAAC,OAAO,GAAG,IAAI,CAAA;QACzB,UAAU,CAAC,IAAI,CAAC,CAAA;QAChB,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;QACzB,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,UAAU,CAAC,OAAO,GAAG,KAAK,CAAA;YAC1B,UAAU,CAAC,KAAK,CAAC,CAAA;YACjB,OAAM;QACR,CAAC;QACD,KAAK,WAAW,CAAC,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CACjD,CAAC,IAAI,EAAE,EAAE;YACP,UAAU,CAAC,OAAO,GAAG,KAAK,CAAA;YAC1B,UAAU,CAAC,KAAK,CAAC,CAAA;YACjB,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;YAClD,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAA;YAChD,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAC3B,CAAC,EACD,CAAC,MAAe,EAAE,EAAE;YAClB,UAAU,CAAC,OAAO,GAAG,KAAK,CAAA;YAC1B,UAAU,CAAC,KAAK,CAAC,CAAA;YACjB,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAA;QAC7B,CAAC,CACF,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEjC,0EAA0E;IAC1E,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;QACzB,IAAI,IAAI,KAAK,EAAE,IAAI,OAAO;YAAE,OAAM;QAClC,UAAU,CAAC,IAAI,CAAC,CAAA;QAChB,KAAK,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,IAAI,CACvC,GAAG,EAAE;YACH,UAAU,CAAC,KAAK,CAAC,CAAA;YACjB,QAAQ,CAAC,EAAE,CAAC,CAAA;QACd,CAAC,EACD,CAAC,MAAe,EAAE,EAAE;YAClB,UAAU,CAAC,KAAK,CAAC,CAAA;YACjB,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAA;QAC7B,CAAC,CACF,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAA;IAEvC,OAAO,CACL,eAAK,SAAS,EAAC,MAAM,aACnB,kBAAQ,SAAS,EAAC,eAAe,aAC/B,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,aAAa,gBAAY,cAAI,EAAC,OAAO,EAAE,MAAM,uBAAY,EACzF,aAAI,SAAS,EAAC,iCAAiC,YAAE,OAAO,CAAC,KAAK,GAAM,IAC7D,EACR,KAAK,KAAK,SAAS,IAAI,YAAG,SAAS,EAAC,yBAAyB,YAAE,KAAK,GAAK,EAC1E,eAAK,SAAS,EAAC,aAAa,EAAC,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,SAAS,CAAC,OAAO,GAAG,GAAG,IAAI,SAAS,CAAA,CAAC,CAAC,aAC9E,QAAQ,IAAI,CACX,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,iBAAiB,EAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,SAAS,EAAE,CAAA,CAAC,CAAC,YACrG,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GACtB,CACV,EACA,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,KAAC,UAAU,IAAkB,OAAO,EAAE,OAAO,IAA5B,OAAO,CAAC,EAAE,CAAsB,CAAC,EAC1E,OAAO,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,YAAG,SAAS,EAAC,aAAa,yCAAS,EACvE,CAAC,OAAO,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,YAAG,SAAS,EAAC,aAAa,+FAAkB,IAC9E,EACN,eAAK,SAAS,EAAC,eAAe,aAC5B,mBACE,SAAS,EAAC,YAAY,EACtB,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,KAAK,EACZ,WAAW,EAAC,gCAAO,EACnB,YAAY,EAAC,MAAM,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA,CAAC,CAAC,EACrD,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;4BACnB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gCAC7C,KAAK,CAAC,cAAc,EAAE,CAAA;gCACtB,KAAK,IAAI,EAAE,CAAA;4BACb,CAAC;wBACH,CAAC,GACD,EACF,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,WAAW,EAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,EAAE,CAAA,CAAC,CAAC,YACjH,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,GACjB,IACL,IACF,CACP,CAAA;AACH,CAAC;AAED,gCAAgC;AAChC,SAAS,UAAU,CAAC,EAAE,OAAO,EAA8B;IACzD,OAAO,CACL,eAAK,SAAS,EAAE,qBAAqB,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,aAC3J,eAAM,SAAS,EAAC,eAAe,YAAE,OAAO,CAAC,IAAI,GAAQ,EACpD,OAAO,CAAC,WAAW,KAAK,SAAS,IAAI,cAAK,SAAS,EAAC,WAAW,YAAE,OAAO,CAAC,WAAW,GAAO,IACxF,CACP,CAAA;AACH,CAAC"}

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

@@ -0,0 +1,215 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+/** ChatView: collapsible message folds, toolbar chips, and the bottom sheets. */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ChatView } from "./ChatView.js";
+// The api module is fully mocked; App.tsx's history wrapper is overridden to
+// feed fixed history pages, its pure helpers (errorText / formatTime) stay real.
+vi.mock('../api.ts', () => ({
+    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 () => { }),
+    };
+});
+import { models, selectModel, sendCommand } from "../api.js";
+import { loadHistory } from "./App.js";
+const session = {
+    sessionId: 's-1',
+    title: '测试会话',
+    updatedAt: 1_700_000_000_000,
+    running: false,
+    blank: false,
+};
+/** Assemble 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 a history page from loose wire events (the host union is strict). */
+function historyPage(events, extra = {}) {
+    return { events: events, hasMore: false, ...extra };
+}
+/** A full turn: user message, reasoning + text chunks, tool calls, final message. */
+function turnEvents() {
+    return [
+        makeEntry('user/message', { id: 'u-1', role: 'user', content: [{ type: 'text', text: '改一下代码' }] }, 0),
+        makeEntry('assistant/chunk', { turn: 0, step: 0, chunk: { type: 'reasoning-delta', index: 0, text: '先看结构' } }, 1),
+        makeEntry('assistant/chunk', { turn: 0, step: 0, chunk: { type: 'reasoning-delta', index: 0, text: '\n再看细节' } }, 2),
+        makeEntry('assistant/chunk', { turn: 0, step: 0, chunk: { type: 'text-delta', index: 1, text: '正在处理' } }, 3),
+        makeEntry('tool/call', { turn: 0, step: 0, callId: 'c1', name: 'bash', arguments: '{"cmd":"ls"}' }, 4),
+        makeEntry('assistant/message', {
+            turn: 0,
+            step: 0,
+            message: {
+                id: 'a-1',
+                role: 'assistant',
+                content: [
+                    { type: 'reasoning', text: '先看结构\n再看细节' },
+                    { type: 'text', text: '已完成修改' },
+                ],
+            },
+        }, 5),
+    ];
+}
+const modelsMock = vi.mocked(models);
+const selectModelMock = vi.mocked(selectModel);
+const sendCommandMock = vi.mocked(sendCommand);
+const loadHistoryMock = vi.mocked(loadHistory);
+beforeEach(() => {
+    modelsMock.mockResolvedValue({
+        current: { provider: 'fx', model: 'fx-1' },
+        routable: true,
+        groups: [
+            {
+                id: 'fx',
+                name: 'FX',
+                models: [
+                    { id: 'fx-1', name: 'FX 标准' },
+                    { id: 'fx-2', name: 'FX 深度', reasoning: { efforts: [{ id: 'high', name: '高' }], defaultEffort: 'high' } },
+                ],
+            },
+        ],
+        failures: [],
+    });
+    selectModelMock.mockResolvedValue({ selected: { provider: 'fx', model: 'fx-2', reasoningEffort: 'high' } });
+    sendCommandMock.mockResolvedValue({});
+});
+afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+});
+describe('ChatView message folds', () => {
+    it('hides reasoning behind a collapsed disclosure and expands on tap', async () => {
+        loadHistoryMock.mockResolvedValue(historyPage(turnEvents()));
+        render(_jsx(ChatView, { session: session, onBack: () => { } }));
+        // The folded turn renders: user bubble, assistant text, disclosures.
+        expect(await screen.findByText('改一下代码')).toBeTruthy();
+        expect(await screen.findByText('已完成修改')).toBeTruthy();
+        const head = await screen.findByRole('button', { name: /深度思考/ });
+        expect(head.getAttribute('aria-expanded')).toBe('false');
+        // Only the one-line summary shows while collapsed; the body stays hidden.
+        expect(await screen.findByText('先看结构')).toBeTruthy();
+        expect(screen.queryByText(/再看细节/)).toBeNull();
+        fireEvent.click(head);
+        expect(head.getAttribute('aria-expanded')).toBe('true');
+        expect(await screen.findByText(/再看细节/)).toBeTruthy();
+    });
+    it('keeps the tool disclosure collapsed with a summary, then reveals arguments', async () => {
+        loadHistoryMock.mockResolvedValue(historyPage(turnEvents()));
+        render(_jsx(ChatView, { session: session, onBack: () => { } }));
+        const head = await screen.findByRole('button', { name: /工具/ });
+        expect(head.getAttribute('aria-expanded')).toBe('false');
+        expect(screen.queryByText('{"cmd":"ls"}')).toBeNull();
+        fireEvent.click(head);
+        expect(head.getAttribute('aria-expanded')).toBe('true');
+        expect(await screen.findByText('{"cmd":"ls"}')).toBeTruthy();
+        expect(screen.getByText('bash')).toBeTruthy();
+    });
+    it('shows the permission chip from the history-tail projection and applies via /permission', async () => {
+        loadHistoryMock.mockResolvedValue(historyPage(turnEvents(), {
+            projections: {
+                asOfSeq: 4,
+                values: {
+                    permissions: {
+                        options: [
+                            { value: 'read-only', name: '只读' },
+                            { value: 'workspace-write', name: '读写工作区' },
+                        ],
+                        currentValue: 'read-only',
+                    },
+                },
+            },
+        }));
+        render(_jsx(ChatView, { session: session, onBack: () => { } }));
+        const chip = await screen.findByRole('button', { name: /只读/ });
+        fireEvent.click(chip);
+        // The sheet lists the presets; picking one dispatches the slash command.
+        const writeOption = await screen.findByRole('button', { name: /读写工作区/ });
+        fireEvent.click(writeOption);
+        await waitFor(() => {
+            expect(sendCommandMock).toHaveBeenCalledWith('s-1', '/permission workspace-write');
+        });
+    });
+    it('requires an explicit confirm before enabling full access', async () => {
+        loadHistoryMock.mockResolvedValue(historyPage(turnEvents(), {
+            projections: {
+                asOfSeq: 4,
+                values: {
+                    permissions: {
+                        options: [{ value: 'danger-full-access', name: '完全权限' }],
+                        currentValue: 'workspace-write',
+                    },
+                },
+            },
+        }));
+        render(_jsx(ChatView, { session: session, onBack: () => { } }));
+        // The chip shows the derived label for the unmatched current value.
+        fireEvent.click(await screen.findByRole('button', { name: /Workspace Write/ }));
+        // Picking full access opens the confirmation sheet instead of submitting.
+        fireEvent.click(await screen.findByRole('button', { name: /完全权限/ }));
+        expect(await screen.findByText(/确认完全权限/)).toBeTruthy();
+        expect(sendCommandMock).not.toHaveBeenCalled();
+        // Cancelling dispatches nothing; opening again and confirming submits.
+        fireEvent.click(screen.getByRole('button', { name: /取消/ }));
+        fireEvent.click(screen.getByRole('button', { name: /完全权限/ }));
+        fireEvent.click(await screen.findByRole('button', { name: /确认开启/ }));
+        await waitFor(() => {
+            expect(sendCommandMock).toHaveBeenCalledWith('s-1', '/permission danger-full-access');
+        });
+    });
+});
+describe('ChatView model sheet', () => {
+    it('labels the toolbar chip with the current model and selects a new one', async () => {
+        loadHistoryMock.mockResolvedValue(historyPage(turnEvents()));
+        render(_jsx(ChatView, { session: session, onBack: () => { } }));
+        const chip = await screen.findByRole('button', { name: /模型/ });
+        expect(chip.textContent).toContain('fx-1');
+        fireEvent.click(chip);
+        const deep = await screen.findByRole('button', { name: /FX 深度/ });
+        fireEvent.click(deep);
+        await waitFor(() => {
+            expect(selectModelMock).toHaveBeenCalledWith('s-1', { provider: 'fx', model: 'fx-2', reasoningEffort: 'high' });
+        });
+    });
+    it('offers effort choices for the current model and submits the picked effort', async () => {
+        loadHistoryMock.mockResolvedValue(historyPage(turnEvents()));
+        // The current model already is the effort-capable one.
+        modelsMock.mockResolvedValue({
+            current: { provider: 'fx', model: 'fx-2', reasoningEffort: 'high' },
+            routable: true,
+            groups: [
+                {
+                    id: 'fx',
+                    name: 'FX',
+                    models: [
+                        { id: 'fx-1', name: 'FX 标准' },
+                        { id: 'fx-2', name: 'FX 深度', reasoning: { efforts: [{ id: 'high', name: '高' }], defaultEffort: 'high' } },
+                    ],
+                },
+            ],
+            failures: [],
+        });
+        render(_jsx(ChatView, { session: session, onBack: () => { } }));
+        fireEvent.click(await screen.findByRole('button', { name: /模型/ }));
+        const effort = await screen.findByRole('button', { name: /^高/ });
+        fireEvent.click(effort);
+        await waitFor(() => {
+            expect(selectModelMock).toHaveBeenCalledWith('s-1', { provider: 'fx', model: 'fx-2', reasoningEffort: 'high' });
+        });
+    });
+    it('explains a transport 403 on the model channel as a stale host', async () => {
+        loadHistoryMock.mockResolvedValue(historyPage(turnEvents()));
+        modelsMock.mockRejectedValue(new Error('HTTP 403'));
+        render(_jsx(ChatView, { session: session, onBack: () => { } }));
+        fireEvent.click(await screen.findByRole('button', { name: /模型/ }));
+        expect(await screen.findByText(/HTTP 403/)).toBeTruthy();
+        expect(await screen.findByText(/重启 dsh web/)).toBeTruthy();
+    });
+});