@spzxg/cli-ui 0.1.0 → 0.3.1

package/src/core/types.ts

@@ -46,6 +46,7 @@ export interface CenterTurn {
 export interface CenterTask {
   id: string;
   job_id: string;
+  seq?: number;
   title: string;
   status: string;
   agent: string | null;
@@ -57,9 +58,30 @@ export interface CenterTask {
   cache_creation_tokens: number;
   browser?: boolean;
   last_error: string | null;
+  /** 接续出来的对话：指回旧对话任务里对应的那个对话。 */
+  continue_from_task_id?: string;
+}
+
+/** 对话任务里的一个对话（一个子任务、一个 Agent 会话）。conversation.conversations 的一项。 */
+export interface ConversationInfo {
+  task_id: string;
+  seq: number;
+  title: string;
+  status: string;
+  /** 关掉了（单独关闭这一个，或整个对话任务结束）。 */
+  closed: boolean;
+  turns: number;
+  queued_turns: number;
+  running_turn: boolean;
+  last_turn: CenterTurn | null;
+  remote_task_id: string | null;
+  continue_from_task_id: string | null;
+  created_at: string | null;
 }
 
 export interface ConversationSummary {
+  /** 里面的每个对话（按开的先后）。旧版 center 没有这个字段：当作只有一个对话。 */
+  conversations?: ConversationInfo[];
   turns: number;
   queued_turns: number;
   running_turn: boolean;
@@ -81,9 +103,11 @@ export interface CenterJob {
   tasks: CenterTask[];
 }
 
-/** POST /api/jobs/:id/messages */
+/** POST /api/jobs/:id/messages、POST /api/jobs/:id/conversations */
 export interface SendResult {
   job_id: string;
+  /** 实际接收这条消息的对话（对话任务过期接续后是新对话任务里对应的那个）。 */
+  task_id?: string;
   status: JobStatus;
   duplicate: boolean;
   /** true = 原对话已结束，这条消息开了一个新对话（job_id 是新的）。 */
@@ -199,19 +223,61 @@ export type NodeEvent =
 
 /** center 实时流 chunk.events 里的一项。 */
 export type StreamItem =
-  | { type: "transcript"; messages: Message[] | null; pending: PendingMessage[] | null; running: boolean | null }
-  | { type: "node"; event: NodeEvent }
+  /** remote_task_id：一次性任务的流里才有（大任务里可能同时有几个节点对话）。 */
+  | { type: "transcript"; remote_task_id?: string; messages: Message[] | null; pending: PendingMessage[] | null; running: boolean | null }
+  | { 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 } };
+  | { type: "job"; job: { id: string; status: JobStatus; closed_reason?: string | null; node_id: string | null } }
+  /** 正在看的这个对话的状态变化（关闭了：closed=true）；一次性任务的流里是子任务（BatchStreamTask）。 */
+  | { type: "task"; task: StreamTask | BatchStreamTask };
+
+/** 实时流看的那个对话（GET /api/jobs/:id/stream?task=）。 */
+export interface StreamTask { id: string; seq: number; title: string; status: string; closed: boolean; remote_task_id: string | null; continue_from_task_id: string | null }
 
 export interface StreamSnapshot {
   job: { id: string; status: JobStatus; closed_reason: string | null; node_id: string | null; mode: string; title: string; conversation: ConversationSummary };
+  /** 旧版 center 没有。 */
+  task?: StreamTask;
   turns: CenterTurn[];
 }
 
+/**
+ * 一次性任务（含续派）的子任务，实时流里的样子。cli-chat 只读查看这类任务时用。
+ * prompt / opener_prompt：指定了 ?task= 时看的那个子任务才有（opener_prompt = 开出它所在节点对话的那个子任务的原文）。
+ */
+export interface BatchStreamTask {
+  id: string;
+  seq: number;
+  task_key: string | null;
+  title: string;
+  status: string;
+  round: number;
+  attempt: number;
+  remote_task_id: string | null;
+  continue_from_task_id: string | null;
+  last_error: string | null;
+  prompt?: string;
+  opener_prompt?: string;
+}
+
+/** 一次性任务（含续派，mode 不是 conversation）的实时流首个事件：没有轮次，只有子任务。 */
+export interface BatchStreamSnapshot {
+  job: { id: string; status: JobStatus; node_id: string | null; round: number; terminal_revision: number; mode: string; title: string };
+  tasks: BatchStreamTask[];
+  /** 指定了 ?task= 时：看的那个子任务。 */
+  task?: BatchStreamTask;
+}
+
+export const isBatchSnapshot = (snapshot: StreamSnapshot | BatchStreamSnapshot): snapshot is BatchStreamSnapshot =>
+  !Array.isArray((snapshot as StreamSnapshot).turns) && Array.isArray((snapshot as BatchStreamSnapshot).tasks);
+
 export interface StreamEnd {
+  /** 对话任务的结束原因；只是这个对话被关闭时为 conversation_closed。 */
   reason: string;
+  task_id?: string;
   continued_by_job_id?: string | null;
+  /** 接续这个对话的新对话（新对话任务里的子任务）；还没有为 null。 */
+  continued_by_task_id?: string | null;
 }
 
 // ── center 回调体（与中枢 conversation.ts turnCallbackPayload / job-callback.ts 的字段一一对应） ──
@@ -264,6 +330,8 @@ export interface ConversationClosedCallback {
   /** 投递顺序号：最后一轮的 seq + 1，永远排在这个对话所有 conversation_turn 之后。 */
   callback_seq: number;
   job_id: string;
+  /** 只关掉了对话任务里的这一个对话时才有（前端事件；center 只在整个对话任务结束时回调）。 */
+  task_id?: string;
   /** succeeded（关闭 / 过期 / 换线）/ cancelled / failed。 */
   status: JobStatus;
   /** closed / cancelled / expired / node_reassigned / node_lost。 */
@@ -276,3 +344,73 @@ export interface ConversationClosedCallback {
 }
 
 export type ConversationCallback = ConversationTurnCallback | ConversationClosedCallback;
+
+/** 一轮结束时 onTurnEnd 收到的载荷（字段与 center 的 conversation_turn 回调体一致）。 */
+export type TurnEndPayload = ConversationTurnCallback;
+/** 对话结束时 onConversationEnd 收到的载荷（字段与 center 的 conversation_closed 回调体一致）。 */
+export type ConversationEndPayload = ConversationClosedCallback;
+
+// ── 右侧看板（cli-board）：center 的 /api/jobs/:id/board、files、diff、browser ──
+
+export interface BoardInfo {
+  job_id: string;
+  /** false = 还没派发到执行节点（文件和浏览器都还没有）。 */
+  dispatched: boolean;
+  detail?: string;
+  task_id?: string;
+  remote_task_id?: string;
+  node?: { id: string; health: string };
+  files: boolean;
+  /** 节点开了浏览器功能。 */
+  browser: boolean;
+}
+
+export interface FileEntry {
+  name: string;
+  /** 相对工作目录的路径，用 / 分隔。 */
+  path: string;
+  type: "dir" | "file";
+  size: number;
+  mtime: number;
+}
+
+export interface DirListing { type: "dir"; path: string; entries: FileEntry[]; truncated: boolean }
+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 }
+/** Operator 的 /api/tasks/:id/diff（经 center 原样转发）。 */
+export interface DiffResult {
+  isolated?: boolean;
+  reason?: string;
+  branch?: string;
+  baseLabel?: string;
+  files?: DiffFile[];
+  isDirty?: boolean;
+  ahead?: number;
+  alreadyMerged?: boolean;
+  error?: string;
+  /** 有的节点只给一整段 unified diff。 */
+  diff?: string;
+  patch?: string;
+}
+
+/** Operator 的任务浏览器状态（/api/tasks/:id/browser）。 */
+export interface BrowserStatus {
+  feature: boolean;
+  state: "none" | "opening" | "running" | "closing";
+  origin: "ai" | "manual" | "check" | null;
+  control: "ai" | "human";
+  handoff: { instruction: string; by: "ai" | "user" | "browser" | "kept" } | null;
+  capability: "config" | "manual" | "ai" | null;
+  viewers: number;
+  spaceName: string;
+  instance: { running: boolean; spaces: number };
+  shownLocally: boolean;
+  error: string | null;
+}
+
+/** 浏览器画面流里的一条消息（节点原样转发）。 */
+export type BrowserMessage =
+  | { type: "frame"; data: string; metadata?: { deviceWidth: number; deviceHeight: number } }
+  | { type: "page"; url?: string; title?: string }
+  | { type: "error"; message?: string };

package/src/elements.tsx

@@ -7,18 +7,27 @@
  *
  *   <cli-msglist group="a" base-url="/api/center" title="战略"></cli-msglist>
  *   <cli-chat group="a"></cli-chat>
+ *   <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>                                  （单独的浏览器实时画面）
  *
  * 同一个 group 的元素共享一个仓库：列表点哪个，对话就显示哪个；不写 group 各自独立。
- * 属性：base-url、token、line、namespace、group、job-id、title、color、theme、context、read-only、
+ * 属性：base-url、token、line、namespace、group、job-id、task-id（对话任务里的哪个对话，"new" = 新开一个；对话 / 看板）、
+ *       title、color、theme、context、read-only、
+ *       tabs（看板页签，逗号分隔：files,changes,browser）、default-tab、file-open（对话：auto / board / modal / link）、
  *       config（界面配置 JSON）、new-conversation（新建对话参数 JSON：title / businessId / workspace / callback / agent …）。
  * 界面配置也可以直接赋对象：document.querySelector("cli-chat").config = { header: { export: false } }。
- * 事件：cli-event（detail 是 CliEvent：select / conversation_turn / conversation_closed / job_change / error）；
- *       cli-callback（detail 与 center 回调 conversation_turn / conversation_closed 的请求体同名同义）。
+ * 事件（全在浏览器里从实时流算出，和 center 的 callback.url 无关）：
+ *       cli-turn-end（一轮结束）、cli-conversation-end（对话结束），detail 字段与 center 回调体一致；
+ *       cli-event（全部事件：select / conversation_turn / conversation_closed / job_change / open / error）；
+ *       cli-callback 是旧名字，等同于前两个合在一起，保留兼容。
  * 渲染在 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";
 
 const groups = new Map<string, CliStore>();
@@ -36,7 +45,7 @@ function storeFor(el: HTMLElement): CliStore | undefined {
   return store;
 }
 
-const ATTRS = ["base-url", "token", "line", "namespace", "group", "job-id", "title", "color", "theme", "context", "read-only", "config", "new-conversation"];
+const ATTRS = ["base-url", "token", "line", "namespace", "group", "job-id", "task-id", "title", "color", "theme", "context", "read-only", "config", "new-conversation", "tabs", "default-tab", "file-open", "path"];
 
 function jsonAttr(el: HTMLElement, name: string): object | undefined {
   const raw = el.getAttribute(name);
@@ -91,6 +100,8 @@ abstract class CliElement extends HTMLElement {
       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 })),
+      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 })),
       style: { height: "100%" },
       config: this.config as never,
