에이전트 SDK

<div class="scene"><div class="heading">RUN TRACE</div><div class="trace"><div>run.start</div><div>agent: triage</div><div>tool: lookup</div><div>handoff: specialist</div><div>run.end</div></div><div class="muted" id="trace-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)}.trace{height:68%;display:flex;flex-direction:column;justify-content:space-between;border-left:2px solid var(--line);padding-left:12px}.trace div{font-family:ui-monospace,monospace;color:var(--muted);position:relative}.trace div:before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--line);left:-17px;top:5px}.trace div.on{color:var(--accent);font-weight:700}.trace div.on:before{background:var(--accent)}

let i=0;function draw(){document.querySelectorAll('.trace div').forEach((x,n)=>x.classList.toggle('on',n<=i));document.getElementById('trace-note').textContent='trace step '+(i+1)+' / 5';i=(i+1)%5}draw();setInterval(draw,650)