From 75622ef36645d13b05300ba189de70cda144a314 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Fri, 27 Mar 2026 19:45:56 +0000
Subject: [PATCH] refactor(ui): simplify prompt recording indicator

---
 packages/ui/src/components/prompt-input.tsx       |  9 +--------
 packages/ui/src/styles/messaging/prompt-input.css | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/components/prompt-input.tsx b/packages/ui/src/components/prompt-input.tsx
index 4e5d5a20..a6e740db 100644
--- a/packages/ui/src/components/prompt-input.tsx
+++ b/packages/ui/src/components/prompt-input.tsx
@@ -605,7 +605,7 @@ export default function PromptInput(props: PromptInputProps) {
                           </Show>
                         }
                       >
-                        <span class="prompt-voice-timer">{formatVoiceTimer(voiceInput.elapsedMs())}</span>
+                        <Mic class="h-4 w-4" aria-hidden="true" />
                       </Show>
                     </button>
                   </Show>
@@ -760,10 +760,3 @@ export default function PromptInput(props: PromptInputProps) {
     </div>
   )
 }
-
-function formatVoiceTimer(elapsedMs: number): string {
-  const totalSeconds = Math.max(0, Math.floor(elapsedMs / 1000))
-  const minutes = Math.floor(totalSeconds / 60)
-  const seconds = totalSeconds % 60
-  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`
-}
diff --git a/packages/ui/src/styles/messaging/prompt-input.css b/packages/ui/src/styles/messaging/prompt-input.css
index 314660d1..25e33daa 100644
--- a/packages/ui/src/styles/messaging/prompt-input.css
+++ b/packages/ui/src/styles/messaging/prompt-input.css
@@ -220,6 +220,16 @@
   color: var(--button-danger-text, var(--text-inverted, #ffffff));
 }
 
+.prompt-voice-button.is-recording:hover:not(:disabled) {
+  background-color: var(--button-danger-hover-bg, rgba(239, 68, 68, 0.9));
+  color: var(--button-danger-text, var(--text-inverted, #ffffff));
+}
+
+.prompt-voice-button.is-recording:active:not(:disabled) {
+  background-color: var(--button-danger-active-bg, rgba(239, 68, 68, 1));
+  color: var(--button-danger-text, var(--text-inverted, #ffffff));
+}
+
 .prompt-nav-voice-button {
   min-width: 1.75rem;
   width: 1.75rem;
@@ -228,8 +238,8 @@
 }
 
 .prompt-nav-voice-button.is-recording {
-  min-width: 3.5rem;
-  width: auto;
+  min-width: 1.75rem;
+  width: 1.75rem;
 }
 
 .prompt-voice-button:disabled {