From 49d09e44472d700ab30d75a01f8ae0f289899d05 Mon Sep 17 00:00:00 2001
From: Josh Knapp <shadow@dao-mail.com>
Date: Mon, 13 Apr 2026 05:55:52 -0700
Subject: [PATCH 1/3] Add Ctrl+Shift+M hotkey for speech-to-text toggle

Lifts useSTT hook from SttButton into TerminalView so both the hotkey
and the button share the same recording state. The hotkey keeps terminal
focus so after transcription the user just presses Enter. The button
also no longer steals focus via onMouseDown preventDefault.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/src/components/terminal/SttButton.tsx    | 24 +++++++++++---------
 app/src/components/terminal/TerminalView.tsx | 11 ++++++++-
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/app/src/components/terminal/SttButton.tsx b/app/src/components/terminal/SttButton.tsx
index 4e83e02..3997cdc 100644
--- a/app/src/components/terminal/SttButton.tsx
+++ b/app/src/components/terminal/SttButton.tsx
@@ -1,14 +1,15 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useSTT } from "../../hooks/useSTT";
+import type { SttState } from "../../hooks/useSTT";
 import * as commands from "../../lib/tauri-commands";
 
 interface Props {
-  sessionId: string;
-  sendInput: (sessionId: string, data: string) => Promise<void>;
+  state: SttState;
+  error: string | null;
+  onToggle: () => Promise<void>;
+  onCancel: () => Promise<void>;
 }
 
