Add Shift+Tab shortcut to toggle composer plan mode (#186)

- add Shift+Tab keyboard handling in composer to switch chat/plan modes
- refactor mode toggle into shared callback used by hotkey and button
- add browser test to verify toggling only works when composer is focused

Author: t3dotgg

apps/web/src/components/ChatView.browser.tsx

@@ -392,6 +392,23 @@ async function waitForElement<T extends Element>(
   return element;
 }
 
+async function waitForComposerEditor(): Promise<HTMLElement> {
+  return waitForElement(
+    () => document.querySelector<HTMLElement>('[contenteditable="true"]'),
+    "Unable to find composer editor.",
+  );
+}
+
+async function waitForInteractionModeButton(expectedLabel: "Chat" | "Plan"): Promise<HTMLButtonElement> {
+  return waitForElement(
+    () =>
+      Array.from(document.querySelectorAll("button")).find(
+        (button) => button.textContent?.trim() === expectedLabel,
+      ) as HTMLButtonElement | null,
+    `Unable to find ${expectedLabel} interaction mode button.`,
+  );
+}
+
 async function waitForImagesToLoad(scope: ParentNode): Promise<void> {
   const images = Array.from(scope.querySelectorAll("img"));
   if (images.length === 0) {
@@ -785,4 +802,69 @@ describe("ChatView timeline estimator parity (full app)", () => {
       await mounted.cleanup();
     }
   });
+
+  it("toggles plan mode with Shift+Tab only while the composer is focused", async () => {
+    const mounted = await mountChatView({
+      viewport: DEFAULT_VIEWPORT,
+      snapshot: createSnapshotForTargetUser({
+        targetMessageId: "msg-user-target-hotkey" as MessageId,
+        targetText: "hotkey target",
+      }),
+    });
+
+    try {
+      const initialModeButton = await waitForInteractionModeButton("Chat");
+      expect(initialModeButton.title).toContain("enter plan mode");
+
+      window.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "Tab",
+          shiftKey: true,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+      await waitForLayout();
+
+      expect((await waitForInteractionModeButton("Chat")).title).toContain("enter plan mode");
+
+      const composerEditor = await waitForComposerEditor();
+      composerEditor.focus();
+      composerEditor.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "Tab",
+          shiftKey: true,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+
+      await vi.waitFor(
+        async () => {
+          expect((await waitForInteractionModeButton("Plan")).title).toContain(
+            "return to normal chat mode",
+          );
+        },
+        { timeout: 8_000, interval: 16 },
+      );
+
+      composerEditor.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "Tab",
+          shiftKey: true,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+
+      await vi.waitFor(
+        async () => {
+          expect((await waitForInteractionModeButton("Chat")).title).toContain("enter plan mode");
+        },
+        { timeout: 8_000, interval: 16 },
+      );
+    } finally {
+      await mounted.cleanup();
+    }
+  });
 });

apps/web/src/components/ChatView.tsx

@@ -1618,6 +1618,9 @@ export default function ChatView({ threadId }: ChatViewProps) {
       threadId,
     ],
   );
+  const toggleInteractionMode = useCallback(() => {
+    handleInteractionModeChange(interactionMode === "plan" ? "default" : "plan");
+  }, [handleInteractionModeChange, interactionMode]);
 
   const persistThreadSettingsForNextTurn = useCallback(
     async (input: {
@@ -3215,6 +3218,11 @@ export default function ChatView({ threadId }: ChatViewProps) {
     key: "ArrowDown" | "ArrowUp" | "Enter" | "Tab",
     event: KeyboardEvent,
   ) => {
+    if (key === "Tab" && event.shiftKey) {
+      toggleInteractionMode();
+      return true;
+    }
+
     const { trigger } = resolveActiveComposerTrigger();
     const menuIsActive = composerMenuOpenRef.current || trigger !== null;
 
@@ -3579,11 +3587,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
                     className="shrink-0 whitespace-nowrap px-2 text-muted-foreground/70 hover:text-foreground/80 sm:px-3"
                     size="sm"
                     type="button"
-                    onClick={() =>
-                      void handleInteractionModeChange(
-                        interactionMode === "plan" ? "default" : "plan",
-                      )
-                    }
+                    onClick={toggleInteractionMode}
                     title={
                       interactionMode === "plan"
                         ? "Plan mode — click to return to normal chat mode"