chore: initial commit for Pretor v0.1.0-alpha
正式发布 Pretor 平台的首个 alpha 版本。本项目旨在构建一个基于分布式架构的多智能体协同工作流水线。 核心功能实现： 1. 建立基于 BaseIndividual 的动态插件加载机制。 2. 实现三类核心 worker_individual 子个体。 3. 集成 Ray 框架支持分布式集群调度。 4. 基于 PostgreSQL 的全量持久化存储方案。 5. 提供完整的 FastAPI 后端与 React 前端交互界面。
This commit is contained in:
@@ -0,0 +1,206 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { Terminal, Activity, RefreshCw, CheckCircle2, Circle, XCircle, Clock, Loader2 } from 'lucide-react';
|
||||
import apiClient from '../../api/client';
|
||||
import type { WorkflowDetail, WorkflowStep } from '../../types';
|
||||
|
||||
interface RightPanelProps {
|
||||
selectedWorkflow: string | null;
|
||||
}
|
||||
|
||||
function stepStatusIcon(status: string) {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return <CheckCircle2 size={14} className="text-green-500" />;
|
||||
case 'running':
|
||||
return <Loader2 size={14} className="text-blue-500 animate-spin" />;
|
||||
case 'failed':
|
||||
return <XCircle size={14} className="text-red-500" />;
|
||||
default:
|
||||
return <Circle size={14} className="text-slate-300" />;
|
||||
}
|
||||
}
|
||||
|
||||
export function RightPanel({ selectedWorkflow }: RightPanelProps) {
|
||||
const [detail, setDetail] = useState<WorkflowDetail | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [logs, setLogs] = useState<string[]>([]);
|
||||
const [sseConnected, setSseConnected] = useState(false);
|
||||
const eventSourceRef = useRef<EventSource | null>(null);
|
||||
|
||||
const fetchDetail = async (traceId: string) => {
|
||||
setLoading(true);
|
||||
setLogs([]);
|
||||
try {
|
||||
const response = await apiClient.get(`/api/v1/workflow/${traceId}`);
|
||||
setDetail(response.data);
|
||||
} catch {
|
||||
setDetail(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedWorkflow) {
|
||||
setDetail(null);
|
||||
setLogs([]);
|
||||
return;
|
||||
}
|
||||
|
||||
fetchDetail(selectedWorkflow);
|
||||
|
||||
const protocol = window.location.protocol;
|
||||
const host = window.location.host;
|
||||
const apiBase = import.meta.env.VITE_API_BASE_URL || `${protocol}//${host}`;
|
||||
const es = new EventSource(`${apiBase}/api/v1/workflow/sse/${selectedWorkflow}`);
|
||||
eventSourceRef.current = es;
|
||||
|
||||
es.onopen = () => {
|
||||
setSseConnected(true);
|
||||
};
|
||||
|
||||
es.onmessage = (event) => {
|
||||
setLogs(prev => [...prev, event.data]);
|
||||
};
|
||||
|
||||
es.onerror = () => {
|
||||
setSseConnected(false);
|
||||
};
|
||||
|
||||
const interval = setInterval(() => {
|
||||
fetchDetail(selectedWorkflow);
|
||||
}, 3000);
|
||||
|
||||
return () => {
|
||||
es.close();
|
||||
eventSourceRef.current = null;
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, [selectedWorkflow]);
|
||||
|
||||
const isActive = detail?.status === 'llm_working' || detail?.status === 'tool_working';
|
||||
|
||||
if (!selectedWorkflow) {
|
||||
return (
|
||||
<div className="w-80 bg-white border-l border-slate-200 flex flex-col z-0 justify-center items-center p-6 text-center">
|
||||
<Activity size={32} className="text-slate-300 mb-4" />
|
||||
<h3 className="text-sm font-semibold text-slate-600">No Workflow Selected</h3>
|
||||
<p className="text-xs text-slate-400 mt-2">Select a workflow from the left panel to view its details.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-80 bg-white border-l border-slate-200 flex flex-col z-0">
|
||||
<div className="h-14 border-b border-slate-100 flex items-center px-4 justify-between bg-slate-50/50">
|
||||
<h2 className="font-semibold text-slate-800 text-sm flex items-center">
|
||||
<Terminal size={16} className="mr-2 text-slate-500" />
|
||||
Workflow Detail
|
||||
</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`px-2 py-1 text-xs rounded-md font-medium border ${sseConnected ? 'bg-green-100 text-green-700 border-green-200' : 'bg-slate-100 text-slate-500 border-slate-200'}`}>
|
||||
{sseConnected ? 'Live' : '--'}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => selectedWorkflow && fetchDetail(selectedWorkflow)}
|
||||
className="p-1 text-slate-400 hover:text-blue-600 rounded transition-colors"
|
||||
title="Refresh"
|
||||
>
|
||||
<RefreshCw size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 p-4 overflow-y-auto">
|
||||
{loading && !detail ? (
|
||||
<div className="text-center text-slate-400 text-sm py-8">
|
||||
<Loader2 size={24} className="animate-spin mx-auto mb-2" />
|
||||
Loading...
|
||||
</div>
|
||||
) : !detail ? (
|
||||
<div className="text-center text-slate-400 text-sm py-8">Failed to load workflow details</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="mb-4">
|
||||
<h3 className="text-base font-bold text-slate-800">
|
||||
{detail.workflow_title || 'Workflow'}
|
||||
</h3>
|
||||
<p className="text-xs text-slate-500 font-mono mt-1">ID: {detail.event_id}</p>
|
||||
{detail.command && (
|
||||
<p className="text-xs text-slate-500 mt-1 truncate">Command: {detail.command}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
|
||||
detail.status === 'failed' ? 'bg-red-100 text-red-700' :
|
||||
isActive ? 'bg-blue-100 text-blue-700' :
|
||||
detail.status === 'waiting_llm_working' || detail.status === 'waiting_tool_working' ? 'bg-yellow-100 text-yellow-700' :
|
||||
'bg-green-100 text-green-700'
|
||||
}`}>
|
||||
{detail.status}
|
||||
</span>
|
||||
<span className="text-xs text-slate-400">
|
||||
Step {detail.current_step}/{detail.steps.length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
{detail.steps.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<h4 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">Steps</h4>
|
||||
<div className="space-y-1.5">
|
||||
{detail.steps.map((step: WorkflowStep) => (
|
||||
<div
|
||||
key={step.step}
|
||||
className={`flex items-center gap-2 px-2.5 py-1.5 rounded-md text-xs border ${
|
||||
step.step === detail.current_step && isActive
|
||||
? 'border-blue-200 bg-blue-50'
|
||||
: step.status === 'completed'
|
||||
? 'border-green-100 bg-green-50/50'
|
||||
: step.status === 'failed'
|
||||
? 'border-red-100 bg-red-50/50'
|
||||
: 'border-slate-100 bg-white'
|
||||
}`}
|
||||
>
|
||||
{stepStatusIcon(step.status)}
|
||||
<span className="font-medium text-slate-700 w-5 text-right">{step.step}</span>
|
||||
<span className="text-slate-600 truncate flex-1">{step.name}</span>
|
||||
<span className="text-slate-400 text-[10px]">{step.node}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{detail.steps.length === 0 && (
|
||||
<div className="text-center py-4">
|
||||
<Clock size={24} className="text-slate-300 mx-auto mb-2" />
|
||||
<p className="text-xs text-slate-400">Workflow is being generated...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* SSE Logs */}
|
||||
{logs.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">Live Logs</h4>
|
||||
<div className="relative border-l-2 border-slate-200 ml-3 pl-5 space-y-3">
|
||||
{logs.map((msg, idx) => (
|
||||
<div key={idx} className="relative">
|
||||
<div className={`absolute -left-[27px] top-1 w-3 h-3 rounded-full border-2 border-white shadow-sm ${idx === logs.length - 1 && sseConnected ? 'bg-blue-500 animate-pulse' : 'bg-green-500'}`} />
|
||||
<p className="text-[11px] font-mono text-slate-600 leading-relaxed break-all">{msg}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{logs.length === 0 && sseConnected && isActive && (
|
||||
<div className="text-xs text-slate-400 italic mt-2">Waiting for live events...</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user