diff --git a/packages/cli/src/ui/components/ModelStatsDisplay.test.tsx b/packages/cli/src/ui/components/ModelStatsDisplay.test.tsx index 12493d98460..3095eb210a5 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 95a8fe46055..f3a2e98fcc3 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 de6a33caf94..8bc8e86be46 100644 --- a/packages/cli/src/ui/components/StatsDisplay.test.tsx +++ b/packages/cli/src/ui/components/StatsDisplay.test.tsx @@ -76,8 +76,6 @@ describe('', () => { expect(output).toContain('Performance'); expect(output).toContain('Interaction Summary'); - expect(output).not.toContain('Efficiency & Optimizations'); - expect(output).not.toContain('Model'); // The table header expect(output).toMatchSnapshot(); }); @@ -114,8 +112,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 +166,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 +230,6 @@ describe('', () => { const { lastFrame } = renderWithMockedStats(metrics); const output = lastFrame(); - expect(output).not.toContain('Efficiency & Optimizations'); expect(output).toMatchSnapshot(); }); }); @@ -443,7 +439,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 7290640ba68..64b28a78bfd 100644 --- a/packages/cli/src/ui/components/StatsDisplay.tsx +++ b/packages/cli/src/ui/components/StatsDisplay.tsx @@ -17,9 +17,24 @@ 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'; +import { + DEFAULT_GEMINI_FLASH_LITE_MODEL, + DEFAULT_GEMINI_FLASH_MODEL, + DEFAULT_GEMINI_MODEL, + PREVIEW_GEMINI_MODEL, +} from '@google/gemini-cli-core'; + +const VALID_GEMINI_MODELS = new Set([ + PREVIEW_GEMINI_MODEL, + DEFAULT_GEMINI_MODEL, + DEFAULT_GEMINI_FLASH_MODEL, + DEFAULT_GEMINI_FLASH_LITE_MODEL, +]); // A more flexible and powerful StatRow component interface StatRowProps { @@ -33,8 +48,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 +64,7 @@ const SubStatRow: React.FC = ({ title, children }) => ( » {title} - {/* FIX: Apply the same flexGrow fix here */} - {children} + {children} ); @@ -70,6 +83,57 @@ const Section: React.FC = ({ title, children }) => ( ); +// 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]; +}; + const formatResetTime = (resetTime: string): string => { const diff = new Date(resetTime).getTime() - Date.now(); if (diff <= 0) return ''; @@ -96,44 +160,91 @@ const formatResetTime = (resetTime: string): string => { const ModelUsageTable: React.FC<{ models: Record; - totalCachedTokens: number; - cacheEfficiency: number; quotas?: RetrieveUserQuotaResponse; -}> = ({ 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); + 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,63 +257,99 @@ const ModelUsageTable: React.FC<{ borderLeft={false} borderRight={false} borderColor={theme.border.default} - width={ - nameWidth + - requestsWidth + - inputTokensWidth + - outputTokensWidth + - usageLimitWidth - } + width="100%" > - {/* Rows */} - {Object.entries(models).map(([name, modelMetrics]) => { - const modelName = name.replace('-001', ''); - const bucket = quotas?.buckets?.find((b) => b.modelId === modelName); - - return ( - - - {modelName} - - - - {modelMetrics.api.totalRequests} - - - - - {modelMetrics.tokens.prompt.toLocaleString()} - - - - - {modelMetrics.tokens.candidates.toLocaleString()} - - - - {bucket && - bucket.remainingFraction != null && - bucket.resetTime && ( - - {(bucket.remainingFraction * 100).toFixed(1)}%{' '} - {formatResetTime(bucket.resetTime)} - - )} - + {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 && ( + + ))} + + {cacheEfficiency > 0 && !showQuotaColumn && ( 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. )} - {models && ( + + {showQuotaColumn && ( <> @@ -266,6 +413,7 @@ export const StatsDisplay: React.FC = ({ flexDirection="column" paddingY={1} paddingX={2} + overflow="hidden" > {renderTitle()} @@ -335,15 +483,12 @@ export const StatsDisplay: React.FC = ({ - - {Object.keys(models).length > 0 && ( - - )} + ); }; 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 efc0862b5dc..6199b9b7de0 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 c71c770df49..a3ccf7d1abc 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 ded84b667f8..9428f67b8b4 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 │ │ │ ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯" `; @@ -168,11 +162,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 +232,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 +260,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\`. │ -│ │ ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯" `;