← All proposals

Agent Step

One row: an optional icon (status or custom), a label, quiet secondary text and optional expandable detail.

Net-new componentOpen in Storybook

proposals/AgentStep/decisions.md13 lines · View on GitHub

Decisions

  • Its own primitive, not a part of ChainOfThought. A single tool call or progress line can sit inline without a list, so the row is element-agnostic (a div) and ChainOfThought wraps it in an <li>. Not merged with ThinkingState: that one owns the shimmer, pulse and timer; this one owns status, secondary text and detail.
  • status is optional: done (check), active (monochrome Spinner in the secondary status color, not the AI gradient), pending (empty circle), error (critical diamond exclamation). Without status or iconName there is no icon, which is the tool-log look. Status text is visually hidden for screen readers and comes from labelStrings (translatable).
  • Configurable icon: iconName replaces the status icon (for example wrench). The active spinner still wins so work in progress stays visible; the status color and screen reader text still follow status. With iconName and no status the icon shows in the secondary color.
  • Tool calls are steps with detail, not another component. A step with detail becomes a details toggle with a right chevron.
  • Secondary text is a slot; <code> inside it takes the code font.
  • Uses the local Spinner and Icon wrapper; the port swaps in the real ones. Storybook: Proposals/Agent Step, tagged new-pattern.
  • Open: custom icon on a done step. The check is replaced, so completion shows only through color and hidden text. Keep a small check beside the custom icon?
  • Diff counts use pds-agent-step__added / __removed spans in the secondary text slot (success and critical foreground). Reasoning text is a variant of Chain of Thought, not a step type.
  • Expandable step affordance: the row is inline-flex (only as wide as its content) with the chevron right after the text, like the Chain of Thought summary, and the chevron darkens on hover. It was pushed to the far edge of the list, which read as decoration, not part of the click target. Chain of Thought's summary chevron got the same hover cue.
  • Detail text inherits the step's size (and line height); paragraphs inside detail have their PDS default size and margins reset, and code uses the code font. Before, a <p> in the detail rendered larger than its label.