opencode-visual-cache 1.0.5 → 1.0.6

package/dist/index.js

@@ -57,6 +57,7 @@ const T = LANG_ZH ? {
     cost: "费用:",
     saved: "累计节省:",
     model: "模型:",
+    provider: "提供商:",
     rate: "单价:",
     hitFolded: "命中",
     inputRate: "输入",
@@ -72,6 +73,7 @@ const T = LANG_ZH ? {
     cost: "Cost:",
     saved: "Total Saved:",
     model: "Model:",
+    provider: "Provider:",
     rate: "Rate:",
     hitFolded: "hit",
     inputRate: "in",
@@ -201,10 +203,19 @@ function TokenCachePanel(props) {
         let cost = 0;
         let pid = "";
         let mid = "";
+        // Track individual hit rates per assistant message to compute trend
+        let prevMsgHitRate = -1;
+        let lastMsgHitRate = -1;
         for (const msg of msgs) {
             if (msg.role !== "assistant")
                 continue;
             const t = msg.tokens;
+            const msgInputTokens = num(t.input) + num(t.cache?.read);
+            const msgReadTokens = num(t.cache?.read);
+            if (msgInputTokens > 0) {
+                prevMsgHitRate = lastMsgHitRate;
+                lastMsgHitRate = (msgReadTokens / msgInputTokens) * 100;
+            }
             input += num(t.input);
             read += num(t.cache?.read);
             write += num(t.cache?.write);
@@ -240,10 +251,18 @@ function TokenCachePanel(props) {
         const hitRate = totalInput > 0 ? (read / totalInput) * 100 : 0;
         const model = mid.split("/").pop() ?? mid;
         const hasPricing = inputRate > 0 || cacheReadRate > 0;
+        let trend = 0;
+        const hasTrendData = prevMsgHitRate >= 0 && lastMsgHitRate >= 0;
+        if (hasTrendData) {
+            trend = lastMsgHitRate - prevMsgHitRate;
+        }
+        const providerName = pid || "";
         return {
             hitRate, read, write, freshInput: input, output,
             cost, saved, model, inputRate, cacheReadRate, hasPricing,
-            hasData: read > 0 || write > 0 || cost > 0,
+            hasData: read > 0 || write > 0 || input > 0 || output > 0 || cost > 0,
+            trend, hasTrendData,
+            providerName,
         };
     });
     const d = () => data();
@@ -272,8 +291,12 @@ function TokenCachePanel(props) {
         return pal().error;
     });
     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 overhead = visualWidth(T.hit) + 1 + 2 + 1 + /*pct*/ 5 + GUTTER;
+        const trendSpace = d().hasTrendData ? 1 + visualWidth(trendLabel(d().trend)) : 0;
+        const overhead = visualWidth(T.hit) + 1 + 2 + 1 + /*pct*/ 5 + trendSpace + GUTTER;
         return Math.max(3, panelWidth() - overhead);
     });
     const bar = createMemo(() => progressBar(d().hitRate, barW()));
