spine-framework 0.1.0

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

@@ -0,0 +1,470 @@
+/**
+ * @module src/pages/admin/ObservabilityDashboard
+ * @audience installer
+ * @layer frontend-page
+ * @stability stable
+ *
+ * System observability dashboard. Fetches aggregated metrics from
+ * `/api/admin-data?action=metrics` and renders time-series line charts,
+ * bar charts, and pie charts using `recharts`. Covers request rates,
+ * error rates, pipeline execution counts, and resource utilisation.
+ * Data is re-fetched on a configurable auto-refresh interval.
+ *
+ * @seeAlso src/pages/admin/LogsPage.tsx
+ * @seeAlso src/pages/admin/AlertsConfigPage.tsx
+ */
+
+import React, { useState, useEffect, useMemo } from 'react'
+import {
+  LineChart,
+  Line,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+} from 'recharts'
+import { BarChart3, AlertTriangle, Clock, RefreshCw, Bell } from 'lucide-react';
+import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
+import { Button } from '../../components/ui/button'
+import { useApi } from '../../hooks/useApi'
+import { apiFetch } from '../../lib/api'
+import { formatDateTime } from '../../lib/utils'
+import { Link } from 'react-router-dom'
+
+interface MetricData {
+  bucket: string
+  count: number
+}
+
+interface ErrorRateData {
+  total: number
+  errors: number
+  rate: number
+}
+
+interface LatencyData {
+  p50: number
+  p90: number
+  p95: number
+  p99: number
+}
+
+interface PipelineStats {
+  pipeline_id: string
+  success_count: number
+  failure_count: number
+  avg_duration_ms: number
+}
+
+interface TopActor {
+  principal_id: string
+  event_count: number
+}
+
+interface AlertEvent {
+  id: string
+  metric: string
+  threshold_value: number
+  actual_value: number
+  created_at: string
+}
+
+const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6']
+
+export function ObservabilityDashboard() {
+  const [timeRange, setTimeRange] = useState<'1h' | '24h' | '7d'>('24h')
+  const [refreshInterval, setRefreshInterval] = useState(30)
+
+  const timeParams = useMemo(() => {
+    const now = new Date()
+    let from = new Date()
+    switch (timeRange) {
+      case '1h':
+        from = new Date(now.getTime() - 60 * 60 * 1000)
+        break
+      case '24h':
+        from = new Date(now.getTime() - 24 * 60 * 60 * 1000)
+        break
+      case '7d':
+        from = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
+        break
+    }
+    return {
+      from: from.toISOString(),
+      to: now.toISOString(),
+    }
+  }, [timeRange])
+
+  // Event volume data
+  const { data: eventVolume, loading: loadingVolume, refetch: refetchVolume } = useApi<MetricData[]>(
+    async () => {
+      const bucket = timeRange === '1h' ? 'minute' : timeRange === '24h' ? 'hour' : 'day'
+      const response = await apiFetch(
+        `/api/observability?action=event_volume&from=${encodeURIComponent(timeParams.from)}&to=${encodeURIComponent(timeParams.to)}&bucket=${bucket}`
+      )
+      if (!response.ok) return []
+      const result = await response.json()
+      return (result.data || result || []).map((d: any) => ({
+        bucket: new Date(d.bucket).toLocaleString('en-US', {
+          month: 'short',
+          day: 'numeric',
+          hour: 'numeric',
+          minute: timeRange === '1h' ? 'numeric' : undefined,
+        }),
+        count: parseInt(d.count),
+      }))
+    },
+    { immediate: true, deps: [timeRange] }
+  )
+
+  // Error rate data
+  const { data: errorRate, loading: loadingError, refetch: refetchError } = useApi<ErrorRateData>(
+    async () => {
+      const response = await apiFetch(
+        `/api/observability?action=error_rate&from=${encodeURIComponent(timeParams.from)}&to=${encodeURIComponent(timeParams.to)}`
+      )
+      if (!response.ok) return { total: 0, errors: 0, rate: 0 }
+      const result = await response.json()
+      return result.data || result || { total: 0, errors: 0, rate: 0 }
+    },
+    { immediate: true, deps: [timeRange] }
+  )
+
+  // Latency percentiles
+  const { data: latency, loading: loadingLatency, refetch: refetchLatency } = useApi<LatencyData>(
+    async () => {
+      const response = await apiFetch(
+        `/api/observability?action=latency_percentiles&from=${encodeURIComponent(timeParams.from)}&to=${encodeURIComponent(timeParams.to)}`
+      )
+      if (!response.ok) return { p50: 0, p90: 0, p95: 0, p99: 0 }
+      const result = await response.json()
+      return result.data || result || { p50: 0, p90: 0, p95: 0, p99: 0 }
+    },
+    { immediate: true, deps: [timeRange] }
+  )
+
+  // Pipeline stats
+  const { data: pipelineStats, loading: loadingPipelines, refetch: refetchPipelines } = useApi<PipelineStats[]>(
+    async () => {
+      const response = await apiFetch(
+        `/api/observability?action=pipeline_stats&from=${encodeURIComponent(timeParams.from)}&to=${encodeURIComponent(timeParams.to)}`
+      )
+      if (!response.ok) return []
+      const result = await response.json()
+      return result.data || result || []
+    },
+    { immediate: true, deps: [timeRange] }
+  )
+
+  // Top actors
+  const { data: topActors, loading: loadingActors, refetch: refetchActors } = useApi<TopActor[]>(
+    async () => {
+      const response = await apiFetch(
+        `/api/observability?action=top_actors&from=${encodeURIComponent(timeParams.from)}&to=${encodeURIComponent(timeParams.to)}&limit=5`
+      )
+      if (!response.ok) return []
+      const result = await response.json()
+      return result.data || result || []
+    },
+    { immediate: true, deps: [timeRange] }
+  )
+
+  // Recent alerts
+  const { data: recentAlerts } = useApi<AlertEvent[]>(
+    async () => {
+      const response = await apiFetch('/api/logs?action=account&event=threshold.breached&limit=5')
+      if (!response.ok) return []
+      const result = await response.json()
+      return (result.data || result || []).slice(0, 5)
+    },
+    { immediate: true }
+  )
+
+  // Auto refresh
+  useEffect(() => {
+    const interval = setInterval(() => {
+      refetchVolume()
+      refetchError()
+      refetchLatency()
+      refetchPipelines()
+      refetchActors()
+    }, refreshInterval * 1000)
+    return () => clearInterval(interval)
+  }, [refreshInterval])
+
+  const pipelineChartData = useMemo(() => {
+    return (pipelineStats || []).map((stat) => ({
+      name: stat.pipeline_id.slice(0, 8),
+      success: parseInt(stat.success_count as any),
+      failure: parseInt(stat.failure_count as any),
+      avgDuration: Math.round(parseFloat(stat.avg_duration_ms as any)),
+    }))
+  }, [pipelineStats])
+
+  const statsCards = [
+    {
+      title: 'Total Events',
+      value: eventVolume?.reduce((sum, d) => sum + d.count, 0) || 0,
+      icon: BarChart3,
+      iconColor: 'text-blue-500',
+      bgColor: 'bg-blue-50',
+    },
+    {
+      title: 'Error Rate',
+      value: `${(errorRate?.rate || 0).toFixed(2)}%`,
+      icon: AlertTriangle,
+      iconColor: errorRate && errorRate.rate > 5 ? 'text-red-500' : 'text-amber-500',
+      bgColor: errorRate && errorRate.rate > 5 ? 'bg-red-50' : 'bg-amber-50',
+    },
+    {
+      title: 'P95 Latency',
+      value: `${Math.round(latency?.p95 || 0)}ms`,
+      icon: Clock,
+      iconColor: latency && latency.p95 > 2000 ? 'text-red-500' : 'text-green-500',
+      bgColor: latency && latency.p95 > 2000 ? 'bg-red-50' : 'bg-green-50',
+    },
+    {
+      title: 'Active Pipelines',
+      value: pipelineStats?.length || 0,
+      icon: RefreshCw,
+      iconColor: 'text-purple-500',
+      bgColor: 'bg-purple-50',
+    },
+  ]
+
+  const isLoading = loadingVolume || loadingError || loadingLatency || loadingPipelines || loadingActors
+
+  const handleRefresh = () => {
+    refetchVolume()
+    refetchError()
+    refetchLatency()
+    refetchPipelines()
+    refetchActors()
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900">Observability Dashboard</h1>
+          <p className="text-slate-500 mt-1">System health and performance metrics</p>
+        </div>
+        <div className="flex items-center gap-3">
+          <select
+            value={timeRange}
+            onChange={(e) => setTimeRange(e.target.value as any)}
+            className="px-3 py-2 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-navy focus:border-navy"
+          >
+            <option value="1h">Last Hour</option>
+            <option value="24h">Last 24 Hours</option>
+            <option value="7d">Last 7 Days</option>
+          </select>
+          <select
+            value={refreshInterval}
+            onChange={(e) => setRefreshInterval(parseInt(e.target.value))}
+            className="px-3 py-2 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-navy focus:border-navy"
+          >
+            <option value={10}>Refresh: 10s</option>
+            <option value={30}>Refresh: 30s</option>
+            <option value={60}>Refresh: 1m</option>
+          </select>
+          <Button variant="secondary" onClick={handleRefresh} className="text-sm">
+            Refresh Now
+          </Button>
+        </div>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {statsCards.map((card) => (
+          <div key={card.title} className="bg-white rounded-lg border border-slate-200 p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-slate-500">{card.title}</p>
+                <p className="text-2xl font-bold text-slate-900 mt-1">{card.value}</p>
+              </div>
+              <div className={`p-3 rounded-lg ${card.bgColor}`}>
+                <card.icon className={`h-6 w-6 ${card.iconColor}`} />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {isLoading && !eventVolume ? (
+        <div className="flex items-center justify-center h-64">
+          <LoadingSpinner className="w-8 h-8" />
+        </div>
+      ) : (
+        <>
+          {/* Charts Row 1 */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Event Volume Chart */}
+            <div className="bg-white rounded-lg border border-slate-200 p-6">
+              <h3 className="text-lg font-semibold text-slate-900 mb-4">Event Volume</h3>
+              <div className="h-64">
+                <ResponsiveContainer width="100%" height="100%">
+                  <LineChart data={eventVolume || []}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+                    <XAxis dataKey="bucket" tick={{ fontSize: 12 }} />
+                    <YAxis tick={{ fontSize: 12 }} />
+                    <Tooltip
+                      contentStyle={{
+                        backgroundColor: '#fff',
+                        border: '1px solid #e2e8f0',
+                        borderRadius: '6px',
+                      }}
+                    />
+                    <Line
+                      type="monotone"
+                      dataKey="count"
+                      stroke="#3b82f6"
+                      strokeWidth={2}
+                      dot={false}
+                    />
+                  </LineChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+
+            {/* Latency Percentiles */}
+            <div className="bg-white rounded-lg border border-slate-200 p-6">
+              <h3 className="text-lg font-semibold text-slate-900 mb-4">Latency Percentiles</h3>
+              <div className="h-64">
+                {latency ? (
+                  <div className="flex items-center justify-center h-full">
+                    <div className="grid grid-cols-3 gap-8">
+                      <div className="text-center">
+                        <div className="text-3xl font-bold text-blue-500">{Math.round(latency.p50)}ms</div>
+                        <div className="text-sm text-slate-500 mt-1">P50 (Median)</div>
+                      </div>
+                      <div className="text-center">
+                        <div className="text-3xl font-bold text-amber-500">{Math.round(latency.p90)}ms</div>
+                        <div className="text-sm text-slate-500 mt-1">P90</div>
+                      </div>
+                      <div className="text-center">
+                        <div className="text-3xl font-bold text-red-500">{Math.round(latency.p99)}ms</div>
+                        <div className="text-sm text-slate-500 mt-1">P99</div>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex items-center justify-center h-full text-slate-400">
+                    No latency data available
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Charts Row 2 */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Pipeline Health */}
+            <div className="bg-white rounded-lg border border-slate-200 p-6">
+              <h3 className="text-lg font-semibold text-slate-900 mb-4">Pipeline Health</h3>
+              <div className="h-64">
+                {pipelineChartData.length > 0 ? (
+                  <ResponsiveContainer width="100%" height="100%">
+                    <BarChart data={pipelineChartData}>
+                      <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+                      <XAxis dataKey="name" tick={{ fontSize: 12 }} />
+                      <YAxis tick={{ fontSize: 12 }} />
+                      <Tooltip
+                        contentStyle={{
+                          backgroundColor: '#fff',
+                          border: '1px solid #e2e8f0',
+                          borderRadius: '6px',
+                        }}
+                      />
+                      <Bar dataKey="success" fill="#10b981" />
+                      <Bar dataKey="failure" fill="#ef4444" />
+                    </BarChart>
+                  </ResponsiveContainer>
+                ) : (
+                  <div className="flex items-center justify-center h-full text-slate-400">
+                    No pipeline executions in this time range
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Top Actors */}
+            <div className="bg-white rounded-lg border border-slate-200 p-6">
+              <h3 className="text-lg font-semibold text-slate-900 mb-4">Top Actors</h3>
+              <div className="space-y-3">
+                {topActors && topActors.length > 0 ? (
+                  topActors.map((actor, index) => (
+                    <div key={actor.principal_id} className="flex items-center justify-between py-2">
+                      <div className="flex items-center gap-3">
+                        <div
+                          className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium"
+                          style={{ backgroundColor: COLORS[index % COLORS.length] + '20', color: COLORS[index % COLORS.length] }}
+                        >
+                          {index + 1}
+                        </div>
+                        <span className="text-sm font-medium text-slate-700">
+                          {actor.principal_id.slice(0, 8)}...
+                        </span>
+                      </div>
+                      <span className="text-sm text-slate-500">{actor.event_count} events</span>
+                    </div>
+                  ))
+                ) : (
+                  <div className="text-center text-slate-400 py-8">No activity data</div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Recent Alerts */}
+          <div className="bg-white rounded-lg border border-slate-200 p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-semibold text-slate-900">Recent Alerts</h3>
+              <Link
+                to="/spine-framework/admin/observability/alerts"
+                className="text-sm text-navy hover:underline flex items-center gap-1"
+              >
+                <Bell className="h-4 w-4" />
+                Manage Alerts
+              </Link>
+            </div>
+            <div className="space-y-2">
+              {recentAlerts && recentAlerts.length > 0 ? (
+                recentAlerts.map((alert) => (
+                  <div
+                    key={alert.id}
+                    className="flex items-center justify-between py-3 px-4 bg-red-50 rounded-lg border border-red-100"
+                  >
+                    <div className="flex items-center gap-3">
+                      <AlertTriangle className="h-5 w-5 text-red-500" />
+                      <div>
+                        <span className="font-medium text-slate-900">
+                          {alert.metric} threshold breached
+                        </span>
+                        <span className="text-sm text-slate-500 ml-2">
+                          Expected: {alert.threshold_value}, Got: {alert.actual_value?.toFixed(2) ?? 'N/A'}
+                        </span>
+                      </div>
+                    </div>
+                    <span className="text-sm text-slate-500">
+                      {formatDateTime(alert.created_at)}
+                    </span>
+                  </div>
+                ))
+              ) : (
+                <div className="text-center text-slate-400 py-8">No recent alerts</div>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,183 @@
+/**
+ * @module src/pages/admin/PipelineDetailPage
+ */
+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, Play, Pause, AlertCircle } from 'lucide-react'
+import { formatDateTime } from '../../lib/utils'
+
+interface Pipeline {
+  id: string
+  name: string
+  description?: string
+  status: 'draft' | 'active' | 'paused' | 'archived'
+  steps: Array<{ id: string; name: string; type: string; config: Record<string, any> }>
+  trigger_type: 'manual' | 'scheduled' | 'webhook' | 'event'
+  schedule?: string
+  is_active: boolean
+  last_run?: string
+  last_run_status?: 'success' | 'failed' | 'running'
+  run_count: number
+  created_at: string
+  updated_at: string
+}
+
+const STATUSES = [
+  { value: 'draft', label: 'Draft' },
+  { value: 'active', label: 'Active' },
+  { value: 'paused', label: 'Paused' },
+  { value: 'archived', label: 'Archived' }
+]
+
+const TRIGGER_TYPES = [
+  { value: 'manual', label: 'Manual' },
+  { value: 'scheduled', label: 'Scheduled' },
+  { value: 'webhook', label: 'Webhook' },
+  { value: 'event', label: 'Event' }
+]
+
+export function PipelineDetailPage() {
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const isCreateMode = !id || id === 'new'
+  const [pipeline, setPipeline] = useState<Pipeline | 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: '', status: 'draft' as const, trigger_type: 'manual' as const, schedule: '', is_active: true, steps: [] as any[] })
+
+  useEffect(() => {
+    if (isCreateMode) {
+      setLoading(false)
+      return
+    }
+    setLoading(true)
+    const fetchPipeline = async () => {
+      try {
+        const response = await apiFetch(`/api/pipelines?action=get&id=${id}`)
+        if (!response.ok) throw new Error('Failed to fetch pipeline')
+        const result = await response.json()
+        const data = result.data
+        setPipeline(data)
+        setFormData({
+          name: data.name, description: data.description || '', status: data.status, trigger_type: data.trigger_type,
+          schedule: data.schedule || '', is_active: data.is_active, steps: data.steps || []
+        })
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load pipeline')
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchPipeline()
+  }, [id, isCreateMode])
+
+  const handleSave = async () => {
+    try {
+      const url = isCreateMode ? '/api/pipelines?action=create' : `/api/pipelines?action=update&id=${id}`
+      const method = isCreateMode ? 'POST' : 'PATCH'
+      const response = await apiFetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) })
+      if (!response.ok) throw new Error('Failed to save')
+      if (isCreateMode) {
+        const result = await response.json()
+        navigate(`/spine-framework/admin/configs/pipelines/${result.data?.id || result.id}`)
+      } else setIsEditing(false)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save')
+    }
+  }
+
+  const toggleStatus = async () => {
+    if (!pipeline) return
+    const newStatus = pipeline.status === 'active' ? 'paused' : 'active'
+    try {
+      const response = await apiFetch(`/api/pipelines?action=update&id=${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: newStatus }) })
+      if (!response.ok) throw new Error('Failed to update status')
+      setPipeline({ ...pipeline, status: newStatus })
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update status')
+    }
+  }
+
+  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/pipelines') : navigate(-1)}><ArrowLeft className="h-5 w-5" /></Button>
+          <div>
+            <h1 className="text-2xl font-bold">{isCreateMode ? 'Create Pipeline' : pipeline?.name}</h1>
+            {pipeline && <Badge variant={pipeline.status === 'active' ? 'default' : pipeline.status === 'paused' ? 'secondary' : 'outline'}>{pipeline.status}</Badge>}
+          </div>
+        </div>
+        <div className="flex gap-2">
+          {!isCreateMode && pipeline?.status !== 'archived' && (
+            <Button variant="outline" onClick={toggleStatus}>{pipeline?.status === 'active' ? <><Pause className="h-4 w-4 mr-2" />Pause</> : <><Play className="h-4 w-4 mr-2" />Activate</>}</Button>
+          )}
+          {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">{pipeline?.name}</div>}</div>
+            <div className="space-y-2"><Label>Status</Label>{isEditing ? <Select value={formData.status} onValueChange={v => setFormData({...formData, status: v as any})}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{STATUSES.map(s => <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>)}</SelectContent></Select> : <Badge>{pipeline?.status}</Badge>}</div>
+            <div className="space-y-2"><Label>Trigger Type</Label>{isEditing ? <Select value={formData.trigger_type} onValueChange={v => setFormData({...formData, trigger_type: v as any})}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{TRIGGER_TYPES.map(t => <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>)}</SelectContent></Select> : <div className="text-sm">{pipeline?.trigger_type}</div>}</div>
+            {formData.trigger_type === 'scheduled' && <div className="space-y-2"><Label>Schedule (cron)</Label>{isEditing ? <Input value={formData.schedule} onChange={e => setFormData({...formData, schedule: e.target.value})} placeholder="0 0 * * *" /> : <div className="text-sm font-mono">{pipeline?.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">{pipeline?.is_active ? 'Yes' : 'No'}</div>}</div>
+          </div>
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium text-muted-foreground">Execution Info</h3>
+            {!isCreateMode && (
+              <>
+                <div className="flex justify-between"><span className="text-sm text-muted-foreground">Last Run</span><span className="text-sm">{pipeline?.last_run ? formatDateTime(pipeline.last_run) : '—'}</span></div>
+                <div className="flex justify-between"><span className="text-sm text-muted-foreground">Last Status</span><Badge variant={pipeline?.last_run_status === 'success' ? 'default' : pipeline?.last_run_status === 'failed' ? 'destructive' : 'outline'}>{pipeline?.last_run_status || '—'}</Badge></div>
+                <div className="flex justify-between"><span className="text-sm text-muted-foreground">Total Runs</span><span className="text-sm">{pipeline?.run_count || 0}</span></div>
+                <div className="flex justify-between"><span className="text-sm text-muted-foreground">Steps</span><span className="text-sm">{pipeline?.steps?.length || 0}</span></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">{pipeline?.description || '—'}</div>}</div>
+      </CardContent></Card>
+
+      {!isCreateMode && pipeline?.steps && (
+        <Card><CardHeader><CardTitle>Steps ({pipeline.steps.length})</CardTitle></CardHeader><CardContent>
+          <div className="space-y-2">
+            {pipeline.steps.map((step, idx) => (
+              <div key={step.id} className="flex items-center gap-4 p-3 bg-muted rounded">
+                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-medium">{idx + 1}</div>
+                <div className="flex-1"><div className="font-medium">{step.name}</div><div className="text-sm text-muted-foreground">{step.type}</div></div>
+              </div>
+            ))}
+          </div>
+        </CardContent></Card>
+      )}
+    </div>
+  )
+}