opencode-context-bar

OpenCode TUI plugin — displays a visual context usage progress bar at the bottom of the app.

![screenshot placeholder]

Features

• 40-character Unicode progress bar (█ filled, ░ unused)
• Color-coded by usage: success (≤50%) → primary (>50%) → warning (>75%) → error (>90%)
• Shows percentage and token count (e.g., 36% 357K)
• Follows the active OpenCode theme
• Auto-updates on message changes, session switches, and compaction
• Stale data preserved during generation — no flashing

Install

npm install opencode-context-bar
# or
bun install opencode-context-bar

Make sure @opencode-ai/plugin and solid-js are installed in your config directory:

bun install @opencode-ai/plugin solid-js

Usage

Add to your ~/.config/opencode/tui.json:

{
  "plugin": ["opencode-context-bar"]
}

Or keep using the local file reference:

{
  "plugin": ["./plugins/context-bar.tsx"]
}

How it works

The plugin registers an app_bottom slot that renders a colored progress bar. It reads the last assistant message's tokens.total (or tokens.input + cache.read as fallback) and the provider model's limit.context to calculate usage percentage.

License

MIT