Skip to content
Course · Shipping AI interfaces

Agent steps users can follow

An agent that works invisibly is a mystery with a cursor. The step rail turns a run into a story — plan, act, verify — and the honest version labels its timings as what they are.

Intermediate1 min read (computed · recorded 3)updated 2026-09-14aiagentsprogresscourse

by Motif Editors

revised 2026-09-14First publication in the bank-4 AI-interface curriculum.

Part 9 of 15 in Shipping AI interfacesRetry, rate limits, and graceWhen answers need disclaimers

Key takeaways
  • A step rail is a story: each step has a name, a status and a duration, read in order.
  • Timings that are demo figures must say so — a fake millisecond is a fake fact.
  • Reduced motion completes the steps without stagger; the information survives without the animation.

A run is a story with steps

Agents are opaque by default: input goes in, something happens, output comes out. The step rail opens the middle — plan, act, verify — each step a named row with a status (queued, running, done) and a duration. Read in order, the rail is the story of what the agent did, which is the minimum a user needs before they can trust the result.

Timings are data

A step that claims 'ran in 42 ms' is making a measurement. If the figure is illustrative, the rail says 'demo figure' next to it — this site's tool-call card prints exactly that. And under reduced motion the steps complete without stagger: the sequence is the content, the stagger is the decoration.

Words this guide uses that the glossary defines: Reduced motion

Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.

The component this essay works with — mounted, not pictured
Agent Steps
  1. 1. Planqueued
  2. 2. Actqueued
  3. 3. Verifyqueued

Steps complete visually; nothing actually ran.