Agents API

<div class="scene"><div class="heading">DURABLE AGENT SESSION</div><div class="session-track"><div class="segment" id="s-0">요청</div><div class="segment" id="s-1">실행</div><div class="segment" id="s-2">문맥 정리</div><div class="segment" id="s-3">계속</div></div><div class="session-box"><div id="session-progress"></div></div><div class="muted" id="session-note">작업 요청 접수</div></div>

.scene{width:min(94vw,800px);height:min(88vh,326px);padding:clamp(10px,2.7vmin,19px);border:1px solid var(--line);border-radius:13px;background:var(--surface);font:500 clamp(13px,2.4vmin,17px)/1.3 var(--font-sans,sans-serif);position:relative;overflow:hidden}.scene .mono{font-family:ui-monospace,SFMono-Regular,monospace}.scene .muted{color:var(--muted)}.scene .accent{color:var(--accent)}.scene .heading{font-weight:750;color:var(--accent);margin-bottom:clamp(5px,1.6vmin,12px)}.session-track{display:flex;gap:5px;margin:clamp(14px,4vmin,34px) 0 12px}.segment{flex:1;text-align:center;border:1px solid var(--line);border-radius:6px;padding:clamp(7px,2vmin,14px) 2px;background:var(--bg)}.segment.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,var(--surface))}.session-box{height:clamp(14px,4vmin,24px);border-radius:99px;background:var(--bg);border:1px solid var(--line);overflow:hidden;margin-bottom:12px}.session-box>div{height:100%;width:25%;background:var(--accent);transition:width .5s}

const notes=['작업 요청 접수','관리형 환경에서 실행','긴 문맥을 정리','세션을 이어서 수행'];let step=0;function draw(){document.querySelectorAll('.segment').forEach((x,i)=>x.classList.toggle('on',i===step));document.getElementById('session-progress').style.width=(step+1)*25+'%';document.getElementById('session-note').textContent=notes[step];step=(step+1)%4}draw();setInterval(draw,900)