@goodandready/dsh-voice 0.8.19 → 0.8.21

package/lib/client-src/70-settings.js

@@ -30,19 +30,40 @@
     const LANGS = ['auto', 'ru', 'en', 'uk', 'de']
 
     const SET_CSS =
-      '.dvs-wrap{display:flex;flex-direction:column;gap:22px;padding:4px 0;max-width:720px}' +
+      '.cb-page{display:flex;flex-direction:column;gap:18px;padding:4px 0 24px;max-width:960px}' +
+      '.cb-section-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}' +
+      '.cb-section-title{font-size:15px;font-weight:600;color:var(--dsw-alias-label-primary);display:flex;align-items:center;justify-content:space-between}' +
+      '.cb-section-desc{font-size:13px;color:var(--dsw-alias-label-secondary);margin-top:-4px;line-height:1.4}' +
+      '.cb-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}' +
+      '.cb-grid-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:12px}' +
+      '.cb-badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);display:inline-flex;align-items:center;gap:4px;font-weight:500}' +
+      '.cb-badge-ok{border-color:var(--dsw-alias-state-success-primary);color:var(--dsw-alias-state-success-primary);background:rgba(16,185,129,0.08)}' +
+      '.cb-badge-warn{border-color:var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);background:rgba(245,158,11,0.08)}' +
+      '.cb-badge-bad{border-color:var(--dsw-alias-state-error-primary);color:var(--dsw-alias-state-error-primary);background:rgba(239,68,68,0.08)}' +
+      '.cb-input{height:34px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 10px;font-size:13px;box-sizing:border-box}' +
+      '.cb-input:focus{outline:none;border-color:var(--dsw-alias-state-brand-primary)}' +
+      '.cb-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:6px 12px;font-size:13px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .15s ease}' +
+      '.cb-btn:hover:not(:disabled){background:var(--dsw-alias-bg-layer-4, var(--dsw-alias-bg-layer-2));border-color:var(--dsw-alias-label-dimmed, var(--dsw-alias-border-l2))}' +
+      '.cb-btn-primary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3);border-color:transparent}' +
+      '.cb-btn-primary:hover:not(:disabled){background:var(--dsw-alias-label-primary) !important;color:var(--dsw-alias-bg-layer-3) !important;opacity:0.88}' +
+      '.cb-btn-danger{color:var(--dsw-alias-state-error-primary);border-color:rgba(239,68,68,0.3)}' +
+      '.cb-btn-mini{border:1px solid var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-primary);border-radius:6px;width:28px;height:28px;cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:13px}' +
+      '.cb-btn-mini:hover:not(:disabled){background:var(--dsw-alias-bg-layer-2)}' +
+      '.cb-field{display:flex;flex-direction:column;gap:6px;padding:6px 0;font-size:13px;color:var(--dsw-alias-label-primary)}' +
+      '.cb-field select,.cb-field input[type="text"],.cb-field input[type="number"],.cb-field textarea{height:34px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 10px;font-size:13px;box-sizing:border-box}' +
+      '.cb-field textarea{height:auto;padding:8px 10px;font-family:inherit}' +
+      '.cb-check-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--dsw-alias-label-primary);user-select:none}' +
+      '.cb-check-label input[type="checkbox"]{width:16px;height:16px;cursor:pointer}' +
+      '.cb-alert-err{padding:10px 14px;border-radius:8px;background:rgba(239,68,68,0.1);color:var(--dsw-alias-state-error-primary);font-size:13px}' +
+      '.dvs-wrap{display:flex;flex-direction:column;gap:18px;padding:4px 0;max-width:960px}' +
       '.dvs-block{display:flex;flex-direction:column;gap:10px}' +
       '.dvs-h{font-size:14px;font-weight:600;color:var(--dsw-alias-label-primary)}' +
       '.dvs-sub{font-size:12px;color:var(--dsw-alias-label-secondary)}' +
       '.dvs-row{display:flex;gap:8px;align-items:center}' +
