fix: address code review feedback for fallbackToALaCarte feature

- Fix syntax error (stray "the" token) in preferences API route
- Fix CLI cache mismatch: use setActivityQueryData instead of TanStack Query
- Update chat.tsx to use server-side fallbackToALaCarte instead of local setting
- Add disabled state to toggle buttons while mutation is pending
- Add query invalidation to web mutation onSettled
- Improve CLI mutation error handling to show actual server error
- Remove deprecated getAlwaysUseALaCarte/setAlwaysUseALaCarte functions

Author: brandonkachen

cli/src/chat.tsx

@@ -58,7 +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 { getAlwaysUseALaCarte } from './utils/settings'
+
 import {
   type ChatKeyboardState,
   createDefaultChatKeyboardState,
@@ -1288,12 +1288,13 @@ export const Chat = ({
   // 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 (!getAlwaysUseALaCarte()) {
+      if (!fallbackToALaCarte) {
         useChatStore.getState().setInputMode('subscriptionLimit')
       }
     } else if (!isLimited) {
@@ -1302,7 +1303,7 @@ export const Chat = ({
         useChatStore.getState().setInputMode('default')
       }
     }
-  }, [subscriptionRateLimit?.limited])
+  }, [subscriptionRateLimit?.limited, fallbackToALaCarte])
 
   const inputBoxTitle = useMemo(() => {
     const segments: string[] = []

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

@@ -132,9 +132,9 @@ export const SubscriptionLimitBanner = () => {
         </box>
 
         {hasAlaCarteCredits && (
-          <Button onClick={handleToggleFallbackToALaCarte}>
+          <Button onClick={handleToggleFallbackToALaCarte} disabled={updatePreference.isPending}>
             <text style={{ fg: theme.muted }}>
-              {fallbackToALaCarte ? '[x]' : '[ ]'} always use credits if subscription limit is reached
+              {updatePreference.isPending ? '[...]' : fallbackToALaCarte ? '[x]' : '[ ]'} always use credits if subscription limit is reached
             </text>
           </Button>
         )}

cli/src/components/usage-banner.tsx

@@ -122,7 +122,7 @@ export const UsageBanner = ({ showTime }: { showTime: number }) => {
             subscriptionInfo={subscriptionInfo}
             rateLimit={rateLimit}
             isLoading={isSubscriptionLoading}
-            fallbackToALaCarte={activeSubscription.fallbackToALaCarte}
+            fallbackToALaCarte={activeSubscription.fallbackToALaCarte ?? false}
           />
         )}
 
@@ -271,9 +271,9 @@ const SubscriptionUsageSection: React.FC<SubscriptionUsageSectionProps> = ({
         <text style={{ fg: theme.muted }}>
           {fallbackToALaCarte ? 'spend credits' : 'pause'}
         </text>
-        <Button onClick={handleToggleFallbackToALaCarte}>
+        <Button onClick={handleToggleFallbackToALaCarte} disabled={updatePreference.isPending}>
           <text style={{ fg: theme.muted, attributes: TextAttributes.UNDERLINE }}>
-            [{fallbackToALaCarte ? 'switch to pause' : 'switch to spend credits'}]
+            {updatePreference.isPending ? '[updating...]' : `[${fallbackToALaCarte ? 'switch to pause' : 'switch to spend credits'}]`}
           </text>
         </Button>
       </box>

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

@@ -1,5 +1,10 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useCallback, useState } from 'react'
 
+import {
+  getActivityQueryData,
+  invalidateActivityQuery,
+  setActivityQueryData,
+} from './use-activity-query'
 import { subscriptionQueryKeys } from './use-subscription-query'
 import { getApiClient } from '../utils/codebuff-api'
 import { logger } from '../utils/logger'
@@ -11,51 +16,49 @@ interface UpdatePreferenceParams {
 }
 
 export function useUpdatePreference() {
-  const queryClient = useQueryClient()
+  const [isPending, setIsPending] = useState(false)
 
-  return useMutation({
-    mutationFn: async (params: UpdatePreferenceParams) => {
-      const client = getApiClient()
-      const response = await client.patch('/api/user/preferences', {
-        body: params,
-        includeCookie: true,
-      })
+  const mutate = useCallback(async (params: UpdatePreferenceParams) => {
+    const queryKey = subscriptionQueryKeys.current()
 
-      if (!response.ok) {
-        throw new Error('Failed to update preference')
-      }
+    // Snapshot the previous value for rollback
+    const previousData = getActivityQueryData<SubscriptionResponse>(queryKey)
 
-      return params
-    },
-    onMutate: async (newParams) => {
-      // Cancel any outgoing refetches
-      await queryClient.cancelQueries({ queryKey: subscriptionQueryKeys.current() })
+    // Optimistically update to the new value
+    if (previousData && params.fallbackToALaCarte !== undefined) {
+      setActivityQueryData<SubscriptionResponse>(queryKey, {
+        ...previousData,
+        fallbackToALaCarte: params.fallbackToALaCarte,
+      })
+    }
 
-      // Snapshot the previous value
-      const previousData = queryClient.getQueryData<SubscriptionResponse>(
-        subscriptionQueryKeys.current()
+    setIsPending(true)
+
+    try {
+      const client = getApiClient()
+      const response = await client.patch<{ success: boolean; error?: string }>(
+        '/api/user/preferences',
+        params as Record<string, unknown>,
+        { includeCookie: true },
       )
 
-      // Optimistically update to the new value
-      if (previousData && newParams.fallbackToALaCarte !== undefined) {
-        queryClient.setQueryData<SubscriptionResponse>(
-          subscriptionQueryKeys.current(),
-          { ...previousData, fallbackToALaCarte: newParams.fallbackToALaCarte }
-        )
+      if (!response.ok) {
+        const errorMessage = response.error || 'Failed to update preference'
+        throw new Error(errorMessage)
       }
 
-      return { previousData }
-    },
-    onError: (err, _newParams, context) => {
+      // Invalidate to refetch fresh data from server
+      invalidateActivityQuery(queryKey)
+    } catch (err) {
       // Rollback to previous value on error
-      if (context?.previousData) {
-        queryClient.setQueryData(subscriptionQueryKeys.current(), context.previousData)
+      if (previousData) {
+        setActivityQueryData(queryKey, previousData)
       }
       logger.error({ err }, 'Failed to update preference')
-    },
-    onSettled: () => {
-      // Refetch after mutation
-      queryClient.invalidateQueries({ queryKey: subscriptionQueryKeys.current() })
-    },
-  })
+    } finally {
+      setIsPending(false)
+    }
+  }, [])
+
+  return { mutate, isPending }
 }

cli/src/utils/settings.ts

@@ -149,19 +149,3 @@ export const saveModePreference = (mode: AgentMode): void => {
   saveSettings({ mode })
 }
 
-/**
- * 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.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({ fallbackToALaCarte: value })
-}

web/src/app/api/user/preferences/route.ts

@@ -55,7 +55,7 @@ export async function PATCH(request: Request) {
       .update(schema.user)
       .set(updates)
       .where(eq(schema.user.id, userId))
-the 
+
     logger.info({ userId, updates }, 'User preferences updated')
 
     return NextResponse.json({ success: true, ...parsed.data })

web/src/app/profile/components/subscription-section.tsx

@@ -76,13 +76,17 @@ function SubscriptionActive({ data, email }: { data: ActiveSubscriptionResponse;
         old ? { ...old, fallbackToALaCarte: newValue } : old
       )
     },
-    onError: (error: Error) => {
+    onError: (err: Error) => {
       toast({
         title: 'Error',
-        description: error.message,
+        description: err.message,
         variant: 'destructive',
       })
     },
+    onSettled: () => {
+      // Refetch to ensure consistency with server
+      queryClient.invalidateQueries({ queryKey: ['subscription'] })
+    },
   })
 
   const blockRemainingPercent =