BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add usage prediction and pace to usage dropdown and settings (#372)

Browse Source
This commit is contained in:
gsxdsm
2026-02-09 17:32:41 +02:00
committed by GitHub
parent 3fff7a1475
commit 5deb851a75
9 changed files with 553 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/layout/Header.tsx
+105 -46
View File
@@ -30,11 +30,13 @@ import { cn, getModifierLabel, hasModifier } from '@/lib/utils';
import { useDiffFileCount } from '@/components/views/DiffView';
import { McpDropdown, McpDropdownContent } from '@/components/mcp/McpDropdown';
import { ProviderLogo } from '@/components/ui/ProviderLogo';
import { formatPercent, formatWindowLabel, QUOTA_PROVIDERS } from '@/lib/quota';
import { formatPercent, formatWindowLabel, QUOTA_PROVIDERS, calculatePace, calculateExpectedUsagePercent } from '@/lib/quota';
import { UsageProgressBar } from '@/components/sections/usage/UsageProgressBar';
import { PaceIndicator } from '@/components/sections/usage/PaceIndicator';
import { updateDesktopSettings } from '@/lib/persistence';
import {
getAllModelFamilies,
getDisplayModelName,
groupModelsByFamily,
sortModelFamilies,
} from '@/lib/quota/model-families';
@@ -216,6 +218,7 @@ export const Header: React.FC = () => {
providerId: string;
providerName: string;
entries: Array<[string, UsageWindow]>;
error?: string;
modelFamilies?: Array<{
familyId: string | null;
familyLabel: string;
@@ -239,14 +242,15 @@ export const Header: React.FC = () => {
providerId: provider.id,
providerName: provider.name,
entries,
error: (result && !result.ok && result.configured) ? result.error : undefined,
};
// Add model families if provider has per-model quotas
if (models && Object.keys(models).length > 0) {
const providerSelectedModels = selectedModels[provider.id] ?? [];
// hasExplicitSelection = true means user touched the selection (even if empty)
// hasExplicitSelection = false means no preference (key missing) → show all by default
const hasExplicitSelection = provider.id in selectedModels;
// hasExplicitSelection = true means user has selected specific models to show
// If the array exists but is empty, treat as "show all" (user cleared selection)
const hasExplicitSelection = providerSelectedModels.length > 0;
const modelGroups = groupModelsByFamily(models, provider.id);
const families = getAllModelFamilies(provider.id);
const sortedFamilies = sortModelFamilies(families);
@@ -310,7 +314,7 @@ export const Header: React.FC = () => {
}
}
if (entries.length > 0 || (group.modelFamilies && group.modelFamilies.length > 0)) {
if (entries.length > 0 || (group.modelFamilies && group.modelFamilies.length > 0) || group.error) {
groups.push(group);
}
}
@@ -826,7 +830,10 @@ export const Header: React.FC = () => {
<p>Instance / Usage / MCP</p>
</TooltipContent>
</Tooltip>
<DropdownMenuContent align="end" className="w-[min(30rem,calc(100vw-2rem))] max-h-[75vh] overflow-y-auto p-0">
<DropdownMenuContent
align="end"
className="w-[min(30rem,calc(100vw-2rem))] max-h-[75vh] overflow-y-auto bg-[var(--surface-elevated)] p-0"
>
<div className="sticky top-0 z-20 border-b border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-2">
<AnimatedTabs<'instance' | 'usage' | 'mcp'>
value={desktopServicesTab}
@@ -856,7 +863,7 @@ export const Header: React.FC = () => {
{desktopServicesTab === 'usage' && (
<div className="overflow-x-hidden">
<div className="sticky top-0 z-20 bg-[var(--surface-elevated)] border-b border-[var(--interactive-border)]">
<div className="bg-[var(--surface-elevated)] border-b border-[var(--interactive-border)]">
<DropdownMenuLabel className="flex items-center justify-between gap-3 py-2.5">
<div className="flex min-w-0 items-center gap-2">
<span className="typography-ui-header font-semibold text-foreground">Rate limits</span>
@@ -901,7 +908,7 @@ export const Header: React.FC = () => {
return (
<React.Fragment key={group.providerId}>
<DropdownMenuLabel className="sticky top-[44px] z-10 flex items-center gap-2 bg-[var(--surface-elevated)] typography-ui-label text-foreground">
<DropdownMenuLabel className="flex items-center gap-2 border-b border-[var(--interactive-border)] bg-[var(--surface-elevated)] typography-ui-label text-foreground">
<ProviderLogo providerId={group.providerId} className="h-4 w-4" />
{group.providerName}
</DropdownMenuLabel>
@@ -912,23 +919,27 @@ export const Header: React.FC = () => {
className="cursor-default hover:bg-transparent focus:bg-transparent data-[highlighted]:bg-transparent"
onSelect={(event) => event.preventDefault()}
>
<span className="typography-ui-label text-muted-foreground">No rate limits reported.</span>
<span className="typography-ui-label text-muted-foreground">
{group.error ?? 'No rate limits reported.'}
</span>
</DropdownMenuItem>
) : (
<>
{group.entries.map(([label, window]) => (
{group.entries.map(([label, window]) => {
const displayPercent = quotaDisplayMode === 'remaining'
? window.remainingPercent
: window.usedPercent;
const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds, label);
const expectedMarker = paceInfo?.dailyAllocationPercent != null
? calculateExpectedUsagePercent(paceInfo.elapsedRatio)
: null;
return (
<DropdownMenuItem
key={`${group.providerId}-${label}`}
className="cursor-default items-start hover:bg-transparent focus:bg-transparent data-[highlighted]:bg-transparent"
onSelect={(event) => event.preventDefault()}
>
<span className="flex min-w-0 flex-1 flex-col gap-2">
{(() => {
const displayPercent = quotaDisplayMode === 'remaining'
? window.remainingPercent
: window.usedPercent;
return (
<>
<span className="flex min-w-0 items-center justify-between gap-3">
<span className="min-w-0 flex items-center gap-2">
<span className="truncate typography-ui-label text-foreground">{formatWindowLabel(label)}</span>
@@ -942,13 +953,21 @@ export const Header: React.FC = () => {
{formatPercent(displayPercent) === '-' ? '' : formatPercent(displayPercent)}
</span>
</span>
<UsageProgressBar percent={displayPercent} tonePercent={window.usedPercent} className="h-1.5 mb-1.5" />
</>
);
})()}
<UsageProgressBar
percent={displayPercent}
tonePercent={window.usedPercent}
className="h-1.5"
expectedMarkerPercent={expectedMarker}
/>
{paceInfo && (
<div className="mb-1">
<PaceIndicator paceInfo={paceInfo} compact />
</div>
)}
</span>
</DropdownMenuItem>
))}
);
})}
{group.modelFamilies && group.modelFamilies.length > 0 && (
<div className="px-2 py-1">
@@ -973,36 +992,42 @@ export const Header: React.FC = () => {
</CollapsibleTrigger>
<CollapsibleContent>
<div className="space-y-1 pl-2">
{family.models.map(([modelName, window]) => (
{family.models.map(([modelName, window]) => {
const displayPercent = quotaDisplayMode === 'remaining'
? window.remainingPercent
: window.usedPercent;
// For model-level quotas, use '5h' as typical window label for Google models
const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds, '5h');
const expectedMarker = paceInfo?.dailyAllocationPercent != null
? calculateExpectedUsagePercent(paceInfo.elapsedRatio)
: null;
return (
<div
key={`${group.providerId}-${modelName}`}
className="py-1.5"
>
<div className="flex min-w-0 flex-col gap-1.5">
<span className="flex min-w-0 items-center justify-between gap-3">
<span className="truncate typography-micro text-muted-foreground">{modelName}</span>
{(() => {
const displayPercent = quotaDisplayMode === 'remaining'
? window.remainingPercent
: window.usedPercent;
return (
<span className="typography-ui-label text-foreground tabular-nums">
{formatPercent(displayPercent) === '-' ? '' : formatPercent(displayPercent)}
</span>
);
})()}
<span className="truncate typography-micro text-muted-foreground">{getDisplayModelName(modelName)}</span>
<span className="typography-ui-label text-foreground tabular-nums">
{formatPercent(displayPercent) === '-' ? '' : formatPercent(displayPercent)}
</span>
</span>
{(() => {
const displayPercent = quotaDisplayMode === 'remaining'
? window.remainingPercent
: window.usedPercent;
return (
<UsageProgressBar percent={displayPercent} tonePercent={window.usedPercent} className="h-1.5 mb-1.5" />
);
})()}
<UsageProgressBar
percent={displayPercent}
tonePercent={window.usedPercent}
className="h-1.5"
expectedMarkerPercent={expectedMarker}
/>
{paceInfo && (
<div className="mb-1">
<PaceIndicator paceInfo={paceInfo} compact />
</div>
)}
</div>
</div>
))}
);
})}
</div>
</CollapsibleContent>
</Collapsible>
@@ -1360,14 +1385,23 @@ export const Header: React.FC = () => {
)}
{rateLimitGroups.map((group) => (
<React.Fragment key={group.providerId}>
<div className="sticky top-0 z-10 flex items-center gap-2 bg-[var(--surface-elevated)] px-3 py-2">
<div className="flex items-center gap-2 bg-[var(--surface-elevated)] px-3 py-2">
<ProviderLogo providerId={group.providerId} className="h-4 w-4" />
<span className="typography-ui-label text-foreground">{group.providerName}</span>
</div>
{group.entries.length === 0 && (!group.modelFamilies || group.modelFamilies.length === 0) && (
<div className="px-3 py-2 typography-ui-label text-muted-foreground">
{group.error ?? 'No rate limits reported.'}
</div>
)}
{group.entries.map(([label, window]) => {
const displayPercent = quotaDisplayMode === 'remaining'
? window.remainingPercent
: window.usedPercent;
const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds, label);
const expectedMarker = paceInfo?.dailyAllocationPercent != null
? calculateExpectedUsagePercent(paceInfo.elapsedRatio)
: null;
return (
<div key={`${group.providerId}-${label}`} className="px-3 py-2">
<div className="flex items-center justify-between gap-3">
@@ -1378,7 +1412,17 @@ export const Header: React.FC = () => {
{formatPercent(displayPercent)}
</span>
</div>
<UsageProgressBar percent={displayPercent} tonePercent={window.usedPercent} className="mt-2 h-1" />
<UsageProgressBar
percent={displayPercent}
tonePercent={window.usedPercent}
className="mt-2 h-1"
expectedMarkerPercent={expectedMarker}
/>
{paceInfo && (
<div className="mt-1.5">
<PaceIndicator paceInfo={paceInfo} compact />
</div>
)}
<div className="mt-1 typography-micro text-muted-foreground text-[10px]">
{window.resetAfterFormatted ?? window.resetAtFormatted ?? ''}
</div>
@@ -1414,17 +1458,32 @@ export const Header: React.FC = () => {
const displayPercent = quotaDisplayMode === 'remaining'
? window.remainingPercent
: window.usedPercent;
// For model-level quotas, use '5h' as typical window label for Google models
const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds, '5h');
const expectedMarker = paceInfo?.dailyAllocationPercent != null
? calculateExpectedUsagePercent(paceInfo.elapsedRatio)
: null;
return (
<div key={`${group.providerId}-${modelName}`} className="py-1.5">
<div className="flex items-center justify-between gap-3">
<span className="truncate typography-micro text-muted-foreground">
{modelName}
{getDisplayModelName(modelName)}
</span>
<span className="typography-ui-label text-foreground tabular-nums">
{formatPercent(displayPercent) === '-' ? '' : formatPercent(displayPercent)}
</span>
</div>
<UsageProgressBar percent={displayPercent} tonePercent={window.usedPercent} className="mt-1.5 h-1" />
<UsageProgressBar
percent={displayPercent}
tonePercent={window.usedPercent}
className="mt-1.5 h-1"
expectedMarkerPercent={expectedMarker}
/>
{paceInfo && (
<div className="mt-1">
<PaceIndicator paceInfo={paceInfo} compact />
</div>
)}
</div>
);
})}
packages/ui/src/components/layout/VSCodeLayout.tsx
+40 -22
View File
@@ -17,7 +17,8 @@ import {
import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
import { ProviderLogo } from '@/components/ui/ProviderLogo';
import { UsageProgressBar } from '@/components/sections/usage/UsageProgressBar';
import { formatPercent, formatWindowLabel, QUOTA_PROVIDERS } from '@/lib/quota';
import { PaceIndicator } from '@/components/sections/usage/PaceIndicator';
import { formatPercent, formatWindowLabel, QUOTA_PROVIDERS, calculatePace, calculateExpectedUsagePercent } from '@/lib/quota';
import { useQuotaAutoRefresh, useQuotaStore } from '@/stores/useQuotaStore';
import { updateDesktopSettings } from '@/lib/persistence';
import type { UsageWindow } from '@/types';
@@ -447,6 +448,7 @@ const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, on
providerId: string;
providerName: string;
entries: Array<[string, UsageWindow]>;
error?: string;
}> = [];
for (const provider of QUOTA_PROVIDERS) {
@@ -456,8 +458,9 @@ const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, on
const result = quotaResults.find((entry) => entry.providerId === provider.id);
const windows = (result?.usage?.windows ?? {}) as Record<string, UsageWindow>;
const entries = Object.entries(windows);
if (entries.length > 0) {
groups.push({ providerId: provider.id, providerName: provider.name, entries });
const error = (result && !result.ok && result.configured) ? result.error : undefined;
if (entries.length > 0 || error) {
groups.push({ providerId: provider.id, providerName: provider.name, entries, error });
}
}
@@ -527,8 +530,11 @@ const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, on
<RiTimerLine className="h-5 w-5" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-80 max-h-[70vh] overflow-y-auto overflow-x-hidden p-0">
<div className="sticky top-0 z-20 bg-[var(--surface-elevated)] border-b border-[var(--interactive-border)]">
<DropdownMenuContent
align="end"
className="w-80 max-h-[70vh] overflow-y-auto overflow-x-hidden bg-[var(--surface-elevated)] p-0"
>
<div className="sticky top-0 z-20 bg-[var(--surface-elevated)]">
<DropdownMenuLabel className="flex items-center justify-between gap-3 typography-ui-header font-semibold text-foreground">
<span>Rate limits</span>
<div className="flex items-center gap-1">
@@ -573,9 +579,9 @@ const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, on
</button>
</div>
</DropdownMenuLabel>
<div className="px-2 pb-2 typography-micro text-muted-foreground text-[10px]">
Last updated {formatTime(quotaLastUpdated)}
</div>
</div>
<div className="border-b border-[var(--interactive-border)] px-2 pb-2 typography-micro text-muted-foreground text-[10px]">
Last updated {formatTime(quotaLastUpdated)}
</div>
{!hasRateLimits && (
<DropdownMenuItem className="cursor-default" onSelect={(event) => event.preventDefault()}>
@@ -584,7 +590,7 @@ const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, on
)}
{rateLimitGroups.map((group, index) => (
<React.Fragment key={group.providerId}>
<DropdownMenuLabel className="sticky top-[60px] z-10 flex items-center gap-2 bg-[var(--surface-elevated)] typography-ui-label text-foreground">
<DropdownMenuLabel className="flex items-center gap-2 bg-[var(--surface-elevated)] typography-ui-label text-foreground">
<ProviderLogo providerId={group.providerId} className="h-4 w-4" />
{group.providerName}
</DropdownMenuLabel>
@@ -594,38 +600,50 @@ const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, on
className="cursor-default"
onSelect={(event) => event.preventDefault()}
>
<span className="typography-ui-label text-muted-foreground">No rate limits reported.</span>
<span className="typography-ui-label text-muted-foreground">
{group.error ?? 'No rate limits reported.'}
</span>
</DropdownMenuItem>
) : (
group.entries.map(([label, window]) => (
group.entries.map(([label, window]) => {
const displayPercent = quotaDisplayMode === 'remaining'
? window.remainingPercent
: window.usedPercent;
const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds, label);
const expectedMarker = paceInfo?.dailyAllocationPercent != null
? calculateExpectedUsagePercent(paceInfo.elapsedRatio)
: null;
return (
<DropdownMenuItem
key={`${group.providerId}-${label}`}
className="cursor-default items-start"
onSelect={(event) => event.preventDefault()}
>
<span className="flex min-w-0 flex-1 flex-col gap-2">
{(() => {
const displayPercent = quotaDisplayMode === 'remaining'
? window.remainingPercent
: window.usedPercent;
return (
<>
<span className="flex min-w-0 items-center justify-between gap-3">
<span className="truncate typography-micro text-muted-foreground">{formatWindowLabel(label)}</span>
<span className="typography-ui-label text-foreground tabular-nums">
{formatPercent(displayPercent) === '-' ? '' : formatPercent(displayPercent)}
</span>
</span>
<UsageProgressBar percent={displayPercent} tonePercent={window.usedPercent} className="h-1" />
<UsageProgressBar
percent={displayPercent}
tonePercent={window.usedPercent}
className="h-1"
expectedMarkerPercent={expectedMarker}
/>
{paceInfo && (
<div className="mt-0.5">
<PaceIndicator paceInfo={paceInfo} compact />
</div>
)}
<span className="flex items-center justify-between typography-micro text-muted-foreground text-[10px]">
<span>{window.resetAfterFormatted ?? window.resetAtFormatted ?? ''}</span>
</span>
</>
);
})()}
</span>
</DropdownMenuItem>
))
);
})
)}
{index < rateLimitGroups.length - 1 && <DropdownMenuSeparator />}
</React.Fragment>