opencode-visual-cache 1.6.1 → 1.6.2

package/dist/_version.d.ts

@@ -1 +1 @@
-export declare const PLUGIN_VERSION = "1.6.1";
+export declare const PLUGIN_VERSION = "1.6.2";

package/dist/_version.js

@@ -1,2 +1,2 @@
 // auto-generated
-export const PLUGIN_VERSION = "1.6.1";
+export const PLUGIN_VERSION = "1.6.2";

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, untrack } from "solid-js";
+import { createMemo, createSignal, createEffect, onMount, onCleanup, Show, For, untrack } from "solid-js";
 import { PLUGIN_VERSION } from "./_version";
 import { balanceProviders, getBalanceProvider, maskKey, matchBalanceProvider } from "./balance-providers";
 import { LANG_META, createT, detectLang } from "./i18n";
@@ -333,6 +333,11 @@ function TokenCachePanel(props) {
     const [distOpen, setDistOpen] = createSignal(false);
     const [skillsOpen, setSkillsOpen] = createSignal(true);
     let boxEl;
+    // 侧边栏可见性通知：本面板挂载 ⇒ 宿主侧边栏可见（固定占用 42 列输入框宽度）
+    createEffect(() => {
+        props.signals.setSidebarVisible(true);
+        onCleanup(() => props.signals.setSidebarVisible(false));
+    });
     // ── shared signals (de-structured so internal code is unchanged) ──
     const { currencySymbol, setCurrencySymbol, exchangeRate, setExchangeRate, langCode, sectionDetail, setSectionDetail, sectionModel, setSectionModel, sectionDist, setSectionDist, sectionSkills, setSectionSkills, sectionBalance, setSectionBalance, balanceRefresh, balanceProviderId, setBalanceProviderId, autoBalance, setAutoBalance, balanceUnsupported, setBalanceUnsupported, balanceState, balanceCurrency, setBalanceCurrency, borderVisible, setBorderVisible, } = props.signals;
     // ── reactive translation (follows langCode signal) ──
@@ -857,6 +862,32 @@ function TokenCachePanel(props) {
 // ---------------------------------------------------------------------------
 // Plugin entry
 // ---------------------------------------------------------------------------
+/**
+ * 路径截断的固定开销（列数）：仅宿主布局常量，不含任何内容宽度——
+ * 统计宽度、宿主 usage、commands 快捷键均为运行时动态计算。
+ * - marginLeft=1 + space-between 余量 ≈ 2 列
+ */
+const PATH_CHROME = 2;
+/**
+ * 路径可用宽度低于此列数时整体隐藏（极窄终端下路径信息价值太低，
+ * 残留的 "E:\Work…" 反而挤压右侧统计与 commands，直接让位更干净）。
+ */
+const HIDE_PATH_BELOW = 14;
+/**
+ * 从宿主 keymap 动态读取命令的快捷键显示文本（与宿主 Prompt 同源），
+ * 取不到时回退到传入的默认文本。
+ */
+function keyShortcut(api, command, fallback) {
+    try {
+        const binds = api.tuiConfig.keybinds.get(command);
+        const seq = binds?.map((b) => ({ key: b.key }));
+        const s = api.keys.formatBindings(seq);
+        return s || fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
 /**
  * 输入框 hint 行（session_prompt slot 的 hint）：单行显示 路径 · 命中率 · 余额 · Tokens。
  * 通过 ui.Prompt 的 hint prop 注入——宿主右侧的 token/commands 提示自动保留，
@@ -1000,6 +1031,122 @@ function BottomStatusBar(props) {
             return "";
         }
     });
+    const [termW, setTermW] = createSignal(props.api.renderer.terminalWidth);
+    // resize 事件（主通道）；事件接口若在插件环境不可用则跳过，由轮询兜底
+    createEffect(() => {
+        const r = props.api.renderer;
+        if (typeof r.on !== "function" || typeof r.off !== "function")
+            return;
+        const onResize = () => setTermW(props.api.renderer.terminalWidth);
+        r.on("resize", onResize);
+        onCleanup(() => r.off("resize", onResize));
+    });
+    // 轮询兜底：事件通道若在插件环境不可用，定期同步终端宽度（值不变时不触发更新）
+    createEffect(() => {
+        const timer = setInterval(() => setTermW(props.api.renderer.terminalWidth), 500);
+        onCleanup(() => clearInterval(timer));
+    });
+    // 统计部分分段（单一数据源）：量宽拼接 text，渲染逐段着色，避免双源漂移
+    const statsSegs = createMemo(() => {
+        const s = stats();
+        const hr = s && s.hitRate >= 0 ? (Math.floor(s.hitRate * 10) / 10).toFixed(1) + "%" : "--";
+        const segs = [
+            { text: t("barHit") + " ", color: pal().muted },
+            { text: hr, color: hitColor() },
+        ];
+        const tr = trend();
+        if (tr !== null) {
+            segs.push({ text: " " + (tr > 0 ? "\u2191" : "\u2193") + Math.abs(tr).toFixed(1) + "%", color: tr > 0 ? pal().success : pal().error });
+        }
+        segs.push({ text: " \u00b7 " + t("barTok") + " ", color: pal().muted });
+        segs.push({ text: s ? fmtCompact(s.input + s.read + s.write) : "--", color: pal().text });
+        if (!props.signals.balanceUnsupported()) {
+            segs.push({ text: " \u00b7 " + t("barBal") + " ", color: pal().muted });
+            segs.push({ text: balanceText(), color: pal().text });
+        }
+        segs.push({ text: " \u00b7 ", color: pal().muted });
+        return segs;
+    });
+    const statsW = createMemo(() => {
+        let w = 0;
+        for (const sg of statsSegs())
+            w += visualWidth(sg.text);
+        return w;
+    });
+    // 宿主右侧 usage 文本复刻（1.18.16 Prompt 口径）：
+    // 最后一条 output>0 的 assistant 消息 → tokens 合计格式化 + 模型 context limit 百分比 + session 累计费用
+    const sessionCost = createMemo(() => {
+        try {
+            return num(props.api.state.session.get(sid)?.cost);
+        }
+        catch {
+            return 0;
+        }
+    });
+    const usageText = createMemo(() => {
+        const id = sid;
+        if (!id)
+            return "";
+        const msgs = props.api.state.session.messages(id);
+        let last;
+        for (let i = msgs.length - 1; i >= 0; i--) {
+            const m = msgs[i];
+            if (m.role !== "assistant")
+                continue;
+            const tk = m.tokens;
+            if (tk && num(tk.output) > 0) {
+                last = m;
+                break;
+            }
+        }
+        if (!last)
+            return "";
+        const tk = last.tokens;
+        if (!tk)
+            return "";
+        const tokens = num(tk.input) + num(tk.output) + num(tk.reasoning) + num(tk.cache?.read) + num(tk.cache?.write);
+        if (tokens <= 0)
+            return "";
+        let pct = "";
+        try {
+            const p = props.api.state.provider.find((x) => x.id === last.providerID);
+            const limit = p?.models?.[last.modelID]?.limit?.context;
+            if (typeof limit === "number" && limit > 0)
+                pct = ` (${Math.round((tokens / limit) * 100)}%)`;
+        }
+        catch { }
+        const context = fmtCompact(tokens) + pct;
+        const cost = sessionCost();
+        return cost > 0 ? context + " \u00b7 " + fmtCost(cost) : context;
+    });
+    // 宿主 1513 行右侧文本：usage（有数据）或 "快捷键 agents"（无数据）+ commands，
+    // 快捷键从宿主 keymap 动态读取
+    const rightText = createMemo(() => {
+        const cmds = keyShortcut(props.api, "command.palette.show", "ctrl+p") + " commands";
+        const u = usageText();
+        if (u)
+            return u + " " + cmds;
+        return keyShortcut(props.api, "agent.cycle", "") + " agents " + cmds;
+    });
+    const rightW = createMemo(() => visualWidth(rightText()));
+    // 输入框实际宽度 = 终端宽度 - 侧边栏(可见时 42) - 边距 4
+    // （与宿主 session 布局 contentWidth 口径一致；侧边栏可见性由本面板挂载状态驱动）
+    const inputW = createMemo(() => termW() - (props.signals.sidebarVisible() ? 42 : 0) - 4);
+    // 路径可用宽度 = 输入框宽度 - 统计宽度(精确) - 宿主右侧宽度(动态) - 布局开销；
+    // 低于 HIDE_PATH_BELOW 时整体隐藏路径（宽度归零），把空间让给统计与 commands
+    const dirDisplay = createMemo(() => {
+        const avail = inputW() - statsW() - rightW() - PATH_CHROME;
+        if (avail < HIDE_PATH_BELOW)
+            return "";
+        return truncateVisual(directory(), avail);
+    });
+    // 状态栏关闭（仅路径）时同样在极窄条件下隐藏路径
+    const dirFallback = createMemo(() => {
+        const avail = inputW() - rightW() - PATH_CHROME;
+        if (avail < HIDE_PATH_BELOW)
+            return "";
+        return truncateVisual(directory(), avail);
+    });
     // 恢复显隐偏好（默认显示）；关闭时回退为仅显示路径，与宿主默认 hint 行一致
     onMount(() => {
         try {
@@ -1008,7 +1155,7 @@ function BottomStatusBar(props) {
         }
         catch { }
     });
-    return (_jsx(Show, { when: props.signals.sectionBottom(), fallback: _jsx("text", { fg: pal().muted, children: directory() }), children: _jsxs("box", { marginLeft: 1, flexGrow: 1, flexShrink: 0, flexDirection: "row", justifyContent: "space-between", children: [_jsx("text", { fg: pal().muted, children: directory() }), _jsxs("box", { flexDirection: "row", children: [_jsxs("text", { children: [_jsxs("span", { style: { fg: pal().muted }, children: [t("barHit"), " "] }), _jsx("span", { style: { fg: hitColor() }, children: (stats()?.hitRate ?? -1) >= 0 ? (Math.floor(stats().hitRate * 10) / 10).toFixed(1) + "%" : "--" }), _jsx(Show, { when: trend() !== null, children: _jsx("span", { style: { fg: trend() > 0 ? pal().success : pal().error }, children: " " + (trend() > 0 ? "\u2191" : "\u2193") + Math.abs(trend()).toFixed(1) + "%" }) }), _jsx("span", { style: { fg: pal().muted }, children: " \u00b7 " + t("barTok") + " " }), _jsx("span", { style: { fg: pal().text }, children: stats() ? fmtCompact(stats().input + stats().read + stats().write) : "--" }), _jsxs(Show, { when: !props.signals.balanceUnsupported(), children: [_jsx("span", { style: { fg: pal().muted }, children: " \u00b7 " + t("barBal") + " " }), _jsx("span", { style: { fg: pal().text }, children: balanceText() })] })] }), _jsx("text", { fg: pal().muted, children: " \u00b7 " })] })] }) }));
+    return (_jsx(Show, { when: props.signals.sectionBottom(), fallback: _jsx("text", { fg: pal().muted, children: dirFallback() }), children: _jsxs("box", { marginLeft: 1, flexGrow: 1, flexShrink: 0, flexDirection: "row", justifyContent: "space-between", children: [_jsx("text", { fg: pal().muted, children: dirDisplay() }), _jsx("box", { flexDirection: "row", children: _jsx("text", { children: _jsx(For, { each: statsSegs(), children: (sg) => _jsx("span", { style: { fg: sg.color }, children: sg.text }) }) }) })] }) }));
 }
 function createSidebarSlot(api, signals) {
     let lastSlotSid = "";
@@ -1047,6 +1194,8 @@ const tui = async (api) => {
     const [borderVisible, setBorderVisible] = createSignal(true);
     const [langCode, setLangCode] = createSignal(INIT_LANG);
     const [overrideSessionId, setOverrideSessionId] = createSignal(undefined);
+    // 侧边栏可见性（由 TokenCachePanel 挂载状态驱动）：可见时宿主输入框宽度 = 终端宽 - 42 - 4
+    const [sidebarVisible, setSidebarVisible] = createSignal(false);
     // ── 余额查询状态（共享）：侧边栏与底部栏读同一份数据，
     //    避免重复请求导致两处余额不一致 ──
     const [balanceState, setBalanceState] = createSignal({
@@ -1072,6 +1221,7 @@ const tui = async (api) => {
         balanceCurrency, setBalanceCurrency,
         borderVisible, setBorderVisible,
         overrideSessionId, setOverrideSessionId,
+        sidebarVisible, setSidebarVisible,
     };
     api.slots.register(createSidebarSlot(api, signals));
     // 输入框 hint 行（session_prompt slot，replace 模式）：

package/dist/tui.js

@@ -10,10 +10,10 @@ import { spread as _$spread } from "@opentui/solid";
 import { mergeProps as _$mergeProps } from "@opentui/solid";
 import { memo as _$memo } from "@opentui/solid";
 import { createElement as _$createElement } from "@opentui/solid";
-import { createMemo, createSignal, createEffect, onMount, onCleanup, Show, untrack } from "solid-js";
+import { createMemo, createSignal, createEffect, onMount, onCleanup, Show, For, untrack } from "solid-js";
 
 // src/_version.ts
-var PLUGIN_VERSION = "1.6.1";
+var PLUGIN_VERSION = "1.6.2";
 
 // src/balance-providers.ts
 var BalanceError = class extends Error {
@@ -707,6 +707,10 @@ function TokenCachePanel(props) {
   const [distOpen, setDistOpen] = createSignal(false);
   const [skillsOpen, setSkillsOpen] = createSignal(true);
   let boxEl;
+  createEffect(() => {
+    props.signals.setSidebarVisible(true);
+    onCleanup(() => props.signals.setSidebarVisible(false));
+  });
   const {
     currencySymbol,
     setCurrencySymbol,
@@ -1988,6 +1992,20 @@ function TokenCachePanel(props) {
     return _el$;
   })();
 }
+var PATH_CHROME = 2;
+var HIDE_PATH_BELOW = 14;
+function keyShortcut(api, command, fallback) {
+  try {
+    const binds = api.tuiConfig.keybinds.get(command);
+    const seq = binds?.map((b) => ({
+      key: b.key
+    }));
+    const s = api.keys.formatBindings(seq);
+    return s || fallback;
+  } catch {
+    return fallback;
+  }
+}
 function BottomStatusBar(props) {
   const KV_PREFIX = "cache_panel";
   const t = createT(() => props.signals.langCode());
@@ -2103,6 +2121,119 @@ function BottomStatusBar(props) {
       return "";
     }
   });
+  const [termW, setTermW] = createSignal(props.api.renderer.terminalWidth);
+  createEffect(() => {
+    const r = props.api.renderer;
+    if (typeof r.on !== "function" || typeof r.off !== "function") return;
+    const onResize = () => setTermW(props.api.renderer.terminalWidth);
+    r.on("resize", onResize);
+    onCleanup(() => r.off("resize", onResize));
+  });
+  createEffect(() => {
+    const timer = setInterval(() => setTermW(props.api.renderer.terminalWidth), 500);
+    onCleanup(() => clearInterval(timer));
+  });
+  const statsSegs = createMemo(() => {
+    const s = stats();
+    const hr = s && s.hitRate >= 0 ? (Math.floor(s.hitRate * 10) / 10).toFixed(1) + "%" : "--";
+    const segs = [{
+      text: t("barHit") + " ",
+      color: pal().muted
+    }, {
+      text: hr,
+      color: hitColor()
+    }];
+    const tr = trend();
+    if (tr !== null) {
+      segs.push({
+        text: " " + (tr > 0 ? "\u2191" : "\u2193") + Math.abs(tr).toFixed(1) + "%",
+        color: tr > 0 ? pal().success : pal().error
+      });
+    }
+    segs.push({
+      text: " \xB7 " + t("barTok") + " ",
+      color: pal().muted
+    });
+    segs.push({
+      text: s ? fmtCompact(s.input + s.read + s.write) : "--",
+      color: pal().text
+    });
+    if (!props.signals.balanceUnsupported()) {
+      segs.push({
+        text: " \xB7 " + t("barBal") + " ",
+        color: pal().muted
+      });
+      segs.push({
+        text: balanceText(),
+        color: pal().text
+      });
+    }
+    segs.push({
+      text: " \xB7 ",
+      color: pal().muted
+    });
+    return segs;
+  });
+  const statsW = createMemo(() => {
+    let w = 0;
+    for (const sg of statsSegs()) w += visualWidth(sg.text);
+    return w;
+  });
+  const sessionCost = createMemo(() => {
+    try {
+      return num(props.api.state.session.get(sid)?.cost);
+    } catch {
+      return 0;
+    }
+  });
+  const usageText = createMemo(() => {
+    const id = sid;
+    if (!id) return "";
+    const msgs = props.api.state.session.messages(id);
+    let last;
+    for (let i = msgs.length - 1; i >= 0; i--) {
+      const m = msgs[i];
+      if (m.role !== "assistant") continue;
+      const tk2 = m.tokens;
+      if (tk2 && num(tk2.output) > 0) {
+        last = m;
+        break;
+      }
+    }
+    if (!last) return "";
+    const tk = last.tokens;
+    if (!tk) return "";
+    const tokens = num(tk.input) + num(tk.output) + num(tk.reasoning) + num(tk.cache?.read) + num(tk.cache?.write);
+    if (tokens <= 0) return "";
+    let pct = "";
+    try {
+      const p = props.api.state.provider.find((x) => x.id === last.providerID);
+      const limit = p?.models?.[last.modelID]?.limit?.context;
+      if (typeof limit === "number" && limit > 0) pct = ` (${Math.round(tokens / limit * 100)}%)`;
+    } catch {
+    }
+    const context = fmtCompact(tokens) + pct;
+    const cost = sessionCost();
+    return cost > 0 ? context + " \xB7 " + fmtCost(cost) : context;
+  });
+  const rightText = createMemo(() => {
+    const cmds = keyShortcut(props.api, "command.palette.show", "ctrl+p") + " commands";
+    const u = usageText();
+    if (u) return u + " " + cmds;
+    return keyShortcut(props.api, "agent.cycle", "") + " agents " + cmds;
+  });
+  const rightW = createMemo(() => visualWidth(rightText()));
+  const inputW = createMemo(() => termW() - (props.signals.sidebarVisible() ? 42 : 0) - 4);
+  const dirDisplay = createMemo(() => {
+    const avail = inputW() - statsW() - rightW() - PATH_CHROME;
+    if (avail < HIDE_PATH_BELOW) return "";
+    return truncateVisual(directory(), avail);
+  });
+  const dirFallback = createMemo(() => {
+    const avail = inputW() - rightW() - PATH_CHROME;
+    if (avail < HIDE_PATH_BELOW) return "";
+    return truncateVisual(directory(), avail);
+  });
   onMount(() => {
     try {
       const v = props.api.kv.get(`${KV_PREFIX}.section.bottom`, true);
@@ -2116,14 +2247,14 @@ function BottomStatusBar(props) {
     },
     get fallback() {
       return (() => {
-        var _el$111 = _$createElement("text");
-        _$insert(_el$111, directory);
-        _$effect((_$p) => _$setProp(_el$111, "fg", pal().muted, _$p));
-        return _el$111;
+        var _el$101 = _$createElement("text");
+        _$insert(_el$101, dirFallback);
+        _$effect((_$p) => _$setProp(_el$101, "fg", pal().muted, _$p));
+        return _el$101;
       })();
     },
     get children() {
-      var _el$97 = _$createElement("box"), _el$98 = _$createElement("text"), _el$99 = _$createElement("box"), _el$100 = _$createElement("text"), _el$101 = _$createElement("span"), _el$102 = _$createTextNode(` `), _el$103 = _$createElement("span"), _el$105 = _$createElement("span"), _el$106 = _$createElement("span"), _el$109 = _$createElement("text");
+      var _el$97 = _$createElement("box"), _el$98 = _$createElement("text"), _el$99 = _$createElement("box"), _el$100 = _$createElement("text");
       _$insertNode(_el$97, _el$98);
       _$insertNode(_el$97, _el$99);
       _$setProp(_el$97, "marginLeft", 1);
@@ -2131,86 +2262,23 @@ function BottomStatusBar(props) {
       _$setProp(_el$97, "flexShrink", 0);
       _$setProp(_el$97, "flexDirection", "row");
       _$setProp(_el$97, "justifyContent", "space-between");
-      _$insert(_el$98, directory);
+      _$insert(_el$98, dirDisplay);
       _$insertNode(_el$99, _el$100);
-      _$insertNode(_el$99, _el$109);
       _$setProp(_el$99, "flexDirection", "row");
-      _$insertNode(_el$100, _el$101);
-      _$insertNode(_el$100, _el$103);
-      _$insertNode(_el$100, _el$105);
-      _$insertNode(_el$100, _el$106);
-      _$insertNode(_el$101, _el$102);
-      _$insert(_el$101, () => t("barHit"), _el$102);
-      _$insert(_el$103, (() => {
-        var _c$ = _$memo(() => (stats()?.hitRate ?? -1) >= 0);
-        return () => _c$() ? (Math.floor(stats().hitRate * 10) / 10).toFixed(1) + "%" : "--";
-      })());
-      _$insert(_el$100, _$createComponent(Show, {
-        get when() {
-          return trend() !== null;
+      _$insert(_el$100, _$createComponent(For, {
+        get each() {
+          return statsSegs();
         },
-        get children() {
-          var _el$104 = _$createElement("span");
-          _$insert(_el$104, () => " " + (trend() > 0 ? "\u2191" : "\u2193") + Math.abs(trend()).toFixed(1) + "%");
-          _$effect((_$p) => _$setProp(_el$104, "style", {
-            fg: trend() > 0 ? pal().success : pal().error
+        children: (sg) => (() => {
+          var _el$102 = _$createElement("span");
+          _$insert(_el$102, () => sg.text);
+          _$effect((_$p) => _$setProp(_el$102, "style", {
+            fg: sg.color
           }, _$p));
-          return _el$104;
-        }
-      }), _el$105);
-      _$insert(_el$105, () => " \xB7 " + t("barTok") + " ");
-      _$insert(_el$106, (() => {
-        var _c$2 = _$memo(() => !!stats());
-        return () => _c$2() ? fmtCompact(stats().input + stats().read + stats().write) : "--";
-      })());
-      _$insert(_el$100, _$createComponent(Show, {
-        get when() {
-          return !props.signals.balanceUnsupported();
-        },
-        get children() {
-          return [(() => {
-            var _el$107 = _$createElement("span");
-            _$insert(_el$107, () => " \xB7 " + t("barBal") + " ");
-            _$effect((_$p) => _$setProp(_el$107, "style", {
-              fg: pal().muted
-            }, _$p));
-            return _el$107;
-          })(), (() => {
-            var _el$108 = _$createElement("span");
-            _$insert(_el$108, balanceText);
-            _$effect((_$p) => _$setProp(_el$108, "style", {
-              fg: pal().text
-            }, _$p));
-            return _el$108;
-          })()];
-        }
-      }), null);
-      _$insertNode(_el$109, _$createTextNode(` \xB7 `));
-      _$effect((_p$) => {
-        var _v$31 = pal().muted, _v$32 = {
-          fg: pal().muted
-        }, _v$33 = {
-          fg: hitColor()
-        }, _v$34 = {
-          fg: pal().muted
-        }, _v$35 = {
-          fg: pal().text
-        }, _v$36 = pal().muted;
-        _v$31 !== _p$.e && (_p$.e = _$setProp(_el$98, "fg", _v$31, _p$.e));
-        _v$32 !== _p$.t && (_p$.t = _$setProp(_el$101, "style", _v$32, _p$.t));
-        _v$33 !== _p$.a && (_p$.a = _$setProp(_el$103, "style", _v$33, _p$.a));
-        _v$34 !== _p$.o && (_p$.o = _$setProp(_el$105, "style", _v$34, _p$.o));
-        _v$35 !== _p$.i && (_p$.i = _$setProp(_el$106, "style", _v$35, _p$.i));
-        _v$36 !== _p$.n && (_p$.n = _$setProp(_el$109, "fg", _v$36, _p$.n));
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0,
-        a: void 0,
-        o: void 0,
-        i: void 0,
-        n: void 0
-      });
+          return _el$102;
+        })()
+      }));
+      _$effect((_$p) => _$setProp(_el$98, "fg", pal().muted, _$p));
       return _el$97;
     }
   });
@@ -2259,6 +2327,7 @@ var tui = async (api) => {
   const [borderVisible, setBorderVisible] = createSignal(true);
   const [langCode, setLangCode] = createSignal(INIT_LANG);
   const [overrideSessionId, setOverrideSessionId] = createSignal(void 0);
+  const [sidebarVisible, setSidebarVisible] = createSignal(false);
   const [balanceState, setBalanceState] = createSignal({
     status: "idle",
     data: null,
@@ -2298,7 +2367,9 @@ var tui = async (api) => {
     borderVisible,
     setBorderVisible,
     overrideSessionId,
-    setOverrideSessionId
+    setOverrideSessionId,
+    sidebarVisible,
+    setSidebarVisible
   };
   api.slots.register(createSidebarSlot(api, signals));
   api.slots.register({
@@ -2441,11 +2512,11 @@ var tui = async (api) => {
         return provider.name;
       },
       description: () => (() => {
-        var _el$112 = _$createElement("text");
-        _$insert(_el$112, () => t("balKeyPrompt", {
+        var _el$103 = _$createElement("text");
+        _$insert(_el$103, () => t("balKeyPrompt", {
           p: provider.name
         }));
-        return _el$112;
+        return _el$103;
       })(),
       get placeholder() {
         return provider.keyPlaceholder ?? "sk-...";
@@ -2525,9 +2596,9 @@ var tui = async (api) => {
       dialog?.replace(() => _$createComponent(api.ui.DialogPrompt, {
         title: "Exchange Rate",
         description: () => (() => {
-          var _el$113 = _$createElement("text");
-          _$insertNode(_el$113, _$createTextNode(`Enter the exchange rate from USD to your currency (e.g. 7.2 for CNY)`));
-          return _el$113;
+          var _el$104 = _$createElement("text");
+          _$insertNode(_el$104, _$createTextNode(`Enter the exchange rate from USD to your currency (e.g. 7.2 for CNY)`));
+          return _el$104;
         })(),
         placeholder: "1.0",
         get value() {
@@ -2939,9 +3010,9 @@ var tui = async (api) => {
             return _$memo(() => !!signals.overrideSessionId())() ? t("subSwitchTitle") : t("subViewTitle");
           },
           description: () => (() => {
-            var _el$115 = _$createElement("text");
-            _$insert(_el$115, () => t("subNoFound"));
-            return _el$115;
+            var _el$106 = _$createElement("text");
+            _$insert(_el$106, () => t("subNoFound"));
+            return _el$106;
           })(),
           placeholder: "ses_...",
           get value() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-visual-cache",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "OpenCode TUI plugin displaying real-time token cache hit rate in the sidebar",
   "type": "module",
   "types": "dist/index.d.ts",

package/src/_version.ts

@@ -1,2 +1,2 @@
 // auto-generated
-export const PLUGIN_VERSION="1.6.1";
+export const PLUGIN_VERSION="1.6.2";

package/src/index.tsx

@@ -10,6 +10,7 @@ import type {
   TuiThemeCurrent,
   TuiDialogStack,
   TuiPromptRef,
+  SequenceBindingLike,
 } from "@opencode-ai/plugin/tui"
 import type { UserMessage, AssistantMessage, Message } from "@opencode-ai/sdk"
 import type {
@@ -19,7 +20,7 @@ import type {
   FilePart,
   ReasoningPart,
 } from "@opencode-ai/sdk/v2"
-import { createMemo, createSignal, createEffect, onMount, onCleanup, Show, untrack } from "solid-js"
+import { createMemo, createSignal, createEffect, onMount, onCleanup, Show, For, untrack } from "solid-js"
 import { PLUGIN_VERSION } from "./_version"
 import { balanceProviders, getBalanceProvider, maskKey, matchBalanceProvider, type BalanceEntry, type BalanceProvider } from "./balance-providers"
 import { LANG_META, createT, detectLang, type LangCode } from "./i18n"
@@ -404,6 +405,9 @@ interface PanelSignals {
   /** When set, the panel renders stats for this session instead of the main one. */
   overrideSessionId: () => string | undefined
   setOverrideSessionId: (v: string | undefined) => void
+  /** True while our sidebar panel is mounted — host sidebar is visible (occupies 42 cols). */
+  sidebarVisible: () => boolean
+  setSidebarVisible: (v: boolean) => void
 }
 
 const CURRENCIES: Record<string, string> = {
@@ -441,6 +445,12 @@ function TokenCachePanel(props: {
   const [skillsOpen, setSkillsOpen] = createSignal(true)
   let boxEl: any
 
+  // 侧边栏可见性通知：本面板挂载 ⇒ 宿主侧边栏可见（固定占用 42 列输入框宽度）
+  createEffect(() => {
+    props.signals.setSidebarVisible(true)
+    onCleanup(() => props.signals.setSidebarVisible(false))
+  })
+
   // ── shared signals (de-structured so internal code is unchanged) ──
   const {
     currencySymbol, setCurrencySymbol,
@@ -1178,6 +1188,33 @@ function TokenCachePanel(props: {
 // Plugin entry
 // ---------------------------------------------------------------------------
 
+/**
+ * 路径截断的固定开销（列数）：仅宿主布局常量，不含任何内容宽度——
+ * 统计宽度、宿主 usage、commands 快捷键均为运行时动态计算。
+ * - marginLeft=1 + space-between 余量 ≈ 2 列
+ */
+const PATH_CHROME = 2
+/**
+ * 路径可用宽度低于此列数时整体隐藏（极窄终端下路径信息价值太低，
+ * 残留的 "E:\Work…" 反而挤压右侧统计与 commands，直接让位更干净）。
+ */
+const HIDE_PATH_BELOW = 14
+
+/**
+ * 从宿主 keymap 动态读取命令的快捷键显示文本（与宿主 Prompt 同源），
+ * 取不到时回退到传入的默认文本。
+ */
+function keyShortcut(api: TuiPluginApi, command: string, fallback: string): string {
+  try {
+    const binds = api.tuiConfig.keybinds.get(command)
+    const seq = binds?.map((b) => ({ key: b.key }))
+    const s = api.keys.formatBindings(seq as unknown as SequenceBindingLike[])
+    return s || fallback
+  } catch {
+    return fallback
+  }
+}
+
 /**
  * 输入框 hint 行（session_prompt slot 的 hint）：单行显示 路径 · 命中率 · 余额 · Tokens。
  * 通过 ui.Prompt 的 hint prop 注入——宿主右侧的 token/commands 提示自动保留，
@@ -1301,6 +1338,116 @@ function BottomStatusBar(props: { api: TuiPluginApi; signals: PanelSignals; sess
     try { return props.api.state.path.directory } catch { return "" }
   })
 
+  // 终端宽度信号：初始读取渲染器，窗口 resize 时更新（宿主不约束 hint 行宽度，
+  // 路径截断必须基于终端宽度手动计算）。
+  // CliRenderer 继承的 EventEmitter 因项目未装 @types/node 类型不可见，
+  // 用最小接口声明补齐 resize 事件的 on/off。
+  interface ResizeEmitter {
+    on(event: "resize", cb: () => void): unknown
+    off(event: "resize", cb: () => void): unknown
+  }
+  const [termW, setTermW] = createSignal(props.api.renderer.terminalWidth)
+  // resize 事件（主通道）；事件接口若在插件环境不可用则跳过，由轮询兜底
+  createEffect(() => {
+    const r = props.api.renderer as unknown as ResizeEmitter
+    if (typeof r.on !== "function" || typeof r.off !== "function") return
+    const onResize = () => setTermW(props.api.renderer.terminalWidth)
+    r.on("resize", onResize)
+    onCleanup(() => r.off("resize", onResize))
+  })
+  // 轮询兜底：事件通道若在插件环境不可用，定期同步终端宽度（值不变时不触发更新）
+  createEffect(() => {
+    const timer = setInterval(() => setTermW(props.api.renderer.terminalWidth), 500)
+    onCleanup(() => clearInterval(timer))
+  })
+
+  // 统计部分分段（单一数据源）：量宽拼接 text，渲染逐段着色，避免双源漂移
+  const statsSegs = createMemo<{ text: string; color: string | undefined }[]>(() => {
+    const s = stats()
+    const hr = s && s.hitRate >= 0 ? (Math.floor(s.hitRate * 10) / 10).toFixed(1) + "%" : "--"
+    const segs: { text: string; color: string | undefined }[] = [
+      { text: t("barHit") + " ", color: pal().muted },
+      { text: hr, color: hitColor() },
+    ]
+    const tr = trend()
+    if (tr !== null) {
+      segs.push({ text: " " + (tr > 0 ? "\u2191" : "\u2193") + Math.abs(tr).toFixed(1) + "%", color: tr > 0 ? pal().success : pal().error })
+    }
+    segs.push({ text: " \u00b7 " + t("barTok") + " ", color: pal().muted })
+    segs.push({ text: s ? fmtCompact(s.input + s.read + s.write) : "--", color: pal().text })
+    if (!props.signals.balanceUnsupported()) {
+      segs.push({ text: " \u00b7 " + t("barBal") + " ", color: pal().muted })
+      segs.push({ text: balanceText(), color: pal().text })
+    }
+    segs.push({ text: " \u00b7 ", color: pal().muted })
+    return segs
+  })
+  const statsW = createMemo(() => {
+    let w = 0
+    for (const sg of statsSegs()) w += visualWidth(sg.text)
+    return w
+  })
+
+  // 宿主右侧 usage 文本复刻（1.18.16 Prompt 口径）：
+  // 最后一条 output>0 的 assistant 消息 → tokens 合计格式化 + 模型 context limit 百分比 + session 累计费用
+  const sessionCost = createMemo(() => {
+    try { return num(props.api.state.session.get(sid)?.cost) } catch { return 0 }
+  })
+  const usageText = createMemo(() => {
+    const id = sid
+    if (!id) return ""
+    const msgs = props.api.state.session.messages(id) as Message[]
+    let last: AssistantMessage | undefined
+    for (let i = msgs.length - 1; i >= 0; i--) {
+      const m = msgs[i]
+      if (m.role !== "assistant") continue
+      const tk = (m as AssistantMessage).tokens
+      if (tk && num(tk.output) > 0) { last = m as AssistantMessage; break }
+    }
+    if (!last) return ""
+    const tk = last.tokens
+    if (!tk) return ""
+    const tokens = num(tk.input) + num(tk.output) + num(tk.reasoning) + num(tk.cache?.read) + num(tk.cache?.write)
+    if (tokens <= 0) return ""
+    let pct = ""
+    try {
+      const p = props.api.state.provider.find((x) => x.id === last.providerID)
+      const limit = p?.models?.[last.modelID]?.limit?.context
+      if (typeof limit === "number" && limit > 0) pct = ` (${Math.round((tokens / limit) * 100)}%)`
+    } catch {}
+    const context = fmtCompact(tokens) + pct
+    const cost = sessionCost()
+    return cost > 0 ? context + " \u00b7 " + fmtCost(cost) : context
+  })
+
+  // 宿主 1513 行右侧文本：usage（有数据）或 "快捷键 agents"（无数据）+ commands，
+  // 快捷键从宿主 keymap 动态读取
+  const rightText = createMemo(() => {
+    const cmds = keyShortcut(props.api, "command.palette.show", "ctrl+p") + " commands"
+    const u = usageText()
+    if (u) return u + " " + cmds
+    return keyShortcut(props.api, "agent.cycle", "") + " agents " + cmds
+  })
+  const rightW = createMemo(() => visualWidth(rightText()))
+
+  // 输入框实际宽度 = 终端宽度 - 侧边栏(可见时 42) - 边距 4
+  // （与宿主 session 布局 contentWidth 口径一致；侧边栏可见性由本面板挂载状态驱动）
+  const inputW = createMemo(() => termW() - (props.signals.sidebarVisible() ? 42 : 0) - 4)
+
+  // 路径可用宽度 = 输入框宽度 - 统计宽度(精确) - 宿主右侧宽度(动态) - 布局开销；
+  // 低于 HIDE_PATH_BELOW 时整体隐藏路径（宽度归零），把空间让给统计与 commands
+  const dirDisplay = createMemo(() => {
+    const avail = inputW() - statsW() - rightW() - PATH_CHROME
+    if (avail < HIDE_PATH_BELOW) return ""
+    return truncateVisual(directory(), avail)
+  })
+  // 状态栏关闭（仅路径）时同样在极窄条件下隐藏路径
+  const dirFallback = createMemo(() => {
+    const avail = inputW() - rightW() - PATH_CHROME
+    if (avail < HIDE_PATH_BELOW) return ""
+    return truncateVisual(directory(), avail)
+  })
+
   // 恢复显隐偏好（默认显示）；关闭时回退为仅显示路径，与宿主默认 hint 行一致
   onMount(() => {
     try {
@@ -1310,28 +1457,18 @@ function BottomStatusBar(props: { api: TuiPluginApi; signals: PanelSignals; sess
   })
 
   return (
-    <Show when={props.signals.sectionBottom()} fallback={<text fg={pal().muted}>{directory()}</text>}>
+    <Show
+      when={props.signals.sectionBottom()}
+      fallback={<text fg={pal().muted}>{dirFallback()}</text>}
+    >
       <box marginLeft={1} flexGrow={1} flexShrink={0} flexDirection="row" justifyContent="space-between">
-        <text fg={pal().muted}>{directory()}</text>
-      <box flexDirection="row">
+        <text fg={pal().muted}>{dirDisplay()}</text>
+        <box flexDirection="row">
         <text>
-          <span style={{ fg: pal().muted }}>{t("barHit")} </span>
-          <span style={{ fg: hitColor() }}>{(stats()?.hitRate ?? -1) >= 0 ? (Math.floor(stats()!.hitRate * 10) / 10).toFixed(1) + "%" : "--"}</span>
-          <Show when={trend() !== null}>
-            <span style={{ fg: trend()! > 0 ? pal().success : pal().error }}>
-              {" " + (trend()! > 0 ? "\u2191" : "\u2193") + Math.abs(trend()!).toFixed(1) + "%"}
-            </span>
-          </Show>
-          <span style={{ fg: pal().muted }}>{" \u00b7 " + t("barTok") + " "}</span>
-          <span style={{ fg: pal().text }}>
-            {stats() ? fmtCompact(stats()!.input + stats()!.read + stats()!.write) : "--"}
-          </span>
-          <Show when={!props.signals.balanceUnsupported()}>
-            <span style={{ fg: pal().muted }}>{" \u00b7 " + t("barBal") + " "}</span>
-            <span style={{ fg: pal().text }}>{balanceText()}</span>
-          </Show>
+          <For each={statsSegs()}>
+            {(sg) => <span style={{ fg: sg.color }}>{sg.text}</span>}
+          </For>
         </text>
-        <text fg={pal().muted}>{" \u00b7 "}</text>
         </box>
       </box>
     </Show>
@@ -1383,6 +1520,8 @@ const tui: TuiPlugin = async (api: TuiPluginApi) => {
   const [borderVisible, setBorderVisible] = createSignal(true)
   const [langCode, setLangCode] = createSignal<LangCode>(INIT_LANG)
   const [overrideSessionId, setOverrideSessionId] = createSignal<string | undefined>(undefined)
+  // 侧边栏可见性（由 TokenCachePanel 挂载状态驱动）：可见时宿主输入框宽度 = 终端宽 - 42 - 4
+  const [sidebarVisible, setSidebarVisible] = createSignal(false)
 
   // ── 余额查询状态（共享）：侧边栏与底部栏读同一份数据，
   //    避免重复请求导致两处余额不一致 ──
@@ -1410,6 +1549,7 @@ const tui: TuiPlugin = async (api: TuiPluginApi) => {
     balanceCurrency, setBalanceCurrency,
     borderVisible, setBorderVisible,
     overrideSessionId, setOverrideSessionId,
+    sidebarVisible, setSidebarVisible,
   }
 
   api.slots.register(createSidebarSlot(api, signals))