feat: add display name support in GoalStats and provide user guidance in SiteSettingsPage

app/sites/[id]/settings/page.tsx

@@ -1001,6 +1001,7 @@ export default function SiteSettingsPage() {
               className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
               required
             />
+            <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">Spaces become underscores; max 64 characters after formatting.</p>
           </div>
           <div className="flex justify-end gap-2 pt-2">
             <Button type="button" variant="secondary" onClick={() => setGoalModalOpen(false)}>

components/dashboard/GoalStats.tsx

@@ -33,7 +33,7 @@ export default function GoalStats({ goalCounts, siteId, dateRange }: GoalStatsPr
               className="flex items-center justify-between py-2 px-3 rounded-lg bg-neutral-50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
             >
               <span className="text-sm font-medium text-neutral-900 dark:text-white truncate">
-                {row.event_name.replace(/_/g, ' ')}
+                {row.display_name ?? row.event_name.replace(/_/g, ' ')}
               </span>
               <span className="text-sm font-semibold text-brand-orange tabular-nums">
                 {formatNumber(row.count)}

lib/api/stats.ts

@@ -36,6 +36,7 @@ export interface PerformanceByPageStat {
 export interface GoalCountStat {
   event_name: string
   count: number
+  display_name?: string | null
 }
 
 export interface TopReferrer {