Context window meter

컨텍스트 윈도우 미터

A bar showing how close a conversation is to the model's context limit, turning to a warning color near capacity.

Also known as: Token usage barContext limit indicator
···
html
<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>
css
.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}
js
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);

A model can hold only so much text in memory at once — the context window. As a conversation grows or a large file gets attached, it approaches that limit, and past it, older messages get truncated or the request is rejected outright. This meter turns that invisible ceiling into a single visible bar.

It can stay unobtrusive most of the time, then shift to yellow around 70–80% of capacity and red near full, signaling it's time to tidy up or start a new conversation. Pairing it with a number ("96K of 128K used") is more useful to developers and power users.

It's worth also communicating what actually happens at the limit — if older messages get silently dropped, surfacing that prevents the frustrating moment of "I already told you that" when the user has no idea it was cut.

When to use

Use it in products where long conversations or large attachments are common — coding assistants, document analysis. Rarely worth showing in a product that's mostly short one-off Q&A, since the limit is never in play.