@spzxg/cli-ui 0.6.2 → 0.6.6

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/layout/split.ts

@@ -5,12 +5,12 @@
  *   attachSplit(container, { panes: [{ size: 300, min: 220, max: 480 }, { min: 360 }, { size: "42%", min: 320 }], storageKey: "strategy" })
  *
  * 规则：
- *   · 写了 size 的栏是定宽（px 或百分比，百分比按容器宽度换算成 px）；没写 size 的栏占剩下的宽度（只能有一个，没有就是最后一栏）。
+ *   · 写了 size 的栏是定宽（px 或百分比，未手动调整的百分比随容器宽度变化）；没写 size 的栏占剩下的宽度（只能有一个，没有就是最后一栏）。
  *   · 拖动条改它旁边定宽的那一栏；任何一栏都不会小于自己的 min，占剩余宽度的那栏也一样。
  *   · 双击拖动条：那一栏回到初始宽度。键盘：拖动条能聚焦，←/→ 每次 16px（按住 Shift 64px）。
  *   · 子元素根节点带 collapsed 类（cli-board 收起时）：那一栏变成 40px 窄条（--cli-split-collapsed），旁边的拖动条隐藏；展开后回到原来的宽度。
  *   · 写了 storageKey：拖好的宽度记在 localStorage（cli-ui:split:<storageKey>），下次打开还是这个宽度。
