Function CreditsOrSubscriptionIndicator

cli/src/components/message-footer.tsx:221–258

({ credits })

}

const CreditsOrSubscriptionIndicator: React.FC<{ credits: number }> = ({ credits }) => {
  const theme = useTheme()
  const { data: subscriptionData } = useSubscriptionQuery({
    refetchInterval: false,
    refetchOnActivity: false,
    pauseWhenIdle: false,
  })

  const blockPercentRemaining = useMemo(
    () => getBlockPercentRemaining(subscriptionData),
    [subscriptionData],
  )

  const showSubscriptionIndicator = isCoveredBySubscription(subscriptionData)

  if (showSubscriptionIndicator) {
    const label = (blockPercentRemaining ?? 0) < 20
      ? `✓ ${SUBSCRIPTION_DISPLAY_NAME} (${blockPercentRemaining}% left)`
      : `✓ ${SUBSCRIPTION_DISPLAY_NAME}`
    return (
      <text
        attributes={TextAttributes.DIM}
        style={{ wrapMode: 'none', fg: theme.success, marginTop: 0, marginBottom: 0 }}
      >
        {label}
      </text>
    )
  }

  return (
    <text
      attributes={TextAttributes.DIM}
      style={{ wrapMode: 'none', fg: theme.secondary, marginTop: 0, marginBottom: 0 }}
    >
      {pluralize(credits, 'credit')}
    </text>
  )
}