@qthinker/opencode-deepseek-search 0.2.1 → 0.3.2

package/src/deepseek.ts

@@ -1,15 +1,23 @@
 // DeepSeek Search / Fetch HTTP core.
 //
 // Responsibilities: request shaping, retry policy, response mapping and
-// user-facing (Chinese) error messages. No plugin context and no storage here,
-// so every mapper below is unit-testable without network access.
+// user-facing error messages (rendered through the i18n tables). No plugin
+// context and no storage here, so every mapper below is unit-testable without
+// network access.
+
+import { t } from "./i18n/index.ts"
+import type { BalanceRead, Language } from "./rpc.ts"
 
 export const API_BASE = "https://api.deepseek.com"
 export const SEARCH_PATH = "/v1/tools/search"
 export const FETCH_PATH = "/v1/tools/fetch"
+// Account balance endpoint, per the official docs:
+// https://api-docs.deepseek.com/zh-cn/api/get-user-balance
+export const BALANCE_PATH = "/user/balance"
 
 export const SEARCH_TIMEOUT_MS = 15_000
 export const FETCH_TIMEOUT_MS = 30_000
+export const BALANCE_TIMEOUT_MS = 10_000
 const RETRY_DELAY_MS = 1_000
 const RETRY_DELAY_MAX_MS = 5_000
 export const MAX_QUERY_CHARS = 128
@@ -32,12 +40,8 @@ export interface FetchResult {
   truncated: boolean
 }
 
