pr review

frontend/src/components/shared/AllToolsNavButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ActionIcon, Anchor } from '@mantine/core';
+import { ActionIcon } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { Tooltip } from './Tooltip';
 import AppsIcon from '@mui/icons-material/AppsRounded';
@@ -54,6 +54,7 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
           onClick={handleNavClick}
           size={'lg'}
           variant="subtle"
+          aria-label={t("quickAccess.allTools", "All Tools")}
           style={{
             backgroundColor: isActive ? 'var(--icon-tools-bg)' : 'var(--icon-inactive-bg)',
             color: isActive ? 'var(--icon-tools-color)' : 'var(--icon-inactive-color)',

frontend/src/components/shared/QuickAccessBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, forwardRef, useEffect } from "react";
-import { ActionIcon, Stack, Divider, Anchor } from "@mantine/core";
+import { ActionIcon, Stack, Divider } from "@mantine/core";
 import { useTranslation } from 'react-i18next';
 import LocalIcon from './LocalIcon';
 import { useRainbowThemeContext } from "./RainbowThemeProvider";
@@ -70,6 +70,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
             onClick={(e: React.MouseEvent) => handleClick(e)}
             size={isActive ? (config.size || 'lg') : 'lg'}
             variant="subtle"
+            aria-label={config.name}
             style={getNavButtonStyle(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView)}
             className={isActive ? 'activeIconScale' : ''}
             data-testid={`${config.id}-button`}

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

@@ -13,7 +13,7 @@
  */
 
 import React, { useEffect, useRef, useState } from 'react';
-import { ActionIcon, Anchor } from '@mantine/core';
+import { ActionIcon } from '@mantine/core';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useToolWorkflow } from '../../../contexts/ToolWorkflowContext';
 import { useSidebarNavigation } from '../../../hooks/useSidebarNavigation';

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

@@ -49,8 +49,8 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect
   );
 
   const handleExternalClick = (e: React.MouseEvent) => {
-    // Check if it's a special click (middle click, ctrl+click, etc.)
+    // Check if it's a special click (ctrl+click, etc.)
-    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
+    if (e.metaKey || e.ctrlKey || e.shiftKey) {
       return; // Let browser handle it via href
     }
 

frontend/src/hooks/useSidebarNavigation.ts

@@ -20,31 +20,27 @@ export function useSidebarNavigation(): {
   const { getToolNavigation: getToolNavProps } = useToolNavigation();
   const { getSelectedTool } = useToolManagement();
 
-  const getHomeNavigation = useCallback((): SidebarNavigationProps => {
+  const defaultNavClick = useCallback((e: React.MouseEvent) => {
-    const href = window.location.origin + '/';
+    if (e.metaKey || e.ctrlKey || e.shiftKey) return;
-    
+    e.preventDefault();
-    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 getHomeNavigation = useCallback((): SidebarNavigationProps => {
-    const tool = getSelectedTool(toolId);
+    const href = '/'; // SSR-safe relative path
-    if (!tool) {
+    return { href, onClick: defaultNavClick };
-      return null;
+  }, [defaultNavClick]);
-    }
 
+  const getToolNavigation = useCallback((toolId: string): SidebarNavigationProps | null => {
+    // Handle special nav sections that aren't tools
+    if (toolId === 'read') return { href: '/read', onClick: defaultNavClick };
+    if (toolId === 'automate') return { href: '/automate', onClick: defaultNavClick };
+
+    const tool = getSelectedTool(toolId);
+    if (!tool) return null;
+    
+    // Delegate to useToolNavigation for true tools
     return getToolNavProps(toolId, tool);
-  }, [getToolNavProps, getSelectedTool]);
+  }, [getToolNavProps, getSelectedTool, defaultNavClick]);
 
   return {
     getHomeNavigation,

frontend/src/hooks/useToolNavigation.ts

@@ -1,7 +1,6 @@
 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 {
@@ -18,19 +17,17 @@ export interface ToolNavigationProps {
 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
+    // Generate SSR-safe relative path
     const path = getToolUrlPath(toolId, tool);
-    const href = `${window.location.origin}${path}`;
+    const href = path; // Relative path, no window.location needed
 
     // Click handler that maintains SPA behavior
     const onClick = (e: React.MouseEvent) => {
-      // Check if it's a special click (middle click, ctrl+click, etc.)
+      // Check if it's a special click (ctrl+click, etc.)
-      // These should use the default browser behavior to open in new tab
+      if (e.metaKey || e.ctrlKey || e.shiftKey) {
-      if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
         return; // Let browser handle it via href
       }