opencode-visual-cache 1.2.11 → 1.2.13

package/README.md

@@ -47,6 +47,7 @@
 - **语言适配**：自动检测系统语言，支持 `/cache-lang` 运行时切换中/英文，偏好持久化
 - **多币种**：通过 `/cache-currency` 切换货币，费用和节省同步换算
 - **斜杠命令**：`/cache-rate` `/cache-section` `/cache-config` `/cache-lang` 动态配置面板
+- **已加载技能**：检测 session 中 LLM 调用 `skill` tool 的记录，展示已加载技能名及估算 Token 占用
 
 ---
 
@@ -97,7 +98,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` | 查看当前配置 | 弹出当前货币、汇率、区块可见性状态 |
 | `/cache-lang` | 切换显示语言 | 从列表选择中文或 English，界面即时切换，无需重启 |
 
@@ -127,11 +128,12 @@ npm install -g opencode-visual-cache@latest
 
 ### 4.3 区块可见性
 
-面板中的三个子区块可以独立关闭，方便在侧边栏空间紧张时隐藏不需要的信息：
+面板中的子区块可以独立关闭，方便在侧边栏空间紧张时隐藏不需要的信息：
 
 - **Token 明细**：缓存读 / 缓存写 / 未命中 / 输出
 - **模型与定价**：费用 / 提供商 / 模型名 / 单价
 - **估算 Token 分布**：按角色拆分的 Token 估算
+- **已加载技能**：session 中 LLM 实际调用过的 Skill 名及估算 Token 占用
 
 通过 `/cache-section` 切换后即时生效，无需重启。此外，该命令还可以开关面板的**外边框**——关闭后内容会顶格显示，释放额外空间。
 

package/README_EN.md

@@ -47,6 +47,7 @@ If you find this plugin useful, a ⭐ would mean a lot — thank you!<br>
 - **Language**: Auto-detects system locale, with `/cache-lang` for runtime switching between Chinese and English — preference persisted across restarts
 - **Multi-currency**: Switch via `/cache-currency` — costs, savings, and per-million rates convert in real time
 - **Slash Commands**: `/cache-rate` `/cache-section` `/cache-config` `/cache-lang` for live panel configuration
+- **Loaded Skills**: Detects `skill` tool calls in the session and displays loaded skill names with estimated token footprint
 
 ---
 
@@ -97,7 +98,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 & border | Independently show/hide Detail, Model & Pricing, Token Distribution, or the panel border |
+| `/cache-section` | Toggle sections & border | Independently show/hide Detail, Model & Pricing, Token Distribution, Loaded Skills, or the panel border |
 | `/cache-config` | View current config | Displays currency, rate, and section visibility |
 | `/cache-lang` | Switch display language | Pick Chinese or English from the dialog — takes effect immediately, no restart needed |
 
@@ -132,6 +133,7 @@ Three sub-sections can be toggled independently to save sidebar space:
 - **Token Detail**: cache read / write / miss / output
 - **Model & Pricing**: cost / provider / model name / per-million rates
 - **Estimated Token Dist.**: per-role token breakdown
+- **Loaded Skills**: skill names the LLM actually loaded via the `skill` tool, with estimated token counts
 
 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.11";
+export declare const PLUGIN_VERSION = "1.2.13";

package/dist/_version.js

@@ -1,2 +1,2 @@
 // auto-generated
-export const PLUGIN_VERSION = "1.2.11";
+export const PLUGIN_VERSION = "1.2.13";

package/dist/index.js

@@ -35,6 +35,22 @@ function visualPadEnd(s, cols) {
     const pad = cols - visualWidth(s);
     return pad > 0 ? s + " ".repeat(pad) : s;
 }
+/** Truncate `s` to fit within `maxCols` visual columns, appending "…" when cut. */
+function truncateVisual(s, maxCols) {
+    if (visualWidth(s) <= maxCols)
+        return s;
+    let result = "", w = 0;
+    for (const c of s) {
+        const cw = charColumns(c);
+        if (w + cw > maxCols - 1) {
+            result += "\u2026";
+            break;
+        }
+        result += c;
+        w += cw;
+    }
+    return result;
+}
 // ── language override (env: CACHE_TUI_LANG) ──
 const DEBUG_LANG = typeof process !== "undefined" ? process.env?.CACHE_TUI_LANG : undefined;
 // ── language ──────────────────────────────────────────────────────
@@ -77,6 +93,7 @@ const ZH_T = {
     distOut: "输出:",
     secDetail: "明细",
     secModel: "模型",
+    secSkills: "已加载技能",
 };
 const EN_T = {
     title: "Token Cache",
@@ -107,6 +124,7 @@ const EN_T = {
     distOut: "Output:",
     secDetail: "Detail",
     secModel: "Model",
+    secSkills: "Loaded Skills",
 };
 // ── color helpers ────────────────────────────────────────────────
 /** Extract { r, g, b } (0–255) from a hex string or RGBA-like object. */
@@ -294,9 +312,10 @@ function TokenCachePanel(props) {
     const [detailOpen, setDetailOpen] = createSignal(true);
     const [modelOpen, setModelOpen] = createSignal(true);
     const [distOpen, setDistOpen] = createSignal(false);
+    const [skillsOpen, setSkillsOpen] = createSignal(true);
     let boxEl;
     // ── shared signals (de-structured so internal code is unchanged) ──
-    const { currencySymbol, setCurrencySymbol, exchangeRate, setExchangeRate, langZH, setLangZH, sectionDetail, setSectionDetail, sectionModel, setSectionModel, sectionDist, setSectionDist, borderVisible, setBorderVisible, } = props.signals;
+    const { currencySymbol, setCurrencySymbol, exchangeRate, setExchangeRate, langZH, setLangZH, sectionDetail, setSectionDetail, sectionModel, setSectionModel, sectionDist, setSectionDist, sectionSkills, setSectionSkills, borderVisible, setBorderVisible, } = props.signals;
     // ── reactive translation (follows langZH signal) ──
     const t = createMemo(() => langZH() ? ZH_T : EN_T);
     // ── scan session messages reactively ──
@@ -319,6 +338,8 @@ function TokenCachePanel(props) {
         providerName: "", sessionHitRate: 0,
         dist: { system: 0, user: 0, agent: 0, toolCall: 0, toolResult: 0, output: 0, apiOutput: 0, apiInput: 0, stepCost: 0 },
         hasDistData: false,
+        skills: [],
+        hasSkills: false,
     });
     const [refreshTick, setRefreshTick] = createSignal(0);
     createEffect(() => {
@@ -327,7 +348,19 @@ function TokenCachePanel(props) {
         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 = "";
+        const session = props.api.state.session.get(sid);
+        // 累计值优先使用 Session 聚合字段（数据库级，不受 sync 层 limit:100 截断）
+        // 若字段不存在（旧版本 SDK），降级到消息遍历累加
+        let input = session?.tokens?.input ?? 0;
+        let read = session?.tokens?.cache?.read ?? 0;
+        let write = session?.tokens?.cache?.write ?? 0;
+        let output = session?.tokens?.output ?? 0;
+        let cost = session?.cost ?? 0;
+        let pid = session?.model?.providerID ?? "";
+        let mid = session?.model?.id ?? "";
+        const fallbackTokens = session?.tokens == null;
+        const fallbackCost = session?.cost == null;
+        const fallbackModel = !pid || !mid;
         let prevMsgHitRate = -1, lastMsgHitRate = -1;
         for (const msg of msgs) {
             if (msg.role !== "assistant")
@@ -340,12 +373,16 @@ function TokenCachePanel(props) {
                 prevMsgHitRate = lastMsgHitRate;
                 lastMsgHitRate = (mrt / mit) * 100;
             }
-            input += num(t.input);
-            read += num(t.cache?.read);
-            write += num(t.cache?.write);
-            output += num(t.output);
-            cost += num(msg.cost);
-            if (msg.providerID && msg.modelID) {
+            if (fallbackTokens) {
+                input += num(t.input);
+                read += num(t.cache?.read);
+                write += num(t.cache?.write);
+                output += num(t.output);
+            }
+            if (fallbackCost) {
+                cost += num(msg.cost);
+            }
+            if (fallbackModel && msg.providerID && msg.modelID) {
                 pid = msg.providerID;
                 mid = msg.modelID;
             }
@@ -374,8 +411,9 @@ function TokenCachePanel(props) {
         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;
+            const loadedSkills = new Map();
             try {
-                const session = props.api.state.session.get(sid), cfg = props.api.state.config;
+                const cfg = props.api.state.config;
                 const agentName = String(session?.agent ?? cfg?.default_agent ?? "build");
                 const agents = cfg?.agent;
                 const agentCfg = agents?.[agentName];
@@ -431,6 +469,25 @@ function TokenCachePanel(props) {
                                     if (e.error)
                                         dist.toolResult += estimateTokens(e.error);
                                 }
+                                if (tp.tool === "skill" && tp.state.status === "completed") {
+                                    // TUI SDK strips tool metadata — extract skill name from well-known output format.
+                                    // Cross-validated against api.client.app.skills() when available.
+                                    let name = tp.state.metadata?.name;
+                                    if (typeof name !== "string") {
+                                        const m = typeof tp.state.output === "string"
+                                            ? tp.state.output.match(/^#{1,2}\s*Skill:\s*(.+)/m)
+                                            : null;
+                                        if (m)
+                                            name = m[1].trim();
+                                    }
+                                    if (typeof name === "string") {
+                                        const tokens = typeof tp.state.output === "string" ? estimateTokens(tp.state.output) : 0;
+                                        const existing = loadedSkills.get(name);
+                                        if (!existing || existing.tokens < tokens) {
+                                            loadedSkills.set(name, { name, tokens });
+                                        }
+                                    }
+                                }
                             }
                             else if (p.type === "reasoning")
                                 dist.agent += estimateTokens(p.text);
@@ -458,7 +515,8 @@ function TokenCachePanel(props) {
             }
             catch { }
             const finalDist = hasDistData ? dist : lastDist(), finalHasDist = hasDistData || lastHasDist();
-            return { finalDist, finalHasDist };
+            const skills = [...loadedSkills.values()];
+            return { finalDist, finalHasDist, skills };
         });
         setDataSignal({
             hitRate, read, write, freshInput: input, output, cost, saved, model,
@@ -466,6 +524,7 @@ function TokenCachePanel(props) {
             hasData: read > 0 || write > 0 || input > 0 || output > 0 || cost > 0,
             trend, hasTrendData, providerName, sessionHitRate,
             dist: distData.finalDist, hasDistData: distData.finalHasDist,
+            skills: distData.skills, hasSkills: distData.skills.length > 0,
         });
     });
     const data = createMemo(() => {
@@ -505,6 +564,7 @@ function TokenCachePanel(props) {
             setDetailOpen(Boolean(props.api.kv.get(`${KV_PREFIX}.detail`, true)));
             setModelOpen(Boolean(props.api.kv.get(`${KV_PREFIX}.model`, true)));
             setDistOpen(Boolean(props.api.kv.get(`${KV_PREFIX}.dist`, false)));
+            setSkillsOpen(Boolean(props.api.kv.get(`${KV_PREFIX}.skills`, true)));
         }
         catch { }
         // Restore user config (currency, rate, section visibility).
@@ -521,6 +581,7 @@ function TokenCachePanel(props) {
                 setSectionDetail(Boolean(props.api.kv.get(`${KV_PREFIX}.section.detail`, true)));
                 setSectionModel(Boolean(props.api.kv.get(`${KV_PREFIX}.section.model`, true)));
                 setSectionDist(Boolean(props.api.kv.get(`${KV_PREFIX}.section.dist`, true)));
+                setSectionSkills(Boolean(props.api.kv.get(`${KV_PREFIX}.section.skills`, true)));
                 const bv = props.api.kv.get(`${KV_PREFIX}.border`, true);
                 setBorderVisible(bv !== false);
                 // Restore language preference
@@ -637,7 +698,12 @@ 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.apiInput), 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) })] })] }) }), _jsx(Show, { when: sectionSkills(), children: _jsxs(Show, { when: data().hasSkills, children: [_jsxs("text", { onMouseUp: () => setSkillsOpen((o) => { const n = !o; persistFold("skills", n); return n; }), children: [_jsx("span", { style: { fg: pal().muted }, children: skillsOpen() ? "\u25bc " : "\u25b6 " }), _jsx("span", { style: { fg: pal().primary }, children: _jsx("b", { children: t().secSkills }) }), _jsxs("span", { style: { fg: pal().muted }, children: [" (", data().skills.length, ")"] }), _jsx("span", { style: { fg: pal().muted }, children: sep().slice(visualWidth((skillsOpen() ? "\u25bc " : "\u25b6 ") + t().secSkills + ` (${data().skills.length})`)) })] }), _jsx(Show, { when: skillsOpen(), children: data().skills.map((sk) => {
+                                            const rightW = visualWidth(fmt(sk.tokens)) + UNIT_GAP + visualWidth(t().tok);
+                                            const maxLabel = Math.max(4, panelWidth() - gutter() - rightW - 1);
+                                            const label = truncateVisual(sk.name, maxLabel);
+                                            return (_jsx("text", { fg: pal().muted, children: justify(label, fmt(sk.tokens), t().tok) }));
+                                        }) })] }) })] }) })] }));
 }
 // ---------------------------------------------------------------------------
 // Plugin entry
@@ -659,6 +725,7 @@ const tui = async (api) => {
     const [sectionDetail, setSectionDetail] = createSignal(true);
     const [sectionModel, setSectionModel] = createSignal(true);
     const [sectionDist, setSectionDist] = createSignal(true);
+    const [sectionSkills, setSectionSkills] = createSignal(true);
     const [borderVisible, setBorderVisible] = createSignal(true);
     const [langZH, setLangZH] = createSignal(LANG_ZH);
     const signals = {
@@ -668,6 +735,7 @@ const tui = async (api) => {
         sectionDetail, setSectionDetail,
         sectionModel, setSectionModel,
         sectionDist, setSectionDist,
+        sectionSkills, setSectionSkills,
         borderVisible, setBorderVisible,
     };
     api.slots.register(createSidebarSlot(api, signals));
@@ -721,11 +789,13 @@ 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 skillsOn = Boolean(api.kv.get(`${KV_PREFIX}.section.skills`, 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: `Loaded Skills   [${skillsOn ? "ON" : "OFF"}]`, value: "skills" },
                         { title: `Panel Border    [${borderOn ? "ON" : "OFF"}]`, value: "border" },
                     ], onSelect: (opt) => {
                         if (opt.value === "border") {
@@ -744,6 +814,8 @@ const tui = async (api) => {
                                 signals.setSectionModel(!cur);
                             if (opt.value === "dist")
                                 signals.setSectionDist(!cur);
+                            if (opt.value === "skills")
+                                signals.setSectionSkills(!cur);
                             api.ui.toast({ message: `${opt.value} section ${!cur ? "shown" : "hidden"}` });
                         }
                         dialog?.clear();
@@ -761,9 +833,10 @@ const tui = async (api) => {
                 const detail = Boolean(api.kv.get(`${KV_PREFIX}.section.detail`, true));
                 const model = Boolean(api.kv.get(`${KV_PREFIX}.section.model`, true));
                 const dist = Boolean(api.kv.get(`${KV_PREFIX}.section.dist`, true));
+                const skills = Boolean(api.kv.get(`${KV_PREFIX}.section.skills`, true));
                 api.ui.toast({
                     title: "Cache Panel Config",
-                    message: `Currency: ${sym}  |  Rate: ${rate}  |  Detail: ${detail ? "ON" : "OFF"}  |  Model: ${model ? "ON" : "OFF"}  |  Dist: ${dist ? "ON" : "OFF"}`,
+                    message: `Currency: ${sym}  |  Rate: ${rate}  |  Detail: ${detail ? "ON" : "OFF"}  |  Model: ${model ? "ON" : "OFF"}  |  Dist: ${dist ? "ON" : "OFF"}  |  Skills: ${skills ? "ON" : "OFF"}`,
                     duration: 8000,
                 });
                 dialog?.clear();
@@ -788,6 +861,50 @@ const tui = async (api) => {
                     } })));
             },
         },
+        {
+            title: "Cache: Debug Skills Detection",
+            value: "cache.debug-skills",
+            description: "Dump all tool parts found in the current session for skill detection debugging",
+            slash: { name: "cache-debug-skills" },
+            onSelect: () => {
+                const rt = api.route.current;
+                if (rt.name !== "session" || !rt.params) {
+                    api.ui.toast({ message: "Please run this command inside a session", variant: "warning" });
+                    return;
+                }
+                const sid = String(rt.params.sessionID);
+                const msgs = api.state.session.messages(sid);
+                const byTool = {};
+                const skillParts = [];
+                for (const msg of msgs) {
+                    if (msg.role !== "assistant")
+                        continue;
+                    let parts = [];
+                    try {
+                        parts = api.state.part(msg.id);
+                    }
+                    catch { }
+                    for (const p of parts) {
+                        if (p.type === "tool") {
+                            const t = String(p.tool ?? "?");
+                            byTool[t] = (byTool[t] ?? 0) + 1;
+                            if (t === "skill") {
+                                const meta = p.state?.metadata;
+                                const rootMeta = p.metadata;
+                                skillParts.push(`state.metadata=${JSON.stringify(meta)} | root.metadata=${JSON.stringify(rootMeta)} | state.title="${p.state?.title}" | state.output[:80]="${String(p.state?.output ?? "").slice(0, 80)}"`);
+                            }
+                        }
+                    }
+                }
+                const summary = Object.entries(byTool).map(([k, v]) => `${k}: ${v}`).join(" | ");
+                const extra = skillParts.length > 0 ? "\n\nSkill parts:\n" + skillParts.join("\n") : "\n\n⚠ No skill tool parts found — AI may be reading SKILL.md instead. Try: 'Use the skill tool to load karpathy-guidelines'";
+                api.ui.toast({
+                    title: `Tool Summary (${Object.keys(byTool).length} types)`,
+                    message: summary + extra,
+                    duration: 15000,
+                });
+            },
+        },
     ]);
 };
 const mod = {

package/package.json

@@ -1,58 +1,58 @@
-{
-  "name": "opencode-visual-cache",
-  "version": "1.2.11",
-  "description": "OpenCode TUI plugin displaying real-time token cache hit rate in the sidebar",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./tui": {
-      "import": "./src/index.tsx",
-      "config": {
-        "enabled": true
-      }
-    }
-  },
-  "files": [
-    "dist",
-    "src",
-    "install.mjs",
-    "README.md",
-    "README_EN.md"
-  ],
-  "bin": {
-    "opencode-visual-cache": "install.mjs"
-  },
-  "scripts": {
-    "build": "tsc",
-    "typecheck": "tsc --noEmit",
-    "version": "node -e \"require('fs').writeFileSync('src/_version.ts','// auto-generated\\nexport const PLUGIN_VERSION='+JSON.stringify(require('./package.json').version)+';\\n')\"",
-    "prepublishOnly": "tsc"
-  },
-  "keywords": [
-    "opencode",
-    "opencode-plugin",
-    "tui",
-    "token",
-    "cache-hit-rate",
-    "cost-tracking"
-  ],
-  "license": "MIT",
-  "peerDependencies": {
-    "@opencode-ai/plugin": ">=1.14.0",
-    "@opencode-ai/sdk": ">=1.14.0",
-    "@opentui/core": ">=0.2.0",
-    "@opentui/solid": ">=0.2.0",
-    "solid-js": ">=1.9.0"
-  },
-  "devDependencies": {
-    "@opencode-ai/plugin": "^1.14.50",
-    "@opencode-ai/sdk": "^1.14.50",
-    "tsx": "^4.22.3",
-    "typescript": "^5.8.0"
-  }
-}
+{
+  "name": "opencode-visual-cache",
+  "version": "1.2.13",
+  "description": "OpenCode TUI plugin displaying real-time token cache hit rate in the sidebar",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./tui": {
+      "import": "./src/index.tsx",
+      "config": {
+        "enabled": true
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "install.mjs",
+    "README.md",
+    "README_EN.md"
+  ],
+  "bin": {
+    "opencode-visual-cache": "install.mjs"
+  },
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "version": "node -e \"require('fs').writeFileSync('src/_version.ts','// auto-generated\\nexport const PLUGIN_VERSION='+JSON.stringify(require('./package.json').version)+';\\n')\"",
+    "prepublishOnly": "tsc"
+  },
+  "keywords": [
+    "opencode",
+    "opencode-plugin",
+    "tui",
+    "token",
+    "cache-hit-rate",
+    "cost-tracking"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "@opencode-ai/plugin": ">=1.14.0",
+    "@opencode-ai/sdk": ">=1.14.0",
+    "@opentui/core": ">=0.2.0",
+    "@opentui/solid": ">=0.2.0",
+    "solid-js": ">=1.9.0"
+  },
+  "devDependencies": {
+    "@opencode-ai/plugin": "^1.14.50",
+    "@opencode-ai/sdk": "^1.14.50",
+    "tsx": "^4.22.3",
+    "typescript": "^5.8.0"
+  }
+}

package/src/_version.ts

@@ -1,2 +1,2 @@
 // auto-generated
-export const PLUGIN_VERSION="1.2.11";
+export const PLUGIN_VERSION="1.2.13";

package/src/index.tsx

@@ -59,6 +59,18 @@ function visualPadEnd(s: string, cols: number): string {
   return pad > 0 ? s + " ".repeat(pad) : s
 }
 
+/** Truncate `s` to fit within `maxCols` visual columns, appending "…" when cut. */
+function truncateVisual(s: string, maxCols: number): string {
+  if (visualWidth(s) <= maxCols) return s
+  let result = "", w = 0
+  for (const c of s) {
+    const cw = charColumns(c)
+    if (w + cw > maxCols - 1) { result += "\u2026"; break }
+    result += c; w += cw
+  }
+  return result
+}
+
 // ── language override (env: CACHE_TUI_LANG) ──
 const DEBUG_LANG = typeof process !== "undefined" ? process.env?.CACHE_TUI_LANG : undefined
 
@@ -100,6 +112,7 @@ const ZH_T = {
   distOut:    "输出:",
   secDetail:  "明细",
   secModel:   "模型",
+  secSkills:  "已加载技能",
 } as const
 
 const EN_T = {
@@ -131,6 +144,7 @@ const EN_T = {
   distOut:    "Output:",
   secDetail:  "Detail",
   secModel:   "Model",
+  secSkills:  "Loaded Skills",
 } as const
 
 // ── color helpers ────────────────────────────────────────────────
@@ -327,6 +341,8 @@ interface PanelSignals {
   setSectionModel: (v: boolean) => void
   sectionDist: () => boolean
   setSectionDist: (v: boolean) => void
+  sectionSkills: () => boolean
+  setSectionSkills: (v: boolean) => void
   borderVisible: () => boolean
   setBorderVisible: (v: boolean) => void
 }
@@ -363,6 +379,7 @@ function TokenCachePanel(props: {
   const [detailOpen, setDetailOpen] = createSignal(true)
   const [modelOpen, setModelOpen] = createSignal(true)
   const [distOpen, setDistOpen] = createSignal(false)
+  const [skillsOpen, setSkillsOpen] = createSignal(true)
   let boxEl: any
 
   // ── shared signals (de-structured so internal code is unchanged) ──
@@ -373,6 +390,7 @@ function TokenCachePanel(props: {
     sectionDetail, setSectionDetail,
     sectionModel, setSectionModel,
     sectionDist, setSectionDist,
+    sectionSkills, setSectionSkills,
     borderVisible, setBorderVisible,
   } = props.signals
 
@@ -401,6 +419,8 @@ function TokenCachePanel(props: {
     providerName: "", sessionHitRate: 0,
     dist: { system: 0, user: 0, agent: 0, toolCall: 0, toolResult: 0, output: 0, apiOutput: 0, apiInput: 0, stepCost: 0 },
     hasDistData: false,
+    skills: [] as { name: string; tokens: number }[],
+    hasSkills: false,
   })
   const [refreshTick, setRefreshTick] = createSignal(0)
 
@@ -411,16 +431,37 @@ function TokenCachePanel(props: {
 
     // 自然追踪 messages 和 provider（SDK 数据就绪时自动重新执行）
     const msgs = props.api.state.session.messages(sid) as Message[]
-    let input = 0, read = 0, write = 0, output = 0, cost = 0, pid = "", mid = ""
+    const session = props.api.state.session.get(sid)
+
+    // 累计值优先使用 Session 聚合字段（数据库级，不受 sync 层 limit:100 截断）
+    // 若字段不存在（旧版本 SDK），降级到消息遍历累加
+    let input  = session?.tokens?.input ?? 0
+    let read   = session?.tokens?.cache?.read ?? 0
+    let write  = session?.tokens?.cache?.write ?? 0
+    let output = session?.tokens?.output ?? 0
+    let cost   = session?.cost ?? 0
+    let pid    = session?.model?.providerID ?? ""
+    let mid    = session?.model?.id ?? ""
+
+    const fallbackTokens = session?.tokens == null
+    const fallbackCost   = session?.cost == null
+    const fallbackModel  = !pid || !mid
+
     let prevMsgHitRate = -1, lastMsgHitRate = -1
     for (const msg of msgs) {
       if (msg.role !== "assistant") continue
       const t = (msg as AssistantMessage).tokens; if (!t) continue
       const mit = num(t.input) + num(t.cache?.read), mrt = num(t.cache?.read)
       if (mit > 0) { prevMsgHitRate = lastMsgHitRate; lastMsgHitRate = (mrt / mit) * 100 }
-      input += num(t.input); read += num(t.cache?.read); write += num(t.cache?.write); output += num(t.output)
-      cost += num((msg as AssistantMessage).cost)
-      if ((msg as AssistantMessage).providerID && (msg as AssistantMessage).modelID) { pid = (msg as AssistantMessage).providerID; mid = (msg as AssistantMessage).modelID }
+      if (fallbackTokens) {
+        input += num(t.input); read += num(t.cache?.read); write += num(t.cache?.write); output += num(t.output)
+      }
+      if (fallbackCost) {
+        cost += num((msg as AssistantMessage).cost)
+      }
+      if (fallbackModel && (msg as AssistantMessage).providerID && (msg as AssistantMessage).modelID) {
+        pid = (msg as AssistantMessage).providerID; mid = (msg as AssistantMessage).modelID
+      }
     }
     let saved = 0, inputRate = 0, cacheReadRate = 0, cacheWriteRate = 0
     if (read > 0 && pid && mid) for (const provider of props.api.state.provider) {
@@ -440,8 +481,9 @@ function TokenCachePanel(props: {
     const distData = untrack(() => {
       let dist: TokenDist = { system: 0, user: 0, agent: 0, toolCall: 0, toolResult: 0, output: 0, apiOutput: 0, apiInput: 0, stepCost: 0 }
       let hasDistData = false
+      const loadedSkills = new Map<string, { name: string; tokens: number }>()
       try {
-        const session = props.api.state.session.get(sid), cfg = props.api.state.config as Record<string, unknown>
+        const cfg = props.api.state.config as Record<string, unknown>
         const agentName = String(session?.agent ?? (cfg as any)?.default_agent ?? "build")
         const agents = cfg?.agent as Record<string, unknown> | undefined
         const agentCfg = agents?.[agentName] as Record<string, unknown> | undefined
@@ -467,6 +509,24 @@ function TokenCachePanel(props: {
                 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 (tp.tool === "skill" && tp.state.status === "completed") {
+                  // TUI SDK strips tool metadata — extract skill name from well-known output format.
+                  // Cross-validated against api.client.app.skills() when available.
+                  let name: string | undefined = tp.state.metadata?.name
+                  if (typeof name !== "string") {
+                    const m = typeof tp.state.output === "string"
+                      ? tp.state.output.match(/^#{1,2}\s*Skill:\s*(.+)/m)
+                      : null
+                    if (m) name = m[1].trim()
+                  }
+                  if (typeof name === "string") {
+                    const tokens = typeof tp.state.output === "string" ? estimateTokens(tp.state.output) : 0
+                    const existing = loadedSkills.get(name)
+                    if (!existing || existing.tokens < tokens) {
+                      loadedSkills.set(name, { name, tokens })
+                    }
+                  }
+                }
               } else if (p.type === "reasoning") dist.agent += estimateTokens((p as any).text)
               else if (p.type === "subtask") { const sub = p as any; dist.agent += estimateTokens(sub.prompt || sub.description || "") }
             }
@@ -484,7 +544,8 @@ function TokenCachePanel(props: {
         hasDistData = dist.system + dist.user + dist.agent + dist.toolCall + dist.toolResult > 0 || dist.apiOutput > 0 || dist.apiInput > 0
       } catch {}
       const finalDist = hasDistData ? dist : lastDist(), finalHasDist = hasDistData || lastHasDist()
-      return { finalDist, finalHasDist }
+      const skills = [...loadedSkills.values()]
+      return { finalDist, finalHasDist, skills }
     })
 
     setDataSignal({
@@ -493,6 +554,7 @@ function TokenCachePanel(props: {
       hasData: read > 0 || write > 0 || input > 0 || output > 0 || cost > 0,
       trend, hasTrendData, providerName, sessionHitRate,
       dist: distData.finalDist, hasDistData: distData.finalHasDist,
+      skills: distData.skills, hasSkills: distData.skills.length > 0,
     })
   })
 
@@ -532,6 +594,7 @@ function TokenCachePanel(props: {
       setDetailOpen(Boolean(props.api.kv.get(`${KV_PREFIX}.detail`, true)))
       setModelOpen(Boolean(props.api.kv.get(`${KV_PREFIX}.model`, true)))
       setDistOpen(Boolean(props.api.kv.get(`${KV_PREFIX}.dist`, false)))
+      setSkillsOpen(Boolean(props.api.kv.get(`${KV_PREFIX}.skills`, true)))
     } catch {}
 
     // Restore user config (currency, rate, section visibility).
@@ -546,6 +609,7 @@ function TokenCachePanel(props: {
         setSectionDetail(Boolean(props.api.kv.get(`${KV_PREFIX}.section.detail`, true)))
         setSectionModel(Boolean(props.api.kv.get(`${KV_PREFIX}.section.model`, true)))
         setSectionDist(Boolean(props.api.kv.get(`${KV_PREFIX}.section.dist`, true)))
+        setSectionSkills(Boolean(props.api.kv.get(`${KV_PREFIX}.section.skills`, true)))
         const bv = props.api.kv.get<boolean>(`${KV_PREFIX}.border`, true)
         setBorderVisible(bv !== false)
         // Restore language preference
@@ -848,9 +912,33 @@ function TokenCachePanel(props: {
             </Show>
           </Show>
           </Show>
+
+          {/* ── loaded skills (collapsible, default open) ── */}
+          <Show when={sectionSkills()}>
+          <Show when={data().hasSkills}>
+            {<text onMouseUp={() => setSkillsOpen((o) => { const n = !o; persistFold("skills", n); return n })}>
+              <span style={{ fg: pal().muted }}>{skillsOpen() ? "\u25bc " : "\u25b6 "}</span>
+              <span style={{ fg: pal().primary }}><b>{t().secSkills}</b></span>
+              <span style={{ fg: pal().muted }}> ({data().skills.length})</span>
+              <span style={{ fg: pal().muted }}>{sep().slice(visualWidth((skillsOpen() ? "\u25bc " : "\u25b6 ") + t().secSkills + ` (${data().skills.length})`))}</span>
+            </text>}
+            <Show when={skillsOpen()}>
+                {data().skills.map((sk: { name: string; tokens: number }) => {
+                  const rightW = visualWidth(fmt(sk.tokens)) + UNIT_GAP + visualWidth(t().tok)
+                  const maxLabel = Math.max(4, panelWidth() - gutter() - rightW - 1)
+                  const label = truncateVisual(sk.name, maxLabel)
+                  return (
+                    <text fg={pal().muted}>
+                      {justify(label, fmt(sk.tokens), t().tok)}
+                    </text>
+                  )
+                })}
+            </Show>
+          </Show>
+          </Show>
         </Show>
       </Show>
-    </box>
+    </box>
   )
 }
 
@@ -883,6 +971,7 @@ const tui: TuiPlugin = async (api: TuiPluginApi) => {
   const [sectionDetail, setSectionDetail] = createSignal(true)
   const [sectionModel, setSectionModel] = createSignal(true)
   const [sectionDist, setSectionDist] = createSignal(true)
+  const [sectionSkills, setSectionSkills] = createSignal(true)
   const [borderVisible, setBorderVisible] = createSignal(true)
   const [langZH, setLangZH] = createSignal(LANG_ZH)
 
@@ -893,6 +982,7 @@ const tui: TuiPlugin = async (api: TuiPluginApi) => {
     sectionDetail, setSectionDetail,
     sectionModel, setSectionModel,
     sectionDist, setSectionDist,
+    sectionSkills, setSectionSkills,
     borderVisible, setBorderVisible,
   }
 
@@ -962,6 +1052,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 skillsOn = Boolean(api.kv.get(`${KV_PREFIX}.section.skills`, true))
         const borderOn = Boolean(api.kv.get(`${KV_PREFIX}.border`, true))
         dialog?.replace(() => (
           <api.ui.DialogSelect
@@ -970,6 +1061,7 @@ 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: `Loaded Skills   [${skillsOn ? "ON" : "OFF"}]`,  value: "skills" },
               { title: `Panel Border    [${borderOn ? "ON" : "OFF"}]`,  value: "border" },
             ]}
             onSelect={(opt) => {
@@ -985,6 +1077,7 @@ const tui: TuiPlugin = async (api: TuiPluginApi) => {
                 if (opt.value === "detail") signals.setSectionDetail(!cur)
                 if (opt.value === "model")  signals.setSectionModel(!cur)
                 if (opt.value === "dist")   signals.setSectionDist(!cur)
+                if (opt.value === "skills") signals.setSectionSkills(!cur)
                 api.ui.toast({ message: `${opt.value} section ${!cur ? "shown" : "hidden"}` })
               }
               dialog?.clear()
@@ -1004,9 +1097,10 @@ const tui: TuiPlugin = async (api: TuiPluginApi) => {
         const detail = Boolean(api.kv.get(`${KV_PREFIX}.section.detail`, true))
         const model = Boolean(api.kv.get(`${KV_PREFIX}.section.model`, true))
         const dist = Boolean(api.kv.get(`${KV_PREFIX}.section.dist`, true))
+        const skills = Boolean(api.kv.get(`${KV_PREFIX}.section.skills`, true))
         api.ui.toast({
           title: "Cache Panel Config",
-          message: `Currency: ${sym}  |  Rate: ${rate}  |  Detail: ${detail ? "ON" : "OFF"}  |  Model: ${model ? "ON" : "OFF"}  |  Dist: ${dist ? "ON" : "OFF"}`,
+          message: `Currency: ${sym}  |  Rate: ${rate}  |  Detail: ${detail ? "ON" : "OFF"}  |  Model: ${model ? "ON" : "OFF"}  |  Dist: ${dist ? "ON" : "OFF"}  |  Skills: ${skills ? "ON" : "OFF"}`,
           duration: 8000,
         })
         dialog?.clear()
@@ -1037,6 +1131,46 @@ const tui: TuiPlugin = async (api: TuiPluginApi) => {
         ))
       },
     },
+    {
+      title: "Cache: Debug Skills Detection",
+      value: "cache.debug-skills",
+      description: "Dump all tool parts found in the current session for skill detection debugging",
+      slash: { name: "cache-debug-skills" },
+      onSelect: () => {
+        const rt = api.route.current
+        if (rt.name !== "session" || !rt.params) {
+          api.ui.toast({ message: "Please run this command inside a session", variant: "warning" })
+          return
+        }
+        const sid = String(rt.params.sessionID)
+        const msgs = api.state.session.messages(sid)
+        const byTool: Record<string, number> = {}
+        const skillParts: string[] = []
+        for (const msg of msgs) {
+          if (msg.role !== "assistant") continue
+          let parts: readonly any[] = []
+          try { parts = api.state.part(msg.id) } catch {}
+          for (const p of parts) {
+            if (p.type === "tool") {
+              const t = String(p.tool ?? "?")
+              byTool[t] = (byTool[t] ?? 0) + 1
+              if (t === "skill") {
+                const meta = p.state?.metadata
+                const rootMeta = p.metadata
+                skillParts.push(`state.metadata=${JSON.stringify(meta)} | root.metadata=${JSON.stringify(rootMeta)} | state.title="${p.state?.title}" | state.output[:80]="${String(p.state?.output ?? "").slice(0, 80)}"`)
+              }
+            }
+          }
+        }
+        const summary = Object.entries(byTool).map(([k, v]) => `${k}: ${v}`).join(" | ")
+        const extra = skillParts.length > 0 ? "\n\nSkill parts:\n" + skillParts.join("\n") : "\n\n⚠ No skill tool parts found — AI may be reading SKILL.md instead. Try: 'Use the skill tool to load karpathy-guidelines'"
+        api.ui.toast({
+          title: `Tool Summary (${Object.keys(byTool).length} types)`,
+          message: summary + extra,
+          duration: 15000,
+        })
+      },
+    },
   ])
 }