opencode-visual-cache 1.2.9-beta.0 → 1.2.10

package/README.md

@@ -134,6 +134,8 @@ npm install -g opencode-visual-cache@latest
 
 通过 `/cache-section` 切换后即时生效，无需重启。此外，该命令还可以开关面板的**外边框**——关闭后内容会顶格显示，释放额外空间。
 
+> **关于 Token 分布数值**：分布面板中"总计"为最后一次 API 调用的精确 token 数，"系统提示"/"用户"等分项为字符级 BPE 估算值。分项之和通常小于总计，差值主要来自 OpenCode 运行时注入的系统提示组成部分，包括环境信息、Skill 目录、工具 Schema 定义等（详见 [`system.ts`](https://github.com/anomalyco/opencode/blob/dev/packages/opencode/src/session/system.ts)、[`tools.ts`](https://github.com/anomalyco/opencode/blob/dev/packages/opencode/src/session/tools.ts)）。这些内容不在 agent 配置的 `prompt` 字段中，因此插件无法估算，属于预期行为。
+
 ---
 
 ## 5. 更新

package/dist/_version.d.ts

@@ -1 +1 @@
-export declare const PLUGIN_VERSION = "1.2.9-beta.0";
+export declare const PLUGIN_VERSION = "1.2.10";

package/dist/_version.js

@@ -1,2 +1,2 @@
 // auto-generated
-export const PLUGIN_VERSION = "1.2.9-beta.0";
+export const PLUGIN_VERSION = "1.2.10";

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, createEffect, onMount, onCleanup, Show } from "solid-js";
+import { createMemo, createSignal, createEffect, onMount, onCleanup, Show, untrack } from "solid-js";
 import { PLUGIN_VERSION } from "./_version";
 // ── terminal-width helpers ────────────────────────────────────────
 // CJK characters occupy 2 terminal columns; padEnd/padStart count
