opencode-go-usage-tui 1.2.0 → 1.3.1

package/src/index.tsx

@@ -15,6 +15,8 @@ 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
 
@@ -66,15 +68,22 @@ 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 }
+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 }
 
-function loadConfig(): { workspaceId: string; authCookie: string } {
+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 }
+    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. 加密存储
@@ -82,7 +91,12 @@ function loadConfig(): { workspaceId: string; authCookie: string } {
     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 }
+        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 { /* 密文损坏时回退到明文迁移 */ }
@@ -101,13 +115,23 @@ function loadConfig(): { workspaceId: string; authCookie: string } {
     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 }
+    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: "" }
+  return {
+    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 {
+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) {
@@ -123,6 +147,12 @@ function saveConfig(patch: { workspace_id?: string; cookie?: string }): void {
       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")
@@ -136,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 }
 }
@@ -150,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", {
@@ -167,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
@@ -177,7 +213,7 @@ async function fetchUsage(workspaceId: string, authCookie: string): Promise<Usag
       return { error: "cookie_expired" } as Usage
     }
     const extract = (key: string): { resetInSec: number; usagePercent: number } | null => {
-      const m = text.match(new RegExp(`${key}:[^}]*?\\{status:"ok",resetInSec:(\\d+),usagePercent:(\\d+)\\}`))
+      const m = text.match(new RegExp(`${key}:[^}]*?\\{status:"[^"]*",resetInSec:(\\d+),usagePercent:(\\d+)\\}`))
       if (!m) return null
       return { resetInSec: Number(m[1]), usagePercent: Number(m[2]) }
     }
@@ -248,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)
@@ -259,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 })
@@ -319,6 +382,188 @@ 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
+
+  // 强制同步 panelWidth 与 box 真实宽度（visual-cache 模式，避免首次不触发 onSizeChange）
+  createEffect(() => {
+    if (boxEl && typeof boxEl.width === "number" && boxEl.width > 0) {
+      setPanelWidth(Math.max(20, boxEl.width))
+    }
+  })
+
+  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 风格：左标签 + 自动填充 + 右值
+  // 直接读取 boxEl 实时宽度（避免 panelWidth 信号滞后）
+  function justify(label: string, value: string): string {
+    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)
+    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 = () => {
+    const outer = boxEl && typeof boxEl.width === "number" && boxEl.width > 0 ? boxEl.width : panelWidth()
+    return "\u2500".repeat(Math.max(1, outer - 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
@@ -329,50 +574,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,
@@ -384,6 +638,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
@@ -446,8 +711,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
@@ -479,6 +860,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),
+    },
   ])
 }