@spzxg/cli-ui 0.6.6 → 0.6.8

package/src/operator/node/Composer.tsx

@@ -1,26 +1,35 @@
 "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, fileUpload = true }: {
   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;
+  fileUpload?: boolean;
 }) {
   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 +49,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 +61,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 +85,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 +116,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 (!fileUpload || !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;
+    if (locked || !fileUpload) 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 +189,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 +208,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 +248,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); } } }}
+        onDragEnter={(e) => { if (hasFileDrag(e)) { e.preventDefault(); if (fileUpload && !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={fileUpload && 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)}
@@ -262,25 +283,32 @@ export function Composer({ task, agentLabel, disabled, running, onSend, onStop,
             const files = Array.from(e.clipboardData.files);
             if (files.length) { e.preventDefault(); addFiles(files); return; }
             const text = e.clipboardData.getData("text/plain");
-            if (text.length > PASTE_ATTACH_THRESHOLD) { e.preventDefault(); addFiles([new File([text], "pasted-text.txt", { type: "text/plain" })]); }
+            if (fileUpload && 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>
+          {fileUpload && <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={fileUpload ? "附件、派生任务与新上下文" : "派生任务与新上下文"} 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>
+              {fileUpload && <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 || sending) && <button type="button" className={`send${running ? " queue" : ""}`} disabled={!canSend} aria-busy={sending} aria-label={sending ? "正在发送" : sources.length ? `派生 ${sources.length} 个分支` : running ? "排队发送" : "发送消息"} title={sending ? "发送中…" : running ? "本轮结束后发送" : "发送消息（Enter）"} onClick={() => void submit()}>{sending ? <span className="spinner" /> : Icon.send()}</button>}
+            {running && <button type="button" className="send stop" disabled={stopping} aria-busy={stopping} aria-label={stopping ? "正在停止" : "停止当前轮次"} 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".

package/src/operator/node/SessionRail.tsx

@@ -1,6 +1,9 @@
 "use client";
+import { subscribeWorkspaceFiles } from "../../board/fileWatch";
+import { retainFileScope } from "../../board/fileScope";
 
 import { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { Icon } from "./icons";
 import TaskChanges, { type ResolveResult } from "./TaskChanges";
 import { BrowserPane } from "./BrowserPane";
@@ -13,17 +16,18 @@ import { clientId } from "../../core/id";
 import { useBoardState, readBoardState, visitBoardFile, reportBoardState, releaseBoardState, activateBoardState } from "./boardState";
 import type { BoardView } from "../../board/workspace";
 import { useBoardPanels } from "../../board/panels";
-import { PanelControls, PanelTab } from "../../board/PanelControls";
+import { PanelControls, PanelTab, type InlineBoardLayout } from "../../board/PanelControls";
 import { FilesPane } from "../../board/FilesPane";
 import { FileViewer } from "../../board/FileViewer";
+import { useBoardUpload } from "../../board/useBoardUpload";
 import { getOperatorBoardBackend } from "./boardBackend";
 import { useOperatorContextEvents, useOperatorFileWatch } from "./boardEvents";
 import { OperatorBoardContext, registerOperatorBoard, OperatorBoardQuoteContext } from "./boardInteraction";
 import type { Quote } from "./composerDraft";
 import type { OperatorBoardOptions, OperatorBoardRequest } from "./boardInteraction";
-type OpenFile = { reloadKey?:number; taskId: string; path: string; version: number; mtime?: number; size?: number };
+type OpenFile = { name?: string; reloadKey?:number; taskId: string; path: string; version: number; mtime?: number; size?: number };
 const fileKey = (file: Pick<OpenFile,"taskId"|"path">) => `file:${file.taskId}:${file.path}`;
-const LABEL:Record<string,string>={files:"文件",changes:"改动",context:"上下文",preview:"预览",browser:"浏览器"};
+const LABEL:Record<string,string>={files:"工作区",changes:"改动",context:"上下文",preview:"预览",browser:"浏览器"};
 type Session = { n: number; summaryBefore: string | null };
 
 // The live URL a project's dev server is reachable at when no registered
@@ -119,15 +123,21 @@ function ContextPane({ task, sessions, running, onClear }: { task: TaskRow; sess
 }
 
 export function SessionRail({ project, task, sessions, running, onResolveWithAI, onMerged, onPrCreated, onClear, onCollapse, onSwitchToChat,
-  tabs, availableTabs, defaultTab, autoContext, watchFiles = true, fileWatchIntervalMs, onFilesChange, onFilesWatch, onBoardContextChange, onEvent, openRequest, onRequestHandled, activity, onQuote }: OperatorBoardOptions & {
+  tabs, availableTabs, defaultTab, autoContext, watchFiles = true, fileWatchIntervalMs, onFilesChange, onFilesWatch, onBoardContextChange, onEvent, openRequest, onRequestHandled, onQuote, inlineLayout, onExpand, visible = true }: OperatorBoardOptions & {
   project: ProjectRow; task: TaskRow; sessions: Session[]; running: boolean;
   onResolveWithAI: (taskId: string) => Promise<ResolveResult>; onMerged?: () => void;
   onPrCreated?: (url: string) => void; onClear: () => void; onCollapse: () => void; onSwitchToChat: () => void;
   openRequest?: OperatorBoardRequest | null; onRequestHandled?: (sequence:number)=>void; activity?: string; onQuote?: (quote:Quote)=>void;
+  inlineLayout?: InlineBoardLayout;
+  onExpand?: () => void;
+  visible?: boolean;
 }) {
   const contextQuote=useContext(OperatorBoardQuoteContext);
   const parentBoard=useContext(OperatorBoardContext);
-  const quote=onQuote??contextQuote;
+  const inlineRef=useRef(inlineLayout);inlineRef.current=inlineLayout;
+  const sendQuote=onQuote??contextQuote;
+  const quote=sendQuote ? (value:Quote)=>{sendQuote(value);inlineLayout?.onChat();} : undefined;
+  const contentVisible=visible&&(!inlineLayout||inlineLayout.active);
   const features=clientFeatures();
   const available=(availableTabs ?? ['files','changes','context','browser','preview']).filter(id=>id in LABEL).filter(id=>id!=='browser'||features.browser).filter(id=>id!=='preview'||features.livePreview);
   const defaults=tabs ?? ['files',...(features.browser?['browser']:[])];
@@ -167,13 +177,37 @@ export function SessionRail({ project, task, sessions, running, onResolveWithAI,
   const fileTabs=available.includes('files')?files.map(fileKey):[];
   const shown=[...panels.open,...fileTabs];
   const active=shown.includes(tab)?tab:shown[0]??'';
+  const [toolbarHost, setToolbarHost] = useState<HTMLSpanElement | null>(null);
   const tabsRef=useRef<HTMLDivElement>(null);
   useLayoutEffect(()=>{
     const reveal=()=>{const box=tabsRef.current,item=box?.querySelector<HTMLElement>('.rail-tab.on');if(!box||!item)return;
       const outer=box.getBoundingClientRect(),inner=item.getBoundingClientRect();if(inner.left<outer.left)box.scrollLeft+=inner.left-outer.left;else if(inner.right>outer.right)box.scrollLeft+=inner.right-outer.right;};
     reveal();if(typeof ResizeObserver==='undefined')return;const observer=new ResizeObserver(reveal);if(tabsRef.current)observer.observe(tabsRef.current);return()=>observer.disconnect();
-  },[active,shown.length]);
+  },[active,shown.length,inlineLayout?.active,inlineLayout?.tabsHost]);
   const file=files.find(f=>fileKey(f)===active);
+  // Every opened tab participates, including a file from a source task. Only
+  // already-read preview ranges are synchronized; closed files are not prefetched.
+  const openedScope = JSON.stringify(available.includes('files') ? files.map(({ taskId, path }) => ({ taskId, path })) : []);
+  const directorySource = active === 'files' ? folderTask : task.id;
+  useEffect(() => {
+    if (!watchFiles || !contentVisible) return;
+    const grouped = new Map<string, string[]>();
+    for (const file of JSON.parse(openedScope) as Array<{ taskId: string; path: string }>) {
+      grouped.set(file.taskId, [...(grouped.get(file.taskId) ?? []), file.path]);
+    }
+    if (!grouped.has(directorySource)) grouped.set(directorySource, []);
+    const stops: Array<() => void> = [];
+    for (const [source, paths] of grouped) {
+      stops.push(retainFileScope(backend, source, { paths, dirs: [] }));
+      if (source !== task.id) stops.push(subscribeWorkspaceFiles(backend, source, event => {
+        setTick(value => value + 1);
+        const changed = new Set(event.changes.map(change => change.path));
+        setFiles(previous => previous.map(file => file.taskId === source && changed.has(file.path)
+          ? { ...file, version: file.version + 1, reloadKey: (file.reloadKey ?? 0) + 1 } : file));
+      }));
+    }
+    return () => stops.forEach(stop => stop());
+  }, [backend, task.id, watchFiles, contentVisible, openedScope, directorySource]);
   const current=useRef(active);current.current=active;
   const openFile=(taskId:string,path:string)=>{
     if(!available.includes('files'))return;
@@ -187,14 +221,17 @@ export function SessionRail({ project, task, sessions, running, onResolveWithAI,
       const next=[...previous,{taskId,path:clean,version:0}];
       if(next.length>8){const index=next.findIndex(f=>fileKey(f)!==current.current&&fileKey(f)!==id);next.splice(index<0?0:index,1);}
       return next;
-    });setTab(id);
+    });setTab(id);inlineRef.current?.onActivate();
   };
+  const canUpload=available.includes('files')&&!!(task.started||task.worktree_path);
+  const uploader=useMemo(()=>canUpload&&backend.uploadFile ? (file:File,options:Parameters<NonNullable<typeof backend.uploadFile>>[2])=>backend.uploadFile!(task.id,file,options) : undefined,[backend,task.id,canUpload]);
+  const upload=useBoardUpload(task.id,uploader,receipt=>{if(receipt.path)openFile(task.id,receipt.path);});
   useEffect(()=>{
     if(parentBoard)return;
     return registerOperatorBoard(target=>{
       if(target.taskId!==task.id)return false;
       if(target.kind==='file'){if(!available.includes('files'))return false;openFile(target.taskId,target.path);return true;}
-      if(!panels.show('browser'))return false;setTab('browser');return true;
+      if(!panels.show('browser'))return false;setTab('browser');inlineRef.current?.onActivate();return true;
     });
   },[task.id,parentBoard,available.join(','),panels.show]);
   const seen=useRef<number|null>(null);
@@ -203,58 +240,60 @@ export function SessionRail({ project, task, sessions, running, onResolveWithAI,
     seen.current=openRequest.sequence;
     const target=openRequest.target;
     if(target.kind==='file')openFile(target.taskId,target.path);
-    else if(target.taskId===task.id&&panels.show('browser'))setTab('browser');
+    else if(target.taskId===task.id&&panels.show('browser')){setTab('browser');inlineLayout?.onActivate();}
     onRequestHandled?.(openRequest.sequence);
   },[openRequest,restored]); // Requests originate in the owning session, including when this panel was collapsed.
-  const lastRefresh=useRef(0);
-  useEffect(()=>{const timer=setTimeout(()=>{lastRefresh.current=Date.now();setTick(n=>n+1);},Math.max(0,700-(Date.now()-lastRefresh.current)));return()=>clearTimeout(timer);},[activity,task.updated_at,running]);
-  useEffect(()=>{if(!running)return;const timer=setInterval(()=>{if(document.visibilityState==='visible')setTick(n=>n+1);},15000);return()=>clearInterval(timer);},[running]);
   useEffect(()=>{
     if(!file)return;let alive=true;
     void backend.stat(file.taskId,file.path).then(stat=>{
       if(!alive||stat.type!=='file')return;
-      setFiles(previous=>previous.map(f=>fileKey(f)===fileKey(file)&&f.mtime!==stat.mtime?{...f,mtime:stat.mtime,size:stat.size,version:f.mtime===undefined?f.version:f.version+1}:f));
+      setFiles(previous=>previous.map(f=>fileKey(f)===fileKey(file)&&(f.mtime!==stat.mtime||f.name!==stat.name)?{...f,name:stat.name,mtime:stat.mtime,size:stat.size,version:f.mtime===undefined?f.version:f.version+1}:f));
     },()=>{if(alive)setFiles(previous=>previous.map(f=>fileKey(f)===fileKey(file)&&f.mtime!==-1?{...f,mtime:-1,version:f.version+1}:f));});
     return()=>{alive=false;};
   },[backend,active,tick]);
   const boardView:BoardView={tab:active,dir,file:file?.path??null,files:files.map(file=>file.path),
     current:file?{path:file.path,sourceId:file.taskId}:null,opened:files.map(file=>({path:file.path,sourceId:file.taskId})),
-    history:boardState?.history??[],browser:active==='browser'?browserPage:null,visible:true,autoContext:autoContext!==false};
+    history:boardState?.history??[],browser:active==='browser'?browserPage:null,visible:contentVisible,autoContext:autoContext!==false};
   const viewSignature=JSON.stringify(boardView);
-  useEffect(()=>{if(restored)reportBoardState(task.id,owner,boardView);},[task.id,owner,restored,viewSignature]); // Metadata changes only; file refresh counters do not claim a new view.
+  useEffect(()=>{if(restored)reportBoardState(task.id,owner,boardView,directorySource);},[task.id,owner,restored,viewSignature,directorySource]); // Metadata changes only; file refresh counters do not claim a new view.
   useEffect(()=>()=>releaseBoardState(task.id,owner),[task.id,owner]);
-  const label=(id:string)=>LABEL[id]??files.find(f=>fileKey(f)===id)?.path.split('/').pop()??id;
+  const label=(id:string)=>LABEL[id]??files.find(f=>fileKey(f)===id)?.name??files.find(f=>fileKey(f)===id)?.path.split('/').pop()??id;
   const close=(id:string)=>{
     if(id.startsWith('file:'))setFiles(previous=>previous.filter(f=>fileKey(f)!==id));else panels.close(id);
-    if(active===id)setTab(shown.find(item=>item!==id)??'');
+    if(active===id){const next=shown.find(item=>item!==id)??'';setTab(next);if(!next)inlineLayout?.onChat();}
   };
-  return <aside className="sess-rail" aria-label="任务看板" onPointerDown={()=>activateBoardState(task.id,owner)} onClickCapture={()=>activateBoardState(task.id,owner)} onFocusCapture={()=>activateBoardState(task.id,owner)}>
-    <div className="rail-tabs">
-      <div className="operator-file-tabs" ref={tabsRef} role="tablist" aria-label="看板模块">
-        {shown.map(id=><PanelTab key={id} id={id} label={label(id)} active={active===id} onSelect={()=>{const opened=files.find(file=>fileKey(file)===id);if(opened)visitBoardFile(task.id,{path:opened.path,sourceId:opened.taskId});setTab(id);}} onClose={()=>close(id)}/>)}
+  const railTabs=<div className="rail-tabs">
+      <div className="operator-file-tabs" ref={tabsRef} role={inlineLayout?undefined:"tablist"} aria-label={inlineLayout?undefined:"看板模块"}>
+        {shown.map(id=><PanelTab key={id} id={id} label={label(id)} title={files.find(file=>fileKey(file)===id)?.path} active={active===id&&(!inlineLayout||inlineLayout.active)} onSelect={()=>{const opened=files.find(file=>fileKey(file)===id);if(opened)visitBoardFile(task.id,{path:opened.path,sourceId:opened.taskId});setTab(id);inlineLayout?.onActivate();}} onClose={()=>close(id)}/>)}
       </div>
-      <PanelControls available={available} open={panels.open} label={label} onShow={id=>{panels.show(id);setTab(id);}} onClose={close}/>
-      <button className="rail-collapse" title="刷新看板" aria-label="刷新看板" onClick={()=>setTick(n=>n+1)}>{Icon.restore()}</button>
-      <button className="rail-collapse" onClick={onCollapse} title="隐藏面板" aria-label="隐藏看板">{Icon.chevRight()}</button>
-    </div>
+      <PanelControls toolbarRef={setToolbarHost} available={available} open={panels.open} label={label} onShow={id=>{panels.show(id);setTab(id);inlineLayout?.onActivate();}} onClose={close}
+        upload={available.includes('files')?{onChoose:upload.choose,disabled:upload.busy||!uploader,hint:canUpload?undefined:'启动会话并创建工作区后可上传文件'}:undefined}/>
+      {inlineLayout ? onExpand&&<button className="rail-collapse" onClick={onExpand} title="展开右侧看板" aria-label="展开看板">{Icon.chevRight()}</button> : <button className="rail-collapse" onClick={onCollapse} title="隐藏面板" aria-label="隐藏看板">{Icon.chevRight()}</button>}
+    </div>;
+  return <aside className={`sess-rail${inlineLayout?' sess-rail-inline':''}`} aria-label="任务看板" hidden={!contentVisible} style={!contentVisible?{display:'none'}:undefined} onPointerDown={()=>activateBoardState(task.id,owner)} onClickCapture={()=>activateBoardState(task.id,owner)} onFocusCapture={()=>activateBoardState(task.id,owner)}>
+    {inlineLayout ? inlineLayout.tabsHost&&createPortal(railTabs,inlineLayout.tabsHost) : railTabs}
+    {upload.input}{upload.progress}
     <div className="rail-scroll">
       {!active&&<div className="cli-board-empty">看板模块已全部关闭。通过右上角“管理看板模块”重新打开。</div>}
       {active==='changes'&&<>
         {task.fork_commit&&<div className="fork-merge-note">基于「{task.fork_source_title}」派生。合并到 {project.branch} 时，也会包含来源分支尚未合并的改动。</div>}
         <TaskChanges taskId={task.id} running={running} prUrl={task.pr_url} onMerged={onMerged} onPrCreated={onPrCreated} onResolveWithAI={async id=>{const result=await onResolveWithAI(id);if(result.ok&&!result.merged)onSwitchToChat();return result;}}/>
       </>}
-      {active==='files'&&<FilesPane backend={backend} jobId={folderTask} dir={dir} onDir={setDir} onOpen={entry=>openFile(folderTask,entry.path)} refreshKey={tick}/>}
-      {file&&<>
+      {contentVisible&&active==='files'&&<>
+        {folderTask!==task.id&&<div className="fork-merge-note cli-source-workspace"><span>正在浏览来源任务的工作区。</span><button className="btn btn-ghost btn-sm" onClick={()=>{setFolderTask(task.id);setDir('');}}>返回当前工作区</button></div>}
+        <FilesPane toolbarHost={toolbarHost} backend={backend} jobId={folderTask} dir={dir} onDir={setDir} onOpen={entry=>openFile(folderTask,entry.path)} refreshKey={tick}/>
+      </>}
+      {contentVisible&&file&&<>
         {file.taskId!==task.id&&<div className="fork-merge-note">正在查看来源任务的文件，不会切换当前执行分支。</div>}
-        <FileViewer key={fileKey(file)} backend={backend} jobId={file.taskId} path={file.path} size={file.size} mtime={file.mtime} version={file.version} reloadKey={file.reloadKey}
+        <FileViewer toolbarHost={toolbarHost} key={fileKey(file)} backend={backend} jobId={file.taskId} path={file.path} displayName={file.name} size={file.size} mtime={file.mtime} version={file.version} reloadKey={file.reloadKey}
           onOpenPath={path=>openFile(file.taskId,path)}
-          actions={quote?[{label:'引用到对话',onClick:()=>quote({id:`file:${file.taskId}:${file.path}`,author:`文件 ${file.path}`,text:`${file.taskId===task.id?'当前工作区':`来源任务 ${file.taskId} 的工作区`}文件 ${file.path}`})}]:[]}
-          onQuoteText={quote?text=>quote({id:`selection:${file.taskId}:${file.path}`,author:`${file.taskId===task.id?"当前工作区":`来源任务 ${file.taskId} 的工作区`}文件 ${file.path}`,text}):undefined}
-          lead={<button className="cli-fv-back" title="返回文件列表" onClick={()=>{setFolderTask(file.taskId);setDir(file.path.includes('/')?file.path.slice(0,file.path.lastIndexOf('/')):'');panels.show('files');setTab('files');}}>‹</button>}/>
+          actions={quote?[{label:'引用到对话',onClick:()=>quote({id:`file:${file.taskId}:${file.path}`,sourceTaskId:file.taskId,author:`文件 ${file.path}`,text:`${file.taskId===task.id?'当前工作区':`来源任务 ${file.taskId} 的工作区`}文件 ${file.path}`})}]:[]}
+          onQuoteText={quote?(text, context)=>quote({id:`selection:${file.taskId}:${file.path}`,sourceTaskId:file.taskId,author:`${file.taskId===task.id?"当前工作区":`来源任务 ${file.taskId} 的工作区`}文件 ${file.path}`,text:context?`文件修订：${context.revision}\n${text}`:text}):undefined}
+          onBack={()=>{setFolderTask(file.taskId);setDir(file.path.includes('/')?file.path.slice(0,file.path.lastIndexOf('/')):'');panels.show('files');setTab('files');}}/>
       </>}
       {active==='preview'&&features.livePreview&&<PreviewPane project={project}/>}
       {active==='context'&&<ContextPane task={task} sessions={sessions} running={running} onClear={onClear}/>}
-      {active==='browser'&&features.browser&&<BrowserPane key={task.id} taskId={task.id} onPage={setBrowserPage} onQuote={quote?page=>quote({id:`browser:${task.id}`,author:"浏览器页面",text:`${page.title?`${page.title} — `:""}${page.url}`}):undefined} onQuoteText={quote?(text,page)=>quote({id:`browser-selection:${task.id}`,author:`网页 ${page.title||page.url}`,text}):undefined}/>}
+      {active==='browser'&&features.browser&&contentVisible&&<BrowserPane key={task.id} taskId={task.id} onPage={setBrowserPage} onQuote={quote?page=>quote({id:`browser:${task.id}`,sourceTaskId:task.id,author:"浏览器页面",text:`${page.title?`${page.title} — `:""}${page.url}`}):undefined} onQuoteText={quote?(text,page)=>quote({id:`browser-selection:${task.id}`,sourceTaskId:task.id,author:`网页 ${page.title||page.url}`,text}):undefined}/>}
     </div>
   </aside>;
 }