@spzxg/cli-ui 0.6.5 → 0.6.7

package/src/chat/CliChat.tsx

@@ -20,9 +20,19 @@ import { exportMarkdown } from "./export";
 import { FileLinkContext, FileOpenContext } from "../ui/fileLinks";
 import { FileViewer } from "../board/FileViewer";
 import { BrowserPane } from "../board/BrowserPane";
+import { CliBoard } from "../board/CliBoard";
+import { WorkspaceTabs } from "../ui/WorkspaceTabs";
+import { WorkspaceDrawer, useWorkspaceDrawer } from "../ui/WorkspaceDrawer";
+import { useChatScrollbar } from "../ui/useChatScrollbar";
+import { QueuedMessages } from "../ui/QueuedMessages";
+import { ReferenceCard } from "../ui/ReferenceCard";
+import type { UploadDocument } from "../core/documentUpload";
+import { GroupChat, type GroupChatAdapter } from "./GroupChat";
 
 /** onTurnEnd / onConversationEnd：浏览器里从实时流算出的结果通知，不依赖 center 的 callback.url。 */
 export interface CliChatProps extends CliStoreOptions, ResultHandlers {
+  /** 宿主提供的多发言人群聊；发送统一交给 group.onSend，不连接普通单任务转录。 */
+  group?: GroupChatAdapter;
   /** Integration slots share this transcript/composer; they do not create another chat implementation. */
   slots?: { beforeMessages?: ReactNode; afterMessages?: ReactNode; composerToolbar?: ReactNode; beforeComposer?: ReactNode };
   /** Saving execution settings blocks send until persistence completes. */
@@ -77,6 +87,7 @@ export interface CliChatProps extends CliStoreOptions, ResultHandlers {
 
 export function CliChat(props: CliChatProps) {
   const ctx = useCliStoreContext();
+  if (props.group) return <CliErrorBoundary component="cli-chat" theme={props.theme}>{withOwnProvider(props, <GroupChat key={props.group.scopeKey} group={props.group} theme={props.theme} className={props.className} style={props.style} readOnly={props.readOnly} />, !!ctx)}</CliErrorBoundary>;
   return <CliErrorBoundary component="cli-chat" theme={props.theme}>{withOwnProvider(props, <ChatInner {...props} inProvider={!!ctx} />, !!ctx)}</CliErrorBoundary>;
 }
 
@@ -143,6 +154,7 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
   // 内部用对话键（key）：只有 job_id = 对话任务的第一个对话；"job#task" = 里面指定的那个对话（见 core/conversation.ts）。
   // 新对话的草稿按组件实例存（对话的草稿按对话键存，看同一个对话的组件共用一份是对的）。
   const instanceId = useId();
+  const inlineOwner = `chat-board-${instanceId}`;
   const controlled = jobIdProp !== undefined;
   // jobId 也可以直接给对话键（例如 cli-msglist 的 onSelect 给的 "job#task"），taskId 再给就以 taskId 为准。
   const keyProp = jobIdProp === undefined ? undefined : jobIdProp ? convKey(parseConvKey(jobIdProp).jobId, taskIdProp ?? parseConvKey(jobIdProp).taskId) : null;
@@ -164,12 +176,19 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
   }, [controlled, store]);
   const conv = useCliState((s) => (key && !isNew ? s.convs[key] : undefined)) ?? (key && !isNew ? emptyConv(key) : null);
   const entry = useCliState((s) => (jobId ? s.jobs[jobId] : undefined));
+  const externalBoardVisible = useCliState(s => !!(key && s.externalBoards[key]));
+  const listVisible = useCliState(s => s.listVisible);
+  const externalBoardOptions = useCliState(s => key ? s.externalBoardOptions[key] : undefined);
+  const [tabsHost, setTabsHost] = useState<HTMLDivElement | null>(null);
+  const [workspace, setWorkspace] = useState<{ key: string | null; active: boolean }>({ key: null, active: false });
+  const showChat = useCallback(() => setWorkspace({ key, active: false }), [key]);
+  const showWorkspace = useCallback(() => setWorkspace({ key, active: true }), [key]);
 
   // 看这个对话：开实时流（同一对话多处看只连一次）。
   useEffect(() => (key ? store.open(key) : undefined), [store, key]);
   // 正在看的对话被接续成了新 job（别处发消息触发的也算）：跟过去。
   const keyRef = useRef(key);
-  keyRef.current = key;
+  useLayoutEffect(() => { keyRef.current = key; }, [key]);
   useEffect(() => store.on((event) => {
     if (event.type === "job_change" && event.previousKey && event.previousKey === keyRef.current) go(event.key);
   }), [store, go]);
@@ -235,7 +254,13 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
       : jobTitle ?? (key ? "对话" : "新对话");
   const awaitingAnswer = useMemo(() => hasOpenAsk(messages), [messages]);
   const lastTurn = conv?.turns[conv.turns.length - 1];
