refactor: use bundled /behavior endpoint via useBehavior SWR hook

Replaces 4 separate frustration API calls with single useBehavior hook.
Removes manual fetchData, loading/error state, and refresh interval—SWR
handles caching, revalidation, and error state automatically.

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

@@ -1,30 +1,19 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useParams } from 'next/navigation'
 import { getDateRange, formatDate } from '@ciphera-net/ui'
 import { Select, DatePicker } from '@ciphera-net/ui'
-import { toast } from '@ciphera-net/ui'
 import dynamic from 'next/dynamic'
-import {
+import { getRageClicks, getDeadClicks } from '@/lib/api/stats'
-  getFrustrationSummary,
-  getRageClicks,
-  getDeadClicks,
-  getFrustrationByPage,
-  type FrustrationSummary,
-  type FrustrationElement,
-  type FrustrationByPage,
-} from '@/lib/api/stats'
 import FrustrationSummaryCards from '@/components/behavior/FrustrationSummaryCards'
 import FrustrationTable from '@/components/behavior/FrustrationTable'
 import FrustrationByPageTable from '@/components/behavior/FrustrationByPageTable'
 import FrustrationTrend from '@/components/behavior/FrustrationTrend'
-import { useDashboard } from '@/lib/swr/dashboard'
+import { useDashboard, useBehavior } from '@/lib/swr/dashboard'
 
 const ScrollDepth = dynamic(() => import('@/components/dashboard/ScrollDepth'))
 
