spine-framework-cortex 0.1.12 → 0.1.14

package/pages/crm/AccountDetailPage.tsx

@@ -6,8 +6,7 @@ import { Badge } from '@core/components/ui/badge'
 import { Skeleton } from '@core/components/ui/skeleton'
 import { Button } from '@core/components/ui/button'
 import { ScrollArea } from '@core/components/ui/scroll-area'
-import { Separator } from '@core/components/ui/separator'
-import { ArrowLeft, User, Ticket, Handshake, Activity, Heart, Filter, TrendingUp, Target, Clock } from 'lucide-react'
+import { ArrowLeft, User, Ticket, Handshake, Activity, Heart, Filter, TrendingUp, Target, Clock, Eye, Download, FileText, CheckCircle, Zap, Link2 } from 'lucide-react'
 
 interface Account {
   id: string
@@ -140,182 +139,229 @@ function ActivityTab({ accountId }: { accountId: string }) {
   )
 }
 
-function FilterTab({ account }: { account: Account }) {
-  const stage = account.data?.lifecycle_stage
-  const score = account.data?.lead_score ?? 0
+// ─── ACTION TYPE ICON ────────────────────────────────────────────────────────
+function ActionIcon({ actionType }: { actionType?: string }) {
+  if (!actionType) return <Zap className="h-3.5 w-3.5 text-muted-foreground" />
+  if (actionType.includes('page_view') || actionType.includes('visit')) return <Eye className="h-3.5 w-3.5 text-muted-foreground" />
+  if (actionType.includes('install') || actionType.includes('npm')) return <Download className="h-3.5 w-3.5 text-blue-500" />
+  if (actionType.includes('claim')) return <CheckCircle className="h-3.5 w-3.5 text-green-500" />
+  if (actionType.includes('audit') || actionType.includes('self')) return <FileText className="h-3.5 w-3.5 text-purple-500" />
+  if (actionType.includes('signup') || actionType.includes('register')) return <User className="h-3.5 w-3.5 text-orange-500" />
+  return <Zap className="h-3.5 w-3.5 text-muted-foreground" />
+}
+
+// ─── SIGNAL TIMELINE ─────────────────────────────────────────────────────────
+function SignalTimeline({ accountId }: { accountId: string }) {
+  const [signals, setSignals] = useState<any[]>([])
+  const [loading, setLoading] = useState(true)
+  const [showAll, setShowAll] = useState(false)
+
+  useEffect(() => {
+    apiFetch(`/api/admin-data?action=list&entity=items&type_slug=funnel_signal&account_id=${accountId}&limit=50`)
+      .then(r => r.json())
+      .then(j => {
+        const items = Array.isArray(j?.data) ? j.data : Array.isArray(j) ? j : []
+        items.sort((a: any, b: any) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+        setSignals(items)
+      })
+      .catch(() => setSignals([]))
+      .finally(() => setLoading(false))
+  }, [accountId])
+
+  if (loading) return <div className="space-y-2">{Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}</div>
+  if (signals.length === 0) return (
+    <div className="text-center py-8 text-muted-foreground">
+      <Zap className="h-7 w-7 mx-auto mb-2 opacity-20" />
+      <p className="text-sm">No signals received yet.</p>
+    </div>
+  )
+
+  const visible = showAll ? signals : signals.slice(0, 8)
+
+  return (
+    <div className="space-y-1">
+      {visible.map(sig => {
+        const actionType = sig.data?.action?.action_type
+        const pipelineSlug = sig.data?.classification?.pipeline_slug
+        const rating = sig.data?.scoring_components?.raw_score?.rating
+        return (
+          <div key={sig.id} className="flex items-start gap-3 py-2 px-1 rounded hover:bg-muted/40 transition-colors">
+            <div className="mt-0.5 shrink-0"><ActionIcon actionType={actionType} /></div>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2 flex-wrap">
+                <span className="text-sm font-medium capitalize">{actionType?.replace(/_/g, ' ') || sig.title}</span>
+                {pipelineSlug && (
+                  <Badge variant="outline" className="text-xs py-0 h-4 font-mono">{pipelineSlug.replace('funnel-', '')}</Badge>
+                )}
+                {rating && (
+                  <span className={`text-xs font-medium ${
+                    rating >= 4 ? 'text-red-600' : rating >= 3 ? 'text-yellow-600' : 'text-muted-foreground'
+                  }`}>{rating}/5</span>
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {new Date(sig.created_at).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
+              </p>
+            </div>
+          </div>
+        )
+      })}
+      {signals.length > 8 && !showAll && (
+        <button className="text-xs text-primary hover:underline pt-1" onClick={() => setShowAll(true)}>
+          View all {signals.length} signals
+        </button>
+      )}
+    </div>
+  )
+}
+
+// ─── SCORE BREAKDOWN ─────────────────────────────────────────────────────────
+const PIPELINE_LABELS: Record<string, string> = {
+  'funnel-ai-audit': 'Audit Intent',
+  'funnel-ai-audit-portal-signup': 'Portal Signup',
+  'funnel-ai-audit-hot': 'Audit Hot',
+  'funnel-technical': 'Technical Intent',
+  'funnel-technical-installed': 'Install Activity',
+  'funnel-technical-claimed': 'Claim Intent',
+  'funnel-general': 'General',
+  anonymous: 'Anonymous',
+  identified: 'Identified',
+  installed: 'Installed',
+}
+
+function ScoreBreakdown({ ratings }: { ratings?: Record<string, any> }) {
+  if (!ratings || Object.keys(ratings).length === 0) return (
+    <p className="text-xs text-muted-foreground">No scoring data yet.</p>
+  )
+
+  return (
+    <div className="space-y-2.5">
+      {Object.entries(ratings).map(([key, val]) => {
+        if (!val || typeof val.rating !== 'number') return null
+        const displayPct = Math.round((val.raw_score / 25) * 100)
+        const label = PIPELINE_LABELS[key] || key
+        const color = displayPct >= 80 ? 'bg-green-500' : displayPct >= 50 ? 'bg-yellow-500' : displayPct >= 25 ? 'bg-blue-400' : 'bg-gray-300'
+        return (
+          <div key={key} className="flex items-center gap-3">
+            <span className="text-sm text-muted-foreground w-36 shrink-0 truncate">{label}</span>
+            <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+              <div className={`h-full rounded-full ${color}`} style={{ width: `${displayPct}%` }} />
+            </div>
+            <span className="text-xs font-semibold w-8 text-right tabular-nums">{displayPct}</span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// ─── FUNNEL TAB (replaces old FilterTab) ─────────────────────────────────────
+function FunnelTab({ account }: { account: Account }) {
   const temp = account.data?.temperature
+  const stage = account.data?.lifecycle_stage
   const ratings = account.data?.ratings
-  const attr = account.data?.attribution
   const queue = account.data?.queue
+  const claimStatus = (account.data as any)?.claim_status
+  const instanceId = (account.data as any)?.instance_id
 
   return (
     <div className="p-6 space-y-6">
-      {/* Header Stats */}
+      {/* Top stat row */}
       <div className="grid grid-cols-3 gap-4">
         <div className="border rounded-lg p-4">
-          <div className="flex items-center gap-2 mb-2">
-            <Target className="h-4 w-4 text-muted-foreground" />
-            <span className="text-xs text-muted-foreground uppercase tracking-wider">Lifecycle Stage</span>
+          <div className="flex items-center gap-2 mb-1.5">
+            <Target className="h-3.5 w-3.5 text-muted-foreground" />
+            <span className="text-xs text-muted-foreground uppercase tracking-wider">Stage</span>
           </div>
-          {stage ? (
-            <Badge className="capitalize text-sm" variant={stage === 'customer' ? 'default' : 'secondary'}>
-              {stage.replace(/_/g, ' ')}
-            </Badge>
-          ) : (
-            <span className="text-muted-foreground text-sm">Not set</span>
-          )}
+          {stage
+            ? <Badge className="capitalize" variant={stage === 'installed' ? 'default' : 'secondary'}>{stage}</Badge>
+            : <span className="text-sm text-muted-foreground">Not set</span>
+          }
         </div>
-
         <div className="border rounded-lg p-4">
-          <div className="flex items-center gap-2 mb-2">
-            <TrendingUp className="h-4 w-4 text-muted-foreground" />
-            <span className="text-xs text-muted-foreground uppercase tracking-wider">Lead Score</span>
-          </div>
-          <div className="flex items-center gap-3">
-            <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
-              <div 
-                className={`h-full rounded-full ${score >= 70 ? 'bg-green-500' : score >= 40 ? 'bg-yellow-500' : 'bg-gray-400'}`}
-                style={{ width: `${Math.min(score, 100)}%` }}
-              />
-            </div>
-            <span className="font-semibold">{score}</span>
+          <div className="flex items-center gap-2 mb-1.5">
+            <TrendingUp className="h-3.5 w-3.5 text-muted-foreground" />
+            <span className="text-xs text-muted-foreground uppercase tracking-wider">Temperature</span>
           </div>
+          {temp ? (
+            <Badge variant="outline" className={`capitalize ${
+              temp === 'hot' ? 'border-red-400 text-red-600 bg-red-50' :
+              temp === 'warm' ? 'border-yellow-400 text-yellow-600 bg-yellow-50' :
+              'border-blue-400 text-blue-600 bg-blue-50'
+            }`}>{temp}</Badge>
+          ) : <span className="text-sm text-muted-foreground">—</span>}
         </div>
-
         <div className="border rounded-lg p-4">
-          <div className="flex items-center gap-2 mb-2">
-            <Clock className="h-4 w-4 text-muted-foreground" />
+          <div className="flex items-center gap-2 mb-1.5">
+            <Clock className="h-3.5 w-3.5 text-muted-foreground" />
             <span className="text-xs text-muted-foreground uppercase tracking-wider">Last Signal</span>
           </div>
           <span className="text-sm">
-            {account.data?.last_signal_at 
-              ? new Date(account.data.last_signal_at).toLocaleDateString()
-              : 'Never'
-            }
+            {account.data?.last_signal_at ? new Date(account.data.last_signal_at).toLocaleDateString() : 'Never'}
           </span>
         </div>
       </div>
 
-      {/* Temperature Badge */}
-      {temp && (
-        <div className="flex items-center gap-2">
-          <span className="text-sm text-muted-foreground">Temperature:</span>
-          <Badge 
-            variant="outline"
-            className={`capitalize ${
-              temp === 'hot' ? 'border-red-400 text-red-600 bg-red-50' :
-              temp === 'warm' ? 'border-yellow-400 text-yellow-600 bg-yellow-50' :
-              'border-blue-400 text-blue-600 bg-blue-50'
-            }`}
-          >
-            {temp}
-          </Badge>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Left: Signal Timeline */}
+        <div className="space-y-3">
+          <h3 className="font-medium text-sm flex items-center gap-2">
+            <Zap className="h-4 w-4 text-muted-foreground" /> Signal Timeline
+          </h3>
+          <SignalTimeline accountId={account.id} />
         </div>
-      )}
 
-      {/* Queue Status */}
-      {queue?.pending_opportunity_id && (
-        <div className="border rounded-lg p-4 bg-yellow-50 border-yellow-200">
-          <div className="flex items-center gap-2">
-            <Filter className="h-4 w-4 text-yellow-600" />
-            <span className="font-medium text-sm">Opportunity in Queue</span>
+        {/* Right: Score Breakdown + Claim Status */}
+        <div className="space-y-4">
+          <div className="border rounded-lg p-4 space-y-3">
+            <h3 className="font-medium text-sm flex items-center gap-2">
+              <TrendingUp className="h-4 w-4 text-muted-foreground" /> Signal Score Breakdown
+            </h3>
+            <ScoreBreakdown ratings={ratings} />
           </div>
-          <p className="text-xs text-muted-foreground mt-1">
-            Type: {queue.primary_opportunity_type?.replace(/_/g, ' ') || 'Unknown'}
-          </p>
-        </div>
-      )}
 
-      {/* Stage Ratings */}
-      {ratings && (
-        <div className="border rounded-lg p-4">
-          <h3 className="font-medium mb-4">Stage Ratings</h3>
-          <div className="space-y-3">
-            {ratings.anonymous && (
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-muted-foreground">Anonymous</span>
-                <div className="flex items-center gap-2">
-                  <div className="flex gap-0.5">
-                    {Array.from({ length: 5 }).map((_, i) => (
-                      <div 
-                        key={i} 
-                        className={`w-2 h-2 rounded-full ${i < ratings.anonymous!.rating ? 'bg-blue-500' : 'bg-gray-200'}`}
-                      />
-                    ))}
-                  </div>
-                  <span className="text-xs font-medium w-12 text-right">{ratings.anonymous.raw_score}</span>
-                </div>
-              </div>
-            )}
-            {ratings.identified && (
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-muted-foreground">Identified</span>
-                <div className="flex items-center gap-2">
-                  <div className="flex gap-0.5">
-                    {Array.from({ length: 5 }).map((_, i) => (
-                      <div 
-                        key={i} 
-                        className={`w-2 h-2 rounded-full ${i < ratings.identified!.rating ? 'bg-green-500' : 'bg-gray-200'}`}
-                      />
-                    ))}
-                  </div>
-                  <span className="text-xs font-medium w-12 text-right">{ratings.identified.raw_score}</span>
-                </div>
+          {/* Opportunity queue alert */}
+          {queue?.pending_opportunity_id && (
+            <div className="border rounded-lg p-4 bg-yellow-50 border-yellow-200">
+              <div className="flex items-center gap-2">
+                <Filter className="h-4 w-4 text-yellow-600" />
+                <span className="font-medium text-sm">Opportunity in Queue</span>
               </div>
-            )}
-            {ratings.engaged && (
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-muted-foreground">Engaged</span>
-                <div className="flex items-center gap-2">
-                  <div className="flex gap-0.5">
-                    {Array.from({ length: 5 }).map((_, i) => (
-                      <div 
-                        key={i} 
-                        className={`w-2 h-2 rounded-full ${i < ratings.engaged!.rating ? 'bg-orange-500' : 'bg-gray-200'}`}
-                      />
-                    ))}
-                  </div>
-                  <span className="text-xs font-medium w-12 text-right">{ratings.engaged.raw_score}</span>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
+              <p className="text-xs text-muted-foreground mt-1">
+                {queue.primary_opportunity_type?.replace(/_/g, ' ') || 'Pending review'}
+              </p>
+            </div>
+          )}
 
-      {/* Attribution */}
-      {(attr?.anonymous_first_touch || attr?.identified_first_touch) && (
-        <div className="border rounded-lg p-4">
-          <h3 className="font-medium mb-4">Attribution</h3>
-          <div className="space-y-3 text-sm">
-            {attr.anonymous_first_touch && (
+          {/* Identity / Claim Status */}
+          <div className="border rounded-lg p-4 space-y-3">
+            <h3 className="font-medium text-sm flex items-center gap-2">
+              <Link2 className="h-4 w-4 text-muted-foreground" /> Identity / Claim Status
+            </h3>
+            <div className="space-y-2 text-sm">
               <div className="flex justify-between">
-                <span className="text-muted-foreground">Anonymous First Touch</span>
-                <span className="text-right">
-                  <span className="font-medium">{attr.anonymous_first_touch.referrer || 'Direct'}</span>
-                  <span className="text-xs text-muted-foreground block">
-                    {attr.anonymous_first_touch.at ? new Date(attr.anonymous_first_touch.at).toLocaleDateString() : ''}
-                  </span>
-                </span>
+                <span className="text-muted-foreground">Instance ID</span>
+                <span className="font-mono text-xs">{instanceId ? instanceId.slice(0, 14) + '…' : '—'}</span>
               </div>
-            )}
-            {attr.identified_first_touch && (
-              <div className="flex justify-between">
-                <span className="text-muted-foreground">Identified First Touch</span>
-                <span className="text-right">
-                  <span className="font-medium">{attr.identified_first_touch.referrer || 'Direct'}</span>
-                  <span className="text-xs text-muted-foreground block">
-                    {attr.identified_first_touch.at ? new Date(attr.identified_first_touch.at).toLocaleDateString() : ''}
-                  </span>
-                </span>
+              <div className="flex justify-between items-center">
+                <span className="text-muted-foreground">Claim Status</span>
+                {claimStatus === 'claimed'
+                  ? <Badge className="text-xs bg-green-100 text-green-700 border-green-200">Claimed</Badge>
+                  : <Badge variant="outline" className="text-xs">Unclaimed</Badge>
+                }
               </div>
-            )}
+              {!claimStatus && (
+                <Button variant="outline" size="sm" className="w-full mt-1 text-xs gap-1.5">
+                  <Link2 className="h-3.5 w-3.5" /> Create Claim Link
+                </Button>
+              )}
+            </div>
           </div>
         </div>
-      )}
+      </div>
 
-      {/* Empty State */}
-      {!stage && !score && !temp && !ratings && !queue?.pending_opportunity_id && (
+      {/* Empty state */}
+      {!stage && !temp && !ratings && !queue?.pending_opportunity_id && (
         <div className="text-center py-12 text-muted-foreground">
           <Filter className="h-10 w-10 mx-auto mb-3 opacity-30" />
           <p className="text-sm">No funnel data yet.</p>
@@ -381,7 +427,7 @@ export default function AccountDetailPage() {
 
         <ScrollArea className="flex-1">
           <TabsContent value="people" className="mt-0"><PeopleTab accountId={id!} /></TabsContent>
-          <TabsContent value="funnel" className="mt-0"><FilterTab account={account} /></TabsContent>
+          <TabsContent value="funnel" className="mt-0"><FunnelTab account={account} /></TabsContent>
           <TabsContent value="tickets" className="mt-0"><ItemsTab accountId={id!} typeSlug="support_ticket" emptyText="No tickets." /></TabsContent>
           <TabsContent value="deals" className="mt-0"><ItemsTab accountId={id!} typeSlug="deal" emptyText="No deals." /></TabsContent>
           <TabsContent value="health" className="mt-0"><ItemsTab accountId={id!} typeSlug="csm_health" emptyText="No health records." /></TabsContent>

package/pages/ops/AuditFunnelPage.tsx

@@ -0,0 +1,191 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { apiFetch } from '@core/lib/api'
+import { Badge } from '@core/components/ui/badge'
+import { Button } from '@core/components/ui/button'
+import { Input } from '@core/components/ui/input'
+import { Skeleton } from '@core/components/ui/skeleton'
+import { ScanSearch, ChevronRight, Search } from 'lucide-react'
+
+interface AuditAccount {
+  id: string
+  slug: string
+  display_name?: string
+  created_at: string
+  data?: {
+    temperature?: 'cold' | 'warm' | 'hot'
+    lifecycle_stage?: string
+    lead_score?: number
+    last_signal_at?: string
+    ratings?: Record<string, { rating: number; raw_score: number; calculated_at?: string }>
+    claim_status?: string
+  }
+}
+
+function scoreBar(rating: number) {
+  const val = Math.round((rating / 5) * 100)
+  const color = val >= 80 ? 'bg-green-500' : val >= 50 ? 'bg-yellow-500' : 'bg-gray-300'
+  return (
+    <div className="flex items-center gap-2">
+      <div className="w-24 h-1.5 bg-muted rounded-full overflow-hidden">
+        <div className={`h-full rounded-full ${color}`} style={{ width: `${val}%` }} />
+      </div>
+      <span className="text-xs font-medium tabular-nums">{val}</span>
+    </div>
+  )
+}
+
+function recommendedOffer(rating: number): string {
+  if (rating >= 5) return 'Paid Audit $5k'
+  if (rating >= 4) return 'Discovery Call'
+  if (rating >= 3) return 'Self-Audit'
+  return 'Content Nurture'
+}
+
+function stageBadge(stage?: string) {
+  const map: Record<string, string> = {
+    anonymous: 'Anonymous',
+    identified: 'Identified',
+    installed: 'Installed',
+  }
+  return <Badge variant="secondary" className="text-xs capitalize">{map[stage || ''] || stage || '—'}</Badge>
+}
+
+function temperatureBadge(temp?: string) {
+  if (temp === 'hot') return <Badge className="bg-red-100 text-red-700 border-red-200 text-xs">Hot</Badge>
+  if (temp === 'warm') return <Badge className="bg-yellow-100 text-yellow-700 border-yellow-200 text-xs">Warm</Badge>
+  return <Badge variant="outline" className="text-xs">Cold</Badge>
+}
+
+export default function AuditFunnelPage() {
+  const navigate = useNavigate()
+  const [accounts, setAccounts] = useState<AuditAccount[]>([])
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState('')
+
+  useEffect(() => {
+    apiFetch('/api/admin-data?action=list&entity=accounts&limit=500')
+      .then(r => r.json())
+      .then(json => {
+        const all: AuditAccount[] = Array.isArray(json?.data) ? json.data : Array.isArray(json) ? json : []
+        // Keep accounts that have any audit funnel signal rating
+        const auditAccounts = all.filter(a =>
+          a.data?.ratings?.['funnel-ai-audit'] ||
+          a.data?.ratings?.['funnel-ai-audit-portal-signup'] ||
+          a.data?.ratings?.['funnel-ai-audit-hot']
+        )
+        // Sort by audit rating desc
+        auditAccounts.sort((a, b) => {
+          const ra = a.data?.ratings?.['funnel-ai-audit']?.rating || 0
+          const rb = b.data?.ratings?.['funnel-ai-audit']?.rating || 0
+          return rb - ra
+        })
+        setAccounts(auditAccounts)
+      })
+      .catch(() => setAccounts([]))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const filtered = accounts.filter(a => {
+    const q = search.toLowerCase()
+    return !q || (a.display_name || a.slug || '').toLowerCase().includes(q)
+  })
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="flex items-center gap-2">
+            <ScanSearch className="h-5 w-5 text-muted-foreground" />
+            <h1 className="text-2xl font-bold">Audit Funnel</h1>
+          </div>
+          <p className="text-sm text-muted-foreground mt-0.5">
+            Accounts progressing through the AI readiness audit — from marketing visit to paid audit.
+          </p>
+        </div>
+        <Button size="sm" onClick={() => navigate('/cortex/ops/command-center')}>
+          Command Center <ChevronRight className="h-3.5 w-3.5 ml-1" />
+        </Button>
+      </div>
+
+      {/* Summary stats */}
+      <div className="grid grid-cols-4 gap-4">
+        {[
+          { label: 'In Funnel', value: loading ? '…' : accounts.length },
+          { label: 'Hot (score ≥4)', value: loading ? '…' : accounts.filter(a => (a.data?.ratings?.['funnel-ai-audit']?.rating || 0) >= 4).length },
+          { label: 'Warm (score 3)', value: loading ? '…' : accounts.filter(a => (a.data?.ratings?.['funnel-ai-audit']?.rating || 0) === 3).length },
+          { label: 'Identified', value: loading ? '…' : accounts.filter(a => a.data?.lifecycle_stage === 'identified').length },
+        ].map(s => (
+          <div key={s.label} className="border rounded-lg p-4">
+            <div className="text-xs text-muted-foreground mb-1">{s.label}</div>
+            {loading ? <Skeleton className="h-7 w-12" /> : <div className="text-2xl font-bold">{s.value}</div>}
+          </div>
+        ))}
+      </div>
+
+      {/* Table */}
+      <div className="border rounded-lg">
+        <div className="flex items-center justify-between px-4 py-3 border-b">
+          <span className="font-medium text-sm">Audit Prospects</span>
+          <div className="relative w-56">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+            <Input
+              className="h-7 pl-8 text-xs"
+              placeholder="Search accounts…"
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+            />
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="p-4 space-y-3">
+            {Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="p-10 text-center text-sm text-muted-foreground">
+            <ScanSearch className="h-8 w-8 mx-auto mb-2 opacity-20" />
+            {search ? 'No accounts match your search.' : 'No audit funnel activity yet. Send signals with pipeline_slug: funnel-ai-audit to populate this view.'}
+          </div>
+        ) : (
+          <>
+            {/* Header row */}
+            <div className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr_1fr] gap-4 px-4 py-2 text-xs text-muted-foreground font-medium border-b bg-muted/30">
+              <span>Account</span>
+              <span>Signal Score</span>
+              <span>Stage</span>
+              <span>Last Signal</span>
+              <span>Recommended Offer</span>
+              <span>Status</span>
+            </div>
+            <div className="divide-y">
+              {filtered.map(a => {
+                const rating = a.data?.ratings?.['funnel-ai-audit']?.rating || 0
+                return (
+                  <div
+                    key={a.id}
+                    className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr_1fr] gap-4 px-4 py-3 items-center hover:bg-accent/50 cursor-pointer transition-colors text-sm"
+                    onClick={() => navigate(`/cortex/crm/accounts/${a.id}`)}
+                  >
+                    <div className="min-w-0">
+                      <div className="font-medium truncate">{a.display_name || a.slug}</div>
+                      <div className="text-xs text-muted-foreground truncate">{a.slug}</div>
+                    </div>
+                    <div>{scoreBar(rating)}</div>
+                    <div>{stageBadge(a.data?.lifecycle_stage)}</div>
+                    <div className="text-xs text-muted-foreground">
+                      {a.data?.last_signal_at ? new Date(a.data.last_signal_at).toLocaleDateString() : '—'}
+                    </div>
+                    <div className="text-xs">{recommendedOffer(rating)}</div>
+                    <div>{temperatureBadge(a.data?.temperature)}</div>
+                  </div>
+                )
+              })}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}