opencode-visual-cache 1.2.6 → 1.2.8

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.8";

package/dist/_version.js

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

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/solid/jsx-runtime";
-import { createMemo, createSignal, onMount, onCleanup, Show } from "solid-js";
+import { createMemo, createSignal, createEffect, onMount, onCleanup, Show } from "solid-js";
 import { PLUGIN_VERSION } from "./_version";
 // ── terminal-width helpers ────────────────────────────────────────
 // CJK characters occupy 2 terminal columns; padEnd/padStart count
@@ -267,16 +267,6 @@ function estimateTokens(text) {
     const asciiPerToken = jsonLike ? 2 : codeLike ? 2.5 : 4;
     return Math.max(1, Math.ceil(ascii / asciiPerToken + cjk / 1.5));
 }
-// ---------------------------------------------------------------------------
-// Sidebar component
-// ---------------------------------------------------------------------------
-/** Module-level config signals — shared between the TUI component and slash
- *  commands so that runtime changes take effect immediately without restart. */
-const [currencySymbol, setCurrencySymbol] = createSignal("$");
-const [exchangeRate, setExchangeRate] = createSignal(1);
-const [sectionDetail, setSectionDetail] = createSignal(true);
-const [sectionModel, setSectionModel] = createSignal(true);
-const [sectionDist, setSectionDist] = createSignal(true);
 const CURRENCIES = {
     USD: "$", CNY: "¥", EUR: "€", JPY: "JP¥", GBP: "£", KRW: "₩",
 };
