@goodandready/dsh-tts 0.4.1 → 0.4.5

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

@@ -7,14 +7,19 @@
       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])
@@ -24,7 +29,7 @@
           if (!scope || !scope.subscribe) return () => {}
           try {
             return scope.subscribe(cb) || (() => {})
-          } catch (_) {
+          } catch (_) { /* settings scope binding failed */ 
             return () => {}
           }
         }
@@ -34,7 +39,7 @@
         if (!scope || !scope.getSnapshot) return SNAPSHOT_LOADING
         try {
           return scope.getSnapshot() || SNAPSHOT_LOADING
-        } catch (_) {
+        } catch (_) { /* settings scope binding failed */ 
           return SNAPSHOT_LOADING
         }
       }, [scope])
@@ -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'))
@@ -99,7 +119,7 @@
           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]: '' }))
@@ -113,7 +133,7 @@
             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]: '' }))
@@ -134,7 +154,7 @@
             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({})
@@ -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)))
       }
 
@@ -164,7 +187,7 @@
           .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)))
       }
@@ -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')),

package/lib/client-src/60-card-dock.js

@@ -47,7 +47,7 @@
         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: '★',
@@ -56,7 +56,7 @@
       )
       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', {
@@ -67,7 +67,7 @@
           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',
@@ -85,11 +85,10 @@
     }
 
     /**
-     * Запасной перевод дока.
+     * 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
 
@@ -124,7 +123,7 @@
       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)
@@ -168,7 +167,7 @@
     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) => {
@@ -178,47 +177,54 @@
         }
         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
   },