diff --git a/apps/ui/src/components/claude-usage-popover.tsx b/apps/ui/src/components/claude-usage-popover.tsx index fcff9320..84131e8d 100644 --- a/apps/ui/src/components/claude-usage-popover.tsx +++ b/apps/ui/src/components/claude-usage-popover.tsx @@ -123,7 +123,11 @@ export function ClaudeUsagePopover() { isPrimary?: boolean; stale?: boolean; }) => { - const status = getStatusInfo(percentage); + // Check if percentage is valid (not NaN, not undefined, is a finite number) + const isValidPercentage = typeof percentage === "number" && !isNaN(percentage) && isFinite(percentage); + const safePercentage = isValidPercentage ? percentage : 0; + + const status = getStatusInfo(safePercentage); const StatusIcon = status.icon; return ( @@ -131,7 +135,7 @@ export function ClaudeUsagePopover() { className={cn( "rounded-xl border bg-card/50 p-4 transition-opacity", isPrimary ? "border-border/60 shadow-sm" : "border-border/40", - stale && "opacity-60" + (stale || !isValidPercentage) && "opacity-50" )} >
@@ -141,20 +145,24 @@ export function ClaudeUsagePopover() {

{subtitle}

-
- - - {Math.round(percentage)}% - -
+ {isValidPercentage ? ( +
+ + + {Math.round(safePercentage)}% + +
+ ) : ( + N/A + )} - + {resetText && (

@@ -267,8 +275,8 @@ export function ClaudeUsagePopover() {

diff --git a/apps/ui/src/lib/electron.ts b/apps/ui/src/lib/electron.ts index 6baa67f6..5e01b492 100644 --- a/apps/ui/src/lib/electron.ts +++ b/apps/ui/src/lib/electron.ts @@ -898,9 +898,9 @@ const getMockElectronAPI = (): ElectronAPI => { weeklyPercentage: 5, weeklyResetTime: new Date(Date.now() + 86400000 * 2).toISOString(), weeklyResetText: "Resets Dec 23", - opusWeeklyTokensUsed: 0, - opusWeeklyPercentage: 1, - opusResetText: "Resets Dec 27", + sonnetWeeklyTokensUsed: 0, + sonnetWeeklyPercentage: 1, + sonnetResetText: "Resets Dec 27", costUsed: null, costLimit: null, costCurrency: null, diff --git a/apps/ui/src/store/app-store.ts b/apps/ui/src/store/app-store.ts index 1601b1e8..365962c9 100644 --- a/apps/ui/src/store/app-store.ts +++ b/apps/ui/src/store/app-store.ts @@ -528,9 +528,9 @@ export interface ClaudeUsage { weeklyResetTime: string; weeklyResetText: string; - opusWeeklyTokensUsed: number; - opusWeeklyPercentage: number; - opusResetText: string; + sonnetWeeklyTokensUsed: number; + sonnetWeeklyPercentage: number; + sonnetResetText: string; costUsed: number | null; costLimit: number | null;