fix(cli): fix issue updating a component while rendering a different component (#14319)

packages/cli/src/ui/hooks/useCommandCompletion.test.tsx

@@ -94,7 +94,6 @@ describe('useCommandCompletion', () => {
     getEnablePromptCompletion: () => false,
     getGeminiClient: vi.fn(),
   } as unknown as Config;
-  const testDirs: string[] = [];
   const testRootDir = '/';
 
   // Helper to create real TextBuffer objects within renderHook
@@ -121,7 +120,6 @@ describe('useCommandCompletion', () => {
       const textBuffer = useTextBufferForTest(initialText, cursorOffset);
       const completion = useCommandCompletion(
         textBuffer,
-        testDirs,
         testRootDir,
         [],
         mockCommandContext,
@@ -505,7 +503,6 @@ describe('useCommandCompletion', () => {
         const textBuffer = useTextBufferForTest('// This is a line comment');
         const completion = useCommandCompletion(
           textBuffer,
-          testDirs,
           testRootDir,
           [],
           mockCommandContext,
@@ -538,7 +535,6 @@ describe('useCommandCompletion', () => {
         );
         const completion = useCommandCompletion(
           textBuffer,
-          testDirs,
           testRootDir,
           [],
           mockCommandContext,
@@ -571,7 +567,6 @@ describe('useCommandCompletion', () => {
         );
         const completion = useCommandCompletion(
           textBuffer,
-          testDirs,
           testRootDir,
           [],
           mockCommandContext,

packages/cli/src/ui/hooks/useCommandCompletion.tsx

@@ -57,7 +57,6 @@ export interface UseCommandCompletionReturn {
 
 export function useCommandCompletion(
   buffer: TextBuffer,
-  dirs: readonly string[],
   cwd: string,
   slashCommands: readonly SlashCommand[],
   commandContext: CommandContext,

packages/cli/src/ui/hooks/useMessageQueue.test.tsx

@@ -253,9 +253,7 @@ describe('useMessageQueue', () => {
       // Pop all messages
       let poppedMessages: string | undefined;
       act(() => {
-        result.current.popAllMessages((messages) => {
-          poppedMessages = messages;
-        });
+        poppedMessages = result.current.popAllMessages();
       });
 
       expect(poppedMessages).toBe('Message 1\n\nMessage 2\n\nMessage 3');
@@ -271,9 +269,7 @@ describe('useMessageQueue', () => {
 
       let poppedMessages: string | undefined = 'not-undefined';
       act(() => {
-        result.current.popAllMessages((messages) => {
-          poppedMessages = messages;
-        });
+        poppedMessages = result.current.popAllMessages();
       });
 
       expect(poppedMessages).toBeUndefined();
@@ -293,9 +289,7 @@ describe('useMessageQueue', () => {
 
       let poppedMessages: string | undefined;
       act(() => {
-        result.current.popAllMessages((messages) => {
-          poppedMessages = messages;
-        });
+        poppedMessages = result.current.popAllMessages();
       });
 
       expect(poppedMessages).toBe('Single message');
@@ -315,7 +309,7 @@ describe('useMessageQueue', () => {
       });
 
       act(() => {
-        result.current.popAllMessages(() => {});
+        result.current.popAllMessages();
       });
 
       // Queue should be empty
@@ -325,9 +319,7 @@ describe('useMessageQueue', () => {
       // Popping again should return undefined
       let secondPop: string | undefined = 'not-undefined';
       act(() => {
-        result.current.popAllMessages((messages) => {
-          secondPop = messages;
-        });
+        secondPop = result.current.popAllMessages();
       });
 
       expect(secondPop).toBeUndefined();
@@ -349,9 +341,7 @@ describe('useMessageQueue', () => {
       // Pop all messages
       let firstPop: string | undefined;
       act(() => {
-        result.current.popAllMessages((messages) => {
-          firstPop = messages;
-        });
+        firstPop = result.current.popAllMessages();
       });
 
       expect(firstPop).toBe('First\n\nSecond');
@@ -365,9 +355,7 @@ describe('useMessageQueue', () => {
       // Pop again
       let secondPop: string | undefined;
       act(() => {
-        result.current.popAllMessages((messages) => {
-          secondPop = messages;
-        });
+        secondPop = result.current.popAllMessages();
       });
 
       expect(secondPop).toBe('Third\n\nFourth');

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

@@ -18,7 +18,7 @@ export interface UseMessageQueueReturn {
   addMessage: (message: string) => void;
   clearQueue: () => void;
   getQueuedMessagesText: () => string;
-  popAllMessages: (onPop: (messages: string | undefined) => void) => void;
+  popAllMessages: () => string | undefined;
 }
 
 /**
@@ -53,21 +53,14 @@ export function useMessageQueue({
   }, [messageQueue]);
 
   // Pop all messages from the queue and return them as a single string
-  const popAllMessages = useCallback(
-    (onPop: (messages: string | undefined) => void) => {
-      setMessageQueue((prev) => {
-        if (prev.length === 0) {
-          onPop(undefined);
-          return prev;
-        }
-        // Join all messages with double newlines, same as when they're sent
-        const allMessages = prev.join('\n\n');
-        onPop(allMessages);
-        return []; // Clear the entire queue
-      });
-    },
-    [],
-  );
+  const popAllMessages = useCallback(() => {
+    if (messageQueue.length === 0) {
+      return undefined;
+    }
+    const allMessages = messageQueue.join('\n\n');
+    setMessageQueue([]);
+    return allMessages;
+  }, [messageQueue]);
 
   // Process queued messages when streaming becomes idle
   useEffect(() => {