indicate running tools

web/dist/task.js

@@ -952,6 +952,12 @@ function renderEvent(ev, ctx) {
             return null;
         }
         case "turn.ended":
+            for (const result of ctx.tools.values()) {
+                if (result.classList.contains("pending")) {
+                    result.className = "tool-result unfinished";
+                    replace(result, "no result");
+                }
+            }
             if (p["handoff"] === true) {
                 return h("div", { class: "note" }, "handoff written; continuing in a new session with a fresh context ", when);
             }

web/src/task.ts

@@ -1110,6 +1110,12 @@ function renderEvent(ev: ByreEvent, ctx: Ctx): HTMLElement | null {
     }
 
     case "turn.ended":
+      for (const result of ctx.tools.values()) {
+        if (result.classList.contains("pending")) {
+          result.className = "tool-result unfinished";
+          replace(result, "no result");
+        }
+      }
       if (p["handoff"] === true) {
         return h("div", { class: "note" }, "handoff written; continuing in a new session with a fresh context ", when);
       }

web/style.css

@@ -692,7 +692,8 @@ button.compact.danger {
   }
 }
 
-.spinner {
+.spinner,
+.transcript.running :is(.tool, .tool-group):has(.tool-result.pending) > summary::after {
   --frames: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='10'%3E%3Cg%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3Ccircle cx='1' cy='5' r='1'/%3E%3Ccircle cx='4' cy='1' r='1'/%3E%3Ccircle cx='6' cy='1' r='1'/%3E%3Ccircle cx='9' cy='1' r='1'/%3E%3Ccircle cx='9' cy='5' r='1'/%3E%3Ccircle cx='11' cy='1' r='1'/%3E%3Ccircle cx='14' cy='1' r='1'/%3E%3Ccircle cx='14' cy='5' r='1'/%3E%3Ccircle cx='14' cy='9' r='1'/%3E%3Ccircle cx='19' cy='1' r='1'/%3E%3Ccircle cx='19' cy='5' r='1'/%3E%3Ccircle cx='19' cy='9' r='1'/%3E%3Ccircle cx='21' cy='9' r='1'/%3E%3Ccircle cx='24' cy='1' r='1'/%3E%3Ccircle cx='24' cy='5' r='1'/%3E%3Ccircle cx='24' cy='9' r='1'/%3E%3Ccircle cx='26' cy='9' r='1'/%3E%3Ccircle cx='29' cy='5' r='1'/%3E%3Ccircle cx='29' cy='9' r='1'/%3E%3Ccircle cx='31' cy='5' r='1'/%3E%3Ccircle cx='31' cy='9' r='1'/%3E%3Ccircle cx='34' cy='9' r='1'/%3E%3Ccircle cx='36' cy='1' r='1'/%3E%3Ccircle cx='36' cy='5' r='1'/%3E%3Ccircle cx='36' cy='9' r='1'/%3E%3Ccircle cx='39' cy='9' r='1'/%3E%3Ccircle cx='41' cy='1' r='1'/%3E%3Ccircle cx='41' cy='5' r='1'/%3E%3Ccircle cx='41' cy='9' r='1'/%3E%3Ccircle cx='46' cy='1' r='1'/%3E%3Ccircle cx='46' cy='5' r='1'/%3E%3Ccircle cx='46' cy='9' r='1'/%3E%3Ccircle cx='49' cy='1' r='1'/%3E%3C/g%3E%3C/svg%3E");
   flex-shrink: 0;
   width: 5px;
@@ -999,7 +1000,19 @@ button.compact.danger {
   }
 }
 
-.tool-result.pending {
+.transcript.running :is(.tool, .tool-group):has(.tool-result.pending) {
+  border-color: var(--task);
+}
+
+.transcript.running :is(.tool, .tool-group):has(.tool-result.pending) > summary::after {
+  content: "";
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 0 0 8px;
+}
+
+.tool-result.pending,
+.tool-result.unfinished {
   color: var(--muted);
   font-style: italic;
   padding: 4px 0;