From da5af386e0def9d29ecef552e47437c5d2d8eeb8 Mon Sep 17 00:00:00 2001
From: Mahima Shanware <mshanware@google.com>
Date: Fri, 27 Mar 2026 17:43:39 +0000
Subject: [PATCH] fix(cli): move btw layout into main content to prevent jerky
 scroll

---
 .../src/ui/components/MainContent.test.tsx    |  7 +++++++
 .../cli/src/ui/components/MainContent.tsx     | 21 +++++++++++++++++--
 .../cli/src/ui/layouts/DefaultAppLayout.tsx   | 10 ---------
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/cli/src/ui/components/MainContent.test.tsx b/packages/cli/src/ui/components/MainContent.test.tsx
index 2bc6ee27bc..989a7cb866 100644
--- a/packages/cli/src/ui/components/MainContent.test.tsx
+++ b/packages/cli/src/ui/components/MainContent.test.tsx
@@ -344,6 +344,13 @@ describe('MainContent', () => {
     bannerVisible: false,
     copyModeEnabled: false,
     terminalWidth: 100,
+    btwState: {
+      isActive: false,
+      query: '',
+      response: '',
+      isStreaming: false,
+      error: null,
+    },
   };
 
   beforeEach(() => {
diff --git a/packages/cli/src/ui/components/MainContent.tsx b/packages/cli/src/ui/components/MainContent.tsx
index b46af4965b..f6b0641458 100644
--- a/packages/cli/src/ui/components/MainContent.tsx
+++ b/packages/cli/src/ui/components/MainContent.tsx
@@ -13,6 +13,7 @@ import { AppHeader } from './AppHeader.js';
 
 import { useAlternateBuffer } from '../hooks/useAlternateBuffer.js';
 import { useConfig } from '../contexts/ConfigContext.js';
+import { BtwDisplay } from './BtwDisplay.js';
 import {
   SCROLL_TO_ITEM_END,
   type VirtualizedListRef,
@@ -47,10 +48,10 @@ export const MainContent = () => {
   const scrollableListRef = useRef<VirtualizedListRef<unknown>>(null);
 
   useEffect(() => {
-    if (showConfirmationQueue) {
+    if (showConfirmationQueue || uiState.btwState.isActive) {
       scrollableListRef.current?.scrollToEnd();
     }
-  }, [showConfirmationQueue, confirmingToolCallId]);
+  }, [showConfirmationQueue, confirmingToolCallId, uiState.btwState.isActive]);
 
   useEffect(() => {
     const handleScroll = () => {
@@ -227,6 +228,16 @@ export const MainContent = () => {
             confirmingTool={confirmingTool}
           />
         )}
+        {uiState.btwState.isActive && (
+          <BtwDisplay
+            key="btw-display"
+            query={uiState.btwState.query}
+            response={uiState.btwState.response}
+            isStreaming={uiState.btwState.isStreaming}
+            error={uiState.btwState.error}
+            terminalWidth={uiState.terminalWidth}
+          />
+        )}
       </Box>
     ),
     [
@@ -238,6 +249,12 @@ export const MainContent = () => {
       confirmingTool,
       uiState.history,
       suppressNarrationFlags,
+      uiState.btwState.isActive,
+      uiState.btwState.query,
+      uiState.btwState.response,
+      uiState.btwState.isStreaming,
+      uiState.btwState.error,
+      uiState.terminalWidth,
     ],
   );
 
diff --git a/packages/cli/src/ui/layouts/DefaultAppLayout.tsx b/packages/cli/src/ui/layouts/DefaultAppLayout.tsx
index de09440895..bb1fc3e9b7 100644
--- a/packages/cli/src/ui/layouts/DefaultAppLayout.tsx
+++ b/packages/cli/src/ui/layouts/DefaultAppLayout.tsx
@@ -16,7 +16,6 @@ import { useFlickerDetector } from '../hooks/useFlickerDetector.js';
 import { useAlternateBuffer } from '../hooks/useAlternateBuffer.js';
 import { CopyModeWarning } from '../components/CopyModeWarning.js';
 import { BackgroundTaskDisplay } from '../components/BackgroundTaskDisplay.js';
-import { BtwDisplay } from '../components/BtwDisplay.js';
 import { StreamingState } from '../types.js';
 import { useInputState } from '../contexts/InputContext.js';
 
@@ -67,15 +66,6 @@ export const DefaultAppLayout: React.FC = () => {
         width={uiState.terminalWidth}
         height={copyModeEnabled ? uiState.stableControlsHeight : undefined}
       >
-        {uiState.btwState.isActive && (
-          <BtwDisplay
-            query={uiState.btwState.query}
-            response={uiState.btwState.response}
-            isStreaming={uiState.btwState.isStreaming}
-            error={uiState.btwState.error}
-            terminalWidth={uiState.terminalWidth}
-          />
-        )}
         <Notifications />
         <CopyModeWarning />