-export function missingKeyMessage(): string {
-  return (
-    "未配置 DeepSeek API Key：请设置环境变量 DEEPSEEK_API_KEY" +
-    '（PowerShell: [Environment]::SetEnvironmentVariable("DEEPSEEK_API_KEY","sk-...","User")），' +
-    '或在插件 options 中写 "apiKey": "{env:DEEPSEEK_API_KEY}"，然后重启 opencode。'
-  )
+export function missingKeyMessage(language: Language): string {
+  return t(language, "error.missingKey")
 }
 
 // ---------- abort plumbing: combine the caller signal with a timeout ----------
@@ -80,42 +84,43 @@ function sleep(ms: number, signal?: AbortSignal): Promise<void> {
 
 // ---------- error mapping ----------
 
-function upstreamMessage(body: string): string {
+function upstreamMessage(body: string, language: Language): string {
   try {
     const parsed = JSON.parse(body) as { error?: { message?: unknown } }
     const message = parsed?.error?.message
-    return typeof message === "string" && message.trim() ? `：${message.trim()}` : ""
+    if (typeof message !== "string" || !message.trim()) return ""
+    // The provider text is kept verbatim; only the separator is localized.
+    const separator = language === "en" ? ": " : "："
+    return `${separator}${message.trim()}`
   } catch {
     return ""
   }
 }
 
-export function httpError(status: number, body: string, isFetch: boolean): Error {
-  const upstream = upstreamMessage(body)
-  const fetchHint = isFetch ? " 可改用内置 webfetch 工具抓取该页面。" : ""
+export function httpError(status: number, body: string, isFetch: boolean, language: Language): Error {
+  const upstream = upstreamMessage(body, language)
+  const hint = isFetch ? t(language, "error.http.fetchHint") : ""
+  const params = { upstream, hint, status }
   switch (status) {
     case 400:
-      return new Error(`DeepSeek 请求参数无效（400）${upstream}。搜索词需 1~128 字符；Fetch 的 URL 需为合法的 http(s) 绝对地址。`)
+      return new Error(t(language, "error.http.400", params))
     case 401:
-      return new Error(`DeepSeek API Key 无效（401）${upstream}。请检查 DEEPSEEK_API_KEY 环境变量或 options.apiKey。`)
+      return new Error(t(language, "error.http.401", params))
     case 402:
-      return new Error("DeepSeek 账户余额不足（402），失败请求不计费。请充值后重试。")
+      return new Error(t(language, "error.http.402", params))
     case 403:
-      return new Error(`DeepSeek Fetch 被目标站点安全策略拒绝（403）${upstream}。${fetchHint}`)
+      return new Error(t(language, "error.http.403", params))
     case 404:
-      return new Error(`DeepSeek 无法提取该链接的正文（404）${upstream}。请确认链接可访问。${fetchHint}`)
+      return new Error(t(language, "error.http.404", params))
     case 408:
-      return new Error("DeepSeek 请求超时（408），已退避重试一次仍失败。请稍后重试。")
+      return new Error(t(language, "error.http.408", params))
     case 413:
-      return new Error("DeepSeek 请求体过大（413）。请缩短输入。")
+      return new Error(t(language, "error.http.413", params))
     case 429:
-      return new Error("DeepSeek 触发限速（429，账号级 Search 100 QPS / Fetch 25 QPS），已退避重试一次仍失败。请稍后再试。")
+      return new Error(t(language, "error.http.429", params))
     default:
-      if (status >= 500)
-        return new Error(
-          `DeepSeek 服务端错误（${status}），已退避重试一次仍失败。可把插件 options.mode 改为 "native" 暂用原生搜索。`,
-        )
-      return new Error(`DeepSeek 请求失败（HTTP ${status}）${upstream}`)
+      if (status >= 500) return new Error(t(language, "error.http.5xx", params))
+      return new Error(t(language, "error.http.other", params))
   }
 }
 
@@ -127,21 +132,28 @@ function retryAfterMs(headers: Headers): number {
 
 // ---------- shared HTTP core: timeout, signal passthrough, single retry ----------
 
-export async function postJson(
+async function requestJson(
+  method: "POST" | "GET",
   path: string,
   body: unknown,
   apiKey: string,
   timeoutMs: number,
+  language: Language,
   signal?: AbortSignal,
 ): Promise<unknown> {
-  if (!apiKey) throw new Error(missingKeyMessage())
+  if (!apiKey) throw new Error(missingKeyMessage(language))
   for (let attempt = 1; ; attempt++) {
     const merged = mergeAbort(signal, timeoutMs)
     try {
+      // GET reads a resource, so it sends no body and no content-type header.
+      const headers: Record<string, string> =
+        method === "POST"
+          ? { "content-type": "application/json", authorization: `Bearer ${apiKey}` }
+          : { authorization: `Bearer ${apiKey}` }
       const res = await fetch(`${API_BASE}${path}`, {
-        method: "POST",
-        headers: { "content-type": "application/json", authorization: `Bearer ${apiKey}` },
-        body: JSON.stringify(body),
+        method,
+        headers,
+        body: method === "POST" ? JSON.stringify(body) : undefined,
         signal: merged.signal,
       })
       if (res.ok) {
@@ -149,7 +161,7 @@ export async function postJson(
         try {
           return JSON.parse(text) as unknown
         } catch {
-          throw new Error(`DeepSeek 返回了无法解析的响应（HTTP ${res.status}）。请稍后重试。`)
+          throw new Error(t(language, "error.parse", { status: res.status }))
         }
       }
       const text = await res.text().catch(() => "")
@@ -157,18 +169,18 @@ export async function postJson(
         await sleep(retryAfterMs(res.headers), signal)
         continue
       }
-      throw httpError(res.status, text, path === FETCH_PATH)
+      throw httpError(res.status, text, path === FETCH_PATH, language)
     } catch (e) {
       if (e instanceof Error && e.name === "AbortError") {
         throw new Error(
           signal?.aborted
-            ? "DeepSeek 请求已取消。"
-            : `DeepSeek 请求超时（${Math.round(timeoutMs / 1000)} 秒），请重试。`,
+            ? t(language, "error.aborted")
+            : t(language, "error.timeout", { seconds: Math.round(timeoutMs / 1000) }),
         )
       }
       // fetch() rejects with TypeError on DNS/TLS/proxy failures.
       if (e instanceof TypeError) {
-        throw new Error(`无法连接 ${API_BASE}（网络错误：${e.message}）。请检查网络或代理设置。`)
+        throw new Error(t(language, "error.network", { base: API_BASE, message: e.message }))
       }
       throw e
     } finally {
@@ -177,6 +189,27 @@ export async function postJson(
   }
 }
 
+export function postJson(
+  path: string,
+  body: unknown,
+  apiKey: string,
+  timeoutMs: number,
+  language: Language,
+  signal?: AbortSignal,
+): Promise<unknown> {
+  return requestJson("POST", path, body, apiKey, timeoutMs, language, signal)
+}
+
+export function getJson(
+  path: string,
+  apiKey: string,
+  timeoutMs: number,
+  language: Language,
+  signal?: AbortSignal,
+): Promise<unknown> {
+  return requestJson("GET", path, undefined, apiKey, timeoutMs, language, signal)
+}
+
 // ---------- DeepSeek Search -> WebSearch.Result[] ----------
 
 interface SearchRow {
@@ -222,39 +255,53 @@ export async function deepseekSearch(
   query: string,
   apiKey: string,
   count: number,
+  language: Language,
   signal?: AbortSignal,
 ): Promise<SearchResult[]> {
-  const data = await postJson(SEARCH_PATH, buildSearchBody(query, count), apiKey, SEARCH_TIMEOUT_MS, signal)
+  const data = await postJson(
+    SEARCH_PATH,
+    buildSearchBody(query, count),
+    apiKey,
+    SEARCH_TIMEOUT_MS,
+    language,
+    signal,
+  )
   return mapSearchResults(data)
 }
 
 // ---------- DeepSeek Fetch -> Markdown with truncation ----------
 
-export function mapFetchResponse(data: unknown, url: string, maxChars: number): FetchResult {
+export function mapFetchResponse(
+  data: unknown,
+  url: string,
+  maxChars: number,
+  language: Language,
+): FetchResult {
   const title = typeof (data as { title?: unknown })?.title === "string" ? (data as { title: string }).title : ""
   const raw = typeof (data as { content?: unknown })?.content === "string" ? (data as { content: string }).content : ""
   const truncated = raw.length > maxChars
   let body = truncated ? raw.slice(0, maxChars) : raw
   if (truncated) {
-    body += `\n\n[DeepSeek Fetch 截断提示] 原文共 ${raw.length} 字符，超出上限 ${maxChars}，此处仅保留前 ${maxChars} 字符。`
+    body += `\n\n${t(language, "error.fetch.truncated", { raw: raw.length, max: maxChars })}`
   }
   return {
-    markdown: `# ${title || url}\n来源: ${url}\n\n${body}`,
+    markdown: `# ${title || url}\n${t(language, "fetch.source", { url })}\n\n${body}`,
     chars: raw.length,
     empty: raw.length === 0,
     truncated,
   }
 }
 
-export function validateUrl(url: string): string | undefined {
-  if (!/^https?:\/\//i.test(url)) return `无效 URL：「${url}」。DeepSeek Fetch 仅支持 http/https 绝对地址。`
-  if (url.length > MAX_URL_CHARS) return `URL 过长（${url.length} > ${MAX_URL_CHARS} 字符）。`
+export function validateUrl(url: string, language: Language): string | undefined {
+  if (!/^https?:\/\//i.test(url)) return t(language, "error.validate.urlScheme", { url })
+  if (url.length > MAX_URL_CHARS)
+    return t(language, "error.validate.urlLong", { length: url.length, max: MAX_URL_CHARS })
   try {
     const parsed = new URL(url)
-    if (!parsed.host) return `URL 缺少主机名：「${url}」。`
-    if (parsed.username || parsed.password) return "URL 不能包含用户名/密码（userinfo）。"
+    if (!parsed.host) return t(language, "error.validate.urlHost", { url })
+    if (parsed.username || parsed.password) return t(language, "error.validate.urlUserinfo")
   } catch {
-    return `无法解析 URL：「${url}」。`
+    return t(language, "error.validate.urlParse", { url })
   }
   return undefined
 }
@@ -263,15 +310,63 @@ export async function deepseekFetch(
   url: string,
   apiKey: string,
   maxChars: number,
+  language: Language,
   signal?: AbortSignal,
 ): Promise<FetchResult> {
-  const data = await postJson(FETCH_PATH, { url }, apiKey, FETCH_TIMEOUT_MS, signal)
-  return mapFetchResponse(data, url, maxChars)
+  const data = await postJson(FETCH_PATH, { url }, apiKey, FETCH_TIMEOUT_MS, language, signal)
+  return mapFetchResponse(data, url, maxChars, language)
+}
+
+// ---------- DeepSeek Balance -> BalanceRead ----------
+
+interface BalanceInfo {
+  currency?: unknown
+  total_balance?: unknown
+  granted_balance?: unknown
+  topped_up_balance?: unknown
+}
+
+function balanceText(value: unknown): string | undefined {
+  return typeof value === "string" && value.length > 0 ? value : undefined
+}
+
+// `/user/balance` lists one entry per currency. The plugin bills in CNY, so that
+// entry wins when present; anything else is accepted only as a fallback.
+export function mapBalance(data: unknown): BalanceRead | undefined {
+  if (typeof data !== "object" || data === null) return undefined
+  const raw = data as { is_available?: unknown; balance_infos?: unknown }
+  const isAvailable = raw.is_available
+  if (typeof isAvailable !== "boolean") return undefined
+  const infos = raw.balance_infos
+  if (!Array.isArray(infos) || infos.length === 0) return undefined
+  const rows = infos as Array<BalanceInfo | null | undefined>
+  const entry = rows.find((row) => row?.currency === "CNY") ?? rows[0]
+  const currency = entry?.currency
+  if (currency !== "CNY" && currency !== "USD") return undefined
+  const totalBalance = balanceText(entry?.total_balance)
+  const grantedBalance = balanceText(entry?.granted_balance)
+  const toppedUpBalance = balanceText(entry?.topped_up_balance)
+  if (!totalBalance || !grantedBalance || !toppedUpBalance) return undefined
+  return { isAvailable, currency, totalBalance, grantedBalance, toppedUpBalance }
+}
+
+export async function deepseekBalance(
+  apiKey: string,
+  language: Language,
+  signal?: AbortSignal,
+): Promise<BalanceRead> {
+  const data = await getJson(BALANCE_PATH, apiKey, BALANCE_TIMEOUT_MS, language, signal)
+  const balance = mapBalance(data)
+  // No localizable message on purpose: the balance cache swallows this error, so
+  // it is a diagnostic string rather than user-facing copy.
+  if (!balance) throw new Error("DeepSeek balance response is missing required fields")
+  return balance
 }
 
-export function validateQuery(query: string): string | undefined {
-  if (query.length === 0) return "搜索词为空：DeepSeek Search 需要非空 query（1~128 字符）。"
-  if (query.length > MAX_QUERY_CHARS) return `搜索词过长（${query.length} 字符，上限 ${MAX_QUERY_CHARS}），请精简后重试。`
+export function validateQuery(query: string, language: Language): string | undefined {
+  if (query.length === 0) return t(language, "error.validate.queryEmpty")
+  if (query.length > MAX_QUERY_CHARS)
+    return t(language, "error.validate.queryLong", { length: query.length, max: MAX_QUERY_CHARS })
   return undefined
 }
 

package/src/gui/index.tsx

@@ -14,6 +14,7 @@ import {
   type SessionPanelMenuItem,
 } from "@opencode/plugin/gui"
 import { createSignal } from "solid-js"
+import { t } from "../i18n/index.ts"
 import { DeepSeekRpc, readModeResult, readStatus, type SearchStatus } from "../rpc.ts"
 import { DeepSeekPanel } from "./panel.tsx"
 
@@ -30,19 +31,28 @@ export default Plugin.define({
     const [error, setError] = createSignal<string | undefined>()
     const [busy, setBusy] = createSignal(false)
 
+    // The desktop side has no forced locale: the server resolves the language
+    // and carries it in `status`, so every label follows that signal.
+    const language = () => status()?.language ?? "en"
+
     const describeError = (e: unknown) => (e instanceof Error ? e.message : String(e)).slice(0, ERROR_MAX)
 
     // `status` takes a required first argument: plain JSON Schema degrades the
     // input type to `unknown`, and the host validates the payload against the
     // method's object schema, so an omitted input is rejected as invalid.
-    async function refresh() {
+    //
+    // `force` asks the server to re-probe the account balance instead of serving
+    // the cache; only the panel's refresh button spends that request. The
+    // `changed` event sends `{}` exactly — an older server rejects unknown input
+    // properties, so a stray `force: false` would break it.
+    async function refresh(force = false) {
       try {
-        const next = readStatus(await rpc.status({}))
+        const next = readStatus(await rpc.status(force ? { force: true } : {}))
         if (next) {
           setStatus(next)
           setError(undefined)
         } else {
-          setError("状态数据格式不符")
+          setError(t(language(), "toast.statusMalformed"))
         }
       } catch (e) {
         setError(describeError(e))
@@ -53,7 +63,7 @@ export default Plugin.define({
       setBusy(true)
       try {
         const result = readModeResult(await rpc.setMode({ mode: next }))
-        if (!result) ctx.toast.show({ title: "DeepSeek", description: "模式切换结果格式不符", variant: "error" })
+        if (!result) ctx.toast.show({ title: "DeepSeek", description: t(language(), "toast.modeMalformed"), variant: "error" })
         else if (!result.ok) ctx.toast.show({ title: "DeepSeek", description: result.message, variant: "error" })
       } catch (e) {
         ctx.toast.show({ title: "DeepSeek", description: describeError(e), variant: "error" })
@@ -63,13 +73,14 @@ export default Plugin.define({
       }
     }
 
-    // Mirrors the TUI card: no status or a stale error rereads, otherwise
-    // switch. A missing key still allows releasing the takeover (the shared
-    // model hides the button only where there is genuinely nothing to do).
+    // Mirrors the TUI card: no status or a stale error rereads (a retry is a
+    // user action, so it also re-probes the balance), otherwise switch. A
+    // missing key still allows releasing the takeover (the shared model hides
+    // the button only where there is genuinely nothing to do).
     function toggle() {
       const current = status()
       if (!current || error()) {
-        void refresh()
+        void refresh(true)
         return
       }
       void applyMode(current.mode === "deepseek" ? "native" : "deepseek")
@@ -86,7 +97,7 @@ export default Plugin.define({
           error={error()}
           busy={busy()}
           onToggle={toggle}
-          onRefresh={() => void refresh()}
+          onRefresh={(force) => void refresh(force)}
         />
       ),
     })
@@ -96,18 +107,20 @@ export default Plugin.define({
     const openPanel = () => {
       const session = ctx.sessions.current()
       if (!session) {
-        ctx.toast.show({ title: "DeepSeek", description: "请先打开一个会话" })
+        ctx.toast.show({ title: "DeepSeek", description: t(language(), "toast.openSessionFirst") })
         return
       }
       ctx.layout.open(`${ctx.id}:main`, session)
     }
 
-    ctx.add(Command, {
+    // A factory, because the palette label has to follow the language that
+    // arrives with the status signal.
+    ctx.add(Command, (): Command => ({
       id: "open",
-      title: "DeepSeek: 打开统计面板",
+      title: t(language(), "command.open"),
       section: "session",
       run: openPanel,
-    })
+    }))
 
     // The new-tab launcher and the + menu list `session.panel` items, not panel
     // tabs, so without this the panel is reachable only by typing the command.
@@ -119,7 +132,7 @@ export default Plugin.define({
         menu: "session.panel",
         id: "open",
         title: "DeepSeek",
-        description: "搜索用量与接管开关",
+        description: t(language(), "menu.description"),
         icon: "globe",
         order: 60,
         opened,

package/src/gui/panel.tsx

@@ -3,15 +3,21 @@
 import type { JSX } from "solid-js"
 import { For, Show, createMemo, onCleanup, onMount } from "solid-js"
 import { usePlugin } from "@opencode/plugin/gui"
-import type { SearchStatus } from "../rpc.ts"
-import { sidebarRows, type SidebarRows } from "../status-view.ts"
+import { t, type Key } from "../i18n/index.ts"
+import type { BalanceStatus, Language, SearchStatus } from "../rpc.ts"
+import { CURRENCY_SYMBOL, sidebarRows, type SidebarRows } from "../status-view.ts"
 
 export interface DeepSeekPanelProps {
   readonly status: SearchStatus | undefined
   readonly error: string | undefined
   readonly busy: boolean
   readonly onToggle: () => void
-  readonly onRefresh: () => void
+  /**
+   * `force` re-probes the server's balance cache; only a user action (the
+   * refresh button) may set it. The 10s poll timer calls it bare, so the
+   * automatic path keeps sending `{}` and never bypasses the server TTL.
+   */
+  readonly onRefresh: (force?: boolean) => void
 }
 
 type Tone = SidebarRows["tone"]
@@ -28,9 +34,9 @@ const INK = {
   light: { on: "#1e7a4c", warn: "#8a5f08", error: "#b03931", off: "#6b7076", idle: "#6b7076", rule: "rgba(0,0,0,0.13)" },
 } as const
 
-const LABEL: Readonly<Record<Tone, string>> = {
-  on: "停用（交还原生搜索）", off: "启用（由 DeepSeek 接管）",
-  warn: "交还原生搜索", error: "重试", idle: "重试",
+const LABEL_KEY: Readonly<Record<Tone, Key>> = {
+  on: "panel.label.on", off: "panel.label.off",
+  warn: "panel.label.warn", error: "panel.label.error", idle: "panel.label.idle",
 }
 
 const ICON = { on: "arrow-undo-down", off: "globe", warn: "arrow-undo-down", error: "refresh", idle: "refresh" } as const
@@ -66,12 +72,42 @@ function help(action: string, mono: string): JSX.Element {
   )
 }
 
+/**
+ * The balance tooltip carries the granted/topped-up split, because those are the
+ * two numbers behind the total. It is skipped when only one component is
+ * non-zero: there it would just restate the total. The currency code rides
+ * along only for USD, whose `$` needs no introduction.
+ */
+function balanceTip(balance: BalanceStatus, language: Language): string | undefined {
+  const hasGranted = Number.parseFloat(balance.grantedBalance) > 0
+  const hasTopped = Number.parseFloat(balance.toppedUpBalance) > 0
+  if (!hasGranted || !hasTopped) return undefined
+  const text = t(language, "balance.breakdown", { granted: balance.grantedBalance, topped: balance.toppedUpBalance })
+  return balance.currency === "USD" ? `${text} (USD)` : text
+}
+
 export function DeepSeekPanel(props: DeepSeekPanelProps): JSX.Element {
   const ctx = usePlugin()
-  const rows = createMemo(() => sidebarRows({ status: props.status, error: props.error, maxColumns: Infinity }))
+  // The desktop plugin has no forced locale: the server resolves one and carries
+  // it in `status`. The first frame has no status and renders the loader, so the
+  // fallback only ever shows that.
+  const language = () => props.status?.language ?? "en"
+  const rows = createMemo(() => sidebarRows({ status: props.status, error: props.error, maxColumns: Infinity, language: language() }))
   const ink = createMemo(() => INK[ctx.appearance.mode()])
   const mono = () => ctx.appearance.font("mono")
 
+  /**
+   * The account block mirrors the view model's own emit condition (enabled or
+   * native mode), so `rows().lines` ends with the balance row exactly when
+   * this is defined and the usage table must stop before it. The block renders
+   * from the structured payload, not from re-parsing the line.
+   */
+  const balance = createMemo<BalanceStatus | undefined>(() => {
+    const account = props.status?.balance
+    if (account === undefined || (rows().tone !== "on" && rows().tone !== "off")) return undefined
+    return account
+  })
+
   // Cross-half `changed` delivery is the one runtime behaviour this repo cannot
   // verify, so the panel rereads on its own timer while it is mounted — the same
   // fallback the TUI sidebar uses.
@@ -89,14 +125,14 @@ export function DeepSeekPanel(props: DeepSeekPanelProps): JSX.Element {
       }}
     >
       <header style={{ display: "flex", "align-items": "flex-start", gap: "8px" }}>
-        <span aria-hidden="true" style={{ "flex-shrink": 0, "font-size": "10px", "line-height": "20px", "font-weight": 700, color: ink()[rows().tone] }}>
+        <span aria-hidden="true" style={{ "flex-shrink": 0, "font-size": "12px", "line-height": "20px", width: "12px", "text-align": "center", "font-weight": 700, color: ink()[rows().tone] }}>
           {GLYPH[rows().tone]}
         </span>
         <h2 aria-live="polite" style={{ flex: 1, "min-width": 0, margin: 0, "font-size": "13px", "font-weight": 600, "line-height": "20px", "overflow-wrap": "anywhere" }}>
           {headline(rows().title, ink()[rows().tone])}
         </h2>
-        <ctx.ui.Tooltip value="刷新用量" placement="bottom">
-          <ctx.ui.IconButton icon="refresh" label="刷新用量" size="small" onClick={props.onRefresh} />
+        <ctx.ui.Tooltip value={t(language(), "panel.tooltip.refresh")} placement="bottom">
+          <ctx.ui.IconButton icon="refresh" label={t(language(), "panel.tooltip.refresh")} size="small" onClick={() => props.onRefresh(true)} />
         </ctx.ui.Tooltip>
       </header>
 
@@ -106,36 +142,71 @@ export function DeepSeekPanel(props: DeepSeekPanelProps): JSX.Element {
         ) : (
           <div style={{ display: "flex", "align-items": "center", gap: "8px", "margin-top": "14px", opacity: 0.7 }}>
             <ctx.ui.Loader size="small" />
-            <span style={{ "font-size": "12px" }}>正在读取用量…</span>
+            <span style={{ "font-size": "12px" }}>{t(language(), "panel.loading")}</span>
           </div>
         )
       ) : (
         <dl style={{ margin: "16px 0 0", "border-top": `1px solid ${ink().rule}`, "border-bottom": `1px solid ${ink().rule}` }}>
-          <For each={rows().lines}>
+          <For each={balance() !== undefined ? rows().lines.slice(0, -1) : rows().lines}>
             {(line, index) => {
               const parts = splitLine(line)
               return (
                 <div style={{ display: "flex", "align-items": "baseline", gap: "12px", padding: "10px 0", "border-top": index() > 0 ? `1px solid ${ink().rule}` : undefined }}>
-                  <dt style={{ "flex-shrink": 0, "font-size": "11px", "letter-spacing": "0.08em", "line-height": "1.9", opacity: 0.62 }}>
+                  <dt style={{ "flex-shrink": 0, "font-size": "11px", "letter-spacing": /^[\x20-\x7E]+$/.test(parts.label) ? "0.08em" : undefined, "line-height": "1.9", opacity: 0.62 }}>
                     {parts.label}
                   </dt>
                   <dd style={{
                     margin: 0, "margin-left": "auto", "min-width": 0, display: "flex", "flex-wrap": "wrap", "justify-content": "flex-end",
-                    "column-gap": "6px", "row-gap": "2px", "font-family": mono(), "font-size": "13px", "line-height": "1.55",
+                    "column-gap": "10px", "row-gap": "2px", "font-family": mono(), "font-size": "13px", "line-height": "1.55",
                     "font-variant-numeric": "tabular-nums", "text-align": "right",
                   }}>
                     <For each={parts.chunks}>
-                      {(chunk, i) => (
-                        <span style={{ "min-width": 0, "overflow-wrap": "anywhere", "font-weight": chunk.startsWith("¥") ? 500 : 400, opacity: chunk.startsWith("¥") ? 1 : 0.8 }}>
-                          {chunk}{i() < parts.chunks.length - 1 ? " ·" : ""}
-                        </span>
-                      )}
+                      {(chunk) => {
+                        // A money chunk must never wrap apart from its digits, and
+                        // it is the only chunk that reads at full weight.
+                        const money = /^[¥$]/.test(chunk)
+                        return (
+                          <span style={{ "min-width": 0, "overflow-wrap": "anywhere", "font-weight": money ? 500 : 400, opacity: money ? 1 : 0.8, "flex-shrink": money ? 0 : undefined }}>
+                            {chunk}
+                          </span>
+                        )
+                      }}
                     </For>
                   </dd>
                 </div>
               )
             }}
           </For>
+          {/* The account block closes the table like a receipt: the usage rows
+              above are local estimates for this machine, the balance under them
+              is the authoritative amount still on the account. */}
+          <Show when={balance()} keyed>
+            {(account) => {
+              const label = t(language(), "balance.label")
+              const tip = balanceTip(account, language())
+              const amount = (
+                <dd style={{
+                  margin: 0, "margin-left": "auto", "font-family": mono(), "font-size": "14px", "line-height": "1.55",
+                  "font-variant-numeric": "tabular-nums", "text-align": "right", "font-weight": 500, "flex-shrink": 0,
+                  color: account.isAvailable ? undefined : ink().warn,
+                }}>
+                  {CURRENCY_SYMBOL[account.currency] ?? ""}{account.totalBalance}
+                </dd>
+              )
+              return (
+                <div style={{ display: "flex", "align-items": "baseline", gap: "12px", padding: "10px 0 4px", "border-top": `1px solid ${ink().rule}` }}>
+                  <dt style={{ "flex-shrink": 0, "font-size": "11px", "letter-spacing": /^[\x20-\x7E]+$/.test(label) ? "0.08em" : undefined, "line-height": "1.9", opacity: 0.62 }}>
+                    {label}
+                  </dt>
+                  {tip !== undefined ? (
+                    <ctx.ui.Tooltip value={tip} placement="bottom">{amount}</ctx.ui.Tooltip>
+                  ) : (
+                    amount
+                  )}
+                </div>
+              )
+            }}
+          </Show>
         </dl>
       )}
 
@@ -145,7 +216,7 @@ export function DeepSeekPanel(props: DeepSeekPanelProps): JSX.Element {
       <Show when={rows().clickable && rows().tone !== "idle"}>
         <div style={{ "margin-top": "18px" }}>
           <ctx.ui.Button variant={rows().tone === "off" || rows().tone === "error" ? "contrast" : "neutral"} icon={ICON[rows().tone]} disabled={props.busy} busy={props.busy} onClick={props.onToggle}>
-            {LABEL[rows().tone]}
+            {t(language(), LABEL_KEY[rows().tone])}
           </ctx.ui.Button>
         </div>
       </Show>