spine-framework-cortex 0.1.19 → 0.2.0

package/pages/crm/AccountDetailPage.tsx

@@ -6,7 +6,8 @@ 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 { ArrowLeft, User, Ticket, Handshake, Activity, Heart, Filter, TrendingUp, Target, Clock, Eye, Download, FileText, CheckCircle, Zap, Link2 } from 'lucide-react'
+import { Separator } from '@core/components/ui/separator'
+import { ArrowLeft, User, Ticket, Handshake, Activity, Heart, Funnel, TrendingUp, Target, Clock } from 'lucide-react'
 
 interface Account {
   id: string
@@ -38,7 +39,8 @@ interface Account {
 interface Person {
   id: string
   email: string
-  full_name?: string
+  first_name?: string
+  last_name?: string
   created_at: string
 }
 
@@ -67,7 +69,7 @@ function PeopleTab({ accountId }: { accountId: string }) {
             <User className="h-4 w-4 text-muted-foreground" />
           </div>
           <div>
-            <p className="text-sm font-medium">{p.full_name || '—'}</p>
+            <p className="text-sm font-medium">{[p.first_name, p.last_name].filter(Boolean).join(' ') || '—'}</p>
             <p className="text-xs text-muted-foreground">{p.email}</p>
           </div>
           <p className="ml-auto text-xs text-muted-foreground">{new Date(p.created_at).toLocaleDateString()}</p>
@@ -139,231 +141,184 @@ function ActivityTab({ accountId }: { accountId: string }) {
   )
 }
 
-// ─── 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 score = account.data?.lead_score ?? 0
+  const temp = account.data?.temperature
   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">
-      {/* Top stat row */}
+      {/* Header Stats */}
       <div className="grid grid-cols-3 gap-4">
         <div className="border rounded-lg p-4">
-          <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 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>
-          {stage
-            ? <Badge className="capitalize" variant={stage === 'installed' ? 'default' : 'secondary'}>{stage}</Badge>
-            : <span className="text-sm text-muted-foreground">Not set</span>
-          }
+          {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>
+          )}
         </div>
+
         <div className="border rounded-lg p-4">
-          <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 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>
-          {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-1.5">
-            <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+          <div className="flex items-center gap-2 mb-2">
+            <Clock className="h-4 w-4 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>
 
-      <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} />
+      {/* 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>
+      )}
 
-        {/* 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} />
+      {/* 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">
+            <Funnel className="h-4 w-4 text-yellow-600" />
+            <span className="font-medium text-sm">Opportunity in Queue</span>
           </div>
+          <p className="text-xs text-muted-foreground mt-1">
+            Type: {queue.primary_opportunity_type?.replace(/_/g, ' ') || 'Unknown'}
+          </p>
+        </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>
+      {/* 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>
-              <p className="text-xs text-muted-foreground mt-1">
-                {queue.primary_opportunity_type?.replace(/_/g, ' ') || 'Pending review'}
-              </p>
-            </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>
+              </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>
+      )}
 
-          {/* 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">
+      {/* 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 && (
               <div className="flex justify-between">
-                <span className="text-muted-foreground">Instance ID</span>
-                <span className="font-mono text-xs">{instanceId ? instanceId.slice(0, 14) + '…' : '—'}</span>
+                <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>
               </div>
-              <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>
-                }
+            )}
+            {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>
-              {!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 && !temp && !ratings && !queue?.pending_opportunity_id && (
+      {/* Empty State */}
+      {!stage && !score && !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" />
+          <Funnel className="h-10 w-10 mx-auto mb-3 opacity-30" />
           <p className="text-sm">No funnel data yet.</p>
           <p className="text-xs mt-1">Signals will appear here as they are processed.</p>
         </div>
@@ -410,7 +365,7 @@ export default function AccountDetailPage() {
           <TabsList className="h-9 bg-transparent p-0 gap-4">
             {[
               { value: 'people', label: 'People', icon: User },
-              { value: 'funnel', label: 'Funnel', icon: Filter },
+              { value: 'funnel', label: 'Funnel', icon: Funnel },
               { value: 'tickets', label: 'Tickets', icon: Ticket },
               { value: 'deals', label: 'Deals', icon: Handshake },
               { value: 'health', label: 'Health', icon: Heart },

package/pages/crm/ContactsPage.tsx

@@ -1,17 +1,16 @@
 import { useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
 import { apiFetch } from '@core/lib/api'
 
 interface Person {
   id: string
   email: string
-  full_name?: string
+  first_name?: string
+  last_name?: string
   account_id?: string
   created_at: string
 }
 
 export default function ContactsPage() {
-  const navigate = useNavigate()
   const [people, setPeople] = useState<Person[]>([])
   const [loading, setLoading] = useState(true)
   const [search, setSearch] = useState('')
@@ -26,8 +25,9 @@ export default function ContactsPage() {
 
   const filtered = people.filter(p => {
     const q = search.toLowerCase()
-    return !q || (p.email || '').toLowerCase().includes(q) ||
-      (p.full_name || '').toLowerCase().includes(q)
+    return !q || p.email.toLowerCase().includes(q) ||
+      (p.first_name || '').toLowerCase().includes(q) ||
+      (p.last_name || '').toLowerCase().includes(q)
   })
 
   return (
@@ -68,9 +68,9 @@ export default function ContactsPage() {
                   </td>
                 </tr>
               ) : filtered.map(person => (
-                <tr key={person.id} className="hover:bg-slate-50 cursor-pointer" onClick={() => navigate(`/cortex/crm/contacts/${person.id}`)}>
+                <tr key={person.id} className="hover:bg-slate-50">
                   <td className="px-5 py-3 font-medium text-slate-900">
-                    {person.full_name || '—'}
+                    {[person.first_name, person.last_name].filter(Boolean).join(' ') || '—'}
                   </td>
                   <td className="px-5 py-3 text-slate-600">{person.email}</td>
                   <td className="px-5 py-3 text-right text-slate-400 text-xs">

package/pages/intelligence/IntelligencePage.tsx

@@ -11,11 +11,11 @@ interface FunnelSignal {
   id: string
   title: string
   data: {
-    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 }
+    signal_type: string
+    score_delta: number
+    account_id?: string
+    person_id?: string
+    occurred_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 || acc.data?.lifecycle_stage))
+      setAccounts(accountsData.filter((acc: any) => acc.data?.lead_score !== undefined))
     }
   }, [accountsData])
 
@@ -206,35 +206,28 @@ export default function IntelligencePage() {
             <CardContent>
               <div className="space-y-3">
                 {signals
-                  .filter(signal => signal.data?.identity?.account_id === selectedAccountId)
+                  .filter(signal => signal.data.account_id === selectedAccountId)
                   .slice(0, 5)
-                  .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>
+                  .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()}
                           </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>

package/pages/kb/KBEditorPage.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
-import { resolveTypeId } from '../../lib/resolveTypeId'
 import { useParams, useNavigate } from 'react-router-dom'
 import { apiFetch } from '@core/lib/api'
+import { getTypeIdAsync } from '../hooks/useTypeRegistry'
 import { RichTextEditor } from '@core/components/ui/RichTextEditor'
 import { Button } from '@core/components/ui/button'
 import { Input } from '@core/components/ui/input'
@@ -71,6 +71,7 @@ export default function KBEditorPage() {
   const [loading, setLoading] = useState(!isNew)
   const [saving, setSaving] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [kbArticleTypeId, setKbArticleTypeId] = useState<string>('')
 
   useEffect(() => {
     if (isNew) return
@@ -94,13 +95,19 @@ export default function KBEditorPage() {
       .finally(() => setLoading(false))
   }, [id, isNew])
 
+  useEffect(() => {
+    getTypeIdAsync('kb_article').then(id => {
+      if (id) setKbArticleTypeId(id)
+    })
+  }, [])
+
   const handleSave = async (publish?: boolean) => {
     if (!form.title.trim()) { setError('Title is required'); return }
     if (!form.kb_type) { setError('KB Type is required'); return }
+    if (!kbArticleTypeId) { setError('Type not loaded'); return }
     setSaving(true)
     setError(null)
     try {
-      const kbArticleTypeId = await resolveTypeId('kb_article')
       const payload = {
         title: form.title.trim(),
         description: form.description,