Merge branch 'V2' into feature/v2/sign

2026-03-04 02:20:19 +01:00 · 2025-09-26 12:53:54 +01:00
parent c94ee388fc 0bdc6466ca
commit d82b958d9f
98 changed files with 11691 additions and 1175 deletions
--- a/frontend/src/components/fileEditor/FileEditor.module.css
+++ b/frontend/src/components/fileEditor/FileEditor.module.css
@@ -56,6 +56,20 @@
  border-bottom: 1px solid var(--header-selected-bg);
 }

+/* Error highlight (transient) */
+.headerError {
+  background: var(--color-red-200);
+  color: var(--text-primary);
+  border-bottom: 2px solid var(--color-red-500);
+}
+
+/* Unsupported (but not errored) header appearance */
+.headerUnsupported {
+  background: var(--unsupported-bar-bg); /* neutral gray */
+  color: #FFFFFF;
+  border-bottom: 1px solid var(--unsupported-bar-border);
+}
+
 /* Selected border color in light mode */
 :global([data-mantine-color-scheme="light"]) .card[data-selected="true"] {
  outline-color: var(--card-selected-border);
@@ -80,6 +94,7 @@

 .kebab {
  justify-self: end;
+  color: #FFFFFF !important;
 }

 /* Menu dropdown */
@@ -217,6 +232,22 @@
  height: 20px;
 }

+/* Error pill shown when a file failed processing */
+.errorPill {
+  margin-left: 1.75rem;
+  background: var(--color-red-500);
+  color: #ffffff;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 10px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 56px;
+  height: 20px;
+}
+
 /* Animations */
