feat(ui): show richer gemini quota details

This commit is contained in:
Tam Nhu Tran
2026-04-03 19:43:34 -04:00
parent a762d8dda0
commit 4c44042375
3 changed files with 151 additions and 7 deletions
@@ -37,6 +37,23 @@ function formatPlanLabel(planType: string | null | undefined): string | null {
return normalized.length > 0 ? normalized.join(' ') : planType;
}
function formatAbsoluteResetTime(resetTime: string | null): string | null {
if (!resetTime) return null;
try {
const parsed = new Date(resetTime);
if (Number.isNaN(parsed.getTime())) return null;
return parsed.toLocaleString(undefined, {
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
hour12: false,
});
} catch {
return null;
}
}
function getClaudeWindowDisplayLabel(rateLimitType: string, fallback: string): string {
switch (rateLimitType) {
case 'five_hour':
@@ -235,19 +252,45 @@ export function QuotaTooltipContent({ quota, resetTime }: QuotaTooltipContentPro
// Gemini provider tooltip
if (isGeminiQuotaResult(quota)) {
const hasBucketResetTime = quota.buckets.some((bucket) => !!bucket.resetTime);
return (
<div className="text-xs space-y-1">
{quota.tierLabel && (
<div className="flex justify-between gap-4">
<span className="text-muted-foreground">Tier</span>
<span className="font-mono">{quota.tierLabel}</span>
</div>
)}
{quota.creditBalance !== null && quota.creditBalance !== undefined && (
<div className="flex justify-between gap-4">
<span className="text-muted-foreground">Credits</span>
<span className="font-mono">{quota.creditBalance.toLocaleString()}</span>
</div>
)}
<p className="font-medium">Buckets:</p>
{quota.buckets.map((b) => (
<div key={b.id} className="flex justify-between gap-4">
<span className={cn(b.remainingPercent < 20 && 'text-red-500')}>
{b.label}
{b.tokenType ? ` (${b.tokenType})` : ''}
</span>
<span className="font-mono">{b.remainingPercent}%</span>
<div key={b.id} className="space-y-0.5">
<div className="flex justify-between gap-4">
<span className={cn(b.remainingPercent < 20 && 'text-red-500')}>
{b.label}
{b.tokenType ? ` (${b.tokenType})` : ''}
</span>
<span className="font-mono">{b.remainingPercent}%</span>
</div>
{((b.remainingAmount !== null && b.remainingAmount !== undefined) || b.resetTime) && (
<div className="flex justify-between gap-4 text-[11px] text-muted-foreground">
<span>
{b.remainingAmount !== null && b.remainingAmount !== undefined
? `${b.remainingAmount.toLocaleString()} remaining`
: ''}
</span>
<span>{formatAbsoluteResetTime(b.resetTime) ?? ''}</span>
</div>
)}
</div>
))}
<ResetTimeIndicator resetTime={resetTime} />
{!hasBucketResetTime && <ResetTimeIndicator resetTime={resetTime} />}
</div>
);
}
+8
View File
@@ -611,6 +611,8 @@ export interface GeminiCliBucket {
remainingFraction: number;
/** Remaining quota as percentage (0-100) */
remainingPercent: number;
/** Remaining quota count when the upstream API provides it */
remainingAmount?: number | null;
/** ISO timestamp when quota resets, null if unknown */
resetTime: string | null;
/** Model IDs in this bucket */
@@ -625,6 +627,12 @@ export interface GeminiCliQuotaResult {
buckets: GeminiCliBucket[];
/** GCP project ID for this account */
projectId: string | null;
/** Human-readable Gemini tier label when available */
tierLabel?: string | null;
/** Stable Gemini tier identifier when available */
tierId?: string | null;
/** Available Google One AI credits when reported by the API */
creditBalance?: number | null;
/** Timestamp of fetch */
lastUpdated: number;
/** Upstream HTTP status when available */
@@ -0,0 +1,93 @@
import { render, screen } from '@tests/setup/test-utils';
import { describe, expect, it, vi } from 'vitest';
import { QuotaTooltipContent } from '@/components/shared/quota-tooltip-content';
import type { GeminiCliQuotaResult } from '@/lib/api-client';
function createGeminiQuotaResult(
overrides: Partial<GeminiCliQuotaResult> = {}
): GeminiCliQuotaResult {
return {
success: true,
buckets: [
{
id: 'gemini-flash-lite-series::combined',
label: 'Gemini Flash Lite Series',
tokenType: null,
remainingFraction: 1,
remainingPercent: 100,
remainingAmount: 100,
resetTime: '2026-01-30T09:00:00Z',
modelIds: ['gemini-2.5-flash-lite'],
},
{
id: 'gemini-flash-series::combined',
label: 'Gemini Flash Series',
tokenType: null,
remainingFraction: 0.82,
remainingPercent: 82,
remainingAmount: 82,
resetTime: '2026-01-30T14:00:00Z',
modelIds: ['gemini-3-flash-preview'],
},
],
projectId: 'cloudaicompanion-test-123',
tierLabel: 'Pro',
tierId: 'g1-pro-tier',
creditBalance: 12,
lastUpdated: Date.now(),
...overrides,
};
}
describe('QuotaTooltipContent', () => {
it('renders Gemini tier, credits, remaining amount, and bucket reset timestamps', () => {
const quota = createGeminiQuotaResult();
const expectedReset = new Date('2026-01-30T14:00:00Z').toLocaleString(undefined, {
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
hour12: false,
});
render(<QuotaTooltipContent quota={quota} resetTime={quota.buckets[0].resetTime} />);
expect(screen.getByText('Tier')).toBeInTheDocument();
expect(screen.getByText('Pro')).toBeInTheDocument();
expect(screen.getByText('Credits')).toBeInTheDocument();
expect(screen.getByText('12')).toBeInTheDocument();
expect(screen.getByText('Gemini Flash Lite Series')).toBeInTheDocument();
expect(screen.getByText('100 remaining')).toBeInTheDocument();
expect(screen.getByText('82 remaining')).toBeInTheDocument();
expect(screen.getByText(expectedReset)).toBeInTheDocument();
});
it('falls back to the shared reset indicator when Gemini buckets omit reset timestamps', () => {
vi.useFakeTimers();
vi.setSystemTime(new Date('2026-01-29T00:00:00Z'));
const quota = createGeminiQuotaResult({
buckets: [
{
id: 'gemini-flash-series::combined',
label: 'Gemini Flash Series',
tokenType: null,
remainingFraction: 0.75,
remainingPercent: 75,
remainingAmount: 75,
resetTime: null,
modelIds: ['gemini-3-flash-preview'],
},
],
creditBalance: null,
tierLabel: null,
tierId: null,
});
render(<QuotaTooltipContent quota={quota} resetTime="2026-01-29T03:00:00Z" />);
expect(screen.getByText(/Resets/i)).toBeInTheDocument();
vi.useRealTimers();
});
});