Tools/ocr/v2 (#4055)

# Description of Changes

- Added the OCR tool 
- Added language mappings file to map selected browser language -> OCR
language and OCR language codes -> english display values. TODO: Use the
translation function to translate the languages rather than mapping them
to english be default
- Added chevron icons to tool step to show expand and collapsed state
more visibly
- Added a re-usable dropdown picker with a footer component

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>

frontend/public/locales/en-GB/translation.json

@@ -1676,4 +1676,4 @@
     "storageQuotaExceeded": "Storage quota exceeded. Please remove some files before uploading more.",
     "approximateSize": "Approximate size"
   }
-}
+}

frontend/src/components/shared/DropdownListWithFooter.tsx

@@ -0,0 +1,237 @@
+import React, { ReactNode, useState, useMemo } from 'react';
+import { Stack, Text, Popover, Box, Checkbox, Group, TextInput } from '@mantine/core';
+import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
+import SearchIcon from '@mui/icons-material/Search';
+
+export interface DropdownItem {
+  value: string;
+  name: string;
+  leftIcon?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface DropdownListWithFooterProps {
+  // Value and onChange - support both single and multi-select
+  value: string | string[];
+  onChange: (value: string | string[]) => void;
+  
+  // Items and display
+  items: DropdownItem[];
+  placeholder?: string;
+  disabled?: boolean;
+  
+  // Labels and headers
+  label?: string;
+  header?: ReactNode;
+  footer?: ReactNode;
+  
+  // Behavior
+  multiSelect?: boolean;
+  searchable?: boolean;
+  maxHeight?: number;
+  
+  // Styling
+  className?: string;
+  dropdownClassName?: string;
+  
+  // Popover props
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  withArrow?: boolean;
+  width?: 'target' | number;
+}
+
+const DropdownListWithFooter: React.FC<DropdownListWithFooterProps> = ({
+  value,
+  onChange,
+  items,
+  placeholder = 'Select option',
+  disabled = false,
+  label,
+  header,
+  footer,
+  multiSelect = false,
+  searchable = false,
+  maxHeight = 300,
+  className = '',
+  dropdownClassName = '',
+  position = 'bottom',
+  withArrow = false,
+  width = 'target'
+}) => {
+  
+  const [searchTerm, setSearchTerm] = useState('');
+  
+  const isMultiValue = Array.isArray(value);
+  const selectedValues = isMultiValue ? value : (value ? [value] : []);
+
+  // Filter items based on search term
+  const filteredItems = useMemo(() => {
+    if (!searchable || !searchTerm.trim()) {
+      return items;
+    }
+    return items.filter(item => 
+      item.name.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [items, searchTerm, searchable]);
+
+  const handleItemClick = (itemValue: string) => {
+    if (multiSelect) {
+      const newSelection = selectedValues.includes(itemValue)
+        ? selectedValues.filter(v => v !== itemValue)
+        : [...selectedValues, itemValue];
+      onChange(newSelection);
+    } else {
+      onChange(itemValue);
+    }
+  };
+
+  const getDisplayText = () => {
+    if (selectedValues.length === 0) {
+      return placeholder;
+    } else if (selectedValues.length === 1) {
+      const selectedItem = items.find(item => item.value === selectedValues[0]);
+      return selectedItem?.name || selectedValues[0];
+    } else {
+      return `${selectedValues.length} selected`;
+    }
+  };
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.currentTarget.value);
+  };
+
+  return (
+    <Box className={className}>
+      {label && (
+        <Text size="sm" fw={500} mb={4}>
+          {label}
+        </Text>
+      )}
+      
+      <Popover 
+        width={width} 
+        position={position} 
+        withArrow={withArrow} 
+        shadow="md"
+        onClose={() => searchable && setSearchTerm('')}
+      >
+        <Popover.Target>
+          <Box
+            style={{
+              border: 'light-dark(1px solid var(--mantine-color-gray-3), 1px solid var(--mantine-color-dark-4))',
+              borderRadius: 'var(--mantine-radius-sm)',
+              padding: '8px 12px',
+              backgroundColor: 'light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))',
+              opacity: disabled ? 0.6 : 1,
+              cursor: disabled ? 'not-allowed' : 'pointer',
+              minHeight: '36px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between'
+            }}
+          >
+            <Text size="sm" style={{ flex: 1 }}>
+              {getDisplayText()}
+            </Text>
+            <UnfoldMoreIcon style={{ 
+              fontSize: '1rem', 
+              color: 'light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-2))' 
+            }} />
+          </Box>
+        </Popover.Target>
+        
+        <Popover.Dropdown className={dropdownClassName}>
+          <Stack gap="xs">
+            {header && (
+              <Box style={{ 
+                borderBottom: 'light-dark(1px solid var(--mantine-color-gray-2), 1px solid var(--mantine-color-dark-4))', 
+                paddingBottom: '8px' 
+              }}>
+                {header}
+              </Box>
+            )}
+            
+            {searchable && (
+              <Box style={{ 
+                borderBottom: 'light-dark(1px solid var(--mantine-color-gray-2), 1px solid var(--mantine-color-dark-4))', 
+                paddingBottom: '8px' 
+              }}>
+                <TextInput
+                  placeholder="Search..."
+                  value={searchTerm}
+                  onChange={handleSearchChange}
+                  leftSection={<SearchIcon style={{ fontSize: '1rem' }} />}
+                  size="sm"
+                  style={{ width: '100%' }}
+                />
+              </Box>
+            )}
+            
+            <Box style={{ maxHeight, overflowY: 'auto' }}>
+              {filteredItems.length === 0 ? (
+                <Box style={{ padding: '12px', textAlign: 'center' }}>
+                  <Text size="sm" c="dimmed">
+                    {searchable && searchTerm ? 'No results found' : 'No items available'}
+                  </Text>
+                </Box>
+              ) : (
+                filteredItems.map((item) => (
+                <Box
+                  key={item.value}
+                  onClick={() => !item.disabled && handleItemClick(item.value)}
+                  style={{
+                    padding: '8px 12px',
+                    cursor: item.disabled ? 'not-allowed' : 'pointer',
+                    borderRadius: 'var(--mantine-radius-sm)',
+                    opacity: item.disabled ? 0.5 : 1,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                  }}
+                  onMouseEnter={(e) => {
+                    if (!item.disabled) {
+                      e.currentTarget.style.backgroundColor = 'light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5))';
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.backgroundColor = 'transparent';
+                  }}
+                >
+                  <Group gap="sm" style={{ flex: 1 }}>
+                    {item.leftIcon && (
+                      <Box style={{ display: 'flex', alignItems: 'center' }}>
+                        {item.leftIcon}
+                      </Box>
+                    )}
+                    <Text size="sm">{item.name}</Text>
+                  </Group>
+                  
+                  {multiSelect && (
+                    <Checkbox
+                      checked={selectedValues.includes(item.value)}
+                      onChange={() => {}} // Handled by parent onClick
+                      size="sm"
+                      disabled={item.disabled}
+                    />
+                  )}
+                </Box>
+                ))
+              )}
+            </Box>
+            
+            {footer && (
+              <Box style={{ 
+                borderTop: 'light-dark(1px solid var(--mantine-color-gray-2), 1px solid var(--mantine-color-dark-4))', 
+                paddingTop: '8px' 
+              }}>
+                {footer}
+              </Box>
+            )}
+          </Stack>
+        </Popover.Dropdown>
+      </Popover>
+    </Box>
+  );
+};
+
+export default DropdownListWithFooter; 

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

@@ -44,7 +44,7 @@
 
 /* Dark theme support */
 [data-mantine-color-scheme="dark"] .languageItem {
-  border-right-color: var(--mantine-color-dark-4);
+  border-right-color: var(--mantine-color-dark-3);
 }
 
 [data-mantine-color-scheme="dark"] .languageItem:nth-child(4n) {
@@ -52,11 +52,11 @@
 }
 
 [data-mantine-color-scheme="dark"] .languageItem:nth-child(2n) {
-  border-right-color: var(--mantine-color-dark-4);
+  border-right-color: var(--mantine-color-dark-3);
 }
 
 [data-mantine-color-scheme="dark"] .languageItem:nth-child(3n) {
-  border-right-color: var(--mantine-color-dark-4);
+  border-right-color: var(--mantine-color-dark-3);
 }
 
 /* Responsive text visibility */

frontend/src/components/shared/LanguageSelector.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Menu, Button, ScrollArea, useMantineTheme, useMantineColorScheme } from '@mantine/core';
+import { Menu, Button, ScrollArea } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { supportedLanguages } from '../../i18n';
 import LanguageIcon from '@mui/icons-material/Language';
@@ -7,8 +7,6 @@ import styles from './LanguageSelector.module.css';
 
 const LanguageSelector = () => {
   const { i18n } = useTranslation();
-  const theme = useMantineTheme();
-  const { colorScheme } = useMantineColorScheme();
   const [opened, setOpened] = useState(false);
   const [animationTriggered, setAnimationTriggered] = useState(false);
   const [isChanging, setIsChanging] = useState(false);
@@ -102,10 +100,10 @@ const LanguageSelector = () => {
           styles={{
             root: {
               border: 'none',
-              color: colorScheme === 'dark' ? theme.colors.gray[3] : theme.colors.gray[7],
+              color: 'light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-1))',
               transition: 'background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
               '&:hover': {
-                backgroundColor: colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+                backgroundColor: 'light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))',
               }
             },
             label: {
@@ -125,7 +123,8 @@ const LanguageSelector = () => {
           padding: '12px',
           borderRadius: '8px',
           boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
-          border: colorScheme === 'dark' ? `1px solid ${theme.colors.dark[4]}` : `1px solid ${theme.colors.gray[3]}`,
+          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))',
         }}
       >
         <ScrollArea h={190} type="scroll">
@@ -145,6 +144,7 @@ const LanguageSelector = () => {
                   size="sm"
                   fullWidth
                   onClick={(event) => handleLanguageChange(option.value, event)}
+                  data-selected={option.value === i18n.language}
                   styles={{
                     root: {
                       borderRadius: '4px',
@@ -153,21 +153,17 @@ const LanguageSelector = () => {
                       justifyContent: 'flex-start',
                       position: 'relative',
                       overflow: 'hidden',
-                      backgroundColor: option.value === i18n.language ? (
-                        colorScheme === 'dark' ? theme.colors.blue[8] : theme.colors.blue[1]
-                      ) : 'transparent',
-                      color: option.value === i18n.language ? (
-                        colorScheme === 'dark' ? theme.colors.blue[2] : theme.colors.blue[7]
-                      ) : (
-                        colorScheme === 'dark' ? theme.colors.gray[3] : theme.colors.gray[7]
-                      ),
+                      backgroundColor: option.value === i18n.language 
+                        ? 'light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-8))'
+                        : 'transparent',
+                      color: option.value === i18n.language 
+                        ? 'light-dark(var(--mantine-color-blue-9), var(--mantine-color-white))'
+                        : 'light-dark(var(--mantine-color-gray-7), var(--mantine-color-white))',
                       transition: 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
                       '&:hover': {
-                        backgroundColor: option.value === i18n.language ? (
-                          colorScheme === 'dark' ? theme.colors.blue[7] : theme.colors.blue[2]
-                        ) : (
-                          colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]
-                        ),
+                        backgroundColor: option.value === i18n.language 
+                          ? 'light-dark(var(--mantine-color-blue-2), var(--mantine-color-blue-7))'
+                          : 'light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))',
                         transform: 'translateY(-1px)',
                         boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
                       }
@@ -197,7 +193,7 @@ const LanguageSelector = () => {
                         width: 0,
                         height: 0,
                         borderRadius: '50%',
-                        backgroundColor: theme.colors.blue[4],
+                        backgroundColor: 'var(--mantine-color-blue-4)',
                         opacity: 0.6,
                         transform: 'translate(-50%, -50%)',
                         animation: 'ripple-expand 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)',

frontend/src/components/tools/ocr/AdvancedOCRSettings.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Stack, Text, Checkbox } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { OCRParameters } from './OCRSettings';
+
+export interface AdvancedOCRParameters {
+  advancedOptions: string[];
+}
+
+interface AdvancedOption {
+  value: string;
+  label: string;
+  isSpecial: boolean;
+}
+
+interface AdvancedOCRSettingsProps {
+  advancedOptions: string[];
+  ocrRenderType?: string;
+  onParameterChange: (key: keyof OCRParameters, value: any) => void;
+  disabled?: boolean;
+}
+
+const AdvancedOCRSettings: React.FC<AdvancedOCRSettingsProps> = ({
+  advancedOptions,
+  ocrRenderType = 'hocr',
+  onParameterChange,
+  disabled = false
+}) => {
+  const { t } = useTranslation();
+
+  // Define the advanced options available
+  const advancedOptionsData: AdvancedOption[] = [
+    { value: 'compatibilityMode', label: t('ocr.settings.compatibilityMode.label', 'Compatibility Mode'), isSpecial: true },
+    { value: 'sidecar', label: t('ocr.settings.advancedOptions.sidecar', 'Create a text file'), isSpecial: false },
+    { value: 'deskew', label: t('ocr.settings.advancedOptions.deskew', 'Deskew pages'), isSpecial: false },
+    { value: 'clean', label: t('ocr.settings.advancedOptions.clean', 'Clean input file'), isSpecial: false },
+    { value: 'cleanFinal', label: t('ocr.settings.advancedOptions.cleanFinal', 'Clean final output'), isSpecial: false },
+  ];
+
+  // Handle individual checkbox changes
+  const handleCheckboxChange = (optionValue: string, checked: boolean) => {
+    const option = advancedOptionsData.find(opt => opt.value === optionValue);
+    
+    if (option?.isSpecial) {
+      // Handle special options (like compatibility mode) differently
+      if (optionValue === 'compatibilityMode') {
+        onParameterChange('ocrRenderType', checked ? 'sandwich' : 'hocr');
+      }
+    } else {
+      // Handle regular advanced options
+      const newOptions = checked
+        ? [...advancedOptions, optionValue]
+        : advancedOptions.filter(option => option !== optionValue);
+      onParameterChange('additionalOptions', newOptions);
+    }
+  };
+
+  // Check if a special option is selected
+  const isSpecialOptionSelected = (optionValue: string) => {
+    if (optionValue === 'compatibilityMode') {
+      return ocrRenderType === 'sandwich';
+    }
+    return false;
+  };
+
+  return (
+    <Stack gap="md">
+      <div>
+        <Text size="sm" fw={500} mb="md">
+          {t('ocr.settings.advancedOptions.label', 'Processing Options')}
+        </Text>
+        
+        <Stack gap="sm">
+          {advancedOptionsData.map((option) => (
+            <Checkbox
+              key={option.value}
+              checked={option.isSpecial ? isSpecialOptionSelected(option.value) : advancedOptions.includes(option.value)}
+              onChange={(event) => handleCheckboxChange(option.value, event.currentTarget.checked)}
+              label={option.label}
+              disabled={disabled}
+              size="sm"
+            />
+          ))}
+        </Stack>
+      </div>
+    </Stack>
+  );
+};
+
+export default AdvancedOCRSettings; 

frontend/src/components/tools/ocr/LanguagePicker.module.css

@@ -0,0 +1,126 @@
+/* Language Picker Component */
+.languagePicker {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center; /* Center align items vertically */
+  height: 32px;
+  border: 1px solid var(--border-default);
+  background-color: var(--mantine-color-white); /* Use Mantine color variable */
+  color: var(--text-secondary);
+  border-radius: var(--radius-sm);
+  padding: 4px 8px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+/* Dark mode background */
+[data-mantine-color-scheme="dark"] .languagePicker {
+  background-color: var(--mantine-color-dark-6); /* Use Mantine dark color instead of hardcoded */
+}
+
+.languagePicker:hover {
+  border-color: var(--border-strong);
+  background-color: var(--mantine-color-gray-0); /* Light gray on hover for light mode */
+}
+
+/* Dark mode hover */
+[data-mantine-color-scheme="dark"] .languagePicker:hover {
+  background-color: var(--mantine-color-dark-5); /* Use Mantine color variable */
+}
+
+.languagePicker:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.languagePickerIcon {
+  font-size: 16px;
+  color: var(--text-muted);
+  margin-left: auto;
+  display: flex;
+  align-items: center; /* Center the icon vertically */
+}
+
+.languagePickerDropdown {
+  background-color: var(--mantine-color-white); /* Use Mantine color variable */
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  padding: 4px;
+}
+
+/* Dark mode dropdown background */
+[data-mantine-color-scheme="dark"] .languagePickerDropdown {
+  background-color: var(--mantine-color-dark-6);
+}
+
+.languagePickerOption {
+  padding: 6px 10px;
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  font-size: 13px;
+  color: var(--text-primary);
+  transition: background-color 0.2s ease;
+}
+
+.languagePickerOptionWithCheckbox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.languagePickerCheckbox {
+  margin-left: auto;
+}
+
+.languagePickerOption:hover {
+  background-color: var(--mantine-color-gray-0); /* Light gray on hover for light mode */
+}
+
+/* Dark mode option hover */
+[data-mantine-color-scheme="dark"] .languagePickerOption:hover {
+  background-color: var(--mantine-color-dark-5);
+}
+
+
+
+/* Additional helper classes for the component */
+.languagePickerTarget {
+  width: 100%;
+}
+
+.languagePickerContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.languagePickerText {
+  flex: 1;
+  text-align: left;
+}
+
+.languagePickerScrollArea {
+  max-height: 180px;
+  border-bottom: 1px solid var(--border-default);
+  padding-bottom: 8px;
+}
+
+.languagePickerFooter {
+  padding: 8px;
+  text-align: center;
+  font-size: 12px;
+}
+
+.languagePickerLink {
+  color: var(--mantine-color-blue-6);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+/* Dark mode link */
+[data-mantine-color-scheme="dark"] .languagePickerLink {
+  color: var(--mantine-color-blue-4);
+} 

frontend/src/components/tools/ocr/LanguagePicker.tsx

@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react';
+import { Text, Loader } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { tempOcrLanguages, getAutoOcrLanguage } from '../../../utils/languageMapping';
+import DropdownListWithFooter, { DropdownItem } from '../../shared/DropdownListWithFooter';
+
+export interface LanguageOption {
+  value: string;
+  label: string;
+}
+
+export interface LanguagePickerProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  label?: string;
+  languagesEndpoint?: string;
+  autoFillFromBrowserLanguage?: boolean;
+}
+
+const LanguagePicker: React.FC<LanguagePickerProps> = ({
+  value,
+  onChange,
+  placeholder = 'Select languages',
+  disabled = false,
+  label,
+  languagesEndpoint = '/api/v1/ui-data/ocr-pdf',
+  autoFillFromBrowserLanguage = true,
+}) => {
+  const { t, i18n } = useTranslation();
+  const [availableLanguages, setAvailableLanguages] = useState<DropdownItem[]>([]);
+  const [isLoadingLanguages, setIsLoadingLanguages] = useState(true);
+  const [hasAutoFilled, setHasAutoFilled] = useState(false);
+
+  useEffect(() => {
+    // Fetch available languages from backend
+    const fetchLanguages = async () => {
+      try {
+        const response = await fetch(languagesEndpoint);
+
+
+        if (response.ok) {
+          const data: { languages: string[] } = await response.json();
+          const languages = data.languages;
+
+
+          const languageOptions = languages.map(lang => {
+            // TODO: Use actual language translations when they become available
+            // For now, use temporary English translations
+            const translatedName = tempOcrLanguages.lang[lang as keyof typeof tempOcrLanguages.lang] || lang;
+            const displayName = translatedName;
+
+            return {
+              value: lang,
+              name: displayName
+            };
+          });
+
+          setAvailableLanguages(languageOptions);
+        } else {
+          console.error('[LanguagePicker] Response not OK:', response.status, response.statusText);
+          const errorText = await response.text();
+          console.error('[LanguagePicker] Error response body:', errorText);
+        }
+      } catch (error) {
+        console.error('[LanguagePicker] Fetch failed with error:', error);
+        console.error('[LanguagePicker] Error details:', {
+          name: error instanceof Error ? error.name : 'Unknown',
+          message: error instanceof Error ? error.message : String(error),
+          stack: error instanceof Error ? error.stack : undefined
+        });
+      } finally {
+        setIsLoadingLanguages(false);
+      }
+    };
+
+    fetchLanguages();
+  }, [languagesEndpoint]);
+
+  // Auto-fill OCR language based on browser language when languages are loaded
+  useEffect(() => {
+    const shouldAutoFillLanguage = autoFillFromBrowserLanguage && !isLoadingLanguages && availableLanguages.length > 0 && !hasAutoFilled && value.length === 0;
+
+    if (shouldAutoFillLanguage) {
+      // Use the comprehensive language mapping from languageMapping.ts
+      const suggestedOcrLanguages = getAutoOcrLanguage(i18n.language);
+      
+      if (suggestedOcrLanguages.length > 0) {
+        // Find the first suggested language that's available in the backend
+        const matchingLanguage = availableLanguages.find(lang => 
+          suggestedOcrLanguages.includes(lang.value)
+        );
+        
+        if (matchingLanguage) {
+          onChange([matchingLanguage.value]);
+        }
+      }
+      
+      setHasAutoFilled(true);
+    }
+  }, [autoFillFromBrowserLanguage, isLoadingLanguages, availableLanguages, hasAutoFilled, value.length, i18n.language, onChange]);
+
+  if (isLoadingLanguages) {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <Loader size="xs" />
+        <Text size="sm">Loading available languages...</Text>
+      </div>
+    );
+  }
+
+  const footer = (
+    <>
+    <div className="flex flex-col items-center gap-1 text-center">
+      <Text size="xs" c="dimmed" className="text-center">
+        {t('ocr.languagePicker.additionalLanguages', 'Looking for additional languages?')}
+      </Text>
+      <Text 
+        size="xs" 
+        style={{ 
+          color: '#3b82f6', 
+          cursor: 'pointer',
+          textDecoration: 'underline',
+          textAlign: 'center'
+        }}
+        onClick={() => window.open('https://docs.stirlingpdf.com/Advanced%20Configuration/OCR', '_blank')}
+      >
+        {t('ocr.languagePicker.viewSetupGuide', 'View setup guide →')}
+      </Text>
+    </div>
+    </>
+  );
+
+  return (
+    <DropdownListWithFooter
+      value={value}
+      onChange={(newValue) => onChange(newValue as string[])}
+      items={availableLanguages}
+      placeholder={placeholder}
+      disabled={disabled}
+      label={label}
+      footer={footer}
+      multiSelect={true}
+      maxHeight={300}
+      searchable={true}
+    />
+  );
+};
+
+export default LanguagePicker; 

frontend/src/components/tools/ocr/OCRSettings.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Stack, Select, Text, Divider } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import LanguagePicker from './LanguagePicker';
+
+export interface OCRParameters {
+  languages: string[];
+  ocrType: string;
+  ocrRenderType: string;
+  additionalOptions: string[];
+}
+
+interface OCRSettingsProps {
+  parameters: OCRParameters;
+  onParameterChange: (key: keyof OCRParameters, value: any) => void;
+  disabled?: boolean;
+}
+
+const OCRSettings: React.FC<OCRSettingsProps> = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      
+      <Select
+        label={t('ocr.settings.ocrMode.label', 'OCR Mode')}
+        value={parameters.ocrType}
+        onChange={(value) => onParameterChange('ocrType', value || 'skip-text')}
+        data={[
+          { value: 'skip-text', label: t('ocr.settings.ocrMode.auto', 'Auto (skip text layers)') },
+          { value: 'force-ocr', label: t('ocr.settings.ocrMode.force', 'Force (re-OCR all, replace text)') },
+          { value: 'Normal', label: t('ocr.settings.ocrMode.strict', 'Strict (abort if text found)') },
+        ]}
+        disabled={disabled}
+      />
+
+      <Divider />
+
+      <LanguagePicker
+        value={parameters.languages || []}
+        onChange={(value) => onParameterChange('languages', value)}
+        placeholder={t('ocr.settings.languages.placeholder', 'Select languages')}
+        disabled={disabled}
+        label={t('ocr.settings.languages.label', 'Languages')}
+      />
+    </Stack>
+  );
+};
+
+export default OCRSettings; 

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

@@ -1,5 +1,7 @@
 import React, { createContext, useContext, useMemo, useRef } from 'react';
-import { Paper, Text, Stack, Box } from '@mantine/core';
+import { Paper, Text, Stack, Box, Flex } from '@mantine/core';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 
 interface ToolStepContextType {
   visibleStepCount: number;
@@ -33,12 +35,13 @@ const ToolStep = ({
 }: ToolStepProps) => {
   if (!isVisible) return null;
 
+  const parent = useContext(ToolStepContext);
+  
   // Auto-detect if we should show numbers based on sibling count
   const shouldShowNumber = useMemo(() => {
     if (showNumber !== undefined) return showNumber;
-    const parent = useContext(ToolStepContext);
     return parent ? parent.visibleStepCount >= 3 : false;
-  }, [showNumber]);
+  }, [showNumber, parent]);
 
   const stepNumber = useContext(ToolStepContext)?.getStepNumber?.() || 1;
 
@@ -47,15 +50,45 @@ const ToolStep = ({
       p="md"
       withBorder
       style={{
-        cursor: isCollapsed && onCollapsedClick ? 'pointer' : 'default',
         opacity: isCollapsed ? 0.8 : 1,
         transition: 'opacity 0.2s ease'
       }}
-      onClick={isCollapsed && onCollapsedClick ? onCollapsedClick : undefined}
     >
-      <Text fw={500} size="lg" mb="sm">
-        {shouldShowNumber ? `${stepNumber}. ` : ''}{title}
-      </Text>
+      {/* Chevron icon to collapse/expand the step */}
+      <Flex 
+        align="center" 
+        justify="space-between" 
+        mb="sm"
+        style={{
+          cursor: onCollapsedClick ? 'pointer' : 'default'
+        }}
+        onClick={onCollapsedClick}
+      >
+        <Flex align="center" gap="sm">
+          {shouldShowNumber && (
+            <Text fw={500} size="lg" c="dimmed">
+              {stepNumber}
+            </Text>
+          )}
+          <Text fw={500} size="lg">
+            {title}
+          </Text>
+        </Flex>
+        
+        {isCollapsed ? (
+          <ChevronRightIcon style={{ 
+            fontSize: '1.2rem', 
+            color: 'var(--mantine-color-dimmed)',
+            opacity: onCollapsedClick ? 1 : 0.5
+          }} />
+        ) : (
+          <ExpandMoreIcon style={{ 
+            fontSize: '1.2rem', 
+            color: 'var(--mantine-color-dimmed)',
+            opacity: onCollapsedClick ? 1 : 0.5
+          }} />
+        )}
+      </Flex>
 
       {isCollapsed ? (
         <Box>
@@ -96,7 +129,7 @@ export const ToolStepContainer = ({ children }: ToolStepContainerProps) => {
     let count = 0;
     React.Children.forEach(children, (child) => {
       if (React.isValidElement(child) && child.type === ToolStep) {
-        const isVisible = child.props.isVisible !== false;
+        const isVisible = (child.props as ToolStepProps).isVisible !== false;
         if (isVisible) count++;
       }
     });

frontend/src/hooks/tools/ocr/useOCROperation.ts

@@ -0,0 +1,372 @@
+import { useState, useCallback } from 'react';
+import axios from 'axios';
+import { useTranslation } from 'react-i18next';
+import { useFileContext } from '../../../contexts/FileContext';
+import { FileOperation } from '../../../types/fileContext';
+import { OCRParameters } from '../../../components/tools/ocr/OCRSettings';
+
+//Extract files from a ZIP blob
+async function extractZipFile(zipBlob: Blob): Promise<File[]> {
+  const JSZip = await import('jszip');
+  const zip = new JSZip.default();
+  
+  const arrayBuffer = await zipBlob.arrayBuffer();
+  const zipContent = await zip.loadAsync(arrayBuffer);
+  
+  const extractedFiles: File[] = [];
+  
+  for (const [filename, file] of Object.entries(zipContent.files)) {
+    if (!file.dir) {
+      const content = await file.async('blob');
+      const extractedFile = new File([content], filename, { type: getMimeType(filename) });
+      extractedFiles.push(extractedFile);
+    }
+  }
+  
+  return extractedFiles;
+}
+
+//Get MIME type based on file extension 
+function getMimeType(filename: string): string {
+  const ext = filename.toLowerCase().split('.').pop();
+  switch (ext) {
+    case 'pdf':
+      return 'application/pdf';
+    case 'txt':
+      return 'text/plain';
+    case 'zip':
+      return 'application/zip';
+    default:
+      return 'application/octet-stream';
+  }
+}
+
+export interface OCROperationHook {
+  files: File[];
+  thumbnails: string[];
+  downloadUrl: string | null;
+  downloadFilename: string | null;
+  isLoading: boolean;
+  isGeneratingThumbnails: boolean;
+  status: string;
+  errorMessage: string | null;
+  executeOperation: (parameters: OCRParameters, selectedFiles: File[]) => Promise<void>;
+  resetResults: () => void;
+  clearError: () => void;
+}
+
+export const useOCROperation = (): OCROperationHook => {
+  const { t } = useTranslation();
+  const {
+    recordOperation,
+    markOperationApplied,
+    markOperationFailed,
+    addFiles
+  } = useFileContext();
+
+  // Internal state management
+  const [files, setFiles] = useState<File[]>([]);
+  const [thumbnails, setThumbnails] = useState<string[]>([]);
+  const [isGeneratingThumbnails, setIsGeneratingThumbnails] = useState(false);
+  const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
+  const [downloadFilename, setDownloadFilename] = useState<string>('');
+  const [status, setStatus] = useState('');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Track blob URLs for cleanup
+  const [blobUrls, setBlobUrls] = useState<string[]>([]);
+
+  const cleanupBlobUrls = useCallback(() => {
+    blobUrls.forEach(url => {
+      try {
+        URL.revokeObjectURL(url);
+      } catch (error) {
+        console.warn('Failed to revoke blob URL:', error);
+      }
+    });
+    setBlobUrls([]);
+  }, [blobUrls]);
+
+  const buildFormData = useCallback((
+    parameters: OCRParameters,
+    file: File
+  ) => {
+    const formData = new FormData();
+
+    // Add the file
+    formData.append('fileInput', file);
+
+    // Add languages as multiple parameters with same name (like checkboxes)
+    parameters.languages.forEach(lang => {
+      formData.append('languages', lang);
+    });
+
+    // Add other parameters
+    formData.append('ocrType', parameters.ocrType);
+    formData.append('ocrRenderType', parameters.ocrRenderType);
+    
+    // Handle additional options - convert array to individual boolean parameters
+    formData.append('sidecar', parameters.additionalOptions.includes('sidecar').toString());
+    formData.append('deskew', parameters.additionalOptions.includes('deskew').toString());
+    formData.append('clean', parameters.additionalOptions.includes('clean').toString());
+    formData.append('cleanFinal', parameters.additionalOptions.includes('cleanFinal').toString());
+    formData.append('removeImagesAfter', parameters.additionalOptions.includes('removeImagesAfter').toString());
+
+    const endpoint = '/api/v1/misc/ocr-pdf';
+
+    return { formData, endpoint };
+  }, []);
+
+  const createOperation = useCallback((
+    parameters: OCRParameters,
+    selectedFiles: File[]
+  ): { operation: FileOperation; operationId: string; fileId: string } => {
+    const operationId = `ocr-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const fileId = selectedFiles.map(f => f.name).join(',');
+
+    const operation: FileOperation = {
+      id: operationId,
+      type: 'ocr',
+      timestamp: Date.now(),
+      fileIds: selectedFiles.map(f => f.name),
+      status: 'pending',
+      metadata: {
+        originalFileName: selectedFiles[0]?.name,
+        parameters: {
+          languages: parameters.languages,
+          ocrType: parameters.ocrType,
+          ocrRenderType: parameters.ocrRenderType,
+          additionalOptions: parameters.additionalOptions,
+        },
+        fileSize: selectedFiles.reduce((sum, f) => sum + f.size, 0)
+      }
+    };
+
+    return { operation, operationId, fileId };
+  }, []);
+
+  const executeOperation = useCallback(async (
+    parameters: OCRParameters,
+    selectedFiles: File[]
+  ) => {
+    if (selectedFiles.length === 0) {
+      setStatus(t("noFileSelected") || "No file selected");
+      return;
+    }
+    
+    if (parameters.languages.length === 0) {
+      setErrorMessage('Please select at least one language for OCR processing.');
+      return;
+    }
+
+    const validFiles = selectedFiles.filter(file => file.size > 0);
+    if (validFiles.length === 0) {
+      setErrorMessage('No valid files to process. All selected files are empty.');
+      return;
+    }
+
+    if (validFiles.length < selectedFiles.length) {
+      console.warn(`Skipping ${selectedFiles.length - validFiles.length} empty files`);
+    }
+
+    const { operation, operationId, fileId } = createOperation(parameters, selectedFiles);
+
+    recordOperation(fileId, operation);
+
+    setStatus(t("loading") || "Loading...");
+    setIsLoading(true);
+    setErrorMessage(null);
+    setFiles([]);
+    setThumbnails([]);
+
+    try {
+      const processedFiles: File[] = [];
+      const failedFiles: string[] = [];
+
+      // OCR typically processes one file at a time
+      for (let i = 0; i < validFiles.length; i++) {
+        const file = validFiles[i];
+        setStatus(`Processing OCR for ${file.name} (${i + 1}/${validFiles.length})`);
+
+        try {
+          const { formData, endpoint } = buildFormData(parameters, file);
+          const response = await axios.post(endpoint, formData, { 
+            responseType: "blob",
+            timeout: 300000 // 5 minute timeout for OCR
+          });
+
+          // Check for HTTP errors
+          if (response.status >= 400) {
+            // Try to read error response as text
+            const errorText = await response.data.text();
+            throw new Error(`OCR service HTTP error ${response.status}: ${errorText.substring(0, 300)}`);
+          }
+
+          // Validate response
+          if (!response.data || response.data.size === 0) {
+            throw new Error('Empty response from OCR service');
+          }
+
+          const contentType = response.headers['content-type'] || 'application/pdf';
+          
+          // Check if response is actually a PDF by examining the first few bytes
+          const arrayBuffer = await response.data.arrayBuffer();
+          const uint8Array = new Uint8Array(arrayBuffer);
+          const header = new TextDecoder().decode(uint8Array.slice(0, 4));
+          
+          // Check if it's a ZIP file (OCR service returns ZIP when sidecar is enabled or for multi-file results)
+          if (header.startsWith('PK')) {
+            try {
+              // Extract ZIP file contents
+              const zipFiles = await extractZipFile(response.data);
+              
+              // Add extracted files to processed files
+              processedFiles.push(...zipFiles);
+            } catch (extractError) {
+              // Fallback to treating as single ZIP file
+              const blob = new Blob([response.data], { type: 'application/zip' });
+              const processedFile = new File([blob], `ocr_${file.name}.zip`, { type: 'application/zip' });
+              processedFiles.push(processedFile);
+            }
+            continue; // Skip the PDF validation for ZIP files
+          }
+          
+          if (!header.startsWith('%PDF')) {
+            // Check if it's an error response
+            const text = new TextDecoder().decode(uint8Array.slice(0, 500));
+            
+            if (text.includes('error') || text.includes('Error') || text.includes('exception') || text.includes('html')) {
+              // Check for specific OCR tool unavailable error
+              if (text.includes('OCR tools') && text.includes('not installed')) {
+                throw new Error('OCR tools (OCRmyPDF or Tesseract) are not installed on the server. Use the standard or fat Docker image instead of ultra-lite, or install OCR tools manually.');
+              }
+              throw new Error(`OCR service error: ${text.substring(0, 300)}`);
+            }
+            
+            // Check if it's an HTML error page
+            if (text.includes('<html') || text.includes('<!DOCTYPE')) {
+              // Try to extract error message from HTML
+              const errorMatch = text.match(/<title[^>]*>([^<]+)<\/title>/i) || 
+                               text.match(/<h1[^>]*>([^<]+)<\/h1>/i) ||
+                               text.match(/<body[^>]*>([^<]+)<\/body>/i);
+              const errorMessage = errorMatch ? errorMatch[1].trim() : 'Unknown error';
+              throw new Error(`OCR service error: ${errorMessage}`);
+            }
+            
+            throw new Error(`Response is not a valid PDF file. Header: "${header}"`);
+          }
+
+          const blob = new Blob([response.data], { type: contentType });
+          const processedFile = new File([blob], `ocr_${file.name}`, { type: contentType });
+
+          processedFiles.push(processedFile);
+        } catch (fileError) {
+          const errorMessage = fileError instanceof Error ? fileError.message : 'Unknown error';
+          failedFiles.push(`${file.name} (${errorMessage})`);
+        }
+      }
+
+      if (failedFiles.length > 0 && processedFiles.length === 0) {
+        throw new Error(`Failed to process OCR for all files: ${failedFiles.join(', ')}`);
+      }
+
+      if (failedFiles.length > 0) {
+        setStatus(`Processed ${processedFiles.length}/${validFiles.length} files. Failed: ${failedFiles.join(', ')}`);
+      } else {
+        const hasPdfFiles = processedFiles.some(file => file.name.endsWith('.pdf'));
+        const hasTxtFiles = processedFiles.some(file => file.name.endsWith('.txt'));
+        let statusMessage = `OCR completed successfully for ${processedFiles.length} file(s)`;
+        
+        if (hasPdfFiles && hasTxtFiles) {
+          statusMessage += ' (Extracted PDF and text files)';
+        } else if (hasPdfFiles) {
+          statusMessage += ' (Extracted PDF files)';
+        } else if (hasTxtFiles) {
+          statusMessage += ' (Extracted text files)';
+        }
+        
+        setStatus(statusMessage);
+      }
+
+      setFiles(processedFiles);
+      setIsGeneratingThumbnails(true);
+
+      await addFiles(processedFiles);
+
+      // Cleanup old blob URLs
+      cleanupBlobUrls();
+
+      // Create download URL - for multiple files, we'll create a new ZIP
+      if (processedFiles.length === 1) {
+        const url = window.URL.createObjectURL(processedFiles[0]);
+        setDownloadUrl(url);
+        setBlobUrls([url]);
+        setDownloadFilename(processedFiles[0].name);
+      } else {
+        // For multiple files, create a new ZIP containing all extracted files
+        try {
+          const JSZip = await import('jszip');
+          const zip = new JSZip.default();
+          
+          for (const file of processedFiles) {
+            zip.file(file.name, file);
+          }
+          
+          const zipBlob = await zip.generateAsync({ type: 'blob' });
+          const url = window.URL.createObjectURL(zipBlob);
+          setDownloadUrl(url);
+          setBlobUrls([url]);
+          setDownloadFilename(`ocr_extracted_files.zip`);
+        } catch (zipError) {
+          // Fallback to first file
+          const url = window.URL.createObjectURL(processedFiles[0]);
+          setDownloadUrl(url);
+          setBlobUrls([url]);
+          setDownloadFilename(processedFiles[0].name);
+        }
+      }
+
+             markOperationApplied(fileId, operationId);
+       setIsGeneratingThumbnails(false);
+     } catch (error) {
+       console.error('OCR operation error:', error);
+       const errorMessage = error instanceof Error ? error.message : 'OCR operation failed';
+       setErrorMessage(errorMessage);
+       setStatus('');
+       markOperationFailed(fileId, operationId, errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [buildFormData, createOperation, recordOperation, addFiles, cleanupBlobUrls, markOperationApplied, markOperationFailed, t]);
+
+  const resetResults = useCallback(() => {
+    setFiles([]);
+    setThumbnails([]);
+    setDownloadUrl(null);
+    setDownloadFilename('');
+    setStatus('');
+    setErrorMessage(null);
+    setIsLoading(false);
+    setIsGeneratingThumbnails(false);
+    cleanupBlobUrls();
+  }, [cleanupBlobUrls]);
+
+  const clearError = useCallback(() => {
+    setErrorMessage(null);
+  }, []);
+
+  return {
+    files,
+    thumbnails,
+    downloadUrl,
+    downloadFilename,
+    isLoading,
+    isGeneratingThumbnails,
+    status,
+    errorMessage,
+    executeOperation,
+    resetResults,
+    clearError,
+  };
+}; 

frontend/src/hooks/tools/ocr/useOCRParameters.ts

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { OCRParameters } from '../../../components/tools/ocr/OCRSettings';
+
+export interface OCRParametersHook {
+  parameters: OCRParameters;
+  updateParameter: (key: keyof OCRParameters, value: any) => void;
+  resetParameters: () => void;
+  validateParameters: () => boolean;
+}
+
+const defaultParameters: OCRParameters = {
+  languages: [],
+  ocrType: 'skip-text',
+  ocrRenderType: 'hocr',
+  additionalOptions: [],
+};
+
+export const useOCRParameters = (): OCRParametersHook => {
+  const [parameters, setParameters] = useState<OCRParameters>(defaultParameters);
+
+  const updateParameter = (key: keyof OCRParameters, value: any) => {
+    setParameters(prev => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+
+  const resetParameters = () => {
+    setParameters(defaultParameters);
+  };
+
+  const validateParameters = () => {
+    // At minimum, we need at least one language selected
+    return parameters.languages.length > 0;
+  };
+
+  return {
+    parameters,
+    updateParameter,
+    resetParameters,
+    validateParameters,
+  };
+}; 

frontend/src/hooks/useEndpointConfig.ts

@@ -19,7 +19,7 @@ export function useEndpointEnabled(endpoint: string): {
       setLoading(false);
       return;
     }
-
+    
     try {
       setLoading(true);
       setError(null);
@@ -35,7 +35,6 @@ export function useEndpointEnabled(endpoint: string): {
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
       setError(errorMessage);
-      console.error(`Failed to check endpoint ${endpoint}:`, err);
     } finally {
       setLoading(false);
     }
@@ -73,13 +72,14 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
       setLoading(false);
       return;
     }
-
+    
     try {
       setLoading(true);
       setError(null);
       
       // Use batch API for efficiency
       const endpointsParam = endpoints.join(',');
+      
       const response = await fetch(`/api/v1/config/endpoints-enabled?endpoints=${encodeURIComponent(endpointsParam)}`);
       
       if (!response.ok) {
@@ -105,6 +105,7 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
   };
 
   useEffect(() => {
+    const endpointsKey = endpoints.join(',');
     fetchAllEndpointStatuses();
   }, [endpoints.join(',')]); // Re-run when endpoints array changes
 

frontend/src/hooks/useToolManagement.tsx

@@ -36,6 +36,17 @@ const toolDefinitions: Record<string, ToolDefinition> = {
     description: "Open API documentation",
     endpoints: ["swagger-ui"]
   },
+  ocr: {
+    id: "ocr",
+    icon: <span className="material-symbols-rounded font-size-20">
+      quick_reference_all
+    </span>,
+    component: React.lazy(() => import("../tools/OCR")),
+    maxFiles: -1,
+    category: "utility",
+    description: "Extract text from images using OCR",
+    endpoints: ["ocr-pdf"]
+  },
 
 };
 

frontend/src/theme/mantineTheme.ts

@@ -167,6 +167,39 @@ export const mantineTheme = createTheme({
       },
     },
 
+    MultiSelect: {
+      styles: {
+        input: {
+          backgroundColor: 'var(--bg-surface)',
+          borderColor: 'var(--border-default)',
+          color: 'var(--text-primary)',
+          '&:focus': {
+            borderColor: 'var(--color-primary-500)',
+            boxShadow: '0 0 0 1px var(--color-primary-500)',
+          },
+        },
+        label: {
+          color: 'var(--text-secondary)',
+          fontWeight: 'var(--font-weight-medium)',
+        },
+        dropdown: {
+          backgroundColor: 'var(--bg-surface)',
+          borderColor: 'var(--border-subtle)',
+          boxShadow: 'var(--shadow-lg)',
+        },
+        option: {
+          color: 'var(--text-primary)',
+          '&[data-hovered]': {
+            backgroundColor: 'var(--hover-bg)',
+          },
+          '&[data-selected]': {
+            backgroundColor: 'var(--color-primary-100)',
+            color: 'var(--color-primary-900)',
+          },
+        },
+      },
+    },
+
     Checkbox: {
       styles: {
         input: {

frontend/src/tools/OCR.tsx

@@ -0,0 +1,215 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Button, Stack, Text, Box } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import DownloadIcon from "@mui/icons-material/Download";
+import { useEndpointEnabled } from "../hooks/useEndpointConfig";
+import { useFileContext } from "../contexts/FileContext";
+import { useToolFileSelection } from "../contexts/FileSelectionContext";
+
+import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
+import OperationButton from "../components/tools/shared/OperationButton";
+import ErrorNotification from "../components/tools/shared/ErrorNotification";
+import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
+import ResultsPreview from "../components/tools/shared/ResultsPreview";
+
+import OCRSettings from "../components/tools/ocr/OCRSettings";
+import AdvancedOCRSettings from "../components/tools/ocr/AdvancedOCRSettings";
+
+import { useOCRParameters } from "../hooks/tools/ocr/useOCRParameters";
+import { useOCROperation } from "../hooks/tools/ocr/useOCROperation";
+import { BaseToolProps } from "../types/tool";
+
+const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
+  const { t } = useTranslation();
+  const { setCurrentMode } = useFileContext();
+  const { selectedFiles } = useToolFileSelection();
+
+  const ocrParams = useOCRParameters();
+  const ocrOperation = useOCROperation();
+
+  // Step expansion state management
+  const [expandedStep, setExpandedStep] = useState<'files' | 'settings' | 'advanced' | null>('files');
+
+  const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled("ocr-pdf");
+
+  const hasFiles = selectedFiles.length > 0;
+  const hasResults = ocrOperation.files.length > 0 || ocrOperation.downloadUrl !== null;
+  const hasValidSettings = ocrParams.validateParameters();
+
+  useEffect(() => {
+    ocrOperation.resetResults();
+    onPreviewFile?.(null);
+  }, [ocrParams.parameters, selectedFiles]);
+
+  useEffect(() => {
+    if (selectedFiles.length > 0 && expandedStep === 'files') {
+      setExpandedStep('settings');
+    }
+  }, [selectedFiles.length, expandedStep]);
+
+  // Collapse all steps when results appear
+  useEffect(() => {
+    if (hasResults) {
+      setExpandedStep(null);
+    }
+  }, [hasResults]);
+
+  const handleOCR = async () => {
+    try {
+      await ocrOperation.executeOperation(
+        ocrParams.parameters,
+        selectedFiles
+      );
+      if (ocrOperation.files && onComplete) {
+        onComplete(ocrOperation.files);
+      }
+    } catch (error) {
+      if (onError) {
+        onError(error instanceof Error ? error.message : 'OCR operation failed');
+      }
+    }
+  };
+
+  const handleThumbnailClick = (file: File) => {
+    onPreviewFile?.(file);
+    sessionStorage.setItem('previousMode', 'ocr');
+    setCurrentMode('viewer');
+  };
+
+
+  // Step visibility and collapse logic
+  const filesVisible = true;
+  const settingsVisible = true;
+  const resultsVisible = hasResults;
+
+  const filesCollapsed = expandedStep !== 'files';
+  const settingsCollapsed = expandedStep !== 'settings';
+
+  const previewResults = useMemo(() =>
+    ocrOperation.files?.map((file: File, index: number) => ({
+      file,
+      thumbnail: ocrOperation.thumbnails[index]
+    })) || [],
+    [ocrOperation.files, ocrOperation.thumbnails]
+  );
+
+  return (
+    <ToolStepContainer>
+      <Stack gap="sm" h="100%" p="sm" style={{ overflow: 'auto' }}>
+        {/* Files Step */}
+        <ToolStep
+          title="Files"
+          isVisible={filesVisible}
+          isCollapsed={hasFiles ? filesCollapsed : false}
+          isCompleted={hasFiles}
+          onCollapsedClick={undefined}
+          completedMessage={hasFiles && filesCollapsed ? 
+            selectedFiles.length === 1
+              ? `Selected: ${selectedFiles[0].name}`
+              : `Selected: ${selectedFiles.length} files`
+            : undefined}
+        >
+          <FileStatusIndicator
+            selectedFiles={selectedFiles}
+            placeholder="Select a PDF file in the main view to get started"
+          />
+        </ToolStep>
+
+        {/* Settings Step */}
+        <ToolStep
+          title="Settings"
+          isVisible={settingsVisible}
+          isCollapsed={settingsCollapsed}
+          isCompleted={hasFiles && hasValidSettings}
+          onCollapsedClick={() => {
+            if (!hasFiles) return; // Only allow if files are selected
+            setExpandedStep(expandedStep === 'settings' ? null : 'settings');
+          }}
+          completedMessage={hasFiles && hasValidSettings && settingsCollapsed ? "Basic settings configured" : undefined}
+        >
+          <Stack gap="sm">
+            <OCRSettings
+              parameters={ocrParams.parameters}
+              onParameterChange={ocrParams.updateParameter}
+              disabled={endpointLoading}
+            />
+
+          </Stack>
+        </ToolStep>
+
+        {/* Advanced Step */}
+        <ToolStep
+          title="Advanced"
+          isVisible={true}
+          isCollapsed={expandedStep !== 'advanced'}
+          isCompleted={hasFiles && hasResults}
+          onCollapsedClick={() => {
+            if (!hasFiles) return; // Only allow if files are selected
+            setExpandedStep(expandedStep === 'advanced' ? null : 'advanced');
+          }}
+          completedMessage={hasFiles && hasResults && expandedStep !== 'advanced' ? "OCR processing completed" : undefined}
+        >
+          <AdvancedOCRSettings
+            advancedOptions={ocrParams.parameters.additionalOptions}
+            ocrRenderType={ocrParams.parameters.ocrRenderType}
+            onParameterChange={ocrParams.updateParameter}
+            disabled={endpointLoading}
+          />
+        </ToolStep>
+
+        {/* Process Button - Available after all configuration */}
+        {hasValidSettings && !hasResults && (
+          <Box mt="md">
+            <OperationButton
+              onClick={handleOCR}
+              isLoading={ocrOperation.isLoading}
+              disabled={!ocrParams.validateParameters() || !hasFiles || !endpointEnabled}
+              loadingText={t("loading")}
+              submitText="Process OCR and Review"
+            />
+          </Box>
+        )}
+
+        {/* Results Step */}
+        <ToolStep
+          title="Results"
+          isVisible={resultsVisible}
+        >
+          <Stack gap="sm">
+            {ocrOperation.status && (
+              <Text size="sm" c="dimmed">{ocrOperation.status}</Text>
+            )}
+
+            <ErrorNotification
+              error={ocrOperation.errorMessage}
+              onClose={ocrOperation.clearError}
+            />
+
+            {ocrOperation.downloadUrl && (
+              <Button
+                component="a"
+                href={ocrOperation.downloadUrl}
+                download={ocrOperation.downloadFilename}
+                leftSection={<DownloadIcon />}
+                color="green"
+                fullWidth
+                mb="md"
+              >
+                {t("download", "Download")}
+              </Button>
+            )}
+
+            <ResultsPreview
+              files={previewResults}
+              onFileClick={handleThumbnailClick}
+              isGeneratingThumbnails={ocrOperation.isGeneratingThumbnails}
+              title="OCR Results"
+            />
+          </Stack>
+        </ToolStep>
+      </Stack>
+    </ToolStepContainer>
+  );
+}
+
+export default OCR; 

frontend/src/types/fileContext.ts

@@ -5,15 +5,13 @@
 import { ProcessedFile } from './processing';
 import { PDFDocument, PDFPage, PageOperation } from './pageEditor';
 
-export type ModeType = 'viewer' | 'pageEditor' | 'fileEditor' | 'merge' | 'split' | 'compress';
+export type ModeType = 'viewer' | 'pageEditor' | 'fileEditor' | 'merge' | 'split' | 'compress' | 'ocr';
 
-// Legacy types for backward compatibility during transition
-export type ViewType = 'viewer' | 'pageEditor' | 'fileEditor';
-export type ToolType = 'merge' | 'split' | 'compress' | null;
+export type OperationType = 'merge' | 'split' | 'compress' | 'add' | 'remove' | 'replace' | 'convert' | 'upload' | 'ocr';
 
 export interface FileOperation {
   id: string;
-  type: 'merge' | 'split' | 'compress' | 'add' | 'remove' | 'replace' | 'convert' | 'upload';
+  type: OperationType;
   timestamp: number;
   fileIds: string[];
   status: 'pending' | 'applied' | 'failed';
@@ -56,9 +54,6 @@ export interface FileContextState {
   
   // Current navigation state
   currentMode: ModeType;
-  // Legacy fields for backward compatibility
-  currentView: ViewType;
-  currentTool: ToolType;
   
   // Edit history and state
   fileEditHistory: Map<string, FileEditHistory>;
@@ -97,10 +92,6 @@ export interface FileContextActions {
   
   // Navigation
   setCurrentMode: (mode: ModeType) => void;
-  // Legacy navigation functions for backward compatibility
-  setCurrentView: (view: ViewType) => void;
-  setCurrentTool: (tool: ToolType) => void;
-  
   // Selection management
   setSelectedFiles: (fileIds: string[]) => void;
   setSelectedPages: (pageNumbers: number[]) => void;
@@ -168,9 +159,6 @@ export interface WithFileContext {
 // URL parameter types for deep linking
 export interface FileContextUrlParams {
   mode?: ModeType;
-  // Legacy parameters for backward compatibility
-  view?: ViewType;
-  tool?: ToolType;
   fileIds?: string[];
   pageIds?: string[];
   zoom?: number;