in 3-ai-native-e2e-sample/frontend/src/components/agents/agent-card.tsx [11:38]
export function AgentCard({ name, role, status, result }: AgentCardProps) {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
>
<Card>
<CardContent className="p-4">
<div className="flex items-center justify-between">
<h4 className="font-medium">{name}</h4>
<span className={`px-2 py-1 text-xs rounded-full ${
status === "processing" ? "bg-primary/10 text-primary" :
status === "complete" ? "bg-success/10 text-success" :
"bg-muted text-muted-foreground"
}`}>
{status}
</span>
</div>
<p className="text-sm text-muted-foreground mt-2">{role}</p>
{result && (
<p className="mt-2 text-sm border-t pt-2">{result}</p>
)}
</CardContent>
</Card>
</motion.div>
)
}