refactor(web): Cmd+O presses the Open in editor button instead of a per-picker listener (#25667)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

Author: juliusmarminge

apps/web/src/appInit.tsx

@@ -43,6 +43,7 @@ import { getRouter, type AppRouter } from "./router";
 import { appAtomRegistry } from "./rpc/atomRegistry";
 import { primaryServerConfigAtom } from "./state/server";
 import { installChatRouteCommands } from "./shortcuts/chatRouteCommands";
+import { registerOpenFavoriteEditorCommand } from "./components/chat/OpenInPickerShortcut";
 import { resolveThreadRouteTarget } from "./threadRoutes";
 
 /** Writes appearance settings onto the document, touching only the groups that changed. */
@@ -170,6 +171,7 @@ export function startAppServices(): AppRouter {
   startPreviewTitleRecording();
   startBrowserProfileReporting();
   installChatRouteCommands(router);
+  registerOpenFavoriteEditorCommand();
   startThreadOverlayRetention(router);
   startMainAppLocationTracking(router);
   startBackgroundThreadAnnouncements(appAtomRegistry, router);

apps/web/src/components/chat/OpenInPicker.browser.test.tsx

@@ -66,7 +66,10 @@ vi.mock(import("../../remoteOpen"), async (importOriginal) => ({
 }));
 
 import { OpenInPicker } from "./OpenInPicker";
-import { useOpenFavoriteEditorShortcut } from "./OpenInPickerShortcut";
+import {
+  registerOpenFavoriteEditorCommand,
+  useOpenFavoriteEditorShortcut,
+} from "./OpenInPickerShortcut";
 
 const primary = EnvironmentId.make("primary");
 const selected = EnvironmentId.make("selected");
@@ -88,6 +91,9 @@ async function setup() {
   stack.use(_platform);
   const _storage = { [Symbol.dispose]: () => window.localStorage.clear() };
   stack.use(_storage);
+  // The app registers this command at startup (appInit).
+  const _openFavorite = { [Symbol.dispose]: registerOpenFavoriteEditorCommand() };
+  stack.use(_openFavorite);
   const screen = stack.use(await renderUi(null));
   async function renderPicker(
     availableEditors: readonly EditorId[] = editors,
@@ -171,10 +177,10 @@ describe("host editor access", () => {
     state.allowed.delete(selected);
     state.allowed.add(primary);
     await click(primaryButton());
-    const event = await pressOpenFavorite();
+    // The shortcut is consumed and opens nothing once the grant is gone.
+    expect((await pressOpenFavorite()).defaultPrevented).toBe(true);
     expect(state.run).not.toHaveBeenCalled();
     expect(state.setPreferred).not.toHaveBeenCalled();
-    expect(event.defaultPrevented).toBe(false);
 
     await renderPicker();
     expect(primaryButton().disabled).toBe(true);

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

@@ -6,9 +6,10 @@ import {
   type EnvironmentId,
   type ResolvedKeybindingsConfig,
 } from "@t3tools/contracts";
-import { memo, use, useEffect, useRef } from "react";
+import { memo, use, useRef } from "react";
 import { BackgroundThreadContext } from "./backgroundThread";
-import { isOpenFavoriteEditorShortcut, shortcutLabelForCommand } from "../../keybindings";
+import { shortcutLabelForCommand } from "../../keybindings";
+import { OPEN_FAVORITE_EDITOR_ATTRIBUTE } from "./OpenInPickerShortcut";
 import { usePreferredEditor } from "../../editorPreferences";
 import { editorLabelForPlatform } from "../../editorLabels";
 import {
@@ -281,38 +282,6 @@ export const OpenInPicker = memo(function OpenInPicker({
   );
 
   const backgroundThread = use(BackgroundThreadContext);
-  useEffect(() => {
-    if (!enableShortcut || !canOpenEditor || backgroundThread) return;
-    const handler = (e: globalThis.KeyboardEvent) => {
-      if (e.defaultPrevented || !isOpenFavoriteEditorShortcut(e, keybindings)) return;
-      if (!openInCwd) return;
-      if (!preferredEditor) return;
-      if (
-        remote.mode === "local-exec" &&
-        !readEnvironmentScope(environmentId, AuthOrchestrationOperateScope)
-      )
-        return;
-
-      e.preventDefault();
-      const label = editorLabelForPlatform(preferredEditor, navigator.platform);
-      void openInEditor(preferredEditor).then((opened) => {
-        if (opened) announce(`Opened in ${label}`);
-      });
-    };
-    window.addEventListener("keydown", handler, true);
-    return () => window.removeEventListener("keydown", handler, true);
-  }, [
-    backgroundThread,
-    canOpenEditor,
-    enableShortcut,
-    environmentId,
-    keybindings,
-    openInCwd,
-    openInEditor,
-    preferredEditor,
-    remote.mode,
-  ]);
-  // Derive after the shortcut effect to preserve the editor list's compiler cache.
   const options = resolveOpenInOptions(navigator.platform, effectiveEditors);
   const primaryOption = options.find(({ value }) => value === preferredEditor) ?? null;
   const primaryLabel = isPanel ? `Open in ${primaryOption?.label ?? "editor"}` : "Open";
@@ -402,7 +371,14 @@ export const OpenInPicker = memo(function OpenInPicker({
         part="primary"
         panel={isPanel}
         disabled={!preferredEditor || !openInCwd || !canOpenEditor}
-        onClick={() => openInEditor(preferredEditor)}
+        {...(enableShortcut && !backgroundThread ? { [OPEN_FAVORITE_EDITOR_ATTRIBUTE]: "" } : {})}
+        onClick={() => {
+          if (!preferredEditor) return;
+          const label = editorLabelForPlatform(preferredEditor, navigator.platform);
+          void openInEditor(preferredEditor).then((opened) => {
+            if (opened) announce(`Opened in ${label}`);
+          });
+        }}
       >
         {primaryOption?.Icon ? (
           <primaryOption.Icon

apps/web/src/components/chat/OpenInPickerShortcut.ts

@@ -6,9 +6,35 @@ import { editorLabelForPlatform } from "../../editorLabels";
 import { isOpenFavoriteEditorShortcut } from "../../keybindings";
 import { announce } from "../../lib/announce";
 import { useRemoteOpenState } from "../../remoteOpen";
+import { registerCommands } from "../../shortcuts/dispatcher";
 import { shellEnvironment } from "../../state/shell";
 import { useAtomCommand } from "../../state/use-atom-command";
 
+/** Marks an OpenInPicker's primary button as the target of `editor.openFavorite`. */
+export const OPEN_FAVORITE_EDITOR_ATTRIBUTE = "data-open-favorite-editor";
+
+/**
+ * `editor.openFavorite` presses the marked OpenInPicker primary button, so the shortcut opens
+ * exactly what the button on screen would. A missing or disabled button leaves the chord to the
+ * bubble-phase fallback below. Capture phase, so a focused terminal does not swallow the chord.
+ */
+export function registerOpenFavoriteEditorCommand(): () => void {
+  return registerCommands(
+    {
+      "editor.openFavorite": (event) => {
+        if (event.repeat) return false;
+        const button = [
+          ...document.querySelectorAll<HTMLButtonElement>(`[${OPEN_FAVORITE_EDITOR_ATTRIBUTE}]`),
+        ].at(-1);
+        if (button === undefined || button.disabled) return false;
+        event.preventDefault();
+        button.click();
+      },
+    },
+    { capture: true },
+  );
+}
+
 export function useOpenFavoriteEditorShortcut({
   enabled,
   environmentId,