spine-framework 0.2.1 → 1.0.0

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

@@ -1,161 +0,0 @@
-/**
- * @module src/pages/admin/AIAgentDetailPage
- */
-import { useState, useEffect } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-import { useApi } from '../../hooks/useApi'
-import { apiFetch } from '../../lib/api'
-import { Button } from '../../components/ui/button'
-import { Input } from '../../components/ui/input'
-import { Textarea } from '../../components/ui/textarea'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select'
-import { Checkbox } from '../../components/ui/checkbox'
-import { Label } from '../../components/ui/label'
-import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card'
-import { Skeleton } from '../../components/ui/skeleton'
-import { Alert, AlertDescription, AlertTitle } from '../../components/ui/alert'
-import { ArrowLeft, Bot, AlertCircle } from 'lucide-react'
-
-interface AIAgent {
-  id: string
-  name: string
-  description?: string
-  agent_type: 'chat' | 'analysis' | 'automation' | 'custom'
-  model_config: { model: string; max_tokens?: number; temperature?: number }
-  system_prompt: string
-  tools: string[]
-  capabilities?: Record<string, any>
-  constraints?: Record<string, any>
-  is_active: boolean
-  created_at: string
-  updated_at: string
-}
-
-const AGENT_TYPES = [
-  { value: 'chat', label: 'Chat' },
-  { value: 'analysis', label: 'Analysis' },
-  { value: 'automation', label: 'Automation' },
-  { value: 'custom', label: 'Custom' }
-]
-
-export function AIAgentDetailPage() {
-  const { id } = useParams<{ id: string }>()
-  const navigate = useNavigate()
-  const isCreateMode = !id || id === 'new'
-  const [isEditing, setIsEditing] = useState(isCreateMode)
-  const [editData, setEditData] = useState<Record<string, any>>({})
-
-  const { data: agent, loading, error } = useApi<AIAgent>(
-    async () => {
-      if (isCreateMode) return {
-        id: '', name: '', description: '', agent_type: 'chat' as const,
-        model_config: { model: 'gpt-4', max_tokens: 2048, temperature: 0.7 },
-        system_prompt: '', tools: [], capabilities: {}, constraints: {},
-        is_active: true, created_at: new Date().toISOString(), updated_at: new Date().toISOString()
-      }
-      const response = await apiFetch(`/api/ai-agents?method=GET&id=${id}`)
-      if (!response.ok) throw new Error('Failed to fetch AI agent')
-      const result = await response.json()
-      return result.data
-    },
-    { immediate: !isCreateMode }
-  )
-
-  useEffect(() => {
-    if (agent) {
-      setEditData({
-        name: agent.name, description: agent.description || '', agent_type: agent.agent_type,
-        model_config: agent.model_config || { model: 'gpt-4', max_tokens: 2048, temperature: 0.7 },
-        system_prompt: agent.system_prompt || '', tools: (agent.tools || []).join('\n'),
-        capabilities: JSON.stringify(agent.capabilities || {}, null, 2),
-        constraints: JSON.stringify(agent.constraints || {}, null, 2),
-        is_active: agent.is_active
-      })
-    }
-  }, [agent])
-
-  const handleSave = async () => {
-    try {
-      const payload = {
-        ...editData,
-        tools: editData.tools?.split('\n').filter(Boolean) || [],
-        capabilities: JSON.parse(editData.capabilities || '{}'),
-        constraints: JSON.parse(editData.constraints || '{}')
-      }
-      const url = isCreateMode ? '/api/ai-agents' : `/api/ai-agents?id=${id}`
-      const response = await apiFetch(url, {
-        method: isCreateMode ? 'POST' : 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(payload)
-      })
-      if (!response.ok) throw new Error('Failed to save')
-      const result = await response.json()
-      if (isCreateMode) navigate(`/spine-framework/admin/configs/ai-agents/${result.id}`)
-      else setIsEditing(false)
-    } catch (err) {
-      console.error('Error saving:', err)
-    }
-  }
-
-  if (loading) return (
-    <div className="space-y-6">
-      <Skeleton className="h-8 w-48" />
-      <Card><CardHeader><Skeleton className="h-6 w-32" /></CardHeader><CardContent className="space-y-4"><Skeleton className="h-4 w-full" /><Skeleton className="h-4 w-2/3" /></CardContent></Card>
-    </div>
-  )
-
-  if (error) return (
-    <Alert variant="destructive"><AlertCircle className="h-4 w-4" /><AlertTitle>Failed to load</AlertTitle><AlertDescription>{String(error)}</AlertDescription></Alert>
-  )
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center gap-4">
-        <Button variant="ghost" onClick={() => navigate(-1)}><ArrowLeft className="h-5 w-5" /></Button>
-        <h1 className="text-2xl font-bold">{isCreateMode ? 'Create AI Agent' : agent?.name}</h1>
-      </div>
-      
-      <div className="flex justify-end gap-2">
-        {isEditing ? (
-          <><Button variant="outline" onClick={() => isCreateMode ? navigate(-1) : setIsEditing(false)}>Cancel</Button><Button onClick={handleSave}>{isCreateMode ? 'Create' : 'Save'}</Button></>
-        ) : <Button onClick={() => setIsEditing(true)}>Edit</Button>}
-      </div>
-
-      {isEditing ? (
-        <Card><CardContent className="p-6 space-y-4">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="space-y-2"><Label>Name</Label><Input value={editData.name || ''} onChange={e => setEditData({...editData, name: e.target.value})} /></div>
-            <div className="space-y-2"><Label>Type</Label><Select value={editData.agent_type || 'chat'} onValueChange={v => setEditData({...editData, agent_type: v})}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{AGENT_TYPES.map(t => <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>)}</SelectContent></Select></div>
-            <div className="space-y-2"><Label>Model</Label><Input value={editData.model_config?.model || ''} onChange={e => setEditData({...editData, model_config: {...editData.model_config, model: e.target.value}})} /></div>
-            <div className="space-y-2"><Label>Max Tokens</Label><Input type="number" value={editData.model_config?.max_tokens || ''} onChange={e => setEditData({...editData, model_config: {...editData.model_config, max_tokens: parseInt(e.target.value)}})} /></div>
-            <div className="space-y-2"><Label>Temperature</Label><Input type="number" step="0.1" min="0" max="2" value={editData.model_config?.temperature || ''} onChange={e => setEditData({...editData, model_config: {...editData.model_config, temperature: parseFloat(e.target.value)}})} /></div>
-          </div>
-          <div className="space-y-2"><Label>Description</Label><Textarea value={editData.description || ''} onChange={e => setEditData({...editData, description: e.target.value})} rows={2} /></div>
-          <div className="space-y-2"><Label>System Prompt</Label><Textarea value={editData.system_prompt || ''} onChange={e => setEditData({...editData, system_prompt: e.target.value})} rows={4} /></div>
-          <div className="space-y-2"><Label>Tools (one per line)</Label><Textarea value={editData.tools || ''} onChange={e => setEditData({...editData, tools: e.target.value})} rows={3} /></div>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="space-y-2"><Label>Capabilities (JSON)</Label><Textarea value={editData.capabilities || '{}'} onChange={e => setEditData({...editData, capabilities: e.target.value})} rows={4} className="font-mono text-sm" /></div>
-            <div className="space-y-2"><Label>Constraints (JSON)</Label><Textarea value={editData.constraints || '{}'} onChange={e => setEditData({...editData, constraints: e.target.value})} rows={4} className="font-mono text-sm" /></div>
-          </div>
-          <div className="flex items-center gap-2"><Checkbox id="active" checked={editData.is_active} onCheckedChange={c => setEditData({...editData, is_active: c === true})} /><Label htmlFor="active">Active</Label></div>
-        </CardContent></Card>
-      ) : (
-        <div className="space-y-6">
-          <Card><CardContent className="p-6">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="flex justify-between"><span className="text-muted-foreground">Type</span><span>{agent?.agent_type}</span></div>
-              <div className="flex justify-between"><span className="text-muted-foreground">Model</span><span>{agent?.model_config?.model}</span></div>
-              <div className="flex justify-between"><span className="text-muted-foreground">Max Tokens</span><span>{agent?.model_config?.max_tokens}</span></div>
-              <div className="flex justify-between"><span className="text-muted-foreground">Temperature</span><span>{agent?.model_config?.temperature}</span></div>
-              <div className="flex justify-between"><span className="text-muted-foreground">Active</span><span>{agent?.is_active ? 'Yes' : 'No'}</span></div>
-              <div className="flex justify-between"><span className="text-muted-foreground">Created</span><span>{new Date(agent?.created_at || '').toLocaleDateString()}</span></div>
-            </div>
-            <div className="mt-4"><span className="text-muted-foreground">Description</span><p className="mt-1">{agent?.description || '—'}</p></div>
-            <div className="mt-4"><span className="text-muted-foreground">System Prompt</span><p className="mt-1 text-sm bg-muted p-3 rounded">{agent?.system_prompt || '—'}</p></div>
-          </CardContent></Card>
-          <Card><CardHeader><CardTitle>Tools ({agent?.tools?.length || 0})</CardTitle></CardHeader><CardContent>{agent?.tools?.length ? <ul className="list-disc list-inside">{agent.tools.map((t, i) => <li key={i}>{t}</li>)}</ul> : <p className="text-muted-foreground">No tools configured</p>}</CardContent></Card>
-        </div>
-      )}
-    </div>
-  )
-}

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

