opencode-visual-cache 1.2.6 → 1.2.7

package/README.md

@@ -43,7 +43,6 @@
 - **折叠面板**：主标题默认折叠，点击展开；明细、模型、分布各自独立折叠
 - **颜色自适应**：命中率 ≥85% 绿 · ≥70% 橙 · <70% 红，颜色从主题色自动去饱和
 - **Token 分布**：按角色（系统提示 / 用户 / Agent 指令 / Tool 调用 / Tool 结果）展示估算 Token 占比
-- **区块折叠**：明细、模型、Token 分布各自独立折叠
 - **折叠记忆**：折叠状态持久化，重启后保持
 - **语言适配**：自动检测系统语言
 - **多币种**：通过 `/cache-currency` 切换货币，费用和节省同步换算
@@ -98,7 +97,7 @@ npm install -g opencode-visual-cache@latest
 |------|------|---------|
 | `/cache-currency` | 切换货币单位 | 从列表选择货币（USD / CNY / EUR / JPY / GBP / KRW），自动填入默认汇率 |
 | `/cache-rate` | 调整汇率乘数 | 输入自定义汇率（如 `7.2`），用于费用换算 |
-| `/cache-section` | 开关区块显示 | 独立控制「Token 明细」「模型与定价」「估算 Token 分布」的显隐 |
+| `/cache-section` | 开关区块与边框 | 独立控制 Token 明细 / 模型与定价 / 估算 Token 分布 / 面板边框的显隐 |
 | `/cache-config` | 查看当前配置 | 弹出当前货币、汇率、区块可见性状态 |
 
 <div align="center">
@@ -133,7 +132,7 @@ npm install -g opencode-visual-cache@latest
 - **模型与定价**：费用 / 提供商 / 模型名 / 单价
 - **估算 Token 分布**：按角色拆分的 Token 估算
 
-通过 `/cache-section` 切换后即时生效，无需重启。
+通过 `/cache-section` 切换后即时生效，无需重启。此外，该命令还可以开关面板的**外边框**——关闭后内容会顶格显示，释放额外空间。
 
 ---
 
@@ -165,12 +164,18 @@ rm -rf ~/.cache/opencode/packages/opencode-visual-cache@latest
 
 ## 6. 调试
 
-强制英文（Windows PowerShell）：
+强制英文：
 
 ```powershell
+# Windows PowerShell
 $env:CACHE_TUI_LANG="en"; opencode
 ```
 
+```bash
+# macOS / Linux
+CACHE_TUI_LANG=en opencode
+```
+
 ---
 
 ## 7. 兼容性

package/README_EN.md

@@ -97,7 +97,7 @@ The plugin supports slash commands and command palette (`Ctrl + P`) for runtime
 |---------|----------|------------|
 | `/cache-currency` | Switch currency | Pick from a list (USD / CNY / EUR / JPY / GBP / KRW); default exchange rate auto-filled |
 | `/cache-rate` | Adjust exchange rate | Enter a custom rate (e.g. `7.2` for CNY) |
