Design Atlas
한국어
✧ AI interface patterns

Agent status

에이전트 상태 목록

A vertical list showing each step of a multi-step agent task as done, in progress, or pending.

Also known as: Step listTask progress listPlan-and-execute UI
···
html
<ul class="steps" id="steps">
  <li data-s="done"><i class="ic"></i><span>계획 수립</span></li>
  <li data-s="active"><i class="ic"></i><span>자료 검색</span></li>
  <li data-s="pending"><i class="ic"></i><span>내용 분석</span></li>
  <li data-s="pending"><i class="ic"></i><span>초안 작성</span></li>
</ul>
css
.steps{list-style:none;margin:0;padding:0;width:min(220px,90%);display:grid;gap:2px}
.steps li{display:flex;align-items:center;gap:10px;padding:7px 2px;font-size:12px;color:var(--muted);position:relative}
.steps li::before{content:"";position:absolute;left:9px;top:26px;bottom:-2px;width:1.5px;background:var(--line)}
.steps li:last-child::before{display:none}
.steps li[data-s=done]{color:var(--fg)}
.steps li[data-s=active]{color:var(--fg);font-weight:600}
.ic{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;border:1.5px solid var(--line);background:var(--surface);position:relative;z-index:1}
li[data-s=done] .ic{background:var(--accent-3);border-color:var(--accent-3)}
li[data-s=done] .ic::after{content:"";width:5px;height:8px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translate(-1px,-1px)}
li[data-s=active] .ic{border-color:var(--accent)}
li[data-s=active] .ic::after{content:"";width:8px;height:8px;border-radius:50%;border:1.6px solid var(--accent);border-top-color:transparent;animation:sp .6s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
js
const items = [...document.querySelectorAll('.steps li')];
let i = 1;
function advance() {
  if (i >= items.length) { setTimeout(reset, 1400); return; }
  items[i].dataset.s = 'done';
  const icon = items[i].querySelector('.ic');
  icon.replaceWith(icon.cloneNode(true));
  if (items[i + 1]) items[i + 1].dataset.s = 'active';
  i++;
  setTimeout(advance, 1000);
}
function reset() {
  items.forEach((li, idx) => { li.dataset.s = idx === 0 ? 'done' : idx === 1 ? 'active' : 'pending'; const ic = li.querySelector('.ic'); ic.replaceWith(ic.cloneNode(true)); });
  i = 1;
  setTimeout(advance, 900);
}
setTimeout(advance, 900);

Where a tool call card shows "this one step right now," an agent status list shows the whole plan at once — "Plan → Research → Analyze → Draft" laid out in order, with completed steps checked, the current one spinning, and upcoming ones dimmed.

Multi-step work is hard to estimate. This list can't give an exact time remaining, but showing relative position — "step 3 of 5" — feels far less open-ended than a single spinning progress bar.

It helps to accept that the plan can change mid-run. If a step gets added or reordered partway through that wasn't in the original plan, the list should reflect that change honestly rather than pretending the original plan was followed, or the user starts wondering why it looks off.

When to use

Use it for agent or workflow runs that call several tools in sequence. Overkill for a task that resolves in a single API call.