@keyframes pulse {
  0%, 100% {
--- a/frontend/src/components/fileEditor/FileEditor.tsx
+++ b/frontend/src/components/fileEditor/FileEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useRef, useMemo } from 'react';
 import {
-  Text, Center, Box, Notification, LoadingOverlay, Stack, Group, Portal
+  Text, Center, Box, LoadingOverlay, Stack, Group
 } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { useFileSelection, useFileState, useFileManagement } from '../../contexts/FileContext';
@@ -11,6 +11,7 @@ import FileEditorThumbnail from './FileEditorThumbnail';
 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';


@@ -46,8 +47,16 @@ const FileEditor = ({
  // Get file selection context
  const { setSelectedFiles } = useFileSelection();

-  const [status, setStatus] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const [_status, _setStatus] = useState<string | null>(null);
+  const [_error, _setError] = useState<string | null>(null);
+
+  // Toast helpers
+  const showStatus = useCallback((message: string, type: 'neutral' | 'success' | 'warning' | 'error' = 'neutral') => {
+    alert({ alertType: type, title: message, expandable: false, durationMs: 4000 });
+  }, []);
+  const showError = useCallback((message: string) => {
+    alert({ alertType: 'error', title: 'Error', body: message, expandable: true });
+  }, []);
  const [selectionMode, setSelectionMode] = useState(toolMode);

  // Enable selection mode automatically in tool mode
@@ -82,7 +91,7 @@ const FileEditor = ({

  // Process uploaded files using context
  const handleFileUpload = useCallback(async (uploadedFiles: File[]) => {
-    setError(null);
+    _setError(null);

    try {
      const allExtractedFiles: File[] = [];
@@ -157,18 +166,18 @@ const FileEditor = ({

      // Show any errors
      if (errors.length > 0) {
-        setError(errors.join('\n'));
+        showError(errors.join('\n'));
      }

      // Process all extracted files
      if (allExtractedFiles.length > 0) {
        // Add files to context (they will be processed automatically)
        await addFiles(allExtractedFiles);
-        setStatus(`Added ${allExtractedFiles.length} files`);
+        showStatus(`Added ${allExtractedFiles.length} files`, 'success');
      }
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Failed to process files';
-      setError(errorMessage);
+      showError(errorMessage);
      console.error('File processing error:', err);

      // Reset extraction progress on error
@@ -206,7 +215,7 @@ const FileEditor = ({
      } else {
        // Check if we've hit the selection limit
        if (maxAllowed > 1 && currentSelectedIds.length >= maxAllowed) {
-          setStatus(`Maximum ${maxAllowed} files can be selected`);
+          showStatus(`Maximum ${maxAllowed} files can be selected`, 'warning');
          return;
        }
        newSelection = [...currentSelectedIds, contextFileId];
@@ -215,7 +224,7 @@ const FileEditor = ({

    // Update context (this automatically updates tool selection since they use the same action)
    setSelectedFiles(newSelection);
-  }, [setSelectedFiles, toolMode, setStatus, activeStirlingFileStubs]);
+  }, [setSelectedFiles, toolMode, _setStatus, activeStirlingFileStubs]);


  // File reordering handler for drag and drop
@@ -271,8 +280,8 @@ const FileEditor = ({

    // Update status
    const moveCount = filesToMove.length;
-    setStatus(`${moveCount > 1 ? `${moveCount} files` : 'File'} reordered`);
-  }, [activeStirlingFileStubs, reorderFiles, setStatus]);
+    showStatus(`${moveCount > 1 ? `${moveCount} files` : 'File'} reordered`);
+  }, [activeStirlingFileStubs, reorderFiles, _setStatus]);



@@ -297,7 +306,7 @@ const FileEditor = ({
    if (record && file) {
       downloadBlob(file, file.name);
    }
-  }, [activeStirlingFileStubs, selectors, setStatus]);
+  }, [activeStirlingFileStubs, selectors, _setStatus]);

  const handleViewFile = useCallback((fileId: FileId) => {
    const record = activeStirlingFileStubs.find(r => r.id === fileId);
@@ -314,10 +323,10 @@ const FileEditor = ({
    try {
      // Use FileContext to handle loading stored files
      // The files are already in FileContext, just need to add them to active files
-      setStatus(`Loaded ${selectedFiles.length} files from storage`);
+      showStatus(`Loaded ${selectedFiles.length} files from storage`);
    } catch (err) {
      console.error('Error loading files from storage:', err);
-      setError('Failed to load some files from storage');
+      showError('Failed to load some files from storage');
    }
  }, []);

@@ -408,7 +417,7 @@ const FileEditor = ({
                  onToggleFile={toggleFile}
                  onDeleteFile={handleDeleteFile}
                  onViewFile={handleViewFile}
-                  onSetStatus={setStatus}
+                  _onSetStatus={showStatus}
                  onReorderFiles={handleReorderFiles}
                  onDownloadFile={handleDownloadFile}
                  toolMode={toolMode}
@@ -428,31 +437,7 @@ const FileEditor = ({
        onSelectFiles={handleLoadFromStorage}
      />

-      {status && (
-        <Portal>
-          <Notification
-            color="blue"
-            mt="md"
-            onClose={() => setStatus(null)}
-            style={{ position: 'fixed', bottom: 40, right: 80, zIndex: 10001 }}
-          >
-            {status}
-          </Notification>
-        </Portal>
-      )}
-
-      {error && (
-        <Portal>
-          <Notification
-            color="red"
-            mt="md"
-            onClose={() => setError(null)}
-            style={{ position: 'fixed', bottom: 80, right: 20, zIndex: 10001 }}
-          >
-            {error}
-          </Notification>
-        </Portal>
-      )}
+      
      </Box>
    </Dropzone>
  );
--- a/frontend/src/components/fileEditor/FileEditorThumbnail.tsx
+++ b/frontend/src/components/fileEditor/FileEditorThumbnail.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
 import { Text, ActionIcon, CheckboxIndicator } from '@mantine/core';
+import { alert } from '../toast';
 import { useTranslation } from 'react-i18next';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined';
@@ -12,6 +13,7 @@ import { StirlingFileStub } from '../../types/fileContext';

 import styles from './FileEditor.module.css';
 import { useFileContext } from '../../contexts/FileContext';
+import { useFileState } from '../../contexts/file/fileHooks';
 import { FileId } from '../../types/file';
 import { formatFileSize } from '../../utils/fileUtils';
 import ToolChain from '../shared/ToolChain';
@@ -27,7 +29,7 @@ interface FileEditorThumbnailProps {
  onToggleFile: (fileId: FileId) => void;
  onDeleteFile: (fileId: FileId) => void;
  onViewFile: (fileId: FileId) => void;
-  onSetStatus: (status: string) => void;
+  _onSetStatus: (status: string) => void;
  onReorderFiles?: (sourceFileId: FileId, targetFileId: FileId, selectedFileIds: FileId[]) => void;
  onDownloadFile: (fileId: FileId) => void;
  toolMode?: boolean;
@@ -40,13 +42,15 @@ const FileEditorThumbnail = ({
  selectedFiles,
  onToggleFile,
  onDeleteFile,
-  onSetStatus,
+  _onSetStatus,
  onReorderFiles,
  onDownloadFile,
  isSupported = true,
 }: FileEditorThumbnailProps) => {
  const { t } = useTranslation();
-  const { pinFile, unpinFile, isFilePinned, activeFiles } = useFileContext();
+  const { pinFile, unpinFile, isFilePinned, activeFiles, actions: fileActions } = useFileContext();
+  const { state } = useFileState();
+  const hasError = state.ui.errorFileIds.includes(file.id);

  // ---- Drag state ----
  const [isDragging, setIsDragging] = useState(false);
@@ -187,9 +191,20 @@ const FileEditorThumbnail = ({
  // ---- Card interactions ----
  const handleCardClick = () => {
    if (!isSupported) return;
+    // Clear error state if file has an error (click to clear error)
+    if (hasError) {
+      try { fileActions.clearFileError(file.id); } catch (_e) { void _e; }
+    }
    onToggleFile(file.id);
  };

+  // ---- Style helpers ----
+  const getHeaderClassName = () => {
+    if (hasError) return styles.headerError;
+    if (!isSupported) return styles.headerUnsupported;
+    return isSelected ? styles.headerSelected : styles.headerResting;
+  };
+

  return (
    <div
@@ -199,10 +214,7 @@ const FileEditorThumbnail = ({
      data-selected={isSelected}
      data-supported={isSupported}
      className={`${styles.card} w-[18rem] h-[22rem] select-none flex flex-col shadow-sm transition-all relative`}
-      style={{
-        opacity: isSupported ? (isDragging ? 0.9 : 1) : 0.5,
-        filter: isSupported ? 'none' : 'grayscale(50%)',
-      }}
+      style={{opacity: isDragging ? 0.9 : 1}}
      tabIndex={0}
      role="listitem"
      aria-selected={isSelected}
@@ -210,13 +222,16 @@ const FileEditorThumbnail = ({
    >
      {/* Header bar */}
      <div
-        className={`${styles.header} ${
-          isSelected ? styles.headerSelected : styles.headerResting
-        }`}
+        className={`${styles.header} ${getHeaderClassName()}`}
+        data-has-error={hasError}
      >
        {/* Logo/checkbox area */}
        <div className={styles.logoMark}>
-          {isSupported ? (
+          {hasError ? (
+            <div className={styles.errorPill}>
+              <span>{t('error._value', 'Error')}</span>
+            </div>
+          ) : isSupported ? (
            <CheckboxIndicator
              checked={isSelected}
              onChange={() => onToggleFile(file.id)}
@@ -263,10 +278,10 @@ const FileEditorThumbnail = ({
              if (actualFile) {
                if (isPinned) {
                  unpinFile(actualFile);
-                  onSetStatus?.(`Unpinned ${file.name}`);
+                  alert({ alertType: 'neutral', title: `Unpinned ${file.name}`, expandable: false, durationMs: 3000 });
                } else {
                  pinFile(actualFile);
-                  onSetStatus?.(`Pinned ${file.name}`);
+                  alert({ alertType: 'success', title: `Pinned ${file.name}`, expandable: false, durationMs: 3000 });
                }
              }
              setShowActions(false);
@@ -278,7 +293,7 @@ const FileEditorThumbnail = ({

          <button
            className={styles.actionRow}
-            onClick={() => { onDownloadFile(file.id); setShowActions(false); }}
+            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>
@@ -290,7 +305,7 @@ const FileEditorThumbnail = ({
            className={`${styles.actionRow} ${styles.actionDanger}`}
            onClick={() => {
              onDeleteFile(file.id);
-              onSetStatus(`Deleted ${file.name}`);
+              alert({ alertType: 'neutral', title: `Deleted ${file.name}`, expandable: false, durationMs: 3500 });
              setShowActions(false);
            }}
          >
@@ -328,7 +343,10 @@ const FileEditorThumbnail = ({
      </div>

      {/* Preview area */}
-      <div className={`${styles.previewBox} mx-6 mb-4 relative flex-1`}>
+      <div
+        className={`${styles.previewBox} mx-6 mb-4 relative flex-1`}
+        style={isSupported || hasError ? undefined : { filter: 'grayscale(80%)', opacity: 0.6 }}
+      >
        <div className={styles.previewPaper}>
          {file.thumbnailUrl && (
            <img
--- a/frontend/src/components/layout/Workbench.tsx
+++ b/frontend/src/components/layout/Workbench.tsx
@@ -13,6 +13,7 @@ import PageEditorControls from '../pageEditor/PageEditorControls';
 import Viewer from '../viewer/Viewer';
 import LandingPage from '../shared/LandingPage';
 import Footer from '../shared/Footer';
+import DismissAllErrorsButton from '../shared/DismissAllErrorsButton';

 // No props needed - component uses contexts directly
 export default function Workbench() {
@@ -151,6 +152,9 @@ export default function Workbench() {
        selectedToolKey={selectedToolId}
      />

+      {/* Dismiss All Errors Button */}
+      <DismissAllErrorsButton />
+
      {/* Main content area */}
      <Box
        className="flex-1 min-h-0 relative z-10 workbench-scrollable "
--- a/frontend/src/components/shared/DismissAllErrorsButton.tsx
+++ b/frontend/src/components/shared/DismissAllErrorsButton.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Button, Group } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useFileState } from '../../contexts/FileContext';
+import { useFileActions } from '../../contexts/file/fileHooks';
+import CloseIcon from '@mui/icons-material/Close';
+
+interface DismissAllErrorsButtonProps {
+  className?: string;
+}
+
+const DismissAllErrorsButton: React.FC<DismissAllErrorsButtonProps> = ({ className }) => {
+  const { t } = useTranslation();
+  const { state } = useFileState();
+  const { actions } = useFileActions();
+  
+  // Check if there are any files in error state
+  const hasErrors = state.ui.errorFileIds.length > 0;
+  
+  // Don't render if there are no errors
+  if (!hasErrors) {
+    return null;
+  }
+  
+  const handleDismissAllErrors = () => {
+    actions.clearAllFileErrors();
+  };
+  
+  return (
+    <Group className={className}>
+      <Button
+        variant="light"
+        color="red"
+        size="sm"
+        leftSection={<CloseIcon fontSize="small" />}
+        onClick={handleDismissAllErrors}
+        style={{
+          position: 'absolute',
+          top: '1rem',
+          right: '1rem',
+          zIndex: 1000,
+          pointerEvents: 'auto'
+        }}
+      >
+        {t('error.dismissAllErrors', 'Dismiss All Errors')} ({state.ui.errorFileIds.length})
+      </Button>
+    </Group>
+  );
+};
+
+export default DismissAllErrorsButton;
--- a/frontend/src/components/shared/LandingPage.tsx
+++ b/frontend/src/components/shared/LandingPage.tsx
@@ -5,6 +5,7 @@ import LocalIcon from './LocalIcon';
 import { useTranslation } from 'react-i18next';
 import { useFileHandler } from '../../hooks/useFileHandler';
 import { useFilesModalContext } from '../../contexts/FilesModalContext';
+import { BASE_PATH } from '../../constants/app';

 const LandingPage = () => {
  const { addFiles } = useFileHandler();
@@ -72,7 +73,7 @@ const LandingPage = () => {
          }}
        >
          <img
-            src={colorScheme === 'dark' ? '/branding/StirlingPDFLogoNoTextDark.svg' : '/branding/StirlingPDFLogoNoTextLight.svg'}
+            src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoNoTextDark.svg` : `${BASE_PATH}/branding/StirlingPDFLogoNoTextLight.svg`}
            alt="Stirling PDF Logo"
            style={{
              height: 'auto',
@@ -98,7 +99,7 @@ const LandingPage = () => {
            {/* Stirling PDF Branding */}
            <Group gap="xs" align="center">
              <img
-                src={colorScheme === 'dark' ? '/branding/StirlingPDFLogoWhiteText.svg' : '/branding/StirlingPDFLogoGreyText.svg'}
+                src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoWhiteText.svg` : `${BASE_PATH}/branding/StirlingPDFLogoGreyText.svg`}
                alt="Stirling PDF"
                style={{ height: '2.2rem', width: 'auto' }}
              />
--- a/frontend/src/components/shared/RainbowThemeProvider.tsx
+++ b/frontend/src/components/shared/RainbowThemeProvider.tsx
@@ -3,6 +3,9 @@ import { MantineProvider } from '@mantine/core';
 import { useRainbowTheme } from '../../hooks/useRainbowTheme';
 import { mantineTheme } from '../../theme/mantineTheme';
 import rainbowStyles from '../../styles/rainbow.module.css';
+import { ToastProvider } from '../toast';
+import ToastRenderer from '../toast/ToastRenderer';
+import { ToastPortalBinder } from '../toast';

 interface RainbowThemeContextType {
  themeMode: 'light' | 'dark' | 'rainbow';
@@ -44,7 +47,11 @@ export function RainbowThemeProvider({ children }: RainbowThemeProviderProps) {
          className={rainbowTheme.isRainbowMode ? rainbowStyles.rainbowMode : ''}
          style={{ minHeight: '100vh' }}
        >
-          {children}
+          <ToastProvider>
+            <ToastPortalBinder />
+            {children}
+            <ToastRenderer />
+          </ToastProvider>
        </div>
      </MantineProvider>
    </RainbowThemeContext.Provider>
--- a/frontend/src/components/shared/RightRail.tsx
+++ b/frontend/src/components/shared/RightRail.tsx
@@ -4,7 +4,7 @@ import LocalIcon from './LocalIcon';
 import './rightRail/RightRail.css';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
 import { useRightRail } from '../../contexts/RightRailContext';
-import { useFileState, useFileSelection, useFileManagement } from '../../contexts/FileContext';
+import { useFileState, useFileSelection, useFileManagement, useFileContext } from '../../contexts/FileContext';
 import { useNavigationState } from '../../contexts/NavigationContext';
 import { useTranslation } from 'react-i18next';

@@ -39,6 +39,7 @@ export default function RightRail() {

  // File state and selection
  const { state, selectors } = useFileState();
+  const { actions: fileActions } = useFileContext();
  const { selectedFiles, selectedFileIds, setSelectedFiles } = useFileSelection();
  const { removeFiles } = useFileManagement();

@@ -73,6 +74,8 @@ export default function RightRail() {
      // 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;
    }

@@ -85,6 +88,8 @@ export default function RightRail() {
  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') {
--- a/frontend/src/components/shared/Tooltip.tsx
+++ b/frontend/src/components/shared/Tooltip.tsx
@@ -6,6 +6,7 @@ import { useTooltipPosition } from '../../hooks/useTooltipPosition';
 import { TooltipTip } from '../../types/tips';
 import { TooltipContent } from './tooltip/TooltipContent';
 import { useSidebarContext } from '../../contexts/SidebarContext';
+import { BASE_PATH } from '../../constants/app';
 import styles from './tooltip/Tooltip.module.css';

 export interface TooltipProps {
@@ -328,7 +329,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
          <div className={styles['tooltip-logo']}>
            {header.logo || (
              <img
-                src="/logo-tooltip.svg"
+                src={`${BASE_PATH}/logo-tooltip.svg`}
                alt="Stirling PDF"
                style={{ width: '1.4rem', height: '1.4rem', display: 'block' }}
              />
--- a/frontend/src/components/toast/Toast.README.md
+++ b/frontend/src/components/toast/Toast.README.md
@@ -0,0 +1,309 @@
+# Toast Component
+
+A global notification system with expandable content, progress tracking, and smart error coalescing. Provides an imperative API for showing success, error, warning, and neutral notifications with customizable content and behavior.
+
+---
+
+## Highlights
+
+* 🎯 **Global System**: Imperative API accessible from anywhere in the app via `alert()` function.
+* 🎨 **Four Alert Types**: Success (green), Error (red), Warning (yellow), Neutral (theme-aware).
+* 📱 **Expandable Content**: Collapsible toasts with chevron controls and smooth animations.
+* ⚡ **Smart Coalescing**: Duplicate error toasts merge with count badges (e.g., "Server error 4").
+* 📊 **Progress Tracking**: Built-in progress bars with completion animations.
+* 🎛️ **Customizable**: Rich JSX content, buttons with callbacks, custom icons.
+* 🌙 **Themeable**: Uses CSS variables; supports light/dark mode out of the box.
+* ♿ **Accessible**: Proper ARIA roles, keyboard navigation, and screen reader support.
+* 🔄 **Auto-dismiss**: Configurable duration with persistent popup option.
+* 📍 **Positioning**: Four corner positions with proper stacking.
+
+---
+
+## Behavior
+
+### Default
+* **Auto-dismiss**: Toasts disappear after 6 seconds unless `isPersistentPopup: true`.
+* **Expandable**: Click chevron to expand/collapse body content (default: collapsed).
+* **Coalescing**: Identical error toasts merge with count badges.
+* **Progress**: Progress bars always visible when present, even when collapsed.
+
+### Error Handling
+* **Network Errors**: Automatically caught by Axios and fetch interceptors.
+* **Friendly Fallbacks**: Shows "There was an error processing your request" for unhelpful backend responses.
+* **Smart Titles**: "Server error" for 5xx, "Request error" for 4xx, "Network error" for others.
+
+---
+
+## Installation
+
+The toast system is already integrated at the app root. No additional setup required.
+
+```tsx
+import { alert, updateToast, dismissToast } from '@/components/toast';
+```
+
+---
+
+## Basic Usage
+
+### Simple Notifications
+
+```tsx
+// Success notification
+alert({
+  alertType: 'success',
+  title: 'File processed successfully',
+  body: 'Your document has been converted to PDF.'
+});
+
+// Error notification
+alert({
+  alertType: 'error',
+  title: 'Processing failed',
+  body: 'Unable to process the selected files.'
+});
+
+// Warning notification
+alert({
+  alertType: 'warning',
+  title: 'Low disk space',
+  body: 'Consider freeing up some storage space.'
+});
+
+// Neutral notification
+alert({
+  alertType: 'neutral',
+  title: 'Information',
+  body: 'This is a neutral notification.'
+});
+```
+
+### With Custom Content
+
+```tsx
+// Rich JSX content with buttons
+alert({
+  alertType: 'success',
+  title: 'Download complete',
+  body: (
+    <div>
+      <p>File saved to Downloads folder</p>
+      <button onClick={() => openFolder()}>Open folder</button>
+    </div>
+  ),
+  buttonText: 'View file',
+  buttonCallback: () => openFile(),
+  isPersistentPopup: true
+});
+```
+
+### Progress Tracking
+
+```tsx
+// Show progress
+const toastId = alert({
+  alertType: 'neutral',
+  title: 'Processing files...',
+  body: 'Converting your documents',
+  progressBarPercentage: 0
+});
+
+// Update progress
+updateToast(toastId, { progressBarPercentage: 50 });
+
+// Complete with success
+updateToast(toastId, { 
+  alertType: 'success',
+  title: 'Processing complete',
+  body: 'All files converted successfully',
+  progressBarPercentage: 100
+});
+```
+
+### Custom Positioning
+
+```tsx
+alert({
+  alertType: 'error',
+  title: 'Connection lost',
+  body: 'Please check your internet connection.',
+  location: 'top-right'
+});
+```
+
+---
+
+## API
+
+### `alert(options: ToastOptions)`
+
+The primary function for showing toasts.
+
+```ts
+interface ToastOptions {
+  alertType?: 'success' | 'error' | 'warning' | 'neutral';
+  title: string;
+  body?: React.ReactNode;
+  buttonText?: string;
+  buttonCallback?: () => void;
+  isPersistentPopup?: boolean;
+  location?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  icon?: React.ReactNode;
+  progressBarPercentage?: number; // 0-1 as fraction or 0-100 as percent
+  durationMs?: number;
+  id?: string;
+  expandable?: boolean;
+}
+```
+
+### `updateToast(id: string, options: Partial<ToastOptions>)`
+
+Update an existing toast.
+
+```tsx
+const toastId = alert({ title: 'Processing...', progressBarPercentage: 0 });
+updateToast(toastId, { progressBarPercentage: 75 });
+```
+
+### `dismissToast(id: string)`
+
+Dismiss a specific toast.
+
+```tsx
+dismissToast(toastId);
+```
+
+### `dismissAllToasts()`
+
+Dismiss all visible toasts.
+
+```tsx
+dismissAllToasts();
+```
+
+---
+
+## Alert Types
+
+| Type | Color | Icon | Use Case |
+|------|-------|------|----------|
+| `success` | Green | ✓ | Successful operations, completions |
+| `error` | Red | ✗ | Failures, errors, exceptions |
+| `warning` | Yellow | ⚠ | Warnings, cautions, low resources |
+| `neutral` | Theme | ℹ | Information, general messages |
+
+---
+
+## Positioning
+
+| Location | Description |
+|----------|-------------|
+| `top-left` | Top-left corner |
+| `top-right` | Top-right corner |
+| `bottom-left` | Bottom-left corner |
+| `bottom-right` | Bottom-right corner (default) |
+
+---
+
+## Accessibility
+
+* Toasts use `role="status"` for screen readers.
+* Chevron and close buttons have proper `aria-label` attributes.
+* Keyboard navigation supported (Escape to dismiss).
+* Focus management for interactive content.
+
+---
+
+## Examples
+
+### File Processing Workflow
+
+```tsx
+// Start processing
+const toastId = alert({
+  alertType: 'neutral',
+  title: 'Processing files...',
+  body: 'Converting 5 documents',
+  progressBarPercentage: 0,
+  isPersistentPopup: true
+});
+
+// Update progress
+updateToast(toastId, { progressBarPercentage: 30 });
+updateToast(toastId, { progressBarPercentage: 60 });
+
+// Complete successfully
+updateToast(toastId, {
+  alertType: 'success',
+  title: 'Processing complete',
+  body: 'All 5 documents converted successfully',
+  progressBarPercentage: 100,
+  isPersistentPopup: false
+});
+```
+
+### Error with Action
+
+```tsx
+alert({
+  alertType: 'error',
+  title: 'Upload failed',
+  body: 'File size exceeds the 10MB limit.',
+  buttonText: 'Try again',
+  buttonCallback: () => retryUpload(),
+  isPersistentPopup: true
+});
+```
+
+### Non-expandable Toast
+
+```tsx
+alert({
+  alertType: 'success',
+  title: 'Settings saved',
+  body: 'Your preferences have been updated.',
+  expandable: false,
+  durationMs: 3000
+});
+```
+
+### Custom Icon
+
+```tsx
+alert({
+  alertType: 'neutral',
+  title: 'New feature available',
+  body: 'Check out the latest updates.',
+  icon: <LocalIcon icon="star" />
+});
+```
+
+---
+
+## Integration
+
+### Network Error Handling
+
+The toast system automatically catches network errors from Axios and fetch requests:
+
+```tsx
+// These automatically show error toasts
+axios.post('/api/convert', formData);
+fetch('/api/process', { method: 'POST', body: data });
+```
+
+### Manual Error Handling
+
+```tsx
+try {
+  await processFiles();
+  alert({ alertType: 'success', title: 'Files processed' });
+} catch (error) {
+  alert({ 
+    alertType: 'error', 
+    title: 'Processing failed',
+    body: error.message 
+  });
+}
+```
+
--- a/frontend/src/components/toast/ToastContext.tsx
+++ b/frontend/src/components/toast/ToastContext.tsx
@@ -0,0 +1,150 @@
+import React, { createContext, useCallback, useContext, useMemo, useRef, useState, useEffect } from 'react';
+import { ToastApi, ToastInstance, ToastOptions } from './types';
+
+function normalizeProgress(value: number | undefined): number | undefined {
+  if (typeof value !== 'number' || Number.isNaN(value)) return undefined;
+  // Accept 0..1 as fraction or 0..100 as percent
+  if (value <= 1) return Math.max(0, Math.min(1, value)) * 100;
+  return Math.max(0, Math.min(100, value));
+}
+
+function generateId() {
+  return `toast_${Math.random().toString(36).slice(2, 9)}`;
+}
+
+type DefaultOpts = Required<Pick<ToastOptions, 'alertType' | 'title' | 'isPersistentPopup' | 'location' | 'durationMs'>> &
+  Partial<Omit<ToastOptions, 'id' | 'alertType' | 'title' | 'isPersistentPopup' | 'location' | 'durationMs'>>;
+
+const defaultOptions: DefaultOpts = {
+  alertType: 'neutral',
+  title: '',
+  isPersistentPopup: false,
+  location: 'bottom-right',
+  durationMs: 6000,
+};
+
+interface ToastContextShape extends ToastApi {
+  toasts: ToastInstance[];
+}
+
+const ToastContext = createContext<ToastContextShape | null>(null);
+
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast must be used within ToastProvider');
+  return ctx;
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<ToastInstance[]>([]);
+  const timers = useRef<Record<string, number>>({});
+
+  const scheduleAutoDismiss = useCallback((toast: ToastInstance) => {
+    if (toast.isPersistentPopup) return;
+    window.clearTimeout(timers.current[toast.id]);
+    timers.current[toast.id] = window.setTimeout(() => {
+      setToasts(prev => prev.filter(t => t.id !== toast.id));
+    }, toast.durationMs);
+  }, []);
+
+  const show = useCallback<ToastApi['show']>((options) => {
+    const id = options.id || generateId();
+    const hasButton = !!(options.buttonText && options.buttonCallback);
+    const merged: ToastInstance = {
+      ...defaultOptions,
+      ...options,
+      id,
+      progress: normalizeProgress(options.progressBarPercentage),
+      justCompleted: false,
+      expandable: hasButton ? false : (options.expandable !== false),
+      isExpanded: hasButton ? true : (options.expandable === false ? true : (options.alertType === 'error' ? true : false)),
+      createdAt: Date.now(),
+    } as ToastInstance;
+    setToasts(prev => {
+      // Coalesce duplicates by alertType + title + body text if no explicit id was provided
+      if (!options.id) {
+        const bodyText = typeof merged.body === 'string' ? merged.body : '';
+        const existingIndex = prev.findIndex(t => t.alertType === merged.alertType && t.title === merged.title && (typeof t.body === 'string' ? t.body : '') === bodyText);
+        if (existingIndex !== -1) {
+          const updated = [...prev];
+          const existing = updated[existingIndex];
+          const nextCount = (existing.count ?? 1) + 1;
+          updated[existingIndex] = { ...existing, count: nextCount, createdAt: Date.now() };
+          return updated;
+        }
+      }
+      const next = [...prev.filter(t => t.id !== id), merged];
+      return next;
+    });
+    scheduleAutoDismiss(merged);
+    return id;
+  }, [scheduleAutoDismiss]);
+
+  const update = useCallback<ToastApi['update']>((id, updates) => {
+    setToasts(prev => prev.map(t => {
+      if (t.id !== id) return t;
+      const progress = updates.progressBarPercentage !== undefined
+        ? normalizeProgress(updates.progressBarPercentage)
+        : t.progress;
+
+      const next: ToastInstance = {
+        ...t,
+        ...updates,
+        progress,
+      } as ToastInstance;
+
+      // Detect completion
+      if (typeof progress === 'number' && progress >= 100 && !t.justCompleted) {
+        // On completion: finalize type as success unless explicitly provided otherwise
+        next.justCompleted = false;
+        if (!updates.alertType) {
+          next.alertType = 'success';
+        }
+      }
+
+      return next;
+    }));
+  }, []);
+
+  const updateProgress = useCallback<ToastApi['updateProgress']>((id, progress) => {
+    update(id, { progressBarPercentage: progress });
+  }, [update]);
+
+  const dismiss = useCallback<ToastApi['dismiss']>((id) => {
+    setToasts(prev => prev.filter(t => t.id !== id));
+    window.clearTimeout(timers.current[id]);
+    delete timers.current[id];
+  }, []);
+
+  const dismissAll = useCallback<ToastApi['dismissAll']>(() => {
+    setToasts([]);
+    Object.values(timers.current).forEach(t => window.clearTimeout(t));
+    timers.current = {};
+  }, []);
+
+  const value = useMemo<ToastContextShape>(() => ({
+    toasts,
+    show,
+    update,
+    updateProgress,
+    dismiss,
+    dismissAll,
+  }), [toasts, show, update, updateProgress, dismiss, dismissAll]);
+
+  // Handle expand/collapse toggles from renderer without widening API
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail as { id: string } | undefined;
+      if (!detail?.id) return;
+      setToasts(prev => prev.map(t => t.id === detail.id ? { ...t, isExpanded: !t.isExpanded } : t));
+    };
+    window.addEventListener('toast:toggle', handler as EventListener);
+    return () => window.removeEventListener('toast:toggle', handler as EventListener);
+  }, []);
+
+  return (
+    <ToastContext.Provider value={value}>{children}</ToastContext.Provider>
+  );
+}
+
+
--- a/frontend/src/components/toast/ToastRenderer.css
+++ b/frontend/src/components/toast/ToastRenderer.css
@@ -0,0 +1,209 @@
+/* Toast Container Styles */
+.toast-container {
+  position: fixed;
+  z-index: 1200;
+  display: flex;
+  gap: 12px;
+  pointer-events: none;
+}
+
+.toast-container--top-left {
+  top: 16px;
+  left: 16px;
+  flex-direction: column;
+}
+
+.toast-container--top-right {
+  top: 16px;
+  right: 16px;
+  flex-direction: column;
+}
+
+.toast-container--bottom-left {
+  bottom: 16px;
+  left: 16px;
+  flex-direction: column-reverse;
+}
+
+.toast-container--bottom-right {
+  bottom: 16px;
+  right: 16px;
+  flex-direction: column-reverse;
+}
+
+/* Toast Item Styles */
+.toast-item {
+  min-width: 320px;
+  max-width: 560px;
+  box-shadow: var(--shadow-lg);
+  border-radius: 16px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: auto;
+}
+
+/* Toast Alert Type Colors */
+.toast-item--success {
+  background: var(--color-green-100);
+  color: var(--text-primary);
+  border: 1px solid var(--color-green-400);
+}
+
+.toast-item--error {
+  background: var(--color-red-100);
+  color: var(--text-primary);
+  border: 1px solid var(--color-red-400);
+}
+
+.toast-item--warning {
+  background: var(--color-yellow-100);
+  color: var(--text-primary);
+  border: 1px solid var(--color-yellow-400);
+}
+
+.toast-item--neutral {
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  border: 1px solid var(--border-default);
+}
+
+/* Toast Header Row */
+.toast-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.toast-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toast-title-container {
+  font-weight: 700;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toast-count-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.08);
+  color: inherit;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.toast-controls {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.toast-button {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toast-expand-button {
+  transform: rotate(0deg);
+  transition: transform 160ms ease;
+}
+
+.toast-expand-button--expanded {
+  transform: rotate(180deg);
+}
+
+/* Progress Bar */
+.toast-progress-container {
+  margin-top: 8px;
+  height: 6px;
+  background: var(--bg-muted);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.toast-progress-bar {
+  height: 100%;
+  transition: width 160ms ease;
+}
+
+.toast-progress-bar--success {
+  background: var(--color-green-500);
+}
+
+.toast-progress-bar--error {
+  background: var(--color-red-500);
+}
+
+.toast-progress-bar--warning {
+  background: var(--color-yellow-500);
+}
+
+.toast-progress-bar--neutral {
+  background: var(--color-gray-500);
+}
+
+/* Toast Body */
+.toast-body {
+  font-size: 14px;
+  opacity: 0.9;
+  margin-top: 8px;
+}
+
+/* Toast Action Button */
+.toast-action-container {
+  margin-top: 12px;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.toast-action-button {
+  padding: 8px 12px;
+  border-radius: 12px;
+  border: 1px solid;
+  background: transparent;
+  font-weight: 600;
+  cursor: pointer;
+  margin-left: auto;
+}
+
+.toast-action-button--success {
+  color: var(--text-primary);
+  border-color: var(--color-green-400);
+}
+
+.toast-action-button--error {
+  color: var(--text-primary);
+  border-color: var(--color-red-400);
+}
+
+.toast-action-button--warning {
+  color: var(--text-primary);
+  border-color: var(--color-yellow-400);
+}
+
+.toast-action-button--neutral {
+  color: var(--text-primary);
+  border-color: var(--border-default);
+}
--- a/frontend/src/components/toast/ToastRenderer.tsx
+++ b/frontend/src/components/toast/ToastRenderer.tsx
@@ -0,0 +1,138 @@
+import React from 'react';
+import { useToast } from './ToastContext';
+import { ToastInstance, ToastLocation } from './types';
+import { LocalIcon } from '../shared/LocalIcon';
+import './ToastRenderer.css';
+
+const locationToClass: Record<ToastLocation, string> = {
+  'top-left': 'toast-container--top-left',
+  'top-right': 'toast-container--top-right',
+  'bottom-left': 'toast-container--bottom-left',
+  'bottom-right': 'toast-container--bottom-right',
+};
+
+function getToastItemClass(t: ToastInstance): string {
+  return `toast-item toast-item--${t.alertType}`;
+}
+
+function getProgressBarClass(t: ToastInstance): string {
+  return `toast-progress-bar toast-progress-bar--${t.alertType}`;
+}
+
+function getActionButtonClass(t: ToastInstance): string {
+  return `toast-action-button toast-action-button--${t.alertType}`;
+}
+
+function getDefaultIconName(t: ToastInstance): string {
+  switch (t.alertType) {
+    case 'success':
+      return 'check-circle-rounded';
+    case 'error':
+      return 'close-rounded';
+    case 'warning':
+      return 'warning-rounded';
+    case 'neutral':
+    default:
+      return 'info-rounded';
+  }
+}
+
+export default function ToastRenderer() {
+  const { toasts, dismiss } = useToast();
+
+  const grouped = toasts.reduce<Record<ToastLocation, ToastInstance[]>>((acc, t) => {
+    const key = t.location;
+    if (!acc[key]) acc[key] = [] as ToastInstance[];
+    acc[key].push(t);
+    return acc;
+  }, { 'top-left': [], 'top-right': [], 'bottom-left': [], 'bottom-right': [] });
+
+  return (
+    <>
+      {(Object.keys(grouped) as ToastLocation[]).map((loc) => (
+        <div key={loc} className={`toast-container ${locationToClass[loc]}`}>
+          {grouped[loc].map(t => {
+            return (
+              <div
+                key={t.id}
+                role="status"
+                className={getToastItemClass(t)}
+              >
+                {/* Top row: Icon + Title + Controls */}
+                <div className="toast-header">
+                  {/* Icon */}
+                  <div className="toast-icon">
+                    {t.icon ?? (
+                      <LocalIcon icon={`material-symbols:${getDefaultIconName(t)}`} width={20} height={20} />
+                    )}
+                  </div>
+                  
+                  {/* Title + count badge */}
+                  <div className="toast-title-container">
+                    <span>{t.title}</span>
+                    {typeof t.count === 'number' && t.count > 1 && (
+                      <span className="toast-count-badge">{t.count}</span>
+                    )}
+                  </div>
+                  
+                  {/* Controls */}
+                  <div className="toast-controls">
+                    {t.expandable && (
+                      <button
+                        aria-label="Toggle details"
+                        onClick={() => {
+                          const evt = new CustomEvent('toast:toggle', { detail: { id: t.id } });
+                          window.dispatchEvent(evt);
+                        }}
+                        className={`toast-button toast-expand-button ${t.isExpanded ? 'toast-expand-button--expanded' : ''}`}
+                      >
+                        <LocalIcon icon="material-symbols:expand-more-rounded" />
+                      </button>
+                    )}
+                    <button
+                      aria-label="Dismiss"
+                      onClick={() => dismiss(t.id)}
+                      className="toast-button"
+                    >
+                      <LocalIcon icon="material-symbols:close-rounded" width={20} height={20} />
+                    </button>
+                  </div>
+                </div>
+                {/* Progress bar - always show when present */}
+                {typeof t.progress === 'number' && (
+                  <div className="toast-progress-container">
+                    <div 
+                      className={getProgressBarClass(t)}
+                      style={{ width: `${t.progress}%` }}
+                    />
+                  </div>
+                )}
+                
+                {/* Body content - only show when expanded */}
+                {(t.isExpanded || !t.expandable) && (
+                  <div className="toast-body">
+                    {t.body}
+                  </div>
+                )}
+                
+                {/* Button - always show when present, positioned below body */}
+                {t.buttonText && t.buttonCallback && (
+                  <div className="toast-action-container">
+                    <button
+                      onClick={t.buttonCallback}
+                      className={getActionButtonClass(t)}
+                    >
+                      {t.buttonText}
+                    </button>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </>
+  );
+}
+
+
--- a/frontend/src/components/toast/index.ts
+++ b/frontend/src/components/toast/index.ts
@@ -0,0 +1,61 @@
+import { ToastOptions } from './types';
+import { useToast, ToastProvider } from './ToastContext';
+import ToastRenderer from './ToastRenderer';
+
+export { useToast, ToastProvider, ToastRenderer };
+
+// Global imperative API via module singleton
+let _api: ReturnType<typeof createImperativeApi> | null = null;
+
+function createImperativeApi() {
+  const subscribers: Array<(fn: any) => void> = [];
+  let api: any = null;
+  return {
+    provide(instance: any) {
+      api = instance;
+      subscribers.splice(0).forEach(cb => cb(api));
+    },
+    get(): any | null { return api; },
+    onReady(cb: (api: any) => void) {
+      if (api) cb(api); else subscribers.push(cb);
+    }
+  };
+}
+
+if (!_api) _api = createImperativeApi();
+
+// Hook helper to wire context API back to singleton
+export function ToastPortalBinder() {
+  const ctx = useToast();
+  // Provide API once mounted
+  _api!.provide(ctx);
+  return null;
+}
+
+export function alert(options: ToastOptions) {
+  if (_api?.get()) {
+    return _api.get()!.show(options);
+  }
+  // Queue until provider mounts
+  let id = '';
+  _api?.onReady((api) => { id = api.show(options); });
+  return id;
+}
+
+export function updateToast(id: string, options: Partial<ToastOptions>) {
+  _api?.get()?.update(id, options);
+}
+
+export function updateToastProgress(id: string, progress: number) {
+  _api?.get()?.updateProgress(id, progress);
+}
+
+export function dismissToast(id: string) {
+  _api?.get()?.dismiss(id);
+}
+
+export function dismissAllToasts() {
+  _api?.get()?.dismissAll();
+}
+
+
--- a/frontend/src/components/toast/types.ts
+++ b/frontend/src/components/toast/types.ts
@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+
+export type ToastLocation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type ToastAlertType = 'success' | 'error' | 'warning' | 'neutral';
+
+export interface ToastOptions {
+  alertType?: ToastAlertType;
+  title: string;
+  body?: ReactNode;
+  buttonText?: string;
+  buttonCallback?: () => void;
+  isPersistentPopup?: boolean;
+  location?: ToastLocation;
+  icon?: ReactNode;
+  /** number 0-1 as fraction or 0-100 as percent */
+  progressBarPercentage?: number;
+  /** milliseconds to auto-close if not persistent */
+  durationMs?: number;
+  /** optional id to control/update later */
+  id?: string;
+  /** If true, show chevron and collapse/expand animation. Defaults to true. */
+  expandable?: boolean;
+}
+
+export interface ToastInstance extends Omit<ToastOptions, 'id' | 'progressBarPercentage'> {
+  id: string;
+  alertType: ToastAlertType;
+  isPersistentPopup: boolean;
+  location: ToastLocation;
+  durationMs: number;
+  expandable: boolean;
+  isExpanded: boolean;
+  /** Number of coalesced duplicates */
+  count?: number;
+  /** internal progress normalized 0..100 */
+  progress?: number;
+  /** if progress completed, briefly show check icon */
+  justCompleted: boolean;
+  createdAt: number;
+}
+
+export interface ToastApi {
+  show: (options: ToastOptions) => string;
+  update: (id: string, options: Partial<ToastOptions>) => void;
+  updateProgress: (id: string, progress: number) => void;
+  dismiss: (id: string) => void;
+  dismissAll: () => void;
+}
+
+
--- a/frontend/src/components/tools/SearchResults.tsx
+++ b/frontend/src/components/tools/SearchResults.tsx
@@ -9,13 +9,22 @@ import NoToolsFound from './shared/NoToolsFound';
 import "./toolPicker/ToolPicker.css";

 interface SearchResultsProps {
-  filteredTools: [string, ToolRegistryEntry][];
+  filteredTools: Array<{ item: [string, ToolRegistryEntry]; matchedText?: string }>;
  onSelect: (id: string) => void;
+  searchQuery?: string;
 }

-const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect }) => {
+const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect, searchQuery }) => {
  const { t } = useTranslation();
-  const { searchGroups } = useToolSections(filteredTools);
+  const { searchGroups } = useToolSections(filteredTools, searchQuery);
+
+  // Create a map of matched text for quick lookup
+  const matchedTextMap = new Map<string, string>();
+  if (filteredTools && Array.isArray(filteredTools)) {
+    filteredTools.forEach(({ item: [id], matchedText }) => {
+      if (matchedText) matchedTextMap.set(id, matchedText);
+    });
+  }

  if (searchGroups.length === 0) {
    return <NoToolsFound />;
@@ -28,15 +37,27 @@ const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect }
        <Box key={group.subcategoryId}  w="100%">
          <SubcategoryHeader label={getSubcategoryLabel(t, group.subcategoryId)} />
          <Stack  gap="xs">
-            {group.tools.map(({ id, tool }) => (
-              <ToolButton
-                key={id}
-                id={id}
-                tool={tool}
-                isSelected={false}
-                onSelect={onSelect}
-              />
-            ))}
+            {group.tools.map(({ id, tool }) => {
+              const matchedText = matchedTextMap.get(id);
+              // Check if the match was from synonyms and show the actual synonym that matched
+              const isSynonymMatch = matchedText && tool.synonyms?.some(synonym => 
+                matchedText.toLowerCase().includes(synonym.toLowerCase())
+              );
+              const matchedSynonym = isSynonymMatch ? tool.synonyms?.find(synonym => 
+                matchedText.toLowerCase().includes(synonym.toLowerCase())
+              ) : undefined;
+              
+              return (
+                <ToolButton
+                  key={id}
+                  id={id}
+                  tool={tool}
+                  isSelected={false}
+                  onSelect={onSelect}
+                  matchedSynonym={matchedSynonym}
+                />
+              );
+            })}
          </Stack>
        </Box>
      ))}
--- a/frontend/src/components/tools/ToolPanel.tsx
+++ b/frontend/src/components/tools/ToolPanel.tsx
@@ -72,6 +72,7 @@ export default function ToolPanel() {
              <SearchResults
                filteredTools={filteredTools}
                onSelect={handleToolSelect}
+                searchQuery={searchQuery}
              />
          </div>
        ) : leftPanelView === 'toolPicker' ? (
--- a/frontend/src/components/tools/ToolPicker.tsx
+++ b/frontend/src/components/tools/ToolPicker.tsx
@@ -10,7 +10,7 @@ import { renderToolButtons } from "./shared/renderToolButtons";
 interface ToolPickerProps {
  selectedToolKey: string | null;
  onSelect: (id: string) => void;
-  filteredTools: [string, ToolRegistryEntry][];
+  filteredTools: Array<{ item: [string, ToolRegistryEntry]; matchedText?: string }>;
  isSearching?: boolean;
 }

--- a/frontend/src/components/tools/automate/ToolSelector.tsx
+++ b/frontend/src/components/tools/automate/ToolSelector.tsx
@@ -58,8 +58,13 @@ export default function ToolSelector({
    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] }));
+  }, [filteredTools]);
+
  // Use the same tool sections logic as the main ToolPicker
-  const { sections, searchGroups } = useToolSections(filteredTools);
+  const { sections, searchGroups } = useToolSections(transformedFilteredTools);

  // Determine what to display: search results or organized sections
  const isSearching = searchTerm.trim().length > 0;
--- a/frontend/src/components/tools/extractImages/ExtractImagesSettings.tsx
+++ b/frontend/src/components/tools/extractImages/ExtractImagesSettings.tsx
@@ -0,0 +1,46 @@
+import { useTranslation } from 'react-i18next';
+import { Stack, Select, Checkbox } from '@mantine/core';
+import { ExtractImagesParameters } from '../../../hooks/tools/extractImages/useExtractImagesParameters';
+
+interface ExtractImagesSettingsProps {
+  parameters: ExtractImagesParameters;
+  onParameterChange: <K extends keyof ExtractImagesParameters>(key: K, value: ExtractImagesParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const ExtractImagesSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: ExtractImagesSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <Select
+        label={t('extractImages.selectText', 'Output Format')}
+        value={parameters.format}
+        onChange={(value) => {
+          const allowedFormats = ['png', 'jpg', 'gif'] as const;
+          const format = allowedFormats.includes(value as any) ? (value as typeof allowedFormats[number]) : 'png';
+          onParameterChange('format', format);
+        }}
+        data={[
+          { value: 'png', label: 'PNG' },
+          { value: 'jpg', label: 'JPG' },
+          { value: 'gif', label: 'GIF' },
+        ]}
+        disabled={disabled}
+      />
+
+      <Checkbox
+        label={t('extractImages.allowDuplicates', 'Allow Duplicate Images')}
+        checked={parameters.allowDuplicates}
+        onChange={(event) => onParameterChange('allowDuplicates', event.currentTarget.checked)}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+};
+
+export default ExtractImagesSettings;
--- a/frontend/src/components/tools/reorganizePages/ReorganizePagesSettings.tsx
+++ b/frontend/src/components/tools/reorganizePages/ReorganizePagesSettings.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { Divider, Select, Stack, TextInput } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { ReorganizePagesParameters } from '../../../hooks/tools/reorganizePages/useReorganizePagesParameters';
+import { getReorganizePagesModeData } from './constants';
+
+export default function ReorganizePagesSettings({
+  parameters,
+  onParameterChange,
+  disabled,
+}: {
+  parameters: ReorganizePagesParameters;
+  onParameterChange: <K extends keyof ReorganizePagesParameters>(
+    key: K,
+    value: ReorganizePagesParameters[K]
+  ) => void;
+  disabled?: boolean;
+}) {
+  const { t } = useTranslation();
+  const modeData = getReorganizePagesModeData(t);
+
+  const requiresOrder = parameters.customMode === '' || parameters.customMode === 'DUPLICATE';
+  const selectedMode = modeData.find(mode => mode.value === parameters.customMode) || modeData[0];
+  return (
+    <Stack gap="sm">
+      <Select
+        label={t('pdfOrganiser.mode._value', 'Organization mode')}
+        data={modeData}
+        value={parameters.customMode}
+        onChange={(v) => onParameterChange('customMode', v ?? '')}
+        disabled={disabled}
+      />
+      {selectedMode && (
+        <div 
+          style={{
+            backgroundColor: 'var(--information-text-bg)',
+            color: 'var(--information-text-color)',
+            padding: '8px 12px',
+            borderRadius: '8px',
+            marginTop: '4px',
+            fontSize: '0.75rem',
+            textAlign: 'center'
+          }}
+        >
+          {selectedMode.description}
+        </div>
+      )}
+
+      {requiresOrder && (
+        <>
+        <Divider/>
+        <TextInput
+          label={t('pageOrderPrompt', 'Page order / ranges')}
+          placeholder={t('pdfOrganiser.placeholder', 'e.g. 1,3,2,4-6')}
+          value={parameters.pageNumbers}
+          onChange={(e) => onParameterChange('pageNumbers', e.currentTarget.value)}
+          disabled={disabled}
+        />
+        </>
+      )}
+    </Stack>
+  );
+}
+
+
--- a/frontend/src/components/tools/reorganizePages/constants.ts
+++ b/frontend/src/components/tools/reorganizePages/constants.ts
@@ -0,0 +1,59 @@
+import { TFunction } from 'i18next';
+
+export const getReorganizePagesModeData = (t: TFunction) => [
+  { 
+    value: '', 
+    label: t('pdfOrganiser.mode.1', 'Custom Page Order'),
+    description: t('pdfOrganiser.mode.desc.CUSTOM', 'Use a custom sequence of page numbers or expressions to define a new order.')
+  },
+  { 
+    value: 'REVERSE_ORDER', 
+    label: t('pdfOrganiser.mode.2', 'Reverse Order'),
+    description: t('pdfOrganiser.mode.desc.REVERSE_ORDER', 'Flip the document so the last page becomes first and so on.')
+  },
+  { 
+    value: 'DUPLEX_SORT', 
+    label: t('pdfOrganiser.mode.3', 'Duplex Sort'),
+    description: t('pdfOrganiser.mode.desc.DUPLEX_SORT', 'Interleave fronts then backs as if a duplex scanner scanned all fronts, then all backs (1, n, 2, n-1, …).')
+  },
+  { 
+    value: 'BOOKLET_SORT', 
+    label: t('pdfOrganiser.mode.4', 'Booklet Sort'),
+    description: t('pdfOrganiser.mode.desc.BOOKLET_SORT', 'Arrange pages for booklet printing (last, first, second, second last, …).')
+  },
+  { 
+    value: 'SIDE_STITCH_BOOKLET_SORT', 
+    label: t('pdfOrganiser.mode.5', 'Side Stitch Booklet Sort'),
+    description: t('pdfOrganiser.mode.desc.SIDE_STITCH_BOOKLET_SORT', 'Arrange pages for side‑stitch booklet printing (optimized for binding on the side).')
+  },
+  { 
+    value: 'ODD_EVEN_SPLIT', 
+    label: t('pdfOrganiser.mode.6', 'Odd-Even Split'),
+    description: t('pdfOrganiser.mode.desc.ODD_EVEN_SPLIT', 'Split the document into two outputs: all odd pages and all even pages.')
+  },
+  { 
+    value: 'ODD_EVEN_MERGE', 
+    label: t('pdfOrganiser.mode.10', 'Odd-Even Merge'),
+    description: t('pdfOrganiser.mode.desc.ODD_EVEN_MERGE', 'Merge two PDFs by alternating pages: odd from the first, even from the second.')
+  },
+  { 
+    value: 'DUPLICATE', 
+    label: t('pdfOrganiser.mode.11', 'Duplicate all pages'),
+    description: t('pdfOrganiser.mode.desc.DUPLICATE', 'Duplicate each page according to the custom order count (e.g., 4 duplicates each page 4×).')
+  },
+  { 
+    value: 'REMOVE_FIRST', 
+    label: t('pdfOrganiser.mode.7', 'Remove First'),
+    description: t('pdfOrganiser.mode.desc.REMOVE_FIRST', 'Remove the first page from the document.')
+  },
+  { 
+    value: 'REMOVE_LAST', 
+    label: t('pdfOrganiser.mode.8', 'Remove Last'),
+    description: t('pdfOrganiser.mode.desc.REMOVE_LAST', 'Remove the last page from the document.')
+  },
+  { 
+    value: 'REMOVE_FIRST_AND_LAST', 
+    label: t('pdfOrganiser.mode.9', 'Remove First and Last'),
+    description: t('pdfOrganiser.mode.desc.REMOVE_FIRST_AND_LAST', 'Remove both the first and last pages from the document.')
+  },
+];
--- a/frontend/src/components/tools/replaceColor/ReplaceColorSettings.tsx
+++ b/frontend/src/components/tools/replaceColor/ReplaceColorSettings.tsx
@@ -0,0 +1,108 @@
+import React from "react";
+import { Stack, Text, Select, ColorInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ReplaceColorParameters } from "../../../hooks/tools/replaceColor/useReplaceColorParameters";
+
+interface ReplaceColorSettingsProps {
+  parameters: ReplaceColorParameters;
+  onParameterChange: <K extends keyof ReplaceColorParameters>(key: K, value: ReplaceColorParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const ReplaceColorSettings = ({ parameters, onParameterChange, disabled = false }: ReplaceColorSettingsProps) => {
+  const { t } = useTranslation();
+
+  const replaceAndInvertOptions = [
+    {
+      value: 'HIGH_CONTRAST_COLOR',
+      label: t('replaceColor.options.highContrast', 'High contrast')
+    },
+    {
+      value: 'FULL_INVERSION',
+      label: t('replaceColor.options.invertAll', 'Invert all colours')
+    },
+    {
+      value: 'CUSTOM_COLOR',
+      label: t('replaceColor.options.custom', 'Custom')
+    }
+  ];
+
+  const highContrastOptions = [
+    {
+      value: 'WHITE_TEXT_ON_BLACK',
+      label: t('replace-color.selectText.6', 'White text on black background')
+    },
+    {
+      value: 'BLACK_TEXT_ON_WHITE',
+      label: t('replace-color.selectText.7', 'Black text on white background')
+    },
+    {
+      value: 'YELLOW_TEXT_ON_BLACK',
+      label: t('replace-color.selectText.8', 'Yellow text on black background')
+    },
+    {
+      value: 'GREEN_TEXT_ON_BLACK',
+      label: t('replace-color.selectText.9', 'Green text on black background')
+    }
+  ];
+
+  return (
+    <Stack gap="md">
+      <Stack gap="xs">
+        <Text size="sm" fw={500}>
+          {t('replaceColor.labels.colourOperation', 'Colour operation')}
+        </Text>
+        <Select
+          value={parameters.replaceAndInvertOption}
+          onChange={(value) => value && onParameterChange('replaceAndInvertOption', value as ReplaceColorParameters['replaceAndInvertOption'])}
+          data={replaceAndInvertOptions}
+          disabled={disabled}
+        />
+      </Stack>
+
+      {parameters.replaceAndInvertOption === 'HIGH_CONTRAST_COLOR' && (
+        <Stack gap="xs">
+          <Text size="sm" fw={500}>
+            {t('replace-color.selectText.5', 'High contrast color options')}
+          </Text>
+          <Select
+            value={parameters.highContrastColorCombination}
+            onChange={(value) => value && onParameterChange('highContrastColorCombination', value as ReplaceColorParameters['highContrastColorCombination'])}
+            data={highContrastOptions}
+            disabled={disabled}
+          />
+        </Stack>
+      )}
+
+      {parameters.replaceAndInvertOption === 'CUSTOM_COLOR' && (
+        <>
+          <Stack gap="xs">
+            <Text size="sm" fw={500}>
+              {t('replace-color.selectText.10', 'Choose text Color')}
+            </Text>
+            <ColorInput
+              value={parameters.textColor}
+              onChange={(value) => onParameterChange('textColor', value)}
+              format="hex"
+              disabled={disabled}
+            />
+          </Stack>
+
+          <Stack gap="xs">
+            <Text size="sm" fw={500}>
+              {t('replace-color.selectText.11', 'Choose background Color')}
+            </Text>
+            <ColorInput
+              value={parameters.backGroundColor}
+              onChange={(value) => onParameterChange('backGroundColor', value)}
+              format="hex"
+              disabled={disabled}
+            />
+          </Stack>
+        </>
+      )}
+    </Stack>
+  );
+};
+
+export default ReplaceColorSettings;
--- a/frontend/src/components/tools/scannerImageSplit/ScannerImageSplitSettings.tsx
+++ b/frontend/src/components/tools/scannerImageSplit/ScannerImageSplitSettings.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { NumberInput, Stack } from '@mantine/core';
+import { ScannerImageSplitParameters } from '../../../hooks/tools/scannerImageSplit/useScannerImageSplitParameters';
+
+interface ScannerImageSplitSettingsProps {
+  parameters: ScannerImageSplitParameters;
+  onParameterChange: <K extends keyof ScannerImageSplitParameters>(key: K, value: ScannerImageSplitParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const ScannerImageSplitSettings: React.FC<ScannerImageSplitSettingsProps> = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <NumberInput
+        label={t('ScannerImageSplit.selectText.1', 'Angle Threshold:')}
+        description={t('ScannerImageSplit.selectText.2', 'Sets the minimum absolute angle required for the image to be rotated (default: 10).')}
+        value={parameters.angle_threshold}
+        onChange={(value) => onParameterChange('angle_threshold', Number(value) || 10)}
+        min={0}
+        step={1}
+        disabled={disabled}
+      />
+
+      <NumberInput
+        label={t('ScannerImageSplit.selectText.3', 'Tolerance:')}
+        description={t('ScannerImageSplit.selectText.4', 'Determines the range of colour variation around the estimated background colour (default: 30).')}
+        value={parameters.tolerance}
+        onChange={(value) => onParameterChange('tolerance', Number(value) || 30)}
+        min={0}
+        step={1}
+        disabled={disabled}
+      />
+
+      <NumberInput
+        label={t('ScannerImageSplit.selectText.5', 'Minimum Area:')}
+        description={t('ScannerImageSplit.selectText.6', 'Sets the minimum area threshold for a photo (default: 10000).')}
+        value={parameters.min_area}
+        onChange={(value) => onParameterChange('min_area', Number(value) || 10000)}
+        min={0}
+        step={100}
+        disabled={disabled}
+      />
+
+      <NumberInput
+        label={t('ScannerImageSplit.selectText.7', 'Minimum Contour Area:')}
+        description={t('ScannerImageSplit.selectText.8', 'Sets the minimum contour area threshold for a photo.')}
+        value={parameters.min_contour_area}
+        onChange={(value) => onParameterChange('min_contour_area', Number(value) || 500)}
+        min={0}
+        step={10}
+        disabled={disabled}
+      />
+
+      <NumberInput
+        label={t('ScannerImageSplit.selectText.9', 'Border Size:')}
+        description={t('ScannerImageSplit.selectText.10', 'Sets the size of the border added and removed to prevent white borders in the output (default: 1).')}
+        value={parameters.border_size}
+        onChange={(value) => onParameterChange('border_size', Number(value) || 1)}
+        min={0}
+        step={1}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+};
+
+export default ScannerImageSplitSettings;
--- a/frontend/src/components/tools/shared/renderToolButtons.tsx
+++ b/frontend/src/components/tools/shared/renderToolButtons.tsx
@@ -13,23 +13,39 @@ export const renderToolButtons = (
  selectedToolKey: string | null,
  onSelect: (id: string) => void,
  showSubcategoryHeader: boolean = true,
-  disableNavigation: boolean = false
-) => (
-  <Box key={subcategory.subcategoryId} w="100%">
-    {showSubcategoryHeader && (
-      <SubcategoryHeader label={getSubcategoryLabel(t, subcategory.subcategoryId)} />
-    )}
-    <div>
-      {subcategory.tools.map(({ id, tool }) => (
-        <ToolButton
-          key={id}
-          id={id}
-          tool={tool}
-          isSelected={selectedToolKey === id}
-          onSelect={onSelect}
-          disableNavigation={disableNavigation}
-        />
-      ))}
-    </div>
-  </Box>
-);
+  disableNavigation: boolean = false,
+  searchResults?: Array<{ item: [string, any]; matchedText?: string }>
+) => {
+  // Create a map of matched text for quick lookup
+  const matchedTextMap = new Map<string, string>();
+  if (searchResults) {
+    searchResults.forEach(({ item: [id], matchedText }) => {
+      if (matchedText) matchedTextMap.set(id, matchedText);
+    });
+  }
+
+  return (
+    <Box key={subcategory.subcategoryId} w="100%">
+      {showSubcategoryHeader && (
+        <SubcategoryHeader label={getSubcategoryLabel(t, subcategory.subcategoryId)} />
+      )}
+      <div>
+        {subcategory.tools.map(({ id, tool }) => {
+          const matchedSynonym = matchedTextMap.get(id);
+          
+          return (
+            <ToolButton
+              key={id}
+              id={id}
+              tool={tool}
+              isSelected={selectedToolKey === id}
+              onSelect={onSelect}
+              disableNavigation={disableNavigation}
+              matchedSynonym={matchedSynonym}
+            />
+          );
+        })}
+      </div>
+    </Box>
+  );
+};
--- a/frontend/src/components/tools/toolPicker/ToolButton.tsx
+++ b/frontend/src/components/tools/toolPicker/ToolButton.tsx
@@ -13,9 +13,10 @@ interface ToolButtonProps {
  onSelect: (id: string) => void;
  rounded?: boolean;
  disableNavigation?: boolean;
+  matchedSynonym?: string;
 }

-const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect, disableNavigation = false }) => {
+const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect, disableNavigation = false, matchedSynonym }) => {
  const isUnavailable = !tool.component && !tool.link;
  const { getToolNavigation } = useToolNavigation();

@@ -40,13 +41,27 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
  const buttonContent = (
    <>
      <div className="tool-button-icon" style={{ color: "var(--tools-text-and-icon-color)", marginRight: "0.5rem", transform: "scale(0.8)", transformOrigin: "center", opacity: isUnavailable ? 0.25 : 1 }}>{tool.icon}</div>
-      <FitText
-        text={tool.name}
-        lines={1}
-        minimumFontScale={0.8}
-        as="span"
-        style={{ display: 'inline-block', maxWidth: '100%', opacity: isUnavailable ? 0.25 : 1 }}
-      />
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', flex: 1, overflow: 'visible' }}>
+        <FitText
+          text={tool.name}
+          lines={1}
+          minimumFontScale={0.8}
+          as="span"
+          style={{ display: 'inline-block', maxWidth: '100%', opacity: isUnavailable ? 0.25 : 1 }}
+        />
+        {matchedSynonym && (
+          <span style={{ 
+            fontSize: '0.75rem', 
+            color: 'var(--mantine-color-dimmed)', 
+            opacity: isUnavailable ? 0.25 : 1,
+            marginTop: '1px',
+            overflow: 'visible',
+            whiteSpace: 'nowrap'
+          }}>
+            {matchedSynonym}
+          </span>
+        )}
+      </div>
    </>
  );

@@ -66,7 +81,10 @@ 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)" } }}
+      styles={{ 
+        root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", overflow: 'visible' },
+        label: { overflow: 'visible' }
+      }}
    >
      {buttonContent}
    </Button>
@@ -84,7 +102,10 @@ 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)" } }}
+      styles={{ 
+        root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", overflow: 'visible' },
+        label: { overflow: 'visible' }
+      }}
    >
      {buttonContent}
    </Button>
@@ -99,7 +120,7 @@ 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 } }}
+      styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", cursor: isUnavailable ? 'not-allowed' : undefined, overflow: 'visible' }, label: { overflow: 'visible' } }}
    >
      {buttonContent}
    </Button>
--- a/frontend/src/components/tools/toolPicker/ToolSearch.tsx
+++ b/frontend/src/components/tools/toolPicker/ToolSearch.tsx
@@ -5,6 +5,7 @@ import LocalIcon from '../../shared/LocalIcon';
 import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
 import { TextInput } from "../../shared/TextInput";
 import "./ToolPicker.css";
+import { rankByFuzzy, idToWords } from "../../../utils/fuzzySearch";

 interface ToolSearchProps {
  value: string;
@@ -38,15 +39,14 @@ const ToolSearch = ({

  const filteredTools = useMemo(() => {
    if (!value.trim()) return [];
-    return Object.entries(toolRegistry)
-      .filter(([id, tool]) => {
-        if (mode === "dropdown" && id === selectedToolKey) return false;
-        return (
-          tool.name.toLowerCase().includes(value.toLowerCase()) || tool.description.toLowerCase().includes(value.toLowerCase())
-        );
-      })
-      .slice(0, 6)
-      .map(([id, tool]) => ({ id, tool }));
+    const entries = Object.entries(toolRegistry).filter(([id]) => !(mode === "dropdown" && id === selectedToolKey));
+    const ranked = rankByFuzzy(entries, value, [
+      ([key]) => idToWords(key),
+      ([, v]) => v.name,
+      ([, v]) => v.description,
+      ([, v]) => v.synonyms?.join(' ') || '',
+    ]).slice(0, 6);
+    return ranked.map(({ item: [id, tool] }) => ({ id, tool }));
  }, [value, toolRegistry, mode, selectedToolKey]);

  const handleSearchChange = (searchValue: string) => {
--- a/frontend/src/components/tooltips/useReplaceColorTips.ts
+++ b/frontend/src/components/tooltips/useReplaceColorTips.ts
@@ -0,0 +1,40 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '../../types/tips';
+
+export const useReplaceColorTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t("replaceColor.tooltip.header.title", "Replace & Invert Colour Settings Overview")
+    },
+    tips: [
+      {
+        title: t("replaceColor.tooltip.description.title", "Description"),
+        description: t("replaceColor.tooltip.description.text", "Transform PDF colours to improve readability and accessibility. Choose from high contrast presets, invert all colours, or create custom colour schemes.")
+      },
+      {
+        title: t("replaceColor.tooltip.highContrast.title", "High Contrast"),
+        description: t("replaceColor.tooltip.highContrast.text", "Apply predefined high contrast colour combinations designed for better readability and accessibility compliance."),
+        bullets: [
+          t("replaceColor.tooltip.highContrast.bullet1", "White text on black background - Classic dark mode"),
+          t("replaceColor.tooltip.highContrast.bullet2", "Black text on white background - Standard high contrast"),
+          t("replaceColor.tooltip.highContrast.bullet3", "Yellow text on black background - High visibility option"),
+          t("replaceColor.tooltip.highContrast.bullet4", "Green text on black background - Alternative high contrast")
+        ]
+      },
+      {
+        title: t("replaceColor.tooltip.invertAll.title", "Invert All Colours"),
+        description: t("replaceColor.tooltip.invertAll.text", "Completely invert all colours in the PDF, creating a negative-like effect. Useful for creating dark mode versions of documents or reducing eye strain in low-light conditions.")
+      },
+      {
+        title: t("replaceColor.tooltip.custom.title", "Custom Colours"),
+        description: t("replaceColor.tooltip.custom.text", "Define your own text and background colours using the colour pickers. Perfect for creating branded documents or specific accessibility requirements."),
+        bullets: [
+          t("replaceColor.tooltip.custom.bullet1", "Text colour - Choose the colour for text elements"),
+          t("replaceColor.tooltip.custom.bullet2", "Background colour - Set the background colour for the document")
+        ]
+      }
+    ]
+  };
+};
--- a/frontend/src/components/tooltips/useScannerImageSplitTips.ts
+++ b/frontend/src/components/tooltips/useScannerImageSplitTips.ts
@@ -0,0 +1,54 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '../../types/tips';
+
+export const useScannerImageSplitTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t('scannerImageSplit.tooltip.title', 'Photo Splitter')
+    },
+    tips: [
+      {
+        title: t('scannerImageSplit.tooltip.whatThisDoes', 'What this does'),
+        description: t('scannerImageSplit.tooltip.whatThisDoesDesc',
+          'Automatically finds and extracts each photo from a scanned page or composite image—no manual cropping.'
+        )
+      },
+      {
+        title: t('scannerImageSplit.tooltip.whenToUse', 'When to use'),
+        bullets: [
+          t('scannerImageSplit.tooltip.useCase1', 'Scan whole album pages in one go'),
+          t('scannerImageSplit.tooltip.useCase2', 'Split flatbed batches into separate files'),
+          t('scannerImageSplit.tooltip.useCase3', 'Break collages into individual photos'),
+          t('scannerImageSplit.tooltip.useCase4', 'Pull photos from documents')
+        ]
+      },
+      {
+        title: t('scannerImageSplit.tooltip.quickFixes', 'Quick fixes'),
+        bullets: [
+          t('scannerImageSplit.tooltip.problem1', 'Photos not detected → increase Tolerance to 30–50'),
+          t('scannerImageSplit.tooltip.problem2', 'Too many false detections → increase Minimum Area to 15,000–20,000'),
+          t('scannerImageSplit.tooltip.problem3', 'Crops are too tight → increase Border Size to 5–10'),
+          t('scannerImageSplit.tooltip.problem4', 'Tilted photos not straightened → lower Angle Threshold to ~5°'),
+          t('scannerImageSplit.tooltip.problem5', 'Dust/noise boxes → increase Minimum Contour Area to 1000–2000')
+        ]
+      },
+      {
+        title: t('scannerImageSplit.tooltip.setupTips', 'Setup tips'),
+        bullets: [
+          t('scannerImageSplit.tooltip.tip1', 'Use a plain, light background'),
+          t('scannerImageSplit.tooltip.tip2', 'Leave a small gap (≈1 cm) between photos'),
+          t('scannerImageSplit.tooltip.tip3', 'Scan at 300–600 DPI'),
+          t('scannerImageSplit.tooltip.tip4', 'Clean the scanner glass')
+        ]
+      },
+      {
+        title: t('scannerImageSplit.tooltip.headsUp', 'Heads-up'),
+        description: t('scannerImageSplit.tooltip.headsUpDesc',
+          'Overlapping photos or backgrounds very close in colour to the photos can reduce accuracy—try a lighter or darker background and leave more space.'
+        )
+      }
+    ]
+  };
+};
--- a/frontend/src/components/viewer/LocalEmbedPDF.tsx
+++ b/frontend/src/components/viewer/LocalEmbedPDF.tsx
@@ -137,6 +137,7 @@ export function LocalEmbedPDF({ file, url, enableSignature = false, onSignatureA
      createPluginRegistration(RotatePluginPackage, {
        defaultRotation: Rotation.Degree0, // Start with no rotation
      }),
+
      // Register export plugin for downloading PDFs
      createPluginRegistration(ExportPluginPackage, {
        defaultFileName: 'document.pdf',