opencode-visual-cache 1.6.1 → 1.7.0-beta.0

package/dist/tui.js

@@ -1,19 +1,13 @@
 // 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.6.1";
+import { createTextNode as _$createTextNode2 } from "@opentui/solid";
+import { memo as _$memo2 } from "@opentui/solid";
+import { effect as _$effect2 } from "@opentui/solid";
+import { insertNode as _$insertNode2 } from "@opentui/solid";
+import { createComponent as _$createComponent2 } from "@opentui/solid";
+import { insert as _$insert2 } from "@opentui/solid";
+import { setProp as _$setProp2 } from "@opentui/solid";
+import { createElement as _$createElement2 } from "@opentui/solid";
+import { createMemo as createMemo2, createSignal as createSignal2, createEffect as createEffect2, onMount as onMount2, onCleanup as onCleanup2, Show as Show2, For, untrack as untrack2 } from "solid-js";
 
 // src/balance-providers.ts
 var BalanceError = class extends Error {
@@ -471,49 +465,7 @@ function detectLang() {
   }
 }
 
-// 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 visualPadEnd(s, cols) {
-  const pad = cols - visualWidth(s);
-  return pad > 0 ? s + " ".repeat(pad) : s;
-}
-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 INIT_LANG = DEBUG_LANG !== void 0 && LANG_META.some((m) => m.code === DEBUG_LANG) ? DEBUG_LANG : detectLang();
+// src/core/color.ts
 function rgb(raw) {
   if (typeof raw === "string" && raw.startsWith("#")) {
     const h = raw.slice(1);
@@ -584,6 +536,48 @@ var FALLBACK = {
   border: "#6B6B63"
 };
 var MAX_SAT = 0.28;
+
+// src/core/format.ts
+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 visualPadEnd(s, cols) {
+  const pad = cols - visualWidth(s);
+  return pad > 0 ? s + " ".repeat(pad) : s;
+}
+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;
+}
 function progressBar(percent, width) {
   const clamped = Math.max(0, Math.min(100, percent));
   const filled = Math.round(clamped / 100 * width);
@@ -604,50 +598,6 @@ function fmtCost(n, symbol = "$", rate = 1) {
   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 BALANCE_POLL_MS = 5 * 60 * 1e3;
-function convertBalance(target, targetRate, amount, from) {
-  if (from === target) return amount;
-  const fromRate = DEFAULT_RATES[from] ?? 1;
-  const usd = from === "USD" ? amount : amount / fromRate;
-  return target === "USD" ? usd : usd * targetRate;
-}
-function findOpencodeKey(api, provider) {
-  try {
-    const provs = api.state.provider;
-    const id = provider.id.toLowerCase();
-    const hit = provs.find((p) => p.id.toLowerCase() === id) ?? provs.find((p) => p.id.toLowerCase().startsWith(id));
-    if (!hit) return "";
-    const k = typeof hit.key === "string" ? hit.key : "";
-    if (k) return k;
-    return typeof hit.options?.apiKey === "string" ? hit.options.apiKey : "";
-  } catch {
-    return "";
-  }
-}
-function balanceSymbol(currency) {
-  const sym = CURRENCIES[currency];
-  return sym ?? currency + " ";
-}
 function fmtCompact(n) {
   if (n >= 1e6) return (n / 1e6).toFixed(1) + "M";
   if (n >= 1e3) return (n / 1e3).toFixed(1) + "K";
@@ -656,25 +606,11 @@ function fmtCompact(n) {
 function formatBalanceAmount(total) {
   const n = parseFloat(total);
   if (!Number.isFinite(n)) return total;
-  if (n === 0 || n >= 1) return n.toLocaleString("en-US", {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
-  });
-  return n.toLocaleString("en-US", {
-    maximumFractionDigits: 6
-  });
-}
-function formatBalanceText(list, pref, rate) {
-  const native = pref ? list.find((x) => x.currency === pref) : void 0;
-  if (native) return balanceSymbol(native.currency) + formatBalanceAmount(native.total);
-  const base = list[0];
-  const baseAmt = parseFloat(base.total);
-  const converted = Number.isFinite(baseAmt) ? convertBalance(pref || base.currency, rate, baseAmt, base.currency) : baseAmt;
-  const shown = pref && base.currency !== pref ? converted.toLocaleString("en-US", {
-    maximumFractionDigits: 2
-  }) : formatBalanceAmount(base.total);
-  return balanceSymbol(pref || base.currency) + shown;
+  if (n === 0 || n >= 1) return n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  return n.toLocaleString("en-US", { maximumFractionDigits: 6 });
 }
+
+// src/core/currency.ts
 var CURRENCIES = {
   USD: "$",
   CNY: "\xA5",
@@ -691,6 +627,66 @@ var DEFAULT_RATES = {
   GBP: 0.79,
   KRW: 1350
 };
+function convertBalance(target, targetRate, amount, from) {
+  if (from === target) return amount;
+  const fromRate = DEFAULT_RATES[from] ?? 1;
+  const usd = from === "USD" ? amount : amount / fromRate;
+  return target === "USD" ? usd : usd * targetRate;
+}
+function balanceSymbol(currency) {
+  const sym = CURRENCIES[currency];
+  return sym ?? currency + " ";
+}
+function formatBalanceText(list, pref, rate) {
+  const native = pref ? list.find((x) => x.currency === pref) : void 0;
+  if (native) return balanceSymbol(native.currency) + formatBalanceAmount(native.total);
+  const base = list[0];
+  const baseAmt = parseFloat(base.total);
+  const converted = Number.isFinite(baseAmt) ? convertBalance(pref || base.currency, rate, baseAmt, base.currency) : baseAmt;
+  const shown = pref && base.currency !== pref ? converted.toLocaleString("en-US", { maximumFractionDigits: 2 }) : formatBalanceAmount(base.total);
+  return balanceSymbol(pref || base.currency) + shown;
+}
+
+// src/core/estimate.ts
+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));
+}
+
+// src/panel/TokenCachePanel.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.7.0-beta.0";
+
+// src/panel/TokenCachePanel.tsx
 var MIN_PANEL_WIDTH = 20;
 var DEFAULT_PANEL_WIDTH = 26;
 var LABEL_GAP = 1;
@@ -707,6 +703,10 @@ function TokenCachePanel(props) {
   const [distOpen, setDistOpen] = createSignal(false);
   const [skillsOpen, setSkillsOpen] = createSignal(true);
   let boxEl;
+  createEffect(() => {
+    props.signals.setSidebarVisible(true);
+    onCleanup(() => props.signals.setSidebarVisible(false));
+  });
   const {
     currencySymbol,
     setCurrencySymbol,
@@ -1988,11 +1988,43 @@ function TokenCachePanel(props) {
     return _el$;
   })();
 }
+
+// src/index.tsx
+var DEBUG_LANG = typeof process !== "undefined" ? process.env?.CACHE_TUI_LANG : void 0;
+var INIT_LANG = DEBUG_LANG !== void 0 && LANG_META.some((m) => m.code === DEBUG_LANG) ? DEBUG_LANG : detectLang();
+var BALANCE_POLL_MS = 5 * 60 * 1e3;
+function findOpencodeKey(api, provider) {
+  try {
+    const provs = api.state.provider;
+    const id = provider.id.toLowerCase();
+    const hit = provs.find((p) => p.id.toLowerCase() === id) ?? provs.find((p) => p.id.toLowerCase().startsWith(id));
+    if (!hit) return "";
+    const k = typeof hit.key === "string" ? hit.key : "";
+    if (k) return k;
+    return typeof hit.options?.apiKey === "string" ? hit.options.apiKey : "";
+  } catch {
+    return "";
+  }
+}
+var PATH_CHROME = 2;
+var HIDE_PATH_BELOW = 14;
+function keyShortcut(api, command, fallback) {
+  try {
+    const binds = api.tuiConfig.keybinds.get(command);
+    const seq = binds?.map((b) => ({
+      key: b.key
+    }));
+    const s = api.keys.formatBindings(seq);
+    return s || fallback;
+  } catch {
+    return fallback;
+  }
+}
 function BottomStatusBar(props) {
   const KV_PREFIX = "cache_panel";
   const t = createT(() => props.signals.langCode());
   const sid = props.sessionId;
-  const stats = createMemo(() => {
+  const stats = createMemo2(() => {
     const id = sid;
     if (!id) return null;
     const msgs = props.api.state.session.messages(id);
@@ -2035,7 +2067,7 @@ function BottomStatusBar(props) {
       write
     };
   });
-  createEffect(() => {
+  createEffect2(() => {
     if (!props.signals.autoBalance()) return;
     const id = sid;
     if (!id) return;
@@ -2066,7 +2098,7 @@ function BottomStatusBar(props) {
       props.signals.setBalanceUnsupported(true);
     }
   });
-  const pal = createMemo(() => {
+  const pal = createMemo2(() => {
     const th = props.api.theme.current;
     const sat = (k, fb) => desaturateTo(th[k], MAX_SAT, fb);
     return {
@@ -2077,141 +2109,191 @@ function BottomStatusBar(props) {
       error: sat("error", FALLBACK.error)
     };
   });
-  const hitColor = createMemo(() => {
+  const hitColor = createMemo2(() => {
     const r = stats()?.hitRate ?? -1;
     if (r >= 85) return pal().success;
     if (r >= 70) return pal().warning;
     return pal().error;
   });
-  const trend = createMemo(() => {
+  const trend = createMemo2(() => {
     const s = stats();
     if (!s || s.prevHitRate < 0 || s.hitRate < 0) return null;
     const d = s.hitRate - s.prevHitRate;
     return Math.abs(d) < 0.05 ? null : d;
   });
-  const balanceText = createMemo(() => {
+  const balanceText = createMemo2(() => {
     const s = props.signals.balanceState();
     if (s.status === "ok" && s.data) return formatBalanceText(s.data, props.signals.balanceCurrency(), props.signals.exchangeRate());
     if (s.status === "loading") return "\u2026";
     if (s.status === "error") return "\u26A0";
     return "-";
   });
-  const directory = createMemo(() => {
+  const directory = createMemo2(() => {
     try {
       return props.api.state.path.directory;
     } catch {
       return "";
     }
   });
-  onMount(() => {
+  const [termW, setTermW] = createSignal2(props.api.renderer.terminalWidth);
+  createEffect2(() => {
+    const r = props.api.renderer;
+    if (typeof r.on !== "function" || typeof r.off !== "function") return;
+    const onResize = () => setTermW(props.api.renderer.terminalWidth);
+    r.on("resize", onResize);
+    onCleanup2(() => r.off("resize", onResize));
+  });
+  createEffect2(() => {
+    const timer = setInterval(() => setTermW(props.api.renderer.terminalWidth), 500);
+    onCleanup2(() => clearInterval(timer));
+  });
+  const statsSegs = createMemo2(() => {
+    const s = stats();
+    const hr = s && s.hitRate >= 0 ? (Math.floor(s.hitRate * 10) / 10).toFixed(1) + "%" : "--";
+    const segs = [{
+      text: t("barHit") + " ",
+      color: pal().muted
+    }, {
+      text: hr,
+      color: hitColor()
+    }];
+    const tr = trend();
+    if (tr !== null) {
+      segs.push({
+        text: " " + (tr > 0 ? "\u2191" : "\u2193") + Math.abs(tr).toFixed(1) + "%",
+        color: tr > 0 ? pal().success : pal().error
+      });
+    }
+    segs.push({
+      text: " \xB7 " + t("barTok") + " ",
+      color: pal().muted
+    });
+    segs.push({
+      text: s ? fmtCompact(s.input + s.read + s.write) : "--",
+      color: pal().text
+    });
+    if (!props.signals.balanceUnsupported()) {
+      segs.push({
+        text: " \xB7 " + t("barBal") + " ",
+        color: pal().muted
+      });
+      segs.push({
+        text: balanceText(),
+        color: pal().text
+      });
+    }
+    segs.push({
+      text: " \xB7 ",
+      color: pal().muted
+    });
+    return segs;
+  });
+  const statsW = createMemo2(() => {
+    let w = 0;
+    for (const sg of statsSegs()) w += visualWidth(sg.text);
+    return w;
+  });
+  const sessionCost = createMemo2(() => {
+    try {
+      return num(props.api.state.session.get(sid)?.cost);
+    } catch {
+      return 0;
+    }
+  });
+  const usageText = createMemo2(() => {
+    const id = sid;
+    if (!id) return "";
+    const msgs = props.api.state.session.messages(id);
+    let last;
+    for (let i = msgs.length - 1; i >= 0; i--) {
+      const m = msgs[i];
+      if (m.role !== "assistant") continue;
+      const tk2 = m.tokens;
+      if (tk2 && num(tk2.output) > 0) {
+        last = m;
+        break;
+      }
+    }
+    if (!last) return "";
+    const tk = last.tokens;
+    if (!tk) return "";
+    const tokens = num(tk.input) + num(tk.output) + num(tk.reasoning) + num(tk.cache?.read) + num(tk.cache?.write);
+    if (tokens <= 0) return "";
+    let pct = "";
+    try {
+      const p = props.api.state.provider.find((x) => x.id === last.providerID);
+      const limit = p?.models?.[last.modelID]?.limit?.context;
+      if (typeof limit === "number" && limit > 0) pct = ` (${Math.round(tokens / limit * 100)}%)`;
+    } catch {
+    }
+    const context = fmtCompact(tokens) + pct;
+    const cost = sessionCost();
+    return cost > 0 ? context + " \xB7 " + fmtCost(cost) : context;
+  });
+  const rightText = createMemo2(() => {
+    const cmds = keyShortcut(props.api, "command.palette.show", "ctrl+p") + " commands";
+    const u = usageText();
+    if (u) return u + " " + cmds;
+    return keyShortcut(props.api, "agent.cycle", "") + " agents " + cmds;
+  });
+  const rightW = createMemo2(() => visualWidth(rightText()));
+  const inputW = createMemo2(() => termW() - (props.signals.sidebarVisible() ? 42 : 0) - 4);
+  const dirDisplay = createMemo2(() => {
+    const avail = inputW() - statsW() - rightW() - PATH_CHROME;
+    if (avail < HIDE_PATH_BELOW) return "";
+    return truncateVisual(directory(), avail);
+  });
+  const dirFallback = createMemo2(() => {
+    const avail = inputW() - rightW() - PATH_CHROME;
+    if (avail < HIDE_PATH_BELOW) return "";
+    return truncateVisual(directory(), avail);
+  });
+  onMount2(() => {
     try {
       const v = props.api.kv.get(`${KV_PREFIX}.section.bottom`, true);
       props.signals.setSectionBottom(v !== false);
     } catch {
     }
   });
-  return _$createComponent(Show, {
+  return _$createComponent2(Show2, {
     get when() {
       return props.signals.sectionBottom();
     },
     get fallback() {
       return (() => {
-        var _el$111 = _$createElement("text");
-        _$insert(_el$111, directory);
-        _$effect((_$p) => _$setProp(_el$111, "fg", pal().muted, _$p));
-        return _el$111;
+        var _el$5 = _$createElement2("text");
+        _$insert2(_el$5, dirFallback);
+        _$effect2((_$p) => _$setProp2(_el$5, "fg", pal().muted, _$p));
+        return _el$5;
       })();
     },
     get children() {
-      var _el$97 = _$createElement("box"), _el$98 = _$createElement("text"), _el$99 = _$createElement("box"), _el$100 = _$createElement("text"), _el$101 = _$createElement("span"), _el$102 = _$createTextNode(` `), _el$103 = _$createElement("span"), _el$105 = _$createElement("span"), _el$106 = _$createElement("span"), _el$109 = _$createElement("text");
-      _$insertNode(_el$97, _el$98);
-      _$insertNode(_el$97, _el$99);
-      _$setProp(_el$97, "marginLeft", 1);
-      _$setProp(_el$97, "flexGrow", 1);
-      _$setProp(_el$97, "flexShrink", 0);
-      _$setProp(_el$97, "flexDirection", "row");
-      _$setProp(_el$97, "justifyContent", "space-between");
-      _$insert(_el$98, directory);
-      _$insertNode(_el$99, _el$100);
-      _$insertNode(_el$99, _el$109);
-      _$setProp(_el$99, "flexDirection", "row");
-      _$insertNode(_el$100, _el$101);
-      _$insertNode(_el$100, _el$103);
-      _$insertNode(_el$100, _el$105);
-      _$insertNode(_el$100, _el$106);
-      _$insertNode(_el$101, _el$102);
-      _$insert(_el$101, () => t("barHit"), _el$102);
-      _$insert(_el$103, (() => {
-        var _c$ = _$memo(() => (stats()?.hitRate ?? -1) >= 0);
-        return () => _c$() ? (Math.floor(stats().hitRate * 10) / 10).toFixed(1) + "%" : "--";
-      })());
-      _$insert(_el$100, _$createComponent(Show, {
-        get when() {
-          return trend() !== null;
+      var _el$ = _$createElement2("box"), _el$2 = _$createElement2("text"), _el$3 = _$createElement2("box"), _el$4 = _$createElement2("text");
+      _$insertNode2(_el$, _el$2);
+      _$insertNode2(_el$, _el$3);
+      _$setProp2(_el$, "marginLeft", 1);
+      _$setProp2(_el$, "flexGrow", 1);
+      _$setProp2(_el$, "flexShrink", 0);
+      _$setProp2(_el$, "flexDirection", "row");
+      _$setProp2(_el$, "justifyContent", "space-between");
+      _$insert2(_el$2, dirDisplay);
+      _$insertNode2(_el$3, _el$4);
+      _$setProp2(_el$3, "flexDirection", "row");
+      _$insert2(_el$4, _$createComponent2(For, {
+        get each() {
+          return statsSegs();
         },
-        get children() {
-          var _el$104 = _$createElement("span");
-          _$insert(_el$104, () => " " + (trend() > 0 ? "\u2191" : "\u2193") + Math.abs(trend()).toFixed(1) + "%");
-          _$effect((_$p) => _$setProp(_el$104, "style", {
-            fg: trend() > 0 ? pal().success : pal().error
+        children: (sg) => (() => {
+          var _el$6 = _$createElement2("span");
+          _$insert2(_el$6, () => sg.text);
+          _$effect2((_$p) => _$setProp2(_el$6, "style", {
+            fg: sg.color
           }, _$p));
-          return _el$104;
-        }
-      }), _el$105);
-      _$insert(_el$105, () => " \xB7 " + t("barTok") + " ");
-      _$insert(_el$106, (() => {
-        var _c$2 = _$memo(() => !!stats());
-        return () => _c$2() ? fmtCompact(stats().input + stats().read + stats().write) : "--";
-      })());
-      _$insert(_el$100, _$createComponent(Show, {
-        get when() {
-          return !props.signals.balanceUnsupported();
-        },
-        get children() {
-          return [(() => {
-            var _el$107 = _$createElement("span");
-            _$insert(_el$107, () => " \xB7 " + t("barBal") + " ");
-            _$effect((_$p) => _$setProp(_el$107, "style", {
-              fg: pal().muted
-            }, _$p));
-            return _el$107;
-          })(), (() => {
-            var _el$108 = _$createElement("span");
-            _$insert(_el$108, balanceText);
-            _$effect((_$p) => _$setProp(_el$108, "style", {
-              fg: pal().text
-            }, _$p));
-            return _el$108;
-          })()];
-        }
-      }), null);
-      _$insertNode(_el$109, _$createTextNode(` \xB7 `));
-      _$effect((_p$) => {
-        var _v$31 = pal().muted, _v$32 = {
-          fg: pal().muted
-        }, _v$33 = {
-          fg: hitColor()
-        }, _v$34 = {
-          fg: pal().muted
-        }, _v$35 = {
-          fg: pal().text
-        }, _v$36 = pal().muted;
-        _v$31 !== _p$.e && (_p$.e = _$setProp(_el$98, "fg", _v$31, _p$.e));
-        _v$32 !== _p$.t && (_p$.t = _$setProp(_el$101, "style", _v$32, _p$.t));
-        _v$33 !== _p$.a && (_p$.a = _$setProp(_el$103, "style", _v$33, _p$.a));
-        _v$34 !== _p$.o && (_p$.o = _$setProp(_el$105, "style", _v$34, _p$.o));
-        _v$35 !== _p$.i && (_p$.i = _$setProp(_el$106, "style", _v$35, _p$.i));
-        _v$36 !== _p$.n && (_p$.n = _$setProp(_el$109, "fg", _v$36, _p$.n));
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0,
-        a: void 0,
-        o: void 0,
-        i: void 0,
-        n: void 0
-      });
-      return _el$97;
+          return _el$6;
+        })()
+      }));
+      _$effect2((_$p) => _$setProp2(_el$2, "fg", pal().muted, _$p));
+      return _el$;
     }
   });
 }
@@ -2228,7 +2310,7 @@ function createSidebarSlot(api, signals) {
             api.kv.set("cache_panel.session", "");
           }
         }
-        return _$createComponent(TokenCachePanel, {
+        return _$createComponent2(TokenCachePanel, {
           get theme() {
             return ctx.theme.current;
           },
@@ -2243,23 +2325,24 @@ function createSidebarSlot(api, 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 [sectionBalance, setSectionBalance] = createSignal(true);
-  const [sectionBottom, setSectionBottom] = createSignal(true);
-  const [balanceRefresh, setBalanceRefresh] = createSignal(0);
-  const [balanceProviderId, setBalanceProviderId] = createSignal("deepseek");
-  const [autoBalance, setAutoBalance] = createSignal(true);
-  const [balanceUnsupported, setBalanceUnsupported] = createSignal(false);
-  const [balanceCurrency, setBalanceCurrency] = createSignal("");
-  const [borderVisible, setBorderVisible] = createSignal(true);
-  const [langCode, setLangCode] = createSignal(INIT_LANG);
-  const [overrideSessionId, setOverrideSessionId] = createSignal(void 0);
-  const [balanceState, setBalanceState] = createSignal({
+  const [currencySymbol, setCurrencySymbol] = createSignal2("$");
+  const [exchangeRate, setExchangeRate] = createSignal2(1);
+  const [sectionDetail, setSectionDetail] = createSignal2(true);
+  const [sectionModel, setSectionModel] = createSignal2(true);
+  const [sectionDist, setSectionDist] = createSignal2(true);
+  const [sectionSkills, setSectionSkills] = createSignal2(true);
+  const [sectionBalance, setSectionBalance] = createSignal2(true);
+  const [sectionBottom, setSectionBottom] = createSignal2(true);
+  const [balanceRefresh, setBalanceRefresh] = createSignal2(0);
+  const [balanceProviderId, setBalanceProviderId] = createSignal2("deepseek");
+  const [autoBalance, setAutoBalance] = createSignal2(true);
+  const [balanceUnsupported, setBalanceUnsupported] = createSignal2(false);
+  const [balanceCurrency, setBalanceCurrency] = createSignal2("");
+  const [borderVisible, setBorderVisible] = createSignal2(true);
+  const [langCode, setLangCode] = createSignal2(INIT_LANG);
+  const [overrideSessionId, setOverrideSessionId] = createSignal2(void 0);
+  const [sidebarVisible, setSidebarVisible] = createSignal2(false);
+  const [balanceState, setBalanceState] = createSignal2({
     status: "idle",
     data: null,
     lastFetch: 0
@@ -2298,14 +2381,16 @@ var tui = async (api) => {
     borderVisible,
     setBorderVisible,
     overrideSessionId,
-    setOverrideSessionId
+    setOverrideSessionId,
+    sidebarVisible,
+    setSidebarVisible
   };
   api.slots.register(createSidebarSlot(api, signals));
   api.slots.register({
     order: 55,
     slots: {
       session_prompt(_ctx, input) {
-        return _$createComponent(api.ui.Prompt, {
+        return _$createComponent2(api.ui.Prompt, {
           get sessionID() {
             return input.session_id;
           },
@@ -2319,11 +2404,11 @@ var tui = async (api) => {
             return input.on_submit;
           },
           ref(r$) {
-            var _ref$2 = input.ref;
-            typeof _ref$2 === "function" ? _ref$2(r$) : input.ref = r$;
+            var _ref$ = input.ref;
+            typeof _ref$ === "function" ? _ref$(r$) : input.ref = r$;
           },
           get hint() {
-            return _$createComponent(BottomStatusBar, {
+            return _$createComponent2(BottomStatusBar, {
               api,
               signals,
               get sessionId() {
@@ -2417,9 +2502,9 @@ var tui = async (api) => {
       });
     }
   };
-  createEffect(() => {
+  createEffect2(() => {
     void balanceRefresh();
-    untrack(() => {
+    untrack2(() => {
       void pollBalance();
     });
   });
@@ -2436,16 +2521,16 @@ var tui = async (api) => {
     const t = createT(() => langCode());
     const current = api.kv.get(`${KV_PREFIX}.balance.${provider.id}.key`, "");
     const masked = maskKey(current);
-    dialog?.replace(() => _$createComponent(api.ui.DialogPrompt, {
+    dialog?.replace(() => _$createComponent2(api.ui.DialogPrompt, {
       get title() {
         return provider.name;
       },
       description: () => (() => {
-        var _el$112 = _$createElement("text");
-        _$insert(_el$112, () => t("balKeyPrompt", {
+        var _el$7 = _$createElement2("text");
+        _$insert2(_el$7, () => t("balKeyPrompt", {
           p: provider.name
         }));
-        return _el$112;
+        return _el$7;
       })(),
       get placeholder() {
         return provider.keyPlaceholder ?? "sk-...";
@@ -2485,7 +2570,7 @@ var tui = async (api) => {
       name: "cache-currency"
     },
     onSelect: (dialog) => {
-      dialog?.replace(() => _$createComponent(api.ui.DialogSelect, {
+      dialog?.replace(() => _$createComponent2(api.ui.DialogSelect, {
         title: "Select Currency",
         get options() {
           return Object.entries(CURRENCIES).map(([code, sym]) => ({
@@ -2522,12 +2607,12 @@ var tui = async (api) => {
       name: "cache-rate"
     },
     onSelect: (dialog) => {
-      dialog?.replace(() => _$createComponent(api.ui.DialogPrompt, {
+      dialog?.replace(() => _$createComponent2(api.ui.DialogPrompt, {
         title: "Exchange Rate",
         description: () => (() => {
-          var _el$113 = _$createElement("text");
-          _$insertNode(_el$113, _$createTextNode(`Enter the exchange rate from USD to your currency (e.g. 7.2 for CNY)`));
-          return _el$113;
+          var _el$8 = _$createElement2("text");
+          _$insertNode2(_el$8, _$createTextNode2(`Enter the exchange rate from USD to your currency (e.g. 7.2 for CNY)`));
+          return _el$8;
         })(),
         placeholder: "1.0",
         get value() {
@@ -2575,7 +2660,7 @@ var tui = async (api) => {
         border: t("secBorder")
       };
       const optTitle = (label, on) => `${visualPadEnd(label, 15)}[${on ? "ON" : "OFF"}]`;
-      dialog?.replace(() => _$createComponent(api.ui.DialogSelect, {
+      dialog?.replace(() => _$createComponent2(api.ui.DialogSelect, {
         get title() {
           return t("secToggle");
         },
@@ -2676,7 +2761,7 @@ var tui = async (api) => {
     onSelect: (dialog) => {
       const t = createT(() => langCode());
       const cur = langCode();
-      dialog?.replace(() => _$createComponent(api.ui.DialogSelect, {
+      dialog?.replace(() => _$createComponent2(api.ui.DialogSelect, {
         get title() {
           return t("langTitle");
         },
@@ -2709,7 +2794,7 @@ var tui = async (api) => {
       const current = signals.balanceProviderId();
       const auto = signals.autoBalance();
       const autoLabel = `${t("autoSwitchOpt")} [${auto ? "ON" : "OFF"}]`;
-      dialog?.replace(() => _$createComponent(api.ui.DialogSelect, {
+      dialog?.replace(() => _$createComponent2(api.ui.DialogSelect, {
         get title() {
           return t("balProvTitle");
         },
@@ -2763,7 +2848,7 @@ var tui = async (api) => {
     },
     onSelect: (dialog) => {
       const t = createT(() => langCode());
-      dialog?.replace(() => _$createComponent(api.ui.DialogSelect, {
+      dialog?.replace(() => _$createComponent2(api.ui.DialogSelect, {
         get title() {
           return t("balSelectTitle");
         },
@@ -2905,7 +2990,7 @@ var tui = async (api) => {
           description: ""
         });
         const currentIdx = currentSid ? options.findIndex((o) => o.value === currentSid) : -1;
-        dialog?.replace(() => _$createComponent(api.ui.DialogSelect, {
+        dialog?.replace(() => _$createComponent2(api.ui.DialogSelect, {
           get title() {
             return t("subSelectTitle");
           },
@@ -2934,14 +3019,14 @@ var tui = async (api) => {
         }));
       } else {
         const t = createT(() => langCode());
-        dialog?.replace(() => _$createComponent(api.ui.DialogPrompt, {
+        dialog?.replace(() => _$createComponent2(api.ui.DialogPrompt, {
           get title() {
-            return _$memo(() => !!signals.overrideSessionId())() ? t("subSwitchTitle") : t("subViewTitle");
+            return _$memo2(() => !!signals.overrideSessionId())() ? t("subSwitchTitle") : t("subViewTitle");
           },
           description: () => (() => {
-            var _el$115 = _$createElement("text");
-            _$insert(_el$115, () => t("subNoFound"));
-            return _el$115;
+            var _el$0 = _$createElement2("text");
+            _$insert2(_el$0, () => t("subNoFound"));
+            return _el$0;
           })(),
           placeholder: "ses_...",
           get value() {