컨텍스트 윈도우 미터

<div class="cw">
  <div class="hd"><span>컨텍스트 사용량</span><span id="num">12K / 128K</span></div>
  <div class="track"><div class="fill" id="fill"></div></div>
</div>

.cw{width:min(260px,92%);display:grid;gap:6px}
.hd{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.track{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.fill{height:100%;width:9%;border-radius:999px;background:var(--accent-3);transition:width .5s ease,background .3s ease}
.fill[data-lv=warn]{background:#f5a524}
.fill[data-lv=danger]{background:#e5484d}

const fill = document.getElementById('fill'), num = document.getElementById('num');
const TOTAL = 128;
const steps = [12, 34, 58, 79, 96, 112, 122];
let i = 0;
function tick() {
  const used = steps[i % steps.length];
  const pct = (used / TOTAL) * 100;
  fill.style.width = pct + '%';
  fill.dataset.lv = pct > 88 ? 'danger' : pct > 65 ? 'warn' : 'ok';
  num.textContent = used + 'K / ' + TOTAL + 'K';
  i++;
  if (i % steps.length === 0) setTimeout(() => { fill.style.width = '9%'; fill.dataset.lv = 'ok'; num.textContent = '12K / 128K'; }, 900);
}
tick();
setInterval(tick, 1300);