From 0a7f461d392dbf887ab562e38a2e827e124bfa80 Mon Sep 17 00:00:00 2001
From: Tae Hyung Kim <thkim1011@users.noreply.github.com>
Date: Wed, 7 May 2025 12:57:19 -0700
Subject: Fix flicker in iterm2 (#266)

---
 packages/cli/src/ui/App.tsx | 49 +++++++++------------------------------------
 1 file changed, 10 insertions(+), 39 deletions(-)

(limited to 'packages/cli/src/ui/App.tsx')

diff --git a/packages/cli/src/ui/App.tsx b/packages/cli/src/ui/App.tsx
index 1c1ec424..9fe651b5 100644
--- a/packages/cli/src/ui/App.tsx
+++ b/packages/cli/src/ui/App.tsx
@@ -36,7 +36,7 @@ interface AppProps {
 }
 
 export const App = ({ config, settings, cliVersion }: AppProps) => {
-  const { history, addItem, updateItem, clearItems } = useHistory();
+  const { history, addItem, clearItems } = useHistory();
   const [startupWarnings, setStartupWarnings] = useState<string[]>([]);
   const [showHelp, setShowHelp] = useState<boolean>(false);
   const {
@@ -57,9 +57,9 @@ export const App = ({ config, settings, cliVersion }: AppProps) => {
     initError,
     debugMessage,
     slashCommands,
+    pendingHistoryItem,
   } = useGeminiStream(
     addItem,
-    updateItem,
     clearItems,
     refreshStatic,
     setShowHelp,
@@ -124,9 +124,6 @@ export const App = ({ config, settings, cliVersion }: AppProps) => {
 
   // --- Render Logic ---
 
-  const { staticallyRenderedHistoryItems, updatableHistoryItems } =
-    getHistoryRenderSlices(history);
-
   // Get terminal width
   const { stdout } = useStdout();
   const terminalWidth = stdout?.columns ?? 80;
@@ -146,10 +143,7 @@ export const App = ({ config, settings, cliVersion }: AppProps) => {
        * content is set it'll flush content to the terminal and move the area which it's "clearing"
        * down a notch. Without Static the area which gets erased and redrawn continuously grows.
        */}
-      <Static
-        key={'static-key-' + staticKey}
-        items={['header', ...staticallyRenderedHistoryItems]}
-      >
+      <Static key={'static-key-' + staticKey} items={['header', ...history]}>
         {(item, index) => {
           if (item === 'header') {
             return (
@@ -170,19 +164,14 @@ export const App = ({ config, settings, cliVersion }: AppProps) => {
           );
         }}
       </Static>
-
-      {updatableHistoryItems.length > 0 && (
-        <Box flexDirection="column" alignItems="flex-start">
-          {updatableHistoryItems.map((historyItem) => (
-            <HistoryItemDisplay
-              key={'history-' + historyItem.id}
-              item={historyItem}
-              onSubmit={submitQuery}
-            />
-          ))}
-        </Box>
+      {pendingHistoryItem && (
+        <HistoryItemDisplay
+          // TODO(taehykim): It seems like references to ids aren't necessary in
+          // HistoryItemDisplay. Refactor later. Use a fake id for now.
+          item={{ ...pendingHistoryItem, id: 0 }}
+          onSubmit={submitQuery}
+        />
       )}
-
       {showHelp && <Help commands={slashCommands} />}
 
       {startupWarnings.length > 0 && (
@@ -295,21 +284,3 @@ export const App = ({ config, settings, cliVersion }: AppProps) => {
     </Box>
   );
 };
-
-function getHistoryRenderSlices(history: HistoryItem[]) {
-  let staticallyRenderedHistoryItems: HistoryItem[] = [];
-  let updatableHistoryItems: HistoryItem[] = [];
-  if (
-    history.length > 1 &&
-    history[history.length - 2]?.type === 'tool_group'
-  ) {
-    // If the second-to-last item is a tool_group, it and the last item are updateable
-    staticallyRenderedHistoryItems = history.slice(0, -2);
-    updatableHistoryItems = history.slice(-2);
-  } else {
-    // Otherwise, only the last item is updateable
-    staticallyRenderedHistoryItems = history.slice(0, -1);
-    updatableHistoryItems = history.slice(-1);
-  }
-  return { staticallyRenderedHistoryItems, updatableHistoryItems };
-}
-- 
cgit v1.2.3