Context

<aparte-context>

A gauge of the model’s context window: how much of it the conversation uses.

It reads two numbers and draws their ratio. The USED part is what each turn reports — aparte-message-done carries the provider’s usage, and the prompt tokens of the last call are the size of the context as the model saw it. The WINDOW is the current model’s contextWindow (a provider’s /models fetch fills it in), or the window attribute when you know better. With no window, or before the first turn, it renders nothing — an affordance with nothing to show has no chrome to leave.

Two thresholds turn it warn then danger (data-level), and crossing one fires aparte-context-threshold. With auto-compact, reaching danger dispatches aparte-compact for its chat — once, until the level drops again — which is what a gauge that turns red and then does nothing was missing. What answers the command is @aparte/plugin-compaction (setupCompaction()): it summarises what no longer fits the window and keeps the recent turns. Core itself does not compact — the gauge asks, the plugin does, and a page without the plugin gets a gauge that only measures.

The bar wears the aparte-progress recipe. variant="ring" draws the same reading as a ring with the percentage beside it — for a toolbar, where a bar wants a width and a ring wants none; the full reading is the ring’s title. The two share the levels, the events and the accessible name; only the drawing differs.

Usage

Width 375 768 Full Open in a tab

The real element, in its own document so this site's CSS cannot reach it. It renders the same example printed below — every framework mounts this same element, so the rendering is what you get in all five; the code is what changes.

Example

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

<script>
  // The gauge reads what each turn reports; it draws nothing before the first one.
  // This is a provider's usage after a long conversation: 78% of a 128k window,
  // past the `warn` threshold.
  window.dispatchEvent(new CustomEvent('aparte-message-done', {
    detail: { usage: { inputTokens: 99400, outputTokens: 600 } },
  }));
</script>

API

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 reaching danger (once per crossing).
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 (readonly)	number | null	The window in force — the attribute, else the current model’s.
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 the gauge first reaches danger: compact this target’s transcript. Once per crossing, and only while the attribute is present. @aparte/plugin-compaction answers it; with no listener nothing happens.

Theming

Override any of these on :root, on a subtree, or on one instance — custom properties inherit downward. Some are this element’s own; others are site-wide tokens that also style it, and overriding one of those at :root moves everything that reads it. The full set is in the CSS variables reference.

<aparte-context>

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

In a framework

The element is the same object everywhere — the tag does not change. What changes is how an attribute is written and how an event reaches you.

Vanilla

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

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

React

<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

<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

<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

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

<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.