update shell output at an interval to reduce flicker (#614)

packages/cli/src/ui/hooks/shellCommandProcessor.ts

@@ -16,6 +16,8 @@ import path from 'path';
 import os from 'os';
 import fs from 'fs';
 
+const OUTPUT_UPDATE_INTERVAL_MS = 1000;
+
 /**
  * Hook to process shell commands (e.g., !ls, $pwd).
  * Executes the command in the target directory and adds output/errors to history.
@@ -122,16 +124,20 @@ export const useShellCommandProcessor = (
 
           let exited = false;
           let output = '';
+          let lastUpdateTime = Date.now();
           const handleOutput = (data: string) => {
             // continue to consume post-exit for background processes
             // removing listeners can overflow OS buffer and block subprocesses
             // destroying (e.g. child.stdout.destroy()) can terminate subprocesses via SIGPIPE
             if (!exited) {
               output += data;
-              setPendingHistoryItem({
-                type: 'info',
-                text: output,
-              });
+              if (Date.now() - lastUpdateTime > OUTPUT_UPDATE_INTERVAL_MS) {
+                setPendingHistoryItem({
+                  type: 'info',
+                  text: output,
+                });
+                lastUpdateTime = Date.now();
+              }
             }
           };
           child.stdout.on('data', handleOutput);

packages/cli/src/ui/hooks/useToolScheduler.ts

@@ -288,11 +288,9 @@ export function useToolScheduler(
           const callId = t.request.callId;
           setToolCalls(setStatus(t.request.callId, 'executing'));
 
-          let accumulatedOutput = '';
-          const onOutputChunk =
+          const updateOutput =
             t.tool.name === 'execute_bash_command'
-              ? (chunk: string) => {
-                  accumulatedOutput += chunk;
+              ? (output: string) => {
                   setPendingHistoryItem(
                     (prevItem: HistoryItemWithoutId | null) => {
                       if (prevItem?.type === 'tool_group') {
@@ -304,7 +302,7 @@ export function useToolScheduler(
                               toolDisplay.status === ToolCallStatus.Executing
                                 ? {
                                     ...toolDisplay,
-                                    resultDisplay: accumulatedOutput,
+                                    resultDisplay: output,
                                   }
                                 : toolDisplay,
                           ),
@@ -319,7 +317,7 @@ export function useToolScheduler(
                   setToolCalls((prevToolCalls) =>
                     prevToolCalls.map((tc) =>
                       tc.request.callId === callId && tc.status === 'executing'
-                        ? { ...tc, liveOutput: accumulatedOutput }
+                        ? { ...tc, liveOutput: output }
                         : tc,
                     ),
                   );
@@ -327,7 +325,7 @@ export function useToolScheduler(
               : undefined;
 
           t.tool
-            .execute(t.request.args, signal, onOutputChunk)
+            .execute(t.request.args, signal, updateOutput)
             .then((result: ToolResult) => {
               if (signal.aborted) {
                 // TODO(jacobr): avoid stringifying the LLM content.