@@ -1,318 +0,0 @@
-/**
- * @module src/pages/admin/AIAgentsPage
- * @audience installer
- * @layer frontend-page
- * @stability stable
- *
- * Admin list page for AI agents. Fetches all agents via
- * `/api/ai-agents?action=list`, applies client-side search, agent-type
- * filter (`chat` | `analysis` | `automation` | `custom`), and sort.
- * Renders inside `AdminListPage` with stat cards and a sortable table.
- * Row clicks navigate to `/spine-framework/admin/configs/ai-agents/:id`.
- *
- * @seeAlso src/pages/admin/AIAgentDetailPage.tsx
- */
-
-import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Cpu, CheckCircle, Clock } from 'lucide-react';
-import { formatDateTime } from '../../lib/utils'
-import { useApi } from '../../hooks/useApi'
-import { apiFetch } from '../../lib/api'
-import { AdminListPage } from '../../components/admin/AdminListPage'
-import { SortableTableHeader } from '../../components/admin/SortableTableHeader'
-import { Badge } from '../../components/ui/badge'
-
-interface AIAgent {
-  id: string
-  name: string
-  description?: string
-  agent_type: 'chat' | 'analysis' | 'automation' | 'custom'
-  model_config: {
-    model: string
-    max_tokens?: number
-    temperature?: number
-  }
-  system_prompt: string
-  tools: string[]
-  capabilities?: Record<string, any>
-  constraints?: Record<string, any>
-  is_active: boolean
-  created_at: string
-  updated_at: string
-  created_by: string
-  account_id: string
-  app_id?: string
-  metadata?: Record<string, any>
-}
-
-export function AIAgentsPage() {
-  const navigate = useNavigate()
-  
-  const [searchTerm, setSearchTerm] = useState('')
-  const [selectedType, setSelectedType] = useState('all')
-  const [selectedModel, setSelectedModel] = useState('all')
-  const [selectedStatus, setSelectedStatus] = useState('all')
-  const [sortKey, setSortKey] = useState('name')
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
-
-  // Fetch AI agents from API
-  const { data: agents, loading } = useApi<AIAgent[]>(
-    async (params) => {
-      const response = await apiFetch('/api/ai-agents?action=list', { signal: params?.signal })
-      if (!response.ok) throw new Error('Failed to fetch AI agents')
-      const result = await response.json()
-      return result.data || []
-    },
-    { immediate: true }
-  )
-
-  const agentTypes = [
-    { value: 'all', label: 'All Types' },
-    { value: 'chat', label: 'Chat' },
-    { value: 'analysis', label: 'Analysis' },
-    { value: 'automation', label: 'Automation' },
-    { value: 'custom', label: 'Custom' }
-  ]
-
-  const models = [
-    { value: 'all', label: 'All Models' },
-    { value: 'gpt-4', label: 'GPT-4' },
-    { value: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo' },
-    { value: 'claude-3-sonnet', label: 'Claude 3 Sonnet' },
-    { value: 'claude-3-opus', label: 'Claude 3 Opus' }
-  ]
-
-  const statusOptions = [
-    { value: 'all', label: 'All Statuses' },
-    { value: 'active', label: 'Active' },
-    { value: 'inactive', label: 'Inactive' }
-  ]
-
-  const filteredAgents = (agents || []).filter(agent => {
-    const matchesSearch = agent.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         (agent.description && agent.description.toLowerCase().includes(searchTerm.toLowerCase()))
-    const matchesType = selectedType === 'all' || agent.agent_type === selectedType
-    const matchesModel = selectedModel === 'all' || (agent.model_config?.model) === selectedModel
-    const matchesStatus = selectedStatus === 'all' || 
-                         (selectedStatus === 'active' && agent.is_active) ||
-                         (selectedStatus === 'inactive' && !agent.is_active)
-    return matchesSearch && matchesType && matchesModel && matchesStatus
-  })
-
-  console.log('AIAgentsPage - agents:', agents)
-  console.log('AIAgentsPage - filteredAgents:', filteredAgents)
-
-  // Helper functions
-  const getAgentBadgeColor = (agentType: string) => {
-    switch (agentType) {
-      case 'chat':
-        return 'bg-accent-blue/10 text-accent-blue'
-      case 'analysis':
-        return 'bg-green-100 text-green-800'
-      case 'automation':
-        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 = (agent: AIAgent) => {
-    navigate(`/spine-framework/admin/configs/ai-agents/${agent.id}`)
-  }
-
-  // Sort agents
-  const sortedAgents = [...(filteredAgents || [])].sort((a, b) => {
-    let aValue: any = a[sortKey as keyof AIAgent]
-    let bValue: any = b[sortKey as keyof AIAgent]
-    
-    if (sortKey === 'model_config') {
-      aValue = a.model_config?.model || ''
-      bValue = b.model_config?.model || ''
-    }
-    
-    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 Agents',
-      value: agents?.length || 0,
-      icon: Cpu,
-      iconColor: 'text-blue-500'
-    },
-    {
-      title: 'Active',
-      value: (agents || []).filter(a => a.is_active).length,
-      icon: CheckCircle,
-      iconColor: 'text-green-500'
-    },
-    {
-      title: 'Executions Today',
-      value: '24',
-      icon: Clock,
-      iconColor: 'text-orange-500'
-    }
-  ]
-
-  const filters = [
-    {
-      label: 'Type',
-      value: selectedType,
-      options: agentTypes,
-      onChange: setSelectedType
-    },
-    {
-      label: 'Model',
-      value: selectedModel,
-      options: models,
-      onChange: setSelectedModel
-    },
-    {
-      label: 'Status',
-      value: selectedStatus,
-      options: statusOptions,
-      onChange: setSelectedStatus
-    }
-  ]
-
-  return (
-    <AdminListPage
-      title="AI Agents"
-      description="Manage AI agents and their configurations"
-      newButtonText="New Agent"
-      newButtonHref="/spine-framework/admin/configs/ai-agents/new"
-      statsCards={statsCards}
-      searchPlaceholder="Search agents..."
-      searchValue={searchTerm}
-      onSearchChange={setSearchTerm}
-      filters={filters}
-      loading={loading}
-      emptyMessage="No AI agents found"
-      emptyIcon={Cpu}
-    >
-      {sortedAgents.length === 0 ? (
-        <div className="p-8 text-center">
-          <Cpu className="mx-auto h-12 w-12 text-slate-400" />
-          <h3 className="mt-2 text-sm font-medium text-slate-900">No agents 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="Agent"
-                sortKey="name"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Type"
-                sortKey="agent_type"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Model"
-                sortKey="model_config"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Status"
-                sortKey="is_active"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Created"
-                sortKey="created_at"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <th className="relative px-6 py-3">
-                <span className="sr-only">Actions</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody className="bg-white divide-y divide-slate-200">
-            {sortedAgents.map((agent) => (
-              <tr 
-                key={agent.id} 
-                className="hover:bg-slate-50 cursor-pointer transition-colors"
-                onClick={() => handleRowClick(agent)}
-              >
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div>
-                    <div className="font-medium text-slate-900">
-                      <span className="text-accent-blue hover:text-navy">
-                        {agent.name}
-                      </span>
-                    </div>
-                    {agent.description && (
-                      <div className="text-sm text-slate-500">{agent.description}</div>
-                    )}
-                  </div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <Badge variant={getAgentBadgeColor(agent.agent_type) as any}>
-                    {agent.agent_type}
-                  </Badge>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <Badge variant="default">
-                    {agent.model_config?.model || 'Unknown'}
-                  </Badge>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <Badge variant={getStatusBadgeColor(agent.is_active) as any}>
-                    {agent.is_active ? 'Active' : 'Inactive'}
-                  </Badge>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
-                  {formatDateTime(agent.created_at)}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-right">
-                  <span className="text-slate-400">→</span>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-    </AdminListPage>
-  )
-}