spine-framework 0.1.61 → 1.0.0

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

@@ -1,424 +0,0 @@
-/**
- * @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

@@ -1,176 +0,0 @@
-/**
- * @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>
-  )
-}