Urls for tools for scrapers and open in new tab support

frontend/src/components/shared/AllToolsNavButton.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { ActionIcon } from '@mantine/core';
+import { ActionIcon, Anchor } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { Tooltip } from './Tooltip';
 import AppsIcon from '@mui/icons-material/AppsRounded';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
+import { useSidebarNavigation } from '../../hooks/useSidebarNavigation';
 
 interface AllToolsNavButtonProps {
   activeButton: string;
@@ -13,6 +14,7 @@ interface AllToolsNavButtonProps {
 const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, setActiveButton }) => {
   const { t } = useTranslation();
   const { handleReaderToggle, handleBackToTools, selectedToolKey, leftPanelView } = useToolWorkflow();
+  const { getHomeNavigation } = useSidebarNavigation();
 
   const handleClick = () => {
     setActiveButton('tools');
@@ -24,6 +26,19 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
   // Do not highlight All Tools when a specific tool is open (indicator is shown)
   const isActive = activeButton === 'tools' && !selectedToolKey && leftPanelView === 'toolPicker';
 
+  const navProps = getHomeNavigation();
+
+  const handleNavClick = (e: React.MouseEvent) => {
+    // Check if it's a special click (middle click, ctrl+click, etc.)
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
+      return; // Let browser handle it via href
+    }
+
+    // For regular clicks, prevent default and use SPA navigation
+    e.preventDefault();
+    handleClick();
+  };
+
   const iconNode = (
     <span className="iconContainer">
       <AppsIcon sx={{ fontSize: '2rem' }} />
@@ -31,27 +46,31 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
   );
 
   return (
-    
     <Tooltip content={t("quickAccess.allTools", "All Tools")} position="right" arrow containerStyle={{ marginTop: "-1rem" }} maxWidth={200}>
-      <div className="flex flex-col items-center gap-1 mt-4 mb-2">
+      <Anchor
-        <ActionIcon
+        href={navProps.href}
-          size={'lg'}
+        onClick={handleNavClick}
-          variant="subtle"
+        style={{ textDecoration: 'none', color: 'inherit' }}
-          onClick={handleClick}
+      >
-          style={{
+        <div className="flex flex-col items-center gap-1 mt-4 mb-2">
-            backgroundColor: isActive ? 'var(--icon-tools-bg)' : 'var(--icon-inactive-bg)',
+          <ActionIcon
-            color: isActive ? 'var(--icon-tools-color)' : 'var(--icon-inactive-color)',
+            size={'lg'}
-            border: 'none',
+            variant="subtle"
-            borderRadius: '8px',
+            style={{
-          }}
+              backgroundColor: isActive ? 'var(--icon-tools-bg)' : 'var(--icon-inactive-bg)',
-          className={isActive ? 'activeIconScale' : ''}
+              color: isActive ? 'var(--icon-tools-color)' : 'var(--icon-inactive-color)',
-        >
+              border: 'none',
-          {iconNode}
+              borderRadius: '8px',
-        </ActionIcon>
+            }}
-        <span className={`all-tools-text ${isActive ? 'active' : 'inactive'}`}>
+            className={isActive ? 'activeIconScale' : ''}
-          {t("quickAccess.allTools", "All Tools")}
+          >
-        </span>
+            {iconNode}
-      </div>
+          </ActionIcon>
+          <span className={`all-tools-text ${isActive ? 'active' : 'inactive'}`}>
+            {t("quickAccess.allTools", "All Tools")}
+          </span>
+        </div>
+      </Anchor>
     </Tooltip>
   );
 };

frontend/src/components/shared/QuickAccessBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, forwardRef, useEffect } from "react";
-import { ActionIcon, Stack, Divider } from "@mantine/core";
+import { ActionIcon, Stack, Divider, Anchor } from "@mantine/core";
 import { useTranslation } from 'react-i18next';
 import LocalIcon from './LocalIcon';
 import { useRainbowThemeContext } from "./RainbowThemeProvider";
