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>
packages/ui/src/components/sections/usage/PaceIndicator.tsx
+97
View File
@@ -0,0 +1,97 @@
import React from 'react';
import { cn } from '@/lib/utils';
import type { PaceInfo } from '@/lib/quota';
import { getPaceStatusColor, formatRemainingTime } from '@/lib/quota';
interface PaceIndicatorProps {
paceInfo: PaceInfo;
className?: string;
/** Compact mode shows just the status dot and prediction */
compact?: boolean;
}
/**
* Visual indicator showing whether usage is on track, slightly fast, or too fast.
* Inspired by opencode-bar's pace visualization.
*/
export const PaceIndicator: React.FC<PaceIndicatorProps> = ({
paceInfo,
className,
compact = false,
}) => {
const statusColor = getPaceStatusColor(paceInfo.status);
const statusLabel = React.useMemo(() => {
switch (paceInfo.status) {
case 'on-track':
return 'On track';
case 'slightly-fast':
return 'Slightly fast';
case 'too-fast':
return 'Too fast';
case 'exhausted':
return 'Used up';
}
}, [paceInfo.status]);
const predictionTooltip = `Predicted usage at window end based on current pace: ${paceInfo.predictText}`;
if (compact) {
return (
<div className={cn('flex items-center gap-1.5', className)}>
<div
className="h-2 w-2 rounded-full flex-shrink-0"
style={{ backgroundColor: statusColor }}
title={statusLabel}
/>
<span
className="typography-micro tabular-nums"
style={{ color: statusColor }}
title={paceInfo.isExhausted ? undefined : predictionTooltip}
>
{paceInfo.isExhausted ? (
<>Wait {formatRemainingTime(paceInfo.remainingSeconds)}</>
) : (
<>Pred: {paceInfo.predictText}</>
)}
</span>
</div>
);
}
return (
<div className={cn('flex items-center justify-between gap-2', className)}>
<div className="flex items-center gap-1.5">
{!paceInfo.isExhausted && (
<span className="typography-micro text-muted-foreground">
Pace: {paceInfo.paceRateText}
</span>
)}
</div>
<div className="flex items-center gap-1.5">
<span
className="typography-micro tabular-nums"
style={{ color: statusColor }}
>
{paceInfo.isExhausted ? (
<>
<span className="font-medium">{statusLabel}</span>
<span className="text-muted-foreground"> · Wait </span>
<span className="font-medium">{formatRemainingTime(paceInfo.remainingSeconds)}</span>
</>
) : (
<span title={predictionTooltip}>
<span className="text-muted-foreground">Pred: </span>
<span className="font-medium">{paceInfo.predictText}</span>
</span>
)}
</span>
<div
className="h-2 w-2 rounded-full flex-shrink-0"
style={{ backgroundColor: statusColor }}
title={statusLabel}
/>
</div>
</div>
);
};
packages/ui/src/components/sections/usage/UsageCard.tsx
+29 -2
View File
@@ -1,7 +1,8 @@
import React from 'react';
import type { UsageWindow } from '@/types';
import { formatPercent, formatWindowLabel } from '@/lib/quota';
import { formatPercent, formatWindowLabel, calculatePace, calculateExpectedUsagePercent } from '@/lib/quota';
import { UsageProgressBar } from './UsageProgressBar';
import { PaceIndicator } from './PaceIndicator';
import { useQuotaStore } from '@/stores/useQuotaStore';
import { Switch } from '@/components/ui/switch';
@@ -29,6 +30,21 @@ export const UsageCard: React.FC<UsageCardProps> = ({
const resetLabel = window.resetAfterFormatted ?? window.resetAtFormatted ?? '';
const windowLabel = formatWindowLabel(title);
// Calculate pace info for the usage window
// Pass the title (window label) to infer windowSeconds when not provided by the API
const paceInfo = React.useMemo(() => {
return calculatePace(window.usedPercent, window.resetAt, window.windowSeconds, title);
}, [window.usedPercent, window.resetAt, window.windowSeconds, title]);
// Calculate expected marker position for weekly/monthly quotas
const expectedMarkerPercent = React.useMemo(() => {
if (!paceInfo || paceInfo.dailyAllocationPercent === null) {
return null;
}
// Show marker based on elapsed time ratio
return calculateExpectedUsagePercent(paceInfo.elapsedRatio);
}, [paceInfo]);
return (
<div className="rounded-xl border border-[var(--interactive-border)] bg-[var(--surface-elevated)]/60 p-4 shadow-sm">
<div className="flex items-center justify-between gap-3">
@@ -52,12 +68,23 @@ export const UsageCard: React.FC<UsageCardProps> = ({
</div>
<div className="mt-3">
<UsageProgressBar percent={displayPercent} tonePercent={window.usedPercent} />
<UsageProgressBar
percent={displayPercent}
tonePercent={window.usedPercent}
expectedMarkerPercent={expectedMarkerPercent}
/>
<div className="mt-1 text-right typography-micro text-muted-foreground text-[10px]">
{barLabel}
</div>
</div>
{/* Pace indicator - only shown when we have pace info */}
{paceInfo && (
<div className="mt-2">
<PaceIndicator paceInfo={paceInfo} />
</div>
)}
<div className="mt-3 flex items-center justify-between text-muted-foreground">
<span className="typography-micro">Resets</span>
<span className="typography-micro tabular-nums">{resetLabel}</span>
packages/ui/src/components/sections/usage/UsagePage.tsx
+3 -3
View File
@@ -13,7 +13,7 @@ import {
} from '@/components/ui/collapsible';
import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react';
import type { UsageWindows, QuotaProviderId } from '@/types';
import { getAllModelFamilies, sortModelFamilies, groupModelsByFamilyWithGetter } from '@/lib/quota/model-families';
import { getAllModelFamilies, getDisplayModelName, sortModelFamilies, groupModelsByFamilyWithGetter } from '@/lib/quota/model-families';
const formatTime = (timestamp: number | null) => {
if (!timestamp) return '-';
@@ -257,7 +257,7 @@ export const UsagePage: React.FC = () => {
<UsageCard
key={model.name}
title={label}
subtitle={model.name}
subtitle={getDisplayModelName(model.name)}
window={window}
showToggle
toggleEnabled={isSelected}
@@ -306,7 +306,7 @@ export const UsagePage: React.FC = () => {
<UsageCard
key={model.name}
title={label}
subtitle={model.name}
subtitle={getDisplayModelName(model.name)}
window={window}
showToggle
toggleEnabled={isSelected}
packages/ui/src/components/sections/usage/UsageProgressBar.tsx
+23 -2
View File
@@ -6,11 +6,24 @@ interface UsageProgressBarProps {
percent: number | null;
tonePercent?: number | null;
className?: string;
/**
* Position (0-100) to show a marker indicating expected usage based on time elapsed.
* Used for weekly/monthly quotas to show where usage "should" be if evenly distributed.
*/
expectedMarkerPercent?: number | null;
}
export const UsageProgressBar: React.FC<UsageProgressBarProps> = ({ percent, tonePercent, className }) => {
export const UsageProgressBar: React.FC<UsageProgressBarProps> = ({
percent,
tonePercent,
className,
expectedMarkerPercent,
}) => {
const clamped = clampPercent(percent) ?? 0;
const tone = resolveUsageTone(tonePercent ?? percent);
const markerClamped = expectedMarkerPercent != null
? Math.max(0, Math.min(100, expectedMarkerPercent))
: null;
const fillStyle = tone === 'critical'
? { backgroundColor: 'var(--status-error)' }
@@ -19,7 +32,7 @@ export const UsageProgressBar: React.FC<UsageProgressBarProps> = ({ percent, ton
: { backgroundColor: 'var(--status-success)' };
return (
<div className={cn('h-2.5 rounded-full bg-[var(--interactive-border)] overflow-hidden', className)}>
<div className={cn('relative h-2.5 rounded-full bg-[var(--interactive-border)] overflow-hidden', className)}>
<div
className="h-full transition-all duration-300"
style={{ ...fillStyle, width: `${clamped}%` }}
@@ -28,6 +41,14 @@ export const UsageProgressBar: React.FC<UsageProgressBarProps> = ({ percent, ton
aria-valuemin={0}
aria-valuemax={100}
/>
{markerClamped != null && markerClamped > 0 && markerClamped < 100 && (
<div
className="absolute top-0 h-full w-0.5 bg-foreground"
style={{ left: `${markerClamped}%` }}
title={`Expected usage if spread evenly: ${Math.round(markerClamped)}% of quota`}
aria-hidden="true"
/>
)}
</div>
);
};