From 47ccb6a6ed10ab0b39c4d72987f22ee029afd39b Mon Sep 17 00:00:00 2001
From: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com>
Date: Tue, 26 Aug 2025 16:59:03 +0100
Subject: [PATCH] improvement/v2/automate/tweaks (#4293)

- [x] Cleanup Automation output name garbage
- [x] Remove Cross button on first two tools
- [x] Automation creation name title to make clearer to the user
- [x] Colours for dark mode on automation tool settings are bad
- [x] Fix tool names not using correct translated ones
- [x] suggested Automation Password needs adding to description
- [x] Allow different filetypes in automation
- [x] Custom Icons for automation
- [x] split Tool wasn't working with merge to single pdf

---------

Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
Co-authored-by: James Brunton <jbrunton96@gmail.com>
---
 .../public/locales/en-GB/translation.json     |  15 ++-
 .../public/locales/en-US/translation.json     |   4 +-
 .../components/shared/FileUploadButton.tsx    |   3 +-
 .../src/components/shared/QuickAccessBar.tsx  |   9 +-
 .../addWatermark/WatermarkTypeSettings.tsx    |   4 +-
 .../tools/automate/AutomationCreation.tsx     |  45 +++++--
 .../tools/automate/AutomationEntry.tsx        |  44 +++++--
 .../tools/automate/AutomationSelection.tsx    |  37 ++++--
 .../tools/automate/IconSelector.tsx           | 116 ++++++++++++++++++
 .../components/tools/automate/ToolList.tsx    |  34 ++---
 .../src/components/tools/automate/iconMap.ts  |  92 ++++++++++++++
 .../tools/compress/CompressSettings.tsx       |   4 +-
 frontend/src/contexts/ToolWorkflowContext.tsx |  67 +++++-----
 .../src/data/useTranslatedToolRegistry.tsx    |  41 ++++---
 .../tools/automate/useAutomateOperation.ts    |   2 +-
 .../hooks/tools/automate/useAutomationForm.ts |   8 ++
 .../tools/automate/useSavedAutomations.ts     |  17 +++
 .../tools/automate/useSuggestedAutomations.ts |   2 +-
 .../hooks/tools/shared/useToolOperation.ts    |   8 +-
 frontend/src/theme/mantineTheme.ts            |  43 ++++++-
 frontend/src/tools/Automate.tsx               |  43 ++++++-
 frontend/src/tools/Split.tsx                  |  13 +-
 frontend/src/types/automation.ts              |   1 +
 frontend/src/utils/automationExecutor.ts      |  54 ++++++--
 frontend/src/utils/fileResponseUtils.ts       |  10 +-
 25 files changed, 582 insertions(+), 134 deletions(-)
 create mode 100644 frontend/src/components/tools/automate/IconSelector.tsx
 create mode 100644 frontend/src/components/tools/automate/iconMap.ts

diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json
index e32579891..7fa1036db 100644
--- a/frontend/public/locales/en-GB/translation.json
+++ b/frontend/public/locales/en-GB/translation.json
@@ -51,7 +51,6 @@
     "placeholder": "Select a PDF file in the main view to get started",
     "upload": "Upload",
     "addFiles": "Add files",
-    "noFiles": "No files uploaded. ",
     "selectFromWorkbench": "Select files from the workbench or "
   },
   "noFavourites": "No favourites added",
@@ -2320,9 +2319,14 @@
     "creation": {
       "createTitle": "Create Automation",
       "editTitle": "Edit Automation",
-      "description": "Automations run tools sequentially. To get started, add tools in the order you want them to run.",
+      "intro": "Automations run tools sequentially. To get started, add tools in the order you want them to run.",
       "name": {
-        "placeholder": "Automation name"
+        "label": "Automation Name",
+        "placeholder": "My Automation"
+      },
+      "description": {
+        "label": "Description (optional)",
+        "placeholder": "Describe what this automation does..."
       },
       "tools": {
         "selectTool": "Select a tool...",
@@ -2339,6 +2343,9 @@
         "message": "You have unsaved changes. Are you sure you want to go back? All changes will be lost.",
         "cancel": "Cancel",
         "confirm": "Go Back"
+      },
+      "icon": {
+        "label": "Icon"
       }
     },
     "run": {
@@ -2369,7 +2376,7 @@
       "emailPreparation": "Email Preparation",
       "emailPreparationDesc": "Optimises PDFs for email distribution by compressing files, splitting large documents into 20MB chunks for email compatibility, and removing metadata for privacy.",
       "secureWorkflow": "Security Workflow",
-      "secureWorkflowDesc": "Secures PDF documents by removing potentially malicious content like JavaScript and embedded files, then adds password protection to prevent unauthorised access.",
+      "secureWorkflowDesc": "Secures PDF documents by removing potentially malicious content like JavaScript and embedded files, then adds password protection to prevent unauthorised access. Password is set to 'password' by default.",
       "processImages": "Process Images",
       "processImagesDesc": "Converts multiple image files into a single PDF document, then applies OCR technology to extract searchable text from the images."
     }
diff --git a/frontend/public/locales/en-US/translation.json b/frontend/public/locales/en-US/translation.json
index ab5b66802..b0a19539a 100644
--- a/frontend/public/locales/en-US/translation.json
+++ b/frontend/public/locales/en-US/translation.json
@@ -2111,10 +2111,10 @@
     "suggested": {
       "securePdfIngestion": "Secure PDF Ingestion",
       "securePdfIngestionDesc": "Comprehensive PDF processing workflow that sanitizes documents, applies OCR with cleanup, converts to PDF/A format for long-term archival, and optimizes file size.",
-      "emailPreparation": "Email Preparation", 
+      "emailPreparation": "Email Preparation",
       "emailPreparationDesc": "Optimizes PDFs for email distribution by compressing files, splitting large documents into 20MB chunks for email compatibility, and removing metadata for privacy.",
       "secureWorkflow": "Security Workflow",
-      "secureWorkflowDesc": "Secures PDF documents by removing potentially malicious content like JavaScript and embedded files, then adds password protection to prevent unauthorized access.",
+      "secureWorkflowDesc": "Secures PDF documents by removing potentially malicious content like JavaScript and embedded files, then adds password protection to prevent unauthorized access. Password is set to 'password' by default.",
       "processImages": "Process Images",
       "processImagesDesc": "Converts multiple image files into a single PDF document, then applies OCR technology to extract searchable text from the images."
     }
