@spzxg/cli-ui 0.6.5 → 0.6.7

package/src/msglist/CliMsgList.tsx

@@ -1,7 +1,7 @@
 // cli-msglist：消息对话列表。界面取自 Operator 的任务栏（TasksColumn 的列表视图，不做看板），
 // 一张卡片是 center 里的一个对话任务（mode=conversation）。对话任务里开了几个对话时，卡片下面按对话展开，
 // 点哪个对话选哪个（选中值是对话键 "job#task"）；卡片上的「+」在这个对话任务里新开一个对话（同一个工作区）。
-import { useEffect, useMemo, useState, type CSSProperties } from "react";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import { CliErrorBoundary } from "../ui/ErrorBoundary";
 import type { CliEvent, JobEntry } from "../core/store";
 import type { CliStoreOptions, CliStore } from "../core/store";
@@ -12,6 +12,7 @@ import { Icon } from "../ui/icons";
 import { agentLabel, relTime, toMs } from "../ui/format";
 import { AgentBadge, ErrNote, Skel, StatusDot, type DotCls } from "../ui/shared";
 import { resolveMsgListConfig, type CliMsgListConfig, type ResolvedMsgListConfig } from "../core/config";
+import { useBoardVisibility } from "../board/useBoardVisibility";
 
 /** onTurnEnd / onConversationEnd：浏览器里从实时流算出的结果通知，不依赖 center 的 callback.url。 */
 export interface CliMsgListProps extends CliStoreOptions, ResultHandlers {
@@ -59,6 +60,9 @@ export function CliMsgList(props: CliMsgListProps) {
 
 const SEARCH_MIN = 6;
 const BATCH_ACTIVE = new Set(["dispatching", "running", "verifying"]);
+// An orphaned task can retain a fresh, authoritative human-wait observation
+// while the center is reconciling its execution state. Do not call it running.
+const BATCH_AWAITING = new Set([...BATCH_ACTIVE, "orphaned"]);
 
 interface CardView {
   id: string;
@@ -95,9 +99,11 @@ export function cardView(id: string, entry: JobEntry | undefined): CardView {
     const label = cancelled ? "已取消" : failed ? "已失败" : "已完成";
     return { ...base, cls: cancelled || failed ? "x" : "g", label, running: false, awaiting: false, group: cancelled ? "cancelled" : "done", activity: updatedAt ? `${label} · ${relTime(updatedAt)}` : label };
   }
-  // 一次性任务：有子任务在节点上跑就是运行中，没有轮次、不会停在提问上。
+  // A browser handoff/input card keeps its turn running while requiring a human.
   if (batch) {
     const running = (job?.tasks ?? []).some((task) => BATCH_ACTIVE.has(task.status));
+    const awaiting = (job?.tasks ?? []).some((task) => BATCH_AWAITING.has(task.status) && task.awaiting_input === true);
+    if (awaiting) return { ...base, cls: "a", label: "需要你处理", running, awaiting, group: "needs", activity: "等你处理" };
     return { ...base, cls: "a", label: "进行中", running, awaiting: false, group: "active", activity: running ? "运行中 · 工作中" : status === "queued" ? "等待执行节点" : "进行中" };
   }
   // 开了几个对话：任何一个在跑就算在跑，任何一个停在提问上就要你处理（关掉的对话不算）。
@@ -105,7 +111,7 @@ export function cardView(id: string, entry: JobEntry | undefined): CardView {
   const many = (conv?.conversations?.length ?? 0) > 1;
   const running = many ? open.some((c) => c.running_turn) : !!conv?.running_turn;
   // 上一轮以提问结束、后面没有新消息：等你回答。
-  const awaiting = many ? open.some((c) => !c.running_turn && !c.queued_turns && !!c.last_turn?.asked) : !running && !conv?.queued_turns && !!conv?.last_turn?.asked;
+  const awaiting = many ? open.some((c) => c.awaiting_input === true || (!c.running_turn && !c.queued_turns && !!c.last_turn?.asked)) : conv?.awaiting_input === true || (!running && !conv?.queued_turns && !!conv?.last_turn?.asked);
   if (awaiting) return { ...base, cls: "a", label: "需要你处理", running, awaiting, group: "needs", activity: updatedAt ? `等你处理 · ${relTime(updatedAt)}` : "等你处理" };
   if (running) return { ...base, cls: "a", label: "进行中", running, awaiting, group: "active", activity: "运行中 · 工作中" };
   const waiting = conv?.queued_turns ? `${conv.queued_turns} 条排队中` : status === "queued" ? "等待执行节点" : updatedAt ? relTime(updatedAt) : "未开始";
@@ -143,6 +149,7 @@ export function convRows(jobId: string, entry: JobEntry | undefined): ConvRowVie
     if (tasks.length <= 1) return [];
     return tasks.map((t) => {
       const look = BATCH_ROW[t.status] ?? { cls: "a" as DotCls, label: t.status };
+      if (BATCH_AWAITING.has(t.status) && t.awaiting_input === true) return { key: convKey(jobId, t.id), title: t.title, cls: "a" as DotCls, label: "需要你处理", running: !!look.running, awaiting: true, activity: "等你处理", turns: 0 };
       return { key: convKey(jobId, t.id), title: t.title, cls: look.cls, label: look.label, running: !!look.running, awaiting: false, activity: look.label, turns: 0 };
     });
   }
@@ -153,7 +160,7 @@ export function convRows(jobId: string, entry: JobEntry | undefined): ConvRowVie
     const base = { key: convKey(jobId, c.task_id), title: c.title, turns: c.turns };
     if (c.closed || jobEnded) return { ...base, cls: "g" as DotCls, label: "已结束", running: false, awaiting: false, activity: "已结束" };
     const running = c.running_turn;
-    const awaiting = !running && !c.queued_turns && !!c.last_turn?.asked;
+    const awaiting = c.awaiting_input === true || (!running && !c.queued_turns && !!c.last_turn?.asked);
     if (awaiting) return { ...base, cls: "a" as DotCls, label: "需要你处理", running, awaiting, activity: "等你处理" };
     if (running) return { ...base, cls: "a" as DotCls, label: "进行中", running, awaiting, activity: "运行中" };
     return { ...base, cls: "a" as DotCls, label: "进行中", running, awaiting, activity: c.queued_turns ? `${c.queued_turns} 条排队中` : "空闲" };
@@ -278,6 +285,12 @@ function MsgListInner({ jobIds, selectedId, onSelect, onNew, title = "对话", c
   const cfg = useMemo(() => resolveMsgListConfig(config), [configKey]); // eslint-disable-line react-hooks/exhaustive-deps
   const h = cfg.header;
   const store = useCliStore();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const owner = useId();
+  const visible = useBoardVisibility(rootRef, true);
+  const expanded = visible && !className?.split(/\s+/).includes("collapsed");
+  useLayoutEffect(() => { store.reportListPresence(owner, expanded); }, [store, owner, expanded]);
+  useLayoutEffect(() => () => { store.reportListPresence(owner, false); }, [store, owner]);
   const ids = useCliState((s) => s.jobIds);
   const jobs = useCliState((s) => s.jobs);
   const shared = useCliState((s) => s.selected);
@@ -337,7 +350,7 @@ function MsgListInner({ jobIds, selectedId, onSelect, onNew, title = "对话", c
   const showBanner = showRow || showContext;
 
   return (
-    <div className={`cli-ui cli-msglist ${className ?? ""}`} data-theme={theme} style={{ ...style, ...(width !== undefined ? { width } : null) }}>
+    <div ref={rootRef} className={`cli-ui cli-msglist ${className ?? ""}`} data-theme={theme} style={{ ...style, ...(width !== undefined ? { width } : null) }}>
       <div className="col col-tasks">
         {showBanner && <div className="proj-banner">
           {showRow && <div className="pb-row">

package/src/operator/node/Chat.tsx

@@ -12,6 +12,8 @@ import { OperatorBoardContext } from "./boardInteraction";
 import { toolDataOf } from "./transcriptModel";
 import { FileLinkContext } from "./fileLinks";
 import { Composer } from "./Composer";
+import { QueuedMessages } from "../../ui/QueuedMessages";
+import { useChatScrollbar } from "../../ui/useChatScrollbar";
 import { BranchHistory, useBranchHistory } from "./BranchHistory";
 import { BranchNavigator } from "./BranchNavigator";
 import type { Quote } from "./composerDraft";
@@ -76,6 +78,7 @@ export function Chat(props: ChatProps) { return <ChatSession key={props.task.id}
 function ChatSession({ project, task, tasks, agents, messages, running, transcriptLoading, older=0, onLoadOlder,
   controls, configBusy, active=true, onSelectTask, onFork, onSend, onStop, onClear, onReconnect, onAnswer, onCancelQueued }: ChatProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
+  useChatScrollbar(scrollRef, task.id);
   const [quoteRequest, setQuoteRequest] = useState<Quote|null>(null);
   const flow=useBranchHistory(task,tasks);
   const fileScope=useMemo(()=>({taskId:task.id}),[task.id]);
@@ -83,7 +86,7 @@ function ChatSession({ project, task, tasks, agents, messages, running, transcri
   const view=active?'chat':'changes';
   const quote=(m: Msg, source: TaskRow=task, selected?:string)=>{
     const text=selected||splitAttachments(m.content).text;
-    if(text.trim()) setQuoteRequest({id:m.id, author:`${m.role==='user'?'你':agentLabel(agents,source.agent)}${source.id===task.id?'':` · ${source.title}`}`,text});
+    if(text.trim()) setQuoteRequest({id:m.id, author:`${m.role==='user'?'你':agentLabel(agents,source.agent)}${source.id===task.id?'':` · ${source.title}`}`,text,sourceTaskId:source.id});
   };
   const openBoard=useContext(OperatorBoardContext);
   const handoffs=useRef<Set<string>|null>(null);
@@ -414,7 +417,7 @@ function ChatSession({ project, task, tasks, agents, messages, running, transcri
   // window sheds rows above. Layout effect, so it lands before paint (no jump).
   useLayoutEffect(() => {
     if (pinned.current && scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-  }, [messages, running, startIdx, endIdx]);
+  }, [messages, running, startIdx, endIdx, win]);
   // …and when the pane itself resizes (the composer growing, a banner
   // appearing). Content resizes are left alone, so expanding a tool card at
   // the bottom doesn't yank its top out of view.
@@ -488,11 +491,6 @@ function ChatSession({ project, task, tasks, agents, messages, running, transcri
           {running && !awaitingAnswer && !hasBelow && (
             <RunningIndicator agent={task.agent} startedAt={turnStartedAt} lastActivityRef={lastActivityRef} />
           )}
-          {/* Follow-ups queued mid-turn, pinned below the live turn — they
-              send in order once it ends. */}
-          {!hasBelow && messages.filter((m) => m.role === "queued").map((m) => (
-            <MessageView key={m.id} m={m} initial={false} hideWho={false} onAnswer={stableAnswer} onCancelQueued={stableCancelQueued} />
-          ))}
           {!hasBelow && <BranchNavigator sourceId={task.id} projectId={project.id} tasks={tasks} completed={task.status==='done'} onSelect={onSelectTask} />}
         </div>
       </div>
@@ -510,7 +508,8 @@ function ChatSession({ project, task, tasks, agents, messages, running, transcri
         )}
       </div>
       </div>
-      <Composer tasks={tasks} onFork={onFork} task={task} agentLabel={agentLabel(agents, task.agent)} disabled={task.started!==1} configBusy={configBusy} running={running} onSend={onSend} onStop={onStop} onClear={onClear} quoteRequest={quoteRequest} onQuoteHandled={()=>setQuoteRequest(null)} controls={controls} />
+      <Composer tasks={tasks} onFork={onFork} task={task} agentLabel={agentLabel(agents, task.agent)} disabled={task.started!==1} configBusy={configBusy} running={running} onSend={async text => { const sent = await onSend(text); if (sent && !running) scrollToBottom("auto"); return sent; }} onStop={onStop} onClear={onClear} quoteRequest={quoteRequest} onQuoteHandled={()=>setQuoteRequest(null)} controls={controls}
+        queued={<QueuedMessages scopeKey={task.id} messages={messages.filter(message => message.role === "queued")} onCancel={message => stableCancelQueued(message.id)} attachmentUrl={attachment => `/api/tasks/${encodeURIComponent(attachment.taskId)}/uploads/${encodeURIComponent(attachment.name)}`} renderMessage={message => <MessageView m={message} initial={false} hideWho readOnly />} />} />
     </></FileLinkContext.Provider>
   );
 

package/src/operator/node/Composer.tsx

@@ -1,26 +1,34 @@
 "use client";
 
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { DOCUMENT_MAX_BYTES, FILE_UPLOAD_ACCEPT, isOriginalDocument, uploadFileType, UPLOAD_OTHER_MAX_BYTES } from "../../core/documentUpload";
 import { Popover } from "./shared";
 import type { TaskRow } from "./types";
 import { Icon } from "./icons";
 import { attachmentMarker, fileAttachmentMarker } from "./format";
 import { MAX_MESSAGE_CHARS, PASTE_ATTACH_THRESHOLD } from "./protocol/promptLimits";
 import { RunControls, type RunControlProps } from "./RunControls";
-import { appendBoardContext, formatBoardContext } from "../../board/context";
+import { appendBoardContext } from "../../board/context";
 import { readBoardState, useBoardState } from "./boardState";
 import { clientId } from "../../core/id";
+import { useComposerAutosize } from "../../ui/useComposerAutosize";
+import { ReferenceCard } from "../../ui/ReferenceCard";
+import { UploadProgress } from "../../ui/UploadProgress";
+import { Markdown } from "./Markdown";
+import { FileLinkContext } from "./fileLinks";
 import { isConfigurationBusy, useConfigurationBusy } from "../../chat/configuration";
 import { acknowledgeDraft, DRAFT_EVENT, isTaskSending, setTaskSending, readDraft, writeDraft, quoteText, type ComposerDraft, type Quote } from "./composerDraft";
+import { getOperatorBoardBackend } from "./boardBackend";
+import { OperatorBoardContext, openOperatorBoard } from "./boardInteraction";
 
-export function Composer({ task, agentLabel, disabled, running, onSend, onStop, onClear, quoteRequest, onQuoteHandled, controls, configBusy, tasks, onFork }: {
+export function Composer({ task, agentLabel, disabled, running, onSend, onStop, onClear, quoteRequest, onQuoteHandled, controls, configBusy, tasks, onFork, queued }: {
   task: TaskRow; agentLabel: string; disabled: boolean; running: boolean;
   tasks: TaskRow[]; onFork: (text: string, sourceIds: string[], requestId: string) => Promise<boolean>;
   onSend: (text: string) => Promise<boolean>; onStop: () => Promise<boolean>; onClear: () => void;
   configBusy: boolean; quoteRequest: Quote | null; onQuoteHandled: () => void; controls: RunControlProps;
+  queued?: ReactNode;
 }) {
   const boardView=useBoardState(task.id);
-  const [includeBoard,setIncludeBoard]=useState(true);
   const [draft, setDraft] = useState(() => readDraft(task.id));
   const draftRef = useRef(draft);
   const [addOpen, setAddOpen] = useState(false);
@@ -40,6 +48,10 @@ export function Composer({ task, agentLabel, disabled, running, onSend, onStop,
   const caretRequest = useRef<number | null>(null);
   const composing = useRef(false);
   const uploads = useRef(new Map<string, AbortController>());
+  const uploadFiles = useRef(new Map<string, File>());
+  const backend = useMemo(() => getOperatorBoardBackend(), []);
+  const parentBoard = useContext(OperatorBoardContext);
+  const uploadScope = useRef({ taskId: task.id, openBoard: parentBoard ?? openOperatorBoard });
   const previews = useRef(new Set<string>());
   const mounted = useRef(true);
   const update = (fn: (prev: ComposerDraft) => ComposerDraft) => {
@@ -48,9 +60,12 @@ export function Composer({ task, agentLabel, disabled, running, onSend, onStop,
     writeDraft(task.id, next);
     if (mounted.current) setDraft(next);
   };
-  useEffect(() => {
+  useLayoutEffect(() => { uploadScope.current = { taskId: task.id, openBoard: parentBoard ?? openOperatorBoard }; }, [task.id, parentBoard]);
+  useLayoutEffect(() => {
     mounted.current = true;
-    const pending = uploads.current, urls = previews.current;
+    const current = readDraft(task.id);
+    draftRef.current = current; setDraft(current);
+    const pending = uploads.current, urls = previews.current, files = uploadFiles.current;
     const sync = (event: Event) => {
       const change = (event as CustomEvent<{ id: string; draft?: ComposerDraft; sending?: boolean }>).detail;
       if (change.id !== task.id) return;
@@ -69,28 +84,25 @@ export function Composer({ task, agentLabel, disabled, running, onSend, onStop,
         const current = readDraft(task.id);
         writeDraft(task.id, { ...current, attachments: current.attachments.map((attachment) =>
           interrupted.has(attachment.key) && attachment.status === "uploading"
-            ? { ...attachment, preview: "", status: "error", error: "上传已中断，请移除后重新添加。" }
+            ? { ...attachment, preview: "", status: "error", error: "上传已中断，请重新选择文件。" }
             : attachment) });
       }
       pending.clear();
+      files.clear();
       urls.forEach((url) => URL.revokeObjectURL(url));
       urls.clear();
     };
-  }, []);
+  }, [task.id]);
   useEffect(() => { if (!running) { setStopping(false); stoppingRef.current = false; } }, [running]);
   useEffect(() => {
     if (!quoteRequest) return;
     update((d) => ({ ...d, quote: quoteRequest }));
-    ref.current?.focus();
+    ref.current?.focus({ preventScroll: true });
     onQuoteHandled();
     // Each request is a new object even when quoting the same message again.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [quoteRequest]);
-  useEffect(() => {
-    if (!ref.current) return;
-    ref.current.style.height = "auto";
-    ref.current.style.height = Math.min(ref.current.scrollHeight, 200) + "px";
-  }, [draft.text]);
+  useComposerAutosize(ref, draft.text);
   // A menu action hands keyboard control straight to the edited text. Deferring
   // focus to rAF leaves a visible mention list whose first Escape/arrow is lost.
   useLayoutEffect(() => {
@@ -103,38 +115,56 @@ export function Composer({ task, agentLabel, disabled, running, onSend, onStop,
 
   const sharedConfigBusy = useConfigurationBusy(task.id);
   const locked = disabled || sending || configBusy || sharedConfigBusy;
+  const startUpload = (key: string, file: File) => {
+    if (!backend.uploadFile || locked || uploads.current.has(key)) return;
+    const taskId = task.id;
+    const preview = draftRef.current.attachments.find(a => a.key === key)?.preview;
+    const controller = new AbortController();
+    uploads.current.set(key, controller);
+    uploadFiles.current.set(key, file);
+    const current = () => mounted.current && uploadScope.current.taskId === taskId && uploads.current.get(key) === controller && !controller.signal.aborted && draftRef.current.attachments.some(a => a.key === key);
+    update(d => ({ ...d, attachments: d.attachments.map(a => a.key === key ? { ...a, status: "uploading", phase: "queued", bytes: 0, size: file.size, error: undefined } : a) }));
+    void Promise.resolve().then(() => backend.uploadFile!(taskId, file, {
+      draftId: key, signal: controller.signal,
+      onPhase: phase => { if (current()) update(d => ({ ...d, attachments: d.attachments.map(a => a.key === key ? { ...a, phase } : a) })); },
+      onBytes: bytes => { if (current()) update(d => ({ ...d, attachments: d.attachments.map(a => a.key === key ? { ...a, bytes } : a) })); },
+    })).then(receipt => {
+      if (!current()) return;
+      if (!receipt.path) throw new Error("文件尚未进入当前工作区，请稍后重试。");
+      const path = receipt.path;
+      update(d => ({ ...d, attachments: d.attachments.map(a => a.key === key ? { ...a, path, preview: a.kind === "image" ? receipt.url ?? backend.fileUrl(taskId, path) : "", status: "ready", bytes: file.size } : a) }));
+      uploadFiles.current.delete(key);
+      uploadScope.current.openBoard({ kind: "file", taskId, path });
+    }).catch((e: unknown) => {
+      if (current()) update(d => ({ ...d, attachments: d.attachments.map(a => a.key === key ? { ...a, status: "error", error: e instanceof Error ? e.message : "上传失败，请重试。" } : a) }));
+    }).finally(() => {
+      if (uploads.current.get(key) === controller) uploads.current.delete(key);
+      if (preview && previews.current.delete(preview)) URL.revokeObjectURL(preview);
+    });
+  };
   const addFiles = (files: File[]) => {
     if (locked) return;
     setError("");
-    for (const original of files) {
-      const f = !original.type.startsWith("image/") && /\.(txt|md|log|csv|json|ya?ml|[cm]?[jt]sx?|py|sh|css|html)$/i.test(original.name)
-        ? new File([original], original.name, { type: "text/plain" }) : original;
-      const type = f.type.split(";")[0];
-      const isImage = ["image/png", "image/jpeg", "image/gif", "image/webp"].includes(type);
-      if (!isImage && type !== "text/plain") { setError(`“${f.name}”暂不支持，请选择 PNG、JPEG、GIF、WebP 或纯文本文件。`); continue; }
-      if (f.size > 10 * 1024 * 1024) { setError(`“${f.name}”超过 10 MB，请缩小后重试。`); continue; }
+    if (!backend.uploadFile) { setError("当前服务暂不支持附件上传。"); return; }
+    for (const f of files) {
+      const type = uploadFileType(f.name);
+      const document = isOriginalDocument(f.name);
+      const isImage = !!type?.startsWith("image/");
+      if (!type) { setError(`“${f.name}”暂不支持，请选择图片、文档、表格或文本文件。`); continue; }
+      if (f.size > (document ? DOCUMENT_MAX_BYTES : UPLOAD_OTHER_MAX_BYTES)) { setError(`“${f.name}”超过 ${document ? "100 MiB" : "10 MiB"}，请缩小后重试。`); continue; }
       const key = clientId();
       const preview = isImage ? URL.createObjectURL(f) : "";
       if (preview) previews.current.add(preview);
-      update((d) => ({ ...d, attachments: [...d.attachments, { key, kind: isImage ? "image" : "file", name: f.name || "附件", preview, path: "", status: "uploading" }] }));
-      const controller = new AbortController();
-      uploads.current.set(key, controller);
-      const body = new FormData(); body.append("file", f, f.name);
-      void fetch(`/api/tasks/${task.id}/uploads`, { method: "POST", body, signal: controller.signal })
-        .then(async (res) => {
-          const j = await res.json();
-          if (!res.ok || !j.path || !j.url) throw new Error(j.error || "上传失败，请重新添加。");
-          if (!mounted.current) return;
-          update((d) => ({ ...d, attachments: d.attachments.map((a) => a.key === key ? { ...a, path: j.path, preview: isImage ? j.url : "", status: "ready" } : a) }));
-        })
-        .catch((e: unknown) => {
-          if (!mounted.current || controller.signal.aborted) return;
-          update((d) => ({ ...d, attachments: d.attachments.map((a) => a.key === key ? { ...a, status: "error", error: e instanceof Error ? e.message : "上传失败" } : a) }));
-        }).finally(() => { uploads.current.delete(key); if (preview) { URL.revokeObjectURL(preview); previews.current.delete(preview); } });
+      update((d) => ({ ...d, attachments: [...d.attachments, { key, kind: isImage ? "image" : "file", name: f.name || "附件", preview, path: "", status: "uploading", phase: "queued", bytes: 0, size: f.size }] }));
+      startUpload(key, f);
     }
   };
   const removeAtt = (key: string) => {
     uploads.current.get(key)?.abort();
+    uploads.current.delete(key);
+    uploadFiles.current.delete(key);
+    const preview = draftRef.current.attachments.find(a => a.key === key)?.preview;
+    if (preview && previews.current.delete(preview)) URL.revokeObjectURL(preview);
     update((d) => ({ ...d, attachments: d.attachments.filter((a) => a.key !== key) }));
   };
   const sources = draft.sources ?? [];
@@ -158,12 +188,12 @@ export function Composer({ task, agentLabel, disabled, running, onSend, onStop,
   };
   const uploading = draft.attachments.some((a) => a.status === "uploading");
   const failed = draft.attachments.some((a) => a.status === "error");
-  const ownPayload = [draft.quote ? quoteText(draft.quote) : "", draft.text.trim(), ...draft.attachments.filter((a) => a.status === "ready").map((a) => a.kind === "image" ? attachmentMarker(a.path) : fileAttachmentMarker(a.path))].filter(Boolean).join("\n\n");
-  const hasBoardContext=!!boardView&&!!formatBoardContext(boardView,task.id);
+  const readyAttachments = draft.attachments.filter(a => a.status === "ready");
+  const ownPayload = [draft.quote ? quoteText(draft.quote) : "", draft.text.trim(), readyAttachments.length ? "请先读取以下附件原件，再处理本条消息。" : "", ...readyAttachments.map((a) => a.kind === "image" ? attachmentMarker(a.path) : fileAttachmentMarker(a.path))].filter(Boolean).join("\n\n");
   const isClear=draft.text.trim()==='/clear'&&!draft.attachments.length&&!draft.quote;
-  const currentSignature=JSON.stringify({payload:ownPayload,ids:sources.map(source=>source.id),...(!includeBoard||boardView?.autoContext===false?{withoutBoardContext:true}:{})});
+  const currentSignature=JSON.stringify({payload:ownPayload,ids:sources.map(source=>source.id),...(boardView?.autoContext===false?{withoutBoardContext:true}:{})});
   const pendingFork=sources.length&&draft.forkRequest?.signature===currentSignature?draft.forkRequest:null;
-  const payload=pendingFork?pendingFork.payload??ownPayload:ownPayload&&!isClear&&includeBoard?appendBoardContext(ownPayload,boardView,task.id):ownPayload;
+  const payload=pendingFork?pendingFork.payload??ownPayload:ownPayload&&!isClear?appendBoardContext(ownPayload,boardView,task.id):ownPayload;
   const tooLong = payload.length > MAX_MESSAGE_CHARS;
   const canSend = !!payload && !uploading && !failed && !tooLong && !locked;
   const clear = () => {
@@ -177,23 +207,23 @@ export function Composer({ task, agentLabel, disabled, running, onSend, onStop,
     let submittedDraft = draftRef.current;
     let requestId = "";
     const currentView=readBoardState(task.id);
-    let submittedPayload=includeBoard?appendBoardContext(ownPayload,currentView,task.id):ownPayload;
+    let submittedPayload=appendBoardContext(ownPayload,currentView,task.id);
     if (sources.length) {
-      const signature = JSON.stringify({ payload:ownPayload, ids: sources.map((s) => s.id), ...(!includeBoard||currentView?.autoContext===false?{withoutBoardContext:true}:{}) });
+      const signature = JSON.stringify({ payload:ownPayload, ids: sources.map((s) => s.id), ...(currentView?.autoContext===false?{withoutBoardContext:true}:{}) });
       const previous=submittedDraft.forkRequest?.signature===signature?submittedDraft.forkRequest:null;
       requestId=previous?.id??clientId();
       // Once dispatched, retries must keep the exact payload as well as the id.
       // A passive page/file change is not a new user request or a new branch.
       if(previous)submittedPayload=previous.payload??ownPayload;
-      if(submittedPayload.length>MAX_MESSAGE_CHARS){setError("消息和看板背景合计超过长度限制，请精简消息或取消本次背景。");return;}
+      if(submittedPayload.length>MAX_MESSAGE_CHARS){setError("消息和看板背景合计超过长度限制，请精简消息内容后重试。");return;}
       update((d) => ({ ...d, forkRequest: { id: requestId, signature, payload:submittedPayload } }));
       submittedDraft = draftRef.current;
     }
-    if(submittedPayload.length>MAX_MESSAGE_CHARS){setError("消息和看板背景合计超过长度限制，请精简消息或取消本次背景。");return;}
+    if(submittedPayload.length>MAX_MESSAGE_CHARS){setError("消息和看板背景合计超过长度限制，请精简消息内容后重试。");return;}
     sendingRef.current = true; setTaskSending(task.id, true); setSending(true); setError("");
     try {
       if (await (sources.length ? onFork(submittedPayload, sources.map((s) => s.id), requestId) : onSend(submittedPayload))) {
-        if (mounted.current) {update(current=>acknowledgeDraft(current,submittedDraft));setIncludeBoard(true);}
+        if (mounted.current) {update(current=>acknowledgeDraft(current,submittedDraft));}
         else writeDraft(task.id,acknowledgeDraft(readDraft(task.id),submittedDraft));
       }
       else if (mounted.current) setError("发送失败，草稿已保留，请重试。");
@@ -217,34 +247,24 @@ export function Composer({ task, agentLabel, disabled, running, onSend, onStop,
       </div>}
 
       {slash && !running && !locked && "/clear".startsWith(draft.text.trim()) && <div className="slash"><button className="slash-item" onClick={clear}><span className="cmd">/clear</span><span className="cd">保存摘要 · 开启新上下文</span></button></div>}
+      {queued}
       <div className={`comp-box${dragging ? " dropping" : ""}`}
         onDragEnter={(e) => { if (hasFileDrag(e)) { e.preventDefault(); if (!locked) { dragDepth.current++; setDragging(true); } } }}
         onDragOver={(e) => { if (hasFileDrag(e)) e.preventDefault(); }}
         onDragLeave={() => { if (dragDepth.current > 0 && --dragDepth.current === 0) setDragging(false); }}
         onDrop={(e) => { if (!hasFileDrag(e)) return; e.preventDefault(); dragDepth.current = 0; setDragging(false); addFiles(Array.from(e.dataTransfer.files)); }}>
         {sources.length > 0 && <div className="fork-sources">{sources.map((source) => <span key={source.id}>{Icon.git()} 从 {source.title} 派生<button disabled={locked} aria-label={`移除来源 ${source.title}`} onClick={() => update((d) => ({ ...d, sources: d.sources?.filter((s) => s.id !== source.id), forkRequest: undefined }))}>{Icon.x()}</button></span>)}</div>}
-        {hasBoardContext&&<div className="comp-board-context" style={{display:'flex',alignItems:'center',gap:8,padding:'8px 14px',fontSize:12,color:'var(--muted)'}}>
-          <label style={{display:'flex',alignItems:'center',gap:6,cursor:'pointer'}} title="发送时自动附带当前文件、打开页签和最近访问记录；不会读取文件正文。">
-            <input type="checkbox" checked={includeBoard} disabled={locked} onChange={event=>setIncludeBoard(event.target.checked)}/>看板背景
-          </label>
-          <details style={{minWidth:0,flex:1}}>
-            <summary style={{cursor:'pointer',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{boardView?.current?.path??boardView?.file??(boardView?.browser?'浏览器页面':'无当前文件')} · {boardView?.opened?.length??boardView?.files.length??0} 个打开 · {boardView?.history?.length??0} 个最近访问{!includeBoard?' · 本次不带':''}</summary>
-            <div style={{maxHeight:140,overflow:'auto',overflowWrap:'anywhere',paddingTop:6}}>
-              <div>{boardView?.visible===false?'看板已收起，以下为上次浏览状态。':'以下浏览背景会随消息提供给 AI。'}</div>
-              <div>打开页签：{(boardView?.opened??[]).map(file=>`${file.path}${file.sourceId&&file.sourceId!==task.id?`（来源：${tasks.find(source=>source.id===file.sourceId)?.title??file.sourceId}）`:''}`).join('、')||'无'}</div>
-              <div>最近访问：{(boardView?.history??[]).map(file=>`${file.path}${file.sourceId&&file.sourceId!==task.id?`（来源：${tasks.find(source=>source.id===file.sourceId)?.title??file.sourceId}）`:''}`).join('、')||'无'}</div>
-            </div>
-          </details>
-        </div>}
-        {draft.quote && <div className="comp-quote"><div><strong>引用 {draft.quote.author}</strong><p>{draft.quote.text}</p></div><button className="icon-btn" disabled={locked} aria-label="移除引用" onClick={() => update((d) => ({ ...d, quote: null }))}>{Icon.x()}</button></div>}
-        {draft.attachments.length > 0 && <div className="attach-row">{draft.attachments.map((a) => <div key={a.key} className={`attach-chip ${a.kind} ${a.status}`} title={a.error || a.name}>
+        {draft.quote && <ReferenceCard key={draft.quote.id} className="comp-quote" title={draft.quote.author} text={draft.quote.text} disabled={locked} removeLabel="移除引用" onRemove={() => { update((d) => ({ ...d, quote: null })); ref.current?.focus({ preventScroll: true }); }} renderContent={draft.quote.sourceTaskId ? text => <FileLinkContext.Provider value={{ taskId: draft.quote!.sourceTaskId! }}><Markdown>{text}</Markdown></FileLinkContext.Provider> : undefined} />}
+        {draft.attachments.some(a => a.status !== "ready") && <div className="composer-upload-list">{draft.attachments.filter(a => a.status !== "ready").map(a => <UploadProgress key={a.key} name={a.name}
+          status={a.status === "error" ? "error" : a.phase ?? "queued"} bytes={a.bytes} total={a.size} disabled={locked}
+          error={`${a.error || "上传失败，请重试。"}${uploadFiles.current.has(a.key) || a.error?.includes("重新选择文件") ? "" : " 请重新选择文件。"}`}
+          onCancel={() => removeAtt(a.key)} onRemove={() => removeAtt(a.key)} onRetry={uploadFiles.current.has(a.key) ? () => startUpload(a.key, uploadFiles.current.get(a.key)!) : undefined} />)}</div>}
+        {readyAttachments.length > 0 && <div className="attach-row">{readyAttachments.map((a) => <div key={a.key} className={`attach-chip ${a.kind} ${a.status}`} title={a.name}>
           {a.kind === "image" && a.preview ? <img src={a.preview} alt={a.name} /> : <span className="attach-file">{Icon.clip()} {a.name}</span>}
-          {a.status === "uploading" && <span className="attach-badge">上传中…</span>}
-          {a.status === "error" && <span className="attach-badge err">{a.error || "上传失败"}</span>}
           <button className="attach-x" disabled={locked} aria-label={`移除 ${a.name}`} onClick={() => removeAtt(a.key)}>×</button>
         </div>)}</div>}
         <div className="comp-area"><textarea ref={ref} rows={2} value={draft.text} disabled={locked} aria-label="消息输入框" aria-expanded={mentionOpen} aria-controls={mentionOpen ? `mentions-${task.id}` : undefined} aria-activedescendant={mentionOpen && candidates.length ? `mention-${candidates[Math.min(mentionIndex, candidates.length - 1)].id}` : undefined}
-          placeholder={configBusy ? "正在保存设置…" : disabled ? "启动会话后即可回复…" : sources.length ? "描述这些新分支要继续完成的工作…" : running ? "补充下一步，当前轮次结束后发送…" : `和 ${agentLabel} 一起工作，@ 派生任务分支`}
+          placeholder={configBusy ? "正在保存设置…" : disabled ? "启动会话后即可回复…" : sources.length ? "描述这些新分支要继续完成的工作…" : running ? "补充下一步，当前轮次结束后发送…" : `和 ${agentLabel} 一起工作`}
           onCompositionStart={() => { composing.current = true; }} onCompositionEnd={() => { composing.current = false; }}
           onChange={(e) => { const text = e.target.value; update((d) => ({ ...d, text })); setSlash(text.trim().startsWith("/")); setCaret(e.target.selectionStart); setMentionClosed(false); setMentionIndex(0); }}
           onSelect={(e) => setCaret(e.currentTarget.selectionStart)}
@@ -265,22 +285,29 @@ export function Composer({ task, agentLabel, disabled, running, onSend, onStop,
             if (text.length > PASTE_ATTACH_THRESHOLD) { e.preventDefault(); addFiles([new File([text], "pasted-text.txt", { type: "text/plain" })]); }
           }} /></div>
         <div className="comp-toolbar">
-          <input ref={fileRef} type="file" accept="image/png,image/jpeg,image/gif,image/webp,text/plain,.txt,.md,.log,.json,.csv,.yaml,.yml,.ts,.tsx,.js,.jsx,.py" multiple hidden onChange={(e) => { addFiles(Array.from(e.target.files ?? [])); e.target.value = ""; }} />
-          <div className="comp-control"><button className="comp-add" disabled={locked} title="添加附件或派生分支" aria-label="添加内容" aria-expanded={addOpen} onClick={(e) => { e.stopPropagation(); setAddOpen(!addOpen); }}>{Icon.plus()}</button>
-            {addOpen && <Popover onClose={() => setAddOpen(false)}>
-              <button className="pop-item" onClick={() => { setAddOpen(false); fileRef.current?.click(); }}>{Icon.clip()} 添加图片或文本文件</button>
-              <button className="pop-item" onClick={openMention}>{Icon.git()} 从已完成任务派生 <span>@</span></button>
+          <input ref={fileRef} type="file" accept={FILE_UPLOAD_ACCEPT} multiple hidden onChange={(e) => { addFiles(Array.from(e.target.files ?? [])); e.target.value = ""; }} />
+          <div className="comp-control"><button className={`comp-add${addOpen ? " on" : ""}`} disabled={locked} title="附件、派生任务与新上下文" aria-label="添加内容" aria-haspopup="dialog" aria-expanded={addOpen} onClick={(e) => { e.stopPropagation(); setAddOpen(!addOpen); }}>{Icon.plus()}</button>
+            {addOpen && <Popover className="composer-popover composer-add-popover" ariaLabel="添加内容" placement="top" align="start" onClose={() => setAddOpen(false)}>
+              <div className="composer-menu-heading">添加内容</div>
+              <button className="pop-item composer-option" disabled={locked} onClick={() => { setAddOpen(false); fileRef.current?.click(); }}>
+                <span className="composer-option-icon">{Icon.clip()}</span><span className="composer-option-copy"><span className="composer-option-title">添加附件</span><span className="composer-option-sub">HTML、Markdown 最多 100 MiB，其他文件最多 10 MiB</span></span>
+              </button>
+              <button className="pop-item composer-option" disabled={locked} onClick={openMention}>
+                <span className="composer-option-icon">{Icon.git()}</span><span className="composer-option-copy"><span className="composer-option-title">从已完成任务派生</span><span className="composer-option-sub">带上已完成的任务，在新分支继续工作</span></span><span className="composer-option-trailing composer-menu-key">@</span>
+              </button>
+              <button className="pop-item composer-option" disabled={running || locked || task.started !== 1} onClick={() => { setAddOpen(false); clear(); }}>
+                <span className="composer-option-icon">{Icon.clear()}</span><span className="composer-option-copy"><span className="composer-option-title">新上下文</span><span className="composer-option-sub">{running ? "本轮结束后可用" : "保存摘要，开启新的上下文窗口"}</span></span>
+              </button>
             </Popover>}
           </div>
           <RunControls {...controls} disabled={controls.disabled || sending} />
           <div className="send-group">
-            {(!running || !!payload) && <button className={`send${running ? " queue" : ""}`} disabled={!canSend} aria-label={sources.length ? `派生 ${sources.length} 个分支` : running ? "排队发送" : "发送消息"} title={sending ? "发送中…" : running ? "本轮结束后发送" : "发送消息"} onClick={() => void submit()}>{sending ? <span className="spinner" /> : Icon.send()}</button>}
-            {running && <button className="send stop" disabled={stopping} aria-label="停止当前轮次" title={stopping ? "正在停止…" : "停止当前轮次"} onClick={() => void stop()}>{stopping ? <span className="spinner" /> : Icon.stop()}</button>}
+            {(!running || !!payload) && <button className={`send${running ? " queue" : ""}`} disabled={!canSend} aria-busy={sending} aria-label={sources.length ? `派生 ${sources.length} 个分支` : running ? "排队发送" : "发送消息"} title={sending ? "发送中…" : running ? "本轮结束后发送" : "发送消息（Enter）"} onClick={() => void submit()}>{sending ? <span className="spinner" /> : Icon.send()}</button>}
+            {running && <button className="send stop" disabled={stopping} aria-busy={stopping} aria-label="停止当前轮次" title={stopping ? "正在停止…" : "停止当前轮次"} onClick={() => void stop()}>{stopping ? <span className="spinner" /> : Icon.stop()}</button>}
           </div>
         </div>
       </div>
-      <div className="comp-caption"><span>{sources.length ? `发送后创建 ${sources.length} 条独立分支并开始执行` : running ? "运行中 · 补充消息将排队" : "Enter 发送 · Shift + Enter 换行"}</span><button disabled={running || locked || task.started !== 1} onClick={clear} title="保存摘要并开启新的上下文窗口">{Icon.clear()} 新上下文</button></div>
-      {(error || failed || tooLong) && <div className="comp-error" role="alert">{error || (tooLong ? "消息过长，请将部分内容作为文本附件添加。" : "请移除上传失败的附件后重新添加，再发送。")}</div>}
+      {(error || failed || tooLong) && <div className="comp-error" role="alert">{error || (tooLong ? "消息过长，请将部分内容作为文本附件添加。" : "请重试或移除上传失败的附件，再发送。")}</div>}
       {uploading && <div className="comp-upload-status" role="status">正在上传附件，完成后可发送…</div>}
     </div>
   </div>;

package/src/operator/node/Orchestrator.tsx

@@ -487,7 +487,7 @@ export default function Orchestrator({ board }: { board?: import("./boardInterac
           than inside the task that happened to hit it first. */}
       <AgentAuthBanner broken={o.brokenAgents} onReconnect={() => openSettings("agents")} />
 
-      <div className={`body${isMobile ? " mobile" : ""}`}>
+      <div className={`body${isMobile ? " mobile" : ""}`} data-chat-sidebars={!isMobile&&(!layout.projCollapsed||project&&!layout.taskCollapsed)?"open":"closed"}>
         {o.bootError ? (
           // The very first fetch failed — nothing to render behind this, so a
           // centered retry beats an empty workspace that looks "hung".