Simplify referrer plumbing and clean up onboard/profile pages

- Consolidate to a single `codebuff_referrer` localStorage key. WelcomeCard
  now both fires the PostHog attribution event (post-auth) and renders the
  personalized title, removing the tracker/welcome-card race.
- Delete ReferrerTracker and its mount in the root layout.
- Replace HTTP self-fetch in /referrals/[code] with a direct DB query and
  delete the now-unused /api/referrals/[code] route.
- Inline the trivial renderSuccessPage/renderErrorCard wrappers in the
  onboard page.
- Hide the Referrals profile tab when the user has no referral history.
- Strip leftover console.log debug statements from SignInButton.

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

Author: jahooma

web/src/app/api/referrals/[code]/route.ts

@@ -7,7 +7,6 @@ import { Footer } from '@/components/footer'
 import { LayoutWrapper } from '@/components/layout-wrapper'
 import { Navbar } from '@/components/navbar/navbar'
 import QueryProvider from '@/components/providers/query-client-provider'
-import { ReferrerTracker } from '@/components/referral/referrer-tracker'
 import { ThemeProvider } from '@/components/theme-provider'
 import { Toaster } from '@/components/ui/toaster'
 import { siteConfig } from '@/lib/constant'
@@ -67,7 +66,6 @@ export default function RootLayout({
           <SessionProvider>
             <QueryProvider>
               <PostHogProvider>
-                <ReferrerTracker />
                 <Navbar />
                 <div className="flex-grow">
                   <LayoutWrapper>{children}</LayoutWrapper>

web/src/app/layout.tsx

@@ -25,28 +25,6 @@ interface PageProps {
   }>
 }
 
-function renderErrorCard(title: string, description: string, message: string) {
-  return CardWithBeams({
-    title,
-    description,
-    content: <p>{message}</p>,
-  })
-}
-
-function renderSuccessPage(
-  fallbackTitle: string,
-  description: string,
-  message: string,
-) {
-  return (
-    <WelcomeCard
-      fallbackTitle={fallbackTitle}
-      description={description}
-      message={message}
-    />
-  )
-}
-
 const Onboard = async ({ searchParams }: PageProps) => {
   const resolvedSearchParams = searchParams ? await searchParams : {}
   const authCode = resolvedSearchParams.auth_code
@@ -58,10 +36,12 @@ const Onboard = async ({ searchParams }: PageProps) => {
   }
 
   if (!authCode) {
-    return renderSuccessPage(
-      'Welcome to Codebuff!',
-      '',
-      "You're all set! Head back to your terminal to continue.",
+    return (
+      <WelcomeCard
+        fallbackTitle="Welcome to Codebuff!"
+        description=""
+        message="You're all set! Head back to your terminal to continue."
+      />
     )
   }
 
@@ -74,29 +54,44 @@ const Onboard = async ({ searchParams }: PageProps) => {
   )
 
   if (!valid) {
-    return renderErrorCard(
-      'Uh-oh, spaghettio!',
-      'Invalid auth code.',
-      'Please try again and reach out to support@codebuff.com if the problem persists.',
+    return (
+      <CardWithBeams
+        title="Uh-oh, spaghettio!"
+        description="Invalid auth code."
+        content={
+          <p>
+            Please try again and reach out to support@codebuff.com if the
+            problem persists.
+          </p>
+        }
+      />
     )
   }
 
   if (isAuthCodeExpired(expiresAt)) {
-    return renderErrorCard(
-      'Uh-oh, spaghettio!',
-      'Auth code expired.',
-      'Please generate a new code and reach out to support@codebuff.com if the problem persists.',
+    return (
+      <CardWithBeams
+        title="Uh-oh, spaghettio!"
+        description="Auth code expired."
+        content={
+          <p>
+            Please generate a new code and reach out to support@codebuff.com if
+            the problem persists.
+          </p>
+        }
+      />
     )
   }
 
   const isReplay = await checkReplayAttack(fingerprintHash, user.id)
   if (isReplay) {
-    return CardWithBeams({
-      title: 'Your account is already connected to your CLI!',
-      description:
-        'Feel free to close this window and head back to your terminal.',
-      content: <p>No replay attack for you 👊</p>,
-    })
+    return (
+      <CardWithBeams
+        title="Your account is already connected to your CLI!"
+        description="Feel free to close this window and head back to your terminal."
+        content={<p>No replay attack for you 👊</p>}
+      />
+    )
   }
 
   const { hasConflict, existingUserId } = await checkFingerprintConflict(
@@ -108,10 +103,17 @@ const Onboard = async ({ searchParams }: PageProps) => {
       { fingerprintId, existingUserId, attemptedUserId: user.id },
       'Fingerprint ownership conflict',
     )
-    return renderErrorCard(
-      'Unable to complete login',
-      'Something went wrong during the login process.',
-      `Please try generating a new login code. If the problem persists, contact ${env.NEXT_PUBLIC_SUPPORT_EMAIL} for assistance.`,
+    return (
+      <CardWithBeams
+        title="Unable to complete login"
+        description="Something went wrong during the login process."
+        content={
+          <p>
+            Please try generating a new login code. If the problem persists,
+            contact {env.NEXT_PUBLIC_SUPPORT_EMAIL} for assistance.
+          </p>
+        }
+      />
     )
   }
 
@@ -124,17 +126,26 @@ const Onboard = async ({ searchParams }: PageProps) => {
   )
 
   if (success) {
-    return renderSuccessPage(
-      'Login successful!',
-      '',
-      'Return to your terminal to continue.',
+    return (
+      <WelcomeCard
+        fallbackTitle="Login successful!"
+        description=""
+        message="Return to your terminal to continue."
+      />
     )
   }
 
-  return renderErrorCard(
-    'Uh-oh, spaghettio!',
-    'Something went wrong.',
-    `Not sure what happened. Please try again and reach out to ${env.NEXT_PUBLIC_SUPPORT_EMAIL} if the problem persists.`,
+  return (
+    <CardWithBeams
+      title="Uh-oh, spaghettio!"
+      description="Something went wrong."
+      content={
+        <p>
+          Not sure what happened. Please try again and reach out to{' '}
+          {env.NEXT_PUBLIC_SUPPORT_EMAIL} if the problem persists.
+        </p>
+      }
+    />
   )
 }
 

web/src/app/onboard/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useQuery } from '@tanstack/react-query'
 import { CreditCard, Shield, Users, Key, Menu, User } from 'lucide-react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useSession } from 'next-auth/react'
@@ -14,50 +15,65 @@ import { ReferralsSection } from './components/referrals-section'
 import { SecuritySection } from './components/security-section'
 import { UsageSection } from './components/usage-section'
 
+import type { ReferralData } from '@/app/api/referrals/route'
+
 import { Button } from '@/components/ui/button'
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
 import { Skeleton } from '@/components/ui/skeleton'
 import { cn } from '@/lib/utils'
 import { toast } from '@/components/ui/use-toast'
 
-const sections = [
-  {
-    id: 'usage',
-    title: 'Usage & Credits',
-    icon: CreditCard,
-    component: UsageSection,
-  },
-  {
-    id: 'security',
-    title: 'Security',
-    icon: Shield,
-    component: SecuritySection,
-  },
-  {
-    id: 'api-keys',
-    title: 'API Keys',
-    icon: Key,
-    component: ApiKeysSection,
-  },
-  {
-    id: 'referrals',
-    title: 'Referrals',
-    icon: Users,
-    component: ReferralsSection,
-  },
-  {
-    id: 'account',
-    title: 'Account',
-    icon: User,
-    component: AccountSection,
-  },
-]
+type Section = {
+  id: string
+  title: string
+  icon: typeof CreditCard
+  component: React.ComponentType
+}
+
+const REFERRALS_SECTION: Section = {
+  id: 'referrals',
+  title: 'Referrals',
+  icon: Users,
+  component: ReferralsSection,
+}
+
+function buildSections(hasReferralHistory: boolean): Section[] {
+  return [
+    {
+      id: 'usage',
+      title: 'Usage & Credits',
+      icon: CreditCard,
+      component: UsageSection,
+    },
+    {
+      id: 'security',
+      title: 'Security',
+      icon: Shield,
+      component: SecuritySection,
+    },
+    {
+      id: 'api-keys',
+      title: 'API Keys',
+      icon: Key,
+      component: ApiKeysSection,
+    },
+    ...(hasReferralHistory ? [REFERRALS_SECTION] : []),
+    {
+      id: 'account',
+      title: 'Account',
+      icon: User,
+      component: AccountSection,
+    },
+  ]
+}
 
 function ProfileSidebar({
+  sections,
   activeSection,
   onSectionChange,
   onNavigate,
 }: {
+  sections: Section[]
   activeSection: string
   onSectionChange: (section: string) => void
   onNavigate?: () => void
@@ -89,18 +105,34 @@ function ProfileSidebar({
 }
 
 function ProfilePageContent() {
-  const { status } = useSession()
+  const { data: session, status } = useSession()
   const router = useRouter()
   const searchParams = useSearchParams() ?? new URLSearchParams()
   const [activeSection, setActiveSection] = useState('usage')
   const [open, setOpen] = useState(false)
 
+  const { data: referralData } = useQuery<ReferralData>({
+    queryKey: ['referrals'],
+    queryFn: async () => {
+      const response = await fetch('/api/referrals')
+      const ret = await response.json()
+      if (!response.ok) {
+        throw new Error(`Failed to fetch referral data: ${ret.error}`)
+      }
+      return ret
+    },
+    enabled: !!session?.user,
+  })
+  const hasReferralHistory =
+    !!referralData?.referredBy || (referralData?.referrals.length ?? 0) > 0
+  const sections = buildSections(hasReferralHistory)
+
   useEffect(() => {
     const tab = searchParams.get('tab')
     if (tab && sections.find((s) => s.id === tab)) {
       setActiveSection(tab)
     }
-  }, [searchParams])
+  }, [searchParams, sections])
 
   // Check for subscription success
   useEffect(() => {
@@ -162,6 +194,7 @@ function ProfilePageContent() {
                 </p>
               </div>
               <ProfileSidebar
+                sections={sections}
                 activeSection={activeSection}
                 onSectionChange={handleSectionChange}
                 onNavigate={() => setOpen(false)}
@@ -207,6 +240,7 @@ function ProfilePageContent() {
               </p>
             </div>
             <ProfileSidebar
+              sections={sections}
               activeSection={activeSection}
               onSectionChange={handleSectionChange}
               onNavigate={() => setOpen(false)}