Context gauge

Preview Code

375 768 Full

Open

html

<!-- The bar takes the room it is given; the ring takes none. -->
<aparte-composer-toolbar>
  <aparte-context window="128000" style="flex: 1"></aparte-context>
  <aparte-context window="128000" variant="ring"></aparte-context>
</aparte-composer-toolbar>

<script>
  // The gauge reads the usage each turn reports, and draws nothing before the first one.
  window.dispatchEvent(new CustomEvent('aparte-message-done', {
    detail: { usage: { inputTokens: 52000, outputTokens: 800 } },
  }));
</script>

A model reads a limited number of tokens, and a long conversation reaches the limit before anyone notices. <aparte-context> shows how much is used: the size of the last request, as the provider reported it, out of the current model’s window. The bar takes the width it is given; variant="ring" takes none, for a toolbar, with the full reading in its tooltip.

It needs nothing from your code: it listens to the usage each turn reports, and takes the window from the model (a provider’s model list fills in contextWindow) or from the window attribute. Before the first turn, or without a window, it shows nothing.

Variants

Warning, then danger

Preview Code

375 768 Full

Open

html

<aparte-composer-toolbar>
  <aparte-context window="128000" style="flex: 1"></aparte-context>
</aparte-composer-toolbar>
<aparte-composer-toolbar>
  <aparte-context window="100000" style="flex: 1"></aparte-context>
</aparte-composer-toolbar>

<script>
  // One reading, two windows: 82% of the first is past warn (75%), 105% of the second past danger (90%).
  window.dispatchEvent(new CustomEvent('aparte-message-done', {
    detail: { usage: { inputTokens: 105000, outputTokens: 400 } },
  }));
</script>

At 75% of the window the gauge turns warn, at 90% danger (warn and danger attributes move them). It reflects the level in data-level and fires aparte-context-threshold when it changes.

Usage

Vanilla

html

<aparte-context auto-compact=""></aparte-context>

js

el.addEventListener('aparte-context-threshold', (e) => use(e.detail));

React

tsx

<aparte-context auto-compact=""></aparte-context>

The aparte-* tags are typed JSX intrinsics as soon as you import from @aparte/react. A presence attribute takes '', never true — React stringifies it, and auto-compact={false} would render auto-compact="false", which hasAttribute reads as on. Events reach you by ref, typed through the DOM.

Vue

vue

<template>
  <aparte-context auto-compact=""
    @aparte-context-threshold="(e) => use(e.detail)"
  ></aparte-context>
</template>

Declared through Vue’s GlobalComponents, so vue-tsc checks the tag in any template. A presence attribute takes '' to set and null to remove, never false.

Svelte

svelte

<aparte-context auto-compact=""
  on:aparte-context-threshold={(e) => use(e.detail)}
></aparte-context>

Declared through SvelteHTMLElements, so svelte-check covers the attributes and the on: handlers. A presence attribute takes '', never false.

Angular

ts

import { AparteContextDirective } from '@aparte/angular';

html

<aparte-context [autoCompact]="true"
  (contextThreshold)="use($event)"></aparte-context>

A standalone directive whose selector IS the tag, so the real element sits in the template — @if, @for and content projection all reach it — and no CUSTOM_ELEMENTS_SCHEMA is needed.

Installation and the framework-specific traps: React · Vue · Svelte · Angular.

When the window is full

With auto-compact, a turn that ends in danger dispatches aparte-compact for its chat, one request at a time: once it is answered, the next turn still in danger asks again. What answers is @aparte/plugin-compaction: it summarises the oldest turns and keeps the recent ones (see Compaction notice). Without the plugin, the gauge only measures.

Customize

Variable	What it sets
--aparte-context-ring-size	The ring’s diameter.

The bar wears the progress recipe, and its colours follow the level.

API

<aparte-context> · class AparteContext

Attributes

Attribute	Description
window	The context window, in tokens. Overrides the current model’s contextWindow.
warn	Fraction of the window at which the level turns warn. Default 0.75.
danger	Fraction at which it turns danger. Default 0.9.
target	The id of the <aparte-chat> to watch, when the element is not under it.
variant	bar (default) or ring: a progress bar with the reading beside it, or a ring with the percentage.
auto-compact	Dispatch aparte-compact on each turn that ends in danger, one request at a time.
data-level	Reflected BY the element: ok, warn or danger. Read-only.
data-empty	Reflected BY the element while it has nothing to show. Read-only.

Properties

Property	Type	Description
used (readonly)	number | null	Tokens the last turn reported, or null before the first turn.
window	number | null	Writes the window attribute; null gives the model’s own window back. The setter has to exist: React 19 and Svelte assign the PROPERTY whenever the element has one of that name, so <aparte-context window={8000}> — a spelling both wrappers type as valid — hit a getter alone and threw.
level (readonly)	AparteContextLevel | null	The current level, or null while nothing is shown.

Events

Event	Type	Description
aparte-context-threshold	CustomEvent<AparteContextThresholdEventDetail>	The level changed. Bubbles.
aparte-compact	CustomEvent<AparteCompactEventDetail>	Dispatched on window when auto-compact is set and a turn ends in danger: compact this target’s transcript. One request at a time — the next turn in danger asks again once the plugin has answered — and only while the attribute is present. @aparte/plugin-compaction answers it; with no listener nothing happens.

CSS variables

Variable	Default	Description
--aparte-context-ring-size	22px	Diameter of the ring variant.

Accessibility

• The gauge is a meter with its minimum, maximum and current value, named from the contextLabel key (“Context window”) followed by the reading.
• The level is written, not only coloured: the reading says how full the window is.

Related

• Compaction notice — what a full window turns into.
• Composer — the toolbar the ring sits in.