@@ -288,7 +311,7 @@ function TokenCachePanel(props) {
     return (_jsx(Show, { when: d().hasData, children: _jsxs("box", { border: true, borderColor: pal().border, paddingTop: 0, paddingBottom: 0, paddingLeft: 2, paddingRight: 2, flexDirection: "column", gap: 0, onSizeChange: function () {
                 const w = Math.max(MIN_PANEL_WIDTH, this.width);
                 setPanelWidth((prev) => (prev === w ? prev : w));
-            }, children: [_jsxs("text", { onMouseUp: () => setOpen((o) => !o), children: [_jsx("span", { style: { fg: pal().muted }, children: open() ? "\u25bc " : "\u25b6 " }), _jsx("span", { style: { fg: pal().primary }, children: _jsx("b", { children: T.title }) }), _jsxs(Show, { when: !open(), children: [_jsx("span", { children: " ".repeat(Math.max(1, panelWidth() - GUTTER - 2 - visualWidth(T.title) - visualWidth(pct() + " " + T.hitFolded))) }), _jsxs("span", { style: { fg: hitColor() }, children: [pct(), " ", T.hitFolded] })] })] }), _jsxs(Show, { when: open(), 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("text", { fg: pal().muted, children: justify(T.read, fmt(d().read), T.tok) }), _jsx("text", { fg: pal().muted, children: justify(T.write, fmt(d().write), T.tok) }), _jsx("text", { fg: pal().muted, children: justify(T.miss, fmt(d().freshInput), T.tok) }), _jsx("text", { fg: pal().muted, children: justify(T.out, fmt(d().output), T.tok) }), _jsx("text", { fg: pal().muted, children: sep() }), _jsx("text", { fg: pal().text, children: justify(T.cost, fmtCost(d().cost)) }), _jsx(Show, { when: d().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(d().saved)))) }), _jsxs("span", { style: { fg: pal().success }, children: ["~", fmtCost(d().saved)] })] }) }), _jsx("text", { fg: pal().muted, children: justify(T.model, d().model) }), _jsxs(Show, { when: d().hasPricing, children: [_jsx("text", { fg: pal().muted, children: justify(T.rate, "$" + d().inputRate.toFixed(2) + "/M " + T.inputRate) }), _jsx(Show, { when: d().cacheReadRate > 0, children: _jsx("text", { fg: pal().muted, children: justify("", "$" + d().cacheReadRate.toFixed(2) + "/M " + T.cacheRate) }) })] })] })] }) }));
+            }, children: [_jsxs("text", { onMouseUp: () => setOpen((o) => !o), children: [_jsx("span", { style: { fg: pal().muted }, children: open() ? "\u25bc " : "\u25b6 " }), _jsx("span", { style: { fg: pal().primary }, children: _jsx("b", { children: T.title }) }), _jsxs(Show, { when: !open(), children: [_jsxs(Show, { when: d().hasTrendData, children: [_jsx("span", { children: " ".repeat(Math.max(1, panelWidth() - GUTTER - 2 - visualWidth(T.title) - visualWidth(pct() + " " + T.hitFolded + " " + trendLabel(d().trend)))) }), _jsxs("span", { style: { fg: hitColor() }, children: [pct(), " ", T.hitFolded] }), _jsxs("span", { style: { fg: d().trend !== 0 ? (d().trend > 0 ? pal().success : pal().error) : pal().text }, children: [" ", trendLabel(d().trend)] })] }), _jsxs(Show, { when: !d().hasTrendData, children: [_jsx("span", { children: " ".repeat(Math.max(1, panelWidth() - GUTTER - 2 - visualWidth(T.title) - visualWidth(pct() + " " + T.hitFolded))) }), _jsxs("span", { style: { fg: hitColor() }, children: [pct(), " ", T.hitFolded] })] })] })] }), _jsxs(Show, { when: open(), 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: d().hasTrendData, children: _jsxs("span", { style: { fg: d().trend !== 0 ? (d().trend > 0 ? pal().success : pal().error) : pal().text }, children: [" ", trendLabel(d().trend)] }) })] }), _jsx(Show, { when: d().read > 0, children: _jsx("text", { fg: pal().muted, children: justify(T.read, fmt(d().read), T.tok) }) }), _jsx(Show, { when: d().write > 0, children: _jsx("text", { fg: pal().muted, children: justify(T.write, fmt(d().write), T.tok) }) }), _jsx("text", { fg: pal().muted, children: justify(T.miss, fmt(d().freshInput), T.tok) }), _jsx("text", { fg: pal().muted, children: justify(T.out, fmt(d().output), T.tok) }), _jsx("text", { fg: pal().muted, children: sep() }), _jsx("text", { fg: pal().text, children: justify(T.cost, fmtCost(d().cost)) }), _jsx(Show, { when: d().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(d().saved)))) }), _jsxs("span", { style: { fg: pal().success }, children: ["~", fmtCost(d().saved)] })] }) }), _jsx(Show, { when: d().providerName, children: _jsx("text", { fg: pal().muted, children: justify(T.provider, d().providerName) }) }), _jsx("text", { fg: pal().muted, children: justify(T.model, d().model) }), _jsxs(Show, { when: d().hasPricing, children: [_jsx("text", { fg: pal().muted, children: justify(T.rate, "$" + d().inputRate.toFixed(2) + "/M " + T.inputRate) }), _jsx(Show, { when: d().cacheReadRate > 0, children: _jsx("text", { fg: pal().muted, children: justify("", "$" + d().cacheReadRate.toFixed(2) + "/M " + T.cacheRate) }) })] })] })] }) }));
 }
 // ---------------------------------------------------------------------------
 // Plugin entry

package/package.json

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

package/src/index.tsx

