plan/7: Add active-agent count badge to AgentStatus panel

Adds a count badge next to the Agents section title showing the number
of agents currently in idle or working state (excludes offline).
Badge style matches existing PlanBoard and DirectorQueue badges:
font-mono text-[10px] uppercase tracking-wider text-gray-400.

Build verified clean (tsc + vite, 0 errors).
This commit is contained in:
2026-04-07 15:19:00 -05:00
parent 5f29db67f3
commit 0404f7aa31

View File

@@ -17,8 +17,11 @@ export function AgentStatus({ agents }: { agents: Agent[] }) {
return ( return (
<div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4"> <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"> <div className="flex items-center gap-2 mb-3">
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Agents</h2> <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Agents</h2>
</div> <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"> <div className="space-y-2">
{agents.map((agent) => ( {agents.map((agent) => (
<div key={agent.id} className="flex items-center justify-between p-2 rounded bg-gray-50 dark:bg-gray-750"> <div key={agent.id} className="flex items-center justify-between p-2 rounded bg-gray-50 dark:bg-gray-750">