Lista de tareas.

<section class="ui-sample ui-ai" data-task-list="true"><header><strong>Plan de trabajo</strong><span>2 de 3</span></header><ol><li><span class="badge badge--ok">Completa</span> Revisar fuentes</li><li><span class="badge badge--ok">Completa</span> Contrastar cifras</li><li><span class="badge">En curso</span> Redactar síntesis</li></ol></section>

<section class="ui-sample ui-ai border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-task-list="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Plan de trabajo</strong><span>2 de 3</span></header><ol class="grid gap-2"><li><span class="badge badge--ok">Completa</span> Revisar fuentes</li><li><span class="badge badge--ok">Completa</span> Contrastar cifras</li><li><span class="badge">En curso</span> Redactar síntesis</li></ol></section>

export interface TaskListItem {
  /** Tarea, en infinitivo («Revisar fuentes»). */
  label: string;
  /** Estado de la tarea («Pendiente», «En curso», «Completa», «Bloqueada»); se muestra como etiqueta y vacío muestra sólo la tarea. */
  status?: string;
  /** Tono de la etiqueta de estado; por defecto se deduce del texto (completa: `ok`; bloqueada o en espera: `warn`; falló: `err`; pendiente, en curso u otro: `neutral`). */
  statusTone?: "ok" | "warn" | "err" | "neutral";
}

export interface TaskListProps {
  /** Nombre del plan («Plan de trabajo»). */
  title?: string;
  /** Avance del plan («2 de 3»); vacío lo oculta. */
  status?: string;
  /** Tareas en el orden en que se ejecutan, cada una con su estado; sin tareas no se muestra la lista. */
  items?: TaskListItem[];
  className?: string;
}

const TASK_LIST_ITEMS: TaskListItem[] = [
  { label: "Revisar fuentes", status: "Completa" },
  { label: "Contrastar cifras", status: "Completa" },
  { label: "Redactar síntesis", status: "En curso" },
];

const TASK_LIST_TONOS: [string, "ok" | "warn" | "err" | "neutral"][] = [
  ["complet", "ok"],
  ["bloquead", "warn"],
  ["en espera", "warn"],
  ["falló", "err"],
  ["fallid", "err"],
];

function claseEstado(status: string, tone?: "ok" | "warn" | "err" | "neutral") {
  const texto = status.toLowerCase();
  const tono = tone ?? TASK_LIST_TONOS.find(([clave]) => texto.startsWith(clave))?.[1] ?? "neutral";
  return tono === "neutral" ? "badge" : `badge badge--${tono}`;
}

/**
 * Plan de trabajo de un agente de IA con su avance y las tareas en orden, cada una con su estado; se usa para seguir qué hizo, qué hace y qué lo bloquea.
 *
 * Las tareas van en una lista ordenada: el orden es el de ejecución. El estado de cada tarea va en texto dentro de una etiqueta con tono (`badge`), no sólo en color.
 *
 * @example <TaskList title="Plan de publicación" status="1 de 2" items={[{ label: "Validar cifras", status: "Completa" }, { label: "Publicar informe", status: "Pendiente" }]} />
 * @example <TaskList status="2 de 3" items={[{ label: "Revisar fuentes", status: "Completa" }, { label: "Contrastar cifras", status: "Completa" }, { label: "Elegir período", status: "Bloqueada" }]} />
 */
export function TaskList({ title = "Plan de trabajo", status = "2 de 3", items = TASK_LIST_ITEMS, className }: TaskListProps) {
  return (
    <section className={["ui-ai", className].filter(Boolean).join(" ")} data-task-list>
      <header>
        <strong>{title}</strong>
        {status ? <span>{status}</span> : null}
      </header>
      {items.length ? (
        <ol>
          {items.map((item, i) => (
            <li key={`${item.label}-${i}`}>
              {item.status ? <><span className={claseEstado(item.status, item.statusTone)}>{item.status}</span>{` ${item.label}`}</> : item.label}
            </li>
          ))}
        </ol>
      ) : null}
    </section>
  );
}