Error y reintento.

<section class="ui-sample ui-feedback ui-state ui-state--error" data-retry-error="true" role="alert"><svg class="ui-state__icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v6M12 17h.01"></path></svg><div><h3>No se completó la consulta</h3><p>La fuente tardó más de 30 segundos. No se ejecutó ninguna acción externa.</p><p><code>source_timeout</code></p><div class="ui-actions"><button class="btn btn--primary" type="button">Reintentar</button><button class="btn btn--secondary" type="button">Usar última copia</button></div></div></section>

<section class="ui-sample ui-feedback ui-state ui-state--error border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-retry-error="true" role="alert"><svg class="ui-state__icon h-auto w-full" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v6M12 17h.01"></path></svg><div><h3>No se completó la consulta</h3><p>La fuente tardó más de 30 segundos. No se ejecutó ninguna acción externa.</p><p><code>source_timeout</code></p><div class="ui-actions"><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Reintentar</button><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Usar última copia</button></div></div></section>

import type { MouseEventHandler } from "react";

export interface RetryErrorProps {
  /** Qué no se completó («No se completó la consulta»); vacío lo oculta. */
  title?: string;
  /** Código técnico del error, tal como lo entrega el sistema (`source_timeout`); vacío lo oculta. */
  code?: string;
  /** Causa del error y si se ejecutó alguna acción externa; vacío lo oculta. */
  description?: string;
  /** Texto del botón que repite la operación; vacío lo oculta. */
  retryLabel?: string;
  onRetry?: MouseEventHandler<HTMLButtonElement>;
  /** Texto del botón que usa un resultado alternativo, como la última copia guardada; vacío lo oculta. */
  fallbackLabel?: string;
  onFallback?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Error de una operación de un asistente o agente de IA, con su código, la causa, si hubo acciones externas y los botones para reintentar o usar un resultado alternativo; se muestra cuando una consulta o acción falla y se puede repetir.
 *
 * Usa `role="alert"` y la misma estructura que `ErrorState`: icono de error, título, causa, código técnico en su propia línea y la fila de acciones. `description` debe decir si se ejecutó o no alguna acción externa. Reintentar es la acción principal (`btn--primary`); el resultado alternativo, la secundaria.
 *
 * @example <RetryError onRetry={reintentar} onFallback={usarCopia} />
 * @example <RetryError code="source_timeout" description="Segundo intento fallido. No se ejecutó ninguna acción externa." onRetry={reintentar} fallbackLabel="" />
 */
export function RetryError({
  title = "No se completó la consulta",
  code = "source_timeout",
  description = "La fuente tardó más de 30 segundos. No se ejecutó ninguna acción externa.",
  retryLabel = "Reintentar",
  onRetry,
  fallbackLabel = "Usar última copia",
  onFallback,
  className,
}: RetryErrorProps) {
  return (
    <section className={["ui-feedback ui-state ui-state--error", className].filter(Boolean).join(" ")} data-retry-error role="alert">
      <svg className="ui-state__icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v6M12 17h.01"></path></svg>
      <div>
        {title ? <h3>{title}</h3> : null}
        {description ? <p>{description}</p> : null}
        {code ? <p><code>{code}</code></p> : null}
        {retryLabel || fallbackLabel ? (
          <div className="ui-actions">
            {retryLabel ? <button className="btn btn--primary" type="button" onClick={onRetry}>{retryLabel}</button> : null}
            {fallbackLabel ? <button className="btn btn--secondary" type="button" onClick={onFallback}>{fallbackLabel}</button> : null}
          </div>
        ) : null}
      </div>
    </section>
  );
}