spine-framework-cortex 0.1.1

package/pages/kb/KBIngestionPage.tsx

@@ -0,0 +1,409 @@
+import { useState } from 'react'
+import { apiFetch } from '@core/lib/api'
+import { Button } from '@core/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@core/components/ui/card'
+import { Progress } from '@core/components/ui/progress'
+import { Alert, AlertDescription } from '@core/components/ui/alert'
+import { Badge } from '@core/components/ui/badge'
+import { ScrollArea } from '@core/components/ui/scroll-area'
+
+interface IngestionResponse {
+  success: boolean
+  items_created: number
+  items_updated: number
+  embeddings_generated: number
+  errors: string[]
+  skipped: string[]
+  item_ids?: string[]
+}
+
+interface IngestionStats {
+  total: number
+  processed: number
+  created: number
+  updated: number
+  errors: number
+}
+
+type Step = 'idle' | 'chunks_loaded' | 'ingestion_complete' | 'embeddings_complete'
+
+export default function KBIngestionPage() {
+  const [currentStep, setCurrentStep] = useState<Step>('idle')
+  const [isLoading, setIsLoading] = useState(false)
+  const [chunks, setChunks] = useState<any[]>([])
+  const [stats, setStats] = useState<IngestionStats | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [logs, setLogs] = useState<string[]>([])
+  const [ingestFrom, setIngestFrom] = useState<string>('')
+  const [ingestTo, setIngestTo] = useState<string>('')
+  const [ingestedItemIds, setIngestedItemIds] = useState<string[]>([])
+
+  const addLog = (message: string) => {
+    const timestamp = new Date().toLocaleTimeString()
+    setLogs(prev => [...prev, `[${timestamp}] ${message}`])
+  }
+
+  const loadChunks = async (): Promise<any[]> => {
+    try {
+      const response = await apiFetch('/.netlify/functions/custom_cortex-chunks', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        }
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({ error: 'Unknown error' }))
+        throw new Error(`Failed to load chunks: ${errorData.error || response.statusText}`)
+      }
+
+      const data = await response.json()
+      return data.data?.chunks || []
+    } catch (err) {
+      throw new Error(`Could not load chunks: ${err instanceof Error ? err.message : 'Unknown error'}`)
+    }
+  }
+
+  const ingestChunks = async (chunks: any[]): Promise<IngestionResponse> => {
+    const response = await apiFetch('/api/custom_kb-ingestion?action=ingest', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        chunks,
+        force_update: false
+      })
+    })
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ error: 'Unknown error' }))
+      throw new Error(`Ingestion failed: ${errorData.error || response.statusText}`)
+    }
+
+    const json = await response.json()
+    return json.data ?? json
+  }
+
+  const generateEmbeddings = async (itemIds: string[]): Promise<IngestionResponse> => {
+    const response = await apiFetch('/api/custom_kb-embeddings?action=generate', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        item_ids: itemIds,
+        vector_types: ['semantic', 'structure'],
+        force_regenerate: false
+      })
+    })
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ error: 'Unknown error' }))
+      throw new Error(`Embedding generation failed: ${errorData.error || response.statusText}`)
+    }
+
+    const json = await response.json()
+    return json.data ?? json
+  }
+
+  const handleLoadChunks = async () => {
+    setIsLoading(true)
+    setError(null)
+    setLogs([])
+
+    try {
+      addLog('Loading chunks from file...')
+      const loadedChunks = await loadChunks()
+      addLog(`Loaded ${loadedChunks.length} chunks`)
+      setChunks(loadedChunks)
+      setCurrentStep('chunks_loaded')
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error'
+      setError(errorMessage)
+      addLog(`Error: ${errorMessage}`)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleIngestChunks = async () => {
+    setIsLoading(true)
+    setError(null)
+    setLogs([])
+
+    try {
+      // Parse range inputs
+      const from = parseInt(ingestFrom) || 1
+      const to = parseInt(ingestTo) || chunks.length
+      
+      // Validate range
+      if (from < 1 || to < 1 || from > to || from > chunks.length || to > chunks.length) {
+        throw new Error(`Invalid range: Please enter values between 1 and ${chunks.length}, with from ≤ to`)
+      }
+      
+      // Get the subset of chunks (convert to 0-based index)
+      const selectedChunks = chunks.slice(from - 1, to)
+      const recordCount = selectedChunks.length
+      
+      addLog(`Starting ingestion of records ${from} through ${to} (${recordCount} records)...`)
+      const response = await ingestChunks(selectedChunks)
+      
+      const newStats: IngestionStats = {
+        total: recordCount,
+        processed: recordCount,
+        created: response.items_created || 0,
+        updated: response.items_updated || 0,
+        errors: response.errors?.length || 0
+      }
+      
+      setStats(newStats)
+      setIngestedItemIds(response.item_ids || [])
+      addLog(`Ingestion complete: ${response.items_created || 0} created, ${response.items_updated || 0} updated`)
+      addLog(`Captured ${(response.item_ids || []).length} item IDs for embedding generation`)
+      
+      if (response.errors && response.errors.length > 0) {
+        addLog(`Errors: ${response.errors.join(', ')}`)
+      }
+      
+      setCurrentStep('ingestion_complete')
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error'
+      setError(errorMessage)
+      addLog(`Error: ${errorMessage}`)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleGenerateEmbeddings = async () => {
+    setIsLoading(true)
+    setError(null)
+    setLogs([])
+
+    try {
+      addLog('Generating embeddings for ingested items...')
+      const itemIds = ingestedItemIds
+      if (itemIds.length === 0) {
+        throw new Error('No item IDs available — run ingestion first')
+      }
+      addLog(`Generating embeddings for ${itemIds.length} items...`)
+      const response = await generateEmbeddings(itemIds)
+      
+      addLog(`Embeddings complete: ${(response as any).embeddings_created || response.embeddings_generated || 0} generated`)
+      setCurrentStep('embeddings_complete')
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error'
+      setError(errorMessage)
+      addLog(`Error: ${errorMessage}`)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>KB Code Chunk Ingestion</CardTitle>
+          <CardDescription>
+            Step-by-step ingestion of parsed code chunks from v2-core functions into the Knowledge Base system.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Step 1: Load Chunks */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-lg">Step 1: Load Chunk Data</CardTitle>
+              <CardDescription>
+                Load parsed code chunks from the chunks.json file
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <Button 
+                onClick={handleLoadChunks}
+                disabled={isLoading}
+                size="lg"
+              >
+                {isLoading ? 'Loading...' : currentStep === 'idle' ? 'Load Chunk Data' : 'Reload Chunk Data'}
+              </Button>
+              
+              {currentStep !== 'idle' && (
+                <div className="space-y-2">
+                  <Badge variant="outline">
+                    Chunks Loaded: {chunks.length}
+                  </Badge>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Step 2: Display Chunks */}
+          {currentStep !== 'idle' && chunks.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg">Chunk Data Preview</CardTitle>
+                <CardDescription>
+                  {chunks.length} chunks loaded from file
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <ScrollArea className="h-64 w-full border rounded-md p-4">
+                  <div className="space-y-2">
+                    {chunks.slice(0, 10).map((chunk, index) => (
+                      <div key={index} className="text-sm border-b pb-2">
+                        <div className="font-medium">{chunk.identifier}</div>
+                        <div className="text-gray-600">{chunk.macro}: {chunk.micro}</div>
+                        <div className="text-xs text-gray-500">
+                          {chunk.chunk_id} • {chunk.version}
+                        </div>
+                      </div>
+                    ))}
+                    {chunks.length > 10 && (
+                      <div className="text-sm text-gray-500 italic">
+                        ... and {chunks.length - 10} more chunks
+                      </div>
+                    )}
+                  </div>
+                </ScrollArea>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Step 3: Ingest Chunks */}
+          {currentStep === 'chunks_loaded' && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg">Step 2: Ingest Chunks</CardTitle>
+                <CardDescription>
+                  Create KB articles from the loaded chunks
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex items-center gap-4">
+                  <div className="flex items-center gap-2">
+                    <label htmlFor="ingest-from" className="text-sm font-medium">Ingest records</label>
+                    <input
+                      id="ingest-from"
+                      type="number"
+                      min="1"
+                      max={chunks.length}
+                      value={ingestFrom}
+                      onChange={(e) => setIngestFrom(e.target.value)}
+                      placeholder="1"
+                      className="w-20 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                    <span className="text-sm font-medium">through</span>
+                    <input
+                      id="ingest-to"
+                      type="number"
+                      min="1"
+                      max={chunks.length}
+                      value={ingestTo}
+                      onChange={(e) => setIngestTo(e.target.value)}
+                      placeholder={chunks.length.toString()}
+                      className="w-20 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </div>
+                  
+                  <div className="text-sm text-gray-600">
+                    ({(() => {
+                      const from = parseInt(ingestFrom) || 1
+                      const to = parseInt(ingestTo) || chunks.length
+                      const count = from > 0 && to > 0 && from <= to && to <= chunks.length 
+                        ? to - from + 1 
+                        : 0
+                      return count > 0 ? `${count} records` : 'Invalid range'
+                    })()})
+                  </div>
+                </div>
+                
+                <Button 
+                  onClick={handleIngestChunks}
+                  disabled={isLoading || !ingestFrom || !ingestTo}
+                  size="lg"
+                  variant="default"
+                >
+                  {isLoading ? 'Ingesting...' : `Ingest ${(() => {
+                    const from = parseInt(ingestFrom) || 1
+                    const to = parseInt(ingestTo) || chunks.length
+                    const count = from > 0 && to > 0 && from <= to && to <= chunks.length 
+                      ? to - from + 1 
+                      : 0
+                    return count
+                  })()} Records`}
+                </Button>
+                
+                {stats && (
+                  <div className="flex gap-2">
+                    <Badge variant="outline">
+                      Total: {stats.total}
+                    </Badge>
+                    <Badge variant="outline">
+                      Created: {stats.created}
+                    </Badge>
+                    <Badge variant="outline">
+                      Updated: {stats.updated}
+                    </Badge>
+                    {stats.errors > 0 && (
+                      <Badge variant="destructive">
+                        Errors: {stats.errors}
+                      </Badge>
+                    )}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Step 4: Generate Embeddings */}
+          {currentStep === 'ingestion_complete' && stats && stats.created > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg">Step 3: Generate Embeddings</CardTitle>
+                <CardDescription>
+                  Generate vector embeddings for the {stats.created} created KB articles
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <Button 
+                  onClick={handleGenerateEmbeddings}
+                  disabled={isLoading}
+                  size="lg"
+                  variant="default"
+                >
+                  {isLoading ? 'Generating...' : 'Generate Embeddings'}
+                </Button>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Error Display */}
+          {error && (
+            <Alert variant="destructive">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          {/* Activity Log */}
+          {logs.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg">Activity Log</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ScrollArea className="h-64 w-full">
+                  <div className="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg">
+                    <pre className="text-xs font-mono whitespace-pre-wrap">
+                      {logs.join('\n')}
+                    </pre>
+                  </div>
+                </ScrollArea>
+              </CardContent>
+            </Card>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/pages/kb/KBPage.tsx

@@ -0,0 +1,258 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { apiFetch } from '@core/lib/api'
+import { RichTextEditor } from '@core/components/ui/RichTextEditor'
+import { Button } from '@core/components/ui/button'
+import { Input } from '@core/components/ui/input'
+import { Badge } from '@core/components/ui/badge'
+import { Skeleton } from '@core/components/ui/skeleton'
+import { ScrollArea } from '@core/components/ui/scroll-area'
+import { Plus, BookOpen, Edit } from 'lucide-react'
+
+interface Article {
+  id: string
+  title: string
+  description?: string
+  status?: string
+  data?: Record<string, any>
+  created_at: string
+}
+
+const STATUS_GROUPS: { key: string; label: string }[] = [
+  { key: 'draft', label: 'Draft' },
+  { key: 'review', label: 'Under Review' },
+  { key: 'published', label: 'Published' },
+  { key: 'deprecated', label: 'Deprecated' },
+  { key: 'archived', label: 'Archived' },
+  { key: 'restricted', label: 'Restricted' },
+]
+
+const KB_TYPE_LABELS: Record<string, string> = {
+  article: 'Article',
+  care_guide: 'Care Guide',
+  process_guide: 'Process Guide',
+  code_chunk: 'Code',
+  api_reference: 'API Ref',
+  troubleshooting: 'Troubleshooting',
+  faq: 'FAQ',
+  policy: 'Policy',
+  tutorial: 'Tutorial',
+}
+
+const PRIORITY_COLORS: Record<string, string> = {
+  low: 'secondary',
+  medium: 'secondary',
+  high: 'default',
+  critical: 'destructive',
+  emergency: 'destructive',
+}
+
+export default function KBPage() {
+  const navigate = useNavigate()
+  const [articles, setArticles] = useState<Article[]>([])
+  const [searchResults, setSearchResults] = useState<Article[] | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [searching, setSearching] = useState(false)
+  const [search, setSearch] = useState('')
+  const [selected, setSelected] = useState<Article | null>(null)
+  const [statusFilter, setStatusFilter] = useState<string>('all')
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>()
+
+  // Load all articles on mount
+  useEffect(() => {
+    apiFetch('/api/admin-data?action=list&entity=items&type_slug=kb_article&limit=500')
+      .then(r => r.json())
+      .then(j => setArticles(Array.isArray(j?.data) ? j.data : Array.isArray(j) ? j : []))
+      .catch(() => setArticles([]))
+      .finally(() => setLoading(false))
+  }, [])
+
+  // Debounced vector search
+  const runSearch = useCallback(async (q: string) => {
+    if (q.trim().length < 2) { setSearchResults(null); return }
+    setSearching(true)
+    try {
+      const res = await apiFetch('/api/custom_kb-embeddings?action=search', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: q.trim(), limit: 15 }),
+      })
+      const json = await res.json()
+      const results = json.data || json || []
+      setSearchResults(Array.isArray(results) ? results : [])
+    } catch {
+      setSearchResults(null) // Fall back to client-side filter
+    } finally {
+      setSearching(false)
+    }
+  }, [])
+
+  const handleSearch = (val: string) => {
+    setSearch(val)
+    clearTimeout(debounceRef.current)
+    if (!val || val.trim().length < 2) {
+      setSearchResults(null)
+      return
+    }
+    debounceRef.current = setTimeout(() => runSearch(val), 400)
+  }
+
+  // Use vector results when available, otherwise client-side filter
+  const displayArticles = searchResults ?? articles
+  const filtered = displayArticles.filter(a => {
+    const matchesStatus = statusFilter === 'all' || (a.status || 'draft') === statusFilter
+    return matchesStatus
+  })
+
+  const grouped = STATUS_GROUPS.map(sg => ({
+    ...sg,
+    items: filtered.filter(a => (a.status || 'draft') === sg.key),
+  })).filter(g => g.items.length > 0)
+
+  return (
+    <div className="flex h-full min-h-0">
+      {/* Left panel */}
+      <div className="w-72 shrink-0 border-r border-border flex flex-col min-h-0">
+        <div className="flex items-center gap-2 px-4 py-3 border-b border-border shrink-0">
+          <Input
+            placeholder="Search articles…"
+            value={search}
+            onChange={e => handleSearch(e.target.value)}
+            className="flex-1 h-8"
+          />
+          <Button size="sm" className="gap-1 shrink-0" onClick={() => navigate('/cortex/kb/new')}>
+            <Plus size={14} /> New
+          </Button>
+        </div>
+
+        {/* Status filter */}
+        <div className="flex flex-wrap gap-1 px-3 py-2 border-b border-border shrink-0">
+          <button
+            onClick={() => setStatusFilter('all')}
+            className={`text-xs px-2 py-0.5 rounded-full border transition-colors ${statusFilter === 'all' ? 'bg-primary text-primary-foreground border-primary' : 'border-border text-muted-foreground hover:text-foreground'}`}
+          >
+            All
+          </button>
+          {STATUS_GROUPS.map(sg => (
+            <button
+              key={sg.key}
+              onClick={() => setStatusFilter(sg.key)}
+              className={`text-xs px-2 py-0.5 rounded-full border transition-colors ${statusFilter === sg.key ? 'bg-primary text-primary-foreground border-primary' : 'border-border text-muted-foreground hover:text-foreground'}`}
+            >
+              {sg.label}
+            </button>
+          ))}
+        </div>
+
+        <ScrollArea className="flex-1">
+          {loading ? (
+            <div className="p-4 space-y-2">
+              {Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-14 w-full" />)}
+            </div>
+          ) : filtered.length === 0 ? (
+            <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')}>
+                <Plus size={13} /> Create article
+              </Button>
+            </div>
+          ) : (
+            <div>
+              {grouped.map(group => (
+                <div key={group.key}>
+                  <p className="px-4 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                    {group.label} ({group.items.length})
+                  </p>
+                  {group.items.map(a => (
+                    <button
+                      key={a.id}
+                      onClick={() => setSelected(a)}
+                      className={`w-full text-left px-4 py-3 border-b border-border hover:bg-accent/50 transition-colors ${selected?.id === a.id ? 'bg-accent border-l-2 border-l-primary' : ''}`}
+                    >
+                      <p className="text-sm font-medium truncate">{a.title}</p>
+                      <div className="flex items-center gap-1.5 mt-1 flex-wrap">
+                        {a.data?.kb_type && (
+                          <span className="text-xs bg-muted text-muted-foreground px-1.5 py-0.5 rounded">
+                            {KB_TYPE_LABELS[a.data.kb_type] || a.data.kb_type}
+                          </span>
+                        )}
+                        {a.data?.priority && a.data.priority !== 'medium' && (
+                          <span className={`text-xs px-1.5 py-0.5 rounded ${a.data.priority === 'high' ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400' : a.data.priority === 'critical' || a.data.priority === 'emergency' ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' : 'bg-muted text-muted-foreground'}`}>
+                            {a.data.priority}
+                          </span>
+                        )}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+      </div>
+
+      {/* Right preview panel */}
+      <div className="flex-1 min-h-0 flex flex-col">
+        {!selected ? (
+          <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">
+              <Plus size={13} /> New article
+            </Button>
+          </div>
+        ) : (
+          <>
+            <div className="px-6 py-3 border-b border-border shrink-0 flex items-center justify-between">
+              <div>
+                <h1 className="text-base font-semibold">{selected.title}</h1>
+                <div className="flex items-center gap-2 mt-1 flex-wrap">
+                  <Badge variant={selected.status === 'published' ? 'default' : 'outline'}>
+                    {selected.status || 'draft'}
+                  </Badge>
+                  {selected.data?.kb_type && (
+                    <Badge variant="secondary" className="text-xs">
+                      {KB_TYPE_LABELS[selected.data.kb_type] || selected.data.kb_type}
+                    </Badge>
+                  )}
+                  {selected.data?.priority && (
+                    <Badge
+                      variant={(PRIORITY_COLORS[selected.data.priority] as any) || 'secondary'}
+                      className="text-xs"
+                    >
+                      {selected.data.priority}
+                    </Badge>
+                  )}
+                  {selected.data?.category && (
+                    <span className="text-xs text-muted-foreground">{selected.data.category}</span>
+                  )}
+                  <span className="text-xs text-muted-foreground">
+                    {new Date(selected.created_at).toLocaleDateString()}
+                  </span>
+                </div>
+              </div>
+              <Button
+                size="sm"
+                variant="outline"
+                className="gap-1 shrink-0"
+                onClick={() => navigate(`/cortex/kb/${selected.id}/edit`)}
+              >
+                <Edit size={13} /> Edit
+              </Button>
+            </div>
+            <ScrollArea className="flex-1">
+              <div className="px-6 py-5 max-w-3xl">
+                {selected.description ? (
+                  <RichTextEditor value={selected.description} readonly />
+                ) : (
+                  <p className="text-sm text-muted-foreground italic">No content yet. Click Edit to add content.</p>
+                )}
+              </div>
+            </ScrollArea>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}