opencode-visual-cache 1.2.10 → 1.2.11

package/README.md

@@ -44,9 +44,9 @@
 - **颜色自适应**：命中率 ≥85% 绿 · ≥70% 橙 · <70% 红，颜色从主题色自动去饱和
 - **Token 分布**：按角色（系统提示 / 用户 / Agent 指令 / Tool 调用 / Tool 结果）展示估算 Token 占比
 - **折叠记忆**：折叠状态持久化，重启后保持
-- **语言适配**：自动检测系统语言
+- **语言适配**：自动检测系统语言，支持 `/cache-lang` 运行时切换中/英文，偏好持久化
 - **多币种**：通过 `/cache-currency` 切换货币，费用和节省同步换算
-- **斜杠命令**：`/cache-rate` `/cache-section` `/cache-config` 动态配置面板
+- **斜杠命令**：`/cache-rate` `/cache-section` `/cache-config` `/cache-lang` 动态配置面板
 
 ---
 
@@ -99,6 +99,7 @@ npm install -g opencode-visual-cache@latest
 | `/cache-rate` | 调整汇率乘数 | 输入自定义汇率（如 `7.2`），用于费用换算 |
 | `/cache-section` | 开关区块与边框 | 独立控制 Token 明细 / 模型与定价 / 估算 Token 分布 / 面板边框的显隐 |
 | `/cache-config` | 查看当前配置 | 弹出当前货币、汇率、区块可见性状态 |
+| `/cache-lang` | 切换显示语言 | 从列表选择中文或 English，界面即时切换，无需重启 |
 
 <div align="center">
   <img src="https://raw.githubusercontent.com/Hotakus/opencode-visual-cache/master/assets/splash_cmd.png" alt="斜杠命令" width="49%"></img>
@@ -164,9 +165,17 @@ rm -rf ~/.cache/opencode/packages/opencode-visual-cache@latest
 
 ---
 
-## 6. 调试
+## 6. 语言设置
 
-强制英文：
+插件支持三种方式控制显示语言，按优先级从高到低排列：
+
+### 6.1 运行时切换（推荐）
+
+在 TUI 中输入 `/cache-lang`，从弹窗选择「中文」或「English」即可即时切换，无需重启。偏好会自动持久化，下次启动自动恢复。
+
+### 6.2 环境变量覆盖
+
+启动前设置 `CACHE_TUI_LANG` 环境变量可强制指定语言：
 
 ```powershell
 # Windows PowerShell
@@ -178,6 +187,10 @@ $env:CACHE_TUI_LANG="en"; opencode
 CACHE_TUI_LANG=en opencode
 ```
 
+### 6.3 自动检测
+
+默认自动检测系统语言。若不符合预期，用 `/cache-lang` 手动切换一次即可，偏好会被记住。
+
 ---
 
 ## 7. 兼容性

package/README_EN.md

@@ -44,9 +44,9 @@ If you find this plugin useful, a ⭐ would mean a lot — thank you!<br>
 - **Adaptive Colors**: ≥85% green · ≥70% orange · <70% red, auto-desaturated from current theme
 - **Token Distribution**: Per-role (system / user / agent instr / tool call / tool result) estimated token breakdown
 - **Persistent State**: Fold preferences and config remembered across restarts via api.kv
-- **Language**: Auto-detects system locale
+- **Language**: Auto-detects system locale, with `/cache-lang` for runtime switching between Chinese and English — preference persisted across restarts
 - **Multi-currency**: Switch via `/cache-currency` — costs, savings, and per-million rates convert in real time
-- **Slash Commands**: `/cache-rate` `/cache-section` `/cache-config` for live panel configuration
+- **Slash Commands**: `/cache-rate` `/cache-section` `/cache-config` `/cache-lang` for live panel configuration
 
 ---
 
@@ -99,6 +99,7 @@ The plugin supports slash commands and command palette (`Ctrl + P`) for runtime
 | `/cache-rate` | Adjust exchange rate | Enter a custom rate (e.g. `7.2` for CNY) |
 | `/cache-section` | Toggle sections & border | Independently show/hide Detail, Model & Pricing, Token Distribution, or the panel border |
 | `/cache-config` | View current config | Displays currency, rate, and section visibility |
+| `/cache-lang` | Switch display language | Pick Chinese or English from the dialog — takes effect immediately, no restart needed |
 
 <div align="center">
   <img src="https://raw.githubusercontent.com/Hotakus/opencode-visual-cache/master/assets/splash_cmd.png" alt="Slash command" width="49%"></img>
@@ -162,9 +163,17 @@ Press **`Ctrl + P`** in OpenCode → `install plugin` → `opencode-visual-cache
 
 ---
 
-## 6. Debug
+## 6. Language Settings
 
-Force English:
+The plugin provides three ways to control the display language, listed by priority (highest first):
+
+### 6.1 Runtime Switching (recommended)
+
+Type `/cache-lang` in the TUI and select **Chinese** or **English** from the dialog. The panel switches immediately without restarting, and your preference is persisted automatically for the next session.
+
+### 6.2 Environment Variable Override
+
+Set the `CACHE_TUI_LANG` environment variable before launching to force a specific language:
 
 ```powershell
 # Windows PowerShell
