@spzxg/cli-ui 0.6.2 → 0.6.5

package/src/core/store.ts

@@ -10,12 +10,18 @@
  *
  * 单独用某个组件时它会自己建一个仓库；放进同一个 <CliCenterProvider>（或同一个 group 的 Web Component）就共享一个。
  */
-import { CenterError, createCenterClient, firstLine, type CenterClient, type CenterClientOptions } from "./client.js";
-import { addTurnsIfAbsent, applyItems, applyOlderPage, applySnapshot, closedCallback, convEnded, convKey, emptyConv, isChatTask, NEW_TASK, parseConvKey, TERMINAL_JOB, TERMINAL_TURN, turnCallback, upsertTurns, type ConvState } from "./conversation.js";
-import { formatAnswersText } from "../ui/format.js";
-import { backgroundBlock, charCount, MAX_MESSAGE_CHARS, serializeBlock } from "./blocks.js";
-import { createWorkspace, type BoardView, type CliWorkspace } from "../board/workspace.js";
-import type { AskAnswers, AskQuestion, CenterJob, CenterTurn, ConversationClosedCallback, ConversationTurnCallback, NewConversationOptions } from "./types.js";
+import { clientId } from "./id";
+import { connectionDraftScope } from "./identity";
+import { notifyCallback } from "./callbacks";
+import { CenterError, createCenterClient, firstLine, type CenterClient, type CenterClientOptions } from "./client";
+import { addTurnsIfAbsent, applyItems, applyOlderPage, applySnapshot, closedCallback, convEnded, convKey, emptyConv, isChatTask, NEW_TASK, parseConvKey, TERMINAL_JOB, TERMINAL_TURN, turnCallback, upsertTurns, type ConvState } from "./conversation";
+import { formatAnswersText } from "../ui/format";
+import { backgroundBlock, charCount, MAX_MESSAGE_CHARS, serializeBlock } from "./blocks";
+import { cloneBoardView, reportBoardOwner, activateBoardOwner, selectedBoardOwner, mergeBoardHistory, rememberBoardFile } from "../board/context";
+import { cloneWorkspaceChange, subscribeWorkspaceFiles, retryWorkspaceFiles, type WorkspaceWatchOptions } from "../board/fileWatch";
+import type { WorkspaceChangeEvent, WorkspaceWatchStatus } from "./types";
+import { createWorkspace, type BoardView, type CliWorkspace } from "../board/workspace";
+import type { AskAnswers, AskQuestion, CenterJob, CenterTurn, ConversationClosedCallback, ConversationTurnCallback, NewConversationOptions } from "./types";
 
 export interface JobEntry {
   job: CenterJob | null;
@@ -46,6 +52,8 @@ export interface CliState {
   viewing: Record<string, { ref: BoardRef; off: boolean }>;
   /** 看板现在的样子（按对话键）：正在看的文件、开着的文件页签、当前页签。没有看板时没有。 */
   boards: Record<string, BoardView>;
+  /** 最近看板背景，收起/卸载后保留，供下一条消息被动参考。 */
+  boardContext: Record<string, BoardView>;
   /** 业务方补充的项目背景（按对话键；"" = 还没建的新对话），随下一条消息发出（见 appendContext）。 */
   context: Record<string, ContextItem[]>;
 }
@@ -100,12 +108,24 @@ export type CliEvent =
   | { type: "board_ref"; key: string; refs: BoardRef[] }
   /** 看板上切了页签、打开 / 关掉了文件（view 为 null = 看板关了）。 */
   | { type: "board_change"; key: string; view: BoardView | null }
+  | { type: "board_context"; jobId: string; view: BoardView }
+  | WorkspaceChangeEvent
+  | WorkspaceWatchStatus
   /**
    * 补充背景变了：追加 / 去掉（pending 是还没发出的），或随消息发出了（sent 是这次发出的）。
    * key 是对话键；新对话还没建时是 ""。
    */
   | { type: "context"; key: string; pending: ContextItem[]; sent?: ContextItem[] };
 
+/** Public workspace metadata must not be shared between business listeners. */
+export function cloneWorkspaceEvent(event:CliEvent):CliEvent {
+  if(event.type==='files_changed')return cloneWorkspaceChange(event);
+  if(event.type==='files_watch')return {...event};
+  if(event.type==='board_context')return {...event,view:cloneBoardView(event.view)};
+  if(event.type==='board_change')return {...event,view:event.view?cloneBoardView(event.view):null};
+  return event;
+}
+
 /** 看板要打开的东西。 */
 export type OpenTarget = { kind: "file"; path: string } | { kind: "browser" } | { kind: "changes" } | { kind: "files"; path?: string }
   /** 宿主用 extraTabs 加的页签。 */
@@ -199,7 +219,7 @@ export function createCliStore(options: CliStoreOptions = {}) {
   // 列表只放宿主给的 jobIds 和本页里新建 / 接续出来的对话：不从 center 发现，也不从本地存储恢复——
   // 不传就不加载，免得把这个产品线令牌下别的业务、别的用户的对话列出来。
 
-  let state: CliState = { selected: null, jobIds: [], jobs: {}, convs: {}, listLoading: false, listError: null, refs: {}, viewing: {}, boards: {}, context: {} };
+  let state: CliState = { selected: null, jobIds: [], jobs: {}, convs: {}, listLoading: false, listError: null, refs: {}, viewing: {}, boards: {}, boardContext: {}, context: {} };
   const listeners = new Set<() => void>();
   const eventListeners = new Set<(event: CliEvent) => void>();
   const settledTurns = new Set<string>();
@@ -210,9 +230,18 @@ export function createCliStore(options: CliStoreOptions = {}) {
 
   const set = (next: Partial<CliState>) => {
     state = { ...state, ...next };
-    for (const fn of listeners) fn();
+    for (const fn of [...listeners]) notifyCallback(fn, undefined);
+  };
+  // Business callbacks may synchronously navigate or register more listeners.
+  // Preserve emission order and keep a fixed audience for each notification.
+  const eventQueue:Array<{event:CliEvent;listeners:Array<(event:CliEvent)=>void>}>=[];
+  let dispatching=false;
+  const emit = (event:CliEvent) => {
+    eventQueue.push({event,listeners:[...eventListeners]});if(dispatching)return;
+    dispatching=true;
+    try{while(eventQueue.length){const next=eventQueue.shift()!;for(const fn of next.listeners)notifyCallback(fn,cloneWorkspaceEvent(next.event));}}
+    finally{dispatching=false;}
   };
-  const emit = (event: CliEvent) => { for (const fn of eventListeners) fn(event); };
   const patchConv = (key: string, fn: (conv: ConvState) => ConvState) => {
     const prev = state.convs[key] ?? emptyConv(key);
     const next = fn(prev);
@@ -286,7 +315,7 @@ export function createCliStore(options: CliStoreOptions = {}) {
 
   function removeJob(jobId: string) {
     const ids = state.jobIds.filter((id) => id !== jobId);
-    set({ jobIds: ids, selected: state.selected === jobId ? null : state.selected });
+    set({ jobIds: ids, selected: state.selected && parseConvKey(state.selected).jobId === jobId ? null : state.selected });
   }
 
   /** 对话接续：旧 job 换成新 job（列表位置不变，选中跟过去）。oldId / newId 可以是对话键。 */
@@ -723,15 +752,44 @@ export function createCliStore(options: CliStoreOptions = {}) {
   }
 
   // ── 看板现在的样子（给业务方：当前打开的文件等）────────
-  function reportBoard(key: string, view: BoardView | null, owner = "default") {
-    const top = latestReport(boardSources, key, owner, view ? { ...view, files: [...view.files] } : null);
-    const cur = state.boards[key];
-    if (!top && !cur) return;
-    if (top && cur && cur.tab === top.tab && cur.dir === top.dir && cur.file === top.file && cur.files.join("\n") === top.files.join("\n")) return;
-    const next = { ...state.boards };
-    if (top) next[key] = top; else delete next[key];
-    set({ boards: next });
-    emit({ type: "board_change", key, view: top ? { ...top, files: [...top.files] } : null });
+  function applyBoardSelection(key:string,top:BoardView|null,history:import("../board/workspace").BoardFile[]) {
+    const current=state.boards[key],previous=state.boardContext[key];
+    const boardChanged=JSON.stringify(top)!==JSON.stringify(current??null);
+    const retained=top?{...cloneBoardView(top),history,visible:top.visible!==false}:previous?{...cloneBoardView(previous),history,visible:false}:null;
+    const contextChanged=!!retained&&JSON.stringify(previous)!==JSON.stringify(retained);
+    if(!boardChanged&&!contextChanged)return;
+    const boards={...state.boards};if(top)boards[key]=cloneBoardView(top);else delete boards[key];
+    // Commit both public views before subscribers can read them or navigate again.
+    set({...(boardChanged?{boards}:{}),...(contextChanged?{boardContext:{...state.boardContext,[key]:retained!}}:{})});
+    if(boardChanged&&state.boards[key]===boards[key])emit({type:"board_change",key,view:top?cloneBoardView(top):null});
+    // A reentrant callback may already have selected a newer file. Do not emit
+    // or restore the older automatic context over that newer selection.
+    if(contextChanged&&state.boardContext[key]===retained)emit({type:"board_context",jobId:key,view:cloneBoardView(retained!)});
+  }
+  function reportBoard(key:string,view:BoardView|null,owner="default") {
+    const sources=boardSources.get(key)??new Map<string,BoardView>();
+    let history=state.boardContext[key]?.history??[];
+    if(view){history=mergeBoardHistory(history,sources.get(owner),view);reportBoardOwner(sources,owner,cloneBoardView(view));}
+    else sources.delete(owner);
+    if(sources.size)boardSources.set(key,sources);else boardSources.delete(key);
+    const top=selectedBoardOwner(sources)?.[1]??null;applyBoardSelection(key,top,history);
+  }
+  function activateBoard(key:string,owner:string) {
+    const sources=boardSources.get(key);if(!sources)return;
+    const top=activateBoardOwner(sources,owner)?.[1];if(!top)return;
+    const file=top.current??(top.file?{path:top.file,sourceId:key}:null);
+    const history=file?rememberBoardFile(state.boardContext[key]?.history??[],file):state.boardContext[key]?.history??[];
+    applyBoardSelection(key,top,history);
+  }
+  const fileSubscriptions = new Map<string,{listeners:Set<{change?:(event:WorkspaceChangeEvent)=>void;status?:WorkspaceWatchOptions['onStatus']}>;stop:()=>void;status?:WorkspaceWatchStatus}>();
+  function watchWorkspace(key:string,listener?:(event:WorkspaceChangeEvent)=>void,options:WorkspaceWatchOptions={}) {
+    if(!client.board) throw new Error("当前后端不支持工作区文件订阅");
+    const item={change:listener,status:options.onStatus};let subscription=fileSubscriptions.get(key);
+    if(!subscription){
+      subscription={listeners:new Set([item]),stop:()=>{}};fileSubscriptions.set(key,subscription);const owned=subscription;
+      owned.stop=subscribeWorkspaceFiles(client.board,key,event=>{emit(event);for(const next of [...owned.listeners])notifyCallback(next.change,cloneWorkspaceChange(event));},{...options,onStatus:status=>{owned.status=status;emit(status);for(const next of [...owned.listeners])notifyCallback(next.status,{...status});}});
+    }else{subscription.listeners.add(item);if(subscription.status)notifyCallback(item.status,{...subscription.status});retryWorkspaceFiles(client.board,key);}
+    const owned=subscription;let active=true;return()=>{if(!active)return;active=false;owned.listeners.delete(item);if(!owned.listeners.size){if(fileSubscriptions.get(key)===owned)fileSubscriptions.delete(key);owned.stop();}};
   }
 
   // ── 补充背景：业务方随时追加，随下一条消息发给智能体 ────────
@@ -773,6 +831,8 @@ export function createCliStore(options: CliStoreOptions = {}) {
       backend: client.board,
       key: k,
       view: () => state.boards[k],
+      context: () => state.boardContext[k] ? cloneBoardView(state.boardContext[k]) : null,
+      watch: (listener, options) => watchWorkspace(k,listener,options),
       open: (path) => openInBoard(k, { kind: "file", path }),
     });
   }
@@ -802,6 +862,7 @@ export function createCliStore(options: CliStoreOptions = {}) {
 
   return {
     client,
+    draftScope: connectionDraftScope(options),
     getState: () => state,
     /** 在看板里打开文件 / 浏览器 / 改动。返回有没有看板接住。 */
     openInBoard,
@@ -821,11 +882,11 @@ export function createCliStore(options: CliStoreOptions = {}) {
     addRef, removeRef, takeRefs, restoreRefs,
     setViewing, dismissViewing, takeViewing, restoreViewing,
     /** 看板报告自己的样子（看板组件用）。 */
-    reportBoard,
+    reportBoard, activateBoard,
     /** 业务方追加项目背景：随下一条消息发给智能体。 */
     appendContext, removeContext, pendingContext,
     /** 工作区文件接口（不显示看板也能用）：列文件、读文件、下载、打包。不传 = 当前选中的对话。 */
-    workspace,
+    workspace, watchWorkspace,
     open, send, answerAsk, cancelTurn, close, loadOlder,
   };
 }
@@ -854,8 +915,4 @@ async function retryOnce<T>(fn: () => Promise<T>): Promise<T> {
   }
 }
 
-function uid() {
-  const cryptoObj = globalThis.crypto as Crypto | undefined;
-  if (cryptoObj?.randomUUID) return cryptoObj.randomUUID();
-  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
-}
+const uid = clientId;

package/src/core/types.ts

@@ -380,6 +380,8 @@ export interface FileEntry {
   type: "dir" | "file";
   size: number;
   mtime: number;
+  /** Opaque metadata fingerprint for reconnect reconciliation, not an immutable content version. */
+  changeToken?: string;
 }
 
 export interface DirListing { type: "dir"; path: string; entries: FileEntry[]; truncated: boolean; /** 目录里的条目总数（新版节点给）。 */ total?: number }
@@ -436,3 +438,35 @@ export type BrowserMessage =
 
 /** 浏览器实时连接（GET /browser/live）的画面连接状况。 */
 export type BrowserFramesState = { state: "idle" | "connecting" | "live" | "retrying"; detail?: string };
+
+
+export interface WorkspaceFileChange {
+  kind: "created" | "modified" | "deleted";
+  path: string;
+  file?: FileEntry;
+  previous?: FileEntry;
+}
+export type WorkspaceFileBatch =
+  | { type: "snapshot"; files: FileEntry[]; revision?: string; complete: boolean }
+  | { type: "changes"; changes: WorkspaceFileChange[]; revision?: string; complete: boolean }
+  | { type: "resync"; reason: string; complete: false; revision?: string };
+export interface WorkspaceChangeEvent {
+  type: "files_changed";
+  /** 对话键；节点适配下是 task.id。 */
+  jobId: string;
+  mode: "events" | "poll";
+  coverage: "workspace" | "listed-files";
+  complete: boolean;
+  changes: WorkspaceFileChange[];
+  revision?: string;
+  resync?: boolean;
+}
+export interface WorkspaceWatchStatus {
+  type: "files_watch";
+  jobId: string;
+  state: "connecting" | "ready" | "reconnecting" | "error";
+  mode: "events" | "poll";
+  coverage: "workspace" | "listed-files";
+  complete: boolean;
+  error?: string;
+}

package/src/elements.tsx

@@ -28,34 +28,111 @@
  * 渲染在 light DOM 里（不用 Shadow DOM），样式靠页面引入 styles.css，作用域都在 .cli-ui 内。
  */
 import { createRoot, type Root } from "react-dom/client";
-import { CliMsgList } from "./msglist/CliMsgList.js";
-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";
+import { CliMsgList, CliChat, CliBoard } from "./components";
+import type { BoardTab } from "./board/CliBoard";
+import { CliBrowserView, CliFilePreview } from "./board/blocks";
+import { createCliStore, cloneWorkspaceEvent, type CliEvent, type CliStore } from "./core/store";
+import { convKey } from "./core/conversation";
+import type { CliWorkspace } from "./board/workspace";
+import { attachSplit, type SplitHandle } from "./layout/split";
 
-const groups = new Map<string, CliStore>();
+type StoreOptions = ReturnType<typeof storeOptions>;
+type GroupMember = { el: HTMLElement; refresh: () => void };
+type StoreBucket = { store: CliStore; options: StoreOptions; members: Set<GroupMember> };
+type StoreGroup = { buckets: Map<string, StoreBucket>; preferred: StoreBucket | null; owner: GroupMember | null; configured: boolean; members: Set<GroupMember> };
+type GroupBinding = { groupName: string; group: StoreGroup; bucket: StoreBucket };
+const groups = new Map<string, StoreGroup>();
+const STORE_ATTRS = ["base-url", "token", "line", "namespace", "new-conversation"] as const;
+const identity = (options: StoreOptions) => JSON.stringify(options);
+const configured = (el: HTMLElement) => STORE_ATTRS.some(name => el.hasAttribute(name));
+
+const memberships = new WeakMap<GroupMember, { groupName: string; group: StoreGroup }>();
+function notifyGroup(group: StoreGroup, except?: GroupMember) {
+  const peers = [...group.members];
+  queueMicrotask(() => { for (const peer of peers) if (peer !== except) peer.refresh(); });
+}
+function leaveGroup(member: GroupMember) {
+  const membership = memberships.get(member);
+  if (!membership) return;
+  const { groupName, group } = membership;
+  group.members.delete(member);
+  for (const [key, bucket] of group.buckets) {
+    bucket.members.delete(member);
+    if (!bucket.members.size && bucket !== group.preferred) group.buckets.delete(key);
+  }
+  if (group.owner === member) group.owner = null;
+  memberships.delete(member);
+  if (!group.members.size) groups.delete(groupName); else notifyGroup(group);
+}
+function releaseGroup(binding: GroupBinding, member: GroupMember, retainOwner = false) {
+  const { group, bucket } = binding;
+  bucket.members.delete(member);
+  if (!retainOwner && group.owner === member) group.owner = null;
+  if (!bucket.members.size && bucket !== group.preferred) group.buckets.delete(identity(bucket.options));
+  notifyGroup(group, member);
+}
+
+function inheritedOptions(el: HTMLElement, base: StoreOptions | null): StoreOptions {
+  if (!base) return storeOptions(el);
+  return {
+    baseUrl: el.hasAttribute("base-url") ? el.getAttribute("base-url")! : base.baseUrl,
+    token: el.hasAttribute("token") ? el.getAttribute("token")! : base.token,
+    line: el.hasAttribute("line") ? el.getAttribute("line")! : base.line,
+    namespace: el.hasAttribute("namespace") ? el.getAttribute("namespace")! : base.namespace,
+    newConversation: el.hasAttribute("new-conversation") ? jsonAttr(el, "new-conversation") : base.newConversation,
+  };
+}
 
 // 服务端渲染（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;
-  const baseUrl = el.getAttribute("base-url") ?? undefined;
-  const key = `${group}|${baseUrl ?? ""}`;
-  let store = groups.get(key);
-  if (!store) {
-    store = createCliStore(storeOptions(el));
-    groups.set(key, store);
+function storeFor(el: HTMLElement, member: GroupMember, previous?: GroupBinding): GroupBinding | undefined {
+  const groupName = el.getAttribute("group");
+  if (!groupName) { leaveGroup(member); return undefined; }
+  if (memberships.get(member)?.groupName !== groupName) leaveGroup(member);
+  let group = groups.get(groupName);
+  if (!group) {
+    group = { buckets: new Map(), preferred: null, owner: null, configured: false, members: new Set() };
+    groups.set(groupName, group);
   }
-  return store;
+  group.members.add(member);
+  memberships.set(member, { groupName, group });
+  const ownsDefaults = group.owner === member || (!group.configured && configured(el));
+  const matches = [...group.buckets.values()].filter(item => [...item.members].some(peer => configured(peer.el))).filter(item => {
+    const values = storeOptions(el);
+    return STORE_ATTRS.every(name => {
+      if (!el.hasAttribute(name)) return true;
+      const key = ({ "base-url": "baseUrl", token: "token", line: "line", namespace: "namespace", "new-conversation": "newConversation" } as const)[name as typeof STORE_ATTRS[number]];
+      return JSON.stringify(values[key as keyof StoreOptions]) === JSON.stringify(item.options[key as keyof StoreOptions]);
+    });
+  });
+  if (!ownsDefaults && matches.length > 1) throw new Error("同一 group 有多个连接配置，请明确设置 base-url、token、line 或 namespace，避免混用会话。");
+  const options = inheritedOptions(el, ownsDefaults ? null : matches[0]?.options ?? group.preferred?.options ?? null);
+  const key = identity(options);
+  let bucket = group.buckets.get(key);
+  const newBucket = !bucket;
+  if (!bucket) {
+    bucket = { store: createCliStore(options), options, members: new Set() };
+    group.buckets.set(key, bucket);
+  }
+  bucket.members.add(member);
+  if (newBucket) notifyGroup(group, member);
+  if (!group.preferred || ownsDefaults) {
+    const changed = group.preferred !== bucket;
+    group.preferred = bucket;
+    if (ownsDefaults) { group.configured = true; group.owner = member; }
+    if (changed) {
+      // Config may arrive after a sibling with only group was connected. Move
+      // inheriting siblings together; explicitly different credentials remain isolated.
+      notifyGroup(group, member);
+    }
+  }
+  const binding = { groupName, group, bucket };
+  if (previous && (previous.group !== group || previous.bucket !== bucket)) releaseGroup(previous, member, previous.group === group);
+  return binding;
 }
 
-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"];
+const ATTRS = ["base-url", "token", "line", "namespace", "group", "selected-id", "job-id", "task-id", "title", "color", "theme", "context", "read-only", "config", "new-conversation", "tabs", "available-tabs", "default-tab", "file-open", "path", "no-quote", "hidden", "watch-files", "passive-context"];
 
 function jsonAttr(el: HTMLElement, name: string): object | undefined {
   const raw = el.getAttribute(name);
@@ -77,6 +154,9 @@ abstract class CliElement extends Base {
   static observedAttributes = ATTRS;
   private root: Root | null = null;
   private ownStore: CliStore | undefined;
+  private ownStoreKey: string | undefined;
+  private groupBinding: GroupBinding | undefined;
+  private groupMember: GroupMember = { el: this, refresh: () => { if (this.root) this.render(); } };
   private configValue: object | undefined;
 
   /** 界面配置（对象）。优先于 config 属性里的 JSON。 */
@@ -90,7 +170,12 @@ abstract class CliElement extends Base {
 
   /** 这个元素用的仓库（同一个 group 的元素共用一个）。高级用法：store.on(...)、store.select(...)。 */
   get store(): CliStore {
-    return storeFor(this) ?? (this.ownStore ??= createCliStore(storeOptions(this)));
+    const binding = storeFor(this, this.groupMember, this.groupBinding);
+    if (binding) { this.groupBinding = binding; return binding.bucket.store; }
+    if (this.groupBinding) { releaseGroup(this.groupBinding, this.groupMember); this.groupBinding = undefined; }
+    const options = storeOptions(this), key = identity(options);
+    if (!this.ownStore || this.ownStoreKey !== key) { this.ownStore = createCliStore(options); this.ownStoreKey = key; }
+    return this.ownStore;
   }
   /** 元素自己写的对话（job-id + task-id）；没写时 null（跟着这一组的选中走）。 */
   private ownKey(): string | null {
@@ -129,7 +214,12 @@ abstract class CliElement extends Base {
   }
   disconnectedCallback() {
     // 移动节点时会先断开再连上：推到下一轮再卸载。
-    queueMicrotask(() => { if (!this.isConnected) { this.root?.unmount(); this.root = null; } });
+    queueMicrotask(() => { if (!this.isConnected) {
+      this.root?.unmount(); this.root = null;
+      leaveGroup(this.groupMember); this.groupBinding = undefined;
+      this.ownStore = undefined; this.ownStoreKey = undefined;
+      this.appliedSelection = null; this.selectionStore = null;
+    } });
   }
   attributeChangedCallback() { this.syncHidden(); if (this.root) this.render(); }
   private syncHidden() {
@@ -138,12 +228,15 @@ abstract class CliElement extends Base {
   }
 
   private appliedSelection: string | null = null;
+  private selectionStore: CliStore | null = null;
   /** selected-id：这一组一起看哪个对话。属性变了才切（列表点击换了选中，不会被属性拉回去）。隐藏的元素也生效。 */
   private applySelection() {
     const selection = this.getAttribute("selected-id");
-    if (selection !== null && selection !== this.appliedSelection) {
+    const store = this.store;
+    if (selection !== null && (selection !== this.appliedSelection || store !== this.selectionStore)) {
       this.appliedSelection = selection;
-      this.store.select(selection || null);
+      this.selectionStore = store;
+      store.select(selection || null);
     }
   }
   protected common() {
@@ -153,7 +246,12 @@ abstract class CliElement extends Base {
       title: this.getAttribute("title") ?? undefined,
       color: this.getAttribute("color") ?? undefined,
       theme: (this.getAttribute("theme") as "light" | "dark" | null) ?? undefined,
-      onEvent: (event: unknown) => this.dispatchEvent(new CustomEvent("cli-event", { detail: event, bubbles: true })),
+      onEvent: (event: unknown) => {
+        this.dispatchEvent(new CustomEvent("cli-event", { detail: cloneWorkspaceEvent(event as CliEvent), bubbles: true }));
+        const type=(event as {type?:string}).type;
+        const name=type==='files_changed'?'cli-files-change':type==='files_watch'?'cli-files-watch':type==='board_context'?'cli-board-context':null;
+        if(name)this.dispatchEvent(new CustomEvent(name,{detail:event,bubbles:true}));
+      },
       onTurnEnd: (payload: unknown) => this.dispatchEvent(new CustomEvent("cli-turn-end", { detail: payload, bubbles: true })),
       onConversationEnd: (payload: unknown) => this.dispatchEvent(new CustomEvent("cli-conversation-end", { detail: payload, bubbles: true })),
       onCallback: (payload: unknown) => this.dispatchEvent(new CustomEvent("cli-callback", { detail: payload, bubbles: true })),
@@ -164,8 +262,14 @@ abstract class CliElement extends Base {
   protected abstract element(): React.ReactNode;
   // 隐藏的元素什么都不渲染：不轮询、不占连接；workspace() / appendContext() 照样能用。
   private render() {
-    this.applySelection();
-    this.root?.render(this.hasAttribute("hidden") ? null : this.element());
+    try {
+      this.applySelection();
+      this.root?.render(this.hasAttribute("hidden") ? null : this.element());
+    } catch (error) {
+      // Configuration errors must unmount the previous connection, never leave
+      // another account's old interface interactive under new attributes.
+      this.root?.render(this.hasAttribute("hidden") ? null : <div className="cli-ui cli-error" role="alert">{error instanceof Error ? error.message : "组件连接配置无效"}</div>);
+    }
   }
 }
 
@@ -183,7 +287,7 @@ class CliChatElement extends CliElement {
     const jobId = this.getAttribute("job-id");
     const taskId = this.getAttribute("task-id");
     const fileOpen = this.getAttribute("file-open") as "auto" | "board" | "modal" | "link" | null;
-    return <CliChat {...this.common()} {...(jobId !== null ? { jobId: jobId || null } : {})} {...(taskId ? { taskId } : {})} readOnly={this.hasAttribute("read-only")} {...(fileOpen ? { fileOpen } : {})} />;
+    return <CliChat {...this.common()} {...(jobId !== null ? { jobId: jobId || null } : {})} {...(taskId ? { taskId } : {})} passiveContext={this.getAttribute("passive-context")!=="false"} readOnly={this.hasAttribute("read-only")} {...(fileOpen ? { fileOpen } : {})} />;
   }
 }
 
@@ -191,12 +295,14 @@ class CliBoardElement extends CliElement {
   protected element() {
     const jobId = this.getAttribute("job-id");
     const tabs = this.getAttribute("tabs")?.split(",").map((t) => t.trim()).filter(Boolean) as BoardTab[] | undefined;
+    const availableTabs = this.getAttribute("available-tabs")?.split(",").map(t=>t.trim()).filter(Boolean) as BoardTab[] | undefined;
     const defaultTab = (this.getAttribute("default-tab") as BoardTab | null) ?? undefined;
     // 结果事件只由 <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={this.hasAttribute("tabs") ? tabs ?? [] : undefined} availableTabs={availableTabs} defaultTab={defaultTab} readOnly={this.hasAttribute("read-only")}
       // 同一个 group 里有对话：看板里「引用到对话」带进那个对话的下一条消息；no-quote 关掉。
+      watchFiles={this.getAttribute("watch-files")!=="false"}
       quoteToChat={this.hasAttribute("group") && !this.hasAttribute("no-quote")} />;
   }
 }

package/src/embed.ts

@@ -14,14 +14,12 @@
 import "./styles.css";
 import { createElement } from "react";
 import { createRoot } from "react-dom/client";
-import { defineCliElements } from "./elements.js";
-import { CliChat, type CliChatProps } from "./chat/CliChat.js";
-import { CliMsgList, type CliMsgListProps } from "./msglist/CliMsgList.js";
-import { CliBoard, type CliBoardProps } from "./board/CliBoard.js";
-import { CliBrowserView, CliFilePreview, type CliBrowserViewProps, type CliFilePreviewProps } from "./board/blocks.js";
-import { CliCenterProvider } from "./core/provider.js";
-import { createCliStore } from "./core/store.js";
-import { createCenterClient } from "./core/client.js";
+import { defineCliElements } from "./elements";
+import { CliChat, CliMsgList, CliBoard, type CliChatProps, type CliMsgListProps, type CliBoardProps } from "./components";
+import { CliBrowserView, CliFilePreview, type CliBrowserViewProps, type CliFilePreviewProps } from "./board/blocks";
+import { CliCenterProvider } from "./core/provider";
+import { createCliStore } from "./core/store";
+import { createCenterClient } from "./core/client";
 
 export interface Mounted<P> {
   /** 合并更新参数（只传要改的）。 */

package/src/index.ts

@@ -1,3 +1,4 @@
+export { CliMsgList, CliChat, CliBoard, type CliMsgListProps, type CliChatProps, type CliBoardProps } from "./components";
 /**
  * @spzxg/cli-ui —— 任务中心（cli-task-center）对话任务的前端积木，数据全部来自 center 服务。
  *
@@ -19,27 +20,33 @@
  *   import "@spzxg/cli-ui/styles.css";
  * 非 React 页面用 Web Component：import { defineCliElements } from "@spzxg/cli-ui/elements"。
  */
-export { CliMsgList, type CliMsgListProps } from "./msglist/CliMsgList.js";
-export { CliChat, type CliChatProps } from "./chat/CliChat.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 { type BoardTab, type BoardExtraTab } from "./board/CliBoard";
+export { downloadFolder, zipFolder, listFolder, FOLDER_MAX_FILES, FOLDER_MAX_BYTES, type FolderResult, type FolderZip, type FolderProgress } from "./board/folderDownload";
+export { createWorkspace, WORKSPACE_TEXT_MAX, WORKSPACE_LIST_MAX, WORKSPACE_FILE_MAX, type CliWorkspace, type BoardView } from "./board/workspace";
+export { CliFilePreview, CliBrowserView, type CliFilePreviewProps, type CliBrowserViewProps } from "./board/blocks";
+export { FileViewer, downloadFile, type FileViewerProps, type FileAction } from "./board/FileViewer";
+export { BrowserPane } from "./board/BrowserPane";
+export { CliSplit, type CliSplitProps } from "./layout/CliSplit";
+export { attachSplit, type SplitPane, type SplitOptions, type SplitHandle } from "./layout/split";
+export { CliCenterProvider, useCliStore, useCliState, type CliCenterProviderProps, type ResultHandlers } from "./core/provider";
 
 export {
   resolveChatConfig, resolveMsgListConfig, DEFAULT_CHAT_CONFIG, DEFAULT_MSGLIST_CONFIG,
   type CliChatConfig, type CliMsgListConfig, type ResolvedChatConfig, type ResolvedMsgListConfig,
-} from "./core/config.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";
+} from "./core/config";
+export { createCliStore, CONTEXT_ITEM_MAX, type CliStore, type CliStoreOptions, type CliState, type CliEvent, type JobEntry, type OpenTarget, type BoardRef, type ContextItem } from "./core/store";
+export { createCenterClient, CenterError, boardFileUrl, type CenterClient, type CenterClientOptions, type StreamHandlers, type BoardBackend, type ConversationBackend } from "./core/client";
+export { viewMessages, isRunning, runningTurn, convKey, parseConvKey, NEW_TASK, type ConvState } from "./core/conversation";
 export {
   composeMessage, splitMessage, serializeBlock, readFileText, isLongText, ACCEPTED_EXTENSIONS, MAX_MESSAGE_CHARS,
   type TextBlock, type MessagePart,
-} from "./core/blocks.js";
-export type * from "./core/types.js";
+} from "./core/blocks";
+export type * from "./core/types";
+
+
+export { RunControls, type RunControlProps, type RunCapabilities, type RunTask } from "./chat/RunControls";
+
+export { formatBoardContext, appendBoardContext, BOARD_HISTORY_MAX } from "./board/context";
+export { subscribeWorkspaceFiles, type WorkspaceWatchOptions } from "./board/fileWatch";
+export type { WorkspaceHandlers } from "./core/provider";
+export type { BoardFile } from "./board/workspace";

package/src/layout/CliSplit.tsx

@@ -12,7 +12,7 @@
  * 三个组件在同一个 Provider 里照常联动（列表选中 → 对话和看板跟着切；对话里点文件 → 看板打开），分栏只管宽度。
  */
 import { Children, useEffect, useRef, type CSSProperties, type ReactNode } from "react";
-import { attachSplit, type SplitHandle, type SplitPane } from "./split.js";
+import { attachSplit, type SplitHandle, type SplitPane } from "./split";
 
 export type CliSplitProps = {
   children: ReactNode;

package/src/msglist/CliMsgList.tsx

@@ -2,16 +2,16 @@
 // 一张卡片是 center 里的一个对话任务（mode=conversation）。对话任务里开了几个对话时，卡片下面按对话展开，
 // 点哪个对话选哪个（选中值是对话键 "job#task"）；卡片上的「+」在这个对话任务里新开一个对话（同一个工作区）。
 import { useEffect, useMemo, useState, type CSSProperties } from "react";
-import { CliErrorBoundary } from "../ui/ErrorBoundary.js";
-import type { CliEvent, JobEntry } from "../core/store.js";
-import type { CliStoreOptions, CliStore } from "../core/store.js";
-import { useCliState, useCliStore, useCliStoreContext, useComponentEvents, withOwnProvider, type ResultHandlers } from "../core/provider.js";
-import { convKey, NEW_TASK, parseConvKey, TERMINAL_JOB } from "../core/conversation.js";
-import type { ConversationInfo } from "../core/types.js";
-import { Icon } from "../ui/icons.js";
-import { agentLabel, relTime, toMs } from "../ui/format.js";
-import { AgentBadge, ErrNote, Skel, StatusDot, type DotCls } from "../ui/shared.js";
-import { resolveMsgListConfig, type CliMsgListConfig, type ResolvedMsgListConfig } from "../core/config.js";
+import { CliErrorBoundary } from "../ui/ErrorBoundary";
+import type { CliEvent, JobEntry } from "../core/store";
+import type { CliStoreOptions, CliStore } from "../core/store";
+import { useCliState, useCliStore, useCliStoreContext, useComponentEvents, withOwnProvider, type ResultHandlers } from "../core/provider";
+import { convKey, NEW_TASK, parseConvKey, TERMINAL_JOB } from "../core/conversation";
+import type { ConversationInfo } from "../core/types";
+import { Icon } from "../ui/icons";
+import { agentLabel, relTime, toMs } from "../ui/format";
+import { AgentBadge, ErrNote, Skel, StatusDot, type DotCls } from "../ui/shared";
+import { resolveMsgListConfig, type CliMsgListConfig, type ResolvedMsgListConfig } from "../core/config";
 
 /** onTurnEnd / onConversationEnd：浏览器里从实时流算出的结果通知，不依赖 center 的 callback.url。 */
 export interface CliMsgListProps extends CliStoreOptions, ResultHandlers {