fix(web): run Vim keys typed outside the composer as commands

apps/web/src/components/ComposerPromptEditorTiptap.tsx

@@ -143,6 +143,8 @@ export interface ComposerPromptEditorHandle {
   focus: () => void;
   focusAt: (cursor: number) => void;
   focusAtEnd: () => void;
+  /** Runs a key pressed outside the editor through Vim; false means Vim leaves it as text. */
+  handleVimKey: (event: KeyboardEvent) => boolean;
   readSelectionRange: () => { start: number; end: number };
   requestCitationComment: (request: ComposerCitationCommentRequest) => void;
   readSnapshot: () => {
@@ -1756,6 +1758,7 @@ function ComposerPromptEditorTiptapInner(
               ),
         );
       },
+      handleVimKey: (event) => (editor ? handleComposerVimKeyDown(editor.view, event) : false),
       readSelectionRange: () => {
         readSnapshot();
         return selectionRangeRef.current;

apps/web/src/components/ComposerPromptEditorTiptap.vim.browser.test.tsx

@@ -134,6 +134,34 @@ describe("Vim composer integration", () => {
     expect(editable.getAttribute("data-vim-mode")).toBe("normal");
   });
 
+  it("runs a key typed outside the editor as a Vim command until insert mode", async () => {
+    const editorRef = createRef<ComposerPromptEditorHandle>();
+    await using screen = await render(
+      <ComposerPromptEditorTiptap
+        value="Please"
+        cursor={6}
+        keybindings={DEFAULT_RESOLVED_KEYBINDINGS}
+        vimEnabled
+        contextRecords={new Map()}
+        skills={[]}
+        disabled={false}
+        placeholder="Prompt"
+        onChange={() => {}}
+        onPaste={() => {}}
+        editorRef={editorRef}
+      />,
+    );
+    const typed = (name: string) =>
+      editorRef.current?.handleVimKey(
+        new KeyboardEvent("keydown", { key: name, cancelable: true }),
+      );
+
+    expect(await act(() => typed("a"))).toBe(true);
+    expect(editableIn(screen.container).getAttribute("data-vim-mode")).toBe("insert");
+    expect(editorRef.current?.readSnapshot().value).toBe("Please");
+    expect(await act(() => typed("b"))).toBe(false);
+  });
+
   it("edits literal markdown and restores the rich editor when Vim is turned off", async () => {
     const editorRef = createRef<ComposerPromptEditorHandle>();
     let draft =

apps/web/src/components/chat/ChatComposer.tsx

@@ -306,6 +306,8 @@ export interface ChatComposerHandle {
     text: string,
     options?: { ensureLeadingBoundary?: boolean; clipboardData?: DataTransfer },
   ) => boolean;
+  /** Takes a key typed outside the composer: Vim input at the caret, else text at the end. */
+  typeKey: (event: KeyboardEvent) => boolean;
   pasteTextAtEnd: (text: string, options?: { bypassAutoAttachment?: boolean }) => boolean;
   citeAssistantText: (
     citation: AssistantCitation,
@@ -1047,6 +1049,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   const [isComposerPrimaryActionsCompact, setIsComposerPrimaryActionsCompact] = useState(false);
   const [isComposerModelPickerOpen, setIsComposerModelPickerOpen] = useState(false);
   const [composerVimMode, setComposerVimMode] = useState("normal");
+  const composerVimActive = settings.composerVimEnabled && !isLiteralPendingAnswer;
   const isMobileViewport = useMediaQuery("max-sm");
   const isSoftwareKeyboardOpen = useSoftwareKeyboardOpen();
   const [isComposerFocused, setIsComposerFocused] = useState(false);
@@ -2547,7 +2550,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
       modelPickerOpen={isComposerModelPickerOpen}
       onModelPickerOpenChange={setIsComposerModelPickerOpen}
       modelPickerIconClassName={composerProviderState.modelPickerIconClassName}
-      vimMode={settings.composerVimEnabled && !isLiteralPendingAnswer ? composerVimMode : null}
+      vimMode={composerVimActive ? composerVimMode : null}
       getModelDisabledReason={getModelDisabledReason}
     />
   );
@@ -2701,6 +2704,27 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   };
   const insertComposerTextAtEndStable = useStableCallback(insertComposerTextAtEnd);
 
+  // The scroll-collapsed editor is hidden, so it has to render before it can take focus.
+  const revealScrollCollapsedEditor = () => {
+    if (isComposerScrollCollapsed) flushSync(() => setScrollCollapsedTarget(null));
+  };
+
+  const typeComposerKey: ChatComposerHandle["typeKey"] = (event) => {
+    if (!composerVimActive) return insertComposerTextAtEnd(event.key);
+    // Vim runs keys as commands at its caret, which only its focused editor can do. A
+    // collapsed mobile editor cannot take focus until it expands, so that key only expands it.
+    if (isComposerCollapsedMobile) {
+      expandMobileComposer();
+      return true;
+    }
+    revealScrollCollapsedEditor();
+    composerEditorRef.current?.focus();
+    return (
+      composerEditorRef.current?.handleVimKey(event) || insertComposerText(event.key, "cursor")
+    );
+  };
+  const typeComposerKeyStable = useStableCallback(typeComposerKey);
+
   const addComposerFolders = (folders: File[]) => {
     const target = folderDropTarget({
       localEnvironmentDisabled: isLocalEnvironmentDisabled(),
@@ -3015,11 +3039,11 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     composerRef,
     () => ({
       focusAtEnd: () => {
-        if (isComposerScrollCollapsed) flushSync(() => setScrollCollapsedTarget(null));
+        revealScrollCollapsedEditor();
         composerEditorRef.current?.focusAtEnd();
       },
       focusAt: (cursor: number) => {
-        if (isComposerScrollCollapsed) flushSync(() => setScrollCollapsedTarget(null));
+        revealScrollCollapsedEditor();
         composerEditorRef.current?.focusAt(cursor);
       },
       collapseForTimelineNavigation: () => setScrollCollapsedTarget(composerDraftTargetKey),
@@ -3034,6 +3058,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
         countPreparingComposerImages(attachmentTargetKey) > 0 ||
         pendingDraftWork.has(attachmentTargetKey),
       insertTextAtEnd: insertComposerTextAtEndStable,
+      typeKey: typeComposerKeyStable,
       pasteTextAtEnd: (text: string, options) => {
         const shortcutArmed = consumePasteAsTextShortcut(pasteAsTextShortcutUntilRef);
         const bypassAutoAttachment = options?.bypassAutoAttachment === true || shortcutArmed;

apps/web/src/components/chat/useChatShortcuts.browser.test.tsx

@@ -54,11 +54,11 @@ function Chat(props: { composerKeys: string[]; launcher?: { keys: string; receiv
     scriptKeybindings: [],
     getShortcutContext: () => shortcutContext,
     threadFindActive: false,
-    // Type-to-focus only calls insertTextAtEnd, so the stand-in composer implements just that.
+    // Type-to-focus only calls typeKey, so the stand-in composer implements just that.
     composerRef: {
       current: {
-        insertTextAtEnd: (key: string) => {
-          props.composerKeys.push(key);
+        typeKey: (event: KeyboardEvent) => {
+          props.composerKeys.push(event.key);
           return true;
         },
       } as Partial<ChatComposerHandle> as ChatComposerHandle,

apps/web/src/components/chat/useChatShortcuts.ts

@@ -87,7 +87,7 @@ export function useChatShortcuts(input: ChatShortcutsInput) {
       !shortcutContext.terminalFocus &&
       !shortcutContext.modelPickerOpen &&
       shouldTypeToFocusComposer(event) &&
-      input.composerRef.current?.insertTextAtEnd(event.key) === true
+      input.composerRef.current?.typeKey(event) === true
     ) {
       event.preventDefault();
       event.stopPropagation();