@goodandready/dsh-tts 0.4.0 → 0.4.2

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

@@ -0,0 +1,398 @@
+    function TtsSection(props) {
+      // Translator comes from the slot because its registration sets locale.
+      const t = (props && props.t) || ((key) => key)
+      const [draft, setDraft] = React.useState(null)
+      const [credentials, setCredentials] = React.useState({})
+      const [keyDrafts, setKeyDrafts] = React.useState({})
+      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, 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)
+        if (!s || !s.bind) return null
+        try {
+          return s.bind({ namespace: NS })
+        } catch (_) {
+          return null
+        }
+      }, [ctx])
+
+      const subscribe = React.useMemo(() => {
+        return (cb) => {
+          if (!scope || !scope.subscribe) return () => {}
+          try {
+            return scope.subscribe(cb) || (() => {})
+          } catch (_) {
+            return () => {}
+          }
+        }
+      }, [scope])
+
+      const getSnapshot = React.useCallback(() => {
+        if (!scope || !scope.getSnapshot) return SNAPSHOT_LOADING
+        try {
+          return scope.getSnapshot() || SNAPSHOT_LOADING
+        } catch (_) {
+          return SNAPSHOT_LOADING
+        }
+      }, [scope])
+
+      const snap = (React.useSyncExternalStore
+        ? React.useSyncExternalStore(subscribe, getSnapshot, React.useCallback(() => SNAPSHOT_LOADING, []))
+        : null) || (scope && scope.getSnapshot ? scope.getSnapshot() : SNAPSHOT_LOADING)
+
+    // Snapshot status matters more than the value:
+    //   loading     — host has not answered yet;
+    //   unavailable — host answered but the settings namespace is not ready;
+    //   ready       — values are present.
+    // On unavailable, writable defaults true; without a status check the card
+    // looks like a working empty form.
+      const ready = !scope || (!!snap && snap.status === 'ready')
+      const writable = !scope ? true : (ready && snap.writable !== false)
+
+      const applyPayload = (data) => {
+        const cfg = data && data.config ? data.config : {}
+        setDraft(JSON.parse(JSON.stringify(cfg)))
+        setCredentials(data && data.credentials ? data.credentials : {})
+        player.enabled = !!cfg.speakReplies
+      }
+
+      React.useEffect(() => {
+        let alive = true
+        fetch('/dsh-tts/config', { cache: 'no-store' }).then((res) => res.json()).then((data) => {
+          if (!alive) return
+          applyPayload(data)
+        }).catch((e) => { if (alive) setErr(String(e && e.message ? e.message : e)) })
+
+        fetch('/dsh-tts/integrations', { cache: 'no-store' }).then((res) => res.json()).then((data) => {
+          if (!alive) return
+          if (data && data.ok) setIntegrations(data)
+        }).catch(() => {})
+
+        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; clearInterval(telTimer) }
+      }, [])
+
+      if (!draft) return React.createElement('div', { className: 'dts-wrap' }, t('loading'))
+
+      const setTop = (key, v) => setDraft((d) => Object.assign({}, d || {}, { [key]: v }))
+      const setDraftKey = (provider, value) => setKeyDrafts((d) => Object.assign({}, d, { [provider]: value }))
+
+      const commitKey = async (provider, raw) => {
+        const value = String(raw != null ? raw : ((keyDrafts && keyDrafts[provider]) || '')).trim()
+        if (!value) return
+        setErr('')
+        const res = await fetch('/dsh-tts/credential', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ provider: provider, value: value }),
+        })
+        const data = await res.json().catch(() => ({}))
+        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]: '' }))
+      }
+
+      const clearKey = async (provider) => {
+        setErr('')
+        try {
+          const res = await fetch('/dsh-tts/credential', {
+            method: 'DELETE',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ provider: provider }),
+          })
+          const data = await res.json().catch(() => ({}))
+          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]: '' }))
+        } catch (e) { setErr(String(e && e.message ? e.message : e)) }
+      }
+
+      const save = async () => {
+        setErr(''); setSaved(false)
+        if (!draft) return
+        try {
+          const keys = {}
+          Object.keys(keyDrafts || {}).forEach((p) => {
+            const v = String(keyDrafts[p] || '').trim()
+            if (v) keys[p] = v
+          })
+          const res = await fetch('/dsh-tts/config', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(Object.assign({}, draft, { keys: keys })),
+          })
+          const data = await res.json().catch(() => ({}))
+          if (!res.ok) throw new Error((data && data.error && data.error.message) || ('HTTP ' + res.status))
+          applyPayload(data)
+          setKeyDrafts({})
+          setSaved(true); setTimeout(() => setSaved(false), 2000)
+        } catch (e) { setErr(String(e && e.message ? e.message : e)) }
+      }
+
+      const onCommitKey = (provider, raw) => {
+        commitKey(provider, raw).catch((e) => setErr(String(e && e.message ? e.message : e)))
+      }
+
+      const clearCacheNow = async () => {
+        setErr('')
+        const res = await fetch('/dsh-tts/cache', { method: 'DELETE' })
+        if (!res.ok) throw new Error('HTTP ' + res.status)
+        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)))
+      }
+
+      const onPreview = (provider, model, voice, text) => {
+        fetch('/dsh-tts/preview', {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ provider, model, voice, text }),
+        })
+          .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(() => {})
+          })
+          .catch((e) => setErr(String(e && e.message ? e.message : e)))
+      }
+
+      const onPreviewPhrase = (phrase) => {
+        if (!phrase) return
+        const first = draft && draft.chain && draft.chain[0]
+        onPreview((first && first.provider) || 'kokoro', (first && first.model) || '', (first && first.voice) || '', phrase)
+      }
+
+      const boolField = (key, label, hint) => React.createElement('label', { className: 'dts-field' }, label,
+        React.createElement('input', {
+          type: 'checkbox', checked: !!(draft && draft[key]), disabled: !writable,
+          onChange: (e) => setTop(key, e.target.checked),
+        }),
+        React.createElement('span', { className: 'dts-sub' }, hint))
+
+      const numberField = (key, label, hint, step) => React.createElement('label', { className: 'dts-field' }, label,
+        React.createElement('input', {
+          type: 'number', step: step || 1,
+          className: 'dts-input',
+          value: draft && draft[key] !== undefined ? draft[key] : '', disabled: !writable,
+          onChange: (e) => setTop(key, Number(e.target.value)),
+        }),
+        React.createElement('span', { className: 'dts-sub' }, hint))
+
+      const textField = (key, label, hint) => React.createElement('label', { className: 'dts-field' }, label,
+        React.createElement('input', {
+          className: 'dts-input',
+          value: draft && draft[key] !== undefined ? draft[key] : '', disabled: !writable,
+          onChange: (e) => setTop(key, e.target.value),
+        }),
+        React.createElement('span', { className: 'dts-sub' }, hint))
+
+      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') : t('statusOffline')),
+        React.createElement('span', {
+          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')),
+        React.createElement('div', { className: 'dts-page-sub' }, t('subtitle')),
+        telemetryBadges,
+      )
+      return React.createElement('div', { className: 'dts-wrap' },
+        autoplayBanner,
+        React.createElement('div', { className: 'dts-block' },
+          titleLine,
+          React.createElement('label', { className: 'dts-row' },
+            React.createElement('input', {
+              type: 'checkbox', checked: !!(draft && draft.speakReplies), disabled: !writable,
+              onChange: (e) => setTop('speakReplies', e.target.checked),
+            }),
+            React.createElement('span', null, t('speakReplies')),
+          ),
+          React.createElement('div', { className: 'dts-sub' },
+            t('speakRepliesHint')),
+        ),
+        React.createElement(LocalEnginesEditor, {
+          t: t, writable: writable, draft: draft,
+          boolField: boolField, setTop: setTop,
+        }),
+        React.createElement(VoiceDuplexEditor, {
+          t: t, writable: writable, draft: draft,
+          boolField: boolField, setTop: setTop,
+          installed: !!(integrations && integrations.voice && integrations.voice.installed),
+        }),
+        React.createElement(MessengerIntegrationEditor, {
+          t: t, writable: writable, draft: draft,
+          boolField: boolField, setTop: setTop,
+          installed: !!(integrations && integrations.messenger && integrations.messenger.installed),
+        }),
+        React.createElement('div', { className: 'dts-block' },
+          React.createElement('div', { className: 'dts-h' }, t('pronTitle')),
+          boolField('enableItDictionary', t('enableItDictionary'), t('enableItDictionaryHint')),
+          React.createElement(PronEditor, {
+            t: t, writable: writable,
+            value: draft && draft.pronunciation ? draft.pronunciation : [],
+            onChange: (v) => setTop('pronunciation', v),
+            onPreviewPhrase: onPreviewPhrase,
+          }),
+        ),
+        React.createElement('div', { className: 'dts-block' },
+          React.createElement('div', { className: 'dts-h' }, t('rolesTitle')),
+          React.createElement(RolesEditor, {
+            t: t, writable: writable, onPreview: onPreview,
+            value: draft && draft.roles ? draft.roles : {},
+            onChange: (v) => setTop('roles', v),
+          }),
+        ),
+        React.createElement('div', { className: 'dts-block' },
+          React.createElement('div', { className: 'dts-h' }, t('statsTitle')),
+          React.createElement(StatsPanel, { t: t }),
+        ),
+        React.createElement('div', { className: 'dts-block' },
+          React.createElement('div', { className: 'dts-h' }, t('chainTitle')),
+          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,
+            onChange: (v) => setTop('chain', v),
+            onDraft: setDraftKey,
+            onCommitKey: onCommitKey,
+            onClearKey: clearKey,
+            onPreview: onPreview,
+          }),
+        ),
+        React.createElement('div', { className: 'dts-block' },
+          React.createElement('div', { className: 'dts-h' }, t('general')),
+          boolField('speakAsItGoes', t('speakAsItGoes'),
+            t('speakAsItGoesHint')),
+          numberField('rate', t('rate'), t('rateHint'), 0.1),
+          boolField('bargeIn', t('bargeIn'),
+            t('bargeInHint')),
+          boolField('announceApproval', t('announce'),
+            t('announceHint')),
+          boolField('skipCode', t('skipCode'),
+            t('skipCodeHint')),
+          boolField('cache', t('cache'),
+            t('cacheHint')),
+          numberField('cacheMaxMb', t('cacheMaxMb'), t('cacheMaxMbHint'), 10),
+          React.createElement('label', { className: 'dts-field' }, t('longReply'),
+            React.createElement('select', {
+              className: 'dts-input', value: (draft && draft.longReply) || 'truncate', disabled: !writable,
+              onChange: (e) => setTop('longReply', e.target.value),
+            }, ['truncate', 'summarize', 'full'].map((mode) => React.createElement('option', { key: mode, value: mode }, mode))),
+            React.createElement('span', { className: 'dts-sub' }, t('longReplyHint'))),
+          textField('summaryModel', t('summaryModel'), t('summaryModelHint')),
+          numberField('summarySentences', t('summarySentences'), t('summarySentencesHint'), 1),
+          boolField('autoDetect', t('autoDetect'), t('autoDetectHint')),
+          boolField('narrateQuotesOnly', t('narrateQuotesOnly'), t('narrateQuotesHint')),
+          boolField('skipActions', t('skipActions'), t('skipActionsHint')),
+          textField('removeRegex', t('removeRegex'), t('removeRegexHint')),
+          textField('customBaseUrl', t('customBaseUrl'), t('customBaseUrlHint')),
+          textField('customKeyEnv', t('customKeyEnv'), t('customKeyEnvHint')),
+          textField('approvalText', t('approvalText'), t('approvalHint')),
+          textField('questionText', t('questionText'), t('questionHint')),
+          textField('chime', t('chime'), t('chimeHint')),
+          textField('language', t('language'), t('languageHint')),
+          textField('piperModel', t('piperModel'), t('piperModelHint')),
+          textField('piperBin', t('piperBin'), t('binHint')),
+          textField('espeakBin', t('espeakBin'), t('espeakHint')),
+          textField('edgeBin', t('edgeBin'), t('edgeHint')),
+          textField('azureRegion', t('azureRegion'), t('azureHint')),
+        ),
+        React.createElement('div', { className: 'dts-block' },
+          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')),
+          React.createElement('button', { type: 'button', className: 'dts-save', disabled: !writable, onClick: save }, t('save')),
+          saved ? React.createElement('span', { className: 'dts-ok' }, t('saved')) : null,
+          err ? React.createElement('span', { className: 'dts-bad' }, err) : null,
+        ),
+      )
+    }
+
+

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

