opencode-go-usage-tui 1.1.0 → 1.3.0

package/src/index.tsx

@@ -10,10 +10,13 @@ import type {
 } from "@opencode-ai/plugin/tui"
 import { createSignal, createEffect, onMount, onCleanup, Show } from "solid-js"
 import type { JSX } from "@opentui/solid"
-import { readFileSync, writeFileSync, mkdirSync } from "node:fs"
+import { readFileSync, writeFileSync, mkdirSync, renameSync, existsSync } from "node:fs"
 import { join, dirname } from "node:path"
+import { createCipheriv, createDecipheriv, randomBytes } from "node:crypto"
 import { createT, detectLang, LANG_META } from "./i18n"
 import type { LangCode } from "./i18n"
+import { fetchPricing, comparePricing, loadPricingStore, updatePricingStore } from "./pricing"
+import type { ModelPrice, PricingData, PricingStore } from "./pricing"
 
 declare const process: { env: Record<string, string | undefined> } | undefined
 
@@ -24,35 +27,132 @@ const CONFIG_DIR = process?.env?.OPENCODE_CONFIG_DIR
   || (process?.env?.USERPROFILE ? `${process.env.USERPROFILE}\\.config\\opencode` : "")
   || process?.env?.HOME + "/.config/opencode"
 const CONFIG_FILE = join(CONFIG_DIR, "go-usage-config.json")
+const COOKIE_ENC_FILE = join(CONFIG_DIR, "go-auth-cookie.enc")
+const KEY_FILE = join(CONFIG_DIR, ".encryption-key")
+const COOKIE_PLAIN_FILE = `${CONFIG_DIR}\\go-auth-cookie.txt`
 const KV_PREFIX = "go-usage"
 
