All components (204)
Activity log
AI · ActivityLog · .amset-eventlog
What it is and when to use it
The log of what an agent is doing: tool calls, results, reasoning and replies, one row per event and with its time.
When to use it
- To watch live what a long process is doing: an agent, a deployment, an import.
- To review afterwards what happened and in what order.
When not to
- For a single step with its input and result: that is a
ToolCall. - For the change history of a business record: that is a
History.
Several tasks in one log: group on each event splits the log into sections (the task they belong to): when it changes from one to another a title appears, and two equal events from different sections are not merged. renderText lets whoever uses it paint each row (the tool in bold, a path as a link) without losing the type for the reader. loading shows a few skeleton rows, with the log busy, while the history arrives.
Keyboard: it is a scrollable area and gets focus with Tab; with focus inside, the arrows, Page Up and Page Down move through it. The "Jump to latest" button appears when you have moved away from the end.
Accessibility: it is a role="log": the reader announces what is new without taking focus away. Each row says its type in text ("Tool error: …") as well as with the colour of the dot, and a repeated event says how many times. Live, it is marked busy.
Fine-tuning: the colour of each type comes from --amset-eventlog-dot on each row; maxHeight sets how far it grows before scrolling.
What it looks like
- System: Task accepted by the alienware machine+0.0 s
- Reasoning: Thinking…repeated 2 times+1.1 s
- Tool: Read: src/orders.ts+1.4 s
- Result: result: 214 lines+1.5 s
- Tool: Bash: npm test+2.0 s
- Tool error: error: 2 tests fail+14.2 s
- Reply: Two tests fail; I will fix them and run them again.+14.8 s
<ActivityLog
events={eventos}
label="Task activity"
live={enCurso}
collapseRepeats
maxHeight="20rem"
/>Props
Import it with import { ActivityLog } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
eventsrequired | readonly ActivityEvent[] | — |
className | string | Merged with the library classes; it does not replace them. |
collapseRepeats | boolean | Merges equal, consecutive events. On by default. |
empty | ReactNode | What shows when there are no events: a text, or a node with its own illustration. |
emptyIcon | ReactNode | An icon above the "no activity" text: a switched-off antenna, a clock. |
endedAt | number | When it finished: the counter stops at how long it took. |
label | string | What it is: "Task activity". Defaults to "Activity". |
live | boolean | Still arriving: the end carries a cursor and the log is marked busy. |
loading | boolean | The history is loading: a few skeleton rows and the log marked busy, instead of "no activity". |
maxHeight | string | Maximum height before it scrolls inside. |
renderText | (row: ActivityRow) => ReactNode | How the text of a row is painted, when the text alone is not enough: a link, a code fragment, the tool in bold. The row keeps its dot, its type for the reader, the count and the time. |
startedAt | number | When the task began (a `Date.now()` stamp): the log shows at the top how long it has been running, updating live until `endedAt` is passed. |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
CSS variables
These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.
| Variable | Default |
|---|---|
--amset-eventlog-dot | var(--amset-ink-3) |
How to change it
.amset-eventlog {
--amset-eventlog-dot: ...;
}In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: