feat: polish behavior page UI with 8 improvements

- Add column headers to rage/dead click tables
- Rich empty states with icons matching dashboard pattern
- Add frustration trend comparison chart (current vs previous period)
- Show "New" badge instead of misleading "+100%" when previous period is 0
- Click-to-copy on CSS selectors with toast feedback
- Normalize min-height to 270px for consistent card sizing
- Fix page title to include site domain (Behavior · domain | Pulse)
- Add "last seen" column with relative timestamps

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

@@ -18,6 +18,7 @@ import {
 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'
 
 const ScrollDepth = dynamic(() => import('@/components/dashboard/ScrollDepth'))
@@ -91,8 +92,9 @@ export default function BehaviorPage() {
   }, [fetchData])
 
   useEffect(() => {
-    document.title = 'Behavior | Pulse'
-  }, [])
+    const domain = dashboard?.site?.domain
+    document.title = domain ? `Behavior · ${domain} | Pulse` : 'Behavior | Pulse'
+  }, [dashboard?.site?.domain])
 
   const fetchAllRage = useCallback(
     () => getRageClicks(siteId, dateRange.start, dateRange.end, 100),
@@ -181,12 +183,13 @@ export default function BehaviorPage() {
       {/* By page breakdown */}
       <FrustrationByPageTable pages={byPage} loading={loading} />
 
-      {/* Scroll depth */}
+      {/* Scroll depth + Frustration trend */}
       <div className="grid gap-6 lg:grid-cols-2 mb-8">
         <ScrollDepth
           goalCounts={dashboard?.goal_counts ?? []}
           totalPageviews={dashboard?.stats?.pageviews ?? 0}
         />
+        <FrustrationTrend summary={summary} loading={loading} />
       </div>
 
       <DatePicker

components/behavior/FrustrationByPageTable.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { formatNumber } from '@ciphera-net/ui'
+import { Files } from '@phosphor-icons/react'
 import type { FrustrationByPage } from '@/lib/api/stats'
 
 interface FrustrationByPageTableProps {
@@ -96,9 +97,15 @@ export default function FrustrationByPageTable({ pages, loading }: FrustrationBy
           </div>
         </div>
       ) : (
-        <div className="flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
-            No frustration signals detected in this period
+        <div className="flex flex-col items-center justify-center text-center px-6 py-8 gap-4 min-h-[200px]">
+          <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
+            <Files className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+          </div>
+          <h4 className="font-semibold text-neutral-900 dark:text-white">
+            No frustration signals detected
+          </h4>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
+            Page-level frustration data will appear here once rage clicks or dead clicks are detected on your site.
           </p>
         </div>
       )}

components/behavior/FrustrationSummaryCards.tsx

@@ -7,16 +7,23 @@ interface FrustrationSummaryCardsProps {
   loading: boolean
 }
 
-function pctChange(current: number, previous: number): number | null {
+function pctChange(current: number, previous: number): { type: 'pct'; value: number } | { type: 'new' } | null {
   if (previous === 0 && current === 0) return null
-  if (previous === 0) return 100
-  return Math.round(((current - previous) / previous) * 100)
+  if (previous === 0) return { type: 'new' }
+  return { type: 'pct', value: Math.round(((current - previous) / previous) * 100) }
 }
 
-function ChangeIndicator({ change }: { change: number | null }) {
+function ChangeIndicator({ change }: { change: ReturnType<typeof pctChange> }) {
   if (change === null) return null
-  const isUp = change > 0
-  const isDown = change < 0
+  if (change.type === 'new') {
+    return (
+      <span className="text-xs font-medium bg-brand-orange/10 text-brand-orange px-1.5 py-0.5 rounded">
+        New
+      </span>
+    )
+  }
+  const isUp = change.value > 0
+  const isDown = change.value < 0
   return (
     <span
       className={`text-xs font-medium ${
@@ -27,7 +34,7 @@ function ChangeIndicator({ change }: { change: number | null }) {
             : 'text-neutral-500 dark:text-neutral-400'
       }`}
     >
-      {isUp ? '+' : ''}{change}%
+      {isUp ? '+' : ''}{change.value}%
     </span>
   )
 }

components/behavior/FrustrationTable.tsx

@@ -2,8 +2,10 @@
 
 import { useState, useEffect } from 'react'
 import { formatNumber, Modal } from '@ciphera-net/ui'
-import { FrameCornersIcon } from '@phosphor-icons/react'
+import { FrameCornersIcon, Copy, Check, CursorClick } from '@phosphor-icons/react'
+import { toast } from '@ciphera-net/ui'
 import type { FrustrationElement } from '@/lib/api/stats'
+import { formatRelativeTime } from '@/lib/utils/formatDate'
 import { ListSkeleton } from '@/components/skeletons'
 
 interface FrustrationTableProps {
@@ -32,6 +34,37 @@ function SkeletonRows() {
   )
 }
 
+function SelectorCell({ selector }: { selector: string }) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    navigator.clipboard.writeText(selector)
+    setCopied(true)
+    toast.success('Selector copied')
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="flex items-center gap-1 min-w-0 group/copy cursor-pointer"
+      title={selector}
+    >
+      <span className="text-sm font-mono text-neutral-900 dark:text-white truncate max-w-[180px]">
+        {selector}
+      </span>
+      <span className="opacity-0 group-hover/copy:opacity-100 transition-opacity shrink-0">
+        {copied ? (
+          <Check className="w-3 h-3 text-green-500" />
+        ) : (
+          <Copy className="w-3 h-3 text-neutral-400" />
+        )}
+      </span>
+    </button>
+  )
+}
+
 function Row({
   item,
   showAvgClicks,
@@ -42,14 +75,9 @@ function Row({
   return (
     <div className="flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
       <div className="flex items-center gap-3 flex-1 min-w-0">
+        <SelectorCell selector={item.selector} />
         <span
-          className="text-sm font-mono text-neutral-900 dark:text-white truncate max-w-[200px]"
-          title={item.selector}
-        >
-          {item.selector}
-        </span>
-        <span
-          className="text-xs text-neutral-400 dark:text-neutral-500 truncate max-w-[140px]"
+          className="text-xs text-neutral-400 dark:text-neutral-500 truncate max-w-[120px]"
           title={item.page_path}
         >
           {item.page_path}
@@ -64,6 +92,9 @@ function Row({
         <span className="text-xs text-neutral-400 dark:text-neutral-500 tabular-nums">
           {item.sessions} {item.sessions === 1 ? 'session' : 'sessions'}
         </span>
+        <span className="text-xs text-neutral-400 dark:text-neutral-500 tabular-nums" title={item.last_seen}>
+          {formatRelativeTime(item.last_seen)}
+        </span>
         <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 tabular-nums">
           {formatNumber(item.count)}
         </span>
@@ -129,19 +160,40 @@ export default function FrustrationTable({
           {description}
         </p>
 
-        <div className="flex-1 min-h-[200px]">
+        <div className="flex-1 min-h-[270px]">
           {loading ? (
             <SkeletonRows />
           ) : hasData ? (
+            <div>
+              {/* Column headers */}
+              <div className="flex items-center justify-between px-2 -mx-2 mb-2 text-xs font-medium text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
+                <div className="flex items-center gap-3">
+                  <span>Selector</span>
+                  <span>Page</span>
+                </div>
+                <div className="flex items-center gap-4">
+                  {showAvgClicks && <span>Avg</span>}
+                  <span>Sessions</span>
+                  <span>Last Seen</span>
+                  <span>Count</span>
+                </div>
+              </div>
               <div className="space-y-0.5">
                 {items.map((item, i) => (
                   <Row key={`${item.selector}-${item.page_path}-${i}`} item={item} showAvgClicks={showAvgClicks} />
                 ))}
               </div>
+            </div>
           ) : (
-            <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
-              <p className="text-sm text-neutral-500 dark:text-neutral-400">
-                No {title.toLowerCase()} detected in this period
+            <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-4">
+              <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
+                <CursorClick className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+              </div>
+              <h4 className="font-semibold text-neutral-900 dark:text-white">
+                No {title.toLowerCase()} detected
+              </h4>
+              <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
+                {description}. Data will appear here once frustration signals are detected on your site.
               </p>
             </div>
           )}

components/behavior/FrustrationTrend.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts'
+import { TrendUp } from '@phosphor-icons/react'
+import type { FrustrationSummary } from '@/lib/api/stats'
+
+interface FrustrationTrendProps {
+  summary: FrustrationSummary | null
+  loading: boolean
+}
+
+function SkeletonCard() {
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+      <div className="animate-pulse space-y-3 mb-4">
+        <div className="h-5 w-36 bg-neutral-200 dark:bg-neutral-700 rounded" />
+        <div className="h-4 w-48 bg-neutral-200 dark:bg-neutral-700 rounded" />
+      </div>
+      <div className="flex-1 min-h-[270px] animate-pulse flex items-end gap-6 justify-center pb-8">
+        {[120, 80, 140, 100].map((h, i) => (
+          <div key={i} className="w-12 bg-neutral-200 dark:bg-neutral-700 rounded-t" style={{ height: h }} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default function FrustrationTrend({ summary, loading }: FrustrationTrendProps) {
+  if (loading || !summary) return <SkeletonCard />
+
+  const hasData = summary.rage_clicks > 0 || summary.dead_clicks > 0 ||
+    summary.prev_rage_clicks > 0 || summary.prev_dead_clicks > 0
+
+  const chartData = [
+    {
+      label: 'Rage',
+      current: summary.rage_clicks,
+      previous: summary.prev_rage_clicks,
+    },
+    {
+      label: 'Dead',
+      current: summary.dead_clicks,
+      previous: summary.prev_dead_clicks,
+    },
+  ]
+
+  const totalCurrent = summary.rage_clicks + summary.dead_clicks
+  const totalPrevious = summary.prev_rage_clicks + summary.prev_dead_clicks
+  const totalChange = totalPrevious > 0
+    ? Math.round(((totalCurrent - totalPrevious) / totalPrevious) * 100)
+    : null
+
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+      <div className="flex items-center justify-between mb-1">
+        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+          Frustration Trend
+        </h3>
+      </div>
+      <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
+        Current vs. previous period comparison
+      </p>
+
+      {hasData ? (
+        <div className="flex-1 min-h-[270px] flex flex-col">
+          {/* Summary line */}
+          <div className="flex items-baseline gap-2 mb-6">
+            <span className="text-2xl font-bold text-neutral-900 dark:text-white tabular-nums">
+              {totalCurrent.toLocaleString()}
+            </span>
+            <span className="text-sm text-neutral-400 dark:text-neutral-500">
+              total signals
+            </span>
+            {totalChange !== null && (
+              <span className={`text-xs font-medium ${
+                totalChange > 0
+                  ? 'text-red-600 dark:text-red-400'
+                  : totalChange < 0
+                    ? 'text-green-600 dark:text-green-400'
+                    : 'text-neutral-500 dark:text-neutral-400'
+              }`}>
+                {totalChange > 0 ? '+' : ''}{totalChange}%
+              </span>
+            )}
+            {totalChange === null && totalCurrent > 0 && (
+              <span className="text-xs font-medium bg-brand-orange/10 text-brand-orange px-1.5 py-0.5 rounded">
+                New
+              </span>
+            )}
+          </div>
+
+          {/* Chart */}
+          <div className="flex-1">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={chartData} barGap={4} barCategoryGap="30%">
+                <XAxis
+                  dataKey="label"
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fill: '#a3a3a3', fontSize: 12 }}
+                />
+                <YAxis hide />
+                <Tooltip
+                  cursor={{ fill: 'transparent' }}
+                  contentStyle={{
+                    backgroundColor: '#171717',
+                    border: '1px solid #404040',
+                    borderRadius: 8,
+                    fontSize: 12,
+                    color: '#fff',
+                  }}
+                  formatter={(value: number, name: string) => [
+                    value.toLocaleString(),
+                    name === 'current' ? 'Current' : 'Previous',
+                  ]}
+                />
+                <Bar dataKey="previous" radius={[4, 4, 0, 0]} maxBarSize={40}>
+                  {chartData.map((_, i) => (
+                    <Cell key={i} fill="#404040" />
+                  ))}
+                </Bar>
+                <Bar dataKey="current" radius={[4, 4, 0, 0]} maxBarSize={40}>
+                  {chartData.map((_, i) => (
+                    <Cell key={i} fill="#FD5E0F" />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+
+          {/* Legend */}
+          <div className="flex items-center justify-center gap-6 mt-4 text-xs text-neutral-400 dark:text-neutral-500">
+            <div className="flex items-center gap-1.5">
+              <div className="w-2.5 h-2.5 rounded-sm bg-[#FD5E0F]" />
+              <span>Current period</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <div className="w-2.5 h-2.5 rounded-sm bg-[#404040]" />
+              <span>Previous period</span>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="flex-1 min-h-[270px] flex flex-col items-center justify-center text-center px-6 py-8 gap-4">
+          <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
+            <TrendUp className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+          </div>
+          <h4 className="font-semibold text-neutral-900 dark:text-white">
+            No trend data yet
+          </h4>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
+            Frustration trend data will appear here once rage clicks or dead clicks are detected across periods.
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}