@goodandready/dsh-tts 0.4.1 → 0.4.2

package/lib/breaker.js

@@ -0,0 +1,64 @@
+// Soft circuit breaker for provider fallback (runtime state only).
+// Tracks consecutive failures per chain id and skips a provider during cooldown.
+
+const DEFAULT_THRESHOLD = 3
+const DEFAULT_COOLDOWN_MS = 60000
+
+export function createProviderBreaker(options = {}) {
+  const threshold = options.threshold || DEFAULT_THRESHOLD
+  const cooldownMs = options.cooldownMs || DEFAULT_COOLDOWN_MS
+  const now = options.now || (() => Date.now())
+  const state = new Map()
+
+  function slot(id) {
+    let s = state.get(id)
+    if (!s) {
+      s = { failCount: 0, okCount: 0, lastError: '', lastFailAt: 0, openUntil: 0 }
+      state.set(id, s)
+    }
+    return s
+  }
+
+  function isOpen(id) {
+    const s = slot(id)
+    return s.openUntil > now()
+  }
+
+  function recordFailure(id, error) {
+    const s = slot(id)
+    s.failCount += 1
+    s.lastError = String((error && error.message) || error || 'failure').slice(0, 240)
+    s.lastFailAt = now()
+    if (s.failCount >= threshold) {
+      s.openUntil = now() + cooldownMs
+    }
+  }
+
+  function recordSuccess(id) {
+    const s = slot(id)
+    s.okCount += 1
+    s.failCount = 0
+    s.openUntil = 0
+  }
+
+  function snapshot(ids) {
+    const list = Array.isArray(ids) ? ids : [...state.keys()]
+    return list.map((id) => {
+      const s = slot(id)
+      return {
+        id,
+        failCount: s.failCount,
+        okCount: s.okCount,
+        lastError: s.lastError,
+        open: isOpen(id),
+        openUntil: s.openUntil || 0,
+      }
+    })
+  }
+
+  function reset() {
+    state.clear()
+  }
+
+  return { isOpen, recordFailure, recordSuccess, snapshot, reset, threshold, cooldownMs }
+}

package/lib/cache.js

@@ -35,7 +35,7 @@ export function createSpeechCache({ root, maxBytes }) {
       try {
         const meta = JSON.parse(await fs.promises.readFile(path.join(dir, name.slice(0, -AUDIO_EXT.length) + '.json'), 'utf8'))
         if (meta && typeof meta.at === 'number') at = meta.at
-      } catch (noMeta) { /* старьё без меты — вытесним первым */ }
+      } catch (noMeta) { /* legacy entry without meta — evict as first */ }
       out.push({ full, meta: name.slice(0, -AUDIO_EXT.length) + '.json', size: st.size, at })
     }
     return out

package/lib/client-src/10-styles.js

@@ -22,8 +22,8 @@
       '.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}' +
@@ -33,15 +33,15 @@
       '.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 rgba(16,185,129,0.2)}' +
       '.dts-grow{flex:1;min-width:100px}'
 
     const setCssId = 'dsh-tts/settings.module.css'

package/lib/client-src/20-player.js

@@ -3,6 +3,38 @@
     // 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(() => {})
+          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: '',
@@ -14,13 +46,15 @@
       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 */ }
       }
     }
 
@@ -55,8 +89,8 @@
             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 */ }
       })
     }
 
@@ -71,7 +105,7 @@
           utterance.onend = () => resolve()
           utterance.onerror = () => resolve()
           window.speechSynthesis.speak(utterance)
-        } catch (noSpeech) { resolve() }
+        } catch { resolve() /* no speechSynthesis */ }
       })
     }
 
@@ -86,7 +120,7 @@
         const audio = new Audio(url)
         audio.preload = 'auto'
         item.prepared = { audio, url }
-      } catch (err) { /* decode error */ }
+      } catch { /* decode error — item stays unprepared */ }
       return item
     }
 
@@ -114,7 +148,7 @@
             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()
@@ -123,11 +157,14 @@
           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()
         }
@@ -156,26 +193,27 @@
     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()
@@ -185,7 +223,7 @@
       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()
@@ -239,7 +277,7 @@
           player.queue.push(item)
         }
         if (player.queue.length) drainQueue()
-      } catch (hostRestarting) { /* хост перезапускается */ }
+      } catch (hostRestarting) { /* host restarting */ }
     }
 
     // Recent utterances: last reply texts and favorites (localStorage).
@@ -250,7 +288,7 @@
         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

package/lib/client-src/30-locales.js

@@ -1,5 +1,23 @@
     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',
 
@@ -162,6 +180,24 @@
     }
     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': 'Кэш',
 

package/lib/client-src/40-editors.js

@@ -57,6 +57,13 @@
               }, 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' },
+                (hit.open ? t('breakerOpen') + ' · ' : '') + (hit.lastError || '')
+              )
+            })(),
           )
         }),
         React.createElement('div', { className: 'dts-row' },
@@ -72,86 +79,59 @@
     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' },

package/lib/client-src/50-settings.js

@@ -7,7 +7,12 @@
       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 { 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)
@@ -71,18 +76,33 @@
           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'))
@@ -153,6 +173,9 @@
         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)))
       }
 
@@ -199,16 +222,31 @@
         }),
         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')),
@@ -216,6 +254,7 @@
         telemetryBadges,
       )
       return React.createElement('div', { className: 'dts-wrap' },
+        autoplayBanner,
         React.createElement('div', { className: 'dts-block' },
           titleLine,
           React.createElement('label', { className: 'dts-row' },
@@ -269,6 +308,7 @@
           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,
@@ -318,16 +358,33 @@
           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')),