spine-framework 0.1.0

package/.framework/src/pages/admin/EmbeddingsPage.tsx

@@ -0,0 +1,424 @@
+/**
+ * @module src/pages/admin/EmbeddingsPage
+ * @audience installer
+ * @layer frontend-page
+ * @stability stable
+ *
+ * Admin list page for embedding model configurations. Fetches all models
+ * via `/api/embeddings?action=list`, applies client-side search, provider
+ * filter (`openai` | `anthropic` | `local` | `custom`), and sort. Renders
+ * inside `AdminListPage`. Row clicks navigate to
+ * `/spine-framework/admin/configs/embeddings/:id`.
+ *
+ * @seeAlso src/pages/admin/EmbeddingDetailPage.tsx
+ */
+
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Box, FileText, CheckCircle, BarChart3 } from 'lucide-react';
+import { formatDateTime, formatFileSize } from '../../lib/utils'
+import { AdminListPage } from '../../components/admin/AdminListPage'
+import { SortableTableHeader } from '../../components/admin/SortableTableHeader'
+import { Badge } from '../../components/ui/badge'
+import { useApi } from '../../hooks/useApi'
+import { apiFetch } from '../../lib/api'
+
+interface EmbeddingModel {
+  id: string
+  name: string
+  description?: string
+  model_name: string
+  provider: 'openai' | 'anthropic' | 'local' | 'custom'
+  config: {
+    dimension: number
+    chunk_size: number
+    overlap: number
+    batch_size: number
+  }
+  is_active: boolean
+  created_at: string
+  updated_at: string
+  created_by: string
+  account_id: string
+  document_count: number
+  embedding_count: number
+  storage_size: number
+}
+
+interface EmbeddingDocument {
+  id: string
+  model_id: string
+  title: string
+  content_type: string
+  status: 'pending' | 'processing' | 'completed' | 'failed'
+  chunk_count: number
+  embedding_count: number
+  created_at: string
+  updated_at: string
+  created_by: string
+  error?: string
+}
+
+interface EmbeddingSearch {
+  query: string
+  results: Array<{
+    document_id: string
+    document_title: string
+    chunk_content: string
+    similarity_score: number
+    chunk_index: number
+  }>
+  search_time: number
+  total_results: number
+}
+
+export function EmbeddingsPage() {
+  const navigate = useNavigate()
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedProvider, setSelectedProvider] = useState('all')
+  const [selectedStatus, setSelectedStatus] = useState('all')
+  const [sortKey, setSortKey] = useState('name')
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
+
+  // Fetch embeddings from API
+  const { data: embeddings, loading, error, refetch } = useApi<any[]>(
+    async () => {
+      try {
+        console.log('Fetching embeddings...')
+        const response = await apiFetch('/api/embeddings?action=list')
+        console.log('Response status:', response.status)
+        
+        if (!response.ok) {
+          console.error('Response not ok:', response.statusText)
+          throw new Error(`Failed to fetch embeddings: ${response.statusText}`)
+        }
+        
+        const result = await response.json()
+        console.log('Raw API result:', result)
+        
+        // Handle both nested and direct responses
+        const embeddings = result.data || result
+        console.log('Embeddings after processing:', embeddings)
+        
+        return embeddings
+      } catch (error) {
+        console.error('Error in EmbeddingsPage:', error)
+        throw error
+      }
+    },
+    { immediate: true }
+  )
+
+  const mockDocuments: EmbeddingDocument[] = [
+    {
+      id: '1',
+      model_id: '1',
+      title: 'User Guide - Getting Started',
+      content_type: 'pdf',
+      status: 'completed',
+      chunk_count: 45,
+      embedding_count: 45,
+      created_at: new Date(Date.now() - 1000 * 60 * 60 * 24 * 5).toISOString(),
+      updated_at: new Date(Date.now() - 1000 * 60 * 60 * 4).toISOString(),
+      created_by: 'Jane Smith'
+    },
+    {
+      id: '2',
+      model_id: '1',
+      title: 'API Documentation',
+      content_type: 'markdown',
+      status: 'processing',
+      chunk_count: 67,
+      embedding_count: 0,
+      created_at: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(),
+      updated_at: new Date(Date.now() - 1000 * 60 * 60 * 1).toISOString(),
+      created_by: 'John Doe'
+    },
+    {
+      id: '3',
+      model_id: '2',
+      title: 'React Components Library',
+      content_type: 'code',
+      status: 'completed',
+      chunk_count: 234,
+      embedding_count: 234,
+      created_at: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3).toISOString(),
+      updated_at: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(),
+      created_by: 'Mike Johnson'
+    },
+    {
+      id: '4',
+      model_id: '1',
+      title: 'Company Policies',
+      content_type: 'docx',
+      status: 'failed',
+      chunk_count: 0,
+      embedding_count: 0,
+      created_at: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(),
+      updated_at: new Date(Date.now() - 1000 * 60 * 60 * 23).toISOString(),
+      created_by: 'Admin',
+      error: 'Document format not supported'
+    }
+  ]
+
+  const mockSearchResults: EmbeddingSearch = {
+    query: 'how to reset password',
+    results: [
+      {
+        document_id: '1',
+        document_title: 'User Guide - Getting Started',
+        chunk_content: 'To reset your password, go to the settings page and click on "Reset Password"...',
+        similarity_score: 0.95,
+        chunk_index: 12
+      },
+      {
+        document_id: '1',
+        document_title: 'User Guide - Getting Started',
+        chunk_content: 'Password reset emails are sent to your registered email address...',
+        similarity_score: 0.87,
+        chunk_index: 13
+      },
+      {
+        document_id: '3',
+        document_title: 'React Components Library',
+        chunk_content: 'The PasswordReset component handles user password reset functionality...',
+        similarity_score: 0.72,
+        chunk_index: 45
+      }
+    ],
+    search_time: 0.234,
+    total_results: 3
+  }
+
+  const providers = [
+    { value: 'all', label: 'All Providers' },
+    { value: 'openai', label: 'OpenAI' },
+    { value: 'anthropic', label: 'Anthropic' },
+    { value: 'local', label: 'Local' },
+    { value: 'custom', label: 'Custom' }
+  ]
+
+  const statusOptions = [
+    { value: 'all', label: 'All Statuses' },
+    { value: 'active', label: 'Active' },
+    { value: 'inactive', label: 'Inactive' }
+  ]
+
+  const filteredModels = (embeddings || []).filter(embedding => {
+    const matchesSearch = embedding.content?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         (embedding.metadata?.source && embedding.metadata.source.toLowerCase().includes(searchTerm.toLowerCase()))
+    const matchesProvider = selectedProvider === 'all' || embedding.metadata?.source === selectedProvider
+    const matchesStatus = selectedStatus === 'all' || 
+                         (selectedStatus === 'active' && true) || // All embeddings are considered active
+                         (selectedStatus === 'inactive' && false)
+    return matchesSearch && matchesProvider && matchesStatus
+  })
+
+  // Helper functions
+  const getProviderBadgeColor = (provider: string) => {
+    switch (provider) {
+      case 'openai':
+        return 'bg-green-100 text-green-800'
+      case 'anthropic':
+        return 'bg-blue-100 text-blue-800'
+      case 'local':
+        return 'bg-purple-100 text-purple-800'
+      case 'custom':
+        return 'bg-orange-100 text-orange-800'
+      default:
+        return 'bg-slate-100 text-slate-800'
+    }
+  }
+
+  const getStatusBadgeColor = (isActive: boolean) => {
+    return isActive ? 'bg-green-100 text-green-800' : 'bg-slate-100 text-slate-800'
+  }
+
+  const handleSort = (key: string) => {
+    if (sortKey === key) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortKey(key)
+      setSortDirection('asc')
+    }
+  }
+
+  const handleRowClick = (model: EmbeddingModel) => {
+    navigate(`/spine-framework/admin/configs/embeddings/${model.id}`)
+  }
+
+  // Sort models
+  const sortedModels = [...filteredModels].sort((a, b) => {
+    let aValue: any = a[sortKey as keyof EmbeddingModel]
+    let bValue: any = b[sortKey as keyof EmbeddingModel]
+    
+    if (typeof aValue === 'string') {
+      return sortDirection === 'asc' 
+        ? aValue.localeCompare(bValue)
+        : bValue.localeCompare(aValue)
+    }
+    
+    if (typeof aValue === 'number') {
+      return sortDirection === 'asc' ? aValue - bValue : bValue - aValue
+    }
+    
+    return 0
+  })
+
+  const statsCards = [
+    {
+      title: 'Total Embeddings',
+      value: (embeddings || []).length,
+      icon: FileText,
+      iconColor: 'text-blue-500'
+    },
+    {
+      title: 'Active',
+      value: (embeddings || []).filter(m => m.is_active).length,
+      icon: CheckCircle,
+      iconColor: 'text-green-500'
+    },
+    {
+      title: 'Documents Processed',
+      value: (embeddings || []).length, // Simplified count since embeddings table structure is different
+      icon: BarChart3,
+      iconColor: 'text-orange-500'
+    },
+    {
+      title: 'Last Updated',
+      value: (embeddings || []).length > 0 ? 'Just now' : 'Never',
+      icon: Box,
+      iconColor: 'text-purple-500'
+    }
+  ]
+
+  const filters = [
+    {
+      label: 'Provider',
+      value: selectedProvider,
+      options: providers,
+      onChange: setSelectedProvider
+    },
+    {
+      label: 'Status',
+      value: selectedStatus,
+      options: statusOptions,
+      onChange: setSelectedStatus
+    }
+  ]
+
+  return (
+    <AdminListPage
+      title="Embeddings"
+      description="Manage embedding models and document indexes"
+      newButtonText="New Model"
+      newButtonHref="/spine-framework/admin/configs/embeddings/new"
+      statsCards={statsCards}
+      searchPlaceholder="Search models..."
+      searchValue={searchTerm}
+      onSearchChange={setSearchTerm}
+      filters={filters}
+      loading={false}
+      emptyMessage="No embedding models found"
+      emptyIcon={FileText}
+    >
+      {sortedModels.length === 0 ? (
+        <div className="p-8 text-center">
+          <FileText className="mx-auto h-12 w-12 text-slate-400" />
+          <h3 className="mt-2 text-sm font-medium text-slate-900">No models found</h3>
+          <p className="mt-1 text-sm text-slate-500">
+            Try adjusting your search or filters
+          </p>
+        </div>
+      ) : (
+        <table className="min-w-full divide-y divide-slate-200">
+          <thead className="bg-slate-50">
+            <tr>
+              <SortableTableHeader
+                title="Content"
+                sortKey="content"
+                currentSortKey={sortKey}
+                currentSortDirection={sortDirection}
+                onSort={handleSort}
+              />
+              <SortableTableHeader
+                title="Source/Type"
+                sortKey="metadata.source"
+                currentSortKey={sortKey}
+                currentSortDirection={sortDirection}
+                onSort={handleSort}
+              />
+              <SortableTableHeader
+                title="Status"
+                sortKey="status"
+                currentSortKey={sortKey}
+                currentSortDirection={sortDirection}
+                onSort={handleSort}
+              />
+              <SortableTableHeader
+                title="Dimensions"
+                sortKey="embedding"
+                currentSortKey={sortKey}
+                currentSortDirection={sortDirection}
+                onSort={handleSort}
+              />
+              <SortableTableHeader
+                title="Created"
+                sortKey="created_at"
+                currentSortKey={sortKey}
+                currentSortDirection={sortDirection}
+                onSort={handleSort}
+              />
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-slate-200">
+            {sortedModels.map((model) => (
+              <tr 
+                key={model.id} 
+                className="hover:bg-slate-50 cursor-pointer transition-colors"
+                onClick={() => handleRowClick(model)}
+              >
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div>
+                    <div className="font-medium text-slate-900">
+                      <span className="text-accent-blue hover:text-navy">
+                        {model.content?.substring(0, 60)}...
+                      </span>
+                    </div>
+                    <div className="text-sm text-slate-500">
+                      Chunk {model.chunk_index} • {model.metadata?.type}
+                    </div>
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="space-y-1">
+                    <Badge variant={getProviderBadgeColor(model.metadata?.source) as any}>
+                      {model.metadata?.source}
+                    </Badge>
+                    <div className="text-sm text-slate-900 font-mono">{model.metadata?.language}</div>
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <Badge variant="success">
+                    Active
+                  </Badge>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div>
+                    <div className="text-sm text-slate-900">1 chunk</div>
+                    <div className="text-xs text-slate-500">
+                      {model.embedding?.length} dimensions
+                    </div>
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
+                  {formatDateTime(model.created_at)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </AdminListPage>
+  )
+}

package/.framework/src/pages/admin/ExtendedShadcnTestPage.tsx

@@ -0,0 +1,176 @@
+/**
+ * @module src/pages/admin/ExtendedShadcnTestPage
+ * @audience installer
+ * @layer frontend-page
+ * @stability testing
+ *
+ * Extended test page with more shadcn components to identify problematic imports.
+ */
+
+import { useState } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card'
+import { Button } from '../../components/ui/button'
+import { Badge } from '../../components/ui/badge'
+import { Input } from '../../components/ui/input'
+import { Label } from '../../components/ui/label'
+import { 
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../components/ui/select'
+import { Checkbox } from '../../components/ui/checkbox'
+
+export function ExtendedShadcnTestPage() {
+  const [count, setCount] = useState(0)
+  const [text, setText] = useState('')
+  const [selected, setSelected] = useState('')
+  const [checked, setChecked] = useState(false)
+
+  return (
+    <div className="flex-1 space-y-6 p-8 pt-6">
+      <div className="space-y-2">
+        <h1 className="text-3xl font-bold tracking-tight">Extended shadcn Test</h1>
+        <p className="text-muted-foreground">
+          Testing 7 shadcn components: Card, Button, Badge, Input, Label, Select, Checkbox
+        </p>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Form Controls</CardTitle>
+            <CardDescription>Testing Select and Checkbox</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="select-demo">Select Demo</Label>
+              <Select value={selected} onValueChange={setSelected}>
+                <SelectTrigger id="select-demo">
+                  <SelectValue placeholder="Choose an option" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="option1">Option 1</SelectItem>
+                  <SelectItem value="option2">Option 2</SelectItem>
+                  <SelectItem value="option3">Option 3</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            
+            <div className="flex items-center space-x-2">
+              <Checkbox 
+                id="checkbox-demo" 
+                checked={checked}
+                onCheckedChange={(checked) => setChecked(checked as boolean)}
+              />
+              <Label htmlFor="checkbox-demo">
+                Enable notifications
+              </Label>
+            </div>
+            
+            <div className="text-sm text-muted-foreground">
+              Selected: {selected || 'none'}<br/>
+              Checked: {checked ? 'yes' : 'no'}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Interactive Demo</CardTitle>
+            <CardDescription>Combining multiple components</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="input-demo">Text Input</Label>
+              <Input
+                id="input-demo"
+                placeholder="Type something..."
+                value={text}
+                onChange={(e) => setText(e.target.value)}
+              />
+            </div>
+            
+            <div className="flex gap-2">
+              <Button onClick={() => setCount(count + 1)}>
+                Add Count
+              </Button>
+              <Button variant="outline" onClick={() => setCount(0)}>
+                Reset
+              </Button>
+            </div>
+            
+            <div className="flex gap-2">
+              <Badge>Count: {count}</Badge>
+              <Badge variant={checked ? "default" : "secondary"}>
+                {checked ? "Active" : "Inactive"}
+              </Badge>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Combined Component Test</CardTitle>
+          <CardDescription>All components working together</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-3">
+            <div className="space-y-2">
+              <Label htmlFor="combined-input">Your Name</Label>
+              <Input
+                id="combined-input"
+                placeholder="Enter name"
+                value={text}
+                onChange={(e) => setText(e.target.value)}
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <Label htmlFor="combined-select">Role</Label>
+              <Select value={selected} onValueChange={setSelected}>
+                <SelectTrigger id="combined-select">
+                  <SelectValue placeholder="Select role" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="admin">Admin</SelectItem>
+                  <SelectItem value="user">User</SelectItem>
+                  <SelectItem value="guest">Guest</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            
+            <div className="flex items-end">
+              <Button 
+                onClick={() => setCount(count + 1)}
+                disabled={!text || !selected}
+                className="w-full"
+              >
+                Submit ({count})
+              </Button>
+            </div>
+          </div>
+          
+          <div className="flex items-center space-x-4">
+            <div className="flex items-center space-x-2">
+              <Checkbox 
+                id="agree-terms"
+                checked={checked}
+                onCheckedChange={(checked) => setChecked(checked as boolean)}
+              />
+              <Label htmlFor="agree-terms">
+                I agree to the terms
+              </Label>
+            </div>
+            
+            <Badge variant={checked ? "default" : "outline"}>
+              {checked ? "Ready" : "Not Ready"}
+            </Badge>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}