🤖 Add VimTextArea and integrate Vim keybindings into ChatInput (MVP)

- New VimTextArea component with basic Vim modes (insert/normal)
- Supports h/j/k/l, 0, $, w, b; i/a/I/A/o/O; x, dd, yy, p/P; u, Ctrl-r
- Integrated with ChatInput, preserves existing send/cancel keybinds
- ESC now only intercepted for edit/interrupt; otherwise passes to Vim or suggestions
- Avoids interfering with CommandSuggestions via suppressKeys

_Generated with `cmux`_

Author: ammario

src/components/ChatInput.tsx

@@ -20,6 +20,7 @@ import {
 import { TooltipWrapper, Tooltip, HelpIndicator } from "./Tooltip";
 import { matchesKeybind, formatKeybind, KEYBINDS } from "@/utils/ui/keybinds";
 import { defaultModel } from "@/utils/ai/models";
+import { VimTextArea } from "./VimTextArea";
 
 const InputSection = styled.div`
   position: relative;
@@ -37,39 +38,7 @@ const InputControls = styled.div`
   align-items: flex-end;
 `;
 
-const InputField = styled.textarea<{
-  isEditing?: boolean;
-  canInterrupt?: boolean;
-  mode: UIMode;
-}>`
-  flex: 1;
-  background: ${(props) => (props.isEditing ? "var(--color-editing-mode-alpha)" : "#1e1e1e")};
-  border: 1px solid ${(props) => (props.isEditing ? "var(--color-editing-mode)" : "#3e3e42")};
-  color: #d4d4d4;
-  padding: 8px 12px;
-  border-radius: 4px;
-  font-family: inherit;
-  font-size: 13px;
-  resize: none;
-  min-height: 36px;
-  max-height: 200px;
-  overflow-y: auto;
-  max-height: 120px;
-
-  &:focus {
-    outline: none;
-    border-color: ${(props) =>
-      props.isEditing
-        ? "var(--color-editing-mode)"
-        : props.mode === "plan"
-          ? "var(--color-plan-mode)"
-          : "var(--color-exec-mode)"};
-  }
-
-  &::placeholder {
-    color: #6b6b6b;
-  }
-`;
+// Input now rendered by VimTextArea; styles moved there
 
 const ModeToggles = styled.div`
   display: flex;
@@ -590,22 +559,22 @@ for a new Assistant to continue helping the user. Prioritize specific, actionabl
   const handleKeyDown = (e: React.KeyboardEvent) => {
     // Handle cancel/escape
     if (matchesKeybind(e, KEYBINDS.CANCEL)) {
-      e.preventDefault();
-
       // Priority 1: Cancel editing if in edit mode
       if (editingMessage && onCancelEdit) {
+        e.preventDefault();
         onCancelEdit();
         return;
       }
 
       // Priority 2: Interrupt streaming if active
       if (canInterrupt) {
+        e.preventDefault();
         // Send empty message to trigger interrupt
         void window.api.workspace.sendMessage(workspaceId, "");
         return;
       }
 
-      return;
+      // Otherwise, do not preventDefault here: allow VimTextArea or other handlers (like suggestions) to process ESC
     }
 
     // Don't handle keys if command suggestions are visible
@@ -640,21 +609,14 @@ for a new Assistant to continue helping the user. Prioritize specific, actionabl
         isVisible={showCommandSuggestions}
       />
       <InputControls>
-        <InputField
+        <VimTextArea
           ref={inputRef}
           value={input}
           isEditing={!!editingMessage}
           mode={mode}
-          onChange={(e) => {
-            const newValue = e.target.value;
-            setInput(newValue);
-            // Auto-resize textarea
-            e.target.style.height = "auto";
-            e.target.style.height = Math.min(e.target.scrollHeight, 200) + "px";
-
-            // Don't clear toast when typing - let user dismiss it manually or it auto-dismisses
-          }}
+          onChange={setInput}
           onKeyDown={handleKeyDown}
+          suppressKeys={showCommandSuggestions ? COMMAND_SUGGESTION_KEYS : undefined}
           placeholder={
             editingMessage
               ? `Edit your message... (${formatKeybind(KEYBINDS.CANCEL)} to cancel, ${formatKeybind(KEYBINDS.SEND_MESSAGE)} to send)`
@@ -665,7 +627,6 @@ for a new Assistant to continue helping the user. Prioritize specific, actionabl
                   : `Type a message... (${formatKeybind(KEYBINDS.SEND_MESSAGE)} to send, ${formatKeybind(KEYBINDS.NEW_LINE)} for newline)`
           }
           disabled={disabled || isSending || isCompacting}
-          canInterrupt={canInterrupt}
         />
       </InputControls>
       <ModeToggles>