Usage Meter

1'use client';
2 
3import { cn } from '@/lib/utils';
4import type { UsageState } from './types';
5 
6export type UsageMeterVariant = 'Bar' | 'Inline';
7 
8export interface UsageMeterProps {
9  usage: UsageState;
10  variant?: UsageMeterVariant;
11  className?: string;
12}
13 
14function formatTokens(count: number) {
15  if (count < 1000) return `${count}`;
16  return `${(count / 1000).toFixed(1)}k`;
17}
18 
19export function UsageMeter({ usage, variant = 'Bar', className }: UsageMeterProps) {
20  const used = usage.promptTokens + usage.completionTokens;
21  const ratio = Math.min(1, used / usage.contextWindow);
22  const percent = Math.round(ratio * 100);
23 
24  const barColor =
25    ratio > 0.9
26      ? 'bg-red-500/80'
27      : ratio > 0.75
28        ? 'bg-amber-500/80'
29        : 'bg-neutral-900 dark:bg-neutral-100';
30 
31  if (variant === 'Inline') {
32    return (
33      <div
34        className={cn(
35          'flex w-fit items-center gap-2.5 font-mono text-[11.5px] tabular-nums text-neutral-500 dark:text-neutral-400',
36          className,
37        )}
38      >
39        <span aria-hidden className="h-1 w-16 overflow-hidden rounded-full bg-black/[0.07] dark:bg-white/[0.09]">
40          <span
41            className={cn('block h-full rounded-full transition-[width] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]', barColor)}
42            style={{ width: `${percent}%` }}
43          />
44        </span>
45        <span>
46          {formatTokens(used)} / {formatTokens(usage.contextWindow)}
47        </span>
48        {usage.estimatedCostUsd !== undefined && (
49          <span className="text-neutral-400 dark:text-neutral-600">
50            ${usage.estimatedCostUsd.toFixed(4)}
51          </span>
52        )}
53      </div>
54    );
55  }
56 
57  return (
58    <div className={cn('w-full max-w-[380px]', className)}>
59      <div className="flex items-baseline justify-between gap-3">
60        <span className="text-[12.5px] font-medium text-neutral-800 dark:text-neutral-200">
61          Context window
62        </span>
63        <span className="font-mono text-[11.5px] tabular-nums text-neutral-500 dark:text-neutral-400">
64          {formatTokens(used)} / {formatTokens(usage.contextWindow)} · {percent}%
65        </span>
66      </div>
67 
68      <div
69        role="meter"
70        aria-valuemin={0}
71        aria-valuemax={usage.contextWindow}
72        aria-valuenow={used}
73        aria-label="Context window usage"
74        className="mt-2 h-1.5 overflow-hidden rounded-full bg-black/[0.06] dark:bg-white/[0.08]"
75      >
76        <span
77          className={cn(
78// … truncated