diff --git a/apps/ui/src/components/usage-popover.tsx b/apps/ui/src/components/usage-popover.tsx index 96ee70ae..d2f37f7b 100644 --- a/apps/ui/src/components/usage-popover.tsx +++ b/apps/ui/src/components/usage-popover.tsx @@ -244,28 +244,26 @@ export function UsagePopover() { return 'bg-green-500'; }; - // Determine which provider icon and percentage to show based on active tab - const getTabInfo = () => { - if (activeTab === 'claude') { - return { + // Determine which provider icon and percentage to show on the header button + const hasClaudeUsage = Boolean(claudeUsage); + const hasCodexUsage = Boolean(codexUsage); + const useClaudeIndicator = hasClaudeUsage || (!hasCodexUsage && isClaudeAuthenticated); + const indicatorInfo = useClaudeIndicator + ? { icon: AnthropicIcon, percentage: claudeSessionPercentage, isStale: isClaudeStale, + title: `Session usage (${CLAUDE_SESSION_WINDOW_HOURS}h window)`, + } + : { + icon: OpenAIIcon, + percentage: codexMaxPercentage, + isStale: isCodexStale, + title: 'Usage', }; - } - return { - icon: OpenAIIcon, - percentage: codexMaxPercentage, - isStale: isCodexStale, - }; - }; - const tabInfo = getTabInfo(); - const statusColor = getStatusInfo(tabInfo.percentage).color; - const ProviderIcon = tabInfo.icon; - - const indicatorTitle = - activeTab === 'claude' ? `Session usage (${CLAUDE_SESSION_WINDOW_HOURS}h window)` : 'Usage'; + const statusColor = getStatusInfo(indicatorInfo.percentage).color; + const ProviderIcon = indicatorInfo.icon; const trigger = (