From 8e6a565adbec90d2216fbc2e06d10bf9f0c0c1bf Mon Sep 17 00:00:00 2001
From: Pyush Sinha <pyushsinha20@gmail.com>
Date: Thu, 7 Aug 2025 11:16:47 -0700
Subject: [PATCH] fix: re render context usage indicator  (#5102)

---
 .../src/ui/components/ContextUsageDisplay.tsx |  25 +++
 packages/cli/src/ui/components/Footer.tsx     | 158 +++++++++---------
 2 files changed, 102 insertions(+), 81 deletions(-)
 create mode 100644 packages/cli/src/ui/components/ContextUsageDisplay.tsx

diff --git a/packages/cli/src/ui/components/ContextUsageDisplay.tsx b/packages/cli/src/ui/components/ContextUsageDisplay.tsx
new file mode 100644
index 00000000..037be333
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx
index acc55870..14cda5f3 100644
--- a/packages/cli/src/ui/components/Footer.tsx
+++ b/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,85 +43,81 @@ 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 />}
-        {vimMode && <Text color={Colors.Gray}>[{vimMode}] </Text>}
-        {nightly ? (
-          <Gradient colors={Colors.GradientColors}>
-            <Text>
-              {shortenPath(tildeifyPath(targetDir), 70)}
-              {branchName && <Text> ({branchName}*)</Text>}
-            </Text>
-          </Gradient>
-        ) : (
-          <Text color={Colors.LightBlue}>
-            {shortenPath(tildeifyPath(targetDir), 70)}
-            {branchName && <Text color={Colors.Gray}> ({branchName}*)</Text>}
-          </Text>
-        )}
-        {debugMode && (
-          <Text color={Colors.AccentRed}>
-            {' ' + (debugMessage || '--debug')}
-          </Text>
-        )}
-      </Box>
-
-      {/* Middle Section: Centered Sandbox Info */}
-      <Box
-        flexGrow={1}
-        alignItems="center"
-        justifyContent="center"
-        display="flex"
-      >
-        {process.env.SANDBOX && process.env.SANDBOX !== 'sandbox-exec' ? (
-          <Text color="green">
-            {process.env.SANDBOX.replace(/^gemini-(?:cli-)?/, '')}
-          </Text>
-        ) : process.env.SANDBOX === 'sandbox-exec' ? (
-          <Text color={Colors.AccentYellow}>
-            macOS Seatbelt{' '}
-            <Text color={Colors.Gray}>({process.env.SEATBELT_PROFILE})</Text>
-          </Text>
-        ) : (
-          <Text color={Colors.AccentRed}>
-            no sandbox <Text color={Colors.Gray}>(see /docs)</Text>
-          </Text>
-        )}
-      </Box>
-
-      {/* Right Section: Gemini Label and Console Summary */}
-      <Box alignItems="center">
-        <Text color={Colors.AccentBlue}>
-          {' '}
-          {model}{' '}
-          <Text color={Colors.Gray}>
-            ({((1 - percentage) * 100).toFixed(0)}% context left)
-          </Text>
-        </Text>
-        {corgiMode && (
+}) => (
+  <Box justifyContent="space-between" width="100%">
+    <Box>
+      {debugMode && <DebugProfiler />}
+      {vimMode && <Text color={Colors.Gray}>[{vimMode}] </Text>}
+      {nightly ? (
+        <Gradient colors={Colors.GradientColors}>
           <Text>
-            <Text color={Colors.Gray}>| </Text>
-            <Text color={Colors.AccentRed}>▼</Text>
-            <Text color={Colors.Foreground}>(´</Text>
-            <Text color={Colors.AccentRed}>ᴥ</Text>
-            <Text color={Colors.Foreground}>`)</Text>
-            <Text color={Colors.AccentRed}>▼ </Text>
+            {shortenPath(tildeifyPath(targetDir), 70)}
+            {branchName && <Text> ({branchName}*)</Text>}
           </Text>
-        )}
-        {!showErrorDetails && errorCount > 0 && (
-          <Box>
-            <Text color={Colors.Gray}>| </Text>
-            <ConsoleSummaryDisplay errorCount={errorCount} />
-          </Box>
-        )}
-        {showMemoryUsage && <MemoryUsageDisplay />}
-      </Box>
+        </Gradient>
+      ) : (
+        <Text color={Colors.LightBlue}>
+          {shortenPath(tildeifyPath(targetDir), 70)}
+          {branchName && <Text color={Colors.Gray}> ({branchName}*)</Text>}
+        </Text>
+      )}
+      {debugMode && (
+        <Text color={Colors.AccentRed}>
+          {' ' + (debugMessage || '--debug')}
+        </Text>
+      )}
     </Box>
-  );
-};
+
+    {/* Middle Section: Centered Sandbox Info */}
+    <Box
+      flexGrow={1}
+      alignItems="center"
+      justifyContent="center"
+      display="flex"
+    >
+      {process.env.SANDBOX && process.env.SANDBOX !== 'sandbox-exec' ? (
+        <Text color="green">
+          {process.env.SANDBOX.replace(/^gemini-(?:cli-)?/, '')}
+        </Text>
+      ) : process.env.SANDBOX === 'sandbox-exec' ? (
+        <Text color={Colors.AccentYellow}>
+          macOS Seatbelt{' '}
+          <Text color={Colors.Gray}>({process.env.SEATBELT_PROFILE})</Text>
+        </Text>
+      ) : (
+        <Text color={Colors.AccentRed}>
+          no sandbox <Text color={Colors.Gray}>(see /docs)</Text>
+        </Text>
+      )}
+    </Box>
+
+    {/* Right Section: Gemini Label and Console Summary */}
+    <Box alignItems="center">
+      <Text color={Colors.AccentBlue}>
+        {' '}
+        {model}{' '}
+        <ContextUsageDisplay
+          promptTokenCount={promptTokenCount}
+          model={model}
+        />
+      </Text>
+      {corgiMode && (
+        <Text>
+          <Text color={Colors.Gray}>| </Text>
+          <Text color={Colors.AccentRed}>▼</Text>
+          <Text color={Colors.Foreground}>(´</Text>
+          <Text color={Colors.AccentRed}>ᴥ</Text>
+          <Text color={Colors.Foreground}>`)</Text>
+          <Text color={Colors.AccentRed}>▼ </Text>
+        </Text>
+      )}
+      {!showErrorDetails && errorCount > 0 && (
+        <Box>
+          <Text color={Colors.Gray}>| </Text>
+          <ConsoleSummaryDisplay errorCount={errorCount} />
+        </Box>
+      )}
+      {showMemoryUsage && <MemoryUsageDisplay />}
+    </Box>
+  </Box>
+);