🤖 fix: match waveform recording color to current mode

- Recording overlay border/background uses mode color (plan=blue, exec=purple)
- WaveformBars use bg-plan-mode or bg-exec-mode based on mode
- Recording text uses mode-light variant for better contrast
- VoiceInputButton receives mode prop for consistent styling
- Transcribing state remains amber (processing indicator)

Author: ammar-agent

src/browser/components/ChatInput/VoiceInputButton.tsx

@@ -9,6 +9,7 @@ import { TooltipWrapper, Tooltip } from "../Tooltip";
 import { formatKeybind, KEYBINDS } from "@/browser/utils/ui/keybinds";
 import { cn } from "@/common/lib/utils";
 import type { VoiceInputState } from "@/browser/hooks/useVoiceInput";
+import type { UIMode } from "@/common/types/mode";
 
 interface VoiceInputButtonProps {
   state: VoiceInputState;
@@ -17,11 +18,18 @@ interface VoiceInputButtonProps {
   requiresSecureContext: boolean;
   onToggle: () => void;
   disabled?: boolean;
+  mode: UIMode;
+}
+
+function getRecordingColorClass(mode: UIMode): string {
+  return mode === "plan"
+    ? "text-plan-mode-light animate-pulse"
+    : "text-exec-mode-light animate-pulse";
 }
 
 const STATE_CONFIG: Record<VoiceInputState, { label: string; colorClass: string }> = {
   idle: { label: "Voice input", colorClass: "text-muted/50 hover:text-muted" },
-  recording: { label: "Stop recording", colorClass: "text-blue-500 animate-pulse" },
+  recording: { label: "Stop recording", colorClass: "" }, // handled dynamically
   transcribing: { label: "Transcribing...", colorClass: "text-amber-500" },
 };
 
@@ -32,14 +40,19 @@ export const VoiceInputButton: React.FC<VoiceInputButtonProps> = (props) => {
   const needsApiKey = !needsHttps && !props.isApiKeySet;
   const isDisabledReason = needsHttps || needsApiKey;
 
+  const stateConfig = STATE_CONFIG[props.state];
   const { label, colorClass } = isDisabledReason
     ? {
         label: needsHttps
           ? "Voice input (requires HTTPS)"
           : "Voice input (requires OpenAI API key)",
         colorClass: "text-muted/50",
       }
-    : STATE_CONFIG[props.state];
+    : {
+        label: stateConfig.label,
+        colorClass:
+          props.state === "recording" ? getRecordingColorClass(props.mode) : stateConfig.colorClass,
+      };
 
   const Icon = props.state === "transcribing" ? Loader2 : Mic;
   const isTranscribing = props.state === "transcribing";

src/browser/components/ChatInput/index.tsx

@@ -1226,26 +1226,44 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                 className={cn(
                   "mb-1 flex min-h-[60px] w-full items-center justify-center gap-3 rounded-md border px-4 py-4 transition-all focus:outline-none",
                   voiceInput.state === "recording"
-                    ? "cursor-pointer border-blue-500 bg-blue-500/10"
+                    ? mode === "plan"
+                      ? "cursor-pointer border-plan-mode bg-plan-mode/10"
+                      : "cursor-pointer border-exec-mode bg-exec-mode/10"
                     : "cursor-wait border-amber-500 bg-amber-500/10"
                 )}
                 aria-label={voiceInput.state === "recording" ? "Stop recording" : "Transcribing..."}
               >
                 <WaveformBars
-                  colorClass={voiceInput.state === "recording" ? "bg-blue-500" : "bg-amber-500"}
+                  colorClass={
+                    voiceInput.state === "recording"
+                      ? mode === "plan"
+                        ? "bg-plan-mode"
+                        : "bg-exec-mode"
+                      : "bg-amber-500"
+                  }
                 />
                 <span
                   className={cn(
                     "text-sm font-medium",
-                    voiceInput.state === "recording" ? "text-blue-500" : "text-amber-500"
+                    voiceInput.state === "recording"
+                      ? mode === "plan"
+                        ? "text-plan-mode-light"
+                        : "text-exec-mode-light"
+                      : "text-amber-500"
                   )}
                 >
                   {voiceInput.state === "recording"
                     ? `Recording... space to send, ${formatKeybind(KEYBINDS.TOGGLE_VOICE_INPUT)} to stop, esc to cancel`
                     : "Transcribing..."}
                 </span>
                 <WaveformBars
-                  colorClass={voiceInput.state === "recording" ? "bg-blue-500" : "bg-amber-500"}
+                  colorClass={
+                    voiceInput.state === "recording"
+                      ? mode === "plan"
+                        ? "bg-plan-mode"
+                        : "bg-exec-mode"
+                      : "bg-amber-500"
+                  }
                   mirrored
                 />
               </button>
@@ -1283,6 +1301,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                     requiresSecureContext={voiceInput.requiresSecureContext}
                     onToggle={voiceInput.toggle}
                     disabled={disabled || isSending}
+                    mode={mode}
                   />
                 </div>
               </>