fix: address CLI agent review feedback - typo, nullable name, DRY violation

Author: brandonkachen

web/src/app/api/referrals/route.ts

@@ -13,12 +13,13 @@ import { extractApiKeyFromHeader } from '@/util/auth'
 import type { NextRequest } from 'next/server'
 
 type Referral = Pick<typeof schema.user.$inferSelect, 'id' | 'name' | 'email'> &
-  Pick<typeof schema.referral.$inferSelect, 'credits'>
+  Pick<typeof schema.referral.$inferSelect, 'credits' | 'is_recurring'>
 const ReferralSchema = z.object({
   id: z.string(),
-  name: z.string(),
+  name: z.string().nullable(),
   email: z.string().email(),
   credits: z.coerce.number(),
+  is_recurring: z.boolean(),
 })
 
 export type ReferralData = {
@@ -47,45 +48,29 @@ export async function GET() {
       )
     }
 
+    // Shared select fields for referral queries
+    const referralSelect = {
+      id: schema.user.id,
+      name: schema.user.name,
+      email: schema.user.email,
+      credits: schema.referral.credits,
+      is_recurring: schema.referral.is_recurring,
+    }
+
     // Who did this user refer?
-    const referralsQuery = db
-      .select({
-        id: schema.referral.referred_id,
-        credits: schema.referral.credits,
-      })
+    const referrals = await db
+      .select(referralSelect)
       .from(schema.referral)
+      .innerJoin(schema.user, eq(schema.user.id, schema.referral.referred_id))
       .where(eq(schema.referral.referrer_id, session.user.id))
-      .as('referralsQuery')
-    const referrals = await db
-      .select({
-        id: schema.user.id,
-        name: schema.user.name,
-        email: schema.user.email,
-        credits: referralsQuery.credits,
-      })
-      .from(referralsQuery)
-      .leftJoin(schema.user, eq(schema.user.id, referralsQuery.id))
 
     // Who referred this user?
-    const referredByIdQuery = db
-      .select({
-        id: schema.referral.referrer_id,
-        credits: schema.referral.credits,
-      })
+    const referredBy = await db
+      .select(referralSelect)
       .from(schema.referral)
+      .innerJoin(schema.user, eq(schema.user.id, schema.referral.referrer_id))
       .where(eq(schema.referral.referred_id, session.user.id))
       .limit(1)
