Personalize codebuff /onboard welcome with referrer name

Saves the referrer display name to localStorage on /referrals/[code] and swaps
the /onboard welcome/success title to "{Name} invited you to Codebuff!" when
it's present, mirroring the freebuff attribution pattern.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: jahooma

web/src/app/onboard/page.tsx

@@ -15,6 +15,7 @@ import { isAuthCodeExpired, parseAuthCode, validateAuthCode } from './_helpers'
 import { authOptions } from '../api/auth/[...nextauth]/auth-options'
 
 import CardWithBeams from '@/components/card-with-beams'
+import { WelcomeCard } from '@/components/onboard/welcome-card'
 import { logger } from '@/util/logger'
 
 
@@ -33,19 +34,17 @@ function renderErrorCard(title: string, description: string, message: string) {
 }
 
 function renderSuccessPage(
-  title: string,
+  fallbackTitle: string,
   description: string,
   message: string,
 ) {
-  return CardWithBeams({
-    title,
-    description,
-    content: (
-      <div className="flex flex-col space-y-4 text-center">
-        <p className="text-lg">{message}</p>
-      </div>
-    ),
-  })
+  return (
+    <WelcomeCard
+      fallbackTitle={fallbackTitle}
+      description={description}
+      message={message}
+    />
+  )
 }
 
 const Onboard = async ({ searchParams }: PageProps) => {

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

@@ -6,6 +6,7 @@ import type { ReferralCodeResponse } from '../../api/referrals/[code]/route'
 import type { Metadata } from 'next'
 
 import CardWithBeams from '@/components/card-with-beams'
+import { PersistReferrer } from '@/components/referral/persist-referrer'
 import { Button } from '@/components/ui/button'
 import { InstallInstructions } from '@/components/ui/install-instructions'
 
@@ -78,10 +79,13 @@ export default async function ReferralPage({
   const displayName = referrerName || referrerParam || 'Someone'
 
   return (
-    <CardWithBeams
-      title={`${displayName} invited you to Codebuff!`}
-      description="Install Codebuff and start building with AI in your terminal."
-      content={<InstallInstructions />}
-    />
+    <>
+      <PersistReferrer referrer={displayName} />
+      <CardWithBeams
+        title={`${displayName} invited you to Codebuff!`}
+        description="Install Codebuff and start building with AI in your terminal."
+        content={<InstallInstructions />}
+      />
+    </>
   )
 }

web/src/components/onboard/welcome-card.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import CardWithBeams from '@/components/card-with-beams'
+
+export function WelcomeCard({
+  fallbackTitle,
+  description,
+  message,
+}: {
+  fallbackTitle: string
+  description: string
+  message: string
+}) {
+  const [referrer, setReferrer] = useState<string | null>(null)
+
+  useEffect(() => {
+    const stored = localStorage.getItem('codebuff_referrer')
+    if (stored) {
+      setReferrer(stored)
+      localStorage.removeItem('codebuff_referrer')
+    }
+  }, [])
+
+  const title = referrer
+    ? `${referrer} invited you to Codebuff!`
+    : fallbackTitle
+
+  return (
+    <CardWithBeams
+      title={title}
+      description={description}
+      content={
+        <div className="flex flex-col space-y-4 text-center">
+          <p className="text-lg">{message}</p>
+        </div>
+      }
+    />
+  )
+}

web/src/components/referral/persist-referrer.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export function PersistReferrer({ referrer }: { referrer: string }) {
+  useEffect(() => {
+    if (referrer) {
+      localStorage.setItem('codebuff_referrer', referrer)
+    }
+  }, [referrer])
+
+  return null
+}