Function SubscriptionUsageSection

cli/src/components/usage-banner.tsx:185–258

({
  displayName,
  subscriptionInfo,
  rateLimit,
  isLoading,
  fallbackToALaCarte,
})

}

const SubscriptionUsageSection: React.FC<SubscriptionUsageSectionProps> = ({
  displayName,
  subscriptionInfo,
  rateLimit,
  isLoading,
  fallbackToALaCarte,
}) => {
  const theme = useTheme()
  const updatePreference = useUpdatePreference()

  const handleToggleFallbackToALaCarte = () => {
    updatePreference.mutate({ fallbackToALaCarte: !fallbackToALaCarte })
  }

  const blockPercent = useMemo(() => {
    if (rateLimit?.blockLimit == null || rateLimit.blockUsed == null) return 100
    return Math.max(0, 100 - Math.round((rateLimit.blockUsed / rateLimit.blockLimit) * 100))
  }, [rateLimit?.blockLimit, rateLimit?.blockUsed])

  const weeklyPercent = rateLimit ? 100 - rateLimit.weeklyPercentUsed : 100

  return (
    <box style={{ flexDirection: 'column', marginBottom: 1 }}>
      <box style={{ flexDirection: 'row', gap: 1 }}>
        <text style={{ fg: theme.foreground }}>
          💪 {displayName ?? 'Strong'} subscription
        </text>
        {subscriptionInfo?.tier && (
          <text style={{ fg: theme.muted }}>${subscriptionInfo.tier}/mo</text>
        )}
      </box>
      {isLoading ? (
        <text style={{ fg: theme.muted }}>Loading subscription data...</text>
      ) : rateLimit ? (
        <box style={{ flexDirection: 'column', gap: 0 }}>
          <box style={{ flexDirection: 'row', alignItems: 'center', gap: 0 }}>
            <text style={{ fg: theme.muted }}>{`5-hour limit ${`${blockPercent}%`.padStart(4)} `}</text>
            <ProgressBar value={blockPercent} width={12} showPercentage={false} />
            <text style={{ fg: theme.muted }}>
              {rateLimit.blockResetsAt
                ? ` resets in ${formatResetTime(new Date(rateLimit.blockResetsAt))}`
                : ''}
            </text>
          </box>
          <box style={{ flexDirection: 'row', alignItems: 'center', gap: 0 }}>
            <text style={{ fg: theme.muted }}>{`Weekly limit ${`${weeklyPercent}%`.padStart(4)} `}</text>
            <ProgressBar value={weeklyPercent} width={12} showPercentage={false} />
            <text style={{ fg: theme.muted }}>
              {` resets in ${formatResetTimeLong(rateLimit.weeklyResetsAt)}`}
            </text>
          </box>
        </box>
      ) : null}
      <box style={{ flexDirection: 'column', gap: 0, marginTop: 1 }}>
        <box style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
          <text style={{ fg: theme.muted }}>Credit spending:</text>
          <text style={{ fg: fallbackToALaCarte ? theme.foreground : theme.warning }}>
            {fallbackToALaCarte ? 'enabled' : 'disabled'}