@goodandready/dsh-tts 0.4.33 → 0.4.34

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.4.34 (2026-10-17)
+
+- **Per-Reply Speak Action** (#208, GitHub PR #2):
+  - Added dedicated speaker button to `conversation.chat.assistant-actions` (order 5), positioned beside copy action to read rendered assistant turn text directly from the DOM.
+  - Added in-row transport cluster next to the reply clock (pause, stop, skip, export) that remains visible during playback even when mouse leaves message row.
+- **Context Menu & Contained Scroll** (#208, GitHub PR #2):
+  - Added right-click context menu on the speaker action to display recent utterances with contained wheel scrolling that prevents closing on scroll.
+- **Hotkeys & Playback Enhancements** (#208, GitHub PR #2):
+  - Added `Shift+Space` hotkey to stop active playback or instantly replay the last utterance from memory cache (`player.lastItem`).
+  - Added `statusKnown` guard in SSE event handling to prevent dropping initial stream utterances during server startup.
+  - Primed pending audio poll immediately on mount and on audio unlock gesture.
+- **Client Bundle**: Rebuilt `lib/client.js` from canonical `lib/client-src/` fragments with updated tests.
+
 ## 0.4.33 (2026-10-11)
 
 - **SSE Stream Watchdog**: Added idle timeout watchdog (30s) in Web player (`lib/client-src/20-player.js`) to automatically trigger reconnect on stale/frozen EventSource connection (#206).

package/lib/client.js

@@ -210,6 +210,39 @@ window.__ModuleLoader__.load({
       '.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-warn-primary, #f59e0b) 10%, transparent);color:var(--dsw-alias-state-warn-primary, #f59e0b);border:1px solid color-mix(in srgb, var(--dsw-alias-state-warn-primary, #f59e0b) 20%, transparent)}' +
       '.dts-alert-ok{background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent);color:var(--dsw-alias-state-success-primary);border:1px solid color-mix(in srgb, var(--dsw-alias-state-success-primary) 20%, transparent)}' +
+      // Per-message speak button: icon-only, same weight as the sibling actions.
+      '.dts-act{box-sizing:border-box;width:calc(28px + var(--dsh-content-font-delta,0px));height:calc(28px + var(--dsh-content-font-delta,0px));display:inline-flex;align-items:center;justify-content:center;padding:6px;cursor:pointer;border:none;border-radius:var(--dsw-radius-sm, 8px);background:none;color:var(--dsw-alias-label-tertiary, #999);transition:background .15s ease,color .15s ease}' +
+      '.dts-act:hover{background:var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.12));color:var(--dsw-alias-label-secondary, #666)}' +
+      '.dts-act:active{background:color-mix(in srgb, var(--dsw-alias-label-secondary, #666) 16%, transparent)}' +
+      '.dts-act[data-active]{color:var(--dsw-alias-brand-primary, #4d6bfe)}' +
+      '.dts-act[data-active]:hover{background:color-mix(in srgb, var(--dsw-alias-brand-primary, #4d6bfe) 12%, transparent);color:var(--dsw-alias-brand-primary, #4d6bfe)}' +
+      '.dts-act:focus-visible{outline:2px solid var(--dsw-alias-brand-primary, #4d6bfe);outline-offset:1px}' +
+      '.dts-act svg{width:calc(17px + var(--dsh-content-font-delta,0px));height:calc(17px + var(--dsh-content-font-delta,0px));display:block}' +
+      '@keyframes dts-act-pulse{0%,100%{opacity:.35}50%{opacity:1}}' +
+      '.dts-act[data-busy] [data-wave]{animation:dts-act-pulse 1.1s ease-in-out infinite}' +
+      '.dts-act[data-busy] [data-wave="2"]{animation-delay:.22s}' +
+      // Right-click menu: just the recent lines, all of them, scrolled by wheel.
+      '.dts-menu{position:fixed;z-index:2147483000;box-sizing:border-box;min-width:210px;max-width:300px;max-height:min(64vh, 460px);overflow:hidden;padding:6px;display:flex;flex-direction:column;gap:2px;border-radius:12px;border:1px solid var(--dsw-alias-border-l2, #e8e8e8);background:var(--dsw-alias-bg-layer-2, #fff);box-shadow:0 12px 32px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.06);font-size:13px;line-height:1.4}' +
+      '.dts-menu-item{display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;padding:7px 10px;border:none;border-radius:8px;background:none;color:var(--dsw-alias-label-primary, #111);font:inherit;text-align:left;cursor:pointer}' +
+      '.dts-menu-item:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.12))}' +
+      '.dts-menu-item:disabled{opacity:.42;cursor:default}' +
+      '.dts-menu-item span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}' +
+      // The list is the whole menu: no cap on how many lines, it scrolls instead.
+      '.dts-menu-list{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--dsw-alias-border-l2, #ddd) transparent}' +
+      '.dts-menu-list::-webkit-scrollbar{width:8px}' +
+      '.dts-menu-list::-webkit-scrollbar-thumb{background:var(--dsw-alias-border-l2, #ddd);border-radius:4px}' +
+      '.dts-menu-list::-webkit-scrollbar-track{background:transparent}' +
+      '.dts-menu-text{flex:none;width:100%;box-sizing:border-box;padding:6px 10px;border:none;border-radius:8px;background:none;color:var(--dsw-alias-label-primary, #111);font:inherit;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}' +
+      '.dts-menu-text:hover{background:var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.12))}' +
+      // Transport cluster: same row as the reply actions, parked after the clock.
+      // DSH fades that row out (opacity:0) until you hover the message, so force
+      // it back on while a clip is playing — otherwise the controls vanish.
+      '[data-actions-reveal]:has(.dts-transport) [class*="actions"]{opacity:1 !important}' +
+      '.dts-transport{display:inline-flex;align-items:center;gap:2px;margin-left:4px;order:999}' +
+      '.dts-tbtn{box-sizing:border-box;width:27px;height:27px;display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;border-radius:7px;background:none;color:var(--dsw-alias-label-tertiary, #999);cursor:pointer;transition:background .15s ease,color .15s ease}' +
+      '.dts-tbtn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.12));color:var(--dsw-alias-label-primary, #111)}' +
+      '.dts-tbtn:disabled{opacity:.38;cursor:default}' +
+      '.dts-tbtn svg{width:16px;height:16px;display:block}' +
       '.dts-grow{flex:1;min-width:100px}'
 
     const setCssId = 'dsh-tts/settings.module.css'
@@ -257,6 +290,9 @@ window.__ModuleLoader__.load({
       player.blocked = false
       playerChanged()
       drainQueue()
+      // Anything the host synthesised while the browser was blocking playback is
+      // still queued server-side; pull it once the gesture opened the gate.
+      try { pollPending() } catch { /* host not ready yet */ }
     }
 
     function useAutoplayGate() {
@@ -285,6 +321,13 @@ window.__ModuleLoader__.load({
       get autoplayBlocked() { return autoplay.blocked },
     }
     const seenIds = new Set()
+    // Reply <div data-turn-tail> the current playback belongs to. Set when the
+    // per-message speaker starts a clip; null for auto-speech, where the newest
+    // reply hosts the transport instead.
+    let activeTailEl = null
+    // False until /dsh-tts/status answers: before that the `enabled` default is
+    // not a real reading, so stream items must not be discarded.
+    let statusKnown = false
     let currentAudioResolve = null
     function playerChanged() {
       for (const listener of [...player.listeners]) {
@@ -375,6 +418,14 @@ window.__ModuleLoader__.load({
           const { audio, url } = item.prepared
           audio.playbackRate = Math.max(0.5, Math.min(2, player.rate || 1))
           player.audio = audio
+          if (item.audioBase64 && item.kind !== 'chime') {
+            // Keep the last clip in memory so replay is instant (no round trip).
+            player.lastItem = {
+              text: item.text || '',
+              mime: item.mime || 'audio/mpeg',
+              audioBase64: item.audioBase64,
+            }
+          }
           if (item.text) player.lastText = item.text
           playerChanged()
           prebufferNext()
@@ -454,6 +505,7 @@ window.__ModuleLoader__.load({
     }
 
     function stopPlayback() {
+      activeTailEl = null
       removeGestureListeners()
       player.blocked = false
       setAutoplayBlocked(false)
@@ -560,7 +612,7 @@ window.__ModuleLoader__.load({
         try {
           const item = JSON.parse(e.data)
           if (!item || !item.id) return
-          if (player.enabled === false) return
+          if (statusKnown && player.enabled === false) return
           player.after = item.id
           if (seenIds.has(item.id)) return
           seenIds.add(item.id)
@@ -579,7 +631,7 @@ window.__ModuleLoader__.load({
         try {
           const item = JSON.parse(e.data)
           if (!item) return
-          if (player.enabled === false) return
+          if (statusKnown && player.enabled === false) return
           player.queue.push(item)
           drainQueue()
         } catch (_err) { /* ignore malformed chime payload */ }
@@ -637,6 +689,7 @@ window.__ModuleLoader__.load({
         if (!st.ok) return
         const meta = await st.json()
         player.enabled = !!(meta && meta.speakReplies)
+        statusKnown = true
         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
@@ -720,6 +773,36 @@ window.__ModuleLoader__.load({
         })
     }
 
+    // Replay the most recent clip: from memory when we still hold it, else ask
+    // the host (its synthesis cache makes the second round a fast path).
+    function replayLast() {
+      const last = player.lastItem
+      if (last && last.audioBase64) {
+        playAudioItem({
+          id: `replay-${Date.now()}`,
+          text: last.text,
+          mime: last.mime || 'audio/mpeg',
+          audioBase64: last.audioBase64,
+        })
+        return true
+      }
+      if (player.lastText) {
+        playStandalone(player.lastText)
+        return true
+      }
+      const lists = recent.list()
+      const fallback = (lists.favs && lists.favs[0]) || (lists.items && lists.items[0])
+      if (fallback) {
+        playStandalone(fallback)
+        return true
+      }
+      return false
+    }
+
+    function isSpeakingNow() {
+      return !!player.audio || player.busy || player.queue.length > 0
+    }
+
     function previewSpeech(provider, model, voice, text) {
       stopPlayback()
       return clientFetch('/dsh-tts/preview', {
@@ -813,6 +896,9 @@ window.__ModuleLoader__.load({
       'dockFavorite': 'Favorite',
       'dockUnfavorite': 'Unfavorite',
       'dockFavorites': 'Favorite clips',
+      'speakMessage': 'Read this reply aloud',
+      'speakMessageStop': 'Stop reading this reply',
+      'speakMessageEmpty': 'Nothing to read in this reply',
       'exportAudio': 'Export audio clip',
       'exportSuccess': 'Audio exported',
       'statusOnline': 'Host online',
@@ -1039,6 +1125,9 @@ window.__ModuleLoader__.load({
       'dockFavorite': '收藏',
       'dockUnfavorite': '取消收藏',
       'dockFavorites': '收藏语音',
+      'speakMessage': '朗读这条回复',
+      'speakMessageStop': '停止朗读这条回复',
+      'speakMessageEmpty': '这条回复没有可朗读的内容',
       'exportAudio': '导出语音片段',
       'exportSuccess': '音频已导出',
       'statusOnline': '服务在线',
@@ -1848,6 +1937,7 @@ window.__ModuleLoader__.load({
         setCredentials(data && data.credentials ? data.credentials : {})
         if (data && data.revision !== undefined) setRevision(data.revision)
         player.enabled = !!cfg.speakReplies
+        statusKnown = true
       }
 
       React.useEffect(() => {
@@ -2222,81 +2312,341 @@ window.__ModuleLoader__.load({
       )
     }
 
-    // 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
+    // Per-message speak button in the reply action strip (left of the feedback
+    // thumbs). The slot only hands over the durable message id, so the reply
+    // text is read back from the rendered turn: the same prose blocks the
+    // built-in copy button copies.
+    function replyTextFromTurn(el) {
+      try {
+        const tail = el && el.closest ? el.closest('[data-turn-tail]') : null
+        if (!tail) return ''
+        const turn = tail.getAttribute('data-turn-tail')
+        // The tail sits in its own flow item, so climb until an ancestor also
+        // holds rendered reply blocks, then keep only this turn's ones.
+        let scope = tail.parentElement
+        for (let hops = 0; scope && hops < 8; hops++) {
+          if (scope.querySelector('[data-chat-flow-kind="assistant-step"]')) break
+          scope = scope.parentElement
+        }
+        if (!scope) return ''
+        const collect = (inProcess) => {
+          const parts = []
+          for (const node of scope.querySelectorAll('[data-chat-flow-kind="assistant-step"]')) {
+            if (turn !== null && node.getAttribute('data-chat-turn') !== turn) continue
+            if (node.querySelector('[data-turn-tail]')) continue
+            const nestedProcess = !!node.closest('[data-turn-process-hidden]')
+            if (nestedProcess !== inProcess) continue
+            const text = String(node.innerText || node.textContent || '').trim()
+            if (text) parts.push(text)
+          }
+          return parts
+        }
+        // Prose first; fall back to the compacted process answers only when the
+        // turn kept the reply inside the process accordion.
+        let parts = collect(false)
+        if (!parts.length) parts = collect(true)
+        return parts.join('\n\n').trim()
+      } catch (unreadable) {
+        return ''
+      }
+    }
+
+    /** Rounded-square speaker chip, styled after the reference design. */
+    function speakGlyph() {
+      return React.createElement('svg', { viewBox: '0 0 24 24', fill: 'none', 'aria-hidden': 'true', focusable: 'false' },
+        React.createElement('path', {
+          d: 'M11 5.6 6.7 9H3.6v6h3.1L11 18.4z',
+          stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round',
+        }),
+        React.createElement('path', {
+          'data-wave': '1',
+          d: 'M14.7 9.3a3.8 3.8 0 0 1 0 5.4',
+          stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round',
+        }),
+        React.createElement('path', {
+          'data-wave': '2',
+          d: 'M17.8 6.5a8.2 8.2 0 0 1 0 11',
+          stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round',
+        }),
+      )
+    }
+
+    // Transport glyphs for the in-row playback cluster.
+    function transportIcon(name) {
+      const stroke = { stroke: 'currentColor', strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' }
+      const kids = []
+      if (name === 'pause') {
+        kids.push(React.createElement('rect', { key: 'l', x: 7, y: 5, width: 3.2, height: 14, rx: 1, fill: 'currentColor' }))
+        kids.push(React.createElement('rect', { key: 'r', x: 13.8, y: 5, width: 3.2, height: 14, rx: 1, fill: 'currentColor' }))
+      } else if (name === 'play') {
+        kids.push(React.createElement('path', { key: 'p', d: 'M8 5.6 19 12 8 18.4z', fill: 'currentColor' }))
+      } else if (name === 'stop') {
+        kids.push(React.createElement('rect', { key: 's', x: 6.5, y: 6.5, width: 11, height: 11, rx: 2, fill: 'currentColor' }))
+      } else if (name === 'skip') {
+        kids.push(React.createElement('path', { key: 't', d: 'M6.5 5.8 14 12l-7.5 6.2z', fill: 'currentColor' }))
+        kids.push(React.createElement('rect', { key: 'b', x: 15.6, y: 5.8, width: 2.4, height: 12.4, rx: 1, fill: 'currentColor' }))
+      } else {
+        kids.push(React.createElement('path', { key: 'a', d: 'M12 4.5v9.4', ...stroke }))
+        kids.push(React.createElement('path', { key: 'b', d: 'm8.4 10.4 3.6 3.6 3.6-3.6', ...stroke }))
+        kids.push(React.createElement('path', { key: 'c', d: 'M5.5 17.6h13', ...stroke }))
+      }
+      return React.createElement('svg', { viewBox: '0 0 24 24', fill: 'none', 'aria-hidden': 'true', focusable: 'false' }, kids)
+    }
+
+    /** Does this reply own the transport cluster right now? */
+    function ownsTransport(tail) {
+      if (!tail) return false
+      if (activeTailEl && activeTailEl.isConnected) return tail === activeTailEl || tail.contains(activeTailEl)
+      // Auto-speech has no explicit owner: the newest reply carries the controls.
+      const all = document.querySelectorAll('[data-turn-tail]')
+      return all.length > 0 && all[all.length - 1] === tail
+    }
+
+    function MessageSpeakAction(props) {
+      const t = (props && props.t) || ((key) => key)
       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)
-      const lists = recent.list()
-      const hasHistory = (lists.items && lists.items.length > 0) || (lists.favs && lists.favs.length > 0)
+      const btnRef = React.useRef(null)
+      const menuRef = React.useRef(null)
+      const textRef = React.useRef('')
+      const seqRef = React.useRef(0)
+      const [busy, setBusy] = React.useState(false)
+      const [warn, setWarn] = React.useState(false)
+      const [menu, setMenu] = React.useState(null)
+      const active = !busy && !!p.audio && textRef.current !== '' && p.lastText === textRef.current
+
+      React.useEffect(() => {
+        if (!busy) return undefined
+        const guard = setTimeout(() => setBusy(false), 20000)
+        return () => clearTimeout(guard)
+      }, [busy])
+
+      // Close the context menu on an outside press, Esc, or any scroll.
+      React.useEffect(() => {
+        if (!menu) return undefined
+        const onDown = (event) => {
+          if (menuRef.current && menuRef.current.contains(event.target)) return
+          if (btnRef.current && btnRef.current.contains(event.target)) return
+          setMenu(null)
+        }
+        const onKey = (event) => { if (event.key === 'Escape') setMenu(null) }
+        // Scrolling inside the menu (its recent list) must not dismiss it.
+        const onScroll = (event) => {
+          if (event && menuRef.current && event.target && menuRef.current.contains(event.target)) return
+          setMenu(null)
+        }
+        window.addEventListener('pointerdown', onDown, true)
+        window.addEventListener('keydown', onKey, true)
+        window.addEventListener('scroll', onScroll, true)
+        window.addEventListener('resize', onScroll)
+        return () => {
+          window.removeEventListener('pointerdown', onDown, true)
+          window.removeEventListener('keydown', onKey, true)
+          window.removeEventListener('scroll', onScroll, true)
+          window.removeEventListener('resize', onScroll)
+        }
+      }, [menu])
+
+      // Keep the whole menu on screen: shift it up when it would run past the fold.
+      React.useEffect(() => {
+        if (!menu || !menuRef.current) return
+        const rect = menuRef.current.getBoundingClientRect()
+        const overflow = rect.bottom - (window.innerHeight - 8)
+        if (overflow > 0) {
+          setMenu((current) => (current ? { x: current.x, y: Math.max(8, current.y - overflow) } : current))
+        }
+      }, [menu])
+
+      const tailOf = () => (btnRef.current && btnRef.current.closest ? btnRef.current.closest('[data-turn-tail]') : null)
+
+      const speak = (text, seq, tailEl) => {
+        stopPlayback()
+        return clientFetch('/dsh-tts/speak', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ text, channel: 'web' }),
+          timeoutMs: 30000,
+        })
+          .then((r) => r.json())
+          .then((d) => {
+            // A second click cancels the first request; never play stale audio.
+            if (seqRef.current !== seq) return false
+            if (!d || !d.ok || !d.audioBase64) return false
+            activeTailEl = tailEl
+            playAudioItem({
+              id: `reply-${Date.now()}`,
+              text,
+              mime: d.mime || 'audio/mpeg',
+              audioBase64: d.audioBase64,
+            })
+            return true
+          })
+          .catch((failed) => {
+            console.warn('[dsh-tts] reply speak failed:', failed)
+            return false
+          })
+      }
+
+      const onClick = () => {
+        if (menu) { setMenu(null); return }
+        if (busy) {
+          seqRef.current += 1
+          stopPlayback()
+          setBusy(false)
+          return
+        }
+        if (active) {
+          stopPlayback()
+          return
+        }
+        const tailEl = tailOf()
+        const text = replyTextFromTurn(btnRef.current)
+        if (!text) {
+          setWarn(true)
+          setTimeout(() => setWarn(false), 1600)
+          return
+        }
+        // Already synthesised this clip? Play it from memory instead of the network.
+        const last = player.lastItem
+        if (last && last.audioBase64 && last.text === text) {
+          textRef.current = text
+          activeTailEl = tailEl
+          playAudioItem({
+            id: `replay-${Date.now()}`,
+            text,
+            mime: last.mime || 'audio/mpeg',
+            audioBase64: last.audioBase64,
+          })
+          return
+        }
+        const seq = seqRef.current + 1
+        seqRef.current = seq
+        textRef.current = text
+        setWarn(false)
+        setBusy(true)
+        speak(text, seq, tailEl).then((ok) => {
+          if (seqRef.current !== seq) return
+          setBusy(false)
+          if (!ok) {
+            setWarn(true)
+            setTimeout(() => setWarn(false), 1600)
+          }
+        })
+      }
 
-      // Hide only if completely idle and no recent/favorites history (#161)
-      if (!active && !hasHistory && !showList && !p.blocked) return null
+      const openMenu = (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        const box = btnRef.current ? btnRef.current.getBoundingClientRect() : { left: event.clientX, bottom: event.clientY }
+        const x = Math.max(8, Math.min(Math.round(box.left) - 8, window.innerWidth - 312))
+        // Open just under the button; the measuring effect above shifts the menu
+        // up if the (now scrollable, possibly tall) list would run past the fold.
+        const y = Math.max(8, Math.min(Math.round(box.bottom) + 6, window.innerHeight - 120))
+        setMenu({ x, y })
+      }
 
-      const row = (text, starred) => React.createElement('div', { className: 'dts-row', key: text.slice(0, 24) + starred },
+      const run = (fn) => () => { setMenu(null); fn() }
+
+      const label = active ? t('speakMessageStop') : t('speakMessage')
+      const title = warn ? t('speakMessageEmpty') : label
+      const button = React.createElement('button', {
+        ref: btnRef,
+        type: 'button',
+        className: 'dts-act',
+        title,
+        'aria-label': title,
+        'aria-pressed': active || undefined,
+        'data-active': active || undefined,
+        'data-busy': busy || undefined,
+        onClick,
+        onContextMenu: openMenu,
+      }, speakGlyph())
+
+      // Playback transport lives at the end of the same row, after the clock.
+      const tail = tailOf()
+      const speaking = isSpeakingNow()
+      const transport = speaking && ownsTransport(tail) ? React.createElement('div', { className: 'dts-transport' },
+        React.createElement('button', {
+          type: 'button', className: 'dts-tbtn', title: p.paused ? t('dockResume') : t('dockPause'),
+          'aria-label': p.paused ? t('dockResume') : t('dockPause'),
+          onClick: () => togglePause(),
+        }, transportIcon(p.paused ? 'play' : 'pause')),
         React.createElement('button', {
-          type: 'button', className: 'dts-link', style: { flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
-          title: text,
-          onClick: () => playStandalone(text),
-        }, text.slice(0, 80)),
+          type: 'button', className: 'dts-tbtn', title: t('dockStop'), 'aria-label': t('dockStop'),
+          onClick: () => stopPlayback(),
+        }, transportIcon('stop')),
         React.createElement('button', {
-          type: 'button', className: 'dts-link', title: '★',
-          onClick: () => { recent.toggleFav(text); force() },
-        }, starred ? '★' : '☆'),
+          type: 'button', className: 'dts-tbtn', title: t('dockSkip'), 'aria-label': t('dockSkip'),
+          onClick: () => skipCurrent(),
+        }, transportIcon('skip')),
         React.createElement('button', {
-          type: 'button', className: 'dts-link', title: t('exportAudio') || 'Export',
-          onClick: () => exportAudioClip(text),
-        }, '⤓'),
+          type: 'button', className: 'dts-tbtn', title: t('exportAudio'), 'aria-label': t('exportAudio'),
+          onClick: () => exportAudioClip(player.lastText),
+        }, transportIcon('export')),
+      ) : null
+
+      if (!menu) return React.createElement(React.Fragment, null, button, transport)
+
+      // Recents only, all of them: the menu scrolls when the list is longer than
+      // the popup. Playback controls stay in the reply row, right of the clock.
+      const history = (recent.list().items || [])
+
+      const row = (text, index) => React.createElement('button', {
+        key: `recent-${index}`,
+        type: 'button',
+        className: 'dts-menu-text',
+        title: text,
+        onClick: run(() => playStandalone(text)),
+      }, text.slice(0, 80))
+
+      const menuEl = React.createElement('div', {
+        ref: menuRef,
+        className: 'dts-menu',
+        role: 'menu',
+        style: { left: `${menu.x}px`, top: `${menu.y}px` },
+        onContextMenu: (event) => { event.preventDefault(); event.stopPropagation() },
+      },
+        history.length
+          ? React.createElement('div', {
+              className: 'dts-menu-list',
+              // Wheel over the list scrolls the list, not the conversation.
+              onWheel: (event) => event.stopPropagation(),
+            }, history.map((text, index) => row(text, index)))
+          : React.createElement('div', { className: 'dts-menu-item', style: { opacity: 0.45, cursor: 'default' } },
+              React.createElement('span', null, t('recentEmpty')),
+            ),
       )
+
+      return React.createElement(React.Fragment, null, button, transport, menuEl)
+    }
+
+    function registerMessageAction(ctx) {
+      try {
+        ctx.slots.inject('conversation.chat.assistant-actions', () => ctx.slots.register(
+          {
+            name: 'conversation.chat.assistant-actions',
+            id: 'dsh-tts-speak',
+            // 10 is the feedback thumbs; a lower order keeps us to their left.
+            order: 5,
+            locale: NS,
+          },
+          MessageSpeakAction,
+        ))
+      } catch (seatUnavailable) {
+        console.warn('[dsh-tts] reply action seat not available:', seatUnavailable && seatUnavailable.message)
+      }
+    }
+
+    // The dock keeps only the "sound is blocked" hint now: the transport moved
+    // into the reply row, to the right of the message clock.
+    function SpeakerControl(props) {
+      const t = (props && props.t) || fallbackDockText
+      const p = usePlayer()
+      if (!p.blocked) return null
       return React.createElement('div', { style: { position: 'relative', display: 'inline-flex', gap: '4px', alignItems: 'center' } },
-        p.blocked ? React.createElement('button', {
+        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' },
-        },
-          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,
-        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,
+        }, '🔔'),
       )
     }
 
@@ -2416,10 +2766,20 @@ window.__ModuleLoader__.load({
     exports.apply = function apply(ctx) {
       registerSettings(ctx)
       registerSpeaker(ctx)
+      registerMessageAction(ctx)
       ctx.effect(() => listenForVoice(), 'dsh-tts: barge-in on user speech')
       ctx.effect(() => {
         if (typeof window === 'undefined') return () => {}
         const onKey = (e) => {
+          // Shift+Space: stop while speaking, otherwise replay the last clip
+          // (memory first, then the host cache) so a finished reply is one key away.
+          if (e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey && (e.code === 'Space' || e.key === ' ')) {
+            e.preventDefault()
+            if (e.repeat) return
+            if (isSpeakingNow()) stopPlayback()
+            else replayLast()
+            return
+          }
           if (e.ctrlKey && e.key === 'Escape') { togglePause(); e.preventDefault() }
           else if (e.altKey && (e.code === 'KeyS' || e.key === 's' || e.key === 'S')) { stopPlayback(); e.preventDefault() }
           else if (e.altKey && e.key === 'ArrowRight') { skipCurrent(); e.preventDefault() }
@@ -2429,6 +2789,9 @@ window.__ModuleLoader__.load({
       }, 'dsh-tts: hotkeys')
       ctx.effect(() => startSseStream(), 'dsh-tts: SSE audio stream')
       ctx.effect(() => {
+        // Prime the status flag right away: autoplay used to wait out the first
+        // interval tick, which dropped early stream items on a fresh start.
+        pollPending()
         const timer = setInterval(pollPending, 1000)
         return () => clearInterval(timer)
       }, 'dsh-tts: poll pending audio')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-tts",
-  "version": "0.4.33",
+  "version": "0.4.34",
   "description": "Text-to-speech for DeepSeek Harness: speak agent replies in the Web UI with a provider fallback chain (OpenAI, ElevenLabs, Google, Azure, Groq, Deepgram, OpenRouter, Edge, Piper, eSpeak).",
   "license": "MIT",
   "type": "module",