Token Budget Meter
The fill climbs to the conversation's usage while its colour walks to amber, and the trim notice fades in at the threshold.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef, useState } from "react";
import {
animate,
motion,
useMotionValue,
useMotionValueEvent,
useReducedMotion,
useTransform,About this pattern
A context window is invisible until it runs out, and then it takes the earlier half of the conversation with it. This puts the budget on screen: one motion value drives the fill, the running count and the colour together, so the bar, the number and the tint can never disagree mid-climb. It is a tween rather than a spring on purpose — a meter that overshoots its value, even for a fifth of a second, shows a figure that is not true. The trim notice is tied to the fill crossing the threshold rather than to a timer, so it appears at the exact moment it starts to mean something.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
A running token count against the selected model's window, shown beside the composer.
Related patterns
- Inline Completion GhostA faint prediction appears ahead of the caret and firms up to real content when it is accepted.
- Context Pill AttachA dragged file is caught by the prompt bar and lands inside it as a context pill.
- Agent Step TimelineEach finished stage of an agent run ticks over and grows its connector toward the one after it.