From e2fc2478ccdfa9ae9d7957a7d0f1051d19802ad6 Mon Sep 17 00:00:00 2001
From: Soumyadas15 <saumyadas2017@gmail.com>
Date: Sun, 15 Jun 2025 16:10:58 +0530
Subject: [PATCH] chore(dev): workflow ui improvement

---
 backend/workflows/converter.py                |  13 +-
 .../src/app/(dashboard)/workflows/page.tsx    | 176 ++++++++++--------
 .../src/components/workflows/NodePalette.tsx  |  31 +--
 .../components/workflows/WorkflowBuilder.tsx  |   1 +
 .../workflows/nodes/ToolConnectionNode.tsx    |  60 +++++-
 5 files changed, 185 insertions(+), 96 deletions(-)

diff --git a/backend/workflows/converter.py b/backend/workflows/converter.py
index fbe1843d..18e40539 100644
--- a/backend/workflows/converter.py
+++ b/backend/workflows/converter.py
@@ -231,7 +231,13 @@ class WorkflowConverter:
             tool_data = tool_node.get('data', {})
             tool_name = tool_data.get('nodeId', tool_data.get('label', 'Unknown Tool'))
             tool_desc = tool_data.get('description', 'No description available')
-            prompt_parts.append(f"- **{tool_name}**: {tool_desc}")
+            tool_instructions = tool_data.get('instructions', '')
+            
+            # Build tool description with instructions if provided
+            tool_description = f"- **{tool_name}**: {tool_desc}"
+            if tool_instructions:
+                tool_description += f" - Instructions: {tool_instructions}"
+            prompt_parts.append(tool_description)
             
             # Collect tool ID for XML examples
             tool_id = tool_data.get('nodeId')
@@ -327,6 +333,7 @@ class WorkflowConverter:
         data = node.get('data', {})
         name = data.get('label', 'Tool')
         tool_id = data.get('nodeId', 'unknown_tool')
+        instructions = data.get('instructions', '')
         
         input_connections = self._find_node_inputs(node.get('id'), edges)
         output_connections = self._find_node_outputs(node.get('id'), edges)
@@ -337,6 +344,10 @@ class WorkflowConverter:
             f"**Purpose**: Provides {name.lower()} functionality to the workflow",
         ]
         
+        # Add instructions if provided
+        if instructions:
+            description.append(f"**Instructions**: {instructions}")
+        
         if input_connections:
             description.append(f"**Connected to agents**: {', '.join(input_connections)}")
         
diff --git a/frontend/src/app/(dashboard)/workflows/page.tsx b/frontend/src/app/(dashboard)/workflows/page.tsx
index c65912c1..ce70aced 100644
--- a/frontend/src/app/(dashboard)/workflows/page.tsx
+++ b/frontend/src/app/(dashboard)/workflows/page.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Plus, Play, Edit, Trash2, Clock, CheckCircle, XCircle, AlertCircle, Check, X } from "lucide-react";
+import { Plus, Play, Edit, Trash2, Clock, CheckCircle, XCircle, AlertCircle, Check, X, Workflow as WorkflowIcon } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { 
@@ -234,6 +234,23 @@ export default function WorkflowsPage() {
     }
   };
 
