Agent-to-Agent Protocol

<div class="scene"><div class="heading">AGENT TASK EXCHANGE</div><div class="agents"><div>요청 에이전트</div><div class="task" id="task">작업 요청 →</div><div>전문 에이전트</div></div><div class="states"><span id="submitted">submitted</span><span id="working">working</span><span id="completed">completed</span></div><div class="muted" id="a2a-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)}.agents{display:flex;align-items:center;justify-content:space-between;gap:5px;height:51%}.agents>div:first-child,.agents>div:last-child{width:31%;min-height:52%;display:grid;place-items:center;text-align:center;border:1px solid var(--line);border-radius:8px;background:var(--bg)}.task{flex:1;text-align:center;color:var(--accent)}.states{display:flex;gap:4px;margin-bottom:7px}.states span{flex:1;text-align:center;border:1px solid var(--line);border-radius:5px;padding:5px 1px}.states span.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,var(--surface))}

const states=['submitted','working','completed'],labels=['작업을 보냅니다','진행 상태를 받습니다','결과를 받습니다'];let i=0;function draw(){states.forEach((id,n)=>document.getElementById(id).classList.toggle('on',n===i));document.getElementById('task').textContent=i===0?'작업 요청 →':i===1?'← 진행 상태':'← 결과';document.getElementById('a2a-note').textContent=labels[i];i=(i+1)%3}draw();setInterval(draw,850)