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

@@ -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,10 +63,13 @@ export default function SttButton({ state, error, onToggle, onCancel }: Props) {
 
   return (
     <div className="absolute bottom-1 left-1 z-50 flex items-center gap-2">
+      <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"
@@ -74,13 +78,6 @@ export default function SttButton({ state, error, onToggle, onCancel }: Props) {
               ? "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">
@@ -94,6 +91,14 @@ export default function SttButton({ state, error, onToggle, onCancel }: Props) {
             </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>
+        )}
+      </div>
       {state === "recording" && (
         <span className="text-xs text-[#f85149] font-mono bg-[#1f2937] px-2 py-0.5 rounded border border-[#30363d]">
           {formatTime(elapsed)}