Remove bottom status bar for Strong subscription. Include subscription indicator in message footer

Author: jahooma

cli/src/chat.tsx

@@ -1461,8 +1461,6 @@ export const Chat = ({
           isClaudeConnected={isClaudeOAuthActive}
           isClaudeActive={isClaudeActive}
           claudeQuota={claudeQuota}
-          hasSubscription={subscriptionData?.hasSubscription ?? false}
-          subscriptionRateLimit={subscriptionData?.rateLimit}
         />
       </box>
     </box>

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

@@ -4,7 +4,6 @@ import { useTheme } from '../hooks/use-theme'
 import { formatResetTime } from '../utils/time-format'
 
 import type { ClaudeQuotaData } from '../hooks/use-claude-quota-query'
-import type { SubscriptionRateLimit } from '../hooks/use-subscription-query'
 
 interface BottomStatusLineProps {
   /** Whether Claude OAuth is connected */
@@ -13,10 +12,6 @@ interface BottomStatusLineProps {
   isClaudeActive: boolean
   /** Quota data from Anthropic API */
   claudeQuota?: ClaudeQuotaData | null
-  /** Whether the user has an active Codebuff Strong subscription */
-  hasSubscription: boolean
-  /** Rate limit data for the subscription */
-  subscriptionRateLimit?: SubscriptionRateLimit | null
 }
 
 /**
@@ -27,8 +22,6 @@ export const BottomStatusLine: React.FC<BottomStatusLineProps> = ({
   isClaudeConnected,
   isClaudeActive,
   claudeQuota,
-  hasSubscription,
-  subscriptionRateLimit,
 }) => {
   const theme = useTheme()
 
@@ -47,13 +40,8 @@ export const BottomStatusLine: React.FC<BottomStatusLineProps> = ({
       : claudeQuota.sevenDayResetsAt
     : null
 
-  // Show Claude when connected and not depleted (takes priority over Strong)
-  const showClaude = isClaudeConnected && !isClaudeExhausted
-  // Show Strong when subscribed AND (no Claude connected OR Claude depleted)
-  const showStrong = hasSubscription && (!isClaudeConnected || isClaudeExhausted)
-
-  // Don't render if there's nothing to show
-  if (!showClaude && !showStrong && !(isClaudeConnected && isClaudeExhausted)) {
+  // Only show when Claude is connected
+  if (!isClaudeConnected) {
     return null
   }
 
@@ -64,28 +52,6 @@ export const BottomStatusLine: React.FC<BottomStatusLineProps> = ({
       ? theme.success
       : theme.muted
 
-  // Subscription remaining percentage (based on weekly)
-  const subscriptionRemaining = subscriptionRateLimit
-    ? 100 - subscriptionRateLimit.weeklyPercentUsed
-    : null
-  const isSubscriptionLimited = subscriptionRateLimit?.limited === true
-
-  // Get subscription reset time
-  const subscriptionResetTime = subscriptionRateLimit
-    ? subscriptionRateLimit.reason === 'block_exhausted' && subscriptionRateLimit.blockResetsAt
-      ? new Date(subscriptionRateLimit.blockResetsAt)
-      : subscriptionRateLimit.weeklyResetsAt
-        ? new Date(subscriptionRateLimit.weeklyResetsAt)
-        : null
-    : null
-
-  // Determine dot color for Strong: red if limited, green if has remaining credits, muted otherwise
-  const strongDotColor = isSubscriptionLimited
-    ? theme.error
-    : subscriptionRemaining !== null && subscriptionRemaining > 0
-      ? theme.success
-      : theme.muted
-
   return (
     <box
       style={{
@@ -96,8 +62,8 @@ export const BottomStatusLine: React.FC<BottomStatusLineProps> = ({
         gap: 2,
       }}
     >
-      {/* Show Claude subscription when connected (even when depleted, to show reset time) */}
-      {isClaudeConnected && !isClaudeExhausted && (
+      {/* Show Claude subscription when connected and not depleted */}
+      {!isClaudeExhausted && (
         <box
           style={{
             flexDirection: 'row',
@@ -114,7 +80,7 @@ export const BottomStatusLine: React.FC<BottomStatusLineProps> = ({
       )}
 
       {/* Show Claude as depleted when exhausted */}
-      {isClaudeConnected && isClaudeExhausted && (
+      {isClaudeExhausted && (
         <box
           style={{
             flexDirection: 'row',
@@ -129,25 +95,6 @@ export const BottomStatusLine: React.FC<BottomStatusLineProps> = ({
           )}
         </box>
       )}
-
-      {/* Show Codebuff Strong when subscribed and Claude not healthy */}
-      {showStrong && (
-        <box
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 0,
-          }}
-        >
-          <text style={{ fg: strongDotColor }}>●</text>
-          <text style={{ fg: theme.muted }}> Codebuff Strong</text>
-          {isSubscriptionLimited && subscriptionResetTime ? (
-            <text style={{ fg: theme.muted }}>{` · resets in ${formatResetTime(subscriptionResetTime)}`}</text>
-          ) : subscriptionRemaining !== null ? (
-            <BatteryIndicator value={subscriptionRemaining} theme={theme} />
-          ) : null}
-        </box>
-      )}
     </box>
   )
 }

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,64 @@ export const MessageFooter: React.FC<MessageFooterProps> = ({
     </box>
   )
 }
+
+/**
+ * Shows either subscription indicator or credits count based on subscription status.
+ * If user has an active subscription with remaining block credits, shows "✓ Strong".
+ * If block is < 15% remaining, also shows the percentage.
+ * Otherwise, shows the regular credits count.
+ */
+const CreditsOrSubscriptionIndicator: React.FC<{ credits: number }> = ({ credits }) => {
+  const theme = useTheme()
+  const { data: subscriptionData } = useSubscriptionQuery({
+    refetchInterval: false, // Don't poll, just use cached data
+    refetchOnActivity: false,
+    pauseWhenIdle: false,
+  })
+
+  const hasActiveSubscription = subscriptionData?.hasSubscription === true
+  const rateLimit = subscriptionData?.rateLimit
+  const isLimited = rateLimit?.limited === true
+
+  // Calculate block remaining percentage
+  const blockPercentRemaining = useMemo(() => {
+    if (!rateLimit?.blockLimit || rateLimit.blockUsed == null) return null
+    const remaining = rateLimit.blockLimit - rateLimit.blockUsed
+    return Math.round((remaining / rateLimit.blockLimit) * 100)
+  }, [rateLimit])
+
+  // Show subscription indicator if user has active subscription and block is not depleted
+  const showSubscriptionIndicator = hasActiveSubscription && !isLimited && blockPercentRemaining !== null && blockPercentRemaining > 0
+
+  if (showSubscriptionIndicator) {
+    const showPercentage = blockPercentRemaining < 20
+    return (
+      <text
+        attributes={TextAttributes.DIM}
+        style={{
+          wrapMode: 'none',
+          fg: theme.success,
+          marginTop: 0,
+          marginBottom: 0,
+        }}
+      >
+        {showPercentage ? `✓ ${SUBSCRIPTION_DISPLAY_NAME} (${blockPercentRemaining}% left)` : `✓ ${SUBSCRIPTION_DISPLAY_NAME}`}
+      </text>
+    )
+  }
+
+  // Default: show credits count
+  return (
+    <text
+      attributes={TextAttributes.DIM}
+      style={{
+        wrapMode: 'none',
+        fg: theme.secondary,
+        marginTop: 0,
+        marginBottom: 0,
+      }}
+    >
+      {pluralize(credits, 'credit')}
+    </text>
+  )
+}