fix(web): right panel launcher letters open their surface instead of typing into the composer

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

@@ -47,6 +47,17 @@ export function eventPathContainsSelector(event: Event, selector: string): boole
 }
 
 const SECRET_REQUEST_SELECTOR = '[data-v2-item-type="secret_request"]';
+const SURFACE_LAUNCHER_KEYS_ATTRIBUTE = "data-surface-launcher-keys";
+
+// The right-panel launcher registers its own window capture listener when it
+// mounts. When the panel opens after page load that listener runs after ours,
+// so we must leave its letters alone or the composer takes them first.
+function isSurfaceLauncherKey(key: string): boolean {
+  const launcherKeys = document
+    .querySelector(`[${SURFACE_LAUNCHER_KEYS_ATTRIBUTE}]`)
+    ?.getAttribute(SURFACE_LAUNCHER_KEYS_ATTRIBUTE);
+  return launcherKeys?.toLowerCase().includes(key.toLowerCase()) ?? false;
+}
 
 export function shouldRedirectInputToComposer(event: Event): boolean {
   if (event.defaultPrevented) return false;
@@ -64,6 +75,7 @@ export function shouldTypeToFocusComposer(event: KeyboardEvent): boolean {
   if (event.metaKey || event.ctrlKey || event.altKey) return false;
   if (event.key.length !== 1) return false;
   if (!shouldRedirectInputToComposer(event)) return false;
+  if (isSurfaceLauncherKey(event.key)) return false;
 
   return true;
 }

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

@@ -0,0 +1,89 @@
+import { useEffect } from "react";
+import { expect, it } from "vite-plus/test";
+import { userEvent } from "vite-plus/test/browser";
+
+import { render } from "../../../test/render";
+import { useChatShortcuts } from "./useChatShortcuts";
+
+const shortcutContext = {
+  terminalFocus: false,
+  terminalOpen: false,
+  previewFocus: false,
+  previewOpen: false,
+  isWeb: true,
+  isDesktop: false,
+  modelPickerOpen: false,
+};
+
+const focusOnMount = (element: HTMLElement | null) => element?.focus();
+
+// Stands in for the right panel's launcher, which needs the whole app around it. Like the
+// real one it takes focus, advertises its letters in `data-surface-launcher-keys`, and
+// claims one from its own window capture listener unless the key was already handled.
+function Launcher(props: { keys: string; received: string[] }) {
+  useEffect(() => {
+    const claim = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      if (!props.keys.toLowerCase().split("").includes(event.key.toLowerCase())) return;
+      event.preventDefault();
+      props.received.push(event.key);
+    };
+    window.addEventListener("keydown", claim, true);
+    return () => window.removeEventListener("keydown", claim, true);
+  }, [props.keys, props.received]);
+  return (
+    <div
+      ref={focusOnMount}
+      tabIndex={0}
+      aria-label="Open a surface"
+      data-surface-launcher-keys={props.keys}
+    />
+  );
+}
+
+// The chat's shortcut listener registers when the chat mounts, so a launcher that opens
+// later registers after it. Tests mount the chat first and add the launcher by rerendering.
+function Chat(props: { composerKeys: string[]; launcher?: { keys: string; received: string[] } }) {
+  useChatShortcuts({
+    enabled: true,
+    keybindings: [],
+    scriptKeybindings: [],
+    getShortcutContext: () => shortcutContext,
+    threadFindActive: false,
+    typeIntoComposer: (key) => {
+      props.composerKeys.push(key);
+      return true;
+    },
+    closeThreadFind: () => {},
+    commands: {},
+    fallback: () => undefined,
+  });
+  return props.launcher ? <Launcher {...props.launcher} /> : null;
+}
+
+// router: false because the chat shortcuts and the launcher stand-in never navigate.
+const options = { router: false } as const;
+
+it("leaves the launcher's letters to the launcher, in either case", async () => {
+  const composerKeys: string[] = [];
+  const received: string[] = [];
+  await using screen = await render(<Chat composerKeys={composerKeys} />, options);
+  await screen.rerender(<Chat composerKeys={composerKeys} launcher={{ keys: "BT", received }} />);
+
+  await userEvent.keyboard("tT");
+
+  expect(received).toEqual(["t", "T"]);
+  expect(composerKeys).toEqual([]);
+});
+
+it("still types other letters into the composer while the launcher is open", async () => {
+  const composerKeys: string[] = [];
+  const received: string[] = [];
+  await using screen = await render(<Chat composerKeys={composerKeys} />, options);
+  await screen.rerender(<Chat composerKeys={composerKeys} launcher={{ keys: "BT", received }} />);
+
+  await userEvent.keyboard("a");
+
+  expect(composerKeys).toEqual(["a"]);
+  expect(received).toEqual([]);
+});