Remove flex from stats display. See snapshots for diffs. (#14983)

This commit is contained in:
Jacob Richman
2025-12-12 12:19:39 -08:00
committed by GitHub
parent 20164ebcda
commit 6dea66f1f5
3 changed files with 30 additions and 23 deletions
@@ -65,7 +65,7 @@ interface SectionProps {
}
const Section: React.FC<SectionProps> = ({ title, children }) => (
<Box flexDirection="column" width="100%" marginBottom={1}>
<Box flexDirection="column" marginBottom={1}>
<Text bold color={theme.text.primary}>
{title}
</Text>
@@ -174,11 +174,18 @@ const ModelUsageTable: React.FC<{
yellow: CACHE_EFFICIENCY_MEDIUM,
});
const totalWidth =
nameWidth +
requestsWidth +
(showQuotaColumn
? usageLimitWidth
: uncachedWidth + cachedWidth + outputTokensWidth);
return (
<Box flexDirection="column" marginTop={1}>
{/* Header */}
<Box alignItems="flex-end">
<Box width={nameWidth} flexGrow={1}>
<Box width={nameWidth}>
<Text bold color={theme.text.primary} wrap="truncate-end">
Model Usage
</Text>
@@ -248,12 +255,12 @@ const ModelUsageTable: React.FC<{
borderLeft={false}
borderRight={false}
borderColor={theme.border.default}
width="100%"
width={totalWidth}
></Box>
{rows.map((row) => (
<Box key={row.key}>
<Box width={nameWidth} flexGrow={1}>
<Box width={nameWidth}>
<Text color={theme.text.primary} wrap="truncate-end">
{row.modelName}
</Text>
@@ -19,7 +19,7 @@ exports[`<SessionSummaryDisplay /> > renders the summary display with a title 1`
│ │
│ │
│ 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. │
@@ -119,7 +119,7 @@ exports[`<StatsDisplay /> > Conditional Rendering Tests > hides Efficiency secti
│ │
│ │
│ Model Usage Reqs Input Tokens Cache Reads Output Tokens │
│ ──────────────────────────────────────────────────────────────────────────────────────────────
│ ────────────────────────────────────────────────────────────────────────────
│ gemini-2.5-pro 1 100 0 100 │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
@@ -163,7 +163,7 @@ exports[`<StatsDisplay /> > Quota Display > renders quota information for unused
│ │
│ │
│ Model Usage Reqs Usage left │
│ ──────────────────────────────────────────────────────────────────────────────────────────────
│ ────────────────────────────────────────────────────────────
│ gemini-2.5-flash - 50.0% (Resets in 2h) │
│ │
│ Usage limits span all sessions and reset daily. │
@@ -193,7 +193,7 @@ exports[`<StatsDisplay /> > Quota Display > renders quota information when quota
│ │
│ │
│ Model Usage Reqs Usage left │
│ ──────────────────────────────────────────────────────────────────────────────────────────────
│ ────────────────────────────────────────────────────────────
│ gemini-2.5-pro 1 75.0% (Resets in 1h 30m) │
│ │
│ Usage limits span all sessions and reset daily. │
@@ -263,7 +263,7 @@ exports[`<StatsDisplay /> > renders a table with two models correctly 1`] = `
│ │
│ │
│ 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 │
│ │
@@ -291,7 +291,7 @@ exports[`<StatsDisplay /> > renders all sections when all data is present 1`] =
│ │
│ │
│ 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. │