feat(web): show referrer name in referral onboarding flow

- Display referrer name on referral landing page and onboarding steps
- Pass referrerName prop through OnboardClientWrapper to OnboardingFlow
- Personalize welcome message: "{name} invited you to Codebuff!"
- Show mutual benefit on redeem step: "You and {name} will both earn credits!"
- Fix React 19 useFormState -> useActionState migration in affiliates page

Author: brandonkachen

web/src/app/affiliates/affiliates-client.tsx

@@ -7,8 +7,8 @@ import {
 } from '@codebuff/common/old-constants'
 import Link from 'next/link'
 import { useSession } from 'next-auth/react'
-import React, { useEffect, useState, useCallback } from 'react'
-import { useFormState, useFormStatus } from 'react-dom'
+import React, { useEffect, useState, useCallback, useActionState } from 'react'
+import { useFormStatus } from 'react-dom'
 
 import { setAffiliateHandleAction } from './actions'
 
@@ -49,7 +49,7 @@ function SetHandleForm({
     success: false,
     fieldErrors: {},
   }
-  const [state, formAction] = useFormState(
+  const [state, formAction] = useActionState(
     setAffiliateHandleAction,
     initialState,
   )

web/src/app/referrals/[code]/page.tsx

@@ -1,4 +1,5 @@
 import { env } from '@codebuff/common/env'
+import { CREDITS_REFERRAL_BONUS } from '@codebuff/common/old-constants'
 import { headers } from 'next/headers'
 import Link from 'next/link'
 import { getServerSession } from 'next-auth'
@@ -113,13 +114,18 @@ export default async function ReferralPage({
 
   // Show onboarding flow for valid referrals
   return (
-    <OnboardClientWrapper hasReferralCode={true} referralCode={code}>
+    <OnboardClientWrapper
+      hasReferralCode={true}
+      referralCode={code}
+      referrerName={referrerDisplayName}
+    >
       <CardWithBeams
-        title="Welcome to Codebuff!"
-        description="You can close this window and continue with the installation."
+        title={`${referrerDisplayName} invited you to Codebuff!`}
+        description={`Sign up and you'll both earn ${CREDITS_REFERRAL_BONUS} bonus credits per month.`}
         content={
           <div className="text-center text-muted-foreground">
-            Your referral code is ready to use in the CLI!
+            Follow the steps below to get started, then redeem your referral
+            code in the CLI!
           </div>
         }
       />

web/src/components/onboard/onboard-client-wrapper.tsx

@@ -8,12 +8,14 @@ import { OnboardingFlow } from './onboarding-flow'
 interface OnboardClientWrapperProps {
   hasReferralCode: boolean
   referralCode?: string
+  referrerName?: string
   children: React.ReactNode
 }
 
 export function OnboardClientWrapper({
   hasReferralCode,
   referralCode,
+  referrerName,
   children,
 }: OnboardClientWrapperProps) {
   const [hasStoredReferral, setHasStoredReferral] = useState(false)
@@ -61,6 +63,7 @@ export function OnboardClientWrapper({
         <OnboardingFlow
           hasReferralCode={shouldShowOnboarding}
           referralCode={actualReferralCode || undefined}
+          referrerName={referrerName}
           onComplete={handleOnboardingComplete}
         />
       </div>

web/src/components/onboard/onboarding-flow.tsx

@@ -29,6 +29,7 @@ import { cn } from '@/lib/utils'
 interface OnboardingFlowProps {
   hasReferralCode: boolean
   referralCode?: string
+  referrerName?: string
   onComplete?: () => void
 }
 
@@ -98,6 +99,7 @@ const detectOS = (): OS => {
 export function OnboardingFlow({
   hasReferralCode,
   referralCode,
+  referrerName,
   onComplete,
 }: OnboardingFlowProps) {
   const [mounted, setMounted] = useState(false)
@@ -213,12 +215,13 @@ export function OnboardingFlow({
     <div className="space-y-4">
       <h3 className="text-xl font-semibold">🎉 Redeem Your Referral Code</h3>
       <p className="text-muted-foreground">
-        You're almost done! Paste your referral code in the CLI to claim your
-        bonus credits.
+        You're almost done! Redeem your code to claim bonus credits
+        {referrerName ? ` — ${referrerName} will earn credits too!` : '.'}
       </p>
       <div className="bg-acid-matrix/30 border border-acid-matrix/40 rounded-lg p-6">
         <p className="text-black dark:text-green-200 text-lg font-semibold mb-3">
-          🎁 Your referral code is ready!
+          🎁 {referrerName ? `You and ${referrerName} will both` : "You'll"} earn
+          bonus credits!
         </p>
         <div className="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md p-3 flex items-center justify-between">
           <code
@@ -314,15 +317,19 @@ export function OnboardingFlow({
 
   const renderInstallStep = () => (
     <div className="space-y-4">
-      <h3 className="text-xl font-semibold">Welcome to Codebuff! 🎉</h3>
+      <h3 className="text-xl font-semibold">
+        {referrerName
+          ? `${referrerName} invited you to Codebuff! 🎉`
+          : 'Welcome to Codebuff! 🎉'}
+      </h3>
       <p className="text-muted-foreground">
         Install the Codebuff CLI tool globally on your system.
       </p>
       {referralCode && (
         <div className="bg-terminal-yellow/20 border border-terminal-yellow/30 rounded-lg p-4">
           <p className="text-yellow-900 dark:text-terminal-yellow font-semibold">
-            🎁 You're almost there! Follow the next steps to redeem your
-            referral code for bonus credits.
+            🎁 Follow the next steps to redeem your referral code for bonus
+            credits.
           </p>
         </div>
       )}