-      '.dvs-row select,.dvs-row input{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);color:var(--dsw-alias-label-primary);border-radius:6px;padding:6px 8px;font-size:13px}' +
+      '.dvs-row select,.dvs-row input{background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary);border-radius:8px;padding:6px 10px;font-size:13px}' +
       '.dvs-row .dvs-model{flex:1}' +
-      '.dvs-field{display:flex;flex-direction:column;gap:6px;padding:12px 0;font-size:12px;color:var(--dsw-alias-label-secondary)}' +
-      '.dvs-field input,.dvs-field select{height:34px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px}' +
-      '.dvs-mini{border:1px solid var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-primary);border-radius:6px;width:28px;height:28px;cursor:pointer;flex:none}' +
-      '.dvs-save{appearance:none;font:inherit;cursor:pointer;border:1px solid transparent;border-radius:8px;padding:5px 14px;font-size:13px;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}' +
-      '.dvs-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:10px}' +
-      '.dvs-card input,.dvs-card select{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);color:var(--dsw-alias-label-primary);border-radius:6px;padding:6px 8px;font-size:13px}' +
+      '.dvs-card{display:flex;flex-direction:column;gap:8px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);border-radius:10px;padding:12px}' +
+      '.dvs-card input,.dvs-card select{background:var(--dsw-alias-bg-layer-3);border:1px solid var(--dsw-alias-border-l1);color:var(--dsw-alias-label-primary);border-radius:6px;padding:6px 8px;font-size:13px}' +
       '.dvs-wait{font-size:13px;color:var(--dsw-alias-label-secondary);line-height:1.5;max-width:520px}' +
       '.dvs-ok{font-size:12px;color:var(--dsw-alias-state-success-primary)}' +
       '.dvs-bad{font-size:12px;color:var(--dsw-alias-state-error-primary)}' +
@@ -53,7 +74,7 @@
       '.dvo-pdesc{color:var(--dsw-alias-label-secondary);font-size:13px}' +
       '.dvo-pchev{flex:none;display:flex;color:var(--dsw-alias-label-secondary);transition:transform .15s ease}' +
       '.dvo-pcardOpen .dvo-pchev{transform:rotate(180deg)}' +
-      '.dvo-pbody{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}'
+      '.dvo-pbody{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:12px}'
     const setCssId = 'dsh-voice/settings.module.css'
     if (typeof document !== 'undefined' && !document.querySelector('style[data-dsh-plugin="dsh-voice"][data-plugin-css="' + setCssId + '"]')) {
       const tag = document.createElement('style')
@@ -152,6 +173,46 @@
       )
     }
 
