Subscription client changes

cli/src/chat.tsx

@@ -34,6 +34,7 @@ import { useChatState } from './hooks/use-chat-state'
 import { useChatStreaming } from './hooks/use-chat-streaming'
 import { useChatUI } from './hooks/use-chat-ui'
 import { useClaudeQuotaQuery } from './hooks/use-claude-quota-query'
+import { useSubscriptionQuery } from './hooks/use-subscription-query'
 import { useClipboard } from './hooks/use-clipboard'
 import { useEvent } from './hooks/use-event'
 import { useGravityAd } from './hooks/use-gravity-ad'
@@ -55,6 +56,7 @@ import { getClaudeOAuthStatus } from './utils/claude-oauth'
 import { showClipboardMessage } from './utils/clipboard'
 import { readClipboardImage } from './utils/clipboard-image'
 import { getInputModeConfig } from './utils/input-modes'
+import { getAlwaysUseALaCarte } from './utils/settings'
 import {
   type ChatKeyboardState,
   createDefaultChatKeyboardState,
@@ -1245,6 +1247,30 @@ export const Chat = ({
     refetchInterval: 60 * 1000, // Refetch every 60 seconds
   })
 
+  // Fetch subscription data
+  const { data: subscriptionData } = useSubscriptionQuery({
+    refetchInterval: 60 * 1000,
+  })
+
+  // Auto-show subscription limit banner when rate limit becomes active
+  const subscriptionLimitShownRef = useRef(false)
+  const subscriptionRateLimit = subscriptionData?.hasSubscription ? subscriptionData.rateLimit : undefined
+  useEffect(() => {
+    const isLimited = subscriptionRateLimit?.limited === true
+    if (isLimited && !subscriptionLimitShownRef.current) {
+      subscriptionLimitShownRef.current = true
+      // Skip showing the banner if user prefers to always fall back to a-la-carte
+      if (!getAlwaysUseALaCarte()) {
+        useChatStore.getState().setInputMode('subscriptionLimit')
+      }
+    } else if (!isLimited) {
+      subscriptionLimitShownRef.current = false
+      if (useChatStore.getState().inputMode === 'subscriptionLimit') {
+        useChatStore.getState().setInputMode('default')
+      }
+    }
+  }, [subscriptionRateLimit?.limited])
+
   const inputBoxTitle = useMemo(() => {
     const segments: string[] = []
 

cli/src/commands/command-registry.ts

@@ -380,6 +380,14 @@ export const COMMAND_REGISTRY: CommandDefinition[] = [
       clearInput(params)
     },
   }),
+  defineCommand({
+    name: 'subscribe',
+    aliases: ['strong'],
+    handler: (params) => {
+      open(WEBSITE_URL + '/strong')
+      clearInput(params)
+    },
+  }),
   defineCommand({
     name: 'buy-credits',
     handler: (params) => {

cli/src/components/bottom-status-line.tsx

@@ -16,7 +16,7 @@ interface BottomStatusLineProps {
 
 /**
  * Bottom status line component - shows below the input box
- * Currently displays Claude subscription status when connected
+ * Displays Claude subscription status and/or Codebuff Strong status
  */
 export const BottomStatusLine: React.FC<BottomStatusLineProps> = ({
   isClaudeConnected,
@@ -25,28 +25,28 @@ export const BottomStatusLine: React.FC<BottomStatusLineProps> = ({
 }) => {
   const theme = useTheme()
 
-  // Don't render if there's nothing to show
-  if (!isClaudeConnected) {
-    return null
-  }
-
   // Use the more restrictive of the two quotas (5-hour window is usually the limiting factor)
-  const displayRemaining = claudeQuota
+  const claudeDisplayRemaining = claudeQuota
     ? Math.min(claudeQuota.fiveHourRemaining, claudeQuota.sevenDayRemaining)
     : null
 
-  // Check if quota is exhausted (0%)
-  const isExhausted = displayRemaining !== null && displayRemaining <= 0
+  // Check if Claude quota is exhausted (0%)
+  const isClaudeExhausted = claudeDisplayRemaining !== null && claudeDisplayRemaining <= 0
 
-  // Get the reset time for the limiting quota window
-  const resetTime = claudeQuota
+  // Get the reset time for the limiting Claude quota window
+  const claudeResetTime = claudeQuota
     ? claudeQuota.fiveHourRemaining <= claudeQuota.sevenDayRemaining
       ? claudeQuota.fiveHourResetsAt
       : claudeQuota.sevenDayResetsAt
     : null
 
-  // Determine dot color: red if exhausted, green if active, muted otherwise
-  const dotColor = isExhausted
+  // Only show when Claude is connected
+  if (!isClaudeConnected) {
+    return null
+  }
+
+  // Determine dot color for Claude: red if exhausted, green if active, muted otherwise
+  const claudeDotColor = isClaudeExhausted
     ? theme.error
     : isClaudeActive
       ? theme.success
@@ -59,23 +59,42 @@ export const BottomStatusLine: React.FC<BottomStatusLineProps> = ({
         flexDirection: 'row',
         justifyContent: 'flex-end',
         paddingRight: 1,
+        gap: 2,
       }}
     >
-      <box
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: 0,
-        }}
-      >
-        <text style={{ fg: dotColor }}>●</text>
-        <text style={{ fg: theme.muted }}> Claude subscription</text>
-        {isExhausted && resetTime ? (
-          <text style={{ fg: theme.muted }}>{` · resets in ${formatResetTime(resetTime)}`}</text>
-        ) : displayRemaining !== null ? (
-          <BatteryIndicator value={displayRemaining} theme={theme} />
-        ) : null}
-      </box>
+      {/* Show Claude subscription when connected and not depleted */}
+      {!isClaudeExhausted && (
+        <box
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 0,
+          }}
+        >
+          <text style={{ fg: claudeDotColor }}>●</text>
+          <text style={{ fg: theme.muted }}> Claude subscription</text>
+          {claudeDisplayRemaining !== null ? (
+            <BatteryIndicator value={claudeDisplayRemaining} theme={theme} />
+          ) : null}
+        </box>
+      )}
+
+      {/* Show Claude as depleted when exhausted */}
+      {isClaudeExhausted && (
+        <box
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 0,
+          }}
+        >
+          <text style={{ fg: theme.error }}>●</text>
+          <text style={{ fg: theme.muted }}> Claude</text>
+          {claudeResetTime && (
+            <text style={{ fg: theme.muted }}>{` · resets in ${formatResetTime(claudeResetTime)}`}</text>
+          )}
+        </box>
+      )}
     </box>
   )
 }

