feat(ui): open file in editor with e shortcut (#310)

Co-authored-by: Ben Vinegar <ben@benv.ca>

Author: duarteocarmo

CHANGELOG.md

@@ -6,6 +6,7 @@ All notable user-visible changes to Hunk are documented in this file.
 
 ### Added
 
+- Added an `e` shortcut to open the selected diff file in `$EDITOR`.
 - Added `g` and `G` keyboard aliases for jump-to-top and jump-to-bottom review navigation.
 
 ### Changed

src/ui/App.tsx

@@ -24,6 +24,7 @@ import { useMenuController } from "./hooks/useMenuController";
 import { useReviewController } from "./hooks/useReviewController";
 import { buildAppMenus } from "./lib/appMenus";
 import { fileRowId } from "./lib/ids";
+import { openSelectedFileInEditor } from "./lib/openInEditor";
 import { resolveResponsiveLayout } from "./lib/responsive";
 import { resizeSidebarWidth } from "./lib/sidebar";
 import { resolveTheme, THEMES } from "./themes";
@@ -121,6 +122,8 @@ export function App({
   const [sidebarWidth, setSidebarWidth] = useState(34);
   const [resizeDragOriginX, setResizeDragOriginX] = useState<number | null>(null);
   const [resizeStartWidth, setResizeStartWidth] = useState<number | null>(null);
+  const [sessionNoticeText, setSessionNoticeText] = useState<string | null>(null);
+  const sessionNoticeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const activeTheme = resolveTheme(themeId, detectedThemeMode ?? null);
   const review = useReviewController({ files: bootstrap.changeset.files });
@@ -144,6 +147,26 @@ export function App({
     setShowAgentNotes(true);
   }, []);
 
+  const showSessionNotice = useCallback((message: string) => {
+    setSessionNoticeText(message);
+    if (sessionNoticeTimeoutRef.current) {
+      clearTimeout(sessionNoticeTimeoutRef.current);
+    }
+
+    sessionNoticeTimeoutRef.current = setTimeout(() => {
+      setSessionNoticeText((current) => (current === message ? null : current));
+      sessionNoticeTimeoutRef.current = null;
+    }, 4000);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (sessionNoticeTimeoutRef.current) {
+        clearTimeout(sessionNoticeTimeoutRef.current);
+      }
+    };
+  }, []);
+
   useHunkSessionBridge({
     addLiveComment: review.addLiveComment,
     addLiveCommentBatch: review.addLiveCommentBatch,
@@ -384,6 +407,30 @@ export function App({
     });
   }, [refreshCurrentInput]);
 
+  const triggerEditSelectedFile = useCallback(() => {
+    const message = openSelectedFileInEditor({
+      file: selectedFile,
+      renderer,
+      selectedHunk: review.selectedHunk,
+    });
+
+    if (message) {
+      showSessionNotice(message);
+      return;
+    }
+
+    if (canRefreshCurrentInput) {
+      triggerRefreshCurrentInput();
+    }
+  }, [
+    canRefreshCurrentInput,
+    renderer,
+    review.selectedHunk,
+    selectedFile,
+    showSessionNotice,
+    triggerRefreshCurrentInput,
+  ]);
+
   useEffect(() => {
     if (!watchEnabled) {
       return;
@@ -498,6 +545,7 @@ export function App({
         toggleLineNumbers,
         toggleLineWrap,
         toggleSidebar,
+        triggerEditSelectedFile,
         wrapLines,
       }),
     [
@@ -523,6 +571,7 @@ export function App({
       toggleLineNumbers,
       toggleLineWrap,
       toggleSidebar,
+      triggerEditSelectedFile,
       wrapLines,
     ],
   );
@@ -571,6 +620,7 @@ export function App({
     toggleLineNumbers,
     toggleLineWrap,
     toggleSidebar,
+    triggerEditSelectedFile,
     triggerRefreshCurrentInput,
   });
 
@@ -738,11 +788,15 @@ export function App({
         />
       </box>
 
-      {!pagerMode && (focusArea === "filter" || Boolean(review.filter) || Boolean(noticeText)) ? (
+      {!pagerMode &&
+      (focusArea === "filter" ||
+        Boolean(review.filter) ||
+        Boolean(sessionNoticeText) ||
+        Boolean(noticeText)) ? (
         <StatusBar
           filter={review.filter}
           filterFocused={focusArea === "filter"}
-          noticeText={noticeText ?? undefined}
+          noticeText={sessionNoticeText ?? noticeText ?? undefined}
           terminalWidth={terminal.width}
           theme={activeTheme}
           onCloseMenu={closeMenu}

src/ui/components/chrome/HelpDialog.tsx

@@ -47,6 +47,7 @@ export function HelpDialog({
         ["s / t", "sidebar / theme"],
         ["a", "toggle AI notes"],
         ["l / w / m", "lines / wrap / metadata"],
+        ["e", "open file in $EDITOR"],
       ],
     },
     {

src/ui/components/ui-components.test.tsx

@@ -1586,13 +1586,13 @@ describe("UI components", () => {
     const frame = await captureFrame(
       <HelpDialog
         canRefresh={true}
-        terminalHeight={36}
+        terminalHeight={38}
         terminalWidth={76}
         theme={theme}
         onClose={() => {}}
       />,
       76,
-      36,
+      38,
     );
 
     const expectedRows = [
@@ -1605,6 +1605,7 @@ describe("UI components", () => {
       "Shift+Space     page up (alt)",
       "d / u           half page down / up",
       "[ / ]           previous / next hunk",
+      ", / .           previous / next file",
       "{ / }           previous / next comment",
       "← / →           scroll code left / right (Shift = faster)",
       "Home / End      jump to top / bottom",
@@ -1617,6 +1618,7 @@ describe("UI components", () => {
       "s / t           sidebar / theme",
       "a               toggle AI notes",
       "l / w / m       lines / wrap / metadata",
+      "e               open file in $EDITOR",
       "Review",
       "/               focus file filter",
       "Tab             toggle files/filter focus",

src/ui/hooks/useAppKeyboardShortcuts.ts

@@ -68,6 +68,7 @@ export interface UseAppKeyboardShortcutsOptions {
   toggleLineNumbers: () => void;
   toggleLineWrap: () => void;
   toggleSidebar: () => void;
+  triggerEditSelectedFile: () => void;
   triggerRefreshCurrentInput: () => void;
 }
 
@@ -100,6 +101,7 @@ export function useAppKeyboardShortcuts({
   toggleLineNumbers,
   toggleLineWrap,
   toggleSidebar,
+  triggerEditSelectedFile,
   triggerRefreshCurrentInput,
 }: UseAppKeyboardShortcutsOptions) {
   const activeMenuIdRef = useRef(activeMenuId);
@@ -423,6 +425,11 @@ export function useAppKeyboardShortcuts({
       return;
     }
 
+    if (key.name === "e" || key.sequence === "e") {
+      runAndCloseMenu(triggerEditSelectedFile);
+      return;
+    }
+
     if (key.name === "[") {
       runAndCloseMenu(() => moveToHunk(-1));
       return;

src/ui/lib/appMenus.ts

@@ -26,6 +26,7 @@ export interface BuildAppMenusOptions {
   toggleLineNumbers: () => void;
   toggleLineWrap: () => void;
   toggleSidebar: () => void;
+  triggerEditSelectedFile: () => void;
   wrapLines: boolean;
 }
 
@@ -54,6 +55,7 @@ export function buildAppMenus({
   toggleLineNumbers,
   toggleLineWrap,
   toggleSidebar,
+  triggerEditSelectedFile,
   wrapLines,
 }: BuildAppMenusOptions): Record<MenuId, MenuEntry[]> {
   const themeMenuEntries: MenuEntry[] = THEMES.map((theme) => ({
@@ -76,6 +78,12 @@ export function buildAppMenus({
       hint: "/",
       action: focusFilter,
     },
+    {
+      kind: "item",
+      label: "Open file in editor",
+      hint: "e",
+      action: triggerEditSelectedFile,
+    },
   ];
 
   if (canRefreshCurrentInput) {

src/ui/lib/openInEditor.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, test } from "bun:test";
+import { buildEditorCommand, shouldSuspendForEditor } from "./openInEditor";
+
+describe("open in editor helpers", () => {
+  test("builds vi-style editor args without shell quoting", () => {
+    expect(
+      buildEditorCommand({
+        editor: "nvim",
+        filePath: "/tmp/project/file with spaces's.ts",
+        line: 12,
+      }),
+    ).toEqual({
+      command: "nvim",
+      args: ["+12", "/tmp/project/file with spaces's.ts"],
+    });
+  });
+
+  test("preserves editor flags before appending the target file", () => {
+    expect(
+      buildEditorCommand({
+        editor: "code --reuse-window",
+        filePath: "/tmp/project/example.ts",
+        line: 4,
+      }),
+    ).toEqual({
+      command: "code",
+      args: ["--reuse-window", "--goto", "/tmp/project/example.ts:4"],
+    });
+  });
+
+  test("handles quoted editor commands and Windows executable paths", () => {
+    expect(
+      buildEditorCommand({
+        editor: '"C:\\Program Files\\Microsoft VS Code\\bin\\code.cmd" --wait',
+        filePath: "C:\\Users\\Duarte\\repo\\file with spaces.ts",
+        line: 7,
+      }),
+    ).toEqual({
+      command: "C:\\Program Files\\Microsoft VS Code\\bin\\code.cmd",
+      args: ["--wait", "--goto", "C:\\Users\\Duarte\\repo\\file with spaces.ts:7"],
+    });
+  });
+
+  test("defaults unknown editors to opening the file path only", () => {
+    expect(
+      buildEditorCommand({
+        editor: "zed --new-window",
+        filePath: "/tmp/project/example.ts",
+        line: 4,
+      }),
+    ).toEqual({
+      command: "zed",
+      args: ["--new-window", "/tmp/project/example.ts"],
+    });
+  });
+
+  test("does not suspend for code-style GUI editors", () => {
+    expect(shouldSuspendForEditor("code --reuse-window")).toBe(false);
+    expect(shouldSuspendForEditor('"C:\\Program Files\\Cursor\\cursor.exe"')).toBe(false);
+    expect(shouldSuspendForEditor("nvim")).toBe(true);
+  });
+});