Visor de logs.

<section class="ui-sample ui-service" data-log-viewer="true"><header><strong>Log de ejecución</strong><span>SOL-2026-00184</span></header><pre><code>17:16:04 INFO  lectura iniciada
17:16:06 INFO  842 filas válidas
17:16:08 INFO  recibo guardado</code></pre><a class="btn btn--secondary" href="#descargar">Descargar log completo</a></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-log-viewer="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Log de ejecución</strong><span>SOL-2026-00184</span></header><pre class="overflow-x-auto border border-slate-300 bg-slate-50 p-3"><code>17:16:04 INFO  lectura iniciada
17:16:06 INFO  842 filas válidas
17:16:08 INFO  recibo guardado</code></pre><a class="btn btn--secondary underline underline-offset-4" href="#descargar">Descargar log completo</a></section>

export interface LogViewerLine {
  /** Hora del evento («17:16:04»). */
  time: string;
  /** Nivel del evento; se alinea a cinco caracteres para que los mensajes queden en columna. */
  level: "DEBUG" | "INFO" | "WARN" | "ERROR" | (string & {});
  message: string;
}

export interface LogViewerProps {
  /** Nombre del log. */
  title?: string;
  /** Identificador de la ejecución a la que pertenece el log; vacío lo oculta. */
  runId?: string;
  /** Líneas del log en orden; un texto se muestra tal cual. Vacío oculta el bloque. */
  lines?: Array<LogViewerLine | string>;
  /** Destino del log completo; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace al log completo; vacío oculta el enlace. */
  linkLabel?: string;
  className?: string;
}

const LOG_VIEWER_LINES: LogViewerLine[] = [
  { time: "17:16:04", level: "INFO", message: "lectura iniciada" },
  { time: "17:16:06", level: "INFO", message: "842 filas válidas" },
  { time: "17:16:08", level: "INFO", message: "recibo guardado" },
];

function lineaDeLog(linea: LogViewerLine | string) {
  return typeof linea === "string" ? linea : `${linea.time} ${linea.level.padEnd(5)} ${linea.message}`;
}

/**
 * Extracto del log de una ejecución en texto monoespaciado, con enlace al log completo; se usa en el detalle de un trabajo para ver qué pasó sin abrir el servidor.
 *
 * Cada línea va en su propia línea dentro de `<pre>`. No muestres secretos, tokens ni datos personales en las líneas.
 *
 * @example <LogViewer runId="SOL-2026-00184" lines={[{ time: "17:16:06", level: "WARN", message: "fuente parcial" }]} href="/runs/184/log" />
 * @example <LogViewer lines={["17:16:04 INFO  lectura iniciada", "17:16:08 INFO  recibo guardado"]} />
 */
export function LogViewer({
  title = "Log de ejecución",
  runId = "SOL-2026-00184",
  lines = LOG_VIEWER_LINES,
  href = "#descargar",
  linkLabel = "Descargar log completo",
  className,
}: LogViewerProps) {
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-log-viewer>
      <header>
        <strong>{title}</strong>
        {runId ? <span>{runId}</span> : null}
      </header>
      {lines.length ? <pre><code>{lines.map(lineaDeLog).join("\n")}</code></pre> : null}
      {href && linkLabel ? <a className="btn btn--secondary" href={href}>{linkLabel}</a> : null}
    </section>
  );
}