From e3d0380c2e7d2b35d277d1b4c2fd3ea0e9fe5bb0 Mon Sep 17 00:00:00 2001
From: Hiep Le <69354317+hieptl@users.noreply.github.com>
Date: Fri, 14 Nov 2025 00:10:25 +0700
Subject: [PATCH] feat(frontend): add support for the shift + tab shortcut to
 cycle through conversation modes (#11731)

---
 .../features/chat/change-agent-button.tsx     | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/frontend/src/components/features/chat/change-agent-button.tsx b/frontend/src/components/features/chat/change-agent-button.tsx
index 706f582b59..cf27d96554 100644
--- a/frontend/src/components/features/chat/change-agent-button.tsx
+++ b/frontend/src/components/features/chat/change-agent-button.tsx
@@ -37,6 +37,37 @@ export function ChangeAgentButton() {
     }
   }, [isAgentRunning, contextMenuOpen]);
 
+  // Handle Shift + Tab keyboard shortcut to cycle through modes
+  useEffect(() => {
+    if (!shouldUsePlanningAgent || isAgentRunning) {
+      return undefined;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Check for Shift + Tab combination
+      if (event.shiftKey && event.key === "Tab") {
+        // Prevent default tab navigation behavior
+        event.preventDefault();
+        event.stopPropagation();
+
+        // Cycle between modes: code -> plan -> code
+        const nextMode = conversationMode === "code" ? "plan" : "code";
+        setConversationMode(nextMode);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [
+    shouldUsePlanningAgent,
+    isAgentRunning,
+    conversationMode,
+    setConversationMode,
+  ]);
+
   const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     event.stopPropagation();