@spzxg/cli-ui 0.6.11 → 0.6.12

package/src/ui/SubagentChat.tsx

@@ -0,0 +1,197 @@
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import type { Msg } from "../core/types";
+import { childMessages, subagentFields, type LoadSubagent, type SubagentInfo, type SubagentTranscript } from "../core/subagents";
+import { Icon } from "./icons";
+
+const STATUS = { running: "运行中", completed: "已完成", failed: "失败", cancelled: "已取消", unknown: "状态未知" };
+type Selection = { scope: string; generation: number; info: SubagentInfo };
+const SubagentContext = createContext<((info: SubagentInfo, generation: number) => void) | null>(null);
+
+export function SubagentHistoryBoundary({ children }: { children: ReactNode }) { return <SubagentContext.Provider value={null}>{children}</SubagentContext.Provider>; }
+
+export function SubagentEntry({ info, generation }: { info: SubagentInfo; generation: number }) {
+  const open = useContext(SubagentContext);
+  return <div className="msg msg-tool">
+    <button type="button" className="subagent-entry" disabled={!open} onClick={() => open?.(info, generation)} aria-label={`查看子代理：${info.title}`}>
+      <span className="subagent-entry-icon">{Icon.spark()}</span>
+      <span className="subagent-entry-name">{info.title}</span>
+      <span className={`subagent-status ${info.status}`}>{STATUS[info.status] ?? STATUS.unknown}</span>
+      {Icon.chevRight()}
+    </button>
+  </div>;
+}
+
+/** One shared viewer for embedded Chat and the native Operator chat. It never controls execution. */
+export function SubagentChatScope({ scopeKey, messages, load, renderMessage, children }: {
+  scopeKey: string; messages: Msg[]; load?: LoadSubagent;
+  renderMessage: (message: Msg, agentName: string) => ReactNode; children: ReactNode;
+}) {
+  const [selection, setSelection] = useState<Selection | null>(null);
+  const selected = selection?.scope === scopeKey ? selection : null;
+  const open = useCallback((info: SubagentInfo, generation: number) => setSelection({ scope: scopeKey, generation, info }), [scopeKey]);
+  const close = useCallback(() => setSelection(null), []);
+  const root = useRef<HTMLDivElement>(null);
+  const [narrow, setNarrow] = useState(true);
+  useLayoutEffect(() => {
+    const element = root.current;
+    if (!element) return;
+    const measure = () => { const width = element.getBoundingClientRect().width; if (width > 0) setNarrow(width < 900); };
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer?.observe(element);
+    return () => observer?.disconnect();
+  }, []);
+  return <SubagentContext.Provider value={open}>
+    <div ref={root} className={`subagent-chat-scope${selected ? " has-subagent" : ""}${narrow ? " narrow" : ""}`}>
+      <div className="subagent-chat-main" inert={!!selected && narrow || undefined}>{children}</div>
+      {selected && <SubagentPanel key={`${scopeKey}:${selected.generation}:${selected.info.id}`} selection={selected} messages={messages} load={load} renderMessage={renderMessage} onClose={close} modal={narrow} />}
+    </div>
+  </SubagentContext.Provider>;
+}
+
+function SubagentPanel({ selection, messages, load, renderMessage, onClose, modal }: {
+  selection: Selection; messages: Msg[]; load?: LoadSubagent;
+  renderMessage: (message: Msg, agentName: string) => ReactNode; onClose: () => void; modal: boolean;
+}) {
+  const [snapshot, setSnapshot] = useState<(SubagentTranscript & { before?: string }) | null>(null);
+  const [loadingOlder, setLoadingOlder] = useState(false);
+  const [loading, setLoading] = useState(!!load);
+  const [error, setError] = useState<string | null>(null);
+  const [attempt, setAttempt] = useState(0);
+  const panel = useRef<HTMLElement>(null);
+  const closeButton = useRef<HTMLButtonElement>(null);
+  const scroll = useRef<HTMLDivElement>(null);
+  const follow = useRef(true);
+  const [following, setFollowing] = useState(true);
+  const [shownCount, setShownCount] = useState(120);
+  const { id } = selection.info;
+
+  useEffect(() => {
+    let disposed = false;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    if (!load) { setLoading(false); return; }
+    setLoading(true); setError(null);
+    const refresh = async (initial = false) => {
+      if (disposed) return;
+      if (!initial && document.visibilityState === "hidden") { timer = setTimeout(() => void refresh(), 5000); return; }
+      try {
+        const value = await load(id, selection.generation);
+        if (value.subagent?.id !== id || !Array.isArray(value.messages)) throw new Error("子代理记录与当前选择不匹配");
+        if (disposed) return;
+        setSnapshot(previous => {
+          const overlap = previous?.messages.some(old => value.messages.some(row => row.id === old.id));
+          const byId = new Map((previous?.messages ?? []).map(row => [row.id, row]));
+          for (const row of value.messages) byId.set(row.id, row);
+          return { ...value, messages: [...byId.values()],
+            older: overlap ? previous?.older ?? value.older : value.older,
+            before: overlap ? previous?.before : value.messages[0]?.id };
+        }); setError(null);
+        if (value.refreshable && ["running", "unknown"].includes(value.subagent.status)) timer = setTimeout(() => void refresh(), 5000);
+      } catch (cause) {
+        if (!disposed) setError(cause instanceof Error ? cause.message : String(cause));
+      } finally { if (!disposed) setLoading(false); }
+    };
+    void refresh(true);
+    return () => { disposed = true; if (timer) clearTimeout(timer); };
+  }, [load, id, selection.generation, attempt]);
+
+  const info = useMemo(() => {
+    let latest = snapshot?.subagent ?? selection.info;
+    for (const message of messages) {
+      if (message.generation !== selection.generation) continue;
+      const candidate = subagentFields(message).subagent;
+      if (candidate?.id === id && (candidate.updatedAt ?? 0) >= (latest.updatedAt ?? 0)) latest = candidate;
+    }
+    return latest;
+  }, [messages, snapshot, selection, id]);
+  const rows = useMemo(() => {
+    const merged = new Map((snapshot?.messages ?? []).map(row => [row.id, row]));
+    for (const row of childMessages(messages, id, selection.generation)) {
+      const previous = merged.get(row.id);
+      const updated = (value: typeof row) => {
+        const fields = subagentFields(value);
+        return fields.subagentMessage?.updatedAt ?? fields.subagent?.updatedAt ?? 0;
+      };
+      if (!previous || updated(row) >= updated(previous)) merged.set(row.id, row);
+    }
+    return childMessages([...merged.values()], id, selection.generation).sort((a, b) => (a.ts ?? a.created_at ?? 0) - (b.ts ?? b.created_at ?? 0)).map(row => {
+      const child = subagentFields(row).subagentMessage;
+      return { id: row.id, generation: row.generation, ts: row.ts ?? row.created_at,
+        role: child?.role ?? "tool", content: child?.tool ? JSON.stringify(child.tool) : child?.content ?? row.content } as Msg;
+    });
+  }, [snapshot, messages, id, selection.generation]);
+  const shown = rows.slice(-shownCount);
+  const promptAlreadyShown = rows.some(row => row.role === "user" && row.content === info.task);
+  const loadOlder = async () => {
+    if (rows.length > shownCount) { setShownCount(value => value + 120); return; }
+    if (!load || !snapshot?.before || loadingOlder) return;
+    const before = snapshot.before;
+    setLoadingOlder(true); setError(null);
+    try {
+      const value = await load(id, selection.generation, before);
+      if (value.subagent?.id !== id || !Array.isArray(value.messages)) throw new Error("子代理记录与当前选择不匹配");
+      setSnapshot(previous => {
+        const byId = new Map(value.messages.map(row => [row.id, row]));
+        for (const row of previous?.messages ?? []) byId.set(row.id, row);
+        return { ...(previous ?? value), messages: [...byId.values()],
+          ...(previous?.before === before ? { older: value.older, before: value.messages[0]?.id ?? before } : {}) };
+      });
+      setShownCount(count => count + 200);
+    } catch (cause) { setError(cause instanceof Error ? cause.message : String(cause)); }
+    finally { setLoadingOlder(false); }
+  };
+
+  useEffect(() => {
+    const previous = document.activeElement as HTMLElement | null;
+    closeButton.current?.focus({ preventScroll: true });
+    return () => {
+      if ((document.activeElement === document.body || panel.current?.contains(document.activeElement)) && previous?.isConnected && !previous.closest("[inert],[hidden]")) previous.focus({ preventScroll: true });
+    };
+  }, []);
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      const other = (document.activeElement as HTMLElement | null)?.closest('[role="dialog"]');
+      if (other && other !== panel.current) return;
+      if (event.key === "Escape") { event.preventDefault(); onClose(); return; }
+      if (!modal || event.key !== "Tab" || !panel.current) return;
+      const items = [...panel.current.querySelectorAll<HTMLElement>('button:not(:disabled),a[href],input:not(:disabled),textarea:not(:disabled),[tabindex="0"]')]
+        .filter(item => !item.closest("[hidden],[inert]") && getComputedStyle(item).display !== "none");
+      const first = items[0], last = items.at(-1);
+      if (!first || !last) return;
+      if (!panel.current.contains(document.activeElement) || (event.shiftKey && document.activeElement === first)) { event.preventDefault(); (event.shiftKey ? last : first).focus(); }
+      else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [modal, onClose]);
+  useLayoutEffect(() => { if (follow.current && scroll.current) scroll.current.scrollTop = scroll.current.scrollHeight; }, [rows, loading]);
+
+  return <>
+    {modal && <button className="subagent-chat-scrim" type="button" tabIndex={-1} aria-label="收起子代理详情" onClick={onClose} />}
+    <aside ref={panel} className="subagent-chat-panel" role="dialog" aria-modal={modal || undefined} aria-label={`子代理：${info.title}`}>
+      <div className="subagent-chat-header">
+        <div><span className="subagent-chat-caption">子代理</span><strong>{info.title}</strong></div>
+        <span className={`subagent-status ${info.status}`}>{STATUS[info.status] ?? STATUS.unknown}</span>
+        <button ref={closeButton} type="button" className="icon-btn" title="关闭子代理详情" aria-label="关闭子代理详情" onClick={onClose}>{Icon.x()}</button>
+      </div>
+      <div ref={scroll} className="subagent-chat-transcript transcript" onScroll={() => {
+        const element = scroll.current;
+        follow.current = !!element && element.scrollHeight - element.scrollTop - element.clientHeight < 60;
+        setFollowing(follow.current);
+      }}>
+        <div className="tw">
+          {loading && <div className="subagent-chat-note" role="status">正在读取子代理记录…</div>}
+          {error && <div className="subagent-chat-note error" role="alert">读取历史失败：{error} <button className="btn btn-ghost btn-sm" onClick={() => setAttempt(value => value + 1)}>重试</button></div>}
+          {!load && <div className="subagent-chat-note">当前接入未提供子代理历史接口，以下为已加载的记录。</div>}
+          {info.detailAvailability !== "full" && <div className="subagent-chat-note">{info.detailReason || (info.detailAvailability === "unavailable" ? "此智能体暂未提供子代理运行过程。" : "此智能体仅提供了部分运行记录。")}</div>}
+          {info.task && !promptAlreadyShown && renderMessage({ id: `prompt:${id}`, role: "user", content: info.task, generation: selection.generation }, info.title)}
+          {(rows.length > shownCount || (snapshot?.older ?? 0) > 0) && <div className="load-older"><button type="button" className="btn btn-ghost btn-sm" disabled={loadingOlder} onClick={() => { follow.current = false; setFollowing(false); void loadOlder(); }}>{loadingOlder ? "正在读取更早的记录…" : "加载更早的子代理记录"}</button></div>}
+          {shown.map(row => <div key={row.id}>{renderMessage(row, info.title)}</div>)}
+          {!loading && !error && !rows.length && <div className="subagent-chat-note">尚无可展示的运行记录。</div>}
+        </div>
+      </div>
+      {!following && <button type="button" className="btn btn-ghost btn-sm subagent-chat-latest" onClick={() => { follow.current = true; setFollowing(true); if (scroll.current) scroll.current.scrollTop = scroll.current.scrollHeight; }}>跳到最新</button>}
+    </aside>
+  </>;
+}

