triggershell/src/components/runs/run-status-badge.tsx

import { Badge } from "@/components/ui/badge";
import type { RunStatus } from "@/lib/db/schema";
import { cn } from "@/lib/utils";

const styles: Record<RunStatus, string> = {
  queued: "bg-status-queued/12 text-status-queued",
  running: "bg-status-running/15 text-status-running",
  succeeded: "bg-status-succeeded/12 text-status-succeeded",
  failed: "bg-status-failed/12 text-status-failed",
  cancelled: "bg-status-cancelled/12 text-status-cancelled",
  timed_out: "bg-status-warn/12 text-status-warn",
  interrupted: "bg-status-warn/12 text-status-warn",
};

export const runStatusLabels: Record<RunStatus, string> = {
  queued: "Queued",
  running: "Running",
  succeeded: "Succeeded",
  failed: "Failed",
  cancelled: "Cancelled",
  timed_out: "Timed out",
  interrupted: "Interrupted",
};

export function RunStatusBadge({ status }: { status: RunStatus }) {
  return (
    <Badge
      className={cn(
        "gap-1.5 border-transparent font-mono text-[0.7rem] font-medium tracking-wide uppercase",
        styles[status],
      )}
      variant="outline"
    >
      <span
        className={cn(
          "size-1.5 shrink-0 rounded-full bg-current",
          status === "running" && "animate-pulse",
        )}
      />
      {runStatusLabels[status]}
    </Badge>
  );
}