@@ -103,8 +114,8 @@ abstract class CliElement extends HTMLElement {
 class CliMsgListElement extends CliElement {
   protected element() {
     const context = this.getAttribute("context");
-    // 回调类事件只由 <cli-chat> 发：同一个 group 里列表和对话共用一个仓库，两边都发的话 document 上会收到两遍。
-    const { onCallback: _chatOnly, ...common } = this.common();
+    // 结果事件只由 <cli-chat> 发：同一个 group 里列表和对话共用一个仓库，两边都发的话 document 上会收到两遍。
+    const { onTurnEnd: _a, onConversationEnd: _b, onCallback: _c, ...common } = this.common();
     return <CliMsgList {...common} {...(context !== null ? { context } : {})} />;
   }
 }
@@ -112,11 +123,44 @@ class CliMsgListElement extends CliElement {
 class CliChatElement extends CliElement {
   protected element() {
     const jobId = this.getAttribute("job-id");
-    return <CliChat {...this.common()} {...(jobId !== null ? { jobId: jobId || null } : {})} readOnly={this.hasAttribute("read-only")} />;
+    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 } : {})} />;
+  }
+}
+
+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 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")} />;
+  }
+}
+
+class CliFilePreviewElement extends CliElement {
+  protected element() {
+    const jobId = this.getAttribute("job-id");
+    const { onTurnEnd: _a, onConversationEnd: _b, onCallback: _c, title: _t, color: _k, config: _g, ...common } = this.common();
+    return <CliFilePreview {...common} {...(jobId !== null ? { jobId: jobId || null } : {})} path={this.getAttribute("path") ?? ""} />;
+  }
+}
+
+class CliBrowserElement extends CliElement {
+  protected element() {
+    const jobId = this.getAttribute("job-id");
+    const { onTurnEnd: _a, onConversationEnd: _b, onCallback: _c, title: _t, color: _k, config: _g, ...common } = this.common();
+    return <CliBrowserView {...common} {...(jobId !== null ? { jobId: jobId || null } : {})} readOnly={this.hasAttribute("read-only")} />;
   }
 }
 
 export function defineCliElements() {
   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);
 }

