@goodandready/dsh-voice 0.9.6 → 0.9.7

package/lib/client.js

@@ -2020,14 +2020,20 @@ window.__ModuleLoader__.load({
       // locale: NS is required — the core resolves `label` through the inject face,
       // and without it the label throws "cannot get property t without inject" while
       // the slot snapshot is built, breaking the whole client batch.
-      ctx.slots.inject('conversation.input.right', () => ctx.slots.register(
-        { name: 'conversation.input.right', id: '@goodandready/dsh-voice', order: 6, locale: NS, label: () => t('title') },
-        (props) => React.createElement(VoiceButtons, { input: props.input, inputActions: props.inputActions }),
-      ))
-      ctx.slots.inject('conversation.input.dock', () => ctx.slots.register(
-        { name: 'conversation.input.dock', id: 'dsh-voice-rec', order: 0, locale: NS, label: () => t('recordSlot') },
-        (props) => React.createElement(RecordPill, { input: props.input, inputActions: props.inputActions, ctx: ctx }),
-      ))
+      ctx.effect(() => {
+        const offRight = ctx.slots.inject('conversation.input.right', () => ctx.slots.register(
+          { name: 'conversation.input.right', id: '@goodandready/dsh-voice', order: 6, locale: NS, label: () => t('title') },
+          (props) => React.createElement(VoiceButtons, { input: props.input, inputActions: props.inputActions }),
+        ))
+        const offDock = ctx.slots.inject('conversation.input.dock', () => ctx.slots.register(
+          { name: 'conversation.input.dock', id: 'dsh-voice-rec', order: 0, locale: NS, label: () => t('recordSlot') },
+          (props) => React.createElement(RecordPill, { input: props.input, inputActions: props.inputActions, ctx: ctx }),
+        ))
+        return () => {
+          if (typeof offRight === 'function') offRight()
+          if (typeof offDock === 'function') offDock()
+        }
+      }, 'dsh-voice: composer slots')
     }
 
     // ------------------------------------------------------- settings page
@@ -2158,6 +2164,7 @@ window.__ModuleLoader__.load({
 
     // One chain editor: provider+model rows with reordering.
     function ChainEditor(props) {
+      const t = (props && props.t) || moduleT
       const rows = Array.isArray(props.value) ? props.value : []
       const change = (i, patch) => {
         const next = rows.map((r, k) => (k === i ? Object.assign({}, r, patch) : r))
@@ -2198,6 +2205,7 @@ window.__ModuleLoader__.load({
 
     // Custom providers: name, API template, where to call, how to authorize.
     function CustomEditor(props) {
+      const t = (props && props.t) || moduleT
       const rows = Array.isArray(props.value) ? props.value : []
       const change = (i, patch) => props.onChange(rows.map((r, k) => (k === i ? Object.assign({}, r, patch) : r)))
       const remove = (i) => props.onChange(rows.filter((_, k) => k !== i))
@@ -2216,7 +2224,7 @@ window.__ModuleLoader__.load({
             React.createElement('select', {
               value: row.template || 'openai-transcriptions', disabled: !props.writable,
               onChange: (e) => change(i, { template: e.target.value }),
-            }, TEMPLATES.map((t) => React.createElement('option', { key: t, value: t }, t))),
+            }, TEMPLATES.map((tmpl) => React.createElement('option', { key: tmpl, value: tmpl }, tmpl))),
             React.createElement('button', {
               type: 'button', className: 'dvs-mini', title: t('remove'),
               disabled: !props.writable, onClick: () => remove(i),
@@ -2244,6 +2252,598 @@ window.__ModuleLoader__.load({
         ),
       )
     }
+    // Provider Telemetry & Latency Dashboard
+    function ProviderDashboard(props) {
+      const t = props.t || moduleT
+      const statsData = props.statsData || {}
+      return React.createElement('div', { className: 'cb-section-card' },
+        React.createElement('div', { className: 'cb-section-title' },
+          React.createElement('span', null, '📊 ' + t('providerDashboard')),
+          React.createElement('button', {
+            type: 'button', className: 'cb-btn', style: { fontSize: '12px', padding: '4px 8px' },
+            onClick: props.onRefresh,
+          }, '🔄 ' + t('refreshStats')),
+        ),
+        React.createElement('div', { className: 'dvo-dash' },
+          React.createElement('div', { className: 'dvo-dash-grid' },
+            Object.keys(statsData).length === 0
+              ? React.createElement('div', { className: 'dvs-sub' }, t('idle'))
+              : Object.entries(statsData).map(([key, item]) => {
+                  const avg = item.avgTookMs || 0
+                  const hasErrors = item.failures > 0
+                  let badgeClass = 'dvo-badge-idle'
+                  let badgeText = t('idle')
+                  if (item.attempts > 0) {
+                    if (hasErrors && item.successes === 0) {
+                      badgeClass = 'dvo-badge-err'
+                      badgeText = t('error')
+                    } else if (avg > 0 && avg < 400) {
+                      badgeClass = 'dvo-badge-fast'
+                      badgeText = avg + 'ms · ' + t('fast')
+                    } else if (avg >= 400 && avg <= 1500) {
+                      badgeClass = 'dvo-badge-norm'
+                      badgeText = avg + 'ms · ' + t('normal')
+                    } else {
+                      badgeClass = 'dvo-badge-slow'
+                      badgeText = avg + 'ms · ' + t('slow')
+                    }
+                  }
+                  const rate = item.attempts > 0 ? Math.round((item.successes / item.attempts) * 100) : 100
+                  return React.createElement('div', { key, className: 'dvo-dash-item', title: item.lastError ? `Error: ${item.lastError}` : '' },
+                    React.createElement('div', { className: 'dvo-dash-name' }, key),
+                    React.createElement('div', { className: 'dvo-dash-row' },
+                      React.createElement('span', { className: 'dvo-badge ' + badgeClass }, badgeText),
+                      React.createElement('span', null, rate + '%'),
+                    ),
+                    React.createElement('div', { className: 'dvo-dash-row' },
+                      React.createElement('span', null, `${item.successes}/${item.attempts}`),
+                      React.createElement('span', null, t('successRate')),
+                    ),
+                  )
+                }),
+          ),
+        ),
+      )
+    }
+    // 5. Hardware & Audio Engines Card
+    function HardwareOptionsCard(props) {
+      const t = props.t || moduleT
+      const draft = props.draft
+      const setTop = props.setTop
+      const writable = props.writable
+      const catching = props.catching
+      const setCatching = props.setCatching
+      const devices = props.devices || []
+      const testingMic = props.testingMic
+      const toggleTestMic = props.toggleTestMic
+      const testLevel = props.testLevel || 0
+      const gateDbVal = props.gateDbVal
+      const gateThresholdPercent = props.gateThresholdPercent
+      const onClearKey = props.onClearKey
+
+      const textField = (key, label, hint) => React.createElement('div', { className: 'cb-field' },
+        React.createElement('label', null, label),
+        React.createElement('input', {
+          type: 'text', value: draft && draft[key] !== undefined ? draft[key] : '', disabled: !writable,
+          onChange: (e) => setTop(key, e.target.value),
+        }),
+        React.createElement('span', { className: 'dvs-sub' }, hint),
+      )
+
+      return React.createElement('div', { className: 'cb-section-card' },
+        React.createElement('div', { className: 'cb-section-title' },
+          React.createElement('span', null, '⚙️ ' + t('hardwareTitle')),
+        ),
+        React.createElement('div', { className: 'cb-section-desc' }, t('hardwareDesc')),
+        // Hotkey picker
+        React.createElement('div', { className: 'cb-field' },
+          React.createElement('label', null, t('hotkey')),
+          React.createElement('div', { className: 'cb-row' },
+            React.createElement('button', {
+              type: 'button', className: 'cb-btn cb-btn-primary', disabled: !writable,
+              onClick: () => setCatching(true),
+            }, catching ? t('pressKey') : keyLabel(draft && draft.hotkey)),
+            React.createElement('button', {
+              type: 'button', className: 'cb-btn cb-btn-mini', title: t('clearKey'),
+              disabled: !writable, onClick: onClearKey,
+            }, '×'),
+          ),
+          React.createElement('span', { className: 'dvs-sub' }, t('hotkeyHint1') + t('hotkeyHint2')),
+        ),
+        // Mic & noise gate
+        React.createElement('div', { className: 'cb-field' },
+          React.createElement('label', null, t('mic')),
+          React.createElement('div', { className: 'cb-row' },
+            React.createElement('select', {
+              value: String((draft && draft.micDeviceId) ?? ''), disabled: !writable || testingMic,
+              onChange: (e) => setTop('micDeviceId', e.target.value),
+              style: { flex: 1 },
+            },
+              React.createElement('option', { value: '' }, t('micDefault')),
+              devices.map((d) => React.createElement('option', { key: d.deviceId, value: d.deviceId },
+                d.label || d.deviceId.slice(0, 12))),
+            ),
+            React.createElement('button', {
+              type: 'button',
+              className: 'cb-btn ' + (testingMic ? 'cb-btn-primary' : 'cb-btn-secondary'),
+              onClick: toggleTestMic,
+              style: { flex: 'none' },
+            }, testingMic ? t('stopTest') : t('testMic')),
+          ),
+          testingMic ? React.createElement('div', { className: 'dvo-mic-test' },
+            React.createElement('span', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary)' } }, t('micLevel') + ':'),
+            React.createElement('div', { className: 'dvo-meter-bar' },
+              React.createElement('div', { className: 'dvo-meter-fill', style: { width: `${testLevel}%` } }),
+              gateThresholdPercent > 0 ? React.createElement('div', { className: 'dvo-meter-gate', style: { left: `${gateThresholdPercent}%` }, title: `${gateDbVal} dB` }) : null,
+            ),
+            React.createElement('span', { style: { fontSize: '11px', fontVariantNumeric: 'tabular-nums', width: '32px', textAlign: 'right' } }, `${testLevel}%`),
+          ) : null,
+          React.createElement('div', { className: 'cb-row', style: { marginTop: '6px' } },
+            React.createElement('span', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)', minWidth: '120px' } }, t('noiseGate') + ':'),
+            React.createElement('select', {
+              value: String(gateDbVal), disabled: !writable,
+              onChange: (e) => setTop('noiseGateDb', Number(e.target.value)),
+              style: { flex: 1 },
+            },
+              React.createElement('option', { value: '-999' }, t('noiseGateOff')),
+              React.createElement('option', { value: '-50' }, '-50 dB (Low / Gentle)'),
+              React.createElement('option', { value: '-45' }, '-45 dB (Standard Default)'),
+              React.createElement('option', { value: '-35' }, '-35 dB (Medium Room)'),
+              React.createElement('option', { value: '-25' }, '-25 dB (High / Mechanical Clicks)'),
+            ),
+          ),
+          React.createElement('span', { className: 'dvs-sub' }, t('noiseGateHint')),
+        ),
+        // Endpoint text fields
+        React.createElement('div', { className: 'cb-grid-2' },
+          textField('whisperUrl', t('whisperEndpoint'), t('whisperEndpointHint')),
+          textField('whisperBin', t('whisperBin'), t('whisperBinHint')),
+          textField('whisperModel', t('whisperModel'), t('whisperModelHint')),
+          textField('deepgramBaseUrl', t('deepgramEndpoint'), t('deepgramEndpointHint')),
+          textField('sensevoiceUrl', t('sensevoiceEndpoint'), t('sensevoiceEndpointHint')),
+          textField('sensevoiceBin', t('sensevoiceBin'), t('sensevoiceBinHint')),
+          textField('sensevoiceModel', t('sensevoiceModel'), t('sensevoiceModelHint')),
+          textField('polishBaseUrl', t('polishBaseUrl'), t('polishBaseUrlHint')),
+          textField('polishModel', t('polishModel'), ''),
+          textField('polishKeyEnv', t('polishKeyEnv'), ''),
+        ),
+        // Engine checkboxes
+        React.createElement('div', { className: 'cb-row' },
+          React.createElement('label', { className: 'cb-check-label' },
+            React.createElement('input', {
+              type: 'checkbox', checked: !!(draft && draft.autoStart), disabled: !writable,
+              onChange: (e) => setTop('autoStart', e.target.checked),
+            }),
+            t('whisperAutostart'),
+          ),
+          React.createElement('label', { className: 'cb-check-label' },
+            React.createElement('input', {
+              type: 'checkbox', checked: !!(draft && draft.sensevoiceAutostart), disabled: !writable,
+              onChange: (e) => setTop('sensevoiceAutostart', e.target.checked),
+            }),
+            t('sensevoiceAutostart'),
+          ),
+          React.createElement('label', { className: 'cb-check-label' },
+            React.createElement('input', {
+              type: 'checkbox', checked: !!(draft && draft.localOnly), disabled: !writable,
+              onChange: (e) => setTop('localOnly', e.target.checked),
+            }),
+            t('localOnly'),
+          ),
+          React.createElement('label', { className: 'cb-check-label' },
+            React.createElement('input', {
+              type: 'checkbox', checked: !!(draft && draft.beep), disabled: !writable,
+              onChange: (e) => setTop('beep', e.target.checked),
+            }),
+            t('beep'),
+          ),
+          React.createElement('label', { className: 'cb-check-label' },
+            React.createElement('input', {
+              type: 'checkbox', checked: draft ? draft.noiseSuppression !== false : true, disabled: !writable,
+              onChange: (e) => setTop('noiseSuppression', e.target.checked),
+            }),
+            t('noiseSuppression'),
+          ),
+          React.createElement('label', { className: 'cb-check-label' },
+            React.createElement('input', {
+              type: 'checkbox', checked: draft ? draft.contextGlossary !== false : true, disabled: !writable,
+              onChange: (e) => setTop('contextGlossary', e.target.checked),
+            }),
+            t('contextGlossary'),
+          ),
+          React.createElement('label', { className: 'cb-check-label' },
+            React.createElement('input', {
+              type: 'checkbox', checked: !!(draft && draft.voiceCommands), disabled: !writable,
+              onChange: (e) => setTop('voiceCommands', e.target.checked),
+            }),
+            t('voiceCommandsLabel'),
+          ),
+          React.createElement('label', { className: 'cb-check-label' },
+            React.createElement('input', {
+              type: 'checkbox', checked: !!(draft && draft.normalizeTranscript), disabled: !writable,
+              onChange: (e) => setTop('normalizeTranscript', e.target.checked),
+            }),
+            t('normalizeTranscript'),
+          ),
+        ),
+        // Visualizer select
+        React.createElement('div', { className: 'cb-field' },
+          React.createElement('label', null, t('visualizerStyle')),
+          React.createElement('select', {
+            value: String((draft && draft.visualizerStyle) || 'liquid-wave'), disabled: !writable,
+            onChange: (e) => setTop('visualizerStyle', e.target.value),
+          },
+            React.createElement('option', { value: 'liquid-wave' }, t('visLiquidWave')),
+            React.createElement('option', { value: 'dynamic-orb' }, t('visDynamicOrb')),
+            React.createElement('option', { value: 'bars' }, t('visBars')),
+            React.createElement('option', { value: 'off' }, t('visOff')),
+          ),
+        ),
+        // Vocabulary textarea
+        React.createElement('div', { className: 'cb-field' },
+          React.createElement('label', null, t('vocabulary')),
+          React.createElement('textarea', {
+            rows: 3, disabled: !writable,
+            value: Array.isArray(draft && draft.vocabulary) ? draft.vocabulary.join('\n') : '',
+            onChange: (e) => setTop('vocabulary', e.target.value.split('\n').map((x) => x.trim()).filter(Boolean)),
+          }),
+        ),
+      )
+    }
+    // Custom hooks for VoiceSection modularity
+    function useSensevoiceInstaller(fetchStatus) {
+      const [sensevoiceState, setSensevoiceState] = React.useState(null)
+      const [installingSensevoice, setInstallingSensevoice] = React.useState(false)
+
+      const fetchSensevoice = () => {
+        fetch('/dsh-voice/sensevoice-installer')
+          .then((r) => r.json())
+          .then((d) => {
+            setSensevoiceState(d)
+            setInstallingSensevoice(!!(d && d.installing))
+          })
+          .catch(() => {})
+      }
+
+      React.useEffect(() => {
+        fetchSensevoice()
+      }, [])
+
+      const triggerInstallSensevoice = () => {
+        setInstallingSensevoice(true)
+        fetch('/dsh-voice/sensevoice-installer', {
+          method: 'POST',
+          headers: {
+            'x-dsh-plugin-update': '1',
+            'Content-Type': 'application/json',
+          },
+        })
+          .then((r) => r.json())
+          .then(() => {
+            const timer = setInterval(() => {
+              fetch('/dsh-voice/sensevoice-installer')
+                .then((r) => r.json())
+                .then((d) => {
+                  setSensevoiceState(d)
+                  if (!d.installing) {
+                    clearInterval(timer)
+                    setInstallingSensevoice(false)
+                    if (typeof fetchStatus === 'function') fetchStatus()
+                  }
+                })
+                .catch(() => clearInterval(timer))
+            }, 2000)
+          })
+          .catch(() => setInstallingSensevoice(false))
+      }
+
+      return { sensevoiceState, installingSensevoice, triggerInstallSensevoice }
+    }
+
+    function useMicTester(draft, value, setErr) {
+      const [testingMic, setTestingMic] = React.useState(false)
+      const [testLevel, setTestLevel] = React.useState(0)
+      const testRef = React.useRef(null)
+
+      const toggleTestMic = async () => {
+        if (testingMic) {
+          if (testRef.current) {
+            testRef.current.active = false
+            try { testRef.current.stream.getTracks().forEach((t) => t.stop()) } catch (e) { /* already stopped */ }
+            if (testRef.current.audioCtx) { try { testRef.current.audioCtx.close() } catch (e) { /* already closed */ } }
+            testRef.current = null
+          }
+          setTestingMic(false)
+          setTestLevel(0)
+          return
+        }
+        try {
+          const devId = (draft && draft.micDeviceId) || (value && value.micDeviceId) || ''
+          const audio = { echoCancellation: true, noiseSuppression: true, autoGainControl: true }
+          if (devId) audio.deviceId = { exact: devId }
+          const stream = await navigator.mediaDevices.getUserMedia({ audio })
+          const AC = typeof AudioContext !== 'undefined' ? AudioContext : (typeof webkitAudioContext !== 'undefined' ? webkitAudioContext : null)
+          if (!AC) return
+          const audioCtx = new AC()
+          if (audioCtx.state === 'suspended') await audioCtx.resume().catch(() => {})
+          const src = audioCtx.createMediaStreamSource(stream)
+          let lastNode = src
+          try {
+            const filter = audioCtx.createBiquadFilter()
+            filter.type = 'highpass'
+            filter.frequency.value = 80
+            filter.Q.value = 0.707
+            src.connect(filter)
+            lastNode = filter
+          } catch (e) { /* filter fallback */ }
+          const analyser = audioCtx.createAnalyser()
+          analyser.fftSize = 128
+          lastNode.connect(analyser)
+          testRef.current = { stream, audioCtx, analyser, active: true }
+          setTestingMic(true)
+
+          const check = () => {
+            if (!testRef.current || !testRef.current.active) return
+            const arr = new Uint8Array(analyser.frequencyBinCount)
+            analyser.getByteFrequencyData(arr)
+            let sum = 0
+            for (let i = 0; i < arr.length; i++) sum += arr[i]
+            const avg = sum / (arr.length || 1)
+            setTestLevel(Math.min(100, Math.round((avg / 128) * 100)))
+            requestAnimationFrame(check)
+          }
+          requestAnimationFrame(check)
+        } catch (e) {
+          if (typeof setErr === 'function') setErr(String(e && e.message ? e.message : e))
+        }
+      }
+
+      React.useEffect(() => {
+        return () => {
+          if (testRef.current) {
+            testRef.current.active = false
+            try { testRef.current.stream.getTracks().forEach((t) => t.stop()) } catch (e) { /* already stopped */ }
+            if (testRef.current.audioCtx) { try { testRef.current.audioCtx.close() } catch (e) { /* already closed */ } }
+            testRef.current = null
+          }
+        }
+      }, [])
+
+      const gateDbVal = Number((draft && draft.noiseGateDb !== undefined) ? draft.noiseGateDb : (value && value.noiseGateDb !== undefined) ? value.noiseGateDb : -45)
+      const gateThresholdPercent = gateDbVal <= -90 ? 0 : Math.min(100, Math.max(0, Math.round(((gateDbVal + 60) / 40) * 100)))
+
+      return { testingMic, testLevel, toggleTestMic, gateDbVal, gateThresholdPercent }
+    }
+
+    function usePluginUpdater() {
+      const [updaterStatus, setUpdaterStatus] = React.useState(null)
+      const [updating, setUpdating] = React.useState(false)
+      const [updaterMsg, setUpdaterMsg] = React.useState('')
+      const [updaterLoading, setUpdaterLoading] = React.useState(false)
+
+      const checkUpdater = React.useCallback(async () => {
+        setUpdaterLoading(true)
+        setUpdaterMsg('')
+        try {
+          const res = await fetch('/api/dsh-voice/update', {
+            headers: { accept: 'application/json' },
+            cache: 'no-store',
+          })
+          if (!res.ok) throw new Error(`HTTP ${res.status}`)
+          const data = await res.json()
+          setUpdaterStatus(data)
+        } catch (e) {
+          /* best effort update check */
+        } finally {
+          setUpdaterLoading(false)
+        }
+      }, [])
+
+      const onUpdateNow = async () => {
+        if (updating) return
+        setUpdating(true)
+        setUpdaterMsg('')
+        try {
+          const res = await fetch('/api/dsh-voice/update', {
+            method: 'POST',
+            headers: {
+              'content-type': 'application/json',
+              'x-dsh-plugin-update': '1',
+            },
+            cache: 'no-store',
+          })
+          const data = await res.json().catch(() => ({}))
+          if (!res.ok || data.ok === false) {
+            throw new Error(data.error || `HTTP ${res.status}`)
+          }
+          setUpdaterMsg(data.message || 'Update completed successfully.')
+          checkUpdater()
+        } catch (err) {
+          setUpdaterMsg(err && err.message ? err.message : String(err))
+        } finally {
+          setUpdating(false)
+        }
+      }
+
+      return { updaterStatus, updating, updaterMsg, updaterLoading, checkUpdater, onUpdateNow }
+    }
+    // Developer Lexicon & IT Jargon
+    function JargonEditor(props) {
+      const t = props.t || moduleT
+      const draft = props.draft
+      const setTop = props.setTop
+      const writable = props.writable
+      const [jargonInput, setJargonInput] = React.useState(null)
+
+      return React.createElement('div', { className: 'cb-section-card' },
+        React.createElement('div', { className: 'cb-section-title' },
+          React.createElement('span', null, '📖 ' + t('jargonTitle')),
+        ),
+        React.createElement('label', { className: 'cb-check-label', style: { marginBottom: '8px' } },
+          React.createElement('input', {
+            type: 'checkbox',
+            checked: draft ? draft.techJargonCorrection !== false : true,
+            disabled: !writable,
+            onChange: (e) => setTop('techJargonCorrection', e.target.checked),
+          }),
+          t('techJargonCorrection'),
+        ),
+        React.createElement('div', { className: 'cb-field' },
+          React.createElement('label', null, t('jargonAdd') + ' (spoken -> replacement)'),
+          React.createElement('textarea', {
+            rows: 3,
+            disabled: !writable,
+            placeholder: t('jargonPlaceholder'),
+            value: jargonInput !== null
+              ? jargonInput
+              : (Array.isArray(draft && draft.jargonDictionary)
+                  ? draft.jargonDictionary.map((item) => item && item.from ? `${item.from} -> ${item.to}` : '').filter(Boolean).join('\n')
+                  : ''),
+            onChange: (e) => setJargonInput(e.target.value),
+            onBlur: () => {
+              if (jargonInput === null) return
+              const lines = jargonInput.split('\n')
+              const parsed = lines
+                .map((line) => {
+                  const parts = line.split(/->|=|:/)
+                  if (parts.length >= 2) {
+                    const from = parts[0].trim()
+                    const to = parts.slice(1).join(':').trim()
+                    if (from && to) return { from, to }
+                  }
+                  return null
+                })
+                .filter(Boolean)
+              setTop('jargonDictionary', parsed)
+            },
+          }),
+        ),
+      )
+    }
+    // SenseVoice Local ASR (1-Click Setup)
+    function SensevoiceSection(props) {
+      const t = props.t || moduleT
+      const sensevoiceState = props.sensevoiceState
+      const installingSensevoice = props.installingSensevoice
+      const writable = props.writable
+      const onInstall = props.onInstall
+
+      return React.createElement('div', { className: 'cb-section-card' },
+        React.createElement('div', { className: 'cb-section-title' },
+          React.createElement('span', null, '⚡ ' + t('sensevoiceTitle')),
+          sensevoiceState && sensevoiceState.installed
+            ? React.createElement('span', { className: 'cb-badge cb-badge-ok' }, t('sensevoiceReady') + ' (small-int8)')
+            : React.createElement('span', { className: 'cb-badge cb-badge-warn' },
+                installingSensevoice ? t('sensevoiceDownloading') : t('sensevoiceNotInstalled')
+              ),
+        ),
+        React.createElement('div', { className: 'cb-section-desc' }, t('sensevoiceDesc')),
+        React.createElement('div', { className: 'dvo-installer-box' },
+          React.createElement('div', { className: 'cb-row', style: { alignItems: 'center', justifyContent: 'space-between', gap: '12px' } },
+            React.createElement('div', { style: { fontSize: '12px', color: 'var(--dsw-alias-content-secondary)' } },
+              sensevoiceState && sensevoiceState.path
+                ? ('~/' + sensevoiceState.path.replace(/^.*[\\/](\.dsh[\\/]models[\\/].*)$/, '$1'))
+                : '~/.dsh/models/sensevoice'
+            ),
+            React.createElement('button', {
+              type: 'button',
+              className: 'cb-btn cb-btn-primary',
+              style: { fontSize: '12px', padding: '6px 12px' },
+              disabled: installingSensevoice || !writable,
+              onClick: onInstall,
+            }, installingSensevoice ? ('⏳ ' + t('installingSensevoice')) : ('📥 ' + t('installSensevoice'))),
+          ),
+          installingSensevoice
+            ? React.createElement('div', { style: { marginTop: '8px' } },
+                React.createElement('div', { className: 'dvo-progress-bar' },
+                  React.createElement('div', { className: 'dvo-progress-bar-fill' })
+                ),
+                React.createElement('div', { style: { fontSize: '11px', marginTop: '4px', color: 'var(--dsw-alias-content-secondary)' } },
+                  (sensevoiceState && sensevoiceState.progress) || t('sensevoiceDownloading')
+                )
+              )
+            : null
+        )
+      )
+    }
+    // 1. Connection & Engine Status Card
+    function ConnectionStatusCard(props) {
+      const t = props.t || moduleT
+      const hostOnline = props.hostOnline
+      const statusLatency = props.statusLatency
+      const whisperRunning = props.whisperRunning
+      const providerCount = props.providerCount
+      const onRefresh = props.onRefresh
+
+      return React.createElement('div', { className: 'cb-section-card' },
+        React.createElement('div', { className: 'cb-section-title' },
+          React.createElement('span', null, t('statusTitle')),
+          React.createElement('button', {
+            type: 'button', className: 'cb-btn', style: { fontSize: '12px', padding: '4px 8px' },
+            onClick: onRefresh,
+          }, '🔄 ' + t('refreshStats')),
+        ),
+        React.createElement('div', { className: 'cb-row', style: { alignItems: 'center', gap: '12px', flexWrap: 'wrap' } },
+          React.createElement('span', { className: 'cb-badge ' + (hostOnline ? 'cb-badge-ok' : 'cb-badge-err') },
+            hostOnline ? (`✓ ${t('hostOnline')} (${statusLatency}ms)`) : (`✗ ${t('hostOffline')}`)
+          ),
+          React.createElement('span', { className: 'cb-badge ' + (whisperRunning ? 'cb-badge-ok' : 'cb-badge-warn') },
+            whisperRunning ? (`✓ ${t('whisperReady')}`) : (`· ${t('whisperStopped')}`)
+          ),
+          React.createElement('span', { className: 'cb-badge' }, `${providerCount} ${t('providersAvailable')}`),
+        ),
+      )
+    }
+    // Plugin Version & Updates Card
+    function UpdaterCard(props) {
+      const t = props.t || moduleT
+      const updaterStatus = props.updaterStatus
+      const updaterLoading = props.updaterLoading
+      const updating = props.updating
+      const updaterMsg = props.updaterMsg
+      const onCheck = props.onCheck
+      const onUpdateNow = props.onUpdateNow
+
+      return React.createElement('div', { className: 'cb-section-card' },
+        React.createElement('div', { className: 'cb-section-title' },
+          React.createElement('span', null, '📦 ' + t('versionTitle')),
+          React.createElement('button', {
+            type: 'button', className: 'cb-btn', style: { fontSize: '12px', padding: '4px 8px' },
+            onClick: onCheck, disabled: updaterLoading || updating,
+          }, updaterLoading ? '⏳…' : '🔄 ' + t('refreshStats')),
+        ),
+        React.createElement('div', { className: 'cb-section-desc' }, t('versionHint')),
+        React.createElement('div', { className: 'cb-row', style: { alignItems: 'center', gap: '12px' } },
+          React.createElement('span', { className: 'cb-badge cb-badge-ok' },
+            'v' + ((updaterStatus && updaterStatus.currentVersion) || '0.9.6')
+          ),
+          updaterStatus && updaterStatus.updateAvailable
+            ? React.createElement('span', { className: 'cb-badge cb-badge-warn' },
+                t('updateAvailable') + ': v' + updaterStatus.latestVersion
+              )
+            : React.createElement('span', { className: 'cb-badge cb-badge-ok' },
+                t('upToDate')
+              ),
+          updaterStatus && updaterStatus.updateAvailable
+            ? React.createElement('button', {
+                type: 'button', className: 'cb-btn cb-btn-primary', style: { fontSize: '12px', padding: '4px 10px' },
+                onClick: onUpdateNow, disabled: updating,
+              }, updating ? t('updating') : t('updateNow'))
+            : null,
+        ),
+        updaterMsg
+          ? React.createElement('div', {
+              style: {
+                marginTop: '8px',
+                fontSize: '12px',
+                color: updaterMsg.includes('fail') || updaterMsg.includes('失败')
+                  ? 'var(--dsw-alias-state-warning-primary)'
+                  : 'var(--dsw-alias-state-success-primary)',
+              },
+            }, updaterMsg)
+          : null,
+      )
+    }
     // ------------------------------------------------------- settings voice section
     function VoiceSection(props) {
       const t = (props && props.t) || moduleT
@@ -2263,7 +2863,6 @@ window.__ModuleLoader__.load({
       const [err, setErr] = React.useState('')
       const [serverConfig, setServerConfig] = React.useState(null)
       const [configLoading, setConfigLoading] = React.useState(true)
-      const [jargonInput, setJargonInput] = React.useState(null)
 
       React.useEffect(() => {
         let alive = true
@@ -2336,165 +2935,55 @@ window.__ModuleLoader__.load({
             } else if (ctx.settingsScope && typeof ctx.settingsScope.describe === 'function') {
               ctx.settingsScope.describe().load()
             }
-          } catch (e) { /* service not up yet */ }
-        }, 1000)
-        return () => clearInterval(timer)
-      }, [ready])
-
-      const deepClone = (obj) => {
-        if (typeof structuredClone === 'function') {
-          try { return structuredClone(obj) } catch (e) { /* fallback */ }
-        }
-        try { return JSON.parse(JSON.stringify(obj)) } catch (e) { return Object.assign({}, obj) }
-      }
-
-      React.useEffect(() => { if (ready && draft === null) setDraft(deepClone(value)) }, [ready, draft, value])
-
-      React.useEffect(() => {
-        if (!ready) return
-        const val = value || {}
-        voice.settings = Object.assign({}, voice.settings, {
-          vadSilenceMs: Number(val.dictation && val.dictation.vadSilenceMs) || 700,
-          autoSendMs: Number(val.message && val.message.autoSendMs) || 4000,
-          beep: !!val.beep,
-          micDeviceId: String(val.micDeviceId || ''),
-          historyLimit: Number(val.historyLimit) || 20,
-          voiceCommands: !!val.voiceCommands,
-          sendDelayMs: Number(val.dictation && val.dictation.sendDelayMs) || 0,
-          stream: !!(val.dictation && val.dictation.stream),
-          streamChunkMs: Number(val.dictation && val.dictation.streamChunkMs) || 1200,
-          vadAdapt: Number(val.dictation && val.dictation.vadAdapt) || 0,
-          wakeWord: String(val.wakeWord || ''),
-          bargeIn: !!val.bargeIn,
-          polishSend: !!(val.message && val.message.polishSend),
-          sessionCommands: !!(val.message && val.message.sessionCommands),
-          polishBaseUrl: String(val.polishBaseUrl || ''),
-          noiseSuppression: val.noiseSuppression !== false,
-          noiseGateDb: Number(val.noiseGateDb !== undefined ? val.noiseGateDb : -45),
-          contextGlossary: val.contextGlossary !== false,
-          visualizerStyle: val.visualizerStyle || 'liquid-wave',
-          gatedTurnTaking: val.gatedTurnTaking !== false,
-          autoSendVisualRing: val.autoSendVisualRing !== false,
-          voiceActions: val.voiceActions !== false,
-          techJargonCorrection: val.techJargonCorrection !== false,
-          liveInterimPreview: val.liveInterimPreview !== false,
-          structuredPromptVoice: val.structuredPromptVoice !== false,
-        })
-      }, [ready, value])
-
-      const [sensevoiceState, setSensevoiceState] = React.useState(null)
-      const [installingSensevoice, setInstallingSensevoice] = React.useState(false)
-
-      const fetchSensevoice = () => {
-        fetch('/dsh-voice/sensevoice-installer')
-          .then((r) => r.json())
-          .then((d) => {
-            setSensevoiceState(d)
-            setInstallingSensevoice(!!(d && d.installing))
-          })
-          .catch(() => {})
-      }
-
-      React.useEffect(() => {
-        fetchSensevoice()
-      }, [])
-
-      const triggerInstallSensevoice = () => {
-        setInstallingSensevoice(true)
-        fetch('/dsh-voice/sensevoice-installer', {
-          method: 'POST',
-          headers: {
-            'x-dsh-plugin-update': '1',
-            'Content-Type': 'application/json',
-          },
-        })
-          .then((r) => r.json())
-          .then(() => {
-            const timer = setInterval(() => {
-              fetch('/dsh-voice/sensevoice-installer')
-                .then((r) => r.json())
-                .then((d) => {
-                  setSensevoiceState(d)
-                  if (!d.installing) {
-                    clearInterval(timer)
-                    setInstallingSensevoice(false)
-                    fetchStatus()
-                  }
-                })
-                .catch(() => clearInterval(timer))
-            }, 2000)
-          })
-          .catch(() => setInstallingSensevoice(false))
-      }
-
-      // Interactive microphone tester
-      const [testingMic, setTestingMic] = React.useState(false)
-      const [testLevel, setTestLevel] = React.useState(0)
-      const testRef = React.useRef(null)
-
-      const toggleTestMic = async () => {
-        if (testingMic) {
-          if (testRef.current) {
-            testRef.current.active = false
-            try { testRef.current.stream.getTracks().forEach((t) => t.stop()) } catch (e) { /* already stopped */ }
-            if (testRef.current.audioCtx) { try { testRef.current.audioCtx.close() } catch (e) { /* already closed */ } }
-            testRef.current = null
-          }
-          setTestingMic(false)
-          setTestLevel(0)
-          return
-        }
-        try {
-          const devId = (draft && draft.micDeviceId) || (value && value.micDeviceId) || ''
-          const audio = { echoCancellation: true, noiseSuppression: true, autoGainControl: true }
-          if (devId) audio.deviceId = { exact: devId }
-          const stream = await navigator.mediaDevices.getUserMedia({ audio })
-          const AC = typeof AudioContext !== 'undefined' ? AudioContext : (typeof webkitAudioContext !== 'undefined' ? webkitAudioContext : null)
-          if (!AC) return
-          const audioCtx = new AC()
-          if (audioCtx.state === 'suspended') await audioCtx.resume().catch(() => {})
-          const src = audioCtx.createMediaStreamSource(stream)
-          let lastNode = src
-          try {
-            const filter = audioCtx.createBiquadFilter()
-            filter.type = 'highpass'
-            filter.frequency.value = 80
-            filter.Q.value = 0.707
-            src.connect(filter)
-            lastNode = filter
-          } catch (e) { /* filter fallback */ }
-          const analyser = audioCtx.createAnalyser()
-          analyser.fftSize = 128
-          lastNode.connect(analyser)
-          testRef.current = { stream, audioCtx, analyser, active: true }
-          setTestingMic(true)
+          } catch (e) { /* service not up yet */ }
+        }, 1000)
+        return () => clearInterval(timer)
+      }, [ready])
 
-          const check = () => {
-            if (!testRef.current || !testRef.current.active) return
-            const arr = new Uint8Array(analyser.frequencyBinCount)
-            analyser.getByteFrequencyData(arr)
-            let sum = 0
-            for (let i = 0; i < arr.length; i++) sum += arr[i]
-            const avg = sum / (arr.length || 1)
-            setTestLevel(Math.min(100, Math.round((avg / 128) * 100)))
-            requestAnimationFrame(check)
-          }
-          requestAnimationFrame(check)
-        } catch (e) {
-          setErr(String(e && e.message ? e.message : e))
+      const deepClone = (obj) => {
+        if (typeof structuredClone === 'function') {
+          try { return structuredClone(obj) } catch (e) { /* fallback */ }
         }
+        try { return JSON.parse(JSON.stringify(obj)) } catch (e) { return Object.assign({}, obj) }
       }
 
+      React.useEffect(() => { if (ready && draft === null) setDraft(deepClone(value)) }, [ready, draft, value])
+
       React.useEffect(() => {
-        return () => {
-          if (testRef.current) {
-            testRef.current.active = false
-            try { testRef.current.stream.getTracks().forEach((t) => t.stop()) } catch (e) { /* already stopped */ }
-            if (testRef.current.audioCtx) { try { testRef.current.audioCtx.close() } catch (e) { /* already closed */ } }
-            testRef.current = null
-          }
-        }
-      }, [])
+        if (!ready) return
+        const val = value || {}
+        voice.settings = Object.assign({}, voice.settings, {
+          vadSilenceMs: Number(val.dictation && val.dictation.vadSilenceMs) || 700,
+          autoSendMs: Number(val.message && val.message.autoSendMs) || 4000,
+          beep: !!val.beep,
+          micDeviceId: String(val.micDeviceId || ''),
+          historyLimit: Number(val.historyLimit) || 20,
+          voiceCommands: !!val.voiceCommands,
+          sendDelayMs: Number(val.dictation && val.dictation.sendDelayMs) || 0,
+          stream: !!(val.dictation && val.dictation.stream),
+          streamChunkMs: Number(val.dictation && val.dictation.streamChunkMs) || 1200,
+          vadAdapt: Number(val.dictation && val.dictation.vadAdapt) || 0,
+          wakeWord: String(val.wakeWord || ''),
+          bargeIn: !!val.bargeIn,
+          polishSend: !!(val.message && val.message.polishSend),
+          sessionCommands: !!(val.message && val.message.sessionCommands),
+          polishBaseUrl: String(val.polishBaseUrl || ''),
+          noiseSuppression: val.noiseSuppression !== false,
+          noiseGateDb: Number(val.noiseGateDb !== undefined ? val.noiseGateDb : -45),
+          contextGlossary: val.contextGlossary !== false,
+          visualizerStyle: val.visualizerStyle || 'liquid-wave',
+          gatedTurnTaking: val.gatedTurnTaking !== false,
+          autoSendVisualRing: val.autoSendVisualRing !== false,
+          voiceActions: val.voiceActions !== false,
+          techJargonCorrection: val.techJargonCorrection !== false,
+          liveInterimPreview: val.liveInterimPreview !== false,
+          structuredPromptVoice: val.structuredPromptVoice !== false,
+        })
+      }, [ready, value])
+
+      const { sensevoiceState, installingSensevoice, triggerInstallSensevoice } = useSensevoiceInstaller(fetchStatus)
+
+      const { testingMic, testLevel, toggleTestMic, gateDbVal, gateThresholdPercent } = useMicTester(draft, value, setErr)
 
       const [statusData, setStatusData] = React.useState(null)
       const [statusLatency, setStatusLatency] = React.useState(null)
@@ -2521,72 +3010,7 @@ window.__ModuleLoader__.load({
         fetchStatus()
       }, [fetchStatus])
 
-      const [updaterStatus, setUpdaterStatus] = React.useState(null)
-      const [updating, setUpdating] = React.useState(false)
-      const [updaterMsg, setUpdaterMsg] = React.useState('')
-      const [updaterLoading, setUpdaterLoading] = React.useState(false)
-
-      const checkUpdater = React.useCallback(async () => {
-        setUpdaterLoading(true)
-        setUpdaterMsg('')
-        try {
-          const res = await fetch('/api/dsh-voice/update', {
-            headers: { accept: 'application/json' },
-            cache: 'no-store',
-          })
-          if (!res.ok) throw new Error(`HTTP ${res.status}`)
-          const data = await res.json()
-          setUpdaterStatus(data)
-        } catch (e) {
-          /* best effort update check */
-        } finally {
-          setUpdaterLoading(false)
-        }
-      }, [])
-
-      const onUpdateNow = async () => {
-        setUpdating(true)
-        setUpdaterMsg('')
-        try {
-          const res = await fetch('/api/dsh-voice/update', {
-            method: 'POST',
-            headers: {
-              'x-dsh-plugin-update': '1',
-              'content-type': 'application/json',
-            },
-          })
-          const data = await res.json()
-          if (!res.ok) throw new Error(data?.error || `HTTP ${res.status}`)
-          setUpdaterStatus(data)
-          setUpdaterMsg(t('updateSuccess'))
-        } catch (e) {
-          setUpdaterMsg(t('updateFailed') + ' ' + (e?.message || String(e)))
-        } finally {
-          setUpdating(false)
-        }
-      }
-
-      React.useEffect(() => {
-        checkUpdater()
-      }, [checkUpdater])
-
-      if (!ready) {
-        const waiting = configLoading || (!snap || snap.status === 'loading')
-        return React.createElement('div', { className: 'cb-page' },
-          React.createElement('div', { className: 'dvs-wait' }, waiting
-            ? t('loadingSettings')
-            : t('notReady1')
-              + t('notReady2')),
-        )
-      }
-
-      const setIn = (mode, key, v) => setDraft((d) => {
-        const next = deepClone(d || {})
-        next[mode] = next[mode] || {}
-        next[mode][key] = v
-        return next
-      })
-      const setTop = (key, v) => setDraft((d) => Object.assign({}, d || {}, { [key]: v }))
+      const { updaterStatus, updating, updaterMsg, updaterLoading, checkUpdater, onUpdateNow } = usePluginUpdater()
 
       const save = async () => {
         setErr(''); setSaved(false)
@@ -2691,72 +3115,6 @@ window.__ModuleLoader__.load({
           .filter((k) => k && BUILTIN.indexOf(k) < 0),
       )
 
-      const hotkeyField = () => React.createElement('div', { className: 'cb-field' },
-        React.createElement('label', null, t('hotkey')),
-        React.createElement('div', { className: 'cb-row' },
-          React.createElement('button', {
-            type: 'button', className: 'cb-btn cb-btn-primary', disabled: !writable,
-            onClick: () => setCatching(true),
-          }, catching ? t('pressKey') : keyLabel(draft && draft.hotkey)),
-          React.createElement('button', {
-            type: 'button', className: 'cb-btn cb-btn-mini', title: t('clearKey'),
-            disabled: !writable, onClick: () => {
-              setDraft((d) => Object.assign({}, d || {}, { hotkey: '' }))
-              voice.hotkey = ''
-              clearGlobalHotkey()
-            },
-          }, '×'),
-        ),
-        React.createElement('span', { className: 'dvs-sub' }, t('hotkeyHint1') + t('hotkeyHint2')),
-      )
-
-      const gateDbVal = Number((draft && draft.noiseGateDb !== undefined) ? draft.noiseGateDb : (value && value.noiseGateDb !== undefined) ? value.noiseGateDb : -45)
-      const gateThresholdPercent = gateDbVal <= -90 ? 0 : Math.min(100, Math.max(0, Math.round(((gateDbVal + 60) / 40) * 100)))
-
-      const micField = () => React.createElement('div', { className: 'cb-field' },
-        React.createElement('label', null, t('mic')),
-        React.createElement('div', { className: 'cb-row' },
-          React.createElement('select', {
-            value: String((draft && draft.micDeviceId) ?? (value && value.micDeviceId) ?? ''), disabled: !writable || testingMic,
-            onChange: (e) => setTop('micDeviceId', e.target.value),
-            style: { flex: 1 },
-          },
-            React.createElement('option', { value: '' }, t('micDefault')),
-            devices.map((d) => React.createElement('option', { key: d.deviceId, value: d.deviceId },
-              d.label || d.deviceId.slice(0, 12))),
-          ),
-          React.createElement('button', {
-            type: 'button',
-            className: 'cb-btn ' + (testingMic ? 'cb-btn-primary' : 'cb-btn-secondary'),
-            onClick: toggleTestMic,
-            style: { flex: 'none' },
-          }, testingMic ? t('stopTest') : t('testMic')),
-        ),
-        testingMic ? React.createElement('div', { className: 'dvo-mic-test' },
-          React.createElement('span', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary)' } }, t('micLevel') + ':'),
-          React.createElement('div', { className: 'dvo-meter-bar' },
-            React.createElement('div', { className: 'dvo-meter-fill', style: { width: `${testLevel}%` } }),
-            gateThresholdPercent > 0 ? React.createElement('div', { className: 'dvo-meter-gate', style: { left: `${gateThresholdPercent}%` }, title: `${gateDbVal} dB` }) : null,
-          ),
-          React.createElement('span', { style: { fontSize: '11px', fontVariantNumeric: 'tabular-nums', width: '32px', textAlign: 'right' } }, `${testLevel}%`),
-        ) : null,
-        React.createElement('div', { className: 'cb-row', style: { marginTop: '6px' } },
-          React.createElement('span', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)', minWidth: '120px' } }, t('noiseGate') + ':'),
-          React.createElement('select', {
-            value: String(gateDbVal), disabled: !writable,
-            onChange: (e) => setTop('noiseGateDb', Number(e.target.value)),
-            style: { flex: 1 },
-          },
-            React.createElement('option', { value: '-999' }, t('noiseGateOff')),
-            React.createElement('option', { value: '-50' }, '-50 dB (Low / Gentle)'),
-            React.createElement('option', { value: '-45' }, '-45 dB (Standard Default)'),
-            React.createElement('option', { value: '-35' }, '-35 dB (Medium Room)'),
-            React.createElement('option', { value: '-25' }, '-25 dB (High / Mechanical Clicks)'),
-          ),
-        ),
-        React.createElement('span', { className: 'dvs-sub' }, t('noiseGateHint')),
-      )
-
       const langField = (mode) => React.createElement('div', { className: 'cb-field' },
         React.createElement('label', null, t('language')),
         React.createElement('select', {
@@ -2774,14 +3132,6 @@ window.__ModuleLoader__.load({
         React.createElement('span', { className: 'dvs-sub' }, hint),
       )
 
-      const textField = (key, label, hint) => React.createElement('div', { className: 'cb-field' },
-        React.createElement('label', null, label),
-        React.createElement('input', {
-          type: 'text', value: draft && draft[key] !== undefined ? draft[key] : '', disabled: !writable,
-          onChange: (e) => setTop(key, e.target.value),
-        }),
-        React.createElement('span', { className: 'dvs-sub' }, hint),
-      )
 
       const statsData = (statusData && statusData.providerStats) || {}
       const hostOnline = statusLatency !== null
@@ -2790,25 +3140,14 @@ window.__ModuleLoader__.load({
 
       return React.createElement('div', { className: 'cb-page' },
         // 1. Connection & Engine Status Card
-        React.createElement('div', { className: 'cb-section-card' },
-          React.createElement('div', { className: 'cb-section-title' },
-            React.createElement('span', null, t('statusTitle')),
-            React.createElement('button', {
-              type: 'button', className: 'cb-btn', style: { fontSize: '12px', padding: '4px 8px' },
-              onClick: fetchStatus,
-            }, '🔄 ' + t('refreshStats')),
-          ),
-          React.createElement('div', { className: 'cb-section-desc' }, t('statusDesc')),
-          React.createElement('div', { className: 'cb-row' },
-            hostOnline
-              ? React.createElement('span', { className: 'cb-badge cb-badge-ok' }, '● ' + t('badgeHostOnline').replace('{ms}', statusLatency))
-              : React.createElement('span', { className: 'cb-badge cb-badge-bad' }, '● ' + t('badgeHostOffline')),
-            whisperRunning
-              ? React.createElement('span', { className: 'cb-badge cb-badge-ok' }, '● ' + t('badgeWhisperActive'))
-              : React.createElement('span', { className: 'cb-badge cb-badge-warn' }, '○ ' + t('badgeWhisperInactive')),
-            React.createElement('span', { className: 'cb-badge cb-badge-ok' }, '✓ ' + t('badgeProviders').replace('{count}', providerCount)),
-          ),
-        ),
+        React.createElement(ConnectionStatusCard, {
+          t: t,
+          hostOnline: hostOnline,
+          statusLatency: statusLatency,
+          whisperRunning: whisperRunning,
+          providerCount: providerCount,
+          onRefresh: fetchStatus,
+        }),
 
         // 2. Dictation Mode Card
         React.createElement('div', { className: 'cb-section-card' },
@@ -2817,7 +3156,7 @@ window.__ModuleLoader__.load({
           ),
           React.createElement('div', { className: 'cb-section-desc' }, t('dictationHint')),
           React.createElement(ChainEditor, {
-            value: draft && draft.dictation ? draft.dictation.chain : [], writable: writable,
+            t: t, value: draft && draft.dictation ? draft.dictation.chain : [], writable: writable,
             options: chainOptions,
             onChange: (v) => setIn('dictation', 'chain', v),
           }),
@@ -2862,7 +3201,7 @@ window.__ModuleLoader__.load({
           ),
           React.createElement('div', { className: 'cb-section-desc' }, t('messageHint')),
           React.createElement(ChainEditor, {
-            value: draft && draft.message ? draft.message.chain : [], writable: writable,
+            t: t, value: draft && draft.message ? draft.message.chain : [], writable: writable,
             options: chainOptions,
             onChange: (v) => setIn('message', 'chain', v),
           }),
@@ -2908,144 +3247,35 @@ window.__ModuleLoader__.load({
           }),
         ),
 
-        // 5. Hardware & Local Engines Card
-        React.createElement('div', { className: 'cb-section-card' },
-          React.createElement('div', { className: 'cb-section-title' },
-            React.createElement('span', null, '🔧 ' + t('hardwareTitle')),
-          ),
-          React.createElement('div', { className: 'cb-section-desc' }, t('hardwareDesc')),
-          hotkeyField(),
-          micField(),
-          React.createElement('div', { className: 'cb-grid-2' },
-            textField('whisperUrl', t('whisperEndpoint'), t('whisperEndpointHint')),
-            textField('whisperBin', t('whisperBin'), t('whisperBinHint')),
-            textField('whisperModel', t('whisperModel'), t('whisperModelHint')),
-            textField('deepgramBaseUrl', t('deepgramEndpoint'), t('deepgramEndpointHint')),
-            textField('sensevoiceUrl', t('sensevoiceEndpoint'), t('sensevoiceEndpointHint')),
-            textField('sensevoiceBin', t('sensevoiceBin'), t('sensevoiceBinHint')),
-            textField('sensevoiceModel', t('sensevoiceModel'), t('sensevoiceModelHint')),
-            textField('polishBaseUrl', t('polishBaseUrl'), t('polishBaseUrlHint')),
-            textField('polishModel', t('polishModel'), ''),
-            textField('polishKeyEnv', t('polishKeyEnv'), ''),
-          ),
-          React.createElement('div', { className: 'cb-row' },
-            React.createElement('label', { className: 'cb-check-label' },
-              React.createElement('input', {
-                type: 'checkbox', checked: !!(draft && draft.autoStart), disabled: !writable,
-                onChange: (e) => setTop('autoStart', e.target.checked),
-              }),
-              t('whisperAutostart'),
-            ),
-            React.createElement('label', { className: 'cb-check-label' },
-              React.createElement('input', {
-                type: 'checkbox', checked: !!(draft && draft.sensevoiceAutostart), disabled: !writable,
-                onChange: (e) => setTop('sensevoiceAutostart', e.target.checked),
-              }),
-              t('sensevoiceAutostart'),
-            ),
-            React.createElement('label', { className: 'cb-check-label' },
-              React.createElement('input', {
-                type: 'checkbox', checked: !!(draft && draft.localOnly), disabled: !writable,
-                onChange: (e) => setTop('localOnly', e.target.checked),
-              }),
-              t('localOnly'),
-            ),
-            React.createElement('label', { className: 'cb-check-label' },
-              React.createElement('input', {
-                type: 'checkbox', checked: !!(draft && draft.beep), disabled: !writable,
-                onChange: (e) => setTop('beep', e.target.checked),
-              }),
-              t('beep'),
-            ),
-            React.createElement('label', { className: 'cb-check-label' },
-              React.createElement('input', {
-                type: 'checkbox', checked: draft ? draft.noiseSuppression !== false : true, disabled: !writable,
-                onChange: (e) => setTop('noiseSuppression', e.target.checked),
-              }),
-              t('noiseSuppression'),
-            ),
-            React.createElement('label', { className: 'cb-check-label' },
-              React.createElement('input', {
-                type: 'checkbox', checked: draft ? draft.contextGlossary !== false : true, disabled: !writable,
-                onChange: (e) => setTop('contextGlossary', e.target.checked),
-              }),
-              t('contextGlossary'),
-            ),
-            React.createElement('label', { className: 'cb-check-label' },
-              React.createElement('input', {
-                type: 'checkbox', checked: !!(draft && draft.voiceCommands), disabled: !writable,
-                onChange: (e) => setTop('voiceCommands', e.target.checked),
-              }),
-              t('voiceCommandsLabel'),
-            ),
-            React.createElement('label', { className: 'cb-check-label' },
-              React.createElement('input', {
-                type: 'checkbox', checked: !!(draft && draft.normalizeTranscript), disabled: !writable,
-                onChange: (e) => setTop('normalizeTranscript', e.target.checked),
-              }),
-              t('normalizeTranscript'),
-            ),
-          ),
-          React.createElement('div', { className: 'cb-field' },
-            React.createElement('label', null, t('visualizerStyle')),
-            React.createElement('select', {
-              value: String((draft && draft.visualizerStyle) || 'liquid-wave'), disabled: !writable,
-              onChange: (e) => setTop('visualizerStyle', e.target.value),
-            },
-              React.createElement('option', { value: 'liquid-wave' }, t('visLiquidWave')),
-              React.createElement('option', { value: 'dynamic-orb' }, t('visDynamicOrb')),
-              React.createElement('option', { value: 'bars' }, t('visBars')),
-              React.createElement('option', { value: 'off' }, t('visOff')),
-            ),
-          ),
-          React.createElement('div', { className: 'cb-field' },
-            React.createElement('label', null, t('vocabulary')),
-            React.createElement('textarea', {
-              rows: 3, disabled: !writable,
-              value: Array.isArray(draft && draft.vocabulary) ? draft.vocabulary.join('\n') : '',
-              onChange: (e) => setTop('vocabulary', e.target.value.split('\n').map((x) => x.trim()).filter(Boolean)),
-            }),
-          ),
-        ),
+        // 5. Hardware & Audio Engines Card
+        React.createElement(HardwareOptionsCard, {
+          t: t,
+          draft: draft,
+          setTop: setTop,
+          writable: writable,
+          catching: catching,
+          setCatching: setCatching,
+          devices: devices,
+          testingMic: testingMic,
+          toggleTestMic: toggleTestMic,
+          testLevel: testLevel,
+          gateDbVal: gateDbVal,
+          gateThresholdPercent: gateThresholdPercent,
+          onClearKey: () => {
+            setDraft((d) => Object.assign({}, d || {}, { hotkey: '' }))
+            voice.hotkey = ''
+            clearGlobalHotkey()
+          },
+        }),
 
         // 6. SenseVoice Local ASR (1-Click Setup)
-        React.createElement('div', { className: 'cb-section-card' },
-          React.createElement('div', { className: 'cb-section-title' },
-            React.createElement('span', null, '⚡ ' + t('sensevoiceTitle')),
-            sensevoiceState && sensevoiceState.installed
-              ? React.createElement('span', { className: 'cb-badge cb-badge-ok' }, t('sensevoiceReady') + ' (small-int8)')
-              : React.createElement('span', { className: 'cb-badge cb-badge-warn' },
-                  installingSensevoice ? t('sensevoiceDownloading') : t('sensevoiceNotInstalled')
-                ),
-          ),
-          React.createElement('div', { className: 'cb-section-desc' }, t('sensevoiceDesc')),
-          React.createElement('div', { className: 'dvo-installer-box' },
-            React.createElement('div', { className: 'cb-row', style: { alignItems: 'center', justifyContent: 'space-between', gap: '12px' } },
-              React.createElement('div', { style: { fontSize: '12px', color: 'var(--dsw-alias-content-secondary)' } },
-                sensevoiceState && sensevoiceState.path
-                  ? ('~/' + sensevoiceState.path.replace(/^.*[\\/](\.dsh[\\/]models[\\/].*)$/, '$1'))
-                  : '~/.dsh/models/sensevoice'
-              ),
-              React.createElement('button', {
-                type: 'button',
-                className: 'cb-btn cb-btn-primary',
-                style: { fontSize: '12px', padding: '6px 12px' },
-                disabled: installingSensevoice || !writable,
-                onClick: triggerInstallSensevoice,
-              }, installingSensevoice ? ('⏳ ' + t('installingSensevoice')) : ('📥 ' + t('installSensevoice'))),
-            ),
-            installingSensevoice
-              ? React.createElement('div', { style: { marginTop: '8px' } },
-                  React.createElement('div', { className: 'dvo-progress-bar' },
-                    React.createElement('div', { className: 'dvo-progress-bar-fill' })
-                  ),
-                  React.createElement('div', { style: { fontSize: '11px', marginTop: '4px', color: 'var(--dsw-alias-content-secondary)' } },
-                    (sensevoiceState && sensevoiceState.progress) || t('sensevoiceDownloading')
-                  )
-                )
-              : null
-          )
-        ),
+        React.createElement(SensevoiceSection, {
+          t: t,
+          sensevoiceState: sensevoiceState,
+          installingSensevoice: installingSensevoice,
+          writable: writable,
+          onInstall: triggerInstallSensevoice,
+        }),
 
         // 7. Turn-Taking & Audio Coordination
         React.createElement('div', { className: 'cb-section-card' },
@@ -3121,143 +3351,30 @@ window.__ModuleLoader__.load({
         ),
 
         // 9. Developer Lexicon & IT Jargon
-        React.createElement('div', { className: 'cb-section-card' },
-          React.createElement('div', { className: 'cb-section-title' },
-            React.createElement('span', null, '📖 ' + t('jargonTitle')),
-          ),
-          React.createElement('label', { className: 'cb-check-label', style: { marginBottom: '8px' } },
-            React.createElement('input', {
-              type: 'checkbox',
-              checked: draft ? draft.techJargonCorrection !== false : true,
-              disabled: !writable,
-              onChange: (e) => setTop('techJargonCorrection', e.target.checked),
-            }),
-            t('techJargonCorrection'),
-          ),
-          React.createElement('div', { className: 'cb-field' },
-            React.createElement('label', null, t('jargonAdd') + ' (spoken -> replacement)'),
-            React.createElement('textarea', {
-              rows: 3,
-              disabled: !writable,
-              placeholder: t('jargonPlaceholder'),
-              value: jargonInput !== null
-                ? jargonInput
-                : (Array.isArray(draft && draft.jargonDictionary)
-                    ? draft.jargonDictionary.map((item) => item && item.from ? `${item.from} -> ${item.to}` : '').filter(Boolean).join('\n')
-                    : ''),
-              onChange: (e) => {
-                setJargonInput(e.target.value)
-              },
-              onBlur: () => {
-                if (jargonInput === null) return
-                const lines = jargonInput.split('\n')
-                const parsed = lines
-                  .map((line) => {
-                    const parts = line.split(/->|=|:/)
-                    if (parts.length >= 2) {
-                      const from = parts[0].trim()
-                      const to = parts.slice(1).join(':').trim()
-                      if (from && to) return { from, to }
-                    }
-                    return null
-                  })
-                  .filter(Boolean)
-                setTop('jargonDictionary', parsed)
-              },
-            }),
-          ),
-        ),
+        React.createElement(JargonEditor, {
+          t: t,
+          draft: draft,
+          setTop: setTop,
+          writable: writable,
+        }),
 
         // 10. Provider Telemetry & Latency Dashboard
-        React.createElement('div', { className: 'cb-section-card' },
-          React.createElement('div', { className: 'cb-section-title' },
-            React.createElement('span', null, '📊 ' + t('providerDashboard')),
-            React.createElement('button', {
-              type: 'button', className: 'cb-btn', style: { fontSize: '12px', padding: '4px 8px' },
-              onClick: fetchStatus,
-            }, '🔄 ' + t('refreshStats')),
-          ),
-          React.createElement('div', { className: 'dvo-dash' },
-            React.createElement('div', { className: 'dvo-dash-grid' },
-              Object.keys(statsData).length === 0
-                ? React.createElement('div', { className: 'dvs-sub' }, t('idle'))
-                : Object.entries(statsData).map(([key, item]) => {
-                    const avg = item.avgTookMs || 0
-                    const hasErrors = item.failures > 0
-                    let badgeClass = 'dvo-badge-idle'
-                    let badgeText = t('idle')
-                    if (item.attempts > 0) {
-                      if (hasErrors && item.successes === 0) {
-                        badgeClass = 'dvo-badge-err'
-                        badgeText = t('error')
-                      } else if (avg > 0 && avg < 400) {
-                        badgeClass = 'dvo-badge-fast'
-                        badgeText = avg + 'ms · ' + t('fast')
-                      } else if (avg >= 400 && avg <= 1500) {
-                        badgeClass = 'dvo-badge-norm'
-                        badgeText = avg + 'ms · ' + t('normal')
-                      } else {
-                        badgeClass = 'dvo-badge-slow'
-                        badgeText = avg + 'ms · ' + t('slow')
-                      }
-                    }
-                    const rate = item.attempts > 0 ? Math.round((item.successes / item.attempts) * 100) : 100
-                    return React.createElement('div', { key, className: 'dvo-dash-item', title: item.lastError ? `Error: ${item.lastError}` : '' },
-                      React.createElement('div', { className: 'dvo-dash-name' }, key),
-                      React.createElement('div', { className: 'dvo-dash-row' },
-                        React.createElement('span', { className: 'dvo-badge ' + badgeClass }, badgeText),
-                        React.createElement('span', null, rate + '%'),
-                      ),
-                      React.createElement('div', { className: 'dvo-dash-row' },
-                        React.createElement('span', null, `${item.successes}/${item.attempts}`),
-                        React.createElement('span', null, t('successRate')),
-                      ),
-                    )
-                  }),
-            ),
-          ),
-        ),
+        React.createElement(ProviderDashboard, {
+          t: t,
+          statsData: statsData,
+          onRefresh: fetchStatus,
+        }),
 
         // 7. Plugin Version & Updates Card
-        React.createElement('div', { className: 'cb-section-card' },
-          React.createElement('div', { className: 'cb-section-title' },
-            React.createElement('span', null, '📦 ' + t('versionTitle')),
-            React.createElement('button', {
-              type: 'button', className: 'cb-btn', style: { fontSize: '12px', padding: '4px 8px' },
-              onClick: checkUpdater, disabled: updaterLoading || updating,
-            }, updaterLoading ? '⏳…' : '🔄 ' + t('refreshStats')),
-          ),
-          React.createElement('div', { className: 'cb-section-desc' }, t('versionHint')),
-          React.createElement('div', { className: 'cb-row', style: { alignItems: 'center', gap: '12px' } },
-            React.createElement('span', { className: 'cb-badge cb-badge-ok' },
-              'v' + ((updaterStatus && updaterStatus.currentVersion) || '0.9.4')
-            ),
-            updaterStatus && updaterStatus.updateAvailable
-              ? React.createElement('span', { className: 'cb-badge cb-badge-warn' },
-                  t('updateAvailable') + ': v' + updaterStatus.latestVersion
-                )
-              : React.createElement('span', { className: 'cb-badge cb-badge-ok' },
-                  t('upToDate')
-                ),
-            updaterStatus && updaterStatus.updateAvailable
-              ? React.createElement('button', {
-                  type: 'button', className: 'cb-btn cb-btn-primary', style: { fontSize: '12px', padding: '4px 10px' },
-                  onClick: onUpdateNow, disabled: updating,
-                }, updating ? t('updating') : t('updateNow'))
-              : null,
-          ),
-          updaterMsg
-            ? React.createElement('div', {
-                style: {
-                  marginTop: '8px',
-                  fontSize: '12px',
-                  color: updaterMsg.includes('fail') || updaterMsg.includes('失败')
-                    ? 'var(--dsw-alias-state-warning-primary)'
-                    : 'var(--dsw-alias-state-success-primary)',
-                },
-              }, updaterMsg)
-            : null,
-        ),
+        React.createElement(UpdaterCard, {
+          t: t,
+          updaterStatus: updaterStatus,
+          updaterLoading: updaterLoading,
+          updating: updating,
+          updaterMsg: updaterMsg,
+          onCheck: checkUpdater,
+          onUpdateNow: onUpdateNow,
+        }),
 
         // Action bar (Save)
         React.createElement('div', { className: 'cb-row' },
@@ -3301,42 +3418,42 @@ window.__ModuleLoader__.load({
     }
 
     function registerSettings(ctx) {
-      // List seat (plugins.item): the seat the Plugins page renders as the plugin's
-      // own page with its configuration — the host draws the title, icon and crumb
-      // and asks for view 'summary' (the card's one-liner) or view 'page' (the form).
-      // The label is a static string on purpose: it is resolved while the page
-      // renders, and a locale lookup there would take the whole client batch down.
-      ctx.slots.inject('plugins.item', () => ctx.slots.register(
-        {
-          name: 'plugins.item',
-          id: ROW_ID,
-          order: 60,
-          label: () => 'Voice input',
-          locale: NS,
-          inject: () => ({ ctx: ctx }),
-        },
-        PluginCard,
-      ))
-      // Row seat (plugins.row.config): rendered in the plugin row in Plugins table.
-      ctx.slots.inject('plugins.row.config', () => ctx.slots.register(
-        {
-          name: 'plugins.row.config',
-          key: ROW_CONFIG_KEY,
-          locale: NS,
-          inject: () => ({ ctx: ctx }),
-        },
-        PluginCard,
-      ))
-      // Legacy seat fallback
-      ctx.slots.inject('settings.plugin.item', () => ctx.slots.register(
-        {
-          name: 'settings.plugin.item',
-          key: NS,
-          locale: NS,
-          inject: () => ({ ctx: ctx }),
-        },
-        PluginCard,
-      ))
+      ctx.effect(() => {
+        const offItem = ctx.slots.inject('plugins.item', () => ctx.slots.register(
+          {
+            name: 'plugins.item',
+            id: ROW_ID,
+            order: 60,
+            label: () => 'Voice input',
+            locale: NS,
+            inject: () => ({ ctx: ctx }),
+          },
+          PluginCard,
+        ))
+        const offRow = ctx.slots.inject('plugins.row.config', () => ctx.slots.register(
+          {
+            name: 'plugins.row.config',
+            key: ROW_CONFIG_KEY,
+            locale: NS,
+            inject: () => ({ ctx: ctx }),
+          },
+          PluginCard,
+        ))
+        const offLegacy = ctx.slots.inject('settings.plugin.item', () => ctx.slots.register(
+          {
+            name: 'settings.plugin.item',
+            key: NS,
+            locale: NS,
+            inject: () => ({ ctx: ctx }),
+          },
+          PluginCard,
+        ))
+        return () => {
+          if (typeof offItem === 'function') offItem()
+          if (typeof offRow === 'function') offRow()
+          if (typeof offLegacy === 'function') offLegacy()
+        }
+      }, 'dsh-voice: settings card slots')
     }
 
     exports.inject = ['timer', 'slots', 'configForms', 'locale']