@spzxg/cli-ui 0.4.0 → 0.6.1

package/src/core/types.ts

@@ -224,7 +224,8 @@ export type NodeEvent =
 /** center 实时流 chunk.events 里的一项。 */
 export type StreamItem =
   /** remote_task_id：一次性任务的流里才有（大任务里可能同时有几个节点对话）。 */
-  | { type: "transcript"; remote_task_id?: string; messages: Message[] | null; pending: PendingMessage[] | null; running: boolean | null }
+  /** older：快照只有最新一段时，更早还有几条（往上翻时经 history 分页取）。旧版中枢没有 = 全量。 */
+  | { type: "transcript"; remote_task_id?: string; messages: Message[] | null; pending: PendingMessage[] | null; running: boolean | null; older?: number }
   | { type: "node"; remote_task_id?: string; event: NodeEvent }
   | { type: "turn"; turn: CenterTurn }
   | { type: "job"; job: { id: string; status: JobStatus; closed_reason?: string | null; node_id: string | null } }
@@ -368,8 +369,8 @@ export interface BoardInfo {
   remote_task_id?: string;
   node?: { id: string; health: string };
   files: boolean;
-  /** 节点开了浏览器功能。 */
-  browser: boolean;
+  /** 节点开了浏览器功能。null = 这次没探测出来（节点慢 / 暂时连不上），照常显示浏览器页签。 */
+  browser: boolean | null;
 }
 
 export interface FileEntry {
@@ -381,10 +382,14 @@ export interface FileEntry {
   mtime: number;
 }
 
-export interface DirListing { type: "dir"; path: string; entries: FileEntry[]; truncated: boolean }
+export interface DirListing { type: "dir"; path: string; entries: FileEntry[]; truncated: boolean; /** 目录里的条目总数（新版节点给）。 */ total?: number }
 export interface FileInfo { type: "file"; path: string; name: string; size: number; mtime: number; contentType: string; inline: boolean }
 
-export interface DiffFile { path: string; status: string; additions: number; deletions: number; binary: boolean; patch: string; truncated?: boolean }
+export interface DiffFile {
+  path: string; status: string; additions: number; deletions: number; binary: boolean; patch: string; truncated?: boolean;
+  /** 改动太多，这个文件的 diff 没有带上（节点对整个 diff 有总量上限）；文件本身照常可以打开。 */
+  omitted?: boolean;
+}
 /** Operator 的 /api/tasks/:id/diff（经 center 原样转发）。 */
 export interface DiffResult {
   isolated?: boolean;
@@ -395,6 +400,8 @@ export interface DiffResult {
   isDirty?: boolean;
   ahead?: number;
   alreadyMerged?: boolean;
+  /** 因为总量上限没带 diff 的文件数。 */
+  patchesOmitted?: number;
   error?: string;
   /** 有的节点只给一整段 unified diff。 */
   diff?: string;
@@ -420,4 +427,12 @@ export interface BrowserStatus {
 export type BrowserMessage =
   | { type: "frame"; data: string; metadata?: { deviceWidth: number; deviceHeight: number } }
   | { type: "page"; url?: string; title?: string }
-  | { type: "error"; message?: string };
+  | { type: "error"; message?: string }
+  /** 按了复制 / 剪切：选中的文字（只发给按键的人），写进本机剪贴板。 */
+  | { type: "clipboard"; text: string }
+  /** 网页弹出了 alert / confirm / prompt（画面里看不到，单独显示）。 */
+  | { type: "dialog"; dialogType: "alert" | "confirm" | "prompt" | "beforeunload"; message: string; defaultPrompt?: string }
+  | { type: "dialog_closed" };
+
+/** 浏览器实时连接（GET /browser/live）的画面连接状况。 */
+export type BrowserFramesState = { state: "idle" | "connecting" | "live" | "retrying"; detail?: string };

package/src/core/xlsx.ts

@@ -0,0 +1,142 @@
+// Excel（.xlsx / .xlsm）→ 纯文本：每个工作表一段 CSV，发给智能体。
+//
+// .xlsx 是 ZIP 里的一堆 XML：workbook.xml 列出工作表，sharedStrings.xml 是共享字符串，worksheets/sheetN.xml 是单元格。
+// 只取单元格的值（公式取缓存的结果），不要格式、图片、图表；日期按单元格格式认出来写成 2026-08-10（带时间的加上时分），
+// 百分比写成 0.6%（和表格里看到的一致）。
+// 老版 .xls（二进制）读不了，调用方提示另存为 .xlsx。
+
+export interface SheetText { name: string; hidden: boolean; rows: string[][] }
+
+const NS_MAIN = "http://schemas.openxmlformats.org/spreadsheetml/2006/main";
+const NS_REL = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
+
+/** 内置的日期 / 时间数字格式编号。 */
+const BUILTIN_DATE_FMTS = new Set([14, 15, 16, 17, 18, 19, 20, 21, 22, 27, 30, 36, 45, 46, 47, 50, 57]);
+
+const parseXml = (text: string) => new DOMParser().parseFromString(text, "application/xml");
+const els = (root: Document | Element, tag: string) => Array.from(root.getElementsByTagNameNS(NS_MAIN, tag));
+
+/** 「A1」→ 列号（从 0 开始）。 */
+export function columnIndex(ref: string) {
+  let n = 0;
+  for (const ch of ref) {
+    const c = ch.toUpperCase().charCodeAt(0);
+    if (c < 65 || c > 90) break;
+    n = n * 26 + (c - 64);
+  }
+  return n - 1;
+}
+
+/** 自定义格式里有年月日时（引号里的、[颜色] 不算）就当日期。 */
+function isDateFormat(code: string) {
+  const bare = code.replace(/"[^"]*"/g, "").replace(/\[[^\]]*\]/g, "").replace(/\\./g, "");
+  return /[ymdhs]/i.test(bare) && !/^[#0.,%E+\-\s]*$/i.test(bare);
+}
+
+/** Excel 序列日期 → 2026-08-10 / 2026-08-10 14:30。 */
+export function excelDate(serial: number) {
+  const ms = Math.round((serial - 25569) * 86_400_000); // 1970-01-01 = 25569
+  const d = new Date(ms);
+  if (Number.isNaN(d.getTime())) return String(serial);
+  const p = (n: number) => String(n).padStart(2, "0");
+  const date = `${d.getUTCFullYear()}-${p(d.getUTCMonth() + 1)}-${p(d.getUTCDate())}`;
+  const secs = d.getUTCHours() * 3600 + d.getUTCMinutes() * 60 + d.getUTCSeconds();
+  if (!secs) return date;
+  const time = `${p(d.getUTCHours())}:${p(d.getUTCMinutes())}${d.getUTCSeconds() ? `:${p(d.getUTCSeconds())}` : ""}`;
+  return serial < 1 ? time : `${date} ${time}`;
+}
+
+/** 单元格里的文字：<t> 连起来（富文本是多段 <r><t>），不要注音（<rPh>）。 */
+function richText(el: Element) {
+  return els(el, "t").filter((t) => t.parentElement?.localName !== "rPh").map((t) => t.textContent ?? "").join("");
+}
+
+/** 读出所有工作表（按工作簿里的顺序）。 */
+export async function readXlsx(data: ArrayBuffer): Promise<SheetText[]> {
+  // 按需加载（mammoth 也用它，不额外增加体积）。
+  const mod = (await import("jszip")) as unknown as { default?: typeof import("jszip") } & typeof import("jszip");
+  const JSZip = mod.default ?? mod;
+  const zip = await JSZip.loadAsync(data);
+  const read = async (path: string) => { const f = zip.file(path); return f ? f.async("string") : null; };
+
+  const workbook = await read("xl/workbook.xml");
+  if (!workbook) throw new Error("不是 Excel 工作簿");
+  const rels = new Map<string, string>();
+  const relsXml = await read("xl/_rels/workbook.xml.rels");
+  if (relsXml) {
+    for (const r of Array.from(parseXml(relsXml).getElementsByTagName("Relationship"))) {
+      const target = r.getAttribute("Target") ?? "";
+      rels.set(r.getAttribute("Id") ?? "", target.startsWith("/") ? target.slice(1) : `xl/${target}`);
+    }
+  }
+  const shared: string[] = [];
+  const sharedXml = await read("xl/sharedStrings.xml");
+  if (sharedXml) for (const si of els(parseXml(sharedXml), "si")) shared.push(richText(si));
+
+  // 哪些样式是日期 / 百分比：cellXfs 第 i 个 → numFmtId → 内置格式或自定义格式。
+  const dateStyles = new Set<number>();
+  const percentStyles = new Set<number>();
+  const stylesXml = await read("xl/styles.xml");
+  if (stylesXml) {
+    const styles = parseXml(stylesXml);
+    const custom = new Map(els(styles, "numFmt").map((f) => [Number(f.getAttribute("numFmtId")), f.getAttribute("formatCode") ?? ""]));
+    const xfs = els(styles, "cellXfs")[0];
+    if (xfs) {
+      Array.from(xfs.children).filter((x) => x.localName === "xf").forEach((xf, i) => {
+        const id = Number(xf.getAttribute("numFmtId") ?? 0);
+        const code = custom.get(id);
+        if (BUILTIN_DATE_FMTS.has(id) || (code !== undefined && isDateFormat(code))) dateStyles.add(i);
+        else if (id === 9 || id === 10 || (code !== undefined && code.replace(/"[^"]*"/g, "").includes("%"))) percentStyles.add(i);
+      });
+    }
+  }
+
+  const sheets: SheetText[] = [];
+  for (const s of els(parseXml(workbook), "sheet")) {
+    const name = s.getAttribute("name") ?? `Sheet${sheets.length + 1}`;
+    const path = rels.get(s.getAttributeNS(NS_REL, "id") ?? s.getAttribute("r:id") ?? "") ?? `xl/worksheets/sheet${sheets.length + 1}.xml`;
+    const xml = await read(path);
+    if (!xml) continue;
+    const rows: string[][] = [];
+    for (const row of els(parseXml(xml), "row")) {
+      const r = Number(row.getAttribute("r")) || rows.length + 1;
+      const cells: string[] = [];
+      let next = 0;
+      for (const c of Array.from(row.children).filter((x) => x.localName === "c")) {
+        const ref = c.getAttribute("r");
+        const col = ref ? columnIndex(ref) : next;
+        next = col + 1;
+        const type = c.getAttribute("t");
+        const v = els(c, "v")[0]?.textContent ?? "";
+        let value: string;
+        if (type === "s") value = shared[Number(v)] ?? "";
+        else if (type === "inlineStr") value = richText(c);
+        else if (type === "b") value = v === "1" ? "TRUE" : v === "0" ? "FALSE" : v;
+        else if (type === "str" || type === "e" || !v) value = v;
+        else if (dateStyles.has(Number(c.getAttribute("s") ?? -1)) && Number.isFinite(Number(v))) value = excelDate(Number(v));
+        else if (percentStyles.has(Number(c.getAttribute("s") ?? -1)) && Number.isFinite(Number(v))) value = `${Number((Number(v) * 100).toPrecision(12))}%`;
+        else value = v;
+        cells[col] = value;
+      }
+      rows[r - 1] = Array.from(cells, (x) => x ?? "");
+    }
+    const dense = Array.from(rows, (x) => x ?? []);
+    // 去掉末尾的空行、每行末尾的空格子。
+    while (dense.length && dense[dense.length - 1].every((x) => !x)) dense.pop();
+    for (const row of dense) while (row.length && !row[row.length - 1]) row.pop();
+    sheets.push({ name, hidden: (s.getAttribute("state") ?? "visible") !== "visible", rows: dense });
+  }
+  return sheets;
+}
+
+const csvCell = (v: string) => (/[",\n\r]/.test(v) ? `"${v.replace(/"/g, '""')}"` : v);
+
+/** 工作表 → 发给智能体的文字：每个工作表一个标题 + CSV。 */
+export function sheetsToText(sheets: SheetText[]) {
+  return sheets
+    .map((s) => {
+      const head = `## 工作表：${s.name}${s.hidden ? "（隐藏）" : ""}（${s.rows.length} 行）`;
+      return s.rows.length ? `${head}\n${s.rows.map((r) => r.map(csvCell).join(",")).join("\n")}` : `${head}\n（空）`;
+    })
+    .join("\n\n");
+}

package/src/elements.tsx

@@ -10,6 +10,8 @@
  *   <cli-board group="a"></cli-board>      （右侧看板：文件 / 改动 / 浏览器；对话里点文件会在这里打开）
  *   <cli-file-preview job-id="job_x" path="outputs/报告.md"></cli-file-preview>   （单独的文件预览 + 下载）
  *   <cli-browser job-id="job_x"></cli-browser>                                  （单独的浏览器实时画面）
+ *   <cli-split storage-key="a"> <cli-msglist …/> <cli-chat …/> <cli-board …/> </cli-split>
+ *                                    （可拖动分栏：子元素每个是一栏，栏之间左右拖动改宽度；panes='[{"size":300},{},{"size":"42%"}]'）
  *
  * 同一个 group 的元素共享一个仓库，切换时一起变：列表点哪个，对话和看板就显示哪个；不写 group 各自独立。
  * 要一起切换，group 里的元素就不要写 job-id（写了的只看自己那个）；从外面打开某个对话，给任意一个元素写
@@ -31,9 +33,15 @@ import { CliChat } from "./chat/CliChat.js";
 import { CliBoard, type BoardTab } from "./board/CliBoard.js";
 import { CliBrowserView, CliFilePreview } from "./board/blocks.js";
 import { createCliStore, type CliStore } from "./core/store.js";
+import { convKey } from "./core/conversation.js";
+import type { CliWorkspace } from "./board/workspace.js";
+import { attachSplit, type SplitHandle } from "./layout/split.js";
 
 const groups = new Map<string, CliStore>();
 
+// 服务端渲染（Next.js 等）时没有 HTMLElement：模块照样能导入，defineCliElements() 在服务端什么都不做。
+const Base = (typeof HTMLElement === "undefined" ? class {} : HTMLElement) as typeof HTMLElement;
+
 function storeFor(el: HTMLElement): CliStore | undefined {
   const group = el.getAttribute("group");
   if (!group) return undefined;
@@ -47,7 +55,7 @@ function storeFor(el: HTMLElement): CliStore | undefined {
   return store;
 }
 
-const ATTRS = ["base-url", "token", "line", "namespace", "group", "selected-id", "job-id", "task-id", "title", "color", "theme", "context", "read-only", "config", "new-conversation", "tabs", "default-tab", "file-open", "path"];
+const ATTRS = ["base-url", "token", "line", "namespace", "group", "selected-id", "job-id", "task-id", "title", "color", "theme", "context", "read-only", "config", "new-conversation", "tabs", "default-tab", "file-open", "path", "no-quote", "hidden"];
 
 function jsonAttr(el: HTMLElement, name: string): object | undefined {
   const raw = el.getAttribute(name);
@@ -65,7 +73,7 @@ function storeOptions(el: HTMLElement) {
   };
 }
 
-abstract class CliElement extends HTMLElement {
+abstract class CliElement extends Base {
   static observedAttributes = ATTRS;
   private root: Root | null = null;
   private ownStore: CliStore | undefined;
@@ -80,9 +88,40 @@ abstract class CliElement extends HTMLElement {
     if (this.root) this.render();
   }
 
+  /** 这个元素用的仓库（同一个 group 的元素共用一个）。高级用法：store.on(...)、store.select(...)。 */
+  get store(): CliStore {
+    return storeFor(this) ?? (this.ownStore ??= createCliStore(storeOptions(this)));
+  }
+  /** 元素自己写的对话（job-id + task-id）；没写时 null（跟着这一组的选中走）。 */
+  private ownKey(): string | null {
+    const job = this.getAttribute("job-id");
+    if (!job) return null;
+    const task = this.getAttribute("task-id");
+    return task ? convKey(job, task) : job;
+  }
+  /**
+   * 工作区文件接口：列文件、读文件、下载、打包、当前打开的文件。不传 jobId = 这个元素看的对话（没写 job-id 时是这一组选中的）。
+   * 看板可以隐藏（<cli-board hidden>）或者干脆不放，接口照样能用。
+   */
+  workspace(jobId?: string): CliWorkspace {
+    return this.store.workspace(jobId ?? this.ownKey() ?? undefined);
+  }
+  /**
+   * 追加项目背景：下一条消息发出时一起带给智能体。opts.jobId 不传 = 这个元素看的对话（还没有对话时，随新对话的第一条消息带上）。
+   * 返回这条背景的 id（同一个 id 再追加会替换）。
+   */
+  appendContext(text: string, opts: { title?: string; id?: string; jobId?: string } = {}): string {
+    const key = opts.jobId ?? this.ownKey() ?? this.store.getState().selected;
+    return this.store.appendContext(key, text, { title: opts.title, id: opts.id });
+  }
+  /** 去掉还没发出的补充背景（不传 id = 全部）。 */
+  removeContext(id?: string, jobId?: string) {
+    this.store.removeContext(jobId ?? this.ownKey() ?? this.store.getState().selected, id);
+  }
+
   connectedCallback() {
-    // 缺省撑满父容器；组件自己内部滚动（宿主给定高度即可）。
-    this.style.display ||= "block";
+    // 缺省撑满父容器；组件自己内部滚动（宿主给定高度即可）。hidden：不显示、不连接（接口照样能用）。
+    this.syncHidden();
     this.style.height ||= "100%";
     this.style.minHeight ||= "0";
     this.root ??= createRoot(this);
@@ -92,17 +131,23 @@ abstract class CliElement extends HTMLElement {
     // 移动节点时会先断开再连上：推到下一轮再卸载。
     queueMicrotask(() => { if (!this.isConnected) { this.root?.unmount(); this.root = null; } });
   }
-  attributeChangedCallback() { if (this.root) this.render(); }
+  attributeChangedCallback() { this.syncHidden(); if (this.root) this.render(); }
+  private syncHidden() {
+    if (this.hasAttribute("hidden")) this.style.display = "none";
+    else if (!this.style.display || this.style.display === "none") this.style.display = "block";
+  }
 
   private appliedSelection: string | null = null;
-  protected common() {
-    const store = storeFor(this) ?? (this.ownStore ??= createCliStore(storeOptions(this)));
-    // selected-id：这一组一起看哪个对话。属性变了才切（列表点击换了选中，不会被属性拉回去）。
+  /** selected-id：这一组一起看哪个对话。属性变了才切（列表点击换了选中，不会被属性拉回去）。隐藏的元素也生效。 */
+  private applySelection() {
     const selection = this.getAttribute("selected-id");
     if (selection !== null && selection !== this.appliedSelection) {
       this.appliedSelection = selection;
-      store.select(selection || null);
+      this.store.select(selection || null);
     }
+  }
+  protected common() {
+    const store = this.store;
     return {
       store,
       title: this.getAttribute("title") ?? undefined,
@@ -117,7 +162,11 @@ abstract class CliElement extends HTMLElement {
     };
   }
   protected abstract element(): React.ReactNode;
-  private render() { this.root?.render(this.element()); }
+  // 隐藏的元素什么都不渲染：不轮询、不占连接；workspace() / appendContext() 照样能用。
+  private render() {
+    this.applySelection();
+    this.root?.render(this.hasAttribute("hidden") ? null : this.element());
+  }
 }
 
 class CliMsgListElement extends CliElement {
@@ -146,7 +195,9 @@ class CliBoardElement extends CliElement {
     // 结果事件只由 <cli-chat> 发（同上）；看板只发 cli-event。
     const { onTurnEnd: _a, onConversationEnd: _b, onCallback: _c, title: _t, color: _k, config: _g, ...common } = this.common();
     const taskId = this.getAttribute("task-id");
-    return <CliBoard {...common} {...(jobId !== null ? { jobId: jobId || null } : {})} {...(taskId ? { taskId } : {})} tabs={tabs?.length ? tabs : undefined} defaultTab={defaultTab} readOnly={this.hasAttribute("read-only")} />;
+    return <CliBoard {...common} {...(jobId !== null ? { jobId: jobId || null } : {})} {...(taskId ? { taskId } : {})} tabs={tabs?.length ? tabs : undefined} defaultTab={defaultTab} readOnly={this.hasAttribute("read-only")}
+      // 同一个 group 里有对话：看板里「引用到对话」带进那个对话的下一条消息；no-quote 关掉。
+      quoteToChat={this.hasAttribute("group") && !this.hasAttribute("no-quote")} />;
   }
 }
 
@@ -166,10 +217,54 @@ class CliBrowserElement extends CliElement {
   }
 }
 
+/** <cli-split>：可拖动分栏（规则见 layout/split.ts）。属性 panes（JSON，每栏 size / min / max）、storage-key（记住宽度）。 */
+class CliSplitElement extends Base {
+  static observedAttributes = ["panes", "storage-key"];
+  private handle: SplitHandle | null = null;
+  private options() {
+    let panes: unknown;
+    try { panes = JSON.parse(this.getAttribute("panes") ?? "null"); } catch { panes = null; }
+    return {
+      ...(Array.isArray(panes) ? { panes } : {}),
+      storageKey: this.getAttribute("storage-key") ?? undefined,
+      onResize: (sizes: (number | null)[]) => this.dispatchEvent(new CustomEvent("cli-resize", { detail: { sizes } })),
+    };
+  }
+  connectedCallback() {
+    this.style.height ||= "100%";
+    this.handle ??= attachSplit(this, this.options());
+  }
+  disconnectedCallback() {
+    queueMicrotask(() => { if (!this.isConnected) { this.handle?.destroy(); this.handle = null; } });
+  }
+  attributeChangedCallback() { this.handle?.update(this.options()); }
+}
+
 export function defineCliElements() {
+  if (typeof customElements === "undefined") return;
   if (!customElements.get("cli-msglist")) customElements.define("cli-msglist", CliMsgListElement);
   if (!customElements.get("cli-chat")) customElements.define("cli-chat", CliChatElement);
   if (!customElements.get("cli-board")) customElements.define("cli-board", CliBoardElement);
   if (!customElements.get("cli-file-preview")) customElements.define("cli-file-preview", CliFilePreviewElement);
   if (!customElements.get("cli-browser")) customElements.define("cli-browser", CliBrowserElement);
+  if (!customElements.get("cli-split")) customElements.define("cli-split", CliSplitElement);
+}
+
+/** 元素上给业务方用的方法（<cli-msglist> / <cli-chat> / <cli-board> / <cli-file-preview> / <cli-browser> 都有）。 */
+export interface CliElementApi extends HTMLElement {
+  readonly store: CliStore;
+  config: object | undefined;
+  workspace(jobId?: string): CliWorkspace;
+  appendContext(text: string, opts?: { title?: string; id?: string; jobId?: string }): string;
+  removeContext(id?: string, jobId?: string): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "cli-msglist": CliElementApi;
+    "cli-chat": CliElementApi;
+    "cli-board": CliElementApi;
+    "cli-file-preview": CliElementApi;
+    "cli-browser": CliElementApi;
+  }
 }

package/src/index.ts

@@ -5,6 +5,7 @@
  *   cli-chat     对话（CliChat）
  *   cli-board    右侧看板：工作区文件（预览 / 下载）、改动、任务浏览器（CliBoard）
  *                 其中两个核心也能单独用：CliFilePreview（文件预览 + 下载）、CliBrowserView（浏览器实时画面）
+ *   CliSplit     可拖动分栏：把上面几个横着排，栏之间左右拖动改宽度（Web Component：<cli-split>）
  *
  * 单独用：
  *   <CliChat baseUrl="/api/center" jobId="job_xxx" />
@@ -20,17 +21,21 @@
  */
 export { CliMsgList, type CliMsgListProps } from "./msglist/CliMsgList.js";
 export { CliChat, type CliChatProps } from "./chat/CliChat.js";
-export { CliBoard, type CliBoardProps, type BoardTab } from "./board/CliBoard.js";
+export { CliBoard, type CliBoardProps, type BoardTab, type BoardExtraTab } from "./board/CliBoard.js";
+export { downloadFolder, zipFolder, listFolder, FOLDER_MAX_FILES, FOLDER_MAX_BYTES, type FolderResult, type FolderZip, type FolderProgress } from "./board/folderDownload.js";
+export { createWorkspace, WORKSPACE_TEXT_MAX, WORKSPACE_LIST_MAX, WORKSPACE_FILE_MAX, type CliWorkspace, type BoardView } from "./board/workspace.js";
 export { CliFilePreview, CliBrowserView, type CliFilePreviewProps, type CliBrowserViewProps } from "./board/blocks.js";
 export { FileViewer, downloadFile, type FileViewerProps, type FileAction } from "./board/FileViewer.js";
 export { BrowserPane } from "./board/BrowserPane.js";
+export { CliSplit, type CliSplitProps } from "./layout/CliSplit.js";
+export { attachSplit, type SplitPane, type SplitOptions, type SplitHandle } from "./layout/split.js";
 export { CliCenterProvider, useCliStore, useCliState, type CliCenterProviderProps, type ResultHandlers } from "./core/provider.js";
 
 export {
   resolveChatConfig, resolveMsgListConfig, DEFAULT_CHAT_CONFIG, DEFAULT_MSGLIST_CONFIG,
   type CliChatConfig, type CliMsgListConfig, type ResolvedChatConfig, type ResolvedMsgListConfig,
 } from "./core/config.js";
-export { createCliStore, type CliStore, type CliStoreOptions, type CliState, type CliEvent, type JobEntry, type OpenTarget } from "./core/store.js";
+export { createCliStore, CONTEXT_ITEM_MAX, type CliStore, type CliStoreOptions, type CliState, type CliEvent, type JobEntry, type OpenTarget, type BoardRef, type ContextItem } from "./core/store.js";
 export { createCenterClient, CenterError, boardFileUrl, type CenterClient, type CenterClientOptions, type StreamHandlers, type BoardBackend, type ConversationBackend } from "./core/client.js";
 export { viewMessages, isRunning, runningTurn, convKey, parseConvKey, NEW_TASK, type ConvState } from "./core/conversation.js";
 export {

package/src/layout/CliSplit.tsx

@@ -0,0 +1,53 @@
+/**
+ * 可拖动分栏（React 版）。每个子元素是一栏，栏之间可以左右拖动改宽度（规则见 split.ts）。
+ *
+ *   <CliCenterProvider baseUrl="/api/center" namespace="strategy">
+ *     <CliSplit storageKey="strategy" panes={[{ size: 300, min: 220, max: 480 }, { min: 360 }, { size: "42%", min: 320 }]}>
+ *       <CliMsgList />
+ *       <CliChat />
+ *       <CliBoard />
+ *     </CliSplit>
+ *   </CliCenterProvider>
+ *
+ * 三个组件在同一个 Provider 里照常联动（列表选中 → 对话和看板跟着切；对话里点文件 → 看板打开），分栏只管宽度。
+ */
+import { Children, useEffect, useRef, type CSSProperties, type ReactNode } from "react";
+import { attachSplit, type SplitHandle, type SplitPane } from "./split.js";
+
+export type CliSplitProps = {
+  children: ReactNode;
+  /** 每栏的初始宽度 / 最小 / 最大。写了 size 的是定宽栏，没写的占剩余宽度。缺省：第一栏 300px、最后一栏 42%、中间占剩余。 */
+  panes?: SplitPane[];
+  /** 记住拖好的宽度（localStorage）。 */
+  storageKey?: string;
+  onResize?: (sizes: (number | null)[]) => void;
+  className?: string;
+  style?: CSSProperties;
+};
+
+const defaultPanes = (n: number): SplitPane[] =>
+  n <= 1 ? [{}] : n === 2 ? [{ size: 300, min: 220, max: 520 }, { min: 360 }]
+    : Array.from({ length: n }, (_, i) => (i === 0 ? { size: 300, min: 220, max: 520 } : i === n - 1 ? { size: "42%", min: 320 } : { min: 360 }));
+
+export function CliSplit({ children, panes, storageKey, onResize, className, style }: CliSplitProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const handle = useRef<SplitHandle | null>(null);
+  const items = Children.toArray(children).filter(Boolean);
+  const onResizeRef = useRef(onResize);
+  onResizeRef.current = onResize;
+  const options = { panes: panes ?? defaultPanes(items.length), storageKey, onResize: (s: (number | null)[]) => onResizeRef.current?.(s) };
+  const sig = JSON.stringify([options.panes, storageKey, items.length]);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    handle.current = attachSplit(ref.current, options);
+    return () => { handle.current?.destroy(); handle.current = null; };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => { handle.current?.update(options); }, [sig]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div ref={ref} className={`cli-split ${className ?? ""}`} style={style}>
+      {items.map((child, i) => <div key={(child as { key?: string | null }).key ?? i} className="cli-split-pane">{child}</div>)}
+    </div>
+  );
+}