45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
import type { Agent } from '../lib/api'
|
|
|
|
const statusColors: Record<string, string> = {
|
|
idle: 'bg-gray-400',
|
|
working: 'bg-green-500',
|
|
blocked: 'bg-yellow-500',
|
|
error: 'bg-red-500',
|
|
offline: 'bg-gray-700',
|
|
}
|
|
|
|
const providerBadge: Record<string, string> = {
|
|
ollama: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
|
|
anthropic: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
|
|
}
|
|
|
|
export function AgentStatus({ agents }: { agents: Agent[] }) {
|
|
return (
|
|
<div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Agents</h2>
|
|
<span className="font-mono text-[10px] uppercase tracking-wider text-gray-400">
|
|
{agents.filter(a => a.status === 'idle' || a.status === 'working').length} active
|
|
</span>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{agents.map((agent) => (
|
|
<div key={agent.id} className="flex items-center justify-between p-2 rounded bg-gray-50 dark:bg-gray-750">
|
|
<div className="flex items-center gap-2">
|
|
<span className={`w-2 h-2 rounded-full ${statusColors[agent.status] ?? 'bg-gray-400'}`} />
|
|
<span className="font-medium text-sm text-gray-900 dark:text-gray-100">{agent.name}</span>
|
|
<span className="text-xs text-gray-500">{agent.role}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className={`text-xs px-1.5 py-0.5 rounded ${providerBadge[agent.model_provider] ?? 'bg-gray-100'}`}>
|
|
{agent.model_provider}
|
|
</span>
|
|
<span className="text-xs text-gray-400">{agent.status}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|