web_ui/frontend/src/components/execution/AgentStatusBadge.tsx

import { CheckCircle2, XCircle, Clock, Loader2, Circle } from "lucide-react";
import { cn } from "@/lib/utils";
import type { AgentExecutionStatus } from "@/types/execution";

const config: Record<
  AgentExecutionStatus,
  { icon: typeof Circle; color: string; label: string }
> = {
  idle: { icon: Circle, color: "text-muted-foreground", label: "Idle" },
  pending: { icon: Clock, color: "text-yellow-500", label: "Pending" },
  running: { icon: Loader2, color: "text-blue-500", label: "Running" },
  completed: { icon: CheckCircle2, color: "text-green-500", label: "Completed" },
  error: { icon: XCircle, color: "text-red-500", label: "Error" },
};

interface AgentStatusBadgeProps {
  status: AgentExecutionStatus;
  agentName?: string;
  className?: string;
}

export function AgentStatusBadge({ status, agentName, className }: AgentStatusBadgeProps) {
  const { icon: Icon, color, label } = config[status];

  return (
    <span className={cn("inline-flex items-center gap-1.5 text-xs", className)}>
      <Icon className={cn("h-3.5 w-3.5", color, status === "running" && "animate-spin")} />
      {agentName && <span className="font-medium">{agentName}</span>}
      <span className={cn("text-muted-foreground", color)}>{label}</span>
    </span>
  );
}