Merge branch 'V2' of https://github.com/Stirling-Tools/Stirling-PDF into feature/v2/selected-pageeditor

frontend/src/App.tsx

@@ -40,9 +40,9 @@ const LoadingFallback = () => (
 export default function App() {
   return (
     <Suspense fallback={<LoadingFallback />}>
-      <RainbowThemeProvider>
-        <ErrorBoundary>
-          <PreferencesProvider>
+      <PreferencesProvider>
+        <RainbowThemeProvider>
+          <ErrorBoundary>
             <FileContextProvider enableUrlSync={true} enablePersistence={true}>
               <NavigationProvider>
                 <FilesModalProvider>
@@ -62,9 +62,9 @@ export default function App() {
                 </FilesModalProvider>
               </NavigationProvider>
             </FileContextProvider>
-          </PreferencesProvider>
-        </ErrorBoundary>
-      </RainbowThemeProvider>
+          </ErrorBoundary>
+        </RainbowThemeProvider>
+      </PreferencesProvider>
     </Suspense>
   );
 }

frontend/src/components/FileManager.tsx

@@ -9,6 +9,7 @@ import MobileLayout from './fileManager/MobileLayout';
 import DesktopLayout from './fileManager/DesktopLayout';
 import DragOverlay from './fileManager/DragOverlay';
 import { FileManagerProvider } from '../contexts/FileManagerContext';
+import { Z_INDEX_FILE_MANAGER_MODAL } from '../styles/zIndex';
 import { isGoogleDriveConfigured } from '../services/googleDrivePickerService';
 import { loadScript } from '../utils/scriptLoader';
 
@@ -87,6 +88,7 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
   }, []);
 
   // Preload Google Drive scripts if configured
