@goodandready/dsh-tts 0.4.27 → 0.4.28

package/lib/client.js

@@ -21,10 +21,12 @@ window.__ModuleLoader__.load({
     const ROW_CONFIG_KEY = PKG + '#' + ROW_ID
     const PROVIDERS = [
       'openai', 'elevenlabs', 'google', 'azure', 'groq', 'deepgram', 'openrouter',
-      'edge', 'piper', 'espeak',
+      'siliconflow', 'deepinfra', 'fireworks', 'mimo', 'custom',
+      'edge', 'piper', 'espeak', 'minimax',
     ]
     const CLOUD = {
-      openai: 1, elevenlabs: 1, google: 1, azure: 1, groq: 1, deepgram: 1, openrouter: 1, custom: 1,
+      openai: 1, elevenlabs: 1, google: 1, azure: 1, groq: 1, deepgram: 1, openrouter: 1,
+      siliconflow: 1, deepinfra: 1, fireworks: 1, mimo: 1, custom: 1,
     }
     // Hints stay generic: concrete provider model IDs rot quickly.
     const MODEL_HINT = {
@@ -35,9 +37,15 @@ window.__ModuleLoader__.load({
       groq: 'provider default',
       deepgram: 'provider default (English-only voices)',
       openrouter: 'provider/model id',
-      edge: 'BCP-47 voice, e.g. ru-RU-SvetlanaNeural',
+      siliconflow: 'model id (e.g. FunAudioLLM/CosyVoice2-0.5B)',
+      deepinfra: 'model id (e.g. hexgrad/Kokoro-82M)',
+      fireworks: 'model id (e.g. kokoro)',
+      mimo: 'model id (e.g. mimo-v2.5-tts)',
+      custom: 'custom model',
+      minimax: 'model id',
+      edge: 'BCP-47 voice, e.g. en-US-AriaNeural',
       piper: 'path to .onnx',
-      espeak: 'language code, e.g. ru',
+      espeak: 'language code, e.g. en',
       kokoro: 'not bundled — offline neural runtime unavailable',
       f5: 'not bundled — offline neural runtime unavailable',
     }
@@ -76,7 +84,7 @@ window.__ModuleLoader__.load({
                   style: { marginTop: '10px', fontSize: '12px', padding: '4px 10px' },
                   onClick: () => this.setState({ hasError: false, error: null }),
                 },
-                'Retry',
+                (typeof fallbackDockText === 'function' ? fallbackDockText('retry') : 'Retry'),
               ),
             )
           }
@@ -167,6 +175,8 @@ window.__ModuleLoader__.load({
         }
       } catch { /* no AudioContext */ }
       setAutoplayBlocked(false)
+      player.blocked = false
+      playerChanged()
       drainQueue()
     }
 
@@ -189,6 +199,7 @@ window.__ModuleLoader__.load({
       bargeIn: true,
       busy: false,
       paused: false,
+      blocked: false,
       listeners: new Set(),
       unlockAudio,
       useAutoplayGate,
@@ -293,6 +304,12 @@ window.__ModuleLoader__.load({
             if (doneCalled) return
             doneCalled = true
             currentAudioResolve = null
+            if (player.audio) {
+              try {
+                player.audio.pause()
+                player.audio.currentTime = 0
+              } catch { /* already paused */ }
+            }
             try { URL.revokeObjectURL(url) } catch { /* URL already revoked */ }
             item.prepared = null
             player.audio = null
@@ -303,9 +320,27 @@ window.__ModuleLoader__.load({
           audio.onended = done
           audio.onerror = done
           audio.play().catch((playErr) => {
-            // Autoplay without a user gesture is blocked — surface unlock UX, then stop this chunk.
+            // Autoplay without a user gesture is blocked — retain queue and surface unlock UX (#160)
             if (playErr && (playErr.name === 'NotAllowedError' || playErr.name === 'SecurityError')) {
+              player.blocked = true
               setAutoplayBlocked(true)
+              player.queue.unshift(item)
+              currentAudioResolve = null
+              player.audio = null
+              player.busy = false
+              playerChanged()
+              if (typeof window !== 'undefined') {
+                const onUserGesture = () => {
+                  window.removeEventListener('click', onUserGesture)
+                  window.removeEventListener('keydown', onUserGesture)
+                  window.removeEventListener('touchstart', onUserGesture)
+                  unlockAudio()
+                }
+                window.addEventListener('click', onUserGesture, { once: true })
+                window.addEventListener('keydown', onUserGesture, { once: true })
+                window.addEventListener('touchstart', onUserGesture, { once: true })
+              }
+              return
             }
             done()
           })
@@ -317,12 +352,11 @@ window.__ModuleLoader__.load({
     }
 
     async function drainQueue() {
-      if (player.busy) return
+      if (player.busy || player.blocked || player.paused) return
       player.busy = true
       playerChanged()
       try {
-        while (player.queue.length) {
-          if (player.paused) break
+        while (player.queue.length && !player.blocked && !player.paused) {
           const item = player.queue.shift()
           if (!item || item.kind === 'reserved') continue
           if (item.kind === 'chime') { await playChime(item.chime || player.chime); continue }
@@ -345,7 +379,10 @@ window.__ModuleLoader__.load({
       player.queue.length = 0
       player.paused = false
       if (player.audio) {
-        try { player.audio.pause() } catch { /* already paused */ }
+        try {
+          player.audio.pause()
+          player.audio.currentTime = 0
+        } catch { /* already paused */ }
       }
       if (currentAudioResolve) {
         currentAudioResolve()
@@ -365,10 +402,15 @@ window.__ModuleLoader__.load({
     }
 
     function skipCurrent() {
+      if (player.audio) {
+        try {
+          player.audio.pause()
+          player.audio.currentTime = 0
+        } catch { /* ignore pause error */ }
+      }
       if (currentAudioResolve) {
         currentAudioResolve()
-      } else if (player.audio) {
-        try { player.audio.pause() } catch (already) { /* already stopped */ }
+      } else {
         player.audio = null
         playerChanged()
         if (player.queue.length) drainQueue()
@@ -392,70 +434,83 @@ window.__ModuleLoader__.load({
       return () => window.removeEventListener('dsh-voice:speaking', onSpeaking)
     }
 
-        // SSE Realtime Stream Connection with Exponential Backoff & Jitter
-    let sseAttempt = 0
-    let sseTimer = null
-    let sseSource = null
+    // Unified SSE Realtime Stream Connection (#158)
+    let activeSse = null
+    let activeSseAttempt = 0
+    let activeSseTimer = null
+    let sseDisposed = false
 
-    function connectSseStream() {
-      if (typeof window === 'undefined' || typeof window.EventSource === 'undefined') return
-      if (sseSource) {
-        try { sseSource.close() } catch (alreadyClosed) { /* intentional cleanup */ }
-        sseSource = null
+    function startSseStream() {
+      if (typeof window === 'undefined' || typeof window.EventSource === 'undefined') return () => {}
+      sseDisposed = false
+
+      const onItem = (e) => {
+        try {
+          const item = JSON.parse(e.data)
+          if (!item || !item.id) return
+          if (player.enabled === false) return
+          player.after = item.id
+          if (seenIds.has(item.id)) return
+          seenIds.add(item.id)
+          if (seenIds.size > 500) {
+            const first = seenIds.values().next().value
+            seenIds.delete(first)
+          }
+          if (item.text) recent.add(item.text)
+          player.queue.push(item)
+          drainQueue()
+        } catch { /* ignore malformed SSE */ }
       }
-      try {
-        sseSource = new EventSource('/dsh-tts/stream')
-        sseSource.onopen = () => {
-          sseAttempt = 0
+
+      const onChime = (e) => {
+        try {
+          const item = JSON.parse(e.data)
+          if (!item) return
+          if (player.enabled === false) return
+          player.queue.push(item)
+          drainQueue()
+        } catch {}
+      }
+
+      const connect = () => {
+        if (sseDisposed) return
+        if (activeSse) {
+          try { activeSse.close() } catch {}
+          activeSse = null
         }
-        sseSource.addEventListener('utterance', (e) => {
-          sseAttempt = 0
-          try {
-            const item = JSON.parse(e.data)
-            if (item && item.id) {
-              player.after = item.id
-              if (!seenIds.has(item.id)) {
-                seenIds.add(item.id)
-                if (seenIds.size > 500) {
-                  const first = seenIds.values().next().value
-                  seenIds.delete(first)
-                }
-                if (item.text) recent.add(item.text)
-                player.queue.push(item)
-                drainQueue()
-              }
-            }
-          } catch (parseErr) { /* ignore malformed SSE payload */ }
-        })
-        sseSource.addEventListener('chime', (e) => {
-          sseAttempt = 0
-          try {
-            const item = JSON.parse(e.data)
-            if (item) {
-              player.queue.push(item)
-              drainQueue()
+        try {
+          const es = new EventSource('/dsh-tts/stream')
+          activeSse = es
+          es.onopen = () => { activeSseAttempt = 0 }
+          es.addEventListener('utterance', onItem)
+          es.addEventListener('chime', onChime)
+          es.onerror = () => {
+            if (activeSse === es) {
+              try { es.close() } catch {}
+              activeSse = null
             }
-          } catch (parseErr) { /* ignore malformed chime payload */ }
-        })
-        sseSource.onerror = () => {
-          if (sseSource) {
-            try { sseSource.close() } catch (alreadyClosed) { /* intentional cleanup */ }
-            sseSource = null
+            if (sseDisposed) return
+            activeSseAttempt++
+            const delay = Math.min(10000, 500 * Math.pow(2, Math.min(activeSseAttempt, 5)))
+            if (activeSseTimer) clearTimeout(activeSseTimer)
+            activeSseTimer = setTimeout(connect, delay)
           }
-          sseAttempt++
-          const baseDelay = Math.min(10000, 500 * Math.pow(2, sseAttempt - 1))
-          const jitter = baseDelay * (Math.random() * 0.6 - 0.3)
-          const delay = Math.max(200, Math.floor(baseDelay + jitter))
-          if (sseTimer) clearTimeout(sseTimer)
-          sseTimer = setTimeout(() => {
-            connectSseStream()
-          }, delay)
+        } catch { /* EventSource failed */ }
+      }
+
+      connect()
+
+      return () => {
+        sseDisposed = true
+        if (activeSseTimer) clearTimeout(activeSseTimer)
+        if (activeSse) {
+          try { activeSse.close() } catch {}
+          activeSse = null
         }
-      } catch (esErr) { /* EventSource failed */ }
+      }
     }
 
-async function pollPending() {
-        connectSseStream()
+    async function pollPending() {
       try {
         const st = await fetch('/dsh-tts/status', { cache: 'no-store' })
         if (!st.ok) return
@@ -463,7 +518,7 @@ async function pollPending() {
         player.enabled = !!(meta && meta.speakReplies)
         if (meta && typeof meta.rate === 'number') player.rate = meta.rate
         if (meta && meta.chime) player.chime = meta.chime
-          if (meta && meta.roles) player.roles = meta.roles
+        if (meta && meta.roles) player.roles = meta.roles
         if (meta && typeof meta.bargeIn === 'boolean') player.bargeIn = meta.bargeIn
         if (!player.enabled) return
         const res = await fetch('/dsh-tts/pending?after=' + encodeURIComponent(player.after || ''), { cache: 'no-store' })
@@ -471,8 +526,6 @@ async function pollPending() {
         const data = await res.json()
         const items = data && Array.isArray(data.items) ? data.items : []
         for (const item of items) {
-    // Queue slot reserved but synthesis still running — wait for the next poll
-    // or phrase order would break.
           if (item.kind === 'reserved') break
           player.after = item.id
           if (seenIds.has(item.id)) continue
@@ -485,7 +538,7 @@ async function pollPending() {
           player.queue.push(item)
         }
         if (player.queue.length) drainQueue()
-      } catch (hostRestarting) { /* host restarting */ }
+      } catch { /* host restarting */ }
     }
 
     // Recent utterances: last reply texts and favorites (localStorage).
@@ -514,8 +567,16 @@ async function pollPending() {
     }
     const recent = recentStore()
 
-    // One-shot playback outside the queue: replay from recents.
+    // Unified playback through the shared player controller (#159)
+    function playAudioItem(item) {
+      stopPlayback()
+      player.queue.push(item)
+      drainQueue()
+    }
+
     function playStandalone(text) {
+      if (!text) return
+      stopPlayback()
       fetch('/dsh-tts/speak', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -523,13 +584,41 @@ async function pollPending() {
       })
         .then((r) => r.json())
         .then((d) => {
-          if (!d || !d.ok) return
-          const audio = new Audio('data:' + (d.mime || 'audio/mpeg') + ';base64,' + d.audioBase64)
-          audio.play().catch(() => { /* chime autoplay blocked or interrupted */ })
+          if (!d || !d.ok || !d.audioBase64) return
+          playAudioItem({
+            id: `replay-${Date.now()}`,
+            text,
+            mime: d.mime || 'audio/mpeg',
+            audioBase64: d.audioBase64,
+          })
+        })
+        .catch(() => {})
+    }
+
+    function previewSpeech(provider, model, voice, text) {
+      stopPlayback()
+      return 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 || !d.ok) throw new Error((d && d.error && d.error.message) || 'HTTP error')
+          playAudioItem({
+            id: `preview-${Date.now()}`,
+            text,
+            mime: d.mime || 'audio/mpeg',
+            audioBase64: d.audioBase64,
+          })
         })
-        .catch(() => { /* chime fetch failed or not found */ })
     }
 
+    player.playAudioItem = playAudioItem
+    player.previewSpeech = previewSpeech
+    player.startSseStream = startSseStream
+    player.skipCurrent = skipCurrent
+
     function exportAudioClip(text) {
       let phrase = text || player.lastText
       if (!phrase) {
@@ -565,7 +654,6 @@ async function pollPending() {
     function credOf(map, provider) {
       return (map && map[provider]) || { configured: false, writable: true, ref: '' }
     }
-
     const en = {
       'dockLabel': 'Speech',
       'dockPause': 'Pause',
@@ -760,6 +848,17 @@ async function pollPending() {
       'updaterUpdating': 'Updating…',
       'updaterSuccess': 'Plugin updated successfully! Please restart DSH service.',
       'updaterFailed': 'Update check failed: ',
+      'exportJson': '📥 Export JSON',
+      'importJson': '📤 Import JSON',
+      'invalidJsonFormat': 'Invalid dictionary JSON format',
+      'subtitle': 'Text-to-speech for DeepSeek Harness',
+      'available': 'available',
+      'dockSkip': 'Skip',
+      'longReplyTruncate': 'Truncate',
+      'longReplySummarize': 'Summarize',
+      'longReplyFull': 'Full',
+      'unlockAudio': 'Click to unlock audio',
+      'errorLoading': 'Error loading settings: ',
     }
 
     const zh = {
@@ -959,6 +1058,14 @@ async function pollPending() {
       'updaterUpdating': '正在更新…',
       'updaterSuccess': '插件更新成功！请重启 DSH 服务以生效。',
       'updaterFailed': '更新检查失败：',
+      'subtitle': 'DeepSeek Harness 语音合成插件',
+      'available': '可用',
+      'dockSkip': '跳过',
+      'longReplyTruncate': '截断',
+      'longReplySummarize': '总结',
+      'longReplyFull': '完整朗读',
+      'unlockAudio': '点击解锁音频',
+      'errorLoading': '加载设置失败：',
     }
     function ChainEditor(props) {
       // Translator comes from the card: the slot passes props.t only to it.
@@ -1094,7 +1201,24 @@ async function pollPending() {
       )
     }
 
-    const CLIENT_IT_TERMS = []
+    const CLIENT_IT_TERMS = [
+      { from: 'API', to: 'A P I', whole: true, lang: '' },
+      { from: 'CLI', to: 'C L I', whole: true, lang: '' },
+      { from: 'CPU', to: 'C P U', whole: true, lang: '' },
+      { from: 'GPU', to: 'G P U', whole: true, lang: '' },
+      { from: 'RAM', to: 'ram', whole: true, lang: '' },
+      { from: 'SQL', to: 'sequel', whole: true, lang: '' },
+      { from: 'UI', to: 'U I', whole: true, lang: '' },
+      { from: 'URL', to: 'U R L', whole: true, lang: '' },
+      { from: 'UUID', to: 'U U I D', whole: true, lang: '' },
+      { from: 'JSON', to: 'j-son', whole: true, lang: '' },
+      { from: 'YAML', to: 'yam-el', whole: true, lang: '' },
+      { from: 'HTML', to: 'H T M L', whole: true, lang: '' },
+      { from: 'CSS', to: 'C S S', whole: true, lang: '' },
+      { from: 'SSH', to: 'S S H', whole: true, lang: '' },
+      { from: 'DNS', to: 'D N S', whole: true, lang: '' },
+      { from: 'IP', to: 'I P', whole: true, lang: '' },
+    ]
 
     // Pronunciation dictionary editor: rules apply top-down.
     function PronEditor(props) {
@@ -1426,7 +1550,7 @@ async function pollPending() {
             { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
             React.createElement('span', { className: 'dts-title' }, '🔄 ' + t('updaterTitle')),
             React.createElement('span', { className: 'dts-badge ' + (updateAvailable ? 'dts-badge-warn' : 'dts-badge-on') },
-              updateAvailable ? 'v' + latestVer + ' available' : 'v' + currentVer + ' (' + t('updaterUpToDate') + ')'
+              updateAvailable ? 'v' + latestVer + ' ' + (t('available') || 'available') : 'v' + currentVer + ' (' + t('updaterUpToDate') + ')'
             )
           ),
           React.createElement(
@@ -1542,8 +1666,10 @@ async function pollPending() {
     //   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)
+      // Snapshot status contract (#163):
+      // Without valid scope, or when loading/unavailable, editing is disabled.
+      const ready = !!scope && !!snap && snap.status === 'ready'
+      const writable = ready && snap.writable !== false
 
       const applyPayload = (data) => {
         const cfg = data && data.config ? data.config : {}
@@ -1593,6 +1719,11 @@ async function pollPending() {
         return () => { alive = false; clearInterval(telTimer) }
       }, [])
 
+      if (err && !draft) {
+        return React.createElement('div', { className: 'dts-wrap dts-warn' },
+          React.createElement('span', null, (t('errorLoading') || 'Error loading settings: ') + err),
+        )
+      }
       if (!draft) return React.createElement('div', { className: 'dts-wrap' }, t('loading'))
 
       const setTop = (key, v) => setDraft((d) => Object.assign({}, d || {}, { [key]: v }))
@@ -1668,15 +1799,7 @@ async function pollPending() {
       }
 
       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(() => { /* autoplay blocked */ })
-          })
+        previewSpeech(provider, model, voice, text)
           .catch((e) => setErr(String(e && e.message ? e.message : e)))
       }
 
@@ -1686,9 +1809,9 @@ async function pollPending() {
         onPreview((first && first.provider) || 'kokoro', (first && first.model) || '', (first && first.voice) || '', phrase)
       }
 
-      const boolField = (key, label, hint) => React.createElement('label', { className: 'dts-field' }, label,
+      const boolField = (key, label, hint, disabled = false) => React.createElement('label', { className: 'dts-field' }, label,
         React.createElement('input', {
-          type: 'checkbox', checked: !!(draft && draft[key]), disabled: !writable,
+          type: 'checkbox', checked: !!(draft && draft[key]), disabled: !writable || !!disabled,
           onChange: (e) => setTop(key, e.target.checked),
         }),
         React.createElement('span', { className: 'dts-sub' }, hint))
@@ -1827,7 +1950,7 @@ async function pollPending() {
             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))),
+            }, ['truncate', 'summarize', 'full'].map((mode) => React.createElement('option', { key: mode, value: mode }, t('longReply' + mode.charAt(0).toUpperCase() + mode.slice(1)) || mode))),
             React.createElement('span', { className: 'dts-sub' }, t('longReplyHint'))),
           textField('summaryModel', t('summaryModel'), t('summaryModelHint')),
           numberField('summarySentences', t('summarySentences'), t('summarySentencesHint'), 1),
@@ -1929,13 +2052,17 @@ async function pollPending() {
       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 hasHistory = (lists.items && lists.items.length > 0) || (lists.favs && lists.favs.length > 0)
+
+      // Hide only if completely idle and no recent/favorites history (#161)
+      if (!active && !hasHistory && !showList && !p.blocked) return null
+
       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,
+          onClick: () => playStandalone(text),
         }, text.slice(0, 80)),
         React.createElement('button', {
           type: 'button', className: 'dts-link', title: '★',
@@ -1947,10 +2074,14 @@ async function pollPending() {
         }, '⤓'),
       )
       return React.createElement('div', { style: { position: 'relative', display: 'inline-flex', gap: '4px', alignItems: 'center' } },
-        React.createElement('button', {
+        p.blocked ? React.createElement('button', {
+          type: 'button', className: 'dts-link dts-warn', title: t('unlockAudio') || 'Click to unlock audio',
+          onClick: unlockAudio,
+        }, '🔔') : null,
+        (hasHistory || active) ? React.createElement('button', {
           type: 'button', className: 'dts-link', title: t('recent') || 'Recent',
           onClick: () => setShowList((v) => !v),
-        }, '☰'),
+        }, '☰') : null,
         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' },
@@ -1961,24 +2092,32 @@ async function pollPending() {
           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,
-        }, '■'),
-        React.createElement('button', {
-          type: 'button',
-          className: 'dts-link',
-          title: t('exportAudio') || 'Export clip',
-          onClick: () => exportAudioClip(player.lastText),
-        }, '⤓'),
+        active ? React.createElement(React.Fragment, 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,
+          }, '■'),
+          React.createElement('button', {
+            type: 'button',
+            className: 'dts-link',
+            title: t('dockSkip') || 'Skip',
+            onClick: skipCurrent,
+          }, '⏭'),
+          React.createElement('button', {
+            type: 'button',
+            className: 'dts-link',
+            title: t('exportAudio') || 'Export clip',
+            onClick: () => exportAudioClip(player.lastText),
+          }, '⤓'),
+        ) : null,
       )
     }
 
@@ -2071,7 +2210,7 @@ async function pollPending() {
             name: 'plugins.item',
             id: ROW_ID,
             order: 60,
-            label: () => 'Text to Speech',
+            label: () => fallbackDockText('title') || 'Text to Speech',
             locale: NS,
             inject: () => ({ ctx: ctx }),
           },
@@ -2109,49 +2248,7 @@ async function pollPending() {
         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(() => startSseStream(), 'dsh-tts: SSE audio stream')
       ctx.effect(() => {
         const timer = setInterval(pollPending, 1000)
         return () => clearInterval(timer)