npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

opencode-usage-panel

v0.1.1

Published

Sidebar token-usage and cost panel for the opencode TUI. Breaks a session down by model with per-model cost, context usage, and configurable peak/off-peak pricing.

Readme

opencode-usage-panel

npm version

A sidebar panel for the opencode TUI that breaks a session down by model: how many tokens each one consumed and what it cost.

The Context block mirrors opencode's built-in panel — the token count and share of the context window for the latest assistant turn — but leaves out its cost, which does not account for peak pricing.

Each model gets a header row with its estimated cost, then the input (cache miss), output, reasoning, and cache read (cache hit) counters summed over the session. The percentage on each row is that counter's share of the model's own total tokens.

Requirements

  • opencode >= 1.18.0

The plugin is a TUI plugin: it imports from @opencode-ai/plugin/tui and renders into the sidebar_content slot at order 100, the same slot the built-in context panel uses.

Install

From npm

Available on npm: opencode-usage-panel.

Install it with the CLI:

opencode plugin opencode-usage-panel --global

Or add the package to tui.json yourself — opencode installs npm plugins on startup. Use .opencode/tui.json (project) or ~/.config/opencode/tui.json (global):

{
  "$schema": "https://opencode.ai/tui.json",
  "plugin": ["opencode-usage-panel"]
}

From a local checkout

There's no need to copy the file into a plugin directory. Point tui.json straight at the source with an absolute path (or a file:// URL):

{
  "$schema": "https://opencode.ai/tui.json",
  "plugin": ["/Users/you/opencode-usage-panel/src/index.tsx"]
}

Disable the built-in panel

The plugin renders into the same slot as opencode's built-in context panel, so turn that one off to avoid stacking:

{
  "plugin_enabled": {
    "internal:sidebar-context": false
  }
}

Pricing

Cost is computed per message from a rate table, so peak/off-peak pricing is honoured using each message's own timestamp. Models without a configured rate table fall back to the cost opencode records, which is priced automatically from models.dev (free tiers show ).

Rate tables

Prices are US dollars per million tokens. input is cache-miss input, cacheRead is cache-hit input, and output also covers reasoning unless a separate reasoning rate is given.

{
  "plugin": [
    [
      "opencode-usage-panel",
      {
        "pricing": {
          "deepseek-flash": {
            "input": 0.15,
            "output": 0.6,
            "cacheRead": 0.003,
            "peak": {
              "input": 0.3,
              "output": 1.2,
              "cacheRead": 0.006
            }
          }
        }
      }
    ]
  ]
}

Keys can be a bare modelID or providerID/modelID. Top-level rates apply outside peak windows; the optional peak block replaces them inside peak windows. A model without peak has flat pricing.

Peak windows

peakHours is always specified in UTC, since that is how providers publish their schedules. Windows may wrap past midnight, and days restricts them to UTC weekdays (mon..sun, JS-style 0..6 also accepted; omit for every day). DeepSeek's schedule — weekdays 01:00-04:00 and 06:00-10:00 UTC — is:

{
  "peakHours": [
    { "start": "01:00", "end": "04:00", "days": ["mon", "tue", "wed", "thu", "fri"] },
    { "start": "06:00", "end": "10:00", "days": ["mon", "tue", "wed", "thu", "fri"] }
  ]
}

Messages are matched against these windows in UTC, so the result is correct whatever your machine's timezone is. For display, times are converted to your local timezone by default (IST for Asia/Kolkata); set "timezone": "utc" to render them in UTC instead.

The extra cost paid for peak messages is shown under Spent. While a peak window is active the panel shows a ▲ peak badge next to affected models and the time the window ends; otherwise it lists the configured peak windows.

License

MIT — see LICENSE.