V2 results flow (#4196)

Better tool flow for reusability
Pinning 
Styling of tool flow
consumption of files after tooling

---------

Co-authored-by: Connor Yoh <[email protected]>
Co-authored-by: James Brunton <[email protected]>

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

@@ -37,8 +37,7 @@ function stripExt(name: string): string {
   return i > 0 ? name.slice(0, i) : name;
 }
 
-// Signature must be (file, params)
-const buildFormData = (file: File, parameters: OCRParameters): FormData => {
+const buildFormData = (parameters: OCRParameters, file: File): FormData => {
   const formData = new FormData();
   formData.append('fileInput', file);
   parameters.languages.forEach((lang) => formData.append('languages', lang));
@@ -99,7 +98,7 @@ export const useOCROperation = () => {
   const ocrConfig: ToolOperationConfig<OCRParameters> = {
     operationType: 'ocr',
     endpoint: '/api/v1/misc/ocr-pdf',
-    buildFormData: buildFormData as any /* FIX ME */,
+    buildFormData,
     filePrefix: 'ocr_',
     multiFileEndpoint: false, // Process files individually
     responseHandler, // use shared flow

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

@@ -5,7 +5,7 @@ import type { ProcessingProgress } from './useToolState';
 
 export interface ApiCallsConfig<TParams = void> {
   endpoint: string | ((params: TParams) => string);
-  buildFormData: (file: File, params: TParams) => FormData;
+  buildFormData: (params: TParams, file: File) => FormData;
   filePrefix: string;
   responseHandler?: ResponseHandler;
 }
@@ -34,7 +34,7 @@ export const useToolApiCalls = <TParams = void>() => {
       onStatus(`Processing ${file.name} (${i + 1}/${total})`);
 
       try {
-        const formData = config.buildFormData(file, params);
+        const formData = config.buildFormData(params, file);
         const endpoint = typeof config.endpoint === 'function' ? config.endpoint(params) : config.endpoint;
         const response = await axios.post(endpoint, formData, {
           responseType: 'blob',

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

@@ -104,7 +104,7 @@ export const useToolOperation = <TParams = void>(
   config: ToolOperationConfig<TParams>
 ): ToolOperationHook<TParams> => {
   const { t } = useTranslation();
-  const { recordOperation, markOperationApplied, markOperationFailed, addFiles } = useFileContext();
+  const { recordOperation, markOperationApplied, markOperationFailed, addFiles, consumeFiles } = useFileContext();
 
   // Composed hooks
   const { state, actions } = useToolState();
@@ -170,7 +170,7 @@ export const useToolOperation = <TParams = void>(
           // Individual file processing - separate API call per file
           const apiCallsConfig: ApiCallsConfig<TParams> = {
             endpoint: config.endpoint,
-            buildFormData: (file: File, params: TParams) => (config.buildFormData as (params: TParams, file: File) => FormData /* FIX ME */)(params, file),
+            buildFormData: config.buildFormData as (params: TParams, file: File) => FormData,
             filePrefix: config.filePrefix,
             responseHandler: config.responseHandler
           };
@@ -198,8 +198,8 @@ export const useToolOperation = <TParams = void>(
         actions.setThumbnails(thumbnails);
         actions.setDownloadInfo(downloadInfo.url, downloadInfo.filename);
 
-        // Add to file context
-        await addFiles(processedFiles);
+        // Consume input files and add output files (will replace unpinned inputs)
+        await consumeFiles(validFiles, processedFiles);
 
         markOperationApplied(fileId, operationId);
       }

frontend/src/hooks/useSuggestedTools.ts

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { useToolWorkflow } from '../contexts/ToolWorkflowContext';
+
+// Material UI Icons
+import CompressIcon from '@mui/icons-material/Compress';
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
+import CleaningServicesIcon from '@mui/icons-material/CleaningServices';
+import CropIcon from '@mui/icons-material/Crop';
+import TextFieldsIcon from '@mui/icons-material/TextFields';
+
+export interface SuggestedTool {
+  name: string;
+  title: string;
+  icon: React.ComponentType<any>;
+  navigate: () => void;
+}
+
+const ALL_SUGGESTED_TOOLS: Omit<SuggestedTool, 'navigate'>[] = [
+  {
+    name: 'compress',
+    title: 'Compress',
+    icon: CompressIcon
+  },
+  {
+    name: 'convert',
+    title: 'Convert',
+    icon: SwapHorizIcon
+  },
+  {
+    name: 'sanitize',
+    title: 'Sanitize',
+    icon: CleaningServicesIcon
+  },
+  {
+    name: 'split',
+    title: 'Split',
+    icon: CropIcon
+  },
+  {
+    name: 'ocr',
+    title: 'OCR',
+    icon: TextFieldsIcon
+  }
+];
+
+export function useSuggestedTools(): SuggestedTool[] {
+  const { handleToolSelect, selectedToolKey } = useToolWorkflow();
+
+  return useMemo(() => {
+    // Filter out the current tool
+    const filteredTools = ALL_SUGGESTED_TOOLS.filter(tool => tool.name !== selectedToolKey);
+    
+    // Add navigation function to each tool
+    return filteredTools.map(tool => ({
+      ...tool,
+      navigate: () => handleToolSelect(tool.name)
+    }));
+  }, [selectedToolKey, handleToolSelect]);
+}