@spzxg/cli-ui 0.6.1 → 0.6.5

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,287 @@
+"use client";
+
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+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 { readBoardState, useBoardState } from "./boardState";
+import { clientId } from "../../core/id";
+import { isConfigurationBusy, useConfigurationBusy } from "../../chat/configuration";
+import { acknowledgeDraft, DRAFT_EVENT, isTaskSending, setTaskSending, readDraft, writeDraft, quoteText, type ComposerDraft, type Quote } from "./composerDraft";
+
+export function Composer({ task, agentLabel, disabled, running, onSend, onStop, onClear, quoteRequest, onQuoteHandled, controls, configBusy, tasks, onFork }: {
+  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;
+}) {
+  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);
+  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 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);
+  };
+  useEffect(() => {
+    mounted.current = true;
+    const pending = uploads.current, urls = previews.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();
+      urls.forEach((url) => URL.revokeObjectURL(url));
+      urls.clear();
+    };
+  }, []);
+  useEffect(() => { if (!running) { setStopping(false); stoppingRef.current = false; } }, [running]);
+  useEffect(() => {
+    if (!quoteRequest) return;
+    update((d) => ({ ...d, quote: quoteRequest }));
+    ref.current?.focus();
+    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]);
+  // 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 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; }
+      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); } });
+    }
+  };
+  const removeAtt = (key: string) => {
+    uploads.current.get(key)?.abort();
+    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 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 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 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 tooLong = payload.length > MAX_MESSAGE_CHARS;
+  const canSend = !!payload && !uploading && !failed && !tooLong && !locked;
+  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 || 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=includeBoard?appendBoardContext(ownPayload,currentView,task.id):ownPayload;
+    if (sources.length) {
+      const signature = JSON.stringify({ payload:ownPayload, ids: sources.map((s) => s.id), ...(!includeBoard||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));setIncludeBoard(true);}
+        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>}
+      <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}>
+          {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} 一起工作，@ 派生任务分支`}
+          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 (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>
+            </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>}
+          </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>}
+      {uploading && <div className="comp-upload-status" role="status">正在上传附件，完成后可发送…</div>}
+    </div>
+  </div>;
+}