diff --git a/frontend/src/components/shared/FileUploadButton.tsx b/frontend/src/components/shared/FileUploadButton.tsx
index 27f58400f..434aad1b4 100644
--- a/frontend/src/components/shared/FileUploadButton.tsx
+++ b/frontend/src/components/shared/FileUploadButton.tsx
@@ -32,9 +32,10 @@ const FileUploadButton = ({
       onChange={onChange}
       accept={accept}
       disabled={disabled}
+
     >
       {(props) => (
-        <Button {...props} variant={variant} fullWidth={fullWidth}>
+        <Button {...props} variant={variant} fullWidth={fullWidth} color="blue">
           {file ? file.name : (placeholder || defaultPlaceholder)}
         </Button>
       )}
diff --git a/frontend/src/components/shared/QuickAccessBar.tsx b/frontend/src/components/shared/QuickAccessBar.tsx
index ad91b2ac2..fc4301181 100644
--- a/frontend/src/components/shared/QuickAccessBar.tsx
+++ b/frontend/src/components/shared/QuickAccessBar.tsx
@@ -22,7 +22,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
   const { t } = useTranslation();
   const { isRainbowMode } = useRainbowThemeContext();
   const { openFilesModal, isFilesModalOpen } = useFilesModalContext();
-  const { handleReaderToggle, handleBackToTools, handleToolSelect, selectedToolKey, leftPanelView, toolRegistry, readerMode } = useToolWorkflow();
+  const { handleReaderToggle, handleBackToTools, handleToolSelect, selectedToolKey, leftPanelView, toolRegistry, readerMode, resetTool } = useToolWorkflow();
   const [configModalOpen, setConfigModalOpen] = useState(false);
   const [activeButton, setActiveButton] = useState<string>('tools');
   const scrollableRef = useRef<HTMLDivElement>(null);
@@ -74,7 +74,12 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
       type: 'navigation',
       onClick: () => {
         setActiveButton('automate');
-        handleToolSelect('automate');
+        // If already on automate tool, reset it directly
+        if (selectedToolKey === 'automate') {
+          resetTool('automate');
+        } else {
+          handleToolSelect('automate');
+        }
       }
     },
     {
diff --git a/frontend/src/components/tools/addWatermark/WatermarkTypeSettings.tsx b/frontend/src/components/tools/addWatermark/WatermarkTypeSettings.tsx
index f97454c5c..84bbb296a 100644
--- a/frontend/src/components/tools/addWatermark/WatermarkTypeSettings.tsx
+++ b/frontend/src/components/tools/addWatermark/WatermarkTypeSettings.tsx
@@ -16,7 +16,7 @@ const WatermarkTypeSettings = ({ watermarkType, onWatermarkTypeChange, disabled
       <div style={{ display: 'flex', gap: '4px' }}>
         <Button
           variant={watermarkType === 'text' ? 'filled' : 'outline'}
-          color={watermarkType === 'text' ? 'blue' : 'gray'}
+          color={watermarkType === 'text' ? 'blue' : 'var(--text-muted)'}
           onClick={() => onWatermarkTypeChange('text')}
           disabled={disabled}
           style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
@@ -27,7 +27,7 @@ const WatermarkTypeSettings = ({ watermarkType, onWatermarkTypeChange, disabled
         </Button>
         <Button
           variant={watermarkType === 'image' ? 'filled' : 'outline'}
-          color={watermarkType === 'image' ? 'blue' : 'gray'}
+          color={watermarkType === 'image' ? 'blue' : 'var(--text-muted)'}
           onClick={() => onWatermarkTypeChange('image')}
           disabled={disabled}
           style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
diff --git a/frontend/src/components/tools/automate/AutomationCreation.tsx b/frontend/src/components/tools/automate/AutomationCreation.tsx
index ee301ae8e..49e9f6f1b 100644
--- a/frontend/src/components/tools/automate/AutomationCreation.tsx
+++ b/frontend/src/components/tools/automate/AutomationCreation.tsx
@@ -6,6 +6,7 @@ import {
   Stack,
   Group,
   TextInput,
+  Textarea,
   Divider,
   Modal
 } from '@mantine/core';
@@ -13,6 +14,7 @@ import CheckIcon from '@mui/icons-material/Check';
 import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
 import ToolConfigurationModal from './ToolConfigurationModal';
 import ToolList from './ToolList';
+import IconSelector from './IconSelector';
 import { AutomationConfig, AutomationMode, AutomationTool } from '../../../types/automation';
 import { useAutomationForm } from '../../../hooks/tools/automate/useAutomationForm';
 
@@ -31,6 +33,10 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
   const {
     automationName,
     setAutomationName,
+    automationDescription,
+    setAutomationDescription,
+    automationIcon,
+    setAutomationIcon,
     selectedTools,
     addTool,
     removeTool,
@@ -100,7 +106,8 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
 
     const automationData = {
       name: automationName.trim(),
-      description: '',
+      description: automationDescription.trim(),
+      icon: automationIcon,
       operations: selectedTools.map(tool => ({
         operation: tool.operation,
         parameters: tool.parameters || {}
@@ -114,7 +121,7 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
       if (mode === AutomationMode.EDIT && existingAutomation) {
         // For edit mode, check if name has changed
         const nameChanged = automationName.trim() !== existingAutomation.name;
-        
+
         if (nameChanged) {
           // Name changed - create new automation
           savedAutomation = await automationStorage.saveAutomation(automationData);
@@ -144,17 +151,39 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
   return (
     <div>
         <Text size="sm" mb="md" p="md"  style={{borderRadius:'var(--mantine-radius-md)', background: 'var(--color-gray-200)', color: 'var(--mantine-color-text)' }}>
-        {t("automate.creation.description", "Automations run tools sequentially. To get started, add tools in the order you want them to run.")}
+            {t("automate.creation.intro", "Automations run tools sequentially. To get started, add tools in the order you want them to run.")}
         </Text>
       <Divider mb="md" />
 
       <Stack gap="md">
-        {/* Automation Name */}
-        <TextInput
-          placeholder={t('automate.creation.name.placeholder', 'Automation name')}
-          value={automationName}
-          onChange={(e) => setAutomationName(e.currentTarget.value)}
+        {/* Automation Name and Icon */}
+        <Group gap="xs" align="flex-end">
+          <Stack gap="xs" style={{ flex: 1 }}>
+            <TextInput
+              placeholder={t('automate.creation.name.placeholder', 'My Automation')}
+              value={automationName}
+              withAsterisk
+              label={t('automate.creation.name.label', 'Automation Name')}
+              onChange={(e) => setAutomationName(e.currentTarget.value)}
+              size="sm"
+            />
+          </Stack>
+
+          <IconSelector
+            value={automationIcon || 'SettingsIcon'}
+            onChange={setAutomationIcon}
+            size="sm"
+          />
+        </Group>
+
+        {/* Automation Description */}
+        <Textarea
+          placeholder={t('automate.creation.description.placeholder', 'Describe what this automation does...')}
+          value={automationDescription}
+          label={t('automate.creation.description.label', 'Description')}
+          onChange={(e) => setAutomationDescription(e.currentTarget.value)}
           size="sm"
+          rows={3}
         />
 
 
diff --git a/frontend/src/components/tools/automate/AutomationEntry.tsx b/frontend/src/components/tools/automate/AutomationEntry.tsx
index 8c07fb14b..7a33bd65e 100644
--- a/frontend/src/components/tools/automate/AutomationEntry.tsx
+++ b/frontend/src/components/tools/automate/AutomationEntry.tsx
@@ -6,6 +6,7 @@ import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { Tooltip } from '../../shared/Tooltip';
+import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
 
 interface AutomationEntryProps {
   /** Optional title for the automation (usually for custom ones) */
@@ -28,6 +29,8 @@ interface AutomationEntryProps {
   onDelete?: () => void;
   /** Copy handler (for suggested automations) */
   onCopy?: () => void;
+  /** Tool registry to resolve operation names */
+  toolRegistry?: Record<string, ToolRegistryEntry>;
 }
 
 export default function AutomationEntry({
@@ -40,7 +43,8 @@ export default function AutomationEntry({
   showMenu = false,
   onEdit,
   onDelete,
-  onCopy
+  onCopy,
+  toolRegistry
 }: AutomationEntryProps) {
   const { t } = useTranslation();
   const [isHovered, setIsHovered] = useState(false);
@@ -49,9 +53,19 @@ export default function AutomationEntry({
   // Keep item in hovered state if menu is open
   const shouldShowHovered = isHovered || isMenuOpen;
 
+  // Helper function to resolve tool display names
+  const getToolDisplayName = (operation: string): string => {
+    if (toolRegistry?.[operation]?.name) {
+      return toolRegistry[operation].name;
+    }
+    // Fallback to translation or operation key
+    return t(`${operation}.title`, operation);
+  };
+
   // Create tooltip content with description and tool chain
   const createTooltipContent = () => {
-    if (!description) return null;
+    // Show tooltip if there's a description OR if there are operations to show in the chain
+    if (!description && operations.length === 0) return null;
 
     const toolChain = operations.map((op, index) => (
       <React.Fragment key={`${op}-${index}`}>
@@ -68,7 +82,7 @@ export default function AutomationEntry({
             whiteSpace: 'nowrap'
           }}
         >
-          {t(`${op}.title`, op)}
+          {getToolDisplayName(op)}
         </Text>
         {index < operations.length - 1 && (
           <Text component="span" size="sm" mx={4}>
@@ -80,12 +94,16 @@ export default function AutomationEntry({
 
     return (
       <div style={{ minWidth: '400px', width: 'auto' }}>
-        <Text size="sm" mb={8} style={{ whiteSpace: 'normal', wordWrap: 'break-word' }}>
-          {description}
-        </Text>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '4px', whiteSpace: 'nowrap' }}>
-          {toolChain}
-        </div>
+        {description && (
+          <Text size="sm" mb={8} style={{ whiteSpace: 'normal', wordWrap: 'break-word' }}>
+            {description}
+          </Text>
+        )}
+        {operations.length > 0 && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: '4px', whiteSpace: 'nowrap' }}>
+            {toolChain}
+          </div>
+        )}
       </div>
     );
   };
@@ -122,7 +140,7 @@ export default function AutomationEntry({
             {operations.map((op, index) => (
               <React.Fragment key={`${op}-${index}`}>
                 <Text size="xs" style={{ color: 'var(--mantine-color-text)' }}>
-                  {t(`${op}.title`, op)}
+                  {getToolDisplayName(op)}
                 </Text>
 
                 {index < operations.length - 1 && (
@@ -221,8 +239,10 @@ export default function AutomationEntry({
     </Box>
   );
 
-  // Only show tooltip if description exists, otherwise return plain content
-  return description ? (
+  // Show tooltip if there's a description OR operations to display
+  const shouldShowTooltip = description || operations.length > 0;
+  
+  return shouldShowTooltip ? (
     <Tooltip 
       content={createTooltipContent()} 
       position="right" 
diff --git a/frontend/src/components/tools/automate/AutomationSelection.tsx b/frontend/src/components/tools/automate/AutomationSelection.tsx
index 197a96b3e..7898dd864 100644
--- a/frontend/src/components/tools/automate/AutomationSelection.tsx
+++ b/frontend/src/components/tools/automate/AutomationSelection.tsx
@@ -6,6 +6,8 @@ import SettingsIcon from "@mui/icons-material/Settings";
 import AutomationEntry from "./AutomationEntry";
 import { useSuggestedAutomations } from "../../../hooks/tools/automate/useSuggestedAutomations";
 import { AutomationConfig, SuggestedAutomation } from "../../../types/automation";
+import { iconMap } from './iconMap';
+import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
 
 interface AutomationSelectionProps {
   savedAutomations: AutomationConfig[];
@@ -14,6 +16,7 @@ interface AutomationSelectionProps {
   onEdit: (automation: AutomationConfig) => void;
   onDelete: (automation: AutomationConfig) => void;
   onCopyFromSuggested: (automation: SuggestedAutomation) => void;
+  toolRegistry: Record<string, ToolRegistryEntry>;
 }
 
 export default function AutomationSelection({ 
@@ -22,7 +25,8 @@ export default function AutomationSelection({
   onRun, 
   onEdit, 
   onDelete,
-  onCopyFromSuggested
+  onCopyFromSuggested,
+  toolRegistry
 }: AutomationSelectionProps) {
   const { t } = useTranslation();
   const suggestedAutomations = useSuggestedAutomations();
@@ -40,20 +44,26 @@ export default function AutomationSelection({
         operations={[]}
         onClick={onCreateNew}
         keepIconColor={true}
+        toolRegistry={toolRegistry}
       />
       {/* Saved Automations */}
-      {savedAutomations.map((automation) => (
-        <AutomationEntry
-          key={automation.id}
-          title={automation.name}
-          badgeIcon={SettingsIcon}
-          operations={automation.operations.map(op => typeof op === 'string' ? op : op.operation)}
-          onClick={() => onRun(automation)}
-          showMenu={true}
-          onEdit={() => onEdit(automation)}
-          onDelete={() => onDelete(automation)}
-        />
-      ))}
+      {savedAutomations.map((automation) => {
+        const IconComponent = automation.icon ? iconMap[automation.icon as keyof typeof iconMap] : SettingsIcon;
+        return (
+          <AutomationEntry
+            key={automation.id}
+            title={automation.name}
+            description={automation.description}
+            badgeIcon={IconComponent || SettingsIcon}
+            operations={automation.operations.map(op => typeof op === 'string' ? op : op.operation)}
+            onClick={() => onRun(automation)}
+            showMenu={true}
+            onEdit={() => onEdit(automation)}
+            onDelete={() => onDelete(automation)}
+            toolRegistry={toolRegistry}
+          />
+        );
+      })}
       <Divider pb='sm' />
 
       {/* Suggested Automations */}
@@ -72,6 +82,7 @@ export default function AutomationSelection({
               onClick={() => onRun(automation)}
               showMenu={true}
               onCopy={() => onCopyFromSuggested(automation)}
+              toolRegistry={toolRegistry}
             />
           ))}
         </Stack>
diff --git a/frontend/src/components/tools/automate/IconSelector.tsx b/frontend/src/components/tools/automate/IconSelector.tsx
new file mode 100644
index 000000000..9294d5635
--- /dev/null
+++ b/frontend/src/components/tools/automate/IconSelector.tsx
@@ -0,0 +1,116 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Box, Text, Stack, Button, SimpleGrid, Tooltip, Popover } from "@mantine/core";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { iconMap, iconOptions } from './iconMap';
+
+interface IconSelectorProps {
+  value?: string;
+  onChange?: (iconKey: string) => void;
+  size?: "sm" | "md" | "lg";
+}
+
+export default function IconSelector({ value = "SettingsIcon", onChange, size = "sm" }: IconSelectorProps) {
+  const { t } = useTranslation();
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const selectedIconComponent = iconMap[value as keyof typeof iconMap] || iconMap.SettingsIcon;
+
+  const handleIconSelect = (iconKey: string) => {
+    onChange?.(iconKey);
+    setIsDropdownOpen(false);
+  };
+
+  const iconSize = size === "sm" ? 16 : size === "md" ? 18 : 20;
+
+  return (
+    <Stack gap="1px">
+      <Text size="sm" fw={600} style={{ color: "var(--mantine-color-primary)" }}>
+        {t("automate.creation.icon.label", "Icon")}
+      </Text>
+
+      <Popover
+        opened={isDropdownOpen}
+        onClose={() => setIsDropdownOpen(false)}
+        onDismiss={() => setIsDropdownOpen(false)}
+        position="bottom-start"
+        withArrow
+        trapFocus
+      >
+        <Popover.Target>
+          <Button
+            variant="outline"
+            size={size}
+            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+            style={{
+              width: size === "sm" ? "3.75rem" : "4.375rem",
+              position: "relative",
+              display: "flex",
+              justifyContent: "flex-start",
+              paddingLeft: "0.5rem",
+              borderColor: "var(--mantine-color-gray-3)",
+              color: "var(--mantine-color-text)",
+
+            }}
+          >
+            {React.createElement(selectedIconComponent, { style: { fontSize: iconSize } })}
+            <KeyboardArrowDownIcon
+              style={{
+                fontSize: iconSize * 0.8,
+                position: "absolute",
+                right: "0.25rem",
+                top: "50%",
+                transform: "translateY(-50%)",
+              }}
+            />
+          </Button>
+        </Popover.Target>
+
+        <Popover.Dropdown>
+          <Stack gap="xs">
+            <SimpleGrid cols={4} spacing="xs">
+              {iconOptions.map((option) => {
+                const IconComponent = iconMap[option.value as keyof typeof iconMap];
+                const isSelected = value === option.value;
+
+                return (
+                  <Tooltip key={option.value} label={option.label}>
+                    <Box
+                      onClick={() => handleIconSelect(option.value)}
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        padding: "0.5rem",
+                        borderRadius: "0.25rem",
+                        cursor: "pointer",
+                        backgroundColor: isSelected ? "var(--mantine-color-gray-1)" : "transparent",
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!isSelected) {
+                          e.currentTarget.style.backgroundColor = "var(--mantine-color-gray-0)";
+                        }
+                      }}
+                      onMouseLeave={(e) => {
+                        if (!isSelected) {
+                          e.currentTarget.style.backgroundColor = "transparent";
+                        }
+                      }}
+                    >
+                      <IconComponent
+                        style={{
+                          fontSize: iconSize,
+                          color: isSelected ? "var(--mantine-color-gray-9)" : "var(--mantine-color-gray-7)",
+                        }}
+                      />
+                    </Box>
+                  </Tooltip>
+                );
+              })}
+            </SimpleGrid>
+          </Stack>
+        </Popover.Dropdown>
+      </Popover>
+    </Stack>
+  );
+}
diff --git a/frontend/src/components/tools/automate/ToolList.tsx b/frontend/src/components/tools/automate/ToolList.tsx
index b11140ac5..a21fbdecf 100644
--- a/frontend/src/components/tools/automate/ToolList.tsx
+++ b/frontend/src/components/tools/automate/ToolList.tsx
@@ -63,22 +63,24 @@ export default function ToolList({
                 borderBottomWidth: tool.operation && !tool.configured ? "0" : "1px",
               }}
             >
-              {/* Delete X in top right */}
-              <ActionIcon
-                variant="subtle"
-                size="xs"
-                onClick={() => onToolRemove(index)}
-                title={t("automate.creation.tools.remove", "Remove tool")}
-                style={{
-                  position: "absolute",
-                  top: "4px",
-                  right: "4px",
-                  zIndex: 1,
-                  color: "var(--mantine-color-gray-6)",
-                }}
-              >
-                <CloseIcon style={{ fontSize: 16 }} />
-              </ActionIcon>
+              {/* Delete X in top right - only show for tools after the first 2 */}
+              {index > 1 && (
+                <ActionIcon
+                  variant="subtle"
+                  size="xs"
+                  onClick={() => onToolRemove(index)}
+                  title={t("automate.creation.tools.remove", "Remove tool")}
+                  style={{
+                    position: "absolute",
+                    top: "4px",
+                    right: "4px",
+                    zIndex: 1,
+                    color: "var(--mantine-color-gray-6)",
+                  }}
+                >
+                  <CloseIcon style={{ fontSize: 16 }} />
+                </ActionIcon>
+              )}
 
               <div style={{ paddingRight: "1.25rem" }}>
                 {/* Tool Selection Dropdown with inline settings cog */}
diff --git a/frontend/src/components/tools/automate/iconMap.ts b/frontend/src/components/tools/automate/iconMap.ts
new file mode 100644
index 000000000..cabd4f2da
--- /dev/null
+++ b/frontend/src/components/tools/automate/iconMap.ts
@@ -0,0 +1,92 @@
+import SettingsIcon from '@mui/icons-material/Settings';
+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';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import FolderIcon from '@mui/icons-material/Folder';
+import CloudIcon from '@mui/icons-material/Cloud';
+import StorageIcon from '@mui/icons-material/Storage';
+import SearchIcon from '@mui/icons-material/Search';
+import DownloadIcon from '@mui/icons-material/Download';
+import UploadIcon from '@mui/icons-material/Upload';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import RotateLeftIcon from '@mui/icons-material/RotateLeft';
+import RotateRightIcon from '@mui/icons-material/RotateRight';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import ContentCutIcon from '@mui/icons-material/ContentCut';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import WorkIcon from '@mui/icons-material/Work';
+import BuildIcon from '@mui/icons-material/Build';
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
+import SmartToyIcon from '@mui/icons-material/SmartToy';
+import CheckIcon from '@mui/icons-material/Check';
+import SecurityIcon from '@mui/icons-material/Security';
+import StarIcon from '@mui/icons-material/Star';
+
+export const iconMap = {
+  SettingsIcon,
+  CompressIcon,
+  SwapHorizIcon,
+  CleaningServicesIcon,
+  CropIcon,
+  TextFieldsIcon,
+  PictureAsPdfIcon,
+  EditIcon,
+  DeleteIcon,
+  FolderIcon,
+  CloudIcon,
+  StorageIcon,
+  SearchIcon,
+  DownloadIcon,
+  UploadIcon,
+  PlayArrowIcon,
+  RotateLeftIcon,
+  RotateRightIcon,
+  VisibilityIcon,
+  ContentCutIcon,
+  ContentCopyIcon,
+  WorkIcon,
+  BuildIcon,
+  AutoAwesomeIcon,
+  SmartToyIcon,
+  CheckIcon,
+  SecurityIcon,
+  StarIcon
+};
+
+export const iconOptions = [
+  { value: 'SettingsIcon', label: 'Settings' },
+  { value: 'CompressIcon', label: 'Compress' },
+  { value: 'SwapHorizIcon', label: 'Convert' },
+  { value: 'CleaningServicesIcon', label: 'Clean' },
+  { value: 'CropIcon', label: 'Crop' },
+  { value: 'TextFieldsIcon', label: 'Text' },
+  { value: 'PictureAsPdfIcon', label: 'PDF' },
+  { value: 'EditIcon', label: 'Edit' },
+  { value: 'DeleteIcon', label: 'Delete' },
+  { value: 'FolderIcon', label: 'Folder' },
+  { value: 'CloudIcon', label: 'Cloud' },
+  { value: 'StorageIcon', label: 'Storage' },
+  { value: 'SearchIcon', label: 'Search' },
+  { value: 'DownloadIcon', label: 'Download' },
+  { value: 'UploadIcon', label: 'Upload' },
+  { value: 'PlayArrowIcon', label: 'Play' },
+  { value: 'RotateLeftIcon', label: 'Rotate Left' },
+  { value: 'RotateRightIcon', label: 'Rotate Right' },
+  { value: 'VisibilityIcon', label: 'View' },
+  { value: 'ContentCutIcon', label: 'Cut' },
+  { value: 'ContentCopyIcon', label: 'Copy' },
+  { value: 'WorkIcon', label: 'Work' },
+  { value: 'BuildIcon', label: 'Build' },
+  { value: 'AutoAwesomeIcon', label: 'Magic' },
+  { value: 'SmartToyIcon', label: 'Robot' },
+  { value: 'CheckIcon', label: 'Check' },
+  { value: 'SecurityIcon', label: 'Security' },
+  { value: 'StarIcon', label: 'Star' }
+];
+
+export type IconKey = keyof typeof iconMap;
\ No newline at end of file
diff --git a/frontend/src/components/tools/compress/CompressSettings.tsx b/frontend/src/components/tools/compress/CompressSettings.tsx
index d82a99453..42d270abb 100644
--- a/frontend/src/components/tools/compress/CompressSettings.tsx
+++ b/frontend/src/components/tools/compress/CompressSettings.tsx
@@ -23,7 +23,7 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
         <div style={{ display: 'flex', gap: '4px' }}>
           <Button
             variant={parameters.compressionMethod === 'quality' ? 'filled' : 'outline'}
-            color={parameters.compressionMethod === 'quality' ? 'blue' : 'gray'}
+            color={parameters.compressionMethod === 'quality' ? 'blue' : 'var(--text-muted)'}
             onClick={() => onParameterChange('compressionMethod', 'quality')}
             disabled={disabled}
             style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
@@ -34,7 +34,7 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
           </Button>
           <Button
             variant={parameters.compressionMethod === 'filesize' ? 'filled' : 'outline'}
-            color={parameters.compressionMethod === 'filesize' ? 'blue' : 'gray'}
+            color={parameters.compressionMethod === 'filesize' ? 'blue' : 'var(--text-muted)'}
             onClick={() => onParameterChange('compressionMethod', 'filesize')}
             disabled={disabled}
             style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
diff --git a/frontend/src/contexts/ToolWorkflowContext.tsx b/frontend/src/contexts/ToolWorkflowContext.tsx
index 2bbb3c9f4..2ab92572b 100644
--- a/frontend/src/contexts/ToolWorkflowContext.tsx
+++ b/frontend/src/contexts/ToolWorkflowContext.tsx
@@ -86,6 +86,10 @@ interface ToolWorkflowContextValue extends ToolWorkflowState {
   selectTool: (toolId: string) => void;
   clearToolSelection: () => void;
 
+  // Tool Reset Actions
+  registerToolReset: (toolId: string, resetFunction: () => void) => void;
+  resetTool: (toolId: string) => void;
+
   // Workflow Actions (compound actions)
   handleToolSelect: (toolId: string) => void;
   handleBackToTools: () => void;
@@ -106,16 +110,19 @@ interface ToolWorkflowProviderProps {
 export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
   const [state, dispatch] = useReducer(toolWorkflowReducer, initialState);
 
+  // Store reset functions for tools
+  const [toolResetFunctions, setToolResetFunctions] = React.useState<Record<string, () => void>>({});
+
   // Navigation actions and state are available since we're inside NavigationProvider
   const { actions } = useNavigationActions();
   const navigationState = useNavigationState();
-  
+
   // Tool management hook
   const {
     toolRegistry,
     getSelectedTool,
   } = useToolManagement();
-  
+
   // Get selected tool from navigation context
   const selectedTool = getSelectedTool(navigationState.selectedToolKey);
 
@@ -147,13 +154,29 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     dispatch({ type: 'SET_SEARCH_QUERY', payload: query });
   }, []);
 
+  // Tool reset methods
+  const registerToolReset = useCallback((toolId: string, resetFunction: () => void) => {
+    setToolResetFunctions(prev => ({ ...prev, [toolId]: resetFunction }));
+  }, []);
+
+  const resetTool = useCallback((toolId: string) => {
+    // Use the current state directly instead of depending on the state in the closure
+    setToolResetFunctions(current => {
+      const resetFunction = current[toolId];
+      if (resetFunction) {
+        resetFunction();
+      }
+      return current; // Return the same state to avoid unnecessary updates
+    });
+  }, []); // Empty dependency array makes this stable
+
   // Workflow actions (compound actions that coordinate multiple state changes)
   const handleToolSelect = useCallback((toolId: string) => {
     actions.handleToolSelect(toolId);
-    
+
     // Clear search query when selecting a tool
     setSearchQuery('');
-    
+
     // Handle view switching logic
     if (toolId === 'allTools' || toolId === 'read' || toolId === 'view-pdf') {
       setLeftPanelView('toolPicker');
@@ -212,6 +235,10 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     selectTool: actions.selectTool,
     clearToolSelection: actions.clearToolSelection,
 
+    // Tool Reset Actions
+    registerToolReset,
+    resetTool,
+
     // Workflow Actions
     handleToolSelect,
     handleBackToTools,
@@ -233,6 +260,8 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     setSearchQuery,
     actions.selectTool,
     actions.clearToolSelection,
+    registerToolReset,
+    resetTool,
     handleToolSelect,
     handleBackToTools,
     handleReaderToggle,
@@ -251,36 +280,6 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
 export function useToolWorkflow(): ToolWorkflowContextValue {
   const context = useContext(ToolWorkflowContext);
   if (!context) {
-    // During development hot reload, temporarily return a safe fallback
-    if (false && process.env.NODE_ENV === 'development') {
-      console.warn('ToolWorkflowContext temporarily unavailable during hot reload, using fallback');
-
-      // Return minimal safe fallback to prevent crashes
-      return {
-        sidebarsVisible: true,
-        leftPanelView: 'toolPicker',
-        readerMode: false,
-        previewFile: null,
-        pageEditorFunctions: null,
-        searchQuery: '',
-        selectedToolKey: null,
-        selectedTool: null,
-        toolRegistry: {},
-        filteredTools: [],
-        isPanelVisible: true,
-        setSidebarsVisible: () => {},
-        setLeftPanelView: () => {},
-        setReaderMode: () => {},
-        setPreviewFile: () => {},
-        setPageEditorFunctions: () => {},
-        setSearchQuery: () => {},
-        selectTool: () => {},
-        clearToolSelection: () => {},
-        handleToolSelect: () => {},
-        handleBackToTools: () => {},
-        handleReaderToggle: () => {}
-      } as ToolWorkflowContextValue;
-    }
 
     console.error('ToolWorkflowContext not found. Current stack:', new Error().stack);
     throw new Error('useToolWorkflow must be used within a ToolWorkflowProvider');
diff --git a/frontend/src/data/useTranslatedToolRegistry.tsx b/frontend/src/data/useTranslatedToolRegistry.tsx
index e239f5bb9..4e441f647 100644
--- a/frontend/src/data/useTranslatedToolRegistry.tsx
+++ b/frontend/src/data/useTranslatedToolRegistry.tsx
@@ -42,6 +42,26 @@ import ChangePermissionsSettings from '../components/tools/changePermissions/Cha
 
 const showPlaceholderTools = true; // Show all tools; grey out unavailable ones in UI
 
+// Convert tool supported file formats
+export const CONVERT_SUPPORTED_FORMATS = [
+            // Microsoft Office
+            "doc", "docx", "dot", "dotx", "csv", "xls", "xlsx", "xlt", "xltx", "slk", "dif", "ppt", "pptx",
+            // OpenDocument
+            "odt", "ott", "ods", "ots", "odp", "otp", "odg", "otg",
+            // Text formats
+            "txt", "text", "xml", "rtf", "html", "lwp", "md",
+            // Images
+            "bmp", "gif", "jpeg", "jpg", "png", "tif", "tiff", "pbm", "pgm", "ppm", "ras", "xbm", "xpm", "svg", "svm", "wmf", "webp",
+            // StarOffice
+            "sda", "sdc", "sdd", "sdw", "stc", "std", "sti", "stw", "sxd", "sxg", "sxi", "sxw",
+            // Email formats
+            "eml",
+            // Archive formats
+            "zip",
+            // Other
+            "dbf", "fods", "vsd", "vor", "vor3", "vor4", "uop", "pct", "ps", "pdf"
+        ];
+
 // Hook to get the translated tool registry
 export function useFlatToolRegistry(): ToolRegistry {
   const { t } = useTranslation();
@@ -394,6 +414,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         categoryId: ToolCategoryId.ADVANCED_TOOLS,
         subcategoryId: SubcategoryId.AUTOMATION,
         maxFiles: -1,
+        supportedFormats: CONVERT_SUPPORTED_FORMATS,
         endpoints: ["handleData"]
     },
     "auto-rename-pdf-file": {
@@ -589,6 +610,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
         subcategoryId: SubcategoryId.GENERAL,
         maxFiles: -1,
+        supportedFormats: CONVERT_SUPPORTED_FORMATS,
         endpoints: [
             "pdf-to-img",
             "img-to-pdf",
@@ -605,24 +627,7 @@ export function useFlatToolRegistry(): ToolRegistry {
             "pdf-to-pdfa",
             "eml-to-pdf"
         ],
-        supportedFormats: [
-            // Microsoft Office
-            "doc", "docx", "dot", "dotx", "csv", "xls", "xlsx", "xlt", "xltx", "slk", "dif", "ppt", "pptx",
-            // OpenDocument
-            "odt", "ott", "ods", "ots", "odp", "otp", "odg", "otg",
-            // Text formats
-            "txt", "text", "xml", "rtf", "html", "lwp", "md",
-            // Images
-            "bmp", "gif", "jpeg", "jpg", "png", "tif", "tiff", "pbm", "pgm", "ppm", "ras", "xbm", "xpm", "svg", "svm", "wmf", "webp",
-            // StarOffice
-            "sda", "sdc", "sdd", "sdw", "stc", "std", "sti", "stw", "sxd", "sxg", "sxi", "sxw",
-            // Email formats
-            "eml",
-            // Archive formats
-            "zip",
-            // Other
-            "dbf", "fods", "vsd", "vor", "vor3", "vor4", "uop", "pct", "ps", "pdf"
-        ],
+
         operationConfig: convertOperationConfig,
         settingsComponent: ConvertSettings
     },
diff --git a/frontend/src/hooks/tools/automate/useAutomateOperation.ts b/frontend/src/hooks/tools/automate/useAutomateOperation.ts
index f1aeaf900..55e1b311c 100644
--- a/frontend/src/hooks/tools/automate/useAutomateOperation.ts
+++ b/frontend/src/hooks/tools/automate/useAutomateOperation.ts
@@ -44,6 +44,6 @@ export function useAutomateOperation() {
     endpoint: '/api/v1/pipeline/handleData', // Not used with customProcessor
     buildFormData: () => new FormData(), // Not used with customProcessor
     customProcessor,
-    filePrefix: AUTOMATION_CONSTANTS.FILE_PREFIX
+    filePrefix: '' // No prefix needed since automation handles naming internally
   });
 }
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/automate/useAutomationForm.ts b/frontend/src/hooks/tools/automate/useAutomationForm.ts
index 7bbe14d9b..deb5fbd2b 100644
--- a/frontend/src/hooks/tools/automate/useAutomationForm.ts
+++ b/frontend/src/hooks/tools/automate/useAutomationForm.ts
@@ -14,6 +14,8 @@ export function useAutomationForm({ mode, existingAutomation, toolRegistry }: Us
   const { t } = useTranslation();
   
   const [automationName, setAutomationName] = useState('');
+  const [automationDescription, setAutomationDescription] = useState('');
+  const [automationIcon, setAutomationIcon] = useState<string>('');
   const [selectedTools, setSelectedTools] = useState<AutomationTool[]>([]);
 
   const getToolName = useCallback((operation: string) => {
@@ -33,6 +35,8 @@ export function useAutomationForm({ mode, existingAutomation, toolRegistry }: Us
   useEffect(() => {
     if ((mode === AutomationMode.SUGGESTED || mode === AutomationMode.EDIT) && existingAutomation) {
       setAutomationName(existingAutomation.name || '');
+      setAutomationDescription(existingAutomation.description || '');
+      setAutomationIcon(existingAutomation.icon || '');
 
       const operations = existingAutomation.operations || [];
       const tools = operations.map((op, index) => {
@@ -101,6 +105,10 @@ export function useAutomationForm({ mode, existingAutomation, toolRegistry }: Us
   return {
     automationName,
     setAutomationName,
+    automationDescription,
+    setAutomationDescription,
+    automationIcon,
+    setAutomationIcon,
     selectedTools,
     setSelectedTools,
     addTool,
diff --git a/frontend/src/hooks/tools/automate/useSavedAutomations.ts b/frontend/src/hooks/tools/automate/useSavedAutomations.ts
index 1f210b432..410ad3217 100644
--- a/frontend/src/hooks/tools/automate/useSavedAutomations.ts
+++ b/frontend/src/hooks/tools/automate/useSavedAutomations.ts
@@ -45,10 +45,27 @@ export function useSavedAutomations() {
     try {
       const { automationStorage } = await import('../../../services/automationStorage');
       
+      // Map suggested automation icons to MUI icon keys
+      const getIconKey = (suggestedIcon: {id: string}): string => {
+        // Check the automation ID or name to determine the appropriate icon
+        switch (suggestedAutomation.id) {
+          case 'secure-pdf-ingestion':
+          case 'secure-workflow':
+            return 'SecurityIcon'; // Security icon for security workflows
+          case 'email-preparation':
+            return 'CompressIcon'; // Compression icon
+          case 'process-images':
+            return 'StarIcon'; // Star icon for process images
+          default:
+            return 'SettingsIcon'; // Default fallback
+        }
+      };
+      
       // Convert suggested automation to saved automation format
       const savedAutomation = {
         name: suggestedAutomation.name,
         description: suggestedAutomation.description,
+        icon: getIconKey(suggestedAutomation.icon),
         operations: suggestedAutomation.operations
       };
       
diff --git a/frontend/src/hooks/tools/automate/useSuggestedAutomations.ts b/frontend/src/hooks/tools/automate/useSuggestedAutomations.ts
index 047f041e4..7250726f1 100644
--- a/frontend/src/hooks/tools/automate/useSuggestedAutomations.ts
+++ b/frontend/src/hooks/tools/automate/useSuggestedAutomations.ts
@@ -117,7 +117,7 @@ export function useSuggestedAutomations(): SuggestedAutomation[] {
       {
         id: "secure-workflow",
         name: t("automation.suggested.secureWorkflow", "Security Workflow"),
-        description: t("automation.suggested.secureWorkflowDesc", "Secures PDF documents by removing potentially malicious content like JavaScript and embedded files, then adds password protection to prevent unauthorized access."),
+        description: t("automation.suggested.secureWorkflowDesc", "Secures PDF documents by removing potentially malicious content like JavaScript and embedded files, then adds password protection to prevent unauthorized access. Password is set to 'password' by default."),
         operations: [
           {
             operation: "sanitize",
diff --git a/frontend/src/hooks/tools/shared/useToolOperation.ts b/frontend/src/hooks/tools/shared/useToolOperation.ts
index 299568afd..abce8bedf 100644
--- a/frontend/src/hooks/tools/shared/useToolOperation.ts
+++ b/frontend/src/hooks/tools/shared/useToolOperation.ts
@@ -156,10 +156,16 @@ export const useToolOperation = <TParams = void>(
 
           const response = await axios.post(endpoint, formData, { responseType: 'blob' });
 
-          // Multi-file responses are typically ZIP files that need extraction
+          // Multi-file responses are typically ZIP files that need extraction, but some may return single PDFs
           if (config.responseHandler) {
             // Use custom responseHandler for multi-file (handles ZIP extraction)
             processedFiles = await config.responseHandler(response.data, validFiles);
+          } else if (response.data.type === 'application/pdf' || 
+                     (response.headers && response.headers['content-type'] === 'application/pdf')) {
+            // Single PDF response (e.g. split with merge option) - use original filename
+            const originalFileName = validFiles[0]?.name || 'document.pdf';
+            const singleFile = new File([response.data], originalFileName, { type: 'application/pdf' });
+            processedFiles = [singleFile];
           } else {
             // Default: assume ZIP response for multi-file endpoints
             processedFiles = await extractZipFiles(response.data);
diff --git a/frontend/src/theme/mantineTheme.ts b/frontend/src/theme/mantineTheme.ts
index 561e456f7..4eebe5f82 100644
--- a/frontend/src/theme/mantineTheme.ts
+++ b/frontend/src/theme/mantineTheme.ts
@@ -107,9 +107,8 @@ export const mantineTheme = createTheme({
         },
       },
     },
-
-    TextInput: {
-      styles: {
+    Textarea: {
+      styles: (theme: any) => ({
         input: {
           backgroundColor: 'var(--bg-surface)',
           borderColor: 'var(--border-default)',
@@ -123,7 +122,43 @@ export const mantineTheme = createTheme({
           color: 'var(--text-secondary)',
           fontWeight: 'var(--font-weight-medium)',
         },
-      },
+      }),
+    },
+
+    TextInput: {
+      styles: (theme: any) => ({
+        input: {
+          backgroundColor: 'var(--bg-surface)',
+          borderColor: 'var(--border-default)',
+          color: 'var(--text-primary)',
+          '&:focus': {
+            borderColor: 'var(--color-primary-500)',
+            boxShadow: '0 0 0 1px var(--color-primary-500)',
+          },
+        },
+        label: {
+          color: 'var(--text-secondary)',
+          fontWeight: 'var(--font-weight-medium)',
+        },
+      }),
+    },
+
+     PasswordInput: {
+      styles: (theme: any) => ({
+        input: {
+          backgroundColor: 'var(--bg-surface)',
+          borderColor: 'var(--border-default)',
+          color: 'var(--text-primary)',
+          '&:focus': {
+            borderColor: 'var(--color-primary-500)',
+            boxShadow: '0 0 0 1px var(--color-primary-500)',
+          },
+        },
+        label: {
+          color: 'var(--text-secondary)',
+          fontWeight: 'var(--font-weight-medium)',
+        },
+      }),
     },
 
     Select: {
diff --git a/frontend/src/tools/Automate.tsx b/frontend/src/tools/Automate.tsx
index e31d1abe3..d5cea69c8 100644
--- a/frontend/src/tools/Automate.tsx
+++ b/frontend/src/tools/Automate.tsx
@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import React, { useState, useMemo, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useFileContext } from "../contexts/FileContext";
 import { useFileSelection } from "../contexts/FileContext";
 import { useNavigation } from "../contexts/NavigationContext";
+import { useToolWorkflow } from "../contexts/ToolWorkflowContext";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 import { createFilesToolStep } from "../components/tools/shared/FilesToolStep";
@@ -21,6 +22,7 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
   const { selectedFiles } = useFileSelection();
   const { setMode } = useNavigation();
+  const { registerToolReset } = useToolWorkflow();
 
   const [currentStep, setCurrentStep] = useState<AutomationStep>(AUTOMATION_STEPS.SELECTION);
   const [stepData, setStepData] = useState<AutomationStepData>({ step: AUTOMATION_STEPS.SELECTION });
@@ -30,6 +32,28 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const hasResults = automateOperation.files.length > 0 || automateOperation.downloadUrl !== null;
   const { savedAutomations, deleteAutomation, refreshAutomations, copyFromSuggested } = useSavedAutomations();
 
+  // Use ref to store the latest reset function to avoid closure issues
+  const resetFunctionRef = React.useRef<() => void>(null);
+
+  // Update ref with latest reset function
+  resetFunctionRef.current = () => {
+    automateOperation.resetResults();
+    automateOperation.clearError();
+    setCurrentStep(AUTOMATION_STEPS.SELECTION);
+    setStepData({ step: AUTOMATION_STEPS.SELECTION });
+  };
+
+  // Register reset function with the tool workflow context - only once on mount
+  React.useEffect(() => {
+    const stableResetFunction = () => {
+      if (resetFunctionRef.current) {
+        resetFunctionRef.current();
+      }
+    };
+
+    registerToolReset('automate', stableResetFunction);
+  }, [registerToolReset]); // Only depend on registerToolReset which should be stable
+
   const handleStepChange = (data: AutomationStepData) => {
     // If navigating away from run step, reset automation results
     if (currentStep === AUTOMATION_STEPS.RUN && data.step !== AUTOMATION_STEPS.RUN) {
@@ -87,6 +111,7 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
                 onError?.(`Failed to copy automation: ${suggestedAutomation.name}`);
               }
             }}
+            toolRegistry={toolRegistry}
           />
         );
 
@@ -132,11 +157,25 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
     content
   });
 
+  // Dynamic file placeholder based on supported types
+  const filesPlaceholder = useMemo(() => {
+    if (currentStep === AUTOMATION_STEPS.RUN && stepData.automation?.operations?.length) {
+      const firstOperation = stepData.automation.operations[0];
+      const toolConfig = toolRegistry[firstOperation.operation];
+
+      // Check if the tool has supportedFormats that include non-PDF formats
+      if (toolConfig?.supportedFormats && toolConfig.supportedFormats.length > 1) {
+        return t('automate.files.placeholder.multiFormat', 'Select files to process (supports various formats)');
+      }
+    }
+    return t('automate.files.placeholder', 'Select PDF files to process with this automation');
+  }, [currentStep, stepData.automation, toolRegistry, t]);
+
   // Always create files step to avoid conditional hook calls
   const filesStep = createFilesToolStep(createStep, {
     selectedFiles,
     isCollapsed: hasResults,
-    placeholder: t('automate.files.placeholder', 'Select files to process with this automation')
+    placeholder: filesPlaceholder
   });
 
   const automationSteps = [
diff --git a/frontend/src/tools/Split.tsx b/frontend/src/tools/Split.tsx
index 580b27c63..73ebdff17 100644
--- a/frontend/src/tools/Split.tsx
+++ b/frontend/src/tools/Split.tsx
@@ -23,9 +23,18 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled(splitParams.getEndpointName());
 
   useEffect(() => {
+    // Only reset results when parameters change, not when files change
     splitOperation.resetResults();
     onPreviewFile?.(null);
-  }, [splitParams.parameters, selectedFiles]); 
+  }, [splitParams.parameters]);
+
+  useEffect(() => {
+    // Reset results when selected files change (user selected different files)
+    if (selectedFiles.length > 0) {
+      splitOperation.resetResults();
+      onPreviewFile?.(null);
+    }
+  }, [selectedFiles]);
   const handleSplit = async () => {
     try {
       await splitOperation.executeOperation(splitParams.parameters, selectedFiles);
@@ -51,7 +60,7 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   };
 
   const hasFiles = selectedFiles.length > 0;
-  const hasResults = splitOperation.downloadUrl !== null;
+  const hasResults = splitOperation.files.length > 0 || splitOperation.downloadUrl !== null;
   const settingsCollapsed = !hasFiles || hasResults;
 
   return createToolFlow({
diff --git a/frontend/src/types/automation.ts b/frontend/src/types/automation.ts
index 8d2cb5ae8..8d9667fcf 100644
--- a/frontend/src/types/automation.ts
+++ b/frontend/src/types/automation.ts
@@ -11,6 +11,7 @@ export interface AutomationConfig {
   id: string;
   name: string;
   description?: string;
+  icon?: string;
   operations: AutomationOperation[];
   createdAt: string;
   updatedAt: string;
diff --git a/frontend/src/utils/automationExecutor.ts b/frontend/src/utils/automationExecutor.ts
index 9ef1f6e2f..e33eb8aee 100644
--- a/frontend/src/utils/automationExecutor.ts
+++ b/frontend/src/utils/automationExecutor.ts
@@ -14,6 +14,19 @@ export const executeToolOperation = async (
   parameters: any, 
   files: File[],
   toolRegistry: ToolRegistry
+): Promise<File[]> => {
+  return executeToolOperationWithPrefix(operationName, parameters, files, toolRegistry, AUTOMATION_CONSTANTS.FILE_PREFIX);
+};
+
+/**
+ * Execute a tool operation with custom prefix
+ */
+export const executeToolOperationWithPrefix = async (
+  operationName: string, 
+  parameters: any, 
+  files: File[],
+  toolRegistry: ToolRegistry,
+  filePrefix: string = AUTOMATION_CONSTANTS.FILE_PREFIX
 ): Promise<File[]> => {
   console.log(`🔧 Executing tool: ${operationName}`, { parameters, fileCount: files.length });
   
@@ -51,15 +64,37 @@ export const executeToolOperation = async (
 
       console.log(`📥 Response status: ${response.status}, size: ${response.data.size} bytes`);
 
-      // Multi-file responses are typically ZIP files, but may be single files
-      const result = await AutomationFileProcessor.extractAutomationZipFiles(response.data);
+      // Multi-file responses are typically ZIP files, but may be single files (e.g. split with merge=true)
+      let result;
+      if (response.data.type === 'application/pdf' || 
+          (response.headers && response.headers['content-type'] === 'application/pdf')) {
+        // Single PDF response (e.g. split with merge option) - use original filename
+        const originalFileName = files[0]?.name || 'document.pdf';
+        const singleFile = new File([response.data], originalFileName, { type: 'application/pdf' });
+        result = {
+          success: true,
+          files: [singleFile],
+          errors: []
+        };
+      } else {
+        // ZIP response
+        result = await AutomationFileProcessor.extractAutomationZipFiles(response.data);
+      }
       
       if (result.errors.length > 0) {
         console.warn(`⚠️ File processing warnings:`, result.errors);
       }
       
-      console.log(`📁 Processed ${result.files.length} files from response`);
-      return result.files;
+      // Apply prefix to files, replacing any existing prefix
+      const processedFiles = filePrefix 
+        ? result.files.map(file => {
+            const nameWithoutPrefix = file.name.replace(/^[^_]*_/, '');
+            return new File([file], `${filePrefix}${nameWithoutPrefix}`, { type: file.type });
+          })
+        : result.files;
+      
+      console.log(`📁 Processed ${processedFiles.length} files from response`);
+      return processedFiles;
 
     } else {
       // Single-file processing - separate API call per file
@@ -83,11 +118,12 @@ export const executeToolOperation = async (
 
         console.log(`📥 Response ${i+1} status: ${response.status}, size: ${response.data.size} bytes`);
 
-        // Create result file
+        // Create result file with automation prefix
+        
         const resultFile = ResourceManager.createResultFile(
           response.data, 
           file.name,
-          AUTOMATION_CONSTANTS.FILE_PREFIX
+          filePrefix
         );
         resultFiles.push(resultFile);
         console.log(`✅ Created result file: ${resultFile.name}`);
@@ -123,6 +159,7 @@ export const executeAutomationSequence = async (
   }
 
   let currentFiles = [...initialFiles];
+  const automationPrefix = automation.name ? `${automation.name}_` : 'automated_';
 
   for (let i = 0; i < automation.operations.length; i++) {
     const operation = automation.operations[i];
@@ -134,11 +171,12 @@ export const executeAutomationSequence = async (
     try {
       onStepStart?.(i, operation.operation);
       
-      const resultFiles = await executeToolOperation(
+      const resultFiles = await executeToolOperationWithPrefix(
         operation.operation, 
         operation.parameters || {}, 
         currentFiles,
-        toolRegistry
+        toolRegistry,
+        i === automation.operations.length - 1 ? automationPrefix : '' // Only add prefix to final step
       );
       
       console.log(`✅ Step ${i + 1} completed: ${resultFiles.length} result files`);
diff --git a/frontend/src/utils/fileResponseUtils.ts b/frontend/src/utils/fileResponseUtils.ts
index 6e4422099..472cccb05 100644
--- a/frontend/src/utils/fileResponseUtils.ts
+++ b/frontend/src/utils/fileResponseUtils.ts
@@ -10,7 +10,15 @@
 export const getFilenameFromHeaders = (contentDisposition: string = ''): string | null => {
   const match = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
   if (match && match[1]) {
-    return match[1].replace(/['"]/g, '');
+    const filename = match[1].replace(/['"]/g, '');
+    
+    // Decode URL-encoded characters (e.g., %20 -> space)
+    try {
+      return decodeURIComponent(filename);
+    } catch (error) {
+      // If decoding fails, return the original filename
+      return filename;
+    }
   }
   return null;
 };