@spzxg/cli-ui 0.1.0 → 0.3.0

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,

package/src/msglist/CliMsgList.tsx

@@ -1,24 +1,30 @@
 // cli-msglist：消息对话列表。界面取自 Operator 的任务栏（TasksColumn 的列表视图，不做看板），
-// 一张卡片是 center 里的一个对话任务（mode=conversation）。
+// 一张卡片是 center 里的一个对话任务（mode=conversation）。对话任务里开了几个对话时，卡片下面按对话展开，
+// 点哪个对话选哪个（选中值是对话键 "job#task"）；卡片上的「+」在这个对话任务里新开一个对话（同一个工作区）。
 import { useEffect, useMemo, useState, type CSSProperties } from "react";
 import type { CliEvent, JobEntry } from "../core/store.js";
-import type { ConversationCallback } from "../core/types.js";
 import type { CliStoreOptions, CliStore } from "../core/store.js";
-import { useCliState, useCliStore, useCliStoreContext, useComponentEvents, withOwnProvider } from "../core/provider.js";
-import { TERMINAL_JOB } from "../core/conversation.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";
 
-export interface CliMsgListProps extends CliStoreOptions {
+/** onTurnEnd / onConversationEnd：浏览器里从实时流算出的结果通知，不依赖 center 的 callback.url。 */
+export interface CliMsgListProps extends CliStoreOptions, ResultHandlers {
   /** 列表显示哪些对话（center 的 job_id）。不给就用本地记住的 + （discover 时）从 center 发现的。 */
   jobIds?: string[];
   /** 没给 jobIds 时，挂载后从 center 发现本产品线的对话。缺省 true。 */
   discover?: boolean;
-  /** 受控的选中项；不给就用共享仓库里的选中（和 cli-chat 联动）。 */
+  /** 受控的选中项（对话键：job_id，或 "job_id#task_id"）；不给就用共享仓库里的选中（和 cli-chat 联动）。 */
   selectedId?: string | null;
-  onSelect?: (jobId: string) => void;
+  /**
+   * 选了一个对话。id 是对话键：只有一个对话的对话任务是 job_id；对话任务里的某个对话是 "job_id#task_id"；
+   * 点了「+」是 "job_id#new"（在这个对话任务里新开对话）。ref 是拆开的 jobId / taskId（新开时 taskId 为 "new"）。
+   */
+  onSelect?: (id: string, ref: { jobId: string; taskId: string | null }) => void;
   /** 点「新对话」：缺省清空选中，cli-chat 会显示空白的新对话。 */
   onNew?: () => void;
   /** 顶部名称与色块（如业务 / 项目名）。 */
@@ -37,8 +43,7 @@ export interface CliMsgListProps extends CliStoreOptions {
   /** 界面配置：顶部栏、搜索、卡片内容、分组标题与空状态文案，见 core/config.ts。 */
   config?: CliMsgListConfig;
   onEvent?: (event: CliEvent) => void;
-  /** 前端回调：载荷与 center 回调 conversation_turn / conversation_closed 的请求体同名同义。 */
-  onCallback?: (payload: ConversationCallback) => void;
+
   store?: CliStore;
 }
 
@@ -78,19 +83,50 @@ 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 };
   }
-  const running = !!conv?.running_turn;
+  // 开了几个对话：任何一个在跑就算在跑，任何一个停在提问上就要你处理（关掉的对话不算）。
+  const open = (conv?.conversations ?? []).filter((c) => !c.closed);
+  const many = (conv?.conversations?.length ?? 0) > 1;
+  const running = many ? open.some((c) => c.running_turn) : !!conv?.running_turn;
   // 上一轮以提问结束、后面没有新消息：等你回答。
-  const awaiting = !running && !conv?.queued_turns && !!conv?.last_turn?.asked;
+  const awaiting = many ? open.some((c) => !c.running_turn && !c.queued_turns && !!c.last_turn?.asked) : !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) : "未开始";
   return { ...base, cls: "a", label: "进行中", running, awaiting, group: "active", activity: waiting };
 }
 
