@spzxg/cli-ui 0.6.5 → 0.6.7

package/src/chat/GroupChat.tsx

@@ -0,0 +1,113 @@
+import { useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import type { Msg } from "../core/types";
+import { useCliState, useCliStore } from "../core/provider";
+import { boardContextBlock, charCount, MAX_MESSAGE_CHARS, serializeBlock } from "../core/blocks";
+import { MessageView } from "../ui/Transcript";
+import { ReferenceCard } from "../ui/ReferenceCard";
+import { useChatScrollbar } from "../ui/useChatScrollbar";
+import { Icon } from "../ui/icons";
+import { FileLinkContext, FileOpenContext } from "../ui/fileLinks";
+import { Composer, type ComposerOptions } from "./Composer";
+
+export interface GroupChatReference { id: string; label: string; text?: string }
+export interface GroupChatMessage {
+  id: string;
+  role: "user" | "assistant" | "system";
+  content: string;
+  createdAt?: string;
+  actor?: { id: string; name: string };
+  recipientLabel?: string;
+  status?: string;
+  error?: string | null;
+  references?: GroupChatReference[];
+}
+/** 群消息由宿主提供；所有输入始终经过同一个 onSend，不按发言人建立独立发送通道。 */
+export interface GroupChatAdapter {
+  /** 包含业务与用户身份的稳定键，隔离草稿和引用。 */
+  scopeKey: string;
+  messages: GroupChatMessage[];
+  onSend: (text: string) => Promise<void>;
+  userName?: string;
+  placeholder?: string;
+  toolbar?: ReactNode;
+  beforeMessages?: ReactNode;
+  onSource?: (reference: GroupChatReference, message: GroupChatMessage) => void;
+  /** 本地文件沿用共享 Markdown 解析；宿主按实际发言人的授权工作区打开。 */
+  onOpenFile?: (path: string, message: GroupChatMessage) => void;
+  /** 仅消费宿主明确授权给此群的看板引用键（如当前 Job 的成员 job#task）。 */
+  referenceKeys?: string[];
+}
+
+const OPTIONS: ComposerOptions = { placeholderRunning: "继续补充…", hints: false, charCount: false, fileUpload: false, fileButtonText: "文件", queue: true };
+type Quote = { id: string; author: string; text: string };
+
+/** CliChat 的群消息适配；沿用共享消息、输入框和引用组件，不连接单任务转录。 */
+export function GroupChat({ group, theme = "light", className, style, readOnly }: {
+  group: GroupChatAdapter; theme?: "light" | "dark"; className?: string; style?: CSSProperties; readOnly?: boolean;
+}) {
+  const [quote, setQuote] = useState<Quote | null>(null);
+  const [visibleCount, setVisibleCount] = useState(120);
+  const store = useCliStore();
+  const references = useCliState(state => state.refs);
+  const referenceKeys = [...new Set(group.referenceKeys ?? [])];
+  const boardRefs = referenceKeys.flatMap(key => (references[key] ?? []).map(ref => ({ key, ref })));
+  const scroll = useRef<HTMLDivElement>(null);
+  const pinned = useRef(true);
+  useChatScrollbar(scroll, group.scopeKey);
+  useLayoutEffect(() => {
+    if (pinned.current && scroll.current) scroll.current.scrollTop = scroll.current.scrollHeight;
+  }, [group.messages]);
+  const send = async (text: string) => {
+    const submittedQuote = quote;
+    const message = submittedQuote
+      ? `引用 ${submittedQuote.author}：\n${submittedQuote.text.split("\n").map(line => "> " + line).join("\n")}\n\n${text}` : text;
+    const taken = referenceKeys.map(key => ({ key, refs: store.takeRefs(key) }));
+    const refs = taken.flatMap(item => item.refs);
+    const content = refs.length ? `${message}\n\n${serializeBlock(boardContextBlock(refs.map(ref => ref.text)))}` : message;
+    try {
+      if (charCount(content) > MAX_MESSAGE_CHARS) throw new Error("加上引用后消息过长，请精简消息内容后重试。");
+      await group.onSend(content);
+    } catch (error) {
+      for (const item of taken) store.restoreRefs(item.key, item.refs);
+      throw error;
+    }
+    setQuote(current => current === submittedQuote ? null : current);
+    pinned.current = true;
+    if (scroll.current) scroll.current.scrollTop = scroll.current.scrollHeight;
+  };
+  return <div className={`cli-ui cli-chat cli-group-chat ${className ?? ""}`} data-theme={theme} style={style}>
+    <div className="session"><div className="workspace-chat-content" data-chat-layout="centered">
+      <div className="transcript-wrap"><div className="transcript" ref={scroll} role="log" aria-label="群组对话" aria-live="polite" onScroll={() => {
+        const element = scroll.current;
+        if (element) pinned.current = element.scrollHeight - element.scrollTop - element.clientHeight < 48;
+      }}><div className="tw">
+        {group.beforeMessages}
+        {group.messages.length > visibleCount && <div className="load-older"><button type="button" className="btn btn-ghost btn-sm" onClick={() => { pinned.current = false; setVisibleCount(value => value + 80); }}>查看更早的消息</button></div>}
+        {group.messages.slice(-visibleCount).map(message => {
+          const name = message.actor?.name || (message.role === "user" ? group.userName || "你" : "智能体");
+          const ts = message.createdAt ? Date.parse(message.createdAt) : NaN;
+          const msg: Msg = { id: message.id, role: message.role, content: message.content, generation: 0, ...(Number.isFinite(ts) ? { ts } : {}) };
+          return <div key={message.id} data-msg="" data-message-id={message.id} data-actor-id={message.actor?.id}>
+            {message.recipientLabel && <div className="cli-group-meta">{message.recipientLabel}</div>}
+            <FileLinkContext.Provider value={null}><FileOpenContext.Provider value={message.role === "assistant" && message.actor && group.onOpenFile
+              ? path => { group.onOpenFile?.(path, message); return true; } : null}>
+              <MessageView m={msg} initial={false} hideWho={false} view={{ timestamps: true, initialBadge: false, userLabel: name, agentName: name }} handlers={{
+                onQuote: readOnly ? undefined : (value, selected) => setQuote({ id: value.id, author: name, text: selected || value.content }),
+              }} />
+            </FileOpenContext.Provider></FileLinkContext.Provider>
+            {message.status && <div className="cli-group-meta">{message.status}</div>}
+            {message.error && <div className="cli-comp-err" role="alert">{message.error}</div>}
+            {!!message.references?.length && <div className="cli-group-references">{message.references.map(reference => group.onSource
+              ? <button key={reference.id} type="button" className="btn btn-ghost btn-sm" onClick={() => group.onSource?.(reference, message)}>{Icon.doc()}{reference.label}</button>
+              : <ReferenceCard key={reference.id} title={reference.label} text={reference.text || "引用内容未提供"} />)}</div>}
+          </div>;
+        })}
+      </div></div></div>
+      {!readOnly && <Composer draft={`group:${group.scopeKey}`} placeholder={group.placeholder || "发送消息…"} disabled={false} running={false} onSend={send} options={OPTIONS} toolbar={group.toolbar}
+        context={(quote || boardRefs.length > 0) && <div className="cli-refs composer-references">
+          {quote && <ReferenceCard title={quote.author} text={quote.text} removeLabel="取消引用" onRemove={() => setQuote(null)} />}
+          {boardRefs.map(({ key, ref }) => <ReferenceCard key={`${key}:${ref.id}`} title={ref.label} text={ref.text} removeLabel={`不带上 ${ref.label}`} onRemove={() => store.removeRef(key, ref.id)} />)}
+        </div>} />}
+    </div></div>
+  </div>;
+}

package/src/chat/RunControls.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Fragment, useEffect, useRef, useState } from "react";
-import { Icon } from "../ui/icons";
+import { useEffect, useRef, useState } from "react";
+import { AgentMark, Icon } from "../ui/icons";
 import { Popover } from "../ui/Popover";
 import { modelLabel } from "../ui/format";
 import { acquireConfiguration, useConfigurationBusy } from "./configuration";