-      .as('referredByIdQuery')
-    const referredBy = await db
-      .select({
-        id: schema.user.id,
-        name: schema.user.name,
-        email: schema.user.email,
-        credits: referredByIdQuery.credits,
-      })
-      .from(referredByIdQuery)
-      .leftJoin(schema.user, eq(schema.user.id, referredByIdQuery.id))
-      .limit(1)
       .then((users) => {
         if (users.length !== 1) {
           return

web/src/app/profile/components/referrals-section.tsx

@@ -12,6 +12,8 @@ import { ProfileSection } from './profile-section'
 
 import type { ReferralData } from '@/app/api/referrals/route'
 
+import { cn } from '@/lib/utils'
+
 import { Button } from '@/components/ui/button'
 import {
   Card,
@@ -33,12 +35,26 @@ const copyReferral = (link: string) => {
   })
 }
 
-const CreditsBadge = (credits: number) => {
+const badgeBaseClasses =
+  'flex-none p-2 rounded-full text-xs font-semibold items-center text-center shadow-sm bg-gradient-to-r'
+
+const CreditsBadge = ({
+  credits,
+  isRecurring,
+}: {
+  credits: number
+  isRecurring: boolean
+}) => {
   return (
     <span
-      className={`flex-none p-2 rounded-full text-xs bg-gradient-to-r from-green-300 to-emerald-300 dark:from-green-600 dark:to-emerald-600 text-green-800 dark:text-white font-semibold item-center text-center shadow-sm`}
+      className={cn(
+        badgeBaseClasses,
+        isRecurring
+          ? 'from-green-300 to-emerald-300 dark:from-green-600 dark:to-emerald-600 text-green-800 dark:text-white'
+          : 'from-blue-300 to-sky-300 dark:from-blue-600 dark:to-sky-600 text-blue-800 dark:text-white',
+      )}
     >
-      +{credits} credits
+      +{credits} {isRecurring ? 'credits/mo' : 'credits'}
     </span>
   )
 }
@@ -109,9 +125,12 @@ export function ReferralsSection() {
           <CardContent className="flex flex-col">
             <div className="flex place-content-between">
               <div className="text-sm flex items-center">
-                <p>{data.referredBy.name} referred you. </p>
+                <p>{data.referredBy.name || data.referredBy.email} referred you. </p>
               </div>
-              {CreditsBadge(data.referredBy.credits)}
+              <CreditsBadge
+                credits={data.referredBy.credits}
+                isRecurring={data.referredBy.is_recurring}
+              />
             </div>
           </CardContent>
         </Card>
@@ -203,9 +222,12 @@ export function ReferralsSection() {
                           className="flex justify-between items-center"
                         >
                           <span>
-                            {r.name} ({r.email})
+                            {r.name ? `${r.name} (${r.email})` : r.email}
                           </span>
-                          {CreditsBadge(r.credits)}
+                          <CreditsBadge
+                            credits={r.credits}
+                            isRecurring={r.is_recurring}
+                          />
                         </li>
                       ))}
                     </ul>

web/src/app/profile/components/usage-display.tsx

@@ -33,17 +33,16 @@ interface UsageDisplayProps {
 
 type FilteredGrantType = Exclude<GrantType, 'organization'>
 
-const grantTypeInfo: Record<
-  FilteredGrantType,
-  {
-    bg: string
-    text: string
-    gradient: string
-    icon: React.ReactNode
-    label: string
-    description: string
-  }
-> = {
+type GrantTypeInfoItem = {
+  bg: string
+  text: string
+  gradient: string
+  icon: React.ReactNode
+  label: string
+  description: string
+}
+
+const grantTypeInfo: Record<FilteredGrantType, GrantTypeInfoItem> = {
   free: {
     bg: 'bg-blue-500',
     text: 'text-blue-600 dark:text-blue-400',
@@ -58,7 +57,7 @@ const grantTypeInfo: Record<
     gradient: 'from-green-500/70 to-green-600/70',
     icon: <Users className="h-4 w-4" />,
     label: 'Referral Bonus',
-    description: 'Earned by referring others',
+    description: 'One-time bonus for referring others',
   },
   purchase: {
     bg: 'bg-yellow-500',
@@ -86,6 +85,15 @@ const grantTypeInfo: Record<
   },
 }
 
+/**
+ * Override info for renewable referral credits (legacy/grandfathered).
+ */
+const renewableReferralInfo: GrantTypeInfoItem = {
+  ...grantTypeInfo.referral,
+  label: 'Referral Bonus (Legacy)',
+  description: 'Renews monthly from past referrals',
+}
+
 /**
  * Helper to get grant types with non-zero balance or principal in a bucket.
  * Defined at module level to avoid recreation on each render.
@@ -127,6 +135,10 @@ const CreditLeaf = ({
 }: CreditLeafProps) => {
   const remainingAmount = amount - used
 
+  // Use legacy info for renewable referral credits (grandfathered from before the program update)
+  const info =
+    type === 'referral' && isRenewable ? renewableReferralInfo : grantTypeInfo[type]
+
   return (
     <div className="group relative pl-6">
       <div
@@ -141,14 +153,14 @@ const CreditLeaf = ({
         <div className="flex flex-col gap-1 w-full sm:w-auto">
           <div className="flex items-center gap-3">
             <div className="w-4 h-4 flex-shrink-0">
-              {grantTypeInfo[type].icon}
+              {info.icon}
             </div>
             <span className="font-medium text-sm">
-              {grantTypeInfo[type].label}
+              {info.label}
             </span>
           </div>
           <span className="text-xs text-muted-foreground pl-7">
-            {grantTypeInfo[type].description}
+            {info.description}
           </span>
         </div>
         <div className="flex items-center gap-2 mt-1 sm:mt-0 pl-7 sm:pl-0">