From fca929df9f33e222b0d588d717c25dc06e8f8780 Mon Sep 17 00:00:00 2001
From: "Gan, Jimmy" <jimmy.gan@adidas.com>
Date: Thu, 26 Feb 2026 15:40:15 +0800
Subject: [PATCH] fix: voice controls reactivity, disable mic on unsupported
 browsers

---
 dashboard/frontend/src/lib/voice.js           |  1 +
 dashboard/frontend/src/routes/Terminal.svelte | 59 +++++++++----------
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/dashboard/frontend/src/lib/voice.js b/dashboard/frontend/src/lib/voice.js
index 2940f93..e0752e0 100644
--- a/dashboard/frontend/src/lib/voice.js
+++ b/dashboard/frontend/src/lib/voice.js
@@ -8,6 +8,7 @@ export class VoiceSession {
     this.ttsEnabled = false;
     this.speaking = false;
     this.listening = false;
+    this.sttAvailable = !!(window.SpeechRecognition || window.webkitSpeechRecognition);
     this.langIdx = 0;
     this.term = null;
     this.ws = null;
diff --git a/dashboard/frontend/src/routes/Terminal.svelte b/dashboard/frontend/src/routes/Terminal.svelte
index dbd5743..f791dda 100644
--- a/dashboard/frontend/src/routes/Terminal.svelte
+++ b/dashboard/frontend/src/routes/Terminal.svelte
@@ -142,37 +142,36 @@
         </div>
       {/if}
     </div>
-    {#if activeTab && tabs.find(t => t.id === activeTab)?.connected}
+    {#if activeTab && tabs.find(t => t.id === activeTab)?.connected && activeVoice()}
       {@const v = activeVoice()}
-      {#if v}
-        <div class="ml-auto flex items-center gap-1">
-          <button
-            class="px-2 py-1 rounded text-sm transition-colors {v.ttsEnabled ? (v.speaking ? 'text-indigo-400' : 'text-emerald-400') : 'text-surface-500 hover:text-surface-300'}"
-            title={v.ttsEnabled ? 'Disable TTS' : 'Enable TTS'}
-            onclick={() => { v.toggleTts(); voiceTick++; }}
-          >
-            {#if !v.ttsEnabled}
-              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
-            {:else if v.speaking}
-              <svg class="w-4 h-4 animate-pulse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 010 7.07"/><path d="M19.07 4.93a10 10 0 010 14.14"/></svg>
-            {:else}
-              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 010 7.07"/></svg>
-            {/if}
-          </button>
-          <button
-            class="px-2 py-1 rounded text-sm transition-colors {v.listening ? 'text-rose-400 animate-pulse' : 'text-surface-500 hover:text-surface-300'}"
-            title={v.listening ? 'Stop mic' : 'Start mic'}
-            onclick={() => { v.toggleMic(); voiceTick++; }}
-          >
-            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
-          </button>
-          <button
-            class="px-1.5 py-0.5 rounded text-xs font-medium transition-colors text-surface-400 hover:text-surface-200 hover:bg-surface-800"
-            title="Switch language"
-            onclick={() => { v.cycleLang(); voiceTick++; }}
-          >{v.langLabel}</button>
-        </div>
-      {/if}
+      <div class="ml-auto flex items-center gap-1">
+        <button
+          class="px-2 py-1 rounded text-sm transition-colors {v.ttsEnabled ? (v.speaking ? 'text-indigo-400' : 'text-emerald-400') : 'text-surface-500 hover:text-surface-300'}"
+          title={v.ttsEnabled ? 'Disable TTS' : 'Enable TTS'}
+          onclick={() => { v.toggleTts(); voiceTick++; }}
+        >
+          {#if !v.ttsEnabled}
+            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
+          {:else if v.speaking}
+            <svg class="w-4 h-4 animate-pulse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 010 7.07"/><path d="M19.07 4.93a10 10 0 010 14.14"/></svg>
+          {:else}
+            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 010 7.07"/></svg>
+          {/if}
+        </button>
+        <button
+          class="px-2 py-1 rounded text-sm transition-colors {v.listening ? 'text-rose-400 animate-pulse' : v.sttAvailable ? 'text-surface-500 hover:text-surface-300' : 'text-surface-700 cursor-not-allowed'}"
+          title={!v.sttAvailable ? 'STT not supported in this browser' : v.listening ? 'Stop mic' : 'Start mic'}
+          disabled={!v.sttAvailable}
+          onclick={() => { v.toggleMic(); voiceTick++; }}
+        >
+          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
+        </button>
+        <button
+          class="px-1.5 py-0.5 rounded text-xs font-medium transition-colors text-surface-400 hover:text-surface-200 hover:bg-surface-800"
+          title="Switch language"
+          onclick={() => { v.cycleLang(); voiceTick++; }}
+        >{v.langLabel}</button>
+      </div>
     {/if}
   </div>