[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-80322":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":14,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":15,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":16,"starSnapshotCount":16,"syncStatus":36,"lastSyncTime":37,"discoverSource":38},80322,"opencode-visual-cache","Hotakus\u002Fopencode-visual-cache","Hotakus","OpenCode TUI 插件 · 实时 Token 缓存命中率 · 侧边栏可视化 \u002F Real-time Token Cache Hit Rate Sidebar Plugin for OpenCode TUI","",null,"TypeScript",107,3,1,8,0,22,37,58.51,"MIT License",false,"master",true,[25,26,27,28,29,30,31,32],"cache","hit","npm","opencode","opencode-plugin","sidebar","software","token","2026-06-11 04:07:05","\u003Cdiv align=\"center\">\n\u003Cstrong>\n    \u003Ch1>OpenCode Visual Cache\u003C\u002Fh1>\n    实时 Token 缓存命中率 · TUI 侧边栏可视化\u003Cbr>\n    自适应主题色 · 自动低饱和设计语言 · 支持中\u002F英双语\n\u003C\u002Fstrong>\n\u003Cbr>\n\u003Cbr>\n如果你觉得这个插件不错的话，可以帮我点点小星星 ⭐，谢谢！\u003Cbr>\n\u003Cbr>\n\n[![GitHub](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FGitHub-Repository-black?style=flat-square&logo=github)](https:\u002F\u002Fgithub.com\u002FHotakus\u002Fopencode-visual-cache)\n[![Stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FHotakus\u002Fopencode-visual-cache?style=flat-square)](https:\u002F\u002Fgithub.com\u002FHotakus\u002Fopencode-visual-cache\u002Fstargazers)\n[![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue.svg?style=flat-square)](LICENSE)\n[![English](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FEnglish-README-blue?style=flat-square)](https:\u002F\u002Fgithub.com\u002FHotakus\u002Fopencode-visual-cache\u002Fblob\u002Fmaster\u002FREADME_EN.md)\n![NPM Version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fopencode-visual-cache?style=flat-square)\n\n\u003C\u002Fdiv>\n\n---\n\n## 1. 图片展示\n\n\u003Cdiv align=\"center\"> \n\u003Cstrong>支持折叠，节省侧边栏占用👇\u003C\u002Fstrong> \u003Cbr>\n\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FHotakus\u002Fopencode-visual-cache\u002Fmaster\u002Fassets\u002Fcollapse.png\">\u003C\u002Fimg>\n\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FHotakus\u002Fopencode-visual-cache\u002Fmaster\u002Fassets\u002Fcollapse_en.png\">\u003C\u002Fimg>\n\u003C\u002Fdiv>\n\u003Cdiv align=\"center\"> \n\u003Cstrong>展开👇\u003C\u002Fstrong> \u003Cbr>\n\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FHotakus\u002Fopencode-visual-cache\u002Fmaster\u002Fassets\u002Fexpand.png\">\u003C\u002Fimg>\n\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FHotakus\u002Fopencode-visual-cache\u002Fmaster\u002Fassets\u002Fexpand_en.png\">\u003C\u002Fimg>\n\u003C\u002Fdiv>\n\n\n---\n## 2. 功能\n\n- **缓存命中率**：实时计算并显示缓存命中率，自适应宽度进度条\n- **Token 明细**：缓存读 \u002F 缓存写 \u002F 未命中 \u002F 输出，标签左对齐 · 数据右对齐\n- **费用与节省**：Session 累计费用 + 缓存命中带来的费用节省\n- **模型定价**：显示当前模型的输入 \u002F 缓存读 \u002F 缓存写单价（从 provider 配置动态读取）\n- **折叠面板**：主标题默认折叠，点击展开；明细、模型、分布各自独立折叠\n- **颜色自适应**：命中率 ≥85% 绿 · ≥70% 橙 · \u003C70% 红，颜色从主题色自动去饱和\n- **Token 分布**：按角色（系统提示 \u002F 用户 \u002F Agent 指令 \u002F Tool 调用 \u002F Tool 结果）展示估算 Token 占比\n- **折叠记忆**：折叠状态持久化，重启后保持\n- **语言适配**：自动检测系统语言，支持 `\u002Fcache-lang` 运行时切换中\u002F英文，偏好持久化\n- **多币种**：通过 `\u002Fcache-currency` 切换货币，费用和节省同步换算\n- **斜杠命令**：`\u002Fcache-rate` `\u002Fcache-section` `\u002Fcache-config` `\u002Fcache-lang` 动态配置面板\n- **已加载技能**：检测 session 中 LLM 调用 `skill` tool 的记录，展示已加载技能名及估算 Token 占用\n\n---\n\n## 3. 安装\n\n### 3.1 方式一：OpenCode 命令安装（推荐）\n\n在 OpenCode 中按 **`Ctrl + P`** 打开命令面板，搜索 **`install plugin`**，输入：\n\n```\nopencode-visual-cache@latest\n```\n\n回车即可完成安装与配置。\n\n### 3.2 方式二：手动安装\n\n**1. 安装插件**\n\n```bash\nnpm install -g opencode-visual-cache@latest\n```\n\n**2. 配置 TUI 插件**\n\n创建或编辑 `~\u002F.config\u002Fopencode\u002Ftui.jsonc`：\n\n```jsonc\n{\n  \"$schema\": \"https:\u002F\u002Fopencode.ai\u002Ftui.json\",\n  \"plugin\": [\"opencode-visual-cache@latest\"]\n}\n```\n\n### 3.3 重启 OpenCode\n\n进入任意 session，侧边栏即可看到缓存统计面板。\n\n---\n\n## 4. 使用指南\n\n### 4.1 斜杠命令\n\n插件支持通过斜杠命令或命令面板（`Ctrl + P`）动态调整配置，所有设置即时生效并持久化：\n\n| 命令 | 功能 | 使用方式 |\n|------|------|---------|\n| `\u002Fcache-currency` | 切换货币单位 | 从列表选择货币（USD \u002F CNY \u002F EUR \u002F JPY \u002F GBP \u002F KRW），自动填入默认汇率 |\n| `\u002Fcache-rate` | 调整汇率乘数 | 输入自定义汇率（如 `7.2`），用于费用换算 |\n| `\u002Fcache-section` | 开关区块与边框 | 独立控制 Token 明细 \u002F 模型与定价 \u002F 估算 Token 分布 \u002F 已加载技能 \u002F 面板边框的显隐 |\n| `\u002Fcache-config` | 查看当前配置 | 弹出当前货币、汇率、区块可见性状态 |\n| `\u002Fcache-lang` | 切换显示语言 | 从列表选择中文或 English，界面即时切换，无需重启 |\n\n\u003Cdiv align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FHotakus\u002Fopencode-visual-cache\u002Fmaster\u002Fassets\u002Fsplash_cmd.png\" alt=\"斜杠命令\" width=\"49%\">\u003C\u002Fimg>\n  \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FHotakus\u002Fopencode-visual-cache\u002Fmaster\u002Fassets\u002FctrlP_cmd.png\" alt=\"Ctrl+P 命令面板\" width=\"49%\">\u003C\u002Fimg>\n\u003C\u002Fdiv>\n\n切换货币时会自动填入离线内置的近似汇率（以 USD 为基准），用户可随时通过 `\u002Fcache-rate` 自定义。\n\n### 4.2 货币与汇率\n\n费用展示支持多币种切换：\n\n| 货币代码 | 符号 | 默认汇率（1 USD = ?） |\n|---------|------|---------------------|\n| USD | `$` | 1 |\n| CNY | `¥` | 7.2 |\n| EUR | `€` | 0.92 |\n| JPY | `JP¥` | 150 |\n| GBP | `£` | 0.79 |\n| KRW | `₩` | 1350 |\n\n> 汇率会同步应用到 Session 累计费用、缓存节省金额、以及模型单价展示。\n>\n> **基币说明**：插件假设提供商定价均为美元（USD）。目前主流 AI API（OpenAI \u002F Anthropic \u002F Google \u002F DeepSeek \u002F xAI 等）的国际版均以 USD 计价。如果你使用的提供商以人民币或其他货币计价，请将汇率设为 `1`。\n\n### 4.3 区块可见性\n\n面板中的子区块可以独立关闭，方便在侧边栏空间紧张时隐藏不需要的信息：\n\n- **Token 明细**：缓存读 \u002F 缓存写 \u002F 未命中 \u002F 输出\n- **模型与定价**：费用 \u002F 提供商 \u002F 模型名 \u002F 单价\n- **估算 Token 分布**：按角色拆分的 Token 估算\n- **已加载技能**：session 中 LLM 实际调用过的 Skill 名及估算 Token 占用\n\n通过 `\u002Fcache-section` 切换后即时生效，无需重启。此外，该命令还可以开关面板的**外边框**——关闭后内容会顶格显示，释放额外空间。\n\n> **关于 Token 分布数值**：分布面板中\"总计\"为最后一次 API 调用的精确 token 数，\"系统提示\"\u002F\"用户\"等分项为字符级 BPE 估算值。分项之和通常小于总计，差值主要来自 OpenCode 运行时注入的系统提示组成部分，包括环境信息、Skill 目录、工具 Schema 定义等（详见 [`system.ts`](https:\u002F\u002Fgithub.com\u002Fanomalyco\u002Fopencode\u002Fblob\u002Fdev\u002Fpackages\u002Fopencode\u002Fsrc\u002Fsession\u002Fsystem.ts)、[`tools.ts`](https:\u002F\u002Fgithub.com\u002Fanomalyco\u002Fopencode\u002Fblob\u002Fdev\u002Fpackages\u002Fopencode\u002Fsrc\u002Fsession\u002Ftools.ts)）。这些内容不在 agent 配置的 `prompt` 字段中，因此插件无法估算，属于预期行为。\n\n---\n\n## 5. 更新\n\n由于 [OpenCode 已知问题 #6774](https:\u002F\u002Fgithub.com\u002Fanomalyco\u002Fopencode\u002Fissues\u002F6774)，插件缓存会锁死在首次安装时的版本，不会自动检测 npm 上的新版本。\n\n更新步骤：\n\n**1. 清除 OpenCode 插件缓存**\n\n```powershell\n# Windows\nRemove-Item -Recurse -Force \"$env:USERPROFILE\\.cache\\opencode\\packages\\opencode-visual-cache@latest\"\n```\n\n```bash\n# macOS \u002F Linux\nrm -rf ~\u002F.cache\u002Fopencode\u002Fpackages\u002Fopencode-visual-cache@latest\n```\n\n**2. 重新安装插件**\n\n在 OpenCode 中按 **`Ctrl + P`** → `install plugin` → `opencode-visual-cache@latest` → 回车\n\n**3. 重启 OpenCode**\n\n---\n\n## 6. 语言设置\n\n插件支持三种方式控制显示语言，按优先级从高到低排列：\n\n### 6.1 运行时切换（推荐）\n\n在 TUI 中输入 `\u002Fcache-lang`，从弹窗选择「中文」或「English」即可即时切换，无需重启。偏好会自动持久化，下次启动自动恢复。\n\n### 6.2 环境变量覆盖\n\n启动前设置 `CACHE_TUI_LANG` 环境变量可强制指定语言：\n\n```powershell\n# Windows PowerShell\n$env:CACHE_TUI_LANG=\"en\"; opencode\n```\n\n```bash\n# macOS \u002F Linux\nCACHE_TUI_LANG=en opencode\n```\n\n### 6.3 自动检测\n\n默认自动检测系统语言。若不符合预期，用 `\u002Fcache-lang` 手动切换一次即可，偏好会被记住。\n\n---\n\n## 7. 兼容性\n\n代码完全模型无关，支持所有 OpenCode 兼容的 AI 模型（DeepSeek \u002F Claude \u002F GPT 等）。\nToken 数据和定价信息均通过 OpenCode SDK 标准接口获取。\n\n---\n\n## 8. License\n\nMIT\n","OpenCode Visual Cache 是一个用于 OpenCode TUI 的插件，提供实时 Token 缓存命中率的可视化显示。其核心功能包括实时计算缓存命中率、展示 Token 明细（如缓存读写和未命中情况）、费用节省分析以及模型定价等，并通过自适应宽度进度条和颜色编码来直观呈现这些数据。该插件还支持多种语言界面切换、多币种费用换算等功能，且具备良好的用户交互设计，如可折叠面板以节省侧边栏空间。适用于需要对 API 调用过程中的缓存效率进行监控与优化的开发场景，尤其适合使用 OpenCode 进行开发工作的团队和个人。",2,"2026-06-11 04:00:18","CREATED_QUERY"]