Have /clear clear <Static> content by remounting (#250)

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 (

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();
       },
     },
     {

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,