Add usage limit remaining in /stats (#13843)

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

@@ -19,6 +19,7 @@ import {
   USER_AGREEMENT_RATE_MEDIUM,
 } from '../utils/displayUtils.js';
 import { computeSessionStats } from '../utils/computeStats.js';
+import type { RetrieveUserQuotaResponse } from '@google/gemini-cli-core';
 
 // A more flexible and powerful StatRow component
 interface StatRowProps {
@@ -69,15 +70,41 @@ const Section: React.FC<SectionProps> = ({ title, children }) => (
   </Box>
 );
 
+const formatResetTime = (resetTime: string): string => {
+  const diff = new Date(resetTime).getTime() - Date.now();
+  if (diff <= 0) return '';
+
+  const totalMinutes = Math.ceil(diff / (1000 * 60));
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+
+  const fmt = (val: number, unit: 'hour' | 'minute') =>
+    new Intl.NumberFormat('en', {
+      style: 'unit',
+      unit,
+      unitDisplay: 'narrow',
+    }).format(val);
+
+  if (hours > 0 && minutes > 0) {
+    return `(Resets in ${fmt(hours, 'hour')} ${fmt(minutes, 'minute')})`;
+  } else if (hours > 0) {
+    return `(Resets in ${fmt(hours, 'hour')})`;
+  }
+
+  return `(Resets in ${fmt(minutes, 'minute')})`;
+};
+
 const ModelUsageTable: React.FC<{
   models: Record<string, ModelMetrics>;
   totalCachedTokens: number;
   cacheEfficiency: number;
-}> = ({ models, totalCachedTokens, cacheEfficiency }) => {
+  quotas?: RetrieveUserQuotaResponse;
+}> = ({ models, totalCachedTokens, cacheEfficiency, quotas }) => {
   const nameWidth = 25;
   const requestsWidth = 8;
   const inputTokensWidth = 15;
   const outputTokensWidth = 15;
+  const usageLimitWidth = quotas ? 30 : 0;
 
   return (
     <Box flexDirection="column" marginTop={1}>
@@ -103,6 +130,13 @@ const ModelUsageTable: React.FC<{
             Output Tokens
           </Text>
         </Box>
+        {quotas && (
+          <Box width={usageLimitWidth} justifyContent="flex-end">
+            <Text bold color={theme.text.primary}>
+              Usage limit remaining
+            </Text>
+          </Box>
+        )}
       </Box>
       {/* Divider */}
       <Box
@@ -112,32 +146,53 @@ const ModelUsageTable: React.FC<{
         borderLeft={false}
         borderRight={false}
         borderColor={theme.border.default}
-        width={nameWidth + requestsWidth + inputTokensWidth + outputTokensWidth}
+        width={
+          nameWidth +
+          requestsWidth +
+          inputTokensWidth +
+          outputTokensWidth +
+          usageLimitWidth
+        }
       ></Box>
 
       {/* Rows */}
-      {Object.entries(models).map(([name, modelMetrics]) => (
-        <Box key={name}>
-          <Box width={nameWidth}>
-            <Text color={theme.text.primary}>{name.replace('-001', '')}</Text>
+      {Object.entries(models).map(([name, modelMetrics]) => {
+        const modelName = name.replace('-001', '');
+        const bucket = quotas?.buckets?.find((b) => b.modelId === modelName);
+
+        return (
+          <Box key={name}>
+            <Box width={nameWidth}>
+              <Text color={theme.text.primary}>{modelName}</Text>
+            </Box>
+            <Box width={requestsWidth} justifyContent="flex-end">
+              <Text color={theme.text.primary}>
+                {modelMetrics.api.totalRequests}
+              </Text>
+            </Box>
+            <Box width={inputTokensWidth} justifyContent="flex-end">
+              <Text color={theme.status.warning}>
+                {modelMetrics.tokens.prompt.toLocaleString()}
+              </Text>
+            </Box>
+            <Box width={outputTokensWidth} justifyContent="flex-end">
+              <Text color={theme.status.warning}>
+                {modelMetrics.tokens.candidates.toLocaleString()}
+              </Text>
+            </Box>
+            <Box width={usageLimitWidth} justifyContent="flex-end">
+              {bucket &&
+                bucket.remainingFraction != null &&
+                bucket.resetTime && (
+                  <Text color={theme.text.secondary}>
+                    {(bucket.remainingFraction * 100).toFixed(1)}%{' '}
+                    {formatResetTime(bucket.resetTime)}
+                  </Text>
+                )}
+            </Box>
           </Box>
-          <Box width={requestsWidth} justifyContent="flex-end">
-            <Text color={theme.text.primary}>
-              {modelMetrics.api.totalRequests}
-            </Text>
-          </Box>
-          <Box width={inputTokensWidth} justifyContent="flex-end">
-            <Text color={theme.status.warning}>
-              {modelMetrics.tokens.prompt.toLocaleString()}
-            </Text>
-          </Box>
-          <Box width={outputTokensWidth} justifyContent="flex-end">
-            <Text color={theme.status.warning}>
-              {modelMetrics.tokens.candidates.toLocaleString()}
-            </Text>
-          </Box>
-        </Box>
-      ))}
+        );
+      })}
       {cacheEfficiency > 0 && (
         <Box flexDirection="column" marginTop={1}>
           <Text color={theme.text.primary}>
@@ -145,11 +200,19 @@ const ModelUsageTable: React.FC<{
             {totalCachedTokens.toLocaleString()} ({cacheEfficiency.toFixed(1)}
             %) of input tokens were served from the cache, reducing costs.
           </Text>
-          <Box height={1} />
+        </Box>
+      )}
+      {models && (
+        <>
+          <Box marginTop={1} marginBottom={2}>
+            <Text color={theme.text.primary}>
+              {`Usage limits span all sessions and reset daily.\n/auth to upgrade or switch to API key.`}
+            </Text>
+          </Box>
           <Text color={theme.text.secondary}>
             » Tip: For a full token breakdown, run `/stats model`.
           </Text>
-        </Box>
+        </>
       )}
     </Box>
   );
@@ -158,11 +221,13 @@ const ModelUsageTable: React.FC<{
 interface StatsDisplayProps {
   duration: string;
   title?: string;
+  quotas?: RetrieveUserQuotaResponse;
 }
 
 export const StatsDisplay: React.FC<StatsDisplayProps> = ({
   duration,
   title,
+  quotas,
 }) => {
   const { stats } = useSessionStats();
   const { metrics } = stats;
@@ -276,6 +341,7 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
           models={models}
           totalCachedTokens={computed.totalCachedTokens}
           cacheEfficiency={computed.cacheEfficiency}
+          quotas={quotas}
         />
       )}
     </Box>