'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Flujo de trabajo
AgentRun y DiffStat
Una tarea encargada a un agente: qué se le pidió, cuánto trabajó, qué dice que hizo, el cambio que hizo y el resultado, con acciones para revisarlo.
import { AgentRun, DiffStat } from '@alea/ui';
Ejemplos
Una tarea para un agente
Ejecútala: el estado se anuncia mientras trabaja, luego dice qué hizo, el cambio y el borrador que abrió, con formas de revisarlo.
Fix the dimmed rows that never reset and open a draft
Removed the dimmed list; rows now read their state directly, so they reset when a ride ends.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Status
status
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent-strong…--alea-accent-subtle…--alea-border…--alea-status-danger…--alea-status-success…--alea-surface…--alea-surface-deep…--alea-surface-raised…--alea-text…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…
Radius
--alea-radius-lg…--alea-radius-sm…
Type
--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…
Props
AgentRun props
Una tarea encargada a un agente: qué se le pidió, cuánto trabajó, qué dice que hizo, el cambio y el resultado, con acciones para revisarlo. Su estado se anuncia cuando cambia.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
agentobligatoria | string | - | El nombre del agente. |
statusobligatoria | "running" | "done" | "failed" | - | running, done o failed. |
taskobligatoria | ReactNode | - | Lo que se le pidió hacer. |
actions | ReactNode | - | Botones al final: revisar, revertir. |
className | string | - | Clases extra para el elemento raíz. |
diff | { files: number; additions: number; deletions: number; } | - | El cambio que hizo. |
duration | string | - | Cuánto trabajó: "10 s", "2 min". |
model | string | - | El modelo o la herramienta en la que corre. |
result | { title: string; state: string; href?: string; } | - | Un pull request o resultado que abrió: título y estado. |
summary | ReactNode | - | Lo que dice que hizo. |
DiffStat props
Líneas agregadas y eliminadas, como +22 −10 y cinco bloques en proporción. El conjunto se lee como una frase.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
additionsobligatoria | number | - | Líneas añadidas. |
deletionsobligatoria | number | - | Líneas eliminadas. |
blocks | boolean | true | Muestra cinco bloques en proporción. Por defecto true. |
className | string | - | Clases extra para el elemento raíz. |
files | number | 1 | Archivos cambiados, dichos junto con los números. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
AgentRun
- Variantes
statusrunningdonefailed- Motion
- hint
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-agentrun.alea-agentrun-head.alea-activity-agent.alea-agentrun-model.alea-agentrun-status.alea-agentrun-task.alea-agentrun-summary.alea-agentrun-result.alea-agentrun-pr.alea-link.alea-agentrun-state.alea-agentrun-actions- Atributos data
data-status=runningdata-status=donedata-status=failed
DiffStat
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-diffstat.alea-diffstat-add.alea-diffstat-del.alea-diffstat-blocks- Atributos data
data-kind=adddata-kind=del
Accesibilidad
- La tarea es un article con el nombre del agente y la tarea; su estado es una región viva, así se anuncia en curso, listo y fallido.
- DiffStat se lee como una frase: 2 archivos cambiados, 22 líneas agregadas, 10 eliminadas.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Pasa al enlace del resultado y a las acciones |
Qué hacer y qué evitar
Hacer
- Di lo que se le pidió al agente con las palabras de quien lo pidió.
- Ofrece siempre una forma de revisar o deshacer lo que hizo.
Evitar
- No escondas que un trabajo lo hizo un agente.
En Figma
AgentRun con Status (Running, Done, Failed) y DiffStat.