Navigate open selections with Ctrl-N and Ctrl-P

apps/web/src/AppRoot.test.tsx

@@ -4,6 +4,7 @@ import { describe, expect, it } from "vite-plus/test";
 
 import { ElectronBrowserHost } from "./browser/ElectronBrowserHost";
 import { PreviewAutomationHosts } from "./components/preview/PreviewAutomationHosts";
+import { SelectionNavigationBindings } from "./components/SelectionNavigationBindings";
 import { AppAtomRegistryProvider } from "./rpc/atomRegistry";
 import type { AppRouter } from "./router";
 import { AppRoot } from "./AppRoot";
@@ -16,9 +17,10 @@ describe("AppRoot", () => {
     const children = Children.toArray(
       (root as ReactElement<{ readonly children: ReactNode }>).props.children,
     );
-    expect(children).toHaveLength(3);
-    expect(isValidElement(children[0]) && children[0].type).toBe(RouterProvider);
-    expect(isValidElement(children[1]) && children[1].type).toBe(PreviewAutomationHosts);
-    expect(isValidElement(children[2]) && children[2].type).toBe(ElectronBrowserHost);
+    expect(children).toHaveLength(4);
+    expect(isValidElement(children[0]) && children[0].type).toBe(SelectionNavigationBindings);
+    expect(isValidElement(children[1]) && children[1].type).toBe(RouterProvider);
+    expect(isValidElement(children[2]) && children[2].type).toBe(PreviewAutomationHosts);
+    expect(isValidElement(children[3]) && children[3].type).toBe(ElectronBrowserHost);
   });
 });

apps/web/src/AppRoot.tsx

@@ -2,6 +2,7 @@ import { RouterProvider } from "@tanstack/react-router";
 
 import { ElectronBrowserHost } from "./browser/ElectronBrowserHost";
 import { PreviewAutomationHosts } from "./components/preview/PreviewAutomationHosts";
+import { SelectionNavigationBindings } from "./components/SelectionNavigationBindings";
 import { AppAtomRegistryProvider } from "./rpc/atomRegistry";
 import type { AppRouter } from "./router";
 
