{"id":45692,"library":"opencode-visual-cache","title":"OpenCode Visual Cache","description":"A real-time token cache hit rate visualizer plugin for the OpenCode TUI. Displays cache hit/miss stats, token distribution by role, model pricing, accumulated costs and savings, and supports collapsible panels, adaptive theming, multilingual UI (Chinese/English), and slash commands for runtime configuration. Current stable version 1.2.12. Requires @opencode-ai/plugin >=1.14.0, @opencode-ai/sdk >=1.14.0, @opentui/core >=0.2.0, @opentui/solid >=0.2.0, solid-js >=1.9.0. Ships TypeScript definitions.","status":"active","version":"1.2.12","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","opencode","opencode-plugin","tui","token","cache-hit-rate","cost-tracking","typescript"],"install":[{"cmd":"npm install opencode-visual-cache","lang":"bash","label":"npm"},{"cmd":"yarn add opencode-visual-cache","lang":"bash","label":"yarn"},{"cmd":"pnpm add opencode-visual-cache","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required OpenCode plugin API for registration","package":"@opencode-ai/plugin","optional":false},{"reason":"Provides plugin SDK utilities","package":"@opencode-ai/sdk","optional":false},{"reason":"TUI core framework","package":"@opentui/core","optional":false},{"reason":"Solid.js bindings for TUI","package":"@opentui/solid","optional":false},{"reason":"UI library for reactive components","package":"solid-js","optional":false}],"imports":[{"note":"ESM-only package. CommonJS require() will fail. TypeScript types included.","wrong":"const registerPlugin = require('opencode-visual-cache')","symbol":"default import","correct":"import registerPlugin from 'opencode-visual-cache'"},{"note":"TypeScript type, also available via default import type inference.","wrong":"import { PluginOptions } from 'opencode-visual-cache/types'","symbol":"PluginOptions","correct":"import { PluginOptions } from 'opencode-visual-cache'"},{"note":"Named export also exists; default export is preferred and recommended.","wrong":"import registerPlugin from 'opencode-visual-cache'","symbol":"registerPlugin (named)","correct":"import { registerPlugin } from 'opencode-visual-cache'"}],"quickstart":{"code":"import registerPlugin from 'opencode-visual-cache';\n\n// Register the plugin with OpenCode TUI\nregisterPlugin({\n  // optional: override default config\n  sections: {\n    tokenDetails: true,\n    modelPricing: true,\n    tokenDistribution: true,\n    loadedSkills: true,\n    panelBorder: true\n  },\n  currency: 'USD',\n  exchangeRate: 1,\n  language: 'auto' // 'auto' | 'zh' | 'en'\n});\n\n// After registration, the cache panel appears in the sidebar.\n// Use slash commands inside OpenCode:\n//   /cache-currency, /cache-rate, /cache-section, /cache-lang, /cache-config","lang":"typescript","description":"Imports and registers the Visual Cache plugin with optional configuration, then shows available slash commands."},"warnings":[{"fix":"Use import syntax. Set \"type\": \"module\" in package.json or use .mjs extension.","message":"Requires ESM environment; CommonJS require() will throw an error.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Prefer using /cache-currency slash command instead of static config.","message":"PluginOptions.currency may be replaced by runtime slash command in future versions.","severity":"deprecated","affected_versions":">=1.2.0"},{"fix":"Run: npm install -g opencode-visual-cache@latest and ensure OpenCode environment includes peer deps.","message":"Peer dependencies must be installed manually if not using OpenCode's plugin manager.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use /cache-rate command to set custom exchange rate for accurate cost display.","message":"Exchange rates are offline defaults; may not reflect current market rates.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'/plugin':55 '/sdk':60 '0.2.0':63,65 '1.14.0':56,61 '1.2.12':50 '1.9.0':69 'accumul':28 'adapt':36 'ai':54,59 'cach':3,9,19,81 'cache-hit-r':80 'chinese/english':40 'collaps':34 'command':43 'configur':46 'cost':29,85 'cost-track':84 'current':47 'definit':72 'display':18 'distribut':23 'hit':10,82 'hit/miss':20 'javascript':73 'js':68 'model':26 'multilingu':38 'opencod':1,16,53,58,74,76 'opencode-ai':52,57 'opencode-plugin':75 'opentui/core':62 'opentui/solid':64 'panel':35 'plugin':13,77 'price':27 'rate':11,83 'real':6 'real-tim':5 'requir':51 'role':25 'runtim':45 'save':31 'ship':70 'slash':42 'solid':67 'solid-j':66 'stabl':48 'stat':21 'support':33 'theme':37 'time':7 'token':8,22,79 'track':86 'tui':17,78 'typescript':71,87 'ui':39 'version':49 'visual':2,12","created_at":"2026-06-07T12:56:15.298323+00:00","updated_at":"2026-06-07T12:56:15.298323+00:00","problems":[{"fix":"Change to dynamic import(): const registerPlugin = await import('opencode-visual-cache');","cause":"Using require() on an ESM-only package.","error":"ERR_REQUIRE_ESM"},{"fix":"Run: npm install -g opencode-visual-cache@latest","cause":"Plugin not installed or not in node_modules.","error":"Module not found: Can't resolve 'opencode-visual-cache'"},{"fix":"Install peer deps: npm install -g @opencode-ai/plugin @opencode-ai/sdk @opentui/core @opentui/solid solid-js","cause":"Missing peer dependency.","error":"Cannot find module '@opencode-ai/plugin'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"opencode-visual-cache","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}