Token Usage

A token usage card showing input/output counts, costs, a proportion bar, and an interactive token breakdown with type-based color badges.

Token usage

claude-sonnet-4.6

Input

4,391

$0.0132

Output

8,456

$0.1267

Total tokens12,847

$0.1399

Input 34%Output 66%

Token breakdown

SpecialSystem

Analyzethefollowingdatasetandreturn\n\n⊲system▷astructuredJSON```summarywithinsights.

Installation

import { TokenUsage } from '@/components/odysseyui/token-usage';

export default function Page() {
  return <TokenUsage />;
}

Displays input and output token counts with their individual costs side-by-side.
A proportion bar visualises the input/output split using violet and sky segments.
The token breakdown section renders each token as a Badge colored by type — secondary for regular text, orange for control characters, and purple for system tokens.
Hovering any token badge shows a Tooltip describing the token type.