@@ -11,7 +11,8 @@ export interface RunTask { id: string; agent?: string; model?: string | null; re
 const withDefault = (options?: RunOption[]) => [{ value: null as string | null, label: "默认", sub: "沿用智能体的默认设置", group: undefined as string | undefined }, ...(options ?? [])];
 const modelOptions = (caps?: RunCapabilities) => withDefault(caps?.models);
 const permissionOptions = (caps?: RunCapabilities) => withDefault(caps?.permissionModes);
-const reasoningOptions = (caps?: RunCapabilities) => withDefault(caps?.reasoningOptions);
+const agentNames = [{ id: "codex", label: "Codex" }, { id: "claude", label: "Claude" }, { id: "grok", label: "Grok" }, { id: "pi", label: "PI" }];
+const permissionIcon = (value: string | null) => value === null ? Icon.clear() : value === "bypassPermissions" ? Icon.bolt() : value === "plan" ? Icon.list() : value === "acceptEdits" ? Icon.edit() : Icon.lock();
 
 export type RunControlProps = {
   task: RunTask;
@@ -30,68 +31,157 @@ export type RunControlProps = {
 // Await persistence before allowing Send so the next turn uses the chosen value.
 export function RunControls({ task, agents, onSetAgent, caps, defaults, disabled, onSetModel, onSetReasoning, onSetPermission, onBusyChange }: RunControlProps) {
   const [open, setOpen] = useState<"model" | "permission" | null>(null);
+  const [modelPage, setModelPage] = useState<"agents" | "settings" | "models">("agents");
+  const [switching, setSwitching] = useState<{ agent: string; saved: boolean } | null>(null);
   const [custom, setCustom] = useState("");
   const busy = useConfigurationBusy(task.id);
-  const currentTask = useRef(task.id); currentTask.current = task.id;
-  useEffect(() => { setOpen(null); setError(""); }, [task.id]);
+  const currentTask = useRef({ id: task.id, revision: 0 });
+  if (currentTask.current.id !== task.id) currentTask.current = { id: task.id, revision: currentTask.current.revision + 1 };
+  const agentListRef = useRef<HTMLDivElement>(null);
+  const modelEntryRef = useRef<HTMLButtonElement>(null);
+  const modelListRef = useRef<HTMLDivElement>(null);
+  useEffect(() => { setOpen(null); setError(""); setCustom(""); setSwitching(null); setModelPage("agents"); }, [task.id]);
   const [error, setError] = useState("");
+  const availableAgents = agentNames.flatMap(agent => {
+    const available = agents?.find(item => item.id === agent.id);
+    return available ? [{ ...available, label: agent.label }] : [];
+  });
+  const hasAgentPicker = !!onSetAgent && availableAgents.length > 0;
+  const currentAgent = agentNames.find(agent => agent.id === task.agent)?.label ?? agents?.find(agent => agent.id === task.agent)?.label ?? task.agent ?? "智能体";
   const models = modelOptions(caps);
-  const reasoning = reasoningOptions(caps);
   const permissions = permissionOptions(caps);
   const effectiveModel = task.model ?? defaults?.model ?? null;
-  const effectiveReasoning = task.reasoning ?? defaults?.reasoning ?? null;
+  const currentModel = effectiveModel ? models.find(option => option.value === effectiveModel)?.label ?? modelLabel(effectiveModel) : "默认模型";
   const effectivePermission = task.permission_mode ?? defaults?.permission_mode ?? caps?.permissionModes[0]?.value ?? null;
-  const model = models.find((m) => m.value === effectiveModel)?.label ?? modelLabel(effectiveModel ?? "");
+  const defaultModel = defaults?.model ? models.find(option => option.value === defaults.model)?.label ?? modelLabel(defaults.model) : null;
+  const defaultReasoningOption = caps?.reasoningOptions.find(option => option.value === defaults?.reasoning);
+  const defaultReasoning = defaultReasoningOption?.label ?? defaults?.reasoning ?? null;
+  const currentReasoning = caps?.reasoningOptions.find(option => option.value === task.reasoning);
+  const reasoningLabel = task.reasoning ? currentReasoning?.label ?? task.reasoning : defaultReasoning ? `默认（${defaultReasoning}）` : "默认";
+  const reasoningDescription = task.reasoning ? currentReasoning?.sub ?? "当前任务的推理设置" : defaultReasoningOption?.sub ?? "沿用智能体的默认设置";
+  const defaultPermission = defaults?.permission_mode ?? caps?.permissionModes[0]?.value ?? null;
+  const defaultPermissionLabel = permissions.find(option => option.value === defaultPermission)?.label ?? defaultPermission;
   const permission = permissions.find((p) => p.value === effectivePermission);
-  const change = async (save: () => Promise<void>) => {
-    if (disabled) return;
+  const change = async (save: () => Promise<void>, close = true) => {
+    if (disabled) return false;
     const release = acquireConfiguration(task.id);
-    if (!release) return;
-    const targetId = task.id;
+    if (!release) return false;
+    const targetRevision = currentTask.current.revision;
     setError("");
-    try { onBusyChange?.(true); await save(); if(currentTask.current === targetId) setOpen(null); }
-    catch (e) { if(currentTask.current === targetId) setError(e instanceof Error ? e.message : "设置保存失败，请重试。"); }
+    try {
+      onBusyChange?.(true);
+      await save();
+      if (currentTask.current.revision !== targetRevision) return false;
+      if (close) setOpen(null);
+      return true;
+    }
+    catch (e) { if(currentTask.current.revision === targetRevision) setError(e instanceof Error ? e.message : "设置保存失败，请重试。"); return false; }
     finally { release(); onBusyChange?.(false); }
   };
-  const locked = disabled || busy || !caps;
+  const locked = disabled || busy || !!switching || !caps;
+  const pickAgent = async (agent: string) => {
+    if (locked || !onSetAgent) return;
+    setError(""); setCustom("");
+    if (agent === task.agent) { setModelPage("settings"); return; }
+    const targetRevision = currentTask.current.revision;
+    setSwitching({ agent, saved: false });
+    const saved = await change(() => onSetAgent(agent), false);
+    if (currentTask.current.revision === targetRevision) setSwitching(saved ? { agent, saved: true } : null);
+  };
+  // SessionView derives caps from task.agent in the same render. Wait for that
+  // task update as well as the save, so the old agent's models never appear.
+  useEffect(() => {
+    if (switching?.saved && task.agent === switching.agent && caps) {
+      setSwitching(null); setModelPage("settings");
+    }
+  }, [switching, task.agent, caps]);
+  useEffect(() => {
+    if (open !== "model" || switching || busy) return;
+    if (modelPage === "settings") modelEntryRef.current?.focus({ preventScroll: true });
+    else if (modelPage === "models") (modelListRef.current?.querySelector<HTMLButtonElement>('button[aria-pressed="true"]:not(:disabled)') ?? modelListRef.current?.querySelector<HTMLButtonElement>('button:not(:disabled)'))?.focus({ preventScroll: true });
+    else (agentListRef.current?.querySelector<HTMLButtonElement>('button[aria-pressed="true"]:not(:disabled)') ?? agentListRef.current?.querySelector<HTMLButtonElement>('button:not(:disabled)'))?.focus({ preventScroll: true });
+  }, [open, modelPage, switching, busy]);
+  const modelGroups = models.reduce<{ label?: string; options: typeof models }[]>((groups, option) => {
+    const previous = groups.at(-1);
+    if (previous && previous.label === option.group) previous.options.push(option);
+    else groups.push({ label: option.group, options: [option] });
+    return groups;
+  }, []);
   return <>
     {!!caps?.permissionModes.length && <div className="comp-control">
-      <button className={`comp-setting permission${effectivePermission === "bypassPermissions" ? " elevated" : ""}`} disabled={locked} aria-label="权限模式" aria-expanded={open === "permission"} aria-haspopup="dialog" title={disabled ? "本轮结束后可修改权限" : permission?.sub} onClick={(e) => { e.stopPropagation(); setOpen(open === "permission" ? null : "permission"); }}>
+      <button className={`comp-setting permission${effectivePermission === "bypassPermissions" ? " elevated" : ""}`} disabled={locked} aria-label="权限模式" aria-expanded={open === "permission"} aria-haspopup="dialog" title={disabled ? "本轮结束后可修改权限" : permission?.sub} onClick={(e) => { e.stopPropagation(); setError(""); setOpen(open === "permission" ? null : "permission"); }}>
         {Icon.lock()} <span>{permission?.value ? permission.label : "默认权限"}</span>{Icon.chevDown()}
       </button>
-      {open === "permission" && <Popover onClose={() => setOpen(null)}>
-        <div className="pop-sec">权限模式 · 保存后用于下一轮</div>
-        {permissions.map((p) => <button key={p.value ?? "default"} className="pop-item" disabled={locked} aria-pressed={(task.permission_mode ?? null) === p.value} onClick={() => void change(() => onSetPermission(p.value))}>
-          <span><span>{p.label}</span><span className="pi-sub">{p.sub}</span></span>{(task.permission_mode ?? null) === p.value && Icon.check()}
+      {open === "permission" && <Popover onClose={() => setOpen(null)} className="composer-popover composer-permission-popover" ariaLabel="权限模式" placement="top" align="start">
+        <div className="composer-menu-heading">权限模式</div>
+        <p className="composer-menu-note">保存后用于下一轮</p>
+        {permissions.map((p) => <button key={p.value ?? "default"} className="pop-item composer-option run-permission-option" disabled={locked} aria-pressed={(task.permission_mode ?? null) === p.value} onClick={() => void change(() => onSetPermission(p.value))}>
+          <span className="composer-option-icon" aria-hidden="true">{permissionIcon(p.value)}</span>
+          <span className="composer-option-copy"><span className="composer-option-title">{p.label}</span><span className="composer-option-sub">{p.value === null && defaultPermissionLabel ? `沿用智能体默认设置：${defaultPermissionLabel}` : p.sub}</span></span>
+          <span className="composer-option-trailing" aria-hidden="true">{(task.permission_mode ?? null) === p.value && Icon.check()}</span>
         </button>)}
+        {busy && <div className="composer-menu-note" role="status">正在保存…</div>}
         {error && <div className="control-error" role="alert">{error}</div>}
       </Popover>}
     </div>}
     <div className="comp-control comp-model">
-      <button className="comp-setting" disabled={locked} aria-label="模型与推理设置" aria-expanded={open === "model"} aria-haspopup="dialog" title={disabled ? "本轮结束后可修改模型与推理" : `模型：${model}${task.resolved_model ? ` · 上次运行：${task.resolved_model}` : ""}`} onClick={(e) => { e.stopPropagation(); setOpen(open === "model" ? null : "model"); }}>
-        <span className="comp-model-name">{model === "默认" ? "默认模型" : model}</span>
-        {!!caps?.reasoningOptions.length && <span className="comp-reasoning">{reasoning.find((r) => r.value === effectiveReasoning)?.label ?? "默认"}</span>}{Icon.chevDown()}
+      <button className="comp-setting" disabled={locked} aria-label="智能体设置" aria-expanded={open === "model"} aria-haspopup="dialog" title={disabled ? "本轮结束后可修改智能体设置" : `当前智能体：${currentAgent}`} onClick={(e) => { e.stopPropagation(); setError(""); setCustom(""); setModelPage(hasAgentPicker ? "agents" : "settings"); setOpen(open === "model" ? null : "model"); }}>
+        <span className="comp-model-name">{currentAgent}</span>{Icon.chevDown()}
       </button>
-      {open === "model" && <Popover onClose={() => setOpen(null)}>
-        {agents && agents.length>1 && onSetAgent && <><div className="pop-sec">智能体 · 接手当前任务的历史</div>{agents.map(a=><button key={a.id} className="pop-item" disabled={locked||a.disabled} aria-pressed={task.agent===a.id} onClick={()=>void change(()=>onSetAgent(a.id))}>{a.label}{task.agent===a.id&&Icon.check()}</button>)}<div className="divider"/></>}
-        <div className="pop-sec">模型 · 保存后用于下一轮</div>
-        {models.map((m, i) => <Fragment key={m.value ?? "default"}>
-          {m.group && m.group !== models[i - 1]?.group && <div className="pop-sec">{m.group}</div>}
-          <button className="pop-item" disabled={locked} aria-pressed={(task.model ?? null) === m.value} onClick={() => void change(() => onSetModel(m.value))}>
-            <span><span>{m.label}</span><span className="pi-sub">{m.sub}</span></span>{(task.model ?? null) === m.value && Icon.check()}
-          </button>
-        </Fragment>)}
-        {caps?.supportsCustomModels && <form className="pop-custom-model" onSubmit={(e) => { e.preventDefault(); if (custom.trim()) void change(() => onSetModel(custom.trim())); }}>
-          <label className="pop-sec" htmlFor={`model-${task.id}`}>自定义模型</label>
-          <div className="pop-custom-row"><input id={`model-${task.id}`} value={custom} onChange={(e) => setCustom(e.target.value)} placeholder="模型 ID" disabled={locked} /><button className="btn btn-sm" disabled={locked || !custom.trim()}>使用</button></div>
-        </form>}
-        {!!caps?.reasoningOptions.length && <>
-          <div className="divider" /><div className="pop-sec">推理强度</div>
-          {reasoning.map((r) => <button key={r.value ?? "default"} className="pop-item" disabled={locked} aria-pressed={(task.reasoning ?? null) === r.value} onClick={() => void change(() => onSetReasoning(r.value))}>
-            <span><span>{r.label}</span><span className="pi-sub">{r.sub}</span></span>{(task.reasoning ?? null) === r.value && Icon.check()}
+      {open === "model" && <Popover onClose={() => setOpen(null)} className="composer-popover composer-agent-popover" ariaLabel={modelPage === "agents" ? "选择智能体" : modelPage === "models" ? "选择模型" : "模型与推理设置"} placement="top" align="end">
+        {modelPage === "agents" ? <div ref={agentListRef} className="run-agent-list">
+          <div className="composer-menu-heading">选择智能体</div>
+          {availableAgents.map(agent => <button key={agent.id} className="pop-item composer-option run-agent-option" disabled={locked || agent.disabled} aria-pressed={task.agent === agent.id} onClick={() => void pickAgent(agent.id)}>
+            <span className="composer-option-icon" aria-hidden="true">{AgentMark[agent.id]?.() ?? Icon.spark()}</span>
+            <span className="composer-option-copy"><span className="composer-option-title">{agent.label}</span></span>
+            <span className="composer-option-trailing run-agent-trailing" aria-hidden="true">{task.agent === agent.id && Icon.check()}{Icon.chevRight()}</span>
           </button>)}
-        </>}
-        {busy && <div className="pop-sec" role="status">正在保存…</div>}
+        </div> : !switching && modelPage === "settings" ? <div className="run-settings">
+          <div className="run-settings-head">
+            {hasAgentPicker && <button className="pop-item run-settings-back" onClick={() => { setModelPage("agents"); setError(""); }}>{Icon.chevRight({ style: { transform: "rotate(180deg)" } })} 智能体</button>}
+            <span className="composer-menu-heading">{currentAgent}</span>
+          </div>
+          <div className="run-settings-field">
+            <div className="run-field-label">模型</div>
+            <button ref={modelEntryRef} className="composer-option run-model-entry" disabled={locked} aria-label="选择模型" onClick={() => { setModelPage("models"); setError(""); }}>
+              <span className="composer-option-icon" aria-hidden="true">{Icon.spark()}</span>
+              <span className="composer-option-copy"><span className="composer-option-title run-model-value">{currentModel}</span><span className="composer-option-sub">{task.model ? models.find(option => option.value === task.model)?.sub ?? "当前使用自定义模型" : "沿用智能体的默认设置"}</span></span>
+              <span className="composer-option-trailing" aria-hidden="true">{Icon.chevRight()}</span>
+            </button>
+          </div>
+          {!!caps?.reasoningOptions.length && <div className="run-reasoning-card">
+            <div className="run-reasoning-head"><span className="run-field-label">推理强度</span><span className="run-reasoning-value">{reasoningLabel}</span></div>
+            <p className="run-reasoning-note">{reasoningDescription}</p>
+            <div className="run-reasoning-options" role="group" aria-label="推理强度档位">
+              {caps.reasoningOptions.map(option => <button key={option.value} className="run-reasoning-option" disabled={locked} aria-pressed={task.reasoning === option.value} title={option.sub} onClick={() => void change(() => onSetReasoning(option.value))}>{option.label}</button>)}
+            </div>
+            <button className="run-reasoning-reset" disabled={locked} aria-label="使用默认推理强度" aria-pressed={task.reasoning == null} onClick={() => void change(() => onSetReasoning(null))}>{Icon.clear()} {defaultReasoning ? `默认（${defaultReasoning}）` : "使用默认设置"}{task.reasoning == null && Icon.check()}</button>
+          </div>}
+          <p className="composer-menu-note run-settings-note">保存后用于下一轮</p>
+        </div> : !switching && modelPage === "models" && <div className="run-settings run-models">
+          <div className="run-settings-head">
+            <button className="pop-item run-models-back" onClick={() => { setModelPage("settings"); setError(""); }}>{Icon.chevRight({ style: { transform: "rotate(180deg)" } })} 返回</button>
+            <span className="composer-menu-heading">选择模型</span>
+          </div>
+          <div ref={modelListRef} className="run-model-list">
+            {modelGroups.map((group, index) => <div className="run-model-group" key={`${group.label ?? "default"}-${index}`}>
+              {group.label && <div className="run-model-group-title">{group.label}</div>}
+              {group.options.map(option => <button key={option.value ?? "default"} className="pop-item composer-option run-model-option" data-model-value={option.value ?? ""} disabled={locked} aria-pressed={(task.model ?? null) === option.value} onClick={() => void change(() => onSetModel(option.value))}>
+                <span className="composer-option-copy"><span className="composer-option-title">{option.value === null && defaultModel ? `默认（${defaultModel}）` : option.label}</span><span className="composer-option-sub">{option.value === null && defaultModel ? `沿用智能体默认设置：${defaultModel}` : option.sub}</span></span>
+                <span className="composer-option-trailing" aria-hidden="true">{(task.model ?? null) === option.value && Icon.check()}</span>
+              </button>)}
+            </div>)}
+            {task.model && !models.some(option => option.value === task.model) && <button className="pop-item composer-option run-model-option" data-model-value={task.model} disabled={locked} aria-pressed onClick={() => void change(() => onSetModel(task.model!))}>
+              <span className="composer-option-copy"><span className="composer-option-title">{modelLabel(task.model)}（当前模型）</span><span className="composer-option-sub">当前任务使用的自定义模型</span></span>
+              <span className="composer-option-trailing" aria-hidden="true">{Icon.check()}</span>
+            </button>}
+          </div>
+          {caps?.supportsCustomModels && <form className="pop-custom-model" onSubmit={(e) => { e.preventDefault(); if (custom.trim()) void change(() => onSetModel(custom.trim())); }}>
+            <label className="composer-menu-heading" htmlFor={`custom-model-${task.id}`}>自定义模型</label>
+            <div className="pop-custom-row"><input id={`custom-model-${task.id}`} value={custom} onChange={(e) => setCustom(e.target.value)} placeholder="模型 ID" disabled={locked} /><button className="btn btn-sm" disabled={locked || !custom.trim()}>使用</button></div>
+          </form>}
+        </div>}
+        {(busy || switching) && <div className="composer-menu-note" role="status">{switching ? "正在切换智能体…" : "正在保存…"}</div>}
         {error && <div className="control-error" role="alert">{error}</div>}
       </Popover>}
     </div>

package/src/chat/draft.ts

@@ -1,6 +1,7 @@
 import { useSyncExternalStore } from "react";
 import type { TextBlock } from "../core/blocks";
-export type PendingFile = { key: string; name: string; status: "reading" | "error"; error?: string };
+import type { UploadPhase } from "../core/documentUpload";
+export type PendingFile = { key: string; name: string; status: "reading" | "error"; error?: string; progress?: string; phase?: UploadPhase; bytes?: number; size?: number };
 export interface ComposerDraft { text: string; blocks: Array<TextBlock & { key: string }>; pending: PendingFile[]; sending: boolean; error: string | null; revision: number }
 const empty = (): ComposerDraft => ({ text: "", blocks: [], pending: [], sending: false, error: null, revision: 0 });
 const server = empty();
@@ -18,7 +19,9 @@ export function readComposerDraft(id: string): ComposerDraft {
     const data = JSON.parse(localStorage.getItem(dataKey(id)) ?? "null");
     if (data?.version === 1) {
       state.blocks = Array.isArray(data.blocks) ? data.blocks.filter((b: TextBlock & { key: string }) => typeof b?.text === "string" && typeof b?.key === "string") : [];
-      state.pending = Array.isArray(data.pending) ? data.pending.map((p: PendingFile) => ({ ...p, status: "error", error: p.error || "页面重载中断了解析，请移除后重新添加" })) : [];
+      state.pending = Array.isArray(data.pending) ? data.pending.map((p: PendingFile) => ({ ...p, status: "error", error: p.phase
+        ? `${p.error || "页面重载中断了上传。"}${p.error?.includes("重新选择文件") ? "" : " 请重新选择文件。"}`
+        : p.error || "页面重载中断了解析，请移除后重新添加" })) : [];
     }
   } catch { /* Old text drafts and restricted storage remain usable. */ }
   entries.set(id, { state, stamp: stored });

package/src/core/blocks.ts

@@ -48,16 +48,16 @@ export function backgroundBlock(items: Array<{ title?: string; text: string }>):
   return { name: BACKGROUND_NAME, kind: "background", text: `以下是补充的项目背景信息，请在这次及之后的工作中一并参考：\n\n${body}` };
 }
 
-/** 支持的文件：只收文档——Word（.docx）、Excel（.xlsx / .xlsm）、Markdown、TXT、HTML、CSV / TSV。都在浏览器里转成文字。 */
-export const ACCEPTED_EXTENSIONS = [".docx", ".xlsx", ".xlsm", ".md", ".markdown", ".txt", ".html", ".htm", ".csv", ".tsv"] as const;
+/** 支持的文件：只收文档——Word（.docx）、Excel（.xlsx / .xlsm）、Markdown、TXT、YAML、HTML、CSV / TSV。都在浏览器里转成文字。 */
+export const ACCEPTED_EXTENSIONS = [".docx", ".xlsx", ".xlsm", ".md", ".markdown", ".txt", ".yaml", ".yml", ".html", ".htm", ".csv", ".tsv"] as const;
 export const ACCEPT_ATTR = [
   ...ACCEPTED_EXTENSIONS,
-  "text/plain", "text/markdown", "text/html", "text/csv", "text/tab-separated-values",
+  "text/plain", "text/markdown", "text/yaml", "application/yaml", "text/html", "text/csv", "text/tab-separated-values",
   "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
   "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.ms-excel.sheet.macroEnabled.12",
 ].join(",");
 /** 不支持时提示里列的格式。 */
-export const ACCEPTED_LABEL = "Word（.docx）、Excel（.xlsx）、Markdown、TXT、HTML、CSV";
+export const ACCEPTED_LABEL = "Word（.docx）、Excel（.xlsx）、Markdown、TXT、YAML（.yaml / .yml）、HTML、CSV";
 /** 一些常见但读不了的文档：给出另存为什么。 */
 const SAVE_AS: Record<string, string> = {
   ".doc": "老版 Word（.doc）请另存为 .docx 后再上传",
@@ -72,6 +72,8 @@ export const PASTE_BLOCK_CHARS = 2_000;
 export const PASTE_BLOCK_LINES = 40;
 /** center 单条消息上限（POST /api/jobs/:id/messages 的 text 最长 200,000 字符）。 */
 export const MAX_MESSAGE_CHARS = 200_000;
+/** Same source-file budget as the full node composer; reject before reading/parsing. */
+export const MAX_DOCUMENT_BYTES = 10 * 1024 * 1024;
 export const PASTE_NAME = "粘贴的文本";
 
 const OPEN = /^----- 附件：(.+?)（[\d,]+ 字）-----$/;
@@ -86,7 +88,8 @@ export function serializeBlock(block: TextBlock): string {
 
 /** 输入框里的文字 + 文本块 → 发给 center 的正文。 */
 export function composeMessage(typed: string, blocks: TextBlock[]): string {
-  return [typed.trim(), ...blocks.map(serializeBlock)].filter(Boolean).join("\n\n");
+  const originals = blocks.some(block => block.kind === "file" && (/^\[Attached (?:file|image): /.test(block.text) || /^\[文件原件：.*\]\(cli-upload:\/\//.test(block.text)));
+  return [typed.trim(), originals ? "请先读取以下附件原件，再处理本条消息。" : "", ...blocks.map(serializeBlock)].filter(Boolean).join("\n\n");
 }
 
 export type MessagePart = { kind: "text"; text: string } | { kind: "block"; block: TextBlock };
@@ -138,6 +141,13 @@ export class FileReadError extends Error {}
  * 其他文件（图片、PDF、压缩包……）不收；老版 .doc / .xls 浏览器里读不了，提示另存为。
  */
 export async function readFileText(file: File): Promise<string> {
+  if (file.size > MAX_DOCUMENT_BYTES) throw new FileReadError(`“${file.name}”超过 10 MB，请缩小后重试。`);
+  const text = await extractFileText(file);
+  if (text.length > MAX_MESSAGE_CHARS) throw new FileReadError(`“${file.name}”解析后的正文超过 ${MAX_MESSAGE_CHARS.toLocaleString("en-US")} 字符，请拆分后重试。`);
+  return text;
+}
+
+async function extractFileText(file: File): Promise<string> {
   const ext = extensionOf(file.name);
   if (SAVE_AS[ext]) throw new FileReadError(`不支持这种格式：${SAVE_AS[ext]}`);
   if (!(ACCEPTED_EXTENSIONS as readonly string[]).includes(ext)) throw new FileReadError(`「${file.name}」不是支持的文档，只能上传 ${ACCEPTED_LABEL}`);
@@ -165,6 +175,8 @@ export async function readFileText(file: File): Promise<string> {
     }
   }
   const { text } = decodeText(new Uint8Array(await readAs(file, "buffer")));
+  // YAML literal scalars depend on blank lines, indentation and the final newline.
+  if (ext === ".yaml" || ext === ".yml") return text;
   if (ext === ".html" || ext === ".htm") return normalizeText(text.replace(INLINE_DATA, (m) => `${m.slice(0, m.indexOf(",") + 1)}…（内嵌数据已省略）`));
   return normalizeText(text);
 }