Event Log

import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';

import * as EventLogItemStories from './EventLogItem.stories';

<Meta of={EventLogItemStories} name='Usage' />

<Title />

## Purpose

One line in a log or an agent's work: an optional status icon, a label, quiet secondary text, a time and optional detail that opens.

## TL;DR: Chain of Thought, Event Log or Timeline?

- **Chain of Thought:** an agent's reasoning under a reply, behind a summary line ("Thought for 17s") that opens on demand. No line, no rail.
- **Event Log:** events that happened or are happening, one line each (status icon, label, time). Always open, and the main content of a screen: a deploy history, an event log, an agent's run. Optional rail between the icons.
- **Timeline:** steps people read in order, often still ahead of them, with a heading and a paragraph each on a card. One line runs down the whole list: the stages of an application process.

Quick test:

1. Do the steps sit under a reply and need to stay out of the way? **Chain of Thought.**
2. Otherwise, does each entry have a status icon or a time at the end of the row? **Event Log.**
3. Otherwise, does each have a heading and a paragraph? **Timeline.**

A Chain of Thought is built from an Event Log and uses the same rows, and it can sit inside an Event Log as one entry in a log. Do not mix Event Log Items and Timeline in one list.

## Usage

For steps people read in order, with a heading and a paragraph each, use Timeline instead; the Event Log page compares them.

Use it to show an event or what an agent did or is doing, for example "Deployed to Dev", "Updated the homepage hero", "Checking site performance" or a tool call whose input and output can be opened.

- Use it inside an Event Log or a Chain of Thought list, or alone inline in a message.
- Keep the label short and in the user's language; put the quiet detail (a path, a count, a duration) in the secondary text.
- Content under the step is a slot (`children`), always visible; what goes in it is up to the screen (a log block, file tags, a table). Use `detail` for content that starts collapsed.
- Set `isAgentic` for the agent's own items; they take the agent color instead of the neutral grey.
- Pass `time` already formatted (and translated); it sits at the end of the row.
- It renders a `div`, so it can sit in a list or stand alone.

## Implementation

See the table below for the available props. The other stories show every variant and state.

<hr />

<Canvas of={EventLogItemStories.Default} />
<Controls of={EventLogItemStories.Default} />

<hr />

<Canvas of={EventLogItemStories.Slot} />