@@ -73,6 +73,7 @@ const T = LANG_ZH ? {
   cost:       "费用:",
   saved:      "累计节省:",
   model:      "模型:",
+  provider:   "提供商:",
   rate:       "单价:",
   hitFolded:  "命中",
   inputRate:  "输入",
@@ -88,6 +89,7 @@ const T = LANG_ZH ? {
   cost:       "Cost:",
   saved:      "Total Saved:",
   model:      "Model:",
+  provider:   "Provider:",
   rate:       "Rate:",
   hitFolded:  "hit",
   inputRate:  "in",
@@ -229,9 +231,19 @@ function TokenCachePanel(props: {
     let pid = ""
     let mid = ""
 
+    // Track individual hit rates per assistant message to compute trend
+    let prevMsgHitRate = -1
+    let lastMsgHitRate = -1
+
     for (const msg of msgs) {
       if (msg.role !== "assistant") continue
       const t = (msg as AssistantMessage).tokens
+      const msgInputTokens = num(t.input) + num(t.cache?.read)
+      const msgReadTokens = num(t.cache?.read)
+      if (msgInputTokens > 0) {
+        prevMsgHitRate = lastMsgHitRate
+        lastMsgHitRate = (msgReadTokens / msgInputTokens) * 100
+      }
       input += num(t.input)
       read   += num(t.cache?.read)
       write  += num(t.cache?.write)
@@ -267,10 +279,20 @@ function TokenCachePanel(props: {
     const model = mid.split("/").pop() ?? mid
     const hasPricing = inputRate > 0 || cacheReadRate > 0
 
+    let trend = 0
+    const hasTrendData = prevMsgHitRate >= 0 && lastMsgHitRate >= 0
+    if (hasTrendData) {
+      trend = lastMsgHitRate - prevMsgHitRate
+    }
+
+    const providerName = pid || ""
+
     return {
       hitRate, read, write, freshInput: input, output,
       cost, saved, model, inputRate, cacheReadRate, hasPricing,
-      hasData: read > 0 || write > 0 || cost > 0,
+      hasData: read > 0 || write > 0 || input > 0 || output > 0 || cost > 0,
+      trend, hasTrendData,
+      providerName,
     }
   })
 
@@ -301,8 +323,13 @@ function TokenCachePanel(props: {
   })
 
   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 overhead = visualWidth(T.hit) + 1 + 2 + 1 + /*pct*/5 + GUTTER
+    const trendSpace = d().hasTrendData ? 1 + visualWidth(trendLabel(d().trend)) : 0
+    const overhead = visualWidth(T.hit) + 1 + 2 + 1 + /*pct*/5 + trendSpace + GUTTER
     return Math.max(3, panelWidth() - overhead)
   })
   const bar = createMemo(() => progressBar(d().hitRate, barW()))
@@ -337,10 +364,21 @@ function TokenCachePanel(props: {
           <span style={{ fg: pal().muted }}>{open() ? "\u25bc " : "\u25b6 "}</span>
           <span style={{ fg: pal().primary }}><b>{T.title}</b></span>
           <Show when={!open()}>
-            <span>
-              {" ".repeat(Math.max(1, panelWidth() - GUTTER - 2 - visualWidth(T.title) - visualWidth(pct() + " " + T.hitFolded)))}
-            </span>
-            <span style={{ fg: hitColor() }}>{pct()} {T.hitFolded}</span>
+            <Show when={d().hasTrendData}>
+              <span>
+                {" ".repeat(Math.max(1, panelWidth() - GUTTER - 2 - visualWidth(T.title) - visualWidth(pct() + " " + T.hitFolded + " " + trendLabel(d().trend))))}
+              </span>
+              <span style={{ fg: hitColor() }}>{pct()} {T.hitFolded}</span>
+              <span style={{ fg: d().trend !== 0 ? (d().trend > 0 ? pal().success : pal().error) : pal().text }}>
+                {" "}{trendLabel(d().trend)}
+              </span>
+            </Show>
+            <Show when={!d().hasTrendData}>
+              <span>
+                {" ".repeat(Math.max(1, panelWidth() - GUTTER - 2 - visualWidth(T.title) - visualWidth(pct() + " " + T.hitFolded)))}
+              </span>
+              <span style={{ fg: hitColor() }}>{pct()} {T.hitFolded}</span>
+            </Show>
           </Show>
         </text>
 
@@ -352,15 +390,24 @@ function TokenCachePanel(props: {
             <span style={{ fg: pal().text }}>{T.hit} </span>
             <span style={{ fg: hitColor() }}>[{bar()}] </span>
             <span style={{ fg: pal().text }}>{pct()}</span>
+            <Show when={d().hasTrendData}>
+              <span style={{ fg: d().trend !== 0 ? (d().trend > 0 ? pal().success : pal().error) : pal().text }}>
+                {" "}{trendLabel(d().trend)}
+              </span>
+            </Show>
           </text>
 
           {/* token breakdown */}
-          <text fg={pal().muted}>
-            {justify(T.read,  fmt(d().read),         T.tok)}
-          </text>
-          <text fg={pal().muted}>
-            {justify(T.write, fmt(d().write),        T.tok)}
-          </text>
+          <Show when={d().read > 0}>
+            <text fg={pal().muted}>
+              {justify(T.read,  fmt(d().read),         T.tok)}
+            </text>
+          </Show>
+          <Show when={d().write > 0}>
+            <text fg={pal().muted}>
+              {justify(T.write, fmt(d().write),        T.tok)}
+            </text>
+          </Show>
           <text fg={pal().muted}>
             {justify(T.miss,  fmt(d().freshInput),   T.tok)}
           </text>
@@ -384,6 +431,13 @@ function TokenCachePanel(props: {
             </text>
           </Show>
 
+          {/* provider */}
+          <Show when={d().providerName}>
+            <text fg={pal().muted}>
+              {justify(T.provider, d().providerName)}
+            </text>
+          </Show>
+
           {/* model */}
           <text fg={pal().muted}>
             {justify(T.model, d().model)}