Function useUsageMonitor

cli/src/hooks/use-usage-monitor.ts:16–55

()

 * so monitoring happens continuously, not just when the banner is visible.
 */
export function useUsageMonitor() {
  const isChainInProgress = useChatStore((state) => state.isChainInProgress)
  const sessionCreditsUsed = useChatStore((state) => state.sessionCreditsUsed)
  const setInputMode = useChatStore((state) => state.setInputMode)
  const lastWarnedThresholdRef = useRef<number | null>(null)

  // Query usage data - this will refetch when invalidated after message completion
  const { data: usageData } = useUsageQuery({ enabled: !IS_FREEBUFF })

  useEffect(() => {
    if (IS_FREEBUFF) return

    // Only show after user has sent at least one message (to avoid overwhelming on app start)
    if (sessionCreditsUsed === 0) {
      return
    }

    const authToken = getAuthToken()
    const remainingBalance = usageData?.remainingBalance ?? null
    const autoTopupEnabled = usageData?.autoTopupEnabled ?? false

    const decision = shouldAutoShowBanner(
      isChainInProgress,
      !!authToken,
      remainingBalance,
      lastWarnedThresholdRef.current,
      autoTopupEnabled,
    )

    // Update the last warned threshold
    if (decision.newWarningThreshold !== lastWarnedThresholdRef.current) {
      lastWarnedThresholdRef.current = decision.newWarningThreshold
    }

    // Show the usage banner if we should
    if (decision.shouldShow) {
      setInputMode('usage')
    }
  }, [isChainInProgress, usageData, sessionCreditsUsed, setInputMode])
}