@goodandready/dsh-tts 0.4.1 → 0.4.5

package/lib/client.js

@@ -107,8 +107,8 @@ window.__ModuleLoader__.load({
       '.dts-save:hover:not(:disabled){opacity:0.88}' +
       '.dts-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}' +
       '.dts-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))}' +
-      '.dts-btn-danger{color:var(--dsw-alias-state-error-primary);border-color:rgba(239,68,68,0.3)}' +
-      '.dts-btn-danger:hover:not(:disabled){background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.5)}' +
+      '.dts-btn-danger{color:var(--dsw-alias-state-error-primary);border-color:color-mix(in srgb, var(--dsw-alias-state-error-primary) 30%, transparent)}' +
+      '.dts-btn-danger:hover:not(:disabled){background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent);border-color:color-mix(in srgb, var(--dsw-alias-state-error-primary) 50%, transparent)}' +
       '.dts-entry{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-2)}' +
       '.dts-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}' +
       '.dts-row .dts-model{flex:1;min-width:120px}' +
@@ -118,15 +118,15 @@ window.__ModuleLoader__.load({
       '.dts-ok{font-size:12px;color:var(--dsw-alias-state-success-primary);font-weight:500}' +
       '.dts-bad{font-size:12px;color:var(--dsw-alias-state-error-primary);font-weight:500}' +
       '.dts-badge{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);white-space:nowrap;display:inline-flex;align-items:center;gap:4px;font-weight:500}' +
-      '.dts-badge-on{color:var(--dsw-alias-state-success-primary);border-color:var(--dsw-alias-state-success-primary);background:rgba(16,185,129,0.08)}' +
-      '.dts-badge-warn{color:var(--dsw-alias-state-warning-primary);border-color:var(--dsw-alias-state-warning-primary);background:rgba(245,158,11,0.08)}' +
-      '.dts-badge-bad{color:var(--dsw-alias-state-error-primary);border-color:var(--dsw-alias-state-error-primary);background:rgba(239,68,68,0.08)}' +
+      '.dts-badge-on{color:var(--dsw-alias-state-success-primary);border-color:var(--dsw-alias-state-success-primary);background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 8%, transparent)}' +
+      '.dts-badge-warn{color:var(--dsw-alias-state-warning-primary);border-color:var(--dsw-alias-state-warning-primary);background:color-mix(in srgb, var(--dsw-alias-state-warning-primary) 8%, transparent)}' +
+      '.dts-badge-bad{color:var(--dsw-alias-state-error-primary);border-color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 8%, transparent)}' +
       '.dts-link{background:none;border:none;color:var(--dsw-alias-label-secondary);cursor:pointer;font-size:12px;padding:0;text-decoration:underline}' +
       '.dts-link:hover:not(:disabled){color:var(--dsw-alias-label-primary)}' +
       '.dts-alert{padding:10px 14px;border-radius:8px;font-size:13px}' +
-      '.dts-alert-err{background:rgba(239,68,68,0.1);color:var(--dsw-alias-state-error-primary);border:1px solid rgba(239,68,68,0.2)}' +
-      '.dts-alert-warn{background:rgba(245,158,11,0.1);color:var(--dsw-alias-state-warning-primary);border:1px solid rgba(245,158,11,0.2)}' +
-      '.dts-alert-ok{background:rgba(16,185,129,0.1);color:var(--dsw-alias-state-success-primary);border:1px solid rgba(16,185,129,0.2)}' +
+      '.dts-alert-err{background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);color:var(--dsw-alias-state-error-primary);border:1px solid color-mix(in srgb, var(--dsw-alias-state-error-primary) 20%, transparent)}' +
+      '.dts-alert-warn{background:color-mix(in srgb, var(--dsw-alias-state-warning-primary) 10%, transparent);color:var(--dsw-alias-state-warning-primary);border:1px solid color-mix(in srgb, var(--dsw-alias-state-warning-primary) 20%, transparent)}' +
+      '.dts-alert-ok{background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent);color:var(--dsw-alias-state-success-primary);border:1px solid color-mix(in srgb, var(--dsw-alias-state-success-primary) 20%, transparent)}' +
       '.dts-grow{flex:1;min-width:100px}'
 
     const setCssId = 'dsh-tts/settings.module.css'
@@ -142,6 +142,38 @@ window.__ModuleLoader__.load({
     // Each incoming chunk used to replace the previous one immediately; while reading
     // For full replies this was invisible; with speak-as-it-goes only the last
     // chunk would be heard. Now items queue: the next starts after the previous ends.
+    const autoplay = { blocked: false, listeners: new Set() }
+
+    function setAutoplayBlocked(next) {
+      if (autoplay.blocked === next) return
+      autoplay.blocked = next
+      for (const l of [...autoplay.listeners]) {
+        try { l() } catch { /* listener isolation */ }
+      }
+    }
+
+    function unlockAudio() {
+      try {
+        const AC = window.AudioContext || window.webkitAudioContext
+        if (AC) {
+          const ctx = new AC()
+          if (ctx.state === 'suspended') ctx.resume().catch(() => { /* audio context unlock failure ignored */ })
+          setTimeout(() => { try { ctx.close() } catch { /* closed */ } }, 300)
+        }
+      } catch { /* no AudioContext */ }
+      setAutoplayBlocked(false)
+      drainQueue()
+    }
+
+    function useAutoplayGate() {
+      const [, force] = React.useReducer((n) => n + 1, 0)
+      React.useEffect(() => {
+        autoplay.listeners.add(force)
+        return () => { autoplay.listeners.delete(force) }
+      }, [])
+      return autoplay
+    }
+
     const player = {
       audio: null,
       after: '',
@@ -153,13 +185,15 @@ window.__ModuleLoader__.load({
       busy: false,
       paused: false,
       listeners: new Set(),
+      unlockAudio,
+      useAutoplayGate,
+      get autoplayBlocked() { return autoplay.blocked },
     }
     const seenIds = new Set()
     let currentAudioResolve = null
-
     function playerChanged() {
       for (const listener of [...player.listeners]) {
-        try { listener() } catch (listenerFailure) { /* чужой слушатель не наша забота */ }
+        try { listener() } catch (listenerFailure) { /* foreign listener failure is not ours */ }
       }
     }
 
@@ -194,8 +228,8 @@ window.__ModuleLoader__.load({
             osc.stop(at + 0.2)
             at += 0.22
           }
-          setTimeout(() => { try { audioCtx.close() } catch (already) { /* закрыт */ } resolve() }, 600)
-        } catch (noAudio) { resolve() }
+          setTimeout(() => { try { audioCtx.close() } catch (already) { /* already closed */ } resolve() }, 600)
+        } catch { resolve() /* no AudioContext */ }
       })
     }
 
@@ -210,7 +244,7 @@ window.__ModuleLoader__.load({
           utterance.onend = () => resolve()
           utterance.onerror = () => resolve()
           window.speechSynthesis.speak(utterance)
-        } catch (noSpeech) { resolve() }
+        } catch { resolve() /* no speechSynthesis */ }
       })
     }
 
@@ -225,7 +259,7 @@ window.__ModuleLoader__.load({
         const audio = new Audio(url)
         audio.preload = 'auto'
         item.prepared = { audio, url }
-      } catch (err) { /* decode error */ }
+      } catch { /* decode error — item stays unprepared */ }
       return item
     }
 
