@xgspz/cli-ui 0.0.0-stage → 0.6.14

package/src/chat/CliChat.tsx

@@ -0,0 +1,932 @@
+// cli-chat：对话。界面取自 Operator 的会话视图（SessionView 的对话部分 + Composer），
+// 数据来自 center 的对话任务（mode=conversation）：实时流里的节点转录按 Operator 的规则渲染，
+// 每条消息是中枢的一轮，排队 / 执行 / 结束都跟 center 保持一致。
+import { SubagentChatScope } from "../ui/SubagentChat";
+import { parentMessages } from "../core/subagents";
+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";
+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 { restoreQueuedToDraft } from "./queueEdit";
+import { ReferenceCard } from "../ui/ReferenceCard";
+import type { UploadDocument } from "../core/documentUpload";
+import { GroupChat, type GroupChatAdapter } from "./GroupChat";
+import { RunControls } from "./RunControls";
+import { useExecutionConfig } from "./useExecutionConfig";
+import { CenterError } from "../core/client";
+
+/** 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. */
+  configurationBusy?: boolean;
+  onClear?: () => void;
+  /** 每条消息自动带入看板当前文件、页签和最近浏览；默认 true。 */
+  passiveContext?: boolean;
+
+  /**
+   * 显示哪个对话（center 的 job_id）。不给就跟共享仓库的选中走（和 cli-msglist 联动）；都没有 = 新对话。
+   * 也可以直接给对话键 "job_id#task_id"（cli-msglist 的 onSelect、job_change 事件的 key 就是它）。
+   */
+  jobId?: string | null;
+  /**
+   * 对话任务里的哪个对话（子任务 task_id），和 jobId 一起用。不给 = 对话任务的第一个对话（只有一个对话时就是它）；
+   * "new" = 在这个对话任务里新开一个对话（同一节点、同一工作区，新的 Agent 会话），第一条消息发出后组件跟到开出来的那个。
+   * 结束对话时：给了 taskId 只关掉这一个对话，没给结束整个对话任务。
+   */
+  taskId?: string | null;
+  /** 面包屑里的名称与色块（如业务 / 项目名）。 */
+  title?: string;
+  color?: string;
+  /** 只看不发。 */
+  readOnly?: boolean;
+  /** 是否显示「结束对话」按钮，缺省 true（等同 config.header.close）。 */
+  allowClose?: boolean;
+  /** 界面配置：顶部栏、输入框、对话区各模块的显示与文案，见 core/config.ts。 */
+  config?: CliChatConfig;
+  /**
+   * Agent 消息里本地文件链接（report.md、/abs/path、src/a.ts:12）的打开地址。缺省没有：显示成不可点的文字。
+   * 有文件服务时（例如以后的看板 / Operator 后端）给出地址，链接就能打开（与 Operator 一致）。
+   * taskId：看的是对话任务里指定的那个对话时才有。
+   */
+  fileUrl?: (path: string, jobId: string, kind: "link" | "image", taskId?: string | null) => string | null;
+  /**
+   * 点了本地文件链接 / 「查看浏览器」怎么打开：
+   *   · "auto"（缺省）—— 同一个 Provider 里有 cli-board 在看这个对话就在看板里打开，否则在对话里弹窗预览；
+   *   · "board" —— 只交给看板（没有看板时按 fileUrl 的地址打开）；
+   *   · "modal" —— 总是在对话里弹窗；
+   *   · "link" —— 不拦截，按 fileUrl 的地址在新窗口打开（以前的行为）。
+   * 无论哪种，都会发 open 事件（onEvent），宿主可以据此展开右侧面板。
+   */
+  fileOpen?: "auto" | "board" | "modal" | "link";
+  /** 一轮结束（≈ center 回调 conversation_turn）、对话结束、job 变化等。 */
+  onEvent?: (event: CliEvent) => void;
+
+  theme?: "light" | "dark";
+  className?: string;
+  style?: CSSProperties;
+  store?: CliStore;
+}
+
+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>;
+}
+
+// 不能再发消息的结束原因（调用方关闭 / 取消）。其余原因（过期、换线、节点丢失）再发会自动开新对话。
+const FINAL_REASONS = new Set(["closed", "cancelled", "conversation_closed"]);
+const REASON_TEXT: Record<string, string> = {
+  closed: "对话已结束", cancelled: "对话已取消", conversation_closed: "这个对话已结束", expired: "对话空闲太久已过期",
+  node_reassigned: "执行机器换到了别的产品线", node_lost: "执行节点长时间连不上",
+};
+
+/** 子任务结束了的状态：可以接着它聊。 */
+const SETTLED_TASK = new Set(["succeeded", "failed", "cancelled"]);
+
+// 一次性任务（含续派）的子任务状态（center TaskStatus）。
+const BATCH_STATUS: Record<string, { dotCls: DotCls; statusText: string }> = {
+  succeeded: { dotCls: "g", statusText: "子任务已完成" }, failed: { dotCls: "x", statusText: "子任务失败" }, cancelled: { dotCls: "x", statusText: "子任务已取消" },
+  dispatching: { dotCls: "a", statusText: "正在派发" }, running: { dotCls: "a", statusText: "运行中" }, verifying: { dotCls: "a", statusText: "正在核对结果" },
+  queued: { dotCls: "a", statusText: "等待执行" }, blocked: { dotCls: "a", statusText: "等待执行" }, paused: { dotCls: "a", statusText: "已暂停" },
+  orphaned: { dotCls: "a", statusText: "执行节点暂时连不上，恢复后继续" },
+};
+function batchStatusView(taskStatus: string | null, jobStatus: string | null): { dotCls: DotCls; statusText: string } {
+  if (taskStatus && BATCH_STATUS[taskStatus]) return BATCH_STATUS[taskStatus];
+  if (jobStatus && TERMINAL_JOB.has(jobStatus)) return { dotCls: jobStatus === "succeeded" ? "g" : "x", statusText: jobStatus === "succeeded" ? "已完成" : jobStatus === "cancelled" ? "已取消" : "已失败" };
+  return { dotCls: "a", statusText: "进行中" };
+}
+
+/** 「智能体在工作」那一行：跑了多久，很久没输出时提示可能卡住。与 Operator 的 RunningIndicator 一致。 */
+const QUIET_AFTER_MS = 180_000;
+function RunningIndicator({ agent, agentName, startedAt, lastActivityRef }: { agent: string | null; agentName: string; startedAt: number | null; lastActivityRef: React.MutableRefObject<number> }) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => { const t = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(t); }, []);
+  const elapsed = startedAt ? Math.max(0, now - startedAt) : null;
+  const quiet = now - lastActivityRef.current;
+  const clock = (ms: number) => {
+    const s = Math.floor(ms / 1000);
+    const h = Math.floor(s / 3600);
+    const m = Math.floor((s % 3600) / 60);
+    const ss = String(s % 60).padStart(2, "0");
+    return h ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+  };
+  return (
+    <div className="msg assistant">
+      <div className="who"><Avatar who="cc" agent={agent} /> {agentName}</div>
+      <div className="msg-body run-ind">
+        <span className="typing"><i /><i /><i /></span>
+        {elapsed !== null && <span className="run-ind-t">运行中 · {clock(elapsed)}</span>}
+        {quiet >= QUIET_AFTER_MS && <span className="run-ind-quiet">已 {Math.floor(quiet / 60_000)} 分钟没有新输出（可能在执行耗时操作）；确认卡住时可点输入框右侧的停止按钮</span>}
+      </div>
+    </div>
+  );
+}
+
+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 ?? {});
+  const cfg = useMemo(() => resolveChatConfig(config), [configKey]); // eslint-disable-line react-hooks/exhaustive-deps
+  const store = useCliStore();
+  const selected = useCliState((s) => s.selected);
+  // 显示哪个对话：
+  //   · 不传 jobId → 跟仓库的选中走（和同一 Provider 里的 cli-msglist 联动）；
+  //   · 传了 jobId（含 null = 新对话）→ 组件自己接管：从传入的 id 开始，之后自己新建出的对话、
+  //     center 接续出的新对话都由组件自己跟过去（同时发 job_change 告诉宿主）；宿主改了 jobId / taskId 就以宿主为准。
+  // 内部用对话键（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;
+  const [followed, setShown] = useState<{ prop: string | null | undefined; id: string | null }>(() => ({ prop: keyProp, id: keyProp ?? null }));
+  let viewId = followed.id;
+  if (followed.prop !== keyProp) {
+    viewId = keyProp ?? null;
+    setShown({ prop: keyProp, id: viewId });
+  }
+  const key = controlled ? viewId : selected;
+  const ref = key ? parseConvKey(key) : null;
+  const jobId = ref?.jobId ?? null;
+  // 「在这个对话任务里新开一个对话」：还没有对话，第一条消息开出来。
+  const isNew = isNewInJob(key);
+  const taskId = ref?.taskId && !isNew ? ref.taskId : null;
+  const go = useCallback((id: string | null) => {
+    if (controlled) setShown((v) => (v.id === id ? v : { ...v, id }));
+    else store.select(id);
+  }, [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);
+  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]);
+
+  const allMessages = useMemo(() => (conv ? viewMessages(conv) : []), [conv]);
+  // config.transcript.tools=false：去掉工具卡片，只留文字往来（提问 / 输入卡片要用户操作，照常显示）。
+  const parent = useMemo(() => parentMessages(allMessages), [allMessages]);
+  const messages = useMemo(() => (cfg.transcript.tools ? parent : parent.filter((m) => {
+    if (m.role !== "tool") return true;
+    const data = toolDataOf(m);
+    return !!(data.ask || data.input);
+  })), [parent, cfg.transcript.tools]);
+  const remoteTaskId = conv?.remoteTaskId ?? conv?.task?.remote_task_id ?? null;
+  const loadSubagent = useCallback(async (id: string, generation: number, before?: string) => {
+    if (!key || !remoteTaskId || !store.client.subagent) throw new Error("当前接入未提供子代理历史接口");
+    return store.client.subagent(key, remoteTaskId, id, generation, before);
+  }, [store, key, remoteTaskId]);
+  const renderSubagentMessage = useCallback((message: Msg, name: string) => <MessageView m={message} initial={false} hideWho={false} handlers={{}} agentLabel={name} view={{ timestamps: true, initialBadge: false, userLabel: "收到的任务", agentName: name }} />, []);
+  const running = conv ? isRunning(conv) : false;
+  const job = entry?.job;
+  // 一次性任务没有轮次：补充消息通过 continueTask 接在当前子任务的对话后面。
+  const batch = !!conv?.batch || (!!job && job.mode !== "conversation");
+  const chat = !!taskId && isChatTask(conv);
+  const batchTaskStatus = batch ? conv?.batchTask?.status ?? job?.tasks?.find((t) => t.id === (taskId ?? conv?.task?.id))?.status ?? null : null;
+  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);
+  const task = (shownTaskId ? job?.tasks?.find((t) => t.id === shownTaskId) : undefined) ?? (shownTaskId || batch ? undefined : job?.tasks?.[0]);
+  const info = taskId ? job?.conversation?.conversations?.find((c) => c.task_id === taskId) : undefined;
+  const agent = task?.agent ?? conv?.turns[conv.turns.length - 1]?.agent ?? null;
+  const draftScope = store.draftScope ? `${store.draftScope}:${key ?? `new:${instanceId}`}` : key ?? `new:${instanceId}`;
+  const initialOptions = newConversation ?? store.getNewConversationOptions();
+  const executionReady = !batch && (!key || !!job);
+  const executionEnabled = showComposer && executionReady && (cfg.composer.agentSelector || cfg.composer.executionMode);
+  const execution = useExecutionConfig({ client: store.client, scope: draftScope,
+    target: key && !isNew ? key : null, running: running || batchPending,
+    enabled: executionEnabled, ready: executionReady,
+    initial: { ...(initialOptions?.agent ? { agent: initialOptions.agent } : {}), ...initialOptions?.executionConfig },
+  });
+  const agentText = labelOf(execution.config?.agent ?? agent);
+  const executionAgent = execution.config?.agents.find(item => item.id === execution.config?.agent);
+  const executionReadOnly = !!key && !isNew && !store.client.setExecutionConfig;
+  const settingsBusy = !!configurationBusy || execution.blocked;
+  const jobStatus = conv?.job?.status ?? job?.status ?? null;
+  // 对话式子任务没有「结束」：大任务结束了，再发一条会重新打开它。
+  // 支持续派的普通子任务同理：大任务结束不挡输入框。
+  const jobEnded = !chat && !batchWritable && !!jobStatus && TERMINAL_JOB.has(jobStatus);
+  // 只关掉了这一个对话（对话任务还开着）：按「这个对话已结束」显示，不能再发消息。
+  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;
+  const finalEnd = ended && FINAL_REASONS.has(closedReason ?? "closed");
+  const continuedFrom = job?.conversation?.continued_from_job_id ?? null;
+  // 接续自旧对话任务里的哪个对话（指定了对话时跟回那一个）。
+  const continuedFromKey = continuedFrom ? convKey(continuedFrom, taskId ? task?.continue_from_task_id ?? info?.continue_from_task_id ?? null : null) : null;
+  const continuedBy = conv?.continuedBy ?? (taskId ? null : job?.conversation?.continued_by_job_id ?? null);
+  const jobTitle = job?.title ?? conv?.job?.title;
+  // 对话任务里有几个对话时，标题是「对话任务 / 这个对话」。
+  const manyConvs = (batch ? job?.tasks?.length ?? 0 : job?.conversation?.conversations?.length ?? 0) > 1;
+  // 对话式子任务：流里的是这个对话最新的那条消息，名称取打开的那个子任务。
+  const convName = chat ? task?.title ?? conv?.task?.title : conv?.task?.title ?? info?.title ?? task?.title;
+  const convTitle = isNew ? `${jobTitle ? `${jobTitle} / ` : ""}新对话`
+    : (taskId || batch) && manyConvs && convName && convName !== jobTitle ? `${jobTitle ?? "对话"} / ${convName}`
+      : jobTitle ?? (key ? "对话" : "新对话");
+  const awaitingAnswer = useMemo(() => hasOpenAsk(messages), [messages]);
+  const lastTurn = conv?.turns[conv.turns.length - 1];
+  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;
+
+  // 用量：任务详情里的累计 + 实时流里上次刷新后的增量（「新开」的对话还没有用量，不借第一个对话的）。
+  const usageTask = isNew ? undefined : task;
+  const fresh = (usageTask ? Math.max(0, usageTask.total_tokens - usageTask.cache_read_tokens) : 0) + (conv?.liveUsage.fresh ?? 0);
+  const cacheRead = (usageTask?.cache_read_tokens ?? 0) + (conv?.liveUsage.cacheRead ?? 0);
+  const resolvedModel = conv?.resolvedModel ?? task?.resolved_model ?? null;
+
+  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 (running) return { dotCls: "a", statusText: "运行中" };
+    if (status === "queued") return { dotCls: "a", statusText: "等待执行节点" };
+    return { dotCls: "a", statusText: "进行中" };
+  }, [key, isNew, batch, chat, batchStatus, jobStatus, ended, status, closedReason, awaiting, running]);
+
+  // ── 处理器（引用稳定，MessageView 的 memo 才有效） ──
+  // 输入框之外的操作（回答提问、撤回排队、结束对话、停止）失败时在顶部提示，不静默吞掉。
+  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;
+      if (keyRef.current === sourceKey) setActionError(null);
+      return result;
+    } catch (error) {
+      if (keyRef.current === sourceKey) setActionError(`${what}：${error instanceof Error ? error.message : String(error)}`);
+      throw error;
+    }
+  }, []);
+  // 操作这次运行（回答提问、填浏览器输入卡片、交还浏览器）落在哪个子任务上：一次性任务没指定子任务时是正在看的那个
+  // （几个子任务同时跑时，卡片属于它，不是中枢缺省的那个）。和能不能发消息无关。
+  const runKey = batch && !taskId && conv?.task?.id && jobId ? convKey(jobId, conv.task.id) : key;
+  const latest = useRef({ 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 });
+  useLayoutEffect(() => { sendOpts.current = { newConversation, createConversation, businessIdFor, select: !controlled }; });
+  const prepareExecution = useRef(execution.prepareSend);
+  const reloadExecution = useRef(execution.reload);
+  useLayoutEffect(() => { prepareExecution.current = execution.prepareSend; reloadExecution.current = execution.reload; });
+  const send = useCallback(async (text: string) => {
+    const executionOptions = prepareExecution.current();
+    // 一次性任务：发给正在看的那个子任务（接着它聊）。
+    const id = latest.current.conv?.batch ? latest.current.runKey : latest.current.key;
+    // 看板里引用到这个对话的东西：合成一个「看板上下文」块跟着这条消息发出去；发失败就放回去。
+    // 看板上正在看的文件缺省也带上一次（已经明确引用了的不重复），单独一块「看板正在看」：转录里按 config.refs.viewing 显示或不显示。
+    const refKey = latest.current.key;
+    const refs = refKey ? store.takeRefs(refKey) : [];
+    const passiveView=refKey?store.getState().boardContext[refKey]:null;
+    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}] : []),
+      ...(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, ...executionOptions });
+    } catch (error) {
+      if (refKey) { store.restoreRefs(refKey, refs); store.restoreViewing(refKey, viewing); }
+      if (error instanceof CenterError && error.code === "execution_config_conflict" && latest.current.key === refKey) await reloadExecution.current();
+      throw error;
+    }
+    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 = !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 里有看板在看这个对话，就把看板切到浏览器（收起的会请宿主展开）。
+  // 打开对话时已有的交接行不算（先记下已有的再开始比较）；没有看板时不弹窗打扰，行里有「查看浏览器」按钮。
+  const handoffSeen = useRef<{ key: string | null; ids: Set<string> | null }>({ key: null, ids: null });
+  useEffect(() => {
+    if (!key || !conv || fileOpen === "link" || fileOpen === "modal") return;
+    if (handoffSeen.current.key !== key) handoffSeen.current = { key, ids: null };
+    if (!conv.hasTranscript) return;
+    const handoffs = conv.msgs.filter((m) => m.role === "system" && m.content.startsWith(HANDOFF_NOTICE_PREFIX));
+    const seen = handoffSeen.current;
+    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" }, inlineOwner);
+  }, [key, conv, fileOpen, store, inlineOwner]);
+
+  // 对话里弹窗打开的文件 / 浏览器（没有看板接的时候）。换对话就关掉。
+  const [popup, setPopup] = useState<{ kind: "file"; path: string } | { kind: "browser" } | null>(null);
+  useEffect(() => setPopup(null), [key]);
+  useEffect(() => {
+    if (!popup) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setPopup(null); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [popup]);
+  const handlers = useMemo<MessageHandlers>(() => ({
+    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;
+      if (!id) return;
+      // 一次性任务：提问时回合开着等，答案直接交给节点；不能改发消息。
+      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 && latest.current.key === id) go(target); })
+        : send(formatAnswersText(questions, answers));
+      await report(sent, "回答没有发出去");
+    },
+    // 错误由 report 显示在对话顶部；这里返回 promise 让排队行在撤回期间显示忙碌。
+    onCancelQueued: readOnly || batch ? undefined : (m: Msg) => { const id = latest.current.key; if (id && m.turnId) return report(store.cancelTurn(id, m.turnId), "撤回失败").then(() => undefined, () => undefined); },
+    // 后端能直接处理的浏览器动作（Operator 后端）才给；center 不提供，卡片按 Operator「没有浏览器能力」时的样子显示。
+    onInput: readOnlyProp || !store.client.submitInput ? undefined : async (inputId: string, values: string[]) => {
+      const id = latest.current.runKey;
+      if (!id) return "对话还没开始";
+      try { return await store.client.submitInput!(id, inputId, values); } catch (error) { return error instanceof Error ? error.message : String(error); }
+    },
+    // 交还浏览器：后端自己的 handback（Operator 后端），没有就走看板接口（center 转发到节点）。
+    onHandback: readOnlyProp || !(store.client.handback || store.client.board) ? undefined : async () => {
+      const id = latest.current.runKey;
+      if (!id) return "对话还没开始";
+      try {
+        if (store.client.handback) return await store.client.handback(id);
+        await store.client.board!.browserAction(id, "handback");
+        return null;
+      } catch (error) { return error instanceof Error ? error.message : String(error); }
+    },
+    onShowBrowser: !store.client.board || fileOpen === "link" ? undefined : () => {
+      const id = latest.current.key;
+      if (!id) return;
+      if (fileOpen !== "modal" && store.openInBoard(id, { kind: "browser" }, inlineOwner)) return;
+      if (fileOpen !== "board") setPopup({ kind: "browser" });
+    },
+    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(withoutBoardContext(list[j].content)), "重试没有发出去").catch(() => undefined); return; }
+    },
+  }), [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;
+    if (id && turn) await report(store.cancelTurn(id, turn.turn_id), "停止失败");
+  }, [store, report]);
+  // 排队消息「立即发送」：停掉正在执行的这一轮，中枢随即按顺序发出排队的消息（同一对话里排着的会合并成一轮）。
+  const sendQueuedNow = useCallback(async () => { await stop().catch(() => undefined); }, [stop]);
+  // 排队消息「编辑」：先撤回，撤回成功才放回输入框（失败时排队消息原样保留，不会出现两份）。
+  // 放回发出它的那个对话的草稿，期间切走了也不会放错地方。
+  const editQueued = useCallback(async (m: Msg) => {
+    const id = latest.current.key;
+    if (!id || !m.turnId) return;
+    try { await report(store.cancelTurn(id, m.turnId), "撤回失败，没有放回输入框"); } catch { return; }
+    restoreQueuedToDraft(store.draftScope ? `${store.draftScope}:${id}` : id, m.content);
+    if (latest.current.key === id) chatRef.current?.querySelector<HTMLTextAreaElement>(".composer textarea")?.focus({ preventScroll: true });
+  }, [store, report]);
+  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]);
+  const [runSeenAt, setRunSeenAt] = useState<number | null>(null);
+  const lastActivityRef = useRef(Date.now());
+  const wasRunningRef = useRef(running);
+  useEffect(() => {
+    if (running && !wasRunningRef.current) { setRunSeenAt(Date.now()); lastActivityRef.current = Date.now(); }
+    else if (!running) setRunSeenAt(null);
+    wasRunningRef.current = running;
+  }, [running]);
+  useEffect(() => { lastActivityRef.current = Date.now(); }, [messages]);
+  const turnStartedAt = runSeenAt ?? lastUserTs;
+
+  // ── 分窗渲染（移植自 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]);
+  const queued = useMemo(() => messages.filter((m) => m.role === "queued"), [messages]);
+  // 「立即发送」只在有一轮正在执行、且接入开放了停止时可用。
+  const queueSendNow = !readOnly && !batch && cfg.composer.stop && key && conv && runningTurn(conv) ? sendQueuedNow : undefined;
+  const queueSendNowHint = !cfg.composer.stop && conv && runningTurn(conv) ? "当前接入没有开放停止，排队消息会在这一轮结束后发送" : undefined;
+  // 节点转录比手里更早、还没取的条数（实时流只给最新一段，往上翻时分页取，和 Operator 一样）。
+  const older = conv?.older ?? 0;
+  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)
+    .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 });
+  const { startIdx, endIdx } = useMemo(() => {
+    const find = (key: string | null) => (key ? items.findIndex((it) => it.key === key) : -1);
+    const e = find(win.end);
+    const last = e >= 0 ? e : items.length - 1;
+    let s = find(win.start);
+    if (s >= 0) while (s > 0 && items[s - 1].kind !== "msg") s--;
+    return { startIdx: s >= 0 && s <= last ? s : Math.max(0, last + 1 - RENDER_WINDOW), endIdx: last };
+  }, [items, win]);
+  const shown = useMemo(() => items.slice(startIdx, endIdx + 1), [items, startIdx, endIdx]);
+  const hiddenAbove = useMemo(() => { let n = 0; for (let i = 0; i < startIdx; i++) if (items[i].kind === "msg") n++; return n; }, [items, startIdx]);
+  const hiddenBelow = useMemo(() => { let n = 0; for (let i = endIdx + 1; i < items.length; i++) if (items[i].kind === "msg") n++; return n; }, [items, endIdx]);
+  const itemsRef = useRef(items); itemsRef.current = items;
+  const rangeRef = useRef({ startIdx, endIdx }); rangeRef.current = { startIdx, endIdx };
+  const winRef = useRef(win); winRef.current = win;
+  type Anchor = { key: string; top: number };
+  const anchorRef = useRef<(Anchor & { win: typeof win }) | null>(null);
+
+  const measure = useCallback((key?: string): Anchor | null => {
+    const el = scrollRef.current;
+    const node = key ? el?.querySelector<HTMLElement>(`[data-tkey="${CSS.escape(key)}"]`) : el?.querySelector<HTMLElement>("[data-tkey][data-msg]");
+    return node?.dataset.tkey ? { key: node.dataset.tkey, top: node.getBoundingClientRect().top } : null;
+  }, []);
+  const setRange = useCallback((s: number, e: number, anchor?: Anchor | null) => {
+    const its = itemsRef.current;
+    let a = s; while (a < its.length && its[a].kind !== "msg") a++;
+    let b = e; while (b > 0 && its[b].kind !== "msg") b--;
+    const next = { start: its[a]?.key ?? null, end: e >= its.length - 1 ? null : its[b]?.key ?? null };
+    if (winRef.current.start === next.start && winRef.current.end === next.end) return;
+    if (anchor) anchorRef.current = { ...anchor, win: next };
+    setWin(next);
+  }, []);
+  const revealEarlier = useCallback(() => {
+    const { startIdx: s, endIdx: e } = rangeRef.current;
+    if (s <= 0) {
+      // 手里的都显示了，节点上还有更早的：取一页接在前面，再往上展开（窗口按原来的那一行定位，不跳）。
+      const k = keyRef2.current;
+      if (!k || olderRef.current <= 0) return;
+      setLoadingOlder(true);
+      void store.loadOlder(k).then((ok) => { if (ok) requestAnimationFrame(() => revealRef.current.earlier()); }).finally(() => setLoadingOlder(false));
+      return;
+    }
+    const ns = Math.max(0, s - RENDER_STEP);
+    setRange(ns, Math.min(e, ns + RENDER_MAX - 1), measure());
+  }, [measure, setRange, store]);
+  const revealLater = useCallback(() => {
+    const its = itemsRef.current;
+    const { startIdx: s, endIdx: e } = rangeRef.current;
+    if (e >= its.length - 1) return;
+    const ne = Math.min(its.length - 1, e + RENDER_STEP);
+    const ns = Math.max(s, ne - RENDER_MAX + 1);
+    setRange(ns, ne, ns > s ? measure(its[ns].key) : null);
+  }, [measure, setRange]);
+  const revealRef = useRef({ earlier: revealEarlier, later: revealLater });
+  revealRef.current = { earlier: revealEarlier, later: revealLater };
+
+  const onScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const bottom = el.scrollHeight - el.scrollTop - el.clientHeight < 60 && winRef.current.end === null;
+    pinned.current = bottom;
+    setAtBottom(bottom);
+    if (!bottom && winRef.current.start === null) {
+      const first = itemsRef.current.slice(rangeRef.current.startIdx).find((it) => it.kind === "msg");
+      if (first) setWin((w) => ({ ...w, start: first.key }));
+    } else if (bottom && winRef.current.start !== null) {
+      setWin({ start: null, end: null });
+    }
+  }, []);
+
+  const topSentinelRef = useRef<HTMLDivElement>(null);
+  const bottomSentinelRef = useRef<HTMLDivElement>(null);
+  const hasAbove = hiddenAbove > 0 || older > 0;
+  const hasBelow = hiddenBelow > 0;
+  useEffect(() => {
+    const root = scrollRef.current;
+    if (!root || typeof IntersectionObserver === "undefined") return;
+    const watch = (target: HTMLElement | null, margin: string, go: () => void) => {
+      if (!target) return null;
+      const io = new IntersectionObserver((entries) => { if (!pinned.current && entries.some((e) => e.isIntersecting)) go(); }, { root, rootMargin: margin });
+      io.observe(target);
+      return io;
+    };
+    const up = hasAbove ? watch(topSentinelRef.current, "1800px 0px 0px 0px", () => revealRef.current.earlier()) : null;
+    const down = hasBelow ? watch(bottomSentinelRef.current, "0px 0px 1800px 0px", () => revealRef.current.later()) : null;
+    return () => { up?.disconnect(); down?.disconnect(); };
+  }, [hasAbove, hasBelow]);
+
+  useLayoutEffect(() => {
+    if (win.start === null || win.end !== null || endIdx - startIdx + 1 <= RENDER_MAX + 2) return;
+    const el = scrollRef.current;
+    if (!el) return;
+    if (el.scrollTop < (el.scrollHeight - el.clientHeight) / 2) setRange(startIdx, startIdx + RENDER_MAX - 1);
+    else { const ns = endIdx - RENDER_MAX + 1; setRange(ns, endIdx, measure(itemsRef.current[ns].key)); }
+  }, [win, startIdx, endIdx, setRange, measure]);
+
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
+    const el = scrollRef.current;
+    if (!el) return;
+    pinned.current = true;
+    setAtBottom(true);
+    if (winRef.current.start !== null || winRef.current.end !== null) { setWin({ start: null, end: null }); return; }
+    el.scrollTo({ top: el.scrollHeight, behavior });
+  }, []);
+
+  // 在「你」的消息之间跳。
+  const scrollToUserMsg = useCallback((dir: -1 | 1) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const base = el.getBoundingClientRect().top;
+    const tops = Array.from(el.querySelectorAll<HTMLElement>(".msg.user:not(.queued)")).map((n) => n.getBoundingClientRect().top - base + el.scrollTop);
+    const cur = el.scrollTop;
+    const candidates = dir < 0 ? tops.filter((t) => t < cur - 8) : tops.filter((t) => t > cur + 8);
+    if (!candidates.length) { if (dir < 0) revealRef.current.earlier(); else revealRef.current.later(); }
+    if (!tops.length) return;
+    const target = candidates.length ? (dir < 0 ? candidates[candidates.length - 1] : candidates[0]) : dir < 0 ? tops[0] : tops[tops.length - 1];
+    el.scrollTo({ top: Math.max(0, target - 12), behavior: "smooth" });
+  }, []);
+
+  useLayoutEffect(() => {
+    const a = anchorRef.current;
+    const el = scrollRef.current;
+    if (a && a.win === win) {
+      anchorRef.current = null;
+      const node = el?.querySelector<HTMLElement>(`[data-tkey="${CSS.escape(a.key)}"]`);
+      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, win]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => { if (pinned.current) el.scrollTop = el.scrollHeight; });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  useEffect(() => {
+    pinned.current = true;
+    setAtBottom(true);
+    setWin({ start: null, end: null });
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [key]);
+
+  const contextReset = !!lastTurn?.context_reset && conv?.turns.some((turn) => turn.context_reset);
+  const h = cfg.header;
+  const view = useMemo(() => ({ timestamps: cfg.transcript.timestamps, initialBadge: cfg.transcript.initialBadge, userLabel: cfg.labels.user, agentName: cfg.labels.agent, viewingBlock: refShown(cfg, "viewing") }), [cfg]);
+  const composerOptions = useMemo<ComposerOptions>(() => ({
+    placeholderRunning: cfg.composer.placeholderRunning, hints: cfg.composer.hints, charCount: cfg.composer.charCount,
+    fileUpload: cfg.composer.fileUpload, fileButtonText: cfg.composer.fileButtonText, queue: cfg.composer.queue,
+  }), [cfg]);
+  const composerDisabled = !!readOnly || finalEnd || conv?.stream === "error";
+  const disabledHint = readOnly
+    ? batch && !readOnlyProp && cfg.composer.show
+      ? "当前任务暂不支持发送消息"
+      : "只读"
+    : finalEnd ? "对话已结束，不能再发消息" : conv?.streamError ?? undefined;
+
+  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);
+    if (board?.directLinks && key) return (path: string) => board.fileUrl(key, path);
+    return null;
+  }, [!!fileUrl, key, jobId, taskId, board]); // eslint-disable-line react-hooks/exhaustive-deps
+  // 点了本地文件：看板 → 弹窗 → 地址（见 fileOpen）。
+  const openFile = useMemo(() => {
+    if (!key || fileOpen === "link") return null;
+    return (path: string) => {
+      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, 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 ref={chatRef} className={`cli-ui cli-chat ${className ?? ""}`} data-theme={theme} style={style}>
+      <SubagentChatScope scopeKey={`${key ?? "new"}:${remoteTaskId ?? ""}`} messages={allMessages} load={store.client.subagent ? loadSubagent : undefined} renderMessage={renderSubagentMessage}>
+      <div className="session">
+        {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>}
+            {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()}（每轮重复读取的上下文）` : ""}`}>
+                {fmtTokens(fresh)} tok
+                {cacheRead > 0 && <> <span className="usage-dot">·</span> <span className="usage-cached">{fmtTokens(cacheRead)} 缓存</span></>}
+              </span>
+            )}
+            {h.model && key && !isNew && (
+              <span className="status-ctl" style={{ cursor: "default" }} title="模型由任务中心按产品线配置分配">
+                {Icon.spark()}<span className="cv">默认</span>
+                {resolvedModel && <span className="model-badge" title={`上次运行于 ${resolvedModel}`}>{modelLabel(resolvedModel)}</span>}
+              </span>
+            )}
+            {h.status && <span className={`status-ctl ${awaiting ? "awaiting" : ""}`} style={{ cursor: "default" }}>
+              <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={() => key && setCloseAction({ key, stage: "confirm" })} disabled={closing === "busy"} title={taskId ? "只结束这个对话：之后它不再接收消息，正在跑的一轮会被中止；同一任务里的其他对话不受影响" : "结束这个对话：之后不再接收消息，正在跑的一轮会被中止"}>{Icon.stop()} 结束对话</button>
+            )}
+          </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>
+            <span className="spacer" />
+            <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>}
+        {conv?.stream === "reconnecting" && <div className="sync-banner"><span className="sync-msg">实时连接中断，正在重连…{conv.streamError ? `（${conv.streamError}）` : ""}</span></div>}
+        {conv?.stream === "error" && <div className="sync-banner conflict"><span className="sync-msg">⚠ {conv.streamError}</span></div>}
+        {conv?.stream === "offline" && <div className="sync-banner conflict" role="status"><span className="sync-msg">⚠ 实时连接已中断{conv.streamError ? `（${conv.streamError}）` : ""}，已停止自动重试；网络恢复、回到页面或发出消息时会再连。</span><span className="sync-spacer" /><button className="btn btn-ghost btn-sm" onClick={() => { if (key) store.reconnect(key); }}>重新连接</button></div>}
+
+        <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>
+                  {cfg.transcript.status && <div className="h-status"><StatusDot cls="r" /> 新对话 · 尚未开始</div>}
+                  <h2>{cfg.empty.title}</h2>
+                  {isNew && <p className="h-desc">在「{jobTitle ?? "这个任务"}」里新开一个对话：和任务里的其他对话共用同一个工作区（能看到彼此产出的文件），对话内容各自独立。</p>}
+                  {cfg.empty.description && <p className="h-desc">{cfg.empty.description}</p>}
+                </div>
+              )}
+              {continuedFrom && (
+                <div className="msg system info"><div className="msg-body">ℹ 这个对话接续自上一个已结束的对话（{continuedFrom}）。工作区文件沿用，之前的对话内容没有带进来。
+                  <button className="btn btn-line btn-sm" style={{ marginLeft: 8 }} onClick={() => go(continuedFromKey)}>查看上一个对话</button>
+                </div></div>
+              )}
+              {contextReset && <div className="msg system info"><div className="msg-body">ℹ 执行节点上的会话重建过：从那一轮起是新的 Agent 会话，之前的对话上下文没有带过去（工作区文件还在）。</div></div>}
+              {loading && (
+                <div aria-hidden>
+                  <div className="session-label"><span className="ln" />正在加载会话<span className="ln" /></div>
+                  <div className="msg user" style={{ opacity: .7 }}>
+                    <div className="who"><Skel w={18} h={18} r={5} /><Skel w={34} h={9} /></div>
+                    <div className="msg-body"><Skel w="72%" h={12} /><Skel w="46%" h={12} style={{ marginTop: 9 }} /></div>
+                  </div>
+                  <div className="msg" style={{ opacity: .7 }}>
+                    <div className="who"><Skel w={18} h={18} r={5} /><Skel w={70} h={9} /></div>
+                    <Skel w="90%" h={11} /><Skel w="83%" h={11} style={{ marginTop: 8 }} /><Skel w="58%" h={11} style={{ marginTop: 8 }} />
+                  </div>
+                </div>
+              )}
+              {hasAbove && (
+                <div ref={topSentinelRef} className="load-older">
+                  <button className="btn btn-ghost btn-sm" onClick={revealEarlier} disabled={loadingOlder}>{loadingOlder ? "正在加载更早的消息…" : `加载更早的消息（还有 ${hiddenAbove + older} 条）`}</button>
+                </div>
+              )}
+              {shown.map((it) =>
+                it.kind === "label" ? (
+                  cfg.transcript.sessionLabel ? <div key={it.key} data-tkey={it.key} className="session-label"><span className="ln" />第 {it.n} 次会话{it.current ? " · 当前" : ""}<span className="ln" /></div> : null
+                ) : it.kind === "break" ? (
+                  <div key={it.key} data-tkey={it.key}><SessionBreak summary={it.summary} /></div>
+                ) : it.kind === "fold" ? (
+                  <div key={it.key} data-tkey={it.key} data-msg="">
+                    <button className="cli-wait-fold" onClick={() => setOpenFolds((o) => { const n = new Set(o); if (n.has(it.key)) n.delete(it.key); else n.add(it.key); return n; })} aria-expanded={openFolds.has(it.key)}>
+                      <span className="cli-wait-ic">⏳</span>
+                      <span>等你在浏览器里操作 · AI 已续等 {it.waits} 次</span>
+                      <span className="cli-wait-more">{openFolds.has(it.key) ? "收起" : "展开"}</span>
+                    </button>
+                    {openFolds.has(it.key) && it.msgs.map((m) => <MessageView key={m.id} m={m} initial={false} hideWho running={running} agent={agent} agentLabel={agentText} handlers={handlers} view={view} />)}
+                  </div>
+                ) : (
+                  <div key={it.key} data-tkey={it.key} data-msg="">
+                    <MessageView m={it.m} initial={it.initial} hideWho={it.hideWho} running={running} agent={agent} agentLabel={agentText} handlers={handlers} view={view} />
+                  </div>
+                ),
+              )}
+              {hasBelow && (
+                <div ref={bottomSentinelRef} className="load-older">
+                  <button className="btn btn-ghost btn-sm" onClick={revealLater}>显示后面的消息（还有 {hiddenBelow} 条）</button>
+                  <button className="btn btn-ghost btn-sm" onClick={() => scrollToBottom("auto")}>跳到最新</button>
+                </div>
+              )}
+              {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>
+              )}
+              {slots?.afterMessages}
+              {continuedBy && (
+                <div className="load-older"><button className="btn btn-line btn-sm" onClick={() => go(continuedBy)}>转到接续的新对话</button></div>
+              )}
+            </div>
+          </div>
+          {cfg.transcript.nav && <div className="msg-nav">
+            <button className="msg-nav-btn" onClick={() => scrollToUserMsg(-1)} title="上一条消息" aria-label="滚动到上一条消息">{Icon.chevUp()}</button>
+            <button className="msg-nav-btn" onClick={() => scrollToUserMsg(1)} title="下一条消息" aria-label="滚动到下一条消息">{Icon.chevDown()}</button>
+            {!atBottom && <button className="msg-nav-btn" onClick={() => scrollToBottom()} title="跳到最新" aria-label="跳到最新">{Icon.toBottom()}</button>}
+          </div>}
+        </div>
+        {showComposer && !!contextItems?.length && (
+          <div className="cli-refs cli-ctxs" aria-label="补充背景，下一条消息会带上">
+            <span className="cli-refs-t">{Icon.flag()} 补充背景</span>
+            {contextItems.map((c) => (
+              <span key={c.id} className="cli-ref ctx" title={`${c.text.slice(0, 500)}${c.text.length > 500 ? "…" : ""}\n（下一条消息会带上）`}>
+                <span className="cli-ref-l">{c.title || c.text.replace(/\s+/g, " ").slice(0, 20)}</span>
+              </span>
+            ))}
+          </div>
+        )}
+        {slots?.beforeComposer}
+        {showComposer && execution.error && <div className="control-error" role="status">{execution.error} {store.client.getExecutionConfig && <button type="button" className="btn btn-ghost btn-sm" disabled={execution.loading || execution.busy} onClick={() => void execution.reload()}>重新读取</button>}</div>}
+        {!showComposer && <QueuedMessages scopeKey={key ?? "new"} messages={queued} onCancel={handlers.onCancelQueued} onSendNow={queueSendNow} sendNowUnavailable={queueSendNowHint} attachmentUrl={handlers.attachmentUrl} />}
+        {showComposer && (
+          <Composer
+            uploadDocument={uploadDocument}
+            key={key ?? "new"}
+            draft={draftScope}
+            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 || settingsBusy}
+            disabledHint={cfg.composer.placeholderDisabled ? fillTemplate(cfg.composer.placeholderDisabled, { title: convTitle, agent: agentText }) : disabledHint}
+            running={running || batchPending}
+            toolbar={<>
+              <RunControls task={{ id: draftScope, agent: execution.config?.agent ?? agent ?? initialOptions?.agent ?? undefined,
+                model: execution.config?.model, reasoning: execution.config?.reasoning, permission_mode: execution.config?.permission_mode }}
+                agents={execution.config?.agents} caps={executionAgent?.capabilities} defaults={executionAgent?.defaults}
+                showAgent={cfg.composer.agentSelector} showPermission={cfg.composer.executionMode}
+                unavailableReason={batch ? "一次性任务沿用任务执行设置，不支持在对话中修改。" : executionReadOnly ? "当前接入仅支持读取执行设置。" : execution.error ?? (!executionEnabled || execution.loading ? "正在读取执行设置…" : undefined)}
+                disabled={!executionEnabled || composerDisabled || running || batchPending || !!configurationBusy || execution.loading || executionReadOnly}
+                onSetAgent={agent => execution.save({ agent, model: null, reasoning: null, permission_mode: null })}
+                onSetModel={model => execution.save({ model })} onSetReasoning={reasoning => execution.save({ reasoning })}
+                onSetPermission={permission_mode => execution.save({ permission_mode })} />
+              {slots?.composerToolbar}
+            </>}
+            queued={<QueuedMessages scopeKey={key ?? "new"} messages={queued} onCancel={handlers.onCancelQueued} onSendNow={queueSendNow} sendNowUnavailable={queueSendNowHint} onEdit={handlers.onCancelQueued ? editQueued : undefined} 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",
+              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}
+          />
+        )}
+        </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>
+      </SubagentChatScope>
+      {popup && key && board && (
+        <div className="scrim" onClick={(e) => { if (e.target === e.currentTarget) setPopup(null); }}>
+          <div className={`modal cli-popup ${popup.kind}`} role="dialog" aria-modal="true" aria-label={popup.kind === "file" ? popup.path : "任务浏览器"}>
+            {popup.kind === "file" ? (
+              <FileViewer backend={board} jobId={key} path={popup.path} onClose={() => setPopup(null)} onOpenPath={(p) => setPopup({ kind: "file", path: p })} />
+            ) : (
+              <>
+                <div className="cli-fv-h"><span className="cli-fv-name">任务浏览器</span><span className="cli-fv-sp" /><button className="cli-fv-icon" onClick={() => setPopup(null)} title="关闭">{Icon.x()}</button></div>
+                <BrowserPane backend={board} jobId={key} readOnly={readOnly} />
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+    </FileOpenContext.Provider>
+    </FileLinkContext.Provider>
+  );
+}