fix(webapp): stop Cmd-J opening Chrome's downloads

Shortcuts can now ask for the browser default to be prevented, and the
agent's keystroke does.

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/agent-shortcuts.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import { hotkeyOptions } from "~/hooks/useShortcutKeys";
+import { LEGACY_ASK_AI_SHORTCUT, TOGGLE_PANEL_SHORTCUT } from "./dashboardAgentLauncher";
+
+const enabled = { isEnabled: true };
+
+describe("the agent's shortcuts", () => {
+  it("asks for Cmd-J's browser default to be prevented", () => {
+    expect(TOGGLE_PANEL_SHORTCUT.key).toBe("j");
+    expect(TOGGLE_PANEL_SHORTCUT.modifiers).toEqual(["mod"]);
+    expect(hotkeyOptions({ shortcut: TOGGLE_PANEL_SHORTCUT, ...enabled }).preventDefault).toBe(
+      true
+    );
+  });
+
+  it("fires from inside the composer", () => {
+    const options = hotkeyOptions({ shortcut: TOGGLE_PANEL_SHORTCUT, ...enabled });
+    expect(options.enableOnFormTags).toBe(true);
+    expect(options.enableOnContentEditable).toBe(true);
+  });
+
+  it("leaves Cmd-I's default alone", () => {
+    expect(hotkeyOptions({ shortcut: LEGACY_ASK_AI_SHORTCUT, ...enabled }).preventDefault).toBe(
+      false
+    );
+  });
+});
+
+describe("hotkeyOptions", () => {
+  it("defaults to leaving the browser default alone", () => {
+    expect(hotkeyOptions({ shortcut: { key: "k" }, ...enabled })).toEqual({
+      enabled: true,
+      enableOnFormTags: false,
+      enableOnContentEditable: false,
+      preventDefault: false,
+    });
+  });
+
+  // The library calls preventDefault before it checks `enabled`.
+  it("does not prevent the default while the shortcut is disabled", () => {
+    expect(
+      hotkeyOptions({ shortcut: TOGGLE_PANEL_SHORTCUT, isEnabled: false }).preventDefault
+    ).toBe(false);
+  });
+
+  it("lets the call site turn on input elements for a shortcut that did not", () => {
+    const options = hotkeyOptions({
+      shortcut: { key: "k" },
+      isEnabled: true,
+      enabledOnInputElements: true,
+    });
+    expect(options.enableOnFormTags).toBe(true);
+  });
+
+  it("survives an undefined shortcut", () => {
+    expect(hotkeyOptions({ shortcut: undefined, isEnabled: false })).toEqual({
+      enabled: false,
+      enableOnFormTags: false,
+      enableOnContentEditable: false,
+      preventDefault: false,
+    });
+  });
+});

apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx

@@ -12,6 +12,8 @@ export const TOGGLE_PANEL_SHORTCUT: Shortcut = {
   // The composer holds focus while the panel is open, so the key must fire from
   // inside a text field.
   enabledOnInputElements: true,
+  // Chrome binds Cmd/Ctrl-J to Show Downloads.
+  preventDefault: true,
 };
 
 type DashboardAgentContextValue = {

apps/webapp/app/hooks/useShortcutKeys.tsx

@@ -9,6 +9,8 @@ export type Shortcut = {
   modifiers?: Modifier[];
   enabledOnInputElements?: boolean;
   enabled?: boolean;
+  /** Set when the browser binds the same keystroke to something of its own. */
+  preventDefault?: boolean;
 };
 
 export type ShortcutDefinition =
@@ -48,16 +50,38 @@ export function useShortcutKeys({
         action(event);
       }
     },
-    {
-      enabled: isEnabled,
-      enableOnFormTags:
-        isEnabled && (enabledOnInputElements ?? relevantShortcut?.enabledOnInputElements),
-      enableOnContentEditable:
-        isEnabled && (enabledOnInputElements ?? relevantShortcut?.enabledOnInputElements),
-    }
+    hotkeyOptions({ shortcut: relevantShortcut, isEnabled, enabledOnInputElements })
   );
 }
 
+export type HotkeyOptions = {
+  enabled: boolean;
+  enableOnFormTags: boolean;
+  enableOnContentEditable: boolean;
+  preventDefault: boolean;
+};
+
+// react-hotkeys-hook runs `preventDefault` before it checks `enabled`, so a
+// disabled shortcut must not ask for it.
+export function hotkeyOptions({
+  shortcut,
+  isEnabled,
+  enabledOnInputElements,
+}: {
+  shortcut: Shortcut | undefined;
+  isEnabled: boolean;
+  enabledOnInputElements?: boolean;
+}): HotkeyOptions {
+  const onInputElements = enabledOnInputElements ?? shortcut?.enabledOnInputElements ?? false;
+
+  return {
+    enabled: isEnabled,
+    enableOnFormTags: isEnabled && onInputElements,
+    enableOnContentEditable: isEnabled && onInputElements,
+    preventDefault: isEnabled && (shortcut?.preventDefault ?? false),
+  };
+}
+
 function createKeysFromShortcut(shortcut: Shortcut | undefined) {
   if (!shortcut) {
     return [];