@spzxg/cli-ui 0.6.2 → 0.6.6

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, CenterTask, 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 ?? {});
@@ -160,7 +169,7 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
   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]);
@@ -226,7 +235,13 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
       : 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;
@@ -239,9 +254,9 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
 
   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: "进行中" };
@@ -252,12 +267,13 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
   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;
     }
   }, []);
@@ -265,10 +281,16 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
   // （几个子任务同时跑时，卡片属于它，不是中枢缺省的那个）。和能不能发消息无关。
   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 };
+  useLayoutEffect(() => { sendOpts.current = { newConversation, createConversation, businessIdFor, select: !controlled }; });
+  const [skipPassive,setSkipPassive]=useState(false);
+  const skipPassiveRef=useRef(false);
+  useLayoutEffect(()=>{skipPassiveRef.current=skipPassive;},[skipPassive]);
+  useEffect(()=>setSkipPassive(false),[key]);
   const send = useCallback(async (text: string) => {
     // 一次性任务：发给正在看的那个子任务（接着它聊）。
     const id = latest.current.conv?.batch ? latest.current.runKey : latest.current.key;
@@ -276,26 +298,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 (target !== id) go(target);
-  }, [store, go]);
+    if(latest.current.key===refKey)setSkipPassive(false);
+    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):'';
   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 ?? ""]);
@@ -324,6 +353,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;
@@ -331,7 +361,7 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
       // 一次性任务：提问时回合开着等，答案直接交给节点；不能改发消息。
       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, "回答没有发出去");
     },
@@ -361,7 +391,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 () => {
@@ -369,7 +399,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]);
@@ -614,7 +656,7 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
               {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>}
@@ -623,8 +665,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>}
@@ -634,6 +676,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>
@@ -693,11 +736,12 @@ function ChatInner({ jobId: jobIdProp, taskId: taskIdProp, title = "对话", col
                   <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} />}
+              {cfg.transcript.runningIndicator && running && !awaiting && !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} />)}
               {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>
               )}
@@ -737,15 +781,24 @@ 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 || batchPending}
-            onSend={send}
+            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",

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, taskControl, options }: {
+export function Composer({ draft, placeholder, disabled, disabledHint, running, onSend, onStop, taskControl, options, toolbar }: {
   /** 草稿按这个键存在 localStorage（一般是对话 id）。 */
   draft: string;
   placeholder: string;
@@ -41,38 +33,43 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
   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, 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.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);
         })
         .catch((err: unknown) => {
           setPending((prev) => prev.map((p) => (p.key === key ? { ...p, status: "error", error: err instanceof Error ? err.message : String(err) } : p)));
@@ -85,20 +82,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) {
       // 发送失败：内容留在输入框里，可以直接再发。
@@ -111,7 +107,11 @@ 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={() => { setStopping(true); void Promise.resolve(onStop()).catch(() => setStopping(false)); }}
+    <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>
   );
 
@@ -119,7 +119,7 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
     <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" : ""}`}
@@ -144,17 +144,18 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
                 <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>}
+                  <button type="button" className="attach-x" title={p.status === "reading" ? "取消添加，忽略尚未完成的解析结果" : "移除"} aria-label={`移除 ${p.name}`} onClick={() => setPending((prev) => prev.filter((x) => x.key !== p.key))}>×</button>
                 </div>
               ))}
             </div>
           )}
           <div className="comp-area">
             <textarea
-              ref={ref} rows={2} value={val} disabled={disabled} aria-label="消息内容"
+              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) {
@@ -176,9 +177,10 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
           <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" title={`添加文档：${ACCEPTED_LABEL}（也可拖拽进来），内容会转成文字发送`}
-                onClick={() => fileRef.current?.click()}>{Icon.clip()} {options.fileButtonText}</button>
+              <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>}
@@ -187,7 +189,7 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
               {taskControl && <button type="button" className="btn btn-line cli-task-control" disabled={controlling}
                 aria-label={taskControl.paused ? "继续任务" : "暂停任务"}
                 title={taskControl.paused ? "重新派发当前子任务，排队消息随后执行" : "暂停当前子任务，继续时重新派发"}
-                onClick={async () => { setControlling(true); try { await taskControl.onToggle(); } catch { /* 错误由调用方显示，保留草稿和当前状态 */ } finally { setControlling(false); } }}>
+                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}

