@goodandready/dsh-voice 0.8.18 → 0.8.20

package/lib/client.js

@@ -1,13 +1,13 @@
-// dsh-voice — клиентская половина (браузер).
+// dsh-voice — client half (browser).
 //
-// Две кнопки в conversation.input.right:
-//   микрофон — диктовка: речь режется по паузам, каждый кусок распознаётся и
-//              дописывается в строку ввода; отправка остаётся за пользователем;
-//   волна    — голосовое: одна запись целиком, после распознавания текст
-//              уходит агенту по истечении окна отмены.
+// Two buttons in conversation.input.right:
+//   mic  — dictation: speech is cut on pauses, each chunk is recognized and
+//          appended to the composer; send stays with the user;
+//   wave — voice message: one whole recording; after recognition the text is
+//          sent to the agent when the cancel window expires.
 //
-// Полоска записи живёт в conversation.input.dock, страница настроек — в
-// settings.section.
+// The recording pill lives in conversation.input.dock; settings are a card
+// in settings.plugin.item.
 
 window.__ModuleLoader__.load({
   id: '@goodandready/dsh-voice',
@@ -19,9 +19,9 @@ window.__ModuleLoader__.load({
 
     const NS = 'dsh-voice'
 
-    // Строки интерфейса живут в реестре локалей: так их переводит отдельный
-    // пакет, не трогая код этого плагина. Английский — язык по умолчанию,
-    // на него же приходится откат, если перевода нет.
+    // UI strings live in the locale registry so a separate package can
+    // translate them without touching this plugin. English is the source
+    // language, the default, and the fallback.
     const en = {
       'saveFailed': 'Some fields were not saved —',
       'cardHint': 'Dictation and voice messages: providers, chains, local whisper',
@@ -128,6 +128,7 @@ window.__ModuleLoader__.load({
       'whisperBin': 'Local whisper: binary',
       'whisperBinHint': 'used when autostart is on',
       'whisperModel': 'Local whisper: model',
+      'whisperModelHint': 'Absolute path to the ggml model file',
       'whisperAutostart': 'Autostart the local whisper',
       'save': 'Save',
       'saved': 'Saved ✓',
@@ -154,6 +155,7 @@ window.__ModuleLoader__.load({
       'sensevoiceBin': 'SenseVoice: binary',
       'sensevoiceBinHint': 'used when autostart is on',
       'sensevoiceModel': 'SenseVoice: model path',
+      'sensevoiceModelHint': 'Absolute path or identifier of the SenseVoice / sherpa-onnx model',
       'sensevoiceAutostart': 'Autostart the SenseVoice server',
       'visualizerStyle': 'Audio visualizer style',
       'visualizerStyleHint': 'Waveform animation inside the recording pill',
@@ -161,150 +163,24 @@ window.__ModuleLoader__.load({
       'visDynamicOrb': 'Dynamic Orb',
       'visBars': 'Classic Bars',
       'visOff': 'Off',
-    }
-    const ru = {
-      'saveFailed': 'Часть полей не сохранилась —',
-      'cardHint': 'Диктовка и голосовые сообщения: провайдеры, цепочки, локальный whisper',
-      'expand': 'Развернуть',
-      'collapse': 'Свернуть',
-      'composerUnavailable': 'Композер недоступен',
-      'keySpace': 'Пробел',
-      'keyUnset': 'не задана',
-      'recognitionError': 'ошибка распознавания',
-      'micUnavailable': 'Микрофон недоступен: нужен HTTPS или localhost',
-      'noRecorder': 'MediaRecorder не поддерживается браузером',
-      'browserFailed': 'Браузер не распознал: ',
-      'nothingHeard': 'Речь не распознана',
-      'dictationBtn': 'Голосовой набор',
-      'messageBtn': 'Голосовое сообщение — нажать или удерживать',
-      'dictationPill': 'Диктовка — текст дописывается в строку',
-      'messagePill': 'Запись голосового',
-      'cancel': 'Отмена',
-      'holdHint': 'Держите — отпустите, чтобы отправить',
-      'listening': 'Слушаю в браузере…',
-      'stop': 'Стоп',
-      'transcribing': 'Распознаю…',
-      'sendingIn': 'Отправляю агенту через',
-      'secondsShort': ' с',
-      'keepPending': 'Отменить отправку',
-      'hide': 'Скрыть',
-      'title': 'Голос',
-      'recordSlot': 'Запись голоса',
-      'browserHint': 'распознаёт сам браузер, ключ не нужен',
-      'openaiHint': 'whisper-1 · ключ OPENAI_API_KEY',
-      'siliconflowHint': 'FunAudioLLM/SenseVoiceSmall · ключ SILICONFLOW_API_KEY',
-      'deepinfraHint': 'openai/whisper-large-v3-turbo · ключ DEEPINFRA_API_KEY',
-      'fireworksHint': 'whisper-v3-turbo · ключ FIREWORKS_API_KEY',
-      'mistralHint': 'voxtral-mini-latest · ключ MISTRAL_API_KEY',
-      'openrouterHint': 'google/gemini-2.5-flash · ключ OPENROUTER_API_KEY',
-      'localHint': 'задаётся при запуске сервера',
-      'up': 'Выше',
-      'down': 'Ниже',
-      'remove': 'Убрать',
-      'addProvider': 'Добавить провайдера',
-      'chainHint': 'Порядок сверху вниз — порядок попыток',
-      'customName': 'имя для цепочки',
-      'customModel': 'модель',
-      'customKeyName': 'имя ключа',
-      'customModelHint': 'указание модели (пусто — встроенное)',
-      'addCustom': 'Добавить своего провайдера',
-      'loadingSettings': 'Загрузка настроек…',
-      'notReady1': 'Харнесс ещё не объявил настройки плагина. Если он только что перезапустился, ',
-      'notReady2': 'раздел появится сам через несколько секунд.',
-      'hotkey': 'Клавиша для голосового сообщения',
-      'pressKey': 'Нажмите клавишу…',
-      'clearKey': 'Убрать клавишу',
-      'hotkeyHint1': 'Держите её — идёт запись, отпустите — уйдёт агенту, Esc — отмена. ',
-      'hotkeyHint2': 'Можно любую: буква, F-клавиша или модификатор.',
-      'language': 'Язык',
-      'dictationHint': 'Речь режется по паузам, текст дописывается в строку ввода.',
-      'pauseMs': 'Пауза до конца фразы, мс',
-      'pauseHint': 'Меньше — чаще куски и быстрее текст, но выше риск обрезать слово',
-      'speaking': 'Вы говорите…',
-      'silence': 'Пауза…',
-      'normalizeTranscript': 'Нормализация расшифровок',
-      'undo': 'Отменить вставку',
-      'undone': 'Вставка отменена',
-      'nothingToUndo': 'Отменять нечего',
-      'beep': 'Звук старта/стопа',
-      'localOnly': 'Только локальный whisper',
-      'localOnlyHint': 'Обе цепочки — только локальный сервер whisper.cpp: полностью офлайн.',
-      'sendDelay': 'Задержка вставки диктовки (мс)',
-      'sendDelayHint': 'Пауза перед вставкой фразы с окном отмены. 0 — выкл',
-      'mic': 'Микрофон',
-      'micDefault': 'Системной по умолчанию',
-      'vocabulary': 'Свой словарь (одно слово в строке)',
-      'polish': 'Полировка текста моделью',
-      'polishHint': 'Пунктуация и слова-паразиты через модель харнесса перед вставкой',
-      'stream': 'Непрерывная диктовка',
-      'streamHint': 'Резать фразы по таймеру во время речи, а не по длинной паузе',
-      'streamChunkMs': 'Кусок потока (мс)',
-      'vadAdapt': 'Адаптивная тишина',
-      'vadAdaptHint': 'Авто-подстройка порога под темп речи. 0 = фикс. поведение',
-      'wakeWord': 'Слово-активатор',
-      'wakeWordHint': 'Распознавание в браузере начинает запись, если речь начинается с этой фразы. Пусто = выкл',
-      'bargeIn': 'Перебивание',
-      'polishSend': 'Полировка всего текста перед отправкой',
-      'polishSendHint': 'Прогнать весь текст через модель перед отправкой агенту',
-      'sessionCommands': 'Голосовые команды сессии',
-      'sessionCommandsHint': '«отправь», «отмени», «стоп», «продолжи» — действия сессии, а не текст',
-      'polishBaseUrl': 'Локальный ендпоинт полировки',
-      'polishBaseUrlHint': 'OpenAI-совместимый /chat/completions базовый URL, напр. локальный Ollama. Пусто = модель харнесса',
-      'polishModel': 'Модель офлайн-полировки',
-      'polishKeyEnv': 'Ключ офлайн-полировки',
-      'voiceCommandsLabel': 'Голосовые команды («с новой строки», «абзац»)',
-      'normalizeTranscriptHint': 'transcribe_audio: числа словами — в цифры, аккуратная пунктуация',
-      'messageTitle': 'Голосовое сообщение',
-      'messageHint': 'Одна запись целиком, после распознавания уходит агенту.',
-      'undoMs': 'Окно отмены, мс',
-      'undoHint': 'Сколько времени можно отменить автоматическую отправку',
-      'customTitle': 'Свои провайдеры',
-      'customHint': 'Любой OpenAI-совместимый API. Имя становится доступным в цепочках выше.',
-      'general': 'Общее',
-      'whisperEndpoint': 'Локальный whisper: endpoint',
-      'whisperEndpointHint': 'POST /inference сервера whisper.cpp',
-      'deepgramEndpoint': 'Deepgram: базовый URL',
-      'deepgramEndpointHint': 'Базовый адрес Deepgram или self-hosted развёртывания (по умолчанию https://api.deepgram.com)',
-      'whisperBin': 'Локальный whisper: бинарь',
-      'whisperBinHint': 'используется при автозапуске',
-      'whisperModel': 'Локальный whisper: модель',
-      'whisperAutostart': 'Автозапуск локального whisper',
-      'save': 'Сохранить',
-      'saved': 'Сохранено ✓',
-      'openrouterWarning': 'У OpenRouter нет /audio/transcriptions \u2014 там нужен шаблон openai-chat-audio',
-      'noiseSuppression': 'Аппаратное шумоподавление',
-      'noiseSuppressionHint': 'Включить шумоподавление, эхоподавление и АРУ микрофона в браузере',
-      'contextGlossary': 'Контекстный словарь терминов',
-      'contextGlossaryHint': 'Авто-извлечение кода и терминов из композера для повышения точности STT',
-      'providerDashboard': 'Задержка и здоровье провайдеров',
-      'avgLatency': 'Ср. задержка',
-      'successRate': 'Успешность',
-      'fast': 'Быстро',
-      'normal': 'Норма',
-      'slow': 'Медленно',
-      'error': 'Сбой',
-      'idle': 'Нет вызовов',
-      'play': 'Слушать',
-      'pause': 'Пауза',
-      'listenBack': 'Прослушать запись',
-      'lastRecording': 'Последняя запись',
-      'sensevoiceHint': 'SenseVoice-ONNX / Sherpa-ONNX · сверхбыстрый локальный STT (~50мс)',
-      'sensevoiceEndpoint': 'SenseVoice: endpoint',
-      'sensevoiceEndpointHint': 'POST endpoint сервера sherpa-onnx или совместимого',
-      'sensevoiceBin': 'SenseVoice: бинарь',
-      'sensevoiceBinHint': 'используется при автозапуске',
-      'sensevoiceModel': 'SenseVoice: путь к модели',
-      'sensevoiceAutostart': 'Автозапуск сервера SenseVoice',
-      'visualizerStyle': 'Стиль визуализатора звука',
-      'visualizerStyleHint': 'Анимация волны внутри полоски записи',
-      'visLiquidWave': 'Жидкая волна (Liquid Wave)',
-      'visDynamicOrb': 'Динамическая сфера (Dynamic Orb)',
-      'visBars': 'Классические столбики',
-      'visOff': 'Выключен',
+      'statusTitle': 'Connection & Engine Status',
+      'statusDesc': 'Current runtime connectivity to voice backends and recognition services.',
+      'badgeHostOnline': 'Host online ({ms} ms)',
+      'badgeHostOffline': 'Host unreachable',
+      'badgeWhisperActive': 'Whisper active',
+      'badgeWhisperInactive': 'Whisper offline',
+      'badgeSenseVoiceActive': 'SenseVoice active',
+      'badgeSenseVoiceInactive': 'SenseVoice offline',
+      'badgeProviders': '{count} providers ready',
+      'refreshStats': 'Refresh Stats',
+      'hardwareTitle': 'Hardware & Local Engines',
+      'hardwareDesc': 'Microphone device, local whisper.cpp and SenseVoice runtime settings.',
+      'uiError': 'Voice UI Error:',
+      'retry': 'Retry',
     }
 
-    // Строки нужны и вне компонентов — в обработчиках записи, в подписях
-    // слотов. Поэтому переводчик модульный, а не только через props.
+    // Strings are also needed outside components — in recording handlers and
+    // slot labels — so the translator is module-level, not only via props.
     let moduleT = (key) => key
     const t = (key) => moduleT(key)
 
@@ -339,10 +215,10 @@ window.__ModuleLoader__.load({
       '.dvo-badge-err{background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-state-error-primary);border:1px solid var(--dsw-alias-state-error-primary)}' +
       '.dvo-badge-idle{background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-tertiary)}'
     const cssId = 'dsh-voice/client.module.css'
-    if (typeof document !== 'undefined' && !document.querySelector('style[data-plugin-css="' + cssId + '"]')) {
+    if (typeof document !== 'undefined' && !document.querySelector('style[data-dsh-plugin="dsh-voice"][data-plugin-css="' + cssId + '"]')) {
       const tag = document.createElement('style')
       tag.textContent = CSS
-      tag.setAttribute('data-plugin', 'dsh-voice')
+      tag.setAttribute('data-dsh-plugin', 'dsh-voice')
       tag.dataset.pluginCss = cssId
       document.head.appendChild(tag)
     }
@@ -354,8 +230,8 @@ window.__ModuleLoader__.load({
       error: '',
       rec: null,
       levels: [],
-      pending: null,      // {text, leftMs} — окно отмены режима message
-      lastNote: null,     // {blob, url, mime, text} — последняя запись
+      pending: null,      // {text, leftMs} — message-mode cancel window
+      lastNote: null,     // {blob, url, mime, text} — last recording
       showPlayer: false,
       inputActions: null,
       input: null,
@@ -444,7 +320,7 @@ window.__ModuleLoader__.load({
         body: JSON.stringify(payload),
       })
       let parsed = null
-      try { parsed = await res.json() } catch (e) { /* не json */ }
+      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}`)
       }
@@ -460,13 +336,16 @@ window.__ModuleLoader__.load({
       return s
     }
 
-    // Голосовые команды редактирования (#37): «с новой строки» -> \n и т.п.
-    // Применяются до нормализации, только когда включены в настройках.
+    // Spoken edit commands (#37): "new line" / "с новой строки" -> \n and so on.
+    // Applied before normalization, only when enabled in settings.
+    // Russian phrases match RU STT output; English covers EN dictation.
     const VOICE_COMMANDS = [
       [/(^|[\s,.!?])с новой строки([\s,.!?]|$)/gi, '$1\n$2'],
       [/(^|[\s,.!?])новая строка([\s,.!?]|$)/gi, '$1\n$2'],
       [/(^|[\s,.!?])абзац([\s,.!?]|$)/gi, '$1\n\n$2'],
       [/(^|\s)тире(\s|$)/gi, '$1—$2'],
+      [/(^|[\s,.!?])new line([\s,.!?]|$)/gi, '$1\n$2'],
+      [/(^|[\s,.!?])paragraph([\s,.!?]|$)/gi, '$1\n\n$2'],
     ]
 
     function applyVoiceCommands(text) {
@@ -475,7 +354,7 @@ window.__ModuleLoader__.load({
       return s.replace(/[ \t]+/g, ' ').trim()
     }
 
-    // История вставок для undo (#29-9). Хранится только в браузере.
+    // Insert history for undo (#29-9). Browser-only storage.
     const insertHistory = []
 
     async function undoLastInsert() {
@@ -486,7 +365,7 @@ window.__ModuleLoader__.load({
       const draft = voice.input && typeof voice.input.draft === 'string' ? voice.input.draft : ''
       if (draft === last.after) actions.setDraft(last.before)
       else {
-        // Текст уже менялся руками — вырезаем последнюю вставку как подстроку.
+        // 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+$/, ''))
@@ -512,7 +391,7 @@ window.__ModuleLoader__.load({
       }
     }
 
-    // Как клавиша называется на человеческом языке.
+    // Human-readable key name.
     const KEY_LABELS = {
       Control: 'Ctrl', Alt: 'Alt', Shift: 'Shift', Meta: 'Win',
       Escape: 'Esc',
@@ -522,32 +401,31 @@ window.__ModuleLoader__.load({
       if (!name) return t('keyUnset')
       if (name === 'Space') return t('keySpace')
       if (KEY_LABELS[name]) return KEY_LABELS[name]
-      // Коды вида KeyR и Digit5 показываем без служебной приставки.
+      // 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".
     function keyFromEvent(event) {
       if (['Control', 'Alt', 'Shift', 'Meta'].includes(event.key)) return event.key
       if (event.code) return event.code
       return event.key || ''
     }
 
-    // Объявление о том, что человек заговорил.
+    // 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 } }))
-      } catch (noEvents) { /* окна нет — значит и слушать некому */ }
+      } catch (noEvents) { /* no window — nobody to hear it */ }
       if (voice.settings.beep) playBeep(phase === 'start' ? 880 : 660)
     }
 
-    // Короткий пик через WebAudio: слышно без взгляда на экран (#29-6).
+    // Short WebAudio beep so start/stop is audible without looking (#29-6).
     function playBeep(freq) {
       try {
         const AC = typeof AudioContext !== 'undefined' ? AudioContext
@@ -562,18 +440,18 @@ window.__ModuleLoader__.load({
         gain.gain.exponentialRampToValueAtTime(0.001, ac.currentTime + 0.09)
         osc.connect(gain); gain.connect(ac.destination)
         osc.start(); osc.stop(ac.currentTime + 0.1)
-        osc.onended = () => { try { ac.close() } catch (e) { /* уже закрыт */ } }
-      } catch (noAudio) { /* без звука — не критично */ }
+        osc.onended = () => { try { ac.close() } catch (e) { /* already closed */ } }
+      } catch (noAudio) { /* no audio — not critical */ }
     }
 
-    // ------------------------------------------------- распознавание в браузере
+    // ------------------------------------------------- browser recognition
     //
-    // Отдельная нога, не похожая на все остальные: речь распознаёт сам браузер,
-    // на хост ничего не уходит, ключи не нужны, а текст появляется по словам
-    // прямо во время речи.
+    // A separate leg unlike the others: the browser recognizes speech itself,
+    // nothing is uploaded to the host, no keys are needed, and text appears
+    // word by word while you speak.
     //
-    // Плата за это: в Chrome звук уходит на серверы Google. Поэтому провайдер
-    // никогда не включается сам — только если его прямо поставили в цепочку.
+    // Cost: in Chrome audio goes to Google servers. This provider is never
+    // enabled automatically — only when placed explicitly in a chain.
     function speechRecognitionCtor() {
       if (typeof window === 'undefined') return null
       return window.SpeechRecognition || window.webkitSpeechRecognition || null
@@ -607,29 +485,29 @@ window.__ModuleLoader__.load({
         options.onInterim(interim)
       }
       recognition.onerror = (event) => {
-        // no-speech и aborted — обычная жизнь, а не поломка.
+        // no-speech and aborted are normal life, not failures.
         const code = event && event.error
         if (code === 'no-speech' || code === 'aborted') return
         options.onError(code || t('recognitionError'))
       }
-      // Браузер обрывает распознавание сам: на паузах, по таймауту. Пока нас не
-      // остановили — поднимаем заново, иначе диктовка молча умрёт на первой паузе.
+      // The browser ends recognition on its own (pauses, timeout). Restart
+      // until we stop it, otherwise dictation dies silently on the first pause.
       recognition.onend = () => {
         if (stopped) return
-        try { recognition.start() } catch (alreadyRunning) { /* уже поднято */ }
+        try { recognition.start() } catch (alreadyRunning) { /* already running */ }
       }
 
       try { recognition.start() } catch (cannotStart) {
         options.onError(String(cannotStart && cannotStart.message || cannotStart))
       }
       return {
-        stop() { stopped = true; try { recognition.stop() } catch (already) { /* уже стоит */ } },
-        abort() { stopped = true; try { recognition.abort() } catch (already) { /* уже стоит */ } },
+        stop() { stopped = true; try { recognition.stop() } catch (already) { /* already stopped */ } },
+        abort() { stopped = true; try { recognition.abort() } catch (already) { /* already stopped */ } },
       }
     }
 
-    // Какие провайдеры стоят в цепочке режима — узнаём у хоста один раз.
-    // Нужно только чтобы понять, идти в браузер или писать файл.
+    // Fetch the mode chain from the host once. Only needed to decide whether
+    // to use browser recognition or record a file.
     let chainsPromise = null
     function modeChain(mode) {
       if (!chainsPromise) {
@@ -650,8 +528,8 @@ window.__ModuleLoader__.load({
     // ------------------------------------------------------------ recording
     function teardown(rec) {
       if (!rec) return
-      try { rec.stream.getTracks().forEach((t) => t.stop()) } catch (e) { /* уже остановлен */ }
-      if (rec.audioCtx) { try { rec.audioCtx.close() } catch (e) { /* уже закрыт */ } }
+      try { rec.stream.getTracks().forEach((t) => t.stop()) } catch (e) { /* already stopped */ }
+      if (rec.audioCtx) { try { rec.audioCtx.close() } catch (e) { /* already closed */ } }
     }
 
     function waitStop(recorder) {
@@ -693,7 +571,7 @@ window.__ModuleLoader__.load({
         rec.analyser.fftSize = 128
         src.connect(rec.analyser)
       }
-      // Без timeslice: только тогда каждый stop() даёт самостоятельный webm-файл.
+      // No timeslice: only then each stop() yields a standalone webm file.
       recorder.start()
       return rec
     }
@@ -707,14 +585,14 @@ window.__ModuleLoader__.load({
       return Math.min(1, (sum / data.length / 255) * 2.2)
     }
 
-    // Режет текущую фразу: останавливает рекордер, отправляет готовый файл и
-    // немедленно начинает новую запись тем же рекордером.
+    // Cut the current phrase: stop the recorder, send the finished file and
+    // immediately start a new recording with the same recorder.
     function cutPhrase() {
       const rec = voice.rec
       if (!rec || rec.cutting || rec.closing) return
       rec.cutting = true
       const stopped = waitStop(rec.recorder)
-      try { rec.recorder.stop() } catch (e) { /* уже остановлен */ }
+      try { rec.recorder.stop() } catch (e) { /* already stopped */ }
       stopped.then(async () => {
         const blob = new Blob(rec.chunks, { type: rec.mime })
         rec.chunks = []
@@ -722,17 +600,17 @@ window.__ModuleLoader__.load({
         rec.hadSpeech = false
         rec.streamMs = 0
         if (!rec.closing) {
-          try { rec.recorder.start() } catch (e) { /* поток закрылся */ }
+          try { rec.recorder.start() } catch (e) { /* stream already closed */ }
         }
         rec.cutting = false
-        if (blob.size < 1200) return       // слишком короткий кусок — это не речь
+        if (blob.size < 1200) return       // too short — not speech
         try {
           const out = await sendAudio(blob, rec.mime, 'dictation')
           const text = out && out.text ? out.text : ''
           const delay = Number(voice.settings.sendDelayMs) || 0
           if (text && delay > 0 && !voice.holding) {
-            // Отложенная вставка с окном отмены (#29-5): текст уже вставлен,
-            // окно позволяет его отменить.
+            // Delayed insert with a cancel window (#29-5): text is already
+            // inserted; the window only allows undoing it.
             appendDraft(text)
             voice.set({ phase: 'pending', pending: { text, undoOnly: true, leftMs: delay } })
             return
@@ -744,8 +622,8 @@ window.__ModuleLoader__.load({
       })
     }
 
-    // Распознавание браузером вместо записи файла. Возвращает false, если
-    // браузер этого не умеет, — тогда идём обычным путём.
+    // Browser recognition instead of file recording. Returns false when the
+    // browser cannot do it — then fall back to the normal path.
     function startBrowserLeg(mode, language) {
       if (!browserRecognitionAvailable()) return false
       const finals = []
@@ -755,8 +633,8 @@ window.__ModuleLoader__.load({
         continuous: true,
         onInterim: (text) => {
           voice.caption = text; voice.notify()
-          // Wake-word (#45): если interim начинается с ключевой фразы —
-          // обрываем прослушивание browser и уходим в обычную запись.
+          // Wake-word (#45): if interim starts with the trigger phrase, stop
+          // browser listening and switch to normal recording.
           const ww = String(voice.settings.wakeWord || '').trim().toLowerCase()
           if (ww && mode === 'dictation' && !voice.rec) {
             const t = String(text || '').trim().toLowerCase()
@@ -779,13 +657,12 @@ window.__ModuleLoader__.load({
         onFinal: (text) => {
           finals.push(text)
           voice.caption = ''
-          // Диктовка дописывает сразу, голосовое копит до отпускания.
+          // Dictation appends immediately; messages accumulate until release.
           if (mode === 'dictation') appendDraft(text)
           else voice.notify()
         },
         onError: (reason) => {
-          // Браузер отказал уже после старта — честно говорим об этом, а не
-          // делаем вид, что слушаем.
+          // Browser failed after start — say so instead of pretending to listen.
           voice.browser = null
           voice.set({ phase: 'error', error: t('browserFailed') + reason })
         },
@@ -797,12 +674,12 @@ window.__ModuleLoader__.load({
 
     function startRecording(mode) {
       if (voice.phase !== 'idle' && voice.phase !== 'error') return
-      // Кричим до открытия микрофона, а не после: чем раньше замолчит
-      // озвучка, тем меньше её попадёт в запись.
+      // Announce before opening the mic: the sooner playback mutes, the less
+      // of it ends up in the recording.
       announceVoice('start')
       voice.set({ phase: 'recording', mode, error: '', levels: [], caption: '' })
       modeChain(mode).then((info) => {
-        // Браузерная нога — только если её прямо поставили первой в цепочке.
+        // Browser leg only when it is explicitly first in the chain.
         if (info.chain[0] === 'browser' && startBrowserLeg(mode, info.language)) return
         openMic(mode)
           .then((rec) => {
@@ -820,12 +697,12 @@ window.__ModuleLoader__.load({
     function startDictation() { startRecording('dictation') }
     function startMessage() { startRecording('message') }
 
-    // --------------------------------------------------------- удержание
+    // --------------------------------------------------------- hold gesture
     //
-    // Два жеста одной кнопкой: короткое нажатие включает запись до второго
-    // нажатия (как было), удержание пишет ровно пока держишь. Отпустил — ушло.
+    // Two gestures on one button: a short click toggles recording until the
+    // next click; hold records only while pressed. Release sends.
     //
-    // Различаем по времени: если отпустили раньше порога — это клик.
+    // Distinguished by time: release before the threshold is a click.
     const HOLD_THRESHOLD_MS = 350
 
     const hold = { active: false, mode: null, startedAt: 0, armed: false }
@@ -836,7 +713,7 @@ window.__ModuleLoader__.load({
       hold.mode = mode
       hold.startedAt = Date.now()
       hold.active = false
-      // Запись начинаем сразу: ждать порога — значит потерять первое слово.
+      // Start recording immediately: waiting for the threshold loses the first word.
       startRecording(mode)
       voice.holding = true
       voice.notify()
@@ -848,15 +725,15 @@ window.__ModuleLoader__.load({
       hold.armed = false
       hold.active = false
       voice.holding = false
-      // Короткое нажатие — это клик: запись уже идёт, оставляем её включённой,
-      // остановит второе нажатие.
+      // Short press is a click: recording is already on, leave it running;
+      // the second click will stop it.
       if (!cancelled && heldMs < HOLD_THRESHOLD_MS) { voice.notify(); return }
       if (cancelled) cancelCurrent()
       else stopCurrent()
     }
 
-    // Горячая клавиша: держать её удобнее, чем целиться мышью. Пока клавиша
-    // зажата — идёт запись, Esc отменяет.
+    // Hotkey: holding a key is easier than aiming the mouse. While the key is
+    // down we record; Escape cancels.
     function hotkeyMatches(event, name) {
       if (name === 'Control') return event.key === 'Control'
       if (name === 'Alt') return event.key === 'Alt'
@@ -868,8 +745,8 @@ window.__ModuleLoader__.load({
       if (typeof document === 'undefined' || !keyName) return () => {}
       const down = (event) => {
         if (event.repeat) return
-        // В поле ввода горячая клавиша-модификатор не мешает: она сама по себе
-        // ничего не печатает. А вот обычную букву перехватывать нельзя.
+        // A modifier hotkey does not fight the text field: modifiers do not
+        // type. A plain letter key must not be hijacked while typing.
         if (hotkeyMatches(event, keyName)) beginHold(mode)
       }
       const up = (event) => {
@@ -901,12 +778,12 @@ window.__ModuleLoader__.load({
       if (!rec) { voice.set({ phase: 'idle', error: '' }); return }
       rec.closing = true
       const stopped = waitStop(rec.recorder)
-      try { rec.recorder.stop() } catch (e) { /* уже остановлен */ }
+      try { rec.recorder.stop() } catch (e) { /* already stopped */ }
       stopped.then(() => { teardown(rec); voice.rec = null; voice.set({ phase: 'idle', error: '' }) })
     }
 
-    // Останов по второму нажатию: диктовка досылает хвост, голосовое —
-    // отправляет всю запись и открывает окно отмены.
+    // Stop on the second click: dictation flushes the tail; a voice message
+    // sends the whole recording and opens the cancel window.
     function stopCurrent() {
       announceVoice('end')
       if (voice.browser) {
@@ -921,7 +798,7 @@ window.__ModuleLoader__.load({
           appendDraft(said)
           voice.set({ phase: 'pending', pending: { text: said, leftMs: voice.settings.autoSendMs } })
         } else {
-          // Диктовка дописывала по ходу — добавлять нечего.
+          // Dictation already appended while speaking — nothing extra to add.
           voice.set({ phase: 'idle' })
         }
         return
@@ -931,17 +808,17 @@ window.__ModuleLoader__.load({
       rec.closing = true
       const mode = rec.mode
       const stopped = waitStop(rec.recorder)
-      try { rec.recorder.stop() } catch (e) { /* уже остановлен */ }
+      try { rec.recorder.stop() } catch (e) { /* already stopped */ }
       stopped.then(async () => {
         const blob = new Blob(rec.chunks, { type: rec.mime })
         teardown(rec)
         voice.rec = null
         if (blob.size < 1200) { voice.set({ phase: 'idle' }); return }
         if (voice.lastNote && voice.lastNote.url) {
-          try { URL.revokeObjectURL(voice.lastNote.url) } catch (e) { /* игнор */ }
+          try { URL.revokeObjectURL(voice.lastNote.url) } catch (e) { /* ignore */ }
         }
         let noteUrl = ''
-        try { noteUrl = URL.createObjectURL(blob) } catch (e) { /* игнор */ }
+        try { noteUrl = URL.createObjectURL(blob) } catch (e) { /* ignore */ }
         voice.lastNote = { blob, url: noteUrl, mime: rec.mime, text: '' }
         voice.set({ phase: 'processing' })
         try {
@@ -967,7 +844,7 @@ window.__ModuleLoader__.load({
       voice.set({ phase: 'idle' })
       const actions = voice.inputActions
       if (!actions || typeof actions.submit !== 'function') return
-      // Полировка всего draft перед отправкой (#46). Ошибка не блокирует.
+      // Polish the whole draft before submit (#46). Errors do not block.
       if (voice.settings.polishSend) {
         const run = async () => {
           try {
@@ -983,15 +860,15 @@ window.__ModuleLoader__.load({
                 actions.setDraft(parsed.text.trim())
               }
             }
-          } catch (e) { /* полировка best-effort */ }
+          } catch (e) { /* polish is best-effort */ }
         }
-        run().finally(() => setTimeout(() => { try { actions.submit() } catch (e) { /* занят */ } }, 0))
+        run().finally(() => setTimeout(() => { try { actions.submit() } catch (e) { /* busy */ } }, 0))
         return
       }
-      setTimeout(() => { try { actions.submit() } catch (e) { /* композер занят */ } }, 0)
+      setTimeout(() => { try { actions.submit() } catch (e) { /* composer busy */ } }, 0)
     }
 
-    // Голосовые команды сессии (#48): чистые «отправь/отмени/стоп/продолжи».
+    // Session voice commands (#48): clean "send/cancel/stop/continue".
     function runSessionCommand(cmd) {
       const actions = voice.inputActions
       voice.set({ phase: 'idle', pending: null })
@@ -1002,7 +879,7 @@ window.__ModuleLoader__.load({
           break
         case 'cancel':
         case 'stop':
-          // Сбрасываем ожидание/запись; текст draft намеренно не трогаем.
+          // Clear wait/recording; leave the draft text intentionally untouched.
           break
         default:
           break
@@ -1029,7 +906,7 @@ window.__ModuleLoader__.load({
         React.createElement('button', {
           type: 'button', className: 'dvo-btn', 'data-err': err ? '1' : '0',
           title: err ? v.error : t('messageBtn'),
-          // Удержание: пишет, пока держишь; увёл курсор далеко вверх — отмена.
+          // Hold: record while pressed; leaving the control cancels.
           onPointerDown: (e) => { e.preventDefault(); beginHold('message') },
           onPointerUp: () => endHold(false),
           onPointerLeave: () => { if (hold.armed) endHold(true) },
@@ -1045,7 +922,26 @@ window.__ModuleLoader__.load({
     }
 
     // ----------------------------------------------------------- visualizers
-    // 1. Liquid Wave: органическая текучая многослойная волна
+    function accentColor(fallback) {
+      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
+      } catch (noTheme) { /* canvas-only fallback */ }
+      return fallback || voice.waveColor || 'currentColor'
+    }
+    function softColor(fallback) {
+      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
+      } catch (noTheme) { /* fallback */ }
+      return fallback || voice.waveColor || 'currentColor'
+    }
+    // 1. Liquid Wave: organic multi-layer wave
     function drawLiquidWave(g, w, h, levels, color, time) {
       const midY = h / 2
       const curLevel = levels.length ? levels[levels.length - 1] : 0
@@ -1064,7 +960,7 @@ window.__ModuleLoader__.load({
 
         const grad = g.createLinearGradient(0, 0, w, 0)
         grad.addColorStop(0, color)
-        grad.addColorStop(0.5, '#38bdf8')
+        grad.addColorStop(0.5, accentColor(color))
         grad.addColorStop(1, color)
         g.strokeStyle = grad
         g.lineWidth = layerIdx === 2 ? 2.5 : 1.5
@@ -1083,7 +979,7 @@ window.__ModuleLoader__.load({
       g.globalAlpha = 1
     }
 
-    // 2. Dynamic Orb: интерактивная пульсирующая сфера по центру
+    // 2. Dynamic Orb: interactive pulsing sphere in the center
     function drawDynamicOrb(g, w, h, levels, color, time) {
       const cx = w / 2
       const cy = h / 2
@@ -1103,7 +999,7 @@ window.__ModuleLoader__.load({
       const rRing = 14 + smoothLevel * 14 + Math.sin(time * 0.08) * 3
       g.beginPath()
       g.arc(cx, cy, rRing, 0, Math.PI * 2)
-      g.strokeStyle = '#38bdf8'
+      g.strokeStyle = accentColor(color)
       g.globalAlpha = 0.35 + smoothLevel * 0.4
       g.lineWidth = 1.5
       g.stroke()
@@ -1119,8 +1015,8 @@ window.__ModuleLoader__.load({
 
       const rCore = 6 + smoothLevel * 8 + Math.sin(time * 0.12) * 1.5
       const radial = g.createRadialGradient(cx, cy, 1, cx, cy, rCore + 4)
-      radial.addColorStop(0, '#ffffff')
-      radial.addColorStop(0.4, '#38bdf8')
+      radial.addColorStop(0, softColor(color))
+      radial.addColorStop(0.4, accentColor(color))
       radial.addColorStop(1, color)
       g.beginPath()
       g.arc(cx, cy, rCore, 0, Math.PI * 2)
@@ -1131,7 +1027,7 @@ window.__ModuleLoader__.load({
       g.globalAlpha = 1
     }
 
-    // 3. Classic Bars: классические вертикальные столбики
+    // 3. Classic Bars: classic vertical bars
     function drawClassicBars(g, w, h, levels, color) {
       const midY = h / 2
       for (let i = 0; i < levels.length && i * 7 < w; i++) {
@@ -1155,7 +1051,7 @@ window.__ModuleLoader__.load({
       voice.input = props.input
       const ctx = props.ctx
 
-      // VAD: копим тишину и режем фразу, когда пауза превысила порог.
+      // VAD: accumulate silence and cut the phrase when the pause exceeds the threshold.
       React.useEffect(() => {
         if (v.phase !== 'recording') return
         const tick = 50
@@ -1172,16 +1068,16 @@ window.__ModuleLoader__.load({
           const adapt = Number(voice.settings.vadAdapt) || 0
           let effectiveVad = Number(voice.settings.vadSilenceMs) || 700
           if (adapt > 0 && rec.hadSpeech) {
-            // Адаптивный порог (#41): считаем плотность речи за последние
-            // ~1s (20 сэмплов). Плотная речь -> порог ниже (точнее режем),
-            // паузная -> порог растёт к базе (не режем на вдохе).
+            // Adaptive threshold (#41): speech density over ~1s (20 samples).
+            // Dense speech -> lower threshold (cut more precisely);
+            // pause-heavy -> threshold rises toward base (do not cut on breaths).
             const win = voice.levels.slice(-20)
             const density = win.length ? win.filter((v) => v > 0.06).length / win.length : 0
             const k = adapt * (density - 0.5) * 2
             effectiveVad = Math.max(150, Math.round(Number(voice.settings.vadSilenceMs) * (1 - k)))
           }
-          // Непрерывный режим (#40): режем по таймеру непрерывной речи,
-          // не дожидаясь длинной паузы.
+          // Continuous mode (#40): cut on a timer while speech continues,
+          // without waiting for a long pause.
           const stream = !!voice.settings.stream && rec.mode === 'dictation'
           if (stream && rec.hadSpeech && !rec.cutting) {
             rec.streamMs += tick
@@ -1198,7 +1094,7 @@ window.__ModuleLoader__.load({
         return () => dispose()
       }, [v.phase])
 
-      // Анимация осциллограммы / визуализатора.
+      // Waveform / visualizer animation.
       React.useEffect(() => {
         if (v.phase !== 'recording') return
         let frame = 0
@@ -1239,7 +1135,7 @@ window.__ModuleLoader__.load({
         return () => dispose()
       }, [v.phase])
 
-      // Окно отмены режима message.
+      // Message-mode cancel window.
       React.useEffect(() => {
         if (v.phase !== 'pending') return
         const tick = 100
@@ -1247,8 +1143,8 @@ window.__ModuleLoader__.load({
           const p = voice.pending
           if (!p) return
           if (p.undoOnly) {
-            // Режим «только отмена вставки» (#29-5): по истечении окна просто
-            // прячем панель; текст либо остался, либо уже откатили руками.
+            // Undo-only mode (#29-5): when the window expires just hide the
+            // panel; the text either stayed or was already undone.
             p.leftMs -= tick
             if (p.leftMs <= 0) voice.set({ phase: 'idle' })
             else voice.notify()
@@ -1299,8 +1195,8 @@ window.__ModuleLoader__.load({
         const inBrowser = !!voice.browser
         const rec = voice.rec
         const hint = v.mode === 'dictation' ? t('dictationPill') : t('messagePill')
-        // Живая подпись: что слышно прямо сейчас. Пока браузер не выдал
-        // окончательный кусок, текст черновой и меняется на глазах.
+        // 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()),
@@ -1327,7 +1223,7 @@ window.__ModuleLoader__.load({
       if (v.phase === 'pending') {
         const left = Math.max(0, Math.ceil((voice.pending ? voice.pending.leftMs : 0) / 1000))
         if (voice.pending && voice.pending.undoOnly) {
-          // Окно отмены отложенной вставки диктовки (#29-5).
+          // 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')),
             React.createElement('button', {
@@ -1375,8 +1271,8 @@ window.__ModuleLoader__.load({
 
     // --------------------------------------------------------------- slots
     function registerComposer(ctx) {
-      // Горячая клавиша живёт всё время, пока плагин применён, и меняется без
-      // перезапуска: карточка настроек кричит в окно, композер перечитывает.
+      // The hotkey lives for as long as the plugin is applied and can change
+      // without restart: the settings card broadcasts and the composer reloads.
       ctx.effect(() => {
         let dispose = () => {}
         let alive = true
@@ -1390,7 +1286,7 @@ window.__ModuleLoader__.load({
               dispose = () => {}
               const key = data && data.hotkey
               if (key) dispose = installHotkey(ctx, key, 'message')
-              // Новые настройки композеру нужны без открытия карточки.
+              // The composer needs fresh settings without opening the card.
               Object.assign(voice.settings, {
                 beep: !!(data && data.beep),
                 micDeviceId: String((data && data.micDeviceId) || ''),
@@ -1409,7 +1305,7 @@ window.__ModuleLoader__.load({
                 visualizerStyle: (data && data.visualizerStyle) || 'liquid-wave',
               })
             })
-            .catch(() => { /* без подсказки хоста клавиши просто не будет */ })
+            .catch(() => { /* no host hint — no hotkey */ })
         }
 
         reload()
@@ -1419,7 +1315,7 @@ window.__ModuleLoader__.load({
           window.removeEventListener('dsh-voice:settings-saved', reload)
           dispose()
         }
-      }, 'dsh-voice: горячая клавиша удержания')
+      }, 'dsh-voice: hold hotkey')
 
       ctx.slots.inject('conversation.input.right', () => ctx.slots.register(
         { name: 'conversation.input.right', id: '@goodandready/dsh-voice', order: 6, label: () => t('title') },
@@ -1434,38 +1330,69 @@ window.__ModuleLoader__.load({
     // ------------------------------------------------------- settings page
     const BUILTIN = [
       'browser', 'deepgram', 'groq', 'hf', 'local-whisper', 'sensevoice',
-      // Заготовки: адрес и модель уже прописаны на хосте, нужен только ключ.
+      // Presets: address and model are filled on the host; only a key is needed.
       'openai', 'siliconflow', 'deepinfra', 'fireworks', 'mistral', 'openrouter',
     ]
     const TEMPLATES = ['openai-transcriptions', 'openai-chat-audio']
-    const MODEL_HINT = {
-      browser: t('browserHint'),
-      openai: t('openaiHint'),
-      siliconflow: t('siliconflowHint'),
-      deepinfra: t('deepinfraHint'),
-      fireworks: t('fireworksHint'),
-      mistral: t('mistralHint'),
-      openrouter: t('openrouterHint'),
-      deepgram: 'nova-2', groq: 'whisper-large-v3-turbo',
-      hf: 'openai/whisper-large-v3', 'local-whisper': t('localHint'),
-      sensevoice: t('sensevoiceHint'),
+    // Resolve at render time: t() must not be captured before locale bind.
+    const MODEL_HINT_KEYS = {
+      browser: 'browserHint',
+      openai: 'openaiHint',
+      siliconflow: 'siliconflowHint',
+      deepinfra: 'deepinfraHint',
+      fireworks: 'fireworksHint',
+      mistral: 'mistralHint',
+      openrouter: 'openrouterHint',
+      'local-whisper': 'localHint',
+      sensevoice: 'sensevoiceHint',
+    }
+    const MODEL_HINT_STATIC = {
+      deepgram: 'nova-2',
+      groq: 'whisper-large-v3-turbo',
+      hf: 'openai/whisper-large-v3',
+    }
+    function modelHint(provider) {
+      const key = MODEL_HINT_KEYS[provider]
+      if (key) return t(key)
+      return MODEL_HINT_STATIC[provider] || ''
     }
     const LANGS = ['auto', 'ru', 'en', 'uk', 'de']
 
     const SET_CSS =
-      '.dvs-wrap{display:flex;flex-direction:column;gap:22px;padding:4px 0;max-width:720px}' +
+      '.cb-page{display:flex;flex-direction:column;gap:18px;padding:4px 0 24px;max-width:960px}' +
+      '.cb-section-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}' +
+      '.cb-section-title{font-size:15px;font-weight:600;color:var(--dsw-alias-label-primary);display:flex;align-items:center;justify-content:space-between}' +
+      '.cb-section-desc{font-size:13px;color:var(--dsw-alias-label-secondary);margin-top:-4px;line-height:1.4}' +
+      '.cb-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}' +
+      '.cb-grid-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:12px}' +
+      '.cb-badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);display:inline-flex;align-items:center;gap:4px;font-weight:500}' +
+      '.cb-badge-ok{border-color:var(--dsw-alias-state-success-primary);color:var(--dsw-alias-state-success-primary);background:rgba(16,185,129,0.08)}' +
+      '.cb-badge-warn{border-color:var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);background:rgba(245,158,11,0.08)}' +
+      '.cb-badge-bad{border-color:var(--dsw-alias-state-error-primary);color:var(--dsw-alias-state-error-primary);background:rgba(239,68,68,0.08)}' +
+      '.cb-input{height:34px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 10px;font-size:13px;box-sizing:border-box}' +
+      '.cb-input:focus{outline:none;border-color:var(--dsw-alias-state-brand-primary)}' +
+      '.cb-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:6px 12px;font-size:13px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .15s ease}' +
+      '.cb-btn:hover:not(:disabled){background:var(--dsw-alias-bg-layer-4, var(--dsw-alias-bg-layer-2));border-color:var(--dsw-alias-label-dimmed, var(--dsw-alias-border-l2))}' +
+      '.cb-btn-primary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3);border-color:transparent}' +
+      '.cb-btn-primary:hover:not(:disabled){background:var(--dsw-alias-label-primary) !important;color:var(--dsw-alias-bg-layer-3) !important;opacity:0.88}' +
+      '.cb-btn-danger{color:var(--dsw-alias-state-error-primary);border-color:rgba(239,68,68,0.3)}' +
+      '.cb-btn-mini{border:1px solid var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-primary);border-radius:6px;width:28px;height:28px;cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:13px}' +
+      '.cb-btn-mini:hover:not(:disabled){background:var(--dsw-alias-bg-layer-2)}' +
+      '.cb-field{display:flex;flex-direction:column;gap:6px;padding:6px 0;font-size:13px;color:var(--dsw-alias-label-primary)}' +
+      '.cb-field select,.cb-field input[type="text"],.cb-field input[type="number"],.cb-field textarea{height:34px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 10px;font-size:13px;box-sizing:border-box}' +
+      '.cb-field textarea{height:auto;padding:8px 10px;font-family:inherit}' +
+      '.cb-check-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--dsw-alias-label-primary);user-select:none}' +
+      '.cb-check-label input[type="checkbox"]{width:16px;height:16px;cursor:pointer}' +
+      '.cb-alert-err{padding:10px 14px;border-radius:8px;background:rgba(239,68,68,0.1);color:var(--dsw-alias-state-error-primary);font-size:13px}' +
+      '.dvs-wrap{display:flex;flex-direction:column;gap:18px;padding:4px 0;max-width:960px}' +
       '.dvs-block{display:flex;flex-direction:column;gap:10px}' +
       '.dvs-h{font-size:14px;font-weight:600;color:var(--dsw-alias-label-primary)}' +
       '.dvs-sub{font-size:12px;color:var(--dsw-alias-label-secondary)}' +
       '.dvs-row{display:flex;gap:8px;align-items:center}' +
-      '.dvs-row select,.dvs-row input{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);color:var(--dsw-alias-label-primary);border-radius:6px;padding:6px 8px;font-size:13px}' +
+      '.dvs-row select,.dvs-row input{background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary);border-radius:8px;padding:6px 10px;font-size:13px}' +
       '.dvs-row .dvs-model{flex:1}' +
-      '.dvs-field{display:flex;flex-direction:column;gap:6px;padding:12px 0;font-size:12px;color:var(--dsw-alias-label-secondary)}' +
-      '.dvs-field input,.dvs-field select{height:34px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px}' +
-      '.dvs-mini{border:1px solid var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-primary);border-radius:6px;width:28px;height:28px;cursor:pointer;flex:none}' +
-      '.dvs-save{appearance:none;font:inherit;cursor:pointer;border:1px solid transparent;border-radius:8px;padding:5px 14px;font-size:13px;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}' +
-      '.dvs-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:10px}' +
-      '.dvs-card input,.dvs-card select{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);color:var(--dsw-alias-label-primary);border-radius:6px;padding:6px 8px;font-size:13px}' +
+      '.dvs-card{display:flex;flex-direction:column;gap:8px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);border-radius:10px;padding:12px}' +
+      '.dvs-card input,.dvs-card select{background:var(--dsw-alias-bg-layer-3);border:1px solid var(--dsw-alias-border-l1);color:var(--dsw-alias-label-primary);border-radius:6px;padding:6px 8px;font-size:13px}' +
       '.dvs-wait{font-size:13px;color:var(--dsw-alias-label-secondary);line-height:1.5;max-width:520px}' +
       '.dvs-ok{font-size:12px;color:var(--dsw-alias-state-success-primary)}' +
       '.dvs-bad{font-size:12px;color:var(--dsw-alias-state-error-primary)}' +
@@ -1476,17 +1403,17 @@ window.__ModuleLoader__.load({
       '.dvo-pdesc{color:var(--dsw-alias-label-secondary);font-size:13px}' +
       '.dvo-pchev{flex:none;display:flex;color:var(--dsw-alias-label-secondary);transition:transform .15s ease}' +
       '.dvo-pcardOpen .dvo-pchev{transform:rotate(180deg)}' +
-      '.dvo-pbody{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}'
+      '.dvo-pbody{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:12px}'
     const setCssId = 'dsh-voice/settings.module.css'
-    if (typeof document !== 'undefined' && !document.querySelector('style[data-plugin-css="' + setCssId + '"]')) {
+    if (typeof document !== 'undefined' && !document.querySelector('style[data-dsh-plugin="dsh-voice"][data-plugin-css="' + setCssId + '"]')) {
       const tag = document.createElement('style')
       tag.textContent = SET_CSS
-      tag.setAttribute('data-plugin', 'dsh-voice')
+      tag.setAttribute('data-dsh-plugin', 'dsh-voice')
       tag.dataset.pluginCss = setCssId
       document.head.appendChild(tag)
     }
 
-    // Редактор одной цепочки: строки «провайдер + модель» с перестановкой.
+    // One chain editor: provider+model rows with reordering.
     function ChainEditor(props) {
       const rows = Array.isArray(props.value) ? props.value : []
       const change = (i, patch) => {
@@ -1513,7 +1440,7 @@ window.__ModuleLoader__.load({
             .map((p) => React.createElement('option', { key: p, value: p }, p))),
           React.createElement('input', {
             className: 'dvs-model', value: row.model || '', disabled: !props.writable,
-            placeholder: MODEL_HINT[row.provider] || '', onChange: (e) => change(i, { model: e.target.value }),
+            placeholder: modelHint(row.provider), onChange: (e) => change(i, { model: e.target.value }),
           }),
           React.createElement('button', { type: 'button', className: 'dvs-mini', title: t('up'), disabled: !props.writable, onClick: () => move(i, -1) }, '↑'),
           React.createElement('button', { type: 'button', className: 'dvs-mini', title: t('down'), disabled: !props.writable, onClick: () => move(i, 1) }, '↓'),
@@ -1526,7 +1453,7 @@ window.__ModuleLoader__.load({
       )
     }
 
-    // Свои провайдеры: имя, шаблон API, куда ходить и чем авторизоваться.
+    // Custom providers: name, API template, where to call, how to authorize.
     function CustomEditor(props) {
       const rows = Array.isArray(props.value) ? props.value : []
       const change = (i, patch) => props.onChange(rows.map((r, k) => (k === i ? Object.assign({}, r, patch) : r)))
@@ -1575,27 +1502,61 @@ window.__ModuleLoader__.load({
       )
     }
 
+        function createErrorBoundary() {
+      if (!React || typeof React.Component !== 'function') {
+        return function NoopBoundary(props) { return props?.children || null }
+      }
+      return class ErrorBoundary extends React.Component {
+        constructor(props) {
+          super(props)
+          this.state = { hasError: false, error: null }
+        }
+        static getDerivedStateFromError(error) {
+          return { hasError: true, error }
+        }
+        componentDidCatch(error, errorInfo) {
+          console.error('[dsh-voice] React Error:', error, errorInfo)
+        }
+        render() {
+          if (this.state.hasError) {
+            return React.createElement(
+              'div',
+              { className: 'cb-alert-err', style: { margin: '12px 0', padding: '14px', borderRadius: '8px' } },
+              React.createElement('div', { style: { fontWeight: 600, marginBottom: '6px' } }, '⚠️ ' + t('uiError')),
+              React.createElement('div', { style: { fontSize: '12px', wordBreak: 'break-all' } }, String(this.state.error?.message || this.state.error)),
+              React.createElement(
+                'button',
+                {
+                  type: 'button',
+                  className: 'cb-btn',
+                  style: { marginTop: '10px', fontSize: '12px', padding: '4px 10px' },
+                  onClick: () => this.setState({ hasError: false, error: null }),
+                },
+                t('retry'),
+              ),
+            )
+          }
+          return this.props?.children || null
+        }
+      }
+    }
+    const ErrorBoundary = createErrorBoundary()
+
     function VoiceSection(props) {
       const t = (props && props.t) || moduleT
       const ctx = props.ctx
-      // На странице, открытой не с localhost, ядро отключает настройки целиком:
-      // общий вид документа не читается, каждый раздел получает "unavailable",
-      // запись выбрасывается. Сервер это ограничение не разделяет, и плагин
-      // dsh-lanmode поднимает ту же механику поверх тех же вызовов. Если он
-      // установлен — берём его службу, иначе ядровую: на loopback-странице она
-      // работает штатно.
+      // 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
+      // dsh-lanmode rebuilds the same mechanics on the same calls. Prefer its
+      // service when installed, otherwise the kernel one (fine on loopback).
       const scope = ((ctx.get && ctx.get('lanSettings')) || ctx.settingsScope).bind({ namespace: NS })
       const [snap, setSnap] = React.useState(null)
       const [draft, setDraft] = React.useState(null)
       const [saved, setSaved] = React.useState(false)
       const [err, setErr] = React.useState('')
 
-      // Выбор клавиши: не поле для ввода имени, а «нажмите ту, которую хотите».
-      // Имена вроде KeyR человек знать не обязан.
-      //
-      // Хуки объявлены здесь, выше всех возвратов: если объявить их ниже, при
-      // неготовых настройках карточка вернётся раньше, хуков окажется меньше,
-      // и React снимет весь раздел с ошибкой.
+      // Hotkey picker: not a name field — press the key you want.
       const [catching, setCatching] = React.useState(false)
       React.useEffect(() => {
         if (!catching) return undefined
@@ -1627,39 +1588,23 @@ window.__ModuleLoader__.load({
           .catch(() => {})
       }, [])
 
-      // Снимок приходит со статусом, и он важнее самого значения.
-      //   loading      — ответа хоста ещё нет;
-      //   unavailable  — хост ответил, но наш namespace ему пока неизвестен:
-      //                  так бывает, если страницу открыли в первые секунды
-      //                  после старта, пока плагины ещё регистрируются;
-      //   ready        — значения на месте.
-      // При unavailable поле writable берётся из документа и остаётся true,
-      // поэтому без проверки статуса карточка рисует пустую, но с виду рабочую
-      // форму — именно так этот баг и выглядел.
       const ready = !!snap && snap.status === 'ready'
       const value = ready && snap.value ? snap.value : {}
       const writable = ready && snap.writable !== false
 
-      // Зеркало настроек в браузере перечитывается только на запись значения и
-      // на переподключение; появление namespace таким сигналом не считается.
-      // Значит само оно не починится — просим перечитать, пока не готово.
-      // Зеркало общее, так что это чинит и остальные разделы настроек.
       React.useEffect(() => {
         if (ready) return undefined
         let tries = 0
         const timer = setInterval(() => {
           if (tries >= 15) { clearInterval(timer); return }
           tries += 1
-          try { ((ctx.get && ctx.get('lanSettings')) || ctx.settingsScope).describe().load() } catch (e) { /* сервис ещё не поднялся */ }
+          try { ((ctx.get && ctx.get('lanSettings')) || ctx.settingsScope).describe().load() } catch (e) { /* service not up yet */ }
         }, 1000)
         return () => clearInterval(timer)
       }, [ready])
 
-      // Черновик сеем только из готового снимка. Раньше он заполнялся из
-      // первого пришедшего, и пустой замораживался навсегда: следующий снимок
-      // уже не пересевал его, и карточка оставалась пустой до перезагрузки.
       React.useEffect(() => { if (ready && draft === null) setDraft(JSON.parse(JSON.stringify(value))) }, [ready, draft, value])
-      // Клиент должен знать порог VAD и окно отмены — они живут в тех же настройках.
+
       React.useEffect(() => {
         if (!ready) return
         voice.settings = Object.assign({}, voice.settings, {
@@ -1683,23 +1628,34 @@ window.__ModuleLoader__.load({
         })
       }, [ready, value, snap])
 
-      const [statsData, setStatsData] = React.useState({})
-      React.useEffect(() => {
-        let alive = true
-        fetch('/dsh-voice/status', { cache: 'no-store' })
+      const [statusData, setStatusData] = React.useState(null)
+      const [statusLatency, setStatusLatency] = React.useState(null)
+      const fetchStatus = React.useCallback(() => {
+        const start = performance.now()
+        const ctrl = new AbortController()
+        const tId = setTimeout(() => ctrl.abort(), 5000)
+        fetch('/dsh-voice/status', { cache: 'no-store', signal: ctrl.signal })
           .then((r) => r.json())
           .then((data) => {
-            if (alive && data && data.providerStats) {
-              setStatsData(data.providerStats)
+            clearTimeout(tId)
+            setStatusLatency(Math.round(performance.now() - start))
+            if (data && data.ok) {
+              setStatusData(data)
             }
           })
-          .catch(() => {})
-        return () => { alive = false }
+          .catch(() => {
+            clearTimeout(tId)
+            setStatusLatency(null)
+          })
       }, [])
 
+      React.useEffect(() => {
+        fetchStatus()
+      }, [fetchStatus])
+
       if (!ready) {
         const waiting = !snap || snap.status === 'loading'
-        return React.createElement('div', { className: 'dvs-wrap' },
+        return React.createElement('div', { className: 'cb-page' },
           React.createElement('div', { className: 'dvs-wait' }, waiting
             ? t('loadingSettings')
             : t('notReady1')
@@ -1719,11 +1675,6 @@ window.__ModuleLoader__.load({
         setErr(''); setSaved(false)
         if (!draft) return
 
-        // Поля пишутся по одному, и раньше первая же неудача обрывала цикл:
-        // остальные поля не записывались, композер не получал сигнала
-        // перечитать клавишу, а на кнопку это было похоже на «ничего не
-        // происходит». Теперь пишутся все, а неудачи собираются и называются
-        // поимённо — иначе непонятно, какое поле виновато.
         const failed = []
         for (const k of Object.keys(draft)) {
           try {
@@ -1748,12 +1699,11 @@ window.__ModuleLoader__.load({
           contextGlossary: draft.contextGlossary !== false,
           visualizerStyle: draft.visualizerStyle || 'liquid-wave',
         })
-        // Композер держит обработчик клавиши: пусть перечитает настройку,
-        // иначе новая клавиша заработает только после перезагрузки страницы.
-        try { window.dispatchEvent(new CustomEvent('dsh-voice:settings-saved')) } catch (noEvents) { /* некому */ }
+        try { window.dispatchEvent(new CustomEvent('dsh-voice:settings-saved')) } catch (noEvents) { /* nobody */ }
 
         if (failed.length) { setErr(t('saveFailed') + ' ' + failed.join('; ')); return }
         setSaved(true); setTimeout(() => setSaved(false), 2000)
+        fetchStatus()
       }
 
       const modeVal = (mode, key, fallback) => {
@@ -1761,174 +1711,270 @@ window.__ModuleLoader__.load({
         return m && m[key] !== undefined ? m[key] : fallback
       }
 
-      // Имена своих провайдеров берём из черновика, чтобы только что
-      // добавленный сразу появлялся в списках цепочек.
       const chainOptions = BUILTIN.concat(
         (draft && Array.isArray(draft.customProviders) ? draft.customProviders : [])
           .map((c) => String(c && c.key || '').trim())
           .filter((k) => k && BUILTIN.indexOf(k) < 0),
       )
 
-      const hotkeyField = () => React.createElement('label', { className: 'dvs-field' },
-        t('hotkey'),
-        React.createElement('div', { className: 'dvs-row' },
+      const hotkeyField = () => React.createElement('div', { className: 'cb-field' },
+        React.createElement('label', null, t('hotkey')),
+        React.createElement('div', { className: 'cb-row' },
           React.createElement('button', {
-            type: 'button', className: 'dvs-save', disabled: !writable,
+            type: 'button', className: 'cb-btn cb-btn-primary', disabled: !writable,
             onClick: () => setCatching(true),
           }, catching ? t('pressKey') : keyLabel(draft && draft.hotkey)),
           React.createElement('button', {
-            type: 'button', className: 'dvs-mini', title: t('clearKey'),
+            type: 'button', className: 'cb-btn cb-btn-mini', title: t('clearKey'),
             disabled: !writable, onClick: () => setDraft((d) => Object.assign({}, d || {}, { hotkey: '' })),
           }, '×'),
         ),
-        React.createElement('span', { className: 'dvs-sub' },
-          t('hotkeyHint1')
-          + t('hotkeyHint2')))
+        React.createElement('span', { className: 'dvs-sub' }, t('hotkeyHint1') + t('hotkeyHint2')),
+      )
 
-      const micField = () => React.createElement('label', { className: 'dvs-field' }, t('mic'),
-          React.createElement('select', {
-            value: String((snap && snap.micDeviceId) || ''), disabled: !writable,
-            onChange: (e) => setTop('micDeviceId', e.target.value),
-          },
-            React.createElement('option', { value: '' }, t('micDefault')),
-            devices.map((d) => React.createElement('option', { key: d.deviceId, value: d.deviceId },
-              d.label || d.deviceId.slice(0, 12)))))
-      const langField = (mode) => React.createElement('label', { className: 'dvs-field' }, t('language'),
+      const micField = () => React.createElement('div', { className: 'cb-field' },
+        React.createElement('label', null, t('mic')),
+        React.createElement('select', {
+          value: String((snap && snap.micDeviceId) || ''), disabled: !writable,
+          onChange: (e) => setTop('micDeviceId', e.target.value),
+        },
+          React.createElement('option', { value: '' }, t('micDefault')),
+          devices.map((d) => React.createElement('option', { key: d.deviceId, value: d.deviceId },
+            d.label || d.deviceId.slice(0, 12))),
+        ),
+      )
+
+      const langField = (mode) => React.createElement('div', { className: 'cb-field' },
+        React.createElement('label', null, t('language')),
         React.createElement('select', {
           value: modeVal(mode, 'language', 'ru'), disabled: !writable,
           onChange: (e) => setIn(mode, 'language', e.target.value),
-        }, LANGS.map((o) => React.createElement('option', { key: o, value: o }, o))))
+        }, LANGS.map((o) => React.createElement('option', { key: o, value: o }, o))),
+      )
 
-      const numField = (mode, key, label, hint) => React.createElement('label', { className: 'dvs-field' }, label,
+      const numField = (mode, key, label, hint) => React.createElement('div', { className: 'cb-field' },
+        React.createElement('label', null, label),
         React.createElement('input', {
           type: 'number', value: modeVal(mode, key, ''), disabled: !writable,
           onChange: (e) => setIn(mode, key, Number(e.target.value)),
         }),
-        React.createElement('span', { className: 'dvs-sub' }, hint))
+        React.createElement('span', { className: 'dvs-sub' }, hint),
+      )
 
-      const textField = (key, label, hint) => React.createElement('label', { className: 'dvs-field' }, label,
+      const textField = (key, label, hint) => React.createElement('div', { className: 'cb-field' },
+        React.createElement('label', null, label),
         React.createElement('input', {
-          value: draft && draft[key] !== undefined ? draft[key] : '', disabled: !writable,
+          type: 'text', value: draft && draft[key] !== undefined ? draft[key] : '', disabled: !writable,
           onChange: (e) => setTop(key, e.target.value),
         }),
-        React.createElement('span', { className: 'dvs-sub' }, hint))
+        React.createElement('span', { className: 'dvs-sub' }, hint),
+      )
 
-      return React.createElement('div', { className: 'dvs-wrap' },
-        React.createElement('div', { className: 'dvs-block' },
-          React.createElement('div', { className: 'dvs-h' }, t('dictationBtn')),
-          React.createElement('div', { className: 'dvs-sub' }, t('dictationHint')),
+      const statsData = (statusData && statusData.providerStats) || {}
+      const hostOnline = statusLatency !== null
+      const whisperRunning = !!(statusData && statusData.whisperRunning)
+      const providerCount = (statusData && Array.isArray(statusData.providers)) ? statusData.providers.length : chainOptions.length
+
+      return React.createElement('div', { className: 'cb-page' },
+        // 1. Connection & Engine Status Card
+        React.createElement('div', { className: 'cb-section-card' },
+          React.createElement('div', { className: 'cb-section-title' },
+            React.createElement('span', null, t('statusTitle')),
+            React.createElement('button', {
+              type: 'button', className: 'cb-btn', style: { fontSize: '12px', padding: '4px 8px' },
+              onClick: fetchStatus,
+            }, '🔄 ' + t('refreshStats')),
+          ),
+          React.createElement('div', { className: 'cb-section-desc' }, t('statusDesc')),
+          React.createElement('div', { className: 'cb-row' },
+            hostOnline
+              ? React.createElement('span', { className: 'cb-badge cb-badge-ok' }, '● ' + t('badgeHostOnline').replace('{ms}', statusLatency))
+              : React.createElement('span', { className: 'cb-badge cb-badge-bad' }, '● ' + t('badgeHostOffline')),
+            whisperRunning
+              ? React.createElement('span', { className: 'cb-badge cb-badge-ok' }, '● ' + t('badgeWhisperActive'))
+              : React.createElement('span', { className: 'cb-badge cb-badge-warn' }, '○ ' + t('badgeWhisperInactive')),
+            React.createElement('span', { className: 'cb-badge cb-badge-ok' }, '✓ ' + t('badgeProviders').replace('{count}', providerCount)),
+          ),
+        ),
+
+        // 2. Dictation Mode Card
+        React.createElement('div', { className: 'cb-section-card' },
+          React.createElement('div', { className: 'cb-section-title' },
+            React.createElement('span', null, '🎙️ ' + t('dictationBtn')),
+          ),
+          React.createElement('div', { className: 'cb-section-desc' }, t('dictationHint')),
           React.createElement(ChainEditor, {
             value: draft && draft.dictation ? draft.dictation.chain : [], writable: writable,
             options: chainOptions,
             onChange: (v) => setIn('dictation', 'chain', v),
           }),
-          langField('dictation'),
-          numField('dictation', 'vadSilenceMs', t('pauseMs'), t('pauseHint')),
-          numField('dictation', 'sendDelayMs', t('sendDelay'), t('sendDelayHint')),
-          React.createElement('label', { className: 'dvs-field' }, t('polish'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.dictation && draft.dictation.polish), disabled: !writable,
-              onChange: (e) => setIn('dictation', 'polish', e.target.checked),
-            })),
-          React.createElement('div', { className: 'dvs-sub' }, t('polishHint')),
-          React.createElement('label', { className: 'dvs-field', title: t('wakeWordHint') }, t('wakeWord'),
-            React.createElement('input', {
-              type: 'text', value: String((snap && snap.wakeWord) || ''), disabled: !writable,
-              onChange: (e) => setTop('wakeWord', e.target.value),
-            })),
-          React.createElement('label', { className: 'dvs-field', title: t('streamHint') }, t('stream'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.dictation && draft.dictation.stream), disabled: !writable,
-              onChange: (e) => setIn('dictation', 'stream', e.target.checked),
-            })),
-          numField('dictation', 'streamChunkMs', t('streamChunkMs'), t('streamHint')),
-          React.createElement('label', { className: 'dvs-field', title: t('vadAdaptHint') }, t('vadAdapt'),
+          React.createElement('div', { className: 'cb-grid-2' },
+            langField('dictation'),
+            numField('dictation', 'vadSilenceMs', t('pauseMs'), t('pauseHint')),
+            numField('dictation', 'sendDelayMs', t('sendDelay'), t('sendDelayHint')),
+            numField('dictation', 'streamChunkMs', t('streamChunkMs'), t('streamHint')),
+          ),
+          React.createElement('div', { className: 'cb-row' },
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: !!(draft && draft.dictation && draft.dictation.polish), disabled: !writable,
+                onChange: (e) => setIn('dictation', 'polish', e.target.checked),
+              }),
+              t('polish'),
+            ),
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: !!(draft && draft.dictation && draft.dictation.stream), disabled: !writable,
+                onChange: (e) => setIn('dictation', 'stream', e.target.checked),
+              }),
+              t('stream'),
+            ),
+          ),
+          React.createElement('div', { className: 'cb-field' },
+            React.createElement('label', null, t('vadAdapt')),
             React.createElement('input', {
               type: 'range', min: 0, max: 1, step: 0.1,
               value: Number(draft && draft.dictation && draft.dictation.vadAdapt) || 0, disabled: !writable,
               onChange: (e) => setIn('dictation', 'vadAdapt', Number(e.target.value)),
-            })),
+            }),
+            React.createElement('span', { className: 'dvs-sub' }, t('vadAdaptHint')),
+          ),
+          textField('wakeWord', t('wakeWord'), t('wakeWordHint')),
         ),
-        React.createElement('div', { className: 'dvs-block' },
-          React.createElement('div', { className: 'dvs-h' }, t('messageTitle')),
-          React.createElement('div', { className: 'dvs-sub' }, t('messageHint')),
+
+        // 3. Voice Message Card
+        React.createElement('div', { className: 'cb-section-card' },
+          React.createElement('div', { className: 'cb-section-title' },
+            React.createElement('span', null, '💬 ' + t('messageTitle')),
+          ),
+          React.createElement('div', { className: 'cb-section-desc' }, t('messageHint')),
           React.createElement(ChainEditor, {
             value: draft && draft.message ? draft.message.chain : [], writable: writable,
             options: chainOptions,
             onChange: (v) => setIn('message', 'chain', v),
           }),
-          langField('message'),
-          numField('message', 'autoSendMs', t('undoMs'), t('undoHint')),
-          React.createElement('label', { className: 'dvs-field' }, t('polish'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.message && draft.message.polish), disabled: !writable,
-              onChange: (e) => setIn('message', 'polish', e.target.checked),
-            })),
-          React.createElement('label', { className: 'dvs-field', title: t('polishSendHint') }, t('polishSend'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.message && draft.message.polishSend), disabled: !writable,
-              onChange: (e) => setIn('message', 'polishSend', e.target.checked),
-            })),
-          React.createElement('label', { className: 'dvs-field', title: t('sessionCommandsHint') }, t('sessionCommands'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.message && draft.message.sessionCommands), disabled: !writable,
-              onChange: (e) => setIn('message', 'sessionCommands', e.target.checked),
-            })),
+          React.createElement('div', { className: 'cb-grid-2' },
+            langField('message'),
+            numField('message', 'autoSendMs', t('undoMs'), t('undoHint')),
+          ),
+          React.createElement('div', { className: 'cb-row' },
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: !!(draft && draft.message && draft.message.polish), disabled: !writable,
+                onChange: (e) => setIn('message', 'polish', e.target.checked),
+              }),
+              t('polish'),
+            ),
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: !!(draft && draft.message && draft.message.polishSend), disabled: !writable,
+                onChange: (e) => setIn('message', 'polishSend', e.target.checked),
+              }),
+              t('polishSend'),
+            ),
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: !!(draft && draft.message && draft.message.sessionCommands), disabled: !writable,
+                onChange: (e) => setIn('message', 'sessionCommands', e.target.checked),
+              }),
+              t('sessionCommands'),
+            ),
+          ),
         ),
-        React.createElement('div', { className: 'dvs-block' },
-          React.createElement('div', { className: 'dvs-h' }, t('customTitle')),
-          React.createElement('div', { className: 'dvs-sub' },
-            t('customHint')),
+
+        // 4. Custom Providers Card
+        React.createElement('div', { className: 'cb-section-card' },
+          React.createElement('div', { className: 'cb-section-title' },
+            React.createElement('span', null, '⚙️ ' + t('customTitle')),
+          ),
+          React.createElement('div', { className: 'cb-section-desc' }, t('customHint')),
           React.createElement(CustomEditor, {
             value: draft && draft.customProviders ? draft.customProviders : [], writable: writable,
+            options: chainOptions,
             onChange: (v) => setTop('customProviders', v),
           }),
         ),
-        React.createElement('div', { className: 'dvs-block' },
-          React.createElement('div', { className: 'dvs-h' }, t('general')),
+
+        // 5. Hardware & Local Engines Card
+        React.createElement('div', { className: 'cb-section-card' },
+          React.createElement('div', { className: 'cb-section-title' },
+            React.createElement('span', null, '🔧 ' + t('hardwareTitle')),
+          ),
+          React.createElement('div', { className: 'cb-section-desc' }, t('hardwareDesc')),
           hotkeyField(),
-          textField('whisperUrl', t('whisperEndpoint'), t('whisperEndpointHint')),
-          textField('whisperBin', t('whisperBin'), t('whisperBinHint')),
-          textField('whisperModel', t('whisperModel'), t('whisperBinHint')),
-          textField('deepgramBaseUrl', t('deepgramEndpoint'), t('deepgramEndpointHint')),
-          React.createElement('label', { className: 'dvs-field' }, t('whisperAutostart'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.autoStart), disabled: !writable,
-              onChange: (e) => setTop('autoStart', e.target.checked),
-            })),
-          React.createElement('label', { className: 'dvs-field', title: t('normalizeTranscriptHint') },
-            t('normalizeTranscript'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.normalizeTranscript), disabled: !writable,
-              onChange: (e) => setTop('normalizeTranscript', e.target.checked),
-            })),
-          React.createElement('label', { className: 'dvs-field' }, t('beep'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.beep), disabled: !writable,
-              onChange: (e) => setTop('beep', e.target.checked),
-            })),
-          React.createElement('label', { className: 'dvs-field', title: t('localOnlyHint') }, t('localOnly'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.localOnly), disabled: !writable,
-              onChange: (e) => setTop('localOnly', e.target.checked),
-            })),
-          React.createElement('label', { className: 'dvs-field' }, t('voiceCommandsLabel'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.voiceCommands), disabled: !writable,
-              onChange: (e) => setTop('voiceCommands', e.target.checked),
-            })),
           micField(),
-          React.createElement('label', { className: 'dvs-field', title: t('noiseSuppressionHint') }, t('noiseSuppression'),
-            React.createElement('input', {
-              type: 'checkbox', checked: draft ? draft.noiseSuppression !== false : true, disabled: !writable,
-              onChange: (e) => setTop('noiseSuppression', e.target.checked),
-            })),
-          React.createElement('label', { className: 'dvs-field', title: t('contextGlossaryHint') }, t('contextGlossary'),
-            React.createElement('input', {
-              type: 'checkbox', checked: draft ? draft.contextGlossary !== false : true, disabled: !writable,
-              onChange: (e) => setTop('contextGlossary', e.target.checked),
-            })),
-          React.createElement('label', { className: 'dvs-field', title: t('visualizerStyleHint') }, t('visualizerStyle'),
+          React.createElement('div', { className: 'cb-grid-2' },
+            textField('whisperUrl', t('whisperEndpoint'), t('whisperEndpointHint')),
+            textField('whisperBin', t('whisperBin'), t('whisperBinHint')),
+            textField('whisperModel', t('whisperModel'), t('whisperModelHint')),
+            textField('deepgramBaseUrl', t('deepgramEndpoint'), t('deepgramEndpointHint')),
+            textField('sensevoiceUrl', t('sensevoiceEndpoint'), t('sensevoiceEndpointHint')),
+            textField('sensevoiceBin', t('sensevoiceBin'), t('sensevoiceBinHint')),
+            textField('sensevoiceModel', t('sensevoiceModel'), t('sensevoiceModelHint')),
+            textField('polishBaseUrl', t('polishBaseUrl'), t('polishBaseUrlHint')),
+            textField('polishModel', t('polishModel'), ''),
+            textField('polishKeyEnv', t('polishKeyEnv'), ''),
+          ),
+          React.createElement('div', { className: 'cb-row' },
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: !!(draft && draft.autoStart), disabled: !writable,
+                onChange: (e) => setTop('autoStart', e.target.checked),
+              }),
+              t('whisperAutostart'),
+            ),
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: !!(draft && draft.sensevoiceAutostart), disabled: !writable,
+                onChange: (e) => setTop('sensevoiceAutostart', e.target.checked),
+              }),
+              t('sensevoiceAutostart'),
+            ),
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: !!(draft && draft.localOnly), disabled: !writable,
+                onChange: (e) => setTop('localOnly', e.target.checked),
+              }),
+              t('localOnly'),
+            ),
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: !!(draft && draft.beep), disabled: !writable,
+                onChange: (e) => setTop('beep', e.target.checked),
+              }),
+              t('beep'),
+            ),
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: draft ? draft.noiseSuppression !== false : true, disabled: !writable,
+                onChange: (e) => setTop('noiseSuppression', e.target.checked),
+              }),
+              t('noiseSuppression'),
+            ),
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: draft ? draft.contextGlossary !== false : true, disabled: !writable,
+                onChange: (e) => setTop('contextGlossary', e.target.checked),
+              }),
+              t('contextGlossary'),
+            ),
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: !!(draft && draft.voiceCommands), disabled: !writable,
+                onChange: (e) => setTop('voiceCommands', e.target.checked),
+              }),
+              t('voiceCommandsLabel'),
+            ),
+            React.createElement('label', { className: 'cb-check-label' },
+              React.createElement('input', {
+                type: 'checkbox', checked: !!(draft && draft.normalizeTranscript), disabled: !writable,
+                onChange: (e) => setTop('normalizeTranscript', e.target.checked),
+              }),
+              t('normalizeTranscript'),
+            ),
+          ),
+          React.createElement('div', { className: 'cb-field' },
+            React.createElement('label', null, t('visualizerStyle')),
             React.createElement('select', {
               value: String((draft && draft.visualizerStyle) || 'liquid-wave'), disabled: !writable,
               onChange: (e) => setTop('visualizerStyle', e.target.value),
@@ -1937,43 +1983,27 @@ window.__ModuleLoader__.load({
               React.createElement('option', { value: 'dynamic-orb' }, t('visDynamicOrb')),
               React.createElement('option', { value: 'bars' }, t('visBars')),
               React.createElement('option', { value: 'off' }, t('visOff')),
-            )),
-          React.createElement('label', { className: 'dvs-field' }, t('vocabulary'),
+            ),
+          ),
+          React.createElement('div', { className: 'cb-field' },
+            React.createElement('label', null, t('vocabulary')),
             React.createElement('textarea', {
               rows: 3, disabled: !writable,
               value: Array.isArray(draft && draft.vocabulary) ? draft.vocabulary.join('\n') : '',
               onChange: (e) => setTop('vocabulary', e.target.value.split('\n').map((x) => x.trim()).filter(Boolean)),
-            })),
-          React.createElement('label', { className: 'dvs-field', title: t('polishBaseUrlHint') }, t('polishBaseUrl'),
-            React.createElement('input', {
-              type: 'text', value: String((snap && snap.polishBaseUrl) || ''), disabled: !writable,
-              onChange: (e) => setTop('polishBaseUrl', e.target.value),
-            })),
-          React.createElement('label', { className: 'dvs-field' }, t('polishModel'),
-            React.createElement('input', {
-              type: 'text', value: String((draft && draft.polishModel) || ''), disabled: !writable,
-              onChange: (e) => setTop('polishModel', e.target.value),
-            })),
-          React.createElement('label', { className: 'dvs-field' }, t('polishKeyEnv'),
-            React.createElement('input', {
-              type: 'text', value: String((draft && draft.polishKeyEnv) || ''), disabled: !writable,
-              onChange: (e) => setTop('polishKeyEnv', e.target.value),
-            })),
-        ),
-        React.createElement('div', { className: 'dvs-block' },
-          React.createElement('div', { className: 'dvs-h' }, 'SenseVoice-ONNX / Sherpa-ONNX'),
-          React.createElement('div', { className: 'dvs-sub' }, t('sensevoiceHint')),
-          textField('sensevoiceUrl', t('sensevoiceEndpoint'), t('sensevoiceEndpointHint')),
-          textField('sensevoiceBin', t('sensevoiceBin'), t('sensevoiceBinHint')),
-          textField('sensevoiceModel', t('sensevoiceModel'), t('sensevoiceBinHint')),
-          React.createElement('label', { className: 'dvs-field' }, t('sensevoiceAutostart'),
-            React.createElement('input', {
-              type: 'checkbox', checked: !!(draft && draft.sensevoiceAutostart), disabled: !writable,
-              onChange: (e) => setTop('sensevoiceAutostart', e.target.checked),
-            })),
+            }),
+          ),
         ),
-        React.createElement('div', { className: 'dvs-block' },
-          React.createElement('div', { className: 'dvs-h' }, t('providerDashboard')),
+
+        // 6. Provider Telemetry & Latency Dashboard
+        React.createElement('div', { className: 'cb-section-card' },
+          React.createElement('div', { className: 'cb-section-title' },
+            React.createElement('span', null, '📊 ' + t('providerDashboard')),
+            React.createElement('button', {
+              type: 'button', className: 'cb-btn', style: { fontSize: '12px', padding: '4px 8px' },
+              onClick: fetchStatus,
+            }, '🔄 ' + t('refreshStats')),
+          ),
           React.createElement('div', { className: 'dvo-dash' },
             React.createElement('div', { className: 'dvo-dash-grid' },
               Object.keys(statsData).length === 0
@@ -2010,53 +2040,51 @@ window.__ModuleLoader__.load({
                         React.createElement('span', null, t('successRate')),
                       ),
                     )
-                  })
-            )
-          )
+                  }),
+            ),
+          ),
         ),
-        React.createElement('div', { className: 'dvs-row' },
-          React.createElement('button', { type: 'button', className: 'dvs-save', disabled: !writable, onClick: save }, t('save')),
+
+        // Action bar (Save)
+        React.createElement('div', { className: 'cb-row' },
+          React.createElement('button', { type: 'button', className: 'cb-btn cb-btn-primary', disabled: !writable, onClick: save }, t('save')),
           saved ? React.createElement('span', { className: 'dvs-ok' }, t('saved')) : null,
           err ? React.createElement('span', { className: 'dvs-bad' }, err) : null,
         ),
       )
     }
 
-    // Карточка во вкладке «Настройки плагинов» (#18): ядро даёт только рамку
-    // списка, поэтому заголовок, пояснение и сворачивание — наши.
-    // Тело монтируется при первом раскрытии: снапшот настроек тогда и придёт.
+    // Card in Settings → Plugins → Plugin settings (#18)
     function PluginCard(props) {
       const [open, setOpen] = React.useState(false)
       const tt = (props && props.t) || t
       const title = tt('title')
-      return React.createElement('li',
-        { className: open ? 'dvo-pcard dvo-pcardOpen' : 'dvo-pcard' },
-        React.createElement('button',
-          {
-            type: 'button', className: 'dvo-phead',
-            'aria-expanded': open ? 'true' : 'false',
-            'aria-label': (open ? tt('collapse') : tt('expand')) + ': ' + title,
-            onClick: () => setOpen((v) => !v),
-          },
-          React.createElement('span', { className: 'dvo-pheadtext' },
-            React.createElement('span', { className: 'dvo-ptitle' }, title),
-            React.createElement('span', { className: 'dvo-pdesc' }, tt('cardHint')),
+      return React.createElement(ErrorBoundary, null,
+        React.createElement('li',
+          { className: open ? 'dvo-pcard dvo-pcardOpen' : 'dvo-pcard' },
+          React.createElement('button',
+            {
+              type: 'button', className: 'dvo-phead',
+              'aria-expanded': open ? 'true' : 'false',
+              'aria-label': (open ? tt('collapse') : tt('expand')) + ': ' + title,
+              onClick: () => setOpen((v) => !v),
+            },
+            React.createElement('span', { className: 'dvo-pheadtext' },
+              React.createElement('span', { className: 'dvo-ptitle' }, title),
+              React.createElement('span', { className: 'dvo-pdesc' }, tt('cardHint')),
+            ),
+            React.createElement('span', { className: 'dvo-pchev' }, chevronIcon()),
           ),
-          React.createElement('span', { className: 'dvo-pchev' }, chevronIcon()),
+          open ? React.createElement('div', { className: 'dvo-pbody' }, React.createElement(VoiceSection, props)) : null,
         ),
-        open ? React.createElement('div', { className: 'dvo-pbody' }, React.createElement(VoiceSection, props)) : null,
       )
     }
 
     function registerSettings(ctx) {
-      // Карточка настроек во вкладке «Настройки → Плагины → Настройки плагинов» (#18).
-      // Ключ регистрации обязан равняться NS (пространству настроек), иначе
-      // вкладка молча пропустит слот.
       ctx.slots.inject('settings.plugin.item', () => ctx.slots.register(
         {
           name: 'settings.plugin.item',
           key: NS,
-          // locale в записи слота — то, из-за чего компонент получает props.t.
           locale: NS,
           inject: () => ({ ctx: ctx }),
         },
@@ -2066,14 +2094,9 @@ window.__ModuleLoader__.load({
 
     exports.inject = ['timer', 'slots', 'settingsScope', 'locale']
     exports.apply = function apply(ctx) {
-      // Язык может принести не только плагин: словарные пакеты объявляют
-      // русский для чужих пространств. Ядро на повторное объявление той же
-      // пары «пространство + язык» бросает исключение, и незащищённый вызов
-      // уносил с собой весь плагин — в интерфейсе это выглядело как «Failed to
-      // load plugins» с перечнем ни в чём не повинных соседей.
-      //
-      // Поэтому каждый язык объявляется отдельно и по-хорошему: заняли до нас —
-      // уступаем, свой английский при этом всё равно встаёт на место.
+      // English is the source language. Other languages come from the
+      // separate translation plugin at runtime. Re-registering the same
+      // namespace+language throws, so tolerate a pre-registered dictionary.
       const addLocale = (locale, dictionary) => {
         try {
           return ctx.locale.register(NS, locale, dictionary)
@@ -2082,9 +2105,9 @@ window.__ModuleLoader__.load({
         }
       }
       ctx.effect(() => {
-        const undo = [addLocale('en', en), addLocale('ru', ru)]
+        const undo = [addLocale('en', en)]
         return () => { for (const off of undo) off() }
-      }, 'dsh-voice: словари')
+      }, 'dsh-voice: locale dictionaries')
       moduleT = ctx.locale.bind(NS)
       registerComposer(ctx)
       registerSettings(ctx)