+        function createErrorBoundary() {
+      if (!React || typeof React.Component !== 'function') {
+        return function NoopBoundary(props) { return props?.children || null }
+      }
+      return class ErrorBoundary extends React.Component {
+        constructor(props) {
+          super(props)
+          this.state = { hasError: false, error: null }
+        }
+        static getDerivedStateFromError(error) {
+          return { hasError: true, error }
+        }
+        componentDidCatch(error, errorInfo) {
+          console.error('[dsh-voice] React Error:', error, errorInfo)
+        }
+        render() {
+          if (this.state.hasError) {
+            return React.createElement(
+              'div',
+              { className: 'cb-alert-err', style: { margin: '12px 0', padding: '14px', borderRadius: '8px' } },
+              React.createElement('div', { style: { fontWeight: 600, marginBottom: '6px' } }, '⚠️ ' + t('uiError')),
+              React.createElement('div', { style: { fontSize: '12px', wordBreak: 'break-all' } }, String(this.state.error?.message || this.state.error)),
+              React.createElement(
+                'button',
+                {
+                  type: 'button',
+                  className: 'cb-btn',
+                  style: { marginTop: '10px', fontSize: '12px', padding: '4px 10px' },
+                  onClick: () => this.setState({ hasError: false, error: null }),
+                },
+                t('retry'),
+              ),
+            )
+          }
+          return this.props?.children || null
+        }
+      }
+    }
+    const ErrorBoundary = createErrorBoundary()
+
     function VoiceSection(props) {
       const t = (props && props.t) || moduleT
       const ctx = props.ctx
@@ -166,12 +227,7 @@
       const [saved, setSaved] = React.useState(false)
       const [err, setErr] = React.useState('')
 
-      // Hotkey picker: not a name field — press the key you want. Users should
-      // not need to know codes like KeyR.
-      //
-      // Hooks are declared here, above every return: declaring them later
-      // would leave fewer hooks on the not-ready branch and React would
-      // unmount the section with an error.
+      // Hotkey picker: not a name field — press the key you want.
       const [catching, setCatching] = React.useState(false)
       React.useEffect(() => {
         if (!catching) return undefined
@@ -203,22 +259,10 @@
           .catch(() => {})
       }, [])
 
-      // The snapshot carries a status, and status matters more than value.
-      //   loading      — no host answer yet;
-      //   unavailable  — host answered but does not know this namespace yet
-      //                  (page opened in the first seconds while plugins register);
-      //   ready        — values are present.
-      // At unavailable, writable comes from the document and stays true, so
-      // without a status check the card draws an empty but seemingly working
-      // form — that is exactly how this bug looked.
       const ready = !!snap && snap.status === 'ready'
       const value = ready && snap.value ? snap.value : {}
       const writable = ready && snap.writable !== false
 
-      // The browser settings mirror reloads only on value writes and
-      // reconnect; a new namespace is not such a signal. It will not fix
-      // itself — ask it to reload until ready. The mirror is shared, so this
-      // also repairs other settings sections.
       React.useEffect(() => {
         if (ready) return undefined
         let tries = 0
@@ -230,11 +274,8 @@
         return () => clearInterval(timer)
       }, [ready])
 
-      // Seed the draft only from a ready snapshot. Previously it was filled
-      // from the first snapshot and an empty draft froze forever: later
-      // snapshots did not reseed it and the card stayed empty until reload.
       React.useEffect(() => { if (ready && draft === null) setDraft(JSON.parse(JSON.stringify(value))) }, [ready, draft, value])
-      // The client needs the VAD threshold and cancel window from the same settings.
+
       React.useEffect(() => {
         if (!ready) return
         voice.settings = Object.assign({}, voice.settings, {
@@ -258,23 +299,34 @@
         })
       }, [ready, value, snap])
 
-      const [statsData, setStatsData] = React.useState({})
-      React.useEffect(() => {
-        let alive = true
-        fetch('/dsh-voice/status', { cache: 'no-store' })
+      const [statusData, setStatusData] = React.useState(null)
+      const [statusLatency, setStatusLatency] = React.useState(null)
+      const fetchStatus = React.useCallback(() => {
+        const start = performance.now()
+        const ctrl = new AbortController()
+        const tId = setTimeout(() => ctrl.abort(), 5000)
+        fetch('/dsh-voice/status', { cache: 'no-store', signal: ctrl.signal })
           .then((r) => r.json())
           .then((data) => {
-            if (alive && data && data.providerStats) {
-              setStatsData(data.providerStats)
+            clearTimeout(tId)
+            setStatusLatency(Math.round(performance.now() - start))
+            if (data && data.ok) {
+              setStatusData(data)
             }
           })
-          .catch(() => {})
-        return () => { alive = false }
+          .catch(() => {
+            clearTimeout(tId)
+            setStatusLatency(null)
+          })
       }, [])
 
+      React.useEffect(() => {
+        fetchStatus()
+      }, [fetchStatus])
+
       if (!ready) {
         const waiting = !snap || snap.status === 'loading'
-        return React.createElement('div', { className: 'dvs-wrap' },
+        return React.createElement('div', { className: 'cb-page' },
           React.createElement('div', { className: 'dvs-wait' }, waiting
             ? t('loadingSettings')
             : t('notReady1')
@@ -294,10 +346,6 @@
         setErr(''); setSaved(false)
         if (!draft) return
 
-        // Fields are written one by one. Previously the first failure broke
-        // the loop: later fields were never saved, the composer never got the
-        // hotkey reload signal, and the button looked like "nothing happens".
-        // Now every field is attempted and failures are collected by name.
         const failed = []
         for (const k of Object.keys(draft)) {
           try {
@@ -322,12 +370,11 @@
           contextGlossary: draft.contextGlossary !== false,
           visualizerStyle: draft.visualizerStyle || 'liquid-wave',
         })
-        // The composer owns the hotkey handler — tell it to reload, otherwise
-        // a new key only works after a full page reload.
         try { window.dispatchEvent(new CustomEvent('dsh-voice:settings-saved')) } catch (noEvents) { /* nobody */ }
 
         if (failed.length) { setErr(t('saveFailed') + ' ' + failed.join('; ')); return }
         setSaved(true); setTimeout(() => setSaved(false), 2000)
+        fetchStatus()
       }
 
       const modeVal = (mode, key, fallback) => {
@@ -335,174 +382,270 @@
         return m && m[key] !== undefined ? m[key] : fallback
       }
 
-      // Custom provider names come from the draft so a just-added entry
-      // appears in chain selects immediately.
       const chainOptions = BUILTIN.concat(
         (draft && Array.isArray(draft.customProviders) ? draft.customProviders : [])
           .map((c) => String(c && c.key || '').trim())
           .filter((k) => k && BUILTIN.indexOf(k) < 0),
       )
 
-      const hotkeyField = () => React.createElement('label', { className: 'dvs-field' },
-        t('hotkey'),
-        React.createElement('div', { className: 'dvs-row' },
+      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: 'dvs-save', disabled: !writable,
+            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: 'dvs-mini', title: t('clearKey'),
+            type: 'button', className: 'cb-btn cb-btn-mini', title: t('clearKey'),
             disabled: !writable, onClick: () => setDraft((d) => Object.assign({}, d || {}, { hotkey: '' })),
           }, '×'),
         ),
-        React.createElement('span', { className: 'dvs-sub' },
-          t('hotkeyHint1')
-          + t('hotkeyHint2')))
+        React.createElement('span', { className: 'dvs-sub' }, t('hotkeyHint1') + t('hotkeyHint2')),
+      )
 
-      const micField = () => React.createElement('label', { className: 'dvs-field' }, t('mic'),
-          React.createElement('select', {
-            value: String((snap && snap.micDeviceId) || ''), disabled: !writable,
-            onChange: (e) => setTop('micDeviceId', e.target.value),
-          },
-            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)))))
-      const langField = (mode) => React.createElement('label', { className: 'dvs-field' }, t('language'),
+      const micField = () => React.createElement('div', { className: 'cb-field' },
+        React.createElement('label', null, t('mic')),
+        React.createElement('select', {
+          value: String((snap && snap.micDeviceId) || ''), disabled: !writable,
+          onChange: (e) => setTop('micDeviceId', e.target.value),
+        },
+          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))),
+        ),
+      )
+
+      const langField = (mode) => React.createElement('div', { className: 'cb-field' },
+        React.createElement('label', null, t('language')),
         React.createElement('select', {
           value: modeVal(mode, 'language', 'ru'), disabled: !writable,
           onChange: (e) => setIn(mode, 'language', e.target.value),
-        }, LANGS.map((o) => React.createElement('option', { key: o, value: o }, o))))
+        }, LANGS.map((o) => React.createElement('option', { key: o, value: o }, o))),
+      )
 