package/src/embed.ts

@@ -5,7 +5,10 @@
  *   <script type="module" src="/static/cli-ui/cli-ui.js"></script>
  *   <cli-chat base-url="/api/center" job-id="job_xxx"></cli-chat>
  *
- * 引入后自动注册 <cli-chat> / <cli-msglist>；想用 JS 控制（传回调函数、随时改参数）就用 window.CliUI.mountChat / mountMsgList。
+ * 引入后自动注册 <cli-chat> / <cli-msglist> / <cli-board>；想用 JS 控制（传回调函数、随时改参数）就用
+ * window.CliUI.mountChat / mountMsgList / mountBoard。几个 mount 要联动（对话里点文件在看板打开）时传同一个 store：
+ *   const store = CliUI.createCliStore({ baseUrl: "/api/center" });
+ *   CliUI.mountChat(a, { store }); CliUI.mountBoard(b, { store });
  * 产物由 `npm run build:embed -w @spzxg/cli-ui` 生成在 dist/。
  */
 import "./styles.css";
@@ -14,6 +17,8 @@ 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";
@@ -35,13 +40,19 @@ function mount<P extends object>(Component: (props: P) => unknown, el: Element,
   };
 }
 
-/** 在一个元素里挂对话组件。参数与 React 的 <CliChat> 相同（jobId、newConversation、onCallback、config……）。 */
+/** 在一个元素里挂对话组件。参数与 React 的 <CliChat> 相同（jobId、newConversation、onTurnEnd、config……）。 */
 export const mountChat = (el: Element, props: CliChatProps = {}) => mount(CliChat, el, props);
 /** 在一个元素里挂列表组件。参数与 React 的 <CliMsgList> 相同。 */
 export const mountMsgList = (el: Element, props: CliMsgListProps = {}) => mount(CliMsgList, el, props);
