8231fef06b
The Overview dropdown previously rendered "X active · Y running" where both X (stats.activeCount) and Y (activeAgents.length) counted agents whose state was either "active" or "running" — so an agent that was merely enabled but idle would still inflate the "running" tally. The label now counts each state distinctly so "running" only reflects agents that are mid-heartbeat. Adds AgentsOverviewBar.test.tsx to lock in the new contract. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import { ChevronDown, ChevronRight } from "lucide-react";
|
|
import { AgentMetricsBar } from "./AgentMetricsBar";
|
|
import { ActiveAgentsPanel } from "./ActiveAgentsPanel";
|
|
import type { Agent, AgentStats } from "../api";
|
|
import "./AgentsOverviewBar.css";
|
|
|
|
interface AgentsOverviewBarProps {
|
|
stats: AgentStats | null;
|
|
activeAgents: Agent[];
|
|
projectId?: string;
|
|
isOpen: boolean;
|
|
onToggle: () => void;
|
|
onSelectAgent?: (agentId: string) => void;
|
|
onOpenTaskLogs?: (taskId: string) => void;
|
|
}
|
|
|
|
export function AgentsOverviewBar({
|
|
stats,
|
|
activeAgents,
|
|
projectId,
|
|
isOpen,
|
|
onToggle,
|
|
onSelectAgent,
|
|
onOpenTaskLogs,
|
|
}: AgentsOverviewBarProps) {
|
|
return (
|
|
<section className="agents-overview-bar" aria-label="Agents overview">
|
|
<button
|
|
type="button"
|
|
className="agents-overview-bar__toggle"
|
|
aria-expanded={isOpen}
|
|
onClick={onToggle}
|
|
>
|
|
<span className="agents-overview-bar__title-wrap">
|
|
{isOpen ? <ChevronDown size={16} aria-hidden="true" /> : <ChevronRight size={16} aria-hidden="true" />}
|
|
<span className="agents-overview-bar__title">Overview</span>
|
|
</span>
|
|
<span className="agents-overview-bar__meta text-secondary">
|
|
{activeAgents.filter((a) => a.state === "active").length} active · {activeAgents.filter((a) => a.state === "running").length} running
|
|
</span>
|
|
</button>
|
|
{isOpen ? (
|
|
<div className="agents-overview-bar__content">
|
|
<AgentMetricsBar stats={stats} className="agents-overview-bar__metrics" />
|
|
<ActiveAgentsPanel
|
|
agents={activeAgents}
|
|
projectId={projectId}
|
|
onAgentSelect={onSelectAgent}
|
|
onOpenTaskLogs={onOpenTaskLogs}
|
|
className="agents-overview-bar__active-panel"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
);
|
|
}
|