@xgspz/cli-ui 0.0.0-stage → 0.6.15

package/src/operator/node/CommandPalette.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Icon } from "./icons";
+import { jget } from "./api";
+import type { PaletteTaskRow, ProjectRow } from "./types";
+import { StatusDot } from "./shared";
+
+// One executable command surfaced by the palette. Callers pass only the
+// commands that currently make sense (e.g. no "Toggle Terminal" without a
+// project selected), so the palette never renders a dead row.
+export interface PaletteCommand {
+  id: string;
+  label: string;
+  hint?: string; // right-aligned annotation, e.g. what state the toggle lands on
+  keywords?: string; // aliases the fuzzy matcher sees but the row doesn't show
+  icon: React.ReactNode;
+  run: () => void;
+}
+
+// Subsequence fuzzy matcher. Exact-substring hits dominate (earlier = better,
+// word-start better still); otherwise every query char must appear in order,
+// with bonuses for word starts and consecutive runs and a small gap penalty.
+// Returns -Infinity when the query doesn't match at all.
+export function fuzzyScore(query: string, text: string): number {
+  const q = query.toLowerCase().trim();
+  if (!q) return 0;
+  const t = text.toLowerCase();
+  const sub = t.indexOf(q);
+  if (sub >= 0) return 1000 - sub + (sub === 0 || /[\s\-_/·.]/.test(t[sub - 1]) ? 50 : 0);
+  let score = 0;
+  let from = 0;
+  let prev = -2;
+  for (const ch of q) {
+    if (ch === " ") continue; // spaces in the query just separate words
+    const at = t.indexOf(ch, from);
+    if (at < 0) return -Infinity;
+    score += 1;
+    if (at === prev + 1) score += 2; // consecutive run
+    if (at === 0 || /[\s\-_/·.]/.test(t[at - 1])) score += 3; // word start
+    score -= Math.min(10, at - from) * 0.05;
+    prev = at;
+    from = at + 1;
+  }
+  return score;
+}
+
+type Entry =
+  | { kind: "project"; project: ProjectRow }
+  | { kind: "task"; task: PaletteTaskRow }
+  | { kind: "command"; command: PaletteCommand };
+
+const entryKey = (e: Entry) =>
+  e.kind === "project" ? `p:${e.project.id}` : e.kind === "task" ? `t:${e.task.id}` : `c:${e.command.id}`;
+
+// With no query the palette is a launcher (a few recent things + every command);
+// once you type, it's a search (more room for matches per group).
+const EMPTY_LIMITS = { project: 5, task: 6 };
+const QUERY_LIMITS = { project: 6, task: 10 };
+
+// The ⌘K command palette: fuzzy search over projects, sessions (tasks across
+// ALL active projects) and commands, grouped, keyboard-first. The overlay is a
+// centered top sheet over a scrim — Esc or an outside click dismisses, ↑/↓
+// move, ⏎ runs the active row. Every color comes from theme vars, so it works
+// in both themes for free.
+export function CommandPalette({ projects, commands, onPickProject, onPickTask, onClose }: {
+  projects: ProjectRow[];
+  commands: PaletteCommand[];
+  onPickProject: (projectId: string) => void;
+  onPickTask: (projectId: string, taskId: string) => void;
+  onClose: () => void;
+}) {
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const [tasks, setTasks] = useState<PaletteTaskRow[]>([]);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // Sessions across every project are server state (the client only holds the
+  // selected project's tasks) — fetched fresh each open, like NeedsYouMenu.
+  useEffect(() => {
+    let alive = true;
+    jget<{ tasks: PaletteTaskRow[] }>("/api/tasks")
+      .then((d) => { if (alive) setTasks(d.tasks); })
+      .catch(() => {});
+    return () => { alive = false; };
+  }, []);
+
+  const { sections, flat } = useMemo(() => {
+    const trimmed = query.trim();
+    const limits = trimmed ? QUERY_LIMITS : EMPTY_LIMITS;
+    const rank = <T,>(items: T[], text: (i: T) => string, limit: number): T[] => {
+      if (!trimmed) return items.slice(0, limit);
+      return items
+        .map((i) => ({ i, s: fuzzyScore(trimmed, text(i)) }))
+        .filter((x) => x.s > -Infinity)
+        .sort((a, b) => b.s - a.s)
+        .slice(0, limit)
+        .map((x) => x.i);
+    };
+    const groups: { title: string; entries: Entry[] }[] = [
+      { title: "项目", entries: rank(projects, (p) => `${p.name} ${p.sub}`, limits.project).map((project) => ({ kind: "project", project })) },
+      { title: "会话", entries: rank(tasks, (t) => `${t.title} ${t.project_name}`, limits.task).map((task) => ({ kind: "task", task })) },
+      { title: "命令", entries: rank(commands, (c) => `${c.label} ${c.keywords ?? ""}`, commands.length).map((command) => ({ kind: "command", command })) },
+    ];
+    // Flatten in display order so ↑/↓ walk straight through the groups.
+    const flat: Entry[] = groups.flatMap((g) => g.entries);
+    let idx = 0;
+    const sections = groups
+      .filter((g) => g.entries.length > 0)
+      .map((g) => ({ title: g.title, rows: g.entries.map((entry) => ({ entry, idx: idx++ })) }));
+    return { sections, flat };
+  }, [query, projects, tasks, commands]);
+
+  // Typing (or the async session load) reshapes the list — snap the highlight
+  // back to the top / into range rather than leaving it on a stale row.
+  useEffect(() => { setActive(0); }, [query]);
+  useEffect(() => { if (active >= flat.length) setActive(0); }, [active, flat.length]);
+
+  const run = (e: Entry) => {
+    if (e.kind === "project") onPickProject(e.project.id);
+    else if (e.kind === "task") onPickTask(e.task.project_id, e.task.id);
+    else e.command.run();
+    onClose();
+  };
+
+  // Keyboard driving. A window *capture* listener so it wins regardless of
+  // focus, and so Escape can stopPropagation before any stacked Modal's own
+  // bubble-phase Escape handler sees the event (the palette may sit on top).
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); onClose(); return; }
+      if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => (flat.length ? (a + 1) % flat.length : 0)); return; }
+      if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => (flat.length ? (a - 1 + flat.length) % flat.length : 0)); return; }
+      if (e.key === "Enter") { e.preventDefault(); const cur = flat[active]; if (cur) run(cur); }
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  });
+
+  useEffect(() => {
+    listRef.current?.querySelector(`[data-idx="${active}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [active]);
+
+  const row = (entry: Entry, idx: number) => {
+    const props = {
+      "data-idx": idx,
+      className: `pal-row${idx === active ? " on" : ""}`,
+      onMouseEnter: () => setActive(idx),
+      onClick: () => run(entry),
+    };
+    if (entry.kind === "project") {
+      const p = entry.project;
+      return (
+        <button key={entryKey(entry)} {...props}>
+          <span className="pr-chip" style={{ background: p.color }}>{(p.icon || p.name[0] || "?").toUpperCase()}</span>
+          <span className="pr-title">{p.name}</span>
+          {p.sub && <span className="pr-sub">{p.sub}</span>}
+          {idx === active && <span className="pr-hint">⏎ 打开</span>}
+        </button>
+      );
+    }
+    if (entry.kind === "task") {
+      const t = entry.task;
+      return (
+        <button key={entryKey(entry)} {...props}>
+          <span className="pr-chip" style={{ background: t.project_color }} title={t.project_name}>
+            {(t.project_icon || t.project_name[0] || "?").toUpperCase()}
+          </span>
+          <StatusDot status={t.status} running={t.running === 1} awaiting={t.awaiting_input === 1 && t.running !== 1} />
+          <span className="pr-title">{t.title}</span>
+          <span className="pr-sub">{t.project_name}</span>
+          {idx === active && <span className="pr-hint">⏎ 打开</span>}
+        </button>
+      );
+    }
+    const c = entry.command;
+    return (
+      <button key={entryKey(entry)} {...props}>
+        <span className="pr-ic">{c.icon}</span>
+        <span className="pr-title">{c.label}</span>
+        {c.hint && <span className="pr-sub">{c.hint}</span>}
+        {idx === active && <span className="pr-hint">⏎ 执行</span>}
+      </button>
+    );
+  };
+
+  return (
+    <div className="palette-scrim" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <div className="palette">
+        <div className="palette-input">
+          <span className="p-ic">{Icon.search()}</span>
+          <input
+            autoFocus
+            value={query}
+            placeholder="跳转到项目或会话，或执行命令…"
+            spellCheck={false}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+          <span className="palette-kbd">esc</span>
+        </div>
+        <div className="palette-list" ref={listRef}>
+          {flat.length === 0 && <div className="palette-empty">没有匹配“{query.trim()}”的结果。</div>}
+          {sections.map((sec) => (
+            <div key={sec.title}>
+              <div className="pop-sec">{sec.title}</div>
+              {sec.rows.map((r) => row(r.entry, r.idx))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/operator/node/Composer.tsx

@@ -0,0 +1,316 @@
+"use client";
+
+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 } 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, 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 [draft, setDraft] = useState(() => readDraft(task.id));
+  const draftRef = useRef(draft);
+  const [addOpen, setAddOpen] = useState(false);
+  const [caret, setCaret] = useState(0);
+  const [mentionClosed, setMentionClosed] = useState(false);
+  const [mentionIndex, setMentionIndex] = useState(0);
+  const [slash, setSlash] = useState(false);
+  const [sending, setSending] = useState(() => isTaskSending(task.id));
+  const [stopping, setStopping] = useState(false);
+  const sendingRef = useRef(false);
+  const stoppingRef = useRef(false);
+  const [error, setError] = useState("");
+  const [dragging, setDragging] = useState(false);
+  const dragDepth = useRef(0);
+  const fileRef = useRef<HTMLInputElement>(null);
+  const ref = useRef<HTMLTextAreaElement>(null);
+  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) => {
+    const next = fn(draftRef.current);
+    draftRef.current = next;
+    writeDraft(task.id, next);
+    if (mounted.current) setDraft(next);
+  };
+  useLayoutEffect(() => { uploadScope.current = { taskId: task.id, openBoard: parentBoard ?? openOperatorBoard }; }, [task.id, parentBoard]);
+  useLayoutEffect(() => {
+    mounted.current = true;
+    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;
+      if (change.draft) { draftRef.current = change.draft; setDraft(change.draft); }
+      if (change.sending !== undefined) setSending(change.sending);
+    };
+    window.addEventListener(DRAFT_EVENT, sync);
+    return () => {
+      mounted.current = false;
+      window.removeEventListener(DRAFT_EVENT, sync);
+      const interrupted = new Set(pending.keys());
+      pending.forEach((controller) => controller.abort());
+      // The in-memory draft survives task switches. An aborted upload must not
+      // remain "uploading" there forever or keep a revoked blob URL on remount.
+      if (interrupted.size) {
+        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) });
+      }
+      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({ 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]);
+  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(() => {
+    const pos = caretRequest.current;
+    if (pos === null || !ref.current) return;
+    caretRequest.current = null;
+    ref.current.focus({ preventScroll: true });
+    ref.current.setSelectionRange(pos, pos);
+  }, [draft.text, addOpen]);
+
+  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 || !fileUpload) return;
+    setError("");
+    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", 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 ?? [];
+  const mention = draft.text.slice(0, caret).match(/(?:^|\s)@([^\s@]*)$/);
+  const mentionOpen = !!mention && !mentionClosed && !locked;
+  const candidates = tasks.filter((t) => t.project_id === task.project_id && t.status === "done" && !t.running && !!t.work_branch && !sources.some((s) => s.id === t.id) && (!mention?.[1] || t.title.toLowerCase().includes(mention[1].toLowerCase())));
+  const pickSource = (source: TaskRow) => {
+    if (sources.length >= 4 || !mention) return;
+    const start = caret - mention[1].length - 1;
+    caretRequest.current = start;
+    update((d) => ({ ...d, text: d.text.slice(0, start) + d.text.slice(caret), sources: [...(d.sources ?? []), { id: source.id, title: source.title }], forkRequest: undefined }));
+    setMentionClosed(true); setCaret(start);
+  };
+  const openMention = () => {
+    setAddOpen(false); setMentionClosed(false); setMentionIndex(0);
+    const pos = ref.current?.selectionStart ?? draft.text.length;
+    const prefix = pos > 0 && !/\s/.test(draft.text[pos - 1]) ? " @" : "@";
+    caretRequest.current = pos + prefix.length;
+    update((d) => ({ ...d, text: d.text.slice(0, pos) + prefix + d.text.slice(pos) }));
+    setCaret(pos + prefix.length);
+  };
+  const uploading = draft.attachments.some((a) => a.status === "uploading");
+  const failed = draft.attachments.some((a) => a.status === "error");
+  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),...(boardView?.autoContext===false?{withoutBoardContext:true}:{})});
+  const pendingFork=sources.length&&draft.forkRequest?.signature===currentSignature?draft.forkRequest:null;
+  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 && !stopping;
+  const showStop = running && !sending && (stopping || locked || !payload);
+  const clear = () => {
+    if (running || locked || task.started !== 1) return;
+    onClear(); setSlash(false);
+    if (draft.text.trim() === "/clear") update((d) => ({ ...d, text: "" }));
+  };
+  const submit = async () => {
+    if (!canSend || stoppingRef.current || sendingRef.current || isTaskSending(task.id) || isConfigurationBusy(task.id)) return;
+    if (draft.text.trim() === "/clear" && !draft.attachments.length && !draft.quote) { clear(); return; }
+    let submittedDraft = draftRef.current;
+    let requestId = "";
+    const currentView=readBoardState(task.id);
+    let submittedPayload=appendBoardContext(ownPayload,currentView,task.id);
+    if (sources.length) {
+      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;}
+      update((d) => ({ ...d, forkRequest: { id: requestId, signature, payload:submittedPayload } }));
+      submittedDraft = draftRef.current;
+    }
+    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));}
+        else writeDraft(task.id,acknowledgeDraft(readDraft(task.id),submittedDraft));
+      }
+      else if (mounted.current) setError("发送失败，草稿已保留，请重试。");
+    } catch (e) { if (mounted.current) setError(e instanceof Error ? e.message : "发送失败，草稿已保留。"); }
+    finally { sendingRef.current = false; setTaskSending(task.id, false); if (mounted.current) { setSending(false); ref.current?.focus(); } }
+  };
+  const stop = async () => {
+    if (stoppingRef.current) return;
+    stoppingRef.current = true; setStopping(true); setError("");
+    try { if (!await onStop()) throw new Error("停止失败，请重试。"); }
+    catch (e) { stoppingRef.current = false; if (mounted.current) { setStopping(false); setError(e instanceof Error ? e.message : "停止失败，请重试。"); } }
+  };
+  const hasFileDrag = (e: React.DragEvent) => Array.from(e.dataTransfer.types).includes("Files");
+  return <div className="composer">
+    <div className="composer-inner">
+      {mentionOpen && <div className="mention-menu" id={`mentions-${task.id}`} role="listbox" aria-label="选择派生来源">
+        <div className="mention-heading">从已完成任务派生新分支 <span>{sources.length}/4</span></div>
+        {sources.length >= 4 ? <p>最多同时派生 4 条分支，请先移除一个来源。</p> : candidates.length ? candidates.map((t, index) => <button key={t.id} id={`mention-${t.id}`} role="option" aria-selected={index === Math.min(mentionIndex, candidates.length - 1)} onMouseDown={(e) => e.preventDefault()} onClick={() => pickSource(t)}>
+          {Icon.git()}<span><strong>{t.title}</strong><small>{t.work_branch}</small></span>{Icon.plus()}
+        </button>) : <p>没有匹配的已完成任务。请先完成任务并提交代码，再从这里派生。</p>}
+      </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 (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>}
+        {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>}
+          <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} 一起工作`}
+          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)}
+          onKeyDown={(e) => {
+            if (e.nativeEvent.isComposing || composing.current || e.keyCode === 229) return;
+            if (mentionOpen) {
+              if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); setMentionIndex((i) => Math.max(0, Math.min(candidates.length - 1, i + (e.key === "ArrowDown" ? 1 : -1)))); return; }
+              if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); setMentionClosed(true); return; }
+              if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); if (candidates.length) pickSource(candidates[Math.min(mentionIndex, candidates.length - 1)]); return; }
+            }
+            if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void submit(); }
+            if (e.key === "Escape") setSlash(false);
+          }}
+          onPaste={(e) => {
+            const files = Array.from(e.clipboardData.files);
+            if (files.length) { e.preventDefault(); addFiles(files); return; }
+            const text = e.clipboardData.getData("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">
+          {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">
+            {showStop ? <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>
+              : <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>}
+          </div>
+        </div>
+      </div>
+      {(error || failed || tooLong) && <div className="comp-error" role="alert">{error || (tooLong ? "消息过长，请将部分内容作为文本附件添加。" : "请重试或移除上传失败的附件，再发送。")}</div>}
+      {uploading && <div className="comp-upload-status" role="status">正在上传附件，完成后可发送…</div>}
+    </div>
+  </div>;
+}