@@ -253,7 +287,7 @@ window.__ModuleLoader__.load({
             if (doneCalled) return
             doneCalled = true
             currentAudioResolve = null
-            try { URL.revokeObjectURL(url) } catch (_) {}
+            try { URL.revokeObjectURL(url) } catch { /* URL already revoked */ }
             item.prepared = null
             player.audio = null
             playerChanged()
@@ -262,11 +296,14 @@ window.__ModuleLoader__.load({
           currentAudioResolve = done
           audio.onended = done
           audio.onerror = done
-          audio.play().catch(() => {
-    // Autoplay without a user gesture is blocked — not a bug; just no sound.
+          audio.play().catch((playErr) => {
+            // Autoplay without a user gesture is blocked — surface unlock UX, then stop this chunk.
+            if (playErr && (playErr.name === 'NotAllowedError' || playErr.name === 'SecurityError')) {
+              setAutoplayBlocked(true)
+            }
             done()
           })
-        } catch (cannotDecode) {
+        } catch { /* cannot decode — skip chunk */
           currentAudioResolve = null
           resolve()
         }
@@ -295,26 +332,27 @@ window.__ModuleLoader__.load({
     function stopPlayback() {
       for (const item of player.queue) {
         if (item && item.prepared && item.prepared.url) {
-          try { URL.revokeObjectURL(item.prepared.url) } catch (_) {}
+          try { URL.revokeObjectURL(item.prepared.url) } catch { /* already revoked */ }
           item.prepared = null
         }
       }
       player.queue.length = 0
       player.paused = false
+      if (player.audio) {
+        try { player.audio.pause() } catch { /* already paused */ }
+      }
       if (currentAudioResolve) {
         currentAudioResolve()
-      } else if (player.audio) {
-        try { player.audio.pause() } catch (already) { /* стоит */ }
-        player.audio = null
       }
-      try { if (window.speechSynthesis) window.speechSynthesis.cancel() } catch (noSpeech) { /* нет синтеза */ }
+      player.audio = null
+      try { if (window.speechSynthesis) window.speechSynthesis.cancel() } catch { /* no speechSynthesis */ }
       playerChanged()
     }
 
     function togglePause() {
       player.paused = !player.paused
       if (player.audio) {
-        try { player.paused ? player.audio.pause() : player.audio.play() } catch (already) { /* всё равно */ }
+        try { player.paused ? player.audio.pause() : player.audio.play() } catch (already) { /* ignore play/pause failure */ }
       }
       if (!player.paused) drainQueue()
       playerChanged()
@@ -324,7 +362,7 @@ window.__ModuleLoader__.load({
       if (currentAudioResolve) {
         currentAudioResolve()
       } else if (player.audio) {
-        try { player.audio.pause() } catch (already) { /* стоит */ }
+        try { player.audio.pause() } catch (already) { /* already stopped */ }
         player.audio = null
         playerChanged()
         if (player.queue.length) drainQueue()
@@ -378,7 +416,7 @@ window.__ModuleLoader__.load({
           player.queue.push(item)
         }
         if (player.queue.length) drainQueue()
-      } catch (hostRestarting) { /* хост перезапускается */ }
+      } catch (hostRestarting) { /* host restarting */ }
     }
 
     // Recent utterances: last reply texts and favorites (localStorage).
@@ -389,7 +427,7 @@ window.__ModuleLoader__.load({
         const raw = typeof localStorage !== 'undefined' ? localStorage.getItem(KEY) : null
         st = JSON.parse(raw) || { items: [], favs: [] }
       } catch (broken) { st = { items: [], favs: [] } }
-      const persist = () => { try { if (typeof localStorage !== 'undefined') localStorage.setItem(KEY, JSON.stringify(st)) } catch (full) { /* приватный режим */ } }
+      const persist = () => { try { if (typeof localStorage !== 'undefined') localStorage.setItem(KEY, JSON.stringify(st)) } catch (full) { /* private mode / quota */ } }
       return {
         add(text) {
           if (!text || text.length < 2) return
@@ -418,9 +456,9 @@ window.__ModuleLoader__.load({
         .then((d) => {
           if (!d || !d.ok) return
           const audio = new Audio('data:' + (d.mime || 'audio/mpeg') + ';base64,' + d.audioBase64)
-          audio.play().catch(() => {})
+          audio.play().catch(() => { /* chime autoplay blocked or interrupted */ })
         })
-        .catch(() => {})
+        .catch(() => { /* chime fetch failed or not found */ })
     }
 
     function credOf(map, provider) {
@@ -429,6 +467,24 @@ window.__ModuleLoader__.load({
 
     const en = {
       'statusOnline': 'Host online',
+      'recent': 'Recent',
+      'recentEmpty': 'No recent speech yet',
+      'retry': 'Retry',
+      'advancedCollapsed': 'Advanced',
+      'confirmClearCache': 'Clear the synthesis cache? This cannot be undone.',
+      'confirmDeleteModel': 'Delete downloaded weights for this engine?',
+      'autoplayBlocked': 'Sound is blocked until you click or tap once',
+      'enableSound': 'Enable sound',
+      'runtimeNotBundled': 'Neural inference runtime is not bundled',
+      'runtimeNotBundledHint': 'Install weights does not enable speech. Use Edge, Piper, or eSpeak for offline TTS.',
+      'testProvider': 'Test provider',
+      'breakerOpen': 'Circuit open',
+      'lastError': 'Last error',
+      'activeProvider': 'Active provider',
+      'queueLen': 'Queue',
+      'sseState': 'SSE',
+      'currentVoice': 'Voice',
+
       'statusOffline': 'Host unreachable',
       'cacheStats': 'Cache',
 
@@ -591,6 +647,24 @@ window.__ModuleLoader__.load({
     }
     const ru = {
       'statusOnline': 'Хост на связи',
+      'recent': 'Недавние',
+      'recentEmpty': 'Пока нет реплик',
+      'retry': 'Повторить',
+      'advancedCollapsed': 'Дополнительно',
+      'confirmClearCache': 'Очистить кэш синтеза? Действие необратимо.',
+      'confirmDeleteModel': 'Удалить скачанные веса движка?',
+      'autoplayBlocked': 'Звук заблокирован — один раз кликните или коснитесь экрана',
+      'enableSound': 'Включить звук',
+      'runtimeNotBundled': 'Рантайм нейросинтеза не входит в пакет',
+      'runtimeNotBundledHint': 'Установка весов не включает речь. Для offline используйте Edge, Piper или eSpeak.',
+      'testProvider': 'Проверить провайдера',
+      'breakerOpen': 'Переключатель открыт',
+      'lastError': 'Последняя ошибка',
+      'activeProvider': 'Активный провайдер',
+      'queueLen': 'Очередь',
+      'sseState': 'SSE',
+      'currentVoice': 'Голос',
+
       'statusOffline': 'Хост недоступен',
       'cacheStats': 'Кэш',
 
@@ -793,7 +867,7 @@ window.__ModuleLoader__.load({
               }),
               React.createElement('button', { type: 'button', className: 'dts-mini', title: t('up'), disabled: !props.writable, onClick: () => move(i, -1) }, '\u2191'),
               React.createElement('button', { type: 'button', className: 'dts-mini', title: t('down'), disabled: !props.writable, onClick: () => move(i, 1) }, '\u2193'),
-              React.createElement('button', { type: 'button', className: 'dts-mini', title: t('preview'), disabled: !props.writable, onClick: () => props.onPreview(row.provider, row.model, row.voice) }, '\u25b6'),
+              React.createElement('button', { type: 'button', className: 'dts-mini', title: t('testProvider') || t('preview'), disabled: !props.writable, onClick: () => props.onPreview(row.provider, row.model, row.voice) }, '\u25b6'),
               React.createElement('button', { type: 'button', className: 'dts-mini', title: t('remove'), disabled: !props.writable, onClick: () => remove(i) }, '\u00d7'),
             ),
             cloud ? React.createElement('div', { className: 'dts-row' },
@@ -811,6 +885,13 @@ window.__ModuleLoader__.load({
               }, t('clear')) : null,
             ) : React.createElement('span', { className: 'dts-sub' }, t('localProvider')),
             cloud && cred.ref ? React.createElement('span', { className: 'dts-sub' }, 'Stored as ' + cred.ref) : null,
+            (() => {
+              const hit = Array.isArray(props.breaker) ? props.breaker.find((b) => b && b.id === row.provider) : null
+              if (!hit || (!hit.open && !hit.lastError)) return null
+              return React.createElement('div', { className: 'dts-sub dts-bad' },
+                (hit.open ? t('breakerOpen') + ' · ' : '') + (hit.lastError || '')
+              )
+            })(),
           )
         }),
         React.createElement('div', { className: 'dts-row' },
@@ -826,86 +907,59 @@ window.__ModuleLoader__.load({
     function LocalEnginesEditor(props) {
       const t = props.t || ((key) => key)
       const [models, setModels] = React.useState({})
-      const [loading, setLoading] = React.useState(false)
 
       const loadStatus = React.useCallback(() => {
         if (typeof fetch === 'undefined') return
         fetch('/dsh-tts/models/status')
           .then((r) => r.json())
           .then((d) => { if (d && d.ok && d.models) setModels(d.models) })
-          .catch(() => {})
+          .catch(() => {}) // status poll best-effort
       }, [])
 
       React.useEffect(() => {
         loadStatus()
-        const timer = setInterval(loadStatus, 3000)
+        const timer = setInterval(loadStatus, 5000)
         return () => clearInterval(timer)
       }, [loadStatus])
 
-      const install = (engine) => {
-        setLoading(true)
-        fetch('/dsh-tts/models/install', {
-          method: 'POST',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ engine }),
-        }).then(() => loadStatus()).finally(() => setLoading(false))
-      }
-
       const remove = (engine) => {
-        setLoading(true)
+        if (typeof window !== 'undefined' && window.confirm) {
+          if (!window.confirm(t('confirmDeleteModel'))) return
+        }
         fetch('/dsh-tts/models/delete', {
           method: 'DELETE',
           headers: { 'content-type': 'application/json' },
           body: JSON.stringify({ engine }),
-        }).then(() => loadStatus()).finally(() => setLoading(false))
+        }).then(() => loadStatus()).catch(() => {})
       }
 
       const kokoro = models.kokoro || { installed: false, downloading: false, progress: 0 }
       const f5 = models.f5 || { installed: false, downloading: false, progress: 0 }
 
+      const engineRow = (label, state) => React.createElement('div', { className: 'dts-entry' },
+        React.createElement('div', { className: 'dts-row' },
+          React.createElement('span', { className: 'dts-h', style: { minWidth: '150px' } }, label),
+          React.createElement('span', {
+            className: 'dts-badge dts-badge-warn',
+          }, t('runtimeNotBundled')),
+          state.installed ? React.createElement('button', {
+            type: 'button', className: 'dts-link', disabled: !props.writable,
+            onClick: () => remove(label.toLowerCase().includes('kokoro') ? 'kokoro' : 'f5'),
+          }, t('deleteModel')) : null,
+        ),
+        React.createElement('div', { className: 'dts-sub' }, t('runtimeNotBundledHint')),
+      )
+
       return React.createElement('div', { className: 'dts-block' },
         React.createElement('div', { className: 'dts-h' }, t('localEnginesTitle')),
         React.createElement('div', { className: 'dts-sub' }, t('localEnginesHint')),
-        props.boolField('enableLocalEngines', t('enableLocalEngines'), t('enableLocalEnginesHint')),
+        React.createElement('div', { className: 'dts-alert-warn dts-sub' }, t('runtimeNotBundledHint')),
         props.boolField('streamingEnabled', t('streamingEnabled'), t('streamingEnabledHint')),
-        React.createElement('div', { className: 'dts-entry' },
-          React.createElement('div', { className: 'dts-row' },
-            React.createElement('span', { className: 'dts-h', style: { minWidth: '150px' } }, 'Kokoro-82M (CPU)'),
-            React.createElement('span', {
-              className: 'dts-badge' + (kokoro.installed ? ' dts-badge-on' : ''),
-            }, kokoro.downloading ? `${t('downloading')} ${kokoro.progress}%` : (kokoro.installed ? t('installed') : t('notInstalled'))),
-            !kokoro.installed && !kokoro.downloading ? React.createElement('button', {
-              type: 'button', className: 'dts-save', disabled: !props.writable || loading,
-              onClick: () => install('kokoro'),
-            }, t('installKokoro')) : null,
-            kokoro.installed ? React.createElement('button', {
-              type: 'button', className: 'dts-link', disabled: !props.writable || loading,
-              onClick: () => remove('kokoro'),
-            }, t('deleteModel')) : null,
-          ),
-          kokoro.installed ? props.boolField('kokoroEnabled', t('useKokoro'), t('useKokoroHint')) : null,
-        ),
-        React.createElement('div', { className: 'dts-entry' },
-          React.createElement('div', { className: 'dts-row' },
-            React.createElement('span', { className: 'dts-h', style: { minWidth: '150px' } }, 'F5-TTS (GPU)'),
-            React.createElement('span', {
-              className: 'dts-badge' + (f5.installed ? ' dts-badge-on' : ''),
-            }, f5.downloading ? `${t('downloading')} ${f5.progress}%` : (f5.installed ? t('installed') : t('notInstalled'))),
-            !f5.installed && !f5.downloading ? React.createElement('button', {
-              type: 'button', className: 'dts-save', disabled: !props.writable || loading,
-              onClick: () => install('f5'),
-            }, t('installF5')) : null,
-            f5.installed ? React.createElement('button', {
-              type: 'button', className: 'dts-link', disabled: !props.writable || loading,
-              onClick: () => remove('f5'),
-            }, t('deleteModel')) : null,
-          ),
-          f5.installed ? props.boolField('f5Enabled', t('useF5'), t('useF5Hint')) : null,
-        ),
+        engineRow('Kokoro-82M (CPU)', kokoro),
+        engineRow('F5-TTS (GPU)', f5),
       )
     }
 
-
     const CLIENT_IT_TERMS = [
       { from: 'SQL', to: 'сиквел', whole: true, lang: 'ru' },
       { from: 'Nginx', to: 'энджинкс', whole: true, lang: 'ru' },
@@ -1171,14 +1225,19 @@ window.__ModuleLoader__.load({
       const [saved, setSaved] = React.useState(false)
       const [err, setErr] = React.useState('')
       const [integrations, setIntegrations] = React.useState({ voice: { installed: false }, messenger: { installed: false } })
-      const [telemetry, setTelemetry] = React.useState({ online: true, cacheHits: 0, sseOk: true, total: 0 })
+      const [telemetry, setTelemetry] = React.useState({ online: true, cacheHits: 0, sseOk: true, total: 0, sseClients: 0, breaker: [], provider: '', queue: 0 })
+      const [advancedOpen, setAdvancedOpen] = React.useState(() => {
+        try { return localStorage.getItem('dsh-tts/advancedOpen') === '1' } catch { /* localStorage unavailable */ return false }
+      })
+      const autoplay = useAutoplayGate()
+
       const ctx = props && props.ctx
       const scope = React.useMemo(() => {
         const s = (ctx && ctx.get && ctx.get('lanSettings')) || (ctx && ctx.settingsScope)
         if (!s || !s.bind) return null
         try {
           return s.bind({ namespace: NS })
-        } catch (_) {
+        } catch (_) { /* settings scope binding failed */ 
           return null
         }
       }, [ctx])
@@ -1188,7 +1247,7 @@ window.__ModuleLoader__.load({
           if (!scope || !scope.subscribe) return () => {}
           try {
             return scope.subscribe(cb) || (() => {})
-          } catch (_) {
+          } catch (_) { /* settings scope binding failed */ 
             return () => {}
           }
         }
@@ -1198,7 +1257,7 @@ window.__ModuleLoader__.load({
         if (!scope || !scope.getSnapshot) return SNAPSHOT_LOADING
         try {
           return scope.getSnapshot() || SNAPSHOT_LOADING
-        } catch (_) {
+        } catch (_) { /* settings scope binding failed */ 
           return SNAPSHOT_LOADING
         }
       }, [scope])
@@ -1235,18 +1294,33 @@ window.__ModuleLoader__.load({
           if (data && data.ok) setIntegrations(data)
         }).catch(() => {})
 
-        fetch('/dsh-tts/stats', { cache: 'no-store' }).then((res) => res.json()).then((st) => {
-          if (!alive || !st) return
-          setTelemetry((prev) => Object.assign({}, prev, {
-            cacheHits: st.cacheHits || 0,
-            total: st.total || 0,
-            online: true,
-          }))
-        }).catch(() => {
-          if (alive) setTelemetry((prev) => Object.assign({}, prev, { online: false }))
-        })
+        const loadTelemetry = () => {
+          fetch('/dsh-tts/stats', { cache: 'no-store' }).then((res) => res.json()).then((st) => {
+            if (!alive || !st) return
+            setTelemetry((prev) => Object.assign({}, prev, {
+              cacheHits: st.cacheHits || 0,
+              total: st.total || 0,
+              online: true,
+              breaker: st.breaker || prev.breaker || [],
+            }))
+          }).catch(() => {
+            if (alive) setTelemetry((prev) => Object.assign({}, prev, { online: false }))
+          })
+          fetch('/dsh-tts/status', { cache: 'no-store' }).then((res) => res.json()).then((st) => {
+            if (!alive || !st) return
+            setTelemetry((prev) => Object.assign({}, prev, {
+              sseClients: st.sseClients || 0,
+              sseOk: (st.sseClients || 0) >= 0,
+              provider: (player.audio && player.provider) || (player.queue[0] && player.queue[0].provider) || '',
+              queue: player.queue.length,
+            }))
+          }).catch(() => {})
+        }
+        loadTelemetry()
+        const telTimer = setInterval(loadTelemetry, 3000)
+        // interval cleaned by effect return below
 
-        return () => { alive = false }
+        return () => { alive = false; clearInterval(telTimer) }
       }, [])
 
       if (!draft) return React.createElement('div', { className: 'dts-wrap' }, t('loading'))
@@ -1263,7 +1337,7 @@ window.__ModuleLoader__.load({
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ provider: provider, value: value }),
         })
-        const data = await res.json().catch(() => ({}))
+        const data = await res.json().catch(() => ({ /* parse error */ }))
         if (!res.ok) throw new Error((data && data.error && data.error.message) || ('HTTP ' + res.status))
         if (data && data.credentials) setCredentials(data.credentials)
         setKeyDrafts((d) => Object.assign({}, d, { [provider]: '' }))
@@ -1277,7 +1351,7 @@ window.__ModuleLoader__.load({
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ provider: provider }),
           })
-          const data = await res.json().catch(() => ({}))
+          const data = await res.json().catch(() => ({ /* parse error */ }))
           if (!res.ok) throw new Error((data && data.error && data.error.message) || ('HTTP ' + res.status))
           if (data && data.credentials) setCredentials(data.credentials)
           setKeyDrafts((d) => Object.assign({}, d, { [provider]: '' }))
@@ -1298,7 +1372,7 @@ window.__ModuleLoader__.load({
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(Object.assign({}, draft, { keys: keys })),
           })
-          const data = await res.json().catch(() => ({}))
+          const data = await res.json().catch(() => ({ /* parse error */ }))
           if (!res.ok) throw new Error((data && data.error && data.error.message) || ('HTTP ' + res.status))
           applyPayload(data)
           setKeyDrafts({})
@@ -1317,6 +1391,9 @@ window.__ModuleLoader__.load({
         setSaved(true); setTimeout(() => setSaved(false), 2000)
       }
       const onClearCache = () => {
+        if (typeof window !== 'undefined' && window.confirm) {
+          if (!window.confirm(t('confirmClearCache'))) return
+        }
         clearCacheNow().catch((e) => setErr(String(e && e.message ? e.message : e)))
       }
 
@@ -1328,7 +1405,7 @@ window.__ModuleLoader__.load({
           .then((r) => r.json())
           .then((d) => {
             if (!d.ok) throw new Error((d.error && d.error.message) || 'HTTP error')
-            new Audio('data:' + d.mime + ';base64,' + d.audioBase64).play().catch(() => {})
+            new Audio('data:' + d.mime + ';base64,' + d.audioBase64).play().catch(() => { /* autoplay blocked */ })
           })
           .catch((e) => setErr(String(e && e.message ? e.message : e)))
       }
@@ -1363,16 +1440,31 @@ window.__ModuleLoader__.load({
         }),
         React.createElement('span', { className: 'dts-sub' }, hint))
 
-      const telemetryBadges = React.createElement('div', { className: 'dts-row', style: { marginBottom: '8px' } },
+      const autoplayBanner = autoplay.blocked
+        ? React.createElement('div', { className: 'dts-unlock' },
+            React.createElement('span', null, t('autoplayBlocked')),
+            React.createElement('button', {
+              type: 'button', className: 'dts-unlock-btn',
+              onClick: () => player.unlockAudio && player.unlockAudio(),
+            }, t('enableSound')),
+          )
+        : null
+      const breakerBadges = (telemetry.breaker || []).filter((b) => b && b.open).slice(0, 2)
+        .map((b) => React.createElement('span', { key: b.id, className: 'dts-badge dts-badge-bad' }, t('breakerOpen') + ': ' + b.id))
+      const telemetryBadges = React.createElement('div', { className: 'dts-row', style: { marginBottom: '8px' }, 'data-dsh-tts-telemetry': '1' },
         React.createElement('span', {
           className: 'dts-badge ' + (telemetry.online ? 'dts-badge-on' : 'dts-badge-bad'),
-        }, telemetry.online ? '🟢 ' + (t('statusOnline') || 'Host online') : '🔴 ' + (t('statusOffline') || 'Host offline')),
-        React.createElement('span', {
-          className: 'dts-badge dts-badge-on',
-        }, '⚡ SSE Active'),
+        }, telemetry.online ? t('statusOnline') : t('statusOffline')),
         React.createElement('span', {
-          className: 'dts-badge',
-        }, '💾 ' + (t('cacheStats') || 'Cache') + ': ' + telemetry.cacheHits + ' / ' + telemetry.total),
+          className: 'dts-badge ' + (telemetry.sseClients > 0 ? 'dts-badge-on' : ''),
+        }, t('sseState') + ': ' + (telemetry.sseClients || 0)),
+        React.createElement('span', { className: 'dts-badge' },
+          t('queueLen') + ': ' + (telemetry.queue || player.queue.length || 0)),
+        telemetry.provider ? React.createElement('span', { className: 'dts-badge' },
+          t('activeProvider') + ': ' + telemetry.provider) : null,
+        React.createElement('span', { className: 'dts-badge' },
+          t('cacheStats') + ': ' + telemetry.cacheHits + ' / ' + telemetry.total),
+        ...breakerBadges,
       )
       const titleLine = props && props.compact ? null : React.createElement('div', { className: 'dts-header' },
         React.createElement('div', { className: 'dts-page-title' }, '🔊 ' + t('title')),
@@ -1380,6 +1472,7 @@ window.__ModuleLoader__.load({
         telemetryBadges,
       )
       return React.createElement('div', { className: 'dts-wrap' },
+        autoplayBanner,
         React.createElement('div', { className: 'dts-block' },
           titleLine,
           React.createElement('label', { className: 'dts-row' },
@@ -1433,6 +1526,7 @@ window.__ModuleLoader__.load({
           React.createElement('div', { className: 'dts-sub' },
             t('chainHintCard')),
           React.createElement(ChainEditor, {
+            breaker: telemetry.breaker,
             t: t,
             value: draft && draft.chain ? draft.chain : [], writable: writable,
             credentials: credentials, keyDrafts: keyDrafts,
@@ -1482,16 +1576,33 @@ window.__ModuleLoader__.load({
           textField('azureRegion', t('azureRegion'), t('azureHint')),
         ),
         React.createElement('div', { className: 'dts-block' },
-          React.createElement('div', { className: 'dts-h' }, t('advancedTitle')),
-          React.createElement('div', { className: 'dts-sub' }, t('advancedHint')),
-          numberField('maxChars', t('maxChars'), t('maxCharsHint'), 100),
-          numberField('sentenceChars', t('sentenceChars'), t('sentenceCharsHint'), 20),
-          numberField('timeoutMs', t('timeoutMs'), t('timeoutMsHint'), 1000),
-          numberField('maxQueue', t('maxQueue'), t('maxQueueHint'), 1),
-          textField('openaiBaseUrl', t('openaiBaseUrl'), t('openaiBaseUrlHint')),
-          textField('mimoBaseUrl', t('mimoBaseUrl'), t('mimoBaseUrlHint')),
-          textField('mimoFormat', t('mimoFormat'), t('mimoFormatHint')),
-          textField('minimaxBin', t('minimaxBin'), t('minimaxBinHint')),
+          React.createElement('button', {
+            type: 'button',
+            className: 'dts-head',
+            'aria-expanded': advancedOpen,
+            onClick: () => {
+              setAdvancedOpen((v) => {
+                const next = !v
+                try { localStorage.setItem('dsh-tts/advancedOpen', next ? '1' : '0') } catch { /* private mode */ }
+                return next
+              })
+            },
+          },
+            React.createElement('div', { className: 'dts-headText' },
+              React.createElement('div', { className: 'dts-title' }, t('advancedTitle')),
+              React.createElement('div', { className: 'dts-sub' }, t('advancedHint')),
+            ),
+          ),
+          advancedOpen ? React.createElement('div', { className: 'dts-body' },
+            numberField('maxChars', t('maxChars'), t('maxCharsHint'), 100),
+            numberField('sentenceChars', t('sentenceChars'), t('sentenceCharsHint'), 20),
+            numberField('timeoutMs', t('timeoutMs'), t('timeoutMsHint'), 1000),
+            numberField('maxQueue', t('maxQueue'), t('maxQueueHint'), 1),
+            textField('openaiBaseUrl', t('openaiBaseUrl'), t('openaiBaseUrlHint')),
+            textField('mimoBaseUrl', t('mimoBaseUrl'), t('mimoBaseUrlHint')),
+            textField('mimoFormat', t('mimoFormat'), t('mimoFormatHint')),
+            textField('minimaxBin', t('minimaxBin'), t('minimaxBinHint')),
+          ) : null,
         ),
         React.createElement('div', { className: 'dts-foot' },
           React.createElement('button', { type: 'button', className: 'dts-link', disabled: !writable, onClick: onClearCache }, t('clearCache')),
@@ -1552,7 +1663,7 @@ window.__ModuleLoader__.load({
         React.createElement('button', {
           type: 'button', className: 'dts-link', style: { flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
           title: text,
-          onClick: () => playStandalone(text),
+          onClick: () => playStandalone(text), title: text,
         }, text.slice(0, 80)),
         React.createElement('button', {
           type: 'button', className: 'dts-link', title: '★',
@@ -1561,7 +1672,7 @@ window.__ModuleLoader__.load({
       )
       return React.createElement('div', { style: { position: 'relative', display: 'inline-flex', gap: '4px', alignItems: 'center' } },
         React.createElement('button', {
-          type: 'button', className: 'dts-link', title: 'Недавние',
+          type: 'button', className: 'dts-link', title: t('recent') || 'Recent',
           onClick: () => setShowList((v) => !v),
         }, '☰'),
         showList ? React.createElement('div', {
@@ -1572,7 +1683,7 @@ window.__ModuleLoader__.load({
           lists.favs.map((text) => row(text, true)),
           React.createElement('div', { className: 'dts-h' }, '⟳'),
           lists.items.filter((x) => !lists.favs.includes(x)).map((text) => row(text, false)),
-          !lists.items.length ? React.createElement('span', { className: 'dts-sub' }, '—') : null,
+          !lists.items.length ? React.createElement('span', { className: 'dts-sub' }, t('recentEmpty') || 'No recent speech yet') : null,
         ) : null,
         React.createElement('button', {
           type: 'button',
@@ -1590,11 +1701,10 @@ window.__ModuleLoader__.load({
     }
 
     /**
-     * Запасной перевод дока.
+     * Fallback translator for the dock.
      *
-     * Ставится при регистрации и живёт до конца работы страницы. Нужен
-     * потому, что подпись слота рисует ядро: `props.t` туда не доходит в
-     * принципе, и привязка — единственный способ дать ей язык.
+     * Bound at registration for the page lifetime. The core draws the slot label;
+     * props.t never reaches it, so the binder is the only way to give it a language.
      */
     let fallbackDockText = (key) => key
 
@@ -1629,7 +1739,7 @@ window.__ModuleLoader__.load({
       ctx.effect(() => {
         const undo = [addLocale('en', en), addLocale('ru', ru)]
         return () => { for (const off of undo) off() }
-      }, 'dsh-tts: словари')
+      }, 'dsh-tts: locales')
     // The sidebar draws the section label, not our component: props.t never
     // reaches it, so bind the translator to the namespace ourselves.
       const t = ctx.locale.bind(NS)
@@ -1673,7 +1783,7 @@ window.__ModuleLoader__.load({
     exports.apply = function apply(ctx) {
       registerSettings(ctx)
       registerSpeaker(ctx)
-      ctx.effect(() => listenForVoice(), 'dsh-tts: замолкать, когда человек заговорил')
+      ctx.effect(() => listenForVoice(), 'dsh-tts: barge-in on user speech')
       ctx.effect(() => {
         if (typeof window === 'undefined') return () => {}
         const onKey = (e) => {
@@ -1683,47 +1793,54 @@ window.__ModuleLoader__.load({
         }
         window.addEventListener('keydown', onKey)
         return () => window.removeEventListener('keydown', onKey)
-      }, 'dsh-tts: горячие клавиши')
+      }, 'dsh-tts: hotkeys')
       ctx.effect(() => {
         if (typeof window === 'undefined' || typeof EventSource === 'undefined') return () => {}
         let es = null
-        try {
-          es = new EventSource('/dsh-tts/stream')
-          es.addEventListener('utterance', (e) => {
-            try {
-              const item = JSON.parse(e.data)
-              if (!item || !item.id) return
-              if (seenIds.has(item.id)) return
-              seenIds.add(item.id)
-              if (seenIds.size > 500) {
-                const first = seenIds.values().next().value
-                seenIds.delete(first)
-              }
-              player.queue.push(item)
-              drainQueue()
-            } catch {}
-          })
-          es.addEventListener('chime', (e) => {
-            try {
-              const item = JSON.parse(e.data)
-              if (!item || !item.id) return
-              if (seenIds.has(item.id)) return
-              seenIds.add(item.id)
-              if (seenIds.size > 500) {
-                const first = seenIds.values().next().value
-                seenIds.delete(first)
-              }
-              player.queue.push(item)
-              drainQueue()
-            } catch {}
-          })
-        } catch {}
-        return () => { if (es) es.close() }
-      }, 'dsh-tts: потоковое получение звука по SSE')
+        let closed = false
+        let attempt = 0
+        let retryTimer = null
+        const onItem = (e) => {
+          try {
+            const item = JSON.parse(e.data)
+            if (!item || !item.id) return
+            if (seenIds.has(item.id)) return
+            seenIds.add(item.id)
+            if (seenIds.size > 500) {
+              const first = seenIds.values().next().value
+              seenIds.delete(first)
+            }
+            player.queue.push(item)
+            drainQueue()
+          } catch { /* ignore malformed SSE frame */ }
+        }
+        const connect = () => {
+          if (closed) return
+          try {
+            es = new EventSource('/dsh-tts/stream')
+            es.addEventListener('open', () => { attempt = 0 })
+            es.addEventListener('utterance', onItem)
+            es.addEventListener('chime', onItem)
+            es.onerror = () => {
+              try { es.close() } catch { /* already closed */ }
+              if (closed) return
+              attempt += 1
+              const delay = Math.min(15000, 500 * Math.pow(2, Math.min(attempt, 5)))
+              retryTimer = setTimeout(connect, delay)
+            }
+          } catch { /* EventSource constructor failed — poll remains */ }
+        }
+        connect()
+        return () => {
+          closed = true
+          if (retryTimer) clearTimeout(retryTimer)
+          if (es) { try { es.close() } catch { /* already closed */ } }
+        }
+      }, 'dsh-tts: SSE audio stream')
       ctx.effect(() => {
         const timer = setInterval(pollPending, 1000)
         return () => clearInterval(timer)
-      }, 'dsh-tts: опрос готовых озвучек')
+      }, 'dsh-tts: poll pending audio')
     }
     return module.exports
   },