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-visual-cache

v1.3.0

Published

OpenCode TUI plugin displaying real-time token cache hit rate in the sidebar

Downloads

2,579

Readme

GitHub Stars License English NPM Version


子代理监控 感兴趣吗?可以试试 opencode-subagent-magazine 这个插件!


1. 图片展示


2. 功能

  • 缓存命中率:实时计算并显示缓存命中率,自适应宽度进度条
  • Token 明细:缓存读 / 缓存写 / 未命中 / 输出,标签左对齐 · 数据右对齐
  • 费用与节省:Session 累计费用 + 缓存命中带来的费用节省
  • 模型定价:显示当前模型的输入 / 缓存读 / 缓存写单价(从 provider 配置动态读取)
  • 折叠面板:主标题默认折叠,点击展开;明细、模型、分布各自独立折叠
  • 颜色自适应:命中率 ≥85% 绿 · ≥70% 橙 · <70% 红,颜色从主题色自动去饱和
  • Token 分布:按角色(系统提示 / 用户 / Agent 指令 / Tool 调用 / Tool 结果)展示估算 Token 占比
  • 折叠记忆:折叠状态持久化,重启后保持
  • 语言适配:自动检测系统语言,支持 /cache-lang 运行时切换中/英文,偏好持久化
  • 多币种:通过 /cache-currency 切换货币,费用和节省同步换算
  • 斜杠命令/cache-rate /cache-section /cache-config /cache-lang 动态配置面板
  • 已加载技能:检测 session 中 LLM 调用 skill tool 的记录,展示已加载技能名及估算 Token 占用

3. 安装

3.1 方式一:OpenCode 命令安装(推荐)

在 OpenCode 中按 Ctrl + P 打开命令面板,搜索 install plugin,输入:

opencode-visual-cache@latest

回车即可完成安装与配置。

3.2 方式二:手动安装

1. 安装插件

npm install -g opencode-visual-cache@latest

2. 配置 TUI 插件

创建或编辑 ~/.config/opencode/tui.jsonc

{
  "$schema": "https://opencode.ai/tui.json",
  "plugin": ["opencode-visual-cache@latest"]
}

3.3 重启 OpenCode

进入任意 session,侧边栏即可看到缓存统计面板。


4. 使用指南

4.1 斜杠命令

插件支持通过斜杠命令或命令面板(Ctrl + P)动态调整配置,所有设置即时生效并持久化:

| 命令 | 功能 | 使用方式 | |------|------|---------| | /cache-currency | 切换货币单位 | 从列表选择货币(USD / CNY / EUR / JPY / GBP / KRW),自动填入默认汇率 | | /cache-rate | 调整汇率乘数 | 输入自定义汇率(如 7.2),用于费用换算 | | /cache-section | 开关区块与边框 | 独立控制 Token 明细 / 模型与定价 / 估算 Token 分布 / 已加载技能 / 面板边框的显隐 | | /cache-config | 查看当前配置 | 弹出当前货币、汇率、区块可见性状态 | | /cache-lang | 切换显示语言 | 从列表选择中文或 English,界面即时切换,无需重启 |

切换货币时会自动填入离线内置的近似汇率(以 USD 为基准),用户可随时通过 /cache-rate 自定义。

4.2 货币与汇率

费用展示支持多币种切换:

| 货币代码 | 符号 | 默认汇率(1 USD = ?) | |---------|------|---------------------| | USD | $ | 1 | | CNY | ¥ | 7.2 | | EUR | | 0.92 | | JPY | JP¥ | 150 | | GBP | £ | 0.79 | | KRW | | 1350 |

汇率会同步应用到 Session 累计费用、缓存节省金额、以及模型单价展示。

基币说明:插件假设提供商定价均为美元(USD)。目前主流 AI API(OpenAI / Anthropic / Google / DeepSeek / xAI 等)的国际版均以 USD 计价。如果你使用的提供商以人民币或其他货币计价,请将汇率设为 1

4.3 区块可见性

面板中的子区块可以独立关闭,方便在侧边栏空间紧张时隐藏不需要的信息:

  • Token 明细:缓存读 / 缓存写 / 未命中 / 输出
  • 模型与定价:费用 / 提供商 / 模型名 / 单价
  • 估算 Token 分布:按角色拆分的 Token 估算
  • 已加载技能:session 中 LLM 实际调用过的 Skill 名及估算 Token 占用

通过 /cache-section 切换后即时生效,无需重启。此外,该命令还可以开关面板的外边框——关闭后内容会顶格显示,释放额外空间。

关于 Token 分布数值:分布面板中"总计"为最后一次 API 调用的精确 token 数,"系统提示"/"用户"等分项为字符级 BPE 估算值。分项之和通常小于总计,差值主要来自 OpenCode 运行时注入的系统提示组成部分,包括环境信息、Skill 目录、工具 Schema 定义等(详见 system.tstools.ts)。这些内容不在 agent 配置的 prompt 字段中,因此插件无法估算,属于预期行为。


5. 更新

由于 OpenCode 已知问题 #6774,插件缓存会锁死在首次安装时的版本,不会自动检测 npm 上的新版本。

更新步骤:

1. 清除 OpenCode 插件缓存

# Windows
Remove-Item -Recurse -Force "$env:USERPROFILE\.cache\opencode\packages\opencode-visual-cache@latest"
# macOS / Linux
rm -rf ~/.cache/opencode/packages/opencode-visual-cache@latest

2. 重新安装插件

在 OpenCode 中按 Ctrl + Pinstall pluginopencode-visual-cache@latest → 回车

3. 重启 OpenCode


6. 语言设置

插件支持三种方式控制显示语言,按优先级从高到低排列:

6.1 运行时切换(推荐)

在 TUI 中输入 /cache-lang,从弹窗选择「中文」或「English」即可即时切换,无需重启。偏好会自动持久化,下次启动自动恢复。

6.2 环境变量覆盖

启动前设置 CACHE_TUI_LANG 环境变量可强制指定语言:

# Windows PowerShell
$env:CACHE_TUI_LANG="en"; opencode
# macOS / Linux
CACHE_TUI_LANG=en opencode

6.3 自动检测

默认自动检测系统语言。若不符合预期,用 /cache-lang 手动切换一次即可,偏好会被记住。


7. 兼容性

代码完全模型无关,支持所有 OpenCode 兼容的 AI 模型(DeepSeek / Claude / GPT 等)。 Token 数据和定价信息均通过 OpenCode SDK 标准接口获取。


8. License

MIT