brand-ui — AgentEvent

import { AgentEvent } from "@elabs-ai/components-ai";

Install

npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui AgentEvent component (from @elabs-ai/components-ai) to this project.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Look AgentEvent up before writing code: `npx -y @elabs-ai/components-cli docs AgentEvent` prints its real props, variants, what it pairs with and what to avoid.
3. If @elabs-ai/components-ai is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`.
4. Use it here: [the screen or file, and what it should show]
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

Avoid

Reaching for it in a console transcript — the console skin is TerminalEventLine, which reads the same promoted AgentEventPhase model.
Adding an eighth status for an event outcome — map onto AgentStep's closed Status instead; the rail owns the vocabulary.
Building a second timeline spine — an event is a step on the existing AgentTimeline rail, not a parallel structure.
Writing a second duration formatter — durations come from formatElapsed in @elabs-ai/components-ui.
Declaring a local check-result type — CheckResult and CheckSummary are shared with ChangeReview and imported, never redeclared.
Carrying pass/fail by tone alone — the status word is the channel that survives greyscale (1.4.1).

Works with

Used inside

AgentTimeline

Pairs with

AgentStep
Tool
TurnStatus
ChangeReview

Examples

5 live examples

Before And After Hooks

Check Summary Count

Blocked With Failing Check

Alongside AgentStep on one rail

API

`AgentEvent`

Prop	Type	Description
`label`required	`string`	The runtime event name, verbatim as the runtime emits it — e.g. `"user_prompt_submit"`, `"pre_tool_use"`, `"stop"`.
`phase`	`AgentEventPhase`	When this event fired relative to the action it gates. See `AgentEventPhase`.
`outcome`	`AgentEventOutcome`	The event's verdict. @default "ok"
`durationMs`	`number`	Wall-clock duration of the event, in milliseconds. Rendered with the shared `formatElapsed`.
`checks`	`CheckSummary \| CheckResult[]`	Gate checks the event ran: individual verdicts, or a count summary.
`icon`	`LucideIcon`	Optional leading glyph on the title row (Lucide). @default Webhook
`summary`	`ReactNode`	The business summary line under the name (`text-meta`), not JSON.
`hideBadge`	`boolean`	Drop the inline `StatusBadge` (the rail node still carries the status color). For quiet prose rails — e.g. the `ChainOfThought` alias — where a badge per step would shout.
`current`	`boolean`	`plain` variant only: this is the “now” step — accent node, `aria-current="step"`, and an sr-only “(current)” after the title.
`node`	`ReactNode`	Content for the node when the root is `nodeSize="badge"` — a step number, a glyph. Decorative (the disc is `aria-hidden`): put the step's number in the title too if it matters (“Step 1: …”). Ignored by a `dot` root.
`detail`	`ReactNode`	Rich block content under the title/description, indented with the rail — the slot composing consumers (e.g. `@elabs-ai/components-ai`'s `AgentStep`, #192) interleave per node. Block-level, so it must NOT ride the inline title slot (`children`).

Also accepts: Omit< AgentStepProps, "name" | "status" | "children" | "icon" | "timestamp" >

Theming

The tokens each state resolves to. Change the token and every theme follows.

State	Token
outcome	`mapped onto AgentStep's closed Status — ok reads complete, blocked reads denied, failed reads failed`
check	`a visible pass/fail WORD beside the glyph, so the verdict survives greyscale`