+
   useEffect(() => {
     if (isGoogleDriveConfigured()) {
       // Load scripts in parallel without blocking
@@ -125,6 +127,7 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
       radius="md"
       className="overflow-hidden p-0"
       withCloseButton={false}
+      zIndex={Z_INDEX_FILE_MANAGER_MODAL}
       styles={{
         content: {
           position: 'relative',

frontend/src/components/fileEditor/FileEditor.module.css

@@ -9,7 +9,7 @@
   transition: box-shadow 0.18s ease, outline-color 0.18s ease, transform 0.18s ease;
   max-width: 100%;
   max-height: 100%;
-  overflow: hidden;
+  overflow: visible;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }

frontend/src/components/fileEditor/FileEditor.tsx

@@ -1,19 +1,19 @@
-import React, { useState, useCallback, useRef, useMemo } from 'react';
+import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
 import {
-  Text, Center, Box, LoadingOverlay, Stack, Group
+  Text, Center, Box, LoadingOverlay, Stack
 } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
-import { useFileSelection, useFileState, useFileManagement, useFileActions } from '../../contexts/FileContext';
+import { useFileSelection, useFileState, useFileManagement, useFileActions, useFileContext } from '../../contexts/FileContext';
 import { useNavigationActions } from '../../contexts/NavigationContext';
 import { zipFileService } from '../../services/zipFileService';
 import { detectFileExtension } from '../../utils/fileUtils';
 import FileEditorThumbnail from './FileEditorThumbnail';
 import AddFileCard from './AddFileCard';
 import FilePickerModal from '../shared/FilePickerModal';
-import SkeletonLoader from '../shared/SkeletonLoader';
 import { FileId, StirlingFile } from '../../types/fileContext';
 import { alert } from '../toast';
 import { downloadBlob } from '../../utils/downloadUtils';
+import { useFileEditorRightRailButtons } from './fileEditorRightRailButtons';
 
 
 interface FileEditorProps {
@@ -37,11 +37,15 @@ const FileEditor = ({
   // Use optimized FileContext hooks
   const { state, selectors } = useFileState();
   const { addFiles, removeFiles, reorderFiles } = useFileManagement();
-  const { actions } = useFileActions();
+  const { actions: fileActions } = useFileActions();
+  const { actions: fileContextActions } = useFileContext();
+  const { clearAllFileErrors } = fileContextActions;
 
   // Extract needed values from state (memoized to prevent infinite loops)
   const activeStirlingFileStubs = useMemo(() => selectors.getStirlingFileStubs(), [selectors.getFilesSignature()]);
   const selectedFileIds = state.ui.selectedFileIds;
+  const totalItems = state.files.ids.length;
+  const selectedCount = selectedFileIds.length;
 
   // Get navigation actions
   const { actions: navActions } = useNavigationActions();
@@ -62,25 +66,12 @@ const FileEditor = ({
   const [selectionMode, setSelectionMode] = useState(toolMode);
 
   // Enable selection mode automatically in tool mode
-  React.useEffect(() => {
+  useEffect(() => {
     if (toolMode) {
       setSelectionMode(true);
     }
   }, [toolMode]);
   const [showFilePickerModal, setShowFilePickerModal] = useState(false);
-  const [zipExtractionProgress, setZipExtractionProgress] = useState<{
-    isExtracting: boolean;
-    currentFile: string;
-    progress: number;
-    extractedCount: number;
-    totalFiles: number;
-  }>({
-    isExtracting: false,
-    currentFile: '',
-    progress: 0,
-    extractedCount: 0,
-    totalFiles: 0
-  });
   // Get selected file IDs from context (defensive programming)
   const contextSelectedIds = Array.isArray(selectedFileIds) ? selectedFileIds : [];
 
@@ -91,107 +82,63 @@ const FileEditor = ({
   // Use activeStirlingFileStubs directly - no conversion needed
   const localSelectedIds = contextSelectedIds;
 
+  const handleSelectAllFiles = useCallback(() => {
+    setSelectedFiles(state.files.ids);
+    try {
+      clearAllFileErrors();
+    } catch (error) {
+      if (process.env.NODE_ENV === 'development') {
+        console.warn('Failed to clear file errors on select all:', error);
+      }
+    }
+  }, [state.files.ids, setSelectedFiles, clearAllFileErrors]);
+
+  const handleDeselectAllFiles = useCallback(() => {
+    setSelectedFiles([]);
+    try {
+      clearAllFileErrors();
+    } catch (error) {
+      if (process.env.NODE_ENV === 'development') {
+        console.warn('Failed to clear file errors on deselect:', error);
+      }
+    }
+  }, [setSelectedFiles, clearAllFileErrors]);
+
+  const handleCloseSelectedFiles = useCallback(() => {
+    if (selectedFileIds.length === 0) return;
+    void removeFiles(selectedFileIds, false);
+    setSelectedFiles([]);
+  }, [selectedFileIds, removeFiles, setSelectedFiles]);
+
+  useFileEditorRightRailButtons({
+    totalItems,
+    selectedCount,
+    onSelectAll: handleSelectAllFiles,
+    onDeselectAll: handleDeselectAllFiles,
+    onCloseSelected: handleCloseSelectedFiles,
+  });
+
   // Process uploaded files using context
+  // ZIP extraction is now handled automatically in FileContext based on user preferences
   const handleFileUpload = useCallback(async (uploadedFiles: File[]) => {
     _setError(null);
 
     try {
-      const allExtractedFiles: File[] = [];
-      const errors: string[] = [];
-
-      for (const file of uploadedFiles) {
-        if (file.type === 'application/pdf') {
-          // Handle PDF files normally
-          allExtractedFiles.push(file);
-        } else if (file.type === 'application/zip' || file.type === 'application/x-zip-compressed' || file.name.toLowerCase().endsWith('.zip')) {
-          // Handle ZIP files - only expand if they contain PDFs
-          try {
-            // Validate ZIP file first
-            const validation = await zipFileService.validateZipFile(file);
-
-            if (validation.isValid && validation.containsPDFs) {
-              // ZIP contains PDFs - extract them
-              setZipExtractionProgress({
-                isExtracting: true,
-                currentFile: file.name,
-                progress: 0,
-                extractedCount: 0,
-                totalFiles: validation.fileCount
-              });
-
-              const extractionResult = await zipFileService.extractPdfFiles(file, (progress) => {
-                setZipExtractionProgress({
-                  isExtracting: true,
-                  currentFile: progress.currentFile,
-                  progress: progress.progress,
-                  extractedCount: progress.extractedCount,
-                  totalFiles: progress.totalFiles
-                });
-              });
-
-              // Reset extraction progress
-              setZipExtractionProgress({
-                isExtracting: false,
-                currentFile: '',
-                progress: 0,
-                extractedCount: 0,
-                totalFiles: 0
-              });
-
-              if (extractionResult.success) {
-                allExtractedFiles.push(...extractionResult.extractedFiles);
-
-                if (extractionResult.errors.length > 0) {
-                  errors.push(...extractionResult.errors);
-                }
-              } else {
-                errors.push(`Failed to extract ZIP file "${file.name}": ${extractionResult.errors.join(', ')}`);
-              }
-            } else {
-              // ZIP doesn't contain PDFs or is invalid - treat as regular file
-              allExtractedFiles.push(file);
-            }
-          } catch (zipError) {
-            errors.push(`Failed to process ZIP file "${file.name}": ${zipError instanceof Error ? zipError.message : 'Unknown error'}`);
-            setZipExtractionProgress({
-              isExtracting: false,
-              currentFile: '',
-              progress: 0,
-              extractedCount: 0,
-              totalFiles: 0
-            });
-          }
-        } else {
-          allExtractedFiles.push(file);
-        }
-      }
-
-      // Show any errors
-      if (errors.length > 0) {
-        showError(errors.join('\n'));
-      }
-
-      // Process all extracted files
-      if (allExtractedFiles.length > 0) {
-        // Add files to context and select them automatically
-        await addFiles(allExtractedFiles, { selectFiles: true });
-        showStatus(`Added ${allExtractedFiles.length} files`, 'success');
+      if (uploadedFiles.length > 0) {
+        // FileContext will automatically handle ZIP extraction based on user preferences
+        // - Respects autoUnzip setting
+        // - Respects autoUnzipFileLimit
+        // - HTML ZIPs stay intact
+        // - Non-ZIP files pass through unchanged
+        await addFiles(uploadedFiles, { selectFiles: true });
+        showStatus(`Added ${uploadedFiles.length} file(s)`, 'success');
       }
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to process files';
       showError(errorMessage);
       console.error('File processing error:', err);
-
-      // Reset extraction progress on error
-      setZipExtractionProgress({
-        isExtracting: false,
-        currentFile: '',
-        progress: 0,
-        extractedCount: 0,
-        totalFiles: 0
-      });
     }
-  }, [addFiles]);
+  }, [addFiles, showStatus, showError]);
 
   const toggleFile = useCallback((fileId: FileId) => {
     const currentSelectedIds = contextSelectedIdsRef.current;
@@ -320,7 +267,7 @@ const FileEditor = ({
 
         if (result.success && result.extractedStubs.length > 0) {
           // Add extracted file stubs to FileContext
-          await actions.addStirlingFileStubs(result.extractedStubs);
+          await fileActions.addStirlingFileStubs(result.extractedStubs);
 
           // Remove the original ZIP file
           removeFiles([fileId], false);
@@ -350,7 +297,7 @@ const FileEditor = ({
         });
       }
     }
-  }, [activeStirlingFileStubs, selectors, actions, removeFiles]);
+  }, [activeStirlingFileStubs, selectors, fileActions, removeFiles]);
 
   const handleViewFile = useCallback((fileId: FileId) => {
     const record = activeStirlingFileStubs.find(r => r.id === fileId);
@@ -394,7 +341,7 @@ const FileEditor = ({
         <Box p="md">
 
 
-        {activeStirlingFileStubs.length === 0 && !zipExtractionProgress.isExtracting ? (
+        {activeStirlingFileStubs.length === 0 ? (
           <Center h="60vh">
             <Stack align="center" gap="md">
               <Text size="lg" c="dimmed">📁</Text>
@@ -402,43 +349,6 @@ const FileEditor = ({
               <Text size="sm" c="dimmed">Upload PDF files, ZIP archives, or load from storage to get started</Text>
             </Stack>
           </Center>
-        ) : activeStirlingFileStubs.length === 0 && zipExtractionProgress.isExtracting ? (
-          <Box>
-            <SkeletonLoader type="controls" />
-
-            {/* ZIP Extraction Progress */}
-            {zipExtractionProgress.isExtracting && (
-              <Box mb="md" p="sm" style={{ backgroundColor: 'var(--mantine-color-orange-0)', borderRadius: 8 }}>
-                <Group justify="space-between" mb="xs">
-                  <Text size="sm" fw={500}>Extracting ZIP archive...</Text>
-                  <Text size="sm" c="dimmed">{Math.round(zipExtractionProgress.progress)}%</Text>
-                </Group>
-                <Text size="xs" c="dimmed" mb="xs">
-                  {zipExtractionProgress.currentFile || 'Processing files...'}
-                </Text>
-                <Text size="xs" c="dimmed" mb="xs">
-                  {zipExtractionProgress.extractedCount} of {zipExtractionProgress.totalFiles} files extracted
-                </Text>
-                <div style={{
-                  width: '100%',
-                  height: '4px',
-                  backgroundColor: 'var(--mantine-color-gray-2)',
-                  borderRadius: '2px',
-                  overflow: 'hidden'
-                }}>
-                  <div style={{
-                    width: `${Math.round(zipExtractionProgress.progress)}%`,
-                    height: '100%',
-                    backgroundColor: 'var(--mantine-color-orange-6)',
-                    transition: 'width 0.3s ease'
-                  }} />
-                </div>
-              </Box>
-            )}
-
-
-            <SkeletonLoader type="fileGrid" count={6} />
-          </Box>
         ) : (
           <div
             style={{

frontend/src/components/fileEditor/FileEditorThumbnail.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
-import { Text, ActionIcon, CheckboxIndicator, Tooltip } from '@mantine/core';
+import React, { useState, useCallback, useRef, useMemo } from 'react';
+import { Text, ActionIcon, CheckboxIndicator, Tooltip, Modal, Button, Group, Stack } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
 import { alert } from '../toast';
 import { useTranslation } from 'react-i18next';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
 import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined';
 import CloseIcon from '@mui/icons-material/Close';
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import UnarchiveIcon from '@mui/icons-material/Unarchive';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
@@ -19,6 +20,7 @@ import { useFileState } from '../../contexts/file/fileHooks';
 import { FileId } from '../../types/file';
 import { formatFileSize } from '../../utils/fileUtils';
 import ToolChain from '../shared/ToolChain';
+import HoverActionMenu, { HoverAction } from '../shared/HoverActionMenu';
 
 
 
@@ -60,8 +62,9 @@ const FileEditorThumbnail = ({
   // ---- Drag state ----
   const [isDragging, setIsDragging] = useState(false);
   const dragElementRef = useRef<HTMLDivElement | null>(null);
-  const [actionsWidth, setActionsWidth] = useState<number | undefined>(undefined);
-  const [showActions, setShowActions] = useState(false);
+  const [showHoverMenu, setShowHoverMenu] = useState(false);
+  const isMobile = useMediaQuery('(max-width: 1024px)');
+  const [showCloseModal, setShowCloseModal] = useState(false);
 
   // Resolve the actual File object for pin/unpin operations
   const actualFile = useMemo(() => {
@@ -155,46 +158,66 @@ const FileEditorThumbnail = ({
     };
   }, [file.id, file.name, selectedFiles, onReorderFiles]);
 
-  // Update dropdown width on resize
-  useEffect(() => {
-    const update = () => {
-      if (dragElementRef.current) setActionsWidth(dragElementRef.current.offsetWidth);
-    };
-    update();
-    window.addEventListener('resize', update);
-    return () => window.removeEventListener('resize', update);
+  // Handle close with confirmation
+  const handleCloseWithConfirmation = useCallback(() => {
+    setShowCloseModal(true);
   }, []);
 
-  // Close the actions dropdown when hovering outside this file card (and its dropdown)
-  useEffect(() => {
-    if (!showActions) return;
+  const handleConfirmClose = useCallback(() => {
+    onCloseFile(file.id);
+    alert({ alertType: 'neutral', title: `Closed ${file.name}`, expandable: false, durationMs: 3500 });
+    setShowCloseModal(false);
+  }, [file.id, file.name, onCloseFile]);
 
-    const isInsideCard = (target: EventTarget | null) => {
-      const container = dragElementRef.current;
-      if (!container) return false;
-      return target instanceof Node && container.contains(target);
-    };
+  const handleCancelClose = useCallback(() => {
+    setShowCloseModal(false);
+  }, []);
 
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!isInsideCard(e.target)) {
-        setShowActions(false);
-      }
-    };
-
-    const handleTouchStart = (e: TouchEvent) => {
-      // On touch devices, close if the touch target is outside the card
-      if (!isInsideCard(e.target)) {
-        setShowActions(false);
-      }
-    };
-
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('touchstart', handleTouchStart, { passive: true });
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('touchstart', handleTouchStart);
-    };
-  }, [showActions]);
+  // Build hover menu actions
+  const hoverActions = useMemo<HoverAction[]>(() => [
+    {
+      id: 'view',
+      icon: <VisibilityIcon style={{ fontSize: 20 }} />,
+      label: t('openInViewer', 'Open in Viewer'),
+      onClick: (e) => {
+        e.stopPropagation();
+        onViewFile(file.id);
+      },
+    },
+    {
+      id: 'download',
+      icon: <DownloadOutlinedIcon style={{ fontSize: 20 }} />,
+      label: t('download', 'Download'),
+      onClick: (e) => {
+        e.stopPropagation();
+        onDownloadFile(file.id);
+        alert({ alertType: 'success', title: `Downloading ${file.name}`, expandable: false, durationMs: 2500 });
+      },
+    },
+    {
+      id: 'unzip',
+      icon: <UnarchiveIcon style={{ fontSize: 20 }} />,
+      label: t('fileManager.unzip', 'Unzip'),
+      onClick: (e) => {
+        e.stopPropagation();
+        if (onUnzipFile) {
+          onUnzipFile(file.id);
+          alert({ alertType: 'success', title: `Unzipping ${file.name}`, expandable: false, durationMs: 2500 });
+        }
+      },
+      hidden: !isZipFile || !onUnzipFile,
+    },
+    {
+      id: 'close',
+      icon: <CloseIcon style={{ fontSize: 20 }} />,
+      label: t('close', 'Close'),
+      onClick: (e) => {
+        e.stopPropagation();
+        handleCloseWithConfirmation();
+      },
+      color: 'red',
+    }
+  ], [t, file.id, file.name, isZipFile, onViewFile, onDownloadFile, onUnzipFile, handleCloseWithConfirmation]);
 
   // ---- Card interactions ----
   const handleCardClick = () => {
@@ -232,6 +255,8 @@ const FileEditorThumbnail = ({
       role="listitem"
       aria-selected={isSelected}
       onClick={handleCardClick}
+      onMouseEnter={() => setShowHoverMenu(true)}
+      onMouseLeave={() => setShowHoverMenu(false)}
       onDoubleClick={handleCardDoubleClick}
     >
       {/* Header bar */}
@@ -289,98 +314,9 @@ const FileEditorThumbnail = ({
               {isPinned ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
             </ActionIcon>
           </Tooltip>
-
-          {/* Download icon */}
-          <Tooltip label={t('download', 'Download')}>
-            <ActionIcon
-              aria-label={t('download', 'Download')}
-              variant="subtle"
-              className={styles.headerIconButton}
-              onClick={(e) => {
-                e.stopPropagation();
-                onDownloadFile(file.id);
-                alert({ alertType: 'success', title: `Downloading ${file.name}`, expandable: false, durationMs: 2500 });
-              }}
-            >
-              <DownloadOutlinedIcon fontSize="small" />
-            </ActionIcon>
-          </Tooltip>
-
-          {/* Kebab menu */}
-          <ActionIcon
-            aria-label={t('moreOptions', 'More options')}
-            variant="subtle"
-            className={styles.headerIconButton}
-            onClick={(e) => {
-              e.stopPropagation();
-              setShowActions((v) => !v);
-            }}
-          >
-            <MoreVertIcon fontSize="small" />
-          </ActionIcon>
         </div>
       </div>
 
-      {/* Actions overlay */}
-      {showActions && (
-        <div
-          className={styles.actionsOverlay}
-          style={{ width: actionsWidth }}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <button
-            className={styles.actionRow}
-            onClick={() => {
-              if (actualFile) {
-                if (isPinned) {
-                  unpinFile(actualFile);
-                  alert({ alertType: 'neutral', title: `Unpinned ${file.name}`, expandable: false, durationMs: 3000 });
-                } else {
-                  pinFile(actualFile);
-                  alert({ alertType: 'success', title: `Pinned ${file.name}`, expandable: false, durationMs: 3000 });
-                }
-              }
-              setShowActions(false);
-            }}
-          >
-            {isPinned ? <PushPinIcon className={styles.pinned} fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
-            <span>{isPinned ? t('unpin', 'Unpin') : t('pin', 'Pin')}</span>
-          </button>
-
-          <button
-            className={styles.actionRow}
-            onClick={() => { onDownloadFile(file.id); alert({ alertType: 'success', title: `Downloading ${file.name}`, expandable: false, durationMs: 2500 }); setShowActions(false); }}
-          >
-            <DownloadOutlinedIcon fontSize="small" />
-            <span>{t('download', 'Download')}</span>
-          </button>
-
-          {isZipFile && onUnzipFile && (
-            <button
-              className={styles.actionRow}
-              onClick={() => { onUnzipFile(file.id); alert({ alertType: 'success', title: `Unzipping ${file.name}`, expandable: false, durationMs: 2500 }); setShowActions(false); }}
-            >
-              <UnarchiveIcon fontSize="small" />
-              <span>{t('fileManager.unzip', 'Unzip')}</span>
-            </button>
-          )}
-
-          <div className={styles.actionsDivider} />
-
-          <button
-            className={`${styles.actionRow} ${styles.actionDanger}`}
-            onClick={() => {
-              onCloseFile(file.id);
-              alert({ alertType: 'neutral', title: `Closed ${file.name}`, expandable: false, durationMs: 3500 });
-              setShowActions(false);
-            }}
-          >
-            <CloseIcon fontSize="small" />
-            <span>{t('close', 'Close')}</span>
-          </button>
-        </div>
-      )}
-
       {/* Title + meta line */}
       <div
       style={{
@@ -471,6 +407,37 @@ const FileEditorThumbnail = ({
           </div>
         )}
       </div>
+
+      {/* Hover Menu */}
+      <HoverActionMenu
+        show={showHoverMenu || isMobile}
+        actions={hoverActions}
+        position="outside"
+      />
+
+      {/* Close Confirmation Modal */}
+      <Modal
+        opened={showCloseModal}
+        onClose={handleCancelClose}
+        title={t('confirmClose', 'Confirm Close')}
+        centered
+        size="auto"
+      >
+        <Stack gap="md">
+          <Text size="md">{t('confirmCloseMessage', 'Are you sure you want to close this file?')}</Text>
+          <Text size="sm" c="dimmed" fw={500}>
+            {file.name}
+          </Text>
+          <Group justify="flex-end" gap="sm">
+            <Button variant="light" onClick={handleCancelClose}>
+              {t('confirmCloseCancel', 'Cancel')}
+            </Button>
+            <Button variant="filled" color="red" onClick={handleConfirmClose}>
+              {t('confirmCloseConfirm', 'Close File')}
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
     </div>
   );
 };

frontend/src/components/fileEditor/fileEditorRightRailButtons.tsx

@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useRightRailButtons, RightRailButtonWithAction } from '../../hooks/useRightRailButtons';
+import LocalIcon from '../shared/LocalIcon';
+
+interface FileEditorRightRailButtonsParams {
+  totalItems: number;
+  selectedCount: number;
+  onSelectAll: () => void;
+  onDeselectAll: () => void;
+  onCloseSelected: () => void;
+}
+
+export function useFileEditorRightRailButtons({
+  totalItems,
+  selectedCount,
+  onSelectAll,
+  onDeselectAll,
+  onCloseSelected,
+}: FileEditorRightRailButtonsParams) {
+  const { t } = useTranslation();
+
+  const buttons = useMemo<RightRailButtonWithAction[]>(() => [
+    {
+      id: 'file-select-all',
+      icon: <LocalIcon icon="select-all" width="1.5rem" height="1.5rem" />,
+      tooltip: t('rightRail.selectAll', 'Select All'),
+      ariaLabel: typeof t === 'function' ? t('rightRail.selectAll', 'Select All') : 'Select All',
+      section: 'top' as const,
+      order: 10,
+      disabled: totalItems === 0 || selectedCount === totalItems,
+      visible: totalItems > 0,
+      onClick: onSelectAll,
+    },
+    {
+      id: 'file-deselect-all',
+      icon: <LocalIcon icon="crop-square-outline" width="1.5rem" height="1.5rem" />,
+      tooltip: t('rightRail.deselectAll', 'Deselect All'),
+      ariaLabel: typeof t === 'function' ? t('rightRail.deselectAll', 'Deselect All') : 'Deselect All',
+      section: 'top' as const,
+      order: 20,
+      disabled: selectedCount === 0,
+      visible: totalItems > 0,
+      onClick: onDeselectAll,
+    },
+    {
+      id: 'file-close-selected',
+      icon: <LocalIcon icon="close-rounded" width="1.5rem" height="1.5rem" />,
+      tooltip: t('rightRail.closeSelected', 'Close Selected Files'),
+      ariaLabel: typeof t === 'function' ? t('rightRail.closeSelected', 'Close Selected Files') : 'Close Selected Files',
+      section: 'top' as const,
+      order: 30,
+      disabled: selectedCount === 0,
+      visible: totalItems > 0,
+      onClick: onCloseSelected,
+    },
+  ], [t, totalItems, selectedCount, onSelectAll, onDeselectAll, onCloseSelected]);
+
+  useRightRailButtons(buttons);
+}

frontend/src/components/fileManager/CompactFileDetails.tsx

@@ -42,6 +42,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
         <Box style={{ width: '7.5rem', height: '9.375rem', flexShrink: 0, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
           {currentFile && thumbnail ? (
             <img
+              className='ph-no-capture'
               src={thumbnail}
               alt={currentFile.name}
               style={{
@@ -66,7 +67,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
 
         {/* File info */}
         <Box style={{ flex: 1, minWidth: 0 }}>
-          <Text size="sm" fw={500} truncate>
+          <Text className='ph-no-capture' size="sm" fw={500} truncate>
             {currentFile ? currentFile.name : 'No file selected'}
           </Text>
           <Text size="xs" c="dimmed">

frontend/src/components/fileManager/FileDetails.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Stack, Button, Box } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useIndexedDBThumbnail } from '../../hooks/useIndexedDBThumbnail';
@@ -50,7 +50,7 @@ const FileDetails: React.FC<FileDetailsProps> = ({
   };
 
   // Reset index when selection changes
-  React.useEffect(() => {
+  useEffect(() => {
     if (currentFileIndex >= selectedFiles.length) {
       setCurrentFileIndex(0);
     }

frontend/src/components/fileManager/FileHistoryGroup.tsx

@@ -44,7 +44,7 @@ const FileHistoryGroup: React.FC<FileHistoryGroupProps> = ({
         </Group>
 
         <Box ml="md">
-          {sortedHistory.map((historyFile, _index) => (
+          {sortedHistory.map((historyFile) => (
             <FileListItem
               key={`history-${historyFile.id}-${historyFile.versionNumber || 1}`}
               file={historyFile}
@@ -56,7 +56,6 @@ const FileHistoryGroup: React.FC<FileHistoryGroupProps> = ({
               onDoubleClick={() => onFileDoubleClick(historyFile)}
               isHistoryFile={true} // This enables "Add to Recents" in menu
               isLatestVersion={false} // History files are never latest
-              // onAddToRecents is accessed from context by FileListItem
             />
           ))}
         </Box>

frontend/src/components/fileManager/FileListItem.tsx

@@ -12,6 +12,7 @@ import { FileId, StirlingFileStub } from '../../types/fileContext';
 import { useFileManagerContext } from '../../contexts/FileManagerContext';
 import { zipFileService } from '../../services/zipFileService';
 import ToolChain from '../shared/ToolChain';
+import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from '../../styles/zIndex';
 
 interface FileListItemProps {
   file: StirlingFileStub;
@@ -40,7 +41,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
   const [isHovered, setIsHovered] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const { t } = useTranslation();
-  const {expandedFileIds, onToggleExpansion, onAddToRecents, onUnzipFile } = useFileManagerContext();
+  const {expandedFileIds, onToggleExpansion, onUnzipFile } = useFileManagerContext();
 
   // Check if this is a ZIP file
   const isZipFile = zipFileService.isZipFileStub(file);
@@ -127,6 +128,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
             withinPortal
             onOpen={() => setIsMenuOpen(true)}
             onClose={() => setIsMenuOpen(false)}
+            zIndex={Z_INDEX_OVER_FILE_MANAGER_MODAL}
           >
             <Menu.Target>
               <ActionIcon
@@ -188,7 +190,6 @@ const FileListItem: React.FC<FileListItemProps> = ({
                     leftSection={<RestoreIcon style={{ fontSize: 16 }} />}
                     onClick={(e) => {
                       e.stopPropagation();
-                      onAddToRecents(file);
                     }}
                   >
                     {t('fileManager.restore', 'Restore')}

frontend/src/components/layout/Workbench.tsx

@@ -7,6 +7,7 @@ import { useFileState } from '../../contexts/FileContext';
 import { useNavigationState, useNavigationActions } from '../../contexts/NavigationContext';
 import { useViewer } from '../../contexts/ViewerContext';
 import { PageEditorProvider } from '../../contexts/PageEditorContext';
+import { isBaseWorkbench } from '../../types/workbench';
 import './Workbench.css';
 
 import TopControls from '../shared/TopControls';
@@ -36,7 +37,8 @@ export default function Workbench() {
     sidebarsVisible,
     setPreviewFile,
     setPageEditorFunctions,
-    setSidebarsVisible
+    setSidebarsVisible,
+    customWorkbenchViews,
   } = useToolWorkflow();
 
   const { handleToolSelect } = useToolWorkflow();
@@ -140,9 +142,14 @@ export default function Workbench() {
         );
 
       default:
-        return (
-          <LandingPage/>
-        );
+        if (!isBaseWorkbench(currentView)) {
+          const customView = customWorkbenchViews.find((view) => view.workbenchId === currentView && view.data != null);
+          if (customView) {
+            const CustomComponent = customView.component;
+            return <CustomComponent data={customView.data} />;
+          }
+        }
+        return <LandingPage />;
     }
   };
 
@@ -161,13 +168,14 @@ export default function Workbench() {
           <TopControls
             currentView={currentView}
             setCurrentView={setCurrentView}
+            customViews={customWorkbenchViews}
             activeFiles={activeFiles.map(f => {
-              const stub = selectors.getStirlingFileStub(f.fileId);
-              return { fileId: f.fileId, name: f.name, versionNumber: stub?.versionNumber };
+            const stub = selectors.getStirlingFileStub(f.fileId);
+            return { fileId: f.fileId, name: f.name, versionNumber: stub?.versionNumber };
             })}
             currentFileIndex={activeFileIndex}
             onFileSelect={setActiveFileIndex}
-          />
+        />
         )}
 
         {/* Dismiss All Errors Button */}

frontend/src/components/pageEditor/PageEditor.tsx

@@ -28,6 +28,8 @@ import {
 import { GRID_CONSTANTS } from './constants';
 import { usePageDocument } from './hooks/usePageDocument';
 import { usePageEditorState } from './hooks/usePageEditorState';
+import { parseSelection } from "../../utils/bulkselection/parseSelection";
+import { usePageEditorRightRailButtons } from "./pageEditorRightRailButtons";
 import { PageBreakSettingsModal } from './PageBreakSettingsModal';
 
 export interface PageEditorProps {
@@ -113,6 +115,7 @@ const PageEditor = ({
   const selectedFileIds = useMemo(() => {
     return pageEditorFiles.filter(f => f.isSelected).map(f => f.fileId);
   }, [pageEditorFiles]);
+  const activeFilesSignature = selectors.getFilesSignature();
 
   // UI state
   const globalProcessing = state.ui.isProcessing;
@@ -134,6 +137,12 @@ const PageEditor = ({
     togglePage, toggleSelectAll, animateReorder
   } = usePageEditorState();
 
+  const [csvInput, setCsvInput] = useState<string>('');
+
+  useEffect(() => {
+    setCsvInput('');
+  }, [activeFilesSignature]);
+
   // Grid container ref for positioning split indicators
   const gridContainerRef = useRef<HTMLDivElement>(null);
 
@@ -192,111 +201,6 @@ const PageEditor = ({
   // Interface functions for parent component
   const displayDocument = editedDocument || mergedPdfDocument;
 
-  // Update current pages in context whenever displayDocument changes
-  useEffect(() => {
-    if (displayDocument?.pages) {
-      updateCurrentPages(displayDocument.pages);
-    }
-  }, [displayDocument?.pages, updateCurrentPages]);
-
-  // Apply reordered pages from file reordering
-  useEffect(() => {
-    if (reorderedPages && reorderedPages.length > 0 && displayDocument) {
-      // Create a new document with reordered pages
-      const reorderedDocument: PDFDocument = {
-        ...displayDocument,
-        pages: reorderedPages,
-        totalPages: reorderedPages.length,
-      };
-      setEditedDocument(reorderedDocument);
-      clearReorderedPages();
-    }
-  }, [reorderedPages, displayDocument, clearReorderedPages]);
-
-  // Function to reorder pages based on new file order
-  const reorderPagesByFileOrder = useCallback((newFileOrder: FileId[]) => {
-    const docToUpdate = editedDocument || mergedPdfDocument;
-    if (!docToUpdate) return;
-
-    // Group pages by originalFileId
-    const pagesByFileId = new Map<FileId, PDFPage[]>();
-    docToUpdate.pages.forEach(page => {
-      if (page.originalFileId) {
-        if (!pagesByFileId.has(page.originalFileId)) {
-          pagesByFileId.set(page.originalFileId, []);
-        }
-        pagesByFileId.get(page.originalFileId)!.push(page);
-      }
-    });
-
-    // Rebuild pages array in new file order
-    const reorderedPages: PDFPage[] = [];
-    newFileOrder.forEach(fileId => {
-      const filePages = pagesByFileId.get(fileId);
-      if (filePages) {
-        reorderedPages.push(...filePages);
-      }
-    });
-
-    // Renumber pages
-    const renumberedPages = reorderedPages.map((page, idx) => ({
-      ...page,
-      pageNumber: idx + 1
-    }));
-
-    setEditedDocument({
-      ...docToUpdate,
-      pages: renumberedPages,
-      totalPages: renumberedPages.length
-    });
-  }, [editedDocument, mergedPdfDocument]);
-
-  // When file selection changes, update placeholder flags in editedDocument
-  const prevSelectedFileIdsRef = useRef<FileId[]>([]);
-  useEffect(() => {
-    const prevIds = prevSelectedFileIdsRef.current;
-    const currentIds = selectedFileIds;
-
-    // Skip if no change or first render
-    if (prevIds.length === 0 && currentIds.length > 0) {
-      prevSelectedFileIdsRef.current = currentIds;
-      return;
-    }
-
-    if (prevIds.length === currentIds.length && prevIds.every((id, idx) => id === currentIds[idx])) {
-      return;
-    }
-
-    // Use editedDocument if available, otherwise use mergedPdfDocument
-    const docToUpdate = editedDocument || mergedPdfDocument;
-    if (!docToUpdate) {
-      prevSelectedFileIdsRef.current = currentIds;
-      return;
-    }
-
-    const currentSet = new Set(currentIds);
-
-    // Update placeholder flags on existing pages based on selection
-    const updatedPages = docToUpdate.pages.map(page => {
-      const isSelected = page.originalFileId ? currentSet.has(page.originalFileId) : true;
-
-      // If file is deselected, mark all its pages as placeholders
-      // If file is selected, remove placeholder flag
-      if (!isSelected) {
-        return { ...page, isPlaceholder: true };
-      } else {
-        return { ...page, isPlaceholder: false };
-      }
-    });
-
-    setEditedDocument({
-      ...docToUpdate,
-      pages: updatedPages
-    });
-
-    prevSelectedFileIdsRef.current = currentIds;
-  }, [selectedFileIds, editedDocument, mergedPdfDocument]);
-
   // Utility functions to convert between page IDs and page numbers
   const getPageNumbersFromIds = useCallback((pageIds: string[]): number[] => {
     if (!displayDocument) return [];
@@ -601,6 +505,12 @@ const PageEditor = ({
     setSelectedPageIds(pageIds);
   }, [getPageIdsFromNumbers, setSelectedPageIds]);
 
+  const updatePagesFromCSV = useCallback((override?: string) => {
+    if (totalPages === 0) return;
+    const normalized = parseSelection(override ?? csvInput, totalPages);
+    handleSetSelectedPages(normalized);
+  }, [csvInput, totalPages, handleSetSelectedPages]);
+
   const handleReorderPages = useCallback((sourcePageNumber: number, targetIndex: number, selectedPageIds?: string[]) => {
     if (!displayDocument) return;
 
@@ -802,6 +712,23 @@ const PageEditor = ({
     setSelectionMode(false);
   }, [actions]);
 
+  usePageEditorRightRailButtons({
+    totalPages,
+    selectedPageCount,
+    csvInput,
+    setCsvInput,
+    selectedPageIds,
+    displayDocument: displayDocument || undefined,
+    updatePagesFromCSV,
+    handleSelectAll,
+    handleDeselectAll,
+    handleDelete,
+    onExportSelected,
+    exportLoading,
+    activeFileCount: activeFileIds.length,
+    closePdf,
+  });
+
   // Export preview function - defined after export functions to avoid circular dependency
   const handleExportPreview = useCallback((selectedOnly: boolean = false) => {
     if (!displayDocument) return;

frontend/src/components/pageEditor/PageSelectByNumberButton.tsx

@@ -0,0 +1,59 @@
+import { ActionIcon, Popover } from '@mantine/core';
+import LocalIcon from '../shared/LocalIcon';
+import { Tooltip } from '../shared/Tooltip';
+import BulkSelectionPanel from './BulkSelectionPanel';
+
+interface PageSelectByNumberButtonProps {
+  disabled: boolean;
+  totalPages: number;
+  label: string;
+  csvInput: string;
+  setCsvInput: (value: string) => void;
+  selectedPageIds: string[];
+  displayDocument?: { pages: { id: string; pageNumber: number }[] };
+  updatePagesFromCSV: (override?: string) => void;
+}
+
+export default function PageSelectByNumberButton({
+  disabled,
+  totalPages,
+  label,
+  csvInput,
+  setCsvInput,
+  selectedPageIds,
+  displayDocument,
+  updatePagesFromCSV,
+}: PageSelectByNumberButtonProps) {
+  return (
+    <Tooltip content={label} position="left" offset={12} arrow portalTarget={document.body}>
+      <div className={`right-rail-fade enter`}>
+        <Popover position="left" withArrow shadow="md" offset={8}>
+          <Popover.Target>
+            <div style={{ display: 'inline-flex' }}>
+              <ActionIcon
+                variant="subtle"
+                radius="md"
+                className="right-rail-icon"
+                disabled={disabled || totalPages === 0}
+                aria-label={label}
+              >
+                <LocalIcon icon="pin-end" width="1.5rem" height="1.5rem" />
+              </ActionIcon>
+            </div>
+          </Popover.Target>
+          <Popover.Dropdown>
+            <div style={{ minWidth: '24rem', maxWidth: '32rem' }}>
+              <BulkSelectionPanel
+                csvInput={csvInput}
+                setCsvInput={setCsvInput}
+                selectedPageIds={selectedPageIds}
+                displayDocument={displayDocument}
+                onUpdatePagesFromCSV={updatePagesFromCSV}
+              />
+            </div>
+          </Popover.Dropdown>
+        </Popover>
+      </div>
+    </Tooltip>
+  );
+}

frontend/src/components/pageEditor/PageThumbnail.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback, useState, useEffect, useRef } from 'react';
-import { Text, Checkbox, Tooltip, ActionIcon } from '@mantine/core';
+import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
+import { Text, Checkbox } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import RotateLeftIcon from '@mui/icons-material/RotateLeft';
@@ -12,6 +13,7 @@ import { useThumbnailGeneration } from '../../hooks/useThumbnailGeneration';
 import { useFilesModalContext } from '../../contexts/FilesModalContext';
 import { getFileColorWithOpacity } from './fileColors';
 import styles from './PageEditor.module.css';
+import HoverActionMenu, { HoverAction } from '../shared/HoverActionMenu';
 
 
 interface PageThumbnailProps {
@@ -80,6 +82,8 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
 }: PageThumbnailProps) => {
   const [isMouseDown, setIsMouseDown] = useState(false);
   const [mouseStartPos, setMouseStartPos] = useState<{x: number, y: number} | null>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const isMobile = useMediaQuery('(max-width: 1024px)');
   const lastClickTimeRef = useRef<number>(0);
   const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(page.thumbnail);
   const elementRef = useRef<HTMLDivElement | null>(null);
@@ -262,6 +266,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
   const handleMouseLeave = useCallback(() => {
     setIsMouseDown(false);
     setMouseStartPos(null);
+    setIsHovered(false);
   }, []);
 
   const fileColorBorder = page.isBlankPage ? 'transparent' : getFileColorWithOpacity(fileColorIndex, 0.3);
@@ -269,6 +274,72 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
   // Spread dragHandleProps but use our merged ref
   const { ref: _, ...restDragProps } = dragHandleProps || {};
 
+  // Build hover menu actions
+  const hoverActions = useMemo<HoverAction[]>(() => [
+    {
+      id: 'move-left',
+      icon: <ArrowBackIcon style={{ fontSize: 20 }} />,
+      label: 'Move Left',
+      onClick: (e) => {
+        e.stopPropagation();
+        if (index > 0 && !movingPage && !isAnimating) {
+          onSetMovingPage(page.pageNumber);
+          onReorderPages(page.pageNumber, index - 1);
+          setTimeout(() => onSetMovingPage(null), 650);
+          onSetStatus(`Moved page ${page.pageNumber} left`);
+        }
+      },
+      disabled: index === 0
+    },
+    {
+      id: 'move-right',
+      icon: <ArrowForwardIcon style={{ fontSize: 20 }} />,
+      label: 'Move Right',
+      onClick: (e) => {
+        e.stopPropagation();
+        if (index < totalPages - 1 && !movingPage && !isAnimating) {
+          onSetMovingPage(page.pageNumber);
+          onReorderPages(page.pageNumber, index + 1);
+          setTimeout(() => onSetMovingPage(null), 650);
+          onSetStatus(`Moved page ${page.pageNumber} right`);
+        }
+      },
+      disabled: index === totalPages - 1
+    },
+    {
+      id: 'rotate-left',
+      icon: <RotateLeftIcon style={{ fontSize: 20 }} />,
+      label: 'Rotate Left',
+      onClick: handleRotateLeft,
+    },
+    {
+      id: 'rotate-right',
+      icon: <RotateRightIcon style={{ fontSize: 20 }} />,
+      label: 'Rotate Right',
+      onClick: handleRotateRight,
+    },
+    {
+      id: 'delete',
+      icon: <DeleteIcon style={{ fontSize: 20 }} />,
+      label: 'Delete Page',
+      onClick: handleDelete,
+      color: 'red',
+    },
+    {
+      id: 'split',
+      icon: <ContentCutIcon style={{ fontSize: 20 }} />,
+      label: 'Split After',
+      onClick: handleSplit,
+      hidden: index >= totalPages - 1,
+    },
+    {
+      id: 'insert',
+      icon: <AddIcon style={{ fontSize: 20 }} />,
+      label: 'Insert File After',
+      onClick: handleInsertFileAfter,
+    }
+  ], [index, totalPages, movingPage, isAnimating, page.pageNumber, handleRotateLeft, handleRotateRight, handleDelete, handleSplit, handleInsertFileAfter, onReorderPages, onSetMovingPage, onSetStatus]);
+
   return (
     <div
       ref={mergedRef}
@@ -300,6 +371,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
       }}
       onMouseDown={handleMouseDown}
       onMouseUp={handleMouseUp}
+      onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={handleMouseLeave}
     >
       {
@@ -411,128 +483,12 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
           {page.pageNumber}
         </Text>
 
-        <div
+        <HoverActionMenu
+          show={isHovered || isMobile}
+          actions={hoverActions}
+          position="inside"
           className={styles.pageHoverControls}
-          style={{
-            position: 'absolute',
-            bottom: 8,
-            left: '50%',
-            transform: 'translateX(-50%)',
-            backgroundColor: 'var(--bg-toolbar)',
-            border: '1px solid var(--border-default)',
-            padding: '6px 12px',
-            borderRadius: 20,
-            opacity: 0,
-            transition: 'opacity 0.2s ease-in-out',
-            zIndex: 3,
-            display: 'flex',
-            gap: '8px',
-            alignItems: 'center',
-            whiteSpace: 'nowrap'
-          }}
-          onMouseDown={(e) => e.stopPropagation()}
-          onMouseUp={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Tooltip label="Move Left">
-            <ActionIcon
-              size="md"
-              variant="subtle"
-              style={{ color: 'var(--mantine-color-dimmed)' }}
-              disabled={index === 0}
-              onClick={(e) => {
-                e.stopPropagation();
-                if (index > 0 && !movingPage && !isAnimating) {
-                  onSetMovingPage(page.pageNumber);
-                  // Actually move the page left (swap with previous page)
-                  onReorderPages(page.pageNumber, index - 1);
-                  setTimeout(() => onSetMovingPage(null), 650);
-                  onSetStatus(`Moved page ${page.pageNumber} left`);
-                }
-              }}
-            >
-              <ArrowBackIcon style={{ fontSize: 20 }} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip label="Move Right">
-            <ActionIcon
-              size="md"
-              variant="subtle"
-              style={{ color: 'var(--mantine-color-dimmed)' }}
-              disabled={index === totalPages - 1}
-              onClick={(e) => {
-                e.stopPropagation();
-                if (index < totalPages - 1 && !movingPage && !isAnimating) {
-                  onSetMovingPage(page.pageNumber);
-                  // Actually move the page right (swap with next page)
-                  onReorderPages(page.pageNumber, index + 1);
-                  setTimeout(() => onSetMovingPage(null), 650);
-                  onSetStatus(`Moved page ${page.pageNumber} right`);
-                }
-              }}
-            >
-              <ArrowForwardIcon style={{ fontSize: 20 }} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip label="Rotate Left">
-            <ActionIcon
-              size="md"
-              variant="subtle"
-              style={{ color: 'var(--mantine-color-dimmed)' }}
-              onClick={handleRotateLeft}
-            >
-              <RotateLeftIcon style={{ fontSize: 20 }} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip label="Rotate Right">
-            <ActionIcon
-              size="md"
-              variant="subtle"
-              style={{ color: 'var(--mantine-color-dimmed)' }}
-              onClick={handleRotateRight}
-            >
-              <RotateRightIcon style={{ fontSize: 20 }} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip label="Delete Page">
-            <ActionIcon
-              size="md"
-              variant="subtle"
-              c="red"
-              onClick={handleDelete}
-            >
-              <DeleteIcon style={{ fontSize: 20 }} />
-            </ActionIcon>
-          </Tooltip>
-
-          {index < totalPages - 1 && (
-            <Tooltip label="Split After">
-              <ActionIcon
-                size="md"
-                variant="subtle"
-                style={{ color: 'var(--mantine-color-dimmed)' }}
-                onClick={handleSplit}
-              >
-                <ContentCutIcon style={{ fontSize: 20 }} />
-              </ActionIcon>
-            </Tooltip>
-          )}
-
-          <Tooltip label="Insert File After">
-            <ActionIcon
-              size="md"
-              variant="subtle"
-              style={{ color: 'var(--mantine-color-dimmed)' }}
-              onClick={handleInsertFileAfter}
-            >
-              <AddIcon style={{ fontSize: 20 }} />
-            </ActionIcon>
-          </Tooltip>
-        </div>
+        />
 
       </div>
 

frontend/src/components/pageEditor/hooks/usePageDocument.ts

@@ -27,7 +27,7 @@ export function usePageDocument(): PageDocumentHook {
   // Use stable string keys to prevent infinite loops
   const allFileIdsKey = allFileIds.join(',');
   const selectedIdsKey = [...state.ui.selectedFileIds].sort().join(',');
-  const filesSignature = selectors.getFilesSignature();
+  const activeFilesSignature = selectors.getFilesSignature();
 
   // Get ALL PDF files (selected or not) for document building with placeholders
   const activeFileIds = useMemo(() => {
@@ -36,7 +36,7 @@ export function usePageDocument(): PageDocumentHook {
       return stub?.name?.toLowerCase().endsWith('.pdf') ?? false;
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allFileIdsKey, filesSignature]);
+  }, [allFileIdsKey, activeFilesSignature]);
 
   const primaryFileId = activeFileIds[0] ?? null;
 
@@ -193,7 +193,7 @@ export function usePageDocument(): PageDocumentHook {
     };
 
     return mergedDoc;
-  }, [activeFileIds, primaryFileId, primaryStirlingFileStub, processedFilePages, processedFileTotalPages, selectors, filesSignature]);
+  }, [activeFileIds, primaryFileId, primaryStirlingFileStub, processedFilePages, processedFileTotalPages, selectors, activeFilesSignature]);
 
   // Large document detection for smart loading
   const isVeryLargeDocument = useMemo(() => {

frontend/src/components/pageEditor/pageEditorRightRailButtons.tsx

@@ -0,0 +1,156 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useRightRailButtons, RightRailButtonWithAction } from '../../hooks/useRightRailButtons';
+import LocalIcon from '../shared/LocalIcon';
+import PageSelectByNumberButton from './PageSelectByNumberButton';
+
+interface PageEditorRightRailButtonsParams {
+  totalPages: number;
+  selectedPageCount: number;
+  csvInput: string;
+  setCsvInput: (value: string) => void;
+  selectedPageIds: string[];
+  displayDocument?: { pages: { id: string; pageNumber: number }[] };
+  updatePagesFromCSV: (override?: string) => void;
+  handleSelectAll: () => void;
+  handleDeselectAll: () => void;
+  handleDelete: () => void;
+  onExportSelected: () => void;
+  exportLoading: boolean;
+  activeFileCount: number;
+  closePdf: () => void;
+}
+
+export function usePageEditorRightRailButtons(params: PageEditorRightRailButtonsParams) {
+  const {
+    totalPages,
+    selectedPageCount,
+    csvInput,
+    setCsvInput,
+    selectedPageIds,
+    displayDocument,
+    updatePagesFromCSV,
+    handleSelectAll,
+    handleDeselectAll,
+    handleDelete,
+    onExportSelected,
+    exportLoading,
+    activeFileCount,
+    closePdf,
+  } = params;
+
+  const { t } = useTranslation();
+
+  // Lift i18n labels out of memo for clarity
+  const selectAllLabel = t('rightRail.selectAll', 'Select All');
+  const deselectAllLabel = t('rightRail.deselectAll', 'Deselect All');
+  const selectByNumberLabel = t('rightRail.selectByNumber', 'Select by Page Numbers');
+  const deleteSelectedLabel = t('rightRail.deleteSelected', 'Delete Selected Pages');
+  const exportSelectedLabel = t('rightRail.exportSelected', 'Export Selected Pages');
+  const closePdfLabel = t('rightRail.closePdf', 'Close PDF');
+
+  const buttons = useMemo<RightRailButtonWithAction[]>(() => {
+    return [
+      {
+        id: 'page-select-all',
+        icon: <LocalIcon icon="select-all" width="1.5rem" height="1.5rem" />,
+        tooltip: selectAllLabel,
+        ariaLabel: selectAllLabel,
+        section: 'top' as const,
+        order: 10,
+        disabled: totalPages === 0 || selectedPageCount === totalPages,
+        visible: totalPages > 0,
+        onClick: handleSelectAll,
+      },
+      {
+        id: 'page-deselect-all',
+        icon: <LocalIcon icon="crop-square-outline" width="1.5rem" height="1.5rem" />,
+        tooltip: deselectAllLabel,
+        ariaLabel: deselectAllLabel,
+        section: 'top' as const,
+        order: 20,
+        disabled: selectedPageCount === 0,
+        visible: totalPages > 0,
+        onClick: handleDeselectAll,
+      },
+      {
+        id: 'page-select-by-number',
+        tooltip: selectByNumberLabel,
+        ariaLabel: selectByNumberLabel,
+        section: 'top' as const,
+        order: 30,
+        disabled: totalPages === 0,
+        visible: totalPages > 0,
+        render: ({ disabled }) => (
+          <PageSelectByNumberButton
+            disabled={disabled}
+            totalPages={totalPages}
+            label={selectByNumberLabel}
+            csvInput={csvInput}
+            setCsvInput={setCsvInput}
+            selectedPageIds={selectedPageIds}
+            displayDocument={displayDocument}
+            updatePagesFromCSV={updatePagesFromCSV}
+          />
+        ),
+      },
+      {
+        id: 'page-delete-selected',
+        icon: <LocalIcon icon="delete-outline-rounded" width="1.5rem" height="1.5rem" />,
+        tooltip: deleteSelectedLabel,
+        ariaLabel: deleteSelectedLabel,
+        section: 'top' as const,
+        order: 40,
+        disabled: selectedPageCount === 0,
+        visible: totalPages > 0,
+        onClick: handleDelete,
+      },
+      {
+        id: 'page-export-selected',
+        icon: <LocalIcon icon="download" width="1.5rem" height="1.5rem" />,
+        tooltip: exportSelectedLabel,
+        ariaLabel: exportSelectedLabel,
+        section: 'top' as const,
+        order: 50,
+        disabled: selectedPageCount === 0 || exportLoading,
+        visible: totalPages > 0,
+        onClick: onExportSelected,
+      },
+      {
+        id: 'page-close-pdf',
+        icon: <LocalIcon icon="close-rounded" width="1.5rem" height="1.5rem" />,
+        tooltip: closePdfLabel,
+        ariaLabel: closePdfLabel,
+        section: 'top' as const,
+        order: 60,
+        disabled: activeFileCount === 0,
+        visible: activeFileCount > 0,
+        onClick: closePdf,
+      },
+    ];
+  }, [
+    t,
+    selectAllLabel,
+    deselectAllLabel,
+    selectByNumberLabel,
+    deleteSelectedLabel,
+    exportSelectedLabel,
+    closePdfLabel,
+    totalPages,
+    selectedPageCount,
+    csvInput,
+    setCsvInput,
+    selectedPageIds,
+    displayDocument,
+    updatePagesFromCSV,
+    handleSelectAll,
+    handleDeselectAll,
+    handleDelete,
+    onExportSelected,
+    exportLoading,
+    activeFileCount,
+    closePdf,
+  ]);
+
+  useRightRailButtons(buttons);
+}

frontend/src/components/shared/AppConfigModal.tsx

@@ -6,6 +6,7 @@ import Overview from './config/configSections/Overview';
 import { createConfigNavSections } from './config/configNavSections';
 import { NavKey } from './config/types';
 import './AppConfigModal.css';
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '../../styles/zIndex';
 
 interface AppConfigModalProps {
   opened: boolean;
@@ -77,7 +78,7 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
       centered
       radius="lg"
       withCloseButton={false}
-      style={{ zIndex: 1000 }}
+      zIndex={Z_INDEX_OVER_FULLSCREEN_SURFACE}
       overlayProps={{ opacity: 0.35, blur: 2 }}
       padding={0}
       fullScreen={isMobile}

frontend/src/components/shared/Badge.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Box } from '@mantine/core';
+
+interface BadgeProps {
+  children: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'colored';
+  color?: string;
+  textColor?: string;
+  backgroundColor?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const Badge: React.FC<BadgeProps> = ({ 
+  children, 
+  size = 'sm', 
+  variant = 'default',
+  color,
+  textColor,
+  backgroundColor,
+  className,
+  style 
+}) => {
+  const getSizeStyles = () => {
+    switch (size) {
+      case 'sm':
+        return {
+          padding: '0.125rem 0.5rem',
+          fontSize: '0.75rem',
+          fontWeight: 700,
+          borderRadius: '0.5rem',
+        };
+      case 'md':
+        return {
+          padding: '0.25rem 0.75rem',
+          fontSize: '0.875rem',
+          fontWeight: 700,
+          borderRadius: '0.625rem',
+        };
+      case 'lg':
+        return {
+          padding: '0.375rem 1rem',
+          fontSize: '1rem',
+          fontWeight: 700,
+          borderRadius: '0.75rem',
+        };
+      default:
+        return {};
+    }
+  };
+
+  const getVariantStyles = () => {
+    // If explicit colors are provided, use them
+    if (textColor && backgroundColor) {
+      return {
+        backgroundColor,
+        color: textColor,
+      };
+    }
+    
+    // If a single color is provided, use it for text and 20% opacity for background
+    if (color) {
+      return {
+        backgroundColor: `color-mix(in srgb, ${color} 20%, transparent)`,
+        color: color,
+      };
+    }
+    
+    // If variant is colored but no color provided, use default colored styling
+    if (variant === 'colored') {
+      return {
+        backgroundColor: `color-mix(in srgb, var(--category-color-default) 15%, transparent)`,
+        color: 'var(--category-color-default)',
+        borderColor: `color-mix(in srgb, var(--category-color-default) 30%, transparent)`,
+        border: '1px solid',
+      };
+    }
+    
+    // Default styling
+    return {
+      background: 'var(--tool-header-badge-bg)',
+      color: 'var(--tool-header-badge-text)',
+    };
+  };
+
+  return (
+    <Box
+      className={className}
+      style={{
+        ...getSizeStyles(),
+        ...getVariantStyles(),
+        ...style,
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default Badge;

frontend/src/components/shared/FilePickerModal.tsx

@@ -125,6 +125,7 @@ const FilePickerModal = ({
       title={t("fileUpload.selectFromStorage", "Select Files from Storage")}
       size="lg"
       scrollAreaComponent={ScrollArea.Autosize}
+      zIndex={1100}
     >
       <Stack gap="md">
         {storedFiles.length === 0 ? (

frontend/src/components/shared/HoverActionMenu.module.css

@@ -0,0 +1,28 @@
+/* Base Hover Menu */
+.hoverMenu {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  background: var(--bg-toolbar);
+  border: 1px solid var(--border-default);
+  padding: 6px 12px;
+  border-radius: 20px;
+  box-shadow: var(--shadow-md);
+  z-index: 30;
+  white-space: nowrap;
+  pointer-events: auto;
+  transition: opacity 0.2s ease-in-out;
+}
+
+/* Inside positioning (Page Editor style) - within container */
+.inside {
+  bottom: 8px;
+}
+
+/* Outside positioning (File Editor style) - below container */
+.outside {
+  bottom: -8px;
+}

frontend/src/components/shared/HoverActionMenu.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { ActionIcon, Tooltip } from '@mantine/core';
+import styles from './HoverActionMenu.module.css';
+
+export interface HoverAction {
+  id: string;
+  icon: React.ReactNode;
+  label: string;
+  onClick: (e: React.MouseEvent) => void;
+  disabled?: boolean;
+  color?: string;
+  hidden?: boolean;
+}
+
+interface HoverActionMenuProps {
+  show: boolean;
+  actions: HoverAction[];
+  position?: 'inside' | 'outside';
+  className?: string;
+}
+
+const HoverActionMenu: React.FC<HoverActionMenuProps> = ({
+  show,
+  actions,
+  position = 'inside',
+  className = ''
+}) => {
+  const visibleActions = actions.filter(action => !action.hidden);
+
+  if (visibleActions.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`${styles.hoverMenu} ${position === 'outside' ? styles.outside : styles.inside} ${className}`}
+      style={{ opacity: show ? 1 : 0 }}
+      onMouseDown={(e) => e.stopPropagation()}
+      onMouseUp={(e) => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {visibleActions.map((action) => (
+        <Tooltip key={action.id} label={action.label}>
+          <ActionIcon
+            size="md"
+            variant="subtle"
+            style={{ color: action.color || 'var(--mantine-color-dimmed)' }}
+            disabled={action.disabled}
+            onClick={action.onClick}
+            c={action.color}
+          >
+            {action.icon}
+          </ActionIcon>
+        </Tooltip>
+      ))}
+    </div>
+  );
+};
+
+export default HoverActionMenu;

frontend/src/components/shared/LanguageSelector.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { supportedLanguages } from '../../i18n';
 import LocalIcon from './LocalIcon';
 import styles from './LanguageSelector.module.css';
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '../../styles/zIndex';
 
 // Types
 interface LanguageSelectorProps {
@@ -209,6 +210,7 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({ position = 'bottom-
         width={600}
         position={position}
         offset={offset}
+        zIndex={Z_INDEX_OVER_FULLSCREEN_SURFACE}
         transitionProps={{
           transition: 'scale-y',
           duration: 200,
@@ -264,6 +266,7 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({ position = 'bottom-
             boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
             backgroundColor: 'light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))',
             border: 'light-dark(1px solid var(--mantine-color-gray-3), 1px solid var(--mantine-color-dark-4))',
+            zIndex: Z_INDEX_OVER_FULLSCREEN_SURFACE,
           }}
         >
           <ScrollArea h={190} type="scroll">

frontend/src/components/shared/QuickAccessBar.tsx

@@ -24,7 +24,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
   const { t } = useTranslation();
   const { isRainbowMode } = useRainbowThemeContext();
   const { openFilesModal, isFilesModalOpen } = useFilesModalContext();
-  const { handleReaderToggle, handleBackToTools, handleToolSelect, selectedToolKey, leftPanelView, toolRegistry, readerMode, resetTool } = useToolWorkflow();
+  const { handleReaderToggle, handleToolSelect, selectedToolKey, leftPanelView, toolRegistry, readerMode, resetTool } = useToolWorkflow();
   const { getToolNavigation } = useSidebarNavigation();
   const { config } = useAppConfig();
   const [configModalOpen, setConfigModalOpen] = useState(false);
@@ -68,7 +68,8 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
             onClick: (e: React.MouseEvent) => handleClick(e),
             'aria-label': config.name
           } : {
-            onClick: () => handleClick()
+            onClick: () => handleClick(),
+            'aria-label': config.name
           })}
           size={isActive ? (config.size || 'lg') : 'lg'}
           variant="subtle"
@@ -98,12 +99,10 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
       type: 'navigation',
       onClick: () => {
         setActiveButton('read');
-        handleBackToTools();
         handleReaderToggle();
       }
     },
-    // TODO: Add sign
-    //{
+    // {
     //  id: 'sign',
     //  name: t("quickAccess.sign", "Sign"),
     //  icon: <LocalIcon icon="signature-rounded" width="1.25rem" height="1.25rem" />,
@@ -114,7 +113,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
     //    setActiveButton('sign');
     //    handleToolSelect('sign');
     //  }
-    //},
+    // },
     {
       id: 'automate',
       name: t("quickAccess.automate", "Automate"),
@@ -230,6 +229,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
                     onClick={config.onClick}
                     style={getNavButtonStyle(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView)}
                     className={isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView) ? 'activeIconScale' : ''}
+                    aria-label={config.name}
                     data-testid={`${config.id}-button`}
                   >
                     <span className="iconContainer">

frontend/src/components/shared/RainbowThemeProvider.tsx

@@ -6,9 +6,10 @@ import rainbowStyles from '../../styles/rainbow.module.css';
 import { ToastProvider } from '../toast';
 import ToastRenderer from '../toast/ToastRenderer';
 import { ToastPortalBinder } from '../toast';
+import type { ThemeMode } from '../../constants/theme';
 
 interface RainbowThemeContextType {
-  themeMode: 'light' | 'dark' | 'rainbow';
+  themeMode: ThemeMode;
   isRainbowMode: boolean;
   isToggleDisabled: boolean;
   toggleTheme: () => void;

frontend/src/components/shared/RightRail.tsx

@@ -1,447 +1,193 @@
-import React, { useCallback, useState, useEffect, useMemo } from 'react';
-import { ActionIcon, Divider, Popover } from '@mantine/core';
-import LocalIcon from './LocalIcon';
+import React, { useCallback, useMemo } from 'react';
+import { ActionIcon, Divider } from '@mantine/core';
 import './rightRail/RightRail.css';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
 import { useRightRail } from '../../contexts/RightRailContext';
-import { useFileState, useFileSelection, useFileManagement, useFileContext } from '../../contexts/FileContext';
+import { useFileState, useFileSelection } from '../../contexts/FileContext';
 import { useNavigationState } from '../../contexts/NavigationContext';
 import { useTranslation } from 'react-i18next';
 
 import LanguageSelector from '../shared/LanguageSelector';
 import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
 import { Tooltip } from '../shared/Tooltip';
-import BulkSelectionPanel from '../pageEditor/BulkSelectionPanel';
-import { SearchInterface } from '../viewer/SearchInterface';
 import { ViewerContext } from '../../contexts/ViewerContext';
 import { useSignature } from '../../contexts/SignatureContext';
-import ViewerAnnotationControls from './rightRail/ViewerAnnotationControls';
+import LocalIcon from './LocalIcon';
 
-import { parseSelection } from '../../utils/bulkselection/parseSelection';
+import { useSidebarContext } from '../../contexts/SidebarContext';
+import { RightRailButtonConfig, RightRailRenderContext, RightRailSection } from '../../types/rightRail';
 
+const SECTION_ORDER: RightRailSection[] = ['top', 'middle', 'bottom'];
+
+function renderWithTooltip(
+  node: React.ReactNode,
+  tooltip: React.ReactNode | undefined
+) {
+  if (!tooltip) return node;
+
+  const portalTarget = typeof document !== 'undefined' ? document.body : undefined;
+
+  return (
+    <Tooltip content={tooltip} position="left" offset={12} arrow portalTarget={portalTarget}>
+      <div className="right-rail-tooltip-wrapper">{node}</div>
+    </Tooltip>
+  );
+}
 
 export default function RightRail() {
+  const { sidebarRefs } = useSidebarContext();
   const { t } = useTranslation();
-  const [isPanning, setIsPanning] = useState(false);
-
-  // Viewer context for PDF controls - safely handle when not available
   const viewerContext = React.useContext(ViewerContext);
   const { toggleTheme } = useRainbowThemeContext();
-  const { buttons, actions } = useRightRail();
-  const topButtons = useMemo(() => buttons.filter(b => (b.section || 'top') === 'top' && (b.visible ?? true)), [buttons]);
+  const { buttons, actions, allButtonsDisabled } = useRightRail();
 
-  // Access PageEditor functions for page-editor-specific actions
-  const { pageEditorFunctions } = useToolWorkflow();
+  const { pageEditorFunctions, toolPanelMode, leftPanelView } = useToolWorkflow();
+  const disableForFullscreen = toolPanelMode === 'fullscreen' && leftPanelView === 'toolPicker';
 
-  // CSV input state for page selection
-  const [csvInput, setCsvInput] = useState<string>("");
-
-  // Navigation view
   const { workbench: currentView } = useNavigationState();
 
-  // File state and selection
-  const { state, selectors } = useFileState();
-  const { actions: fileActions } = useFileContext();
-  const { selectedFiles, selectedFileIds, setSelectedFiles } = useFileSelection();
-  const { removeFiles } = useFileManagement();
-
-  // Signature context for checking if signatures have been applied
+  const { selectors } = useFileState();
+  const { selectedFiles, selectedFileIds } = useFileSelection();
   const { signaturesApplied } = useSignature();
 
   const activeFiles = selectors.getFiles();
-  const filesSignature = selectors.getFilesSignature();
-
-  // Compute selection state and total items
-  const getSelectionState = useCallback(() => {
-    if (currentView === 'fileEditor' || currentView === 'viewer') {
-      const totalItems = activeFiles.length;
-      const selectedCount = selectedFileIds.length;
-      return { totalItems, selectedCount };
-    }
-
-    if (currentView === 'pageEditor') {
-      // Use PageEditor's own state
-      const totalItems = pageEditorFunctions?.totalPages || 0;
-      const selectedCount = pageEditorFunctions?.selectedPageIds?.length || 0;
-      return { totalItems, selectedCount };
-    }
-
-    return { totalItems: 0, selectedCount: 0 };
-  }, [currentView, activeFiles, selectedFileIds, pageEditorFunctions]);
-
-  const { totalItems, selectedCount } = getSelectionState();
-
-  // Get export state for viewer mode
+  const pageEditorTotalPages = pageEditorFunctions?.totalPages ?? 0;
+  const pageEditorSelectedCount = pageEditorFunctions?.selectedPageIds?.length ?? 0;
   const exportState = viewerContext?.getExportState?.();
 
-  const handleSelectAll = useCallback(() => {
-    if (currentView === 'fileEditor' || currentView === 'viewer') {
-      // Select all file IDs
-      const allIds = state.files.ids;
-      setSelectedFiles(allIds);
-      // Clear any previous error flags when selecting all
-      try { fileActions.clearAllFileErrors(); } catch (_e) { void _e; }
-      return;
-    }
+  const totalItems = useMemo(() => {
+    if (currentView === 'pageEditor') return pageEditorTotalPages;
+    return activeFiles.length;
+  }, [currentView, pageEditorTotalPages, activeFiles.length]);
 
+  const selectedCount = useMemo(() => {
     if (currentView === 'pageEditor') {
-      // Use PageEditor's select all function
-      pageEditorFunctions?.handleSelectAll?.();
+      return pageEditorSelectedCount;
     }
-  }, [currentView, state.files.ids, setSelectedFiles, pageEditorFunctions]);
+    return selectedFileIds.length;
+  }, [currentView, pageEditorSelectedCount, selectedFileIds.length]);
 
-  const handleDeselectAll = useCallback(() => {
-    if (currentView === 'fileEditor' || currentView === 'viewer') {
-      setSelectedFiles([]);
-      // Clear any previous error flags when deselecting all
-      try { fileActions.clearAllFileErrors(); } catch (_e) { void _e; }
-      return;
-    }
-    if (currentView === 'pageEditor') {
-      // Use PageEditor's deselect all function
-      pageEditorFunctions?.handleDeselectAll?.();
-    }
-  }, [currentView, setSelectedFiles, pageEditorFunctions]);
+  const sectionsWithButtons = useMemo(() => {
+    return SECTION_ORDER
+      .map(section => {
+        const sectionButtons = buttons.filter(btn => (btn.section ?? 'top') === section && (btn.visible ?? true));
+        return { section, buttons: sectionButtons };
+      })
+      .filter(entry => entry.buttons.length > 0);
+  }, [buttons]);
+
+  const renderButton = useCallback(
+    (btn: RightRailButtonConfig) => {
+      const action = actions[btn.id];
+      const disabled = Boolean(btn.disabled || allButtonsDisabled || disableForFullscreen);
+
+      const triggerAction = () => {
+        if (!disabled) action?.();
+      };
+
+      if (btn.render) {
+        const context: RightRailRenderContext = {
+          id: btn.id,
+          disabled,
+          allButtonsDisabled,
+          action,
+          triggerAction,
+        };
+        return btn.render(context) ?? null;
+      }
+
+      if (!btn.icon) return null;
+
+      const ariaLabel =
+        btn.ariaLabel || (typeof btn.tooltip === 'string' ? (btn.tooltip as string) : undefined);
+      const className = ['right-rail-icon', btn.className].filter(Boolean).join(' ');
+      const buttonNode = (
+        <ActionIcon
+          variant="subtle"
+          radius="md"
+          className={className}
+          onClick={triggerAction}
+          disabled={disabled}
+          aria-label={ariaLabel}
+        >
+          {btn.icon}
+        </ActionIcon>
+      );
+
+      return renderWithTooltip(buttonNode, btn.tooltip);
+    },
+    [actions, allButtonsDisabled, disableForFullscreen]
+  );
 
   const handleExportAll = useCallback(async () => {
     if (currentView === 'viewer') {
-      // Check if signatures have been applied
       if (!signaturesApplied) {
         alert('You have unapplied signatures. Please use "Apply Signatures" first before exporting.');
         return;
       }
-
-      // Use EmbedPDF export functionality for viewer mode
       viewerContext?.exportActions?.download();
-    } else if (currentView === 'fileEditor') {
-      // Download selected files (or all if none selected)
-      const filesToDownload = selectedFiles.length > 0 ? selectedFiles : activeFiles;
-
-      filesToDownload.forEach(file => {
-        const link = document.createElement('a');
-        link.href = URL.createObjectURL(file);
-        link.download = file.name;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        URL.revokeObjectURL(link.href);
-      });
-    } else if (currentView === 'pageEditor') {
-      // Export all pages (not just selected)
-      pageEditorFunctions?.onExportAll?.();
+      return;
     }
-  }, [currentView, activeFiles, selectedFiles, pageEditorFunctions, viewerContext, signaturesApplied, selectors, fileActions]);
 
-  const handleCloseSelected = useCallback(() => {
-    if (currentView !== 'fileEditor') return;
-    if (selectedFileIds.length === 0) return;
-
-    // Close only selected files (do not delete from storage)
-    removeFiles(selectedFileIds, false);
-
-    // Clear selection after closing
-    setSelectedFiles([]);
-  }, [currentView, selectedFileIds, removeFiles, setSelectedFiles]);
-
-  const updatePagesFromCSV = useCallback((override?: string) => {
-    const maxPages = pageEditorFunctions?.totalPages || 0;
-    const normalized = parseSelection(override ?? csvInput, maxPages);
-    pageEditorFunctions?.handleSetSelectedPages?.(normalized);
-  }, [csvInput, pageEditorFunctions]);
-
-  // Do not overwrite user's expression input when selection changes.
-
-  // Clear CSV input when files change (use stable signature to avoid ref churn)
-  useEffect(() => {
-    setCsvInput("");
-  }, [filesSignature]);
-
-  // Mount/visibility for page-editor-only buttons to allow exit animation, then remove to avoid flex gap
-  const [pageControlsMounted, setPageControlsMounted] = useState<boolean>(currentView === 'pageEditor');
-  const [pageControlsVisible, setPageControlsVisible] = useState<boolean>(currentView === 'pageEditor');
-
-  useEffect(() => {
     if (currentView === 'pageEditor') {
-      // Mount and show
-      setPageControlsMounted(true);
-      // Next tick to ensure transition applies
-      requestAnimationFrame(() => setPageControlsVisible(true));
-    } else {
-      // Start exit animation
-      setPageControlsVisible(false);
-      // After transition, unmount to remove flex gap
-      const timer = setTimeout(() => setPageControlsMounted(false), 240);
-      return () => clearTimeout(timer);
+      pageEditorFunctions?.onExportAll?.();
+      return;
     }
-  }, [currentView]);
+
+    const filesToDownload = selectedFiles.length > 0 ? selectedFiles : activeFiles;
+    filesToDownload.forEach(file => {
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(file);
+      link.download = file.name;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(link.href);
+    });
+  }, [
+    currentView,
+    selectedFiles,
+    activeFiles,
+    pageEditorFunctions,
+    viewerContext,
+    signaturesApplied
+  ]);
+
+  const downloadTooltip = useMemo(() => {
+    if (currentView === 'pageEditor') {
+      return t('rightRail.exportAll', 'Export PDF');
+    }
+    if (selectedCount > 0) {
+      return t('rightRail.downloadSelected', 'Download Selected Files');
+    }
+    return t('rightRail.downloadAll', 'Download All');
+  }, [currentView, selectedCount, t]);
 
   return (
-    <div className="right-rail">
+    <div ref={sidebarRefs.rightRailRef} className="right-rail" data-sidebar="right-rail">
       <div className="right-rail-inner">
-        {topButtons.length > 0 && (
-          <>
+        {sectionsWithButtons.map(({ section, buttons: sectionButtons }) => (
+          <React.Fragment key={section}>
             <div className="right-rail-section">
-              {topButtons.map(btn => (
-                <Tooltip key={btn.id} content={btn.tooltip} position="left" offset={12} arrow>
-                  <ActionIcon
-                    variant="subtle"
-                    radius="md"
-                    className="right-rail-icon"
-                    onClick={() => actions[btn.id]?.()}
-                    disabled={btn.disabled}
+              {sectionButtons.map((btn, index) => {
+                const content = renderButton(btn);
+                if (!content) return null;
+                return (
+                  <div
+                    key={btn.id}
+                    className="right-rail-button-wrapper"
+                    style={{ animationDelay: `${index * 50}ms` }}
                   >
-                    {btn.icon}
-                  </ActionIcon>
-                </Tooltip>
-              ))}
+                    {content}
+                  </div>
+                );
+              })}
             </div>
             <Divider className="right-rail-divider" />
-          </>
-        )}
-
-        {/* Group: PDF Viewer Controls - visible only in viewer mode */}
-        <div
-          className={`right-rail-slot ${currentView === 'viewer' ? 'visible right-rail-enter' : 'right-rail-exit'}`}
-          aria-hidden={currentView !== 'viewer'}
-        >
-          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem' }}>
-            {/* Search */}
-            <Tooltip content={t('rightRail.search', 'Search PDF')} position="left" offset={12} arrow>
-              <Popover position="left" withArrow shadow="md" offset={8}>
-                <Popover.Target>
-                  <div style={{ display: 'inline-flex' }}>
-                    <ActionIcon
-                      variant="subtle"
-                      radius="md"
-                      className="right-rail-icon"
-                      disabled={currentView !== 'viewer'}
-                      aria-label={typeof t === 'function' ? t('rightRail.search', 'Search PDF') : 'Search PDF'}
-                    >
-                      <LocalIcon icon="search" width="1.5rem" height="1.5rem" />
-                    </ActionIcon>
-                  </div>
-                </Popover.Target>
-                <Popover.Dropdown>
-                  <div style={{ minWidth: '20rem' }}>
-                    <SearchInterface
-                      visible={true}
-                      onClose={() => {}}
-                    />
-                  </div>
-                </Popover.Dropdown>
-              </Popover>
-            </Tooltip>
-
-
-            {/* Pan Mode */}
-            <Tooltip content={t('rightRail.panMode', 'Pan Mode')} position="left" offset={12} arrow>
-              <ActionIcon
-                variant={isPanning ? "filled" : "subtle"}
-                color={isPanning ? "blue" : undefined}
-                radius="md"
-                className="right-rail-icon"
-                onClick={() => {
-                  viewerContext?.panActions.togglePan();
-                  setIsPanning(!isPanning);
-                }}
-                disabled={currentView !== 'viewer'}
-              >
-                <LocalIcon icon="pan-tool-rounded" width="1.5rem" height="1.5rem" />
-              </ActionIcon>
-            </Tooltip>
-
-            {/* Rotate Left */}
-            <Tooltip content={t('rightRail.rotateLeft', 'Rotate Left')} position="left" offset={12} arrow>
-              <ActionIcon
-                variant="subtle"
-                radius="md"
-                className="right-rail-icon"
-                onClick={() => {
-                  viewerContext?.rotationActions.rotateBackward();
-                }}
-                disabled={currentView !== 'viewer'}
-              >
-                <LocalIcon icon="rotate-left" width="1.5rem" height="1.5rem" />
-              </ActionIcon>
-            </Tooltip>
-
-            {/* Rotate Right */}
-            <Tooltip content={t('rightRail.rotateRight', 'Rotate Right')} position="left" offset={12} arrow>
-              <ActionIcon
-                variant="subtle"
-                radius="md"
-                className="right-rail-icon"
-                onClick={() => {
-                  viewerContext?.rotationActions.rotateForward();
-                }}
-                disabled={currentView !== 'viewer'}
-              >
-                <LocalIcon icon="rotate-right" width="1.5rem" height="1.5rem" />
-              </ActionIcon>
-            </Tooltip>
-
-            {/* Sidebar Toggle */}
-            <Tooltip content={t('rightRail.toggleSidebar', 'Toggle Sidebar')} position="left" offset={12} arrow>
-              <ActionIcon
-                variant="subtle"
-                radius="md"
-                className="right-rail-icon"
-                onClick={() => {
-                  viewerContext?.toggleThumbnailSidebar();
-                }}
-                disabled={currentView !== 'viewer'}
-              >
-                <LocalIcon icon="view-list" width="1.5rem" height="1.5rem" />
-              </ActionIcon>
-            </Tooltip>
-
-            {/* Annotation Controls */}
-            <ViewerAnnotationControls currentView={currentView} />
-          </div>
-          <Divider className="right-rail-divider" />
-        </div>
-
-        {/* Group: Selection controls + Close, animate as one unit when entering/leaving viewer */}
-        <div
-          className={`right-rail-slot ${currentView !== 'viewer' ? 'visible right-rail-enter' : 'right-rail-exit'}`}
-          aria-hidden={currentView === 'viewer'}
-        >
-          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem' }}>
-            {/* Select All Button */}
-            <Tooltip content={t('rightRail.selectAll', 'Select All')} position="left" offset={12} arrow>
-              <div>
-                <ActionIcon
-                  variant="subtle"
-                  radius="md"
-                  className="right-rail-icon"
-                  onClick={handleSelectAll}
-                  disabled={currentView === 'viewer' || totalItems === 0 || selectedCount === totalItems}
-                >
-                  <LocalIcon icon="select-all" width="1.5rem" height="1.5rem" />
-                </ActionIcon>
-              </div>
-            </Tooltip>
-
-            {/* Deselect All Button */}
-            <Tooltip content={t('rightRail.deselectAll', 'Deselect All')} position="left" offset={12} arrow>
-              <div>
-                <ActionIcon
-                  variant="subtle"
-                  radius="md"
-                  className="right-rail-icon"
-                  onClick={handleDeselectAll}
-                  disabled={currentView === 'viewer' || selectedCount === 0}
-                >
-                  <LocalIcon icon="crop-square-outline" width="1.5rem" height="1.5rem" />
-                </ActionIcon>
-              </div>
-            </Tooltip>
-
-            {/* Select by Numbers - page editor only, with animated presence */}
-            {pageControlsMounted && (
-                                  <Tooltip content={t('rightRail.selectByNumber', 'Select by Page Numbers')} position="left" offset={12} arrow>
-
-              <div className={`right-rail-fade ${pageControlsVisible ? 'enter' : 'exit'}`} aria-hidden={!pageControlsVisible}>
-                <Popover position="left" withArrow shadow="md" offset={8}>
-                  <Popover.Target>
-                      <div style={{ display: 'inline-flex' }}>
-                        <ActionIcon
-                          variant="subtle"
-                          radius="md"
-                          className="right-rail-icon"
-                          disabled={!pageControlsVisible || totalItems === 0}
-                          aria-label={typeof t === 'function' ? t('rightRail.selectByNumber', 'Select by Page Numbers') : 'Select by Page Numbers'}
-                        >
-                          <LocalIcon icon="pin-end" width="1.5rem" height="1.5rem" />
-                        </ActionIcon>
-                      </div>
-                  </Popover.Target>
-                  <Popover.Dropdown>
-
-                    <div style={{ minWidth: '24rem', maxWidth: '32rem' }}>
-                      <BulkSelectionPanel
-                        csvInput={csvInput}
-                        setCsvInput={setCsvInput}
-                        selectedPageIds={Array.isArray(pageEditorFunctions?.selectedPageIds) ? pageEditorFunctions.selectedPageIds : []}
-                        displayDocument={pageEditorFunctions?.displayDocument}
-                        onUpdatePagesFromCSV={updatePagesFromCSV}
-                      />
-                    </div>
-                  </Popover.Dropdown>
-                </Popover>
-              </div>
-              </Tooltip>
-
-            )}
-
-            {/* Delete Selected Pages - page editor only, with animated presence */}
-            {pageControlsMounted && (
-                              <Tooltip content={t('rightRail.deleteSelected', 'Delete Selected Pages')} position="left" offset={12} arrow>
-
-              <div className={`right-rail-fade ${pageControlsVisible ? 'enter' : 'exit'}`} aria-hidden={!pageControlsVisible}>
-                  <div style={{ display: 'inline-flex' }}>
-                    <ActionIcon
-                      variant="subtle"
-                      radius="md"
-                      className="right-rail-icon"
-                      onClick={() => { pageEditorFunctions?.handleDelete?.(); }}
-                      disabled={!pageControlsVisible || (pageEditorFunctions?.selectedPageIds?.length || 0) === 0}
-                      aria-label={typeof t === 'function' ? t('rightRail.deleteSelected', 'Delete Selected Pages') : 'Delete Selected Pages'}
-                    >
-                      <LocalIcon icon="delete-outline-rounded" width="1.5rem" height="1.5rem" />
-                    </ActionIcon>
-                  </div>
-              </div>
-              </Tooltip>
-
-            )}
-
-            {/* Export Selected Pages - page editor only */}
-            {pageControlsMounted && (
-              <Tooltip content={t('rightRail.exportSelected', 'Export Selected Pages')} position="left" offset={12} arrow>
-                <div className={`right-rail-fade ${pageControlsVisible ? 'enter' : 'exit'}`} aria-hidden={!pageControlsVisible}>
-                  <div style={{ display: 'inline-flex' }}>
-                    <ActionIcon
-                      variant="subtle"
-                      radius="md"
-                      className="right-rail-icon"
-                      onClick={() => { pageEditorFunctions?.onExportSelected?.(); }}
-                      disabled={!pageControlsVisible || (pageEditorFunctions?.selectedPageIds?.length || 0) === 0 || pageEditorFunctions?.exportLoading}
-                      aria-label={typeof t === 'function' ? t('rightRail.exportSelected', 'Export Selected Pages') : 'Export Selected Pages'}
-                    >
-                      <LocalIcon icon="download" width="1.5rem" height="1.5rem" />
-                    </ActionIcon>
-                  </div>
-                </div>
-              </Tooltip>
-            )}
-
-            {/* Close (File Editor: Close Selected | Page Editor: Close PDF) */}
-            <Tooltip content={currentView === 'pageEditor' ? t('rightRail.closePdf', 'Close PDF') : t('rightRail.closeSelected', 'Close Selected Files')} position="left" offset={12} arrow>
-              <div>
-                <ActionIcon
-                  variant="subtle"
-                  radius="md"
-                  className="right-rail-icon"
-                  onClick={currentView === 'pageEditor' ? () => pageEditorFunctions?.closePdf?.() : handleCloseSelected}
-                  disabled={
-                    currentView === 'viewer' ||
-                    (currentView === 'fileEditor' && selectedCount === 0) ||
-                    (currentView === 'pageEditor' && (activeFiles.length === 0 || !pageEditorFunctions?.closePdf))
-                  }
-                >
-                  <LocalIcon icon="close-rounded" width="1.5rem" height="1.5rem" />
-                </ActionIcon>
-              </div>
-            </Tooltip>
-          </div>
-
-          <Divider className="right-rail-divider" />
-        </div>
-
-        {/* Theme toggle and Language dropdown */}
+          </React.Fragment>
+        ))}
         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem' }}>
-          <Tooltip content={t('rightRail.toggleTheme', 'Toggle Theme')} position="left" offset={12} arrow>
+          {renderWithTooltip(
             <ActionIcon
               variant="subtle"
               radius="md"
@@ -449,30 +195,32 @@ export default function RightRail() {
               onClick={toggleTheme}
             >
               <LocalIcon icon="contrast" width="1.5rem" height="1.5rem" />
-            </ActionIcon>
-          </Tooltip>
+            </ActionIcon>,
+            t('rightRail.toggleTheme', 'Toggle Theme')
+          )}
 
-          <LanguageSelector position="left-start" offset={6} compact />
+          {renderWithTooltip(
+            <div style={{ display: 'inline-flex' }}>
+              <LanguageSelector position="left-start" offset={6} compact />
+            </div>,
+            t('rightRail.language', 'Language')
+          )}
 
-          <Tooltip content={
-            currentView === 'pageEditor'
-              ? t('rightRail.exportAll', 'Export PDF')
-              : (selectedCount > 0 ? t('rightRail.downloadSelected', 'Download Selected Files') : t('rightRail.downloadAll', 'Download All'))
-          } position="left" offset={12} arrow>
-            <div>
-              <ActionIcon
-                variant="subtle"
-                radius="md"
-                className="right-rail-icon"
-                onClick={handleExportAll}
-                disabled={
-                  currentView === 'viewer' ? !exportState?.canExport : totalItems === 0
-                }
-              >
-                <LocalIcon icon="download" width="1.5rem" height="1.5rem" />
-              </ActionIcon>
-            </div>
-          </Tooltip>
+          {renderWithTooltip(
+            <ActionIcon
+              variant="subtle"
+              radius="md"
+              className="right-rail-icon"
+              onClick={handleExportAll}
+              disabled={
+                disableForFullscreen ||
+                (currentView === 'viewer' ? !exportState?.canExport : totalItems === 0 || allButtonsDisabled)
+              }
+            >
+              <LocalIcon icon="download" width="1.5rem" height="1.5rem" />
+            </ActionIcon>,
+            downloadTooltip
+          )}
         </div>
 
         <div className="right-rail-spacer" />
@@ -480,5 +228,3 @@ export default function RightRail() {
     </div>
   );
 }
-
-

frontend/src/components/shared/Tooltip.tsx

@@ -8,6 +8,7 @@ import { TooltipContent } from './tooltip/TooltipContent';
 import { useSidebarContext } from '../../contexts/SidebarContext';
 import { BASE_PATH } from '../../constants/app';
 import styles from './tooltip/Tooltip.module.css';
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '../../styles/zIndex';
 
 export interface TooltipProps {
   sidebarTooltip?: boolean;
@@ -28,6 +29,10 @@ export interface TooltipProps {
   pinOnClick?: boolean;
   /** If true, clicking outside also closes when not pinned (default true) */
   closeOnOutside?: boolean;
+  /** If true, tooltip interaction is disabled entirely */
+  disabled?: boolean;
+  /** If false, tooltip will not open on focus (hover only) */
+  openOnFocus?: boolean;
 }
 
 export const Tooltip: React.FC<TooltipProps> = ({
@@ -48,6 +53,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
   containerStyle = {},
   pinOnClick = false,
   closeOnOutside = true,
+  disabled = false,
+  openOnFocus = true,
 }) => {
   const [internalOpen, setInternalOpen] = useState(false);
   const [isPinned, setIsPinned] = useState(false);
@@ -68,7 +75,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
   const sidebarContext = sidebarTooltip ? useSidebarContext() : null;
 
   const isControlled = controlledOpen !== undefined;
-  const open = isControlled ? !!controlledOpen : internalOpen;
+  const open = (isControlled ? !!controlledOpen : internalOpen) && !disabled;
 
   const setOpen = useCallback(
     (newOpen: boolean) => {
@@ -148,15 +155,16 @@ export const Tooltip: React.FC<TooltipProps> = ({
   // === Trigger handlers ===
   const openWithDelay = useCallback(() => {
     clearTimers();
+    if (disabled) return;
     openTimeoutRef.current = setTimeout(() => setOpen(true), Math.max(0, delay || 0));
-  }, [clearTimers, setOpen, delay]);
+  }, [clearTimers, setOpen, delay, disabled]);
 
   const handlePointerEnter = useCallback(
     (e: React.PointerEvent) => {
-      if (!isPinned) openWithDelay();
+      if (!isPinned && !disabled) openWithDelay();
       (children.props as any)?.onPointerEnter?.(e);
     },
-    [isPinned, openWithDelay, children.props]
+    [isPinned, openWithDelay, children.props, disabled]
   );
 
   const handlePointerLeave = useCallback(
@@ -219,10 +227,10 @@ export const Tooltip: React.FC<TooltipProps> = ({
   // Keyboard / focus accessibility
   const handleFocus = useCallback(
     (e: React.FocusEvent) => {
-      if (!isPinned) openWithDelay();
+      if (!isPinned && !disabled && openOnFocus) openWithDelay();
       (children.props as any)?.onFocus?.(e);
     },
-    [isPinned, openWithDelay, children.props]
+    [isPinned, openWithDelay, children.props, disabled, openOnFocus]
   );
 
   const handleBlur = useCallback(
@@ -291,7 +299,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
         left: coords.left,
         width: maxWidth !== undefined ? maxWidth : (sidebarTooltip ? '25rem' as const : undefined),
         minWidth,
-        zIndex: 9999,
+        zIndex: Z_INDEX_OVER_FULLSCREEN_SURFACE,
         visibility: positionReady ? 'visible' : 'hidden',
         opacity: positionReady ? 1 : 0,
         color: 'var(--text-primary)',
@@ -345,9 +353,13 @@ export const Tooltip: React.FC<TooltipProps> = ({
   return (
     <>
       {childWithHandlers}
-      {portalTarget && document.body.contains(portalTarget)
-        ? tooltipElement && createPortal(tooltipElement, portalTarget)
-        : tooltipElement}
+      {(() => {
+        const defaultTarget = typeof document !== 'undefined' ? document.body : null;
+        const target = portalTarget ?? defaultTarget;
+        return tooltipElement && target
+          ? createPortal(tooltipElement, target)
+          : tooltipElement;
+      })()}
     </>
   );
 };

frontend/src/components/shared/TopControls.tsx

@@ -5,13 +5,15 @@ import rainbowStyles from '../../styles/rainbow.module.css';
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import EditNoteIcon from "@mui/icons-material/EditNote";
 import FolderIcon from "@mui/icons-material/Folder";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
 import { WorkbenchType, isValidWorkbench } from '../../types/workbench';
-import { FileDropdownMenu } from './FileDropdownMenu';
 import { PageEditorFileDropdown } from './PageEditorFileDropdown';
 import { usePageEditor } from '../../contexts/PageEditorContext';
 import { useFileState } from '../../contexts/FileContext';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
 import { FileId } from '../../types/file';
+import type { CustomWorkbenchViewInstance } from '../../contexts/ToolWorkflowContext';
+import { FileDropdownMenu } from './FileDropdownMenu';
 
 // Local interface for PageEditor file display
 interface PageEditorFile {
@@ -30,9 +32,9 @@ interface PageEditorState {
   fileColorMap: Map<string, number>;
 }
 
-// View option styling
 const viewOptionStyle: React.CSSProperties = {
-  display: 'flex',
+  display: 'inline-flex',
+  flexDirection: 'row',
   alignItems: 'center',
   gap: '0.5rem',
   justifyContent: 'center',
@@ -42,31 +44,27 @@ const viewOptionStyle: React.CSSProperties = {
 const createViewOptions = (
   currentView: WorkbenchType,
   switchingTo: WorkbenchType | null,
-  activeFiles?: Array<{ fileId: string; name: string; versionNumber?: number }>,
-  currentFileIndex?: number,
+  activeFiles: Array<{ fileId: string; name: string; versionNumber?: number }>,
+  currentFileIndex: number,
   onFileSelect?: (index: number) => void,
-  pageEditorState?: PageEditorState
+  pageEditorState?: PageEditorState,
+  customViews?: CustomWorkbenchViewInstance[]
 ) => {
   // Viewer dropdown logic
+  const currentFile = activeFiles[currentFileIndex];
   const isInViewer = currentView === 'viewer';
-  const hasActiveFiles = activeFiles && activeFiles.length > 0;
-  const showViewerDropdown = isInViewer && hasActiveFiles;
-
-  let viewerDisplayName = 'Viewer';
-  if (isInViewer && hasActiveFiles && currentFileIndex !== undefined) {
-    const currentFile = activeFiles[currentFileIndex];
-    if (currentFile) {
-      viewerDisplayName = currentFile.name;
-    }
-  }
+  const fileName = currentFile?.name || '';
+  const viewerDisplayName = isInViewer && fileName ? fileName : 'Viewer';
+  const hasMultipleFiles = activeFiles.length > 1;
+  const showViewerDropdown = isInViewer && hasMultipleFiles;
 
   const viewerOption = {
     label: showViewerDropdown ? (
       <FileDropdownMenu
         displayName={viewerDisplayName}
-        activeFiles={activeFiles!}
-        currentFileIndex={currentFileIndex!}
-        onFileSelect={onFileSelect!}
+        activeFiles={activeFiles}
+        currentFileIndex={currentFileIndex}
+        onFileSelect={onFileSelect}
         switchingTo={switchingTo}
         viewOptionStyle={viewOptionStyle}
       />
@@ -77,7 +75,7 @@ const createViewOptions = (
         ) : (
           <VisibilityIcon fontSize="small" />
         )}
-        <span>{viewerDisplayName}</span>
+        <span className="ph-no-capture">{viewerDisplayName}</span>
       </div>
     ),
     value: "viewer",
@@ -136,17 +134,35 @@ const createViewOptions = (
     value: "fileEditor",
   };
 
-  // Build options array conditionally
-  return [
+  const baseOptions = [
     viewerOption,
     pageEditorOption,
     fileEditorOption,
   ];
+
+  const customOptions = (customViews ?? [])
+    .filter((view) => view.data != null)
+    .map((view) => ({
+      label: (
+        <div style={viewOptionStyle as React.CSSProperties}>
+          {switchingTo === view.workbenchId ? (
+            <Loader size="xs" />
+          ) : (
+            view.icon || <PictureAsPdfIcon fontSize="small" />
+          )}
+          <span>{view.label}</span>
+        </div>
+      ),
+      value: view.workbenchId,
+    }));
+
+  return [...baseOptions, ...customOptions];
 };
 
 interface TopControlsProps {
   currentView: WorkbenchType;
   setCurrentView: (view: WorkbenchType) => void;
+  customViews?: CustomWorkbenchViewInstance[];
   activeFiles?: Array<{ fileId: string; name: string; versionNumber?: number }>;
   currentFileIndex?: number;
   onFileSelect?: (index: number) => void;
@@ -155,6 +171,7 @@ interface TopControlsProps {
 const TopControls = ({
   currentView,
   setCurrentView,
+  customViews = [],
   activeFiles = [],
   currentFileIndex = 0,
   onFileSelect,
@@ -321,8 +338,9 @@ const TopControls = ({
     activeFiles,
     currentFileIndex,
     onFileSelect,
-    pageEditorState
-  ), [currentView, switchingTo, activeFiles, currentFileIndex, onFileSelect, pageEditorState]);
+    pageEditorState,
+    customViews
+  ), [currentView, switchingTo, activeFiles, currentFileIndex, onFileSelect, pageEditorState, customViews]);
 
   return (
     <div className="absolute left-0 w-full top-0 z-[100] pointer-events-none">

frontend/src/components/shared/config/configSections/GeneralSection.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { Paper, Stack, Switch, Text, Tooltip, NumberInput } from '@mantine/core';
+import { Paper, Stack, Switch, Text, Tooltip, NumberInput, SegmentedControl } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { usePreferences } from '../../../../contexts/PreferencesContext';
+import type { ToolPanelMode } from '../../../../constants/toolPanel';
 
 const DEFAULT_AUTO_UNZIP_FILE_LIMIT = 4;
 
@@ -26,6 +27,24 @@ const GeneralSection: React.FC = () => {
 
       <Paper withBorder p="md" radius="md">
         <Stack gap="md">
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <div>
+              <Text fw={500} size="sm">
+                {t('settings.general.defaultToolPickerMode', 'Default tool picker mode')}
+              </Text>
+              <Text size="xs" c="dimmed" mt={4}>
+                {t('settings.general.defaultToolPickerModeDescription', 'Choose whether the tool picker opens in fullscreen or sidebar by default')}
+              </Text>
+            </div>
+            <SegmentedControl
+              value={preferences.defaultToolPanelMode}
+              onChange={(val: string) => updatePreference('defaultToolPanelMode', val as ToolPanelMode)}
+              data={[
+                { label: t('settings.general.mode.sidebar', 'Sidebar'), value: 'sidebar' },
+                { label: t('settings.general.mode.fullscreen', 'Fullscreen'), value: 'fullscreen' },
+              ]}
+            />
+          </div>
           <Tooltip
             label={t('settings.general.autoUnzipTooltip', 'Automatically extract ZIP files returned from API operations. Disable to keep ZIP files intact. This does not affect automation workflows.')}
             multiline

frontend/src/components/shared/config/configSections/HotkeysSection.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Alert, Badge, Box, Button, Divider, Group, Paper, Stack, Text } from '@mantine/core';
+import { Alert, Badge, Box, Button, Divider, Group, Paper, Stack, Text, TextInput } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useToolWorkflow } from '../../../../contexts/ToolWorkflowContext';
 import { useHotkeys } from '../../../../contexts/HotkeyContext';
+import { ToolId } from '../../../../types/toolId';
 import HotkeyDisplay from '../../../hotkeys/HotkeyDisplay';
 import { bindingEquals, eventToBinding, HotkeyBinding } from '../../../../utils/hotkeys';
-import { ToolId } from 'src/types/toolId';
 import { ToolRegistryEntry } from 'src/data/toolsTaxonomy';
 
 const rowStyle: React.CSSProperties = {
@@ -28,9 +28,21 @@ const HotkeysSection: React.FC = () => {
   const { hotkeys, defaults, updateHotkey, resetHotkey, pauseHotkeys, resumeHotkeys, getDisplayParts, isMac } = useHotkeys();
   const [editingTool, setEditingTool] = useState<ToolId | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState<string>('');
 
   const tools = useMemo(() => Object.entries(toolRegistry) as [ToolId, ToolRegistryEntry][], [toolRegistry]);
 
+  const filteredTools = useMemo(() => {
+    if (!searchQuery.trim()) return tools;
+    
+    const query = searchQuery.toLowerCase();
+    return tools.filter(([toolId, tool]) => 
+      tool.name.toLowerCase().includes(query) ||
+      tool.description.toLowerCase().includes(query) ||
+      toolId.toLowerCase().includes(query)
+    );
+  }, [tools, searchQuery]);
+
   useEffect(() => {
     if (!editingTool) {
       return;
@@ -47,15 +59,17 @@ const HotkeysSection: React.FC = () => {
     }
 
     const handleKeyDown = (event: KeyboardEvent) => {
-      event.preventDefault();
-      event.stopPropagation();
-
       if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
         setEditingTool(null);
         setError(null);
         return;
       }
 
+      event.preventDefault();
+      event.stopPropagation();
+
       const binding = eventToBinding(event as KeyboardEvent);
       if (!binding) {
         const osKey = isMac ? 'mac' : 'windows';
@@ -71,7 +85,10 @@ const HotkeysSection: React.FC = () => {
       ));
 
       if (conflictEntry) {
-        const conflictTool = toolRegistry[conflictEntry[0]]?.name ?? conflictEntry[0];
+        const conflictKey = conflictEntry[0];
+        const conflictTool = (conflictKey in toolRegistry)
+          ? toolRegistry[conflictKey as ToolId]?.name
+          : conflictKey;
         setError(t('settings.hotkeys.errorConflict', 'Shortcut already used by {{tool}}.', { tool: conflictTool }));
         return;
       }
@@ -101,9 +118,22 @@ const HotkeysSection: React.FC = () => {
         </Text>
       </div>
 
+      <TextInput
+        placeholder={t('settings.hotkeys.searchPlaceholder', 'Search tools...')}
+        value={searchQuery}
+        onChange={(event) => setSearchQuery(event.currentTarget.value)}
+        size="md"
+        radius="md"
+      />
+
       <Paper withBorder p="md" radius="md">
         <Stack gap="md">
-          {tools.map(([toolId, tool], index) => {
+          {filteredTools.length === 0 ? (
+            <Text c="dimmed" ta="center" py="xl">
+              {t('toolPicker.noToolsFound', 'No tools found')}
+            </Text>
+          ) : (
+            filteredTools.map(([toolId, tool], index) => {
             const currentBinding = hotkeys[toolId];
             const defaultBinding = defaults[toolId];
             const isEditing = editingTool === toolId;
@@ -160,10 +190,11 @@ const HotkeysSection: React.FC = () => {
                   )}
                 </Box>
 
-                {index < tools.length - 1 && <Divider />}
+                {index < filteredTools.length - 1 && <Divider />}
               </React.Fragment>
             );
-          })}
+          })
+          )}
         </Stack>
       </Paper>
     </Stack>

frontend/src/components/shared/rightRail/RightRail.README.md

@@ -84,14 +84,48 @@ useRightRailButtons([
 ```typescript
 interface RightRailButtonWithAction {
   id: string;                    // Unique identifier
-  icon: React.ReactNode;         // Icon component
-  tooltip: string;               // Hover tooltip
+  icon?: React.ReactNode;        // Icon component (omit when using render)
+  tooltip?: React.ReactNode;     // Hover tooltip / description
   section?: 'top' | 'middle' | 'bottom'; // Section (default: 'top')
   order?: number;                // Sort order (default: 0)
   disabled?: boolean;            // Disabled state (default: false)
   visible?: boolean;             // Visibility (default: true)
-  onClick: () => void;           // Click handler
+  render?: (ctx: RightRailRenderContext) => React.ReactNode; // Custom renderer
+  onClick?: () => void;          // Click handler (optional if using render)
 }
+
+interface RightRailRenderContext {
+  id: string;
+  disabled: boolean;
+  allButtonsDisabled: boolean;
+  action?: () => void;
+  triggerAction: () => void;
+}
+```
+
+### Custom Rendering (Popovers, Multi-button Blocks)
+
+```tsx
+useRightRailButtons([
+  {
+    id: 'viewer-search',
+    tooltip: t('rightRail.search', 'Search PDF'),
+    render: ({ disabled }) => (
+      <Tooltip content={t('rightRail.search', 'Search PDF')}>
+        <Popover position="left">
+          <Popover.Target>
+            <ActionIcon disabled={disabled}>
+              <SearchIcon />
+            </ActionIcon>
+          </Popover.Target>
+          <Popover.Dropdown>
+            <SearchInterface />
+          </Popover.Dropdown>
+        </Popover>
+      </Tooltip>
+    ),
+  },
+]);
 ```
 
 ## Built-in Features
@@ -106,3 +140,4 @@ interface RightRailButtonWithAction {
 - Choose appropriate Material-UI icons
 - Keep tooltips concise: `'Compress PDF'`, `'Process with OCR'`
 - Use `useCallback` for click handlers to prevent re-registration
+- Reach for `render` when you need popovers or multi-control groups inside the rail

frontend/src/components/shared/rightRail/RightRail.css

@@ -29,6 +29,34 @@
   gap: 0.75rem;
 }
 
+.right-rail-button-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  animation: rightRailButtonReveal 200ms ease forwards;
+  transform-origin: top center;
+  opacity: 0;
+}
+
+.right-rail-tooltip-wrapper {
+  display: inline-flex;
+  width: 100%;
+  justify-content: center;
+}
+
+@keyframes rightRailButtonReveal {
+  0% {
+    opacity: 0;
+    transform: scaleY(0.6) translateY(-6px);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(1) translateY(0);
+  }
+}
+
 .right-rail-divider {
   width: 2.75rem;
   border: none;
@@ -46,6 +74,13 @@
   background-color: transparent !important;
 }
 
+/* When all buttons are disabled via context */
+.right-rail--all-disabled .right-rail-icon {
+  color: var(--right-rail-icon-disabled) !important;
+  background-color: transparent !important;
+  pointer-events: none !important;
+}
+
 .right-rail-spacer {
   flex: 1;
 }
@@ -124,4 +159,3 @@
   transition-delay: 0s, 0s, 0s, 220ms;
   pointer-events: none;
 }
-

frontend/src/components/shared/rightRail/ViewerAnnotationControls.tsx

@@ -14,9 +14,10 @@ import { useNavigationState } from '../../../contexts/NavigationContext';
 
 interface ViewerAnnotationControlsProps {
   currentView: string;
+  disabled?: boolean;
 }
 
-export default function ViewerAnnotationControls({ currentView }: ViewerAnnotationControlsProps) {
+export default function ViewerAnnotationControls({ currentView, disabled = false }: ViewerAnnotationControlsProps) {
   const { t } = useTranslation();
   const [selectedColor, setSelectedColor] = useState('#000000');
   const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
@@ -52,7 +53,7 @@ export default function ViewerAnnotationControls({ currentView }: ViewerAnnotati
   return (
     <>
       {/* Annotation Visibility Toggle */}
-      <Tooltip content={t('rightRail.toggleAnnotations', 'Toggle Annotations Visibility')} position="left" offset={12} arrow>
+      <Tooltip content={t('rightRail.toggleAnnotations', 'Toggle Annotations Visibility')} position="left" offset={12} arrow portalTarget={document.body}>
         <ActionIcon
           variant="subtle"
           radius="md"
@@ -60,7 +61,7 @@ export default function ViewerAnnotationControls({ currentView }: ViewerAnnotati
           onClick={() => {
             viewerContext?.toggleAnnotationsVisibility();
           }}
-          disabled={currentView !== 'viewer' || viewerContext?.isAnnotationMode || isPlacementMode}
+          disabled={disabled || currentView !== 'viewer' || viewerContext?.isAnnotationMode || isPlacementMode}
         >
           <LocalIcon
             icon={viewerContext?.isAnnotationsVisible ? "visibility" : "visibility-off-rounded"}
@@ -104,7 +105,7 @@ export default function ViewerAnnotationControls({ currentView }: ViewerAnnotati
                     }
                   }
                 }}
-                disabled={currentView !== 'viewer'}
+              disabled={disabled}
                 aria-label="Drawing mode active"
               >
                 <LocalIcon icon="edit" width="1.5rem" height="1.5rem" />
@@ -129,7 +130,7 @@ export default function ViewerAnnotationControls({ currentView }: ViewerAnnotati
         </div>
       ) : (
         // When inactive: Show "Draw" tooltip
-        <Tooltip content={t('rightRail.draw', 'Draw')} position="left" offset={12} arrow>
+        <Tooltip content={t('rightRail.draw', 'Draw')} position="left" offset={12} arrow portalTarget={document.body}>
           <ActionIcon
             variant="subtle"
             radius="md"
@@ -146,7 +147,7 @@ export default function ViewerAnnotationControls({ currentView }: ViewerAnnotati
                 }
               }
             }}
-            disabled={currentView !== 'viewer'}
+            disabled={disabled}
             aria-label={typeof t === 'function' ? t('rightRail.draw', 'Draw') : 'Draw'}
           >
             <LocalIcon icon="edit" width="1.5rem" height="1.5rem" />
@@ -155,7 +156,7 @@ export default function ViewerAnnotationControls({ currentView }: ViewerAnnotati
       )}
 
       {/* Save PDF with Annotations */}
-      <Tooltip content={t('rightRail.save', 'Save')} position="left" offset={12} arrow>
+      <Tooltip content={t('rightRail.save', 'Save')} position="left" offset={12} arrow portalTarget={document.body}>
         <ActionIcon
           variant="subtle"
           radius="md"
@@ -203,7 +204,7 @@ export default function ViewerAnnotationControls({ currentView }: ViewerAnnotati
               }
             }
           }}
-          disabled={currentView !== 'viewer'}
+          disabled={disabled}
         >
           <LocalIcon icon="save" width="1.5rem" height="1.5rem" />
         </ActionIcon>

frontend/src/components/tools/FullscreenToolList.tsx

@@ -0,0 +1,253 @@
+import React, { useMemo } from 'react';
+import { Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { ToolRegistryEntry, getSubcategoryLabel, getSubcategoryColor, getSubcategoryIcon } from '../../data/toolsTaxonomy';
+import { ToolId } from '../../types/toolId';
+import { useToolSections } from '../../hooks/useToolSections';
+import NoToolsFound from './shared/NoToolsFound';
+import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
+import StarRoundedIcon from '@mui/icons-material/StarRounded';
+import ThumbUpRoundedIcon from '@mui/icons-material/ThumbUpRounded';
+import Badge from '../shared/Badge';
+import './ToolPanel.css';
+import DetailedToolItem from './fullscreen/DetailedToolItem';
+import CompactToolItem from './fullscreen/CompactToolItem';
+import { useFavoriteToolItems } from '../../hooks/tools/useFavoriteToolItems';
+
+interface FullscreenToolListProps {
+  filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>;
+  searchQuery: string;
+  showDescriptions: boolean;
+  selectedToolKey: string | null;
+  matchedTextMap: Map<string, string>;
+  onSelect: (id: ToolId) => void;
+}
+
+const FullscreenToolList = ({
+  filteredTools,
+  searchQuery,
+  showDescriptions,
+  selectedToolKey,
+  matchedTextMap: _matchedTextMap,
+  onSelect,
+}: FullscreenToolListProps) => {
+  const { t } = useTranslation();
+  const { toolRegistry, favoriteTools } = useToolWorkflow();
+
+  const { sections, searchGroups } = useToolSections(filteredTools, searchQuery);
+
+  const tooltipPortalTarget = typeof document !== 'undefined' ? document.body : undefined;
+
+
+  const favoriteToolItems = useFavoriteToolItems(favoriteTools, toolRegistry);
+
+  const quickSection = useMemo(() => sections.find(section => section.key === 'quick'), [sections]);
+  const recommendedItems = useMemo(() => {
+    if (!quickSection) return [] as Array<{ id: string, tool: ToolRegistryEntry }>;
+    const items: Array<{ id: string, tool: ToolRegistryEntry }> = [];
+    quickSection.subcategories.forEach(sc => sc.tools.forEach(t => items.push(t)));
+    return items;
+  }, [quickSection]);
+
+  // Show recommended/favorites section only when not searching
+  const showRecentFavorites = searchQuery.trim().length === 0 && ((recommendedItems.length > 0) || favoriteToolItems.length > 0);
+
+  const subcategoryGroups = useMemo(() => {
+    if (searchQuery.trim().length > 0) {
+      return searchGroups;
+    }
+    const allSection = sections.find(section => section.key === 'all');
+    return allSection ? allSection.subcategories : [];
+  }, [searchGroups, sections, searchQuery]);
+
+  if (subcategoryGroups.length === 0 && !showRecentFavorites) {
+    return (
+      <div className="tool-panel__fullscreen-empty">
+        <NoToolsFound />
+        <Text size="sm" c="dimmed">
+          {t('toolPanel.fullscreen.noResults', 'Try adjusting your search or toggle descriptions to find what you need.')}
+        </Text>
+      </div>
+    );
+  }
+
+  const containerClass = showDescriptions
+    ? 'tool-panel__fullscreen-groups tool-panel__fullscreen-groups--detailed'
+    : 'tool-panel__fullscreen-groups tool-panel__fullscreen-groups--compact';
+
+  // Helper function to render a tool item
+  const renderToolItem = (id: ToolId, tool: ToolRegistryEntry) => {
+    const isSelected = selectedToolKey === id;
+
+    const handleClick = () => {
+      if (!tool.component && !tool.link && id !== 'read' && id !== 'multiTool') return;
+      if (tool.link) {
+        window.open(tool.link, '_blank', 'noopener,noreferrer');
+        return;
+      }
+      onSelect(id as ToolId);
+    };
+
+    if (showDescriptions) {
+      return (
+        <DetailedToolItem key={id} id={id} tool={tool} isSelected={isSelected} onClick={handleClick} />
+      );
+    }
+
+    return (
+      <CompactToolItem key={id} id={id} tool={tool} isSelected={isSelected} onClick={handleClick} tooltipPortalTarget={tooltipPortalTarget} />
+    );
+  };
+
+  return (
+    <div className={containerClass}>
+      {showRecentFavorites && (
+        <>
+          {favoriteToolItems.length > 0 && (
+            <section 
+              className="tool-panel__fullscreen-group tool-panel__fullscreen-group--special"
+              style={{
+                borderColor: 'var(--fullscreen-border-favorites)',
+              }}
+            >
+              <header className="tool-panel__fullscreen-section-header">
+                <div className="tool-panel__fullscreen-section-title">
+                  <span
+                    className="tool-panel__fullscreen-section-icon"
+                    style={{
+                      color: 'var(--special-color-favorites)',
+                    }}
+                    aria-hidden
+                  >
+                    <StarRoundedIcon />
+                  </span>
+                  <Text size="sm" fw={600} tt="uppercase" lts={0.5} c="dimmed">
+                    {t('toolPanel.fullscreen.favorites', 'Favourites')}
+                  </Text>
+                </div>
+                <Badge
+                  size="sm"
+                  variant="colored"
+                  color="var(--special-color-favorites)"
+                >
+                  {favoriteToolItems.length}
+                </Badge>
+              </header>
+              {showDescriptions ? (
+                <div className="tool-panel__fullscreen-grid tool-panel__fullscreen-grid--detailed">
+                  {favoriteToolItems.map((item) => item && renderToolItem(item.id, item.tool))}
+                </div>
+              ) : (
+                <div className="tool-panel__fullscreen-list">
+                  {favoriteToolItems.map((item) => item && renderToolItem(item.id, item.tool))}
+                </div>
+              )}
+            </section>
+          )}
+
+          {recommendedItems.length > 0 && (
+            <section 
+              className="tool-panel__fullscreen-group tool-panel__fullscreen-group--special"
+              style={{
+                borderColor: 'var(--fullscreen-border-recommended)',
+              }}
+            >
+              <header className="tool-panel__fullscreen-section-header">
+                <div className="tool-panel__fullscreen-section-title">
+                  <span
+                    className="tool-panel__fullscreen-section-icon"
+                    style={{
+                      color: 'var(--special-color-recommended)',
+                    }}
+                    aria-hidden
+                  >
+                    <ThumbUpRoundedIcon />
+                  </span>
+                  <Text size="sm" fw={600} tt="uppercase" lts={0.5} c="dimmed">
+                    {t('toolPanel.fullscreen.recommended', 'Recommended')}
+                  </Text>
+                </div>
+                <Badge
+                  size="sm"
+                  variant="colored"
+                  color="var(--special-color-recommended)"
+                >
+                  {recommendedItems.length}
+                </Badge>
+              </header>
+              {showDescriptions ? (
+                <div className="tool-panel__fullscreen-grid tool-panel__fullscreen-grid--detailed">
+                  {recommendedItems.map((item: any) => renderToolItem(item.id, item.tool))}
+                </div>
+              ) : (
+                <div className="tool-panel__fullscreen-list">
+                  {recommendedItems.map((item: any) => renderToolItem(item.id, item.tool))}
+                </div>
+              )}
+            </section>
+          )}
+        </>
+      )}
+
+      {subcategoryGroups.map(({ subcategoryId, tools }) => {
+        const categoryColor = getSubcategoryColor(subcategoryId);
+
+        return (
+          <section
+            key={subcategoryId}
+            className={`tool-panel__fullscreen-group ${showDescriptions ? 'tool-panel__fullscreen-group--detailed' : 'tool-panel__fullscreen-group--compact'}`}
+            style={{
+              borderColor: `color-mix(in srgb, ${categoryColor} 25%, var(--fullscreen-border-subtle-65))`,
+            }}
+          >
+            <header className="tool-panel__fullscreen-section-header">
+              <div className="tool-panel__fullscreen-section-title">
+                <span
+                  className="tool-panel__fullscreen-section-icon"
+                  style={{
+                    color: categoryColor,
+                  }}
+                  aria-hidden
+                >
+                  {getSubcategoryIcon(subcategoryId)}
+                </span>
+                <Text
+                  size="sm"
+                  fw={600}
+                  tt="uppercase"
+                  lts={0.5}
+                  style={{
+                    color: categoryColor,
+                  }}
+                >
+                  {getSubcategoryLabel(t, subcategoryId)}
+                </Text>
+              </div>
+              <Badge
+                size="sm"
+                variant="colored"
+                color={categoryColor}
+              >
+                {tools.length}
+              </Badge>
+            </header>
+
+            {showDescriptions ? (
+              <div className="tool-panel__fullscreen-grid tool-panel__fullscreen-grid--detailed">
+                {tools.map(({ id, tool }) => renderToolItem(id as ToolId, tool))}
+              </div>
+            ) : (
+              <div className="tool-panel__fullscreen-list">
+                {tools.map(({ id, tool }) => renderToolItem(id as ToolId, tool))}
+              </div>
+            )}
+          </section>
+        );
+      })}
+    </div>
+  );
+};
+
+export default FullscreenToolList;
+
+

frontend/src/components/tools/FullscreenToolSurface.tsx

@@ -0,0 +1,159 @@
+import { useState, useRef } from 'react';
+import { ActionIcon, ScrollArea, Switch, useMantineColorScheme } from '@mantine/core';
+import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
+import { useTranslation } from 'react-i18next';
+import ToolSearch from './toolPicker/ToolSearch';
+import FullscreenToolList from './FullscreenToolList';
+import { ToolRegistryEntry } from '../../data/toolsTaxonomy';
+import { ToolId } from '../../types/toolId';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
+import { BASE_PATH } from '../../constants/app';
+import { Tooltip } from '../shared/Tooltip';
+import './ToolPanel.css';
+import { ToolPanelGeometry } from '../../hooks/tools/useToolPanelGeometry';
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '../../styles/zIndex';
+
+interface FullscreenToolSurfaceProps {
+  searchQuery: string;
+  toolRegistry: Partial<Record<ToolId, ToolRegistryEntry>>;
+  filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>;
+  selectedToolKey: string | null;
+  showDescriptions: boolean;
+  matchedTextMap: Map<string, string>;
+  onSearchChange: (value: string) => void;
+  onSelect: (id: ToolId) => void;
+  onToggleDescriptions: () => void;
+  onExitFullscreenMode: () => void;
+  toggleLabel: string;
+  geometry: ToolPanelGeometry | null;
+}
+
+const FullscreenToolSurface = ({
+  searchQuery,
+  toolRegistry,
+  filteredTools,
+  selectedToolKey,
+  showDescriptions,
+  matchedTextMap,
+  onSearchChange,
+  onSelect,
+  onToggleDescriptions,
+  onExitFullscreenMode,
+  toggleLabel,
+  geometry,
+}: FullscreenToolSurfaceProps) => {
+  const { t } = useTranslation();
+  const { colorScheme } = useMantineColorScheme();
+  const [isExiting, setIsExiting] = useState(false);
+  const surfaceRef = useRef<HTMLDivElement>(null);
+
+  // Enable focus trap when surface is active
+  useFocusTrap(surfaceRef, !isExiting);
+
+  const brandAltText = t("home.mobile.brandAlt", "Stirling PDF logo");
+  const brandIconSrc = `${BASE_PATH}/branding/StirlingPDFLogoNoText${
+    colorScheme === "dark" ? "Dark" : "Light"
+  }.svg`;
+  const brandTextSrc = `${BASE_PATH}/branding/StirlingPDFLogo${
+    colorScheme === "dark" ? "White" : "Black"
+  }Text.svg`;
+
+  const handleExit = () => {
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    if (prefersReducedMotion) {
+      onExitFullscreenMode();
+      return;
+    }
+
+    setIsExiting(true);
+    const el = surfaceRef.current;
+    if (!el) {
+      onExitFullscreenMode();
+      return;
+    }
+    // Rely on CSS animation end rather than duplicating timing in JS
+    el.addEventListener('animationend', () => {
+      onExitFullscreenMode();
+    }, { once: true });
+};
+
+
+  const style = geometry
+    ? {
+        left: `${geometry.left}px`,
+        top: `${geometry.top}px`,
+        width: `${geometry.width}px`,
+        height: `${geometry.height}px`,
+      }
+    : undefined;
+
+  return (
+    <div
+      className="tool-panel__fullscreen-surface"
+      style={style}
+      role="region"
+      aria-label={t('toolPanel.fullscreen.heading', 'All tools (fullscreen view)')}
+    >
+      <div
+        ref={surfaceRef}
+        className={`tool-panel__fullscreen-surface-inner ${isExiting ? 'tool-panel__fullscreen-surface-inner--exiting' : ''}`}
+      >
+        <header className="tool-panel__fullscreen-header">
+          <div className="tool-panel__fullscreen-brand">
+            <img src={brandIconSrc} alt="" className="tool-panel__fullscreen-brand-icon" />
+            <img src={brandTextSrc} alt={brandAltText} className="tool-panel__fullscreen-brand-text" />
+          </div>
+          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+            <Tooltip content={toggleLabel} position="bottom" arrow={true} openOnFocus={false} containerStyle={{ zIndex: Z_INDEX_OVER_FULLSCREEN_SURFACE }}>
+              <ActionIcon
+                variant="subtle"
+                radius="xl"
+                size="md"
+                onClick={handleExit}
+                aria-label={toggleLabel}
+                style={{ color: 'var(--right-rail-icon)' }}
+              >
+                <DoubleArrowIcon fontSize="small" style={{ transform: 'rotate(180deg)' }} />
+              </ActionIcon>
+            </Tooltip>
+          </div>
+        </header>
+
+        <div className="tool-panel__fullscreen-controls">
+          <ToolSearch
+            value={searchQuery}
+            onChange={onSearchChange}
+            toolRegistry={toolRegistry}
+            mode="filter"
+            autoFocus
+          />
+          <Switch
+            checked={showDescriptions}
+            onChange={() => onToggleDescriptions()}
+            size="md"
+            labelPosition="left"
+            label={t('toolPanel.fullscreen.showDetails', 'Show Details')}
+          />
+        </div>
+
+        <div className="tool-panel__fullscreen-body">
+          <ScrollArea className="tool-panel__fullscreen-scroll" offsetScrollbars>
+            <FullscreenToolList
+              filteredTools={filteredTools}
+              searchQuery={searchQuery}
+              showDescriptions={showDescriptions}
+              selectedToolKey={selectedToolKey}
+              matchedTextMap={matchedTextMap}
+              onSelect={onSelect}
+            />
+          </ScrollArea>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FullscreenToolSurface;
+
+

frontend/src/components/tools/SearchResults.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Box, Stack } from '@mantine/core';
 import { getSubcategoryLabel, ToolRegistryEntry } from '../../data/toolsTaxonomy';
+import { ToolId } from '../../types/toolId';
 import ToolButton from './toolPicker/ToolButton';
 import { useTranslation } from 'react-i18next';
 import { useToolSections } from '../../hooks/useToolSections';
 import SubcategoryHeader from './shared/SubcategoryHeader';
 import NoToolsFound from './shared/NoToolsFound';
 import "./toolPicker/ToolPicker.css";
-import { ToolId } from 'src/types/toolId';
 
 interface SearchResultsProps {
   filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>;

frontend/src/components/tools/ToolPanel.css

@@ -0,0 +1,548 @@
+/* CSS Custom Properties for Fullscreen Mode */
+.tool-panel__fullscreen-surface-inner {
+  --fullscreen-bg-surface-1: color-mix(in srgb, var(--bg-toolbar) 96%, transparent);
+  --fullscreen-bg-surface-2: color-mix(in srgb, var(--bg-background) 90%, transparent);
+  --fullscreen-bg-header: var(--bg-toolbar);
+  --fullscreen-bg-controls-1: var(--bg-toolbar);
+  --fullscreen-bg-controls-2: color-mix(in srgb, var(--bg-toolbar) 95%, var(--bg-background));
+  --fullscreen-bg-body-1: color-mix(in srgb, var(--bg-background) 86%, transparent);
+  --fullscreen-bg-body-2: color-mix(in srgb, var(--bg-toolbar) 78%, transparent);
+  --fullscreen-bg-group: color-mix(in srgb, var(--bg-toolbar) 82%, transparent);
+  --fullscreen-bg-item: color-mix(in srgb, var(--bg-toolbar) 88%, transparent);
+  --fullscreen-bg-list-item: color-mix(in srgb, var(--bg-toolbar) 86%, transparent);
+  --fullscreen-bg-icon-detailed: color-mix(in srgb, var(--bg-muted) 75%, transparent);
+  --fullscreen-bg-icon-compact: color-mix(in srgb, var(--bg-muted) 70%, transparent);
+  --fullscreen-border-subtle-75: color-mix(in srgb, var(--border-subtle) 75%, transparent);
+  --fullscreen-border-subtle-70: color-mix(in srgb, var(--border-subtle) 70%, transparent);
+  --fullscreen-border-subtle-65: color-mix(in srgb, var(--border-subtle) 65%, transparent);
+  --fullscreen-border-favorites: color-mix(in srgb, var(--special-color-favorites) 25%, var(--border-subtle));
+  --fullscreen-border-recommended: color-mix(in srgb, var(--special-color-recommended) 25%, var(--border-subtle));
+  --fullscreen-shadow-primary: color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.55)) 25%, transparent);
+  --fullscreen-shadow-secondary: color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.35)) 30%, transparent);
+  --fullscreen-shadow-group: color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.45)) 18%, transparent);
+  --fullscreen-accent-hover: color-mix(in srgb, var(--text-primary) 20%, var(--border-subtle));
+  --fullscreen-accent-selected: color-mix(in srgb, var(--text-primary) 30%, var(--border-subtle));
+  --fullscreen-accent-ring: color-mix(in srgb, var(--text-primary) 15%, transparent);
+  --fullscreen-accent-list-bg: color-mix(in srgb, var(--text-primary) 8%, var(--bg-toolbar));
+  --fullscreen-accent-list-border: color-mix(in srgb, var(--text-primary) 20%, var(--border-subtle));
+  --fullscreen-text-icon: color-mix(in srgb, var(--text-primary) 90%, var(--text-muted));
+  --fullscreen-text-icon-compact: color-mix(in srgb, var(--text-primary) 88%, var(--text-muted));
+}
+
+.tool-panel {
+  position: relative;
+  transition: width 0.3s ease, max-width 0.3s ease;
+}
+
+.tool-panel--fullscreen-active {
+  overflow: visible !important;
+}
+
+.tool-panel__search-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+}
+
+.tool-panel__search-row .search-input-container {
+  flex: 1 1 auto;
+}
+
+.tool-panel__mode-toggle {
+  transition: transform 0.2s ease;
+}
+
+.tool-panel__mode-toggle:hover {
+  transform: scale(1.04);
+}
+
+.tool-panel--fullscreen {
+  background: var(--bg-toolbar);
+}
+
+.tool-panel__placeholder {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  padding: 1.5rem;
+  text-align: center;
+}
+
+.tool-panel__fullscreen-surface {
+  position: fixed;
+  display: flex;
+  pointer-events: none;
+  z-index: var(--z-fullscreen-surface);
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+}
+
+.tool-panel__fullscreen-surface-inner {
+  pointer-events: auto;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0;
+  background:
+    linear-gradient(
+      140deg,
+      var(--fullscreen-bg-surface-1),
+      var(--fullscreen-bg-surface-2)
+    )
+    padding-box;
+  border: 1px solid var(--fullscreen-border-subtle-75);
+  box-shadow: none;
+  backdrop-filter: blur(18px);
+  overflow: hidden;
+  /* Shared animation durations for JS + CSS (sourced from theme.css) */
+  --fullscreen-anim-in-duration: var(--fullscreen-anim-duration-in);
+  --fullscreen-anim-out-duration: var(--fullscreen-anim-duration-out);
+  animation: tool-panel-fullscreen-slide-in var(--fullscreen-anim-in-duration) ease forwards;
+}
+
+.tool-panel__fullscreen-surface-inner--exiting {
+  animation: tool-panel-fullscreen-slide-out var(--fullscreen-anim-out-duration) ease forwards;
+}
+
+.tool-panel__fullscreen-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1.75rem;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-toolbar);
+}
+
+.tool-panel__fullscreen-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.tool-panel__fullscreen-brand-icon {
+  height: 1.75rem;
+  width: auto;
+}
+
+.tool-panel__fullscreen-brand-text {
+  height: 1.25rem;
+  width: auto;
+}
+
+.tool-panel__fullscreen-controls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1.75rem;
+  border-bottom: 1px solid var(--tool-panel-search-border-bottom);
+  background: var(--tool-panel-search-bg);
+}
+
+.tool-panel__fullscreen-controls .search-input-container {
+  flex: 1 1 auto;
+}
+
+.tool-panel__fullscreen-body {
+  flex: 1;
+  min-height: 0;
+  background: transparent;
+}
+
+.tool-panel__fullscreen-scroll {
+  height: 100%;
+}
+
+/* fullscreen group layout */
+.tool-panel__fullscreen-groups {
+  padding: 1.5rem 1.75rem;
+  column-width: 18rem;
+  column-gap: 1.5rem;
+}
+
+.tool-panel__fullscreen-groups--compact {
+  column-width: 17rem;
+}
+
+.tool-panel__fullscreen-groups--detailed {
+  column-width: auto;
+}
+
+.tool-panel__fullscreen-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+  margin: 0 0 1.5rem;
+  padding: 0.65rem 0.75rem 1rem;
+  border-radius: 1rem;
+  background: var(--fullscreen-bg-group);
+  border: 1px solid var(--fullscreen-border-subtle-65);
+  box-shadow: 0 14px 32px var(--fullscreen-shadow-group);
+  break-inside: avoid;
+  backdrop-filter: blur(10px);
+}
+
+.tool-panel__fullscreen-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.1rem 0.15rem 0.35rem;
+}
+
+.tool-panel__fullscreen-section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tool-panel__fullscreen-section-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.1rem;
+}
+
+.tool-panel__fullscreen-grid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.tool-panel__fullscreen-grid--detailed {
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+}
+
+.tool-panel__fullscreen-item {
+  all: unset;
+  display: flex;
+  flex-direction: row;
+  gap: 0.75rem;
+  align-items: flex-start;
+  padding: 0.85rem 0.95rem;
+  border: 1px solid var(--fullscreen-border-subtle-70);
+  border-radius: 0.95rem;
+  background: var(--fullscreen-bg-item);
+  backdrop-filter: blur(6px);
+  cursor: pointer;
+  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+  width: 100%;
+  box-sizing: border-box;
+  /* Allow flex children to shrink without forcing horizontal overflow */
+  min-width: 0;
+}
+
+.tool-panel__fullscreen-item:focus-visible {
+  outline: 2px solid var(--fullscreen-accent-selected);
+  outline-offset: 3px;
+}
+
+.tool-panel__fullscreen-item[aria-disabled="true"],
+.tool-panel__fullscreen-item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.tool-panel__fullscreen-item:hover:not([aria-disabled="true"]):not(:disabled) {
+  transform: translateY(-2px);
+  border-color: var(--fullscreen-accent-hover);
+  box-shadow: var(--shadow-xl, 0 18px 34px rgba(15, 23, 42, 0.14));
+}
+
+.tool-panel__fullscreen-item--selected {
+  border-color: var(--fullscreen-accent-selected);
+  box-shadow: 0 0 0 2px var(--fullscreen-accent-ring);
+}
+
+.tool-panel__fullscreen-item--detailed {
+  min-height: 7.5rem;
+}
+
+.tool-panel__fullscreen-item--with-star {
+  position: relative;
+}
+
+.tool-panel__fullscreen-star {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 2;
+}
+
+.tool-panel__fullscreen-item:hover .tool-panel__fullscreen-star {
+  opacity: 1;
+}
+
+.tool-panel__fullscreen-list-item--with-star {
+  position: relative;
+}
+
+.tool-panel__fullscreen-star-compact {
+  position: absolute;
+  top: 0.35rem;
+  right: 0.35rem;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 2;
+}
+
+.tool-panel__fullscreen-list-item:hover .tool-panel__fullscreen-star-compact {
+  opacity: 1;
+}
+
+.tool-panel__fullscreen-group--special {
+  border-width: 1px;
+}
+
+.tool-panel__fullscreen-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 0.75rem;
+  background: var(--fullscreen-bg-icon-detailed);
+  color: var(--fullscreen-text-icon);
+  flex-shrink: 0;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.tool-panel__fullscreen-icon::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg,
+    color-mix(in srgb, var(--text-primary) 12%, transparent),
+    color-mix(in srgb, var(--text-primary) 4%, transparent)
+  );
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  border-radius: 0.75rem;
+}
+
+.tool-panel__fullscreen-item:hover:not([aria-disabled="true"]) .tool-panel__fullscreen-icon {
+  transform: scale(1.08);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--text-primary) 15%, transparent);
+}
+
+.tool-panel__fullscreen-item:hover:not([aria-disabled="true"]) .tool-panel__fullscreen-icon::before {
+  opacity: 1;
+}
+
+.tool-panel__fullscreen-icon svg {
+  font-size: 1.65rem;
+  position: relative;
+  z-index: var(--z-fullscreen-icon-svg);
+}
+
+.tool-panel__fullscreen-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  text-align: left;
+  /* Prevent long content (names, descriptions, shortcuts) from overflowing */
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.tool-panel__fullscreen-name {
+  color: var(--text-primary);
+}
+
+.tool-panel__fullscreen-description {
+  line-height: 1.45;
+}
+
+/* Ensure long words or unbroken strings wrap instead of overflowing */
+.tool-panel__fullscreen-name,
+.tool-panel__fullscreen-description,
+.tool-panel__fullscreen-match {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  hyphens: auto;
+}
+
+.tool-panel__fullscreen-match {
+  font-style: italic;
+}
+
+.tool-panel__fullscreen-shortcut {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.2rem;
+  /* Allow hotkey chips to wrap on small widths to avoid overflow */
+  flex-wrap: wrap;
+  row-gap: 0.25rem;
+}
+
+.tool-panel__fullscreen-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.tool-panel__fullscreen-list-item {
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.55rem 0.5rem 0.55rem 0.65rem;
+  border-radius: 0.65rem;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.2s ease;
+  background: var(--fullscreen-bg-list-item);
+  border: 1px solid transparent;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.tool-panel__fullscreen-list-item[aria-disabled="true"],
+.tool-panel__fullscreen-list-item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.tool-panel__fullscreen-list-item:hover:not([aria-disabled="true"]):not(:disabled),
+.tool-panel__fullscreen-list-item--selected {
+  background: var(--fullscreen-accent-list-bg);
+  border-color: var(--fullscreen-accent-list-border);
+}
+
+.tool-panel__fullscreen-list-item--selected {
+  transform: translateX(2px);
+}
+
+.tool-panel__fullscreen-list-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.1rem;
+  height: 2.1rem;
+  border-radius: 0.6rem;
+  background: var(--fullscreen-bg-icon-compact);
+  color: var(--fullscreen-text-icon-compact);
+  flex-shrink: 0;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.tool-panel__fullscreen-list-icon::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg,
+    color-mix(in srgb, var(--text-primary) 10%, transparent),
+    color-mix(in srgb, var(--text-primary) 3%, transparent)
+  );
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  border-radius: 0.6rem;
+}
+
+.tool-panel__fullscreen-list-item:hover:not([aria-disabled="true"]) .tool-panel__fullscreen-list-icon {
+  transform: scale(1.06);
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--text-primary) 12%, transparent);
+}
+
+.tool-panel__fullscreen-list-item:hover:not([aria-disabled="true"]) .tool-panel__fullscreen-list-icon::before {
+  opacity: 1;
+}
+
+.tool-panel__fullscreen-list-icon svg {
+  position: relative;
+  z-index: 1;
+}
+
+.tool-panel__fullscreen-list-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.2rem;
+  text-align: left;
+}
+
+.tool-panel__fullscreen-empty {
+  padding: 2rem 1.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+@keyframes tool-panel-fullscreen-slide-in {
+  from {
+    transform: translateX(-6%) scaleX(0.85);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0) scaleX(1);
+    opacity: 1;
+  }
+}
+
+@keyframes tool-panel-fullscreen-slide-out {
+  from {
+    transform: translateX(0) scaleX(1);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-6%) scaleX(0.85);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tool-panel__fullscreen-surface-inner {
+    animation: none !important;
+  }
+
+  .tool-panel__mode-toggle {
+    transition: none;
+  }
+
+  .tool-panel__fullscreen-item,
+  .tool-panel__fullscreen-list-item {
+    transition: none;
+  }
+}
+
+@media (max-width: 1440px) {
+  .tool-panel__fullscreen-content {
+    padding-inline: 1.5rem;
+  }
+
+  .tool-panel__fullscreen-grid--compact {
+    column-width: 15rem;
+  }
+}
+
+@media (max-width: 1280px) {
+  .tool-panel__fullscreen-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .tool-panel__fullscreen-controls .mantine-Switch-root {
+    justify-content: flex-end;
+  }
+
+  .tool-panel__fullscreen-grid--compact {
+    column-width: 14rem;
+  }
+}
+
+
+

frontend/src/components/tools/ToolPanel.tsx

@@ -1,25 +1,33 @@
+import React, { useEffect, useMemo } from 'react';
 import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
+import { usePreferences } from '../../contexts/PreferencesContext';
 import ToolPicker from './ToolPicker';
 import SearchResults from './SearchResults';
 import ToolRenderer from './ToolRenderer';
 import ToolSearch from './toolPicker/ToolSearch';
 import { useSidebarContext } from "../../contexts/SidebarContext";
 import rainbowStyles from '../../styles/rainbow.module.css';
-import { ScrollArea } from '@mantine/core';
+import { ActionIcon, ScrollArea } from '@mantine/core';
 import { ToolId } from '../../types/toolId';
 import { useMediaQuery } from '@mantine/hooks';
+import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
+import { useTranslation } from 'react-i18next';
+import FullscreenToolSurface from './FullscreenToolSurface';
+import { useToolPanelGeometry } from '../../hooks/tools/useToolPanelGeometry';
+import { useRightRail } from '../../contexts/RightRailContext';
+import { Tooltip } from '../shared/Tooltip';
+import './ToolPanel.css';
 
 // No props needed - component uses context
 
 export default function ToolPanel() {
+  const { t } = useTranslation();
   const { isRainbowMode } = useRainbowThemeContext();
   const { sidebarRefs } = useSidebarContext();
-  const { toolPanelRef } = sidebarRefs;
+  const { toolPanelRef, quickAccessRef, rightRailRef } = sidebarRefs;
   const isMobile = useMediaQuery('(max-width: 1024px)');
 
-
-  // Use context-based hooks to eliminate prop drilling
   const {
     leftPanelView,
     isPanelVisible,
@@ -27,84 +35,180 @@ export default function ToolPanel() {
     filteredTools,
     toolRegistry,
     setSearchQuery,
+    selectedToolKey,
+    handleToolSelect,
+    setPreviewFile,
+    toolPanelMode,
+    setToolPanelMode,
+    setLeftPanelView,
+    readerMode,
   } = useToolWorkflow();
 
-  const { selectedToolKey, handleToolSelect } = useToolWorkflow();
-  const { setPreviewFile } = useToolWorkflow();
+  const { setAllRightRailButtonsDisabled } = useRightRail();
+  const { preferences, updatePreference } = usePreferences();
+
+  const isFullscreenMode = toolPanelMode === 'fullscreen';
+  const toolPickerVisible = !readerMode;
+  const fullscreenExpanded = isFullscreenMode && leftPanelView === 'toolPicker' && !isMobile && toolPickerVisible;
+
+
+  // Disable right rail buttons when fullscreen mode is active
+  useEffect(() => {
+    setAllRightRailButtonsDisabled(fullscreenExpanded);
+  }, [fullscreenExpanded, setAllRightRailButtonsDisabled]);
+
+  const fullscreenGeometry = useToolPanelGeometry({
+    enabled: fullscreenExpanded,
+    toolPanelRef,
+    quickAccessRef,
+    rightRailRef,
+  });
+
+  const toggleLabel = isFullscreenMode
+    ? t('toolPanel.toggle.sidebar', 'Switch to sidebar mode')
+    : t('toolPanel.toggle.fullscreen', 'Switch to fullscreen mode');
+
+  const handleModeToggle = () => {
+    const nextMode = isFullscreenMode ? 'sidebar' : 'fullscreen';
+    setToolPanelMode(nextMode);
+
+    if (nextMode === 'fullscreen' && leftPanelView !== 'toolPicker') {
+      setLeftPanelView('toolPicker');
+    }
+  };
+
+  const computedWidth = () => {
+    if (isMobile) {
+      return '100%';
+    }
+
+    if (!isPanelVisible) {
+      return '0';
+    }
+
+    return '18.5rem';
+  };
+
+  const matchedTextMap = useMemo(() => {
+    const map = new Map<string, string>();
+    filteredTools.forEach(({ item: [id], matchedText }) => {
+      if (matchedText) {
+        map.set(id, matchedText);
+      }
+    });
+    return map;
+  }, [filteredTools]);
 
   return (
     <div
       ref={toolPanelRef}
       data-sidebar="tool-panel"
-      className={`flex flex-col overflow-hidden bg-[var(--bg-toolbar)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${
+      className={`tool-panel flex flex-col ${fullscreenExpanded ? 'tool-panel--fullscreen-active' : 'overflow-hidden'} bg-[var(--bg-toolbar)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${
         isRainbowMode ? rainbowStyles.rainbowPaper : ''
-      } ${isMobile ? 'h-full border-r-0' : 'h-screen'}`}
+      } ${isMobile ? 'h-full border-r-0' : 'h-screen'} ${fullscreenExpanded ? 'tool-panel--fullscreen' : ''}`}
       style={{
-        width: isMobile ? '100%' : isPanelVisible ? '18.5rem' : '0',
+        width: computedWidth(),
         padding: '0'
       }}
     >
-      <div
-        style={{
-          opacity: isMobile || isPanelVisible ? 1 : 0,
-          transition: 'opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-          height: '100%',
-          display: 'flex',
-          flexDirection: 'column'
-        }}
-      >
-        {/* Search Bar - Always visible at the top */}
+      {!fullscreenExpanded && (
         <div
           style={{
-            backgroundColor: 'var(--tool-panel-search-bg)',
-            borderBottom: '1px solid var(--tool-panel-search-border-bottom)',
-            padding: '0.75rem 1rem',
+            opacity: isMobile || isPanelVisible ? 1 : 0,
+            transition: 'opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column'
           }}
         >
-          <ToolSearch
-            value={searchQuery}
-            onChange={setSearchQuery}
-            toolRegistry={toolRegistry}
-            mode="filter"
-          />
-        </div>
-
-        {searchQuery.trim().length > 0 ? (
-          // Searching view (replaces both picker and content)
-          <div className="flex-1 flex flex-col overflow-y-auto">
-              <SearchResults
-                filteredTools={filteredTools}
-                onSelect={(id) => handleToolSelect(id as ToolId)}
-                searchQuery={searchQuery}
-              />
-          </div>
-        ) : leftPanelView === 'toolPicker' ? (
-          // Tool Picker View
-          <div className="flex-1 flex flex-col overflow-auto">
-            <ToolPicker
-              selectedToolKey={selectedToolKey}
-              onSelect={(id) => handleToolSelect(id as ToolId)}
-              filteredTools={filteredTools}
-              isSearching={Boolean(searchQuery && searchQuery.trim().length > 0)}
+          <div
+            className="tool-panel__search-row"
+            style={{
+              backgroundColor: 'var(--tool-panel-search-bg)',
+              borderBottom: '1px solid var(--tool-panel-search-border-bottom)'
+            }}
+          >
+            <ToolSearch
+              value={searchQuery}
+              onChange={setSearchQuery}
+              toolRegistry={toolRegistry}
+              mode="filter"
             />
+            {!isMobile && leftPanelView === 'toolPicker' && (
+              <Tooltip 
+                content={toggleLabel}
+                position="bottom"
+                arrow={true}
+                openOnFocus={false}
+              >
+                <ActionIcon
+                  variant="subtle"
+                  radius="xl"
+                  style={{ color: 'var(--right-rail-icon)' }}
+                  onClick={handleModeToggle}
+                  aria-label={toggleLabel}
+                  className="tool-panel__mode-toggle"
+                >
+                  <DoubleArrowIcon fontSize="small" />
+                </ActionIcon>
+              </Tooltip>
+            )}
           </div>
-        ) : (
-          // Selected Tool Content View
-          <div className="flex-1 flex flex-col overflow-hidden">
-            {/* Tool content */}
-            <div className="flex-1 min-h-0 overflow-hidden">
-              <ScrollArea h="100%">
-                {selectedToolKey && (
-                  <ToolRenderer
-                    selectedToolKey={selectedToolKey}
-                    onPreviewFile={setPreviewFile}
-                  />
-                )}
-              </ScrollArea>
+
+                {searchQuery.trim().length > 0 ? (
+                  <div className="flex-1 flex flex-col overflow-y-auto">
+                    <SearchResults
+                      filteredTools={filteredTools}
+                      onSelect={(id) => handleToolSelect(id as ToolId)}
+                      searchQuery={searchQuery}
+                    />
+                  </div>
+                ) : leftPanelView === 'toolPicker' ? (
+                  <div className="flex-1 flex flex-col overflow-auto">
+                    <ToolPicker
+                      selectedToolKey={selectedToolKey}
+                      onSelect={(id) => handleToolSelect(id as ToolId)}
+                      filteredTools={filteredTools}
+                      isSearching={Boolean(searchQuery && searchQuery.trim().length > 0)}
+                    />
+                  </div>
+          ) : (
+            <div className="flex-1 flex flex-col overflow-hidden">
+              <div className="flex-1 min-h-0 overflow-hidden">
+                <ScrollArea h="100%">
+                  {selectedToolKey ? (
+                    <ToolRenderer
+                      selectedToolKey={selectedToolKey}
+                      onPreviewFile={setPreviewFile}
+                    />
+                  ) : (
+                    <div className="tool-panel__placeholder">
+                      {t('toolPanel.placeholder', 'Choose a tool to get started')}
+                    </div>
+                  )}
+                </ScrollArea>
+              </div>
             </div>
-          </div>
-        )}
-      </div>
+          )}
+        </div>
+      )}
+
+      {fullscreenExpanded && (
+        <FullscreenToolSurface
+          searchQuery={searchQuery}
+          toolRegistry={toolRegistry}
+          filteredTools={filteredTools}
+          selectedToolKey={selectedToolKey}
+          showDescriptions={preferences.showLegacyToolDescriptions}
+          matchedTextMap={matchedTextMap}
+          onSearchChange={setSearchQuery}
+          onSelect={(id: ToolId) => handleToolSelect(id)}
+          onToggleDescriptions={() => updatePreference('showLegacyToolDescriptions', !preferences.showLegacyToolDescriptions)}
+          onExitFullscreenMode={() => setToolPanelMode('sidebar')}
+          toggleLabel={toggleLabel}
+          geometry={fullscreenGeometry}
+        />
+      )}
     </div>
   );
 }

frontend/src/components/tools/ToolPanelModePrompt.css

@@ -0,0 +1,200 @@
+.tool-panel-mode-prompt__modal {
+  background: color-mix(in srgb, var(--bg-toolbar) 94%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
+  box-shadow: 0 32px 64px color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.55)) 20%, transparent);
+  max-width: min(46rem, 100%);
+}
+
+.tool-panel-mode-prompt__options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.5rem;
+}
+
+.tool-panel-mode-prompt__card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background: linear-gradient(145deg,
+    color-mix(in srgb, var(--bg-surface) 96%, transparent),
+    color-mix(in srgb, var(--bg-muted) 70%, transparent)
+  );
+  width: 100%;
+  max-width: 19rem;
+}
+
+.tool-panel-mode-prompt__card--sidebar {
+  border: 1px solid color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 18%, var(--border-subtle));
+  background: linear-gradient(165deg,
+    color-mix(in srgb, var(--bg-surface) 96%, transparent),
+    color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 8%, transparent)
+  );
+}
+
+.tool-panel-mode-prompt__preview {
+  border-radius: 0.9rem;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--bg-muted) 82%, transparent), transparent 75%);
+  padding: 0.75rem;
+  width: 100%;
+  display: flex;
+  gap: 0.65rem;
+  min-height: 6.5rem;
+  margin-top: auto;
+}
+
+.tool-panel-mode-prompt__preview--sidebar {
+  align-items: stretch;
+}
+
+.tool-panel-mode-prompt__sidebar-panel {
+  width: 3rem;
+  border-radius: 0.65rem;
+  padding: 0.45rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  background: linear-gradient(180deg,
+    color-mix(in srgb, var(--bg-muted) 88%, transparent),
+    color-mix(in srgb, var(--bg-muted) 72%, transparent)
+  );
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 65%, transparent);
+}
+
+.tool-panel-mode-prompt__sidebar-search {
+  height: 0.5rem;
+  border-radius: 0.4rem;
+  background: color-mix(in srgb, var(--bg-background) 90%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 60%, transparent);
+}
+
+.tool-panel-mode-prompt__sidebar-item {
+  height: 0.55rem;
+  border-radius: 0.35rem;
+  background: color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 32%, var(--bg-muted));
+}
+
+.tool-panel-mode-prompt__sidebar-item--muted {
+  background: color-mix(in srgb, var(--bg-background) 88%, transparent);
+}
+
+.tool-panel-mode-prompt__workspace {
+  flex: 1;
+  border-radius: 0.65rem;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 65%, transparent);
+  padding: 0.5rem;
+  display: grid;
+  gap: 0.35rem;
+  grid-template-rows: 1.4fr 0.6fr;
+  background: linear-gradient(160deg,
+    color-mix(in srgb, var(--bg-background) 94%, transparent),
+    color-mix(in srgb, var(--bg-muted) 68%, transparent)
+  );
+}
+
+.tool-panel-mode-prompt__workspace-page {
+  border-radius: 0.45rem;
+  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-background) 60%, transparent);
+}
+
+.tool-panel-mode-prompt__workspace-page--secondary {
+  opacity: 0.55;
+}
+
+.tool-panel-mode-prompt__preview--legacy {
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0.65rem 0.6rem;
+}
+
+.tool-panel-mode-prompt__legacy-columns {
+  width: 100%;
+  display: flex;
+  gap: 0.45rem;
+  justify-content: space-between;
+}
+
+.tool-panel-mode-prompt__legacy-column {
+  flex: 1;
+  display: grid;
+  gap: 0.3rem;
+}
+
+.tool-panel-mode-prompt__legacy-card {
+  border-radius: 0.45rem;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
+  background: linear-gradient(150deg,
+    color-mix(in srgb, var(--bg-muted) 88%, transparent),
+    color-mix(in srgb, var(--bg-background) 76%, transparent)
+  );
+  height: 1.2rem;
+}
+
+.tool-panel-mode-prompt__legacy-card--muted {
+  opacity: 0.55;
+}
+
+.tool-panel-mode-prompt__preview--fullscreen {
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0.65rem 0.6rem;
+}
+
+.tool-panel-mode-prompt__fullscreen-columns {
+  width: 100%;
+  display: flex;
+  gap: 0.45rem;
+  justify-content: space-between;
+}
+
+.tool-panel-mode-prompt__fullscreen-column {
+  flex: 1;
+  display: grid;
+  gap: 0.3rem;
+}
+
+.tool-panel-mode-prompt__fullscreen-card {
+  border-radius: 0.45rem;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
+  background: linear-gradient(150deg,
+    color-mix(in srgb, var(--bg-muted) 88%, transparent),
+    color-mix(in srgb, var(--bg-background) 76%, transparent)
+  );
+  height: 1.2rem;
+}
+
+.tool-panel-mode-prompt__fullscreen-card--muted {
+  opacity: 0.55;
+}
+
+.tool-panel-mode-prompt__card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  flex: 1;
+}
+
+.tool-panel-mode-prompt__action {
+  box-shadow: none;
+}
+
+.tool-panel-mode-prompt__action:hover {
+  box-shadow: 0 10px 18px color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 25%, transparent);
+}
+
+.tool-panel-mode-prompt__maybe-later {
+  color: color-mix(in srgb, var(--text-secondary) 90%, var(--text-muted));
+}
+
+.tool-panel-mode-prompt__maybe-later:hover {
+  background: color-mix(in srgb, var(--bg-muted) 78%, transparent);
+}
+
+@media (max-width: 600px) {
+  .tool-panel-mode-prompt__options {
+    grid-template-columns: 1fr;
+    justify-items: stretch;
+  }
+}

frontend/src/components/tools/ToolPanelModePrompt.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useState } from 'react';
+import { Badge, Button, Card, Group, Modal, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
+import { usePreferences } from '../../contexts/PreferencesContext';
+import './ToolPanelModePrompt.css';
+import type { ToolPanelMode } from '../../constants/toolPanel';
+
+const ToolPanelModePrompt = () => {
+  const { t } = useTranslation();
+  const { toolPanelMode, setToolPanelMode } = useToolWorkflow();
+  const { preferences, updatePreference } = usePreferences();
+  const [opened, setOpened] = useState(false);
+
+  const shouldShowPrompt = !preferences.toolPanelModePromptSeen;
+
+  useEffect(() => {
+    if (shouldShowPrompt) {
+      setOpened(true);
+    }
+  }, [shouldShowPrompt]);
+
+  const handleSelect = (mode: ToolPanelMode) => {
+    setToolPanelMode(mode);
+    updatePreference('defaultToolPanelMode', mode);
+    updatePreference('toolPanelModePromptSeen', true);
+    setOpened(false);
+  };
+
+  const handleDismiss = () => {
+    updatePreference('toolPanelModePromptSeen', true);
+    setOpened(false);
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={handleDismiss}
+      centered
+      size="xl"
+      radius="lg"
+      overlayProps={{ blur: 6, opacity: 0.35 }}
+      classNames={{ content: 'tool-panel-mode-prompt__modal' }}
+      title={t('toolPanel.modePrompt.title', 'Choose how you browse tools')}
+    >
+      <Stack gap="lg">
+        <Text size="sm" c="dimmed">
+          {t('toolPanel.modePrompt.description', 'Preview both layouts and decide how you want to explore Stirling PDF tools.')}
+        </Text>
+        <div className="tool-panel-mode-prompt__options">
+          <Card withBorder radius="lg" shadow="sm" padding="lg" className="tool-panel-mode-prompt__card tool-panel-mode-prompt__card--sidebar">
+            <Stack gap="md" className="tool-panel-mode-prompt__card-content">
+              <Group justify="space-between">
+                <Stack gap={2}>
+                <Text fw={600}>{t('toolPanel.modePrompt.sidebarTitle', 'Sidebar mode')}</Text>
+                <Text size="sm" c="dimmed">
+                  {t('toolPanel.modePrompt.sidebarDescription', 'Keep tools alongside your workspace for quick switching.')}
+                </Text>
+                </Stack>
+                <Badge color="blue" variant="filled">
+                  {t('toolPanel.modePrompt.recommended', 'Recommended')}
+                </Badge>
+              </Group>
+              <div className="tool-panel-mode-prompt__preview tool-panel-mode-prompt__preview--sidebar" aria-hidden>
+                <div className="tool-panel-mode-prompt__sidebar-panel">
+                  <span className="tool-panel-mode-prompt__sidebar-search" />
+                  <span className="tool-panel-mode-prompt__sidebar-item" />
+                  <span className="tool-panel-mode-prompt__sidebar-item" />
+                  <span className="tool-panel-mode-prompt__sidebar-item" />
+                  <span className="tool-panel-mode-prompt__sidebar-item tool-panel-mode-prompt__sidebar-item--muted" />
+                </div>
+                <div className="tool-panel-mode-prompt__workspace" aria-hidden>
+                  <div className="tool-panel-mode-prompt__workspace-page" />
+                  <div className="tool-panel-mode-prompt__workspace-page tool-panel-mode-prompt__workspace-page--secondary" />
+                </div>
+              </div>
+              <Button
+                variant={toolPanelMode === 'sidebar' ? 'filled' : 'light'}
+                color="blue"
+                radius="md"
+                className="tool-panel-mode-prompt__action"
+                onClick={() => handleSelect('sidebar')}
+              >
+                {t('toolPanel.modePrompt.chooseSidebar', 'Use sidebar mode')}
+              </Button>
+            </Stack>
+          </Card>
+          <Card withBorder radius="lg" shadow="xs" padding="lg" className="tool-panel-mode-prompt__card">
+            <Stack gap="md" className="tool-panel-mode-prompt__card-content">
+              <Stack gap={2}>
+                <Text fw={600}>{t('toolPanel.modePrompt.fullscreenTitle', 'Fullscreen mode')}</Text>
+                <Text size="sm" c="dimmed">
+                  {t('toolPanel.modePrompt.fullscreenDescription', 'Browse every tool in a catalogue that covers the workspace until you pick one.')}
+                </Text>
+              </Stack>
+              <div className="tool-panel-mode-prompt__preview tool-panel-mode-prompt__preview--fullscreen" aria-hidden>
+                <div className="tool-panel-mode-prompt__fullscreen-columns">
+                  <div className="tool-panel-mode-prompt__fullscreen-column">
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card tool-panel-mode-prompt__fullscreen-card--muted" />
+                  </div>
+                  <div className="tool-panel-mode-prompt__fullscreen-column">
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card tool-panel-mode-prompt__fullscreen-card--muted" />
+                  </div>
+                  <div className="tool-panel-mode-prompt__fullscreen-column">
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card tool-panel-mode-prompt__fullscreen-card--muted" />
+                  </div>
+                </div>
+              </div>
+              <Button
+                variant={toolPanelMode === 'fullscreen' ? 'filled' : 'outline'}
+                color="blue"
+                radius="md"
+                className="tool-panel-mode-prompt__action"
+                onClick={() => handleSelect('fullscreen')}
+              >
+                {t('toolPanel.modePrompt.chooseFullscreen', 'Use fullscreen mode')}
+              </Button>
+            </Stack>
+          </Card>
+        </div>
+        <Button
+          variant="subtle"
+          color="gray"
+          radius="md"
+          className="tool-panel-mode-prompt__maybe-later"
+          onClick={handleDismiss}
+        >
+          {t('toolPanel.modePrompt.dismiss', 'Maybe later')}
+        </Button>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default ToolPanelModePrompt;

frontend/src/components/tools/ToolPicker.tsx

@@ -4,9 +4,15 @@ import { useTranslation } from "react-i18next";
 import { ToolRegistryEntry } from "../../data/toolsTaxonomy";
 import "./toolPicker/ToolPicker.css";
 import { useToolSections } from "../../hooks/useToolSections";
+import type { SubcategoryGroup } from "../../hooks/useToolSections";
+import { useFavoriteToolItems } from "../../hooks/tools/useFavoriteToolItems";
 import NoToolsFound from "./shared/NoToolsFound";
 import { renderToolButtons } from "./shared/renderToolButtons";
-import { ToolId } from "src/types/toolId";
+import Badge from "../shared/Badge";
+import SubcategoryHeader from "./shared/SubcategoryHeader";
+import ToolButton from "./toolPicker/ToolButton";
+import { useToolWorkflow } from "../../contexts/ToolWorkflowContext";
+import { ToolId } from "../../types/toolId";
 
 interface ToolPickerProps {
   selectedToolKey: string | null;
@@ -62,11 +68,23 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
   }, []);
 
   const { sections: visibleSections } = useToolSections(filteredTools);
+  const { favoriteTools, toolRegistry } = useToolWorkflow();
+
+  const favoriteToolItems = useFavoriteToolItems(favoriteTools, toolRegistry);
 
   const quickSection = useMemo(
     () => visibleSections.find(s => s.key === 'quick'),
     [visibleSections]
   );
+
+  const recommendedItems = useMemo(() => {
+    if (!quickSection) return [] as Array<{ id: string; tool: ToolRegistryEntry }>;
+    const items: Array<{ id: string; tool: ToolRegistryEntry }> = [];
+    quickSection.subcategories.forEach((sc: SubcategoryGroup) => sc.tools.forEach((toolEntry) => items.push(toolEntry)));
+    return items;
+  }, [quickSection]);
+
+  const recommendedCount = useMemo(() => favoriteToolItems.length + recommendedItems.length, [favoriteToolItems.length, recommendedItems.length]);
   const allSection = useMemo(
     () => visibleSections.find(s => s.key === 'all'),
     [visibleSections]
@@ -88,7 +106,9 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
   };
 
   // Build flat list by subcategory for search mode
-  const { searchGroups } = useToolSections(isSearching ? filteredTools : []);
+  const emptyFilteredTools: ToolPickerProps['filteredTools'] = [];
+  const effectiveFilteredForSearch: ToolPickerProps['filteredTools'] = isSearching ? filteredTools : emptyFilteredTools;
+  const { searchGroups } = useToolSections(effectiveFilteredForSearch);
 
   return (
     <Box
@@ -116,7 +136,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
             {searchGroups.length === 0 ? (
               <NoToolsFound />
             ) : (
-              searchGroups.map(group => renderToolButtons(t, group, selectedToolKey, onSelect))
+                      searchGroups.map(group => renderToolButtons(t, group, selectedToolKey, onSelect, true, false, filteredTools, true))
             )}
           </Stack>
         ) : (
@@ -143,24 +163,46 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
               onClick={() => scrollTo(quickAccessRef)}
             >
               <span style={{ fontSize: "1rem" }}>{t("toolPicker.quickAccess", "QUICK ACCESS")}</span>
-              <span
-                style={{
-                  background: "var(--tool-header-badge-bg)",
-                  color: "var(--tool-header-badge-text)",
-                  borderRadius: ".5rem",
-                  padding: "0.125rem 0.5rem",
-                  fontSize: ".75rem",
-                  fontWeight: 700
-                }}
-              >
-                {quickSection?.subcategories.reduce((acc, sc) => acc + sc.tools.length, 0)}
-              </span>
+              <Badge>
+                {recommendedCount}
+              </Badge>
             </div>
 
             <Box ref={quickAccessRef} w="100%" my="sm">
               <Stack p="sm" gap="xs">
-                {quickSection?.subcategories.map(sc =>
-                  renderToolButtons(t, sc, selectedToolKey, onSelect, false)
+                {favoriteToolItems.length > 0 && (
+                  <Box w="100%">
+                    <SubcategoryHeader label={t('toolPanel.fullscreen.favorites', 'Favourites')} mt={0} />
+                    <div>
+                      {favoriteToolItems.map(({ id, tool }) => (
+                        <ToolButton
+                          key={`fav-${id}`}
+                          id={id}
+                          tool={tool}
+                          isSelected={selectedToolKey === id}
+                          onSelect={onSelect}
+                          hasStars
+                        />
+                      ))}
+                    </div>
+                  </Box>
+                )}
+                {recommendedItems.length > 0 && (
+                  <Box w="100%">
+                    <SubcategoryHeader label={t('toolPanel.fullscreen.recommended', 'Recommended')} />
+                    <div>
+                      {recommendedItems.map(({ id, tool }) => (
+                        <ToolButton
+                          key={`rec-${id}`}
+                          id={id as ToolId}
+                          tool={tool}
+                          isSelected={selectedToolKey === id}
+                          onSelect={onSelect}
+                          hasStars
+                        />
+                      ))}
+                    </div>
+                  </Box>
                 )}
               </Stack>
             </Box>
@@ -189,25 +231,16 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
               onClick={() => scrollTo(allToolsRef)}
             >
               <span style={{ fontSize: "1rem" }}>{t("toolPicker.allTools", "ALL TOOLS")}</span>
-              <span
-                style={{
-                  background: "var(--tool-header-badge-bg)",
-                  color: "var(--tool-header-badge-text)",
-                  borderRadius: ".5rem",
-                  padding: "0.125rem 0.5rem",
-                  fontSize: ".75rem",
-                  fontWeight: 700
-                }}
-              >
+              <Badge>
                 {allSection?.subcategories.reduce((acc, sc) => acc + sc.tools.length, 0)}
-              </span>
+              </Badge>
             </div>
 
             <Box ref={allToolsRef} w="100%">
               <Stack p="sm" gap="xs">
-                {allSection?.subcategories.map(sc =>
-                  renderToolButtons(t, sc, selectedToolKey, onSelect, true)
-                )}
+                        {allSection?.subcategories.map((sc: SubcategoryGroup) =>
+                          renderToolButtons(t, sc, selectedToolKey, onSelect, true, false, undefined, true)
+                        )}
               </Stack>
             </Box>
           </>

frontend/src/components/tools/ToolRenderer.tsx

@@ -1,8 +1,8 @@
 import { Suspense } from "react";
 import { useToolWorkflow } from "../../contexts/ToolWorkflowContext";
 import { BaseToolProps } from "../../types/tool";
+import { ToolId } from "../../types/toolId";
 import ToolLoadingFallback from "./ToolLoadingFallback";
-import { ToolId } from "src/types/toolId";
 
 interface ToolRendererProps extends BaseToolProps {
   selectedToolKey: ToolId;
@@ -17,7 +17,14 @@ const ToolRenderer = ({
 }: ToolRendererProps) => {
   // Get the tool from context (instead of direct hook call)
   const { toolRegistry } = useToolWorkflow();
-  const selectedTool = toolRegistry[selectedToolKey];
+  const selectedTool = (selectedToolKey in toolRegistry)
+    ? toolRegistry[selectedToolKey as ToolId]
+    : undefined;
+
+  // Handle tools that only work in workbenches (read, multiTool)
+  if (selectedTool && !selectedTool.component && selectedTool.workbench) {
+    return null; // These tools render in their workbench, not in the sidebar
+  }
 
   if (!selectedTool || !selectedTool.component) {
     return <div>Tool not found: {selectedToolKey}</div>;

frontend/src/components/tools/addPageNumbers/AddPageNumbersPositionSettings.tsx

@@ -43,7 +43,7 @@ const AddPageNumbersPositionSettings = ({
       <Stack gap="md">
         <Text size="sm" fw={500} mb="xs">{t('addPageNumbers.pagesAndStarting', 'Pages & Starting Number')}</Text>
 
-        <Tooltip content={t('pageSelectionPrompt', 'Specify which pages to add numbers to. Examples: "1,3,5" for specific pages, "1-5" for ranges, "2n" for even pages, or leave blank for all pages.')}>
+        <Tooltip content={t('pageSelectionPrompt', 'Custom Page Selection (Enter a comma-separated list of page numbers 1,5,6 or Functions like 2n+1)')}>
           <TextInput
             label={t('addPageNumbers.selectText.5', 'Pages to Number')}
             value={parameters.pagesToNumber || ''}

frontend/src/components/tools/automate/AutomationCreation.tsx

@@ -10,6 +10,7 @@ import {
   Divider,
   Modal
 } from '@mantine/core';
+import { Z_INDEX_AUTOMATE_MODAL } from '../../../styles/zIndex';
 import CheckIcon from '@mui/icons-material/Check';
 import { ToolRegistry } from '../../../data/toolsTaxonomy';
 import ToolConfigurationModal from './ToolConfigurationModal';
@@ -221,6 +222,7 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
         onClose={handleCancelBack}
         title={t('automate.creation.unsavedChanges.title', 'Unsaved Changes')}
         centered
+        zIndex={Z_INDEX_AUTOMATE_MODAL}
       >
         <Stack gap="md">
           <Text>

frontend/src/components/tools/automate/AutomationEntry.tsx

@@ -8,6 +8,7 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { Tooltip } from '../../shared/Tooltip';
 import { ToolIcon } from '../../shared/ToolIcon';
 import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
+import { ToolId } from 'src/types/toolId';
 
 interface AutomationEntryProps {
   /** Optional title for the automation (usually for custom ones) */
@@ -31,7 +32,7 @@ interface AutomationEntryProps {
   /** Copy handler (for suggested automations) */
   onCopy?: () => void;
   /** Tool registry to resolve operation names */
-  toolRegistry?: Record<string, ToolRegistryEntry>;
+  toolRegistry?: Record<ToolId, ToolRegistryEntry>;
 }
 
 export default function AutomationEntry({
@@ -55,8 +56,8 @@ export default function AutomationEntry({
 
   // Helper function to resolve tool display names
   const getToolDisplayName = (operation: string): string => {
-    if (toolRegistry?.[operation]?.name) {
-      return toolRegistry[operation].name;
+    if (toolRegistry?.[operation as ToolId]?.name) {
+      return toolRegistry[operation as ToolId].name;
     }
     // Fallback to translation or operation key
     return t(`${operation}.title`, operation);

frontend/src/components/tools/automate/AutomationRun.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Text, Stack, Group, Card, Progress } from "@mantine/core";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
@@ -30,7 +30,7 @@ export default function AutomationRun({ automation, onComplete, automateOperatio
   const hasResults = automateOperation?.files.length > 0 || automateOperation?.downloadUrl !== null;
 
   // Initialize execution steps from automation
-  React.useEffect(() => {
+  useEffect(() => {
     if (automation?.operations) {
       const steps = automation.operations.map((op: any, index: number) => {
         const tool = toolRegistry[op.operation as keyof typeof toolRegistry];
@@ -47,7 +47,7 @@ export default function AutomationRun({ automation, onComplete, automateOperatio
   }, [automation, toolRegistry]);
 
   // Cleanup when component unmounts
-  React.useEffect(() => {
+  useEffect(() => {
     return () => {
       // Reset progress state when component unmounts
       setExecutionSteps([]);

frontend/src/components/tools/automate/AutomationSelection.tsx

@@ -7,6 +7,7 @@ import { useSuggestedAutomations } from "../../../hooks/tools/automate/useSugges
 import { AutomationConfig, SuggestedAutomation } from "../../../types/automation";
 import { iconMap } from './iconMap';
 import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
+import { ToolId } from '../../../types/toolId';
 
 interface AutomationSelectionProps {
   savedAutomations: AutomationConfig[];
@@ -15,7 +16,7 @@ interface AutomationSelectionProps {
   onEdit: (automation: AutomationConfig) => void;
   onDelete: (automation: AutomationConfig) => void;
   onCopyFromSuggested: (automation: SuggestedAutomation) => void;
-  toolRegistry: Record<string, ToolRegistryEntry>;
+  toolRegistry: Record<ToolId, ToolRegistryEntry>;
 }
 
 export default function AutomationSelection({

frontend/src/components/tools/automate/ToolConfigurationModal.tsx

@@ -9,6 +9,7 @@ import {
   Text,
   Alert
 } from '@mantine/core';
+import { Z_INDEX_AUTOMATE_MODAL } from '../../../styles/zIndex';
 import SettingsIcon from '@mui/icons-material/Settings';
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
@@ -103,6 +104,7 @@ export default function ToolConfigurationModal({ opened, tool, onSave, onCancel,
       }
       size="lg"
       centered
+      zIndex={Z_INDEX_AUTOMATE_MODAL}
     >
       <Stack gap="md">
         <Text size="sm" c="dimmed">

frontend/src/components/tools/automate/ToolList.tsx

@@ -6,12 +6,13 @@ import CloseIcon from "@mui/icons-material/Close";
 import AddCircleOutline from "@mui/icons-material/AddCircleOutline";
 import { AutomationTool } from "../../../types/automation";
 import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
+import { ToolId } from "../../../types/toolId";
 import ToolSelector from "./ToolSelector";
 import AutomationEntry from "./AutomationEntry";
 
 interface ToolListProps {
   tools: AutomationTool[];
-  toolRegistry: Record<string, ToolRegistryEntry>;
+  toolRegistry: Record<ToolId, ToolRegistryEntry>;
   onToolUpdate: (index: number, updates: Partial<AutomationTool>) => void;
   onToolRemove: (index: number) => void;
   onToolConfigure: (index: number) => void;
@@ -34,7 +35,7 @@ export default function ToolList({
 
   const handleToolSelect = (index: number, newOperation: string) => {
     const defaultParams = getToolDefaultParameters(newOperation);
-    const toolEntry = toolRegistry[newOperation];
+    const toolEntry = toolRegistry[newOperation as ToolId];
     // If tool has no settingsComponent, it's automatically configured
     const isConfigured = !toolEntry?.automationSettings;
 

frontend/src/components/tools/automate/ToolSelector.tsx

@@ -6,12 +6,12 @@ import { useToolSections } from '../../../hooks/useToolSections';
 import { renderToolButtons } from '../shared/renderToolButtons';
 import ToolSearch from '../toolPicker/ToolSearch';
 import ToolButton from '../toolPicker/ToolButton';
-import { ToolId } from 'src/types/toolId';
+import { ToolId } from '../../../types/toolId';
 
 interface ToolSelectorProps {
   onSelect: (toolKey: string) => void;
   excludeTools?: string[];
-  toolRegistry: Record<string, ToolRegistryEntry>; // Pass registry as prop to break circular dependency
+  toolRegistry: Record<ToolId, ToolRegistryEntry>; // Pass registry as prop to break circular dependency
   selectedValue?: string; // For showing current selection when editing existing tool
   placeholder?: string; // Custom placeholder text
 }
@@ -54,16 +54,16 @@ export default function ToolSelector({
 
   // Create filtered tool registry for ToolSearch
   const filteredToolRegistry = useMemo(() => {
-    const registry: Record<string, ToolRegistryEntry> = {};
+    const registry: Record<ToolId, ToolRegistryEntry> = {} as Record<ToolId, ToolRegistryEntry>;
     baseFilteredTools.forEach(([key, tool]) => {
-      registry[key] = tool;
+      registry[key as ToolId] = tool;
     });
     return registry;
   }, [baseFilteredTools]);
 
   // Transform filteredTools to the expected format for useToolSections
   const transformedFilteredTools = useMemo(() => {
-    return filteredTools.map(([id, tool]) => ({ item: [id, tool] as [string, ToolRegistryEntry] }));
+    return filteredTools.map(([id, tool]) => ({ item: [id as ToolId, tool] as [ToolId, ToolRegistryEntry] }));
   }, [filteredTools]);
 
   // Use the same tool sections logic as the main ToolPicker
@@ -89,7 +89,7 @@ export default function ToolSelector({
     }
 
     // Find the "all" section which contains all tools without duplicates
-    const allSection = sections.find(s => (s as any).key === 'all');
+    const allSection = sections.find(s => s.key === 'all');
     return allSection?.subcategories || [];
   }, [isSearching, searchGroups, sections, baseFilteredTools]);
 
@@ -101,7 +101,7 @@ export default function ToolSelector({
 
   const renderedTools = useMemo(() =>
     displayGroups.map((subcategory) =>
-      renderToolButtons(t, subcategory, null, handleToolSelect, !isSearching, true)
+      renderToolButtons(t, subcategory as any, null, handleToolSelect, !isSearching, true)
     ), [displayGroups, handleToolSelect, isSearching, t]
   );
 
@@ -143,8 +143,8 @@ export default function ToolSelector({
 
   // Get display value for selected tool
   const getDisplayValue = () => {
-    if (selectedValue && toolRegistry[selectedValue]) {
-      return toolRegistry[selectedValue].name;
+    if (selectedValue && toolRegistry[selectedValue as ToolId]) {
+      return toolRegistry[selectedValue as ToolId].name;
     }
     return placeholder || t('automate.creation.tools.add', 'Add a tool...');
   };
@@ -153,11 +153,11 @@ export default function ToolSelector({
     <div ref={containerRef} className='rounded-xl'>
       {/* Always show the target - either selected tool or search input */}
 
-        {selectedValue && toolRegistry[selectedValue] && !opened ? (
+        {selectedValue && toolRegistry[selectedValue as ToolId] && !opened ? (
           // Show selected tool in AutomationEntry style when tool is selected and dropdown closed
           <div onClick={handleSearchFocus} style={{ cursor: 'pointer',
            borderRadius: "var(--mantine-radius-lg)" }}>
-            <ToolButton id={'tool' as any /* FIX ME */} tool={toolRegistry[selectedValue]}  isSelected={false}
+            <ToolButton id={'tool' as ToolId} tool={toolRegistry[selectedValue as ToolId]}  isSelected={false}
           onSelect={()=>{}} rounded={true} disableNavigation={true}></ToolButton>
           </div>
         ) : (

frontend/src/components/tools/crop/CropCoordinateInputs.tsx

@@ -35,7 +35,7 @@ const CropCoordinateInputs = ({
 
       <Group grow>
         <NumberInput
-          label={t("crop.coordinates.x", "X Position")}
+          label={t("crop.coordinates.x.label", "X Position")}
           description={showAutomationInfo ? t("crop.coordinates.x.desc", "Left edge (points)") : undefined}
           value={Math.round(cropArea.x * 10) / 10}
           onChange={(value) => onCoordinateChange('x', value)}
@@ -47,7 +47,7 @@ const CropCoordinateInputs = ({
           size={showAutomationInfo ? "sm" : "xs"}
         />
         <NumberInput
-          label={t("crop.coordinates.y", "Y Position")}
+          label={t("crop.coordinates.y.label", "Y Position")}
           description={showAutomationInfo ? t("crop.coordinates.y.desc", "Bottom edge (points)") : undefined}
           value={Math.round(cropArea.y * 10) / 10}
           onChange={(value) => onCoordinateChange('y', value)}
@@ -62,7 +62,7 @@ const CropCoordinateInputs = ({
 
       <Group grow>
         <NumberInput
-          label={t("crop.coordinates.width", "Width")}
+          label={t("crop.coordinates.width.label", "Width")}
           description={showAutomationInfo ? t("crop.coordinates.width.desc", "Crop width (points)") : undefined}
           value={Math.round(cropArea.width * 10) / 10}
           onChange={(value) => onCoordinateChange('width', value)}
@@ -74,7 +74,7 @@ const CropCoordinateInputs = ({
           size={showAutomationInfo ? "sm" : "xs"}
         />
         <NumberInput
-          label={t("crop.coordinates.height", "Height")}
+          label={t("crop.coordinates.height.label", "Height")}
           description={showAutomationInfo ? t("crop.coordinates.height.desc", "Crop height (points)") : undefined}
           value={Math.round(cropArea.height * 10) / 10}
           onChange={(value) => onCoordinateChange('height', value)}

frontend/src/components/tools/fullscreen/CompactToolItem.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { Tooltip } from '../../shared/Tooltip';
+import HotkeyDisplay from '../../hotkeys/HotkeyDisplay';
+import FavoriteStar from '../toolPicker/FavoriteStar';
+import { ToolRegistryEntry, getSubcategoryColor } from '../../../data/toolsTaxonomy';
+import { getIconBackground, getIconStyle, getItemClasses, useToolMeta } from './shared';
+
+interface CompactToolItemProps {
+  id: string;
+  tool: ToolRegistryEntry;
+  isSelected: boolean;
+  onClick: () => void;
+  tooltipPortalTarget?: HTMLElement | undefined;
+}
+
+const CompactToolItem: React.FC<CompactToolItemProps> = ({ id, tool, isSelected, onClick, tooltipPortalTarget }) => {
+  const { t } = useTranslation();
+  const { binding, isFav, toggleFavorite, disabled } = useToolMeta(id, tool);
+  const categoryColor = getSubcategoryColor(tool.subcategoryId);
+  const iconBg = getIconBackground(categoryColor, false);
+  const iconClasses = 'tool-panel__fullscreen-list-icon';
+
+  let iconNode: React.ReactNode = null;
+  if (React.isValidElement<{ style?: React.CSSProperties }>(tool.icon)) {
+    const element = tool.icon as React.ReactElement<{ style?: React.CSSProperties }>;
+    iconNode = React.cloneElement(element, {
+      style: {
+        ...(element.props.style || {}),
+        fontSize: '1.5rem',
+      },
+    });
+  } else {
+    iconNode = tool.icon;
+  }
+
+  const compactButton = (
+    <button
+      type="button"
+      className={`tool-panel__fullscreen-list-item ${getItemClasses(false)} ${isSelected ? 'tool-panel__fullscreen-list-item--selected' : ''} ${!disabled ? 'tool-panel__fullscreen-list-item--with-star' : ''}`}
+      onClick={onClick}
+      aria-disabled={disabled}
+      disabled={disabled}
+    >
+      {tool.icon ? (
+        <span
+          className={iconClasses}
+          aria-hidden
+          style={{
+            background: iconBg,
+            ...getIconStyle(),
+          }}
+        >
+          {iconNode}
+        </span>
+      ) : null}
+      <span className="tool-panel__fullscreen-list-body">
+        <Text fw={600} size="sm" className="tool-panel__fullscreen-name">
+          {tool.name}
+        </Text>
+      </span>
+      {!disabled && (
+        <div className="tool-panel__fullscreen-star-compact">
+          <FavoriteStar
+            isFavorite={isFav}
+            onToggle={toggleFavorite}
+            size="xs"
+          />
+        </div>
+      )}
+    </button>
+  );
+
+  const tooltipContent = disabled
+    ? (
+      <span><strong>{t('toolPanel.fullscreen.comingSoon', 'Coming soon:')}</strong> {tool.description}</span>
+    )
+    : (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
+        <span>{tool.description}</span>
+        {binding && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.75rem' }}>
+            <span style={{ color: 'var(--mantine-color-dimmed)', fontWeight: 500 }}>
+              {t('settings.hotkeys.shortcut', 'Shortcut')}
+            </span>
+            <HotkeyDisplay binding={binding} />
+          </div>
+        )}
+      </div>
+    );
+
+  return (
+    <Tooltip
+      content={tooltipContent}
+      position="top"
+      portalTarget={tooltipPortalTarget}
+      arrow
+      delay={80}
+    >
+      {compactButton}
+    </Tooltip>
+  );
+};
+
+export default CompactToolItem;
+
+

frontend/src/components/tools/fullscreen/DetailedToolItem.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import HotkeyDisplay from '../../hotkeys/HotkeyDisplay';
+import FavoriteStar from '../toolPicker/FavoriteStar';
+import { ToolRegistryEntry, getSubcategoryColor } from '../../../data/toolsTaxonomy';
+import { getIconBackground, getIconStyle, getItemClasses, useToolMeta } from './shared';
+
+interface DetailedToolItemProps {
+  id: string;
+  tool: ToolRegistryEntry;
+  isSelected: boolean;
+  onClick: () => void;
+}
+
+const DetailedToolItem: React.FC<DetailedToolItemProps> = ({ id, tool, isSelected, onClick }) => {
+  const { t } = useTranslation();
+  const { binding, isFav, toggleFavorite, disabled } = useToolMeta(id, tool);
+
+  const categoryColor = getSubcategoryColor(tool.subcategoryId);
+  const iconBg = getIconBackground(categoryColor, true);
+  const iconClasses = 'tool-panel__fullscreen-icon';
+
+  let iconNode: React.ReactNode = null;
+  if (React.isValidElement<{ style?: React.CSSProperties }>(tool.icon)) {
+    const element = tool.icon as React.ReactElement<{ style?: React.CSSProperties }>;
+    iconNode = React.cloneElement(element, {
+      style: {
+        ...(element.props.style || {}),
+        fontSize: '1.75rem',
+      },
+    });
+  } else {
+    iconNode = tool.icon;
+  }
+
+  return (
+    <button
+      type="button"
+      className={`tool-panel__fullscreen-item ${getItemClasses(true)} ${isSelected ? 'tool-panel__fullscreen-item--selected' : ''} tool-panel__fullscreen-item--with-star`}
+      onClick={onClick}
+      aria-disabled={disabled}
+      disabled={disabled}
+    >
+      {tool.icon ? (
+        <span
+          className={iconClasses}
+          aria-hidden
+          style={{
+            background: iconBg,
+            ...getIconStyle(),
+          }}
+        >
+          {iconNode}
+        </span>
+      ) : null}
+      <span className="tool-panel__fullscreen-body">
+        <Text fw={600} size="sm" className="tool-panel__fullscreen-name">
+          {tool.name}
+        </Text>
+        <Text size="sm" c="dimmed" className="tool-panel__fullscreen-description">
+          {tool.description}
+        </Text>
+        {binding && (
+          <div className="tool-panel__fullscreen-shortcut">
+            <span style={{ color: 'var(--mantine-color-dimmed)', fontSize: '0.75rem' }}>
+              {t('settings.hotkeys.shortcut', 'Shortcut')}
+            </span>
+            <HotkeyDisplay binding={binding} size="sm" />
+          </div>
+        )}
+      </span>
+      {!disabled && (
+        <div className="tool-panel__fullscreen-star">
+          <FavoriteStar
+            isFavorite={isFav}
+            onToggle={toggleFavorite}
+            size="sm"
+          />
+        </div>
+      )}
+    </button>
+  );
+};
+
+export default DetailedToolItem;
+
+

frontend/src/components/tools/fullscreen/shared.ts

@@ -0,0 +1,45 @@
+import { useHotkeys } from '../../../contexts/HotkeyContext';
+import { useToolWorkflow } from '../../../contexts/ToolWorkflowContext';
+import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
+import { ToolId } from '../../../types/toolId';
+
+export const getItemClasses = (isDetailed: boolean): string => {
+  return isDetailed ? 'tool-panel__fullscreen-item--detailed' : '';
+};
+
+export const getIconBackground = (categoryColor: string, isDetailed: boolean): string => {
+  const baseColor = isDetailed ? 'var(--fullscreen-bg-icon-detailed)' : 'var(--fullscreen-bg-icon-compact)';
+  const blend1 = isDetailed ? '18%' : '15%';
+  const blend2 = isDetailed ? '8%' : '6%';
+
+  return `linear-gradient(135deg,
+    color-mix(in srgb, ${categoryColor} ${blend1}, ${baseColor}),
+    color-mix(in srgb, ${categoryColor} ${blend2}, ${baseColor})
+  )`;
+};
+
+export const getIconStyle = (): Record<string, string> => {
+  return {};
+};
+
+export const isToolDisabled = (id: string, tool: ToolRegistryEntry): boolean => {
+  return !tool.component && !tool.link && id !== 'read' && id !== 'multiTool';
+};
+
+export function useToolMeta(id: string, tool: ToolRegistryEntry) {
+  const { hotkeys } = useHotkeys();
+  const { isFavorite, toggleFavorite } = useToolWorkflow();
+
+  const isFav = isFavorite(id as ToolId);
+  const binding = hotkeys[id as ToolId];
+  const disabled = isToolDisabled(id, tool);
+
+  return {
+    binding,
+    isFav,
+    toggleFavorite: () => toggleFavorite(id as ToolId),
+    disabled,
+  };
+}
+
+

frontend/src/components/tools/overlayPdfs/OverlayPdfsSettings.module.css

@@ -0,0 +1,50 @@
+.fileListContainer {
+  max-height: 16.25rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 100%;
+}
+
+.fileItem {
+  border: 1px solid var(--mantine-color-gray-3);
+  border-radius: var(--mantine-radius-sm);
+  align-items: center;
+  width: 100%;
+}
+
+.fileNameContainer {
+  flex: 1;
+  min-width: 0;
+}
+
+.fileName {
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 400;
+  line-height: 1.2;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.fileSize {
+  flex-shrink: 0;
+}
+
+.removeButton {
+  flex-shrink: 0;
+}
+
+.countLabel {
+  width: 140px;
+  flex-shrink: 0;
+}
+
+.fileGroup {
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+}

frontend/src/components/tools/overlayPdfs/OverlayPdfsSettings.tsx

@@ -0,0 +1,178 @@
+import { Stack, Text, Group, Select, SegmentedControl, NumberInput, Button, ActionIcon, Divider } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { type OverlayPdfsParameters, type OverlayMode } from '../../../hooks/tools/overlayPdfs/useOverlayPdfsParameters';
+import LocalIcon from '../../shared/LocalIcon';
+import { useFilesModalContext } from '../../../contexts/FilesModalContext';
+import styles from './OverlayPdfsSettings.module.css';
+
+interface OverlayPdfsSettingsProps {
+  parameters: OverlayPdfsParameters;
+  onParameterChange: <K extends keyof OverlayPdfsParameters>(key: K, value: OverlayPdfsParameters[K]) => void;
+  disabled?: boolean;
+}
+
+export default function OverlayPdfsSettings({ parameters, onParameterChange, disabled = false }: OverlayPdfsSettingsProps) {
+  const { t } = useTranslation();
+  const { openFilesModal } = useFilesModalContext();
+
+  const handleOverlayFilesChange = (files: File[]) => {
+    onParameterChange('overlayFiles', files);
+    // Reset counts to match number of files if in FixedRepeatOverlay
+    if (parameters.overlayMode === 'FixedRepeatOverlay') {
+      const nextCounts = files.map((_, i) => parameters.counts[i] && parameters.counts[i] > 0 ? parameters.counts[i] : 1);
+      onParameterChange('counts', nextCounts);
+    }
+  };
+
+  const handleModeChange = (mode: OverlayMode) => {
+    onParameterChange('overlayMode', mode);
+    if (mode !== 'FixedRepeatOverlay') {
+      onParameterChange('counts', []);
+    } else if (parameters.overlayFiles?.length > 0) {
+      onParameterChange('counts', parameters.overlayFiles.map((_, i) => parameters.counts[i] && parameters.counts[i] > 0 ? parameters.counts[i] : 1));
+    }
+  };
+
+  const handleOpenOverlayFilesModal = () => {
+    if (disabled) return;
+    openFilesModal({
+      customHandler: (files: File[]) => {
+        handleOverlayFilesChange([...(parameters.overlayFiles || []), ...files]);
+      }
+    });
+  };
+
+  return (
+    <Stack gap="md">
+
+      <Stack gap="xs">
+        <Text size="sm" fw={500}>{t('overlay-pdfs.mode.label', 'Overlay Mode')}</Text>
+        <Select
+          data={[
+            { value: 'SequentialOverlay', label: t('overlay-pdfs.mode.sequential', 'Sequential Overlay') },
+            { value: 'InterleavedOverlay', label: t('overlay-pdfs.mode.interleaved', 'Interleaved Overlay') },
+            { value: 'FixedRepeatOverlay', label: t('overlay-pdfs.mode.fixedRepeat', 'Fixed Repeat Overlay') },
+          ]}
+          value={parameters.overlayMode}
+          onChange={(v) => handleModeChange((v || 'SequentialOverlay') as OverlayMode)}
+          disabled={disabled}
+        />
+      </Stack>
+
+      <Divider />
+
+      <Stack gap="xs">
+        <Text size="sm" fw={500}>{t('overlay-pdfs.position.label', 'Overlay Position')}</Text>
+        <SegmentedControl
+          value={String(parameters.overlayPosition)}
+          onChange={(v) => onParameterChange('overlayPosition', (v === '1' ? 1 : 0) as 0 | 1)}
+          data={[
+            { label: t('overlay-pdfs.position.foreground', 'Foreground'), value: '0' },
+            { label: t('overlay-pdfs.position.background', 'Background'), value: '1' },
+          ]}
+          disabled={disabled}
+        />
+      </Stack>
+
+      {parameters.overlayMode === 'FixedRepeatOverlay' && (
+        <>
+          <Divider />
+          <Stack gap="xs">
+            <Text size="sm" fw={500}>{t('overlay-pdfs.counts.label', 'Overlay Counts')}</Text>
+            {parameters.overlayFiles?.length > 0 ? (
+              <Stack gap="xs">
+                {parameters.overlayFiles.map((_, index) => (
+                  <Group key={index} gap="xs" wrap="nowrap">
+                    <Text size="sm" className={styles.countLabel}>
+                      {t('overlay-pdfs.counts.item', 'Count for file')} {index + 1}
+                    </Text>
+                    <NumberInput
+                      min={1}
+                      step={1}
+                      value={parameters.counts[index] ?? 1}
+                      onChange={(value) => {
+                        const next = [...(parameters.counts || [])];
+                        next[index] = Number(value) || 1;
+                        onParameterChange('counts', next);
+                      }}
+                      disabled={disabled}
+                    />
+                  </Group>
+                ))}
+              </Stack>
+            ) : (
+              <Text size="sm" c="dimmed">
+                {t('overlay-pdfs.counts.noFiles', 'Add overlay files to configure counts')}
+              </Text>
+            )}
+          </Stack>
+        </>
+      )}
+
+      <Divider />
+
+      <Stack gap="xs">
+        <Text size="sm" fw={500}>{t('overlay-pdfs.overlayFiles.label', 'Overlay Files')}</Text>
+        <Button
+          size="xs"
+          color="blue"
+          onClick={handleOpenOverlayFilesModal}
+          disabled={disabled}
+          leftSection={<LocalIcon icon="add" width="14" height="14" />}
+          fullWidth
+        >
+          {parameters.overlayFiles?.length > 0
+            ? t('overlay-pdfs.overlayFiles.addMore', 'Add more PDFs...')
+            : t('overlay-pdfs.overlayFiles.placeholder', 'Choose PDF(s)...')}
+        </Button>
+
+        {parameters.overlayFiles?.length > 0 && (() => {
+          return (
+            <div className={styles.fileListContainer}>
+              <Stack gap="xs">
+                {parameters.overlayFiles.map((file, index) => (
+                  <Group
+                    key={index}
+                    justify="space-between"
+                    p="xs"
+                    className={styles.fileItem}
+                  >
+                    <Group gap="xs" className={styles.fileGroup}>
+                      <div className={styles.fileNameContainer}>
+                        <div
+                          className={styles.fileName}
+                          title={file.name}
+                        >
+                          {file.name}
+                        </div>
+                      </div>
+                      <Text size="xs" c="dimmed" className={styles.fileSize}>
+                        ({(file.size / 1024).toFixed(1)} KB)
+                      </Text>
+                    </Group>
+                    <ActionIcon
+                      size="sm"
+                      variant="subtle"
+                      color="red"
+                      className={styles.removeButton}
+                      onClick={() => {
+                        const next = (parameters.overlayFiles || []).filter((_, i) => i !== index);
+                        handleOverlayFilesChange(next);
+                      }}
+                      disabled={disabled}
+                    >
+                      <LocalIcon icon="close-rounded" width="14" height="14" />
+                    </ActionIcon>
+                  </Group>
+                ))}
+              </Stack>
+            </div>
+          );
+        })()}
+      </Stack>
+
+    </Stack>
+  );
+}
+
+

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

@@ -15,7 +15,8 @@ export const renderToolButtons = (
   onSelect: (id: ToolId) => void,
   showSubcategoryHeader: boolean = true,
   disableNavigation: boolean = false,
-  searchResults?: Array<{ item: [string, any]; matchedText?: string }>
+  searchResults?: Array<{ item: [string, any]; matchedText?: string }>,
+  hasStars: boolean = false
 ) => {
   // Create a map of matched text for quick lookup
   const matchedTextMap = new Map<string, string>();
@@ -43,6 +44,7 @@ export const renderToolButtons = (
               onSelect={onSelect}
               disableNavigation={disableNavigation}
               matchedSynonym={matchedSynonym}
+              hasStars={hasStars}
             />
           );
         })}

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

@@ -0,0 +1,48 @@
+import React from "react";
+import { ActionIcon } from "@mantine/core";
+import type { MantineSize } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import StarRoundedIcon from '@mui/icons-material/StarRounded';
+import StarBorderRoundedIcon from '@mui/icons-material/StarBorderRounded';
+
+interface FavoriteStarProps {
+  isFavorite: boolean;
+  onToggle: () => void;
+  className?: string;
+  size?: MantineSize;
+}
+
+const FavoriteStar: React.FC<FavoriteStarProps> = ({ isFavorite, onToggle, className, size = "xs" }) => {
+  const { t } = useTranslation();
+
+  return (
+    <ActionIcon
+      component="span"
+      variant="subtle"
+      radius="xl"
+      size={size}
+      onClick={(e: React.MouseEvent) => {
+        e.stopPropagation();
+        onToggle();
+      }}
+      onMouseDown={(e: React.MouseEvent) => {
+        e.stopPropagation();
+      }}
+      onKeyDown={(e: React.KeyboardEvent) => {
+        e.stopPropagation();
+      }}
+      className={className}
+      aria-label={isFavorite ? t('toolPanel.fullscreen.unfavorite', 'Remove from favourites') : t('toolPanel.fullscreen.favorite', 'Add to favourites')}
+    >
+      {isFavorite ? (
+        <StarRoundedIcon fontSize="inherit" style={{ color: 'var(--special-color-favorites)', fontSize: '1rem' }} />
+      ) : (
+        <StarBorderRoundedIcon fontSize="inherit" style={{ fontSize: '1rem' }} />
+      )}
+    </ActionIcon>
+  );
+};
+
+export default FavoriteStar;
+
+

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

@@ -9,7 +9,9 @@ import { handleUnlessSpecialClick } from "../../../utils/clickHandlers";
 import FitText from "../../shared/FitText";
 import { useHotkeys } from "../../../contexts/HotkeyContext";
 import HotkeyDisplay from "../../hotkeys/HotkeyDisplay";
-import { ToolId } from "src/types/toolId";
+import FavoriteStar from "./FavoriteStar";
+import { useToolWorkflow } from "../../../contexts/ToolWorkflowContext";
+import { ToolId } from "../../../types/toolId";
 
 interface ToolButtonProps {
   id: ToolId;
@@ -19,15 +21,18 @@ interface ToolButtonProps {
   rounded?: boolean;
   disableNavigation?: boolean;
   matchedSynonym?: string;
+  hasStars?: boolean;
 }
 
-const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect, disableNavigation = false, matchedSynonym }) => {
+const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect, disableNavigation = false, matchedSynonym, hasStars = false }) => {
   const { t } = useTranslation();
   // Special case: read and multiTool are navigational tools that are always available
   const isUnavailable = !tool.component && !tool.link && id !== 'read' && id !== 'multiTool';
   const { hotkeys } = useHotkeys();
   const binding = hotkeys[id];
   const { getToolNavigation } = useToolNavigation();
+  const { isFavorite, toggleFavorite } = useToolWorkflow();
+  const fav = isFavorite(id as ToolId);
 
   const handleClick = (id: ToolId) => {
     if (isUnavailable) return;
@@ -107,8 +112,12 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
       fullWidth
       justify="flex-start"
       className="tool-button"
-      styles={{
-        root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", overflow: 'visible' },
+      styles={{ 
+        root: { 
+          borderRadius: 0, 
+          color: "var(--tools-text-and-icon-color)", 
+          overflow: 'visible'
+        },
         label: { overflow: 'visible' }
       }}
     >
@@ -128,8 +137,12 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
       fullWidth
       justify="flex-start"
       className="tool-button"
-      styles={{
-        root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", overflow: 'visible' },
+      styles={{ 
+        root: { 
+          borderRadius: 0, 
+          color: "var(--tools-text-and-icon-color)", 
+          overflow: 'visible'
+        },
         label: { overflow: 'visible' }
       }}
     >
@@ -146,16 +159,36 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
       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, overflow: 'visible' }, label: { overflow: 'visible' } }}
+      styles={{
+        root: { 
+          borderRadius: 0, 
+          color: "var(--tools-text-and-icon-color)", 
+          cursor: isUnavailable ? 'not-allowed' : undefined, 
+          overflow: 'visible'
+        }, 
+        label: { overflow: 'visible' } 
+      }}
     >
       {buttonContent}
     </Button>
   );
 
+  const star = hasStars && !isUnavailable ? (
+    <FavoriteStar
+      isFavorite={fav}
+      onToggle={() => toggleFavorite(id as ToolId)}
+      className="tool-button-star"
+      size="xs"
+    />
+  ) : null;
+
   return (
-    <Tooltip content={tooltipContent} position="right" arrow={true} delay={500}>
-      {buttonElement}
-    </Tooltip>
+    <div className="tool-button-container">
+      {star}
+      <Tooltip content={tooltipContent} position="right" arrow={true} delay={500}>
+        {buttonElement}
+      </Tooltip>
+    </div>
   );
 };
 

frontend/src/components/tools/toolPicker/ToolPicker.css

@@ -71,6 +71,24 @@
   line-height: 1;
 }
 
+/* Container to enable hover-only favourite star overlay */
+.tool-button-container {
+  position: relative;
+}
+
+.tool-button-star {
+  position: absolute;
+  top: 0.35rem;
+  right: 0.35rem;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: var(--z-toolpicker-star); /* lower than sticky section headers */
+}
+
+.tool-button-container:hover .tool-button-star {
+  opacity: 1;
+}
+
 .search-input-container {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;

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

@@ -6,12 +6,13 @@ import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
 import { TextInput } from "../../shared/TextInput";
 import "./ToolPicker.css";
 import { rankByFuzzy, idToWords } from "../../../utils/fuzzySearch";
+import { ToolId } from "src/types/toolId";
 
 interface ToolSearchProps {
   value: string;
   onChange: (value: string) => void;
-  toolRegistry: Readonly<Record<string, ToolRegistryEntry>>;
-  onToolSelect?: (toolId: string) => void;
+  toolRegistry: Partial<Record<ToolId, ToolRegistryEntry>>;
+  onToolSelect?: (toolId: ToolId) => void;
   mode: "filter" | "dropdown" | "unstyled";
   selectedToolKey?: string | null;
   placeholder?: string;
@@ -81,15 +82,15 @@ const ToolSearch = ({
   }, [autoFocus]);
 
   const searchInput = (
-      <TextInput
-        ref={searchRef}
-        value={value}
-        onChange={handleSearchChange}
-        placeholder={placeholder || t("toolPicker.searchPlaceholder", "Search tools...")}
-        icon={hideIcon ? undefined : <LocalIcon icon="search-rounded" width="1.5rem" height="1.5rem" />}
-        autoComplete="off"
-        onFocus={onFocus}
-      />
+        <TextInput
+          ref={searchRef}
+          value={value}
+          onChange={handleSearchChange}
+          placeholder={placeholder || t("toolPicker.searchPlaceholder", "Search tools...")}
+          icon={hideIcon ? undefined : <LocalIcon icon="search-rounded" width="1.5rem" height="1.5rem" />}
+          autoComplete="off"
+          onFocus={onFocus}
+        />
   );
 
   if (mode === "filter") {
@@ -126,7 +127,7 @@ const ToolSearch = ({
                 key={id}
                 variant="subtle"
                 onClick={() => {
-                  onToolSelect?.(id);
+                  onToolSelect?.(id as ToolId);
                   setDropdownOpen(false);
                 }}
                 leftSection={<div style={{ color: "var(--tools-text-and-icon-color)" }}>{tool.icon}</div>}

frontend/src/components/tools/validateSignature/ValidateSignatureReportView.tsx

@@ -0,0 +1,145 @@
+import React, { useMemo } from 'react';
+import { Badge, Group, Stack, Text, Divider } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import type { SignatureValidationReportData } from '../../../types/validateSignature';
+import './reportView/styles.css';
+import ThumbnailPreview from './reportView/ThumbnailPreview';
+import FileSummaryHeader from './reportView/FileSummaryHeader';
+import SignatureSection from './reportView/SignatureSection';
+
+interface ValidateSignatureReportViewProps {
+  data: SignatureValidationReportData;
+}
+
+const NoSignatureSection = ({ message, label }: { message: string; label: string }) => (
+  <Stack align="center" justify="center" gap="xs" style={{ minHeight: 360, width: '100%' }}>
+    <Badge color="gray" variant="light" size="lg" style={{ textTransform: 'uppercase' }}>
+      {label}
+    </Badge>
+    <Text size="sm" c="dimmed" style={{ textAlign: 'center' }}>
+      {message}
+    </Text>
+  </Stack>
+);
+
+const ValidateSignatureReportView: React.FC<ValidateSignatureReportViewProps> = ({ data }) => {
+  const { t } = useTranslation();
+  const noSignaturesLabel = t('validateSignature.noSignaturesShort', 'No signatures');
+
+  const pages = useMemo(() => {
+    const result: Array<{
+      entry: SignatureValidationReportData['entries'][number];
+      signatureIndex: number | null;
+      includeSummary: boolean;
+    }> = [];
+
+    for (const entry of data.entries) {
+      if (entry.signatures.length === 0 || entry.error) {
+        result.push({ entry, signatureIndex: null, includeSummary: true });
+        continue;
+      }
+
+      // First page includes summary and the first signature
+      result.push({ entry, signatureIndex: 0, includeSummary: true });
+
+      // Subsequent signatures each get their own page
+      for (let i = 1; i < entry.signatures.length; i += 1) {
+        result.push({ entry, signatureIndex: i, includeSummary: false });
+      }
+    }
+
+    return result;
+  }, [data.entries]);
+
+  return (
+    <div className="report-container">
+      <Stack gap="xl" align="center">
+        <Stack gap="xs" align="center">
+          <Badge size="lg" color="blue" variant="light">
+            {t('validateSignature.report.title', 'Signature Validation Report')}
+          </Badge>
+          <Text size="sm" c="dimmed">
+            {t('validateSignature.report.generatedAt', 'Generated')}{' '}
+            {new Date(data.generatedAt).toLocaleString()}
+          </Text>
+        </Stack>
+
+        {pages.map((pageDef, index) => (
+          <div className="simulated-page" key={`${pageDef.entry.fileId}-${index}`}>
+            <Stack gap="lg" style={{ flex: 1 }}>
+              {pageDef.includeSummary && (
+                <>
+                  <Group align="flex-start" gap="lg">
+                    <ThumbnailPreview
+                      thumbnailUrl={pageDef.entry.thumbnailUrl}
+                      fileName={pageDef.entry.fileName}
+                    />
+                    <Stack gap="sm" style={{ flex: 1 }}>
+                      <Group justify="space-between" align="flex-start">
+                        <div>
+                          <Text fw={700} size="xl" style={{ lineHeight: 1.1 }}>
+                            {pageDef.entry.fileName}
+                          </Text>
+                          <Text size="sm" c="dimmed">
+                            {t('validateSignature.report.entryLabel', 'Signature Summary')}
+                          </Text>
+                        </div>
+                        <Badge color="gray" variant="light">
+                          {t('validateSignature.report.page', 'Page')} {index + 1}
+                        </Badge>
+                      </Group>
+
+                      <FileSummaryHeader
+                        fileSize={pageDef.entry.fileSize}
+                        createdAt={pageDef.entry.createdAtLabel ?? null}
+                        totalSignatures={pageDef.entry.signatures.length}
+                        lastSignatureDate={pageDef.entry.signatures[0]?.signatureDate}
+                      />
+                    </Stack>
+                  </Group>
+
+                  <Divider />
+                </>
+              )}
+
+              {pageDef.entry.error ? (
+                <NoSignatureSection
+                  message={pageDef.entry.error}
+                  label={t('validateSignature.status.invalid', 'Invalid')}
+                />
+              ) : pageDef.entry.signatures.length === 0 ? (
+                <NoSignatureSection
+                  message={t(
+                    'validateSignature.noSignatures',
+                    'No digital signatures found in this document'
+                  )}
+                  label={noSignaturesLabel}
+                />
+              ) : (
+                <Stack gap="xl">
+                  {pageDef.signatureIndex === null ? null : (
+                    <SignatureSection
+                      signature={pageDef.entry.signatures[pageDef.signatureIndex]}
+                      index={pageDef.signatureIndex}
+                    />
+                  )}
+                </Stack>
+              )}
+            </Stack>
+
+            <Group justify="space-between" align="center" mt="auto" pt="md">
+              <Text size="xs" c="dimmed">
+                {t('validateSignature.report.footer', 'Validated via Stirling PDF')}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {t('validateSignature.report.page', 'Page')} {index + 1} / {pages.length}
+              </Text>
+            </Group>
+          </div>
+        ))}
+      </Stack>
+    </div>
+  );
+};
+
+export default ValidateSignatureReportView;

frontend/src/components/tools/validateSignature/ValidateSignatureResults.tsx

@@ -0,0 +1,223 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Alert, Badge, Button, Divider, Group, Loader, Stack, Text, SegmentedControl } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import type { SignatureValidationReportEntry } from '../../../types/validateSignature';
+import type { ValidateSignatureOperationHook } from '../../../hooks/tools/validateSignature/useValidateSignatureOperation';
+import './reportView/styles.css';
+import FitText from '../../shared/FitText';
+import { SuggestedToolsSection } from '../shared/SuggestedToolsSection';
+
+interface ValidateSignatureResultsProps {
+  operation: ValidateSignatureOperationHook;
+  results: SignatureValidationReportEntry[];
+  isLoading: boolean;
+  errorMessage: string | null;
+  reportAvailable?: boolean;
+}
+
+const useFileSummary = (results: SignatureValidationReportEntry[]) => {
+  return useMemo(() => {
+    if (results.length === 0) {
+      return { fileCount: 0, signatureCount: 0, fullyValidCount: 0 };
+    }
+
+    let signatureCount = 0;
+    let fullyValidCount = 0;
+
+    results.forEach((result) => {
+      signatureCount += result.signatures.length;
+      result.signatures.forEach((signature) => {
+        const isValid = signature.valid;
+        if (isValid) {
+          fullyValidCount += 1;
+        }
+      });
+    });
+
+    return {
+      fileCount: results.length,
+      signatureCount,
+      fullyValidCount,
+    };
+  }, [results]);
+};
+
+const findFileByExtension = (files: File[], extension: string) => {
+  return files.find((file) => file.name.toLowerCase().endsWith(extension));
+};
+
+const ValidateSignatureResults = ({
+  operation,
+  results,
+  isLoading,
+  errorMessage,
+}: ValidateSignatureResultsProps) => {
+  const { t } = useTranslation();
+  const summary = useFileSummary(results);
+
+  const pdfFile = useMemo(() => findFileByExtension(operation.files, '.pdf'), [operation.files]);
+  const csvFile = useMemo(() => findFileByExtension(operation.files, '.csv'), [operation.files]);
+  const jsonFile = useMemo(() => findFileByExtension(operation.files, '.json'), [operation.files]);
+
+  const [selectedType, setSelectedType] = useState<'pdf' | 'csv' | 'json'>('pdf');
+
+  const selectedFile = useMemo(() => {
+    if (selectedType === 'pdf') return pdfFile ?? null;
+    if (selectedType === 'csv') return csvFile ?? null;
+    return jsonFile ?? null;
+  }, [selectedType, pdfFile, csvFile, jsonFile]);
+
+  const selectedDownloadLabel = useMemo(() => {
+    if (selectedType === 'pdf') return t('validateSignature.downloadPdf', 'Download PDF Report');
+    if (selectedType === 'csv') return t('validateSignature.downloadCsv', 'Download CSV');
+    return t('validateSignature.downloadJson', 'Download JSON');
+  }, [selectedType, t]);
+
+  const downloadTypeOptions = [
+    { label: t('validateSignature.downloadType.pdf', 'PDF'), value: 'pdf' },
+    { label: t('validateSignature.downloadType.csv', 'CSV'), value: 'csv' },
+    { label: t('validateSignature.downloadType.json', 'JSON'), value: 'json' },
+  ];
+
+  const handleDownload = useCallback((file: File) => {
+    const blobUrl = URL.createObjectURL(file);
+    const link = document.createElement('a');
+    link.href = blobUrl;
+    link.download = file.name;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(blobUrl);
+  }, []);
+
+  // Show the big loader only while we're still waiting for the first results.
+  if (isLoading && results.length === 0) {
+    return (
+      <Group justify="center" gap="sm" py="md">
+        <Loader size="sm" />
+        <Text>{t('validateSignature.processing', 'Validating signatures...')}</Text>
+      </Group>
+    );
+  }
+
+  if (!isLoading && results.length === 0) {
+    return (
+      <Alert color="gray" variant="light" title={t('validateSignature.results', 'Validation Results')}>
+        <Text size="sm">{t('validateSignature.noResults', 'Run the validation to generate a report.')}</Text>
+      </Alert>
+    );
+  }
+
+  return (
+    <Stack gap="md">
+      {/* While results are visible but background work continues (e.g. generating files),
+          show a light inline indicator without blocking downloads UI. */}
+      {isLoading && results.length > 0 && (
+        <Group justify="center" gap="xs">
+          <Loader size="xs" />
+          <Text size="sm">{t('validateSignature.finalizing', 'Preparing downloads...')}</Text>
+        </Group>
+      )}
+      {errorMessage && (
+        <Alert color="yellow" variant="light">
+          <Text size="sm">{errorMessage}</Text>
+        </Alert>
+      )}
+
+      <Group gap="sm">
+        <Badge color="blue" variant="light">
+          {t('validateSignature.report.filesEvaluated', '{{count}} files evaluated', {
+            count: summary.fileCount,
+          })}
+        </Badge>
+        <Badge color="teal" variant="light">
+          {t('validateSignature.report.signaturesFound', '{{count}} signatures detected', {
+            count: summary.signatureCount,
+          })}
+        </Badge>
+        {summary.signatureCount > 0 && (
+          <Badge color="green" variant="light">
+            {t('validateSignature.report.signaturesValid', '{{count}} fully valid', {
+              count: summary.fullyValidCount,
+            })}
+          </Badge>
+        )}
+      </Group>
+
+      <Stack gap="sm" style={{ maxHeight: '20rem', overflowY: 'auto' }}>
+        {results.map((result) => {
+          const hasError = Boolean(result.error);
+          const hasSignatures = result.signatures.length > 0;
+          const allValid = hasSignatures && result.signatures.every((signature) => signature.valid);
+          const badgeLabel = hasError
+            ? t('validateSignature.status.invalid', 'Invalid')
+            : hasSignatures
+            ? allValid
+              ? t('validateSignature.status.valid', 'Valid')
+              : t('validateSignature.status.invalid', 'Invalid')
+            : t('validateSignature.noSignaturesShort', 'No signatures');
+          const badgeClass = hasError
+            ? 'status-badge status-badge--invalid'
+            : hasSignatures
+            ? allValid
+              ? 'status-badge status-badge--valid'
+              : 'status-badge status-badge--warning'
+            : 'status-badge status-badge--neutral';
+
+          return (
+            <Stack key={result.fileId} gap={4} p="xs" style={{ borderLeft: '2px solid var(--mantine-color-gray-4)' }}>
+              <Group justify="space-between" align="flex-start">
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <FitText text={result.fileName} lines={2} as="div" minimumFontScale={0.5} style={{ fontWeight: 600 }} />
+                </div>
+                <Badge className={badgeClass} variant="light">
+                  {badgeLabel}
+                </Badge>
+              </Group>
+              <Text size="xs" c="dimmed">
+                {t('validateSignature.report.signatureCountLabel', '{{count}} signatures', {
+                  count: result.signatures.length,
+                })}
+              </Text>
+              {!result.error && result.signatures.length === 0 && (
+                <Text size="xs" c="dimmed">
+                  {t('validateSignature.noSignatures', 'No digital signatures found in this document')}
+                </Text>
+              )}
+            </Stack>
+          );
+        })}
+      </Stack>
+
+      <Divider />
+
+      <Stack gap="xs">
+        <Text size="sm" fw={600}>
+          {t('validateSignature.report.downloads', 'Downloads')}
+        </Text>
+        <SegmentedControl
+          value={selectedType}
+          onChange={(v) => setSelectedType(v as 'pdf' | 'csv' | 'json')}
+          data={downloadTypeOptions}
+        />
+        <Button
+          color="blue"
+          onClick={() => selectedFile && handleDownload(selectedFile)}
+          disabled={!selectedFile}
+          fullWidth
+        >
+          {selectedDownloadLabel}
+        </Button>
+        {selectedType === 'pdf' && !pdfFile && (
+          <Text size="xs" c="dimmed">
+            {t('validateSignature.report.noPdf', 'PDF report will be available after a successful validation.')}
+          </Text>
+        )}
+      </Stack>
+
+      <SuggestedToolsSection />
+    </Stack>
+  );
+};
+
+export default ValidateSignatureResults;

frontend/src/components/tools/validateSignature/ValidateSignatureSettings.tsx

@@ -0,0 +1,67 @@
+import { Card, Group, Stack, Text, Button } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import FileUploadButton from '../../shared/FileUploadButton';
+import { ValidateSignatureParameters } from '../../../hooks/tools/validateSignature/useValidateSignatureParameters';
+
+interface ValidateSignatureSettingsProps {
+  parameters: ValidateSignatureParameters;
+  onParameterChange: <K extends keyof ValidateSignatureParameters>(parameter: K, value: ValidateSignatureParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const ValidateSignatureSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false,
+}: ValidateSignatureSettingsProps) => {
+  const { t } = useTranslation();
+  const certFile = parameters.certFile;
+
+  const handleCertFileChange = (file: File | null) => {
+    onParameterChange('certFile', file);
+  };
+
+  return (
+    <Card withBorder radius="md" padding="md">
+      <Stack gap="sm">
+        <div>
+          <Text fw={600}>{t('validateSignature.selectCustomCert', 'Custom Certificate File X.509 (Optional)')}</Text>
+          <Text size="sm" c="dimmed">
+            {t(
+              'validateSignature.settings.certHint',
+              'Upload a trusted X.509 certificate to validate against a custom trust source.'
+            )}
+          </Text>
+        </div>
+
+        <Group align="center" gap="sm">
+          <FileUploadButton
+            file={certFile ?? undefined}
+            onChange={handleCertFileChange}
+            accept=".cer,.crt,.pem,.der"
+            disabled={disabled}
+            variant="filled"
+          />
+          {certFile && (
+            <Button
+              variant="subtle"
+              color="gray"
+              onClick={() => handleCertFileChange(null)}
+              disabled={disabled}
+            >
+              {t('sign.clear', 'Clear')}
+            </Button>
+          )}
+        </Group>
+
+        {certFile && (
+          <Text size="xs" c="dimmed">
+            {t('size', 'Size')}: {Math.round(certFile.size / 1024)} KB
+          </Text>
+        )}
+      </Stack>
+    </Card>
+  );
+};
+
+export default ValidateSignatureSettings;

frontend/src/components/tools/validateSignature/reportView/FieldBlock.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Text } from '@mantine/core';
+import './styles.css';
+
+const FieldBlock = (label: string, value: React.ReactNode) => {
+  const displayValue =
+    value === null || value === undefined || value === '' ? '-' : value;
+
+  return (
+    <div className="field-container" key={label}>
+      <Text size="xs" fw={600} c="dimmed" tt="uppercase" style={{ letterSpacing: 0.6 }}>
+        {label}
+      </Text>
+      <div className="field-value">
+        <Text size="sm" fw={500} style={{ lineHeight: 1.35, whiteSpace: 'pre-wrap' }}>
+          {displayValue}
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+export default FieldBlock;

frontend/src/components/tools/validateSignature/reportView/FileSummaryHeader.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import './styles.css';
+import FieldBlock from './FieldBlock';
+
+const formatDate = (value?: string | null) => {
+  if (!value) return '--';
+  const parsed = Date.parse(value);
+  if (!Number.isNaN(parsed)) {
+    return new Date(parsed).toLocaleString();
+  }
+  return value;
+};
+
+const formatFileSize = (bytes?: number | null) => {
+  if (bytes === undefined || bytes === null) return '--';
+  if (bytes === 0) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const size = bytes / Math.pow(1024, exponent);
+  return `${size.toFixed(exponent === 0 ? 0 : 1)} ${units[exponent]}`;
+};
+
+const FileSummaryHeader = ({
+  fileSize,
+  createdAt,
+  totalSignatures,
+  lastSignatureDate,
+}: {
+  fileSize?: number | null;
+  createdAt?: string | null;
+  totalSignatures: number;
+  lastSignatureDate?: string | null;
+}) => {
+  const { t } = useTranslation();
+  const infoBlocks = [
+    FieldBlock(t('files.size', 'File Size'), formatFileSize(fileSize ?? null)),
+    FieldBlock(t('files.created', 'Created'), createdAt || '-'),
+    FieldBlock(t('validateSignature.signatureDate', 'Signature Date'), formatDate(lastSignatureDate)),
+    FieldBlock(t('validateSignature.totalSignatures', 'Total Signatures'), totalSignatures.toString()),
+  ];
+
+  return <div className="grid-container">{infoBlocks}</div>;
+};
+
+export default FileSummaryHeader;
+

frontend/src/components/tools/validateSignature/reportView/SignatureSection.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Divider, Group, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import type { SignatureValidationSignature } from '../../../../types/validateSignature';
+import SignatureStatusBadge from './SignatureStatusBadge';
+import FieldBlock from './FieldBlock';
+import './styles.css';
+
+const formatDate = (value?: string | null) => {
+  if (!value) return '-';
+  const parsed = Date.parse(value);
+  if (!Number.isNaN(parsed)) {
+    return new Date(parsed).toLocaleString();
+  }
+  return value;
+};
+
+const SignatureSection = ({
+  signature,
+  index,
+}: {
+  signature: SignatureValidationSignature;
+  index: number;
+}) => {
+  const { t } = useTranslation();
+  const signatureFields = [
+    FieldBlock(t('validateSignature.signer', 'Signer'), signature.signerName || '-'),
+    FieldBlock(t('validateSignature.date', 'Date'), formatDate(signature.signatureDate)),
+    FieldBlock(t('validateSignature.reason', 'Reason'), signature.reason || '-'),
+    FieldBlock(t('validateSignature.location', 'Location'), signature.location || '-'),
+  ];
+
+  const certificateFields = [
+    FieldBlock(t('validateSignature.cert.issuer', 'Issuer'), signature.issuerDN || '-'),
+    FieldBlock(t('validateSignature.cert.subject', 'Subject'), signature.subjectDN || '-'),
+    FieldBlock(t('validateSignature.cert.serialNumber', 'Serial Number'), signature.serialNumber || '-'),
+    FieldBlock(t('validateSignature.cert.validFrom', 'Valid From'), formatDate(signature.validFrom)),
+    FieldBlock(t('validateSignature.cert.validUntil', 'Valid Until'), formatDate(signature.validUntil)),
+    FieldBlock(t('validateSignature.cert.algorithm', 'Algorithm'), signature.signatureAlgorithm || '-'),
+    FieldBlock(
+      t('validateSignature.cert.keySize', 'Key Size'),
+      signature.keySize != null ? `${signature.keySize} ${t('validateSignature.cert.bits', 'bits')}` : '--'
+    ),
+    FieldBlock(t('validateSignature.cert.version', 'Version'), signature.version || '-'),
+    FieldBlock(
+      t('validateSignature.cert.keyUsage', 'Key Usage'),
+      signature.keyUsages.length > 0 ? signature.keyUsages.join(', ') : '--'
+    ),
+    FieldBlock(t('validateSignature.cert.selfSigned', 'Self-Signed'), signature.selfSigned ? t('yes', 'Yes') : t('no', 'No')),
+  ];
+
+  return (
+    <Stack gap="md" key={signature.id}>
+      <Group justify="space-between" align="center">
+        <Group gap="sm">
+          <Text fw={700} size="lg">
+            {t('validateSignature.signature._value', 'Signature')} {index + 1}
+          </Text>
+          <SignatureStatusBadge signature={signature} />
+        </Group>
+        {signature.errorMessage && (
+          <Text c="red" size="sm">{signature.errorMessage}</Text>
+        )}
+      </Group>
+
+      <div className="grid-container">{signatureFields}</div>
+
+      <Divider my="sm" />
+
+      <Text fw={600} size="sm" c="dimmed" tt="uppercase" style={{ letterSpacing: 0.8 }}>
+        {t('validateSignature.cert.details', 'Certificate Details')}
+      </Text>
+      <div className="grid-container">{certificateFields}</div>
+    </Stack>
+  );
+};
+
+export default SignatureSection;

frontend/src/components/tools/validateSignature/reportView/SignatureStatusBadge.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Badge, Popover, Text } from '@mantine/core';
+import './styles.css';
+import { useTranslation } from 'react-i18next';
+import { computeSignatureStatus } from '../../../../hooks/tools/validateSignature/utils/signatureStatus';
+import type { SignatureValidationSignature } from '../../../../types/validateSignature';
+
+const SignatureStatusBadge = ({ signature }: { signature: SignatureValidationSignature }) => {
+  const { t } = useTranslation();
+  const status = computeSignatureStatus(signature, t);
+  const classMap = {
+    valid: 'status-badge status-badge--valid',
+    warning: 'status-badge status-badge--warning',
+    invalid: 'status-badge status-badge--invalid',
+    neutral: 'status-badge status-badge--neutral',
+  } as const;
+
+  return (
+    <Popover withinPortal position="bottom" withArrow shadow="md" disabled={status.details.length === 0}>
+      <Popover.Target>
+        <Badge className={classMap[status.kind]} variant="light" style={{ cursor: status.details.length ? 'pointer' : 'default' }}>
+          {status.label}
+        </Badge>
+      </Popover.Target>
+      {status.details.length > 0 && (
+        <Popover.Dropdown>
+          <Text size="sm" fw={600} mb={4}>{t('details', 'Details')}</Text>
+          {status.details.map((d, i) => (
+            <Text size="sm" key={i}>
+              - {d}
+            </Text>
+          ))}
+        </Popover.Dropdown>
+      )}
+    </Popover>
+  );
+};
+
+export default SignatureStatusBadge;
+

frontend/src/components/tools/validateSignature/reportView/ThumbnailPreview.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import './styles.css';
+
+const ThumbnailPreview = ({
+  thumbnailUrl,
+  fileName,
+}: {
+  thumbnailUrl?: string | null;
+  fileName: string;
+}) => {
+  if (thumbnailUrl) {
+    return (
+      <div className="thumbnail-container">
+        <img
+          src={thumbnailUrl}
+          alt={`${fileName} thumbnail`}
+          className="thumbnail-image"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="thumbnail-placeholder">
+      <PictureAsPdfIcon fontSize="large" />
+    </div>
+  );
+};
+
+export default ThumbnailPreview;

frontend/src/components/tools/validateSignature/reportView/styles.css

@@ -0,0 +1,105 @@
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 12px;
+}
+
+.field-container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.field-value {
+  border: 1px solid rgb(var(--pdf-light-box-border));
+  border-radius: 8px;
+  padding: 0.65rem 0.75rem;
+  background-color: rgb(var(--pdf-light-box-bg));
+  min-height: 44px;
+}
+
+/* Status badge colors sourced from light palette tokens */
+.status-badge {
+  border-radius: 9999px !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.02em !important;
+}
+.status-badge--valid {
+  background-color: rgb(var(--pdf-light-status-valid-bg)) !important;
+  color: rgb(var(--pdf-light-status-valid-text)) !important;
+}
+.status-badge--warning {
+  background-color: rgb(var(--pdf-light-status-warning-bg)) !important;
+  color: rgb(var(--pdf-light-status-warning-text)) !important;
+}
+.status-badge--invalid {
+  background-color: rgb(var(--pdf-light-status-invalid-bg)) !important;
+  color: rgb(var(--pdf-light-status-invalid-text)) !important;
+}
+.status-badge--neutral {
+  background-color: rgb(var(--pdf-light-status-neutral-bg)) !important;
+  color: rgb(var(--pdf-light-status-neutral-text)) !important;
+}
+
+.simulated-page {
+  width: min(820px, 100%);
+  min-height: 1040px;
+  background-color: rgb(var(--pdf-light-simulated-page-bg)) !important;
+  box-shadow: 0 12px 32px rgba(var(--pdf-light-simulated-page-text), 0.12) !important;
+  border-radius: 12px !important;
+  padding: 48px 56px !important;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  color: rgb(var(--pdf-light-simulated-page-text)) !important;
+}
+
+/* Container for the interactive report view */
+.report-container {
+  width: 100%;
+  height: 100%;
+  /* Match Active Files/Page Editor background */
+  background: var(--bg-background) !important;
+  padding: 32px 24px 48px;
+  overflow-y: auto;
+}
+
+/* Keep field blocks stable colors across themes */
+.field-value {
+  border: 1px solid rgb(var(--pdf-light-box-border)) !important;
+  background-color: rgb(var(--pdf-light-box-bg)) !important;
+}
+
+.field-container {
+  color: rgb(var(--pdf-light-simulated-page-text)) !important;
+}
+
+/* Thumbnail preview styles */
+.thumbnail-container {
+  width: 140px;
+  height: 180px;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 6px 18px rgba(var(--pdf-light-simulated-page-text), 0.15);
+  flex-shrink: 0;
+  background-color: rgb(var(--pdf-light-simulated-page-text));
+}
+
+.thumbnail-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumbnail-placeholder {
+  width: 140px;
+  height: 180px;
+  border-radius: 12px;
+  border: 1px dashed rgba(var(--pdf-light-neutral), 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgb(var(--pdf-light-text-muted));
+  background: linear-gradient(145deg, var(--mantine-color-gray-1) 0%, var(--mantine-color-gray-0) 100%);
+}

frontend/src/components/tooltips/useOverlayPdfsTips.ts

@@ -0,0 +1,56 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '../../types/tips';
+
+export const useOverlayPdfsTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t('overlay-pdfs.tooltip.header.title', 'Overlay PDFs Overview')
+    },
+    tips: [
+      {
+        title: t('overlay-pdfs.tooltip.description.title', 'Description'),
+        description: t(
+          'overlay-pdfs.tooltip.description.text',
+          'Combine a base PDF with one or more overlay PDFs. Overlays can be applied page-by-page in different modes and placed in the foreground or background.'
+        )
+      },
+      {
+        title: t('overlay-pdfs.tooltip.mode.title', 'Overlay Mode'),
+        description: t(
+          'overlay-pdfs.tooltip.mode.text',
+          'Choose how to distribute overlay pages across the base PDF pages.'
+        ),
+        bullets: [
+          t('overlay-pdfs.tooltip.mode.sequential', 'Sequential Overlay: Use pages from the first overlay PDF until it ends, then move to the next.'),
+          t('overlay-pdfs.tooltip.mode.interleaved', 'Interleaved Overlay: Take one page from each overlay in turn.'),
+          t('overlay-pdfs.tooltip.mode.fixedRepeat', 'Fixed Repeat Overlay: Take a set number of pages from each overlay before moving to the next. Use Counts to set the numbers.')
+        ]
+      },
+      {
+        title: t('overlay-pdfs.tooltip.position.title', 'Overlay Position'),
+        description: t(
+          'overlay-pdfs.tooltip.position.text',
+          'Foreground places the overlay on top of the page. Background places it behind.'
+        )
+      },
+      {
+        title: t('overlay-pdfs.tooltip.overlayFiles.title', 'Overlay Files'),
+        description: t(
+          'overlay-pdfs.tooltip.overlayFiles.text',
+          'Select one or more PDFs to overlay on the base. The order of these files affects how pages are applied in Sequential and Fixed Repeat modes.'
+        )
+      },
+      {
+        title: t('overlay-pdfs.tooltip.counts.title', 'Counts (Fixed Repeat only)'),
+        description: t(
+          'overlay-pdfs.tooltip.counts.text',
+          'Provide a positive number for each overlay file showing how many pages to take before moving to the next. Required when mode is Fixed Repeat.'
+        )
+      }
+    ]
+  };
+};
+
+

frontend/src/components/viewer/EmbedPdfViewer.tsx

@@ -13,6 +13,7 @@ import { useSignature } from '../../contexts/SignatureContext';
 import { createStirlingFilesAndStubs } from '../../services/fileStubHelpers';
 import NavigationWarningModal from '../shared/NavigationWarningModal';
 import { isStirlingFile } from '../../types/fileContext';
+import { useViewerRightRailButtons } from './useViewerRightRailButtons';
 
 export interface EmbedPdfViewerProps {
   sidebarsVisible: boolean;
@@ -36,6 +37,9 @@ const EmbedPdfViewerContent = ({
 
   const { isThumbnailSidebarVisible, toggleThumbnailSidebar, zoomActions, spreadActions, panActions: _panActions, rotationActions: _rotationActions, getScrollState, getZoomState, getSpreadState, getRotationState, isAnnotationMode, isAnnotationsVisible, exportActions } = useViewer();
 
+  // Register viewer right-rail buttons
+  useViewerRightRailButtons();
+
   const scrollState = getScrollState();
   const zoomState = getZoomState();
   const spreadState = getSpreadState();
@@ -121,7 +125,7 @@ const EmbedPdfViewerContent = ({
   }, [previewFile, fileWithUrl]);
 
   // Handle scroll wheel zoom with accumulator for smooth trackpad pinch
-  React.useEffect(() => {
+  useEffect(() => {
     let accumulator = 0;
 
     const handleWheel = (event: WheelEvent) => {
@@ -155,7 +159,7 @@ const EmbedPdfViewerContent = ({
   }, [zoomActions]);
 
   // Handle keyboard zoom shortcuts
-  React.useEffect(() => {
+  useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (!isViewerHovered) return;
 
@@ -335,6 +339,7 @@ const EmbedPdfViewerContent = ({
       <ThumbnailSidebar
         visible={isThumbnailSidebarVisible}
         onToggle={toggleThumbnailSidebar}
+        activeFileIndex={activeFileIndex}
       />
 
       {/* Navigation Warning Modal */}

frontend/src/components/viewer/ThumbnailSidebar.tsx

@@ -5,15 +5,27 @@ import { useViewer } from '../../contexts/ViewerContext';
 interface ThumbnailSidebarProps {
   visible: boolean;
   onToggle: () => void;
+  activeFileIndex?: number;
 }
 
-export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSidebarProps) {
+export function ThumbnailSidebar({ visible, onToggle: _onToggle, activeFileIndex }: ThumbnailSidebarProps) {
   const { getScrollState, scrollActions, getThumbnailAPI } = useViewer();
   const [thumbnails, setThumbnails] = useState<{ [key: number]: string }>({});
 
   const scrollState = getScrollState();
   const thumbnailAPI = getThumbnailAPI();
 
+  // Clear thumbnails when active file changes
+  useEffect(() => {
+    // Revoke old blob URLs to prevent memory leaks
+    Object.values(thumbnails).forEach((thumbUrl) => {
+      if (typeof thumbUrl === 'string' && thumbUrl.startsWith('blob:')) {
+        URL.revokeObjectURL(thumbUrl);
+      }
+    });
+    setThumbnails({});
+  }, [activeFileIndex]);
+
   // Clear thumbnails when sidebar closes and revoke blob URLs to prevent memory leaks
   useEffect(() => {
     if (!visible) {

frontend/src/components/viewer/useViewerRightRailButtons.tsx

@@ -0,0 +1,125 @@
+import { useMemo, useState } from 'react';
+import { ActionIcon, Popover } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useViewer } from '../../contexts/ViewerContext';
+import { useRightRailButtons, RightRailButtonWithAction } from '../../hooks/useRightRailButtons';
+import LocalIcon from '../shared/LocalIcon';
+import { Tooltip } from '../shared/Tooltip';
+import { SearchInterface } from './SearchInterface';
+import ViewerAnnotationControls from '../shared/rightRail/ViewerAnnotationControls';
+
+export function useViewerRightRailButtons() {
+  const { t } = useTranslation();
+  const viewer = useViewer();
+  const [isPanning, setIsPanning] = useState<boolean>(() => viewer.getPanState()?.isPanning ?? false);
+
+  // Lift i18n labels out of memo for clarity
+  const searchLabel = t('rightRail.search', 'Search PDF');
+  const panLabel = t('rightRail.panMode', 'Pan Mode');
+  const rotateLeftLabel = t('rightRail.rotateLeft', 'Rotate Left');
+  const rotateRightLabel = t('rightRail.rotateRight', 'Rotate Right');
+  const sidebarLabel = t('rightRail.toggleSidebar', 'Toggle Sidebar');
+
+  const viewerButtons = useMemo<RightRailButtonWithAction[]>(() => {
+    return [
+      {
+        id: 'viewer-search',
+        tooltip: searchLabel,
+        ariaLabel: searchLabel,
+        section: 'top' as const,
+        order: 10,
+        render: ({ disabled }) => (
+          <Tooltip content={searchLabel} position="left" offset={12} arrow portalTarget={document.body}>
+            <Popover position="left" withArrow shadow="md" offset={8}>
+              <Popover.Target>
+                <div style={{ display: 'inline-flex' }}>
+                  <ActionIcon
+                    variant="subtle"
+                    radius="md"
+                    className="right-rail-icon"
+                    disabled={disabled}
+                    aria-label={searchLabel}
+                  >
+                    <LocalIcon icon="search" width="1.5rem" height="1.5rem" />
+                  </ActionIcon>
+                </div>
+              </Popover.Target>
+              <Popover.Dropdown>
+                <div style={{ minWidth: '20rem' }}>
+                  <SearchInterface visible={true} onClose={() => {}} />
+                </div>
+              </Popover.Dropdown>
+            </Popover>
+          </Tooltip>
+        )
+      },
+      {
+        id: 'viewer-pan-mode',
+        tooltip: panLabel,
+        ariaLabel: panLabel,
+        section: 'top' as const,
+        order: 20,
+        render: ({ disabled }) => (
+          <Tooltip content={panLabel} position="left" offset={12} arrow portalTarget={document.body}>
+            <ActionIcon
+              variant={isPanning ? 'filled' : 'subtle'}
+              color={isPanning ? 'blue' : undefined}
+              radius="md"
+              className="right-rail-icon"
+              onClick={() => {
+                viewer.panActions.togglePan();
+                setIsPanning(prev => !prev);
+              }}
+              disabled={disabled}
+            >
+              <LocalIcon icon="pan-tool-rounded" width="1.5rem" height="1.5rem" />
+            </ActionIcon>
+          </Tooltip>
+        )
+      },
+      {
+        id: 'viewer-rotate-left',
+        icon: <LocalIcon icon="rotate-left" width="1.5rem" height="1.5rem" />,
+        tooltip: rotateLeftLabel,
+        ariaLabel: rotateLeftLabel,
+        section: 'top' as const,
+        order: 30,
+        onClick: () => {
+          viewer.rotationActions.rotateBackward();
+        }
+      },
+      {
+        id: 'viewer-rotate-right',
+        icon: <LocalIcon icon="rotate-right" width="1.5rem" height="1.5rem" />,
+        tooltip: rotateRightLabel,
+        ariaLabel: rotateRightLabel,
+        section: 'top' as const,
+        order: 40,
+        onClick: () => {
+          viewer.rotationActions.rotateForward();
+        }
+      },
+      {
+        id: 'viewer-toggle-sidebar',
+        icon: <LocalIcon icon="view-list" width="1.5rem" height="1.5rem" />,
+        tooltip: sidebarLabel,
+        ariaLabel: sidebarLabel,
+        section: 'top' as const,
+        order: 50,
+        onClick: () => {
+          viewer.toggleThumbnailSidebar();
+        }
+      },
+      {
+        id: 'viewer-annotation-controls',
+        section: 'top' as const,
+        order: 60,
+        render: ({ disabled }) => (
+          <ViewerAnnotationControls currentView="viewer" disabled={disabled} />
+        )
+      }
+    ];
+  }, [t, viewer, isPanning, searchLabel, panLabel, rotateLeftLabel, rotateRightLabel, sidebarLabel]);
+
+  useRightRailButtons(viewerButtons);
+}

frontend/src/constants/convertSupportedFornats.ts

@@ -0,0 +1,21 @@
+// Central list of formats supported by Convert operations
+export const CONVERT_SUPPORTED_FORMATS = [
+  // Microsoft Office
+  'doc', 'docx', 'dot', 'dotx', 'csv', 'xls', 'xlsx', 'xlt', 'xltx', 'slk', 'dif', 'ppt', 'pptx',
+  // OpenDocument
+  'odt', 'ott', 'ods', 'ots', 'odp', 'otp', 'odg', 'otg',
+  // Text formats
+  'txt', 'text', 'xml', 'rtf', 'html', 'lwp', 'md',
+  // Images
+  'bmp', 'gif', 'jpeg', 'jpg', 'png', 'tif', 'tiff', 'pbm', 'pgm', 'ppm', 'ras', 'xbm', 'xpm', 'svg', 'svm', 'wmf', 'webp',
+  // StarOffice
+  'sda', 'sdc', 'sdd', 'sdw', 'stc', 'std', 'sti', 'stw', 'sxd', 'sxg', 'sxi', 'sxw',
+  // Email formats
+  'eml',
+  // Archive formats
+  'zip',
+  // Other
+  'dbf', 'fods', 'vsd', 'vor', 'vor3', 'vor4', 'uop', 'pct', 'ps', 'pdf',
+];
+
+

frontend/src/constants/theme.ts

@@ -0,0 +1,8 @@
+// Theme constants and utilities
+
+export type ThemeMode = 'light' | 'dark' | 'rainbow';
+
+// Detect OS theme preference
+export function getSystemTheme(): 'light' | 'dark' {
+  return window?.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}

frontend/src/constants/toolPanel.ts

@@ -0,0 +1,5 @@
+// Tool panel constants
+
+export type ToolPanelMode = 'sidebar' | 'fullscreen';
+
+export const DEFAULT_TOOL_PANEL_MODE: ToolPanelMode = 'sidebar';

frontend/src/contexts/FileContext.tsx

@@ -79,8 +79,21 @@ function FileContextInner({
   };
 
   // File operations using unified addFiles helper with persistence
-  const addRawFiles = useCallback(async (files: File[], options?: { insertAfterPageId?: string; selectFiles?: boolean }): Promise<StirlingFile[]> => {
-    const stirlingFiles = await addFiles({ files, ...options }, stateRef, filesRef, dispatch, lifecycleManager, enablePersistence);
+  const addRawFiles = useCallback(async (files: File[], options?: { insertAfterPageId?: string; selectFiles?: boolean; skipAutoUnzip?: boolean }): Promise<StirlingFile[]> => {
+    const stirlingFiles = await addFiles(
+      {
+        files,
+        ...options,
+        // For direct file uploads: ALWAYS unzip (except HTML ZIPs)
+        // skipAutoUnzip bypasses preference checks - HTML detection still applies
+        skipAutoUnzip: true
+      },
+      stateRef,
+      filesRef,
+      dispatch,
+      lifecycleManager,
+      enablePersistence
+    );
 
     // Auto-select the newly added files if requested
     if (options?.selectFiles && stirlingFiles.length > 0) {

frontend/src/contexts/PreferencesContext.tsx

@@ -1,61 +1,44 @@
-import React, { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
-import { preferencesService, UserPreferences, DEFAULT_PREFERENCES } from '../services/preferencesService';
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { preferencesService, UserPreferences } from '../services/preferencesService';
 
 interface PreferencesContextValue {
   preferences: UserPreferences;
   updatePreference: <K extends keyof UserPreferences>(
     key: K,
     value: UserPreferences[K]
-  ) => Promise<void>;
-  resetPreferences: () => Promise<void>;
-  isLoading: boolean;
+  ) => void;
+  resetPreferences: () => void;
 }
 
 const PreferencesContext = createContext<PreferencesContextValue | undefined>(undefined);
 
 export const PreferencesProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [preferences, setPreferences] = useState<UserPreferences>(DEFAULT_PREFERENCES);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const loadPreferences = async () => {
-      try {
-        await preferencesService.initialize();
-        const loadedPreferences = await preferencesService.getAllPreferences();
-        setPreferences(loadedPreferences);
-      } catch (error) {
-        console.error('Failed to load preferences:', error);
-        // Keep default preferences on error
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    loadPreferences();
-  }, []);
+  const [preferences, setPreferences] = useState<UserPreferences>(() => {
+    // Load preferences synchronously on mount
+    return preferencesService.getAllPreferences();
+  });
 
   const updatePreference = useCallback(
-    async <K extends keyof UserPreferences>(key: K, value: UserPreferences[K]) => {
-        await preferencesService.setPreference(key, value);
-        setPreferences((prev) => ({
-          ...prev,
-          [key]: value,
-        }));
+    <K extends keyof UserPreferences>(key: K, value: UserPreferences[K]) => {
+      preferencesService.setPreference(key, value);
+      setPreferences((prev) => ({
+        ...prev,
+        [key]: value,
+      }));
     },
     []
   );
 
-  const resetPreferences = useCallback(async () => {
-      await preferencesService.clearAllPreferences();
-      setPreferences(DEFAULT_PREFERENCES);
+  const resetPreferences = useCallback(() => {
+    preferencesService.clearAllPreferences();
+    setPreferences(preferencesService.getAllPreferences());
   }, []);
 
   const value = React.useMemo(() => ({
     preferences,
     updatePreference,
     resetPreferences,
-    isLoading,
-  }), [preferences, updatePreference, resetPreferences, isLoading]);
+  }), [preferences, updatePreference, resetPreferences]);
 
   return (
     <PreferencesContext.Provider value={value}>

frontend/src/contexts/RightRailContext.tsx

@@ -4,9 +4,11 @@ import { RightRailAction, RightRailButtonConfig } from '../types/rightRail';
 interface RightRailContextValue {
 	buttons: RightRailButtonConfig[];
 	actions: Record<string, RightRailAction>;
+	allButtonsDisabled: boolean;
 	registerButtons: (buttons: RightRailButtonConfig[]) => void;
 	unregisterButtons: (ids: string[]) => void;
-	setAction: (id: string, action: RightRailAction) => void;
+	setAction: (id: string, action?: RightRailAction) => void;
+	setAllRightRailButtonsDisabled: (disabled: boolean) => void;
 	clear: () => void;
 }
 
@@ -15,6 +17,7 @@ const RightRailContext = createContext<RightRailContextValue | undefined>(undefi
 export function RightRailProvider({ children }: { children: React.ReactNode }) {
 	const [buttons, setButtons] = useState<RightRailButtonConfig[]>([]);
 	const [actions, setActions] = useState<Record<string, RightRailAction>>({});
+	const [allButtonsDisabled, setAllButtonsDisabled] = useState<boolean>(false);
 
 	const registerButtons = useCallback((newButtons: RightRailButtonConfig[]) => {
 		setButtons(prev => {
@@ -39,8 +42,20 @@ export function RightRailProvider({ children }: { children: React.ReactNode }) {
 		setActions(prev => Object.fromEntries(Object.entries(prev).filter(([id]) => !ids.includes(id))));
 	}, []);
 
-	const setAction = useCallback((id: string, action: RightRailAction) => {
-		setActions(prev => ({ ...prev, [id]: action }));
+	const setAction = useCallback((id: string, action?: RightRailAction) => {
+		setActions(prev => {
+			if (!action) {
+				if (!(id in prev)) return prev;
+				const next = { ...prev };
+				delete next[id];
+				return next;
+			}
+			return { ...prev, [id]: action };
+		});
+	}, []);
+
+	const setAllRightRailButtonsDisabled = useCallback((disabled: boolean) => {
+		setAllButtonsDisabled(disabled);
 	}, []);
 
 	const clear = useCallback(() => {
@@ -48,7 +63,16 @@ export function RightRailProvider({ children }: { children: React.ReactNode }) {
 		setActions({});
 	}, []);
 
-	const value = useMemo<RightRailContextValue>(() => ({ buttons, actions, registerButtons, unregisterButtons, setAction, clear }), [buttons, actions, registerButtons, unregisterButtons, setAction, clear]);
+	const value = useMemo<RightRailContextValue>(() => ({ 
+		buttons, 
+		actions, 
+		allButtonsDisabled, 
+		registerButtons, 
+		unregisterButtons, 
+		setAction, 
+		setAllRightRailButtonsDisabled, 
+		clear 
+	}), [buttons, actions, allButtonsDisabled, registerButtons, unregisterButtons, setAction, setAllRightRailButtonsDisabled, clear]);
 
 	return (
 		<RightRailContext.Provider value={value}>

frontend/src/contexts/SidebarContext.tsx

@@ -7,6 +7,7 @@ export function SidebarProvider({ children }: SidebarProviderProps) {
   // All sidebar state management
   const quickAccessRef = useRef<HTMLDivElement>(null);
   const toolPanelRef = useRef<HTMLDivElement>(null);
+  const rightRailRef = useRef<HTMLDivElement>(null);
 
   const [sidebarsVisible, setSidebarsVisible] = useState(true);
   const [leftPanelView, setLeftPanelView] = useState<'toolPicker' | 'toolContent'>('toolPicker');
@@ -21,7 +22,8 @@ export function SidebarProvider({ children }: SidebarProviderProps) {
   const sidebarRefs: SidebarRefs = useMemo(() => ({
     quickAccessRef,
     toolPanelRef,
-  }), [quickAccessRef, toolPanelRef]);
+    rightRailRef,
+  }), [quickAccessRef, toolPanelRef, rightRailRef]);
 
   const contextValue: SidebarContextValue = useMemo(() => ({
     sidebarState,

frontend/src/contexts/ToolWorkflowContext.tsx

@@ -3,74 +3,40 @@
  * Eliminates prop drilling with a single, simple context
  */
 
-import React, { createContext, useContext, useReducer, useCallback, useMemo } from 'react';
+import React, { createContext, useContext, useReducer, useCallback, useMemo, useEffect } from 'react';
 import { useToolManagement } from '../hooks/useToolManagement';
 import { PageEditorFunctions } from '../types/pageEditor';
 import { ToolRegistryEntry, ToolRegistry } from '../data/toolsTaxonomy';
 import { useNavigationActions, useNavigationState } from './NavigationContext';
 import { ToolId, isValidToolId } from '../types/toolId';
+import { WorkbenchType, getDefaultWorkbench, isBaseWorkbench } from '../types/workbench';
 import { useNavigationUrlSync } from '../hooks/useUrlSync';
-import { getDefaultWorkbench } from '../types/workbench';
 import { filterToolRegistryByQuery } from '../utils/toolSearch';
+import { useToolHistory } from '../hooks/tools/useUserToolActivity';
+import {
+  ToolWorkflowState,
+  createInitialState,
+  toolWorkflowReducer,
+} from './toolWorkflow/toolWorkflowState';
+import type { ToolPanelMode } from '../constants/toolPanel';
+import { usePreferences } from './PreferencesContext';
 
 // State interface
-interface ToolWorkflowState {
-  // UI State
-  sidebarsVisible: boolean;
-  leftPanelView: 'toolPicker' | 'toolContent' | 'hidden';
-  readerMode: boolean;
-
-  // File/Preview State
-  previewFile: File | null;
-  pageEditorFunctions: PageEditorFunctions | null;
-
-  // Search State
-  searchQuery: string;
-}
-
-// Actions
-type ToolWorkflowAction =
-  | { type: 'SET_SIDEBARS_VISIBLE'; payload: boolean }
-  | { type: 'SET_LEFT_PANEL_VIEW'; payload: 'toolPicker' | 'toolContent' | 'hidden' }
-  | { type: 'SET_READER_MODE'; payload: boolean }
-  | { type: 'SET_PREVIEW_FILE'; payload: File | null }
-  | { type: 'SET_PAGE_EDITOR_FUNCTIONS'; payload: PageEditorFunctions | null }
-  | { type: 'SET_SEARCH_QUERY'; payload: string }
-  | { type: 'RESET_UI_STATE' };
-
-// Initial state
-const initialState: ToolWorkflowState = {
-  sidebarsVisible: true,
-  leftPanelView: 'toolPicker',
-  readerMode: false,
-  previewFile: null,
-  pageEditorFunctions: null,
-  searchQuery: '',
-};
-
-// Reducer
-function toolWorkflowReducer(state: ToolWorkflowState, action: ToolWorkflowAction): ToolWorkflowState {
-  switch (action.type) {
-    case 'SET_SIDEBARS_VISIBLE':
-      return { ...state, sidebarsVisible: action.payload };
-    case 'SET_LEFT_PANEL_VIEW':
-      return { ...state, leftPanelView: action.payload };
-    case 'SET_READER_MODE':
-      return { ...state, readerMode: action.payload };
-    case 'SET_PREVIEW_FILE':
-      return { ...state, previewFile: action.payload };
-    case 'SET_PAGE_EDITOR_FUNCTIONS':
-      return { ...state, pageEditorFunctions: action.payload };
-    case 'SET_SEARCH_QUERY':
-      return { ...state, searchQuery: action.payload };
-    case 'RESET_UI_STATE':
-      return { ...initialState, searchQuery: state.searchQuery }; // Preserve search
-    default:
-      return state;
-  }
-}
+// Types and reducer/state moved to './toolWorkflow/state'
 
 // Context value interface
+export interface CustomWorkbenchViewRegistration {
+  id: string;
+  workbenchId: WorkbenchType;
+  label: string;
+  icon?: React.ReactNode;
+  component: React.ComponentType<{ data: any }>;
+}
+
+export interface CustomWorkbenchViewInstance extends CustomWorkbenchViewRegistration {
+  data: any;
+}
+
 interface ToolWorkflowContextValue extends ToolWorkflowState {
   // Tool management (from hook)
   selectedToolKey: ToolId | null;
@@ -82,11 +48,12 @@ interface ToolWorkflowContextValue extends ToolWorkflowState {
   setSidebarsVisible: (visible: boolean) => void;
   setLeftPanelView: (view: 'toolPicker' | 'toolContent' | 'hidden') => void;
   setReaderMode: (mode: boolean) => void;
+  setToolPanelMode: (mode: ToolPanelMode) => void;
   setPreviewFile: (file: File | null) => void;
   setPageEditorFunctions: (functions: PageEditorFunctions | null) => void;
   setSearchQuery: (query: string) => void;
 
-  // Tool Actions
+
   selectTool: (toolId: ToolId | null) => void;
   clearToolSelection: () => void;
 
@@ -103,9 +70,26 @@ interface ToolWorkflowContextValue extends ToolWorkflowState {
   // Computed values
   filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>; // Filtered by search
   isPanelVisible: boolean;
+
+  // Tool History
+  favoriteTools: ToolId[];
+  toggleFavorite: (toolId: ToolId) => void;
+  isFavorite: (toolId: ToolId) => boolean;
+
+  customWorkbenchViews: CustomWorkbenchViewInstance[];
+  registerCustomWorkbenchView: (view: CustomWorkbenchViewRegistration) => void;
+  unregisterCustomWorkbenchView: (id: string) => void;
+  setCustomWorkbenchViewData: (id: string, data: any) => void;
+  clearCustomWorkbenchViewData: (id: string) => void;
 }
 
-const ToolWorkflowContext = createContext<ToolWorkflowContextValue | undefined>(undefined);
+// Ensure a single context instance across HMR to avoid provider/consumer mismatches
+const __GLOBAL_CONTEXT_KEY__ = '__ToolWorkflowContext__';
+const existingContext = (globalThis as any)[__GLOBAL_CONTEXT_KEY__] as React.Context<ToolWorkflowContextValue | undefined> | undefined;
+const ToolWorkflowContext = existingContext ?? createContext<ToolWorkflowContextValue | undefined>(undefined);
+if (!existingContext) {
+  (globalThis as any)[__GLOBAL_CONTEXT_KEY__] = ToolWorkflowContext;
+}
 
 // Provider component
 interface ToolWorkflowProviderProps {
@@ -113,11 +97,15 @@ interface ToolWorkflowProviderProps {
 }
 
 export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
-  const [state, dispatch] = useReducer(toolWorkflowReducer, initialState);
+  const [state, dispatch] = useReducer(toolWorkflowReducer, undefined, createInitialState);
+  const { preferences, updatePreference } = usePreferences();
 
   // Store reset functions for tools
   const [toolResetFunctions, setToolResetFunctions] = React.useState<Record<string, () => void>>({});
 
+  const [customViewRegistry, setCustomViewRegistry] = React.useState<Record<string, CustomWorkbenchViewRegistration>>({});
+  const [customViewData, setCustomViewData] = React.useState<Record<string, any>>({});
+
   // Navigation actions and state are available since we're inside NavigationProvider
   const { actions } = useNavigationActions();
   const navigationState = useNavigationState();
@@ -128,6 +116,13 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     getSelectedTool,
   } = useToolManagement();
 
+  // Tool history hook
+  const {
+    favoriteTools,
+    toggleFavorite,
+    isFavorite,
+  } = useToolHistory();
+
   // Get selected tool from navigation context
   const selectedTool = getSelectedTool(navigationState.selectedTool);
 
@@ -148,6 +143,12 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     dispatch({ type: 'SET_READER_MODE', payload: mode });
   }, [actions]);
 
+  const setToolPanelMode = useCallback((mode: ToolPanelMode) => {
+    dispatch({ type: 'SET_TOOL_PANEL_MODE', payload: mode });
+    updatePreference('defaultToolPanelMode', mode);
+  }, [updatePreference]);
+
+
   const setPreviewFile = useCallback((file: File | null) => {
     dispatch({ type: 'SET_PREVIEW_FILE', payload: file });
     if (file) {
@@ -163,6 +164,83 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     dispatch({ type: 'SET_SEARCH_QUERY', payload: query });
   }, []);
 
+  const registerCustomWorkbenchView = useCallback((view: CustomWorkbenchViewRegistration) => {
+    setCustomViewRegistry(prev => ({ ...prev, [view.id]: view }));
+  }, []);
+
+  const unregisterCustomWorkbenchView = useCallback((id: string) => {
+    let removedView: CustomWorkbenchViewRegistration | undefined;
+
+    setCustomViewRegistry(prev => {
+      const existing = prev[id];
+      if (!existing) {
+        return prev;
+      }
+      removedView = existing;
+      const updated = { ...prev };
+      delete updated[id];
+      return updated;
+    });
+
+    setCustomViewData(prev => {
+      if (!(id in prev)) {
+        return prev;
+      }
+      const updated = { ...prev };
+      delete updated[id];
+      return updated;
+    });
+
+    if (removedView && navigationState.workbench === removedView.workbenchId) {
+      actions.setWorkbench(getDefaultWorkbench());
+    }
+  }, [actions, navigationState.workbench]);
+
+  const setCustomWorkbenchViewData = useCallback((id: string, data: any) => {
+    setCustomViewData(prev => ({ ...prev, [id]: data }));
+  }, []);
+
+  const clearCustomWorkbenchViewData = useCallback((id: string) => {
+    setCustomViewData(prev => {
+      if (!(id in prev)) {
+        return prev;
+      }
+      const updated = { ...prev };
+      delete updated[id];
+      return updated;
+    });
+  }, []);
+
+  const customWorkbenchViews = useMemo<CustomWorkbenchViewInstance[]>(() => {
+    return Object.values(customViewRegistry).map(view => ({
+      ...view,
+      data: Object.prototype.hasOwnProperty.call(customViewData, view.id) ? customViewData[view.id] : null,
+    }));
+  }, [customViewRegistry, customViewData]);
+
+  useEffect(() => {
+    if (isBaseWorkbench(navigationState.workbench)) {
+      return;
+    }
+
+    const currentCustomView = customWorkbenchViews.find(view => view.workbenchId === navigationState.workbench);
+    if (!currentCustomView || currentCustomView.data == null) {
+      actions.setWorkbench(getDefaultWorkbench());
+    }
+  }, [actions, customWorkbenchViews, navigationState.workbench]);
+
+  // Persisted via PreferencesContext; no direct localStorage writes needed here
+
+  // Keep tool panel mode in sync with user preference. This ensures the
+  // Config setting (Default tool picker mode) immediately affects the app
+  // and persists across reloads.
+  useEffect(() => {
+    const preferredMode = preferences.defaultToolPanelMode;
+    if (preferredMode !== state.toolPanelMode) {
+      dispatch({ type: 'SET_TOOL_PANEL_MODE', payload: preferredMode });
+    }
+  }, [preferences.defaultToolPanelMode, state.toolPanelMode]);
+
   // Tool reset methods
   const registerToolReset = useCallback((toolId: string, resetFunction: () => void) => {
     setToolResetFunctions(prev => ({ ...prev, [toolId]: resetFunction }));
@@ -181,21 +259,25 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
 
   // Workflow actions (compound actions that coordinate multiple state changes)
   const handleToolSelect = useCallback((toolId: ToolId) => {
+    // If we're currently on a custom workbench (e.g., Validate Signature report),
+    // selecting any tool should take the user back to the default file manager view.
+    const wasInCustomWorkbench = !isBaseWorkbench(navigationState.workbench);
+
     // Handle read tool selection - should behave exactly like QuickAccessBar read button
     if (toolId === 'read') {
       setReaderMode(true);
       actions.setSelectedTool('read');
-      actions.setWorkbench('viewer');
+      actions.setWorkbench(wasInCustomWorkbench ? getDefaultWorkbench() : 'viewer');
       setSearchQuery('');
       return;
     }
 
-    // Handle multiTool selection - enable page editor workbench and hide left panel
+    // Handle multiTool selection - enable page editor workbench
     if (toolId === 'multiTool') {
       setReaderMode(false);
       setLeftPanelView('hidden');
       actions.setSelectedTool('multiTool');
-      actions.setWorkbench('pageEditor');
+      actions.setWorkbench(wasInCustomWorkbench ? getDefaultWorkbench() : 'pageEditor');
       setSearchQuery('');
       return;
     }
@@ -206,7 +288,9 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
 
     // Get the tool from registry to determine workbench
     const tool = getSelectedTool(toolId);
-    if (tool && tool.workbench) {
+    if (wasInCustomWorkbench) {
+      actions.setWorkbench(getDefaultWorkbench());
+    } else if (tool && tool.workbench) {
       actions.setWorkbench(tool.workbench);
     } else {
       actions.setWorkbench(getDefaultWorkbench());
@@ -216,7 +300,7 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     setSearchQuery('');
     setLeftPanelView('toolContent');
     setReaderMode(false); // Disable read mode when selecting tools
-  }, [actions, getSelectedTool, setLeftPanelView, setReaderMode, setSearchQuery]);
+  }, [actions, getSelectedTool, navigationState.workbench, setLeftPanelView, setReaderMode, setSearchQuery]);
 
   const handleBackToTools = useCallback(() => {
     setLeftPanelView('toolPicker');
@@ -239,7 +323,6 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     [state.sidebarsVisible, state.readerMode, state.leftPanelView]
   );
 
-  // URL sync for proper tool navigation
   useNavigationUrlSync(
     navigationState.selectedTool,
     handleToolSelect,
@@ -261,6 +344,7 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     setSidebarsVisible,
     setLeftPanelView,
     setReaderMode,
+    setToolPanelMode,
     setPreviewFile,
     setPageEditorFunctions,
     setSearchQuery,
@@ -280,6 +364,18 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     // Computed
     filteredTools,
     isPanelVisible,
+
+    // Tool History
+    favoriteTools,
+    toggleFavorite,
+    isFavorite,
+
+    // Custom workbench views
+    customWorkbenchViews,
+    registerCustomWorkbenchView,
+    unregisterCustomWorkbenchView,
+    setCustomWorkbenchViewData,
+    clearCustomWorkbenchViewData,
   }), [
     state,
     navigationState.selectedTool,
@@ -289,6 +385,7 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     setSidebarsVisible,
     setLeftPanelView,
     setReaderMode,
+    setToolPanelMode,
     setPreviewFile,
     setPageEditorFunctions,
     setSearchQuery,
@@ -300,6 +397,14 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     handleReaderToggle,
     filteredTools,
     isPanelVisible,
+    favoriteTools,
+    toggleFavorite,
+    isFavorite,
+    customWorkbenchViews,
+    registerCustomWorkbenchView,
+    unregisterCustomWorkbenchView,
+    setCustomWorkbenchViewData,
+    clearCustomWorkbenchViewData,
   ]);
 
   return (
@@ -313,7 +418,6 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
 export function useToolWorkflow(): ToolWorkflowContextValue {
   const context = useContext(ToolWorkflowContext);
   if (!context) {
-
     console.error('ToolWorkflowContext not found. Current stack:', new Error().stack);
     throw new Error('useToolWorkflow must be used within a ToolWorkflowProvider');
   }

frontend/src/contexts/file/fileActions.ts

@@ -18,6 +18,7 @@ import { FileLifecycleManager } from './lifecycle';
 import { buildQuickKeySet } from './fileSelectors';
 import { StirlingFile } from '../../types/fileContext';
 import { fileStorage } from '../../services/fileStorage';
+import { zipFileService } from '../../services/zipFileService';
 const DEBUG = process.env.NODE_ENV === 'development';
 
 /**
@@ -172,6 +173,11 @@ interface AddFileOptions {
 
   // Auto-selection after adding
   selectFiles?: boolean;
+
+  // Auto-unzip control
+  autoUnzip?: boolean;
+  autoUnzipFileLimit?: number;
+  skipAutoUnzip?: boolean; // When true: always unzip (except HTML). Used for file uploads. When false: respect autoUnzip/autoUnzipFileLimit preferences. Used for tool outputs.
 }
 
 /**
@@ -198,7 +204,58 @@ export async function addFiles(
   const { files = [] } = options;
   if (DEBUG) console.log(`📄 addFiles(raw): Adding ${files.length} files with immediate thumbnail generation`);
 
+  // ZIP pre-processing: Extract ZIP files with configurable behavior
+  // - File uploads: skipAutoUnzip=true → always extract (except HTML)
+  // - Tool outputs: skipAutoUnzip=false → respect user preferences
+  const filesToProcess: File[] = [];
+  const autoUnzip = options.autoUnzip ?? true; // Default to true
+  const autoUnzipFileLimit = options.autoUnzipFileLimit ?? 4; // Default limit
+  const skipAutoUnzip = options.skipAutoUnzip ?? false;
+
   for (const file of files) {
+    // Check if file is a ZIP
+    if (zipFileService.isZipFile(file)) {
+      try {
+        if (DEBUG) console.log(`📄 addFiles: Detected ZIP file: ${file.name}`);
+
+        // Check if ZIP contains HTML files - if so, keep as ZIP
+        const containsHtml = await zipFileService.containsHtmlFiles(file);
+        if (containsHtml) {
+          if (DEBUG) console.log(`📄 addFiles: ZIP contains HTML, keeping as ZIP: ${file.name}`);
+          filesToProcess.push(file);
+          continue;
+        }
+
+        // Apply extraction with preferences
+        const extractedFiles = await zipFileService.extractWithPreferences(file, {
+          autoUnzip,
+          autoUnzipFileLimit,
+          skipAutoUnzip
+        });
+
+        if (extractedFiles.length === 1 && extractedFiles[0] === file) {
+          // ZIP was not extracted (over limit or autoUnzip disabled)
+          if (DEBUG) console.log(`📄 addFiles: ZIP not extracted (preferences): ${file.name}`);
+        } else {
+          // ZIP was extracted
+          if (DEBUG) console.log(`📄 addFiles: Extracted ${extractedFiles.length} files from ZIP: ${file.name}`);
+        }
+
+        filesToProcess.push(...extractedFiles);
+      } catch (error) {
+        console.error(`📄 addFiles: Failed to process ZIP file ${file.name}:`, error);
+        // On error, keep the ZIP file as-is
+        filesToProcess.push(file);
+      }
+    } else {
+      // Not a ZIP file, add as-is
+      filesToProcess.push(file);
+    }
+  }
+
+  if (DEBUG) console.log(`📄 addFiles: After ZIP processing, ${filesToProcess.length} files to add`);
+
+  for (const file of filesToProcess) {
     const quickKey = createQuickKey(file);
 
     // Soft deduplication: Check if file already exists by metadata

frontend/src/contexts/toolWorkflow/toolWorkflowState.ts

@@ -0,0 +1,71 @@
+import { PageEditorFunctions } from '../../types/pageEditor';
+import { type ToolPanelMode, DEFAULT_TOOL_PANEL_MODE } from '../../constants/toolPanel';
+
+export interface ToolWorkflowState {
+  // UI State
+  sidebarsVisible: boolean;
+  leftPanelView: 'toolPicker' | 'toolContent' | 'hidden';
+  readerMode: boolean;
+  toolPanelMode: ToolPanelMode;
+
+  previewFile: File | null;
+  pageEditorFunctions: PageEditorFunctions | null;
+
+  // Search State
+  searchQuery: string;
+}
+
+// Actions
+export type ToolWorkflowAction =
+  | { type: 'SET_SIDEBARS_VISIBLE'; payload: boolean }
+  | { type: 'SET_LEFT_PANEL_VIEW'; payload: 'toolPicker' | 'toolContent' | 'hidden' }
+  | { type: 'SET_READER_MODE'; payload: boolean }
+  | { type: 'SET_TOOL_PANEL_MODE'; payload: ToolPanelMode }
+  | { type: 'SET_PREVIEW_FILE'; payload: File | null }
+  | { type: 'SET_PAGE_EDITOR_FUNCTIONS'; payload: PageEditorFunctions | null }
+  | { type: 'SET_SEARCH_QUERY'; payload: string }
+  | { type: 'RESET_UI_STATE' };
+
+  
+export const baseState: Omit<ToolWorkflowState, 'toolPanelMode'> = {
+  sidebarsVisible: true,
+  leftPanelView: 'toolPicker',
+  readerMode: false,
+  previewFile: null,
+  pageEditorFunctions: null,
+  searchQuery: '',
+};
+
+export const createInitialState = (): ToolWorkflowState => ({
+  ...baseState,
+  toolPanelMode: DEFAULT_TOOL_PANEL_MODE,
+});
+
+export function toolWorkflowReducer(state: ToolWorkflowState, action: ToolWorkflowAction): ToolWorkflowState {
+  switch (action.type) {
+    case 'SET_SIDEBARS_VISIBLE':
+      return { ...state, sidebarsVisible: action.payload };
+    case 'SET_LEFT_PANEL_VIEW':
+      return { ...state, leftPanelView: action.payload };
+    case 'SET_READER_MODE':
+      return { ...state, readerMode: action.payload };
+    case 'SET_TOOL_PANEL_MODE':
+      return { ...state, toolPanelMode: action.payload };
+    case 'SET_PREVIEW_FILE':
+      return { ...state, previewFile: action.payload };
+    case 'SET_PAGE_EDITOR_FUNCTIONS':
+      return { ...state, pageEditorFunctions: action.payload };
+    case 'SET_SEARCH_QUERY':
+      return { ...state, searchQuery: action.payload };
+    case 'RESET_UI_STATE':
+      return {
+        ...baseState,
+        toolPanelMode: state.toolPanelMode,
+        searchQuery: state.searchQuery,
+      };
+    default:
+      return state;
+  }
+}
+
+

frontend/src/data/toolsTaxonomy.ts

@@ -4,6 +4,17 @@ import { ToolOperationConfig } from '../hooks/tools/shared/useToolOperation';
 import { BaseToolProps } from '../types/tool';
 import { WorkbenchType } from '../types/workbench';
 import { ToolId } from '../types/toolId';
+import DrawRoundedIcon from '@mui/icons-material/DrawRounded';
+import SecurityRoundedIcon from '@mui/icons-material/SecurityRounded';
+import VerifiedUserRoundedIcon from '@mui/icons-material/VerifiedUserRounded';
+import RateReviewRoundedIcon from '@mui/icons-material/RateReviewRounded';
+import ViewAgendaRoundedIcon from '@mui/icons-material/ViewAgendaRounded';
+import FileDownloadRoundedIcon from '@mui/icons-material/FileDownloadRounded';
+import DeleteSweepRoundedIcon from '@mui/icons-material/DeleteSweepRounded';
+import SmartToyRoundedIcon from '@mui/icons-material/SmartToyRounded';
+import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
+import TuneRoundedIcon from '@mui/icons-material/TuneRounded';
+import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
 
 export enum SubcategoryId {
   SIGNING = 'signing',
@@ -66,17 +77,46 @@ export const SUBCATEGORY_ORDER: SubcategoryId[] = [
 ];
 
 export const SUBCATEGORY_COLOR_MAP: Record<SubcategoryId, string> = {
-  [SubcategoryId.SIGNING]: '#FF7892',
-  [SubcategoryId.DOCUMENT_SECURITY]: '#FF7892',
-  [SubcategoryId.VERIFICATION]: '#1BB1D4',
-  [SubcategoryId.DOCUMENT_REVIEW]: '#48BD54',
-  [SubcategoryId.PAGE_FORMATTING]: '#7882FF',
-  [SubcategoryId.EXTRACTION]: '#1BB1D4',
-  [SubcategoryId.REMOVAL]: '#7882FF',
-  [SubcategoryId.AUTOMATION]: '#69DC95',
-  [SubcategoryId.GENERAL]: '#69DC95',
-  [SubcategoryId.ADVANCED_FORMATTING]: '#F55454',
-  [SubcategoryId.DEVELOPER_TOOLS]: '#F55454',
+  [SubcategoryId.SIGNING]: 'var(--category-color-signing)',           // Green
+  [SubcategoryId.DOCUMENT_SECURITY]: 'var(--category-color-security)', // Orange
+  [SubcategoryId.VERIFICATION]: 'var(--category-color-verification)',      // Orange
+  [SubcategoryId.DOCUMENT_REVIEW]: 'var(--category-color-general)',   // Blue
+  [SubcategoryId.PAGE_FORMATTING]: 'var(--category-color-formatting)',   // Purple
+  [SubcategoryId.EXTRACTION]: 'var(--category-color-extraction)',        // Cyan
+  [SubcategoryId.REMOVAL]: 'var(--category-color-removal)',           // Red
+  [SubcategoryId.AUTOMATION]: 'var(--category-color-automation)',        // Pink
+  [SubcategoryId.GENERAL]: 'var(--category-color-general)',           // Blue
+  [SubcategoryId.ADVANCED_FORMATTING]: 'var(--category-color-formatting)', // Purple
+  [SubcategoryId.DEVELOPER_TOOLS]: 'var(--category-color-developer)',   // Gray
+};
+
+export const getSubcategoryIcon = (subcategory: SubcategoryId): React.ReactNode => {
+  switch (subcategory) {
+    case SubcategoryId.SIGNING:
+      return React.createElement(DrawRoundedIcon);
+    case SubcategoryId.DOCUMENT_SECURITY:
+      return React.createElement(SecurityRoundedIcon);
+    case SubcategoryId.VERIFICATION:
+      return React.createElement(VerifiedUserRoundedIcon);
+    case SubcategoryId.DOCUMENT_REVIEW:
+      return React.createElement(RateReviewRoundedIcon);
+    case SubcategoryId.PAGE_FORMATTING:
+      return React.createElement(ViewAgendaRoundedIcon);
+    case SubcategoryId.EXTRACTION:
+      return React.createElement(FileDownloadRoundedIcon);
+    case SubcategoryId.REMOVAL:
+      return React.createElement(DeleteSweepRoundedIcon);
+    case SubcategoryId.AUTOMATION:
+      return React.createElement(SmartToyRoundedIcon);
+    case SubcategoryId.GENERAL:
+      return React.createElement(BuildRoundedIcon);
+    case SubcategoryId.ADVANCED_FORMATTING:
+      return React.createElement(TuneRoundedIcon);
+    case SubcategoryId.DEVELOPER_TOOLS:
+      return React.createElement(CodeRoundedIcon);
+    default:
+      return React.createElement(BuildRoundedIcon);
+  }
 };
 
 export const getCategoryLabel = (t: TFunction, id: ToolCategoryId): string => t(`toolPicker.categories.${id}`, id);

frontend/src/data/useTranslatedToolRegistry.tsx

@@ -66,6 +66,10 @@ import { extractImagesOperationConfig } from "../hooks/tools/extractImages/useEx
 import { replaceColorOperationConfig } from "../hooks/tools/replaceColor/useReplaceColorOperation";
 import { removePagesOperationConfig } from "../hooks/tools/removePages/useRemovePagesOperation";
 import { removeBlanksOperationConfig } from "../hooks/tools/removeBlanks/useRemoveBlanksOperation";
+import { overlayPdfsOperationConfig } from "../hooks/tools/overlayPdfs/useOverlayPdfsOperation";
+import { adjustPageScaleOperationConfig } from "../hooks/tools/adjustPageScale/useAdjustPageScaleOperation";
+import { scannerImageSplitOperationConfig } from "../hooks/tools/scannerImageSplit/useScannerImageSplitOperation";
+import { addPageNumbersOperationConfig } from "../components/tools/addPageNumbers/useAddPageNumbersOperation";
 import CompressSettings from "../components/tools/compress/CompressSettings";
 import AddPasswordSettings from "../components/tools/addPassword/AddPasswordSettings";
 import RemovePasswordSettings from "../components/tools/removePassword/RemovePasswordSettings";
@@ -81,16 +85,14 @@ import Redact from "../tools/Redact";
 import AdjustPageScale from "../tools/AdjustPageScale";
 import ReplaceColor from "../tools/ReplaceColor";
 import ScannerImageSplit from "../tools/ScannerImageSplit";
+import OverlayPdfs from "../tools/OverlayPdfs";
 import { ToolId } from "../types/toolId";
 import MergeSettings from '../components/tools/merge/MergeSettings';
-import { adjustPageScaleOperationConfig } from "../hooks/tools/adjustPageScale/useAdjustPageScaleOperation";
-import { scannerImageSplitOperationConfig } from "../hooks/tools/scannerImageSplit/useScannerImageSplitOperation";
 import AdjustPageScaleSettings from "../components/tools/adjustPageScale/AdjustPageScaleSettings";
 import ScannerImageSplitSettings from "../components/tools/scannerImageSplit/ScannerImageSplitSettings";
 import ChangeMetadataSingleStep from "../components/tools/changeMetadata/ChangeMetadataSingleStep";
 import SignSettings from "../components/tools/sign/SignSettings";
 import AddPageNumbers from "../tools/AddPageNumbers";
-import { addPageNumbersOperationConfig } from "../components/tools/addPageNumbers/useAddPageNumbersOperation";
 import RemoveAnnotations from "../tools/RemoveAnnotations";
 import PageLayoutSettings from "../components/tools/pageLayout/PageLayoutSettings";
 import ExtractImages from "../tools/ExtractImages";
@@ -105,89 +107,13 @@ import AddAttachmentsSettings from "../components/tools/addAttachments/AddAttach
 import RemovePagesSettings from "../components/tools/removePages/RemovePagesSettings";
 import RemoveBlanksSettings from "../components/tools/removeBlanks/RemoveBlanksSettings";
 import AddPageNumbersAutomationSettings from "../components/tools/addPageNumbers/AddPageNumbersAutomationSettings";
+import OverlayPdfsSettings from "../components/tools/overlayPdfs/OverlayPdfsSettings";
+import ValidateSignature from "../tools/ValidateSignature";
 
 const showPlaceholderTools = true; // Show all tools; grey out unavailable ones in UI
 
 // Convert tool supported file formats
-export const CONVERT_SUPPORTED_FORMATS = [
-  // Microsoft Office
-  "doc",
-  "docx",
-  "dot",
-  "dotx",
-  "csv",
-  "xls",
-  "xlsx",
-  "xlt",
-  "xltx",
-  "slk",
-  "dif",
-  "ppt",
-  "pptx",
-  // OpenDocument
-  "odt",
-  "ott",
-  "ods",
-  "ots",
-  "odp",
-  "otp",
-  "odg",
-  "otg",
-  // Text formats
-  "txt",
-  "text",
-  "xml",
-  "rtf",
-  "html",
-  "lwp",
-  "md",
-  // Images
-  "bmp",
-  "gif",
-  "jpeg",
-  "jpg",
-  "png",
-  "tif",
-  "tiff",
-  "pbm",
-  "pgm",
-  "ppm",
-  "ras",
-  "xbm",
-  "xpm",
-  "svg",
-  "svm",
-  "wmf",
-  "webp",
-  // StarOffice
-  "sda",
-  "sdc",
-  "sdd",
-  "sdw",
-  "stc",
-  "std",
-  "sti",
-  "stw",
-  "sxd",
-  "sxg",
-  "sxi",
-  "sxw",
-  // Email formats
-  "eml",
-  // Archive formats
-  "zip",
-  // Other
-  "dbf",
-  "fods",
-  "vsd",
-  "vor",
-  "vor3",
-  "vor4",
-  "uop",
-  "pct",
-  "ps",
-  "pdf",
-];
+import { CONVERT_SUPPORTED_FORMATS } from "../constants/convertSupportedFornats";
 
 // Hook to get the translated tool registry
 export function useFlatToolRegistry(): ToolRegistry {
@@ -356,10 +282,12 @@ export function useFlatToolRegistry(): ToolRegistry {
       validateSignature: {
         icon: <LocalIcon icon="verified-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.validateSignature.title", "Validate PDF Signature"),
-        component: null,
+        component: ValidateSignature,
         description: t("home.validateSignature.desc", "Verify digital signatures and certificates in PDF documents"),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.VERIFICATION,
+        maxFiles: -1,
+        endpoints: ["validate-signature"],
         synonyms: getSynonyms(t, "validateSignature"),
         automationSettings: null
       },
@@ -704,13 +632,14 @@ export function useFlatToolRegistry(): ToolRegistry {
       },
       overlayPdfs: {
         icon: <LocalIcon icon="layers-rounded" width="1.5rem" height="1.5rem" />,
-        name: t("home.overlayPdfs.title", "Overlay PDFs"),
-        component: null,
-        description: t("home.overlayPdfs.desc", "Overlay one PDF on top of another"),
+        name: t("home.overlay-pdfs.title", "Overlay PDFs"),
+        component: OverlayPdfs,
+        description: t("home.overlay-pdfs.desc", "Overlay one PDF on top of another"),
         categoryId: ToolCategoryId.ADVANCED_TOOLS,
         subcategoryId: SubcategoryId.ADVANCED_FORMATTING,
-        synonyms: getSynonyms(t, "overlayPdfs"),
-        automationSettings: null
+        operationConfig: overlayPdfsOperationConfig,
+        synonyms: getSynonyms(t, "overlay-pdfs"),
+        automationSettings: OverlayPdfsSettings
       },
       replaceColor: {
         icon: <LocalIcon icon="format-color-fill-rounded" width="1.5rem" height="1.5rem" />,

frontend/src/hooks/tools/extractImages/useExtractImagesOperation.ts

@@ -1,8 +1,9 @@
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useToolOperation, ToolType } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
 import { ExtractImagesParameters, defaultParameters } from './useExtractImagesParameters';
-import JSZip from 'jszip';
+import { useToolResources } from '../shared/useToolResources';
 
 // Static configuration that can be used by both the hook and automation executor
 export const buildExtractImagesFormData = (parameters: ExtractImagesParameters, file: File): FormData => {
@@ -13,39 +14,28 @@ export const buildExtractImagesFormData = (parameters: ExtractImagesParameters,
   return formData;
 };
 
-// Response handler for extract-images which returns a ZIP file
-const extractImagesResponseHandler = async (responseData: Blob, _originalFiles: File[]): Promise<File[]> => {
-  const zip = new JSZip();
-  const zipContent = await zip.loadAsync(responseData);
-  const extractedFiles: File[] = [];
-
-  for (const [filename, file] of Object.entries(zipContent.files)) {
-    if (!file.dir) {
-      const blob = await file.async('blob');
-      const extractedFile = new File([blob], filename, { type: blob.type });
-      extractedFiles.push(extractedFile);
-    }
-  }
-
-  return extractedFiles;
-};
-
-// Static configuration object
+// Static configuration object (without response handler - will be added in hook)
 export const extractImagesOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildExtractImagesFormData,
   operationType: 'extractImages',
   endpoint: '/api/v1/misc/extract-images',
   defaultParameters,
-  // Extract-images returns a ZIP file containing multiple image files
-  responseHandler: extractImagesResponseHandler,
 } as const;
 
 export const useExtractImagesOperation = () => {
   const { t } = useTranslation();
+  const { extractZipFiles } = useToolResources();
+
+  // Response handler that respects auto-unzip preferences
+  const responseHandler = useCallback(async (blob: Blob, _originalFiles: File[]): Promise<File[]> => {
+    // Extract images returns a ZIP file - use preference-aware extraction
+    return await extractZipFiles(blob);
+  }, [extractZipFiles]);
 
   return useToolOperation<ExtractImagesParameters>({
     ...extractImagesOperationConfig,
+    responseHandler,
     getErrorMessage: createStandardErrorHandler(t('extractImages.error.failed', 'An error occurred while extracting images from the PDF.'))
   });
 };

frontend/src/hooks/tools/overlayPdfs/useOverlayPdfsOperation.ts

@@ -0,0 +1,46 @@
+import { useTranslation } from 'react-i18next';
+import { useToolOperation, ToolType, type ToolOperationConfig } from '../shared/useToolOperation';
+import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
+import { type OverlayPdfsParameters } from './useOverlayPdfsParameters';
+
+const buildFormData = (parameters: OverlayPdfsParameters, file: File): FormData => {
+  const formData = new FormData();
+  formData.append('fileInput', file);
+
+  // Overlay files
+  for (const overlay of parameters.overlayFiles || []) {
+    formData.append('overlayFiles', overlay);
+  }
+
+  // Mode and position
+  formData.append('overlayMode', parameters.overlayMode);
+  formData.append('overlayPosition', String(parameters.overlayPosition));
+
+  // Counts (only relevant for FixedRepeatOverlay, server accepts repeated 'counts' fields)
+  if (parameters.overlayMode === 'FixedRepeatOverlay') {
+    for (const count of parameters.counts || []) {
+      formData.append('counts', String(count));
+    }
+  }
+
+  return formData;
+};
+
+export const overlayPdfsOperationConfig: ToolOperationConfig<OverlayPdfsParameters> = {
+  toolType: ToolType.singleFile,
+  buildFormData,
+  operationType: 'overlayPdfs',
+  endpoint: '/api/v1/general/overlay-pdfs'
+};
+
+export const useOverlayPdfsOperation = () => {
+  const { t } = useTranslation();
+  return useToolOperation<OverlayPdfsParameters>({
+    ...overlayPdfsOperationConfig,
+    getErrorMessage: createStandardErrorHandler(
+      t('overlay-pdfs.error.failed', 'An error occurred while overlaying PDFs.')
+    ),
+  });
+};
+
+

frontend/src/hooks/tools/overlayPdfs/useOverlayPdfsParameters.ts

@@ -0,0 +1,37 @@
+import { BaseParameters } from '../../../types/parameters';
+import { useBaseParameters, type BaseParametersHook } from '../shared/useBaseParameters';
+
+export type OverlayMode = 'SequentialOverlay' | 'InterleavedOverlay' | 'FixedRepeatOverlay';
+
+export interface OverlayPdfsParameters extends BaseParameters {
+  overlayFiles: File[];
+  overlayMode: OverlayMode;
+  overlayPosition: 0 | 1;
+  counts: number[];
+}
+
+export const defaultParameters: OverlayPdfsParameters = {
+  overlayFiles: [],
+  overlayMode: 'SequentialOverlay',
+  overlayPosition: 0,
+  counts: []
+};
+
+export type OverlayPdfsParametersHook = BaseParametersHook<OverlayPdfsParameters>;
+
+export const useOverlayPdfsParameters = (): OverlayPdfsParametersHook => {
+  return useBaseParameters<OverlayPdfsParameters>({
+    defaultParameters,
+    endpointName: 'overlay-pdfs',
+    validateFn: (params) => {
+      if (!params.overlayFiles || params.overlayFiles.length === 0) return false;
+      if (params.overlayMode === 'FixedRepeatOverlay') {
+        if (!params.counts || params.counts.length !== params.overlayFiles.length) return false;
+        if (params.counts.some((c) => !Number.isFinite(c) || c <= 0)) return false;
+      }
+      return true;
+    },
+  });
+};
+
+

frontend/src/hooks/tools/removeAnnotations/useRemoveAnnotationsOperation.ts

@@ -2,12 +2,9 @@ import { useTranslation } from 'react-i18next';
 import { useToolOperation, ToolType } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
 import { RemoveAnnotationsParameters, defaultParameters } from './useRemoveAnnotationsParameters';
-
+import { PDFDocument, PDFName, PDFRef, PDFDict } from 'pdf-lib';
 // Client-side PDF processing using PDF-lib
 const removeAnnotationsProcessor = async (_parameters: RemoveAnnotationsParameters, files: File[]): Promise<File[]> => {
-  // Dynamic import of PDF-lib for client-side processing
-  const { PDFDocument, PDFName, PDFRef, PDFDict } = await import('pdf-lib');
-
   const processedFiles: File[] = [];
 
   for (const file of files) {

frontend/src/hooks/tools/replaceColor/useReplaceColorOperation.ts

@@ -33,6 +33,6 @@ export const useReplaceColorOperation = () => {
 
   return useToolOperation<ReplaceColorParameters>({
     ...replaceColorOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('replaceColor.error.failed', 'An error occurred while processing the color replacement.'))
+    getErrorMessage: createStandardErrorHandler(t('replaceColor.error.failed', 'An error occurred while processing the colour replacement.'))
   });
-};
+};

frontend/src/hooks/tools/scannerImageSplit/useScannerImageSplitOperation.ts

@@ -27,14 +27,14 @@ export const scannerImageSplitOperationConfig = {
 
 export const useScannerImageSplitOperation = () => {
   const { t } = useTranslation();
-  const { extractAllZipFiles } = useToolResources();
+  const { extractZipFiles } = useToolResources();
 
   // Custom response handler that extracts ZIP files containing images
   // Can't add to exported config because it requires access to the hook so must be part of the hook
   const responseHandler = useCallback(async (blob: Blob, originalFiles: File[]): Promise<File[]> => {
     try {
       // Scanner image split returns ZIP files with multiple images
-      const extractedFiles = await extractAllZipFiles(blob);
+      const extractedFiles = await extractZipFiles(blob);
 
       // If extraction succeeded and returned files, use them
       if (extractedFiles.length > 0) {
@@ -49,7 +49,7 @@ export const useScannerImageSplitOperation = () => {
     const baseFileName = inputFileName.replace(/\.[^.]+$/, '');
     const singleFile = new File([blob], `${baseFileName}.png`, { type: 'image/png' });
     return [singleFile];
-  }, [extractAllZipFiles]);
+  }, [extractZipFiles]);
 
   const config: ToolOperationConfig<ScannerImageSplitParameters> = {
     ...scannerImageSplitOperationConfig,

frontend/src/hooks/tools/shared/useToolOperation.ts

@@ -151,7 +151,7 @@ export const useToolOperation = <TParams>(
   const { state, actions } = useToolState();
   const { actions: fileActions } = useFileContext();
   const { processFiles, cancelOperation: cancelApiCalls } = useToolApiCalls<TParams>();
-  const { generateThumbnails, createDownloadInfo, cleanupBlobUrls, extractZipFiles, extractAllZipFiles } = useToolResources();
+  const { generateThumbnails, createDownloadInfo, cleanupBlobUrls, extractZipFiles } = useToolResources();
 
   // Track last operation for undo functionality
   const lastOperationRef = useRef<{
@@ -259,11 +259,6 @@ export const useToolOperation = <TParams>(
             // Default: assume ZIP response for multi-file endpoints
             // Note: extractZipFiles will check preferences.autoUnzip setting
             processedFiles = await extractZipFiles(response.data);
-
-            if (processedFiles.length === 0) {
-              // Try the generic extraction as fallback
-              processedFiles = await extractAllZipFiles(response.data);
-            }
           }
           // Assume all inputs succeeded together unless server provided an error earlier
           successSourceIds = validFiles.map(f => (f as any).fileId) as any;
@@ -446,7 +441,7 @@ export const useToolOperation = <TParams>(
       actions.setLoading(false);
       actions.setProgress(null);
     }
-  }, [t, config, actions, addFiles, consumeFiles, processFiles, generateThumbnails, createDownloadInfo, cleanupBlobUrls, extractZipFiles, extractAllZipFiles]);
+  }, [t, config, actions, addFiles, consumeFiles, processFiles, generateThumbnails, createDownloadInfo, cleanupBlobUrls, extractZipFiles]);
 
   const cancelOperation = useCallback(() => {
     cancelApiCalls();

frontend/src/hooks/tools/shared/useToolResources.ts

@@ -27,11 +27,11 @@ export const useToolResources = () => {
 
   // Cleanup on unmount - use ref to avoid dependency on blobUrls state
   const blobUrlsRef = useRef<string[]>([]);
-  
+
   useEffect(() => {
     blobUrlsRef.current = blobUrls;
   }, [blobUrls]);
-  
+
   useEffect(() => {
     return () => {
       blobUrlsRef.current.forEach(url => {
@@ -85,50 +85,17 @@ export const useToolResources = () => {
 
   const extractZipFiles = useCallback(async (zipBlob: Blob, skipAutoUnzip = false): Promise<File[]> => {
     try {
-      // Check if we should extract based on preferences
-      const shouldExtract = await zipFileService.shouldUnzip(
-        zipBlob,
-        preferences.autoUnzip,
-        preferences.autoUnzipFileLimit,
+      return await zipFileService.extractWithPreferences(zipBlob, {
+        autoUnzip: preferences.autoUnzip,
+        autoUnzipFileLimit: preferences.autoUnzipFileLimit,
         skipAutoUnzip
-      );
-
-      if (!shouldExtract) {
-        return [new File([zipBlob], 'result.zip', { type: 'application/zip' })];
-      }
-
-      const zipFile = new File([zipBlob], 'temp.zip', { type: 'application/zip' });
-      const extractionResult = await zipFileService.extractPdfFiles(zipFile);
-      return extractionResult.success ? extractionResult.extractedFiles : [];
+      });
     } catch (error) {
       console.error('useToolResources.extractZipFiles - Error:', error);
       return [];
     }
   }, [preferences.autoUnzip, preferences.autoUnzipFileLimit]);
 
-  const extractAllZipFiles = useCallback(async (zipBlob: Blob, skipAutoUnzip = false): Promise<File[]> => {
-    try {
-      // Check if we should extract based on preferences
-      const shouldExtract = await zipFileService.shouldUnzip(
-        zipBlob,
-        preferences.autoUnzip,
-        preferences.autoUnzipFileLimit,
-        skipAutoUnzip
-      );
-
-      if (!shouldExtract) {
-        return [new File([zipBlob], 'result.zip', { type: 'application/zip' })];
-      }
-
-      const zipFile = new File([zipBlob], 'temp.zip', { type: 'application/zip' });
-      const extractionResult = await zipFileService.extractAllFiles(zipFile);
-      return extractionResult.success ? extractionResult.extractedFiles : [];
-    } catch (error) {
-      console.error('useToolResources.extractAllZipFiles - Error:', error);
-      return [];
-    }
-  }, [preferences.autoUnzip, preferences.autoUnzipFileLimit]);
-
   const createDownloadInfo = useCallback(async (
     files: File[],
     operationType: string
@@ -152,7 +119,6 @@ export const useToolResources = () => {
     generateThumbnailsWithMetadata,
     createDownloadInfo,
     extractZipFiles,
-    extractAllZipFiles,
     cleanupBlobUrls,
   };
 };

frontend/src/hooks/tools/useFavoriteToolItems.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { ToolId } from '../../types/toolId';
+import { ToolRegistryEntry } from '../../data/toolsTaxonomy';
+
+export function useFavoriteToolItems(
+  favoriteTools: ToolId[],
+  toolRegistry: Partial<Record<ToolId, ToolRegistryEntry>>
+): Array<{ id: ToolId; tool: ToolRegistryEntry }> {
+  return useMemo(() => {
+    return favoriteTools
+      .map((toolId) => {
+        const tool = toolRegistry[toolId as ToolId];
+        return tool ? { id: toolId as ToolId, tool } : null;
+      })
+      .filter((x): x is { id: ToolId; tool: ToolRegistryEntry } => x !== null)
+      .filter(({ id, tool }) => Boolean(tool.component) || Boolean(tool.link) || id === 'read' || id === 'multiTool');
+  }, [favoriteTools, toolRegistry]);
+}
+
+

frontend/src/hooks/tools/useToolPanelGeometry.ts

@@ -0,0 +1,119 @@
+import { useLayoutEffect, useState, RefObject, useRef } from 'react';
+
+export interface ToolPanelGeometry {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+interface UseToolPanelGeometryOptions {
+  enabled: boolean;
+  toolPanelRef: RefObject<HTMLDivElement | null>;
+  quickAccessRef: RefObject<HTMLDivElement | null>;
+  rightRailRef?: RefObject<HTMLDivElement | null>;
+}
+
+export function useToolPanelGeometry({
+  enabled,
+  toolPanelRef,
+  quickAccessRef,
+  rightRailRef,
+}: UseToolPanelGeometryOptions) {
+  const [geometry, setGeometry] = useState<ToolPanelGeometry | null>(null);
+  const scheduleUpdateRef = useRef<() => void>(() => {});
+
+  useLayoutEffect(() => {
+    if (!enabled) {
+      setGeometry(null);
+      return;
+    }
+
+    const panelEl = toolPanelRef.current;
+    if (!panelEl) {
+      setGeometry(null);
+      return;
+    }
+
+    const rightRailEl = () => (rightRailRef?.current ?? null);
+
+    let rafId: number | null = null;
+
+    const computeAndSetGeometry = () => {
+      const rect = panelEl.getBoundingClientRect();
+      const rail = rightRailEl();
+      const rightOffset = rail ? Math.max(0, window.innerWidth - rail.getBoundingClientRect().left) : 0;
+      const width = Math.max(360, window.innerWidth - rect.left - rightOffset);
+      const height = Math.max(rect.height, window.innerHeight - rect.top);
+      setGeometry({
+        left: rect.left,
+        top: rect.top,
+        width,
+        height,
+      });
+    };
+
+    const scheduleUpdate = () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+      rafId = requestAnimationFrame(() => {
+        computeAndSetGeometry();
+        rafId = null;
+      });
+    };
+    scheduleUpdateRef.current = scheduleUpdate;
+
+    // Initial geometry calculation (no debounce)
+    computeAndSetGeometry();
+
+    let resizeObserver: ResizeObserver | null = null;
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => scheduleUpdate());
+      resizeObserver.observe(panelEl);
+      if (quickAccessRef.current) {
+        resizeObserver.observe(quickAccessRef.current);
+      }
+      const rail = rightRailEl();
+      if (rail) {
+        resizeObserver.observe(rail);
+      }
+      // Observe root element to react to viewport-driven layout changes
+      if (document.documentElement) {
+        resizeObserver.observe(document.documentElement);
+      }
+    } else {
+      // Fallback for environments without ResizeObserver
+      const handleResize = () => scheduleUpdate();
+      window.addEventListener('resize', handleResize);
+      // Ensure cleanup of the fallback listener
+      resizeObserver = {
+        disconnect: () => window.removeEventListener('resize', handleResize),
+      } as unknown as ResizeObserver;
+    }
+
+    return () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+      scheduleUpdateRef.current = () => {};
+      resizeObserver?.disconnect();
+    };
+  }, [enabled, quickAccessRef, toolPanelRef, rightRailRef]);
+
+  // Secondary effect: (re)attach observers when refs' .current become available later
+  useLayoutEffect(() => {
+    if (!enabled) return;
+    if (typeof ResizeObserver === 'undefined') return;
+    const qa = quickAccessRef.current;
+    const rail = rightRailRef?.current ?? null;
+    if (!qa && !rail) return;
+
+    const ro = new ResizeObserver(() => scheduleUpdateRef.current());
+    if (qa) ro.observe(qa);
+    if (rail) ro.observe(rail);
+    return () => ro.disconnect();
+  }, [enabled, quickAccessRef.current, rightRailRef?.current]);
+
+  return geometry;
+}

frontend/src/hooks/tools/useUserToolActivity.ts

@@ -0,0 +1,70 @@
+import { useState, useEffect, useCallback } from 'react';
+import { ToolId } from '../../types/toolId';
+
+const RECENT_TOOLS_KEY = 'stirlingpdf.recentTools';
+const FAVORITE_TOOLS_KEY = 'stirlingpdf.favoriteTools';
+
+export function useToolHistory() {
+  const [recentTools, setRecentTools] = useState<ToolId[]>([]);
+  const [favoriteTools, setFavoriteTools] = useState<ToolId[]>([]);
+
+  // Load from localStorage on mount
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const recentStr = window.localStorage.getItem(RECENT_TOOLS_KEY);
+    const favoritesStr = window.localStorage.getItem(FAVORITE_TOOLS_KEY);
+
+    if (recentStr) {
+      try {
+        const recent = JSON.parse(recentStr) as ToolId[];
+        setRecentTools(recent);
+      } catch {
+        // Ignore parse errors
+      }
+    }
+
+    if (favoritesStr) {
+      try {
+        const favorites = JSON.parse(favoritesStr) as ToolId[];
+        setFavoriteTools(favorites);
+      } catch {
+        // Ignore parse errors
+      }
+    }
+  }, []);
+
+
+  // Toggle favorite status
+  const toggleFavorite = useCallback((toolId: ToolId) => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    setFavoriteTools((prev) => {
+      const isFavorite = prev.includes(toolId);
+      const updated = isFavorite
+        ? prev.filter((id) => id !== toolId)
+        : [...prev, toolId];
+      window.localStorage.setItem(FAVORITE_TOOLS_KEY, JSON.stringify(updated));
+      return updated;
+    });
+  }, []);
+
+  // Check if a tool is favorited
+  const isFavorite = useCallback(
+    (toolId: ToolId): boolean => {
+      return favoriteTools.includes(toolId);
+    },
+    [favoriteTools]
+  );
+
+  return {
+    recentTools,
+    favoriteTools,
+    toggleFavorite,
+    isFavorite,
+  };
+}

frontend/src/hooks/tools/validateSignature/outputtedPDFSections/CenteredMessageSection.ts

@@ -0,0 +1,68 @@
+import { PDFFont, PDFPage, rgb } from 'pdf-lib';
+import { wrapText } from '../utils/pdfText';
+import { colorPalette } from '../utils/pdfPalette';
+
+interface DrawCenteredMessageOptions {
+  page: PDFPage;
+  font: PDFFont;
+  fontBold: PDFFont;
+  text: string;
+  description: string;
+  marginX: number;
+  contentWidth: number;
+  cursorY: number;
+  badgeColor: ReturnType<typeof rgb>;
+}
+
+export const drawCenteredMessage = ({
+  page,
+  font,
+  fontBold,
+  text,
+  description,
+  marginX,
+  contentWidth,
+  cursorY,
+  badgeColor,
+}: DrawCenteredMessageOptions): number => {
+  const badgeFontSize = 10;
+  const badgePaddingX = 14;
+  const badgePaddingY = 6;
+  const badgeWidth = font.widthOfTextAtSize(text, badgeFontSize) + badgePaddingX * 2;
+  const badgeHeight = badgeFontSize + badgePaddingY * 2;
+  const badgeX = marginX + (contentWidth - badgeWidth) / 2;
+
+  page.drawRectangle({
+    x: badgeX,
+    y: cursorY - badgeHeight,
+    width: badgeWidth,
+    height: badgeHeight,
+    color: badgeColor,
+  });
+
+  page.drawText(text, {
+    x: badgeX + badgePaddingX,
+    y: cursorY - badgePaddingY - badgeFontSize + 2,
+    size: badgeFontSize,
+    font: fontBold,
+    color: rgb(1, 1, 1),
+  });
+
+  let nextCursor = cursorY - 32;
+  const lines = wrapText(description, font, 11, contentWidth * 0.75);
+
+  lines.forEach((line) => {
+    const lineWidth = font.widthOfTextAtSize(line, 11);
+    const lineX = marginX + (contentWidth - lineWidth) / 2;
+    page.drawText(line, {
+      x: lineX,
+      y: nextCursor,
+      size: 11,
+      font,
+      color: colorPalette.textPrimary,
+    });
+    nextCursor -= 18;
+  });
+
+  return nextCursor - 8;
+};

frontend/src/hooks/tools/validateSignature/outputtedPDFSections/FieldBoxSection.ts

@@ -0,0 +1,70 @@
+import { PDFFont, PDFPage } from 'pdf-lib';
+import { wrapText } from '../utils/pdfText';
+import { colorPalette } from '../utils/pdfPalette';
+
+interface FieldBoxOptions {
+  page: PDFPage;
+  font: PDFFont;
+  fontBold: PDFFont;
+  x: number;
+  top: number;
+  width: number;
+  label: string;
+  value: string;
+}
+
+export const drawFieldBox = ({
+  page,
+  font,
+  fontBold,
+  x,
+  top,
+  width,
+  label,
+  value,
+}: FieldBoxOptions): number => {
+  const labelFontSize = 8;
+  const valueFontSize = 11;
+  const valueLineHeight = valueFontSize * 1.25;
+  const boxPadding = 6;
+
+  page.drawText(label.toUpperCase(), {
+    x,
+    y: top - labelFontSize,
+    size: labelFontSize,
+    font: fontBold,
+    color: colorPalette.textMuted,
+  });
+
+  const boxTop = top - labelFontSize - 6;
+  const rawValue = value && value.trim().length > 0 ? value : '--';
+  const lines = wrapText(rawValue, font, valueFontSize, width - boxPadding * 2);
+  const boxHeight = Math.max(valueLineHeight, lines.length * valueLineHeight) + boxPadding * 2;
+
+  page.drawRectangle({
+    x,
+    y: boxTop - boxHeight,
+    width,
+    height: boxHeight,
+    color: colorPalette.boxBackground,
+    borderColor: colorPalette.boxBorder,
+  });
+
+  let textY = boxTop - boxPadding - valueFontSize;
+  lines.forEach((line) => {
+    const lineWidth = font.widthOfTextAtSize(line, valueFontSize);
+    const available = width - boxPadding * 2;
+    const centeredX = x + boxPadding + Math.max(0, (available - lineWidth) / 2);
+
+    page.drawText(line, {
+      x: centeredX,
+      y: textY,
+      size: valueFontSize,
+      font,
+      color: colorPalette.textPrimary,
+    });
+    textY -= valueLineHeight;
+  });
+
+  return labelFontSize + 6 + boxHeight + 6;
+};

frontend/src/hooks/tools/validateSignature/outputtedPDFSections/SignatureSection.ts

@@ -0,0 +1,173 @@
+import type { TFunction } from 'i18next';
+import { PDFFont, PDFPage } from 'pdf-lib';
+import { SignatureValidationSignature } from '../../../../types/validateSignature';
+import { drawFieldBox } from './FieldBoxSection';
+import { drawStatusBadge } from './StatusBadgeSection';
+import { computeSignatureStatus, statusKindToPdfColor } from '../utils/signatureStatus';
+import { formatDate } from '../utils/pdfText';
+import { colorPalette } from '../utils/pdfPalette';
+
+interface DrawSignatureSectionOptions {
+  page: PDFPage;
+  cursorY: number;
+  signature: SignatureValidationSignature;
+  index: number;
+  marginX: number;
+  contentWidth: number;
+  columnGap: number;
+  font: PDFFont;
+  fontBold: PDFFont;
+  t: TFunction<'translation'>;
+}
+
+export const drawSignatureSection = ({
+  page,
+  cursorY,
+  signature,
+  index,
+  marginX,
+  contentWidth,
+  columnGap,
+  font,
+  fontBold,
+  t,
+}: DrawSignatureSectionOptions): number => {
+  const columnWidth = (contentWidth - columnGap) / 2;
+
+  const heading = `${t('validateSignature.signature._value', 'Signature')} ${index + 1}`;
+  page.drawText(heading, {
+    x: marginX,
+    y: cursorY,
+    size: 14,
+    font: fontBold,
+    color: colorPalette.textPrimary,
+  });
+
+  const status = computeSignatureStatus(signature, t);
+  const statusColor = statusKindToPdfColor(status.kind);
+
+  const headingWidth = fontBold.widthOfTextAtSize(heading, 14);
+  drawStatusBadge({
+    page,
+    font,
+    fontBold,
+    text: status.label,
+    x: marginX + headingWidth + 16,
+    y: cursorY + 14,
+    color: statusColor,
+  });
+
+  let nextY = cursorY - 20;
+
+  const signatureFields = [
+    { label: t('validateSignature.signer', 'Signer'), value: signature.signerName || '-' },
+    { label: t('validateSignature.date', 'Date'), value: formatDate(signature.signatureDate) },
+    { label: t('validateSignature.reason', 'Reason'), value: signature.reason || '-' },
+    { label: t('validateSignature.location', 'Location'), value: signature.location || '-' },
+  ];
+
+  for (let i = 0; i < signatureFields.length; i += 2) {
+    const leftField = signatureFields[i];
+    const rightField = signatureFields[i + 1];
+
+    const leftHeight = drawFieldBox({
+      page,
+      font,
+      fontBold,
+      x: marginX,
+      top: nextY,
+      width: columnWidth,
+      label: leftField.label,
+      value: leftField.value,
+    });
+
+    let rowHeight = leftHeight;
+    if (rightField) {
+      const rightHeight = drawFieldBox({
+        page,
+        font,
+        fontBold,
+        x: marginX + columnWidth + columnGap,
+        top: nextY,
+        width: columnWidth,
+        label: rightField.label,
+        value: rightField.value,
+      });
+      rowHeight = Math.max(leftHeight, rightHeight);
+    }
+
+    nextY -= rowHeight + 8;
+  }
+
+  nextY -= 6;
+  page.drawLine({
+    start: { x: marginX, y: nextY },
+    end: { x: marginX + contentWidth, y: nextY },
+    thickness: 1,
+    color: colorPalette.boxBorder,
+  });
+  nextY -= 20; 
+
+  const certificateFields = [
+    { label: t('validateSignature.cert.issuer', 'Issuer'), value: signature.issuerDN || '-' },
+    { label: t('validateSignature.cert.subject', 'Subject'), value: signature.subjectDN || '-' },
+    { label: t('validateSignature.cert.serialNumber', 'Serial Number'), value: signature.serialNumber || '-' },
+    { label: t('validateSignature.cert.algorithm', 'Algorithm'), value: signature.signatureAlgorithm || '-' },
+    { label: t('validateSignature.cert.validFrom', 'Valid From'), value: formatDate(signature.validFrom) },
+    { label: t('validateSignature.cert.validUntil', 'Valid Until'), value: formatDate(signature.validUntil) },
+    {
+      label: t('validateSignature.cert.keySize', 'Key Size'),
+      value:
+        signature.keySize != null
+          ? `${signature.keySize} ${t('validateSignature.cert.bits', 'bits')}`
+          : '--',
+    },
+    { label: t('validateSignature.cert.version', 'Version'), value: signature.version || '-' },
+    {
+      label: t('validateSignature.cert.keyUsage', 'Key Usage'),
+      value:
+        signature.keyUsages && signature.keyUsages.length > 0
+          ? signature.keyUsages.join(', ')
+          : '--',
+    },
+    {
+      label: t('validateSignature.cert.selfSigned', 'Self-Signed'),
+      value: signature.selfSigned ? t('yes', 'Yes') : t('no', 'No'),
+    },
+  ];
+
+  for (let i = 0; i < certificateFields.length; i += 2) {
+    const leftField = certificateFields[i];
+    const rightField = certificateFields[i + 1];
+
+    const leftHeight = drawFieldBox({
+      page,
+      font,
+      fontBold,
+      x: marginX,
+      top: nextY,
+      width: columnWidth,
+      label: leftField.label,
+      value: leftField.value,
+    });
+
+    let rowHeight = leftHeight;
+    if (rightField) {
+      const rightHeight = drawFieldBox({
+        page,
+        font,
+        fontBold,
+        x: marginX + columnWidth + columnGap,
+        top: nextY,
+        width: columnWidth,
+        label: rightField.label,
+        value: rightField.value,
+      });
+      rowHeight = Math.max(leftHeight, rightHeight);
+    }
+
+    nextY -= rowHeight + 8;
+  }
+
+  return nextY - 12;
+};

frontend/src/hooks/tools/validateSignature/outputtedPDFSections/StatusBadgeSection.ts

@@ -0,0 +1,38 @@
+import { PDFFont, PDFPage, rgb } from 'pdf-lib';
+
+interface StatusBadgeOptions {
+  page: PDFPage;
+  font: PDFFont;
+  fontBold: PDFFont;
+  text: string;
+  x: number;
+  y: number;
+  color: ReturnType<typeof rgb>;
+}
+
+export const drawStatusBadge = ({ page, font, fontBold, text, x, y, color }: StatusBadgeOptions): number => {
+  const paddingX = 14;
+  const paddingY = 6;
+  const fontSize = 10;
+  const textWidth = font.widthOfTextAtSize(text, fontSize);
+  const width = textWidth + paddingX * 2;
+  const height = fontSize + paddingY * 2;
+
+  page.drawRectangle({
+    x,
+    y: y - height,
+    width,
+    height,
+    color,
+  });
+
+  page.drawText(text, {
+    x: x + paddingX,
+    y: y - paddingY - fontSize + 2,
+    size: fontSize,
+    font: fontBold,
+    color: rgb(1, 1, 1),
+  });
+
+  return width;
+};