fix(core): address PR feedback regarding hooks, unused promises, and UI double-render

packages/cli/src/ui/components/MainContent.tsx

@@ -242,6 +242,28 @@ export const MainContent = () => {
     ],
   );
 
+  const btwDisplayNode = useMemo(
+    () =>
+      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}
+        />
+      ) : null,
+    [
+      uiState.btwState.isActive,
+      uiState.btwState.query,
+      uiState.btwState.response,
+      uiState.btwState.isStreaming,
+      uiState.btwState.error,
+      uiState.terminalWidth,
+    ],
+  );
+
   const virtualizedData = useMemo(() => {
     const data: Array<
       | { type: 'header' }
@@ -281,16 +303,7 @@ export const MainContent = () => {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
         return (item as any).element;
       } else if (item.type === 'btw') {
-        return (
-          <BtwDisplay
-            key="btw-display"
-            query={uiState.btwState.query}
-            response={uiState.btwState.response}
-            isStreaming={uiState.btwState.isStreaming}
-            error={uiState.btwState.error}
-            terminalWidth={uiState.terminalWidth}
-          />
-        );
+        return <>{btwDisplayNode}</>;
       } else {
         return pendingItems;
       }
@@ -299,11 +312,7 @@ export const MainContent = () => {
       showHeaderDetails,
       version,
       pendingItems,
-      uiState.btwState.query,
-      uiState.btwState.response,
-      uiState.btwState.isStreaming,
-      uiState.btwState.error,
-      uiState.terminalWidth,
+      btwDisplayNode,
     ],
   );
 
@@ -392,16 +401,7 @@ export const MainContent = () => {
         {(item) => item}
       </Static>
       {pendingItems}
-      {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}
-        />
-      )}
+      {btwDisplayNode}
     </>
   );
 };