spine-framework 0.1.61 → 1.0.0

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

@@ -1,257 +0,0 @@
-/**
- * @module src/pages/admin/TestingDashboard
- * @audience installer
- * @layer frontend-page
- * @stability stable
- *
- * Admin Testing dashboard. Shows per-suite health cards (unit, integration,
- * api, ui) and a table of the 20 most recent test runs. Read-only — tests
- * are triggered by the agentic IDE, not from this UI.
- *
- * Route: /admin/testing
- *
- * @seeAlso src/pages/admin/TestRunDetailPage.tsx
- * @seeAlso functions/tests.ts (data source)
- * @seeAlso migrations_dayzero/008_test_runs.sql
- */
-
-import React from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useApi } from '../../hooks/useApi'
-import { apiFetch } from '../../lib/api'
-import { AgentView } from '../../components/shared/AgentView'
-import { FlaskConical, CheckCircle, XCircle, Clock, RefreshCw } from 'lucide-react';
-import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
-import { formatDateTime } from '../../lib/utils'
-
-// ─── TYPES ───────────────────────────────────────────────────────────────────
-
-interface SuiteStat {
-  suite:        string
-  total_runs:   number
-  last_status:  string | null
-  last_run_at:  string | null
-  last_passed:  number | null
-  last_failed:  number | null
-  last_total:   number | null
-}
-
-interface TestRun {
-  id:           string
-  suite:        string
-  status:       string
-  started_at:   string
-  finished_at:  string | null
-  duration_ms:  number | null
-  total:        number | null
-  passed:       number | null
-  failed:       number | null
-  skipped:      number | null
-  triggered_by: string | null
-}
-
-// ─── HELPERS ─────────────────────────────────────────────────────────────────
-
-const SUITE_LABELS: Record<string, string> = {
-  unit:        'Unit',
-  integration: 'Integration',
-  api:         'API',
-  ui:          'UI',
-}
-
-function StatusBadge({ status }: { status: string | null }) {
-  if (!status) return <span className="text-gray-400 text-xs">—</span>
-  const color =
-    status === 'passed'  ? 'bg-green-100 text-green-800' :
-    status === 'failed'  ? 'bg-red-100 text-red-800'    :
-    status === 'running' ? 'bg-blue-100 text-blue-800'  :
-                           'bg-gray-100 text-gray-600'
-  return (
-    <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${color}`}>
-      {status}
-    </span>
-  )
-}
-
-function durationLabel(ms: number | null): string {
-  if (ms == null) return '—'
-  if (ms < 1000) return `${ms}ms`
-  return `${(ms / 1000).toFixed(1)}s`
-}
-
-// ─── SUITE HEALTH CARD ───────────────────────────────────────────────────────
-
-function SuiteCard({ stat }: { stat: SuiteStat }) {
-  const label = SUITE_LABELS[stat.suite] ?? stat.suite
-  const passRate = stat.last_total
-    ? Math.round(((stat.last_passed ?? 0) / stat.last_total) * 100)
-    : null
-
-  return (
-    <div className="bg-white border border-gray-200 rounded-lg p-4 flex flex-col gap-2">
-      <div className="flex items-center justify-between">
-        <span className="text-sm font-semibold text-gray-700">{label}</span>
-        <StatusBadge status={stat.last_status} />
-      </div>
-      {stat.last_run_at ? (
-        <>
-          <div className="text-xs text-gray-500">
-            Last run {formatDateTime(stat.last_run_at)}
-          </div>
-          <div className="flex items-center gap-3 text-xs">
-            <span className="text-green-600 font-medium">{stat.last_passed ?? 0}✓</span>
-            <span className="text-red-500 font-medium">{stat.last_failed ?? 0}✗</span>
-            {passRate !== null && (
-              <span className="text-gray-500">{passRate}% pass</span>
-            )}
-          </div>
-        </>
-      ) : (
-        <div className="text-xs text-gray-400">No runs yet</div>
-      )}
-      <div className="text-xs text-gray-400">{stat.total_runs} total run{stat.total_runs !== 1 ? 's' : ''}</div>
-    </div>
-  )
-}
-
-// ─── PAGE ────────────────────────────────────────────────────────────────────
-
-export default function TestingDashboard() {
-  const navigate = useNavigate()
-
-  const { data: statsData, loading: statsLoading, execute: refreshStats } = useApi(
-    () => apiFetch('/.netlify/functions/tests?action=stats').then(r => r.json()),
-    { immediate: true }
-  )
-
-  const { data: runsData, loading: runsLoading, execute: refreshRuns } = useApi(
-    () => apiFetch('/.netlify/functions/tests?action=list&limit=20').then(r => r.json()),
-    { immediate: true }
-  )
-
-  const loading = statsLoading || runsLoading
-
-  function handleRefresh() {
-    refreshStats()
-    refreshRuns()
-  }
-
-  // API returns { data: { data: [...], error: null }, error: null, meta: {...} }
-  const stats: SuiteStat[] = (statsData as any)?.data?.data ?? []
-  const runs: TestRun[]    = (runsData as any)?.data?.data  ?? []
-
-  return (
-    <div className="p-6 max-w-6xl mx-auto">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex items-center gap-2">
-          <FlaskConical className="w-6 h-6 text-gray-500" />
-          <h1 className="text-xl font-semibold text-gray-900">Testing</h1>
-        </div>
-        <button
-          onClick={handleRefresh}
-          className="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-800 transition-colors"
-        >
-          <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
-          Refresh
-        </button>
-      </div>
-
-      {/* Suite health cards */}
-      {statsLoading ? (
-        <div className="flex justify-center py-8"><LoadingSpinner /></div>
-      ) : (
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
-          {['unit', 'integration', 'api', 'ui'].map(suite => {
-            const stat = stats.find(s => s.suite === suite) ?? {
-              suite, total_runs: 0, last_status: null, last_run_at: null,
-              last_passed: null, last_failed: null, last_total: null
-            }
-            return <SuiteCard key={suite} stat={stat} />
-          })}
-        </div>
-      )}
-
-      {/* Recent runs table */}
-      <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
-        <div className="px-4 py-3 border-b border-gray-100 flex items-center gap-2">
-          <Clock className="w-4 h-4 text-gray-400" />
-          <span className="text-sm font-medium text-gray-700">Recent Runs</span>
-        </div>
-
-        {runsLoading ? (
-          <div className="flex justify-center py-8"><LoadingSpinner /></div>
-        ) : runs.length === 0 ? (
-          <div className="text-center py-12 text-gray-400 text-sm">
-            No test runs yet. Trigger a test suite from the IDE.
-          </div>
-        ) : (
-          <table className="w-full text-sm">
-            <thead className="bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wide">
-              <tr>
-                <th className="px-4 py-2 text-left">Suite</th>
-                <th className="px-4 py-2 text-left">Status</th>
-                <th className="px-4 py-2 text-left">Started</th>
-                <th className="px-4 py-2 text-right">Pass</th>
-                <th className="px-4 py-2 text-right">Fail</th>
-                <th className="px-4 py-2 text-right">Total</th>
-                <th className="px-4 py-2 text-right">Duration</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-gray-50">
-              {runs.map(run => (
-                <tr
-                  key={run.id}
-                  className="hover:bg-gray-50 cursor-pointer transition-colors"
-                  onClick={() => navigate(`/spine-framework/admin/testing/${run.id}`)}
-                >
-                  <td className="px-4 py-2.5">
-                    <span className="font-medium text-gray-700">
-                      {SUITE_LABELS[run.suite] ?? run.suite}
-                    </span>
-                  </td>
-                  <td className="px-4 py-2.5">
-                    <StatusBadge status={run.status} />
-                  </td>
-                  <td className="px-4 py-2.5 text-gray-500">
-                    {formatDateTime(run.started_at)}
-                  </td>
-                  <td className="px-4 py-2.5 text-right text-green-600 font-medium">
-                    {run.passed ?? '—'}
-                  </td>
-                  <td className="px-4 py-2.5 text-right text-red-500 font-medium">
-                    {run.failed ?? '—'}
-                  </td>
-                  <td className="px-4 py-2.5 text-right text-gray-500">
-                    {run.total ?? '—'}
-                  </td>
-                  <td className="px-4 py-2.5 text-right text-gray-400">
-                    {durationLabel(run.duration_ms)}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        )}
-      </div>
-
-      {/* Empty state hint */}
-      {!loading && runs.length > 0 && (
-        <p className="mt-3 text-xs text-gray-400 text-center">
-          Click any row to view individual test case results
-        </p>
-      )}
-
-      {/* Agent View — for developers and agentic IDEs */}
-      {!loading && stats.length > 0 && runs.length > 0 && (
-        <AgentView
-          data={{ suite_stats: stats, recent_runs: runs.slice(0, 5) }}
-          endpoint="/.netlify/functions/tests"
-          method="GET"
-          query={{ action: 'stats' }}
-          title="Agent View — Test Data API"
-        />
-      )}
-    </div>
-  )
-}

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

@@ -1,151 +0,0 @@
-/**
- * @module src/pages/admin/TimerDetailPage
- */
-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, Clock, AlertCircle } from 'lucide-react'
-import { formatDateTime } from '../../lib/utils'
-
-interface Timer {
-  id: string
-  name: string
-  description?: string
-  schedule: string
-  timer_type: 'interval' | 'cron' | 'once'
-  interval_seconds?: number
-  next_run?: string
-  last_run?: string
-  last_run_status?: 'success' | 'failed'
-  is_active: boolean
-  target_type: string
-  target_action: string
-  target_config: Record<string, any>
-  created_at: string
-  updated_at: string
-}
-
-const TIMER_TYPES = [
-  { value: 'interval', label: 'Interval' },
-  { value: 'cron', label: 'Cron Expression' },
-  { value: 'once', label: 'One-time' }
-]
-
-export function TimerDetailPage() {
-  const { id } = useParams<{ id: string }>()
-  const navigate = useNavigate()
-  const isCreateMode = !id || id === 'new'
-  const [timer, setTimer] = useState<Timer | 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: '', schedule: '', timer_type: 'interval' as const, interval_seconds: 3600, is_active: true, target_type: '', target_action: '', target_config: '{}' })
-
-  useEffect(() => {
-    if (isCreateMode) {
-      setLoading(false)
-      return
-    }
-    setLoading(true)
-    const fetchTimer = async () => {
-      try {
-        const response = await apiFetch(`/api/timers?action=get&id=${id}`)
-        if (!response.ok) throw new Error('Failed to fetch timer')
-        const result = await response.json()
-        const data = result.data
-        setTimer(data)
-        setFormData({
-          name: data.name, description: data.description || '', schedule: data.schedule, timer_type: data.timer_type,
-          interval_seconds: data.interval_seconds || 3600, is_active: data.is_active, target_type: data.target_type,
-          target_action: data.target_action, target_config: JSON.stringify(data.target_config || {}, null, 2)
-        })
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load timer')
-      } finally {
-        setLoading(false)
-      }
-    }
-    fetchTimer()
-  }, [id, isCreateMode])
-
-  const handleSave = async () => {
-    try {
-      let parsedConfig = {}
-      try { parsedConfig = JSON.parse(formData.target_config) } catch { throw new Error('Invalid target config JSON') }
-      const url = isCreateMode ? '/api/timers?action=create' : `/api/timers?action=update&id=${id}`
-      const method = isCreateMode ? 'POST' : 'PATCH'
-      const response = await apiFetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...formData, target_config: parsedConfig }) })
-      if (!response.ok) throw new Error('Failed to save timer')
-      if (isCreateMode) {
-        const result = await response.json()
-        navigate(`/spine-framework/admin/configs/timers/${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/timers') : navigate(-1)}><ArrowLeft className="h-5 w-5" /></Button>
-          <h1 className="text-2xl font-bold">{isCreateMode ? 'Create Timer' : timer?.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">Configuration</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">{timer?.name}</div>}</div>
-            <div className="space-y-2"><Label>Type</Label>{isEditing ? <Select value={formData.timer_type} onValueChange={v => setFormData({...formData, timer_type: v as any})}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{TIMER_TYPES.map(t => <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>)}</SelectContent></Select> : <Badge>{timer?.timer_type}</Badge>}</div>
-            {formData.timer_type === 'interval' && <div className="space-y-2"><Label>Interval (seconds)</Label>{isEditing ? <Input type="number" value={formData.interval_seconds} onChange={e => setFormData({...formData, interval_seconds: parseInt(e.target.value)})} /> : <div className="text-sm">{timer?.interval_seconds}s</div>}</div>}
-            <div className="space-y-2"><Label>Schedule/Cron</Label>{isEditing ? <Input value={formData.schedule} onChange={e => setFormData({...formData, schedule: e.target.value})} placeholder={formData.timer_type === 'interval' ? '3600' : '0 */6 * * *'} /> : <div className="text-sm font-mono">{timer?.schedule}</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">{timer?.is_active ? 'Yes' : 'No'}</div>}</div>
-          </div>
-          <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground">Execution</h3>
-            {!isCreateMode && (
-              <>
-                <div className="flex justify-between"><span className="text-sm text-muted-foreground">Next Run</span><span className="text-sm">{timer?.next_run ? formatDateTime(timer.next_run) : '—'}</span></div>
-                <div className="flex justify-between"><span className="text-sm text-muted-foreground">Last Run</span><span className="text-sm">{timer?.last_run ? formatDateTime(timer.last_run) : '—'}</span></div>
-                <div className="flex justify-between"><span className="text-sm text-muted-foreground">Last Status</span><Badge variant={timer?.last_run_status === 'success' ? 'default' : 'destructive'}>{timer?.last_run_status || '—'}</Badge></div>
-              </>
-            )}
-            <div className="space-y-2"><Label>Target Type</Label>{isEditing ? <Input value={formData.target_type} onChange={e => setFormData({...formData, target_type: e.target.value})} placeholder="e.g., function, pipeline" /> : <div className="text-sm">{timer?.target_type}</div>}</div>
-            <div className="space-y-2"><Label>Target Action</Label>{isEditing ? <Input value={formData.target_action} onChange={e => setFormData({...formData, target_action: e.target.value})} placeholder="e.g., execute" /> : <div className="text-sm">{timer?.target_action}</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={3} /> : <div className="text-sm">{timer?.description || '—'}</div>}</div>
-        <div className="mt-6 space-y-2"><Label>Target Config (JSON)</Label>{isEditing ? <Textarea value={formData.target_config} onChange={e => setFormData({...formData, target_config: e.target.value})} rows={6} className="font-mono text-sm" /> : <pre className="text-sm bg-muted p-3 rounded">{JSON.stringify(timer?.target_config || {}, null, 2)}</pre>}</div>
-      </CardContent></Card>
-    </div>
-  )
-}