import { type ServerProviderStatus } from "@t3tools/contracts";import { memo } from "react";import { Alert, AlertDescription, AlertTitle } from "../ui/alert";import { CircleAlertIcon } from "lucide-react"; export const ProviderHealthBanner = memo(function ProviderHealthBanner({  status,}: {  status: ServerProviderStatus | null;}) {  if (!status || status.status === "ready") {    return null;  }   const providerLabel =    status.provider === "codex"      ? "Codex"      : status.provider === "claudeAgent"        ? "Claude"        : status.provider;  const defaultMessage =    status.status === "error"      ? `${providerLabel} provider is unavailable.`      : `${providerLabel} provider has limited availability.`;  const title = providerLabel === "Codex" ? "Codex provider status" : `${providerLabel} status`;   return (    <div className="pt-3 mx-auto max-w-3xl">      <Alert variant={status.status === "error" ? "error" : "warning"}>        <CircleAlertIcon />        <AlertTitle>{title}</AlertTitle>        <AlertDescription className="line-clamp-3" title={status.message ?? defaultMessage}>          {status.message ?? defaultMessage}        </AlertDescription>      </Alert>    </div>  );});