import { Badge } from "@/components/ui/badge"; import { HelpTip } from "@/components/ui/help-tip"; import { Clock, RefreshCw, Activity, AlertTriangle, Square, PowerOff, } from "lucide-react"; // Agent states as returned by backend orchestrator type AgentStateString = | "active" | "idle" | "starting" | "ready" | "running" | "waiting_long" | "paused" | "error" | "offline" | "stopped" | "terminated"; // Clear, distinct indicators: // active / running → green; offline → grey; stopped / paused → amber // (needs attention, not alarming); error → red. const stateColors: Record = { active: "bg-green-500", running: "bg-green-500", ready: "bg-blue-500", starting: "bg-yellow-500", idle: "bg-blue-400", stopped: "bg-amber-500", paused: "bg-amber-500", waiting_long: "bg-orange-500", offline: "bg-gray-500", terminated: "bg-gray-600", error: "bg-red-500", }; const stateIcons: Record = { active: , idle: , starting: , ready: , running: , waiting_long: , paused: , error: , offline: , stopped: , terminated: , }; const stateDescriptions: Record = { active: "Agent is actively working a task.", running: "Agent is running — currently executing.", ready: "Agent is ready and waiting for work.", starting: "Agent container is starting up.", idle: "Agent is idle — no task currently claimed.", waiting_long: "Agent has been waiting a long time; may need attention.", paused: "Agent is paused; can resume.", stopped: "Agent container is stopped; can be restarted.", terminated: "Agent container has been terminated.", offline: "Agent is offline.", error: "Agent hit an error state; needs attention.", }; interface AgentStateBadgeProps { state: AgentStateString | string; showIcon?: boolean; size?: "sm" | "md" | "lg"; } /** Plain-language explanation for an agent state. Reused by the shared badge * and by inline agent-state renderers. Empty for an unknown state. */ export function agentStateDescription(state: string): string { return stateDescriptions[state] ?? ""; } export function AgentStateBadge({ state, showIcon = true, size = "md", }: AgentStateBadgeProps) { const sizeClasses = { sm: "text-xs px-2 py-0.5", md: "text-sm px-2.5 py-0.5", lg: "text-lg px-3 py-1", }; const color = stateColors[state] || "bg-gray-400"; const icon = stateIcons[state] || ; return ( {showIcon && {icon}} {state.replace(/_/g, " ")} ); } export { stateColors, stateIcons };