@@ -0,0 +1,235 @@
+    function TtsCard(props) {
+      const t = (props && props.t) || ((key) => key)
+      const [open, setOpen] = React.useState(false)
+      return React.createElement('li', { className: 'dts-card' },
+        React.createElement('button', {
+          type: 'button',
+          className: 'dts-head',
+          onClick: () => setOpen(!open),
+          'aria-expanded': open,
+        },
+          React.createElement('div', { className: 'dts-headText' },
+            React.createElement('div', { className: 'dts-title' }, t('title')),
+            React.createElement('div', { className: 'dts-sub' }, t('cardHint')),
+          ),
+          ChevronIcon
+            ? React.createElement(ChevronIcon, { className: 'dts-chev' + (open ? ' dts-chevOpen' : '') })
+            : React.createElement('svg', {
+                className: 'dts-chev' + (open ? ' dts-chevOpen' : ''),
+                width: 14, height: 14, viewBox: '0 0 16 16', fill: 'none',
+              },
+                React.createElement('path', {
+                  d: 'M4 6l4 4 4-4', stroke: 'currentColor', 'stroke-width': 1.5,
+                  'stroke-linecap': 'round', 'stroke-linejoin': 'round',
+                }),
+              ),
+        ),
+        open ? React.createElement('div', { className: 'dts-body' },
+          React.createElement(ErrorBoundary, null,
+            React.createElement(TtsSection, Object.assign({}, props, { compact: true, ctx: props && props.ctx })),
+          ),
+        ) : null,
+      )
+    }
+
+    // Input-dock button: shows what is playing, stop control, and recents for replay.
+    function SpeakerControl(props) {
+    // A slot with `locale` injects translations into props; the fallback is the
+    // binder created at registration, in case the slot drops translations.
+      const t = (props && props.t) || fallbackDockText
+      const p = usePlayer()
+      const [showList, setShowList] = React.useState(false)
+      const active = !!p.audio || p.queue.length > 0 || p.busy
+      const [, force] = React.useReducer((n) => n + 1, 0)
+      if (!active && !showList) return null
+      const lists = recent.list()
+      const row = (text, starred) => React.createElement('div', { className: 'dts-row', key: text.slice(0, 24) + starred },
+        React.createElement('button', {
+          type: 'button', className: 'dts-link', style: { flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+          title: text,
+          onClick: () => playStandalone(text), title: text,
+        }, text.slice(0, 80)),
+        React.createElement('button', {
+          type: 'button', className: 'dts-link', title: '★',
+          onClick: () => { recent.toggleFav(text); force() },
+        }, starred ? '★' : '☆'),
+      )
+      return React.createElement('div', { style: { position: 'relative', display: 'inline-flex', gap: '4px', alignItems: 'center' } },
+        React.createElement('button', {
+          type: 'button', className: 'dts-link', title: t('recent') || 'Recent',
+          onClick: () => setShowList((v) => !v),
+        }, '☰'),
+        showList ? React.createElement('div', {
+          className: 'dts-wrap',
+          style: { position: 'absolute', bottom: '36px', right: 0, zIndex: 30, maxHeight: '320px', overflowY: 'auto', background: 'var(--dsw-alias-bg-layer-2)', border: '1px solid var(--dsw-alias-border-l2)', borderRadius: '12px', padding: '10px 12px', minWidth: '260px', flexDirection: 'column', gap: '6px', display: 'flex' },
+        },
+          lists.favs.length ? React.createElement('div', { className: 'dts-h' }, '★') : null,
+          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' }, t('recentEmpty') || 'No recent speech yet') : null,
+        ) : null,
+        React.createElement('button', {
+          type: 'button',
+          className: 'dts-link',
+          title: p.paused ? t('dockResume') : t('dockPause'),
+          onClick: togglePause,
+        }, p.paused ? '▶' : '❚❚'),
+        React.createElement('button', {
+          type: 'button',
+          className: 'dts-link',
+          title: t('dockStop'),
+          onClick: stopPlayback,
+        }, '■'),
+      )
+    }
+
+    /**
+     * Fallback translator for the dock.
+     *
+     * 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
+
+    function registerSpeaker(ctx) {
+    // `locale` in the slot descriptor is how core injects translations into props.
+    // Without it the dock would show raw keys only.
+      fallbackDockText = ctx.locale.bind(NS)
+      ctx.slots.inject('conversation.input.dock', () => ctx.slots.register(
+        {
+          name: 'conversation.input.dock',
+          id: '@goodandready/dsh-tts',
+          locale: NS,
+          order: 5,
+          label: () => fallbackDockText('dockLabel'),
+        },
+        SpeakerControl,
+      ))
+    }
+
+    function registerSettings(ctx) {
+    // Dictionary packages may also register languages for other namespaces.
+    // Core throws on duplicate namespace+language; an unguarded call used to
+    // take down the whole plugin ("Failed to load plugins"). Register each
+    // language separately: skip if taken; English still lands.
+      const addLocale = (locale, dictionary) => {
+        try {
+          return ctx.locale.register(NS, locale, dictionary)
+        } catch (alreadyTaken) {
+          return () => {}
+        }
+      }
+      ctx.effect(() => {
+        const undo = [addLocale('en', en), addLocale('ru', ru)]
+        return () => { for (const off of undo) off() }
+      }, '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)
+    // Primary settings home is the plugin-settings tab card. The tab looks up
+    // a slot by entryKey equal to the namespace name: key must equal NS or
+    // the card never appears, with no log error.
+      const tryPluginItem = () => {
+        try {
+          const res = ctx.slots.inject('settings.plugin.item', () => ctx.slots.register(
+            {
+              name: 'settings.plugin.item',
+              key: NS,
+              locale: NS,
+              inject: () => ({ ctx: ctx }),
+            },
+            TtsCard,
+          ))
+          if (res === false) return false
+          return true
+        } catch (noPluginItemSlot) {
+          return false
+        }
+      }
+      if (tryPluginItem()) return
+    // Fallback for builds without settings.plugin.item: keep the sidebar section
+    // so settings cannot disappear.
+      ctx.slots.inject('settings.section', () => ctx.slots.register(
+        {
+          name: 'settings.section',
+          id: '@goodandready/dsh-tts',
+          order: 32,
+          locale: NS,
+          label: () => t('title'),
+          inject: () => ({ ctx: ctx }),
+        },
+        (props) => React.createElement(ErrorBoundary, null, React.createElement(TtsSection, props)),
+      ))
+    }
+
+    exports.inject = ['slots', 'settingsScope', 'locale']
+    exports.apply = function apply(ctx) {
+      registerSettings(ctx)
+      registerSpeaker(ctx)
+      ctx.effect(() => listenForVoice(), 'dsh-tts: barge-in on user speech')
+      ctx.effect(() => {
+        if (typeof window === 'undefined') return () => {}
+        const onKey = (e) => {
+          if (e.ctrlKey && e.key === 'Escape') { togglePause(); e.preventDefault() }
+          else if (e.altKey && (e.key === 's' || e.key === 'S' || e.key === 'ы')) { stopPlayback(); e.preventDefault() }
+          else if (e.altKey && e.key === 'ArrowRight') { skipCurrent(); e.preventDefault() }
+        }
+        window.addEventListener('keydown', onKey)
+        return () => window.removeEventListener('keydown', onKey)
+      }, 'dsh-tts: hotkeys')
+      ctx.effect(() => {
+        if (typeof window === 'undefined' || typeof EventSource === 'undefined') return () => {}
+        let es = null
+        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: poll pending audio')
+    }
+    return module.exports
+  },
+})
+
+// ModelManager UI placeholder - manual install buttons for Kokoro/F5
+// Actual implementation would show download progress and status
+