fix: re render context usage indicator (#5102)

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

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Text } from 'ink';
+import { Colors } from '../colors.js';
+import { tokenLimit } from '@google/gemini-cli-core';
+
+export const ContextUsageDisplay = ({
+  promptTokenCount,
+  model,
+}: {
+  promptTokenCount: number;
+  model: string;
+}) => {
+  const percentage = promptTokenCount / tokenLimit(model);
+
+  return (
+    <Text color={Colors.Gray}>
+      ({((1 - percentage) * 100).toFixed(0)}% context left)
+    </Text>
+  );
+};

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

@@ -7,12 +7,12 @@
 import React from 'react';
 import { Box, Text } from 'ink';
 import { Colors } from '../colors.js';
-import { shortenPath, tildeifyPath, tokenLimit } from '@google/gemini-cli-core';
+import { shortenPath, tildeifyPath } from '@google/gemini-cli-core';
 import { ConsoleSummaryDisplay } from './ConsoleSummaryDisplay.js';
 import process from 'node:process';
 import Gradient from 'ink-gradient';
 import { MemoryUsageDisplay } from './MemoryUsageDisplay.js';
-
+import { ContextUsageDisplay } from './ContextUsageDisplay.js';
 import { DebugProfiler } from './DebugProfiler.js';
 
 interface FooterProps {
@@ -43,11 +43,7 @@ export const Footer: React.FC<FooterProps> = ({
   promptTokenCount,
   nightly,
   vimMode,
-}) => {
-  const limit = tokenLimit(model);
-  const percentage = promptTokenCount / limit;
-
-  return (
+}) => (
   <Box justifyContent="space-between" width="100%">
     <Box>
       {debugMode && <DebugProfiler />}
@@ -100,9 +96,10 @@ export const Footer: React.FC<FooterProps> = ({
       <Text color={Colors.AccentBlue}>
         {' '}
         {model}{' '}
-          <Text color={Colors.Gray}>
-            ({((1 - percentage) * 100).toFixed(0)}% context left)
-          </Text>
+        <ContextUsageDisplay
+          promptTokenCount={promptTokenCount}
+          model={model}
+        />
       </Text>
       {corgiMode && (
         <Text>
@@ -123,5 +120,4 @@ export const Footer: React.FC<FooterProps> = ({
       {showMemoryUsage && <MemoryUsageDisplay />}
     </Box>
   </Box>
-  );
-};
+);