Context window

Context-window meter with four dithered segments, warnings at 80% and 95% and a compaction sweep; runs on built-in demo data.

View as Markdown

<hf-context>· loading

Tryadd messages until it warns, then compact.

Installation

pnpm dlx shadcn@latest add @lumesec/hf-context

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-context.json

Usage

import { HfContext } from "@/components/lumesec/hf-context";

export function Example() {
  return (
    <HfContext />
  );
}

Behaviour

Your favourite, rebuilt in HD: four segments with dithered boundaries, warnings at 80% and 95%, and a compaction sweep that squeezes the conversation back down. Hover the legend to isolate a segment.

API reference

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

changeReact proponChangeDetail{ used: number }

Fires after addTo() or a built-in add button grows the context. used is in thousands of tokens.

compactReact proponCompactDetail{ used: number }

Fires after compaction with the new total, in thousands of tokens.

Methods

Call them on the element, for example through a React ref.

addTo(index: number, k: number)

Adds k thousand tokens to segment index (0 System, 1 Tools, 2 Files, 3 Conversation), capped at the free space. When the window is full the bar shakes and nothing is emitted.

compact()

Shrinks Conversation to a quarter of its size, at least 6k, with a sweep. Does nothing if it is already that small.

Properties

used (read-only)Typenumber

Total tokens in use, in thousands.

Accessibility

The canvas has role="meter", aria-label="Context window", aria-valuemin="0", aria-valuemax="100", aria-valuenow as a percentage and aria-valuetext such as 65% used, 130k of 200k tokens.
The percentage is in an aria-live="polite" region.
Legend items have tabindex="0"; focusing one isolates its segment, as hover does.
The three actions are native buttons.
Reduced motion: segments resize without easing, the edge flicker and the pulse at 95% are off, numbers swap without rolling and the full-window shake is skipped; the compaction sweep still plays.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --destructive, --foreground, --lumesec, --lumesec-warning and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-danger, --ui-fg, --ui-mono, --ui-muted and --ui-warn.

Notes

Runs on built-in demo data: a 200k window holding System 8k, Tools 14k, Files 46k and Conversation 62k. There are no attributes for capacity or segment sizes.
The buttons Send a message (+6k), Attach file (+18k) and Compact are always shown.

<hf-progress>

<hf-gauge>

<hf-rings>

<hf-status>

Was this page helpful?

Related