에이전트 공급망 오염

<div class="sd"><div class="sd-head"><strong>TOOL POISONING</strong><span id="state">live check</span></div><div class="sd-stage"><div class="sp-top"><div class="sp-tool" id="tool">tool: lookup<br><b id="descriptor">read records</b></div><div class="sp-arrows">↙　↘</div></div><div class="sp-tasks"><div id="task-a">task A<br><b>lookup</b></div><div id="task-b">task B<br><b>lookup</b></div></div></div><div class="sd-foot"><span id="caption">checking boundary</span><span>tap to step</span></div></div>

.sd{box-sizing:border-box;width:min(94vw,700px);height:min(86vh,318px);padding:clamp(9px,2.3vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);display:flex;flex-direction:column;gap:clamp(6px,1.8vmin,12px);font:600 clamp(12px,2.6vmin,16px)/1.25 var(--font-sans, sans-serif)}.sd *{box-sizing:border-box}.sd-head,.sd-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:1.25em}.sd-head strong{color:var(--accent);letter-spacing:.06em}.sd-head span,.sd-foot{color:var(--muted)}.sd-foot{font-size:clamp(12px,2.4vmin,14px)}.sd-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vmin,18px);overflow:hidden}.sd .mono{font-family:ui-monospace,monospace}.sd .tile{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(5px,1.5vmin,10px);text-align:center}.sd .good{color:var(--accent);border-color:var(--accent)}.sd .bad{color:var(--accent-3);border-color:var(--accent-3)}.sd .arrow{color:var(--muted);font-size:clamp(15px,4vmin,28px)}.sd .active{background:color-mix(in srgb,var(--accent) 16%,var(--surface));border-color:var(--accent)}.sd .blocked{background:color-mix(in srgb,var(--accent-3) 13%,var(--surface));border-color:var(--accent-3)}.sd-stage{flex-direction:column;gap:clamp(4px,1.2vmin,8px)}.sp-top{display:grid;justify-items:center}.sp-tool{border:2px solid var(--accent);border-radius:8px;padding:clamp(5px,1.5vmin,11px);text-align:center;min-width:clamp(115px,42vmin,210px)}.sp-tool b{display:block;margin-top:4px;color:var(--muted)}.sp-tool.poison{border-color:var(--accent-3)}.sp-tool.poison b{color:var(--accent-3)}.sp-arrows{font:700 clamp(17px,4vmin,25px) ui-monospace,monospace;color:var(--muted);line-height:1}.sp-tasks{display:flex;gap:clamp(8px,3vmin,20px);width:min(95%,380px)}.sp-tasks>div{flex:1;border:1px solid var(--line);border-radius:7px;padding:clamp(4px,1.2vmin,8px);text-align:center;background:var(--bg)}.sp-tasks b{color:var(--accent)}.sp-tasks .poison b{color:var(--accent-3)}

let n=-1;function advance(){n=1-n;document.getElementById('descriptor').textContent=n?'send records away':'read records';document.getElementById('tool').classList.toggle('poison',!!n);for(const id of ['task-a','task-b']){const e=document.getElementById(id);e.classList.toggle('poison',!!n);e.querySelector('b').textContent=n?'unsafe route':'lookup'}document.getElementById('state').textContent=n?'manifest altered':'manifest verified';document.getElementById('caption').textContent=n?'both tasks rerouted':'verified tool selected'}advance();setInterval(advance,1000);
document.querySelector('.sd').addEventListener('pointerdown',advance);