Improve onboarding flow with dynamic steps and referral code integration

- Streamline onboarding to 3 steps (4 with referral code)
- Remove complex dev setup choice flow
- Add dedicated referral code redemption step
- Fix progress bar positioning to stay centered
- Remove unused referral-client component
- Update referrals page to use OnboardingFlow directly
- Add terminal-yellow and other brand colors to design system
- Improve user experience with cleaner, focused flow

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>

Author: brandonkachen

web/src/app/onboard/page.tsx

@@ -73,7 +73,10 @@ const Onboard = async ({ searchParams = {} }: PageProps) => {
     })
 
     return (
-      <OnboardClientWrapper hasReferralCode={hasReferralInUrl}>
+      <OnboardClientWrapper
+        hasReferralCode={hasReferralInUrl}
+        referralCode={referralCode}
+      >
         {successCard}
       </OnboardClientWrapper>
     )
@@ -239,7 +242,10 @@ const Onboard = async ({ searchParams = {} }: PageProps) => {
     })
 
     return (
-      <OnboardClientWrapper hasReferralCode={isReferralUser}>
+      <OnboardClientWrapper
+        hasReferralCode={isReferralUser}
+        referralCode={referralCode}
+      >
         {successCard}
       </OnboardClientWrapper>
     )

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

@@ -9,7 +9,7 @@ import type { ReferralCodeResponse } from '../../api/referrals/[code]/route'
 import { authOptions } from '../../api/auth/[...nextauth]/auth-options'
 import CardWithBeams from '@/components/card-with-beams'
 import { Button } from '@/components/ui/button'
-import ReferralClient from './referral-client'
+import { OnboardClientWrapper } from '@/components/onboard/onboard-client-wrapper'
 
 export const generateMetadata = async ({
   params,
@@ -106,14 +106,18 @@ export default async function ReferralPage({
   const referrerDisplayName =
     referralData.referrerName || referrerName || 'Someone'
 
-  // Pass data to the client component for rendering
+  // Show onboarding flow for valid referrals
   return (
-    <ReferralClient
-      code={code}
-      session={session}
-      referralData={referralData}
-      referrerDisplayName={referrerDisplayName}
-      referrerName={referrerName}
-    />
+    <OnboardClientWrapper hasReferralCode={true} referralCode={code}>
+      <CardWithBeams
+        title="Welcome to Codebuff!"
+        description="You can close this window and continue with the installation."
+        content={
+          <div className="text-center text-muted-foreground">
+            Your referral code is ready to use in the CLI!
+          </div>
+        }
+      />
+    </OnboardClientWrapper>
   )
 }

web/src/app/referrals/[code]/referral-client.tsx

@@ -1,58 +1,68 @@
 'use client'
 
 import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
 
 import { OnboardingFlow } from './onboarding-flow'
 
 interface OnboardClientWrapperProps {
   hasReferralCode: boolean
+  referralCode?: string
   children: React.ReactNode
 }
 
-export function OnboardClientWrapper({ hasReferralCode, children }: OnboardClientWrapperProps) {
+export function OnboardClientWrapper({
+  hasReferralCode,
+  referralCode,
+  children,
+}: OnboardClientWrapperProps) {
   const [hasStoredReferral, setHasStoredReferral] = useState(false)
-  const [onboardingComplete, setOnboardingComplete] = useState(false)
-
-  console.log('🟡 OnboardClientWrapper: Component rendered', {
-    hasReferralCode,
-    hasStoredReferral,
-    onboardingComplete
-  })
+  const [storedReferralCode, setStoredReferralCode] = useState<string | null>(
+    null
+  )
 
   useEffect(() => {
     // Always check localStorage for any stored referral codes from previous visits
-    const storedReferralCode = localStorage.getItem('referral_code')
-    console.log('🟡 OnboardClientWrapper: Checking localStorage', {
-      storedReferralCode
-    })
-    if (storedReferralCode) {
+    const storedCode = localStorage.getItem('referral_code')
+    if (storedCode) {
       setHasStoredReferral(true)
+      setStoredReferralCode(storedCode)
       // Clean up localStorage after checking
       localStorage.removeItem('referral_code')
-      console.log('🟡 OnboardClientWrapper: Found and removed stored referral code:', storedReferralCode)
     }
-  }, [])
+
+    // Also check URL parameters if no referralCode prop was passed
+    if (!referralCode && typeof window !== 'undefined') {
+      const urlParams = new URLSearchParams(window.location.search)
+      const urlReferralCode = urlParams.get('referral_code')
+      if (urlReferralCode && !storedCode) {
+        setStoredReferralCode(urlReferralCode)
+        setHasStoredReferral(true)
+      }
+    }
+  }, [referralCode])
+
+  const router = useRouter()
 
   const handleOnboardingComplete = () => {
-    setOnboardingComplete(true)
-    // Optional: Clear persisted progress from localStorage
+    // Clear persisted progress from localStorage
     localStorage.removeItem('codebuff_onboarding_progress')
+    // Navigate to onboard page
+    router.replace('/onboard')
   }
 
   // Always show onboarding flow if user has a referral code (from URL or localStorage)
   const shouldShowOnboarding = hasReferralCode || hasStoredReferral
+  const actualReferralCode = referralCode || storedReferralCode
 
   if (shouldShowOnboarding) {
     return (
       <div className="space-y-8">
-        {!onboardingComplete ? (
-          <OnboardingFlow 
-            hasReferralCode={shouldShowOnboarding} 
-            onComplete={handleOnboardingComplete}
-          />
-        ) : (
-          children
-        )}
+        <OnboardingFlow
+          hasReferralCode={shouldShowOnboarding}
+          referralCode={actualReferralCode || undefined}
+          onComplete={handleOnboardingComplete}
+        />
       </div>
     )
   }