@spzxg/cli-ui 0.6.1 → 0.6.5

package/src/chat/CliChat.tsx

@@ -1,27 +1,36 @@
 // cli-chat：对话。界面取自 Operator 的会话视图（SessionView 的对话部分 + Composer），
 // 数据来自 center 的对话任务（mode=conversation）：实时流里的节点转录按 Operator 的规则渲染，
 // 每条消息是中枢的一轮，排队 / 执行 / 结束都跟 center 保持一致。
-import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type CSSProperties } from "react";
-import { CliErrorBoundary } from "../ui/ErrorBoundary.js";
-import type { CliEvent, CliStore, CliStoreOptions } from "../core/store.js";
-import { useCliState, useCliStore, useCliStoreContext, useComponentEvents, withOwnProvider, type ResultHandlers } from "../core/provider.js";
-import { boardContextBlock, serializeBlock, viewingBlock } from "../core/blocks.js";
-import { convKey, emptyConv, isChatTask, isNewInJob, isRunning, parseConvKey, runningTurn, TERMINAL_JOB, viewMessages } from "../core/conversation.js";
-import type { AskAnswers, AskQuestion, Msg } from "../core/types.js";
-import { Icon } from "../ui/icons.js";
-import { agentLabel as labelOf, fmtTokens, formatAnswersText, modelLabel } from "../ui/format.js";
-import { AgentBadge, Avatar, Skel, StatusDot, type DotCls } from "../ui/shared.js";
-import { HANDOFF_NOTICE_PREFIX, MessageView, SessionBreak, type MessageHandlers } from "../ui/Transcript.js";
-import { RENDER_MAX, RENDER_STEP, RENDER_WINDOW, buildTranscriptItems, hasOpenAsk, toolDataOf } from "../ui/transcriptModel.js";
-import { Composer, type ComposerOptions } from "./Composer.js";
-import { fillTemplate, refShown, resolveChatConfig, type CliChatConfig } from "../core/config.js";
-import { exportMarkdown } from "./export.js";
-import { FileLinkContext, FileOpenContext } from "../ui/fileLinks.js";
-import { FileViewer } from "../board/FileViewer.js";
-import { BrowserPane } from "../board/BrowserPane.js";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type ReactNode, type CSSProperties } from "react";
+import { CliErrorBoundary } from "../ui/ErrorBoundary";
+import type { CliEvent, CliStore, CliStoreOptions } from "../core/store";
+import { useCliState, useCliStore, useCliStoreContext, useComponentEvents, withOwnProvider, type ResultHandlers } from "../core/provider";
+import { formatBoardContext, withoutBoardContext } from "../board/context";
+import { MAX_MESSAGE_CHARS, charCount, boardContextBlock, serializeBlock, viewingBlock } from "../core/blocks";
+import { convKey, emptyConv, isChatTask, isNewInJob, isRunning, parseConvKey, runningTurn, TERMINAL_JOB, viewMessages } from "../core/conversation";
+import type { AskAnswers, AskQuestion, CenterTask, Msg } from "../core/types";
+import { Icon } from "../ui/icons";
+import { agentLabel as labelOf, fmtTokens, formatAnswersText, modelLabel } from "../ui/format";
+import { AgentBadge, Avatar, Skel, StatusDot, type DotCls } from "../ui/shared";
+import { HANDOFF_NOTICE_PREFIX, MessageView, SessionBreak, type MessageHandlers } from "../ui/Transcript";
+import { RENDER_MAX, RENDER_STEP, RENDER_WINDOW, buildTranscriptItems, hasOpenAsk, toolDataOf } from "../ui/transcriptModel";
+import { Composer, type ComposerOptions } from "./Composer";
+import { fillTemplate, refShown, resolveChatConfig, type CliChatConfig } from "../core/config";
+import { exportMarkdown } from "./export";
+import { FileLinkContext, FileOpenContext } from "../ui/fileLinks";
+import { FileViewer } from "../board/FileViewer";
+import { BrowserPane } from "../board/BrowserPane";
 
 /** onTurnEnd / onConversationEnd：浏览器里从实时流算出的结果通知，不依赖 center 的 callback.url。 */
 export interface CliChatProps extends CliStoreOptions, ResultHandlers {
+  /** 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. */
+  configurationBusy?: boolean;
+  onClear?: () => void;
+  /** 每条消息自动带入看板当前文件、页签和最近浏览；默认 true。 */
+  passiveContext?: boolean;
+
   /**
    * 显示哪个对话（center 的 job_id）。不给就跟共享仓库的选中走（和 cli-msglist 联动）；都没有 = 新对话。
    * 也可以直接给对话键 "job_id#task_id"（cli-msglist 的 onSelect、job_change 事件的 key 就是它）。
@@ -120,7 +129,7 @@ function RunningIndicator({ agent, agentName, startedAt, lastActivityRef }: { ag
   );
 }
 
-function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", color = "#b8613f", readOnly: readOnlyProp, allowClose = true, config, theme = "light", className, style, onEvent, onTurnEnd, onConversationEnd, onCallback, inProvider, fileUrl, fileOpen = "auto", newConversation, createConversation, businessIdFor }: CliChatProps & { inProvider: boolean }) {
+function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, jobId: jobIdProp, taskId: taskIdProp, title = "对话", color = "#b8613f", readOnly: readOnlyProp, allowClose = true, config, theme = "light", className, style, onEvent, onTurnEnd, onConversationEnd, onCallback, inProvider, fileUrl, fileOpen = "auto", newConversation, createConversation, businessIdFor }: CliChatProps & { inProvider: boolean }) {
   useComponentEvents(onEvent, { onTurnEnd, onConversationEnd, onCallback }, inProvider);
   // 配置按内容比较：宿主每次渲染传新对象也不会让消息行全部重渲染。
   const configKey = JSON.stringify(config ?? {});
@@ -174,17 +183,27 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
   })), [allMessages, cfg.transcript.tools]);
   const running = conv ? isRunning(conv) : false;
   const job = entry?.job;
-  // 一次性任务（含续派，不是对话任务）：只读查看其中一个子任务——没有轮次，不能发消息、结束、回答。
-  // 例外是对话式子任务（续派时 mode=conversation）：当对话用，随时能接着发（= 续派一条接着它），不显示子任务状态。
+  // 一次性任务没有轮次：补充消息通过 continueTask 接在当前子任务的对话后面。
   const batch = !!conv?.batch || (!!job && job.mode !== "conversation");
   const chat = !!taskId && isChatTask(conv);
-  // 普通子任务结束后（完成 / 失败 / 取消）也能接着聊：发出去 = 续派一条接着它的对话式子任务（同一个 Agent 会话、同一个工作区）。
-  // 还在跑的时候输入框照样显示、但不能发，提示结束后再接着聊（需要登录、验证码时在看板的浏览器里接管）。
   const batchTaskStatus = batch ? conv?.batchTask?.status ?? job?.tasks?.find((t) => t.id === (taskId ?? conv?.task?.id))?.status ?? null : null;
-  const batchSettled = batch && !chat && !!batchTaskStatus && SETTLED_TASK.has(batchTaskStatus) && !!store.client.continueTask;
-  const readOnly = !!readOnlyProp || !cfg.composer.show || (batch && !chat && !batchSettled);
-  // 一次性任务的子任务没结束、不能发时，输入框也露出来（禁用 + 说明），别让人以为没有输入框。
-  const showComposer = !readOnly || (batch && !readOnlyProp && cfg.composer.show);
+  const batchWritable = batch && !!(taskId ?? conv?.task?.id) && !!store.client.continueTask;
+  const readOnly = !!readOnlyProp || !cfg.composer.show || (batch && !batchWritable);
+  const showComposer = !readOnlyProp && cfg.composer.show;
+  // 最新消息可能还在排队：沿当前对话的接续链找正在执行 / 暂停的子任务，不能误停同 Job 的其他对话。
+  const controlTask = useMemo(() => {
+    if (!batch || !conv?.batchTask) return null;
+    const tasks = new Map<string, Pick<CenterTask, "id" | "status" | "continue_from_task_id">>((job?.tasks ?? []).map((t) => [t.id, t]));
+    tasks.set(conv.batchTask.id, { ...conv.batchTask, continue_from_task_id: conv.batchTask.continue_from_task_id ?? undefined });
+    const chain = [];
+    const seen = new Set<string>();
+    let t = tasks.get(conv.batchTask.id);
+    while (t && !seen.has(t.id)) { chain.push(t); seen.add(t.id); t = tasks.get(t.continue_from_task_id ?? ""); }
+    return chain.find((t) => ["dispatching", "running", "verifying"].includes(t.status))
+      ?? chain.find((t) => t.status === "paused")
+      ?? chain.reverse().find((t) => ["queued", "blocked"].includes(t.status)) ?? null;
+  }, [batch, conv?.batchTask, job?.tasks]);
+  const batchPending = batch && !!batchTaskStatus && !SETTLED_TASK.has(batchTaskStatus);
   // 这个对话对应的子任务：指定了就是它，否则对话任务的第一个（「新开」时借用第一个的智能体显示）；
   // 一次性任务没指定时是实时流挑的那个（最近一个派发过的）。
   const shownTaskId = taskId ?? (batch ? conv?.task?.id : undefined);
@@ -194,10 +213,10 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
   const agentText = labelOf(agent);
   const jobStatus = conv?.job?.status ?? job?.status ?? null;
   // 对话式子任务没有「结束」：大任务结束了，再发一条会重新打开它。
-  // 普通子任务结束后能接着聊的（batchSettled）同理：大任务结束不挡输入框。
-  const jobEnded = !chat && !batchSettled && !!jobStatus && TERMINAL_JOB.has(jobStatus);
+  // 支持续派的普通子任务同理：大任务结束不挡输入框。
+  const jobEnded = !chat && !batchWritable && !!jobStatus && TERMINAL_JOB.has(jobStatus);
   // 只关掉了这一个对话（对话任务还开着）：按「这个对话已结束」显示，不能再发消息。
-  const convClosed = !jobEnded && !batchSettled && !!(conv?.task?.closed ?? info?.closed);
+  const convClosed = !jobEnded && !batchWritable && !!(conv?.task?.closed ?? info?.closed);
   const status = convClosed ? "succeeded" : jobStatus;
   const closedReason = convClosed ? "conversation_closed" : conv?.job?.closed_reason ?? job?.conversation?.closed_reason ?? null;
   const ended = jobEnded || convClosed;
@@ -259,6 +278,9 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
   // 本组件的新建参数随每次发送带上：放进共享 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]);
   const send = useCallback(async (text: string) => {
     // 一次性任务：发给正在看的那个子任务（接着它聊）。
     const id = latest.current.conv?.batch ? latest.current.runKey : latest.current.key;
@@ -266,26 +288,33 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
     // 看板上正在看的文件缺省也带上一次（已经明确引用了的不重复），单独一块「看板正在看」：转录里按 config.refs.viewing 显示或不显示。
     const refKey = latest.current.key;
     const refs = refKey ? store.takeRefs(refKey) : [];
-    const viewing = refKey ? store.takeViewing(refKey) : null;
+    const passiveView=refKey?store.getState().boardContext[refKey]:null;
+    const passive=passiveContext&&!skipPassiveRef.current&&passiveView?formatBoardContext(passiveView,refKey??undefined):'';
+    const viewing = !passive && refKey ? store.takeViewing(refKey) : null;
     const blocks = [
+      ...(passive ? [{name:"看板正在看",kind:"viewing" as const,text:passive}] : []),
       ...(viewing && !refs.some((r) => r.id === viewing.id) ? [viewingBlock(viewing.text)] : []),
       ...(refs.length ? [boardContextBlock(refs.map((r) => r.text))] : []),
     ];
     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("加上看板背景后消息过长，请精简内容或取消本次自动附带。");
       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);
-  }, [store, go]);
+  }, [store, go, passiveContext]);
+  const passiveView=useCliState(state=>key?state.boardContext[key]:undefined);
+  const passiveText=passiveContext&&passiveView?formatBoardContext(passiveView,key??undefined):'';
   const refs = useCliState((s) => (key ? s.refs[key] : undefined));
   const viewingState = useCliState((s) => (key ? s.viewing[key] : undefined));
   const viewingRef = viewingState && !viewingState.off && !refs?.some((r) => r.id === viewingState.ref.id) ? viewingState.ref : null;
   // 输入框上方显示哪些（config.refs）：不显示的照样随消息带上。正在看的缺省不显示。
-  const viewing = viewingRef && refShown(cfg, "viewing") ? viewingRef : null;
+  const viewing = !passiveText && viewingRef && refShown(cfg, "viewing") ? viewingRef : null;
   const shownRefs = refs?.filter((r) => refShown(cfg, r.kind));
   // 业务方补充的背景（store.appendContext）：随下一条消息带上，输入框上方显示出来，让用户知道会带上什么。
   const contextItems = useCliState((s) => s.context[key ?? ""]);
@@ -314,6 +343,7 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
     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)});},
     // 与 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({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
     onRetry: readOnly ? undefined : (msgId: string) => {
       const list = latest.current.messages;
       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(list[j].content), "重试没有发出去").catch(() => undefined); return; }
+      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]);
   const stop = useCallback(async () => {
@@ -359,7 +389,19 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
     const turn = c ? runningTurn(c) : null;
     if (id && turn) await report(store.cancelTurn(id, turn.turn_id), "停止失败");
   }, [store, report]);
-  const [closing, setClosing] = useState<"idle" | "confirm" | "busy">("idle");
+  const [closeAction, setCloseAction] = useState<{ key: string; stage: "confirm" | "busy" } | null>(null);
+  const closing = closeAction?.key === key ? closeAction.stage : "idle";
+  useEffect(() => setCloseAction(null), [key]);
+  const confirmClose = () => {
+    if (!key || closeAction?.key !== key || closeAction.stage !== "confirm") return;
+    const pending = { key, stage: "busy" as const };
+    setCloseAction(pending);
+    void store.close(key).then(() => {
+      if (latest.current.key === pending.key) setActionError(null);
+    }, (error: unknown) => {
+      if (latest.current.key === pending.key) setActionError(`结束对话失败：${error instanceof Error ? error.message : String(error)}`);
+    }).finally(() => setCloseAction(current => current === pending ? null : current));
+  };
 
   // ── 运行计时（与 Operator 一致：本页看着开始的轮次按本机时钟，进来时已在跑的按那条用户消息的时间） ──
   const lastUserTs = useMemo(() => { for (let i = messages.length - 1; i >= 0; i--) if (messages[i].role === "user") return messages[i].ts ?? null; return null; }, [messages]);
@@ -385,7 +427,8 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
   const [loadingOlder, setLoadingOlder] = useState(false);
   const olderRef = useRef(older); olderRef.current = older;
   const keyRef2 = useRef(key); keyRef2.current = key;
-  const items = useMemo(() => buildTranscriptItems(committed, older > 0), [committed, older]);
+  const items = useMemo(() => buildTranscriptItems(committed, older > 0)
+    .filter((it) => cfg.transcript.initialPrompt || it.kind !== "msg" || !it.initial), [committed, older, cfg.transcript.initialPrompt]);
   // 展开了的「续等」折叠行（按折叠行的 key）。
   const [openFolds, setOpenFolds] = useState<Set<string>>(() => new Set());
   const [win, setWin] = useState<{ start: string | null; end: string | null }>({ start: null, end: null });
@@ -541,9 +584,7 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
   const composerDisabled = !!readOnly || finalEnd || conv?.stream === "error";
   const disabledHint = readOnly
     ? batch && !readOnlyProp && cfg.composer.show
-      ? (batchTaskStatus && SETTLED_TASK.has(batchTaskStatus) ? "只读（当前中枢不支持接着子任务聊）"
-        : batchTaskStatus === "blocked" || batchTaskStatus === "queued" ? "子任务还没开始，开始并结束后可以接着它聊"
-        : "子任务运行中，结束后可以接着它继续聊；需要登录等操作请在右侧浏览器里接管")
+      ? "当前任务暂不支持发送消息"
       : "只读"
     : finalEnd ? "对话已结束，不能再发消息" : conv?.streamError ?? undefined;
 
@@ -573,15 +614,10 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
     <div 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.export || h.title) && <div className="sh-main">
-            {(h.crumb || h.export) && <div className="crumb">
-              {h.crumb && <>
+          {(h.crumb || h.title) && <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> 对话
-              </>}
-              {h.export && key && allMessages.length > 0 && (
-                <button className="crumb-export" onClick={() => exportMarkdown(convTitle, taskId ? `${jobId}-${taskId}` : jobId!, allMessages, conv?.turns ?? [])} title="导出这个对话的完整过程（Markdown）">{Icon.download()} 导出执行过程</button>
-              )}
             </div>}
             {h.title && <div className="sh-title"><span className="sht-text" title={convTitle}>{convTitle}</span></div>}
           </div>}
@@ -603,8 +639,14 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
               <StatusDot cls={dotCls} running={running} awaiting={awaiting} title={statusText} />
               <span className="cv">{statusText}</span>
             </span>}
+            {h.export && key && <button type="button" className="btn btn-line btn-sm cli-export" disabled={!allMessages.length}
+              aria-label="导出执行过程（Markdown）"
+              title={older > 0 ? "下载已加载的执行过程（Markdown）；更早的消息尚未加载" : "下载执行过程（Markdown），包含初始上下文和工具记录"}
+              onClick={() => exportMarkdown(convTitle, taskId ? `${jobId}-${taskId}` : jobId!, allMessages, conv?.turns ?? [])}>
+              {Icon.download()}<span>{older > 0 ? "导出已加载" : "导出"}</span>
+            </button>}
             {h.close && key && !isNew && allowClose && !readOnly && !ended && !batch && (
-              <button className="btn btn-line btn-sm" onClick={() => setClosing("confirm")} disabled={closing === "busy"} title={taskId ? "只结束这个对话：之后它不再接收消息，正在跑的一轮会被中止；同一任务里的其他对话不受影响" : "结束这个对话：之后不再接收消息，正在跑的一轮会被中止"}>{Icon.stop()} 结束对话</button>
+              <button className="btn btn-line btn-sm" onClick={() => key && setCloseAction({ key, stage: "confirm" })} disabled={closing === "busy"} title={taskId ? "只结束这个对话：之后它不再接收消息，正在跑的一轮会被中止；同一任务里的其他对话不受影响" : "结束这个对话：之后不再接收消息，正在跑的一轮会被中止"}>{Icon.stop()} 结束对话</button>
             )}
           </div>
         </div>}
@@ -613,8 +655,8 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
           <div className="clear-confirm">
             <span>结束这个对话？结束后不能再发消息{running ? "，正在执行的一轮会被中止" : ""}{taskId && manyConvs ? "；同一任务里的其他对话不受影响" : ""}。</span>
             <span className="spacer" />
-            <button className="btn btn-ghost btn-sm" onClick={() => setClosing("idle")} disabled={closing === "busy"}>取消</button>
-            <button className="btn btn-accent btn-sm" disabled={closing === "busy"} onClick={() => { setClosing("busy"); void report(store.close(key), "结束对话失败").catch(() => undefined).finally(() => setClosing("idle")); }}>{closing === "busy" ? "正在结束…" : "确认结束"}</button>
+            <button className="btn btn-ghost btn-sm" onClick={() => setCloseAction(null)} disabled={closing === "busy"}>取消</button>
+            <button className="btn btn-accent btn-sm" disabled={closing === "busy"} onClick={confirmClose}>{closing === "busy" ? "正在结束…" : "确认结束"}</button>
           </div>
         )}
         {actionError && <div className="sync-banner conflict"><span className="sync-msg">⚠ {actionError}</span><span className="sync-spacer" /><button className="btn btn-ghost btn-sm" onClick={() => setActionError(null)}>知道了</button></div>}
@@ -624,6 +666,7 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
         <div className="transcript-wrap">
           <div className="transcript" ref={scrollRef} onScroll={onScroll}>
             <div className="tw">
+              {slots?.beforeMessages}
               {(!key || isNew) && cfg.empty.show && (
                 <div className="hero cli-hero">
                   <div className="h-ic">{Icon.bolt()}</div>
@@ -688,6 +731,7 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
               {ended && cfg.transcript.status && (
                 <div className="session-label"><span className="ln" />{batch ? statusText : <>{REASON_TEXT[closedReason ?? ""] ?? "对话已结束"}{!finalEnd ? " · 再发消息会开一个新对话接着聊" : ""}</>}<span className="ln" /></div>
               )}
+              {slots?.afterMessages}
               {continuedBy && (
                 <div className="load-older"><button className="btn btn-line btn-sm" onClick={() => go(continuedBy)}>转到接续的新对话</button></div>
               )}
@@ -727,16 +771,32 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
             ))}
           </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 && (
           <Composer
             key={key ?? "new"}
-            draft={key ?? `new:${instanceId}`}
+            draft={store.draftScope ? `${store.draftScope}:${key ?? `new:${instanceId}`}` : key ?? `new:${instanceId}`}
             placeholder={fillTemplate(key && !isNew ? cfg.composer.placeholder : cfg.composer.placeholderNew, { title: convTitle, agent: agentText })}
-            disabled={composerDisabled}
+            disabled={composerDisabled || !!configurationBusy}
             disabledHint={cfg.composer.placeholderDisabled ? fillTemplate(cfg.composer.placeholderDisabled, { title: convTitle, agent: agentText }) : disabledHint}
-            running={running}
-            onSend={send}
+            running={running || batchPending}
+            toolbar={slots?.composerToolbar}
+            onSend={async text => { if (text.trim() === "/clear" && onClear) { onClear(); return; } await send(text); }}
             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",
+              onToggle: async () => {
+                const action = controlTask.status === "paused" ? store.client.resumeTask! : store.client.pauseTask!;
+                await report(action(controlTask.id).then(() => store.refreshJob(jobId, true)), controlTask.status === "paused" ? "继续任务失败" : "暂停任务失败");
+              },
+            } : undefined}
             options={composerOptions}
           />
         )}

package/src/chat/Composer.tsx

@@ -1,24 +1,16 @@
 // 输入框。结构与 Operator 的 Composer.tsx 一致（comp-box / comp-area / send-group / comp-foot），
 // 但只发文本：不收图片和其他附件。文件只收文档（Word、Excel、Markdown、TXT、HTML、CSV），在前端解析成纯文本，
 // 和长粘贴一样变成可折叠的文本块，发送时按统一格式拼进正文（见 core/blocks.ts）。
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import {
   ACCEPT_ATTR, ACCEPTED_LABEL, MAX_MESSAGE_CHARS, PASTE_NAME, charCount, composeMessage, isLongText, readFileText, type TextBlock,
-} from "../core/blocks.js";
-import { Icon } from "../ui/icons.js";
-import { TextBlockCard } from "../ui/TextBlock.js";
-import { fmtCount } from "../ui/format.js";
+} from "../core/blocks";
+import { Icon } from "../ui/icons";
+import { clientId } from "../core/id";
+import { TextBlockCard } from "../ui/TextBlock";
+import { fmtCount } from "../ui/format";
 
-const draftKey = (key: string) => `cli-ui:draft:${key}`;
-const loadDraft = (key: string) => { try { return localStorage.getItem(draftKey(key)) ?? ""; } catch { return ""; } };
-const saveDraft = (key: string, value: string) => {
-  try {
-    if (value) localStorage.setItem(draftKey(key), value);
-    else localStorage.removeItem(draftKey(key));
-  } catch { /* 隐私模式 / 配额：草稿就不保存 */ }
-};
-
-type Pending = { key: string; name: string; status: "reading" | "error"; error?: string };
+import { clearComposerDraft, readComposerDraft, updateComposerDraft, useComposerDraft, type PendingFile } from "./draft";
 
 /** 输入框的可配置项（来自 CliChat 的 config.composer）。 */
 export interface ComposerOptions {
@@ -30,7 +22,7 @@ export interface ComposerOptions {
   queue: boolean;
 }
 
-export function Composer({ draft, placeholder, disabled, disabledHint, running, onSend, onStop, options }: {
+export function Composer({ draft, placeholder, disabled, disabledHint, running, onSend, onStop, taskControl, options, toolbar }: {
   /** 草稿按这个键存在 localStorage（一般是对话 id）。 */
   draft: string;
   placeholder: string;
@@ -39,38 +31,43 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
   running: boolean;
   onSend: (text: string) => Promise<void>;
   onStop?: () => Promise<void> | void;
+  taskControl?: { paused: boolean; onToggle: () => Promise<void> };
   options: ComposerOptions;
+  toolbar?: ReactNode;
 }) {
-  const [val, setVal] = useState(() => loadDraft(draft));
-  const [blocks, setBlocks] = useState<Array<TextBlock & { key: string }>>([]);
-  const [pending, setPending] = useState<Pending[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [sending, setSending] = useState(false);
+  const state = useComposerDraft(draft);
+  const { text: val, blocks, pending, error, sending } = state;
+  const setVal = (text: string) => updateComposerDraft(draft, s => ({ ...s, text }));
+  const setBlocks = (fn: (blocks: typeof state.blocks) => typeof state.blocks) => updateComposerDraft(draft, s => ({ ...s, blocks: fn(s.blocks) }));
+  const setPending = (fn: (pending: PendingFile[]) => PendingFile[]) => updateComposerDraft(draft, s => ({ ...s, pending: fn(s.pending) }));
+  const setError = (error: string | null) => updateComposerDraft(draft, s => ({ ...s, error }));
+  const setSending = (sending: boolean) => updateComposerDraft(draft, s => ({ ...s, sending }));
   const [stopping, setStopping] = useState(false);
+  const [controlling, setControlling] = useState(false);
   const [dragging, setDragging] = useState(false);
   const dragDepth = useRef(0);
-  const seq = useRef(0);
+  const stopLock = useRef(false);
+  const controlLock = useRef(false);
+  const composing = useRef(false);
   const fileRef = useRef<HTMLInputElement>(null);
   const ref = useRef<HTMLTextAreaElement>(null);
 
-  useEffect(() => { if (!running) setStopping(false); }, [running]);
-  useEffect(() => { saveDraft(draft, val); }, [draft, val]);
+  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]);
+  useEffect(() => { if (ref.current) autosize(ref.current); }, [draft, disabled]);
 
-  const nextKey = () => `blk-${++seq.current}`;
+  const nextKey = () => `blk-${clientId()}`;
   const addBlock = (block: TextBlock) => setBlocks((prev) => [...prev, { ...block, key: nextKey() }]);
 
   const addFiles = (files: File[]) => {
-    if (disabled || !options.fileUpload) return;
+    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)
         .then((text) => {
-          setPending((prev) => prev.filter((p) => p.key !== key));
           if (!text.trim()) throw new Error(`「${file.name}」里没有可读的文字`);
-          addBlock({ name: file.name, text, kind: "file" });
+          updateComposerDraft(draft, s => ({ ...s, pending: s.pending.filter(p => p.key !== key), blocks: [...s.blocks, { key, name: file.name, text, kind: "file" }] }));
         })
         .catch((err: unknown) => {
           setPending((prev) => prev.map((p) => (p.key === key ? { ...p, status: "error", error: err instanceof Error ? err.message : String(err) } : p)));
@@ -83,20 +80,19 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
   const tooLong = total > MAX_MESSAGE_CHARS;
   const reading = pending.some((p) => p.status === "reading");
   // 运行中不允许排队时，等这一轮结束再发。
-  const canSend = !!message.trim() && !reading && !tooLong && !sending && (!running || options.queue);
+  const canSend = !!message.trim() && !pending.length && !reading && !tooLong && !sending && (!running || options.queue);
 
   const submit = async () => {
-    if (!canSend || disabled) return;
+    if (!canSend || disabled || readComposerDraft(draft).sending) return;
+    const submitted = JSON.stringify([val, blocks]);
     setSending(true);
     setError(null);
     const key = draft;
     try {
       await onSend(message);
       // 新建对话时发送完成前组件就换成了新对话的输入框（key 变了），这里直接清掉发出时那份草稿。
-      saveDraft(key, "");
-      setVal("");
-      setBlocks([]);
-      setPending([]);
+      const current = readComposerDraft(key);
+      if (JSON.stringify([current.text, current.blocks]) === submitted) clearComposerDraft(key);
       if (ref.current) ref.current.style.height = "auto";
     } catch (err) {
       // 发送失败：内容留在输入框里，可以直接再发。
@@ -108,12 +104,20 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
 
   const isFileDrag = (e: React.DragEvent) => Array.from(e.dataTransfer?.types ?? []).includes("Files");
   const hasFileDrag = (e: React.DragEvent) => options.fileUpload && isFileDrag(e);
+  const stopButton = running && onStop && (
+    <button type="button" className="send stop" onClick={async () => {
+      if (stopLock.current) return;
+      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>
+  );
 
   return (
     <div className="composer">
       <div className="composer-inner">
         {(error || tooLong) && (
-          <div className="cli-comp-err">⚠ {tooLong ? `内容共 ${fmtCount(total)} 字，超过单条消息上限 ${fmtCount(MAX_MESSAGE_CHARS)} 字，请删减或分几条发送` : error}</div>
+          <div className="cli-comp-err" role="alert">⚠ {tooLong ? `内容共 ${fmtCount(total)} 字，超过单条消息上限 ${fmtCount(MAX_MESSAGE_CHARS)} 字，请删减或分几条发送` : error}</div>
         )}
         <div
           className={`comp-box${dragging ? " dropping" : ""}`}
@@ -145,10 +149,11 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
           )}
           <div className="comp-area">
             <textarea
-              ref={ref} rows={1} value={val} disabled={disabled}
-              placeholder={disabled ? disabledHint ?? "暂时不能发送" : running && options.queue ? options.placeholderRunning : placeholder}
+              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); }}
-              onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); void submit(); } }}
+              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) => {
                 const files = Array.from(e.clipboardData?.files ?? []);
                 if (files.length) {
@@ -166,27 +171,33 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
                 }
               }}
             />
