TradingAgents/frontend/components/AgentProgress.tsx

59 lines
1.9 KiB
TypeScript

"use client";
import { AgentStatusType } from "@/lib/types";
interface AgentStatus {
agent: string;
status: AgentStatusType;
team: string;
}
interface AgentProgressProps {
agentStatuses: Record<string, AgentStatusType>;
}
const TEAMS = {
"Analyst Team": ["Market Analyst", "Social Analyst", "News Analyst", "Fundamentals Analyst"],
"Research Team": ["Bull Researcher", "Bear Researcher", "Research Manager"],
"Trading Team": ["Trader"],
"Risk Management": ["Risky Analyst", "Neutral Analyst", "Safe Analyst"],
"Portfolio Management": ["Portfolio Manager"],
};
const STATUS_COLORS: Record<AgentStatusType, string> = {
pending: "bg-gray-200 text-gray-600",
in_progress: "bg-blue-500 text-white animate-pulse",
completed: "bg-green-500 text-white",
error: "bg-red-500 text-white",
};
export default function AgentProgress({ agentStatuses }: AgentProgressProps) {
return (
<div className="bg-white rounded-lg shadow p-6">
<h2 className="text-xl font-bold mb-4">Agent Progress</h2>
<div className="space-y-4">
{Object.entries(TEAMS).map(([teamName, agents]) => (
<div key={teamName} className="border-b pb-4 last:border-b-0">
<h3 className="font-semibold text-sm text-gray-700 mb-2">{teamName}</h3>
<div className="grid grid-cols-2 md:grid-cols-3 gap-2">
{agents.map((agent) => {
const status = agentStatuses[agent] || "pending";
return (
<div
key={agent}
className={`px-3 py-2 rounded text-sm text-center ${STATUS_COLORS[status]}`}
>
<div className="font-medium">{agent}</div>
<div className="text-xs mt-1 capitalize">{status.replace("_", " ")}</div>
</div>
);
})}
</div>
</div>
))}
</div>
</div>
);
}