'/%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}
Workflow
AgentRun and DiffStat
One task handed to an agent: what it was asked, how long it worked, what it says it did, the change it made and the result, with actions to review it.
import { AgentRun, DiffStat } from '@alea/ui';
Examples
A task for an agent
Run it: the status is announced while it works, then it says what it did, the change and the draft it opened, with ways to review it.
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.
Configurations
Every value of every property, side by side. Numbers match the legend below.
- Status
status
Anatomy
The parts of the component and the class that styles each one.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
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
One task given to an agent: what it was asked, how long it worked, what it says it did, the change and the result, with actions to review it. Its status is announced as it changes.
| Prop | Type | Default | Description |
|---|---|---|---|
agentrequired | string | - | The agent's name. |
statusrequired | "running" | "done" | "failed" | - | running, done or failed. |
taskrequired | ReactNode | - | What it was asked to do. |
actions | ReactNode | - | Buttons at the end: review, revert. |
className | string | - | Extra class names for the root element. |
diff | { files: number; additions: number; deletions: number; } | - | The change it made. |
duration | string | - | How long it worked: "10 s", "2 min". |
model | string | - | The model or the tool it runs on. |
result | { title: string; state: string; href?: string; } | - | A pull request or result it opened: title and state. |
summary | ReactNode | - | What it says it did. |
DiffStat props
Lines added and removed, as +22 −10 and five blocks in proportion. The whole is read as one sentence.
| Prop | Type | Default | Description |
|---|---|---|---|
additionsrequired | number | - | Lines added. |
deletionsrequired | number | - | Lines removed. |
blocks | boolean | true | Shows five blocks in proportion. Default true. |
className | string | - | Extra class names for the root element. |
files | number | 1 | Files changed, said with the numbers. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
AgentRun
- Variants
statusrunningdonefailed- Motion
- hint
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.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- Data attributes
data-status=runningdata-status=donedata-status=failed
DiffStat
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-diffstat.alea-diffstat-add.alea-diffstat-del.alea-diffstat-blocks- Data attributes
data-kind=adddata-kind=del
Accessibility
- The run is an article named by the agent and the task; its status is a live region, so running, done and failed are announced.
- DiffStat reads as one sentence: 2 files changed, 22 additions, 10 deletions.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves to the result link and the actions |
Do and don't
Do
- Say what the agent was asked in the words of the person who asked.
- Always offer a way to review or undo what it did.
Don't
- Don't hide that work was done by an agent.
In Figma
AgentRun with Status (Running, Done, Failed) and DiffStat.