A small ring that fills as a conversation uses up the model's memory. Point at it to see what takes the room and what each reply costs. It warns before the model starts to forget.
Model window
Price
Breakdown
Ring
NeedsReactTheme
Sourcecurl --create-dirs -o src/components/context.tsx https://fragms.simonveprek.cz/source/context -o src/components/theme.tsx https://fragms.simonveprek.cz/source/themeSaves src/components/context.tsx and theme.tsx beside it. No setup, works in any React project.
import { Context } from "@/components/context";<Context // What fills the window. Count tokens with your model's tokenizer parts={[ { label: "Instructions", tokens: system }, { label: "Files", tokens: files }, { label: "Messages", tokens: messages }, ]} price={3} label="percent" onCompact={summarise}/>
usedTokens in the conversation so far. Use parts instead for a breakdown.
numberDefault 0partsWhat the tokens are made of, each with a label, a count and an optional colour.
ContextPart[]Default nonelimitThe model's context window, in tokens.
32_000200_0001_000_000pricePrice per million input tokens. Every reply reads the whole conversation, so this is what the next one costs.
numberDefault hiddenwarnAtHow full it gets before turning amber. It turns red at 95%.
0.50.80.95labelWhat reads beside it. The share, tokens used, or tokens left.
nonepercentusedleftshapeA ring, or a slim bar.
ringbarsegmentsDraws each part in its own colour while there is room.
truefalsecolorsThe fill while there is room, once it warns, and once it is nearly full.
{ fine, warn, full }Default text, amber, redonCompactOffered once it warns. Summarise or trim the conversation here.
() => voidDefault nothingopenHolds the breakdown open or shut. Left out, hover and tap decide.
truefalseDefault autosideWhere the breakdown opens.
topbottomsizeThe ring's diameter in pixels.
numberDefault 22What's new
- 2.0
- Fills in the Theme's accent
- Its breakdown stays dark on dark pages
- 1.0
- First release