- *   · 窗口变窄时定宽栏按比例让出宽度，保证占剩余宽度的那栏不小于它的 min。
+ *   · 窗口变窄时定宽栏按超过 min 的空间比例让出宽度；各栏 min 之和能放下时，保证占剩余宽度的那栏不小于它的 min。
  */
 export type SplitPane = { size?: number | `${number}%`; min?: number; max?: number };
 export type SplitOptions = {
@@ -26,6 +26,8 @@ const STEP = 16;
 
 export function attachSplit(container: HTMLElement, initial: SplitOptions = {}): SplitHandle {
   let options = initial;
+  // Only user overrides are pixels. null keeps the configured responsive default.
+  // Old persisted numeric arrays remain valid user preferences.
   let sizes: (number | null)[] = [];
   let gutters: HTMLElement[] = [];
   let panes: HTMLElement[] = [];
@@ -45,48 +47,79 @@ export function attachSplit(container: HTMLElement, initial: SplitOptions = {}):
   };
 
   const spec = (i: number): SplitPane => options.panes?.[i] ?? {};
-  const flexIndex = () => {
+  const preferredFlexIndex = () => {
     const i = panes.findIndex((_, n) => spec(n).size === undefined);
     return i >= 0 ? i : panes.length - 1;
   };
-  const minOf = (i: number) => spec(i).min ?? DEFAULT_MIN;
+  const minOf = (i: number) => Math.max(0, spec(i).min ?? DEFAULT_MIN);
+  const clamp = (i: number, w: number) => Math.round(Math.min(Math.max(minOf(i), spec(i).max ?? Infinity), Math.max(minOf(i), w)));
+  const contentWidth = () => {
+    const style = getComputedStyle(container);
+    return Math.max(0, container.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0));
+  };
   const initialSize = (i: number): number | null => {
-    if (i === flexIndex()) return null;
+    if (i === preferredFlexIndex()) return null;
     const s = spec(i).size;
-    if (typeof s === "string") return Math.round((parseFloat(s) / 100) * (container.clientWidth || 1200));
-    return s ?? 320;
+    if (typeof s === "string") return clamp(i, (parseFloat(s) / 100) * (contentWidth() || 1200));
+    return clamp(i, s ?? 320);
   };
   const isCollapsed = (pane: HTMLElement) => !!pane.firstElementChild?.classList.contains("collapsed");
-  const clamp = (i: number, w: number) => Math.round(Math.min(spec(i).max ?? Infinity, Math.max(minOf(i), w)));
+  const isVisible = (pane: HTMLElement) => !pane.hidden && getComputedStyle(pane).display !== "none";
+  const flexIndex = () => {
+    const preferred = preferredFlexIndex();
+    if (panes[preferred] && isVisible(panes[preferred]) && !isCollapsed(panes[preferred])) return preferred;
+    // A host may hide whole panes on mobile. A remaining visible pane fills the
+    // space without turning its default width into a permanent pixel override.
+    for (let i = panes.length - 1; i >= 0; i--) if (isVisible(panes[i]) && !isCollapsed(panes[i])) return i;
+    return -1;
+  };
+  const desiredSizes = () => panes.map((_, i) => i === preferredFlexIndex() ? null : clamp(i, sizes[i] ?? initialSize(i)!));
 
   /** 定宽栏放进容器：总宽超了就按比例收，给占剩余宽度的那栏留出它的 min。 */
-  function fitted(): (number | null)[] {
-    const total = container.clientWidth;
-    const flex = flexIndex();
-    const fixed = sizes.map((s, i) => (i === flex || isCollapsed(panes[i]) ? 0 : s ?? 0));
-    const collapsedW = panes.reduce((sum, p, i) => sum + (i !== flex && isCollapsed(p) ? p.getBoundingClientRect().width : 0), 0);
-    const room = total - minOf(flex) - collapsedW;
-    const sum = fixed.reduce((a, b) => a + b, 0);
-    if (!total || sum <= room) return sizes;
-    const ratio = Math.max(0, room) / sum;
-    return sizes.map((s, i) => (i === flex || s === null ? null : Math.max(minOf(i), Math.floor(s * ratio))));
+  function fitted(flex: number): (number | null)[] {
+    const shown = desiredSizes();
+    const fixed = panes.flatMap((p, i) => i !== flex && isVisible(p) && !isCollapsed(p) ? [i] : []);
+    const collapsedW = panes.reduce((sum, p) => sum + (isVisible(p) && isCollapsed(p) ? p.getBoundingClientRect().width : 0), 0);
+    const gutterW = gutters.reduce((sum, g) => {
+      if (g.hidden) return sum;
+      const style = getComputedStyle(g);
+      const width = g.getBoundingClientRect().width || parseFloat(style.flexBasis) || 0;
+      return sum + Math.max(0, width + (parseFloat(style.marginLeft) || 0) + (parseFloat(style.marginRight) || 0));
+    }, 0);
+    const room = contentWidth() - (flex < 0 ? 0 : minOf(flex)) - collapsedW - gutterW;
+    const sum = fixed.reduce((total, i) => total + shown[i]!, 0);
+    if (!container.clientWidth || sum <= room) return shown;
+    const minimum = fixed.reduce((total, i) => total + minOf(i), 0);
+    // Scaling whole widths can hit one pane's minimum and still overflow the
+    // flexible pane. Allocate only the space above each minimum instead.
+    const ratio = sum > minimum ? Math.max(0, room - minimum) / (sum - minimum) : 0;
+    for (const i of fixed) shown[i] = minOf(i) + Math.floor((shown[i]! - minOf(i)) * ratio);
+    return shown;
   }
 
   function apply() {
     const flex = flexIndex();
-    const shown = fitted();
+    // Set narrow strips before measuring: their previous expanded width must
+    // not be subtracted from the available space on the first collapse frame.
+    for (const pane of panes) {
+      if (!isCollapsed(pane)) continue;
+      pane.style.flex = "0 0 var(--cli-split-collapsed, 40px)";
+      pane.style.width = "";
+      pane.style.minWidth = "";
+    }
+    gutters.forEach((g, i) => { g.hidden = !isVisible(panes[i]) || !isVisible(panes[i + 1]) || isCollapsed(panes[i]) || isCollapsed(panes[i + 1]); });
+    const shown = fitted(flex);
     panes.forEach((pane, i) => {
       pane.classList.add("cli-split-pane");
+      if (isCollapsed(pane)) return;
       if (i === flex) { pane.style.flex = "1 1 0"; pane.style.width = ""; pane.style.minWidth = `${minOf(i)}px`; return; }
-      // 收起的栏（cli-board 的窄条宽度是 100%，没有自身宽度）：固定窄条宽，宿主可用 --cli-split-collapsed 改。
-      if (isCollapsed(pane)) { pane.style.flex = "0 0 var(--cli-split-collapsed, 40px)"; pane.style.width = ""; pane.style.minWidth = ""; return; }
+      // Hidden preferred flex panes keep their flex role for when they return.
+      if (shown[i] === null) { pane.style.flex = "1 1 0"; pane.style.width = ""; pane.style.minWidth = `${minOf(i)}px`; return; }
       pane.style.flex = `0 0 ${shown[i]}px`;
       pane.style.width = `${shown[i]}px`;
       pane.style.minWidth = "0";
     });
     gutters.forEach((g, i) => {
-      const hidden = isCollapsed(panes[i]) || isCollapsed(panes[i + 1]);
-      g.hidden = hidden;
       g.setAttribute("aria-valuenow", String(Math.round(panes[sideOf(i)]?.getBoundingClientRect().width ?? 0)));
     });
   }
@@ -95,18 +128,20 @@ export function attachSplit(container: HTMLElement, initial: SplitOptions = {}):
   const sideOf = (gutter: number) => (gutter === flexIndex() ? gutter + 1 : gutter);
 
   function resize(gutter: number, dx: number) {
+    if (gutters[gutter]?.hidden) return;
     const target = sideOf(gutter);
     const sign = target === gutter ? 1 : -1;
     const flex = flexIndex();
+    if (flex < 0) return;
     const current = panes[target].getBoundingClientRect().width;
     // 占剩余宽度的那栏不能被挤到 min 以下。
     const flexW = panes[flex].getBoundingClientRect().width;
-    const grow = Math.min(sign * dx, flexW - minOf(flex));
+    const grow = Math.min(sign * dx, Math.max(0, flexW - minOf(flex)));
     sizes[target] = clamp(target, current + grow);
     apply();
   }
 
-  function finish() { save(); options.onResize?.([...sizes]); }
+  function finish() { save(); options.onResize?.(desiredSizes()); }
 
   function makeGutter(index: number) {
     const g = document.createElement("div");
@@ -138,7 +173,7 @@ export function attachSplit(container: HTMLElement, initial: SplitOptions = {}):
     });
     g.addEventListener("dblclick", () => {
       const target = sideOf(index);
-      sizes[target] = initialSize(target);
+      sizes[target] = null;
       apply();
       finish();
     });
@@ -153,20 +188,22 @@ export function attachSplit(container: HTMLElement, initial: SplitOptions = {}):
 
   /** 子元素变了（宿主增删栏）：重新找栏、重新插拖动条。 */
   function rebuild() {
+    for (const p of panes) ro?.unobserve?.(p);
     for (const g of gutters) g.remove();
     panes = [...container.children].filter((c): c is HTMLElement => c instanceof HTMLElement && !c.classList.contains("cli-split-gutter"));
     const saved = load();
-    const flex = flexIndex();
+    const flex = preferredFlexIndex();
     sizes = panes.map((_, i) => {
       if (i === flex) return null;
       const keep = sizes[i];
-      if (typeof keep === "number") return keep;
+      if (typeof keep === "number" && Number.isFinite(keep)) return clamp(i, keep);
       const s = saved && saved.length === panes.length ? saved[i] : null;
-      return typeof s === "number" ? clamp(i, s) : initialSize(i);
+      return typeof s === "number" && Number.isFinite(s) ? clamp(i, s) : null;
     });
     gutters = panes.slice(0, -1).map((_, i) => makeGutter(i));
     gutters.forEach((g, i) => panes[i].after(g));
     apply();
+    for (const p of panes) ro?.observe(p);
   }
 
   // 只看栏的增删、栏的根节点换了、根节点的 class 变了（收起 / 展开）；栏里面的内容（流式输出）不看，不然每个字都要重排。
@@ -199,7 +236,7 @@ export function attachSplit(container: HTMLElement, initial: SplitOptions = {}):
       observer.disconnect(); rebuild(); observe();
     },
     reset() {
-      sizes = panes.map((_, i) => initialSize(i));
+      sizes = panes.map(() => null);
       apply();
       finish();
     },

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 {
@@ -59,6 +59,9 @@ export function CliMsgList(props: CliMsgListProps) {
 
 const SEARCH_MIN = 6;
 const BATCH_ACTIVE = new Set(["dispatching", "running", "verifying"]);
+// An orphaned task can retain a fresh, authoritative human-wait observation
+// while the center is reconciling its execution state. Do not call it running.
+const BATCH_AWAITING = new Set([...BATCH_ACTIVE, "orphaned"]);
 
 interface CardView {
   id: string;
@@ -95,9 +98,11 @@ export function cardView(id: string, entry: JobEntry | undefined): CardView {
     const label = cancelled ? "已取消" : failed ? "已失败" : "已完成";
     return { ...base, cls: cancelled || failed ? "x" : "g", label, running: false, awaiting: false, group: cancelled ? "cancelled" : "done", activity: updatedAt ? `${label} · ${relTime(updatedAt)}` : label };
   }
-  // 一次性任务：有子任务在节点上跑就是运行中，没有轮次、不会停在提问上。
+  // A browser handoff/input card keeps its turn running while requiring a human.
   if (batch) {
     const running = (job?.tasks ?? []).some((task) => BATCH_ACTIVE.has(task.status));
+    const awaiting = (job?.tasks ?? []).some((task) => BATCH_AWAITING.has(task.status) && task.awaiting_input === true);
+    if (awaiting) return { ...base, cls: "a", label: "需要你处理", running, awaiting, group: "needs", activity: "等你处理" };
     return { ...base, cls: "a", label: "进行中", running, awaiting: false, group: "active", activity: running ? "运行中 · 工作中" : status === "queued" ? "等待执行节点" : "进行中" };
   }
   // 开了几个对话：任何一个在跑就算在跑，任何一个停在提问上就要你处理（关掉的对话不算）。
@@ -105,7 +110,7 @@ export function cardView(id: string, entry: JobEntry | undefined): CardView {
   const many = (conv?.conversations?.length ?? 0) > 1;
   const running = many ? open.some((c) => c.running_turn) : !!conv?.running_turn;
   // 上一轮以提问结束、后面没有新消息：等你回答。
-  const awaiting = many ? open.some((c) => !c.running_turn && !c.queued_turns && !!c.last_turn?.asked) : !running && !conv?.queued_turns && !!conv?.last_turn?.asked;
+  const awaiting = many ? open.some((c) => c.awaiting_input === true || (!c.running_turn && !c.queued_turns && !!c.last_turn?.asked)) : conv?.awaiting_input === true || (!running && !conv?.queued_turns && !!conv?.last_turn?.asked);
   if (awaiting) return { ...base, cls: "a", label: "需要你处理", running, awaiting, group: "needs", activity: updatedAt ? `等你处理 · ${relTime(updatedAt)}` : "等你处理" };
   if (running) return { ...base, cls: "a", label: "进行中", running, awaiting, group: "active", activity: "运行中 · 工作中" };
   const waiting = conv?.queued_turns ? `${conv.queued_turns} 条排队中` : status === "queued" ? "等待执行节点" : updatedAt ? relTime(updatedAt) : "未开始";
@@ -143,6 +148,7 @@ export function convRows(jobId: string, entry: JobEntry | undefined): ConvRowVie
     if (tasks.length <= 1) return [];
     return tasks.map((t) => {
       const look = BATCH_ROW[t.status] ?? { cls: "a" as DotCls, label: t.status };
+      if (BATCH_AWAITING.has(t.status) && t.awaiting_input === true) return { key: convKey(jobId, t.id), title: t.title, cls: "a" as DotCls, label: "需要你处理", running: !!look.running, awaiting: true, activity: "等你处理", turns: 0 };
       return { key: convKey(jobId, t.id), title: t.title, cls: look.cls, label: look.label, running: !!look.running, awaiting: false, activity: look.label, turns: 0 };
     });
   }
@@ -153,7 +159,7 @@ export function convRows(jobId: string, entry: JobEntry | undefined): ConvRowVie
     const base = { key: convKey(jobId, c.task_id), title: c.title, turns: c.turns };
     if (c.closed || jobEnded) return { ...base, cls: "g" as DotCls, label: "已结束", running: false, awaiting: false, activity: "已结束" };
     const running = c.running_turn;
-    const awaiting = !running && !c.queued_turns && !!c.last_turn?.asked;
+    const awaiting = c.awaiting_input === true || (!running && !c.queued_turns && !!c.last_turn?.asked);
     if (awaiting) return { ...base, cls: "a" as DotCls, label: "需要你处理", running, awaiting, activity: "等你处理" };
     if (running) return { ...base, cls: "a" as DotCls, label: "进行中", running, awaiting, activity: "运行中" };
     return { ...base, cls: "a" as DotCls, label: "进行中", running, awaiting, activity: c.queued_turns ? `${c.queued_turns} 条排队中` : "空闲" };