Panel de agente.

<section class="ui-sample ui-ai" data-agent-panel="true"><header><strong>Agente de investigación</strong><span class="badge">En curso</span></header><section><h3>Tarea actual</h3><p>Contrastar cifras con INE</p></section><section><h3>Evidencia</h3><a href="#evidencia">3 fuentes · 1 primaria</a></section><footer><button class="btn btn--secondary" type="button">Detener</button><a class="btn btn--quiet" href="#registro">Abrir registro</a></footer></section>

<section class="ui-sample ui-ai border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-agent-panel="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Agente de investigación</strong><span class="badge">En curso</span></header><section class="grid gap-3"><h3>Tarea actual</h3><p>Contrastar cifras con INE</p></section><section class="grid gap-3"><h3>Evidencia</h3><a class="underline underline-offset-4" href="#evidencia">3 fuentes · 1 primaria</a></section><footer class="flex flex-wrap items-center justify-between gap-3"><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">Detener</button><a class="btn btn--quiet underline underline-offset-4" href="#registro">Abrir registro</a></footer></section>

import type { MouseEventHandler } from "react";

/** Tono de la insignia de estado del agente: `neutral` en curso o detenido, `warn` espera una decisión, `ok` terminado, `err` falló. */
export type AgentPanelTone = "ok" | "warn" | "err" | "neutral";

export interface AgentPanelProps {
  /** Nombre del agente («Agente de investigación»). */
  title?: string;
  /** Estado del agente («En curso», «Requiere decisión», «Detenido»); va en una insignia y vacío lo oculta. */
  status?: string;
  /** Tono de la insignia; sin valor se deduce de `status` («Requiere decisión», «Espera…» y «En pausa» → `warn`, «Terminado» y «Completado» → `ok`, «Falló» y «Error…» → `err`) y si no lo reconoce, como «En curso», es `neutral`. */
  statusTone?: AgentPanelTone;
  /** Título de la sección de la tarea. */
  taskTitle?: string;
  /** Lo que hace o espera el agente ahora, en infinitivo («Contrastar cifras con INE»); vacío oculta la sección. */
  task?: string;
  /** Título de la sección de evidencia. */
  evidenceTitle?: string;
  /** Resumen de las fuentes reunidas («3 fuentes · 1 primaria»); vacío oculta la sección. */
  evidenceLabel?: string;
  /** Destino de la lista de evidencia. */
  evidenceHref?: string;
  /** Texto del botón; según el estado, detener el agente o revisar la decisión pendiente. Vacío lo oculta. */
  actionLabel?: string;
  onAction?: MouseEventHandler<HTMLButtonElement>;
  /** Peso del botón: `secondary` para detener el agente, `primary` cuando el agente espera una decisión y el botón es lo siguiente que hay que hacer. */
  actionTone?: "primary" | "secondary";
  /** Texto del enlace al registro de la ejecución; sin él o sin `logHref` no se muestra. */
  logLabel?: string;
  logHref?: string;
  className?: string;
}

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

const AGENT_PANEL_TONES: [string, AgentPanelTone][] = [
  ["requiere decisión", "warn"],
  ["espera", "warn"],
  ["en pausa", "warn"],
  ["terminado", "ok"],
  ["completado", "ok"],
  ["falló", "err"],
  ["error", "err"],
];

function agentPanelTone(status: string, tone?: AgentPanelTone): AgentPanelTone {
  const texto = status.toLowerCase();
  return tone ?? AGENT_PANEL_TONES.find(([clave]) => texto.startsWith(clave))?.[1] ?? "neutral";
}

/**
 * Panel de seguimiento de un agente de IA con su estado, la tarea actual, la evidencia reunida, una acción y el enlace al registro; se usa junto a una conversación o en una vista de trabajo del agente.
 *
 * El estado va en texto dentro de una insignia con tono. Cuando el agente espera a una persona, pasa el estado en `status`, la acción en `actionLabel` («Revisar decisión») y `actionTone="primary"`.
 *
 * @example <AgentPanel task="Contrastar cifras con INE" evidenceHref="/evidencia" onAction={detener} logHref="/registro" />
 * @example <AgentPanel status="Requiere decisión" task="Elegir período comparable" actionLabel="Revisar decisión" actionTone="primary" onAction={revisar} />
 */
export function AgentPanel({
  title = "Agente de investigación",
  status = "En curso",
  statusTone,
  taskTitle = "Tarea actual",
  task = "Contrastar cifras con INE",
  evidenceTitle = "Evidencia",
  evidenceLabel = "3 fuentes · 1 primaria",
  evidenceHref = "#evidencia",
  actionLabel = "Detener",
  onAction,
  actionTone = "secondary",
  logLabel = "Abrir registro",
  logHref = "#registro",
  className,
}: AgentPanelProps) {
  const registro = logLabel && logHref ? <a className="btn btn--quiet" href={logHref}>{logLabel}</a> : null;
  return (
    <section className={["ui-ai", className].filter(Boolean).join(" ")} data-agent-panel>
      <header>
        <strong>{title}</strong>
        {status ? <span className={AGENT_PANEL_BADGE[agentPanelTone(status, statusTone)]}>{status}</span> : null}
      </header>
      {task ? (
        <section>
          <h3>{taskTitle}</h3>
          <p>{task}</p>
        </section>
      ) : null}
      {evidenceLabel ? (
        <section>
          <h3>{evidenceTitle}</h3>
          {evidenceHref ? <a href={evidenceHref}>{evidenceLabel}</a> : <p>{evidenceLabel}</p>}
        </section>
      ) : null}
      {actionLabel || registro ? (
        <footer>
          {actionLabel ? <button className={`btn btn--${actionTone}`} type="button" onClick={onAction}>{actionLabel}</button> : null}
          {registro}
        </footer>
      ) : null}
    </section>
  );
}