opencode-go-usage-tui 1.3.2 → 1.3.3

package/README.md

@@ -122,7 +122,7 @@ Cookie 有效期约 1 年，过期后重新获取。
 - **`/go-lang`**：切换 中文 / English
 - 用量超过阈值（默认 80%，可用 `OPENCODE_GO_WARN_THRESHOLD` 调整）显示为红色
 - 点击面板标题可折叠/展开
-- 面板标题显示当前插件版本号（如 `v1.3.2`）
+- 面板标题显示当前插件版本号（如 `v1.3.3`）
 
 ## 模型请求限额面板
 

package/README_EN.md

@@ -122,7 +122,7 @@ The cookie is valid for about 1 year; get a new one after it expires.
 - **`/go-lang`**: switch between 中文 / English
 - Usage above the threshold (default 80%, adjustable via `OPENCODE_GO_WARN_THRESHOLD`) is shown in red
 - Click the panel title to collapse/expand
-- The panel title shows the current plugin version (e.g. `v1.3.2`)
+- The panel title shows the current plugin version (e.g. `v1.3.3`)
 
 ## Model request limits panel
 

package/dist/tui.js

@@ -488,7 +488,7 @@ function updatePricingStore(newData) {
 }
 
 // src/index.tsx
-var VERSION = "1.3.2";
+var VERSION = "1.3.3";
 var CHECK_INTERVAL = Number(process?.env?.OPENCODE_GO_CHECK_INTERVAL ?? 6e4);
 var WARN_THRESHOLD = Number(process?.env?.OPENCODE_GO_WARN_THRESHOLD ?? 0.8);
 var CONFIG_DIR = process?.env?.OPENCODE_CONFIG_DIR || (process?.env?.USERPROFILE ? `${process.env.USERPROFILE}\\.config\\opencode` : "") || process?.env?.HOME + "/.config/opencode";
@@ -1105,9 +1105,30 @@ function PricePanel(props) {
   const [priceError, setPriceError] = createSignal("");
   const [priceLoading, setPriceLoading] = createSignal(false);
   const [panelWidth, setPanelWidth] = createSignal(24);
+  const [renderTick, setRenderTick] = createSignal(0);
+  const [listReady, setListReady] = createSignal(false);
+  createEffect(() => {
+    const p = sharedPricing();
+    if (p && p.models.length > 0) {
+      const id = setTimeout(() => setListReady(true), 150);
+      onCleanup(() => clearTimeout(id));
+    } else {
+      setListReady(false);
+    }
+  });
+  createEffect(() => {
+    if (!(listReady() && sharedPricing())) return;
+    const t1 = setTimeout(() => setRenderTick((v) => v + 1), 250);
+    const t2 = setTimeout(() => setRenderTick((v) => v + 1), 600);
+    const t3 = setTimeout(() => setRenderTick((v) => v + 1), 1e3);
+    onCleanup(() => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+      clearTimeout(t3);
+    });
+  });
   const [changedModels, setChangedModels] = createSignal(/* @__PURE__ */ new Map());
   const [expandedId, setExpandedId] = createSignal(null);