-  const awaiting = !ended && !running && !!lastTurn?.asked && lastTurn.status === "succeeded";
+  const listedAwaiting = (info ?? job?.conversation?.conversations?.find(item => item.task_id === task?.id))?.awaiting_input;
+  // An explicit null retires an old wait flag when its node observation expires.
+  const remoteAwaiting = conv?.task?.awaiting_input !== undefined ? conv.task.awaiting_input
+    : listedAwaiting !== undefined ? listedAwaiting : task?.awaiting_input !== undefined ? task.awaiting_input
+    : !manyConvs ? job?.conversation?.awaiting_input : undefined;
+  const awaiting = !ended && !TERMINAL_JOB.has(jobStatus ?? "") && !(batch && batchTaskStatus && SETTLED_TASK.has(batchTaskStatus))
+    && (remoteAwaiting === true || (!running && !!lastTurn?.asked && lastTurn.status === "succeeded"));
   // 一次性任务的子任务还没派发（没有节点对话）、或者流已经结束还没有转录：不再转圈，转录里有说明。
   const loading = !!key && !isNew && !!conv && !conv.hasTranscript && !conv.turns.length && conv.stream !== "error" && conv.stream !== "ended" && !(conv.batch && !conv.remoteTaskId);
   const batchStatus = batch ? conv?.batchTask?.status ?? task?.status ?? null : null;
@@ -248,9 +273,9 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
 
   const { dotCls, statusText } = useMemo((): { dotCls: DotCls; statusText: string } => {
     if (!key || isNew) return { dotCls: "r", statusText: "未开始" };
+    if (awaiting) return { dotCls: "a", statusText: "需要你处理" };
     if (batch && !chat) return batchStatusView(batchStatus, jobStatus);
     if (ended) return { dotCls: status === "succeeded" ? "g" : "x", statusText: REASON_TEXT[closedReason ?? ""] ?? (status === "succeeded" ? "已结束" : status === "cancelled" ? "已取消" : "已失败") };
-    if (awaiting) return { dotCls: "a", statusText: "需要你处理" };
     if (running) return { dotCls: "a", statusText: "运行中" };
     if (status === "queued") return { dotCls: "a", statusText: "等待执行节点" };
     return { dotCls: "a", statusText: "进行中" };
@@ -261,12 +286,13 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
   const [actionError, setActionError] = useState<string | null>(null);
   useEffect(() => setActionError(null), [key]);
   const report = useCallback(async <T,>(work: Promise<T>, what: string) => {
+    const sourceKey = keyRef.current;
     try {
       const result = await work;
-      setActionError(null);
+      if (keyRef.current === sourceKey) setActionError(null);
       return result;
     } catch (error) {
-      setActionError(`${what}：${error instanceof Error ? error.message : String(error)}`);
+      if (keyRef.current === sourceKey) setActionError(`${what}：${error instanceof Error ? error.message : String(error)}`);
       throw error;
     }
   }, []);
@@ -274,13 +300,12 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
   // （几个子任务同时跑时，卡片属于它，不是中枢缺省的那个）。和能不能发消息无关。
   const runKey = batch && !taskId && conv?.task?.id && jobId ? convKey(jobId, conv.task.id) : key;
   const latest = useRef({ key, messages, conv, runKey });
-  latest.current = { key, messages, conv, runKey };
+  // A concurrent render may suspend while the old chat remains interactive.
+  // Event handlers must keep the target and options of the committed view.
+  useLayoutEffect(() => { latest.current = { key, messages, conv, runKey }; });
   // 本组件的新建参数随每次发送带上：放进共享 Provider 时也用自己的，不依赖仓库是谁建的。
   const sendOpts = useRef({ newConversation, createConversation, businessIdFor, select: !controlled });
-  sendOpts.current = { newConversation, createConversation, businessIdFor, select: !controlled };
-  const [skipPassive,setSkipPassive]=useState(false);
-  const skipPassiveRef=useRef(false);skipPassiveRef.current=skipPassive;
-  useEffect(()=>setSkipPassive(false),[key]);
+  useLayoutEffect(() => { sendOpts.current = { newConversation, createConversation, businessIdFor, select: !controlled }; });
   const send = useCallback(async (text: string) => {
     // 一次性任务：发给正在看的那个子任务（接着它聊）。
     const id = latest.current.conv?.batch ? latest.current.runKey : latest.current.key;
@@ -289,7 +314,7 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
     const refKey = latest.current.key;
     const refs = refKey ? store.takeRefs(refKey) : [];
     const passiveView=refKey?store.getState().boardContext[refKey]:null;
-    const passive=passiveContext&&!skipPassiveRef.current&&passiveView?formatBoardContext(passiveView,refKey??undefined):'';
+    const passive=passiveContext&&passiveView?formatBoardContext(passiveView,refKey??undefined):'';
     const viewing = !passive && refKey ? store.takeViewing(refKey) : null;
     const blocks = [
       ...(passive ? [{name:"看板正在看",kind:"viewing" as const,text:passive}] : []),
@@ -299,14 +324,13 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
     const full = blocks.length ? [text, ...blocks.map(serializeBlock)].join("\n\n") : text;
     let target: string;
     try {
-      if(charCount(full)>MAX_MESSAGE_CHARS)throw new Error("加上看板背景后消息过长，请精简内容或取消本次自动附带。");
+      if(charCount(full)>MAX_MESSAGE_CHARS)throw new Error("加上看板背景后消息过长，请精简消息内容后重试。");
       target = await store.send(id ?? null, full, sendOpts.current);
     } catch (error) {
       if (refKey) { store.restoreRefs(refKey, refs); store.restoreViewing(refKey, viewing); }
       throw error;
     }
-    if(latest.current.key===refKey)setSkipPassive(false);
-    if (target !== id) go(target);
+    if (target !== id && latest.current.key === refKey) go(target);
   }, [store, go, passiveContext]);
   const passiveView=useCliState(state=>key?state.boardContext[key]:undefined);
   const passiveText=passiveContext&&passiveView?formatBoardContext(passiveView,key??undefined):'';
@@ -316,6 +340,7 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
   // 输入框上方显示哪些（config.refs）：不显示的照样随消息带上。正在看的缺省不显示。
   const viewing = !passiveText && viewingRef && refShown(cfg, "viewing") ? viewingRef : null;
   const shownRefs = refs?.filter((r) => refShown(cfg, r.kind));
+  const chatRef = useRef<HTMLDivElement>(null);
   // 业务方补充的背景（store.appendContext）：随下一条消息带上，输入框上方显示出来，让用户知道会带上什么。
   const contextItems = useCliState((s) => s.context[key ?? ""]);
   // AI 把浏览器交给用户（实时新来的「🖐 …」行）：同一 Provider 里有看板在看这个对话，就把看板切到浏览器（收起的会请宿主展开）。
@@ -330,8 +355,8 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
     if (!seen.ids) { seen.ids = new Set(handoffs.map((m) => m.id)); return; }
     const fresh = handoffs.filter((m) => !seen.ids!.has(m.id));
     for (const m of fresh) seen.ids.add(m.id);
-    if (fresh.length) store.openInBoard(key, { kind: "browser" });
-  }, [key, conv, fileOpen, store]);
+    if (fresh.length) store.openInBoard(key, { kind: "browser" }, inlineOwner);
+  }, [key, conv, fileOpen, store, inlineOwner]);
 
   // 对话里弹窗打开的文件 / 浏览器（没有看板接的时候）。换对话就关掉。
   const [popup, setPopup] = useState<{ kind: "file"; path: string } | { kind: "browser" } | null>(null);
