From b3d89a10758462947546a7d9be43bf617c0787c6 Mon Sep 17 00:00:00 2001
From: Asad Memon <asad.lionpk@gmail.com>
Date: Sun, 15 Jun 2025 11:15:53 -0700
Subject: feat: Add token stats in footer (#909)

---
 packages/cli/src/ui/components/Footer.tsx | 127 +++++++++++++++++-------------
 1 file changed, 71 insertions(+), 56 deletions(-)

(limited to 'packages/cli/src/ui/components')

diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx
index d051f2b7..779eefcd 100644
--- a/packages/cli/src/ui/components/Footer.tsx
+++ b/packages/cli/src/ui/components/Footer.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { Box, Text } from 'ink';
 import { Colors } from '../colors.js';
-import { shortenPath, tildeifyPath } from '@gemini-cli/core';
+import { shortenPath, tildeifyPath, tokenLimit } from '@gemini-cli/core';
 import { ConsoleSummaryDisplay } from './ConsoleSummaryDisplay.js';
 import process from 'node:process';
 import { MemoryUsageDisplay } from './MemoryUsageDisplay.js';
@@ -22,6 +22,9 @@ interface FooterProps {
   errorCount: number;
   showErrorDetails: boolean;
   showMemoryUsage?: boolean;
+  promptTokenCount: number;
+  candidatesTokenCount: number;
+  totalTokenCount: number;
 }
 
 export const Footer: React.FC<FooterProps> = ({
@@ -34,63 +37,75 @@ export const Footer: React.FC<FooterProps> = ({
   errorCount,
   showErrorDetails,
   showMemoryUsage,
-}) => (
-  <Box marginTop={1} justifyContent="space-between" width="100%">
-    <Box>
-      <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>
+  totalTokenCount,
+}) => {
+  const limit = tokenLimit(model);
+  const percentage = totalTokenCount / limit;
 
-    {/* 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>
+  return (
+    <Box marginTop={1} justifyContent="space-between" width="100%">
+      <Box>
+        <Text color={Colors.LightBlue}>
+          {shortenPath(tildeifyPath(targetDir), 70)}
+          {branchName && <Text color={Colors.Gray}> ({branchName}*)</Text>}
         </Text>
-      ) : (
-        <Text color={Colors.AccentRed}>
-          no sandbox <Text color={Colors.Gray}>(see docs)</Text>
-        </Text>
-      )}
-    </Box>
+        {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>
-      {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>
+      {/* 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>
-      )}
-      {!showErrorDetails && errorCount > 0 && (
-        <Box>
-          <Text color={Colors.Gray}>| </Text>
-          <ConsoleSummaryDisplay errorCount={errorCount} />
-        </Box>
-      )}
-      {showMemoryUsage && <MemoryUsageDisplay />}
+        {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>
-  </Box>
-);
+  );
+};
-- 
cgit v1.2.3