-const TABLE_LIMIT = 7
-
 function getThisWeekRange(): { start: string; end: string } {
   const today = new Date()
   const dayOfWeek = today.getDay()
@@ -47,58 +36,18 @@ export default function BehaviorPage() {
   const [dateRange, setDateRange] = useState(() => getDateRange(30))
   const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
 
-  // Frustration data
+  // Single request for all frustration data
-  const [summary, setSummary] = useState<FrustrationSummary | null>(null)
+  const { data: behavior, isLoading: loading, error: behaviorError } = useBehavior(siteId, dateRange.start, dateRange.end)
-  const [rageClicks, setRageClicks] = useState<{ items: FrustrationElement[]; total: number }>({ items: [], total: 0 })
-  const [deadClicks, setDeadClicks] = useState<{ items: FrustrationElement[]; total: number }>({ items: [], total: 0 })
-  const [byPage, setByPage] = useState<FrustrationByPage[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState(false)
-  const refreshRef = useRef<ReturnType<typeof setInterval> | null>(null)
 
   // Fetch dashboard data for scroll depth (goal_counts + stats)
   const { data: dashboard } = useDashboard(siteId, dateRange.start, dateRange.end)
 
-  const fetchData = useCallback(async () => {
-    try {
-      const [summaryData, rageData, deadData, pageData] = await Promise.all([
-        getFrustrationSummary(siteId, dateRange.start, dateRange.end),
-        getRageClicks(siteId, dateRange.start, dateRange.end, TABLE_LIMIT),
-        getDeadClicks(siteId, dateRange.start, dateRange.end, TABLE_LIMIT),
-        getFrustrationByPage(siteId, dateRange.start, dateRange.end),
-      ])
-      setSummary(summaryData)
-      setRageClicks(rageData)
-      setDeadClicks(deadData)
-      setByPage(pageData)
-      setError(false)
-    } catch {
-      setError(true)
-      toast.error('Failed to load behavior data')
-    } finally {
-      setLoading(false)
-    }
-  }, [siteId, dateRange.start, dateRange.end])
-
-  // Fetch on mount and when date range changes
-  useEffect(() => {
-    setLoading(true)
-    fetchData()
-  }, [fetchData])
-
-  // 60-second refresh interval
-  useEffect(() => {
-    refreshRef.current = setInterval(fetchData, 60_000)
-    return () => {
-      if (refreshRef.current) clearInterval(refreshRef.current)
-    }
-  }, [fetchData])
-
   useEffect(() => {
     const domain = dashboard?.site?.domain
     document.title = domain ? `Behavior · ${domain} | Pulse` : 'Behavior | Pulse'
   }, [dashboard?.site?.domain])
 
+  // On-demand fetchers for modal "view all"
   const fetchAllRage = useCallback(
     () => getRageClicks(siteId, dateRange.start, dateRange.end, 100),
     [siteId, dateRange.start, dateRange.end]
@@ -109,6 +58,11 @@ export default function BehaviorPage() {
     [siteId, dateRange.start, dateRange.end]
   )
 
+  const summary = behavior?.summary ?? null
+  const rageClicks = behavior?.rage_clicks ?? { items: [], total: 0 }
+  const deadClicks = behavior?.dead_clicks ?? { items: [], total: 0 }
+  const byPage = behavior?.by_page ?? []
+
   return (
     <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
@@ -189,7 +143,7 @@ export default function BehaviorPage() {
       <FrustrationByPageTable pages={byPage} loading={loading} />
 
       {/* Scroll depth + Frustration trend — hide when data failed to load */}
-      {!error && (
+      {!behaviorError && (
         <div className="grid gap-6 lg:grid-cols-2 mb-8">
           <ScrollDepth
             goalCounts={dashboard?.goal_counts ?? []}

lib/api/stats.ts

@@ -433,6 +433,25 @@ export function getEventPropertyValues(siteId: string, eventName: string, propNa
 
 // ─── Frustration Signals ────────────────────────────────────────────
 
+export interface BehaviorData {
+  summary: FrustrationSummary
+  rage_clicks: { items: FrustrationElement[]; total: number }
+  dead_clicks: { items: FrustrationElement[]; total: number }
+  by_page: FrustrationByPage[]
+}
+
+const emptyBehavior: BehaviorData = {
+  summary: { rage_clicks: 0, rage_unique_elements: 0, rage_top_page: '', dead_clicks: 0, dead_unique_elements: 0, dead_top_page: '', prev_rage_clicks: 0, prev_dead_clicks: 0 },
+  rage_clicks: { items: [], total: 0 },
+  dead_clicks: { items: [], total: 0 },
+  by_page: [],
+}
+
+export function getBehavior(siteId: string, startDate?: string, endDate?: string, limit = 7): Promise<BehaviorData> {
+  return apiRequest<BehaviorData>(`/sites/${siteId}/behavior${buildQuery({ startDate, endDate, limit })}`)
+    .then(r => r ?? emptyBehavior)
+}
+
 export function getFrustrationSummary(siteId: string, startDate?: string, endDate?: string): Promise<FrustrationSummary> {
   return apiRequest<FrustrationSummary>(`/sites/${siteId}/frustration/summary${buildQuery({ startDate, endDate })}`)
     .then(r => r ?? { rage_clicks: 0, rage_unique_elements: 0, rage_top_page: '', dead_clicks: 0, dead_unique_elements: 0, dead_top_page: '', prev_rage_clicks: 0, prev_dead_clicks: 0 })

lib/swr/dashboard.ts

@@ -15,6 +15,7 @@ import {
   getRealtime,
   getStats,
   getDailyStats,
+  getBehavior,
 } from '@/lib/api/stats'
 import { listAnnotations } from '@/lib/api/annotations'
 import type { Annotation } from '@/lib/api/annotations'
@@ -32,6 +33,7 @@ import type {
   DashboardReferrersData,
   DashboardPerformanceData,
   DashboardGoalsData,
+  BehaviorData,
 } from '@/lib/api/stats'
 
 // * SWR fetcher functions
@@ -52,6 +54,7 @@ const fetchers = {
   campaigns: (siteId: string, start: string, end: string, limit: number) =>
     getCampaigns(siteId, start, end, limit),
   annotations: (siteId: string, start: string, end: string) => listAnnotations(siteId, start, end),
+  behavior: (siteId: string, start: string, end: string) => getBehavior(siteId, start, end),
 }
 
 // * Standard SWR config for dashboard data
@@ -265,5 +268,18 @@ export function useAnnotations(siteId: string, startDate: string, endDate: strin
   )
 }
 
+// * Hook for bundled behavior data (all frustration signals in one request)
+export function useBehavior(siteId: string, start: string, end: string) {
+  return useSWR<BehaviorData>(
+    siteId && start && end ? ['behavior', siteId, start, end] : null,
+    () => fetchers.behavior(siteId, start, end),
+    {
+      ...dashboardSWRConfig,
+      refreshInterval: 60 * 1000,
+      dedupingInterval: 10 * 1000,
+    }
+  )
+}
+
 // * Re-export for convenience
 export { fetchers }