Human-in-the-loop approval

<div class="approval"><div class="draft">AI DRAFT <span>READY</span></div><div class="gate"><span>REVIEW GATE</span><button id="approve">APPROVE</button></div><div class="send">SEND QUEUE <b id="state">WAITING</b></div><i class="token"></i></div>

.approval{position:relative;width:min(83%,420px);display:grid;gap:clamp(7px,1.6vmin,14px);font:900 clamp(10px,max(3.7vmin,1vw),16px)/1 sans-serif}.draft,.gate,.send{display:flex;align-items:center;justify-content:space-between;padding:clamp(9px,2vmin,18px);border:2px solid var(--fg);background:var(--surface)}.draft span{color:var(--accent)}.gate{border-color:var(--accent);box-shadow:4px 4px 0 var(--accent)}.gate button{border:0;background:var(--accent);color:white;font:inherit;padding:clamp(5px,1vmin,9px);cursor:pointer}.send b{color:var(--muted)}.send b.on{color:var(--accent)}.token{position:absolute;left:-14px;top:8%;width:clamp(11px,2vmin,18px);aspect-ratio:1;border-radius:50%;background:var(--accent);animation:gate 4s infinite}@keyframes gate{0%{top:8%;opacity:0}15%,45%{opacity:1}40%,60%{top:48%}85%{top:86%;opacity:1}100%{top:86%;opacity:0}}

const state=document.querySelector('#state'),button=document.querySelector('#approve');function set(on){state.textContent=on?'APPROVED':'WAITING';state.classList.toggle('on',on)}let timer=setInterval(()=>{set(true);setTimeout(()=>set(false),1300)},4000);button.addEventListener('click',()=>{clearInterval(timer);set(true)});