Merge pull request #2505 from generalaction/jan/eng-1589-add-back-and-forward-navigation-to-in-app-browser

feat(browser): add history navigation

Author: arnestrickmann

apps/emdash-desktop/src/renderer/features/browser/browser-pane.tsx

@@ -125,6 +125,16 @@ export const BrowserPane = observer(function BrowserPane({ browserId }: { browse
     [loadUrl]
   );
 
+  const goBack = useCallback(() => {
+    if (!adapter?.canGoBack()) return;
+    adapter.goBack();
+  }, [adapter]);
+
+  const goForward = useCallback(() => {
+    if (!adapter?.canGoForward()) return;
+    adapter.goForward();
+  }, [adapter]);
+
   const reload = useCallback(() => {
     if (!session) return;
     const decision = decideBrowserReload({
@@ -209,6 +219,8 @@ export const BrowserPane = observer(function BrowserPane({ browserId }: { browse
         adapter={adapter}
         autoFocusUrl={showStartPage}
         onNavigate={navigateTo}
+        onGoBack={goBack}
+        onGoForward={goForward}
         onReload={reload}
         onForceReload={forceReload}
         onSetZoomFactor={setZoomFactor}

apps/emdash-desktop/src/renderer/features/browser/browser-toolbar.tsx

@@ -1,4 +1,6 @@
 import {
+  ArrowLeft,
+  ArrowRight,
   Ellipsis,
   Focus,
   Globe,
@@ -9,7 +11,7 @@ import {
   RotateCcw,
   Square,
 } from 'lucide-react';
-import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
 import { rpc } from '@renderer/lib/ipc';
 import { Button } from '@renderer/lib/ui/button';
 import {
@@ -49,6 +51,8 @@ export function BrowserToolbar({
   adapter,
   autoFocusUrl,
   onNavigate,
+  onGoBack,
+  onGoForward,
   onReload,
   onForceReload,
   onSetZoomFactor,
@@ -58,6 +62,8 @@ export function BrowserToolbar({
   adapter: BrowserWebviewAdapter | null;
   autoFocusUrl?: boolean;
   onNavigate?: (url: string) => boolean;
+  onGoBack?: () => void;
+  onGoForward?: () => void;
   onReload?: () => void;
   onForceReload?: () => void;
   onSetZoomFactor?: (factor: number) => void;
@@ -66,8 +72,7 @@ export function BrowserToolbar({
   const [urlText, setUrlText] = useState(browserUrlInputText(session.currentUrl));
   const [urlError, setUrlError] = useState<string | null>(null);
   const [failedFaviconUrl, setFailedFaviconUrl] = useState<string | null>(null);
-  const [screenshotSpin, setScreenshotSpin] = useState(false);
-  const screenshotSpinTimerRef = useRef<number | null>(null);
+  const [screenshotSpin, triggerScreenshotSpin] = useTransientFlag(300);
   const urlInputRef = useRef<HTMLInputElement | null>(null);
   const faviconUrl =
     session.faviconUrl && session.faviconUrl !== failedFaviconUrl ? session.faviconUrl : null;
@@ -124,26 +129,29 @@ export function BrowserToolbar({
   };
 
   const takeScreenshot = () => {
-    setScreenshotSpin(true);
-    if (screenshotSpinTimerRef.current !== null) {
-      window.clearTimeout(screenshotSpinTimerRef.current);
-    }
-    screenshotSpinTimerRef.current = window.setTimeout(() => setScreenshotSpin(false), 300);
+    triggerScreenshotSpin();
     void captureBrowserScreenshot(session);
   };
 
-  useEffect(() => {
-    return () => {
-      if (screenshotSpinTimerRef.current !== null) {
-        window.clearTimeout(screenshotSpinTimerRef.current);
-      }
-    };
-  }, []);
   const canOpenExternal = canOpenBrowserUrlExternally(session.currentUrl);
   const zoomFactor = session.zoomFactor;
 
   return (
     <div className="flex h-10 shrink-0 items-center gap-1 border-b border-border bg-background-secondary-1 px-2">
+      <ToolbarIconButton
+        label="Back"
+        disabled={!adapter || !session.canGoBack}
+        onClick={() => onGoBack?.()}
+      >
+        <ArrowLeft className="size-4" />
+      </ToolbarIconButton>
+      <ToolbarIconButton
+        label="Forward"
+        disabled={!adapter || !session.canGoForward}
+        onClick={() => onGoForward?.()}
+      >
+        <ArrowRight className="size-4" />
+      </ToolbarIconButton>
       <ToolbarIconButton label={session.isLoading ? 'Stop' : 'Reload'} onClick={() => onReload?.()}>
         {session.isLoading ? <Square className="size-3.5" /> : <RefreshCw className="size-4" />}
       </ToolbarIconButton>
@@ -303,6 +311,26 @@ export function BrowserToolbar({
   );
 }
 
+/** Returns a flag that turns on when triggered and resets itself after `durationMs`. */
+function useTransientFlag(durationMs: number): [boolean, () => void] {
+  const [active, setActive] = useState(false);
+  const timerRef = useRef<number | null>(null);
+
+  const trigger = useCallback(() => {
+    setActive(true);
+    if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => setActive(false), durationMs);
+  }, [durationMs]);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  return [active, trigger];
+}
+
 function ToolbarIconButton({
   label,
   disabled,

apps/emdash-desktop/src/renderer/features/tasks/commands.test.ts

@@ -9,6 +9,8 @@ const mocks = vi.hoisted(() => ({
   getTaskGitStore: vi.fn(),
   getTaskStore: vi.fn(),
   getTaskView: vi.fn(),
+  goBack: vi.fn(),
+  goForward: vi.fn(),
   navigate: vi.fn(),
   openExternal: vi.fn(),
   reload: vi.fn(),
@@ -22,6 +24,10 @@ vi.mock('@renderer/features/browser/browser-controls-registry', () => ({
   browserControlsRegistry: {
     get: vi.fn(() => ({
       adapter: {
+        canGoBack: () => true,
+        canGoForward: () => true,
+        goBack: mocks.goBack,
+        goForward: mocks.goForward,
         reload: mocks.reload,
       },
       focusUrl: mocks.focusUrl,
@@ -218,4 +224,43 @@ describe('createTaskCommandProvider', () => {
     expect(mocks.openExternal).toHaveBeenCalledWith('https://example.com/');
     expect(mocks.writeText).toHaveBeenCalledWith('https://example.com/');
   });
+
+  it('navigates browser history through the browser controls registry', () => {
+    const taskView = mocks.getTaskView();
+    const tab = activeBrowserTab();
+    tab.session.canGoBack = true;
+    tab.session.canGoForward = true;
+    taskView.tabManager.resolvedTabs = [tab];
+    mocks.getTaskView.mockReturnValue(taskView);
+    const provider = createTaskCommandProvider('project-1', 'task-1');
+
+    const commands = provider.getCommands();
+    const goBack = commands.find((candidate) => candidate.id === 'task.browserGoBack');
+    const goForward = commands.find((candidate) => candidate.id === 'task.browserGoForward');
+
+    expect(goBack?.enabled).toBe(true);
+    expect(goForward?.enabled).toBe(true);
+
+    goBack?.execute();
+    goForward?.execute();
+
+    expect(mocks.goBack).toHaveBeenCalledWith();
+    expect(mocks.goForward).toHaveBeenCalledWith();
+  });
+
+  it('disables browser history commands when the session has no history', () => {
+    const taskView = mocks.getTaskView();
+    taskView.tabManager.resolvedTabs = [activeBrowserTab()];
+    mocks.getTaskView.mockReturnValue(taskView);
+    const provider = createTaskCommandProvider('project-1', 'task-1');
+
+    const commands = provider.getCommands();
+
+    expect(commands.find((candidate) => candidate.id === 'task.browserGoBack')?.enabled).toBe(
+      false
+    );
+    expect(commands.find((candidate) => candidate.id === 'task.browserGoForward')?.enabled).toBe(
+      false
+    );
+  });
 });

apps/emdash-desktop/src/renderer/features/tasks/commands.ts

@@ -59,6 +59,8 @@ export function createTaskCommandProvider(projectId: string, taskId: string): Co
       const toggleRightSidebarDef = taskDef('task.toggleRightSidebar');
       const newTerminalDef = taskDef('task.newTerminal');
       const openBrowserDef = taskDef('task.openBrowser');
+      const browserGoBackDef = taskDef('task.browserGoBack');
+      const browserGoForwardDef = taskDef('task.browserGoForward');
       const browserReloadDef = taskDef('task.browserReload');
       const browserFocusUrlDef = taskDef('task.browserFocusUrl');
       const browserOpenExternalDef = taskDef('task.browserOpenExternal');
@@ -196,6 +198,30 @@ export function createTaskCommandProvider(projectId: string, taskId: string): Co
             taskView?.setFocusedRegion('main');
           },
         },
+        {
+          id: browserGoBackDef.id,
+          label: browserGoBackDef.label,
+          description: browserGoBackDef.description,
+          group: browserGoBackDef.group,
+          enabled: activeBrowserTab?.kind === 'browser' && activeBrowserTab.session.canGoBack,
+          execute() {
+            if (activeBrowserTab?.kind !== 'browser') return;
+            const adapter = browserControlsRegistry.get(activeBrowserTab.browserId)?.adapter;
+            if (adapter?.canGoBack()) adapter.goBack();
+          },
+        },
+        {
+          id: browserGoForwardDef.id,
+          label: browserGoForwardDef.label,
+          description: browserGoForwardDef.description,
+          group: browserGoForwardDef.group,
+          enabled: activeBrowserTab?.kind === 'browser' && activeBrowserTab.session.canGoForward,
+          execute() {
+            if (activeBrowserTab?.kind !== 'browser') return;
+            const adapter = browserControlsRegistry.get(activeBrowserTab.browserId)?.adapter;
+            if (adapter?.canGoForward()) adapter.goForward();
+          },
+        },
         {
           id: browserReloadDef.id,
           label: browserReloadDef.label,

apps/emdash-desktop/src/shared/commands.ts

@@ -182,6 +182,22 @@ export const TASK_COMMAND_DEFS = defineCommandDefs([
     group: 'Browser',
     iconKey: 'globe',
   },
+  {
+    id: 'task.browserGoBack',
+    label: 'Browser Back',
+    description: 'Go back in the active browser tab',
+    scope: 'task',
+    group: 'Browser',
+    iconKey: 'arrow-left',
+  },
+  {
+    id: 'task.browserGoForward',
+    label: 'Browser Forward',
+    description: 'Go forward in the active browser tab',
+    scope: 'task',
+    group: 'Browser',
+    iconKey: 'arrow-right',
+  },
   {
     id: 'task.browserReload',
     label: 'Reload Browser',