From 9d519054ee9400b393dbe0d8c21abacfda47c828 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Fri, 3 Apr 2026 13:15:28 -0400
Subject: [PATCH] feat(tts): add streaming TTS listen mode to WorkspaceView

---
 frontend/src/views/WorkspaceView.vue | 53 ++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/frontend/src/views/WorkspaceView.vue b/frontend/src/views/WorkspaceView.vue
index e5d036b..157b975 100644
--- a/frontend/src/views/WorkspaceView.vue
+++ b/frontend/src/views/WorkspaceView.vue
@@ -5,6 +5,8 @@ import { apiGet } from "@/api/client";
 import { useChatStore } from "@/stores/chat";
 import { useSettingsStore } from "@/stores/settings";
 import { useToastStore } from "@/stores/toast";
+import { useListenMode } from "@/composables/useListenMode";
+import { useStreamingTts } from "@/composables/useStreamingTts";
 import { renderMarkdown } from "@/utils/markdown";
 import ChatMessage from "@/components/ChatMessage.vue";
 import ToolCallCard from "@/components/ToolCallCard.vue";
@@ -16,6 +18,13 @@ const route = useRoute();
 const chatStore = useChatStore();
 const settingsStore = useSettingsStore();
 const toast = useToastStore();
+const listenMode = useListenMode();
+const voiceTtsEnabled = computed(() => settingsStore.voiceTtsReady);
+const tts = useStreamingTts({
+  streamingContent: computed(() => chatStore.streamingContent),
+  streaming: computed(() => chatStore.streaming),
+  enabled: computed(() => listenMode.value && voiceTtsEnabled.value),
+});
 
 const projectId = computed(() => Number(route.params.projectId));
 
@@ -372,6 +381,22 @@ onUnmounted(async () => {
             @keydown="onInputKeydown"
             @input="autoResize"
           ></textarea>
+          <!-- Listen mode toggle (TTS) -->
+          <button
+            v-if="voiceTtsEnabled"
+            class="btn-listen-ws"
+            :class="{ 'btn-listen-ws--active': listenMode, 'btn-listen-ws--busy': tts.speaking.value }"
+            :title="listenMode ? 'Stop auto-read' : 'Read responses aloud'"
+            aria-label="Toggle listen mode"
+            @click="listenMode = !listenMode; if (!listenMode) tts.stop()"
+          >
+            <svg v-if="!tts.speaking.value" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
+            </svg>
+            <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M18 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C21.8 14.82 22 13.43 22 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
+            </svg>
+          </button>
           <button
             v-if="chatStore.streaming"
             class="btn-abort"
@@ -608,6 +633,34 @@ onUnmounted(async () => {
   color: #fff;
 }
 
+.btn-listen-ws {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+}
+.btn-listen-ws:hover {
+  color: var(--color-text);
+  border-color: var(--color-primary);
+}
+.btn-listen-ws--active {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+}
+.btn-listen-ws--busy {
+  color: var(--color-primary);
+  animation: pulse 1.2s ease-in-out infinite;
+}
+
 /* Streaming indicators (mirror ChatView) */
 .chat-message {
   display: flex;