+  const getWorkflowColor = (status: string) => {
+    switch (status) {
+      case "active":
+        return "#10b981"; // green-500
+      case "draft":
+        return "#f59e0b"; // amber-500
+      case "paused":
+        return "#6b7280"; // gray-500
+      case "disabled":
+        return "#ef4444"; // red-500
+      case "archived":
+        return "#9ca3af"; // gray-400
+      default:
+        return "#8b5cf6"; // violet-500
+    }
+  };
+
   if (loading) {
     return (
       <div className="max-w-7xl mx-auto p-6 space-y-6">
@@ -322,91 +339,96 @@ export default function WorkflowsPage() {
       ) : (
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
           {workflows.map((workflow) => (
-            <Card key={workflow.id}>
-              <CardHeader>
-                <div className="flex justify-between items-start">
-                  <div className="space-y-1 flex-1 mr-2">
-                    {editingWorkflowId === workflow.id ? (
-                      <div className="flex items-center gap-2">
-                        <Input
-                          value={editingName}
-                          onChange={(e) => setEditingName(e.target.value)}
-                          className="text-lg font-semibold h-8"
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter') {
-                              handleSaveEditName(workflow.id);
-                            } else if (e.key === 'Escape') {
-                              handleCancelEditName();
-                            }
-                          }}
-                          autoFocus
-                        />
-                        <div className="flex gap-1">
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            className="h-8 w-8 p-0"
-                            onClick={() => handleSaveEditName(workflow.id)}
-                            disabled={updatingWorkflows.has(workflow.id)}
-                          >
-                            {updatingWorkflows.has(workflow.id) ? (
-                              <div className="animate-spin rounded-full h-3 w-3 border-b border-current" />
-                            ) : (
-                              <Check className="h-3 w-3 text-green-600" />
-                            )}
-                          </Button>
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            className="h-8 w-8 p-0"
-                            onClick={handleCancelEditName}
-                            disabled={updatingWorkflows.has(workflow.id)}
-                          >
-                            <X className="h-3 w-3 text-red-600" />
-                          </Button>
-                        </div>
-                      </div>
-                    ) : (
-                      <CardTitle 
-                        className="text-lg cursor-pointer hover:text-primary transition-colors"
-                        onClick={() => handleStartEditName(workflow)}
-                      >
-                        {workflow.definition.name || workflow.name}
-                      </CardTitle>
-                    )}
-                    <CardDescription>{workflow.definition.description || workflow.description}</CardDescription>
-                  </div>
-                  {getStatusBadge(workflow.status)}
+            <div 
+              key={workflow.id}
+              className="bg-neutral-100 dark:bg-sidebar border border-border rounded-2xl overflow-hidden hover:bg-muted/50 transition-all duration-200 group"
+            >
+              {/* Colorful Header */}
+              <div 
+                className="h-24 flex items-center justify-center relative bg-gradient-to-br from-opacity-90 to-opacity-100"
+                style={{ backgroundColor: getWorkflowColor(workflow.status) }}
+              >
+                <div className="text-3xl text-white drop-shadow-sm">
+                  <WorkflowIcon />
                 </div>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4">
+                <div className="absolute top-3 right-3">
+                  {getStatusIcon(workflow.status)}
+                </div>
+              </div>
+
+              {/* Content */}
+              <div className="p-4">
+                <div className="space-y-3">
+                  {/* Title and Status */}
+                  <div className="flex justify-between items-start gap-2">
+                    <div className="flex-1 min-w-0">
+                      {editingWorkflowId === workflow.id ? (
+                        <div className="flex items-center gap-2">
+                          <Input
+                            value={editingName}
+                            onChange={(e) => setEditingName(e.target.value)}
+                            className="text-lg font-semibold h-8"
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter') {
+                                handleSaveEditName(workflow.id);
+                              } else if (e.key === 'Escape') {
+                                handleCancelEditName();
+                              }
+                            }}
+                            autoFocus
+                          />
+                          <div className="flex gap-1">
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              className="h-8 w-8 p-0"
+                              onClick={() => handleSaveEditName(workflow.id)}
+                              disabled={updatingWorkflows.has(workflow.id)}
+                            >
+                              {updatingWorkflows.has(workflow.id) ? (
+                                <div className="animate-spin rounded-full h-3 w-3 border-b border-current" />
+                              ) : (
+                                <Check className="h-3 w-3 text-green-600" />
+                              )}
+                            </Button>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              className="h-8 w-8 p-0"
+                              onClick={handleCancelEditName}
+                              disabled={updatingWorkflows.has(workflow.id)}
+                            >
+                              <X className="h-3 w-3 text-red-600" />
+                            </Button>
+                          </div>
+                        </div>
+                      ) : (
+                        <h3 
+                          className="text-foreground font-medium text-lg line-clamp-1 cursor-pointer hover:text-primary transition-colors"
+                          onClick={() => handleStartEditName(workflow)}
+                        >
+                          {workflow.definition.name || workflow.name}
+                        </h3>
+                      )}
+                    </div>
+                    {getStatusBadge(workflow.status)}
+                  </div>
+                  <p className="text-muted-foreground text-sm line-clamp-2 min-h-[2.5rem]">
+                    {workflow.definition.description || workflow.description || 'No description provided'}
+                  </p>
                   <div className="flex gap-2 pt-2">
                     <Link href={`/workflows/builder/${workflow.id}`} className="flex-1">
                       <Button variant="outline" size="sm" className="w-full">
-                        <Edit className="mr-2 h-3 w-3" />
+                        <Edit className="h-3 w-3" />
                         Edit
                       </Button>
                     </Link>
-                    <Button 
-                      variant="outline" 
-                      size="sm" 
-                      className="flex-1"
-                      onClick={() => handleRunWorkflow(workflow.id)}
-                      disabled={executingWorkflows.has(workflow.id) || workflow.status !== 'active'}
-                    >
-                      {executingWorkflows.has(workflow.id) ? (
-                        <div className="animate-spin rounded-full h-3 w-3 border-b border-current mr-2" />
-                      ) : (
-                        <Play className="mr-2 h-3 w-3" />
-                      )}
-                      Run
-                    </Button>
                     <AlertDialog>
                       <AlertDialogTrigger asChild>
                         <Button 
                           variant="ghost" 
                           size="sm"