-      const numField = (mode, key, label, hint) => React.createElement('label', { className: 'dvs-field' }, label,
+      const numField = (mode, key, label, hint) => React.createElement('div', { className: 'cb-field' },
+        React.createElement('label', null, label),
         React.createElement('input', {
           type: 'number', value: modeVal(mode, key, ''), disabled: !writable,
           onChange: (e) => setIn(mode, key, Number(e.target.value)),
         }),
-        React.createElement('span', { className: 'dvs-sub' }, hint))
+        React.createElement('span', { className: 'dvs-sub' }, hint),
+      )
 
-      const textField = (key, label, hint) => React.createElement('label', { className: 'dvs-field' }, label,
+      const textField = (key, label, hint) => React.createElement('div', { className: 'cb-field' },
+        React.createElement('label', null, label),
         React.createElement('input', {
-          value: draft && draft[key] !== undefined ? draft[key] : '', disabled: !writable,
+          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))
+        React.createElement('span', { className: 'dvs-sub' }, hint),
+      )
 
-      return React.createElement('div', { className: 'dvs-wrap' },
-        React.createElement('div', { className: 'dvs-block' },
-          React.createElement('div', { className: 'dvs-h' }, t('dictationBtn')),
-          React.createElement('div', { className: 'dvs-sub' }, t('dictationHint')),
+      const statsData = (statusData && statusData.providerStats) || {}
+      const hostOnline = statusLatency !== null
+      const whisperRunning = !!(statusData && statusData.whisperRunning)
+      const providerCount = (statusData && Array.isArray(statusData.providers)) ? statusData.providers.length : chainOptions.length
+
+      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)),
+          ),
+        ),
+
+        // 2. Dictation Mode Card
+        React.createElement('div', { className: 'cb-section-card' },
+          React.createElement('div', { className: 'cb-section-title' },
+            React.createElement('span', null, '🎙️ ' + t('dictationBtn')),
+          ),
+          React.createElement('div', { className: 'cb-section-desc' }, t('dictationHint')),
           React.createElement(ChainEditor, {
             value: draft && draft.dictation ? draft.dictation.chain : [], writable: writable,
             options: chainOptions,
             onChange: (v) => setIn('dictation', 'chain', v),
           }),
-          langField('dictation'),
-          numField('dictation', 'vadSilenceMs', t('pauseMs'), t('pauseHint')),
-          numField('dictation', 'sendDelayMs', t('sendDelay'), t('sendDelayHint')),
-          React.createElement('label', { className: 'dvs-field' }, t('polish'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.dictation && draft.dictation.polish), disabled: !writable,
-              onChange: (e) => setIn('dictation', 'polish', e.target.checked),
-            })),
-          React.createElement('div', { className: 'dvs-sub' }, t('polishHint')),
-          React.createElement('label', { className: 'dvs-field', title: t('wakeWordHint') }, t('wakeWord'),
-            React.createElement('input', {
-              type: 'text', value: String((snap && snap.wakeWord) || ''), disabled: !writable,
-              onChange: (e) => setTop('wakeWord', e.target.value),
-            })),
-          React.createElement('label', { className: 'dvs-field', title: t('streamHint') }, t('stream'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.dictation && draft.dictation.stream), disabled: !writable,
-              onChange: (e) => setIn('dictation', 'stream', e.target.checked),
-            })),
-          numField('dictation', 'streamChunkMs', t('streamChunkMs'), t('streamHint')),
-          React.createElement('label', { className: 'dvs-field', title: t('vadAdaptHint') }, t('vadAdapt'),
+          React.createElement('div', { className: 'cb-grid-2' },
+            langField('dictation'),
+            numField('dictation', 'vadSilenceMs', t('pauseMs'), t('pauseHint')),
+            numField('dictation', 'sendDelayMs', t('sendDelay'), t('sendDelayHint')),
+            numField('dictation', 'streamChunkMs', t('streamChunkMs'), t('streamHint')),
+          ),
+          React.createElement('div', { className: 'cb-row' },
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: !!(draft && draft.dictation && draft.dictation.polish), disabled: !writable,
+                onChange: (e) => setIn('dictation', 'polish', e.target.checked),
+              }),
+              t('polish'),
+            ),
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: !!(draft && draft.dictation && draft.dictation.stream), disabled: !writable,
+                onChange: (e) => setIn('dictation', 'stream', e.target.checked),
+              }),
+              t('stream'),
+            ),
+          ),
+          React.createElement('div', { className: 'cb-field' },
+            React.createElement('label', null, t('vadAdapt')),
             React.createElement('input', {
               type: 'range', min: 0, max: 1, step: 0.1,
               value: Number(draft && draft.dictation && draft.dictation.vadAdapt) || 0, disabled: !writable,
               onChange: (e) => setIn('dictation', 'vadAdapt', Number(e.target.value)),
-            })),
+            }),
+            React.createElement('span', { className: 'dvs-sub' }, t('vadAdaptHint')),
+          ),
+          textField('wakeWord', t('wakeWord'), t('wakeWordHint')),
         ),