@@ -7,6 +7,7 @@ import AppConfigModal from './AppConfigModal';
 import { useIsOverflowing } from '../../hooks/useIsOverflowing';
 import { useFilesModalContext } from '../../contexts/FilesModalContext';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
+import { useSidebarNavigation } from '../../hooks/useSidebarNavigation';
 import { ButtonConfig } from '../../types/sidebar';
 import './quickAccessBar/QuickAccessBar.css';
 import AllToolsNavButton from './AllToolsNavButton';
@@ -23,6 +24,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
   const { isRainbowMode } = useRainbowThemeContext();
   const { openFilesModal, isFilesModalOpen } = useFilesModalContext();
   const { handleReaderToggle, handleBackToTools, handleToolSelect, selectedToolKey, leftPanelView, toolRegistry, readerMode, resetTool } = useToolWorkflow();
+  const { getToolNavigation } = useSidebarNavigation();
   const [configModalOpen, setConfigModalOpen] = useState(false);
   const [activeButton, setActiveButton] = useState<string>('tools');
   const scrollableRef = useRef<HTMLDivElement>(null);
@@ -37,6 +39,64 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
     openFilesModal();
   };
 
+  // Helper function to render navigation buttons with URL support
+  const renderNavButton = (config: ButtonConfig, index: number) => {
+    const isActive = isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView);
+    
+    // Check if this button has URL navigation support
+    const navProps = config.type === 'navigation' && (config.id === 'read' || config.id === 'automate') 
+      ? getToolNavigation(config.id) 
+      : null;
+
+    const handleClick = (e?: React.MouseEvent) => {
+      if (navProps && e) {
+        // Check if it's a special click (middle click, ctrl+click, etc.)
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
+          return; // Let browser handle it via href
+        }
+        // For regular clicks, prevent default and use SPA navigation
+        e.preventDefault();
+      }
+      config.onClick();
+    };
+
+    const buttonElement = (
+      <div className="flex flex-col items-center gap-1" style={{ marginTop: index === 0 ? '0.5rem' : "0rem" }}>
+        <ActionIcon
+          size={isActive ? (config.size || 'lg') : 'lg'}
+          variant="subtle"
+          onClick={() => handleClick()}
+          style={getNavButtonStyle(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView)}
+          className={isActive ? 'activeIconScale' : ''}
+          data-testid={`${config.id}-button`}
+        >
+          <span className="iconContainer">
+            {config.icon}
+          </span>
+        </ActionIcon>
+        <span className={`button-text ${isActive ? 'active' : 'inactive'}`}>
+          {config.name}
+        </span>
+      </div>
+    );
+
+    // Wrap with Anchor if it has URL navigation
+    if (navProps) {
+      return (
+        <Anchor
+          key={config.id}
+          href={navProps.href}
+          onClick={handleClick}
+          style={{ textDecoration: 'none', color: 'inherit' }}
+        >
+          {buttonElement}
+        </Anchor>
+      );
+    }
+
+    return <div key={config.id}>{buttonElement}</div>;
+  };
+
 
   const buttonConfigs: ButtonConfig[] = [
     {
@@ -153,27 +213,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
           <Stack gap="lg" align="center">
             {buttonConfigs.slice(0, -1).map((config, index) => (
               <React.Fragment key={config.id}>
-
+                {renderNavButton(config, index)}
-                  <div className="flex flex-col items-center gap-1" style={{ marginTop: index === 0 ? '0.5rem' : "0rem" }}>
-                    <ActionIcon
-                      size={isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView) ? (config.size || 'lg') : 'lg'}
-                      variant="subtle"
-                       onClick={() => {
-                         config.onClick();
-                       }}
-                      style={getNavButtonStyle(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView)}
-                      className={isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView) ? 'activeIconScale' : ''}
-                      data-testid={`${config.id}-button`}
-                    >
-                      <span className="iconContainer">
-                        {config.icon}
-                      </span>
-                    </ActionIcon>
-                    <span className={`button-text ${isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView) ? 'active' : 'inactive'}`}>
-                      {config.name}
-                    </span>
-                  </div>
-
 
                 {/* Add divider after Automate button (index 1) and Files button (index 2) */}
                 {index === 1 && (

frontend/src/components/shared/quickAccessBar/ActiveToolButton.tsx

@@ -13,9 +13,10 @@
  */
 
 import React, { useEffect, useRef, useState } from 'react';
-import { ActionIcon } from '@mantine/core';
+import { ActionIcon, Anchor } from '@mantine/core';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useToolWorkflow } from '../../../contexts/ToolWorkflowContext';
+import { useSidebarNavigation } from '../../../hooks/useSidebarNavigation';
 import FitText from '../FitText';
 import { Tooltip } from '../Tooltip';
 
@@ -28,6 +29,7 @@ const NAV_IDS = ['read', 'sign', 'automate'];
 
 const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ activeButton, setActiveButton }) => {
   const { selectedTool, selectedToolKey, leftPanelView, handleBackToTools } = useToolWorkflow();
+  const { getHomeNavigation } = useSidebarNavigation();
 
   // Determine if the indicator should be visible (do not require selectedTool to be resolved yet)
   const indicatorShouldShow = Boolean(
@@ -141,32 +143,44 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ activeButton, setAc
           <div className="current-tool-content">
             <div className="flex flex-col items-center gap-1">
               <Tooltip content={isBackHover ? 'Back to all tools' : indicatorTool.name} position="right" arrow maxWidth={140}>
-                <ActionIcon
+                <Anchor
-                  size={'xl'}
+                  href={getHomeNavigation().href}
-                  variant="subtle"
+                  onClick={(e: React.MouseEvent) => {
-                  onMouseEnter={() => setIsBackHover(true)}
+                    // Check if it's a special click (middle click, ctrl+click, etc.)
-                  onMouseLeave={() => setIsBackHover(false)}
+                    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
-                  onClick={() => {
+                      return; // Let browser handle it via href
+                    }
+
+                    // For regular clicks, prevent default and use SPA navigation
+                    e.preventDefault();
                     setActiveButton('tools');
                     handleBackToTools();
                   }}
-                  aria-label={isBackHover ? 'Back to all tools' : indicatorTool.name}
+                  style={{ textDecoration: 'none', color: 'inherit' }}
-                  style={{
-                    backgroundColor: isBackHover ? 'var(--color-gray-300)' : 'var(--icon-tools-bg)',
-                    color: isBackHover ? '#fff' : 'var(--icon-tools-color)',
-                    border: 'none',
-                    borderRadius: '8px',
-                    cursor: 'pointer'
-                  }}
                 >
-                  <span className="iconContainer">
+                  <ActionIcon
-                    {isBackHover ? (
+                    size={'xl'}
-                      <ArrowBackRoundedIcon sx={{ fontSize: '1.5rem' }} />
+                    variant="subtle"
-                    ) : (
+                    onMouseEnter={() => setIsBackHover(true)}
-                      indicatorTool.icon
+                    onMouseLeave={() => setIsBackHover(false)}
-                    )}
+                    aria-label={isBackHover ? 'Back to all tools' : indicatorTool.name}
-                  </span>
+                    style={{
-                </ActionIcon>
+                      backgroundColor: isBackHover ? 'var(--color-gray-300)' : 'var(--icon-tools-bg)',
+                      color: isBackHover ? '#fff' : 'var(--icon-tools-color)',
+                      border: 'none',
+                      borderRadius: '8px',
+                      cursor: 'pointer'
+                    }}
+                  >
+                    <span className="iconContainer">
+                      {isBackHover ? (
+                        <ArrowBackRoundedIcon sx={{ fontSize: '1.5rem' }} />
+                      ) : (
+                        indicatorTool.icon
+                      )}
+                    </span>
+                  </ActionIcon>
+                </Anchor>
               </Tooltip>
               <FitText
                 as="span"

frontend/src/components/tools/shared/SuggestedToolsSection.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Stack, Text, Divider, Card, Group } from '@mantine/core';
+import { Stack, Text, Divider, Card, Group, Anchor } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useSuggestedTools } from '../../../hooks/useSuggestedTools';
 
@@ -21,20 +21,25 @@ export function SuggestedToolsSection(): React.ReactElement {
         {suggestedTools.map((tool) => {
           const IconComponent = tool.icon;
           return (
-            <Card
+            <Anchor
               key={tool.id}
-              p="sm"
+              href={tool.href}
-              withBorder
+              onClick={tool.onClick}
-              style={{ cursor: 'pointer' }}
+              style={{ textDecoration: 'none', color: 'inherit' }}
-              onClick={tool.navigate}
             >
-              <Group gap="xs">
+              <Card
-                <IconComponent fontSize="small" />
+                p="sm"
-                <Text size="sm" fw={500}>
+                withBorder
-                  {tool.title}
+                style={{ cursor: 'pointer' }}
-                </Text>
+              >
-              </Group>
+                <Group gap="xs">
-            </Card>
+                  <IconComponent fontSize="small" />
+                  <Text size="sm" fw={500}>
+                    {tool.title}
+                  </Text>
+                </Group>
+              </Card>
+            </Anchor>
           );
         })}
       </Stack>

frontend/src/components/tools/toolPicker/ToolButton.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { Button } from "@mantine/core";
+import { Button, Anchor } from "@mantine/core";
 import { Tooltip } from "../../shared/Tooltip";
 import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
+import { useToolNavigation } from "../../../hooks/useToolNavigation";
 import FitText from "../../shared/FitText";
 
 interface ToolButtonProps {
@@ -14,6 +15,8 @@ interface ToolButtonProps {
 
 const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect }) => {
   const isUnavailable = !tool.component && !tool.link;
+  const { getToolNavigation } = useToolNavigation();
+
   const handleClick = (id: string) => {
     if (isUnavailable) return;
     if (tool.link) {
@@ -25,32 +28,65 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect
     onSelect(id);
   };
 
+  // Get navigation props for URL support
+  const navProps = !isUnavailable && !tool.link ? getToolNavigation(id, tool) : null;
+
   const tooltipContent = isUnavailable
     ? (<span><strong>Coming soon:</strong> {tool.description}</span>)
     : tool.description;
 
-  return (
+  const buttonContent = (
-    <Tooltip content={tooltipContent} position="right" arrow={true} delay={500}>
+    <>
+      <div className="tool-button-icon" style={{ color: "var(--tools-text-and-icon-color)", marginRight: "0.5rem", transform: "scale(0.8)", transformOrigin: "center", opacity: isUnavailable ? 0.25 : 1 }}>{tool.icon}</div>
+      <FitText
+        text={tool.name}
+        lines={1}
+        minimumFontScale={0.8}
+        as="span"
+        style={{ display: 'inline-block', maxWidth: '100%', opacity: isUnavailable ? 0.25 : 1 }}
+      />
+    </>
+  );
+
+  const buttonElement = navProps ? (
+    // For tools with URLs, wrap in anchor for proper link behavior
+    <Anchor
+      href={navProps.href}
+      onClick={navProps.onClick}
+      style={{ textDecoration: 'none', color: 'inherit' }}
+    >
       <Button
         variant={isSelected ? "filled" : "subtle"}
-        onClick={()=> handleClick(id)}
         size="sm"
         radius="md"
         fullWidth
         justify="flex-start"
         className="tool-button"
-        aria-disabled={isUnavailable}
+        styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)" } }}
-        styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", cursor: isUnavailable ? 'not-allowed' : undefined } }}
       >
-        <div className="tool-button-icon" style={{ color: "var(--tools-text-and-icon-color)", marginRight: "0.5rem", transform: "scale(0.8)", transformOrigin: "center", opacity: isUnavailable ? 0.25 : 1 }}>{tool.icon}</div>
+        {buttonContent}
-        <FitText
-          text={tool.name}
-          lines={1}
-          minimumFontScale={0.8}
-          as="span"
-          style={{ display: 'inline-block', maxWidth: '100%', opacity: isUnavailable ? 0.25 : 1 }}
-        />
       </Button>
+    </Anchor>
+  ) : (
+    // For external links and unavailable tools, use regular button
+    <Button
+      variant={isSelected ? "filled" : "subtle"}
+      onClick={() => handleClick(id)}
+      size="sm"
+      radius="md"
+      fullWidth
+      justify="flex-start"
+      className="tool-button"
+      aria-disabled={isUnavailable}
+      styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", cursor: isUnavailable ? 'not-allowed' : undefined } }}
+    >
+      {buttonContent}
+    </Button>
+  );
+
+  return (
+    <Tooltip content={tooltipContent} position="right" arrow={true} delay={500}>
+      {buttonElement}
     </Tooltip>
   );
 };

frontend/src/data/useTranslatedToolRegistry.tsx

@@ -355,6 +355,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.PAGE_FORMATTING,
         maxFiles: -1,
+        urlPath: '/pdf-to-single-page',
         endpoints: ["pdf-to-single-page"],
         operationConfig: singleLargePageOperationConfig,
       },
@@ -681,6 +682,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
         subcategoryId: SubcategoryId.GENERAL,
         maxFiles: -1,
+        urlPath: '/ocr-pdf',
         operationConfig: ocrOperationConfig,
         settingsComponent: OCRSettings,
       },

frontend/src/hooks/useSidebarNavigation.ts

@@ -0,0 +1,53 @@
+import { useCallback } from 'react';
+import { useToolNavigation } from './useToolNavigation';
+import { useToolManagement } from './useToolManagement';
+
+export interface SidebarNavigationProps {
+  /** Full URL for the navigation (for href attribute) */
+  href: string;
+  /** Click handler that maintains SPA behavior */
+  onClick: (e: React.MouseEvent) => void;
+}
+
+/**
+ * Hook that provides URL and navigation handlers for sidebar navigation buttons
+ * Supports special routes like home ('/') and specific tool routes
+ */
+export function useSidebarNavigation(): {
+  getHomeNavigation: () => SidebarNavigationProps;
+  getToolNavigation: (toolId: string) => SidebarNavigationProps | null;
+} {
+  const { getToolNavigation: getToolNavProps } = useToolNavigation();
+  const { getSelectedTool } = useToolManagement();
+
+  const getHomeNavigation = useCallback((): SidebarNavigationProps => {
+    const href = window.location.origin + '/';
+    
+    const onClick = (e: React.MouseEvent) => {
+      // Check if it's a special click (middle click, ctrl+click, etc.)
+      if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
+        return; // Let browser handle it via href
+      }
+
+      // For regular clicks, prevent default and handle via SPA navigation
+      e.preventDefault();
+      // The existing click handler will be called after this
+    };
+
+    return { href, onClick };
+  }, []);
+
+  const getToolNavigation = useCallback((toolId: string): SidebarNavigationProps | null => {
+    const tool = getSelectedTool(toolId);
+    if (!tool) {
+      return null;
+    }
+
+    return getToolNavProps(toolId, tool);
+  }, [getToolNavProps, getSelectedTool]);
+
+  return {
+    getHomeNavigation,
+    getToolNavigation
+  };
+}

frontend/src/hooks/useSuggestedTools.ts

@@ -1,5 +1,7 @@
 import { useMemo } from 'react';
-import { useNavigationActions, useNavigationState } from '../contexts/NavigationContext';
+import { useNavigationState } from '../contexts/NavigationContext';
+import { useToolNavigation } from './useToolNavigation';
+import { useToolManagement } from './useToolManagement';
 import { ToolId } from '../types/toolId';
 
 // Material UI Icons
@@ -13,10 +15,11 @@ export interface SuggestedTool {
   id: ToolId;
   title: string;
   icon: React.ComponentType<any>;
-  navigate: () => void;
+  href: string;
+  onClick: (e: React.MouseEvent) => void;
 }
 
-const ALL_SUGGESTED_TOOLS: Omit<SuggestedTool, 'navigate'>[] = [
+const ALL_SUGGESTED_TOOLS: Omit<SuggestedTool, 'href' | 'onClick'>[] = [
   {
     id: 'compress',
     title: 'Compress',
@@ -45,17 +48,31 @@ const ALL_SUGGESTED_TOOLS: Omit<SuggestedTool, 'navigate'>[] = [
 ];
 
 export function useSuggestedTools(): SuggestedTool[] {
-  const { actions } = useNavigationActions();
   const { selectedTool } = useNavigationState();
+  const { getToolNavigation } = useToolNavigation();
+  const { getSelectedTool } = useToolManagement();
 
   return useMemo(() => {
     // Filter out the current tool
     const filteredTools = ALL_SUGGESTED_TOOLS.filter(tool => tool.id !== selectedTool);
 
-    // Add navigation function to each tool
+    // Add navigation props to each tool
-    return filteredTools.map(tool => ({
+    return filteredTools.map(tool => {
-      ...tool,
+      const toolRegistryEntry = getSelectedTool(tool.id);
-      navigate: () => actions.setSelectedTool(tool.id)
+      if (!toolRegistryEntry) {
-    }));
+        // Fallback for tools not in registry
-  }, [selectedTool, actions]);
+        return {
+          ...tool,
+          href: `/${tool.id}`,
+          onClick: (e: React.MouseEvent) => { e.preventDefault(); }
+        };
+      }
+      
+      const navProps = getToolNavigation(tool.id, toolRegistryEntry);
+      return {
+        ...tool,
+        ...navProps
+      };
+    });
+  }, [selectedTool, getToolNavigation, getSelectedTool]);
 }

frontend/src/hooks/useToolNavigation.ts

@@ -0,0 +1,52 @@
+import { useCallback } from 'react';
+import { ToolId } from '../types/toolId';
+import { ToolRegistryEntry, getToolUrlPath } from '../data/toolsTaxonomy';
+import { useNavigationActions } from '../contexts/NavigationContext';
+import { useToolWorkflow } from '../contexts/ToolWorkflowContext';
+
+export interface ToolNavigationProps {
+  /** Full URL for the tool (for href attribute) */
+  href: string;
+  /** Click handler that maintains SPA behavior */
+  onClick: (e: React.MouseEvent) => void;
+}
+
+/**
+ * Hook that provides URL and navigation handlers for tools
+ * Enables right-click "Open in New Tab" while maintaining SPA behavior for regular clicks
+ */
+export function useToolNavigation(): {
+  getToolNavigation: (toolId: string, tool: ToolRegistryEntry) => ToolNavigationProps;
+} {
+  const { actions } = useNavigationActions();
+  const { handleToolSelect } = useToolWorkflow();
+
+  const getToolNavigation = useCallback((toolId: string, tool: ToolRegistryEntry): ToolNavigationProps => {
+    // Generate the full URL for href attribute
+    const path = getToolUrlPath(toolId, tool);
+    const href = `${window.location.origin}${path}`;
+
+    // Click handler that maintains SPA behavior
+    const onClick = (e: React.MouseEvent) => {
+      // Check if it's a special click (middle click, ctrl+click, etc.)
+      // These should use the default browser behavior to open in new tab
+      if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
+        return; // Let browser handle it via href
+      }
+
+      // Handle external links normally
+      if (tool.link) {
+        window.open(tool.link, '_blank', 'noopener,noreferrer');
+        return;
+      }
+
+      // For regular clicks, prevent default and use SPA navigation
+      e.preventDefault();
+      handleToolSelect(toolId);
+    };
+
+    return { href, onClick };
+  }, [actions, handleToolSelect]);
+
+  return { getToolNavigation };
+}