spine-framework-cortex 0.2.22 → 0.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spine-framework-cortex",
-  "version": "0.2.22",
+  "version": "0.2.24",
   "private": false,
   "description": "Cortex — AI-powered support, CRM, and knowledge base app for Spine Framework",
   "keywords": [

package/pages/community/CommunityPage.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Send, Hash, MessageSquarePlus, AlertCircle } from 'lucide-react'
 import { apiFetch } from '@core/lib/api'
+import { getTypeIdAsync } from '../../hooks/useTypeRegistry'
 import { Button } from '@core/components/ui/button'
 import { Input } from '@core/components/ui/input'
 import { Badge } from '@core/components/ui/badge'
@@ -20,6 +21,11 @@ function ThreadPane({ post }: { post: Post }) {
   const [loading, setLoading] = useState(true)
   const [replyText, setReplyText] = useState('')
   const [sending, setSending] = useState(false)
+  const [messageTypeId, setMessageTypeId] = useState<string | null>(null)
+
+  useEffect(() => {
+    getTypeIdAsync('message').then(id => setMessageTypeId(id))
+  }, [])
 
   useEffect(() => {
     setLoading(true)
@@ -33,14 +39,15 @@ function ThreadPane({ post }: { post: Post }) {
   }, [post.id])
 
   const handleSend = async () => {
-    if (!replyText.trim() || !thread) return
+    if (!replyText.trim() || !thread || !messageTypeId) return
     setSending(true)
     try {
       const res = await apiFetch('/api/admin-data?action=create&entity=messages', {
         method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ thread_id: thread.id, content: replyText.trim(), direction: 'outbound', entity: 'messages', type_slug: 'message' }),
+        body: JSON.stringify({ thread_id: thread.id, type_id: messageTypeId, content: replyText.trim(), direction: 'outbound', entity: 'messages' }),
       })
-      const msg = await res.json()
+      const raw = await res.json()
+      const msg = raw?.data ?? raw
       if (msg?.id) setMessages(prev => [...prev, msg])
       setReplyText('')
     } finally { setSending(false) }
@@ -66,7 +73,7 @@ function ThreadPane({ post }: { post: Post }) {
       <div className="border-t p-3 flex gap-2 shrink-0">
         <Input placeholder="Reply as agent…" value={replyText} onChange={e => setReplyText(e.target.value)}
           onKeyDown={e => e.key === 'Enter' && !e.shiftKey && handleSend()} className="flex-1" />
-        <Button size="icon" onClick={handleSend} disabled={sending || !replyText.trim() || !thread}><Send size={14} /></Button>
+        <Button size="icon" onClick={handleSend} disabled={sending || !replyText.trim() || !thread || !messageTypeId}><Send size={14} /></Button>
       </div>
     </div>
   )

package/pages/crm/AccountDetailPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
+import { useAppPath } from '@core/hooks/useAppPath'
 import { apiFetch } from '@core/lib/api'
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@core/components/ui/tabs'
 import { Badge } from '@core/components/ui/badge'
@@ -81,6 +82,7 @@ function PeopleTab({ accountId }: { accountId: string }) {
 
 function ItemsTab({ accountId, typeSlug, emptyText }: { accountId: string; typeSlug: string; emptyText: string }) {
   const navigate = useNavigate()
+  const appPath = useAppPath()
   const [items, setItems] = useState<Item[]>([])
   const [loading, setLoading] = useState(true)
   useEffect(() => {
@@ -94,7 +96,7 @@ function ItemsTab({ accountId, typeSlug, emptyText }: { accountId: string; typeS
       {items.map(item => (
         <div key={item.id}
           className="flex items-center gap-3 px-4 py-3 hover:bg-accent/50 cursor-pointer transition-colors"
-          onClick={() => typeSlug === 'support_ticket' ? navigate(`/cortex/support/${item.id}`) : typeSlug === 'deal' ? navigate(`/cortex/crm/deals/${item.id}`) : undefined}
+          onClick={() => typeSlug === 'support_ticket' ? navigate(appPath(`/support/${item.id}`)) : typeSlug === 'deal' ? navigate(appPath(`/crm/deals/${item.id}`)) : undefined}
         >
           <div className="flex-1 min-w-0">
             <p className="text-sm font-medium truncate">{item.title}</p>
@@ -330,6 +332,7 @@ function FunnelTab({ account }: { account: Account }) {
 export default function AccountDetailPage() {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
+  const appPath = useAppPath()
   const [account, setAccount] = useState<Account | null>(null)
   const [loading, setLoading] = useState(true)
 
@@ -345,7 +348,7 @@ export default function AccountDetailPage() {
   return (
     <div className="flex flex-col h-full">
       <div className="px-6 py-4 border-b border-border shrink-0">
-        <Button variant="ghost" size="sm" className="mb-2 -ml-2 gap-1 text-muted-foreground" onClick={() => navigate('/cortex/crm/accounts')}>
+        <Button variant="ghost" size="sm" className="mb-2 -ml-2 gap-1 text-muted-foreground" onClick={() => navigate(appPath('/crm/accounts'))}>
           <ArrowLeft className="h-3.5 w-3.5" /> Accounts
         </Button>
         <div className="flex items-center gap-3">

package/pages/crm/AccountsPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { useAppPath } from '@core/hooks/useAppPath'
 import { apiFetch } from '@core/lib/api'
 import { Input } from '@core/components/ui/input'
 import { Badge } from '@core/components/ui/badge'
@@ -26,6 +27,7 @@ type Filter = 'all'
 
 export default function AccountsPage() {
   const navigate = useNavigate()
+  const appPath = useAppPath()
   const [accounts, setAccounts] = useState<Account[]>([])
   const [loading, setLoading] = useState(true)
   const [search, setSearch] = useState('')
@@ -91,7 +93,7 @@ export default function AccountsPage() {
               {filtered.map(account => (
                 <tr
                   key={account.id}
-                  onClick={() => navigate(`/cortex/crm/accounts/${account.id}`)}
+                  onClick={() => navigate(appPath(`/crm/accounts/${account.id}`))}
                   className="hover:bg-accent/50 cursor-pointer transition-colors"
                 >
                   <td className="px-5 py-3 font-medium">

package/pages/crm/DealDetailPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
+import { useAppPath } from '@core/hooks/useAppPath'
 import { apiFetch } from '@core/lib/api'
 
 const STAGES = ['prospecting', 'qualification', 'proposal', 'negotiation', 'closed_won', 'closed_lost']
@@ -19,6 +20,7 @@ const EMPTY: DealForm = { title: '', stage: 'prospecting', value: '', close_date
 export default function DealDetailPage() {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
+  const appPath = useAppPath()
   const isNew = !id || id === 'new'
 
   const [form, setForm] = useState<DealForm>(EMPTY)
@@ -82,7 +84,7 @@ export default function DealDetailPage() {
   const handleDelete = async () => {
     if (!confirm('Delete this deal?')) return
     await apiFetch(`/api/admin-data?action=delete&entity=items&id=${id}`, { method: 'POST' })
-    navigate('/cortex/crm/deals')
+    navigate(appPath('/crm/deals'))
   }
 
   const set = (field: keyof DealForm) => (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) =>
@@ -93,7 +95,7 @@ export default function DealDetailPage() {
   return (
     <div className="p-6 max-w-2xl">
       <div className="flex items-center gap-3 mb-6">
-        <button onClick={() => navigate('/cortex/crm/deals')} className="text-slate-400 hover:text-slate-700 text-sm">
+        <button onClick={() => navigate(appPath('/crm/deals'))} className="text-slate-400 hover:text-slate-700 text-sm">
           ← Deals
         </button>
         <h1 className="text-xl font-bold text-slate-900">{isNew ? 'New Deal' : 'Edit Deal'}</h1>
@@ -174,7 +176,7 @@ export default function DealDetailPage() {
           </button>
         ) : <div />}
         <div className="flex gap-3">
-          <button onClick={() => navigate('/cortex/crm/deals')} className="px-4 py-2 text-sm text-slate-600 border border-slate-200 rounded-lg hover:bg-slate-50">
+          <button onClick={() => navigate(appPath('/crm/deals'))} className="px-4 py-2 text-sm text-slate-600 border border-slate-200 rounded-lg hover:bg-slate-50">
             Cancel
           </button>
           <button

package/pages/crm/DealsPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { useAppPath } from '@core/hooks/useAppPath'
 import { apiFetch } from '@core/lib/api'
 
 interface Deal {
@@ -40,6 +41,7 @@ function DealCard({ deal, onClick }: { deal: Deal; onClick: () => void }) {
 
 export default function DealsPage() {
   const navigate = useNavigate()
+  const appPath = useAppPath()
   const [deals, setDeals] = useState<Deal[]>([])
   const [loading, setLoading] = useState(true)
   const [view, setView] = useState<'kanban' | 'list'>('kanban')
@@ -77,7 +79,7 @@ export default function DealsPage() {
             </button>
           </div>
           <button
-            onClick={() => navigate('/cortex/crm/deals/new')}
+            onClick={() => navigate(appPath('/crm/deals/new'))}
             className="bg-blue-600 text-white text-sm font-medium px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
           >
             + New Deal
@@ -133,7 +135,7 @@ export default function DealsPage() {
                 <tr>
                   <td colSpan={5} className="px-5 py-12 text-center text-slate-400">
                     No deals yet.{' '}
-                    <button onClick={() => navigate('/cortex/crm/deals/new')} className="text-blue-600 hover:underline">
+                    <button onClick={() => navigate(appPath('/crm/deals/new'))} className="text-blue-600 hover:underline">
                       Create one →
                     </button>
                   </td>

package/pages/kb/KBEditorPage.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
+import { useAppPath } from '@core/hooks/useAppPath'
 import { apiFetch } from '@core/lib/api'
 import { getTypeIdAsync } from '../../hooks/useTypeRegistry'
 import { RichTextEditor } from '@core/components/ui/RichTextEditor'
@@ -66,6 +67,7 @@ function SidebarSelect({ label, value, onChange, options }: {
 export default function KBEditorPage() {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
+  const appPath = useAppPath()
   const isNew = !id || id === 'new'
   const [form, setForm] = useState<ArticleForm>(EMPTY)
   const [loading, setLoading] = useState(!isNew)
@@ -157,7 +159,7 @@ export default function KBEditorPage() {
         }
       }
 
-      navigate('/cortex/kb')
+      navigate(appPath('/kb'))
     } catch (e: any) {
       setError(e.message)
     } finally {
@@ -184,7 +186,7 @@ export default function KBEditorPage() {
       {/* Header */}
       <div className="px-6 py-3 border-b border-border shrink-0 flex items-center justify-between">
         <div className="flex items-center gap-3">
-          <Button variant="ghost" size="sm" className="gap-1 text-muted-foreground" onClick={() => navigate('/cortex/kb')}>
+          <Button variant="ghost" size="sm" className="gap-1 text-muted-foreground" onClick={() => navigate(appPath('/kb'))}>
             <ArrowLeft className="h-3.5 w-3.5" /> KB
           </Button>
           <h1 className="text-base font-semibold">{isNew ? 'New Article' : 'Edit Article'}</h1>

package/pages/kb/KBPage.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { useAppPath } from '@core/hooks/useAppPath'
 import { apiFetch } from '@core/lib/api'
 import { RichTextEditor } from '@core/components/ui/RichTextEditor'
 import { Button } from '@core/components/ui/button'
@@ -49,6 +50,7 @@ const PRIORITY_COLORS: Record<string, string> = {
 
 export default function KBPage() {
   const navigate = useNavigate()
+  const appPath = useAppPath()
   const [articles, setArticles] = useState<Article[]>([])
   const [searchResults, setSearchResults] = useState<Article[] | null>(null)
   const [loading, setLoading] = useState(true)
@@ -120,7 +122,7 @@ export default function KBPage() {
             onChange={e => handleSearch(e.target.value)}
             className="flex-1 h-8"
           />
-          <Button size="sm" className="gap-1 shrink-0" onClick={() => navigate('/cortex/kb/new')}>
+          <Button size="sm" className="gap-1 shrink-0" onClick={() => navigate(appPath('/kb/new'))}>
             <Plus size={14} /> New
           </Button>
         </div>
@@ -153,7 +155,7 @@ export default function KBPage() {
             <div className="p-8 text-center text-muted-foreground">
               <BookOpen className="h-10 w-10 mx-auto mb-3 opacity-30" />
               <p className="text-sm">{search ? 'No articles match.' : 'No articles yet.'}</p>
-              <Button size="sm" variant="outline" className="mt-3 gap-1" onClick={() => navigate('/cortex/kb/new')}>
+              <Button size="sm" variant="outline" className="mt-3 gap-1" onClick={() => navigate(appPath('/kb/new'))}>
                 <Plus size={13} /> Create article
               </Button>
             </div>
@@ -198,7 +200,7 @@ export default function KBPage() {
           <div className="flex-1 flex flex-col items-center justify-center gap-3 text-muted-foreground">
             <BookOpen size={32} className="opacity-30" />
             <p className="text-sm">Select an article to preview</p>
-            <Button size="sm" variant="outline" onClick={() => navigate('/cortex/kb/new')} className="gap-1">
+            <Button size="sm" variant="outline" onClick={() => navigate(appPath('/kb/new'))} className="gap-1">
               <Plus size={13} /> New article
             </Button>
           </div>
@@ -236,7 +238,7 @@ export default function KBPage() {
                 size="sm"
                 variant="outline"
                 className="gap-1 shrink-0"
-                onClick={() => navigate(`/cortex/kb/${selected.id}/edit`)}
+                onClick={() => navigate(appPath(`/kb/${selected.id}/edit`))}
               >
                 <Edit size={13} /> Edit
               </Button>

package/pages/support/RedactionReview.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
+import { useAppPath } from '@core/hooks/useAppPath'
 import { apiFetch } from '@core/lib/api'
 import { getTypeIdAsync } from '../../hooks/useTypeRegistry'
 import { Button } from '@core/components/ui/button'
@@ -94,6 +95,7 @@ function parseContentWithRedactions(content: string, suggestions: RedactionSugge
 export default function RedactionReview() {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
+  const appPath = useAppPath()
   const [ticket, setTicket] = useState<Ticket | null>(null)
   const [analysis, setAnalysis] = useState<RedactionAnalysis | null>(null)
   const [loading, setLoading] = useState(true)
@@ -311,7 +313,7 @@ export default function RedactionReview() {
           }),
         })
 
-        navigate(`/cortex/kb/${kbId}`)
+        navigate(appPath(`/kb/${kbId}`))
       }
     } finally {
       setProcessing(false)
@@ -334,7 +336,7 @@ export default function RedactionReview() {
           <AlertTriangle className="h-5 w-5" />
           <p>Failed to analyze content for redaction. Please try again.</p>
         </div>
-        <Button onClick={() => navigate(`/cortex/support/${id}`)}>Back to Ticket</Button>
+        <Button onClick={() => navigate(appPath(`/support/${id}`))}>Back to Ticket</Button>
       </div>
     )
   }
@@ -345,7 +347,7 @@ export default function RedactionReview() {
       <div className="px-6 py-4 border-b border-border shrink-0">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <Button variant="ghost" size="sm" onClick={() => navigate(`/cortex/support/${id}`)}>
+            <Button variant="ghost" size="sm" onClick={() => navigate(appPath(`/support/${id}`))}>
               <ArrowLeft className="h-4 w-4" />
             </Button>
             <div>

package/pages/support/SupportPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { useAppPath } from '@core/hooks/useAppPath'
 import { apiFetch } from '@core/lib/api'
 import { useAuth } from '@core/contexts/AuthContext'
 import { Input } from '@core/components/ui/input'
@@ -105,6 +106,7 @@ const KANBAN_COLUMNS = [
 
 export default function SupportPage() {
   const navigate = useNavigate()
+  const appPath = useAppPath()
   const { user } = useAuth()
   const [tickets, setTickets] = useState<Ticket[]>([])
   const [loading, setLoading] = useState(true)
@@ -220,7 +222,7 @@ export default function SupportPage() {
             {sorted.map(ticket => (
               <tr
                 key={ticket.id}
-                onClick={() => navigate(`/cortex/support/${ticket.id}`)}
+                onClick={() => navigate(appPath(`/support/${ticket.id}`))}
                 className="hover:bg-accent/50 cursor-pointer transition-colors"
               >
                 <td className="px-5 py-3">
@@ -305,7 +307,7 @@ export default function SupportPage() {
                   {tickets?.map(ticket => (
                     <div
                       key={ticket.id}
-                      onClick={() => navigate(`/cortex/support/${ticket.id}`)}
+                      onClick={() => navigate(appPath(`/support/${ticket.id}`))}
                       className="bg-background border rounded-lg p-3 cursor-pointer hover:shadow-sm transition-shadow"
                     >
                       <div className="flex items-start justify-between gap-2">

package/pages/support/TicketDetailPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
+import { useAppPath } from '@core/hooks/useAppPath'
 import { apiFetch } from '@core/lib/api'
 import { Button } from '@core/components/ui/button'
 import { Input } from '@core/components/ui/input'
@@ -728,6 +729,7 @@ function Separator() {
 export default function TicketDetailPage() {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
+  const appPath = useAppPath()
   const { user } = useAuth()
   const [ticket, setTicket] = useState<Ticket | null>(null)
   const [threads, setThreads] = useState<Thread[]>([])
@@ -837,7 +839,7 @@ export default function TicketDetailPage() {
   }
 
   const handleGenerateKB = () => {
-    navigate(`/cortex/support/${id}/kb-review`)
+    navigate(appPath(`/support/${id}/kb-review`))
   }
 
   const externalThread = threads.find(t => !t.visibility || t.visibility === 'external') ?? null
@@ -850,7 +852,7 @@ export default function TicketDetailPage() {
     <div className="flex flex-col h-full">
       <div className="px-6 py-4 border-b border-border shrink-0 flex items-center justify-between">
         <div className="flex items-center gap-3">
-          <Button variant="ghost" size="sm" className="gap-1 text-muted-foreground" onClick={() => navigate('/cortex/support')}>
+          <Button variant="ghost" size="sm" className="gap-1 text-muted-foreground" onClick={() => navigate(appPath('/support'))}>
             <ArrowLeft className="h-3.5 w-3.5" /> Support
           </Button>
           <div>