@spzxg/cli-ui 0.3.0 → 0.4.0

package/src/core/store.ts

@@ -11,7 +11,7 @@
  * 单独用某个组件时它会自己建一个仓库；放进同一个 <CliCenterProvider>（或同一个 group 的 Web Component）就共享一个。
  */
 import { CenterError, createCenterClient, firstLine, type CenterClient, type CenterClientOptions } from "./client.js";
-import { addTurnsIfAbsent, applyItems, applySnapshot, closedCallback, convEnded, convKey, emptyConv, NEW_TASK, parseConvKey, TERMINAL_JOB, TERMINAL_TURN, turnCallback, upsertTurns, type ConvState } from "./conversation.js";
+import { addTurnsIfAbsent, applyItems, applySnapshot, closedCallback, convEnded, convKey, emptyConv, isChatTask, NEW_TASK, parseConvKey, TERMINAL_JOB, TERMINAL_TURN, turnCallback, upsertTurns, type ConvState } from "./conversation.js";
 import { formatAnswersText } from "../ui/format.js";
 import type { AskAnswers, AskQuestion, CenterJob, CenterTurn, ConversationClosedCallback, ConversationTurnCallback, NewConversationOptions } from "./types.js";
 
@@ -149,7 +149,8 @@ export function createCliStore(options: CliStoreOptions = {}) {
     // 对话结束（整个对话任务结束，或只关掉了这一个对话）：只对本页看着还开着的对话发（打开时就已结束的不算）；
     // 而且要等所有轮次都收尾之后再发，保证 conversation_closed 排在这个对话最后一个 conversation_turn 之后（与 center 的 callback_seq 一致）。
     if (next.job && !convEnded(next)) seenOpen.add(key);
-    if (next.job && convEnded(next) && seenOpen.has(key) && !closedJobs.has(key)) {
+    // 一次性任务（只读查看）没有对话的结果通知。
+    if (next.job && convEnded(next) && seenOpen.has(key) && !closedJobs.has(key) && !next.batch) {
       const settled = next.turns.every((turn) => TERMINAL_TURN.has(turn.status));
       if (settled || next.stream === "ended") {
         closedJobs.add(key);
@@ -429,6 +430,22 @@ export function createCliStore(options: CliStoreOptions = {}) {
         void refreshJob(newId, true);
         return newId;
       }
+      const shown = state.convs[key];
+      if (ref.taskId && isChatTask(shown)) {
+        // 一次性任务里的对话式子任务：续派一条接着它的对话（中枢接到这个对话最新的那条后面），对话键不变。
+        // 续派没有按 business_id 去重，不重发。
+        if (!client.continueTask) throw new CenterError("当前后端不支持接着对话式子任务聊", "UNSUPPORTED", 0);
+        const { task_id } = await client.continueTask(ref.jobId, ref.taskId, text, { businessId });
+        // 先显示成排队中，不用等实时流的下一次轮询。
+        patchConv(key, (conv) => conv.batchTask && !conv.batchTask.queued?.some((q) => q.id === task_id)
+          ? { ...conv, batchTask: { ...conv.batchTask, queued: [...(conv.batchTask.queued ?? []), { id: task_id, prompt: text, created_at: new Date().toISOString() }] } }
+          : conv);
+        // 大任务结束时旧版中枢会关流：重新连上，接着看这一条。
+        const entry = streams.get(key);
+        if (entry && entry.refs > 0 && !entry.stop && !entry.timer) { entry.attempt = 0; connect(key); }
+        void refreshJob(ref.jobId, true);
+        return key;
+      }
       const result = await retryOnce(() => client.sendMessage(ref.jobId, text, { businessId, ...(ref.taskId ? { taskId: ref.taskId } : {}) }));
       const jobTarget = result.job_id || ref.jobId;
       // 指定了对话的：接续后跟到新对话任务里对应的那个对话；只有 job_id 的照旧只换 job。

package/src/core/types.ts

@@ -223,12 +223,13 @@ 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 } }
-  /** 正在看的这个对话的状态变化（关闭了：closed=true）。 */
-  | { type: "task"; task: StreamTask };
+  | { 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 }
@@ -240,6 +241,43 @@ export interface StreamSnapshot {
   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）：指定 ?task= 看它时，它和续派接着它聊的子任务算一个对话——
+   * 这条是其中最新的；conversation_remote_task_id 是它们共用的节点对话，queued 是还没派发的消息。旧版中枢没有。
+   */
+  conversation?: boolean;
+  conversation_remote_task_id?: string | null;
+  queued?: Array<{ id: string; prompt: string; created_at?: 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;

package/src/elements.tsx

@@ -11,7 +11,9 @@
  *   <cli-file-preview job-id="job_x" path="outputs/报告.md"></cli-file-preview>   （单独的文件预览 + 下载）
  *   <cli-browser job-id="job_x"></cli-browser>                                  （单独的浏览器实时画面）
  *
- * 同一个 group 的元素共享一个仓库：列表点哪个，对话就显示哪个；不写 group 各自独立。
+ * 同一个 group 的元素共享一个仓库，切换时一起变：列表点哪个，对话和看板就显示哪个；不写 group 各自独立。
+ * 要一起切换，group 里的元素就不要写 job-id（写了的只看自己那个）；从外面打开某个对话，给任意一个元素写
+ * selected-id="job_x" 或 "job_x#task_y"（改它就一起切过去），选中变化在 cli-event 的 select 事件里。
  * 属性：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）、
@@ -45,7 +47,7 @@ function storeFor(el: HTMLElement): CliStore | undefined {
   return store;
 }
 
-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"];
+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"];
 
 function jsonAttr(el: HTMLElement, name: string): object | undefined {
   const raw = el.getAttribute(name);
@@ -92,8 +94,15 @@ abstract class CliElement extends HTMLElement {
   }
   attributeChangedCallback() { if (this.root) this.render(); }
 
+  private appliedSelection: string | null = null;
   protected common() {
     const store = storeFor(this) ?? (this.ownStore ??= createCliStore(storeOptions(this)));
+    // selected-id：这一组一起看哪个对话。属性变了才切（列表点击换了选中，不会被属性拉回去）。
+    const selection = this.getAttribute("selected-id");
+    if (selection !== null && selection !== this.appliedSelection) {
+      this.appliedSelection = selection;
+      store.select(selection || null);
+    }
     return {
       store,
       title: this.getAttribute("title") ?? undefined,

package/src/msglist/CliMsgList.tsx

@@ -53,6 +53,7 @@ export function CliMsgList(props: CliMsgListProps) {
 }
 
 const SEARCH_MIN = 6;
+const BATCH_ACTIVE = new Set(["dispatching", "running", "verifying"]);
 
 interface CardView {
   id: string;
@@ -63,10 +64,15 @@ interface CardView {
   running: boolean;
   awaiting: boolean;
   group: "needs" | "active" | "done" | "cancelled";
+  /** 带状态的活动（打开 card.status 时显示）。 */
   activity: string;
+  /** 只有时间（缺省显示这个）。 */
+  when: string;
   agent: string | null;
   turns: number;
   updatedAt: number;
+  /** 一次性任务（含续派，宿主把它的 job_id 放进了列表）：只能查看，不能在里面新开对话。 */
+  batch: boolean;
   loading: boolean;
   error: string | null;
 }
@@ -75,7 +81,8 @@ export function cardView(id: string, entry: JobEntry | undefined): CardView {
   const job = entry?.job;
   const conv = job?.conversation;
   const updatedAt = toMs(conv?.last_activity_at) ?? 0;
-  const base = { id, title: job?.title ?? id, desc: entry?.firstInput ?? "", agent: job?.tasks?.[0]?.agent ?? conv?.last_turn?.agent ?? null, turns: conv?.turns ?? 0, updatedAt, loading: !job && !entry?.error, error: entry?.error ?? null };
+  const batch = !!job && job.mode !== "conversation";
+  const base = { id, title: job?.title ?? id, desc: entry?.firstInput ?? "", when: updatedAt ? relTime(updatedAt) : "", agent: job?.tasks?.[0]?.agent ?? conv?.last_turn?.agent ?? null, turns: conv?.turns ?? 0, updatedAt, batch, loading: !job && !entry?.error, error: entry?.error ?? null };
   const status = job?.status ?? "queued";
   if (TERMINAL_JOB.has(status)) {
     const cancelled = status === "cancelled";
@@ -83,6 +90,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 };
   }
+  // 一次性任务：有子任务在节点上跑就是运行中，没有轮次、不会停在提问上。
+  if (batch) {
+    const running = (job?.tasks ?? []).some((task) => BATCH_ACTIVE.has(task.status));
+    return { ...base, cls: "a", label: "进行中", running, awaiting: false, group: "active", activity: running ? "运行中 · 工作中" : status === "queued" ? "等待执行节点" : "进行中" };
+  }
   // 开了几个对话：任何一个在跑就算在跑，任何一个停在提问上就要你处理（关掉的对话不算）。
   const open = (conv?.conversations ?? []).filter((c) => !c.closed);
   const many = (conv?.conversations?.length ?? 0) > 1;
@@ -125,7 +137,8 @@ export function convRows(jobId: string, entry: JobEntry | undefined): ConvRowVie
 
 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);
+  const activity = show.status ? v.activity : v.when;
+  const foot = (show.activity && !!activity) || (show.turns && v.turns > 0);
   const card = (
     <button className={`task ${selected ? "sel" : ""} ${v.awaiting && show.status ? "awaiting" : ""}`} onClick={onSelect} title={v.error ?? undefined}>
       <div className="task-top">
@@ -137,7 +150,7 @@ function MsgCard({ v, selected, onSelect, show, onNewInJob }: { v: CardView; sel
       {show.description && v.desc && <div className="tdesc">{v.desc}</div>}
       {v.error && <div className="blocked-chip">{Icon.x()} {v.error}</div>}
       {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>}
+        {show.activity && activity && <span className="activity">{show.status && (v.awaiting ? <span style={{ color: "var(--blue)" }}>●</span> : v.running ? <span style={{ color: "var(--amber)" }}>●</span> : null)}{activity}</span>}
         <span className="spacer" />
         {show.turns && v.turns > 0 && <span className="activity">{v.turns} 条消息</span>}
       </div>}
@@ -158,7 +171,7 @@ function ConvRow({ v, selected, onSelect, show }: { v: ConvRowView; selected: bo
     <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.activity && show.status && <span className="cli-conv-act">{v.activity}</span>}
       {show.turns && v.turns > 0 && <span className="cli-conv-act">{v.turns} 条</span>}
     </button>
   );
@@ -178,9 +191,11 @@ 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;
+  /** 不分组：只有卡片，没有组标题。 */
+  plain?: boolean;
 };
 
-function Group({ label, cards, selected, onSelect, show, rows, firstTask, onNewInJob, accent, collapsible, collapsed, onToggle }: GroupProps) {
+function Group({ label, cards, selected, onSelect, show, rows, firstTask, onNewInJob, accent, collapsible, collapsed, onToggle, plain }: GroupProps) {
   if (!cards.length || label === false) return null;
   const sel = selected ? parseConvKey(selected) : null;
   const list = cards.map((v) => {
@@ -194,7 +209,7 @@ function Group({ label, cards, selected, onSelect, show, rows, firstTask, onNewI
         // 只有一个对话：整张卡片就是它；有几个对话：卡片是标题，选中落在下面的行上。
         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}
+        onNewInJob={onNewInJob && !v.batch && v.group !== "done" && v.group !== "cancelled" ? () => onNewInJob(v.id) : undefined}
       />
     );
     if (!convs.length && !newing) return card;
@@ -208,6 +223,7 @@ function Group({ label, cards, selected, onSelect, show, rows, firstTask, onNewI
       </div>
     );
   });
+  if (plain) return <>{list}</>;
   if (collapsible) {
     return (
       <>
@@ -328,10 +344,13 @@ 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>}
+                {!cfg.grouped && <Group label="" cards={[...shown].sort(byRecent)} {...groupProps} plain />}
+                {cfg.grouped && <>
                 <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>