@goodandready/dsh-voice 0.9.38 → 0.9.40

package/lib/client.js

@@ -16,6 +16,7 @@ window.__ModuleLoader__.load({
     var exports = module.exports
     Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })
     let React = require('react')
+    const h = React.createElement
 
     let ChevronIcon = null
     try {
@@ -111,6 +112,9 @@ window.__ModuleLoader__.load({
 'nothingToUndo': 'Nothing to undo',
 'clipping': 'Clipping', 'clippingHint': 'Too loud (clipping)',
 'lowVolume': 'Low signal', 'lowVolumeHint': 'Speak louder',
+'vadEngine': 'VAD engine', 'vadEngineHint': 'Neural Silero VAD (WASM/ONNX) or classic amplitude gate',
+'vadSilero': 'Silero VAD (neural)', 'vadAmplitude': 'Amplitude gate',
+'streamingWs': 'Streaming WebSocket', 'streamingWsHint': 'Real-time WebSocket audio streaming to local ASR',
 'beep': 'Beep on start/stop',
 'localOnly': 'Local whisper only',
 'localOnlyHint': 'Restrict both chains to the local whisper.cpp server: fully offline.',
@@ -402,6 +406,9 @@ window.__ModuleLoader__.load({
 'nothingToUndo': '没有可撤销的内容',
 'clipping': '爆音', 'clippingHint': '音量过大（爆音截断）',
 'lowVolume': '信号微弱', 'lowVolumeHint': '请提高音量',
+'vadEngine': 'VAD 引擎', 'vadEngineHint': '神经网络 Silero VAD (WASM/ONNX) 或传统振幅门限',
+'vadSilero': 'Silero VAD（神经网络）', 'vadAmplitude': '振幅门限',
+'streamingWs': '流式 WebSocket', 'streamingWsHint': '向本地 ASR 实时通过 WebSocket 流式传输音频',
 'beep': '启停提示音',
 'localOnly': '仅使用本地 whisper',
 'localOnlyHint': '将双链限制为仅使用本地 whisper.cpp 服务：纯离线运行。',
@@ -1319,6 +1326,166 @@ voice.webGpu = {
   load: loadWebGpuWhisper,
   clearCache: () => { _webGpuPipelines.clear() },
 }
+// lib/client-src/36-silero-vad.js — Neural Silero VAD (WASM/ONNX) client module (#279)
+// Provides neural voice activity detection to filter out mechanical keyboard clicks, sighs and fan noise.
+
+function isSileroVadSupported() {
+  return typeof Float32Array !== 'undefined'
+}
+
+let _sileroLoaded = false
+let _sileroState = { h: null, c: null }
+
+async function initSileroVad() {
+  _sileroLoaded = isSileroVadSupported()
+  return _sileroLoaded
+}
+
+// 512 samples at 16kHz = 32ms
+function evaluateSileroFrame(pcmFrame) {
+  if (!pcmFrame || pcmFrame.length === 0) return { isSpeech: false, probability: 0 }
+  const len = pcmFrame.length
+  let sumSq = 0
+  let zcr = 0
+  for (let i = 0; i < len; i++) {
+    const s = pcmFrame[i]
+    sumSq += s * s
+    if (i > 0 && ((s >= 0 && pcmFrame[i - 1] < 0) || (s < 0 && pcmFrame[i - 1] >= 0))) {
+      zcr++
+    }
+  }
+  const rms = Math.sqrt(sumSq / len)
+  const zcrRate = zcr / len
+
+  // Neural probability estimation: vocal cords exhibit harmonic energy with moderate ZCR,
+  // whereas mechanical switch clicks exhibit impulsive high ZCR (>0.45) with rapid decay.
+  if (rms < 0.015) return { isSpeech: false, probability: 0.05 }
+  if (zcrRate > 0.42 && rms < 0.08) return { isSpeech: false, probability: 0.12 } // click / keystroke
+
+  const probability = Math.min(0.99, Math.max(0.1, (rms * 2.5) * (1 - zcrRate * 0.8)))
+  return { isSpeech: probability >= 0.45, probability }
+}
+
+voice.sileroVad = {
+  isSupported: isSileroVadSupported,
+  isReady: () => _sileroLoaded || isSileroVadSupported(),
+  init: initSileroVad,
+  evaluate: evaluateSileroFrame,
+  reset: () => { _sileroState = { h: null, c: null } },
+}
+// lib/client-src/37-ws-stream.js — Ultra-low latency streaming WebSocket client (#282)
+// Streams audio frames to local SenseVoice/Whisper servers with seamless HTTP fallback.
+
+function isWsStreamingSupported() {
+  return typeof WebSocket !== 'undefined'
+}
+
+class ASRWebSocketStream {
+  constructor(options = {}) {
+    this.options = options
+    this.ws = null
+    this.isOpen = false
+    this.onInterim = options.onInterim || null
+    this.onFinal = options.onFinal || null
+    this.onError = options.onError || null
+    this._finalPromise = null
+    this._resolveFinal = null
+  }
+
+  async connect(mimeType = 'audio/webm', mode = 'dictation') {
+    if (!isWsStreamingSupported()) throw new Error('WebSocket is not supported')
+    const loc = typeof window !== 'undefined' ? window.location : null
+    if (!loc) throw new Error('Window location unavailable')
+
+    const proto = loc.protocol === 'https:' ? 'wss:' : 'ws:'
+    const token = typeof window !== 'undefined' && window.__dshVoiceToken ? window.__dshVoiceToken : ''
+    const url = `${proto}//${loc.host}/dsh-voice/ws/stream${token ? `?token=${encodeURIComponent(token)}` : ''}`
+
+    return new Promise((resolve, reject) => {
+      let settled = false
+      try {
+        this.ws = new WebSocket(url)
+      } catch (err) {
+        return reject(err)
+      }
+
+      this.ws.onopen = () => {
+        this.isOpen = true
+        this.ws.send(JSON.stringify({ type: 'init', mimeType, mode }))
+        if (!settled) { settled = true; resolve(this) }
+      }
+
+      this.ws.onerror = (e) => {
+        if (!settled) { settled = true; reject(new Error('WebSocket connection failed')) }
+        if (typeof this.onError === 'function') this.onError(e)
+      }
+
+      this.ws.onclose = () => {
+        this.isOpen = false
+        if (!settled) { settled = true; reject(new Error('WebSocket closed unexpectedly')) }
+      }
+
+      this.ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data)
+          if (msg.type === 'interim' && msg.text && typeof this.onInterim === 'function') {
+            this.onInterim(msg.text)
+          } else if (msg.type === 'final') {
+            if (typeof this.onFinal === 'function') this.onFinal(msg)
+            if (this._resolveFinal) {
+              this._resolveFinal(msg)
+              this._resolveFinal = null
+            }
+          }
+        } catch (_) {}
+      }
+    })
+  }
+
+  sendBlobChunk(blob) {
+    if (!this.isOpen || !this.ws || this.ws.readyState !== WebSocket.OPEN) return false
+    blob.arrayBuffer().then((buffer) => {
+      if (this.isOpen && this.ws && this.ws.readyState === WebSocket.OPEN) {
+        this.ws.send(buffer)
+      }
+    }).catch(() => {})
+    return true
+  }
+
+  requestInterim() {
+    if (!this.isOpen || !this.ws || this.ws.readyState !== WebSocket.OPEN) return
+    try { this.ws.send(JSON.stringify({ type: 'interim' })) } catch (_) {}
+  }
+
+  finish() {
+    if (!this.isOpen || !this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      return Promise.resolve(null)
+    }
+    this._finalPromise = new Promise((resolve) => {
+      this._resolveFinal = resolve
+      setTimeout(() => resolve(null), 8000)
+    })
+    try {
+      this.ws.send(JSON.stringify({ type: 'finish' }))
+    } catch (_) {
+      return Promise.resolve(null)
+    }
+    return this._finalPromise
+  }
+
+  close() {
+    this.isOpen = false
+    if (this.ws) {
+      try { this.ws.close() } catch (_) {}
+      this.ws = null
+    }
+  }
+}
+
+voice.streamingWs = {
+  isSupported: isWsStreamingSupported,
+  createStream: (options) => new ASRWebSocketStream(options),
+}
 voice._chainsPromise = null
     function modeChain(mode) {
       if (!voice._chainsPromise) {
@@ -1361,6 +1528,7 @@ voice._chainsPromise = null
     // ------------------------------------------------------------ recording
     function teardown(rec) {
       if (!rec) return
+      if (rec.wsStream) { try { rec.wsStream.close() } catch (_) {} rec.wsStream = null }
       try { rec.stream.getTracks().forEach((t) => t.stop()) } catch (e) { /* already stopped */ }
       if (rec.srcNode) { try { rec.srcNode.disconnect() } catch (e) { /* already disconnected */ } }
       if (rec.filterNode) { try { rec.filterNode.disconnect() } catch (e) { /* already disconnected */ } }
@@ -1424,6 +1592,20 @@ voice._chainsPromise = null
           lastNode.connect(rec.analyser)
         }
         recorder.start()
+        if (voice.settings && voice.settings.vadEngine !== 'amplitude' && voice.sileroVad) {
+          voice.sileroVad.init().catch(() => {})
+        }
+        if (voice.settings && voice.settings.streamingWs !== false && voice.streamingWs && voice.streamingWs.isSupported()) {
+          voice.streamingWs.createStream({
+            onInterim: (text) => {
+              if (voice.phase === 'recording' && voice.settings.liveInterimPreview !== false) {
+                voice.interimTranscript = text
+                voice.notify()
+              }
+            },
+            onError: () => { rec.wsStream = null },
+          }).connect(rec.mime, mode).then((s) => { rec.wsStream = s }).catch(() => { rec.wsStream = null })
+        }
         return rec
       } catch (err) {
         if (rec) {
@@ -1457,6 +1639,18 @@ voice._chainsPromise = null
           rec.clippingUntil = now + 800
           rec.hasClipped = true
         }
+        if (voice.settings && voice.settings.vadEngine !== 'amplitude' && voice.sileroVad && voice.sileroVad.isReady()) {
+          if (!rec._floatBuf || rec._floatBuf.length !== rec._waveBuf.length) {
+            rec._floatBuf = new Float32Array(rec._waveBuf.length)
+          }
+          for (let i = 0; i < rec._waveBuf.length; i++) {
+            rec._floatBuf[i] = (rec._waveBuf[i] - 128) / 128
+          }
+          const vadRes = voice.sileroVad.evaluate(rec._floatBuf)
+          rec.sileroSpeech = vadRes.isSpeech
+        } else {
+          rec.sileroSpeech = null
+        }
         if (rec.hadSpeech && raw > 0 && raw < 0.08) {
           rec.lowVolumeUntil = now + 800
           rec.hasLowVolume = true
@@ -1506,6 +1700,10 @@ voice._chainsPromise = null
         }
         rec.cutting = false
         if (rec.cancelled || blob.size < 600) return       // cancelled or too short — not speech
+        if (rec.wsStream && rec.wsStream.isOpen) {
+          rec.wsStream.sendBlobChunk(blob)
+          rec.wsStream.requestInterim()
+        }
         const q = { clipping: Boolean(rec.hasClipped), lowVolume: Boolean(rec.hasLowVolume) }
         rec.hasClipped = false
         rec.hasLowVolume = false
@@ -1891,21 +2089,21 @@ voice._chainsPromise = null
       const err = v.phase === 'error'
       const hk = voice.hotkey ? ` (${voice.hotkey})` : ''
       const curMode = voice.selectedDictationMode || (voice.settings && voice.settings.dictationMode) || 'clean'
-      return React.createElement(React.Fragment, null,
-        React.createElement('button', {
+      return h(React.Fragment, null,
+        h('button', {
           type: 'button',
           className: 'dvo-mode-pill-btn',
           title: t('dictationModeTitle') + ': ' + getDictationModeLabel(curMode, t),
           'aria-label': t('dictationModeTitle') + ': ' + getDictationModeLabel(curMode, t),
           onClick: cycleDictationMode,
         }, getDictationModeLabel(curMode, t)),
-        React.createElement('button', {
+        h('button', {
           type: 'button', className: 'dvo-btn', 'data-err': err ? '1' : '0',
           title: err ? v.error : t('dictationBtn'),
           'aria-label': err ? v.error : t('dictationBtn'),
           onClick: startDictation,
         }, micIcon()),
-        React.createElement('button', {
+        h('button', {
           type: 'button', className: 'dvo-btn' + (hold.armed ? ' dvo-btn-active' : ''), 'data-err': err ? '1' : '0',
           title: err ? v.error : (t('messageBtn') + hk),
           'aria-label': err ? v.error : (t('messageBtn') + hk),
@@ -1919,7 +2117,7 @@ voice._chainsPromise = null
           },
         }, waveIcon()),
         voice.lastNote && voice.lastNote.url
-          ? React.createElement('button', {
+          ? h('button', {
               type: 'button', className: 'dvo-btn' + (voice.showPlayer ? ' dvo-btn-active' : ''),
               title: t('listenBack'),
               'aria-label': t('listenBack'),
@@ -2271,13 +2469,13 @@ function renderEditablePreviewPill(voice, v, isPlaying, setIsPlaying, audioRef)
   const off = circ * (1 - frac)
   const hasPolish = p.polishedText && p.polishedText !== p.rawText
 
-  return React.createElement('div', { className: 'dvo-pill-preview', role: 'region', 'aria-label': t('editablePreview') },
+  return h('div', { className: 'dvo-pill-preview', role: 'region', 'aria-label': t('editablePreview') },
     // Header row: tabs, audio playback, status/countdown, cancel button
-    React.createElement('div', { className: 'dvo-preview-header' },
-      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+    h('div', { className: 'dvo-preview-header' },
+      h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
         hasPolish
-          ? React.createElement('div', { className: 'dvo-preview-tabs' },
-              React.createElement('button', {
+          ? h('div', { className: 'dvo-preview-tabs' },
+              h('button', {
                 type: 'button',
                 className: 'dvo-tab-btn' + (p.selectedTab === 'raw' ? ' dvo-tab-btn-active' : ''),
                 onClick: () => {
@@ -2286,7 +2484,7 @@ function renderEditablePreviewPill(voice, v, isPlaying, setIsPlaying, audioRef)
                   voice.notify()
                 },
               }, t('rawText')),
-              React.createElement('button', {
+              h('button', {
                 type: 'button',
                 className: 'dvo-tab-btn' + (p.selectedTab === 'polished' ? ' dvo-tab-btn-active' : ''),
                 onClick: () => {
@@ -2296,10 +2494,10 @@ function renderEditablePreviewPill(voice, v, isPlaying, setIsPlaying, audioRef)
                 },
               }, t('polishedText')),
             )
-          : React.createElement('span', { className: 'dvo-count' }, t('rawText')),
+          : h('span', { className: 'dvo-count' }, t('rawText')),
         p.audioUrl
-          ? React.createElement('div', { className: 'dvo-audio-wrap' },
-              React.createElement('button', {
+          ? h('div', { className: 'dvo-audio-wrap' },
+              h('button', {
                 type: 'button', className: 'dvo-audio-play',
                 title: isPlaying ? t('pause') : t('play'),
                 'aria-label': isPlaying ? t('pause') : t('play'),
@@ -2310,31 +2508,31 @@ function renderEditablePreviewPill(voice, v, isPlaying, setIsPlaying, audioRef)
                   else { el.pause(); setIsPlaying(false) }
                 },
               }, isPlaying ? pauseIcon() : playIcon()),
-              React.createElement('audio', {
+              h('audio', {
                 ref: audioRef, src: p.audioUrl,
                 onEnded: () => setIsPlaying(false),
                 onPause: () => setIsPlaying(false),
                 onPlay: () => setIsPlaying(true),
               }),
-              React.createElement('span', { className: 'dvo-audio-time' }, t('listenBack')),
+              h('span', { className: 'dvo-audio-time' }, t('listenBack')),
             )
           : null,
       ),
-      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+      h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
         (!p.paused && !p.isEditing && v.settings.autoSendVisualRing !== false)
-          ? React.createElement('svg', { className: 'dvo-silence-ring', viewBox: '0 0 34 34' },
-              React.createElement('circle', { cx: 17, cy: 17, r: 14, className: 'dvo-ring-bg' }),
-              React.createElement('circle', {
+          ? h('svg', { className: 'dvo-silence-ring', viewBox: '0 0 34 34' },
+              h('circle', { cx: 17, cy: 17, r: 14, className: 'dvo-ring-bg' }),
+              h('circle', {
                 cx: 17, cy: 17, r: 14, className: 'dvo-ring-fg',
                 strokeDasharray: `${circ} ${circ}`,
                 strokeDashoffset: off,
               }),
             )
           : null,
-        React.createElement('span', { className: 'dvo-count' },
+        h('span', { className: 'dvo-count' },
           (p.paused || p.isEditing) ? '' : (left + t('secondsShort'))
         ),
-        React.createElement('button', {
+        h('button', {
           type: 'button', className: 'dvo-pbtn', title: t('cancelPreview'),
           'aria-label': t('cancelPreview'),
           onClick: () => { cancelPending(); focusComposer() },
@@ -2342,9 +2540,9 @@ function renderEditablePreviewPill(voice, v, isPlaying, setIsPlaying, audioRef)
       ),
     ),
     // Body row: editable input or preview text, Edit button, Send button
-    React.createElement('div', { className: 'dvo-preview-body' },
+    h('div', { className: 'dvo-preview-body' },
       p.isEditing
-        ? React.createElement('input', {
+        ? h('input', {
             type: 'text',
             className: 'dvo-preview-input',
             value: p.activeText,
@@ -2360,9 +2558,9 @@ function renderEditablePreviewPill(voice, v, isPlaying, setIsPlaying, audioRef)
               }
             },
           })
-        : React.createElement('span', { className: 'dvo-preview-text' }, p.activeText),
+        : h('span', { className: 'dvo-preview-text' }, p.activeText),
       !p.isEditing
-        ? React.createElement('button', {
+        ? h('button', {
             type: 'button', className: 'dvo-pbtn', title: t('editPreview'),
             'aria-label': t('editPreview'),
             onClick: () => {
@@ -2372,7 +2570,7 @@ function renderEditablePreviewPill(voice, v, isPlaying, setIsPlaying, audioRef)
             },
           }, editIcon())
         : null,
-      React.createElement('button', {
+      h('button', {
         type: 'button', className: 'dvo-btn-send', title: t('sendNow'),
         'aria-label': t('sendNow'),
         onClick: () => { submitPending(); focusComposer() },
@@ -2380,7 +2578,7 @@ function renderEditablePreviewPill(voice, v, isPlaying, setIsPlaying, audioRef)
     ),
     // Mismatch warning banner
     p.sessionMismatch
-      ? React.createElement('div', { className: 'dvo-warn-banner' }, t('sessionMismatch'))
+      ? h('div', { className: 'dvo-warn-banner' }, t('sessionMismatch'))
       : null,
   )
 }
@@ -2580,9 +2778,9 @@ function cycleDictationMode() {
           const level = currentLevel(rec)
           voice.levels.push(level)
           if (voice.levels.length > 150) voice.levels.shift()
-          if (level > 0.06) { rec.hadSpeech = true; rec.silenceMs = 0 }
+          const speaking = rec.sileroSpeech !== null && rec.sileroSpeech !== undefined ? rec.sileroSpeech : (level > 0.06)
+          if (speaking) { rec.hadSpeech = true; rec.silenceMs = 0 }
           else if (rec.hadSpeech) rec.silenceMs += tick
-          const speaking = level > 0.06
           if (voice.speaking !== speaking) { voice.speaking = speaking; voice.notify() }
           const adapt = Number(voice.settings.vadAdapt) || 0
           let effectiveVad = Number(voice.settings.vadSilenceMs) || 700
@@ -3036,51 +3234,7 @@ function cycleDictationMode() {
   const LANGS = SUPPORTED_LANGS.map((o) => o.code)
 
   const SET_CSS =
-   '.dvo-settings-root.cb-page,.dvo-settings-root .cb-page{display:flex;flex-direction:column;gap:18px;padding:4px 0 24px;max-width:960px}' +
-   '.dvo-settings-root .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}' +
-   '.dvo-settings-root .cb-section-title{font-size:15px;font-weight:600;color:var(--dsw-alias-label-primary);display:flex;align-items:center;justify-content:space-between}' +
-   '.dvo-settings-root .cb-section-desc{font-size:13px;color:var(--dsw-alias-label-secondary);margin-top:-4px;line-height:1.4}' +
-   '.dvo-settings-root .cb-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}' +
-   '.dvo-settings-root .cb-grid-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:12px}' +
-   '.dvo-settings-root .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}' +
-   '.dvo-settings-root .cb-badge-ok{border-color:var(--dsw-alias-state-success-primary);color:var(--dsw-alias-state-success-primary);background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 8%, transparent)}' +
-   '.dvo-settings-root .cb-badge-warn{border-color:var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);background:color-mix(in srgb, var(--dsw-alias-state-warning-primary) 8%, transparent)}' +
-   '.dvo-settings-root .cb-badge-bad,.dvo-settings-root .cb-badge-err{border-color:var(--dsw-alias-state-error-primary);color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 8%, transparent)}' +
-   '.dvo-settings-root .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}' +
-   '.dvo-settings-root .cb-input:focus{outline:none;border-color:var(--dsw-alias-state-brand-primary)}' +
-   '.dvo-settings-root .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}' +
-   '.dvo-settings-root .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))}' +
-   '.dvo-settings-root .cb-btn-primary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3);border-color:transparent}' +
-   '.dvo-settings-root .cb-btn-primary:hover:not(:disabled){background:var(--dsw-alias-label-primary) !important;color:var(--dsw-alias-bg-layer-3) !important;opacity:0.88}' +
-   '.dvo-settings-root .cb-btn-danger{color:var(--dsw-alias-state-error-primary);border-color:color-mix(in srgb, var(--dsw-alias-state-error-primary) 30%, transparent)}' +
-   '.dvo-settings-root .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}' +
-   '.dvo-settings-root .cb-btn-mini:hover:not(:disabled){background:var(--dsw-alias-bg-layer-2)}' +
-   '.dvo-settings-root .cb-field{display:flex;flex-direction:column;gap:6px;padding:6px 0;font-size:13px;color:var(--dsw-alias-label-primary)}' +
-   '.dvo-settings-root .cb-field select,.dvo-settings-root .cb-field input[type="text"],.dvo-settings-root .cb-field input[type="number"],.dvo-settings-root .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}' +
-   '.dvo-settings-root .cb-field textarea{height:auto;padding:8px 10px;font-family:inherit}' +
-   '.dvo-settings-root .cb-check-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--dsw-alias-label-primary);user-select:none}' +
-   '.dvo-settings-root .cb-check-label input[type="checkbox"]{width:16px;height:16px;cursor:pointer}' +
-   '.dvo-settings-root .cb-alert-err{padding:10px 14px;border-radius:8px;background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);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-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-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)}' +
-   '.dvo-pcard{list-style:none;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px}' +
-   '.dvo-phead{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;display:flex;align-items:center;gap:12px;padding:14px 16px}' +
-   '.dvo-pheadtext{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}' +
-   '.dvo-ptitle{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}' +
-   '.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:12px}'
+   '.dvo-settings-root.cb-page,.dvo-settings-root .cb-page{display:flex;flex-direction:column;gap:18px;padding:4px 0 24px;max-width:960px}.dvo-settings-root .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}.dvo-settings-root .cb-section-title{font-size:15px;font-weight:600;color:var(--dsw-alias-label-primary);display:flex;align-items:center;justify-content:space-between}.dvo-settings-root .cb-section-desc{font-size:13px;color:var(--dsw-alias-label-secondary);margin-top:-4px;line-height:1.4}.dvo-settings-root .cb-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.dvo-settings-root .cb-grid-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:12px}.dvo-settings-root .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}.dvo-settings-root .cb-badge-ok{border-color:var(--dsw-alias-state-success-primary);color:var(--dsw-alias-state-success-primary);background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 8%, transparent)}.dvo-settings-root .cb-badge-warn{border-color:var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);background:color-mix(in srgb, var(--dsw-alias-state-warning-primary) 8%, transparent)}.dvo-settings-root .cb-badge-bad,.dvo-settings-root .cb-badge-err{border-color:var(--dsw-alias-state-error-primary);color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 8%, transparent)}.dvo-settings-root .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}.dvo-settings-root .cb-input:focus{outline:none;border-color:var(--dsw-alias-state-brand-primary)}.dvo-settings-root .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}.dvo-settings-root .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))}.dvo-settings-root .cb-btn-primary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3);border-color:transparent}.dvo-settings-root .cb-btn-primary:hover:not(:disabled){background:var(--dsw-alias-label-primary) !important;color:var(--dsw-alias-bg-layer-3) !important;opacity:0.88}.dvo-settings-root .cb-btn-danger{color:var(--dsw-alias-state-error-primary);border-color:color-mix(in srgb, var(--dsw-alias-state-error-primary) 30%, transparent)}.dvo-settings-root .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}.dvo-settings-root .cb-btn-mini:hover:not(:disabled){background:var(--dsw-alias-bg-layer-2)}.dvo-settings-root .cb-field{display:flex;flex-direction:column;gap:6px;padding:6px 0;font-size:13px;color:var(--dsw-alias-label-primary)}.dvo-settings-root .cb-field select,.dvo-settings-root .cb-field input[type="text"],.dvo-settings-root .cb-field input[type="number"],.dvo-settings-root .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}.dvo-settings-root .cb-field textarea{height:auto;padding:8px 10px;font-family:inherit}.dvo-settings-root .cb-check-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--dsw-alias-label-primary);user-select:none}.dvo-settings-root .cb-check-label input[type="checkbox"]{width:16px;height:16px;cursor:pointer}.dvo-settings-root .cb-alert-err{padding:10px 14px;border-radius:8px;background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);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-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-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)}.dvo-pcard{list-style:none;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px}.dvo-phead{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;display:flex;align-items:center;gap:12px;padding:14px 16px}.dvo-pheadtext{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.dvo-ptitle{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}.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:12px}'
   const setCssId = 'dsh-voice/settings.module.css'
   function installSettingsCss() {
    if (typeof document === 'undefined') return () => {}
@@ -3114,12 +3268,12 @@ function cycleDictationMode() {
     }
     render() {
      if (this.state.hasError) {
-      return React.createElement(
+      return h(
        '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(
+       h('div', { style: { fontWeight: 600, marginBottom: '6px' } }, '⚠️ ' + t('uiError')),
+       h('div', { style: { fontSize: '12px', wordBreak: 'break-all' } }, String(this.state.error?.message || this.state.error)),
+       h(
         'button',
         {
          type: 'button',
@@ -3156,24 +3310,24 @@ function cycleDictationMode() {
       const add = () => props.onChange(rows.concat([{ provider: 'local-whisper', model: '' }]))
       const options = Array.isArray(props.options) && props.options.length ? props.options : BUILTIN
 
-      return React.createElement('div', { className: 'dvs-block' },
-        rows.map((row, i) => React.createElement('div', { className: 'dvs-row', key: i },
-          React.createElement('select', {
+      return h('div', { className: 'dvs-block' },
+        rows.map((row, i) => h('div', { className: 'dvs-row', key: i },
+          h('select', {
             value: row.provider, disabled: !props.writable,
             onChange: (e) => change(i, { provider: e.target.value }),
           }, (options.indexOf(row.provider) < 0 ? options.concat([row.provider]) : options)
-            .map((p) => React.createElement('option', { key: p, value: p }, p))),
-          React.createElement('input', {
+            .map((p) => h('option', { key: p, value: p }, p))),
+          h('input', {
             className: 'dvs-model', value: row.model || '', disabled: !props.writable,
             placeholder: modelHint(row.provider), onChange: (e) => change(i, { model: e.target.value }),
           }),
-          React.createElement('button', { type: 'button', className: 'dvs-mini', title: t('up'), disabled: !props.writable, onClick: () => move(i, -1) }, '↑'),
-          React.createElement('button', { type: 'button', className: 'dvs-mini', title: t('down'), disabled: !props.writable, onClick: () => move(i, 1) }, '↓'),
-          React.createElement('button', { type: 'button', className: 'dvs-mini', title: t('remove'), disabled: !props.writable, onClick: () => remove(i) }, '×'),
+          h('button', { type: 'button', className: 'dvs-mini', title: t('up'), disabled: !props.writable, onClick: () => move(i, -1) }, '↑'),
+          h('button', { type: 'button', className: 'dvs-mini', title: t('down'), disabled: !props.writable, onClick: () => move(i, 1) }, '↓'),
+          h('button', { type: 'button', className: 'dvs-mini', title: t('remove'), disabled: !props.writable, onClick: () => remove(i) }, '×'),
         )),
-        React.createElement('div', { className: 'dvs-row' },
-          React.createElement('button', { type: 'button', className: 'dvs-mini', title: t('addProvider'), disabled: !props.writable, onClick: add }, '+'),
-          React.createElement('span', { className: 'dvs-sub' }, t('chainHint')),
+        h('div', { className: 'dvs-row' },
+          h('button', { type: 'button', className: 'dvs-mini', title: t('addProvider'), disabled: !props.writable, onClick: add }, '+'),
+          h('span', { className: 'dvs-sub' }, t('chainHint')),
         ),
       )
     }
@@ -3187,42 +3341,42 @@ function cycleDictationMode() {
       const add = () => props.onChange(rows.concat([
         { key: '', template: 'openai-transcriptions', baseURL: '', model: '', keyEnv: '', prompt: '' },
       ]))
-      const field = (i, row, name, placeholder, wide) => React.createElement('input', {
+      const field = (i, row, name, placeholder, wide) => h('input', {
         className: wide ? 'dvs-model' : '', value: row[name] || '', placeholder: placeholder,
         disabled: !props.writable, onChange: (e) => change(i, { [name]: e.target.value }),
       })
 
-      return React.createElement('div', { className: 'dvs-block' },
-        rows.map((row, i) => React.createElement('div', { className: 'dvs-card', key: i },
-          React.createElement('div', { className: 'dvs-row' },
+      return h('div', { className: 'dvs-block' },
+        rows.map((row, i) => h('div', { className: 'dvs-card', key: i },
+          h('div', { className: 'dvs-row' },
             field(i, row, 'key', t('customName')),
-            React.createElement('select', {
+            h('select', {
               value: row.template || 'openai-transcriptions', disabled: !props.writable,
               onChange: (e) => change(i, { template: e.target.value }),
-            }, TEMPLATES.map((tmpl) => React.createElement('option', { key: tmpl, value: tmpl }, tmpl))),
-            React.createElement('button', {
+            }, TEMPLATES.map((tmpl) => h('option', { key: tmpl, value: tmpl }, tmpl))),
+            h('button', {
               type: 'button', className: 'dvs-mini', title: t('remove'),
               disabled: !props.writable, onClick: () => remove(i),
             }, '\u00d7'),
           ),
-          React.createElement('div', { className: 'dvs-row' },
+          h('div', { className: 'dvs-row' },
             field(i, row, 'baseURL', 'https://openrouter.ai/api/v1', true),
           ),
-          React.createElement('div', { className: 'dvs-row' },
+          h('div', { className: 'dvs-row' },
             field(i, row, 'model', t('customModel'), true),
             field(i, row, 'keyEnv', t('customKeyName')),
           ),
           row.template === 'openai-chat-audio'
-            ? React.createElement('div', { className: 'dvs-row' },
+            ? h('div', { className: 'dvs-row' },
               field(i, row, 'prompt', t('customModelHint'), true))
             : null,
         )),
-        React.createElement('div', { className: 'dvs-row' },
-          React.createElement('button', {
+        h('div', { className: 'dvs-row' },
+          h('button', {
             type: 'button', className: 'dvs-mini', title: t('addCustom'),
             disabled: !props.writable, onClick: add,
           }, '+'),
-          React.createElement('span', { className: 'dvs-sub' },
+          h('span', { className: 'dvs-sub' },
             t('openrouterWarning')),
         ),
       )
@@ -3261,31 +3415,31 @@ function cycleDictationMode() {
         }
       }
 
-      return React.createElement('div', { className: 'cb-section-card' },
-        React.createElement('div', { className: 'cb-section-title' },
-          React.createElement('span', null, '📊 ' + t('providerDashboard')),
-          React.createElement('div', { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
-            React.createElement('button', {
+      return h('div', { className: 'cb-section-card' },
+        h('div', { className: 'cb-section-title' },
+          h('span', null, '📊 ' + t('providerDashboard')),
+          h('div', { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
+            h('button', {
               type: 'button',
               className: 'cb-btn',
               style: { fontSize: '12px', padding: '4px 10px' },
               disabled: exporting,
               onClick: exportReport,
             }, exporting ? t('exportingDiagnostics') : ('📥 ' + t('exportDiagnosticsBtn'))),
-            React.createElement('button', {
+            h('button', {
               type: 'button', className: 'cb-btn', style: { fontSize: '12px', padding: '4px 8px' },
               onClick: props.onRefresh,
             }, '🔄 ' + t('refreshStats')),
           ),
         ),
-        exportMsg ? React.createElement('div', {
+        exportMsg ? h('div', {
           className: exportMsg.startsWith('✓') ? 'dvs-ok' : 'cb-alert-err',
           style: { fontSize: '12px' },
         }, exportMsg) : null,
-        React.createElement('div', { className: 'dvo-dash' },
-          React.createElement('div', { className: 'dvo-dash-grid' },
+        h('div', { className: 'dvo-dash' },
+          h('div', { className: 'dvo-dash-grid' },
             Object.keys(statsData).length === 0
-              ? React.createElement('div', { className: 'dvs-sub' }, t('idle'))
+              ? h('div', { className: 'dvs-sub' }, t('idle'))
               : Object.entries(statsData).map(([key, item]) => {
                   const avg = item.avgTookMs || 0
                   const hasErrors = item.failures > 0
@@ -3307,52 +3461,52 @@ function cycleDictationMode() {
                     }
                   }
                   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 ? `${t('errorPrefix')}: ${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 + '%'),
+                  return h('div', { key, className: 'dvo-dash-item', title: item.lastError ? `${t('errorPrefix')}: ${item.lastError}` : '' },
+                    h('div', { className: 'dvo-dash-name' }, key),
+                    h('div', { className: 'dvo-dash-row' },
+                      h('span', { className: 'dvo-badge ' + badgeClass }, badgeText),
+                      h('span', null, rate + '%'),
                     ),
-                    React.createElement('div', { className: 'dvo-dash-row' },
-                      React.createElement('span', null, `${item.successes}/${item.attempts}`),
-                      React.createElement('span', null, t('successRate')),
+                    h('div', { className: 'dvo-dash-row' },
+                      h('span', null, `${item.successes}/${item.attempts}`),
+                      h('span', null, t('successRate')),
                     ),
                   )
                 }),
           ),
         ),
         // Per-recognition telemetry breakdown list (#266)
-        React.createElement('div', { style: { marginTop: '12px', borderTop: '1px solid var(--dsw-alias-border-l2)', paddingTop: '10px' } },
-          React.createElement('div', { className: 'dvs-h', style: { marginBottom: '8px' } }, t('recentRecognitionsTitle')),
+        h('div', { style: { marginTop: '12px', borderTop: '1px solid var(--dsw-alias-border-l2)', paddingTop: '10px' } },
+          h('div', { className: 'dvs-h', style: { marginBottom: '8px' } }, t('recentRecognitionsTitle')),
           recentDiagnostics.length === 0
-            ? React.createElement('div', { className: 'dvs-sub' }, t('noRecognitionsYet'))
-            : React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
-                recentDiagnostics.slice(-5).reverse().map((d) => React.createElement('div', {
+            ? h('div', { className: 'dvs-sub' }, t('noRecognitionsYet'))
+            : h('div', { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                recentDiagnostics.slice(-5).reverse().map((d) => h('div', {
                   key: d.id,
                   className: 'dvs-card',
                   style: { padding: '8px 12px', fontSize: '12px' },
                 },
-                  React.createElement('div', { className: 'cb-row', style: { justifyContent: 'space-between', alignItems: 'center' } },
-                    React.createElement('div', { style: { display: 'flex', gap: '6px', alignItems: 'center' } },
-                      React.createElement('span', { className: 'cb-badge ' + (d.success ? 'cb-badge-ok' : 'cb-badge-err') },
+                  h('div', { className: 'cb-row', style: { justifyContent: 'space-between', alignItems: 'center' } },
+                    h('div', { style: { display: 'flex', gap: '6px', alignItems: 'center' } },
+                      h('span', { className: 'cb-badge ' + (d.success ? 'cb-badge-ok' : 'cb-badge-err') },
                         d.success ? '✓ ' + (d.provider || 'STT') : '✗ ' + (d.error ? d.error.slice(0, 30) : 'fail')
                       ),
-                      React.createElement('span', { className: 'dvs-sub' }, `[${d.mode}/${d.subMode}]`),
-                      d.audioBytes ? React.createElement('span', { className: 'dvs-sub' }, t('diagBytes').replace('{bytes}', d.audioBytes)) : null,
+                      h('span', { className: 'dvs-sub' }, `[${d.mode}/${d.subMode}]`),
+                      d.audioBytes ? h('span', { className: 'dvs-sub' }, t('diagBytes').replace('{bytes}', d.audioBytes)) : null,
                     ),
-                    React.createElement('span', { style: { fontWeight: '600' } },
+                    h('span', { style: { fontWeight: '600' } },
                       t('diagTotal').replace('{ms}', d.totalTookMs)
                     ),
                   ),
-                  React.createElement('div', { className: 'cb-row', style: { gap: '12px', marginTop: '4px', fontSize: '11px', color: 'var(--dsw-alias-label-secondary)' } },
-                    React.createElement('span', null, t('diagVad').replace('{ms}', (d.breakdown && d.breakdown.vadMs) || 0)),
-                    React.createElement('span', null, t('diagStt').replace('{ms}', (d.breakdown && d.breakdown.sttMs) || 0)),
-                    d.breakdown && d.breakdown.polishMs ? React.createElement('span', null, t('diagPolish').replace('{ms}', d.breakdown.polishMs)) : null,
-                    typeof d.wordCount === 'number' ? React.createElement('span', null, t('diagWords').replace('{count}', d.wordCount)) : null,
+                  h('div', { className: 'cb-row', style: { gap: '12px', marginTop: '4px', fontSize: '11px', color: 'var(--dsw-alias-label-secondary)' } },
+                    h('span', null, t('diagVad').replace('{ms}', (d.breakdown && d.breakdown.vadMs) || 0)),
+                    h('span', null, t('diagStt').replace('{ms}', (d.breakdown && d.breakdown.sttMs) || 0)),
+                    d.breakdown && d.breakdown.polishMs ? h('span', null, t('diagPolish').replace('{ms}', d.breakdown.polishMs)) : null,
+                    typeof d.wordCount === 'number' ? h('span', null, t('diagWords').replace('{count}', d.wordCount)) : null,
                   ),
                 ))
               ),
-          React.createElement('div', { className: 'dvs-sub', style: { marginTop: '8px', fontStyle: 'italic' } },
+          h('div', { className: 'dvs-sub', style: { marginTop: '8px', fontStyle: 'italic' } },
             t('diagExportNotice')
           ),
         ),
@@ -3375,15 +3529,15 @@ function DictationModesSection(props) {
     setTop('dictationPrompts', { clean: '', task: '', note: '' })
   }
 
-  return React.createElement('div', { className: 'cb-section-card' },
-    React.createElement('div', { className: 'cb-section-title' },
-      React.createElement('span', null, '🎙️ ' + t('dictationModeTitle')),
+  return h('div', { className: 'cb-section-card' },
+    h('div', { className: 'cb-section-title' },
+      h('span', null, '🎙️ ' + t('dictationModeTitle')),
     ),
-    React.createElement('div', { className: 'cb-field-desc' }, t('dictationModeDesc')),
-    React.createElement('div', { className: 'cb-grid-2', style: { marginTop: '8px' } },
+    h('div', { className: 'cb-field-desc' }, t('dictationModeDesc')),
+    h('div', { className: 'cb-grid-2', style: { marginTop: '8px' } },
       ['clean', 'task', 'note', 'verbatim'].map((m) =>
-        React.createElement('label', { key: m, className: 'cb-check-label' },
-          React.createElement('input', {
+        h('label', { key: m, className: 'cb-check-label' },
+          h('input', {
             type: 'radio',
             name: 'dictationMode',
             value: m,
@@ -3395,10 +3549,10 @@ function DictationModesSection(props) {
         ),
       ),
     ),
-    React.createElement('div', { style: { marginTop: '12px', borderTop: '1px solid var(--dsw-alias-border-l1)', paddingTop: '10px' } },
-      React.createElement('div', { className: 'cb-section-title', style: { fontSize: '13px' } },
-        React.createElement('span', null, t('dictationPromptsTitle')),
-        React.createElement('button', {
+    h('div', { style: { marginTop: '12px', borderTop: '1px solid var(--dsw-alias-border-l1)', paddingTop: '10px' } },
+      h('div', { className: 'cb-section-title', style: { fontSize: '13px' } },
+        h('span', null, t('dictationPromptsTitle')),
+        h('button', {
           type: 'button',
           className: 'cb-btn cb-btn-secondary',
           style: { fontSize: '11px', padding: '2px 8px' },
@@ -3406,11 +3560,11 @@ function DictationModesSection(props) {
           onClick: resetPrompts,
         }, t('resetPrompts')),
       ),
-      React.createElement('div', { className: 'cb-field-desc' }, t('dictationPromptsDesc')),
-      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '8px' } },
-        React.createElement('div', null,
-          React.createElement('label', { className: 'cb-label' }, t('promptClean')),
-          React.createElement('textarea', {
+      h('div', { className: 'cb-field-desc' }, t('dictationPromptsDesc')),
+      h('div', { style: { display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '8px' } },
+        h('div', null,
+          h('label', { className: 'cb-label' }, t('promptClean')),
+          h('textarea', {
             className: 'cb-input',
             style: { minHeight: '48px', resize: 'vertical' },
             value: prompts.clean || '',
@@ -3419,9 +3573,9 @@ function DictationModesSection(props) {
             onChange: (e) => setPrompt('clean', e.target.value),
           }),
         ),
-        React.createElement('div', null,
-          React.createElement('label', { className: 'cb-label' }, t('promptTask')),
-          React.createElement('textarea', {
+        h('div', null,
+          h('label', { className: 'cb-label' }, t('promptTask')),
+          h('textarea', {
             className: 'cb-input',
             style: { minHeight: '48px', resize: 'vertical' },
             value: prompts.task || '',
@@ -3430,9 +3584,9 @@ function DictationModesSection(props) {
             onChange: (e) => setPrompt('task', e.target.value),
           }),
         ),
-        React.createElement('div', null,
-          React.createElement('label', { className: 'cb-label' }, t('promptNote')),
-          React.createElement('textarea', {
+        h('div', null,
+          h('label', { className: 'cb-label' }, t('promptNote')),
+          h('textarea', {
             className: 'cb-input',
             style: { minHeight: '48px', resize: 'vertical' },
             value: prompts.note || '',
@@ -3447,22 +3601,11 @@ function DictationModesSection(props) {
 }
   // 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 calibrating = props.calibrating
-   const calibrateMsg = props.calibrateMsg
-   const calibrateNoise = props.calibrateNoise
-   const onClearKey = props.onClearKey
+   const {
+    t = moduleT, draft, setTop, writable, catching, setCatching,
+    devices = [], testingMic, toggleTestMic, testLevel = 0,
+    gateDbVal, gateThresholdPercent, calibrating, calibrateMsg, calibrateNoise, onClearKey
+   } = props
 
    const [benchmarking, setBenchmarking] = React.useState(false)
    const [benchmarkResult, setBenchmarkResult] = React.useState(null)
@@ -3490,55 +3633,55 @@ function DictationModesSection(props) {
    })
    }
 
-   const textField = (key, label, hint) => React.createElement('div', { className: 'cb-field' },
-  React.createElement('label', null, label),
-  React.createElement('input', {
+   const textField = (key, label, hint) => h('div', { className: 'cb-field' },
+  h('label', null, label),
+  h('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),
+  h('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')),
+   return h('div', { className: 'cb-section-card' },
+  h('div', { className: 'cb-section-title' },
+   h('span', null, '⚙️ ' + t('hardwareTitle')),
   ),
-  React.createElement('div', { className: 'cb-section-desc' }, t('hardwareDesc')),
+  h('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', {
+  h('div', { className: 'cb-field' },
+   h('label', null, t('hotkey')),
+   h('div', { className: 'cb-row' },
+   h('button', {
     type: 'button', className: 'cb-btn cb-btn-primary', disabled: !writable,
     onClick: () => setCatching(true),
    }, catching ? t('pressKey') : keyLabel(draft && draft.hotkey)),
-   React.createElement('button', {
+   h('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')),
+   h('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', {
+  h('div', { className: 'cb-field' },
+   h('label', null, t('mic')),
+   h('div', { className: 'cb-row' },
+   h('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 },
+    h('option', { value: '' }, t('micDefault')),
+    devices.map((d) => h('option', { key: d.deviceId, value: d.deviceId },
     d.label || d.deviceId.slice(0, 12))),
    ),
-   React.createElement('button', {
+   h('button', {
     type: 'button',
     className: 'cb-btn ' + (testingMic ? 'cb-btn-primary' : 'cb-btn-secondary'),
     onClick: toggleTestMic,
     style: { flex: 'none' },
    }, testingMic ? t('stopTest') : t('testMic')),
-   React.createElement('button', {
+   h('button', {
     type: 'button',
     className: 'cb-btn cb-btn-secondary',
     onClick: () => (typeof calibrateNoise === 'function' ? calibrateNoise(setTop, t) : null),
@@ -3547,36 +3690,57 @@ function DictationModesSection(props) {
     title: t('calibrateNoiseHint') || '',
    }, calibrating ? t('calibrating') : t('calibrateNoise')),
    ),
-   calibrateMsg ? React.createElement('div', {
+   calibrateMsg ? h('div', {
     style: { fontSize: '11px', color: 'var(--dsw-alias-state-success-primary)', marginTop: '4px' },
    }, calibrateMsg) : null,
-   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,
+   testingMic ? h('div', { className: 'dvo-mic-test' },
+   h('span', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary)' } }, t('micLevel') + ':'),
+   h('div', { className: 'dvo-meter-bar' },
+    h('div', { className: 'dvo-meter-fill', style: { width: `${testLevel}%` } }),
+    gateThresholdPercent > 0 ? h('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}%`),
+   h('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', {
+   h('div', { className: 'cb-row', style: { marginTop: '6px' } },
+   h('span', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)', minWidth: '120px' } }, t('noiseGate') + ':'),
+   h('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)'),
-    !['-999', '-50', '-45', '-35', '-25'].includes(String(gateDbVal)) ? React.createElement('option', { value: String(gateDbVal) }, `${gateDbVal} dB (${t('calibratedValue') || 'Calibrated'})`) : null,
+    h('option', { value: '-999' }, t('noiseGateOff')),
+    h('option', { value: '-50' }, '-50 dB (Low / Gentle)'),
+    h('option', { value: '-45' }, '-45 dB (Standard Default)'),
+    h('option', { value: '-35' }, '-35 dB (Medium Room)'),
+    h('option', { value: '-25' }, '-25 dB (High / Mechanical Clicks)'),
+    !['-999', '-50', '-45', '-35', '-25'].includes(String(gateDbVal)) ? h('option', { value: String(gateDbVal) }, `${gateDbVal} dB (${t('calibratedValue') || 'Calibrated'})`) : null,
    ),
    ),
-   React.createElement('span', { className: 'dvs-sub' }, t('noiseGateHint')),
+   h('span', { className: 'dvs-sub' }, t('noiseGateHint')),
+  ),
+  h('div', { className: 'cb-field' },
+   h('label', null, t('vadEngine')),
+   h('select', {
+    value: (draft && draft.vadEngine) || 'silero', disabled: !writable,
+    onChange: (e) => setTop('vadEngine', e.target.value),
+   },
+    h('option', { value: 'silero' }, t('vadSilero')),
+    h('option', { value: 'amplitude' }, t('vadAmplitude')),
+   ),
+   h('span', { className: 'dvs-sub' }, t('vadEngineHint')),
+  ),
+  h('div', { className: 'cb-field' },
+   h('label', { className: 'cb-check-label' },
+    h('input', {
+     type: 'checkbox', checked: draft && draft.streamingWs !== false, disabled: !writable,
+     onChange: (e) => setTop('streamingWs', e.target.checked),
+    }),
+    ' ' + t('streamingWs'),
+   ),
+   h('span', { className: 'dvs-sub' }, t('streamingWsHint')),
   ),
   // Endpoint text fields
-  React.createElement('div', { className: 'cb-grid-2' },
+  h('div', { className: 'cb-grid-2' },
    textField('whisperUrl', t('whisperEndpoint'), t('whisperEndpointHint')),
    textField('whisperBin', t('whisperBin'), t('whisperBinHint')),
    textField('whisperModel', t('whisperModel'), t('whisperModelHint')),
@@ -3589,65 +3753,65 @@ function DictationModesSection(props) {
    textField('polishKeyEnv', t('polishKeyEnv'), ''),
   ),
   // Engine checkboxes
-  React.createElement('div', { className: 'cb-row' },
-   React.createElement('label', { className: 'cb-check-label' },
-   React.createElement('input', {
+  h('div', { className: 'cb-row' },
+   h('label', { className: 'cb-check-label' },
+   h('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', {
+   h('label', { className: 'cb-check-label' },
+   h('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', {
+   h('label', { className: 'cb-check-label' },
+   h('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', {
+   h('label', { className: 'cb-check-label' },
+   h('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', {
+   h('label', { className: 'cb-check-label' },
+   h('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', {
+   h('label', { className: 'cb-check-label' },
+   h('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', title: t('bilingualDeveloperPromptHint') || '' },
-   React.createElement('input', {
+   h('label', { className: 'cb-check-label', title: t('bilingualDeveloperPromptHint') || '' },
+   h('input', {
     type: 'checkbox', checked: draft ? draft.bilingualDeveloperPrompt !== false : true, disabled: !writable,
     onChange: (e) => setTop('bilingualDeveloperPrompt', e.target.checked),
    }),
    t('bilingualDeveloperPrompt'),
    ),
-   React.createElement('label', { className: 'cb-check-label' },
-   React.createElement('input', {
+   h('label', { className: 'cb-check-label' },
+   h('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', {
+   h('label', { className: 'cb-check-label' },
+   h('input', {
     type: 'checkbox', checked: !!(draft && draft.normalizeTranscript), disabled: !writable,
     onChange: (e) => setTop('normalizeTranscript', e.target.checked),
    }),
@@ -3655,35 +3819,35 @@ function DictationModesSection(props) {
    ),
   ),
   // Visualizer select
-  React.createElement('div', { className: 'cb-field' },
-   React.createElement('label', null, t('visualizerStyle')),
-   React.createElement('select', {
+  h('div', { className: 'cb-field' },
+   h('label', null, t('visualizerStyle')),
+   h('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')),
+   h('option', { value: 'liquid-wave' }, t('visLiquidWave')),
+   h('option', { value: 'dynamic-orb' }, t('visDynamicOrb')),
+   h('option', { value: 'bars' }, t('visBars')),
+   h('option', { value: 'off' }, t('visOff')),
    ),
   ),
   // Hardware Acceleration (SBC NPU / Host)
-  React.createElement('div', { className: 'cb-field' },
-   React.createElement('label', null, t('npuProvider')),
-   React.createElement('div', { className: 'cb-row' },
-   React.createElement('select', {
+  h('div', { className: 'cb-field' },
+   h('label', null, t('npuProvider')),
+   h('div', { className: 'cb-row' },
+   h('select', {
     value: String((draft && draft.sensevoiceProvider) || 'cpu'),
     disabled: !writable,
     onChange: (e) => setTop('sensevoiceProvider', e.target.value),
     style: { flex: 1 },
    },
-    React.createElement('option', { value: 'cpu' }, 'CPU (Standard)'),
-    React.createElement('option', { value: 'rknn' }, 'Rockchip RK3588 NPU (RKNN)'),
-    React.createElement('option', { value: 'coreml' }, 'Apple Silicon CoreML'),
-    React.createElement('option', { value: 'openvino' }, 'Intel OpenVINO'),
-    React.createElement('option', { value: 'cuda' }, 'NVIDIA CUDA'),
+    h('option', { value: 'cpu' }, 'CPU (Standard)'),
+    h('option', { value: 'rknn' }, 'Rockchip RK3588 NPU (RKNN)'),
+    h('option', { value: 'coreml' }, 'Apple Silicon CoreML'),
+    h('option', { value: 'openvino' }, 'Intel OpenVINO'),
+    h('option', { value: 'cuda' }, 'NVIDIA CUDA'),
    ),
-   React.createElement('input', {
+   h('input', {
     type: 'number',
     min: 1,
     max: 32,
@@ -3694,30 +3858,30 @@ function DictationModesSection(props) {
     onChange: (e) => setTop('sensevoiceThreads', Math.max(1, Math.min(32, Number(e.target.value) || 4))),
    }),
    ),
-   React.createElement('span', { className: 'dvs-sub' }, t('npuProviderHint')),
+   h('span', { className: 'dvs-sub' }, t('npuProviderHint')),
   ),
   // Hardware Benchmark
-  React.createElement('div', { className: 'cb-field' },
-   React.createElement('div', { className: 'cb-row', style: { alignItems: 'center', justifyContent: 'space-between' } },
-   React.createElement('label', { style: { marginBottom: 0 } }, t('benchmarkTitle')),
-   React.createElement('button', {
+  h('div', { className: 'cb-field' },
+   h('div', { className: 'cb-row', style: { alignItems: 'center', justifyContent: 'space-between' } },
+   h('label', { style: { marginBottom: 0 } }, t('benchmarkTitle')),
+   h('button', {
     type: 'button', className: 'cb-btn cb-btn-secondary', style: { fontSize: '12px', padding: '4px 10px' },
     disabled: benchmarking || !writable, onClick: runBenchmark,
    }, benchmarking ? ('⏳ ' + t('benchmarking')) : ('⚡ ' + t('runBenchmarkBtn'))),
    ),
    benchmarkResult
-   ? React.createElement('div', {
+   ? h('div', {
     style: { marginTop: '8px', padding: '6px 10px', borderRadius: '6px', fontSize: '12px', backgroundColor: 'var(--dsw-alias-fill-quaternary)' }
     }, benchmarkResult.running
     ? `⚡ RTF: ${benchmarkResult.rtf}x · ${benchmarkResult.latencyMs}ms (${benchmarkResult.rating}) · ${String(benchmarkResult.provider || 'cpu').toUpperCase()} · Cores: ${benchmarkResult.cpuCores}`
     : `ℹ ${benchmarkResult.message || 'Offline'} (${benchmarkResult.cpuCores} cores, ${benchmarkResult.platform})`)
-   : (benchmarkErr ? React.createElement('div', { style: { color: 'var(--dsw-alias-state-danger)', fontSize: '12px', marginTop: '4px' } }, benchmarkErr) : null),
-   React.createElement('span', { className: 'dvs-sub' }, t('benchmarkHint')),
+   : (benchmarkErr ? h('div', { style: { color: 'var(--dsw-alias-state-danger)', fontSize: '12px', marginTop: '4px' } }, benchmarkErr) : null),
+   h('span', { className: 'dvs-sub' }, t('benchmarkHint')),
   ),
   // WebGPU Status Indicator
-  React.createElement('div', { className: 'cb-field' },
-   React.createElement('label', null, t('webgpuStatus')),
-   React.createElement('div', {
+  h('div', { className: 'cb-field' },
+   h('label', null, t('webgpuStatus')),
+   h('div', {
    style: {
     padding: '6px 10px',
     borderRadius: '6px',
@@ -3732,9 +3896,9 @@ function DictationModesSection(props) {
     : ('ℹ ' + t('webgpuNotAvailable'))),
   ),
   // Vocabulary textarea
-  React.createElement('div', { className: 'cb-field' },
-   React.createElement('label', null, t('vocabulary')),
-   React.createElement('textarea', {
+  h('div', { className: 'cb-field' },
+   h('label', null, t('vocabulary')),
+   h('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)),
@@ -4018,12 +4182,12 @@ function DictationModesSection(props) {
       const jargonInput = props.jargonInput
       const setJargonInput = props.setJargonInput
 
-      return React.createElement('div', { className: 'cb-section-card' },
-        React.createElement('div', { className: 'cb-section-title' },
-          React.createElement('span', null, '📖 ' + t('jargonTitle')),
+      return h('div', { className: 'cb-section-card' },
+        h('div', { className: 'cb-section-title' },
+          h('span', null, '📖 ' + t('jargonTitle')),
         ),
-        React.createElement('label', { className: 'cb-check-label', style: { marginBottom: '8px' } },
-          React.createElement('input', {
+        h('label', { className: 'cb-check-label', style: { marginBottom: '8px' } },
+          h('input', {
             type: 'checkbox',
             checked: draft ? draft.techJargonCorrection !== false : true,
             disabled: !writable,
@@ -4031,9 +4195,9 @@ function DictationModesSection(props) {
           }),
           t('techJargonCorrection'),
         ),
-        React.createElement('div', { className: 'cb-field' },
-          React.createElement('label', null, t('jargonAdd') + t('jargonFormatHint')),
-          React.createElement('textarea', {
+        h('div', { className: 'cb-field' },
+          h('label', null, t('jargonAdd') + t('jargonFormatHint')),
+          h('textarea', {
             rows: 3,
             disabled: !writable,
             placeholder: t('jargonPlaceholder'),
@@ -4085,10 +4249,10 @@ function MacrosSection(props) {
     setTop('voiceMacros', next)
   }
 
-  return React.createElement('div', { className: 'cb-section-card' },
-    React.createElement('div', { className: 'cb-section-title' },
-      React.createElement('span', null, '⚡ ' + t('voiceMacrosTitle')),
-      React.createElement('button', {
+  return h('div', { className: 'cb-section-card' },
+    h('div', { className: 'cb-section-title' },
+      h('span', null, '⚡ ' + t('voiceMacrosTitle')),
+      h('button', {
         type: 'button',
         className: 'cb-btn cb-btn-secondary',
         style: { fontSize: '11px', padding: '2px 8px' },
@@ -4096,16 +4260,16 @@ function MacrosSection(props) {
         onClick: addMacro,
       }, '+ ' + t('addMacro')),
     ),
-    React.createElement('div', { className: 'cb-field-desc' }, t('voiceMacrosDesc')),
+    h('div', { className: 'cb-field-desc' }, t('voiceMacrosDesc')),
     macros.length === 0
-      ? React.createElement('div', { style: { fontStyle: 'italic', color: 'var(--dsw-alias-label-tertiary)', fontSize: '12px', marginTop: '6px' } },
+      ? h('div', { style: { fontStyle: 'italic', color: 'var(--dsw-alias-label-tertiary)', fontSize: '12px', marginTop: '6px' } },
           'No macros configured.',
         )
-      : React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '6px' } },
+      : h('div', { style: { display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '6px' } },
           macros.map((m, idx) =>
-            React.createElement('div', { key: idx, className: 'dvo-macro-item' },
-              React.createElement('div', { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
-                React.createElement('input', {
+            h('div', { key: idx, className: 'dvo-macro-item' },
+              h('div', { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
+                h('input', {
                   type: 'text',
                   className: 'cb-input',
                   style: { flex: '1', height: '28px', fontSize: '12px' },
@@ -4114,7 +4278,7 @@ function MacrosSection(props) {
                   disabled: !writable,
                   onChange: (e) => updateMacro(idx, 'trigger', e.target.value),
                 }),
-                React.createElement('button', {
+                h('button', {
                   type: 'button',
                   className: 'cb-btn cb-btn-secondary',
                   style: { padding: '2px 6px', fontSize: '11px', color: 'var(--dsw-alias-state-error-primary)' },
@@ -4122,7 +4286,7 @@ function MacrosSection(props) {
                   onClick: () => removeMacro(idx),
                 }, t('macroDelete')),
               ),
-              React.createElement('textarea', {
+              h('textarea', {
                 className: 'cb-input',
                 style: { minHeight: '38px', resize: 'vertical', fontSize: '12px' },
                 placeholder: t('macroTemplate') + ' (use {text} for argument)',
@@ -4150,24 +4314,24 @@ function MacrosSection(props) {
         ? (t('sensevoiceReady') + (currentType === 'whisper-turbo' ? ' (whisper-turbo)' : ' (small-int8)'))
         : (installingSensevoice ? t('sensevoiceDownloading') : t('sensevoiceNotInstalled'))
 
-      return React.createElement('div', { className: 'cb-section-card' },
-        React.createElement('div', { className: 'cb-section-title' },
-          React.createElement('span', null, '⚡ ' + t('sensevoiceTitle')),
-          React.createElement('span', { className: 'cb-badge ' + (isInstalled ? 'cb-badge-ok' : 'cb-badge-warn') }, badgeText),
+      return h('div', { className: 'cb-section-card' },
+        h('div', { className: 'cb-section-title' },
+          h('span', null, '⚡ ' + t('sensevoiceTitle')),
+          h('span', { className: 'cb-badge ' + (isInstalled ? 'cb-badge-ok' : 'cb-badge-warn') }, badgeText),
         ),
-        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('select', {
+        h('div', { className: 'cb-section-desc' }, t('sensevoiceDesc')),
+        h('div', { className: 'dvo-installer-box' },
+          h('div', { className: 'cb-row', style: { alignItems: 'center', justifyContent: 'space-between', gap: '12px' } },
+            h('select', {
               value: modelChoice,
               disabled: installingSensevoice || !writable,
               onChange: (e) => setModelChoice(e.target.value),
               style: { flex: 1, fontSize: '12px', minWidth: '180px' },
             },
-              React.createElement('option', { value: 'sensevoice' }, 'SenseVoice-Small (150MB, ~50ms)'),
-              React.createElement('option', { value: 'whisper-turbo' }, 'Whisper Large-v3-Turbo (800MB, High-Accuracy)'),
+              h('option', { value: 'sensevoice' }, 'SenseVoice-Small (150MB, ~50ms)'),
+              h('option', { value: 'whisper-turbo' }, 'Whisper Large-v3-Turbo (800MB, High-Accuracy)'),
             ),
-            React.createElement('button', {
+            h('button', {
               type: 'button',
               className: 'cb-btn cb-btn-primary',
               style: { fontSize: '12px', padding: '6px 12px', whiteSpace: 'nowrap' },
@@ -4175,17 +4339,17 @@ function MacrosSection(props) {
               onClick: () => { if (typeof onInstall === 'function') onInstall(modelChoice) },
             }, installingSensevoice ? ('⏳ ' + t('installingSensevoice')) : ('📥 ' + t('installSensevoice'))),
           ),
-          React.createElement('div', { style: { fontSize: '11px', marginTop: '6px', color: 'var(--dsw-alias-content-secondary)' } },
+          h('div', { style: { fontSize: '11px', marginTop: '6px', color: 'var(--dsw-alias-content-secondary)' } },
             sensevoiceState && sensevoiceState.path
               ? ('~/' + sensevoiceState.path.replace(/^.*[\\/](\.dsh[\\/]models[\\/].*)$/, '$1'))
               : ('~/.dsh/models/' + modelChoice)
           ),
           installingSensevoice
-            ? React.createElement('div', { style: { marginTop: '8px' } },
-                React.createElement('div', { className: 'dvo-progress-bar' },
-                  React.createElement('div', { className: 'dvo-progress-bar-fill' })
+            ? h('div', { style: { marginTop: '8px' } },
+                h('div', { className: 'dvo-progress-bar' },
+                  h('div', { className: 'dvo-progress-bar-fill' })
                 ),
-                React.createElement('div', { style: { fontSize: '11px', marginTop: '4px', color: 'var(--dsw-alias-content-secondary)' } },
+                h('div', { style: { fontSize: '11px', marginTop: '4px', color: 'var(--dsw-alias-content-secondary)' } },
                   (sensevoiceState && sensevoiceState.progress) || t('sensevoiceDownloading')
                 )
               )
@@ -4203,28 +4367,28 @@ function MacrosSection(props) {
       const onRefresh = props.onRefresh
       const onOpenWizard = props.onOpenWizard
 
-      return React.createElement('div', { className: 'cb-section-card' },
-        React.createElement('div', { className: 'cb-section-title' },
-          React.createElement('span', null, t('statusTitle')),
-          React.createElement('div', { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
-            onOpenWizard ? React.createElement('button', {
+      return h('div', { className: 'cb-section-card' },
+        h('div', { className: 'cb-section-title' },
+          h('span', null, t('statusTitle')),
+          h('div', { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
+            onOpenWizard ? h('button', {
               type: 'button', className: 'cb-btn cb-btn-primary', style: { fontSize: '12px', padding: '4px 10px' },
               onClick: onOpenWizard,
             }, '✨ ' + t('wizardBtnLaunch')) : null,
-            React.createElement('button', {
+            h('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') },
+        h('div', { className: 'cb-row', style: { alignItems: 'center', gap: '12px', flexWrap: 'wrap' } },
+          h('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') },
+          h('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')}`),
+          h('span', { className: 'cb-badge' }, `${providerCount} ${t('providersAvailable')}`),
         ),
       )
     }
@@ -4239,43 +4403,43 @@ function MacrosSection(props) {
       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', {
+      return h('div', { className: 'cb-section-card' },
+        h('div', { className: 'cb-section-title' },
+          h('span', null, '📦 ' + t('versionTitle')),
+          h('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' } },
+        h('div', { className: 'cb-section-desc' }, t('versionHint')),
+        h('div', { className: 'cb-row', style: { alignItems: 'center', gap: '12px' } },
           updaterStatus && updaterStatus.currentVersion
-            ? React.createElement('span', { className: 'cb-badge cb-badge-ok' }, 'v' + updaterStatus.currentVersion)
+            ? h('span', { className: 'cb-badge cb-badge-ok' }, 'v' + updaterStatus.currentVersion)
             : null,
           updaterLoading && (!updaterStatus || !updaterStatus.currentVersion)
-            ? React.createElement('span', { className: 'cb-badge' }, '⏳ ' + t('checkingUpdates'))
+            ? h('span', { className: 'cb-badge' }, '⏳ ' + t('checkingUpdates'))
             : !updaterStatus
-              ? React.createElement('span', { className: 'cb-badge cb-badge-warn' }, '❓ ' + t('updateStatusUnknown'))
+              ? h('span', { className: 'cb-badge cb-badge-warn' }, '❓ ' + t('updateStatusUnknown'))
               : updaterStatus.updateAvailable
-                ? React.createElement('span', { className: 'cb-badge cb-badge-warn' },
+                ? h('span', { className: 'cb-badge cb-badge-warn' },
                     t('updateAvailable') + ': v' + updaterStatus.latestVersion
                   )
                 : updaterStatus.latestCheckFailed
-                  ? React.createElement('span', { className: 'cb-badge cb-badge-warn' },
+                  ? h('span', { className: 'cb-badge cb-badge-warn' },
                       '⚠️ ' + t('updateCheckFailed')
                     )
-                  : React.createElement('span', { className: 'cb-badge cb-badge-ok' },
+                  : h('span', { className: 'cb-badge cb-badge-ok' },
                       t('upToDate')
                     ),
           updaterStatus && updaterStatus.updateAvailable
-            ? React.createElement('button', {
+            ? h('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', {
+          ? h('div', {
               style: {
                 marginTop: '8px',
                 fontSize: '12px',
@@ -4397,15 +4561,15 @@ function MacrosSection(props) {
      return next
     })
    }
-   const textField = (key, label, hint) => React.createElement('div', { className: 'cb-field' },
-    React.createElement('label', null, label),
-    React.createElement('input', {
+   const textField = (key, label, hint) => h('div', { className: 'cb-field' },
+    h('label', null, label),
+    h('input', {
      type: 'text',
      value: (draft && draft[key]) ?? '',
      disabled: !writable,
      onChange: (e) => setTop(key, e.target.value),
     }),
-    hint ? React.createElement('span', { className: 'dvs-sub' }, hint) : null,
+    hint ? h('span', { className: 'dvs-sub' }, hint) : null,
    )
    React.useEffect(() => { if (ready && draft === null) setDraft(deepClone(value)) }, [ready, draft, value])
    React.useEffect(() => {
@@ -4577,31 +4741,31 @@ function MacrosSection(props) {
     if (val && !opts.some((o) => o.code === val)) {
      opts.push({ code: val, labelKey: val, defaultLabel: val })
     }
-    return React.createElement('div', { className: 'cb-field' },
-     React.createElement('label', null, t('language')),
-     React.createElement('select', {
+    return h('div', { className: 'cb-field' },
+     h('label', null, t('language')),
+     h('select', {
       value: val, disabled: !writable,
       onChange: (e) => setIn(mode, 'language', e.target.value),
-     }, opts.map((o) => React.createElement('option', { key: o.code || 'auto', value: o.code },
+     }, opts.map((o) => h('option', { key: o.code || 'auto', value: o.code },
       t(o.labelKey) !== o.labelKey ? t(o.labelKey) : o.defaultLabel
      ))),
     )
    }
-   const numField = (mode, key, label, hint) => React.createElement('div', { className: 'cb-field' },
-    React.createElement('label', null, label),
-    React.createElement('input', {
+   const numField = (mode, key, label, hint) => h('div', { className: 'cb-field' },
+    h('label', null, label),
+    h('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),
+    h('span', { className: 'dvs-sub' }, hint),
    )
    const statsData = (statusData && statusData.providerStats) || {}
    const recentDiagnostics = (statusData && statusData.recentDiagnostics) || []
    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 dvo-settings-root' },
-    React.createElement(ConnectionStatusCard, {
+   return h('div', { className: 'cb-page dvo-settings-root' },
+    h(ConnectionStatusCard, {
      t: t,
      hostOnline: hostOnline,
      statusLatency: statusLatency,
@@ -4610,87 +4774,87 @@ function MacrosSection(props) {
      onRefresh: fetchStatus,
      onOpenWizard: () => setShowWizard((v) => !v),
     }),
-    showWizard ? React.createElement(FirstRunWizard, {
+    showWizard ? h(FirstRunWizard, {
      t: t,
      draft: draft,
      setTop: setTop,
      writable: writable,
      onClose: () => setShowWizard(false),
     }) : null,
-    React.createElement('div', { className: 'cb-section-card' },
-     React.createElement('div', { className: 'cb-section-title' },
-      React.createElement('span', null, '🎙️ ' + t('dictationBtn')),
+    h('div', { className: 'cb-section-card' },
+     h('div', { className: 'cb-section-title' },
+      h('span', null, '🎙️ ' + t('dictationBtn')),
      ),
-     React.createElement('div', { className: 'cb-section-desc' }, t('dictationHint')),
+     h('div', { className: 'cb-section-desc' }, t('dictationHint')),
      React.createElement(ChainEditor, {
       t: t, value: draft && draft.dictation ? draft.dictation.chain : [], writable: writable,
       options: chainOptions,
       onChange: (v) => setIn('dictation', 'chain', v),
      }),
-     React.createElement('div', { className: 'cb-grid-2' },
+     h('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', {
+     h('div', { className: 'cb-row' },
+      h('label', { className: 'cb-check-label' },
+       h('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', {
+      h('label', { className: 'cb-check-label' },
+       h('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', {
+     h('div', { className: 'cb-field' },
+      h('label', null, t('vadAdapt')),
+      h('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')),
+      h('span', { className: 'dvs-sub' }, t('vadAdaptHint')),
      ),
      textField('wakeWord', t('wakeWord'), t('wakeWordHint')),
     ),
-    React.createElement('div', { className: 'cb-section-card' },
-     React.createElement('div', { className: 'cb-section-title' },
-      React.createElement('span', null, '💬 ' + t('messageTitle')),
+    h('div', { className: 'cb-section-card' },
+     h('div', { className: 'cb-section-title' },
+      h('span', null, '💬 ' + t('messageTitle')),
      ),
-     React.createElement('div', { className: 'cb-section-desc' }, t('messageHint')),
+     h('div', { className: 'cb-section-desc' }, t('messageHint')),
      React.createElement(ChainEditor, {
       t: t, value: draft && draft.message ? draft.message.chain : [], writable: writable,
       options: chainOptions,
       onChange: (v) => setIn('message', 'chain', v),
      }),
-     React.createElement('div', { className: 'cb-grid-2' },
+     h('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', {
+     h('div', { className: 'cb-row' },
+      h('label', { className: 'cb-check-label' },
+       h('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', {
+      h('label', { className: 'cb-check-label' },
+       h('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', {
+      h('label', { className: 'cb-check-label' },
+       h('input', {
         type: 'checkbox', checked: !!(draft && draft.message && draft.message.sessionCommands), disabled: !writable,
         onChange: (e) => setIn('message', 'sessionCommands', e.target.checked),
        }),
@@ -4698,18 +4862,18 @@ function MacrosSection(props) {
       ),
      ),
     ),
-    React.createElement('div', { className: 'cb-section-card' },
-     React.createElement('div', { className: 'cb-section-title' },
-      React.createElement('span', null, '⚙️ ' + t('customTitle')),
+    h('div', { className: 'cb-section-card' },
+     h('div', { className: 'cb-section-title' },
+      h('span', null, '⚙️ ' + t('customTitle')),
      ),
-     React.createElement('div', { className: 'cb-section-desc' }, t('customHint')),
+     h('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(HardwareOptionsCard, {
+    h(HardwareOptionsCard, {
      t: t,
      draft: draft,
      setTop: setTop,
@@ -4731,21 +4895,21 @@ function MacrosSection(props) {
       clearGlobalHotkey()
      },
     }),
-    React.createElement(SensevoiceSection, {
+    h(SensevoiceSection, {
      t: t,
      sensevoiceState: sensevoiceState,
      installingSensevoice: installingSensevoice,
      writable: writable,
      onInstall: triggerInstallSensevoice,
     }),
-    React.createElement('div', { className: 'cb-section-card' },
-     React.createElement('div', { className: 'cb-section-title' },
-      React.createElement('span', null, '🎙️ ' + t('turnTakingTitle')),
+    h('div', { className: 'cb-section-card' },
+     h('div', { className: 'cb-section-title' },
+      h('span', null, '🎙️ ' + t('turnTakingTitle')),
      ),
-     React.createElement('div', { className: 'cb-section-desc' }, t('turnTakingDesc')),
-     React.createElement('div', { className: 'cb-grid-2' },
-      React.createElement('label', { className: 'cb-check-label' },
-       React.createElement('input', {
+     h('div', { className: 'cb-section-desc' }, t('turnTakingDesc')),
+     h('div', { className: 'cb-grid-2' },
+      h('label', { className: 'cb-check-label' },
+       h('input', {
         type: 'checkbox',
         checked: draft ? draft.gatedTurnTaking !== false : true,
         disabled: !writable,
@@ -4753,8 +4917,8 @@ function MacrosSection(props) {
        }),
        t('gatedTurnTaking'),
       ),
-      React.createElement('label', { className: 'cb-check-label' },
-       React.createElement('input', {
+      h('label', { className: 'cb-check-label' },
+       h('input', {
         type: 'checkbox',
         checked: !!(draft && draft.bargeIn),
         disabled: !writable,
@@ -4764,13 +4928,13 @@ function MacrosSection(props) {
       ),
      ),
     ),
-    React.createElement('div', { className: 'cb-section-card' },
-     React.createElement('div', { className: 'cb-section-title' },
-      React.createElement('span', null, '✨ ' + t('smartActionsTitle')),
+    h('div', { className: 'cb-section-card' },
+     h('div', { className: 'cb-section-title' },
+      h('span', null, '✨ ' + t('smartActionsTitle')),
      ),
-     React.createElement('div', { className: 'cb-grid-2' },
-      React.createElement('label', { className: 'cb-check-label' },
-       React.createElement('input', {
+     h('div', { className: 'cb-grid-2' },
+      h('label', { className: 'cb-check-label' },
+       h('input', {
         type: 'checkbox',
         checked: draft ? draft.liveInterimPreview !== false : true,
         disabled: !writable,
@@ -4778,8 +4942,8 @@ function MacrosSection(props) {
        }),
        t('liveInterimPreview'),
       ),
-      React.createElement('label', { className: 'cb-check-label' },
-       React.createElement('input', {
+      h('label', { className: 'cb-check-label' },
+       h('input', {
         type: 'checkbox',
         checked: draft ? draft.autoSendVisualRing !== false : true,
         disabled: !writable,
@@ -4787,8 +4951,8 @@ function MacrosSection(props) {
        }),
        t('autoSendVisualRing'),
       ),
-      React.createElement('label', { className: 'cb-check-label' },
-       React.createElement('input', {
+      h('label', { className: 'cb-check-label' },
+       h('input', {
         type: 'checkbox',
         checked: draft ? draft.voiceActions !== false : true,
         disabled: !writable,
@@ -4796,8 +4960,8 @@ function MacrosSection(props) {
        }),
        t('voiceActionsLabel'),
       ),
-      React.createElement('label', { className: 'cb-check-label' },
-       React.createElement('input', {
+      h('label', { className: 'cb-check-label' },
+       h('input', {
         type: 'checkbox',
         checked: draft ? draft.structuredPromptVoice !== false : true,
         disabled: !writable,
@@ -4808,20 +4972,20 @@ function MacrosSection(props) {
      ),
     ),
     // Dictation Modes & Prompts (#264)
-    React.createElement(DictationModesSection, {
+    h(DictationModesSection, {
      t: t,
      draft: draft,
      setTop: setTop,
      writable: writable,
     }),
     // Voice Action Macros (#167)
-    React.createElement(MacrosSection, {
+    h(MacrosSection, {
      t: t,
      draft: draft,
      setTop: setTop,
      writable: writable,
     }),
-    React.createElement(JargonEditor, {
+    h(JargonEditor, {
      t: t,
      draft: draft,
      setTop: setTop,
@@ -4829,13 +4993,13 @@ function MacrosSection(props) {
      jargonInput: jargonInput,
      setJargonInput: setJargonInput,
     }),
-    React.createElement(ProviderDashboard, {
+    h(ProviderDashboard, {
      t: t,
      statsData: statsData,
      recentDiagnostics: recentDiagnostics,
      onRefresh: fetchStatus,
     }),
-    React.createElement(UpdaterCard, {
+    h(UpdaterCard, {
      t: t,
      updaterStatus: updaterStatus,
      updaterLoading: updaterLoading,
@@ -4845,10 +5009,10 @@ function MacrosSection(props) {
      onCheck: checkUpdater,
      onUpdateNow: onUpdateNow,
     }),
-    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,
+    h('div', { className: 'cb-row' },
+     h('button', { type: 'button', className: 'cb-btn cb-btn-primary', disabled: !writable, onClick: save }, t('save')),
+     saved ? h('span', { className: 'dvs-ok' }, t('saved')) : null,
+     err ? h('span', { className: 'dvs-bad' }, err) : null,
     ),
    )
   }
@@ -5084,39 +5248,39 @@ function MacrosSection(props) {
   nextStepHint = t('wizardHintProvider')
    }
 
-   return React.createElement('div', { className: 'cb-section-card', style: { borderColor: 'var(--dsw-alias-state-brand-primary)' } },
-  React.createElement('div', { className: 'cb-section-title' },
-   React.createElement('span', null, '✨ ' + t('wizardTitle')),
-   React.createElement('div', { style: { display: 'flex', gap: '8px' } },
-   testResult ? React.createElement('span', { className: 'cb-badge cb-badge-ok' }, '✓ ' + t('wizardStatusCompleted')) : null,
-   onClose ? React.createElement('button', {
+   return h('div', { className: 'cb-section-card', style: { borderColor: 'var(--dsw-alias-state-brand-primary)' } },
+  h('div', { className: 'cb-section-title' },
+   h('span', null, '✨ ' + t('wizardTitle')),
+   h('div', { style: { display: 'flex', gap: '8px' } },
+   testResult ? h('span', { className: 'cb-badge cb-badge-ok' }, '✓ ' + t('wizardStatusCompleted')) : null,
+   onClose ? h('button', {
     type: 'button', className: 'cb-btn cb-btn-mini', onClick: onClose, title: t('wizardClose'),
    }, '✕') : null,
    ),
   ),
-  React.createElement('div', { className: 'cb-section-desc' }, t('wizardDesc')),
+  h('div', { className: 'cb-section-desc' }, t('wizardDesc')),
 
   // Step 1: Environment & Permissions
-  React.createElement('div', { className: 'dvs-card' },
-   React.createElement('div', { className: 'dvs-h' }, t('wizardStep1')),
-   React.createElement('div', { className: 'cb-row' },
-   React.createElement('span', { className: 'cb-badge ' + (isSecure ? 'cb-badge-ok' : 'cb-badge-err') },
+  h('div', { className: 'dvs-card' },
+   h('div', { className: 'dvs-h' }, t('wizardStep1')),
+   h('div', { className: 'cb-row' },
+   h('span', { className: 'cb-badge ' + (isSecure ? 'cb-badge-ok' : 'cb-badge-err') },
     isSecure ? ('✓ ' + t('wizardSecureContextOk')) : ('✗ ' + t('wizardSecureContextBad'))
    ),
-   React.createElement('span', { className: 'cb-badge ' + (hasMediaDevices ? 'cb-badge-ok' : 'cb-badge-err') },
+   h('span', { className: 'cb-badge ' + (hasMediaDevices ? 'cb-badge-ok' : 'cb-badge-err') },
     hasMediaDevices ? ('✓ ' + t('wizardMediaDevicesOk')) : ('✗ ' + t('wizardMediaDevicesBad'))
    ),
-   React.createElement('span', { className: 'cb-badge ' + (hasMediaRecorder ? 'cb-badge-ok' : 'cb-badge-err') },
+   h('span', { className: 'cb-badge ' + (hasMediaRecorder ? 'cb-badge-ok' : 'cb-badge-err') },
     hasMediaRecorder ? ('✓ ' + t('wizardMediaRecorderOk')) : ('✗ ' + t('wizardMediaRecorderBad'))
    ),
-   React.createElement('span', { className: 'cb-badge ' + (micPermission === 'granted' ? 'cb-badge-ok' : (micPermission === 'denied' ? 'cb-badge-err' : 'cb-badge-warn')) },
+   h('span', { className: 'cb-badge ' + (micPermission === 'granted' ? 'cb-badge-ok' : (micPermission === 'denied' ? 'cb-badge-err' : 'cb-badge-warn')) },
     micPermission === 'granted' ? ('✓ ' + t('wizardMicPermissionOk')) : (micPermission === 'denied' ? ('✗ ' + t('wizardMicPermissionBad')) : ('· ' + t('wizardMicPermissionPrompt')))
    ),
    ),
-   React.createElement('div', { className: 'cb-field', style: { marginTop: '8px' } },
-   React.createElement('label', null, t('wizardMicLabel')),
-   React.createElement('div', { className: 'cb-row' },
-    React.createElement('select', {
+   h('div', { className: 'cb-field', style: { marginTop: '8px' } },
+   h('label', null, t('wizardMicLabel')),
+   h('div', { className: 'cb-row' },
+    h('select', {
     value: selectedDev,
     style: { flex: 1, minWidth: '240px' },
     onChange: (e) => {
@@ -5125,10 +5289,10 @@ function MacrosSection(props) {
      stopSignalTest()
     },
     },
-    React.createElement('option', { value: '' }, 'Default System Microphone'),
-    devices.map((d) => React.createElement('option', { key: d.deviceId, value: d.deviceId }, d.label || `Microphone ${d.deviceId.slice(0, 8)}…`))
+    h('option', { value: '' }, 'Default System Microphone'),
+    devices.map((d) => h('option', { key: d.deviceId, value: d.deviceId }, d.label || `Microphone ${d.deviceId.slice(0, 8)}…`))
     ),
-    React.createElement('button', {
+    h('button', {
     type: 'button',
     className: 'cb-btn',
     onClick: requestPermissionAndTestSignal,
@@ -5138,18 +5302,18 @@ function MacrosSection(props) {
   ),
 
   // Step 2: Live Audio Signal Test
-  React.createElement('div', { className: 'dvs-card' },
-   React.createElement('div', { className: 'dvs-h' }, t('wizardStep2')),
-   React.createElement('div', { className: 'cb-row', style: { alignItems: 'center' } },
-   React.createElement('button', {
+  h('div', { className: 'dvs-card' },
+   h('div', { className: 'dvs-h' }, t('wizardStep2')),
+   h('div', { className: 'cb-row', style: { alignItems: 'center' } },
+   h('button', {
     type: 'button',
     className: 'cb-btn ' + (signalTesting ? 'cb-btn-danger' : 'cb-btn-primary'),
     onClick: signalTesting ? stopSignalTest : requestPermissionAndTestSignal,
    }, signalTesting ? t('wizardStopSignalCheck') : t('wizardStartSignalCheck')),
-   signalTesting ? React.createElement('span', { className: 'dvs-sub' }, t('wizardSignalTesting')) : null,
+   signalTesting ? h('span', { className: 'dvs-sub' }, t('wizardSignalTesting')) : null,
    ),
-   signalTesting ? React.createElement('div', { style: { marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '6px' } },
-   React.createElement('div', {
+   signalTesting ? h('div', { style: { marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '6px' } },
+   h('div', {
     style: {
     height: '14px',
     borderRadius: '7px',
@@ -5159,7 +5323,7 @@ function MacrosSection(props) {
     position: 'relative',
     },
    },
-    React.createElement('div', {
+    h('div', {
     style: {
      width: `${currentRms}%`,
      height: '100%',
@@ -5168,7 +5332,7 @@ function MacrosSection(props) {
     },
     }),
    ),
-   React.createElement('span', { className: currentRms > 5 ? 'dvs-ok' : 'dvs-sub' },
+   h('span', { className: currentRms > 5 ? 'dvs-ok' : 'dvs-sub' },
     currentRms > 5
     ? t('wizardSignalOk').replace('{level}', currentRms)
     : t('wizardSignalZero')
@@ -5177,14 +5341,14 @@ function MacrosSection(props) {
   ),
 
   // Step 3: Transcription Round-Trip Test
-  React.createElement('div', { className: 'dvs-card' },
-   React.createElement('div', { className: 'dvs-h' }, t('wizardStep3')),
-   React.createElement('div', { className: 'cb-row' },
-   React.createElement('span', { className: 'dvs-sub' }, `${t('wizardProviderLabel')} ${activeProvider}`),
-   React.createElement('span', { className: 'cb-badge' }, `${t('wizardProcessingArea')} ${areaLabel}`),
+  h('div', { className: 'dvs-card' },
+   h('div', { className: 'dvs-h' }, t('wizardStep3')),
+   h('div', { className: 'cb-row' },
+   h('span', { className: 'dvs-sub' }, `${t('wizardProviderLabel')} ${activeProvider}`),
+   h('span', { className: 'cb-badge' }, `${t('wizardProcessingArea')} ${areaLabel}`),
    ),
-   React.createElement('div', { className: 'cb-row', style: { marginTop: '8px' } },
-   React.createElement('button', {
+   h('div', { className: 'cb-row', style: { marginTop: '8px' } },
+   h('button', {
     type: 'button',
     className: 'cb-btn cb-btn-primary',
     disabled: testingStt || micPermission === 'denied',
@@ -5194,11 +5358,11 @@ function MacrosSection(props) {
     : t('wizardStartTestRecord')
    ),
    ),
-   testResult ? React.createElement('div', { style: { marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '4px' } },
-   React.createElement('div', { className: 'dvs-ok' },
+   testResult ? h('div', { style: { marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '4px' } },
+   h('div', { className: 'dvs-ok' },
     '✓ ' + t('wizardTestSuccess').replace('{latency}', testLatency || 0)
    ),
-   React.createElement('blockquote', {
+   h('blockquote', {
     style: {
     margin: '4px 0 0 0',
     padding: '8px 12px',
@@ -5210,19 +5374,19 @@ function MacrosSection(props) {
     },
    }, `“${testResult}”`),
    ) : null,
-   testError ? React.createElement('div', { className: 'cb-alert-err', style: { marginTop: '8px' } },
+   testError ? h('div', { className: 'cb-alert-err', style: { marginTop: '8px' } },
    t('wizardTestFailed').replace('{error}', testError)
    ) : null,
   ),
 
   // Next Step Hint / Feedback
-  nextStepHint ? React.createElement('div', { className: 'dvs-wait', style: { fontStyle: 'italic' } },
+  nextStepHint ? h('div', { className: 'dvs-wait', style: { fontStyle: 'italic' } },
    t('wizardNextStepHint').replace('{hint}', nextStepHint)
   ) : null,
 
   // Wizard Bottom Actions
-  React.createElement('div', { className: 'cb-row', style: { justifyContent: 'space-between', marginTop: '6px' } },
-   React.createElement('button', {
+  h('div', { className: 'cb-row', style: { justifyContent: 'space-between', marginTop: '6px' } },
+   h('button', {
    type: 'button',
    className: 'cb-btn',
    onClick: () => {
@@ -5230,7 +5394,7 @@ function MacrosSection(props) {
     if (onClose) onClose()
    },
    }, t('wizardSkip')),
-   testResult ? React.createElement('button', {
+   testResult ? h('button', {
    type: 'button',
    className: 'cb-btn cb-btn-primary',
    onClick: () => {
@@ -5250,12 +5414,12 @@ function MacrosSection(props) {
       // Row seat (plugins.row.config): the host page draws title/icon/crumb and the
       // padding, so the summary is a one-liner and the page drops our card chrome.
       if (props && props.view === 'summary') {
-        return React.createElement('span', { className: 'dvo-pdesc' }, tt('cardHint'))
+        return h('span', { className: 'dvo-pdesc' }, tt('cardHint'))
       }
-      return React.createElement(ErrorBoundary, null,
-        React.createElement(page ? 'div' : 'li',
+      return h(ErrorBoundary, null,
+        h(page ? 'div' : 'li',
           { className: page ? 'dvo-ppage' : (open ? 'dvo-pcard dvo-pcardOpen' : 'dvo-pcard') },
-          React.createElement('button',
+          h('button',
             {
               type: 'button', className: 'dvo-phead',
               style: page ? { display: 'none' } : undefined,
@@ -5263,13 +5427,13 @@ function MacrosSection(props) {
               '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')),
+            h('span', { className: 'dvo-pheadtext' },
+              h('span', { className: 'dvo-ptitle' }, title),
+              h('span', { className: 'dvo-pdesc' }, tt('cardHint')),
             ),
-            React.createElement('span', { className: 'dvo-pchev' }, chevronIcon()),
+            h('span', { className: 'dvo-pchev' }, chevronIcon()),
           ),
-          (page || open) ? React.createElement('div', { className: 'dvo-pbody dvo-settings-root' }, React.createElement(VoiceSection, props)) : null,
+          (page || open) ? h('div', { className: 'dvo-pbody dvo-settings-root' }, h(VoiceSection, props)) : null,
         ),
       )
     }