@spzxg/cli-ui 0.6.11 → 0.6.13

package/src/operator/node/Chat.tsx

@@ -1,4 +1,7 @@
 "use client";
+import { SubagentChatScope, SubagentHistoryBoundary } from "../../ui/SubagentChat";
+import { parentMessages, type SubagentTranscript } from "../../core/subagents";
+import { jget } from "./api";
 import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { AskQuestion, AskAnswers } from "./protocol/types";
 import { Icon } from "./icons";
@@ -79,6 +82,9 @@ export type ChatProps = {
 export function Chat(props: ChatProps) { return <ChatSession key={props.task.id} {...props} />; }
 function ChatSession({ project, task, tasks, agents, messages, running, transcriptLoading, older=0, onLoadOlder,
   controls, configBusy, composer, active=true, onSelectTask, onFork, onSend, onStop, onClear, onReconnect, onAnswer, onCancelQueued }: ChatProps) {
+  const parent = useMemo(() => parentMessages(messages), [messages]);
+  const loadSubagent = useCallback((id: string, generation: number, before?: string) => jget<SubagentTranscript>(`/api/tasks/${encodeURIComponent(task.id)}/subagents/${encodeURIComponent(id)}?generation=${generation}&limit=200${before ? `&before=${encodeURIComponent(before)}` : ""}`), [task.id]);
+  const renderSubagentMessage = useCallback((message: Msg, name: string) => <MessageView m={message} initial={false} hideWho={false} agent={task.agent} agentLabel={name} userLabel="收到的任务" speakerLabel={name} readOnly />, [task.agent]);
   const scrollRef = useRef<HTMLDivElement>(null);
   useChatScrollbar(scrollRef, task.id);
   const [quoteRequest, setQuoteRequest] = useState<Quote|null>(null);
@@ -182,7 +188,7 @@ function ChatSession({ project, task, tasks, agents, messages, running, transcri
   // reveals RENDER_STEP more above at a time (paging older messages in from the
   // server once the loaded ones run out) and drops rows far below; scrolling down
   // brings those back. "Jump to latest" returns to following.
-  const items = useMemo(() => buildTranscriptItems(messages, older > 0), [messages, older]);
+  const items = useMemo(() => buildTranscriptItems(parent, older > 0), [parent, older]);
   // First / last rendered row by key; null = derived (newest rows).
   const [win, setWin] = useState<{ start: string | null; end: string | null }>({ start: null, end: null });
   const { startIdx, endIdx } = useMemo(() => {
@@ -443,11 +449,11 @@ function ChatSession({ project, task, tasks, agents, messages, running, transcri
   useEffect(()=>{if(!task.parent_task_id && active) scrollToBottom("auto");},[active,task.id]);
   const queued = <QueuedMessages scopeKey={task.id} messages={messages.filter(message => message.role === "queued")} onCancel={message => stableCancelQueued(message.id)} attachmentUrl={attachment => `/api/tasks/${encodeURIComponent(attachment.taskId)}/uploads/${encodeURIComponent(attachment.name)}`} renderMessage={message => <MessageView m={message} initial={false} hideWho readOnly />} />;
   return (<FileLinkContext.Provider value={fileScope}>
-    <>
+    <SubagentChatScope scopeKey={task.id} messages={messages} load={loadSubagent} renderMessage={renderSubagentMessage}>
       <div className="transcript-wrap">
       <div className="transcript" ref={scrollRef} onScroll={onScroll}>
         <div className="tw">
-          <BranchHistory entries={flow.entries} tasks={tasks} agents={agents} onSelect={onSelectTask} onRetry={flow.retry} onQuote={(m,source,selected)=>quote(m,source,selected)} />
+          <SubagentHistoryBoundary><BranchHistory entries={flow.entries} tasks={tasks} agents={agents} onSelect={onSelectTask} onRetry={flow.retry} onQuote={(m,source,selected)=>quote(m,source,selected)} /></SubagentHistoryBoundary>
           {task.parent_task_id && <div className="flow-task-heading current"><span>沿此分支继续</span><strong>{task.title}</strong></div>}
           {transcriptLoading && messages.length === 0 && (
             // Snapshot hasn't streamed in yet — sketch a user turn and an agent
@@ -513,7 +519,7 @@ function ChatSession({ project, task, tasks, agents, messages, running, transcri
       </div>
       {composer?.show !== false ? <Composer tasks={tasks} onFork={onFork} task={task} agentLabel={agentLabel(agents, task.agent)} disabled={task.started!==1} configBusy={configBusy} running={running} onSend={async text => { const sent = await onSend(text); if (sent && !running) scrollToBottom("auto"); return sent; }} onStop={onStop} onClear={onClear} quoteRequest={quoteRequest} onQuoteHandled={()=>setQuoteRequest(null)} controls={controls}
         fileUpload={composer?.fileUpload} queued={queued} /> : queued}
-    </></FileLinkContext.Provider>
+    </SubagentChatScope></FileLinkContext.Provider>
   );
 
 }

package/src/operator/node/Layout.tsx

@@ -88,7 +88,9 @@ export function ColResize({ min, max, onWidth, onReset, side = "left" }: { min:
     const move = (e: MouseEvent) => {
       if (!dragging.current) return;
       if (side === "right") {
-        const col = ref.current?.nextElementSibling as HTMLElement | null;
+        // WorkspaceDrawer keeps display:contents wrappers on desktop; measure the visible rail.
+        const next = ref.current?.nextElementSibling as HTMLElement | null;
+        const col = next?.querySelector<HTMLElement>(".sess-rail") ?? next;
         if (!col) return;
         const right = col.getBoundingClientRect().right;
         onWidthRef.current(Math.max(min, Math.min(max, Math.round(right - e.clientX))));

package/src/operator/node/SessionRail.tsx

@@ -122,7 +122,7 @@ function ContextPane({ task, sessions, running, onClear }: { task: TaskRow; sess
   );
 }
 
-export function SessionRail({ project, task, sessions, running, onResolveWithAI, onMerged, onPrCreated, onClear, onCollapse, onSwitchToChat,
+export function SessionRail({ project, task, sessions, running, onResolveWithAI, onMerged, onPrCreated, onClear, onSwitchToChat,
   tabs, availableTabs, defaultTab, autoContext, watchFiles = true, fileWatchIntervalMs, onFilesChange, onFilesWatch, onBoardContextChange, onEvent, openRequest, onRequestHandled, onQuote, inlineLayout, onExpand, visible = true }: OperatorBoardOptions & {
   project: ProjectRow; task: TaskRow; sessions: Session[]; running: boolean;
   onResolveWithAI: (taskId: string) => Promise<ResolveResult>; onMerged?: () => void;
@@ -268,7 +268,7 @@ export function SessionRail({ project, task, sessions, running, onResolveWithAI,
       </div>
       <PanelControls toolbarRef={setToolbarHost} available={available} open={panels.open} label={label} onShow={id=>{panels.show(id);setTab(id);inlineLayout?.onActivate();}} onClose={close}
         upload={available.includes('files')?{onChoose:upload.choose,disabled:upload.busy||!uploader,hint:canUpload?undefined:'启动会话并创建工作区后可上传文件'}:undefined}/>
-      {inlineLayout ? onExpand&&<button className="rail-collapse" onClick={onExpand} title="展开右侧看板" aria-label="展开看板">{Icon.chevRight()}</button> : <button className="rail-collapse" onClick={onCollapse} title="隐藏面板" aria-label="隐藏看板">{Icon.chevRight()}</button>}
+      {inlineLayout && onExpand && <button className="rail-collapse" onClick={onExpand} title="展开右侧看板" aria-label="展开看板">{Icon.chevRight()}</button>}
     </div>;
   return <aside className={`sess-rail${inlineLayout?' sess-rail-inline':''}`} aria-label="任务看板" hidden={!contentVisible} style={!contentVisible?{display:'none'}:undefined} onPointerDown={()=>activateBoardState(task.id,owner)} onClickCapture={()=>activateBoardState(task.id,owner)} onFocusCapture={()=>activateBoardState(task.id,owner)}>
     {inlineLayout ? inlineLayout.tabsHost&&createPortal(railTabs,inlineLayout.tabsHost) : railTabs}

package/src/operator/node/Transcript.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { subagentFields } from "../../core/subagents";
+import { SubagentEntry } from "../../ui/SubagentChat";
 import { useContext } from "react";
 import { OperatorBoardContext } from "./boardInteraction";
 import { FileLinkContext } from "./fileLinks";
@@ -322,7 +324,7 @@ function QuotedUserText({ text }: { text: string }) {
   return quoted ? <><ReferenceCard title={quoted.quote.author} text={quoted.quote.text} renderContent={value => <Markdown>{value}</Markdown>} />{quoted.text && <Markdown>{quoted.text}</Markdown>}</> : <Markdown>{text}</Markdown>;
 }
 
-export const MessageView = memo(function MessageView({ m, initial, hideWho, running, agent, agentLabel = "智能体", onAnswer, onInput, onBrowser, onCancelQueued, onClear, onReconnect, onRetry, onQuote, readOnly }: { readOnly?: boolean; onQuote?: (m: Msg, selected?: string) => void; m: Msg; initial: boolean; hideWho: boolean; running?: boolean; agent?: string | null; agentLabel?: string; onAnswer?: (askId: string, questions: AskQuestion[], answers: AskAnswers) => void; onInput?: (inputId: string, values: string[]) => Promise<string | null>; onBrowser?: (action: "handback") => Promise<string | null>; onCancelQueued?: (pendingId: string) => void; onClear?: () => void; onReconnect?: () => void; onRetry?: (msgId: string) => void }) {
+export const MessageView = memo(function MessageView({ m, initial, hideWho, running, agent, agentLabel = "智能体", userLabel = "你", speakerLabel = "智能体", onAnswer, onInput, onBrowser, onCancelQueued, onClear, onReconnect, onRetry, onQuote, readOnly }: { readOnly?: boolean; userLabel?: string; speakerLabel?: string; onQuote?: (m: Msg, selected?: string) => void; m: Msg; initial: boolean; hideWho: boolean; running?: boolean; agent?: string | null; agentLabel?: string; onAnswer?: (askId: string, questions: AskQuestion[], answers: AskAnswers) => void; onInput?: (inputId: string, values: string[]) => Promise<string | null>; onBrowser?: (action: "handback") => Promise<string | null>; onCancelQueued?: (pendingId: string) => void; onClear?: () => void; onReconnect?: () => void; onRetry?: (msgId: string) => void }) {
   const openBoard=useContext(OperatorBoardContext);
   const fileScope=useContext(FileLinkContext);
   const onShowBrowser=()=>{if(fileScope&&openBoard)openBoard({kind:'browser',taskId:fileScope.taskId});else showTaskBrowser(fileScope?.taskId);};
@@ -345,6 +347,9 @@ export const MessageView = memo(function MessageView({ m, initial, hideWho, runn
   }
   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" inert={readOnly||undefined}><InputView input={data.input} agentLabel={agentLabel} onSubmit={onInput} onShowBrowser={onShowBrowser} /></div>;
     }
@@ -445,7 +450,7 @@ export const MessageView = memo(function MessageView({ m, initial, hideWho, runn
       {!hideWho && (
         <div className="who">
           <Avatar who={isUser ? "user" : "cc"} agent={agent} />
-          {isUser ? "你" : "智能体"}
+          {isUser ? userLabel : speakerLabel}
           {initial && <span className="badge">初始提示</span>}
           {m.ts != null && <span className="msg-time">{clockTime(m.ts)}</span>}
         </div>

package/src/operator/node/modals.tsx

@@ -200,6 +200,9 @@ export function NewTaskModal({ project, agents, tasks, onClose, onCreate, onOpen
   const [sendContext, setSendContext] = useState(project.send_context !== 0);
   const [deps, setDeps] = useState<string[]>([]);
   const [autoStart, setAutoStart] = useState(false);
+  const submitting = useRef(false);
+  const [creating, setCreating] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
   // The task's real browser (docs/BROWSER.md): offered only while the feature is on.
   const showBrowser = clientFeatures().browser;
   const [browser, setBrowser] = useState(false);
@@ -219,7 +222,14 @@ export function NewTaskModal({ project, agents, tasks, onClose, onCreate, onOpen
   // launch otherwise, so offering "start now" here would just produce a 400).
   const agentReady = selAgent ? !agentStateHint(selAgent) : true;
   const canStart = !blocked && agentReady;
-  const create = () => can && onCreate({ title: title.trim(), desc: desc.trim(), priority, agent, startNow: startNow && canStart, sendContext, depends_on: deps, auto_start: autoStart && deps.length > 0, browser: showBrowser && browser });
+  const create = async () => {
+    if (!can || submitting.current) return;
+    submitting.current = true; setCreating(true); setCreateError(null);
+    try {
+      await onCreate({ title: title.trim(), desc: desc.trim(), priority, agent, startNow: startNow && canStart, sendContext, depends_on: deps, auto_start: autoStart && deps.length > 0, browser: showBrowser && browser });
+    } catch (error) { setCreateError(error instanceof Error ? error.message : String(error)); }
+    finally { submitting.current = false; setCreating(false); }
+  };
   return (
     <Modal title="新建任务" sub={`${project.name} · 标题与描述构成 ${agentLabel(agents, agent)} 的任务上下文`} onClose={onClose}
       footer={<>
@@ -227,9 +237,10 @@ export function NewTaskModal({ project, agents, tasks, onClose, onCreate, onOpen
           title={blocked ? "暂时无法开始 —— 该任务被尚未完成的任务阻塞" : !agentReady ? `${selAgent?.label} ${agentStateHint(selAgent) === "未安装" ? "的命令行工具未安装在服务器上" : "尚未连接"}，无法启动会话` : undefined}>
           <input type="checkbox" checked={startNow && canStart} disabled={!canStart} onChange={(e) => setStartNow(e.target.checked)} /> 立即开始会话
         </label>
+        {createError && <span className="hlp" role="alert" style={{ color: "var(--red)", margin: 0 }}>创建未完成：{createError}</span>}
         <span className="spacer" />
         <button className="btn btn-ghost" onClick={onClose}>取消</button>
-        <button className="btn btn-accent" disabled={!can} onClick={create}>{Icon.plus()} 创建任务</button>
+        <button className="btn btn-accent" disabled={!can || creating} onClick={create}>{Icon.plus()} {creating ? "创建任务中…" : "创建任务"}</button>
       </>}>
       <div className="field">
         <div className="lab">标题</div>

package/src/operator/node/protocol/types.ts

@@ -1,3 +1,4 @@
+import type { SubagentInfo, SubagentMessage } from "../../../core/subagents";
 interface AgentProfile { base_url: string; token: string; model: string; wire_api?: string | null; api?: string | null; reasoning?: string | null }
 
 export type Priority = "hi" | "med" | "lo";
@@ -236,8 +237,8 @@ export type StreamEvent =
   | { type: "session"; sessionId: string }
   | { type: "model"; model: string }
   | { type: "assistant"; content: string }
-  | { type: "tool"; id: string; title: string; detail: string; peek?: ToolPeek; diff?: DiffLine[] }
-  | { type: "tool_result"; id: string; content: string; isError: boolean; peek?: ToolPeek }
+  | { type: "tool"; id: string; title: string; detail: string; peek?: ToolPeek; diff?: DiffLine[]; subagent?: SubagentInfo; subagentMessage?: SubagentMessage }
+  | { type: "tool_result"; id: string; content: string; isError: boolean; peek?: ToolPeek; subagent?: SubagentInfo; subagentMessage?: SubagentMessage }
   | { type: "ask"; id: string; questions: AskQuestion[] }
   | { type: "ask_answered"; id: string; answers: AskAnswers; awaiting_input?: 0 | 1 }
   // An input card was raised or settled (the whole card each time; upsert by msgId).
@@ -311,6 +312,8 @@ export type GlobalEvent = GlobalTaskEvent | AgentAuthEvent;
 
 // How a tool call is stored (JSON) in a "tool" message's content.
 export interface ToolData {
+  subagent?: SubagentInfo;
+  subagentMessage?: SubagentMessage;
   title: string;
   detail?: string;
   result?: string;

package/src/operator/node/useTaskStream.ts

@@ -119,8 +119,8 @@ export function useTaskStream({ selTask, selProjRef, agentsRef, setTaskRunning,
     else if (ev.type === "model") setTasks((prev) => prev.map((x) => (x.id === taskId ? { ...x, resolved_model: ev.model } : x)));
     else if (ev.type === "assistant") upsertMsg(taskId, { id: ev.msgId ?? `a-${Date.now()}-${Math.random()}`, role: "assistant", content: ev.content, generation: gen, ts: ev.ts });
     else if (ev.type === "tool") {
-      const data: ToolData = { title: ev.title, detail: ev.detail, peek: ev.peek, diff: ev.diff };
-      upsertMsg(taskId, { id: ev.msgId ?? `t-${Date.now()}-${Math.random()}`, role: "tool", content: JSON.stringify(data), generation: gen, toolId: ev.id });
+      const data: ToolData = { title: ev.title, detail: ev.detail, peek: ev.peek, diff: ev.diff, subagent: ev.subagent, subagentMessage: ev.subagentMessage };
+      upsertMsg(taskId, { id: ev.msgId ?? `t-${Date.now()}-${Math.random()}`, role: "tool", content: JSON.stringify(data), generation: gen, toolId: ev.id, ts: ev.ts });
     } else if (ev.type === "tool_result") {
       // Match by DB message id (works on snapshot-loaded messages too), falling
       // back to the in-memory tool_use id. Newest first: results land near the end.
@@ -128,10 +128,14 @@ export function useTaskStream({ selTask, selProjRef, agentsRef, setTaskRunning,
         const arr = prev[taskId] ?? [];
         let i = arr.length - 1;
         while (i >= 0 && (arr[i].role !== "tool" || (arr[i].id !== ev.msgId && arr[i].toolId !== ev.id))) i--;
-        if (i < 0) return prev;
+        if (i < 0) {
+          if (!ev.msgId || (!ev.subagent && !ev.subagentMessage)) return prev;
+          const data: ToolData = { title: ev.subagent?.title ?? ev.subagentMessage?.tool?.title ?? "子代理消息", subagent: ev.subagent, subagentMessage: ev.subagentMessage };
+          return { ...prev, [taskId]: [...arr, { id: ev.msgId, role: "tool", content: JSON.stringify(data), generation: gen, toolId: ev.id, ts: ev.ts }] };
+        }
         const m = arr[i];
         let content: string;
-        try { const d = JSON.parse(m.content) as ToolData; d.result = ev.content; d.isError = ev.isError; if (ev.peek) d.peek = ev.peek; content = JSON.stringify(d); } catch { return prev; }
+        try { const d = JSON.parse(m.content) as ToolData; d.result = ev.content; d.isError = ev.isError; if (ev.subagent) d.subagent = ev.subagent; if (ev.subagentMessage) d.subagentMessage = ev.subagentMessage; if (ev.peek) d.peek = ev.peek; content = JSON.stringify(d); } catch { return prev; }
         const next = arr.slice();
         next[i] = { ...m, content };
         return { ...prev, [taskId]: next };

package/src/operator.base.css

@@ -4,6 +4,35 @@
    (ported from the Claude Design hi-fi prototype)
    ========================================================================== */
 
+/* Native CLI subagents share the transcript renderer and keep their own viewer. */
+.subagent-chat-scope{display:flex;position:relative;flex:1;min-height:0;min-width:0;overflow:hidden;}
+.subagent-chat-main{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;}
+.subagent-chat-main>.session{flex:1;min-height:0;}
+.subagent-entry{display:flex;align-items:center;gap:9px;width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--ink);text-align:left;}
+.subagent-entry:not(:disabled):hover{border-color:var(--accent);background:var(--accent-soft);}
+.subagent-entry:disabled{cursor:default;}
+.subagent-entry-icon{display:flex;color:var(--accent);}
+.subagent-entry-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
+.subagent-entry svg{flex:none;width:16px;height:16px;}
+.subagent-status{font-size:11px;color:var(--ink-3);white-space:nowrap;}
+.subagent-status.running{color:var(--accent);}
+.subagent-status.completed{color:var(--green);}
+.subagent-status.failed{color:var(--red);}
+.subagent-chat-panel{display:flex;flex-direction:column;position:relative;flex:0 0 46%;width:46%;min-width:0;max-width:560px;min-height:0;border-left:1px solid var(--line-strong);background:var(--panel);z-index:30;}
+.subagent-chat-header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);}
+.subagent-chat-header>div{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px;}
+.subagent-chat-header strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.subagent-chat-caption{font-size:10px;color:var(--ink-3);}
+.subagent-chat-header .icon-btn{flex:none;}
+.subagent-chat-transcript{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;}
+.subagent-chat-transcript .tw{width:100%;max-width:none;padding:16px;}
+.subagent-chat-transcript .msg{max-width:100%;}
+.subagent-chat-note{font-size:12px;color:var(--ink-3);line-height:1.6;margin-bottom:14px;overflow-wrap:anywhere;}
+.subagent-chat-note.error{color:var(--red);}
+.subagent-chat-latest{align-self:center;margin:6px 0;}
+.subagent-chat-scrim{position:absolute;inset:0;background:rgba(0,0,0,.25);z-index:29;}
+.subagent-chat-scope.narrow>.subagent-chat-panel{position:absolute;inset:0 0 0 auto;width:min(100%,560px);max-width:100%;box-shadow:-8px 0 24px rgba(0,0,0,.16);}
+
 :root{
   /* ---- cool near-black "mission control" palette (dark = default) ---- */
   --bg:#080a0e;
@@ -1842,6 +1871,12 @@ button.pop-item:hover{background:var(--surface-2);}
 [data-chat-layout]>.cli-refs,[data-chat-layout]>.cli-queue{width:calc(100% - 2 * var(--cli-chat-gutter) - var(--cli-chat-scrollbar,0px));max-width:var(--cli-chat-content-max);margin-inline:auto;margin-inline-start:max(var(--cli-chat-gutter),calc((100% - var(--cli-chat-scrollbar,0px) - var(--cli-chat-content-max)) / 2));flex-shrink:0;}
 @container chat-column (max-width:900px){[data-chat-layout]>*{--cli-chat-content-max:100%;}}
 @container chat-column (max-width:640px){[data-chat-layout]>*{--cli-chat-gutter:12px;}.session [data-chat-layout]>.composer{padding-inline-end:var(--cli-chat-gutter);}}
+@media (min-width:761px){
+  [data-chat-layout]{--cli-chat-gutter:32px;}
+  .session [data-chat-layout] .composer{padding-inline:var(--cli-chat-gutter);padding-inline-end:calc(var(--cli-chat-gutter) + var(--cli-chat-scrollbar,0px));}
+  [data-chat-layout] .composer>.composer-inner{width:100%;max-width:var(--cli-chat-content-max);margin-inline:auto;}
+  @container chat-column (max-width:640px){[data-chat-layout]>*{--cli-chat-gutter:24px;}.session [data-chat-layout] .composer{padding-inline-end:var(--cli-chat-gutter);}}
+}
 .task-origin{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--ink-3);padding-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fork-sources{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px 0;}
 .fork-sources>span{max-width:100%;display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;font-size:11px;color:var(--ink-2);overflow-wrap:anywhere;}

package/src/operator.css

@@ -6,6 +6,35 @@
    (ported from the Claude Design hi-fi prototype)
    ========================================================================== */
 
+/* Native CLI subagents share the transcript renderer and keep their own viewer. */
+.cli-ui .subagent-chat-scope{display:flex;position:relative;flex:1;min-height:0;min-width:0;overflow:hidden;}
+.cli-ui .subagent-chat-main{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;}
+.cli-ui .subagent-chat-main>.session{flex:1;min-height:0;}
+.cli-ui .subagent-entry{display:flex;align-items:center;gap:9px;width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--ink);text-align:left;}
+.cli-ui .subagent-entry:not(:disabled):hover{border-color:var(--accent);background:var(--accent-soft);}
+.cli-ui .subagent-entry:disabled{cursor:default;}
+.cli-ui .subagent-entry-icon{display:flex;color:var(--accent);}
+.cli-ui .subagent-entry-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
+.cli-ui .subagent-entry svg{flex:none;width:16px;height:16px;}
+.cli-ui .subagent-status{font-size:11px;color:var(--ink-3);white-space:nowrap;}
+.cli-ui .subagent-status.running{color:var(--accent);}
+.cli-ui .subagent-status.completed{color:var(--green);}
+.cli-ui .subagent-status.failed{color:var(--red);}
+.cli-ui .subagent-chat-panel{display:flex;flex-direction:column;position:relative;flex:0 0 46%;width:46%;min-width:0;max-width:560px;min-height:0;border-left:1px solid var(--line-strong);background:var(--panel);z-index:30;}
+.cli-ui .subagent-chat-header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);}
+.cli-ui .subagent-chat-header>div{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px;}
+.cli-ui .subagent-chat-header strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.cli-ui .subagent-chat-caption{font-size:10px;color:var(--ink-3);}
+.cli-ui .subagent-chat-header .icon-btn{flex:none;}
+.cli-ui .subagent-chat-transcript{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;}
+.cli-ui .subagent-chat-transcript .tw{width:100%;max-width:none;padding:16px;}
+.cli-ui .subagent-chat-transcript .msg{max-width:100%;}
+.cli-ui .subagent-chat-note{font-size:12px;color:var(--ink-3);line-height:1.6;margin-bottom:14px;overflow-wrap:anywhere;}
+.cli-ui .subagent-chat-note.error{color:var(--red);}
+.cli-ui .subagent-chat-latest{align-self:center;margin:6px 0;}
+.cli-ui .subagent-chat-scrim{position:absolute;inset:0;background:rgba(0,0,0,.25);z-index:29;}
+.cli-ui .subagent-chat-scope.narrow>.subagent-chat-panel{position:absolute;inset:0 0 0 auto;width:min(100%,560px);max-width:100%;box-shadow:-8px 0 24px rgba(0,0,0,.16);}
+
 .cli-ui{
   /* ---- cool near-black "mission control" palette (dark = default) ---- */
   --bg:#080a0e;
@@ -1842,6 +1871,12 @@
 .cli-ui [data-chat-layout]>.cli-refs,.cli-ui [data-chat-layout]>.cli-queue{width:calc(100% - 2 * var(--cli-chat-gutter) - var(--cli-chat-scrollbar,0px));max-width:var(--cli-chat-content-max);margin-inline:auto;margin-inline-start:max(var(--cli-chat-gutter),calc((100% - var(--cli-chat-scrollbar,0px) - var(--cli-chat-content-max)) / 2));flex-shrink:0;}
 @container chat-column (max-width:900px){.cli-ui [data-chat-layout]>*{--cli-chat-content-max:100%;}}
 @container chat-column (max-width:640px){.cli-ui [data-chat-layout]>*{--cli-chat-gutter:12px;}.cli-ui .session [data-chat-layout]>.composer{padding-inline-end:var(--cli-chat-gutter);}}
+@media (min-width:761px){
+  .cli-ui [data-chat-layout]{--cli-chat-gutter:32px;}
+  .cli-ui .session [data-chat-layout] .composer{padding-inline:var(--cli-chat-gutter);padding-inline-end:calc(var(--cli-chat-gutter) + var(--cli-chat-scrollbar,0px));}
+  .cli-ui [data-chat-layout] .composer>.composer-inner{width:100%;max-width:var(--cli-chat-content-max);margin-inline:auto;}
+  @container chat-column (max-width:640px){.cli-ui [data-chat-layout]>*{--cli-chat-gutter:24px;}.cli-ui .session [data-chat-layout] .composer{padding-inline-end:var(--cli-chat-gutter);}}
+}
 .cli-ui .task-origin{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--ink-3);padding-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .cli-ui .fork-sources{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px 0;}
 .cli-ui .fork-sources>span{max-width:100%;display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;font-size:11px;color:var(--ink-2);overflow-wrap:anywhere;}

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>;