Event log with agent

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

import * as EventLogStories from './EventLogWithAgent.stories';

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

<Title />

## Purpose

Shows an agent joining an event log: where it started, what it did and where it handed back.

## Usage

This is a recipe, not a component. It composes Timeline, Timeline Item, Labeled Divider, Chain of Thought and Thinking State.

- Put the whole log in one `Timeline` with `hasRail`.
- Open the agent's region with an agentic Labeled Divider ("Zappy engaged") and close it with a second one when the agent hands back. Both use `tone='agentic'` (the gradient) and `size='xs'`, so they sit well beside the rows; the component default size is `s`, so set `xs` when you copy this.
- Mark the agent's own entries `isAgentic`. A Chain of Thought and a Thinking State sit in the list as they are.
- While the agent is working, end the log with a Thinking State. When it finishes, replace it with a done item and add the closing divider.
- The rail joins neighbouring items and stops at a divider, a Chain of Thought or a Thinking State.

## Implementation

The stories show the agent working and finished.

<hr />

<Canvas of={EventLogStories.AgentWorking} />

<hr />

<Canvas of={EventLogStories.AgentFinished} />