-| `/cache-section` | Toggle sections | Independently show/hide Detail, Model & Pricing, or Token Distribution |
+| `/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 |
 
 <div align="center">
@@ -132,7 +132,7 @@ Three sub-sections can be toggled independently to save sidebar space:
 - **Model & Pricing**: cost / provider / model name / per-million rates
 - **Estimated Token Dist.**: per-role token breakdown
 
-Toggled via `/cache-section` — takes effect instantly, no restart required.
+Toggled via `/cache-section` — takes effect instantly, no restart required. The same command also toggles the panel **border**; turning it off removes the outline and padding so content fills the full width.
 
 ---
 

package/dist/_version.d.ts

@@ -1 +1 @@
-export declare const PLUGIN_VERSION = "1.2.6";
+export declare const PLUGIN_VERSION = "1.2.7";

package/dist/_version.js

@@ -1,2 +1,2 @@
 // auto-generated
-export const PLUGIN_VERSION = "1.2.6";
+export const PLUGIN_VERSION = "1.2.7";

package/dist/index.js

@@ -277,6 +277,7 @@ const [exchangeRate, setExchangeRate] = createSignal(1);
 const [sectionDetail, setSectionDetail] = createSignal(true);
 const [sectionModel, setSectionModel] = createSignal(true);
 const [sectionDist, setSectionDist] = createSignal(true);
+const [borderVisible, setBorderVisible] = createSignal(true);
 const CURRENCIES = {
     USD: "$", CNY: "¥", EUR: "€", JPY: "JP¥", GBP: "£", KRW: "₩",
 };
@@ -287,8 +288,6 @@ const DEFAULT_RATES = {
 };
 const MIN_PANEL_WIDTH = 20;
 const DEFAULT_PANEL_WIDTH = 26;
-/** Horizontal space eaten by border (1+1) + padding (2+2). */
-const GUTTER = 2 + 4;
 /** ── layout measurement constants (visual columns) ── */
 const LABEL_GAP = 1; // label（如 "Hit"）后面的空格
 const BAR_BRACKETS = 2; // "[" + "]" 包围进度条
@@ -527,8 +526,11 @@ function TokenCachePanel(props) {
             setSectionDetail(Boolean(props.api.kv.get(`${KV_PREFIX}.section.detail`, true)));
             setSectionModel(Boolean(props.api.kv.get(`${KV_PREFIX}.section.model`, true)));
             setSectionDist(Boolean(props.api.kv.get(`${KV_PREFIX}.section.dist`, true)));
+            const borderVal = props.api.kv.get(`${KV_PREFIX}.border`, true);
+            setBorderVisible(borderVal !== false);
         }
         catch { }
+        // (border visibility was restored above together with section config)
         const unsubPart = props.api.event.on("message.part.updated", () => {
             setPartVersion((v) => v + 1);
         });
@@ -561,29 +563,31 @@ function TokenCachePanel(props) {
             return pal().warning;
         return pal().error;
     });
-    const sep = createMemo(() => "\u2500".repeat(Math.max(1, panelWidth() - GUTTER)));
+    /** Horizontal space eaten by border (1+1 when visible) + padding (2+2 when visible). */
+    const gutter = createMemo(() => borderVisible() ? 6 : 0);
+    const sep = createMemo(() => "\u2500".repeat(Math.max(1, panelWidth() - gutter())));
     function trendLabel(t) {
         return (t > 0 ? "\u2191" : t < 0 ? "\u2193" : "-") + (t !== 0 ? Math.abs(t).toFixed(1) + "%" : "");
     }
     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()));
     const pct = createMemo(() => (Math.floor(data().hitRate * 10) / 10).toFixed(1) + "%");
     // left-align label, right-align value — auto-fill space between
     const justify = (label, value, unit = "") => {
-        const gauge = panelWidth() - GUTTER;
+        const gauge = panelWidth() - gutter();
         const used = visualWidth(label) + visualWidth(value) + (unit ? visualWidth(unit) + UNIT_GAP : 0);
         const gap = Math.max(1, gauge - used);
         return label + " ".repeat(gap) + value + (unit ? " " + unit : "");
     };
-    return (_jsxs("box", { border: true, borderColor: pal().border, paddingTop: 0, paddingBottom: 0, paddingLeft: 2, paddingRight: 2, flexDirection: "column", gap: 0, ref: boxEl, onSizeChange: () => {
+    return (_jsxs("box", { border: borderVisible(), borderColor: pal().border, paddingTop: 0, paddingBottom: 0, paddingLeft: borderVisible() ? 2 : 0, paddingRight: borderVisible() ? 2 : 0, flexDirection: "column", gap: 0, ref: boxEl, onSizeChange: () => {
             // 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.system + data().dist.user + data().dist.agent + data().dist.toolCall + data().dist.toolResult), 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.system + data().dist.user + data().dist.agent + data().dist.toolCall + data().dist.toolResult), T.tok) })] })] }) })] }) })] }));
 }
 // ---------------------------------------------------------------------------
 // Plugin entry
@@ -650,21 +654,31 @@ const tui = async (api) => {
                 const detailOn = Boolean(api.kv.get(`${KV_PREFIX}.section.detail`, true));
                 const modelOn = Boolean(api.kv.get(`${KV_PREFIX}.section.model`, true));
                 const distOn = Boolean(api.kv.get(`${KV_PREFIX}.section.dist`, true));
+                const borderOn = Boolean(api.kv.get(`${KV_PREFIX}.border`, true));
                 dialog?.replace(() => (_jsx(api.ui.DialogSelect, { title: "Toggle Section", options: [
                         { title: `Token Detail    [${detailOn ? "ON" : "OFF"}]`, value: "detail" },
                         { title: `Model & Pricing [${modelOn ? "ON" : "OFF"}]`, value: "model" },
                         { title: `Token Dist.     [${distOn ? "ON" : "OFF"}]`, value: "dist" },
+                        { title: `Panel Border    [${borderOn ? "ON" : "OFF"}]`, value: "border" },
                     ], onSelect: (opt) => {
-                        const key = `${KV_PREFIX}.section.${opt.value}`;
-                        const cur = Boolean(api.kv.get(key, true));
-                        api.kv.set(key, !cur);
-                        if (opt.value === "detail")
-                            setSectionDetail(!cur);
-                        if (opt.value === "model")
-                            setSectionModel(!cur);
-                        if (opt.value === "dist")
-                            setSectionDist(!cur);
-                        api.ui.toast({ message: `${opt.value} section ${!cur ? "shown" : "hidden"}` });
+                        if (opt.value === "border") {
+                            const cur = Boolean(api.kv.get(`${KV_PREFIX}.border`, true));
+                            api.kv.set(`${KV_PREFIX}.border`, !cur);
+                            setBorderVisible(!cur);
+                            api.ui.toast({ message: `Panel border ${!cur ? "shown" : "hidden"}` });
+                        }
+                        else {
+                            const key = `${KV_PREFIX}.section.${opt.value}`;
+                            const cur = Boolean(api.kv.get(key, true));
+                            api.kv.set(key, !cur);
+                            if (opt.value === "detail")
+                                setSectionDetail(!cur);
+                            if (opt.value === "model")
+                                setSectionModel(!cur);
+                            if (opt.value === "dist")
+                                setSectionDist(!cur);
+                            api.ui.toast({ message: `${opt.value} section ${!cur ? "shown" : "hidden"}` });
+                        }
                         dialog?.clear();
                     } })));
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-visual-cache",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "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.6";
+export const PLUGIN_VERSION="1.2.7";

package/src/index.tsx

@@ -313,6 +313,7 @@ const [exchangeRate, setExchangeRate] = createSignal(1)
 const [sectionDetail, setSectionDetail] = createSignal(true)
 const [sectionModel, setSectionModel] = createSignal(true)
 const [sectionDist, setSectionDist] = createSignal(true)
+const [borderVisible, setBorderVisible] = createSignal(true)
 
 const CURRENCIES: Record<string, string> = {
   USD: "$", CNY: "¥", EUR: "€", JPY: "JP¥", GBP: "£", KRW: "₩",
@@ -325,8 +326,6 @@ const DEFAULT_RATES: Record<string, number> = {
 
 const MIN_PANEL_WIDTH = 20
 const DEFAULT_PANEL_WIDTH = 26
-/** Horizontal space eaten by border (1+1) + padding (2+2). */
-const GUTTER = 2 + 4
 
 /** ── layout measurement constants (visual columns) ── */
 const LABEL_GAP = 1        // label（如 "Hit"）后面的空格
@@ -556,8 +555,12 @@ function TokenCachePanel(props: {
       setSectionDetail(Boolean(props.api.kv.get(`${KV_PREFIX}.section.detail`, true)))
       setSectionModel(Boolean(props.api.kv.get(`${KV_PREFIX}.section.model`, true)))
       setSectionDist(Boolean(props.api.kv.get(`${KV_PREFIX}.section.dist`, true)))
+      const borderVal = props.api.kv.get<boolean>(`${KV_PREFIX}.border`, true)
+      setBorderVisible(borderVal !== false)
     } catch {}
 
+    // (border visibility was restored above together with section config)
+
     const unsubPart = props.api.event.on("message.part.updated", () => {
       setPartVersion((v) => v + 1)
     })
@@ -591,14 +594,17 @@ function TokenCachePanel(props: {
     return pal().error
   })
 
-  const sep = createMemo(() => "\u2500".repeat(Math.max(1, panelWidth() - GUTTER)))
+  /** Horizontal space eaten by border (1+1 when visible) + padding (2+2 when visible). */
+  const gutter = createMemo(() => borderVisible() ? 6 : 0)
+
+  const sep = createMemo(() => "\u2500".repeat(Math.max(1, panelWidth() - gutter())))
   function trendLabel(t: number): string {
     return (t > 0 ? "\u2191" : t < 0 ? "\u2193" : "-") + (t !== 0 ? Math.abs(t).toFixed(1) + "%" : "")
   }
 
   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()))
@@ -606,7 +612,7 @@ function TokenCachePanel(props: {
 
   // left-align label, right-align value — auto-fill space between
   const justify = (label: string, value: string, unit = ""): string => {
-    const gauge = panelWidth() - GUTTER
+    const gauge = panelWidth() - gutter()
     const used = visualWidth(label) + visualWidth(value) + (unit ? visualWidth(unit) + UNIT_GAP : 0)
     const gap = Math.max(1, gauge - used)
     return label + " ".repeat(gap) + value + (unit ? " " + unit : "")
@@ -614,12 +620,12 @@ function TokenCachePanel(props: {
 
   return (
     <box
-      border
+      border={borderVisible()}
       borderColor={pal().border}
       paddingTop={0}
       paddingBottom={0}
-      paddingLeft={2}
-      paddingRight={2}
+      paddingLeft={borderVisible() ? 2 : 0}
+      paddingRight={borderVisible() ? 2 : 0}
       flexDirection="column"
       gap={0}
       ref={boxEl}
@@ -641,7 +647,7 @@ 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: data().trend !== 0 ? (data().trend > 0 ? pal().success : pal().error) : pal().text }}>
@@ -650,7 +656,7 @@ function TokenCachePanel(props: {
           </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>
           </Show>
@@ -714,7 +720,7 @@ function TokenCachePanel(props: {
             <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>{" ".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>
@@ -893,6 +899,7 @@ const tui: TuiPlugin = async (api: TuiPluginApi) => {
         const detailOn = Boolean(api.kv.get(`${KV_PREFIX}.section.detail`, true))
         const modelOn  = Boolean(api.kv.get(`${KV_PREFIX}.section.model`, true))
         const distOn   = Boolean(api.kv.get(`${KV_PREFIX}.section.dist`, true))
+        const borderOn = Boolean(api.kv.get(`${KV_PREFIX}.border`, true))
         dialog?.replace(() => (
           <api.ui.DialogSelect
             title="Toggle Section"
@@ -900,15 +907,23 @@ const tui: TuiPlugin = async (api: TuiPluginApi) => {
               { title: `Token Detail    [${detailOn ? "ON" : "OFF"}]`,  value: "detail" },
               { title: `Model & Pricing [${modelOn  ? "ON" : "OFF"}]`,  value: "model" },
               { title: `Token Dist.     [${distOn   ? "ON" : "OFF"}]`,  value: "dist" },
+              { title: `Panel Border    [${borderOn ? "ON" : "OFF"}]`,  value: "border" },
             ]}
             onSelect={(opt) => {
-              const key = `${KV_PREFIX}.section.${opt.value}`
-              const cur = Boolean(api.kv.get(key, true))
-              api.kv.set(key, !cur)
-              if (opt.value === "detail") setSectionDetail(!cur)
-              if (opt.value === "model")  setSectionModel(!cur)
-              if (opt.value === "dist")   setSectionDist(!cur)
-              api.ui.toast({ message: `${opt.value} section ${!cur ? "shown" : "hidden"}` })
+              if (opt.value === "border") {
+                const cur = Boolean(api.kv.get(`${KV_PREFIX}.border`, true))
+                api.kv.set(`${KV_PREFIX}.border`, !cur)
+                setBorderVisible(!cur)
+                api.ui.toast({ message: `Panel border ${!cur ? "shown" : "hidden"}` })
+              } else {
+                const key = `${KV_PREFIX}.section.${opt.value}`
+                const cur = Boolean(api.kv.get(key, true))
+                api.kv.set(key, !cur)
+                if (opt.value === "detail") setSectionDetail(!cur)
+                if (opt.value === "model")  setSectionModel(!cur)
+                if (opt.value === "dist")   setSectionDist(!cur)
+                api.ui.toast({ message: `${opt.value} section ${!cur ? "shown" : "hidden"}` })
+              }
               dialog?.clear()
             }}
           />