spine-framework 0.1.0

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

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

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