Agent Step Trace

<!-- Agent Step Trace — reading → searching → writing -->
<ol class="nuda-ac2-steps" aria-label="Agent progress">
  <li class="nuda-ac2-steps__item nuda-ac2-steps__item--done">
    <span class="nuda-ac2-steps__icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
           stroke-linecap="round" stroke-linejoin="round">
        <path d="M4 12 L10 18 L20 6" />
      </svg>
    </span>
    <span class="nuda-ac2-steps__label">Reading file</span>
  </li>
  <li class="nuda-ac2-steps__item nuda-ac2-steps__item--active">
    <span class="nuda-ac2-steps__icon" aria-hidden="true">
      <i class="nuda-ac2-steps__spinner"></i>
    </span>
    <span class="nuda-ac2-steps__label">Searching codebase</span>
  </li>
  <li class="nuda-ac2-steps__item">
    <span class="nuda-ac2-steps__icon" aria-hidden="true"></span>
    <span class="nuda-ac2-steps__label">Writing patch</span>
  </li>
</ol>

.nuda-ac2-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 220px;
  display: flex;
  flex-direction: column;
  font: 12px ui-sans-serif,system-ui,sans-serif;
  color: #777;
  box-sizing: border-box;
}

.nuda-ac2-steps__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0 7px 4px;
}

.nuda-ac2-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 27px;
  bottom: -7px;
  width: 1px;
  background: rgba(255,255,255,.1);
}

.nuda-ac2-steps__icon {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #161616;
  border: 1px solid rgba(255,255,255,.12);
  color: #555;
}

.nuda-ac2-steps__icon svg {
  width: 10px;
  height: 10px;
}

.nuda-ac2-steps__item--done .nuda-ac2-steps__icon {
  background: #e4ff54;
  border-color: #e4ff54;
  color: #0a0a0a;
}

.nuda-ac2-steps__item--active .nuda-ac2-steps__label {
  color: #fafafa;
}

.nuda-ac2-steps__item--done .nuda-ac2-steps__label {
  color: #a1a1aa;
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,.25);
}

.nuda-ac2-steps__spinner {
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(228,255,84,.25);
  border-top-color: #e4ff54;
  border-radius: 50%;
  animation: _nuda-ac2steps 0.8s linear infinite;
}

@keyframes _nuda-ac2steps {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-ac2-steps__spinner {
    animation: none !important;
  }
}