Function UsageBanner

cli/src/components/usage-banner.tsx:47–169

({ showTime }: { showTime: number })

}

export const UsageBanner = ({ showTime }: { showTime: number }) => {
  if (IS_FREEBUFF) return null

  const sessionCreditsUsed = useChatStore((state) => state.sessionCreditsUsed)
  const setInputMode = useChatStore((state) => state.setInputMode)

  // Check if ChatGPT OAuth is connected
  const isChatGptConnected = CHATGPT_OAUTH_ENABLED && isChatGptOAuthValid()

  // Fetch subscription data
  const { data: subscriptionData, isLoading: isSubscriptionLoading } = useSubscriptionQuery({
    refetchInterval: 30 * 1000,
  })

  const {
    data: apiData,
    isLoading,
    isFetching,
  } = useUsageQuery({
    enabled: true,
    refetchInterval: USAGE_POLL_INTERVAL,
  })

  // Get cached data for immediate display
  const cachedUsageData = getActivityQueryData<{
    type: 'usage-response'
    usage: number
    remainingBalance: number | null
    balanceBreakdown?: { free: number; paid: number; ad?: number }
    next_quota_reset: string | null
  }>(usageQueryKeys.current())

  // Auto-hide after timeout
  useEffect(() => {
    const timer = setTimeout(() => {
      setInputMode('default')
    }, MANUAL_SHOW_TIMEOUT)
    return () => clearTimeout(timer)
  }, [showTime, setInputMode])

  const theme = useTheme()

  const activeData = apiData || cachedUsageData
  const isLoadingData = isLoading || isFetching

  // Show loading state immediately when banner is opened but data isn't ready
  if (!activeData) {
    return (
      <BottomBanner
        borderColorKey="muted"
        text={generateLoadingBannerText(sessionCreditsUsed)}
        onClose={() => setInputMode('default')}
      />
    )
  }

  const colorLevel = getBannerColorLevel(activeData.remainingBalance)
  const renewalDate = activeData.next_quota_reset ? formatRenewalDate(activeData.next_quota_reset) : null