@rezti/dsh-rez-suite 0.1.27 → 0.1.34

package/src/client/brand.ts

@@ -0,0 +1,135 @@
+/**
+ * Official DSH has no brand slot: ui-sidebar paints BrandWordmark, the empty
+ * hero paints FishLogo + a fixed headline. Replacing the whole sidebar or
+ * the center column would drop their inner seats. This overlay swaps only
+ * those two SVGs and the known headline strings.
+ */
+
+import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
+import { REZ_MARK_DATA_URL } from './brand-mark.ts'
+import css from './brand.module.css'
+
+/** Official BrandWordmark viewBox (182:24 wordmark). */
+export const WORDMARK_VIEWBOX = '0 0 182 24'
+/** Official FishLogo viewBox. */
+export const FISH_VIEWBOX = '0 0 23.16 17.04'
+/** Official empty-hero headlines we replace. */
+export const OFFICIAL_HEADLINES = ['探索未至之境', 'Into the Unknown'] as const
+
+function normViewBox(value: string | null): string {
+  return (value ?? '').trim().replace(/\s+/g, ' ')
+}
+
+function alreadyBranded(node: Node): boolean {
+  const el = node instanceof Element ? node : node.parentElement
+  return el?.closest('[data-rez-brand]') != null
+}
+
+function markImg(kind: 'wordmark' | 'icon', className: string): HTMLImageElement {
+  const img = document.createElement('img')
+  img.src = REZ_MARK_DATA_URL
+  img.alt = ''
+  img.draggable = false
+  img.className = className
+  img.setAttribute('data-rez-brand', kind)
+  return img
+}
+
+function paintWordmark(svg: SVGSVGElement, t: TranslateNS<'dsh-rez-suite'>): void {
+  const parent = svg.parentNode
+  if (parent === null || alreadyBranded(svg)) return
+  const row = document.createElement('span')
+  row.className = css.wordmark
+  row.setAttribute('data-rez-brand', 'wordmark')
+  row.setAttribute('aria-label', t('brand.wordmarkAria'))
+  const name = document.createElement('span')
+  name.className = css.name
+  name.textContent = t('brand.name')
+  const badge = document.createElement('span')
+  badge.className = css.badge
+  badge.textContent = t('brand.badge')
+  row.append(markImg('wordmark', css.mark), name, badge)
+  parent.replaceChild(row, svg)
+}
+
+function paintFish(svg: SVGSVGElement): void {
+  const parent = svg.parentNode
+  if (parent === null || alreadyBranded(svg)) return
+  const wrap = document.createElement('span')
+  wrap.setAttribute('data-rez-brand', 'icon')
+  wrap.style.display = 'inline-flex'
+  wrap.style.alignItems = 'center'
+  wrap.style.justifyContent = 'center'
+  const width = svg.getAttribute('width')
+  const height = svg.getAttribute('height')
+  if (width) wrap.style.width = /px$/.test(width) ? width : `${width}px`
+  if (height) wrap.style.height = /px$/.test(height) ? height : `${height}px`
+  wrap.append(markImg('icon', css.markOnly))
+  parent.replaceChild(wrap, svg)
+}
+
+function paintHeadline(el: Element, t: TranslateNS<'dsh-rez-suite'>): void {
+  el.setAttribute('data-rez-brand', 'headline')
+  el.textContent = t('brand.headline')
+}
+
+function refreshCopy(root: ParentNode, t: TranslateNS<'dsh-rez-suite'>): void {
+  for (const row of root.querySelectorAll('[data-rez-brand="wordmark"]')) {
+    const name = row.querySelector(`.${css.name}`)
+    const badge = row.querySelector(`.${css.badge}`)
+    if (name) name.textContent = t('brand.name')
+    if (badge) badge.textContent = t('brand.badge')
+    row.setAttribute('aria-label', t('brand.wordmarkAria'))
+  }
+  for (const el of root.querySelectorAll('[data-rez-brand="headline"]')) {
+    el.textContent = t('brand.headline')
+  }
+}
+
+export function paintBrand(root: ParentNode, t: TranslateNS<'dsh-rez-suite'>): void {
+  refreshCopy(root, t)
+  const svgs = root.querySelectorAll('svg[aria-hidden="true"]')
+  for (const node of svgs) {
+    if (!(node instanceof SVGSVGElement)) continue
+    const box = normViewBox(node.getAttribute('viewBox'))
+    if (box === WORDMARK_VIEWBOX) paintWordmark(node, t)
+    else if (box === FISH_VIEWBOX) paintFish(node)
+  }
+  const doc = root instanceof Document ? root : root.ownerDocument
+  if (doc === null) return
+  const walker = doc.createTreeWalker(root as Node, NodeFilter.SHOW_TEXT)
+  const headlines: Text[] = []
+  while (walker.nextNode()) {
+    const text = walker.currentNode as Text
+    const value = text.data.trim()
+    if ((OFFICIAL_HEADLINES as readonly string[]).includes(value)) headlines.push(text)
+  }
+  for (const text of headlines) {
+    const host = text.parentElement
+    if (host) paintHeadline(host, t)
+  }
+}
+
+export function mountRezBrand(t: TranslateNS<'dsh-rez-suite'>): () => void {
+  if (typeof document === 'undefined') return () => undefined
+  let frame = 0
+  const run = (): void => {
+    frame = 0
+    paintBrand(document, t)
+  }
+  const schedule = (): void => {
+    if (frame !== 0) return
+    frame = requestAnimationFrame(run)
+  }
+  run()
+  const observer = new MutationObserver(schedule)
+  observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+    characterData: true,
+  })
+  return () => {
+    observer.disconnect()
+    if (frame !== 0) cancelAnimationFrame(frame)
+  }
+}

