Context

Installation

Complete project setup with vue/reka, then install these components:

pnpm exec frontfriend download hover-card button progress -f vue --primitive reka

Input and output counts come from message usage data. Set the limit from your selected model. The percent is clamped to 0–100, and a zero or invalid limit displays unavailable. The example uses fixed counts.

Usage

Complete example

<script setup lang="ts">
import { ref } from "vue";
import { computed } from "vue";
import { HoverCard } from "@/components/ui/hover-card";
import { HoverCardTrigger } from "@/components/ui/hover-card";
import { Button } from "@/components/ui/button";
import { HoverCardContent } from "@/components/ui/hover-card";
import { Progress } from "@/components/ui/progress";

const args = {
  "used": 10660,
  "limit": 128000,
};
const open = ref(false);
const valid = computed(
  () =>
    Number.isFinite(args.limit) && args.limit > 0 && Number.isFinite(args.used),
);
const percent = computed(() =>
  valid.value
    ? Math.min(100, Math.max(0, Math.round((args.used / args.limit) * 100)))
    : 0,
);
const rows = computed(() => {
  const used = valid.value ? Math.max(0, args.used) : 0;
  const input = Math.round((used * 8420) / 10660);
  const output = Math.round((used * 1260) / 10660);
  return [
    { label: "Input", value: input },
    { label: "Output", value: output },
    { label: "Reasoning", value: used - input - output },
  ];
});
</script>

<template>
  <div
    style="
      width: 100%;
      max-width: 560px;
      min-width: 0;
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      padding-block: 16px;
      font-size: var(--text-sm);
      line-height: 1.5;
    "
  >
    <HoverCard v-model:open="open" :open-delay="10" :close-delay="100"
      ><HoverCardTrigger as-child
        ><Button
          variant="outline"
          size="sm"
          @focus="open = true"
          @click="open = true"
          >{{ valid ? percent + "% context" : "Context unavailable" }}</Button
        ></HoverCardTrigger
      ><HoverCardContent
        ><div style="display: grid; gap: 12px; font-size: var(--text-sm)">
          <strong>Context window</strong>
          <p>
            {{
              valid
                ? Math.max(0, args.used).toLocaleString() +
                  " / " +
                  args.limit.toLocaleString() +
                  " tokens"
                : "Set a valid token limit."
            }}
          </p>
          <Progress :model-value="percent" aria-label="Context used" />
          <dl style="display: grid; gap: 6px">
            <div
              v-for="row in rows"
              :key="row.label"
              style="display: flex; justify-content: space-between; gap: 16px"
            >
              <dt>{{ row.label }}</dt>
              <dd>{{ row.value.toLocaleString() }}</dd>
            </div>
          </dl>
        </div></HoverCardContent
      ></HoverCard
    >
  </div>
</template>

Components and API

This composition has no separate component API. Use the APIs for its installed components.