Ai Context Meter

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import { useState } from "react";
6 
7const SPRING_DEFAULT = {
8  bounce: 0.1,
9  duration: 0.25,
10  type: "spring" as const,
11};
12const EASE_OUT = [0.23, 1, 0.32, 1] as const;
13const VIEWBOX = 32;
14const CENTER = VIEWBOX / 2;
15const RADIUS = 13;
16const STROKE_WIDTH = 3;
17/** Fraction of the window at which the ring changes hue. */
18const DEFAULT_WARNING_AT = 0.8;
19const DEFAULT_DANGER_AT = 0.95;
20const WARNING_COLOR = "oklch(78% 0.16 75)";
21const DANGER_COLOR = "oklch(63% 0.21 25)";
22 
23export type AIContextBreakdownItem = {
24  label: string;
25  tokens: number;
26};
27 
28export type AIContextMeterProps = {
29  /** Optional split of what is filling the window. */
30  breakdown?: AIContextBreakdownItem[];
31  className?: string;
32  /** Fraction at which the ring turns red. */
33  dangerAt?: number;
34  /** Total size of the context window, in tokens. */
35  limit: number;
36  /** Tokens currently used. */
37  used: number;
38  /** Fraction at which the ring turns amber. */
39  warningAt?: number;
40};
41 
42const COMPACT_THRESHOLD = 1000;
43const MILLION = 1_000_000;
44 
45/** Below this many thousands, keep a decimal — "2k" for 1,800 is a lie. */
46const DECIMAL_BELOW = 10 * COMPACT_THRESHOLD;
47 
48const formatTokens = (tokens: number): string => {
49  if (tokens >= MILLION) {
50    return `${(tokens / MILLION).toFixed(1)}M`;
51  }
52  if (tokens >= DECIMAL_BELOW) {
53    return `${Math.round(tokens / COMPACT_THRESHOLD)}k`;
54  }
55  if (tokens >= COMPACT_THRESHOLD) {
56    return `${(tokens / COMPACT_THRESHOLD).toFixed(1)}k`;
57  }
58  return String(tokens);
59};
60 
61/**
62 * How much of the context window is gone.
63 *
64 * Crossing a threshold changes the **hue**, never the size. Growing the ring at
65 * the warning point would read as progress — as something filling up nicely —
66 * which is the opposite of the message. The geometry stays put and the colour
67 * does the talking.
68 */
69const AIContextMeter = ({
70  breakdown,
71  className,
72  dangerAt = DEFAULT_DANGER_AT,
73  limit,
74  used,
75  warningAt = DEFAULT_WARNING_AT,
76}: AIContextMeterProps) => {
77  const shouldReduceMotion = useReducedMotion();
78  const [isOpen, setIsOpen] = useState(false);
79 
80  const fraction = limit > 0 ? Math.min(1, Math.max(0, used / limit)) : 0;
81  const percent = Math.round(fraction * 100);
82 
83  const color = (() => {
84    if (fraction >= dangerAt) {
85      return DANGER_COLOR;
86    }
87    if (fraction >= warningAt) {
88      return WARNING_COLOR;
89    }
90// … truncated