Add vim toggle command and new Vim edits

Author: ammar-agent

src/components/ChatInput.tsx

@@ -10,7 +10,7 @@ import { usePersistedState, updatePersistedState } from "@/hooks/usePersistedSta
 import { useMode } from "@/contexts/ModeContext";
 import { ChatToggles } from "./ChatToggles";
 import { useSendMessageOptions } from "@/hooks/useSendMessageOptions";
-import { getModelKey, getInputKey } from "@/constants/storage";
+import { getModelKey, getInputKey, VIM_ENABLED_KEY } from "@/constants/storage";
 import { ToggleGroup } from "./ToggleGroup";
 import { CUSTOM_EVENTS } from "@/constants/events";
 import type { UIMode } from "@/types/mode";
@@ -675,6 +675,27 @@ export const ChatInput: React.FC<ChatInputProps> = ({
           return;
         }
 
+        // Handle /vim command
+        if (parsed.type === "vim-toggle") {
+          setInput(""); // Clear input immediately
+          let newState = false;
+          updatePersistedState<boolean>(
+            VIM_ENABLED_KEY,
+            (prev) => {
+              const next = !(prev ?? false);
+              newState = next;
+              return next;
+            },
+            false
+          );
+          setToast({
+            id: Date.now().toString(),
+            type: "success",
+            message: newState ? "Vim mode enabled" : "Vim mode disabled",
+          });
+          return;
+        }
+
         // Handle /telemetry command
         if (parsed.type === "telemetry-set") {
           setInput(""); // Clear input immediately

src/components/VimTextArea.tsx

@@ -4,6 +4,8 @@ import type { UIMode } from "@/types/mode";
 import * as vim from "@/utils/vim";
 import { TooltipWrapper, Tooltip, HelpIndicator } from "./Tooltip";
 import { formatKeybind, KEYBINDS } from "@/utils/ui/keybinds";
+import { usePersistedState } from "@/hooks/usePersistedState";
+import { VIM_ENABLED_KEY } from "@/constants/storage";
 
 /**
  * VimTextArea – minimal Vim-like editing for a textarea.
@@ -123,8 +125,15 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
       if (typeof ref === "function") ref(textareaRef.current);
       else ref.current = textareaRef.current;
     }, [ref]);
+    const [vimEnabled] = usePersistedState(VIM_ENABLED_KEY, false, { listener: true });
 
     const [vimMode, setVimMode] = useState<VimMode>("insert");
+    useEffect(() => {
+      if (!vimEnabled) {
+        setVimMode("insert");
+      }
+    }, [vimEnabled]);
+
     const [isFocused, setIsFocused] = useState(false);
     const [desiredColumn, setDesiredColumn] = useState<number | null>(null);
     const [pendingOp, setPendingOp] = useState<null | {
@@ -170,6 +179,8 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
       onKeyDown?.(e);
       if (e.defaultPrevented) return;
 
+      if (!vimEnabled) return;
+
       // If suggestions or external popovers are active, do not intercept navigation keys
       if (suppressSet.has(e.key)) return;
 
@@ -229,7 +240,7 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
     };
 
     // Build mode indicator content
-    const showVimMode = vimMode === "normal";
+    const showVimMode = vimEnabled && vimMode === "normal";
     const pendingCommand = showVimMode ? vim.formatPendingCommand(pendingOp) : "";
     const showFocusHint = !isFocused;
 
@@ -287,7 +298,7 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
             spellCheck={false}
             {...rest}
           />
-          {vimMode === "normal" && value.length === 0 && <EmptyCursor />}
+          {vimEnabled && vimMode === "normal" && value.length === 0 && <EmptyCursor />}
         </div>
       </div>
     );

src/constants/storage.ts

@@ -61,6 +61,12 @@ export function getModeKey(workspaceId: string): string {
  */
 export const USE_1M_CONTEXT_KEY = "use1MContext";
 
+/**
+ * Get the localStorage key for vim mode preference (global)
+ * Format: "vimEnabled"
+ */
+export const VIM_ENABLED_KEY = "vimEnabled";
+
 /**
  * Get the localStorage key for the compact continue message for a workspace
  * Temporarily stores the continuation prompt for the current compaction

src/hooks/usePersistedState.ts

@@ -33,25 +33,37 @@ export function readPersistedState<T>(key: string, defaultValue: T): T {
  * This is useful when you need to update state from a different component/context
  * that doesn't have access to the setter (e.g., command palette updating workspace state).
  *
+ * Supports functional updates to avoid races when toggling values.
+ *
  * @param key - The same localStorage key used in usePersistedState
- * @param value - The new value to set
+ * @param value - The new value to set, or a functional updater
+ * @param defaultValue - Optional default value when reading existing state for functional updates
  */
-export function updatePersistedState<T>(key: string, value: T): void {
+export function updatePersistedState<T>(
+  key: string,
+  value: T | ((prev: T) => T),
+  defaultValue?: T
+): void {
   if (typeof window === "undefined" || !window.localStorage) {
     return;
   }
 
   try {
-    if (value === undefined || value === null) {
+    const newValue: T | null | undefined =
+      typeof value === "function"
+        ? (value as (prev: T) => T)(readPersistedState(key, defaultValue as T))
+        : value;
+
+    if (newValue === undefined || newValue === null) {
       window.localStorage.removeItem(key);
     } else {
-      window.localStorage.setItem(key, JSON.stringify(value));
+      window.localStorage.setItem(key, JSON.stringify(newValue));
     }
 
     // Dispatch custom event for same-tab synchronization
     // No origin since this is an external update - all listeners should receive it
     const customEvent = new CustomEvent(getStorageChangeEvent(key), {
-      detail: { key, newValue: value },
+      detail: { key, newValue },
     });
     window.dispatchEvent(customEvent);
   } catch (error) {

src/utils/slashCommands/parser.test.ts

@@ -144,6 +144,18 @@ describe("commandParser", () => {
         subcommand: "claude",
       });
     });
+
+    it("should parse /vim command", () => {
+      expectParse("/vim", { type: "vim-toggle" });
+    });
+
+    it("should reject /vim with arguments", () => {
+      expectParse("/vim enable", {
+        type: "unknown-command",
+        command: "vim",
+        subcommand: "enable",
+      });
+    });
   });
 
   describe("setNestedProperty", () => {

src/utils/slashCommands/registry.ts

@@ -396,6 +396,23 @@ const modelCommandDefinition: SlashCommandDefinition = {
   },
 };
 
+const vimCommandDefinition: SlashCommandDefinition = {
+  key: "vim",
+  description: "Toggle Vim mode for the chat input",
+  appendSpace: false,
+  handler: ({ cleanRemainingTokens }): ParsedCommand => {
+    if (cleanRemainingTokens.length > 0) {
+      return {
+        type: "unknown-command",
+        command: "vim",
+        subcommand: cleanRemainingTokens[0],
+      };
+    }
+
+    return { type: "vim-toggle" };
+  },
+};
+
 const telemetryCommandDefinition: SlashCommandDefinition = {
   key: "telemetry",
   description: "Enable or disable telemetry",
@@ -443,6 +460,7 @@ export const SLASH_COMMAND_DEFINITIONS: readonly SlashCommandDefinition[] = [
   modelCommandDefinition,
   providersCommandDefinition,
   telemetryCommandDefinition,
+  vimCommandDefinition,
 ];
 
 export const SLASH_COMMAND_DEFINITION_MAP = new Map(

src/utils/slashCommands/types.ts

@@ -14,6 +14,7 @@ export type ParsedCommand =
   | { type: "compact"; maxOutputTokens?: number; continueMessage?: string; model?: string }
   | { type: "telemetry-set"; enabled: boolean }
   | { type: "telemetry-help" }
+  | { type: "vim-toggle" }
   | { type: "unknown-command"; command: string; subcommand?: string }
   | null;
 

src/utils/vim.test.ts

@@ -224,6 +224,62 @@ describe("Vim Command Integration Tests", () => {
       expect(state.text).toBe("heXXllo");
       expect(state.cursor).toBe(2);
     });
+
+    test("s substitutes character under cursor", () => {
+      const state = executeVimCommands(
+        { ...initialState, text: "hello", cursor: 1, mode: "normal" },
+        ["s"]
+      );
+      expect(state.text).toBe("hllo");
+      expect(state.cursor).toBe(1);
+      expect(state.mode).toBe("insert");
+      expect(state.yankBuffer).toBe("e");
+    });
+
+    test("s at end of text does nothing", () => {
+      const state = executeVimCommands(
+        { ...initialState, text: "hello", cursor: 5, mode: "normal" },
+        ["s"]
+      );
+      expect(state.text).toBe("hello");
+      expect(state.mode).toBe("normal");
+    });
+
+    test("~ toggles case of character under cursor", () => {
+      const state = executeVimCommands(
+        { ...initialState, text: "HeLLo", cursor: 0, mode: "normal" },
+        ["~"]
+      );
+      expect(state.text).toBe("heLLo");
+      expect(state.cursor).toBe(1);
+    });
+
+    test("~ toggles case and moves through word", () => {
+      const state = executeVimCommands(
+        { ...initialState, text: "HeLLo", cursor: 0, mode: "normal" },
+        ["~", "~", "~"]
+      );
+      expect(state.text).toBe("hElLo");
+      expect(state.cursor).toBe(3);
+    });
+
+    test("~ on non-letter does nothing but advances cursor", () => {
+      const state = executeVimCommands(
+        { ...initialState, text: "a 1 b", cursor: 1, mode: "normal" },
+        ["~"]
+      );
+      expect(state.text).toBe("a 1 b");
+      expect(state.cursor).toBe(2);
+    });
+
+    test("~ at end of text does not advance cursor", () => {
+      const state = executeVimCommands(
+        { ...initialState, text: "hello", cursor: 4, mode: "normal" },
+        ["~"]
+      );
+      expect(state.text).toBe("hellO");
+      expect(state.cursor).toBe(4);
+    });
   });
 
   describe("Line Operations", () => {

src/utils/vim.ts

@@ -821,6 +821,33 @@ function tryHandleEdit(state: VimState, key: string): VimKeyResult | null {
         desiredColumn: null,
       });
     }
+
+    case "s": {
+      if (cursor >= text.length) return null;
+      const result = deleteCharUnderCursor(text, cursor, yankBuffer);
+      return handleKey(state, {
+        text: result.text,
+        cursor: result.cursor,
+        yankBuffer: result.yankBuffer,
+        mode: "insert",
+        desiredColumn: null,
+        pendingOp: null,
+      });
+    }
+
+    case "~": {
+      if (cursor >= text.length) return null;
+      const char = text[cursor];
+      const toggled = char === char.toUpperCase() ? char.toLowerCase() : char.toUpperCase();
+      const newText = text.slice(0, cursor) + toggled + text.slice(cursor + 1);
+      const newCursor = Math.min(cursor + 1, Math.max(0, newText.length - 1));
+      return handleKey(state, {
+        text: newText,
+        cursor: newCursor,
+        desiredColumn: null,
+        pendingOp: null,
+      });
+    }
   }
 
   return null;