Spaces:
Running
Running
File size: 7,208 Bytes
28886b8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 | const phaseIcons = {
Planning: '📋',
Execution: '⚙️',
Validation: '🧪',
Documentation: '📖',
Learning: '🧠',
};
const phaseColors = {
Planning: 'from-blue-500 to-indigo-500',
Execution: 'from-green-500 to-emerald-500',
Validation: 'from-yellow-500 to-orange-500',
Documentation: 'from-teal-500 to-cyan-500',
Learning: 'from-purple-500 to-violet-500',
};
export default function WorkflowTimeline({ simulation, currentPhase, isRunning }) {
const phases = [
{ name: 'Planning', description: 'Product Manager clarifies task, Architect designs system, Planner decomposes work', agents: ['PM', 'Architect', 'Planner'] },
{ name: 'Execution', description: 'Backend implements APIs, Frontend builds UI, DevOps prepares deployment', agents: ['Backend', 'Frontend', 'DevOps'] },
{ name: 'Validation', description: 'QA runs tests, Security scans vulnerabilities, Code Review validates quality', agents: ['QA', 'Security', 'Reviewer'] },
{ name: 'Documentation', description: 'Documentation Agent updates all materials, API docs, and usage guides', agents: ['Docs'] },
{ name: 'Learning', description: 'Knowledge Manager extracts rules and stores experiences for future tasks', agents: ['Knowledge'] },
];
return (
<div className="space-y-6">
{/* Workflow Overview */}
<div className="glass-card p-6">
<h2 className="text-lg font-bold text-gray-100 mb-2">Workflow Pipeline</h2>
<p className="text-sm text-gray-400 mb-6">Autonomous execution from planning to learning</p>
<div className="space-y-4">
{phases.map((phase, index) => {
const isActive = currentPhase === index;
const isDone = simulation ? index < simulation.phases?.length : currentPhase > index;
const isPending = currentPhase < index && !simulation;
return (
<div key={phase.name} className="relative">
{/* Connector Line */}
{index < phases.length - 1 && (
<div className={`absolute left-5 top-12 w-0.5 h-4 transition-all duration-500 ${
isDone || isActive ? 'bg-gradient-to-b from-indigo-500 to-purple-500' : 'bg-gray-800'
}`} />
)}
<div className={`flex gap-4 p-4 rounded-xl transition-all duration-300 ${
isActive ? 'bg-indigo-500/10 border border-indigo-500/30 shadow-lg shadow-indigo-500/10' :
isDone ? 'bg-green-500/5 border border-green-500/20' :
'bg-gray-900/40 border border-gray-800/30'
}`}>
{/* Phase Icon */}
<div className={`w-10 h-10 rounded-xl flex items-center justify-center text-lg flex-shrink-0 ${
isActive ? 'bg-indigo-500/20 animate-pulse' :
isDone ? 'bg-green-500/20' :
'bg-gray-800/50'
}`}>
{isDone ? '✅' : phaseIcons[phase.name]}
</div>
{/* Phase Content */}
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<h3 className={`text-sm font-bold ${
isActive ? 'text-indigo-400' :
isDone ? 'text-green-400' :
'text-gray-400'
}`}>
{phase.name}
</h3>
<span className={`text-xs px-2 py-0.5 rounded-full ${
isActive ? 'bg-indigo-500/20 text-indigo-300' :
isDone ? 'bg-green-500/20 text-green-300' :
'bg-gray-800 text-gray-500'
}`}>
Step {index + 1}
</span>
</div>
<p className="text-xs text-gray-500 mb-2">{phase.description}</p>
<div className="flex gap-1.5 flex-wrap">
{phase.agents.map(agent => (
<span key={agent} className="text-xs px-2 py-0.5 rounded-md bg-gray-800/50 text-gray-400">
{agent}
</span>
))}
</div>
</div>
{/* Status Indicator */}
<div className="flex-shrink-0">
{isActive && (
<div className="w-3 h-3 rounded-full bg-indigo-500 animate-pulse" />
)}
{isDone && (
<div className="w-3 h-3 rounded-full bg-green-500" />
)}
{isPending && (
<div className="w-3 h-3 rounded-full bg-gray-700" />
)}
</div>
</div>
</div>
);
})}
</div>
</div>
{/* Architecture Diagram */}
<div className="glass-card p-6">
<h2 className="text-lg font-bold text-gray-100 mb-4">System Architecture</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="bg-blue-500/5 border border-blue-500/20 rounded-xl p-4 text-center">
<div className="text-2xl mb-2">📡</div>
<h3 className="text-sm font-bold text-blue-400">Input Layer</h3>
<p className="text-xs text-gray-500 mt-1">Task reception & parsing</p>
</div>
<div className="bg-purple-500/5 border border-purple-500/20 rounded-xl p-4 text-center">
<div className="text-2xl mb-2">🧠</div>
<h3 className="text-sm font-bold text-purple-400">Processing Layer</h3>
<p className="text-xs text-gray-500 mt-1">Agent orchestration & execution</p>
</div>
<div className="bg-green-500/5 border border-green-500/20 rounded-xl p-4 text-center">
<div className="text-2xl mb-2">📦</div>
<h3 className="text-sm font-bold text-green-400">Output Layer</h3>
<p className="text-xs text-gray-500 mt-1">Validated deliverables</p>
</div>
</div>
<div className="mt-4 flex items-center justify-center gap-2">
<div className="h-0.5 w-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded" />
<div className="h-0.5 w-16 bg-gradient-to-r from-purple-500 to-green-500 rounded" />
</div>
<div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-3">
{[
{ icon: '🔄', label: 'Orchestrator', color: 'text-indigo-400' },
{ icon: '💾', label: 'Knowledge DB', color: 'text-violet-400' },
{ icon: '📊', label: 'Metrics', color: 'text-cyan-400' },
{ icon: '🔐', label: 'Security Gate', color: 'text-red-400' },
].map(item => (
<div key={item.label} className="bg-gray-800/30 rounded-lg p-3 text-center">
<div className="text-lg">{item.icon}</div>
<span className={`text-xs font-medium ${item.color}`}>{item.label}</span>
</div>
))}
</div>
</div>
</div>
);
} |