TradingAgents/ui/components/AgentStatus.tsx

79 lines
3.8 KiB
TypeScript

"use client";
import Panel from "./ui/Panel";
const agents = [
{ icon: "\u{1F4CA}", label: "Market Analyst", detail: "RSI, MACD, Bollinger analysis complete", status: "Done", color: "cyan" as const },
{ icon: "\u{1F4CB}", label: "Fundamentals Analyst", detail: "Balance sheet & cash flow reviewed", status: "Done", color: "amber" as const },
{ icon: "\u{1F4F0}", label: "News Analyst", detail: "Global news & macro scan complete", status: "Done", color: "cyan" as const },
{ icon: "\u{1F4AC}", label: "Social Media Analyst", detail: "Sentiment scoring finalized", status: "Done", color: "purple" as const },
{ icon: "\u{1F402}", label: "Bull Researcher", detail: "Argument round 1 submitted", status: "Active", color: "green" as const },
{ icon: "\u{1F43B}", label: "Bear Researcher", detail: "Counter-argument pending", status: "Waiting", color: "amber" as const },
{ icon: "\u2696\uFE0F", label: "Trader", detail: "Awaiting debate conclusion", status: "Idle", color: "amber" as const },
{ icon: "\u{1F6E1}\uFE0F", label: "Risk Manager", detail: "Awaiting trade proposal", status: "Idle", color: "amber" as const },
];
const logs = [
{ time: "14:32:08", agent: "MKT", agentType: "analyst" as const, msg: "Technical indicators computed \u2014 MACD bullish cross detected" },
{ time: "14:32:15", agent: "FND", agentType: "analyst" as const, msg: "Balance sheet analysis complete \u2014 strong cash position" },
{ time: "14:32:22", agent: "NWS", agentType: "analyst" as const, msg: "Processed 47 news articles \u2014 net positive sentiment" },
{ time: "14:32:28", agent: "SOC", agentType: "analyst" as const, msg: "Social sentiment score: 0.62 \u2014 mixed retail signals" },
{ time: "14:32:35", agent: "BULL", agentType: "researcher" as const, msg: "Opening argument submitted \u2014 AI infrastructure thesis" },
{ time: "14:32:42", agent: "BEAR", agentType: "researcher" as const, msg: "Counter-argument: valuation stretched at 65x forward" },
];
const iconBgMap = {
cyan: "bg-cyan-dim",
amber: "bg-amber-dim",
green: "bg-green-dim",
purple: "bg-purple-dim",
};
const statusColorMap: Record<string, string> = {
Done: "text-green",
Active: "text-amber",
Waiting: "text-text-tertiary",
Idle: "text-text-tertiary",
};
const agentTypeColorMap = {
analyst: "text-cyan",
researcher: "text-amber",
trader: "text-green",
risk: "text-red",
};
export default function AgentStatus() {
return (
<Panel title="Agent Status" badge="8 Agents" badgeVariant="amber" delay={0.2}>
<div className="flex flex-col gap-2">
{agents.map((a) => (
<div key={a.label} className="flex items-center gap-2.5 p-2 rounded bg-bg-elevated">
<div className={`w-7 h-7 rounded-md grid place-items-center text-xs shrink-0 ${iconBgMap[a.color]}`}>
{a.icon}
</div>
<div className="flex-1 min-w-0">
<div className="text-[11px] text-text-primary font-medium">{a.label}</div>
<div className="text-[10px] text-text-tertiary mt-px">{a.detail}</div>
</div>
<div className={`text-[10px] font-medium ${statusColorMap[a.status]}`}>{a.status}</div>
</div>
))}
<div className="mt-2 max-h-[150px] overflow-y-auto flex flex-col">
{logs.map((l, i) => (
<div
key={i}
className="flex gap-2 py-1.5 border-b border-border-subtle text-[10px]"
>
<span className="text-text-tertiary shrink-0 tabular-nums">{l.time}</span>
<span className={`shrink-0 font-medium ${agentTypeColorMap[l.agentType]}`}>{l.agent}</span>
<span className="text-text-secondary overflow-hidden text-ellipsis whitespace-nowrap">{l.msg}</span>
</div>
))}
</div>
</div>
</Panel>
);
}