'use client' import { useState, useEffect, useCallback } from 'react' import { useTranslations } from 'next-intl' import { Button } from '@/components/ui/button' interface WorkflowTemplate { id: number name: string model: string } interface PipelineStep { template_id: number template_name?: string on_failure: 'stop' | 'continue' } interface Pipeline { id: number name: string description: string | null steps: PipelineStep[] use_count: number last_used_at: number | null runs: { total: number; completed: number; failed: number; running: number } } interface RunStepState { step_index: number template_id: number template_name: string status: 'pending' | 'running' | 'completed' | 'failed' | 'skipped' spawn_id: string | null started_at: number | null completed_at: number | null error: string | null } interface PipelineRun { id: number pipeline_id: number pipeline_name?: string status: string current_step: number steps_snapshot: RunStepState[] started_at: number | null completed_at: number | null triggered_by: string created_at: number } export function PipelineTab() { const t = useTranslations('pipeline') const [templates, setTemplates] = useState([]) const [pipelines, setPipelines] = useState([]) const [runs, setRuns] = useState([]) // Form state const [formMode, setFormMode] = useState<'hidden' | 'create' | 'edit'>('hidden') const [editingId, setEditingId] = useState(null) const [formName, setFormName] = useState('') const [formDesc, setFormDesc] = useState('') const [formSteps, setFormSteps] = useState([]) // UI state const [expandedId, setExpandedId] = useState(null) const [spawning, setSpawning] = useState(null) const [result, setResult] = useState<{ ok: boolean; text: string } | null>(null) const fetchData = useCallback(async () => { const [tRes, pRes, rRes] = await Promise.all([ fetch('/api/workflows').then(r => r.json()).catch(() => ({ templates: [] })), fetch('/api/pipelines').then(r => r.json()).catch(() => ({ pipelines: [] })), fetch('/api/pipelines/run?limit=10').then(r => r.json()).catch(() => ({ runs: [] })), ]) setTemplates(tRes.templates || []) setPipelines(pRes.pipelines || []) setRuns(rRes.runs || []) }, []) useEffect(() => { fetchData() }, [fetchData]) // Clear result after 3s useEffect(() => { if (!result) return const timer = setTimeout(() => setResult(null), 3000) return () => clearTimeout(timer) }, [result]) const closeForm = () => { setFormMode('hidden') setEditingId(null) setFormName('') setFormDesc('') setFormSteps([]) } const addStep = (templateId: number) => { const t = templates.find(t => t.id === templateId) if (!t) return setFormSteps(s => [...s, { template_id: templateId, template_name: t.name, on_failure: 'stop' }]) } const removeStep = (index: number) => { setFormSteps(s => s.filter((_, i) => i !== index)) } const moveStep = (index: number, dir: -1 | 1) => { setFormSteps(s => { const arr = [...s] const target = index + dir if (target < 0 || target >= arr.length) return arr ;[arr[index], arr[target]] = [arr[target], arr[index]] return arr }) } const savePipeline = async () => { if (!formName || formSteps.length < 2) return try { const payload = { ...(formMode === 'edit' ? { id: editingId } : {}), name: formName, description: formDesc || null, steps: formSteps.map(s => ({ template_id: s.template_id, on_failure: s.on_failure })), } const res = await fetch('/api/pipelines', { method: formMode === 'edit' ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), }) if (res.ok) { closeForm() fetchData() setResult({ ok: true, text: formMode === 'edit' ? 'Pipeline updated' : 'Pipeline created' }) } else { const data = await res.json() setResult({ ok: false, text: data.error || 'Failed' }) } } catch { setResult({ ok: false, text: 'Network error' }) } } const startEdit = (p: Pipeline) => { setFormMode('edit') setEditingId(p.id) setFormName(p.name) setFormDesc(p.description || '') setFormSteps(p.steps) } const deletePipeline = async (id: number) => { await fetch(`/api/pipelines?id=${id}`, { method: 'DELETE' }) if (expandedId === id) setExpandedId(null) fetchData() } const runPipeline = async (id: number) => { setSpawning(id) try { const res = await fetch('/api/pipelines/run', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'start', pipeline_id: id }), }) const data = await res.json() if (res.ok) { setResult({ ok: true, text: `Pipeline started (run #${data.run?.id})` }) fetchData() } else { setResult({ ok: false, text: data.error || 'Failed to start' }) } } catch { setResult({ ok: false, text: 'Network error' }) } finally { setSpawning(null) } } const advanceRun = async (runId: number, success: boolean) => { try { await fetch('/api/pipelines/run', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'advance', run_id: runId, success }), }) fetchData() } catch { /* ignore */ } } const cancelRun = async (runId: number) => { try { await fetch('/api/pipelines/run', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'cancel', run_id: runId }), }) fetchData() } catch { /* ignore */ } } // Active runs (running pipelines shown at top) const activeRuns = runs.filter(r => r.status === 'running') return (

{/* Result message */} {result && (

{result.text}

)} {/* Active runs banner */} {activeRuns.length > 0 && (

{activeRuns.map(run => ( ))}

)} {/* Header */}

{t('pipelineCount', { count: pipelines.length })}

{/* Create/Edit form */} {formMode !== 'hidden' && (

{formMode === 'edit' ? t('editPipeline') : t('newPipeline')} setFormName(e.target.value)} placeholder={t('pipelineNamePlaceholder')} className="w-full h-8 px-2 rounded-md bg-secondary border border-border text-sm text-foreground" /> setFormDesc(e.target.value)} placeholder={t('descriptionPlaceholder')} className="w-full h-8 px-2 rounded-md bg-secondary border border-border text-sm text-foreground" /> {/* Step builder */}

Steps ({formSteps.length}) {formSteps.map((step, i) => (

{i + 1} {step.template_name || `Template #${step.template_id}`}

))} {/* Add step dropdown */}

)} {/* Pipeline list */} {pipelines.length === 0 && formMode === 'hidden' ? (

{t('noPipelines')}

{t('noPipelinesHint')}

) : (

{pipelines.map(p => (

{/* Expanded: pipeline visualization + recent runs */} {expandedId === p.id && (

{/* Full pipeline visualization */} {p.description &&

{p.description}

} {/* Recent runs for this pipeline */}

Runs: {p.runs.total} total, {p.runs.completed} completed, {p.runs.failed} failed {runs.filter(r => r.pipeline_id === p.id).slice(0, 3).map(run => (

Run #{run.id}

{run.status === 'running' && (

)}

))}

)}

))}

)}

) } /** Full step visualization with boxes and arrows */ function PipelineViz({ steps }: { steps: PipelineStep[] }) { return (

{steps.map((s, i) => (

{s.template_name || `Step ${i + 1}`}

{s.on_failure === 'continue' && ( continue on fail )}

{i < steps.length - 1 && ( )}

))}

) } /** Run steps visualization with colored status dots */ function RunStepsViz({ steps }: { steps: RunStepState[] }) { return (

{steps.map((s, i) => (

{s.template_name}

{i < steps.length - 1 && ( )}

))}

) } function RunStatusBadge({ status }: { status: string }) { const styles: Record = { running: 'bg-amber-500/20 text-amber-400', completed: 'bg-green-500/20 text-green-400', failed: 'bg-red-500/20 text-red-400', cancelled: 'bg-gray-500/20 text-gray-400', pending: 'bg-blue-500/20 text-blue-400', } return ( {status} ) } /** Active run card shown at top of pipeline tab */ function ActiveRunCard({ run, onAdvance, onCancel }: { run: PipelineRun onAdvance: (id: number, success: boolean) => void onCancel: (id: number) => void }) { return (

{run.pipeline_name || `Pipeline #${run.pipeline_id}`} — Run #{run.id}

Step {run.current_step + 1}/{run.steps_snapshot.length}

) }