에이전트 상태 목록

<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>

.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)}}

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);