-            {running ? (
-              <div className="send-group">
-                {canSend && <button className="send queue" onClick={() => void submit()} title="把这条后续消息排队 —— 当前轮次结束后自动发送" disabled={disabled}>{Icon.send()}</button>}
-                {onStop && <button className="send stop" onClick={() => { setStopping(true); void Promise.resolve(onStop()).catch(() => setStopping(false)); }} disabled={stopping} title={stopping ? "正在停止…" : "停止当前轮次"}>{Icon.stop()}</button>}
-              </div>
-            ) : (
-              <button className="send" disabled={!canSend || disabled} onClick={() => void submit()}>{Icon.send()}</button>
-            )}
           </div>
-          {/* 底部栏的内容都关掉时整行不占位。 */}
-          {(options.hints || options.charCount || options.fileUpload || tooLong) && <div className="comp-foot">
-            {options.hints && <span className="hint"><span className="kbd">⏎</span> 发送</span>}
-            {options.hints && <span className="hint comp-hint-extra"><span className="kbd">⇧⏎</span> 换行</span>}
+          <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}（也可拖拽进来），内容会转成文字发送`}
+                onClick={() => fileRef.current?.click()}>{Icon.plus()} <span>{options.fileButtonText}</span></button>
+            </>}
+            {toolbar}
+            {options.hints && !disabled && <span className="hint comp-hint-extra">Shift + Enter 换行</span>}
+            <span className="spacer" />
             {options.charCount && total > 0 && <span className={`hint cli-count ${tooLong ? "over" : ""}`}>{fmtCount(total)} 字</span>}
             {!options.charCount && tooLong && <span className="hint cli-count over">{fmtCount(total)} 字</span>}
-            <span className="spacer" />
-            {options.fileUpload && <input ref={fileRef} type="file" accept={ACCEPT_ATTR} multiple hidden onChange={(e) => { addFiles(Array.from(e.target.files ?? [])); e.target.value = ""; }} />}
-            {options.fileUpload && !disabled && (
-              <button className="hint" style={{ cursor: "pointer" }} title={`添加文档：${ACCEPTED_LABEL}（也可拖拽进来），内容会转成文字发送`} onMouseDown={(e) => { e.preventDefault(); fileRef.current?.click(); }}>{Icon.clip()} {options.fileButtonText}</button>
-            )}
-          </div>}
+            <div className="send-group">
+              {taskControl && <button type="button" className="btn btn-line cli-task-control" disabled={controlling}
+                aria-label={taskControl.paused ? "继续任务" : "暂停任务"}
+                title={taskControl.paused ? "重新派发当前子任务，排队消息随后执行" : "暂停当前子任务，继续时重新派发"}
+                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}
+                onClick={() => void submit()} aria-label={sending ? "正在发送" : running ? "排队发送" : "发送消息"}
+                title={taskControl?.paused ? "排队发送，继续任务后依次执行" : running ? "排队发送，当前轮次结束后执行" : "发送消息（Enter）"}>
+                {Icon.send()}<span>{sending ? "发送中…" : running ? "排队发送" : "发送"}</span>
+              </button>}
+              {stopButton}
+            </div>
+          </div>
         </div>
       </div>
     </div>