Accountable AI progress

HTML

<section class="ai-card" aria-live="polite"><header><div><span class="eyebrow">AGENT ACTIVITY</span><h2>Checking supplier records</h2></div><span class="timer" id="timer">0:00</span></header><div class="progress"><span id="bar"></span></div><ol><li class="done"><b>Request understood</b><span>Complete</span></li><li class="active"><b>Comparing 24 records</b><span id="step">Working</span></li><li><b>Preparing recommendation</b><span>Waiting</span></li></ol><button id="stop">Stop safely</button><p id="note">Existing results remain available while this runs.</p></section>

CSS

*{box-sizing:border-box}body{margin:0;background:#fff;color:#151515;font:15px/1.45 Inter,system-ui,sans-serif}.ai-card{width:calc(100% - 40px);max-width:680px;margin:20px auto;padding:24px;border:1px solid #deddd8;border-radius:16px;background:#fff}header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.eyebrow{font:600 11px/1.2 ui-monospace,monospace;letter-spacing:.12em;color:#666}h2{margin:6px 0 0;font-size:21px}.timer{font:600 13px ui-monospace,monospace;background:#f2f1ed;padding:7px 9px;border-radius:8px}.progress{height:6px;background:#ecebe7;border-radius:99px;margin:22px 0;overflow:hidden}.progress span{display:block;width:18%;height:100%;background:#1957ff;transition:width .8s}ol{list-style:none;padding:0;margin:0 0 20px}li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #eee;color:#888}li.done{color:#15824b}li.active{color:#151515}li span{font-size:13px}button{border:1px solid #ccc;background:#fff;border-radius:9px;padding:9px 13px;font-weight:650;cursor:pointer}#note{display:inline;margin-left:12px;color:#686868;font-size:13px}@media(max-width:520px){#note{display:block;margin:12px 0 0}}

JavaScript

let s=0,p=18,t=setInterval(()=>{s++;timer.textContent=Math.floor(s/60)+":"+String(s%60).padStart(2,"0");p=Math.min(84,p+3);bar.style.width=p+"%"},1000);stop.onclick=()=>{clearInterval(t);step.textContent="Stopped";note.textContent="Stopped safely. No records were changed.";bar.style.background="#777"}