-function loadConfig(): { workspaceId: string; authCookie: string } {
-  const env = process?.env ?? {}
-  let fileCfg: Record<string, string> = {}
+// ── AES-256-GCM 加密存储 ────────────────────────────────
+// cookie 以密文存 go-auth-cookie.enc，密钥存 .encryption-key。
+// 注意：Windows 无 Unix 权限位，mode 0o600 仅对 macOS/Linux 生效；
+// Windows 上密钥与密文同目录，防护重点是"被动泄露"（备份/云同步/日志），
+// 无法抵御能读取该目录的本地恶意程序。
+function loadEncryptionKey(): Buffer {
   try {
-    fileCfg = JSON.parse(readFileSync(CONFIG_FILE, "utf8"))
-  } catch { fileCfg = {} }
-  const cookieFile = env.OPENCODE_GO_COOKIE_FILE || fileCfg.cookie_file || `${CONFIG_DIR}\\go-auth-cookie.txt`
-  let fileCookie = ""
+    const hex = readFileSync(KEY_FILE, "utf8").trim()
+    if (hex) return Buffer.from(hex, "hex")
+  } catch { /* 无密钥则新建 */ }
+  const key = randomBytes(32)
+  mkdirSync(dirname(KEY_FILE), { recursive: true })
+  writeFileSync(KEY_FILE, key.toString("hex"), { encoding: "utf8", mode: 0o600 })
+  return key
+}
+
+function encryptText(text: string): string {
+  const key = loadEncryptionKey()
+  const iv = randomBytes(16)
+  const cipher = createCipheriv("aes-256-gcm", key, iv)
+  const data = cipher.update(text, "utf8", "hex") + cipher.final("hex")
+  return JSON.stringify({ v: 1, iv: iv.toString("hex"), data, tag: cipher.getAuthTag().toString("hex") })
+}
+
+function decryptText(encJson: string): string {
+  const { iv, data, tag } = JSON.parse(encJson)
+  const key = loadEncryptionKey()
+  const decipher = createDecipheriv("aes-256-gcm", key, Buffer.from(iv, "hex"))
+  decipher.setAuthTag(Buffer.from(tag, "hex"))
+  return decipher.update(data, "hex", "utf8") + decipher.final("utf8")
+}
+
+function readJsonFile<T>(file: string): T | null {
+  try { return JSON.parse(readFileSync(file, "utf8")) as T } catch { return null }
+}
+
+interface ConfigFile { workspace_id?: string; cookie?: string; auth_cookie?: string; cookie_file?: string; ui?: { usage_panel?: boolean; price_panel?: boolean }; focus_models?: string[]; refresh_interval_sec?: number; pricing_interval_sec?: number }
+
+interface LoadedConfig { workspaceId: string; authCookie: string; usagePanel: boolean; pricePanel: boolean; focusModels: string[]; refreshIntervalMs: number; pricingIntervalMs: number }
+
+function loadConfig(): LoadedConfig {
+  const env = process?.env ?? {}
+  const fileCfg = readJsonFile<ConfigFile>(CONFIG_FILE) ?? {}
+
+  // 1. 环境变量优先
+  if (env.OPENCODE_GO_AUTH_COOKIE) {
+    return {
+      workspaceId: env.OPENCODE_GO_WORKSPACE_ID || fileCfg.workspace_id || "", authCookie: env.OPENCODE_GO_AUTH_COOKIE,
+      usagePanel: fileCfg.ui?.usage_panel ?? true, pricePanel: fileCfg.ui?.price_panel ?? true,
+      focusModels: fileCfg.focus_models ?? [], refreshIntervalMs: (fileCfg.refresh_interval_sec ?? Math.round(CHECK_INTERVAL / 1000)) * 1000,
+      pricingIntervalMs: (fileCfg.pricing_interval_sec ?? Math.round((CHECK_INTERVAL / 1000) * 30)) * 1000,
+    }
+  }
+
+  // 2. 加密存储
   try {
-    let p = cookieFile
-    if (p === "~") p = (env.HOME || env.USERPROFILE) + ""
-    else if (p.startsWith("~/")) p = (env.HOME || env.USERPROFILE || "") + p.slice(1)
-    fileCookie = readFileSync(p, "utf8").trim()
-  } catch { fileCookie = "" }
+    if (existsSync(COOKIE_ENC_FILE)) {
+      const cookie = decryptText(readFileSync(COOKIE_ENC_FILE, "utf8"))
+      if (cookie) {
+        return {
+          workspaceId: env.OPENCODE_GO_WORKSPACE_ID || fileCfg.workspace_id || "", authCookie: cookie,
+          usagePanel: fileCfg.ui?.usage_panel ?? true, pricePanel: fileCfg.ui?.price_panel ?? true,
+          focusModels: fileCfg.focus_models ?? [], refreshIntervalMs: (fileCfg.refresh_interval_sec ?? Math.round(CHECK_INTERVAL / 1000)) * 1000,
+          pricingIntervalMs: (fileCfg.pricing_interval_sec ?? Math.round((CHECK_INTERVAL / 1000) * 30)) * 1000,
+        }
+      }
+    }
+  } catch { /* 密文损坏时回退到明文迁移 */ }
+
+  // 3. 兼容旧明文（config.json 内嵌 cookie / auth_cookie / 独立 txt 文件）——自动迁移
+  const legacyCookie = fileCfg.auth_cookie || fileCfg.cookie || (() => {
+    try { return readFileSync(COOKIE_PLAIN_FILE, "utf8").trim() } catch { return "" }
+  })()
+  if (legacyCookie) {
+    const enc = encryptText(legacyCookie)
+    mkdirSync(CONFIG_DIR, { recursive: true })
+    writeFileSync(COOKIE_ENC_FILE, enc, "utf8")
+    // 清理旧明文
+    const cleanCfg: ConfigFile = { ...fileCfg }
+    delete cleanCfg.cookie
+    delete cleanCfg.auth_cookie
+    try { writeFileSync(CONFIG_FILE, JSON.stringify(cleanCfg, null, 2), "utf8") } catch { /* 忽略 */ }
+    try { if (existsSync(COOKIE_PLAIN_FILE)) renameSync(COOKIE_PLAIN_FILE, COOKIE_PLAIN_FILE + ".bak") } catch { /* 忽略 */ }
+    return {
+      workspaceId: env.OPENCODE_GO_WORKSPACE_ID || fileCfg.workspace_id || "", authCookie: legacyCookie,
+      usagePanel: fileCfg.ui?.usage_panel ?? true, pricePanel: fileCfg.ui?.price_panel ?? true,
+      focusModels: fileCfg.focus_models ?? [], refreshIntervalMs: (fileCfg.refresh_interval_sec ?? Math.round(CHECK_INTERVAL / 1000)) * 1000,
+      pricingIntervalMs: (fileCfg.pricing_interval_sec ?? Math.round((CHECK_INTERVAL / 1000) * 30)) * 1000,
+    }
+  }
+
   return {
-    workspaceId: env.OPENCODE_GO_WORKSPACE_ID || fileCfg.workspace_id || "",
-    authCookie: env.OPENCODE_GO_AUTH_COOKIE || fileCfg.auth_cookie || fileCfg.cookie || fileCookie,
+    workspaceId: env.OPENCODE_GO_WORKSPACE_ID || fileCfg.workspace_id || "", authCookie: "",
+    usagePanel: fileCfg.ui?.usage_panel ?? true, pricePanel: fileCfg.ui?.price_panel ?? true,
+    focusModels: fileCfg.focus_models ?? [], refreshIntervalMs: (fileCfg.refresh_interval_sec ?? Math.round(CHECK_INTERVAL / 1000)) * 1000,
+    pricingIntervalMs: (fileCfg.pricing_interval_sec ?? Math.round((CHECK_INTERVAL / 1000) * 30)) * 1000,
   }
 }
 