@@ -216,7 +216,7 @@ function fmt(n) {
     if (n >= 1_000_000)
         return (n / 1_000_000).toFixed(1) + "M";
     if (n >= 10_000)
-        return Math.round(n / 1_000) + "K";
+        return (n / 1_000).toFixed(1) + "K";
     return n.toLocaleString("en-US");
 }
 function num(v) {
@@ -256,16 +256,19 @@ function estimateTokens(text) {
         else
             ascii++;
     }
-    // Tighten the ASCII ratio for structured content where punctuation is
-    // token-dense.  JSON key-value patterns and code keywords are strong
-    // signals that the default 4:1 ratio will materially under-estimate.
+    // Real BPE tokenizers (cl100k_base, o200k_base) average ~3.5-4.0
+    // ASCII chars/token for both JSON and source code — close to prose.
+    // The old 2.0 / 2.5 ratios matched minified-JS extremes, not typical
+    // payloads, and systematically over-estimated token counts.
     const trimmed = text.trimStart();
-    const jsonLike = (trimmed.startsWith("{") || trimmed.startsWith("["))
+    // Strip markdown code-fence prefix so that ```json … is detected as JSON
+    const strippedFence = trimmed.replace(/^\x60{3}\w*\s*\n?/, "");
+    const jsonLike = (strippedFence.startsWith("{") || strippedFence.startsWith("["))
         && /"[^"]+"\s*:/.test(text);
     const codeLike = !jsonLike
         && /```|^import |^export |^function |^const |^let |^var |^class |^interface |^type |^def |^fn |^pub |^use |^mod |^package /m.test(text);
-    const asciiPerToken = jsonLike ? 2 : codeLike ? 2.5 : 4;
-    return Math.max(1, Math.ceil(ascii / asciiPerToken + cjk / 1.5));
+    const asciiPerToken = jsonLike ? 3.5 : codeLike ? 3.5 : 4;
+    return Math.max(1, Math.ceil(ascii / asciiPerToken + cjk / 1.0));
 }
 const CURRENCIES = {
     USD: "$", CNY: "¥", EUR: "€", JPY: "JP¥", GBP: "£", KRW: "₩",
@@ -306,29 +309,33 @@ function TokenCachePanel(props) {
         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;
-        let read = 0;
-        let write = 0;
-        let output = 0;
-        let cost = 0;
-        let pid = "";
-        let mid = "";
-        // Track individual hit rates per assistant message to compute trend
-        let prevMsgHitRate = -1;
-        let lastMsgHitRate = -1;
+    const [dataSignal, setDataSignal] = createSignal({
+        hitRate: 0, read: 0, write: 0, freshInput: 0, output: 0,
+        cost: 0, saved: 0, model: "", inputRate: 0, cacheReadRate: 0, cacheWriteRate: 0,
+        hasPricing: false, hasData: false, trend: 0, hasTrendData: false,
+        providerName: "", sessionHitRate: 0,
+        dist: { system: 0, user: 0, agent: 0, toolCall: 0, toolResult: 0, output: 0, apiOutput: 0, apiInput: 0, stepCost: 0 },
+        hasDistData: false,
+    });
+    const [refreshTick, setRefreshTick] = createSignal(0);
+    createEffect(() => {
+        const sid = props.sessionId;
+        void refreshTick();
+        void partVersion();
+        // 自然追踪 messages 和 provider（SDK 数据就绪时自动重新执行）
+        const msgs = props.api.state.session.messages(sid);
+        let input = 0, read = 0, write = 0, output = 0, cost = 0, pid = "", mid = "";
+        let prevMsgHitRate = -1, lastMsgHitRate = -1;
         for (const msg of msgs) {
             if (msg.role !== "assistant")
                 continue;
             const t = msg.tokens;
             if (!t)
                 continue;
-            const msgInputTokens = num(t.input) + num(t.cache?.read);
-            const msgReadTokens = num(t.cache?.read);
-            if (msgInputTokens > 0) {
+            const mit = num(t.input) + num(t.cache?.read), mrt = num(t.cache?.read);
+            if (mit > 0) {
                 prevMsgHitRate = lastMsgHitRate;
-                lastMsgHitRate = (msgReadTokens / msgInputTokens) * 100;
+                lastMsgHitRate = (mrt / mit) * 100;
             }
             input += num(t.input);
             read += num(t.cache?.read);
@@ -340,12 +347,8 @@ function TokenCachePanel(props) {
                 mid = msg.modelID;
             }
         }
-        // cost savings from cache hits
-        let saved = 0;
-        let inputRate = 0;
-        let cacheReadRate = 0;
-        let cacheWriteRate = 0;
-        if (read > 0 && pid && mid) {
+        let saved = 0, inputRate = 0, cacheReadRate = 0, cacheWriteRate = 0;
+        if (read > 0 && pid && mid)
             for (const provider of props.api.state.provider) {
                 if (provider.id !== pid)
                     continue;
@@ -355,152 +358,115 @@ function TokenCachePanel(props) {
                 inputRate = num(model.cost.input);
                 cacheReadRate = num(model.cost.cache?.read);
                 cacheWriteRate = num(model.cost.cache?.write);
-                const diff = inputRate - cacheReadRate;
-                if (diff > 0)
-                    saved = (read * diff) / 1_000_000;
+                if (inputRate > cacheReadRate)
+                    saved = (read * (inputRate - cacheReadRate)) / 1_000_000;
                 break;
             }
-        }
-        // `input` from the API represents fresh (non-cached) tokens.
         const hitRate = lastMsgHitRate >= 0 ? lastMsgHitRate : 0;
-        // Total context = fresh + cache.read.
-        const freshTotal = input + read;
-        const sessionHitRate = freshTotal > 0 ? (read / freshTotal) * 100 : 0;
-        const model = mid.split("/").pop() ?? mid;
-        const hasPricing = inputRate > 0 || cacheReadRate > 0 || cacheWriteRate > 0;
-        let trend = 0;
+        const freshTotal = input + read, sessionHitRate = freshTotal > 0 ? (read / freshTotal) * 100 : 0;
+        const model = mid.split("/").pop() ?? mid, hasPricing = inputRate > 0 || cacheReadRate > 0 || cacheWriteRate > 0;
         const hasTrendData = prevMsgHitRate >= 0 && lastMsgHitRate >= 0;
-        if (hasTrendData) {
-            trend = lastMsgHitRate - prevMsgHitRate;
-        }
-        const providerName = pid || "";
-        // ── token distribution (in-process via api.state.part) ──
-        // Wrapped in try-catch so a part fetching failure never crashes the panel.
-        let dist = { system: 0, user: 0, agent: 0, toolCall: 0, toolResult: 0, output: 0, apiOutput: 0, apiInput: 0, stepCost: 0 };
-        let hasDistData = false;
-        try {
-            partVersion(); // track part changes for reactivity
-            dist = { system: 0, user: 0, agent: 0, toolCall: 0, toolResult: 0, output: 0, apiOutput: 0, apiInput: 0, stepCost: 0 };
-            // Read agent system prompt once before the message loop.  Reading it
-            // inside the per-user-message branch risks transient unavailability
-            // (api.state.config not yet resolved during streaming) silently
-            // resetting a previously-computed value and causing display flicker.
+        const trend = hasTrendData ? lastMsgHitRate - prevMsgHitRate : 0, providerName = pid || "";
+        // untrack 只包裹已知触发死锁的 API
+        const distData = untrack(() => {
+            let dist = { system: 0, user: 0, agent: 0, toolCall: 0, toolResult: 0, output: 0, apiOutput: 0, apiInput: 0, stepCost: 0 };
+            let hasDistData = false;
             try {
-                const session = props.api.state.session.get(props.sessionId);
-                const cfg = props.api.state.config;
+                const session = props.api.state.session.get(sid), cfg = props.api.state.config;
                 const agentName = String(session?.agent ?? cfg?.default_agent ?? "build");
                 const agents = cfg?.agent;
                 const agentCfg = agents?.[agentName];
                 const sysPrompt = typeof agentCfg?.prompt === "string" ? agentCfg.prompt : "";
                 if (sysPrompt)
                     dist.system = estimateTokens(sysPrompt);
-            }
-            catch { }
-            for (const msg of msgs) {
-                if (msg.role === "user") {
-                    const um = msg;
-                    if (um.system)
-                        dist.system += estimateTokens(um.system);
-                    let parts = [];
-                    try {
-                        parts = props.api.state.part(msg.id);
-                    }
-                    catch { }
-                    for (const p of parts) {
-                        if (p.type === "text" && !p.synthetic && !p.ignored) {
-                            dist.user += estimateTokens(p.text);
+                let lastAssMsg;
+                for (const msg of msgs) {
+                    if (msg.role === "user") {
+                        const um = msg;
+                        if (um.system)
+                            dist.system += estimateTokens(um.system);
+                        let parts = [];
+                        try {
+                            parts = props.api.state.part(msg.id);
                         }
-                        else if (p.type === "file") {
-                            const fp = p;
-                            if (fp.source?.text?.value)
-                                dist.user += estimateTokens(fp.source.text.value);
+                        catch { }
+                        for (const p of parts) {
+                            if (p.type === "text" && !p.synthetic && !p.ignored)
+                                dist.user += estimateTokens(p.text);
+                            else if (p.type === "file") {
+                                const fp = p;
+                                if (fp.source?.text?.value)
+                                    dist.user += estimateTokens(fp.source.text.value);
+                            }
                         }
                     }
-                }
-                else if (msg.role === "assistant") {
-                    const am = msg;
-                    dist.output += num(am.tokens?.output);
-                    let parts = [];
-                    try {
-                        parts = props.api.state.part(msg.id);
-                    }
-                    catch { }
-                    for (const p of parts) {
-                        if (p.type === "tool") {
-                            const tp = p;
-                            // Tool call input (params)
-                            let rawInput = "";
-                            try {
-                                rawInput = tp.state.raw ?? JSON.stringify(tp.state.input);
-                            }
-                            catch {
+                    else if (msg.role === "assistant") {
+                        const am = msg;
+                        dist.output += num(am.tokens?.output);
+                        let parts = [];
+                        try {
+                            parts = props.api.state.part(msg.id);
+                        }
+                        catch { }
+                        for (const p of parts) {
+                            if (p.type === "tool") {
+                                const tp = p;
+                                let rawInput = "";
                                 try {
-                                    rawInput = JSON.stringify(tp.state);
+                                    rawInput = tp.state.raw ?? (tp.state.input != null ? JSON.stringify(tp.state.input) : "");
                                 }
                                 catch { }
+                                if (rawInput)
+                                    dist.toolCall += estimateTokens(rawInput);
+                                if (tp.state.status === "completed") {
+                                    const c = tp.state;
+                                    if (c.output)
+                                        dist.toolResult += estimateTokens(c.output);
+                                }
+                                else if (tp.state.status === "error") {
+                                    const e = tp.state;
+                                    if (e.error)
+                                        dist.toolResult += estimateTokens(e.error);
+                                }
                             }
-                            if (rawInput)
-                                dist.toolCall += estimateTokens(rawInput);
-                            // Tool result output
-                            if (tp.state.status === "completed") {
-                                const completed = tp.state;
-                                if (completed.output)
-                                    dist.toolResult += estimateTokens(completed.output);
-                            }
-                            else if (tp.state.status === "error") {
-                                const errored = tp.state;
-                                if (errored.error)
-                                    dist.toolResult += estimateTokens(errored.error);
+                            else if (p.type === "reasoning")
+                                dist.agent += estimateTokens(p.text);
+                            else if (p.type === "subtask") {
+                                const sub = p;
+                                dist.agent += estimateTokens(sub.prompt || sub.description || "");
                             }
                         }
-                        else if (p.type === "reasoning") {
-                            dist.agent += estimateTokens(p.text);
-                        }
-                        else if (p.type === "subtask") {
-                            const sub = p;
-                            dist.agent += estimateTokens(sub.prompt || sub.description || "");
-                        }
-                        else if (p.type === "step-finish") {
-                            // StepFinishPart carries API-exact per-call token counts.
-                            // Sum across all step-finish parts (one per API call in tool loops).
-                            const sf = p;
-                            dist.apiInput += sf.tokens?.input ?? 0;
-                            dist.apiOutput += sf.tokens?.output ?? 0;
-                        }
                     }
                 }
+                // 从后往前找最后一条有 token 数据的 assistant 消息（避免取到 streaming 中未填充的消息）
+                for (let i = msgs.length - 1; i >= 0; i--) {
+                    if (msgs[i].role !== "assistant")
+                        continue;
+                    const t = msgs[i].tokens;
+                    if (t && (t.input > 0 || (t.cache?.read ?? 0) > 0)) {
+                        lastAssMsg = msgs[i];
+                        break;
+                    }
+                }
+                // 取最后一条有数据消息的总输入（含缓存读）作为当前 context 大小
+                dist.apiInput = num(lastAssMsg?.tokens?.input) + num(lastAssMsg?.tokens?.cache?.read);
+                dist.apiOutput = num(lastAssMsg?.tokens?.output);
+                hasDistData = dist.system + dist.user + dist.agent + dist.toolCall + dist.toolResult > 0 || dist.apiOutput > 0 || dist.apiInput > 0;
             }
-            const totalInput = dist.system + dist.user + dist.agent + dist.toolCall + dist.toolResult;
-            const apiTotalInput = dist.apiInput;
-            // Use API output if available (StepFinishPart is more accurate than AssistantMessage.tokens)
-            const finalOutput = dist.apiOutput > 0 ? dist.apiOutput : dist.output;
-            // Gap inference: the SDK does not expose per-part token counts, so any
-            // API-exact input total that exceeds the locally-estimated sum is attributed
-            // to system prompt / agent config / tool-definition overhead.  Add it to the
-            // system bucket rather than replacing the local estimate.
-            const overhead = Math.max(0, apiTotalInput - totalInput);
-            if (overhead >= 50) {
-                dist.system += overhead;
-            }
-            hasDistData = totalInput > 0 || finalOutput > 0 || apiTotalInput > 0;
-        }
-        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,
+            catch { }
+            const finalDist = hasDistData ? dist : lastDist(), finalHasDist = hasDistData || lastHasDist();
+            return { finalDist, finalHasDist };
+        });
+        setDataSignal({
+            hitRate, read, write, freshInput: input, output, cost, saved, model,
+            inputRate, cacheReadRate, cacheWriteRate, hasPricing,
             hasData: read > 0 || write > 0 || input > 0 || output > 0 || cost > 0,
-            trend, hasTrendData,
-            providerName,
-            sessionHitRate,
-            dist: finalDist,
-            hasDistData: finalHasDist,
-        };
+            trend, hasTrendData, providerName, sessionHitRate,
+            dist: distData.finalDist, hasDistData: distData.finalHasDist,
+        });
+    });
+    const data = createMemo(() => {
+        return dataSignal();
     });
     // Persist the last valid distribution so that data() can fall back
     // to it while api.state.part() is re-hydrating after a view switch.
@@ -600,8 +566,9 @@ function TokenCachePanel(props) {
             clearTimeout(partTimer);
             partTimer = setTimeout(() => setPartVersion((v) => v + 1), 100);
         };
-        const unsubPart = props.api.event.on("message.part.updated", bumpPartVersion);
-        const unsubMsg = props.api.event.on("message.updated", bumpPartVersion);
+        const unsubPart = props.api.event.on("message.part.updated", () => { bumpPartVersion(); setRefreshTick(v => v + 1); });
+        const unsubMsg = props.api.event.on("message.updated", () => { bumpPartVersion(); setRefreshTick(v => v + 1); });
+        setRefreshTick(v => v + 1);
         onCleanup(() => { clearTimeout(partTimer); unsubPart(); unsubMsg(); });
     });
     // ── colours ──
@@ -662,7 +629,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.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.apiInput), T.tok) })] })] }) })] }) })] }));
 }
 // ---------------------------------------------------------------------------
 // Plugin entry

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-visual-cache",
-  "version": "1.2.9-beta.0",
+  "version": "1.2.10",
   "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.9-beta.0";
+export const PLUGIN_VERSION="1.2.10";