74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { AgentSummary } from '@/lib/node-dashboard';
|
|
import { StatusBadge } from './StatusBadge';
|
|
|
|
interface AgentsCardProps {
|
|
agents: AgentSummary;
|
|
}
|
|
|
|
export function AgentsCard({ agents }: AgentsCardProps) {
|
|
const sortedKinds = Object.entries(agents.by_kind)
|
|
.sort((a, b) => b[1] - a[1])
|
|
.slice(0, 6);
|
|
|
|
return (
|
|
<div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
|
|
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
|
<span>👥</span> Agents
|
|
</h3>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-2 gap-4 mb-4">
|
|
<div className="p-3 bg-white/5 rounded-xl text-center">
|
|
<p className="text-3xl font-bold text-white">{agents.total}</p>
|
|
<p className="text-white/50 text-sm">Total</p>
|
|
</div>
|
|
<div className="p-3 bg-green-500/10 rounded-xl text-center">
|
|
<p className="text-3xl font-bold text-green-400">{agents.running}</p>
|
|
<p className="text-white/50 text-sm">Running</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* By Kind */}
|
|
{sortedKinds.length > 0 && (
|
|
<div className="mb-4">
|
|
<p className="text-white/50 text-xs uppercase tracking-wider mb-2">By Type</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{sortedKinds.map(([kind, count]) => (
|
|
<span
|
|
key={kind}
|
|
className="px-2 py-1 bg-white/10 text-white rounded-md text-sm"
|
|
>
|
|
{kind}: <span className="font-medium">{count}</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Top Agents */}
|
|
{agents.top.length > 0 && (
|
|
<div>
|
|
<p className="text-white/50 text-xs uppercase tracking-wider mb-2">Top Agents</p>
|
|
<div className="space-y-2">
|
|
{agents.top.map(agent => (
|
|
<div
|
|
key={agent.agent_id}
|
|
className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
|
|
>
|
|
<div>
|
|
<p className="text-white font-medium">{agent.display_name}</p>
|
|
<p className="text-white/50 text-xs">{agent.kind}</p>
|
|
</div>
|
|
<StatusBadge status={agent.status} size="sm" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|