spine-framework-cortex 0.1.12 → 0.1.14

package/pages/ops/CommandCenterPage.tsx

@@ -0,0 +1,377 @@
+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 { Skeleton } from '@core/components/ui/skeleton'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@core/components/ui/tabs'
+import {
+  Flame, Download, ScanSearch, TrendingUp, Users,
+  ArrowUpRight, ChevronRight, Circle
+} from 'lucide-react'
+
+// ─── TYPES ────────────────────────────────────────────────────────────────────
+
+interface KpiData {
+  launchPipeline: number
+  managedOpsArr: number
+  paidAuditRequests: number
+  claimedInstalls: number
+  loading: boolean
+}
+
+interface Opportunity {
+  id: string
+  title: string
+  account_id?: string
+  data?: {
+    recommendation?: { opportunity_type?: string; confidence?: string; suggested_priority?: number }
+    trigger?: { trigger_stage?: string; trigger_rating?: number; trigger_reason?: string }
+    identity?: { account_id?: string }
+    review?: { status?: string }
+  }
+  created_at: string
+  account?: { display_name?: string; slug?: string; data?: any }
+}
+
+interface FunnelSignal {
+  id: string
+  data?: {
+    classification?: { pipeline_slug?: string; stage?: string }
+    action?: { action_type?: string }
+    scoring_components?: { raw_score?: { rating?: number } }
+  }
+  created_at: string
+}
+
+// ─── HELPERS ──────────────────────────────────────────────────────────────────
+
+function nextAction(stage?: string, temperature?: string): string {
+  if (temperature === 'hot') {
+    if (stage === 'installed') return 'Create Claim Link'
+    if (stage === 'identified') return 'Send Proposal'
+    return 'Schedule Exec Call'
+  }
+  if (temperature === 'warm') return 'Schedule Discovery Call'
+  return 'Review'
+}
+
+function temperatureBadge(temp?: string) {
+  if (temp === 'hot') return <Badge className="bg-red-100 text-red-700 border-red-200">Hot</Badge>
+  if (temp === 'warm') return <Badge className="bg-yellow-100 text-yellow-700 border-yellow-200">Warm</Badge>
+  return <Badge variant="secondary">New</Badge>
+}
+
+function opportunityTypeBadge(type?: string) {
+  const map: Record<string, string> = {
+    advanced_portal: 'Paid Audit',
+    managed_services: 'Managed Ops',
+    expansion: 'Expansion',
+    support_plan: 'Support Plan',
+    implementation: 'Unclaimed Install',
+    advocate: 'Partner',
+  }
+  return <Badge variant="outline">{map[type || ''] || type || '—'}</Badge>
+}
+
+function scoreBar(rating?: number) {
+  const val = Math.round(((rating || 0) / 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-20 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">{val}</span>
+    </div>
+  )
+}
+
+// ─── FUNNEL HEALTH ────────────────────────────────────────────────────────────
+
+function FunnelHealth({ signals, pipelineSlug, stages, label }: {
+  signals: FunnelSignal[]
+  pipelineSlug: string
+  stages: string[]
+  label: string
+}) {
+  const filtered = signals.filter(s => s.data?.classification?.pipeline_slug === pipelineSlug)
+  const counts = stages.map(stage => ({
+    stage,
+    count: filtered.filter(s => s.data?.classification?.stage === stage).length
+  }))
+
+  return (
+    <div className="border rounded-lg p-4 space-y-3">
+      <div className="flex items-center gap-2">
+        {pipelineSlug.includes('audit') ? <ScanSearch className="h-4 w-4 text-muted-foreground" /> : <Download className="h-4 w-4 text-muted-foreground" />}
+        <span className="font-medium text-sm">{label} Health</span>
+      </div>
+      <div className="flex items-center gap-1">
+        {counts.map((c, i) => (
+          <div key={c.stage} className="flex items-center gap-1">
+            <div className="text-center">
+              <div className="text-lg font-bold">{c.count}</div>
+              <div className="text-xs text-muted-foreground capitalize">{c.stage}</div>
+            </div>
+            {i < counts.length - 1 && <ChevronRight className="h-3 w-3 text-muted-foreground mx-1" />}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ─── MAIN PAGE ────────────────────────────────────────────────────────────────
+
+export default function CommandCenterPage() {
+  const navigate = useNavigate()
+  const [kpis, setKpis] = useState<KpiData>({ launchPipeline: 0, managedOpsArr: 0, paidAuditRequests: 0, claimedInstalls: 0, loading: true })
+  const [opportunities, setOpportunities] = useState<Opportunity[]>([])
+  const [accounts, setAccounts] = useState<any[]>([])
+  const [signals, setSignals] = useState<FunnelSignal[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    Promise.all([
+      apiFetch('/api/admin-data?action=list&entity=items&type_slug=deal&limit=500').then(r => r.json()),
+      apiFetch('/api/admin-data?action=list&entity=items&type_slug=opportunity_queue&limit=100').then(r => r.json()),
+      apiFetch('/api/admin-data?action=list&entity=accounts&limit=500').then(r => r.json()),
+      apiFetch('/api/admin-data?action=list&entity=items&type_slug=funnel_signal&limit=500').then(r => r.json()),
+    ]).then(([dealsRes, oppsRes, accsRes, sigsRes]) => {
+      const deals: any[] = dealsRes?.data ?? dealsRes ?? []
+      const opps: Opportunity[] = oppsRes?.data ?? oppsRes ?? []
+      const accs: any[] = accsRes?.data ?? accsRes ?? []
+      const sigs: FunnelSignal[] = sigsRes?.data ?? sigsRes ?? []
+
+      // KPIs from deals
+      const launchPipeline = deals
+        .filter((d: any) => d.data?.stage === 'launch_sprint')
+        .reduce((s: number, d: any) => s + (d.data?.value || 0), 0)
+      const managedOpsArr = deals
+        .filter((d: any) => d.data?.stage === 'managed_ops')
+        .reduce((s: number, d: any) => s + (d.data?.value || 0), 0)
+      const paidAuditRequests = opps.filter(o => o.data?.recommendation?.opportunity_type === 'advanced_portal').length
+      const claimedInstalls = accs.filter((a: any) => a.data?.claim_status === 'claimed').length
+
+      setKpis({ launchPipeline, managedOpsArr, paidAuditRequests, claimedInstalls, loading: false })
+
+      // Enrich opportunities with account data
+      const accById = Object.fromEntries(accs.map((a: any) => [a.id, a]))
+      const enriched = opps.map(o => ({
+        ...o,
+        account: accById[o.data?.identity?.account_id || o.account_id || '']
+      }))
+      setOpportunities(enriched)
+      setAccounts(accs)
+      setSignals(sigs)
+    }).catch(() => {}).finally(() => setLoading(false))
+  }, [])
+
+  const hotOpps = opportunities
+    .filter(o => o.data?.review?.status === 'pending')
+    .sort((a, b) => (b.data?.trigger?.trigger_rating || 0) - (a.data?.trigger?.trigger_rating || 0))
+    .slice(0, 10)
+
+  const auditAccounts = accounts.filter(a => a.data?.ratings?.['funnel-ai-audit'])
+  const installAccounts = accounts.filter(a => a.data?.ratings?.['funnel-technical'] || a.data?.lifecycle_stage === 'installed')
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Opportunity Command Center</h1>
+          <p className="text-sm text-muted-foreground mt-0.5">Signal-driven revenue operations. Prioritize what's hot, act with confidence, close faster.</p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm"><Download className="h-4 w-4 mr-1.5" />Export Signals</Button>
+          <Button size="sm"><TrendingUp className="h-4 w-4 mr-1.5" />Create Opportunity</Button>
+        </div>
+      </div>
+
+      {/* KPI Strip */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        {[
+          { label: 'Launch Pipeline', value: kpis.loading ? '…' : `$${(kpis.launchPipeline / 1000).toFixed(0)}k`, icon: TrendingUp, delta: null },
+          { label: 'Managed Ops ARR', value: kpis.loading ? '…' : `$${(kpis.managedOpsArr / 1000).toFixed(0)}k`, icon: TrendingUp, delta: null },
+          { label: 'Paid Audit Requests', value: kpis.loading ? '…' : kpis.paidAuditRequests, icon: ScanSearch, delta: null },
+          { label: 'Claimed Active Installs', value: kpis.loading ? '…' : kpis.claimedInstalls, icon: Download, delta: null },
+        ].map(kpi => (
+          <div key={kpi.label} className="border rounded-lg p-4 space-y-2">
+            <div className="flex items-center justify-between">
+              <span className="text-xs text-muted-foreground">{kpi.label}</span>
+              <kpi.icon className="h-4 w-4 text-muted-foreground" />
+            </div>
+            {kpis.loading
+              ? <Skeleton className="h-7 w-20" />
+              : <div className="text-2xl font-bold">{kpi.value}</div>
+            }
+          </div>
+        ))}
+      </div>
+
+      {/* Hot Opportunities */}
+      <div className="border rounded-lg">
+        <div className="flex items-center justify-between px-4 py-3 border-b">
+          <div className="flex items-center gap-2">
+            <Flame className="h-4 w-4 text-orange-500" />
+            <span className="font-semibold">Hot Opportunities</span>
+          </div>
+          <Button variant="ghost" size="sm" className="text-xs gap-1">
+            View all <ArrowUpRight className="h-3 w-3" />
+          </Button>
+        </div>
+
+        {loading ? (
+          <div className="p-4 space-y-3">
+            {Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}
+          </div>
+        ) : hotOpps.length === 0 ? (
+          <div className="p-8 text-center text-sm text-muted-foreground">
+            <Circle className="h-8 w-8 mx-auto mb-2 opacity-20" />
+            No pending opportunities yet. Signals will appear here once they score above threshold.
+          </div>
+        ) : (
+          <div className="divide-y">
+            {/* Table header */}
+            <div className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr_2fr_1fr] gap-4 px-4 py-2 text-xs text-muted-foreground font-medium">
+              <span>Opportunity</span><span>Type</span><span>Stage</span>
+              <span>Signal Score</span><span>Last Signal</span>
+              <span>Next Action</span><span>Status</span>
+            </div>
+            {hotOpps.map(opp => {
+              const acc = opp.account
+              const temp = acc?.data?.temperature
+              const stage = opp.data?.trigger?.trigger_stage
+              const rating = opp.data?.trigger?.trigger_rating
+              const oppType = opp.data?.recommendation?.opportunity_type
+              return (
+                <div
+                  key={opp.id}
+                  className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr_2fr_1fr] gap-4 px-4 py-3 items-center hover:bg-accent/50 cursor-pointer transition-colors text-sm"
+                  onClick={() => acc?.id && navigate(`/cortex/crm/accounts/${acc.id}`)}
+                >
+                  <div className="min-w-0">
+                    <div className="font-medium truncate">{acc?.display_name || acc?.slug || opp.title}</div>
+                    <div className="text-xs text-muted-foreground truncate">{acc?.slug || '—'}</div>
+                  </div>
+                  <div>{opportunityTypeBadge(oppType)}</div>
+                  <div><Badge variant="secondary" className="capitalize">{stage || '—'}</Badge></div>
+                  <div>{scoreBar(rating)}</div>
+                  <div className="text-xs text-muted-foreground">{new Date(opp.created_at).toLocaleDateString()}</div>
+                  <div className="text-xs">{nextAction(stage, temp)}</div>
+                  <div>{temperatureBadge(temp)}</div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Bottom: Tabs + Health Panels */}
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_300px_300px] gap-6">
+        <div className="border rounded-lg">
+          <Tabs defaultValue="audit">
+            <div className="px-4 pt-3 border-b">
+              <TabsList className="h-8 bg-transparent p-0 gap-4">
+                {['audit', 'install', 'partners', 'forecast'].map(t => (
+                  <TabsTrigger key={t} value={t}
+                    className="capitalize rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent h-8 px-1 text-xs">
+                    {t === 'audit' ? 'Audit Funnel' : t === 'install' ? 'Install Funnel' : t === 'partners' ? 'Partner Signals' : 'Revenue Forecast'}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </div>
+
+            <TabsContent value="audit" className="mt-0 p-4">
+              <p className="text-xs text-muted-foreground mb-3 font-medium">Audit-Led Opportunities</p>
+              {auditAccounts.length === 0 ? (
+                <p className="text-sm text-muted-foreground text-center py-6">No audit funnel activity yet.</p>
+              ) : (
+                <div className="divide-y">
+                  <div className="grid grid-cols-[2fr_1fr_2fr_1fr] gap-3 pb-2 text-xs text-muted-foreground font-medium">
+                    <span>Account</span><span>Score</span><span>Recommended Offer</span><span>Status</span>
+                  </div>
+                  {auditAccounts.slice(0, 6).map(a => {
+                    const r = a.data?.ratings?.['funnel-ai-audit']?.rating || 0
+                    const offer = r >= 5 ? 'Paid Audit $5k' : r >= 4 ? 'Discovery Call' : r >= 3 ? 'Self-Audit' : 'Content Nurture'
+                    const status = a.data?.temperature === 'hot' ? 'Hot' : a.data?.temperature === 'warm' ? 'Warm' : 'New'
+                    return (
+                      <div key={a.id}
+                        className="grid grid-cols-[2fr_1fr_2fr_1fr] gap-3 py-2 items-center text-sm cursor-pointer hover:bg-accent/50"
+                        onClick={() => navigate(`/cortex/crm/accounts/${a.id}`)}>
+                        <span className="font-medium truncate">{a.display_name || a.slug}</span>
+                        {scoreBar(r)}
+                        <span className="text-xs text-muted-foreground">{offer}</span>
+                        <Badge variant={status === 'Hot' ? 'destructive' : 'secondary'} className="text-xs">{status}</Badge>
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+              <Button variant="ghost" size="sm" className="mt-2 text-xs" onClick={() => navigate('/cortex/ops/audit-funnel')}>
+                View all audit opportunities <ChevronRight className="h-3 w-3 ml-1" />
+              </Button>
+            </TabsContent>
+
+            <TabsContent value="install" className="mt-0 p-4">
+              <p className="text-xs text-muted-foreground mb-3 font-medium">Install-Led Opportunities</p>
+              {installAccounts.length === 0 ? (
+                <p className="text-sm text-muted-foreground text-center py-6">No install funnel activity yet.</p>
+              ) : (
+                <div className="divide-y">
+                  <div className="grid grid-cols-[2fr_1fr_1fr_1fr] gap-3 pb-2 text-xs text-muted-foreground font-medium">
+                    <span>Account</span><span>Score</span><span>Stage</span><span>Claim</span>
+                  </div>
+                  {installAccounts.slice(0, 6).map(a => {
+                    const r = a.data?.ratings?.['funnel-technical']?.rating || a.data?.ratings?.installed?.rating || 0
+                    return (
+                      <div key={a.id}
+                        className="grid grid-cols-[2fr_1fr_1fr_1fr] gap-3 py-2 items-center text-sm cursor-pointer hover:bg-accent/50"
+                        onClick={() => navigate(`/cortex/crm/accounts/${a.id}`)}>
+                        <span className="font-medium truncate">{a.display_name || a.slug}</span>
+                        {scoreBar(r)}
+                        <Badge variant="secondary" className="text-xs capitalize">{a.data?.lifecycle_stage || '—'}</Badge>
+                        <Badge variant={a.data?.claim_status === 'claimed' ? 'default' : 'outline'} className="text-xs">
+                          {a.data?.claim_status === 'claimed' ? 'Claimed' : 'Unclaimed'}
+                        </Badge>
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+              <Button variant="ghost" size="sm" className="mt-2 text-xs" onClick={() => navigate('/cortex/ops/install-funnel')}>
+                View install funnel <ChevronRight className="h-3 w-3 ml-1" />
+              </Button>
+            </TabsContent>
+
+            <TabsContent value="partners" className="mt-0 p-8 text-center text-sm text-muted-foreground">
+              <Users className="h-8 w-8 mx-auto mb-2 opacity-20" />
+              Partner signal tracking coming soon.
+            </TabsContent>
+
+            <TabsContent value="forecast" className="mt-0 p-8 text-center text-sm text-muted-foreground">
+              <TrendingUp className="h-8 w-8 mx-auto mb-2 opacity-20" />
+              Revenue forecast coming soon.
+            </TabsContent>
+          </Tabs>
+        </div>
+
+        {/* Funnel Health Panels */}
+        <FunnelHealth
+          signals={signals}
+          pipelineSlug="funnel-technical"
+          stages={['anonymous', 'identified', 'installed']}
+          label="Install Funnel"
+        />
+        <FunnelHealth
+          signals={signals}
+          pipelineSlug="funnel-ai-audit"
+          stages={['anonymous', 'identified', 'installed']}
+          label="Audit Funnel"
+        />
+      </div>
+    </div>
+  )
+}

package/pages/ops/InstallFunnelPage.tsx

@@ -0,0 +1,226 @@
+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 { Download, Search, ChevronRight } from 'lucide-react'
+
+type FilterTab = 'all' | 'unclaimed' | 'claimed' | 'hot'
+
+interface InstallAccount {
+  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
+    claim_status?: string
+    instance_id?: string
+    ratings?: Record<string, { rating: number; raw_score: number; calculated_at?: 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 claimBadge(status?: string) {
+  if (status === 'claimed') return <Badge className="text-xs bg-green-100 text-green-700 border-green-200">Claimed</Badge>
+  return <Badge variant="outline" className="text-xs">Unclaimed</Badge>
+}
+
+function stageBadge(stage?: string) {
+  return <Badge variant="secondary" className="text-xs capitalize">{stage || '—'}</Badge>
+}
+
+function maskInstanceId(id?: string): string {
+  if (!id) return '—'
+  if (id.length <= 12) return id
+  return id.slice(0, 10) + '…'
+}
+
+function daysSince(dateStr?: string): number | null {
+  if (!dateStr) return null
+  return Math.floor((Date.now() - new Date(dateStr).getTime()) / (1000 * 60 * 60 * 24))
+}
+
+export default function InstallFunnelPage() {
+  const navigate = useNavigate()
+  const [accounts, setAccounts] = useState<InstallAccount[]>([])
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState('')
+  const [tab, setTab] = useState<FilterTab>('all')
+
+  useEffect(() => {
+    apiFetch('/api/admin-data?action=list&entity=accounts&limit=500')
+      .then(r => r.json())
+      .then(json => {
+        const all: InstallAccount[] = Array.isArray(json?.data) ? json.data : Array.isArray(json) ? json : []
+        // Keep accounts in the technical funnel
+        const techAccounts = all.filter(a =>
+          a.data?.ratings?.['funnel-technical'] ||
+          a.data?.ratings?.['funnel-technical-installed'] ||
+          a.data?.ratings?.['funnel-technical-claimed'] ||
+          a.data?.lifecycle_stage === 'installed'
+        )
+        // Sort by technical rating desc, then by first signal date
+        techAccounts.sort((a, b) => {
+          const ra = a.data?.ratings?.['funnel-technical']?.rating || a.data?.ratings?.installed?.rating || 0
+          const rb = b.data?.ratings?.['funnel-technical']?.rating || b.data?.ratings?.installed?.rating || 0
+          if (rb !== ra) return rb - ra
+          return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+        })
+        setAccounts(techAccounts)
+      })
+      .catch(() => setAccounts([]))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const tabFiltered = accounts.filter(a => {
+    if (tab === 'unclaimed') return a.data?.claim_status !== 'claimed'
+    if (tab === 'claimed') return a.data?.claim_status === 'claimed'
+    if (tab === 'hot') return a.data?.temperature === 'hot'
+    return true
+  })
+
+  const filtered = tabFiltered.filter(a => {
+    const q = search.toLowerCase()
+    return !q || (a.display_name || a.slug || a.data?.instance_id || '').toLowerCase().includes(q)
+  })
+
+  const counts = {
+    all: accounts.length,
+    unclaimed: accounts.filter(a => a.data?.claim_status !== 'claimed').length,
+    claimed: accounts.filter(a => a.data?.claim_status === 'claimed').length,
+    hot: accounts.filter(a => a.data?.temperature === 'hot').length,
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="flex items-center gap-2">
+            <Download className="h-5 w-5 text-muted-foreground" />
+            <h1 className="text-2xl font-bold">Install Funnel</h1>
+          </div>
+          <p className="text-sm text-muted-foreground mt-0.5">
+            Developer accounts progressing from npm install through claim — your technical pipeline.
+          </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: 'Total Installs', value: loading ? '…' : accounts.length },
+          { label: 'Claimed', value: loading ? '…' : counts.claimed },
+          { label: 'Unclaimed', value: loading ? '…' : counts.unclaimed },
+          { label: 'Hot', value: loading ? '…' : counts.hot },
+        ].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">
+          {/* Filter tabs */}
+          <div className="flex gap-0.5">
+            {(['all', 'unclaimed', 'claimed', 'hot'] as FilterTab[]).map(t => (
+              <button
+                key={t}
+                onClick={() => setTab(t)}
+                className={`px-3 py-1 text-xs rounded-md capitalize transition-colors ${
+                  tab === t ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+                }`}
+              >
+                {t} ({counts[t]})
+              </button>
+            ))}
+          </div>
+          <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 installs…"
+              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">
+            <Download className="h-8 w-8 mx-auto mb-2 opacity-20" />
+            {search ? 'No installs match your search.' : 'No technical funnel activity yet. npm install signals will appear here.'}
+          </div>
+        ) : (
+          <>
+            <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>Instance / Account</span>
+              <span>Signal Score</span>
+              <span>Stage</span>
+              <span>Last Action</span>
+              <span>Claim Status</span>
+              <span>Days Active</span>
+            </div>
+            <div className="divide-y">
+              {filtered.map(a => {
+                const rating = a.data?.ratings?.['funnel-technical']?.rating
+                  || a.data?.ratings?.['funnel-technical-claimed']?.rating
+                  || a.data?.ratings?.installed?.rating
+                  || 0
+                const days = daysSince(a.created_at)
+                const instanceId = a.data?.instance_id || a.slug
+                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 font-mono text-xs truncate">{maskInstanceId(instanceId)}</div>
+                      {a.display_name && <div className="text-xs text-muted-foreground truncate">{a.display_name}</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>{claimBadge(a.data?.claim_status)}</div>
+                    <div className="text-xs text-muted-foreground">{days !== null ? `${days}d` : '—'}</div>
+                  </div>
+                )
+              })}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/seed/pipelines.json

@@ -1,18 +1,17 @@
 [
   {
+    "slug": "case-analysis",
     "name": "Case Analysis Pipeline",
     "description": "Automatically analyzes resolved support tickets to extract insights and create tags",
-    "steps": [
+    "stages": [
       {
-        "name": "Analyze Ticket",
-        "type": "function",
+        "stage_type": "agent_inference",
         "config": {
           "function": "case_analysis.analyze"
         }
       },
       {
-        "name": "Generate Tags",
-        "type": "function",
+        "stage_type": "agent_inference",
         "config": {
           "function": "tag_management.generate"
         }
@@ -26,5 +25,35 @@
     "ownership": "tenant",
     "is_system": false,
     "is_active": true
+  },
+  {
+    "slug": "funnel-general",
+    "name": "Funnel: General",
+    "description": "Default funnel pipeline — fires for all signals without a specific pipeline_slug. Add stages to notify, create deals, or trigger outreach.",
+    "stages": [],
+    "config": {},
+    "ownership": "tenant",
+    "is_system": false,
+    "is_active": true
+  },
+  {
+    "slug": "funnel-ai-audit",
+    "name": "Funnel: AI Audit",
+    "description": "Pipeline for the AI Audit funnel. Fires when a signal arrives with pipeline_slug='funnel-ai-audit'. Add stages to run your sales sequence.",
+    "stages": [],
+    "config": {},
+    "ownership": "tenant",
+    "is_system": false,
+    "is_active": true
+  },
+  {
+    "slug": "funnel-implementation",
+    "name": "Funnel: Implementation",
+    "description": "Pipeline for the Implementation Contract funnel. Fires when a signal arrives with pipeline_slug='funnel-implementation'.",
+    "stages": [],
+    "config": {},
+    "ownership": "tenant",
+    "is_system": false,
+    "is_active": true
   }
 ]