feat: Add fallbackToALaCarte server-side preference

Author: brandonkachen

cli/src/components/subscription-limit-banner.tsx

@@ -6,13 +6,10 @@ import { Button } from './button'
 import { ProgressBar } from './progress-bar'
 import { useSubscriptionQuery } from '../hooks/use-subscription-query'
 import { useTheme } from '../hooks/use-theme'
+import { useUpdatePreference } from '../hooks/use-update-preference'
 import { useUsageQuery } from '../hooks/use-usage-query'
 import { WEBSITE_URL } from '../login/constants'
 import { useChatStore } from '../state/chat-store'
-import {
-  getAlwaysUseALaCarte,
-  setAlwaysUseALaCarte,
-} from '../utils/settings'
 import { formatResetTime } from '../utils/time-format'
 import { BORDER_CHARS } from '../utils/ui-constants'
 
@@ -38,14 +35,11 @@ export const SubscriptionLimitBanner = () => {
   const currentTier = subscriptionData?.hasSubscription ? subscriptionData.subscription.tier : 0
   const canUpgrade = currentTier < maxTier
 
-  const [alwaysALaCarte, setAlwaysALaCarteState] = React.useState(
-    () => getAlwaysUseALaCarte(),
-  )
+  const fallbackToALaCarte = subscriptionData?.fallbackToALaCarte ?? false
+  const updatePreference = useUpdatePreference()
 
-  const handleToggleAlwaysALaCarte = () => {
-    const newValue = !alwaysALaCarte
-    setAlwaysALaCarteState(newValue)
-    setAlwaysUseALaCarte(newValue)
+  const handleToggleFallbackToALaCarte = () => {
+    updatePreference.mutate({ fallbackToALaCarte: !fallbackToALaCarte })
   }
 
   if (!subscriptionData || !rateLimit?.limited) {
@@ -138,9 +132,9 @@ export const SubscriptionLimitBanner = () => {
         </box>
 
         {hasAlaCarteCredits && (
-          <Button onClick={handleToggleAlwaysALaCarte}>
+          <Button onClick={handleToggleFallbackToALaCarte}>
             <text style={{ fg: theme.muted }}>
-              {alwaysALaCarte ? '[x]' : '[ ]'} always use credits if subscription limit is reached
+              {fallbackToALaCarte ? '[x]' : '[ ]'} always use credits if subscription limit is reached
             </text>
           </Button>
         )}

cli/src/components/usage-banner.tsx

@@ -1,7 +1,7 @@
 import { isClaudeOAuthValid } from '@codebuff/sdk'
 import { TextAttributes } from '@opentui/core'
 import open from 'open'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo } from 'react'
 
 import { BottomBanner } from './bottom-banner'
 import { Button } from './button'
@@ -10,9 +10,9 @@ import { getActivityQueryData } from '../hooks/use-activity-query'
 import { useClaudeQuotaQuery } from '../hooks/use-claude-quota-query'
 import { useSubscriptionQuery } from '../hooks/use-subscription-query'
 import { useTheme } from '../hooks/use-theme'
+import { useUpdatePreference } from '../hooks/use-update-preference'
 import { usageQueryKeys, useUsageQuery } from '../hooks/use-usage-query'
 import { WEBSITE_URL } from '../login/constants'
-import { getAlwaysUseALaCarte, setAlwaysUseALaCarte } from '../utils/settings'
 import { useChatStore } from '../state/chat-store'
 import { formatResetTime, formatResetTimeLong } from '../utils/time-format'
 import {
@@ -122,6 +122,7 @@ export const UsageBanner = ({ showTime }: { showTime: number }) => {
             subscriptionInfo={subscriptionInfo}
             rateLimit={rateLimit}
             isLoading={isSubscriptionLoading}
+            fallbackToALaCarte={activeSubscription.fallbackToALaCarte}
           />
         )}
 
@@ -209,21 +210,21 @@ interface SubscriptionUsageSectionProps {
     weeklyResetsAt: string
   }
   isLoading: boolean
+  fallbackToALaCarte: boolean
 }
 
 const SubscriptionUsageSection: React.FC<SubscriptionUsageSectionProps> = ({
   displayName,
   subscriptionInfo,
   rateLimit,
   isLoading,
+  fallbackToALaCarte,
 }) => {
   const theme = useTheme()
-  const [useALaCarte, setUseALaCarte] = useState(() => getAlwaysUseALaCarte())
+  const updatePreference = useUpdatePreference()
 
-  const handleToggleALaCarte = () => {
-    const newValue = !useALaCarte
-    setUseALaCarte(newValue)
-    setAlwaysUseALaCarte(newValue)
+  const handleToggleFallbackToALaCarte = () => {
+    updatePreference.mutate({ fallbackToALaCarte: !fallbackToALaCarte })
   }
 
   const blockPercent = useMemo(() => {
@@ -268,11 +269,11 @@ const SubscriptionUsageSection: React.FC<SubscriptionUsageSectionProps> = ({
       <box style={{ flexDirection: 'row', alignItems: 'center', gap: 1, marginTop: 1 }}>
         <text style={{ fg: theme.muted }}>When limit reached:</text>
         <text style={{ fg: theme.muted }}>
-          {useALaCarte ? 'spend credits' : 'pause'}
+          {fallbackToALaCarte ? 'spend credits' : 'pause'}
         </text>
-        <Button onClick={handleToggleALaCarte}>
+        <Button onClick={handleToggleFallbackToALaCarte}>
           <text style={{ fg: theme.muted, attributes: TextAttributes.UNDERLINE }}>
-            [{useALaCarte ? 'switch to pause' : 'switch to spend credits'}]
+            [{fallbackToALaCarte ? 'switch to pause' : 'switch to spend credits'}]
           </text>
         </Button>
       </box>

cli/src/hooks/use-update-preference.ts

@@ -0,0 +1,61 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { subscriptionQueryKeys } from './use-subscription-query'
+import { getApiClient } from '../utils/codebuff-api'
+import { logger } from '../utils/logger'
+
+import type { SubscriptionResponse } from '@codebuff/common/types/subscription'
+
+interface UpdatePreferenceParams {
+  fallbackToALaCarte?: boolean
+}
+
+export function useUpdatePreference() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (params: UpdatePreferenceParams) => {
+      const client = getApiClient()
+      const response = await client.patch('/api/user/preferences', {
+        body: params,
+        includeCookie: true,
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to update preference')
+      }
+
+      return params
+    },
+    onMutate: async (newParams) => {
+      // Cancel any outgoing refetches
+      await queryClient.cancelQueries({ queryKey: subscriptionQueryKeys.current() })
+
+      // Snapshot the previous value
+      const previousData = queryClient.getQueryData<SubscriptionResponse>(
+        subscriptionQueryKeys.current()
+      )
+
+      // Optimistically update to the new value
+      if (previousData && newParams.fallbackToALaCarte !== undefined) {
+        queryClient.setQueryData<SubscriptionResponse>(
+          subscriptionQueryKeys.current(),
+          { ...previousData, fallbackToALaCarte: newParams.fallbackToALaCarte }
+        )
+      }
+
+      return { previousData }
+    },
+    onError: (err, _newParams, context) => {
+      // Rollback to previous value on error
+      if (context?.previousData) {
+        queryClient.setQueryData(subscriptionQueryKeys.current(), context.previousData)
+      }
+      logger.error({ err }, 'Failed to update preference')
+    },
+    onSettled: () => {
+      // Refetch after mutation
+      queryClient.invalidateQueries({ queryKey: subscriptionQueryKeys.current() })
+    },
+  })
+}

cli/src/utils/settings.ts

@@ -20,7 +20,10 @@ const DEFAULT_SETTINGS: Settings = {
 export interface Settings {
   mode?: AgentMode
   adsEnabled?: boolean
+  /** @deprecated Use server-side fallbackToALaCarte setting instead */
   alwaysUseALaCarte?: boolean
+  /** @deprecated Use server-side fallbackToALaCarte setting instead */
+  fallbackToALaCarte?: boolean
 }
 
 /**
@@ -93,11 +96,16 @@ const validateSettings = (parsed: unknown): Settings => {
     settings.adsEnabled = obj.adsEnabled
   }
 
-  // Validate alwaysUseALaCarte
+  // Validate alwaysUseALaCarte (legacy)
   if (typeof obj.alwaysUseALaCarte === 'boolean') {
     settings.alwaysUseALaCarte = obj.alwaysUseALaCarte
   }
 
+  // Validate fallbackToALaCarte (legacy)
+  if (typeof obj.fallbackToALaCarte === 'boolean') {
+    settings.fallbackToALaCarte = obj.fallbackToALaCarte
+  }
+
   return settings
 }
 
@@ -143,15 +151,17 @@ export const saveModePreference = (mode: AgentMode): void => {
 
 /**
  * Load the "always use a-la-carte" preference
+ * @deprecated Use server-side fallbackToALaCarte setting via useSubscriptionQuery instead
  */
 export const getAlwaysUseALaCarte = (): boolean => {
   const settings = loadSettings()
-  return settings.alwaysUseALaCarte ?? false
+  return settings.fallbackToALaCarte ?? settings.alwaysUseALaCarte ?? false
 }
 
 /**
  * Save the "always use a-la-carte" preference
+ * @deprecated Use server-side fallbackToALaCarte setting via useUpdatePreference instead
  */
 export const setAlwaysUseALaCarte = (value: boolean): void => {
-  saveSettings({ alwaysUseALaCarte: value })
+  saveSettings({ fallbackToALaCarte: value })
 }

common/src/types/subscription.ts

@@ -40,6 +40,8 @@ export interface SubscriptionLimits {
  */
 export interface NoSubscriptionResponse {
   hasSubscription: false
+  /** Whether user prefers to fallback to a-la-carte credits when subscription limits are reached */
+  fallbackToALaCarte: boolean
 }
 
 /**
@@ -53,6 +55,8 @@ export interface ActiveSubscriptionResponse {
   rateLimit: SubscriptionRateLimit
   limits: SubscriptionLimits
   billingPortalUrl?: string
+  /** Whether user prefers to fallback to a-la-carte credits when subscription limits are reached */
+  fallbackToALaCarte: boolean
 }
 
 /**

packages/internal/src/db/migrations/0040_empty_phil_sheldon.sql

@@ -0,0 +1 @@
+ALTER TABLE "user" ADD COLUMN "fallback_to_a_la_carte" boolean DEFAULT false NOT NULL;