Subscription client changes (#424)

Co-authored-by: brandonkachen <brandonchenjiacheng@gmail.com> and Codebuff!

Author: jahooma

.github/workflows/ci.yml

@@ -150,7 +150,13 @@ jobs:
                 echo "No regular tests found in .agents"
               fi
             elif [ "${{ matrix.package }}" = "web" ]; then
-              bun run test --runInBand
+              # Use bun test directly to pick up bunfig.toml preloads for Request global
+              TEST_FILES=$(find src -name '*.test.ts' ! -name '*.integration.test.ts' ! -path 'src/__tests__/e2e/*' 2>/dev/null | sort | tr '\n' ' ')
+              if [ -n "$TEST_FILES" ]; then
+                bun test $TEST_FILES
+              else
+                echo "No tests found in web"
+              fi
             else
               # Run all non-integration tests in a single bun test invocation
               # This avoids xargs exit code issues with orphaned child processes

bunfig.toml

@@ -7,4 +7,4 @@ linkWorkspacePackages = true
 [test]
 # Exclude test repositories, integration tests, and Playwright e2e tests from test execution by default
 exclude = ["evals/test-repos/**", "**/*.integration.test.*", "web/src/__tests__/e2e/**"]
-preload = ["./sdk/test/setup-env.ts", "./test/setup-bigquery-mocks.ts"]
+preload = ["./sdk/test/setup-env.ts", "./test/setup-bigquery-mocks.ts", "./web/test/setup-globals.ts"]

cli/src/chat.tsx

@@ -35,6 +35,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'
@@ -57,6 +58,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 {
   type ChatKeyboardState,
   createDefaultChatKeyboardState,
@@ -161,6 +163,11 @@ export const Chat = ({
   const { statusMessage } = useClipboard()
   const { ad } = useGravityAd()
 
+  // Fetch subscription data early - needed for session credits tracking
+  const { data: subscriptionData } = useSubscriptionQuery({
+    refetchInterval: 60 * 1000,
+  })
+
   // Set initial mode from CLI flag on mount
   useEffect(() => {
     if (initialMode) {
@@ -425,6 +432,7 @@ export const Chat = ({
     resumeQueue,
     continueChat,
     continueChatId,
+    subscriptionData,
   })
 
   sendMessageRef.current = sendMessage
@@ -1278,6 +1286,26 @@ export const Chat = ({
     refetchInterval: 60 * 1000, // Refetch every 60 seconds
   })
 
+  // Auto-show subscription limit banner when rate limit becomes active
+  const subscriptionLimitShownRef = useRef(false)
+  const subscriptionRateLimit = subscriptionData?.hasSubscription ? subscriptionData.rateLimit : undefined
+  const fallbackToALaCarte = subscriptionData?.fallbackToALaCarte ?? false
+  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 (!fallbackToALaCarte) {
+        useChatStore.getState().setInputMode('subscriptionLimit')
+      }
+    } else if (!isLimited) {
+      subscriptionLimitShownRef.current = false
+      if (useChatStore.getState().inputMode === 'subscriptionLimit') {
+        useChatStore.getState().setInputMode('default')
+      }
+    }
+  }, [subscriptionRateLimit?.limited, fallbackToALaCarte])
+
   const inputBoxTitle = useMemo(() => {
     const segments: string[] = []
 

cli/src/commands/command-registry.ts

@@ -382,6 +382,14 @@ export const COMMAND_REGISTRY: CommandDefinition[] = [
       clearInput(params)
     },
   }),
+  defineCommand({
+    name: 'subscribe',
+    aliases: ['strong'],
+    handler: (params) => {
+      open(WEBSITE_URL + '/pricing')
+      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/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,16 @@
+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 {
+  getBlockPercentRemaining,
+  isCoveredBySubscription,
+} from '../utils/subscription'
 import { useTheme } from '../hooks/use-theme'
 import {
   useFeedbackStore,
@@ -157,19 +163,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 +216,42 @@ 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 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>
+  )
+}

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>
       )}