Names, chains and tooltips

frontend/src/components/tools/automate/AutomationCreation.tsx

@@ -6,6 +6,7 @@ import {
   Stack,
   Group,
   TextInput,
+  Textarea,
   Divider,
   Modal
 } from '@mantine/core';
@@ -32,6 +33,8 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
   const {
     automationName,
     setAutomationName,
+    automationDescription,
+    setAutomationDescription,
     automationIcon,
     setAutomationIcon,
     selectedTools,
@@ -103,7 +106,7 @@ 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,
@@ -173,6 +176,16 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
           />
         </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}
+        />
+
 
         {/* Selected Tools List */}
         {selectedTools.length > 0 && (

frontend/src/components/tools/automate/AutomationEntry.tsx

@@ -64,7 +64,8 @@ export default function AutomationEntry({
 
   // 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}`}>
@@ -93,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>
     );
   };
@@ -234,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" 

frontend/src/components/tools/automate/AutomationSelection.tsx

@@ -53,6 +53,7 @@ export default function AutomationSelection({
           <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)}

frontend/src/hooks/tools/automate/useAutomationForm.ts

@@ -14,6 +14,7 @@ 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[]>([]);
 
@@ -34,6 +35,7 @@ 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 || [];
@@ -103,6 +105,8 @@ export function useAutomationForm({ mode, existingAutomation, toolRegistry }: Us
   return {
     automationName,
     setAutomationName,
+    automationDescription,
+    setAutomationDescription,
     automationIcon,
     setAutomationIcon,
     selectedTools,

frontend/src/theme/mantineTheme.ts

@@ -107,6 +107,23 @@ export const mantineTheme = createTheme({
         },
       },
     },
+    Textarea: {
+      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)',
+        },
+      }),
+    },
 
     TextInput: {
       styles: (theme: any) => ({