Context window

<div class="scene"><div class="heading">CONTEXT WINDOW <span id="meter" class="mono">3 / 3</span></div><div class="window"><div class="tokens" id="tokens"></div></div><div class="muted note" id="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)}.heading{display:flex;justify-content:space-between}.window{border:2px solid var(--accent);border-radius:9px;height:62%;padding:7px;overflow:hidden}.tokens{display:flex;height:100%;gap:6px;align-items:stretch}.token{flex:1;min-width:0;display:grid;place-items:center;text-align:center;border-radius:6px;background:color-mix(in srgb,var(--accent) 18%,var(--bg));border:1px solid var(--line);transition:all .3s}.token:first-child{opacity:.55}.note{margin-top:7px}

const items=['지시','문서 A','문서 B','질문','도구 결과','답변'];let index=0;function draw(){const shown=items.slice(index,index+3);document.getElementById('tokens').innerHTML=shown.map(x=>'<div class=token>'+x+'</div>').join('');document.getElementById('meter').textContent=(index+3)+' / '+items.length;index=(index+1)%4}draw();setInterval(draw,1300)