-        React.createElement('div', { className: 'dvs-block' },
-          React.createElement('div', { className: 'dvs-h' }, t('messageTitle')),
-          React.createElement('div', { className: 'dvs-sub' }, t('messageHint')),
+
+        // 3. Voice Message Card
+        React.createElement('div', { className: 'cb-section-card' },
+          React.createElement('div', { className: 'cb-section-title' },
+            React.createElement('span', null, '💬 ' + t('messageTitle')),
+          ),
+          React.createElement('div', { className: 'cb-section-desc' }, t('messageHint')),
           React.createElement(ChainEditor, {
             value: draft && draft.message ? draft.message.chain : [], writable: writable,
             options: chainOptions,
             onChange: (v) => setIn('message', 'chain', v),
           }),
-          langField('message'),
-          numField('message', 'autoSendMs', t('undoMs'), t('undoHint')),
-          React.createElement('label', { className: 'dvs-field' }, t('polish'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.message && draft.message.polish), disabled: !writable,
-              onChange: (e) => setIn('message', 'polish', e.target.checked),
-            })),
-          React.createElement('label', { className: 'dvs-field', title: t('polishSendHint') }, t('polishSend'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.message && draft.message.polishSend), disabled: !writable,
-              onChange: (e) => setIn('message', 'polishSend', e.target.checked),
-            })),
-          React.createElement('label', { className: 'dvs-field', title: t('sessionCommandsHint') }, t('sessionCommands'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.message && draft.message.sessionCommands), disabled: !writable,
-              onChange: (e) => setIn('message', 'sessionCommands', e.target.checked),
-            })),
+          React.createElement('div', { className: 'cb-grid-2' },
+            langField('message'),
+            numField('message', 'autoSendMs', t('undoMs'), t('undoHint')),
+          ),
+          React.createElement('div', { className: 'cb-row' },
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: !!(draft && draft.message && draft.message.polish), disabled: !writable,
+                onChange: (e) => setIn('message', 'polish', e.target.checked),
+              }),
+              t('polish'),
+            ),
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: !!(draft && draft.message && draft.message.polishSend), disabled: !writable,
+                onChange: (e) => setIn('message', 'polishSend', e.target.checked),
+              }),
+              t('polishSend'),
+            ),
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: !!(draft && draft.message && draft.message.sessionCommands), disabled: !writable,
+                onChange: (e) => setIn('message', 'sessionCommands', e.target.checked),
+              }),
+              t('sessionCommands'),
+            ),
+          ),
         ),
