spine-framework 0.1.61 → 1.0.0

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

@@ -1,299 +0,0 @@
-/**
- * @module src/pages/admin/PromptConfigDetailPage
- * @audience installer
- * @layer frontend-page
- * @stability stable
- *
- * Create / view / edit page for a single LLM prompt configuration.
- * Route param: `id` (UUID). Exposes `system_prompt`, `model`,
- * `temperature`, `max_tokens`, `prompt_type`, `category`, and
- * `is_default` as editable fields.
- *
- * @seeAlso src/pages/admin/PromptConfigsPage.tsx
- */
-
-import { useState, useEffect } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-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, FileText, AlertCircle } from 'lucide-react'
-import { useApi } from '../../hooks/useApi'
-import { apiFetch } from '../../lib/api'
-import { formatDateTime } from '../../lib/utils'
-
-interface PromptConfig {
-  id: string
-  name: string
-  description?: string
-  prompt_type: string
-  category: string
-  template: string
-  variables: string[]
-  model_config: Record<string, any>
-  is_default: boolean
-  is_active: boolean
-  metadata?: Record<string, any>
-  created_at: string
-  updated_at: string
-}
-
-const PROMPT_TYPES = [
-  { value: 'system', label: 'System' },
-  { value: 'user', label: 'User' },
-  { value: 'assistant', label: 'Assistant' },
-  { value: 'function', label: 'Function' },
-  { value: 'general', label: 'General' }
-]
-
-export function PromptConfigDetailPage() {
-  const { id } = useParams<{ id: string }>()
-  const navigate = useNavigate()
-  const isCreateMode = !id || id === 'new'
-
-  const [formData, setFormData] = useState({
-    name: '',
-    description: '',
-    prompt_type: 'general',
-    category: 'general',
-    template: '',
-    variables: '',
-    model_config: '{}',
-    is_default: false,
-    is_active: true
-  })
-  const [isSubmitting, setIsSubmitting] = useState(false)
-
-  const { data: config, loading, error } = useApi<PromptConfig>(
-    async () => {
-      if (isCreateMode) return null
-      const response = await apiFetch(`/api/prompt-configs?action=get&id=${id}`)
-      if (!response.ok) throw new Error('Failed to fetch')
-      const result = await response.json()
-      return result.data || result
-    },
-    { immediate: !isCreateMode }
-  )
-
-  useEffect(() => {
-    if (config) {
-      setFormData({
-        name: config.name || '',
-        description: config.description || '',
-        prompt_type: config.prompt_type || 'general',
-        category: config.category || 'general',
-        template: config.template || '',
-        variables: (config.variables || []).join(', '),
-        model_config: JSON.stringify(config.model_config || {}, null, 2),
-        is_default: config.is_default || false,
-        is_active: config.is_active
-      })
-    }
-  }, [config])
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setIsSubmitting(true)
-    try {
-      const body = {
-        ...formData,
-        variables: formData.variables.split(',').map(v => v.trim()).filter(Boolean),
-        model_config: JSON.parse(formData.model_config)
-      }
-      const url = isCreateMode ? '/api/prompt-configs' : `/api/prompt-configs?id=${id}`
-      const response = await apiFetch(url, {
-        method: isCreateMode ? 'POST' : 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(body)
-      })
-      if (!response.ok) throw new Error('Failed to save')
-      const result = await response.json()
-      if (isCreateMode) { navigate(`/spine-framework/admin/configs/prompts/${result.config_id || result.id}`) } else { navigate(-1) }
-    } catch (err: any) {
-      alert(err.message)
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  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-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="w-5 h-5" />
-        </Button>
-        <h1 className="text-2xl font-bold">
-          {isCreateMode ? 'Create Prompt Config' : config?.name || 'Prompt Config'}
-        </h1>
-      </div>
-
-      <form onSubmit={handleSubmit} className="space-y-6">
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <FileText className="w-5 h-5 text-primary" />
-              Configuration
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label>Name *</Label>
-                <Input
-                  value={formData.name}
-                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                  required
-                />
-              </div>
-              <div className="space-y-2">
-                <Label>Type</Label>
-                <Select value={formData.prompt_type} onValueChange={(v) => setFormData({ ...formData, prompt_type: v })}>
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {PROMPT_TYPES.map(opt => <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>)}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="space-y-2">
-                <Label>Category</Label>
-                <Input
-                  value={formData.category}
-                  onChange={(e) => setFormData({ ...formData, category: e.target.value })}
-                />
-              </div>
-              <div className="space-y-2">
-                <Label>Variables</Label>
-                <Input
-                  value={formData.variables}
-                  onChange={(e) => setFormData({ ...formData, variables: e.target.value })}
-                  placeholder="var1, var2, var3"
-                />
-              </div>
-              <div className="md:col-span-2 space-y-2">
-                <Label>Description</Label>
-                <Textarea
-                  value={formData.description}
-                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-                  rows={2}
-                />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Template</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Textarea
-              value={formData.template}
-              onChange={(e) => setFormData({ ...formData, template: e.target.value })}
-              className="font-mono text-sm"
-              rows={10}
-              placeholder="Enter prompt template with {{variables}}"
-              required
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Model Config (JSON)</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Textarea
-              value={formData.model_config}
-              onChange={(e) => setFormData({ ...formData, model_config: e.target.value })}
-              className="font-mono text-sm"
-              rows={6}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Options</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-3">
-              <div className="flex items-center gap-2">
-                <Checkbox
-                  id="is_default"
-                  checked={formData.is_default}
-                  onCheckedChange={(checked) => setFormData({ ...formData, is_default: checked === true })}
-                />
-                <Label htmlFor="is_default" className="text-sm">Default for type</Label>
-              </div>
-              <div className="flex items-center gap-2">
-                <Checkbox
-                  id="is_active"
-                  checked={formData.is_active}
-                  onCheckedChange={(checked) => setFormData({ ...formData, is_active: checked === true })}
-                />
-                <Label htmlFor="is_active" className="text-sm">Active</Label>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {!isCreateMode && config && (
-          <Card>
-            <CardHeader>
-              <CardTitle>Info</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <dl className="grid grid-cols-2 gap-4 text-sm">
-                <div><dt className="text-muted-foreground">Created</dt><dd>{formatDateTime(config.created_at)}</dd></div>
-                <div><dt className="text-muted-foreground">Updated</dt><dd>{formatDateTime(config.updated_at)}</dd></div>
-              </dl>
-            </CardContent>
-          </Card>
-        )}
-
-        <div className="flex items-center justify-end gap-3">
-          <Button type="button" variant="secondary" onClick={() => navigate(-1)}>
-            Cancel
-          </Button>
-          <Button type="submit" disabled={isSubmitting}>
-            {isCreateMode ? 'Create' : 'Update'}
-          </Button>
-        </div>
-      </form>
-    </div>
-  )
-}

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

