Undo Button -> review state. Result files added to recents (#4337)

Produced PDFs go into recent files Undo button added to review state Undo causes undoConsume which replaces result files with source files. Removes result files from recent files too --------- Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
2025-09-26 17:52:59 +02:00 · 2025-09-02 15:09:05 +01:00 · 2025-09-02 15:09:05 +01:00 · 1a3e8e7ecf
commit 1a3e8e7ecf
parent 96aa43860b
29 changed files with 440 additions and 96 deletions
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@ -13,9 +13,10 @@
      "Bash(npx tsc:*)",
      "Bash(node:*)",
      "Bash(npm run dev:*)",
-      "Bash(sed:*)"
+      "Bash(sed:*)",
+      "Bash(npm run typecheck:*)"
    ],
    "deny": [],
    "defaultMode": "acceptEdits"
  }
-}
+}
--- a/frontend/package.json
+++ b/frontend/package.json
@ -42,6 +42,7 @@
    "prebuild": "npm run generate-icons",
    "build": "npx tsc --noEmit && vite build",
    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
    "generate-licenses": "node scripts/generate-licenses.js",
    "generate-icons": "node scripts/generate-icons.js",
    "generate-icons:verbose": "node scripts/generate-icons.js --verbose",
--- a/frontend/public/locales/en-GB/translation.json
+++ b/frontend/public/locales/en-GB/translation.json
@ -41,6 +41,9 @@
  "save": "Save",
  "saveToBrowser": "Save to Browser",
  "download": "Download",
+  "undoOperationTooltip": "Click to undo the last operation and restore the original files",
+  "undo": "Undo",
+  "moreOptions": "More Options",
  "editYourNewFiles": "Edit your new file(s)",
  "close": "Close",
  "fileSelected": "Selected: {{filename}}",
@ -2382,4 +2385,4 @@
      "processImagesDesc": "Converts multiple image files into a single PDF document, then applies OCR technology to extract searchable text from the images."
    }
  }
