Introduction Getting Started

Agent Workflow Chat Flow Charts Code Block Code Review ColorPicker Command Palette DataTable Diff Viewer Diff Viewer (Split)Diff Viewer (Unified)Diff Viewer (Git)FilePicker Form Builder Fuzzy Finder Help Bar Intro List Log Viewer Markdown Renderer Model Benchmark Modal MultiSelect PackageManager Paginator Permission Gate Pomodoro Timer Progress Space Spinner Splash Split Panes Spring Animation Stopwatch Streaming Chat Style System System Monitor Tabs Task List TextArea TextInput Timer Token Usage Tree View Viewport

Context Window Data Table Diff Viewer Form Builder List Multi Select Paginator Permission Prompt Progress Select Stopwatch Streaming Chat Tabs Text Area Text Input Timer Tool Call

ComponentsModern

Context Window

Visualizes LLM context/token usage with segmented bars, color transitions, and usage sparklines.

Demo

Features

Segmented bar showing system prompt, conversation, and tool result usage
Color transitions as usage grows (green → yellow → red)
Warning threshold indicator at 80%
Breakdown legend with per-section token counts
Sparkline showing usage trend over time
Two view modes: overview bar and detailed breakdown
Simulated context growth animation

Keybindings

v - Toggle between overview and breakdown view
r - Restart simulation

Tool Call

Feed-style display of AI agent tool invocations with status and results.

Data Table

Service dashboard with 2D cursor navigation, column sorting, row selection, inline filtering, and status indicators.

On this page