feat: integrate live audio waveform visualizer

- Add react-audio-visualize for real-time audio visualization
- Expose MediaRecorder from useVoiceInput hook for visualization
- Create dedicated RecordingOverlay component with cleaner design
- LiveAudioVisualizer shows dynamic bars responding to actual audio
- Mode-colored visualization (plan=blue, exec=purple)
- Simplified keyboard hint display with better formatting
- Remove old static WaveformBars component

Author: ammar-agent

bun.lock

@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "@coder/cmux",
@@ -44,6 +43,7 @@
         "motion": "^12.23.24",
         "ollama-ai-provider-v2": "^1.5.4",
         "openai": "^6.9.1",
+        "react-audio-visualize": "^1.2.0",
         "rehype-harden": "^1.1.5",
         "shescape": "^2.1.6",
         "source-map-support": "^0.5.21",
@@ -2838,6 +2838,8 @@
 
     "react": ["react@18.3.1", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ=="],
 
+    "react-audio-visualize": ["react-audio-visualize@1.2.0", "", { "peerDependencies": { "react": ">=16.2.0", "react-dom": ">=16.2.0" } }, "sha512-rfO5nmT0fp23gjU0y2WQT6+ZOq2ZsuPTMphchwX1PCz1Di4oaIr6x7JZII8MLrbHdG7UB0OHfGONTIsWdh67kQ=="],
+
     "react-compiler-runtime": ["react-compiler-runtime@1.0.0", "", { "peerDependencies": { "react": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^0.0.0-experimental" } }, "sha512-rRfjYv66HlG8896yPUDONgKzG5BxZD1nV9U6rkm+7VCuvQc903C4MjcoZR4zPw53IKSOX9wMQVpA1IAbRtzQ7w=="],
 
     "react-dnd": ["react-dnd@16.0.1", "", { "dependencies": { "@react-dnd/invariant": "^4.0.1", "@react-dnd/shallowequal": "^4.0.1", "dnd-core": "^16.0.1", "fast-deep-equal": "^3.1.3", "hoist-non-react-statics": "^3.3.2" }, "peerDependencies": { "@types/hoist-non-react-statics": ">= 3.3.1", "@types/node": ">= 12", "@types/react": ">= 16", "react": ">= 16.14" }, "optionalPeers": ["@types/hoist-non-react-statics", "@types/node", "@types/react"] }, "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q=="],

package.json

@@ -84,6 +84,7 @@
     "motion": "^12.23.24",
     "ollama-ai-provider-v2": "^1.5.4",
     "openai": "^6.9.1",
+    "react-audio-visualize": "^1.2.0",
     "rehype-harden": "^1.1.5",
     "shescape": "^2.1.6",
     "source-map-support": "^0.5.21",

src/browser/components/ChatInput/RecordingOverlay.tsx

@@ -0,0 +1,103 @@
+/**
+ * Recording overlay - shows live audio visualization during voice recording.
+ * Replaces the chat textarea when voice input is active.
+ */
+
+import React from "react";
+import { LiveAudioVisualizer } from "react-audio-visualize";
+import { Loader2 } from "lucide-react";
+import { cn } from "@/common/lib/utils";
+import { formatKeybind, KEYBINDS } from "@/browser/utils/ui/keybinds";
+import type { UIMode } from "@/common/types/mode";
+import type { VoiceInputState } from "@/browser/hooks/useVoiceInput";
+
+// Mode color values for the visualizer (CSS var values from globals.css)
+const MODE_COLORS = {
+  plan: "hsl(210, 70%, 55%)", // Slightly lighter than --color-plan-mode for visibility
+  exec: "hsl(268, 94%, 65%)", // Slightly lighter than --color-exec-mode for visibility
+} as const;
+
+interface RecordingOverlayProps {
+  state: VoiceInputState;
+  mode: UIMode;
+  mediaRecorder: MediaRecorder | null;
+  onStop: () => void;
+}
+
+export const RecordingOverlay: React.FC<RecordingOverlayProps> = (props) => {
+  const isRecording = props.state === "recording";
+  const isTranscribing = props.state === "transcribing";
+
+  const modeColor = MODE_COLORS[props.mode];
+
+  // Border and background classes based on state
+  const containerClasses = cn(
+    "mb-1 flex min-h-[72px] w-full flex-col items-center justify-center gap-2 rounded-md border px-4 py-3 transition-all focus:outline-none",
+    isRecording
+      ? props.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"
+  );
+
+  return (
+    <button
+      type="button"
+      onClick={isRecording ? props.onStop : undefined}
+      disabled={isTranscribing}
+      className={containerClasses}
+      aria-label={isRecording ? "Stop recording" : "Transcribing..."}
+    >
+      {/* Visualizer / Animation Area */}
+      <div className="flex h-10 w-full items-center justify-center">
+        {isRecording && props.mediaRecorder ? (
+          <LiveAudioVisualizer
+            mediaRecorder={props.mediaRecorder}
+            width={280}
+            height={40}
+            barWidth={3}
+            gap={2}
+            barColor={modeColor}
+            smoothingTimeConstant={0.6}
+            fftSize={512}
+            minDecibels={-80}
+            maxDecibels={-20}
+          />
+        ) : (
+          <TranscribingAnimation />
+        )}
+      </div>
+
+      {/* Status Text */}
+      <span
+        className={cn(
+          "text-xs font-medium",
+          isRecording
+            ? props.mode === "plan"
+              ? "text-plan-mode-light"
+              : "text-exec-mode-light"
+            : "text-amber-500"
+        )}
+      >
+        {isRecording ? (
+          <>
+            <span className="opacity-70">space</span> send ·{" "}
+            <span className="opacity-70">{formatKeybind(KEYBINDS.TOGGLE_VOICE_INPUT)}</span> stop ·{" "}
+            <span className="opacity-70">esc</span> cancel
+          </>
+        ) : (
+          "Transcribing..."
+        )}
+      </span>
+    </button>
+  );
+};
+
+/**
+ * Simple pulsing animation for transcribing state
+ */
+const TranscribingAnimation: React.FC = () => (
+  <div className="flex items-center gap-2 text-amber-500">
+    <Loader2 className="h-5 w-5 animate-spin" />
+  </div>
+);

src/browser/components/ChatInput/WaveformBars.tsx

@@ -67,7 +67,7 @@ import { useCreationWorkspace } from "./useCreationWorkspace";
 import { useTutorial } from "@/browser/contexts/TutorialContext";
 import { useVoiceInput } from "@/browser/hooks/useVoiceInput";
 import { VoiceInputButton } from "./VoiceInputButton";
-import { WaveformBars } from "./WaveformBars";
+import { RecordingOverlay } from "./RecordingOverlay";
 
 const LEADING_COMMAND_NOISE = /^(?:\s|\u200B|\u200C|\u200D|\u200E|\u200F|\uFEFF)+/;
 
@@ -1033,54 +1033,12 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           <div className="relative flex items-end" data-component="ChatInputControls">
             {/* Recording/transcribing overlay - replaces textarea when active */}
             {voiceInput.state !== "idle" ? (
-              <button
-                type="button"
-                onClick={voiceInput.state === "recording" ? voiceInput.toggle : undefined}
-                disabled={voiceInput.state === "transcribing"}
-                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"
-                    ? 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"
-                      ? mode === "plan"
-                        ? "bg-plan-mode"
-                        : "bg-exec-mode"
-                      : "bg-amber-500"
-                  }
-                />
-                <span
-                  className={cn(
-                    "text-sm font-medium",
-                    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"
-                      ? mode === "plan"
-                        ? "bg-plan-mode"
-                        : "bg-exec-mode"
-                      : "bg-amber-500"
-                  }
-                  mirrored
-                />
-              </button>
+              <RecordingOverlay
+                state={voiceInput.state}
+                mode={mode}
+                mediaRecorder={voiceInput.mediaRecorder}
+                onStop={voiceInput.toggle}
+              />
             ) : (
               <>
                 <VimTextArea

src/browser/components/ChatInput/index.tsx

@@ -34,6 +34,8 @@ export interface UseVoiceInputResult {
   shouldShowUI: boolean;
   /** True when running over HTTP (not localhost) - microphone requires secure context */
   requiresSecureContext: boolean;
+  /** The active MediaRecorder instance when recording, for visualization */
+  mediaRecorder: MediaRecorder | null;
   start: () => void;
   stop: (options?: { send?: boolean }) => void;
   cancel: () => void;
@@ -70,7 +72,9 @@ export function useVoiceInput(options: UseVoiceInputOptions): UseVoiceInputResul
   const [state, setState] = useState<VoiceInputState>("idle");
 
   // Refs for MediaRecorder lifecycle
+  // We use both ref (for callbacks) and state (to trigger re-render for visualizer)
   const recorderRef = useRef<MediaRecorder | null>(null);
+  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
   const streamRef = useRef<MediaStream | null>(null);
   const chunksRef = useRef<Blob[]>([]);
 
@@ -188,6 +192,7 @@ export function useVoiceInput(options: UseVoiceInputOptions): UseVoiceInputResul
       };
 
       recorderRef.current = recorder;
+      setMediaRecorder(recorder);
       recorder.start();
       setState("recording");
     } catch (err) {
@@ -212,6 +217,7 @@ export function useVoiceInput(options: UseVoiceInputOptions): UseVoiceInputResul
     if (recorderRef.current?.state !== "inactive") {
       recorderRef.current?.stop();
       recorderRef.current = null;
+      setMediaRecorder(null);
     }
   }, []);
 
@@ -296,6 +302,7 @@ export function useVoiceInput(options: UseVoiceInputOptions): UseVoiceInputResul
     isApiKeySet: callbacksRef.current.openAIKeySet,
     shouldShowUI: HAS_MEDIA_RECORDER && !HAS_TOUCH_DICTATION,
     requiresSecureContext: HAS_MEDIA_RECORDER && !HAS_GET_USER_MEDIA,
+    mediaRecorder,
     start: () => void start(),
     stop,
     cancel,