Agent Limits Card

The agent budget widget - a context window usage bar segmented by token bucket with a used / max readout, and plan usage limits with reset times and progress bars. Expanding the context window grows the whole card to reveal the per-bucket breakdown, free space, deferred buckets, and collapsible member lists.

Plan usage limits · Max (5x)

5-hour limitResets in 2 hr 46 min38%

Weekly · all modelsResets Tue 3:00 PM3%

Weekly · ProResets Tue 3:00 PM5%

Simulated added context: 0

Illustrative usage only. This does not read your account limits.

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="agent-limits-card"/>;}

Expanded

Start with defaultExpanded to show the context breakdown. Each context group can open independently. Deferred entries display a dash and are excluded from both the total and the usage bar.

Messages520K52.0%

System tools96K9.6%

MCP tools68K6.8%

Skills54K5.4%

System prompt42K4.2%

Memory files24K2.4%

Custom agents16K1.6%

MCP tools (deferred)69.9KDeferred

Free space180K18%

Tool context groups

Browser · 54.2K tokens
Design tools · 48.1K tokens
Project files · 35.6K tokens

Plan usage limits · Max (5x)

5-hour limitResets in 2 hr 46 min38%

Weekly · all modelsResets Tue 3:00 PM3%

Weekly · ProResets Tue 3:00 PM5%

Simulated added context: 0

Illustrative usage only. This does not read your account limits.

usage

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="agent-limits-card" example="expanded"/>;}

Advanced playground, API and recovery states ↗

Agent Limits Card

Plan usage limits · Max (5x)

5-hour limitResets in 2 hr 46 min38%

Weekly · all modelsResets Tue 3:00 PM3%

Weekly · ProResets Tue 3:00 PM5%

Simulated added context: 0

Illustrative usage only. This does not read your account limits.

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="agent-limits-card"/>;}

Expanded

Start with defaultExpanded to show the context breakdown. Each context group can open independently. Deferred entries display a dash and are excluded from both the total and the usage bar.

Messages520K52.0%

System tools96K9.6%

MCP tools68K6.8%

Skills54K5.4%

System prompt42K4.2%

Memory files24K2.4%

Custom agents16K1.6%

MCP tools (deferred)69.9KDeferred

Free space180K18%

Tool context groups

Browser · 54.2K tokens
Design tools · 48.1K tokens
Project files · 35.6K tokens

Plan usage limits · Max (5x)

5-hour limitResets in 2 hr 46 min38%

Weekly · all modelsResets Tue 3:00 PM3%

Weekly · ProResets Tue 3:00 PM5%

Simulated added context: 0

Illustrative usage only. This does not read your account limits.

usage

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="agent-limits-card" example="expanded"/>;}

Advanced playground, API and recovery states ↗

Agent Limits Card

Plan usage limits · Max (5x)

Installation

Expanded

Plan usage limits · Max (5x)

Search Helios UI

Agent Limits Card

Plan usage limits · Max (5x)

Installation

Expanded

Plan usage limits · Max (5x)

Search Helios UI