@@ -287,8 +277,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; // "[" + "]" 包围进度条
@@ -303,9 +291,21 @@ function TokenCachePanel(props) {
     const [modelOpen, setModelOpen] = createSignal(true);
     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;
     // ── scan session messages reactively ──
     // SolidJS createMemo re-evaluates whenever the underlying
     // api.state.session state changes — no event listener needed.
+    // ── distribution cache ────────────────────────────────────────
+    // When data() re-computes before api.state.part() is warm (e.g. after
+    // a view switch), hasDistData flips to false and the distribution
+    // block disappears.  Keep the last valid snapshot so the UI stays
+    // stable until the next successful computation arrives.
+    const [lastDist, setLastDist] = createSignal({
+        system: 0, user: 0, agent: 0, toolCall: 0, toolResult: 0,
+        output: 0, apiOutput: 0, apiInput: 0, stepCost: 0,
+    });
+    const [lastHasDist, setLastHasDist] = createSignal(false);
     const data = createMemo(() => {
         const msgs = props.api.state.session.messages(props.sessionId);
         let input = 0;
@@ -487,6 +487,10 @@ function TokenCachePanel(props) {
         catch {
             // Graceful degradation — dist stays at zeroes
         }
+        // Fall back to last known-good distribution while api.state.part()
+        // is re-hydrating after a view switch.
+        const finalDist = hasDistData ? dist : lastDist();
+        const finalHasDist = hasDistData || lastHasDist();
         return {
             hitRate, read, write, freshInput: input, output,
             cost, saved, model, inputRate, cacheReadRate, cacheWriteRate, hasPricing,
@@ -494,9 +498,24 @@ function TokenCachePanel(props) {
             trend, hasTrendData,
             providerName,
             sessionHitRate,
-            dist, hasDistData,
+            dist: finalDist,
+            hasDistData: finalHasDist,
         };
     });
+    // Persist the last valid distribution so that data() can fall back
+    // to it while api.state.part() is re-hydrating after a view switch.
+    createEffect(() => {
+        const d = data();
+        if (d.hasDistData) {
+            setLastDist({ ...d.dist });
+            setLastHasDist(true);
+            // Also persist across component remounts (view switches)
+            try {
+                props.api.kv.set(`${KV_PREFIX}.dist_snapshot`, { ...d.dist });
+            }
+            catch { }
+        }
+    });
     // ── token distribution (in-process via api.state.part) ──
     const [partVersion, setPartVersion] = createSignal(0);
     // Persist fold state to api.kv
@@ -508,7 +527,10 @@ function TokenCachePanel(props) {
         catch { }
     };
     onMount(() => {
-        // Restore fold state from persisted storage
+        // Reset panelWidth on (re)mount so the layout uses a clean
+        // default until onSizeChange measures the live box dimensions.
+        setPanelWidth(DEFAULT_PANEL_WIDTH);
+        // Restore fold state from persisted storage (non-critical — fire and forget)
         try {
             setOpen(Boolean(props.api.kv.get(`${KV_PREFIX}.open`, false)));
             setDetailOpen(Boolean(props.api.kv.get(`${KV_PREFIX}.detail`, true)));
@@ -516,19 +538,51 @@ function TokenCachePanel(props) {
             setDistOpen(Boolean(props.api.kv.get(`${KV_PREFIX}.dist`, false)));
         }
         catch { }
-        // Restore user config (currency, rate, section visibility)
-        try {
-            const sym = props.api.kv.get(`${KV_PREFIX}.currency`);
-            const rate = props.api.kv.get(`${KV_PREFIX}.rate`);
-            if (typeof sym === "string")
-                setCurrencySymbol(sym);
-            if (typeof rate === "number" && rate > 0)
-                setExchangeRate(rate);
-            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)));
+        // Restore user config (currency, rate, section visibility).
+        // Try synchronously first (kv is usually ready on mount), fall back to
+        // polling if the module was reloaded and kv hasn't initialised yet.
+        const doRestore = () => {
+            try {
+                const sym = props.api.kv.get(`${KV_PREFIX}.currency`);
+                const rate = props.api.kv.get(`${KV_PREFIX}.rate`);
+                if (typeof sym === "string")
+                    setCurrencySymbol(sym);
+                if (typeof rate === "number" && rate > 0)
+                    setExchangeRate(rate);
+                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 bv = props.api.kv.get(`${KV_PREFIX}.border`, true);
+                setBorderVisible(bv !== false);
+                // 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`);
+                if (cachedDist) {
+                    setLastDist(cachedDist);
+                    setLastHasDist(true);
+                }
+            }
+            catch {
+                // kv read failed — signals stay at defaults
+            }
+            // Re-measure panel width after config signals have settled
+            if (boxEl && typeof boxEl.width === "number" && boxEl.width > 0) {
+                setPanelWidth(Math.max(MIN_PANEL_WIDTH, boxEl.width));
+            }
+        };
+        if (props.api.kv.ready) {
+            doRestore();
+        }
+        else {
+            const pollRestore = () => {
+                if (!props.api.kv.ready) {
+                    setTimeout(pollRestore, 10);
+                    return;
+                }
+                doRestore();
+            };
+            pollRestore();
         }
-        catch { }
         const unsubPart = props.api.event.on("message.part.updated", () => {
             setPartVersion((v) => v + 1);
         });
@@ -561,45 +615,72 @@ 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) + "%");
+    // When border visibility changes the box dimensions shift, which
+    // may not reliably trigger onSizeChange across (re)mount cycles.
+    // Force panelWidth to resync with the live box after every change.
+    createEffect(() => {
+        borderVisible();
+        if (boxEl && typeof boxEl.width === "number" && boxEl.width > 0) {
+            const w = Math.max(MIN_PANEL_WIDTH, boxEl.width);
+            setPanelWidth((prev) => (prev === w ? prev : w));
+        }
+    });
     // 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(), ...(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
 // ---------------------------------------------------------------------------
-function createSidebarSlot(api) {
+function createSidebarSlot(api, signals) {
     return {
         order: 55,
         slots: {
             sidebar_content(ctx, input) {
-                return (_jsx(TokenCachePanel, { theme: ctx.theme.current, api: api, sessionId: input.session_id }));
+                return (_jsx(TokenCachePanel, { theme: ctx.theme.current, api: api, sessionId: input.session_id, signals: signals }));
             },
         },
     };
 }
 const tui = async (api) => {
-    api.slots.register(createSidebarSlot(api));
+    // ── shared panel signals ──────────────────────────────────────
+    const [currencySymbol, setCurrencySymbol] = createSignal("$");
+    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 signals = {
+        currencySymbol, setCurrencySymbol,
+        exchangeRate, setExchangeRate,
+        sectionDetail, setSectionDetail,
+        sectionModel, setSectionModel,
+        sectionDist, setSectionDist,
+        borderVisible, setBorderVisible,
+    };
+    api.slots.register(createSidebarSlot(api, signals));
     // ── slash commands for runtime config ──
     const KV_PREFIX = "cache_panel";
     api.command?.register(() => [
@@ -617,8 +698,8 @@ const tui = async (api) => {
                         const defRate = DEFAULT_RATES[opt.value] ?? 1;
                         api.kv.set(`${KV_PREFIX}.currency`, sym);
                         api.kv.set(`${KV_PREFIX}.rate`, defRate);
-                        setCurrencySymbol(sym);
-                        setExchangeRate(defRate);
+                        signals.setCurrencySymbol(sym);
+                        signals.setExchangeRate(defRate);
                         api.ui.toast({ message: `Currency: ${opt.value} (${sym}), rate: ${defRate}` });
                         dialog?.clear();
                     } })));
@@ -634,7 +715,7 @@ const tui = async (api) => {
                         const n = parseFloat(val);
                         if (n > 0) {
                             api.kv.set(`${KV_PREFIX}.rate`, n);
-                            setExchangeRate(n);
+                            signals.setExchangeRate(n);
                             api.ui.toast({ message: `Exchange rate set to ${n}` });
                         }
                         dialog?.clear();
@@ -650,21 +731,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);
+                            signals.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")
+                                signals.setSectionDetail(!cur);
+                            if (opt.value === "model")
+                                signals.setSectionModel(!cur);
+                            if (opt.value === "dist")
+                                signals.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.8",
   "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.8";

package/src/index.tsx

@@ -17,7 +17,7 @@ import type {
   FilePart,
   ReasoningPart,
 } from "@opencode-ai/sdk/v2"
-import { createMemo, createSignal, onMount, onCleanup, Show } from "solid-js"
+import { createMemo, createSignal, createEffect, onMount, onCleanup, Show } from "solid-js"
 import { PLUGIN_VERSION } from "./_version"
 
 // ---------------------------------------------------------------------------
@@ -306,13 +306,23 @@ interface TokenDist {
 // Sidebar component
 // ---------------------------------------------------------------------------
 
-/** Module-level config signals — shared between the TUI component and slash
- *  commands so that runtime changes take effect immediately without restart. */
-const [currencySymbol, setCurrencySymbol] = createSignal("$")
-const [exchangeRate, setExchangeRate] = createSignal(1)
-const [sectionDetail, setSectionDetail] = createSignal(true)
-const [sectionModel, setSectionModel] = createSignal(true)
-const [sectionDist, setSectionDist] = createSignal(true)
+/** Signals shared between the TUI component and slash commands.
+ *  Created in the `tui` function scope so they do not survive module reload —
+ *  the component re-creates them on mount and restores user config from kv. */
+interface PanelSignals {
+  currencySymbol: () => string
+  setCurrencySymbol: (v: string) => void
+  exchangeRate: () => number
+  setExchangeRate: (v: number) => void
+  sectionDetail: () => boolean
+  setSectionDetail: (v: boolean) => void
+  sectionModel: () => boolean
+  setSectionModel: (v: boolean) => void
+  sectionDist: () => boolean
+  setSectionDist: (v: boolean) => void
+  borderVisible: () => boolean
+  setBorderVisible: (v: boolean) => void
+}
 
 const CURRENCIES: Record<string, string> = {
   USD: "$", CNY: "¥", EUR: "€", JPY: "JP¥", GBP: "£", KRW: "₩",
@@ -325,8 +335,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"）后面的空格
@@ -341,6 +349,7 @@ function TokenCachePanel(props: {
   theme: TuiThemeCurrent
   api: TuiPluginApi
   sessionId: string
+  signals: PanelSignals
 }): JSX.Element {
   const [panelWidth, setPanelWidth] = createSignal(DEFAULT_PANEL_WIDTH)
   const [open, setOpen] = createSignal(true)
@@ -349,9 +358,31 @@ function TokenCachePanel(props: {
   const [distOpen, setDistOpen] = createSignal(false)
   let boxEl: any
 
+  // ── shared signals (de-structured so internal code is unchanged) ──
+  const {
+    currencySymbol, setCurrencySymbol,
+    exchangeRate, setExchangeRate,
+    sectionDetail, setSectionDetail,
+    sectionModel, setSectionModel,
+    sectionDist, setSectionDist,
+    borderVisible, setBorderVisible,
+  } = props.signals
+
   // ── scan session messages reactively ──
   // SolidJS createMemo re-evaluates whenever the underlying
   // api.state.session state changes — no event listener needed.
+
+  // ── distribution cache ────────────────────────────────────────
+  // When data() re-computes before api.state.part() is warm (e.g. after
+  // a view switch), hasDistData flips to false and the distribution
+  // block disappears.  Keep the last valid snapshot so the UI stays
+  // stable until the next successful computation arrives.
+  const [lastDist, setLastDist] = createSignal<TokenDist>({
+    system: 0, user: 0, agent: 0, toolCall: 0, toolResult: 0,
+    output: 0, apiOutput: 0, apiInput: 0, stepCost: 0,
+  })
+  const [lastHasDist, setLastHasDist] = createSignal(false)
+
   const data = createMemo(() => {
     const msgs = props.api.state.session.messages(props.sessionId) as Message[]
 
@@ -518,6 +549,11 @@ function TokenCachePanel(props: {
       // Graceful degradation — dist stays at zeroes
     }
 
+    // Fall back to last known-good distribution while api.state.part()
+    // is re-hydrating after a view switch.
+    const finalDist = hasDistData ? dist : lastDist()
+    const finalHasDist = hasDistData || lastHasDist()
+
     return {
       hitRate, read, write, freshInput: input, output,
       cost, saved, model, inputRate, cacheReadRate, cacheWriteRate, hasPricing,
@@ -525,7 +561,20 @@ function TokenCachePanel(props: {
       trend, hasTrendData,
       providerName,
       sessionHitRate,
-      dist, hasDistData,
+      dist: finalDist,
+      hasDistData: finalHasDist,
+    }
+  })
+
+  // Persist the last valid distribution so that data() can fall back
+  // to it while api.state.part() is re-hydrating after a view switch.
+  createEffect(() => {
+    const d = data()
+    if (d.hasDistData) {
+      setLastDist({ ...d.dist })
+      setLastHasDist(true)
+      // Also persist across component remounts (view switches)
+      try { props.api.kv.set(`${KV_PREFIX}.dist_snapshot`, { ...d.dist }) } catch {}
     }
   })
 
@@ -539,7 +588,11 @@ function TokenCachePanel(props: {
   }
 
   onMount(() => {
-    // Restore fold state from persisted storage
+    // Reset panelWidth on (re)mount so the layout uses a clean
+    // default until onSizeChange measures the live box dimensions.
+    setPanelWidth(DEFAULT_PANEL_WIDTH)
+
+    // Restore fold state from persisted storage (non-critical — fire and forget)
     try {
       setOpen(Boolean(props.api.kv.get(`${KV_PREFIX}.open`, false)))
       setDetailOpen(Boolean(props.api.kv.get(`${KV_PREFIX}.detail`, true)))
@@ -547,16 +600,48 @@ function TokenCachePanel(props: {
       setDistOpen(Boolean(props.api.kv.get(`${KV_PREFIX}.dist`, false)))
     } catch {}
 
-    // Restore user config (currency, rate, section visibility)
-    try {
-      const sym = props.api.kv.get<string>(`${KV_PREFIX}.currency`)
-      const rate = props.api.kv.get<number>(`${KV_PREFIX}.rate`)
-      if (typeof sym === "string") setCurrencySymbol(sym)
-      if (typeof rate === "number" && rate > 0) setExchangeRate(rate)
-      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)))
-    } catch {}
+    // Restore user config (currency, rate, section visibility).
+    // Try synchronously first (kv is usually ready on mount), fall back to
+    // polling if the module was reloaded and kv hasn't initialised yet.
+    const doRestore = () => {
+      try {
+        const sym = props.api.kv.get<string>(`${KV_PREFIX}.currency`)
+        const rate = props.api.kv.get<number>(`${KV_PREFIX}.rate`)
+        if (typeof sym === "string") setCurrencySymbol(sym)
+        if (typeof rate === "number" && rate > 0) setExchangeRate(rate)
+        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 bv = props.api.kv.get<boolean>(`${KV_PREFIX}.border`, true)
+        setBorderVisible(bv !== false)
+        // 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`)
+        if (cachedDist) {
+          setLastDist(cachedDist)
+          setLastHasDist(true)
+        }
+      } catch {
+        // kv read failed — signals stay at defaults
+      }
+      // Re-measure panel width after config signals have settled
+      if (boxEl && typeof boxEl.width === "number" && boxEl.width > 0) {
+        setPanelWidth(Math.max(MIN_PANEL_WIDTH, boxEl.width))
+      }
+    }
+
+    if (props.api.kv.ready) {
+      doRestore()
+    } else {
+      const pollRestore = () => {
+        if (!props.api.kv.ready) {
+          setTimeout(pollRestore, 10)
+          return
+        }
+        doRestore()
+      }
+      pollRestore()
+    }
 
     const unsubPart = props.api.event.on("message.part.updated", () => {
       setPartVersion((v) => v + 1)
@@ -591,22 +676,36 @@ 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()))
   const pct = createMemo(() => (Math.floor(data().hitRate * 10) / 10).toFixed(1) + "%")
 
+  // When border visibility changes the box dimensions shift, which
+  // may not reliably trigger onSizeChange across (re)mount cycles.
+  // Force panelWidth to resync with the live box after every change.
+  createEffect(() => {
+    borderVisible()
+    if (boxEl && typeof boxEl.width === "number" && boxEl.width > 0) {
+      const w = Math.max(MIN_PANEL_WIDTH, boxEl.width)
+      setPanelWidth((prev) => (prev === w ? prev : w))
+    }
+  })
+
   // 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 +713,12 @@ function TokenCachePanel(props: {
 
   return (
     <box
-      border
-      borderColor={pal().border}
+      border={borderVisible()}
+      {...(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 +740,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 +749,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 +813,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>
@@ -809,7 +908,7 @@ function TokenCachePanel(props: {
 // Plugin entry
 // ---------------------------------------------------------------------------
 
-function createSidebarSlot(api: TuiPluginApi): TuiSlotPlugin {
+function createSidebarSlot(api: TuiPluginApi, signals: PanelSignals): TuiSlotPlugin {
   return {
     order: 55,
     slots: {
@@ -819,6 +918,7 @@ function createSidebarSlot(api: TuiPluginApi): TuiSlotPlugin {
             theme={ctx.theme.current}
             api={api}
             sessionId={input.session_id}
+            signals={signals}
           />
         )
       },
@@ -827,7 +927,24 @@ function createSidebarSlot(api: TuiPluginApi): TuiSlotPlugin {
 }
 
 const tui: TuiPlugin = async (api: TuiPluginApi) => {
-  api.slots.register(createSidebarSlot(api))
+  // ── shared panel signals ──────────────────────────────────────
+  const [currencySymbol, setCurrencySymbol] = createSignal("$")
+  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 signals: PanelSignals = {
+    currencySymbol, setCurrencySymbol,
+    exchangeRate, setExchangeRate,
+    sectionDetail, setSectionDetail,
+    sectionModel, setSectionModel,
+    sectionDist, setSectionDist,
+    borderVisible, setBorderVisible,
+  }
+
+  api.slots.register(createSidebarSlot(api, signals))
 
   // ── slash commands for runtime config ──
   const KV_PREFIX = "cache_panel"
@@ -850,8 +967,8 @@ const tui: TuiPlugin = async (api: TuiPluginApi) => {
               const defRate = DEFAULT_RATES[opt.value] ?? 1
               api.kv.set(`${KV_PREFIX}.currency`, sym)
               api.kv.set(`${KV_PREFIX}.rate`, defRate)
-              setCurrencySymbol(sym)
-              setExchangeRate(defRate)
+              signals.setCurrencySymbol(sym)
+              signals.setExchangeRate(defRate)
               api.ui.toast({ message: `Currency: ${opt.value} (${sym}), rate: ${defRate}` })
               dialog?.clear()
             }}
@@ -875,7 +992,7 @@ const tui: TuiPlugin = async (api: TuiPluginApi) => {
               const n = parseFloat(val)
               if (n > 0) {
                 api.kv.set(`${KV_PREFIX}.rate`, n)
-                setExchangeRate(n)
+                signals.setExchangeRate(n)
                 api.ui.toast({ message: `Exchange rate set to ${n}` })
               }
               dialog?.clear()
@@ -893,6 +1010,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 +1018,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)
+                signals.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") signals.setSectionDetail(!cur)
+                if (opt.value === "model")  signals.setSectionModel(!cur)
+                if (opt.value === "dist")   signals.setSectionDist(!cur)
+                api.ui.toast({ message: `${opt.value} section ${!cur ? "shown" : "hidden"}` })
+              }
               dialog?.clear()
             }}
           />