TokenMeter

Measured before/after counts as bars, each with its numbers and saving in text. Built for the landing page's compact-responses section.

DataServer-rendered

Examples

Measured token counts

Bars scale to the largest "before". The solid part is what remains; the hatched part is what was cut. A row that saved nothing reads "Unchanged".

Light

Tokens per response, before and afterMeasured against pretty JSON

find_tools response8 tools and 2 skills3,701 to 1,643 tokens56% fewer
Nested issues30 GitHub REST issues9,165 to 5,491 tokens40% fewer
ProseA plain-text answer1,289 to 1,289 tokensUnchanged

Dark

Tokens per response, before and afterMeasured against pretty JSON

find_tools response8 tools and 2 skills3,701 to 1,643 tokens56% fewer
Nested issues30 GitHub REST issues9,165 to 5,491 tokens40% fewer
ProseA plain-text answer1,289 to 1,289 tokensUnchanged

Example

Wrap

<TokenMeter
  caption="Tokens per response, before and after"
  note="Measured against pretty JSON"
  rows={[
    { label: 'find_tools response', detail: '8 tools and 2 skills', before: 3701, after: 1643 },
    { label: 'Prose', before: 1289, after: 1289 },
  ]}
/>

Usage

Wrap

import { TokenMeter, percentSaved } from '@switchboard/ui'

<TokenMeter caption="…" rows={[{ label, detail?, before, after }]} note?="…" unit?="tokens" />

Props

Every component also takes mix, for css() and mixins applied after its own style.

`TokenMeter`

TokenMeter props
Prop	Type	Default	Description
rows*	{ label; detail?; before: number; after: number }[]	–	Measured counts only; never estimates dressed as measurements.
caption*	RemixNode	–	Figure caption; also names the list.
note	RemixNode	–	How the numbers were measured, at the right of the caption.
unit	string	"tokens"	Unit after the counts.

Also accepts every <figure> attribute.

Accessibility

A <figure> whose <figcaption> names a <ul>; each row is one list item.
Bars are aria-hidden. The counts ("3,701 to 1,643 tokens") and the saving ("56% fewer") are real text in the same item; the arrow is hidden and read as "to".
Savings use accent-ink on the page background, not the bar colour, for text contrast.