cli/src/components/chat-input-bar.tsx

@@ -6,6 +6,7 @@ import { FeedbackContainer } from './feedback-container'
 import { InputModeBanner } from './input-mode-banner'
 import { MultilineInput, type MultilineInputHandle } from './multiline-input'
 import { OutOfCreditsBanner } from './out-of-credits-banner'
+import { SubscriptionLimitBanner } from './subscription-limit-banner'
 import { PublishContainer } from './publish-container'
 import { SuggestionMenu, type SuggestionItem } from './suggestion-menu'
 import { useAskUserBridge } from '../hooks/use-ask-user-bridge'
@@ -187,6 +188,11 @@ export const ChatInputBar = ({
     return <OutOfCreditsBanner />
   }
 
+  // Subscription limit mode: replace entire input with subscription limit banner
+  if (inputMode === 'subscriptionLimit') {
+    return <SubscriptionLimitBanner />
+  }
+
   // Handle input changes with special mode entry detection
   const handleInputChange = (value: InputValue) => {
     // Detect entering bash mode: user typed exactly '!' when in default mode

cli/src/components/input-mode-banner.tsx

@@ -4,6 +4,7 @@ import { ClaudeConnectBanner } from './claude-connect-banner'
 import { HelpBanner } from './help-banner'
 import { PendingAttachmentsBanner } from './pending-attachments-banner'
 import { ReferralBanner } from './referral-banner'
+import { SubscriptionLimitBanner } from './subscription-limit-banner'
 import { UsageBanner } from './usage-banner'
 import { useChatStore } from '../state/chat-store'
 
@@ -26,6 +27,7 @@ const BANNER_REGISTRY: Record<
   referral: () => <ReferralBanner />,
   help: () => <HelpBanner />,
   'connect:claude': () => <ClaudeConnectBanner />,
+  subscriptionLimit: () => <SubscriptionLimitBanner />,
 }
 
 /**

cli/src/components/message-footer.tsx

@@ -1,10 +1,12 @@
+import { SUBSCRIPTION_DISPLAY_NAME } from '@codebuff/common/constants/subscription-plans'
 import { pluralize } from '@codebuff/common/util/string'
 import { TextAttributes } from '@opentui/core'
 import React, { useCallback, useMemo } from 'react'
 
 import { CopyButton } from './copy-button'
 import { ElapsedTimer } from './elapsed-timer'
 import { FeedbackIconButton } from './feedback-icon-button'
+import { useSubscriptionQuery } from '../hooks/use-subscription-query'
 import { useTheme } from '../hooks/use-theme'
 import {
   useFeedbackStore,
@@ -157,19 +159,7 @@ export const MessageFooter: React.FC<MessageFooterProps> = ({
   if (typeof credits === 'number' && credits > 0) {
     footerItems.push({
       key: 'credits',
-      node: (
-        <text
-          attributes={TextAttributes.DIM}
-          style={{
-            wrapMode: 'none',
-            fg: theme.secondary,
-            marginTop: 0,
-            marginBottom: 0,
-          }}
-        >
-          {pluralize(credits, 'credit')}
-        </text>
-      ),
+      node: <CreditsOrSubscriptionIndicator credits={credits} />,
     })
   }
   if (shouldRenderFeedbackButton) {
@@ -222,3 +212,46 @@ export const MessageFooter: React.FC<MessageFooterProps> = ({
     </box>
   )
 }
+
+const CreditsOrSubscriptionIndicator: React.FC<{ credits: number }> = ({ credits }) => {
+  const theme = useTheme()
+  const { data: subscriptionData } = useSubscriptionQuery({
+    refetchInterval: false,
+    refetchOnActivity: false,
+    pauseWhenIdle: false,
+  })
+
+  const activeSubscription = subscriptionData?.hasSubscription ? subscriptionData : null
+  const rateLimit = activeSubscription?.rateLimit
+
+  const blockPercentRemaining = useMemo(() => {
+    if (!rateLimit?.blockLimit || rateLimit.blockUsed == null) return null
+    return Math.round(((rateLimit.blockLimit - rateLimit.blockUsed) / rateLimit.blockLimit) * 100)
+  }, [rateLimit])
+
+  const showSubscriptionIndicator =
+    activeSubscription && !rateLimit?.limited && blockPercentRemaining != null && blockPercentRemaining > 0
+
+  if (showSubscriptionIndicator) {
+    const label = blockPercentRemaining < 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>
+  )
+}

cli/src/components/progress-bar.tsx

@@ -72,7 +72,7 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({
     <box style={{ flexDirection: 'row', alignItems: 'center', gap: 0 }}>
       {label && <text style={{ fg: theme.muted }}>{label} </text>}
       <text style={{ fg: barColor }}>{filled}</text>
-      <text style={{ fg: theme.muted }}>{empty}</text>
+      {emptyWidth > 0 && <text style={{ fg: theme.muted }}>{empty}</text>}
       {showPercentage && (
         <text style={{ fg: textColor }}> {Math.round(clampedValue)}%</text>
       )}