tiennm99/ccs
1
0
Fork 0
mirror of https://github.com/tiennm99/ccs.git synced 2026-07-16 12:15:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): show min Claude quota instead of avg all models

Browse Source 
Main quota bar now displays minimum of Claude model quotas rather
than averaging all models. Accurately reflects primary constraint.

Changes:
- Add getMinClaudeQuota() utility in utils.ts (DRY)
- Apply fix to both account-card.tsx and account-item.tsx
- Add comprehensive test suite (23 tests covering edge cases)

Before: 99% (avg of Claude 95% + Gemini 100%...)
After: 95% (min of Claude models)
This commit is contained in:
kaitranntt
2026-01-01 14:44:30 -05:00
parent 0f33b7e34d
commit a011908b3c
5 changed files with 273 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/account/flow-viz/account-card.tsx
+16 -12
View File
@@ -2,7 +2,13 @@
* Account Card Component for Flow Visualization
*/
import { cn, sortModelsByPriority, formatResetTime, getEarliestResetTime } from '@/lib/utils';
import {
cn,
sortModelsByPriority,
formatResetTime,
getEarliestResetTime,
getMinClaudeQuota,
} from '@/lib/utils';
import { PRIVACY_BLUR_CLASS } from '@/contexts/privacy-context';
import { GripVertical, Loader2, Clock } from 'lucide-react';
import { useAccountQuota } from '@/hooks/use-cliproxy-stats';
@@ -83,10 +89,8 @@ export function AccountCard({
account.id,
isAgy
);
const avgQuota =
quota?.success && quota.models.length > 0
? Math.round(quota.models.reduce((sum, m) => sum + m.percentage, 0) / quota.models.length)
: null;
// Show minimum quota of Claude models (primary), fallback to min of all models
const minQuota = quota?.success ? getMinClaudeQuota(quota.models) : null;
return (
<div
@@ -136,7 +140,7 @@ export function AccountCard({
<Loader2 className="w-2.5 h-2.5 animate-spin" />
<span>Quota...</span>
</div>
) : avgQuota !== null ? (
) : minQuota !== null ? (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
@@ -148,27 +152,27 @@ export function AccountCard({
<span
className={cn(
'text-[10px] font-mono font-bold',
avgQuota > 50
minQuota > 50
? 'text-emerald-600 dark:text-emerald-400'
: avgQuota > 20
: minQuota > 20
? 'text-amber-500'
: 'text-red-500'
)}
>
{avgQuota}%
{minQuota}%
</span>
</div>
<div className="w-full bg-muted dark:bg-zinc-800/50 h-1 rounded-full overflow-hidden">
<div
className={cn(
'h-full rounded-full transition-all',
avgQuota > 50
minQuota > 50
? 'bg-emerald-500'
: avgQuota > 20
: minQuota > 20
? 'bg-amber-500'
: 'bg-red-500'
)}
style={{ width: `${avgQuota}%` }}
style={{ width: `${minQuota}%` }}
/>
</div>
</div>
ui/src/components/cliproxy/provider-editor/account-item.tsx
+13 -10
View File
@@ -23,7 +23,13 @@ import {
CheckCircle2,
HelpCircle,
} from 'lucide-react';
import { cn, sortModelsByPriority, formatResetTime, getEarliestResetTime } from '@/lib/utils';
import {
cn,
sortModelsByPriority,
formatResetTime,
getEarliestResetTime,
getMinClaudeQuota,
} from '@/lib/utils';
import { PRIVACY_BLUR_CLASS } from '@/contexts/privacy-context';
import { useAccountQuota, useCliproxyStats } from '@/hooks/use-cliproxy-stats';
import type { AccountItemProps } from './types';
@@ -98,11 +104,8 @@ export function AccountItem({
const runtimeLastUsed = stats?.accountStats?.[account.email || account.id]?.lastUsedAt;
const wasRecentlyUsed = isRecentlyUsed(runtimeLastUsed);
// Calculate average quota across all models
const avgQuota =
quota?.success && quota.models.length > 0
? Math.round(quota.models.reduce((sum, m) => sum + m.percentage, 0) / quota.models.length)
: null;
// Show minimum quota of Claude models (primary), fallback to min of all models
const minQuota = quota?.success ? getMinClaudeQuota(quota.models) : null;
// Get earliest reset time
const nextReset =
@@ -179,7 +182,7 @@ export function AccountItem({
<Loader2 className="w-3 h-3 animate-spin" />
<span>Loading quota...</span>
</div>
) : avgQuota !== null ? (
) : minQuota !== null ? (
<div className="space-y-1.5">
{/* Status indicator based on runtime usage, not file state */}
<div className="flex items-center gap-1.5 text-xs">
@@ -210,11 +213,11 @@ export function AccountItem({
<TooltipTrigger asChild>
<div className="flex items-center gap-2">
<Progress
value={avgQuota}
value={minQuota}
className="h-2 flex-1"
indicatorClassName={getQuotaColor(avgQuota)}
indicatorClassName={getQuotaColor(minQuota)}
/>
<span className="text-xs font-medium w-10 text-right">{avgQuota}%</span>
<span className="text-xs font-medium w-10 text-right">{minQuota}%</span>
</div>
</TooltipTrigger>
<TooltipContent side="bottom" className="max-w-xs">
ui/src/components/ui/badge.tsx
+2 -1
View File
@@ -23,7 +23,8 @@ const badgeVariants = cva(
);
interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}
function Badge({ className, variant, ...props }: BadgeProps) {
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
ui/src/lib/utils.ts
+24
View File
@@ -116,3 +116,27 @@ export function getEarliestResetTime<T extends { resetTime: string | null }>(
null as string | null
);
}
/**
* Calculate the minimum quota percentage from Claude models (primary usage).
* Falls back to minimum of all models if no Claude models exist.
* Returns null if no valid models or quota data.
*/
export function getMinClaudeQuota<
T extends { name: string; displayName?: string; percentage: number },
>(models: T[]): number | null {
if (models.length === 0) return null;
const claudeModels = models.filter((m) => {
const name = (m.displayName || m.name || '').toLowerCase();
return name.includes('claude');
});
const targetModels = claudeModels.length > 0 ? claudeModels : models;
const percentages = targetModels
.map((m) => m.percentage)
.filter((p) => typeof p === 'number' && isFinite(p));
if (percentages.length === 0) return null;
return Math.min(...percentages);
}
ui/tests/unit/ui/lib/quota-utils.test.ts
+218
View File
@@ -0,0 +1,218 @@
/**
* Tests for quota utility functions
*/
import { describe, it, expect } from 'vitest';
import { getMinClaudeQuota, sortModelsByPriority, getEarliestResetTime } from '@/lib/utils';
describe('getMinClaudeQuota', () => {
describe('basic functionality', () => {
it('returns null for empty models array', () => {
expect(getMinClaudeQuota([])).toBeNull();
});
it('returns minimum of Claude models when present', () => {
const models = [
{ name: 'claude-opus-4', displayName: 'Claude Opus 4', percentage: 95 },
{ name: 'claude-sonnet-4', displayName: 'Claude Sonnet 4', percentage: 90 },
{ name: 'gemini-2.5-flash', displayName: 'Gemini 2.5 Flash', percentage: 100 },
];
expect(getMinClaudeQuota(models)).toBe(90);
});
it('falls back to minimum of all models when no Claude models', () => {
const models = [
{ name: 'gemini-2.5-flash', displayName: 'Gemini 2.5 Flash', percentage: 100 },
{ name: 'gemini-3-pro', displayName: 'Gemini 3 Pro', percentage: 98 },
];
expect(getMinClaudeQuota(models)).toBe(98);
});
it('handles single Claude model', () => {
const models = [{ name: 'claude-opus-4', displayName: 'Claude Opus 4', percentage: 85 }];
expect(getMinClaudeQuota(models)).toBe(85);
});
});
describe('Claude detection', () => {
it('detects Claude from displayName', () => {
const models = [
{ name: 'model-abc', displayName: 'Claude Opus 4.5', percentage: 75 },
{ name: 'gemini-flash', displayName: 'Gemini Flash', percentage: 100 },
];
expect(getMinClaudeQuota(models)).toBe(75);
});
it('detects Claude from name when displayName is missing', () => {
const models = [
{ name: 'claude-sonnet-4-thinking', percentage: 80 },
{ name: 'gemini-2.5-flash', percentage: 100 },
];
expect(getMinClaudeQuota(models)).toBe(80);
});
it('is case-insensitive for Claude detection', () => {
const models = [
{ name: 'CLAUDE-OPUS', displayName: 'CLAUDE OPUS', percentage: 70 },
{ name: 'gemini', displayName: 'Gemini', percentage: 100 },
];
expect(getMinClaudeQuota(models)).toBe(70);
});
});
describe('edge cases', () => {
it('handles models with 0% quota', () => {
const models = [
{ name: 'claude-opus', displayName: 'Claude Opus', percentage: 0 },
{ name: 'claude-sonnet', displayName: 'Claude Sonnet', percentage: 50 },
];
expect(getMinClaudeQuota(models)).toBe(0);
});
it('handles models with 100% quota', () => {
const models = [{ name: 'claude-opus', displayName: 'Claude Opus', percentage: 100 }];
expect(getMinClaudeQuota(models)).toBe(100);
});
it('handles undefined displayName gracefully', () => {
const models = [{ name: 'claude-opus', displayName: undefined, percentage: 85 }];
expect(getMinClaudeQuota(models)).toBe(85);
});
it('handles empty string displayName', () => {
const models = [{ name: 'claude-opus', displayName: '', percentage: 85 }];
expect(getMinClaudeQuota(models)).toBe(85);
});
it('filters out NaN percentages', () => {
const models = [
{ name: 'claude-opus', displayName: 'Claude Opus', percentage: NaN },
{ name: 'claude-sonnet', displayName: 'Claude Sonnet', percentage: 80 },
];
expect(getMinClaudeQuota(models)).toBe(80);
});
it('filters out Infinity percentages', () => {
const models = [
{ name: 'claude-opus', displayName: 'Claude Opus', percentage: Infinity },
{ name: 'claude-sonnet', displayName: 'Claude Sonnet', percentage: 75 },
];
expect(getMinClaudeQuota(models)).toBe(75);
});
it('returns null when all percentages are invalid', () => {
const models = [
{ name: 'claude-opus', displayName: 'Claude Opus', percentage: NaN },
{ name: 'claude-sonnet', displayName: 'Claude Sonnet', percentage: Infinity },
];
expect(getMinClaudeQuota(models)).toBeNull();
});
});
describe('real-world scenarios', () => {
it('matches screenshot scenario - Claude 95%, Gemini 100%', () => {
const models = [
{
name: 'claude-opus-4-5-thinking',
displayName: 'Claude Opus 4.5 (Thinking)',
percentage: 95,
},
{ name: 'claude-sonnet-4-5', displayName: 'Claude Sonnet 4.5', percentage: 95 },
{
name: 'claude-sonnet-4-5-thinking',
displayName: 'Claude Sonnet 4.5 (Thinking)',
percentage: 95,
},
{ name: 'gemini-2-5-flash', displayName: 'Gemini 2.5 Flash', percentage: 100 },
{
name: 'gemini-2-5-flash-thinking',
displayName: 'Gemini 2.5 Flash (Thinking)',
percentage: 100,
},
{ name: 'gemini-2-5-flash-lite', displayName: 'Gemini 2.5 Flash Lite', percentage: 100 },
{ name: 'gemini-2-5-pro', displayName: 'Gemini 2.5 Pro', percentage: 100 },
{ name: 'gemini-3-flash', displayName: 'Gemini 3 Flash', percentage: 98 },
{ name: 'gemini-3-pro-high', displayName: 'Gemini 3 Pro (High)', percentage: 100 },
{ name: 'gemini-3-pro-low', displayName: 'Gemini 3 Pro (Low)', percentage: 100 },
{ name: 'gpt-oss-120b', displayName: 'GPT-OSS 120B (Medium)', percentage: 95 },
];
// Should return 95 (min of Claude), not 99 (avg of all)
expect(getMinClaudeQuota(models)).toBe(95);
});
it('handles mixed Claude percentages', () => {
const models = [
{ name: 'claude-opus-4', displayName: 'Claude Opus 4', percentage: 80 },
{ name: 'claude-sonnet-4', displayName: 'Claude Sonnet 4', percentage: 95 },
{ name: 'claude-haiku-3', displayName: 'Claude Haiku 3', percentage: 100 },
{ name: 'gemini-flash', displayName: 'Gemini Flash', percentage: 100 },
];
expect(getMinClaudeQuota(models)).toBe(80);
});
});
});
describe('sortModelsByPriority', () => {
it('sorts Claude models first', () => {
const models = [
{ name: 'gemini-flash', displayName: 'Gemini Flash' },
{ name: 'claude-opus', displayName: 'Claude Opus' },
{ name: 'gpt-4', displayName: 'GPT-4' },
];
const sorted = sortModelsByPriority(models);
expect(sorted[0].name).toBe('claude-opus');
expect(sorted[1].name).toBe('gemini-flash');
expect(sorted[2].name).toBe('gpt-4');
});
it('sorts alphabetically within same priority', () => {
const models = [
{ name: 'claude-sonnet', displayName: 'Claude Sonnet' },
{ name: 'claude-opus', displayName: 'Claude Opus' },
{ name: 'claude-haiku', displayName: 'Claude Haiku' },
];
const sorted = sortModelsByPriority(models);
expect(sorted[0].displayName).toBe('Claude Haiku');
expect(sorted[1].displayName).toBe('Claude Opus');
expect(sorted[2].displayName).toBe('Claude Sonnet');
});
it('does not mutate original array', () => {
const models = [
{ name: 'gemini-flash', displayName: 'Gemini Flash' },
{ name: 'claude-opus', displayName: 'Claude Opus' },
];
const original = [...models];
sortModelsByPriority(models);
expect(models).toEqual(original);
});
});
describe('getEarliestResetTime', () => {
it('returns null for empty array', () => {
expect(getEarliestResetTime([])).toBeNull();
});
it('returns null when all resetTime are null', () => {
const models = [{ resetTime: null }, { resetTime: null }];
expect(getEarliestResetTime(models)).toBeNull();
});
it('returns earliest reset time', () => {
const models = [
{ resetTime: '2026-01-01T16:00:00Z' },
{ resetTime: '2026-01-01T14:00:00Z' },
{ resetTime: '2026-01-01T18:00:00Z' },
];
expect(getEarliestResetTime(models)).toBe('2026-01-01T14:00:00Z');
});
it('handles mixed null and valid reset times', () => {
const models = [
{ resetTime: null },
{ resetTime: '2026-01-01T14:00:00Z' },
{ resetTime: null },
];
expect(getEarliestResetTime(models)).toBe('2026-01-01T14:00:00Z');
});
});