@spzxg/cli-ui 0.6.2 → 0.6.5

package/src/chat/Composer.tsx

@@ -1,24 +1,16 @@
 // 输入框。结构与 Operator 的 Composer.tsx 一致（comp-box / comp-area / send-group / comp-foot），
 // 但只发文本：不收图片和其他附件。文件只收文档（Word、Excel、Markdown、TXT、HTML、CSV），在前端解析成纯文本，
 // 和长粘贴一样变成可折叠的文本块，发送时按统一格式拼进正文（见 core/blocks.ts）。
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import {
   ACCEPT_ATTR, ACCEPTED_LABEL, MAX_MESSAGE_CHARS, PASTE_NAME, charCount, composeMessage, isLongText, readFileText, type TextBlock,
-} from "../core/blocks.js";
-import { Icon } from "../ui/icons.js";
-import { TextBlockCard } from "../ui/TextBlock.js";
-import { fmtCount } from "../ui/format.js";
+} from "../core/blocks";
+import { Icon } from "../ui/icons";
+import { clientId } from "../core/id";
+import { TextBlockCard } from "../ui/TextBlock";
+import { fmtCount } from "../ui/format";
 
-const draftKey = (key: string) => `cli-ui:draft:${key}`;
-const loadDraft = (key: string) => { try { return localStorage.getItem(draftKey(key)) ?? ""; } catch { return ""; } };
-const saveDraft = (key: string, value: string) => {
-  try {
-    if (value) localStorage.setItem(draftKey(key), value);
-    else localStorage.removeItem(draftKey(key));
-  } catch { /* 隐私模式 / 配额：草稿就不保存 */ }
-};
-
-type Pending = { key: string; name: string; status: "reading" | "error"; error?: string };
+import { clearComposerDraft, readComposerDraft, updateComposerDraft, useComposerDraft, type PendingFile } from "./draft";
 
 /** 输入框的可配置项（来自 CliChat 的 config.composer）。 */
 export interface ComposerOptions {
@@ -30,7 +22,7 @@ export interface ComposerOptions {
   queue: boolean;
 }
 
-export function Composer({ draft, placeholder, disabled, disabledHint, running, onSend, onStop, taskControl, options }: {
+export function Composer({ draft, placeholder, disabled, disabledHint, running, onSend, onStop, taskControl, options, toolbar }: {
   /** 草稿按这个键存在 localStorage（一般是对话 id）。 */
   draft: string;
   placeholder: string;
@@ -41,38 +33,41 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
   onStop?: () => Promise<void> | void;
   taskControl?: { paused: boolean; onToggle: () => Promise<void> };
   options: ComposerOptions;
+  toolbar?: ReactNode;
 }) {
-  const [val, setVal] = useState(() => loadDraft(draft));
-  const [blocks, setBlocks] = useState<Array<TextBlock & { key: string }>>([]);
-  const [pending, setPending] = useState<Pending[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [sending, setSending] = useState(false);
+  const state = useComposerDraft(draft);
+  const { text: val, blocks, pending, error, sending } = state;
+  const setVal = (text: string) => updateComposerDraft(draft, s => ({ ...s, text }));
+  const setBlocks = (fn: (blocks: typeof state.blocks) => typeof state.blocks) => updateComposerDraft(draft, s => ({ ...s, blocks: fn(s.blocks) }));
+  const setPending = (fn: (pending: PendingFile[]) => PendingFile[]) => updateComposerDraft(draft, s => ({ ...s, pending: fn(s.pending) }));
+  const setError = (error: string | null) => updateComposerDraft(draft, s => ({ ...s, error }));
+  const setSending = (sending: boolean) => updateComposerDraft(draft, s => ({ ...s, sending }));
   const [stopping, setStopping] = useState(false);
   const [controlling, setControlling] = useState(false);
   const [dragging, setDragging] = useState(false);
   const dragDepth = useRef(0);
-  const seq = useRef(0);
+  const stopLock = useRef(false);
+  const controlLock = useRef(false);
+  const composing = useRef(false);
   const fileRef = useRef<HTMLInputElement>(null);
   const ref = useRef<HTMLTextAreaElement>(null);
 
-  useEffect(() => { if (!running) setStopping(false); }, [running]);
-  useEffect(() => { saveDraft(draft, val); }, [draft, val]);
+  useEffect(() => { if (!running) { stopLock.current = false; setStopping(false); } }, [running]);
   const autosize = (el: HTMLTextAreaElement) => { el.style.height = "auto"; el.style.height = Math.min(el.scrollHeight, 160) + "px"; };
   useEffect(() => { if (ref.current) autosize(ref.current); }, [draft, disabled]);
 
-  const nextKey = () => `blk-${++seq.current}`;
+  const nextKey = () => `blk-${clientId()}`;
   const addBlock = (block: TextBlock) => setBlocks((prev) => [...prev, { ...block, key: nextKey() }]);
 
   const addFiles = (files: File[]) => {
-    if (disabled || !options.fileUpload) return;
+    if (disabled || sending || !options.fileUpload) return;
     for (const file of files) {
       const key = nextKey();
       setPending((prev) => [...prev, { key, name: file.name || "文件", status: "reading" }]);
       readFileText(file)
         .then((text) => {
-          setPending((prev) => prev.filter((p) => p.key !== key));
           if (!text.trim()) throw new Error(`「${file.name}」里没有可读的文字`);
-          addBlock({ name: file.name, text, kind: "file" });
+          updateComposerDraft(draft, s => ({ ...s, pending: s.pending.filter(p => p.key !== key), blocks: [...s.blocks, { key, name: file.name, text, kind: "file" }] }));
         })
         .catch((err: unknown) => {
           setPending((prev) => prev.map((p) => (p.key === key ? { ...p, status: "error", error: err instanceof Error ? err.message : String(err) } : p)));
@@ -85,20 +80,19 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
   const tooLong = total > MAX_MESSAGE_CHARS;
   const reading = pending.some((p) => p.status === "reading");
   // 运行中不允许排队时，等这一轮结束再发。
-  const canSend = !!message.trim() && !reading && !tooLong && !sending && (!running || options.queue);
+  const canSend = !!message.trim() && !pending.length && !reading && !tooLong && !sending && (!running || options.queue);
 
   const submit = async () => {
-    if (!canSend || disabled) return;
+    if (!canSend || disabled || readComposerDraft(draft).sending) return;
+    const submitted = JSON.stringify([val, blocks]);
     setSending(true);
     setError(null);
     const key = draft;
     try {
       await onSend(message);
       // 新建对话时发送完成前组件就换成了新对话的输入框（key 变了），这里直接清掉发出时那份草稿。
-      saveDraft(key, "");
-      setVal("");
-      setBlocks([]);
-      setPending([]);
+      const current = readComposerDraft(key);
+      if (JSON.stringify([current.text, current.blocks]) === submitted) clearComposerDraft(key);
       if (ref.current) ref.current.style.height = "auto";
     } catch (err) {
       // 发送失败：内容留在输入框里，可以直接再发。
@@ -111,7 +105,11 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
   const isFileDrag = (e: React.DragEvent) => Array.from(e.dataTransfer?.types ?? []).includes("Files");
   const hasFileDrag = (e: React.DragEvent) => options.fileUpload && isFileDrag(e);
   const stopButton = running && onStop && (
-    <button type="button" className="send stop" onClick={() => { setStopping(true); void Promise.resolve(onStop()).catch(() => setStopping(false)); }}
+    <button type="button" className="send stop" onClick={async () => {
+      if (stopLock.current) return;
+      stopLock.current = true; setStopping(true); setError(null);
+      try { await onStop(); } catch (error) { stopLock.current = false; setStopping(false); setError(error instanceof Error ? error.message : "停止失败，请重试"); }
+    }}
       disabled={stopping} aria-label={stopping ? "正在停止" : "停止当前轮次"} title={stopping ? "正在停止…" : "停止当前轮次"}>{Icon.stop()}</button>
   );
 
@@ -119,7 +117,7 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
     <div className="composer">
       <div className="composer-inner">
         {(error || tooLong) && (
-          <div className="cli-comp-err">⚠ {tooLong ? `内容共 ${fmtCount(total)} 字，超过单条消息上限 ${fmtCount(MAX_MESSAGE_CHARS)} 字，请删减或分几条发送` : error}</div>
+          <div className="cli-comp-err" role="alert">⚠ {tooLong ? `内容共 ${fmtCount(total)} 字，超过单条消息上限 ${fmtCount(MAX_MESSAGE_CHARS)} 字，请删减或分几条发送` : error}</div>
         )}
         <div
           className={`comp-box${dragging ? " dropping" : ""}`}
@@ -151,10 +149,11 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
           )}
           <div className="comp-area">
             <textarea
-              ref={ref} rows={2} value={val} disabled={disabled} aria-label="消息内容"
+              ref={ref} rows={2} value={val} disabled={disabled || sending} aria-label="消息内容"
               placeholder={disabled ? disabledHint ?? "暂时不能发送" : taskControl?.paused ? "任务已暂停，可补充消息，继续后依次执行…" : running && options.queue ? options.placeholderRunning : placeholder}
               onChange={(e) => { setVal(e.target.value); autosize(e.target); }}
-              onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); void submit(); } }}
+              onCompositionStart={() => { composing.current = true; }} onCompositionEnd={() => { composing.current = false; }}
+              onKeyDown={(e) => { if (e.nativeEvent.isComposing || composing.current || e.keyCode === 229) return; if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void submit(); } }}
               onPaste={(e) => {
                 const files = Array.from(e.clipboardData?.files ?? []);
                 if (files.length) {
@@ -176,9 +175,10 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
           <div className="comp-foot">
             {options.fileUpload && !disabled && <>
               <input ref={fileRef} type="file" accept={ACCEPT_ATTR} multiple hidden onChange={(e) => { addFiles(Array.from(e.target.files ?? [])); e.target.value = ""; }} />
-              <button type="button" className="cli-attach" title={`添加文档：${ACCEPTED_LABEL}（也可拖拽进来），内容会转成文字发送`}
-                onClick={() => fileRef.current?.click()}>{Icon.clip()} {options.fileButtonText}</button>
+              <button type="button" className="cli-attach" disabled={sending} aria-label="添加文档" title={`添加文档：${ACCEPTED_LABEL}（也可拖拽进来），内容会转成文字发送`}
+                onClick={() => fileRef.current?.click()}>{Icon.plus()} <span>{options.fileButtonText}</span></button>
             </>}
+            {toolbar}
             {options.hints && !disabled && <span className="hint comp-hint-extra">Shift + Enter 换行</span>}
             <span className="spacer" />
             {options.charCount && total > 0 && <span className={`hint cli-count ${tooLong ? "over" : ""}`}>{fmtCount(total)} 字</span>}
@@ -187,7 +187,7 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
               {taskControl && <button type="button" className="btn btn-line cli-task-control" disabled={controlling}
                 aria-label={taskControl.paused ? "继续任务" : "暂停任务"}
                 title={taskControl.paused ? "重新派发当前子任务，排队消息随后执行" : "暂停当前子任务，继续时重新派发"}
-                onClick={async () => { setControlling(true); try { await taskControl.onToggle(); } catch { /* 错误由调用方显示，保留草稿和当前状态 */ } finally { setControlling(false); } }}>
+                onClick={async () => { if (controlLock.current) return; controlLock.current = true; setControlling(true); try { await taskControl.onToggle(); } catch (error) { setError(error instanceof Error ? error.message : "执行控制失败，请重试"); } finally { controlLock.current = false; setControlling(false); } }}>
                 {taskControl.paused ? Icon.play() : Icon.pause()}<span>{controlling ? "处理中…" : taskControl.paused ? "继续" : "暂停"}</span>
               </button>}
               {(!running || options.queue) && <button type="button" className={`send cli-send${running ? " queue" : ""}`} disabled={disabled || !canSend}

package/src/chat/RunControls.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { Fragment, useEffect, useRef, useState } from "react";
+import { Icon } from "../ui/icons";
+import { Popover } from "../ui/Popover";
+import { modelLabel } from "../ui/format";
+import { acquireConfiguration, useConfigurationBusy } from "./configuration";
+export interface RunOption { value: string; label: string; sub: string; group?: string }
+export interface RunCapabilities { models: RunOption[]; reasoningOptions: RunOption[]; permissionModes: RunOption[]; supportsCustomModels?: boolean }
+export interface RunTask { id: string; agent?: string; model?: string | null; reasoning?: string | null; permission_mode?: string | null; resolved_model?: string | null }
+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);
+
+export type RunControlProps = {
+  task: RunTask;
+  agents?: {id:string;label:string;disabled?:boolean}[];
+  onSetAgent?: (id:string)=>Promise<void>;
+  caps?: RunCapabilities;
+  defaults?: { model?: string | null; reasoning?: string | null; permission_mode?: string | null };
+  disabled: boolean;
+  onSetModel: (value: string | null) => Promise<void>;
+  onSetReasoning: (value: string | null) => Promise<void>;
+  onSetPermission: (value: string | null) => Promise<void>;
+  onBusyChange?: (busy: boolean) => void;
+};
+
+// Both the pre-start view and composer use the same capability-driven controls.
+// 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 [custom, setCustom] = useState("");
+  const busy = useConfigurationBusy(task.id);
+  const currentTask = useRef(task.id); currentTask.current = task.id;
+  useEffect(() => { setOpen(null); setError(""); }, [task.id]);
+  const [error, setError] = useState("");
+  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 effectivePermission = task.permission_mode ?? defaults?.permission_mode ?? caps?.permissionModes[0]?.value ?? null;
+  const model = models.find((m) => m.value === effectiveModel)?.label ?? modelLabel(effectiveModel ?? "");
+  const permission = permissions.find((p) => p.value === effectivePermission);
+  const change = async (save: () => Promise<void>) => {
+    if (disabled) return;
+    const release = acquireConfiguration(task.id);
+    if (!release) return;
+    const targetId = task.id;
+    setError("");
+    try { onBusyChange?.(true); await save(); if(currentTask.current === targetId) setOpen(null); }
+    catch (e) { if(currentTask.current === targetId) setError(e instanceof Error ? e.message : "设置保存失败，请重试。"); }
+    finally { release(); onBusyChange?.(false); }
+  };
+  const locked = disabled || busy || !caps;
+  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"); }}>
+        {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()}
+        </button>)}
+        {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>
+      {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()}
+          </button>)}
+        </>}
+        {busy && <div className="pop-sec" role="status">正在保存…</div>}
+        {error && <div className="control-error" role="alert">{error}</div>}
+      </Popover>}
+    </div>
+  </>;
+}

package/src/chat/configuration.ts

@@ -0,0 +1,15 @@
+import { useSyncExternalStore } from 'react';
+// A task's setting request outlives its controls when the user changes tasks.
+const pending = new Set<string>();
+const listeners = new Set<() => void>();
+const notify = () => listeners.forEach(listener => listener());
+export const isConfigurationBusy = (taskId:string) => pending.has(taskId);
+export function acquireConfiguration(taskId:string): (()=>void) | null {
+  if (pending.has(taskId)) return null;
+  pending.add(taskId); notify();
+  let active=true;
+  return () => { if(active){active=false;pending.delete(taskId);notify();} };
+}
+export function useConfigurationBusy(taskId:string) {
+  return useSyncExternalStore(listener=>{listeners.add(listener);return()=>listeners.delete(listener);},()=>isConfigurationBusy(taskId),()=>false);
+}

package/src/chat/draft.ts

@@ -0,0 +1,41 @@
+import { useSyncExternalStore } from "react";
+import type { TextBlock } from "../core/blocks";
+export type PendingFile = { key: string; name: string; status: "reading" | "error"; error?: string };
+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();
+const entries = new Map<string, { state: ComposerDraft; stamp: string }>();
+const listeners = new Set<() => void>();
+const textKey = (id: string) => `cli-ui:draft:${id}`;
+const dataKey = (id: string) => `${textKey(id)}:data`;
+const stamp = (id: string) => { try { return JSON.stringify([localStorage.getItem(textKey(id)), localStorage.getItem(dataKey(id))]); } catch { return ""; } };
+export function readComposerDraft(id: string): ComposerDraft {
+  const stored = stamp(id), cached = entries.get(id);
+  if (cached?.stamp === stored) return cached.state;
+  let state = empty();
+  try {
+    state.text = localStorage.getItem(textKey(id)) ?? "";
+    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 || "页面重载中断了解析，请移除后重新添加" })) : [];
+    }
+  } catch { /* Old text drafts and restricted storage remain usable. */ }
+  entries.set(id, { state, stamp: stored });
+  return state;
+}
+export function updateComposerDraft(id: string, update: (state: ComposerDraft) => ComposerDraft) {
+  const previous = readComposerDraft(id);
+  const state = { ...update(previous), revision: previous.revision + 1 };
+  try {
+    if (state.text) localStorage.setItem(textKey(id), state.text); else localStorage.removeItem(textKey(id));
+    if (state.blocks.length || state.pending.length) localStorage.setItem(dataKey(id), JSON.stringify({ version: 1, blocks: state.blocks, pending: state.pending })); else localStorage.removeItem(dataKey(id));
+  } catch { /* Keep the in-memory draft even if storage is full. */ }
+  entries.set(id, { state, stamp: stamp(id) });
+  listeners.forEach(listener => listener());
+  return state;
+}
+export function useComposerDraft(id: string) {
+  return useSyncExternalStore(listener => { listeners.add(listener); return () => listeners.delete(listener); }, () => readComposerDraft(id), () => server);
+}
+export function clearComposerDraft(id: string) { updateComposerDraft(id, () => empty()); }

