fix: add back shift-tab support (#1805)

Closes #1773

Author: jonathanlab

apps/code/src/renderer/features/message-editor/components/PromptInput.tsx

@@ -3,6 +3,7 @@ import type { SessionConfigOption } from "@agentclientprotocol/sdk";
 import { ArrowUp, Stop } from "@phosphor-icons/react";
 import { InputGroup, InputGroupAddon, InputGroupButton } from "@posthog/quill";
 import { Flex, Text, Tooltip } from "@radix-ui/themes";
+import { cycleModeOption } from "@renderer/features/sessions/stores/sessionStore";
 import { EditorContent } from "@tiptap/react";
 import { hasOpenOverlay } from "@utils/overlay";
 import { forwardRef, useCallback, useEffect, useImperativeHandle } from "react";
@@ -188,6 +189,27 @@ export const PromptInput = forwardRef<EditorHandle, PromptInputProps>(
       [isActiveSession, isLoading, onCancel],
     );
 
+    useHotkeys(
+      "shift+tab",
+      (e) => {
+        if (!editor?.isFocused) return;
+        if (hasOpenOverlay()) return;
+        if (!modeOption || !onModeChange) return;
+        const nextMode = cycleModeOption(modeOption, {
+          allowBypassPermissions,
+        });
+        if (!nextMode) return;
+        e.preventDefault();
+        onModeChange(nextMode);
+      },
+      {
+        enableOnFormTags: true,
+        enableOnContentEditable: true,
+        enabled: !disabled && !!modeOption && !!onModeChange,
+      },
+      [editor, modeOption, onModeChange, allowBypassPermissions, disabled],
+    );
+
     const handleContainerClick = useCallback(
       (e: React.MouseEvent) => {
         const target = e.target as HTMLElement;

apps/code/src/renderer/features/sessions/stores/sessionStore.test.ts

@@ -19,25 +19,49 @@ function createModeOption(
   } as SessionConfigOption;
 }
 
-describe("cycleModeOption", () => {
-  it("cycles through auto-accept permissions for claude", () => {
-    const option = createModeOption("plan", [
-      "default",
-      "acceptEdits",
-      "plan",
-      "bypassPermissions",
-    ]);
-
-    expect(cycleModeOption(option)).toBe("bypassPermissions");
-  });
+const CLAUDE_MODES = ["default", "acceptEdits", "plan", "bypassPermissions"];
+const CODEX_MODES = ["read-only", "auto", "full-access"];
 
-  it("cycles through full access for codex", () => {
-    const option = createModeOption("auto", [
-      "read-only",
-      "auto",
-      "full-access",
-    ]);
+describe("cycleModeOption", () => {
+  it.each([
+    {
+      name: "claude: advances to next mode when bypass allowed",
+      values: CLAUDE_MODES,
+      currentValue: "plan",
+      allowBypassPermissions: true,
+      expected: "bypassPermissions",
+    },
+    {
+      name: "codex: advances to next mode when bypass allowed",
+      values: CODEX_MODES,
+      currentValue: "auto",
+      allowBypassPermissions: true,
+      expected: "full-access",
+    },
+    {
+      name: "claude: skips bypassPermissions when not allowed",
+      values: CLAUDE_MODES,
+      currentValue: "acceptEdits",
+      allowBypassPermissions: false,
+      expected: "plan",
+    },
+    {
+      name: "claude: wraps past bypassPermissions back to default",
+      values: CLAUDE_MODES,
+      currentValue: "plan",
+      allowBypassPermissions: false,
+      expected: "default",
+    },
+    {
+      name: "codex: skips full-access when not allowed",
+      values: CODEX_MODES,
+      currentValue: "auto",
+      allowBypassPermissions: false,
+      expected: "read-only",
+    },
+  ])("$name", ({ values, currentValue, allowBypassPermissions, expected }) => {
+    const option = createModeOption(currentValue, values);
 
-    expect(cycleModeOption(option)).toBe("full-access");
+    expect(cycleModeOption(option, { allowBypassPermissions })).toBe(expected);
   });
 });

apps/code/src/renderer/features/sessions/stores/sessionStore.ts

@@ -148,19 +148,26 @@ export function getConfigOptionByCategory(
  */
 export function cycleModeOption(
   modeOption: SessionConfigOption | undefined,
+  options?: { allowBypassPermissions?: boolean },
 ): string | undefined {
   if (!modeOption || modeOption.type !== "select") return undefined;
 
   const allOptions = flattenSelectOptions(modeOption.options);
-  if (allOptions.length === 0) return undefined;
-
-  const currentIndex = allOptions.findIndex(
+  const filtered = options?.allowBypassPermissions
+    ? allOptions
+    : allOptions.filter(
+        (opt) =>
+          opt.value !== "bypassPermissions" && opt.value !== "full-access",
+      );
+  if (filtered.length === 0) return undefined;
+
+  const currentIndex = filtered.findIndex(
     (opt) => opt.value === modeOption.currentValue,
   );
-  if (currentIndex === -1) return allOptions[0]?.value;
+  if (currentIndex === -1) return filtered[0]?.value;
 
-  const nextIndex = (currentIndex + 1) % allOptions.length;
-  return allOptions[nextIndex]?.value;
+  const nextIndex = (currentIndex + 1) % filtered.length;
+  return filtered[nextIndex]?.value;
 }
 
 /**