@@ -343,7 +368,12 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
     return () => window.removeEventListener("keydown", onKey);
   }, [popup]);
   const handlers = useMemo<MessageHandlers>(() => ({
-    onQuote: readOnly ? undefined : (m,selected) => {const id=latest.current.key;if(id) store.addRef(id,{id:`message:${m.id}`,kind:"message",label:m.role==='user'?'引用你的消息':'引用智能体消息',text:selected||(m.role==='user'?withoutBoardContext(m.content):m.content)});},
+    onQuote: readOnly ? undefined : (m,selected) => {
+      const id = latest.current.key;
+      if (!id) return;
+      store.addRef(id,{id:`message:${m.id}`,kind:"message",label:m.role==='user'?'引用你的消息':'引用智能体消息',text:selected||(m.role==='user'?withoutBoardContext(m.content):m.content)});
+      chatRef.current?.querySelector<HTMLTextAreaElement>(".composer textarea")?.focus({ preventScroll: true });
+    },
     // 与 Operator 的 answerQuestion 一致：先把卡片标成已答，再把回答发出去（center 已结束提问那一轮，回答就是下一条消息）。
     onAnswer: readOnlyProp || (readOnly && !(batch && store.client.answerAsk)) ? undefined : async (askId: string, questions: AskQuestion[], answers: AskAnswers) => {
       const id = latest.current.key;
@@ -351,7 +381,7 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
       // 一次性任务：提问时回合开着等，答案直接交给节点；不能改发消息。
       if (batch && !chat) { await report(store.answerAsk(latest.current.runKey ?? id, askId, questions, answers, { fallback: false }).then(() => undefined), "回答没有送到"); return; }
       const sent = askId
-        ? store.answerAsk(id, askId, questions, answers, sendOpts.current).then((target) => { if (target !== id) go(target); })
+        ? store.answerAsk(id, askId, questions, answers, sendOpts.current).then((target) => { if (target !== id && latest.current.key === id) go(target); })
         : send(formatAnswersText(questions, answers));
       await report(sent, "回答没有发出去");
     },
@@ -375,7 +405,7 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
     onShowBrowser: !store.client.board || fileOpen === "link" ? undefined : () => {
       const id = latest.current.key;
       if (!id) return;
-      if (fileOpen !== "modal" && store.openInBoard(id, { kind: "browser" })) return;
+      if (fileOpen !== "modal" && store.openInBoard(id, { kind: "browser" }, inlineOwner)) return;
       if (fileOpen !== "board") setPopup({ kind: "browser" });
     },
     onRetry: readOnly ? undefined : (msgId: string) => {
@@ -383,7 +413,7 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
       const at = list.findIndex((m) => m.id === msgId);
       for (let j = (at === -1 ? list.length : at) - 1; j >= 0; j--) if (list[j].role === "user") { void report(send(withoutBoardContext(list[j].content)), "重试没有发出去").catch(() => undefined); return; }
     },
-  }), [readOnly, readOnlyProp, batch, chat, send, store, go, report, fileOpen]);
+  }), [readOnly, readOnlyProp, batch, chat, send, store, go, report, fileOpen, inlineOwner]);
   const stop = useCallback(async () => {
     const { key: id, conv: c } = latest.current;
     const turn = c ? runningTurn(c) : null;
@@ -418,6 +448,7 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
 
   // ── 分窗渲染（移植自 Operator 的 SessionView）：DOM 里最多 RENDER_MAX 行，几千条消息也照样流畅 ──
   const scrollRef = useRef<HTMLDivElement>(null);
+  useChatScrollbar(scrollRef, key);
   const pinned = useRef(true);
   const [atBottom, setAtBottom] = useState(true);
   const committed = useMemo(() => messages.filter((m) => m.role !== "queued"), [messages]);
@@ -559,7 +590,7 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
       if (el && node) { const delta = node.getBoundingClientRect().top - a.top; if (Math.abs(delta) > 1) el.scrollTop += delta; }
     }
   }, [win]);
