highlight active subagents

web/src/task.ts

@@ -65,6 +65,7 @@ type Run = {
 };
 
 type Subagent = {
+  el: HTMLElement;
   type: string;
   description: string;
   status: HTMLElement;
@@ -308,7 +309,10 @@ export function mountChat(root: HTMLElement, src: ChatSource, makeHead: (rerende
       transcript.insertBefore(el, scanner);
     }
   };
-  const syncRunning = () => setRunning(src.session()?.state === "running" && ctx.open);
+  const syncRunning = () => {
+    setRunning(src.session()?.state === "running" && ctx.open);
+    transcript.classList.toggle("subagents", (src.session()?.subagents ?? 0) > 0);
+  };
   const release = () => {
     const buffered = ctx.held;
     if (!buffered) {
@@ -515,6 +519,16 @@ export function mountChat(root: HTMLElement, src: ChatSource, makeHead: (rerende
         claudeTaskStatus(p, ctx);
         continue;
       }
+      if (ev.kind === "session.subagents") {
+        if (p["subagents"] === 0) {
+          for (const sub of ctx.subagents.values()) {
+            if (sub.el.classList.contains("active")) {
+              endSubagent(sub, "error", "ended with its process");
+            }
+          }
+        }
+        continue;
+      }
       if (!sink && ((ev.kind === "agent.message" && !parent) || ev.kind === "turn.ended" || ev.kind === "user.message")) {
         dropStream();
       }
@@ -947,9 +961,7 @@ function renderSubagent(p: Record<string, unknown>, ctx: Ctx): HTMLElement {
   const result = h("div", { class: "tool-result pending" }, "running…");
   const body = h("div", { class: "subagent-body" });
   const tag = subagentTag(parentOf(p), ctx);
-  ctx.tools.set(id, result);
-  ctx.subagents.set(id, { type, description, status, body, run: undefined });
-  return h(
+  const el = h(
     "details",
     { class: "tool subagent" },
     h("summary", {}, tag, h("span", { class: "tool-name" }, `${p["name"]} ${type}`), " ", h("span", { class: "tool-brief" }, description), " ", status),
@@ -957,6 +969,9 @@ function renderSubagent(p: Record<string, unknown>, ctx: Ctx): HTMLElement {
     body,
     result,
   );
+  ctx.tools.set(id, result);
+  ctx.subagents.set(id, { el, type, description, status, body, run: undefined });
+  return el;
 }
 
 function claudeTaskStatus(p: Record<string, unknown>, ctx: Ctx): void {
@@ -969,18 +984,28 @@ function claudeTaskStatus(p: Record<string, unknown>, ctx: Ctx): void {
   }
   switch (p["subtype"]) {
     case "task_started":
+      sub.el.classList.add("active");
       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"]));
+      endSubagent(sub, p["status"] === "completed" ? "done" : "error", String(p["status"]));
       return;
   }
 }
 
+function endSubagent(sub: Subagent, kind: string, status: string): void {
+  sub.el.classList.remove("active");
+  sub.status.className = `subagent-status ${kind}`;
+  replace(sub.status, status);
+  for (const result of sub.body.querySelectorAll(".tool-result.pending")) {
+    result.className = "tool-result unfinished";
+    replace(result as HTMLElement, "no result");
+  }
+}
+
 function markReview(button: HTMLElement, r: Review): void {
   const n = findingCount(r);
   button.classList.toggle("attention", n > 0);
@@ -1111,7 +1136,7 @@ function renderEvent(ev: ByreEvent, ctx: Ctx): HTMLElement | null {
 
     case "turn.ended":
       for (const result of ctx.tools.values()) {
-        if (result.classList.contains("pending")) {
+        if (result.classList.contains("pending") && !result.closest(".tool.subagent.active")) {
           result.className = "tool-result unfinished";
           replace(result, "no result");
         }