Detalle de ejecución.

<section class="ui-sample ui-service" data-run-detail="true"><header><strong>SOL-2026-00184</strong><span class="badge badge--ok">Completa</span></header><dl><div><dt>Inicio</dt><dd>17:16:04 CLT</dd></div><div><dt>Duración</dt><dd>4 min 18 s</dd></div><div><dt>Commit</dt><dd><code>849a584</code></dd></div><div><dt>Recibo</dt><dd><a href="#recibo">Ver recibo verificable</a></dd></div></dl></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-run-detail="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>SOL-2026-00184</strong><span class="badge badge--ok">Completa</span></header><dl class="grid gap-2"><div><dt>Inicio</dt><dd>17:16:04 CLT</dd></div><div><dt>Duración</dt><dd>4 min 18 s</dd></div><div><dt>Commit</dt><dd><code>849a584</code></dd></div><div><dt>Recibo</dt><dd><a class="underline underline-offset-4" href="#recibo">Ver recibo verificable</a></dd></div></dl></section>

export interface RunDetailItem {
  /** Nombre del dato (`<dt>`): inicio, duración, commit, recibo. */
  label: string;
  /** Valor del dato; si lleva `href`, el texto dice qué abre el enlace («Ver recibo verificable»). */
  value: string;
  /** Muestra el valor en `<code>`, para commits, digests o rutas que se copian tal cual. */
  monospace?: boolean;
  /** Convierte el valor en enlace, por ejemplo al recibo verificable de la ejecución. */
  href?: string;
}

/** Tono de la insignia de estado: `ok` completa, `warn` terminó con advertencias, `err` falló o se canceló, `neutral` en curso. */
export type RunDetailTone = "ok" | "warn" | "err" | "neutral";

export interface RunDetailProps {
  /** Identificador de la ejecución («SOL-2026-00184»). */
  runId?: string;
  /** Resultado visible de la ejecución («Completa», «Terminó con advertencias», «Falló»); va en una insignia y vacío lo oculta. */
  status?: string;
  /** Tono de la insignia; sin valor se deduce de `status` («Completa» → `ok`, «Terminó con advertencias» → `warn`, «Falló» → `err`) y si no lo reconoce es `neutral`. */
  statusTone?: RunDetailTone;
  /** Datos de la ejecución como pares etiqueta y valor. */
  items?: RunDetailItem[];
  className?: string;
}

const RUN_DETAIL_ITEMS: RunDetailItem[] = [
  { label: "Inicio", value: "17:16:04 CLT" },
  { label: "Duración", value: "4 min 18 s" },
  { label: "Commit", value: "849a584", monospace: true },
  { label: "Recibo", value: "Ver recibo verificable", href: "#recibo" },
];

const RUN_DETAIL_BADGE: Record<RunDetailTone, string> = {
  ok: "badge badge--ok",
  warn: "badge badge--warn",
  err: "badge badge--err",
  neutral: "badge",
};

const RUN_DETAIL_TONES: [string, RunDetailTone][] = [
  ["advertencia", "warn"],
  ["complet", "ok"],
  ["exitosa", "ok"],
  ["falló", "err"],
  ["error", "err"],
  ["cancelada", "err"],
];

function runDetailTone(status: string, tone?: RunDetailTone): RunDetailTone {
  const texto = status.toLowerCase();
  return tone ?? RUN_DETAIL_TONES.find(([clave]) => texto.includes(clave))?.[1] ?? "neutral";
}

/**
 * Ficha de una ejecución con su identificador, resultado, inicio, duración, commit y recibo; se usa en el detalle de un trabajo o pipeline ya ejecutado.
 *
 * El resultado va en texto dentro de una insignia con tono. Los valores que se copian tal cual llevan `monospace: true`; el recibo verificable lleva `href` y un texto que dice qué abre.
 *
 * @example <RunDetail runId="SOL-2026-00184" status="Completa" />
 * @example <RunDetail runId="SOL-2026-00185" status="Terminó con advertencias" items={[{ label: "Commit", value: "849a584", monospace: true }, { label: "Advertencias", value: "3 filas sin comuna" }, { label: "Recibo", value: "Ver recibo verificable", href: "/recibos/185" }]} />
 */
export function RunDetail({
  runId = "SOL-2026-00184",
  status = "Completa",
  statusTone,
  items = RUN_DETAIL_ITEMS,
  className,
}: RunDetailProps) {
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-run-detail>
      <header>
        <strong>{runId}</strong>
        {status ? <span className={RUN_DETAIL_BADGE[runDetailTone(status, statusTone)]}>{status}</span> : null}
      </header>
      {items.length ? (
        <dl>
          {items.map((item, i) => {
            const valor = item.monospace ? <code>{item.value}</code> : item.value;
            return (
              <div key={`${item.label}-${i}`}>
                <dt>{item.label}</dt>
                <dd>{item.href ? <a href={item.href}>{valor}</a> : valor}</dd>
              </div>
            );
          })}
        </dl>
      ) : null}
    </section>
  );
}