Context

Token usage indicator - circular progress trigger with a hover card breakdown of input, output, reasoning, cache and total cost.

Overview

Context shows how much of the model's context window the current conversation has consumed. The trigger is a tiny circular gauge with the percentage; hovering reveals a card with token counts (input, output, reasoning, cache) and an estimated USD cost computed via tokenlens.

Use it in the chat toolbar next to the prompt input so users can pace longer conversations and spot context-pressure before they hit the limit.

Preview

'use client';import {  Context,  ContextContent,  ContextContentBody,  ContextContentHeader,  ContextTrigger,} from '@gremorie/rx-ai';import { Button } from '@gremorie/rx-forms';export function ContextPreview() {  return (    <Context usedTokens={4321} maxTokens={8000}>      <ContextTrigger>        <Button variant="outline" size="sm">          4.3k / 8k tokens        </Button>      </ContextTrigger>      <ContextContent>        <ContextContentHeader>          <p className="text-sm font-medium">Context window</p>        </ContextContentHeader>        <ContextContentBody>          <p className="text-xs text-muted-foreground">            54 percent used. Detail token breakdown would render here.          </p>        </ContextContentBody>      </ContextContent>    </Context>  );}

Installation

bash npx gremorie@latest add rx-context

bash pnpm dlx gremorie@latest add rx-context

bash yarn dlx gremorie@latest add rx-context

bash bunx --bun gremorie@latest add rx-context

Usage

import {
  Context,
  ContextTrigger,
  ContextContent,
  ContextContentHeader,
  ContextContentBody,
  ContextContentFooter,
  ContextInputUsage,
  ContextOutputUsage,
} from "@gremorie/rx-ai";

export function Example({ usage }) {
  return (
    <Context
      usedTokens={usage.totalTokens}
      maxTokens={200_000}
      usage={usage}
      modelId="anthropic/claude-sonnet-4"
    >
      <ContextTrigger />
      <ContextContent>
        <ContextContentHeader />
        <ContextContentBody>
          <ContextInputUsage />
          <ContextOutputUsage />
        </ContextContentBody>
        <ContextContentFooter />
      </ContextContent>
    </Context>
  );
}

Angular edition planned for Phase 5h. Star the repo to track progress.

API

`<Context>`

Prop	Type	Default	Description
`usedTokens`	`number`	-	Required. Total tokens consumed. Drives the percentage and progress bar.
`maxTokens`	`number`	-	Required. Model context window.
`usage`	`LanguageModelUsage`	-	Optional AI SDK usage payload (input, output, reasoning, cached). Drives per-bucket breakdown.
`modelId`	`string`	-	Optional `tokenlens` model id used to compute costs.

Extends ComponentProps<typeof HoverCard>.

Region	Default content
Header	Percent + compact `used / total` tokens + `Progress` bar
Body	Container for per-bucket usage rows
Footer	Total cost in USD (via `tokenlens`) on a `bg-secondary` surface

All accept children to override the defaults.

Usage rows

<ContextInputUsage>, <ContextOutputUsage>, <ContextReasoningUsage>, <ContextCacheUsage>

Auto-hide when the corresponding usage bucket is zero. Render a label + token count + cost. Override with children for custom layouts.

Composition

<Context> receives usage data and provides it via context to children.
<ContextTrigger> is the toolbar pill (percentage + gauge).
<ContextContent> is the hover card.
Inside the content, <ContextContentHeader> shows the headline, <ContextContentBody> lists per-bucket rows, <ContextContentFooter> shows total cost.

Variations

Minimal trigger + auto-populated card

The "happy path". Defaults give you everything: percent, total tokens, per-bucket rows, USD cost.

<Context
  usedTokens={usage.totalTokens}
  maxTokens={200_000}
  usage={usage}
  modelId="anthropic/claude-sonnet-4"
>
  <ContextTrigger />
  <ContextContent>
    <ContextContentHeader />
    <ContextContentBody>
      <ContextInputUsage />
      <ContextOutputUsage />
      <ContextReasoningUsage />
      <ContextCacheUsage />
    </ContextContentBody>
    <ContextContentFooter />
  </ContextContent>
</Context>

Custom trigger label

Replace the default percent + gauge with a custom label (e.g. raw token counts) for power users.

<Context usedTokens={used} maxTokens={max}>
  <ContextTrigger>
    <Button variant="ghost">
      <CircleIcon className="size-4" />
      {used.toLocaleString()} / {max.toLocaleString()}
    </Button>
  </ContextTrigger>
  <ContextContent>...</ContextContent>
</Context>

Drop modelId and ContextContentFooter to hide pricing on free or self-hosted models.

<Context usedTokens={used} maxTokens={max} usage={usage}>
  <ContextTrigger />
  <ContextContent>
    <ContextContentHeader />
    <ContextContentBody>
      <ContextInputUsage />
      <ContextOutputUsage />
    </ContextContentBody>
  </ContextContent>
</Context>

Accessibility

Keyboard: the trigger is a real Button and the hover card opens on focus as well as hover (Radix default).
ARIA: the circular gauge SVG carries role="img" and aria-label="Model context usage". The percentage is also rendered as live text, so screen readers do not depend on the gauge alone.
Screen readers: each row pairs a label (Input, Output, Reasoning, Cache) with token + cost values, so the breakdown reads naturally.
Focus management: hover card uses Radix focus trapping; pressing Esc returns focus to the trigger.

PromptInput - the toolbar where Context typically lives
ModelSelector - pair with Context to expose model + usage in one row