diff --git a/packages/cli/src/ui/components/ModelStatsDisplay.test.tsx b/packages/cli/src/ui/components/ModelStatsDisplay.test.tsx index 12493d9846..3095eb210a 100644 --- a/packages/cli/src/ui/components/ModelStatsDisplay.test.tsx +++ b/packages/cli/src/ui/components/ModelStatsDisplay.test.tsx @@ -116,7 +116,7 @@ describe('', () => { }); 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('', () => { }); const output = lastFrame(); - expect(output).toContain('Cached'); + expect(output).toContain('Cache Reads'); expect(output).toContain('Thoughts'); expect(output).toContain('Tool'); expect(output).toMatchSnapshot(); diff --git a/packages/cli/src/ui/components/ModelStatsDisplay.tsx b/packages/cli/src/ui/components/ModelStatsDisplay.tsx index 95a8fe4605..f3a2e98fcc 100644 --- a/packages/cli/src/ui/components/ModelStatsDisplay.tsx +++ b/packages/cli/src/ui/components/ModelStatsDisplay.tsx @@ -160,24 +160,28 @@ export const ModelStatsDisplay: React.FC = () => { ( - + {m.tokens.total.toLocaleString()} ))} /> m.tokens.prompt.toLocaleString())} + values={getModelValues((m) => ( + + {Math.max(0, m.tokens.prompt - m.tokens.cached).toLocaleString()} + + ))} /> {hasCached && ( { const cacheHitRate = calculateCacheHitRate(m); return ( - + {m.tokens.cached.toLocaleString()} ({cacheHitRate.toFixed(1)}%) ); @@ -188,20 +192,32 @@ export const ModelStatsDisplay: React.FC = () => { m.tokens.thoughts.toLocaleString())} + values={getModelValues((m) => ( + + {m.tokens.thoughts.toLocaleString()} + + ))} /> )} {hasTool && ( m.tokens.tool.toLocaleString())} + values={getModelValues((m) => ( + + {m.tokens.tool.toLocaleString()} + + ))} /> )} m.tokens.candidates.toLocaleString())} + values={getModelValues((m) => ( + + {m.tokens.candidates.toLocaleString()} + + ))} /> ); diff --git a/packages/cli/src/ui/components/StatsDisplay.test.tsx b/packages/cli/src/ui/components/StatsDisplay.test.tsx index de6a33caf9..d01b150042 100644 --- a/packages/cli/src/ui/components/StatsDisplay.test.tsx +++ b/packages/cli/src/ui/components/StatsDisplay.test.tsx @@ -76,8 +76,11 @@ describe('', () => { expect(output).toContain('Performance'); expect(output).toContain('Interaction Summary'); +<<<<<<< HEAD expect(output).not.toContain('Efficiency & Optimizations'); expect(output).not.toContain('Model'); // The table header +======= +>>>>>>> 54de67536 (feat(cli): polish cached token stats and simplify stats display when quota is present. (#14961)) expect(output).toMatchSnapshot(); }); @@ -114,8 +117,8 @@ describe('', () => { 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(); }); @@ -168,7 +171,6 @@ describe('', () => { 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(); }); @@ -233,7 +235,6 @@ describe('', () => { const { lastFrame } = renderWithMockedStats(metrics); const output = lastFrame(); - expect(output).not.toContain('Efficiency & Optimizations'); expect(output).toMatchSnapshot(); }); }); @@ -443,7 +444,7 @@ describe('', () => { ); 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(); diff --git a/packages/cli/src/ui/components/StatsDisplay.tsx b/packages/cli/src/ui/components/StatsDisplay.tsx index 7290640ba6..5413b63cff 100644 --- a/packages/cli/src/ui/components/StatsDisplay.tsx +++ b/packages/cli/src/ui/components/StatsDisplay.tsx @@ -17,6 +17,8 @@ import { TOOL_SUCCESS_RATE_MEDIUM, USER_AGREEMENT_RATE_HIGH, USER_AGREEMENT_RATE_MEDIUM, + CACHE_EFFICIENCY_HIGH, + CACHE_EFFICIENCY_MEDIUM, } from '../utils/displayUtils.js'; import { computeSessionStats } from '../utils/computeStats.js'; import type { RetrieveUserQuotaResponse } from '@google/gemini-cli-core'; @@ -33,8 +35,7 @@ const StatRow: React.FC = ({ title, children }) => ( {title} - {/* FIX: Wrap children in a Box that can grow to fill remaining space */} - {children} + {children} ); @@ -50,8 +51,7 @@ const SubStatRow: React.FC = ({ title, children }) => ( » {title} - {/* FIX: Apply the same flexGrow fix here */} - {children} + {children} ); @@ -70,6 +70,60 @@ const Section: React.FC = ({ title, children }) => ( ); +<<<<<<< HEAD +======= +// Logic for building the unified list of table rows +const buildModelRows = ( + models: Record, + quotas?: RetrieveUserQuotaResponse, +) => { + const getBaseModelName = (name: string) => name.replace('-001', ''); + const usedModelNames = new Set(Object.keys(models).map(getBaseModelName)); + + // 1. Models with active usage + const activeRows = Object.entries(models).map(([name, metrics]) => { + const modelName = getBaseModelName(name); + const cachedTokens = metrics.tokens.cached; + const totalInputTokens = metrics.tokens.prompt; + const uncachedTokens = Math.max(0, totalInputTokens - cachedTokens); + return { + key: name, + modelName, + requests: metrics.api.totalRequests, + cachedTokens: cachedTokens.toLocaleString(), + uncachedTokens: uncachedTokens.toLocaleString(), + totalInputTokens: totalInputTokens.toLocaleString(), + outputTokens: metrics.tokens.candidates.toLocaleString(), + bucket: quotas?.buckets?.find((b) => b.modelId === modelName), + isActive: true, + }; + }); + + // 2. Models with quota only + const quotaRows = + quotas?.buckets + ?.filter( + (b) => + b.modelId && + VALID_GEMINI_MODELS.has(b.modelId) && + !usedModelNames.has(b.modelId), + ) + .map((bucket) => ({ + key: bucket.modelId!, + modelName: bucket.modelId!, + requests: '-', + cachedTokens: '-', + uncachedTokens: '-', + totalInputTokens: '-', + outputTokens: '-', + bucket, + isActive: false, + })) || []; + + return [...activeRows, ...quotaRows]; +}; + +>>>>>>> 54de67536 (feat(cli): polish cached token stats and simplify stats display when quota is present. (#14961)) const formatResetTime = (resetTime: string): string => { const diff = new Date(resetTime).getTime() - Date.now(); if (diff <= 0) return ''; @@ -96,44 +150,95 @@ const formatResetTime = (resetTime: string): string => { const ModelUsageTable: React.FC<{ models: Record; - totalCachedTokens: number; - cacheEfficiency: number; quotas?: RetrieveUserQuotaResponse; +<<<<<<< HEAD }> = ({ models, totalCachedTokens, cacheEfficiency, quotas }) => { +======= + cacheEfficiency: number; + totalCachedTokens: number; +}> = ({ models, quotas, cacheEfficiency, totalCachedTokens }) => { + const rows = buildModelRows(models, quotas); + + if (rows.length === 0) { + return null; + } + + const showQuotaColumn = !!quotas && rows.some((row) => !!row.bucket); + +>>>>>>> 54de67536 (feat(cli): polish cached token stats and simplify stats display when quota is present. (#14961)) const nameWidth = 25; - const requestsWidth = 8; - const inputTokensWidth = 15; + const requestsWidth = 7; + const uncachedWidth = 15; + const cachedWidth = 14; const outputTokensWidth = 15; - const usageLimitWidth = quotas ? 30 : 0; + const usageLimitWidth = showQuotaColumn ? 28 : 0; + + const cacheEfficiencyColor = getStatusColor(cacheEfficiency, { + green: CACHE_EFFICIENCY_HIGH, + yellow: CACHE_EFFICIENCY_MEDIUM, + }); return ( {/* Header */} - - - + + + Model Usage - + Reqs - - - Input Tokens - - - - - Output Tokens - - - {quotas && ( - + {!showQuotaColumn && ( + <> + + + Input Tokens + + + + + Cache Reads + + + + + Output Tokens + + + + )} + {showQuotaColumn && ( + - Usage limit remaining + Usage left )} @@ -146,15 +251,10 @@ const ModelUsageTable: React.FC<{ borderLeft={false} borderRight={false} borderColor={theme.border.default} - width={ - nameWidth + - requestsWidth + - inputTokensWidth + - outputTokensWidth + - usageLimitWidth - } + width="100%" > +<<<<<<< HEAD {/* Rows */} {Object.entries(models).map(([name, modelMetrics]) => { const modelName = name.replace('-001', ''); @@ -194,15 +294,102 @@ const ModelUsageTable: React.FC<{ ); })} {cacheEfficiency > 0 && ( +======= + {rows.map((row) => ( + + + + {row.modelName} + + + + + {row.requests} + + + {!showQuotaColumn && ( + <> + + + {row.uncachedTokens} + + + + {row.cachedTokens} + + + + {row.outputTokens} + + + + )} + + {row.bucket && + row.bucket.remainingFraction != null && + row.bucket.resetTime && ( + + {(row.bucket.remainingFraction * 100).toFixed(1)}%{' '} + {formatResetTime(row.bucket.resetTime)} + + )} + + + ))} + + {cacheEfficiency > 0 && !showQuotaColumn && ( +>>>>>>> 54de67536 (feat(cli): polish cached token stats and simplify stats display when quota is present. (#14961)) Savings Highlight:{' '} - {totalCachedTokens.toLocaleString()} ({cacheEfficiency.toFixed(1)} - %) of input tokens were served from the cache, reducing costs. + {totalCachedTokens.toLocaleString()} ( + + {cacheEfficiency.toFixed(1)}% + + ) of input tokens were served from the cache, reducing costs. )} +<<<<<<< HEAD {models && ( +======= + + {showQuotaColumn && ( +>>>>>>> 54de67536 (feat(cli): polish cached token stats and simplify stats display when quota is present. (#14961)) <> @@ -266,6 +453,7 @@ export const StatsDisplay: React.FC = ({ flexDirection="column" paddingY={1} paddingX={2} + overflow="hidden" > {renderTitle()} @@ -335,6 +523,7 @@ export const StatsDisplay: React.FC = ({ +<<<<<<< HEAD {Object.keys(models).length > 0 && ( = ({ quotas={quotas} /> )} +======= + +>>>>>>> 54de67536 (feat(cli): polish cached token stats and simplify stats display when quota is present. (#14961)) ); }; diff --git a/packages/cli/src/ui/components/__snapshots__/ModelStatsDisplay.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/ModelStatsDisplay.test.tsx.snap index efc0862b5d..6199b9b7de 100644 --- a/packages/cli/src/ui/components/__snapshots__/ModelStatsDisplay.test.tsx.snap +++ b/packages/cli/src/ui/components/__snapshots__/ModelStatsDisplay.test.tsx.snap @@ -14,8 +14,8 @@ exports[` > should display a single model correctly 1`] = ` │ │ │ Tokens │ │ Total 30 │ -│ ↳ Prompt 10 │ -│ ↳ Cached 5 (50.0%) │ +│ ↳ Input 5 │ +│ ↳ Cache Reads 5 (50.0%) │ │ ↳ Thoughts 2 │ │ ↳ Tool 1 │ │ ↳ Output 20 │ @@ -37,8 +37,8 @@ exports[` > should display conditional rows if at least one │ │ │ Tokens │ │ Total 30 15 │ -│ ↳ Prompt 10 5 │ -│ ↳ Cached 5 (50.0%) 0 (0.0%) │ +│ ↳ Input 5 5 │ +│ ↳ Cache Reads 5 (50.0%) 0 (0.0%) │ │ ↳ Thoughts 2 0 │ │ ↳ Tool 0 3 │ │ ↳ Output 20 10 │ @@ -60,8 +60,8 @@ exports[` > should display stats for multiple models correc │ │ │ Tokens │ │ Total 300 600 │ -│ ↳ Prompt 100 200 │ -│ ↳ Cached 50 (50.0%) 100 (50.0%) │ +│ ↳ Input 50 100 │ +│ ↳ Cache Reads 50 (50.0%) 100 (50.0%) │ │ ↳ Thoughts 10 20 │ │ ↳ Tool 5 10 │ │ ↳ Output 200 400 │ @@ -83,8 +83,8 @@ exports[` > should handle large values without wrapping or │ │ │ Tokens │ │ Total 999,999,999 │ -│ ↳ Prompt 987,654,321 │ -│ ↳ Cached 123,456,789 (12.5%) │ +│ ↳ Input 864,197,532 │ +│ ↳ Cache Reads 123,456,789 (12.5%) │ │ ↳ Thoughts 111,111,111 │ │ ↳ Tool 222,222,222 │ │ ↳ Output 123,456,789 │ @@ -106,7 +106,7 @@ exports[` > should not display conditional rows if no model │ │ │ Tokens │ │ Total 30 │ -│ ↳ Prompt 10 │ +│ ↳ Input 10 │ │ ↳ Output 20 │ │ │ ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯" diff --git a/packages/cli/src/ui/components/__snapshots__/SessionSummaryDisplay.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/SessionSummaryDisplay.test.tsx.snap index c71c770df4..a3ccf7d1ab 100644 --- a/packages/cli/src/ui/components/__snapshots__/SessionSummaryDisplay.test.tsx.snap +++ b/packages/cli/src/ui/components/__snapshots__/SessionSummaryDisplay.test.tsx.snap @@ -18,17 +18,11 @@ exports[` > renders the summary display with a title 1` │ » Tool Time: 0s (0.0%) │ │ │ │ │ -│ Model Usage Reqs Input Tokens Output Tokens │ -│ ─────────────────────────────────────────────────────────────── │ -│ gemini-2.5-pro 10 1,000 2,000 │ +│ Model Usage Reqs Input Tokens Cache Reads Output Tokens │ +│ ────────────────────────────────────────────────────────────────────────────────────────────── │ +│ gemini-2.5-pro 10 500 500 2,000 │ │ │ │ Savings Highlight: 500 (50.0%) of input tokens were served from the cache, reducing costs. │ │ │ -│ Usage limits span all sessions and reset daily. │ -│ /auth to upgrade or switch to API key. │ -│ │ -│ │ -│ » Tip: For a full token breakdown, run \`/stats model\`. │ -│ │ ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯" `; diff --git a/packages/cli/src/ui/components/__snapshots__/StatsDisplay.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/StatsDisplay.test.tsx.snap index ded84b667f..63b091724f 100644 --- a/packages/cli/src/ui/components/__snapshots__/StatsDisplay.test.tsx.snap +++ b/packages/cli/src/ui/components/__snapshots__/StatsDisplay.test.tsx.snap @@ -118,15 +118,9 @@ exports[` > Conditional Rendering Tests > hides Efficiency secti │ » Tool Time: 0s (0.0%) │ │ │ │ │ -│ Model Usage Reqs Input Tokens Output Tokens │ -│ ─────────────────────────────────────────────────────────────── │ -│ gemini-2.5-pro 1 100 100 │ -│ │ -│ Usage limits span all sessions and reset daily. │ -│ /auth to upgrade or switch to API key. │ -│ │ -│ │ -│ » Tip: For a full token breakdown, run \`/stats model\`. │ +│ Model Usage Reqs Input Tokens Cache Reads Output Tokens │ +│ ────────────────────────────────────────────────────────────────────────────────────────────── │ +│ gemini-2.5-pro 1 100 0 100 │ │ │ ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯" `; @@ -151,6 +145,39 @@ exports[` > Conditional Rendering Tests > hides User Agreement w ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯" `; +<<<<<<< HEAD +======= +exports[` > Quota Display > renders quota information for unused models 1`] = ` +"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮ +│ │ +│ Session Stats │ +│ │ +│ Interaction Summary │ +│ Session ID: test-session-id │ +│ Tool Calls: 0 ( ✓ 0 x 0 ) │ +│ Success Rate: 0.0% │ +│ │ +│ Performance │ +│ Wall Time: 1s │ +│ Agent Active: 0s │ +│ » API Time: 0s (0.0%) │ +│ » Tool Time: 0s (0.0%) │ +│ │ +│ │ +│ Model Usage Reqs Usage left │ +│ ────────────────────────────────────────────────────────────────────────────────────────────── │ +│ gemini-2.5-flash - 50.0% (Resets in 2h) │ +│ │ +│ Usage limits span all sessions and reset daily. │ +│ /auth to upgrade or switch to API key. │ +│ │ +│ │ +│ » Tip: For a full token breakdown, run \`/stats model\`. │ +│ │ +╰──────────────────────────────────────────────────────────────────────────────────────────────────╯" +`; + +>>>>>>> 54de67536 (feat(cli): polish cached token stats and simplify stats display when quota is present. (#14961)) exports[` > Quota Display > renders quota information when quotas are provided 1`] = ` "╭──────────────────────────────────────────────────────────────────────────────────────────────────╮ │ │ @@ -168,11 +195,9 @@ exports[` > Quota Display > renders quota information when quota │ » Tool Time: 0s (0.0%) │ │ │ │ │ -│ Model Usage Reqs Input Tokens Output Tokens Usage limit remaining │ -│ ───────────────────────────────────────────────────────────────────────────────────────────── │ -│ gemini-2.5-pro 1 100 100 75.0% (Resets in 1h 30m) │ -│ │ -│ Savings Highlight: 50 (50.0%) of input tokens were served from the cache, reducing costs. │ +│ Model Usage Reqs Usage left │ +│ ────────────────────────────────────────────────────────────────────────────────────────────── │ +│ gemini-2.5-pro 1 75.0% (Resets in 1h 30m) │ │ │ │ Usage limits span all sessions and reset daily. │ │ /auth to upgrade or switch to API key. │ @@ -240,19 +265,13 @@ exports[` > renders a table with two models correctly 1`] = ` │ » Tool Time: 0s (0.0%) │ │ │ │ │ -│ Model Usage Reqs Input Tokens Output Tokens │ -│ ─────────────────────────────────────────────────────────────── │ -│ gemini-2.5-pro 3 1,000 2,000 │ -│ gemini-2.5-flash 5 25,000 15,000 │ +│ Model Usage Reqs Input Tokens Cache Reads Output Tokens │ +│ ────────────────────────────────────────────────────────────────────────────────────────────── │ +│ gemini-2.5-pro 3 500 500 2,000 │ +│ gemini-2.5-flash 5 15,000 10,000 15,000 │ │ │ │ Savings Highlight: 10,500 (40.4%) of input tokens were served from the cache, reducing costs. │ │ │ -│ Usage limits span all sessions and reset daily. │ -│ /auth to upgrade or switch to API key. │ -│ │ -│ │ -│ » Tip: For a full token breakdown, run \`/stats model\`. │ -│ │ ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯" `; @@ -274,18 +293,12 @@ exports[` > renders all sections when all data is present 1`] = │ » Tool Time: 123ms (55.2%) │ │ │ │ │ -│ Model Usage Reqs Input Tokens Output Tokens │ -│ ─────────────────────────────────────────────────────────────── │ -│ gemini-2.5-pro 1 100 100 │ +│ Model Usage Reqs Input Tokens Cache Reads Output Tokens │ +│ ────────────────────────────────────────────────────────────────────────────────────────────── │ +│ gemini-2.5-pro 1 50 50 100 │ │ │ │ Savings Highlight: 50 (50.0%) of input tokens were served from the cache, reducing costs. │ │ │ -│ Usage limits span all sessions and reset daily. │ -│ /auth to upgrade or switch to API key. │ -│ │ -│ │ -│ » Tip: For a full token breakdown, run \`/stats model\`. │ -│ │ ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯" `;