feat: TTS playback speed control (1x / 1.5x / 2x) in message controls and Settings

frontend/src/App.css

@@ -239,6 +239,39 @@ html.aj-hide-pointer * {
   flex-shrink: 0;
 }
 
+.aj-speed-options {
+  display: flex;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.aj-speed-option {
+  padding: 4px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--lc-border);
+  background: var(--lc-input);
+  color: var(--lc-muted);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.aj-speed-option:hover {
+  border-color: var(--lc-accent);
+  color: var(--lc-accent);
+}
+
+.aj-speed-option--active {
+  background: var(--lc-accent);
+  color: #fff;
+  border-color: var(--lc-accent);
+}
+
+.aj-speed-option--active:hover {
+  color: #fff;
+}
+
 .aj-chat-wrap {
   flex: 1;
   display: flex;
@@ -817,6 +850,17 @@ html.aj-hide-pointer * {
   background: var(--lc-hover);
 }
 
+.aj-tts-speed-btn {
+  width: auto;
+  padding: 0 6px;
+}
+
+.aj-tts-speed-label {
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+}
+
 [data-tip] {
   position: relative;
 }

frontend/src/App.jsx

@@ -24,6 +24,8 @@ import {
 const STORAGE_PERSONA = 'askjerry_extra_persona'
 const STORAGE_ALWAYS_SPEAK = 'askjerry_always_speak'
 const STORAGE_TTS_PRIMED = 'askjerry_tts_primed'
+const STORAGE_TTS_SPEED = 'askjerry_tts_speed'
+const TTS_SPEED_OPTIONS = [1, 1.5, 2]
 const CONTEXT_WINDOW = 8192
 const MAX_REPLY_TOKENS = 4096
 const SUMMARIZE_THRESHOLD = 0.55
@@ -49,6 +51,14 @@ function initialAlwaysSpeak() {
   }
 }
 
+function initialTtsSpeed() {
+  try {
+    const v = parseFloat(sessionStorage.getItem(STORAGE_TTS_SPEED))
+    if (TTS_SPEED_OPTIONS.includes(v)) return v
+  } catch { /* */ }
+  return 1
+}
+
 function estimateTokens(text) {
   return Math.max(1, Math.ceil((text || '').length / 4))
 }
@@ -282,6 +292,17 @@ function AssistantSearchBar({ content, show, speak }) {
                 <SkipBack size={14} aria-hidden />
               </button>
             )}
+            {(speak.playing || speak.paused) && (
+              <button
+                type="button"
+                className="aj-msg-search-btn aj-tts-speed-btn"
+                onClick={speak.onCycleSpeed}
+                data-tip="Playback speed"
+                aria-label={`Playback speed: ${speak.speed}x`}
+              >
+                <span className="aj-tts-speed-label">{speak.speed}x</span>
+              </button>
+            )}
             {(speak.playing || speak.paused || (speak.loading && speak.showStop)) && (
               <button
                 type="button"
@@ -393,6 +414,7 @@ export default function App() {
   const [ttsPlayingIndex, setTtsPlayingIndex] = useState(null)
   const [ttsPaused, setTtsPaused] = useState(false)
   const [alwaysSpeak, setAlwaysSpeak] = useState(initialAlwaysSpeak)
+  const [ttsSpeed, setTtsSpeed] = useState(initialTtsSpeed)
   const [micListening, setMicListening] = useState(false)
   const [micTranscribing, setMicTranscribing] = useState(false)
   const [voiceError, setVoiceError] = useState(null)
@@ -400,6 +422,8 @@ export default function App() {
   const audioRef = useRef(null)
   const ttsBlobUrlRef = useRef(null)
   const ttsSessionRef = useRef(0)
+  const ttsSpeedRef = useRef(ttsSpeed)
+  ttsSpeedRef.current = ttsSpeed
   const messagesRef = useRef(messages)
   messagesRef.current = messages
   const streamingRef = useRef(streaming)
@@ -599,6 +623,7 @@ export default function App() {
     const a = audioRef.current
     if (!a) return
     try {
+      a.playbackRate = ttsSpeedRef.current
       await a.play()
       setTtsPaused(false)
     } catch (e) {
@@ -652,6 +677,7 @@ export default function App() {
       audio.onerror = () => {
         finish()
       }
+      audio.playbackRate = ttsSpeedRef.current
       audio.play().catch(() => finish())
     })
   }, [])
@@ -843,6 +869,19 @@ export default function App() {
     try { sessionStorage.setItem(STORAGE_ALWAYS_SPEAK, alwaysSpeak ? '1' : '0') } catch { /* */ }
   }, [alwaysSpeak])
 
+  useEffect(() => {
+    try { sessionStorage.setItem(STORAGE_TTS_SPEED, String(ttsSpeed)) } catch { /* */ }
+    const a = audioRef.current
+    if (a) a.playbackRate = ttsSpeed
+  }, [ttsSpeed])
+
+  const cycleTtsSpeed = useCallback(() => {
+    setTtsSpeed(prev => {
+      const idx = TTS_SPEED_OPTIONS.indexOf(prev)
+      return TTS_SPEED_OPTIONS[(idx + 1) % TTS_SPEED_OPTIONS.length]
+    })
+  }, [])
+
   useEffect(() => {
     if (ttsContentResolverRef.current) {
       ttsContentResolverRef.current()
@@ -1385,6 +1424,24 @@ export default function App() {
               <p className="aj-options-hint">
                 When enabled, each assistant reply is read aloud automatically after it finishes generating (uses text-to-speech).
               </p>
+              <label className="aj-field">
+                <span>Playback speed</span>
+                <div className="aj-speed-options">
+                  {TTS_SPEED_OPTIONS.map(s => (
+                    <button
+                      key={s}
+                      type="button"
+                      className={`aj-speed-option${ttsSpeed === s ? ' aj-speed-option--active' : ''}`}
+                      onClick={() => setTtsSpeed(s)}
+                    >
+                      {s}x
+                    </button>
+                  ))}
+                </div>
+              </label>
+              <p className="aj-options-hint">
+                Controls how fast text-to-speech audio plays. Applies to all messages.
+              </p>
             </div>
           )}
         </div>
@@ -1475,6 +1532,8 @@ export default function App() {
                         onPause: pauseTts,
                         onResume: resumeTts,
                         onReplay: replayTts,
+                        onCycleSpeed: cycleTtsSpeed,
+                        speed: ttsSpeed,
                         onStopReading: stopTts,
                       }}
                     />