import { cn } from "~/utils/cn";
import type { StatusState } from "~/lib/types";
import { TONE_FILL, type Tone } from "~/ui/tones";
const STATUS_STYLES: Record<string, { tone: Tone; pulse?: boolean; label: string }> = {
success: { tone: "success", label: "Passing" },
failure: { tone: "danger", label: "Failing" },
error: { tone: "danger", label: "Errored" },
pending: { tone: "warning", pulse: true, label: "Pending" },
in_progress: { tone: "warning", pulse: true, label: "Running" },
queued: { tone: "neutral", pulse: true, label: "Queued" },
cancelled: { tone: "neutral", label: "Cancelled" },
skipped: { tone: "neutral", label: "Skipped" },
};
export function StatusDot({ state, className }: { state: StatusState | string | null; className?: string }) {
if (!state) return null;
const style = STATUS_STYLES[state] ?? STATUS_STYLES.queued;
return (
<span
title={style.label}
className={cn(
"inline-block size-2.5 shrink-0 rounded-full",
TONE_FILL[style.tone],
style.pulse && "animate-pulse-dot",
className,
)}
>
<span className="sr-only">{style.label}</span>
</span>
);
}
export function runState(status: string, conclusion: string | null): string {
return status === "completed" ? (conclusion ?? "skipped") : status;
}