refactor(cli): improve referral mode UX and decouple tests from config

values

- Simplify referral banner to show static URL instead of fetching
user-specific link - Update placeholder to "have a code? enter it here"
- Refactor tests to use getInputModeConfig() instead of hardcoded
strings

Author: brandonkachen

cli/src/__tests__/referral-mode.test.ts

@@ -1,5 +1,7 @@
 import { describe, test, expect, mock } from 'bun:test'
 
+import { getInputModeConfig } from '../utils/input-modes'
+
 import type { InputMode } from '../utils/input-modes'
 
 /**
@@ -353,81 +355,58 @@ describe('referral-mode', () => {
     })
 
     test('input width is adjusted in referral mode for icon column', () => {
-      const baseInputWidth = 100
-      const inputMode = 'referral' as InputMode
+      const referralConfig = getInputModeConfig('referral')
 
-      // Width should be reduced by 2 to account for '◎' icon and spacing
-      const widthAdjustment = inputMode === 'referral' ? 2 : 0
-      const adjustedInputWidth = baseInputWidth - widthAdjustment
-
-      expect(adjustedInputWidth).toBe(98)
+      expect(referralConfig.widthAdjustment).toBeGreaterThan(0)
     })
 
     test('input width is NOT adjusted when not in referral mode', () => {
-      const baseInputWidth = 100
-      const inputMode = 'default' as InputMode
+      const defaultConfig = getInputModeConfig('default')
 
-      const widthAdjustment = inputMode === 'referral' ? 2 : 0
-      const adjustedInputWidth = baseInputWidth - widthAdjustment
-
-      expect(adjustedInputWidth).toBe(100)
+      expect(defaultConfig.widthAdjustment).toBe(0)
     })
 
     test('placeholder changes in referral mode', () => {
-      const normalPlaceholder = 'type a message...'
-      const referralPlaceholder = 'enter referral code (e.g. ref-abc123)...'
-      const inputMode = 'referral' as InputMode
+      const defaultConfig = getInputModeConfig('default')
+      const referralConfig = getInputModeConfig('referral')
 
-      const effectivePlaceholder =
-        inputMode === 'referral' ? referralPlaceholder : normalPlaceholder
-
-      expect(effectivePlaceholder).toBe('enter referral code (e.g. ref-abc123)...')
+      expect(referralConfig.placeholder).not.toBe(defaultConfig.placeholder)
     })
 
-    test('placeholder is normal when not in referral mode', () => {
-      const normalPlaceholder = 'type a message...'
-      const referralPlaceholder = 'enter referral code (e.g. ref-abc123)...'
-      const inputMode = 'default' as InputMode
+    test('referral mode has a placeholder', () => {
+      const referralConfig = getInputModeConfig('referral')
 
-      const effectivePlaceholder =
-        inputMode === 'referral' ? referralPlaceholder : normalPlaceholder
-
-      expect(effectivePlaceholder).toBe('type a message...')
+      expect(referralConfig.placeholder.length).toBeGreaterThan(0)
     })
 
     test('icon is displayed in referral mode', () => {
-      const inputMode = 'referral' as InputMode
-      const icon = inputMode === 'referral' ? '◎' : null
+      const referralConfig = getInputModeConfig('referral')
 
-      expect(icon).toBe('◎')
+      expect(referralConfig.icon).not.toBeNull()
     })
 
     test('no icon is displayed in default mode', () => {
-      const inputMode = 'default' as InputMode
-      const icon = inputMode === 'referral' ? '◎' : null
+      const defaultConfig = getInputModeConfig('default')
 
-      expect(icon).toBe(null)
+      expect(defaultConfig.icon).toBeNull()
     })
 
     test('border color changes to warning in referral mode', () => {
-      const inputMode = 'referral' as InputMode
-      const color = inputMode === 'referral' ? 'warning' : 'foreground'
+      const referralConfig = getInputModeConfig('referral')
 
-      expect(color).toBe('warning')
+      expect(referralConfig.color).toBe('warning')
     })
 
     test('agent mode toggle is hidden in referral mode', () => {
-      const inputMode = 'referral' as InputMode
-      const showAgentModeToggle = inputMode === 'default'
+      const referralConfig = getInputModeConfig('referral')
 
-      expect(showAgentModeToggle).toBe(false)
+      expect(referralConfig.showAgentModeToggle).toBe(false)
     })
 
     test('agent mode toggle is shown in default mode', () => {
-      const inputMode = 'default' as InputMode
-      const showAgentModeToggle = inputMode === 'default'
+      const defaultConfig = getInputModeConfig('default')
 
-      expect(showAgentModeToggle).toBe(true)
+      expect(defaultConfig.showAgentModeToggle).toBe(true)
     })
   })
 
@@ -472,10 +451,9 @@ describe('referral-mode', () => {
     })
 
     test('slash suggestions are disabled in referral mode', () => {
-      const inputMode = 'referral' as InputMode
-      const disableSlashSuggestions = inputMode !== 'default'
+      const referralConfig = getInputModeConfig('referral')
 
-      expect(disableSlashSuggestions).toBe(true)
+      expect(referralConfig.disableSlashSuggestions).toBe(true)
     })
   })
 

cli/src/components/referral-banner.tsx

@@ -2,32 +2,19 @@ import React from 'react'
 
 import { BannerWrapper } from './banner-wrapper'
 import { useTheme } from '../hooks/use-theme'
-import { useUserDetailsQuery } from '../hooks/use-user-details-query'
 import { useChatStore } from '../state/chat-store'
+import { WEBSITE_URL } from '@codebuff/sdk'
 
 export const ReferralBanner = () => {
   const theme = useTheme()
   const setInputMode = useChatStore((state) => state.setInputMode)
 
-  const { data: userDetails, isLoading, isError, error } = useUserDetailsQuery({
-    fields: ['referral_link'] as const,
-    enabled: true,
-  })
-
-  const referralLink = userDetails?.referral_link ?? null
-  const isAuthError = error?.message?.includes('401')
-
-  let text = ''
-  if (isLoading) text = 'Loading your referral link...'
-  else if (isAuthError) text = 'Session expired. Please log in again to view your referral link.'
-  else if (isError) text = 'Failed to load your referral link. Please try again later.'
-  else if (!referralLink) text = 'Your referral link is not available yet'
-  else text = `Share this link with friends:\n${referralLink}`
+  const referralUrl = `${WEBSITE_URL}/referrals`
 
   return (
     <BannerWrapper
       color={theme.warning}
-      text={text}
+      text={`Refer your friends: ${referralUrl}`}
       onClose={() => setInputMode('default')}
     />
   )

cli/src/hooks/__tests__/use-user-details-query.test.ts

@@ -36,7 +36,7 @@ describe('fetchUserDetails', () => {
       await expect(
         fetchUserDetails({
           authToken: 'invalid-token',
-          fields: ['referral_link'] as const,
+          fields: ['email'] as const,
           logger: mockLogger,
           apiClient,
         }),
@@ -55,7 +55,7 @@ describe('fetchUserDetails', () => {
       await expect(
         fetchUserDetails({
           authToken: 'valid-token',
-          fields: ['referral_link'] as const,
+          fields: ['email'] as const,
           logger: mockLogger,
           apiClient,
         }),
@@ -74,7 +74,7 @@ describe('fetchUserDetails', () => {
       await expect(
         fetchUserDetails({
           authToken: 'valid-token',
-          fields: ['referral_link'] as const,
+          fields: ['email'] as const,
           logger: mockLogger,
           apiClient,
         }),
@@ -118,7 +118,7 @@ describe('fetchUserDetails', () => {
       await expect(
         fetchUserDetails({
           authToken: 'valid-token',
-          fields: ['referral_link'] as const,
+          fields: ['email'] as const,
           logger: testLogger,
           apiClient,
         }),
@@ -131,7 +131,7 @@ describe('fetchUserDetails', () => {
   describe('successful responses', () => {
     test('returns user details on successful response', async () => {
       const mockUserDetails = {
-        referral_link: 'https://codebuff.com/r/abc123',
+        email: 'test@example.com',
       }
 
       const meMock = mock(() =>
@@ -145,17 +145,17 @@ describe('fetchUserDetails', () => {
 
       const result = await fetchUserDetails({
         authToken: 'valid-token',
-        fields: ['referral_link'] as const,
+        fields: ['email'] as const,
         logger: mockLogger,
         apiClient,
       })
 
       expect(result).toEqual(mockUserDetails)
     })
 
-    test('returns null referral_link when not set', async () => {
+    test('returns null referral_code when not set', async () => {
       const mockUserDetails = {
-        referral_link: null,
+        referral_code: null,
       }
 
       const meMock = mock(() =>
@@ -169,12 +169,12 @@ describe('fetchUserDetails', () => {
 
       const result = await fetchUserDetails({
         authToken: 'valid-token',
-        fields: ['referral_link'] as const,
+        fields: ['referral_code'] as const,
         logger: mockLogger,
         apiClient,
       })
 
-      expect(result?.referral_link).toBe(null)
+      expect(result?.referral_code).toBe(null)
     })
   })
 
@@ -187,7 +187,7 @@ describe('fetchUserDetails', () => {
       await expect(
         fetchUserDetails({
           authToken: 'valid-token',
-          fields: ['referral_link'] as const,
+          fields: ['email'] as const,
           logger: mockLogger,
         }),
       ).rejects.toThrow()

cli/src/utils/codebuff-api.ts

@@ -20,17 +20,10 @@ export type ApiResponse<T> =
 // ============================================================================
 
 /** User fields that can be fetched from /api/v1/me */