@@ -1,292 +0,0 @@
-/**
- * @module src/pages/admin/PromptConfigsPage
- * @audience installer
- * @layer frontend-page
- * @stability stable
- *
- * Admin list page for LLM prompt configurations. Fetches all configs via
- * `/api/prompt-configs?action=list`, applies client-side search, category
- * filter, and sort. Highlights the default config with a star badge.
- * Renders inside `AdminListPage`. Row clicks navigate to
- * `/spine-framework/admin/configs/prompt-configs/:id`.
- *
- * @seeAlso src/pages/admin/PromptConfigDetailPage.tsx
- */
-
-import React, { useState } from 'react'
-import { Plus, FileText, CheckCircle, Star, Cpu, MessageSquare } from 'lucide-react';
-import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
-import { Button } from '../../components/ui/button'
-import { AdminListPage } from '../../components/admin/AdminListPage'
-import { SortableTableHeader } from '../../components/admin/SortableTableHeader'
-import { formatDateTime } from '../../lib/utils'
-import { useApi } from '../../hooks/useApi'
-import { apiFetch } from '../../lib/api'
-
-interface PromptConfig {
-  id: string
-  name: string
-  slug: string
-  system_prompt?: string
-  model?: string
-  temperature?: number
-  max_tokens?: number
-  is_multi_turn?: boolean
-  is_active: boolean
-  is_default?: boolean
-  prompt_type?: string
-  category?: string
-  app_id?: string
-  app?: any
-  created_by?: string
-  created_at: string
-  updated_at: string
-}
-
-export function PromptConfigsPage() {
-  const [searchTerm, setSearchTerm] = useState('')
-  const [selectedStatus, setSelectedStatus] = useState('all')
-  const [selectedType, setSelectedType] = useState('all')
-  const [sortKey, setSortKey] = useState('name')
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
-
-  const { data: promptConfigs, loading, error, refetch } = useApi<PromptConfig[]>(
-    async () => {
-      const response = await apiFetch('/api/prompt-configs?action=list')
-      if (!response.ok) throw new Error('Failed to fetch prompt configs')
-      const result = await response.json()
-      return (result.data || result) as PromptConfig[]
-    },
-    { immediate: true }
-  )
-
-  const filteredPromptConfigs = (promptConfigs || []).filter(config => {
-    const matchesSearch = config.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         config.slug.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         (config.system_prompt?.toLowerCase().includes(searchTerm.toLowerCase()) || false)
-    const matchesStatus = selectedStatus === 'all' || 
-      (selectedStatus === 'active' && config.is_active) ||
-      (selectedStatus === 'inactive' && !config.is_active)
-    const matchesType = selectedType === 'all' || config.prompt_type === selectedType
-    return matchesSearch && matchesStatus && matchesType
-  })
-
-  const promptTypes = Array.from(new Set((promptConfigs || []).map(c => c.prompt_type).filter(Boolean)))
-
-  const handleSort = (key: string) => {
-    if (sortKey === key) {
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
-    } else {
-      setSortKey(key)
-      setSortDirection('asc')
-    }
-  }
-
-  const handleRowClick = (config: PromptConfig) => {
-    window.location.href = `/spine-framework/admin/configs/prompts/${config.id}`
-  }
-
-  const sortedConfigs = [...(filteredPromptConfigs || [])].sort((a, b) => {
-    let aValue: any = a[sortKey as keyof PromptConfig]
-    let bValue: any = b[sortKey as keyof PromptConfig]
-    
-    if (typeof aValue === 'string') {
-      return sortDirection === 'asc' 
-        ? aValue.localeCompare(bValue)
-        : bValue.localeCompare(aValue)
-    }
-    
-    if (typeof aValue === 'boolean') {
-      return sortDirection === 'asc' ? (aValue ? 1 : 0) : (bValue ? 1 : 0)
-    }
-    
-    return 0
-  })
-
-  const statsCards = [
-    {
-      title: 'Total Prompts',
-      value: (promptConfigs || []).length,
-      icon: FileText,
-      iconColor: 'text-blue-500'
-    },
-    {
-      title: 'Active',
-      value: (promptConfigs || []).filter(c => c.is_active).length,
-      icon: CheckCircle,
-      iconColor: 'text-green-500'
-    },
-    {
-      title: 'Default',
-      value: (promptConfigs || []).filter(c => c.is_default).length,
-      icon: Star,
-      iconColor: 'text-yellow-500'
-    },
-    {
-      title: 'Multi-Turn',
-      value: (promptConfigs || []).filter(c => c.is_multi_turn).length,
-      icon: MessageSquare,
-      iconColor: 'text-purple-500'
-    }
-  ]
-
-  const statusOptions = [
-    { value: 'all', label: 'All Status' },
-    { value: 'active', label: 'Active' },
-    { value: 'inactive', label: 'Inactive' }
-  ]
-
-  const typeOptions = [
-    { value: 'all', label: 'All Types' },
-    ...promptTypes.filter((type): type is string => !!type).map(type => ({ value: type, label: type.charAt(0).toUpperCase() + type.slice(1) }))
-  ]
-
-  const filters = [
-    {
-      label: 'Status',
-      value: selectedStatus,
-      options: statusOptions,
-      onChange: (v: string) => setSelectedStatus(v)
-    },
-    {
-      label: 'Type',
-      value: selectedType,
-      options: typeOptions,
-      onChange: (v: string) => setSelectedType(v)
-    }
-  ]
-
-  return (
-    <AdminListPage
-      title="Prompt Configs"
-      description="Manage AI prompt templates and configurations"
-      newButtonText="Add Prompt Config"
-      newButtonHref="/spine-framework/admin/configs/prompts/new"
-      statsCards={statsCards}
-      searchPlaceholder="Search prompts..."
-      searchValue={searchTerm}
-      onSearchChange={setSearchTerm}
-      filters={filters}
-      loading={loading}
-      error={error}
-      emptyMessage="No prompt configs found"
-      emptyIcon={FileText}
-    >
-      {sortedConfigs.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 prompt configs 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="Name"
-                sortKey="name"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Model"
-                sortKey="model"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Type"
-                sortKey="prompt_type"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Status"
-                sortKey="is_active"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Settings"
-                sortKey="is_default"
-                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">
-            {sortedConfigs.map((config) => (
-              <tr 
-                key={config.id} 
-                className="hover:bg-slate-50 cursor-pointer transition-colors"
-                onClick={() => handleRowClick(config)}
-              >
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div>
-                    <div className="font-medium text-slate-900">
-                      <span className="text-accent-blue hover:text-navy">
-                        {config.name}
-                      </span>
-                    </div>
-                    <div className="text-xs text-slate-500 font-mono">{config.slug}</div>
-                  </div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className="inline-flex items-center gap-1.5 px-2 py-0.5 text-xs font-medium rounded-md bg-purple-100 text-purple-700">
-                    <Cpu className="w-3 h-3" />
-                    {config.model || 'Default'}
-                  </span>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className="text-sm text-slate-600 capitalize">{config.prompt_type || 'General'}</span>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className={`inline-flex px-2 py-0.5 text-xs font-medium rounded-md ${
-                    config.is_active 
-                      ? 'bg-green-100 text-green-700' 
-                      : 'bg-slate-100 text-slate-600'
-                  }`}>
-                    {config.is_active ? 'Active' : 'Inactive'}
-                  </span>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="flex gap-1">
-                    {config.is_default && (
-                      <span className="inline-flex px-1.5 py-0.5 text-xs font-medium rounded bg-yellow-100 text-yellow-700">Default</span>
-                    )}
-                    {config.is_multi_turn && (
-                      <span className="inline-flex px-1.5 py-0.5 text-xs font-medium rounded bg-blue-100 text-blue-700">Multi-turn</span>
-                    )}
-                  </div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
-                  {formatDateTime(config.created_at)}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-right">
-                  <span className="text-slate-400">→</span>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-    </AdminListPage>
-  )
-}