Replace /referral with /refer-friends and let them copy referral url

Author: jahooma

cli/src/commands/command-registry.ts

@@ -230,8 +230,8 @@ export const COMMAND_REGISTRY: CommandDefinition[] = [
     },
   }),
   defineCommandWithArgs({
-    name: 'referral',
-    aliases: ['redeem'],
+    name: 'refer-friends',
+    aliases: ['referral', 'redeem'],
     handler: async (params, args) => {
       const trimmedArgs = args.trim()
 

cli/src/components/bottom-banner.tsx

@@ -32,6 +32,8 @@ export interface BottomBannerConfig {
   children?: React.ReactNode
   /** Called when close button is clicked. If not provided, no close button is shown. */
   onClose?: () => void
+  /** Which border sides to render. Defaults to ['bottom', 'left', 'right']. */
+  border?: ('top' | 'bottom' | 'left' | 'right')[]
 }
 
 export type BottomBannerProps = BottomBannerConfig
@@ -66,6 +68,7 @@ export const BottomBanner: React.FC<BottomBannerProps> = ({
   text,
   children,
   onClose,
+  border,
 }) => {
   const { width, terminalWidth } = useTerminalLayout()
   const theme = useTheme()
@@ -96,7 +99,7 @@ export const BottomBanner: React.FC<BottomBannerProps> = ({
         marginTop: 0,
         marginBottom: 0,
       }}
-      border={['bottom', 'left', 'right']}
+      border={border ?? ['bottom', 'left', 'right']}
       customBorderChars={BORDER_CHARS}
     >
       {hasTextContent ? (

cli/src/components/chat-input-bar.tsx

@@ -195,6 +195,11 @@ export const ChatInputBar = ({
     return <InputModeBanner />
   }
 
+  // Referral mode: show only the referral banner (no input box)
+  if (inputMode === 'referral') {
+    return <InputModeBanner />
+  }
+
   // Handle input changes with special mode entry detection
   const handleInputChange = (value: InputValue) => {
     // Detect entering bash mode: user typed exactly '!' when in default mode

cli/src/components/referral-banner.tsx

@@ -1,19 +1,122 @@
+import { CREDITS_REFERRAL_BONUS } from '@codebuff/common/old-constants'
 import { WEBSITE_URL } from '@codebuff/sdk'
-import React from 'react'
+import { useQuery } from '@tanstack/react-query'
+import React, { useState } from 'react'
 
 import { BottomBanner } from './bottom-banner'
+import { Button } from './button'
 import { useChatStore } from '../state/chat-store'
+import { useTheme } from '../hooks/use-theme'
+import { useTimeout } from '../hooks/use-timeout'
+import { getAuthToken } from '../utils/auth'
+import { getApiClient } from '../utils/codebuff-api'
+import { copyTextToClipboard } from '../utils/clipboard'
+import { BORDER_CHARS } from '../utils/ui-constants'
+
+interface ReferralData {
+  referralCode: string
+  referrals: { id: string }[]
+  referralLimit: number
+}
 
 export const ReferralBanner = () => {
   const setInputMode = useChatStore((state) => state.setInputMode)
+  const theme = useTheme()
+  const [isHovered, setIsHovered] = useState(false)
+  const [isCopied, setIsCopied] = useState(false)
+  const { setTimeout } = useTimeout()
+  const authToken = getAuthToken()
+
+  const { data: referralData } = useQuery({
+    queryKey: ['referrals'],
+    queryFn: async () => {
+      const client = getApiClient()
+      const response = await client.get<ReferralData>('/api/referrals', {
+        includeCookie: true,
+      })
+      if (!response.ok) {
+        throw new Error(`Failed to fetch referral data: ${response.status}`)
+      }
+      return response.data!
+    },
+    enabled: !!authToken,
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  })
+
+  const referralCode = referralData?.referralCode ?? null
+  const referralLink = referralCode ? `${WEBSITE_URL}/referrals/${referralCode}` : null
+  const referralCount = referralData?.referrals.length ?? null
+  const referralLimit = referralData?.referralLimit ?? null
 
-  const referralUrl = `${WEBSITE_URL}/referrals`
+  const handleCopy = async () => {
+    if (!referralLink) return
+    try {
+      await copyTextToClipboard(referralLink, { suppressGlobalMessage: true })
+      setIsCopied(true)
+      setTimeout('reset-copied', () => setIsCopied(false), 2000)
+    } catch {
+      // Error is already logged and displayed by copyTextToClipboard
+    }
+  }
+
+  const copyLabel = isCopied ? '✔ Copied!' : '⎘ Copy referral link'
 
   return (
     <BottomBanner
-      borderColorKey="warning"
-      text={`Refer your friends: ${referralUrl}`}
+      borderColorKey="primary"
+      border={['top', 'bottom', 'left', 'right']}
       onClose={() => setInputMode('default')}
-    />
+    >
+      <box style={{ flexDirection: 'column', gap: 0, flexGrow: 1, marginRight: 3 }}>
+        <text style={{ fg: theme.foreground }}>
+          {`Share this link with friends and you'll both earn ${CREDITS_REFERRAL_BONUS} credits`}
+        </text>
+
+        {referralCount !== null && referralLimit !== null && (
+          <text style={{ fg: theme.muted }}>
+            {`You've referred ${referralCount}/${referralLimit} people`}
+          </text>
+        )}
+
+        {referralLink ? (
+          <box style={{ flexDirection: 'column', gap: 0 }}>
+            <text style={{ fg: theme.muted }}>{referralLink}</text>
+            <box style={{ flexDirection: 'row', paddingTop: 0 }}>
+              <Button
+                onClick={handleCopy}
+                onMouseOver={() => setIsHovered(true)}
+                onMouseOut={() => setIsHovered(false)}
+                style={{
+                  paddingLeft: 1,
+                  paddingRight: 1,
+                  borderStyle: 'single',
+                  borderColor: isCopied
+                    ? 'green'
+                    : isHovered
+                      ? theme.foreground
+                      : theme.primary,
+                  customBorderChars: BORDER_CHARS,
+                }}
+              >
+                <text
+                  style={{
+                    fg: isCopied
+                      ? 'green'
+                      : isHovered
+                        ? theme.foreground
+                        : theme.primary,
+                  }}
+                >
+                  {copyLabel}
+                </text>
+              </Button>
+            </box>
+          </box>
+        ) : (
+          <text style={{ fg: theme.muted }}>Loading referral link...</text>
+        )}
+      </box>
+    </BottomBanner>
   )
 }

cli/src/data/slash-commands.ts

@@ -1,4 +1,5 @@
 import { AGENT_MODES } from '../utils/constants'
+import { CREDITS_REFERRAL_BONUS } from '@codebuff/common/old-constants'
 
 import type { SkillsMap } from '@codebuff/common/types/skill'
 
@@ -51,6 +52,12 @@ export const SLASH_COMMANDS: SlashCommand[] = [
     label: 'ads:disable',
     description: 'Disable contextual ads and stop earning credits',
   },
+  {
+    id: 'refer-friends',
+    label: 'refer-friends',
+    description: `Refer friends for ${CREDITS_REFERRAL_BONUS} bonus credits each`,
+    aliases: ['referral'],
+  },
   {
     id: 'init',
     label: 'init',
@@ -127,12 +134,6 @@ export const SLASH_COMMANDS: SlashCommand[] = [
     aliases: ['img', 'attach'],
   },
   ...MODE_COMMANDS,
-  {
-    id: 'referral',
-    label: 'referral',
-    description: 'Redeem a referral code for bonus credits',
-    aliases: ['redeem'],
-  },
   // {
   //   id: 'publish',
   //   label: 'publish',