package/src/chat/export.ts

@@ -1,5 +1,5 @@
-import type { CenterTurn, Msg } from "../core/types.js";
-import { toolDataOf } from "../ui/transcriptModel.js";
+import type { CenterTurn, Msg } from "../core/types";
+import { toolDataOf } from "../ui/transcriptModel";
 
 /** 把对话过程导出成 Markdown 下载（对应 Operator 的「导出执行过程」，这里在前端用已加载的转录生成）。 */
 export function buildMarkdown(title: string, jobId: string, messages: Msg[], turns: CenterTurn[]): string {

package/src/components.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { CliMsgList as CenterMsgList, type CliMsgListProps as CenterMsgListProps } from "./msglist/CliMsgList";
+import { CliChat as CenterChat, type CliChatProps as CenterChatProps } from "./chat/CliChat";
+import { CliBoard as CenterBoard, type CliBoardProps as CenterBoardProps } from "./board/CliBoard";
+import { TasksColumn } from "./operator/node/TasksColumn";
+import { SessionView } from "./operator/node/SessionView";
+import { SessionRail } from "./operator/node/SessionRail";
+export interface CliMsgListProps extends CenterMsgListProps { operator?: ComponentProps<typeof TasksColumn> }
+export interface CliChatProps extends CenterChatProps { operator?: ComponentProps<typeof SessionView> }
+export interface CliBoardProps extends CenterBoardProps { operator?: ComponentProps<typeof SessionRail> }
+export function CliMsgList(props: CliMsgListProps) { return props.operator ? <TasksColumn {...props.operator}/> : <CenterMsgList {...props}/>; }
+export function CliChat(props: CliChatProps) { return props.operator ? <SessionView {...props.operator} board={{...props.operator.board,autoContext:props.operator.board?.autoContext??props.passiveContext,onFilesChange:props.operator.board?.onFilesChange??props.onFilesChange,onFilesWatch:props.operator.board?.onFilesWatch??props.onFilesWatch,onBoardContextChange:props.operator.board?.onBoardContextChange??props.onBoardContextChange}}/> : <CenterChat {...props}/>; }
+export function CliBoard(props: CliBoardProps) { return props.operator ? <SessionRail key={props.operator.task.id} {...props.operator} tabs={props.operator.tabs ?? props.tabs} availableTabs={props.operator.availableTabs ?? props.availableTabs} defaultTab={props.operator.defaultTab ?? props.defaultTab} autoContext={props.operator.autoContext ?? props.autoQuoteOpenFile} watchFiles={props.operator.watchFiles ?? props.watchFiles} fileWatchIntervalMs={props.operator.fileWatchIntervalMs ?? props.fileWatchIntervalMs} onFilesChange={props.operator.onFilesChange ?? props.onFilesChange} onFilesWatch={props.operator.onFilesWatch ?? props.onFilesWatch} onBoardContextChange={props.operator.onBoardContextChange ?? props.onBoardContextChange} onEvent={props.operator.onEvent ?? props.onEvent}/> : <CenterBoard {...props}/>; }

package/src/core/blocks.ts

@@ -12,7 +12,7 @@
  * 对 Agent 来说这也是清楚的分隔：哪段是附件、叫什么、在哪结束。
  */
 
-import { decodeText } from "./textDecode.js";
+import { decodeText } from "./textDecode";
 
 export interface TextBlock {
   /** 显示名：文件名，粘贴的文字为「粘贴的文本」。 */
@@ -142,7 +142,7 @@ export async function readFileText(file: File): Promise<string> {
   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}`);
   if (ext === ".xlsx" || ext === ".xlsm") {
-    const { readXlsx, sheetsToText } = await import("./xlsx.js");
+    const { readXlsx, sheetsToText } = await import("./xlsx");
     try {
       return normalizeText(sheetsToText(await readXlsx(await readAs(file, "buffer"))));
     } catch {

package/src/core/callbacks.ts

@@ -0,0 +1,8 @@
+/** A host subscriber must not interrupt state updates or another subscriber. */
+export function notifyCallback<T>(callback: ((value: T) => unknown) | undefined, value: T): void {
+  const report = (error: unknown) => console.error("[@spzxg/cli-ui] subscriber callback failed", error);
+  try {
+    const result = callback?.(value);
+    if (result && typeof (result as PromiseLike<unknown>).then === "function") void Promise.resolve(result).catch(report);
+  } catch (error) { report(error); }
+}

package/src/core/client.ts

@@ -1,10 +1,10 @@
-import { createSseParser } from "./sse.js";
-import { NEW_TASK, parseConvKey } from "./conversation.js";
+import { createSseParser } from "./sse";
+import { NEW_TASK, parseConvKey } from "./conversation";
 import type {
   BoardInfo, BrowserMessage, BrowserStatus, CenterJob, CenterTask, CenterTurn, DiffResult, DirListing, FileInfo, Message,
   BatchStreamSnapshot, BrowserFramesState, NewConversationOptions, SendResult, StreamEnd, StreamItem, StreamSnapshot,
-} from "./types.js";
-import { decodeText } from "./textDecode.js";
+} from "./types";
+import { decodeText } from "./textDecode";
 
 /**
  * center 服务（cli-task-center）对话任务接口的浏览器端客户端。组件的数据全部从这里来。
@@ -141,6 +141,8 @@ export interface BoardBackend {
   /** fileUrl 给出的地址浏览器能直接打开（不需要额外请求头）。false 时看板先 fetch 再显示。 */
   directLinks: boolean;
   info(jobId: string): Promise<BoardInfo>;
+  /** 精准文件事件流；没有时组件明确降级为目录快照比对。 */
+  watchFiles?(jobId: string, handlers: { onEvent: (event: import("./types").WorkspaceFileBatch) => void; onClose: (error: CenterError | null) => void }): () => void;
   /** 目录（缺省根目录）或文件的信息。 */
   stat(jobId: string, path?: string): Promise<DirListing | FileInfo>;
   /** 文件地址（给 <img> / <iframe> / 下载链接用）。相对路径用路径式地址，HTML 里的相对资源能跟着解析。 */
@@ -171,7 +173,7 @@ export interface BoardBackend {
   browserStatus(jobId: string): Promise<BrowserStatus>;
   browserAction(jobId: string, action: "open" | "close" | "takeover" | "handback"): Promise<BrowserStatus>;
   /** 浏览器状态实时流；返回停止函数。onClose 在断开时调用（error 为 null 表示正常结束）。 */
-  browserEvents(jobId: string, handlers: { onStatus: (status: BrowserStatus) => void; onClose?: (error: CenterError | null) => void }): () => void;
+  browserEvents(jobId: string, handlers: { onStatus: (status: BrowserStatus) => void; onClose?: (error: CenterError | null) => void; /** Recoverable transport disruption; subscription remains active. */ onError?: (error: CenterError) => void }): () => void;
   /** 浏览器实时画面；onViewer 给出发输入要用的 viewer id。 */
   browserFrames(jobId: string, handlers: { onViewer: (viewer: string) => void; onMessage: (message: BrowserMessage) => void; onEnd?: (end: { reason: string; detail?: string }) => void; onClose?: (error: CenterError | null) => void }): () => void;
   browserInput(jobId: string, viewer: string, events: Array<Record<string, unknown>>): Promise<void>;
@@ -546,7 +548,7 @@ function createBoardClient(
         if (ctl.signal.aborted) reject(new DOMException("aborted", "AbortError"));
         ctl.signal.addEventListener("abort", () => reject(new DOMException("aborted", "AbortError")), { once: true });
       });
-      response = await Promise.race([doFetch(boardFileUrl(base, jobId, path), { headers: headers(extra), signal: ctl.signal }), stopped]);
+      response = await Promise.race([doFetch(boardFileUrl(base, jobId, path), { headers: headers(extra), signal: ctl.signal, cache: "no-store" }), stopped]);
     } catch (error) {
       release();
       if (signal?.aborted) throw aborted();

package/src/core/conversation.ts

@@ -6,9 +6,9 @@
  *   · 节点转录（transcript + node 事件）：Agent 实际的对话过程，规则与 Operator 的 useTaskStream 一致。
  * 界面以节点转录为主；转录还没有（没派发、节点连不上）时用轮次的 input / reply 兜底。
  */
-import { isBatchSnapshot, type AskAnswers, type AskQuestion, type BatchStreamSnapshot, type BatchStreamTask, type CenterTurn, type ConversationClosedCallback, type ConversationTurnCallback, type JobStatus, type Message, type Msg, type NodeEvent, type StreamItem, type StreamSnapshot, type StreamTask, type ToolData, type TurnUsage } from "./types.js";
-import { indexFromEnd, mergeSnapshot, prependOlder, toolDataOf } from "../ui/transcriptModel.js";
-import { formatAnswersText } from "../ui/format.js";
+import { isBatchSnapshot, type AskAnswers, type AskQuestion, type BatchStreamSnapshot, type BatchStreamTask, type CenterTurn, type ConversationClosedCallback, type ConversationTurnCallback, type JobStatus, type Message, type Msg, type NodeEvent, type StreamItem, type StreamSnapshot, type StreamTask, type ToolData, type TurnUsage } from "./types";
+import { indexFromEnd, mergeSnapshot, prependOlder, toolDataOf } from "../ui/transcriptModel";
+import { formatAnswersText } from "../ui/format";
 
 export const TERMINAL_TURN = new Set(["succeeded", "failed", "cancelled", "merged"]);
 export const ACTIVE_TURN = new Set(["queued", "dispatching", "running"]);

package/src/core/id.ts

@@ -0,0 +1,15 @@
+/** Correlation/draft IDs only: never use this fallback as a credential or token. */
+let sequence = 0;
+export function clientId(): string {
+  try { if (typeof globalThis.crypto?.randomUUID === 'function') return globalThis.crypto.randomUUID(); } catch { /* Fall back in restricted or insecure contexts. */ }
+  try {
+    if (typeof globalThis.crypto?.getRandomValues === 'function') {
+      const bytes = globalThis.crypto.getRandomValues(new Uint8Array(16));
+      bytes[6] = (bytes[6] & 0x0f) | 0x40;
+      bytes[8] = (bytes[8] & 0x3f) | 0x80;
+      const hex = Array.from(bytes, value => value.toString(16).padStart(2, '0')).join('');
+      return `${hex.slice(0,8)}-${hex.slice(8,12)}-${hex.slice(12,16)}-${hex.slice(16,20)}-${hex.slice(20)}`;
+    }
+  } catch { /* Drafts still work when Web Crypto is unavailable. */ }
+  return `${Date.now().toString(36)}-${(++sequence).toString(36)}-${Math.random().toString(36).slice(2,10)}`;
+}

package/src/core/identity.ts

@@ -0,0 +1,33 @@
+import type { CenterClientOptions } from './client';
+import { clientId } from './id';
+// A synchronous SHA-256 fingerprint partitions persistent drafts without putting
+// credentials in localStorage keys. It is never used for authentication.
+const K = [0x428a2f98,0x71374491,0xb5c0fbcf,0xe9b5dba5,0x3956c25b,0x59f111f1,0x923f82a4,0xab1c5ed5,0xd807aa98,0x12835b01,0x243185be,0x550c7dc3,0x72be5d74,0x80deb1fe,0x9bdc06a7,0xc19bf174,0xe49b69c1,0xefbe4786,0x0fc19dc6,0x240ca1cc,0x2de92c6f,0x4a7484aa,0x5cb0a9dc,0x76f988da,0x983e5152,0xa831c66d,0xb00327c8,0xbf597fc7,0xc6e00bf3,0xd5a79147,0x06ca6351,0x14292967,0x27b70a85,0x2e1b2138,0x4d2c6dfc,0x53380d13,0x650a7354,0x766a0abb,0x81c2c92e,0x92722c85,0xa2bfe8a1,0xa81a664b,0xc24b8b70,0xc76c51a3,0xd192e819,0xd6990624,0xf40e3585,0x106aa070,0x19a4c116,0x1e376c08,0x2748774c,0x34b0bcb5,0x391c0cb3,0x4ed8aa4a,0x5b9cca4f,0x682e6ff3,0x748f82ee,0x78a5636f,0x84c87814,0x8cc70208,0x90befffa,0xa4506ceb,0xbef9a3f7,0xc67178f2];
+const rotate = (x:number,n:number)=>(x>>>n)|(x<<(32-n));
+export function connectionFingerprint(text:string):string {
+ const raw=new TextEncoder().encode(text),data=new Uint8Array(Math.ceil((raw.length+9)/64)*64);data.set(raw);data[raw.length]=128;
+ const view=new DataView(data.buffer);view.setUint32(data.length-8,Math.floor(raw.length/0x20000000));view.setUint32(data.length-4,(raw.length*8)>>>0);
+ const hash=[0x6a09e667,0xbb67ae85,0x3c6ef372,0xa54ff53a,0x510e527f,0x9b05688c,0x1f83d9ab,0x5be0cd19],w=new Int32Array(64);
+ for(let offset=0;offset<data.length;offset+=64){
+  for(let i=0;i<16;i++)w[i]=view.getInt32(offset+i*4);
+  for(let i=16;i<64;i++){const x=w[i-15],y=w[i-2];w[i]=(w[i-16]+(rotate(x,7)^rotate(x,18)^(x>>>3))+w[i-7]+(rotate(y,17)^rotate(y,19)^(y>>>10)))|0;}
+  let [a,b,c,d,e,f,g,h]=hash;
+  for(let i=0;i<64;i++){const t1=(h+(rotate(e,6)^rotate(e,11)^rotate(e,25))+((e&f)^(~e&g))+K[i]+w[i])|0,t2=((rotate(a,2)^rotate(a,13)^rotate(a,22))+((a&b)^(a&c)^(b&c)))|0;
+   h=g;g=f;f=e;e=(d+t1)|0;d=c;c=b;b=a;a=(t1+t2)|0;}
+  [a,b,c,d,e,f,g,h].forEach((value,i)=>{hash[i]=(hash[i]+value)|0;});
+ }
+ return hash.map(value=>(value>>>0).toString(16).padStart(8,'0')).join('');
+}
+const customScopes=new WeakMap<object,string>();
+export function connectionDraftScope(options:CenterClientOptions&{namespace?:string|null;client?:object}):string {
+ // Custom transports may hide cookies or credentials. Isolate by object identity
+ // rather than pretending their URL proves the account identity.
+ const headers = options.headers?.() ?? {};
+ const signature=JSON.stringify([options.baseUrl?.replace(/\/+$/,'')??'',options.token??'',options.line??'',options.namespace??'',Object.keys(headers).sort().map(key=>[key,headers[key]])]);
+ const transport=options.client;
+ if(transport){let scope=customScopes.get(transport);if(!scope){scope=clientId();customScopes.set(transport,scope);}return `custom-${scope}:${connectionFingerprint(signature)}`;}
+ // Preserve the historical default same-origin draft keys. Cookie-auth hosts
+ // must supply an account-specific namespace and remount after account changes.
+ if(!options.baseUrl&&!options.token&&!options.line&&!options.namespace&&!Object.keys(headers).length)return '';
+ return connectionFingerprint(signature);
+}

package/src/core/provider.tsx

@@ -1,6 +1,8 @@
-import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore, type ReactNode } from "react";
-import { createCliStore, type CliEvent, type CliState, type CliStore, type CliStoreOptions } from "./store.js";
-import type { ConversationCallback, ConversationEndPayload, TurnEndPayload } from "./types.js";
+import { notifyCallback } from "./callbacks";
+import { Fragment, createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore, type ReactNode } from "react";
+import { connectionDraftScope } from "./identity";
+import { createCliStore, cloneWorkspaceEvent, type CliEvent, type CliState, type CliStore, type CliStoreOptions } from "./store";
+import type { ConversationCallback, ConversationEndPayload, TurnEndPayload } from "./types";
 
 /**
  * 积木的拼接点。放在同一个 <CliCenterProvider> 里的组件共享一个仓库，切换时一起变：
@@ -36,7 +38,12 @@ export interface CliCenterProviderProps extends CliStoreOptions, ResultHandlers
  * 结果通知：组件从实时流里看到一轮结束 / 对话结束时调用，全在浏览器里发生，**和 center 的 callback.url 无关**——
  * 不配 callback 也照样会调。载荷字段与 center 回调体一致，方便业务后端和前端用同一套代码解析。
  */
-export interface ResultHandlers {
+export interface WorkspaceHandlers {
+  onFilesChange?: (event: import("./types").WorkspaceChangeEvent) => void;
+  onFilesWatch?: (event: import("./types").WorkspaceWatchStatus) => void;
+  onBoardContextChange?: (event: Extract<CliEvent,{type:"board_context"}>) => void;
+}
+export interface ResultHandlers extends WorkspaceHandlers {
   /** 一轮结束（成功 / 失败 / 取消）。 */
   onTurnEnd?: (payload: TurnEndPayload) => void;
   /** 对话结束（关闭 / 取消 / 过期……）。 */
@@ -46,11 +53,14 @@ export interface ResultHandlers {
 }
 
 export function dispatchResult(event: CliEvent, handlers: ResultHandlers) {
-  if (event.type === "conversation_turn") { handlers.onTurnEnd?.(event.payload); handlers.onCallback?.(event.payload); }
-  else if (event.type === "conversation_closed") { handlers.onConversationEnd?.(event.payload); handlers.onCallback?.(event.payload); }
+  if (event.type === "conversation_turn") { notifyCallback(handlers.onTurnEnd, event.payload); notifyCallback(handlers.onCallback, event.payload); }
+  else if (event.type === "conversation_closed") { notifyCallback(handlers.onConversationEnd, event.payload); notifyCallback(handlers.onCallback, event.payload); }
+  else if(event.type === "files_changed") notifyCallback(handlers.onFilesChange,event);
+  else if(event.type === "files_watch") notifyCallback(handlers.onFilesWatch,event);
+  else if(event.type === "board_context") notifyCallback(handlers.onBoardContextChange,event);
 }
 
-export function CliCenterProvider({ store: external, selectedId, onEvent, onTurnEnd, onConversationEnd, onCallback, children, ...options }: CliCenterProviderProps) {
+export function CliCenterProvider({ store: external, selectedId, onEvent, onTurnEnd, onConversationEnd, onCallback, onFilesChange, onFilesWatch, onBoardContextChange, children, ...options }: CliCenterProviderProps) {
   // 连接参数只在建仓库时用一次：中途换 baseUrl / token 请换 key 重建。
   const optionsRef = useRef(options);
   const applied = useRef<string | null | undefined>(undefined);
@@ -69,12 +79,12 @@ export function CliCenterProvider({ store: external, selectedId, onEvent, onTurn
   const onEventRef = useRef(onEvent);
   onEventRef.current = onEvent;
   const resultRef = useRef<ResultHandlers>({});
-  resultRef.current = { onTurnEnd, onConversationEnd, onCallback };
+  resultRef.current = { onTurnEnd, onConversationEnd, onCallback, onFilesChange, onFilesWatch, onBoardContextChange };
   useEffect(() => store.on((event) => {
-    onEventRef.current?.(event);
+    notifyCallback(onEventRef.current, cloneWorkspaceEvent(event));
     dispatchResult(event, resultRef.current);
   }), [store]);
-  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
+  return <StoreContext.Provider value={store}><Fragment key={store.draftScope}>{children}</Fragment></StoreContext.Provider>;
 }
 
 export function useCliStoreContext(): CliStore | null {
@@ -96,11 +106,11 @@ export function useCliState<T>(selector: (state: CliState) => T): T {
 /** 组件外面没有 Provider 时，用组件自己的 props 包一层。 */
 export function withOwnProvider<P extends object>(props: P & CliStoreOptions & ResultHandlers & { onEvent?: (event: CliEvent) => void; store?: CliStore }, inner: ReactNode, hasContext: boolean) {
   if (hasContext) return inner;
-  const { baseUrl, token, line, headers, fetch, client, namespace, newConversation, createConversation, businessIdFor, onEvent, onTurnEnd, onConversationEnd, onCallback, store } = props;
+  const { baseUrl, token, line, headers, fetch, client, namespace, newConversation, createConversation, businessIdFor, onEvent, onTurnEnd, onConversationEnd, onCallback, onFilesChange, onFilesWatch, onBoardContextChange, store } = props;
   // 连接参数变了（换了中枢地址、令牌、产品线、命名空间）就换一个新仓库重连，不沿用旧连接。
-  const connection = [baseUrl ?? "", token ?? "", line ?? "", namespace ?? ""].join("\u0000");
+  const connection = connectionDraftScope({baseUrl,token,line,namespace,headers,fetch,client});
   return (
-    <CliCenterProvider key={store ? "external" : connection} {...{ baseUrl, token, line, headers, fetch, client, namespace, newConversation, createConversation, businessIdFor, onEvent, onTurnEnd, onConversationEnd, onCallback, store }}>
+    <CliCenterProvider key={store ? "external" : connection} {...{ baseUrl, token, line, headers, fetch, client, namespace, newConversation, createConversation, businessIdFor, onEvent, onTurnEnd, onConversationEnd, onCallback, onFilesChange, onFilesWatch, onBoardContextChange, store }}>
       {inner}
     </CliCenterProvider>
   );
@@ -117,7 +127,7 @@ export function useComponentEvents(onEvent: ((event: CliEvent) => void) | undefi
   useEffect(() => {
     if (!enabled || !store) return;
     return store.on((event) => {
-      ref.current.onEvent?.(event);
+      notifyCallback(ref.current.onEvent, cloneWorkspaceEvent(event));
       dispatchResult(event, ref.current.results);
     });
   }, [store, enabled]);