Todos los componentes (204)

Registro de actividad

IA · ActivityLog · .amset-eventlog

Qué es y cuándo usarlo

El registro de lo que está haciendo un agente: llamadas a herramientas, resultados, razonamiento y respuestas, una fila por evento y con su hora.

Cuándo usarlo

Para ver en directo qué hace un proceso largo: un agente, un despliegue, una importación.
Para repasar después qué pasó y en qué orden.

Cuándo no

Para un solo paso con su entrada y su resultado: es un ToolCall.
Para el historial de cambios de un registro de negocio: es un History.

Varias tareas en un registro: group en cada evento reparte el registro por secciones (la tarea a la que pertenecen): al cambiar de una a otra sale un título, y dos eventos iguales de secciones distintas no se juntan. renderText deja pintar cada fila a quien la usa (la herramienta en negrita, una ruta como enlace) sin perder el tipo para el lector. loading enseña unas filas de esqueleto, con el registro ocupado, mientras llega el historial.

Teclado: es una zona desplazable y se enfoca con Tab; con el foco dentro, las flechas, Re Pág y Av Pág la recorren. El botón «Ir a lo último» aparece cuando te has alejado del final.

Accesibilidad: es un role="log": el lector anuncia lo nuevo sin quitarle el foco. Cada fila dice su tipo con texto («Error de herramienta: …») además del color del punto, y un evento repetido dice cuántas veces. En vivo se marca como ocupado.

Aspecto fino: el color de cada tipo sale de --amset-eventlog-dot sobre cada fila; maxHeight fija cuánto crece antes de desplazarse.

Cómo se ve

Sistema: Tarea aceptada por la máquina alienware+0,0 s
Razonamiento: Pensando…se repite 2 veces+1,1 s
Herramienta: Read: src/pedidos.ts+1,4 s
Resultado: resultado: 214 líneas+1,5 s
Herramienta: Bash: npm test+2,0 s
Error de herramienta: error: 2 pruebas fallan+14,2 s
Respuesta: Dos pruebas fallan; las arreglo y vuelvo a pasarlas.+14,8 s

<ActivityLog
  events={eventos}
  label="Actividad de la tarea"
  live={enCurso}
  collapseRepeats
  maxHeight="20rem"
/>

Props

Se importa con import { ActivityLog } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`events`obligatoria	`readonly ActivityEvent[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`collapseRepeats`	`boolean`	Junta los eventos iguales y seguidos. Por defecto, si.
`empty`	`ReactNode`	Lo que sale sin eventos: un texto, o un nodo con su propia ilustracion.
`emptyIcon`	`ReactNode`	Un icono sobre el texto de «sin actividad»: una antena apagada, un reloj.
`endedAt`	`number`	Cuando acabo: el contador se para en lo que duro.
`label`	`string`	Que es: «Actividad de la tarea». Por defecto, «Actividad».
`live`	`boolean`	Sigue llegando: el final lleva un cursor y el registro se marca como ocupado.
`loading`	`boolean`	Se esta cargando el historial: unas filas de esqueleto y el registro, ocupado, en vez de «sin actividad».
`maxHeight`	`string`	Alto maximo antes de desplazarse dentro.
`renderText`	`(row: ActivityRow) => ReactNode`	Como se pinta el texto de una fila, si no basta con el texto: un enlace, un fragmento de codigo, la herramienta en negrita. La fila sigue llevando su punto, su tipo para el lector, el recuento y la hora.
`startedAt`	`number`	Cuando empezo la tarea (una marca de `Date.now()`): el registro enseña arriba cuanto lleva, y se actualiza en vivo hasta que se pasa `endedAt`.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-eventlog-dot`	`var(--amset-ink-3)`

Cómo se cambia

.amset-eventlog {
  --amset-eventlog-dot: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: