spine-framework-cortex 0.1.13 → 0.1.15

package/functions/webhook-handlers.ts

@@ -26,3 +26,4 @@ registerWebhookHandler({
   description: 'Funnel signal processing webhook handler',
   events: ['integration.webhook'],
 }).catch(console.error)
+

package/index.tsx

@@ -37,6 +37,11 @@ const CoursesPage = lazy(() => import('./pages/courses/CoursesPage'))
 // Intelligence
 const IntelligencePage = lazy(() => import('./pages/intelligence/IntelligencePage'))
 
+// Ops / Revenue
+const CommandCenterPage = lazy(() => import('./pages/ops/CommandCenterPage'))
+const AuditFunnelPage = lazy(() => import('./pages/ops/AuditFunnelPage'))
+const InstallFunnelPage = lazy(() => import('./pages/ops/InstallFunnelPage'))
+
 const Fallback = <div className="min-h-[400px] flex items-center justify-center"><LoadingSpinner /></div>
 
 function CortexLayout() {
@@ -96,6 +101,11 @@ function CortexLayout() {
           {/* Intelligence */}
           <Route path="intelligence" element={<IntelligencePage />} />
 
+          {/* Ops / Revenue */}
+          <Route path="ops/command-center" element={<CommandCenterPage />} />
+          <Route path="ops/audit-funnel" element={<AuditFunnelPage />} />
+          <Route path="ops/install-funnel" element={<InstallFunnelPage />} />
+
           <Route path="*" element={<Navigate to="dashboard" replace />} />
         </Routes>
       </Suspense>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spine-framework-cortex",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "Cortex — AI-powered support, CRM, and knowledge base app for Spine Framework",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE.md",

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/intelligence/IntelligencePage.tsx

@@ -11,11 +11,11 @@ interface FunnelSignal {
   id: string
   title: string
   data: {
-    signal_type: string
-    score_delta: number
-    account_id?: string
-    person_id?: string
-    occurred_at: string
+    action?: { action_type?: string; action_value?: number }
+    identity?: { account_id?: string; person_id?: string; anonymous_id?: string }
+    classification?: { stage?: string; source?: string }
+    scoring_components?: { raw_score?: { rating?: number; calculated?: number } }
+    processing?: { received_at?: string; scored_at?: string }
   }
   created_at: string
 }
@@ -95,7 +95,7 @@ export default function IntelligencePage() {
 
   useEffect(() => {
     if (accountsData) {
-      setAccounts(accountsData.filter((acc: any) => acc.data?.lead_score !== undefined))
+      setAccounts(accountsData.filter((acc: any) => acc.data?.lead_score !== undefined || acc.data?.lifecycle_stage))
     }
   }, [accountsData])
 
@@ -206,28 +206,35 @@ export default function IntelligencePage() {
             <CardContent>
               <div className="space-y-3">
                 {signals
-                  .filter(signal => signal.data.account_id === selectedAccountId)
+                  .filter(signal => signal.data?.identity?.account_id === selectedAccountId)
                   .slice(0, 5)
-                  .map((signal) => (
-                    <div key={signal.id} className="flex items-center justify-between p-3 border rounded">
-                      <div className="flex items-center space-x-3">
-                        <Badge className={getSignalTypeColor(signal.data.signal_type)}>
-                          {signal.data.signal_type}
-                        </Badge>
-                        <div>
-                          <div className="font-medium">{signal.title}</div>
-                          <div className="text-sm text-gray-500">
-                            {new Date(signal.data.occurred_at).toLocaleDateString()}
+                  .map((signal) => {
+                    const actionType = signal.data?.action?.action_type
+                    const rating = signal.data?.scoring_components?.raw_score?.rating
+                    const receivedAt = signal.data?.processing?.received_at || signal.created_at
+                    return (
+                      <div key={signal.id} className="flex items-center justify-between p-3 border rounded">
+                        <div className="flex items-center space-x-3">
+                          <Badge className={getSignalTypeColor(actionType || '')}>
+                            {actionType || signal.title}
+                          </Badge>
+                          <div>
+                            <div className="font-medium">{signal.title}</div>
+                            <div className="text-sm text-gray-500">
+                              {new Date(receivedAt).toLocaleDateString()}
+                            </div>
                           </div>
                         </div>
+                        {rating !== undefined && (
+                          <div className={`font-bold ${
+                            rating >= 4 ? 'text-green-600' : rating >= 3 ? 'text-yellow-600' : 'text-gray-500'
+                          }`}>
+                            {rating}/5
+                          </div>
+                        )}
                       </div>
-                      <div className={`font-bold ${
-                        signal.data.score_delta > 0 ? 'text-green-600' : 'text-red-600'
-                      }`}>
-                        {signal.data.score_delta > 0 ? '+' : ''}{signal.data.score_delta}
-                      </div>
-                    </div>
-                  ))}
+                    )
+                  })}
               </div>
             </CardContent>
           </Card>