@rezti/dsh-rez-suite 0.1.26 → 0.1.33

package/src/client/panel/AuditTab.tsx

@@ -5,10 +5,11 @@
 import { useEffect, useState } from 'react'
 import type { RezApi } from '../api.ts'
 import type { RezAuditResponse } from '../../protocol.ts'
-import { errorMessage, tt } from './helpers.ts'
+import { errorMessage, useT } from './helpers.ts'
 import css from './panel.module.css'
 
 export function AuditTab({ api }: { api: RezApi }) {
+  const t = useT()
   const [audit, setAudit] = useState<RezAuditResponse | null>(null)
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(true)
@@ -28,7 +29,7 @@ export function AuditTab({ api }: { api: RezApi }) {
   useEffect(() => { void load() }, [])
 
   const reset = async (): Promise<void> => {
-    if (!window.confirm(tt('audit.resetConfirm'))) return
+    if (!window.confirm(t('audit.resetConfirm'))) return
     try {
       await api.resetAudit()
       await load()
@@ -37,38 +38,38 @@ export function AuditTab({ api }: { api: RezApi }) {
     }
   }
 
-  if (loading) return <div className={css.message}>{tt('common.loading')}</div>
+  if (loading) return <div className={css.message}>{t('common.loading')}</div>
   if (audit === null) return <div className={css.error}>{error}</div>
 
   return (
     <div className={css.tabBody}>
       <div className={css.toolbar}>
-        <button type="button" className={css.button} onClick={() => { void load() }}>{tt('common.refresh')}</button>
-        <button type="button" className={css.button + ' ' + css.dangerButton} onClick={() => { void reset() }}>{tt('audit.reset')}</button>
+        <button type="button" className={css.button} onClick={() => { void load() }}>{t('common.refresh')}</button>
+        <button type="button" className={css.button + ' ' + css.dangerButton} onClick={() => { void reset() }}>{t('audit.reset')}</button>
       </div>
       {error !== '' && <div className={css.error}>{error}</div>}
       <div className={css.cards}>
-        <div className={css.stat}><div className={css.cardLabel}>{tt('audit.totalCalls')}</div><div className={css.cardValue}>{audit.totalCalls}</div></div>
-        <div className={css.stat}><div className={css.cardLabel}>{tt('audit.inputTokens')}</div><div className={css.cardValue}>{audit.totalInputTokens}</div></div>
-        <div className={css.stat}><div className={css.cardLabel}>{tt('audit.outputTokens')}</div><div className={css.cardValue}>{audit.totalOutputTokens}</div></div>
-        <div className={css.stat}><div className={css.cardLabel}>{tt('audit.totalCost')}</div><div className={css.cardValue}>{audit.totalCost.toFixed(4)}</div></div>
-        <div className={css.stat}><div className={css.cardLabel}>{tt('audit.monthCost')}</div><div className={css.cardValue}>{audit.monthCost.toFixed(4)}</div></div>
-        <div className={css.stat}><div className={css.cardLabel}>{tt('audit.budget')}</div><div className={css.cardValue}>{audit.monthlyBudget.toFixed(2)}</div></div>
+        <div className={css.stat}><div className={css.cardLabel}>{t('audit.totalCalls')}</div><div className={css.cardValue}>{audit.totalCalls}</div></div>
+        <div className={css.stat}><div className={css.cardLabel}>{t('audit.inputTokens')}</div><div className={css.cardValue}>{audit.totalInputTokens}</div></div>
+        <div className={css.stat}><div className={css.cardLabel}>{t('audit.outputTokens')}</div><div className={css.cardValue}>{audit.totalOutputTokens}</div></div>
+        <div className={css.stat}><div className={css.cardLabel}>{t('audit.totalCost')}</div><div className={css.cardValue}>{audit.totalCost.toFixed(4)}</div></div>
+        <div className={css.stat}><div className={css.cardLabel}>{t('audit.monthCost')}</div><div className={css.cardValue}>{audit.monthCost.toFixed(4)}</div></div>
+        <div className={css.stat}><div className={css.cardLabel}>{t('audit.budget')}</div><div className={css.cardValue}>{audit.monthlyBudget.toFixed(2)}</div></div>
       </div>
       <div className={css.tableWrap}>
         <table className={css.table}>
           <thead>
             <tr>
-              <th>{tt('audit.col.time')}</th>
-              <th>{tt('audit.col.server')}</th>
-              <th>{tt('audit.col.tool')}</th>
-              <th>{tt('audit.col.tokens')}</th>
-              <th>{tt('audit.col.cost')}</th>
-              <th>{tt('audit.col.status')}</th>
+              <th>{t('audit.col.time')}</th>
+              <th>{t('audit.col.server')}</th>
+              <th>{t('audit.col.tool')}</th>
+              <th>{t('audit.col.tokens')}</th>
+              <th>{t('audit.col.cost')}</th>
+              <th>{t('audit.col.status')}</th>
             </tr>
           </thead>
           <tbody>
-            {audit.recent.length === 0 && <tr><td colSpan={6}>{tt('audit.empty')}</td></tr>}
+            {audit.recent.length === 0 && <tr><td colSpan={6}>{t('audit.empty')}</td></tr>}
             {audit.recent.map(row => (
               <tr key={row.id}>
                 <td>{new Date(row.ts).toLocaleString()}</td>
@@ -76,7 +77,7 @@ export function AuditTab({ api }: { api: RezApi }) {
                 <td>{row.tool}</td>
                 <td>{row.inputTokens + row.outputTokens}</td>
                 <td>{row.cost.toFixed(4)}</td>
-                <td>{row.ok ? <span className={css.badge + ' ' + css.badgeOk}>{tt('audit.ok')}</span> : <span className={css.badge + ' ' + css.badgeFail}>{tt('audit.fail')}</span>}</td>
+                <td>{row.ok ? <span className={css.badge + ' ' + css.badgeOk}>{t('audit.ok')}</span> : <span className={css.badge + ' ' + css.badgeFail}>{t('audit.fail')}</span>}</td>
               </tr>
             ))}
           </tbody>

package/src/client/panel/ConfigTab.tsx

@@ -6,7 +6,7 @@
 import { useEffect, useState, type ReactNode } from 'react'
 import type { RezApi } from '../api.ts'
 import type { RezPublicConfig, RezPublicConnection, RezRoleId, RezTestResult } from '../../protocol.ts'
-import { errorMessage, tt } from './helpers.ts'
+import { errorMessage, useT } from './helpers.ts'
 import css from './panel.module.css'
 
 const ROLES: Array<{ value: RezRoleId; label: string }> = [
@@ -24,9 +24,10 @@ type SecretDrafts = {
   homeassistant: string
   tapd: string
   gsc: string
+  tianyancha: string
 }
 
-const EMPTY_SECRETS: SecretDrafts = { odoo: '', nextcloud: '', wechat: '', homeassistant: '', tapd: '', gsc: '' }
+const EMPTY_SECRETS: SecretDrafts = { odoo: '', nextcloud: '', wechat: '', homeassistant: '', tapd: '', gsc: '', tianyancha: '' }
 
 function Field({ label, children }: { label: string; children: ReactNode }) {
   return (
@@ -57,6 +58,7 @@ function SecretField({
   value: string
   onChange: (value: string) => void
 }) {
+  const t = useT()
   return (
     <Field label={label}>
       <input
@@ -64,7 +66,7 @@ function SecretField({
         type="password"
         autoComplete="off"
         value={value}
-        placeholder={configured ? tt('config.secretConfigured') : tt('config.secretMissing')}
+        placeholder={configured ? t('config.secretConfigured') : t('config.secretMissing')}
         onChange={event => { onChange(event.target.value) }}
       />
     </Field>
@@ -96,9 +98,10 @@ function McpSection({
   secretLabel: string
   usernameLabel?: string
 }) {
+  const t = useT()
   return (
     <Section title={title}>
-      <Field label={tt('config.enabled')}>
+      <Field label={t('config.enabled')}>
         <input className={css.checkbox} type="checkbox" checked={row.enabled} onChange={event => { onEnabled(event.target.checked) }} />
       </Field>
       {onUrl !== undefined && urlLabel !== undefined && (
@@ -119,6 +122,7 @@ function McpSection({
 }
 
 export function ConfigTab({ api }: { api: RezApi }) {
+  const t = useT()
   const [config, setConfig] = useState<RezPublicConfig | null>(null)
   const [secrets, setSecrets] = useState<SecretDrafts>(EMPTY_SECRETS)
   const [loading, setLoading] = useState(true)
@@ -140,7 +144,7 @@ export function ConfigTab({ api }: { api: RezApi }) {
 
   useEffect(() => { void load() }, [])
 
-  if (loading) return <div className={css.message}>{tt('common.loading')}</div>
+  if (loading) return <div className={css.message}>{t('common.loading')}</div>
   if (config === null) return <div className={css.error}>{error}</div>
 
   const setTop = (key: 'enabled' | 'role', value: boolean | RezRoleId): void => {
@@ -170,12 +174,13 @@ export function ConfigTab({ api }: { api: RezApi }) {
           homeassistant: { ...config.connections.homeassistant, secret: secrets.homeassistant || undefined },
           tapd: { ...config.connections.tapd, secret: secrets.tapd || undefined },
           gsc: { ...config.connections.gsc, secret: secrets.gsc || undefined },
+          tianyancha: { ...config.connections.tianyancha, secret: secrets.tianyancha || undefined },
         },
       }
       const saved = await api.saveConfig(payload)
       setConfig(saved)
       setSecrets(EMPTY_SECRETS)
-      setMessage(tt('config.saved'))
+      setMessage(t('config.saved'))
     } catch (err) {
       setError(errorMessage(err))
     } finally {
@@ -200,117 +205,130 @@ export function ConfigTab({ api }: { api: RezApi }) {
   const renderResult = (result: RezTestResult): string => {
     if (result.ok) {
       if (result.serverInfo !== undefined) return result.serverInfo
-      return tt('config.testOk', { tools: result.toolCount ?? 0, latency: result.latencyMs ?? 0 })
+      return t('config.testOk', { tools: result.toolCount ?? 0, latency: result.latencyMs ?? 0 })
     }
-    return tt('config.testFail', { error: result.error ?? '' })
+    return t('config.testFail', { error: result.error ?? '' })
   }
 
   return (
     <div className={css.tabBody}>
-      <p className={css.message}>{tt('config.mcpHint')}</p>
-      <Section title={tt('config.role')}>
-        <Field label={tt('config.role')}>
+      <p className={css.message}>{t('config.mcpHint')}</p>
+      <Section title={t('config.role')}>
+        <Field label={t('config.role')}>
           <select className={css.select} value={config.role} onChange={event => { setTop('role', event.target.value as RezRoleId) }}>
-            {ROLES.map(role => <option key={role.value} value={role.value}>{tt(role.label as never)}</option>)}
+            {ROLES.map(role => <option key={role.value} value={role.value}>{t(role.label as never)}</option>)}
           </select>
         </Field>
-        <Field label={tt('config.enabled')}>
+        <p className={css.message}>{t('config.roleHint')}</p>
+        <Field label={t('config.enabled')}>
           <input className={css.checkbox} type="checkbox" checked={config.enabled} onChange={event => { setTop('enabled', event.target.checked) }} />
         </Field>
       </Section>
 
       <McpSection
-        title={tt('config.odoo')}
+        title={t('config.odoo')}
         row={config.connections.odoo}
         secret={secrets.odoo}
         onEnabled={enabled => { patchConnection('odoo', { enabled }) }}
         onUrl={url => { patchConnection('odoo', { url }) }}
         onSecret={value => { setSecrets(prev => ({ ...prev, odoo: value })) }}
-        urlLabel={tt('config.odoo.url')}
-        secretLabel={tt('config.odoo.apiKey')}
+        urlLabel={t('config.odoo.url')}
+        secretLabel={t('config.odoo.apiKey')}
       />
       <McpSection
-        title={tt('config.nextcloud')}
+        title={t('config.nextcloud')}
         row={config.connections.nextcloud}
         secret={secrets.nextcloud}
         onEnabled={enabled => { patchConnection('nextcloud', { enabled }) }}
         onUrl={url => { patchConnection('nextcloud', { url }) }}
         onUsername={username => { patchConnection('nextcloud', { username }) }}
         onSecret={value => { setSecrets(prev => ({ ...prev, nextcloud: value })) }}
-        urlLabel={tt('config.nextcloud.url')}
-        usernameLabel={tt('config.nextcloud.username')}
-        secretLabel={tt('config.nextcloud.appPassword')}
+        urlLabel={t('config.nextcloud.url')}
+        usernameLabel={t('config.nextcloud.username')}
+        secretLabel={t('config.nextcloud.appPassword')}
       />
       <McpSection
-        title={tt('config.wecom')}
+        title={t('config.wecom')}
         row={config.connections.wechat}
         secret={secrets.wechat}
         onEnabled={enabled => { patchConnection('wechat', { enabled }) }}
         onSecret={value => { setSecrets(prev => ({ ...prev, wechat: value })) }}
-        secretLabel={tt('config.wecom.webhook')}
+        secretLabel={t('config.wecom.webhook')}
       />
       <McpSection
-        title={tt('config.ha')}
+        title={t('config.ha')}
         row={config.connections.homeassistant}
         secret={secrets.homeassistant}
         onEnabled={enabled => { patchConnection('homeassistant', { enabled }) }}
         onUrl={url => { patchConnection('homeassistant', { url }) }}
         onSecret={value => { setSecrets(prev => ({ ...prev, homeassistant: value })) }}
-        urlLabel={tt('config.ha.url')}
-        secretLabel={tt('config.ha.token')}
+        urlLabel={t('config.ha.url')}
+        secretLabel={t('config.ha.token')}
       />
       <McpSection
-        title={tt('config.tapd')}
+        title={t('config.tapd')}
         row={config.connections.tapd}
         secret={secrets.tapd}
         onEnabled={enabled => { patchConnection('tapd', { enabled }) }}
         extra={(
           <>
-            <Field label={tt('config.tapd.workspaceId')}>
+            <Field label={t('config.tapd.workspaceId')}>
               <input className={css.input} value={config.connections.tapd.workspaceId ?? ''} onChange={event => { patchConnection('tapd', { workspaceId: event.target.value }) }} />
             </Field>
-            <Field label={tt('config.tapd.nickName')}>
+            <Field label={t('config.tapd.nickName')}>
               <input className={css.input} value={config.connections.tapd.nickName ?? ''} onChange={event => { patchConnection('tapd', { nickName: event.target.value }) }} />
             </Field>
           </>
         )}
         onSecret={value => { setSecrets(prev => ({ ...prev, tapd: value })) }}
-        secretLabel={tt('config.tapd.token')}
+        secretLabel={t('config.tapd.token')}
       />
       <McpSection
-        title={tt('config.gsc')}
+        title={t('config.gsc')}
         row={config.connections.gsc}
         secret={secrets.gsc}
         onEnabled={enabled => { patchConnection('gsc', { enabled }) }}
         extra={(
-          <Field label={tt('config.gsc.siteUrl')}>
+          <Field label={t('config.gsc.siteUrl')}>
             <input className={css.input} value={config.connections.gsc.siteUrl ?? ''} onChange={event => { patchConnection('gsc', { siteUrl: event.target.value }) }} />
           </Field>
         )}
         onSecret={value => { setSecrets(prev => ({ ...prev, gsc: value })) }}
-        secretLabel={tt('config.gsc.key')}
+        secretLabel={t('config.gsc.key')}
       />
+      {config.role === 'boss' && (
+        <McpSection
+          title={t('config.tianyancha')}
+          row={config.connections.tianyancha}
+          secret={secrets.tianyancha}
+          onEnabled={enabled => { patchConnection('tianyancha', { enabled }) }}
+          onUrl={url => { patchConnection('tianyancha', { url }) }}
+          onSecret={value => { setSecrets(prev => ({ ...prev, tianyancha: value })) }}
+          urlLabel={t('config.tianyancha.url')}
+          secretLabel={t('config.tianyancha.token')}
+        />
+      )}
 
-      <Section title={tt('config.billing')}>
-        <Field label={tt('config.billing.input')}>
+      <Section title={t('config.billing')}>
+        <Field label={t('config.billing.input')}>
           <input className={css.input} type="number" step="0.0001" value={config.billing.inputCostPer1k} onChange={event => { setConfig(prev => prev === null ? prev : { ...prev, billing: { ...prev.billing, inputCostPer1k: Number(event.target.value) } }) }} />
         </Field>
-        <Field label={tt('config.billing.output')}>
+        <Field label={t('config.billing.output')}>
           <input className={css.input} type="number" step="0.0001" value={config.billing.outputCostPer1k} onChange={event => { setConfig(prev => prev === null ? prev : { ...prev, billing: { ...prev.billing, outputCostPer1k: Number(event.target.value) } }) }} />
         </Field>
-        <Field label={tt('config.billing.budget')}>
+        <Field label={t('config.billing.budget')}>
           <input className={css.input} type="number" step="0.01" value={config.billing.monthlyBudget} onChange={event => { setConfig(prev => prev === null ? prev : { ...prev, billing: { ...prev.billing, monthlyBudget: Number(event.target.value) } }) }} />
         </Field>
       </Section>
 
       <div className={css.toolbar}>
-        <button type="button" className={css.button + ' ' + css.primaryButton} disabled={saving} onClick={() => { void save() }}>{tt('config.save')}</button>
-        <button type="button" className={css.button} disabled={testing} onClick={() => { void test() }}>{testing ? tt('config.testing') : tt('config.test')}</button>
+        <button type="button" className={css.button + ' ' + css.primaryButton} disabled={saving} onClick={() => { void save() }}>{t('config.save')}</button>
+        <button type="button" className={css.button} disabled={testing} onClick={() => { void test() }}>{testing ? t('config.testing') : t('config.test')}</button>
       </div>
       {message !== '' && <div className={css.message}>{message}</div>}
       {error !== '' && <div className={css.error}>{error}</div>}
       {results.map(result => (
-        <div key={result.server} className={result.ok ? css.message : css.error}>{tt('config.testResult', { server: result.server, status: renderResult(result) })}</div>
+        <div key={result.server} className={result.ok ? css.message : css.error}>{t('config.testResult', { server: result.server, status: renderResult(result) })}</div>
       ))}
     </div>
   )

package/src/client/panel/StatusTab.tsx

@@ -5,10 +5,11 @@
 import { useEffect, useState } from 'react'
 import type { RezApi } from '../api.ts'
 import type { RezStatusResponse } from '../../protocol.ts'
-import { errorMessage, tt } from './helpers.ts'
+import { errorMessage, useT } from './helpers.ts'
 import css from './panel.module.css'
 
 export function StatusTab({ api }: { api: RezApi }) {
+  const t = useT()
   const [status, setStatus] = useState<RezStatusResponse | null>(null)
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(true)
@@ -27,26 +28,26 @@ export function StatusTab({ api }: { api: RezApi }) {
 
   useEffect(() => { void load() }, [])
 
-  if (loading) return <div className={css.message}>{tt('common.loading')}</div>
+  if (loading) return <div className={css.message}>{t('common.loading')}</div>
   if (status === null) return <div className={css.error}>{error}</div>
 
   return (
     <div className={css.tabBody}>
       <div className={css.toolbar}>
-        <span className={css.message}>{tt('status.total', { role: status.role, count: status.totalRegisteredTools })}</span>
-        <button type="button" className={css.button} onClick={() => { void load() }}>{tt('common.refresh')}</button>
+        <span className={css.message}>{t('status.total', { role: status.role, count: status.totalRegisteredTools })}</span>
+        <button type="button" className={css.button} onClick={() => { void load() }}>{t('common.refresh')}</button>
       </div>
-      <p className={css.message}>{tt('status.hint')}</p>
+      <p className={css.message}>{t('status.hint')}</p>
       {error !== '' && <div className={css.error}>{error}</div>}
       <div className={css.tableWrap}>
         <table className={css.table}>
           <thead>
             <tr>
-              <th>{tt('status.col.server')}</th>
-              <th>{tt('status.col.state')}</th>
-              <th>{tt('status.col.tools')}</th>
-              <th>{tt('status.col.registered')}</th>
-              <th>{tt('status.col.error')}</th>
+              <th>{t('status.col.server')}</th>
+              <th>{t('status.col.state')}</th>
+              <th>{t('status.col.tools')}</th>
+              <th>{t('status.col.registered')}</th>
+              <th>{t('status.col.error')}</th>
             </tr>
           </thead>
           <tbody>

package/src/client/panel/WeixinTab.tsx

@@ -5,10 +5,11 @@
 import { useEffect, useState } from 'react'
 import type { RezApi } from '../api.ts'
 import type { RezWeixinStatus } from '../../protocol.ts'
-import { errorMessage, tt } from './helpers.ts'
+import { errorMessage, useT } from './helpers.ts'
 import css from './panel.module.css'
 
 export function WeixinTab({ api }: { api: RezApi }) {
+  const t = useT()
   const [status, setStatus] = useState<RezWeixinStatus | null>(null)
   const [error, setError] = useState('')
   const [code, setCode] = useState('')
@@ -68,32 +69,32 @@ export function WeixinTab({ api }: { api: RezApi }) {
 
   return (
     <div className={css.tabBody}>
-      <p className={css.message}>{tt('weixin.intro')}</p>
+      <p className={css.message}>{t('weixin.intro')}</p>
       {error !== '' && <div className={css.error}>{error}</div>}
       {status !== null && <p className={css.message}>{status.hint}</p>}
       {status?.qrDataUrl !== undefined && (
-        <img className={css.qr} src={status.qrDataUrl} alt={tt('weixin.qrAlt')} />
+        <img className={css.qr} src={status.qrDataUrl} alt={t('weixin.qrAlt')} />
       )}
       {status?.qrContent !== undefined && (
         <p className={css.message}><a href={status.qrContent} target="_blank" rel="noreferrer">{status.qrContent}</a></p>
       )}
       {status?.phase === 'need_verify' && (
         <div className={css.toolbar}>
-          <input className={css.input} value={code} onChange={event => { setCode(event.target.value) }} placeholder={tt('weixin.verifyPlaceholder')} />
-          <button type="button" className={css.button} disabled={busy} onClick={() => { void verify() }}>{tt('weixin.verify')}</button>
+          <input className={css.input} value={code} onChange={event => { setCode(event.target.value) }} placeholder={t('weixin.verifyPlaceholder')} />
+          <button type="button" className={css.button} disabled={busy} onClick={() => { void verify() }}>{t('weixin.verify')}</button>
         </div>
       )}
       <div className={css.toolbar}>
         <button type="button" className={css.button} disabled={busy} onClick={() => { void login() }}>
-          {status?.loggedIn === true ? tt('weixin.reconnect') : tt('weixin.login')}
+          {status?.loggedIn === true ? t('weixin.reconnect') : t('weixin.login')}
         </button>
         {status?.loggedIn === true && (
-          <button type="button" className={css.button} disabled={busy} onClick={() => { void logout() }}>{tt('weixin.logout')}</button>
+          <button type="button" className={css.button} disabled={busy} onClick={() => { void logout() }}>{t('weixin.logout')}</button>
         )}
       </div>
       {status !== null && (
         <p className={css.message}>
-          {status.listening ? tt('weixin.listening') : status.loggedIn ? tt('weixin.loggedIn') : tt('weixin.loggedOut')}
+          {status.listening ? t('weixin.listening') : status.loggedIn ? t('weixin.loggedIn') : t('weixin.loggedOut')}
         </p>
       )}
     </div>

package/src/client/panel/helpers.ts

@@ -1,18 +1,33 @@
 /**
- * Shared panel helpers: active-language dictionary pick and error extraction.
+ * Official DSH locale seat for ReZ UI copy.
+ *
+ * Slot components receive `t` from `locale: 'dsh-rez-suite'`. Fallback copy
+ * is Chinese only — do not read `<html lang>`. The Host stores zh/en in
+ * `locale.preference`, which does not necessarily match the document language.
  */
 
-import { en, t, zh, type RezKey } from '../locales.ts'
+import { createContext, useContext } from 'react'
+import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
+import { t as fill, zh, type RezKey } from '../locales.ts'
 
 export type TranslateValues = Record<string, string | number>
+export type RezTranslate = TranslateNS<'dsh-rez-suite'>
 
+export const RezT = createContext<RezTranslate | null>(null)
+
+/** Fallback for tests / code outside a slot. Prefer {@link useT}. */
 export function dictionary(): Record<string, string> {
-  const lang = typeof document !== 'undefined' ? document.documentElement.lang : 'zh'
-  return lang.toLowerCase().startsWith('en') ? { ...en } : { ...zh }
+  return { ...zh }
 }
 
 export function tt(key: RezKey, values?: TranslateValues): string {
-  return t(dictionary(), key, values)
+  return fill(dictionary(), key, values)
+}
+
+export function useT(): RezTranslate {
+  const injected = useContext(RezT)
+  if (injected) return injected
+  return (key, params) => fill(dictionary(), key as RezKey, params as TranslateValues | undefined)
 }
 
 export function errorMessage(error: unknown): string {

package/src/client/settings-card.tsx

@@ -1,11 +1,14 @@
 /**
  * ReZ settings pages: one accordion card in 设置 → 插件 → 插件配置,
  * plus a dedicated Plugins tab for the same content.
+ *
+ * `t` is the official locale seat (zh/en follows 设置 → 语言).
  */
 
 import { useMemo, useState } from 'react'
+import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
 import { RezApi } from './api.ts'
-import { tt } from './panel/helpers.ts'
+import { RezT } from './panel/helpers.ts'
 import { AuditTab } from './panel/AuditTab.tsx'
 import { ConfigTab } from './panel/ConfigTab.tsx'
 import { StatusTab } from './panel/StatusTab.tsx'
@@ -14,55 +17,58 @@ import css from './panel/panel.module.css'
 
 export type RezTab = 'config' | 'weixin' | 'status' | 'audit'
 
-const TABS: ReadonlyArray<{ id: RezTab; label: () => string }> = [
-  { id: 'config', label: () => tt('tab.config') },
-  { id: 'weixin', label: () => tt('tab.weixin') },
-  { id: 'status', label: () => tt('tab.status') },
-  { id: 'audit', label: () => tt('tab.audit') },
-]
-
-export function RezSettingsPage() {
+export function RezSettingsPage({ t }: { t: TranslateNS<'dsh-rez-suite'> }) {
   const api = useMemo(() => new RezApi(), [])
   const [activeTab, setActiveTab] = useState<RezTab>('config')
+  const tabs: ReadonlyArray<{ id: RezTab; label: string }> = [
+    { id: 'config', label: t('tab.config') },
+    { id: 'weixin', label: t('tab.weixin') },
+    { id: 'status', label: t('tab.status') },
+    { id: 'audit', label: t('tab.audit') },
+  ]
   return (
-    <div className={css.shell}>
-      <div className={css.tabBar} role="tablist">
-        {TABS.map(tab => (
-          <button
-            key={tab.id}
-            type="button"
-            role="tab"
-            aria-selected={activeTab === tab.id}
-            data-active={activeTab === tab.id ? '' : undefined}
-            className={css.tab}
-            onClick={() => { setActiveTab(tab.id) }}
-          >
-            {tab.label()}
-          </button>
-        ))}
+    <RezT.Provider value={t}>
+      <div className={css.shell}>
+        <div className={css.tabBar} role="tablist">
+          {tabs.map(tab => (
+            <button
+              key={tab.id}
+              type="button"
+              role="tab"
+              aria-selected={activeTab === tab.id}
+              data-active={activeTab === tab.id ? '' : undefined}
+              className={css.tab}
+              onClick={() => { setActiveTab(tab.id) }}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+        {activeTab === 'config' && <ConfigTab api={api} />}
+        {activeTab === 'weixin' && <WeixinTab api={api} />}
+        {activeTab === 'status' && <StatusTab api={api} />}
+        {activeTab === 'audit' && <AuditTab api={api} />}
       </div>
-      {activeTab === 'config' && <ConfigTab api={api} />}
-      {activeTab === 'weixin' && <WeixinTab api={api} />}
-      {activeTab === 'status' && <StatusTab api={api} />}
-      {activeTab === 'audit' && <AuditTab api={api} />}
-    </div>
+    </RezT.Provider>
   )
 }
 
-export function RezPluginCard() {
+export function RezPluginCard({ t }: { t: TranslateNS<'dsh-rez-suite'> }) {
   const [open, setOpen] = useState(false)
   return (
-    <li className={css.card + (open ? ' ' + css.cardOpen : '')}>
-      <button type="button" className={css.header} onClick={() => { setOpen(!open) }}>
-        <div className={css.headText}>
-          <div className={css.name}>{tt('settings.title')}</div>
-          <div className={css.description}>{tt('settings.description')}</div>
-        </div>
-        <svg className={css.chevron + (open ? ' ' + css.chevronOpen : '')} viewBox="0 0 14 14" width="14" height="14" aria-hidden="true">
-          <path d="M3 5l4 4 4-4" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
-      </button>
-      {open ? <div className={css.body}><RezSettingsPage /></div> : null}
-    </li>
+    <RezT.Provider value={t}>
+      <li className={css.card + (open ? ' ' + css.cardOpen : '')}>
+        <button type="button" className={css.header} onClick={() => { setOpen(!open) }}>
+          <div className={css.headText}>
+            <div className={css.name}>{t('settings.title')}</div>
+            <div className={css.description}>{t('settings.description')}</div>
+          </div>
+          <svg className={css.chevron + (open ? ' ' + css.chevronOpen : '')} viewBox="0 0 14 14" width="14" height="14" aria-hidden="true">
+            <path d="M3 5l4 4 4-4" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </button>
+        {open ? <div className={css.body}><RezSettingsPage t={t} /></div> : null}
+      </li>
+    </RezT.Provider>
   )
 }