Estado del agente.

<p class="ui-sample ui-ai" data-agent-status="true" role="status"><strong>Agente de investigación</strong> · revisa la tercera fuente · <time>18:21 CLT</time></p>

<p class="ui-sample ui-ai border border-slate-300 bg-white p-4 text-slate-950" data-agent-status="true" role="status"><strong>Agente de investigación</strong> · revisa la tercera fuente · <time>18:21 CLT</time></p>

export interface AgentStatusProps {
  /** Nombre del agente («Agente de investigación»); vacío lo oculta. */
  title?: string;
  /** Qué hace o qué espera el agente, en presente («revisa la tercera fuente»); vacío lo oculta. */
  status?: string;
  /** Hora visible del último cambio («18:21 CLT»); vacío la oculta. */
  time?: string;
  /** Fecha y hora en ISO 8601 para el atributo `dateTime` de `<time>`; vacía omite el atributo. */
  dateTime?: string;
  className?: string;
}

/**
 * Línea de estado de un agente de IA con su nombre, lo que hace o espera y la hora del último cambio; se usa junto a una conversación o un plan en curso.
 *
 * Tiene `role="status"`: los lectores de pantalla anuncian cada cambio de texto. Las partes vacías se omiten junto con su separador « · ».
 *
 * @example <AgentStatus title="Agente de investigación" status="revisa la tercera fuente" time="18:21 CLT" />
 * @example <AgentStatus status="espera una decisión sobre el período" time="18:21 CLT" dateTime="2026-08-25T18:21:00-04:00" />
 */
export function AgentStatus({
  title = "Agente de investigación",
  status = "revisa la tercera fuente",
  time = "18:21 CLT",
  dateTime,
  className,
}: AgentStatusProps) {
  return (
    <p className={["ui-ai", className].filter(Boolean).join(" ")} data-agent-status role="status">
      {title ? <strong>{title}</strong> : null}
      {status ? `${title ? " · " : ""}${status}` : null}
      {time ? <>{title || status ? " · " : null}<time dateTime={dateTime || undefined}>{time}</time></> : null}
    </p>
  );
}