-  const [mounted, setMounted] = createSignal(false);
   const [cfg, setCfg] = createSignal(loadConfig());
   createEffect(() => {
     void configTick();
@@ -1115,14 +1136,23 @@ function PricePanel(props) {
   });
   let boxEl;
   let priceController = null;
+  let widthSyncTimer = null;
   onMount(() => {
-    setTimeout(() => setMounted(true), 100);
+    let tries = 0;
+    const syncWidth = () => {
+      tries++;
+      if (boxEl && typeof boxEl.width === "number" && boxEl.width > 0) {
+        setPanelWidth(Math.max(20, boxEl.width));
+        setRenderTick((v) => v + 1);
+        widthSyncTimer = setTimeout(() => setRenderTick((v) => v + 1), 150);
+        return;
+      }
+      if (tries < 50) widthSyncTimer = setTimeout(syncWidth, 80);
+    };
+    widthSyncTimer = setTimeout(syncWidth, 30);
   });
-  createEffect(() => {
-    mounted();
-    if (boxEl && typeof boxEl.width === "number" && boxEl.width > 0) {
-      setPanelWidth(Math.max(20, boxEl.width));
-    }
+  onCleanup(() => {
+    if (widthSyncTimer) clearTimeout(widthSyncTimer);
   });
   async function refreshPricing() {
     if (priceLoading()) return;
@@ -1188,6 +1218,7 @@ function PricePanel(props) {
     return out + "\u2026";
   }
   function justify(label, value) {
+    void renderTick();
     const outer = boxEl && typeof boxEl.width === "number" && boxEl.width > 0 ? boxEl.width : panelWidth();
     const gauge = Math.max(10, outer - 4);
     const used = visualWidth(label) + visualWidth(value);
@@ -1204,7 +1235,6 @@ function PricePanel(props) {
     const row = (() => {
       var _el$30 = _$createElement("text");
       _$setProp(_el$30, "fg", fg);
-      _$setProp(_el$30, "selectable", false);
       _$setProp(_el$30, "onMouseUp", (e) => {
         e.preventDefault();
         setExpandedId(expanded ? null : m.id);
@@ -1298,6 +1328,7 @@ function PricePanel(props) {
   });
   const colors = () => pal();
   const sep = () => {
+    void renderTick();
     const outer = boxEl && typeof boxEl.width === "number" && boxEl.width > 0 ? boxEl.width : panelWidth();
     return "\u2500".repeat(Math.max(1, outer - 4));
   };
@@ -1325,6 +1356,7 @@ function PricePanel(props) {
       resizeTimeout = setTimeout(() => {
         const w = boxEl ? Math.max(20, boxEl.width ?? 24) : 24;
         setPanelWidth(w);
+        setRenderTick((v) => v + 1);
       }, 100);
     });
     _$insertNode(_el$37, _el$38);
@@ -1383,9 +1415,9 @@ function PricePanel(props) {
                 })();
               },
               get children() {
-                return [_$memo(() => sharedPricing().models.filter((m) => {
+                return [_$memo(() => _$memo(() => !!listReady())() ? sharedPricing().models.filter((m) => {
                   return cfg().focusModels.length === 0 || cfg().focusModels.includes(m.id);
-                }).map((m) => renderLimitRow(m))), (() => {
+                }).map((m) => renderLimitRow(m)) : null), (() => {
                   var _el$48 = _$createElement("text");
                   _$insert(_el$48, () => justify(t("priceUpdated"), new Date(sharedPricing().fetchTime).toLocaleTimeString()));
                   _$effect((_$p) => _$setProp(_el$48, "fg", colors().muted, _$p));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-go-usage-tui",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "OpenCode TUI plugin displaying OpenCode Go usage in the sidebar",
   "type": "module",
   "exports": {

package/src/index.tsx

@@ -445,25 +445,62 @@ function PricePanel(props: { theme: TuiThemeCurrent; api: TuiPluginApi }): JSX.E
   const [priceError, setPriceError] = createSignal("")
   const [priceLoading, setPriceLoading] = createSignal(false)
   const [panelWidth, setPanelWidth] = createSignal(24)
+  // 渲染强制刷新计数：列表首帧常在数据到达使面板变高的瞬时布局中测量，留下
+  // "模型间空行"；该残留不会随盒子变宽自愈，但会在一次额外重渲染（重新测量文本
+  // 高度）后消失。故列表就绪后级联触发若干次 renderTick，强制重新测量每行高度。
+  const [renderTick, setRenderTick] = createSignal(0)
+  // 列表就绪标记：sharedPricing 数据到达那帧盒子常在重布局（数据使面板内容变高），
+  // 直接渲染列表会命中"未稳定测量"。故数据到达后延迟一帧再创建列表文本
+  const [listReady, setListReady] = createSignal(false)
+  createEffect(() => {
+    const p = sharedPricing()
+    if (p && p.models.length > 0) {
+      const id = setTimeout(() => setListReady(true), 150)
+      onCleanup(() => clearTimeout(id))
+    } else {
+      setListReady(false)
+    }
+  })
+  // 列表首帧常在"数据到达使面板变高"的瞬时布局中测量，留下"模型间空行"；
+  // 该残留不会随盒子变宽自愈，但会在一次额外重渲染（重新测量文本高度）后消失
+  // —— 即用户观察到的"展开任意行后空行消失"现象。故在列表就绪后再强制若干次
+  // 重渲染，让 @opentui 在稳定布局下重新测量每行高度，自愈空行。
+  createEffect(() => {
+    if (!(listReady() && sharedPricing())) return
+    const t1 = setTimeout(() => setRenderTick((v) => v + 1), 250)
+    const t2 = setTimeout(() => setRenderTick((v) => v + 1), 600)
+    const t3 = setTimeout(() => setRenderTick((v) => v + 1), 1000)
+    onCleanup(() => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3) })
+  })
   // 记录变化的模型：modelId -> 变化类别集合（added/pricing/limits），用于行高亮与颜色区分
   const [changedModels, setChangedModels] = createSignal<Map<string, Set<string>>>(new Map<string, Set<string>>())
   // 行内展开：当前展开的模型 id（单选 accordion）
   const [expandedId, setExpandedId] = createSignal<string | null>(null)
-  // 挂载后延迟校正：首帧 boxEl.width 尚未测量，布局完成后再触发一次重渲染以拿到真实宽度
-  const [mounted, setMounted] = createSignal(false)
   const [cfg, setCfg] = createSignal<LoadedConfig>(loadConfig())
   createEffect(() => { void configTick(); setCfg(loadConfig()) })
   let boxEl: any
   let priceController: AbortController | null = null
 
-  onMount(() => { setTimeout(() => setMounted(true), 100) })
-  // 强制同步 panelWidth 与 box 真实宽度（依赖 mounted，布局完成后重跑一次）
-  createEffect(() => {
-    mounted()
-    if (boxEl && typeof boxEl.width === "number" && boxEl.width > 0) {
-      setPanelWidth(Math.max(20, boxEl.width))
+  // 轮询等待布局就绪：首帧 boxEl.width 尚未测量（为 0）时文本会按临时窄宽度折行，
+// 产生"模型间空行"。单次延时可能早于布局完成而浪费唯一机会，故循环重试，
+  // 宽度就绪那一刻强制重渲染自愈（上限 50 次 × 80ms 防泄漏）
+  let widthSyncTimer: ReturnType<typeof setTimeout> | null = null
+  onMount(() => {
+    let tries = 0
+    const syncWidth = () => {
+      tries++
+      if (boxEl && typeof boxEl.width === "number" && boxEl.width > 0) {
+        setPanelWidth(Math.max(20, boxEl.width))
+        setRenderTick((v) => v + 1)
+        // 补一次延迟 tick：覆盖 onSizeChange 防抖窗口结束后的稳定态
+        widthSyncTimer = setTimeout(() => setRenderTick((v) => v + 1), 150)
+        return
+      }
+      if (tries < 50) widthSyncTimer = setTimeout(syncWidth, 80)
     }
+    widthSyncTimer = setTimeout(syncWidth, 30)
   })
+  onCleanup(() => { if (widthSyncTimer) clearTimeout(widthSyncTimer) })
 
   async function refreshPricing() {
     if (priceLoading()) return
@@ -534,6 +571,7 @@ function PricePanel(props: { theme: TuiThemeCurrent; api: TuiPluginApi }): JSX.E
   // visual-cache 风格：左标签 + 自动填充 + 右值
   // 直接读取 boxEl 实时宽度（避免 panelWidth 信号滞后）
   function justify(label: string, value: string): string {
+    void renderTick()
     const outer = boxEl && typeof boxEl.width === "number" && boxEl.width > 0 ? boxEl.width : panelWidth()
     const gauge = Math.max(10, outer - 4)
     const used = visualWidth(label) + visualWidth(value)
@@ -555,7 +593,7 @@ function PricePanel(props: { theme: TuiThemeCurrent; api: TuiPluginApi }): JSX.E
     // 行尾展开指示符（右对齐，不挤占名称列）
     const ind = expanded ? " \u25be" : " \u25b8"
     const row = (
-      <text fg={fg} selectable={false} onMouseUp={(e) => { e.preventDefault(); setExpandedId(expanded ? null : m.id) }}>
+      <text fg={fg} onMouseUp={(e) => { e.preventDefault(); setExpandedId(expanded ? null : m.id) }}>
         {justify(name, req + ind)}
       </text>
     )
@@ -643,6 +681,7 @@ function PricePanel(props: { theme: TuiThemeCurrent; api: TuiPluginApi }): JSX.E
   const colors = () => pal()
 
   const sep = () => {
+    void renderTick()
     const outer = boxEl && typeof boxEl.width === "number" && boxEl.width > 0 ? boxEl.width : panelWidth()
     return "\u2500".repeat(Math.max(1, outer - 4))
   }
@@ -671,6 +710,7 @@ function PricePanel(props: { theme: TuiThemeCurrent; api: TuiPluginApi }): JSX.E
         resizeTimeout = setTimeout(() => {
             const w = boxEl ? Math.max(20, boxEl.width ?? 24) : 24
             setPanelWidth(w)
+            setRenderTick((v) => v + 1)
           }, 100)
         }}
       >
@@ -693,9 +733,9 @@ function PricePanel(props: { theme: TuiThemeCurrent; api: TuiPluginApi }): JSX.E
           <Show when={sharedPricing()} fallback={
             <text fg={colors().muted}>{t("priceLoading")}</text>
           }>
-            {sharedPricing()!.models.filter((m) => {
+            {listReady() ? sharedPricing()!.models.filter((m) => {
               return cfg().focusModels.length === 0 || cfg().focusModels.includes(m.id)
-            }).map((m) => renderLimitRow(m))}
+            }).map((m) => renderLimitRow(m)) : null}
             <text fg={colors().muted}>
               {justify(t("priceUpdated"), new Date(sharedPricing()!.fetchTime).toLocaleTimeString())}
             </text>