<div class="as-wrap">
  <div class="as-card">
    <div class="as-head">
      <span class="as-title" id="asTitle">Running agent task…</span>
      <span class="as-time" id="asTime">0.0s</span>
    </div>
    <div class="as-bar" id="asBar"></div>
    <div class="as-labels" id="asLabels"></div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0f1a;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}

.as-wrap{width:100%;max-width:460px}
.as-card{background:#12162a;border:1px solid #232a45;border-radius:16px;padding:20px 22px;box-shadow:0 18px 44px rgba(0,0,0,.4)}

.as-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.as-title{font-size:13.5px;font-weight:700;color:#e7e9f5}
.as-time{font-size:11.5px;color:#7d8296;font-variant-numeric:tabular-nums}

.as-bar{display:flex;gap:4px;height:8px;border-radius:5px;overflow:hidden}
.as-seg{flex:1;background:#1e2338;position:relative;overflow:hidden}
.as-seg-fill{position:absolute;inset:0;width:0%;background:linear-gradient(90deg,#6366f1,#818cf8);transition:width .4s cubic-bezier(.4,0,.2,1)}
.as-seg.as-active .as-seg-fill{background:linear-gradient(90deg,#6366f1,#a78bfa)}
.as-seg.as-complete .as-seg-fill{width:100%!important;background:#4ade80}

.as-labels{display:flex;gap:4px;margin-top:10px}
.as-label{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;color:#565c78;text-align:center;transition:color .3s}
.as-label.as-active{color:#c8cbdb}
.as-label.as-complete{color:#4ade80}
.as-label .as-icon{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1a1f36;border:1px solid #2b3157}
.as-label.as-active .as-icon{border-color:#6366f1}
.as-label.as-complete .as-icon{background:#122a1c;border-color:#245a3a}
.as-label .as-dot{width:5px;height:5px;border-radius:50%;background:#3b4166}
.as-label.as-active .as-dot{background:#a78bfa;animation:asPulse 1s ease-in-out infinite}
.as-label.as-complete .as-icon::after{content:'';width:3px;height:6px;border:solid #4ade80;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
@keyframes asPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.5}}

// Each segment of the bar represents one real stage of an agent's task
// pipeline. Segments advance strictly in sequence: a stage cannot start
// until the previous one has genuinely finished, and the elapsed time is a
// real running clock rather than a value baked into a CSS animation.
var STAGES = [
  { label: 'Searching', minMs: 700, maxMs: 1400 },
  { label: 'Reading', minMs: 900, maxMs: 1800 },
  { label: 'Reasoning', minMs: 1000, maxMs: 2000 },
  { label: 'Writing', minMs: 800, maxMs: 1500 },
];

var barEl = document.getElementById('asBar');
var labelsEl = document.getElementById('asLabels');
var titleEl = document.getElementById('asTitle');
var timeEl = document.getElementById('asTime');

var segEls = [];
var labelEls = [];

STAGES.forEach(function (stage) {
  var seg = document.createElement('div');
  seg.className = 'as-seg';
  seg.innerHTML = '<div class="as-seg-fill"></div>';
  barEl.appendChild(seg);
  segEls.push(seg);

  var lab = document.createElement('div');
  lab.className = 'as-label';
  lab.innerHTML = '<span class="as-icon"><span class="as-dot"></span></span><span>' + stage.label + '</span>';
  labelsEl.appendChild(lab);
  labelEls.push(lab);
});

var startedAt = Date.now();
var timerId = setInterval(function () {
  timeEl.textContent = ((Date.now() - startedAt) / 1000).toFixed(1) + 's';
}, 100);

function runStage(index) {
  if (index >= STAGES.length) {
    clearInterval(timerId);
    titleEl.textContent = 'Task complete';
    timeEl.textContent = ((Date.now() - startedAt) / 1000).toFixed(1) + 's';
    return;
  }

  var stage = STAGES[index];
  var seg = segEls[index];
  var lab = labelEls[index];
  seg.classList.add('as-active');
  lab.classList.add('as-active');
  titleEl.textContent = stage.label + '…';

  // A genuine incremental fill loop rather than a single CSS transition to
  // 100%, so the segment's own progress within its stage is visible too.
  var fillEl = seg.querySelector('.as-seg-fill');
  var duration = stage.minMs + Math.random() * (stage.maxMs - stage.minMs);
  var stageStart = Date.now();

  var raf = setInterval(function () {
    var pct = Math.min(100, ((Date.now() - stageStart) / duration) * 100);
    fillEl.style.width = pct + '%';
    if (pct >= 100) {
      clearInterval(raf);
      seg.classList.remove('as-active');
      seg.classList.add('as-complete');
      lab.classList.remove('as-active');
      lab.classList.add('as-complete');
      runStage(index + 1);
    }
  }, 40);
}

runStage(0);