spine-framework 0.2.1 → 1.0.0

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

@@ -1,376 +0,0 @@
-/**
- * @module src/pages/admin/TimersPage
- * @audience installer
- * @layer frontend-page
- * @stability stable
- *
- * Admin list page for scheduled timers. Fetches all timers via
- * `/api/timers?action=list`, applies client-side search, type filter
- * (`schedule` | `delay` | `recurring` | `cron`), and sort. Renders
- * inside `AdminListPage` with stat cards and a sortable table. Row
- * clicks navigate to `/spine-framework/admin/configs/timers/:id`.
- *
- * @seeAlso src/pages/admin/TimerDetailPage.tsx
- */
-
-import React, { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useApi } from '../../hooks/useApi'
-import { apiFetch } from '../../lib/api'
-import { Plus, Clock, CheckCircle, Calendar, RefreshCw, Settings } from 'lucide-react';
-import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
-import { Button } from '../../components/ui/button'
-import { Badge } from '../../components/ui/badge'
-import { formatDateTime } from '../../lib/utils'
-import { AdminListPage } from '../../components/admin/AdminListPage'
-import { SortableTableHeader } from '../../components/admin/SortableTableHeader'
-
-interface Timer {
-  id: string
-  name: string
-  description?: string
-  timer_type: 'schedule' | 'delay' | 'recurring' | 'cron'
-  config: {
-    schedule?: string
-    delay_minutes?: number
-    interval_minutes?: number
-    cron_expression?: string
-    timezone?: string
-  }
-  pipeline_id?: string
-  pipeline_name?: string
-  is_active: boolean
-  created_at: string
-  updated_at: string
-  created_by: string
-  account_id: string
-  last_execution?: string
-  next_execution?: string
-  execution_count: number
-  success_count: number
-  failure_count: number
-}
-
-export function TimersPage() {
-  const navigate = useNavigate()
-  const [searchTerm, setSearchTerm] = useState('')
-  const [selectedType, setSelectedType] = useState('all')
-  const [selectedStatus, setSelectedStatus] = useState('all')
-  const [sortKey, setSortKey] = useState('name')
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
-
-  // Fetch timers from API
-  const { data: timers, loading, error, refetch } = useApi<Timer[]>(
-    async ({ signal }: { signal?: AbortSignal }) => {
-      try {
-        console.log('Fetching timers...')
-        const response = await apiFetch('/api/timers?action=list', { signal })
-        console.log('Response status:', response.status)
-        
-        if (!response.ok) {
-          console.error('Response not ok:', response.statusText)
-          throw new Error(`Failed to fetch timers: ${response.statusText}`)
-        }
-        
-        const result = await response.json()
-        console.log('Raw API result:', result)
-        
-        // Handle both nested and direct responses
-        const timers = result.data || result
-        console.log('Timers after processing:', timers)
-        
-        return timers
-      } catch (error) {
-        console.error('Error in TimersPage:', error)
-        throw error
-      }
-    },
-    { immediate: true }
-  )
-
-  const timerTypes = [
-    { value: 'all', label: 'All Types' },
-    { value: 'schedule', label: 'Schedule' },
-    { value: 'delay', label: 'Delay' },
-    { value: 'recurring', label: 'Recurring' },
-    { value: 'cron', label: 'Cron' }
-  ]
-
-  const statusOptions = [
-    { value: 'all', label: 'All Statuses' },
-    { value: 'active', label: 'Active' },
-    { value: 'inactive', label: 'Inactive' }
-  ]
-
-  const filteredTimers = (timers || []).filter(timer => {
-    const matchesSearch = timer.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         (timer.description && timer.description.toLowerCase().includes(searchTerm.toLowerCase()))
-    const matchesType = selectedType === 'all' || timer.timer_type === selectedType
-    const matchesStatus = selectedStatus === 'all' || 
-                         (selectedStatus === 'active' && timer.is_active) ||
-                         (selectedStatus === 'inactive' && !timer.is_active)
-    return matchesSearch && matchesType && matchesStatus
-  })
-
-  const getTimerIcon = (timerType: string) => {
-    switch (timerType) {
-      case 'schedule':
-        return <Calendar className="h-5 w-5 text-blue-500" />
-      case 'delay':
-        return <Clock className="h-5 w-5 text-green-500" />
-      case 'recurring':
-        return <RefreshCw className="h-5 w-5 text-purple-500" />
-      case 'cron':
-        return <Settings className="h-5 w-5 text-orange-500" />
-      default:
-        return <Clock className="h-5 w-5 text-slate-500" />
-    }
-  }
-
-  const getTimerBadgeColor = (timerType: string) => {
-    switch (timerType) {
-      case 'schedule':
-        return 'bg-blue-100 text-blue-800'
-      case 'delay':
-        return 'bg-green-100 text-green-800'
-      case 'recurring':
-        return 'bg-purple-100 text-purple-800'
-      case 'cron':
-        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 getSuccessRate = (timer: Timer) => {
-    if (timer.execution_count === 0) return 0
-    return Math.round((timer.success_count / timer.execution_count) * 100)
-  }
-
-  // Sorting logic
-  const sortedTimers = [...filteredTimers].sort((a, b) => {
-    const aValue = a[sortKey as keyof Timer]
-    const bValue = b[sortKey as keyof Timer]
-
-    if (aValue === undefined || aValue === null) return 1
-    if (bValue === undefined || bValue === null) return -1
-
-    if (typeof aValue === 'string' && typeof bValue === 'string') {
-      return sortDirection === 'asc' 
-        ? aValue.localeCompare(bValue)
-        : bValue.localeCompare(aValue)
-    }
-
-    if (typeof aValue === 'number' && typeof bValue === 'number') {
-      return sortDirection === 'asc' ? aValue - bValue : bValue - aValue
-    }
-
-    if (typeof aValue === 'boolean' && typeof bValue === 'boolean') {
-      return sortDirection === 'asc' 
-        ? (aValue ? 1 : 0) - (bValue ? 1 : 0)
-        : (bValue ? 1 : 0) - (aValue ? 1 : 0)
-    }
-
-    return 0
-  })
-
-  const handleSort = (key: string) => {
-    if (sortKey === key) {
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
-    } else {
-      setSortKey(key)
-      setSortDirection('asc')
-    }
-  }
-
-  const handleRowClick = (timer: Timer) => {
-    navigate(`/spine-framework/admin/configs/timers/${timer.id}`)
-  }
-
-  // Stats cards
-  const statsCards = [
-    {
-      title: 'Total Timers',
-      value: (timers || []).length,
-      icon: Clock,
-      iconColor: 'text-blue-500'
-    },
-    {
-      title: 'Active',
-      value: (timers || []).filter(t => t.is_active).length,
-      icon: CheckCircle,
-      iconColor: 'text-green-500'
-    },
-    {
-      title: 'Total Executions',
-      value: (timers || []).reduce((sum, t) => sum + t.execution_count, 0),
-      icon: Calendar,
-      iconColor: 'text-orange-500'
-    },
-    {
-      title: 'Success Rate',
-      value: `${Math.round((timers || []).reduce((sum, t) => sum + getSuccessRate(t), 0) / Math.max((timers || []).length, 1))}%`,
-      icon: CheckCircle,
-      iconColor: 'text-purple-500'
-    }
-  ]
-
-  const filters = [
-    {
-      label: 'Type',
-      value: selectedType,
-      options: timerTypes,
-      onChange: setSelectedType
-    },
-    {
-      label: 'Status',
-      value: selectedStatus,
-      options: statusOptions,
-      onChange: setSelectedStatus
-    }
-  ]
-
-  return (
-    <AdminListPage
-      title="Timers"
-      description="Manage scheduled and recurring tasks"
-      newButtonText="New Timer"
-      newButtonHref="/spine-framework/admin/configs/timers/new"
-      statsCards={statsCards}
-      searchPlaceholder="Search timers..."
-      searchValue={searchTerm}
-      onSearchChange={setSearchTerm}
-      filters={filters}
-      loading={loading}
-      emptyMessage="No timers found"
-      emptyIcon={Clock}
-    >
-      {sortedTimers.length === 0 ? (
-        <div className="p-8 text-center">
-          <Clock className="mx-auto h-12 w-12 text-slate-400" />
-          <h3 className="mt-2 text-sm font-medium text-slate-900">No timers 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="Timer"
-                sortKey="name"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Type"
-                sortKey="timer_type"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Status"
-                sortKey="is_active"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Next Execution"
-                sortKey="next_execution"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Executions"
-                sortKey="execution_count"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Success Rate"
-                sortKey="success_count"
-                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">
-            {sortedTimers.map((timer) => (
-              <tr 
-                key={timer.id} 
-                className="hover:bg-slate-50 cursor-pointer transition-colors"
-                onClick={() => handleRowClick(timer)}
-              >
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div>
-                    <div className="font-medium text-slate-900">
-                      <span className="text-accent-blue hover:text-navy">
-                        {timer.name}
-                      </span>
-                    </div>
-                    {timer.description && (
-                      <div className="text-sm text-slate-500">{timer.description}</div>
-                    )}
-                  </div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="space-y-1">
-                    <Badge variant={getTimerBadgeColor(timer.timer_type) as any}>
-                      {timer.timer_type}
-                    </Badge>
-                    <div className="text-sm text-slate-500">
-                      {timer.config.schedule || timer.config.cron_expression || 
-                       `${timer.config.delay_minutes}min delay` || 
-                       `${timer.config.interval_minutes}min interval`}
-                    </div>
-                  </div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <Badge variant={getStatusBadgeColor(timer.is_active) as any}>
-                    {timer.is_active ? 'Active' : 'Inactive'}
-                  </Badge>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
-                  {timer.next_execution ? formatDateTime(timer.next_execution) : 'Not scheduled'}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="text-sm text-slate-900">{timer.execution_count}</div>
-                  <div className="text-xs text-slate-500">
-                    {timer.success_count} success, {timer.failure_count} failed
-                  </div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="text-sm text-slate-900">{getSuccessRate(timer)}%</div>
-                  <div className="text-xs text-slate-500">
-                    {timer.execution_count > 0 ? 'success rate' : 'no executions'}
-                  </div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
-                  {formatDateTime(timer.created_at)}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-    </AdminListPage>
-  )
-}

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

@@ -1,149 +0,0 @@
-/**
- * @module src/pages/admin/TriggerDetailPage
- */
-import { useState, useEffect } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-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 { Badge } from '../../components/ui/badge'
-import { ArrowLeft, Zap, AlertCircle } from 'lucide-react'
-import { formatDateTime } from '../../lib/utils'
-
-interface Trigger {
-  id: string
-  name: string
-  description?: string
-  event_type: string
-  entity_type?: string
-  condition?: Record<string, any>
-  action_type: string
-  action_config: Record<string, any>
-  is_active: boolean
-  priority: number
-  debounce_ms?: number
-  rate_limit_per_minute?: number
-  created_at: string
-  updated_at: string
-}
-
-export function TriggerDetailPage() {
-  const { id } = useParams<{ id: string }>()
-  const navigate = useNavigate()
-  const isCreateMode = !id || id === 'new'
-  const [trigger, setTrigger] = useState<Trigger | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [isEditing, setIsEditing] = useState(isCreateMode)
-  const [formData, setFormData] = useState({
-    name: '', description: '', event_type: '', entity_type: '', condition: '{}', action_type: '',
-    action_config: '{}', is_active: true, priority: 0, debounce_ms: 0, rate_limit_per_minute: 0
-  })
-
-  useEffect(() => {
-    if (isCreateMode) {
-      setLoading(false)
-      return
-    }
-    setLoading(true)
-    const fetchTrigger = async () => {
-      try {
-        const response = await apiFetch(`/api/triggers?action=get&id=${id}`)
-        if (!response.ok) throw new Error('Failed to fetch trigger')
-        const result = await response.json()
-        const data = result.data
-        setTrigger(data)
-        setFormData({
-          name: data.name, description: data.description || '', event_type: data.event_type, entity_type: data.entity_type || '',
-          condition: JSON.stringify(data.condition || {}, null, 2), action_type: data.action_type,
-          action_config: JSON.stringify(data.action_config || {}, null, 2), is_active: data.is_active, priority: data.priority || 0,
-          debounce_ms: data.debounce_ms || 0, rate_limit_per_minute: data.rate_limit_per_minute || 0
-        })
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load trigger')
-      } finally {
-        setLoading(false)
-      }
-    }
-    fetchTrigger()
-  }, [id, isCreateMode])
-
-  const handleSave = async () => {
-    try {
-      let parsedCondition = {}, parsedActionConfig = {}
-      try { parsedCondition = JSON.parse(formData.condition) } catch {}
-      try { parsedActionConfig = JSON.parse(formData.action_config) } catch {}
-      const url = isCreateMode ? '/api/triggers?action=create' : `/api/triggers?action=update&id=${id}`
-      const method = isCreateMode ? 'POST' : 'PATCH'
-      const response = await apiFetch(url, {
-        method, headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ...formData, condition: parsedCondition, action_config: parsedActionConfig })
-      })
-      if (!response.ok) throw new Error('Failed to save trigger')
-      if (isCreateMode) {
-        const result = await response.json()
-        navigate(`/spine-framework/admin/configs/triggers/${result.data?.id || result.id}`)
-      } else setIsEditing(false)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to save')
-    }
-  }
-
-  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 && !isCreateMode) return (
-    <Alert variant="destructive"><AlertCircle className="h-4 w-4" /><AlertTitle>Error</AlertTitle><AlertDescription>{error}</AlertDescription></Alert>
-  )
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <Button variant="ghost" onClick={() => isCreateMode ? navigate('/spine-framework/admin/configs/triggers') : navigate(-1)}><ArrowLeft className="h-5 w-5" /></Button>
-          <h1 className="text-2xl font-bold">{isCreateMode ? 'Create Trigger' : trigger?.name}</h1>
-        </div>
-        <div className="flex gap-2">
-          {isEditing ? (
-            <><Button variant="outline" onClick={() => isCreateMode ? navigate(-1) : setIsEditing(false)}>Cancel</Button><Button onClick={handleSave}>{isCreateMode ? 'Create' : 'Save'}</Button></>
-          ) : !isCreateMode && <Button onClick={() => setIsEditing(true)}>Edit</Button>}
-        </div>
-      </div>
-
-      <Card><CardContent className="p-6">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground">Trigger</h3>
-            <div className="space-y-2"><Label>Name</Label>{isEditing ? <Input value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} /> : <div className="text-sm">{trigger?.name}</div>}</div>
-            <div className="space-y-2"><Label>Event Type</Label>{isEditing ? <Input value={formData.event_type} onChange={e => setFormData({...formData, event_type: e.target.value})} placeholder="e.g., item.created" /> : <Badge>{trigger?.event_type}</Badge>}</div>
-            <div className="space-y-2"><Label>Entity Type</Label>{isEditing ? <Input value={formData.entity_type} onChange={e => setFormData({...formData, entity_type: e.target.value})} placeholder="e.g., item" /> : <div className="text-sm">{trigger?.entity_type || '—'}</div>}</div>
-            <div className="space-y-2"><Label>Active</Label>{isEditing ? <div className="flex items-center gap-2"><Checkbox id="active" checked={formData.is_active} onCheckedChange={c => setFormData({...formData, is_active: c === true})} /><Label htmlFor="active">Enabled</Label></div> : <div className="text-sm">{trigger?.is_active ? 'Yes' : 'No'}</div>}</div>
-          </div>
-          <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground">Action</h3>
-            <div className="space-y-2"><Label>Action Type</Label>{isEditing ? <Input value={formData.action_type} onChange={e => setFormData({...formData, action_type: e.target.value})} placeholder="e.g., function.execute" /> : <Badge variant="secondary">{trigger?.action_type}</Badge>}</div>
-            <div className="space-y-2"><Label>Priority</Label>{isEditing ? <Input type="number" value={formData.priority} onChange={e => setFormData({...formData, priority: parseInt(e.target.value)})} /> : <div className="text-sm">{trigger?.priority}</div>}</div>
-            <div className="space-y-2"><Label>Debounce (ms)</Label>{isEditing ? <Input type="number" value={formData.debounce_ms} onChange={e => setFormData({...formData, debounce_ms: parseInt(e.target.value)})} /> : <div className="text-sm">{trigger?.debounce_ms}ms</div>}</div>
-            <div className="space-y-2"><Label>Rate Limit (/min)</Label>{isEditing ? <Input type="number" value={formData.rate_limit_per_minute} onChange={e => setFormData({...formData, rate_limit_per_minute: parseInt(e.target.value)})} /> : <div className="text-sm">{trigger?.rate_limit_per_minute}</div>}</div>
-          </div>
-        </div>
-        <div className="mt-6 space-y-2"><Label>Description</Label>{isEditing ? <Textarea value={formData.description} onChange={e => setFormData({...formData, description: e.target.value})} rows={2} /> : <div className="text-sm">{trigger?.description || '—'}</div>}</div>
-        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="space-y-2"><Label>Condition (JSON)</Label>{isEditing ? <Textarea value={formData.condition} onChange={e => setFormData({...formData, condition: e.target.value})} rows={6} className="font-mono text-sm" /> : <pre className="text-sm bg-muted p-3 rounded">{JSON.stringify(trigger?.condition || {}, null, 2)}</pre>}</div>
-          <div className="space-y-2"><Label>Action Config (JSON)</Label>{isEditing ? <Textarea value={formData.action_config} onChange={e => setFormData({...formData, action_config: e.target.value})} rows={6} className="font-mono text-sm" /> : <pre className="text-sm bg-muted p-3 rounded">{JSON.stringify(trigger?.action_config || {}, null, 2)}</pre>}</div>
-        </div>
-      </CardContent></Card>
-    </div>
-  )
-}