PDS proposals
← All proposals

Event log with agent

A recipe, not a component: a story and Usage page that compose existing proposals.

Extends a PDS componentOpen in Storybook

proposals/EventLogWithAgent/HANDOFF.md64 lines · View on GitHub

Handoff: Event log with agent (recipe)

What and why

When an agent joins an event log it needs to be clear where it started, what it did and where it handed back. This is a recipe, not a component: a story and Usage page that compose existing proposals. It adds no props, classes, tokens or CSS of its own, so there is nothing to port. The engineer ports the components it uses (below) and copies the composition from the story as documentation; what the screen owns is where the agent's region starts and stops, the divider wording, and which entries are agentic.

  • Figma / Jira: none. Source: designer screenshots (2026-10-16) of a deploy log with a "Zappy engaged" divider and an agent sandbox investigation.
  • Context: context.md

Exploration and decisions

  • Recipe, not a component. Where the agent starts and stops, the divider wording and which entries are agentic are screen decisions; a component would need props for each and break for a log with two runs or none. A TimelineGroup can be added later if the same region keeps being rebuilt.
  • Both ends use the same agentic LabeledDivider ("Zappy engaged", "Zappy finished"), with tone='agentic' (the gradient; the purple agentic-filled was removed 2026-10-21).
  • Dividers are size='xs'. The s default is too big next to the rows. The component default stays s; the recipe sets xs, so copy that prop.
  • Two stories: the agent still working (a ThinkingState is the live last entry, no closing divider) and finished (a done item and the closing divider).

Full list and reasons: decisions.md.

API

None. The composition (see the story for the exact props):

  • Timeline with hasRail holds the log.
  • Neutral TimelineItems before the agent joins.
  • An agentic LabeledDivider (tone='agentic', size='xs', prefixIcon='zappy') opens the region.
  • isAgentic TimelineItems, a ChainOfThought and a ThinkingState are the agent's entries.
  • A second agentic LabeledDivider closes it.

The rail joins neighbouring items and stops at a divider, a Chain of Thought or a Thinking State. Stories: AgentWorking, AgentFinished.

Tokens used

None of its own: no CSS, and npm run check:tokens -- --report EventLogWithAgent lists no tokens, classes, custom variables or raw values. The stories are story-only composition. See the handoffs of the components it uses.

Impact

From impact.md: nothing reaches existing components, no --pds-* token is redefined, and no other proposal imports or uses this recipe. It depends on the proposals below, and changes to them change what the stories show.

Reused vs net-new

Accessibility

  • Nothing of its own; keyboard and focus come from the components. The expandable TimelineItem and the Chain of Thought summary are native details/summary, so they work with Enter and Space and show the browser's focus ring.
  • The a11y panel has not been run on either story, and light and dark were not checked by eye in a session.

Decisions and open questions

For the engineer or designer to settle:

  • Divider styling on the component. Which agentic LabeledDivider styling the component keeps (gradient border or filled) is decided on that proposal. The recipe uses the filled one.
  • Does the region need a tint or bracket between the dividers, beyond isAgentic and the dividers? Not needed for this release.

Port notes

Nothing to generate or port. Port Timeline, TimelineItem, LabeledDivider, ChainOfThought and ThinkingState first, then keep the stories as documentation for the composition (they live under Recipes in Storybook, not in the component source).

Preview

npm run storybook, then Recipes / Event log with agent (stories Agent Working and Agent Finished). Figma: none.