+                          className="h-8 w-8 p-0 hover:bg-destructive/10 hover:text-destructive text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity"
                           disabled={deletingWorkflows.has(workflow.id)}
                         >
                           {deletingWorkflows.has(workflow.id) ? (
@@ -428,7 +450,7 @@ export default function WorkflowsPage() {
                           <AlertDialogCancel>Cancel</AlertDialogCancel>
                           <AlertDialogAction
                             onClick={() => handleDeleteWorkflow(workflow.id)}
-                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                            className="bg-destructive text-white hover:bg-destructive/90"
                           >
                             Delete Workflow
                           </AlertDialogAction>
@@ -437,8 +459,8 @@ export default function WorkflowsPage() {
                     </AlertDialog>
                   </div>
                 </div>
-              </CardContent>
-            </Card>
+              </div>
+            </div>
           ))}
         </div>
       )}
diff --git a/frontend/src/components/workflows/NodePalette.tsx b/frontend/src/components/workflows/NodePalette.tsx
index 1c625f4b..7d3b85fb 100644
--- a/frontend/src/components/workflows/NodePalette.tsx
+++ b/frontend/src/components/workflows/NodePalette.tsx
@@ -213,15 +213,15 @@ export default function NodePalette() {
           <Tabs value={selectedCategory} onValueChange={setSelectedCategory}>
             <TabsList className="grid w-full grid-cols-3">
               <TabsTrigger value="input">
-                <Play className="h-4 w-4 mr-2" />
+                <Play className="h-4 w-4" />
                 Input
               </TabsTrigger>
               <TabsTrigger value="agent">
-                <Bot className="h-4 w-4 mr-2" />
+                <Bot className="h-4 w-4" />
                 Agents
               </TabsTrigger>
               <TabsTrigger value="tools">
-                <Wrench className="h-4 w-4 mr-2" />
+                <Wrench className="h-4 w-4" />
                 Tools
               </TabsTrigger>
             </TabsList>
@@ -257,8 +257,8 @@ export default function NodePalette() {
                           variables: {}
                         }}
                       >
-                        <Card className="group transition-all duration-200 border hover:border-primary/50 cursor-move border-primary/30 bg-primary/5">
-                          <CardHeader className="p-4 py-0">
+                        <Card className="py-2 group transition-all duration-200 border hover:border-primary/50 cursor-move border-primary/30 bg-primary/5">
+                          <CardContent className="p-2 py-0">
                             <div className="flex items-start gap-3">
                               <div className="p-2 rounded-lg bg-primary/20 border border-primary/30 group-hover:bg-primary/30 transition-colors">
                                 <Icon className="h-5 w-5 text-primary" />
@@ -268,12 +268,12 @@ export default function NodePalette() {
                                   {node.name}
                                   <Badge variant="outline" className="text-xs">Required</Badge>
                                 </CardTitle>
-                                <CardDescription className="text-xs mt-1 line-clamp-2">
+                                <CardDescription className="text-xs line-clamp-2">
                                   {node.description}
                                 </CardDescription>
                               </div>
                             </div>
-                          </CardHeader>
+                          </CardContent>
                         </Card>
                       </DraggableNode>
                     );
@@ -310,9 +310,9 @@ export default function NodePalette() {
                           config: {},
                         }}
                       >
-                        <Card className="group transition-all duration-200 border hover:border-primary/50 cursor-move">
-                          <CardHeader className="p-4 py-0">
-                            <div className="flex items-start gap-3">
+                        <Card className="py-2 group transition-all duration-200 border hover:border-primary/50 cursor-move">
+                          <CardContent className="p-2 py-0">
+                            <div className="flex items-center gap-3">
                               <div className="p-2 rounded-lg bg-primary/10 border border-primary/20 group-hover:bg-primary/20 transition-colors">
                                 <Icon className="h-5 w-5 text-primary" />
                               </div>
@@ -320,12 +320,12 @@ export default function NodePalette() {
                                 <CardTitle className="text-sm font-semibold leading-tight">
                                   {node.name}
                                 </CardTitle>
-                                <CardDescription className="text-xs mt-1 line-clamp-2">
+                                <CardDescription className="text-xs line-clamp-2">
                                   {node.description}
                                 </CardDescription>
                               </div>
                             </div>
-                          </CardHeader>
+                          </CardContent>
                         </Card>
                       </DraggableNode>
                     );
@@ -361,10 +361,11 @@ export default function NodePalette() {
                           label: node.name,
                           nodeId: node.id,
                           config: {},
+                          instructions: "",
                         }}
                       >
