fix: voice controls reactivity, disable mic on unsupported browsers

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;

dashboard/frontend/src/routes/Terminal.svelte

@@ -142,9 +142,8 @@
         </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'}"
@@ -160,8 +159,9 @@
           {/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'}"
+          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.listening ? 'Stop mic' : 'Start mic'}
+          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>
@@ -173,7 +173,6 @@
         >{v.langLabel}</button>
       </div>
     {/if}
-    {/if}
   </div>
 
   {#if !tabs.length}