From a0bed3e7169eb6ce89b283b4c1dc0107e3851572 Mon Sep 17 00:00:00 2001
From: Seth Troisi <sethtroisi@google.com>
Date: Mon, 5 May 2025 17:52:29 +0000
Subject: [PATCH] Have /clear clear <Static> content by remounting (#250)

---
 packages/cli/src/ui/App.tsx                        | 14 +++++++++++---
 packages/cli/src/ui/hooks/slashCommandProcessor.ts |  2 ++
 packages/cli/src/ui/hooks/useGeminiStream.ts       |  2 ++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/cli/src/ui/App.tsx b/packages/cli/src/ui/App.tsx
index 194a18cf..e116c524 100644
--- a/packages/cli/src/ui/App.tsx
+++ b/packages/cli/src/ui/App.tsx
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { Box, Static, Text, useStdout } from 'ink';
 import { StreamingState, type HistoryItem } from './types.js';
 import { useGeminiStream } from './hooks/useGeminiStream.js';
@@ -44,13 +44,18 @@ export const App = ({ config, settings, cliVersion }: AppProps) => {
     handleThemeHighlight,
   } = useThemeCommand(settings);
 
+  const [staticKey, setStaticKey] = useState(0);
+  const refreshStatic = useCallback(() => {
+    setStaticKey((prev) => prev + 1);
+  }, [setStaticKey]);
+
   const {
     streamingState,
     submitQuery,
     initError,
     debugMessage,
     slashCommands,
-  } = useGeminiStream(setHistory, config, openThemeDialog);
+  } = useGeminiStream(setHistory, refreshStatic, config, openThemeDialog);
   const { elapsedTime, currentLoadingPhrase } =
     useLoadingIndicator(streamingState);
 
@@ -124,7 +129,10 @@ 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 items={['header', ...staticallyRenderedHistoryItems]}>
+      <Static
+        key={'static-key-' + staticKey}
+        items={['header', ...staticallyRenderedHistoryItems]}
+      >
         {(item, index) => {
           if (item === 'header') {
             return (
diff --git a/packages/cli/src/ui/hooks/slashCommandProcessor.ts b/packages/cli/src/ui/hooks/slashCommandProcessor.ts
index 89649810..5e10a245 100644
--- a/packages/cli/src/ui/hooks/slashCommandProcessor.ts
+++ b/packages/cli/src/ui/hooks/slashCommandProcessor.ts
@@ -28,6 +28,7 @@ const addHistoryItem = (
 
 export const useSlashCommandProcessor = (
   setHistory: React.Dispatch<React.SetStateAction<HistoryItem[]>>,
+  refreshStatic: () => void,
   setDebugMessage: React.Dispatch<React.SetStateAction<string>>,
   getNextMessageId: (baseTimestamp: number) => number,
   openThemeDialog: () => void,
@@ -55,6 +56,7 @@ export const useSlashCommandProcessor = (
         // This just clears the *UI* history, not the model history.
         setDebugMessage('Clearing terminal.');
         setHistory((_) => []);
+        refreshStatic();
       },
     },
     {
diff --git a/packages/cli/src/ui/hooks/useGeminiStream.ts b/packages/cli/src/ui/hooks/useGeminiStream.ts
index bd2b617c..52675145 100644
--- a/packages/cli/src/ui/hooks/useGeminiStream.ts
+++ b/packages/cli/src/ui/hooks/useGeminiStream.ts
@@ -48,6 +48,7 @@ const addHistoryItem = (
 // Hook now accepts apiKey and model
 export const useGeminiStream = (
   setHistory: React.Dispatch<React.SetStateAction<HistoryItem[]>>,
+  refreshStatic: () => void,
   config: Config,
   openThemeDialog: () => void,
 ) => {
@@ -73,6 +74,7 @@ export const useGeminiStream = (
   // Instantiate command processors
   const { handleSlashCommand, slashCommands } = useSlashCommandProcessor(
     setHistory,
+    refreshStatic,
     setDebugMessage,
     getNextMessageId,
     openThemeDialog,