spine-framework 0.1.0

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

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

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