From 8f8082fe3da9e1972f8b8226c68fa14e326a3d8a Mon Sep 17 00:00:00 2001
From: Arya Gummadi <aryagummadi@google.com>
Date: Mon, 18 Aug 2025 22:57:53 -0700
Subject: feat: add file change tracking to session metrics (#6094)

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Jacob Richman <jacob314@gmail.com>
---
 packages/cli/src/ui/components/StatsDisplay.tsx | 47 ++++++++++++++++---------
 1 file changed, 30 insertions(+), 17 deletions(-)

(limited to 'packages/cli/src/ui/components/StatsDisplay.tsx')

diff --git a/packages/cli/src/ui/components/StatsDisplay.tsx b/packages/cli/src/ui/components/StatsDisplay.tsx
index 71c88aef..8dd00efd 100644
--- a/packages/cli/src/ui/components/StatsDisplay.tsx
+++ b/packages/cli/src/ui/components/StatsDisplay.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { Box, Text } from 'ink';
 import Gradient from 'ink-gradient';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import { formatDuration } from '../utils/formatters.js';
 import { useSessionStats, ModelMetrics } from '../contexts/SessionContext.js';
 import {
@@ -29,7 +29,7 @@ const StatRow: React.FC<StatRowProps> = ({ title, children }) => (
   <Box>
     {/* Fixed width for the label creates a clean "gutter" for alignment */}
     <Box width={28}>
-      <Text color={Colors.LightBlue}>{title}</Text>
+      <Text color={theme.text.link}>{title}</Text>
     </Box>
     {children}
   </Box>
@@ -111,12 +111,12 @@ const ModelUsageTable: React.FC<{
             <Text>{modelMetrics.api.totalRequests}</Text>
           </Box>
           <Box width={inputTokensWidth} justifyContent="flex-end">
-            <Text color={Colors.AccentYellow}>
+            <Text color={theme.status.warning}>
               {modelMetrics.tokens.prompt.toLocaleString()}
             </Text>
           </Box>
           <Box width={outputTokensWidth} justifyContent="flex-end">
-            <Text color={Colors.AccentYellow}>
+            <Text color={theme.status.warning}>
               {modelMetrics.tokens.candidates.toLocaleString()}
             </Text>
           </Box>
@@ -125,12 +125,12 @@ const ModelUsageTable: React.FC<{
       {cacheEfficiency > 0 && (
         <Box flexDirection="column" marginTop={1}>
           <Text>
-            <Text color={Colors.AccentGreen}>Savings Highlight:</Text>{' '}
+            <Text color={theme.status.success}>Savings Highlight:</Text>{' '}
             {totalCachedTokens.toLocaleString()} ({cacheEfficiency.toFixed(1)}
             %) of input tokens were served from the cache, reducing costs.
           </Text>
           <Box height={1} />
-          <Text color={Colors.Gray}>
+          <Text color={theme.text.secondary}>
             » Tip: For a full token breakdown, run `/stats model`.
           </Text>
         </Box>
@@ -150,7 +150,7 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
 }) => {
   const { stats } = useSessionStats();
   const { metrics } = stats;
-  const { models, tools } = metrics;
+  const { models, tools, files } = metrics;
   const computed = computeSessionStats(metrics);
 
   const successThresholds = {
@@ -169,18 +169,18 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
 
   const renderTitle = () => {
     if (title) {
-      return Colors.GradientColors && Colors.GradientColors.length > 0 ? (
-        <Gradient colors={Colors.GradientColors}>
+      return theme.ui.gradient && theme.ui.gradient.length > 0 ? (
+        <Gradient colors={theme.ui.gradient}>
           <Text bold>{title}</Text>
         </Gradient>
       ) : (
-        <Text bold color={Colors.AccentPurple}>
+        <Text bold color={theme.text.accent}>
           {title}
         </Text>
       );
     }
     return (
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         Session Stats
       </Text>
     );
@@ -189,7 +189,7 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
   return (
     <Box
       borderStyle="round"
-      borderColor={Colors.Gray}
+      borderColor={theme.border.default}
       flexDirection="column"
       paddingY={1}
       paddingX={2}
@@ -204,8 +204,8 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
         <StatRow title="Tool Calls:">
           <Text>
             {tools.totalCalls} ({' '}
-            <Text color={Colors.AccentGreen}>✔ {tools.totalSuccess}</Text>{' '}
-            <Text color={Colors.AccentRed}>✖ {tools.totalFail}</Text> )
+            <Text color={theme.status.success}>✔ {tools.totalSuccess}</Text>{' '}
+            <Text color={theme.status.error}>✖ {tools.totalFail}</Text> )
           </Text>
         </StatRow>
         <StatRow title="Success Rate:">
@@ -215,12 +215,25 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
           <StatRow title="User Agreement:">
             <Text color={agreementColor}>
               {computed.agreementRate.toFixed(1)}%{' '}
-              <Text color={Colors.Gray}>
+              <Text color={theme.text.secondary}>
                 ({computed.totalDecisions} reviewed)
               </Text>
             </Text>
           </StatRow>
         )}
+        {files &&
+          (files.totalLinesAdded > 0 || files.totalLinesRemoved > 0) && (
+            <StatRow title="Code Changes:">
+              <Text>
+                <Text color={theme.status.success}>
+                  +{files.totalLinesAdded}
+                </Text>{' '}
+                <Text color={theme.status.error}>
+                  -{files.totalLinesRemoved}
+                </Text>
+              </Text>
+            </StatRow>
+          )}
       </Section>
 
       <Section title="Performance">
@@ -233,7 +246,7 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
         <SubStatRow title="API Time:">
           <Text>
             {formatDuration(computed.totalApiTime)}{' '}
-            <Text color={Colors.Gray}>
+            <Text color={theme.text.secondary}>
               ({computed.apiTimePercent.toFixed(1)}%)
             </Text>
           </Text>
@@ -241,7 +254,7 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
         <SubStatRow title="Tool Time:">
           <Text>
             {formatDuration(computed.totalToolTime)}{' '}
-            <Text color={Colors.Gray}>
+            <Text color={theme.text.secondary}>
               ({computed.toolTimePercent.toFixed(1)}%)
             </Text>
           </Text>
-- 
cgit v1.2.3