-  useLayoutEffect(() => { if (pinned.current && scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, running, startIdx, endIdx]);
+  useLayoutEffect(() => { if (pinned.current && scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, running, startIdx, endIdx, win]);
   useEffect(() => {
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
@@ -591,6 +622,18 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
   const fileUrlRef = useRef(fileUrl);
   fileUrlRef.current = fileUrl;
   const board = store.client.board;
+  const mobileWorkspace = useWorkspaceDrawer(chatRef);
+  const workspaceAvailable = h.show && !!key && !isNew && !!board && !externalBoardVisible;
+  const workspaceTabs = workspaceAvailable && !mobileWorkspace;
+  const workspaceActive = workspaceAvailable && workspace.key === key && workspace.active;
+  const showCurrentTitle = h.title || externalBoardVisible || (mobileWorkspace && workspaceAvailable);
+  const quoteToChat = useCallback(() => {
+    const sourceKey = key;
+    showChat();
+    requestAnimationFrame(() => {
+      if (keyRef.current === sourceKey) chatRef.current?.querySelector<HTMLTextAreaElement>(".composer textarea")?.focus({ preventScroll: true });
+    });
+  }, [key, showChat]);
   // 文件地址：宿主给的 fileUrl 优先；没给且后端有看板接口、地址能直接打开时，用 center 的文件接口。
   const resolveFile = useMemo(() => {
     if (fileUrl) return (path: string, kind: "link" | "image") => (jobId ? fileUrlRef.current?.(path, jobId, kind, taskId) ?? null : null);
@@ -601,27 +644,44 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
   const openFile = useMemo(() => {
     if (!key || fileOpen === "link") return null;
     return (path: string) => {
-      if (fileOpen !== "modal" && store.openInBoard(key, { kind: "file", path })) return true;
+      if (fileOpen !== "modal" && store.openInBoard(key, { kind: "file", path }, inlineOwner)) return true;
       if (fileOpen === "board" || !board) return false;
       setPopup({ kind: "file", path });
       return true;
     };
-  }, [key, fileOpen, store, board]);
+  }, [key, fileOpen, store, board, inlineOwner]);
+  const uploadDocument = useMemo<UploadDocument | undefined>(() => {
+    const staging = store.client.uploadDocument;
+    if (!key || isNew || !board?.uploadFile) return staging;
+    return async (file, options) => {
+      const target = await board.info(key);
+      if (options.signal?.aborted) throw new DOMException("上传已取消", "AbortError");
+      if (!target.dispatched) {
+        if (staging) return staging(file, options);
+        throw new Error("当前会话工作区尚未就绪");
+      }
+      const receipt = await board.uploadFile!(key, file, options);
+      if (!receipt.path) throw new Error("文件尚未进入当前工作区，请重试");
+      if (!options.signal?.aborted && latest.current.key === key) openFile?.(receipt.path);
+      return receipt;
+    };
+  }, [store, key, isNew, board, openFile]);
 
   return (
     <FileLinkContext.Provider value={resolveFile}>
     <FileOpenContext.Provider value={openFile}>
-    <div className={`cli-ui cli-chat ${className ?? ""}`} data-theme={theme} style={style}>
+    <div ref={chatRef} className={`cli-ui cli-chat ${className ?? ""}`} data-theme={theme} style={style}>
       <div className="session">
-        {h.show && (h.crumb || h.export || h.title || h.agent || h.usage || h.model || h.status || h.close) && <div className="sess-head">
-          {(h.crumb || h.title) && <div className="sh-main">
+        {h.show && (workspaceAvailable || externalBoardVisible || h.crumb || h.export || h.title || h.agent || h.usage || h.model || h.status || h.close) && <div className="sess-head">
+          {workspaceTabs ? <WorkspaceTabs title={convTitle} subtitle={h.crumb ? title : undefined} chatActive={!workspaceActive} onChat={showChat} onTabsHost={setTabsHost} /> : (h.crumb || showCurrentTitle) && <div className="sh-main">
             {h.crumb && <div className="crumb">
                 <span className="pic" style={{ width: 16, height: 16, borderRadius: 5, background: color, display: "grid", placeItems: "center", color: "#fff", fontSize: 9, fontWeight: 700 }}>{title[0]}</span>
                 {title} <span className="sep">/</span> 对话
             </div>}
-            {h.title && <div className="sh-title"><span className="sht-text" title={convTitle}>{convTitle}</span></div>}
+            {showCurrentTitle && <div className="sh-title"><span className="sht-text" title={convTitle}>{convTitle}</span></div>}
           </div>}
           <div className="sh-tools">
+            {mobileWorkspace && workspaceAvailable && <button type="button" className="btn btn-ghost btn-sm workspace-open" aria-label="打开工作区" aria-haspopup="dialog" aria-expanded={workspaceActive} title="打开工作区" onClick={showWorkspace}>{Icon.board()}</button>}
             {h.agent && agent && <AgentBadge label={agentText} />}
             {h.usage && (fresh > 0 || cacheRead > 0) && (
               <span className="usage-chip" title={`新增 ${fresh.toLocaleString()} tokens${cacheRead ? `\n缓存读取 ${cacheRead.toLocaleString()}（每轮重复读取的上下文）` : ""}`}>
@@ -651,6 +711,7 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
           </div>
         </div>}
 
+        <div className="workspace-chat-content" data-chat-layout={listVisible || externalBoardVisible ? "wide" : "centered"} hidden={workspaceActive && !mobileWorkspace} style={workspaceActive && !mobileWorkspace ? { display: "none" } : undefined}>
         {closing !== "idle" && key && (
           <div className="clear-confirm">
             <span>结束这个对话？结束后不能再发消息{running ? "，正在执行的一轮会被中止" : ""}{taskId && manyConvs ? "；同一任务里的其他对话不受影响" : ""}。</span>
@@ -726,8 +787,7 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
                   <button className="btn btn-ghost btn-sm" onClick={() => scrollToBottom("auto")}>跳到最新</button>
                 </div>
               )}
-              {cfg.transcript.runningIndicator && running && !awaitingAnswer && !hasBelow && <RunningIndicator agent={agent} agentName={cfg.labels.agent} startedAt={turnStartedAt} lastActivityRef={lastActivityRef} />}
-              {!hasBelow && queued.map((m) => <MessageView key={m.id} m={m} initial={false} hideWho={false} handlers={handlers} view={view} />)}
+              {cfg.transcript.runningIndicator && running && !awaiting && !awaitingAnswer && !hasBelow && <RunningIndicator agent={agent} agentName={cfg.labels.agent} startedAt={turnStartedAt} lastActivityRef={lastActivityRef} />}
               {ended && cfg.transcript.status && (
                 <div className="session-label"><span className="ln" />{batch ? statusText : <>{REASON_TEXT[closedReason ?? ""] ?? "对话已结束"}{!finalEnd ? " · 再发消息会开一个新对话接着聊" : ""}</>}<span className="ln" /></div>
               )}
@@ -753,42 +813,24 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
             ))}
           </div>
         )}
-        {showComposer && (!!shownRefs?.length || !!viewing) && (
-          <div className="cli-refs" aria-label="引用自看板，下一条消息会带上">
-            <span className="cli-refs-t">{Icon.board()} 引用自看板</span>
-            {viewing && (
-              <span className="cli-ref auto" title={`${viewing.text}\n（看板上正在看，下一条消息缺省带上；点 × 这次不带）`}>
-                <span className="cli-ref-k">正在看</span>
-                <span className="cli-ref-l">{viewing.label}</span>
-                <button className="cli-ref-x" onClick={() => key && store.dismissViewing(key)} title="这次不带上" aria-label={`不带上 ${viewing.label}`}>{Icon.x()}</button>
-              </span>
-            )}
-            {(shownRefs ?? []).map((r) => (
-              <span key={r.id} className={`cli-ref ${r.kind === "selection" ? "sel" : ""}`} title={r.text}>
-                <span className="cli-ref-l">{r.label}</span>
-                <button className="cli-ref-x" onClick={() => key && store.removeRef(key, r.id)} title="不带上" aria-label={`不带上 ${r.label}`}>{Icon.x()}</button>
-              </span>
-            ))}
-          </div>
-        )}
-        {showComposer && passiveText && passiveView && <div className="cli-board-background" role="note" aria-label="看板浏览背景">
-          <details><summary>看板背景 · {(passiveView.current?.path??passiveView.file)?.split('/').pop()??'未选中文件'} · 打开 {(passiveView.opened??passiveView.files).length} · 最近浏览 {passiveView.history?.length??0}</summary>
-            <div>{passiveView.visible===false?'看板已收起，将附带上次选中的文件及浏览记录。':'将附带当前文件、打开页签和最近浏览记录，仅发送路径等信息。'}</div>
-            <ul>{(passiveView.history??[]).map((file,index)=><li key={`${file.sourceId}:${file.path}:${index}`}>{file.path}{file.sourceId&&file.sourceId!==key?'（来源任务）':''}</li>)}</ul>
-          </details>
-          <label><input type="checkbox" checked={!skipPassive} onChange={event=>setSkipPassive(!event.target.checked)} />下条消息带入</label>
-        </div>}
         {slots?.beforeComposer}
+        {!showComposer && <QueuedMessages scopeKey={key ?? "new"} messages={queued} onCancel={handlers.onCancelQueued} attachmentUrl={handlers.attachmentUrl} />}
         {showComposer && (
           <Composer
+            uploadDocument={uploadDocument}
             key={key ?? "new"}
             draft={store.draftScope ? `${store.draftScope}:${key ?? `new:${instanceId}`}` : key ?? `new:${instanceId}`}
+            context={(!!shownRefs?.length || !!viewing) && <div className="cli-refs composer-references" aria-label="下一条消息的引用">
+              {viewing && <ReferenceCard key={`${key}:viewing:${viewing.id}`} className="reference-viewing" title={`正在看${viewing.label}`} text={viewing.text} disabled={composerDisabled || !!configurationBusy} removeLabel={`不带上 ${viewing.label}`} onRemove={() => { if (key) store.dismissViewing(key); chatRef.current?.querySelector<HTMLTextAreaElement>(".composer textarea")?.focus({ preventScroll: true }); }} />}
+              {(shownRefs ?? []).map(ref => <ReferenceCard key={`${key}:${ref.id}`} title={ref.kind === "message" && ref.label === "引用你的消息" ? "你" : ref.kind === "message" && ref.label === "引用智能体消息" ? "智能体" : ref.label} text={ref.text} disabled={composerDisabled || !!configurationBusy} removeLabel={`不带上 ${ref.label}`} onRemove={() => { if (key) store.removeRef(key, ref.id); chatRef.current?.querySelector<HTMLTextAreaElement>(".composer textarea")?.focus({ preventScroll: true }); }} />)}
+            </div>}
             placeholder={fillTemplate(key && !isNew ? cfg.composer.placeholder : cfg.composer.placeholderNew, { title: convTitle, agent: agentText })}
             disabled={composerDisabled || !!configurationBusy}
             disabledHint={cfg.composer.placeholderDisabled ? fillTemplate(cfg.composer.placeholderDisabled, { title: convTitle, agent: agentText }) : disabledHint}
             running={running || batchPending}
             toolbar={slots?.composerToolbar}
-            onSend={async text => { if (text.trim() === "/clear" && onClear) { onClear(); return; } await send(text); }}
+            queued={<QueuedMessages scopeKey={key ?? "new"} messages={queued} onCancel={handlers.onCancelQueued} attachmentUrl={handlers.attachmentUrl} />}
+            onSend={async text => { if (text.trim() === "/clear" && onClear) { onClear(); return; } const sentFrom = key; await send(text); if (!running && !batchPending && latest.current.key === sentFrom) scrollToBottom("auto"); }}
             onStop={cfg.composer.stop && key && conv && runningTurn(conv) ? stop : undefined}
             taskControl={cfg.composer.stop && !readOnlyProp && controlTask && jobId && store.client.pauseTask && store.client.resumeTask ? {
               paused: controlTask.status === "paused",
@@ -800,6 +842,14 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
             options={composerOptions}
           />
         )}
+        </div>
+        <WorkspaceDrawer enabled={mobileWorkspace} open={workspaceActive} onClose={showChat}>
+        {workspaceAvailable && <CliBoard jobId={key} inlineOwner={inlineOwner} quoteToChat={!readOnly} autoQuoteOpenFile={passiveContext}
+          readOnly={readOnly || externalBoardOptions?.readOnly} availableTabs={externalBoardOptions?.availableTabs}
+          acceptOpen={fileOpen !== "modal" && fileOpen !== "link"} theme={theme}
+          visible={workspaceActive} onExpand={showWorkspace} onQuoteToChat={quoteToChat}
+          inlineLayout={mobileWorkspace ? undefined : { tabsHost, active: workspaceActive, onActivate: showWorkspace, onChat: showChat }} />}
+        </WorkspaceDrawer>
       </div>
       {popup && key && board && (
         <div className="scrim" onClick={(e) => { if (e.target === e.currentTarget) setPopup(null); }}>

package/src/chat/Composer.tsx

@@ -1,6 +1,5 @@
-// 输入框。结构与 Operator 的 Composer.tsx 一致（comp-box / comp-area / send-group / comp-foot），
-// 但只发文本：不收图片和其他附件。文件只收文档（Word、Excel、Markdown、TXT、HTML、CSV），在前端解析成纯文本，
-// 和长粘贴一样变成可折叠的文本块，发送时按统一格式拼进正文（见 core/blocks.ts）。
+// 输入框与 Operator 共用原件上传。上传完成只保留附件引用，用户发送时才交给 Agent。
+// 没有原件上传适配器的宿主继续使用原有文档文本解析。
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import {
   ACCEPT_ATTR, ACCEPTED_LABEL, MAX_MESSAGE_CHARS, PASTE_NAME, charCount, composeMessage, isLongText, readFileText, type TextBlock,
@@ -9,6 +8,9 @@ import { Icon } from "../ui/icons";
 import { clientId } from "../core/id";
 import { TextBlockCard } from "../ui/TextBlock";
 import { fmtCount } from "../ui/format";
+import { useComposerAutosize } from "../ui/useComposerAutosize";
+import { documentMarker, FILE_UPLOAD_ACCEPT, type UploadDocument } from "../core/documentUpload";
+import { UploadProgress } from "../ui/UploadProgress";
 
 import { clearComposerDraft, readComposerDraft, updateComposerDraft, useComposerDraft, type PendingFile } from "./draft";
 
@@ -22,7 +24,7 @@ export interface ComposerOptions {
   queue: boolean;
 }
 
-export function Composer({ draft, placeholder, disabled, disabledHint, running, onSend, onStop, taskControl, options, toolbar }: {
+export function Composer({ draft, placeholder, disabled, disabledHint, running, onSend, onStop, taskControl, options, toolbar, queued, context, uploadDocument }: {
   /** 草稿按这个键存在 localStorage（一般是对话 id）。 */
   draft: string;
   placeholder: string;
@@ -34,6 +36,9 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
   taskControl?: { paused: boolean; onToggle: () => Promise<void> };
   options: ComposerOptions;
   toolbar?: ReactNode;
+  queued?: ReactNode;
+  context?: ReactNode;
+  uploadDocument?: UploadDocument;
 }) {
   const state = useComposerDraft(draft);
   const { text: val, blocks, pending, error, sending } = state;
@@ -51,10 +56,21 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
   const composing = useRef(false);
   const fileRef = useRef<HTMLInputElement>(null);
   const ref = useRef<HTMLTextAreaElement>(null);
+  const uploads = useRef(new Map<string, AbortController>());
+  const selectedFiles = useRef(new Map<string, File>());
+
+  useEffect(() => () => {
+    const owned = new Set(uploads.current.keys());
+    for (const controller of uploads.current.values()) controller.abort();
+    uploads.current.clear(); selectedFiles.current.clear();
+    if (readComposerDraft(draft).pending.some(file => owned.has(file.key) && file.status === "reading")) {
+      updateComposerDraft(draft, current => ({ ...current, pending: current.pending.map(file => owned.has(file.key) && file.status === "reading"
+        ? { ...file, status: "error", error: file.phase ? "上传已中断，请重新选择文件。" : "解析已中断，请重新选择文件。" } : file) }));
+    }
+  }, [draft]);
 
   useEffect(() => { if (!running) { stopLock.current = false; setStopping(false); } }, [running]);
-  const autosize = (el: HTMLTextAreaElement) => { el.style.height = "auto"; el.style.height = Math.min(el.scrollHeight, 160) + "px"; };
-  useEffect(() => { if (ref.current) autosize(ref.current); }, [draft, disabled]);
+  useComposerAutosize(ref, val);
 
   const nextKey = () => `blk-${clientId()}`;
   const addBlock = (block: TextBlock) => setBlocks((prev) => [...prev, { ...block, key: nextKey() }]);
@@ -63,15 +79,28 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
     if (disabled || sending || !options.fileUpload) return;
     for (const file of files) {
       const key = nextKey();
-      setPending((prev) => [...prev, { key, name: file.name || "文件", status: "reading" }]);
-      readFileText(file)
+      const original = !!uploadDocument;
+      const controller = new AbortController();
+      uploads.current.set(key, controller);
+      selectedFiles.current.set(key, file);
+      setPending((prev) => [...prev, { key, name: file.name || "文件", status: "reading", ...(original ? { phase: "queued" as const, bytes: 0, size: file.size } : {}) }]);
+      const content = original ? Promise.resolve().then(() => uploadDocument!(file, { draftId: clientId(), signal: controller.signal,
+        onPhase: phase => { if (!controller.signal.aborted) setPending(prev => prev.map(p => p.key === key ? { ...p, phase } : p)); },
+        onBytes: bytes => { if (!controller.signal.aborted) setPending(prev => prev.map(p => p.key === key ? { ...p, bytes } : p)); },
+      })).then(documentMarker) : readFileText(file);
+      content
         .then((text) => {
+          if (controller.signal.aborted) return;
           if (!text.trim()) throw new Error(`「${file.name}」里没有可读的文字`);
-          updateComposerDraft(draft, s => ({ ...s, pending: s.pending.filter(p => p.key !== key), blocks: [...s.blocks, { key, name: file.name, text, kind: "file" }] }));
+          updateComposerDraft(draft, s => s.pending.some(p => p.key === key && p.status === "reading")
+            ? { ...s, pending: s.pending.filter(p => p.key !== key), blocks: [...s.blocks, { key, name: file.name, text, kind: "file" }] }
+            : s);
+          selectedFiles.current.delete(key);
         })
         .catch((err: unknown) => {
+          if (controller.signal.aborted) return;
           setPending((prev) => prev.map((p) => (p.key === key ? { ...p, status: "error", error: err instanceof Error ? err.message : String(err) } : p)));
-        });
+        }).finally(() => uploads.current.delete(key));
     }
   };
 
@@ -93,7 +122,6 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
       // 新建对话时发送完成前组件就换成了新对话的输入框（key 变了），这里直接清掉发出时那份草稿。
       const current = readComposerDraft(key);
       if (JSON.stringify([current.text, current.blocks]) === submitted) clearComposerDraft(key);
-      if (ref.current) ref.current.style.height = "auto";
     } catch (err) {
       // 发送失败：内容留在输入框里，可以直接再发。
       setError(err instanceof Error ? err.message : String(err));
@@ -110,7 +138,7 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
       stopLock.current = true; setStopping(true); setError(null);
       try { await onStop(); } catch (error) { stopLock.current = false; setStopping(false); setError(error instanceof Error ? error.message : "停止失败，请重试"); }
     }}
-      disabled={stopping} aria-label={stopping ? "正在停止" : "停止当前轮次"} title={stopping ? "正在停止…" : "停止当前轮次"}>{Icon.stop()}</button>
+      disabled={stopping} aria-busy={stopping} aria-label={stopping ? "正在停止" : "停止当前轮次"} title={stopping ? "正在停止…" : "停止当前轮次"}>{Icon.stop()}</button>
   );
 
   return (
@@ -119,6 +147,7 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
         {(error || tooLong) && (
           <div className="cli-comp-err" role="alert">⚠ {tooLong ? `内容共 ${fmtCount(total)} 字，超过单条消息上限 ${fmtCount(MAX_MESSAGE_CHARS)} 字，请删减或分几条发送` : error}</div>
         )}
+        {queued}
         <div
           className={`comp-box${dragging ? " dropping" : ""}`}
           onDragEnter={(e) => { if (!disabled && hasFileDrag(e)) { e.preventDefault(); dragDepth.current++; setDragging(true); } }}
@@ -135,14 +164,19 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
             addFiles(Array.from(e.dataTransfer.files));
           }}
         >
+          {context}
           {(blocks.length > 0 || pending.length > 0) && (
             <div className="cli-blocks">
               {blocks.map((b) => <TextBlockCard key={b.key} block={b} onRemove={() => setBlocks((prev) => prev.filter((x) => x.key !== b.key))} />)}
-              {pending.map((p) => (
+              {pending.map((p) => p.phase ? <UploadProgress key={p.key} name={p.name} status={p.status === "error" ? "error" : p.phase}
+                bytes={p.bytes} total={p.size} error={p.error}
+                onCancel={() => { uploads.current.get(p.key)?.abort(); selectedFiles.current.delete(p.key); setPending(prev => prev.filter(x => x.key !== p.key)); }}
+                onRemove={() => { selectedFiles.current.delete(p.key); setPending(prev => prev.filter(x => x.key !== p.key)); }}
+                onRetry={selectedFiles.current.has(p.key) ? () => { if (disabled || sending) return; const file = selectedFiles.current.get(p.key)!; selectedFiles.current.delete(p.key); setPending(prev => prev.filter(x => x.key !== p.key)); addFiles([file]); } : undefined} /> : (
                 <div key={p.key} className={`attach-chip file ${p.status}`} title={p.error || p.name}>
                   <span className="attach-file">{Icon.doc()} {p.name}</span>
-                  <span className={`attach-badge ${p.status === "error" ? "err" : ""}`}>{p.status === "reading" ? "解析中…" : p.error}</span>
-                  {p.status === "error" && <button className="attach-x" title="移除" aria-label={`移除 ${p.name}`} onClick={() => setPending((prev) => prev.filter((x) => x.key !== p.key))}>×</button>}
+                  <span className={`attach-badge ${p.status === "error" ? "err" : ""}`}>{p.status === "reading" ? p.progress ?? "解析中…" : p.error}</span>
+                  <button type="button" className="attach-x" title={p.status === "reading" ? "取消添加" : "移除"} aria-label={`移除 ${p.name}`} onClick={() => { uploads.current.get(p.key)?.abort(); setPending((prev) => prev.filter((x) => x.key !== p.key)); }}>×</button>
                 </div>
               ))}
             </div>
@@ -151,7 +185,7 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
             <textarea
               ref={ref} rows={2} value={val} disabled={disabled || sending} aria-label="消息内容"
               placeholder={disabled ? disabledHint ?? "暂时不能发送" : taskControl?.paused ? "任务已暂停，可补充消息，继续后依次执行…" : running && options.queue ? options.placeholderRunning : placeholder}
-              onChange={(e) => { setVal(e.target.value); autosize(e.target); }}
+              onChange={(e) => setVal(e.target.value)}
               onCompositionStart={() => { composing.current = true; }} onCompositionEnd={() => { composing.current = false; }}
               onKeyDown={(e) => { if (e.nativeEvent.isComposing || composing.current || e.keyCode === 229) return; if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void submit(); } }}
               onPaste={(e) => {
@@ -159,8 +193,8 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
                 if (files.length) {
                   e.preventDefault();
                   if (!options.fileUpload) { setError("这里只能发送文字"); return; }
-                  if (files.some((f) => f.type.startsWith("image/"))) setError(`不支持发送图片，只能发送文字，或上传文档：${ACCEPTED_LABEL}`);
-                  addFiles(files.filter((f) => !f.type.startsWith("image/")));
+                  if (!uploadDocument && files.some((f) => f.type.startsWith("image/"))) setError(`不支持发送图片，只能发送文字，或上传文档：${ACCEPTED_LABEL}`);
+                  addFiles(uploadDocument ? files : files.filter((f) => !f.type.startsWith("image/")));
                   return;
                 }
                 // 大段粘贴不放进输入框（几万字的 textarea 会很卡），转成可折叠的文本块。
@@ -174,8 +208,8 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
           </div>
           <div className="comp-foot">
             {options.fileUpload && !disabled && <>
-              <input ref={fileRef} type="file" accept={ACCEPT_ATTR} multiple hidden onChange={(e) => { addFiles(Array.from(e.target.files ?? [])); e.target.value = ""; }} />
-              <button type="button" className="cli-attach" disabled={sending} aria-label="添加文档" title={`添加文档：${ACCEPTED_LABEL}（也可拖拽进来），内容会转成文字发送`}
+              <input ref={fileRef} type="file" accept={uploadDocument ? FILE_UPLOAD_ACCEPT : ACCEPT_ATTR} multiple hidden onChange={(e) => { addFiles(Array.from(e.target.files ?? [])); e.target.value = ""; }} />
+              <button type="button" className="cli-attach" disabled={sending} aria-label={uploadDocument ? "添加文件" : "添加文档"} title={uploadDocument ? "添加文件（也可拖拽进来）；HTML、Markdown 最大 100 MiB，其他支持类型最大 10 MiB" : `添加文档：${ACCEPTED_LABEL}（也可拖拽进来）`}
                 onClick={() => fileRef.current?.click()}>{Icon.plus()} <span>{options.fileButtonText}</span></button>
             </>}
             {toolbar}
@@ -190,7 +224,7 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
                 onClick={async () => { if (controlLock.current) return; controlLock.current = true; setControlling(true); try { await taskControl.onToggle(); } catch (error) { setError(error instanceof Error ? error.message : "执行控制失败，请重试"); } finally { controlLock.current = false; setControlling(false); } }}>
                 {taskControl.paused ? Icon.play() : Icon.pause()}<span>{controlling ? "处理中…" : taskControl.paused ? "继续" : "暂停"}</span>
               </button>}
-              {(!running || options.queue) && <button type="button" className={`send cli-send${running ? " queue" : ""}`} disabled={disabled || !canSend}
+              {(!running || options.queue) && <button type="button" className={`send cli-send${running ? " queue" : ""}`} disabled={disabled || !canSend} aria-busy={sending}
                 onClick={() => void submit()} aria-label={sending ? "正在发送" : running ? "排队发送" : "发送消息"}
                 title={taskControl?.paused ? "排队发送，继续任务后依次执行" : running ? "排队发送，当前轮次结束后执行" : "发送消息（Enter）"}>
                 {Icon.send()}<span>{sending ? "发送中…" : running ? "排队发送" : "发送"}</span>