Function OutOfCreditsBanner

cli/src/components/out-of-credits-banner.tsx:18–157

()

export const areCreditsRestored = () => creditsRestoredGlobal

export const OutOfCreditsBanner = () => {
  if (IS_FREEBUFF) return null

  const sessionCreditsUsed = useChatStore((state) => state.sessionCreditsUsed)
  const [creditsRestored, setCreditsRestored] = useState(false)

  const { data: apiData } = useUsageQuery({
    enabled: true,
    refetchInterval: CREDIT_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())

  const theme = useTheme()
  const activeData = apiData || cachedUsageData
  const remainingBalance = activeData?.remainingBalance ?? 0

  // Track if we've confirmed the zero-balance state to avoid false positives from stale cache
  const [confirmedZeroBalance, setConfirmedZeroBalance] = useState(false)

  // Reset global flag when component mounts (handles re-entry to out-of-credits mode)
  useEffect(() => {
    creditsRestoredGlobal = false
  }, [])

  // Confirm zero balance on first fetch to avoid race condition with cached data
  useEffect(() => {
    if (apiData && !confirmedZeroBalance) {
      if ((apiData.remainingBalance ?? 0) <= 0) {
        setConfirmedZeroBalance(true)
      }
    }
  }, [apiData, confirmedZeroBalance])

  // Check if credits have been restored - show celebratory message
  useEffect(() => {
    // Only check for restoration after we've confirmed zero balance
    if (!confirmedZeroBalance || remainingBalance <= 0 || creditsRestored) {
      return
    }
    
    // Credits restored! Show the success state
    setCreditsRestored(true)
    creditsRestoredGlobal = true
  }, [remainingBalance, creditsRestored, confirmedZeroBalance])

  // Build stats text
  const statsText = activeData
    ? `Session: ${sessionCreditsUsed.toLocaleString()} credits used · Balance: ${remainingBalance.toLocaleString()} credits`
    : `Session: ${sessionCreditsUsed.toLocaleString()} credits used`