feat(cli): polish cached token stats and simplify stats display when quota is present. (#14961)

Author: jacob314

packages/cli/src/ui/components/ModelStatsDisplay.test.tsx

@@ -116,7 +116,7 @@ describe('<ModelStatsDisplay />', () => {
     });
 
     const output = lastFrame();
-    expect(output).not.toContain('Cached');
+    expect(output).not.toContain('Cache Reads');
     expect(output).not.toContain('Thoughts');
     expect(output).not.toContain('Tool');
     expect(output).toMatchSnapshot();
@@ -168,7 +168,7 @@ describe('<ModelStatsDisplay />', () => {
     });
 
     const output = lastFrame();
-    expect(output).toContain('Cached');
+    expect(output).toContain('Cache Reads');
     expect(output).toContain('Thoughts');
     expect(output).toContain('Tool');
     expect(output).toMatchSnapshot();

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

@@ -160,24 +160,28 @@ export const ModelStatsDisplay: React.FC = () => {
       <StatRow
         title="Total"
         values={getModelValues((m) => (
-          <Text color={theme.status.warning}>
+          <Text color={theme.text.secondary}>
             {m.tokens.total.toLocaleString()}
           </Text>
         ))}
       />
       <StatRow
-        title="Prompt"
+        title="Input"
         isSubtle
-        values={getModelValues((m) => m.tokens.prompt.toLocaleString())}
+        values={getModelValues((m) => (
+          <Text color={theme.text.primary}>
+            {Math.max(0, m.tokens.prompt - m.tokens.cached).toLocaleString()}
+          </Text>
+        ))}
       />
       {hasCached && (
         <StatRow
-          title="Cached"
+          title="Cache Reads"
           isSubtle
           values={getModelValues((m) => {
             const cacheHitRate = calculateCacheHitRate(m);
             return (
-              <Text color={theme.status.success}>
+              <Text color={theme.text.secondary}>
                 {m.tokens.cached.toLocaleString()} ({cacheHitRate.toFixed(1)}%)
               </Text>
             );
@@ -188,20 +192,32 @@ export const ModelStatsDisplay: React.FC = () => {
         <StatRow
           title="Thoughts"
           isSubtle
-          values={getModelValues((m) => m.tokens.thoughts.toLocaleString())}
+          values={getModelValues((m) => (
+            <Text color={theme.text.primary}>
+              {m.tokens.thoughts.toLocaleString()}
+            </Text>
+          ))}
         />
       )}
       {hasTool && (
         <StatRow
           title="Tool"
           isSubtle
-          values={getModelValues((m) => m.tokens.tool.toLocaleString())}
+          values={getModelValues((m) => (
+            <Text color={theme.text.primary}>
+              {m.tokens.tool.toLocaleString()}
+            </Text>
+          ))}
         />
       )}
       <StatRow
         title="Output"
         isSubtle
-        values={getModelValues((m) => m.tokens.candidates.toLocaleString())}
+        values={getModelValues((m) => (
+          <Text color={theme.text.primary}>
+            {m.tokens.candidates.toLocaleString()}
+          </Text>
+        ))}
       />
     </Box>
   );

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

@@ -76,7 +76,6 @@ describe('<StatsDisplay />', () => {
 
     expect(output).toContain('Performance');
     expect(output).toContain('Interaction Summary');
-    expect(output).not.toContain('Efficiency & Optimizations');
     expect(output).toMatchSnapshot();
   });
 
@@ -113,8 +112,8 @@ describe('<StatsDisplay />', () => {
 
     expect(output).toContain('gemini-2.5-pro');
     expect(output).toContain('gemini-2.5-flash');
-    expect(output).toContain('1,000');
-    expect(output).toContain('25,000');
+    expect(output).toContain('15,000');
+    expect(output).toContain('10,000');
     expect(output).toMatchSnapshot();
   });
 
@@ -167,7 +166,6 @@ describe('<StatsDisplay />', () => {
     expect(output).toContain('Performance');
     expect(output).toContain('Interaction Summary');
     expect(output).toContain('User Agreement');
-    expect(output).toContain('Savings Highlight');
     expect(output).toContain('gemini-2.5-pro');
     expect(output).toMatchSnapshot();
   });
@@ -232,7 +230,6 @@ describe('<StatsDisplay />', () => {
       const { lastFrame } = renderWithMockedStats(metrics);
       const output = lastFrame();
 
-      expect(output).not.toContain('Efficiency & Optimizations');
       expect(output).toMatchSnapshot();
     });
   });
@@ -442,7 +439,7 @@ describe('<StatsDisplay />', () => {
       );
       const output = lastFrame();
 
-      expect(output).toContain('Usage limit remaining');
+      expect(output).toContain('Usage left');
       expect(output).toContain('75.0%');
       expect(output).toContain('(Resets in 1h 30m)');
       expect(output).toMatchSnapshot();