@goodandready/dsh-voice 0.9.16 → 0.9.18

package/lib/client.js

@@ -568,6 +568,7 @@ window.__ModuleLoader__.load({
       window.addEventListener('beforeunload', onPageUnload)
 
       return () => {
+        voice.disposed = true
         window.removeEventListener('dsh:tts:start', onTtsStart)
         window.removeEventListener('dsh:tts:stop', onTtsStop)
         window.removeEventListener('dsh-voice:settings-saved', onSettingsSaved)
@@ -734,51 +735,93 @@ window.__ModuleLoader__.load({
 
     async function sendAudio(blob, mime, mode) {
       const activeChain = (voice._activeChain || [])
-      if (activeChain.includes('browser-webgpu')) {
-        if (typeof isWebGpuSupported === 'function' && isWebGpuSupported()) {
+      const modelMap = voice._activeModelMap || {}
+      const chosenModel = modelMap['browser-webgpu'] || (voice.settings && voice.settings.webgpuModel)
+
+      const tryHost = async (chainOverride) => {
+        const dataBase64 = await blobToBase64(blob)
+        const payload = { dataBase64, mimeType: mime, mode }
+        if (Array.isArray(chainOverride)) {
+          payload.chain = chainOverride.map((p) => (typeof p === 'string' ? { provider: p, model: modelMap[p] } : p))
+        }
+        const contextWords = extractContextKeywords()
+        if (contextWords && contextWords.length > 0) payload.contextWords = contextWords
+        const controller = typeof AbortController !== 'undefined' ? new AbortController() : null
+        const timer = controller ? setTimeout(() => controller.abort(), 60000) : null
+        let res = null
+        try {
+          res = await fetch('/dsh-voice/transcribe', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify(payload),
+            signal: controller ? controller.signal : undefined,
+          })
+        } catch (e) {
+          if (e && e.name === 'AbortError') {
+            throw new Error('Transcription request timed out (60s)')
+          }
+          throw e
+        } finally {
+          if (timer) clearTimeout(timer)
+        }
+        let parsed = null
+        try { parsed = await res.json() } catch (e) { /* not json */ }
+        if (!res.ok || !parsed || !parsed.ok) {
+          throw new Error((parsed && parsed.error && parsed.error.message) || `HTTP ${res.status}`)
+        }
+        if (parsed.command) return { command: parsed.command, text: '', action: null }
+        return { text: String(parsed.text || '').trim(), command: null, action: parsed.action || null }
+      }
+
+      const tryWebGpu = async () => {
+        const canGpu = voice.webGpu?.isSupported ? voice.webGpu.isSupported() : (typeof isWebGpuSupported === 'function' && isWebGpuSupported())
+        if (canGpu) {
           try {
-            const out = await transcribeWithWebGpu(blob, mime, {
+            const fn = voice.webGpu?.transcribe || transcribeWithWebGpu
+            const out = await fn(blob, mime, {
               language: voice._activeLang || (voice.settings && voice.settings.dictation && voice.settings.dictation.language) || '',
-              model: voice.settings && voice.settings.webgpuModel,
+              model: chosenModel,
             })
-            if (out && typeof out.text === 'string') {
-              return { text: tidyPhrase(out.text), command: null, action: null, provider: 'browser-webgpu' }
-            }
+            const text = (out && typeof out.text === 'string') ? tidyPhrase(out.text) : ''
+            return { text, command: null, action: null, provider: 'browser-webgpu' }
           } catch (webGpuErr) {
-            // Graceful fallback to server chain
-            console.warn('[dsh-voice] WebGPU Whisper failed, falling back to server chain:', webGpuErr)
+            console.warn('[dsh-voice] WebGPU Whisper failed:', webGpuErr)
           }
         }
+        return null
       }
-      const dataBase64 = await blobToBase64(blob)
-      const payload = { dataBase64, mimeType: mime, mode }
-      const contextWords = extractContextKeywords()
-      if (contextWords && contextWords.length > 0) payload.contextWords = contextWords
-      const controller = typeof AbortController !== 'undefined' ? new AbortController() : null
-      const timer = controller ? setTimeout(() => controller.abort(), 60000) : null
-      let res = null
-      try {
-        res = await fetch('/dsh-voice/transcribe', {
-          method: 'POST',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify(payload),
-          signal: controller ? controller.signal : undefined,
-        })
-      } catch (e) {
-        if (e && e.name === 'AbortError') {
-          throw new Error('Transcription request timed out (60s)')
+
+      const gpuIdx = activeChain.indexOf('browser-webgpu')
+      if (gpuIdx === -1) {
+        return await tryHost()
+      }
+
+      const head = activeChain.slice(0, gpuIdx)
+      const tail = activeChain.slice(gpuIdx + 1)
+
+      if (head.length > 0) {
+        try {
+          const headOut = await tryHost(head)
+          if (headOut && (headOut.text || headOut.command || headOut.action)) return headOut
+        } catch (headErr) {
+          // Continue to WebGPU
         }
-        throw e
-      } finally {
-        if (timer) clearTimeout(timer)
       }
-      let parsed = null
-      try { parsed = await res.json() } catch (e) { /* not json */ }
-      if (!res.ok || !parsed || !parsed.ok) {
-        throw new Error((parsed && parsed.error && parsed.error.message) || `HTTP ${res.status}`)
+
+      const gpuOut = await tryWebGpu()
+      if (gpuOut && gpuOut.text) return gpuOut
+
+      if (tail.length > 0) {
+        try {
+          const tailOut = await tryHost(tail)
+          if (tailOut && (tailOut.text || tailOut.command || tailOut.action)) return tailOut
+        } catch (tailErr) {
+          if (head.length === 0 && !gpuOut) throw tailErr
+        }
       }
-      if (parsed.command) return { command: parsed.command, text: '', action: null }
-      return { text: String(parsed.text || '').trim(), command: null, action: parsed.action || null }
+
+      if (gpuOut) return gpuOut
+      return { text: '', command: null, action: null }
     }
 
     function tidyPhrase(text) {
@@ -836,8 +879,20 @@ window.__ModuleLoader__.load({
       return t('undone')
     }
 
-    function insertDraftText(text) {
-      const actions = voice.inputActions
+    function insertDraftText(text, target) {
+      if (voice.disposed) return false
+      const span = target && target.span
+      if (span) {
+        if (typeof span.insert === 'function') {
+          try { span.insert(text); return true } catch (_) {}
+        } else if (typeof span.insertText === 'function') {
+          try { span.insertText(text); return true } catch (_) {}
+        } else if (typeof span === 'function') {
+          try { span(text); return true } catch (_) {}
+        }
+      }
+      const actions = (target && target.actions) || voice.inputActions
+      const input = (target && target.input) || voice.input
       if (!actions || (typeof actions.setDraft !== 'function' && typeof actions.insertText !== 'function')) {
         voice.set({ phase: 'error', error: t('composerUnavailable') })
         return false
@@ -845,7 +900,7 @@ window.__ModuleLoader__.load({
       if (typeof actions.insertText === 'function') {
         try { actions.insertText(text); return true } catch (_) {}
       }
-      const draft = voice.input && typeof voice.input.draft === 'string' ? voice.input.draft : ''
+      const draft = input && typeof input.draft === 'string' ? input.draft : ''
       const before = draft
       const sep = (!draft || draft.endsWith('\n') || text.startsWith('\n')) ? '' : ' '
       const after = draft + sep + text
@@ -858,100 +913,13 @@ window.__ModuleLoader__.load({
       return true
     }
 
-    function appendDraft(text) {
-      if (!text) return
+    function appendDraft(text, target) {
+      if (voice.disposed || !text) return
       let clean = voice.settings.voiceCommands ? applyVoiceCommands(text) : tidyPhrase(text)
       if (!clean) return
-      insertDraftText(clean)
-    }
-
-    // Human-readable key name.
-    const KEY_LABELS = {
-      Control: 'Ctrl', Alt: 'Alt', Shift: 'Shift', Meta: 'Win',
-      Escape: 'Esc',
-    }
-
-    function keyLabel(name) {
-      if (!name) return t('keyUnset')
-      if (typeof name === 'string' && name.includes('+')) {
-        return name.split('+').map((p) => keyLabel(p)).join(' + ')
-      }
-      if (name === 'Space') return t('keySpace')
-      if (KEY_LABELS[name]) return KEY_LABELS[name]
-      // Drop the Key/Digit prefix from codes like KeyR and Digit5.
-      return String(name).replace(/^Key/, '').replace(/^Digit/, '')
-    }
-
-    // What to store on key press. Pure modifiers are remembered by name:
-    // left and right have different codes but the user means "either".
-    // Supports combos like Control+Space or Alt+KeyV.
-    function keyFromEvent(event) {
-      if (!event) return ''
-      const modifiers = []
-      if (event.ctrlKey && event.key !== 'Control') modifiers.push('Control')
-      if (event.altKey && event.key !== 'Alt') modifiers.push('Alt')
-      if (event.shiftKey && event.key !== 'Shift') modifiers.push('Shift')
-      if (event.metaKey && event.key !== 'Meta') modifiers.push('Meta')
-
-      const main = ['Control', 'Alt', 'Shift', 'Meta'].includes(event.key)
-        ? event.key
-        : (event.code || event.key || '')
-
-      if (modifiers.length > 0 && !['Control', 'Alt', 'Shift', 'Meta'].includes(main)) {
-        return modifiers.concat(main).join('+')
-      }
-      return main
-    }
-
-    function hotkeyMatches(event, name) {
-      if (!event || !name) return false
-      if (typeof name === 'string' && name.includes('+')) {
-        const parts = name.split('+')
-        const main = parts[parts.length - 1]
-        const needCtrl = parts.includes('Control')
-        const needAlt = parts.includes('Alt')
-        const needShift = parts.includes('Shift')
-        const needMeta = parts.includes('Meta')
-        if (needCtrl && !event.ctrlKey) return false
-        if (needAlt && !event.altKey) return false
-        if (needShift && !event.shiftKey) return false
-        if (needMeta && !event.metaKey) return false
-        return event.code === main || event.key === main
-      }
-      if (name === 'Control') return event.key === 'Control'
-      if (name === 'Alt') return event.key === 'Alt'
-      if (name === 'Shift') return event.key === 'Shift'
-      if (name === 'Meta') return event.key === 'Meta'
-      return event.code === name || event.key === name
+      insertDraftText(clean, target)
     }
 
-    function isAllowedInEditable(name) {
-      if (!name) return false
-      if (['Control', 'Alt', 'Shift', 'Meta'].includes(name)) return true
-      if (/^F\d{1,2}$/.test(name)) return true
-      if (typeof name === 'string' && name.includes('+')) return true
-      if (['Tab', 'Pause', 'ScrollLock', 'Insert'].includes(name)) return true
-      return false
-    }
-
-    function isHotkeyRelease(event, name) {
-      if (!event || !name) return false
-      if (typeof name === 'string' && name.includes('+')) {
-        const parts = name.split('+')
-        if (event.code === parts[parts.length - 1] || event.key === parts[parts.length - 1]) return true
-        for (let i = 0; i < parts.length - 1; i++) {
-          if (event.key === parts[i] || event.code === parts[i]) return true
-        }
-        return false
-      }
-      return event.code === name || event.key === name
-    }
-
-    // Announce that the user started speaking.
-    //
-    // Playback should mute immediately: listening and talking at once is
-    // impossible. There is no plugin-to-plugin API — this broadcasts a window
-    // event that anyone may hear, so either side works alone.
     function announceVoice(phase) {
       try {
         window.dispatchEvent(new CustomEvent('dsh-voice:speaking', { detail: { phase } }))
@@ -1087,35 +1055,32 @@ function isWebGpuSupported() {
   return true
 }
 
-let _webGpuPipeline = null
-let _webGpuLoading = false
+const _webGpuPipelines = new Map()
 
-async function loadWebGpuWhisper(modelName) {
-  if (_webGpuPipeline) return _webGpuPipeline
-  if (_webGpuLoading) {
-    while (_webGpuLoading) {
-      await new Promise((r) => setTimeout(r, 80))
-    }
-    if (_webGpuPipeline) return _webGpuPipeline
+function loadWebGpuWhisper(modelName) {
+  const targetModel = modelName || (voice.settings && voice.settings.webgpuModel) || 'onnx-community/whisper-tiny'
+  if (_webGpuPipelines.has(targetModel)) {
+    return _webGpuPipelines.get(targetModel)
   }
-  _webGpuLoading = true
-  try {
+  const promise = (async () => {
     if (!isWebGpuSupported()) {
       throw new Error('WebGPU is not supported in this browser environment')
     }
-    // Dynamic import of transformers.js from ESM CDN
-    const mod = await import('https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.3.3')
+    const mod = typeof globalThis !== 'undefined' && globalThis.__mockTransformers
+      ? globalThis.__mockTransformers
+      : (await import('https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.3.3'))
     const pipeline = mod.pipeline || (mod.default && mod.default.pipeline)
     if (!pipeline) throw new Error('Transformers pipeline not found in loaded bundle')
-    const targetModel = modelName || (voice.settings && voice.settings.webgpuModel) || 'onnx-community/whisper-tiny'
-    _webGpuPipeline = await pipeline('automatic-speech-recognition', targetModel, {
+    return pipeline('automatic-speech-recognition', targetModel, {
       device: 'webgpu',
       dtype: 'fp32',
     })
-    return _webGpuPipeline
-  } finally {
-    _webGpuLoading = false
-  }
+  })().catch((err) => {
+    _webGpuPipelines.delete(targetModel)
+    throw err
+  })
+  _webGpuPipelines.set(targetModel, promise)
+  return promise
 }
 
 async function audioBlobToFloat32Array(blob) {
@@ -1150,13 +1115,23 @@ async function transcribeWithWebGpu(blob, mime, options) {
 voice.webGpu = {
   isSupported: isWebGpuSupported,
   transcribe: transcribeWithWebGpu,
+  load: loadWebGpuWhisper,
+  clearCache: () => { _webGpuPipelines.clear() },
 }
-    voice._chainsPromise = null
+voice._chainsPromise = null
     function modeChain(mode) {
       if (!voice._chainsPromise) {
         voice._chainsPromise = fetch('/dsh-voice/status', { cache: 'no-store' })
           .then((res) => res.json())
-          .then((data) => (data && data.modes) || {})
+          .then((data) => {
+            if (data && typeof data.localOnly === 'boolean') {
+              voice.settings.localOnly = data.localOnly
+            }
+            if (data && data.webgpuModel) {
+              voice.settings.webgpuModel = data.webgpuModel
+            }
+            return (data && data.modes) || {}
+          })
           .catch(() => {
             voice._chainsPromise = null
             return {}
@@ -1164,9 +1139,21 @@ voice.webGpu = {
       }
       return voice._chainsPromise.then((modes) => {
         const row = modes[mode] || {}
+        let chain = Array.isArray(row.chain) ? row.chain : []
+        let providers = chain.map((e) => (typeof e === 'string' ? e : e && e.provider)).filter(Boolean)
+        if (voice.settings && voice.settings.localOnly) {
+          providers = providers.filter((p) => p !== 'browser')
+        }
+        const modelMap = {}
+        for (const entry of chain) {
+          if (entry && entry.provider && entry.model) {
+            modelMap[entry.provider] = entry.model
+          }
+        }
         return {
-          chain: Array.isArray(row.chain) ? row.chain.map((e) => e && e.provider) : [],
+          chain: providers,
           language: row.language !== undefined ? row.language : '',
+          modelMap,
         }
       })
     }
@@ -1184,7 +1171,7 @@ voice.webGpu = {
       if (!recorder || recorder.state === 'inactive') return Promise.resolve()
       return new Promise((resolve) => recorder.addEventListener('stop', resolve, { once: true }))
     }
-    async function openMic(mode) {
+    async function openMic(mode, opId, target) {
       if (typeof navigator === 'undefined' || !navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
         throw new Error(t('micUnavailable'))
       }
@@ -1197,42 +1184,54 @@ voice.webGpu = {
       }
       if (voice.settings.micDeviceId) audio.deviceId = { exact: voice.settings.micDeviceId }
       const stream = await navigator.mediaDevices.getUserMedia({ audio })
-      let mimeType = 'audio/webm;codecs=opus'
-      if (!MediaRecorder.isTypeSupported(mimeType)) mimeType = ''
-      const recorder = mimeType ? new MediaRecorder(stream, { mimeType }) : new MediaRecorder(stream)
-      const rec = {
-        recorder, stream, mode,
-        chunks: [],
-        mime: mimeType || recorder.mimeType || 'audio/webm',
-        audioCtx: null, analyser: null,
-        cutting: false, closing: false,
-        silenceMs: 0, hadSpeech: false,
-        streamMs: 0,
-      }
-      recorder.ondataavailable = (e) => { if (e.data && e.data.size > 0) rec.chunks.push(e.data) }
-      const AC = typeof AudioContext !== 'undefined' ? AudioContext
-        : (typeof webkitAudioContext !== 'undefined' ? webkitAudioContext : null)
-      if (AC) {
-        rec.audioCtx = new AC()
-        if (rec.audioCtx.state === 'suspended') { rec.audioCtx.resume().catch(() => {}) }
-        const src = rec.audioCtx.createMediaStreamSource(stream)
-        rec.srcNode = src
-        let lastNode = src
-        try {
-          const filter = rec.audioCtx.createBiquadFilter()
-          filter.type = 'highpass'
-          filter.frequency.value = 80
-          filter.Q.value = 0.707
-          src.connect(filter)
-          lastNode = filter
-          rec.filterNode = filter
-        } catch (e) { /* audio filter fallback */ }
-        rec.analyser = rec.audioCtx.createAnalyser()
-        rec.analyser.fftSize = 128
-        lastNode.connect(rec.analyser)
-      }
-      recorder.start()
-      return rec
+      let rec = null
+      try {
+        let mimeType = 'audio/webm;codecs=opus'
+        if (!MediaRecorder.isTypeSupported(mimeType)) mimeType = ''
+        const recorder = mimeType ? new MediaRecorder(stream, { mimeType }) : new MediaRecorder(stream)
+        rec = {
+          recorder, stream, mode,
+          target: target || voice._activeTarget,
+          opId: opId || (voice.activeOpId || 0),
+          chunks: [],
+          mime: mimeType || recorder.mimeType || 'audio/webm',
+          audioCtx: null, analyser: null,
+          cutting: false, closing: false,
+          silenceMs: 0, hadSpeech: false,
+          streamMs: 0,
+        }
+        recorder.ondataavailable = (e) => { if (e.data && e.data.size > 0) rec.chunks.push(e.data) }
+        const AC = typeof AudioContext !== 'undefined' ? AudioContext
+          : (typeof webkitAudioContext !== 'undefined' ? webkitAudioContext : null)
+        if (AC) {
+          rec.audioCtx = new AC()
+          if (rec.audioCtx.state === 'suspended') { rec.audioCtx.resume().catch(() => {}) }
+          const src = rec.audioCtx.createMediaStreamSource(stream)
+          rec.srcNode = src
+          let lastNode = src
+          try {
+            const filter = rec.audioCtx.createBiquadFilter()
+            filter.type = 'highpass'
+            filter.frequency.value = 80
+            filter.Q.value = 0.707
+            src.connect(filter)
+            lastNode = filter
+            rec.filterNode = filter
+          } catch (e) { /* audio filter fallback */ }
+          rec.analyser = rec.audioCtx.createAnalyser()
+          rec.analyser.fftSize = 128
+          lastNode.connect(rec.analyser)
+        }
+        recorder.start()
+        return rec
+      } catch (err) {
+        if (rec) {
+          teardown(rec)
+        } else {
+          try { stream.getTracks().forEach((t) => t.stop()) } catch (_) {}
+        }
+        throw err
+      }
     }
     function currentLevel(rec) {
       if (!rec || !rec.analyser) return 0
@@ -1252,6 +1251,8 @@ voice.webGpu = {
     function cutPhrase() {
       const rec = voice.rec
       if (!rec || rec.cutting || rec.closing) return
+      const opId = rec.opId || voice.activeOpId
+      const target = rec.target || voice._activeTarget
       rec.cutting = true
       const stopped = waitStop(rec.recorder)
       try {
@@ -1263,7 +1264,7 @@ voice.webGpu = {
         return
       }
       stopped.then(async () => {
-        if (rec.cancelled || voice.activeOpId !== opId) return
+        if (rec.cancelled || voice.activeOpId !== opId || voice.disposed) return
         const blob = new Blob(rec.chunks, { type: rec.mime })
         rec.chunks = []
         rec.silenceMs = 0
@@ -1277,42 +1278,42 @@ voice.webGpu = {
         rec.cutting = false
         if (rec.cancelled || blob.size < 600) return       // cancelled or too short — not speech
         dictationQueue = dictationQueue.then(async () => {
-        if (rec.cancelled) return
-        try {
-          const out = await sendAudio(blob, rec.mime, 'dictation')
-          if (rec.cancelled) return
-          const text = out && out.text ? out.text : ''
-          const action = out && out.action ? out.action : null
-          if (voice.settings.structuredPromptVoice !== false && text) {
-            const promptInfo = findActiveStructuredPrompt()
-            if (promptInfo && submitToStructuredPrompt(text, promptInfo)) {
+          if (rec.cancelled || voice.activeOpId !== opId || voice.disposed) return
+          try {
+            const out = await sendAudio(blob, rec.mime, 'dictation')
+            if (rec.cancelled || voice.activeOpId !== opId || voice.disposed) return
+            const text = out && out.text ? out.text : ''
+            const action = out && out.action ? out.action : null
+            if (voice.settings.structuredPromptVoice !== false && text) {
+              const promptInfo = findActiveStructuredPrompt()
+              if (promptInfo && submitToStructuredPrompt(text, promptInfo)) {
+                return
+              }
+            }
+            if (action === 'send' || action === 'clear' || action === 'newline') {
+              executeVoiceAction(action, text)
               return
             }
+            if (action === 'cancel') {
+              cancelCurrent()
+              return
+            }
+            const delay = Number(voice.settings.sendDelayMs) || 0
+            if (text && delay > 0 && !voice.holding) {
+              appendDraft(text, target)
+              voice.set({ phase: 'pending', pending: { text, undoOnly: true, leftMs: delay } })
+              return
+            }
+            if (text) appendDraft(text, target)
+          } catch (e) {
+            if (!rec.cancelled && voice.activeOpId === opId && !voice.disposed) {
+              voice.set({ error: String(e && e.message ? e.message : e) })
+            }
           }
-          if (action === 'send' || action === 'clear' || action === 'newline') {
-            executeVoiceAction(action, text)
-            return
-          }
-          if (action === 'cancel') {
-            cancelCurrent()
-            return
-          }
-          const delay = Number(voice.settings.sendDelayMs) || 0
-          if (text && delay > 0 && !voice.holding) {
-            appendDraft(text)
-            voice.set({ phase: 'pending', pending: { text, undoOnly: true, leftMs: delay } })
-            return
-          }
-          if (text) appendDraft(text)
-        } catch (e) {
-          if (!rec.cancelled) {
-            voice.set({ error: String(e && e.message ? e.message : e) })
-          }
-        }
         })
       })
     }
-    function startBrowserLeg(mode, language) {
+    function startBrowserLeg(mode, language, opId, target) {
       if (voice.settings && voice.settings.localOnly) return false
       if (!browserRecognitionAvailable()) return false
       const finals = []
@@ -1321,6 +1322,7 @@ voice.webGpu = {
         lang: language,
         continuous: true,
         onInterim: (text) => {
+          if (voice.activeOpId !== opId || voice.phase !== 'recording' || voice.disposed) return
           voice.caption = text
           if (voice.settings.liveInterimPreview !== false) {
             voice.interimTranscript = text
@@ -1336,27 +1338,34 @@ voice.webGpu = {
               voice.browser = null
               voice.caption = ''
               voice.interimTranscript = ''
-              openMic(mode)
+              openMic(mode, opId, target)
                 .then((rec) => {
-                  if (voice.phase !== 'recording') {
+                  if (voice.activeOpId !== opId || voice.phase !== 'recording' || voice.disposed) {
                     teardown(rec)
                     return
                   }
+                  rec.opId = opId
+                  rec.target = target
                   voice.rec = rec
                   voice.notify()
                 })
-                .catch((err) => voice.set({ phase: 'error', error: String(err && err.message ? err.message : err), rec: null }))
+                .catch((err) => {
+                  if (voice.activeOpId !== opId) return
+                  voice.set({ phase: 'error', error: String(err && err.message ? err.message : err), rec: null })
+                })
             }
           }
         },
         onFinal: (text) => {
+          if (voice.activeOpId !== opId || (voice.phase !== 'recording' && voice.phase !== 'finishing') || voice.disposed) return
           finals.push(text)
           voice.caption = ''
           voice.interimTranscript = ''
-          if (mode === 'dictation') appendDraft(text)
+          if (mode === 'dictation') appendDraft(text, target)
           else voice.notify()
         },
         onError: (reason) => {
+          if (voice.activeOpId !== opId || voice.disposed) return
           voice.browser = null
           voice.interimTranscript = ''
           voice.set({ phase: 'error', error: t('browserFailed') + reason })
@@ -1369,6 +1378,16 @@ voice.webGpu = {
     function startRecording(mode) {
       if (voice.phase !== 'idle' && voice.phase !== 'error') return
       voice.activeOpId = (voice.activeOpId || 0) + 1
+      const opId = voice.activeOpId
+      const targetActions = voice.inputActions
+      const targetInput = voice.input
+      let span = null
+      if (targetActions && typeof targetActions.captureInsertion === 'function') {
+        try { span = targetActions.captureInsertion() } catch (_) {}
+      }
+      const target = { actions: targetActions, input: targetInput, span }
+      voice._activeTarget = target
+
       if (voice.isTtsSpeaking) {
         if (voice.settings.bargeIn) {
           triggerBargeIn()
@@ -1381,121 +1400,31 @@ voice.webGpu = {
       dictationQueue = Promise.resolve()
       voice.set({ phase: 'recording', mode, error: '', levels: [], caption: '', interimTranscript: '' })
       modeChain(mode).then((info) => {
+        if (voice.activeOpId !== opId || voice.phase !== 'recording' || voice.disposed) return
         voice._activeChain = info.chain || []
         voice._activeLang = info.language || ''
-        if (info.chain[0] === 'browser' && startBrowserLeg(mode, info.language)) return
-        openMic(mode)
+        voice._activeModelMap = info.modelMap || {}
+        if (info.chain[0] === 'browser' && !voice.settings.localOnly && startBrowserLeg(mode, info.language, opId, target)) return
+        openMic(mode, opId, target)
           .then((rec) => {
-            if (voice.phase !== 'recording') {
+            if (voice.activeOpId !== opId || voice.phase !== 'recording' || voice.disposed) {
               teardown(rec)
               return
             }
+            rec.opId = opId
+            rec.target = target
             voice.rec = rec
             voice.notify()
           })
-          .catch((err) => voice.set({ phase: 'error', error: String(err && err.message ? err.message : err), rec: null }))
+          .catch((err) => {
+            if (voice.activeOpId !== opId) return
+            voice.set({ phase: 'error', error: String(err && err.message ? err.message : err), rec: null })
+          })
       })
     }
     function startDictation() { startRecording('dictation') }
     function startMessage() { startRecording('message') }
-    // --------------------------------------------------------- hold gesture
-    const HOLD_THRESHOLD_MS = 350
-    const hold = { active: false, mode: null, startedAt: 0, armed: false }
-    let activePointerCleanup = null
-    function beginHold(mode, pointerEvent) {
-      if (hold.armed || (voice.phase !== 'idle' && voice.phase !== 'error')) return
-      hold.armed = true
-      hold.mode = mode
-      hold.startedAt = Date.now()
-      hold.active = false
-      if (pointerEvent?.target?.setPointerCapture && pointerEvent.pointerId !== undefined) {
-        try { pointerEvent.target.setPointerCapture(pointerEvent.pointerId) } catch (e) {}
-      }
-      if (typeof window !== 'undefined') {
-        if (activePointerCleanup) { try { activePointerCleanup() } catch (e) {} }
-        const onUp = () => endHold(false)
-        const onCancel = () => endHold(true)
-        window.addEventListener('pointerup', onUp, true)
-        window.addEventListener('pointercancel', onCancel, true)
-        window.addEventListener('blur', onCancel, true)
-        activePointerCleanup = () => {
-          window.removeEventListener('pointerup', onUp, true)
-          window.removeEventListener('pointercancel', onCancel, true)
-          window.removeEventListener('blur', onCancel, true)
-          activePointerCleanup = null
-        }
-      }
-      startRecording(mode)
-      voice.holding = true
-      voice.notify()
-    }
-    function endHold(cancelled) {
-      if (!hold.armed) return
-      if (activePointerCleanup) { try { activePointerCleanup() } catch (e) {} }
-      const heldMs = Date.now() - hold.startedAt
-      hold.armed = false
-      hold.active = false
-      voice.holding = false
-      if (!cancelled && heldMs < HOLD_THRESHOLD_MS) { voice.notify(); return }
-      if (cancelled) cancelCurrent()
-      else stopCurrent()
-    }
 
-    let activeHotkeyCleanup = null
-    function clearGlobalHotkey() {
-      if (typeof activeHotkeyCleanup === 'function') {
-        try { activeHotkeyCleanup() } catch (_) { /* ignore */ }
-        activeHotkeyCleanup = null
-      }
-      if (typeof window !== 'undefined' && typeof window.__dsh_voice_hotkey_cleanup === 'function') {
-        try { window.__dsh_voice_hotkey_cleanup() } catch (_) { /* ignore */ }
-        window.__dsh_voice_hotkey_cleanup = null
-      }
-    }
-    voice.clearGlobalHotkey = clearGlobalHotkey
-    function installHotkey(ctx, keyName, mode) {
-      clearGlobalHotkey()
-      if (typeof document === 'undefined' || !keyName) return () => {}
-      const down = (event) => {
-        if (event.repeat) return
-        const target = event.target
-        const isEditable = target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable || (typeof target.getAttribute === 'function' && target.getAttribute('contenteditable') === 'true'))
-        if (isEditable && !isAllowedInEditable(keyName)) return
-        if (hotkeyMatches(event, keyName)) {
-          event.preventDefault()
-          event.stopPropagation()
-          beginHold(mode)
-        }
-      }
-
-      const up = (event) => {
-        if (hold.armed && isHotkeyRelease(event, keyName)) {
-          event.preventDefault()
-          endHold(false)
-        } else if (event.key === 'Escape' && hold.armed) {
-          event.preventDefault()
-          endHold(true)
-        }
-      }
-      const blur = () => { if (hold.armed) endHold(true) }
-      document.addEventListener('keydown', down, true)
-      document.addEventListener('keyup', up, true)
-      window.addEventListener('blur', blur)
-      const cleanup = () => {
-        document.removeEventListener('keydown', down, true)
-        document.removeEventListener('keyup', up, true)
-        window.removeEventListener('blur', blur)
-        if (activeHotkeyCleanup === cleanup) activeHotkeyCleanup = null
-        if (typeof window !== 'undefined' && window.__dsh_voice_hotkey_cleanup === cleanup) {
-          window.__dsh_voice_hotkey_cleanup = null
-        }
-      }
-      activeHotkeyCleanup = cleanup
-      if (typeof window !== 'undefined') {
-        window.__dsh_voice_hotkey_cleanup = cleanup
-      }
-      return cleanup
-    }
     function cancelCurrent() {
       voice.activeOpId = (voice.activeOpId || 0) + 1
       announceVoice('end')
@@ -1522,16 +1451,20 @@ voice.webGpu = {
       announceVoice('end')
       focusComposer()
       if (voice.browser) {
+        const opId = voice.activeOpId
         const mode = voice.mode
         const b = voice.browser
+        const target = voice._activeTarget
         voice.browser = null
         voice.caption = ''
+        voice.set({ phase: 'finishing' })
         Promise.resolve(b.stop()).then(() => {
+          if (voice.disposed || voice.activeOpId !== opId) return
           const said = (voice.browserFinals || []).join(' ').trim()
           voice.browserFinals = null
           if (!said) { voice.set({ phase: 'idle' }); return }
           if (mode === 'message') {
-            appendDraft(said)
+            appendDraft(said, target)
             voice.set({ phase: 'pending', pending: { text: said, leftMs: voice.settings.autoSendMs } })
           } else {
             voice.set({ phase: 'idle' })
@@ -1542,17 +1475,23 @@ voice.webGpu = {
       const rec = voice.rec
       if (!rec || rec.closing) return
       rec.closing = true
-      voice.activeOpId = (voice.activeOpId || 0) + 1
-      const opId = voice.activeOpId
+      const opId = rec.opId || voice.activeOpId
+      const target = rec.target || voice._activeTarget
       const mode = rec.mode
       const stopped = waitStop(rec.recorder)
       try {
         if (rec.recorder && rec.recorder.state !== 'inactive') rec.recorder.stop()
       } catch (e) { /* already stopped */ }
       stopped.then(async () => {
+        if (voice.disposed || rec.cancelled || voice.activeOpId !== opId) {
+          teardown(rec)
+          if (voice.rec === rec) voice.rec = null
+          return
+        }
         const blob = new Blob(rec.chunks, { type: rec.mime })
         teardown(rec)
-        voice.rec = null
+        if (voice.rec === rec) voice.rec = null
+        if (voice.disposed || rec.cancelled || voice.activeOpId !== opId) return
         if (blob.size < (mode === 'dictation' ? 600 : 1200)) {
           if (mode === 'dictation') { try { await dictationQueue } catch (_) {} }
           voice.set({ phase: 'idle' })
@@ -1566,10 +1505,10 @@ voice.webGpu = {
         voice.lastNote = { blob, url: noteUrl, mime: rec.mime, text: '' }
         voice.set({ phase: 'processing' })
         const processTail = async () => {
-          if (rec.cancelled || voice.activeOpId !== opId || voice.phase === 'idle') return
+          if (voice.disposed || rec.cancelled || voice.activeOpId !== opId || voice.phase === 'idle') return
           try {
             const out = await sendAudio(blob, rec.mime, mode)
-            if (rec.cancelled || voice.activeOpId !== opId || voice.phase === 'idle') return
+            if (voice.disposed || rec.cancelled || voice.activeOpId !== opId || voice.phase === 'idle') return
             if (out.command) { runSessionCommand(out.command); return }
             const text = out.text || ''
             const action = out.action || null
@@ -1590,7 +1529,7 @@ voice.webGpu = {
               return
             }
             if (action === 'cancel') { cancelCurrent(); return }
-            appendDraft(text)
+            appendDraft(text, target)
             if (voice.lastNote) voice.lastNote.text = text
             if (mode === 'message') {
               voice.set({ phase: 'pending', pending: { text, totalMs: voice.settings.autoSendMs, leftMs: voice.settings.autoSendMs, audioUrl: noteUrl } })
@@ -1598,7 +1537,7 @@ voice.webGpu = {
               voice.set({ phase: 'idle' })
             }
           } catch (e) {
-            if (rec.cancelled || voice.activeOpId !== opId || voice.phase === 'idle') return
+            if (voice.disposed || rec.cancelled || voice.activeOpId !== opId || voice.phase === 'idle') return
             voice.set({ phase: 'error', error: String(e && e.message ? e.message : e) })
           }
         }
@@ -1612,78 +1551,69 @@ voice.webGpu = {
     }
     function clearDraft() {
       const actions = voice.inputActions
-      if (!actions || typeof actions.setDraft !== 'function') {
-        voice.set({ phase: 'error', error: t('composerUnavailable') })
-        return false
-      }
-      actions.setDraft('')
-      return true
+      if (actions && typeof actions.setDraft === 'function') actions.setDraft('')
     }
-    function executeVoiceAction(action, text) {
+
+    // Voice actions (#29-7): spoken triggers perform composer actions.
+    function executeVoiceAction(action, rawText) {
       if (action === 'send') {
+        const text = rawText.replace(/(^|[\s,.!?])(отправь|пошли|send)([\s,.!?]|$)/gi, '').trim()
         if (text) appendDraft(text)
-        submitPending()
-        return true
-      }
-      if (action === 'clear') {
-        const ok = clearDraft()
-        if (ok && voice.phase !== 'recording') voice.set({ phase: 'idle' })
-        return ok
-      }
-      if (action === 'newline') {
-        const payload = text ? (text.endsWith('\n') ? text : text + '\n') : '\n'
+        if (typeof voice.inputActions?.submit === 'function') {
+          voice.inputActions.submit()
+        }
+        voice.set({ phase: 'idle' })
+      } else if (action === 'clear') {
+        clearDraft()
+        voice.set({ phase: 'idle' })
+      } else if (action === 'newline') {
+        const payload = (rawText.replace(/(^|[\s,.!?])(с новой строки|новая строка|абзац|new line|paragraph)([\s,.!?]|$)/gi, '').trim())
         appendDraft(payload)
-        if (voice.phase !== 'recording') voice.set({ phase: 'idle' })
-        return true
+        voice.set({ phase: 'idle' })
       }
-      if (action === 'cancel') { cancelCurrent(); return true }
-      return false
     }
-    voice.executeVoiceAction = executeVoiceAction
+
     function submitPending() {
-      voice.pending = null
+      const pending = voice.pending
+      if (!pending) return
+      const text = pending.text
       const actions = voice.inputActions
-      if (!actions || typeof actions.submit !== 'function') {
-        voice.set({ phase: 'error', error: t('composerUnavailable') })
-        return
-      }
+      voice.pending = null
       voice.set({ phase: 'idle' })
+
       if (voice.settings.polishSend) {
-        const run = async () => {
-          try {
-            const draft = voice.input && typeof voice.input.draft === 'string' ? voice.input.draft : ''
-            if (draft.trim()) {
-              const controller = typeof AbortController !== 'undefined' ? new AbortController() : null
-              const timer = controller ? setTimeout(() => controller.abort(), 10000) : null
-              try {
-                const res = await fetch('/dsh-voice/polish', {
-                  method: 'POST',
-                  headers: { 'content-type': 'application/json' },
-                  body: JSON.stringify({ text: draft }),
-                  signal: controller ? controller.signal : undefined,
-                })
-                const parsed = await res.json().catch(() => null)
-                if (parsed && parsed.ok && typeof parsed.text === 'string' && parsed.text.trim()) {
-                  actions.setDraft(parsed.text.trim())
-                }
-              } finally {
-                if (timer) clearTimeout(timer)
-              }
+        fetch('/dsh-voice/polish', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ text }),
+        })
+          .then((res) => res.json())
+          .then((data) => {
+            const polished = (data && data.text) || text
+            if (actions && typeof actions.setDraft === 'function') {
+              actions.setDraft(polished)
             }
-          } catch (e) { /* polish is best-effort */ }
-        }
-        run().finally(() => setTimeout(() => { try { actions.submit() } catch (e) { /* busy */ } }, 0))
-        return
+            if (actions && typeof actions.submit === 'function') {
+              actions.submit()
+            }
+          })
+          .catch(() => {
+            if (actions && typeof actions.submit === 'function') {
+              actions.submit()
+            }
+          })
+      } else if (actions && typeof actions.submit === 'function') {
+        actions.submit()
       }
-      setTimeout(() => { try { actions.submit() } catch (e) { /* composer busy */ } }, 0)
     }
+
     function runSessionCommand(cmd) {
-      const actions = voice.inputActions
-      voice.set({ phase: 'idle', pending: null })
-      if ((cmd === 'send' || cmd === 'continue') && actions && typeof actions.submit === 'function') {
-        actions.submit()
-      }
+      if (cmd === 'send') submitPending()
+      else if (cmd === 'cancel') cancelCurrent()
+      else if (cmd === 'stop') cancelCurrent()
+      else if (cmd === 'continue') { /* keep recording */ }
     }
+
     function keepPending() {
       voice.pending = null
       voice.set({ phase: 'idle' })
@@ -1727,6 +1657,194 @@ voice.webGpu = {
       )
     }
 
+    // Human-readable key name.
+    const KEY_LABELS = {
+      Control: 'Ctrl', Alt: 'Alt', Shift: 'Shift', Meta: 'Win',
+      Escape: 'Esc',
+    }
+
+    function keyLabel(name) {
+      if (!name) return t('keyUnset')
+      if (typeof name === 'string' && name.includes('+')) {
+        return name.split('+').map((p) => keyLabel(p)).join(' + ')
+      }
+      if (name === 'Space') return t('keySpace')
+      if (KEY_LABELS[name]) return KEY_LABELS[name]
+      // Drop the Key/Digit prefix from codes like KeyR and Digit5.
+      return String(name).replace(/^Key/, '').replace(/^Digit/, '')
+    }
+
+    // What to store on key press. Pure modifiers are remembered by name:
+    // left and right have different codes but the user means "either".
+    // Supports combos like Control+Space or Alt+KeyV.
+    function keyFromEvent(event) {
+      if (!event) return ''
+      const modifiers = []
+      if (event.ctrlKey && event.key !== 'Control') modifiers.push('Control')
+      if (event.altKey && event.key !== 'Alt') modifiers.push('Alt')
+      if (event.shiftKey && event.key !== 'Shift') modifiers.push('Shift')
+      if (event.metaKey && event.key !== 'Meta') modifiers.push('Meta')
+
+      const main = ['Control', 'Alt', 'Shift', 'Meta'].includes(event.key)
+        ? event.key
+        : (event.code || event.key || '')
+
+      if (modifiers.length > 0 && !['Control', 'Alt', 'Shift', 'Meta'].includes(main)) {
+        return modifiers.concat(main).join('+')
+      }
+      return main
+    }
+
+    function hotkeyMatches(event, name) {
+      if (!event || !name) return false
+      if (typeof name === 'string' && name.includes('+')) {
+        const parts = name.split('+')
+        const main = parts[parts.length - 1]
+        const needCtrl = parts.includes('Control')
+        const needAlt = parts.includes('Alt')
+        const needShift = parts.includes('Shift')
+        const needMeta = parts.includes('Meta')
+        if (needCtrl && !event.ctrlKey) return false
+        if (needAlt && !event.altKey) return false
+        if (needShift && !event.shiftKey) return false
+        if (needMeta && !event.metaKey) return false
+        return event.code === main || event.key === main
+      }
+      if (name === 'Control') return event.key === 'Control'
+      if (name === 'Alt') return event.key === 'Alt'
+      if (name === 'Shift') return event.key === 'Shift'
+      if (name === 'Meta') return event.key === 'Meta'
+      return event.code === name || event.key === name
+    }
+
+    function isAllowedInEditable(name) {
+      if (!name) return false
+      if (['Control', 'Alt', 'Shift', 'Meta'].includes(name)) return true
+      if (/^F\d{1,2}$/.test(name)) return true
+      if (typeof name === 'string' && name.includes('+')) return true
+      if (['Tab', 'Pause', 'ScrollLock', 'Insert'].includes(name)) return true
+      return false
+    }
+
+    function isHotkeyRelease(event, name) {
+      if (!event || !name) return false
+      if (typeof name === 'string' && name.includes('+')) {
+        const parts = name.split('+')
+        if (event.code === parts[parts.length - 1] || event.key === parts[parts.length - 1]) return true
+        for (let i = 0; i < parts.length - 1; i++) {
+          if (event.key === parts[i] || event.code === parts[i]) return true
+        }
+        return false
+      }
+      return event.code === name || event.key === name
+    }
+
+    // Announce that the user started speaking.
+    //
+    // Playback should mute immediately: listening and talking at once is
+    // impossible. There is no plugin-to-plugin API — this broadcasts a window
+    // event that anyone may hear, so either side works alone.
+
+// --------------------------------------------------------- hold gesture
+    const HOLD_THRESHOLD_MS = 350
+    const hold = { active: false, mode: null, startedAt: 0, armed: false }
+    let activePointerCleanup = null
+    function beginHold(mode, pointerEvent) {
+      if (hold.armed || (voice.phase !== 'idle' && voice.phase !== 'error')) return
+      hold.armed = true
+      hold.mode = mode
+      hold.startedAt = Date.now()
+      hold.active = false
+      if (pointerEvent?.target?.setPointerCapture && pointerEvent.pointerId !== undefined) {
+        try { pointerEvent.target.setPointerCapture(pointerEvent.pointerId) } catch (e) {}
+      }
+      if (typeof window !== 'undefined') {
+        if (activePointerCleanup) { try { activePointerCleanup() } catch (e) {} }
+        const onUp = () => endHold(false)
+        const onCancel = () => endHold(true)
+        window.addEventListener('pointerup', onUp, { once: true })
+        window.addEventListener('pointercancel', onCancel, { once: true })
+        activePointerCleanup = () => {
+          window.removeEventListener('pointerup', onUp)
+          window.removeEventListener('pointercancel', onCancel)
+          activePointerCleanup = null
+        }
+      }
+      voice.holding = false
+      startRecording(mode)
+      setTimeout(() => {
+        if (hold.armed) {
+          hold.active = true
+          voice.holding = true
+          voice.notify()
+        }
+      }, HOLD_THRESHOLD_MS)
+    }
+    function endHold(cancelled) {
+      if (activePointerCleanup) { try { activePointerCleanup() } catch (e) {} }
+      if (!hold.armed) return
+      hold.armed = false
+      voice.holding = false
+      voice.notify()
+      if (cancelled) cancelCurrent()
+      else stopCurrent()
+    }
+
+    let activeHotkeyCleanup = null
+    function clearGlobalHotkey() {
+      if (typeof activeHotkeyCleanup === 'function') {
+        try { activeHotkeyCleanup() } catch (_) { /* ignore */ }
+        activeHotkeyCleanup = null
+      }
+      if (typeof window !== 'undefined' && typeof window.__dsh_voice_hotkey_cleanup === 'function') {
+        try { window.__dsh_voice_hotkey_cleanup() } catch (_) { /* ignore */ }
+        window.__dsh_voice_hotkey_cleanup = null
+      }
+    }
+    voice.clearGlobalHotkey = clearGlobalHotkey
+    function installHotkey(ctx, keyName, mode) {
+      clearGlobalHotkey()
+      if (typeof document === 'undefined' || !keyName) return () => {}
+      const down = (event) => {
+        if (event.repeat) return
+        const target = event.target
+        const isEditable = target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable || (typeof target.getAttribute === 'function' && target.getAttribute('contenteditable') === 'true'))
+        if (isEditable && !isAllowedInEditable(keyName)) return
+        if (hotkeyMatches(event, keyName)) {
+          event.preventDefault()
+          event.stopPropagation()
+          beginHold(mode)
+        }
+      }
+
+      const up = (event) => {
+        if (hold.armed && isHotkeyRelease(event, keyName)) {
+          event.preventDefault()
+          endHold(false)
+        } else if (event.key === 'Escape' && hold.armed) {
+          event.preventDefault()
+          endHold(true)
+        }
+      }
+      const blur = () => { if (hold.armed) endHold(true) }
+      document.addEventListener('keydown', down, true)
+      document.addEventListener('keyup', up, true)
+      window.addEventListener('blur', blur)
+      const cleanup = () => {
+        document.removeEventListener('keydown', down, true)
+        document.removeEventListener('keyup', up, true)
+        window.removeEventListener('blur', blur)
+        if (activeHotkeyCleanup === cleanup) activeHotkeyCleanup = null
+        if (typeof window !== 'undefined' && window.__dsh_voice_hotkey_cleanup === cleanup) {
+          window.__dsh_voice_hotkey_cleanup = null
+        }
+      }
+      activeHotkeyCleanup = cleanup
+      if (typeof window !== 'undefined') {
+        window.__dsh_voice_hotkey_cleanup = cleanup
+      }
+      return cleanup
+    }
     // ----------------------------------------------------------- visualizers
     let _accentColorCache = { color: '', expires: 0 }
     let _softColorCache = { color: '', expires: 0 }
@@ -2180,6 +2298,7 @@ voice.webGpu = {
               Object.assign(voice.settings, {
                 beep: !!(data && data.beep),
                 localOnly: !!(data && data.localOnly),
+                webgpuModel: String((data && data.webgpuModel) || (voice.settings && voice.settings.webgpuModel) || 'onnx-community/whisper-tiny'),
                 micDeviceId: String((data && data.micDeviceId) || ''),
                 historyLimit: Number(data && data.historyLimit),
                 voiceCommands: !!(data && data.voiceCommands),
@@ -2709,7 +2828,7 @@ voice.webGpu = {
               style: { flex: 1 },
             },
               React.createElement('option', { value: 'cpu' }, 'CPU (Standard)'),
-              React.createElement('option', { value: 'rknpu' }, 'Rockchip RK3588 NPU (rknpu)'),
+              React.createElement('option', { value: 'rknn' }, 'Rockchip RK3588 NPU (RKNN)'),
               React.createElement('option', { value: 'openvino' }, 'Intel OpenVINO'),
               React.createElement('option', { value: 'cuda' }, 'NVIDIA CUDA'),
             ),
@@ -3124,7 +3243,7 @@ voice.webGpu = {
     // ------------------------------------------------------- settings voice section
     function VoiceSection(props) {
       const t = (props && props.t) || moduleT
-      const ctx = props.ctx
+      const ctx = (props && props.ctx) || {}
       // On a non-localhost page the kernel disables settings entirely: the
       // shared document is not readable, every section gets "unavailable" and
       // writes are dropped. The server does not share that restriction, and
@@ -3227,6 +3346,27 @@ voice.webGpu = {
         try { return JSON.parse(JSON.stringify(obj)) } catch (e) { return Object.assign({}, obj) }
       }
 
+      const setTop = (key, val) => {
+        setDraft((d) => Object.assign({}, d || {}, { [key]: val }))
+      }
+      const setIn = (mode, key, val) => {
+        setDraft((d) => {
+          const next = Object.assign({}, d || {})
+          next[mode] = Object.assign({}, next[mode] || {}, { [key]: val })
+          return next
+        })
+      }
+      const textField = (key, label, hint) => React.createElement('div', { className: 'cb-field' },
+        React.createElement('label', null, label),
+        React.createElement('input', {
+          type: 'text',
+          value: (draft && draft[key]) ?? '',
+          disabled: !writable,
+          onChange: (e) => setTop(key, e.target.value),
+        }),
+        hint ? React.createElement('span', { className: 'dvs-sub' }, hint) : null,
+      )
+
       React.useEffect(() => { if (ready && draft === null) setDraft(deepClone(value)) }, [ready, draft, value])
 
       React.useEffect(() => {
@@ -3259,13 +3399,10 @@ voice.webGpu = {
           techJargonCorrection: val.techJargonCorrection !== false,
           liveInterimPreview: val.liveInterimPreview !== false,
           structuredPromptVoice: val.structuredPromptVoice !== false,
+          webgpuModel: String(val.webgpuModel || (voice.settings && voice.settings.webgpuModel) || 'onnx-community/whisper-tiny'),
         })
       }, [ready, value])
 
-      const { sensevoiceState, installingSensevoice, triggerInstallSensevoice } = useSensevoiceInstaller(fetchStatus)
-
-      const { testingMic, testLevel, toggleTestMic, gateDbVal, gateThresholdPercent } = useMicTester(draft, value, setErr)
-
       const [statusData, setStatusData] = React.useState(null)
       const [statusLatency, setStatusLatency] = React.useState(null)
       const fetchStatus = React.useCallback(() => {
@@ -3279,6 +3416,9 @@ voice.webGpu = {
             setStatusLatency(Math.round(performance.now() - start))
             if (data && data.ok) {
               setStatusData(data)
+              if (data.webgpuModel && voice.settings) {
+                voice.settings.webgpuModel = data.webgpuModel
+              }
             }
           })
           .catch(() => {
@@ -3291,6 +3431,10 @@ voice.webGpu = {
         fetchStatus()
       }, [fetchStatus])
 
+      const { sensevoiceState, installingSensevoice, triggerInstallSensevoice } = useSensevoiceInstaller(fetchStatus)
+
+      const { testingMic, testLevel, toggleTestMic, gateDbVal, gateThresholdPercent } = useMicTester(draft, value, setErr)
+
       const { updaterStatus, updating, updaterMsg, updaterLoading, checkUpdater, onUpdateNow } = usePluginUpdater()
 
       const save = async () => {
@@ -3783,6 +3927,15 @@ voice.webGpu = {
       isHotkeyRelease,
       extractContextKeywords,
       resolveBrowserRecognitionLang,
+      VoiceSection,
+      cutPhrase,
+      sendAudio,
+      modeChain,
+      openMic,
+      startRecording,
+      cancelCurrent,
+      stopCurrent,
+      loadWebGpuWhisper,
     }
     return module.exports
   },