ContextMeter

How much of the model's memory the chat has used.

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import { ContextMeter } from '@kerf-js/veneer'import type { ContextUse } from '@kerf-js/veneer'export function Compact() {  const used = state(186000)  return (    <ContextMeter      used={used.value}      limit={200000}      parts={CONTEXT.parts}      showTokens      onCompact={() => (used.value = 38000)}    />  )}const CONTEXT: ContextUse = {  used: 46000,  limit: 200000,  parts: [    { label: 'Logs', tokens: 22000 },    { label: 'History', tokens: 16000 },    { label: 'Tools', tokens: 8000 },  ],}

Installation

npm install @kerf-js/veneer

Usage

tsx

import { ContextMeter } from '@kerf-js/veneer'

Levels

It turns to caution at 80% and critical at 95%. Hover for what fills it.

tsx

import { ContextMeter } from '@kerf-js/veneer'export function Levels() {  return (  <>    <ContextMeter      used={64000}      limit={200000}      showTokens    />    <ContextMeter      used={168000}      limit={200000}      showTokens    />    <ContextMeter      used={194000}      limit={200000}      showTokens    />  </>  )}

Accessibility

It is a meter that can take focus, so keyboard users get the tooltip too.

API Reference

Prop	Type	Default	Description
`used`	`number`	—	Tokens used.
`limit`	`number`	—	Tokens available.
`parts`	`{ label: string; tokens: number; }[]`	—	What fills it, for the tooltip.
`showTokens`	`boolean`	`false`	Adds the count beside the percent.

Event	Type	Default	Description
`onCompact`	`(() => void)`	—	Offers /compact when it is getting full.

RelatedPrompt