-function saveConfig(patch: { workspace_id?: string; cookie?: string }): void {
-  let fileCfg: Record<string, string> = {}
-  try {
-    fileCfg = JSON.parse(readFileSync(CONFIG_FILE, "utf8"))
-  } catch { fileCfg = {} }
+function saveConfig(patch: { workspace_id?: string; cookie?: string; ui?: { usage_panel?: boolean; price_panel?: boolean }; focus_models?: string[]; refresh_interval_sec?: number; pricing_interval_sec?: number }): void {
+  const fileCfg = readJsonFile<ConfigFile>(CONFIG_FILE) ?? {}
   if (patch.workspace_id !== undefined) fileCfg.workspace_id = patch.workspace_id
-  if (patch.cookie !== undefined) fileCfg.cookie = patch.cookie
+  if (patch.cookie !== undefined) {
+    // cookie 改为加密存储，不再写明文到 config.json
+    if (patch.cookie) {
+      mkdirSync(CONFIG_DIR, { recursive: true })
+      writeFileSync(COOKIE_ENC_FILE, encryptText(patch.cookie), "utf8")
+      delete fileCfg.cookie
+      delete fileCfg.auth_cookie
+      // 清理可能存在的旧明文 txt
+      try { if (existsSync(COOKIE_PLAIN_FILE)) renameSync(COOKIE_PLAIN_FILE, COOKIE_PLAIN_FILE + ".bak") } catch { /* 忽略 */ }
+    } else {
+      try { if (existsSync(COOKIE_ENC_FILE)) renameSync(COOKIE_ENC_FILE, COOKIE_ENC_FILE + ".bak") } catch { /* 忽略 */ }
+    }
+  }
+  if (patch.ui !== undefined) {
+    fileCfg.ui = { ...(fileCfg.ui ?? {}), ...patch.ui }
+  }
+  if (patch.focus_models !== undefined) fileCfg.focus_models = patch.focus_models
+  if (patch.refresh_interval_sec !== undefined) fileCfg.refresh_interval_sec = patch.refresh_interval_sec
+  if (patch.pricing_interval_sec !== undefined) fileCfg.pricing_interval_sec = patch.pricing_interval_sec
   try {
     mkdirSync(dirname(CONFIG_FILE), { recursive: true })
     writeFileSync(CONFIG_FILE, JSON.stringify(fileCfg, null, 2), "utf8")
@@ -66,6 +166,9 @@ const [configTick, setConfigTick] = createSignal(0)
 const [langCode, setLangCode] = createSignal<LangCode>(detectLang())
 const t = createT(() => langCode())
 
+// 模块级共享价格数据：PricePanel 抓取后写入，/go-settings 设置关注模型时读取
+const [sharedPricing, setSharedPricing] = createSignal<PricingData | null>(null)
+
 function kvTryGet(api: TuiPluginApi, key: string): string | undefined {
   try { return api.kv.get<string>(key) } catch { return undefined }
 }
@@ -80,7 +183,9 @@ interface Usage {
   error?: string
 }
 
-async function fetchUsage(workspaceId: string, authCookie: string): Promise<Usage | null> {
+const REQUEST_TIMEOUT = 10000
+
+async function fetchUsage(workspaceId: string, authCookie: string, signal?: AbortSignal): Promise<Usage | null> {
   if (!workspaceId || !authCookie) return { error: "not_configured" } as Usage
   try {
     const res = await fetch("https://opencode.ai/_server", {
@@ -97,6 +202,7 @@ async function fetchUsage(workspaceId: string, authCookie: string): Promise<Usag
         f: 31,
         m: [],
       }),
+      signal,
     })
     if (!res.ok) {
       if (res.status === 302) return { error: "cookie_expired" } as Usage
@@ -178,9 +284,21 @@ function GoUsagePanel(props: { theme: TuiThemeCurrent; api: TuiPluginApi }): JSX
   const [configured, setConfigured] = createSignal(true)
   const [lastUpdated, setLastUpdated] = createSignal("")
   const [panelWidth, setPanelWidth] = createSignal(24)
+  const [cfg, setCfg] = createSignal<LoadedConfig>(loadConfig())
+  createEffect(() => { void configTick(); setCfg(loadConfig()) })
   let boxEl: any
+  let abortController: AbortController | null = null
+  let timeoutId: ReturnType<typeof setTimeout> | null = null
+  let isRefreshing = false
+  let resizeTimeout: ReturnType<typeof setTimeout> | null = null
+
+  function cleanupPendingRequest() {
+    if (timeoutId) { clearTimeout(timeoutId); timeoutId = null }
+    if (abortController) { abortController.abort(); abortController = null }
+  }
 
   async function refresh() {
+    if (isRefreshing) return
     const cfg = loadConfig()
     if (!cfg.workspaceId || !cfg.authCookie) {
       setConfigured(false)
@@ -189,24 +307,39 @@ function GoUsagePanel(props: { theme: TuiThemeCurrent; api: TuiPluginApi }): JSX
       return
     }
     setConfigured(true)
-    const u = await fetchUsage(cfg.workspaceId, cfg.authCookie)
-    if (u === null) { setError(t("queryFailed")); return }
-    if (u.error === "cookie_expired") { setError(t("cookieExpired")); return }
-    if (u.error === "not_configured") { setConfigured(false); return }
-    setUsage(u)
-    setLastUpdated(new Date().toLocaleTimeString())
-    setError("")
+    cleanupPendingRequest()
+    abortController = new AbortController()
+    const signal = abortController.signal
+    timeoutId = setTimeout(() => abortController?.abort(), REQUEST_TIMEOUT)
+    isRefreshing = true
+    try {
+      const u = await fetchUsage(cfg.workspaceId, cfg.authCookie, signal)
+      if (signal.aborted) return
+      if (u === null) { setError(t("queryFailed")); return }
+      if (u.error === "cookie_expired") { setError(t("cookieExpired")); return }
+      if (u.error === "not_configured") { setConfigured(false); return }
+      setUsage(u)
+      setLastUpdated(new Date().toLocaleTimeString())
+      setError("")
+    } finally {
+      if (timeoutId) { clearTimeout(timeoutId); timeoutId = null }
+      isRefreshing = false
+    }
   }
 
   onMount(() => {
     refresh()
-    const timer = setInterval(refresh, CHECK_INTERVAL)
-    // 监听配置变更（/go-config 保存后）立即刷新
+    const timer = setInterval(refresh, loadConfig().refreshIntervalMs)
     const stopWatch = createEffect(() => {
       void configTick()
       refresh()
     })
-    onCleanup(() => { clearInterval(timer); stopWatch() })
+    onCleanup(() => {
+      clearInterval(timer)
+      stopWatch()
+      cleanupPendingRequest()
+      if (resizeTimeout) { clearTimeout(resizeTimeout); resizeTimeout = null }
+    })
   })
 
   const [pal, setPal] = createSignal<Record<string, string>>({ ...FALLBACK })
@@ -249,6 +382,176 @@ function GoUsagePanel(props: { theme: TuiThemeCurrent; api: TuiPluginApi }): JSX
 
   const sep = () => "\u2500".repeat(Math.max(1, panelWidth() - 4))
 
+  return (
+    <box
+      border
+      borderColor={colors().border}
+      paddingLeft={1}
+      paddingRight={1}
+      flexDirection="column"
+      gap={0}
+      ref={boxEl}
+        onSizeChange={() => {
+          if (resizeTimeout) clearTimeout(resizeTimeout)
+          resizeTimeout = setTimeout(() => {
+            const w = boxEl ? Math.max(20, boxEl.width ?? 24) : 24
+            setPanelWidth(w)
+          }, 100)
+        }}
+      >
+        <text onMouseUp={() => setOpen(o => !o)}>
+          <span style={{ fg: colors().muted }}>{open() ? "\u25bc " : "\u25b6 "}</span>
+          <span style={{ fg: colors().primary }}><b>{t("panelTitle")}</b></span>
+          <span style={{ fg: colors().muted }}> v{VERSION}</span>
+          <Show when={!open() && usage()}>
+            <span style={{ fg: colorFor(usage()!.weeklyUsage.usagePercent) }}>
+              {" ".repeat(2)}{t("weeklyShort")} {usage()!.weeklyUsage.usagePercent}%
+            </span>
+          </Show>
+        </text>
+
+        <Show when={open()}>
+          <text fg={colors().muted}>{sep()}</text>
+
+          <Show when={!configured()}>
+            <text fg={colors().warning}>{t("notConfigured")}</text>
+            <text fg={colors().muted}>{t("notConfiguredHint")}</text>
+          </Show>
+
+          <Show when={configured() && error()} fallback={
+            <Show when={configured() && usage()} fallback={
+              <Show when={configured()}><text fg={colors().muted}>{t("loading")}</text></Show>
+            }>
+              {renderRow(t("rowRolling"), usage()!.rollingUsage)}
+              {renderRow(t("rowWeekly"), usage()!.weeklyUsage)}
+              {renderRow(t("rowMonthly"), usage()!.monthlyUsage)}
+              <text>
+                <span style={{ fg: colors().muted }}>{t("updatedAt")} </span>
+                <span style={{ fg: colors().muted }}>{lastUpdated()}</span>
+              </text>
+            </Show>
+          }>
+            <text fg={colors().error}>{error()}</text>
+            <text fg={colors().muted}>{t("reconfigureHint")}</text>
+          </Show>
+        </Show>
+      </box>
+    )
+  }
+
+function PricePanel(props: { theme: TuiThemeCurrent; api: TuiPluginApi }): JSX.Element {
+  const [open, setOpen] = createSignal(true)
+  const [pricingStore, setPricingStore] = createSignal<PricingStore | null>(null)
+  const [priceError, setPriceError] = createSignal("")
+  const [priceLoading, setPriceLoading] = createSignal(false)
+  const [panelWidth, setPanelWidth] = createSignal(24)
+  const [cfg, setCfg] = createSignal<LoadedConfig>(loadConfig())
+  createEffect(() => { void configTick(); setCfg(loadConfig()) })
+  let boxEl: any
+  let priceController: AbortController | null = null
+
+  async function refreshPricing() {
+    if (priceLoading()) return
+    setPriceLoading(true)
+    setPriceError("")
+    priceController?.abort()
+    priceController = new AbortController()
+    try {
+      const data = await fetchPricing()
+      const store = updatePricingStore(data)
+      setSharedPricing(data)
+      setPricingStore(store)
+      const prev = store.previous
+      if (prev && prev.fetchTime !== data.fetchTime) {
+        const diff = comparePricing(prev, data)
+        if (diff.hasChanges) {
+          props.api.toast({
+            variant: "info",
+            title: t("priceChanged"),
+            message: t("priceChangesSummary", {
+              t: diff.summary.total,
+              a: diff.summary.added,
+              r: diff.summary.removed,
+              p: diff.summary.priceChanges,
+              l: diff.summary.limitChanges,
+            }),
+          })
+        }
+      }
+    } catch {
+      setPriceError(t("priceError"))
+    } finally {
+      setPriceLoading(false)
+      priceController = null
+    }
+  }
+
+  function formatCount(n: number): string {
+    if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, "") + "k"
+    return String(n)
+  }
+
+  function visualPadEnd(s: string, w: number): string {
+    const cur = visualWidth(s)
+    if (cur >= w) return s
+    return s + " ".repeat(w - cur)
+  }
+
+  function abbreviateName(name: string, maxLen: number): string {
+    if (visualWidth(name) <= maxLen) return name
+    let out = ""
+    let w = 0
+    for (const c of name) {
+      const cw = visualWidth(c)
+      if (w + cw > maxLen - 1) break
+      out += c
+      w += cw
+    }
+    return out + "…"
+  }
+
+  // visual-cache 风格：左标签 + 自动填充 + 右值
+  function justify(label: string, value: string): string {
+    const gauge = panelWidth() - 4
+    const used = visualWidth(label) + visualWidth(value)
+    const gap = Math.max(1, gauge - used)
+    return label + " ".repeat(gap) + value
+  }
+
+  function renderLimitRow(m: ModelPrice) {
+    const name = abbreviateName(m.name, 18)
+    const req = `${formatCount(m.limits.fiveHour)}/${formatCount(m.limits.weekly)}/${formatCount(m.limits.monthly)}`
+    return (
+      <text>
+        <span style={{ fg: colors().text }}>{justify(name, req)}</span>
+      </text>
+    )
+  }
+
+  const [pal, setPal] = createSignal<Record<string, string>>({ ...FALLBACK })
+  createEffect(() => {
+    const th = props.theme as any
+    const p: Record<string, string> = { ...FALLBACK }
+    for (const k of Object.keys(FALLBACK)) {
+      const h = hex(th?.[k])
+      if (h) p[k] = h
+    }
+    setPal(p)
+  })
+  const colors = () => pal()
+
+  const sep = () => "\u2500".repeat(Math.max(1, panelWidth() - 4))
+
+  setTimeout(() => {
+    const store = loadPricingStore()
+    if (store.current.models.length > 0) {
+      setSharedPricing(store.current)
+      setPricingStore(store)
+    }
+    refreshPricing()
+    setInterval(() => refreshPricing(), loadConfig().pricingIntervalMs)
+  }, 2000)
+
   return (
     <box
       border
@@ -259,50 +562,59 @@ function GoUsagePanel(props: { theme: TuiThemeCurrent; api: TuiPluginApi }): JSX
       gap={0}
       ref={boxEl}
       onSizeChange={() => {
-        const w = boxEl ? Math.max(20, boxEl.width ?? 24) : 24
-        setPanelWidth(w)
-      }}
-    >
+        if (resizeTimeout) clearTimeout(resizeTimeout)
+        resizeTimeout = setTimeout(() => {
+            const w = boxEl ? Math.max(20, boxEl.width ?? 24) : 24
+            setPanelWidth(w)
+          }, 100)
+        }}
+      >
       <text onMouseUp={() => setOpen(o => !o)}>
         <span style={{ fg: colors().muted }}>{open() ? "\u25bc " : "\u25b6 "}</span>
-        <span style={{ fg: colors().primary }}><b>{t("panelTitle")}</b></span>
-        <span style={{ fg: colors().muted }}> v{VERSION}</span>
-        <Show when={!open() && usage()}>
-          <span style={{ fg: colorFor(usage()!.weeklyUsage.usagePercent) }}>
-            {" ".repeat(2)}{t("weeklyShort")} {usage()!.weeklyUsage.usagePercent}%
-          </span>
+        <span style={{ fg: colors().primary }}><b>{t("priceTitle")}</b></span>
+        <Show when={sharedPricing()}>
+          <span style={{ fg: colors().muted }}> ({sharedPricing()!.models.length})</span>
         </Show>
+        <span style={{ fg: colors().muted }}>{sep().slice(visualWidth((open() ? "\u25bc " : "\u25b6 ") + t("priceTitle") + (sharedPricing() ? ` (${sharedPricing()!.models.length})` : "")))}</span>
       </text>
 
       <Show when={open()}>
+        <text fg={colors().muted}>
+          {justify(t("priceModelCol"), t("priceReqs"))}
+        </text>
         <text fg={colors().muted}>{sep()}</text>
 
-        <Show when={!configured()}>
-          <text fg={colors().warning}>{t("notConfigured")}</text>
-          <text fg={colors().muted}>{t("notConfiguredHint")}</text>
-        </Show>
-
-        <Show when={configured() && error()} fallback={
-          <Show when={configured() && usage()} fallback={
-            <Show when={configured()}><text fg={colors().muted}>{t("loading")}</text></Show>
+        <Show when={priceLoading() || !sharedPricing()} fallback={
+          <Show when={sharedPricing()} fallback={
+            <text fg={colors().muted}>{t("priceLoading")}</text>
           }>
-            {renderRow(t("rowRolling"), usage()!.rollingUsage)}
-            {renderRow(t("rowWeekly"), usage()!.weeklyUsage)}
-            {renderRow(t("rowMonthly"), usage()!.monthlyUsage)}
-            <text>
-              <span style={{ fg: colors().muted }}>{t("updatedAt")} </span>
-              <span style={{ fg: colors().muted }}>{lastUpdated()}</span>
+            {sharedPricing()!.models.filter((m) => {
+              return cfg().focusModels.length === 0 || cfg().focusModels.includes(m.id)
+            }).map((m) => renderLimitRow(m))}
+            <text fg={colors().muted}>
+              {justify(t("priceUpdated"), new Date(sharedPricing()!.fetchTime).toLocaleTimeString())}
             </text>
+            <Show when={pricingStore() && pricingStore()!.history.length > 0}>
+              <text fg={colors().warning}>
+                {t("priceChangesSummary", {
+                  t: pricingStore()!.history[0].summary.total,
+                  a: pricingStore()!.history[0].summary.added,
+                  r: pricingStore()!.history[0].summary.removed,
+                  p: pricingStore()!.history[0].summary.priceChanges,
+                  l: pricingStore()!.history[0].summary.limitChanges,
+                })}
+              </text>
+            </Show>
           </Show>
         }>
-          <text fg={colors().error}>{error()}</text>
-          <text fg={colors().muted}>{t("reconfigureHint")}</text>
+          <text fg={colors().muted}>{t("priceLoading")}</text>
         </Show>
       </Show>
     </box>
   )
 }
 
+
 function createSidebarSlot(api: TuiPluginApi): TuiSlotPlugin {
   return {
     order: 60,
@@ -314,6 +626,17 @@ function createSidebarSlot(api: TuiPluginApi): TuiSlotPlugin {
   }
 }
 
+function createPricingSlot(api: TuiPluginApi): TuiSlotPlugin {
+  return {
+    order: 61,
+    slots: {
+      sidebar_content(ctx: TuiSlotContext, _input: { session_id: string }): JSX.Element {
+        return <PricePanel theme={ctx.theme.current} api={api} />
+      },
+    },
+  }
+}
+
 function runConfigDialog(api: TuiPluginApi, dialog: any): void {
   dialog?.replace(() => (
     <api.ui.DialogPrompt
@@ -376,8 +699,124 @@ function runLangDialog(api: TuiPluginApi, dialog: any): void {
   ))
 }
 
+function runSettingsDialog(api: TuiPluginApi, dialog: any): void {
+  let lastSelected: string | undefined
+  const renderSettingsDialog = (dialog2: any) => {
+    const cfg = loadConfig()
+    const options = [
+      {
+        title: `${t("settingsFocus")} (${cfg.focusModels.length} 个)`,
+        value: "focus-models",
+      },
+      {
+        title: `${t("settingsRefreshUsage")} (${Math.round(cfg.refreshIntervalMs / 1000)}s)`,
+        value: "refresh-usage",
+      },
+      {
+        title: `${t("settingsRefreshPricing")} (${Math.round(cfg.pricingIntervalMs / 1000)}s)`,
+        value: "refresh-pricing",
+      },
+    ]
+    dialog2?.replace(() => (
+      <api.ui.DialogSelect
+        title={t("settingsTitle")}
+        options={options}
+        onSelect={(opt) => {
+          const value = opt.value
+          if (value === "focus-models") {
+            const renderFocusDialog = (dialog3: any) => {
+              const cur = loadConfig().focusModels
+              const allModels = sharedPricing()?.models ?? []
+              const modelOptions = allModels.map((m) => ({
+                title: `${cur.includes(m.id) ? "\u2611" : "\u2610"} ${m.name} (${m.pricing.input ?? "-"}/${m.pricing.output ?? "-"})`,
+                value: m.id,
+              }))
+              const focusOptions = [
+                ...modelOptions,
+                { title: `${t("focusAll")} (${cur.length} 个已选)`, value: "select-all" },
+                { title: t("focusNone"), value: "clear-all" },
+                { title: `${t("focusDone")} (${t("focusSelected", { n: cur.length })})`, value: "done" },
+              ]
+              dialog3?.replace(() => (
+                <api.ui.DialogSelect
+                  title={t("settingsFocus")}
+                  options={focusOptions}
+                  current={lastSelected}
+                  onSelect={(opt2) => {
+                    const v2 = opt2.value
+                    if (v2 === "done") {
+                      dialog3?.clear()
+                      renderSettingsDialog(dialog2)
+                    } else if (v2 === "select-all") {
+                      const all = allModels.map((m) => m.id)
+                      saveConfig({ focus_models: all })
+                      setConfigTick((v) => v + 1)
+                      api.ui.toast({ variant: "success", message: t("settingsSaved") })
+                      renderFocusDialog(dialog3)
+                    } else if (v2 === "clear-all") {
+                      saveConfig({ focus_models: [] })
+                      setConfigTick((v) => v + 1)
+                      api.ui.toast({ variant: "success", message: t("settingsSaved") })
+                      renderFocusDialog(dialog3)
+                    } else {
+                      const next = cur.includes(v2) ? cur.filter((id) => id !== v2) : [...cur, v2]
+                      saveConfig({ focus_models: next })
+                      setConfigTick((v) => v + 1)
+                      lastSelected = v2
+                      renderFocusDialog(dialog3)
+                    }
+                  }}
+                  onCancel={() => dialog3?.clear()}
+                />
+              ))
+            }
+            renderFocusDialog(dialog2)
+          } else if (value === "refresh-usage") {
+            dialog2?.replace(() => (
+              <api.ui.DialogPrompt
+                title={t("settingsRefreshUsage")}
+                description={() => <text>{"输入秒数（默认 60）"}</text>}
+                placeholder="60"
+                onConfirm={(val) => {
+                  const sec = Number(val.trim())
+                  if (!sec || sec <= 0) { dialog2?.clear(); return }
+                  saveConfig({ refresh_interval_sec: sec })
+                  setConfigTick((v) => v + 1)
+                  api.ui.toast({ variant: "success", message: t("settingsSaved") })
+                  renderSettingsDialog(dialog2)
+                }}
+                onCancel={() => dialog2?.clear()}
+              />
+            ))
+          } else if (value === "refresh-pricing") {
+            dialog2?.replace(() => (
+              <api.ui.DialogPrompt
+                title={t("settingsRefreshPricing")}
+                description={() => <text>{"输入秒数（默认 1800）"}</text>}
+                placeholder="1800"
+                onConfirm={(val) => {
+                  const sec = Number(val.trim())
+                  if (!sec || sec <= 0) { dialog2?.clear(); return }
+                  saveConfig({ pricing_interval_sec: sec })
+                  setConfigTick((v) => v + 1)
+                  api.ui.toast({ variant: "success", message: t("settingsSaved") })
+                  renderSettingsDialog(dialog2)
+                }}
+                onCancel={() => dialog2?.clear()}
+              />
+            ))
+          }
+        }}
+        onCancel={() => dialog2?.clear()}
+      />
+    ))
+  }
+  renderSettingsDialog(dialog)
+}
+
 const tui: TuiPlugin = async (api: TuiPluginApi) => {
   api.slots.register(createSidebarSlot(api))
+  api.slots.register(createPricingSlot(api))
 
   // 恢复已保存的语言；若无则按系统检测
   const savedLang = kvTryGet(api, `${KV_PREFIX}.lang`) as LangCode | undefined
@@ -409,6 +848,13 @@ const tui: TuiPlugin = async (api: TuiPluginApi) => {
       slash: { name: "go-lang" },
       onSelect: (dialog) => runLangDialog(api, dialog),
     },
+    {
+      title: t("settingsTitle"),
+      value: "go-usage.settings",
+      description: t("settingsDesc"),
+      slash: { name: "go-settings" },
+      onSelect: (dialog) => runSettingsDialog(api, dialog),
+    },
   ])
 }