@@ -13,6 +14,7 @@ import type { AppRouter } from "./router";
 export function AppRoot({ router }: { readonly router: AppRouter }) {
   return (
     <AppAtomRegistryProvider>
+      <SelectionNavigationBindings />
       <RouterProvider router={router} />
       <PreviewAutomationHosts />
       <ElectronBrowserHost />

apps/web/src/components/BranchToolbar.tsx

@@ -9,7 +9,7 @@ import {
   HistoryIcon,
   MonitorIcon,
 } from "lucide-react";
-import { memo, useCallback, useMemo } from "react";
+import { memo, useCallback, useMemo, useState } from "react";
 
 import { useComposerDraftStore, type DraftId } from "../composerDraftStore";
 import { useProject, useThread, useThreadShellsForProjectRefs } from "../state/entities";
@@ -71,6 +71,7 @@ interface MobileRunContextSelectorProps {
   onEnvModeChange: (mode: EnvMode) => void;
   previousWorktreeLabel: string | null;
   onUsePreviousWorktree: () => void;
+  onSelectionComplete?: () => void;
 }
 
 const MobileRunContextSelector = memo(function MobileRunContextSelector({
@@ -86,7 +87,13 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
   onEnvModeChange,
   previousWorktreeLabel,
   onUsePreviousWorktree,
+  onSelectionComplete,
 }: MobileRunContextSelectorProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const completeSelection = useCallback(() => {
+    setIsMenuOpen(false);
+    onSelectionComplete?.();
+  }, [onSelectionComplete]);
   const activeEnvironment = useMemo(
     () => availableEnvironments?.find((env) => env.environmentId === environmentId) ?? null,
     [availableEnvironments, environmentId],
@@ -132,7 +139,7 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
   }
 
   return (
-    <Menu>
+    <Menu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
       <MenuTrigger
         render={<Button variant="ghost" size="xs" />}
         className="min-w-0 max-w-[48%] flex-1 justify-start text-muted-foreground/70 hover:text-foreground/80 md:hidden"
@@ -147,13 +154,17 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
               <MenuGroupLabel>Run on</MenuGroupLabel>
               <MenuRadioGroup
                 value={environmentId}
-                onValueChange={(value) => onEnvironmentChange(value as EnvironmentId)}
+                onValueChange={(value) => {
+                  onEnvironmentChange(value as EnvironmentId);
+                  completeSelection();
+                }}
               >
                 {availableEnvironments.map((env) => {
                   const Icon = env.isPrimary ? MonitorIcon : CloudIcon;
                   return (
                     <MenuRadioItem
                       key={env.environmentId}
+                      closeOnClick
                       disabled={envLocked}
                       value={env.environmentId}
                     >
@@ -176,12 +187,14 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
             onValueChange={(value) => {
               if (value === "previous-worktree") {
                 onUsePreviousWorktree();
+                completeSelection();
                 return;
               }
               onEnvModeChange(value as EnvMode);
+              completeSelection();
             }}
           >
-            <MenuRadioItem disabled={envModeLocked} value="local">
+            <MenuRadioItem closeOnClick disabled={envModeLocked} value="local">
               <span className="flex min-w-0 items-center gap-1.5">
                 {activeWorktreePath ? (
                   <FolderGitIcon className="size-3" />
@@ -193,14 +206,14 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
                 </span>
               </span>
             </MenuRadioItem>
-            <MenuRadioItem disabled={envModeLocked} value="worktree">
+            <MenuRadioItem closeOnClick disabled={envModeLocked} value="worktree">
               <span className="flex min-w-0 items-center gap-1.5">
                 <FolderGit2Icon className="size-3" />
                 <span className="min-w-0 truncate">{resolveEnvModeLabel("worktree")}</span>
               </span>
             </MenuRadioItem>
             {previousWorktreeLabel ? (
-              <MenuRadioItem disabled={envModeLocked} value="previous-worktree">
+              <MenuRadioItem closeOnClick disabled={envModeLocked} value="previous-worktree">
                 <span className="flex min-w-0 items-center gap-1.5">
                   <HistoryIcon className="size-3" />
                   <span className="min-w-0 truncate">{previousWorktreeLabel}</span>
@@ -319,6 +332,7 @@ export const BranchToolbar = memo(function BranchToolbar({
           onEnvModeChange={onEnvModeChange}
           previousWorktreeLabel={previousWorktreeLabel}
           onUsePreviousWorktree={onUsePreviousWorktree}
+          {...(onComposerFocusRequest ? { onSelectionComplete: onComposerFocusRequest } : {})}
         />
       ) : (
         <div className="flex min-w-0 shrink-0 items-center gap-1">
@@ -328,6 +342,7 @@ export const BranchToolbar = memo(function BranchToolbar({
                 envLocked={envLocked}
                 environmentId={environmentId}
                 availableEnvironments={availableEnvironments}
+                {...(onComposerFocusRequest ? { onSelectionComplete: onComposerFocusRequest } : {})}
                 {...(showEnvironmentPicker && onEnvironmentChange ? { onEnvironmentChange } : {})}
               />
               <Separator orientation="vertical" className="mx-0.5 h-3.5!" />
@@ -340,6 +355,7 @@ export const BranchToolbar = memo(function BranchToolbar({
             onEnvModeChange={onEnvModeChange}
             previousWorktreeLabel={previousWorktreeLabel}
             onUsePreviousWorktree={onUsePreviousWorktree}
+            {...(onComposerFocusRequest ? { onSelectionComplete: onComposerFocusRequest } : {})}
           />
         </div>
       )}

apps/web/src/components/BranchToolbarEnvModeSelector.tsx

@@ -26,6 +26,7 @@ interface BranchToolbarEnvModeSelectorProps {
   onEnvModeChange: (mode: EnvMode) => void;
   previousWorktreeLabel?: string | null;
   onUsePreviousWorktree?: () => void;
+  onSelectionComplete?: () => void;
 }
 
 export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSelector({
@@ -35,6 +36,7 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
   onEnvModeChange,
   previousWorktreeLabel,
   onUsePreviousWorktree,
+  onSelectionComplete,
 }: BranchToolbarEnvModeSelectorProps) {
   const showPreviousWorktree = Boolean(previousWorktreeLabel && onUsePreviousWorktree);
   const envModeItems = useMemo(
@@ -73,9 +75,11 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
       onValueChange={(value: string | null) => {
         if (value === PREVIOUS_WORKTREE_SELECT_VALUE) {
           onUsePreviousWorktree?.();
+          onSelectionComplete?.();
           return;
         }
         onEnvModeChange(value as EnvMode);
+        onSelectionComplete?.();
       }}
       items={envModeItems}
     >

apps/web/src/components/BranchToolbarEnvironmentSelector.tsx

@@ -20,13 +20,15 @@ interface BranchToolbarEnvironmentSelectorProps {
   // Absent when there is only one environment to show: the indicator still
   // renders (as a static label) so remote projects are always identifiable.
   onEnvironmentChange?: (environmentId: EnvironmentId) => void;
+  onSelectionComplete?: () => void;
 }
 
 export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvironmentSelector({
   envLocked,
   environmentId,
   availableEnvironments,
   onEnvironmentChange,
+  onSelectionComplete,
 }: BranchToolbarEnvironmentSelectorProps) {
   const activeEnvironment = useMemo(() => {
     return availableEnvironments.find((env) => env.environmentId === environmentId) ?? null;
@@ -58,7 +60,10 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
     <Select
       modal={false}
       value={environmentId}
-      onValueChange={(value) => onEnvironmentChange(value as EnvironmentId)}
+      onValueChange={(value) => {
+        onEnvironmentChange(value as EnvironmentId);
+        onSelectionComplete?.();
+      }}
       items={environmentItems}
     >
       <SelectTrigger variant="ghost" size="xs" className="font-medium" aria-label="Run on">

apps/web/src/components/SelectionNavigationBindings.tsx

@@ -0,0 +1,12 @@
+import { useLayoutEffect } from "react";
+
+import { handleSelectionNavigationKeyDown } from "../selectionNavigation";
+
+export function SelectionNavigationBindings() {
+  useLayoutEffect(() => {
+    window.addEventListener("keydown", handleSelectionNavigationKeyDown, true);
+    return () => window.removeEventListener("keydown", handleSelectionNavigationKeyDown, true);
+  }, []);
+
+  return null;
+}

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

@@ -270,6 +270,7 @@ const ComposerFooterModeControls = memo(function ComposerFooterModeControls(prop
   onToggleInteractionMode: () => void;
   onRuntimeModeChange: (mode: RuntimeMode) => void;
   onTogglePlanSidebar: () => void;
+  onSelectionComplete: () => void;
 }) {
   const runtimeModeOption = runtimeModeConfig[props.runtimeMode];
   const RuntimeModeIcon = runtimeModeOption.icon;
@@ -323,7 +324,10 @@ const ComposerFooterModeControls = memo(function ComposerFooterModeControls(prop
       <Tooltip>
         <Select
           value={props.runtimeMode}
-          onValueChange={(value) => props.onRuntimeModeChange(value!)}
+          onValueChange={(value) => {
+            props.onRuntimeModeChange(value!);
+            props.onSelectionComplete();
+          }}
         >
           <TooltipTrigger
             render={
@@ -332,6 +336,7 @@ const ComposerFooterModeControls = memo(function ComposerFooterModeControls(prop
                 size="sm"
                 className="font-medium"
                 aria-label="Runtime mode"
+                data-chat-runtime-mode-picker="true"
               />
             }
           >
@@ -1190,6 +1195,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     modelOptions: composerModelOptions?.[selectedInstanceId],
     prompt,
     onPromptChange: setPromptFromTraits,
+    onSelectionComplete: scheduleComposerFocus,
   });
   const providerTraitsPicker = renderProviderTraitsPicker({
     provider: selectedProvider,
@@ -1201,6 +1207,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     modelOptions: composerModelOptions?.[selectedInstanceId],
     prompt,
     onPromptChange: setPromptFromTraits,
+    onSelectionComplete: scheduleComposerFocus,
   });
   const pendingPrimaryAction = useMemo(
     () =>
@@ -2668,6 +2675,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                     }}
                     getModelDisabledReason={getModelDisabledReason}
                     onInstanceModelChange={onProviderModelSelect}
+                    onSelectionComplete={scheduleComposerFocus}
                   />
                 )}
 
@@ -2683,6 +2691,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                     onToggleInteractionMode={toggleInteractionMode}
                     onTogglePlanSidebar={togglePlanSidebar}
                     onRuntimeModeChange={handleRuntimeModeChange}
+                    onSelectionComplete={scheduleComposerFocus}
                   />
                 ) : (
                   <>
@@ -2702,6 +2711,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                       onToggleInteractionMode={toggleInteractionMode}
                       onRuntimeModeChange={handleRuntimeModeChange}
                       onTogglePlanSidebar={togglePlanSidebar}
+                      onSelectionComplete={scheduleComposerFocus}
                     />
                   </>
                 )}

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

@@ -1,5 +1,5 @@
 import { ProviderInteractionMode, RuntimeMode } from "@t3tools/contracts";
-import { memo, type ReactNode } from "react";
+import { cloneElement, memo, type ReactElement, useCallback, useState } from "react";
 import { EllipsisIcon, ListTodoIcon } from "lucide-react";
 import { Button } from "../ui/button";
 import {
@@ -19,13 +19,25 @@ export const CompactComposerControlsMenu = memo(function CompactComposerControls
   planSidebarOpen: boolean;
   runtimeMode: RuntimeMode;
   showInteractionModeToggle: boolean;
-  traitsMenuContent?: ReactNode;
+  traitsMenuContent?: ReactElement | null;
   onToggleInteractionMode: () => void;
   onTogglePlanSidebar: () => void;
   onRuntimeModeChange: (mode: RuntimeMode) => void;
+  onSelectionComplete: () => void;
 }) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const completeSelection = useCallback(() => {
+    setIsMenuOpen(false);
+    props.onSelectionComplete();
+  }, [props.onSelectionComplete]);
+  const traitsMenuContent = props.traitsMenuContent
+    ? cloneElement(props.traitsMenuContent as ReactElement<{ onSelectionComplete?: () => void }>, {
+        onSelectionComplete: completeSelection,
+      })
+    : null;
+
   return (
-    <Menu>
+    <Menu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
       <MenuTrigger
         render={
           <Button
@@ -39,9 +51,9 @@ export const CompactComposerControlsMenu = memo(function CompactComposerControls
         <EllipsisIcon aria-hidden="true" className="size-4" />
       </MenuTrigger>
       <MenuPopup align="start">
-        {props.traitsMenuContent ? (
+        {traitsMenuContent ? (
           <>
-            {props.traitsMenuContent}
+            {traitsMenuContent}
             <MenuDivider />
           </>
         ) : null}
@@ -53,10 +65,15 @@ export const CompactComposerControlsMenu = memo(function CompactComposerControls
               onValueChange={(value) => {
                 if (!value || value === props.interactionMode) return;
                 props.onToggleInteractionMode();
+                completeSelection();
               }}
             >
-              <MenuRadioItem value="default">Chat</MenuRadioItem>
-              <MenuRadioItem value="plan">Plan</MenuRadioItem>
+              <MenuRadioItem closeOnClick value="default">
+                Chat
+              </MenuRadioItem>
+              <MenuRadioItem closeOnClick value="plan">
+                Plan
+              </MenuRadioItem>
             </MenuRadioGroup>
             <MenuDivider />
           </>
@@ -67,17 +84,31 @@ export const CompactComposerControlsMenu = memo(function CompactComposerControls
           onValueChange={(value) => {
             if (!value || value === props.runtimeMode) return;
             props.onRuntimeModeChange(value as RuntimeMode);
+            completeSelection();
           }}
         >
-          <MenuRadioItem value="approval-required">Supervised</MenuRadioItem>
-          <MenuRadioItem value="auto-accept-edits">Auto-accept edits</MenuRadioItem>
-          <MenuRadioItem value="auto">Auto</MenuRadioItem>
-          <MenuRadioItem value="full-access">Full access</MenuRadioItem>
+          <MenuRadioItem closeOnClick value="approval-required">
+            Supervised
+          </MenuRadioItem>
+          <MenuRadioItem closeOnClick value="auto-accept-edits">
+            Auto-accept edits
+          </MenuRadioItem>
+          <MenuRadioItem closeOnClick value="auto">
+            Auto
+          </MenuRadioItem>
+          <MenuRadioItem closeOnClick value="full-access">
+            Full access
+          </MenuRadioItem>
         </MenuRadioGroup>
         {props.activePlan ? (
           <>
             <MenuDivider />
-            <MenuItem onClick={props.onTogglePlanSidebar}>
+            <MenuItem
+              onClick={() => {
+                props.onTogglePlanSidebar();
+                completeSelection();
+              }}
+            >
               <ListTodoIcon className="size-4 shrink-0" />
               {props.planSidebarOpen
                 ? `Hide ${props.planSidebarLabel.toLowerCase()} sidebar`