Skip to content

Settings & Usage

Context Window Meter

Token usage by segment — system, history, files, tools — with a near-limit warning and a compact action.

3 variantsMIT

Preview

Contextopus-5.5

57.0kof 200k · 28% full

Tinted cells mark the last 20%

  • Conversation22 turns18.4k
  • Workspace files4 open23.5k
  • MCP toolsgithub, linear11.8k
  • InstructionsAGENTS.md3.2k

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/context-window-meter.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { useState } from "react";
import { ContextWindowMeter } from "@/components/ui/context-window-meter";

export function ContextUsage({ usage }: { usage: Usage }) {
  const [compacting, setCompacting] = useState(false);

  return (
    <ContextWindowMeter
      data={{
        limit: 200_000,
        model: "opus-5.5",
        segments: [
          { id: "history", label: "Conversation", tokens: usage.history },
          { id: "files", label: "Workspace files", tokens: usage.files },
          { id: "tools", label: "MCP tools", tokens: usage.tools, pinned: true },
          { id: "system", label: "Instructions", tokens: usage.system, pinned: true },
        ],
      }}
      warnAt={0.8}
      compacting={compacting}
      onCompact={async () => {
        setCompacting(true);
        await agent.compact(); // summarize older turns
        setCompacting(false);
      }}
    />
  );
}

Props

PropTypeDefaultDescription
data*{ limit: number; segments: ContextSegment[]; model?: string }—The model's context limit, token counts per segment in fill order, and an optional model name shown as a tag.
warnAtnumber0.8Share of the limit where the tinted warning zone starts. Past it the count turns orange and the inline row shows Compact.
onCompact() => void—Shows a Compact button (always in the card, past `warnAt` inline). Summarize or drop context here.
compactingbooleanfalsePuts the Compact button in its loading state.
variant"card" | "inline""card"A panel with a 100-cell grid (1% per cell) and a legend, or a 20-cell row for a composer footer.
classNamestring—Extra classes for the root element.
type ContextSegment = {
  id: string;
  label: string;
  tokens: number;
  detail?: string; // secondary text, e.g. "4 open"
  pinned?: boolean; // shows a lock next to the label
  color?: string; // any CSS color; defaults to the built-in palette
};