-export type UserField =
-  | 'id'
-  | 'email'
-  | 'discord_id'
-  | 'referral_code'
-  | 'referral_link'
+export type UserField = 'id' | 'email' | 'discord_id' | 'referral_code'
 
 export type UserDetails<T extends UserField = UserField> = {
-  [K in T]: K extends 'discord_id' | 'referral_code' | 'referral_link'
-    ? string | null
-    : string
+  [K in T]: K extends 'discord_id' | 'referral_code' ? string | null : string
 }
 
 export interface UsageRequest {

cli/src/utils/input-modes.ts

@@ -6,7 +6,14 @@
 export type InputMode = 'default' | 'bash' | 'referral' | 'usage'
 
 // Theme color keys that are valid color values (must match ChatTheme keys)
-export type ThemeColorKey = 'foreground' | 'background' | 'error' | 'warning' | 'success' | 'info' | 'muted'
+export type ThemeColorKey =
+  | 'foreground'
+  | 'background'
+  | 'error'
+  | 'warning'
+  | 'success'
+  | 'info'
+  | 'muted'
 
 export type InputModeConfig = {
   /** Prefix icon shown before input (e.g., "!" for bash) */
@@ -43,7 +50,7 @@ export const INPUT_MODE_CONFIGS: Record<InputMode, InputModeConfig> = {
   referral: {
     icon: '◎',
     color: 'warning',
-    placeholder: 'enter referral code (e.g. ref-abc123)...',
+    placeholder: 'have a code? enter it here',
     widthAdjustment: 2, // 1 char + 1 padding
     showAgentModeToggle: false,
     disableSlashSuggestions: true,