에이전트 루프

<div class="demo"><div class="head"><b>AGENT LOOP</b><span id="iteration">turn 1</span></div><div class="loop"><div class="node" id="reason"><small>01</small> DECIDE</div><div class="arrow">→</div><div class="node" id="tool"><small>02</small> TOOL</div><div class="arrow">→</div><div class="node" id="observe"><small>03</small> OBSERVE</div><div class="arrow">→</div><div class="node" id="answer"><small>04</small> ANSWER</div></div><div class="output" id="output">Choose a next action</div><div class="foot"><span>goal → action → result → next step</span><span>tap to step</span></div></div>

.demo{width:min(94vw,740px);height:min(86vh,310px);padding:clamp(10px,2.4vmin,20px);border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(7px,2vmin,14px);font:600 clamp(8px,2.4vmin,15px)/1.3 ui-monospace,monospace}.head,.foot{display:flex;justify-content:space-between;gap:8px}.head b{color:var(--accent)}.head span,.foot{color:var(--muted)}.foot{font-size:.82em}.loop{display:flex;align-items:center;justify-content:center;gap:clamp(2px,.9vmin,9px);min-height:40%}.node{flex:1;min-width:0;max-width:130px;border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:clamp(5px,1.6vmin,12px) 2px;text-align:center;opacity:.5;transition:opacity .2s,border-color .2s,background .2s}.node small{display:block;color:var(--muted);font-size:.75em;margin-bottom:.3em}.node.on{opacity:1;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent)}.arrow{color:var(--accent);font-size:1.2em}.output{border-left:3px solid var(--accent);background:var(--bg);padding:.5em .8em;min-height:2.3em;color:var(--muted)}

const ids=['reason','tool','observe','answer'],messages=['Choose a next action','Call search(query)','Observe: 3 results','Respond with evidence'];let step=0,turn=1;function advance(){ids.forEach((id,i)=>document.getElementById(id).classList.toggle('on',i===step));document.getElementById('output').textContent=messages[step];document.getElementById('iteration').textContent='turn '+turn;if(step===3)turn++;step=(step+1)%4}advance();const timer=setInterval(advance,850);document.querySelector('.demo').addEventListener('pointerdown',()=>{clearInterval(timer);advance()})