@@ -176,6 +185,10 @@ $env:CACHE_TUI_LANG="en"; opencode
 CACHE_TUI_LANG=en opencode
 ```
 
+### 6.3 Auto Detection
+
+Defaults to the system locale automatically. If it doesn't match, switch once with `/cache-lang` and the preference will be remembered.
+
 ---
 
 ## 7. Compatibility

package/dist/_version.d.ts

@@ -1 +1 @@
-export declare const PLUGIN_VERSION = "1.2.10";
+export declare const PLUGIN_VERSION = "1.2.11";

package/dist/_version.js

@@ -1,2 +1,2 @@
 // auto-generated
-export const PLUGIN_VERSION = "1.2.10";
+export const PLUGIN_VERSION = "1.2.11";

package/dist/index.js

@@ -48,7 +48,7 @@ const LANG_ZH = DEBUG_LANG
             return false;
         }
     })();
-const T = LANG_ZH ? {
+const ZH_T = {
     title: "缓存统计",
     hit: "命中率",
     totalHit: "总命中:",
@@ -77,7 +77,8 @@ const T = LANG_ZH ? {
     distOut: "输出:",
     secDetail: "明细",
     secModel: "模型",
-} : {
+};
+const EN_T = {
     title: "Token Cache",
     hit: "Hit",
     totalHit: "Total Hit:",
@@ -295,7 +296,9 @@ function TokenCachePanel(props) {
     const [distOpen, setDistOpen] = createSignal(false);
     let boxEl;
     // ── shared signals (de-structured so internal code is unchanged) ──
-    const { currencySymbol, setCurrencySymbol, exchangeRate, setExchangeRate, sectionDetail, setSectionDetail, sectionModel, setSectionModel, sectionDist, setSectionDist, borderVisible, setBorderVisible, } = props.signals;
+    const { currencySymbol, setCurrencySymbol, exchangeRate, setExchangeRate, langZH, setLangZH, sectionDetail, setSectionDetail, sectionModel, setSectionModel, sectionDist, setSectionDist, borderVisible, setBorderVisible, } = props.signals;
+    // ── reactive translation (follows langZH signal) ──
+    const t = createMemo(() => langZH() ? ZH_T : EN_T);
     // ── scan session messages reactively ──
     // SolidJS createMemo re-evaluates whenever the underlying
     // api.state.session state changes — no event listener needed.
@@ -520,6 +523,11 @@ function TokenCachePanel(props) {
                 setSectionDist(Boolean(props.api.kv.get(`${KV_PREFIX}.section.dist`, true)));
                 const bv = props.api.kv.get(`${KV_PREFIX}.border`, true);
                 setBorderVisible(bv !== false);
+                // Restore language preference
+                const savedLang = props.api.kv.get(`${KV_PREFIX}.lang`);
+                if (savedLang === "zh" || savedLang === "en") {
+                    setLangZH(savedLang === "zh");
+                }
                 // Restore distribution snapshot so the token distribution block
                 // doesn't blank out while api.state.part() re-hydrates.
                 const cachedDist = props.api.kv.get(`${KV_PREFIX}.dist_snapshot`);
@@ -603,7 +611,7 @@ function TokenCachePanel(props) {
     }
     const barW = createMemo(() => {
         const trendSpace = data().hasTrendData ? LABEL_GAP + visualWidth(trendLabel(data().trend)) : 0;
-        const overhead = visualWidth(T.hit) + LABEL_GAP + BAR_BRACKETS + BAR_GAP + PCT_FIXED_WIDTH + trendSpace + gutter();
+        const overhead = visualWidth(t().hit) + LABEL_GAP + BAR_BRACKETS + BAR_GAP + PCT_FIXED_WIDTH + trendSpace + gutter();
         return Math.max(3, panelWidth() - overhead);
     });
     const bar = createMemo(() => progressBar(data().hitRate, barW()));
@@ -629,7 +637,7 @@ function TokenCachePanel(props) {
             // boxEl.width may be undefined before the first measurement — guard with 0
             const w = boxEl ? Math.max(MIN_PANEL_WIDTH, boxEl.width ?? 0) : DEFAULT_PANEL_WIDTH;
             setPanelWidth((prev) => (prev === w ? prev : w));
-        }, children: [_jsxs("text", { onMouseUp: () => setOpen((o) => { const n = !o; persistFold("open", n); return n; }), children: [_jsx("span", { style: { fg: pal().muted }, children: open() ? "\u25bc " : "\u25b6 " }), _jsxs("span", { style: { fg: pal().primary }, children: [_jsx("b", { children: T.title }), _jsx(Show, { when: open(), children: _jsxs("span", { style: { fg: pal().muted }, children: [" (v", PLUGIN_VERSION, ")"] }) })] }), _jsxs(Show, { when: !open() && data().hasData, children: [_jsxs(Show, { when: data().hasTrendData, children: [_jsx("span", { children: " ".repeat(Math.max(1, panelWidth() - gutter() - HEADER_PREFIX - visualWidth(T.title) - visualWidth(pct() + " " + T.hitFolded + " " + trendLabel(data().trend)))) }), _jsxs("span", { style: { fg: hitColor() }, children: [pct(), " ", T.hitFolded] }), _jsxs("span", { style: { fg: data().trend !== 0 ? (data().trend > 0 ? pal().success : pal().error) : pal().text }, children: [" ", trendLabel(data().trend)] })] }), _jsxs(Show, { when: !data().hasTrendData, children: [_jsx("span", { children: " ".repeat(Math.max(1, panelWidth() - gutter() - HEADER_PREFIX - visualWidth(T.title) - visualWidth(pct() + " " + T.hitFolded))) }), _jsxs("span", { style: { fg: hitColor() }, children: [pct(), " ", T.hitFolded] })] })] })] }), _jsx(Show, { when: open(), children: _jsxs(Show, { when: data().hasData, fallback: _jsxs(_Fragment, { children: [_jsx("text", { fg: pal().muted, children: sep() }), _jsxs("text", { children: [_jsx("span", { style: { fg: pal().muted }, children: "> " }), _jsx("span", { style: { fg: pal().muted }, children: T.noData })] })] }), children: [_jsx("text", { fg: pal().muted, children: sep() }), _jsxs("text", { children: [_jsxs("span", { style: { fg: pal().text }, children: [T.hit, " "] }), _jsxs("span", { style: { fg: hitColor() }, children: ["[", bar(), "] "] }), _jsx("span", { style: { fg: pal().text }, children: pct() }), _jsx(Show, { when: data().hasTrendData, children: _jsxs("span", { style: { fg: data().trend !== 0 ? (data().trend > 0 ? pal().success : pal().error) : pal().text }, children: [" ", trendLabel(data().trend)] }) })] }), _jsx("text", { fg: pal().muted, children: justify(T.totalHit, (Math.floor(data().sessionHitRate * 10) / 10).toFixed(1) + "%") }), _jsxs(Show, { when: sectionDetail(), children: [_jsxs("text", { onMouseUp: () => setDetailOpen((o) => { const n = !o; persistFold("detail", n); return n; }), children: [_jsx("span", { style: { fg: pal().muted }, children: detailOpen() ? "\u25bc " : "\u25b6 " }), _jsx("span", { style: { fg: pal().primary }, children: _jsx("b", { children: T.secDetail }) }), _jsx("span", { style: { fg: pal().muted }, children: sep().slice(visualWidth((detailOpen() ? "\u25bc " : "\u25b6 ") + T.secDetail)) })] }), _jsxs(Show, { when: detailOpen(), children: [_jsx(Show, { when: data().read > 0, children: _jsx("text", { fg: pal().muted, children: justify(T.read, fmt(data().read), T.tok) }) }), _jsx(Show, { when: data().write > 0, children: _jsx("text", { fg: pal().muted, children: justify(T.write, fmt(data().write), T.tok) }) }), _jsx("text", { fg: pal().muted, children: justify(T.miss, fmt(data().freshInput), T.tok) }), _jsx("text", { fg: pal().muted, children: justify(T.out, fmt(data().output), T.tok) }), _jsx(Show, { when: data().saved > 0, children: _jsxs("text", { children: [_jsx("span", { style: { fg: pal().muted }, children: T.saved }), _jsx("span", { children: " ".repeat(Math.max(1, panelWidth() - gutter() - visualWidth(T.saved) - visualWidth("~" + fmtCost(data().saved, currencySymbol(), exchangeRate())))) }), _jsxs("span", { style: { fg: pal().success }, children: ["~", fmtCost(data().saved, currencySymbol(), exchangeRate())] })] }) })] })] }), _jsxs(Show, { when: sectionModel(), children: [_jsxs("text", { onMouseUp: () => setModelOpen((o) => { const n = !o; persistFold("model", n); return n; }), children: [_jsx("span", { style: { fg: pal().muted }, children: modelOpen() ? "\u25bc " : "\u25b6 " }), _jsx("span", { style: { fg: pal().primary }, children: _jsx("b", { children: T.secModel }) }), _jsx("span", { style: { fg: pal().muted }, children: sep().slice(visualWidth((modelOpen() ? "\u25bc " : "\u25b6 ") + T.secModel)) })] }), _jsxs(Show, { when: modelOpen(), children: [_jsx("text", { fg: pal().text, children: justify(T.cost, fmtCost(data().cost, currencySymbol(), exchangeRate())) }), _jsx(Show, { when: data().providerName, children: _jsx("text", { fg: pal().muted, children: justify(T.provider, data().providerName) }) }), _jsx("text", { fg: pal().muted, children: justify(T.model, data().model) }), _jsxs(Show, { when: data().hasPricing, children: [_jsx("text", { fg: pal().muted, children: justify(T.rate, currencySymbol() + (data().inputRate * exchangeRate()).toFixed(2) + "/M " + T.inputRate) }), _jsx(Show, { when: data().cacheReadRate > 0, children: _jsx("text", { fg: pal().muted, children: justify("", currencySymbol() + (data().cacheReadRate * exchangeRate()).toFixed(2) + "/M " + T.cacheRate) }) }), _jsx(Show, { when: data().cacheWriteRate > 0, children: _jsx("text", { fg: pal().muted, children: justify("", currencySymbol() + (data().cacheWriteRate * exchangeRate()).toFixed(2) + "/M " + T.writeRate) }) })] })] })] }), _jsx(Show, { when: sectionDist(), children: _jsxs(Show, { when: data().hasDistData, children: [_jsxs("text", { onMouseUp: () => setDistOpen((o) => { const n = !o; persistFold("dist", n); return n; }), children: [_jsx("span", { style: { fg: pal().muted }, children: distOpen() ? "\u25bc " : "\u25b6 " }), _jsx("span", { style: { fg: pal().primary }, children: _jsx("b", { children: T.distTitle }) }), _jsx("span", { style: { fg: pal().muted }, children: sep().slice(visualWidth((distOpen() ? "\u25bc " : "\u25b6 ") + T.distTitle)) })] }), _jsxs(Show, { when: distOpen(), children: [_jsx(Show, { when: data().dist.system > 0, children: _jsx("text", { fg: pal().muted, children: justify(T.distSys, fmt(data().dist.system), T.tok) }) }), _jsx(Show, { when: data().dist.user > 0, children: _jsx("text", { fg: pal().muted, children: justify(T.distUser, fmt(data().dist.user), T.tok) }) }), _jsx(Show, { when: data().dist.agent > 0, children: _jsx("text", { fg: pal().muted, children: justify(T.distAgent, fmt(data().dist.agent), T.tok) }) }), _jsx(Show, { when: data().dist.toolCall > 0, children: _jsx("text", { fg: pal().muted, children: justify(T.distTool, fmt(data().dist.toolCall), T.tok) }) }), _jsx(Show, { when: data().dist.toolResult > 0, children: _jsx("text", { fg: pal().muted, children: justify(T.distRes, fmt(data().dist.toolResult), T.tok) }) }), _jsx("text", { fg: pal().text, children: justify(T.distTotal, fmt(data().dist.apiInput), T.tok) })] })] }) })] }) })] }));
+        }, children: [_jsxs("text", { onMouseUp: () => setOpen((o) => { const n = !o; persistFold("open", n); return n; }), children: [_jsx("span", { style: { fg: pal().muted }, children: open() ? "\u25bc " : "\u25b6 " }), _jsxs("span", { style: { fg: pal().primary }, children: [_jsx("b", { children: t().title }), _jsx(Show, { when: open(), children: _jsxs("span", { style: { fg: pal().muted }, children: [" (v", PLUGIN_VERSION, ")"] }) })] }), _jsxs(Show, { when: !open() && data().hasData, children: [_jsxs(Show, { when: data().hasTrendData, children: [_jsx("span", { children: " ".repeat(Math.max(1, panelWidth() - gutter() - HEADER_PREFIX - visualWidth(t().title) - visualWidth(pct() + " " + t().hitFolded + " " + trendLabel(data().trend)))) }), _jsxs("span", { style: { fg: hitColor() }, children: [pct(), " ", t().hitFolded] }), _jsxs("span", { style: { fg: data().trend !== 0 ? (data().trend > 0 ? pal().success : pal().error) : pal().text }, children: [" ", trendLabel(data().trend)] })] }), _jsxs(Show, { when: !data().hasTrendData, children: [_jsx("span", { children: " ".repeat(Math.max(1, panelWidth() - gutter() - HEADER_PREFIX - visualWidth(t().title) - visualWidth(pct() + " " + t().hitFolded))) }), _jsxs("span", { style: { fg: hitColor() }, children: [pct(), " ", t().hitFolded] })] })] })] }), _jsx(Show, { when: open(), children: _jsxs(Show, { when: data().hasData, fallback: _jsxs(_Fragment, { children: [_jsx("text", { fg: pal().muted, children: sep() }), _jsxs("text", { children: [_jsx("span", { style: { fg: pal().muted }, children: "> " }), _jsx("span", { style: { fg: pal().muted }, children: t().noData })] })] }), children: [_jsx("text", { fg: pal().muted, children: sep() }), _jsxs("text", { children: [_jsxs("span", { style: { fg: pal().text }, children: [t().hit, " "] }), _jsxs("span", { style: { fg: hitColor() }, children: ["[", bar(), "] "] }), _jsx("span", { style: { fg: pal().text }, children: pct() }), _jsx(Show, { when: data().hasTrendData, children: _jsxs("span", { style: { fg: data().trend !== 0 ? (data().trend > 0 ? pal().success : pal().error) : pal().text }, children: [" ", trendLabel(data().trend)] }) })] }), _jsx("text", { fg: pal().muted, children: justify(t().totalHit, (Math.floor(data().sessionHitRate * 10) / 10).toFixed(1) + "%") }), _jsxs(Show, { when: sectionDetail(), children: [_jsxs("text", { onMouseUp: () => setDetailOpen((o) => { const n = !o; persistFold("detail", n); return n; }), children: [_jsx("span", { style: { fg: pal().muted }, children: detailOpen() ? "\u25bc " : "\u25b6 " }), _jsx("span", { style: { fg: pal().primary }, children: _jsx("b", { children: t().secDetail }) }), _jsx("span", { style: { fg: pal().muted }, children: sep().slice(visualWidth((detailOpen() ? "\u25bc " : "\u25b6 ") + t().secDetail)) })] }), _jsxs(Show, { when: detailOpen(), children: [_jsx(Show, { when: data().read > 0, children: _jsx("text", { fg: pal().muted, children: justify(t().read, fmt(data().read), t().tok) }) }), _jsx(Show, { when: data().write > 0, children: _jsx("text", { fg: pal().muted, children: justify(t().write, fmt(data().write), t().tok) }) }), _jsx("text", { fg: pal().muted, children: justify(t().miss, fmt(data().freshInput), t().tok) }), _jsx("text", { fg: pal().muted, children: justify(t().out, fmt(data().output), t().tok) }), _jsx(Show, { when: data().saved > 0, children: _jsxs("text", { children: [_jsx("span", { style: { fg: pal().muted }, children: t().saved }), _jsx("span", { children: " ".repeat(Math.max(1, panelWidth() - gutter() - visualWidth(t().saved) - visualWidth("~" + fmtCost(data().saved, currencySymbol(), exchangeRate())))) }), _jsxs("span", { style: { fg: pal().success }, children: ["~", fmtCost(data().saved, currencySymbol(), exchangeRate())] })] }) })] })] }), _jsxs(Show, { when: sectionModel(), children: [_jsxs("text", { onMouseUp: () => setModelOpen((o) => { const n = !o; persistFold("model", n); return n; }), children: [_jsx("span", { style: { fg: pal().muted }, children: modelOpen() ? "\u25bc " : "\u25b6 " }), _jsx("span", { style: { fg: pal().primary }, children: _jsx("b", { children: t().secModel }) }), _jsx("span", { style: { fg: pal().muted }, children: sep().slice(visualWidth((modelOpen() ? "\u25bc " : "\u25b6 ") + t().secModel)) })] }), _jsxs(Show, { when: modelOpen(), children: [_jsx("text", { fg: pal().text, children: justify(t().cost, fmtCost(data().cost, currencySymbol(), exchangeRate())) }), _jsx(Show, { when: data().providerName, children: _jsx("text", { fg: pal().muted, children: justify(t().provider, data().providerName) }) }), _jsx("text", { fg: pal().muted, children: justify(t().model, data().model) }), _jsxs(Show, { when: data().hasPricing, children: [_jsx("text", { fg: pal().muted, children: justify(t().rate, currencySymbol() + (data().inputRate * exchangeRate()).toFixed(2) + "/M " + t().inputRate) }), _jsx(Show, { when: data().cacheReadRate > 0, children: _jsx("text", { fg: pal().muted, children: justify("", currencySymbol() + (data().cacheReadRate * exchangeRate()).toFixed(2) + "/M " + t().cacheRate) }) }), _jsx(Show, { when: data().cacheWriteRate > 0, children: _jsx("text", { fg: pal().muted, children: justify("", currencySymbol() + (data().cacheWriteRate * exchangeRate()).toFixed(2) + "/M " + t().writeRate) }) })] })] })] }), _jsx(Show, { when: sectionDist(), children: _jsxs(Show, { when: data().hasDistData, children: [_jsxs("text", { onMouseUp: () => setDistOpen((o) => { const n = !o; persistFold("dist", n); return n; }), children: [_jsx("span", { style: { fg: pal().muted }, children: distOpen() ? "\u25bc " : "\u25b6 " }), _jsx("span", { style: { fg: pal().primary }, children: _jsx("b", { children: t().distTitle }) }), _jsx("span", { style: { fg: pal().muted }, children: sep().slice(visualWidth((distOpen() ? "\u25bc " : "\u25b6 ") + t().distTitle)) })] }), _jsxs(Show, { when: distOpen(), children: [_jsx(Show, { when: data().dist.system > 0, children: _jsx("text", { fg: pal().muted, children: justify(t().distSys, fmt(data().dist.system), t().tok) }) }), _jsx(Show, { when: data().dist.user > 0, children: _jsx("text", { fg: pal().muted, children: justify(t().distUser, fmt(data().dist.user), t().tok) }) }), _jsx(Show, { when: data().dist.agent > 0, children: _jsx("text", { fg: pal().muted, children: justify(t().distAgent, fmt(data().dist.agent), t().tok) }) }), _jsx(Show, { when: data().dist.toolCall > 0, children: _jsx("text", { fg: pal().muted, children: justify(t().distTool, fmt(data().dist.toolCall), t().tok) }) }), _jsx(Show, { when: data().dist.toolResult > 0, children: _jsx("text", { fg: pal().muted, children: justify(t().distRes, fmt(data().dist.toolResult), t().tok) }) }), _jsx("text", { fg: pal().text, children: justify(t().distTotal, fmt(data().dist.apiInput), t().tok) })] })] }) })] }) })] }));
 }
 // ---------------------------------------------------------------------------
 // Plugin entry
@@ -652,9 +660,11 @@ const tui = async (api) => {
     const [sectionModel, setSectionModel] = createSignal(true);
     const [sectionDist, setSectionDist] = createSignal(true);
     const [borderVisible, setBorderVisible] = createSignal(true);
+    const [langZH, setLangZH] = createSignal(LANG_ZH);
     const signals = {
         currencySymbol, setCurrencySymbol,
         exchangeRate, setExchangeRate,
+        langZH, setLangZH,
         sectionDetail, setSectionDetail,
         sectionModel, setSectionModel,
         sectionDist, setSectionDist,
@@ -759,6 +769,25 @@ const tui = async (api) => {
                 dialog?.clear();
             },
         },
+        {
+            title: "Cache: Switch Language",
+            value: "cache.lang",
+            description: "Switch between Chinese and English display",
+            slash: { name: "cache-lang" },
+            onSelect: (dialog) => {
+                const cur = langZH();
+                dialog?.replace(() => (_jsx(api.ui.DialogSelect, { title: "Display Language", options: [
+                        { title: `中文    ${cur ? "\u2713" : ""}`, value: "zh" },
+                        { title: `English ${cur ? "" : "\u2713"}`, value: "en" },
+                    ], onSelect: (opt) => {
+                        const zh = opt.value === "zh";
+                        api.kv.set(`${KV_PREFIX}.lang`, opt.value);
+                        setLangZH(zh);
+                        api.ui.toast({ message: zh ? "语言已切换为中文" : "Switched to English" });
+                        dialog?.clear();
+                    } })));
+            },
+        },
     ]);
 };
 const mod = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-visual-cache",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "OpenCode TUI plugin displaying real-time token cache hit rate in the sidebar",
   "type": "module",
   "main": "dist/index.js",

package/src/_version.ts

@@ -1,2 +1,2 @@
 // auto-generated
-export const PLUGIN_VERSION="1.2.10";
+export const PLUGIN_VERSION="1.2.11";

package/src/index.tsx

@@ -71,7 +71,7 @@ const LANG_ZH = DEBUG_LANG
       catch { return false }
     })()
 
-const T = LANG_ZH ? {
+const ZH_T = {
   title:      "缓存统计",
   hit:        "命中率",
   totalHit:   "总命中:",
@@ -100,7 +100,9 @@ const T = LANG_ZH ? {
   distOut:    "输出:",
   secDetail:  "明细",
   secModel:   "模型",
-} as const : {
+} as const
+
+const EN_T = {
   title:      "Token Cache",
   hit:        "Hit",
   totalHit:   "Total Hit:",
@@ -317,6 +319,8 @@ interface PanelSignals {
   setCurrencySymbol: (v: string) => void
   exchangeRate: () => number
   setExchangeRate: (v: number) => void
+  langZH: () => boolean
+  setLangZH: (v: boolean) => void
   sectionDetail: () => boolean
   setSectionDetail: (v: boolean) => void
   sectionModel: () => boolean
@@ -365,12 +369,16 @@ function TokenCachePanel(props: {
   const {
     currencySymbol, setCurrencySymbol,
     exchangeRate, setExchangeRate,
+    langZH, setLangZH,
     sectionDetail, setSectionDetail,
     sectionModel, setSectionModel,
     sectionDist, setSectionDist,
     borderVisible, setBorderVisible,
   } = props.signals
 
+  // ── reactive translation (follows langZH signal) ──
+  const t = createMemo(() => langZH() ? ZH_T : EN_T)
+
   // ── scan session messages reactively ──
   // SolidJS createMemo re-evaluates whenever the underlying
   // api.state.session state changes — no event listener needed.
@@ -540,6 +548,11 @@ function TokenCachePanel(props: {
         setSectionDist(Boolean(props.api.kv.get(`${KV_PREFIX}.section.dist`, true)))
         const bv = props.api.kv.get<boolean>(`${KV_PREFIX}.border`, true)
         setBorderVisible(bv !== false)
+        // Restore language preference
+        const savedLang = props.api.kv.get<string>(`${KV_PREFIX}.lang`)
+        if (savedLang === "zh" || savedLang === "en") {
+          setLangZH(savedLang === "zh")
+        }
         // Restore distribution snapshot so the token distribution block
         // doesn't blank out while api.state.part() re-hydrates.
         const cachedDist = props.api.kv.get<TokenDist>(`${KV_PREFIX}.dist_snapshot`)
@@ -623,7 +636,7 @@ function TokenCachePanel(props: {
 
   const barW = createMemo(() => {
     const trendSpace = data().hasTrendData ? LABEL_GAP + visualWidth(trendLabel(data().trend)) : 0
-    const overhead = visualWidth(T.hit) + LABEL_GAP + BAR_BRACKETS + BAR_GAP + PCT_FIXED_WIDTH + trendSpace + gutter()
+    const overhead = visualWidth(t().hit) + LABEL_GAP + BAR_BRACKETS + BAR_GAP + PCT_FIXED_WIDTH + trendSpace + gutter()
     return Math.max(3, panelWidth() - overhead)
   })
   const bar = createMemo(() => progressBar(data().hitRate, barW()))
@@ -669,7 +682,7 @@ function TokenCachePanel(props: {
       <text onMouseUp={() => setOpen((o) => { const n = !o; persistFold("open", n); return n })}>
         <span style={{ fg: pal().muted }}>{open() ? "\u25bc " : "\u25b6 "}</span>
         <span style={{ fg: pal().primary }}>
-            <b>{T.title}</b>
+            <b>{t().title}</b>
             <Show when={open()}>
               <span style={{ fg: pal().muted }}> (v{PLUGIN_VERSION})</span>
             </Show>
@@ -677,18 +690,18 @@ function TokenCachePanel(props: {
         <Show when={!open() && data().hasData}>
           <Show when={data().hasTrendData}>
             <span>
-              {" ".repeat(Math.max(1, panelWidth() - gutter() - HEADER_PREFIX - visualWidth(T.title) - visualWidth(pct() + " " + T.hitFolded + " " + trendLabel(data().trend))))}
+              {" ".repeat(Math.max(1, panelWidth() - gutter() - HEADER_PREFIX - visualWidth(t().title) - visualWidth(pct() + " " + t().hitFolded + " " + trendLabel(data().trend))))}
             </span>
-            <span style={{ fg: hitColor() }}>{pct()} {T.hitFolded}</span>
+            <span style={{ fg: hitColor() }}>{pct()} {t().hitFolded}</span>
             <span style={{ fg: data().trend !== 0 ? (data().trend > 0 ? pal().success : pal().error) : pal().text }}>
               {" "}{trendLabel(data().trend)}
             </span>
           </Show>
           <Show when={!data().hasTrendData}>
             <span>
-              {" ".repeat(Math.max(1, panelWidth() - gutter() - HEADER_PREFIX - visualWidth(T.title) - visualWidth(pct() + " " + T.hitFolded)))}
+              {" ".repeat(Math.max(1, panelWidth() - gutter() - HEADER_PREFIX - visualWidth(t().title) - visualWidth(pct() + " " + t().hitFolded)))}
             </span>
-            <span style={{ fg: hitColor() }}>{pct()} {T.hitFolded}</span>
+            <span style={{ fg: hitColor() }}>{pct()} {t().hitFolded}</span>
           </Show>
         </Show>
       </text>
@@ -699,7 +712,7 @@ function TokenCachePanel(props: {
             <text fg={pal().muted}>{sep()}</text>
             <text>
               <span style={{ fg: pal().muted }}>{"> "}</span>
-              <span style={{ fg: pal().muted }}>{T.noData}</span>
+              <span style={{ fg: pal().muted }}>{t().noData}</span>
             </text>
           </>
         }>
@@ -707,7 +720,7 @@ function TokenCachePanel(props: {
 
           {/* hit rate + bar — inline to avoid box spacing */}
           <text>
-            <span style={{ fg: pal().text }}>{T.hit} </span>
+            <span style={{ fg: pal().text }}>{t().hit} </span>
             <span style={{ fg: hitColor() }}>[{bar()}] </span>
             <span style={{ fg: pal().text }}>{pct()}</span>
             <Show when={data().hasTrendData}>
@@ -719,38 +732,38 @@ function TokenCachePanel(props: {
 
           {/* session cumulative hit rate */}
           <text fg={pal().muted}>
-            {justify(T.totalHit, (Math.floor(data().sessionHitRate * 10) / 10).toFixed(1) + "%")}
+            {justify(t().totalHit, (Math.floor(data().sessionHitRate * 10) / 10).toFixed(1) + "%")}
           </text>
 
           {/* ── detail section (collapsible, default open) ── */}
           <Show when={sectionDetail()}>
           <text onMouseUp={() => setDetailOpen((o) => { const n = !o; persistFold("detail", n); return n })}>
             <span style={{ fg: pal().muted }}>{detailOpen() ? "\u25bc " : "\u25b6 "}</span>
-            <span style={{ fg: pal().primary }}><b>{T.secDetail}</b></span>
-            <span style={{ fg: pal().muted }}>{sep().slice(visualWidth((detailOpen() ? "\u25bc " : "\u25b6 ") + T.secDetail))}</span>
+            <span style={{ fg: pal().primary }}><b>{t().secDetail}</b></span>
+            <span style={{ fg: pal().muted }}>{sep().slice(visualWidth((detailOpen() ? "\u25bc " : "\u25b6 ") + t().secDetail))}</span>
           </text>
 
           <Show when={detailOpen()}>
             <Show when={data().read > 0}>
               <text fg={pal().muted}>
-                {justify(T.read,  fmt(data().read),         T.tok)}
+                {justify(t().read,  fmt(data().read),         t().tok)}
               </text>
             </Show>
             <Show when={data().write > 0}>
               <text fg={pal().muted}>
-                {justify(T.write, fmt(data().write),        T.tok)}
+                {justify(t().write, fmt(data().write),        t().tok)}
               </text>
             </Show>
             <text fg={pal().muted}>
-              {justify(T.miss,  fmt(data().freshInput),   T.tok)}
+              {justify(t().miss,  fmt(data().freshInput),   t().tok)}
             </text>
             <text fg={pal().muted}>
-              {justify(T.out,   fmt(data().output),       T.tok)}
+              {justify(t().out,   fmt(data().output),       t().tok)}
             </text>
             <Show when={data().saved > 0}>
               <text>
-                <span style={{ fg: pal().muted }}>{T.saved}</span>
-                <span>{" ".repeat(Math.max(1, panelWidth() - gutter() - visualWidth(T.saved) - visualWidth("~" + fmtCost(data().saved, currencySymbol(), exchangeRate()))))}</span>
+                <span style={{ fg: pal().muted }}>{t().saved}</span>
+                <span>{" ".repeat(Math.max(1, panelWidth() - gutter() - visualWidth(t().saved) - visualWidth("~" + fmtCost(data().saved, currencySymbol(), exchangeRate()))))}</span>
                 <span style={{ fg: pal().success }}>~{fmtCost(data().saved, currencySymbol(), exchangeRate())}</span>
               </text>
             </Show>
@@ -761,34 +774,34 @@ function TokenCachePanel(props: {
           <Show when={sectionModel()}>
           {<text onMouseUp={() => setModelOpen((o) => { const n = !o; persistFold("model", n); return n })}>
             <span style={{ fg: pal().muted }}>{modelOpen() ? "\u25bc " : "\u25b6 "}</span>
-            <span style={{ fg: pal().primary }}><b>{T.secModel}</b></span>
-            <span style={{ fg: pal().muted }}>{sep().slice(visualWidth((modelOpen() ? "\u25bc " : "\u25b6 ") + T.secModel))}</span>
+            <span style={{ fg: pal().primary }}><b>{t().secModel}</b></span>
+            <span style={{ fg: pal().muted }}>{sep().slice(visualWidth((modelOpen() ? "\u25bc " : "\u25b6 ") + t().secModel))}</span>
           </text>}
 
           <Show when={modelOpen()}>
             <text fg={pal().text}>
-              {justify(T.cost,  fmtCost(data().cost, currencySymbol(), exchangeRate()))}
+              {justify(t().cost,  fmtCost(data().cost, currencySymbol(), exchangeRate()))}
             </text>
             <Show when={data().providerName}>
               <text fg={pal().muted}>
-                {justify(T.provider, data().providerName)}
+                {justify(t().provider, data().providerName)}
               </text>
             </Show>
             <text fg={pal().muted}>
-              {justify(T.model, data().model)}
+              {justify(t().model, data().model)}
             </text>
             <Show when={data().hasPricing}>
               <text fg={pal().muted}>
-                {justify(T.rate, currencySymbol() + (data().inputRate * exchangeRate()).toFixed(2) + "/M " + T.inputRate)}
+                {justify(t().rate, currencySymbol() + (data().inputRate * exchangeRate()).toFixed(2) + "/M " + t().inputRate)}
               </text>
               <Show when={data().cacheReadRate > 0}>
                 <text fg={pal().muted}>
-                  {justify("", currencySymbol() + (data().cacheReadRate * exchangeRate()).toFixed(2) + "/M " + T.cacheRate)}
+                  {justify("", currencySymbol() + (data().cacheReadRate * exchangeRate()).toFixed(2) + "/M " + t().cacheRate)}
                 </text>
               </Show>
               <Show when={data().cacheWriteRate > 0}>
                 <text fg={pal().muted}>
-                  {justify("", currencySymbol() + (data().cacheWriteRate * exchangeRate()).toFixed(2) + "/M " + T.writeRate)}
+                  {justify("", currencySymbol() + (data().cacheWriteRate * exchangeRate()).toFixed(2) + "/M " + t().writeRate)}
                 </text>
             </Show>
           </Show>
@@ -800,37 +813,37 @@ function TokenCachePanel(props: {
           <Show when={data().hasDistData}>
             {<text onMouseUp={() => setDistOpen((o) => { const n = !o; persistFold("dist", n); return n })}>
               <span style={{ fg: pal().muted }}>{distOpen() ? "\u25bc " : "\u25b6 "}</span>
-              <span style={{ fg: pal().primary }}><b>{T.distTitle}</b></span>
-              <span style={{ fg: pal().muted }}>{sep().slice(visualWidth((distOpen() ? "\u25bc " : "\u25b6 ") + T.distTitle))}</span>
+              <span style={{ fg: pal().primary }}><b>{t().distTitle}</b></span>
+              <span style={{ fg: pal().muted }}>{sep().slice(visualWidth((distOpen() ? "\u25bc " : "\u25b6 ") + t().distTitle))}</span>
             </text>}
             <Show when={distOpen()}>
             <Show when={data().dist.system > 0}>
               <text fg={pal().muted}>
-                {justify(T.distSys, fmt(data().dist.system), T.tok)}
+                {justify(t().distSys, fmt(data().dist.system), t().tok)}
               </text>
             </Show>
             <Show when={data().dist.user > 0}>
               <text fg={pal().muted}>
-                {justify(T.distUser, fmt(data().dist.user), T.tok)}
+                {justify(t().distUser, fmt(data().dist.user), t().tok)}
               </text>
             </Show>
             <Show when={data().dist.agent > 0}>
               <text fg={pal().muted}>
-                {justify(T.distAgent, fmt(data().dist.agent), T.tok)}
+                {justify(t().distAgent, fmt(data().dist.agent), t().tok)}
               </text>
             </Show>
             <Show when={data().dist.toolCall > 0}>
               <text fg={pal().muted}>
-                {justify(T.distTool, fmt(data().dist.toolCall), T.tok)}
+                {justify(t().distTool, fmt(data().dist.toolCall), t().tok)}
               </text>
             </Show>
             <Show when={data().dist.toolResult > 0}>
               <text fg={pal().muted}>
-                {justify(T.distRes, fmt(data().dist.toolResult), T.tok)}
+                {justify(t().distRes, fmt(data().dist.toolResult), t().tok)}
               </text>
             </Show>
             <text fg={pal().text}>
-              {justify(T.distTotal, fmt(data().dist.apiInput), T.tok)}
+              {justify(t().distTotal, fmt(data().dist.apiInput), t().tok)}
             </text>
             </Show>
           </Show>
@@ -871,10 +884,12 @@ const tui: TuiPlugin = async (api: TuiPluginApi) => {
   const [sectionModel, setSectionModel] = createSignal(true)
   const [sectionDist, setSectionDist] = createSignal(true)
   const [borderVisible, setBorderVisible] = createSignal(true)
+  const [langZH, setLangZH] = createSignal(LANG_ZH)
 
   const signals: PanelSignals = {
     currencySymbol, setCurrencySymbol,
     exchangeRate, setExchangeRate,
+    langZH, setLangZH,
     sectionDetail, setSectionDetail,
     sectionModel, setSectionModel,
     sectionDist, setSectionDist,
@@ -997,6 +1012,31 @@ const tui: TuiPlugin = async (api: TuiPluginApi) => {
         dialog?.clear()
       },
     },
+    {
+      title: "Cache: Switch Language",
+      value: "cache.lang",
+      description: "Switch between Chinese and English display",
+      slash: { name: "cache-lang" },
+      onSelect: (dialog) => {
+        const cur = langZH()
+        dialog?.replace(() => (
+          <api.ui.DialogSelect
+            title="Display Language"
+            options={[
+              { title: `中文    ${cur ? "\u2713" : ""}`, value: "zh" },
+              { title: `English ${cur ? "" : "\u2713"}`, value: "en" },
+            ]}
+            onSelect={(opt) => {
+              const zh = opt.value === "zh"
+              api.kv.set(`${KV_PREFIX}.lang`, opt.value)
+              setLangZH(zh)
+              api.ui.toast({ message: zh ? "语言已切换为中文" : "Switched to English" })
+              dialog?.clear()
+            }}
+          />
+        ))
+      },
+    },
   ])
 }