opencode-visual-cache 1.2.14 → 1.2.15-beta.1

package/dist/tui.js

@@ -0,0 +1,1533 @@
+// src/index.tsx
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { use as _$use } from "@opentui/solid";
+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";
+
+// src/_version.ts
+var PLUGIN_VERSION = "1.2.14";
+
+// src/index.tsx
+function charColumns(c) {
+  const code = c.codePointAt(0) ?? 0;
+  if (code < 32) return 0;
+  if (code < 127) return 1;
+  if (code < 160) return 0;
+  if (code >= 4352 && code <= 4447 || // Hangul Jamo
+  code >= 11904 && code <= 42191 || // CJK Radicals … Yi
+  code >= 44032 && code <= 55203 || // Hangul
+  code >= 63744 && code <= 64255 || // CJK Compat
+  code >= 65040 && code <= 65135 || // Vertical / Compat
+  code >= 65281 && code <= 65376 || // Fullwidth
+  code >= 65504 && code <= 65510 || // Fullwidth signs
+  code >= 127744 && code <= 128591 || // Misc Symbols (emoji)
+  code >= 131072 && code <= 262141)
+    return 2;
+  return 1;
+}
+function visualWidth(s) {
+  let w = 0;
+  for (const c of s) w += charColumns(c);
+  return w;
+}
+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;
+}
+var DEBUG_LANG = typeof process !== "undefined" ? process.env?.CACHE_TUI_LANG : void 0;
+var LANG_ZH = DEBUG_LANG ? DEBUG_LANG === "zh" : (() => {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().locale.startsWith("zh");
+  } catch {
+    return false;
+  }
+})();
+var ZH_T = {
+  title: "\u7F13\u5B58\u7EDF\u8BA1",
+  hit: "\u547D\u4E2D\u7387",
+  totalHit: "\u603B\u547D\u4E2D:",
+  read: "\u7F13\u5B58\u8BFB:",
+  write: "\u7F13\u5B58\u5199:",
+  miss: "\u672A\u547D\u4E2D:",
+  out: "\u8F93\u51FA:",
+  cost: "\u8D39\u7528:",
+  saved: "\u7D2F\u8BA1\u8282\u7701:",
+  model: "\u6A21\u578B:",
+  provider: "\u63D0\u4F9B\u5546:",
+  rate: "\u5355\u4EF7:",
+  hitFolded: "\u547D\u4E2D",
+  inputRate: "\u8F93\u5165",
+  cacheRate: "\u7F13\u5B58",
+  writeRate: "\u5199\u5165",
+  noData: "\u7B49\u5F85\u7F13\u5B58\u6570\u636E...",
+  tok: "tok",
+  distTitle: "\u4F30\u7B97 Token \u5206\u5E03",
+  distSys: "\u7CFB\u7EDF\u63D0\u793A:",
+  distUser: "\u7528\u6237:",
+  distAgent: "Agent \u6307\u4EE4:",
+  distTool: "Tool \u8C03\u7528:",
+  distRes: "Tool \u7ED3\u679C:",
+  distTotal: "\u603B\u8BA1:",
+  distOut: "\u8F93\u51FA:",
+  secDetail: "\u660E\u7EC6",
+  secModel: "\u6A21\u578B",
+  secSkills: "\u5DF2\u52A0\u8F7D\u6280\u80FD"
+};
+var EN_T = {
+  title: "Token Cache",
+  hit: "Hit",
+  totalHit: "Total Hit:",
+  read: "Read:",
+  write: "Write:",
+  miss: "Miss:",
+  out: "Out:",
+  cost: "Cost:",
+  saved: "Total Saved:",
+  model: "Model:",
+  provider: "Provider:",
+  rate: "Rate:",
+  hitFolded: "hit",
+  inputRate: "in",
+  cacheRate: "cache",
+  writeRate: "write",
+  noData: "Waiting for cache data...",
+  tok: "tok",
+  distTitle: "Estimated Token Dist.",
+  distSys: "System:",
+  distUser: "User:",
+  distAgent: "Agent Instr:",
+  distTool: "Tool Call:",
+  distRes: "Tool Result:",
+  distTotal: "Total:",
+  distOut: "Output:",
+  secDetail: "Detail",
+  secModel: "Model",
+  secSkills: "Loaded Skills"
+};
+function rgb(raw) {
+  if (typeof raw === "string" && raw.startsWith("#")) {
+    const h = raw.slice(1);
+    return {
+      r: parseInt(h.slice(0, 2), 16),
+      g: parseInt(h.slice(2, 4), 16),
+      b: parseInt(h.slice(4, 6), 16)
+    };
+  }
+  if (raw && typeof raw === "object") {
+    const o = raw;
+    if (typeof o.r === "number" && typeof o.g === "number" && typeof o.b === "number") {
+      const scale = o.r > 1 || o.g > 1 || o.b > 1 ? 1 : 255;
+      return {
+        r: Math.round(o.r * scale),
+        g: Math.round(o.g * scale),
+        b: Math.round(o.b * scale)
+      };
+    }
+  }
+  return null;
+}
+function saturation(r, g, b) {
+  const max = Math.max(r, g, b) / 255;
+  const min = Math.min(r, g, b) / 255;
+  const delta = max - min;
+  if (delta === 0) return 0;
+  const L = (max + min) / 2;
+  return L <= 0.5 ? delta / (max + min) : delta / (2 - max - min);
+}
+function desaturateTo(raw, maxSat, fallback) {
+  const c = rgb(raw);
+  if (!c) return fallback;
+  const sat = saturation(c.r, c.g, c.b);
+  if (sat <= maxSat) {
+    return "#" + [c.r, c.g, c.b].map((v) => v.toString(16).padStart(2, "0")).join("");
+  }
+  const luma = c.r * 0.299 + c.g * 0.587 + c.b * 0.114;
+  let lo = 0, hi = 1;
+  for (let i = 0; i < 12; i++) {
+    const mid = (lo + hi) / 2;
+    const nr2 = Math.round(c.r + (luma - c.r) * mid);
+    const ng2 = Math.round(c.g + (luma - c.g) * mid);
+    const nb2 = Math.round(c.b + (luma - c.b) * mid);
+    if (saturation(nr2, ng2, nb2) > maxSat) lo = mid;
+    else hi = mid;
+  }
+  const nr = Math.round(c.r + (luma - c.r) * hi);
+  const ng = Math.round(c.g + (luma - c.g) * hi);
+  const nb = Math.round(c.b + (luma - c.b) * hi);
+  return "#" + [nr, ng, nb].map((v) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0")).join("");
+}
+var FALLBACK = {
+  primary: "#8B9DAF",
+  text: "#C5C5BB",
+  muted: "#7A7A72",
+  success: "#9CAF8B",
+  warning: "#C5B88D",
+  error: "#B08A8A",
+  border: "#6B6B63"
+};
+var MAX_SAT = 0.28;
+function progressBar(percent, width) {
+  const clamped = Math.max(0, Math.min(100, percent));
+  const filled = Math.round(clamped / 100 * width);
+  const empty = Math.max(0, width - filled);
+  return "\u2588".repeat(filled) + "\u2591".repeat(empty);
+}
+function fmt(n) {
+  if (n >= 1e6) return (n / 1e6).toFixed(1) + "M";
+  if (n >= 1e4) return (n / 1e3).toFixed(1) + "K";
+  return n.toLocaleString("en-US");
+}
+function num(v) {
+  return typeof v === "number" && Number.isFinite(v) ? v : 0;
+}
+function fmtCost(n, symbol = "$", rate = 1) {
+  const v = n * rate;
+  if (v >= 1) return symbol + v.toFixed(2);
+  if (v >= 0.01) return symbol + v.toFixed(3);
+  return symbol + v.toFixed(4);
+}
+function estimateTokens(text) {
+  if (!text || text.length === 0) return 0;
+  let ascii = 0;
+  let cjk = 0;
+  for (const c of text) {
+    const code = c.codePointAt(0) ?? 0;
+    if (code >= 19968 && code <= 40959) cjk++;
+    else if (code >= 12352 && code <= 12543) cjk++;
+    else if (code >= 44032 && code <= 55203) cjk++;
+    else if (code >= 4352 && code <= 4607) cjk++;
+    else if (code >= 11904 && code <= 12031) cjk++;
+    else ascii++;
+  }
+  const trimmed = text.trimStart();
+  const strippedFence = trimmed.replace(/^\x60{3}\w*\s*\n?/, "");
+  const jsonLike = (strippedFence.startsWith("{") || strippedFence.startsWith("[")) && /"[^"]+"\s*:/.test(text);
+  const codeLike = !jsonLike && /```|^import |^export |^function |^const |^let |^var |^class |^interface |^type |^def |^fn |^pub |^use |^mod |^package /m.test(text);
+  const asciiPerToken = jsonLike ? 3.5 : codeLike ? 3.5 : 4;
+  return Math.max(1, Math.ceil(ascii / asciiPerToken + cjk / 1));
+}
+var CURRENCIES = {
+  USD: "$",
+  CNY: "\xA5",
+  EUR: "\u20AC",
+  JPY: "JP\xA5",
+  GBP: "\xA3",
+  KRW: "\u20A9"
+};
+var DEFAULT_RATES = {
+  USD: 1,
+  CNY: 7.2,
+  EUR: 0.92,
+  JPY: 150,
+  GBP: 0.79,
+  KRW: 1350
+};
+var MIN_PANEL_WIDTH = 20;
+var DEFAULT_PANEL_WIDTH = 26;
+var LABEL_GAP = 1;
+var BAR_BRACKETS = 2;
+var BAR_GAP = 1;
+var PCT_FIXED_WIDTH = 5;
+var HEADER_PREFIX = 2;
+var UNIT_GAP = 1;
+function TokenCachePanel(props) {
+  const [panelWidth, setPanelWidth] = createSignal(DEFAULT_PANEL_WIDTH);
+  const [open, setOpen] = createSignal(true);
+  const [detailOpen, setDetailOpen] = createSignal(true);
+  const [modelOpen, setModelOpen] = createSignal(true);
+  const [distOpen, setDistOpen] = createSignal(false);
+  const [skillsOpen, setSkillsOpen] = createSignal(true);
+  let boxEl;
+  const {
+    currencySymbol,
+    setCurrencySymbol,
+    exchangeRate,
+    setExchangeRate,
+    langZH,
+    setLangZH,
+    sectionDetail,
+    setSectionDetail,
+    sectionModel,
+    setSectionModel,
+    sectionDist,
+    setSectionDist,
+    sectionSkills,
+    setSectionSkills,
+    borderVisible,
+    setBorderVisible
+  } = props.signals;
+  const t = createMemo(() => langZH() ? ZH_T : EN_T);
+  const [lastDist, setLastDist] = createSignal({
+    system: 0,
+    user: 0,
+    agent: 0,
+    toolCall: 0,
+    toolResult: 0,
+    output: 0,
+    apiOutput: 0,
+    apiInput: 0,
+    stepCost: 0
+  });
+  const [lastHasDist, setLastHasDist] = createSignal(false);
+  const [dataSignal, setDataSignal] = createSignal({
+    hitRate: 0,
+    read: 0,
+    write: 0,
+    freshInput: 0,
+    output: 0,
+    cost: 0,
+    saved: 0,
+    model: "",
+    inputRate: 0,
+    cacheReadRate: 0,
+    cacheWriteRate: 0,
+    hasPricing: false,
+    hasData: false,
+    trend: 0,
+    hasTrendData: false,
+    providerName: "",
+    sessionHitRate: 0,
+    dist: {
+      system: 0,
+      user: 0,
+      agent: 0,
+      toolCall: 0,
+      toolResult: 0,
+      output: 0,
+      apiOutput: 0,
+      apiInput: 0,
+      stepCost: 0
+    },
+    hasDistData: false,
+    skills: [],
+    hasSkills: false
+  });
+  const [refreshTick, setRefreshTick] = createSignal(0);
+  createEffect(() => {
+    const sid = props.sessionId;
+    void refreshTick();
+    void partVersion();
+    const msgs = props.api.state.session.messages(sid);
+    const session = typeof props.api.state.session.get === "function" ? props.api.state.session.get(sid) : void 0;
+    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 t2 = msg.tokens;
+      if (!t2) continue;
+      const mit = num(t2.input) + num(t2.cache?.read), mrt = num(t2.cache?.read);
+      if (mit > 0) {
+        prevMsgHitRate = lastMsgHitRate;
+        lastMsgHitRate = mrt / mit * 100;
+      }
+      if (fallbackTokens) {
+        input += num(t2.input);
+        read += num(t2.cache?.read);
+        write += num(t2.cache?.write);
+        output += num(t2.output);
+      }
+      if (fallbackCost) {
+        cost += num(msg.cost);
+      }
+      if (fallbackModel && msg.providerID && msg.modelID) {
+        pid = msg.providerID;
+        mid = msg.modelID;
+      }
+    }
+    let saved = 0, inputRate = 0, cacheReadRate = 0, cacheWriteRate = 0;
+    if (read > 0 && pid && mid && Array.isArray(props.api.state.provider)) for (const provider of props.api.state.provider) {
+      if (provider.id !== pid) continue;
+      const model2 = provider.models[mid];
+      if (!model2?.cost) continue;
+      inputRate = num(model2.cost.input);
+      cacheReadRate = num(model2.cost.cache?.read);
+      cacheWriteRate = num(model2.cost.cache?.write);
+      if (inputRate > cacheReadRate) saved = read * (inputRate - cacheReadRate) / 1e6;
+      break;
+    }
+    const hitRate = lastMsgHitRate >= 0 ? lastMsgHitRate : 0;
+    const freshTotal = input + read, sessionHitRate = freshTotal > 0 ? read / freshTotal * 100 : 0;
+    const model = mid.split("/").pop() ?? mid, hasPricing = inputRate > 0 || cacheReadRate > 0 || cacheWriteRate > 0;
+    const hasTrendData = prevMsgHitRate >= 0 && lastMsgHitRate >= 0;
+    const trend = hasTrendData ? lastMsgHitRate - prevMsgHitRate : 0, providerName = pid || "";
+    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 = /* @__PURE__ */ new Map();
+      try {
+        const cfg = props.api.state.config;
+        const agentName = String(session?.agent ?? cfg?.default_agent ?? "build");
+        const agents = cfg?.agent;
+        const agentCfg = agents?.[agentName];
+        const sysPrompt = typeof agentCfg?.prompt === "string" ? agentCfg.prompt : "";
+        if (sysPrompt) dist.system = estimateTokens(sysPrompt);
+        let lastAssMsg;
+        for (const msg of msgs) {
+          if (msg.role === "user") {
+            const um = msg;
+            if (um.system) dist.system += estimateTokens(um.system);
+            let parts = [];
+            try {
+              parts = props.api.state.part(msg.id);
+            } catch {
+            }
+            for (const p of parts) {
+              if (p.type === "text" && !p.synthetic && !p.ignored) dist.user += estimateTokens(p.text);
+              else if (p.type === "file") {
+                const fp = p;
+                if (fp.source?.text?.value) dist.user += estimateTokens(fp.source.text.value);
+              }
+            }
+          } else if (msg.role === "assistant") {
+            const am = msg;
+            dist.output += num(am.tokens?.output);
+            let parts = [];
+            try {
+              parts = props.api.state.part(msg.id);
+            } catch {
+            }
+            for (const p of parts) {
+              if (p.type === "tool") {
+                const tp = p;
+                let rawInput = "";
+                try {
+                  rawInput = tp.state.raw ?? (tp.state.input != null ? JSON.stringify(tp.state.input) : "");
+                } catch {
+                }
+                if (rawInput) dist.toolCall += estimateTokens(rawInput);
+                if (tp.state.status === "completed") {
+                  const c = tp.state;
+                  if (c.output) dist.toolResult += estimateTokens(c.output);
+                } else if (tp.state.status === "error") {
+                  const e = tp.state;
+                  if (e.error) dist.toolResult += estimateTokens(e.error);
+                }
+                if (tp.tool === "skill" && tp.state.status === "completed") {
+                  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);
+              else if (p.type === "subtask") {
+                const sub = p;
+                dist.agent += estimateTokens(sub.prompt || sub.description || "");
+              }
+            }
+          }
+        }
+        for (let i = msgs.length - 1; i >= 0; i--) {
+          if (msgs[i].role !== "assistant") continue;
+          const t2 = msgs[i].tokens;
+          if (t2 && (t2.input > 0 || (t2.cache?.read ?? 0) > 0)) {
+            lastAssMsg = msgs[i];
+            break;
+          }
+        }
+        dist.apiInput = num(lastAssMsg?.tokens?.input) + num(lastAssMsg?.tokens?.cache?.read);
+        dist.apiOutput = num(lastAssMsg?.tokens?.output);
+        hasDistData = dist.system + dist.user + dist.agent + dist.toolCall + dist.toolResult > 0 || dist.apiOutput > 0 || dist.apiInput > 0;
+      } catch {
+      }
+      const finalDist = hasDistData ? dist : lastDist(), finalHasDist = hasDistData || lastHasDist();
+      const skills = [...loadedSkills.values()];
+      return {
+        finalDist,
+        finalHasDist,
+        skills
+      };
+    });
+    setDataSignal({
+      hitRate,
+      read,
+      write,
+      freshInput: input,
+      output,
+      cost,
+      saved,
+      model,
+      inputRate,
+      cacheReadRate,
+      cacheWriteRate,
+      hasPricing,
+      hasData: read > 0 || write > 0 || input > 0 || output > 0 || cost > 0,
+      trend,
+      hasTrendData,
+      providerName,
+      sessionHitRate,
+      dist: distData.finalDist,
+      hasDistData: distData.finalHasDist,
+      skills: distData.skills,
+      hasSkills: distData.skills.length > 0
+    });
+  });
+  const data = createMemo(() => {
+    return dataSignal();
+  });
+  createEffect(() => {
+    const d = data();
+    if (d.hasDistData) {
+      setLastDist({
+        ...d.dist
+      });
+      setLastHasDist(true);
+      try {
+        props.api.kv.set(`${KV_PREFIX}.dist_snapshot`, {
+          ...d.dist
+        });
+      } catch {
+      }
+    }
+  });
+  const [partVersion, setPartVersion] = createSignal(0);
+  const KV_PREFIX = "cache_panel";
+  const persistFold = (key, val) => {
+    try {
+      props.api.kv.set(`${KV_PREFIX}.${key}`, val);
+    } catch {
+    }
+  };
+  onMount(() => {
+    setPanelWidth(DEFAULT_PANEL_WIDTH);
+    try {
+      setOpen(Boolean(props.api.kv.get(`${KV_PREFIX}.open`, false)));
+      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 {
+    }
+    const doRestore = () => {
+      try {
+        const sym = props.api.kv.get(`${KV_PREFIX}.currency`);
+        const rate = props.api.kv.get(`${KV_PREFIX}.rate`);
+        if (typeof sym === "string") setCurrencySymbol(sym);
+        if (typeof rate === "number" && rate > 0) setExchangeRate(rate);
+        setSectionDetail(Boolean(props.api.kv.get(`${KV_PREFIX}.section.detail`, true)));
+        setSectionModel(Boolean(props.api.kv.get(`${KV_PREFIX}.section.model`, true)));
+        setSectionDist(Boolean(props.api.kv.get(`${KV_PREFIX}.section.dist`, true)));
+        setSectionSkills(Boolean(props.api.kv.get(`${KV_PREFIX}.section.skills`, true)));
+        const bv = props.api.kv.get(`${KV_PREFIX}.border`, true);
+        setBorderVisible(bv !== false);
+        const savedLang = props.api.kv.get(`${KV_PREFIX}.lang`);
+        if (savedLang === "zh" || savedLang === "en") {
+          setLangZH(savedLang === "zh");
+        }
+        const cachedDist = props.api.kv.get(`${KV_PREFIX}.dist_snapshot`);
+        if (cachedDist) {
+          setLastDist(cachedDist);
+          setLastHasDist(true);
+        }
+      } catch {
+      }
+      if (boxEl && typeof boxEl.width === "number" && boxEl.width > 0) {
+        setPanelWidth(Math.max(MIN_PANEL_WIDTH, boxEl.width));
+      }
+    };
+    if (props.api.kv.ready) {
+      doRestore();
+    } else {
+      const MAX_POLL = 100;
+      let tries = 0;
+      const pollRestore = () => {
+        if (!props.api.kv.ready) {
+          if (++tries > MAX_POLL) {
+            doRestore();
+            return;
+          }
+          setTimeout(pollRestore, 10);
+          return;
+        }
+        doRestore();
+      };
+      pollRestore();
+    }
+    let partTimer;
+    const bumpPartVersion = () => {
+      clearTimeout(partTimer);
+      partTimer = setTimeout(() => setPartVersion((v) => v + 1), 100);
+    };
+    const unsubPart = props.api.event.on("message.part.updated", () => {
+      bumpPartVersion();
+      setRefreshTick((v) => v + 1);
+    });
+    const unsubMsg = props.api.event.on("message.updated", () => {
+      bumpPartVersion();
+      setRefreshTick((v) => v + 1);
+    });
+    const unsubSession = props.api.event.on("session.updated", () => {
+      setRefreshTick((v) => v + 1);
+    });
+    setRefreshTick((v) => v + 1);
+    onCleanup(() => {
+      clearTimeout(partTimer);
+      unsubPart();
+      unsubMsg();
+      unsubSession();
+    });
+  });
+  const pal = createMemo(() => {
+    const t2 = props.theme;
+    const sat = (k, fb) => desaturateTo(t2[k], MAX_SAT, fb);
+    return {
+      primary: sat("primary", FALLBACK.primary),
+      text: sat("text", FALLBACK.text),
+      muted: sat("textMuted", FALLBACK.muted),
+      success: sat("success", FALLBACK.success),
+      warning: sat("warning", FALLBACK.warning),
+      error: sat("error", FALLBACK.error),
+      border: sat("border", FALLBACK.border)
+    };
+  });
+  const hitColor = createMemo(() => {
+    const r = data().hitRate;
+    if (r >= 85) return pal().success;
+    if (r >= 70) return pal().warning;
+    return pal().error;
+  });
+  const gutter = createMemo(() => borderVisible() ? 6 : 0);
+  const sep = createMemo(() => "\u2500".repeat(Math.max(1, panelWidth() - gutter())));
+  function trendLabel(t2) {
+    return (t2 > 0 ? "\u2191" : t2 < 0 ? "\u2193" : "-") + (t2 !== 0 ? Math.abs(t2).toFixed(1) + "%" : "");
+  }
+  const barW = createMemo(() => {
+    const trendSpace = data().hasTrendData ? LABEL_GAP + visualWidth(trendLabel(data().trend)) : 0;
+    const overhead = visualWidth(t().hit) + LABEL_GAP + BAR_BRACKETS + BAR_GAP + PCT_FIXED_WIDTH + trendSpace + gutter();
+    return Math.max(3, panelWidth() - overhead);
+  });
+  const bar = createMemo(() => progressBar(data().hitRate, barW()));
+  const pct = createMemo(() => (Math.floor(data().hitRate * 10) / 10).toFixed(1) + "%");
+  createEffect(() => {
+    borderVisible();
+    if (boxEl && typeof boxEl.width === "number" && boxEl.width > 0) {
+      const w = Math.max(MIN_PANEL_WIDTH, boxEl.width);
+      setPanelWidth((prev) => prev === w ? prev : w);
+    }
+  });
+  const justify = (label, value, unit = "") => {
+    const gauge = panelWidth() - gutter();
+    const used = visualWidth(label) + visualWidth(value) + (unit ? visualWidth(unit) + UNIT_GAP : 0);
+    const gap = Math.max(1, gauge - used);
+    return label + " ".repeat(gap) + value + (unit ? " " + unit : "");
+  };
+  return (() => {
+    var _el$ = _$createElement("box"), _el$2 = _$createElement("text"), _el$3 = _$createElement("span"), _el$4 = _$createElement("span"), _el$5 = _$createElement("b");
+    _$insertNode(_el$, _el$2);
+    var _ref$ = boxEl;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$) : boxEl = _el$;
+    _$spread(_el$, _$mergeProps({
+      get border() {
+        return borderVisible();
+      }
+    }, () => borderVisible() ? {
+      borderColor: pal().border
+    } : {}, {
+      "paddingTop": 0,
+      "paddingBottom": 0,
+      get paddingLeft() {
+        return borderVisible() ? 2 : 0;
+      },
+      get paddingRight() {
+        return borderVisible() ? 2 : 0;
+      },
+      "flexDirection": "column",
+      "gap": 0,
+      "onSizeChange": () => {
+        const w = boxEl ? Math.max(MIN_PANEL_WIDTH, boxEl.width ?? 0) : DEFAULT_PANEL_WIDTH;
+        setPanelWidth((prev) => prev === w ? prev : w);
+      }
+    }), true);
+    _$insertNode(_el$2, _el$3);
+    _$insertNode(_el$2, _el$4);
+    _$setProp(_el$2, "onMouseUp", () => setOpen((o) => {
+      const n = !o;
+      persistFold("open", n);
+      return n;
+    }));
+    _$insert(_el$3, () => open() ? "\u25BC " : "\u25B6 ");
+    _$insertNode(_el$4, _el$5);
+    _$insert(_el$5, () => t().title);
+    _$insert(_el$4, _$createComponent(Show, {
+      get when() {
+        return open();
+      },
+      get children() {
+        var _el$6 = _$createElement("span"), _el$7 = _$createTextNode(` (v`), _el$8 = _$createTextNode(`)`);
+        _$insertNode(_el$6, _el$7);
+        _$insertNode(_el$6, _el$8);
+        _$insert(_el$6, PLUGIN_VERSION, _el$8);
+        _$effect((_$p) => _$setProp(_el$6, "style", {
+          fg: pal().muted
+        }, _$p));
+        return _el$6;
+      }
+    }), null);
+    _$insert(_el$2, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!!open())() && data().hasData;
+      },
+      get children() {
+        return [_$createComponent(Show, {
+          get when() {
+            return data().hasTrendData;
+          },
+          get children() {
+            return [(() => {
+              var _el$9 = _$createElement("span");
+              _$insert(_el$9, () => " ".repeat(Math.max(1, panelWidth() - gutter() - HEADER_PREFIX - visualWidth(t().title) - visualWidth(pct() + " " + t().hitFolded + " " + trendLabel(data().trend)))));
+              return _el$9;
+            })(), (() => {
+              var _el$0 = _$createElement("span"), _el$1 = _$createTextNode(` `);
+              _$insertNode(_el$0, _el$1);
+              _$insert(_el$0, pct, _el$1);
+              _$insert(_el$0, () => t().hitFolded, null);
+              _$effect((_$p) => _$setProp(_el$0, "style", {
+                fg: hitColor()
+              }, _$p));
+              return _el$0;
+            })(), (() => {
+              var _el$10 = _$createElement("span"), _el$11 = _$createTextNode(` `);
+              _$insertNode(_el$10, _el$11);
+              _$insert(_el$10, () => trendLabel(data().trend), null);
+              _$effect((_$p) => _$setProp(_el$10, "style", {
+                fg: data().trend !== 0 ? data().trend > 0 ? pal().success : pal().error : pal().text
+              }, _$p));
+              return _el$10;
+            })()];
+          }
+        }), _$createComponent(Show, {
+          get when() {
+            return !data().hasTrendData;
+          },
+          get children() {
+            return [(() => {
+              var _el$12 = _$createElement("span");
+              _$insert(_el$12, () => " ".repeat(Math.max(1, panelWidth() - gutter() - HEADER_PREFIX - visualWidth(t().title) - visualWidth(pct() + " " + t().hitFolded))));
+              return _el$12;
+            })(), (() => {
+              var _el$13 = _$createElement("span"), _el$14 = _$createTextNode(` `);
+              _$insertNode(_el$13, _el$14);
+              _$insert(_el$13, pct, _el$14);
+              _$insert(_el$13, () => t().hitFolded, null);
+              _$effect((_$p) => _$setProp(_el$13, "style", {
+                fg: hitColor()
+              }, _$p));
+              return _el$13;
+            })()];
+          }
+        })];
+      }
+    }), null);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return open();
+      },
+      get children() {
+        return _$createComponent(Show, {
+          get when() {
+            return data().hasData;
+          },
+          get fallback() {
+            return [(() => {
+              var _el$52 = _$createElement("text");
+              _$insert(_el$52, sep);
+              _$effect((_$p) => _$setProp(_el$52, "fg", pal().muted, _$p));
+              return _el$52;
+            })(), (() => {
+              var _el$53 = _$createElement("text"), _el$54 = _$createElement("span"), _el$56 = _$createElement("span");
+              _$insertNode(_el$53, _el$54);
+              _$insertNode(_el$53, _el$56);
+              _$insertNode(_el$54, _$createTextNode(`> `));
+              _$insert(_el$56, () => t().noData);
+              _$effect((_p$) => {
+                var _v$1 = {
+                  fg: pal().muted
+                }, _v$10 = {
+                  fg: pal().muted
+                };
+                _v$1 !== _p$.e && (_p$.e = _$setProp(_el$54, "style", _v$1, _p$.e));
+                _v$10 !== _p$.t && (_p$.t = _$setProp(_el$56, "style", _v$10, _p$.t));
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0
+              });
+              return _el$53;
+            })()];
+          },
+          get children() {
+            return [(() => {
+              var _el$15 = _$createElement("text");
+              _$insert(_el$15, sep);
+              _$effect((_$p) => _$setProp(_el$15, "fg", pal().muted, _$p));
+              return _el$15;
+            })(), (() => {
+              var _el$16 = _$createElement("text"), _el$17 = _$createElement("span"), _el$18 = _$createTextNode(` `), _el$19 = _$createElement("span"), _el$20 = _$createTextNode(`[`), _el$21 = _$createTextNode(`] `), _el$22 = _$createElement("span");
+              _$insertNode(_el$16, _el$17);
+              _$insertNode(_el$16, _el$19);
+              _$insertNode(_el$16, _el$22);
+              _$insertNode(_el$17, _el$18);
+              _$insert(_el$17, () => t().hit, _el$18);
+              _$insertNode(_el$19, _el$20);
+              _$insertNode(_el$19, _el$21);
+              _$insert(_el$19, bar, _el$21);
+              _$insert(_el$22, pct);
+              _$insert(_el$16, _$createComponent(Show, {
+                get when() {
+                  return data().hasTrendData;
+                },
+                get children() {
+                  var _el$23 = _$createElement("span"), _el$24 = _$createTextNode(` `);
+                  _$insertNode(_el$23, _el$24);
+                  _$insert(_el$23, () => trendLabel(data().trend), null);
+                  _$effect((_$p) => _$setProp(_el$23, "style", {
+                    fg: data().trend !== 0 ? data().trend > 0 ? pal().success : pal().error : pal().text
+                  }, _$p));
+                  return _el$23;
+                }
+              }), null);
+              _$effect((_p$) => {
+                var _v$ = {
+                  fg: pal().text
+                }, _v$2 = {
+                  fg: hitColor()
+                }, _v$3 = {
+                  fg: pal().text
+                };
+                _v$ !== _p$.e && (_p$.e = _$setProp(_el$17, "style", _v$, _p$.e));
+                _v$2 !== _p$.t && (_p$.t = _$setProp(_el$19, "style", _v$2, _p$.t));
+                _v$3 !== _p$.a && (_p$.a = _$setProp(_el$22, "style", _v$3, _p$.a));
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0
+              });
+              return _el$16;
+            })(), (() => {
+              var _el$25 = _$createElement("text");
+              _$insert(_el$25, () => justify(t().totalHit, (Math.floor(data().sessionHitRate * 10) / 10).toFixed(1) + "%"));
+              _$effect((_$p) => _$setProp(_el$25, "fg", pal().muted, _$p));
+              return _el$25;
+            })(), _$createComponent(Show, {
+              get when() {
+                return sectionDetail();
+              },
+              get children() {
+                return [(() => {
+                  var _el$26 = _$createElement("text"), _el$27 = _$createElement("span"), _el$28 = _$createElement("span"), _el$29 = _$createElement("b"), _el$30 = _$createElement("span");
+                  _$insertNode(_el$26, _el$27);
+                  _$insertNode(_el$26, _el$28);
+                  _$insertNode(_el$26, _el$30);
+                  _$setProp(_el$26, "onMouseUp", () => setDetailOpen((o) => {
+                    const n = !o;
+                    persistFold("detail", n);
+                    return n;
+                  }));
+                  _$insert(_el$27, () => detailOpen() ? "\u25BC " : "\u25B6 ");
+                  _$insertNode(_el$28, _el$29);
+                  _$insert(_el$29, () => t().secDetail);
+                  _$insert(_el$30, () => sep().slice(visualWidth((detailOpen() ? "\u25BC " : "\u25B6 ") + t().secDetail)));
+                  _$effect((_p$) => {
+                    var _v$4 = {
+                      fg: pal().muted
+                    }, _v$5 = {
+                      fg: pal().primary
+                    }, _v$6 = {
+                      fg: pal().muted
+                    };
+                    _v$4 !== _p$.e && (_p$.e = _$setProp(_el$27, "style", _v$4, _p$.e));
+                    _v$5 !== _p$.t && (_p$.t = _$setProp(_el$28, "style", _v$5, _p$.t));
+                    _v$6 !== _p$.a && (_p$.a = _$setProp(_el$30, "style", _v$6, _p$.a));
+                    return _p$;
+                  }, {
+                    e: void 0,
+                    t: void 0,
+                    a: void 0
+                  });
+                  return _el$26;
+                })(), _$createComponent(Show, {
+                  get when() {
+                    return detailOpen();
+                  },
+                  get children() {
+                    return [_$createComponent(Show, {
+                      get when() {
+                        return data().read > 0;
+                      },
+                      get children() {
+                        var _el$31 = _$createElement("text");
+                        _$insert(_el$31, () => justify(t().read, fmt(data().read), t().tok));
+                        _$effect((_$p) => _$setProp(_el$31, "fg", pal().muted, _$p));
+                        return _el$31;
+                      }
+                    }), _$createComponent(Show, {
+                      get when() {
+                        return data().write > 0;
+                      },
+                      get children() {
+                        var _el$32 = _$createElement("text");
+                        _$insert(_el$32, () => justify(t().write, fmt(data().write), t().tok));
+                        _$effect((_$p) => _$setProp(_el$32, "fg", pal().muted, _$p));
+                        return _el$32;
+                      }
+                    }), (() => {
+                      var _el$33 = _$createElement("text");
+                      _$insert(_el$33, () => justify(t().miss, fmt(data().freshInput), t().tok));
+                      _$effect((_$p) => _$setProp(_el$33, "fg", pal().muted, _$p));
+                      return _el$33;
+                    })(), (() => {
+                      var _el$34 = _$createElement("text");
+                      _$insert(_el$34, () => justify(t().out, fmt(data().output), t().tok));
+                      _$effect((_$p) => _$setProp(_el$34, "fg", pal().muted, _$p));
+                      return _el$34;
+                    })(), _$createComponent(Show, {
+                      get when() {
+                        return data().saved > 0;
+                      },
+                      get children() {
+                        var _el$35 = _$createElement("text"), _el$36 = _$createElement("span"), _el$37 = _$createElement("span"), _el$38 = _$createElement("span"), _el$39 = _$createTextNode(`~`);
+                        _$insertNode(_el$35, _el$36);
+                        _$insertNode(_el$35, _el$37);
+                        _$insertNode(_el$35, _el$38);
+                        _$insert(_el$36, () => t().saved);
+                        _$insert(_el$37, () => " ".repeat(Math.max(1, panelWidth() - gutter() - visualWidth(t().saved) - visualWidth("~" + fmtCost(data().saved, currencySymbol(), exchangeRate())))));
+                        _$insertNode(_el$38, _el$39);
+                        _$insert(_el$38, () => fmtCost(data().saved, currencySymbol(), exchangeRate()), null);
+                        _$effect((_p$) => {
+                          var _v$7 = {
+                            fg: pal().muted
+                          }, _v$8 = {
+                            fg: pal().success
+                          };
+                          _v$7 !== _p$.e && (_p$.e = _$setProp(_el$36, "style", _v$7, _p$.e));
+                          _v$8 !== _p$.t && (_p$.t = _$setProp(_el$38, "style", _v$8, _p$.t));
+                          return _p$;
+                        }, {
+                          e: void 0,
+                          t: void 0
+                        });
+                        return _el$35;
+                      }
+                    })];
+                  }
+                })];
+              }
+            }), _$createComponent(Show, {
+              get when() {
+                return sectionModel();
+              },
+              get children() {
+                return [_$memo(() => (() => {
+                  var _el$57 = _$createElement("text"), _el$58 = _$createElement("span"), _el$59 = _$createElement("span"), _el$60 = _$createElement("b"), _el$61 = _$createElement("span");
+                  _$insertNode(_el$57, _el$58);
+                  _$insertNode(_el$57, _el$59);
+                  _$insertNode(_el$57, _el$61);
+                  _$setProp(_el$57, "onMouseUp", () => setModelOpen((o) => {
+                    const n = !o;
+                    persistFold("model", n);
+                    return n;
+                  }));
+                  _$insert(_el$58, () => modelOpen() ? "\u25BC " : "\u25B6 ");
+                  _$insertNode(_el$59, _el$60);
+                  _$insert(_el$60, () => t().secModel);
+                  _$insert(_el$61, () => sep().slice(visualWidth((modelOpen() ? "\u25BC " : "\u25B6 ") + t().secModel)));
+                  _$effect((_p$) => {
+                    var _v$11 = {
+                      fg: pal().muted
+                    }, _v$12 = {
+                      fg: pal().primary
+                    }, _v$13 = {
+                      fg: pal().muted
+                    };
+                    _v$11 !== _p$.e && (_p$.e = _$setProp(_el$58, "style", _v$11, _p$.e));
+                    _v$12 !== _p$.t && (_p$.t = _$setProp(_el$59, "style", _v$12, _p$.t));
+                    _v$13 !== _p$.a && (_p$.a = _$setProp(_el$61, "style", _v$13, _p$.a));
+                    return _p$;
+                  }, {
+                    e: void 0,
+                    t: void 0,
+                    a: void 0
+                  });
+                  return _el$57;
+                })()), _$createComponent(Show, {
+                  get when() {
+                    return modelOpen();
+                  },
+                  get children() {
+                    return [(() => {
+                      var _el$40 = _$createElement("text");
+                      _$insert(_el$40, () => justify(t().cost, fmtCost(data().cost, currencySymbol(), exchangeRate())));
+                      _$effect((_$p) => _$setProp(_el$40, "fg", pal().text, _$p));
+                      return _el$40;
+                    })(), _$createComponent(Show, {
+                      get when() {
+                        return data().providerName;
+                      },
+                      get children() {
+                        var _el$41 = _$createElement("text");
+                        _$insert(_el$41, () => justify(t().provider, data().providerName));
+                        _$effect((_$p) => _$setProp(_el$41, "fg", pal().muted, _$p));
+                        return _el$41;
+                      }
+                    }), (() => {
+                      var _el$42 = _$createElement("text");
+                      _$insert(_el$42, () => justify(t().model, data().model));
+                      _$effect((_$p) => _$setProp(_el$42, "fg", pal().muted, _$p));
+                      return _el$42;
+                    })(), _$createComponent(Show, {
+                      get when() {
+                        return data().hasPricing;
+                      },
+                      get children() {
+                        return [(() => {
+                          var _el$43 = _$createElement("text");
+                          _$insert(_el$43, () => justify(t().rate, currencySymbol() + (data().inputRate * exchangeRate()).toFixed(2) + "/M " + t().inputRate));
+                          _$effect((_$p) => _$setProp(_el$43, "fg", pal().muted, _$p));
+                          return _el$43;
+                        })(), _$createComponent(Show, {
+                          get when() {
+                            return data().cacheReadRate > 0;
+                          },
+                          get children() {
+                            var _el$44 = _$createElement("text");
+                            _$insert(_el$44, () => justify("", currencySymbol() + (data().cacheReadRate * exchangeRate()).toFixed(2) + "/M " + t().cacheRate));
+                            _$effect((_$p) => _$setProp(_el$44, "fg", pal().muted, _$p));
+                            return _el$44;
+                          }
+                        }), _$createComponent(Show, {
+                          get when() {
+                            return data().cacheWriteRate > 0;
+                          },
+                          get children() {
+                            var _el$45 = _$createElement("text");
+                            _$insert(_el$45, () => justify("", currencySymbol() + (data().cacheWriteRate * exchangeRate()).toFixed(2) + "/M " + t().writeRate));
+                            _$effect((_$p) => _$setProp(_el$45, "fg", pal().muted, _$p));
+                            return _el$45;
+                          }
+                        })];
+                      }
+                    })];
+                  }
+                })];
+              }
+            }), _$createComponent(Show, {
+              get when() {
+                return sectionDist();
+              },
+              get children() {
+                return _$createComponent(Show, {
+                  get when() {
+                    return data().hasDistData;
+                  },
+                  get children() {
+                    return [_$memo(() => (() => {
+                      var _el$62 = _$createElement("text"), _el$63 = _$createElement("span"), _el$64 = _$createElement("span"), _el$65 = _$createElement("b"), _el$66 = _$createElement("span");
+                      _$insertNode(_el$62, _el$63);
+                      _$insertNode(_el$62, _el$64);
+                      _$insertNode(_el$62, _el$66);
+                      _$setProp(_el$62, "onMouseUp", () => setDistOpen((o) => {
+                        const n = !o;
+                        persistFold("dist", n);
+                        return n;
+                      }));
+                      _$insert(_el$63, () => distOpen() ? "\u25BC " : "\u25B6 ");
+                      _$insertNode(_el$64, _el$65);
+                      _$insert(_el$65, () => t().distTitle);
+                      _$insert(_el$66, () => sep().slice(visualWidth((distOpen() ? "\u25BC " : "\u25B6 ") + t().distTitle)));
+                      _$effect((_p$) => {
+                        var _v$14 = {
+                          fg: pal().muted
+                        }, _v$15 = {
+                          fg: pal().primary
+                        }, _v$16 = {
+                          fg: pal().muted
+                        };
+                        _v$14 !== _p$.e && (_p$.e = _$setProp(_el$63, "style", _v$14, _p$.e));
+                        _v$15 !== _p$.t && (_p$.t = _$setProp(_el$64, "style", _v$15, _p$.t));
+                        _v$16 !== _p$.a && (_p$.a = _$setProp(_el$66, "style", _v$16, _p$.a));
+                        return _p$;
+                      }, {
+                        e: void 0,
+                        t: void 0,
+                        a: void 0
+                      });
+                      return _el$62;
+                    })()), _$createComponent(Show, {
+                      get when() {
+                        return distOpen();
+                      },
+                      get children() {
+                        return [_$createComponent(Show, {
+                          get when() {
+                            return data().dist.system > 0;
+                          },
+                          get children() {
+                            var _el$46 = _$createElement("text");
+                            _$insert(_el$46, () => justify(t().distSys, fmt(data().dist.system), t().tok));
+                            _$effect((_$p) => _$setProp(_el$46, "fg", pal().muted, _$p));
+                            return _el$46;
+                          }
+                        }), _$createComponent(Show, {
+                          get when() {
+                            return data().dist.user > 0;
+                          },
+                          get children() {
+                            var _el$47 = _$createElement("text");
+                            _$insert(_el$47, () => justify(t().distUser, fmt(data().dist.user), t().tok));
+                            _$effect((_$p) => _$setProp(_el$47, "fg", pal().muted, _$p));
+                            return _el$47;
+                          }
+                        }), _$createComponent(Show, {
+                          get when() {
+                            return data().dist.agent > 0;
+                          },
+                          get children() {
+                            var _el$48 = _$createElement("text");
+                            _$insert(_el$48, () => justify(t().distAgent, fmt(data().dist.agent), t().tok));
+                            _$effect((_$p) => _$setProp(_el$48, "fg", pal().muted, _$p));
+                            return _el$48;
+                          }
+                        }), _$createComponent(Show, {
+                          get when() {
+                            return data().dist.toolCall > 0;
+                          },
+                          get children() {
+                            var _el$49 = _$createElement("text");
+                            _$insert(_el$49, () => justify(t().distTool, fmt(data().dist.toolCall), t().tok));
+                            _$effect((_$p) => _$setProp(_el$49, "fg", pal().muted, _$p));
+                            return _el$49;
+                          }
+                        }), _$createComponent(Show, {
+                          get when() {
+                            return data().dist.toolResult > 0;
+                          },
+                          get children() {
+                            var _el$50 = _$createElement("text");
+                            _$insert(_el$50, () => justify(t().distRes, fmt(data().dist.toolResult), t().tok));
+                            _$effect((_$p) => _$setProp(_el$50, "fg", pal().muted, _$p));
+                            return _el$50;
+                          }
+                        }), (() => {
+                          var _el$51 = _$createElement("text");
+                          _$insert(_el$51, () => justify(t().distTotal, fmt(data().dist.apiInput), t().tok));
+                          _$effect((_$p) => _$setProp(_el$51, "fg", pal().text, _$p));
+                          return _el$51;
+                        })()];
+                      }
+                    })];
+                  }
+                });
+              }
+            }), _$createComponent(Show, {
+              get when() {
+                return sectionSkills();
+              },
+              get children() {
+                return _$createComponent(Show, {
+                  get when() {
+                    return data().hasSkills;
+                  },
+                  get children() {
+                    return [_$memo(() => (() => {
+                      var _el$67 = _$createElement("text"), _el$68 = _$createElement("span"), _el$69 = _$createElement("span"), _el$70 = _$createElement("b"), _el$71 = _$createElement("span"), _el$72 = _$createTextNode(` (`), _el$73 = _$createTextNode(`)`), _el$74 = _$createElement("span");
+                      _$insertNode(_el$67, _el$68);
+                      _$insertNode(_el$67, _el$69);
+                      _$insertNode(_el$67, _el$71);
+                      _$insertNode(_el$67, _el$74);
+                      _$setProp(_el$67, "onMouseUp", () => setSkillsOpen((o) => {
+                        const n = !o;
+                        persistFold("skills", n);
+                        return n;
+                      }));
+                      _$insert(_el$68, () => skillsOpen() ? "\u25BC " : "\u25B6 ");
+                      _$insertNode(_el$69, _el$70);
+                      _$insert(_el$70, () => t().secSkills);
+                      _$insertNode(_el$71, _el$72);
+                      _$insertNode(_el$71, _el$73);
+                      _$insert(_el$71, () => data().skills.length, _el$73);
+                      _$insert(_el$74, () => sep().slice(visualWidth((skillsOpen() ? "\u25BC " : "\u25B6 ") + t().secSkills + ` (${data().skills.length})`)));
+                      _$effect((_p$) => {
+                        var _v$17 = {
+                          fg: pal().muted
+                        }, _v$18 = {
+                          fg: pal().primary
+                        }, _v$19 = {
+                          fg: pal().muted
+                        }, _v$20 = {
+                          fg: pal().muted
+                        };
+                        _v$17 !== _p$.e && (_p$.e = _$setProp(_el$68, "style", _v$17, _p$.e));
+                        _v$18 !== _p$.t && (_p$.t = _$setProp(_el$69, "style", _v$18, _p$.t));
+                        _v$19 !== _p$.a && (_p$.a = _$setProp(_el$71, "style", _v$19, _p$.a));
+                        _v$20 !== _p$.o && (_p$.o = _$setProp(_el$74, "style", _v$20, _p$.o));
+                        return _p$;
+                      }, {
+                        e: void 0,
+                        t: void 0,
+                        a: void 0,
+                        o: void 0
+                      });
+                      return _el$67;
+                    })()), _$createComponent(Show, {
+                      get when() {
+                        return skillsOpen();
+                      },
+                      get children() {
+                        return 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 (() => {
+                            var _el$75 = _$createElement("text");
+                            _$insert(_el$75, () => justify(label, fmt(sk.tokens), t().tok));
+                            _$effect((_$p) => _$setProp(_el$75, "fg", pal().muted, _$p));
+                            return _el$75;
+                          })();
+                        });
+                      }
+                    })];
+                  }
+                });
+              }
+            })];
+          }
+        });
+      }
+    }), null);
+    _$effect((_p$) => {
+      var _v$9 = {
+        fg: pal().muted
+      }, _v$0 = {
+        fg: pal().primary
+      };
+      _v$9 !== _p$.e && (_p$.e = _$setProp(_el$3, "style", _v$9, _p$.e));
+      _v$0 !== _p$.t && (_p$.t = _$setProp(_el$4, "style", _v$0, _p$.t));
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+}
+function createSidebarSlot(api, signals) {
+  return {
+    order: 55,
+    slots: {
+      sidebar_content(ctx, input) {
+        return _$createComponent(TokenCachePanel, {
+          get theme() {
+            return ctx.theme.current;
+          },
+          api,
+          get sessionId() {
+            return input.session_id;
+          },
+          signals
+        });
+      }
+    }
+  };
+}
+var tui = async (api) => {
+  const [currencySymbol, setCurrencySymbol] = createSignal("$");
+  const [exchangeRate, setExchangeRate] = createSignal(1);
+  const [sectionDetail, setSectionDetail] = createSignal(true);
+  const [sectionModel, setSectionModel] = createSignal(true);
+  const [sectionDist, setSectionDist] = createSignal(true);
+  const [sectionSkills, setSectionSkills] = createSignal(true);
+  const [borderVisible, setBorderVisible] = createSignal(true);
+  const [langZH, setLangZH] = createSignal(LANG_ZH);
+  const signals = {
+    currencySymbol,
+    setCurrencySymbol,
+    exchangeRate,
+    setExchangeRate,
+    langZH,
+    setLangZH,
+    sectionDetail,
+    setSectionDetail,
+    sectionModel,
+    setSectionModel,
+    sectionDist,
+    setSectionDist,
+    sectionSkills,
+    setSectionSkills,
+    borderVisible,
+    setBorderVisible
+  };
+  api.slots.register(createSidebarSlot(api, signals));
+  const KV_PREFIX = "cache_panel";
+  api.command?.register(() => [{
+    title: "Cache: Set Currency",
+    value: "cache.currency",
+    description: "Change the currency unit for cost display",
+    slash: {
+      name: "cache-currency"
+    },
+    onSelect: (dialog) => {
+      dialog?.replace(() => _$createComponent(api.ui.DialogSelect, {
+        title: "Select Currency",
+        get options() {
+          return Object.entries(CURRENCIES).map(([code, sym]) => ({
+            title: `${code}  (${sym})`,
+            value: code
+          }));
+        },
+        onSelect: (opt) => {
+          const sym = CURRENCIES[opt.value] ?? "$";
+          const defRate = DEFAULT_RATES[opt.value] ?? 1;
+          api.kv.set(`${KV_PREFIX}.currency`, sym);
+          api.kv.set(`${KV_PREFIX}.rate`, defRate);
+          signals.setCurrencySymbol(sym);
+          signals.setExchangeRate(defRate);
+          api.ui.toast({
+            message: `Currency: ${opt.value} (${sym}), rate: ${defRate}`
+          });
+          dialog?.clear();
+        }
+      }));
+    }
+  }, {
+    title: "Cache: Set Exchange Rate",
+    value: "cache.rate",
+    description: "Set the exchange rate multiplier for the selected currency",
+    slash: {
+      name: "cache-rate"
+    },
+    onSelect: (dialog) => {
+      dialog?.replace(() => _$createComponent(api.ui.DialogPrompt, {
+        title: "Exchange Rate",
+        description: () => (() => {
+          var _el$76 = _$createElement("text");
+          _$insertNode(_el$76, _$createTextNode(`Enter the exchange rate from USD to your currency (e.g. 7.2 for CNY)`));
+          return _el$76;
+        })(),
+        placeholder: "1.0",
+        get value() {
+          return String(api.kv.get(`${KV_PREFIX}.rate`, 1));
+        },
+        onConfirm: (val) => {
+          const n = parseFloat(val);
+          if (n > 0) {
+            api.kv.set(`${KV_PREFIX}.rate`, n);
+            signals.setExchangeRate(n);
+            api.ui.toast({
+              message: `Exchange rate set to ${n}`
+            });
+          }
+          dialog?.clear();
+        }
+      }));
+    }
+  }, {
+    title: "Cache: Toggle Section",
+    value: "cache.section",
+    description: "Show or hide a sidebar section",
+    slash: {
+      name: "cache-section"
+    },
+    onSelect: (dialog) => {
+      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(() => _$createComponent(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") {
+            const cur = Boolean(api.kv.get(`${KV_PREFIX}.border`, true));
+            api.kv.set(`${KV_PREFIX}.border`, !cur);
+            signals.setBorderVisible(!cur);
+            api.ui.toast({
+              message: `Panel border ${!cur ? "shown" : "hidden"}`
+            });
+          } else {
+            const key = `${KV_PREFIX}.section.${opt.value}`;
+            const cur = Boolean(api.kv.get(key, true));
+            api.kv.set(key, !cur);
+            if (opt.value === "detail") signals.setSectionDetail(!cur);
+            if (opt.value === "model") signals.setSectionModel(!cur);
+            if (opt.value === "dist") signals.setSectionDist(!cur);
+            if (opt.value === "skills") signals.setSectionSkills(!cur);
+            api.ui.toast({
+              message: `${opt.value} section ${!cur ? "shown" : "hidden"}`
+            });
+          }
+          dialog?.clear();
+        }
+      }));
+    }
+  }, {
+    title: "Cache: Show Config",
+    value: "cache.config",
+    description: "Display the current plugin configuration",
+    slash: {
+      name: "cache-config"
+    },
+    onSelect: (dialog) => {
+      const sym = api.kv.get(`${KV_PREFIX}.currency`) ?? "$";
+      const rate = api.kv.get(`${KV_PREFIX}.rate`) ?? 1;
+      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"}  |  Skills: ${skills ? "ON" : "OFF"}`,
+        duration: 8e3
+      });
+      dialog?.clear();
+    }
+  }, {
+    title: "Cache: Switch Language",
+    value: "cache.lang",
+    description: "Switch between Chinese and English display",
+    slash: {
+      name: "cache-lang"
+    },
+    onSelect: (dialog) => {
+      const cur = langZH();
+      dialog?.replace(() => _$createComponent(api.ui.DialogSelect, {
+        title: "Display Language",
+        options: [{
+          title: `\u4E2D\u6587    ${cur ? "\u2713" : ""}`,
+          value: "zh"
+        }, {
+          title: `English ${cur ? "" : "\u2713"}`,
+          value: "en"
+        }],
+        onSelect: (opt) => {
+          const zh = opt.value === "zh";
+          api.kv.set(`${KV_PREFIX}.lang`, opt.value);
+          setLangZH(zh);
+          api.ui.toast({
+            message: zh ? "\u8BED\u8A00\u5DF2\u5207\u6362\u4E3A\u4E2D\u6587" : "Switched to English"
+          });
+          dialog?.clear();
+        }
+      }));
+    }
+  }, {
+    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\u26A0 No skill tool parts found \u2014 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: 15e3
+      });
+    }
+  }]);
+};
+var mod = {
+  id: "opencode-visual-cache",
+  tui
+};
+var index_default = mod;
+export {
+  index_default as default
+};