Stream Claude Code subagent activity inline in the transcript

web/dist/task.js

@@ -153,6 +153,7 @@ export function mountChat(root, src, makeHead) {
     }, { root: transcript, threshold: 0.5 });
     const newCtx = () => ({
         tools: new Map(),
+        subagents: new Map(),
         run: undefined,
         anchors: [],
         unplaced: [],
@@ -255,10 +256,11 @@ export function mountChat(root, src, makeHead) {
         releaseImages(entry.imgs);
         pending = pending.filter((p) => p !== entry);
     };
-    const addToRun = (el, call) => {
+    const runHead = (run) => [subagentTag(run.parent, ctx), runSummary(run.calls), snapMark(run.snaps)];
+    const addToRun = (el, call, parent) => {
         const run = ctx.run;
-        if (!run) {
-            ctx.run = { first: el, group: undefined, calls: call ? [call] : [], snaps: [] };
+        if (!run || run.parent !== parent) {
+            ctx.run = { first: el, group: undefined, calls: call ? [call] : [], snaps: [], parent };
             put(el);
             return;
         }
@@ -274,7 +276,7 @@ export function mountChat(root, src, makeHead) {
             run.group = { el: group, summary, body };
         }
         run.group.body.append(el);
-        replace(run.group.summary, runSummary(run.calls), snapMark(run.snaps));
+        replace(run.group.summary, ...runHead(run));
     };
     const addAnchor = (seq, el, turnEnd) => {
         const anchor = { seq, turnEnd, el, snaps: [], mark: undefined, run: turnEnd ? undefined : ctx.run };
@@ -301,7 +303,7 @@ export function mountChat(root, src, makeHead) {
         }
         run.snaps.push(n);
         if (run.group) {
-            replace(run.group.summary, runSummary(run.calls), snapMark(run.snaps));
+            replace(run.group.summary, ...runHead(run));
         }
     };
     const placeSnapshot = (snap) => {
@@ -380,7 +382,12 @@ export function mountChat(root, src, makeHead) {
         headImpl.onEvents?.(events);
         for (const ev of events) {
             const p = ev.payload;
-            if (ev.kind === "agent.message" || ev.kind === "turn.ended" || ev.kind === "user.message") {
+            const parent = parentOf(p);
+            if (ev.kind === "agent.vendor") {
+                claudeTaskStatus(p, ctx);
+                continue;
+            }
+            if ((ev.kind === "agent.message" && !parent) || ev.kind === "turn.ended" || ev.kind === "user.message") {
                 dropStream();
             }
             if (ev.kind === "user.message" && ev.actor !== "byre") {
@@ -397,9 +404,16 @@ export function mountChat(root, src, makeHead) {
                 placeSnapshot(p);
                 continue;
             }
+            if (ev.kind === "agent.tool_call" && isSubagentCall(p)) {
+                ctx.run = undefined;
+                const el = renderSubagent(p, ctx);
+                put(el);
+                addAnchor(ev.seq, el.querySelector("summary"), false);
+                continue;
+            }
             if (ev.kind === "agent.tool_call") {
                 const el = renderToolCall(p, ctx);
-                addToRun(el, { name: String(p["name"]), target: toolTarget(p["input"], ctx.root) });
+                addToRun(el, { name: String(p["name"]), target: toolTarget(p["input"], ctx.root) }, parent);
                 addAnchor(ev.seq, el.querySelector("summary"), false);
                 continue;
             }
@@ -408,7 +422,7 @@ export function mountChat(root, src, makeHead) {
                 continue;
             }
             if (ev.kind === "agent.thinking") {
-                addToRun(el, undefined);
+                addToRun(el, undefined, parent);
                 continue;
             }
             ctx.run = undefined;
@@ -701,10 +715,56 @@ export function compactButton(sessionId, sessionState, c) {
     };
     return b;
 }
+function parentOf(p) {
+    return typeof p["parent_tool_use_id"] === "string" ? p["parent_tool_use_id"] : "";
+}
+function subagentTag(parent, ctx) {
+    if (!parent) {
+        return null;
+    }
+    const sub = ctx.subagents.get(parent);
+    return h("span", { class: "subagent-tag", title: sub?.description ?? "" }, `↳ ${sub?.type ?? "subagent"}`);
+}
 function renderToolCall(p, ctx) {
     const result = h("div", { class: "tool-result pending" }, "running…");
     ctx.tools.set(String(p["id"]), result);
-    return h("details", { class: "tool" }, h("summary", {}, h("span", { class: "tool-name" }, String(p["name"])), " ", h("span", { class: "tool-brief" }, toolBrief(p["input"], ctx.root))), h("pre", { class: "tool-input" }, JSON.stringify(p["input"], null, 2)), result);
+    return h("details", { class: "tool" }, h("summary", {}, subagentTag(parentOf(p), ctx), h("span", { class: "tool-name" }, String(p["name"])), " ", h("span", { class: "tool-brief" }, toolBrief(p["input"], ctx.root))), h("pre", { class: "tool-input" }, JSON.stringify(p["input"], null, 2)), result);
+}
+function isSubagentCall(p) {
+    return p["name"] === "Agent" || p["name"] === "Task";
+}
+function renderSubagent(p, ctx) {
+    const input = (typeof p["input"] === "object" && p["input"] !== null ? p["input"] : {});
+    const id = String(p["id"]);
+    const type = String(input["subagent_type"] ?? "subagent");
+    const description = String(input["description"] ?? "");
+    const status = h("span", { class: "subagent-status" }, "starting…");
+    const result = h("div", { class: "tool-result pending" }, "running…");
+    const tag = subagentTag(parentOf(p), ctx);
+    ctx.tools.set(id, result);
+    ctx.subagents.set(id, { type, description, status });
+    return h("details", { class: "tool subagent" }, h("summary", {}, tag, h("span", { class: "tool-name" }, `${p["name"]} ${type}`), " ", h("span", { class: "tool-brief" }, description), " ", status), markdown(String(input["prompt"] ?? ""), "text md subagent-prompt", { taskId: ctx.taskId }), result);
+}
+function claudeTaskStatus(p, ctx) {
+    if (p["type"] !== "system") {
+        return;
+    }
+    const sub = ctx.subagents.get(String(p["tool_use_id"]));
+    if (!sub) {
+        return;
+    }
+    switch (p["subtype"]) {
+        case "task_started":
+            replace(sub.status, p["is_backgrounded"] === true ? "running in the background" : "running");
+            return;
+        case "task_progress":
+            replace(sub.status, String(p["description"] ?? "running"));
+            return;
+        case "task_notification":
+            sub.status.className = `subagent-status ${p["status"] === "completed" ? "done" : "error"}`;
+            replace(sub.status, String(p["status"]));
+            return;
+    }
 }
 function snapMark(ns) {
     if (ns.length === 0) {
@@ -761,6 +821,9 @@ function renderEvent(ev, ctx) {
             }
             return h("div", { class: "msg user" }, h("div", { class: "who" }, ev.actor, " ", when), messageImages(p["images"]), String(p["text"] ?? "").trim() ? markdown(String(p["text"]), "text md", md) : null);
         case "agent.message":
+            if (parentOf(p)) {
+                return h("div", { class: "msg agent subagent" }, h("div", { class: "who" }, subagentTag(parentOf(p), ctx), " ", when), markdown(String(p["text"]), "text md", md));
+            }
             if (String(p["text"]).trim() === quietReply) {
                 ctx.quiet = true;
                 return null;
@@ -769,7 +832,7 @@ function renderEvent(ev, ctx) {
             ctx.lastMessage = h("div", { class: "msg agent" }, markdown(String(p["text"]), "text md", md));
             return ctx.lastMessage;
         case "agent.thinking":
-            return h("details", { class: "thinking" }, h("summary", {}, "thinking"), markdown(String(p["text"]), "text md", md));
+            return h("details", { class: "thinking" }, h("summary", {}, subagentTag(parentOf(p), ctx), "thinking"), markdown(String(p["text"]), "text md", md));
         case "agent.tool_result": {
             const target = ctx.tools.get(String(p["tool_use_id"]));
             const body = h("pre", {}, resultText(p["content"]));