-}
+}
--- a/frontend/src/components/tools/shared/ReviewToolStep.tsx
+++ b/frontend/src/components/tools/shared/ReviewToolStep.tsx
@ -1,27 +1,48 @@
-import React, { useEffect, useRef } from 'react';
-import { Button, Stack, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import DownloadIcon from '@mui/icons-material/Download';
-import ErrorNotification from './ErrorNotification';
-import ResultsPreview from './ResultsPreview';
-import { SuggestedToolsSection } from './SuggestedToolsSection';
-import { ToolOperationHook } from '../../../hooks/tools/shared/useToolOperation';
+import React, { useEffect, useRef, useState } from "react";
+import { Button, Group, Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import DownloadIcon from "@mui/icons-material/Download";
+import UndoIcon from "@mui/icons-material/Undo";
+import ErrorNotification from "./ErrorNotification";
+import ResultsPreview from "./ResultsPreview";
+import { SuggestedToolsSection } from "./SuggestedToolsSection";
+import { ToolOperationHook } from "../../../hooks/tools/shared/useToolOperation";
+import { Tooltip } from "../../shared/Tooltip";

 export interface ReviewToolStepProps<TParams = unknown> {
  isVisible: boolean;
  operation: ToolOperationHook<TParams>;
  title?: string;
  onFileClick?: (file: File) => void;
+  onUndo: () => void;
 }

-function ReviewStepContent<TParams = unknown>({ operation, onFileClick }: { operation: ToolOperationHook<TParams>; onFileClick?: (file: File) => void }) {
+function ReviewStepContent<TParams = unknown>({
+  operation,
+  onFileClick,
+  onUndo,
+}: {
+  operation: ToolOperationHook<TParams>;
+  onFileClick?: (file: File) => void;
+  onUndo: () => void;
+}) {
  const { t } = useTranslation();
  const stepRef = useRef<HTMLDivElement>(null);

-  const previewFiles = operation.files?.map((file, index) => ({
-    file,
-    thumbnail: operation.thumbnails[index]
-  })) || [];
+  const handleUndo = async () => {
+    try {
+      onUndo();
+    } catch (error) {
+      // Error is already handled by useToolOperation, just reset loading state
+      console.error("Undo operation failed:", error);
+    }
+  };
+
+  const previewFiles =
+    operation.files?.map((file, index) => ({
+      file,
+      thumbnail: operation.thumbnails[index],
+    })) || [];

  // Auto-scroll to bottom when content appears
  useEffect(() => {
@ -31,7 +52,7 @@ function ReviewStepContent<TParams = unknown>({ operation, onFileClick }: { oper
        setTimeout(() => {
          scrollableContainer.scrollTo({
            top: scrollableContainer.scrollHeight,
-            behavior: 'smooth'
+            behavior: "smooth",
          });
        }, 100); // Small delay to ensure content is rendered
      }
@ -40,10 +61,7 @@ function ReviewStepContent<TParams = unknown>({ operation, onFileClick }: { oper

  return (
    <Stack gap="sm" ref={stepRef}>
-      <ErrorNotification
-        error={operation.errorMessage}
-        onClose={operation.clearError}
-      />
+      <ErrorNotification error={operation.errorMessage} onClose={operation.clearError} />

      {previewFiles.length > 0 && (
        <ResultsPreview
@ -53,7 +71,18 @@ function ReviewStepContent<TParams = unknown>({ operation, onFileClick }: { oper
        />
      )}

-       {operation.downloadUrl && (
+      <Tooltip content={t("undoOperationTooltip", "Click to undo the last operation and restore the original files")}>
+        <Button
+          leftSection={<UndoIcon />}
+          variant="outline"
+          color="var(--mantine-color-gray-6)"
+          onClick={handleUndo}
+          fullWidth
+        >
+          {t("undo", "Undo")}
+        </Button>
+      </Tooltip>
+      {operation.downloadUrl && (
        <Button
          component="a"
          href={operation.downloadUrl}
@ -78,14 +107,13 @@ export function createReviewToolStep<TParams = unknown>(
 ): React.ReactElement {
  const { t } = useTranslation();

-  return createStep(t("review", "Review"), {
-    isVisible: props.isVisible,
-    _excludeFromCount: true,
-    _noPadding: true
-  }, (
-    <ReviewStepContent 
-      operation={props.operation} 
-      onFileClick={props.onFileClick}
-    />
-  ));
+  return createStep(
+    t("review", "Review"),
+    {
+      isVisible: props.isVisible,
+      _excludeFromCount: true,
+      _noPadding: true,
+    },
+    <ReviewStepContent operation={props.operation} onFileClick={props.onFileClick} onUndo={props.onUndo} />
+  );
 }
--- a/frontend/src/components/tools/shared/createToolFlow.tsx
+++ b/frontend/src/components/tools/shared/createToolFlow.tsx
@ -43,6 +43,7 @@ export interface ReviewStepConfig {
  operation: ToolOperationHook<any>;
  title: string;
  onFileClick?: (file: File) => void;
+  onUndo: () => void;
  testId?: string;
 }

@ -105,7 +106,8 @@ export function createToolFlow(config: ToolFlowConfig) {
          isVisible: config.review.isVisible,
          operation: config.review.operation,
          title: config.review.title,
-          onFileClick: config.review.onFileClick
+          onFileClick: config.review.onFileClick,
+          onUndo: config.review.onUndo
        })}
      </ToolStepProvider>
    </Stack>
--- a/frontend/src/contexts/FileContext.tsx
+++ b/frontend/src/contexts/FileContext.tsx
@ -25,7 +25,7 @@ import {
 // Import modular components
 import { fileContextReducer, initialFileContextState } from './file/FileReducer';
 import { createFileSelectors } from './file/fileSelectors';
-import { AddedFile, addFiles, consumeFiles, createFileActions } from './file/fileActions';
+import { AddedFile, addFiles, consumeFiles, undoConsumeFiles, createFileActions } from './file/fileActions';
 import { FileLifecycleManager } from './file/lifecycle';
 import { FileStateContext, FileActionsContext } from './file/contexts';
 import { IndexedDBProvider, useIndexedDB } from './IndexedDBContext';
@ -121,9 +121,13 @@ function FileContextInner({
  const baseActions = useMemo(() => createFileActions(dispatch), []);

  // Helper functions for pinned files
-  const consumeFilesWrapper = useCallback(async (inputFileIds: FileId[], outputFiles: File[]): Promise<void> => {
-    return consumeFiles(inputFileIds, outputFiles, stateRef, filesRef, dispatch);
-  }, []);
+  const consumeFilesWrapper = useCallback(async (inputFileIds: FileId[], outputFiles: File[]): Promise<FileId[]> => {
+    return consumeFiles(inputFileIds, outputFiles, stateRef, filesRef, dispatch, indexedDB);
+  }, [indexedDB]);
+
+  const undoConsumeFilesWrapper = useCallback(async (inputFiles: File[], inputFileRecords: FileRecord[], outputFileIds: FileId[]): Promise<void> => {
+    return undoConsumeFiles(inputFiles, inputFileRecords, outputFileIds, stateRef, filesRef, dispatch, indexedDB);
+  }, [indexedDB]);

  // Helper to find FileId from File object
  const findFileId = useCallback((file: File): FileId | undefined => {
@ -206,6 +210,7 @@ function FileContextInner({
    pinFile: pinFileWrapper,
    unpinFile: unpinFileWrapper,
    consumeFiles: consumeFilesWrapper,
+    undoConsumeFiles: undoConsumeFilesWrapper,
    setHasUnsavedChanges,
    trackBlobUrl: lifecycleManager.trackBlobUrl,
    cleanupFile: (fileId: FileId) => lifecycleManager.cleanupFile(fileId, stateRef),
@ -219,6 +224,7 @@ function FileContextInner({
    lifecycleManager,
    setHasUnsavedChanges,
    consumeFilesWrapper,
+    undoConsumeFilesWrapper,
    pinFileWrapper,
    unpinFileWrapper,
    indexedDB,
--- a/frontend/src/contexts/file/FileReducer.ts
+++ b/frontend/src/contexts/file/FileReducer.ts
@ -25,6 +25,47 @@ export const initialFileContextState: FileContextState = {
  }
 };

+// Helper function for consume/undo operations
+function processFileSwap(
+  state: FileContextState,
+  filesToRemove: FileId[],
+  filesToAdd: FileRecord[]
+): FileContextState {
+  // Only remove unpinned files
+  const unpinnedRemoveIds = filesToRemove.filter(id => !state.pinnedFiles.has(id));
+  const remainingIds = state.files.ids.filter(id => !unpinnedRemoveIds.includes(id));
+
+  // Remove unpinned files from state
+  const newById = { ...state.files.byId };
+  unpinnedRemoveIds.forEach(id => {
+    delete newById[id];
+  });
+
+  // Add new files
+  const addedIds: FileId[] = [];
+  filesToAdd.forEach(record => {
+    if (!newById[record.id]) {
+      addedIds.push(record.id);
+      newById[record.id] = record;
+    }
+  });
+
+  // Clear selections that reference removed files
+  const validSelectedFileIds = state.ui.selectedFileIds.filter(id => !unpinnedRemoveIds.includes(id));
+
+  return {
+    ...state,
+    files: {
+      ids: [...addedIds, ...remainingIds],
+      byId: newById
+    },
+    ui: {
+      ...state.ui,
+      selectedFileIds: validSelectedFileIds
+    }
+  };
+}
+
 // Pure reducer function
 export function fileContextReducer(state: FileContextState, action: FileContextAction): FileContextState {
  switch (action.type) {
@ -193,40 +234,12 @@ export function fileContextReducer(state: FileContextState, action: FileContextA

    case 'CONSUME_FILES': {
      const { inputFileIds, outputFileRecords } = action.payload;
+      return processFileSwap(state, inputFileIds, outputFileRecords);
+    }

-      // Only remove unpinned input files
-      const unpinnedInputIds = inputFileIds.filter(id => !state.pinnedFiles.has(id));
-      const remainingIds = state.files.ids.filter(id => !unpinnedInputIds.includes(id));
-
-      // Remove unpinned files from state
-      const newById = { ...state.files.byId };
-      unpinnedInputIds.forEach(id => {
-        delete newById[id];
-      });
-
-      // Add output files
-      const outputIds: FileId[] = [];
-      outputFileRecords.forEach(record => {
-        if (!newById[record.id]) {
-          outputIds.push(record.id);
-          newById[record.id] = record;
-        }
-      });
-
-      // Clear selections that reference removed files
-      const validSelectedFileIds = state.ui.selectedFileIds.filter(id => !unpinnedInputIds.includes(id));
-
-      return {
-        ...state,
-        files: {
-          ids: [...remainingIds, ...outputIds],
-          byId: newById
-        },
-        ui: {
-          ...state.ui,
-          selectedFileIds: validSelectedFileIds
-        }
-      };
+    case 'UNDO_CONSUME_FILES': {
+      const { inputFileRecords, outputFileIds } = action.payload;
+      return processFileSwap(state, outputFileIds, inputFileRecords);
    }

    case 'RESET_CONTEXT': {
--- a/frontend/src/contexts/file/fileActions.ts
+++ b/frontend/src/contexts/file/fileActions.ts
@ -323,34 +323,28 @@ export async function addFiles(
 }

 /**
- * Consume files helper - replace unpinned input files with output files
+ * Helper function to process files into records with thumbnails and metadata
 */
-export async function consumeFiles(
-  inputFileIds: FileId[],
-  outputFiles: File[],
-  stateRef: React.MutableRefObject<FileContextState>,
-  filesRef: React.MutableRefObject<Map<FileId, File>>,
-  dispatch: React.Dispatch<FileContextAction>
-): Promise<void> {
-  if (DEBUG) console.log(`📄 consumeFiles: Processing ${inputFileIds.length} input files, ${outputFiles.length} output files`);
-
-  // Process output files through the 'processed' path to generate thumbnails
-  const outputFileRecords = await Promise.all(
-    outputFiles.map(async (file) => {
+async function processFilesIntoRecords(
+  files: File[],
+  filesRef: React.MutableRefObject<Map<FileId, File>>
+): Promise<Array<{ record: FileRecord; file: File; fileId: FileId; thumbnail?: string }>> {
+  return Promise.all(
+    files.map(async (file) => {
      const fileId = createFileId();
      filesRef.current.set(fileId, file);

-      // Generate thumbnail and page count for output file
+      // Generate thumbnail and page count
      let thumbnail: string | undefined;
      let pageCount: number = 1;

      try {
-        if (DEBUG) console.log(`📄 consumeFiles: Generating thumbnail for output file ${file.name}`);
+        if (DEBUG) console.log(`📄 Generating thumbnail for file ${file.name}`);
        const result = await generateThumbnailWithMetadata(file);
        thumbnail = result.thumbnail;
        pageCount = result.pageCount;
      } catch (error) {
-        if (DEBUG) console.warn(`📄 consumeFiles: Failed to generate thumbnail for output file ${file.name}:`, error);
+        if (DEBUG) console.warn(`📄 Failed to generate thumbnail for file ${file.name}:`, error);
      }

      const record = toFileRecord(file, fileId);
@ -362,20 +356,168 @@ export async function consumeFiles(
        record.processedFile = createProcessedFile(pageCount, thumbnail);
      }

-      return record;
+      return { record, file, fileId, thumbnail };
    })
  );
+}
+
+/**
+ * Helper function to persist files to IndexedDB
+ */
+async function persistFilesToIndexedDB(
+  fileRecords: Array<{ file: File; fileId: FileId; thumbnail?: string }>,
+  indexedDB: { saveFile: (file: File, fileId: FileId, existingThumbnail?: string) => Promise<any> }
+): Promise<void> {
+  await Promise.all(fileRecords.map(async ({ file, fileId, thumbnail }) => {
+    try {
+      await indexedDB.saveFile(file, fileId, thumbnail);
+    } catch (error) {
+      console.error('Failed to persist file to IndexedDB:', file.name, error);
+    }
+  }));
+}
+
+/**
+ * Consume files helper - replace unpinned input files with output files
+ */
+export async function consumeFiles(
+  inputFileIds: FileId[],
+  outputFiles: File[],
+  stateRef: React.MutableRefObject<FileContextState>,
+  filesRef: React.MutableRefObject<Map<FileId, File>>,
+  dispatch: React.Dispatch<FileContextAction>,
+  indexedDB?: { saveFile: (file: File, fileId: FileId, existingThumbnail?: string) => Promise<any> } | null
+): Promise<FileId[]> {
+  if (DEBUG) console.log(`📄 consumeFiles: Processing ${inputFileIds.length} input files, ${outputFiles.length} output files`);
+
+  // Process output files with thumbnails and metadata
+  const outputFileRecords = await processFilesIntoRecords(outputFiles, filesRef);
+
+  // Persist output files to IndexedDB if available
+  if (indexedDB) {
+    await persistFilesToIndexedDB(outputFileRecords, indexedDB);
+  }

  // Dispatch the consume action
  dispatch({
    type: 'CONSUME_FILES',
    payload: {
      inputFileIds,
-      outputFileRecords
+      outputFileRecords: outputFileRecords.map(({ record }) => record)
    }
  });

  if (DEBUG) console.log(`📄 consumeFiles: Successfully consumed files - removed ${inputFileIds.length} inputs, added ${outputFileRecords.length} outputs`);
+  
+  // Return the output file IDs for undo tracking
+  return outputFileRecords.map(({ fileId }) => fileId);
+}
+
+/**
+ * Helper function to restore files to filesRef and manage IndexedDB cleanup
+ */
+async function restoreFilesAndCleanup(
+  filesToRestore: Array<{ file: File; record: FileRecord }>,
+  fileIdsToRemove: FileId[],
+  filesRef: React.MutableRefObject<Map<FileId, File>>,
+  indexedDB?: { deleteFile: (fileId: FileId) => Promise<void> } | null
+): Promise<void> {
+  // Remove files from filesRef
+  fileIdsToRemove.forEach(id => {
+    if (filesRef.current.has(id)) {
+      if (DEBUG) console.log(`📄 Removing file ${id} from filesRef`);
+      filesRef.current.delete(id);
+    } else {
+      if (DEBUG) console.warn(`📄 File ${id} not found in filesRef`);
+    }
+  });
+
+  // Restore files to filesRef
+  filesToRestore.forEach(({ file, record }) => {
+    if (file && record) {
+      // Validate the file before restoring
+      if (file.size === 0) {
+        if (DEBUG) console.warn(`📄 Skipping empty file ${file.name}`);
+        return;
+      }
+      
+      // Restore the file to filesRef
+      if (DEBUG) console.log(`📄 Restoring file ${file.name} with id ${record.id} to filesRef`);
+      filesRef.current.set(record.id, file);
+    }
+  });
+
+  // Clean up IndexedDB
+  if (indexedDB) {
+    const indexedDBPromises = fileIdsToRemove.map(fileId =>
+      indexedDB.deleteFile(fileId).catch(error => {
+        console.error('Failed to delete file from IndexedDB:', fileId, error);
+        throw error; // Re-throw to trigger rollback
+      })
+    );
+    
+    // Execute all IndexedDB operations
+    await Promise.all(indexedDBPromises);
+  }
+}
+
+/**
+ * Undoes a previous consumeFiles operation by restoring input files and removing output files (unless pinned)
+ */
+export async function undoConsumeFiles(
+  inputFiles: File[],
+  inputFileRecords: FileRecord[],
+  outputFileIds: FileId[],
+  stateRef: React.MutableRefObject<FileContextState>,
+  filesRef: React.MutableRefObject<Map<FileId, File>>,
+  dispatch: React.Dispatch<FileContextAction>,
+  indexedDB?: { saveFile: (file: File, fileId: FileId, existingThumbnail?: string) => Promise<any>; deleteFile: (fileId: FileId) => Promise<void> } | null
+): Promise<void> {
+  if (DEBUG) console.log(`📄 undoConsumeFiles: Restoring ${inputFileRecords.length} input files, removing ${outputFileIds.length} output files`);
+
+  // Validate inputs
+  if (inputFiles.length !== inputFileRecords.length) {
+    throw new Error(`Mismatch between input files (${inputFiles.length}) and records (${inputFileRecords.length})`);
+  }
+
+  // Create a backup of current filesRef state for rollback
+  const backupFilesRef = new Map(filesRef.current);
+  
+  try {
+    // Prepare files to restore
+    const filesToRestore = inputFiles.map((file, index) => ({
+      file,
+      record: inputFileRecords[index]
+    }));
+
+    // Restore input files and clean up output files
+    await restoreFilesAndCleanup(
+      filesToRestore,
+      outputFileIds,
+      filesRef,
+      indexedDB
+    );
+
+    // Dispatch the undo action (only if everything else succeeded)
+    dispatch({
+      type: 'UNDO_CONSUME_FILES',
+      payload: {
+        inputFileRecords,
+        outputFileIds
+      }
+    });
+
+    if (DEBUG) console.log(`📄 undoConsumeFiles: Successfully undone consume operation - restored ${inputFileRecords.length} inputs, removed ${outputFileIds.length} outputs`);
+    
+  } catch (error) {
+    // Rollback filesRef to previous state
+    if (DEBUG) console.error('📄 undoConsumeFiles: Error during undo, rolling back filesRef', error);
+    filesRef.current.clear();
+    backupFilesRef.forEach((file, id) => {
+      filesRef.current.set(id, file);
+    });
+    throw error; // Re-throw to let caller handle
+  }
 }

 /**
--- a/frontend/src/contexts/file/fileHooks.ts
+++ b/frontend/src/contexts/file/fileHooks.ts
@ -165,6 +165,7 @@ export function useFileContext() {
    // File management
    addFiles: actions.addFiles,
    consumeFiles: actions.consumeFiles,
+    undoConsumeFiles: actions.undoConsumeFiles,
    recordOperation: (fileId: FileId, operation: any) => {}, // Operation tracking not implemented
    markOperationApplied: (fileId: FileId, operationId: string) => {}, // Operation tracking not implemented
    markOperationFailed: (fileId: FileId, operationId: string, error: string) => {}, // Operation tracking not implemented
@ -187,7 +188,11 @@ export function useFileContext() {
    isFilePinned: selectors.isFilePinned,

    // Active files
-    activeFiles: selectors.getFiles()
+    activeFiles: selectors.getFiles(),
+
+    // Direct access to actions and selectors (for advanced use cases)
+    actions,
+    selectors
  }), [state, selectors, actions]);
 }

--- a/frontend/src/hooks/tools/addPassword/useAddPasswordOperation.test.ts
+++ b/frontend/src/hooks/tools/addPassword/useAddPasswordOperation.test.ts
@ -46,6 +46,7 @@ describe('useAddPasswordOperation', () => {
    resetResults: vi.fn(),
    clearError: vi.fn(),
    cancelOperation: vi.fn(),
+    undoOperation: vi.fn(),
  };

  beforeEach(() => {
--- a/frontend/src/hooks/tools/changePermissions/useChangePermissionsOperation.test.ts
+++ b/frontend/src/hooks/tools/changePermissions/useChangePermissionsOperation.test.ts
@ -45,6 +45,7 @@ describe('useChangePermissionsOperation', () => {
    resetResults: vi.fn(),
    clearError: vi.fn(),
    cancelOperation: vi.fn(),
+    undoOperation: vi.fn(),
  };

  beforeEach(() => {
--- a/frontend/src/hooks/tools/removePassword/useRemovePasswordOperation.test.ts
+++ b/frontend/src/hooks/tools/removePassword/useRemovePasswordOperation.test.ts
@ -44,6 +44,7 @@ describe('useRemovePasswordOperation', () => {
    resetResults: vi.fn(),
    clearError: vi.fn(),
    cancelOperation: vi.fn(),
+    undoOperation: vi.fn(),
  };

  beforeEach(() => {
--- a/frontend/src/hooks/tools/shared/useBaseTool.ts
+++ b/frontend/src/hooks/tools/shared/useBaseTool.ts
@ -21,6 +21,7 @@ interface BaseToolReturn<TParams> {
  handleExecute: () => Promise<void>;
  handleThumbnailClick: (file: File) => void;
  handleSettingsReset: () => void;
+  handleUndo: () => Promise<void>;

  // Standard computed state
  hasFiles: boolean;
@ -88,6 +89,11 @@ export function useBaseTool<TParams>(
    onPreviewFile?.(null);
  }, [operation, onPreviewFile]);

+  const handleUndo = useCallback(async () => {
+    await operation.undoOperation();
+    onPreviewFile?.(null);
+  }, [operation, onPreviewFile]);
+
  // Standard computed state
  const hasFiles = selectedFiles.length > 0;
  const hasResults = operation.files.length > 0 || operation.downloadUrl !== null;
@ -109,6 +115,7 @@ export function useBaseTool<TParams>(
    handleExecute,
    handleThumbnailClick,
    handleSettingsReset,
+    handleUndo,

    // State
    hasFiles,
--- a/frontend/src/hooks/tools/shared/useToolOperation.ts
+++ b/frontend/src/hooks/tools/shared/useToolOperation.ts
@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useRef, useEffect } from 'react';
 import axios from 'axios';
 import { useTranslation } from 'react-i18next';
 import { useFileContext } from '../../../contexts/FileContext';
@ -9,6 +9,7 @@ import { extractErrorMessage } from '../../../utils/toolErrorHandler';
 import { createOperation } from '../../../utils/toolOperationTracker';
 import { ResponseHandler } from '../../../utils/toolResponseProcessor';
 import { FileId } from '../../../types/file';
+import { FileRecord } from '../../../types/fileContext';

 // Re-export for backwards compatibility
 export type { ProcessingProgress, ResponseHandler };
@ -107,6 +108,7 @@ export interface ToolOperationHook<TParams = void> {
  resetResults: () => void;
  clearError: () => void;
  cancelOperation: () => void;
+  undoOperation: () => Promise<void>;
 }

 // Re-export for backwards compatibility
@ -128,13 +130,20 @@ export const useToolOperation = <TParams>(
  config: ToolOperationConfig<TParams>
 ): ToolOperationHook<TParams> => {
  const { t } = useTranslation();
-  const { recordOperation, markOperationApplied, markOperationFailed, addFiles, consumeFiles, findFileId } = useFileContext();
+  const { recordOperation, markOperationApplied, markOperationFailed, addFiles, consumeFiles, undoConsumeFiles, findFileId, actions: fileActions, selectors } = useFileContext();

  // Composed hooks
  const { state, actions } = useToolState();
  const { processFiles, cancelOperation: cancelApiCalls } = useToolApiCalls<TParams>();
  const { generateThumbnails, createDownloadInfo, cleanupBlobUrls, extractZipFiles, extractAllZipFiles } = useToolResources();

+  // Track last operation for undo functionality
+  const lastOperationRef = useRef<{
+    inputFiles: File[];
+    inputFileRecords: FileRecord[];
+    outputFileIds: FileId[];
+  } | null>(null);
+
  const executeOperation = useCallback(async (
    params: TParams,
    selectedFiles: File[]
@ -232,8 +241,33 @@ export const useToolOperation = <TParams>(
        actions.setDownloadInfo(downloadInfo.url, downloadInfo.filename);

        // Replace input files with processed files (consumeFiles handles pinning)
-        const inputFileIds = validFiles.map(file => findFileId(file)).filter(Boolean) as FileId[];
-        await consumeFiles(inputFileIds, processedFiles);
+        const inputFileIds: FileId[] = [];
+        const inputFileRecords: FileRecord[] = [];
+        
+        // Build parallel arrays of IDs and records for undo tracking
+        for (const file of validFiles) {
+          const fileId = findFileId(file);
+          if (fileId) {
+            const record = selectors.getFileRecord(fileId);
+            if (record) {
+              inputFileIds.push(fileId);
+              inputFileRecords.push(record);
+            } else {
+              console.warn(`No file record found for file: ${file.name}`);
+            }
+          } else {
+            console.warn(`No file ID found for file: ${file.name}`);
+          }
+        }
+        
+        const outputFileIds = await consumeFiles(inputFileIds, processedFiles);
+        
+        // Store operation data for undo (only store what we need to avoid memory bloat)
+        lastOperationRef.current = {
+          inputFiles: validFiles, // Keep original File objects for undo
+          inputFileRecords: inputFileRecords.map(record => ({ ...record })), // Deep copy to avoid reference issues
+          outputFileIds
+        };

        markOperationApplied(fileId, operationId);
      }
@ -259,8 +293,65 @@ export const useToolOperation = <TParams>(
  const resetResults = useCallback(() => {
    cleanupBlobUrls();
    actions.resetResults();
+    // Clear undo data when results are reset to prevent memory leaks
+    lastOperationRef.current = null;
  }, [cleanupBlobUrls, actions]);

+  // Cleanup on unmount to prevent memory leaks
+  useEffect(() => {
+    return () => {
+      lastOperationRef.current = null;
+    };
+  }, []);
+
+  const undoOperation = useCallback(async () => {
+    if (!lastOperationRef.current) {
+      actions.setError(t('noOperationToUndo', 'No operation to undo'));
+      return;
+    }
+
+    const { inputFiles, inputFileRecords, outputFileIds } = lastOperationRef.current;
+
+    // Validate that we have data to undo
+    if (inputFiles.length === 0 || inputFileRecords.length === 0) {
+      actions.setError(t('invalidUndoData', 'Cannot undo: invalid operation data'));
+      return;
+    }
+
+    if (outputFileIds.length === 0) {
+      actions.setError(t('noFilesToUndo', 'Cannot undo: no files were processed in the last operation'));
+      return;
+    }
+
+    try {
+      // Undo the consume operation
+      await undoConsumeFiles(inputFiles, inputFileRecords, outputFileIds);
+      
+      // Clear results and operation tracking
+      resetResults();
+      lastOperationRef.current = null;
+      
+      // Show success message
+      actions.setStatus(t('undoSuccess', 'Operation undone successfully'));
+      
+    } catch (error: any) {
+      let errorMessage = extractErrorMessage(error);
+      
+      // Provide more specific error messages based on error type
+      if (error.message?.includes('Mismatch between input files')) {
+        errorMessage = t('undoDataMismatch', 'Cannot undo: operation data is corrupted');
+      } else if (error.message?.includes('IndexedDB')) {
+        errorMessage = t('undoStorageError', 'Undo completed but some files could not be saved to storage');
+      } else if (error.name === 'QuotaExceededError') {
+        errorMessage = t('undoQuotaError', 'Cannot undo: insufficient storage space');
+      }
+      
+      actions.setError(`${t('undoFailed', 'Failed to undo operation')}: ${errorMessage}`);
+      
+      // Don't clear the operation data if undo failed - user might want to try again
+    }
+  }, [undoConsumeFiles, resetResults, actions, t]);
+
  return {
    // State
    files: state.files,
@ -277,6 +368,7 @@ export const useToolOperation = <TParams>(
    executeOperation,
    resetResults,
    clearError: actions.clearError,
-    cancelOperation
+    cancelOperation,
+    undoOperation
  };
 };
--- a/frontend/src/tools/AddPassword.tsx
+++ b/frontend/src/tools/AddPassword.tsx
@ -60,6 +60,11 @@ const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
    onPreviewFile?.(null);
  };

+  const handleUndo = async () => {
+    await addPasswordOperation.undoOperation();
+    onPreviewFile?.(null);
+  };
+
  const hasFiles = selectedFiles.length > 0;
  const hasResults = addPasswordOperation.files.length > 0 || addPasswordOperation.downloadUrl !== null;
  const passwordsCollapsed = !hasFiles || hasResults;
@ -110,6 +115,7 @@ const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
      operation: addPasswordOperation,
      title: t("addPassword.results.title", "Encrypted PDFs"),
      onFileClick: handleThumbnailClick,
+      onUndo: handleUndo,
    },
  });
 };
--- a/frontend/src/tools/AddWatermark.tsx
+++ b/frontend/src/tools/AddWatermark.tsx
@ -79,6 +79,11 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
    onPreviewFile?.(null);
  };

+  const handleUndo = async () => {
+    await watermarkOperation.undoOperation();
+    onPreviewFile?.(null);
+  };
+
  const hasFiles = selectedFiles.length > 0;
  const hasResults = watermarkOperation.files.length > 0 || watermarkOperation.downloadUrl !== null;

@ -203,6 +208,7 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
      operation: watermarkOperation,
      title: t("watermark.results.title", "Watermark Results"),
      onFileClick: handleThumbnailClick,
+      onUndo: handleUndo,
    },
    forceStepNumbers: true,
  });
--- a/frontend/src/tools/Automate.tsx
+++ b/frontend/src/tools/Automate.tsx
@ -43,6 +43,11 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
    setStepData({ step: AUTOMATION_STEPS.SELECTION });
  };

+  const handleUndo = async () => {
+    await automateOperation.undoOperation();
+    onPreviewFile?.(null);
+  };
+
  // Register reset function with the tool workflow context - only once on mount
  React.useEffect(() => {
    const stableResetFunction = () => {
@ -224,7 +229,8 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
      onFileClick: (file: File) => {
        onPreviewFile?.(file);
        actions.setWorkbench('viewer');
-      }
+      },
+      onUndo: handleUndo
    }
  });
 };
--- a/frontend/src/tools/ChangePermissions.tsx
+++ b/frontend/src/tools/ChangePermissions.tsx
@ -50,6 +50,7 @@ const ChangePermissions = (props: BaseToolProps) => {
      operation: base.operation,
      title: t("changePermissions.results.title", "Modified PDFs"),
      onFileClick: base.handleThumbnailClick,
+      onUndo: base.handleUndo,
    },
  });
 };
--- a/frontend/src/tools/Compress.tsx
+++ b/frontend/src/tools/Compress.tsx
@ -50,6 +50,7 @@ const Compress = (props: BaseToolProps) => {
      operation: base.operation,
      title: t("compress.title", "Compression Results"),
      onFileClick: base.handleThumbnailClick,
+      onUndo: base.handleUndo,
    },
  });
 };
--- a/frontend/src/tools/Convert.tsx
+++ b/frontend/src/tools/Convert.tsx
@ -93,6 +93,11 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
    onPreviewFile?.(null);
  };

+  const handleUndo = async () => {
+    await convertOperation.undoOperation();
+    onPreviewFile?.(null);
+  };
+
  return createToolFlow({
    files: {
      selectedFiles,
@ -128,6 +133,7 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
      operation: convertOperation,
      title: t("convert.conversionResults", "Conversion Results"),
      onFileClick: handleThumbnailClick,
+      onUndo: handleUndo,
      testId: "conversion-results",
    },
  });
--- a/frontend/src/tools/OCR.tsx
+++ b/frontend/src/tools/OCR.tsx
@ -74,6 +74,11 @@ const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
    onPreviewFile?.(null);
  };

+  const handleUndo = async () => {
+    await ocrOperation.undoOperation();
+    onPreviewFile?.(null);
+  };
+
  const settingsCollapsed = expandedStep !== "settings";

  return createToolFlow({
@ -132,6 +137,7 @@ const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
      operation: ocrOperation,
      title: t("ocr.results.title", "OCR Results"),
      onFileClick: handleThumbnailClick,
+      onUndo: handleUndo,
    },
  });
 };
--- a/frontend/src/tools/RemoveCertificateSign.tsx
+++ b/frontend/src/tools/RemoveCertificateSign.tsx
@ -34,6 +34,7 @@ const RemoveCertificateSign = (props: BaseToolProps) => {
      operation: base.operation,
      title: t("removeCertSign.results.title", "Certificate Removal Results"),
      onFileClick: base.handleThumbnailClick,
+      onUndo: base.handleUndo,
    },
  });
 };
--- a/frontend/src/tools/RemovePassword.tsx
+++ b/frontend/src/tools/RemovePassword.tsx
@ -50,6 +50,7 @@ const RemovePassword = (props: BaseToolProps) => {
      operation: base.operation,
      title: t("removePassword.results.title", "Decrypted PDFs"),
      onFileClick: base.handleThumbnailClick,
+      onUndo: base.handleUndo,
    },
  });
 };
--- a/frontend/src/tools/Repair.tsx
+++ b/frontend/src/tools/Repair.tsx
@ -34,6 +34,7 @@ const Repair = (props: BaseToolProps) => {
      operation: base.operation,
      title: t("repair.results.title", "Repair Results"),
      onFileClick: base.handleThumbnailClick,
+      onUndo: base.handleUndo,
    },
  });
 };
--- a/frontend/src/tools/Sanitize.tsx
+++ b/frontend/src/tools/Sanitize.tsx
@ -48,6 +48,7 @@ const Sanitize = (props: BaseToolProps) => {
      operation: base.operation,
      title: t("sanitize.sanitizationResults", "Sanitization Results"),
      onFileClick: base.handleThumbnailClick,
+      onUndo: base.handleUndo,
    },
  });
 };
--- a/frontend/src/tools/SingleLargePage.tsx
+++ b/frontend/src/tools/SingleLargePage.tsx
@ -34,6 +34,7 @@ const SingleLargePage = (props: BaseToolProps) => {
      operation: base.operation,
      title: t("pdfToSinglePage.results.title", "Single Page Results"),
      onFileClick: base.handleThumbnailClick,
+      onUndo: base.handleUndo,
    },
  });
 };
--- a/frontend/src/tools/Split.tsx
+++ b/frontend/src/tools/Split.tsx
@ -48,6 +48,7 @@ const Split = (props: BaseToolProps) => {
      operation: base.operation,
      title: "Split Results",
      onFileClick: base.handleThumbnailClick,
+      onUndo: base.handleUndo,
    },
  });
 };
--- a/frontend/src/tools/UnlockPdfForms.tsx
+++ b/frontend/src/tools/UnlockPdfForms.tsx
@ -34,6 +34,7 @@ const UnlockPdfForms = (props: BaseToolProps) => {
      operation: base.operation,
      title: t("unlockPDFForms.results.title", "Unlocked Forms Results"),
      onFileClick: base.handleThumbnailClick,
+      onUndo: base.handleUndo,
    },
  });
 };
--- a/frontend/src/types/fileContext.ts
+++ b/frontend/src/types/fileContext.ts
@ -199,6 +199,7 @@ export type FileContextAction =
  | { type: 'PIN_FILE'; payload: { fileId: FileId } }
  | { type: 'UNPIN_FILE'; payload: { fileId: FileId } }
  | { type: 'CONSUME_FILES'; payload: { inputFileIds: FileId[]; outputFileRecords: FileRecord[] } }
+  | { type: 'UNDO_CONSUME_FILES'; payload: { inputFileRecords: FileRecord[]; outputFileIds: FileId[] } }

  // UI actions
  | { type: 'SET_SELECTED_FILES'; payload: { fileIds: FileId[] } }
@ -228,7 +229,8 @@ export interface FileContextActions {
  unpinFile: (file: File) => void;

  // File consumption (replace unpinned files with outputs)
-  consumeFiles: (inputFileIds: FileId[], outputFiles: File[]) => Promise<void>;
+  consumeFiles: (inputFileIds: FileId[], outputFiles: File[]) => Promise<FileId[]>;
+  undoConsumeFiles: (inputFiles: File[], inputFileRecords: FileRecord[], outputFileIds: FileId[]) => Promise<void>;
  // Selection management
  setSelectedFiles: (fileIds: FileId[]) => void;
  setSelectedPages: (pageNumbers: number[]) => void;