-        React.createElement('div', { className: 'dvs-block' },
-          React.createElement('div', { className: 'dvs-h' }, t('customTitle')),
-          React.createElement('div', { className: 'dvs-sub' },
-            t('customHint')),
+
+        // 4. Custom Providers Card
+        React.createElement('div', { className: 'cb-section-card' },
+          React.createElement('div', { className: 'cb-section-title' },
+            React.createElement('span', null, '⚙️ ' + t('customTitle')),
+          ),
+          React.createElement('div', { className: 'cb-section-desc' }, t('customHint')),
           React.createElement(CustomEditor, {
             value: draft && draft.customProviders ? draft.customProviders : [], writable: writable,
+            options: chainOptions,
             onChange: (v) => setTop('customProviders', v),
           }),
         ),
-        React.createElement('div', { className: 'dvs-block' },
-          React.createElement('div', { className: 'dvs-h' }, t('general')),
+
+        // 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(),
-          textField('whisperUrl', t('whisperEndpoint'), t('whisperEndpointHint')),
-          textField('whisperBin', t('whisperBin'), t('whisperBinHint')),
-          textField('whisperModel', t('whisperModel'), t('whisperModelHint')),
-          textField('deepgramBaseUrl', t('deepgramEndpoint'), t('deepgramEndpointHint')),
-          React.createElement('label', { className: 'dvs-field' }, t('whisperAutostart'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.autoStart), disabled: !writable,
-              onChange: (e) => setTop('autoStart', e.target.checked),
-            })),
-          React.createElement('label', { className: 'dvs-field', title: t('normalizeTranscriptHint') },
-            t('normalizeTranscript'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.normalizeTranscript), disabled: !writable,
-              onChange: (e) => setTop('normalizeTranscript', e.target.checked),
-            })),
-          React.createElement('label', { className: 'dvs-field' }, t('beep'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.beep), disabled: !writable,
-              onChange: (e) => setTop('beep', e.target.checked),
-            })),
-          React.createElement('label', { className: 'dvs-field', title: t('localOnlyHint') }, t('localOnly'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.localOnly), disabled: !writable,
-              onChange: (e) => setTop('localOnly', e.target.checked),
-            })),
-          React.createElement('label', { className: 'dvs-field' }, t('voiceCommandsLabel'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.voiceCommands), disabled: !writable,
-              onChange: (e) => setTop('voiceCommands', e.target.checked),
-            })),
           micField(),