package/src/client/index.ts

@@ -9,6 +9,7 @@ import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
 import type {} from '@deepseek-ai/dsh-client-locale/client'
 import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
 import type {} from '@deepseek-ai/dsh-client-ui-slots'
+import { mountRezBrand, paintBrand } from './brand.ts'
 import { en, zh, type RezKey } from './locales.ts'
 import { RezPluginCard, RezSettingsPage } from './settings-card.tsx'
 import { UpgradeButton } from './upgrade-button.tsx'
@@ -45,6 +46,16 @@ export type { RezKey } from './locales.ts'
 export function apply(ctx: ClientContext): void {
   const t = ctx.locale.bind(NS)
   ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-rez-suite: dictionaries')
+  ctx.effect(() => {
+    const stop = mountRezBrand(t)
+    const unsub = ctx.locale.subscribe(() => {
+      if (typeof document !== 'undefined') paintBrand(document, t)
+    })
+    return () => {
+      unsub()
+      stop()
+    }
+  }, 'dsh-rez-suite: brand')
 
   ctx.slots.inject('settings.plugin.item', () => ctx.slots.register({
     name: 'settings.plugin.item',

package/src/client/locales.ts

@@ -52,6 +52,9 @@ export const zh = {
   'config.gsc': 'Google Search Console',
   'config.gsc.siteUrl': '站点 URL',
   'config.gsc.key': '服务账号 JSON 或密钥文件路径',
+  'config.qcc': '企查查（法务助理）',
+  'config.qcc.url': '企查查企业 MCP URL',
+  'config.qcc.token': 'API Key',
   'config.tianyancha': '天眼查（法务助理 · 仅老板）',
   'config.tianyancha.url': '天眼查 MCP URL',
   'config.tianyancha.token': 'OpenAPI Token',
@@ -71,7 +74,7 @@ export const zh = {
   'config.testOk': '成功（{tools} 个工具, {latency}ms）',
   'config.testFail': '失败：{error}',
   // status
-  'status.hint': '绿标表示本机已注册 mcp__<系统>__* 工具。远端 MCP 通了但这里仍红，说明 dsh-mcp-client 还没挂上。',
+  'status.hint': '绿标表示本机已注册 mcp__<系统>__* 工具。远端 MCP 通了但这里仍红，说明 dsh-mcp-client 还没挂上。企查查只在法务助理房间可用；其它房间不显示或显示「房间未启用」。',
   'status.total': '当前角色 {role}，共注册 {count} 个 MCP 工具',
   'status.col.server': 'Server',
   'status.col.state': '状态',
@@ -121,6 +124,10 @@ export const zh = {
   'upgrade.reloading': '正在重载',
   'upgrade.already': '已是 {version}',
   'upgrade.reloadTimeout': '升级完成，但网页还没重新连上。请刷新这一页。',
+  'brand.name': '雷泽智能',
+  'brand.badge': '定制版',
+  'brand.headline': '雷泽智能定制版',
+  'brand.wordmarkAria': '雷泽智能定制版',
 } as const
 
 export type RezKey = keyof typeof zh
@@ -174,6 +181,9 @@ export const en: Record<RezKey, string> = {
   'config.gsc': 'Google Search Console',
   'config.gsc.siteUrl': 'Site URL',
   'config.gsc.key': 'Service-account JSON or key file path',
+  'config.qcc': 'Qichacha (Legal assistant)',
+  'config.qcc.url': 'Qichacha company MCP URL',
+  'config.qcc.token': 'API key',
   'config.tianyancha': 'Tianyancha (Legal assistant, boss only)',
   'config.tianyancha.url': 'Tianyancha MCP URL',
   'config.tianyancha.token': 'OpenAPI token',
@@ -192,7 +202,7 @@ export const en: Record<RezKey, string> = {
   'config.testResult': '{server}: {status}',
   'config.testOk': 'OK ({tools} tools, {latency}ms)',
   'config.testFail': 'Failed: {error}',
-  'status.hint': 'Green means this host registered mcp__<system>__* tools. A live remote MCP with a red row means dsh-mcp-client has not attached yet.',
+  'status.hint': 'Green means this host registered mcp__<system>__* tools. A live remote MCP with a red row means dsh-mcp-client has not attached yet. Qichacha is only for the Legal assistant room; other rooms hide the row or show “room not enabled”.',
   'status.total': 'Role {role}, {count} MCP tools registered',
   'status.col.server': 'Server',
   'status.col.state': 'State',
@@ -240,6 +250,10 @@ export const en: Record<RezKey, string> = {
   'upgrade.reloading': 'Reloading',
   'upgrade.already': 'Already {version}',
   'upgrade.reloadTimeout': 'Update finished, but the page did not reconnect. Refresh this tab.',
+  'brand.name': 'ReZ-TI',
+  'brand.badge': 'Custom',
+  'brand.headline': 'ReZ-TI Custom Edition',
+  'brand.wordmarkAria': 'ReZ-TI Custom Edition',
 }
 
 /** Minimal {name} interpolator shared by the panel helpers. */

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

@@ -1,12 +1,12 @@
 /**
- * Config tab: company MCP connections (Odoo / Nextcloud / WeCom / HA / TAPD / GSC),
+ * Config tab: company MCP connections (Odoo / Nextcloud / WeCom / HA / TAPD / GSC / QCC),
  * role, and billing. Secrets are write-only and land in credentials.yaml.
  */
 
 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,10 +24,11 @@ type SecretDrafts = {
   homeassistant: string
   tapd: string
   gsc: string
+  qcc: string
   tianyancha: string
 }
 
-const EMPTY_SECRETS: SecretDrafts = { odoo: '', nextcloud: '', wechat: '', homeassistant: '', tapd: '', gsc: '', tianyancha: '' }
+const EMPTY_SECRETS: SecretDrafts = { odoo: '', nextcloud: '', wechat: '', homeassistant: '', tapd: '', gsc: '', qcc: '', tianyancha: '' }
 
 function Field({ label, children }: { label: string; children: ReactNode }) {
   return (
@@ -58,6 +59,7 @@ function SecretField({
   value: string
   onChange: (value: string) => void
 }) {
+  const t = useT()
   return (
     <Field label={label}>
       <input
@@ -65,7 +67,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>
@@ -97,9 +99,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 && (
@@ -120,6 +123,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)
@@ -141,7 +145,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 => {
@@ -171,13 +175,14 @@ 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 },
+          qcc: { ...config.connections.qcc, secret: secrets.qcc || 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 {
@@ -202,129 +207,140 @@ 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')}
+      />
+      <McpSection
+        title={t('config.qcc')}
+        row={config.connections.qcc}
+        secret={secrets.qcc}
+        onEnabled={enabled => { patchConnection('qcc', { enabled }) }}
+        onUrl={url => { patchConnection('qcc', { url }) }}
+        onSecret={value => { setSecrets(prev => ({ ...prev, qcc: value })) }}
+        urlLabel={t('config.qcc.url')}
+        secretLabel={t('config.qcc.token')}
       />
       {config.role === 'boss' && (
         <McpSection
-          title={tt('config.tianyancha')}
+          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={tt('config.tianyancha.url')}
-          secretLabel={tt('config.tianyancha.token')}
+          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>