package/src/ui/Transcript.tsx

@@ -1,5 +1,7 @@
 // 转录里的一行。移植自 operator-oss/app/orchestrator/Transcript.tsx，类名、结构、文案保持一致；
 // 去掉了对话任务用不到的部分（/clear、重新登录、浏览器交还……这些动作 center 不提供）。
+import { subagentFields } from "../core/subagents";
+import { SubagentEntry } from "./SubagentChat";
 import { memo, useContext, useId, useState } from "react";
 import { FileOpenContext, FileLinkContext } from "./fileLinks";
 import type { AskAnswers, AskQuestion, InputRequest, Msg, ToolData, ToolPeek } from "../core/types";
@@ -370,6 +372,9 @@ export const MessageView = memo(function MessageView({ m, initial: isInitial, hi
   }
   if (m.role === "tool") {
     const data = toolDataOf(m);
+    const child = subagentFields(m);
+    if (child.subagentMessage) return null;
+    if (child.subagent) return <SubagentEntry info={child.subagent} generation={m.generation} />;
     if (data.input) return <div className="msg msg-tool"><InputView input={data.input} agentLabel={agentLabel} onSubmit={handlers.onInput} onBrowser={handlers.onShowBrowser} /></div>;
     if (data.ask) return <div className="msg msg-tool"><AskView data={data} agentLabel={agentLabel} onAnswer={handlers.onAnswer ? (answers) => handlers.onAnswer!(data.ask?.id || m.toolId || "", data.ask?.questions ?? [], answers) : undefined} /></div>;
     return <div className="msg msg-tool"><ToolView data={data} /></div>;