fix: flush grouped tool output promptly

- Track completed grouped tool calls in CLI and TUI renderers

- Cover immediate flush behavior with a focused TUI regression

Co-Authored-By: devagent <devagent@egavrin>

Author: egavrin

packages/cli/src/main-event-handlers.ts

@@ -1,6 +1,10 @@
 import {
   SafetyMode,
   loggedSubagentRunFromEvent,
+  type DevAgentConfig,
+  type EventBus,
+  type EventMap,
+  type VerbosityConfig,
 } from "@devagent/runtime";
 
 import {
@@ -37,12 +41,6 @@ import {
   presentToolAfterEvent,
   presentToolBeforeEvent,
 } from "./transcript-presenter.js";
-import type {
-  DevAgentConfig,
-  EventBus,
-  EventMap,
-  VerbosityConfig,
-} from "@devagent/runtime";
 
 type Verbosity = "quiet" | "normal" | "verbose";
 
@@ -106,9 +104,7 @@ export function setupEventHandlers(
 }
 
 function createStatusLine(config: DevAgentConfig, verbosity: Verbosity): StatusLine | null {
-  return verbosity === "quiet"
-    ? null
-    : new StatusLine(config.model, getInteractiveSafetyMode(config));
+  return verbosity === "quiet" ? null : new StatusLine(config.model, getInteractiveSafetyMode(config));
 }
 
 function getInteractiveSafetyMode(config: DevAgentConfig): SafetyMode {
@@ -344,6 +340,7 @@ function startPendingToolGroup(
   ctx.os.pendingToolGroup = {
     name: event.name,
     count: 1,
+    completed: 0,
     params: summary ? [summary] : [],
     totalDurationMs: 0,
     lastSuccess: true,
@@ -382,13 +379,17 @@ function appendToolResultToGroup(ctx: EventHandlerContext, event: EventMap["tool
     return false;
   }
   group.totalDurationMs += event.durationMs;
+  group.completed++;
   if (!event.result.success) {
     group.lastSuccess = false;
     group.lastError = event.result.error ?? undefined;
   }
   if (group.count === 1) {
     renderToolResultParts(ctx, event);
   }
+  if (group.count > 1 && group.completed >= group.count) {
+    flushToolGroup(ctx);
+  }
   return true;
 }
 

packages/cli/src/output-state.ts

@@ -65,6 +65,7 @@ export class OutputState {
   pendingToolGroup: {
     name: string;
     count: number;
+    completed: number;
     params: string[];
     totalDurationMs: number;
     lastSuccess: boolean;

packages/cli/src/tui/App.test-utils.ts

@@ -3,7 +3,7 @@ import { PassThrough, Writable } from "node:stream";
 
 import type React from "react";
 
-export class TestInput extends PassThrough {
+class TestInput extends PassThrough {
   readonly isTTY = true;
 
   setRawMode(_value: boolean): void {}
@@ -17,7 +17,7 @@ export class TestInput extends PassThrough {
   }
 }
 
-export class TestOutput extends Writable {
+class TestOutput extends Writable {
   readonly isTTY = true;
   readonly columns: number;
   readonly rows = 40;

packages/cli/src/tui/App.test.ts

@@ -180,6 +180,57 @@ function ToolDiffHarness(): React.ReactElement {
   });
 }
 
+function ToolGroupFlushHarness(): React.ReactElement {
+  const bus = useMemo(() => new EventBus(), []);
+  const { transcriptNodes, startTurn, completeTurn, nextId } = useAgentLog({
+    bus,
+    model: "test-model",
+  });
+
+  useEffect(() => {
+    startTurn(nextId("turn"), "Check LSP", Date.now());
+    bus.emit("tool:before", {
+      name: "lsp",
+      params: { operation: "diagnostics", path: "src/tmp-lsp-validation.ts" },
+      callId: "call-1",
+    });
+    bus.emit("tool:before", {
+      name: "lsp",
+      params: { operation: "symbols", path: "src/tmp-lsp-validation.ts" },
+      callId: "call-2",
+    });
+    bus.emit("tool:after", {
+      name: "lsp",
+      callId: "call-1",
+      durationMs: 1,
+      result: {
+        success: true,
+        output: "No diagnostics.",
+        error: null,
+        artifacts: [],
+      },
+    });
+    bus.emit("tool:after", {
+      name: "lsp",
+      callId: "call-2",
+      durationMs: 9,
+      result: {
+        success: true,
+        output: "1 symbol.",
+        error: null,
+        artifacts: [],
+      },
+    });
+    completeTurn(nextId("summary"), makeTurnSummaryPart({ iterations: 1, toolCalls: 2, cost: 0, elapsedMs: 10 }));
+  }, [bus, startTurn, completeTurn, nextId]);
+
+  return React.createElement(TranscriptView, {
+    showWelcome: false,
+    transcriptNodes,
+    model: "test-model",
+  });
+}
+
 function StatusHarness(): React.ReactElement {
   const bus = useMemo(() => new EventBus(), []);
   const { transcriptNodes, startTurn, completeTurn, nextId } = useAgentLog({
@@ -701,6 +752,17 @@ describe("interactive completion notices", () => {
     expect(output).not.toContain("+++ b/src/new-file.ts");
     expect(output).toContain("... +2 more files");
   });
+
+  it("flushes grouped tool rows as soon as all calls complete", async () => {
+    const view = renderForTest(React.createElement(ToolGroupFlushHarness));
+
+    await settle();
+
+    const plain = stripAnsi(view.stdout.readAll());
+    expect(plain).toContain("Check LSP");
+    expect(plain).toContain("✓ lsp ×2");
+    expect(plain).toContain("tmp-lsp-validation.ts, tmp-lsp-validation.ts");
+  });
 });
 
 describe("framed TUI wrapping", () => {

packages/cli/src/tui/useAgentLog.ts

@@ -82,6 +82,7 @@ interface UseAgentLogResult {
 interface PendingToolGroup {
   name: string;
   count: number;
+  completed: number;
   summaries: string[];
   totalMs: number;
   lastSuccess: boolean;
@@ -214,6 +215,7 @@ function registerToolBeforeEvent(
       runtime.pendingGroupRef.current = {
         name: event.name,
         count: 1,
+        completed: 0,
         summaries: summary ? [summary] : [],
         totalMs: 0,
         lastSuccess: true,
@@ -291,8 +293,12 @@ function applyPendingToolResult(
     return false;
   }
   pendingGroup.totalMs += event.durationMs;
+  pendingGroup.completed++;
   if (!event.result.success) pendingGroup.lastSuccess = false;
   if (pendingGroup.count === 1) addToolAfterParts(event, runtime);
+  if (pendingGroup.count > 1 && pendingGroup.completed >= pendingGroup.count) {
+    runtime.flushGroup();
+  }
   return true;
 }