Add clear all workflows functionality and confirmation dialog

- Enhanced WorkflowList component to include a "Clear All" button for deleting all workflows, with a confirmation prompt to prevent accidental deletions.
- Updated WorkflowToolbar component to implement a dialog for confirming the reset of all nodes in the current workflow, ensuring user awareness of irreversible actions.
- Improved user interface with visual feedback for critical actions, enhancing overall usability and safety in workflow management.

src/components/WorkflowList.tsx

@@ -28,7 +28,8 @@ export const WorkflowList: React.FC<WorkflowListProps> = ({
   onOpenWorkflow,
   onCreateWorkflow,
 }) => {
-  const { workflows, deleteWorkflow, updateWorkflow } = useWorkflowStore();
+  const { workflows, deleteWorkflow, updateWorkflow, clearAllWorkflows } =
+    useWorkflowStore();
   const [newWorkflowName, setNewWorkflowName] = useState("");
   const [showCreateForm, setShowCreateForm] = useState(false);
   const [editingWorkflowId, setEditingWorkflowId] = useState<string | null>(
@@ -102,6 +103,16 @@ export const WorkflowList: React.FC<WorkflowListProps> = ({
     setShowOnboarding(true);
   };
 
+  const handleClearAllWorkflows = () => {
+    if (
+      window.confirm(
+        "Are you sure you want to permanently delete ALL workflows? This cannot be undone."
+      )
+    ) {
+      clearAllWorkflows();
+    }
+  };
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
       {/* Hero Section */}
@@ -206,6 +217,16 @@ export const WorkflowList: React.FC<WorkflowListProps> = ({
               <Plus className="w-4 h-4" />
               <span className="font-medium">New Workflow</span>
             </button>
+            {workflows.length > 0 && (
+              <button
+                onClick={handleClearAllWorkflows}
+                className="group flex items-center space-x-2 px-6 py-3 bg-white text-red-600 rounded-lg hover:bg-red-50 transition-all duration-200 shadow-sm hover:shadow-md border border-red-200"
+                title="Delete all workflows"
+              >
+                <Trash2 className="w-4 h-4" />
+                <span className="font-medium">Clear All</span>
+              </button>
+            )}
           </div>
         </div>
 

src/components/WorkflowToolbar.tsx

@@ -22,6 +22,13 @@ import { ApiKeysSettings } from "./ApiKeysSettings";
 import { DatabaseConnectionManager } from "./DatabaseConnectionManager";
 import { WorkflowScheduler } from "./WorkflowScheduler";
 import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "./ui/dialog";
 
 export const WorkflowToolbar: React.FC = () => {
   const {
@@ -39,6 +46,7 @@ export const WorkflowToolbar: React.FC = () => {
   const [showDatabaseManager, setShowDatabaseManager] = useState(false);
   const [showScheduler, setShowScheduler] = useState(false);
   const [showSaveSuccess, setShowSaveSuccess] = useState(false);
+  const [showResetConfirm, setShowResetConfirm] = useState(false);
 
   const handleSave = () => {
     if (currentWorkflow) {
@@ -81,7 +89,12 @@ export const WorkflowToolbar: React.FC = () => {
   };
 
   const handleClear = () => {
+    setShowResetConfirm(true);
+  };
+
+  const confirmClearNodes = () => {
     clearAllNodes();
+    setShowResetConfirm(false);
   };
 
   if (!currentWorkflow) return null;
@@ -262,6 +275,33 @@ export const WorkflowToolbar: React.FC = () => {
           workflowId={currentWorkflow?.id}
         />
       )}
+
+      {/* Confirm Reset (Clear All Nodes) Dialog */}
+      <Dialog open={showResetConfirm} onOpenChange={setShowResetConfirm}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>Reset workflow?</DialogTitle>
+          </DialogHeader>
+          <div className="text-sm text-gray-600">
+            This will remove all nodes and connections from the current
+            workflow. This action cannot be undone.
+          </div>
+          <DialogFooter className="mt-4">
+            <Button
+              variant="secondary"
+              onClick={() => setShowResetConfirm(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              className="bg-red-600 hover:bg-red-700"
+              onClick={confirmClearNodes}
+            >
+              Yes, clear all
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 };