Context window

How much of the context each part takes and the usage limits.

data-u="ai-context"Demo

Example

Context window820k / 1M (82%)

System52k
Tools118k
Messages310k
Files240k
Memory100k
Free180k

Plan usage limits

5-hour limitResets in 2 h 46 min38%

Weekly, all modelsResets in 3 d3%

Weekly, advanced modelResets in 3 d5%

Context window

Usage by category and plan limits, with the numbers counting up as they scroll in.

<article class="u-ai-card">
  <div class="u-ai-card__panel" data-u="ai-context" role="group" aria-label="Demo: context window and usage limits">
    <div class="u-ai-tile u-ai-ctx">
      <div class="u-ai-ctx__head"><span>Context window</span><b class="u-ai-ctx__total">820k / 1M (82%)</b></div>
      <div class="u-ai-ctx__bar" aria-hidden="true">
        <i class="u-ai-ctx__seg" style="width:5.2%;background:var(--c1)"></i>
        <i class="u-ai-ctx__seg" style="width:11.8%;background:var(--c2)"></i>
        <i class="u-ai-ctx__seg" style="width:31%;background:var(--c3)"></i>
        <i class="u-ai-ctx__seg" style="width:24%;background:var(--c4)"></i>
        <i class="u-ai-ctx__seg" style="width:10%;background:var(--c6)"></i>
      </div>
      <ul class="u-ai-ctx__legend">
        <li><i style="background:var(--c1)"></i>System<b data-val="52">52k</b></li>
        <li><i style="background:var(--c2)"></i>Tools<b data-val="118">118k</b></li>
        <li><i style="background:var(--c3)"></i>Messages<b data-val="310">310k</b></li>
        <li><i style="background:var(--c4)"></i>Files<b data-val="240">240k</b></li>
        <li><i style="background:var(--c6)"></i>Memory<b data-val="100">100k</b></li>
        <li><i style="background:var(--sunken);box-shadow:0 0 0 1px var(--line-2)"></i>Free<b>180k</b></li>
      </ul>
      <p class="u-ai-ctx__sub">Plan usage limits</p>
      <div class="u-ai-ctx__limits">
        <div class="u-ai-limit"><span class="u-ai-limit__name">5-hour limit<span class="u-ai-limit__rs">Resets in 2 h 46 min</span></span><b class="u-ai-limit__pct">38%</b><div class="u-ai-limit__track"><div class="u-ai-limit__fill" data-pct="38" style="background:var(--c2);transform:scaleX(.38)"></div></div></div>
        <div class="u-ai-limit"><span class="u-ai-limit__name">Weekly, all models<span class="u-ai-limit__rs">Resets in 3 d</span></span><b class="u-ai-limit__pct">3%</b><div class="u-ai-limit__track"><div class="u-ai-limit__fill" data-pct="3" style="background:var(--c3);transform:scaleX(.03)"></div></div></div>
        <div class="u-ai-limit"><span class="u-ai-limit__name">Weekly, advanced model<span class="u-ai-limit__rs">Resets in 3 d</span></span><b class="u-ai-limit__pct">5%</b><div class="u-ai-limit__track"><div class="u-ai-limit__fill" data-pct="5" style="background:var(--c4);transform:scaleX(.05)"></div></div></div>
      </div>
    </div>
  </div>
  <div class="u-ai-card__text">
    <h3 class="u-ai-card__title">Context window</h3>
    <p class="u-ai-card__desc">Usage by category and plan limits, with the numbers counting up as they scroll in.</p>
  </div>
</article>

Installation

Context window ships in the full package, along with the skill:

curl -fsSL unslop.leallabs.dev/i | sh

The example HTML, to paste:

curl -fsSL unslop.leallabs.dev/i | sh -s add ai-context

Uses The block is just HTML. The CSS and JS come from the full package's unslop.css and unslop.js.

Classes and variants

Class	What it does
`.u-ai-ctx`	Bar: __bar with __seg (width in %) and __legend.
`.u-ai-limit`	Limit: __name, __pct, __track, __fill`[data-pct]`.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
.`u-ai-`card__panel	`role="group"` and `aria-label`	Says it's a demo and of what.

Keyboard

Key	Does
Tab	enters the card and pauses the animation while focus is there

Motion

Plays on its own when it enters the viewport, for up to 3 cycles, and stops in its final state. Hovering or focusing inside pauses it. With reduced motion, it shows the final state right away.

Events and API

No public events. For a real chat, copy the markup and wire up your own state, without relying on data-u for logic.