1fc72d15d8
- Replace inline agent state badge and card colors with state-specific CSS classes across list, board, tree, and org chart views - Add reusable AgentEmptyState with create-agent CTA and wire it into all empty agent view modes - Polish agents controls and metrics presentation in AgentsView/AgentMetricsBar with corresponding stylesheet token updates - Extend dashboard tests for agent CSS classes, metrics bar behavior, list view rendering, and mobile view coverage - Add a patch changeset for @gsxdsm/fusion describing the agent view UX improvements
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { Activity, CheckCircle, ListTodo, Zap } from "lucide-react";
|
|
import type { AgentStats } from "../api";
|
|
|
|
interface AgentMetricsBarProps {
|
|
stats: AgentStats | null;
|
|
}
|
|
|
|
const METRIC_CARDS = [
|
|
{ icon: Activity, label: "Active Agents", valueKey: "activeCount", className: "agent-metric-card--active" },
|
|
{ icon: ListTodo, label: "Assigned Tasks", valueKey: "assignedTaskCount", className: "agent-metric-card--tasks" },
|
|
{ icon: CheckCircle, label: "Success Rate", valueKey: "successRate", className: "agent-metric-card--success" },
|
|
{ icon: Zap, label: "Total Runs", valueKey: "completedRuns", className: "agent-metric-card--runs" },
|
|
] as const;
|
|
|
|
export function AgentMetricsBar({ stats }: AgentMetricsBarProps) {
|
|
if (!stats) return null;
|
|
|
|
return (
|
|
<div className="agent-metrics-bar">
|
|
{METRIC_CARDS.map((card) => {
|
|
const value = card.valueKey === "successRate"
|
|
? `${Math.round(stats.successRate * 100)}%`
|
|
: stats[card.valueKey];
|
|
|
|
return (
|
|
<div key={card.label} className={`agent-metric-card ${card.className}`}>
|
|
<card.icon size={18} />
|
|
<div className="agent-metric-info">
|
|
<span className="agent-metric-value">{value}</span>
|
|
<span className="agent-metric-label">{card.label}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|