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 4e79bd4fc89..2b4c554923e 100644 --- a/packages/cli/src/ui/components/StatsDisplay.test.tsx +++ b/packages/cli/src/ui/components/StatsDisplay.test.tsx @@ -76,7 +76,6 @@ describe('', () => { expect(output).toContain('Performance'); expect(output).toContain('Interaction Summary'); - expect(output).not.toContain('Efficiency & Optimizations'); expect(output).toMatchSnapshot(); }); @@ -113,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(); }); @@ -167,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(); }); @@ -232,7 +230,6 @@ describe('', () => { const { lastFrame } = renderWithMockedStats(metrics); const output = lastFrame(); - expect(output).not.toContain('Efficiency & Optimizations'); expect(output).toMatchSnapshot(); }); }); @@ -442,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 5aaaeaef2c8..ab2d7daeca1 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 { @@ -36,8 +38,7 @@ const StatRow: React.FC = ({ title, children }) => ( {title} - {/* FIX: Wrap children in a Box that can grow to fill remaining space */} - {children} + {children} ); @@ -53,8 +54,7 @@ const SubStatRow: React.FC = ({ title, children }) => ( » {title} - {/* FIX: Apply the same flexGrow fix here */} - {children} + {children} ); @@ -84,11 +84,16 @@ const buildModelRows = ( // 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, - inputTokens: metrics.tokens.prompt.toLocaleString(), + cachedTokens: cachedTokens.toLocaleString(), + uncachedTokens: uncachedTokens.toLocaleString(), + totalInputTokens: totalInputTokens.toLocaleString(), outputTokens: metrics.tokens.candidates.toLocaleString(), bucket: quotas?.buckets?.find((b) => b.modelId === modelName), isActive: true, @@ -108,7 +113,9 @@ const buildModelRows = ( key: bucket.modelId!, modelName: bucket.modelId!, requests: '-', - inputTokens: '-', + cachedTokens: '-', + uncachedTokens: '-', + totalInputTokens: '-', outputTokens: '-', bucket, isActive: false, @@ -143,50 +150,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 )} @@ -200,46 +248,77 @@ const ModelUsageTable: React.FC<{ borderLeft={false} borderRight={false} borderColor={theme.border.default} - width={ - nameWidth + - requestsWidth + - inputTokensWidth + - outputTokensWidth + - usageLimitWidth - } + width="100%" > {rows.map((row) => ( - - {row.modelName} + + + {row.modelName} + - + {row.requests} - - - {row.inputTokens} - - - - - {row.outputTokens} - - - + {!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)} @@ -248,17 +327,20 @@ const ModelUsageTable: React.FC<{ ))} - {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 && ( <> @@ -322,6 +404,7 @@ export const StatsDisplay: React.FC = ({ flexDirection="column" paddingY={1} paddingX={2} + overflow="hidden" > {renderTitle()} @@ -393,9 +476,9 @@ export const StatsDisplay: React.FC = ({ ); 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 1e0b3597d3c..e1c8796748f 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,9 +162,9 @@ exports[` > Quota Display > renders quota information for unused │ » Tool Time: 0s (0.0%) │ │ │ │ │ -│ Model Usage Reqs Input Tokens Output Tokens Usage limit remaining │ -│ ───────────────────────────────────────────────────────────────────────────────────────────── │ -│ gemini-2.5-flash - - - 50.0% (Resets in 2h) │ +│ 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. │ @@ -198,11 +192,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. │ @@ -270,19 +262,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\`. │ -│ │ ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯" `; @@ -304,18 +290,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\`. │ -│ │ ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯" `;