@rezti/dsh-rez-suite 0.1.0

package/src/client/locales.ts

@@ -0,0 +1,176 @@
+/**
+ * dsh-rez-suite surface copy: zh is the key source, en mirrors every key.
+ */
+
+export const zh = {
+  'entry.label': 'Rez',
+  'entry.tooltip': 'Rez Suite 配置与审计面板',
+  'panel.title': 'Rez Suite',
+  'tab.config': '配置',
+  'tab.status': '状态',
+  'tab.audit': '用量',
+  // config
+  'config.role': '角色',
+  'config.roleHint': '决定注册给模型的 MCP 工具',
+  'role.all': '全部',
+  'role.engineer': '工程师',
+  'role.sales': '销售',
+  'role.operations': '运营',
+  'config.enabled': '启用插件',
+  'config.transport': '传输方式',
+  'config.command': '命令',
+  'config.args': '参数（每行一个）',
+  'config.url': 'URL',
+  'config.env': '环境变量 (JSON)',
+  'config.headers': 'Headers (JSON)',
+  'config.jsonInvalid': 'JSON 格式错误：{error}',
+  'config.odoo': 'Odoo',
+  'config.odoo.url': 'Odoo URL',
+  'config.odoo.apiKey': 'API Key',
+  'config.nextcloud': 'Nextcloud',
+  'config.nextcloud.url': 'Nextcloud URL',
+  'config.nextcloud.username': '用户名',
+  'config.nextcloud.appPassword': 'App Password',
+  'config.wecom': '企业微信',
+  'config.wecom.botId': 'Bot ID',
+  'config.wecom.secret': 'Secret',
+  'config.fs': '本地文件 (fs-mcp-server)',
+  'config.fs.root': '根目录',
+  'config.sqlite': 'SQLite (sqlite-mcp-server)',
+  'config.sqlite.path': '数据库路径',
+  'config.billing': '计费 / 审计',
+  'config.billing.input': '输入单价 / 1k token',
+  'config.billing.output': '输出单价 / 1k token',
+  'config.billing.budget': '月预算',
+  'config.save': '保存',
+  'config.test': '测试连接',
+  'config.testing': '测试中…',
+  'config.saved': '已保存并应用',
+  'config.testResult': '{server}: {status}',
+  'config.testOk': '成功（{tools} 个工具, {latency}ms）',
+  'config.testFail': '失败：{error}',
+  // status
+  'status.total': '当前角色 {role}，共注册 {count} 个 MCP 工具',
+  'status.col.server': 'Server',
+  'status.col.state': '状态',
+  'status.col.tools': '发现',
+  'status.col.registered': '已注册',
+  'status.col.error': '错误',
+  'status.none': '暂无状态',
+  // audit
+  'audit.totalCalls': '调用次数',
+  'audit.inputTokens': '输入 token',
+  'audit.outputTokens': '输出 token',
+  'audit.totalCost': '累计费用',
+  'audit.monthCost': '本月费用',
+  'audit.budget': '月预算',
+  'audit.byServer': '按服务统计',
+  'audit.recent': '最近记录',
+  'audit.col.time': '时间',
+  'audit.col.server': '服务',
+  'audit.col.tool': '工具',
+  'audit.col.tokens': 'token',
+  'audit.col.cost': '费用',
+  'audit.col.status': '状态',
+  'audit.ok': '成功',
+  'audit.fail': '失败',
+  'audit.reset': '清空账本',
+  'audit.resetConfirm': '确定清空全部用量记录吗？',
+  'audit.empty': '暂无记录',
+  // common
+  'common.close': '关闭',
+  'common.loading': '加载中…',
+  'common.error': '出错：{error}',
+  'common.refresh': '刷新',
+} as const
+
+export type RezKey = keyof typeof zh
+
+export const en: Record<RezKey, string> = {
+  'entry.label': 'Rez',
+  'entry.tooltip': 'Rez Suite configuration and audit panel',
+  'panel.title': 'Rez Suite',
+  'tab.config': 'Config',
+  'tab.status': 'Status',
+  'tab.audit': 'Usage',
+  'config.role': 'Role',
+  'config.roleHint': 'Which MCP tools are registered for the model',
+  'role.all': 'All',
+  'role.engineer': 'Engineer',
+  'role.sales': 'Sales',
+  'role.operations': 'Operations',
+  'config.enabled': 'Enable plugin',
+  'config.transport': 'Transport',
+  'config.command': 'Command',
+  'config.args': 'Args (one per line)',
+  'config.url': 'URL',
+  'config.env': 'Env vars (JSON)',
+  'config.headers': 'Headers (JSON)',
+  'config.jsonInvalid': 'Invalid JSON: {error}',
+  'config.odoo': 'Odoo',
+  'config.odoo.url': 'Odoo URL',
+  'config.odoo.apiKey': 'API Key',
+  'config.nextcloud': 'Nextcloud',
+  'config.nextcloud.url': 'Nextcloud URL',
+  'config.nextcloud.username': 'Username',
+  'config.nextcloud.appPassword': 'App Password',
+  'config.wecom': 'WeCom',
+  'config.wecom.botId': 'Bot ID',
+  'config.wecom.secret': 'Secret',
+  'config.fs': 'Local files (fs-mcp-server)',
+  'config.fs.root': 'Root directory',
+  'config.sqlite': 'SQLite (sqlite-mcp-server)',
+  'config.sqlite.path': 'Database path',
+  'config.billing': 'Billing / audit',
+  'config.billing.input': 'Input price / 1k tokens',
+  'config.billing.output': 'Output price / 1k tokens',
+  'config.billing.budget': 'Monthly budget',
+  'config.save': 'Save',
+  'config.test': 'Test connections',
+  'config.testing': 'Testing…',
+  'config.saved': 'Saved and applied',
+  'config.testResult': '{server}: {status}',
+  'config.testOk': 'OK ({tools} tools, {latency}ms)',
+  'config.testFail': 'Failed: {error}',
+  'status.total': 'Role {role}, {count} MCP tools registered',
+  'status.col.server': 'Server',
+  'status.col.state': 'State',
+  'status.col.tools': 'Discovered',
+  'status.col.registered': 'Registered',
+  'status.col.error': 'Error',
+  'status.none': 'No status yet',
+  'audit.totalCalls': 'Calls',
+  'audit.inputTokens': 'Input tokens',
+  'audit.outputTokens': 'Output tokens',
+  'audit.totalCost': 'Total cost',
+  'audit.monthCost': 'Month cost',
+  'audit.budget': 'Monthly budget',
+  'audit.byServer': 'By server',
+  'audit.recent': 'Recent records',
+  'audit.col.time': 'Time',
+  'audit.col.server': 'Server',
+  'audit.col.tool': 'Tool',
+  'audit.col.tokens': 'Tokens',
+  'audit.col.cost': 'Cost',
+  'audit.col.status': 'Status',
+  'audit.ok': 'OK',
+  'audit.fail': 'Failed',
+  'audit.reset': 'Clear ledger',
+  'audit.resetConfirm': 'Clear all usage records?',
+  'audit.empty': 'No records',
+  'common.close': 'Close',
+  'common.loading': 'Loading…',
+  'common.error': 'Error: {error}',
+  'common.refresh': 'Refresh',
+}
+
+/** Minimal {name} interpolator shared by the panel helpers. */
+export function t(dict: Record<string, string>, key: RezKey, values?: Record<string, string | number>): string {
+  let text = dict[key] ?? key
+  if (values !== undefined) {
+    for (const [name, value] of Object.entries(values)) {
+      text = text.replaceAll('{' + name + '}', String(value))
+    }
+  }
+  return text
+}

package/src/client/mount.tsx

@@ -0,0 +1,97 @@
+/**
+ * Rez panel view mounting. Single-occupant center-column takeover, same
+ * mechanism as the task board and ssh panels. The conversation subtree stays
+ * mounted under the panel.
+ */
+
+import { createRoot, type Root } from 'react-dom/client'
+import type { RezApi } from './api.ts'
+import type { PanelController } from './panel/controller.ts'
+import { RezPanel } from './panel/RezPanel.tsx'
+import css from './panel/panel.module.css'
+
+export const PANEL_VIEW_SELECTOR = '[data-dsh-rez-view]'
+
+const CONVERSATION_COLUMN_SELECTOR = '[data-pane="conversation"]'
+const ACTIVE_ATTR = 'data-dsh-rez-active'
+const OTHER_ACTIVE_ATTRS = ['data-dsh-taskboard-active', 'data-dsh-ssh-active']
+const ACTIVATE_EVENT = 'dsh-panel-activate'
+const PANEL_NAME = 'rez'
+
+function conversationColumn(): HTMLElement | undefined {
+  return document.querySelector<HTMLElement>(CONVERSATION_COLUMN_SELECTOR) ?? undefined
+}
+
+export function mountPanel(controller: PanelController, api: RezApi): () => void {
+  let root: Root | undefined
+  let container: HTMLDivElement | undefined
+
+  const ensure = (): void => {
+    if (container !== undefined) {
+      if (container.isConnected) return
+      root?.unmount()
+      root = undefined
+      container.remove()
+      container = undefined
+    }
+    const column = conversationColumn()
+    if (column === undefined) return
+    container = document.createElement('div')
+    container.dataset.dshRezView = ''
+    container.className = css.view
+    column.appendChild(container)
+    root = createRoot(container)
+    root.render(<RezPanel controller={controller} api={api} />)
+  }
+
+  const waitObserver = new MutationObserver(() => { ensure() })
+  waitObserver.observe(document.body, { childList: true, subtree: true })
+
+  // The shell may mount the center column after this plugin applies. Retry
+  // until the container is attached; ensure() is idempotent once connected.
+  const retryTimer = window.setInterval(() => {
+    ensure()
+    if (container?.isConnected === true) window.clearInterval(retryTimer)
+  }, 250)
+
+  const applyActive = (): void => {
+    if (controller.getSnapshot().panelOpen) {
+      for (const attr of OTHER_ACTIVE_ATTRS) document.documentElement.removeAttribute(attr)
+      document.documentElement.setAttribute(ACTIVE_ATTR, '')
+      document.dispatchEvent(new CustomEvent(ACTIVATE_EVENT, { detail: PANEL_NAME }))
+    } else {
+      document.documentElement.removeAttribute(ACTIVE_ATTR)
+    }
+  }
+  const onOtherActivate = (event: Event): void => {
+    const detail = (event as CustomEvent).detail
+    if ((detail === 'taskboard' || detail === 'ssh') && controller.getSnapshot().panelOpen) {
+      controller.close()
+    }
+  }
+  const SIDEBAR_ROW_SELECTOR = '[class*="sessionRow"], [class*="projectRow"], [class*="searchResultRow"], [class*="searchResultWorkspace"], [class*="newSession"]'
+  const onClickSidebarRow = (event: MouseEvent): void => {
+    if (!controller.getSnapshot().panelOpen) return
+    const target = event.target as HTMLElement | null
+    if (target === null) return
+    if (target.closest(SIDEBAR_ROW_SELECTOR) !== null) controller.close()
+  }
+  document.addEventListener('click', onClickSidebarRow, true)
+  document.addEventListener(ACTIVATE_EVENT, onOtherActivate)
+  const unsubscribe = controller.subscribe(applyActive)
+  applyActive()
+  ensure()
+
+  return () => {
+    window.clearInterval(retryTimer)
+    document.removeEventListener('click', onClickSidebarRow, true)
+    document.removeEventListener(ACTIVATE_EVENT, onOtherActivate)
+    waitObserver.disconnect()
+    unsubscribe()
+    document.documentElement.removeAttribute(ACTIVE_ATTR)
+    root?.unmount()
+    root = undefined
+    container?.remove()
+    container = undefined
+  }
+}

package/src/client/panel/AuditTab.tsx

@@ -0,0 +1,87 @@
+/**
+ * Audit tab: token/cost summary and recent ledger rows.
+ */
+
+import { useEffect, useState } from 'react'
+import type { RezApi } from '../api.ts'
+import type { RezAuditResponse } from '../../protocol.ts'
+import { errorMessage, tt } from './helpers.ts'
+import css from './panel.module.css'
+
+export function AuditTab({ api }: { api: RezApi }) {
+  const [audit, setAudit] = useState<RezAuditResponse | null>(null)
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  const load = async (): Promise<void> => {
+    setLoading(true)
+    setError('')
+    try {
+      setAudit(await api.audit())
+    } catch (err) {
+      setError(errorMessage(err))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { void load() }, [])
+
+  const reset = async (): Promise<void> => {
+    if (!window.confirm(tt('audit.resetConfirm'))) return
+    try {
+      await api.resetAudit()
+      await load()
+    } catch (err) {
+      setError(errorMessage(err))
+    }
+  }
+
+  if (loading) return <div className={css.message}>{tt('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>
+      </div>
+      {error !== '' && <div className={css.error}>{error}</div>}
+      <div className={css.cards}>
+        <div className={css.card}><div className={css.cardLabel}>{tt('audit.totalCalls')}</div><div className={css.cardValue}>{audit.totalCalls}</div></div>
+        <div className={css.card}><div className={css.cardLabel}>{tt('audit.inputTokens')}</div><div className={css.cardValue}>{audit.totalInputTokens}</div></div>
+        <div className={css.card}><div className={css.cardLabel}>{tt('audit.outputTokens')}</div><div className={css.cardValue}>{audit.totalOutputTokens}</div></div>
+        <div className={css.card}><div className={css.cardLabel}>{tt('audit.totalCost')}</div><div className={css.cardValue}>{audit.totalCost.toFixed(4)}</div></div>
+        <div className={css.card}><div className={css.cardLabel}>{tt('audit.monthCost')}</div><div className={css.cardValue}>{audit.monthCost.toFixed(4)}</div></div>
+        <div className={css.card}><div className={css.cardLabel}>{tt('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>
+            </tr>
+          </thead>
+          <tbody>
+            {audit.recent.length === 0 && <tr><td colSpan={6}>{tt('audit.empty')}</td></tr>}
+            {audit.recent.map(row => (
+              <tr key={row.id}>
+                <td>{new Date(row.ts).toLocaleString()}</td>
+                <td>{row.server}</td>
+                <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>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

package/src/client/panel/ConfigTab.tsx

@@ -0,0 +1,223 @@
+/**
+ * Config tab: role, billing rates, and a generic editor for every MCP server
+ * in config.servers (stdio and streamable-http), with one-click tests.
+ */
+
+import { useEffect, useState, type ReactNode } from 'react'
+import type { RezApi } from '../api.ts'
+import type { RezMcpServerSpec, RezPublicConfig, RezRoleId, RezTestResult } from '../../protocol.ts'
+import { errorMessage, tt } from './helpers.ts'
+import css from './panel.module.css'
+
+const ROLES: Array<{ value: RezRoleId; label: string }> = [
+  { value: 'all', label: 'role.all' },
+  { value: 'engineer', label: 'role.engineer' },
+  { value: 'sales', label: 'role.sales' },
+  { value: 'operations', label: 'role.operations' },
+]
+
+function Field({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className={css.field}>
+      <span className={css.label}>{label}</span>
+      {children}
+    </div>
+  )
+}
+
+function Section({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section className={css.section}>
+      <h3 className={css.sectionTitle}>{title}</h3>
+      {children}
+    </section>
+  )
+}
+
+function parseRecord(text: string): Record<string, string> {
+  const value: unknown = JSON.parse(text)
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) throw new Error('expected a JSON object')
+  const out: Record<string, string> = {}
+  for (const [key, item] of Object.entries(value as Record<string, unknown>)) {
+    out[key] = String(item)
+  }
+  return out
+}
+
+export function ConfigTab({ api }: { api: RezApi }) {
+  const [config, setConfig] = useState<RezPublicConfig | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [testing, setTesting] = useState(false)
+  const [message, setMessage] = useState('')
+  const [error, setError] = useState('')
+  const [results, setResults] = useState<RezTestResult[]>([])
+  const [argsText, setArgsText] = useState<Record<string, string>>({})
+  const [envText, setEnvText] = useState<Record<string, string>>({})
+  const [headerText, setHeaderText] = useState<Record<string, string>>({})
+
+  const initTexts = (next: RezPublicConfig): void => {
+    const args: Record<string, string> = {}
+    const envs: Record<string, string> = {}
+    const headers: Record<string, string> = {}
+    for (const [id, server] of Object.entries(next.servers)) {
+      args[id] = (server.args ?? []).join('\n')
+      envs[id] = JSON.stringify(server.env ?? {}, null, 2)
+      headers[id] = JSON.stringify(server.headers ?? {}, null, 2)
+    }
+    setArgsText(args)
+    setEnvText(envs)
+    setHeaderText(headers)
+  }
+
+  const load = async (): Promise<void> => {
+    try {
+      const next = await api.getConfig()
+      setConfig(next)
+      initTexts(next)
+    } catch (err) {
+      setError(errorMessage(err))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { void load() }, [])
+
+  if (loading) return <div className={css.message}>{tt('common.loading')}</div>
+  if (config === null) return <div className={css.error}>{error}</div>
+
+  const setTop = (key: 'enabled' | 'role', value: boolean | RezRoleId): void => {
+    setConfig(prev => prev === null ? prev : { ...prev, [key]: value })
+  }
+
+  const updateServer = (id: string, patch: Partial<RezMcpServerSpec>): void => {
+    setConfig(prev => prev === null ? prev : {
+      ...prev,
+      servers: { ...prev.servers, [id]: { ...prev.servers[id], ...patch } },
+    })
+  }
+
+  const save = async (): Promise<void> => {
+    setSaving(true)
+    setMessage('')
+    setError('')
+    try {
+      const saved = await api.saveConfig(config)
+      setConfig(saved)
+      initTexts(saved)
+      setMessage(tt('config.saved'))
+    } catch (err) {
+      setError(errorMessage(err))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const test = async (): Promise<void> => {
+    setTesting(true)
+    setMessage('')
+    setError('')
+    setResults([])
+    try {
+      setResults(await api.test())
+    } catch (err) {
+      setError(errorMessage(err))
+    } finally {
+      setTesting(false)
+    }
+  }
+
+  const renderResult = (result: RezTestResult): string => {
+    if (result.ok) return tt('config.testOk', { tools: result.toolCount ?? 0, latency: result.latencyMs ?? 0 })
+    return tt('config.testFail', { error: result.error ?? '' })
+  }
+
+  const commitArgs = (id: string): void => {
+    updateServer(id, { args: argsText[id] === '' ? [] : argsText[id].split('\n').map(line => line.trim()).filter(Boolean) })
+  }
+
+  const commitRecord = (id: string, kind: 'env' | 'headers'): void => {
+    const text = kind === 'env' ? envText[id] : headerText[id]
+    try {
+      const record = parseRecord(text ?? '{}')
+      updateServer(id, kind === 'env' ? { env: record } : { headers: record })
+      setError('')
+    } catch (err) {
+      setError(tt('config.jsonInvalid', { error: errorMessage(err) }))
+    }
+  }
+
+  return (
+    <div className={css.tabBody}>
+      <Section title={tt('config.role')}>
+        <Field label={tt('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>)}
+          </select>
+        </Field>
+        <Field label={tt('config.enabled')}>
+          <input className={css.checkbox} type="checkbox" checked={config.enabled} onChange={event => { setTop('enabled', event.target.checked) }} />
+        </Field>
+      </Section>
+
+      {Object.entries(config.servers).map(([id, server]) => (
+        <Section key={id} title={id}>
+          <Field label={tt('config.enabled')}>
+            <input className={css.checkbox} type="checkbox" checked={server.enabled} onChange={event => { updateServer(id, { enabled: event.target.checked }) }} />
+          </Field>
+          <Field label={tt('config.transport')}>
+            <select className={css.select} value={server.transport} onChange={event => { updateServer(id, { transport: event.target.value as RezMcpServerSpec['transport'] }) }}>
+              <option value="stdio">stdio</option>
+              <option value="streamable-http">streamable-http</option>
+            </select>
+          </Field>
+          {server.transport === 'stdio' ? (
+            <>
+              <Field label={tt('config.command')}>
+                <input className={css.input} value={server.command ?? ''} onChange={event => { updateServer(id, { command: event.target.value }) }} />
+              </Field>
+              <Field label={tt('config.args')}>
+                <textarea className={css.input} rows={3} value={argsText[id] ?? ''} onChange={event => { setArgsText(prev => ({ ...prev, [id]: event.target.value })) }} onBlur={() => { commitArgs(id) }} />
+              </Field>
+              <Field label={tt('config.env')}>
+                <textarea className={css.input} rows={4} value={envText[id] ?? '{}'} onChange={event => { setEnvText(prev => ({ ...prev, [id]: event.target.value })) }} onBlur={() => { commitRecord(id, 'env') }} />
+              </Field>
+            </>
+          ) : (
+            <>
+              <Field label={tt('config.url')}>
+                <input className={css.input} value={server.url ?? ''} onChange={event => { updateServer(id, { url: event.target.value }) }} />
+              </Field>
+              <Field label={tt('config.headers')}>
+                <textarea className={css.input} rows={4} value={headerText[id] ?? '{}'} onChange={event => { setHeaderText(prev => ({ ...prev, [id]: event.target.value })) }} onBlur={() => { commitRecord(id, 'headers') }} />
+              </Field>
+            </>
+          )}
+        </Section>
+      ))}
+
+      <Section title={tt('config.billing')}>
+        <Field label={tt('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')}>
+          <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')}>
+          <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>
+      </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>
+  )
+}

package/src/client/panel/RezPanel.tsx

@@ -0,0 +1,50 @@
+/**
+ * Rez Suite panel shell: header + three tabs (config/status/audit).
+ */
+
+import { useState } from 'react'
+import type { RezApi } from '../api.ts'
+import type { PanelController } from './controller.ts'
+import { tt } from './helpers.ts'
+import { AuditTab } from './AuditTab.tsx'
+import { ConfigTab } from './ConfigTab.tsx'
+import { StatusTab } from './StatusTab.tsx'
+import css from './panel.module.css'
+
+export type RezTab = 'config' | 'status' | 'audit'
+
+export interface RezPanelProps {
+  controller: PanelController
+  api: RezApi
+}
+
+const TABS: ReadonlyArray<{ id: RezTab; label: () => string }> = [
+  { id: 'config', label: () => tt('tab.config') },
+  { id: 'status', label: () => tt('tab.status') },
+  { id: 'audit', label: () => tt('tab.audit') },
+]
+
+export function RezPanel({ controller, api }: RezPanelProps) {
+  const [activeTab, setActiveTab] = useState<RezTab>('config')
+
+  return (
+    <div className={css.panel}>
+      <div className={css.panelHeader}>
+        <h2 className={css.panelTitle}>{tt('panel.title')}</h2>
+        <button type="button" className={css.iconButton} title={tt('common.close')} aria-label={tt('common.close')} onClick={() => { controller.close() }}>x</button>
+      </div>
+      <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>
+      <div className={css.panelContent}>
+        {activeTab === 'config' && <ConfigTab api={api} />}
+        {activeTab === 'status' && <StatusTab api={api} />}
+        {activeTab === 'audit' && <AuditTab api={api} />}
+      </div>
+    </div>
+  )
+}