fix(cli): move btw layout into main content to prevent jerky scroll

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(() => {

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,
     ],
   );
 

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 />