-          React.createElement('label', { className: 'dvs-field', title: t('noiseSuppressionHint') }, t('noiseSuppression'),
-            React.createElement('input', {
-              type: 'checkbox', checked: draft ? draft.noiseSuppression !== false : true, disabled: !writable,
-              onChange: (e) => setTop('noiseSuppression', e.target.checked),
-            })),
-          React.createElement('label', { className: 'dvs-field', title: t('contextGlossaryHint') }, t('contextGlossary'),
-            React.createElement('input', {
-              type: 'checkbox', checked: draft ? draft.contextGlossary !== false : true, disabled: !writable,
-              onChange: (e) => setTop('contextGlossary', e.target.checked),
-            })),
-          React.createElement('label', { className: 'dvs-field', title: t('visualizerStyleHint') }, t('visualizerStyle'),
+          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),
@@ -511,43 +654,27 @@
               React.createElement('option', { value: 'dynamic-orb' }, t('visDynamicOrb')),
               React.createElement('option', { value: 'bars' }, t('visBars')),
               React.createElement('option', { value: 'off' }, t('visOff')),
-            )),
-          React.createElement('label', { className: 'dvs-field' }, t('vocabulary'),
+            ),
+          ),
+          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)),
-            })),
-          React.createElement('label', { className: 'dvs-field', title: t('polishBaseUrlHint') }, t('polishBaseUrl'),
-            React.createElement('input', {
-              type: 'text', value: String((snap && snap.polishBaseUrl) || ''), disabled: !writable,
-              onChange: (e) => setTop('polishBaseUrl', e.target.value),
-            })),
-          React.createElement('label', { className: 'dvs-field' }, t('polishModel'),
-            React.createElement('input', {
-              type: 'text', value: String((draft && draft.polishModel) || ''), disabled: !writable,
-              onChange: (e) => setTop('polishModel', e.target.value),
-            })),
-          React.createElement('label', { className: 'dvs-field' }, t('polishKeyEnv'),
-            React.createElement('input', {
-              type: 'text', value: String((draft && draft.polishKeyEnv) || ''), disabled: !writable,
-              onChange: (e) => setTop('polishKeyEnv', e.target.value),
-            })),
-        ),
-        React.createElement('div', { className: 'dvs-block' },
-          React.createElement('div', { className: 'dvs-h' }, 'SenseVoice-ONNX / Sherpa-ONNX'),
-          React.createElement('div', { className: 'dvs-sub' }, t('sensevoiceHint')),
-          textField('sensevoiceUrl', t('sensevoiceEndpoint'), t('sensevoiceEndpointHint')),
-          textField('sensevoiceBin', t('sensevoiceBin'), t('sensevoiceBinHint')),
-          textField('sensevoiceModel', t('sensevoiceModel'), t('sensevoiceModelHint')),
-          React.createElement('label', { className: 'dvs-field' }, t('sensevoiceAutostart'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.sensevoiceAutostart), disabled: !writable,
-              onChange: (e) => setTop('sensevoiceAutostart', e.target.checked),
-            })),
+            }),
+          ),
         ),