-function MsgCard({ v, selected, onSelect, show }: { v: CardView; selected: boolean; onSelect: () => void; show: ResolvedMsgListConfig["card"] }) {
+/** 对话任务里的一个对话（对话任务开了几个对话时，卡片下面的一行）。 */
+interface ConvRowView {
+  key: string;
+  title: string;
+  cls: DotCls;
+  label: string;
+  running: boolean;
+  awaiting: boolean;
+  activity: string;
+  turns: number;
+}
+
+/** 对话任务里的对话：只有一个时返回 []（整张卡片就是它）。 */
+export function convRows(jobId: string, entry: JobEntry | undefined): ConvRowView[] {
+  const list = entry?.job?.conversation?.conversations ?? [];
+  if (list.length <= 1) return [];
+  const jobEnded = TERMINAL_JOB.has(entry?.job?.status ?? "");
+  return list.map((c: ConversationInfo) => {
+    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;
+    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} 条排队中` : "空闲" };
+  });
+}
+
+function MsgCard({ v, selected, onSelect, show, onNewInJob }: { v: CardView; selected: boolean; onSelect: () => void; show: ResolvedMsgListConfig["card"]; onNewInJob?: () => void }) {
   if (v.loading) return <CardSkeleton i={v.id.length} />;
   const foot = show.activity || (show.turns && v.turns > 0);
-  return (
+  const card = (
     <button className={`task ${selected ? "sel" : ""} ${v.awaiting && show.status ? "awaiting" : ""}`} onClick={onSelect} title={v.error ?? undefined}>
       <div className="task-top">
         {show.status && <StatusDot cls={v.cls} running={v.running} awaiting={v.awaiting} title={v.label} />}
@@ -103,10 +139,29 @@ function MsgCard({ v, selected, onSelect, show }: { v: CardView; selected: boole
       {foot && <div className="task-foot">
         {show.activity && <span className="activity">{v.awaiting ? <span style={{ color: "var(--blue)" }}>●</span> : v.running ? <span style={{ color: "var(--amber)" }}>●</span> : null}{v.activity}</span>}
         <span className="spacer" />
-        {show.turns && v.turns > 0 && <span className="activity">{v.turns} 轮对话</span>}
+        {show.turns && v.turns > 0 && <span className="activity">{v.turns} 条消息</span>}
       </div>}
     </button>
   );
+  if (!onNewInJob) return card;
+  // 「+」不能放进卡片按钮里（按钮不能嵌套）：叠在卡片右下角。
+  return (
+    <div className="cli-job-card">
+      {card}
+      <button className="icon-btn cli-new-in-job" onClick={onNewInJob} title="在这个任务里新开一个对话（共用同一个工作区）" aria-label="在这个任务里新开一个对话">{Icon.plus()}</button>
+    </div>
+  );
+}
+
+function ConvRow({ v, selected, onSelect, show }: { v: ConvRowView; selected: boolean; onSelect: () => void; show: ResolvedMsgListConfig["card"] }) {
+  return (
+    <button className={`cli-conv-row ${selected ? "sel" : ""} ${v.awaiting && show.status ? "awaiting" : ""}`} onClick={onSelect}>
+      {show.status && <StatusDot cls={v.cls} running={v.running} awaiting={v.awaiting} title={v.label} />}
+      <span className="cli-conv-title">{v.title}</span>
+      {show.activity && <span className="cli-conv-act">{v.activity}</span>}
+      {show.turns && v.turns > 0 && <span className="cli-conv-act">{v.turns} 条</span>}
+    </button>
+  );
 }
 
 function CardSkeleton({ i = 0 }: { i?: number }) {
@@ -119,9 +174,40 @@ function CardSkeleton({ i = 0 }: { i?: number }) {
   );
 }
 
-function Group({ label, cards, selected, onSelect, show, accent, collapsible, collapsed, onToggle }: { label: string | false; cards: CardView[]; selected: string | null; onSelect: (id: string) => void; show: ResolvedMsgListConfig["card"]; accent?: boolean; collapsible?: boolean; collapsed?: boolean; onToggle?: () => void }) {
+type GroupProps = {
+  label: string | false; cards: CardView[]; selected: string | null; onSelect: (id: string) => void; show: ResolvedMsgListConfig["card"];
+  rows: Record<string, ConvRowView[]>; firstTask: Record<string, string | undefined>; onNewInJob?: (jobId: string) => void;
+  accent?: boolean; collapsible?: boolean; collapsed?: boolean; onToggle?: () => void;
+};
+
+function Group({ label, cards, selected, onSelect, show, rows, firstTask, onNewInJob, accent, collapsible, collapsed, onToggle }: GroupProps) {
   if (!cards.length || label === false) return null;
-  const list = cards.map((v) => <MsgCard key={v.id} v={v} selected={v.id === selected} onSelect={() => onSelect(v.id)} show={show} />);
+  const sel = selected ? parseConvKey(selected) : null;
+  const list = cards.map((v) => {
+    const convs = rows[v.id] ?? [];
+    // 选中的是这个对话任务：只有 job_id 指它的第一个对话。
+    const selectedKey = sel?.jobId === v.id ? convKey(v.id, sel.taskId ?? firstTask[v.id]) : null;
+    const newing = sel?.jobId === v.id && sel.taskId === NEW_TASK;
+    const card = (
+      <MsgCard
+        key={v.id} v={v} show={show}
+        // 只有一个对话：整张卡片就是它；有几个对话：卡片是标题，选中落在下面的行上。
+        selected={!convs.length && !newing && sel?.jobId === v.id}
+        onSelect={() => onSelect(convs.length ? convs.find((c) => c.key === selectedKey)?.key ?? convs[0].key : v.id)}
+        onNewInJob={onNewInJob && v.group !== "done" && v.group !== "cancelled" ? () => onNewInJob(v.id) : undefined}
+      />
+    );
+    if (!convs.length && !newing) return card;
+    return (
+      <div key={v.id} className="cli-job-group">
+        {card}
+        <div className="cli-conv-rows">
+          {convs.map((c) => <ConvRow key={c.key} v={c} selected={c.key === selectedKey} onSelect={() => onSelect(c.key)} show={show} />)}
+          {newing && <div className="cli-conv-row sel"><span className="cli-conv-title">新对话 · 发第一条消息后开始</span></div>}
+        </div>
+      </div>
+    );
+  });
   if (collapsible) {
     return (
       <>
@@ -141,8 +227,8 @@ function Group({ label, cards, selected, onSelect, show, accent, collapsible, co
   );
 }
 
-function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, title = "对话", color = "#b8613f", context, onEditContext, onCollapse, pollMs = 10_000, config, theme = "light", className, style, width, onEvent, onCallback, inProvider }: CliMsgListProps & { inProvider: boolean }) {
-  useComponentEvents(onEvent, onCallback, inProvider);
+function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, title = "对话", color = "#b8613f", context, onEditContext, onCollapse, pollMs = 10_000, config, theme = "light", className, style, width, onEvent, onTurnEnd, onConversationEnd, onCallback, inProvider }: CliMsgListProps & { inProvider: boolean }) {
+  useComponentEvents(onEvent, { onTurnEnd, onConversationEnd, onCallback }, inProvider);
   const configKey = JSON.stringify(config ?? {});
   const cfg = useMemo(() => resolveMsgListConfig(config), [configKey]); // eslint-disable-line react-hooks/exhaustive-deps
   const h = cfg.header;
@@ -162,7 +248,10 @@ function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, ti
   useEffect(() => { if (jobIds) store.setJobIds(jobIds); }, [store, idsKey]); // eslint-disable-line react-hooks/exhaustive-deps
   // 宿主选中了列表里还没有的对话（例如旁边独立的 cli-chat 刚新建出来的）：加进列表，不用两个组件共享任何东西。
   // 放在 setJobIds 之后，宿主的 jobIds 更新后也会再补一次。
-  useEffect(() => { if (selected && !ids.includes(selected)) store.addJob(selected); }, [selected, ids, store]);
+  useEffect(() => {
+    const jobId = selected ? parseConvKey(selected).jobId : null;
+    if (jobId && !ids.includes(jobId)) store.addJob(jobId);
+  }, [selected, ids, store]);
 
   // 首次：刷新已知的；没给 jobIds 时再去 center 发现。
   useEffect(() => {
@@ -183,7 +272,8 @@ function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, ti
 
   const cards = useMemo(() => ids.map((id) => cardView(id, jobs[id])), [ids, jobs]);
   const q = query.trim().toLowerCase();
-  const shown = q ? cards.filter((c) => c.title.toLowerCase().includes(q) || c.desc.toLowerCase().includes(q)) : cards;
+  const shown = q ? cards.filter((c) => c.title.toLowerCase().includes(q) || c.desc.toLowerCase().includes(q)
+    || (jobs[c.id]?.job?.conversation?.conversations ?? []).some((conv) => conv.title.toLowerCase().includes(q))) : cards;
   const byRecent = (a: CardView, b: CardView) => b.updatedAt - a.updatedAt;
   const groups = {
     needs: shown.filter((c) => c.group === "needs").sort(byRecent),
@@ -191,7 +281,11 @@ function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, ti
     done: shown.filter((c) => c.group === "done").sort(byRecent),
     cancelled: shown.filter((c) => c.group === "cancelled").sort(byRecent),
   };
-  const select = (id: string) => { if (selectedId === undefined) store.select(id); onSelect?.(id); };
+  const select = (id: string) => { if (selectedId === undefined) store.select(id); onSelect?.(id, parseConvKey(id)); };
+  const newInJob = cfg.card.newInJob ? (jobId: string) => select(convKey(jobId, NEW_TASK)) : undefined;
+  const rows = useMemo(() => Object.fromEntries(ids.map((id) => [id, convRows(id, jobs[id])])), [ids, jobs]);
+  const firstTask = useMemo(() => Object.fromEntries(ids.map((id) => [id, jobs[id]?.job?.conversation?.conversations?.[0]?.task_id ?? jobs[id]?.job?.tasks?.[0]?.id])), [ids, jobs]);
+  const groupProps = { selected, onSelect: select, show: cfg.card, rows, firstTask, onNewInJob: newInJob };
   const startNew = () => { if (onNew) onNew(); else store.select(null); };
   const firstLoad = !discovered && !cards.length;
   const showRow = h.show && (h.title || h.newButton || h.refresh || !!onCollapse);
@@ -234,10 +328,10 @@ function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, ti
               <>
                 {cards.length === 0 && <div className="empty" style={{ padding: "30px 16px" }}><div className="e-t">{cfg.emptyTitle}</div>{cfg.emptyDescription && <div className="e-s">{cfg.emptyDescription}</div>}</div>}
                 {q && shown.length === 0 && <div className="search-empty">没有匹配“{query.trim()}”的对话。</div>}
-                <Group label={cfg.groups.needs} cards={groups.needs} selected={selected} onSelect={select} show={cfg.card} accent />
-                <Group label={cfg.groups.active} cards={groups.active} selected={selected} onSelect={select} show={cfg.card} />
-                <Group label={cfg.groups.done} cards={groups.done} selected={selected} onSelect={select} show={cfg.card} collapsible collapsed={doneCollapsed && !q} onToggle={() => setDoneCollapsed((c) => !c)} />
-                <Group label={cfg.groups.cancelled} cards={groups.cancelled} selected={selected} onSelect={select} show={cfg.card} collapsible collapsed={cancelledCollapsed && !q} onToggle={() => setCancelledCollapsed((c) => !c)} />
+                <Group label={cfg.groups.needs} cards={groups.needs} {...groupProps} accent />
+                <Group label={cfg.groups.active} cards={groups.active} {...groupProps} />
+                <Group label={cfg.groups.done} cards={groups.done} {...groupProps} collapsible collapsed={doneCollapsed && !q} onToggle={() => setDoneCollapsed((c) => !c)} />
+                <Group label={cfg.groups.cancelled} cards={groups.cancelled} {...groupProps} collapsible collapsed={cancelledCollapsed && !q} onToggle={() => setCancelledCollapsed((c) => !c)} />
               </>
             )}
           </div>

package/src/styles.css

@@ -48,3 +48,127 @@
 
 /* 排队气泡下的等待原因（中枢给的：节点连不上、没有可用节点……） */
 .cli-ui .cli-queued-note{margin-top:6px;font-size:12px;color:var(--amber);}
+
+/* Agent 消息里打不开的本地文件链接：显示成文字（路径在悬停提示里） */
+.cli-ui .md .cli-local-link{color:var(--ink-2);border-bottom:1px dashed var(--line-strong);cursor:help;}
+
+/* ── cli-board：右侧看板（Operator 右栏的样子 + 文件浏览 / 预览） ── */
+.cli-ui.cli-file-preview,
+.cli-ui.cli-browser-view{display:flex;flex-direction:column;min-height:0;min-width:0;height:100%;overflow:hidden;background:var(--panel);}
+.cli-ui.cli-browser-view .rail-pad{flex:1;}
+.cli-ui.cli-board{display:flex;flex-direction:column;min-height:0;min-width:0;height:100%;overflow:hidden;border-left:1px solid var(--line);}
+.cli-ui.cli-board .rail-scroll{overflow:hidden;}
+.cli-ui.cli-board.collapsed{background:var(--bg-2);}
+.cli-ui .cli-board-strip{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;height:100%;padding:14px 0;color:var(--ink-3);}
+.cli-ui .cli-board-strip:hover{background:var(--row-sel);color:var(--ink);}
+.cli-ui .cli-board-strip svg{width:14px;height:14px;transform:rotate(180deg);}
+.cli-ui .cli-board-strip-t{writing-mode:vertical-rl;font-family:var(--mono);font-size:11px;letter-spacing:.1em;}
+.cli-ui.cli-board .tc-note{padding:18px 16px;font-size:13px;color:var(--ink-3);line-height:1.6;}
+.cli-ui .cli-sync-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink-4);margin-right:5px;vertical-align:middle;}
+.cli-ui .cli-sync-dot.on{background:var(--green);animation:cli-pulse 1.6s ease-in-out infinite;}
+@keyframes cli-pulse{50%{opacity:.35;}}
+.cli-ui .cli-tc-open{font-size:11px;color:var(--accent);padding:1px 6px;border-radius:5px;margin-left:6px;cursor:pointer;}
+.cli-ui .cli-tc-open:hover{background:var(--accent-soft);}
+
+.cli-ui .cli-files{display:flex;flex-direction:column;min-height:0;flex:1;}
+.cli-ui .cli-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:10px 12px;border-bottom:1px solid var(--line-2);font-size:12.5px;}
+.cli-ui .cli-crumb{display:inline-flex;align-items:center;gap:5px;padding:3px 6px;border-radius:6px;color:var(--ink-3);}
+.cli-ui .cli-crumb svg{width:13px;height:13px;}
+.cli-ui .cli-crumb.on{color:var(--ink);font-weight:600;}
+.cli-ui .cli-crumb:hover{background:var(--row-sel);}
+.cli-ui .cli-crumb-sep{color:var(--ink-4);}
+.cli-ui .cli-files-sync{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);}
+.cli-ui .cli-files-list{flex:1;min-height:0;overflow-y:auto;padding:4px 0;}
+.cli-ui .cli-frow{display:flex;align-items:center;width:100%;}
+.cli-ui .cli-frow:hover{background:var(--row-sel);}
+.cli-ui .cli-frow.fresh .cli-frow-name{color:var(--accent-ink);}
+.cli-ui button.cli-frow,.cli-ui .cli-frow-main{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:7px 12px;font-size:13px;text-align:left;color:var(--ink);}
+.cli-ui .cli-frow-ic{display:inline-flex;color:var(--ink-3);}
+.cli-ui .cli-frow.dir .cli-frow-ic{color:var(--accent);}
+.cli-ui .cli-frow-ic svg{width:14px;height:14px;}
+.cli-ui .cli-frow-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.cli-ui .cli-frow-new{font-size:10.5px;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:9px;}
+.cli-ui .cli-frow-meta{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);white-space:nowrap;}
+.cli-ui .cli-frow-dl{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:6px;border-radius:6px;color:var(--ink-3);opacity:0;}
+.cli-ui .cli-frow:hover .cli-frow-dl,.cli-ui .cli-frow-dl:focus-visible{opacity:1;}
+.cli-ui .cli-frow-dl:hover{background:var(--surface-2);color:var(--ink);}
+.cli-ui .cli-frow-dl svg{width:14px;height:14px;}
+@media (hover:none){.cli-ui .cli-frow-dl{opacity:1;}}
+
+.cli-ui .cli-fv{display:flex;flex-direction:column;min-height:0;flex:1;background:var(--panel);}
+.cli-ui .cli-fv-h{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line-2);font-size:12.5px;min-width:0;}
+.cli-ui .cli-fv-ic{display:inline-flex;color:var(--ink-3);}
+.cli-ui .cli-fv-ic svg{width:14px;height:14px;}
+.cli-ui .cli-fv-name{font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.cli-ui .cli-fv-meta{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);white-space:nowrap;}
+.cli-ui .cli-fv-sp{flex:1;}
+.cli-ui .cli-fv-back{font-size:18px;line-height:1;width:26px;height:26px;border-radius:6px;color:var(--ink-3);}
+.cli-ui .cli-fv-back:hover{background:var(--row-sel);color:var(--ink);}
+.cli-ui .cli-fv-btn{font-size:12px;color:var(--accent);padding:3px 8px;border-radius:6px;white-space:nowrap;}
+.cli-ui .cli-fv-btn:hover{background:var(--accent-soft);}
+.cli-ui .cli-fv-icon{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;color:var(--ink-3);flex:none;}
+.cli-ui .cli-fv-icon:hover:not(:disabled){background:var(--surface-2);color:var(--ink);}
+.cli-ui .cli-fv-icon:disabled{opacity:.4;}
+.cli-ui .cli-fv-icon svg{width:14px;height:14px;}
+.cli-ui .cli-fv-b{flex:1;min-height:0;overflow:auto;}
+.cli-ui .cli-fv-b.k-pdf,.cli-ui .cli-fv-b.k-html,.cli-ui .cli-fv-b.k-docx{overflow:hidden;display:flex;}
+.cli-ui .cli-fv-frame{flex:1;width:100%;height:100%;min-height:360px;border:0;background:#fff;}
+.cli-ui .cli-fv-md{padding:16px 18px;}
+.cli-ui .cli-fv-code .md pre{margin:0;border:0;border-radius:0;min-height:100%;}
+.cli-ui .cli-fv-pre{margin:0;padding:12px 14px;font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--ink);white-space:pre-wrap;word-break:break-word;}
+.cli-ui .cli-fv-img{display:grid;place-items:center;padding:16px;min-height:100%;background:repeating-conic-gradient(var(--surface-2) 0 25%,transparent 0 50%) 0 0/16px 16px;}
+.cli-ui .cli-fv-img img{max-width:100%;height:auto;box-shadow:var(--sh-1);}
+.cli-ui .cli-fv-csv{overflow:auto;}
+.cli-ui .cli-fv-csv table{border-collapse:collapse;font-size:12px;font-family:var(--mono);}
+.cli-ui .cli-fv-csv th,.cli-ui .cli-fv-csv td{border:1px solid var(--line-2);padding:4px 8px;white-space:nowrap;text-align:left;}
+.cli-ui .cli-fv-csv th{position:sticky;top:0;background:var(--surface-2);font-weight:600;}
+.cli-ui .cli-fv-note{padding:18px 16px;font-size:13px;color:var(--ink-3);line-height:1.7;}
+.cli-ui .cli-fv-note.err{color:var(--red);}
+.cli-ui .cli-fv-trunc{padding:6px 14px;font-size:12px;color:var(--amber);background:var(--surface-2);border-bottom:1px solid var(--line-2);}
+
+/* 对话里弹窗打开的文件 / 浏览器 */
+.cli-ui .modal.cli-popup{width:min(960px,calc(100vw - 40px));height:min(82vh,900px);display:flex;flex-direction:column;overflow:hidden;}
+.cli-ui .modal.cli-popup.browser .rail-pad{flex:1;}
+.cli-ui .md a[href="#"]{cursor:pointer;}
+
+/* ── 浏览器实时画面（canvas）：按比例适应容器；接管时高亮 ── */
+.cli-ui .bp-screen{display:flex;align-items:center;justify-content:center;}
+/* 宽高都用 auto + max-*：替换元素按自身比例缩小，点击坐标和显示区域一致。 */
+.cli-ui .bp-frame{display:block;max-width:100%;max-height:var(--cli-browser-max-h,70vh);width:auto;height:auto;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
+.cli-ui .bp-frame.live{cursor:pointer;outline:2px solid var(--coral);outline-offset:-2px;}
+/* 键盘 / 输入法接收框：不放到屏幕外（focus 时会把宿主的滚动容器拖过去），透明盖在左上角，不挡点击。 */
+.cli-ui .bp-keys{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;resize:none;border:0;padding:0;}
+
+/* ── 窄容器（手机、很窄的侧栏）：预览工具栏换行，次要信息收起 ── */
+.cli-ui .cli-fv{container-type:inline-size;}
+.cli-ui .cli-fv-h{flex-wrap:wrap;row-gap:4px;}
+@container (max-width:380px){
+  .cli-ui .cli-fv-meta{display:none;}
+  .cli-ui .cli-fv-btn{padding:3px 6px;}
+}
+.cli-ui.cli-board{container-type:inline-size;}
+@container (max-width:340px){
+  .cli-ui .cli-frow-meta{display:none;}
+  .cli-ui .rail-tab{padding:12px 9px 10px;}
+}
+.cli-ui .scrim{z-index:var(--cli-popup-z,200);}
+
+/* ── 对话列表：一个任务里的几个对话 ── */
+.cli-ui .cli-job-card{position:relative;margin-bottom:8px;}
+.cli-ui .cli-job-card .task{width:100%;margin-bottom:0;}
+.cli-ui .cli-job-card .task .task-foot{padding-right:26px;}
+.cli-ui .cli-new-in-job{position:absolute;right:8px;bottom:8px;width:22px;height:22px;opacity:0;transition:opacity .12s;}
+.cli-ui .cli-job-card:hover .cli-new-in-job,
+.cli-ui .cli-new-in-job:focus-visible{opacity:1;}
+@media (hover:none){.cli-ui .cli-new-in-job{opacity:1;}}
+.cli-ui .cli-job-group{margin-bottom:8px;}
+.cli-ui .cli-job-group .cli-job-card,
+.cli-ui .cli-job-group .task{margin-bottom:0;}
+.cli-ui .cli-conv-rows{display:flex;flex-direction:column;gap:2px;margin:4px 0 0 14px;padding-left:8px;border-left:1px solid var(--line);}
+.cli-ui .cli-conv-row{display:flex;align-items:center;gap:8px;width:100%;min-width:0;padding:6px 8px;border:1px solid transparent;border-radius:var(--r);background:none;color:inherit;text-align:left;cursor:pointer;font-size:12.5px;}
+.cli-ui div.cli-conv-row{cursor:default;color:var(--ink-3);}
+.cli-ui .cli-conv-row:hover{background:var(--surface-2);}
+.cli-ui .cli-conv-row.sel{border-color:var(--accent);background:var(--surface);}
+.cli-ui .cli-conv-row.awaiting{box-shadow:inset 2px 0 0 var(--blue);}
+.cli-ui .cli-conv-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.cli-ui .cli-conv-act{font-family:var(--mono);font-size:10px;color:var(--ink-3);white-space:nowrap;}

package/src/ui/Markdown.tsx

@@ -1,23 +1,52 @@
-import { memo, type ComponentProps } from "react";
-import ReactMarkdown from "react-markdown";
+import { memo, useContext, type ComponentProps, type MouseEvent } from "react";
+import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
+import { FileLinkContext, FileOpenContext, localFilePath } from "./fileLinks.js";
 
 // 渲染 Agent 的 markdown 输出：标题、列表、表格、带语言的代码块（高亮）、行内代码、链接。
 // 与 Operator 的 Markdown.tsx 一致：只高亮写明语言的代码块（自动识别在流式输出时很耗），
 // 并 memo，文字没变的消息重渲染时跳过整个解析。
-// Operator 里本地文件链接会改走任务的文件接口；这里没有文件接口（见 PLAN.md 的看板组件），链接原样打开。
-function MdLink(props: ComponentProps<"a">) {
-  return <a {...props} target="_blank" rel="noreferrer" />;
+// 本地文件链接按 Operator 的规则识别：有地址（FileLinkContext）就改写过去，没有就显示成不可点的文字。
+function MdLink({ href, children, ...props }: ComponentProps<"a">) {
+  const resolve = useContext(FileLinkContext);
+  const open = useContext(FileOpenContext);
+  const local = localFilePath(href);
+  if (local) {
+    const url = resolve?.(local, "link") ?? null;
+    if (!url && !open) return <span className="cli-local-link" title={`本地文件：${local}`}>{children}</span>;
+    const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+      if (!open || (url && (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0))) return;
+      if (open(local) || !url) e.preventDefault();
+    };
+    return <a {...props} href={url ?? "#"} target="_blank" rel="noreferrer" title={`打开文件：${local}`} onClick={onClick}>{children}</a>;
+  }
+  return <a {...props} href={href} target="_blank" rel="noreferrer">{children}</a>;
 }
 
+function MdImg({ src, alt, ...props }: ComponentProps<"img">) {
+  const resolve = useContext(FileLinkContext);
+  const local = typeof src === "string" ? localFilePath(src) : null;
+  if (local) {
+    const url = resolve?.(local, "image") ?? null;
+    if (!url) return <span className="cli-local-link" title={`本地文件：${local}`}>{alt || local}</span>;
+    // eslint-disable-next-line jsx-a11y/alt-text
+    return <img {...props} alt={alt ?? ""} src={url} />;
+  }
+  return <img {...props} alt={alt ?? ""} src={src} />;
+}
+
+// 缺省的地址处理会把 file: 等非网页协议清空；放行 file: 和 Windows 路径，交给上面按本地文件处理（与 Operator 一致）。
+const urlTransform = (url: string) => (/^file:/i.test(url) || /^[a-z]:[\\/]/i.test(url) ? url : defaultUrlTransform(url));
+
 export const Markdown = memo(function Markdown({ children }: { children: string }) {
   return (
     <div className="md">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[[rehypeHighlight, { detect: false, ignoreMissing: true }]]}
-        components={{ a: MdLink }}
+        components={{ a: MdLink, img: MdImg }}
+        urlTransform={urlTransform}
       >
         {children}
       </ReactMarkdown>