# Context

A compact token-usage meter with a hover-card breakdown — drop it into any chat header to keep users aware of how much context window remains.

<p class="kai-tag-sub">kai-context</p>

A compact token-usage meter with a hover-card breakdown — shows used vs. available context at a glance, with input, output, reasoning, and cache line items revealed on hover.

## Preview

> **tip:** 
Place `<kai-context>` in a chat header or toolbar alongside a model switcher. The meter is `inline-block` and compact — it fits next to other controls without its own row. Wire `kai-threshold-change` to act when usage reaches `'warn'` or `'danger'` (e.g. prompt the user to start a new conversation).

## Usage

Set `context` in JavaScript with a usage object:

```js

await customElements.whenDefined('kai-context');

const el = document.querySelector('kai-context');
el.context = {
  usedTokens: 48200,
  maxTokens: 200000,
  inputTokens: 31000,
  outputTokens: 17200,
  reasoningTokens: 4200, // optional — shown when present
  cacheTokens: 8000,     // optional — shown when present
  estimatedCost: 0.42,   // optional — shown in the footer
};
```

- **`context`** — the element renders nothing until data arrives, so it's safe to place unconditionally in the header.
- **`warnThreshold` / `dangerThreshold`** are fractional (0–1) number properties, defaulting to `0.7` and `0.9`. Assign directly: `el.warnThreshold = 0.5`.

## Examples

### Default

Meter at ~24% usage with a full breakdown. Hover to reveal the popover.

### Warning Threshold

At 75% the meter turns yellow — above the default `warnThreshold` of 0.7.

### Danger Threshold

At 92% the meter turns red — above the default `dangerThreshold` of 0.9.

### Custom Thresholds

`warnThreshold: 0.5`, `dangerThreshold: 0.75` — the meter warns earlier.

## Styling

The meter inside the hover-card breakdown exposes two `::part`s. Both are in the DOM only while the card is open.

## Props

## Events

## Composed from