-        React.createElement('div', { className: 'dvs-block' },
-          React.createElement('div', { className: 'dvs-h' }, t('providerDashboard')),
+
+        // 6. 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
@@ -584,53 +711,51 @@
                         React.createElement('span', null, t('successRate')),
                       ),
                     )
-                  })
-            )
-          )
+                  }),
+            ),
+          ),
         ),
-        React.createElement('div', { className: 'dvs-row' },
-          React.createElement('button', { type: 'button', className: 'dvs-save', disabled: !writable, onClick: save }, t('save')),
+
+        // Action bar (Save)
+        React.createElement('div', { className: 'cb-row' },
+          React.createElement('button', { type: 'button', className: 'cb-btn cb-btn-primary', disabled: !writable, onClick: save }, t('save')),
           saved ? React.createElement('span', { className: 'dvs-ok' }, t('saved')) : null,
           err ? React.createElement('span', { className: 'dvs-bad' }, err) : null,
         ),
       )
     }
 
-    // Card in Settings → Plugins → Plugin settings (#18): the kernel only
-    // draws the list shell, so title, hint and collapse are ours.
-    // Body mounts on first expand; the settings snapshot arrives then.
+    // Card in Settings → Plugins → Plugin settings (#18)
     function PluginCard(props) {
       const [open, setOpen] = React.useState(false)
       const tt = (props && props.t) || t
       const title = tt('title')
-      return React.createElement('li',
-        { className: open ? 'dvo-pcard dvo-pcardOpen' : 'dvo-pcard' },
-        React.createElement('button',
-          {
-            type: 'button', className: 'dvo-phead',
-            'aria-expanded': open ? 'true' : 'false',
-            'aria-label': (open ? tt('collapse') : tt('expand')) + ': ' + title,
-            onClick: () => setOpen((v) => !v),
-          },
-          React.createElement('span', { className: 'dvo-pheadtext' },
-            React.createElement('span', { className: 'dvo-ptitle' }, title),
-            React.createElement('span', { className: 'dvo-pdesc' }, tt('cardHint')),
+      return React.createElement(ErrorBoundary, null,
+        React.createElement('li',
+          { className: open ? 'dvo-pcard dvo-pcardOpen' : 'dvo-pcard' },
+          React.createElement('button',
+            {
+              type: 'button', className: 'dvo-phead',
+              'aria-expanded': open ? 'true' : 'false',
+              'aria-label': (open ? tt('collapse') : tt('expand')) + ': ' + title,
+              onClick: () => setOpen((v) => !v),
+            },
+            React.createElement('span', { className: 'dvo-pheadtext' },
+              React.createElement('span', { className: 'dvo-ptitle' }, title),
+              React.createElement('span', { className: 'dvo-pdesc' }, tt('cardHint')),
+            ),
+            React.createElement('span', { className: 'dvo-pchev' }, chevronIcon()),
           ),
-          React.createElement('span', { className: 'dvo-pchev' }, chevronIcon()),
+          open ? React.createElement('div', { className: 'dvo-pbody' }, React.createElement(VoiceSection, props)) : null,
         ),
-        open ? React.createElement('div', { className: 'dvo-pbody' }, React.createElement(VoiceSection, props)) : null,
       )
     }
 
     function registerSettings(ctx) {
-      // Settings card under Settings → Plugins → Plugin settings (#18).
-      // The registration key must equal NS (the settings namespace), otherwise
-      // the tab silently skips the slot.
       ctx.slots.inject('settings.plugin.item', () => ctx.slots.register(
         {
           name: 'settings.plugin.item',
           key: NS,
-          // locale on the slot record is what makes the component receive props.t.
           locale: NS,
           inject: () => ({ ctx: ctx }),
         },