-                        <Card className="group transition-all duration-200 border hover:border-primary/50 cursor-move">
-                          <CardHeader className="p-4 py-0">
+                        <Card className="py-2 group transition-all duration-200 border hover:border-primary/50 cursor-move">
+                          <CardContent className="p-2 py-0">
                             <div className="flex items-start gap-3">
                               <div className="p-2 rounded-lg bg-primary/10 border border-primary/20 group-hover:bg-primary/20 transition-colors">
                                 <Icon className="h-5 w-5 text-primary" />
@@ -378,7 +379,7 @@ export default function NodePalette() {
                                 </CardDescription>
                               </div>
                             </div>
-                          </CardHeader>
+                          </CardContent>
                         </Card>
                       </DraggableNode>
                     );
diff --git a/frontend/src/components/workflows/WorkflowBuilder.tsx b/frontend/src/components/workflows/WorkflowBuilder.tsx
index bc19fb6f..fe9ef851 100644
--- a/frontend/src/components/workflows/WorkflowBuilder.tsx
+++ b/frontend/src/components/workflows/WorkflowBuilder.tsx
@@ -84,6 +84,7 @@ const initialNodes: Node[] = [
     data: { 
       label: 'Web Search', 
       nodeId: 'web_search_tool',
+      instructions: '',
       outputConnections: [
         {
           id: 'agent-1',
diff --git a/frontend/src/components/workflows/nodes/ToolConnectionNode.tsx b/frontend/src/components/workflows/nodes/ToolConnectionNode.tsx
index 0e303000..09c2a4af 100644
--- a/frontend/src/components/workflows/nodes/ToolConnectionNode.tsx
+++ b/frontend/src/components/workflows/nodes/ToolConnectionNode.tsx
@@ -1,9 +1,14 @@
 "use client";
 
-import { memo } from "react";
+import { memo, useState } from "react";
 import { Handle, Position, NodeProps } from "@xyflow/react";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { 
   Database, 
   FileText, 
@@ -14,18 +19,24 @@ import {
   Cloud,
   Send,
   Settings,
-  Wrench
+  Wrench,
+  ChevronDown,
+  ChevronUp
 } from "lucide-react";
+import { useWorkflow } from "../WorkflowContext";
 
 interface ToolConnectionNodeData {
   label: string;
   nodeId?: string;
   toolType?: string;
   config?: any;
+  instructions?: string;
 }
 
-const ToolConnectionNode = memo(({ data, selected }: NodeProps) => {
+const ToolConnectionNode = memo(({ data, selected, id }: NodeProps) => {
   const nodeData = data as unknown as ToolConnectionNodeData;
+  const [isConfigOpen, setIsConfigOpen] = useState(false);
+  const { updateNodeData } = useWorkflow();
   
   const getToolConfig = () => {
     const toolId = nodeData.nodeId || nodeData.toolType;
@@ -134,6 +145,49 @@ const ToolConnectionNode = memo(({ data, selected }: NodeProps) => {
               <span className="text-xs text-muted-foreground">Ready</span>
             </div>
           </div>
+
+          {/* Show instructions preview if available */}
+          {nodeData.instructions && !isConfigOpen && (
+            <div className="text-xs text-muted-foreground bg-muted/50 p-2 rounded border">
+              <strong>Instructions:</strong> {nodeData.instructions.length > 50 
+                ? `${nodeData.instructions.substring(0, 50)}...` 
+                : nodeData.instructions}
+            </div>
+          )}
+
+          <Separator />
+
+          {/* Configuration Toggle */}
+          <Collapsible open={isConfigOpen} onOpenChange={setIsConfigOpen}>
+            <CollapsibleTrigger asChild>
+              <Button variant="ghost" size="sm" className="w-full justify-between p-2">
+                <span className="flex items-center gap-2">
+                  <Settings className="h-4 w-4" />
+                  Configure
+                </span>
+                {isConfigOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+              </Button>
+            </CollapsibleTrigger>
+            
+            <CollapsibleContent className="space-y-4 mt-3">
+              {/* Instructions Configuration */}
+              <div className="space-y-2">
+                <Label htmlFor={`instructions-${id}`} className="text-sm font-medium">
+                  Tool Instructions
+                </Label>
+                <Textarea
+                  id={`instructions-${id}`}
+                  placeholder="Provide specific instructions for how this tool should be used in the workflow..."
+                  value={nodeData.instructions || ''}
+                  onChange={(e) => updateNodeData?.(id!, { instructions: e.target.value })}
+                  className="min-h-[80px] text-sm"
+                />
+                <p className="text-xs text-muted-foreground">
+                  These instructions will be included in the workflow prompt to guide how the agent uses this tool.
+                </p>
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
         </CardContent>
       </Card>