+/** 在一个元素里挂右侧看板。参数与 React 的 <CliBoard> 相同（jobId、tabs、fileActions……）。 */
+export const mountBoard = (el: Element, props: CliBoardProps = {}) => mount(CliBoard, el, props);
+/** 单独的文件预览 + 下载：{ jobId, path, baseUrl… }。 */
+export const mountFilePreview = (el: Element, props: CliFilePreviewProps) => mount(CliFilePreview, el, props);
+/** 单独的浏览器实时画面：{ jobId, readOnly, baseUrl… }。 */
+export const mountBrowser = (el: Element, props: CliBrowserViewProps = {}) => mount(CliBrowserView, el, props);
 
-export { defineCliElements, CliChat, CliMsgList, CliCenterProvider, createCliStore, createCenterClient };
+export { defineCliElements, CliChat, CliMsgList, CliBoard, CliFilePreview, CliBrowserView, CliCenterProvider, createCliStore, createCenterClient };
 
 defineCliElements();
-const api = { mountChat, mountMsgList, createCliStore, createCenterClient, defineCliElements };
+const api = { mountChat, mountMsgList, mountBoard, mountFilePreview, mountBrowser, createCliStore, createCenterClient, defineCliElements };
 (globalThis as { CliUI?: typeof api }).CliUI = api;

package/src/index.ts

@@ -3,10 +3,12 @@
  *
  *   cli-msglist  消息对话列表（CliMsgList）
  *   cli-chat     对话（CliChat）
- *   cli-board    右侧看板 —— 规划中，见 PLAN.md
+ *   cli-board    右侧看板：工作区文件（预览 / 下载）、改动、任务浏览器（CliBoard）
+ *                 其中两个核心也能单独用：CliFilePreview（文件预览 + 下载）、CliBrowserView（浏览器实时画面）
  *
  * 单独用：
  *   <CliChat baseUrl="/api/center" jobId="job_xxx" />
+ *   <CliChat baseUrl="/api/center" jobId="job_xxx" taskId="task_yyy" />   （对话任务里的某个对话；taskId="new" 新开一个）
  * 组合用（同一个 Provider 里共享选中和实时流）：
  *   <CliCenterProvider baseUrl="/api/center" namespace="strategy">
  *     <CliMsgList title="战略" />
@@ -18,15 +20,19 @@
  */
 export { CliMsgList, type CliMsgListProps } from "./msglist/CliMsgList.js";
 export { CliChat, type CliChatProps } from "./chat/CliChat.js";
-export { CliCenterProvider, useCliStore, useCliState, type CliCenterProviderProps } from "./core/provider.js";
+export { CliBoard, type CliBoardProps, type BoardTab } from "./board/CliBoard.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 { 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 } from "./core/store.js";
-export { createCenterClient, CenterError, type CenterClient, type CenterClientOptions, type StreamHandlers } from "./core/client.js";
-export { viewMessages, isRunning, runningTurn, type ConvState } from "./core/conversation.js";
+export { createCliStore, type CliStore, type CliStoreOptions, type CliState, type CliEvent, type JobEntry, type OpenTarget } 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 {
   composeMessage, splitMessage, serializeBlock, readFileText, isLongText, ACCEPTED_EXTENSIONS, MAX_MESSAGE_CHARS,
   type TextBlock, type MessagePart,