package/src/chat/RunControls.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { Fragment, useEffect, useRef, useState } from "react";
+import { Icon } from "../ui/icons";
+import { Popover } from "../ui/Popover";
+import { modelLabel } from "../ui/format";
+import { acquireConfiguration, useConfigurationBusy } from "./configuration";
+export interface RunOption { value: string; label: string; sub: string; group?: string }
+export interface RunCapabilities { models: RunOption[]; reasoningOptions: RunOption[]; permissionModes: RunOption[]; supportsCustomModels?: boolean }
+export interface RunTask { id: string; agent?: string; model?: string | null; reasoning?: string | null; permission_mode?: string | null; resolved_model?: string | null }
+const withDefault = (options?: RunOption[]) => [{ value: null as string | null, label: "默认", sub: "沿用智能体的默认设置", group: undefined as string | undefined }, ...(options ?? [])];
+const modelOptions = (caps?: RunCapabilities) => withDefault(caps?.models);
+const permissionOptions = (caps?: RunCapabilities) => withDefault(caps?.permissionModes);
+const reasoningOptions = (caps?: RunCapabilities) => withDefault(caps?.reasoningOptions);
+
+export type RunControlProps = {
+  task: RunTask;
+  agents?: {id:string;label:string;disabled?:boolean}[];
+  onSetAgent?: (id:string)=>Promise<void>;
+  caps?: RunCapabilities;
+  defaults?: { model?: string | null; reasoning?: string | null; permission_mode?: string | null };
+  disabled: boolean;
+  onSetModel: (value: string | null) => Promise<void>;
+  onSetReasoning: (value: string | null) => Promise<void>;
+  onSetPermission: (value: string | null) => Promise<void>;
+  onBusyChange?: (busy: boolean) => void;
+};
+
+// Both the pre-start view and composer use the same capability-driven controls.
+// Await persistence before allowing Send so the next turn uses the chosen value.
+export function RunControls({ task, agents, onSetAgent, caps, defaults, disabled, onSetModel, onSetReasoning, onSetPermission, onBusyChange }: RunControlProps) {
+  const [open, setOpen] = useState<"model" | "permission" | null>(null);
+  const [custom, setCustom] = useState("");
+  const busy = useConfigurationBusy(task.id);
+  const currentTask = useRef(task.id); currentTask.current = task.id;
+  useEffect(() => { setOpen(null); setError(""); }, [task.id]);
+  const [error, setError] = useState("");
+  const models = modelOptions(caps);
+  const reasoning = reasoningOptions(caps);
+  const permissions = permissionOptions(caps);
+  const effectiveModel = task.model ?? defaults?.model ?? null;
+  const effectiveReasoning = task.reasoning ?? defaults?.reasoning ?? null;
+  const effectivePermission = task.permission_mode ?? defaults?.permission_mode ?? caps?.permissionModes[0]?.value ?? null;
+  const model = models.find((m) => m.value === effectiveModel)?.label ?? modelLabel(effectiveModel ?? "");
+  const permission = permissions.find((p) => p.value === effectivePermission);
+  const change = async (save: () => Promise<void>) => {
+    if (disabled) return;
+    const release = acquireConfiguration(task.id);
+    if (!release) return;
+    const targetId = task.id;
+    setError("");
+    try { onBusyChange?.(true); await save(); if(currentTask.current === targetId) setOpen(null); }
+    catch (e) { if(currentTask.current === targetId) setError(e instanceof Error ? e.message : "设置保存失败，请重试。"); }
+    finally { release(); onBusyChange?.(false); }
+  };
+  const locked = disabled || busy || !caps;
+  return <>
+    {!!caps?.permissionModes.length && <div className="comp-control">
+      <button className={`comp-setting permission${effectivePermission === "bypassPermissions" ? " elevated" : ""}`} disabled={locked} aria-label="权限模式" aria-expanded={open === "permission"} aria-haspopup="dialog" title={disabled ? "本轮结束后可修改权限" : permission?.sub} onClick={(e) => { e.stopPropagation(); setOpen(open === "permission" ? null : "permission"); }}>
+        {Icon.lock()} <span>{permission?.value ? permission.label : "默认权限"}</span>{Icon.chevDown()}
+      </button>
+      {open === "permission" && <Popover onClose={() => setOpen(null)}>
+        <div className="pop-sec">权限模式 · 保存后用于下一轮</div>
+        {permissions.map((p) => <button key={p.value ?? "default"} className="pop-item" disabled={locked} aria-pressed={(task.permission_mode ?? null) === p.value} onClick={() => void change(() => onSetPermission(p.value))}>
+          <span><span>{p.label}</span><span className="pi-sub">{p.sub}</span></span>{(task.permission_mode ?? null) === p.value && Icon.check()}
+        </button>)}
+        {error && <div className="control-error" role="alert">{error}</div>}
+      </Popover>}
+    </div>}
+    <div className="comp-control comp-model">
+      <button className="comp-setting" disabled={locked} aria-label="模型与推理设置" aria-expanded={open === "model"} aria-haspopup="dialog" title={disabled ? "本轮结束后可修改模型与推理" : `模型：${model}${task.resolved_model ? ` · 上次运行：${task.resolved_model}` : ""}`} onClick={(e) => { e.stopPropagation(); setOpen(open === "model" ? null : "model"); }}>
+        <span className="comp-model-name">{model === "默认" ? "默认模型" : model}</span>
+        {!!caps?.reasoningOptions.length && <span className="comp-reasoning">{reasoning.find((r) => r.value === effectiveReasoning)?.label ?? "默认"}</span>}{Icon.chevDown()}
+      </button>
+      {open === "model" && <Popover onClose={() => setOpen(null)}>
+        {agents && agents.length>1 && onSetAgent && <><div className="pop-sec">智能体 · 接手当前任务的历史</div>{agents.map(a=><button key={a.id} className="pop-item" disabled={locked||a.disabled} aria-pressed={task.agent===a.id} onClick={()=>void change(()=>onSetAgent(a.id))}>{a.label}{task.agent===a.id&&Icon.check()}</button>)}<div className="divider"/></>}
+        <div className="pop-sec">模型 · 保存后用于下一轮</div>
+        {models.map((m, i) => <Fragment key={m.value ?? "default"}>
+          {m.group && m.group !== models[i - 1]?.group && <div className="pop-sec">{m.group}</div>}
+          <button className="pop-item" disabled={locked} aria-pressed={(task.model ?? null) === m.value} onClick={() => void change(() => onSetModel(m.value))}>
+            <span><span>{m.label}</span><span className="pi-sub">{m.sub}</span></span>{(task.model ?? null) === m.value && Icon.check()}
+          </button>
+        </Fragment>)}
+        {caps?.supportsCustomModels && <form className="pop-custom-model" onSubmit={(e) => { e.preventDefault(); if (custom.trim()) void change(() => onSetModel(custom.trim())); }}>
+          <label className="pop-sec" htmlFor={`model-${task.id}`}>自定义模型</label>
+          <div className="pop-custom-row"><input id={`model-${task.id}`} value={custom} onChange={(e) => setCustom(e.target.value)} placeholder="模型 ID" disabled={locked} /><button className="btn btn-sm" disabled={locked || !custom.trim()}>使用</button></div>
+        </form>}
+        {!!caps?.reasoningOptions.length && <>
+          <div className="divider" /><div className="pop-sec">推理强度</div>
+          {reasoning.map((r) => <button key={r.value ?? "default"} className="pop-item" disabled={locked} aria-pressed={(task.reasoning ?? null) === r.value} onClick={() => void change(() => onSetReasoning(r.value))}>
+            <span><span>{r.label}</span><span className="pi-sub">{r.sub}</span></span>{(task.reasoning ?? null) === r.value && Icon.check()}
+          </button>)}
+        </>}
+        {busy && <div className="pop-sec" role="status">正在保存…</div>}
+        {error && <div className="control-error" role="alert">{error}</div>}
+      </Popover>}
+    </div>
+  </>;
+}

package/src/chat/configuration.ts

@@ -0,0 +1,15 @@
+import { useSyncExternalStore } from 'react';
+// A task's setting request outlives its controls when the user changes tasks.
+const pending = new Set<string>();
+const listeners = new Set<() => void>();
+const notify = () => listeners.forEach(listener => listener());
+export const isConfigurationBusy = (taskId:string) => pending.has(taskId);
+export function acquireConfiguration(taskId:string): (()=>void) | null {
+  if (pending.has(taskId)) return null;
+  pending.add(taskId); notify();
+  let active=true;
+  return () => { if(active){active=false;pending.delete(taskId);notify();} };
+}
+export function useConfigurationBusy(taskId:string) {
+  return useSyncExternalStore(listener=>{listeners.add(listener);return()=>listeners.delete(listener);},()=>isConfigurationBusy(taskId),()=>false);
+}