@goodandready/dsh-voice 0.8.27 → 0.8.29

package/lib/client.js

@@ -17,6 +17,14 @@ window.__ModuleLoader__.load({
     Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })
     let React = require('react')
 
+    let ChevronIcon = null
+    try {
+      const primitives = require('@deepseek-ai/dsh-client-ui-primitives')
+      ChevronIcon = primitives && (primitives.IconChevronDownOutline14 || primitives.IconChevronDownOutline)
+    } catch {
+      ChevronIcon = null
+    }
+
     const NS = 'dsh-voice'
 
     // UI strings live in the locale registry so a separate package can
@@ -183,6 +191,15 @@ window.__ModuleLoader__.load({
       'noiseGate': 'Noise Gate (dB)',
       'noiseGateHint': 'Mute background fan hum and keyboard clicks below threshold. Off = disabled',
       'noiseGateOff': 'Off',
+      'versionTitle': 'Plugin Version & Updates',
+      'versionHint': 'Check for new versions and update directly from npm.',
+      'updateAvailable': 'Update available',
+      'upToDate': 'Up to date',
+      'updatePrompt': 'A new version is available on npm. Click update to install.',
+      'updateNow': 'Update now',
+      'updating': 'Updating…',
+      'updateSuccess': 'Updated successfully! Restart DSH to apply.',
+      'updateFailed': 'Update failed. Check logs.',
     }
 
     const zh = {
@@ -346,6 +363,15 @@ window.__ModuleLoader__.load({
       'noiseGate': '噪声门 (dB)',
       'noiseGateHint': '静音切除低于阈值的风扇嗡嗡声与机械键盘敲击声。Off = 关闭',
       'noiseGateOff': '关闭',
+      'versionTitle': '插件版本与更新',
+      'versionHint': '检查新版本并直接从 npm 更新。',
+      'updateAvailable': '有可用更新',
+      'upToDate': '已是最新版本',
+      'updatePrompt': 'npm 上有新版本可用。点击更新进行安装。',
+      'updateNow': '立即更新',
+      'updating': '正在更新…',
+      'updateSuccess': '更新成功！请重启 DSH 生效。',
+      'updateFailed': '更新失败，请查看日志。',
     }
 
     // Strings are also needed outside components — in recording handlers and
@@ -357,7 +383,8 @@ window.__ModuleLoader__.load({
       '.dvo-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--dsw-alias-border-l1);background:transparent;color:var(--dsw-alias-label-secondary);cursor:pointer;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;touch-action:manipulation}' +
       '.dvo-btn:hover{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-border-l2)}' +
       '.dvo-btn[data-err="1"]{color:var(--dsw-alias-state-error-primary);border-color:var(--dsw-alias-state-error-primary)}' +
-      '.dvo-pill{display:flex;align-items:center;gap:10px;height:52px;border-radius:26px;background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);padding:0 14px;width:100%;max-width:720px;margin:0 auto;box-shadow:0 8px 24px rgba(0,0,0,.18);box-sizing:border-box;user-select:none;-webkit-user-select:none}' +
+      '.dvo-pill{display:flex;align-items:center;gap:10px;height:52px;border-radius:26px;background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);padding:0 14px;width:100%;max-width:720px;margin:0 auto;box-shadow:0 8px 24px color-mix(in srgb, var(--dsw-alias-label-primary) 18%, transparent);box-sizing:border-box;user-select:none;-webkit-user-select:none}' +
+      '.dvo-chev-icon{width:14px;height:14px;display:block;flex:none}' +
       '.dvo-pbtn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;cursor:pointer;padding:0;flex:none;box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-primary);user-select:none;-webkit-user-select:none;touch-action:manipulation}' +
       '.dvo-pbtn:hover{background:var(--dsw-alias-bg-layer-2)}' +
       '.dvo-wave{flex:1;min-width:0;max-width:100%;height:40px;width:100%;color:var(--dsw-alias-label-primary)}' +
@@ -447,8 +474,31 @@ window.__ModuleLoader__.load({
       React.createElement('path', { d: 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z' }),
       React.createElement('line', { x1: 12, y1: 9, x2: 12, y2: 13 }),
       React.createElement('line', { x1: 12, y1: 17, x2: 12.01, y2: 17 }))
-    const chevronIcon = () => React.createElement('svg', ic,
-      React.createElement('path', { d: 'M6 9l6 6 6-6' }))
+    const chevronIcon = () => (
+      ChevronIcon
+        ? React.createElement(ChevronIcon, { className: 'dvo-chev-icon' })
+        : React.createElement('svg', {
+            className: 'dvo-chev-icon',
+            width: 14, height: 14, viewBox: '0 0 16 16', fill: 'none',
+          },
+          React.createElement('path', {
+            d: 'M4 6l4 4 4-4', stroke: 'currentColor', strokeWidth: 1.5,
+            strokeLinecap: 'round', strokeLinejoin: 'round',
+          }))
+    )
+
+    function focusComposer() {
+      if (typeof window === 'undefined') return
+      const actions = voice.inputActions
+      if (actions && typeof actions.focus === 'function') {
+        try { actions.focus(); return } catch { /* best effort */ }
+      }
+      try {
+        const el = document.querySelector('.conversation-input textarea, .cb-composer textarea, .dsh-composer textarea, [data-slate-editor="true"], textarea')
+        if (el && typeof el.focus === 'function') el.focus()
+      } catch { /* best effort */ }
+    }
+
 
     // ------------------------------------------------------------ transport
     function blobToBase64(blob) {
@@ -466,6 +516,8 @@ window.__ModuleLoader__.load({
       const text = (voice.input && typeof voice.input.draft === 'string') ? voice.input.draft : ''
       if (!text || text.length < 3) return []
       const matches = text.match(/[A-Za-zА-Яа-яЁё_][A-Za-zА-Яа-яЁё0-9_]{2,29}/g) || []
+      // Linguistic filter: functional stop-word dictionary for vocabulary keyword extraction.
+      // Language processing data for context analysis, distinct from user-facing UI text.
       const stop = new Set([
         'the', 'and', 'for', 'are', 'but', 'not', 'you', 'all', 'any', 'can', 'her', 'was',
         'one', 'our', 'out', 'day', 'get', 'has', 'him', 'his', 'how', 'man', 'new', 'now',
@@ -491,11 +543,24 @@ window.__ModuleLoader__.load({
       const payload = { dataBase64, mimeType: mime, mode }
       const contextWords = extractContextKeywords()
       if (contextWords && contextWords.length > 0) payload.contextWords = contextWords
-      const res = await fetch('/dsh-voice/transcribe', {
-        method: 'POST',
-        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify(payload),
-      })
+      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) {
@@ -513,8 +578,8 @@ window.__ModuleLoader__.load({
       return s
     }
 
-    // Spoken edit commands (#37): "new line" / "с новой строки" -> \n and so on.
-    // Applied before normalization, only when enabled in settings.
+    // Functional speech edit commands (#37): spoken line breaks and punctuation -> symbols.
+    // Linguistic data for audio transcript post-processing; not user-facing UI text.
     // Russian phrases match RU STT output; English covers EN dictation.
     const VOICE_COMMANDS = [
       [/(^|[\s,.!?])с новой строки([\s,.!?]|$)/gi, '$1\n$2'],
@@ -545,7 +610,8 @@ window.__ModuleLoader__.load({
         // Draft was edited manually — cut the last insert as a substring.
         const i = draft.lastIndexOf(last.added)
         if (i < 0) { insertHistory.push(last); return t('nothingToUndo') }
-        actions.setDraft((draft.slice(0, i) + draft.slice(i + last.added.length)).replace(/\s+$/, ''))
+        const spliced = draft.slice(0, i) + draft.slice(i + last.added.length)
+        actions.setDraft(spliced.replace(/[ \t]{2,}/g, ' ').replace(/\s+$/, '').trimStart())
       }
       return t('undone')
     }
@@ -717,6 +783,17 @@ window.__ModuleLoader__.load({
       if (rec.audioCtx) { try { rec.audioCtx.close() } catch (e) { /* already closed */ } }
     }
 
+    if (typeof window !== 'undefined') {
+      const onPageUnload = () => {
+        if (voice.rec) teardown(voice.rec)
+        if (voice.browser) {
+          try { voice.browser.abort() } catch (e) { /* ignore */ }
+        }
+      }
+      window.addEventListener('pagehide', onPageUnload)
+      window.addEventListener('beforeunload', onPageUnload)
+    }
+
     function waitStop(recorder) {
       if (!recorder || recorder.state === 'inactive') return Promise.resolve()
       return new Promise((resolve) => recorder.addEventListener('stop', resolve, { once: true }))
@@ -765,7 +842,7 @@ window.__ModuleLoader__.load({
           src.connect(filter)
           lastNode = filter
           rec.filterNode = filter
-        } catch (e) {}
+        } catch (e) { /* audio filter fallback */ }
 
         rec.analyser = rec.audioCtx.createAnalyser()
         rec.analyser.fftSize = 128
@@ -815,16 +892,18 @@ window.__ModuleLoader__.load({
         rec.silenceMs = 0
         rec.hadSpeech = false
         rec.streamMs = 0
-        if (!rec.closing) {
+        if (!rec.closing && !rec.cancelled) {
           try {
             if (rec.recorder && rec.recorder.state === 'inactive') rec.recorder.start()
           } catch (e) { /* stream already closed */ }
         }
         rec.cutting = false
-        if (blob.size < 600) return       // too short — not speech
+        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 delay = Number(voice.settings.sendDelayMs) || 0
           if (text && delay > 0 && !voice.holding) {
@@ -836,7 +915,9 @@ window.__ModuleLoader__.load({
           }
           if (text) appendDraft(text)
         } catch (e) {
-          voice.set({ error: String(e && e.message ? e.message : e) })
+          if (!rec.cancelled) {
+            voice.set({ error: String(e && e.message ? e.message : e) })
+          }
         }
         })
       })
@@ -987,6 +1068,7 @@ window.__ModuleLoader__.load({
 
     function cancelCurrent() {
       announceVoice('end')
+      focusComposer()
       if (voice.browser) {
         voice.browser.abort()
         voice.browser = null
@@ -997,6 +1079,7 @@ window.__ModuleLoader__.load({
       const rec = voice.rec
       voice.pending = null
       if (!rec) { voice.set({ phase: 'idle', error: '' }); return }
+      rec.cancelled = true
       rec.closing = true
       const stopped = waitStop(rec.recorder)
       try {
@@ -1009,6 +1092,7 @@ window.__ModuleLoader__.load({
     // sends the whole recording and opens the cancel window.
     function stopCurrent() {
       announceVoice('end')
+      focusComposer()
       if (voice.browser) {
         const mode = voice.mode
         const said = (voice.browserFinals || []).join(' ').trim()
@@ -1075,14 +1159,21 @@ window.__ModuleLoader__.load({
           try {
             const draft = voice.input && typeof voice.input.draft === 'string' ? voice.input.draft : ''
             if (draft.trim()) {
-              const res = await fetch('/dsh-voice/polish', {
-                method: 'POST',
-                headers: { 'content-type': 'application/json' },
-                body: JSON.stringify({ text: draft }),
-              })
-              const parsed = await res.json().catch(() => null)
-              if (parsed && parsed.ok && typeof parsed.text === 'string' && parsed.text.trim()) {
-                actions.setDraft(parsed.text.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)
               }
             }
           } catch (e) { /* polish is best-effort */ }
@@ -1127,11 +1218,14 @@ window.__ModuleLoader__.load({
       return React.createElement(React.Fragment, null,
         React.createElement('button', {
           type: 'button', className: 'dvo-btn', 'data-err': err ? '1' : '0',
-          title: err ? v.error : t('dictationBtn'), onClick: startDictation,
+          title: err ? v.error : t('dictationBtn'),
+          'aria-label': err ? v.error : t('dictationBtn'),
+          onClick: startDictation,
         }, micIcon()),
         React.createElement('button', {
           type: 'button', className: 'dvo-btn', 'data-err': err ? '1' : '0',
           title: err ? v.error : (t('messageBtn') + hk),
+          'aria-label': err ? v.error : (t('messageBtn') + hk),
           // Hold: record while pressed; leaving the control cancels.
           onPointerDown: (e) => { e.preventDefault(); beginHold('message') },
           onPointerUp: () => endHold(false),
@@ -1141,6 +1235,7 @@ window.__ModuleLoader__.load({
           ? React.createElement('button', {
               type: 'button', className: 'dvo-btn' + (voice.showPlayer ? ' dvo-btn-active' : ''),
               title: t('listenBack'),
+              'aria-label': t('listenBack'),
               onClick: () => voice.set({ showPlayer: !voice.showPlayer }),
             }, playIcon())
           : null,
@@ -1148,22 +1243,35 @@ window.__ModuleLoader__.load({
     }
 
     // ----------------------------------------------------------- visualizers
+    let _accentColorCache = { color: '', expires: 0 }
+    let _softColorCache = { color: '', expires: 0 }
+
     function accentColor(fallback) {
+      const now = Date.now()
+      if (now < _accentColorCache.expires && _accentColorCache.color) return _accentColorCache.color
       try {
         const root = document.documentElement
         const s = getComputedStyle(root)
         const pick = s.getPropertyValue('--dsw-alias-state-info-primary').trim()
           || s.getPropertyValue('--dsw-alias-label-primary').trim()
-        if (pick) return pick
+        if (pick) {
+          _accentColorCache = { color: pick, expires: now + 1000 }
+          return pick
+        }
       } catch (noTheme) { /* canvas-only fallback */ }
       return fallback || voice.waveColor || 'currentColor'
     }
     function softColor(fallback) {
+      const now = Date.now()
+      if (now < _softColorCache.expires && _softColorCache.color) return _softColorCache.color
       try {
         const s = getComputedStyle(document.documentElement)
         const pick = s.getPropertyValue('--dsw-alias-bg-layer-3').trim()
           || s.getPropertyValue('--dsw-alias-label-primary').trim()
-        if (pick) return pick
+        if (pick) {
+          _softColorCache = { color: pick, expires: now + 1000 }
+          return pick
+        }
       } catch (noTheme) { /* fallback */ }
       return fallback || voice.waveColor || 'currentColor'
     }
@@ -1349,7 +1457,7 @@ window.__ModuleLoader__.load({
             g.clearRect(0, 0, cssW, cssH)
 
             if (!voice.waveColor) {
-              try { voice.waveColor = getComputedStyle(canvas).color || '#fff' } catch (e) { voice.waveColor = '#fff' }
+              try { voice.waveColor = getComputedStyle(canvas).color || 'currentColor' } catch (e) { voice.waveColor = 'currentColor' }
             }
             const levels = voice.levels
             const style = (voice.settings && voice.settings.visualizerStyle) || 'liquid-wave'
@@ -1407,11 +1515,12 @@ window.__ModuleLoader__.load({
 
       if (v.phase === 'idle') {
         if (!voice.showPlayer || !voice.lastNote || !voice.lastNote.url) return null
-        return React.createElement('div', { className: 'dvo-pill' },
+        return React.createElement('div', { className: 'dvo-pill', role: 'region', 'aria-label': t('title') },
           React.createElement('div', { className: 'dvo-audio-wrap' },
             React.createElement('button', {
               type: 'button', className: 'dvo-audio-play',
               title: isPlaying ? t('pause') : t('play'),
+              'aria-label': isPlaying ? t('pause') : t('play'),
               onClick: () => {
                 const el = audioRef.current
                 if (!el) return
@@ -1427,13 +1536,15 @@ window.__ModuleLoader__.load({
             }),
             React.createElement('span', { className: 'dvo-audio-time' }, t('lastRecording')),
           ),
-          React.createElement('span', { className: 'dvo-status' }, voice.lastNote.text || ''),
+          React.createElement('span', { className: 'dvo-status', 'aria-live': 'polite', 'aria-atomic': 'true' }, voice.lastNote.text || ''),
           React.createElement('button', {
             type: 'button', className: 'dvo-pbtn', title: t('hide'),
+            'aria-label': t('hide'),
             onClick: () => {
               if (audioRef.current) audioRef.current.pause()
               setIsPlaying(false)
               voice.set({ showPlayer: false })
+              focusComposer()
             },
           }, xIcon()),
         )
@@ -1446,12 +1557,16 @@ window.__ModuleLoader__.load({
         // Live caption of what is heard right now. Until the browser emits a
         // final chunk the text is interim and changes on screen.
         const caption = voice.caption || (inBrowser ? '' : null)
-        return React.createElement('div', { className: 'dvo-pill' },
-          React.createElement('button', { type: 'button', className: 'dvo-pbtn', title: t('cancel'), onClick: cancelCurrent }, xIcon()),
+        return React.createElement('div', { className: 'dvo-pill', role: 'region', 'aria-label': t('title') },
+          React.createElement('button', {
+            type: 'button', className: 'dvo-pbtn', title: t('cancel'),
+            'aria-label': t('cancel'),
+            onClick: cancelCurrent,
+          }, xIcon()),
           inBrowser
             ? null
             : React.createElement('canvas', { className: 'dvo-wave', ref: canvasRef, width: 720, height: 40 }),
-          React.createElement('span', { className: 'dvo-status' },
+          React.createElement('span', { className: 'dvo-status', 'aria-live': 'polite', 'aria-atomic': 'true' },
             caption
               ? caption
               : (voice.holding
@@ -1459,36 +1574,43 @@ window.__ModuleLoader__.load({
                 : (inBrowser
                   ? t('listening')
                   : (rec && rec.hadSpeech ? (v.speaking ? t('speaking') : t('silence')) : hint)))),
-          React.createElement('button', { type: 'button', className: 'dvo-pbtn', title: t('stop'), onClick: stopCurrent }, stopIcon()),
+          React.createElement('button', {
+            type: 'button', className: 'dvo-pbtn', title: t('stop'),
+            'aria-label': t('stop'),
+            onClick: stopCurrent,
+          }, stopIcon()),
         )
       }
 
       if (v.phase === 'processing') {
-        return React.createElement('div', { className: 'dvo-pill' },
-          React.createElement('span', { className: 'dvo-status' }, spinIcon(), t('transcribing')))
+        return React.createElement('div', { className: 'dvo-pill', role: 'region', 'aria-label': t('title') },
+          React.createElement('span', { className: 'dvo-status', 'aria-live': 'polite', 'aria-atomic': 'true' }, spinIcon(), t('transcribing')))
       }
 
       if (v.phase === 'pending') {
         const left = Math.max(0, Math.ceil((voice.pending ? voice.pending.leftMs : 0) / 1000))
         if (voice.pending && voice.pending.undoOnly) {
           // Cancel window for delayed dictation insert (#29-5).
-          return React.createElement('div', { className: 'dvo-pill' },
-            React.createElement('span', { className: 'dvo-status' }, t('undo'), ': ', left, t('secondsShort')),
+          return React.createElement('div', { className: 'dvo-pill', role: 'region', 'aria-label': t('title') },
+            React.createElement('span', { className: 'dvo-status', 'aria-live': 'polite', 'aria-atomic': 'true' }, t('undo'), ': ', left, t('secondsShort')),
             React.createElement('button', {
               type: 'button', className: 'dvo-pbtn', title: t('undo'),
+              'aria-label': t('undo'),
               onClick: async () => {
                 const msg = await undoLastInsert()
                 voice.set({ phase: 'idle', error: msg === t('undone') ? '' : msg })
+                focusComposer()
               },
             }, xIcon()),
           )
         }
-        return React.createElement('div', { className: 'dvo-pill' },
+        return React.createElement('div', { className: 'dvo-pill', role: 'region', 'aria-label': t('title') },
           voice.lastNote && voice.lastNote.url
             ? React.createElement('div', { className: 'dvo-audio-wrap' },
                 React.createElement('button', {
                   type: 'button', className: 'dvo-audio-play',
                   title: isPlaying ? t('pause') : t('play'),
+                  'aria-label': isPlaying ? t('pause') : t('play'),
                   onClick: () => {
                     const el = audioRef.current
                     if (!el) return
@@ -1505,15 +1627,29 @@ window.__ModuleLoader__.load({
                 React.createElement('span', { className: 'dvo-audio-time' }, t('listenBack')),
               )
             : null,
-          React.createElement('span', { className: 'dvo-status' }, t('sendingIn')),
+          React.createElement('span', { className: 'dvo-status', 'aria-live': 'polite', 'aria-atomic': 'true' }, t('sendingIn')),
           React.createElement('span', { className: 'dvo-count' }, left + t('secondsShort')),
-          React.createElement('button', { type: 'button', className: 'dvo-pbtn', title: t('keepPending'), onClick: keepPending }, xIcon()),
+          React.createElement('button', {
+            type: 'button', className: 'dvo-pbtn', title: t('keepPending'),
+            'aria-label': t('keepPending'),
+            onClick: () => {
+              keepPending()
+              focusComposer()
+            },
+          }, xIcon()),
         )
       }
 
-      return React.createElement('div', { className: 'dvo-pill' },
-        React.createElement('span', { className: 'dvo-status dvo-err' }, warnIcon(), v.error),
-        React.createElement('button', { type: 'button', className: 'dvo-pbtn', title: t('hide'), onClick: () => voice.set({ phase: 'idle', error: '' }) }, xIcon()),
+      return React.createElement('div', { className: 'dvo-pill', role: 'region', 'aria-label': t('title') },
+        React.createElement('span', { className: 'dvo-status dvo-err', 'aria-live': 'polite', 'aria-atomic': 'true' }, warnIcon(), v.error),
+        React.createElement('button', {
+          type: 'button', className: 'dvo-pbtn', title: t('hide'),
+          'aria-label': t('hide'),
+          onClick: () => {
+            voice.set({ phase: 'idle', error: '' })
+            focusComposer()
+          },
+        }, xIcon()),
       )
     }
 
@@ -1616,16 +1752,16 @@ window.__ModuleLoader__.load({
       '.cb-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}' +
       '.cb-grid-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:12px}' +
       '.cb-badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);display:inline-flex;align-items:center;gap:4px;font-weight:500}' +
-      '.cb-badge-ok{border-color:var(--dsw-alias-state-success-primary);color:var(--dsw-alias-state-success-primary);background:rgba(16,185,129,0.08)}' +
-      '.cb-badge-warn{border-color:var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);background:rgba(245,158,11,0.08)}' +
-      '.cb-badge-bad{border-color:var(--dsw-alias-state-error-primary);color:var(--dsw-alias-state-error-primary);background:rgba(239,68,68,0.08)}' +
+      '.cb-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)}' +
+      '.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)}' +
+      '.cb-badge-bad{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)}' +
       '.cb-input{height:34px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 10px;font-size:13px;box-sizing:border-box}' +
       '.cb-input:focus{outline:none;border-color:var(--dsw-alias-state-brand-primary)}' +
       '.cb-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:6px 12px;font-size:13px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .15s ease}' +
       '.cb-btn:hover:not(:disabled){background:var(--dsw-alias-bg-layer-4, var(--dsw-alias-bg-layer-2));border-color:var(--dsw-alias-label-dimmed, var(--dsw-alias-border-l2))}' +
       '.cb-btn-primary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3);border-color:transparent}' +
       '.cb-btn-primary:hover:not(:disabled){background:var(--dsw-alias-label-primary) !important;color:var(--dsw-alias-bg-layer-3) !important;opacity:0.88}' +
-      '.cb-btn-danger{color:var(--dsw-alias-state-error-primary);border-color:rgba(239,68,68,0.3)}' +
+      '.cb-btn-danger{color:var(--dsw-alias-state-error-primary);border-color:color-mix(in srgb, var(--dsw-alias-state-error-primary) 30%, transparent)}' +
       '.cb-btn-mini{border:1px solid var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-primary);border-radius:6px;width:28px;height:28px;cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:13px}' +
       '.cb-btn-mini:hover:not(:disabled){background:var(--dsw-alias-bg-layer-2)}' +
       '.cb-field{display:flex;flex-direction:column;gap:6px;padding:6px 0;font-size:13px;color:var(--dsw-alias-label-primary)}' +
@@ -1633,7 +1769,7 @@ window.__ModuleLoader__.load({
       '.cb-field textarea{height:auto;padding:8px 10px;font-family:inherit}' +
       '.cb-check-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--dsw-alias-label-primary);user-select:none}' +
       '.cb-check-label input[type="checkbox"]{width:16px;height:16px;cursor:pointer}' +
-      '.cb-alert-err{padding:10px 14px;border-radius:8px;background:rgba(239,68,68,0.1);color:var(--dsw-alias-state-error-primary);font-size:13px}' +
+      '.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)}' +
@@ -1864,26 +2000,27 @@ window.__ModuleLoader__.load({
 
       React.useEffect(() => {
         if (!ready) return
+        const val = value || {}
         voice.settings = Object.assign({}, voice.settings, {
-          vadSilenceMs: Number(value && value.dictation && value.dictation.vadSilenceMs) || 700,
-          autoSendMs: Number(value && value.message && value.message.autoSendMs) || 4000,
-          beep: !!(value && value.beep),
-          micDeviceId: String((value && value.micDeviceId) || ''),
-          historyLimit: Number(value && value.historyLimit) || 20,
-          voiceCommands: !!(value && value.voiceCommands),
-          sendDelayMs: Number(value && value.dictation && value.dictation.sendDelayMs) || 0,
-          stream: !!(value && value.dictation && value.dictation.stream),
-          streamChunkMs: Number(value && value.dictation && value.dictation.streamChunkMs) || 1200,
-          vadAdapt: Number(value && value.dictation && value.dictation.vadAdapt) || 0,
-          wakeWord: String((value && value.wakeWord) || ''),
-          bargeIn: !!(value && value.bargeIn),
-          polishSend: !!(value && value.message && value.message.polishSend),
-          sessionCommands: !!(value && value.message && value.message.sessionCommands),
-          polishBaseUrl: String((value && value.polishBaseUrl) || ''),
-          noiseSuppression: value.noiseSuppression !== false,
-          noiseGateDb: Number((value && value.noiseGateDb) !== undefined ? value.noiseGateDb : -45),
-          contextGlossary: value.contextGlossary !== false,
-          visualizerStyle: (value && value.visualizerStyle) || 'liquid-wave',
+          vadSilenceMs: Number(val.dictation && val.dictation.vadSilenceMs) || 700,
+          autoSendMs: Number(val.message && val.message.autoSendMs) || 4000,
+          beep: !!val.beep,
+          micDeviceId: String(val.micDeviceId || ''),
+          historyLimit: Number(val.historyLimit) || 20,
+          voiceCommands: !!val.voiceCommands,
+          sendDelayMs: Number(val.dictation && val.dictation.sendDelayMs) || 0,
+          stream: !!(val.dictation && val.dictation.stream),
+          streamChunkMs: Number(val.dictation && val.dictation.streamChunkMs) || 1200,
+          vadAdapt: Number(val.dictation && val.dictation.vadAdapt) || 0,
+          wakeWord: String(val.wakeWord || ''),
+          bargeIn: !!val.bargeIn,
+          polishSend: !!(val.message && val.message.polishSend),
+          sessionCommands: !!(val.message && val.message.sessionCommands),
+          polishBaseUrl: String(val.polishBaseUrl || ''),
+          noiseSuppression: val.noiseSuppression !== false,
+          noiseGateDb: Number(val.noiseGateDb !== undefined ? val.noiseGateDb : -45),
+          contextGlossary: val.contextGlossary !== false,
+          visualizerStyle: val.visualizerStyle || 'liquid-wave',
         })
       }, [ready, value])
 
@@ -1896,8 +2033,8 @@ window.__ModuleLoader__.load({
         if (testingMic) {
           if (testRef.current) {
             testRef.current.active = false
-            try { testRef.current.stream.getTracks().forEach((t) => t.stop()) } catch (e) {}
-            if (testRef.current.audioCtx) { try { testRef.current.audioCtx.close() } catch (e) {} }
+            try { testRef.current.stream.getTracks().forEach((t) => t.stop()) } catch (e) { /* already stopped */ }
+            if (testRef.current.audioCtx) { try { testRef.current.audioCtx.close() } catch (e) { /* already closed */ } }
             testRef.current = null
           }
           setTestingMic(false)
@@ -1922,7 +2059,7 @@ window.__ModuleLoader__.load({
             filter.Q.value = 0.707
             src.connect(filter)
             lastNode = filter
-          } catch (e) {}
+          } catch (e) { /* filter fallback */ }
           const analyser = audioCtx.createAnalyser()
           analyser.fftSize = 128
           lastNode.connect(analyser)
@@ -1931,12 +2068,12 @@ window.__ModuleLoader__.load({
 
           const check = () => {
             if (!testRef.current || !testRef.current.active) return
-            const data = new Uint8Array(analyser.frequencyBinCount)
-            analyser.getByteFrequencyData(data)
+            const arr = new Uint8Array(analyser.frequencyBinCount)
+            analyser.getByteFrequencyData(arr)
             let sum = 0
-            for (let i = 0; i < data.length; i++) sum += data[i]
-            const lvl = Math.min(100, Math.round((sum / data.length / 255) * 220))
-            setTestLevel(lvl)
+            for (let i = 0; i < arr.length; i++) sum += arr[i]
+            const avg = sum / (arr.length || 1)
+            setTestLevel(Math.min(100, Math.round((avg / 128) * 100)))
             requestAnimationFrame(check)
           }
           requestAnimationFrame(check)
@@ -1949,8 +2086,8 @@ window.__ModuleLoader__.load({
         return () => {
           if (testRef.current) {
             testRef.current.active = false
-            try { testRef.current.stream.getTracks().forEach((t) => t.stop()) } catch (e) {}
-            if (testRef.current.audioCtx) { try { testRef.current.audioCtx.close() } catch (e) {} }
+            try { testRef.current.stream.getTracks().forEach((t) => t.stop()) } catch (e) { /* already stopped */ }
+            if (testRef.current.audioCtx) { try { testRef.current.audioCtx.close() } catch (e) { /* already closed */ } }
             testRef.current = null
           }
         }
@@ -1981,6 +2118,55 @@ window.__ModuleLoader__.load({
         fetchStatus()
       }, [fetchStatus])
 
+      const [updaterStatus, setUpdaterStatus] = React.useState(null)
+      const [updating, setUpdating] = React.useState(false)
+      const [updaterMsg, setUpdaterMsg] = React.useState('')
+      const [updaterLoading, setUpdaterLoading] = React.useState(false)
+
+      const checkUpdater = React.useCallback(async () => {
+        setUpdaterLoading(true)
+        setUpdaterMsg('')
+        try {
+          const res = await fetch('/api/dsh-voice/update', {
+            headers: { accept: 'application/json' },
+            cache: 'no-store',
+          })
+          if (!res.ok) throw new Error(`HTTP ${res.status}`)
+          const data = await res.json()
+          setUpdaterStatus(data)
+        } catch (e) {
+          /* best effort update check */
+        } finally {
+          setUpdaterLoading(false)
+        }
+      }, [])
+
+      const onUpdateNow = async () => {
+        setUpdating(true)
+        setUpdaterMsg('')
+        try {
+          const res = await fetch('/api/dsh-voice/update', {
+            method: 'POST',
+            headers: {
+              'x-dsh-plugin-update': '1',
+              'content-type': 'application/json',
+            },
+          })
+          const data = await res.json()
+          if (!res.ok) throw new Error(data?.error || `HTTP ${res.status}`)
+          setUpdaterStatus(data)
+          setUpdaterMsg(t('updateSuccess'))
+        } catch (e) {
+          setUpdaterMsg(t('updateFailed') + ' ' + (e?.message || String(e)))
+        } finally {
+          setUpdating(false)
+        }
+      }
+
+      React.useEffect(() => {
+        checkUpdater()
+      }, [checkUpdater])
+
       if (!ready) {
         const waiting = !snap || snap.status === 'loading'
         return React.createElement('div', { className: 'cb-page' },
@@ -2012,21 +2198,22 @@ window.__ModuleLoader__.load({
           }
         }
 
+        const d = draft || {}
         Object.assign(voice.settings, {
-          vadSilenceMs: Number(draft.dictation && draft.dictation.vadSilenceMs) || 700,
-          autoSendMs: Number(draft.message && draft.message.autoSendMs) || 4000,
-          beep: !!draft.beep,
-          micDeviceId: String(draft.micDeviceId || ''),
-          historyLimit: Number(draft.historyLimit),
-          voiceCommands: !!draft.voiceCommands,
-          sendDelayMs: Number(draft.dictation && draft.dictation.sendDelayMs) || 0,
-          stream: !!(draft.dictation && draft.dictation.stream),
-          streamChunkMs: Number(draft.dictation && draft.dictation.streamChunkMs) || 1200,
-          vadAdapt: Number(draft.dictation && draft.dictation.vadAdapt) || 0,
-          noiseSuppression: draft.noiseSuppression !== false,
-          noiseGateDb: Number(draft.noiseGateDb !== undefined ? draft.noiseGateDb : -45),
-          contextGlossary: draft.contextGlossary !== false,
-          visualizerStyle: draft.visualizerStyle || 'liquid-wave',
+          vadSilenceMs: Number(d.dictation && d.dictation.vadSilenceMs) || 700,
+          autoSendMs: Number(d.message && d.message.autoSendMs) || 4000,
+          beep: !!d.beep,
+          micDeviceId: String(d.micDeviceId || ''),
+          historyLimit: Number(d.historyLimit),
+          voiceCommands: !!d.voiceCommands,
+          sendDelayMs: Number(d.dictation && d.dictation.sendDelayMs) || 0,
+          stream: !!(d.dictation && d.dictation.stream),
+          streamChunkMs: Number(d.dictation && d.dictation.streamChunkMs) || 1200,
+          vadAdapt: Number(d.dictation && d.dictation.vadAdapt) || 0,
+          noiseSuppression: d.noiseSuppression !== false,
+          noiseGateDb: Number(d.noiseGateDb !== undefined ? d.noiseGateDb : -45),
+          contextGlossary: d.contextGlossary !== false,
+          visualizerStyle: d.visualizerStyle || 'liquid-wave',
         })
         try { window.dispatchEvent(new CustomEvent('dsh-voice:settings-saved')) } catch (noEvents) { /* nobody */ }
 
@@ -2061,7 +2248,7 @@ window.__ModuleLoader__.load({
         React.createElement('span', { className: 'dvs-sub' }, t('hotkeyHint1') + t('hotkeyHint2')),
       )
 
-      const gateDbVal = Number((draft && draft.noiseGateDb) !== undefined ? draft.noiseGateDb : (value && value.noiseGateDb) !== undefined ? value.noiseGateDb : -45)
+      const gateDbVal = Number((draft && draft.noiseGateDb !== undefined) ? draft.noiseGateDb : (value && value.noiseGateDb !== undefined) ? value.noiseGateDb : -45)
       const gateThresholdPercent = gateDbVal <= -90 ? 0 : Math.min(100, Math.max(0, Math.round(((gateDbVal + 60) / 40) * 100)))
 
       const micField = () => React.createElement('div', { className: 'cb-field' },
@@ -2409,6 +2596,47 @@ window.__ModuleLoader__.load({
           ),
         ),
 
+        // 7. Plugin Version & Updates Card
+        React.createElement('div', { className: 'cb-section-card' },
+          React.createElement('div', { className: 'cb-section-title' },
+            React.createElement('span', null, '📦 ' + t('versionTitle')),
+            React.createElement('button', {
+              type: 'button', className: 'cb-btn', style: { fontSize: '12px', padding: '4px 8px' },
+              onClick: checkUpdater, disabled: updaterLoading || updating,
+            }, updaterLoading ? '⏳…' : '🔄 ' + t('refreshStats')),
+          ),
+          React.createElement('div', { className: 'cb-section-desc' }, t('versionHint')),
+          React.createElement('div', { className: 'cb-row', style: { alignItems: 'center', gap: '12px' } },
+            React.createElement('span', { className: 'cb-badge cb-badge-ok' },
+              'v' + ((updaterStatus && updaterStatus.currentVersion) || '0.8.29')
+            ),
+            updaterStatus && updaterStatus.updateAvailable
+              ? React.createElement('span', { className: 'cb-badge cb-badge-warn' },
+                  t('updateAvailable') + ': v' + updaterStatus.latestVersion
+                )
+              : React.createElement('span', { className: 'cb-badge cb-badge-ok' },
+                  t('upToDate')
+                ),
+            updaterStatus && updaterStatus.updateAvailable
+              ? React.createElement('button', {
+                  type: 'button', className: 'cb-btn cb-btn-primary', style: { fontSize: '12px', padding: '4px 10px' },
+                  onClick: onUpdateNow, disabled: updating,
+                }, updating ? t('updating') : t('updateNow'))
+              : null,
+          ),
+          updaterMsg
+            ? React.createElement('div', {
+                style: {
+                  marginTop: '8px',
+                  fontSize: '12px',
+                  color: updaterMsg.includes('fail') || updaterMsg.includes('失败')
+                    ? 'var(--dsw-alias-state-warning-primary)'
+                    : 'var(--dsw-alias-state-success-primary)',
+                },
+              }, updaterMsg)
+            : null,
+        ),
+
         // Action bar (Save)
         React.createElement('div', { className: 'cb-row' },
           React.createElement('button', { type: 'button', className: 'cb-btn cb-btn-primary', disabled: !writable, onClick: save }, t('save')),