-export default function SttButton({ sessionId, sendInput }: Props) {
-  const { state, error, toggle, cancelRecording } = useSTT(sessionId, sendInput);
+export default function SttButton({ state, error, onToggle, onCancel }: Props) {
   const [elapsed, setElapsed] = useState(0);
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
@@ -40,17 +41,17 @@ export default function SttButton({ sessionId, sendInput }: Props) {
         // Container start failed, toggle will still attempt transcription
       }
     }
-    await toggle();
-  }, [state, toggle]);
+    await onToggle();
+  }, [state, onToggle]);
 
   const handleContextMenu = useCallback(
     (e: React.MouseEvent) => {
       e.preventDefault();
       if (state === "recording") {
-        cancelRecording();
+        onCancel();
       }
     },
-    [state, cancelRecording],
+    [state, onCancel],
   );
 
   const formatTime = (seconds: number) => {
@@ -64,6 +65,7 @@ export default function SttButton({ sessionId, sendInput }: Props) {
       <button
         onClick={handleClick}
         onContextMenu={handleContextMenu}
+        onMouseDown={(e) => e.preventDefault()} // prevent stealing focus from terminal
         disabled={state === "transcribing"}
         className={`w-8 h-8 rounded-full flex items-center justify-center transition-all cursor-pointer ${
           state === "recording"
@@ -74,10 +76,10 @@ export default function SttButton({ sessionId, sendInput }: Props) {
         }`}
         title={
           state === "recording"
-            ? "Click to stop and transcribe (right-click to cancel)"
+            ? "Click or Ctrl+Shift+M to stop and transcribe"
             : state === "transcribing"
               ? "Transcribing..."
-              : "Speech to text"
+              : "Speech to text (Ctrl+Shift+M)"
         }
       >
         {state === "transcribing" ? (
diff --git a/app/src/components/terminal/TerminalView.tsx b/app/src/components/terminal/TerminalView.tsx
index 7230561..f0dfc71 100644
--- a/app/src/components/terminal/TerminalView.tsx
+++ b/app/src/components/terminal/TerminalView.tsx
@@ -7,6 +7,7 @@ import { openUrl } from "@tauri-apps/plugin-opener";
 import "@xterm/xterm/css/xterm.css";
 import { useTerminal } from "../../hooks/useTerminal";
 import { useAppState } from "../../store/appState";
+import { useSTT } from "../../hooks/useSTT";
 import SttButton from "./SttButton";
 import { awsSsoRefresh } from "../../lib/tauri-commands";
 import { UrlDetector } from "../../lib/urlDetector";
@@ -27,6 +28,9 @@ export default function TerminalView({ sessionId, active }: Props) {
   const { sendInput, pasteImage, resize, onOutput, onExit } = useTerminal();
   const setTerminalHasSelection = useAppState(s => s.setTerminalHasSelection);
   const sttEnabled = useAppState(s => s.appSettings?.stt?.enabled);
+  const stt = useSTT(sessionId, sendInput);
+  const sttToggleRef = useRef(stt.toggle);
+  sttToggleRef.current = stt.toggle;
 
   const ssoBufferRef = useRef("");
   const ssoTriggeredRef = useRef(false);
@@ -102,6 +106,11 @@ export default function TerminalView({ sessionId, active }: Props) {
         }
         return false; // prevent xterm from processing this key
       }
+      // Ctrl+Shift+M toggles speech-to-text recording
+      if (event.type === "keydown" && event.ctrlKey && event.shiftKey && event.key === "M") {
+        sttToggleRef.current();
+        return false;
+      }
       return true;
     });
 
@@ -427,7 +436,7 @@ export default function TerminalView({ sessionId, active }: Props) {
         {isAutoFollow ? "▼ Following" : "▽ Paused"}
       </button>
       {/* STT mic button - bottom left */}
-      {sttEnabled && <SttButton sessionId={sessionId} sendInput={sendInput} />}
+      {sttEnabled && <SttButton state={stt.state} error={stt.error} onToggle={stt.toggle} onCancel={stt.cancelRecording} />}
       {/* Jump to Current - bottom right, when scrolled up */}
       {!isAtBottom && (
         <button
-- 
2.47.3


From 3bbd7fd55f62bb941d12cde4243a37310e9396d2 Mon Sep 17 00:00:00 2001
From: Josh Knapp <shadow@dao-mail.com>
Date: Mon, 13 Apr 2026 05:56:59 -0700
Subject: [PATCH 2/3] Move STT mic button to bottom-left corner to avoid
 clipping Claude Code status line

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/src/components/terminal/SttButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/terminal/SttButton.tsx b/app/src/components/terminal/SttButton.tsx
index 3997cdc..56f99ab 100644
--- a/app/src/components/terminal/SttButton.tsx
+++ b/app/src/components/terminal/SttButton.tsx
@@ -61,7 +61,7 @@ export default function SttButton({ state, error, onToggle, onCancel }: Props) {
   };
 
   return (
-    <div className="absolute bottom-4 left-4 z-50 flex items-center gap-2">
+    <div className="absolute bottom-1 left-1 z-50 flex items-center gap-2">
       <button
         onClick={handleClick}
         onContextMenu={handleContextMenu}
-- 
2.47.3


From 3e9053946f58ae4e94d2a5c53a9470a5135ccec8 Mon Sep 17 00:00:00 2001
From: Josh Knapp <shadow@dao-mail.com>
Date: Mon, 13 Apr 2026 05:58:29 -0700
Subject: [PATCH 3/3] Add styled hover tooltip to STT button showing
 Ctrl+Shift+M shortcut

Replaces the native title attribute with a custom tooltip that appears
instantly on hover, displaying the shortcut in a styled kbd element.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/src/components/terminal/SttButton.tsx | 55 ++++++++++++-----------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/app/src/components/terminal/SttButton.tsx b/app/src/components/terminal/SttButton.tsx
index 56f99ab..9ab40be 100644
--- a/app/src/components/terminal/SttButton.tsx
+++ b/app/src/components/terminal/SttButton.tsx
@@ -11,6 +11,7 @@ interface Props {
 
 export default function SttButton({ state, error, onToggle, onCancel }: Props) {
   const [elapsed, setElapsed] = useState(0);
+  const [hovered, setHovered] = useState(false);
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   // Track recording duration
@@ -62,38 +63,42 @@ export default function SttButton({ state, error, onToggle, onCancel }: Props) {
 
   return (
     <div className="absolute bottom-1 left-1 z-50 flex items-center gap-2">
-      <button
-        onClick={handleClick}
-        onContextMenu={handleContextMenu}
-        onMouseDown={(e) => e.preventDefault()} // prevent stealing focus from terminal
-        disabled={state === "transcribing"}
-        className={`w-8 h-8 rounded-full flex items-center justify-center transition-all cursor-pointer ${
+      <div className="relative">
+        <button
+          onClick={handleClick}
+          onContextMenu={handleContextMenu}
+          onMouseDown={(e) => e.preventDefault()} // prevent stealing focus from terminal
+          onMouseEnter={() => setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+          disabled={state === "transcribing"}
+          className={`w-8 h-8 rounded-full flex items-center justify-center transition-all cursor-pointer ${
           state === "recording"
             ? "bg-[#f85149] text-white shadow-lg animate-pulse"
             : state === "transcribing"
               ? "bg-[#1f2937] text-[#58a6ff] border border-[#30363d] opacity-80"
               : "bg-[#1f2937]/80 text-[#8b949e] border border-[#30363d] hover:text-[#e6edf3] hover:bg-[#2d3748]"
         }`}
-        title={
-          state === "recording"
-            ? "Click or Ctrl+Shift+M to stop and transcribe"
-            : state === "transcribing"
-              ? "Transcribing..."
-              : "Speech to text (Ctrl+Shift+M)"
-        }
-      >
-        {state === "transcribing" ? (
-          <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
-            <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" opacity="0.25" />
-            <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
-          </svg>
-        ) : (
-          <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z" />
-            <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" />
-          </svg>
+        >
+          {state === "transcribing" ? (
+            <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
+              <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" opacity="0.25" />
+              <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+            </svg>
+          ) : (
+            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z" />
+              <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" />
+            </svg>
+          )}
+        </button>
+        {hovered && state !== "recording" && (
+          <div className="absolute bottom-full left-0 mb-1.5 px-2 py-1 text-[11px] leading-snug text-[#e6edf3] bg-[#21262d] border border-[#30363d] rounded shadow-lg whitespace-nowrap pointer-events-none">
+            {state === "transcribing" ? "Transcribing..." : (
+              <>Speech to text <kbd className="ml-1 px-1 py-0.5 text-[10px] bg-[#0d1117] border border-[#30363d] rounded font-mono">Ctrl+Shift+M</kbd></>
+            )}
+          </div>
         )}
-      </button>
+      </div>
       {state === "recording" && (
         <span className="text-xs text-[#f85149] font-mono bg-[#1f2937] px-2 py-0.5 rounded border border-[#30363d]">
           {formatTime(elapsed)}
-- 
2.47.3